/* =========================================================================
BRETT NEICHIN — homepage (assets/noir/css/screen.css)
The Terminator (1984) system: blue-black night, steel blue, chrome
logo metal, and T-800 HUD red. Scanlines over film grain.
One-page dossier: hero → Get Huge (latest) → the dossier → press →
commissioners → the writer → colophon. Scroll-driven immersion layer
at the end of the file.
------------------------------------------------------------------------- */
:root {
--ink: #02040A; /* night sky over LA */
--ink-2: #07101F; /* panel */
--night: #0B1C36; /* blue haze */
--paper: #DCE4EE; /* cold white */
--paper-mute: #8597AE;
--rule: #182B47;
--steel: #3C6390; /* steel blue */
--steel-2: #6F96C4;
--ice: #A9C6E8; /* rim light */
--chrome: #D3DCE7;
--red: #D4140B; /* HUD red */
--red-2: #FF3B2F; /* the eye */
--blood: #5A0702;
--metal: linear-gradient(180deg,
#F6F9FD 0%, #C9D6E6 34%, #6E92BC 47%, #3F6A9E 51%,
#5C83B2 60%, #BCD0E6 82%, #EEF4FA 100%);
--hud-glow: 0 0 6px rgba(255,59,47,0.55), 0 0 18px rgba(212,20,11,0.35);
--shadow-2: 0 6px 14px rgba(0,0,0,0.55), 0 14px 36px rgba(0,0,0,0.5);
--font-display: "Michroma", "Michroma Fallback", "Eurostile Extended", "Microgramma", sans-serif;
--font-body: "Barlow", "Barlow Fallback", "Helvetica Neue", Arial, sans-serif;
--font-type: "Share Tech Mono", "Share Tech Mono Fallback", "Consolas", ui-monospace, monospace;
--font-hud: "VT323", "VT323 Fallback", ui-monospace, monospace;
--font-ui: "Barlow", "Barlow Fallback", "Helvetica Neue", Arial, sans-serif;
--s-half: 4px; --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
--s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
--container: 1240px;
--measure: 680px;
--t-xs: clamp(11px, 0.7vw + 8px, 13px);
--t-sm: clamp(13px, 0.8vw + 9px, 15px);
--t-base: clamp(16px, 0.5vw + 14px, 18px);
--t-lg: clamp(18px, 1vw + 13px, 21px);
--t-xl: clamp(20px, 1.4vw + 14px, 26px);
--t-2xl: clamp(24px, 2vw + 14px, 34px); /* metal titles stay 'large text' (>=24px) */
--t-hero: clamp(28px, 6.6vw, 96px);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-cine: cubic-bezier(0.25, 0.1, 0.25, 1);
--d-1: 320ms; --d-2: 560ms; --d-3: 900ms;
--hairline: 1px solid var(--rule);
}
/* Metric-matched fallback (Arial scaled to Michroma's measured advance 1.429x, asc 1.16 / desc 0.27):
the swap to the web font moves nothing (CLS). */
@font-face { font-family:"VT323 Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Courier");
size-adjust:66.7%; ascent-override:120%; descent-override:30%; line-gap-override:0%; }
@font-face { font-family:"Share Tech Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Courier");
size-adjust:90%; ascent-override:98.9%; descent-override:26.7%; line-gap-override:0%; }
@font-face { font-family:"Barlow Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
size-adjust:91.6%; ascent-override:109.1%; descent-override:21.8%; line-gap-override:0%; }
@font-face { font-family:"Michroma Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
size-adjust:142.9%; ascent-override:81.2%; descent-override:18.9%; line-gap-override:0%; }
@font-face { font-family:"Michroma"; font-weight:400; font-display:swap;
src:url("../fonts/michroma-latin-400.woff2") format("woff2"); }
@font-face { font-family:"Share Tech Mono"; font-weight:400; font-display:swap;
src:url("../fonts/share-tech-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family:"VT323"; font-weight:400; font-display:swap;
src:url("../fonts/vt323-latin-400.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:400; font-display:swap;
src:url("../fonts/barlow-latin-400.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:400; font-display:swap;
src:url("../fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:600; font-display:swap;
src:url("../fonts/barlow-latin-600.woff2") format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ol, ul, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
html { font-size: 100%; color-scheme: dark; scroll-behavior: smooth;
text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.motion-off { scroll-behavior: auto; }
html { scroll-padding-top: 88px; }
main p, main li { text-wrap: pretty; } /* no one-word last lines (Chrome/Safari; others wrap normally) */ /* anchors and focus always clear the sticky nav (WCAG 2.4.11) */
body {
/* Night photography: black sky, blue haze pooling low. */
background:
radial-gradient(120% 60% at 50% 0%, rgba(30,62,102,0.35), transparent 60%),
linear-gradient(180deg, #050B18 0%, var(--ink) 30%, #030812 100%);
background-color: var(--ink);
color: var(--paper);
font-family: var(--font-body);
font-size: var(--t-base);
line-height: 1.6;
position: relative;
}
/* Film grain + CRT scanlines — the 1984 print seen through a machine's eye. */
body::before {
content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none;
background-image:
repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.22) 2px 3px),
url('data:image/svg+xml;utf8,');
background-size: 100% 3px, 180px 180px;
/* Normal blending on its own layer: an overlay blend re-composites the whole
screen every frame (measured: 17 -> 2 dropped frames on a 4x-throttled phone). */
opacity: 0.2; will-change: transform; /* darken-only: black noise, alpha from the turbulence */
}
/* Cold blue key light from above, hard vignette at the edges. */
body::after {
content: ""; position: fixed; inset: 0; z-index: 1999; pointer-events: none;
background:
radial-gradient(90% 55% at 50% 0%, rgba(111,150,196,0.08), transparent 62%),
radial-gradient(150% 115% at 50% 46%, transparent 55%, rgba(0,0,0,0.6) 100%);
}
::selection { background: var(--red); color: #fff; }
a { color: var(--red-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--paper); }
:focus-visible { outline: 2px solid var(--red-2); outline-offset: 2px; }
.download:focus-visible, .cta-band__item:focus-visible { outline-offset: -4px; }
/* Tiles: the ring is drawn on a layer above the key art, so it shows even when
only the art is on screen (320x256 / 400% zoom). */
.tile::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tile:focus-visible { outline: none; }
.tile:focus-visible::after { outline: 2px solid var(--red-2); outline-offset: -4px; box-shadow: inset 0 0 0 4px rgba(2,4,10,0.85); }
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--s-3); }
@media (max-width: 480px) { .wrap { padding-inline: var(--s-2); } }
/* ---------------- Kickers & section heads ---------------- */
.kicker {
font-family: var(--font-type);
font-size: var(--t-sm);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--steel-2);
}
.kicker::before { content: "> "; color: var(--red-2); }
.section { padding-block: var(--s-7); }
.section__head { text-align: center; margin-bottom: var(--s-6); }
.page-head + .section { padding-top: var(--s-4); } /* the page title already opens the page: no second full gap */
.section__title {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--t-2xl);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: var(--s-2);
background: var(--metal);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--chrome);
}
/* ---------------- Nav ---------------- */
.site-nav {
position: sticky; top: 0; z-index: 100;
background: var(--ink); /* opaque: bright chrome titles ghosted through a 95% bar while scrolling */
border-bottom: 1px solid var(--rule);
box-shadow: 0 1px 0 rgba(111,150,196,0.08);
}
.site-nav__row {
/* Links always sit beside the name; the scan readout (where scroll-driven animations exist)
pushes itself right. space-between gave a different layout per engine and width. */
display: flex; align-items: center; justify-content: flex-start;
gap: var(--s-3); padding-block: var(--s-2);
font-family: var(--font-type);
}
.site-nav__brand {
font-family: var(--font-display); font-weight: 400;
font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--chrome); text-decoration: none; white-space: nowrap;
}
.site-nav__links { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-left: var(--s-3); }
.site-nav__links a {
color: var(--paper-mute); text-decoration: none; text-transform: uppercase;
letter-spacing: 0.14em; font-size: var(--t-xs);
transition: color var(--d-1) var(--ease-out);
}
.site-nav__links a:hover { color: var(--ice); }
.site-nav__blog {
color: var(--red-2); text-decoration: none; text-transform: uppercase;
letter-spacing: 0.14em; font-size: var(--t-xs); white-space: nowrap;
border: 1px solid var(--red); padding: var(--s-1) var(--s-2);
box-shadow: inset 0 0 12px rgba(212,20,11,0.18);
transition: background var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out);
}
.site-nav__blog:hover { background: var(--red); color: #fff; }
/* ---------------- Hero ---------------- */
.hero {
position: relative; overflow: hidden;
text-align: center;
padding: var(--s-6) var(--s-3) var(--s-7);
}
/* The hero holds still while the rest of the page slides over it. */
/* The hero holds once its bottom reaches the viewport floor (JS measures
--hero-top = viewport − hero height), so a tall poster hero is seen in full. */
html.js .hero { position: sticky; top: var(--hero-top, 0px); z-index: 0; }
.stage {
position: relative; z-index: 1;
background: linear-gradient(180deg, #050B18 0, var(--ink) 640px);
box-shadow: 0 -24px 60px rgba(0,0,0,0.75);
}
.stage::before {
content: ""; position: absolute; inset: 0 0 auto; height: 1px;
background: linear-gradient(90deg, transparent, var(--steel-2) 30%, var(--ice) 50%, var(--steel-2) 70%, transparent);
}
/* Searchlights sweeping the night sky — the future-war skyline. */
.hero::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
conic-gradient(from 168deg at 18% 120%, transparent 0deg, rgba(169,198,232,0.10) 4deg, transparent 9deg),
conic-gradient(from 188deg at 84% 120%, transparent 0deg, rgba(169,198,232,0.08) 5deg, transparent 10deg);
transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: no-preference) {
.hero::after { animation: sweep 14s var(--ease-cine) infinite alternate; }
}
@keyframes sweep {
0% { transform: skewX(-6deg); opacity: 0.7; }
100% { transform: skewX(6deg); opacity: 1; }
}
.hero__kicker {
position: relative; z-index: 1;
font-family: var(--font-hud); font-size: clamp(18px, 1.2vw + 12px, 24px);
letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-2);
text-shadow: var(--hud-glow);
margin-bottom: var(--s-4);
/* HUD label plate: keeps the red legible over the blue haze (>= 4.5:1). */
display: inline-block; padding: 2px 10px; background: rgba(2,4,10,0.72);
}
/* Type-on: a hidden copy reserves the full width so typing never moves anything;
the cursor rides the typed text. */
.hero__kicker .ghost { visibility: hidden; }
.hero__kicker .typed { position: absolute; left: 10px; top: 2px; white-space: nowrap; }
.hero__kicker.has-typed::after { content: none; }
.hero__kicker:not(.has-typed)::after, .hero__kicker .typed::after {
content: ""; display: inline-block; width: 0.55em; height: 0.9em;
margin-left: 0.2em; vertical-align: -0.1em; background: var(--red-2);
box-shadow: var(--hud-glow);
}
@media (prefers-reduced-motion: no-preference) {
.hero__kicker::after, .hero__kicker .typed::after { animation: blink 1.05s steps(1) 5; } /* stops within 5s+ (WCAG 2.2.2) */
}
@keyframes blink { 50% { opacity: 0; } }
.hero__name {
position: relative; z-index: 1;
font-family: var(--font-display); font-weight: 400;
font-size: var(--t-hero); line-height: 1.12; letter-spacing: 0.02em;
text-transform: uppercase;
background: var(--metal);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--chrome);
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(111,150,196,0.25));
text-wrap: balance;
}
/* Poster stack: the title overlaps the foot of the portrait. */
.hero__visual + .hero__name { z-index: 2; margin-top: -0.62em; }
/* ---------------- Machine-code rain (canvas, rain.js) ----------------
Paints over the stage background but under every card, so it only shows in
the gutters; full strength beyond the content, almost clear behind the reading column. */
.rain { display: block; pointer-events: none; }
.rain--stage {
position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1;
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 700px), rgba(0,0,0,0.3) calc(50% - 560px), rgba(0,0,0,0.04) calc(50% - 360px), rgba(0,0,0,0.04) calc(50% + 360px), rgba(0,0,0,0.3) calc(50% + 560px), #000 calc(50% + 700px), #000 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 700px), rgba(0,0,0,0.3) calc(50% - 560px), rgba(0,0,0,0.04) calc(50% - 360px), rgba(0,0,0,0.04) calc(50% + 360px), rgba(0,0,0,0.3) calc(50% + 560px), #000 calc(50% + 700px), #000 100%);
}
/* Portrait width, shared with the ring so it scales with him: sized by height too, so the title
always lands above the fold (viewport − nav/kicker/title allowance, through the 836:1136 frame). */
.hero { --pw: clamp(220px, min(32vw, calc((100svh - 390px) * 0.736)), 430px); }
.hero__visual { position: relative; z-index: 1; width: fit-content; margin: 0 auto; }
/* ---------------- The files, adrift behind him ----------------
Key art drifting like a screensaver: orbit.js bounces each card off the hero's edges,
the other cards, the portrait and every block of words. Hidden until placed, and on
screens too narrow to leave room beside him. */
.hero__orbit {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
perspective: 1200px;
opacity: 0; transition: opacity 1.6s var(--ease-out);
}
.hero__orbit.is-on { opacity: 1; }
.orbit__card {
position: absolute; left: 0; top: 0; width: 140px; height: 140px;
border-radius: 6px; overflow: hidden; background: var(--ink-2);
box-shadow: 0 28px 50px -18px rgba(0,0,0,0.85), 0 0 0 1px rgba(169,198,232,0.10);
opacity: 0.72; will-change: transform;
}
.orbit__card img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.82); }
.orbit__card::after { /* a faint top light, as if lit by the searchlights above */
content: ""; position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(180deg, rgba(169,198,232,0.10), transparent 38%, rgba(2,4,10,0.35));
}
html:not(.js) .hero__orbit { display: none; }
@media (max-width: 999px) { .hero__orbit { display: none; } }
/* ---------------- Hero portrait (1984 one-sheet) ---------------- */
.hero__portrait {
position: relative; z-index: 1;
width: var(--pw); /* --pw on .hero */ margin: 0 auto;
aspect-ratio: 836 / 1136;
/* Feather the frame into the night: hard fade at the foot for the title. */
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 62%, transparent 97%),
linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 62%, transparent 97%),
linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
mask-composite: intersect;
translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 6px);
transition: translate 0.8s var(--ease-out);
will-change: transform; /* own layer: beside the 3D orbit, Chrome otherwise drops the masked portrait */
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Scanlines, and the machine's red vision on hover. */
.hero__portrait::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,0.28) 2px 3px),
rgba(255,59,47,0);
mix-blend-mode: normal; transition: background-color var(--d-2) var(--ease-out);
}
.hero__portrait:hover::after { background-color: rgba(212,20,11,0.38); mix-blend-mode: hard-light; }
/* Target lock on the face (face centre ≈ 45.5% / 49% of the frame). */
.hero__target {
position: absolute; left: 38.5%; top: 43.2%; width: 14%; aspect-ratio: 1; z-index: 2;
background:
linear-gradient(var(--red-2), var(--red-2)) top left / 30% 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top left / 2px 30% no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top right / 30% 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top right / 2px 30% no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom left / 30% 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom left / 2px 30% no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 30% 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 2px 30% no-repeat;
filter: drop-shadow(0 0 4px rgba(255,59,47,0.8));
}
.hero__target-label {
position: absolute; left: calc(100% + 8px); top: -4px; white-space: nowrap;
font-family: var(--font-hud); font-size: clamp(13px, 0.6vw + 9px, 17px);
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--red-2); text-shadow: var(--hud-glow);
background: rgba(2,4,10,0.9); padding: 0 6px; /* solid plate: >= 4.5:1 over any part of the frame */
}
@media (prefers-reduced-motion: no-preference) {
.hero__target { animation: target-lock 1.4s var(--ease-out) 0.6s both; }
.hero__target-label { animation: blink-label 1.2s steps(1) 1.6s both; }
}
@keyframes target-lock {
0% { transform: scale(2.6); opacity: 0; }
60% { transform: scale(0.92); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes blink-label { 0% { opacity: 0; } 20% { opacity: 1; } 40% { opacity: 0; } 60%, 100% { opacity: 1; } }
@media (max-width: 760px) {
.hero__portrait { width: min(78vw, 360px); }
.hero__name { font-size: clamp(40px, 12vw, 56px); }
.hero__target-label { display: none; }
}
/* The logo's horizon flare: one hot line of light across the metal. */
.hero__flare {
position: relative; z-index: 1;
height: 2px; width: min(820px, 86%); margin: var(--s-3) auto 0;
background: linear-gradient(90deg, transparent, rgba(169,198,232,0.6) 30%, #fff 50%, rgba(169,198,232,0.6) 70%, transparent);
box-shadow: 0 0 14px rgba(169,198,232,0.8), 0 0 40px rgba(111,150,196,0.6);
}
@media (prefers-reduced-motion: no-preference) {
.hero__flare { animation: flare var(--d-3) var(--ease-out) 1.6s both; }
}
@keyframes flare { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
/* Once the decode has split the name into glyphs, the metal lives on each
glyph; painting it on the h1 as well ghosts the letters. Keyed on the
glyphs existing, so a still (reduced-motion / motion-off) load keeps it. */
.hero__name:has(.ciph-char) { background: none; }
/* Decode: glyphs cycle in HUD red, then lock to chrome. */
.ciph-word { white-space: nowrap; }
.ciph-char { display: inline-block; min-width: 0.3ch;
background: var(--metal); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; }
.ciph-char:not(.is-locked):not([data-keep="1"]) {
background: none; -webkit-text-fill-color: var(--red-2); color: var(--red-2);
text-shadow: var(--hud-glow);
}
.ciph-char.is-locked { animation: ciph-lock var(--d-2) var(--ease-out); }
@keyframes ciph-lock {
0% { filter: drop-shadow(0 0 12px rgba(255,59,47,0.9)); }
100% { filter: none; }
}
.hero__role {
position: relative; z-index: 1;
font-family: var(--font-type);
font-size: var(--t-sm); letter-spacing: 0.26em; text-transform: uppercase;
color: var(--ice); margin-top: var(--s-3);
}
.hero__role em { white-space: nowrap; }
.hero__quote {
position: relative; z-index: 1;
font-style: italic; font-size: var(--t-xl); line-height: 1.4; color: var(--paper);
max-width: 720px; margin: var(--s-5) auto 0; text-wrap: balance;
}
.hero__quote-source {
display: block; font-style: normal;
font-family: var(--font-type); font-size: var(--t-xs);
letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-2);
margin-top: var(--s-2);
}
/* ---------------- Latest project: Get Huge ---------------- */
.feature { padding-block: var(--s-6); overflow-x: clip; } /* the pre-reveal tilt must not widen the page (WebKit panned 22px at 390) */
.feature__card {
position: relative;
border: 1px solid var(--rule);
border-top: 2px solid var(--red);
background: var(--ink-2);
box-shadow: inset 0 1px 0 rgba(169,198,232,0.12), var(--shadow-2);
overflow: hidden;
}
/* The showcase: Hulu's still edge to edge at 16:9 (fixed, so the face lock holds),
graded into the night on the right where the title block sits. */
.feature__stage { position: relative; isolation: isolate; }
.feature__frame { position: relative; aspect-ratio: 16 / 9; }
.feature__art, .feature__art img { display: block; width: 100%; height: 100%; }
.feature__art img { object-fit: cover; filter: saturate(0.85) contrast(1.06); }
.feature__frame::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,0.22) 2px 3px),
linear-gradient(90deg, rgba(2,4,10,0) 30%, rgba(2,4,10,0.72) 54%, rgba(2,4,10,0.94) 70%, var(--ink-2) 100%),
linear-gradient(0deg, var(--ink-2) 0, rgba(7,16,31,0) 26%),
linear-gradient(180deg, rgba(2,4,10,0.55) 0, rgba(2,4,10,0) 22%);
}
/* Target lock on the face (face centre ≈ 43.5% / 24% of the still). */
.feature__target {
position: absolute; left: 37%; top: 13.7%; width: 12.1%; aspect-ratio: 1; z-index: 2;
background:
linear-gradient(var(--red-2), var(--red-2)) top left / 30% 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top left / 2px 30% no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top right / 30% 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top right / 2px 30% no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom left / 30% 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom left / 2px 30% no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 30% 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 2px 30% no-repeat;
}
.feature__lock {
position: absolute; left: 37%; top: calc(13.7% - 28px); z-index: 2;
font-family: var(--font-hud); font-size: 16px; letter-spacing: 0.12em; line-height: 1;
text-transform: uppercase; color: var(--red-2); text-shadow: var(--hud-glow);
background: rgba(2,4,10,0.85); padding: 3px 6px;
}
@media (max-width: 600px) { .feature__lock { display: none; } }
.feature__title {
position: absolute; z-index: 3; right: 5%; top: 50%; translate: 0 -50%;
width: 44%; text-align: left;
}
.feature__title .feature__kicker { margin-bottom: var(--s-2); }
.feature__title .feature__nameplate { font-size: clamp(34px, 4.4vw, 62px); white-space: nowrap; }
.feature__title .feature__subtitle { font-size: clamp(13px, 0.9vw + 6px, 18px); margin-top: var(--s-1); }
.feature__title .feature__actions { justify-content: flex-start; margin-top: var(--s-4); }
.feature__badges { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }
.feature__badge {
font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.16em;
text-transform: uppercase; color: var(--chrome);
border: 1px solid rgba(169,198,232,0.4); background: rgba(2,4,10,0.6); padding: 4px 10px;
}
.feature__badge--red { color: #fff; background: var(--red); border-color: var(--red); }
.feature__body { text-align: center; padding: var(--s-2) var(--s-3) var(--s-6); }
@media (max-width: 900px) {
/* Phone: the still on top, the title block below it in the dark. */
.feature__frame::after {
background:
repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,0.22) 2px 3px),
linear-gradient(0deg, var(--ink-2) 0, rgba(7,16,31,0) 40%);
}
.feature__title { position: relative; right: auto; top: auto; translate: none; width: auto;
padding: 0 var(--s-3); margin-top: calc(-1 * var(--s-4)); text-align: center; }
.feature__badges, .feature__title .feature__actions { justify-content: center; }
}
/* HUD target brackets on the card corners. */
.feature__card::before {
content: ""; position: absolute; inset: var(--s-2); z-index: 4; pointer-events: none;
background:
linear-gradient(var(--red-2), var(--red-2)) top left / 26px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top left / 2px 26px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top right / 26px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top right / 2px 26px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom left / 26px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom left / 2px 26px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 26px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 2px 26px no-repeat;
opacity: 0.7;
}
.feature__kicker {
font-family: var(--font-hud); font-size: clamp(17px, 0.8vw + 13px, 21px);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--red-2); text-shadow: var(--hud-glow);
margin-bottom: var(--s-3);
}
.feature__nameplate {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(40px, 8vw, 112px); line-height: 1.05;
text-transform: uppercase; letter-spacing: 0.02em;
background: var(--metal);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--chrome);
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(111,150,196,0.25));
}
.feature__subtitle {
font-family: var(--font-display);
font-size: clamp(14px, 1.6vw + 8px, 26px); letter-spacing: 0.2em;
text-transform: uppercase; color: var(--ice);
margin-top: var(--s-2);
}
.feature__folio {
display: flex; justify-content: center; gap: var(--s-1) var(--s-2); flex-wrap: wrap;
margin-top: var(--s-4); padding-top: var(--s-2);
border-top: 1px solid var(--rule);
width: fit-content; max-width: 100%; margin-inline: auto;
font-family: var(--font-type); font-size: var(--t-xs);
letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel-2);
}
.feature__folio span:first-child { color: var(--chrome); }
.feature__folio .sep { color: var(--red-2); }
@media (max-width: 560px) { .feature__folio .sep { display: none; } .feature__folio { flex-direction: column; align-items: center; } }
.feature__subtitle, .type-card__sub { text-wrap: balance; }
.feature__pitch {
font-size: var(--t-lg); color: var(--paper);
max-width: 680px; margin: var(--s-4) auto 0; line-height: 1.6;
}
.feature__credits {
max-width: 680px; margin: var(--s-3) auto 0;
font-size: var(--t-sm); color: var(--paper-mute); line-height: 1.7;
}
.feature__credits strong {
font-family: var(--font-type); font-weight: 400; font-size: var(--t-xs);
letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice);
}
.feature__actions {
display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap;
margin-top: var(--s-5);
}
.btn {
display: inline-block;
font-family: var(--font-type);
font-size: var(--t-sm); letter-spacing: 0.18em; text-transform: uppercase;
text-decoration: none;
padding: var(--s-2) var(--s-4);
transition: background var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out),
border-color var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out);
}
.btn--red { background: var(--red); color: #fff; box-shadow: 0 0 18px rgba(212,20,11,0.35); }
.btn--red:hover { background: var(--red-2); color: #fff; box-shadow: 0 0 28px rgba(255,59,47,0.55); }
.btn--ghost { border: 1px solid var(--steel); color: var(--ice); }
.btn--ghost:hover { border-color: var(--ice); color: #fff; }
/* ---------------- The Dossier ---------------- */
.dossier { display: grid; gap: var(--s-6); }
.case-card {
display: grid;
grid-template-columns: 300px 1fr;
gap: var(--s-5);
border: 1px solid var(--rule);
background: linear-gradient(180deg, #0A1628 0%, var(--ink-2) 60%);
padding: var(--s-4);
box-shadow: inset 0 1px 0 rgba(169,198,232,0.08), var(--shadow-2);
}
.case-card__art { position: relative; overflow: hidden; }
/* Key art printed in the film's blue night grade… */
.case-card__art img {
width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(1.9) brightness(0.82) contrast(1.15);
transition: filter var(--d-2) var(--ease-cine);
}
/* …and seen through the machine's red vision on hover. */
.case-card__art::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(var(--red-2), var(--red-2)) top left / 22px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top left / 2px 22px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top right / 22px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top right / 2px 22px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 22px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 2px 22px no-repeat,
repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,0.35) 2px 3px);
opacity: 0; transition: opacity var(--d-1) var(--ease-out);
}
.case-card:hover .case-card__art img { filter: grayscale(1) contrast(1.2) brightness(0.85); }
.case-card__art picture { position: relative; }
.case-card__art picture::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: var(--red); mix-blend-mode: color; opacity: 0; transition: opacity var(--d-2) var(--ease-cine);
}
.case-card:hover .case-card__art picture::before { opacity: 1; }
.case-card:hover .case-card__art::after { opacity: 1; }
.case-card__exhibit {
position: absolute; bottom: var(--s-1); left: var(--s-1); z-index: 1;
font-family: var(--font-hud); font-size: 17px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--red-2); text-shadow: var(--hud-glow);
background: rgba(2,4,10,0.82);
padding: 0 var(--s-1);
}
.case-card__body { min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.case-card__meta {
display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
font-family: var(--font-type); font-size: var(--t-xs);
letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-mute);
}
.case-card__meta .case-tab {
color: var(--ice); background: var(--ink);
border: 1px solid var(--rule); border-left: 3px solid var(--red);
padding: var(--s-half) var(--s-2); white-space: nowrap;
}
.case-card__title {
font-family: var(--font-display); font-weight: 400;
font-size: var(--t-xl); letter-spacing: 0.04em; text-transform: uppercase;
line-height: 1.2; color: var(--chrome);
}
.case-card__logline { font-style: italic; font-size: var(--t-lg); line-height: 1.5; }
.case-card__facts {
font-size: var(--t-sm); color: var(--paper-mute); line-height: 1.6;
}
.case-card__facts strong {
font-family: var(--font-type); font-weight: 400; font-size: var(--t-xs);
letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice);
}
.case-card__links {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--s-1) var(--s-3);
margin-top: var(--s-1);
font-family: var(--font-type);
font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
}
.case-card__links .mani { color: var(--steel); }
.case-card__links a { color: var(--red-2); text-decoration: none; }
.case-card__links a:hover { color: #fff; text-shadow: var(--hud-glow); }
.case-card__press {
border-left: 2px solid var(--red);
padding-left: var(--s-2);
font-style: italic; font-size: var(--t-base); color: var(--paper);
}
.case-card__press cite {
display: block; font-style: normal;
font-family: var(--font-type); font-size: var(--t-xs);
letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-2);
margin-top: var(--s-1);
}
@media (max-width: 860px) {
.case-card { grid-template-columns: 1fr; padding: var(--s-3); gap: var(--s-3); }
.case-card__art img { aspect-ratio: 16 / 9; }
}
/* Slate rows — announced / development entries without key art. */
.slate { margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.slate__row {
display: grid; grid-template-columns: auto 1fr auto;
align-items: baseline; gap: var(--s-3);
padding: var(--s-3) 0; border-bottom: 1px solid var(--rule);
}
.slate__tab {
font-family: var(--font-hud); font-size: 19px;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-2);
text-shadow: var(--hud-glow); white-space: nowrap;
}
.slate__title { font-family: var(--font-body); font-weight: 600; font-size: var(--t-base); color: var(--chrome); }
.slate__title em { font-style: normal; }
.slate__desc { color: var(--paper-mute); font-size: var(--t-sm); font-weight: 400; }
.slate__meta {
font-family: var(--font-type); font-size: var(--t-xs);
letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-2);
white-space: nowrap;
}
@media (max-width: 700px) {
.slate__row { grid-template-columns: 1fr; gap: var(--s-1); }
.slate__meta { white-space: normal; }
}
/* ---------------- Press ---------------- */
.press-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
}
.press-quote {
border-top: 2px solid var(--steel);
padding-top: var(--s-3);
position: relative;
}
.press-quote::before {
content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 2px;
background: var(--red-2); box-shadow: var(--hud-glow);
}
.press-quote p { font-style: italic; font-size: var(--t-lg); line-height: 1.5; }
.press-quote cite {
display: block; font-style: normal;
font-family: var(--font-type); font-size: var(--t-xs);
letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-2);
margin-top: var(--s-2);
}
@media (max-width: 900px) { .press-grid { grid-template-columns: 1fr; } }
/* ---------------- Commissioners rail ---------------- */
.commissioners {
padding: var(--s-6) 0; text-align: center;
border-block: 1px solid var(--rule);
background: linear-gradient(180deg, transparent, rgba(11,28,54,0.4), transparent);
}
.wordmarks { margin-top: var(--s-3); overflow: hidden; }
.wordmarks__track {
display: flex; flex-wrap: wrap; justify-content: center;
gap: var(--s-2) var(--s-5); padding-inline: var(--s-3);
}
.wordmarks__set { display: contents; }
.wordmarks__set[aria-hidden] { display: none; }
.wordmarks span {
font-family: var(--font-display); font-size: var(--t-base);
letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-2);
white-space: nowrap;
}
.wordmarks span::after {
content: ""; display: inline-block; width: 5px; height: 5px;
margin-left: var(--s-5); vertical-align: middle;
background: var(--red-2); box-shadow: var(--hud-glow);
}
/* ---------------- The writer ---------------- */
.writer { max-width: var(--measure); margin-inline: auto; }
.writer p { line-height: 1.7; }
.writer p + p { margin-top: var(--s-3); }
.writer__h { font-family: var(--font-display); font-weight: 400; font-size: var(--t-lg); text-transform: uppercase; letter-spacing: 0.08em; color: var(--chrome); margin-top: var(--s-5); }
.writer__h + p { margin-top: var(--s-2); }
.writer__note { color: var(--paper-mute); font-size: var(--t-sm); }
.writer code { font-family: var(--font-type); font-size: 0.95em; color: var(--ice); }
html:not(.js) [data-analytics-toggle] { display: none; }
.colophon__privacy { display: inline-block; padding-block: 5px; margin-left: var(--s-2); color: var(--paper-mute); }
.colophon__privacy:hover { color: var(--red-2); }
.writer .lead-in::first-letter {
font-family: var(--font-display);
font-size: 2.8em; line-height: 0.9; float: left;
padding: 0.06em 0.14em 0 0; color: var(--red-2);
text-shadow: var(--hud-glow);
}
.writer__collab {
margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule);
font-size: var(--t-sm); color: var(--paper-mute); line-height: 1.7;
}
.writer__collab strong {
font-family: var(--font-type); font-weight: 400; font-size: var(--t-xs);
letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice);
}
/* ---------------- About: the bio with two photos, in colour ----------------
Off the HUD on purpose: the one place the site shows him as he is. Text and photo
alternate sides; a thin red frame sits offset behind each photo, the only brand mark. */
.about-bio { max-width: 1040px; margin-inline: auto; }
.about-row {
display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: var(--s-6); align-items: center;
}
.about-row + .about-row { margin-top: var(--s-7); }
.about-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.about-row .writer { max-width: none; margin: 0; }
.about-bio .writer__collab { max-width: none; }
.about-photo { position: relative; isolation: isolate; margin: 0; }
.about-photo::before {
content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 3 / 4; translate: 12px 12px; z-index: -1;
border: 1px solid var(--red); opacity: 0.6;
}
.about-photo--b::before { translate: -12px 12px; }
.about-photo img {
display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
border-radius: 3px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.9);
}
.about-photo figcaption {
margin-top: var(--s-3);
font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.16em;
text-transform: uppercase; color: var(--steel-2);
}
@media (max-width: 860px) {
/* Stacked: photo first in the opening row, after the text in the second. */
.about-row, .about-row--flip { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.about-photo { width: min(86%, 360px); margin-inline: auto; }
}
/* ---------------- Colophon ---------------- */
/* A steel rule with one red eye glowing at its centre. */
.cutoff-rule {
position: relative; height: 1px; margin-bottom: var(--s-5);
background: linear-gradient(90deg, transparent, var(--steel) 20%, var(--steel) 80%, transparent);
}
.cutoff-rule::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%);
background: radial-gradient(circle, #fff 0%, var(--red-2) 35%, var(--red) 60%, transparent 72%);
box-shadow: 0 0 12px var(--red-2), 0 0 32px rgba(212,20,11,0.7);
}
@media (prefers-reduced-motion: no-preference) {
.cutoff-rule::after { animation: eye 2.4s ease-in-out 3; }
}
@keyframes eye { 50% { opacity: 0.55; } }
.colophon__base {
display: flex; align-items: center; justify-content: space-between;
margin-top: var(--s-5);
font-family: var(--font-type); font-size: var(--t-xs);
letter-spacing: 0.08em; color: var(--steel-2);
}
.colophon__mark { font-family: var(--font-type); font-size: var(--t-base); color: var(--red-2); text-shadow: var(--hud-glow); }
/* ---------------- Motion safety ---------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* =========================================================================
MULTI-PAGE COMPONENTS — nav menu, inner-page heads, tiles, project files,
press kit, contact, footer grid.
------------------------------------------------------------------------- */
.skip {
position: absolute; left: var(--s-2); top: -60px; z-index: 3000;
background: var(--red); color: #fff; padding: var(--s-1) var(--s-2);
font-family: var(--font-type); text-decoration: none;
}
.skip:focus, .skip:focus-visible { top: var(--s-2); }
.sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Targets: every link and control at least 24px tall (WCAG 2.5.8). */
.site-nav__brand, .site-nav__links a, .crumbs a, .case-card__links a, .timeline__what a,
.press-contacts a, .contact-card__email, .colophon__col a { display: inline-block; padding-block: 5px; }
.colophon__col { gap: 2px; }
/* Motion toggle (nav) and marquee pause. */
.motion-toggle, .wordmarks__pause {
font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--paper-mute); padding: 5px 0; min-height: 24px;
}
.motion-toggle:hover, .wordmarks__pause:hover { color: var(--ice); }
.motion-toggle::before { content: "■ "; content: "■ " / ""; color: var(--red-2); } /* glyph kept out of the accessible name */
.motion-toggle[aria-pressed="true"]::before { content: "▶ "; content: "▶ " / ""; }
.wordmarks__pause { display: block; margin: var(--s-2) auto 0; border: 1px solid var(--rule); padding: 5px var(--s-2); }
@media (prefers-reduced-motion: reduce) { .motion-toggle, .wordmarks__pause { display: none; } }
/* Without JS these controls can't do anything, so they don't exist (html.js is set by the head script). */
html:not(.js) .motion-toggle, html:not(.js) .wordmarks__pause, html:not(.js) .copy-btn { display: none; }
.site-nav__links a[aria-current="page"] { color: var(--chrome); box-shadow: 0 2px 0 var(--red-2); }
.site-nav__toggle {
display: none;
font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ice);
border: 1px solid var(--steel); padding: var(--s-1) var(--s-2);
}
@media (max-width: 760px) {
html:not(.js) .site-nav { position: static; } /* the wrapped no-JS nav is taller than scroll-padding: let it scroll away */
.site-nav__row { flex-wrap: wrap; }
.site-nav__links { display: flex; order: 5; width: 100%; gap: var(--s-2) var(--s-3); }
html.js .site-nav__toggle { display: inline-block; }
html.js .site-nav__links { display: none; }
html.js .site-nav.is-open .site-nav__links {
display: flex; flex-direction: column; gap: 0;
border-top: 1px solid var(--rule); padding-top: var(--s-1);
}
html.js .site-nav.is-open .site-nav__links a { padding: var(--s-2) 0; font-size: var(--t-sm); border-bottom: 1px solid var(--rule); }
/* Phone: the blog button folds into the menu so brand + Menu share one row. */
html.js .site-nav__blog { display: none; }
html.js .site-nav__toggle { margin-left: auto; }
.site-nav__brand { font-size: 11px; letter-spacing: 0.12em; }
}
.site-nav__links .site-nav__mblog { display: none; } /* phone-menu copy of the blog button */
@media (max-width: 760px) { html.js .site-nav .site-nav__mblog { display: block; color: var(--red-2); } }
/* Inner pages start the stage at the top; no sliding hero behind them. */
.stage--page { box-shadow: none; }
.stage--page::before { display: none; }
.page-head {
position: relative; text-align: center;
padding-top: clamp(64px, 10vw, 128px); padding-bottom: var(--s-6);
}
.page-head::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(40% 60% at 50% 40%, rgba(111,150,196,0.22), transparent 70%);
}
.page-head__title {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(36px, 7vw, 92px); line-height: 1.08;
text-transform: uppercase; letter-spacing: 0.02em; margin-top: var(--s-2);
background: var(--metal);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--chrome);
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(111,150,196,0.25));
}
.page-head__lede {
max-width: 620px; margin: var(--s-3) auto 0;
font-size: var(--t-lg); color: var(--paper-mute); text-wrap: balance;
}
.section--tight { padding-top: 0; }
.section__note { color: var(--paper-mute); font-size: var(--t-sm); margin-top: var(--s-4); text-align: center; }
.section__more { text-align: center; margin-top: var(--s-5); }
.writer .section__more { text-align: left; }
/* ---------------- Project tiles (home) ---------------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.tile {
position: relative; display: block; text-decoration: none; color: var(--paper);
border: 1px solid var(--rule); background: var(--ink-2);
box-shadow: inset 0 1px 0 rgba(169,198,232,0.08), var(--shadow-2);
transition: border-color var(--d-1) var(--ease-out), transform var(--d-2) var(--ease-out), translate var(--d-2) var(--ease-out);
padding-top: 34px; /* a file-tab bar: FILE nn / badge sit above the key art, never over its logos */
}
.tile:hover { color: var(--paper); border-color: var(--steel); translate: 0 -4px; }
.tile__art { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.tile__art img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(1.9) brightness(0.82) contrast(1.15);
transition: filter var(--d-2) var(--ease-cine), transform var(--d-3) var(--ease-out);
}
.tile:hover .tile__art img {
filter: grayscale(1) brightness(0.95) contrast(1.3);
transform: scale(1.05);
}
.tile__art::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: var(--red); mix-blend-mode: color; opacity: 0; transition: opacity var(--d-2) var(--ease-cine);
}
.tile:hover .tile__art::before { opacity: 1; }
.tile__art::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,0.3) 2px 3px);
opacity: 0; transition: opacity var(--d-1);
}
.tile:hover .tile__art::after { opacity: 1; }
.tile__file, .tile__badge {
position: absolute; top: 7px; z-index: 1;
font-family: var(--font-hud); font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--red-2); text-shadow: var(--hud-glow);
background: rgba(2,4,10,0.95); padding: 0 var(--s-1);
}
.tile__file { left: var(--s-1); }
.tile__badge { right: var(--s-1); color: var(--ice); text-shadow: none; }
.tile__body { display: grid; gap: 4px; padding: var(--s-3); border-top: 2px solid var(--rule); }
.tile:hover .tile__body { border-top-color: var(--red); }
.tile__meta, .tile__role {
font-family: var(--font-type); font-size: var(--t-xs);
letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-2);
}
.tile__title {
font-family: var(--font-display); font-size: var(--t-lg);
text-transform: uppercase; letter-spacing: 0.04em; color: var(--chrome);
}
/* Display words (Michroma is very wide) wrap rather than overflow at 320px
or under user text-spacing overrides (WCAG 1.4.10 / 1.4.12). */
.page-head__title, .section__title, .file__title, .cta-band__title, .tile__title,
.feature__nameplate, .feature__subtitle, .case-card__title, .type-card__title, .type-card__sub,
.hero__name, .colophon__name, .contact-card__email, .press-contacts a {
overflow-wrap: anywhere; hyphens: auto;
}
/* Typographic title card where licensed key art isn't available yet. */
.tile__art--type, .case-card__art--type, .file__art--type {
display: flex; flex-direction: column; justify-content: center; align-items: center;
gap: var(--s-1); text-align: center; aspect-ratio: 1 / 1; padding: var(--s-3);
background:
repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,0.35) 2px 3px),
radial-gradient(70% 55% at 50% 60%, rgba(212,20,11,0.35), transparent 70%),
linear-gradient(180deg, #0B1C36, #02040A);
border: 1px solid var(--rule);
overflow: visible; /* aspect-ratio is a minimum: the card grows with its text */
}
.type-card__top {
font-family: var(--font-hud); font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--red-2); text-shadow: var(--hud-glow);
}
.type-card__title {
font-family: var(--font-display); font-size: clamp(40px, 7vw, 76px); line-height: 1.02;
text-transform: uppercase;
background: var(--metal); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--chrome);
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6));
}
.type-card__sub {
font-family: var(--font-display); font-size: clamp(10px, 1vw + 6px, 14px);
letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice);
}
.case-card__art-link { display: block; align-self: start; text-decoration: none; } /* no link underline across the title card */
.case-card__title a { color: inherit; text-decoration: none; }
.case-card__title a:hover { color: #fff; }
.case-card__art--type .type-card__title { font-size: clamp(36px, 4vw, 56px); }
/* ---------------- CTA band ---------------- */
.cta-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s-4); padding-block: var(--s-6); }
.cta-band__item {
display: grid; gap: var(--s-1); text-decoration: none; color: var(--paper);
padding: var(--s-5) var(--s-4); border: 1px solid var(--rule); border-left: 3px solid var(--red);
background: linear-gradient(90deg, rgba(11,28,54,0.6), transparent);
transition: border-color var(--d-1), background var(--d-1);
}
.cta-band__item:hover { color: var(--paper); border-color: var(--steel); background: linear-gradient(90deg, rgba(30,62,102,0.55), transparent); }
.cta-band__title {
font-family: var(--font-display); font-size: var(--t-2xl); text-transform: uppercase; color: var(--chrome);
}
.cta-band__title { hyphens: manual; overflow-wrap: break-word; } /* break at the authored soft hyphen (Represen-tation); mid-word only if even that overflows */
.cta-band__title::after { content: " →"; color: var(--red-2); }
.cta-band__note { color: var(--paper-mute); }
/* ---------------- Project file pages ---------------- */
.file { padding-top: var(--s-5); padding-bottom: var(--s-6); }
.crumbs { font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-2); }
.crumbs a { color: var(--ice); text-decoration: none; }
.file__head { display: grid; grid-template-columns: minmax(240px, 400px) 1fr; gap: var(--s-6); align-items: center; margin-top: var(--s-4); }
.file__art { position: relative; border: 1px solid var(--rule); box-shadow: var(--shadow-2); overflow: hidden; }
.file__art img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.file__art::after {
content: ""; position: absolute; inset: var(--s-1); pointer-events: none;
background:
linear-gradient(var(--red-2), var(--red-2)) top left / 22px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top left / 2px 22px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 22px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 2px 22px no-repeat;
}
.file__title-sub { display: block; font-size: 0.42em; letter-spacing: 0.18em; margin-top: 0.35em; }
.file__title {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(30px, 4.6vw, 64px); line-height: 1.1; text-transform: uppercase;
margin-top: var(--s-2);
background: var(--metal); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--chrome);
filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6));
}
.file__status {
font-family: var(--font-hud); font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--red-2); text-shadow: var(--hud-glow); margin-top: var(--s-2);
}
.file__logline { font-style: italic; font-size: var(--t-xl); line-height: 1.45; margin-top: var(--s-3); }
.file__role { font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-2); margin-top: var(--s-3); }
.file__role span { color: var(--chrome); }
.file__grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--s-6); margin-top: var(--s-7); }
.file__main > p { font-size: var(--t-lg); line-height: 1.7; max-width: var(--measure); }
.file__main > p + p { margin-top: var(--s-3); }
.file__side { border-left: 1px solid var(--rule); padding-left: var(--s-4); align-self: start; }
.file-block { margin-top: var(--s-6); }
.file-block__title {
font-family: var(--font-type); font-size: var(--t-xs); font-weight: 400;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--red-2);
margin-bottom: var(--s-2);
}
.file-block__title::before { content: "> "; }
.file__side .file-block__title + .credits { margin-bottom: var(--s-5); }
.credits { display: grid; gap: var(--s-2); }
.credits div { border-bottom: 1px solid var(--rule); padding-bottom: var(--s-2); }
.credits dt { font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-2); }
.credits dd { margin: 2px 0 0; color: var(--paper); }
.file__links { display: grid; gap: var(--s-2); }
.file__links .btn { text-align: center; }
.record { display: grid; gap: var(--s-2); }
.record li { position: relative; padding-left: var(--s-4); font-size: var(--t-base); }
.record li::before {
content: ""; position: absolute; left: 0; top: 0.65em; width: 12px; height: 2px;
background: var(--red-2); box-shadow: var(--hud-glow);
}
/* The pull quote: the original italic line on its red rule, with a faint wash,
a small HUD tag and a quiet signal under the source (it's audio: "for the ear"). */
.file-quote {
margin-top: var(--s-6); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);
border-left: 3px solid var(--red);
background: linear-gradient(90deg, rgba(212,20,11,0.08), transparent 70%);
}
.file-quote__tag {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-1);
font-family: var(--font-hud); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--red-2); text-shadow: var(--hud-glow);
}
.file-quote__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red-2); box-shadow: var(--hud-glow); }
.file-quote__text { font-style: italic; font-size: var(--t-2xl); line-height: 1.35; color: var(--chrome); }
.file-quote__text .nb { white-space: nowrap; } /* "mini-series" never splits at its hyphen */
.file-quote cite {
display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2);
font-style: normal; font-family: var(--font-type); font-size: var(--t-xs);
letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel-2);
}
.file-quote cite::before { content: ""; width: 24px; height: 1px; background: var(--red-2); }
.file-quote__wave {
display: block; width: 200px; max-width: 100%; height: 22px; margin-top: var(--s-2);
background: linear-gradient(90deg, var(--steel-2), var(--red-2));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='56' viewBox='0 0 320 56'%3E%3Crect x='0' y='23' width='3' height='10' rx='1.5'/%3E%3Crect x='8' y='14' width='3' height='28' rx='1.5'/%3E%3Crect x='16' y='14' width='3' height='27' rx='1.5'/%3E%3Crect x='24' y='20' width='3' height='15' rx='1.5'/%3E%3Crect x='32' y='16' width='3' height='23' rx='1.5'/%3E%3Crect x='40' y='14' width='3' height='27' rx='1.5'/%3E%3Crect x='48' y='18' width='3' height='20' rx='1.5'/%3E%3Crect x='56' y='17' width='3' height='22' rx='1.5'/%3E%3Crect x='64' y='18' width='3' height='21' rx='1.5'/%3E%3Crect x='72' y='20' width='3' height='16' rx='1.5'/%3E%3Crect x='80' y='15' width='3' height='26' rx='1.5'/%3E%3Crect x='88' y='13' width='3' height='30' rx='1.5'/%3E%3Crect x='96' y='14' width='3' height='29' rx='1.5'/%3E%3Crect x='104' y='17' width='3' height='22' rx='1.5'/%3E%3Crect x='112' y='20' width='3' height='15' rx='1.5'/%3E%3Crect x='120' y='19' width='3' height='18' rx='1.5'/%3E%3Crect x='128' y='14' width='3' height='28' rx='1.5'/%3E%3Crect x='136' y='12' width='3' height='32' rx='1.5'/%3E%3Crect x='144' y='10' width='3' height='36' rx='1.5'/%3E%3Crect x='152' y='16' width='3' height='24' rx='1.5'/%3E%3Crect x='160' y='23' width='3' height='10' rx='1.5'/%3E%3Crect x='168' y='18' width='3' height='20' rx='1.5'/%3E%3Crect x='176' y='14' width='3' height='28' rx='1.5'/%3E%3Crect x='184' y='11' width='3' height='34' rx='1.5'/%3E%3Crect x='192' y='8' width='3' height='39' rx='1.5'/%3E%3Crect x='200' y='16' width='3' height='24' rx='1.5'/%3E%3Crect x='208' y='21' width='3' height='14' rx='1.5'/%3E%3Crect x='216' y='18' width='3' height='20' rx='1.5'/%3E%3Crect x='224' y='16' width='3' height='25' rx='1.5'/%3E%3Crect x='232' y='10' width='3' height='35' rx='1.5'/%3E%3Crect x='240' y='9' width='3' height='38' rx='1.5'/%3E%3Crect x='248' y='18' width='3' height='21' rx='1.5'/%3E%3Crect x='256' y='20' width='3' height='17' rx='1.5'/%3E%3Crect x='264' y='18' width='3' height='20' rx='1.5'/%3E%3Crect x='272' y='18' width='3' height='19' rx='1.5'/%3E%3Crect x='280' y='12' width='3' height='33' rx='1.5'/%3E%3Crect x='288' y='12' width='3' height='33' rx='1.5'/%3E%3Crect x='296' y='20' width='3' height='16' rx='1.5'/%3E%3Crect x='304' y='18' width='3' height='20' rx='1.5'/%3E%3Crect x='312' y='16' width='3' height='23' rx='1.5'/%3E%3C/svg%3E") 0 50% / 126px 22px repeat-x;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='56' viewBox='0 0 320 56'%3E%3Crect x='0' y='23' width='3' height='10' rx='1.5'/%3E%3Crect x='8' y='14' width='3' height='28' rx='1.5'/%3E%3Crect x='16' y='14' width='3' height='27' rx='1.5'/%3E%3Crect x='24' y='20' width='3' height='15' rx='1.5'/%3E%3Crect x='32' y='16' width='3' height='23' rx='1.5'/%3E%3Crect x='40' y='14' width='3' height='27' rx='1.5'/%3E%3Crect x='48' y='18' width='3' height='20' rx='1.5'/%3E%3Crect x='56' y='17' width='3' height='22' rx='1.5'/%3E%3Crect x='64' y='18' width='3' height='21' rx='1.5'/%3E%3Crect x='72' y='20' width='3' height='16' rx='1.5'/%3E%3Crect x='80' y='15' width='3' height='26' rx='1.5'/%3E%3Crect x='88' y='13' width='3' height='30' rx='1.5'/%3E%3Crect x='96' y='14' width='3' height='29' rx='1.5'/%3E%3Crect x='104' y='17' width='3' height='22' rx='1.5'/%3E%3Crect x='112' y='20' width='3' height='15' rx='1.5'/%3E%3Crect x='120' y='19' width='3' height='18' rx='1.5'/%3E%3Crect x='128' y='14' width='3' height='28' rx='1.5'/%3E%3Crect x='136' y='12' width='3' height='32' rx='1.5'/%3E%3Crect x='144' y='10' width='3' height='36' rx='1.5'/%3E%3Crect x='152' y='16' width='3' height='24' rx='1.5'/%3E%3Crect x='160' y='23' width='3' height='10' rx='1.5'/%3E%3Crect x='168' y='18' width='3' height='20' rx='1.5'/%3E%3Crect x='176' y='14' width='3' height='28' rx='1.5'/%3E%3Crect x='184' y='11' width='3' height='34' rx='1.5'/%3E%3Crect x='192' y='8' width='3' height='39' rx='1.5'/%3E%3Crect x='200' y='16' width='3' height='24' rx='1.5'/%3E%3Crect x='208' y='21' width='3' height='14' rx='1.5'/%3E%3Crect x='216' y='18' width='3' height='20' rx='1.5'/%3E%3Crect x='224' y='16' width='3' height='25' rx='1.5'/%3E%3Crect x='232' y='10' width='3' height='35' rx='1.5'/%3E%3Crect x='240' y='9' width='3' height='38' rx='1.5'/%3E%3Crect x='248' y='18' width='3' height='21' rx='1.5'/%3E%3Crect x='256' y='20' width='3' height='17' rx='1.5'/%3E%3Crect x='264' y='18' width='3' height='20' rx='1.5'/%3E%3Crect x='272' y='18' width='3' height='19' rx='1.5'/%3E%3Crect x='280' y='12' width='3' height='33' rx='1.5'/%3E%3Crect x='288' y='12' width='3' height='33' rx='1.5'/%3E%3Crect x='296' y='20' width='3' height='16' rx='1.5'/%3E%3Crect x='304' y='18' width='3' height='20' rx='1.5'/%3E%3Crect x='312' y='16' width='3' height='23' rx='1.5'/%3E%3C/svg%3E") 0 50% / 126px 22px repeat-x;
opacity: 0.55;
}
@media (prefers-reduced-motion: no-preference) {
.file-quote__wave { animation: signal 9s linear infinite; }
}
@keyframes signal { to { -webkit-mask-position: -126px 50%; mask-position: -126px 50%; } }
.coverage { display: grid; gap: var(--s-1); }
.coverage a { display: block; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); color: var(--paper); text-decoration: none; }
.coverage a:hover { color: #fff; border-bottom-color: var(--red); }
.coverage__src { display: block; font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-2); }
.coverage--wide { max-width: 860px; margin-inline: auto; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3); align-items: center; margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.pager a { color: var(--chrome); text-decoration: none; font-family: var(--font-display); font-size: var(--t-base); text-transform: uppercase; }
.pager a:hover { color: #fff; }
.pager .kicker { display: block; font-size: var(--t-xs); margin-bottom: 4px; }
.pager .kicker::before { content: none; }
.pager__next { text-align: right; }
.pager__all { font-family: var(--font-type) !important; font-size: var(--t-xs) !important; letter-spacing: 0.16em; border: 1px solid var(--steel); padding: var(--s-1) var(--s-2); }
@media (max-width: 860px) {
.file__head, .file__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.file__art { max-width: 420px; }
.file__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.pager { grid-template-columns: 1fr 1fr; }
.pager__all { display: none; }
}
/* ---------------- About ---------------- */
.timeline { max-width: 860px; margin-inline: auto; display: grid; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.timeline__year { font-family: var(--font-hud); font-size: 22px; color: var(--red-2); text-shadow: var(--hud-glow); }
.timeline__what a { color: var(--chrome); text-decoration: none; font-weight: 600; }
.timeline__what a:hover { color: #fff; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 0; } }
.press-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .press-grid--four { grid-template-columns: minmax(0, 1fr); } }
/* ---------------- Press kit ---------------- */
.press-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-3); padding-bottom: var(--s-4); }
.factsheet { max-width: 900px; margin-inline: auto; display: grid; }
.factsheet div { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.factsheet dt { font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-2); padding-top: 3px; }
.factsheet dd { margin: 0; }
@media (max-width: 640px) { .factsheet div { grid-template-columns: 1fr; gap: 2px; } }
.bios { display: grid; gap: var(--s-4); max-width: 900px; margin-inline: auto; }
.bio-block { border: 1px solid var(--rule); background: var(--ink-2); padding: var(--s-4); }
.bio-block__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.bio-block__label { font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-2); }
.bio-block__label span { color: var(--steel-2); }
.bio-block__text { max-width: 62ch; } /* journalists read these whole: keep lines ≤ ~80 characters */
.bio-block__text p + p { margin-top: var(--s-2); }
.copy-btn {
font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ice); border: 1px solid var(--steel); padding: 6px var(--s-2);
}
.copy-btn:hover, .copy-btn.is-done { border-color: var(--red-2); color: #fff; }
.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: var(--s-3); }
.download { display: grid; gap: 4px; text-decoration: none; color: var(--paper); border: 1px solid var(--rule); background: var(--ink-2); padding: var(--s-1); }
.download:hover { border-color: var(--red); color: #fff; }
.download img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.download__title { font-family: var(--font-display); font-size: var(--t-sm); text-transform: uppercase; padding: var(--s-1) var(--s-1) 0; }
.download__meta { font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-2); padding: 0 var(--s-1) var(--s-1); }
.download__meta::before { content: "↓ "; color: var(--red-2); }
.press-contacts { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-6); text-align: center; }
.press-contacts .kicker { display: block; margin-bottom: var(--s-1); }
.press-contacts a { font-family: var(--font-display); font-size: var(--t-lg); color: var(--chrome); }
/* ---------------- Contact ---------------- */
.contact-grid, .reps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s-4); }
.contact-grid:has(> :only-child) { grid-template-columns: minmax(0, 560px); justify-content: center; } /* one inbox: centre it */
.contact-card, .rep { border: 1px solid var(--rule); border-top: 2px solid var(--red); background: var(--ink-2); padding: var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.rep span { color: var(--paper); }
.contact-card__email { font-family: var(--font-display); font-size: clamp(13px, 1.45vw, 16px); color: var(--chrome); overflow-wrap: normal; }
.contact-card__email:hover { color: var(--red-2); }
.contact-card__note { color: var(--paper-mute); font-size: var(--t-sm); }
/* ---------------- Footer grid ---------------- */
.colophon { padding: var(--s-6) 0 var(--s-5); }
.colophon__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-4); }
.colophon__name { font-family: var(--font-display); font-size: var(--t-lg); text-transform: uppercase; color: var(--chrome); }
.colophon__tag { color: var(--paper-mute); font-size: var(--t-sm); margin-top: var(--s-1); }
.colophon__col { display: grid; gap: var(--s-1); align-content: start; font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.colophon__head { color: var(--red-2); margin-bottom: 4px; }
.colophon__col a { color: var(--paper-mute); text-decoration: none; }
.colophon__col a:hover { color: var(--chrome); }
@media (max-width: 760px) { .colophon__grid { grid-template-columns: 1fr 1fr; } .colophon__grid > :first-child { grid-column: 1 / -1; } }
/* ---------------- Targeting reticle (pointer devices, JS-built) ---------------- */
.reticle {
position: fixed; left: 0; top: 0; z-index: 2001; pointer-events: none;
width: 40px; height: 40px; margin: -20px 0 0 -20px;
opacity: 0; transition: opacity 0.2s, scale 0.25s var(--ease-out);
background:
linear-gradient(var(--red-2), var(--red-2)) top left / 10px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top left / 2px 10px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top right / 10px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) top right / 2px 10px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom left / 10px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom left / 2px 10px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 10px 2px no-repeat,
linear-gradient(var(--red-2), var(--red-2)) bottom right / 2px 10px no-repeat;
filter: drop-shadow(0 0 4px rgba(255,59,47,0.7));
}
.reticle::before {
content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px;
margin: -2px 0 0 -2px; background: var(--red-2);
}
.reticle::after {
content: "Lock"; position: absolute; left: 100%; top: -8px; margin-left: 6px;
font-family: var(--font-hud); font-size: 16px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--red-2); opacity: 0; transition: opacity 0.15s;
}
.reticle.is-on { opacity: 0.9; }
.reticle.is-lock { scale: 0.7; }
.reticle.is-lock::after { opacity: 1; }
/* =========================================================================
IMMERSION LAYER — scroll-driven motion (Chrome/Edge 115+, Safari 26+).
All decoration: with no support or reduced motion the page is complete
and still. Mostly transform / opacity / clip-path; ranges near the page
foot end by `entry 100%` so nothing is left half-played.
------------------------------------------------------------------------- */
@property --scan { syntax: ""; inherits: false; initial-value: 0; }
.site-nav__scan { display: none; }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes glint { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
@keyframes scan-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* ---------------- Reveals (all browsers, JS-triggered) ----------------
Anything carrying text plays its entrance once, in full, when it enters
view — it can never be left half-faded by a paused scroll. JS adds .rv
and .is-in; without JS nothing is hidden. Stagger via --rv-delay. */
@media screen and (prefers-reduced-motion: no-preference) {
html.js .rv { opacity: 0; transform: translateY(26px); }
html.js .rv.is-in {
opacity: 1; transform: none;
transition: opacity 0.75s var(--ease-out) var(--rv-delay, 0s), transform 0.75s var(--ease-out) var(--rv-delay, 0s);
}
html.js .tile.rv.is-in {
transition: opacity 0.75s var(--ease-out) var(--rv-delay, 0s), transform 0.75s var(--ease-out) var(--rv-delay, 0s),
translate var(--d-2) var(--ease-out), border-color var(--d-1) var(--ease-out);
}
html.js .rv--side { transform: translateX(-48px); }
html.js .rv--tilt { transform: perspective(1200px) rotateX(14deg) scale(0.94); transform-origin: 50% 100%; }
html.js .rv--tilt.is-in { transition-duration: 1.1s; }
/* Kicker types on; the title zooms in from a wide, faint frame (transform only). */
html.js .rv--type { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
html.js .rv--type.is-in { clip-path: inset(0 0 0 0); transition: clip-path 0.9s steps(40) var(--rv-delay, 0s); }
html.js .rv--track { transform: scale(1.18); }
html.js .rv--track.is-in {
transition: opacity 1s var(--ease-out) var(--rv-delay, 0s), transform 1.2s var(--ease-out) var(--rv-delay, 0s);
}
/* Chrome glint and art scan play ONCE when revealed, not scrubbed on every
scroll frame (background-position / clip-path repaint on the main thread). */
html.js .rv--glint:not(.rv--track) { opacity: 1; transform: none; }
html.js .rv--glint.is-in { animation: glint 1.5s var(--ease-cine) var(--rv-delay, 0.2s) both; }
html.js .rv--scan { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
html.js .rv--scan.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-out) 0.1s; }
html.js .rv--scan::before {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
background: linear-gradient(180deg, var(--red-2) 0 2px, rgba(255,59,47,0.35) 2px 8px, transparent 18px);
}
html.js .rv--scan.is-in::before { animation: scan-line 1.1s var(--ease-out) 0.1s both; }
@keyframes scan-line { 0% { transform: translateY(0); opacity: 1; } 95% { transform: translateY(100%); opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
.section__title, .feature__nameplate {
background-image:
linear-gradient(100deg, transparent 42%, rgba(255,255,255,0.95) 50%, transparent 58%),
var(--metal);
background-size: 250% 100%, 100% 100%; background-repeat: no-repeat;
background-position: 100% 0, 0 0;
}
}
@media (prefers-reduced-motion: no-preference) {
/* VHS tracking glitch on the name: main.js adds .is-glitch for 180ms a few times,
so nothing runs between flashes (a 28s steps() animation ticked filter/clip-path
on the main thread at 120Hz the whole time). */
.hero__name > span { display: inline-block; }
.hero__name > span.is-glitch { animation: glitch 0.18s steps(1) both; }
@keyframes glitch {
0% { transform: translateX(3px) skewX(-10deg);
filter: drop-shadow(4px 0 0 rgba(255,59,47,0.85)) drop-shadow(-4px 0 0 rgba(111,150,196,0.85)); }
50% { transform: translateX(-2px); clip-path: inset(28% 0 38% 0);
filter: drop-shadow(-3px 0 0 rgba(255,59,47,0.85)) drop-shadow(3px 0 0 rgba(111,150,196,0.85)); }
100% { transform: none; filter: none; clip-path: none; }
}
/* Commissioners roll past like end credits on a monitor (pausable). */
.wordmarks {
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wordmarks__track {
flex-wrap: nowrap; justify-content: flex-start; width: max-content;
gap: 0; padding: 0; animation: marquee 42s linear infinite;
}
.wordmarks__set, .wordmarks__set[aria-hidden] { display: flex; gap: var(--s-5); padding-right: var(--s-5); }
.wordmarks:hover .wordmarks__track, .wordmarks:focus-within .wordmarks__track,
.commissioners.is-paused .wordmarks__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.page-head__title { animation: glint 1.6s var(--ease-cine) 0.3s both; }
.file__art { animation: scan-wipe 1.1s var(--ease-out) 0.15s both; }
@supports (animation-timeline: view()) {
/* Targeting progress along the nav + live scan readout. */
.site-nav::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: linear-gradient(90deg, var(--red), var(--red-2));
box-shadow: var(--hud-glow); transform-origin: 0 50%;
animation: grow-x linear both; animation-timeline: scroll(root);
}
.site-nav__scan {
display: inline-block; min-width: 9ch; margin-left: auto; text-align: right;
font-family: var(--font-hud); font-size: 18px; letter-spacing: 0.08em;
color: var(--red-2); text-shadow: var(--hud-glow);
animation: scan linear both; animation-timeline: scroll(root);
counter-reset: scan var(--scan);
}
.site-nav__scan::after { content: "Scan " counter(scan) "%"; text-transform: uppercase; }
@keyframes scan { from { --scan: 0; } to { --scan: 100; } }
@media (max-width: 1000px) { .site-nav__scan { display: none; } }
/* Hero: the camera pushes in while the page slides over it. Text moves
but never fades — whatever is on screen stays fully legible. */
.hero__name { animation: push-name linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
@keyframes push-name { to { transform: scale(1.12) translateY(-5vh); } }
.hero__kicker { animation: rise-fast linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
.hero__role, .hero__quote { animation: rise linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
@keyframes rise-fast { to { transform: translateY(-11vh); } }
@keyframes rise { to { transform: translateY(-5vh); } }
.hero__flare {
animation: flare var(--d-3) var(--ease-out) 1.6s both, flare-out linear both;
animation-timeline: auto, scroll(root); animation-range: normal, 0 80vh;
}
@keyframes flare-out { to { scale: 2.4 1; } }
/* The portrait drifts back and dims as the page slides over it (image only). */
.hero__portrait img { animation: portrait-back linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
@keyframes portrait-back { to { transform: scale(1.08) translateY(-3%); opacity: 0.55; } }
/* Get Huge: brackets lock on as it scrolls (transform/opacity). */
.feature__card { view-timeline: --gh block; }
.feature__card::before { animation: lock linear both; animation-timeline: --gh; animation-range: entry 40% cover 40%; }
@keyframes lock {
from { transform: scale(1.2); opacity: 0; }
70% { opacity: 1; }
to { transform: scale(1); opacity: 0.7; }
}
/* Project art cools from machine-vision red to the night-blue grade as it
scrolls (opacity), with parallax inside the frame (transform). */
.case-card { view-timeline: --card block; }
.case-card__art img { animation: parallax linear both; animation-timeline: --card; animation-range: cover 0% cover 100%; }
.case-card__art:not(.case-card__art--type) picture { position: relative; }
.case-card__art:not(.case-card__art--type) picture::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: var(--red); mix-blend-mode: color;
animation: vision-out steps(1, jump-end) both; animation-timeline: --card; animation-range: entry 10% cover 35%;
}
@keyframes vision-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes parallax { from { transform: scale(1.07) translateY(-3%); } to { transform: scale(1.07) translateY(3%); } }
/* Press: a red scanner sweeps each quote's top rule. */
.press-quote { view-timeline: --pq block; }
.press-quote::before {
width: 100%; transform-origin: 0 50%;
animation: sweep-rule linear both; animation-timeline: --pq; animation-range: entry 40% cover 50%;
}
@keyframes sweep-rule { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(0.12); } }
/* Foot of the page: the rule draws out and the red eye opens. */
.colophon { view-timeline: --eye block; }
.cutoff-rule { animation: grow-x linear both; animation-timeline: --eye; animation-range: entry 0% entry 60%; }
.cutoff-rule::after {
animation: eye 2.4s ease-in-out 3, eye-open linear both;
animation-timeline: auto, --eye; animation-range: normal, entry 30% entry 100%;
}
@keyframes eye-open { 0% { scale: 0; } 70% { scale: 2.8; } 100% { scale: 1.4; } }
}
}
/* ---------------- Motion: off (site-wide toggle) ----------------
WCAG 2.2.2 — anything that moves on its own can be stopped. Off means
still: the same page reduced-motion users get. */
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
animation: none !important; transition: none !important;
}
html.motion-off .rv { opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.motion-off .reticle, html.motion-off .site-nav__scan, html.motion-off .site-nav::after,
html.motion-off .case-card__art::before, html.motion-off .rv--scan::before,
html.motion-off .case-card__art picture::after { display: none !important; }
html.motion-off .press-quote::before { width: 40px; }
html.motion-off .wordmarks { mask-image: none; }
html.motion-off .wordmarks__track { flex-wrap: wrap; justify-content: center; width: auto; gap: var(--s-2) var(--s-5); padding-inline: var(--s-3); }
html.motion-off .wordmarks__set { display: contents; }
html.motion-off .wordmarks__set[aria-hidden] { display: none; }
html.motion-off .wordmarks__pause { display: none; }
.feature__credits strong { white-space: nowrap; }
/* wrappers fill their frame like the bare ![]()
did. */
.tile__art picture, .case-card__art picture, .file__art picture, .hero__portrait picture { display: block; height: 100%; }
.download picture { display: block; }
/* Print / Save as PDF (press kits get printed): the still page motion-off users get, in the
dark design with its metal type (print-color-adjust, or backgrounds drop and the
gradient-clipped titles print invisible). Scroll-driven and reveal states never run on
paper, so everything is forced to its finished state. Nav and hero stop being sticky. */
@media print {
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.rv { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.site-nav { position: static; }
html.js .hero { position: relative; top: 0; } /* still anchors the HUD and haze; drop the sticky offset */
.rain, .reticle, .motion-toggle, .wordmarks__pause, .copy-btn, .site-nav__toggle,
.site-nav__scan, .site-nav::after, .case-card__art::before, .rv--scan::before,
.case-card__art picture::after, .case-card__art picture::before, body::before, body::after { display: none !important; }
html.js .site-nav__links { display: flex !important; }
.wordmarks { mask-image: none; }
.wordmarks__track { flex-wrap: wrap; justify-content: center; width: auto; gap: var(--s-2) var(--s-5); padding-inline: var(--s-3); }
.wordmarks__set { display: contents; }
.wordmarks__set[aria-hidden] { display: none; }
/* Paper is phone-width (816px on Letter), where cards stack art over text (~720px) and
strand their headings. Print them as dossier rows instead: art left, text right. */
.case-card { grid-template-columns: 2.4in 1fr; align-items: start; }
.case-card__art, .case-card__art--type { aspect-ratio: 1 / 1; height: auto; }
.case-card__art img { height: 100%; }
.type-card__sub { font-size: 9px; letter-spacing: 0.12em; } /* 'LOOKSMAXXING' fits the 2.4in card unbroken */
/* Paper wastes no space on screen pacing: compact heads and sections; a section with a
single card travels as one unit; the footer keeps only its name line (links are dead on paper). */
.page-head { padding-top: var(--s-5); padding-bottom: var(--s-4); }
.section { padding-block: var(--s-5); }
.section__head { margin-bottom: var(--s-4); }
.section:has(> .dossier > .case-card:only-child) { break-inside: avoid; }
/* The footer is site navigation: nothing to act on in print, and it was the lone line on
seven last pages. Chrome prints the page URL in its own footer. */
.colophon { display: none; }
/* Chrome ignores break-after: avoid at many break points, and fragments grid lists badly.
Lists print as blocks with unsplittable rows; a heading carries an invisible 140px tail
(cancelled by a negative margin) so it can never sit at the foot of a page. */
.credits, .factsheet, .downloads { display: block; }
.credits div, .factsheet div, .download, .timeline li, .slate__row, .feature__card, .coverage li { break-inside: avoid; }
.downloads .download { display: inline-grid; width: 30%; margin: 0 2% var(--s-2) 0; vertical-align: top; }
.section__head, .file-block__title { break-inside: avoid; }
.section__head::after, .file-block__title::after { content: ""; display: block; height: 140px; margin-bottom: -140px; }
.dossier { display: block; } /* Chrome fragments grid rows poorly: whole cards jumped pages early */
.dossier > .case-card + .case-card { margin-top: var(--s-5); }
.tile, .case-card, .bio-block, .press-quote, .contact-card, .section__head,
.colophon, .cta-band__item { break-inside: avoid; }
.section__head, .kicker, h1, h2, h3 { break-after: avoid; }
}
/* ---------------- Request Brett (press.html) ----------------
A booking form that composes an email (request.js). Type chips up top, then the
essentials; an aside with what he talks about. No-JS visitors get the address. */
.request__status {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
margin-bottom: var(--s-4); padding: var(--s-2) var(--s-3);
border: 1px solid var(--rule); border-left: 3px solid var(--red); background: var(--ink-2);
font-size: var(--t-sm); color: var(--paper);
}
.request__live {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-hud); font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--red-2); text-shadow: var(--hud-glow);
}
.request__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red-2); box-shadow: var(--hud-glow); }
@media (prefers-reduced-motion: no-preference) {
.request__live::before { animation: live 1.6s ease-in-out infinite; }
}
@keyframes live { 50% { opacity: 0.3; } }
.request__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--s-6); align-items: start; }
.request__form {
padding: var(--s-5); border: 1px solid var(--rule); border-top: 2px solid var(--red);
background: linear-gradient(180deg, var(--night), var(--ink-2));
box-shadow: inset 0 1px 0 rgba(169,198,232,0.12), var(--shadow-2);
}
.request__form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.request__form legend, .field > span {
display: block; margin-bottom: var(--s-1);
font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice);
}
.request__kinds legend { font-size: var(--t-sm); color: var(--chrome); margin-bottom: var(--s-2); }
.field i { font-style: normal; color: var(--steel-2); text-transform: none; letter-spacing: 0.04em; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
display: inline-block; padding: 10px 16px;
border: 1px solid rgba(169,198,232,0.35); background: rgba(2,4,10,0.5);
font-family: var(--font-type); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--chrome);
transition: background-color var(--d-1) var(--ease-out), border-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out);
}
.chip:hover span { border-color: var(--ice); color: #fff; }
.chip input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--red-2); outline-offset: 2px; }
.chip--sm span { padding: 8px 14px; }
.request__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.field { display: block; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.request__format { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.request__format legend { width: 100%; }
.field input, .field select, .field textarea {
display: block; width: 100%; padding: 12px 14px;
font: inherit; font-size: var(--t-base); color: var(--paper);
background: rgba(2,4,10,0.7); border: 1px solid rgba(169,198,232,0.25); border-radius: 0;
color-scheme: dark;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--paper-mute); opacity: 0.7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red-2); box-shadow: 0 0 0 1px var(--red-2); }
.request__error { margin-top: var(--s-3); color: var(--red-2); font-size: var(--t-sm); }
.request__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.request__actions .btn { cursor: pointer; }
.request__hint { font-size: var(--t-sm); color: var(--paper-mute); }
.request__done { margin-top: var(--s-4); padding: var(--s-3); border: 1px solid var(--rule); border-left: 3px solid var(--ice); background: rgba(2,4,10,0.6); }
.request__done p + p { margin-top: var(--s-1); color: var(--paper-mute); font-size: var(--t-sm); }
.request__copy { font: inherit; color: var(--red-2); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.request__aside { display: grid; gap: var(--s-2); align-content: start; }
.request__aside .kicker + * { margin-top: calc(-1 * var(--s-1)); }
.request__aside .kicker:not(:first-child) { margin-top: var(--s-3); }
.request__note { color: var(--paper); line-height: 1.6; }
.request__topics { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-1); }
.request__topics li { position: relative; padding-left: 20px; color: var(--paper); line-height: 1.5; font-size: var(--t-sm); }
.request__topics li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 2px; background: var(--red-2); }
.request__mail { font-family: var(--font-display); font-size: var(--t-sm); color: var(--chrome); text-decoration: none; }
.request__mail:hover { color: var(--red-2); }
.request__nojs { display: none; }
html:not(.js) .request__grid, html:not(.js) .request__status { display: none; }
html:not(.js) .request__nojs { display: block; }
@media (max-width: 900px) {
.request__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
.request__form { padding: var(--s-4) var(--s-3); }
.request__fields { grid-template-columns: minmax(0, 1fr); }
}