/* =====================================================================
   Jahaan Bhavsar · scratchbook
   Warm paper, graphite, a blue ink and a red pencil. Visuals first,
   very little text. Tokens first; motion tokens mirror js/motion.js.
   ===================================================================== */

@font-face { font-family: 'Bricolage Grotesque'; src: url('assets/fonts/bricolage-latin-var.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('assets/fonts/newsreader-latin-var.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Newsreader Display'; src: url('assets/fonts/newsreader-display-var.woff2') format('woff2'); font-weight: 380 520; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader Display'; src: url('assets/fonts/newsreader-display-italic-var.woff2') format('woff2'); font-weight: 380 520; font-style: italic; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('assets/fonts/caveat-latin-var.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  /* Monotone, dark by default. [data-theme='light'] below swaps the same names.
     Older names (paper, red, blue…) are kept as aliases so every rule follows the theme. */
  color-scheme: dark;
  --bg: #0D0D0E;
  --bg-2: #141416;
  --surface: #17171A;      /* sheets, scraps, prints */
  --surface-2: #1E1E22;
  --rule: #2B2B30;
  --ink: #ECECEC;          /* text, outlines */
  --ink-2: #9B9BA1;        /* secondary text */
  --ink-3: #66666C;
  --strong: #FFFFFF;       /* the one emphasis tone (replaces blue and red) */
  --pencil: #B9B9BE;       /* handwritten notes, section numbers */
  --wash: rgba(255, 255, 255, 0.06);
  --shadow-rgb: 0, 0, 0;
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 12px 28px -14px rgba(0, 0, 0, 0.9);
  --shadow-sheet: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.95);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 10px rgba(0, 0, 0, 0.5), 0 36px 64px -26px rgba(0, 0, 0, 1);
  --nav-bg: rgba(13, 13, 14, 0.82);
  --img-filter: grayscale(1) contrast(1.02);
  --diagram-filter: grayscale(1) invert(0.9) contrast(0.95);   /* white-paper diagrams turned to ink on dark */
  --grain-alpha: 0.05;

  --paper: var(--bg);
  --paper-2: var(--bg-2);
  --paper-3: var(--surface);
  --paper-4: var(--surface-2);
  --graphite: var(--ink-2);
  --blue: var(--strong);
  --blue-wash: var(--wash);
  --red: var(--pencil);
  --tape: rgba(255, 255, 255, 0.1);
  --plate: #060607;
  --plate-2: #101012;
  --plate-rule: #26262A;
  --plate-ink: #E8E8E8;
  --plate-ink-2: #9C9CA1;
  --plate-blue: #FFFFFF;

  --f-head: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-display: 'Newsreader Display', 'Newsreader', Georgia, serif;
  --f-hand: 'Caveat', 'Bradley Hand', cursive;
  --f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --step-0: clamp(1.04rem, 1rem + 0.2vw, 1.14rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.5rem + 2.2vw, 3.3rem);
  --step-display: clamp(2.7rem, 1.2rem + 5vw, 6rem);
  --step-hero: clamp(2.8rem, 1.5rem + 5.4vw, 6.4rem);
  --mono-size: 0.76rem;

  --wrap: 1280px;
  --nav-h: calc(3.4rem + 1px);
  --gutter: clamp(16px, 3vw, 40px);
  --col-gap: clamp(14px, 2vw, 28px);
  --sec-space: clamp(3rem, 2rem + 4vw, 6rem);

  --dur-fast: 180ms;
  --dur-base: 260ms;
  --dur-reveal: 600ms;
  --dur-turn: 900ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* paper grain: a tiny fractal-noise tile, not an image file */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme='light'] {
  color-scheme: light;
  --bg: #EDEDEB;
  --bg-2: #E4E4E1;
  --surface: #F7F7F5;
  --surface-2: #E9E9E6;
  --rule: #CFCFCB;
  --ink: #141415;
  --ink-2: #5B5B60;
  --ink-3: #8A8A8F;
  --strong: #000000;
  --pencil: #46464B;
  --wash: rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 10px 24px -14px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 1px 1px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.05), 0 22px 40px -22px rgba(0, 0, 0, 0.42);
  --shadow-lift: 0 1px 1px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.06), 0 34px 56px -26px rgba(0, 0, 0, 0.5);
  --nav-bg: rgba(237, 237, 235, 0.86);
  --img-filter: grayscale(1);
  --diagram-filter: grayscale(1);
  --tape: rgba(0, 0, 0, 0.07);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4rem; }
body {
  margin: 0; background-color: var(--paper);
  color: var(--ink); font-family: var(--f-body); font-size: var(--step-0); line-height: 1.5;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0 0 0.8em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
code, pre { font-family: var(--f-mono); font-size: 0.86em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
sub { line-height: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.mono, .label { font-family: var(--f-mono); font-size: var(--mono-size); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.hand { font-family: var(--f-hand); font-weight: 500; font-size: 1.5rem; line-height: 1.05; color: var(--red); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; }
.skip-link:focus { top: 1rem; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; min-height: 44px; padding: 0.5rem 1rem;
  font-family: var(--f-head); font-size: 0.95rem; font-weight: 600; color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink); border-radius: 3px 5px 3px 6px; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-small { min-height: 40px; padding: 0.35rem 0.8rem; font-size: 0.88rem; }
.btn-ink, .btn-primary { background: var(--ink); color: var(--paper); }
.btn-ink:hover, .btn-primary:hover { background: var(--blue); border-color: var(--blue); }
.btn-light { background: var(--plate-ink); color: var(--plate); border-color: var(--plate-ink); }
.btn-light:hover { background: var(--plate-blue); border-color: var(--plate-blue); color: var(--plate); }
.btn-ghost { color: var(--plate-ink); border-color: var(--plate-ink-2); }
.btn-ghost:hover { background: var(--plate-ink); color: var(--plate); }
.btn[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

/* ---------- navigation ---------- */
.navbar { position: sticky; top: 0; z-index: 40; background: var(--nav-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.4rem; }
.navbar-brand { font-family: var(--f-head); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 1.3rem; align-items: center; }
.nav a { font-family: var(--f-head); font-size: 0.95rem; font-weight: 500; color: var(--ink); text-decoration: none; display: inline-flex; padding-block: 0.6rem; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--red); }
.nav .nav-cta { padding: 0.35rem 0.85rem; border: 1.5px solid var(--ink); border-radius: 3px 5px 3px 6px; }
.nav .nav-cta:hover { background: var(--ink); color: var(--paper); }
.nav-no { display: none; }
.menu-toggle { display: none; }
@media (max-width: 900px) {
  .js .menu-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1.5px solid var(--ink); background: transparent; border-radius: 3px; font-family: var(--f-head); cursor: pointer; }
  .js .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--ink); display: none; }
  .js .nav[data-open='true'] { display: block; max-height: calc(100dvh - 3.4rem); overflow-y: auto; overscroll-behavior: contain; }
  .js .nav ul { flex-direction: column; align-items: stretch; padding: 0.5rem var(--gutter) 1rem; gap: 0; }
  .js .nav a { padding-block: 0.8rem; border-bottom: 1px solid var(--rule); width: 100%; }
  .js .nav .nav-cta { margin-top: 0.8rem; justify-content: center; }
}

/* ---------- material family ---------- */
/* tape: a translucent strip on top of a print */
.ref-print, .taped { position: relative; }
.ref-print::before, .scrap::before {
  content: ''; position: absolute; z-index: 3; width: 74px; height: 22px; background: var(--tape);
  top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 3px), transparent 0) ;
}
.ref-print { background: var(--paper-3); padding: 8px 8px 10px; box-shadow: var(--shadow); }
.ref-print img { filter: sepia(0.15) contrast(0.98); }
.ref-print figcaption { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--ink-2); margin-top: 0.45rem; line-height: 1.35; }
.scrap { position: relative; background: var(--paper-3) var(--grain); padding: clamp(10px, 2vw, 18px); box-shadow: var(--shadow);
  clip-path: polygon(0 1%, 4% 0, 30% 0.6%, 62% 0, 100% 0.8%, 99.4% 40%, 100% 99%, 70% 100%, 35% 99.2%, 0 100%, 0.6% 60%); }
.scrap::before { left: 18%; }
.scrap figcaption { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-2); margin-top: 0.5rem; }
.small-fig figcaption, .sheet-fig figcaption {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--ink-2); margin-top: 0.5rem;
}

/* sketches drawn with Rough.js (tools/make-sketches.mjs) */
.sketch { width: 100%; height: auto; color: var(--graphite); overflow: visible; }
.sk { stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sk[fill='currentColor'] { fill: currentColor; }
.sk-light { opacity: 0.5; }
.sk-dash { stroke-dasharray: 5 5; }
.sk-blue { color: var(--blue); }
.sk-red { color: var(--red); }
.sk-label { font-family: var(--f-hand); font-size: 22px; fill: var(--graphite); }
.sk-blue-t { fill: var(--blue); }
.sk-red-t { fill: var(--red); }
.sk-num { font-family: var(--f-mono); font-size: 12px; fill: var(--ink-2); }
.chladni-modes .nodal { stroke: var(--graphite); stroke-width: 1.4; }

/* ---------- sections ---------- */
.section { padding-block: var(--sec-space) 0; }
.section-title { font-size: var(--step-3); display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: clamp(1.2rem, 3vw, 2.2rem); }
.sec-no { font-family: var(--f-hand); font-weight: 600; color: var(--red); font-size: 0.7em; transform: rotate(-4deg); display: inline-block; }
.question { font-family: var(--f-hand); font-size: 1.6rem; line-height: 1.05; color: var(--blue); margin-top: 0.2rem; }
.inv { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
.inv-head { margin-bottom: 1rem; }
.inv-head h3, .sheet-head h3 { font-size: var(--step-3); }
.eq { font-size: var(--step-2); font-style: italic; margin: 0.6rem 0 1rem; }

/* status chip */
.slip { margin: 0.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.status { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.5rem; border: 1.5px solid currentColor; border-radius: 3px; color: var(--ink); }
.status[data-status='Working prototype'] { color: var(--strong); }
.status[data-status='In progress'] { color: var(--blue); }
.status[data-status='Planned'] { color: var(--red); }
.slip-date { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-2); }

/* ---------- figure plates ---------- */
.plate { background: var(--plate); color: var(--plate-ink); border-radius: 3px; position: relative; box-shadow: 0 0 0 1px var(--plate-rule), 0 22px 40px -26px rgba(0, 0, 0, 0.8); }
.plate-bar { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--plate-rule); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--plate-ink-2); }
.plate-cap { font-family: var(--f-mono); font-size: 0.72rem; line-height: 1.45; color: var(--plate-ink-2); padding: 0.6rem 0.9rem 0.9rem; margin: 0; }
.plate-cap a { color: var(--plate-blue); }
.plate button { color: var(--plate-ink); }
.plate :focus-visible { outline-color: var(--plate-blue); }

/* ---------- opening: Orion, drawn live (js/hero.js) ---------- */
.opening { position: relative; }
.hero-track { position: relative; }
.hero-stage { position: relative; min-height: min(100svh, 980px); overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero-track { height: 210svh; }                              /* the scroll that assembles the rocket */
  .hero-stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); min-height: 0; }
}
.hero-canvas, .hero-fallback { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.hero-canvas { touch-action: pan-y; outline-offset: -6px; filter: none; }
.hero-fallback { left: auto; right: 4%; top: 50%; width: min(46vw, 520px); height: auto; transform: translateY(-50%); filter: none; }
.opening.is-live .hero-fallback { display: none; }
.no-js .hero-canvas, .no-js .hero-hud .hero-ctrl, .no-js .hero-cue { display: none; }
.hero-copy { position: relative; z-index: 2; align-self: center; padding-top: clamp(1.5rem, 5vh, 4rem); padding-bottom: 1.5rem; pointer-events: none; }
.hero-copy a, .hero-copy button { pointer-events: auto; }
.hero-copy > * { max-width: 34rem; }
.hero-copy > h1 { max-width: none; }
.hero-kicker { margin-bottom: 1.2rem; color: var(--ink-2); }
.opening h1 { font-size: clamp(2.8rem, 1.2rem + 5.2vw, 6rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.92; text-wrap: initial; }
.opening h1 .line { white-space: nowrap; }
.opening h1 .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.opening h1 .line > span { display: inline-block; }
.mark-word { font-style: normal; position: relative; color: var(--ink-2); -webkit-text-stroke: 0; }
.lede { font-size: var(--step-1); color: var(--ink-2); margin-top: 1.2rem; max-width: 30ch; }
.hero-copy .actions { margin-top: 1.6rem; }

.hero-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.hero-label {
  position: absolute; left: 0; top: 0; margin-top: -0.7em; padding: 0.15rem 0.35rem; white-space: nowrap; pointer-events: auto; cursor: default;
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease-out);
}
.hero-label .hl-no { color: var(--ink-3); margin-right: 0.3rem; }
.hero-label .hl-mm { color: var(--ink-3); margin-left: 0.3rem; }
.hl-line { position: absolute; left: 0; top: 50%; width: var(--len, 40px); height: 1px; background: currentColor; opacity: 0.55; transform-origin: left center; transform: rotate(calc(var(--ang, 0rad) + 3.14159rad)); }
.hero-label.is-hot { color: var(--strong); }
.hero-label.is-hot .hl-no, .hero-label.is-hot .hl-mm { color: var(--ink); }
.hero-label.is-hot .hl-line { opacity: 1; }

.hero-hud { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem 1.5rem; padding-bottom: clamp(1rem, 3vh, 1.8rem); }
.hero-stats { margin: 0; color: var(--ink-3); }
.hero-ctrl { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hero-modes { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; background: var(--nav-bg); backdrop-filter: blur(6px); }
.hero-modes button, .hero-btn {
  min-height: 40px; padding: 0 0.9rem; border: 0; background: none; color: var(--ink-2); cursor: pointer;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hero-modes button + button { border-left: 1px solid var(--rule); }
.hero-modes button:hover, .hero-btn:hover { color: var(--ink); background: var(--wash); }
.hero-modes button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.hero-btn { border: 1px solid var(--rule); border-radius: 999px; background: var(--nav-bg); backdrop-filter: blur(6px); }
@media (pointer: coarse) { .hero-modes button, .hero-btn { min-height: 44px; } }

.hero-caption { position: absolute; z-index: 2; right: max(var(--gutter), env(safe-area-inset-right)); bottom: clamp(4.6rem, 10vh, 5.6rem); margin: 0; max-width: 22rem; text-align: right; color: var(--ink-2);
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.hero-caption.is-on { opacity: 1; transform: none; }
.hero-cue { position: absolute; z-index: 2; left: 50%; bottom: clamp(4.5rem, 10vh, 6rem); margin: 0; transform: translateX(-50%); color: var(--ink-3); display: none; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero-cue { display: block; }
}
@media (max-width: 899px) {
  .hero-copy { align-self: start; padding-top: 2.2rem; }
  .hero-stage { min-height: 0; height: auto; grid-template-rows: auto minmax(58svh, 1fr) auto auto; }
  .hero-caption { position: relative; grid-row: 3; right: auto; top: auto; text-align: left; padding-inline: var(--gutter); max-width: none; }
  .hero-hud { grid-row: 4; }
  .hero-fallback { position: relative; right: auto; top: auto; transform: none; grid-row: 2; justify-self: center; width: min(80vw, 420px); }
  .hero-label { font-size: 0.6rem; }
}

.study-controls { display: grid; gap: 0.5rem; padding: 0.7rem 0.9rem 0; border-top: 1px solid var(--plate-rule); }
.ctrl-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.seg { display: flex; border: 1px solid var(--plate-rule); border-radius: 3px; width: 100%; }
.seg button, .ctrl, .stage-buttons button { min-height: 44px; background: transparent; border: 0; cursor: pointer; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 0.6rem; transition: background-color var(--dur-fast) var(--ease-out); }
.seg button { flex: 1; min-width: 0; }
.seg button + button { border-left: 1px solid var(--plate-rule); }
.seg button[aria-pressed='true'], .stage-buttons button[aria-pressed='true'] { background: var(--plate-ink); color: var(--plate); }
.seg button:hover:not([aria-pressed='true']), .ctrl:hover, .stage-buttons button:hover:not([aria-pressed='true']) { background: var(--plate-2); }
.ctrl { border: 1px solid var(--plate-rule); border-radius: 3px; min-width: 44px; }
.ctrl[aria-pressed='true'] { color: var(--plate-blue); }
.rotate-pad { display: inline-flex; gap: 0.25rem; }
.study-readout { font-family: var(--f-mono); font-size: 0.7rem; color: var(--plate-blue); padding: 0.6rem 0.9rem 0; margin: 0; }
/* ---------- Investigation heads (Rasterix, QuantumSim) ---------- */
.ras-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.8rem); }
.ras-kicker { margin: 0 0 0.7rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.ras-kicker span { color: var(--ink); }
.ras-title { margin: 0; font-family: var(--f-display); font-weight: 420; font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4.2rem); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.ras-title em { display: block; font-style: italic; color: var(--ink-2); }
.ras-spec { margin: 0; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
@media (max-width: 760px) { .ras-head { grid-template-columns: minmax(0, 1fr); } .ras-spec { text-align: left; } }

/* ---------- Rasterix bench ---------- */
.ras-bench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1rem, 3vw, 2.6rem); align-items: stretch; }
.ras-plate { margin: 0; display: flex; flex-direction: column; background: #0F2236; color: #F0F0F0; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-lift); }
.ras-bar { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.95rem; border-bottom: 1px solid #2C3E50; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9B9BA1; }
.ras-bar [data-stage-label] { color: #FFFFFF; }
.ras-frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: crosshair; touch-action: pan-y;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.2px) 0 0 / 16px 16px, #0F2236;
}
/* crop marks in the corners, like a print on the bench */
.ras-frame::before, .ras-frame::after { content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.35); }
.ras-frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.ras-frame::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.ras-frame img, .ras-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--dur-base) var(--ease-out); }
.ras-frame canvas { image-rendering: pixelated; outline: none; }
.ras-frame canvas:focus-visible { box-shadow: inset 0 0 0 2px #FFFFFF; }
.ras-frame img { opacity: 0; filter: none; }
.ras-frame img.is-on { opacity: 1; }
.no-js .ras-frame img[data-stage-img='2'] { opacity: 1; }
.is-dragging .ras-frame { cursor: grabbing; }
.ras-probe { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 3; }
.ras-probe span { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 1px solid #FFFFFF; mix-blend-mode: difference; }
.ras-probe::before, .ras-probe::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.35); }
.ras-probe::before { left: -2000px; right: -2000px; top: 0; height: 1px; width: 4000px; }
.ras-probe::after { top: -2000px; left: 0; width: 1px; height: 4000px; }
.ras-probe.is-miss span { border-style: dashed; opacity: 0.5; }
.ras-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #2C3E50; }
.ras-modes button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; border: 0; background: transparent; color: #9B9BA1; cursor: pointer;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ras-modes button + button { border-left: 1px solid #2C3E50; }
.ras-modes button .mono { color: #7F93A8; font-size: inherit; }
.ras-modes button:hover { color: #FFFFFF; background: #1B3A57; }
.ras-modes button[aria-pressed='true'] { background: #F0F0F0; color: #0F2236; }
.ras-modes button[aria-pressed='true'] .mono { color: #7F93A8; }
.ras-modes button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; }
.no-js .ras-modes { display: none; }
.ras-cap { margin: 0; padding: 0.6rem 0.95rem 0.75rem; border-top: 1px solid #2C3E50; font-size: 0.64rem; letter-spacing: 0.08em; color: #8A9DB0; }

/* the ledger: the pipeline as four steps, live numbers under the pointer */
.ras-ledger { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; gap: 0; counter-reset: none; position: relative; }
.ras-ledger::before { content: ''; position: absolute; left: 7px; top: 1.4rem; bottom: 1.4rem; width: 1px; background: var(--rule); }
.ras-ledger li { position: relative; padding: 1.05rem 0 1.05rem 2rem; border-bottom: 1px dashed var(--rule); transition: opacity var(--dur-base) var(--ease-out); }
.ras-ledger li:last-child { border-bottom: 0; }
.ras-ledger li::before { content: ''; position: absolute; left: 3px; top: 1.35rem; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink-2); transition: background-color var(--dur-base) var(--ease-out); }
.ras-ledger li.is-off { opacity: 0.32; }
.is-probing .ras-ledger li:not(.is-off)::before { background: var(--strong); border-color: var(--strong); }
.ras-step { margin: 0 0 0.35rem; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.ras-eq { margin: 0; font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.55vw, 1.5rem); line-height: 1.2; color: var(--ink); }
.ras-eq sub { font-size: 0.6em; }
.ras-live { margin: 0.4rem 0 0; min-height: 1.4em; font-size: 0.68rem; line-height: 1.45; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; transition: color var(--dur-fast) var(--ease-out); }
.is-probing .ras-live { color: var(--strong); }

/* prints from the Java engine: spread on the page, each with its maths taped on top */
.ras-prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.6rem); margin-top: clamp(3rem, 6vw, 5rem); align-items: start; }
.ras-print, .qs-polaroid, .qs-strip {
  position: relative; margin: 0; padding: 10px 10px 12px; background: #F4F3EF; color: #18181A;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 18px 34px -20px rgba(0, 0, 0, 0.7);
  transform: rotate(var(--r, 0deg)); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ras-print:nth-child(2) { margin-top: 2.2rem; }
@media (hover: hover) and (pointer: fine) {
  .ras-print:hover, .qs-polaroid:hover, .qs-strip:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 28px 44px -22px rgba(0, 0, 0, 0.75); z-index: 2; }
}
.ras-print img, .qs-polaroid img, .qs-strip img { display: block; width: 100%; height: auto; }
.ras-print img { aspect-ratio: 1; object-fit: cover; background: #000; }
.ras-print figcaption, .qs-strip figcaption { margin-top: 0.6rem; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: #5E5E63; }
.ras-math {
  position: relative; z-index: 2; margin: -1.6rem auto 0.7rem; width: fit-content; max-width: 100%; padding: 0.45rem 0.8rem;
  background: #FFFFFF; color: #141415; font-family: var(--f-display); font-style: italic; font-size: clamp(0.88rem, 0.8rem + 0.25vw, 1rem); line-height: 1.35; text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); transform: rotate(calc(var(--r, 0deg) * -1.6));
}
.ras-math::before { /* tape over the slip */
  content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(225, 223, 215, 0.75); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.ras-math sup { font-size: 0.65em; }
.ras-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.ras-foot .slip { margin: 0; }
@media (max-width: 900px) {
  .ras-bench { grid-template-columns: minmax(0, 1fr); }
  .ras-prints { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  .ras-print { padding: 6px 6px 8px; }
  .ras-math { font-size: 0.72rem; padding: 0.35rem 0.5rem; margin-top: -1.3rem; }
}
@media (max-width: 600px) {
  .ras-prints { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; max-width: 420px; margin-inline: auto; }
  .ras-print:nth-child(2) { margin-top: 0; }
  .ras-math { font-size: 0.85rem; }
}

/* ---------- QuantumSim: a taped collage ---------- */
.qs-board { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.qs-col { display: grid; gap: 1.2rem; align-content: start; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.qs-eq { margin: 0; font-family: var(--f-display); font-style: italic; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1; }
.scrap-orbital { transform: rotate(var(--r, -0.8deg)); margin: 0; }
.qs-note { margin: -0.2rem 0 0 auto; max-width: 16ch; color: var(--pencil); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem); line-height: 1; transform: rotate(-3deg); }
.qs-col .slip { margin: 0; }
.qs-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.6vw, 2rem) clamp(1rem, 2.6vw, 2.2rem); align-items: start; }
.qs-polaroid { padding: 10px 10px 0; }
.qs-polaroid:nth-child(even) { margin-top: 1.8rem; }
.qs-polaroid img { aspect-ratio: 1; object-fit: cover; background: #1E1F1B; }
.qs-polaroid figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.55rem 0.15rem 0.7rem; font-family: var(--f-hand); font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem); line-height: 1; color: #2A2A2D; }
.qs-polaroid figcaption .mono { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: #141415; }
.qs-polaroid::before, .qs-strip::before { /* a strip of tape on one corner */
  content: ''; position: absolute; top: -10px; left: 18px; width: 70px; height: 20px; transform: rotate(-8deg);
  background: rgba(225, 223, 215, 0.72); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.qs-polaroid:nth-child(even)::before { left: auto; right: 18px; transform: rotate(7deg); }
.qs-formula { grid-column: 1 / -1; justify-self: center; margin: 0.4rem 0 0.6rem; padding: 0.5rem 0.9rem; border: 1px dashed var(--rule); color: var(--ink); font-size: 0.78rem; letter-spacing: 0.04em; transform: rotate(var(--r, 0deg)); }
.qs-strip { grid-column: 1 / -1; padding-top: 1.4rem; }
.qs-strip::before { left: 50%; margin-left: -35px; }
.qs-strip .ras-math { margin-top: -2.6rem; }
@media (max-width: 900px) {
  .qs-board { grid-template-columns: minmax(0, 1fr); }
  .qs-col { position: static; }
}
@media (max-width: 480px) {
  .qs-collage { gap: 1.2rem 0.9rem; }
  .qs-polaroid { padding: 6px 6px 0; }
  .qs-polaroid figcaption { flex-direction: column; gap: 0.15rem; font-size: 1rem; }
  .qs-strip .ras-math { font-size: 0.72rem; }
}

/* ---------- Fluid: dark contact sheet ---------- */
.fluid-plate { background: var(--plate); color: var(--plate-ink); padding-block: clamp(2rem, 5vw, 4rem); }
.fluid-plate .question { color: var(--plate-blue); }
.fluid-plate a { color: var(--plate-blue); }
.fluid-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--col-gap); align-items: start; }
.fluid-grid .inv-head { grid-column: 1 / -1; margin-bottom: 0; }
.fluid-fig { border: 1px solid var(--plate-rule); }
.seq-frames { position: relative; aspect-ratio: 1; background: #000; }
.seq-frames img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.seq-frames img.is-on { opacity: 1; }
.no-js .seq-frames img[data-frame='2'] { opacity: 1; }
.seq-ctrl { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.5rem; gap: 0.9rem; align-items: center; padding: 0.6rem 0.9rem; border-top: 1px solid var(--plate-rule); }
.seq-ctrl label, .seq-ctrl output { color: var(--plate-ink-2); }
.seq-ctrl output { text-align: right; color: var(--plate-blue); }
.no-js .seq-ctrl { display: none; }
input[type='range'] { width: 100%; accent-color: var(--plate-blue); min-height: 32px; }
.contact-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.contact-sheet button { position: relative; padding: 0; border: 1px solid var(--plate-rule); background: #000; cursor: pointer; }
.contact-sheet button img { opacity: 0.62; transition: opacity var(--dur-fast) var(--ease-out); }
.contact-sheet button:hover img, .contact-sheet button[aria-pressed='true'] img { opacity: 1; }
.contact-sheet button[aria-pressed='true'] { outline: 2px solid var(--plate-blue); outline-offset: 2px; }
.contact-sheet .mono { position: absolute; left: 6px; bottom: 4px; color: var(--plate-ink-2); font-size: 0.66rem; }
.no-js .contact-sheet button { cursor: default; }
.fluid-notes { grid-column: 2; }
.fluid-plate .status[data-status='Working prototype'] { color: var(--plate-ink); }
.fluid-plate .slip-date { color: var(--plate-ink-2); }
@media (max-width: 860px) {
  .fluid-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-sheet { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .contact-sheet .mono { display: none; }
  .fluid-notes { grid-column: 1; }
}

/* ---------- Section heads (eyebrow, serif display line, tagline) ---------- */
.writing-intro .sec-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 1.2rem; }
.writing-intro .display-title { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.eyebrow { font-family: var(--f-head); font-weight: 600; font-size: 1rem; display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem; color: var(--ink-2); }
.eyebrow .sec-no { font-size: 1.5rem; }
.display-title { font-family: var(--f-display); font-weight: 420; font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.display-title em { display: block; font-style: italic; color: var(--red); letter-spacing: -0.03em; }
.sec-tag { font-family: var(--f-head); font-size: var(--step-0); color: var(--ink-2); text-align: right; line-height: 1.45; max-width: 26rem; padding-bottom: 0.6rem; text-wrap: balance; }
@media (max-width: 760px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-tag { text-align: left; padding-bottom: 0; }
}

/* ---------- Workbench cards ---------- */
.bench-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.bench-card { min-width: 0; scroll-margin-top: 5rem; }
.bench-card.is-low { margin-top: clamp(3rem, 9vw, 8rem); }
.bench-card.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 0 clamp(1.5rem, 4vw, 4rem); align-items: end; }
.bench-card.is-wide .card-meta { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .bench-grid { grid-template-columns: minmax(0, 1fr); }
  .bench-card.is-low { margin-top: 0; }
  .bench-card.is-wide { grid-template-columns: minmax(0, 1fr); }
}

.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.card-no { color: var(--ink); font-weight: 600; }
.card-state { display: inline-flex; align-items: center; gap: 0.5rem; }
.card-state .dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.card-state.is-planned .dot { background: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .card-state .dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: dot-ping 2.4s var(--ease-out) 3; } /* a few pings, not an endless loop */
}
@keyframes dot-ping { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* the sheet of paper */
.paper {
  position: relative; padding: clamp(0.9rem, 2.2vw, 1.6rem) clamp(1rem, 2.4vw, 1.8rem) clamp(0.8rem, 1.8vw, 1.2rem);
  background: var(--surface) var(--grain); border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: var(--shadow-sheet);
  transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 0;
  transition: transform var(--dur-reveal) var(--ease-out), box-shadow var(--dur-reveal) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bench-card:hover .paper, .paper:focus-within {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: var(--shadow-lift);
  }
}
@media (max-width: 760px) { .paper { transform: rotate(calc(var(--tilt, 0deg) * 0.5)); } }

.paper-tabs { display: flex; flex-wrap: wrap; gap: 0 clamp(1rem, 2.4vw, 1.8rem); border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
.paper-tabs [role='tab'] {
  position: relative; min-height: 44px; padding: 0.5rem 0 0.55rem; background: none; border: 0; cursor: pointer;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.paper-tabs [role='tab']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.paper-tabs [role='tab']:hover { color: var(--ink); }
.paper-tabs [role='tab'][aria-selected='true'] { color: var(--red); }
.paper-tabs [role='tab'][aria-selected='true']::after { transform: scaleX(1); }

/* panels share one grid cell, so switching tabs never moves the page */
.paper-stack { display: grid; }
.paper-stack > [role='tabpanel'] { grid-area: 1 / 1; min-width: 0; }
.paper-stack > [role='tabpanel'][hidden] { display: flex !important; visibility: hidden; } /* beats the global [hidden] rule */
.paper-panel { position: relative; }
.no-js .paper-tabs { display: none; }
.no-js .paper-stack > [role='tabpanel'] { grid-area: auto; visibility: visible; }
.no-js .paper-stack > [role='tabpanel'] + [role='tabpanel'] { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

.dwg-title { font-family: var(--f-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.dwg-sub { font-family: var(--f-mono); font-size: 0.66rem; color: var(--ink-2); margin: 0.2rem 0 0.8rem; line-height: 1.45; }
.dwg-sub strong { color: var(--red); font-weight: 600; }
.paper-panel { display: flex; flex-direction: column; }
.paper-panel > .paper-foot { margin-top: auto; }
.paper-foot { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

/* line studies: plotted in view by view (js/workbench.js) */
.study-fig svg { display: block; width: 100%; height: auto; }
.study .v { vector-effect: none; stroke-width: 1.05; }
.study .h { vector-effect: none; stroke-width: 0.55; }
.study .study-lbl { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em; fill: var(--ink-2); }
.js-plot .study .v { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-plot .study .h, .js-plot .study .study-lbl { opacity: 0; }
.js-plot.is-plotted .study .v { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease-in-out) calc(var(--v) * 0.45s); }
.js-plot.is-plotted .study .h { opacity: 0.32; transition: opacity 0.9s var(--ease-out) calc(1.4s + var(--v) * 0.45s); }
.js-plot.is-plotted .study .study-lbl { opacity: 1; transition: opacity 0.6s var(--ease-out) calc(0.6s + var(--v) * 0.45s); }

.paper-note { position: absolute; font-family: var(--f-hand); font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem); font-weight: 500; color: var(--red); transform: rotate(-3deg); line-height: 1; white-space: nowrap; pointer-events: none; }
.paper-note.is-marked { text-decoration: underline 1.5px; text-underline-offset: 4px; }
#orion .paper-note { top: 26%; right: 4%; }
#chladni-plate .paper-note { bottom: 13%; left: 1%; transform: rotate(-2deg); }

.cad-img { width: 100%; height: auto; mix-blend-mode: multiply; }
.sch-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.sch-pair a, .sch-one { display: block; text-decoration: none; }
.sch-pair img, .sch-one img { width: 100%; height: auto; background: #fff; border: 1px solid var(--rule); transition: transform var(--dur-base) var(--ease-out); }
.sch-pair a:hover img, .sch-one:hover img { transform: translateY(-2px); }
.sch-pair .mono { display: block; margin-top: 0.35rem; }

/* sand on a plate */
.sand { display: grid; justify-items: center; gap: 0.7rem; }
.sand canvas { width: min(100%, 340px); height: auto; aspect-ratio: 1; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 10px 22px -16px rgba(0, 0, 0, 0.6); }
.sand-ctrl { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.sand-modes { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.sand-modes button, .sand-shake { min-height: 40px; min-width: 44px; padding: 0 0.75rem; border: 0; background: none; font-family: var(--f-mono); font-size: 0.74rem; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.sand-modes button + button { border-left: 1px solid var(--rule); }
.sand-modes button:hover { background: var(--blue-wash); }
.sand-modes button[aria-pressed='true'] { background: var(--ink); color: var(--paper-3); }
.sand-shake { border: 1px solid var(--ink); border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.sand-shake:hover { background: var(--ink); color: var(--paper-3); }
.sand-read { margin: 0; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .sand-modes button, .sand-shake { min-height: 44px; } }

.atlas-fig .sheet-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.atlas-fig svg { min-width: 560px; }
.sheet-scroll { position: relative; }

/* below the sheet */
.card-body { margin-top: clamp(1.4rem, 3vw, 2rem); min-width: 0; }
.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.card-title-row h3 { font-family: var(--f-display); font-weight: 420; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1; letter-spacing: -0.02em; }
.arrow-link {
  flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.arrow-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-out); }
.arrow-link:hover { background: var(--ink); color: var(--paper-3); }
.arrow-link:hover svg { transform: translate(2px, -2px); }
.card-sub { margin-top: 0.6rem; font-size: var(--step-1); color: var(--ink-2); line-height: 1.35; text-wrap: balance; }
.card-desc { margin-top: 0.7rem; max-width: 46ch; text-wrap: pretty; }
.card-tags { margin-top: 1rem; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); word-spacing: 0.15em; }
.card-body .slip { margin-top: 0.5rem; }
.card-body .slip .status { display: none; } /* the card header already states it */

/* ---------- Scratchbook: shared entry styles (book styles are at the end) ---------- */
.toc-no { font-family: var(--f-hand); color: var(--red); font-size: 1.3rem; }
.toc-dots { border-bottom: 2px dotted var(--rule); transform: translateY(-0.3em); }
.toc-meta { font-family: var(--f-mono); font-size: 0.68rem; color: var(--ink-2); }
.nb-hint { margin-top: 1.5rem; color: var(--blue); }
.nb-open h3, .xp-open h3 { font-size: var(--step-2); margin-bottom: 0.8rem; }
.nb-open ol, .xp-open ol { padding-left: 1.3rem; display: grid; gap: 0.7rem; font-family: var(--f-hand); font-size: 1.45rem; line-height: 1.1; }

/* experiment content (shared by pages and the reading view) */
.xp-kicker { font-family: var(--f-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.xp-no { color: var(--red); margin-right: 0.4em; }
.xp h3, .nb-page .xp-a h3 { font-size: var(--step-2); margin-bottom: 0.2rem; }
.xp-q { font-family: var(--f-hand); font-size: 1.5rem; line-height: 1.05; color: var(--blue); margin-bottom: 0.9rem; }
.xp-fig { margin-bottom: 0.6rem; }
.xp-fig img { background: #fff; box-shadow: var(--shadow); }
.xp-fig figcaption, .xp-sketch figcaption { font-family: var(--f-mono); font-size: 0.66rem; color: var(--ink-2); margin-top: 0.4rem; }
.xp-code pre { margin: 0; padding: 0.9rem 0.9rem 0.9rem 1.6rem; background: var(--surface); color: var(--ink); font-size: 0.74rem; line-height: 1.5; overflow-x: auto; white-space: pre;
  background-image: repeating-linear-gradient(180deg, var(--wash) 0 1.5em, transparent 1.5em 3em);
  border-left: 10px dotted var(--rule); box-shadow: var(--shadow); }
.xp-sketch { margin: 0.6rem 0; }
.xp-eq { font-size: var(--step-1); font-style: italic; margin-bottom: 0.8rem; }
.xp-obs { font-size: 1rem; line-height: 1.45; }
.xp-openq { font-family: var(--f-hand); font-size: 1.45rem; line-height: 1.05; color: var(--red); margin: 0.8rem 0; }
.xp-openq .mono { display: block; font-family: var(--f-mono); color: var(--ink-2); font-size: 0.66rem; margin-bottom: 0.2rem; }
.xp-note { transform: rotate(-1.5deg); transform-origin: left; margin: 0.6rem 0; font-size: 1.4rem; }
.xp-tools { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0; }
.xp-tools li { font-family: var(--f-mono); font-size: 0.66rem; padding: 0.15rem 0.45rem; border: 1px solid var(--rule); border-radius: 3px; }
.xp-meta { margin: 0.4rem 0; }
.xp-links { font-family: var(--f-head); font-size: 0.95rem; font-weight: 600; }

/* scratchbook layouts (data-layout from data/experiments.json) */
[data-layout='pasted'] .xp-fig { transform: rotate(-1.2deg); background: #fff; padding: 6px; box-shadow: var(--shadow); }
[data-layout='pasted'] .xp-fig img { box-shadow: none; }
[data-layout='pasted'] .xp-obs { background: var(--paper-4); padding: 0.8rem 0.9rem; transform: rotate(0.8deg); box-shadow: var(--shadow); }
[data-layout='printout'] .xp-code pre { transform: rotate(-0.5deg); }
[data-layout='printout'] .xp-sketch { transform: rotate(0.6deg); }
[data-layout='flow'] .xp-sketch { border-top: 1.5px dashed var(--rule); padding-top: 0.6rem; }
[data-layout='flow'] .xp-code pre { font-size: 0.68rem; }
[data-layout='plot'] .xp-fig { max-width: 88%; transform: rotate(0.8deg); }
[data-layout='equation'] .xp-eq { font-size: var(--step-2); text-align: center; padding: 1rem 0; border-block: 1.5px solid var(--ink); }

/* reading view */
.reading-contents { margin-bottom: 1.5rem; }
.reading-contents ol { list-style: none; display: grid; gap: 0.2rem; max-width: 40rem; }
.reading-contents a { display: grid; grid-template-columns: 1.6rem auto minmax(1rem, 1fr) auto; gap: 0.5rem; align-items: baseline; text-decoration: none; color: var(--ink); font-family: var(--f-head); font-weight: 600; padding: 0.35rem 0; }
.reading { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.reading .xp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); background: var(--paper-3) var(--grain); padding: clamp(1rem, 3vw, 2rem); box-shadow: var(--shadow); }
.reading .xp-open { background: var(--paper-3); padding: clamp(1rem, 3vw, 2rem); box-shadow: var(--shadow); }
@media (max-width: 760px) { .reading .xp { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Tools ---------- */
.evidence { min-height: 5.5rem; margin-bottom: 1.2rem; padding: 0.9rem 1.1rem; background: var(--paper-4) var(--grain); box-shadow: var(--shadow); transform: rotate(-0.4deg); max-width: 40rem; }
.ev-empty { font-family: var(--f-hand); font-size: 1.5rem; color: var(--ink-2); margin: 0; }
.ev-tool { font-family: var(--f-head); font-weight: 800; font-size: var(--step-2); margin: 0 0 0.2rem; }
.ev-use { margin-bottom: 0.3rem; }
.ev-links { font-family: var(--f-mono); font-size: 0.78rem; }
.instruments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-bottom: 1.5rem; }
.inst-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.inst-head .mono { display: none; }
.inst-head h3 { font-size: var(--step-1); }
.glyph { width: 56px; height: auto; }
.g-ink { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.g-hid { fill: none; stroke: var(--ink); stroke-dasharray: 4 3; opacity: 0.5; }
.g-dim, .g-cl { fill: none; stroke: var(--blue); stroke-width: 1.2; }
.g-dot circle, circle.g-dot { fill: var(--red); }
.g-t { font: 12px var(--f-mono); fill: var(--ink-2); }
.inst-tools { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.inst-tools li { display: contents; }
.inst-name { min-height: 40px; padding: 0.3rem 0.8rem; background: var(--paper-3); border: 1.5px solid var(--ink); border-radius: 3px 6px 4px 5px; cursor: pointer; font-family: var(--f-head); font-weight: 600; font-size: 0.92rem; }
.inst-name:hover, .inst-tools li.is-lit .inst-name { background: var(--blue-wash); border-color: var(--blue); color: var(--blue); }
.inst-name[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.inst-proj { display: none; }
.matrix-fig figcaption { display: none; }
.matrix-wrap { position: relative; overflow-x: auto; background: var(--paper-3); box-shadow: var(--shadow); }
.matrix { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 0.85rem; }
.matrix th, .matrix td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--rule); text-align: center; }
.matrix thead th { font-family: var(--f-head); font-weight: 600; font-size: 0.8rem; vertical-align: bottom; }
.matrix thead th a { color: var(--ink); text-decoration: none; }
.matrix tbody th { text-align: left; font-family: var(--f-head); font-weight: 500; white-space: nowrap; cursor: default; }
.matrix .m-group th { text-align: left; font-family: var(--f-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); padding-top: 0.8rem; }
.matrix .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.matrix .is-lit { background: var(--blue-wash); }
.matrix .is-lit .dot { background: var(--blue); transform: scale(1.3); }
.matrix thead th.is-lit a { color: var(--blue); }
@media (max-width: 860px) { .instruments { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Writing: clippings ---------- */
.writing-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--col-gap); align-items: start; }
.series-title { font-family: var(--f-hand); font-size: 1.8rem; line-height: 1.05; color: var(--blue); }
.clippings { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.clip { position: relative; background: var(--surface) var(--grain); padding: 1.2rem 1.2rem 1rem; box-shadow: var(--shadow);
  clip-path: polygon(0 2%, 3% 0, 20% 1%, 48% 0, 75% 1.2%, 100% 0, 99% 30%, 100% 62%, 99.2% 100%, 70% 98.8%, 40% 100%, 12% 99%, 0 100%, 0.8% 50%); }
.clip-1 { transform: rotate(-1deg); }
.clip-2 { transform: rotate(1.2deg); margin-top: 1.5rem; }
.clip-part { margin-bottom: 0.5rem; }
.clip-title { font-size: var(--step-2); margin-bottom: 0.6rem; }
.clip-title a { color: var(--ink); text-decoration-color: var(--red); }
.clip-pub { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-2); margin: 0; }
@media (max-width: 760px) { .writing-grid, .clippings { grid-template-columns: minmax(0, 1fr); } .clip-2 { margin-top: 0; } }

/* ---------- About ---------- */
.about { padding-bottom: var(--sec-space); }
.about-card { max-width: 46rem; }
.about-card h2 { font-size: var(--step-3); margin-bottom: 0.6rem; }
.about-card p { font-size: var(--step-1); }
.signature { font-size: 2rem; transform: rotate(-3deg); transform-origin: left; display: inline-block; margin-top: 0.6rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 1.5px solid var(--ink); padding-block: 1.5rem 2.5rem; font-size: 0.85rem; color: var(--ink-2); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: var(--col-gap); }
.site-footer ul { list-style: none; display: grid; gap: 0.25rem; margin-top: 0.4rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* drawing language (every SVG sheet) */
.drawing { font-family: var(--f-mono); overflow: visible; }
.drawing .v { fill: none; stroke: var(--ink); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.drawing .h { fill: none; stroke: var(--ink); stroke-width: 0.6; stroke-dasharray: 4 3; opacity: 0.38; vector-effect: non-scaling-stroke; }
.drawing .centre { stroke: var(--blue); stroke-width: 0.7; stroke-dasharray: 16 4 3 4; opacity: 0.7; vector-effect: non-scaling-stroke; }
.drawing .dim, .drawing .dim-ext { fill: none; stroke: var(--blue); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.drawing .dim-ext { opacity: 0.6; }
.drawing .arrowhead { fill: var(--blue); }
.drawing .arrowhead-ink { fill: var(--ink); }
.drawing text { fill: var(--ink); font-size: 12px; }
.drawing .dim-t { fill: var(--blue); font-weight: 600; }
.drawing .view-t { font-weight: 700; letter-spacing: 0.08em; font-size: 12px; }
.drawing .leader { stroke: var(--red); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.drawing .leader-dot { fill: var(--red); }
.drawing .call-t { fill: var(--red); font-weight: 700; }
.drawing .call-s { fill: var(--ink-2); }
.drawing .blk-t { font-weight: 700; letter-spacing: 0.05em; }
.drawing .blk-s { fill: var(--ink-2); font-size: 11px; }
.drawing .link-t { fill: var(--blue); font-size: 11px; }
.drawing .title-block rect, .drawing .title-block path { fill: var(--surface); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.drawing .title-block path { fill: none; }
.drawing .tb-big { font-weight: 700; letter-spacing: 0.06em; font-size: 13px; }
.drawing .tb { font-size: 11px; fill: var(--ink-2); }
.drawing .concept .v { stroke-dasharray: 6 3; }
.chladni-sheet text, .atlas-sheet text { font-size: 11px; }
.chladni-sheet .blk-s, .chladni-sheet .link-t, .chladni-sheet .call-s, .chladni-sheet .tb, .atlas-sheet .blk-s { font-size: 10.5px; }
.chladni-sheet .view-t, .atlas-sheet .view-t { font-size: 11px; }

/* ---------- case studies ---------- */
.breadcrumb { margin: 2rem 0 1rem; font-family: var(--f-head); font-size: 0.95rem; }
.label { color: var(--ink-2); }
.cs-hero { border-top: 2px solid var(--ink); padding-top: 1.2rem; margin-bottom: 2.5rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--col-gap); }
.cs-hero > * { grid-column: 1 / 9; }
.cs-hero h1 { font-size: var(--step-hero); letter-spacing: -0.035em; margin: 0.5rem 0 0.4rem; }
.cs-hero .cs-facts { grid-column: 9 / 13; grid-row: 1 / span 4; margin: 0; border-top: 1px solid var(--ink); align-self: start; }
.cs-facts > div { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.6rem; font-size: 0.95rem; }
.cs-facts dt { font-family: var(--f-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); padding-top: 0.2rem; }
.cs-facts dd { margin: 0; }
.cs-figure { margin-bottom: 3rem; }
.cs-figure img { border: 1px solid var(--rule); background: var(--plate); }
.cs-figure figcaption { font-size: 0.93rem; color: var(--ink-2); margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); max-width: 70ch; }
.media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cs-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem var(--col-gap); padding-block: 2rem; border-top: 1px solid var(--ink); }
.cs-section > header { grid-column: 1 / 4; }
.cs-section > header .label { display: block; color: var(--blue); margin-bottom: 0.4rem; }
.cs-section > header h2 { font-size: var(--step-2); }
.cs-section > div { grid-column: 4 / 11; min-width: 0; }
.cs-section p, .cs-section li { max-width: 68ch; }
.cs-section ul, .cs-section ol { padding-left: 1.3rem; display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.equation { font-size: 1.15rem; padding: 0.7rem 1rem; border-left: 2px solid var(--blue); background: var(--blue-wash); overflow-x: auto; margin: 0 0 1rem; }
.src-ref { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-2); }
.cs-section pre { background: var(--plate); color: var(--plate-ink); padding: 1rem; overflow-x: auto; border-radius: 2px; line-height: 1.5; font-size: 0.82rem; }
.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 2rem 4rem; border-top: 2px solid var(--ink); font-family: var(--f-head); }
@media (max-width: 860px) {
  .cs-hero > *, .cs-hero .cs-facts { grid-column: 1 / -1; grid-row: auto; }
  .cs-hero .cs-facts { margin-top: 1.5rem; }
  .cs-section > header, .cs-section > div { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .media-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- motion ---------- */
/* html.motion-ok is set by an inline script in <head> when reduced motion is off. */
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.motion-ok .opening h1 .line > span { animation: rise var(--dur-reveal) var(--ease-out) both; }
.motion-ok .opening h1 .line:nth-child(2) > span { animation-delay: 90ms; }
.motion-ok .opening h1 .line:nth-child(3) > span { animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .motion-ok .opening h1 .line > span { animation: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* late adjustments */
.matrix-details summary { cursor: pointer; font-family: var(--f-hand); font-size: 1.5rem; color: var(--blue); min-height: 44px; display: inline-flex; align-items: center; }
.matrix-details[open] summary { margin-bottom: 0.6rem; }
.reading .xp > *, .xp-fig, .nb-page-inner > * { min-width: 0; }
.xp-code pre { max-width: 100%; }
html { overflow-x: clip; } /* WebKit does not propagate body's clip to the viewport; rotated scraps must not widen the page */

/* Web Interface Guidelines (vercel-labs/web-interface-guidelines), applied site-wide */
html { -webkit-tap-highlight-color: rgba(128, 128, 128, 0.2); }
a, button, [role='tab'], summary, label { touch-action: manipulation; }
h1, h2, h3, [id] { scroll-margin-top: 5rem; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.mono, .label, .slip-date, .status, .card-meta, .paper-foot, .dwg-sub, .nb-indicator, [data-nb-indicator], .matrix, .clippings, time { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.arrow-link:focus-visible { outline-offset: 4px; border-radius: 50%; }
.paper-tabs [role='tab']:focus-visible { outline-offset: 2px; }
.skip-link:focus-visible { z-index: 60; }
@media (pointer: fine) { html { overscroll-behavior-y: none; } }
@media (max-width: 560px) { .study .study-lbl { font-size: 15px; } }

/* ---------- Monotone theme details ---------- */
body { background-color: var(--bg); color: var(--ink); transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
img, video { filter: var(--img-filter); }
.sch-pair img, .sch-one img, .xp-fig img, .tabpanel img { filter: var(--diagram-filter); }
.cad-img { mix-blend-mode: normal; }
[data-theme='dark'] .cad-img, :root:not([data-theme='light']) .cad-img { filter: grayscale(1) invert(0.88); mix-blend-mode: screen; }
.display-title em { color: var(--ink-2); }
.paper-tabs [role='tab'][aria-selected='true'] { color: var(--strong); }
.paper-tabs [role='tab']::after { background: var(--strong); }
.card-state .dot { background: var(--strong); }
.card-state.is-planned .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
a { color: inherit; }
::selection { background: var(--ink); color: var(--bg); }

.theme-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--ink); background: var(--wash); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform var(--dur-reveal) var(--ease-out); }
.theme-toggle .i-sun { display: none; }
[data-theme='light'] .theme-toggle .i-sun { display: block; }
[data-theme='light'] .theme-toggle .i-moon { display: none; }
.theme-toggle:active svg { transform: rotate(-30deg); }
@media (pointer: coarse) { .theme-toggle { width: 44px; height: 44px; } }
.navbar-inner > .nav { margin-left: auto; }
.navbar-inner > .theme-toggle { margin-left: clamp(0.6rem, 1.5vw, 1.2rem); }
@media (max-width: 900px) { .js .menu-toggle { margin-left: auto; } }
@media (max-width: 480px) { .hero-label .hl-mm { display: none; } }

/* ---------- Scratchbook, landscape book (js/notebook.js) ----------
   Pages are light paper in both themes: the book is an object on the desk, not UI chrome. */
.nb-head-side { display: grid; justify-items: end; gap: 1rem; }
.nb-view { display: inline-flex; gap: 0; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; }
.nb-view button {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0 0.95rem; border: 0; border-radius: 999px;
  background: none; color: var(--ink-2); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nb-view button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nb-view button:hover { color: var(--ink); }
.nb-view button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }

.nb-shell {
  --nb-paper: #F3F1EA; --nb-paper-2: #E9E6DC; --nb-ink: #18181A; --nb-ink-2: #5E5E63; --nb-rule: rgba(24, 24, 26, 0.14);
  --nb-pencil: #A23A2C; margin-top: 0.5rem;
}
[data-theme='light'] .nb-shell { --nb-paper: #FBFAF6; --nb-paper-2: #F0EEE7; }

/* folder tabs sitting on the top edge of the book */
.nb-tabs { display: flex; gap: 4px; padding-inline: clamp(12px, 3vw, 40px); position: relative; z-index: 2; margin-bottom: -2px; overflow-x: auto; scrollbar-width: none; }
.nb-tabs::-webkit-scrollbar { display: none; }
.nb-tabs button {
  flex: none; display: inline-flex; align-items: baseline; gap: 0.5rem; min-height: 40px; padding: 0.55rem 1rem 0.6rem; cursor: pointer;
  border: 1px solid var(--rule); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface); color: var(--ink-2);
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  transform: translateY(5px); transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nb-tabs button .mono { color: var(--ink-3); font-size: inherit; }
.nb-tabs button:hover { transform: translateY(1px); color: var(--ink); }
.nb-tabs button[aria-current='true'] { background: var(--nb-paper); color: var(--nb-ink); border-color: transparent; transform: none; }
.nb-tabs button[aria-current='true'] .mono { color: var(--nb-pencil); }

.nb-stage { outline: none; padding: 0 0 1.2rem; }
.nb-stage:focus-visible .nb-book { outline: 2px solid var(--strong); outline-offset: 10px; }
.nb-book { position: relative; margin-inline: auto; height: var(--page-h, 520px); touch-action: pan-y; perspective: 2400px; perspective-origin: 50% 40%; }
.nb-book.is-spread { width: calc(var(--page-w, 560px) * 2); }
.nb-book.is-pad { width: var(--page-w, 100%); max-width: 100%; }
/* the cover board and the stacked page edges under the open spread */
.nb-book::before {
  content: ''; position: absolute; inset: -7px -9px -12px; border-radius: 5px; background: #0A0A0B;
  box-shadow: 0 0 0 1px var(--rule), 0 40px 60px -34px rgba(0, 0, 0, 0.85), 0 14px 22px -16px rgba(0, 0, 0, 0.6);
}
.nb-book::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: -5px; height: 6px; border-radius: 0 0 3px 3px; pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--nb-paper-2) 0 1px, #CFCBC0 1px 2px);
}
.is-pad.nb-book::after { left: 8px; right: 0; }

.nb-slot { position: absolute; top: 0; height: 100%; width: var(--page-w); }
.nb-slot-l { left: 0; }
.nb-slot-r { left: var(--page-w); }
.is-pad .nb-slot-r { left: 0; width: 100%; }
.is-pad .nb-slot-l { display: none; }

.nb-page { position: absolute; inset: 0; overflow: hidden; color: var(--nb-ink); background: var(--nb-paper) var(--grain); }
.nb-page::before { /* faint ruling and a margin line, like a notebook */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(24, 24, 26, 0.06) 31px 32px);
}
.nb-slot-l .nb-page, .nb-face-back .nb-page { border-radius: 3px 0 0 3px; box-shadow: inset -34px 0 34px -30px rgba(0, 0, 0, 0.38), inset 1px 0 0 rgba(0, 0, 0, 0.06); }
.nb-slot-r .nb-page, .nb-face-front .nb-page { border-radius: 0 3px 3px 0; box-shadow: inset 34px 0 34px -30px rgba(0, 0, 0, 0.32); }
.is-pad .nb-page { border-radius: 3px; box-shadow: inset 18px 0 22px -20px rgba(0, 0, 0, 0.35); }
/* dog-ear on the outer corner of the right page */
.nb-slot-r .nb-page::after, .is-pad .nb-page::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; pointer-events: none;
  background: linear-gradient(315deg, var(--bg) 50%, #D9D5CA 50%, #F6F4EE 78%); box-shadow: -2px -2px 5px -2px rgba(0, 0, 0, 0.25);
}
.nb-page-inner { position: relative; height: 100%; padding: clamp(1.1rem, 3.2vw, 2.6rem) clamp(1.1rem, 3.4vw, 2.8rem) 2.6rem; }
.nb-left-part .nb-page-inner { padding-left: clamp(1.4rem, 4vw, 3.2rem); }
.nb-left-part .nb-page-inner::before { /* red margin rule */
  content: ''; position: absolute; top: 0; bottom: 0; left: clamp(0.8rem, 2.2vw, 1.8rem); width: 1px; background: rgba(162, 58, 44, 0.28);
}
.nb-page .xp-a, .nb-page .xp-b { height: 100%; }
.nb-page .xp-a { display: flex; flex-direction: column; min-height: 0; }
.nb-page .xp-kicker { color: var(--nb-ink-2); font-size: 0.66rem; letter-spacing: 0.12em; }
.nb-page .xp-no { color: var(--nb-ink); }
.nb-page .xp-a h3 { margin: 0.9rem 0 0.15rem; font-family: var(--f-display); font-weight: 420; font-size: clamp(1.9rem, 1rem + 2.4vw, 3.3rem); line-height: 0.98; letter-spacing: -0.02em; color: var(--nb-ink); text-wrap: balance; }
.nb-page .xp-sub { font-family: var(--f-display); font-style: italic; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem); color: var(--nb-ink-2); }
.nb-page .xp-q { margin: 1.1rem 0 0.6rem; font-family: var(--f-body); font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.35; color: var(--nb-ink); max-width: 34ch; text-wrap: balance; }
.nb-page .xp-desc { font-size: 0.92rem; line-height: 1.5; color: var(--nb-ink-2); max-width: 44ch; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nb-page .xp-eq { display: none; }
.nb-page .xp-tags { margin-top: auto; padding-top: 0.9rem; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-ink); }
.nb-page .xp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--nb-rule); }
.nb-page .xp-state { color: var(--nb-ink-2); }
.nb-page .xp-state .dot { background: var(--nb-ink); }
.nb-page .xp-open-link { color: var(--nb-ink); }
.nb-page .xp-folio { position: absolute; left: clamp(1.4rem, 4vw, 3.2rem); bottom: 0.9rem; margin: 0; font-size: 0.64rem; letter-spacing: 0.1em; color: var(--nb-ink-2); }
.nb-page .xp-a { padding-bottom: 1.4rem; }

/* right page: taped, white-mounted figure and a pencil note */
.nb-page .xp-b { display: grid; align-content: center; justify-items: center; gap: 0.9rem; }
.nb-page .xp-fig, .nb-page .xp-code, .nb-page .xp-sketch {
  position: relative; margin: 0; max-width: min(100%, 26rem); padding: 10px 10px 8px; background: #FFFFFF;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 14px 26px -16px rgba(0, 0, 0, 0.45); transform: rotate(var(--r, -1.6deg));
}
.nb-page .xp-sketch { --r: 1.2deg; }
.nb-page .xp-fig::before, .nb-page .xp-code::before, .nb-page .xp-sketch::before { /* tape */
  content: ''; position: absolute; top: -11px; left: 50%; width: 88px; height: 24px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(222, 218, 205, 0.72); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); backdrop-filter: blur(1px);
}
.nb-page .xp-fig img { display: block; width: 100%; height: auto; max-height: calc(var(--page-h, 520px) * 0.52); object-fit: contain; box-shadow: none; filter: grayscale(1) contrast(1.05); }
.nb-page .xp-fig figcaption, .nb-page .xp-sketch figcaption { margin-top: 0.5rem; color: #6A6A70; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.nb-page .xp-code pre { max-height: calc(var(--page-h, 520px) * 0.5); overflow: hidden; background: #FFFFFF; color: #1A1A1C; font-size: 0.66rem; }
.nb-page .xp-sketch svg { max-height: calc(var(--page-h, 520px) * 0.45); width: 100%; height: auto; }
.nb-page .xp-note { justify-self: end; margin: 0 6% 0 0; max-width: 18ch; color: var(--nb-pencil); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem); line-height: 1; transform: rotate(-3deg); }
.nb-page .xp-obs, .nb-page .xp-openq { display: none; }

/* the turning leaf */
.nb-leaf { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; z-index: 5; will-change: transform; }
.nb-leaf.is-spine { left: var(--page-w); width: var(--page-w); transform-origin: left center; }
.nb-leaf.is-side { left: 0; width: 100%; transform-origin: left center; }
.nb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--nb-paper) var(--grain); overflow: hidden; }
.nb-face-back { transform: rotateY(180deg); }
.is-side .nb-face-back { background: var(--nb-paper-2); }
.nb-face.is-empty { background: var(--nb-paper-2); }
.nb-face::after { /* light falls off as the page rises */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.05) 40%, rgba(255, 255, 255, 0.12) 75%, transparent);
  opacity: calc(var(--a, 0) * 1.1);
}
.nb-face-back::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.04) 45%, transparent); opacity: calc((1 - var(--a, 0)) * 1.1); }
/* the shadow the leaf casts on the page beneath it */
.nb-shade { display: block; position: absolute; top: 0; bottom: 0; z-index: 4; pointer-events: none; width: var(--page-w); left: var(--page-w);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 70%); opacity: calc(var(--lift, 0) * 0.85); transform-origin: left center; transform: scaleX(calc(1 - var(--a, 0))); }
.is-pad .nb-shade { left: 0; width: 100%; }
.nb-shade[hidden] { display: none; }

/* footer: page counter left, turning controls right */
.nb-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1.2rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.nb-indicator { margin: 0; min-width: 0; text-align: left; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.nb-indicator span { color: var(--ink-2); text-transform: none; letter-spacing: 0; font-family: var(--f-display); font-style: italic; font-size: 0.95rem; margin-left: 0.3rem; }
.nb-btns { display: flex; align-items: center; gap: 0.4rem 1.2rem; }
.nb-btns button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.3rem; border: 0; background: none; color: var(--ink-2); cursor: pointer; font-family: var(--f-head); font-size: 0.95rem; transition: color var(--dur-fast) var(--ease-out); }
.nb-btns button:hover:not(:disabled) { color: var(--strong); }
.nb-btns button:disabled { opacity: 0.35; cursor: default; }
.nb-btns svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-out); }
.nb-next { color: var(--ink) !important; }
.nb-next span { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
.nb-next:hover:not(:disabled) svg { transform: translateX(3px); }
.nb-prev:hover:not(:disabled) svg { transform: translateX(-3px); }
.nb-sound { width: 44px; justify-content: center; }
.nb-sound .snd-off { display: none; }
.nb-sound[aria-pressed='false'] .snd-on { display: none; }
.nb-sound[aria-pressed='false'] .snd-off { display: inline; }

@media (max-width: 760px) {
  .nb-head-side { justify-items: start; }
  .nb-prev span { display: none; }
}
@media (max-width: 480px) {
  .nb-page .xp-a h3 { font-size: 1.75rem; }
  .nb-tabs button { padding-inline: 0.75rem; }
}
/* the pad shows one page at a time: alternate words and figure with a little less padding */
.is-pad .nb-page-inner { padding-bottom: 2rem; }

/* entry parts shared by the book and the reading view */
.xp-sub { font-family: var(--f-display); font-style: italic; color: var(--ink-2); }
.xp-tags { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.xp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin-top: 0.8rem; }
.xp-state { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.xp-state .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.xp-open-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; color: var(--ink); font-family: var(--f-display); font-size: 1.05rem; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.xp-open-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-out); }
.xp-open-link:hover svg { transform: translate(2px, -2px); }
.xp-folio { display: none; }
.nb-page .xp-folio { display: block; }
.nb-page .xp-a > * { flex-shrink: 0; }
.nb-page .xp-a > .xp-desc { -webkit-line-clamp: 3; }
.is-pad .nb-page .xp-a > .xp-desc { -webkit-line-clamp: 6; }
/* one mounted item per right page in the book; the reading view keeps them all */
.nb-page .xp-b > :is(.xp-fig, .xp-code, .xp-sketch) ~ :is(.xp-fig, .xp-code, .xp-sketch) { display: none; }

/* maths is case-sensitive: never uppercase it */
.ras-live, .qs-formula, .qs-strip figcaption, .qs-polaroid figcaption .mono { text-transform: none; }
.ras-math sub, .ras-eq sub { font-size: 0.62em; line-height: 0; }

/* numbered labels share the tagline's typeface (Bricolage Grotesque), in sentence case */
.sec-no { font-family: var(--f-head); font-weight: 600; transform: none; color: var(--ink); }
.eyebrow .sec-no { font-size: 1rem; }
.xp-kicker, .nb-page .xp-kicker, .card-meta, .nb-tabs button, .nb-page .xp-folio, .nb-indicator, .ras-kicker {
  font-family: var(--f-head); text-transform: none; letter-spacing: 0;
}
.xp-kicker, .nb-page .xp-kicker { font-size: 0.86rem; }
.xp-no { font-weight: 600; }
.card-meta { font-size: 0.86rem; }
.nb-tabs button { font-size: 0.86rem; }
.nb-tabs button .mono { font-family: var(--f-head); text-transform: none; letter-spacing: 0; font-weight: 600; }
.nb-page .xp-folio { font-size: 0.8rem; }
.nb-indicator { font-size: 0.9rem; }
.ras-kicker { font-size: 0.9rem; }

/* ---------- Rasterix: concepts first, maths on hover ---------- */
.ras-ledger li { padding: 0.2rem 0 0.2rem 2rem; }
.ras-ledger li::before { top: 1.35rem; }
.ras-concept {
  display: flex; align-items: baseline; gap: 0.8rem; width: 100%; min-height: 56px; padding: 0.7rem 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 420; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.ras-n { font-family: var(--f-head); font-size: 0.86rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.ras-concept::after { content: '+'; margin-left: auto; font-family: var(--f-head); font-size: 1.1rem; color: var(--ink-3); transition: transform var(--dur-base) var(--ease-out); }
.ras-c.is-open .ras-concept::after { transform: rotate(45deg); }
.ras-detail { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 320ms var(--ease-out), opacity 220ms var(--ease-out); }
.ras-detail > * { min-height: 0; overflow: hidden; }
.ras-detail { overflow: hidden; }
.ras-detail p { margin: 0; }
.ras-c.is-open .ras-detail { grid-template-rows: 1fr; opacity: 1; }
.ras-detail-in { min-height: 0; overflow: hidden; display: grid; gap: 0.35rem; padding-bottom: 0.9rem; }
.ras-why { font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); max-width: 40ch; text-wrap: pretty; }
.ras-c .ras-live { margin-top: 0.15rem; }
.ras-c.is-off .ras-concept { color: var(--ink-3); }

/* prints: a taped concept label; the maths unfolds over the print on hover or tap */
.ras-tagwrap { position: relative; z-index: 2; display: flex; justify-content: center; margin: -1.6rem 0 0.7rem; }
.ras-tag {
  position: relative; padding: 0.45rem 0.95rem; border: 0; cursor: pointer; background: #FFFFFF; color: #141415;
  font-family: var(--f-display); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem); line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); transform: rotate(calc(var(--r, 0deg) * -1.6));
}
.ras-tag::before { content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; transform: translateX(-50%) rotate(-4deg); background: rgba(225, 223, 215, 0.75); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.ras-tag:focus-visible { outline: 2px solid var(--strong); outline-offset: 3px; }
.ras-tagwrap .ras-math {
  position: absolute; top: calc(100% + 0.5rem); left: 50%; width: min(100%, 22rem); margin: 0; display: grid; gap: 0.45rem; padding: 0.8rem 0.95rem;
  background: rgba(255, 255, 255, 0.97); text-align: left; transform: translateX(-50%) translateY(-6px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s linear 320ms; box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.6);
}
.ras-tagwrap .ras-math::before { display: none; }
.ras-math-eq { font-family: var(--f-display); font-style: italic; font-size: 1rem; line-height: 1.35; color: #141415; }
.ras-tagwrap .ras-why { font-family: var(--f-body); font-style: normal; font-size: 0.86rem; line-height: 1.4; color: #4A4A4F; }
.ras-tagwrap.is-open .ras-math { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .ras-c:hover .ras-detail { grid-template-rows: 1fr; opacity: 1; }
  .ras-c:hover .ras-concept::after { transform: rotate(45deg); }
  .ras-print:hover .ras-math { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
}
.ras-c:focus-within .ras-detail { grid-template-rows: 1fr; opacity: 1; }
.ras-tagwrap:focus-within .ras-math { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
@media (max-width: 900px) { .ras-tag { font-size: 0.9rem; padding: 0.35rem 0.6rem; } .ras-tagwrap { margin-top: -1.3rem; } }
@media (prefers-reduced-motion: reduce) { .ras-detail, .ras-tagwrap .ras-math { transition: none; } }
.ras-ledger { align-content: start; padding-top: 0.6rem; }

/* the curling leaf: a chain of hinged strips (js/notebook.js) */
.nb-leaf.is-curling > .nb-face { visibility: hidden; }
.nb-curl { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.nb-strip { position: absolute; top: 0; height: 100%; transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
.nb-sface { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--nb-paper) var(--grain); }
.nb-sface-b { transform: rotateY(180deg); background-color: var(--nb-paper-2); }
.nb-sface.is-empty { background-color: var(--nb-paper-2); }
.nb-slice-in { position: absolute; top: 0; left: 0; }
.nb-slice-in > .nb-page { box-shadow: none !important; border-radius: 0 !important; }
.nb-slice-in > .nb-page::after { display: none; }
.nb-sface::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #000; opacity: calc(var(--sh, 0) * 0.3); }
.nb-sface-f::before { /* a soft highlight where the curl catches the light */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22)); opacity: calc((1 - var(--sh, 0)) * var(--lift, 0));
}
.nb-book { perspective: 3600px; }
/* perspective lives on the strips' own container, so no 3D context has to survive the chain */
.nb-curl { perspective: 3600px; perspective-origin: 0 40%; transform-style: flat; }
.is-side .nb-curl { perspective-origin: 50% 40%; }
.nb-strip { transform-style: flat; }

/* right page as a collage: two or three taped prints, overlapping a little */
.nb-page .xp-b > :is(.xp-fig, .xp-code, .xp-sketch) ~ :is(.xp-fig, .xp-code, .xp-sketch) { display: block; }
.nb-page .xp-b:not([data-figs='1']) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: center; align-items: start; gap: 0; justify-items: stretch; }
.nb-page .xp-b:not([data-figs='1']) > :is(.xp-fig, .xp-code, .xp-sketch) { max-width: none; padding: 7px 7px 6px; }
.nb-page .xp-b:not([data-figs='1']) > :is(.xp-fig, .xp-code, .xp-sketch)::before { width: 62px; height: 18px; top: -9px; }
.nb-page .xp-b:not([data-figs='1']) img { max-height: calc(var(--page-h, 520px) * 0.36); }
.nb-page .xp-b:not([data-figs='1']) figcaption { font-size: 0.55rem; }
.nb-page .xp-b:not([data-figs='1']) .xp-code pre { max-height: calc(var(--page-h, 520px) * 0.36); font-size: 0.56rem; }
.nb-page .xp-b:not([data-figs='1']) .xp-sketch svg { max-height: calc(var(--page-h, 520px) * 0.3); }
/* two items */
.nb-page .xp-b[data-figs='2'] > :nth-child(1) { grid-column: 1 / 9; grid-row: 1; --r: -2deg; }
.nb-page .xp-b[data-figs='2'] > :nth-child(2) { grid-column: 6 / 13; grid-row: 1; margin-top: 30%; --r: 2.2deg; z-index: 2; }
/* three items */
.nb-page .xp-b[data-figs='3'] > :nth-child(1) { grid-column: 1 / 8; grid-row: 1; --r: -2.2deg; }
.nb-page .xp-b[data-figs='3'] > :nth-child(2) { grid-column: 7 / 13; grid-row: 1; margin-top: 8%; --r: 2deg; z-index: 2; }
.nb-page .xp-b[data-figs='3'] > :nth-child(3) { grid-column: 3 / 12; grid-row: 2; margin-top: -6%; --r: -0.8deg; z-index: 3; }
.nb-page .xp-b[data-figs='3'] img { max-height: calc(var(--page-h, 520px) * 0.3); }
.nb-page .xp-b:not([data-figs='1']) > .xp-note { grid-column: 4 / 13; grid-row: 3; justify-self: end; margin-top: 0.6rem; }
.nb-page .xp-b[data-figs='2'] > .xp-note { grid-row: 2; }
/* the reading view shows extra prints in a row */
.reading .xp-b { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.reading .xp-b > :is(.xp-fig, .xp-code, .xp-sketch) { flex: 1 1 260px; min-width: 0; }
.reading .xp-b > :not(.xp-fig, .xp-code, .xp-sketch) { flex-basis: 100%; }

/* backdrop: a breathing dot field behind everything (js/backdrop.js) */
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- Fluid simulation: live WebAssembly SPH (assets/fluid) ---------- */
.inv-fluid { padding-block: clamp(2rem, 5vw, 4rem); }
.fl-head { align-items: end; }
.fl-side { max-width: 26rem; justify-self: end; display: grid; gap: 0.9rem; }
.fl-lede { margin: 0; font-family: var(--f-head); color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }
.fl-side .ras-spec { text-align: left; }
.fl-plate { margin: 0; background: #0F2236; color: #F0F0F0; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-lift); }
.fl-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.95rem; border-bottom: 1px solid #2C3E50; font-size: 0.66rem; letter-spacing: 0.1em; color: #9FB2C4; }
.fl-bar .mono { font-size: inherit; }
.fl-seg { display: inline-flex; padding: 2px; border: 1px solid #3A5470; border-radius: 999px; }
.fl-seg button { font: 600 0.78rem/1 var(--f-head); color: #C9D6E2; background: none; border: 0; border-radius: 999px; padding: 0.5rem 1rem; min-height: 32px; cursor: pointer; touch-action: manipulation; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.fl-seg button:hover { color: #FFFFFF; }
.fl-seg button[aria-pressed='true'] { background: #F0F0F0; color: #0F2236; }
.fl-seg button:focus-visible, .fl-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.fl-frame { position: relative; height: clamp(300px, min(60vh, 46vw), 620px); background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 22px 22px; }
.fl-frame canvas, .fl-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fl-frame canvas[data-fluid-gl] { cursor: crosshair; outline: none; }
[data-mode='3d'] .fl-frame canvas[data-fluid-gl] { cursor: grab; }
.fl-frame canvas[data-fluid-gl]:focus-visible { box-shadow: inset 0 0 0 2px #FFFFFF; }
.fl-frame canvas[data-fluid-overlay] { pointer-events: none; }
.fl-poster { object-fit: cover; opacity: 0.85; transition: opacity var(--dur-reveal) var(--ease-out); filter: grayscale(1); }
.fl-plate:not(.is-static) canvas { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
.fl-plate.is-live canvas { opacity: 1; }
.fl-plate.is-live .fl-poster { opacity: 0; pointer-events: none; }
.fl-plate.is-static canvas { display: none; }
.fl-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; padding: 0.8rem 0.95rem; border-top: 1px solid #2C3E50; }
.fl-range { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.fl-range .mono, .fl-count .mono { font-size: 0.64rem; letter-spacing: 0.1em; color: #9FB2C4; }
.fl-range i { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: #F0F0F0; }
.fl-range input { width: clamp(80px, 9vw, 120px); accent-color: #F0F0F0; }
.fl-range output { min-width: 3.2ch; font-size: 0.72rem; color: #F0F0F0; font-variant-numeric: tabular-nums; }
.fl-count { margin: 0; display: inline-flex; align-items: baseline; gap: 0.6rem; }
.fl-n { font-family: var(--f-display); font-size: 1.6rem; line-height: 1; min-width: 2ch; font-variant-numeric: tabular-nums; }
[data-mode='3d'] .fl-2d { display: none; }
.fl-btns { display: inline-flex; gap: 0.4rem; margin-left: auto; }
.fl-btn { font: 600 0.78rem/1 var(--f-head); color: #F0F0F0; background: none; border: 1px solid #3A5470; border-radius: 999px; padding: 0.5rem 0.95rem; min-height: 34px; cursor: pointer; touch-action: manipulation; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.fl-btn:hover { border-color: #8A9DB0; background: #1B3A57; }
.fl-btn[aria-pressed='true'] { background: #F0F0F0; color: #0F2236; }
.fl-cap { margin: 0; padding: 0.6rem 0.95rem 0.75rem; border-top: 1px solid #2C3E50; font-size: 0.64rem; letter-spacing: 0.08em; color: #8A9DB0; }
.fl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: clamp(1rem, 2.5vw, 1.8rem); }
.fl-note { margin: 0; font-size: 1.6rem; color: var(--ink-2); transform: rotate(-1.2deg); }
.fl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
.fl-meta .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fl-tail { margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--ink-3); }
@media (max-width: 760px) {
  .fl-side { justify-self: start; }
  .fl-frame { height: min(68vh, 92vw); }
  .fl-btns { margin-left: 0; }
  .fl-fig { display: none; }
  .fl-range input { width: 96px; }
}

/* =====================================================================
   Palette: five blues and a neutral.
     #1B3A57  navy        plates (as a deep tint), strong text in light
     #2C3E50  slate       rules, panel edges
     #4A6E8D  steel       secondary fills, the accent in light mode
     #A4C8E1  sky         the accent in dark mode, live renders
     #F0F0F0  paper       page in light mode; text in dark mode
   Dark mode swaps the paper for black. Everything else is a tint of these.
   ===================================================================== */
:root {
  --bg: #000000;
  --bg-2: #0A1119;
  --surface: #0F1B27;
  --surface-2: #152536;
  --rule: #2C3E50;
  --ink: #F0F0F0;
  --ink-2: #A7B8C8;
  --ink-3: #6F8296;
  --strong: #F0F0F0;
  --pencil: #A4C8E1;
  --wash: rgba(164, 200, 225, 0.07);
  --nav-bg: rgba(0, 0, 0, 0.82);
  --plate: #0F2236;
  --plate-2: #1B3A57;
  --plate-rule: #2C3E50;
  --plate-ink: #F0F0F0;
  --plate-ink-2: #A7B8C8;
  --plate-blue: #A4C8E1;
  --deep-tint: #4A6E8D;
  --accent: #A4C8E1;        /* fills and strokes */
  --accent-ink: #A4C8E1;    /* accent as text: 12:1 on black */
  --on-accent: #0F2236;
  --img-filter: saturate(0.85);
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.6), 0 12px 28px -14px rgba(0, 0, 0, 0.95);
  --shadow-lift: 0 1px 0 rgba(164, 200, 225, 0.06) inset, 0 4px 10px rgba(0, 0, 0, 0.6), 0 36px 64px -26px rgba(0, 0, 0, 1);
}
[data-theme='light'] {
  --bg: #F0F0F0;
  --bg-2: #E6EAEE;
  --surface: #FAFAFA;
  --surface-2: #E4EAF0;
  --rule: #C9D3DD;
  --ink: #1B3A57;
  --ink-2: #2C3E50;
  --ink-3: #4A6E8D;
  --strong: #1B3A57;
  --pencil: #4A6E8D;
  --wash: rgba(27, 58, 87, 0.05);
  --nav-bg: rgba(240, 240, 240, 0.86);
  --deep-tint: #4A6E8D;
  --accent: #4A6E8D;
  --accent-ink: #4A6E8D;    /* 4.9:1 on #F0F0F0 */
  --on-accent: #F0F0F0;
  --img-filter: saturate(0.9);
}

/* the accent, used sparingly */
.mark-word { color: var(--accent); }
.ras-kicker, .ras-kicker span { color: var(--accent-ink); }
.ras-title em, .display-title em { color: var(--accent-ink); }
.sec-no { color: var(--accent-ink); }
.ras-n, .ras-c .ras-live { color: var(--accent-ink); }
.inv .ras-spec { color: var(--ink-3); }

/* live plates: always navy, sky accent, in both themes */
.ras-plate, .fl-plate { background: #0F2236; border-color: #2C3E50; color: #F0F0F0; }
.ras-modes button[aria-pressed='true'], .fl-seg button[aria-pressed='true'], .fl-btn[aria-pressed='true'] { background: #A4C8E1; color: #0F2236; }
.ras-modes button[aria-pressed='true'] .mono { color: rgba(15, 34, 54, 0.65); }
.ras-probe span { border-color: #A4C8E1; mix-blend-mode: normal; }
.ras-probe::before, .ras-probe::after { background: rgba(164, 200, 225, 0.4); }
.ras-tag::before { background: rgba(164, 200, 225, 0.3); }
.fl-range input { accent-color: #A4C8E1; }
.fl-n { color: #A4C8E1; }
.fl-poster { filter: none; }
.fl-frame { background-image: radial-gradient(rgba(164, 200, 225, 0.12) 1px, transparent 1px); }

/* handwriting is the accent pencil */
.hand, .paper-note, .qs-note, .fl-note { color: var(--accent-ink); }
.qs-eq { color: var(--ink); }

/* state and status */
.card-state .dot { background: var(--accent); }
.card-state.is-planned .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--deep-tint); }
.status[data-status='Working prototype'], .fluid-plate .status[data-status='Working prototype'] { color: var(--accent-ink); }
.status[data-status='In progress'] { color: var(--ink); }
.status[data-status='Planned'] { color: var(--ink-3); }

/* scratchbook paper in the palette */
.nb-shell { --nb-paper: #F0F0F0; --nb-paper-2: #E2E8EE; --nb-ink: #1B3A57; --nb-ink-2: #4A6E8D; --nb-rule: rgba(27, 58, 87, 0.14); --nb-pencil: #4A6E8D; }
[data-theme='light'] .nb-shell { --nb-paper: #FAFAFA; --nb-paper-2: #ECEFF2; }
.nb-page .xp-fig img { filter: saturate(0.85) contrast(1.03); }
.fl-plate .mono, .ras-plate .ras-cap { color: #9FB2C4; }
.fl-plate .fl-range output { color: #F0F0F0; }

/* ---------- opening title as an annotated figure (js/hero-title.js) ---------- */
.opening h1 { position: relative; }
.opening h1 .g { display: inline; }
.opening h1 .g-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.opening h1 .g.hatch {
  color: transparent; -webkit-text-stroke: 0.022em var(--accent);
  background: repeating-linear-gradient(-45deg, var(--accent) 0 0.035em, transparent 0.035em 0.1em);
  -webkit-background-clip: text; background-clip: text;
}
.anatomy { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.an-guide { stroke: var(--ink-3); stroke-width: 1; opacity: 0.7; }
.an-dim, .an-leader { stroke: var(--accent); stroke-width: 1; }
.an-arrowhead { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.an-dot { fill: var(--accent); }
.an-mark { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.an-label { font-family: var(--f-display); font-style: italic; font-weight: 420; font-size: var(--fs, 14px); letter-spacing: 0; fill: var(--accent-ink); }
.motion-ok .anatomy > * { opacity: 0; transition: opacity 500ms var(--ease-out) var(--d, 0ms); }
.motion-ok .is-annotated .anatomy > * { opacity: 1; }
.motion-ok .is-annotated .anatomy .an-guide { opacity: 0.7; }
.motion-ok .anatomy line { stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 1100ms var(--ease-out) calc(var(--d, 0ms) + 500ms), opacity 300ms var(--ease-out) calc(var(--d, 0ms) + 500ms); }
.motion-ok .is-annotated .anatomy line { stroke-dashoffset: 0; }
.motion-ok .anatomy .an-dim { stroke-dasharray: none; stroke-dashoffset: 0; }
.opening h1.is-annotated { margin-top: 0.45em; margin-bottom: 0.75em; }
@media (max-width: 760px) { .opening h1.is-annotated { margin-top: 0; margin-bottom: 0.3em; } }