/* _welcome.css - HAND-WRITTEN, like _ours.css, _listing.css, _square.css and
   _collection.css. The home page's hand-written sections, loaded through
   config('design.extras'):

     .wl              the welcome (components/hs-welcome-lines.tsx) - a label on
                      the left margin, the paragraph centred on the page, and the
                      words lighting a few at a time as the section crosses;
     .doors-on-paper  the six doors, on paper rather than stone;
     .today           Scotland today, on oat with room around it.

   9 September 2026. */

/* ---- the welcome ----
 *
 * The reference Jack sent sets a small label against a large paragraph and
 * lets the type do everything else. Ours is the same shape in Larken, on the
 * paper the rest of the page is already on.
 *
 * The words carry `--lit`, nought to one, which the component sets as the
 * section comes up the screen. The colour is mixed from it, so there is no
 * second copy of the text and nothing is clipped or masked - the words simply
 * warm from faded to full, a few at a time.
 */

.wl { background: var(--paper); padding-bottom: 0 }

/* Two paddings, one gap.

   A .wl following another section had that section's bottom padding and its
   own top padding stacked - 129.6 and 129.6 on the listing pages, a quarter of
   a screen between a grid of amenities and the paragraph about them. The
   section above gives up its bottom padding when a .wl comes next, and the .wl
   keeps its own, so the air between them is the air one section asks for. */
:where(section, div):has(+ .wl) { padding-bottom: 0 }

/* One block, centred once. Everything inside it ranges left together, so
   the label sits on the paragraph's own edge rather than on its own. */
/* The paragraph dead centre, the label on the left margin. The equal
   columns either side of the middle are what centre it; nothing is nudged. */
.wl-in {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 24px;
    align-items: start;
}

/* First column, on the page's left edge. The 25px brings its baseline onto
   the paragraph's first baseline — measured, not guessed. */
.wl-label {
    grid-column: 1;
    justify-self: start;
    display: block;
    margin: 25px 0 0;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* Jack's setting, off the tuner on 9 September, ranged left. */
.wl-text {
    grid-column: 2;
    margin: 0;
    max-width: 46ch;           /* measured here, where the type is 28px */
    font-family: var(--face);
    font-weight: 300;
    font-size: 28px;
    line-height: 1.52;
    letter-spacing: -.001em;
    text-align: left;
    text-wrap: pretty;
}

/* Lit by default, so the paragraph is readable before the script runs and
   readable for good if it never does. The component sets data-on once it has
   taken hold, and only then do the words start dim. */
.wl-w { color: var(--ink) }

.wl[data-on='yes'] .wl-w {
    color: color-mix(in oklab, var(--ink) calc(var(--lit, 0) * 100%), var(--ink-20));
    transition: color .18s linear;
}

.wl[data-on='done'] .wl-w { color: var(--ink) }

/* No room for a column either side: the label goes above and both range
   left, which is where the cards are anyway. */
@media (max-width: 1180px) {
    .wl-in { grid-template-columns: 1fr }
    .wl-label { grid-column: 1; margin: 0 0 22px }
    .wl-text { grid-column: 1 }
}

@media (max-width: 860px) {
    .wl-text { font-size: 22px; line-height: 1.5 }
}

@media (prefers-reduced-motion: reduce) {
    .wl[data-on='yes'] .wl-w { transition: none }
}

/* The doors, directly under the welcome. Paper, and closed up so the two
   read as one section rather than as two with a seam. */
.doors-on-paper { padding-top: clamp(36px, 5vh, 64px) }

/* ---- Scotland today ----
 *
 * Jack, 9 September: a different ground, and more clean space.
 *
 * Oat rather than stone. Stone is a hard step and would put a grey band
 * through the middle of a page that is otherwise all paper; oat is the
 * palette's warmer paper, so the section changes key without the page
 * breaking in two. The paper above and the oat here differ by about four
 * points of luminance - enough to see, not enough to shout.
 *
 * And it is given a good deal more room top and bottom than a plain band, so
 * it reads as its own held breath rather than the next thing down.
 */
.band.today:not(.stone):not(.forest) {
    background: var(--oat);
}

.band.today {
    padding: clamp(96px, 13vh, 168px) 0;
}

/* More air under the heading before the three cards, in the same proportion. */
.today .lead { margin-bottom: clamp(44px, 6.5vh, 76px) }

/* ---- a test, 9 September ----
 * The whole opening block 20 per cent smaller at Jack's asking: the heading,
 * the line under it and the way in, together. Scaling only the heading left
 * the paragraph and the button at their old size and the group came apart.
 *
 * Every number is _home.css's own multiplied by 0.8, including each stop of
 * the clamps, so it scales the way it did instead of being right at one
 * width. The measures are left in `ch`, which follows the type down on its
 * own, so the column narrows with it.
 *
 * An override in the hand-written sheet, not a change to the generated one.
 * If it is kept it belongs in the mock and build-home.py; if not, delete this
 * block.
 *
 *                       was                      now
 *   heading    clamp(42px,6vw,88px)     clamp(33.6px,4.8vw,70.4px)
 *   line       clamp(17px,1.5vw,21px)   clamp(13.6px,1.2vw,16.8px)
 *   button     56px tall, 19px          44.8px tall, 15.2px
 */
.hero h1{font-size:var(--title)}
.hero .where{margin-top:14.4px;font-size:clamp(12.24px,1.08vw,15.12px)}
/* The way in is _bar.css's September button, not _home.css's pill, and
   _bar.css loads AFTER this sheet - so `.hero .journey` at the same weight
   lost to it and the button stayed its old size while the words shrank round
   it. `.hero .in .journey` carries the extra class it needs to win. Its
   min-height has to come down too: a min-height beats a height whatever the
   order. */
.hero .in .journey{margin-top:18.7px;height:36px;min-height:36px;padding:0 18px;font-size:10.4px}
@media(max-width:600px){.hero .in .journey{height:36px;font-size:10.4px;padding:0 18px}}

/* ---- the doors ----
 * Jack, 9 September: more air above and below. The row itself goes back to
 * the page measure - held to the paragraph's column the five came out at
 * 145px each, which was too small.
 */
.doors-on-paper{padding-top:clamp(64px,10vh,132px);padding-bottom:clamp(64px,10vh,132px)}

/* ---- one size for every title on this page ----
 * Jack, 9 September: the opening down another tenth, and every title at the
 * size it lands on. So there is one number and everything reads from it.
 *
 *   the opening was 86.4px on 9 September before any of this
 *   less a fifth      69.12px
 *   less another tenth 62.21px   <- --title, at 1440
 *
 * The band titles were clamp(36px,4.4vw,66px), which is 63.36px at 1440, so
 * they were already within a pixel and a half of it; they now share the
 * number rather than nearly matching it. The section heads at clamp(32px,
 * 3.2vw,46px) were a smaller tier and come up to it too, because "all the
 * titles" is what was asked for.
 *
 * `.h2` lives in _shared.css and is used on every page, so it is set HERE,
 * in the sheet that only the home page loads. No other page moves.
 *
 * An override in the hand-written sheet. If it is kept it belongs in the mock
 * and build-home.py.
 */
:root{--title:min(clamp(30.24px,4.32vw,63.36px), 28px + (clamp(30.24px,4.32vw,63.36px) - 28px) * 0.6)}
.today h2,.mag h2,.maker h2,.weekly h2,.arrive .h2,.doors-on-paper .h2{font-size:var(--title)}