/*
outside.css: the outside world. One night world, drawn by one beam of light.
The same document as the plain world, restyled under html.outside. The whole file sits inside
@media screen, so a print from either world always comes from plain.css. The tokens live on :root (inside
that block) so the exit, which runs while is still .plain, can use them too.
State on (set by the boot script, main.js, door.js, ui.js, engine.js; see docs/HANDOFF-NOTES.md, CSS):
.outside / .plain the two worlds (exactly one)
.exiting the scan is running: html turns void, scroll is locked, #doc is clipped inline
.intro the hero is being printed: hero text hidden, revealed by --bx and a CSS failsafe
.intro-rest (with .intro) the eyebrow stays, role, deck and readouts rise in
.xfade #doc faded out (the reduced-motion crossfade between worlds)
.rm still mode: no beat, no transitions, no reveals, nothing waits to appear
.sleep the frame loop sleeps: CSS loops pause
[data-beam] renderer in use (webgl2 | canvas2d | none); canvas2d and none get the CSS grain
[data-entry=direct] outside from first paint: a 300 ms fade of the hero, no burn-in
Layout: 12 columns, --margin clamp(16px, 5.5vw, 104px), --gutter clamp(16px, 1.8vw, 28px), content at most
1440 px wide. Breakpoints 375 (base), 768, 1024, 1180, 1440. Nothing scrolls sideways from 320 px up.
*/
@media screen {
:root {
/* Night world (SPEC 3.3). */
--void: #07090c;
--void-2: #0d1014;
--hairline: rgba(244, 234, 216, .10);
--graticule: rgba(244, 234, 216, .045);
--frame: rgba(244, 234, 216, .24);
--cream: #f4ead8;
--paper: #e8dac4;
--dim: #9a9082;
--ember: #ff6a2a;
--ember-hot: #ffad5c;
--coal: #3a1408;
--signal: #2ec9c2;
--withheld: #e8a33d;
--withheld-bg: rgba(232, 163, 61, .10);
--withheld-line: rgba(232, 163, 61, .42);
--admitted: #4fe3a1;
--exit-r: #ff4d4d; --exit-g: #4dff88; --exit-b: #4d7bff;
--hue-1: #ffd23f; --hue-2: #ff9f45; --hue-3: #ff5c9d; --hue-4: #d65cff;
--hue-5: #8b6cff; --hue-6: #4f8bff; --hue-7: #00d4ff;
--g-emberline: #ff8a3d; --g-doodlefort: #ffce67; --g-skyburst: #78d9ff;
--g-stillform: #ba85ff; --g-tanglelight: #fa6cff; --g-flockaway: #ffb8d9;
/* Motion. */
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-expo: cubic-bezier(.16, 1, .3, 1);
--ease-io: cubic-bezier(.65, 0, .35, 1);
--beat: 909.09ms; /* 60 / BPM; ui.js may set it from config.js */
/* Grid (SPEC 3.6). --pad-x resolves against the element that uses it. */
--margin: clamp(16px, 5.5vw, 104px);
--gutter: clamp(16px, 1.8vw, 28px);
--pad-x: max(var(--margin), (100% - 1440px) / 2);
--bar-h: 48px;
--sec-pad: clamp(96px, 16vh, 200px);
}
@media (min-width: 768px) {
:root { --bar-h: 44px; }
}
/* =============================================================================================
0. Leaving and returning: html.exiting, #fx, the crossfade
============================================================================================= */
html.exiting {
background: var(--void);
overflow: hidden;
}
/* The laser, its label and the squash band canvas (#fx is DOM, over the white page). door.js moves the
laser with --laser-y (viewport px) and writes the label text; the label rides just above the line. */
#fx .laser {
position: absolute; left: 0; right: 0; top: 0;
height: 1px;
background: var(--ember);
box-shadow: 0 0 10px 1px rgba(255, 106, 42, .75), 0 0 2px rgba(255, 173, 92, .9);
transform: translate3d(0, var(--laser-y, 0px), 0);
opacity: 0;
transition: opacity 120ms linear;
will-change: transform;
}
html.exiting #fx:not([data-phase]) .laser,
html.exiting #fx[data-phase="scan"] .laser { opacity: 1; }
html #fx[data-phase="collapse"] .laser,
html #fx[data-phase="done"] .laser { opacity: 0; }
#fx .fx-label {
position: absolute; right: 16px; top: 0;
margin: 0;
padding: 5px 8px;
background: rgba(13, 16, 20, .9);
border: 1px solid rgba(255, 106, 42, .45);
border-radius: 3px;
color: var(--cream);
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
font-variant-numeric: tabular-nums slashed-zero;
white-space: nowrap;
transform: translate3d(0, max(8px, calc(var(--laser-y, 0px) - 100% - 10px)), 0);
transition: opacity 120ms linear;
}
#fx .fx-label:empty { opacity: 0; }
/* After the scan the collapse labels sit centred under the line at the viewport centre. */
#fx .fx-label[data-mode="center"] {
right: auto; left: 50%;
top: 50%;
border-color: transparent;
background: none;
transform: translate3d(-50%, 22px, 0);
}
/* Reduced motion: #doc crossfades (200 ms out, class switch, 200 ms in). */
html.rm #doc { transition: opacity 200ms linear; }
html.xfade #doc { opacity: 0; }
/* =============================================================================================
1. The outside world: ground, text, selection, scrollbar
============================================================================================= */
html.outside {
background: var(--void);
color-scheme: dark;
scrollbar-width: thin;
scrollbar-color: var(--coal) transparent;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
html.outside::-webkit-scrollbar { width: 10px; height: 10px; }
html.outside::-webkit-scrollbar-track { background: transparent; }
html.outside::-webkit-scrollbar-thumb {
background: var(--coal);
border: 2px solid var(--void);
border-radius: 6px;
}
html.outside body {
background: transparent;
color: var(--paper);
}
html.outside #doc {
position: relative; z-index: 1;
min-height: 100vh;
overflow-x: clip;
background: transparent;
color: var(--paper);
font: 400 1rem/1.55 var(--ff-body);
font-kerning: normal;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
}
html.outside ::selection { background: rgba(255, 106, 42, .35); color: #fff; }
html.outside #main { overflow-x: clip; }
/* Mode switches: the plain-only strings, the door and the contents list leave. */
html.outside .w-plain,
html.outside .door,
html.outside .skip-sep { display: none !important; }
html.outside #contents,
html.outside .skip:not(:focus) {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* Skip links: hidden until focused, then a small plate over the bar. */
html.outside .skip:focus {
position: fixed; left: 12px; top: 8px; z-index: 40;
display: inline-flex; align-items: center;
min-height: 44px;
padding: 0 16px;
background: var(--void-2);
border: 1px solid var(--ember);
border-radius: 3px;
color: var(--cream);
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
}
/* Reset the few UA defaults the outside world does not want. */
:where(html.outside #doc) :is(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(html.outside #doc) :is(ul, ol) { padding: 0; list-style: none; }
:where(html.outside #doc) img { display: block; max-width: 100%; height: auto; }
:where(html.outside #doc) button { font: inherit; color: inherit; }
/* =============================================================================================
2. Type (SPEC 3.2)
============================================================================================= */
:where(html.outside #doc) h1,
:where(html.outside #doc) h2 { color: var(--cream); font-weight: 340; }
/* Name. */
html.outside .hero h1 {
font-family: var(--ff-display);
font-weight: 300;
font-size: clamp(3.5rem, 10.6vw, 10.5rem);
font-variation-settings: "opsz" 144, "SOFT" 0;
line-height: .88;
letter-spacing: -.035em;
color: var(--cream);
}
/* H2. */
html.outside .sec h2 {
font-family: var(--ff-display);
font-weight: 340;
font-size: clamp(2.5rem, 6vw, 6rem);
font-optical-sizing: auto;
font-variation-settings: "SOFT" 0;
line-height: .95;
letter-spacing: -.03em;
text-wrap: balance;
}
/* Deck (section decks; the hero deck is set as a lead). */
html.outside .sec .deck {
font-family: var(--ff-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.375rem, 2vw, 1.75rem);
font-optical-sizing: auto;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--cream);
max-width: 34ch;
text-wrap: pretty;
}
/* H3. */
:where(html.outside #doc) h3 {
font-family: var(--ff-body);
font-weight: 600;
font-stretch: 92%;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -.005em;
color: var(--cream);
}
/* Lead and body. */
html.outside .lead,
html.outside .hero .hero-deck {
font-family: var(--ff-body);
font-size: 1.0625rem;
line-height: 1.5;
color: var(--paper);
max-width: 54ch;
text-wrap: pretty;
}
html.outside .prose p,
html.outside .side li,
html.outside .features li { max-width: 62ch; text-wrap: pretty; }
html.outside .prose p + p { margin-top: 1em; }
/* Eyebrows, labels. */
html.outside .eyebrow {
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dim);
}
:where(html.outside #doc) small { font-size: .8125rem; }
:where(html.outside #doc) code {
font-family: var(--ff-mono);
font-size: .875em;
letter-spacing: -.01em;
color: var(--cream);
}
:where(html.outside #doc) kbd,
:where(html.outside dialog) kbd {
display: inline-block;
min-width: 1.9em;
padding: 3px 6px;
border: 1px solid var(--frame);
border-radius: 3px;
color: var(--cream);
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .06em;
text-align: center;
}
:where(html.outside #doc) output {
font-family: var(--ff-mono);
font-variant-numeric: tabular-nums slashed-zero;
color: var(--cream);
}
:where(html.outside #doc) strong { font-weight: 600; color: var(--cream); }
:where(html.outside #doc) s { text-decoration-thickness: 1px; }
/* Footnote markers. */
:where(html.outside #doc) sup {
position: relative; top: -.1em;
margin-left: 2px;
font: 400 .6875rem/0 var(--ff-mono);
letter-spacing: .02em;
vertical-align: super;
}
:where(html.outside #doc) sup a {
display: inline-block;
padding: 2px 2px;
color: var(--dim);
text-decoration: none;
}
:where(html.outside #doc) sup a:hover { color: var(--ember-hot); }
/* Tabular mono numerals everywhere they are readouts. */
html.outside :is(.ro-v, .lv, .fig-readout, .bar-sec, .trace-axis, .milestones time, .when, .num, .notes) {
font-variant-numeric: tabular-nums slashed-zero;
}
/* =============================================================================================
3. Components (SPEC 3.7)
============================================================================================= */
/* ---- Links ------------------------------------------------------------------------------------ */
:where(html.outside #doc) a,
:where(html.outside dialog) a {
color: var(--cream);
text-decoration: underline 1px var(--ember);
text-underline-offset: 4px;
text-decoration-skip-ink: auto;
transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}
:where(html.outside #doc) a:hover,
:where(html.outside dialog) a:hover { color: var(--ember-hot); text-decoration-color: var(--ember-hot); }
/* ---- Focus ------------------------------------------------------------------------------------ */
html.outside :focus { outline: none; }
html.outside :focus-visible {
outline: 2px solid var(--ember);
outline-offset: 3px;
}
html.outside #top-h:focus-visible { outline-offset: 10px; }
/* ---- Buttons ---------------------------------------------------------------------------------- */
html.outside :is(.fig-controls button, .hero-email .copy, .transmit-actions .cta, .reenter button,
.print-action button, .sound-hint button, .sheet-close, .sheet-controls button,
.keys-toggle button) {
-webkit-appearance: none; appearance: none;
display: inline-flex; align-items: center; justify-content: center; gap: .6em;
min-height: 44px;
margin: 0;
padding: 0 16px;
background: transparent;
border: 1px solid var(--hairline);
border-radius: 3px;
color: var(--cream);
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
html.outside :is(.fig-controls button, .hero-email .copy, .transmit-actions .cta, .reenter button,
.print-action button, .sound-hint button, .sheet-close, .sheet-controls button,
.keys-toggle button):is(:hover, :focus-visible) {
border-color: var(--ember);
color: var(--ember-hot);
}
/* Primary: the two ways to reach Joseph. */
html.outside :is(.hero-email .copy, .transmit-actions .cta) {
border-color: var(--ember);
color: var(--ember-hot);
}
html.outside :is(.hero-email .copy, .transmit-actions .cta):hover { background: rgba(255, 106, 42, .08); }
html.outside .transmit-actions a.cta { text-decoration: none; }
html.outside [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* ---- Chips ------------------------------------------------------------------------------------ */
html.outside .chip {
position: relative;
display: inline-flex; align-items: center; gap: 6px;
margin: 0;
padding: 3px 7px;
border: 1px solid var(--dim);
border-radius: 3px;
background: transparent;
color: var(--dim);
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: .08em;
}
/* WITHHELD: known, and correctly not shown. */
html.outside .chip-amber {
-webkit-appearance: none; appearance: none;
color: var(--withheld);
background: var(--withheld-bg);
border-color: var(--withheld-line);
cursor: pointer;
transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
html.outside .chip-amber:is(:hover, :focus-visible, [aria-expanded="true"]) {
border-color: var(--withheld);
background: rgba(232, 163, 61, .16);
}
html.outside .chip-amber:focus-visible { outline-color: var(--withheld); }
/* Every chip is at least 24 x 24 to the pointer. */
html.outside button.chip::before {
content: "";
position: absolute;
left: -4px; right: -4px;
top: 50%;
height: max(100% + 8px, 28px);
transform: translateY(-50%);
}
/* LIVE: teal and a 6 px dot. */
html.outside .chip-live { color: var(--signal); border-color: rgba(46, 201, 194, .45); }
html.outside .chip-live::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--signal);
box-shadow: 0 0 6px rgba(46, 201, 194, .8);
}
/* PEAK HOUR (22:00–22:59 Central). */
html.outside .chip-peak {
color: var(--ember-hot);
border-color: rgba(255, 106, 42, .55);
background: rgba(255, 106, 42, .08);
}
html.outside button.chip-peak { -webkit-appearance: none; appearance: none; cursor: pointer; }
/* A chip's explanation: an annotation in the text's own voice. */
html.outside .chip-x {
color: var(--paper);
font: 400 .875rem/1.45 var(--ff-body);
letter-spacing: 0;
text-transform: none;
}
html.outside .eyebrow .chip-x {
display: block;
max-width: 46ch;
margin-top: 12px;
padding-left: 12px;
border-left: 1px solid var(--withheld-line);
}
/* Chips inside a sentence explain themselves in a small plate below, so the sentence stays whole. */
html.outside .bi-main .one { position: relative; }
html.outside :is(.bi-main, .trace-span, .bar-peak) .chip-x {
position: absolute; z-index: 6;
left: 0; top: calc(100% + 8px);
width: max-content;
max-width: min(36ch, calc(100vw - 32px));
padding: 10px 12px;
background: var(--void-2);
border: 1px solid var(--withheld-line);
border-radius: 3px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
white-space: normal;
}
html.outside .bar-peak .chip-x { border-color: rgba(255, 106, 42, .45); left: auto; right: 0; }
/* ---- Readouts and odometers --------------------------------------------------------------------- */
html.outside .readouts {
display: grid;
grid-template-columns: repeat(var(--ro-cols, 2), minmax(0, 1fr));
grid-auto-flow: row dense;
gap: 28px var(--gutter);
}
html.outside .readouts > .ro {
position: relative;
padding-top: 14px;
border-top: 1px solid var(--hairline);
}
/* Long values ("80 / 52 / 28") take two cells. */
html.outside .readouts > .ro-wide { grid-column: span 2; }
html.outside .ro-v {
display: block;
font: 500 clamp(2rem, 3.6vw, 3.5rem)/1 var(--ff-mono);
letter-spacing: -.02em;
color: var(--cream);
white-space: nowrap;
}
html.outside .ro-l {
display: block;
margin-top: 10px;
font: 500 .6875rem/1.35 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dim);
}
html.outside .ro-l .num { color: inherit; }
html.outside .ro > sup { position: absolute; top: 10px; right: 0; }
/* Readouts that point at evidence are buttons that look like readouts. */
html.outside :is(.ev, .ro-btn) {
-webkit-appearance: none; appearance: none;
display: inline-block;
margin: 0; padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-align: inherit;
cursor: crosshair;
border-radius: 2px;
}
html.outside .ro-btn { cursor: pointer; }
html.outside :is(.ev, .ro-btn):hover .ro-v { color: #fff; }
html.outside :is(.ev, .ro-btn):hover .ro-l { color: var(--paper); }
/* Odometer markup (ui.js): rolled digits are aria-hidden columns; the final value stays as real text.
0…9,…
8,492
ui.js either sets --d (the target digit) and adds [data-roll] to .odo (CSS rolls it, 1.2 s easeOutExpo,
40 ms stagger by --i), or drives transform on .odo-strip itself. */
html.outside .odo {
display: inline-flex;
height: 1em;
line-height: 1;
overflow: hidden;
vertical-align: top;
}
html.outside .odo-col,
html.outside .odo-ch { display: inline-block; height: 1em; overflow: hidden; }
html.outside .odo-strip {
display: flex; flex-direction: column;
transform: translate3d(0, 0, 0);
}
html.outside .odo-strip > * { display: block; height: 1em; line-height: 1; }
html.outside .odo[data-roll] .odo-strip {
transform: translate3d(0, calc(var(--d, 0) * -1em), 0);
transition: transform 1.2s var(--ease-expo) calc(var(--i, 0) * 40ms);
}
/* ---- Ledgers ---------------------------------------------------------------------------------- */
html.outside .ledger {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
html.outside .lrow {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 8px;
min-height: 56px;
padding: 18px 0 20px;
border-top: 1px solid var(--hairline);
}
html.outside .lrow:last-child { border-bottom: 1px solid var(--hairline); }
html.outside .lv {
font: 400 clamp(2.25rem, 3.4vw, 4rem)/1 var(--ff-mono);
letter-spacing: -.03em;
color: var(--cream);
}
html.outside .lv .ev { text-align: inherit; line-height: 1; }
html.outside .lv .nw { white-space: nowrap; }
html.outside .ll { color: var(--paper); font-size: .9375rem; line-height: 1.45; }
html.outside .ls { color: var(--dim); font-size: .8125rem; line-height: 1.45; }
html.outside .ll .num { font-family: var(--ff-mono); font-size: .92em; }
/* ---- Pull quotes -------------------------------------------------------------------------------- */
html.outside figure.pull blockquote p,
html.outside .bi-quote p {
font-family: var(--ff-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.75rem, 3vw, 2.75rem);
font-optical-sizing: auto;
line-height: 1.12;
letter-spacing: -.015em;
color: var(--cream);
text-indent: -.42em; /* hang the opening quote */
text-wrap: balance;
}
html.outside figure.pull figcaption {
display: flex; align-items: center; gap: 12px;
margin-top: 18px;
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dim);
}
html.outside figure.pull figcaption::before {
content: "";
flex: none;
width: 28px; height: 1px;
background: var(--ember);
}
/* ---- Statement lists (hairline rows, no bullets) ------------------------------------------------ */
html.outside :is(.side, .features, .side ul, .job-points) > li {
position: relative;
padding: 12px 0 13px 22px;
border-top: 1px solid var(--hairline);
font-size: .9375rem;
line-height: 1.5;
}
html.outside :is(.side, .features, .side ul, .job-points) > li:last-child { border-bottom: 1px solid var(--hairline); }
html.outside :is(.side, .features, .side ul, .job-points) > li::before {
content: "";
position: absolute; left: 0; top: calc(12px + .74em);
width: 10px; height: 1px;
background: var(--ember);
}
html.outside .side h3 { margin-bottom: 16px; }
/* ---- Proof prints (real captures) -------------------------------------------------------------- */
html.outside .capture { margin: 0; }
html.outside .capture picture {
position: relative;
display: block;
overflow: hidden;
border: 1px solid var(--frame);
background: var(--void-2);
}
html.outside .capture img { width: 100%; height: auto; }
/* Phone captures: crop the status bar (and its green battery) away. */
html.outside .capture-tall img {
aspect-ratio: 720 / 1440;
object-fit: cover;
object-position: 50% 100%;
}
html.outside .capture figcaption {
margin-top: 12px;
font: 500 .6875rem/1.35 var(--ff-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dim);
}
/* Printing in (SPEC 4.5). ui.js arms a proof strip with [data-print="armed"] when it comes near the
viewport, then adds .printed to each capture on first intersection (--i = index for the 120 ms stagger).
A CSS failsafe prints anything still waiting 3 s after arming. Still mode never hides them. */
html.outside:not(.rm) .proof[data-print="armed"] .capture:not(.printed) picture {
clip-path: inset(0 0 100% 0);
animation: jl-unclip 0s linear 3s forwards;
}
html.outside:not(.rm) .proof[data-print="armed"] .capture picture {
clip-path: inset(0 0 0 0);
transition: clip-path 500ms var(--ease-io) calc(var(--i, 0) * 120ms);
}
/* The ember line rides the printing edge: the bottom of a full-size box that slides down with the clip. */
html.outside:not(.rm) .proof[data-print="armed"] .capture picture::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top, var(--ember) 0 1px, rgba(255, 106, 42, .28) 1px, rgba(255, 106, 42, 0) 12px);
opacity: 0;
transform: translate3d(0, -100%, 0);
pointer-events: none;
}
html.outside:not(.rm) .proof[data-print="armed"] .capture.printed picture::after {
animation: jl-print-line 500ms var(--ease-io) calc(var(--i, 0) * 120ms) both;
}
/* =============================================================================================
4. The readout bar (SPEC 2.5.0)
============================================================================================= */
html.outside .bar {
position: fixed; left: 0; right: 0; top: 0; z-index: 20;
display: flex; align-items: center;
gap: clamp(12px, 1.6vw, 24px);
height: var(--bar-h);
padding-inline: var(--pad-x);
background: rgba(13, 16, 20, .82);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
backdrop-filter: blur(12px) saturate(1.1);
border-bottom: 1px solid var(--hairline);
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cream);
animation: jl-bar-in 300ms var(--ease-out) both;
}
html.outside .bar > * { flex: none; }
html.outside .bar p { margin: 0; }
html.outside .bar a,
html.outside .bar button:not(.chip) {
-webkit-appearance: none; appearance: none;
display: inline-flex; align-items: center; gap: .7em;
min-height: 44px;
margin: 0 -6px; padding: 0 6px;
border: 0;
background: none;
color: var(--cream);
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color 160ms var(--ease-out);
}
html.outside .bar a:hover,
html.outside .bar button:not(.chip):hover { color: var(--ember-hot); }
html.outside .bar :focus-visible { outline-offset: -2px; border-radius: 3px; }
html.outside .bar-name { gap: 10px !important; }
html.outside .bar-dot {
flex: none;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ember);
box-shadow: 0 0 6px 1px rgba(255, 106, 42, .5);
}
html.outside .bar-sec {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--dim);
display: none;
}
html.outside .bar-sec [data-bar-num] { color: var(--cream); }
html.outside .bar-peak { position: relative; display: none; }
html.outside .bar-nav { display: none; gap: clamp(14px, 1.6vw, 24px); }
html.outside .bar .bar-email { margin-left: auto; }
html.outside .bar-email-long { display: none; }
html.outside .bar-controls { display: none; gap: 6px; }
html.outside .bar-controls > button { margin: 0 !important; padding: 0 8px !important; }
html.outside .bar-controls > button:last-child { margin-right: -8px !important; }
html.outside .tog-state { color: var(--dim); min-width: 3ch; transition: color 160ms var(--ease-out); }
html.outside .tog[aria-pressed="true"] .tog-state { color: var(--ember-hot); }
/* =============================================================================================
5. Sections and grid (SPEC 3.6)
============================================================================================= */
html.outside .sec,
html.outside #notes {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
align-content: start;
padding-block: var(--sec-pad);
padding-inline: var(--pad-x);
scroll-margin-top: calc(var(--bar-h) + 16px);
}
html.outside .sec > *,
html.outside #notes > * { grid-column: 1 / -1; min-width: 0; }
/* A hairline across the content width opens every section after the hero. */
html.outside .sec:not(.hero),
html.outside #notes {
background: linear-gradient(var(--hairline), var(--hairline)) center top / min(100% - 2 * var(--margin), 1440px) 1px no-repeat;
}
/* Section heads. */
html.outside .sec-head > .eyebrow + h2 { margin-top: 22px; }
html.outside .sec-head > h2 + .deck { margin-top: 24px; }
html.outside .sec-head > .deck + .lead,
html.outside .sec-head > .deck + .reveal { margin-top: 28px; }
html.outside .sec-head > * + figure.pull { margin-top: 48px; }
html.outside .sec-head > figure.pull + .credit { margin-top: 40px; }
html.outside .sec-body > * + * { margin-top: 44px; }
html.outside .sec-body > .prose + .side,
html.outside .sec-body > .prose + .features { margin-top: 36px; }
/* Link rows. The " · " separators belong to the plain page; here the gap separates them. */
html.outside .links {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
font-size: 0;
}
html.outside .links > a { font-size: 1rem; }
html.outside .bi-side .links > a,
html.outside .game .link > a { font-size: .9375rem; }
html.outside .note small,
html.outside p.note { color: var(--dim); font-size: .8125rem; line-height: 1.5; max-width: 62ch; }
/* ---- Burn-in: printed by light (SPEC 4.4) --------------------------------------------------------
An overlay copy of the heading (same font and SOFT as the text, so it sits on the letters) glows in a
window that follows the beam head (--bx, set by engine.sweep). The base heading is never hidden. */
html.outside .sec h2[data-text],
html.outside .hero .h1-line,
html.outside .hero .tagline {
--bx: -40%;
position: relative;
}
html.outside .hero .h1-line { display: inline-block; }
html.outside .sec h2[data-text]::after,
html.outside .hero .h1-line::after,
html.outside .hero .tagline::after {
content: attr(data-text);
content: attr(data-text) / "";
position: absolute;
left: 0; right: 0;
top: -.6em; bottom: -.6em;
padding-top: .6em;
color: #fff6ea;
text-shadow: 0 0 18px rgba(255, 106, 42, .85), 0 0 2px #fff;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent calc(var(--bx) - 28%), #000 calc(var(--bx) - 2%), #000 var(--bx), transparent calc(var(--bx) + 1.5%));
mask-image: linear-gradient(90deg, transparent calc(var(--bx) - 28%), #000 calc(var(--bx) - 2%), #000 var(--bx), transparent calc(var(--bx) + 1.5%));
}
/* =============================================================================================
6. Figure slots (A2 contract)
============================================================================================= */
html.outside figure.slot {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
column-gap: 16px;
margin: 0;
}
html.outside figure.slot > * { grid-column: 1 / -1; min-width: 0; }
/* The live rectangle the beam draws into. Sizes come from inline custom properties on the figure:
--aspect / --aspect-m, or --h / --h-m for fixed-height bands, and --min-h / --min-h-m. */
html.outside .slot-area {
position: relative;
width: 100%;
aspect-ratio: var(--aspect-m, var(--aspect, auto));
height: var(--h-m, var(--h, auto));
min-height: var(--min-h-m, var(--min-h, 0px));
}
html.outside .slot-labels,
html.outside .slot-controls {
position: absolute; inset: 0;
pointer-events: none;
}
html.outside .slot-labels [data-anchor] {
position: absolute; left: 0; top: 0;
font: 500 .6875rem/1.2 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dim);
white-space: nowrap;
transition: opacity 300ms var(--ease-out), color 200ms var(--ease-out);
will-change: transform;
}
html.outside .slot-labels [data-anchor]:not([data-on]) { opacity: 0; }
html.outside .slot-labels .lab-amber { color: var(--withheld); }
html.outside .slot-labels [data-anchor="denied"] { color: var(--ember-hot); }
/* Interactive anchors. Positioned ones float where the program puts them; un-positioned ones (no
renderer yet, or none at all) sit in a plain row at the bottom of the figure so they stay usable. */
html.outside .slot-controls {
display: flex; flex-wrap: wrap; align-content: flex-end; gap: 8px;
padding: 12px;
}
html.outside .slot-controls [data-anchor] {
-webkit-appearance: none; appearance: none;
position: relative;
pointer-events: auto;
display: inline-flex; align-items: center; gap: .5em;
min-height: 28px;
margin: 0;
padding: 0 9px;
background: rgba(13, 16, 20, .72);
border: 1px solid var(--frame);
border-radius: 3px;
color: var(--cream);
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .12em;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
html.outside .slot-controls [data-anchor]::before {
content: "";
position: absolute; left: 50%; top: 50%;
width: max(100%, 44px); height: 44px;
transform: translate(-50%, -50%);
}
html.outside .slot-controls [data-anchor][data-on] { position: absolute; left: 0; top: 0; }
html.outside .slot-controls [data-anchor]:not([data-on]) { transform: none !important; }
html.outside .slot-controls [data-anchor]:is(:hover, :focus-visible) { border-color: var(--ember); color: var(--ember-hot); }
html.outside .slot-controls [aria-pressed="true"] {
color: var(--withheld);
border-color: var(--withheld-line);
background: rgba(232, 163, 61, .12);
}
html.outside .org-ceo s { color: var(--dim); }
/* The bloom figure is one big button: tap the shell to burst it. */
html.outside .figure-hit {
-webkit-appearance: none; appearance: none;
position: absolute; inset: 0;
margin: 0; padding: 0;
border: 0;
background: none;
cursor: pointer;
border-radius: 2px;
}
html.outside .figure-hit:focus-visible { outline-offset: -2px; }
/* Readouts and controls under a figure. */
html.outside .slot > .fig-controls {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 16px;
}
html.outside .slot > .fig-readout {
margin-top: 16px;
min-height: 2.7em;
font: 500 .6875rem/1.35 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cream);
}
html.outside .slot > .fig-readout:empty { min-height: 0; margin-top: 0; }
html.outside .fig-readout[data-state="withheld"] { color: var(--withheld); }
html.outside .fig-readout .chip { margin-right: 8px; }
/* ADMITTED: the one mint moment on the site (seats program sets data-state). */
html.outside .fig-readout[data-readout="seats"][data-state="admitted"] {
color: var(--admitted);
text-shadow: 0 0 12px rgba(79, 227, 161, .45);
}
html.outside .fig-readout[data-readout="seats"][data-state="again"] { color: var(--cream); }
html.outside .slot > figcaption {
margin-top: 16px;
max-width: 62ch;
font-size: .8125rem;
line-height: 1.5;
color: var(--dim);
text-wrap: pretty;
}
/* No renderer at all: slots shrink to their captions, controls stay reachable. */
html.outside[data-beam="none"] figure.slot:not(.slot-trace) .slot-area {
aspect-ratio: auto;
height: auto;
min-height: 0;
}
html.outside[data-beam="none"] figure.slot:not(.slot-trace) .slot-controls { position: static; padding: 0; }
html.outside[data-beam="none"] .figure-hit { display: none; }
/* =============================================================================================
7. Sections
============================================================================================= */
/* ---- 01 Signal (hero) ---------------------------------------------------------------------------- */
html.outside .hero {
position: relative;
padding-top: calc(var(--bar-h) + clamp(40px, 9vh, 96px));
padding-bottom: clamp(56px, 10vh, 120px);
background: none;
}
html.outside .hero > * { grid-column: 1 / -1; }
html.outside .hero > .eyebrow { color: var(--signal); }
html.outside .hero > h1 { margin-top: 18px; margin-left: -.045em; }
html.outside .hero .eyebrow a { color: inherit; }
html.outside .hero .eyebrow sup a { color: var(--dim); }
html.outside .hero .h1-line { white-space: nowrap; }
html.outside .hero .tagline {
margin-top: 20px;
font-family: var(--ff-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.625rem, 3.4vw, 3.25rem);
font-variation-settings: "opsz" 72;
line-height: 1.1;
letter-spacing: -.015em;
color: var(--cream);
text-wrap: balance;
}
html.outside .hero .role {
margin-top: 22px;
font-family: var(--ff-body);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.4;
color: var(--cream);
}
html.outside .hero-email {
display: flex; align-items: stretch; gap: 8px;
margin-top: 24px;
}
html.outside .hero-email .email {
flex: 1 1 auto;
display: inline-flex; align-items: center;
min-height: 48px;
padding: 0 16px;
border: 1px solid var(--ember);
border-radius: 3px;
font: 500 .9375rem/1.2 var(--ff-mono);
letter-spacing: -.01em;
text-decoration: none;
color: var(--cream);
}
html.outside .hero-email .email:hover { background: rgba(255, 106, 42, .08); }
html.outside .hero-email .copy { min-height: 48px; }
html.outside .hero > .slot { margin-top: 28px; }
html.outside .hero > .hero-deck { margin-top: 28px; }
/* 2 x 2 readouts. */
html.outside .readouts-hero {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px var(--gutter);
margin-top: 32px;
}
html.outside .readouts-hero > .ro { padding-top: 14px; }
html.outside .readouts-hero .ro-v { font-size: clamp(2rem, 3.6vw, 3.5rem); }
html.outside .hero-more { margin-top: 28px; font-size: 1rem; }
html.outside .hero-more a { text-decoration-color: var(--ember); }
html.outside .cue {
margin-top: 40px;
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dim);
}
/* The sound hint never moves the page: it floats at the cue's row. */
html.outside .sound-hint {
position: absolute; z-index: 2;
right: var(--pad-x);
bottom: calc(clamp(56px, 10vh, 120px) - 14px);
display: flex; align-items: center; gap: 12px;
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--paper);
}
html.outside .sound-hint button { border-color: var(--ember); color: var(--ember-hot); }
/* ---- 02 VenableDove Games ------------------------------------------------------------------------ */
/* .sec-split holds the head, the bloom and the body, so the sticky bloom stops before the games list. */
html.outside .sec-split {
display: grid;
grid-template-columns: subgrid;
align-content: start;
}
html.outside .sec-split > * { grid-column: 1 / -1; min-width: 0; }
html.outside .sec-split > .slot { margin-top: 48px; }
html.outside .sec-games .sec-body { margin-top: 48px; }
html.outside .sec-wide { margin-top: 88px; }
html.outside .games { border-bottom: 1px solid var(--hairline); }
html.outside .game {
position: relative;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
column-gap: 16px;
align-items: start;
padding: 26px 0 28px;
border-top: 1px solid var(--hairline);
}
html.outside .game > * { grid-column: 1 / -1; }
html.outside .game .icon {
grid-column: 1; grid-row: 1 / span 2;
width: 48px; height: 48px;
border-radius: 22.4%;
}
html.outside .game h3 { grid-column: 2; grid-row: 1; align-self: end; }
html.outside .game .genre {
grid-column: 2; grid-row: 2;
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
margin-top: 6px;
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dim);
}
html.outside .game.no-icon h3,
html.outside .game.no-icon .genre { grid-column: 1 / -1; }
html.outside .game .line {
margin-top: 16px;
font-family: var(--ff-display);
font-style: italic;
font-weight: 300;
font-size: 1.375rem;
font-optical-sizing: auto;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--cream);
}
html.outside .game .detail { margin-top: 8px; max-width: 58ch; font-size: .9375rem; line-height: 1.5; }
html.outside .game .link { margin-top: 14px; font-size: .9375rem; }
html.outside .game .link a { white-space: nowrap; }
html.outside .game:hover .line { color: #fff; }
html.outside .proof-block { margin-top: 96px; }
html.outside .proof-intro { margin-top: 10px; color: var(--dim); font-size: .9375rem; }
/* Mobile: a contained horizontal row of prints that bleeds to the screen edges. */
html.outside .proof {
display: flex; align-items: flex-start;
gap: 12px;
margin-top: 28px;
margin-inline: calc(-1 * var(--margin));
padding-inline: var(--margin);
padding-bottom: 8px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--margin);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
html.outside .proof::-webkit-scrollbar { display: none; }
html.outside .proof > .capture { flex: none; scroll-snap-align: start; }
html.outside .proof > .capture-wide { width: 78vw; }
html.outside .proof > .capture-tall { width: 52vw; }
html.outside .sec-wide > .links { margin-top: 48px; }
/* ---- 03 Command for Philips Hue ------------------------------------------------------------------ */
html.outside .sec-hue > .slot { margin-top: 44px; }
html.outside .sec-hue .sec-body { margin-top: 48px; }
html.outside .app { display: flex; align-items: center; gap: 18px; }
html.outside .app-icon { flex: none; width: 64px; height: 64px; border-radius: 22.4%; }
/* ---- 04 Pulse from pixels ------------------------------------------------------------------------ */
html.outside .reveal {
max-width: 42ch;
font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
line-height: 1.42;
color: var(--cream);
text-wrap: pretty;
}
html.outside .sec-pulse > .slot { margin-top: 56px; }
html.outside .sec-pulse .sec-body { margin-top: 56px; }
/* ---- 05 The money engine ------------------------------------------------------------------------- */
html.outside .sec-money > .slot { margin-top: 44px; }
html.outside .sec-money .sec-body { margin-top: 48px; }
/* ---- 06 Civic AI ------------------------------------------------------------------------------------ */
html.outside .credit {
font: 500 .6875rem/1.5 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cream);
max-width: 64ch;
padding-left: 14px;
border-left: 1px solid var(--ember);
}
html.outside .sec-civic > .slot { margin-top: 56px; }
html.outside .sec-civic .sec-body { margin-top: 56px; }
/* ---- 07 In The Book Club ------------------------------------------------------------------------- */
html.outside figure.pull-lg blockquote p { font-size: clamp(2rem, 4.4vw, 4.25rem); line-height: 1.04; }
html.outside .sec-bookclub > .slot { margin-top: 48px; }
html.outside .sec-bookclub .sec-body { margin-top: 48px; }
/* The retired themes: a button that reads as inline text. */
html.outside .egg { position: relative; }
html.outside .egg-themes {
-webkit-appearance: none; appearance: none;
margin: 0; padding: 0;
border: 0;
background: none;
color: var(--cream);
font: inherit;
text-decoration: underline dotted 1px var(--dim);
text-underline-offset: 4px;
cursor: help;
}
html.outside .egg-x {
position: absolute; z-index: 6;
left: 0; top: calc(100% + 8px);
width: max-content;
max-width: min(44ch, calc(100vw - 32px));
padding: 8px 11px;
background: var(--void-2);
border: 1px solid var(--frame);
border-radius: 3px;
font: 500 .6875rem/1.5 var(--ff-mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--dim);
white-space: normal;
opacity: 0;
visibility: hidden;
transform: translate3d(0, -4px, 0);
transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 0s linear 160ms;
pointer-events: none;
}
html.outside .egg-x s { text-decoration-color: var(--ember); }
html.outside .egg-themes:is(:hover, :focus-visible) + .egg-x {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
/* ---- 08 The board --------------------------------------------------------------------------------- */
html.outside .sec-board > .slot { margin-top: 44px; }
html.outside .sec-board .sec-body { margin-top: 48px; }
html.outside .pattern h3 { margin-bottom: 16px; }
html.outside .flow {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
font: 500 .75rem/1 var(--ff-mono);
letter-spacing: .1em;
color: var(--cream);
}
html.outside .flow > li { display: inline-flex; align-items: center; white-space: nowrap; }
html.outside .flow .arrow { display: inline-block; padding: 0 .7em; color: var(--ember); }
html.outside .flow > li:nth-last-child(2) { color: var(--ember-hot); }
html.outside .flow-line { margin-top: 16px; color: var(--dim); font-size: .9375rem; }
/* ---- 09 The bench --------------------------------------------------------------------------------- */
html.outside .bench-list { margin-top: 64px; border-bottom: 1px solid var(--hairline); }
html.outside .bench-item {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 20px;
padding: 32px 0 36px;
border-top: 1px solid var(--hairline);
scroll-margin-top: calc(var(--bar-h) + 16px);
}
html.outside .bi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
html.outside .bi-status { display: inline-flex; }
html.outside .bi-main .one { font-size: 1.0625rem; line-height: 1.45; color: var(--cream); max-width: 52ch; }
html.outside .bi-main .detail { margin-top: 12px; max-width: 62ch; font-size: .9375rem; line-height: 1.55; }
html.outside .bi-quote { margin-top: 20px; }
html.outside .bi-quote p { font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.2; }
/* Small readouts: one instrument line each. */
html.outside .readouts-sm { display: block; }
html.outside .readouts-sm > .ro {
display: flex; align-items: baseline; gap: 12px;
padding: 9px 0 10px;
border-top: 1px solid var(--hairline);
}
html.outside .readouts-sm > .ro:last-child { border-bottom: 1px solid var(--hairline); }
html.outside .readouts-sm .ro-v { font-size: 1.375rem; letter-spacing: -.02em; }
html.outside .readouts-sm .ro-l { margin-top: 0; max-width: none; }
html.outside .readouts-sm > .ro-flip .ro-l { order: -1; }
html.outside .bi-side > * + * { margin-top: 18px; }
html.outside .slot-mini .fig-controls { margin-top: 12px; }
html.outside .slot-mini > .fig-readout { margin-top: 12px; min-height: 1.35em; }
/* ---- 10 The trace --------------------------------------------------------------------------------- */
html.outside .sec-trace > .slot { margin-top: 56px; }
/* Graticule: 10 x 8 dotted divisions at 4.5% (SPEC 5.6). */
html.outside .slot-trace .slot-area::before,
html.outside .slot-trace .slot-area::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
}
html.outside .slot-trace .slot-area::before {
background: repeating-linear-gradient(180deg, var(--graticule) 0 1px, transparent 1px 4px);
-webkit-mask: linear-gradient(90deg, #000 1px, transparent 1px) 0 0 / 10% 100% repeat-x, linear-gradient(90deg, transparent calc(100% - 1px), #000 calc(100% - 1px)) 0 0 / 100% 100% no-repeat;
mask: linear-gradient(90deg, #000 1px, transparent 1px) 0 0 / 10% 100% repeat-x, linear-gradient(90deg, transparent calc(100% - 1px), #000 calc(100% - 1px)) 0 0 / 100% 100% no-repeat;
}
html.outside .slot-trace .slot-area::after {
background: repeating-linear-gradient(90deg, var(--graticule) 0 1px, transparent 1px 4px);
-webkit-mask: linear-gradient(180deg, #000 1px, transparent 1px) 0 0 / 100% 12.5% repeat-y, linear-gradient(180deg, transparent calc(100% - 1px), #000 calc(100% - 1px)) 0 0 / 100% 100% no-repeat;
mask: linear-gradient(180deg, #000 1px, transparent 1px) 0 0 / 100% 12.5% repeat-y, linear-gradient(180deg, transparent calc(100% - 1px), #000 calc(100% - 1px)) 0 0 / 100% 100% no-repeat;
}
/* Axis labels, start-aligned on a small tick; the last one is end-aligned. Two tiers on phones. */
html.outside .trace-axis {
position: absolute; left: 0; right: 0; bottom: 0;
height: 0;
pointer-events: none;
}
html.outside .trace-axis > span {
position: absolute; left: var(--at); bottom: 6px;
padding-left: 6px;
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dim);
white-space: nowrap;
}
html.outside .trace-axis > span::before {
content: "";
position: absolute; left: 0; bottom: -6px;
width: 1px; height: 14px;
background: var(--frame);
}
html.outside .trace-axis > span:last-child { left: auto; right: 0; padding: 0 6px 0 0; }
html.outside .trace-axis > span:last-child::before { left: auto; right: 0; }
html.outside .trace-axis > span:nth-child(even) { bottom: 22px; }
html.outside .trace-axis > span:nth-child(even)::before { height: 30px; }
/* The two amber spans: a dashed bracket along the top of their span, their chip beneath it. */
html.outside .trace-spans { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
html.outside .trace-span {
position: absolute; left: var(--at); top: 10px;
width: var(--w);
height: 0;
border-top: 1px dashed var(--withheld-line);
}
html.outside .trace-span::before,
html.outside .trace-span::after {
content: "";
position: absolute; top: -4px;
width: 1px; height: 7px;
background: var(--withheld-line);
}
html.outside .trace-span::before { left: 0; }
html.outside .trace-span::after { right: 0; }
html.outside .trace-span > .chip { position: absolute; left: 0; top: 10px; pointer-events: auto; }
html.outside .trace-span + .trace-span > .chip { top: 40px; }
html.outside .trace-span + .trace-span { border-top-style: dotted; }
html.outside .trace-span .chip-x { top: 44px; }
html.outside .trace-span + .trace-span .chip-x { top: 74px; }
html.outside .trace-slider {
position: absolute; inset: 0; z-index: 2;
cursor: ew-resize;
touch-action: pan-y;
border-radius: 2px;
}
html.outside .trace-slider:focus-visible { outline-offset: 4px; }
html.outside .trace-readout {
font-size: .8125rem !important;
letter-spacing: .1em !important;
}
html.outside .trace-readout[data-state="peak"] { color: var(--ember-hot); }
html.outside .sec-trace .sec-body { margin-top: 64px; }
/* Each milestone: the date on a mono line (ranges keep their en dash), the event below it. */
html.outside .milestones { column-gap: var(--gutter); }
html.outside .milestones > li {
padding: 14px 0 15px;
border-top: 1px solid var(--hairline);
break-inside: avoid;
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ember-hot);
}
html.outside .milestones time { font: inherit; letter-spacing: inherit; color: inherit; }
html.outside .milestones .ms-t {
display: block;
margin-top: 6px;
font: 400 .9375rem/1.45 var(--ff-body);
letter-spacing: 0;
text-transform: none;
color: var(--paper);
transition: color 160ms var(--ease-out);
}
html.outside.js .milestones > li[data-date] { cursor: pointer; }
html.outside.js .milestones > li[data-date]:hover .ms-t { color: var(--cream); }
html.outside .milestones > li[data-active] { border-top-color: var(--ember); }
html.outside .milestones > li[data-active] .ms-t { color: var(--cream); }
/* ---- 11 Readouts ---------------------------------------------------------------------------------- */
html.outside .sec-readouts > .slot { margin-top: 44px; }
html.outside .sec-readouts .sec-body { margin-top: 48px; }
html.outside .langs,
html.outside .reserve { max-width: 62ch; font-size: .9375rem; color: var(--paper); }
html.outside .sec-readouts .sec-body > .langs { margin-top: 36px; }
html.outside .sec-readouts .sec-body > .reserve { margin-top: 14px; color: var(--dim); }
html.outside .rule {
max-width: 40ch;
font-family: var(--ff-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.375rem, 2vw, 1.75rem);
line-height: 1.2;
color: var(--cream);
}
/* The evidence slot, re-parented by ui.js under the tapped row on phones. */
html.outside .lrow > .slot-evidence { grid-column: 1 / -1; margin-top: 10px; }
/* ---- 12 Misfires and 13 The lab: tables ------------------------------------------------------------ */
html.outside table.misfires,
html.outside table.lab {
width: 100%;
margin-top: 56px;
border-collapse: collapse;
font-size: .9375rem;
line-height: 1.45;
}
html.outside :is(table.misfires, table.lab) :is(th, td) {
padding: 0;
text-align: left;
vertical-align: top;
font-weight: 400;
}
html.outside :is(table.misfires, table.lab) thead {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
html.outside :is(table.misfires, table.lab) tbody,
html.outside :is(table.misfires, table.lab) tr,
html.outside :is(table.misfires, table.lab) tbody :is(th, td) { display: block; }
html.outside :is(table.misfires, table.lab) tbody tr {
position: relative;
padding: 22px 0 24px;
border-top: 1px solid var(--hairline);
}
html.outside :is(table.misfires, table.lab) tbody tr:last-child { border-bottom: 1px solid var(--hairline); }
html.outside :is(table.misfires, table.lab) tbody th { color: var(--cream); }
html.outside :is(table.misfires, table.lab) tbody td { color: var(--paper); }
/* Misfires: three labeled lines per row, a 32 px glyph gutter on the left. */
html.outside table.misfires tbody tr { padding-left: 32px; }
html.outside table.misfires tbody :is(th, td) + :is(th, td) { margin-top: 14px; }
html.outside table.misfires tbody :is(th, td)::before {
content: attr(data-label);
display: block;
margin-bottom: 6px;
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dim);
}
html.outside table.misfires tbody th { font-size: 1.0625rem; font-weight: 500; }
html.outside #misfire-ieee output { color: var(--ember-hot); }
html.outside .ieee-note { color: var(--dim); }
/* Lab: name, description, tags. */
html.outside table.lab tbody th { font-weight: 600; font-stretch: 92%; font-size: 1.0625rem; }
html.outside table.lab tbody td:nth-child(2) { margin-top: 6px; }
html.outside table.lab tbody td:last-child {
margin-top: 10px;
font: 500 .6875rem/1.5 var(--ff-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dim);
}
/* ---- 14 The record --------------------------------------------------------------------------------- */
html.outside .sec-record .sec-body { margin-top: 64px; }
html.outside .sec-record h3 { margin-bottom: 18px; }
html.outside .record-side h3 + * { margin-top: 0; }
html.outside .record-side > * + h3 { margin-top: 48px; }
html.outside .jobs > .job { padding: 18px 0 20px; border-top: 1px solid var(--hairline); }
html.outside .jobs > .job:last-child { border-bottom: 1px solid var(--hairline); }
/* Company, then dates at the right, then the role on its own line. The " · " separators are for the
plain page and the print; here the layout separates them, so they collapse to nothing. */
html.outside .job-head {
display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0;
font-size: 0;
line-height: 1.5;
color: var(--paper);
}
html.outside .job-head strong { font-size: 1.0625rem; margin-right: auto; padding-right: 16px; }
html.outside .job-head .job-role { order: 3; flex-basis: 100%; margin-top: 2px; font-size: .9375rem; }
html.outside .job-head .when {
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dim);
white-space: nowrap;
}
html.outside .job-points { margin-top: 12px; }
html.outside .job-points > li { font-size: .875rem; }
html.outside .job-note { margin-top: 6px; font-size: .9375rem; }
html.outside .edu > li { padding: 12px 0; border-top: 1px solid var(--hairline); font-size: .9375rem; }
html.outside .edu > li:last-child { border-bottom: 1px solid var(--hairline); }
html.outside .caps { counter-reset: cap; }
html.outside .caps > li {
counter-increment: cap;
position: relative;
padding: 14px 0 15px 40px;
border-top: 1px solid var(--hairline);
font-size: .9375rem;
line-height: 1.5;
}
html.outside .caps > li:last-child { border-bottom: 1px solid var(--hairline); }
html.outside .caps > li::before {
content: counter(cap, decimal-leading-zero);
position: absolute; left: 0; top: calc(14px + .3em);
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .1em;
color: var(--ember-hot);
}
html.outside .cap-name { font-weight: 600; font-stretch: 92%; color: var(--cream); }
html.outside .cap-ev { display: block; margin-top: 4px; color: var(--dim); font-size: .875rem; }
html.outside .stack { font-size: .9375rem; max-width: 62ch; }
html.outside .interests { margin-top: 14px; font-size: .9375rem; color: var(--dim); }
html.outside .interests strong { font-weight: 500; }
html.outside .print-action { margin-top: 56px; }
/* ---- 15 Transmit ------------------------------------------------------------------------------------ */
html.outside .sec-contact { text-align: center; padding-bottom: clamp(72px, 12vh, 144px); }
html.outside .sec-contact .sec-head { display: flex; flex-direction: column; align-items: center; }
html.outside .sec-contact > .slot { margin-top: 32px; }
html.outside .sec-contact .sec-body {
display: flex; flex-direction: column; align-items: center;
}
html.outside .sec-contact .sec-body > * + * { margin-top: 0; }
html.outside .transmit-email {
margin-top: 8px;
max-width: 100%;
font-family: var(--ff-display);
font-weight: 300;
font-size: clamp(1.75rem, 6.2vw, 6.5rem);
font-variation-settings: "opsz" 144, "SOFT" 0;
line-height: 1;
letter-spacing: -.02em;
white-space: nowrap;
}
html.outside .transmit-email a {
display: inline-block;
padding-bottom: .08em;
text-decoration-thickness: 1px;
text-underline-offset: .14em;
}
html.outside .transmit-actions {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
margin-top: 36px !important;
}
html.outside .transmit-line {
margin-top: 40px !important;
max-width: 40ch;
font-size: 1.0625rem;
line-height: 1.5;
color: var(--cream);
text-wrap: balance;
}
html.outside #monroe-time {
margin-top: 10px !important;
max-width: 52ch;
font: 500 .6875rem/1.5 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--signal);
}
html.outside .contact-links {
display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
gap: 10px 28px;
margin-top: 56px !important;
padding-top: 28px;
border-top: 1px solid var(--hairline);
width: min(100%, 880px);
font-size: .9375rem;
}
html.outside .contact-links > li:first-child { flex-basis: 100%; }
html.outside .contact-links .note { display: block; margin-top: 4px; font-size: .8125rem; color: var(--dim); }
html.outside .reenter {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-top: 40px !important;
}
html.outside .reenter kbd { color: var(--dim); }
html.outside .colophon {
margin-top: 48px !important;
max-width: 68ch;
font-size: .8125rem;
line-height: 1.6;
color: var(--dim);
text-wrap: pretty;
}
html.outside .colophon small { font-size: 1em; }
/* ---- Notes and footer ------------------------------------------------------------------------------ */
html.outside #notes { padding-block: 56px 32px; }
html.outside #notes-h {
font: 500 .6875rem/1.3 var(--ff-mono) !important;
letter-spacing: .16em !important;
text-transform: uppercase;
color: var(--dim) !important;
}
html.outside .notes {
margin-top: 20px;
padding-left: 3.2ch !important;
list-style: decimal !important;
columns: 1;
column-gap: var(--gutter);
font: 400 .6875rem/1.55 var(--ff-mono);
letter-spacing: .02em;
color: var(--dim);
}
html.outside .notes > li {
padding: 5px 0 5px 4px;
break-inside: avoid;
scroll-margin-top: calc(var(--bar-h) + 24px);
}
html.outside .notes > li::marker { color: var(--ember-hot); font: 500 .6875rem/1 var(--ff-mono); }
html.outside .notes > li:target { color: var(--paper); }
html.outside .notes code { font-size: 1em !important; color: var(--paper) !important; white-space: nowrap; }
html.outside .ls code { white-space: nowrap; }
html.outside .foot {
padding: 24px var(--pad-x) 40px;
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dim);
}
html.outside .foot p { margin: 0; }
/* =============================================================================================
8. Dialogs: the index sheet and the key legend
============================================================================================= */
html.outside:has(dialog[open]) { overflow: hidden; }
html.outside dialog.sheet {
box-sizing: border-box;
position: fixed;
inset: 0 0 0 auto;
width: min(440px, 100vw);
height: 100dvh;
max-width: 100vw;
max-height: none;
margin: 0;
padding: 0 0 calc(24px + env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--void-2);
border: 0;
border-left: 1px solid var(--hairline);
color: var(--paper);
font: 400 1rem/1.5 var(--ff-body);
-webkit-font-smoothing: antialiased;
}
html.outside dialog.sheet[open] { animation: jl-sheet-in 280ms var(--ease-out) both; }
html.outside dialog.sheet::backdrop {
background: rgba(7, 9, 12, .62);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
html.outside .sheet-head {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
min-height: var(--bar-h);
padding: 0 20px 0 24px;
background: var(--void-2);
border-bottom: 1px solid var(--hairline);
}
html.outside .sheet-title {
margin: 0;
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dim);
}
html.outside .sheet-close { min-height: 36px !important; }
html.outside .sheet-nav { padding: 8px 24px 0; }
html.outside .sheet-list { margin: 0; padding: 0; list-style: none; counter-reset: sheet; }
html.outside .sheet-list > li { counter-increment: sheet; border-bottom: 1px solid var(--hairline); }
html.outside .sheet-list a {
display: flex; align-items: baseline; gap: 16px;
min-height: 48px;
padding: 11px 0 9px;
font-family: var(--ff-display);
font-weight: 300;
font-size: 1.5rem;
font-optical-sizing: auto;
line-height: 1.1;
letter-spacing: -.015em;
text-decoration: none !important;
color: var(--cream);
}
html.outside .sheet-list a::before {
content: counter(sheet, decimal-leading-zero);
flex: none;
width: 2.4ch;
font: 500 .6875rem/1 var(--ff-mono);
letter-spacing: .1em;
color: var(--dim);
transform: translateY(-.25em);
}
html.outside .sheet-list a:hover { color: var(--ember-hot); }
html.outside .sheet-list a[aria-current]::before { color: var(--ember-hot); }
html.outside .sheet-peak {
margin: 20px 24px 0;
font-size: .875rem;
color: var(--paper);
}
html.outside .sheet-peak .chip { margin-right: 8px; }
html.outside .sheet-controls {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 24px 24px 0;
padding: 0;
list-style: none;
}
/* Keys: a centred plate. */
html.outside dialog.sheet-keys {
inset: 0;
width: min(560px, calc(100vw - 32px));
height: auto;
max-height: calc(100dvh - 32px);
margin: auto;
padding-bottom: 24px;
border: 1px solid var(--hairline);
border-radius: 4px;
box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
html.outside dialog.sheet-keys[open] { animation: jl-plate-in 220ms var(--ease-out) both; }
html.outside .keys { margin: 8px 24px 0; }
html.outside .keys > div {
display: grid;
grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr);
gap: 12px;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid var(--hairline);
}
html.outside .keys dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--dim); font-size: .8125rem; }
html.outside .keys dd { margin: 0; font-size: .9375rem; color: var(--paper); }
html.outside .keys-note { margin: 18px 24px 0; font-size: .8125rem; color: var(--dim); max-width: 56ch; }
html.outside .keys-toggle { margin: 18px 24px 0; }
/* The idle egg's caption (dvd). */
html.outside .idle-caption {
position: fixed; left: var(--pad-x); bottom: 18px; z-index: 25;
margin: 0;
padding: 8px 11px;
background: rgba(13, 16, 20, .86);
border: 1px solid var(--hairline);
border-radius: 3px;
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dim);
pointer-events: none;
}
/* =============================================================================================
9. States: the intro, direct entry, still mode, sleep, CSS grain
============================================================================================= */
/* ---- The intro (SPEC 4.1). The name and tagline are revealed behind the beam head (--bx); everything
else waits for .intro-rest (role, deck, readouts rise) or for .intro to go (the CTAs). The failsafe
forces all of it visible 2.2 s after the world switch, even if JS stalls. ------------------------ */
html.outside.intro:not(.rm) .hero .h1-line,
html.outside.intro:not(.rm) .hero .tagline {
clip-path: inset(-.7em calc(100% - var(--bx)) -.7em -.3em);
}
html.outside.intro:not(.rm) .hero :is(.eyebrow, .role, .hero-deck, .readouts-hero, .hero-email, .hero-more, .cue) {
opacity: 0;
}
html.outside.intro:not(.rm) .hero * {
animation: jl-show 0s linear 2.2s forwards;
}
html.outside.intro.intro-rest:not(.rm) .hero :is(.role, .hero-deck, .readouts-hero) {
animation: jl-show 0s linear 2.2s forwards, jl-rise 500ms var(--ease-out) both;
}
html.outside.intro.intro-rest:not(.rm) .hero .eyebrow { opacity: 1; }
html.outside .hero :is(.hero-email, .hero-more, .cue) { transition: opacity 400ms var(--ease-out); }
/* The eyebrow types in (ui.js writes the typed prefix into data-typed, then removes it). */
html.outside.intro:not(.rm) .hero .eyebrow[data-typed] {
position: relative;
opacity: 1;
-webkit-text-fill-color: transparent;
}
html.outside.intro:not(.rm) .hero .eyebrow[data-typed]::after {
content: attr(data-typed) "_";
content: attr(data-typed) "_" / "";
position: absolute; inset: 0;
-webkit-text-fill-color: var(--signal);
color: var(--signal);
}
/* Direct entry: a 300 ms fade of the hero, no burn-in. */
html.outside[data-entry="direct"] .hero > * { animation: jl-fade 300ms var(--ease-out) both; }
html.outside[data-entry="direct"].intro:not(.rm) .hero * { animation: jl-show 0s linear 2.2s forwards; }
html.outside[data-entry="direct"].intro.intro-rest:not(.rm) .hero :is(.role, .hero-deck, .readouts-hero) {
animation: jl-show 0s linear 2.2s forwards, jl-rise 500ms var(--ease-out) both;
}
/* ---- Still mode: no beat, no motion, nothing waits to appear. ---------------------------------- */
html.outside.rm #doc *,
html.outside.rm #doc *::before,
html.outside.rm #doc *::after,
html.outside.rm dialog,
html.outside.rm dialog * {
animation: none !important;
transition: none !important;
}
html.outside.rm .bar-dot { box-shadow: 0 0 6px 1px rgba(255, 106, 42, .7); }
/* ---- Sleep: every CSS loop stops with the frame loop. -------------------------------------------- */
html.sleep .bar-dot { animation-play-state: paused; }
/* ---- CSS grain and vignette for the Canvas2D fallback and the no-canvas world (SPEC 3.5, 5.9).
Painted between the beam canvas and #doc, so it touches the phosphor, not the text. ------------------ */
html.outside[data-beam="canvas2d"] body::before,
html.outside[data-beam="none"] body::before {
content: "";
position: fixed; inset: 0; z-index: 1; /* same layer as #doc, earlier in the tree: under it */
pointer-events: none;
background: var(--grain-tile, none) 0 0 / 128px 128px repeat;
opacity: .035;
}
html.outside[data-beam="canvas2d"] body::after,
html.outside[data-beam="none"] body::after {
content: "";
position: fixed; inset: 0; z-index: 0; /* after the canvas in the tree: over it, under #doc */
pointer-events: none;
background: radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .08) 100%);
}
/* =============================================================================================
10. Breakpoints
============================================================================================= */
/* ---- ≥ 768 ------------------------------------------------------------------------------------ */
@media (min-width: 768px) {
html.outside #doc { font-size: 1.0625rem; }
html.outside .lead,
html.outside .hero .hero-deck { font-size: 1.1875rem; }
/* Bands (pulse, chain, trace, transmit, ppg) use their desktop proportions from here up. */
html.outside .slot-band .slot-area,
html.outside .slot-mini .slot-area,
html.outside .slot-evidence .slot-area {
aspect-ratio: var(--aspect, auto);
height: var(--h, auto);
min-height: var(--min-h, 0px);
}
html.outside figure.slot:has(> .fig-readout) { grid-template-columns: minmax(0, 1fr) auto; }
html.outside figure.slot:has(> .fig-readout) > .fig-readout { grid-column: 1; grid-row: 2; }
html.outside figure.slot:has(> .fig-readout) > .fig-controls { grid-column: 2; grid-row: 2; justify-content: flex-end; }
html.outside figure.slot:has(> .fig-readout) > .fig-readout:empty { margin-top: 16px; min-height: 1.35em; }
html.outside figure.slot-mini:has(> .fig-readout) > .fig-controls { grid-column: 1; justify-content: flex-start; }
html.outside figure.slot-mini:has(> .fig-readout) > .fig-readout { grid-column: 2; text-align: right; }
html.outside figure.slot-mini:has(> .fig-readout) > .fig-readout:empty { margin-top: 12px; }
html.outside .slot > .fig-readout { min-height: 1.35em; }
html.outside .readouts { --ro-cols: 3; }
/* The bar. */
html.outside .bar-peak { display: inline-flex; }
/* Hero: name on one line, the pulse band, then deck + email (1–6) beside 2 x 2 readouts (8–12). */
html.outside .hero { padding-top: calc(var(--bar-h) + clamp(48px, 18vh - var(--bar-h), 180px)); }
html.outside .hero > .eyebrow { grid-row: 1; }
html.outside .hero > h1 { grid-row: 2; margin-top: 18px; }
html.outside .hero > .tagline { grid-row: 3; margin-top: clamp(22px, 2.7vw, 44px); }
html.outside .hero > .slot { grid-row: 4; margin-top: 22px; }
html.outside .hero > .role { grid-row: 5; grid-column: 1 / 8; margin-top: 26px; }
html.outside .hero > .hero-deck { grid-row: 6; grid-column: 1 / 8; margin-top: 12px; }
html.outside .hero > .hero-email { grid-row: 7; grid-column: 1 / 8; margin-top: 18px; }
html.outside .hero > .hero-more { grid-row: 8; grid-column: 1 / 8; margin-top: 8px; }
html.outside .hero > .readouts-hero { grid-row: 5 / span 4; grid-column: 8 / -1; align-self: start; margin-top: 30px; }
html.outside .hero > .cue { grid-row: 9; margin-top: 30px; }
html.outside .hero > .print-only,
html.outside .hero > .door { grid-row: 10; }
html.outside .hero .h1-line { white-space: normal; }
html.outside .hero-email { align-items: center; gap: 14px; }
html.outside .hero-email .email {
flex: none;
min-height: 44px;
padding: 0;
border: 0;
font-size: 1.0625rem;
text-decoration: underline 1px var(--ember);
text-underline-offset: 5px;
}
html.outside .hero-email .email:hover { background: none; }
html.outside .hero-email .copy { min-height: 44px; }
/* Games list rows: the icon holds a left rail; everything else reads down beside it. */
html.outside .game { grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; }
html.outside .game > * { grid-column: 2; }
html.outside .game .icon { grid-column: 1; width: 56px; height: 56px; grid-row: 1 / span 2; }
html.outside .game.no-icon > :is(h3, .genre) { grid-column: 2; }
html.outside .game .line { margin-top: 18px; }
/* Proof strip: two landscape prints share a row at one height; three phone prints below. */
html.outside .proof {
display: flex; flex-wrap: wrap;
gap: 40px var(--gutter);
margin-inline: 0;
padding: 0;
overflow: visible;
scroll-snap-type: none;
}
html.outside .proof::after { content: ""; order: 2; flex-basis: 100%; height: 0; margin-top: -40px; }
html.outside .proof > .capture { order: 1; width: auto; }
html.outside .proof > .capture-wide { flex: 1.786 1 0; }
html.outside .proof > .capture-wide + .capture-wide { flex-grow: 2.174; }
html.outside .proof { justify-content: space-between; }
html.outside .proof > .capture-tall {
order: 3;
flex: 0 0 min(260px, (100% - 2 * var(--gutter)) / 3);
min-width: 0;
}
html.outside .proof > .capture-tall img { height: auto; max-height: 520px; }
/* Readouts ledger (11): value | label | source from tablet up, beside the evidence slot. */
html.outside .sec-readouts > .sec-head { grid-column: 1 / 8; grid-row: 1; }
html.outside .sec-readouts > .slot {
grid-column: 8 / -1; grid-row: 1 / 3;
align-self: start;
margin-top: 0;
}
html.outside .sec-readouts > .sec-body { grid-column: 1 / 8; grid-row: 2; }
html.outside .sec-readouts { grid-template-rows: auto 1fr; }
html.outside .ledger-main .lrow {
grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
column-gap: 20px;
align-items: baseline;
}
html.outside .ledger-main .lv { grid-row: 1 / span 2; text-align: right; font-size: clamp(1.875rem, 3.4vw, 4rem); }
html.outside .ledger-main .ll { grid-column: 2; }
html.outside .ledger-main .ls { grid-column: 2; }
/* Money ledger: right-aligned values beside their labels. */
html.outside .ledger-money .lrow {
grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
column-gap: 20px;
align-items: baseline;
}
html.outside .ledger-money .lv { text-align: right; }
/* Bench rows: head | main on tablet, side under main. */
html.outside .bench-item {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
}
html.outside .bench-item > .bi-head { grid-column: 1 / 5; flex-direction: column; align-items: flex-start; }
html.outside .bench-item > .bi-main { grid-column: 5 / -1; }
html.outside .bench-item > .bi-side { grid-column: 5 / -1; }
/* Trace: one-tier axis. */
html.outside .trace-axis > span:nth-child(even) { bottom: 6px; }
html.outside .trace-axis > span:nth-child(even)::before { height: 14px; }
/* Milestones: two columns, read down. */
html.outside .milestones { columns: 2; }
/* Tables become tables. */
html.outside :is(table.misfires, table.lab) { display: table; }
html.outside :is(table.misfires, table.lab) thead {
position: static;
width: auto; height: auto;
overflow: visible;
clip: auto; clip-path: none;
}
html.outside :is(table.misfires, table.lab) tbody { display: table-row-group; }
html.outside :is(table.misfires, table.lab) tr { display: table-row; }
html.outside :is(table.misfires, table.lab) tbody :is(th, td),
html.outside :is(table.misfires, table.lab) thead th { display: table-cell; }
html.outside :is(table.misfires, table.lab) thead th {
padding: 0 var(--gutter) 14px 0;
font: 500 .6875rem/1.3 var(--ff-mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dim);
border-bottom: 1px solid var(--hairline);
}
html.outside :is(table.misfires, table.lab) tbody :is(th, td) {
padding: 18px var(--gutter) 20px 0;
border-bottom: 1px solid var(--hairline);
min-height: 44px;
}
html.outside :is(table.misfires, table.lab) tbody tr { padding: 0; border: 0; }
html.outside :is(table.misfires, table.lab) :is(thead, tbody) :is(th, td):last-child { padding-right: 0; }
html.outside table.misfires tbody :is(th, td)::before { content: none; }
html.outside table.misfires tbody :is(th, td) + :is(th, td) { margin-top: 0; }
html.outside table.misfires :is(thead, tbody) :is(th, td):first-child { padding-left: 32px; width: 34%; }
html.outside table.misfires :is(thead, tbody) :is(th, td):nth-child(2) { width: 33%; }
html.outside table.misfires tbody th { font-size: 1rem; }
html.outside table.lab :is(thead, tbody) :is(th, td):first-child { width: 24%; }
html.outside table.lab :is(thead, tbody) :is(th, td):last-child { width: 26%; }
html.outside table.lab tbody td:nth-child(2),
html.outside table.lab tbody td:last-child { margin-top: 0; }
html.outside table.lab tbody td:last-child { padding-top: calc(18px + .25em); }
/* Record: experience beside education and capabilities. */
html.outside .sec-record .sec-body {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: auto 1fr;
}
html.outside .sec-record .sec-body > * { margin-top: 0; }
html.outside .record-exp { grid-column: 1 / 7; grid-row: 1; }
html.outside .record-side { grid-column: 7 / -1; grid-row: 1 / span 2; }
html.outside .print-action { grid-column: 1 / 7; grid-row: 2; align-self: start; margin-top: 48px !important; }
html.outside .notes { columns: 2; }
html.outside .contact-links .note { display: inline; margin: 0 0 0 6px; }
}
/* ---- ≥ 1024: the desktop grid ------------------------------------------------------------------- */
@media (min-width: 1024px) {
/* Slots that sit beside text use their desktop proportions. */
html.outside .slot .slot-area {
aspect-ratio: var(--aspect, auto);
height: var(--h, auto);
min-height: var(--min-h, 0px);
}
html.outside .bar-sec { display: block; }
html.outside .bar-email-long { display: inline; }
html.outside .bar-email-short { display: none; }
html.outside .bar .bar-email { margin-left: 0; }
html.outside .sec-head { grid-column: 1 / 10; }
html.outside .hero > :is(.role, .hero-deck, .hero-email, .hero-more) { grid-column: 1 / 7; }
/* Figures sit beside their text and scroll with it. Never sticky: the phosphor is locked to the
document, so a sticky figure would leave a displaced copy of itself on every frame while scrolling. */
html.outside :is(.sec-split, .sec-hue, .sec-money, .sec-board, .sec-bookclub) > .slot {
align-self: start;
margin-top: 0;
}
html.outside :is(.sec-split, .sec-hue, .sec-money, .sec-board) { grid-template-rows: auto 1fr; }
html.outside :is(.sec-split, .sec-hue, .sec-money, .sec-board) > .slot { grid-row: 1 / 3; }
html.outside .sec-contact > .sec-head { grid-column: 1 / -1; }
/* 02 Games: text 1–6, bloom 8–12. */
html.outside .sec-split > .sec-head { grid-column: 1 / 7; grid-row: 1; }
html.outside .sec-split > .slot { grid-column: 8 / -1; }
html.outside .sec-split > .sec-body { grid-column: 1 / 7; grid-row: 2; }
html.outside .sec-hue .readouts { --ro-cols: 2; }
/* 03 Hue: the mirror. */
html.outside .sec-hue > .slot { grid-column: 1 / 7; }
html.outside .sec-hue > .sec-head { grid-column: 8 / -1; grid-row: 1; }
html.outside .sec-hue > .sec-body { grid-column: 8 / -1; grid-row: 2; }
/* 05 Money and 08 Board: text 1–6, figure 7–12. */
html.outside :is(.sec-money, .sec-board) > .sec-head { grid-column: 1 / 7; grid-row: 1; }
html.outside :is(.sec-money, .sec-board) > .slot { grid-column: 7 / -1; }
html.outside :is(.sec-money, .sec-board) > .sec-body { grid-column: 1 / 7; grid-row: 2; }
/* 04 Pulse: body 1–6, lists 8–12 under the full-width band. */
html.outside .sec-pulse > .sec-body,
html.outside .sec-civic > .sec-body {
display: grid;
grid-template-columns: subgrid;
align-content: start;
}
html.outside .sec-pulse .sec-body > * { grid-column: 1 / 7; }
html.outside .sec-pulse .sec-body > .side { grid-column: 8 / -1; grid-row: 1 / span 3; margin-top: 0; }
/* 06 Civic AI: body 1–7, readouts 9–12. */
html.outside .sec-civic .sec-body > * { grid-column: 1 / 8; }
html.outside .sec-civic .sec-body > .readouts {
--ro-cols: 1;
grid-column: 9 / -1; grid-row: 1 / span 3;
align-self: start;
gap: 24px;
margin-top: 0;
}
html.outside .sec-civic .sec-body > .prose { grid-row: 1; margin-top: 0; }
html.outside .sec-civic .sec-body > .side { grid-row: 2; }
html.outside .sec-civic .sec-body > .links { grid-row: 3; }
/* 07 Book Club: the quote 1–10; body 1–6 beside the shelf 9–12. */
html.outside .sec-bookclub > .sec-head { grid-column: 1 / 11; grid-row: 1; }
html.outside .sec-bookclub > .slot { grid-column: 9 / -1; grid-row: 2; margin-top: 56px; }
html.outside .sec-bookclub > .sec-body { grid-column: 1 / 7; grid-row: 2; margin-top: 56px; }
/* 09 Bench: name + status 1–4, detail 5–9, readouts + link or mini slot 10–12. */
html.outside .bench-item > .bi-main { grid-column: 5 / 10; }
html.outside .bench-item > .bi-side { grid-column: 10 / -1; grid-row: 1; }
html.outside .bench-item > .bi-head,
html.outside .bench-item > .bi-main { grid-row: 1; }
/* 10 Trace: milestones in three columns. */
html.outside .sec-trace > .sec-head { grid-column: 1 / 11; }
html.outside .milestones { columns: 3; }
/* 11 Readouts: ledger 1–7, evidence 8–12 (already side by side from 768). */
html.outside .sec-readouts > .sec-head { grid-column: 1 / 8; }
html.outside .ledger-main .lrow { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
/* 14 Record: experience 1–6, education + capabilities 8–12. */
html.outside .record-side { grid-column: 8 / -1; }
/* The games list across the full width: icon · name + genre · line + detail · link. */
html.outside .game {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
padding: 30px 0 32px;
}
html.outside .game .icon { grid-column: 1; grid-row: 1 / span 3; }
html.outside .game > h3 { grid-column: 2 / 5; grid-row: 1; }
html.outside .game > .genre { grid-column: 2 / 5; grid-row: 2; }
html.outside .game.no-icon > :is(h3, .genre) { grid-column: 2 / 5; }
html.outside .game > .line { grid-column: 5 / -1; grid-row: 1; margin-top: 0; }
html.outside .game > .detail { grid-column: 5 / -1; grid-row: 2 / span 2; }
html.outside .game > .link { grid-column: 2 / 5; grid-row: 3; margin-top: 16px; }
html.outside .notes { columns: 2; }
}
/* ---- ≥ 1180: the bar opens up -------------------------------------------------------------------- */
@media (min-width: 1180px) {
html.outside .bar-nav { display: inline-flex; }
html.outside .bar-controls { display: inline-flex; }
html.outside .bar-index { display: none !important; }
}
/* ---- ≥ 1440 ------------------------------------------------------------------------------------ */
@media (min-width: 1440px) {
/* The link takes the right edge once there is room for it. */
html.outside .game > .line { grid-column: 5 / 10; }
html.outside .game > .detail { grid-column: 5 / 10; }
html.outside .game > .link { grid-column: 10 / -1; grid-row: 1 / span 2; justify-self: end; align-self: start; margin-top: .3em; text-align: right; }
}
/* ---- < 768: phones ------------------------------------------------------------------------------ */
@media (max-width: 767px) {
html.outside .bar-name { letter-spacing: .14em; }
/* Phone order: eyebrow, name, tagline, role, email, the pulse band, deck, readouts. */
html.outside .hero > .eyebrow { order: 1; }
html.outside .hero > h1 { order: 2; }
html.outside .hero > .tagline { order: 3; }
html.outside .hero > .role { order: 4; }
html.outside .hero > .hero-email { order: 5; }
html.outside .hero > .slot { order: 6; }
html.outside .hero > .hero-deck { order: 7; }
html.outside .hero > .readouts-hero { order: 8; }
html.outside .hero > .hero-more { order: 9; }
html.outside .hero > .cue { order: 10; }
html.outside .hero > :is(.print-only, .door) { order: 11; }
/* The name takes two lines on a phone, so it can be set as large as the column allows. */
html.outside .hero .h1-line { display: block; width: max-content; }
html.outside .hero h1 { font-size: clamp(3.5rem, 26vw, 8rem); line-height: .86; }
html.outside .hero .eyebrow { letter-spacing: .06em; line-height: 1.75; }
html.outside .hero .eyebrow [data-bpm-note] { white-space: nowrap; }
html.outside .hero .eyebrow sup a { display: inline; padding: 0; }
html.outside .sec h2 { font-size: clamp(2.5rem, 11.2vw, 3.25rem); line-height: 1; }
html.outside .slot > .fig-readout { letter-spacing: .06em; }
/* Proof strip: the phone prints lead the row, so it opens full height; the wide ones follow. */
html.outside .proof { align-items: center; }
html.outside .proof > .capture-tall { order: -1; }
html.outside .hero > .readouts-hero .ro-v { font-size: 2rem; }
/* The sound hint joins the flow under the cue on phones (it appears after the fold). */
html.outside .sound-hint { position: static; order: 12; margin-top: 16px; flex-wrap: wrap; }
html.outside .sec-split > .slot,
html.outside .sec-hue > .slot,
html.outside .sec-money > .slot,
html.outside .sec-board > .slot,
html.outside .sec-bookclub > .slot { margin-top: 36px; }
/* Ledgers: value on top, then what it counts, then its source. */
html.outside .lv { font-size: 2.25rem; }
html.outside .lv .ev { text-align: left; }
/* Pulse and trace controls stack under the figure. */
html.outside .slot > .fig-controls { grid-row: 2; }
html.outside .slot > .fig-readout { grid-row: 3; margin-top: 14px; }
html.outside .slot > figcaption { grid-row: 4; }
html.outside .slot-mini > .fig-controls { margin-top: 12px; }
/* Trace: span chips drop below the axis, out of the plot. */
html.outside .slot-trace .slot-area { margin-bottom: 84px; }
html.outside .trace-spans { top: 100%; bottom: auto; height: 84px; }
html.outside .trace-span { top: 18px; }
/* Transmit: the address fits one line at 28 px on a 343 px column. */
html.outside .transmit-email { font-size: clamp(1.75rem, 10vw, 3rem); letter-spacing: -.025em; }
html.outside .transmit-actions { width: 100%; }
html.outside .transmit-actions > * { flex: 1 1 0; }
html.outside .bench-item { padding: 28px 0 32px; }
html.outside .bi-side .slot-mini { margin-top: 20px; }
}
/* ---- < 375: the smallest phones ----------------------------------------------------------------- */
@media (max-width: 374px) {
html.outside .bar-name { letter-spacing: .1em; }
html.outside .hero-email .email { font-size: .8125rem; padding: 0 12px; }
}
/* =============================================================================================
11. Forced colors: system colors, no canvas, content intact (SPEC 7.5)
============================================================================================= */
@media (forced-colors: active) {
html.outside #beam-clip,
html.outside #beam,
#fx,
html.outside body::before,
html.outside body::after { display: none !important; }
html.outside .sec h2[data-text]::after,
html.outside .hero .h1-line::after,
html.outside .hero .tagline::after,
html.outside .eyebrow[data-typed]::after { display: none; }
/* The overlays are gone, so the headings need not be positioned (a positioned heading's text
backplate would paint over the eyebrow above it). */
html.outside .sec h2[data-text],
html.outside .hero .h1-line,
html.outside .hero .tagline { position: static; }
html.outside .eyebrow { position: relative; }
html.outside.intro:not(.rm) .hero * { opacity: 1 !important; clip-path: none !important; -webkit-text-fill-color: CanvasText !important; }
html.outside .chip { border: 1px solid CanvasText; forced-color-adjust: auto; }
html.outside .bar { background: Canvas; border-bottom: 1px solid CanvasText; }
html.outside .bar-dot { background: CanvasText; forced-color-adjust: none; }
html.outside :focus-visible { outline-color: Highlight; }
html.outside .slot-controls [data-anchor] { border-color: ButtonText; }
}
/* =============================================================================================
Keyframes
============================================================================================= */
/* The failsafe: whatever was hiding the hero, it is visible now. */
@keyframes jl-show {
to {
opacity: 1;
clip-path: none;
-webkit-mask-image: none;
mask-image: none;
-webkit-text-fill-color: currentcolor;
}
}
@keyframes jl-rise {
from { opacity: 0; transform: translate3d(0, 8px, 0); }
to { opacity: 1; transform: none; }
}
@keyframes jl-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes jl-bar-in {
from { opacity: 0; transform: translate3d(0, -8px, 0); }
to { opacity: 1; transform: none; }
}
@keyframes jl-unclip {
to { clip-path: inset(0 0 0 0); }
}
@keyframes jl-print-line {
0% { opacity: 1; transform: translate3d(0, -100%, 0); }
90% { opacity: 1; }
100% { opacity: 0; transform: translate3d(0, 0, 0); }
}
@keyframes jl-sheet-in {
from { transform: translate3d(24px, 0, 0); opacity: 0; }
to { transform: none; opacity: 1; }
}
@keyframes jl-plate-in {
from { transform: translate3d(0, 8px, 0) scale(.985); opacity: 0; }
to { transform: none; opacity: 1; }
}
/* The bar dot: lub at 0, dub at +190 ms of a 909 ms period. */
@keyframes jl-beat {
0% { transform: scale(1.7); box-shadow: 0 0 12px 3px rgba(255, 173, 92, .95); background: #ffd9b0; }
13% { transform: scale(1); box-shadow: 0 0 6px 1px rgba(255, 106, 42, .7); background: var(--ember); }
20.9% { transform: scale(1.35); box-shadow: 0 0 9px 2px rgba(255, 140, 70, .85); background: var(--ember-hot); }
32% { transform: scale(1); box-shadow: 0 0 6px 1px rgba(255, 106, 42, .7); background: var(--ember); }
100% { transform: scale(1); box-shadow: 0 0 6px 1px rgba(255, 106, 42, .7); background: var(--ember); }
}
} /* @media screen */
/* Professional pass: static labels and quiet notes (no toggles, no explanations). */
html.outside .chip-static { cursor: default; }
html.outside .job-conf { color: var(--dim); font-size: .875rem; }