/* home.css — page-specific layer for the home page (index.html) only.
   Loads AFTER /styles.css, which stays the single owner of the shared system
   (tokens + nav + section rhythm + typography + footer columns + newsletter).

   This file is what /styles.css does NOT already provide: the three-plane
   parallax hero, the one-shot reveal system, the six-panel elastic gallery,
   the marquee, the pipeline hairline reveal, the large footer wordmark, and
   the handful of deliberate overrides marked OVERRIDE below.

   88 rules that /styles.css already carried with the same effect were dropped
   from the approved prototype (preview-home.css) when this file was cut.
   Design contract: DESIGN Alex Bogo 01.md */

:root {
  /* Expensive easing + slow durations for the preview motion layer. */
  --ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 800ms;
  --dur-panel: 700ms;
  /* Static SVG turbulence. Not a gradient — a photographic grain plate. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* OVERRIDE: styles.css sets no overflow guard. The hero grain planes inset
   -40px and the 9.4vw footer wordmark can both exceed the viewport mid-motion. */
body { overflow-x: hidden; }
/* Neither is in styles.css; the prototype's base layer relies on both. */
img { max-width: 100%; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* REVEAL SYSTEM — one-shot, gated on .js so a no-JS page */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-cine), transform var(--dur-reveal) var(--ease-cine);
  transition-delay: calc(var(--i, 0) * var(--stagger, 80ms));
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Fade In Text — per-word, resting at 0.15 so the copy stays readable. */
.js .w {
  display: inline-block;
  opacity: 0.15;
  transform: translateY(4px);
  transition: opacity 500ms var(--ease-cine), transform 500ms var(--ease-cine);
  transition-delay: calc(var(--i) * 25ms);
}
.js .is-in .w { opacity: 1; transform: none; }

/* HERO — parallax stack, 100vh */
/* OVERRIDE: styles.css centres the hero (text-only composition). The portrait
   composition is left-aligned, so the copy sits in the portrait's shadow zone. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--sp-section) var(--sp-xxl);
  background: var(--canvas);
  overflow: hidden;
}
/* subject plane: portrait, 0.25x scroll / mouse 18px */
.hero__media { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.hero__portrait {
  position: absolute;
  top: 65%;
  right: 0;
  transform: translateY(-50%);
  height: clamp(720px, max(120vh, 70vw), 1800px);
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
  user-select: none;
}
/* atmosphere planes: the same grain plate twice, at two depths and two
   rates. Inset is negative so the parallax offset can never expose an edge.
   Rear sits on the black canvas, where overlay/soft-light would resolve to
   nothing, so it blends normally; the front pass rides over the portrait and
   uses soft-light as specified. */
.hero__grain {
  position: absolute;
  inset: -40px;
  background-image: var(--noise);
  background-repeat: repeat;
  pointer-events: none;
  will-change: transform;
}
/* rear atmosphere: behind the subject, 0.12x scroll / mouse 6px */
.hero__grain--rear { z-index: 0; opacity: 0.05; }
/* front atmosphere: over the subject, 0.38x scroll / mouse 24px */
.hero__grain--front { z-index: 2; opacity: 0.03; mix-blend-mode: soft-light; }
/* copy plate: rides the page 1:1. Never a parallax layer; only the fade. */
.hero__content { position: relative; z-index: 3; width: 100%; will-change: opacity; }
/* OVERRIDE: styles.css centres .hero__inner at 920px. Here it is a left column
   capped so the two headline lines never reach the lit side of the face. */
.hero__inner { text-align: left; max-width: clamp(420px, 62vw, 1700px); margin-left: clamp(24px, 5vw, 140px); margin-right: 0; color: #f5f5f3; }
.hero__sub {
  font-family: var(--font-mono);
  font-weight: var(--w-body);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(245,245,243,0.7);
  margin: 0 0 56px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
/* OVERRIDE: styles.css draws BOTH ::before and ::after as 32px rules around the
   kicker. This composition wants only the leading one, so ::after is retired.
   (The old inline <style> block in index.html did exactly this.) */
.hero__sub::before { content: ''; width: 32px; height: 1px; background: rgba(245,245,243,0.45); flex: none; }
.hero__sub::after { display: none; }
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(30px, 3.5vw, 88px);
  line-height: 1.06;
  letter-spacing: 1.5px;
  text-transform: none;
  color: #f7f7f5;
  margin: 0 0 56px;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(0,0,0,0.55);
}
.hero__line { display: inline-block; }
.hero__cta-row { display: inline-flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* OVERRIDE of the three pill rules in styles.css (which hard-code the gold
   border): one shared base on currentColor, so each button colours itself and
   .panel__link (new here) inherits the same geometry. */
/* Pill buttons — transparent, 1px outline, radius 9999px. Shared base. */
.hero__cta, .invest-band__cta, .panel__link, .newsletter__submit {
  display: inline-flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 32px; background: transparent;
  border-radius: var(--r-pill); border: 1px solid currentColor;
  font-family: var(--font-mono); font-weight: var(--w-body);
  font-size: 12px; letter-spacing: 2.5px;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hero__cta .arrow, .invest-band__cta .arrow, .panel__link .arrow { transition: transform var(--dur-med) var(--ease-out); }
.invest-band__cta:hover .arrow, .panel__link:hover .arrow { transform: translateX(4px); }
.hero__cta { gap: 14px; border-color: rgba(245,245,243,0.28); color: rgba(245,245,243,0.78); }
.hero__cta:hover { color: #f7f7f5; border-color: #f7f7f5; }
/* the single gold element in the hero viewport */
.hero__cta--invest { color: var(--accent); border-color: var(--accent); }
.hero__cta--invest:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

.hero__wordmark {
  position: absolute;
  top: var(--sp-xxl); left: var(--sp-xxl);
  z-index: 4;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 13px; letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(245,245,243,0.9);
  text-decoration: none;
}
/* ---------- hero entry animations (Cinematic Landing Hero) ---------- */
@keyframes heroPortrait {
  from { opacity: 0; transform: translateY(-50%) scale(1.04); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
/* Gradual Spacing — tracking opens out into its resting value. */
@keyframes heroKicker {
  from { opacity: 0; letter-spacing: -0.02em; }
  to   { opacity: 1; letter-spacing: 3px; }
}
/* Blur Reveal — per line. */
@keyframes heroLine {
  from { opacity: 0; filter: blur(10px); transform: translateY(12px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__portrait { animation: heroPortrait 1400ms var(--ease-cine) both; }
.hero__sub      { animation: heroKicker 900ms var(--ease-cine) 200ms both; }
.hero__line     { animation: heroLine 900ms var(--ease-cine) both; }
.hero__line:nth-child(1) { animation-delay: 500ms; }
.hero__line:nth-child(3) { animation-delay: 620ms; }
.hero__cta-row > * { animation: heroRise 900ms var(--ease-cine) both; }
.hero__cta-row > :nth-child(1) { animation-delay: 1200ms; }
.hero__cta-row > :nth-child(2) { animation-delay: 1280ms; }
.hero__cta-row > :nth-child(3) { animation-delay: 1360ms; }
.hero__wordmark { animation: heroRise 900ms var(--ease-cine) 1500ms both; }

/* THREE WAYS — three stat tiles */
.ways__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xxl);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.ways__tile {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 0 26px;
  border-bottom: 1px solid transparent;
  text-decoration: none; color: inherit;
  transition: border-color 300ms var(--ease-cine);
}
/* OVERRIDE: hairline-strong, not --ink. The gold/white budget in this band
   belongs to the tile's own view-link, not to three hover rules at once. */
.ways__tile:hover { border-bottom-color: var(--hairline-strong); }
.ways__tile .invest-stat__num { white-space: normal; font-size: 20px; line-height: 1.25; }
.ways__tile .film-card__view { margin-top: auto; transition: color 300ms var(--ease-cine); }
.ways__tile:hover .film-card__view { color: var(--ink); }
.ways__tile:hover .film-card__view .arrow { transform: translateX(4px); }

.invest-stat__num {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 24px; letter-spacing: 0.5px;
  color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.film-card__sep { width: 4px; height: 4px; background: var(--muted-soft); border-radius: 9999px; flex: none; }

/* MANIFESTO — reading column on a soft, grained band */
.manifesto { position: relative; background: var(--surface-soft); padding: var(--sp-section) var(--sp-xxl); overflow: hidden; }
.manifesto::before { content: ''; position: absolute; inset: 0; background-image: var(--noise); background-repeat: repeat; opacity: 0.028; pointer-events: none; }
.manifesto__col { position: relative; max-width: 720px; margin: 0 auto; }

/* SLATE — Elastic Gallery (horizontal filmstrip accordion), six panels.
   At the 1280px max width the content box is 1152px; after the 2px frame and
   the 5 inter-panel hairlines, 1145px is split 3.2 : 1 : 1 : 1 : 1 : 1,
   giving ~447px active and ~140px collapsed. */
#slate { padding-top: calc(var(--sp-section) + 40px); padding-bottom: calc(var(--sp-section) + 40px); }
#manifesto { padding-bottom: calc(var(--sp-section) + 40px); }
.gallery { display: flex; height: clamp(560px, 70vh, 720px); border: 1px solid var(--hairline); overflow: hidden; }
.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--canvas);
  transition: flex-grow var(--dur-panel) var(--ease-cine);
}
.panel + .panel { border-left: 1px solid var(--hairline); }
.panel.is-active { flex-grow: 3.2; }
.panel--type { background: var(--surface-card); cursor: pointer; }

.panel__media { position: absolute; inset: 0; }
/* Flat black scrim over collapsed panels only, so the rotated spine label
   never fights the poster's own title lettering. Flat, not a gradient —
   and it only ever sits over a photograph. Lifts as the panel expands. */
.panel__media::after {
  content: '';
  position: absolute; inset: 0;
  background: #000;
  opacity: 0.35;
  transition: opacity var(--dur-panel) var(--ease-cine);
  pointer-events: none;
}
.panel.is-active .panel__media::after { opacity: 0; }
.panel__img { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-cine); }
.panel__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 0; display: block; }
/* posters run tall in the collapsed slot — bias down so faces stay in frame */
.panel__img--poster img { object-position: center 20%; }
.panel__img--poster { opacity: 1; }
.panel.is-active .panel__img--poster { opacity: 0; }
.panel.is-active .panel__img--still { opacity: 1; }
/* RB still is a wide 3:2 BTS frame cropped hard in the ~1:1 active panel slot -
   bias right so Casper's punch/face clear and Parmish stays in frame, camera rig crops out. */
.panel__img--still-rb img { object-position: 55% 35%; }
/* Lookout's still: the ritual tower sits left of centre in the crop. */
.panel__img--still-lookout img { object-position: 40% 50%; }
/* Single-image panels: one <img> serves both states, so there is nothing to
   crossfade. The collapsed dim comes from .panel__media::after as usual. */
.panel--single .panel__img--single { opacity: 1; }
.panel__img--modir img { object-position: 50% 42%; }
.panel__img--hhtm img  { object-position: 50% 55%; }
.panel__img--hair img  { object-position: 50% 45%; }

/* black -> transparent scrim, only ever laid over a photograph */
.panel__scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 30%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0) 100%);
  opacity: 0;
  transition: opacity 500ms var(--ease-cine);
  pointer-events: none;
}
.panel.is-active .panel__scrim { opacity: 1; }

/* collapsed label — rotated spine */
.panel__spine {
  position: absolute;
  left: 16px; bottom: 20px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0,0,0,0.8);
  transition: opacity 300ms var(--ease-cine), color 300ms var(--ease-cine);
}
.panel:hover .panel__spine,
.panel:focus-visible .panel__spine,
.panel.is-active .panel__spine { color: var(--ink); }
.panel.is-active .panel__spine { opacity: 0; }

.panel__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease-cine) 150ms, transform 500ms var(--ease-cine) 150ms;
  pointer-events: none;
}
.panel.is-active .panel__body { opacity: 1; transform: none; pointer-events: auto; }
.panel--type .panel__body { top: 0; justify-content: flex-end; opacity: 1; transform: none; pointer-events: auto; }
.panel--type.is-active .panel__spine { opacity: 0; }
.panel--type:not(.is-active) .panel__body { opacity: 0; pointer-events: none; }

.panel__meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.panel__year { color: var(--body); }
.panel__genre { color: var(--ink); }
.panel__status { color: var(--ink); }
.panel__title {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 26px; line-height: 1.22; letter-spacing: 1px;
  color: var(--ink); margin: 0;
}
.panel__desc { font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--body); margin: 0; max-width: 46ch; }
.panel__callout {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--muted);
  line-height: 1.7; margin: 0;
}
.panel__link {
  align-self: flex-start; height: 44px; padding: 0 28px; margin-top: 6px;
  font-size: 11px; border-color: rgba(255,255,255,0.4); color: var(--ink);
}
.panel__link:hover { border-color: var(--ink); }

/* Caption under the strip. Carries the four-film framing the removed
   type-only panel used to carry. */
.gallery__caption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
  margin: 24px 0 0;
  font-family: var(--font-mono);
  font-weight: var(--w-body);
  font-size: 11px; letter-spacing: 2.2px; line-height: 1.7;
  text-transform: uppercase; color: var(--muted);
}
.gallery__caption-link { margin-top: 0; }
.invest-band__stats .invest-stat {
  display: grid;
  grid-template-columns: minmax(110px, 170px) 1fr;
  gap: 24px; padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.invest-band__cta { margin-top: 48px; border-color: var(--accent); color: var(--accent); }
/* OVERRIDE: styles.css pads .dev-row 28px 0 with a plain border. Here the row
   is a hover target, so it gains side padding + negative margin (bleed) and
   paints its own hairlines as pseudo-elements the reveal can wipe in.

   Retiring those two real borders is load-bearing, not cosmetic. The prototype
   never linked site.css, so it never had them. Left in place they double every
   hairline in the band (list border-top over row 1's ::before, each row's
   border-bottom over the next row's ::before), add 1px to every row's height,
   and — worst — the static copy sits exactly where the animated one wipes in,
   so the scaleX reveal becomes invisible. */
.dev-list { border-top: 0; }
.dev-row { border-bottom: 0; }
.dev-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr auto;
  gap: 32px;
  padding: 28px 20px;
  margin: 0 -20px;
  align-items: start;
  transition: background-color 300ms var(--ease-cine);
}
/* Each row owns its own top hairline so it has something to draw; the last
   row also owns the closing line. Same four rules the borders used to paint. */
.dev-row::before, .dev-row:last-child::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--hairline);
  transform-origin: left center;
  pointer-events: none;
}
.dev-row::before { top: 0; }
.dev-row:last-child::after { bottom: 0; }
/* the device itself */
.js .dev-row[data-reveal] { opacity: 1; transform: none; transition: background-color 300ms var(--ease-cine); }
.js .dev-row::before, .js .dev-row:last-child::after {
  transform: scaleX(0);
  transition: transform 700ms var(--ease-cine);
  transition-delay: calc(var(--i, 0) * var(--stagger, 90ms));
}
.js .dev-row.is-in::before, .js .dev-row.is-in:last-child::after { transform: scaleX(1); }
.js .dev-row > * {
  opacity: 0;
  transition: opacity 700ms var(--ease-cine);
  transition-delay: calc(var(--i, 0) * var(--stagger, 90ms) + 120ms);
}
.js .dev-row.is-in > * { opacity: 1; }
.dev-row:hover { background-color: var(--surface-soft); }
.dev-row__title {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 22px; line-height: 1.2; letter-spacing: 0.3px;
  color: var(--body-strong); margin: 0;
  transition: color 300ms var(--ease-cine);
}
.dev-row:hover .dev-row__title { color: var(--ink); }
/* muted, not gold — the gold budget for this viewport belongs to the invest CTA */
.dev-row__status {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; padding-top: 4px;
}
a.featured-in__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 24px; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a.featured-in__label:hover { color: var(--ink); }
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee__inner { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee__inner { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__track { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex: none; }
.marquee__track li { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.marquee__track li::after { content: '·'; color: var(--muted-soft); margin: 0 18px; }
.marquee__track a { color: var(--muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.marquee__track a:hover { color: var(--ink); }
/* OVERRIDE: same bleed-and-hover treatment as .dev-row, replacing the
   padding transition styles.css uses. */
.writing-row {
  display: grid;
  grid-template-columns: 120px 1fr 160px;
  gap: 32px; align-items: baseline;
  padding: 28px 20px; margin: 0 -20px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: inherit; position: relative;
  transition: background-color 300ms var(--ease-cine);
}
.writing-row:hover { background-color: var(--surface-soft); }
.writing-row__title {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 22px; line-height: 1.25; letter-spacing: 0.5px;
  color: var(--body-strong); margin: 0;
  position: relative; display: inline-block; align-self: flex-start;
  transition: color 300ms var(--ease-cine);
}
.writing-row:hover .writing-row__title { color: var(--ink); }
/* OVERRIDE: full-width stacked form (styles.css left-aligns a 32px-gap row). */
.newsletter__form { display: flex; flex-direction: column; gap: 28px; text-align: left; align-items: stretch; }
/* OVERRIDE: white focus underline, not gold. Gold in this viewport is spent
   on the Subscribe button. */
.newsletter__email:focus { border-bottom-color: var(--ink); }
.newsletter__submit {
  align-self: stretch; justify-content: center; padding: 18px 24px;
  border-color: var(--accent); color: var(--accent); cursor: pointer;
}

/* FOOTER — minimal columns + Large Name wordmark */
/* OVERRIDE: bottom padding drops to 0 and overflow is clipped, because the
   large wordmark now sits below .footer__inner and bleeds into that space. */
.footer { border-top: 1px solid var(--hairline); padding: 80px var(--sp-xxl) 0; overflow: hidden; }
/* OVERRIDE: footer links move from mono/12px/tracked to serif/16px — the
   column list reads as a sitemap here, not as a row of labels. */
.footer__link {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 16px; letter-spacing: 0;
  color: var(--muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__link--static { color: var(--muted-soft); cursor: default; }
.footer__link--static:hover { color: var(--muted-soft); }
.footer__contact-line { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }
.footer__contact-line a {
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
/* OVERRIDE: styles.css uses space-between to push a small wordmark to one end.
   That wordmark has moved to .footer__name, so the row left-aligns. */
.footer__bottom { display: flex; justify-content: flex-start; align-items: baseline; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--hairline); }
.footer__copy { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted-soft); }

/* Large Name Footer + Hover Footer letter cascade.
   OVERRIDE: .footer__wordmark was a 12px mono label in styles.css; here it is
   the full-bleed display wordmark. */
.footer__name { margin-top: 40px; overflow: hidden; line-height: 0.8; }
.footer__wordmark {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  /* 9.4vw keeps ALEX BOGOMOLOV (9.244em incl. tracking) inside the
     padded viewport at every tested width. */
  font-size: clamp(36px, 9.4vw, 200px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--surface-elevated);
  transform: translateY(14%);
  user-select: none;
}
.footer__wordmark .l { display: inline-block; color: var(--surface-elevated); transition: color 420ms var(--ease-cine); transition-delay: calc(var(--d, 0) * 60ms); }
.footer__wordmark.is-lit .l { color: var(--ink); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .gallery { height: max(460px, 70vh); }
  .panel__body { padding: 22px; gap: 12px; }
  .panel__desc { font-size: 15px; }
  #slate { padding-top: calc(var(--sp-section) + 40px); padding-bottom: calc(var(--sp-section) + 40px); }
}
/* Tablet: six panels stay horizontal, collapsed never narrower than 72px. */
@media (min-width: 721px) and (max-width: 1024px) {
  .panel { min-width: 72px; }
  .panel__title { font-size: 22px; }
  .panel__desc { font-size: 14px; }
  .panel__callout { font-size: 9px; }
}

@media (max-width: 920px) {
  .section, .manifesto { padding: 80px var(--sp-lg); }
  /* These three are byte-identical to rules styles.css already has, and were
     dropped as duplicates on the first pass. They have to be restated here:
     media queries add no specificity, so styles.css's @media copy loses to the
     unconditional .hero / .hero__wordmark / .writing-row rules THIS file
     declares at top level, simply because this sheet loads second. Anything
     home.css sets unconditionally must be re-overridden per breakpoint here. */
  .hero { padding: 80px var(--sp-lg); }
  .hero__wordmark { top: var(--sp-lg); left: var(--sp-lg); }
  .writing-row { grid-template-columns: 1fr; gap: 8px; }
  .featured-in { padding: 44px var(--sp-lg); }
  .ways__grid { grid-template-columns: 1fr; gap: 0; }
  .ways__tile:not(:last-child) { border-bottom-color: var(--hairline); }
  .invest-band__stats .invest-stat { grid-template-columns: 1fr; gap: 6px; }
  .footer { padding: 56px var(--sp-lg) 0; }
}

/* Vertical accordion under 720px */
@media (max-width: 720px) {
  .dev-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; }
  /* Same reason as the .hero group above: home.css sets padding-top: 4px on
     .dev-row__status unconditionally, which outranks styles.css's @media copy. */
  .dev-row__status { padding-top: 0; }
  .gallery { flex-direction: column; height: auto; }
  #slate, #manifesto { padding-bottom: calc(80px + 40px); }
  #slate { padding-top: calc(80px + 40px); }
  .gallery__caption { gap: 6px 16px; letter-spacing: 1.8px; }
  .panel { flex: 0 0 88px; min-width: 0; transition: flex-basis var(--dur-panel) var(--ease-cine); }
  .panel.is-active { flex-grow: 0; flex-basis: 380px; }
  .panel + .panel { border-left: 0; border-top: 1px solid var(--hairline); }
  .panel__img img { object-position: center 30%; }
  .panel__spine { writing-mode: horizontal-tb; transform: none; left: 20px; bottom: auto; top: 36px; }
  .panel__scrim { height: 70%; }
  .panel__body { padding: 20px; gap: 10px; }
  .panel__title { font-size: 20px; }
  .panel__callout { display: none; }
}

@media (max-width: 900px) {
  .hero__cta-row a[href="#slate"] { display: none; }
  .hero__portrait { width: 60vw; height: clamp(720px, max(120vh, 70vw), 1800px); opacity: 0.7; }
  .hero__inner { margin-left: var(--sp-lg); max-width: 460px; }
}

@media (max-width: 480px) {
  .section, .manifesto { padding: 80px var(--sp-lg); }
  .footer { padding: 64px var(--sp-lg) 0; }
  .hero__portrait { width: 80vw; opacity: 0.35; object-position: center; }
  .hero__inner { margin-left: var(--sp-lg); margin-right: var(--sp-lg); max-width: none; }
  .hero__title { font-size: 28px; line-height: 1.12; }
  .manifesto__body { font-size: 19px; }
  .invest-band__lead { font-size: 19px; }
}

/* REDUCED MOTION — everything lands in its final state */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal].is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .w { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__portrait, .hero__sub, .hero__line, .hero__cta-row > *,
  .hero__wordmark { animation: none !important; }
  .hero__media, .hero__content, .hero__grain { transform: none !important; }
  .marquee__inner { animation: none !important; width: auto; justify-content: center; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track:not(:first-child) { display: none; }
  .marquee__track { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .marquee__track li:last-child::after { content: ''; margin: 0; }
  .js .dev-row::before, .js .dev-row:last-child::after { transform: scaleX(1) !important; transition: none !important; }
  .js .dev-row > * { opacity: 1 !important; transition: none !important; }
  .panel, .panel__img, .panel__scrim, .panel__body, .panel__spine { transition: none !important; }
  .panel__media::after { transition: none !important; }
  .footer__wordmark .l { transition: none !important; color: var(--muted-soft); }
  .footer__wordmark { color: var(--muted-soft); }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}