/* ==========================================================================
   Responsive
   ==========================================================================
   ≥1367px   the Figma composition, scaled proportionally (see global.css)
   1024–1366 tablet landscape: the flow layouts, opened out to the width
   768–1023  tablet portrait: absolute compositions unwind into flow
   <768      mobile
   <480      small mobile
   The Figma file contains desktop frames only, so the layouts below are
   derived from the desktop composition: same content, same order, same
   typographic hierarchy, restacked for narrow viewports.
   ========================================================================== */

@media (max-width: 1366px) {

  :root {
    --page-x: 2.4rem;
    /* The headings were shrinking faster than the copy they head.  On the
       design width a display heading is 15rem against 7rem of editorial —
       2.14 times.  Down here it had fallen to 5.6 against 2.8, and on a phone
       to 3.2 against 2.0, which is 1.6: a heading that no longer reads as one.
       Each tier's display sizes are set back to that 2.14, and the rest of the
       title family — lg, md, the slide title — moves by the same factor as the
       tier's xl so the family keeps its internal proportions.
       Checked for overflow on seven pages at 320, 390, 430 and 767: nothing
       spills, at these sizes or at half again. */
    --fs-display-xl: 6rem;
    --fs-display-lg: 3.6rem;
    --fs-display-md: 4.5rem;
    --fs-editorial:  2.8rem;
    --fs-heading:    3.8rem;
    --lh-heading:    4.2rem;
    --fs-slide-title: 3.4rem;
    /* 7rem of leading is the 1920 value, and at 10px root that is a 70px line
       box around 32px type — the reason a two-line slide heading had a blank
       line down the middle of it.  Figma's own ratio is 60/70, so the leading
       follows the size down at 1.167x. */
    --lh-slide-title: 4.1rem;
    --fs-menu:       4.4rem;
    --fs-close:      2.2rem;
    --fs-ui-lg:      1.6rem;
    --fs-lead:       1.9rem;
    --fs-body:       1.7rem;
    --fs-legal:      1.3rem;
    --fact-gap:      1.2rem;
    --btn-h:         10rem;
    --lh-display-xl: 5.8rem;
    --lh-editorial:  3.6rem;
    --lh-statement:  3.6rem;
    --lh-lead:       2.9rem;
    --lh-body:       2.8rem;
    --ls-display-xl: -0.2rem;
    --ls-display-lg: -0.1rem;
    --ls-display-md: -0.1rem;
  }

  /* ---- Header ---------------------------------------------------------- */
  .site-header { height: 8.8rem; }
  .header-cta  { left: var(--page-x); top: 3.4rem; }
  .brand       { top: 2rem; width: 5.4rem; height: 4.6rem; }
  .nav-toggle  { left: auto; right: var(--page-x); top: 3.6rem; width: 3.4rem; height: 1.6rem; }
  /* Whole pixels here too, for the reason given in components.css. */
  .nav-toggle__bar { height: 0.24rem; height: round(0.24rem, 1px); border-radius: 999px; }
  .nav-toggle__bar:nth-child(2) { top: 0.68rem; }
  .nav-toggle__bar:nth-child(3) { top: 1.36rem; }

  /* ---- Menu ------------------------------------------------------------ */
  .menu__item       { width: auto; min-width: 22rem; height: 6.4rem; margin-bottom: 1rem; }
  .menu__item--wide { width: auto; min-width: 30rem; height: 6.4rem; }
  .menu__close      { left: auto; right: var(--page-x); top: 3rem; }

  /* ---- Buttons --------------------------------------------------------- */
  .btn-oval { width: 24rem; height: var(--btn-h); gap: 1.2rem; }
  .btn-oval:hover, .btn-oval:focus-visible { gap: 2.2rem; }
  .btn-oval__arrow, .arrow-link__arrow { width: 1.6rem; height: 1.36rem; }

  /* ---- Hero: the Figma composition, fitted to portrait ----------------- */
  .hero,
  .territory,
  .experience,
  .journal { height: auto; }

  .hero { padding: 0 0 8rem; }

  .hero__media {
    position: relative;
    left: auto; transform: none;
    width: 100%; height: 62vh; min-height: 34rem;
  }

  /* Full bleed exactly like the desktop frame — never cropped at the sides. */
  .hero__wordmark {
    position: absolute;
    left: 0;
    top: 33vh;                 /* 53.3% of the 62vh film, as at 1920 */
    width: 100%;
    height: auto;
    transform: translateY(-50%);
  }

  /* Still fixed to the corner; below 1367 the label is hidden, so the pill's
     box is the roundel and nothing else. */
  .pill--sticky { width: 6.7rem; bottom: 2.6rem; }

  .pill__label { display: none; }
  .pill__roundel { left: 0; }

  .hero__eyebrow { position: relative; left: auto; top: auto; transform: none; margin: 6rem 0 0; text-align: center; }

  .hero__manifesto {
    position: relative;
    left: auto; top: auto; width: auto;
    margin: 3.2rem 0 0;
    padding: 0 var(--page-x);
  }

  /* ---- Wines slider ----------------------------------------------------
     The same four-state machine as desktop: the colour band, the varietal
     name sliding behind the bottle, the bottles rotating in and out, driven
     by scroll.  Only the geometry is re-laid for portrait — the name track
     steps one viewport per state (see js/wine-slider.js) so each varietal
     centres on screen in turn.
     -------------------------------------------------------------------- */
  .wines { height: auto; padding-bottom: 8rem; }

  .wines__band  { height: 52vh; min-height: 30rem; }
  .wines__stage { position: absolute; inset: 0 0 auto 0; height: 52vh; min-height: 30rem; }

  .wines__names {
    display: block;
    left: 0;
    top: 9vh;
    width: 0;
    height: auto;
  }

  .wines__name {
    width: 100vw;
    font-size: 27.4vw;                 /* the 526px design size, as a ratio */
    transform: translateX(-50%) scaleX(var(--wine-squeeze));
  }
  .wines__name--giannoudi { left: 50vw; }
  .wines__name--xynisteri { left: 150vw; }
  .wines__name--viognier  { left: 250vw; }

  /* Bottle sizes are the Figma ratios against the colour band (104.7% and
     118.8% of its height), so they spill past it exactly as they do at 1920. */
  .wines__bottle--giannoudi,
  .wines__bottle--xynisteri { left: 50%; top: 2vh; width: 25.4vh; height: 54.4vh; margin-left: -12.7vh; }
  .wines__bottle--viognier  { left: 50%; top: 0;   width: 28.9vh; height: 61.8vh; margin-left: -14.45vh; }
  .wines__bottle { filter: drop-shadow(-1.2rem 1rem 1.6rem rgba(0, 0, 0, 0.3)); }

  .wines__bottle.is-next { transform: translateX(85vw) rotate(30deg) scale(0.757); }
  .wines__bottle.is-prev { transform: translateX(-85vw) rotate(30deg) scale(0.757); }

  /* Copy drops below the band; the closing CTA stays inside it. */
  .wines__copy { position: static; margin-top: 60vh; }

  .wines__panel {
    position: static;
    height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .wines__panel.is-active { height: auto; overflow: visible; }

  .wines__title,
  .wines__desc,
  .wines__link {
    position: relative;
    left: auto; top: auto; width: auto;
    padding: 0 var(--page-x);
  }
  .wines__panel--viognier .wines__title { width: auto; }

  .wines__title { margin-top: 3.2rem; }
  .wines__desc  { margin-top: 1.6rem; }
  .wines__link  { margin-top: 2.4rem; }

  .wines__panel--end { text-align: center; }

  /* The CTA is absolute against the section so it sits on the black band,
     and only shows while the closing state is active. */
  .wines__cta {
    position: absolute;
    left: 50%;
    top: 19vh;
    transform: translateX(-50%);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--ease-out);
  }
  .wines__panel.is-active .wines__cta { opacity: 1; pointer-events: auto; }

  /* ---- Territory ------------------------------------------------------- */
  .territory { padding-bottom: 0; }

  .territory__media {
    position: relative;
    left: auto; top: auto; transform: none;
    width: 100%; height: 62vh; min-height: 34rem;
  }

  .territory__fade-top { height: 24rem; }

  .territory__eyebrow,
  .territory__display,
  .territory__lead {
    position: relative;
    left: auto; top: auto; transform: none; width: auto;
    padding: 0 var(--page-x);
    white-space: normal;
  }

  .territory__eyebrow { margin-top: 4rem; text-align: left; }
  .territory__display { margin-top: 2rem; }
  .territory__lead    { margin-top: 3.2rem; text-align: left; }

  /* Desktop fades to black, holds the statement and its CTA there, then
     fades back out.  The three spans carry 1920 coordinates, so on a phone
     the statement itself paints the band and the CTA sits inside it. */
  .territory__dark { display: none; }

  .territory__statement {
    position: relative;
    left: auto; top: auto; width: auto;
    margin: 6rem 0 0;
    padding: 11rem var(--page-x) 21rem;
    text-align: center;
    color: #8d8d8d;
    /* Solid, not a gradient.  The desktop band is three positioned dark spans
       that the flow layout hides, and the first mobile pass imitated their
       soft edges with a fade in and out of the statement's own box.  On a
       phone that reads as a smudge rather than a band — and it is not what
       the rest of the site does at this width either: the Terrain statement
       is a flat black block.  Flat here too.  (Client's call.) */
    background: var(--c-black);
  }

  .territory__cta {
    position: relative;
    z-index: 4;                      /* stays above the statement's band */
    left: auto; top: auto;
    display: flex;
    /* Rides inside the black band.  The button is pulled 15.5rem up into the
       statement's padding, so what it contributes to the flow is its own
       height plus its bottom margin, less that pull-up.  Set the margin to
       exactly the pull-up minus the height and the contribution is ZERO: the
       black band ends precisely where the satellite plate begins.
       A fixed 8rem left 3px of page showing through on a phone and 25px on a
       tablet — the white line between the two sections — because the oval is
       not the same height at both.  Deriving it from --btn-h cannot drift. */
    margin: -15.5rem auto calc(15.5rem - var(--btn-h));
  }

  /* The map keeps its desktop choreography: the plate blurs and dims, a
     circular focus opens on the winery, the ring draws, then the facts
     arrive one by one.  Only the radius and the facts' travel are re-scaled
     for a phone — the facts read better stacked under the plate than
     floating over it. */
  .territory__map {
    position: relative;
    left: auto; top: auto; transform: none;
    width: 100%; height: auto;
    /* The circle used to be centred in a plate whose height was a share of the
       viewport, and the gap under it was whatever was left over: half the
       plate less the ring's radius.  227px on a 412x915 phone.  Shortening
       the plate could not fix that on its own — centred means whatever is
       taken from below is taken from above too, and above is where the fixed
       88px header sits, so the circle ran into it long before the gap got
       small.

       So the composition is stated instead of inherited.  The circle hangs a
       fixed 12rem below the top of the plate (88px of header, 32px of air),
       and the plate ends a fixed 4rem under it.  Height then follows from the
       circle rather than the other way round, the clearance above the circle
       stays constant on every screen instead of scaling with it, and the gap
       under it is 4rem plus the panel's padding — 72px, from 227.

       min(47vw, 40vh) is the ring's diameter: the vh half is the landscape
       guard the Terrain scene already had and this one was missing — at
       915x412 a 47vw ring is 430px inside a 340px plate. */
    --focus-d: min(47vw, 40vh);
    --focus-y: calc(12rem + var(--focus-d) / 2);
    --plate-h: max(calc(12rem + var(--focus-d) + 4rem), 28rem);
  }
  .map__frame { position: relative; inset: auto; height: var(--plate-h); }

  .map__layer--sharp { clip-path: circle(min(6.8vw, 5.8vh) at 50% var(--focus-y)); }

  /* Deep bleed on the seam side, on BOTH halves of the plate.

     `filter: blur()` samples everything past an element as transparent, so a
     blurred layer fades out over its own last ~3 sigma — and the dimming
     rectangle inside it (rgba(0,0,0,.4)) fades with it, which brightens the
     picture as it approaches the edge.  At -3rem that ramp started 30px from
     the join, inside a 15px blur's 45px reach, so both halves brightened into
     the seam and then stepped 0.99/255 apart across it: a dead-straight line,
     which the eye reads far more readily than the same difference between two
     separated patches.  (Measured as patches it looked fine.  It was not.)

     9rem is 6 sigma: at the seam the fade is under a thousandth, the tint is
     at full strength on both sides, and the step measures 0.02/255.  The two
     bleeds must stay EQUAL — the mirror's axis sits one bleed past the join,
     so unequal bleeds would slide the two halves apart. */
  .map__layer--blur { inset: -3rem -3rem -9rem; }
  .territory__map.is-focused .map__layer--sharp { clip-path: circle(min(22vw, 18.7vh) at 50% var(--focus-y)); }

  .map__ring {
    top: var(--focus-y);
    width: var(--focus-d);
    height: var(--focus-d);
  }

  .territory__pin { top: var(--focus-y); width: 5.4rem; height: 5.4rem; }

  .territory__facts {
    position: relative;
    inset: auto;
    display: grid;
    gap: 3.2rem;
    /* Transparent, not black: the section behind is already --c-black, and an
       opaque panel would hide the 1px the plate and the tail deliberately
       share (below). */
    background: transparent;
    padding: calc(3.2rem + 1px) 0 6rem;
    overflow: hidden;

    /* The 1px is the whole point.  The plate's clip ends at 62vh and the
       panel's began at the same 62vh; on a device whose pixel ratio is not a
       whole number — 2.625 is ordinary on Android — that boundary lands in the
       MIDDLE of a device pixel, so both clips cover it partially and it gets
       composited twice against the black underneath.  Measured at 412x883
       @2.625x that row came out 10.1/255 darker than its neighbours: a
       one-pixel black hairline, and exactly what the phone was showing.
       Overlapping the panel a pixel upwards puts the shared row wholly inside
       the tail, so it is painted once, over opaque plate rather than over
       black.  The padding gives the pixel back so no text moves. */
    margin-top: -1px;
  }

  /* Stacked, the facts used to sit on flat black and the satellite plate
     stopped dead at a hard horizontal line.  The tail carries the plate
     through: it is the SAME blurred layer, mirrored across that line.
     `object-position: bottom` puts the image's last row at the layer's foot
     and `scaleY(-1)` flips that foot to the top of the panel — so the row
     meeting the seam from below is the row meeting it from above, and the
     two halves join on identical pixels.

     The two boxes are not quite the same size, so `cover` scales them 0.8%
     apart: measured at the seam that displaces features by 0.8px, against a
     15px blur radius.  It carries the same rgba(0,0,0,.4) dimming and the
     same opacity/`is-focused` transition as the plate above, so the whole
     panel washes in as one surface rather than two.

     `overflow: hidden` on the panel is load-bearing: the layer bleeds 3rem
     past every edge (blur samples outside itself as transparent, which would
     otherwise fade the tail out along its own borders) and that bleed must
     not spill onto the plate above or the white section below. */
  .map__layer--tail {
    display: block;
    /* The flip reorders the CONTENT inside the box; it does not move the box.
       So the tail's deep bleed goes on `top` — that is the edge nearest the
       join — while the plate above wants it on `bottom`.  Mirrored insets,
       equal magnitudes. */
    inset: -9rem -3rem -3rem;
    transform: scaleY(-1);
    pointer-events: none;
  }

  /* `object-fit: cover` sizes from the BOX, and the two boxes are not the same
     shape: the plate is 62vh, the panel is however tall the three sentences
     make it.  On a 412x915 phone those are 567 and 562 and the two halves
     scaled 0.8% apart, which is nothing; on a 360x800 they are 496 and 591 and
     they scaled 17% apart, which moved the join by 13px and drew the line
     back.  So the tail does not use cover at all — its height is stated, and
     stated as the plate layer's own height, which makes the two scales equal
     by construction on every screen.  Anchored to the layer's foot (which the
     flip turns into its head), the mirror's axis then lands exactly where the
     plate's last row does.
     Note it is the BOX that is copied, not the resulting scale: `cover` picks
     whichever of width or height is binding, and which one wins changes with
     the viewport — on a phone the boxes are tall and height wins, on a 1024
     tablet the plate's box is wider than it is tall and width wins instead.
     Stating the tail's scale directly worked on every phone and broke on the
     tablets by 7.5/255.  Giving the tail's picture the plate layer's own box
     and letting `cover` decide inside it is right at every width by
     construction.
     The picture reaches --plate-h + 3rem below the join; where the panel runs
     longer than that, the blur has no more image to sample and the foot of the
     panel fades to black on its own, which is a soft edge into the section
     below rather than another hard one. */
  .map__layer--tail img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--plate-h) + 12rem);
    max-width: none;
  }
  /* One mirror reaches --plate-h + 3rem below the join, and a plate anchored
     to its circle is shorter than the panel of text beside it, so a single
     copy would run out and leave the last fact on plain black.  The second
     copy flips back — cancelling the layer's own flip — and sits directly
     under the first, so the picture reads 1648 -> 0 -> 1648: a mirror repeat,
     where every junction meets its own reflection and is therefore continuous
     by the same argument as the join itself. */
  .map__layer--tail img + img {
    bottom: calc(var(--plate-h) + 12rem);
    transform: scaleY(-1);
  }

  .page .map-fact {
    position: relative;
    left: auto; top: auto;
    width: auto;
    padding: 0 var(--page-x);
    opacity: 0;
    transform: translateX(2.4rem);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  .page .map-fact.is-in { left: auto; opacity: 1; transform: none; }

  /* ---- Experience ------------------------------------------------------ */
  .experience { padding: 6rem 0 0; }

  .gallery { position: relative; inset: auto; display: grid; gap: 1.6rem; padding: 0 var(--page-x); grid-template-columns: repeat(2, 1fr); }
  .gallery__item { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; }
  .gallery__item:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 855 / 1047; }
  .gallery__item:nth-child(2) { aspect-ratio: 523 / 262; }
  .gallery__item:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 855 / 1047; }
  .gallery__item:nth-child(4) { aspect-ratio: 523 / 262; }

  .experience__display,
  .experience__copy {
    position: relative;
    left: auto; top: auto; width: auto;
    padding: 0 var(--page-x);
    white-space: normal;
  }

  .experience__display { margin-top: 6rem; }
  .experience__copy    { margin-top: 3.2rem; }

  .experience__media { position: relative; left: auto; top: auto; transform: none; width: 100%; height: 46vh; min-height: 26rem; margin-top: 5rem; }

  .experience__cta { position: relative; left: auto; top: auto; display: flex; margin: -22vh auto 12vh; }

  /* ---- Journal --------------------------------------------------------- */
  .journal { padding: 7rem 0 0; }

  .journal__heading,
  .journal__intro {
    position: relative;
    left: auto; top: auto; width: auto;
    padding: 0 var(--page-x);
  }

  .journal__intro { margin-top: 2rem; }

  .journal__list { position: relative; left: auto; top: auto; width: auto; margin-top: 4.5rem; padding: 0 var(--page-x); }

  .journal__row {
    position: relative;
    top: auto !important;
    height: auto;
    padding: 2.6rem 0;
    border-top: 0.1rem solid rgba(0, 0, 0, 0.35);
  }

  .journal__row:last-child { border-bottom: 0.1rem solid rgba(0, 0, 0, 0.35); }

  .journal__title,
  .journal__meta,
  .journal__excerpt { position: relative; left: auto; top: auto; width: auto; white-space: normal; }

  .journal__title   { color: var(--c-ink); }
  .journal__meta    { margin-top: 1.2rem; }
  .journal__excerpt { margin-top: 0.6rem; }

  .journal__rule { display: none; }
  .journal__gallery { margin-top: 5rem; padding-bottom: 6rem; }

  /* ---- Footer ---------------------------------------------------------- */
  .site-footer { height: auto; padding: 22rem 0 3rem; }

  .site-footer__logotype { top: 4rem; width: 150%; left: 50%; transform: translateX(-50%); height: auto; }
  .site-footer__ripple   { top: 8rem; width: 190%; height: auto; }
  .site-footer__frog     { left: 50%; top: 6rem; width: 16rem; height: auto; transform: translateX(-50%); }

  .site-footer__legal,
  .site-footer__links {
    position: relative;
    left: auto; right: auto; top: auto;
    justify-content: center;
    padding: 0 var(--page-x);
    white-space: normal;
    text-align: center;
  }

  /* The legal line belongs to the links, not to the logotype.  Left at the
     top of the flow it landed 3px under the E-ZOUSA glyph bottoms and read as
     part of the wordmark; this drops it clear of the ink and leaves it sitting
     directly over PRIVACY POLICY, which keeps its own 1.2rem. */
  .site-footer__legal { margin-top: 5.2rem; }
  .site-footer__links { margin-top: 0.2rem; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --btn-h:         8.6rem;
    --fs-display-xl: 5.4rem;
    --fs-display-md: 3.9rem;
    --fs-editorial:  2.2rem;
    --fs-heading:    3.2rem;
    --lh-heading:    3.6rem;
    --fs-menu:       3.4rem;
    --lh-display-xl: 5.3rem;
    --lh-editorial:  3rem;
    --lh-statement:  3rem;
    --page-x: 2rem;
  }

  .gallery { grid-template-columns: 1fr; }
  .gallery__item:nth-child(2),
  .gallery__item:nth-child(4) { aspect-ratio: 523 / 262; }

  .btn-oval { width: 21rem; height: var(--btn-h); }

  .site-footer { padding: 17rem 0 3rem; }
  .site-footer__logotype { width: 200%; }
  .site-footer__frog { width: 12rem; }

  /* One line, not a column.  They fit: the two labels measure 194px together
     and the narrowest phone leaves 280px between the gutters, so even at 320
     there is 86px to spare — the stack was never forced by width.  Dropping
     the override returns them to the row and the 3.2rem gap the footer uses
     at every other size. */
}

/* ==========================================================================
   Small mobile
   ========================================================================== */
@media (max-width: 479px) {
  :root {
    --btn-h:         7.8rem;
    --fs-display-xl: 5.2rem;
    --fs-editorial:  2rem;
    --fs-heading:    3rem;
    --lh-heading:    3.4rem;
    --lh-display-xl: 5.1rem;
    --lh-editorial:  2.8rem;
  }

  .journal__title { font-size: 2.8rem; }
  .btn-oval { width: 19rem; height: var(--btn-h); }
}

/* ==========================================================================
   Coarse pointers — hover-only affordances resolve to their visible state
   ========================================================================== */
@media (hover: none) {
  .pill__label { left: 15.4rem; }
  .menu__ring  { opacity: 0; }
  .menu__item.is-current .menu__ring { width: 100%; height: 100%; opacity: 1; }
}

/* ==========================================================================
   Inner pages (Manifesto, Terrain) below the desktop branch.
   The Figma file has desktop frames only: the absolute compositions unwind
   into flow, keeping the same content, order and hierarchy.
   ========================================================================== */
@media (max-width: 1366px) {

  /* ---- Shared page hero ------------------------------------------------ */
  .page-hero { height: 78vh; min-height: 50rem; }
  .page-hero__media { width: 100%; height: 100%; }

  /* Legibility over the full frame — mobile has no Figma scrim to copy. */
  .page-hero__scrim,
  .terrain__hero-scrim,
  .sust__hero-scrim {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.35) 100%);
    mix-blend-mode: normal;
  }

  .page .page-hero__statement {
    left: var(--page-x);
    right: var(--page-x);
    top: 14rem;
    width: auto;
    white-space: normal;
  }

  /* ---- Chapter sections ------------------------------------------------ */
  /* 6rem of top padding on top of the previous chapter's 2rem foot and its
     body's own 2rem margin measured 100px of nothing between one chapter's
     last line and the next one's first.  6.8rem total is enough to separate
     them without the page reading as a series of islands. */
  .about-1, .about-2, .about-3, .about-4,
  .terrain-1, .terrain-2, .terrain-3,
  .sust-1, .sust-2, .sust-3 {
    height: auto;
    padding: 3.6rem var(--page-x) 1.2rem;
    overflow: visible;
  }

  .page .about__figure,
  .page .terrain__figure,
  .page .sust__figure {
    position: relative;
    left: auto; right: auto; top: auto;
    width: 100%; height: auto;
    margin: 0 0 3.2rem;
  }
  .page .about__figure img,
  .page .terrain__figure img,
  .page .sust__figure img { height: auto; }
  .page .about__figure--a { display: none; }   /* Figma parks this plate off-canvas */

  .page .terrain__icon,
  .page .sust__icon {
    position: relative;
    left: auto; top: auto;
    width: auto; height: 4rem;
    margin: 0 0 1.6rem;
  }

  .page .about__heading,
  .page .terrain__heading,
  .page .sust__heading,
  .page .about__body,
  .page .terrain__body,
  .page .sust__body,
  .page .terrain__block,
  .page .terrain__block .eyebrow {
    position: relative;
    left: auto; right: auto; top: auto;
    width: auto;
    text-align: left;
    white-space: normal;
  }

  .page .sust__body { width: auto; margin: 0 0 2rem; }

  .page .about__heading,
  .page .terrain__heading,
  .page .sust__heading { line-height: var(--lh-heading); margin: 0 0 2.4rem; white-space: normal; }
  .page .about__body      { margin: 0 0 2rem; }
  .page .terrain__block   { margin: 0 0 3.6rem; }
  .page .terrain__block .eyebrow { margin: 0 0 1.2rem; }

  /* ---- Manifesto film band --------------------------------------------- */
  .about__film, .sust__film { height: 52vh; min-height: 28rem; margin-top: 4rem; }
  .about__film video, .sust__film video { top: 0; height: 100%; }
  .about__film-fade, .sust__film-fade { height: 14rem; }

  .about__statement, .sust__statement { height: auto; padding: 6rem 0; }
  .page .page-statement {
    position: relative;
    left: auto; top: auto;
    padding: 0 var(--page-x);
    white-space: normal;
    color: var(--c-grey-300);
  }

  /* ---- Terrain: valley plate, dusk, statement -------------------------- */
  .terrain__valley {
    position: relative;
    top: auto;
    width: 100%; height: 46vh; min-height: 26rem;
  }
  /* Figma fades the plate into black before the statement; the desktop
     gradient is positioned for the 1920 frame, so on a phone the fade rides
     on the plate itself. */
  .terrain__valley::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 45%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%);
    pointer-events: none;
  }
  .terrain__dusk { display: none; }
  .terrain__void, .terrain__gap { display: none; }

  .terrain__statement {
    position: relative;
    left: auto; top: auto;
    width: auto;
    margin: 0;
    padding: 6rem var(--page-x);
    background: var(--c-black);
    color: #8a8a8a;
  }

  /* ---- Terrain: frog scene ---------------------------------------------
     Same choreography as the home map: the plate blurs and dims, a circular
     focus opens on the frog, then the three facts arrive one by one. */
  .frog {
    left: auto;
    width: 100%;
    height: auto;
    /* One name for the plate's height: the padding that reserves the media
       area, the layers that fill it, the ring's centre and the mirrored tail
       are all derived from it and have to agree to the pixel.  It also folds
       in the old `min-height: 28rem`, which the padding used to ignore — on a
       viewport under 538px tall the photograph grew and the reserved space did
       not, and the facts slid under it. */
    --focus-d: min(55.4vw, 44.8vh);
    --focus-y: calc(12rem + var(--focus-d) / 2);
    --plate-h: max(calc(12rem + var(--focus-d) + 4rem), 28rem);
    padding: var(--plate-h) 0 5rem;
  }

  .frog__layer {
    position: absolute;
    left: 0; top: 0; right: auto; bottom: auto;
    width: 100%; height: var(--plate-h);
  }
  .frog__layer img { width: 100%; height: 100%; object-fit: cover; }

  /* The plate carried on into flat black at the foot of the photograph, which
     cut the scene off with a hard horizontal line.  Same fix as the home map,
     same reasoning in css/responsive.css above the .map__layer--tail rules:
     one mirrored continuation of the SAME blurred layer, its deep bleed on the
     seam side so neither blur runs out of picture near the join, both halves
     locked to one scale, and a pixel of overlap so a fractional device pixel
     ratio cannot leave a half-covered row. */
  .frog__layer--blur {
    display: block;
    left: -3rem; right: -3rem;
    top: -3rem; bottom: auto;
    width: auto;
    height: calc(var(--plate-h) + 12rem);
  }

  .frog__layer--tail {
    top: calc(var(--plate-h) - 9rem);
    bottom: -3rem;
    height: auto;
    transform: scaleY(-1);
    pointer-events: none;
    /* The home map borrows the facts wrapper's `overflow: hidden` to cut the
       tail at the join; the frog scene has no such wrapper, so it cuts itself.
       clip-path is applied AFTER filter, so the blur still samples the full
       9rem of picture above the join and only the result is trimmed — and it
       is trimmed in the element's own coordinates, which the flip has turned
       upside down, hence the inset on the bottom.  Less 1px, for the overlap. */
    clip-path: inset(0 0 calc(9rem - 1px) 0);
  }
  .frog__layer--tail img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--plate-h) + 12rem);
    max-width: none;
  }
  .frog__layer--tail img + img {
    bottom: calc(var(--plate-h) + 12rem);
    transform: scaleY(-1);
  }
  /* The spotlight is a share of the viewport WIDTH, which is right in
     portrait and wrong in landscape: 26vw on a 1366 tablet is a 710px circle
     inside a 468px band.  Taking the smaller of the two keeps the iris inside
     the photograph whichever way the device is held. */
  .frog__layer--sharp { clip-path: circle(min(8.1vw, 6.5vh) at 50% var(--focus-y)); }
  .frog.is-focused .frog__layer--sharp { clip-path: circle(min(26vw, 21vh) at 50% var(--focus-y)); }

  .page .frog-fact {
    position: relative;
    left: auto; top: auto;
    width: auto;
    opacity: 0;
    transform: translateX(2.4rem);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    margin: 3.6rem 0 0;
    padding: 0 var(--page-x);
  }
  .page .frog-fact.is-in { left: auto; opacity: 1; transform: none; }
  /* The first mark carries the distance from the circle, so it is trimmed on
     its own — the 3.6rem stays as the rhythm BETWEEN marks.  Not :first-of-type:
     the layers ahead of it are divs too, so that selector picks the plate. */
  .page .frog-fact--endemic { margin-top: 2.4rem; }
  .page .frog-fact__body { width: auto; }

  /* ---- Closing band ---------------------------------------------------- */
  .closing, .terrain__closing, .sust__closing { height: auto; padding: 4rem 0 6rem; overflow: visible; }
  .page .closing__art {
    position: relative;
    left: auto; top: auto;
    width: 100%; height: auto;
  }
  /* 4rem of air, not -2.  The desktop layout places this button absolutely,
     beside the photograph rather than under it; the stacked version inherited
     a negative margin that only made sense there, and measured on the render
     it pulled the button 20px INTO the picture — the closing art has no
     whitespace of its own at the foot (0.3px), so there was nothing for it to
     tuck into. */
  .page .closing__cta {
    position: relative;
    left: auto; top: auto;
    margin: 4rem auto 0;
  }
}

/* ==========================================================================
   Wines listing below the desktop branch — the four rows become a two-up grid.
   ========================================================================== */
@media (max-width: 1366px) {

  .wines-list__intro { height: auto; padding: 12rem var(--page-x) 2rem; }

  .wines-list__title {
    position: relative;
    left: auto; top: auto;
    font-size: var(--fs-display-xl);
    line-height: var(--lh-display-xl);
    letter-spacing: var(--ls-display-xl);
    white-space: normal;
  }

  .wine-row {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 2rem;
    padding: 3rem var(--page-x) 6rem;
    overflow: visible;
  }

  .page .wine-row__heading {
    position: relative;
    left: auto; top: auto;
    grid-column: 1 / -1;
    margin: 0;
    line-height: var(--lh-heading);
  }

  .page .wine-card {
    position: relative;
    left: auto; top: auto;
    width: auto;
    display: block;
  }

  .page .wine-card__shot { width: 100%; height: auto; }

  .page .wine-card__name {
    position: relative;
    left: auto; top: auto;
    width: auto;
    display: block;
    margin-top: 1.6rem;
  }

  .page a.wine-card::after { display: none; }
}

/* ==========================================================================
   Single wine page below the desktop branch.
   ========================================================================== */
@media (max-width: 1366px) {

  .product { height: auto; padding: 0 0 4rem; }

  /* On a phone this is the page's title, not a watermark behind a bottle: the
     desktop layout has room for the name to sit big and ghosted behind the
     glass, a 418px screen does not.  So the name leads and the bottle follows.

     17vw, up from 13.  The ceiling is 18: measured on the rendered element —
     uppercase, as it is set — MARATHEFTIKO is the longest name the range has
     and at 18vw it fills the usable width exactly at 360, 390, 418, 430, 600
     and 767.  17 keeps a margin for the licensed face, whose metrics differ
     slightly from the Oswald stand-in this was measured on. */
  .product__wordmark {
    position: relative;
    left: auto; top: auto;
    display: block;
    margin: 9rem 0 0;
    font-size: 17vw;
    text-align: center;
    transform: none;
  }

  /* 62% filled 714px of an 833px screen, which left the title as a strip above
     it.  At 46% the bottle is still the biggest thing on the screen and the
     name has room to be a name.  The negative top margin went with it: it
     existed to tuck the bottle under a small wordmark, and it now just covers
     a large one. */
  .page .product__plate {
    position: relative;
    left: auto; top: auto;
    width: 46%;
    height: auto;
    margin: 1rem auto 0;
    aspect-ratio: 329 / 908;
  }

  .page .product__tagline,
  .page .product__specs,
  .page .product__abv,
  .page .product__intro {
    position: relative;
    left: auto; top: auto;
    width: auto;
    padding: 0 var(--page-x);
    white-space: normal;
    text-align: center;
  }

  .page .product__tagline { margin: 5rem 0 0; line-height: var(--lh-editorial); }
  .page .product__specs   { margin: 3rem 0 0; font-size: 2rem; line-height: 3.2rem; }
  .page .product__abv     { margin: 1rem 0 0; line-height: var(--lh-editorial); }

  .page .product__vineyard {
    position: relative;
    left: auto; top: auto;
    width: 100%; height: 40vh; min-height: 22rem;
    margin: 5rem 0 0;
  }

  .page .product__intro { margin: 5rem 0 0; }

  .page .product__bottle {
    position: relative;
    left: auto; top: auto;
    width: 62%; height: auto;
    margin: 4rem auto 0;
    aspect-ratio: 459 / 982;
  }
  .page .product__bottle img {
    position: relative;
    left: auto;
    width: 94.17%;
    height: auto;
    margin-left: 2.98%;
    filter: drop-shadow(-1rem 0.8rem 1rem rgba(0, 0, 0, 0.3));
  }

  .page .product__row {
    position: relative;
    left: auto; top: auto;
    width: auto;
    padding: 0 var(--page-x);
    margin: 4rem 0 0;
  }
  .page .product__row .eyebrow {
    position: relative;
    left: auto; top: auto;
    display: block;
    margin: 0 0 1.2rem;
    line-height: normal;
    white-space: normal;
  }
  .page .product__row p {
    position: relative;
    left: auto; top: auto;
    width: auto;
    text-align: left;
  }

  .page .product__statement {
    position: relative;
    left: auto; top: auto;
    margin: 6rem 0 0;
  }

  .page .product__explore {
    position: relative;
    left: auto; top: auto;
    width: auto; height: auto;
    margin: 6rem 0 0;
    padding: 0 var(--page-x) 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  /* This is the section's heading, not a caption, and at --fs-ui-lg it was
     16px — smaller than the body copy above it.  It takes the heading token's
     scale, a step down from a chapter heading because it labels a row rather
     than opening a chapter. */
  .page .product__explore-label {
    position: relative;
    left: auto; right: auto; top: auto;
    grid-column: 1 / -1;
    margin: 0 0 2rem;
    font-size: 2.4rem;
    line-height: 3rem;
  }
  .page .wine-tile {
    position: relative;
    left: auto; top: auto;
    width: auto; height: auto;
    aspect-ratio: 326.587 / 432.727;
  }
  /* In the grid it is a row of its own, centred under the tiles. */
  .page .product__explore-cta {
    position: relative;
    left: auto; top: auto;
    transform: none;
    grid-column: 1 / -1;
    justify-self: center;
    margin: 2.4rem 0 0;
  }
}

/* ==========================================================================
   Contact below the desktop branch — the photo band, the intro and the form stack.
   ========================================================================== */
@media (max-width: 1366px) {

  .contact { height: auto; padding: 0 0 6rem; }

  .contact__title {
    position: relative;
    left: auto; top: auto;
    width: auto;
    margin: 12rem 0 0;
    padding: 0 var(--page-x);
    font-size: var(--fs-display-xl);
    line-height: var(--lh-display-xl);
    letter-spacing: var(--ls-display-xl);
  }

  .contact__band {
    position: relative;
    left: auto; top: auto;
    width: 100%; height: 34vh; min-height: 20rem;
    margin: 4rem 0 0;
  }

  .contact__intro {
    position: relative;
    left: auto; top: auto;
    width: auto;
    margin: 5rem 0 0;
    padding: 0 var(--page-x);
    line-height: var(--lh-editorial);
  }
  .contact__intro > span { display: inline; }

  .contact__form {
    position: relative;
    left: auto; top: auto;
    width: auto;
    margin: 5rem 0 0;
    padding: 0 var(--page-x);
  }

  .field { height: 7.4rem; }
  .contact__consent { margin-top: 4rem; gap: 1.6rem; }
  .contact__consent { --consent-box: 2.4rem; }
  .contact__submit { margin: 4rem 0 0; }
}

/* ==========================================================================
   Tablet — 768–1366px

   The blocks above unwind the desktop composition into one column.  That is
   right for a phone and wrong for a tablet: at 1366px a full-width paragraph
   runs to about 230 characters, which is not a layout, it is a stretched
   phone.  This tier gives the width something to do.

   Two things happen.  Long-form text gets a measure.  And from 1024px up the
   chapter sections go back to the two-column spread the Figma frames use —
   plate on one side, copy on the other, mirrored on the middle section
   exactly as the desktop file mirrors it (about-3, terrain-2 and sust-2 all
   put the plate right and set their copy right-aligned).  That also hands the
   plate growth somewhere to open into again, which is the whole point of the
   move.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1366px) {

  :root {
    --page-x: 4.8rem;
    /* Fluid, not fixed.  72px fits the Territory heading's longest line from
       1024 up, and at 768 it wraps it — which turned a three-line statement
       into four and pushed the last one off the scrim it was meant to sit on.
       Tied to the viewport it fits at every width in the band and still caps
       at the 72px the tier was drawn for. */
    --fs-display-xl: min(7.2rem, 6.7vw);
    --lh-display-xl: min(7.6rem, 7.1vw);
    --fs-display-md: 5rem;
    --fs-editorial:  3.4rem;
    --fs-heading:    4.4rem;
    --lh-heading:    4.8rem;
    --fs-slide-title: 4.2rem;
    --lh-slide-title: 4.9rem;
    --fs-ui-lg:      1.9rem;
    --fs-lead:       2.2rem;
    --fs-body:       1.9rem;
    --fs-legal:      1.5rem;
    --fact-gap:      1.4rem;
    --lh-editorial:  4.4rem;
    --lh-statement:  4.4rem;
    --lh-lead:       3.4rem;
    --lh-body:       3.2rem;
  }

  /* A measure.  620px of 20px type is about 75 characters, which is where
     long-form copy stops being hard to track back from. */
  .page .about__heading,
  .page .about__body,
  .page .terrain__heading,
  .page .terrain__block,
  .page .sust__heading,
  .page .sust__body,
  .page .page-hero__statement,
  .page .page-statement,
  .page .terrain__statement,
  .page .frog-fact__body,
  .contact__intro,
  .journal__intro,
  .territory__lead,
  .experience__copy,
  .hero__manifesto { max-width: 62rem; }

  /* The plates were full-bleed on a phone because a phone has nothing else to
     give them.  A tablet does. */
  .page .about__figure,
  .page .terrain__figure,
  .page .sust__figure { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   Tablet landscape — 1024–1366px: the chapter spread comes back
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1366px) {

  .about-1, .about-2, .about-3, .about-4,
  .terrain-1, .terrain-2, .terrain-3,
  .sust-1, .sust-2, .sust-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6.4rem;
    align-content: start;
    padding: 10rem var(--page-x) 6rem;
  }

  /* Everything that is not the plate goes in the copy column; the plate spans
     the lot.  `span 99` stands in for "however many rows this section turns
     out to have" — the three templates carry between three and five children
     and the empty rows collapse to nothing. */
  .about-1 > *,   .about-2 > *,  .about-4 > *,
  .terrain-1 > *, .terrain-3 > *,
  .sust-1 > *,    .sust-3 > *    { grid-column: 2; }
  .about-3 > *,   .terrain-2 > *, .sust-2 > * { grid-column: 1; }

  .page .about-1 .about__figure,
  .page .about-2 .about__figure,
  .page .about-4 .about__figure,
  .page .terrain-1 .terrain__figure,
  .page .terrain-3 .terrain__figure,
  .page .sust-1 .sust__figure,
  .page .sust-3 .sust__figure {
    grid-column: 1;
    grid-row: 1 / span 99;
    align-self: center;
    margin: 0;
  }
  .page .about-3 .about__figure,
  .page .terrain-2 .terrain__figure,
  .page .sust-2 .sust__figure {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: center;
    margin: 0;
  }

  /* Figma sets the middle chapter of each template right-aligned against its
     plate; the spread is only faithful if that comes back with it. */
  .page .about-3 .about__heading,
  .page .about-3 .about__body,
  .page .terrain-2 .terrain__heading,
  .page .terrain-2 .terrain__block,
  .page .terrain-2 .terrain__block .eyebrow,
  .page .terrain-2 .terrain__body,
  .page .sust-2 .sust__heading,
  .page .sust-2 .sust__body { text-align: right; }

  .page .terrain-2 .terrain__icon,
  .page .sust-2 .sust__icon { margin-left: auto; }

  /* In a spread the copy column already has its measure; the cap above would
     only fight the grid. */
  .page .about__heading,
  .page .about__body,
  .page .terrain__heading,
  .page .terrain__block,
  .page .sust__heading,
  .page .sust__body { max-width: none; }
}

/* ==========================================================================
   Touch targets — everywhere the flow layout runs

   Two controls were drawn for a cursor and never resized for a finger: the
   menu button is 34 x 16, and the BOOK A VISIT link is 64 x 24.  Both grow
   here WITHOUT moving what they draw — the bars keep their position and size,
   the link keeps its underline; only the box you can hit gets bigger.

   The checkboxes stay at their drawn size deliberately: each one is labelled,
   and the label is the tap target, which is a line of text several hundred
   pixels wide.  The form inputs likewise — 34px tall, but full-column wide.
   ========================================================================== */
@media (max-width: 1366px) {

  /* 48 x 44 around the same three bars.  The button grows left and up, so
     `right` and `top` come back by half the difference and the bars sit where
     they always sat. */
  .nav-toggle {
    width: 4.4rem;
    height: 4.4rem;
    top: 2.2rem;
    right: calc(var(--page-x) - 0.5rem);
  }
  .nav-toggle__bar { left: 0.5rem; width: 3.4rem; top: 1.4rem; }
  .nav-toggle__bar:nth-child(2) { top: 2.08rem; }
  .nav-toggle__bar:nth-child(3) { top: 2.76rem; }

  /* The underline is a block child, so it stays tight under the text and the
     padding opens up below it. */
  .header-cta { top: 2.2rem; padding: 1.2rem 0; }
}

/* ==========================================================================
   Corrections the audit turned up in the flow layout
   ========================================================================== */
@media (max-width: 1366px) {

  /* The strength line is anchored to the RIGHT edge on desktop (right: 6.5rem,
     so the number lands on Figma's 1855 and the ALC. VOL label grows away from
     it).  Unwinding it to `position: relative` left that `right` in force, and
     on a relatively-positioned box `right` shifts it — the whole line was
     sitting 65px off the left edge of every one of the eight wine pages. */
  .page .product__abv,
  .page .product__tagline { right: auto; }

  /* The frog's dotted ring never got a flow-layout size, so it stayed at its
     Figma 70.6rem — a 706px circle on a 390px phone.  The desktop ring is
     1.066x the radius of the spotlight it surrounds (35.3rem against 33.1rem),
     and the flow layout opens that spotlight to 26vw, so the ring follows at
     55.4vw across.  It centres on the middle of the 52vh media area.  The
     scale-from-0.31 and the fade are terrain.css's and are left alone: the
     ring still irises open with the focus. */
  .frog__ring {
    left: 50%;
    top: var(--focus-y);
    width: var(--focus-d);
    height: var(--focus-d);
  }

  /* Standalone links — not prose, so they are aimed at rather than read past. */
  .site-footer__links a,
  .editorial-page__back,
  .arrow-link { padding-block: 1.1rem; }
}

/* --------------------------------------------------------------------------
   Forms in the flow layout
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {

  /* 34px clears WCAG's 24px minimum but is mean for a thumb, and the booking
     form asks for eight of these.  The input grows to 44; the caption's rest
     position and its floated position both move by the same half-rem, so the
     text sits exactly where it did relative to the rule underneath. */
  .field { height: 8.4rem; }
  .field__input { height: 4.4rem; }
  textarea.field__input { height: 4.4rem; }
  .field__label { top: 0.5rem; }
  .field--filled .field__label,
  .field__input:focus + .field__label,
  .field__input:not(:placeholder-shown) + .field__label { transform: translateY(-2.4rem) scale(0.7); }
}

@media (min-width: 768px) and (max-width: 1366px) {
  /* A 928px-wide single-line text input is not a form, it is a horizon.  The
     column is capped where the reading measure is capped, and the paired
     half-fields keep their relationship inside it. */
  .contact__form { max-width: 62rem; }
}

/* --------------------------------------------------------------------------
   Tablet — the pages the spread rule above does not reach
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1366px) {

  /* ---- Single wine ------------------------------------------------------
     Both bottle plates are 62% of the column, which is right on a phone and
     absurd on a tablet: at 1366 that is an 850px bottle. They cap at roughly
     the width Figma gives them against the 1920 frame, and the reading matter
     takes the same measure as everywhere else. */
  .page .product__plate  { width: min(62%, 30rem); }
  .page .product__bottle { width: min(62%, 34rem); }

  .page .product__tagline,
  .page .product__specs,
  .page .product__abv,
  .page .product__intro,
  .page .product__row { max-width: 62rem; margin-inline: auto; }
  .page .product__row { padding-inline: 0; }

  /* Five wines, four tiles a row: two-up left a bottle the size of a door. */
  .page .product__explore { grid-template-columns: repeat(4, 1fr); }

  /* ---- Wines listing ----------------------------------------------------
     The four Figma rows become a grid below the desktop branch; two columns
     is a phone's answer, and a tablet has room for three or four. */
  .wine-row { grid-template-columns: repeat(3, 1fr); }

  /* ---- Contact and booking ---------------------------------------------- */
  .contact__band { height: 46vh; }
}

/* Four columns were tried and dropped: the collection is 3 whites, 3 reds and
   2 rosés, so a four-up row leaves every category with a hole in it. */

/* ==========================================================================
   Two things the phone found
   ========================================================================== */
@media (max-width: 1366px) {

  /* ---- 1. The header had nowhere to be ---------------------------------
     Figma draws the header inside the hero frame, so components.css makes it
     absolute and it scrolls away with the hero.  That is liveable with a
     mouse and wrong with a thumb: the wine slider alone pins for three
     screens, and for every one of them the menu is somewhere above the top of
     the document.  js/header.js was already written for a fixed header — it
     watches which section is underneath and flips the mark to its light
     rendering over the dark ones — so this is the CSS catching up with it.

     A scrim rides in once the page has moved, because a fixed header crosses
     photographs the absolute one never met and black bars on a bright
     vineyard read as smudges.  At the very top there is no scrim at all, so
     the first thing anyone sees is the composition Figma drew. */
  /* The header is fixed, scrimmed and self-hiding at every width now — see
     components.css.  This branch no longer has anything of its own to say
     about it. */

  /* ---- 2. The slider was taller than the screen ------------------------
     `height: auto` made this section 60vh of colour band plus however tall
     the copy turned out — about 1.3 screens on a phone.  A pinned section
     taller than the viewport cannot show its own bottom, so the description
     ran off below the fold and the closing state was unreachable.

     It is one screen now, and everything inside is measured against that
     screen rather than against the band it used to hang from.  `svh` is the
     small viewport — the one with the URL bar showing — so nothing reflows
     when the bar hides. */
  .wines {
    height: 100vh;
    height: 100svh;
    padding-bottom: 0;
    overflow: hidden;
  }

  .wines__band  { height: 46vh; height: 46svh; min-height: 22rem; }
  .wines__stage { height: 46vh; height: 46svh; min-height: 22rem; }
  .wines__names { top: 8vh; top: 8svh; }

  /* The Figma ratios are unchanged — 104.7% and 118.8% of the band's height,
     spilling past it exactly as they do at 1920 — they are just measured
     against the new band. */
  .wines__bottle--giannoudi,
  .wines__bottle--xynisteri { width: 22.5svh; height: 48.2svh; margin-left: -11.25svh; }
  .wines__bottle--viognier  { width: 25.6svh; height: 54.6svh; margin-left: -12.8svh; }

  .wines__copy {
    position: absolute;
    left: 0;
    right: 0;
    top: 48vh;
    top: 48svh;
    bottom: 0;
    margin-top: 0;
    overflow: hidden;
  }

  .wines__title { margin-top: 2.4rem; }
  .wines__desc  { margin-top: 1.2rem; }
  .wines__link  { margin-top: 1.8rem; }
}

@media (max-width: 767px) {
  /* The copy has half a phone screen to land in, so it is set a step down. */
  :root { --fs-slide-title: 2.8rem; --lh-slide-title: 3.3rem; }
  .wines__desc { font-size: 1.6rem; line-height: 2.4rem; }
}

/* --------------------------------------------------------------------------
   Tablet — the photo collages
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1366px) {

  /* On a phone the collage becomes a stack: full-width tall photo, half-width
     strip, repeat.  Run that at 1366 and each tall photo is 1555px — a screen
     and a half of vineyard, and the two galleries alone were 7,500px of the
     home page.  The desktop arrangement fits here perfectly well: tall photo
     left, strip top-right, tall photo right, strip bottom-left, which is
     exactly where Figma puts the four of them. */
  .gallery { align-items: start; }
  .gallery__item:nth-child(1) { grid-column: 1; grid-row: 1; aspect-ratio: 855 / 1047; }
  .gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; aspect-ratio: 523 / 262; }
  .gallery__item:nth-child(3) { grid-column: 2; grid-row: 2; aspect-ratio: 855 / 1047; }
  .gallery__item:nth-child(4) { grid-column: 1; grid-row: 2; aspect-ratio: 523 / 262; }
}

/* --------------------------------------------------------------------------
   Corrections found on a real phone
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {

  /* The first bar keeps components.css's `:nth-child(1) { top: 0 }` — a
     0,2,0 selector that a plain `.nav-toggle__bar` cannot outrank — so when
     the button grew to 44px the top bar stayed pinned to its edge while the
     other two moved down.  Matching the specificity fixes the spacing. */
  .nav-toggle__bar:nth-child(1) { top: 1.4rem; }

  /* The closing slide is a black screen with the oval on it.  Here the band is
     only the top 46svh, because the wine states put their copy underneath it
     on the page colour; the closing state has no copy, only the button, so the
     band takes the whole slide.

     It used to stop at 91.6svh, mirroring the 824-of-900 the frame was drawn
     at and keeping the design's thin strip at the bottom.  The client asked
     for the picture to reach the bottom edge, and the ratio was never stable
     anyway — the band is a fixed height at 1920 while the screen is not, so
     the "thin strip" was a quarter of a 1080-tall screen. */
  .wines__band { transition: background-color 0.55s var(--ease-out), height 0.55s var(--ease-out); }
  .wines.is-closing .wines__band { height: 100svh; }

  /* With the band covering the slide the copy area can take the whole screen,
     and the oval centres in the black rather than in what is left below it. */
  .wines.is-closing .wines__copy { top: 0; }
  .wines__cta { top: 50%; transform: translate(-50%, -50%); }
}

/* --------------------------------------------------------------------------
   Three more from the phone
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {

  /* ---- The wine tiles ---------------------------------------------------
     The name is drawn inside the tile, `bottom: 2.6rem`, because the Figma
     tile is 326 x 433 and the bottle's poster leaves room for it down there.
     Narrow the tile to half a phone and `object-fit: cover` scales the bottle
     up to fill — the room disappears and the name lands across the glass.
     Below the desktop branch the tile stops being an overlay and becomes what
     it looks like: a picture with its name under it. */
  .page .wine-tile { aspect-ratio: auto; }
  .page .wine-tile__link { position: relative; inset: auto; }
  .page .wine-tile video { aspect-ratio: 326.587 / 432.727; height: auto; }
  .page .wine-tile__name {
    position: relative;
    left: auto; right: auto; bottom: auto;
    display: block;
    margin-top: 1rem;
    opacity: 1;
    transform: none;
  }
  .page .product__explore { align-items: start; }

  /* ---- Our manifest -----------------------------------------------------
     `-22vh` lifted the button onto the illustration, which is where 1920 puts
     it — but at 1920 it sits in open sky at the left of a very wide frame,
     and on a phone the frame is cropped to the building and the button lands
     on the drawing.  It goes underneath instead. */
  .experience__cta { margin: 3.2rem auto 10vh; }
}

@media (max-width: 1366px) {
  /* Figma sets this heading ON the valley film — that is the entire job of
     `.territory__fade-top`, a white scrim over the top of the film to read it
     against.  The flow layout dropped the eyebrow and the heading below the
     film instead, which left the fade washing out a picture for no reason and
     the heading sitting on plain page.  Both go back over the film, inside
     the fade, and the fade grows to cover what it is covering for. */
  .page .territory__eyebrow,
  .page .territory__display {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    z-index: 3;
    padding: 0 var(--page-x);
  }
  /* `margin-top` still applies to an absolutely positioned box, so the
     4rem / 2rem the flow layout above hands these two were being added to
     `top` — the eyebrow was resolving at 105px, not 65, and the heading at
     120.  That 105px of empty scrim above TERRITORY is the gap; zeroing the
     margins and setting the offsets outright puts the block back at the top
     of the film where Figma has it. */
  .page .territory__eyebrow { top: 2.4rem; margin-top: 0; }
  .page .territory__display { top: 5.9rem; margin-top: 0; }

  /* This one heading is capped below the tier's display size, and it is the
     only one that is.  Every other heading on the site sits on plain page and
     can be as large as the tier allows; this one has to fit inside the scrim
     that lets it read against the valley film.  Measured at 390: it holds three
     to four lines and stays on white up to 4.4rem, and at 4.8 the middle line
     wraps, the heading jumps to six lines and its foot lands on open hillside
     at luminance 140.  At 430 the same break comes at 5.2.  Growing the scrim
     to carry a bigger heading would wash out most of the film on a phone,
     which is the picture the scrim exists to sit on. */
  .page .territory__display { font-size: 4.8rem; line-height: 4.7rem; }

  /* Narrower again, and it has to be written here rather than in the small
     mobile block above: that block is earlier in the file, so at 390 both
     match and the later rule wins.  Same specificity, so position decides. */
  @media (max-width: 479px) {
    .page .territory__display { font-size: 4.4rem; line-height: 4.3rem; }
  }

  /* Figma's fade covers 79% of the film (1594 of 2018).  Holding that ratio
     against a 62vh film keeps the heading on scrim at every screen size —
     a fixed height cleared it on a phone and left the last line stranded on
     the vineyard at 768. */
  .territory__fade-top {
    height: 52vh;
    min-height: 28rem;
    /* One straight ramp from the top leaves the last line of the heading on
       open hillside — at 1920 the heading sits in the first 11% of a fade
       1594px tall, which is solid page colour, and a phone's film is far too
       short to reproduce that ratio.  So the scrim holds while the heading is
       on it and only then falls away. */
    background: linear-gradient(to bottom,
                var(--c-page) 0%,
                var(--c-page) 54%,
                rgba(252, 252, 252, 0.88) 70%,
                rgba(252, 252, 252, 0) 100%);
  }

  /* The lead now starts straight after the film rather than after the
     heading that used to sit between them. */
  .page .territory__lead { margin-top: 4rem; }
}

/* --------------------------------------------------------------------------
   Two things a phone showed up
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {

  /* ---- Chapter headings ------------------------------------------------
     These headings are written as one span per line so the desktop
     composition breaks exactly where Figma breaks it, and global.css makes
     every one of those spans a block.  On a phone that is four spans and
     therefore four lines for "From the Vineyards of Kannaviou to the Bottle",
     which flows into two — the heading was being split by a rule that has
     nothing to do with the width available to it.

     Inline here, so the line breaks come from the column instead.  There is
     whitespace between the spans in the markup, so they set with proper word
     spaces.  The big grey display statements keep their spans as blocks: in
     those the line breaks ARE the composition, not a desktop artefact. */
  .page .about__heading > span,
  .page .terrain__heading > span,
  .page .sust__heading > span { display: inline; }

  /* Sustainability's spans are written flush against each other, with no
     whitespace between them — and the leading spaces inside the first one are
     deliberate: sustainability.css holds them with `white-space: pre` because
     Figma indents line 1 to clear the icon.  So the word space cannot come
     from the markup without moving the desktop heading; it comes from here,
     where the spans are inline and `white-space` is already normal. */
  /* `white-space: pre-wrap` on the pseudo-element itself, because a lone
     space in generated content collapses to nothing under `normal` — the
     space was being inserted and then thrown away.  `pre-wrap` keeps it
     and still allows the line to break there. */
  .page .sust__heading > span + span::before { content: ' '; white-space: pre-wrap; }

  /* ---- The closing button ----------------------------------------------
     `margin: … auto` was already there and doing nothing: `.btn-oval` is
     `inline-flex`, and auto margins do not centre an inline box.  Flex makes
     the element a block-level flex container, which is what the auto margins
     have been waiting for. */
  .page .closing__cta { display: flex; }
}

/* ==========================================================================
   Sustainability — the descent.

   The desktop file positions the copy against a 1920 stage.  Below 1367 the
   rem ladder stops scaling, so the copy column has to be told its width and
   its type sizes again.  Everything else is full-bleed film and needs no
   help: the stage, the pin and the order of the five movements are the same
   at every width.
   ========================================================================== */
@media (max-width: 1366px) {
  .mv { width: 74%; bottom: 9rem; }
  .mv--above          { width: 88%; }
  .mv__lede,
  .mv__body           { font-size: 2.2rem; line-height: 3.2rem; width: auto; }
  .mv__aside          { font-size: 1.7rem; line-height: 2.6rem; width: auto; }

  .mv__heading        { margin-bottom: 2rem; }

  /* Below the design width there is no column to the right of the spotlight,
     so the marks come back under the copy and the spotlight is sized against
     the viewport instead of the rem ladder — the same two moves the Terrain
     frog scene makes at this breakpoint. */
  /* The rem ladder stops scaling here, so the spotlight is sized against the
     viewport instead — but the multiplier is the scale itself, not the scale
     over 0.31, which would have made the finished circle three times the
     radius it was drawn for. */
  .descent { --spot-r: min(34vw, 26vh); }
  .descent__ring { width: calc(min(34vw, 26vh) * 2.13); height: calc(min(34vw, 26vh) * 2.13); }

  .mv--proof { width: 74%; }

  /* A compact row of icon and title, under the copy: the sentences belong to
     the wide layout, where there is a column to hold them. */
  .marks {
    inset: auto auto 7rem var(--page-x);
    display: flex;
    gap: 4rem;
  }
  .marks__item {
    position: static;
    left: auto; top: auto;
    width: auto;
    /* NOT opacity 1.  This block unwinds the desktop placement, and it took
       the hidden start state with it — so on a phone the three marks were
       painted the moment the stylesheet landed and then yanked away a sixth
       of a second later when the timeline first rendered and set them back
       to 0.  Measured at 390: visible from 67ms to 227ms.  They are brought
       in by the timeline at 0.955 like everywhere else, so they start hidden
       like everywhere else. */
    opacity: 0;
    transform: none;
  }

  /* Reduced motion has no timeline to bring them in, and its own rule for
     this lives in sustainability.css — an earlier file, so it loses to the
     line above.  It has to be re-stated here or a reader who asked for no
     motion gets no marks at all. */
  @media (prefers-reduced-motion: reduce) {
    .marks__item { opacity: 1; }
  }
  .marks__note { display: none; }
  .marks__icon { height: 3.4rem; }
  .marks__body { font-size: 1.7rem; line-height: 2.4rem; }

  /* Room above them for the copy. */
  .mv--proof { bottom: 17rem; }
}

@media (max-width: 767px) {
  /* This was tripled to 1860vh when the fall was PLAYED to the scroll: the
     film could only run so fast, so the scroll had to be slowed down to let
     it keep up.  The fall is seeked now, and a seek is exact at any scroll
     speed — so the length buys nothing, and it costs the thing it was meant
     to protect.  481 frames spread over 14854px is one new frame every 31px,
     which at an ordinary slow drag is six frames a second: a slideshow.  At
     620 it is one frame every 9px, or twenty-two a second against a film
     that only has twenty-four, which is as close to the film itself as this
     scene can get. */
  .descent { height: 620vh; }

  /* sustainability.css sets this back to `auto` for reduced motion, where
     there is no pin and no scrub and the scene is a plain column — but that
     rule is in an earlier file at the same specificity, so this one was
     winning and a reader who asked for no motion got the column inside a
     section six hundred vh taller than its content.  It has been wrong since
     the mobile height existed; tripling the height tripled the hole. */
  @media (prefers-reduced-motion: reduce) {
    .descent { height: auto; }
  }

  .mv {
    left: var(--page-x);
    right: var(--page-x);
    width: auto;
    bottom: 7rem;
  }

  .mv--above          { width: auto; }
  .mv__lede,
  .mv__body           { font-size: 1.9rem; line-height: 2.9rem; }
  .mv__body--last     { margin-top: 1.6rem; }
  .mv__aside          { font-size: 1.6rem; line-height: 2.4rem; margin-top: 2rem; }

  .marks { inset: auto auto 5.5rem var(--page-x); gap: 2.8rem; }
  .marks__icon { height: 3rem; }
  .marks__body { font-size: 1.5rem; line-height: 2.1rem; }
  .mv--proof { width: auto; bottom: 15rem; }

}

/* ==========================================================================
   Our manifest — phone only
   ========================================================================== */
@media (max-width: 767px) {
  /* The button was carrying 32px of air above it and 10vh (84px at 844)
     below, on top of the journal's own 7rem of top padding — 154px of nothing
     between the button and JOURNAL.  Phone only; the tablet spread keeps the
     larger rhythm it was measured for. */
  .experience__cta { margin: 2.4rem auto 3.2rem; }

  /* Territory and Experience paint #ffffff while everything around them —
     hero, wines, journal, and the territory scrim itself — paints #fcfcfc,
     so the section joins showed as a faint step, most visibly right under the
     manifest button where Experience meets Journal.  Both go to page colour
     on a phone; the join disappears rather than moving up a section. */
  .territory,
  .experience { background: var(--c-page); }
}

/* ==========================================================================
   About chapters — one rhythm, phone only
   ========================================================================== */
@media (max-width: 767px) {
  /* Every gap between a chapter's blocks measured 3.2rem — except the join
     between one chapter and the next, which was the body's 2rem foot plus the
     section's 1.2rem foot plus the next section's 3.6rem head: 68px against
     32.  The chapter boundary carries no extra weight now; one 3.2rem head on
     the section is the only thing separating the blocks, so the gap above a
     heading is the same whether the block before it is a plate in the same
     chapter or a paragraph in the one before. */
  .about-1, .about-2, .about-3, .about-4 { padding: 3.2rem var(--page-x) 0; }
  .page .about__body { margin: 0; }

  /* about-3 runs heading → copy → plate, so the plate needs the gap on its
     head there, and must not also carry one on its foot into the next
     chapter's 3.2rem. */
  .page .about__body + .about__figure { margin-top: 3.2rem; }
  .page .about__figure:last-child     { margin-bottom: 0; }
}

/* ==========================================================================
   Terrain chapters — one rhythm, phone only
   ========================================================================== */
@media (max-width: 767px) {
  /* Same job as the About block above.  A terrain chapter ran on four
     different gaps — 24 heading to plate, 32 plate to block, 36 block to
     block, and 84 across the chapter join (the last block's 3.6rem foot plus
     the section's 1.2rem foot plus the next section's 3.6rem head).  All four
     become 3.2rem.  The icon keeps its tighter 1.6rem: it labels the heading
     the way an eyebrow labels a paragraph, and that pairing is what the gap
     above the icon has to read against. */
  .terrain-1, .terrain-2, .terrain-3 { padding: 3.2rem var(--page-x) 0; }
  .page .terrain__heading { margin: 0 0 3.2rem; }
  .page .terrain__block   { margin: 0 0 3.2rem; }
  .page .terrain__block:last-child { margin-bottom: 0; }

  /* terrain-3 used to hand the valley plate 48px off its foot; the section
     gives nothing now, so the plate carries its own, matching the About
     page's film band. */
  .terrain__valley { margin-top: 4rem; }
}

/* ==========================================================================
   Journal index — the first rule sits between two things, phone only
   ========================================================================== */
@media (max-width: 767px) {
  /* The row's top border is the line under the lede, and it was reading as
     the lede's own trailing rule rather than the first row's head: 60px of
     air above it against the 30px the row's padding puts below it.  Same 30
     on both sides and it belongs to the list. */
  .post-list { margin-top: 3rem; }
}