/* Hero LAYOUT now lives in site.css (.hero). Removed 15 Aug — five parallel copies had
   drifted apart and every fix had to be made five times. This file keeps type/colour only. */
/* =============================================================================
   page-index.css — the Home page (/) only.

   Everything shared — .container, .band*, .btn*, .arrowlink, .textlink,
   .eyebrow, .eyebrow-rule, .t-script, .t-display-*, .card*, the header, the
   marquee and the footer — lives in site.css and is used here by its EXISTING
   class names. This file holds only Home's own sections, all prefixed `idx-`.

   Every number is measured off design/Home/mockup.png (1602x5377, 1:1) via
   notes/spec-index.md, then re-measured on the built page (screenshot probed
   with mockup_probe.py) until the rendered ink landed on the comp's ink.
   Comments quote mockup y values, which are page-absolute CSS px.

   Type follows notes/typography.md, NOT spec-index.md §4: the typographer's
   identification (Young Serif 400 / Great Vibes 400 / Jost 300 @ 14px) landed
   after the spec was written and supersedes its Fraunces-derived px column.
   The spec's CAP HEIGHTS still hold and are what these sizes are solved from
   (Young Serif cap ratio 0.76, verified against typography.md's h1 88px/cap 68).

   Two things here are deliberate deviations, both documented in the build
   report: the 3-up film grid that fills the comp's empty 783px placeholder,
   and the crops that hide UI baked into the two placeholder photographs.
   ============================================================================= */

.page-index {
  /* Home has FIVE display sizes with five line-heights — the comp really is
     that loose (spec §9.6). Two of them are exactly the shared scale and are
     used from it: story H2 = .t-display-m (50/61, cap 38-39) and location H2 =
     .t-display-s (44/52, cap 34, typography.md's "Based in Austin" fit). Only
     the two that fall between shared steps are page-local. */
  --ix-h2-films: 52px;   /* cap 41/0.76 = 54, trimmed to the measured 1025px ink run */
  /* 45, not the 46 that cap 35 / 0.763 gives: at 46 Young Serif sets
     "day isn't a movie" at 381.0 against a 381 track (a coin-flip wrap) and
     "it performing for" at 395.4, which wraps ONE WORD LATE and destroys the
     comp's L5/L6 break. At 45 the same two strings are 372.7 and 386.8 — both
     clear of 381 — so all six lines break on the comp's words inside the
     comp's own 381px track. Cap lands 34.3 vs the measured 35. */
  --ix-h2-why:   45px;

  /* Text measures, bracketed off the mockup (spec §2) — never guessed. */
  /* A measure is only right if the block breaks on the SAME WORDS as the comp,
     so each is solved as an interval measured IN-PAGE with the real face:
     >= the comp's widest line set in Jost 300/14px, and < that line plus the
     first word of the next. Scaling the comp's own pixel brackets by a single
     face ratio is not accurate enough at 14px — two of the three intervals
     below are under 11px wide. Grid TRACKS are never scaled. */
  --ix-m-hero:  406px;   /* [401.3 = L3, 408.6 = L4+" matter")   -> 5 lines  */
  --ix-m-story: 590px;   /* [583.8 = p4L1, 594.7 = p5L1+" you're") -> 12 lines */
  --ix-m-films:1128px;   /* [1042.8 = L1, 1165.3 = L1+" film")   -> 2 lines  */
}

/* --------------------------------------------------------- display type ---
   Young Serif ships ONE weight — the family, colour and weight-400 all come
   from site.css's h1..h4 base rule and are never overridden here. */
.idx-films__title { font-size: clamp(32px, 3.25vw, var(--ix-h2-films)); line-height: calc(77 / 52); }
/* vw coefficient = target / 16.02 so the measured desktop size is reached at
   EXACTLY the 1602 design frame, not somewhere above it. */
.idx-why__title   { font-size: clamp(30px, 2.81vw, var(--ix-h2-why));   line-height: calc(54 / 45); }

/* Body blocks. 27px line-height (site default) with a 42px baseline pitch
   => 15px bottom margin. The hero and the burgundy band override to 26.

   DESKTOP: 18px across every Home body block (T-20 — Pat's Slack request
   extending HRF-2's hero-only 18px to the rest of the page, titles/headings
   excluded). 31px line-height matches the hero's existing 18/31 pairing so the
   whole page reads as one scale. Mobile is untouched — reverted below in the
   ≤900px query. */
.idx-body { font-size: 18px; line-height: 31px; }
.idx-body p { margin: 0 0 15px; }
.idx-body p:last-child { margin-bottom: 0; }

/* the two 1fr 2fr sections (story, location) share one grid */
.idx-cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 96px;
}
.idx-cols__side, .idx-cols__main { min-width: 0; }

/* ================================================================= hero ===
   Band y0-967. Full-bleed 50/50; the header (112px) overlays it. */
/* The photograph/video fills whatever height the rule above resolves to. */

/* copy panel x0-800; 56px is measured off the PAGE edge, not the container */

/* ⚠ PLACEHOLDER CROP. home-hero-bride.png was cut out of the mockup, so the nav
   is printed into its top 74 source rows (probed: the baked burgundy CTA runs
   rows 38-73 of 968). Without this crop the real nav ghosts on top of the
   printed one. The image is bottom-anchored and over-scaled so those rows fall
   outside the frame.
   The overscan is a RATIO, not the old flat 96px. A fixed 96 only cleared the
   baked nav at the comp's 967px band: the clearance needed is 74/968 of the
   DRAWN height, so as the band grows with the full approved lede (now 1273px)
   96px stops being enough and the printed CTA re-appears as a red sliver.
   height:110% gives overscan = 10% of the band — 96.7px at the comp's 967
   (i.e. the measured crop is preserved) and always > the 8.3% required.
   DELETE this whole block (leave a plain object-fit:cover img) as soon as the
   clean @2x export lands — see the build report. */
.idx-hero__media img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: auto;
  max-width: none;
  height: 110%;
}

/* Hero video (Pete, 15 Aug). Fills the same portrait slot the still occupied.
   The clip is 16:9 landscape and this slot is portrait, so `cover` is doing real work here —
   it crops the sides. object-position keeps the couple, who sit slightly right of centre in
   the frame, inside the visible area instead of letting `cover` centre-crop them off. */
.idx-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
  display: block;
}

/* Scrim behind the nav (Pete, 15 Aug: "hard to read the text").
   The header overlaps the top of the hero, so the nav links land on whatever the video happens
   to be showing — which changes every frame and is often bright sky. A fixed top-down gradient
   gives them a constant dark base to sit on.

   180px covers the 112px bar plus enough falloff that the edge is never visible as a band.
   It stops at transparent, so the footage below is completely untouched. pointer-events:none so
   it cannot intercept clicks on anything beneath it. */
.idx-hero__media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  background: linear-gradient(to bottom,
              rgba(20, 12, 8, .58) 0%,
              rgba(20, 12, 8, .34) 45%,
              rgba(20, 12, 8, 0) 100%);
  pointer-events: none;
  z-index: 2;
}
/* The <img> inside <video> is the no-playback fallback; give it the same fit rather than
   letting the rule above apply the still-image treatment to it. */
.idx-hero__video img {
  position: absolute;
  inset: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
}

/* Motion is decorative here. CSS cannot stop an autoplaying video, so the actual pause is done
   in site.js; a paused <video> shows its poster attribute, which is frame 1 of this same clip.
   The slot therefore still looks finished — it simply holds still. */

/* size comes from .t-script (Great Vibes 30px, typography.md); only rhythm here */
.idx-hero__script { margin: 0; line-height: 1; }

/* ink: L1 y270-338 … L4 y544-616; baselines 337/430/523/614 => 92px pitch,
   which is exactly what .t-display-xl carries (88px/92px). Nothing to override. */
.idx-hero__title { margin: 20px 0 0; }

/* Hero body — DESKTOP: 18px filling the copy column (Pat QA, HRF-2 30 Jul: "change the font
   size to 18px and make sure it covers the white space. desktop only, leave mobile as is").
   This supersedes the comp's measured 16/26 + 406px measure for this block: the content
   expansion made the copy column tall next to the photo, and the narrow measure left a wide
   empty gutter. Mobile keeps the previous rhythm via the ≤900px override below. */
.idx-hero__body {
  max-width: none;         /* fill the column — no orphaned white space to the right */
  margin-top: 31px;
  font-size: 18px;
  line-height: 31px;
}
.idx-hero__body p { margin: 0 0 18px; }
.idx-hero__body p:last-child { margin-bottom: 0; }

/* READ MORE is centred on the 416px body measure: ink centre 263.5 vs 262 */
/* centred on the COMP's 416px measure (ink centre 263.5), not on the 462px
   substituted measure — otherwise it drifts 22px right of the comp */
.idx-hero__readmore { margin: 3px 0 0; max-width: 416px; text-align: center; }
.idx-readmore { border-bottom-color: rgba(91, 13, 26, .25); }

/* button box x56-238 y859-903 (183x44); link underline aligns to its bottom */
.idx-hero__cta {
  display: flex;
  align-items: stretch;
  gap: 17px;
  margin-top: 38px;
}
/* 183x44 — exactly the shared .btn--lg hero size, nothing to override */
/* colour + rule come from the shared .arrowlink--dark; only the alignment to
   the button's bottom edge and the measured 9px text->arrow gap are local */
.idx-hero__filmlink { padding-bottom: 0; gap: 9px; }

/* ================================================================ story ===
   Band y1013-1952 (939). Top pad 151 (-> H2 ink 1164), bottom pad 141. */
/* the 1px #D8C2A8 rule on the story/films boundary (comp rows 1951-1952: one
   1px stroke on a half-pixel, normalised to 1px here — spec §9.14) */
.idx-story { padding: 144px 0 139px; border-bottom: 1px solid var(--tan); }
/* Split variant (15 Aug): the band is now a .splitsec, so .splitsec__copy owns the
   vertical rhythm. Zero the band's own padding or the two stack and the section
   gains ~290px of dead cream. The hairline stays — it still separates story from films.
   The link row was centred to sit in the middle of the old wide right track; in a
   split column it belongs on the text's left edge like everything above it. */
.idx-story--split { padding: 0; }
.idx-story--split .idx-story__linkrow { text-align: left; }
.idx-story--split .idx-story__title { max-width: none; }
.idx-story--split .idx-story__body { max-width: none; }

.idx-story__eyebrow { margin: 6px 0 0; }
.idx-story__rule { margin-top: 18px; }   /* rule y1208, 32x1 burgundy */

/* SHARED-CLAMP COMPENSATION — delete when site.css's vw coefficients are fixed.
   .t-display-m is clamp(30px, 3.1vw, 50px): at the 1602 design frame 3.1vw is
   49.66px, so the middle term wins and the measured 50px max is NEVER reached.
   With site.css's line-height now a RATIO (1.22) that undersize propagates into
   the leading — 60.58px instead of the measured 61 — and the band loses a pixel
   per line. 3.13vw = 50.14 at 1602, so the 50px cap binds and 50 x 1.22 = 61.
   Identical to the shared value once the shared coefficient is corrected. */
.idx-story__title { margin: 0; max-width: 714px; font-size: clamp(30px, 3.13vw, 50px); }
.idx-story__body  { max-width: var(--ix-m-story); margin-top: 34px; }

/* centred in the 714.67 track (ink centre 1027 vs track centre 1027.7) */
.idx-story__linkrow { margin: 27px 0 0; text-align: center; }

/* ================================================================ films ===
   Band y1952-2971 (1019). Eyebrow ink 2020, H2 ink 2058-2187, then the comp
   leaves 783px of empty cream. The 3-up grid below fills exactly that. */
.idx-films { padding: 59px 0 57px; }

/* The link is taken out of flow so the H2 keeps its full 1080px measure — in
   the comp the H2 runs to x1244 and the link starts at x1342, they never share
   a track. */
.idx-films__head { position: relative; }
.idx-films__headmain { min-width: 0; }
.idx-films__eyebrow { margin: 0; }
.idx-films__title   { margin: 6px 0 0; max-width: var(--ix-m-films); }

/* Two-line label + arrow, 11px #7A6A5F, arrow on the vertical middle.
   The comp puts this link's right edge at x1398 — 13px OUTSIDE the 1168
   content box. Kept inside the box here; flagged in the build report. */
.idx-allfilms {
  position: absolute;
  top: 7px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--body);
  transition: color .18s ease;
}
.idx-allfilms:hover { color: var(--brown); }
.idx-allfilms__label {
  display: block;
  width: 4em;                 /* forces the ALL / FILMS break the comp shows */
  text-align: center;         /* the comp centres ALL over FILMS */
  font-size: 11px;
  line-height: 14px;      /* comp: ALL cap-top 2020, FILMS cap-top 2034 -> 14px pitch */
  letter-spacing: .18em;
  text-transform: uppercase;
}
.idx-allfilms svg { width: 6px; height: 6px; flex: none; }   /* comp ink is 5px */

/* ---- the film grid (deliberate deviation — see the header comment) --------
   Same 3 x 373.33 + 24px gutter as the Portfolio grid, so the two pages'
   cards are literally the same object. 747x996 assets are @2x of the
   rendered 373.33x497.78 box, so the 3:4 frame crops nothing. */
.idx-filmgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 40px;
  margin-top: 48px;
}
.idx-film__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.idx-film__media { aspect-ratio: 3 / 4; }
.idx-film__media img { transition: transform .5s ease; }
.idx-film__link:hover .idx-film__media img { transform: scale(1.03); }

.idx-film__title { margin: 21px 0 0; }   /* size from the shared .t-display-sm */
/* DESKTOP: 18/31 like every other Home body block (T-20 rework — the film
   card descriptions were the one body-copy block missed in the first pass).
   Mobile reverts to the pre-existing 13/22 at <=900px; the <=600px query
   below already carries its own narrower-card size and wins by source order. */
.idx-film__desc {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 31px;
  color: var(--body);
}

.idx-films__linkrow { margin: 36px 0 0; text-align: center; }

/* ================================================================== why ===
   Band y2971-3759 (788), #5B0D1A. 381 + 96 + 691 = 1168 exactly. */
.idx-why { padding: 137px 0 140px; }

.idx-why__grid {
  display: grid;
  /* The comp's exact tracks: 381 + 96 + 691 = 1168, col 2 starts at x694.
     The first pass had to widen this to 396/81 to stop Fraunces wrapping the
     H2 a word early; Young Serif at 45px needs no such compensation, so the
     comp geometry is restored verbatim. */
  /* Proportional, not fixed (Pete, 15 Aug: "should not be leaving big gaps on the right...
     should be percentages of the whole"). The comp's tracks were 381 + 96 + 691 inside a 1168
     content column; once that column became 1488 the fixed tracks stopped filling it and left
     ~400px of dead band on the right. The RATIO is preserved exactly — 381:691 = 1:1.814 — so
     the proportions the design was drawn to survive at any width. */
  grid-template-columns: 1fr 1.814fr;
  gap: 96px;
}
.idx-why__side, .idx-why__main { min-width: 0; }

/* out-specifies site.css's .band--burgundy .eyebrow (tan) — measured #A67A6F */
.idx-why .idx-why__eyebrow { color: #A67A6F; margin-bottom: 27px; }

/* 385 = the top of the comp's measured [370, 386) bracket, and what forces the
   comp's 6-line break: "day isn't a movie" (381) fits, "it performing for"
   (395) does not. */
.idx-why__title { margin: 0; max-width: 385px; }

/* the burgundy band was the other 16/26 block (spec §9.4); line-height now
   comes from .idx-body's 18/31 (T-20) — only colour is still page-local here. */
.idx-why__body, .idx-why__closing { color: var(--body-on-burg); }
.idx-why__body p { margin: 0 0 16px; }
.idx-why__body p:last-child { margin-bottom: 0; }
.idx-why__body { margin-top: 7px; }

/* Bullet rows: marker is a text chevron (5x9 ink, sharp mitre, butt caps — no
   chevron SVG exists in the project), 13px from the label, row pitch 36.5. */
.idx-why__list { margin: 38px 0 0; }
.idx-why__list li {
  position: relative;
  padding-left: 24px;
  color: var(--tan);
  /* DESKTOP 18/31 — matches the hero and every other Home body block. The T-20 pass set
     .idx-why__body and .idx-why__closing but MISSED this list, so the bullets sat at the
     inherited 14px next to 18px paragraphs. That mismatch is what kept HRF-2 coming back
     (Pat, 13 Aug: "change the paragraph text size same with the hero section"). Mobile
     reverts to 14/26 in the <=900px block below. */
  font-size: 18px;
  line-height: 31px;
  margin-bottom: 10.5px;
}
.idx-why__list li:last-child { margin-bottom: 0; }
.idx-why__list li::before {
  content: '\203A';                 /* U+203A single right-pointing quote */
  position: absolute;
  left: 6px;
  top: 0;
  font-size: 15px;
  line-height: 26px;
  color: #A67A6F;
}

.idx-why__closing { margin-top: 39px; }

/* Button C: 316x44 cream on burgundy, centred in the 691 track. */
/* Left-aligned (Pete, 15 Aug). The comp centred this button in its 691px track, but it is the
   only centred element in a column where the heading, the list and the closing paragraph are all
   flush left — it read as detached from the copy it belongs to. */
.idx-why__btnrow { margin: 39px 0 0; text-align: left; }
/* 316x44 — .btn--lg's 30px padding is Home's measured value; only the 14px
   label->arrow gap is local */
.idx-why__btn { gap: 14px; }
.idx-why__btn svg { width: 8px; height: 8px; flex: none; }

/* ============================================================ marquee 2 ===
   Solid #EDE8E0, no visible top hairline, 1px tan rule underneath. The top
   border is kept (transparent) so the band still totals 46px. */
.idx-marquee2 .marquee {
  background: #EDE8E0;
  border-top-color: transparent;
  border-bottom-color: #D8C2A8;
}

/* ============================================================= location ===
   Band y3805-4389 (584). Same grid as story. */
.idx-location { padding: 139px 0 140px; }

.idx-location__eyebrow { margin: 0; }
/* 300 sits inside the comp's measured [286, 365) bracket and is what produces
   its 5-line break — at the full 357px track "Based in Austin." (353) fits on
   one line and the block collapses to 4. */
/* Same shared-clamp compensation as .idx-story__title: .t-display-s is
   clamp(26px, 2.7vw, 44px) and 2.7vw = 43.25px at 1602, which loses 0.9px of
   leading on each of five lines. 2.75vw = 44.06 -> the 44px cap binds, and
   44 x 1.1818 = 52.0, the measured pitch. The 300px measure is what forces the
   comp's "Based in" / "Austin." break: Young Serif sets "Based in Austin." at
   358.8 and "Available for" at 280.5, so 300 sits between them. */
.idx-location__title { margin: 18px 0 0; max-width: 300px; font-size: clamp(26px, 2.75vw, 44px); }

/* ink box 394x29, swash cap A = 23px */
/* typography.md's inline-accent step: Great Vibes 25px (the hero eyebrow is 30) */
.idx-location__script { margin: 16px 0 0; font-size: 25px; line-height: 1; }

.idx-location__body { max-width: 715px; margin-top: 25px; }

/* left-aligned here, unlike the story link */
.idx-location__linkrow { margin: 17px 0 0; }

/* ================================================================= date ===
   NOT IN THE COMP — the "Your Date Is Waiting" block the mockup dropped.
   Deliberately built from parts the page already owns: .idx-cols (the same
   1fr 2fr / 96px grid as story and location), location's 139/140 band padding,
   the shared .t-display-s + .eyebrow-rule, and the 1px --tan hairline that
   already divides story from films. Nothing new is introduced. */
.idx-date { padding: 139px 0 140px; border-top: 1px solid var(--tan); }

.idx-date__title { margin: 0; max-width: 300px; font-size: clamp(26px, 2.75vw, 44px); }
.idx-date__rule  { margin-top: 26px; }
.idx-date__body  { max-width: var(--ix-m-story); margin-top: 6px; }

/* ============================================================= cta-band ===
   Band y4389-5019 (630), full-bleed photo. Button box x703-898 y4662-4708
   (196x46) and the caps line 26px below it, both centred on x801. */
.idx-cta {
  position: relative;
  overflow: hidden;
  min-height: 630px;
  display: grid;
  align-content: start;
  justify-items: center;
  background: #8C5A4C;              /* mean photo tone, so the band never flashes white */
}
/* ⚠ PLACEHOLDER: the asset's bottom 131px are the footer's brown, so the top
   630 rows are pinned. Replace with a plain 1602x630 photo on re-export. */
.idx-cta__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.idx-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 273px 24px 0;            /* button box top lands on y4662 */
}
/* Dark scrim over the photo (Pete, 15 Aug: "instead of the blur can you overlay a bit dark
   so its readable"). Replaces a blur panel that only ever covered a 520x148 patch — the live
   cream controls now sit over a real photograph whose brightness varies with the crop, so the
   band needs a contrast floor across its whole width, not a local patch.
   No z-index: painting after .idx-cta__photo at the same auto level puts it above the image,
   and .idx-cta__inner's z-index:1 keeps the controls above it. */
.idx-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(46, 33, 24, .34) 0%,
    rgba(46, 33, 24, .52) 46%,      /* strongest through the button + caps line */
    rgba(46, 33, 24, .40) 100%);
  pointer-events: none;
}
.idx-cta__btn {
  position: relative;
  min-height: 46px;
  padding: 0 38px;
  border-color: rgba(247, 244, 239, .72);
  color: var(--cream);
}
/* 10px tracked caps, cream at 40%, 26px below the button box */
.idx-cta__note {
  position: relative;
  margin: 23px 0 0;                 /* ink sits 26px below the button box */
  font-size: 10px;
  line-height: 1.2;
  /* Solved to the comp's 306px ink run by canvas actualBoundingBox in Jost 300
     /10px: .18em -> 302.4, .186em -> 305.0, .188em -> 305.9, .19em -> 306.7.
     Do NOT re-solve this off a screenshot: the line is cream at 40% over a
     photograph, so a thresholded ink read of it swings +/-10px. */
  letter-spacing: .188em;
  text-transform: uppercase;
  /* Was .40 (matched to the comp). Over the scrim + a real photo that read as grey mush;
     .78 keeps it clearly secondary to the button without being illegible. */
  color: rgba(247, 244, 239, .78);
}

/* ============================================================== responsive ==
   The mockup is a single 1602px desktop frame — no tablet or mobile comp
   exists. Everything below follows site.css's 1200 / 900 / 600 breakpoints.
   Desktop >=1602 stays exactly as measured. Asserted: no horizontal overflow
   at 1602 / 1440 / 1200 / 900 / 600 / 375.
   ========================================================================== */
@media (max-width: 1400px) {
  /* the 381+96+691 track pair is fixed-width; below 1400 it must flex */
  .idx-why__grid { grid-template-columns: 1fr 1.81fr; }
}

@media (max-width: 1200px) {
  .idx-cols, .idx-why__grid { gap: 64px; }
  .idx-story    { padding: 104px 0 100px; }
  .idx-films    { padding: 48px 0 56px; }
  .idx-why      { padding: 100px 0 98px; }
  .idx-location { padding: 102px 0 104px; }
  .idx-date     { padding: 102px 0 104px; }
  .idx-filmgrid { column-gap: 20px; }
  .idx-cta__inner { padding: 180px 24px 190px; }
}

@media (max-width: 900px) {
  /* STOPGAP — site.css's .t-display-* carry FIXED px line-heights (92 / 61 / 52)
     against clamped font-sizes, so every heading goes very airy below ~1100px.
     These four rules only restore a sane ratio for Home's own instances; the
     real fix belongs in site.css (see the shared-library request in the report)
     and these can be deleted the moment it lands. */
  .idx-hero__title     { line-height: 1.06; }
  .idx-date__title     { line-height: 1.14; }
  .idx-story__title    { line-height: 1.14; }
  .idx-films__title    { line-height: 1.18; }
  .idx-location__title { line-height: 1.14; }

  /* stop bleeding the photo under the header: the crop puts the dark side of
     the frame behind the dark logo and contrast fails */
  /* Mobile hero (Patrick, 24 Jul): show the WHOLE bride, head included.
     The source (801x968) has the mockup's nav baked into its top ~9%, and the
     bride's head sits just below it. A short 4:3 centre-crop cut her head off.
     Fix: a PORTRAIT box (nav-excluded source ratio 801/891 ≈ 0.90) and KEEP the
     desktop bottom-anchor + 110% overscan, which pushes exactly that top ~9%
     (the nav) off the top edge — so the crop removes the nav, never the head.
     Do NOT reset the img to a plain object-fit:cover here (that was the bug). */
  .idx-hero__body, .idx-story__body, .idx-films__title, .idx-story__title,
  .idx-location__body, .idx-date__body { max-width: none; }
  /* mobile keeps the pre-HRF-2-rework rhythm — Pat: 18px is desktop only */
  .idx-hero__body { font-size: 14px; line-height: 27px; }
  .idx-hero__body p { margin: 0 0 16px; }
  /* T-20: same desktop-only rule for the rest of Home's body copy — mobile
     keeps each block's pre-existing rhythm. */
  .idx-story__body, .idx-location__body, .idx-date__body { font-size: 14px; line-height: 27px; }
  .idx-why__body, .idx-why__closing, .idx-why__list li { font-size: 14px; line-height: 26px; }
  .idx-film__desc { font-size: 13px; line-height: 22px; }
  .idx-hero__readmore, .idx-story__linkrow, .idx-films__linkrow,
  .idx-why__btnrow { text-align: left; }

  .idx-cols, .idx-why__grid { grid-template-columns: 1fr; gap: 40px; }

  .idx-story    { padding: 80px 0; }
  .idx-films    { padding: 44px 0 72px; }
  .idx-why      { padding: 80px 0; }
  .idx-location { padding: 80px 0; }
  .idx-date     { padding: 80px 0; }

  .idx-films__head { flex-direction: column; gap: 24px; }
  .idx-allfilms { margin-top: 0; }
  .idx-allfilms__label { width: auto; }
  .idx-filmgrid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; margin-top: 44px; }

  .idx-cta { min-height: 460px; }
  .idx-cta__inner { padding: 120px 24px; }
  /* ⚠ PLACEHOLDER SCRUB, small-screen correction — DELETE WITH THE PLACEHOLDER.
     The scrub's desktop top/height (243/148) are source-pixel coordinates, and
     they only stay right while the photo renders 1:1 — true down to 1200, where
     the band is still 630 tall. Below 900 the band shrinks to 460, the cover
     scale drops to 460/630 = .7302, and the baked button and caps line ride UP
     to y199-232 and y252-256 while the scrub sits at 243-391 — so the mockup's
     printed controls reappear below the live ones. Same fractions of the band,
     re-expressed at this height: 243 -> .3857 x 460, 148 -> .2349 x 460. */
  .idx-cta__inner::before { top: 177px; height: 108px; }
}

@media (max-width: 600px) {
  .idx-hero__cta { flex-direction: column; align-items: flex-start; gap: 24px; }
  .idx-hero__filmlink { padding-bottom: 5px; }
  .idx-hero__script { font-size: 27px; }

  .idx-story, .idx-why, .idx-location, .idx-date { padding: 60px 0; }
  .idx-films { padding: 36px 0 56px; }
  .idx-filmgrid { grid-template-columns: 1fr; row-gap: 44px; }
  .idx-film__title { font-size: 24px; }
  .idx-film__desc  { font-size: 14px; line-height: 23px; }

  .idx-location__script { font-size: 22px; }
  .idx-why__btn { padding: 0 22px; text-align: left; }
  .idx-cta { min-height: 380px; }
  .idx-cta__inner { padding: 88px 20px; }
  /* same correction at the 380px band: .3857 x 380 = 147, .2349 x 380 = 89 */
  .idx-cta__inner::before { top: 147px; height: 89px; }
}

/* ================================================================== intro ===
   Full-width centred lede, carrying the hero paragraphs that no longer fit in a 100vh hero
   (Pete, 15 Aug). Deliberately NOT a narrow measure like the rest of the body copy: it is a
   statement block, so it runs the width of the content column with the text centred.
   max-width caps the LINE LENGTH rather than the band — 1488px of 18px text would be an
   unreadable ~150 characters per line. */
.idx-intro { padding: 104px 0; border-bottom: 1px solid var(--tan); }
.idx-intro__copy {
  max-width: 62em;
  margin-inline: auto;
  text-align: center;
}
.idx-intro__copy p { margin: 0 0 24px; }
.idx-intro__copy p:last-child { margin-bottom: 0; }

@media (max-width: 900px) { .idx-intro { padding: 72px 0; } }
@media (max-width: 600px) { .idx-intro { padding: 56px 0; } }