/* Home page book view — a technical operating manual.
   Loaded only by index.html. The classic view remains the no-JavaScript fallback. */

:root { --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }

/* ── VIEWS ── */
.book-view { display: none; }
html.js[data-view="book"] .book-view { display: block; }
html.js[data-view="book"] .classic-view { display: none; }
html.js[data-view="book"] .footer { display: none; }
html.js[data-view="book"] .scroll-top { display: none; }
html.js[data-view="book"] body { overflow: hidden; overscroll-behavior: none; }
html.js[data-view="book"] { overscroll-behavior: none; }
html.js[data-view="classic"] .book-view { display: none; }

/* ── VIEW SWITCH ── */
.view-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--color-divider); border-radius: 999px; background: color-mix(in srgb, var(--color-surface) 72%, transparent); }
.view-switch__btn { padding: 0.42rem 0.72rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); transition: background-color 200ms ease, color 200ms ease; }
.view-switch__btn:hover { color: var(--color-text); }
.view-switch__btn[data-view-set="book"].is-active,
html[data-view="book"] .view-switch__btn[data-view-set="book"] { background: var(--color-text); color: var(--color-bg); }
html[data-view="classic"] .view-switch__btn[data-view-set="book"] { background: transparent; color: var(--color-text-muted); }
html[data-view="classic"] .view-switch__btn[data-view-set="classic"] { background: var(--color-text); color: var(--color-bg); }
.view-switch__btn.is-active { background: var(--color-text); color: var(--color-bg); }
.view-switch__btn--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  text-decoration: none;
}
html[data-view="classic"] .view-switch__btn.is-active:not([data-view-set="classic"]) { background: transparent; color: var(--color-text-muted); }
.view-quick { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--color-text-muted); }
.view-quick:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.nav__mobile-view { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--color-divider); }
.nav__mobile-view-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
@media (max-width: 1023px) { .nav__right .view-switch { display: none; } .view-quick { display: flex; } }
@media (min-width: 1024px) and (max-width: 1199px) { .nav__cta { display: none; } }
@media (max-width: 380px) { .nav__right { gap: 8px; } }

/* ── NAV IN BOOK VIEW ── */
html.js[data-view="book"] .nav--home,
html.js[data-view="book"] .nav--home.is-scrolled,
html.js[data-view="book"] .nav--home.nav-open { background: #0b141c; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.js[data-view="book"] .nav--home .nav__logo-name { color: #e7eef3; }
html.js[data-view="book"] .nav--home .nav__logo-mark rect { stroke: rgba(231, 238, 243, 0.18); stroke-width: 1; }
html.js[data-view="book"] .nav--home .nav__links a { color: #8b9daa; }
html.js[data-view="book"] .nav--home .nav__links a:hover,
html.js[data-view="book"] .nav--home .nav__links a[aria-current="page"] { color: #e7eef3; }
html.js[data-view="book"] .nav--home .nav__links a::after { background: #d9a15c; }
html.js[data-view="book"] .nav--home .theme-toggle,
html.js[data-view="book"] .nav--home .nav__hamburger,
html.js[data-view="book"] .nav--home .view-quick { color: #8b9daa; }
html.js[data-view="book"] .nav--home .theme-toggle:hover,
html.js[data-view="book"] .nav--home .nav__hamburger:hover,
html.js[data-view="book"] .nav--home .view-quick:hover { color: #e7eef3; background: rgba(231, 238, 243, 0.07); }
html.js[data-view="book"] .nav--home .nav__cta { background: #123a56; color: #eaf2f6; }
html.js[data-view="book"] .nav--home .nav__cta:hover { background: #17507a; }
html.js[data-view="book"] .nav--home .view-switch { border-color: rgba(154, 180, 196, 0.26); background: rgba(231, 238, 243, 0.04); }
html.js[data-view="book"] .nav--home .view-switch__btn { color: #8b9daa; }
html.js[data-view="book"] .nav--home .view-switch__btn:hover { color: #e7eef3; }
html.js[data-view="book"] .nav--home .view-switch__btn.is-active,
html.js[data-view="book"] .nav--home .view-switch__btn[data-view-set="book"] { background: #e7eef3; color: #0b141c; }
html.js[data-view="book"] .nav--home .nav__mobile { background: #0b141c; border-top-color: rgba(154, 180, 196, 0.18); }
html.js[data-view="book"] .nav--home .nav__mobile-links a { color: #8b9daa; border-bottom-color: rgba(154, 180, 196, 0.18); }
html.js[data-view="book"] .nav--home .nav__mobile-links a:hover { color: #e7eef3; }
html.js[data-view="book"] .nav--home .nav__mobile-view { border-bottom-color: rgba(154, 180, 196, 0.18); }
html.js[data-view="book"] .nav--home .nav__mobile-view-label { color: #8b9daa; }
html.js[data-view="book"] .nav--home .view-switch--menu .view-switch__btn.is-active { background: #e7eef3; color: #0b141c; }

/* ── STAGE ── */
.book-view {
  --nav-h: clamp(56px, 7vw, 68px);
  --page-w: 460px;
  --page-h: 640px;
  --shift: 0.5;
  --t-turn: 480ms;
  --t-open: 760ms;
  --ease-turn: cubic-bezier(0.22, 0.8, 0.24, 1);
  position: fixed;
  inset: var(--nav-h) 0 0;
  overflow: hidden;
  background: #070c11;
  color-scheme: dark;
}
.book-stage {
  --stage-bg: #0a1118;
  --stage-bg-deep: #05090d;
  --stage-text: #e7eef3;
  --stage-muted: #8b9daa;
  --stage-line: rgba(154, 180, 196, 0.14);
  --stage-line-strong: rgba(154, 180, 196, 0.28);
  --stage-accent: #d9a15c;
  --paper: #f2f5f6;
  --paper-deep: #e6ecef;
  --ink: #13222c;
  --ink-soft: #3b4c58;
  --ink-muted: #5c6b76;
  --rule: rgba(19, 45, 60, 0.17);
  --rule-soft: rgba(19, 45, 60, 0.08);
  --navy: #123a56;
  --navy-deep: #0b263b;
  --teal: #0d6b76;
  --teal-deep: #09545d;
  --accent: #965c1b;
  --accent-soft: #b57a35;
  --cover-text: #eaf2f6;
  --cover-muted: rgba(211, 228, 238, 0.66);
  --cover-accent: #8fd0d8;
  position: relative;
  display: grid;
  grid-template-areas: "bar" "scene" "controls";
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(2px, 0.8vh, 8px);
  height: 100%;
  padding: clamp(6px, 1.3vh, 14px) clamp(14px, 3vw, 44px) clamp(6px, 1.4vh, 14px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 620px at 50% 33%, rgba(47, 85, 106, 0.38), transparent 68%),
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(150, 185, 205, 0.045) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(150, 185, 205, 0.045) 63px 64px),
    linear-gradient(180deg, #0b141c 0%, var(--stage-bg) 52%, var(--stage-bg-deep) 100%);
  color: var(--stage-text);
}
.book-stage__ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.book-stage__ambient::before { content: ""; position: absolute; left: 50%; top: 44%; width: min(92vw, 1180px); height: min(68vh, 740px); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(118, 171, 196, 0.16), rgba(68, 110, 135, 0.05) 58%, transparent 100%); }
.book-stage__ambient::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 105% at 50% 46%, transparent 42%, rgba(2, 6, 9, 0.55) 100%); }
.book-stage__hairline { position: absolute; left: clamp(14px, 4vw, 56px); right: clamp(14px, 4vw, 56px); bottom: clamp(58px, 8.4vh, 78px); height: 1px; background: linear-gradient(90deg, transparent, var(--stage-line-strong) 14%, var(--stage-line-strong) 86%, transparent); opacity: 0.8; }
.book-stage__hairline::before, .book-stage__hairline::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--stage-line-strong); }
.book-stage__hairline::before { left: 14%; }
.book-stage__hairline::after { right: 14%; }
.book-stage__contact { position: absolute; left: 50%; top: 50%; width: min(62vw, 800px); height: 86px; transform: translate(-50%, calc(var(--page-h) * 0.5 + 16px)); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.2) 58%, transparent 78%); transition: transform 760ms var(--ease-turn), width 760ms var(--ease-turn); }
.book-view[data-phase="reading"] .book-stage__contact { width: min(72vw, 940px); transform: translate(-50%, calc(var(--page-h) * 0.5 + 22px)); }

/* ── BAR ── */
.book-bar { position: relative; z-index: 4; grid-area: bar; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: clamp(5px, 1vh, 9px); border-bottom: 1px solid var(--stage-line); font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.11em; text-transform: uppercase; }
.book-bar__kicker, .book-bar__loc, .book-bar__hint { margin: 0; max-width: none; }
.book-bar__kicker { grid-column: 1; justify-self: start; color: var(--stage-text); white-space: nowrap; }
.book-bar__kicker::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; vertical-align: 1px; background: var(--stage-accent); }
.book-bar__kicker span { color: var(--stage-muted); }
.book-bar__loc { grid-column: 3; justify-self: end; color: var(--stage-muted); text-align: right; white-space: nowrap; }
.book-bar__loc span { color: rgba(139, 157, 170, 0.62); }
.book-bar__hint { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; gap: 7px; color: var(--stage-muted); }
.book-bar__hint svg { color: var(--stage-accent); animation: hintNudge 2.8s ease-in-out infinite; }
.book-view[data-phase="reading"] .book-bar__hint svg,
.book-view[data-phase="opening"] .book-bar__hint svg,
.book-view[data-phase="closing"] .book-bar__hint svg { display: none; }
.book-view[data-phase="reading"] .book-bar__hint { color: rgba(200, 217, 227, 0.52); letter-spacing: 0.09em; }
@keyframes hintNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ── CONTROLS ── */
.book-controls { position: relative; z-index: 4; grid-area: controls; min-height: clamp(54px, 8vh, 68px); display: grid; place-items: center; padding-top: clamp(4px, 0.8vh, 8px); border-top: 1px solid var(--stage-line); }
.book-open, .book-hud { grid-area: 1 / 1; align-self: center; justify-self: center; }
.book-open { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 0 24px; border: 1px solid rgba(196, 219, 232, 0.3); border-radius: 2px; background: rgba(10, 20, 28, 0.5); color: var(--stage-text); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, visibility 0ms linear 180ms; }
.book-open::before { content: ""; width: 5px; height: 5px; background: var(--stage-accent); transition: background-color 180ms ease; }
.book-open:hover { border-color: rgba(217, 161, 92, 0.72); background: rgba(217, 161, 92, 0.08); color: #fff8ed; }
.book-open svg { transition: transform 220ms var(--ease-turn); }
.book-open:hover svg { transform: translateX(3px); }
.book-view[data-phase="opening"] .book-open,
.book-view[data-phase="reading"] .book-open,
.book-view[data-phase="closing"] .book-open { opacity: 0; visibility: hidden; pointer-events: none; }
.book-hud { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 14px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 0ms linear 220ms; }
.book-view[data-phase="reading"] .book-hud { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 260ms ease, visibility 0ms; }
.book-hud__arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--stage-line-strong); border-radius: 2px; background: transparent; color: var(--stage-text); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; }
.book-hud__arrow:hover:not(:disabled) { border-color: var(--stage-accent); background: rgba(217, 161, 92, 0.08); color: #fff7ea; }
.book-hud__arrow:disabled { opacity: 0.26; cursor: default; }
.book-hud__mid { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 190px; }
.book-dots { display: flex; align-items: center; justify-content: center; gap: 3px; }
.book-dot { width: 17px; height: 44px; margin-block: -10px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.book-dot::before { content: ""; width: 100%; height: 2px; background: rgba(183, 206, 220, 0.24); transition: background-color 160ms ease, height 160ms ease; }
.book-dot:hover::before { background: rgba(183, 206, 220, 0.6); }
.book-dot.is-active::before { height: 3px; background: var(--stage-accent); }
.book-hud__label { display: flex; align-items: baseline; gap: 9px; margin: 0; max-width: none; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.3; letter-spacing: 0.13em; text-transform: uppercase; }
.book-hud__count { color: var(--stage-accent); font-variant-numeric: tabular-nums; }
.book-hud__name { color: var(--stage-muted); }

/* ── SCENE AND CAMERA ── */
.book-scene { position: relative; z-index: 2; grid-area: scene; min-height: 0; display: grid; place-items: center; perspective: 2800px; perspective-origin: 50% 44%; touch-action: pinch-zoom; }
.book-camera { position: relative; z-index: 1; width: calc(var(--page-w) * 2); height: var(--page-h); transform-style: preserve-3d; transform: translate3d(0, 4vh, -900px) rotateX(7deg) scale(0.65); will-change: transform; }

/* ── BOOK WRAPPER ── */
.book { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: translate3d(calc(var(--shift) * var(--page-w) * -1), 0, 0); transition: transform var(--t-open) var(--ease-turn); cursor: default; -webkit-user-select: none; user-select: none; }
.book img { -webkit-user-drag: none; user-drag: none; }
.book-view[data-phase="reading"] .book { cursor: grab; }
.book-view.is-dragging .book { cursor: grabbing; }
.book__base { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; transform-style: preserve-3d; opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0ms linear 240ms; }
.book.is-open .book__base { opacity: 1; visibility: visible; transition: opacity 300ms ease 60ms, visibility 0ms; }
.base-endpaper { background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(24, 62, 84, 0.035) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(24, 62, 84, 0.035) 31px 32px), linear-gradient(90deg, #e4eaee, #eef2f4 24%, #e9eef1 82%, #dfe6ea); box-shadow: inset -22px 0 32px -30px rgba(8, 20, 28, 0.5); display: flex; align-items: center; justify-content: center; }
.endpaper-mark { font-family: var(--font-mono); font-size: clamp(3.5rem, 13cqw, 7rem); font-weight: 500; color: rgba(19, 45, 60, 0.07); letter-spacing: 0.02em; line-height: 1; }
.page.back-cover { padding: clamp(22px, 5.6cqw, 38px); background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(160, 200, 220, 0.045) 47px 48px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(160, 200, 220, 0.045) 47px 48px), radial-gradient(100% 70% at 50% 30%, rgba(83, 137, 161, 0.15), transparent 62%), linear-gradient(152deg, #10212e 0%, #0b1824 48%, #060f17 100%); color: var(--cover-text); align-items: center; justify-content: center; text-align: center; box-shadow: inset 16px 0 30px -26px rgba(0, 0, 0, 0.7); --tick: rgba(190, 220, 235, 0.2); }
.back-cover__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(9px, 2.2cqw, 15px); width: 100%; max-width: 400px; padding: clamp(14px, 3.6cqw, 24px); }
.back-cover__mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(190, 220, 235, 0.32); border-radius: 2px; font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--cover-text); }
.back-cover__eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cover-accent); margin: 0; max-width: none; }
.back-cover__title { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.65rem, 6.2cqw, 2.4rem); line-height: 1.05; letter-spacing: -0.035em; color: #f2f7fa; margin: 0; text-wrap: balance; }
.back-cover__copy { margin: 0; max-width: none; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cover-muted); }
.back-cover__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin-top: 3px; }
.back-cover__colophon { margin: clamp(8px, 2.4cqw, 18px) 0 0; padding-top: 9px; width: 100%; max-width: none; border-top: 1px solid rgba(190, 220, 235, 0.16); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(211, 228, 238, 0.44); }
.book__gutter { position: absolute; left: 50%; top: 0; bottom: 0; width: 4.5%; transform: translateX(-50%); z-index: 860; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(5, 12, 18, 0) 0%, rgba(5, 12, 18, 0.12) 32%, rgba(5, 12, 18, 0.3) 50%, rgba(5, 12, 18, 0.12) 68%, rgba(5, 12, 18, 0) 100%); transition: opacity 300ms ease; }
.book.is-open .book__gutter { opacity: 1; }
.book__edge { position: absolute; top: 3px; bottom: 3px; right: -4px; width: 5px; z-index: 20; border-radius: 0 2px 2px 0; background: repeating-linear-gradient(180deg, #f2f5f6 0 2px, #c8d3d9 2px 3px, #eaf0f2 3px 5px); box-shadow: 1px 0 2px rgba(3, 9, 13, 0.4); pointer-events: none; }
.book.is-open .book__edge { right: auto; left: -4px; border-radius: 2px 0 0 2px; box-shadow: -1px 0 2px rgba(3, 9, 13, 0.4); }

/* ── LEAVES ── */
.book__leaves { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; pointer-events: none; }
.book__leaves::after { content: ""; position: absolute; left: 50%; top: -1%; bottom: -1%; width: 44%; z-index: 880; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(4, 10, 15, 0.28) 48%, rgba(4, 10, 15, 0.14) 62%, transparent); opacity: 0; pointer-events: none; }
.book.is-turning-page .book__leaves::after { animation: castTravel var(--leaf-dur, 480ms) ease-in-out; }
@keyframes castTravel { 0%, 100% { opacity: 0; transform: translateX(-50%) scaleX(0.4); } 40% { opacity: 0.48; transform: translateX(-46%) scaleX(0.82); } 72% { opacity: 0.3; transform: translateX(-57%) scaleX(0.7); } }
.leaf { position: absolute; top: 0; left: 50%; width: var(--page-w); height: 100%; transform-style: preserve-3d; transform-origin: left center; transform: rotateY(0deg); transition: transform var(--leaf-dur, var(--t-turn)) var(--ease-turn); z-index: var(--leaf-z, 10); }
.leaf.is-dragging { transition: none; }
.leaf.is-turning, .leaf.is-dragging { will-change: transform; }
.book-view.is-instant .book,
.book-view.is-instant .book__base,
.book-view.is-instant .leaf { transition: none !important; }
.book-view.is-instant .leaf.is-turning .leaf__shade,
.book-view.is-instant .book.is-turning-page .book__leaves::after { animation: none !important; }
.leaf__face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--paper); pointer-events: auto; }
.leaf__face--back { transform: rotateY(180deg); }
.leaf__shade { position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(4, 10, 15, 0.52), rgba(4, 10, 15, 0.08) 48%, transparent 76%); transition: opacity 120ms linear; }
.leaf__face--back .leaf__shade { background: linear-gradient(270deg, rgba(4, 10, 15, 0.52), rgba(4, 10, 15, 0.08) 48%, transparent 76%); }
.leaf.is-dragging .leaf__shade { transition: none; }
.leaf.is-turning .leaf__shade { animation: pageShade var(--leaf-dur, 480ms) cubic-bezier(0.33, 0.1, 0.25, 1); }
@keyframes pageShade { 0%, 100% { opacity: 0; } 42% { opacity: 0.38; } 74% { opacity: 0.16; } }

/* ── PAGE SHELL ── */
.page {
  --tick: rgba(19, 45, 60, 0.24);
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: page;
  padding: clamp(16px, 4.4cqw, 28px) clamp(18px, 6.2cqw, 38px) clamp(11px, 3cqw, 18px) clamp(24px, 8.4cqw, 50px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.12) 14%, transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(24, 62, 84, 0.028) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(24, 62, 84, 0.028) 31px 32px),
    radial-gradient(125% 100% at 20% 0%, #f7f9fa 0%, var(--paper) 56%, var(--paper-deep) 100%);
  color: var(--ink);
  overflow: hidden;
  border-radius: 1px 2px 2px 1px;
  color-scheme: light;
}
.page::after { content: ""; position: absolute; inset: clamp(9px, 2.2cqw, 15px); z-index: 2; pointer-events: none; opacity: 0.62; background:
  linear-gradient(var(--tick), var(--tick)) left top / 9px 1px no-repeat,
  linear-gradient(var(--tick), var(--tick)) left top / 1px 9px no-repeat,
  linear-gradient(var(--tick), var(--tick)) right top / 9px 1px no-repeat,
  linear-gradient(var(--tick), var(--tick)) right top / 1px 9px no-repeat,
  linear-gradient(var(--tick), var(--tick)) left bottom / 9px 1px no-repeat,
  linear-gradient(var(--tick), var(--tick)) left bottom / 1px 9px no-repeat,
  linear-gradient(var(--tick), var(--tick)) right bottom / 9px 1px no-repeat,
  linear-gradient(var(--tick), var(--tick)) right bottom / 1px 9px no-repeat; }
.page--left { padding: clamp(16px, 4.4cqw, 28px) clamp(24px, 8.4cqw, 50px) clamp(11px, 3cqw, 18px) clamp(18px, 6.2cqw, 38px); }
.page--right { box-shadow: inset 15px 0 30px -28px rgba(8, 22, 32, 0.55); }
.page--left { box-shadow: inset -15px 0 30px -28px rgba(8, 22, 32, 0.55); }
.page__top, .page__foot { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); }
.page__top { padding-bottom: clamp(7px, 1.6cqw, 11px); border-bottom: 1px solid var(--rule); }
.page__top > span:first-child::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 7px; vertical-align: 1px; background: var(--accent); }
.page__foot { padding-top: clamp(7px, 1.6cqw, 11px); border-top: 1px solid var(--rule); }
.page__folio { font-variant-numeric: tabular-nums; text-transform: none; color: var(--ink); letter-spacing: 0.12em; }
.page__slash { color: var(--accent); padding-inline: 2px; }
.page__main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; gap: clamp(7px, 1.8cqw, 13px); padding-block: clamp(9px, 2.4cqw, 17px); overflow-y: auto; overscroll-behavior: contain; touch-action: pinch-zoom; scrollbar-width: thin; scrollbar-color: rgba(13, 107, 118, 0.35) transparent; }
.page__main::-webkit-scrollbar { width: 4px; }
.page__main::-webkit-scrollbar-track { background: transparent; }
.page__main::-webkit-scrollbar-thumb { background: rgba(13, 107, 118, 0.3); border-radius: 4px; }
.page__main > * { flex-shrink: 0; }
.page p { max-width: none; }
.page__eyebrow, .page__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin: 0; max-width: none; }
.page__title { font-family: var(--font-body); font-weight: 600; font-size: clamp(2rem, 7.6cqw, 2.9rem); line-height: 1.02; letter-spacing: -0.038em; color: var(--ink); margin: 0; text-wrap: balance; }
.page__title em { font-style: normal; color: var(--teal); }
.page__lead { font-family: var(--font-body); font-size: clamp(1.0625rem, 3.9cqw, 1.1875rem); line-height: 1.52; color: var(--ink-soft); margin: 0; max-width: 46ch; }
.page__lead--small { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.65; }
.page__body { font-size: clamp(0.9375rem, 3.1cqw, 1.03125rem); line-height: 1.6; color: var(--ink-soft); margin: 0; }
.page__body strong { color: var(--ink); font-weight: 600; }
.page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: clamp(2px, 1cqw, 8px); }
.page__count { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.page a:not(.book-action) { color: var(--teal); }

/* ── ACTIONS ── */
.book-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 17px; border: 1px solid transparent; border-radius: 2px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease; }
.book-action--primary { background: var(--navy); border-color: var(--navy); color: #f4f8fa; }
.book-action--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.book-action--link { border-color: var(--rule); color: var(--ink); background: transparent; }
.book-action--link:hover { border-color: var(--teal); color: var(--teal); }
.book-action--brass { background: var(--accent); border-color: var(--accent); color: #fff8ec; }
.book-action--brass:hover { background: #7d4a13; border-color: #7d4a13; color: #fff; }
.book-action--ghost-light { border-color: rgba(207, 229, 240, 0.3); color: var(--cover-text); background: transparent; }
.book-action--ghost-light:hover { border-color: var(--cover-accent); color: #fff; }

/* ── COVER ── */
.cover-front { padding: 0; border-radius: 2px 5px 5px 2px; color: var(--cover-text); overflow: visible; --tick: rgba(190, 220, 235, 0.24); background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(160, 200, 220, 0.05) 47px 48px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(160, 200, 220, 0.05) 47px 48px), radial-gradient(120% 82% at 84% 8%, rgba(91, 151, 176, 0.2), transparent 56%), linear-gradient(155deg, #122636 0%, #0b1925 52%, #061019 100%); box-shadow: 0 32px 58px -30px rgba(0, 0, 0, 0.72), 0 9px 20px -10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(200, 228, 240, 0.08); }
.cover-front::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(190, 220, 235, 0.12); border-radius: 1px 3px 3px 1px; pointer-events: none; background:
  linear-gradient(var(--tick), var(--tick)) left top / 12px 1px no-repeat,
  linear-gradient(var(--tick), var(--tick)) left top / 1px 12px no-repeat,
  linear-gradient(var(--tick), var(--tick)) right top / 12px 1px no-repeat,
  linear-gradient(var(--tick), var(--tick)) right top / 1px 12px no-repeat,
  linear-gradient(var(--tick), var(--tick)) left bottom / 12px 1px no-repeat,
  linear-gradient(var(--tick), var(--tick)) left bottom / 1px 12px no-repeat,
  linear-gradient(var(--tick), var(--tick)) right bottom / 12px 1px no-repeat,
  linear-gradient(var(--tick), var(--tick)) right bottom / 1px 12px no-repeat; }
.cover-front__hinge { position: absolute; left: 0; top: 0; bottom: 0; width: 13px; z-index: 2; background: linear-gradient(90deg, rgba(0, 0, 0, 0.44), rgba(150, 195, 215, 0.07) 58%, rgba(0, 0, 0, 0.2)); border-right: 1px solid rgba(0, 0, 0, 0.3); pointer-events: none; }
.cover-front__board { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(10px, 2.8cqw, 20px); padding: clamp(24px, 7.6cqw, 42px) clamp(21px, 7cqw, 40px) clamp(20px, 6.2cqw, 34px) clamp(30px, 9.4cqw, 52px); }
.cover-front__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cover-front__mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(190, 220, 235, 0.42); border-radius: 2px; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.05em; color: var(--cover-text); }
.cover-front__edition { max-width: 58%; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.45; letter-spacing: 0.14em; text-align: right; text-transform: uppercase; color: var(--cover-muted); }
.cover-front__title { display: flex; flex-direction: column; gap: clamp(7px, 2.2cqw, 12px); }
.cover-front__eyebrow { margin: 0; max-width: none; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stage-accent); }
.cover-front h2 { font-family: var(--font-body); font-weight: 600; font-size: clamp(2rem, 9.4cqw, 3.9rem); line-height: 0.98; letter-spacing: -0.045em; color: #f2f7fa; margin: 0; text-wrap: balance; }
.cover-front h2 em { font-style: normal; color: var(--cover-accent); }
.cover-front__lede { margin: 0; max-width: 31ch; font-size: clamp(0.8125rem, 3.1cqw, 0.9375rem); line-height: 1.5; color: var(--cover-muted); }
.cover-front__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; border-top: 1px solid rgba(190, 220, 235, 0.2); border-bottom: 1px solid rgba(190, 220, 235, 0.2); }
.cover-front__stats div { padding: clamp(7px, 1.8cqw, 10px) 8px clamp(7px, 1.8cqw, 10px) 11px; border-left: 1px solid rgba(190, 220, 235, 0.13); }
.cover-front__stats div:first-child { border-left: 0; padding-left: 0; }
.cover-front__stats dt { font-family: var(--font-mono); font-size: clamp(0.9375rem, 3.8cqw, 1.1875rem); line-height: 1; letter-spacing: -0.02em; color: var(--cover-text); font-variant-numeric: tabular-nums; }
.cover-front__stats dd { margin: 4px 0 0; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cover-muted); }
.cover-front__foot { display: flex; flex-direction: column; gap: 2px; padding-top: clamp(9px, 2.6cqw, 14px); border-top: 1px solid rgba(190, 220, 235, 0.2); }
.cover-front__name { font-family: var(--font-body); font-weight: 600; font-size: clamp(1rem, 3.5cqw, 1.15rem); letter-spacing: -0.01em; color: #f2f7fa; }
.cover-front__role { font-size: clamp(0.75rem, 2.7cqw, 0.8125rem); line-height: 1.35; color: var(--cover-muted); }
.cover-front__place { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(211, 228, 238, 0.46); }
.cover-front__pages { position: absolute; right: -5px; top: 4px; bottom: 4px; width: 5px; z-index: 3; border-radius: 0 2px 2px 0; background: repeating-linear-gradient(180deg, #eef2f4 0 2px, #c4d0d6 2px 3px, #f3f6f7 3px 5px); box-shadow: 2px 0 3px rgba(3, 9, 13, 0.4); }

/* ── INSIDE COVER ── */
.inside-cover { --tick: rgba(190, 220, 235, 0.2); color: var(--cover-text); background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(160, 200, 220, 0.045) 47px 48px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(160, 200, 220, 0.045) 47px 48px), radial-gradient(110% 90% at 30% 18%, rgba(74, 128, 152, 0.2), transparent 58%), linear-gradient(162deg, #10212e 0%, #0a1621 64%, #071019 100%); }
.inside-cover .page__top, .inside-cover .page__foot { color: rgba(205, 225, 236, 0.56); border-color: rgba(190, 220, 235, 0.16); }
.inside-cover .page__foot .page__folio { color: rgba(230, 242, 248, 0.82); }
.inside-cover .page__top > span:first-child::before { background: var(--cover-accent); }
.inside-cover__main { align-items: center; justify-content: center; text-align: center; gap: clamp(12px, 3.4cqw, 22px); }
.tipped-portrait { position: relative; width: min(62%, 258px); margin: 0; background: #0c1a25; border: 1px solid rgba(190, 220, 235, 0.26); box-shadow: 0 18px 32px -24px rgba(0, 0, 0, 0.9); }
.tipped-portrait::before { content: ""; position: absolute; inset: -5px; pointer-events: none; opacity: 0.7; background:
  linear-gradient(var(--cover-accent), var(--cover-accent)) left top / 12px 1px no-repeat,
  linear-gradient(var(--cover-accent), var(--cover-accent)) left top / 1px 12px no-repeat,
  linear-gradient(var(--cover-accent), var(--cover-accent)) right bottom / 12px 1px no-repeat,
  linear-gradient(var(--cover-accent), var(--cover-accent)) right bottom / 1px 12px no-repeat; }
.tipped-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(0.4) saturate(0.85) contrast(1.03); }
.tipped-portrait figcaption { padding: 6px 8px; border-top: 1px solid rgba(190, 220, 235, 0.2); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cover-muted); }
.inside-cover__text { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; }
.inside-cover__text .page__eyebrow { color: var(--stage-accent); }
.inside-cover__quote { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.35rem, 4.8cqw, 1.85rem); line-height: 1.14; letter-spacing: -0.025em; color: var(--cover-text); margin: 0; max-width: none; }
.inside-cover__role { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.65; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cover-muted); margin: 0; max-width: none; }
.inside-cover__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 310px; margin: 2px 0 0; padding: 0; border-top: 1px solid rgba(190, 220, 235, 0.18); text-align: left; }
.inside-cover__meta div { padding: 6px 10px 6px 0; border-bottom: 1px solid rgba(190, 220, 235, 0.12); }
.inside-cover__meta div:nth-child(even) { padding-left: 11px; padding-right: 0; border-left: 1px solid rgba(190, 220, 235, 0.12); }
.inside-cover__meta div:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
.inside-cover__meta dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(175, 203, 216, 0.64); }
.inside-cover__meta dd { margin: 1px 0 0; font-size: 0.75rem; line-height: 1.35; color: rgba(232, 242, 247, 0.9); }

/* ── TITLE PAGE ── */
.title-page { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent 34%), repeating-linear-gradient(0deg, transparent 0 31px, rgba(24, 62, 84, 0.03) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(24, 62, 84, 0.03) 31px 32px), radial-gradient(120% 100% at 72% 8%, #fbfcfc, #f1f5f6 62%, #e6ecef 100%); }
.title-page__main { justify-content: center; gap: clamp(8px, 2.2cqw, 14px); }
.title-page__portrait { display: none; }
.title-page__status { display: inline-flex; align-items: center; gap: 8px; margin: 0; max-width: none; align-self: flex-start; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted); }
.status-dot { width: 6px; height: 6px; flex: none; background: #2a7a55; box-shadow: 0 0 0 3px rgba(42, 122, 85, 0.13); }
.title-page__title { font-family: var(--font-body); font-weight: 600; font-size: clamp(2.1rem, 8.4cqw, 3.2rem); line-height: 1; letter-spacing: -0.045em; color: var(--ink); margin: 0; text-wrap: balance; }
.title-page__title em { font-style: normal; color: var(--teal); }
.title-page__lead { font-size: clamp(1rem, 3.6cqw, 1.125rem); line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 45ch; }
.title-page__lead strong { color: var(--ink); font-weight: 600; }
.title-page__doc { width: 100%; margin: 1px 0 0; padding-top: 7px; border-top: 1px solid var(--rule-soft); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; color: var(--ink-muted); }
.title-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 16px; margin-top: 2px; }
.title-page__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: clamp(5px, 1.6cqw, 10px) 0 0; padding: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.title-page__stats div { display: flex; flex-direction: column; gap: 3px; padding: 8px 8px 8px 11px; border-left: 1px solid var(--rule-soft); }
.title-page__stats div:first-child { border-left: 0; padding-left: 0; }
.title-page__stats dt { font-family: var(--font-mono); font-size: clamp(1.125rem, 4.2cqw, 1.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.title-page__stats dd { margin: 0; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }

/* ── ASIDE PAGES ── */
.about-aside, .playbook-aside, .expertise-aside, .experience-aside, .skills-aside { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 30%), repeating-linear-gradient(0deg, transparent 0 31px, rgba(24, 62, 84, 0.035) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(24, 62, 84, 0.035) 31px 32px), radial-gradient(120% 100% at 24% 10%, #f5f8f9, #e9eff2 68%, #dfe7ea 100%); }
.about-aside__main { justify-content: center; gap: clamp(12px, 3.4cqw, 22px); }
.quotation-mark { font-family: var(--font-body); font-size: clamp(2.75rem, 10cqw, 4rem); font-weight: 600; line-height: 0.6; color: var(--accent); margin: 0; max-width: none; }
.aside-quote { margin: 0; padding: 0; }
.aside-quote p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.45rem, 5.6cqw, 2.05rem); line-height: 1.14; letter-spacing: -0.01em; color: var(--ink); }
.aside-quote cite { display: block; margin-top: 9px; font-family: var(--font-mono); font-style: normal; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.aside-quote--tall p { font-size: clamp(1.5rem, 6cqw, 2.3rem); }
.aside-facts { width: 100%; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.aside-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }
.aside-facts dt { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.aside-facts dt::before { content: ""; width: 4px; height: 4px; background: var(--accent); }
.aside-facts dd { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ink); text-align: right; }
.about-glance { margin: clamp(4px, 1.4cqw, 10px) 0 0; padding-top: 8px; border-top: 1px solid var(--rule); }
.about-glance div { display: flex; flex-direction: column; gap: 3px; }
.about-glance dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.about-glance dd { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ink); }
.aside-stamp { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 11px; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.4); }
.aside-stamp strong { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.aside-stamp span { max-width: 9ch; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.chapter-ghost { display: block; align-self: flex-start; font-family: var(--font-mono); font-size: clamp(2.75rem, 11cqw, 4.75rem); font-weight: 500; line-height: 0.8; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(19, 45, 60, 0.22); }
@supports not (-webkit-text-stroke: 1px black) { .chapter-ghost { color: rgba(19, 45, 60, 0.12); } }
.aside-title { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.15rem, 4.3cqw, 1.4rem); line-height: 1.2; letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.aside-points { list-style: none; margin: 0; padding: 0; width: 100%; border-top: 1px solid var(--rule); }
.aside-points li { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); }
.aside-points li::before { content: "+"; flex: none; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55; color: var(--accent); }
.aside-note { margin: 0; max-width: none; font-size: 0.8125rem; line-height: 1.55; color: var(--ink-muted); }
.aside-words { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.aside-words li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink); }
.aside-words li span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--accent); }
.aside-stat { display: flex; flex-direction: column; gap: 2px; margin: 0; max-width: none; }
.aside-stat strong { font-family: var(--font-mono); font-size: clamp(2.5rem, 10cqw, 3.6rem); font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: var(--accent); }
.aside-stat span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.aside-display { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: clamp(1.6rem, 6.2cqw, 2.1rem); line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); }
.aside-rule { display: block; width: 46px; height: 1px; background: var(--accent); opacity: 0.8; }
.contact-aside { --tick: rgba(190, 220, 235, 0.2); color: var(--cover-text); background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(160, 200, 220, 0.045) 47px 48px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(160, 200, 220, 0.045) 47px 48px), radial-gradient(110% 90% at 30% 16%, rgba(74, 128, 152, 0.2), transparent 60%), linear-gradient(162deg, #10212e 0%, #0a1621 64%, #071019 100%); }
.contact-aside .page__top, .contact-aside .page__foot { color: rgba(205, 225, 236, 0.56); border-color: rgba(190, 220, 235, 0.16); }
.contact-aside .page__foot .page__folio { color: rgba(230, 242, 248, 0.82); }
.contact-aside .page__top > span:first-child::before { background: var(--cover-accent); }
.contact-aside .chapter-ghost { -webkit-text-stroke-color: rgba(190, 220, 235, 0.22); }
.contact-aside .aside-display { color: #eff6f9; }
.contact-aside .aside-rule { background: var(--cover-accent); }
.contact-aside .aside-note { color: rgba(211, 228, 238, 0.68); }

/* ── PLAYBOOK INDEX ── */
.book-entries { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--rule); }
.book-entry { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; gap: 9px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: var(--ink); }
.book-entry__num { padding-top: 1px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--accent); }
.book-entry > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.book-entry__title { font-size: clamp(0.875rem, 3.2cqw, 0.96875rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); transition: color 150ms ease; }
.book-entry:hover .book-entry__title { color: var(--teal); }
.book-entry__meta { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.book-entry__arrow { font-size: 0.9rem; line-height: 1.4; color: var(--accent); text-align: right; }
.book-entries .pb__empty { font-size: 0.875rem; color: var(--ink-muted); margin: 0; }

/* ── EXPERTISE INDEX ── */
.index-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.index-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.index-list__num { padding-top: 2px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--accent); }
.index-list h3 { font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 2px; }
.index-list p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-muted); }

/* ── CAREER ── */
.career-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.career-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "years now" "role role"; gap: 1px 10px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); }
.career-list__years { grid-area: years; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-muted); }
.career-list__role { grid-area: role; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.career-list__role strong { font-family: var(--font-body); font-weight: 600; font-size: 0.90625rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.career-list__role span { font-size: 0.75rem; line-height: 1.35; color: var(--ink-muted); }
.career-list__now { grid-area: now; justify-self: end; padding: 1px 5px; border: 1px solid rgba(13, 107, 118, 0.34); font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); }
.career-list__current .career-list__role strong { color: var(--teal); }

/* ── TOOLKIT ── */
.skill-rows { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--rule); }
.skill-rows > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule-soft); }
.skill-rows h3 { font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); margin: 0; }
.skill-rows p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-muted); }
.cert-block { margin-top: 2px; padding: 8px 10px; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.4); }
.cert-block__label { margin: 0 0 4px; max-width: none; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.cert-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; }
.cert-row li { display: inline-flex; align-items: baseline; font-size: 0.75rem; line-height: 1.45; color: var(--ink-soft); }
.cert-row li + li::before { content: "/"; margin: 0 7px; color: var(--accent); }

/* ── COMMUNITY ── */
.community-aside { padding: 0; background: #0a1219; --tick: rgba(200, 228, 240, 0.26); }
.community-aside__figure { position: absolute; inset: 0; margin: 0; }
.community-aside__figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) saturate(0.9) contrast(1.03); }
.community-aside__figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 10, 15, 0) 26%, rgba(4, 10, 15, 0.2) 54%, rgba(4, 10, 15, 0.96) 100%); }
.community-aside figcaption { position: absolute; left: clamp(18px, 6.2cqw, 38px); right: clamp(18px, 6.2cqw, 38px); bottom: clamp(16px, 4.4cqw, 28px); z-index: 2; display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid rgba(200, 228, 240, 0.42); text-shadow: 0 1px 12px rgba(2, 6, 9, 0.65); }
.community-aside figcaption span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cover-accent); }
.community-aside figcaption strong { font-family: var(--font-body); font-weight: 500; font-size: clamp(0.9375rem, 3.4cqw, 1.0625rem); line-height: 1.35; letter-spacing: -0.015em; color: #f1f6f8; }
.community-aside__folio { position: absolute; top: 16px; right: 18px; z-index: 1; color: rgba(235, 244, 248, 0.7); }
.community-page__media { display: none; }
.event-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.event-list li { border-bottom: 1px solid var(--rule-soft); }
.event-list a { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; text-decoration: none; color: var(--ink); }
.event-list a span { display: flex; flex-direction: column; gap: 1px; font-size: 0.875rem; line-height: 1.4; }
.event-list em { font-family: var(--font-mono); font-style: normal; font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.event-list svg { flex: none; margin-top: 4px; color: var(--accent); }

/* ── CONTACT ── */
.contact-list { display: flex; flex-direction: column; width: 100%; margin-top: 1px; border-top: 1px solid var(--rule); }
.contact-list > a, .contact-list > div { display: grid; grid-template-columns: 74px minmax(0, 1fr) 15px; gap: 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: var(--ink); }
.contact-list span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.contact-list strong { font-size: 0.84375rem; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; color: var(--ink); }
.contact-list a:hover strong { color: var(--teal); }
.contact-list svg { color: var(--accent); align-self: center; }
.contact-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* ── ENDPAPER ── */
.endpaper-page { --tick: rgba(190, 220, 235, 0.18); color: var(--cover-text); background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(160, 200, 220, 0.04) 47px 48px), repeating-linear-gradient(90deg, transparent 0 47px, rgba(160, 200, 220, 0.04) 47px 48px), linear-gradient(160deg, #0e1e2a, #08131c 68%, #060f16); }
.endpaper-page__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.endpaper-page__mark { display: inline-flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; border: 1px solid rgba(190, 220, 235, 0.3); border-radius: 2px; font-family: var(--font-mono); font-size: clamp(2.25rem, 8.4cqw, 3.25rem); line-height: 1; color: rgba(224, 238, 246, 0.86); }
.endpaper-page__rule { width: 38px; height: 1px; background: var(--cover-accent); opacity: 0.72; }
.endpaper-page__colophon { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.7; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cover-muted); margin: 0; max-width: none; }

/* ── COMPACT FALLBACK ── */
.book-compact { display: none; }
@media (min-width: 900px) and (max-height: 900px) { .about-aside__main { gap: 10px; } }
@media (min-width: 900px) and (max-height: 880px) {
  .inside-cover__main { gap: 10px; }
  .tipped-portrait { width: min(52%, 210px); }
  .inside-cover__quote { font-size: clamp(1.2rem, 4.6cqw, 1.55rem); }
  .inside-cover__role { line-height: 1.5; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .page { padding-top: 14px; padding-bottom: 9px; }
  .page__top { padding-bottom: 6px; }
  .page__foot { padding-top: 6px; }
  .page__main { gap: 6px; padding-block: 6px; }
  .page__title { font-size: clamp(1.6rem, 6.4cqw, 2.05rem); }
  .page__lead { font-size: 0.95rem; line-height: 1.42; }
  .page__lead--small { font-size: 0.625rem; line-height: 1.45; }
  .book-entry { padding-block: 6px; }
  .book-entry__title { font-size: 0.82rem; }
  .index-list li { padding-block: 4px; }
  .career-list li { padding-block: 4px; }
  .aside-quote p, .aside-quote--tall p { font-size: clamp(1.3rem, 5.2cqw, 1.75rem); }
  .about-glance { margin-top: 2px; padding-top: 5px; }
  .inside-cover__main { gap: 8px; }
  .tipped-portrait { width: min(44%, 172px); }
  .inside-cover__meta div { padding-block: 4px; }
  .inside-cover__quote { font-size: clamp(1.1rem, 4.2cqw, 1.35rem); }
  .community-aside figcaption strong { font-size: 0.9rem; }
}
@media (max-width: 380px) and (max-height: 800px) {
  .page__main { gap: 5px; padding-block: 5px; }
  .page__title { font-size: clamp(1.65rem, 8cqw, 1.9rem); }
  .book-entry { padding-block: 6px; }
  .index-list li { padding-block: 4px; }
  .career-list li { padding-block: 4px; }
}
@media (min-width: 900px) and (max-height: 800px) { .about-page .page__main { gap: 5px; padding-block: 5px; } }

/* ── SINGLE-PAGE MODE ── */
@media (max-width: 899px) {
  .book-stage { padding-inline: clamp(12px, 3vw, 22px); }
  .book-camera { width: var(--page-w); }
  .book { transform: translate3d(0, 0, 0); }
  .book__base { grid-template-columns: 1fr; width: 100%; }
  .book__base .base-endpaper { display: none; }
  .back-cover { width: 100%; }
  .leaf { left: 0; width: 100%; }
  .leaf__face--back { display: none; }
  .book__edge { right: -4px; left: auto; border-radius: 0 2px 2px 0; }
  .book.is-open .book__edge { right: -4px; left: auto; border-radius: 0 2px 2px 0; }
  .book.is-open .book__gutter { opacity: 0; }
  .title-page__portrait { display: block; margin: 0 0 2px; width: clamp(66px, 21cqw, 88px); padding: 3px; background: #f7f9fa; border: 1px solid var(--rule); box-shadow: 0 8px 16px -12px rgba(8, 22, 32, 0.4); }
  .title-page__portrait img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
  .community-page__media { display: block; margin: 0; width: 100%; height: clamp(108px, 25cqw, 158px); overflow: hidden; border: 1px solid var(--rule); }
  .community-page__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: grayscale(0.2) saturate(0.92); }
  .book-hud__mid { min-width: 0; }
  .book-dots { display: none; }
  .book-hud__label { flex-direction: column; align-items: center; gap: 0; }
  .page__title { font-size: clamp(1.75rem, 8.2cqw, 2.2rem); }
  .page__lead { font-size: clamp(1rem, 3.9cqw, 1.0625rem); }
  .book-stage__hairline { bottom: clamp(60px, 9vh, 74px); }
}
@media (max-width: 700px) {
  .book-bar { grid-template-columns: 1fr auto; }
  .book-bar__kicker { grid-column: 1; font-size: 0.6875rem; letter-spacing: 0.08em; }
  .book-bar__loc { grid-column: 2; font-size: 0.6875rem; letter-spacing: 0.08em; }
  .book-bar__loc span { display: none; }
  .book-bar__hint { grid-column: 1 / -1; grid-row: 2; justify-self: start; display: none; font-size: 0.6875rem; letter-spacing: 0.08em; }
  .book-view[data-phase="reading"] .book-bar__hint { display: inline-flex; }
  .book-hud__arrow { width: 44px; height: 44px; }
  .book-action { padding: 0 15px; }
  .title-page__stats { gap: 4px; }
}
@media (max-width: 420px) {
  .book-stage { padding-inline: 12px; padding-top: 5px; }
  .book-controls { min-height: 50px; }
  .book-bar { grid-template-columns: 1fr; }
  .book-bar__loc { display: none; }
  .book-bar__hint span { display: none; }
  .book-bar__hint::after { content: "Tap or scroll"; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .book-bar__hint svg { display: none; }
  .page { padding-inline: 22px 18px; padding-top: 18px; }
  .page--left { padding-inline: 18px 22px; }
  .page__title { font-size: clamp(1.75rem, 8.6cqw, 2rem); }
  .book-action { min-height: 44px; padding: 0 14px; font-size: 0.6875rem; }
  .title-page__actions .book-action--link { padding-inline: 0; border-color: transparent; min-height: 32px; }
  .contact-page__actions { gap: 6px 10px; }
  .contact-page__actions .book-action--link { padding-inline: 0; border-color: transparent; min-height: 32px; }
}
@media (pointer: coarse) { .view-switch__btn { min-height: 44px; padding-inline: 14px; } }

/* ── CONTAINER REFINEMENTS ── */
@container page (max-width: 420px) {
  .index-list li { grid-template-columns: 22px 1fr; gap: 7px; }
  .aside-facts div { flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 0; }
  .aside-facts dd { text-align: left; }
  .contact-list > a, .contact-list > div { grid-template-columns: 1fr auto; }
  .contact-list span { grid-column: 1 / -1; }
  .contact-list span + strong { grid-column: 1 / 2; }
  .contact-list svg { grid-column: 2 / 3; grid-row: 2; }
  .skill-rows > div { grid-template-columns: 1fr; gap: 1px; }
  .book-entry__meta { letter-spacing: 0.03em; }
  .chapter-ghost { display: none; }
  .cover-front__board { padding: 22px 20px 20px 28px; }
}
@container page (max-width: 460px) {
  .about-page .page__main, .experience-page .page__main { padding-block: 6px; }
}
@container page (max-height: 540px) {
  .chapter-ghost { display: none; }
  .aside-stamp { display: none; }
  .page__main { gap: 6px; padding-block: 7px; }
  .inside-cover__meta { display: none; }
  .tipped-portrait { width: min(46%, 180px); }
}
@container page (max-width: 340px) {
  .page { padding-top: 12px; padding-bottom: 8px; }
  .page__top { padding-bottom: 4px; }
  .page__foot { padding-top: 4px; }
  .page__main, .about-page .page__main, .experience-page .page__main { gap: 4px; padding-block: 3px; }
  .page__lead { line-height: 1.42; }
  .page__lead--small { line-height: 1.5; }
  .page__body { line-height: 1.5; }
  .book-entry { padding-block: 6px; }
  .index-list li { padding-block: 4px; }
  .career-list li { padding-block: 3px; }
  .page__actions { margin-top: 0; }
  .about-glance { margin-top: 0; padding-top: 4px; }
  .cover-front__stats div { padding-right: 5px; padding-left: 7px; }
  .cover-front__stats dd { letter-spacing: 0.02em; }
  .title-page__stats div { padding-right: 5px; padding-left: 7px; }
}

/* ── SHORT VIEWPORTS ── */
@media (max-height: 559px) {
  .book-bar__hint, .book-controls, .book-scene, .book-stage__hairline, .book-stage__contact { display: none; }
  .book-stage { grid-template-areas: "bar" "scene"; grid-template-rows: auto minmax(0, 1fr); }
  .book-compact { grid-area: scene; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: center; gap: clamp(18px, 4vw, 40px); padding: 10px; }
  .book-compact__cover { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; width: clamp(120px, 20vw, 168px); aspect-ratio: 0.7; padding: 16px; border-radius: 2px 4px 4px 2px; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(160, 200, 220, 0.06) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(160, 200, 220, 0.06) 23px 24px), linear-gradient(155deg, #122636, #08131d 72%); color: var(--cover-text); box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.7); border: 1px solid rgba(190, 220, 235, 0.12); }
  .book-compact__mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(190, 220, 235, 0.36); border-radius: 2px; font-family: var(--font-mono); font-size: 0.7rem; }
  .book-compact__cover p { margin: 0; max-width: none; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cover-muted); }
  .book-compact__cover h2 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; line-height: 1.05; letter-spacing: -0.03em; color: #f2f7fa; }
  .book-compact__cover > span:last-child { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(211, 228, 238, 0.5); }
  .book-compact__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 320px; }
  .book-compact__body p { margin: 0; max-width: none; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stage-muted); }
  .book-compact__eyebrow { color: var(--stage-text); }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .book, .leaf, .book-camera, .book-hud, .book-open, .book__gutter, .book__base, .book-stage__contact, .leaf__shade { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .leaf.is-turning .leaf__shade, .book.is-turning-page .book__leaves::after, .book-bar__hint svg { animation: none !important; }
  .book-scene { perspective: none; }
}

/* ── FOCUS ── */
.book-view :focus-visible { outline: 2px solid var(--stage-accent); outline-offset: 3px; }
.book-view .page :focus-visible { outline-color: var(--teal); }

/* ── NARROW PHONE FIT ── */
@container page (max-width: 340px) {
  .page { padding-top: 13px; padding-bottom: 9px; }
  .page__main, .about-page .page__main, .experience-page .page__main { gap: 3px; padding-block: 2px; }
  .page .page__title { font-size: clamp(1.55rem, 7.7cqw, 1.8rem); }
  .page__lead { font-size: 0.95rem; line-height: 1.4; }
  .book-entry { padding-block: 4px; }
  .book-entry__title { font-size: 0.8rem; line-height: 1.22; }
  .index-list li { padding-block: 3px; }
  .career-list li { padding-block: 3px; }
  .title-page__main { gap: 5px; }
  .title-page__title { font-size: clamp(1.9rem, 8cqw, 2.2rem); }
  .title-page__stats { margin-top: 2px; }
  .title-page__stats div { padding-top: 5px; padding-bottom: 5px; }
}