/* ═══════════════════════════════════════════════════════════
   SCENE 01 — HERO
   Full-bleed photograph, the claim set large across the bottom.

   PERFORMANCE CONTRACT
   Everything the scrubbed timeline touches animates on transform
   or opacity only. Nothing animates width, height, top, left or
   filter. If a beat seems to need one of those, the markup is
   wrong, not the timeline.
   ═══════════════════════════════════════════════════════════ */

.hero-stage { background: var(--navy); color: var(--paper); }

/* NO RUNWAY — the hero is deliberately not pinned.

   A runway is what buys a scene pinned scroll length, and pinning
   is exactly what made the section feel stuck: the wheel moved,
   the photograph zoomed, and the page did not go anywhere until
   that had played out. The zoom now happens WHILE the section
   travels, driven by its own passage up the viewport, so the
   first notch of scroll moves the page and grows the image at the
   same moment. See the scene primitives note in core.css. */

/* ── Media ────────────────────────────────────────────────
   inset:0 and the SAME object-position the loader uses, because
   the loader hands this image over directly — it expands to the
   full frame and this takes over underneath it. Any difference
   in crop or offset between the two shows up as a jump at the
   handoff. The margin that stops the scrubbed drift exposing an
   edge comes from a scale > 1, set in hero.js, not from inset. */
.hero-media {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.hero-media img {
  /* 100vw/100vh, NOT 100% — the loader sizes its photograph in
     viewport units, and matching the units is what guarantees the
     two frames are pixel-identical at the handoff. 100% of a
     full-viewport box and 100vw can differ by a scrollbar, and a
     dozen pixels of drift is instantly visible as a jump. */
  width: 100vw;
  height: 100vh;
  max-width: none;
  object-fit: cover;
  object-position: center 55%;
}

/* Two scrims, not one. The vertical pass seats the type against
   the sky and the lawn; the horizontal pass protects the
   bottom-left corner where the claim actually sits. Without the
   second, white type lands on a sunlit lawn and disappears. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(19,25,38,.68) 0%, rgba(19,25,38,.28) 42%, transparent 68%),
    linear-gradient(180deg, rgba(19,25,38,.66) 0%, rgba(19,25,38,.30) 12%, rgba(19,25,38,.10) 30%, rgba(19,25,38,.46) 68%, rgba(19,25,38,.88) 100%);
}

/* ── Content ─────────────────────────────────────────────── */
.hero-inner {
  position: absolute;
  inset: auto 0 16rem 0;
  z-index: 3;
}
.hero-content { grid-column: content-start / span 12; }

/* THE EYEBROW.

   Same face as everything else — the differentiation is weight,
   size and tracking, not family. Tracked-out caps at 500 against
   a 300-weight claim is a wide enough gap to read as two voices
   without being two typefaces. */
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  /* The claim carries a .23em optical trim that pulls it up, so
     the measured gap reads noticeably tighter than it is. */
  margin-bottom: 4.6rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--gold-lift);
  letter-spacing: .3em;
}
.hero-eyebrow i {
  width: 4.4rem;
  height: var(--hair);
  background: currentColor;
  opacity: .55;
}

/* THE CLAIM — Orange Avenue.

   The one place on the site that is not Jost, and the only place
   that should be: a display face with this much stroke contrast
   carries a two-line headline and nothing else. It ships a single
   regular cut, so there is no weight to pick and no optical axis
   to reach for.

   --tt / --tb are overridden here because .trim's defaults are
   measured for Jost and this is a different face. Orange Avenue's
   ascent+descent is 1.40em, so at line-height:1 the baseline sits
   .70em down and the CAPS OVERFLOW THE TOP of the box — hence a
   negative top trim, where every Jost heading takes a positive
   one. Re-measure if the face changes; see the note on .trim. */
.hero-title {
  --lh: 1;
  --tt: -.05;
  --tb: .05;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 10.2rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--paper);
}
/* Colour alone. The face has one cut and no italic, so the gold is
   the only thing marking this word out — which is all it needs. */
.hero-title em {
  font-style: normal;
  color: var(--gold-lift);
}

/* ── The accent's light ─────────────────────────────────
   A single pass of brighter gold across the accent word as the
   title settles: the one flourish in the whole hero, on the one
   word the line is built around.

   PAINTED INTO THE TEXT, not laid over it. background-clip:text
   means the highlight IS the letterforms — a bar sliding across a
   word is a banner effect and reads as cheap; gold catching the
   light along the strokes reads as material.

   The gradient is mostly the word's own colour with a short bright
   band in it, and only the band moves. Held off the left edge to
   start and driven from js/sections/hero.js, so it cannot run
   before the word it belongs to has arrived. */
.hero-title em {
  /* The logo's own gold, with a brighter band travelling through
     it. The flat stops either side are --gold-lift so the word
     rests on exactly the colour the mark is printed in; only the
     highlight is lighter than the artwork. */
  /* The logo's own sweep with a brighter band travelling through
     it — the flat stops either side are the mark's real deep and
     light golds, so the word rests on the artwork's colour and only
     the highlight is lighter than anything in it. */
  background-image: linear-gradient(
    100deg,
    #dcae6d  0%,
    #d6a565 30%,
    #f8e2b6 50%,
    #e5ba7c 70%,
    #ecc588 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  /* THE TRAVEL RUNS 100% TO 0%, AND IT MUST. A background-position
     percentage places the image by (element - image) width, so with
     the image at 260% the whole usable range IS 100% to 0% — those
     are exactly the two positions where the gradient still covers
     the box. Anything outside it leaves part of the element with no
     background at all, and since the text is filled by that
     background, those letters are simply not painted: at 130% the
     word rendered as "rited". */
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
}
/* Only once the script is driving it — otherwise a browser without
   GSAP paints the word in a gradient it will never move, and the
   accent is a shade off for good. */
.has-gsap .hero-title em { -webkit-text-fill-color: transparent; }
/* THE TITLE IS A FLEX COLUMN, AND IT HAS TO BE.

   Each line below pads itself to give the ink room and takes that
   room straight back out with an equal negative margin. Between
   BLOCK siblings those margins COLLAPSE — two adjacent negative
   margins resolve to the single most negative one, not to their
   sum — so only half the padding was ever cancelled and the rest
   showed up as a gap between the lines and another under the last
   one. At .16em it was a few pixels; at .34em it was 95px of slack
   in a 187px title, which is what "too much line height" was.

   A flex container does not collapse its children's margins, so
   the negative margins now cancel the padding exactly and the
   clip slots cost nothing. */
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Each line rides in its own overflow slot so it rises out of a
   hard edge rather than fading up.

   THE SLOT NEEDS ROOM FOR INK THAT LEAVES THE BOX. This face does
   not fit a line-height:1 box — its caps overflow the TOP by
   .05em, which is precisely what a negative --tt measures. The
   slot clips, so without room here it slices the serifs flat off
   the top of every capital, which is exactly what it was doing.

   Padding gives the ink room; the matching negative margin takes
   that room straight back out of the layout, so the line spacing
   is unchanged and only the clip rectangle grows. Re-check both
   numbers against --tt / --tb if the face changes. */
.hero-title .line {
  display: block;
  overflow: hidden;
  /* Room on every side, not just the top. See the note on .fx-line
     in approach.css — horizontal ink is clipped just as readily as
     vertical, and this face has plenty of it. */
  /* See the note on .fx-line in approach.css: measured against the
     inked box, .16em was short of the cap. Generous beats exact —
     the negative margin means the extra room is free. */
  padding: .34em .14em .34em;
  margin: -.34em -.14em -.34em;
}
.hero-title .in   { display: block; }

/* OPTICAL LEFT ALIGNMENT.

   Every box in this column already sits on the same content line —
   the eyebrow, both title lines, the foot rule, the caption. What
   does not line up is the INK: a glyph's left sidebearing holds it
   in from its own origin.

   MEASURED off the face, per opening glyph. Orange Avenue gives
   both H and t the same .0313em bearing, so unlike the sans — where
   the t began exactly on its origin and needed no pull at all —
   the two lines take the same correction. Re-measure if either
   line's FIRST LETTER changes; this is a property of that glyph,
   not of the type size.

   The pull goes on .line rather than .in: .line is the clipper, so
   shifting .in inside it would crop the letter instead of moving
   it. */
.hero-title .line:nth-child(1) { margin-left: -.031em; }
.hero-title .line:nth-child(2) { margin-left: -.031em; }

@media (max-width: 1200px) { .hero-title { font-size: 8.7rem; } }
@media (max-width: 991px)  { .hero-title { font-size: 6.8rem; } .hero-content { grid-column: content; } }
@media (max-width: 767px) {
  .hero-title { font-size: 4.5rem; }
  .hero-inner { bottom: 11rem; }
  /* The eyebrow is a long line of tracked-out caps. At this width
     the tracking alone pushes it past the gutter, so the rule goes
     and the tracking comes in — shrinking the type instead would
     make it unreadable before it made it fit. */
  .hero-eyebrow {
    flex-wrap: wrap;
    gap: .6rem;
    letter-spacing: .2em;
    line-height: 1.5;
    margin-bottom: 3rem;
  }
  .hero-eyebrow i { display: none; }
}

/* ── Foot ────────────────────────────────────────────────
   A hairline across the frame with the caption on one side and
   the scroll cue on the other — the device the reference uses to
   close the image, and the thing that stops a full-bleed hero
   feeling like an untrimmed photograph. */
.hero-foot {
  position: absolute;
  inset: auto 0 4.2rem 0;
  z-index: 3;
  align-items: center;
  row-gap: 1.6rem;
}
.hero-rule {
  grid-column: content;
  grid-row: 1;
  height: var(--hair);
  background: rgba(255,255,255,.28);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-foot-row {
  grid-column: content;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.8rem;
}
.hero-caption {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.hero-scroll {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: rgba(255,255,255,.56);
}
/* .mono hard-codes both a face and a dark colour. The face is
   now wrong here as well as the colour, so this overrides both
   rather than just telling it to inherit. */
.hero-scroll .mono {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: inherit;
}
.hero-scroll-bar {
  display: block;
  width: 7rem; height: var(--hair);
  background: rgba(255,255,255,.24);
  overflow: hidden;
}
.hero-scroll-bar i {
  display: block;
  height: 100%;
  background: var(--gold-lift);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 767px) {
  .hero-foot { bottom: 2.6rem; }
  .hero-caption { display: none; }
  .hero-foot-row { justify-content: flex-end; }
  .hero-scroll-bar { width: 4.4rem; }
}