/* ═══════════════════════════════════════════════════════════════════
   Intro — editorial collage.

   A photograph on the left, the argument ranged right against it. The
   two are set on invisible columns with nothing drawn on them, which is
   why there is no grid line, no card, no divider and no panel in this
   section — the only edges on screen are the edges of the photograph.

   Inherits every token from style.css.
   ═══════════════════════════════════════════════════════════════════ */

.intro{
  /* wider than the site gutter — the collage needs the extra air to read
     as editorial rather than as a page of content */
  --gut-w: clamp(1.25rem, 7.5vw, 7rem);

  position:relative; z-index:1;
  background:var(--black);
  /* No bottom padding: the about section below opens with its own top
     padding, and doubling the two would leave a gap out of scale with
     every other seam on the page. */
  padding:clamp(2rem,7vh,4.5rem) var(--gut-w) 0;

  /* Twelve invisible columns. Nothing is drawn on them — they only decide
     where each piece lands, which is what lets the two sides fall out of
     step without a single rule or box on screen. */
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1rem,2.5vw,2.5rem);
  align-items:start;
}

/* row 1 — picture left, paragraph right */
/* The picture runs from the left edge to the column the paragraph
   starts in, so the two meet instead of leaving a band of empty page
   between them. Four columns left it a stamp in the corner with the
   argument a long way off to the right; six carries it across to the
   text, and since it is never cropped its height comes with the width. */
.intro__fig--a{
  grid-column:1 / 7;  grid-row:1;
  /* Dropped against the paragraph rather than starting level with it —
     the section is a collage and the two sides are meant to fall out of
     step. align-self rather than a margin: the row is as tall as the
     copy, so ending on it is a bottom edge the two share, and it stays
     shared when the copy reflows to a different number of lines. */
  align-self:end;
}
.intro__copy  { grid-column:7 / 13; grid-row:1 }

/* ── figures ─────────────────────────────────────────────────────── */
/* The wipe is on the figure, the drift is on the image inside it. They
   have to be separate elements: one clips, the other moves. */
.intro__fig{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--ink);
  /* Parked closed; the script opens it on enter. Declared here rather
     than in JS so there is no flash of the open state before the
     observer fires. Percentages on every side deliberately — GSAP
     interpolates clip-path per component, and mixing bare 0 with 0%
     gives it two different shapes to reconcile. */
  clip-path:inset(0% 0% 100% 0%);
}
.intro__fig img{
  position:absolute;
  left:0; width:100%;
  /* Taller than the frame, hung 8% above it, so the frame shows the
     middle band. Drift can then travel either way without ever pulling
     an edge of the photograph into view. */
  top:-8%; height:116%;
  object-fit:cover;
  will-change:transform;
}
/* Except this one, which is shown whole. The frame is already the
   photograph's own ratio, so filling it exactly crops nothing — but only
   if the picture is exactly the size of the frame. The 16% of extra
   height above buys slack for the drift and pays for it by trimming 8%
   off each side, which is the one thing this figure must not do.

   The drift goes with it (data-depth="0" in the markup): there is no
   slack left to drift into, and a picture that moves inside a frame it
   exactly fills would only show the ground behind it. */
.intro__fig--a img{
  top:0; height:100%;
}

/* no-JS safety: if the script never runs, show the pictures */
.no-js .intro__fig{ clip-path:none }

/* Ratios follow the source files so nothing is cropped harder than it
   has to be. */
.intro__fig--a{ aspect-ratio:1448/1086 }       /* 1448 × 1086 */

/* ── reveal direction ────────────────────────────────────────────── */
/* Only the parked state — the script tweens it to inset(0% 0% 0% 0%). */
.intro__fig--a{ clip-path:inset(0% 100% 0% 0%) }   /* opens left → right */

/* ── the copy ────────────────────────────────────────────────────── */
.intro__copy{
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-head);
  line-height:1.14;
  letter-spacing:-.005em;
  text-align:right;
  text-wrap:pretty;
  margin:0;
}
/* the word-fill itself is shared with the about section — see the
   [data-fill] rule in style.css */

/* ═══ responsive ══════════════════════════════════════════════════ */

/* tablet — same collage, slightly evened out */
@media (max-width:1100px){
  .intro__fig--a{ grid-column:1 / 6 }
  .intro__copy  { grid-column:7 / 13 }
}

/* Phone — one column: picture, then copy. Just a matter of switching
   the grid off; nothing overlaps and nothing is reordered. */
@media (max-width:820px){
  .intro{
    display:block;
    padding-inline:var(--gut);
  }
  /* drop every grid placement — block flow takes over */
  .intro__fig--a,
  .intro__copy{ grid-column:auto; grid-row:auto }

  .intro__copy{
    text-align:left;
    font-size:var(--fs-title);
    line-height:1.22;
    margin-top:clamp(1.5rem,5vh,2.5rem);
  }

  .intro__fig--a{ aspect-ratio:4/5 }
}

/* ═══ reduced motion ══════════════════════════════════════════════ */
/* Everything simply present: no wipe, no drift, no fill. */
@media (prefers-reduced-motion:reduce){
  .intro__fig{ clip-path:none !important }
  .intro__fig img{ top:0; height:100%; transform:none !important }
  .intro__copy .w{ color:var(--bone) !important }
}