/* Concept v2 — the "This Is Vinci" booklet, brought to the screen.
   Read from the booklet PDF (Part Four) and its spreads: tall Overpass Mono display caps in white,
   Crimson body on warm paper, and the thermal spectrum as a FULL-BLEED field (violet → magenta → gold)
   used as a page surface, not an accent. Etching-style line art in gold on the gradient. Chapters
   alternate: gradient plate → paper spread. Chrome stays neutral; colour is the physics. */

:root[data-theme='booklet'] {
  --bg: #F6F2EA;           /* warm paper, from the booklet spreads */
  --bg-2: #EFEAE0;
  --bg-3: #E8E2D6;
  --panel: #FBF9F4;
  --panel-2: #F1EDE4;
  --line: rgba(20, 10, 30, .12);
  --line-2: rgba(20, 10, 30, .22);
  --ink: #1B1024;          /* aubergine-black, warmer than pure black against the gradient */
  --ink-2: #4A3F52;
  --muted: #7C7284;
  --faint: #A79FAE;
  /* the booklet field: sampled from the PDF spreads (#6b0a95 → #7a004c → #cc073c → #e5232e) then
     pulled toward the supplied brand values Cool #5C08FD · Ambient #ED1379 · Hot #FFC63A */
  --field: linear-gradient(160deg, #3B06B8 0%, #5C08FD 18%, #8A0AAE 38%, #C40E66 56%, #ED1379 68%, #F0552F 84%, #FFC63A 100%);
  --field-flat: linear-gradient(180deg, #5C08FD 0%, #ED1379 55%, #FFC63A 100%);
  /* canvas theme read by lib/scene.js: plates read as printed glass on paper */
  --plate-hi: 236 230 220; --plate-lo: 205 198 186; --plate-edge: 90 70 100;
  --field-mode: multiply; --field-alpha: .95; --field-gamma: 1.4;
  --plate-alpha: .55; --plate-alpha-depth: .16; --plate-edge-alpha: .32; --shadow-rgb: 80 60 90;
}

/* ---- global re-tone ---- */
:root[data-theme='booklet'] body { background: var(--bg); color: var(--ink); }
:root[data-theme='booklet'] ::selection { background: var(--ink); color: #fff; }
:root[data-theme='booklet'] .eyebrow { color: var(--ink-2); }
:root[data-theme='booklet'] .eyebrow .dot { background: #ED1379; box-shadow: none; }
:root[data-theme='booklet'] .lede { color: var(--ink-2); }
:root[data-theme='booklet'] .period { color: #ED1379; }
:root[data-theme='booklet'] .q { color: var(--ink); }
:root[data-theme='booklet'] .status { border-color: var(--line-2); color: var(--ink-2); }
:root[data-theme='booklet'] .status.live { color: var(--ink); border-color: rgba(237, 19, 121, .55); }
:root[data-theme='booklet'] .status.live::before { background: #ED1379; box-shadow: none; }

/* buttons: booklet = ink on paper, paper on ink */
:root[data-theme='booklet'] .btn { border-color: var(--line-2); color: var(--ink); border-radius: 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
:root[data-theme='booklet'] .btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
:root[data-theme='booklet'] .btn.primary:hover { background: #ED1379; border-color: #ED1379; }
:root[data-theme='booklet'] .btn.ghost:hover { border-color: var(--ink); background: transparent; }

/* nav */
:root[data-theme='booklet'] .nav { background: rgba(246, 242, 234, .82); border-bottom-color: var(--line); }
:root[data-theme='booklet'] .wordmark img { content: url('../brand/vinci-black.png'); }
:root[data-theme='booklet'] .nav-links { color: var(--ink-2); font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
:root[data-theme='booklet'] .concept-tag { color: var(--muted); border-color: var(--line-2); border-radius: 0; }

/* ---- HERO: a booklet plate. Full-bleed field, tall mono caps in white, an etching in gold. ---- */
:root[data-theme='booklet'] .hero {
  max-width: none; margin: 0; padding: clamp(84px, 11vw, 160px) var(--gutter) clamp(72px, 9vw, 130px);
  background: var(--field); color: #fff; text-align: left; position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(24px, 4vw, 72px); align-items: center;
}
:root[data-theme='booklet'] .hero::before {
  /* paper grain over the field, like the printed spreads */
  inset: 0; height: auto; filter: none; opacity: .22; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode: soft-light;
}
:root[data-theme='booklet'] .hero > * { position: relative; }
:root[data-theme='booklet'] .hero .eyebrow { justify-content: start; color: rgba(255, 255, 255, .78); }
:root[data-theme='booklet'] .hero .eyebrow .dot { background: #fff; }
:root[data-theme='booklet'] .hero h1 {
  grid-column: 1; margin: 22px 0 0; max-width: none;
  font-family: var(--mono); font-weight: 500; text-transform: uppercase;
  font-size: clamp(56px, 8.4vw, 132px); line-height: .92; letter-spacing: -.01em;
}
:root[data-theme='booklet'] .hero h1 .line { display: block; }
:root[data-theme='booklet'] .line-inverter { justify-content: start; }
:root[data-theme='booklet'] .inverter { justify-items: start; }
:root[data-theme='booklet'] .inverter .noun { background: none; -webkit-text-fill-color: #fff; color: #fff; white-space: nowrap; }
:root[data-theme='booklet'] .hero-sub { grid-column: 1; margin: 34px 0 0; max-width: 54ch; color: rgba(255, 255, 255, .92); font-size: clamp(18px, 1.55vw, 23px); }
:root[data-theme='booklet'] .hero-ctas { grid-column: 1; justify-content: start; }
:root[data-theme='booklet'] .hero .btn { color: #fff; border-color: rgba(255, 255, 255, .55); }
:root[data-theme='booklet'] .hero .btn.primary { background: #fff; color: var(--ink); border-color: #fff; }
:root[data-theme='booklet'] .hero .btn.primary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
:root[data-theme='booklet'] .hero-etch { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: center; justify-self: end; width: 100%; max-width: 640px; }
:root[data-theme='booklet'] .hero-etch img { width: 100%; height: auto; }
:root[data-theme='booklet'] .hero .eyebrow, :root[data-theme='booklet'] .hero h1, :root[data-theme='booklet'] .hero-sub, :root[data-theme='booklet'] .hero-ctas { grid-column: 1; }

/* ---- PRODUCT FRAME: printed instrument on paper ---- */
:root[data-theme='booklet'] .product { padding-top: clamp(56px, 7vw, 96px); }
:root[data-theme='booklet'] .usecases { border-color: var(--line-2); background: var(--panel); border-radius: 0; }
:root[data-theme='booklet'] .usecase { border-radius: 0; color: var(--ink-2); }
:root[data-theme='booklet'] .usecase b { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
:root[data-theme='booklet'] .usecase[aria-selected='true'] { background: var(--ink); color: #fff; }
:root[data-theme='booklet'] .usecase[aria-selected='true'] small { color: rgba(255, 255, 255, .6); }
:root[data-theme='booklet'] .usecase[aria-selected='true'] .status { color: rgba(255, 255, 255, .85); }
:root[data-theme='booklet'] .usecase-tip { color: var(--muted); }
:root[data-theme='booklet'] .frame { border-color: var(--ink); border-radius: 0; background: var(--panel); box-shadow: 0 30px 80px rgba(60, 20, 80, .12); }
:root[data-theme='booklet'] .frame::before { display: none; }
:root[data-theme='booklet'] .rail { background: var(--bg-2); border-right-color: var(--line); }
:root[data-theme='booklet'] .rail-mark img { content: url('../brand/vinci-black.png'); }
:root[data-theme='booklet'] .rail-seg { border-color: var(--line-2); }
:root[data-theme='booklet'] .rail-seg .on, :root[data-theme='booklet'] .rail-nav li.on, :root[data-theme='booklet'] .rail-recents button.on { background: var(--panel); color: var(--ink); }
:root[data-theme='booklet'] .rail-recents button.on i { background: #ED1379; box-shadow: none; }
:root[data-theme='booklet'] .chat { background: var(--panel); border-right-color: var(--line); }
:root[data-theme='booklet'] .chat-head { border-bottom-color: var(--line); color: var(--ink-2); font-family: var(--mono); }
:root[data-theme='booklet'] .msg.user { background: var(--ink); color: #fff; border-color: var(--ink); border-radius: 0; font-family: var(--serif); font-size: 15px; }
:root[data-theme='booklet'] .msg.vinci { color: var(--ink-2); font-family: var(--serif); font-size: 15px; }
:root[data-theme='booklet'] .msg.vinci b, :root[data-theme='booklet'] .msg.vinci .num { color: var(--ink); }
:root[data-theme='booklet'] .msg.vinci .who i { background: #ED1379; }
:root[data-theme='booklet'] .msg.vinci .verdict { border-color: var(--ink); color: var(--ink); border-radius: 0; font-family: var(--mono); }
:root[data-theme='booklet'] .msg.vinci .verdict.pass i { background: #2F9E5B; }
:root[data-theme='booklet'] .msg .tool { color: var(--muted); }
:root[data-theme='booklet'] .composer { border-top-color: var(--line); }
:root[data-theme='booklet'] .composer-box { background: #fff; border-color: var(--line-2); border-radius: 0; color: var(--ink); font-family: var(--serif); font-size: 15px; }
:root[data-theme='booklet'] .composer-box .caret { background: var(--ink); }
:root[data-theme='booklet'] .composer-tools .send { background: var(--ink); color: #fff; }
:root[data-theme='booklet'] .stage { background: var(--bg-2); }
:root[data-theme='booklet'] .stage-head { border-bottom-color: var(--line); color: var(--ink-2); font-family: var(--mono); }
:root[data-theme='booklet'] .stage-tab { border-color: var(--line-2); background: var(--panel); border-radius: 0; }
:root[data-theme='booklet'] .tabdot { background: #5C08FD; }
:root[data-theme='booklet'] .object-readout { color: var(--ink-2); }
:root[data-theme='booklet'] .object-readout b { color: var(--ink); font-family: var(--mono); }
:root[data-theme='booklet'] .object-hint { color: var(--faint); }
:root[data-theme='booklet'] .evidence { border-top-color: var(--line); }
:root[data-theme='booklet'] .ev-row { color: var(--ink-2); }
:root[data-theme='booklet'] .ev-row b { color: var(--ink); }
:root[data-theme='booklet'] .ev-bar { background: var(--panel-2); border-radius: 0; }
:root[data-theme='booklet'] .ev-bar i { background: var(--field-flat); background: linear-gradient(90deg, #5C08FD, #ED1379, #FFC63A); }
:root[data-theme='booklet'] .sweep-axis .track { background: var(--line-2); }
:root[data-theme='booklet'] .sweep-axis .pt { background: var(--panel); border-color: var(--line-2); }
:root[data-theme='booklet'] .sweep-axis .pt.on { background: var(--ink); border-color: var(--ink); }
:root[data-theme='booklet'] .sweep-axis .pt.on i { background: #fff; }
:root[data-theme='booklet'] .sweep-axis .pt.pass i { background: #2F9E5B; }
:root[data-theme='booklet'] .sweep-axis .pt.fail i { background: #ED1379; }
:root[data-theme='booklet'] .sweep-legend b { color: var(--ink); }
:root[data-theme='booklet'] .playbar { background: var(--bg-2); border-top-color: var(--line); }
:root[data-theme='booklet'] .pb { border-color: var(--line-2); color: var(--ink-2); border-radius: 0; }
:root[data-theme='booklet'] .steps li .bar { background: var(--panel-2); }
:root[data-theme='booklet'] .steps li .bar i { background: var(--ink); }
:root[data-theme='booklet'] .steps li.on button { color: var(--ink); }
:root[data-theme='booklet'] .frame-caption { color: var(--muted); font-family: var(--serif); font-size: 13.5px; }

/* ---- strip, shift, caps ---- */
:root[data-theme='booklet'] .strip { border-color: var(--line-2); }
:root[data-theme='booklet'] .strip p { color: var(--ink-2); }
:root[data-theme='booklet'] .strip b { color: var(--ink); }
:root[data-theme='booklet'] .link { color: var(--ink); border-bottom-color: var(--ink); font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }

/* section titles: booklet chapter style = tall mono caps */
:root[data-theme='booklet'] .section h2 { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: -.005em; line-height: .96; font-size: clamp(34px, 4.6vw, 72px); }
:root[data-theme='booklet'] .section h3 { font-family: var(--serif); font-size: 24px; letter-spacing: -.01em; }
:root[data-theme='booklet'] .section p:not(.eyebrow):not(.q):not(.lede):not(.big):not(.mid):not(.ledger-label):not(.downstream-list):not(.hero-sub) { font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* "dark" chapters become gradient plates, like the booklet's part openers */
:root[data-theme='booklet'] .section.dark { background: var(--field); color: #fff; border-color: transparent; position: relative; }
:root[data-theme='booklet'] .section.dark .eyebrow, :root[data-theme='booklet'] .section.dark .lede, :root[data-theme='booklet'] .section.dark p, :root[data-theme='booklet'] .section.dark .icp-role, :root[data-theme='booklet'] .section.dark .how-steps li .n, :root[data-theme='booklet'] .section.dark .demo-kind, :root[data-theme='booklet'] .section.dark .demo-card p { color: rgba(255, 255, 255, .86); }
:root[data-theme='booklet'] .section.dark .q, :root[data-theme='booklet'] .section.dark h2, :root[data-theme='booklet'] .section.dark h3 { color: #fff; }
:root[data-theme='booklet'] .icp-grid { border-top-color: rgba(255, 255, 255, .45); }
:root[data-theme='booklet'] .how-steps { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .45); border-radius: 0; }
:root[data-theme='booklet'] .how-steps li { background: rgba(20, 5, 40, .28); }
:root[data-theme='booklet'] .how-steps li.on { background: rgba(20, 5, 40, .5); }
:root[data-theme='booklet'] .how-steps li.on .n { color: #FFC63A; }
:root[data-theme='booklet'] .how-steps li::after { background: #fff; }
:root[data-theme='booklet'] .demo-card { background: rgba(20, 5, 40, .35); border-color: rgba(255, 255, 255, .4); border-radius: 0; }
:root[data-theme='booklet'] .demo-card::before { opacity: 0; }
:root[data-theme='booklet'] .demo-card h3 { color: #fff; }
:root[data-theme='booklet'] .demo-cta { color: #FFC63A; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }

:root[data-theme='booklet'] .shift-answer h3 { font-family: var(--serif); font-style: italic; }
:root[data-theme='booklet'] .cadence { background: var(--panel); border-color: var(--line-2); border-radius: 0; }
:root[data-theme='booklet'] .cadence-track { background: var(--panel-2); border-radius: 0; }
:root[data-theme='booklet'] .cadence-track .tick { background: var(--faint); }
:root[data-theme='booklet'] .cadence-note { color: var(--ink); mix-blend-mode: normal; }
:root[data-theme='booklet'] .cadence-row.is-vinci .cadence-note { color: #fff; }
:root[data-theme='booklet'] .cadence-label, :root[data-theme='booklet'] .cadence-axis { color: var(--muted); }
:root[data-theme='booklet'] .caps-grid { background: var(--line-2); border-color: var(--ink); border-radius: 0; }
:root[data-theme='booklet'] .cap { background: var(--panel); }
:root[data-theme='booklet'] .cap.is-next, :root[data-theme='booklet'] .cap.is-later { background: var(--bg-2); }
:root[data-theme='booklet'] .cap.is-next h3, :root[data-theme='booklet'] .cap.is-later h3, :root[data-theme='booklet'] .cap.is-next .q, :root[data-theme='booklet'] .cap.is-later .q { color: var(--muted); }
:root[data-theme='booklet'] .cap-try { color: var(--ink); border-bottom-color: var(--ink); font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }

/* proof: the booklet's "Numbers to be proud of" */
:root[data-theme='booklet'] .ledger { border-color: var(--ink); }
:root[data-theme='booklet'] .ledger-major { border-right-color: var(--line-2); }
:root[data-theme='booklet'] .ledger-label { color: var(--ink-2); }
:root[data-theme='booklet'] .ledger-label span { color: var(--muted); }
:root[data-theme='booklet'] .big { font-family: var(--mono); font-weight: 500; letter-spacing: -.04em; font-size: clamp(96px, 12vw, 196px); line-height: 1; background: linear-gradient(92deg, #5C08FD, #ED1379 50%, #FFC63A); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme='booklet'] .big small { font-family: var(--serif); }
:root[data-theme='booklet'] .ledger-desc { color: var(--ink); }
:root[data-theme='booklet'] .conditions { border-top-color: var(--line-2); }
:root[data-theme='booklet'] .conditions strong { font-family: var(--mono); font-weight: 500; }
:root[data-theme='booklet'] .conditions span { color: var(--muted); }
:root[data-theme='booklet'] .ledger-side article + article { border-top-color: var(--line); }
:root[data-theme='booklet'] .mid { font-family: var(--mono); font-weight: 500; letter-spacing: -.03em; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.15; color: var(--ink); }
:root[data-theme='booklet'] .mid em { font-family: var(--serif); }
:root[data-theme='booklet'] .mid i { color: var(--muted); }
:root[data-theme='booklet'] .quote p { color: var(--ink); }
:root[data-theme='booklet'] .quote footer { color: var(--muted); }

/* where: physical stack */
:root[data-theme='booklet'] .stack-line { border-top-color: var(--ink); }
:root[data-theme='booklet'] .stack-line li::before { background: var(--faint); }
:root[data-theme='booklet'] .stack-line li.is-now::before { background: #ED1379; box-shadow: none; }
:root[data-theme='booklet'] .stack-line span { color: var(--muted); }
:root[data-theme='booklet'] .stack-line strong { font-family: var(--mono); font-weight: 500; text-transform: uppercase; }
:root[data-theme='booklet'] .stack-line li.is-next strong { color: var(--muted); }
:root[data-theme='booklet'] .downstream { border-top-color: var(--line); }
:root[data-theme='booklet'] .downstream-list { color: var(--ink-2); }
:root[data-theme='booklet'] .downstream-list em { color: var(--ink); }

/* cta + footer */
:root[data-theme='booklet'] .cta h2 { font-size: clamp(40px, 6vw, 96px); }
:root[data-theme='booklet'] .foot { border-top-color: var(--ink); }
:root[data-theme='booklet'] .foot-brand img { content: url('../brand/vinci-black.png'); }
:root[data-theme='booklet'] .foot-brand p, :root[data-theme='booklet'] .foot-links { color: var(--ink-2); }
:root[data-theme='booklet'] .foot-note { color: var(--muted); }

@media (max-width: 980px) {
  :root[data-theme='booklet'] .hero { grid-template-columns: 1fr; }
  :root[data-theme='booklet'] .hero-etch { grid-column: 1; grid-row: auto; max-width: 420px; justify-self: start; }
  :root[data-theme='booklet'] .hero h1 { font-size: clamp(44px, 12vw, 88px); }
}