/* THE ARC — thirteen months, datestamped.
   The centrepiece: scrolling the section literally moves through the build.
   A sticky rail on the left carries the current month + phase and updates as
   each plate enters. This is what makes the page a *record* rather than a
   portfolio — the site's only stateful element, and it earns its keep. */

/* Bottom padding is deliberately smaller than the top: the last frame already
   carries a --sp-2xl gap above it from .arc__seq, and the next section adds its
   own --sp-xl. Matching the top here stacked into ~350px of dead paper. */
.arc{position:relative;border-top:1px solid var(--rule);
  padding:var(--sp-xl) 0 var(--sp-md);background:var(--paper)}
.arc__head{max-width:78rem;margin:0 auto var(--sp-lg);padding:0 var(--gutter)}
.arc__title{max-width:14ch}
.arc__lede{margin-top:var(--sp-md);color:var(--ink-2);max-width:46ch}

/* ---- sticky rail: the date, pinned, counting up ---- */
/* top is the site-nav's height, not 0: the fixed bar sits above this
   (z-index 29 vs 5), so sticking at 0 parks the date caption underneath it. */
.arc__rail{position:sticky;top:var(--sitenav-h,0);z-index:5;
  display:flex;align-items:baseline;gap:var(--sp-md);
  padding:var(--sp-sm) var(--gutter);
  background:linear-gradient(to bottom,var(--paper) 62%,rgba(250,248,244,0));
  pointer-events:none}
.arc__date{font-family:var(--font-mono);font-weight:500;font-size:var(--text-label);
  text-transform:uppercase;letter-spacing:.2em;color:var(--copper-ink);
  font-variant-numeric:tabular-nums;min-width:9ch}
.arc__phase{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(.95rem,.85rem + .5vw,1.35rem);color:var(--ink);letter-spacing:-.005em}
/* the value swaps on a fade so the number never appears to "tick" mid-word */
.arc__date span,.arc__phase span{display:inline-block;
  transition:opacity var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out-expo)}
.arc__rail.is-swapping .arc__date span,
.arc__rail.is-swapping .arc__phase span{opacity:0;transform:translateY(-.25em)}

/* ---- the frames ---- */
.arc__seq{display:grid;gap:var(--sp-2xl);margin-top:var(--sp-lg)}
.arc__frame{margin:0}
.arc__frame img{width:100%;height:auto;background:var(--paper-3)}
.arc__frame figcaption{padding:var(--sp-sm) var(--gutter) 0;max-width:58ch;
  font-size:var(--text-caption);color:var(--muted);line-height:1.55}
.arc__stamp{display:block;font-family:var(--font-mono);font-weight:500;
  font-size:var(--text-label);text-transform:uppercase;letter-spacing:.16em;
  color:var(--copper-ink);margin-bottom:.5em;font-variant-numeric:tabular-nums}

/* full-bleed by default — the arc is the widest thing on the page */
.arc__frame--bleed img{width:100vw;margin-left:calc(50% - 50vw)}

/* a held frame: inset, generous margin, used to slow the reading pace */
@media (min-width:60rem){
  .arc__frame--held{max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
  .arc__frame--held img{width:min(56%,40rem)}
  .arc__frame--held figcaption{padding-left:0;max-width:38ch}
  .arc__frame--held.arc__frame--end img{margin-left:auto}
  .arc__frame--held.arc__frame--end figcaption{margin-left:auto;text-align:right}
}

/* a pair: two moments side by side — used for genuine before/after */
.arc__pair{display:grid;gap:2px}
.arc__pair figcaption{padding-top:var(--sp-sm)}
@media (min-width:48rem){
  .arc__pair{grid-template-columns:1fr 1fr;gap:4px}
}
.arc__pair img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}