/* ═══════════════════════════════════════════════════════════════════
MABEL — shared design system · "ISSUE Nº 01"
NYC Art Deco × golden-age comic book.
Aged newsprint, Gotham-navy night, printed vermillion, deco brass.
Limelight (marquee display) · Bangers (action lettering) ·
Archivo (body) · Space Mono (captions, figures, code).
Used by index.html + all subsystem pages.
═══════════════════════════════════════════════════════════════════ */
/* ─── Reset & root ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { overflow-x: hidden; }
:root {
/* aged comic newsprint */
--bone: #F4EAD2;
--paper: #ECDFBC;
--paper-2: #E0D0A6;
--panel: #FDF6E2; /* the white of a comic panel */
/* Gotham night */
--ink: #151820;
--ink-soft: #2A2E3A;
--ash: #6D6551;
--ash-light: #A99F87;
/* printed color */
--orange: #F0762E; /* apple orange — THE main accent (microduck) */
--orange-dim: #D45E17;
--yellow: #F2C94C; /* NYC taxi yellow — narration, step cards */
--rust: #C6301A; /* vermillion — the LOUD voice: bursts, seals */
--rust-dim: #93220F;
--clay: #8B5A3C;
--gold: #D9A13F; /* deco brass */
--gold-deep: #B77E1E;
--blue: #23577E; /* process blue */
--green: #2E7D4F; /* pub tag green, tuned to print */
--font-display: 'Limelight', 'Arial Narrow', 'Impact', sans-serif;
--font-comic: 'Bangers', 'Arial Black', 'Impact', sans-serif;
--font-head: 'Jost', -apple-system, 'Helvetica Neue', sans-serif;
--font-sans: 'Jost', -apple-system, 'Helvetica Neue', sans-serif;
--font-mono: 'Space Mono', 'SFMono-Regular', Menlo, monospace;
--max: 1320px;
--max-narrow: 920px;
--gutter: clamp(20px, 4vw, 56px);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
--spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot — snap */
/* Comic-panel recipe: what used to be liquid glass is now flat print.
Solid panel fills, ink line-work, hard offset shadows — every
component that consumed the --glass-* tokens re-themes through here. */
--line-w: 2px;
--glass-blur: none;
--glass-bg: var(--panel);
--glass-bg-2: #FFFDF0; /* hover / denser */
--glass-border: rgba(21, 24, 32, 0.85);
--glass-hi: inset 0 0 0 0 transparent;
--glass-sh: 6px 6px 0 rgba(21, 24, 32, 0.9);
/* Dark-surface variant — night panels with brass line-work */
--glass-bg-d: rgba(253, 246, 226, 0.045);
--glass-bg-d-2: rgba(253, 246, 226, 0.09);
--glass-border-d: rgba(217, 161, 63, 0.5);
--glass-hi-d: inset 0 0 0 0 transparent;
--glass-sh-d: 6px 6px 0 rgba(0, 0, 0, 0.6);
/* Halftone dot screens (comic print texture) */
--dots-ink: radial-gradient(rgba(21,24,32,0.13) 1px, transparent 1.6px);
--dots-red: radial-gradient(rgba(198,48,26,0.16) 1px, transparent 1.6px);
--dots-gold: radial-gradient(rgba(217,161,63,0.20) 1px, transparent 1.6px);
--dots-cream: radial-gradient(rgba(244,234,210,0.10) 1px, transparent 1.6px);
}
body {
background: var(--bone);
color: var(--ink);
font-family: var(--font-sans);
font-weight: 400;
font-size: 16.5px;
line-height: 1.58;
letter-spacing: 0.004em;
}
::selection { background: var(--orange); color: #FFF9F0; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
/* ─── Typography scale — deco marquee display ─────────────────────── */
.display-xl { font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 12vw, 190px); line-height: 0.95; letter-spacing: 0.01em; }
.display-lg { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 7vw, 104px); line-height: 1.0; letter-spacing: 0.01em; }
.display-md { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.06; letter-spacing: 0.01em; }
.display-sm { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.14; letter-spacing: 0.01em; }
/* Limelight has no italic — inside display type, .italic reads as the
marquee's lit-up word instead: upright + vermillion. */
.italic { font-style: italic; }
.display-xl .italic, .display-lg .italic, .display-md .italic, .display-sm .italic {
font-style: normal; color: var(--orange);
}
.dark-sec .display-xl .italic, .dark-sec .display-lg .italic,
.dark-sec .display-md .italic, .dark-sec .display-sm .italic,
.page-hero .display-xl .italic, .page-hero .display-lg .italic,
.page-hero .display-md .italic { color: var(--gold); }
.accent { color: var(--orange); }
/* kickers become action lettering */
.eyebrow {
font-family: var(--font-comic); font-size: clamp(15px, 1.3vw, 18px); text-transform: uppercase;
letter-spacing: 0.14em; color: var(--orange); font-weight: 400;
}
.lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-soft); letter-spacing: -0.008em; max-width: 58ch; }
.body-lg { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; color: var(--ink-soft); }
.body { font-size: 16px; line-height: 1.72; color: var(--ink-soft); }
/* ─── Layout primitives ───────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }
.pad-y { padding: clamp(56px, 8vh, 96px) 0; }
.pad-y-sm { padding: clamp(40px, 6vh, 68px) 0; }
/* deco rule: double line with a center diamond */
.divider { height: 7px; width: 100%; position: relative; background:
linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 2px no-repeat,
linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat; opacity: 0.85; }
.divider::after { content: '◆'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
font-size: 11px; line-height: 1; color: var(--rust); background: inherit; padding: 0 10px;
background: var(--bone); }
.soft-sec .divider::after { background: var(--paper); }
/* night sections: Gotham navy with a faint cream halftone screen and a
brass double-rule across the top edge */
.dark-sec { background: var(--ink); color: var(--bone); position: relative; }
.dark-sec::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; pointer-events: none;
background:
linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 2px no-repeat,
linear-gradient(var(--gold), var(--gold)) 0 5px / 100% 1px no-repeat;
opacity: 0.75; }
.dark-sec::after { content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: var(--dots-cream); background-size: 22px 22px; opacity: 0.28;
mask-image: radial-gradient(ellipse at 50% 0%, black 10%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 10%, transparent 70%); }
.dark-sec > * { position: relative; z-index: 1; }
.dark-sec .lede, .dark-sec .body, .dark-sec .body-lg { color: var(--ash-light); }
.dark-sec .eyebrow { color: var(--gold); }
.soft-sec { background: var(--paper); }
/* ─── Progress bar ────────────────────────────────────────────────── */
#progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--orange); z-index: 9999; transition: width 0.1s linear; box-shadow: 0 1px 0 rgba(21,24,32,0.4); }
/* ─── Nav — a floating masthead sticker: solid print, ink line, hard shadow ── */
.nav {
position: fixed; z-index: 100; top: 12px;
left: 50%; transform: translateX(-50%);
width: -moz-fit-content;
width: fit-content;
max-width: min(calc(100% - 20px), var(--max));
padding: 8px 16px;
gap: clamp(16px, 3vw, 38px);
display: flex; align-items: center; justify-content: center;
border-radius: 14px;
background: var(--panel);
border: var(--line-w) solid var(--ink);
box-shadow: 4px 4px 0 rgba(21, 24, 32, 0.9);
transition: box-shadow 0.35s var(--ease-out), top 0.35s var(--ease-out);
}
.nav.scrolled { top: 8px; box-shadow: 5px 6px 0 rgba(21, 24, 32, 0.9); }
.nav-logo {
font-family: var(--font-display); font-size: 21px; letter-spacing: 0.04em;
color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 9px;
margin-right: clamp(10px, 2vw, 22px); /* keep the wordmark clear of the first nav item */
}
/* the marquee bulb */
.nav-logo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); border: 1.5px solid var(--ink); display: inline-block; animation: pulse 2.4s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(198,48,26,0.18); }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.65; } }
.nav-links { display: flex; gap: 2px; font-size: 13.5px; font-weight: 600; align-items: center; }
.nav-links a { color: var(--ink); text-decoration: none; opacity: 0.72; transition: opacity 0.2s ease, background 0.3s var(--ease-out), color 0.2s ease; padding: 7px 12px; border-radius: 8px; white-space: nowrap; }
.nav-links a:hover { opacity: 1; background: rgba(21, 24, 32, 0.07); }
.nav-links a.on { opacity: 1; background: var(--ink); color: var(--bone); }
.nav-links a.ext { color: var(--orange); opacity: 1; font-weight: 700; }
.nav-links a.ext:hover { opacity: 1; background: rgba(198, 48, 26, 0.12); }
/* hamburger / mobile */
.hbg { display: none; width: 38px; height: 38px; border: none; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 12px; }
.hbg span { display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease-out); }
.mob {
display: none; position: fixed; top: 8px; left: 10px; right: 10px; z-index: 95;
background: var(--panel);
border: var(--line-w) solid var(--ink);
border-radius: 12px;
padding: 62px 14px 12px;
box-shadow: 6px 6px 0 rgba(21, 24, 32, 0.9);
transform: translateY(calc(-100% - 22px)); transition: transform 0.4s var(--ease-out);
max-height: calc(100vh - 16px);
max-height: calc(100dvh - 16px);
overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.mob a { display: block; padding: 8px 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; border-radius: 8px; }
.mob a.ext { color: var(--rust); margin-top: 4px; }
.mob-grp { display: block; padding: 12px 8px 3px; font-family: var(--font-comic); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); font-weight: 400; }
.mob a.sub { padding: 6px 8px 6px 18px; font-size: 13px; font-weight: 400; opacity: 0.82; }
@media (max-width: 1180px) {
.nav-links { display: none; } .hbg { display: flex; } .mob { display: block; }
/* mobile: full-width bar again so the logo sits left and the burger sits right */
.nav {
width: min(calc(100% - 20px), var(--max));
justify-content: space-between; gap: 0;
padding: 10px 14px 10px 22px;
}
}
/* ── Dropdown nav groups ── */
.nav-group { position: relative; display: inline-flex; }
.nav-grp-btn { font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); opacity: 0.72; background: none; border: none; cursor: pointer; padding: 7px 12px; border-radius: 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; transition: opacity 0.2s ease, background 0.3s var(--ease-out); }
.nav-grp-btn:hover { opacity: 1; background: rgba(21,24,32,0.07); }
.nav-group.on .nav-grp-btn { opacity: 1; background: var(--ink); color: var(--bone); }
.nav-caret { font-size: 9px; opacity: 0.7; transition: transform 0.25s var(--ease-out); }
.nav-group:hover .nav-caret, .nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 218px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--panel); border: var(--line-w) solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 rgba(21,24,32,0.9); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.22s var(--ease-out); z-index: 200; }
.nav-group:hover .nav-menu, .nav-group.open .nav-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-menu a { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); opacity: 0.85; white-space: nowrap; text-decoration: none; transition: opacity 0.15s, background 0.15s; }
.nav-menu a:hover { opacity: 1; background: rgba(21,24,32,0.07); }
.nav-menu a.on { opacity: 1; background: rgba(198,48,26,0.12); color: var(--rust); }
/* invisible bridge so moving from the button to the menu doesn't drop :hover */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; }
/* ── Left in-section sidebar ── */
.sidenav { display: none; }
.sidenav-title { font-family: var(--font-comic); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); font-weight: 400; padding: 2px 12px 12px; }
.sidenav a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--ink); opacity: 0.7; text-decoration: none; transition: opacity 0.15s, background 0.15s; white-space: nowrap; }
.sidenav a:hover { opacity: 1; background: rgba(21,24,32,0.06); }
.sidenav a.on { opacity: 1; color: var(--rust); background: rgba(198,48,26,0.10); font-weight: 600; }
@media (min-width: 1780px) {
/* floating index card. Only shown when the viewport leaves a genuinely
free left column beside the 1320px content wrap — the old translucent
glass card could overlay text; solid print can't. */
.sidenav {
display: flex; flex-direction: column; gap: 1px;
position: fixed; top: 50%; left: 22px; transform: translateY(-50%);
width: 192px; z-index: 95;
max-height: calc(100vh - 140px); overflow-y: auto;
padding: 14px 10px;
background: var(--panel);
border: var(--line-w) solid var(--ink);
border-radius: 14px;
box-shadow: 5px 5px 0 rgba(21,24,32,0.9);
}
}
/* ─── Buttons — action lettering, ink line, hard shadow ───────────── */
.btn {
font-family: var(--font-comic); font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em;
padding: 11px 22px 10px; border-radius: 10px; text-decoration: none; position: relative;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out), border-color 0.25s ease, box-shadow 0.25s var(--ease-out);
display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
border: var(--line-w) solid var(--ink); white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); }
/* primary — vermillion plate */
.btn-primary { background: var(--orange); color: #FFF9F0; box-shadow: 4px 4px 0 rgba(21,24,32,0.9); }
.btn-primary:hover { background: var(--rust); color: #FFF9F0; box-shadow: 6px 6px 0 rgba(21,24,32,0.9); }
/* ghost — paper plate */
.btn-ghost {
color: var(--ink); background: var(--panel); border-color: var(--ink);
box-shadow: 4px 4px 0 rgba(21,24,32,0.9);
}
.btn-ghost:hover { background: #FFFDF0; box-shadow: 6px 6px 0 rgba(21,24,32,0.9); }
/* on dark backgrounds — brass line-work, gold plate primary */
.dark-sec .btn-primary, .page-hero .btn-primary { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,0.85); }
.dark-sec .btn-primary:hover, .page-hero .btn-primary:hover { background: var(--rust); color: #FFF6E4; box-shadow: 6px 6px 0 rgba(0,0,0,0.85); }
.dark-sec .btn-ghost, .page-hero .btn-ghost {
color: var(--bone); background: transparent; border-color: rgba(217,161,63,0.75);
box-shadow: 4px 4px 0 rgba(0,0,0,0.85);
}
.dark-sec .btn-ghost:hover, .page-hero .btn-ghost:hover { background: rgba(253,246,226,0.08); border-color: var(--gold); box-shadow: 6px 6px 0 rgba(0,0,0,0.85); }
/* ─── Section header ──────────────────────────────────────────────── */
.sec-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 90px); align-items: end; margin-bottom: clamp(30px, 4.5vh, 52px); }
@media (max-width: 880px) { .sec-head { grid-template-columns: 1fr; gap: 22px; } }
.sec-head .eyebrow { margin-bottom: 16px; display: block; }
.sec-head .title { margin-bottom: 0; }
.sec-head-center { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vh, 48px); }
.sec-head-center .eyebrow { display: block; margin-bottom: 16px; }
/* ─── Hero: home — the Issue Nº 01 cover ──────────────────────────── */
.hero-home {
min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end;
padding: 0 var(--gutter) clamp(56px, 9vh, 100px);
background: linear-gradient(180deg, var(--paper) 0%, var(--bone) 70%);
position: relative; overflow: hidden;
}
/* deco sunburst radiating from behind the wordmark */
.hero-home::before {
content: ''; position: absolute; inset: -20%;
background: repeating-conic-gradient(from 0deg at 38% 78%,
rgba(198,48,26,0.07) 0deg 5deg, transparent 5deg 12deg);
mask-image: radial-gradient(ellipse at 38% 78%, black 15%, transparent 62%);
-webkit-mask-image: radial-gradient(ellipse at 38% 78%, black 15%, transparent 62%);
}
/* halftone screen over the burst */
.hero-home::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: var(--dots-ink); background-size: 22px 22px; opacity: 0.4;
mask-image: radial-gradient(ellipse at 62% 30%, black 12%, transparent 66%);
-webkit-mask-image: radial-gradient(ellipse at 62% 30%, black 12%, transparent 66%);
}
.hero-home-inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width: 100%; }
.hero-eyebrow { display: inline-block; margin-bottom: 22px; }
.hero-title { margin-bottom: 26px; text-shadow: 5px 5px 0 rgba(21,24,32,0.12); }
.hero-title .line { display: block; }
.hero-sub { font-family: var(--font-comic); font-size: clamp(26px, 3.6vw, 52px); line-height: 1.05; color: var(--ink-soft); letter-spacing: 0.03em; }
.hero-tag { font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-soft); max-width: 52ch; line-height: 1.5; margin-bottom: 14px; }
.hero-authors { font-family: var(--font-mono); font-size: 12px; color: var(--ash); letter-spacing: 0.04em; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-coord-row { position: absolute; top: clamp(80px, 12vh, 120px); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; z-index: 2; gap: 24px; }
.hero-coord { font-family: var(--font-mono); font-size: 11px; color: var(--ash); letter-spacing: 0.04em; line-height: 1.7; }
.hero-coord b { color: var(--ink-soft); font-weight: 700; }
.hero-coord.r { text-align: right; }
@media (max-width: 600px) { .hero-coord-row { display: none; } }
/* ─── Hero: subsystem pages — deco night marquee ──────────────────── */
.page-hero {
background: linear-gradient(180deg, #1B2030 0%, var(--ink) 100%);
color: var(--bone);
padding: clamp(104px, 15vh, 150px) var(--gutter) clamp(44px, 7vh, 72px);
position: relative; overflow: hidden;
}
/* brass sunburst out of the bottom-left, screened with halftone */
.page-hero::before {
content: ''; position: absolute; inset: -30% -10%;
background: repeating-conic-gradient(from 0deg at 18% 100%,
rgba(217,161,63,0.08) 0deg 4deg, transparent 4deg 11deg);
mask-image: radial-gradient(ellipse at 18% 100%, black 12%, transparent 58%);
-webkit-mask-image: radial-gradient(ellipse at 18% 100%, black 12%, transparent 58%);
}
.page-hero::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: var(--dots-cream); background-size: 20px 20px; opacity: 0.35;
mask-image: radial-gradient(ellipse at 78% 20%, black 10%, transparent 62%);
-webkit-mask-image: radial-gradient(ellipse at 78% 20%, black 10%, transparent 62%);
}
.page-hero-inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; }
.page-hero .eyebrow { color: var(--gold); display: block; margin-bottom: 18px; }
.page-hero h1 { color: var(--bone); margin-bottom: 22px; text-shadow: 4px 4px 0 rgba(0,0,0,0.55); }
.page-hero .lede { color: var(--ash-light); }
.page-hero .crumbs { font-family: var(--font-mono); font-size: 11px; color: var(--ash-light); letter-spacing: 0.1em; margin-bottom: 28px; text-transform: uppercase; }
.page-hero .crumbs a { color: var(--ash-light); text-decoration: none; }
.page-hero .crumbs a:hover { color: var(--gold); }
/* ─── Stats strip ─────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 56px); }
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
.stat { border-top: 3px solid var(--ink); padding-top: 20px; position: relative; }
.stat::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--ink); opacity: 0.8; }
.dark-sec .stat { border-top-color: var(--gold); }
.dark-sec .stat::before { background: var(--gold); }
.stat-num { font-family: var(--font-display); font-size: clamp(44px, 5.6vw, 84px); line-height: 1; letter-spacing: 0.01em; margin-bottom: 12px; display: flex; align-items: baseline; color: var(--rust); }
.dark-sec .stat-num { color: var(--gold); }
.stat-num .unit { font-family: var(--font-comic); font-size: 0.34em; color: var(--ash); margin-left: 8px; letter-spacing: 0.06em; }
.dark-sec .stat-num .unit { color: var(--ash-light); }
.stat-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ash); line-height: 1.5; }
.dark-sec .stat-label { color: var(--ash-light); }
/* ─── Contribution grid ───────────────────────────────────────────── */
.contrib-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .contrib-grid { grid-template-columns: 1fr; } }
.contrib-cell {
background: var(--glass-bg);
border: var(--line-w) solid var(--ink); border-radius: 12px; padding: 22px 20px;
box-shadow: var(--glass-sh);
transition: background 0.45s var(--ease-out), transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.contrib-cell:hover { background: var(--glass-bg-2); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(21,24,32,0.9); }
.contrib-cell h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.02em; margin-bottom: 10px; }
.contrib-cell p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
/* ─── Resource / navigation cards (link to subpages) ──────────────── */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .res-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .res-grid { grid-template-columns: 1fr; } }
.res-card {
background: var(--glass-bg);
border: var(--line-w) solid var(--ink); border-radius: 12px;
padding: 28px 26px; text-decoration: none; color: inherit; display: flex; flex-direction: column;
min-height: 200px; box-shadow: var(--glass-sh);
transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out), background 0.3s ease;
}
.res-card:hover { background: var(--glass-bg-2); box-shadow: 9px 9px 0 rgba(21,24,32,0.9); transform: translate(-3px, -3px); }
.res-tag { font-family: var(--font-comic); font-size: 14px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.res-card h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1.1; }
.res-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.res-arrow { font-family: var(--font-comic); font-size: 14px; color: var(--rust); margin-top: 18px; text-transform: uppercase; letter-spacing: 0.1em; transition: transform 0.3s var(--ease-out); }
.res-card:hover .res-arrow { transform: translateX(5px); }
/* ─── Demo tabs — action lettering with a brass baseline ──────────── */
.tab-bar { display: flex; gap: 2px; border-bottom: 2px solid rgba(217,161,63,0.5); margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
flex-shrink: 0; padding: 11px 18px 9px; font-family: var(--font-comic); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(244,234,210,0.45); background: none; border: none; border-bottom: 3px solid transparent;
margin-bottom: -2px; cursor: pointer; transition: color 0.2s, border-color 0.2s; white-space: nowrap;
}
.tab-btn.on { color: var(--gold); border-bottom-color: var(--gold); }
/* light variant */
.tab-bar.light { border-bottom-color: rgba(21,24,32,0.4); }
.tab-bar.light .tab-btn { color: var(--ash); }
.tab-bar.light .tab-btn.on { color: var(--orange); border-bottom-color: var(--orange); }
.tab-panel { display: none; }
.tab-panel.on { display: block; animation: tabIn 0.5s var(--ease-out); }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.demo-media { border-radius: 12px; overflow: hidden; background: #0B0E15; border: var(--line-w) solid rgba(217,161,63,0.55); box-shadow: 6px 6px 0 rgba(0,0,0,0.6); }
.demo-media img, .demo-media video { width: 100%; display: block; max-height: 560px; object-fit: cover; }
.demo-caption { font-family: var(--font-mono); font-size: 11px; color: rgba(244,234,210,0.42); margin-top: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
/* ─── Media placeholder (drop real assets later) ──────────────────── */
.ph {
width: 100%; height: 100%; position: relative;
background:
radial-gradient(ellipse at 30% 35%, rgba(198,48,26,0.08), transparent 58%),
linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.ph.dark { background: radial-gradient(ellipse at 50% 35%, rgba(217,161,63,0.10), transparent 62%), linear-gradient(180deg, #1B2030 0%, #0B0E15 100%); }
.ph::before {
content: ''; position: absolute; inset: 0;
background-image: var(--dots-ink);
background-size: 20px 20px; opacity: 0.6;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
}
.ph.dark::before { background-image: var(--dots-cream); opacity: 0.5; }
.ph-label {
position: absolute; bottom: 16px; left: 16px;
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
color: var(--ash); padding: 6px 10px; border: 1.5px solid rgba(21,24,32,0.4); border-radius: 4px;
background: rgba(244,234,210,0.8);
}
.ph.dark .ph-label { color: var(--ash-light); border-color: rgba(217,161,63,0.4); background: rgba(11,14,21,0.75); }
.media-frame { border-radius: 12px; overflow: hidden; border: var(--line-w) solid var(--ink); position: relative; box-shadow: 6px 6px 0 rgba(21,24,32,0.9); }
.media-frame.r-43 { aspect-ratio: 4 / 3; }
.media-frame.r-169 { aspect-ratio: 16 / 9; }
.media-frame.r-11 { aspect-ratio: 1 / 1; }
.media-frame.r-45 { aspect-ratio: 4 / 5; }
.media-frame > video, .media-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-frame.gui { background: #000; border-color: rgba(244,234,210,0.12); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7); }
.media-frame.gui > img { object-fit: contain; }
.gui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
@media (max-width: 820px) { .gui-grid { grid-template-columns: 1fr; } }
/* topic / interface contract table */
.tt { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; }
.tt th { text-align: left; color: var(--ash); font-weight: 600; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 12px 12px 0; border-bottom: 1px solid rgba(21,24,32,0.12); }
.tt td { padding: 12px 12px 12px 0; border-bottom: 1px solid rgba(21,24,32,0.07); color: var(--ink-soft); vertical-align: top; }
.tt td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.tt .pub { color: var(--green); font-weight: 700; } .tt .sub { color: var(--blue); font-weight: 700; }
.dark-sec .tt th { color: var(--ash-light); border-color: rgba(244,234,210,0.16); }
.dark-sec .tt td { color: var(--bone); border-color: rgba(244,234,210,0.10); }
.dark-sec .tt td:first-child { color: var(--bone); }
.dark-sec .tt .pub { color: #43c463; } .dark-sec .tt .sub { color: #6aa6ff; }
.dark-sec .bib { background: rgba(8,7,6,0.5); border-color: rgba(244,234,210,0.12); color: var(--bone); box-shadow: none; }
.dark-sec .bib-copy { background: rgba(244,234,210,0.14); color: var(--bone); }
.dark-sec .bib-copy:hover { background: var(--rust); }
/* anchor targets clear the fixed nav */
section[id], .sub-block[id] { scroll-margin-top: 92px; }
/* hardware subsystem blocks */
.sub-block { display: grid; grid-template-columns: 230px 1fr; gap: 34px; padding: 34px 0; border-top: 1px solid rgba(21,24,32,0.10); }
.sub-block:first-of-type { border-top: none; }
.sb-name { font-family: var(--font-display); font-size: 26px; line-height: 1.05; color: var(--ink); letter-spacing: 0.01em; }
.sb-stat { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ash); margin-top: 10px; }
.sb-body p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; max-width: 64ch; }
@media (max-width: 760px) { .sub-block { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; } }
/* iPhone app mockups */
.phone-media { display: flex; justify-content: center; align-items: center; }
.phone-shot { display: block; width: 100%; max-width: 290px; border-radius: 38px; filter: drop-shadow(0 50px 70px rgba(21,24,32,0.38)); }
.phone-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.phone-row .phone-shot { max-width: 208px; }
/* real device screen captures (no bezel) */
.app-shot { display: block; width: 100%; max-width: 270px; border-radius: 26px; border: 1px solid rgba(21,24,32,0.10); filter: drop-shadow(0 44px 64px rgba(21,24,32,0.34)); }
.app-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; align-items: flex-start; margin-top: 8px; }
.app-row .app-shot { max-width: 230px; }
/* on-brand figure (its own bg/border baked into the SVG) */
.device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.device-card { display: flex; flex-direction: column; }
@media (max-width: 820px) { .device-grid { grid-template-columns: 1fr; } }
.arch-fig { display: block; width: 100%; border-radius: 12px; box-shadow: 0 34px 64px -40px rgba(21,24,32,0.30); }
.arch-d, .arch-m { border-radius: 12px; overflow: hidden; box-shadow: 0 34px 64px -40px rgba(21,24,32,0.30); }
.arch-d svg, .arch-m svg { width: 100%; height: auto; display: block; }
.arch-m { display: none; }
@media (max-width: 760px) { .arch-d { display: none; } .arch-m { display: block; } }
.media-frame.sim-dark { background: #0A0D14; border-color: rgba(244,234,210,0.10); }
/* caption chip over a sim clip */
.sim-cap { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
font: 500 11.5px/1 var(--mono, 'Space Mono', monospace); letter-spacing: 0.02em; color: var(--bone, #F4EAD2);
padding: 7px 11px; border-radius: 999px; background: rgba(8,7,6,0.52); border: 1px solid rgba(244,234,210,0.16);
-webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
.sim-cap .dot { width: 6px; height: 6px; border-radius: 50%; background: #43c463; box-shadow: 0 0 0 3px rgba(67,196,99,0.22); }
/* ─── Spec pills ──────────────────────────────────────────────────── */
.spec { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.spec span {
font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
padding: 6px 12px; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px;
background: rgba(255,255,255,0.42);
-webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(21,24,32,0.04);
}
.dark-sec .spec span, .page-hero .spec span {
color: var(--ash-light); border-color: rgba(244,234,210,0.16);
background: rgba(244,234,210,0.06); box-shadow: inset 0 1px 0 rgba(244,234,210,0.10);
}
/* ─── Feature rows (alternating media + copy) ─────────────────────── */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(40px, 6vh, 72px); }
.feature:last-child { margin-bottom: 0; }
.feature.flip .feature-media { order: 2; }
@media (max-width: 880px) { .feature, .feature.flip { grid-template-columns: 1fr; gap: 28px; } .feature.flip .feature-media { order: 0; } }
.feature-copy .eyebrow { color: var(--rust); display: block; margin-bottom: 16px; }
.dark-sec .feature-copy .eyebrow { color: var(--gold); }
.feature-copy h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 42px); line-height: 1.08; letter-spacing: 0.01em; margin-bottom: 18px; }
.feature-copy p { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; color: var(--ink-soft); }
.dark-sec .feature-copy p { color: var(--ash-light); }
/* ─── Card grid (generic) ─────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 880px) { .card-grid { grid-template-columns: 1fr; } }
.dark-sec .card-grid { background: transparent; border: 0; }
.card {
background: var(--glass-bg);
border: var(--line-w) solid var(--ink); border-radius: 12px; padding: 24px 22px; min-height: 0;
display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--glass-sh);
transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.card:hover { background: var(--glass-bg-2); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(21,24,32,0.9); }
.dark-sec .card { background: var(--glass-bg-d); border-color: var(--glass-border-d); box-shadow: var(--glass-sh-d); }
.dark-sec .card:hover { background: var(--glass-bg-d-2); box-shadow: 8px 8px 0 rgba(0,0,0,0.6); }
.card-num { font-family: var(--font-comic); font-size: 14px; color: var(--orange); letter-spacing: 0.12em; }
.dark-sec .card-num { color: var(--gold); }
.card h4 { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.12; letter-spacing: -0.02em; margin: 22px 0 10px; }
.card p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.dark-sec .card p { color: var(--ash-light); }
/* ─── Stack visualization (software) ──────────────────────────────── */
.stack-vis { border: var(--line-w) solid var(--glass-border-d); border-radius: 12px; overflow: hidden; background: var(--glass-bg-d); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi-d), var(--glass-sh-d); }
.stack-row { display: grid; grid-template-columns: 200px 1fr auto; align-items: center; padding: 20px 26px; border-bottom: 1px solid rgba(244,234,210,0.08); gap: 22px; transition: background 0.3s ease; }
.stack-row:last-child { border-bottom: 0; }
.stack-row:hover { background: rgba(244,234,210,0.03); }
.stack-layer { font-family: var(--font-comic); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); }
.stack-name { font-family: var(--font-head); font-weight: 700; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -0.015em; line-height: 1.15; color: var(--bone); }
.stack-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.stack-tags span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash-light); padding: 5px 9px; border: 1px solid rgba(244,234,210,0.18); border-radius: 999px; }
@media (max-width: 720px) { .stack-row { grid-template-columns: 1fr; gap: 8px; } .stack-tags { justify-content: flex-start; } }
.compute-card { margin-top: 36px; border: var(--line-w) solid var(--glass-border-d); border-radius: 12px; padding: 30px; display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; background: var(--glass-bg-d); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-hi-d), var(--glass-sh-d); }
@media (max-width: 720px) { .compute-card { grid-template-columns: 1fr; } }
.compute-chip { width: 86px; height: 86px; border-radius: 14px; background: linear-gradient(135deg, #2E3448 0%, #191E2C 100%); position: relative; border: 1px solid rgba(244,234,210,0.15); display: flex; align-items: center; justify-content: center; }
.compute-chip-core { font-family: var(--font-mono); font-size: 9px; color: var(--ash-light); letter-spacing: 0.16em; transform: rotate(-90deg); white-space: nowrap; }
.compute-title { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 34px); letter-spacing: 0.01em; line-height: 1.08; color: var(--gold); }
.compute-sub { color: var(--ash-light); margin-top: 6px; font-size: 14px; }
.compute-stat { font-family: var(--font-mono); color: var(--ash-light); font-size: 12px; text-align: right; line-height: 1.7; }
.compute-stat b { color: var(--gold); font-family: var(--font-display); font-size: 24px; display: block; font-weight: 400; }
/* ─── Numbered points list ────────────────────────────────────────── */
.points { border-top: 1px solid rgba(21,24,32,0.12); }
.dark-sec .points { border-top-color: rgba(244,234,210,0.14); }
.point { display: grid; grid-template-columns: 46px 1fr; gap: 13px; padding: 14px 0; border-bottom: 1px solid rgba(21,24,32,0.12); }
.dark-sec .point { border-bottom-color: rgba(244,234,210,0.10); }
.point .num { font-family: var(--font-comic); font-size: 15px; color: var(--orange); letter-spacing: 0.1em; padding-top: 2px; }
.dark-sec .point .num { color: var(--gold); }
.point h5 { font-family: var(--font-head); font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; letter-spacing: -0.015em; margin-bottom: 6px; }
.point p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.dark-sec .point p { color: var(--ash-light); }
/* ─── App screen galleries: horizontal scroll-snap of device screens ─── */
.appgal-wrap { position: relative; }
.appgal-hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--ash); letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.dark-sec .appgal-hint { color: var(--ash-light); }
.appgal-hint svg { width: 26px; height: 12px; opacity: 0.7; }
.appgal {
display: flex; gap: clamp(14px, 1.8vw, 22px); align-items: flex-start;
overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
/* bounded to the .wrap content column — cards align with the captions
below and never bleed past the section boundary */
padding: 2px 1px 16px; scroll-padding-left: 1px;
}
.appgal::-webkit-scrollbar { display: none; }
.appgal figure { scroll-snap-align: start; flex: 0 0 auto; margin: 0; }
.appgal img { display: block; width: 100%; height: auto; }
.appgal figcaption { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.appgal figcaption b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 2px; }
.appgal figcaption b .ix { font-family: var(--font-mono); font-size: 11px; color: var(--rust); margin-right: 8px; font-weight: 500; }
.dark-sec .appgal figcaption { color: var(--ash-light); }
.dark-sec .appgal figcaption b { color: var(--bone); }
/* iPhone — portrait phones */
.appgal.ios figure { width: clamp(186px, 23vw, 242px); }
.appgal.ios img { border-radius: 30px; filter: drop-shadow(0 34px 54px rgba(21,24,32,0.30)); }
.dark-sec .appgal.ios img { filter: drop-shadow(0 34px 58px rgba(0,0,0,0.6)); }
/* Vision Pro — landscape glass windows */
.appgal.vp figure { width: clamp(440px, 66vw, 720px); }
.appgal.vp img { border-radius: 12px; border: 1px solid rgba(244,234,210,0.10); background: #060505; box-shadow: 0 44px 84px -36px rgba(0,0,0,0.72); }
/* right edge fade hints there's more to scroll (sits at the content boundary) */
.appgal-wrap::after { content: ""; position: absolute; top: 2px; bottom: 70px; right: 0; width: clamp(16px, 2.4vw, 38px); z-index: 3; pointer-events: none; background: linear-gradient(270deg, var(--bone), transparent); }
.soft-sec .appgal-wrap::after { background: linear-gradient(270deg, var(--paper), transparent); }
.dark-sec .appgal-wrap::after { background: linear-gradient(270deg, var(--ink), transparent); }
/* ─── Five-tab explainer cards ─────────────────────────────────────── */
.tabcards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 960px) { .tabcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tabcards { grid-template-columns: 1fr; } }
.tabcard { padding: 20px 18px; border-radius: 12px; background: var(--glass-bg); border: var(--line-w) solid var(--glass-border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out); }
.tabcard:hover { transform: translateY(-3px); background: var(--glass-bg-2); }
.tabcard .tc-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(198,48,26,0.12); color: var(--rust); margin-bottom: 14px; }
.tabcard .tc-ic svg { width: 19px; height: 19px; }
.tabcard h4 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 7px; }
.tabcard p { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.tabcard .tc-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--ash); letter-spacing: 0.1em; float: right; }
/* ─── First-principles "control knobs" ─────────────────────────────── */
.knobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 860px) { .knobs { grid-template-columns: 1fr; } }
.knob { padding: clamp(22px, 2.4vw, 30px); border-radius: 12px; background: var(--glass-bg); border: var(--line-w) solid var(--glass-border); }
.knob .knob-k { font-family: var(--font-comic); font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rust); display: block; margin-bottom: 10px; }
.knob h4 { font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 12px; }
.knob > p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 16px; }
.knob .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.knob .chips span { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: rgba(21,24,32,0.05); border: 1px solid rgba(21,24,32,0.1); color: var(--ink); }
.knob .chips span.hl { background: rgba(198,48,26,0.12); border-color: rgba(198,48,26,0.3); color: var(--rust); }
/* ─── BOM / spec table ────────────────────────────────────────────── */
.spec-table { border-top: 1px solid rgba(21,24,32,0.20); }
.spec-table .row { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(21,24,32,0.12); align-items: baseline; transition: padding-left 0.4s var(--ease-out); }
.spec-table .row:hover { padding-left: 8px; }
.spec-table .num { font-family: var(--font-comic); font-size: 14px; color: var(--rust); }
.spec-table .name { font-family: var(--font-head); font-weight: 700; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.015em; line-height: 1.15; }
.spec-table .sub { font-size: 13px; color: var(--ash); margin-top: 4px; }
.spec-table .val { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-weight: 500; white-space: nowrap; }
.spec-total { margin-top: 32px; display: flex; align-items: baseline; justify-content: space-between; border-top: 3px solid var(--ink); padding-top: 22px; }
.spec-total .label { font-family: var(--font-comic); font-size: 16px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.spec-total .big { font-family: var(--font-display); font-size: clamp(36px, 5vw, 60px); letter-spacing: 0.01em; line-height: 1; color: var(--orange); }
/* ─── Data table ──────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: center; padding: 12px 14px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--ash); border-bottom: 1px solid rgba(21,24,32,0.2); letter-spacing: 0.1em; text-transform: uppercase; }
.data-table th:first-child { text-align: left; }
.data-table td { padding: 14px 14px; border-bottom: 1px solid rgba(21,24,32,0.10); text-align: center; color: var(--ink); }
.data-table td:first-child { text-align: left; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr.best td { background: rgba(198,48,26,0.06); }
.data-table tr.best td:first-child { color: var(--rust); font-weight: 600; }
.data-table .hi { color: var(--rust); font-weight: 600; }
.table-note { font-family: var(--font-mono); font-size: 11px; color: var(--ash); margin-top: 12px; letter-spacing: 0.02em; }
/* ─── Build / steps list ──────────────────────────────────────────── */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 56px 1fr 1.2fr; gap: clamp(16px, 2.5vw, 30px); padding: clamp(16px, 2.5vh, 26px) 0; border-bottom: 1px solid rgba(21,24,32,0.14); counter-increment: step; align-items: start; }
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-comic); font-size: 20px; color: var(--orange); letter-spacing: 0.08em; padding-top: 2px; }
.step h4 { font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 1.9vw, 26px); letter-spacing: -0.02em; line-height: 1.12; }
.step .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ash); margin-top: 6px; letter-spacing: 0.06em; }
.step p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
@media (max-width: 720px) { .step { grid-template-columns: 1fr; gap: 12px; } .step::before { padding-top: 0; } }
/* ─── BibTeX ──────────────────────────────────────────────────────── */
.bib { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: var(--line-w) solid var(--glass-border); border-radius: 12px; padding: 24px 26px; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; color: var(--ink-soft); position: relative; box-shadow: var(--glass-hi), var(--glass-sh); }
.bib pre { white-space: pre-wrap; margin: 0; }
.bib-copy { position: absolute; top: 14px; right: 14px; padding: 6px 14px; border-radius: 8px; background: var(--ink); color: var(--bone); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; border: none; cursor: pointer; }
.bib-copy:hover { background: var(--rust); }
/* ─── 3D model viewer (hardware) ──────────────────────────────────── */
.viewer-3d {
position: relative; width: 100%; aspect-ratio: 16 / 10;
border-radius: 12px; overflow: hidden;
border: 1px solid rgba(21,24,32,0.08);
background:
radial-gradient(ellipse at 50% 30%, rgba(198,48,26,0.08), transparent 60%),
linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
box-shadow: 0 30px 70px -36px rgba(21,24,32,0.32);
}
.viewer-3d model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.viewer-3d .ph { position: absolute; inset: 0; }
.viewer-hint {
position: absolute; left: 18px; bottom: 16px; z-index: 3;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash);
display: flex; align-items: center; gap: 10px;
background: rgba(244,234,210,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 8px 13px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.viewer-hint .dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 3px rgba(198,48,26,0.18); }
.viewer-fs {
position: absolute; top: 16px; right: 16px; z-index: 3;
width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: rgba(244,234,210,0.55); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
border: 1px solid rgba(255,255,255,0.5); color: var(--ink);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px -8px rgba(21,24,32,0.3);
transition: transform 0.3s var(--ease-out), background 0.3s ease;
}
.viewer-fs:hover { transform: scale(1.06); background: rgba(244,234,210,0.78); }
.viewer-fs svg { width: 17px; height: 17px; }
.viewer-3d:fullscreen { border-radius: 0; aspect-ratio: auto; }
.viewer-3d:fullscreen model-viewer { background: var(--bone); }
#robotCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.viewer-loading { transition: opacity 0.6s var(--ease-out); }
.viewer-3d.loaded .viewer-loading { opacity: 0; pointer-events: none; }
/* wrapper that lets the joint panel overlay on desktop, stack on mobile */
.viewer-wrap { position: relative; }
/* ── joint control panel ── */
.jp {
position: absolute; top: 14px; right: 14px; z-index: 4;
width: clamp(230px, 24vw, 290px);
max-height: calc(100% - 28px); display: flex; flex-direction: column;
background: rgba(244,234,210,0.62);
-webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
border: 1px solid rgba(255,255,255,0.5); border-radius: 12px;
box-shadow: var(--glass-hi), 0 18px 44px -22px rgba(21,24,32,0.4);
opacity: 0; transform: translateY(-6px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
overflow: hidden;
}
.jp.ready { opacity: 1; transform: none; }
.jp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(21,24,32,0.10); }
.jp-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.jp-head-actions { display: flex; align-items: center; gap: 6px; }
.jp-reset { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: rgba(21,24,32,0.06); border: 1px solid rgba(21,24,32,0.12); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: background 0.2s ease; }
.jp-reset:hover { background: var(--rust); color: var(--bone); border-color: var(--rust); }
.jp-toggle { width: 24px; height: 24px; border: none; background: none; cursor: pointer; color: var(--ash); font-size: 12px; transition: transform 0.3s var(--ease-out); }
.jp.collapsed .jp-toggle { transform: rotate(-90deg); }
.jp.collapsed .jp-tabs, .jp.collapsed .jp-list { display: none; }
.jp-tabs { display: flex; gap: 4px; padding: 10px 12px 8px; flex-wrap: wrap; }
.jp-tab { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); background: rgba(21,24,32,0.05); border: 1px solid transparent; border-radius: 999px; padding: 6px 4px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; }
.jp-tab:hover { color: var(--ink); }
.jp-tab.on { color: var(--bone); background: var(--ink); }
.jp-list { overflow-y: auto; padding: 4px 14px 14px; }
.jp-list::-webkit-scrollbar { width: 7px; }
.jp-list::-webkit-scrollbar-thumb { background: rgba(21,24,32,0.18); border-radius: 4px; }
.jp-pane { display: none; }
.jp-pane.on { display: block; }
.jp-row { padding: 9px 0; border-bottom: 1px solid rgba(21,24,32,0.07); }
.jp-row:last-child { border-bottom: none; }
.jp-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.jp-name { font-size: 11.5px; color: var(--ink-soft); letter-spacing: -0.01em; }
.jp-val { font-family: var(--font-mono); font-size: 10.5px; color: var(--rust); }
.jp-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 3px; background: rgba(21,24,32,0.16); outline: none; cursor: pointer; }
.jp-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--rust); border: 2px solid var(--bone); box-shadow: 0 1px 4px rgba(21,24,32,0.3); cursor: pointer; }
.jp-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--rust); border: 2px solid var(--bone); cursor: pointer; }
/* phones: tall full-width 3D view, joint panel drops BELOW it (no overlay) */
@media (max-width: 760px) {
.viewer-wrap { display: flex; flex-direction: column; gap: 12px; }
#robot3d { aspect-ratio: auto; height: 60vh; min-height: 360px; }
.jp {
position: static; top: auto; right: auto; left: auto; bottom: auto; z-index: auto;
width: auto; max-height: none;
}
.jp-list { max-height: 44vh; }
.jp-tabs { padding: 12px 12px 8px; }
.jp-tab { padding: 11px 4px; font-size: 11px; }
.jp-row { padding: 12px 0; }
.jp-name { font-size: 13px; }
.jp-slider { height: 5px; }
.jp-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
.jp-slider::-moz-range-thumb { width: 24px; height: 24px; }
.jp-reset { padding: 9px 15px; font-size: 11px; }
}
/* ── WBC interactive viewers (compliance + operating modes) ── */
.wbc-block { position: relative; }
.wbc-stage { aspect-ratio: 16 / 10; cursor: grab; }
.wbc-stage.grabbing { cursor: grabbing; }
.wbc-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.wbc-stage .viewer-loading { position: absolute; inset: 0; }
.wbc-stage.loaded .viewer-loading { opacity: 0; pointer-events: none; }
.wbc-ctl {
position: absolute; top: 14px; right: 14px; z-index: 4;
width: clamp(214px, 23vw, 268px);
display: flex; flex-direction: column; gap: 12px;
padding: 14px;
background: rgba(244,234,210,0.64);
-webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
border: 1px solid rgba(255,255,255,0.5); border-radius: 12px;
box-shadow: var(--glass-hi), 0 18px 44px -22px rgba(21,24,32,0.4);
}
.wbc-ctl-head { display: flex; align-items: center; justify-content: space-between; }
.wbc-ctl-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.wbc-seg { display: flex; gap: 4px; }
.wbc-seg button {
flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--ash); background: rgba(21,24,32,0.05);
border: 1px solid transparent; border-radius: 999px; padding: 7px 4px; cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.wbc-seg button:hover { color: var(--ink); }
.wbc-seg button.on { color: var(--bone); background: var(--ink); }
.wbc-row { padding: 2px 0; }
.wbc-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.wbc-row-top .lab { font-size: 11.5px; color: var(--ink-soft); letter-spacing: -0.01em; }
.wbc-row-top .out { font-family: var(--font-mono); font-size: 10.5px; color: var(--rust); }
.wbc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 3px; background: rgba(21,24,32,0.16); outline: none; cursor: pointer; }
.wbc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--rust); border: 2px solid var(--bone); box-shadow: 0 1px 4px rgba(21,24,32,0.3); cursor: pointer; }
.wbc-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--rust); border: 2px solid var(--bone); cursor: pointer; }
.wbc-pad-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.wbc-pad {
position: relative; width: 132px; height: 132px; border-radius: 12px;
background: radial-gradient(circle at 50% 50%, rgba(63,181,107,0.14), transparent 70%), rgba(21,24,32,0.06);
border: 1px solid rgba(21,24,32,0.14); touch-action: none; cursor: grab;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.wbc-pad::before, .wbc-pad::after { content: ""; position: absolute; background: rgba(21,24,32,0.1); }
.wbc-pad::before { left: 50%; top: 8px; bottom: 8px; width: 1px; transform: translateX(-0.5px); }
.wbc-pad::after { top: 50%; left: 8px; right: 8px; height: 1px; transform: translateY(-0.5px); }
.wbc-pad:active { cursor: grabbing; }
.wbc-knob {
position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; border-radius: 50%;
transform: translate(-50%, -50%); background: #3FB56B; border: 2px solid var(--bone);
box-shadow: 0 2px 10px rgba(21,24,32,0.4), 0 0 0 4px rgba(63,181,107,0.18); pointer-events: none;
}
.wbc-pad-axes { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 9.5px; color: var(--ash); }
.wbc-pad-axes b { color: #2e9457; font-weight: 500; }
.wbc-note { font-size: 11px; line-height: 1.5; color: var(--ash); }
.wbc-note .green { color: #2e9457; font-weight: 500; }
.wbc-reset { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: rgba(21,24,32,0.06); border: 1px solid rgba(21,24,32,0.12); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: background 0.2s ease; }
.wbc-reset:hover { background: var(--rust); color: var(--bone); border-color: var(--rust); }
/* phones / narrow: give the 3D view a tall full-width stage and drop the
controls BELOW it in normal flow — no overlay, big tappable targets. */
@media (max-width: 760px) {
.wbc-block { display: flex; flex-direction: column; gap: 12px; }
.wbc-stage { aspect-ratio: auto; height: 60vh; min-height: 360px; }
.wbc-ctl {
position: static; top: auto; right: auto; z-index: auto;
width: auto; max-width: none; padding: 16px; gap: 14px;
}
.wbc-seg { gap: 6px; }
.wbc-seg button { padding: 12px 6px; font-size: 11px; }
.wbc-row-top .lab { font-size: 13px; }
.wbc-row-top .out { font-size: 11.5px; }
.wbc-slider { height: 5px; }
.wbc-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
.wbc-slider::-moz-range-thumb { width: 24px; height: 24px; }
.wbc-pad { width: 168px; height: 168px; }
.wbc-knob { width: 42px; height: 42px; }
.wbc-reset { padding: 9px 16px; font-size: 11px; }
.wbc-note { font-size: 12.5px; }
/* keep the fullscreen + hint chips clear of the rounded corners */
.wbc-stage .viewer-hint { left: 12px; bottom: 12px; }
}
/* ── exploded view (scroll-driven) ── */
.explode-scroll { position: relative; height: 320vh; }
.explode-stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.explode-grid { display: grid; grid-template-columns: 2.4fr 0.95fr; gap: clamp(16px, 3vw, 44px); align-items: center; width: 100%; }
.explode-stage { aspect-ratio: auto; height: 82vh; }
#explodeCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.xp-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.xp-label {
position: absolute; top: 0; left: 0; pointer-events: auto; opacity: 0;
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--ink);
background: rgba(244,234,210,0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.6); border-radius: 999px; padding: 5px 11px 5px 8px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 16px -8px rgba(21,24,32,0.35);
transition: opacity 0.25s var(--ease-out), background 0.2s ease, color 0.2s ease;
}
.xp-label .xp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 3px rgba(198,48,26,0.18); flex: none; }
.xp-label:hover, .xp-label.on { background: var(--ink); color: var(--bone); }
.xp-label.on .xp-dot, .xp-label:hover .xp-dot { background: var(--bone); box-shadow: 0 0 0 3px rgba(244,234,210,0.18); }
.xp-progress {
position: absolute; left: 18px; bottom: 16px; z-index: 4;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash);
display: flex; align-items: center; gap: 9px;
background: rgba(244,234,210,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 7px 12px;
}
.xp-progress b { color: var(--rust); font-weight: 500; }
.explode-copy .eyebrow { color: var(--rust); display: block; margin-bottom: 14px; }
.explode-copy h3 { margin-bottom: 14px; transition: opacity 0.3s var(--ease-out); }
.explode-copy p { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--ink-soft); min-height: 5.5em; }
@media (max-width: 860px) {
.explode-grid { grid-template-columns: 1fr; gap: 16px; }
.explode-stage { height: 60vh; }
.explode-scroll { height: 300vh; }
.explode-copy { order: -1; }
.explode-copy p { min-height: 0; }
}
/* ── AR · view in your room (model-viewer) ── */
.ar-stage model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; }
.ar-btn { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; }
.ar-stage .viewer-hint { z-index: 2; }
@media (max-width: 640px) { .ar-stage { aspect-ratio: 4 / 5; } }
/* ── interactive BOM cost donut ── */
.bom-donut { position: relative; width: min(280px, 78%); margin: 0 auto 30px; }
.bom-donut-svg { width: 100%; height: auto; display: block; }
.bom-seg { transition: opacity 0.25s ease, stroke-width 0.2s ease; }
.bom-seg.dim { opacity: 0.26; }
.bom-seg.hot { stroke-width: 17; }
.bom-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.bom-c-val { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; line-height: 1; color: var(--ink); transition: color 0.2s ease; }
.bom-c-key { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin-top: 6px; text-align: center; max-width: 76%; line-height: 1.4; }
.spec-table .row.bom-row-hot { padding-left: 8px; background: linear-gradient(90deg, rgba(198,48,26,0.07), transparent 70%); }
/* ── swerve velocity playground ── */
.swerve-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.swerve-stage {
position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; cursor: grab; touch-action: none;
background: radial-gradient(ellipse at 50% 42%, rgba(198,48,26,0.06), transparent 60%), linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
border: 1px solid rgba(21,24,32,0.08); box-shadow: 0 30px 60px -36px rgba(21,24,32,0.28);
}
.swerve-stage:active { cursor: grabbing; }
#swerveCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.swerve-hint {
position: absolute; left: 16px; bottom: 14px; z-index: 2;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash);
display: flex; align-items: center; gap: 9px;
background: rgba(244,234,210,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 7px 12px;
}
.swerve-panel { display: flex; flex-direction: column; gap: 16px; }
.swerve-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.sw-cell { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid rgba(21,24,32,0.10); }
.sw-cell .k { font-size: 12px; color: var(--ink-soft); }
.sw-cell .v { font-family: var(--font-mono); font-size: 15px; color: var(--rust); }
.swerve-steers { display: flex; gap: 8px; }
.sw-mod { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 12px; background: rgba(21,24,32,0.05); }
.sw-mod span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ash); }
.sw-mod b { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--ink); }
@media (max-width: 760px) {
.swerve-wrap { grid-template-columns: 1fr; }
}
/* ─── Connect / links hub ─────────────────────────────────────────── */
.links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .links-grid { grid-template-columns: 1fr; } }
.link-col {
border: var(--line-w) solid var(--glass-border); border-radius: 12px; padding: 30px 28px 12px;
background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
box-shadow: var(--glass-hi), var(--glass-sh);
transition: box-shadow 0.4s var(--ease-out), border-color 0.4s ease, background 0.4s ease, transform 0.4s var(--ease-out);
}
.link-col:hover { background: var(--glass-bg-2); border-color: rgba(255,255,255,0.85); transform: translateY(-3px); }
.link-col h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.02em; margin-bottom: 6px; }
.link-col .col-sub { font-size: 13px; color: var(--ash); margin-bottom: 14px; }
.link-row {
display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
padding: 16px 0; border-top: 1px solid rgba(21,24,32,0.10); text-decoration: none; color: var(--ink);
transition: padding-left 0.35s var(--ease-out);
}
.link-row:hover { padding-left: 6px; }
.link-row .lr-title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.link-row .lr-meta { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ash); margin-top: 3px; }
.link-row .lr-arrow { font-family: var(--font-sans); font-size: 16px; color: var(--ash); opacity: 0.6; transition: transform 0.35s var(--ease-out), color 0.3s ease, opacity 0.3s ease; }
.link-row:hover .lr-arrow { transform: translate(3px,-3px); color: var(--rust); opacity: 1; }
/* ─── Callout / note box — comic narration strip ──────────────────── */
.callout { border-left: 4px solid var(--rust); background: rgba(217,161,63,0.10); padding: 12px 18px 12px 22px; margin: 8px 0; border-radius: 0 8px 8px 0; }
.callout p { color: var(--ink-soft); }
.dark-sec .callout { background: rgba(217,161,63,0.08); }
.dark-sec .callout p { color: var(--ash-light); }
/* ─── Footer — the city at night ──────────────────────────────────── */
/* A deco skyline (stepped setbacks + a Chrysler-style spire) is baked in
as an inline-SVG border band, so every page gets the skyline with zero
HTML changes. */
footer { background: var(--ink); color: var(--ash-light); padding: 0 0 24px; position: relative; }
footer::before {
content: ''; display: block; height: clamp(84px, 11vw, 150px); margin-bottom: clamp(36px, 5vh, 60px);
background-color: var(--bone);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201600%20190'%20preserveAspectRatio%3D'none'%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M%200%20190%20L%200%20150%20L%2020%20150%20L%2020%20128%20L%2048%20128%20L%2052%20128%20L%2056%20128%20L%2056%20112%20L%2054%20112%20L%2054%20106%20L%2061%2098%20L%2068%20106%20L%2068%20112%20L%2066%20112%20L%2066%20128%20L%2070%20128%20L%2076%20128%20L%2076%20150%20L%2092%20150%20L%2092%20108%20L%20100%20108%20L%20100%2096%20L%20122%2096%20L%20122%20108%20L%20130%20108%20L%20130%20150%20L%20146%20150%20L%20146%20132%20L%20178%20132%20L%20182%20132%20L%20186%20132%20L%20186%20116%20L%20184%20116%20L%20184%20110%20L%20191%20102%20L%20198%20110%20L%20198%20116%20L%20196%20116%20L%20196%20132%20L%20200%20132%20L%20206%20132%20L%20206%20150%20L%20220%20150%20L%20220%20122%20L%20232%20122%20L%20232%2076%20L%20235%2076%20L%20235%2064%20L%20238%2064%20L%20238%2076%20L%20246%2076%20L%20249%2052%20L%20252%2076%20L%20260%2076%20L%20260%2064%20L%20263%2064%20L%20263%2076%20L%20266%2076%20L%20266%20122%20L%20280%20122%20L%20280%20150%20L%20294%20150%20L%20294%20118%20L%20306%20118%20L%20306%20104%20L%20326%20104%20L%20326%20118%20L%20336%20118%20L%20336%20150%20L%20350%20150%20L%20350%20128%20L%20362%20128%20L%20362%2096%20L%20362%2096%20Q%20364%2077%20387.5%2074%20L%20368%2084%20Q%20370%2067%20387.5%2064%20L%20374%2074%20Q%20376%2058%20387.5%2055%20L%20379%2064%20Q%20381%2050%20387.5%2047%20L%20383%2055%20Q%20385%2043%20387.5%2040%20L%20386%2047%20Q%20388%2037%20387.5%2034%20L%20388%2026%20L%20388%206%20L%20392%206%20L%20392%2026%20L%20392.5%2034%20Q%20392%2037%20394%2047%20L%20392.5%2040%20Q%20395%2043%20397%2055%20L%20392.5%2047%20Q%20399%2050%20401%2064%20L%20392.5%2055%20Q%20404%2058%20406%2074%20L%20392.5%2064%20Q%20410%2067%20412%2084%20L%20392.5%2074%20Q%20416%2077%20418%2096%20L%20418%2096%20L%20418%20128%20L%20432%20128%20L%20432%20150%20L%20446%20150%20L%20446%20126%20L%20476%20126%20L%20480%20126%20L%20484%20126%20L%20484%20110%20L%20482%20110%20L%20482%20104%20L%20489%2096%20L%20496%20104%20L%20496%20110%20L%20494%20110%20L%20494%20126%20L%20498%20126%20L%20504%20126%20L%20504%20150%20L%20520%20150%20L%20520%20100%20L%20528%20100%20L%20528%2088%20L%20552%2088%20L%20552%20100%20L%20560%20100%20L%20560%20150%20L%20576%20150%20L%20576%20132%20L%20592%20132%20L%20592%20112%20L%20604%20112%20L%20604%2094%20L%20614%2094%20L%20614%2042%20L%20622%2042%20L%20622%2032%20L%20628%2032%20L%20628%2024%20L%20633%2024%20L%20633%2012%20L%20630%2012%20L%20630%200%20L%20636%200%20L%20636%2012%20L%20633%2012%20L%20633%2024%20L%20638%2024%20L%20638%2032%20L%20644%2032%20L%20644%2042%20L%20652%2042%20L%20652%2094%20L%20662%2094%20L%20662%20112%20L%20674%20112%20L%20674%20132%20L%20690%20132%20L%20690%20150%20L%20704%20150%20L%20704%20130%20L%20734%20130%20L%20738%20130%20L%20742%20130%20L%20742%20114%20L%20740%20114%20L%20740%20108%20L%20747%20100%20L%20754%20108%20L%20754%20114%20L%20752%20114%20L%20752%20130%20L%20756%20130%20L%20762%20130%20L%20762%20150%20L%20776%20150%20L%20776%20134%20L%20790%20134%20L%20790%2092%20Q%20785%2082%20793%2076%20Q%20799%2070%20802%2064%20L%20804%2064%20L%20804%2052%20L%20808%2052%20L%20808%2064%20L%20810%2064%20Q%20813%2070%20819%2076%20Q%20827%2082%20822%2092%20L%20822%20134%20L%20836%20134%20L%20836%20150%20L%20850%20150%20L%20850%20134%20L%20880%20134%20L%20880%20118%20L%20906%20118%20L%20906%20150%20L%20920%20150%20L%20920%20138%20L%20996%20138%20L%20996%2074%20L%201002%2074%20L%201002%2066%20L%201034%2066%20L%201034%2074%20L%201040%2074%20L%201040%20138%20L%201246%20138%20L%201246%2074%20L%201252%2074%20L%201252%2066%20L%201284%2066%20L%201284%2074%20L%201290%2074%20L%201290%20138%20L%201364%20138%20L%201364%20150%20L%201378%20150%20L%201378%20128%20L%201406%20128%20L%201410%20128%20L%201414%20128%20L%201414%20112%20L%201412%20112%20L%201412%20106%20L%201419%2098%20L%201426%20106%20L%201426%20112%20L%201424%20112%20L%201424%20128%20L%201428%20128%20L%201434%20128%20L%201434%20150%20L%201450%20150%20L%201450%20106%20L%201458%20106%20L%201458%2094%20L%201480%2094%20L%201480%20106%20L%201488%20106%20L%201488%20150%20L%201504%20150%20L%201504%20134%20L%201536%20134%20L%201536%20150%20L%201600%20150%20L%201600%20190%20Z%20M%201003.0%20132%20L%201003.0%2096%20Q%201009.5%2082%201016.0%2096%20L%201016.0%20132%20ZM%201020.0%20132%20L%201020.0%2096%20Q%201026.5%2082%201033.0%2096%20L%201033.0%20132%20ZM%201253.0%20132%20L%201253.0%2096%20Q%201259.5%2082%201266.0%2096%20L%201266.0%20132%20ZM%201270.0%20132%20L%201270.0%2096%20Q%201276.5%2082%201283.0%2096%20L%201283.0%20132%20Z%22%20fill%3D%22%23151820%22%2F%3E%3Cpath%20d%3D%22M%20920%20138%20Q%20962%20132%201018%2068%20M%201018%2068%20Q%201143%20128%201268%2068%20M%201268%2068%20Q%201326%20132%201364%20138%22%20fill%3D%22none%22%20stroke%3D%22%23151820%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M%201043%2079%20L%201043%20138%20M%201068%2087%20L%201068%20138%20M%201093%2093%20L%201093%20138%20M%201118%2097%20L%201118%20138%20M%201143%2098%20L%201143%20138%20M%201168%2097%20L%201168%20138%20M%201193%2093%20L%201193%20138%20M%201218%2087%20L%201218%20138%20M%201243%2079%20L%201243%20138%20%22%20fill%3D%22none%22%20stroke%3D%22%23151820%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E");
background-size: 100% 100%; background-repeat: no-repeat;
}
.foot-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.foot-brand { font-family: var(--font-display); font-size: 34px; color: var(--gold); letter-spacing: 0.03em; margin-bottom: 10px; }
.foot-brand-sub { font-size: 13px; color: var(--ash-light); max-width: 36ch; line-height: 1.5; }
.foot-mini { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.foot-mini a { font-family: var(--font-comic); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; padding: 8px 14px 7px; border-radius: 8px; text-decoration: none; color: var(--bone); border: 1.5px solid rgba(217,161,63,0.5); transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.foot-mini a:hover { background: rgba(217,161,63,0.12); border-color: var(--gold); color: var(--gold); }
.foot-col h6 { font-family: var(--font-comic); font-size: 14px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 16px; font-weight: 400; }
.foot-col a { display: block; color: var(--ash-light); text-decoration: none; font-size: 13px; margin-bottom: 9px; transition: color 0.2s ease; }
.foot-col a:hover { color: var(--bone); }
.foot-bottom { border-top: 1px solid rgba(217,161,63,0.3); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--ash-light); letter-spacing: 0.05em; }
/* ─── Fade-in primitive ───────────────────────────────────────────── */
/* Hidden state is gated behind html.js so content is always visible if
JavaScript is disabled, blocked, or still loading (no invisible page). */
.fade-up { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
html.js .fade-up { opacity: 0; transform: translateY(34px); }
html.js .fade-up.in { opacity: 1; transform: translateY(0); }
.fade-up.d1 { transition-delay: 0.08s; }
.fade-up.d2 { transition-delay: 0.16s; }
.fade-up.d3 { transition-delay: 0.24s; }
.fade-up.d4 { transition-delay: 0.32s; }
/* ─── Carousel rail (in the wild / NYC) — auto-floating, edge-masked ── */
.marquee {
overflow: hidden;
/* Apple-style soft edge fade so cards melt in/out at the rail edges */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.marquee-track {
display: flex;
gap: clamp(18px, 2vw, 28px);
width: max-content;
animation: marquee-rtl 60s linear infinite;
will-change: transform;
}
/* direction variants — base drifts content right-to-left; .ltr floats left-to-right */
.marquee-track.ltr { animation-name: marquee-ltr; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-rtl { from { transform: translate3d(0,0,0); } to { transform: translate3d(calc(-50% - clamp(9px,1vw,14px)),0,0); } }
@keyframes marquee-ltr { from { transform: translate3d(calc(-50% - clamp(9px,1vw,14px)),0,0); } to { transform: translate3d(0,0,0); } }
.wild-card {
flex: 0 0 clamp(256px, 28vw, 392px);
aspect-ratio: 3 / 4;
border-radius: 12px;
overflow: hidden;
position: relative;
border: var(--line-w) solid rgba(217,161,63,0.55);
background: #10131C;
box-shadow: 5px 5px 0 rgba(0,0,0,0.55);
transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
/* comic-strip tilt: alternate panels lean a touch */
.wild-card:nth-child(odd) { transform: rotate(-0.6deg); }
.wild-card:nth-child(even) { transform: rotate(0.5deg); }
.wild-card .ph { height: 100%; }
/* legibility gradient bottom→top so the place name always reads */
.wild-card::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(8,7,6,0) 38%, rgba(8,7,6,0.72) 100%);
}
.wild-card:hover {
transform: translateY(-6px) rotate(0deg);
border-color: var(--gold);
box-shadow: 8px 10px 0 rgba(0,0,0,0.55);
}
.wild-card-top {
position: absolute; top: 18px; left: 20px; z-index: 2;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash-light);
display: flex; align-items: center; gap: 8px;
}
.wild-card-top::before {
content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 3px rgba(198,48,26,0.22);
}
.wild-card-meta { position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.wild-card h5 { font-family: var(--font-comic); font-weight: 400; font-size: clamp(20px, 2vw, 27px); letter-spacing: 0.05em; line-height: 1.05; color: var(--bone); text-shadow: 2px 2px 0 rgba(0,0,0,0.7); }
.wild-card .coord { font-family: var(--font-mono); font-size: 10px; color: var(--ash-light); letter-spacing: 0.12em; text-transform: uppercase; text-align: right; line-height: 1.5; white-space: nowrap; }
/* ─── Timeline (long-horizon task) ────────────────────────────────── */
.timeline { position: relative; padding-left: clamp(28px, 4vw, 64px); }
.timeline::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(21,24,32,0.18); }
.dark-sec .timeline::before { background: rgba(244,234,210,0.18); }
.tl-step { position: relative; padding-bottom: clamp(40px, 6vh, 76px); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.tl-step:last-child { padding-bottom: 0; }
@media (max-width: 880px) { .tl-step { grid-template-columns: 1fr; gap: 18px; } }
.tl-step::before { content: ''; position: absolute; left: calc(clamp(28px, 4vw, 64px) * -1); top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--rust); border: 1px solid var(--rust); transform: translateX(calc(-50% + 0.5px)); }
.tl-meta { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ash); margin-bottom: 10px; }
.dark-sec .tl-meta { color: var(--ash-light); }
.tl-step h4 { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; }
.tl-step p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }
.dark-sec .tl-step p { color: var(--ash-light); }
.tl-shot { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid rgba(21,24,32,0.08); position: relative; }
.dark-sec .tl-shot { border-color: rgba(244,234,210,0.10); }
/* ─── Hero entrance choreography (pure CSS, fires on load) ─────────── */
@keyframes enterUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
html.js .hero-home-inner > *,
html.js .page-hero-inner > * { opacity: 0; animation: enterUp 1.05s var(--ease-out) both; }
html.js .hero-home-inner > *:nth-child(1), html.js .page-hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
html.js .hero-home-inner > *:nth-child(2), html.js .page-hero-inner > *:nth-child(2) { animation-delay: 0.14s; }
html.js .hero-home-inner > *:nth-child(3), html.js .page-hero-inner > *:nth-child(3) { animation-delay: 0.23s; }
html.js .hero-home-inner > *:nth-child(4), html.js .page-hero-inner > *:nth-child(4) { animation-delay: 0.32s; }
html.js .hero-home-inner > *:nth-child(5), html.js .page-hero-inner > *:nth-child(5) { animation-delay: 0.41s; }
html.js .hero-home-inner > *:nth-child(6), html.js .page-hero-inner > *:nth-child(6) { animation-delay: 0.50s; }
html.js .hero-coord-row { opacity: 0; animation: fadeOnly 1.3s var(--ease-out) 0.7s both; }
/* ─── Animated wordmark: per-letter entrance + traveling sheen + hover ─ */
.hero-title .ch { display: inline-block; }
/* Under JS the whole h1 stays put (no block-level enterUp); letters animate instead. */
html.js .hero-title { opacity: 1; transform: none; animation: none; }
html.js .hero-title .ch {
opacity: 0; transform: translateY(0.5em); filter: blur(8px);
transition: opacity 0.9s var(--ease-out), transform 0.55s var(--ease-out), filter 0.9s var(--ease-out);
animation: chSheen 6s linear infinite; animation-play-state: paused;
}
html.js .hero-title.in .ch { opacity: 1; transform: none; filter: none; animation-play-state: running; }
html.js .hero-title.in .ch:hover { transform: translateY(-0.08em); }
/* Traveling rust highlight — staggered so it sweeps left→right, then rests. */
html.js .hero-title .ch:nth-child(1) { animation-delay: 0s; }
html.js .hero-title .ch:nth-child(2) { animation-delay: 0.5s; }
html.js .hero-title .ch:nth-child(3) { animation-delay: 1.0s; }
html.js .hero-title .ch:nth-child(4) { animation-delay: 1.5s; }
html.js .hero-title .ch:nth-child(5) { animation-delay: 2.0s; }
@keyframes chSheen {
0%, 18%, 100% { color: var(--ink); text-shadow: none; }
9% { color: var(--rust); text-shadow: 0 0 26px rgba(198,48,26,0.35); }
}
/* ─── Rotating hero subtitle (per-letter assemble swap) ───────────── */
.hero-sub { min-height: 1.05em; }
.hero-sub .rot { display: inline-block; }
.hero-sub .rw { display: inline-block; white-space: nowrap; } /* keep words whole; wrap only between words */
.hero-sub .rl {
display: inline-block; transform-origin: 50% 100%;
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out),
filter 0.5s var(--ease-out), color 0.5s var(--ease-out);
}
/* incoming letters rise + unblur + untwist, flashing rust as they land */
.hero-sub .rl.hid-in { opacity: 0; transform: translateY(0.55em) rotate(6deg); filter: blur(6px); color: var(--rust); }
/* outgoing letters lift away, fading back to rust */
.hero-sub .rl.hid-out { opacity: 0; transform: translateY(-0.45em) rotate(-5deg); filter: blur(6px); color: var(--rust); }
/* ─── Pointer-follow glow inside heroes ───────────────────────────── */
.hero-glow {
position: absolute; top: 0; left: 0; width: 480px; height: 480px; border-radius: 50%;
transform: translate(-50%, -50%); pointer-events: none; z-index: 1;
opacity: 0; transition: opacity 0.7s var(--ease-out); will-change: left, top, opacity;
}
.hero-home .hero-glow { background: radial-gradient(circle at center, rgba(198,48,26,0.20), transparent 66%); mix-blend-mode: multiply; }
.page-hero .hero-glow { background: radial-gradient(circle at center, rgba(198,48,26,0.42), transparent 64%); mix-blend-mode: screen; filter: blur(6px); }
.hero-glow.show { opacity: 1; }
/* ─── Scroll-linked reveal: media scales in ───────────────────────── */
html.js .reveal-media { opacity: 0; transform: scale(0.955) translateY(22px); transition: opacity 1s var(--ease-out), transform 1.15s var(--ease-out); will-change: opacity, transform; }
html.js .reveal-media.is-visible { opacity: 1; transform: none; }
/* parallax targets get GPU hint */
[data-speed] { will-change: transform; }
.hero-home-inner { will-change: transform, opacity; }
/* ─── Scroll cue ──────────────────────────────────────────────────── */
.scroll-cue {
position: absolute; right: var(--gutter); bottom: clamp(26px, 5vh, 46px); z-index: 3;
display: inline-flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none;
font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ash);
transition: color 0.3s ease;
}
.scroll-cue:hover { color: var(--ink); }
.page-hero .scroll-cue { color: var(--ash-light); }
.page-hero .scroll-cue:hover { color: var(--bone); }
.scroll-cue .cue-line { width: 1px; height: 40px; background: rgba(107,102,96,0.35); position: relative; overflow: hidden; border-radius: 1px; }
.page-hero .scroll-cue .cue-line { background: rgba(244,234,210,0.22); }
.scroll-cue .cue-line::after { content: ''; position: absolute; inset: 0; transform: translateY(-100%); background: var(--rust); animation: cueRun 2.4s var(--ease-in-out) infinite; }
@keyframes cueRun { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
@media (max-width: 600px) { .scroll-cue { display: none; } }
/* ─── Apple-style polish (global) ─────────────────────────────────── */
/* Precise anchor landing under the fixed nav */
section[id] { scroll-margin-top: 76px; }
/* Accessible focus rings — visible on keyboard, quiet on mouse */
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 6px;
}
/* Gentle press feedback on pill buttons (Apple-like) */
.btn:active { transform: translateY(0) scale(0.98); }
/* Demo media lifts subtly on hover */
.demo-media { transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.demo-media:hover { transform: translateY(-4px); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6); }
/* ─── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
.fade-up { opacity: 1 !important; transform: none !important; }
.marquee-track { animation: none !important; }
.hero-home-inner > *, .page-hero-inner > *, .hero-coord-row,
.reveal-media { opacity: 1 !important; transform: none !important; animation: none !important; }
.hero-glow { display: none !important; }
[data-speed] { transform: none !important; }
.scroll-cue .cue-line::after { animation: none !important; }
.hero-title .ch, .hero-sub .rl {
opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important;
color: inherit !important; text-shadow: none !important;
}
}
/* ── ROS graph: hoverable nodes + glass popup ── */
#rosGraph { position: relative; }
#rosGraph svg { width: 100%; height: auto; display: block; }
.rg-node { cursor: pointer; }
.rg-node rect:first-of-type { transition: filter .15s ease; }
.rg-node:hover rect:first-of-type { filter: brightness(1.4); }
.rg-pop {
position: absolute; z-index: 30; max-width: 286px; padding: 12px 14px;
border-radius: 14px; background: rgba(18,16,14,0.88);
backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 50px rgba(0,0,0,0.55);
color: var(--bone); opacity: 0; transform: translateY(4px);
transition: opacity .16s ease, transform .16s ease; pointer-events: none;
}
.rg-pop.on { opacity: 1; transform: none; }
.rg-pop-t {
font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
color: #fff; margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.rg-pop-t::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
background: var(--rg-accent, var(--rust)); flex: 0 0 auto;
}
.rg-pop-d { font-size: 12.5px; line-height: 1.5; color: rgba(244,234,210,0.82); }
.fig-hint { font-family: var(--font-mono); font-size: 11.5px; color: var(--ash); text-align: center; }
/* ── browser teleop (teleop-web.html) ── */
.tw-connect {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 14px 16px;
background: rgba(244,234,210,0.64);
-webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
border: 1px solid rgba(255,255,255,0.5); border-radius: 12px;
box-shadow: var(--glass-hi), 0 18px 44px -22px rgba(21,24,32,0.4);
}
.tw-pill {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; font-weight: 500;
padding: 6px 12px; border-radius: 999px; white-space: nowrap;
color: var(--ink-soft); background: rgba(21,24,32,0.07); border: 1px solid rgba(21,24,32,0.12);
}
.tw-pill.connecting { color: #8a5a00; background: rgba(255,184,0,0.16); border-color: rgba(255,184,0,0.4); }
.tw-pill.online { color: #1d6b3c; background: rgba(63,181,107,0.16); border-color: rgba(63,181,107,0.45); }
.tw-pill.err { color: #8c2f1b; background: rgba(198,48,26,0.16); border-color: rgba(198,48,26,0.45); }
.tw-url {
flex: 1 1 220px; min-width: 0;
font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
padding: 10px 14px; border-radius: 999px;
background: rgba(21,24,32,0.05); border: 1px solid rgba(21,24,32,0.14); outline: none;
}
.tw-url:focus { border-color: var(--rust); }
.tw-btn { padding: 10px 22px; }
.tw-rtt { font-family: var(--font-mono); font-size: 11px; color: var(--ash); white-space: nowrap; }
.tw-rtt b { color: var(--rust); font-weight: 500; }
/* ── cockpit (iOS CockpitView): full-bleed dark stage, corner joysticks ── */
.ck-stage {
aspect-ratio: 16 / 9; cursor: grab;
border: 1px solid rgba(21,24,32,0.35);
background:
radial-gradient(ellipse at 50% 18%, rgba(198,48,26,0.14), transparent 58%),
linear-gradient(180deg, #232838 0%, #131722 100%);
}
.ck-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.ck-stage.grabbing { cursor: grabbing; }
.ck-top {
position: absolute; top: 12px; left: 14px; right: 14px; z-index: 6;
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
pointer-events: none;
}
.ck-top > * { pointer-events: auto; }
.ck-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ck-chips .tw-pill { background: rgba(0,0,0,0.45); border-color: rgba(255,255,255,0.16); color: rgba(244,234,210,0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ck-chips .tw-pill.online { color: #6fe39a; border-color: rgba(63,181,107,0.55); }
.ck-chips .tw-pill.connecting { color: #ffd479; border-color: rgba(255,184,0,0.5); }
.ck-chip {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(244,234,210,0.6);
background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.13); border-radius: 999px;
padding: 6px 11px;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ck-chip b { color: #fff; font-weight: 500; }
.ck-seg {
display: flex; padding: 3px; border-radius: 999px;
background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.14);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ck-seg button {
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.65); background: none; border: none; border-radius: 999px;
padding: 7px 16px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.ck-seg button.on { background: var(--bone); color: var(--ink); }
.ck-bottom {
position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 6;
display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
pointer-events: none;
}
.ck-bottom > * { pointer-events: auto; }
.ck-corner { display: flex; align-items: flex-end; gap: 10px; }
.ck-cluster { display: flex; align-items: flex-end; gap: 10px; }
.ck-joy {
position: relative; width: 118px; height: 118px; border-radius: 50%;
background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.10), transparent 65%), rgba(0,0,0,0.42);
border: 1px solid rgba(255,255,255,0.18);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
touch-action: none; cursor: grab;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 28px -14px rgba(0,0,0,0.8);
}
.ck-joy.live { border-color: rgba(255,255,255,0.45); }
.ck-joy:active { cursor: grabbing; }
.ck-knob {
position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%;
transform: translate(-50%, -50%);
border: 2px solid rgba(255,255,255,0.85);
box-shadow: 0 3px 12px rgba(0,0,0,0.55); pointer-events: none;
transition: box-shadow 0.2s ease;
}
.ck-knob.live-tint { background: #3FB56B; box-shadow: 0 3px 12px rgba(0,0,0,0.55), 0 0 0 5px rgba(63,181,107,0.18); }
.ck-knob.clay-tint { background: #C6301A; box-shadow: 0 3px 12px rgba(0,0,0,0.55), 0 0 0 5px rgba(198,48,26,0.18); }
.ck-joy-lab {
position: absolute; bottom: 9px; left: 0; right: 0; text-align: center;
font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.18em;
color: rgba(255,255,255,0.6); pointer-events: none;
}
.ck-holds { display: flex; flex-direction: column; gap: 8px; }
.ck-hold {
width: 46px; height: 36px; border-radius: 10px;
background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.16);
color: #fff; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
touch-action: none; transition: background 0.15s ease;
}
.ck-hold.live { background: var(--rust); border-color: var(--rust); }
.ck-grip { display: flex; flex-direction: column; align-items: center; gap: 4px; touch-action: none; cursor: grab; }
.ck-grip-val { font-family: var(--font-mono); font-size: 10px; color: #fff; }
.ck-grip-track {
position: relative; width: 42px; height: 102px; border-radius: 999px; overflow: hidden;
background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.16);
display: flex; align-items: flex-end;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ck-grip-fill { width: 100%; height: 10%; border-radius: 999px; background: linear-gradient(180deg, #4fce82, #2e9457); transition: height 0.05s linear; }
.ck-grip-lab { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.16em; color: rgba(255,255,255,0.65); }
.ck-stop {
align-self: flex-end;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; font-weight: 500;
color: #fff; background: #b3261e; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px;
padding: 11px 26px; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease;
box-shadow: 0 10px 26px -12px rgba(179,38,30,0.9);
}
.ck-stop:hover { background: #d33a30; transform: scale(1.05); }
/* ── manipulation console (iOS WholeBodyView): stage + ink side panel ── */
.rc {
display: grid; grid-template-columns: 1fr 300px;
border-radius: 12px; overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 30px 70px -36px rgba(0,0,0,0.6);
}
.rc-stage {
aspect-ratio: auto; border-radius: 0; border: none; box-shadow: none;
min-height: 480px; cursor: grab;
background:
radial-gradient(ellipse at 50% 25%, rgba(198,48,26,0.10), transparent 60%),
linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.rc-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.rc-stage.grabbing { cursor: grabbing; }
.rc-float { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6; }
.rc-feel {
display: flex; padding: 4px; border-radius: 999px;
background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.14);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.rc-feel button {
font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
color: rgba(255,255,255,0.6); background: none; border: none; border-radius: 999px;
padding: 8px 20px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
.rc-feel button.on { background: var(--bone); color: var(--ink); }
.rc-panel {
background: #1A1E2A; color: var(--bone);
padding: 18px 16px; display: flex; flex-direction: column; gap: 16px;
border-left: 1px solid rgba(255,255,255,0.08);
}
.rc-head { display: flex; align-items: center; justify-content: space-between; }
.rc-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,234,210,0.55); }
.rc-home {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--bone); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: background 0.2s ease;
}
.rc-home:hover { background: var(--rust); border-color: var(--rust); }
.rc-axis { display: flex; flex-direction: column; gap: 7px; }
.rc-axis-lab { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,234,210,0.42); }
.rc-axis-row { display: flex; justify-content: space-between; align-items: baseline; }
.rc-out { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: #e9a679; }
.rc-seg { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.06); }
.rc-seg button {
flex: 1; min-width: 0;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(244,234,210,0.55); background: none; border: none; border-radius: 999px;
padding: 8px 4px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.rc-seg button.on { background: var(--bone); color: var(--ink); }
.rc-note { font-size: 11.5px; line-height: 1.55; color: rgba(244,234,210,0.55); }
.rc-panel .wbc-slider { background: rgba(255,255,255,0.18); }
/* joint sliders inside the dark panel */
.rc-jtabs { padding: 0 0 8px; }
.rc-jlist { max-height: 300px; overflow-y: auto; padding: 0 4px 0 0; }
.rc-jlist::-webkit-scrollbar { width: 7px; }
.rc-jlist::-webkit-scrollbar-thumb { background: rgba(244,234,210,0.2); border-radius: 4px; }
.rc-panel .jp-tab { color: rgba(244,234,210,0.5); background: rgba(255,255,255,0.07); }
.rc-panel .jp-tab.on { background: var(--bone); color: var(--ink); }
.rc-panel .jp-row { border-bottom-color: rgba(255,255,255,0.07); }
.rc-panel .jp-name { color: rgba(244,234,210,0.72); }
.rc-panel .jp-val { color: #e9a679; }
.rc-panel .jp-slider { background: rgba(255,255,255,0.18); }
/* ── status console ── */
.tw-console {
border: 1px solid rgba(21,24,32,0.12); border-radius: 12px; overflow: hidden;
background: rgba(244,234,210,0.6);
box-shadow: 0 18px 44px -26px rgba(21,24,32,0.35);
}
.tw-tele {
display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 1px;
background: rgba(21,24,32,0.08); border-bottom: 1px solid rgba(21,24,32,0.1);
}
.tw-tele > div { background: var(--bone, #F4EAD2); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tw-tele .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.tw-tele b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-log {
height: 280px; overflow-y: auto; padding: 14px 16px;
background: #171B26; font-family: var(--font-mono); font-size: 11px; line-height: 1.7;
}
.tw-log::-webkit-scrollbar { width: 8px; }
.tw-log::-webkit-scrollbar-thumb { background: rgba(244,234,210,0.18); border-radius: 4px; }
.tw-line { display: flex; gap: 10px; color: rgba(244,234,210,0.78); }
.tw-line .t { color: rgba(244,234,210,0.34); flex: 0 0 auto; }
.tw-line .lv { flex: 0 0 44px; font-weight: 500; }
.tw-line .m { min-width: 0; overflow-wrap: anywhere; }
.tw-line.sys .lv { color: #9aa7ff; }
.tw-line.ok .lv { color: #3FB56B; }
.tw-line.sim .lv { color: #e9a679; }
.tw-line.tx .lv { color: #6fc2ff; }
.tw-line.rx .lv { color: #57d8c2; }
.tw-line.warn .lv { color: #ffb800; }
.tw-line.err .lv { color: #ff6b57; }
.tw-line.err .m { color: #ffb4a8; }
.tw-log-actions { display: flex; gap: 8px; padding: 12px 16px; background: var(--bone, #F4EAD2); border-top: 1px solid rgba(21,24,32,0.1); }
/* ── phones: the cockpit goes tall, the console panel drops below ── */
@media (max-width: 760px) {
.ck-stage { aspect-ratio: auto; height: 72vh; min-height: 420px; }
.ck-joy { width: 132px; height: 132px; }
.ck-knob { width: 52px; height: 52px; }
.ck-stop { padding: 13px 24px; }
.ck-top { flex-wrap: wrap; }
.rc { grid-template-columns: 1fr; }
.rc-stage { min-height: 56vh; }
.rc-panel { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
.rc-seg button { padding: 11px 4px; font-size: 10.5px; }
.rc-feel button { padding: 10px 22px; }
.rc-jlist { max-height: 38vh; }
.tw-log { height: 220px; font-size: 12px; }
}
/* ─── Navigation · SLAM lab (dual backend) ───────────────────────── */
.slam-seg { display: inline-flex; padding: 4px; border-radius: 999px; gap: 2px;
background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.14);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); margin-bottom: 30px; }
.slam-seg button { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
color: rgba(244,234,210,0.62); background: none; border: none; border-radius: 999px;
padding: 9px 20px; cursor: pointer; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
display: inline-flex; align-items: center; gap: 7px; }
.slam-seg button .sd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.slam-seg button.on { background: var(--bone); color: var(--ink); box-shadow: 0 2px 10px -2px rgba(0,0,0,0.5); }
.slam-lab { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(20px, 4vw, 52px); align-items: stretch; }
@media (max-width: 880px) { .slam-lab { grid-template-columns: 1fr; } }
.slam-stage { position: relative; aspect-ratio: 16 / 11; border-radius: 12px; overflow: hidden;
background: radial-gradient(ellipse at 50% 30%, rgba(198,48,26,0.12), transparent 64%), linear-gradient(180deg, #171C29 0%, #0A0D14 100%);
border: 1px solid rgba(244,234,210,0.12); box-shadow: 0 40px 80px -44px rgba(0,0,0,0.7); }
.slam-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.slam-chips { position: absolute; left: 14px; bottom: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.slam-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--bone);
background: rgba(8,7,6,0.55); border: 1px solid rgba(244,234,210,0.14); border-radius: 999px; padding: 5px 11px;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.slam-chip b { color: var(--rust); font-weight: 500; }
.slam-tag { position: absolute; top: 13px; left: 14px; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash-light);
background: rgba(8,7,6,0.5); border: 1px solid rgba(244,234,210,0.12); border-radius: 999px; padding: 5px 11px; }
.slam-panel { display: flex; flex-direction: column; gap: 18px; }
.slam-panel .lead { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.12; letter-spacing: -0.02em; color: var(--bone); }
.slam-flow { list-style: none; display: flex; flex-direction: column; gap: 0; }
.slam-flow li { display: grid; grid-template-columns: 30px 1fr; gap: 13px; padding: 14px 0;
border-bottom: 1px solid rgba(244,234,210,0.10); }
.slam-flow li:first-child { border-top: 1px solid rgba(244,234,210,0.10); }
.slam-flow .sn { font-family: var(--font-mono); font-size: 11px; color: var(--rust); padding-top: 2px; }
.slam-flow h6 { font-size: 14px; font-weight: 600; color: var(--bone); margin: 0 0 3px; letter-spacing: -0.01em; }
.slam-flow p { font-size: 13px; line-height: 1.55; color: var(--ash-light); margin: 0; }
.slam-flow code, .slam-panel code { font-family: var(--font-mono); font-size: 0.86em; color: var(--rust);
background: rgba(198,48,26,0.12); padding: 1px 5px; border-radius: 5px; }
.slam-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.slam-meta .mc { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid rgba(244,234,210,0.10); }
.slam-meta .mc .k { font-size: 11px; color: var(--ash-light); }
.slam-meta .mc .v { font-family: var(--font-mono); font-size: 13.5px; color: var(--bone); }
/* show only the active backend's panel */
.slam-pane { display: none; }
.slam-pane.on { display: flex; flex-direction: column; gap: 18px; animation: slamFade 0.5s var(--ease-out); }
@keyframes slamFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ─── Navigation · localization output (drift) ───────────────────── */
.drift-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 4vw, 52px); align-items: center; }
@media (max-width: 880px) { .drift-wrap { grid-template-columns: 1fr; } }
.drift-stage { position: relative; aspect-ratio: 7 / 5; border-radius: 12px; overflow: hidden;
background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
border: 1px solid rgba(21,24,32,0.08); box-shadow: 0 30px 60px -36px rgba(21,24,32,0.28); }
.drift-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.drift-legend { position: absolute; top: 12px; left: 14px; display: flex; flex-direction: column; gap: 6px; }
.drift-legend span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; }
.drift-legend i { width: 16px; height: 2px; border-radius: 2px; display: inline-block; }
.drift-out .row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
padding: 13px 0; border-bottom: 1px solid rgba(21,24,32,0.10); }
.drift-out .row .lab { font-size: 13px; color: var(--ink-soft); }
.drift-out .row .pair { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 15px; }
.drift-out .row .pair .w { color: var(--rust); } .drift-out .row .pair .v { color: #2e9457; }
.drift-note { font-size: 11.5px; line-height: 1.55; color: var(--ash); margin-top: 4px; }
/* ═══════════════════════════════════════════════════════════════════
ISSUE Nº 01 — comic & deco component library
Bursts, narration boxes, stamps, speech bubbles, sticker tilts,
plus print-frame overrides for the interactive stages.
═══════════════════════════════════════════════════════════════════ */
/* remaining stages get the comic-panel frame */
.viewer-3d, .swerve-stage, .drift-stage, .tw-console {
border: var(--line-w) solid var(--ink); box-shadow: 6px 6px 0 rgba(21,24,32,0.9);
}
.slam-stage, .ck-stage { border: var(--line-w) solid rgba(217,161,63,0.55); box-shadow: 6px 6px 0 rgba(0,0,0,0.6); }
.arch-d, .arch-m { border: var(--line-w) solid var(--ink); box-shadow: 6px 6px 0 rgba(21,24,32,0.9); border-radius: 12px; }
.arch-fig { border: var(--line-w) solid var(--ink); box-shadow: 6px 6px 0 rgba(21,24,32,0.9); border-radius: 12px; }
.viewer-hint { border: 1.5px solid rgba(21,24,32,0.5); background: rgba(253,246,226,0.9); box-shadow: none; }
.spec span { border: 1.5px solid rgba(21,24,32,0.5); background: rgba(253,246,226,0.75); box-shadow: none; font-weight: 700; }
.dark-sec .spec span, .page-hero .spec span { border-color: rgba(217,161,63,0.5); background: rgba(253,246,226,0.06); color: var(--ash-light); box-shadow: none; font-weight: 400; }
/* ─── Action burst — a 16-point starburst with Bangers lettering.
Use for subsystem onomatopoeia: SLAM! GRIP! WHIRR! ZAP!
SLAM! (sm/lg variants) ─────────── */
.burst {
position: relative; display: inline-grid; place-items: center;
width: 150px; aspect-ratio: 1; padding: 26px;
font-family: var(--font-comic); font-size: 27px; letter-spacing: 0.04em;
color: #FFF6E4; text-transform: uppercase; text-align: center; line-height: 0.95;
transform: rotate(-7deg);
filter: drop-shadow(4px 4px 0 rgba(21,24,32,0.9));
z-index: 3; pointer-events: none;
}
.burst::before {
content: ''; position: absolute; inset: 0; z-index: -1; background: var(--rust);
clip-path: polygon(100% 50%, 85.31% 57.02%, 96.19% 69.13%, 79.93% 70%, 85.36% 85.36%, 70% 79.93%, 69.13% 96.19%, 57.02% 85.31%, 50% 100%, 42.98% 85.31%, 30.87% 96.19%, 30% 79.93%, 14.64% 85.36%, 20.07% 70%, 3.81% 69.13%, 14.69% 57.02%, 0% 50%, 14.69% 42.98%, 3.81% 30.87%, 20.07% 30%, 14.64% 14.64%, 30% 20.07%, 30.87% 3.81%, 42.98% 14.69%, 50% 0%, 57.02% 14.69%, 69.13% 3.81%, 70% 20.07%, 85.36% 14.64%, 79.93% 30%, 96.19% 30.87%, 85.31% 42.98%);
}
.burst.gold { color: var(--ink); } .burst.gold::before { background: var(--gold); }
.burst.night { color: var(--gold); } .burst.night::before { background: var(--ink); }
.burst.sm { width: 104px; font-size: 19px; padding: 20px; }
.burst.lg { width: 200px; font-size: 36px; padding: 36px; }
.burst.tilt-r { transform: rotate(6deg); }
/* pinned to a corner of a media panel */
.burst.pin { position: absolute; top: -34px; right: -22px; }
.burst.pin-l { position: absolute; top: -34px; left: -22px; transform: rotate(6deg); }
@media (max-width: 700px) { .burst.pin, .burst.pin-l { transform: scale(0.72) rotate(-7deg); top: -30px; right: -16px; } }
/* ─── Narration caption box — "MEANWHILE, IN THE WORKSHOP…" ───────────── */
.caption-box {
display: inline-block; background: #F2C94C; color: var(--ink);
border: var(--line-w) solid var(--ink); border-radius: 3px;
box-shadow: 4px 4px 0 rgba(21,24,32,0.9);
padding: 10px 16px; transform: rotate(-0.8deg);
font-family: var(--font-mono); font-weight: 700; font-size: 13px;
letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5;
}
.caption-box.straight { transform: none; }
/* ─── Cover stamp — the issue chip ────────────────────────────────── */
.issue-chip {
display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
padding: 9px 13px 7px; background: var(--panel); color: var(--ink);
border: var(--line-w) solid var(--ink); border-radius: 4px;
box-shadow: 3px 3px 0 rgba(21,24,32,0.9);
font-family: var(--font-comic); font-size: 15px; line-height: 1.1;
letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
}
.issue-chip small { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--ash); }
/* ─── Price burst — a rough circle seal ───────────────────────────── */
.price-seal {
display: inline-grid; place-items: center; text-align: center;
width: 132px; aspect-ratio: 1; border-radius: 50%; padding: 10px;
background: var(--rust); color: #FFF6E4; border: var(--line-w) solid var(--ink);
box-shadow: 4px 4px 0 rgba(21,24,32,0.9); transform: rotate(6deg);
font-family: var(--font-comic); line-height: 1;
}
.price-seal b { font-size: 24px; display: block; letter-spacing: 0.02em; }
.price-seal span { font-family: var(--font-mono); font-weight: 700; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-top: 4px; opacity: 0.9; }
/* ─── Speech bubble ───────────────────────────────────────────────── */
.speech {
position: relative; display: inline-block;
background: var(--panel); color: var(--ink);
border: var(--line-w) solid var(--ink); border-radius: 16px;
box-shadow: 4px 4px 0 rgba(21,24,32,0.9);
padding: 14px 20px; font-family: var(--font-comic); font-size: 19px; letter-spacing: 0.04em;
}
.speech::before, .speech::after { content: ''; position: absolute; left: 34px; }
.speech::before { bottom: -16px; border: 8px solid transparent; border-top: 16px solid var(--ink); border-left-width: 4px; border-right-width: 12px; }
.speech::after { bottom: -10.5px; left: 36.5px; border: 6px solid transparent; border-top: 13px solid var(--panel); border-left-width: 3px; border-right-width: 9px; }
/* ─── Deco chevron band (marquee edge) ────────────────────────────── */
.deco-band { height: 12px; background:
repeating-linear-gradient(45deg, var(--gold) 0 8px, var(--ink) 8px 16px);
border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
/* ─── Sticker tilts ───────────────────────────────────────────────── */
.tilt-1 { transform: rotate(-1.2deg); }
.tilt-2 { transform: rotate(0.9deg); }
.tilt-3 { transform: rotate(-0.5deg); }
/* ─── Comic panel utility (framed figure w/ halftone corner) ──────── */
.panel-frame {
position: relative; background: var(--panel);
border: var(--line-w) solid var(--ink); border-radius: 12px;
box-shadow: 6px 6px 0 rgba(21,24,32,0.9); overflow: hidden;
}
.panel-frame::after {
content: ''; position: absolute; right: 0; bottom: 0; width: 42%; height: 46%;
background-image: var(--dots-red); background-size: 14px 14px; opacity: 0.5; pointer-events: none;
mask-image: radial-gradient(ellipse at 100% 100%, black 15%, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse at 100% 100%, black 15%, transparent 72%);
}
/* ─── Figure label — academic caption in comic clothes ────────────── */
.fig-label {
display: inline-flex; align-items: baseline; gap: 8px;
font-family: var(--font-mono); font-size: 11px; color: var(--ash); letter-spacing: 0.02em;
}
.fig-label b { font-family: var(--font-comic); font-weight: 400; font-size: 13px; letter-spacing: 0.1em; color: var(--orange); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
.burst, .caption-box, .price-seal { transform: none !important; }
}
/* ─── Cover badges (home hero, right rail) ────────────────────────── */
.cover-badges {
position: absolute; right: var(--gutter); top: 22%; z-index: 4;
display: flex; flex-direction: column; align-items: flex-end; gap: 18px;
}
@media (max-width: 980px) { .cover-badges { display: none; } }
html.js .cover-badges { opacity: 0; animation: fadeOnly 1.2s var(--ease-out) 0.9s both; }
.tab-panel { position: relative; }
/* ─── Field-notes wall — masonry of framed panels with comic overlays ── */
.wall { columns: 3; column-gap: 18px; }
@media (max-width: 1020px) { .wall { columns: 2; } }
@media (max-width: 620px) { .wall { columns: 1; } }
.wall-item {
position: relative; break-inside: avoid; margin: 0 0 18px;
background: var(--panel); border: var(--line-w) solid var(--ink);
border-radius: 12px; overflow: hidden; box-shadow: 6px 6px 0 rgba(21,24,32,0.9);
transform: rotate(-0.4deg);
}
.wall-item.t2 { transform: rotate(0.4deg); }
.wall-item img, .wall-item video { display: block; width: 100%; height: auto; }
.wall-item .burst {
position: absolute; top: 10px; right: 10px;
width: 88px; font-size: 17px; padding: 16px; transform: rotate(8deg);
filter: drop-shadow(3px 3px 0 rgba(21,24,32,0.9));
}
.wall-cap {
position: absolute; left: 12px; bottom: 12px; margin: 0;
max-width: calc(100% - 24px);
background: #F2C94C; color: var(--ink);
border: 2px solid var(--ink); border-radius: 3px;
box-shadow: 3px 3px 0 rgba(21,24,32,0.9);
padding: 6px 10px; transform: rotate(-0.6deg);
font-family: var(--font-mono); font-weight: 700; font-size: 11px;
letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
}
.wall-item.t2 .wall-cap { transform: rotate(0.5deg); }
/* ─── Wild marquee cards now carry real photographs ───────────────── */
.wild-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ─── Embedded simulator (home) ───────────────────────────────────── */
.sim-embed { position: relative; }
.sim-stage {
position: relative; aspect-ratio: 16 / 9;
border: var(--line-w) solid var(--ink); border-radius: 12px; overflow: hidden;
box-shadow: 6px 6px 0 rgba(21,24,32,0.9); background: #0B0E15;
}
@media (max-width: 700px) { .sim-stage { aspect-ratio: 3 / 4; } }
.sim-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.sim-boot-veil {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
background: radial-gradient(ellipse at 50% 45%, rgba(21,24,32,0.18), rgba(21,24,32,0.6));
}
.sim-boot-note {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: #FFF6E4; background: rgba(21,24,32,0.6); padding: 6px 11px; border-radius: 6px;
}
.sim-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ─── Cover robot — the hero rig that follows your cursor ─────────── */
.hero-rig {
position: absolute; inset: 4% 0 2% 0;
z-index: 3; pointer-events: none;
opacity: 0; transition: opacity 1.4s var(--ease-out);
}
.cover-badges { z-index: 4; }
.hero-rig.on { opacity: 1; }
.hero-rig canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 979px) { .hero-rig { display: none; } }
/* ─── Interactive architecture map (Figure 1, HTML edition) ───────── */
.arch-map { position: relative; background: var(--panel); border: var(--line-w) solid var(--ink);
border-radius: 12px; box-shadow: 6px 6px 0 rgba(21,24,32,0.9); padding: clamp(18px, 3vw, 40px); }
.arch-toggle { display: inline-flex; gap: 2px; margin-bottom: 20px; border: var(--line-w) solid var(--ink);
border-radius: 10px; overflow: hidden; background: var(--bone); box-shadow: 3px 3px 0 rgba(21,24,32,0.9); }
.arch-toggle button { font-family: var(--font-comic); font-size: 14px; letter-spacing: 0.08em;
text-transform: uppercase; padding: 9px 16px 7px; border: 0; background: none; color: var(--ash);
cursor: pointer; }
.arch-toggle button.on { background: var(--ink); color: var(--gold); }
.arch-layer { border: var(--line-w) solid var(--ink); border-radius: 10px; background: var(--bone);
padding: 14px 16px 15px; transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.arch-layer:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(21,24,32,0.9); }
.arch-layer.twin { border-style: dashed; }
.arch-name { font-family: var(--font-comic); font-size: 15px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.arch-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.arch-chips a { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft);
text-decoration: none; padding: 6px 11px; border: 1.5px solid rgba(21,24,32,0.55);
border-radius: 7px; background: var(--panel); transition: background 0.15s, color 0.15s, transform 0.15s var(--ease-out); }
.arch-chips a:hover { background: var(--rust); border-color: var(--ink); color: #FFF6E4; transform: translateY(-1px); }
.arch-flow { display: flex; justify-content: center; gap: 26px; padding: 8px 0;
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.arch-flow .dn { color: var(--rust); font-weight: 700; }
.arch-flow .up { color: var(--green); font-weight: 700; }
.arch-fork { margin-top: 4px; }
.arch-fork-label { text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--ash);
padding: 10px 0 14px; }
.arch-branches { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 880px) { .arch-branches { grid-template-columns: 1fr; } }
.arch-branch { display: flex; flex-direction: column; gap: 0; border-radius: 10px;
transition: opacity 0.35s var(--ease-out), filter 0.35s var(--ease-out); }
.arch-branch-tag { font-family: var(--font-comic); font-size: 13px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--gold-deep); padding: 0 2px 8px; }
.arch-map.pick-hw .arch-branch[data-branch="sim"],
.arch-map.pick-sim .arch-branch[data-branch="hw"] { opacity: 0.62; filter: saturate(0.55); }
.arch-flow.solo { padding: 6px 0; }
/* shared hover tip */
.arch-tip { position: absolute; z-index: 30; max-width: 300px; padding: 10px 13px;
background: #F2C94C; color: var(--ink); border: 2px solid var(--ink); border-radius: 4px;
box-shadow: 4px 4px 0 rgba(21,24,32,0.9);
font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; font-weight: 500;
opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; pointer-events: none; }
.arch-tip.on { opacity: 1; transform: none; }
/* marquee: manual rail */
.marquee { overflow-x: auto; scrollbar-width: none; cursor: grab; scroll-snap-type: x proximity; }
.marquee::-webkit-scrollbar { display: none; }
.marquee.dragging { cursor: grabbing; scroll-snap-type: none; }
.marquee-track { animation: none !important; width: max-content; padding: 6px 4px 14px; }
.wild-card { scroll-snap-align: center; }
.wild-card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.marquee-hint { font-family: var(--font-comic); font-size: 14px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--gold); text-align: center; margin: 0 0 12px; }
/* ─── Paper figures & tables ──────────────────────────────────────── */
.paper-fig { background: var(--panel); border: var(--line-w) solid var(--ink); border-radius: 12px;
box-shadow: 6px 6px 0 rgba(21,24,32,0.9); padding: clamp(10px, 1.6vw, 20px); }
.paper-fig img { display: block; width: 100%; height: auto; }
.paper-fig + .fig-label, .paper-fig-cap { display: block; margin-top: 12px; }
.paper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 30px); align-items: start; }
@media (max-width: 880px) { .paper-grid { grid-template-columns: 1fr; } }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .data-table { min-width: 640px; }
/* .fit — the whole table always visible, no horizontal scroll at any width:
the cells compress instead (used by the platform survey). */
.table-scroll.fit { overflow: visible; }
.table-scroll.fit .data-table { min-width: 0; width: 100%; }
@media (max-width: 1100px) {
.table-scroll.fit .data-table th { font-size: 11px; padding: 10px 8px; }
.table-scroll.fit .data-table td { font-size: 13px; padding: 10px 8px; }
}
@media (max-width: 760px) {
.table-scroll.fit .data-table th { font-size: 9px; padding: 8px 4px; letter-spacing: 0.02em; }
.table-scroll.fit .data-table td { font-size: 11px; padding: 8px 4px; }
}
.data-table td .ok { color: var(--green); font-weight: 700; }
.data-table td .no { color: var(--ash); }
.poster-wrap { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 760px) { .poster-wrap { grid-template-columns: 1fr; } }
.kr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); margin: clamp(20px,3vh,32px) 0; }
@media (max-width: 820px) { .kr-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }
/* ─── Anatomy explorer (anatomy.html + the home section) ─────────── */
.anat-wrap { display: grid; grid-template-columns: 300px 1fr; gap: clamp(16px, 2.5vw, 32px); align-items: stretch; }
@media (max-width: 880px) { .anat-wrap { grid-template-columns: 1fr; } }
.anat-rail { display: flex; flex-direction: column; gap: 8px; }
.anat-rail button {
text-align: left; padding: 12px 14px; cursor: pointer;
background: var(--panel); border: var(--line-w) solid var(--ink); border-radius: 10px;
box-shadow: 3px 3px 0 rgba(21,24,32,0.9);
transition: transform 0.2s var(--ease-out), background 0.2s ease, box-shadow 0.2s var(--ease-out);
font: inherit; color: inherit;
}
.anat-rail button:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(21,24,32,0.9); }
.anat-rail button.on { background: var(--orange); color: #FFF9F0; }
.anat-rail button b { display: block; font-family: var(--font-comic); font-weight: 400; font-size: 17px; letter-spacing: 0.06em; }
.anat-rail button span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; opacity: 0.75; }
.anat-copy { margin-top: 14px; }
.anat-copy p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.anat-stage { min-height: 560px; height: calc(100vh - 220px); }
@media (max-width: 880px) { .anat-stage { height: 60vh; min-height: 420px; } .anat-rail { flex-direction: row; flex-wrap: wrap; } .anat-rail button { flex: 1 1 40%; } }
/* ─── Anatomy stage, unframed: the robot lives ON the page ────────── */
.anat-free { position: relative; border: 0 !important; background: transparent !important;
box-shadow: none !important; border-radius: 0 !important; overflow: visible; }
.anat-free canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.anat-free:active canvas { cursor: grabbing; }
.anat-free .viewer-loading { position: absolute; inset: 0; background: none; }
.anat-free .viewer-loading::before { display: none; }
.anat-free .ph-label { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.anat-free .viewer-hint { position: absolute; }
.anat-free.loaded .viewer-loading { opacity: 0; pointer-events: none; }
/* faint halftone ground behind the floating robot */
#anatomy, .anat-section { position: relative; }
.anat-ground { position: absolute; inset: 0; pointer-events: none;
background-image: var(--dots-ink); background-size: 26px 26px; opacity: 0.35;
mask-image: radial-gradient(ellipse at 62% 55%, black 0%, transparent 66%);
-webkit-mask-image: radial-gradient(ellipse at 62% 55%, black 0%, transparent 66%); }
/* ─── Tables, comic edition — chunky ink, Bangers headers, gold "ours" row ── */
.data-table { border: var(--line-w) solid var(--ink); border-radius: 10px; overflow: hidden;
box-shadow: 5px 5px 0 rgba(21,24,32,0.9); background: var(--panel); border-collapse: separate; border-spacing: 0; }
.data-table th { background: var(--ink); color: var(--gold);
font-family: var(--font-comic); font-weight: 400; font-size: 14px; letter-spacing: 0.1em;
padding: 12px 14px; border-bottom: none; }
.data-table td { border-bottom: 1.5px solid rgba(21,24,32,0.18); font-weight: 500; }
.data-table tbody tr:nth-child(even) td { background: rgba(244,234,210,0.55); }
.data-table tbody tr:hover td { background: rgba(217,161,63,0.14); }
.data-table tr.best td { background: #F7E3AE; border-top: 3px solid var(--ink); font-weight: 700; }
.data-table tr.best td:first-child { color: var(--rust); font-family: var(--font-comic); font-weight: 400; font-size: 16px; letter-spacing: 0.05em; }
.dark-sec .data-table { background: rgba(253,246,226,0.04); border-color: rgba(217,161,63,0.55); box-shadow: 5px 5px 0 rgba(0,0,0,0.6); }
.dark-sec .data-table td { color: var(--bone); border-bottom-color: rgba(244,234,210,0.12); }
.dark-sec .data-table tbody tr:nth-child(even) td { background: rgba(253,246,226,0.05); }
/* topic/contract tables pick up the voice too */
.tt th { font-family: var(--font-comic); font-weight: 400; font-size: 13px; letter-spacing: 0.1em; color: var(--rust); border-bottom: 2px solid var(--ink); }
.dark-sec .tt th { color: var(--gold); border-color: rgba(217,161,63,0.55); }
/* ─── Abstract spread: copy beside the as-built photograph ────────── */
.abstract-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(28px, 4vw, 64px); }
@media (max-width: 880px) { .abstract-grid { grid-template-columns: 1fr; gap: 26px; } }
/* ─── Shout type — the microduck "TEACH IT NEW TRICKS" treatment ──── */
.shout { font-family: 'Archivo', var(--font-head); font-weight: 900; text-transform: uppercase;
letter-spacing: -0.01em; line-height: 0.92; font-size: clamp(40px, 6vw, 92px); }
.shout .solid { display: block; color: var(--ink);
text-shadow: 4px 4px 0 var(--orange); }
.dark-sec .shout .solid { color: var(--bone); text-shadow: 4px 4px 0 var(--orange); }
.shout .hollow { display: block; color: transparent;
-webkit-text-stroke: 2.5px var(--ink); paint-order: stroke; }
.dark-sec .shout .hollow { -webkit-text-stroke: 2.5px var(--bone); }
@supports not (-webkit-text-stroke: 2px black) {
.shout .hollow { color: var(--ink); }
.dark-sec .shout .hollow { color: var(--bone); }
}
/* ─── Step cards — tilted panels with per-card colored offset shadows ── */
.contrib-grid { counter-reset: pillar; }
.contrib-cell { counter-increment: pillar; position: relative; }
.contrib-cell::before { content: "0" counter(pillar);
display: block; font-family: var(--font-comic); font-size: 30px; letter-spacing: 0.06em;
margin-bottom: 10px; }
.contrib-cell:nth-child(1) { transform: rotate(-0.8deg); box-shadow: 7px 7px 0 var(--orange); }
.contrib-cell:nth-child(2) { transform: rotate(0.6deg); box-shadow: 7px 7px 0 var(--yellow); }
.contrib-cell:nth-child(3) { transform: rotate(0.5deg); box-shadow: 7px 7px 0 var(--blue); }
.contrib-cell:nth-child(4) { transform: rotate(-0.6deg); box-shadow: 7px 7px 0 var(--rust); }
.contrib-cell:nth-child(1)::before { color: var(--orange); }
.contrib-cell:nth-child(2)::before { color: var(--gold-deep); }
.contrib-cell:nth-child(3)::before { color: var(--blue); }
.contrib-cell:nth-child(4)::before { color: var(--rust); }
.contrib-cell:hover { transform: rotate(0deg) translate(-2px, -2px); }
/* ─── NYC die-cut stickers + nav head ─────────────────────────────── */
.sticker { position: absolute; z-index: 3; pointer-events: none;
filter: drop-shadow(3px 4px 0 rgba(21,24,32,0.35)); }
@media (max-width: 880px) { .sticker { width: 68px !important; } .sticker[style*="position:static"] { width: 56px !important; } }
.nav-head { height: 26px; width: auto; display: inline-block; }
/* price seal: text properly centred in the circle */
.price-seal { place-content: center; gap: 3px; padding: 0 !important; }
.price-seal b { font-size: 26px; }
.price-seal span { margin-top: 0 !important; }
/* ─── Retro-game ROS graph — paper edition (matches the arch map) ── */
.ros-game { background: var(--panel); border: var(--line-w) solid var(--ink); border-radius: 12px;
box-shadow: 6px 6px 0 rgba(21,24,32,0.9); padding: clamp(14px, 2.4vw, 28px);
position: relative; overflow: hidden; }
.ros-game::after { content: ''; position: absolute; right: 0; bottom: 0; width: 40%; height: 45%;
background-image: var(--dots-red); background-size: 14px 14px; opacity: 0.4; pointer-events: none;
mask-image: radial-gradient(ellipse at 100% 100%, black 15%, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse at 100% 100%, black 15%, transparent 72%); }
.ros-game > * { position: relative; z-index: 1; }
.rg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
flex-wrap: wrap; margin-bottom: 14px; }
.rg-title { font-family: var(--font-comic); font-size: 16px; letter-spacing: 0.12em; color: var(--orange); }
.rg-coin { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ash); }
.rg-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 10px 0; }
.rg-tile { min-width: 118px; text-align: center; padding: 9px 10px 8px;
background: var(--bone); border: 2px solid var(--ink); border-radius: 7px;
box-shadow: 3px 3px 0 rgba(21,24,32,0.85);
transition: transform 0.12s ease, box-shadow 0.12s var(--ease-out); }
.rg-tile b { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 12.5px;
color: var(--ink); letter-spacing: 0.02em; }
.rg-tile span { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-soft); opacity: 0.75; letter-spacing: 0.04em; }
.rg-tile:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(21,24,32,0.85); }
.rg-tile.blue { background: #A8CBE4; }
.rg-tile.orange { background: #F8C89E; }
.rg-tile.green { background: #9AD8B2; }
.rg-tile.yellow { background: var(--yellow); }
.rg-bus { margin: 8px 0; padding: 9px 14px 8px; border-radius: 7px;
font-family: var(--font-comic); font-size: 14px; letter-spacing: 0.1em; color: var(--ink);
border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(21,24,32,0.85); }
.rg-bus code { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0; margin-left: 8px; }
.rg-bus.blue { background: #A8CBE4; }
.rg-bus.green { background: #9AD8B2; }
.rg-blink { display: inline-block; animation: rgBlink 1.1s steps(2) infinite; margin-right: 6px; color: var(--rust); }
@keyframes rgBlink { 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .rg-blink { animation: none; } }
/* ─── Nav CTA — the inviting right-side button ────────────────────── */
.nav-cta { font-family: var(--font-comic); font-size: 14px; letter-spacing: 0.06em;
text-transform: uppercase; color: #FFF9F0 !important; background: var(--orange);
border: 2px solid var(--ink); border-radius: 9px; padding: 6px 13px 5px !important;
box-shadow: 3px 3px 0 rgba(21,24,32,0.9); opacity: 1 !important; white-space: nowrap;
transition: transform 0.15s var(--ease-out), background 0.15s ease, box-shadow 0.15s var(--ease-out); }
.nav-cta:hover { background: var(--rust) !important; transform: translate(-1px,-1px);
box-shadow: 4px 4px 0 rgba(21,24,32,0.9); }
/* mobile: contract tables scroll inside themselves, never widen the page */
@media (max-width: 700px) {
.tt { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sub-block { grid-template-columns: 1fr; }
}
/* grids never inherit a child table's min-width */
.bom-grid > div, .paper-grid > div, .abstract-grid > div, .anat-wrap > * { min-width: 0; }
@media (max-width: 700px) { .table-scroll .data-table { min-width: 560px; } }
@media (max-width: 700px) {
.appgal.vp figure { width: 86vw; }
.appgal.ios figure { width: 62vw; }
.feature > * { min-width: 0; max-width: 100%; }
}
/* ─── Tabs are context-aware: readable on paper by default, cream on night ── */
.tab-bar { border-bottom-color: rgba(21,24,32,0.35); }
.tab-btn { color: var(--ash); }
.tab-btn.on { color: var(--orange); border-bottom-color: var(--orange); }
.dark-sec .tab-bar, .page-hero .tab-bar { border-bottom-color: rgba(217,161,63,0.5); }
.dark-sec .tab-btn, .page-hero .tab-btn { color: rgba(244,234,210,0.5); }
.dark-sec .tab-btn.on, .page-hero .tab-btn.on { color: var(--gold); border-bottom-color: var(--gold); }
/* ─── Scroll cue, comic edition ───────────────────────────────────── */
.scroll-cue { gap: 10px; }
.scroll-cue > span:first-child {
font-family: var(--font-comic); font-size: 14px; letter-spacing: 0.12em;
color: var(--ink); background: var(--yellow);
border: 2px solid var(--ink); border-radius: 3px; padding: 6px 11px 5px;
box-shadow: 3px 3px 0 rgba(21,24,32,0.9); transform: rotate(-3deg);
}
.scroll-cue .cue-line { display: none; }
.scroll-cue::after { content: '▼'; font-size: 19px; color: var(--ink);
animation: cueBounce 1.4s var(--ease-in-out) infinite; }
.page-hero .scroll-cue::after { color: var(--gold); }
@keyframes cueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; } }
/* ─── Mobile: the cover robot lives in the hero's empty top half ──── */
@media (max-width: 979px) {
.hero-rig { display: block; inset: 84px 0 auto 0; height: 44vh; min-height: 300px; }
}
/* ─── Mobile anatomy: chips left · living model right ─────────────── */
@media (max-width: 880px) {
.anat-wrap { display: grid !important; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: start; }
.anat-wrap > aside { display: contents; }
/* explicit placement — auto-flow was dropping the stage into the
118px column on its own row (tiny robot, chips above) */
.anat-rail { grid-column: 1; grid-row: 1; }
.anat-wrap .anat-stage { grid-column: 2; grid-row: 1; }
.anat-copy { grid-column: 1 / -1; grid-row: 2; }
.anat-rail { flex-direction: column !important; gap: 6px; }
.anat-rail button { flex: none !important; padding: 8px 9px 7px; border-radius: 8px;
box-shadow: 2px 2px 0 rgba(21,24,32,0.9); }
.anat-rail button b { font-size: 12.5px; letter-spacing: 0.04em; }
.anat-rail button span { font-size: 8.5px; display: block; }
.anat-stage { height: 64vh !important; min-height: 380px !important; }
.anat-copy { grid-column: 1 / -1; margin-top: 2px; }
.anat-copy p { font-size: 13px; }
}
/* ─── Mobile compaction: buttons, tabs, cards, rhythm ─────────────── */
@media (max-width: 700px) {
.pad-y { padding: clamp(52px, 8vh, 80px) 0; }
.btn { font-size: 13.5px; padding: 9px 16px 8px; gap: 6px; box-shadow: 3px 3px 0 rgba(21,24,32,0.9); }
.hero-actions { gap: 8px; }
.tab-btn { font-size: 13px; padding: 9px 12px 7px; }
.contrib-cell { padding: 20px 18px; }
.contrib-cell::before { font-size: 22px; margin-bottom: 6px; }
.contrib-grid { gap: 12px; }
.sec-head { margin-bottom: clamp(34px, 5vh, 52px); }
.rg-tile { min-width: 88px; padding: 7px 7px 6px; }
.rg-tile b { font-size: 11px; }
.rg-bus { font-size: 12px; }
.rg-bus code { font-size: 9px; }
.kr-grid { gap: 18px 12px; }
.caption-box { font-size: 11px; padding: 7px 11px; }
.stat-num { font-size: clamp(38px, 11vw, 56px); }
.spec span { font-size: 10px; padding: 5px 9px; }
}
/* ─── Mobile: Figure 1 fits a phone screen ────────────────────────── */
@media (max-width: 700px) {
.arch-map { padding: 12px; }
.arch-toggle button { font-size: 12px; padding: 7px 11px 5px; }
.arch-layer { padding: 9px 10px; border-radius: 8px; }
.arch-name { font-size: 12px; margin-bottom: 6px; letter-spacing: 0.06em; }
.arch-chips { gap: 4px; }
.arch-chips a { font-size: 9.5px; padding: 3px 7px; border-width: 1px; border-radius: 5px; }
.arch-flow { font-size: 8.5px; padding: 4px 0; gap: 14px; }
.arch-fork-label { font-size: 9px; padding: 6px 0 8px; }
.arch-branch-tag { font-size: 11px; padding-bottom: 4px; }
.arch-branches { gap: 10px; }
/* pillars: 2×2, compact */
.contrib-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
.contrib-cell { padding: 13px 12px; }
.contrib-cell::before { font-size: 18px; margin-bottom: 4px; }
.contrib-cell h3 { font-size: 14.5px; margin-bottom: 6px; }
.contrib-cell p { font-size: 11.5px; line-height: 1.5; }
.contrib-cell:hover { transform: none; }
}
/* mobile: title stickers pin to the header corner — no wasted line */
/* title stickers pin to the section header's top-right at EVERY size —
inline placement was pushing them onto their own line */
.sec-head, .sec-head-center { position: relative; }
.sec-head .sticker, .sec-head-center .sticker {
position: absolute !important; top: -18px; right: 0;
width: 84px !important; margin: 0 !important;
}
.sec-head .sticker + .sticker, .sec-head-center .sticker + .sticker { right: 88px; }
@media (max-width: 700px) {
.sec-head .sticker, .sec-head-center .sticker { top: -34px; width: 58px !important; }
.sec-head .sticker + .sticker, .sec-head-center .sticker + .sticker { right: 62px; }
}
/* ─── Comic-page devices (Batman/Spidey/TMNT references) ──────────── */
/* pink narration box — the Batman night-caption voice */
.caption-box.pink { background: #F2C4D0; }
/* narration tucked INTO a panel's top corner */
.panel-note { position: absolute; top: 10px; left: 10px; z-index: 3; max-width: 72%;
background: #F2C4D0; color: var(--ink); border: 2px solid var(--ink); border-radius: 2px;
box-shadow: 2px 3px 0 rgba(21,24,32,0.85); padding: 5px 9px 4px; transform: rotate(-1deg);
font-family: var(--font-mono); font-weight: 700; font-size: 10px;
letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.45; }
.panel-note.yellow { background: var(--yellow); transform: rotate(0.8deg); }
/* speech bubble pinned onto a panel — classic oval balloon */
.panel-speech { position: absolute; z-index: 3; max-width: 64%;
background: #FFF9F0; color: var(--ink); border: 3px solid var(--ink);
border-radius: 50%; padding: 13px 22px; text-align: center;
font-family: var(--font-comic); font-size: 15px;
letter-spacing: 0.05em; line-height: 1.15;
filter: drop-shadow(2px 3px 0 rgba(21,24,32,0.45)); }
/* tail: bottom-left by default */
.panel-speech::before { content: ''; position: absolute; bottom: -15px; left: 22%;
border: 8px solid transparent; border-top: 16px solid var(--ink);
border-left-width: 2px; border-right-width: 12px; transform: rotate(8deg); }
.panel-speech::after { content: ''; position: absolute; bottom: -9px; left: calc(22% + 3px);
border: 6px solid transparent; border-top: 12px solid #FFF9F0;
border-left-width: 1px; border-right-width: 9px; transform: rotate(8deg); }
.panel-speech.tail-br::before { left: auto; right: 22%; transform: rotate(-8deg) scaleX(-1); }
.panel-speech.tail-br::after { left: auto; right: calc(22% + 3px); transform: rotate(-8deg) scaleX(-1); }
/* thought bubble variant */
.panel-speech.thought { border-radius: 50%; }
.panel-speech.thought::before, .panel-speech.thought::after { display: none; }
.panel-speech.thought .tb { position: absolute; background: #FFF9F0; border: 2.5px solid var(--ink); border-radius: 50%; }
/* TMNT-style centre title burst */
.adv-burst { position: relative; z-index: 5; width: min(340px, 74vw); margin: -26px auto -30px;
text-align: center; transform: rotate(-2deg); pointer-events: none;
filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.55)); }
.adv-burst .ab-in { background: var(--ink); border: 3px solid #FFF9F0;
clip-path: polygon(2% 18%, 10% 12%, 8% 2%, 20% 8%, 30% 0%, 36% 9%, 50% 2%, 60% 10%, 72% 1%, 76% 11%, 90% 5%, 90% 15%, 100% 20%, 94% 34%, 100% 48%, 93% 60%, 99% 76%, 88% 80%, 92% 94%, 76% 90%, 68% 100%, 58% 91%, 44% 99%, 38% 89%, 24% 97%, 22% 86%, 8% 91%, 12% 76%, 0% 68%, 7% 52%, 1% 36%, 8% 28%);
padding: 26px 30px 30px; }
.adv-burst .ab-mabel { font-family: var(--font-comic); font-size: 34px; color: #7ED957;
letter-spacing: 0.06em; line-height: 0.9; display: block;
text-shadow: 2px 2px 0 rgba(0,0,0,0.8); }
.adv-burst .ab-sub { font-family: var(--font-comic); font-size: 15px; color: #FFF9F0;
letter-spacing: 0.12em; display: block; margin-top: 4px; }
/* panel-in-panel inset — the Spidey close-up */
.panel-inset { position: absolute; right: 12px; bottom: 12px; z-index: 3;
width: 34%; border: 4px solid var(--yellow); outline: 2.5px solid var(--ink);
box-shadow: 3px 4px 0 rgba(21,24,32,0.8); transform: rotate(1.5deg); display: block; }
@media (max-width: 700px) {
.panel-speech { font-size: 11px; padding: 6px 9px 5px; }
.adv-burst .ab-mabel { font-size: 26px; } .adv-burst .ab-sub { font-size: 12px; }
}
/* ─── Exaggerated comic lettering (Crime Alley / K-RAWSH refs) ────── */
/* jumpy baseline: letters wobble off the line */
.jumpy span { display: inline-block; }
.jumpy span:nth-child(4n+1) { transform: rotate(-3deg) translateY(1px); }
.jumpy span:nth-child(4n+2) { transform: rotate(2deg) translateY(-2px); }
.jumpy span:nth-child(4n+3) { transform: rotate(-1.5deg) translateY(2px); }
.jumpy span:nth-child(4n) { transform: rotate(3deg) translateY(-1px); }
.hero-sub .rl:nth-child(3n+1) { transform: rotate(-2.5deg) translateY(1px); }
.hero-sub .rl:nth-child(3n+2) { transform: rotate(2deg) translateY(-1.5px); }
/* K-RAWSH! floating sound-effect lettering — no box, just outlined type */
.sfx {
position: absolute; z-index: 6; pointer-events: none;
font-family: var(--font-comic); font-size: clamp(34px, 4.5vw, 64px);
letter-spacing: 0.04em; color: var(--yellow);
-webkit-text-stroke: 2.5px var(--ink); paint-order: stroke;
text-shadow: 3px 4px 0 rgba(21,24,32,0.55);
transform: rotate(-8deg);
}
.sfx.red { color: var(--rust); } .sfx.orange { color: var(--orange); } .sfx.green { color: #7ED957; }
.sfx.pop { animation: sfxPop 1.4s var(--spring) both; }
@keyframes sfxPop {
0% { opacity: 0; transform: rotate(-8deg) scale(0.3); }
18% { opacity: 1; transform: rotate(-8deg) scale(1.15); }
30% { transform: rotate(-8deg) scale(1); }
75% { opacity: 1; }
100% { opacity: 0; transform: rotate(-8deg) scale(1.05) translateY(-14px); }
}
/* ambient scene lettering — the "Caw Caw" voice */
.ambient {
position: absolute; z-index: 2; pointer-events: none;
font-family: var(--font-comic); font-size: clamp(16px, 1.8vw, 24px);
letter-spacing: 0.08em; color: var(--gold); opacity: 0.85;
text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
}
@media (prefers-reduced-motion: reduce) { .sfx.pop { animation: none; opacity: 0; } }
/* mobile: wall media never taller than 4:3 — portrait clips crop to fit */
@media (max-width: 700px) {
.wall-item img, .wall-item video { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
}
/* ─── The build comic strip — read it like a page ─────────────────── */
.comic-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
background: var(--panel); border: var(--line-w) solid var(--ink); border-radius: 12px;
box-shadow: 6px 6px 0 rgba(21,24,32,0.9); padding: clamp(12px, 1.8vw, 20px);
margin: 8px 0 clamp(24px, 4vh, 40px); }
@media (max-width: 880px) { .comic-strip { grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; } }
.strip-panel { position: relative; display: block; text-decoration: none; color: inherit;
border: 2.5px solid var(--ink); border-radius: 6px; overflow: hidden;
transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.strip-panel:hover { transform: translate(-2px,-2px) rotate(-0.5deg); box-shadow: 5px 5px 0 rgba(21,24,32,0.9); z-index: 2; }
.strip-panel .panel-note { max-width: 88%; }
.strip-cap { display: block; background: var(--ink); color: var(--bone);
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
line-height: 1.45; padding: 8px 10px; }
/* ─── Mobile: WBC controls dock ON the visualizer; tight tables ───── */
@media (max-width: 700px) {
.table-scroll.tight { overflow: visible; }
.table-scroll.tight .data-table { min-width: 0; width: 100%; }
.table-scroll.tight .data-table td { font-size: 12px; padding: 9px 10px; }
.table-scroll.tight .data-table td:last-child { text-align: right; }
}
@media (max-width: 760px) {
.wbc-block { display: block !important; position: relative; }
.wbc-stage { height: 74vh !important; min-height: 480px !important; }
.wbc-ctl {
position: absolute !important; left: 8px; right: 8px; bottom: 8px; top: auto !important;
width: auto !important; max-width: none; padding: 10px 12px !important; gap: 8px !important;
background: rgba(253,246,226,0.94);
}
.wbc-note { display: none; }
.wbc-seg button { padding: 8px 4px !important; font-size: 10px !important; }
.wbc-row-top .lab { font-size: 11.5px !important; }
.wbc-slider { height: 4px !important; }
.wbc-slider::-webkit-slider-thumb { width: 20px !important; height: 20px !important; }
.wbc-slider::-moz-range-thumb { width: 20px !important; height: 20px !important; }
}
/* mobile: contract tables stack into cards — everything visible, no scroll */
@media (max-width: 700px) {
.tt, .tt tbody, .tt tr, .tt td { display: block; width: 100%; }
.tt thead { display: none; }
.tt tr { border: 2px solid var(--ink); border-radius: 8px; background: var(--panel);
margin-bottom: 8px; padding: 8px 10px; box-shadow: 2px 2px 0 rgba(21,24,32,0.8); }
.tt td { border: 0 !important; padding: 2px 0 !important; white-space: normal !important; font-size: 12px; }
.tt td:first-child { font-family: var(--font-mono); font-weight: 700; color: var(--orange) !important; font-size: 12.5px; }
/* the policy-graph explorer needs a big screen */
.av-stage { height: 380px !important; }
}
/* ─── Equation cards — terminal plate, monospace math ─────────────── */
.eq-card { background: #12151C; border: var(--line-w) solid var(--ink); border-radius: 10px;
box-shadow: 5px 5px 0 rgba(21,24,32,0.9); padding: 0; margin-top: clamp(20px, 3vh, 32px);
overflow: hidden; max-width: 860px; }
.eq-card .eq-k { display: flex; align-items: center; gap: 8px;
background: var(--ink); color: var(--gold);
font-family: var(--font-comic); font-size: 14px; letter-spacing: 0.14em;
padding: 8px 14px 6px; border-bottom: 2px solid rgba(217,161,63,0.45); }
.eq-card .eq-k::before { content: '▸'; color: var(--orange); }
.eq-card .eq { display: block; font-family: var(--font-mono); font-weight: 400;
font-size: clamp(12.5px, 1.15vw, 15px); color: #E9E2D0; letter-spacing: 0;
line-height: 1.85; white-space: pre; overflow-x: auto; padding: 16px 18px 6px; }
.eq-card .eq b { color: var(--orange); font-weight: 700; }
.eq-card .eq i { color: #8FC7A8; font-style: normal; } /* constraint comments */
.eq-card .eq-gloss { display: block; font-family: var(--font-mono); font-size: 11.5px;
color: var(--ash-light); padding: 0 18px 15px; letter-spacing: 0.02em; line-height: 1.65; }
.eq-card .eq-gloss b { color: var(--gold); font-weight: 700; }
.dark-sec .eq-card { background: #0E1119; border-color: rgba(217,161,63,0.6);
box-shadow: 5px 5px 0 rgba(0,0,0,0.6); }
/* ─── Mobile companion: past the hero, the robot docks in the corner ── */
@media (max-width: 979px) {
.hero-rig.mini {
position: fixed !important; inset: auto 8px 74px auto !important;
width: 128px !important; height: 168px !important; min-height: 0 !important;
z-index: 90; filter: drop-shadow(3px 4px 0 rgba(21,24,32,0.35));
}
}
/* jumpy letters must not break mid-word */
.jumpy { display: inline-block; white-space: nowrap; }
/* headers: tighter, and never reserve a row for the stickers */
.sec-head { margin-bottom: clamp(22px, 3vh, 38px); }
.sec-head-center { position: relative; }
.sec-head .title, .sec-head-center h2 { margin-bottom: 0; }
.sec-head .sticker, .sec-head-center .sticker { top: 0; }
@media (min-width: 701px) {
.sec-head .sticker, .sec-head-center .sticker { width: 76px !important; }
.sec-head .sticker + .sticker, .sec-head-center .sticker + .sticker { right: 80px; }
}
/* balloons stay small enough to clear faces at any width */
.panel-speech { font-size: clamp(11px, 1.05vw, 15px); padding: clamp(7px,0.8vw,13px) clamp(12px,1.4vw,22px); }
/* ═══ Every 3-D stage floats on the page (the anatomy treatment) ═══ */
.viewer-3d, .wbc-stage, .explode-stage, .swerve-stage, .drift-stage {
border: 0 !important; background: transparent !important;
box-shadow: none !important; border-radius: 0 !important;
}
.viewer-3d .ph, .wbc-stage .ph { background: none !important; }
.viewer-3d .ph::before, .wbc-stage .ph::before { display: none !important; }
.viewer-3d .ph-label, .wbc-stage .ph-label {
left: 50%; top: 50%; bottom: auto; transform: translate(-50%,-50%);
background: var(--panel); border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(21,24,32,0.85);
}
/* the hint chip, comic edition */
.viewer-hint {
font-family: var(--font-comic) !important; font-size: 13px !important; letter-spacing: 0.08em;
color: var(--ink) !important; background: var(--yellow) !important;
border: 2px solid var(--ink) !important; border-radius: 6px !important;
box-shadow: 3px 3px 0 rgba(21,24,32,0.85) !important; padding: 6px 11px 5px !important;
text-transform: uppercase;
}
.dark-sec .viewer-hint { background: var(--gold) !important; }
.viewer-fs {
background: var(--panel) !important; border: 2px solid var(--ink) !important;
border-radius: 8px !important; box-shadow: 3px 3px 0 rgba(21,24,32,0.85) !important;
color: var(--ink) !important;
}
.viewer-fs:hover { background: var(--yellow) !important; transform: translate(-1px,-1px); }
/* ═══ Control panels: comic panels, not frosted glass ═══ */
.jp, .wbc-ctl {
background: var(--panel) !important; border: var(--line-w) solid var(--ink) !important;
border-radius: 12px !important; box-shadow: 5px 5px 0 rgba(21,24,32,0.9) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.jp-head { border-bottom: 2px solid var(--ink); }
.jp-title, .wbc-ctl-title {
font-family: var(--font-comic) !important; font-size: 15px !important;
letter-spacing: 0.12em; color: var(--orange) !important;
}
.jp-reset, .wbc-reset {
font-family: var(--font-comic) !important; font-size: 13px !important; letter-spacing: 0.08em;
background: var(--orange) !important; color: #FFF9F0 !important;
border: 2px solid var(--ink) !important; border-radius: 7px !important;
box-shadow: 2px 2px 0 rgba(21,24,32,0.85) !important; padding: 5px 12px 4px !important;
}
.jp-reset:hover, .wbc-reset:hover { background: var(--rust) !important; transform: translate(-1px,-1px); }
/* segmented tabs → comic chips */
.jp-tab, .wbc-seg button {
font-family: var(--font-comic) !important; font-size: 13px !important; letter-spacing: 0.06em;
color: var(--ink) !important; background: var(--bone) !important;
border: 2px solid var(--ink) !important; border-radius: 7px !important;
box-shadow: 2px 2px 0 rgba(21,24,32,0.85);
transition: transform 0.12s var(--ease-out), background 0.15s ease;
}
.jp-tab:hover, .wbc-seg button:hover { transform: translate(-1px,-1px); }
.jp-tab.on, .wbc-seg button.on { background: var(--ink) !important; color: var(--gold) !important; }
.jp-name, .wbc-row-top .lab { font-family: var(--font-sans); font-weight: 600; color: var(--ink-soft) !important; }
.jp-val, .wbc-row-top .out {
font-family: var(--font-mono) !important; font-weight: 700; color: var(--orange) !important;
}
/* sliders: thick ink track, chunky knob */
.jp-slider, .wbc-slider {
height: 8px !important; border-radius: 5px !important;
background: var(--bone) !important; border: 2px solid var(--ink);
}
.jp-slider::-webkit-slider-thumb, .wbc-slider::-webkit-slider-thumb {
width: 22px !important; height: 22px !important; border-radius: 6px !important;
background: var(--orange) !important; border: 2.5px solid var(--ink) !important;
box-shadow: 2px 2px 0 rgba(21,24,32,0.85) !important;
}
.jp-slider::-moz-range-thumb, .wbc-slider::-moz-range-thumb {
width: 22px !important; height: 22px !important; border-radius: 6px !important;
background: var(--orange) !important; border: 2.5px solid var(--ink) !important;
}
.jp-row { border-bottom-color: rgba(21,24,32,0.14) !important; }
/* the drive pad */
.wbc-pad { border: 2px solid var(--ink) !important; border-radius: 10px !important;
background: var(--bone) !important; box-shadow: inset 0 0 0 2px var(--panel); }
.wbc-knob { border-radius: 7px !important; background: var(--orange) !important;
border: 2.5px solid var(--ink) !important; box-shadow: 2px 2px 0 rgba(21,24,32,0.7) !important; }
/* stickers inside a bare section heading (no .sec-head wrapper) pin to the
section's top-right instead of landing on the copy */
section { position: relative; }
section > .wrap > h2 > .sticker, section > .wrap > h2 + .sticker {
position: absolute !important; top: 12px; right: var(--gutter);
width: 76px !important; margin: 0 !important; vertical-align: baseline !important;
}
@media (max-width: 700px) {
section > .wrap > h2 > .sticker { width: 54px !important; top: 6px; }
}
/* ─── "What you need" prep cards, comic edition ───────────────────── */
.asm-prep { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: prep; }
@media (max-width: 900px) { .asm-prep { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .asm-prep { grid-template-columns: 1fr; } }
.asm-prep > div {
counter-increment: prep; position: relative;
background: var(--panel); border: var(--line-w) solid var(--ink);
border-radius: 12px; padding: 18px 16px 16px;
transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.asm-prep > div::before {
content: "0" counter(prep); display: block;
font-family: var(--font-comic); font-size: 26px; line-height: 1; margin-bottom: 6px;
}
.asm-prep > div:nth-child(1) { transform: rotate(-0.7deg); box-shadow: 6px 6px 0 var(--orange); }
.asm-prep > div:nth-child(2) { transform: rotate(0.5deg); box-shadow: 6px 6px 0 var(--yellow); }
.asm-prep > div:nth-child(3) { transform: rotate(-0.4deg); box-shadow: 6px 6px 0 var(--blue); }
.asm-prep > div:nth-child(4) { transform: rotate(0.6deg); box-shadow: 6px 6px 0 var(--rust); }
.asm-prep > div:nth-child(1)::before { color: var(--orange); }
.asm-prep > div:nth-child(2)::before { color: var(--gold-deep); }
.asm-prep > div:nth-child(3)::before { color: var(--blue); }
.asm-prep > div:nth-child(4)::before { color: var(--rust); }
.asm-prep > div:hover { transform: rotate(0deg) translate(-2px,-2px); }
.asm-prep h6 {
font-family: var(--font-comic); font-weight: 400; font-size: 17px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
}
.asm-prep p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
/* ─── Figures: one consistent, compact size across the site ───────── */
.paper-fig { max-width: 780px; margin-inline: auto; }
.paper-fig svg, .paper-fig img { max-height: 420px; width: 100%; height: auto; object-fit: contain; }
.paper-grid .paper-fig { max-width: none; }
.bg-fig img { max-height: 340px; width: 100%; object-fit: contain; }
/* ═══ Card variations — the comic page never repeats one panel shape ═══
Four looks cycle through every card grid: (1) narration bar across the
top like a caption box, (2) art-deco stepped corner, (3) halftone
sunburst ground, (4) a night panel. All keep the ink line + hard
shadow, so the page reads as one book with varied panels. */
/* 1 · NARRATION BAR — the yellow "MEANWHILE…" strip */
.card-grid > *:nth-child(4n+1), .res-grid > *:nth-child(4n+1) { position: relative; overflow: hidden; }
.card-grid > *:nth-child(4n+1)::before, .res-grid > *:nth-child(4n+1)::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 8px;
background: var(--yellow); border-bottom: 2px solid var(--ink);
}
.card-grid > *:nth-child(4n+1), .res-grid > *:nth-child(4n+1) { padding-top: 26px; }
/* 2 · DECO CORNER ORNAMENT — stepped brass bars in the top-right */
.card-grid > *:nth-child(4n+2), .res-grid > *:nth-child(4n+2) { position: relative; }
.card-grid > *:nth-child(4n+2)::after, .res-grid > *:nth-child(4n+2)::after {
content: ''; position: absolute; top: 12px; right: 12px;
width: 30px; height: 16px; pointer-events: none;
background:
linear-gradient(var(--orange), var(--orange)) 100% 0 / 30px 3px no-repeat,
linear-gradient(var(--orange), var(--orange)) 100% 6px / 21px 3px no-repeat,
linear-gradient(var(--orange), var(--orange)) 100% 12px/ 12px 3px no-repeat;
}
/* 3 · SUNBURST GROUND — radiating deco rays behind the copy */
.card-grid > *:nth-child(4n+3), .res-grid > *:nth-child(4n+3) { position: relative; overflow: hidden; }
.card-grid > *:nth-child(4n+3)::after, .res-grid > *:nth-child(4n+3)::after {
content: ''; position: absolute; inset: -40% -10% auto -10%; height: 150%;
background: repeating-conic-gradient(from 200deg at 88% 6%,
rgba(240,118,46,0.16) 0deg 4deg, transparent 4deg 11deg);
pointer-events: none; z-index: 0;
}
.card-grid > *:nth-child(4n+3) > *, .res-grid > *:nth-child(4n+3) > * { position: relative; z-index: 1; }
/* 4 · NIGHT PANEL — the Gotham inversion, brass rules */
.card-grid > *:nth-child(4n), .res-grid > *:nth-child(4n) {
background: var(--ink) !important; border-color: var(--ink);
box-shadow: 6px 6px 0 var(--gold);
}
.card-grid > *:nth-child(4n) h3, .card-grid > *:nth-child(4n) h4,
.res-grid > *:nth-child(4n) h3, .res-grid > *:nth-child(4n) h4 { color: var(--bone); }
.card-grid > *:nth-child(4n) p, .res-grid > *:nth-child(4n) p { color: var(--ash-light); }
.card-grid > *:nth-child(4n) .card-num, .res-grid > *:nth-child(4n) .res-tag { color: var(--gold); }
.card-grid > *:nth-child(4n) .res-arrow, .res-grid > *:nth-child(4n) .res-arrow { color: var(--yellow); }
.card-grid > *:nth-child(4n):hover, .res-grid > *:nth-child(4n):hover { box-shadow: 8px 8px 0 var(--gold); }
/* dark sections invert the inversion so the night card still stands out */
.dark-sec .card-grid > *:nth-child(4n) {
background: var(--panel) !important; box-shadow: 6px 6px 0 var(--orange);
}
.dark-sec .card-grid > *:nth-child(4n) h4 { color: var(--ink); }
.dark-sec .card-grid > *:nth-child(4n) p { color: var(--ink-soft); }
.dark-sec .card-grid > *:nth-child(4n) .card-num { color: var(--rust); }
/* drop cap for the first paragraph of a lede block — old-comic opener */
.sec-head .lede::first-letter { font-family: var(--font-display); font-size: 2.2em;
line-height: 0.8; float: left; margin: 4px 8px 0 0; color: var(--orange); }
.dark-sec .sec-head .lede::first-letter { color: var(--gold); }
/* ═══ BOM — the donut and the table sit on ONE line ═══
These rules used to live in hardware.html's inline