/* =========================================================
   LANDING — "Choose a lady like a lady"
   Hand: hand-landing.webp — gloved hand squeezing a soapy sponge.
   The wrist enters bottom-right; the swirl's middle strand crosses it.

   Loaded AFTER dist/styles.css, so everything here wins on cascade order
   alone — no !important, no specificity games.
   ========================================================= */
body[data-page="index"] {
  /* HAND — this is the hand the shared --art-right was fitted to, so it needs
     no offset of its own (--hand-nudge stays 0). */

  /* SWIRL — nothing here. The swirl is global and signed off; it lives in
     :root and is the same on every page. */

  /* the stripe fitted to THIS hand (the wrist below the sponge) */
  --stripe-down: -1;
  /* how much of that strand may come forward — stops the band also landing on
     the sponge and the suds as a stray sliver. url() is relative to THIS file
     (css/pages/), not to dist/. See --front-span in input.css. */
  --front-span: url("../../assets/weave/landing.webp?v=79");

  /* COPY — the headline block. Pinned to the viewport, not the canvas, so
     these are % of the VIEWPORT. Fitted against the design. */
  --ctop: 54.6%;
  --cw: 40%;
  --cleft: 12.3%;
}

/* HEADLINE WEIGHT — the landing poster sets "Choose a lady…" much lighter than
   the shared .headline default (weight 800). Measured against the design: its
   stroke-to-cap ratio is 0.169; weight 500 gives 0.173, 600 already 0.187, 800
   an over-heavy 0.239. Scoped to the landing on purpose — the other pages'
   headlines were checked against their own references at the shared weight and
   are correct, so this must not leak onto them. Size is bumped in wide mode
   below (the poster headline is ~11% taller than the old fit). */
body[data-page="index"] .headline {
  font-weight: 500;
}

/* The drawn "s" of Choose sits between heavy sans letters. Neulis Cursive is a
   single weight — font-weight does nothing — and renders lighter than the sans,
   so it looked underweight next to "Choo…e". A same-colour text-stroke fattens
   just this letter to match the sans strokes (the design's s is as heavy as its
   neighbours). Scoped to this one letter so "lady" keeps its lighter script. */
body[data-page="index"] .headline .drawn-heavy {
  -webkit-text-stroke: 1px currentColor;
  text-stroke: 1px currentColor;
  paint-order: stroke fill;
}

/* Wide frames swap in the design's own hand (see index.html's <picture> and
   the wide-mode dials in src/input.css). --stripe-down: -1 above was fitted
   to hand-landing.webp's wrist; the design photo at its PSD box needs the
   computed fit as-is — step-1 shows the same photo there with no nudges. */
@media (min-aspect-ratio: 3900/1816) {
  body[data-page="index"] {
    --stripe-down: 0;
  }
}

/* Wide mode: land the copy on the poster's measured rows — pill top 54.61%H,
   headline cap-ink top 65.41%H, both measured off the design reference by
   colour mask.

   These were first dialled against Poppins, whose leading pushed the pill's
   rendered top ~1.2%H below the column top and so needed --ctop pulled up to
   53.4%. Real Neulis Sans doesn't: its rendered pill top lands ON the column
   top, so the correction cancels and --ctop returns to the fitted 54.61%.
   Re-measured after the Neulis switch; if the face changes again, re-measure
   rather than nudging — the two numbers below are fitted, not chosen. */
@media (min-aspect-ratio: 3900/1816) {
  body[data-page="index"] {
    --ctop: 54.61%;
    --cgap: calc(2.46 * var(--fw));
  }
  /* Poster headline size: the design cap-height is 7.44%H; the old 4.3fw
     rendered 6.70%H. 4.77fw lands 7.50%H. --cgap above is re-fitted for this
     taller headline so the cap-ink top still hits the design's 65.41%H row. */
  body[data-page="index"] .headline {
    font-size: calc(4.77 * var(--fw));
  }
}

/* Send the hand-drawn underline BEHIND the letters so the "y" descender (and any
   other ink that dips into it) crosses in FRONT of the pink stroke, the way a
   drawn line sits under the word. The stroke is below the baseline everywhere
   else, so only the y-crossing changes. .mark is position:relative with no
   z-index (no stacking context) and no background, so z-index:-1 lands the SVG
   just under the blue text but still above the page. */
body[data-page="index"] .mark.underline > svg {
  z-index: -1;
}