/* ========== HERO ZONE ========== */
/* padding-top clears the now-fixed header (--header-h, measured live by
   js/header-height.js) plus the same 72px gap the old margin-bottom on
   header used to provide - so the hero sits at the exact same spot as
   before, just via a different mechanism now that header is out of flow. */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: calc(var(--header-h) + var(--header-top-offset) + 72px);
  padding-bottom: 20px;
}

/* Title - top right like reference */
.title-block {
  align-self: flex-end;
  text-align: right;
  max-width: 92%;
  margin-top: 8px;
  margin-bottom: 30px;
}

.title {
  font-size: clamp(36px, 8vw, 64px) !important;
  padding-right: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: #fff;
}

.title span {
  display: block;
}

.title .dash {
  letter-spacing: -0.06em;
}

/* Per-letter wave reveal (js/title-wave.js splits each line's text into
   these at load, once, before any animation runs). .letter-mask clips
   whatever sits below its own box; .letter-char is what JS/GSAP actually
   moves (yPercent) - the two must stay separate elements, since a single
   element can't both clip its own overflow and be the thing translated
   past that same clip. vertical-align: bottom avoids the small stray gap
   inline-block's default baseline alignment would otherwise reserve for
   descenders, now that every line is built from inline-block masks
   instead of plain baseline text. */
.title .letter-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.title .letter-char {
  display: inline-block;
  will-change: transform;
}

/* Description - left side */
.desc {
  max-width: 340px;
  font-size: 16.5px;
  line-height: 1.25;
  color: rgba(255,255,255,0.82);
  margin-bottom: 40px;
}

.desc .lead {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin-bottom: 20px;
}

.desc .body {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 200;
  letter-spacing: 0;
  color: rgba(255,255,255,0.68);
}

/* Gap between the two .body paragraphs, pinned to what it already
   measured at the old line-height (1.7 x 11.5px font-size) - kept as an
   explicit margin rather than left to a blank line-height-driven line, so
   reducing .body's line-height above (tighter spacing WITHIN each
   paragraph) can't also shrink the spacing BETWEEN them. */
.desc .body + .body {
  margin-top: 19.55px;
}

/* Mobile-only: tightens the gap between the hero's 3-paragraph .desc
   block and the first .sections block (STUDIOS AGENCIES) below it -
   was 40px (base rule above), read as too much dead air on narrow
   viewports. Desktop is untouched: its own @media (min-width: 768px)
   block below already overrides this to margin-bottom: 0. Tightened
   again, 16px -> 10px (~37% down), still too much space after the 3rd
   paragraph ("Strategy, design & motion...") on narrow viewports. */
@media (max-width: 767px) {
  .desc {
    margin-bottom: 10px;
  }

  /* Mobile-only: raises "Visual— System Interface Y/1977*" and nudges it
     further right - was sitting too low/too far from the right edge on
     narrow viewports. margin-top (not transform) on purpose: js/title-
     wave.js drives .title-block's own transform (translateY) via GSAP
     scrub, so a CSS transform here would just get overwritten the first
     time that animation ticks - margin-top composes with it instead,
     same pattern as .desc's own transform note below. padding-right
     (not a transform/margin on .title-block) shifts the text itself
     right, same property the desktop tier leaves untouched at 100px. */
  .title-block {
    margin-top: -32px; /* was 8px - ~40px higher */
  }

  .title {
    padding-right: 74px; /* was 100px - ~26px further right */
  }
}

/* ========== DESKTOP / TABLET ========== */
@media (min-width: 768px) {
  /* flex: initial (not the base rule's flex: 1) on purpose - flex:1
     stretches .hero to consume all leftover vertical space in .page
     (which has min-height: 100vh), regardless of how tall its content
     actually is. That's what was pushing STUDIOS AGENCIES down by a
     viewport-height-dependent amount instead of a fixed one. Sized to
     its own content, .sections now follows at a predictable, fixed
     distance (its own margin-top) instead of wherever leftover
     flex space happened to end. */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: auto 1fr;
    gap: 0 50px;
    align-items: start;
    flex: initial;
    /* Same idea as the base rule, just the desktop gap (was header's
       120px margin-bottom). */
    padding-top: calc(var(--header-h) + var(--header-top-offset) + 120px);
    /* Anchor for .title-block's position:absolute below - lets that block
       grow tall enough to overlap .sections visually without adding to
       .hero's own document-flow height (which would just push .sections
       further down instead, keeping the same gap). */
    position: relative;
  }

  /* position:absolute (was grid-column/row placement): the enlarged block
     below needs to be free to extend well past .hero's own grid rows -
     as a normal grid item its extra height would just grow .hero and push
     .sections down by the same amount, never producing the overlap the
     reference shows. right:0 reproduces the same right edge the grid
     column previously gave it, since .hero has no horizontal padding of
     its own (only .page does), so .hero's right edge already matches. */
  .title-block {
    position: absolute;
    top: 250px;
    right: -25px;
    margin-top: 0;
    margin-bottom: 0;
    max-width: none;
  }

  /* font-size !important: the base mobile rule (line ~129) also sets
     font-size with !important, which otherwise wins over this media
     query regardless of source order/specificity - without !important
     here too, this declaration is dead and .title stays stuck at the
     mobile clamp's 64px cap on desktop. Values are the mobile clamp's
     three numbers (36px, 8vw, 64px) scaled 1.33x, so this stays the
     same responsive curve, just larger. */
  .title {
    font-size: clamp(48px, 10.7vw, 85px) !important;
    line-height: 0.84;
  }

  /* align-self: start (not center) on purpose - centering it inside
     the 1/3 row span made this gap depend on the hero block's total
     height, which changes with viewport height. Top-aligning it makes
     the gap to STUDIOS AGENCIES below a fixed, predictable distance
     instead of one that grows on taller viewports.
     margin-left: shares column 1 with the "— 001" .sec-num marker
     (same reused class as — 002/003/004), so it needs the same
     --marker-clearance those get via --col-shift, not a new number. */
  /* .desc has a fully-explicit grid position (column + row span), so
     it gets placed before auto-placed items regardless of DOM order.
     The "— 001" marker only has an explicit column, so without its
     own explicit row it would auto-place into row 3 (the first free
     row left in column 1 once .desc has claimed rows 1-2) instead of
     row 1 - the same auto-placement pitfall as the Brands list. */
  .hero .sec-num {
    grid-row: 1;
  }

  .desc {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    /* 458px: lines this block's left edge up EXACTLY with "FRANÇOIS
       DEVAUCHELLE" in the header - confirmed by runtime
       getBoundingClientRect() on both elements, not assumed from the
       reference image's own guide-line pixels (measuring guides in a
       screenshot is unreliable - antialiasing/compression can shift an
       apparent line by a few px). Live-measured francoisLeft=514px,
       .hero starts at 56px -> margin-left 514-56=458 makes .desc's own
       left edge land at exactly 514px too. */
    margin-left: 458px;
    max-width: 380px;
    font-size: 14px;
    margin-bottom: 0;
  }

  /* .lead ~+40%, .body ~+20% (vs the sizes above) - a deliberate gap
     so the bold headline stays clearly dominant over the paragraph. */
  .desc .lead {
    font-size: 19.5px;
  }

  .desc .body {
    font-family: var(--font-sans);
    font-weight: 200;
    font-size: 14px;
  }

  /* Same fixed-gap approach as the base rule, recomputed for this tier's
     font-size (old line-height 1.7 x 14px). */
  .desc .body + .body {
    margin-top: 23.8px;
  }

  /* Pushes the hero left text block down without disturbing anything
     else. margin-top on .desc itself is NOT safe here: .desc spans
     .hero's grid-row 1/3, and .hero's own height is content-sized
     (flex: initial, see above) - growing .desc's box would grow .hero
     and push .sections down by the same amount. transform is purely
     visual and never participates in grid track sizing, so it can't
     have that side effect.
     Applied to .lead/.body (the two children) rather than .desc itself
     on purpose: js/hero-entrance.js drives .desc's OWN transform (y)
     directly during its load-time fade-in handoff, via GSAP - a
     transform set here on .desc would just get silently overwritten
     the first time that animation runs (GSAP replaces the whole
     inline transform, it doesn't compose with a stylesheet rule).
     The two children are never touched by any JS/GSAP in this project,
     so this offset stays stable across that handoff. */
  .desc .lead,
  .desc .body {
    transform: translateY(308px);
  }
}

@media (min-width: 1100px) {
  /* ~1.9x the 768px tier's 85px cap - text has no crispness ceiling like a
     raster asset would, so sized purely to match the reference proportions. */
  .title {
    font-size: 100px !important;
  }

  .desc {
    font-size: 14.5px;
    max-width: 460px;
    /* Without an explicit width, this grid item just stretches to fill
       whatever track space is left after its own margin-left (currently
       458px eating into the ~792px column1 track), landing at ~334px -
       well short of the 460px max-width above, which never gets to act
       as a cap since 334 already sits under it. width:460px forces the
       full intended size regardless of leftover track space, restoring
       matching, non-cramped wrapping for both the lead and body text
       (they're plain children of .desc, so both already share whatever
       width .desc itself resolves to). */
    width: 460px;
  }
  .desc .lead {
    font-size: 20.5px;
  }
}