/* Sulamita Youth — the Rewind.
   Visual direction: a yearbook rewind — the year plays back December→January
   in one dark scroll. The boldness is spent on ONE element: the giant
   gradient year numeral in the mono voice. Months are quiet mono rails;
   every card reuses the shelf's own language (albums.css is loaded too). */

/* [hidden] must beat any display rule set below (the youth-IA lesson) */
.rw-hero [hidden], .rw-stats[hidden], .rw-star[hidden],
.rw-close[hidden], .rw-years[hidden], .rw-status[hidden] { display: none; }

/* ---------- hero ---------- */
.rw-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.rw-year-line {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 24px; margin: 0;
}
/* THE /rewind/ SHIFT, measured 2026-08-20 at 390x844: the page dropped ~42px
   at ~1.35s and it was never a picture arriving — styles.css is the deferred
   sheet (media="print" until boot flips it to "all"), so the heading paints at
   76px on the critical CSS alone and grows to its real 118px the instant the
   full sheet activates, carrying every band below it down the page. A reserve
   written in styles.css cannot fix that: it arrives in the same late frame that
   causes it. This file is render-blocking, so the box is right from frame one.
   118px IS the settled height at phone widths — .rw-year's clamp floors at 76px
   until the viewport passes ~447px — so no settled pixel moves; above that the
   heading outgrows the floor and it goes inert on its own. */
@media (max-width: 639px) {
  .rw-year-line { min-height: 118px; }
}
.rw-year {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(76px, 4.75rem - 76px + 17vi, 190px);
  line-height: 0.95; letter-spacing: -0.04em;
  /* The shared accent gradient tops out at --accent-glow, which on the cream
     page measured 1.4:1 at the light end of the numeral (walkthrough judge,
     2026-09-09) — the leading digits washed out. This gradient runs deep gold
     to bronze: every stop clears the 3:1 large-text floor on cream (deep end
     ~3.9:1, bronze ~6.3:1) and the numeral keeps its gold. */
  background: linear-gradient(135deg, var(--accent-deep), var(--gold-text));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* the gradient needs the glyph box, not the line box, or descender-less
     digits render with the gradient sliding off the visible strokes */
  padding-bottom: 0.05em;
}
.rw-word { display: block; }
.rw-hero .lede { max-width: 560px; }

/* Collapsed (four recent years + "Earlier") the row wraps, so every pill is on
   screen at once — two rows at most on a 390px phone. Opened, it goes back to
   being a .pill-row and scrolls sideways: thirteen pills wrapped is the four
   stacked rows this replaced (2026-08-02). */
/* THE GUTTER IS PAID ONCE (2026-08-10). .pill-row (albums.css) is written for
   a row that sits OUTSIDE .container and bleeds to the screen edges, so it pays
   the page gutter itself. This row is INSIDE the hero's .container, which has
   already paid it — the two stacked, and the year pills sat 20px right of the
   heading and the lede above them (40px in from a phone edge, 68px on a 1280
   screen). Same defect the owner caught on /albums/, the other way round: there
   the row paid too little, here it paid twice.
   This row does NOT bleed, and that is deliberate rather than an omission:
   collapsed it WRAPS to two lines on a phone, and a wrapping row that bleeds
   puts its second line's first pill under the screen edge. It scrolls only
   once "Earlier" opens it, and inside the text column is where it belongs. */
.rw-years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 22px;
  padding-inline: 0;
  scroll-padding-inline: 0;
}
.rw-years.is-open { flex-wrap: nowrap; }

.rw-status { padding: 8px 0 0; opacity: 0.75; }
/* .rw-share-top came off with the hero share button on 2026-08-23 — see the
   note in rewind/index.html. The share now sits in .rw-actions, which already
   spaces it beside the Friday-youth pill. */

/* ---------- the numbers ---------- */
.rw-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px; margin: 0; padding: 0; list-style: none;
}
.rw-stat { display: flex; flex-direction: column; gap: 4px; }
.rw-num {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-weight: 800; font-size: clamp(34px, 2.125rem - 34px + 6vi, 56px); line-height: 1;
}
.rw-lab {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.62;
}

/* ---------- headliners ---------- */
.rw-star { padding-top: clamp(30px, 4vw, 52px); }
.rw-star-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px; padding-top: 18px;
}
.rw-star-card .album-shot { position: relative; }
.rw-tag {
  position: absolute; top: 10px; left: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  /* 12px, not 11 (2026-09-04). "CAMP" / "YOUTH NIGHT" is a badge in the house
     mono voice, not a sentence, so it stays a tracked uppercase LABEL and only
     the size moves — 11px sat under the sub-14 floor's own lower bound for the
     label voice. The tracking opens a step with it so the caps still read as a
     badge rather than a small word. */
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink); background: var(--accent-glow);
  padding: 4px 10px; border-radius: 999px;
  background-origin: border-box; /* the WebKit gradient-pill lesson */
}

/* ---------- months ---------- */
.rw-month { padding-top: clamp(34px, 5vw, 60px); }
.rw-rail {
  /* the month marker holds the top of the screen while its grid scrolls by —
     the quiet counterpart to the hero numeral */
  position: sticky; top: var(--youth-bar-h); z-index: 3;
  display: flex; align-items: baseline; gap: 12px;
  margin: 0; padding: 10px 0;
  /* solid ink, not a translucent mix — WebKit dropped the color-mix version
     and photos scrolled straight through the label */
  background: var(--cream);
  box-shadow: 0 6px 14px -8px rgba(47, 50, 56, 0.28);
  font-family: 'Inter Tight', Inter, sans-serif;
  font-weight: 700; font-size: clamp(19px, 1.1875rem - 19px + 2.4vi, 24px);
}
/* ── THE MONTH RAIL LEAVES WITH THE HEADER (2026-08-14) ───────────────────
   Same fault as the youth albums filter bar: the site header hides on scroll
   down (0a7b3a31d, 2026-08-12) but this row still parks at
   top: var(--youth-bar-h), so once the header slides away the rail hangs a
   bar's height down the screen with photos scrolling through the gap above
   it. Cure copied from albums.css (0a020d434, 2026-08-14): slide the row off
   the top by the same offset while html.nav-hidden is set, so it leaves with
   the header and comes back with it on the first scroll up. */
.rw-rail { transition: top 200ms var(--ease-glide); }
html.nav-hidden .rw-rail { top: calc(-1 * var(--youth-bar-h, 64px)); }
.rw-mnum {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 0.8em;
  color: var(--gold-text);
}
.rw-shelf { padding-top: 16px; }
.rw-month-head { margin: 0 0 4px; }
.rw-year-grid { padding-top: 14px; }
.rw-all-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px;
  color: var(--gold-text); font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em; text-decoration: none;
}
.rw-all-link:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 3px; }

/* ---------- closing ---------- */
.rw-close { text-align: left; }
.rw-close h2 {
  font-family: 'Inter Tight', Inter, sans-serif; font-weight: 800;
  font-size: clamp(30px, 1.875rem - 30px + 5vi, 48px); margin: 0 0 8px;
}
.rw-close p { margin: 0 0 22px; opacity: 0.8; }
.rw-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rw-share {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 24px; border-radius: 999px;
  border: 1.5px solid rgba(201, 154, 46, 0.45);
  background: transparent; color: var(--gold-text);
  font: inherit; font-weight: 600; cursor: pointer;
}
.rw-share:active { transform: scale(0.97); }
@media (hover: hover) {
  .rw-share:hover { border-color: var(--accent); background: rgba(201, 154, 46, 0.08); }
}

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  .rw-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rw-star-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .rw-share:active { transform: none; }
  .rw-rail { transition: none; }
}