/* ============================================================
   AAA CREATIVE LAB — CASE PAGE STANDARD
   One canonical scale for all project/case pages.

   Loaded AFTER each page's local <style> block, so it normalises
   the drift that accumulated per page. Page-specific layout
   (grids, media, animation) stays in the page; anything about
   TYPE SIZE, BLOCK PADDING or ALIGNMENT belongs here.

   Tiers
     display-1  case / hero headline .......... 104px cap
     display-2  statement headline (CTA) ...... 88px cap
     display-3  section headline ............. 72px cap
     display-4  row / split headline ......... 48px cap
     statement  big pull sentence ............ 30px cap
     lead       bold intro paragraph ......... 24px cap
     lede       plain intro paragraph ........ 18px
     body       running paragraph ............ 16px
     eyebrow    // accent label .............. 11px
     meta       mono micro label ............. 10px
   ============================================================ */

:root {
  --case-gutter: 48px;
  --case-gutter-sm: 24px;
  --case-pad-y: 128px;
  --case-pad-y-sm: 80px;
  --case-cell-pad: 96px 80px;
  --case-cell-pad-sm: 56px 24px;
}

/* ---------- Section blocks: same gutter, same rhythm ---------- */
.concept,
.board,
.gallery,
.quote,
.kicker {
  padding: var(--case-pad-y) var(--case-gutter);
}
.head { padding: 120px var(--case-gutter); }
.outro { padding: var(--case-pad-y) var(--case-gutter) 96px; }
.contact { padding: 96px var(--case-gutter) 120px; }
.footer { padding: 32px var(--case-gutter); }
.topnav { padding: 18px var(--case-gutter); }
.hero__nav { padding: 28px var(--case-gutter); }
.cell-txt__inner,
.split__text { padding: var(--case-cell-pad); }

/* ---------- display-1 — case / hero headline ---------- */
.head__title,
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(30.8px, 3.78vw, 72.8px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

/* ---------- display-2 — statement headline ---------- */
.outro__title,
.contact__title,
.film__name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(28px, 3.36vw, 61.6px);
  line-height: 0.94;
  letter-spacing: -0.02em;
}

/* ---------- display-3 — section headline ---------- */
.gallery__title,
.board__title,
.concept__title,
.redesign__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(25.2px, 3.08vw, 50.4px);
  line-height: 0.94;
  letter-spacing: -0.02em;
}

/* ---------- display-4 — row / split headline (same size as display-3: one section-headline size) ---------- */
.split__title,
.assets__copy h2.split__title,
.collage__copy h2.split__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(25.2px, 3.08vw, 50.4px);
  line-height: 0.94;
  letter-spacing: -0.02em;
}

/* ---------- statement — big pull sentence ---------- */
.quote__body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* ---------- lead — bold intro paragraph ---------- */
.concept__lead,
.kicker p,
.collage__copy h2,
.assets__copy h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* ---------- lede — plain intro paragraph ---------- */
.head__lede,
.contact__lede,
.hero__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--paper-70);
}

/* ---------- body — running paragraph ---------- */
.split__body,
.concept__p,
.redesign__body,
.collage__copy p:not(.eyebrow),
.assets__copy p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--paper-70);
}

/* ---------- eyebrow — // accent label ---------- */
.eyebrow,
.head__eyebrow,
.concept__eyebrow,
.gallery__eyebrow,
.vidrow__eyebrow,
.outro__eyebrow,
.split__tag,
.hero__label {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- meta — mono micro label ---------- */
.head__crumb,
.gallery__count,
.board__count,
.vidrow__count,
.split__tag-num,
.contact__label,
.footer__nav a,
.footer__copy,
.ph__label,
.hero__cue {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============================================================
   COLOUR HIERARCHY
   Four steps of emphasis on the dark page, plus two inline devices.
   Never introduce a fifth grey — pick the step that fits.

     --paper       headlines, lead, inline <strong>
     --paper-70    running body, lede
     --paper-40    mono meta, numbers, secondary nav
     --amber       the single accent: <em>, .accent, // prefix, stage tag
   ============================================================ */

/* headline / lead — full strength */
.head__title,
.hero__title,
.outro__title,
.contact__title,
.film__name,
.gallery__title,
.board__title,
.concept__title,
.redesign__title,
.split__title,
.quote__body,
.concept__lead,
.kicker p,
.collage__copy h2,
.assets__copy h2 { color: var(--paper); }

/* running text — one step back */
.head__lede,
.contact__lede,
.hero__sub,
.split__body,
.concept__p,
.redesign__body,
.collage__copy p:not(.eyebrow),
.assets__copy p { color: var(--paper-70); }

/* mono meta — furthest back */
.head__crumb,
.gallery__count,
.board__count,
.vidrow__count,
.split__tag-num,
.ph__label,
.hero__cue,
.footer__nav a,
.footer__copy { color: var(--paper-40); }
.head__crumb .current { color: var(--paper); }

/* eyebrow — white label, amber // */
.eyebrow,
.head__eyebrow,
.concept__eyebrow,
.gallery__eyebrow,
.vidrow__eyebrow,
.outro__eyebrow,
.hero__label { color: var(--paper); }
.eyebrow::before,
.head__eyebrow::before,
.concept__eyebrow::before,
.gallery__eyebrow::before,
.vidrow__eyebrow::before,
.outro__eyebrow::before,
.hero__label::before { color: var(--amber); }

/* stage tag — amber label, muted number */
.split__tag { color: var(--amber); }

/* the two inline devices: <em> accents in amber, <strong> lifts to white */
.split__body em,
.concept__p em,
.head__lede em,
.contact__lede em,
.redesign__body em,
.quote__body em,
.collage__copy p em,
.assets__copy p em {
  font-style: normal;
  color: var(--amber);
}
.split__body strong,
.concept__p strong,
.head__lede strong,
.redesign__body strong,
.collage__copy p strong,
.assets__copy p strong {
  color: var(--paper);
  font-weight: 600;
}
.accent { color: var(--amber); }

/* ---------- Mobile: one gutter, one rhythm ---------- */
@media (max-width: 980px) {
  .concept,
  .board,
  .gallery,
  .quote,
  .kicker {
    padding: var(--case-pad-y-sm) var(--case-gutter-sm);
  }
  .head { padding: var(--case-pad-y-sm) var(--case-gutter-sm); }
  .contact { padding: 64px var(--case-gutter-sm) 80px; }
  .cell-txt__inner,
  .split__text { padding: var(--case-cell-pad-sm); }
}
@media (max-width: 720px) {
  .topnav { padding: 14px var(--case-gutter-sm); }
  .hero__nav { padding: 18px var(--case-gutter-sm); }
  .outro { padding: var(--case-pad-y-sm) var(--case-gutter-sm) 64px; }
  .footer { padding: 28px var(--case-gutter-sm); }
}

/* ---------- eyebrow standard (all cases): // LABEL, white, amber slashes ---------- */
.eyebrow, .split__tag.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); font-family: var(--font-accent); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow::before { content: "//"; color: var(--amber); font-weight: 600; }

/* ---------- one text column for every block ----------
   Right-hand copy in 50/50 rows starts on the same vertical as the
   concept grid's right column: 128px + (W - 176px) * 6/11.
   In a half-width cell (C = W/2) that is 32px + C/11 from the cell edge. */
@media (min-width: 981px) {
  .row > .cell-media + .cell-txt .cell-txt__inner { padding-left: calc(32px + 9.0909%) !important; padding-right: var(--case-gutter) !important; }
  .row > .cell-txt:first-child .cell-txt__inner { padding-left: var(--case-gutter) !important; padding-right: 80px !important; }
}

/* ---------- hero height — same on every case ---------- */
.hero { height: 92vh; min-height: 560px; }