/*
Theme Name: Jaya
Theme URI: https://jaya.be
Author: Jaya Besteman-Goold
Description: Single-page tour management & production portfolio for Jaya Besteman-Goold, Rotterdam.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Unlicensed — private theme
Text Domain: jaya-tm
*/

/* ─── Fonts (brand) ─── */
@font-face {
  font-family: 'Neue Montreal';
  src: url('assets/fonts/NeueMontreal-Regular.woff2') format('woff2'),
       url('assets/fonts/NeueMontreal-Regular.woff') format('woff');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Monument Extended';
  src: url('assets/fonts/MonumentExtended-Bold.woff2') format('woff2'),
       url('assets/fonts/MonumentExtended-Bold.woff') format('woff');
  font-weight: 700; font-display: swap;
}

/* ─── Tokens ─── */
:root {
  --red:    #C22F1D;
  --red-d:  #9e2415;
  --red-bright: #E4502F; /* red for small text on dark surfaces — ≥4.5:1 on --ink and --ink-90 */
  --cream:  #F5F1EC;
  --cream-2:#ECE6DD;
  --cream-3:#E3DBCF;
  --ink:    #1a1714;
  --ink-90: #131110;
  --ink-2:  #4a443d;
  --ink-3:  #6f685e;
  --line:   rgba(26,23,20,0.14);
  --line-d: rgba(245,241,236,0.16);
  --mono:   ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --radius: clamp(14px, 1.6vw, 22px);
  --radius-sm: 10px;
  --maxw: 1480px;
  --shadow-warm: 0 34px 64px -30px rgba(26,23,20,0.45);
  --shadow-red:  0 34px 64px -32px rgba(158,36,21,0.42);
  --z-grain: 60; --z-cursor: 80; --z-header: 50; --z-rail: 40;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* clears the fixed .site-header so #me/#touring/etc anchors don't land underneath it —
   matches its actual rendered height (14px padding + 21px nav row + 1px border ≈ 50px;
   mobile's taller 14px anchor padding ≈ 70px); previously overshot this, leaving a
   gap between the bar and the section it scrolled to */
html { scroll-behavior: smooth; scroll-padding-top: 50px; font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (max-width: 700px) { html { scroll-padding-top: 70px; } }
body {
  font-family: 'Neue Montreal', 'Helvetica Neue', Helvetica, sans-serif;
  background: var(--cream); color: var(--ink); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--cream); }

/* Grain */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain);
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px;
}

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); }

/* ─── Custom cursor (fine pointer) ─── */
.cursor { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block; position: fixed; top: 0; left: 0; width: 9px; height: 9px;
    border-radius: 50%; background: var(--red); z-index: var(--z-cursor);
    pointer-events: none; mix-blend-mode: multiply; transform: translate(-50%, -50%);
    transition: width .28s var(--ease), height .28s var(--ease), opacity .28s var(--ease);
    opacity: 0; /* parked at screen-centre until the pointer first moves */
  }
  body.pointer-seen .cursor { opacity: 1; }
  body.cur-lg .cursor { width: 56px; height: 56px; background: rgba(194,47,29,0.16); }
  /* the cursor is red-on-cream by default — invert it over the red cover */
  body.on-cover .cursor { background: var(--cream); mix-blend-mode: normal; }
  body.on-cover.cur-lg .cursor { background: rgba(245,241,236,0.20); }
}

/* ─── Typography helpers ─── */
.eyebrow {
  font: 500 12px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--red);
}
.display {
  font-family: 'Monument Extended', sans-serif; font-weight: 700;
  font-size: clamp(38px, 6.4vw, 96px); line-height: 0.92; letter-spacing: -0.04em;
  text-wrap: balance;
}
.h2 {
  font-family: 'Monument Extended', sans-serif; font-weight: 700;
  font-size: clamp(26px, 4vw, 56px); line-height: 1; letter-spacing: -0.03em;
  text-wrap: balance;
}
.lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; text-wrap: pretty; }
.body-p { font-size: 17px; line-height: 1.72; color: var(--ink-2); max-width: 62ch; }
.body-p + .body-p { margin-top: 18px; }
.body-p strong { color: var(--ink); font-weight: 400; }
.pull {
  font-family: 'Monument Extended', sans-serif; font-weight: 700;
  font-size: clamp(24px, 3.6vw, 50px); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance;
}
.pull em { font-style: normal; color: var(--red); }
.accent { color: var(--red); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-2); transition: color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { color: var(--red); border-color: var(--red); }

/* media */
figure { position: relative; }
.media { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-warm); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.media.hov:hover img { transform: scale(1.035); }
figcaption {
  font: 500 12px/1.5 var(--mono); letter-spacing: 0.02em; color: var(--ink-3);
  margin-top: 12px; max-width: 52ch;
}
.dark figcaption { color: rgba(245,241,236,0.5); }

/* ─── Header ─── */
/* Fixed from the start so it's visible over the cover too, then stays pinned
   for the rest of the page. Matches the cover's red exactly (solid, no blur, no
   seam) while on it, crossfades to the cream/blur treatment once body loses
   .on-cover (see the on-cover rule below). */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  background: rgba(245,241,236,0.8);
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
body.on-cover .site-header {
  background: var(--red);
  border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* three-column grid so the nav sits dead-centre on the bar regardless of whether
   the clock (right cell) is present — the two flanking 1fr tracks stay equal
   even when the clock's cell is empty (hidden on mobile), and the row's height
   is just whatever the nav needs, no guessed min-height per breakpoint */
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px clamp(20px, 4vw, 64px); }
.header-inner nav { grid-column: 2; min-width: 0; }
.h-nav { display: flex; justify-content: center; gap: clamp(16px, 2.6vw, 40px); list-style: none; }
.h-nav a, .h-lang a {
  font: 500 13px/1 var(--mono); letter-spacing: 0.02em; text-transform: lowercase; color: var(--ink-2);
  position: relative; padding: 4px 0; text-decoration: none; transition: color .3s var(--ease);
}
.h-nav a::after, .h-lang a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.h-nav a:hover, .h-lang a:hover { color: var(--ink); }
.h-nav a:hover::after, .h-lang a:hover::after { transform: scaleX(1); transform-origin: left; }
body.on-cover .h-nav a, body.on-cover .h-lang a { color: var(--cream); }
body.on-cover .h-nav a::after, body.on-cover .h-lang a::after { background: var(--cream); }
body.on-cover .h-nav a:hover, body.on-cover .h-lang a:hover { color: var(--cream); }
.h-clock { grid-column: 3; justify-self: end; font: 500 13px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
body.on-cover .h-clock { color: var(--cream); }

/* ─── Language switcher — lives inside .h-nav as its last item (see markup),
   not a separate corner element. A standalone element in the header's empty
   left column mirrored the clock on desktop, but had nothing to mirror once
   the clock hides on mobile — it just sat alone, lopsided. Folding it into
   the nav list itself keeps it centered and symmetric at every width, for
   free, using the exact same link styling as every other nav item. ─── */

/* clock drops out first so the centered nav gets the full bar to itself on phones */
@media (max-width: 700px) {
  .h-clock { display: none; } .h-nav { gap: 16px; } .h-nav a, .h-lang a { padding: 14px 0; }
  /* position:fixed + backdrop-filter is unreliable on iOS Safari during momentum
     scroll — the bar can redraw mid-scroll as a partial/duplicate ghost of itself.
     Sticky keeps it in normal flow (no overlay-on-cover on mobile) and pins it once
     its own position scrolls to the top, without the repaint glitch. */
  .site-header { position: sticky; }
  body.on-cover .site-header { background: rgba(245,241,236,0.8); background: color-mix(in srgb, var(--cream) 80%, transparent); border-bottom-color: var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  body.on-cover .h-nav a, body.on-cover .h-lang a { color: var(--ink-2); }
  body.on-cover .h-nav a::after, body.on-cover .h-lang a::after { background: var(--red); }
  body.on-cover .h-nav a:hover, body.on-cover .h-lang a:hover { color: var(--ink); }
}
@media (max-width: 480px) { .h-nav { gap: 10px; } .h-nav a, .h-lang a { font-size: 11px; } }
@media (max-width: 340px) { .h-nav { gap: 7px; } .h-nav a { font-size: 10px; } }

/* ─── Section index rail ─── */
.rail {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: var(--z-rail);
  display: flex; flex-direction: column; gap: 14px; list-style: none;
  mix-blend-mode: difference;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease);
}
/* the rail's difference blend renders cyan over the red cover — hold it back until past it */
body:not(.on-cover) .rail { opacity: 1; pointer-events: auto; }
.rail a {
  display: flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #888;
}
.rail .dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #888; transition: background .3s var(--ease), border-color .3s var(--ease); }
.rail .lbl { opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); color: #aaa; }
.rail a:hover .lbl { opacity: 1; transform: translateX(0); }
.rail a.active .dot { background: var(--red); border-color: var(--red); }
@media (max-width: 1180px) { .rail { display: none; } }

/* ─── Section base ─── */
section { position: relative; }
.pad { padding: clamp(80px, 13vh, 170px) 0; }
/* production ends on the films grid now (no closing paragraph) and before-this opens straight
   into its list — tighten the gap on both sides of that seam rather than the full .pad rhythm */
#production { padding-bottom: clamp(40px, 6vh, 80px); }
#before { padding-top: clamp(40px, 6vh, 80px); }
.dark { background: var(--ink); color: var(--cream); }
.dark .body-p { color: rgba(245,241,236,0.62); }
.dark .body-p strong { color: var(--cream); }
.dark .chip { border-color: var(--line-d); color: rgba(245,241,236,0.7); }
.dark .chip:hover { color: var(--cream); border-color: var(--red); background: var(--red); }
.paper { background: var(--cream-2); }

.sec-tag { font: 500 12px/1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }

/* ─── COVER — physics JAYA wordmark ─── */
.cover {
  height: 100vh; height: 100svh; min-height: 520px;
  background: var(--red); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; user-select: none;
}
.cover-logo { position: relative; z-index: 2; width: 100%; padding: 0 clamp(20px, 4vw, 64px); }
.hero-logo { position: relative; overflow: hidden; color: var(--cream); }
.hero-logo svg { width: 100%; height: auto; display: block; overflow: visible; }
/* letters slide up out of the mask; the <g> wrappers belong to the physics engine */
.hero-logo svg path {
  transform: translate3d(0, 112%, 0);
  transition: transform 1.1s var(--ease); will-change: transform;
}
.is-ready .hero-logo svg path                { transform: translate3d(0, 0, 0); }
.is-ready .hero-logo svg g:nth-child(1) path { transition-delay: 0.08s; }
.is-ready .hero-logo svg g:nth-child(2) path { transition-delay: 0.22s; }
.is-ready .hero-logo svg g:nth-child(3) path { transition-delay: 0.36s; }
.is-ready .hero-logo svg g:nth-child(4) path { transition-delay: 0.50s; }
.hero-letter { transform-box: fill-box; transform-origin: center; will-change: transform; }
.hero-logo.physics-on { overflow: visible; }

.cover-label, .cover-cue {
  position: absolute; bottom: clamp(22px, 4.5vh, 52px); z-index: 3;
  opacity: 0; transform: translateY(10px);
  transition: opacity .9s var(--ease) .85s, transform .9s var(--ease) .85s;
}
.is-ready .cover-label, .is-ready .cover-cue { opacity: 1; transform: translateY(0); }
.cover-label {
  left: clamp(20px, 4vw, 64px);
  font: 500 12px/1.75 var(--mono); letter-spacing: 0.07em; color: var(--cream);
}
.cover-label strong { display: block; font-weight: 700; font-size: 16px; letter-spacing: 0.04em; margin-bottom: 3px; color: var(--cream); }
.cover-cue {
  right: clamp(20px, 4vw, 64px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 700 14px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream);
}
.cover-cue .line {
  width: 1px; height: clamp(34px, 6vh, 58px); background: rgba(245,241,236,0.28);
  position: relative; overflow: hidden;
}
.cover-cue .line::after {
  content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 40%;
  background: var(--cream); transform: translateY(-100%);
  animation: cue-drop 2.4s var(--ease) infinite;
}
@keyframes cue-drop { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(250%); } }

/* ─── HERO ─── */
.hero { padding: clamp(72px, 7vh, 88px) 0 clamp(48px, 8vh, 90px); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 90% 6%, rgba(194,47,29,0.10), transparent 70%),
    radial-gradient(60% 55% at -5% 100%, rgba(26,23,20,0.05), transparent 60%);
}
.hero-grid { display: grid; grid-template-columns: 1.35fr 0.95fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.hero h1 { margin-bottom: 18px; }
.hero h1.display { font-size: clamp(22px, 3vw, 38px); line-height: 1.15; }
.hero-claim { margin-bottom: 22px; color: var(--ink-2); font-size: clamp(20px, 2.4vw, 32px); line-height: 1.08; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .subhead { font: 500 13px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 22px; }
.hero .body-p { max-width: 50ch; }

.hero-portrait {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-warm);
  aspect-ratio: 4/5; position: relative;
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .hero-portrait { max-width: 420px; } }
.btn-text {
  font: 500 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  position: relative; padding: 6px 0; display: inline-flex; align-items: center; gap: 9px;
}
.btn-text .arr { transition: transform .4s var(--ease); }
.btn-text:hover .arr { transform: translateX(6px); }
.btn-text::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red);
  transform: scaleX(1); transform-origin: left; transition: transform .45s var(--ease);
}

/* line-mask reveal — fires when the hero scrolls into view, since the cover is above it */
.reveal-line { display: block; overflow: hidden; }
.hero .reveal-line { padding-bottom: 0.1em; } /* room for descenders (y, g) the mask would otherwise clip */
.reveal-line > span { display: block; transform: translateY(112%); transition: transform 1.0s var(--ease); }
.hero.in .reveal-line > span { transform: translateY(0); }
.hero.in .rl-1 > span { transition-delay: .08s; }
.hero.in .rl-2 > span { transition-delay: .22s; }
.hero-fade { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease) .45s, transform .9s var(--ease) .45s; }
.hero.in .hero-fade { opacity: 1; transform: translateY(0); }

#touring-h { font-size: clamp(24px, 3.4vw, 46px); }

/* ─── Roster — venues & festivals, presented like a show bill ─── */
.roster {
  margin-top: clamp(48px, 8vh, 96px); padding-top: clamp(32px, 5vh, 56px);
  border-top: 1px solid var(--line-d);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px);
}
@media (max-width: 700px) { .roster { grid-template-columns: 1fr; gap: 40px; } }
.roster-label {
  display: block; margin-bottom: 18px;
  font: 500 12px/1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,236,0.72);
}
.roster-list { list-style: none; }
.roster-list li {
  font-family: 'Monument Extended', sans-serif; font-weight: 700;
  font-size: clamp(22px, 2.6vw, 38px); letter-spacing: -0.02em; line-height: 1.3;
  padding: 12px 0; border-bottom: 1px solid var(--line-d);
  transition: opacity .3s var(--ease);
}
.roster-list li:first-child { padding-top: 0; }
/* Not links — a spotlight dim, not the site's red/indent link-hover pattern, so it
   doesn't read as clickable. */
.roster-list:hover li { opacity: 0.45; }
.roster-list li:hover { opacity: 1; }

/* ─── Section heading block ─── */
.sec-head { display: grid; grid-template-columns: 3fr 9fr; gap: clamp(16px, 3vw, 48px); align-items: start; margin-bottom: clamp(40px, 6vh, 80px); }
.sec-head .tag-col { position: sticky; top: 80px; }
/* stacked single-column layout below 860px — sticky only makes sense beside the
   heading (desktop's side-by-side columns); stacked above it, the tag would pin at
   top:80px and scroll on top of the heading text underneath it */
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; gap: 18px; } .sec-head .tag-col { position: static; } }
.sec-head h2 { margin-bottom: 22px; }
.sec-head .subhead { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.dark .sec-head .subhead { color: rgba(245,241,236,0.72); }

/* ─── Copy column (offset to the 9fr track) ─── */
.offset-body { display: grid; grid-template-columns: 3fr 9fr; gap: clamp(16px, 3vw, 48px); }
@media (max-width: 860px) { .offset-body { grid-template-columns: 1fr; } }
.offset-body .col { grid-column: 2; max-width: 70ch; }
@media (max-width: 860px) { .offset-body .col { grid-column: 1; } }

/* ─── TOUR ─── */
.tour-hero { position: relative; }
.tour-hero .media { aspect-ratio: 16/9; border-radius: var(--radius); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7); }
@media (max-width: 700px) { .tour-hero .media { aspect-ratio: 4/5; } }
.tour-hero .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,13,11,0.7), transparent 55%); }
/* ─── VIDEO ─── */
.films { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); }
.film { margin: 0; width: 100%; }
.film .yt { aspect-ratio: 16/9; }
@media (max-width: 760px) { .films { grid-template-columns: 1fr; } }
.yt {
  position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-warm); background: #0f0d0b; border: 0; padding: 0; width: 100%; display: block;
}
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.yt:hover img { transform: scale(1.03); }
.yt .play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  background: var(--red); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px -10px rgba(158,36,21,0.6); transition: transform .35s var(--ease), background .3s var(--ease);
}
.yt:hover .play { transform: scale(1.08); }
.yt .play::before { content: ''; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--cream); margin-left: 5px; }
.yt iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-player { aspect-ratio: 16/9; width: 100%; display: block; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-warm); background: #0f0d0b; }

/* ─── RECORD ─── */
.ledger { border-top: 1px solid var(--line); list-style: none; }
.ledger li { border-bottom: 1px solid var(--line); padding: clamp(20px, 3vw, 34px) 0; display: grid; grid-template-columns: 40px 1fr; gap: clamp(10px, 2vw, 28px); }
.ledger .num { font: 500 12px/1.6 var(--mono); color: var(--ink-3); }
.ledger h3 { font-family: 'Monument Extended', sans-serif; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.025em; line-height: 1.05; }
.ledger .role { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-top: 10px; }
.ledger .desc { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; margin-top: 12px; }

.cred .deg { font-family: 'Monument Extended', sans-serif; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 16px; }
.cred dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.cred dt { font: 500 11px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.cred dd { color: var(--ink-2); }

/* two-item dossier for "Before this" — flush to the same left edge as every other section's body copy */
.before-list { border-top: 1px solid var(--line); }
.before-item { padding: clamp(24px, 4vw, 40px) 0; border-bottom: 1px solid var(--line); }
.before-item h3 { font-family: 'Monument Extended', sans-serif; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.025em; line-height: 1.05; }
.before-item .role { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-top: 10px; }
.before-item .desc { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; margin-top: 12px; }

/* ─── CONTACT / FOOTER ─── */
.contact { background: var(--ink-90); color: var(--cream); position: relative; overflow: hidden; padding: clamp(40px, 6vh, 80px) 0 40px; }
.contact .ghost {
  position: absolute; left: -2vw; bottom: -3vh; pointer-events: none; user-select: none;
  font-family: 'Monument Extended', sans-serif; font-size: clamp(140px, 30vw, 460px); line-height: 0.8;
  letter-spacing: -0.05em; color: var(--cream); opacity: 0.045; white-space: nowrap;
}
.contact-inner { position: relative; z-index: 1; }
.contact .sec-tag, .dark .sec-tag { color: var(--red-bright); }
.mail {
  display: inline-block; position: relative; font-family: 'Monument Extended', sans-serif;
  font-size: clamp(22px, 4.4vw, 60px); letter-spacing: -0.03em; line-height: 1; color: var(--red);
  margin-bottom: clamp(40px, 7vh, 80px); word-break: break-word;
}
.mail .arr { display: inline-block; transition: transform .4s var(--ease); }
.mail:hover .arr { transform: translateX(10px); }
.mail::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); }
.mail:hover::after { transform: scaleX(1); transform-origin: left; }
.contact-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 72px); }
@media (max-width: 820px) { .contact-cols { grid-template-columns: 1fr; gap: 30px; } }
.contact-cols .body-p { color: rgba(245,241,236,0.66); max-width: 56ch; }
.contact-cols .body-p strong { color: var(--cream); }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; align-self: start; }
.m-label { font: 500 11px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,236,0.72); margin-bottom: 9px; }
.m-val { font-size: 16px; line-height: 1.5; color: rgba(245,241,236,0.9); }
.m-val a { position: relative; }
.m-val a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgba(245,241,236,0.6); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.m-val a:hover::after { transform: scaleX(1); transform-origin: left; }

.colophon { position: relative; z-index: 1; margin-top: clamp(64px, 10vh, 110px); padding-top: 22px; border-top: 1px solid var(--line-d); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font: 500 11px/1.5 var(--mono); letter-spacing: 0.05em; color: rgba(245,241,236,0.72); }
.colophon a { color: rgba(245,241,236,0.8); }
.colophon a:hover { color: var(--cream); }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero-fade, .cover-label, .cover-cue { opacity: 1 !important; transform: none !important; }
  .reveal-line > span { transform: none !important; }
  .hero-logo svg path { transform: none !important; }
  html { scroll-behavior: auto; }
}