/* tokens.css — Project Bluebird BINDING style contract (Stage 6 output)
Every prototype and every section partial imports this file and MUST NOT
redeclare its own palette, font stack, type scale, spacing or motion.
Structural CSS (grid-column assignments, per-section decorative treatment)
stays local to each part. That split is what makes parts from different
prototypes stitchable into one page without a seam.
Lineage: palette/type/spacing derived from `campaign-hybrid` (COMPARE.md's
only section-level merge-verdict candidate). Body font changed to Bitter
per Matthew's seam-lab verdict 2026-07-31. Motion tokens added so the
loud/quiet axis (build-brief D6) is a knob, not a rebuild.
Body font DECIDED 2026-08-07: Dosis — the "Dosis throughout" sample endorsed
on call 3, confirmed by Matthew. This REPLACES the 2026-07-31 Bitter verdict
above. Dosis has no italic, so the ~15 italic rules across the site now render
as synthesised oblique; that is exactly what the endorsed sample showed, so it
is the approved look, not a regression. Bitter is dropped from the @import —
after this change nothing reads it.
Display font REOPENED 2026-08-07, then set to Impact: Dosis was Scott's
2026-08-04 pick for the display role but is out of the running entirely, and
Impact is now the default the page ships on. The review shell's Choices sheet
offers the rest of the candidates live.
Display font DECIDED 2026-08-11: Oswald — Matthew's call; the Choices card
is retired with it. Headings and .bio-lead run its real 700, labels 500
(the same weights the shell's live override applied), replacing the flat
400 the one-weight Impact forced. Impact stays in the stack as fallback.
*/
/* site-v1's two pages preconnect + this SAME URL from so the
font CSS is fetched in parallel with the stylesheets instead of serially
after this file parses (audit C1). The @import stays for every other
candidate that leans on tokens.css alone; on site-v1 it coalesces with the
in-flight request. If this URL ever changes, change it in
site-v1/index.html and site-v1/filmmaker.html in the same commit. */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500&family=Dosis:wght@400;500;600;700;800&family=Oswald:wght@300;400;500;600;700&display=swap");
:root{
/* ---- palette ---- */
--ink:#ece7da;
--ink-dim:#a8a191;
/* lifted from #6d675a 2026-08-13 (audit B2): the old value sat at ~3.5:1
on --bg and ~3.0:1 on the section tints — under WCAG AA's 4.5:1 for the
small labels it styles. #8f887a clears 4.5:1 on the darkest tint while
staying clearly the quietest voice in the ink hierarchy. */
--ink-faint:#8f887a;
--bg:#0a0c0b;
--black:#060707;
--line:rgba(236,231,218,.13);
--accent:#c9a25f;
/* Atmosphere hues. Gold alone could not carry campaign-hybrid's drift layer,
which washes cool AND warm; without a cool the background goes luminance-only
and visibly flattens. Values are campaign-hybrid's own, not new inventions:
rgba(38,54,50) / rgba(23,34,38) cool, rgba(32,29,19) warm. Matthew's call
2026-07-31 — "I like the atmosphere from the campaign hybrid". */
--cool:#263632;
--cool-deep:#172226;
--warm:#201d13;
/* ---- type ---- */
--font-display:"Oswald","Impact",Haettenschweiler,"Arial Narrow Bold",sans-serif;
--font-body:"Dosis",system-ui,sans-serif;
/* Form voice (Matthew, 2026-08-13): Oswald's closed apertures clot at
--text-label sizes on the two access forms whatever the weight. Archivo
Narrow keeps the condensed-grotesque register but its open counters hold
at small tracked uppercase. Forms only — headings stay --font-display. */
--font-form:"Archivo Narrow","Arial Narrow",sans-serif;
/* Intertitle voice — the seam logline under page 1's hero (+ the wedding
page's verse). DECIDED 2026-08-16 by SCOTT via the Choices card: Oswald
light (300) — "the site's own voice, quiet". Supersedes Special Elite
(Matthew's 08-14 interim pick). .seam__line carries size/weight/tracking
exactly as the card's live override showed him. */
--font-intertitle:"Oswald","Arial Narrow",sans-serif;
--text-h1:clamp(3.6rem,10vw,9.5rem);
--text-h2:clamp(2rem,3.6vw,3.2rem);
--text-h3:clamp(1.4rem,2.4vw,2rem);
--text-intertitle:clamp(1.6rem,3.9vw,3.4rem);
--text-label:clamp(.66rem, .6rem + .25vw, .84rem); /* viewport-clamped 2026-08-13: fixed .68rem read too small beside clamp-scaled headings on large screens */
--text-body:clamp(1rem,1.35vw,1.13rem);
--track-label:.28em;
/* captions/figcaptions track tighter than eyebrows — at .28em they read as
labels competing with the image rather than sitting under it */
--track-caption:.19em;
/* ---- spacing ---- */
/* widened in the restraint pass (2026-08-06, call-3 "quieter"): sections
breathe longer before content enters */
--space-section:clamp(7rem,14vh,12rem);
--space-gap:clamp(1rem,2vw,2rem);
--shell-width:min(100% - clamp(2.4rem,8vw,7rem),90rem);
/* ---- radii ---- */
--radius:0; /* flat/hard-edged by design — no rounded corners in this language */
/* ---- motion (the loud/quiet axis lives here — D6) ---- */
--ease:cubic-bezier(.2,.7,.2,1);
--ease-expo:cubic-bezier(.16,1,.3,1);
/* UI feedback (hover, focus, button state). Distinct from --reveal-duration:
a 900ms hover reads as a broken control, not a considered one. */
--duration-ui:.3s;
--reveal-distance:.9rem;
--reveal-blur:.28rem;
/* slowed in the restraint pass (2026-08-06, call-3 "quieter"): reveals
drift in rather than land — the D6 loud/quiet knob turned toward quiet */
--reveal-duration:1200ms;
--stagger:190ms;
--entrance-duration:1.35s; /* letterbox curtain open */
--settle-duration:4.4s; /* hero image zoom-out */
--settle-scale:1.16;
--grain-opacity:.04;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--font-body);
line-height:1.68;
-webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--bg)}
img{display:block;max-width:100%;border-radius:var(--radius)}
a{color:inherit;text-decoration:none}
h1,h2,h3{
font-family:var(--font-display);
font-weight:700;
line-height:.98;
letter-spacing:-.02em;
text-transform:uppercase;
color:#f2ede0;
margin:0;
}
/* the tracked eyebrow, gold — grafted from `cinematic`'s .kicker */
.label,.kicker{
font-family:var(--font-display);
font-size:var(--text-label);
font-weight:400;
letter-spacing:var(--track-label);
text-transform:uppercase;
color:var(--accent);
margin:0 0 1.4rem;
}
.shell{width:var(--shell-width);margin-inline:auto}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-gap)}
.prose p{color:var(--ink-dim);font-size:var(--text-body)}
.prose p + p{margin-top:1.15em}
/* shared scroll-reveal — parts opt in with .reveal, order with --i */
.reveal{
opacity:0;
filter:blur(var(--reveal-blur));
transform:translateY(var(--reveal-distance));
transition:opacity var(--reveal-duration) var(--ease),
filter var(--reveal-duration) var(--ease),
transform var(--reveal-duration) var(--ease);
transition-delay:calc(var(--i,0) * var(--stagger));
}
.reveal.is-in{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto !important}
/* Collapse motion to ~0 rather than killing it. `animation:none` would strip
the end state off any part that reveals itself with a `forwards` animation
from opacity:0 — that part becomes permanently invisible. Collapsing the
duration lets every animation land on its final frame instantly, so parts
stay visible without needing to register themselves here. */
*,*::before,*::after{
animation-duration:.01ms !important;
animation-delay:0ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
transition-delay:0ms !important;
}
.reveal{opacity:1;filter:none;transform:none}
/* EXEMPT: the background river. It crossfades a background-color — nothing
moves, nothing travels, so it is not the class of effect this rule exists
to suppress. Collapsing it turns every section boundary into a hard CUT,
which is harsher for a reduced-motion user than the flow it replaced.
Found 2026-07-31: applied to every boundary on the page, not just the seam. */
.grade-base{transition-duration:var(--reveal-duration) !important}
}