/* ============================================================
   YOSHI MUA: multi-theme experience
   Themes: build (graphite/electric) · service (olive/khaki)
           heritage (parchment/oxblood) · scholar (navy/gold)
           library (bottle green/brass)
   ============================================================ */
:root {
  --serif: "Fraunces", Georgia, serif;
  --sans: "Space Grotesk", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-theme="build"] {
  --bg: #0d1116; --bg-2: #090c10;
  --ink: #e8ecf3; --ink-dim: #9aa4b3; --ink-faint: #7e8898;
  --accent: #5b8cff; --accent-bright: #8fb3ff;
  --line: rgba(232, 236, 243, 0.12);
  --card: rgba(232, 236, 243, 0.03);
}
body[data-theme="service"] {
  --bg: #171a10; --bg-2: #121409;
  --ink: #e3e2cd; --ink-dim: #aaa992; --ink-faint: #8b8b74;
  --accent: #b5c04a; --accent-bright: #d3dd6b;
  --line: rgba(227, 226, 205, 0.14);
  --card: rgba(227, 226, 205, 0.035);
}
body[data-theme="heritage"] {
  --bg: #ece3d1; --bg-2: #e4d9c2;
  --ink: #241b10; --ink-dim: #5f5443; --ink-faint: #6e6355;
  --accent: #8a3324; --accent-bright: #a84a37;
  --line: rgba(36, 27, 16, 0.18);
  --card: rgba(36, 27, 16, 0.035);
}
body[data-theme="scholar"] {
  --bg: #0a2a4a; --bg-2: #072138;
  --ink: #eaf1f8; --ink-dim: #a5b9cc; --ink-faint: #7d94ab;
  --accent: #ffc600; --accent-bright: #ffd84d;
  --line: rgba(234, 241, 248, 0.15);
  --card: rgba(234, 241, 248, 0.04);
}
body[data-theme="library"] {
  --bg: #13211a; --bg-2: #0e1a14;
  --ink: #eae4d4; --ink-dim: #a6a08d; --ink-faint: #8a9383;
  --accent: #c8a96a; --accent-bright: #e0c288;
  --line: rgba(234, 228, 212, 0.13);
  --card: rgba(234, 228, 212, 0.035);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.9s var(--ease), color 0.9s var(--ease);
}

::selection { background: var(--accent); color: var(--bg); }

a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }

@media (hover: hover) and (pointer: fine) {
  body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on summary { cursor: none; }
}

/* ============ Preloader ============ */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: #090c10;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.preloader__word {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.2rem, 3vw, 2rem);
  letter-spacing: 0.55em; text-indent: 0.55em;
  color: #96a0af;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }
.preloader__bar { width: 180px; height: 1px; background: rgba(232,236,243,0.15); overflow: hidden; }
.preloader__fill {
  display: block; height: 100%; width: 100%;
  background: #5b8cff;
  transform: translateX(-100%);
  animation: load 1.1s var(--ease) forwards;
}
@keyframes load { to { transform: translateX(0); } }

/* ============ Overlays ============ */
.vignette {
  position: fixed; inset: 0; z-index: 89; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.35) 100%);
}

/* ============ Cursor ============ */
.cursor { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; display: none; }
body.cursor-on .cursor { display: block; }
.cursor__dot {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-bright);
  transform: translate(-50%, -50%);
}
.cursor__ring {
  position: fixed; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.65;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s, opacity 0.3s;
}
.cursor__label {
  font-family: var(--mono);
  font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bg); opacity: 0; transition: opacity 0.2s;
}
.cursor.is-hover .cursor__ring { width: 52px; height: 52px; opacity: 1; }
.cursor.is-view .cursor__ring { width: 72px; height: 72px; background: var(--accent); opacity: 1; }
.cursor.is-view .cursor__label { opacity: 1; }
.cursor.is-view .cursor__dot { opacity: 0; }

/* ============ Section transition wipe ============ */
.wipe {
  position: fixed; inset: 0; z-index: 155;
  pointer-events: none; visibility: hidden;
}
.wipe.run { visibility: visible; }
.wipe__panel {
  position: absolute; inset: 0;
  background: var(--bg-2);
  border-color: var(--accent);
  transform: scaleX(0);
}
.wipe__label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.75rem, 2vw, 1rem);
  letter-spacing: 0.45em; text-indent: 0.45em;
  color: var(--accent);
  opacity: 0;
  white-space: nowrap;
}
/* horizontal wipe (default) */
.wipe.run .wipe__panel { animation: wipeH 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.wipe.run .wipe__label { animation: wipeLabel 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes wipeH {
  0% { transform: scaleX(0); transform-origin: left; }
  38% { transform: scaleX(1); transform-origin: left; }
  62% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
/* vertical variant */
.wipe.wipe--v .wipe__panel { transform: scaleY(0); }
.wipe.wipe--v.run .wipe__panel { animation-name: wipeV; }
@keyframes wipeV {
  0% { transform: scaleY(0); transform-origin: top; }
  38% { transform: scaleY(1); transform-origin: top; }
  62% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes wipeLabel {
  0%, 20% { opacity: 0; transform: translate(-50%, -50%) translateY(18px); }
  38%, 64% { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
  85%, 100% { opacity: 0; transform: translate(-50%, -50%) translateY(-18px); }
}

/* ============ Progress ============ */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 150; }
.progress__bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transform-origin: left; transform: scaleX(0);
}

/* ============ Nav ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 140;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  transition: transform 0.5s var(--ease), background 0.4s;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 500;
  letter-spacing: 0.1em; color: var(--accent);
  transition: color 0.6s;
  display: inline-flex; align-items: center; gap: 0.65rem;
}
.nav__face {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; object-position: 50% 22%;
  border: 1.5px solid var(--accent);
  transition: border-color 0.6s, transform 0.4s var(--ease);
}
.nav__logo:hover .nav__face { transform: scale(1.08); }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__links a {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim); transition: color 0.3s;
  position: relative;
}
.nav__links a sup { color: var(--accent); font-size: 0.55rem; margin-right: 0.2em; transition: color 0.6s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  border: 1px solid var(--accent); border-radius: 99px;
  padding: 0.45em 1.1em; color: var(--accent) !important;
  transition: background 0.3s, color 0.3s, border-color 0.6s !important;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--accent); color: var(--bg) !important; }
.nav__burger {
  display: none; background: none; border: none;
  flex-direction: column; gap: 6px; justify-content: center; align-items: center;
  min-width: 44px; min-height: 44px; padding: 8px;
}
.nav__burger span { display: block; width: 26px; height: 1.5px; background: var(--ink); transition: transform 0.4s var(--ease); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 130;
  background: color-mix(in srgb, var(--bg-2) 97%, transparent);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__links { display: flex; flex-direction: column; gap: 1.4rem; text-align: center; }
.menu__links a {
  font-family: var(--serif); font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 300;
  color: var(--ink-dim);
  transform: translateY(24px); opacity: 0;
}
.menu.is-open .menu__links a { transform: translateY(0); opacity: 1; transition: transform 0.6s var(--ease), opacity 0.6s, color 0.3s; }
.menu__links a:hover { color: var(--accent); }
.menu__links a sup { font-family: var(--sans); font-size: 0.8rem; color: var(--accent); margin-right: 0.3em; }

/* ============ Hero + blueprint skyline ============ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero__skyline {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(180px, 38vh, 340px);
  pointer-events: none;
  will-change: transform;
  /* fade the buildings out behind the copy column so text stays legible */
  -webkit-mask-image: radial-gradient(ellipse 42% 100% at 50% 30%, transparent 38%, rgba(0,0,0,0.35) 62%, #000 82%);
          mask-image: radial-gradient(ellipse 42% 100% at 50% 30%, transparent 38%, rgba(0,0,0,0.35) 62%, #000 82%);
}
.hero__skyline svg { display: block; width: 100%; height: 100%; }
.skyline__b {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  opacity: 0.4;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.6s var(--ease);
}
body.loaded .skyline__b { stroke-dashoffset: 0; }
.skyline__win {
  fill: var(--accent);
  opacity: 0;
  animation: winblink 5s ease-in-out infinite;
}
body.loaded .skyline__win { opacity: 0.5; }
@keyframes winblink { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.12; } }
.skyline__crane { stroke: var(--accent); stroke-width: 1.5; fill: none; opacity: 0.45; }
.skyline__hook { animation: hook 6s var(--ease) infinite alternate; }
@keyframes hook { from { transform: translateY(0); } to { transform: translateY(26px); } }

.hero__inner {
  position: relative; z-index: 2; text-align: center;
  padding: clamp(5rem, 12vh, 8rem) 1.5rem clamp(6rem, 14vh, 9rem);
  max-width: 1100px;
  will-change: transform, opacity;
}
.hero__avatar {
  width: clamp(120px, 14vw, 150px); height: clamp(120px, 14vw, 150px);
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 210deg, var(--accent), transparent 55%, var(--accent-bright) 90%, var(--accent));
}
.hero__avatar img {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover; object-position: 50% 22%;
  border: 3px solid var(--bg);
}
.hero__eyebrow {
  font-family: var(--mono);
  font-size: clamp(0.65rem, 1.4vw, 0.8rem); letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 2rem;
}
.hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(4rem, 16vw, 12.5rem);
  line-height: 0.95; letter-spacing: -0.01em;
}
.hero__line { display: block; overflow: hidden; }
.hero__word { display: inline-block; }
.hero__word--accent { color: var(--accent); font-style: italic; font-weight: 400; }
.hero__word .ch {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease), color 0.3s;
}
body.loaded .hero__word .ch { transform: translateY(0); }
.hero__word .ch:hover { color: var(--accent-bright); }
.hero__sub {
  max-width: 620px; margin: 2.2rem auto 0;
  color: var(--ink-dim); font-size: clamp(0.95rem, 1.6vw, 1.12rem);
}
.hero__sub strong { color: var(--ink); font-weight: 500; }
.hero__sub a { border-bottom: 1px solid var(--accent); transition: color 0.3s; }
.hero__sub a:hover { color: var(--accent-bright); }
.hero__ctas { margin-top: 2.6rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.95em 2em; border-radius: 99px;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--accent); color: var(--bg); }
.btn--solid:hover { background: var(--accent-bright); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink-dim); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--icon { display: inline-flex; align-items: center; gap: 0.65em; }
.btn--icon svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
/* the display rules above outrank the UA's [hidden] { display: none }, and the
   paper modal uses that attribute to drop Watch or Listen for a paper that has
   no video or no narration */
.btn[hidden] { display: none; }
/* pending: the action exists but the media does not yet. Visible enough to
   promise, inert enough that it never reads as broken. Script drops the href,
   so it is already unclickable and unfocusable; this is only the look. */
.btn--soon {
  border-style: dashed; color: var(--ink-faint); cursor: default;
  /* last in the row: on a phone the actions stack, and an action that does
     nothing yet should not sit above Listen, which is the offer readers miss */
  order: 1;
}
.btn--soon:hover { transform: none; border-color: var(--line); color: var(--ink-faint); }
.hero__scrollcue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint);
  z-index: 3;
}
.hero__scrollline { width: 1px; height: 48px; background: var(--line); position: relative; overflow: hidden; }
.hero__scrollline::after {
  content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%;
  background: var(--accent);
  animation: scrollcue 1.8s var(--ease) infinite;
}
@keyframes scrollcue { to { top: 110%; } }

/* ============ Chapter scaffolding ============ */
.chapter { padding: clamp(6rem, 14vh, 11rem) clamp(1.2rem, 5vw, 4.5rem); position: relative; }
.chapter__head {
  display: flex; align-items: baseline; gap: 1.2rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
  max-width: 1200px; margin-left: auto; margin-right: auto;
  position: relative; z-index: 2;
}
.chapter__head--overlay { position: absolute; top: clamp(1.8rem, 5vh, 3.5rem); left: clamp(1.2rem, 5vw, 4.5rem); margin: 0; z-index: 5; }
.chapter__num {
  font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 300;
  color: transparent; -webkit-text-stroke: 1px var(--accent);
  line-height: 1;
}
.chapter__label {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-dim);
}
.chapter__body { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.chapter__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 1.08; letter-spacing: -0.01em;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.chapter__title span { display: block; }
.chapter__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.chapter__col p + p { margin-top: 1.2em; }
.lead { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; color: var(--ink); }
.chapter__col p { color: var(--ink-dim); }
.chapter__col .lead { color: var(--ink); }
.annotation {
  border-left: 2px solid var(--accent); padding-left: 1.2rem;
  font-style: italic; color: var(--ink) !important;
  font-family: var(--serif); font-size: 1.05rem;
}

.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-lines span { display: block; opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal-lines.in span { opacity: 1; transform: translateY(0); }
.reveal-lines.in span:nth-child(2) { transition-delay: 0.12s; }
.reveal-lines.in span:nth-child(3) { transition-delay: 0.24s; }

/* ============ WORK ============ */
.feature {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card);
  padding: clamp(2rem, 5vw, 3.8rem);
  margin-bottom: clamp(3rem, 7vh, 5rem);
  transform-style: preserve-3d;
  transition: border-color 0.4s;
}
.feature:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.feature__glare, .product__glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%);
  transition: opacity 0.4s;
}
.feature:hover .feature__glare, .product:hover .product__glare { opacity: 1; }
.feature__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.feature__shot {
  border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden;
  transform: perspective(1200px) rotateY(-6deg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transition: transform 0.6s var(--ease);
}
.feature:hover .feature__shot { transform: perspective(1200px) rotateY(-2deg) translateY(-4px); }
.feature__shot img { display: block; width: 100%; height: auto; }
.feature__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.8rem; }
.feature__badge {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 99px; padding: 0.5em 1.1em;
}
.feature__domain { font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.08em; }
.feature__name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3.4rem, 10vw, 7rem); line-height: 1;
  margin-bottom: 1.2rem;
}
.feature__desc { max-width: 640px; color: var(--ink-dim); font-size: clamp(1rem, 1.8vw, 1.2rem); }
.feature__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.feature__tags span {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 99px;
  padding: 0.4em 1em; color: var(--ink-dim);
}

.work__subhead {
  font-family: var(--mono); font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: clamp(2.5rem, 6vh, 4rem) 0 1.6rem;
  display: flex; align-items: center; gap: 1rem;
}
.work__subhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.product {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card);
  padding: 1.8rem 1.6rem;
  transform-style: preserve-3d;
  transition: border-color 0.4s, transform 0.5s var(--ease);
}
.product:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.product__shot {
  margin: -1.8rem -1.6rem 1.4rem;
  height: 170px; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.product__shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  transition: transform 0.7s var(--ease);
}
.product:hover .product__shot img { transform: scale(1.045); }
.product__domain { display: block; font-size: 0.74rem; color: var(--ink-faint); letter-spacing: 0.08em; margin-bottom: 1.4rem; }
.product h4 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; margin-bottom: 0.6rem; }
.product p { color: var(--ink-dim); font-size: 0.9rem; }

.record { display: flex; flex-direction: column; }
.record__row {
  display: grid; grid-template-columns: 120px 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.8rem, 4vh, 2.6rem) 1rem;
  border-top: 1px solid var(--line);
  transition: background 0.4s;
}
.record__row:last-child { border-bottom: 1px solid var(--line); }
.record__row:hover { background: var(--card); }
.record__year { font-size: 0.8rem; color: var(--accent); letter-spacing: 0.1em; padding-top: 0.4rem; }
.record__main h4 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.9rem); margin-bottom: 0.6rem; }
.record__main p { color: var(--ink-dim); max-width: 680px; }
.record__links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1rem; }
.record__links a {
  font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink);
  border-bottom: 1px solid var(--ink-faint); padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.record__links a:hover { color: var(--accent-bright); border-color: var(--accent); }
.record__row--shot { grid-template-columns: 120px 1fr 220px; align-items: center; }
.record__shot {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  opacity: 0.85; transition: opacity 0.4s, transform 0.5s var(--ease);
}
.record__row:hover .record__shot { opacity: 1; transform: translateY(-3px); }
.record__shot img { display: block; width: 100%; height: auto; }

/* ============ SERVICE ============ */
.chapter--service { overflow: hidden; overflow: clip; }
.chapter--service .chapter__label { color: var(--accent); }

/* Big U.S. ARMY wordmark */
.army-mark {
  position: absolute; top: clamp(2rem, 6vh, 4rem); right: clamp(-1rem, 2vw, 3rem);
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(4rem, 12vw, 11rem);
  letter-spacing: 0.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
  opacity: 0.14; pointer-events: none; user-select: none;
  white-space: nowrap; z-index: 1;
}

/* Patriot system panel */
.patriot {
  margin-top: clamp(3rem, 7vh, 5rem);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  padding: clamp(1.8rem, 4.5vw, 3rem);
}
.patriot__head { margin-bottom: 1.6rem; }
.patriot__badge {
  display: inline-block;
  font-size: 0.7rem; letter-spacing: 0.26em; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 99px; padding: 0.5em 1.1em; margin-bottom: 1rem;
}
.patriot__head h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.7rem, 4.2vw, 2.8rem); line-height: 1.1;
}
.patriot__specs {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  margin: 1.8rem 0 1.4rem;
}
.patriot__spec {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 99px;
  padding: 0.6em 1.2em;
}
.patriot__spec b { color: var(--accent-bright); font-weight: 500; margin-right: 0.4em; }

/* Missile tracers */
.missiles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.missiles i {
  position: absolute; bottom: -12%;
  width: 2px; height: 110px;
  background: linear-gradient(to top, transparent, var(--accent));
  opacity: 0;
  transform: rotate(24deg);
  animation: tracer 7s linear infinite;
}
.missiles i::after {
  content: ""; position: absolute; top: -4px; left: 50%;
  width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent-bright) 60%, transparent);
}
.missiles i:nth-child(1) { left: 6%; animation-delay: 0s; }
.missiles i:nth-child(2) { left: 30%; animation-delay: 2.4s; animation-duration: 8s; }
.missiles i:nth-child(3) { left: 58%; animation-delay: 1.1s; animation-duration: 6.4s; }
.missiles i:nth-child(4) { left: 82%; animation-delay: 3.6s; animation-duration: 7.6s; }
@keyframes tracer {
  0% { transform: translate(0, 0) rotate(24deg); opacity: 0; }
  8% { opacity: 0.55; }
  60% { opacity: 0.55; }
  78% { transform: translate(46vh, -104vh) rotate(24deg); opacity: 0; }
  100% { transform: translate(46vh, -104vh) rotate(24deg); opacity: 0; }
}

.map { margin: clamp(3rem, 7vh, 5rem) 0 0; }
.map__frame {
  position: relative;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-2);
  overflow: hidden;
  transition: background-color 0.9s var(--ease);
}
.map__frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 12.5% 100%;
  opacity: 0.25;
}
#worldMap { display: block; width: 100%; height: auto; }
.map__readout {
  position: absolute; top: 0.9rem; left: 1.1rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--accent);
  opacity: 0.85;
}
.map__legend {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 1rem;
  font-size: 0.68rem; letter-spacing: 0.14em; color: var(--ink-dim);
}
.map__legend-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.map__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.map__dot--home { background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-bright); }

.landdot { fill: var(--ink-faint); opacity: 0.55; }
.station { fill: var(--accent-bright); }
.station-ring { fill: none; stroke: var(--accent); opacity: 0; }
.station-ring.pinging { animation: ping 2.6s var(--ease) infinite; }
@keyframes ping {
  0% { opacity: 0.8; transform: scale(0.3); }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}
.arc {
  fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 2.2s var(--ease);
  opacity: 0.9;
}
.arc.drawn { stroke-dashoffset: 0; }
.maplabel {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  fill: var(--ink); opacity: 0.85;
}
.maplabel--sub { font-size: 10px; fill: var(--ink-dim); }

.mono-stat { font-family: var(--mono); font-size: clamp(1.8rem, 4vw, 3rem) !important; letter-spacing: 0.08em; padding-top: 0.5rem; }

/* Stats (shared) */
.stats {
  margin-top: clamp(3.5rem, 8vh, 6rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.stat { padding: 2rem 1.5rem 0; border-left: 1px solid var(--line); transition: background 0.4s; }
.stat:first-child { border-left: none; padding-left: 0; }
.stat:hover { background: var(--card); }
.stat__value {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.5rem); color: var(--accent);
  line-height: 1;
}
.stat__label { display: block; margin-top: 0.7rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }

/* ============ Pinned horizontal tour ============ */
.hscroll { position: relative; }
.hscroll__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center;
}
.hscroll__track {
  display: flex; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 0 clamp(1.2rem, 5vw, 4.5rem);
  will-change: transform;
}
.hcard {
  flex: 0 0 auto;
  width: clamp(300px, 38vw, 520px);
  border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(2rem, 4vw, 3.2rem);
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  transition: border-color 0.4s;
}
.hcard:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.hcard__index {
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 1.6rem;
}
.hcard h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1.2rem; line-height: 1;
}
.hcard p { color: var(--ink-dim); font-size: clamp(0.9rem, 1.5vw, 1.02rem); }
.hcard--accent { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-2)); }
.hcard--accent h3 { color: var(--accent-bright); }

/* ============ HERITAGE ============ */
.chapter--heritage { background-image: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(138, 51, 36, 0.05), transparent 55%); }

/* Breaking symbol */
.heritage__symbol {
  position: absolute; top: clamp(4rem, 10vh, 8rem); right: clamp(0.5rem, 6vw, 6rem);
  width: clamp(180px, 26vw, 340px); aspect-ratio: 1;
  opacity: 0.13; pointer-events: none; z-index: 1;
}
.heritage__symbol svg { width: 100%; height: 100%; overflow: visible; }
.symbol__stroke {
  stroke: var(--accent); stroke-width: 13; stroke-linecap: round; fill: none;
}
.symbol__stroke--head { stroke-width: 22; }
.symbol__half { transition: transform 1.4s var(--ease), opacity 1.4s; transform-origin: 100px 100px; }
.symbol__crack {
  fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: miter;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  transition: stroke-dashoffset 0.9s var(--ease);
}
.heritage__symbol.broken .symbol__half--l { transform: translate(-17px, 8px) rotate(-8deg); opacity: 0.55; }
.heritage__symbol.broken .symbol__half--r { transform: translate(15px, 12px) rotate(7deg); opacity: 0.55; }
.heritage__symbol.broken .symbol__crack { stroke-dashoffset: 0; }

/* Sticky-stacked dossiers */
.dossier-stack { display: flex; flex-direction: column; gap: clamp(2rem, 5vh, 3.5rem); }
.dossier {
  position: sticky;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(1.8rem, 4.5vw, 3.2rem);
  box-shadow: 0 -14px 40px rgba(36, 27, 16, 0.12);
  transform-origin: top center;
  transition: background-color 0.9s var(--ease);
  will-change: transform;
}
.dossier:nth-child(1) { top: clamp(84px, 12vh, 120px); }
.dossier:nth-child(2) { top: calc(clamp(84px, 12vh, 120px) + 18px); }
.dossier:nth-child(3) { top: calc(clamp(84px, 12vh, 120px) + 36px); }
.dossier__head { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.8rem; }
.dossier__file { font-size: 0.7rem; letter-spacing: 0.26em; color: var(--accent); }
.dossier__head h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 4.2vw, 2.7rem);
  border-bottom: 1px solid var(--line); padding-bottom: 0.7rem;
}
.stats--heritage { margin-top: clamp(2.5rem, 6vh, 4rem); grid-template-columns: repeat(2, 1fr); }

.redact { position: relative; white-space: nowrap; color: var(--ink); }
.redact::after {
  content: ""; position: absolute; inset: -0.05em -0.15em;
  background: var(--ink);
  transform-origin: right;
  transition: transform 1.1s var(--ease) 0.35s;
}
.redact.unredacted::after { transform: scaleX(0); }

.cite sup {
  font-family: var(--mono); font-size: 0.62em;
  color: var(--accent); padding: 0 0.15em;
  transition: color 0.3s;
}
.cite:hover sup { color: var(--accent-bright); }

.sources { margin-top: clamp(4rem, 9vh, 6rem); border-top: 1px solid var(--line); padding-top: 2rem; position: relative; z-index: 3; background: var(--bg); transition: background-color 0.9s var(--ease); }
.sources__head { font-size: 0.72rem; letter-spacing: 0.3em; color: var(--ink-dim); font-weight: 400; margin-bottom: 1.4rem; }
.sources__list { list-style: none; counter-reset: src; columns: 2; column-gap: 3rem; }
.sources__list li { counter-increment: src; margin-bottom: 0.7rem; break-inside: avoid; padding-left: 2.1em; position: relative; }
.sources__list li::before {
  content: "[" counter(src) "]";
  position: absolute; left: 0; top: 0.1em;
  font-family: var(--mono); font-size: 0.72rem; color: var(--accent);
}
.sources__list a {
  font-size: 0.85rem; color: var(--ink-dim);
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.sources__list a:hover { color: var(--ink); border-color: var(--accent); }
.sources__list li:target a { color: var(--accent); }

/* ============ SCHOOL ============ */
.chapter--school { background-image: radial-gradient(ellipse 80% 55% at 85% 8%, rgba(255, 198, 0, 0.06), transparent 55%); overflow: hidden; overflow: clip; }
.seal {
  position: absolute; top: clamp(3rem, 8vh, 6rem); right: clamp(0.5rem, 6vw, 5rem);
  width: clamp(160px, 22vw, 300px); aspect-ratio: 1;
  opacity: 0.16; pointer-events: none; z-index: 1;
}
.seal svg { width: 100%; height: 100%; }
.seal__ring {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-dasharray: 8 10;
  transform-origin: 100px 100px;
  animation: sealspin 40s linear infinite;
}
.seal__ring--inner { stroke-dasharray: 3 7; animation-direction: reverse; animation-duration: 55s; }
.seal__star { fill: var(--accent); opacity: 0.7; }
@keyframes sealspin { to { transform: rotate(360deg); } }

.school__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: clamp(2.5rem, 6vh, 4rem); }
.school__card {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card);
  padding: 1.8rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  transition: border-color 0.4s, transform 0.5s var(--ease), background 0.4s;
}
.school__card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.school__tag { font-size: 0.68rem; letter-spacing: 0.26em; color: var(--accent); }
.school__card h4 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.school__card p { color: var(--ink-dim); font-size: 0.9rem; flex: 1; }
.school__link { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--ink-faint); transition: color 0.3s; }
.school__card:hover .school__link { color: var(--accent); }

/* ============ LIBRARY ============ */
.chapter--library { overflow: hidden; overflow: clip; }
.motes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.motes i {
  position: absolute; border-radius: 50%;
  background: var(--accent);
  animation: mote linear infinite;
}
@keyframes mote {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: var(--o, 0.3); }
  88% { opacity: var(--o, 0.3); }
  100% { transform: translateY(-46vh); opacity: 0; }
}

.bookshelf {
  display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); align-items: flex-end;
  border-bottom: 3px solid var(--line);
  /* generous top padding so hover/tap tooltips render inside the scroll container */
  padding: clamp(5.5rem, 12vh, 7rem) 0.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  perspective: 1100px;
}
.book {
  position: relative; flex: 0 0 auto;
  width: clamp(110px, 13vw, 165px);
  transform-origin: bottom center;
  transition: transform 0.55s var(--ease);
}
.book img {
  display: block; width: 100%; height: auto;
  border-radius: 3px 6px 0 0;
  border: 1px solid var(--line); border-bottom: none;
  box-shadow: -8px 8px 22px rgba(0, 0, 0, 0.35);
  filter: saturate(0.92);
  transition: filter 0.4s;
}
.book:hover, .book:focus, .book--open { transform: rotateY(-16deg) translateY(-12px); outline: none; z-index: 4; }
.book:hover img, .book:focus img, .book--open img { filter: saturate(1.05); }
.book__meta {
  position: absolute; left: 50%; bottom: calc(100% + 0.8rem);
  transform: translateX(-50%) translateY(6px);
  width: max-content; max-width: 230px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.7em 1em;
  font-size: 0.74rem; color: var(--ink-dim); line-height: 1.45; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease);
  z-index: 5;
}
.book:hover .book__meta, .book:focus .book__meta, .book--open .book__meta { opacity: 1; transform: translateX(-50%) translateY(0); }

/* White paper cards */
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.wp-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); overflow: hidden;
  transition: border-color 0.4s, transform 0.5s var(--ease);
}
.wp-card:hover, .wp-card:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  outline: none;
}
.wp-card__thumb { aspect-ratio: 4 / 2.6; overflow: hidden; border-bottom: 1px solid var(--line); }
.wp-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  display: block; transition: transform 0.7s var(--ease);
}
.wp-card:hover .wp-card__thumb img { transform: scale(1.04); }
.wp-card__body { padding: 1.3rem 1.4rem 1.5rem; }
.wp-card__kicker { display: block; font-size: 0.64rem; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 0.7rem; }
.wp-card__body h4 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.15; margin-bottom: 0.5rem; }
.wp-card__body h4 a { color: inherit; text-decoration: none; }
.wp-card__body p { color: var(--ink-dim); font-size: 0.88rem; }
.wp-note { margin-top: 1.4rem; font-size: 0.8rem; color: var(--ink-faint); font-family: var(--mono); letter-spacing: 0.04em; max-width: 720px; }

/* White paper modal */
.wpmodal {
  position: fixed; inset: 0; z-index: 260;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.8rem, 3vw, 2rem);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.wpmodal.is-open { opacity: 1; visibility: visible; }
.wpmodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 8, 12, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wpmodal__panel {
  position: relative; z-index: 2;
  width: min(860px, 100%);
  max-height: min(88svh, 720px);
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 16px;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.4s var(--ease);
}
.wpmodal.is-open .wpmodal__panel { transform: translateY(0) scale(1); }
.wpmodal__close {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink); font-size: 0.95rem;
  transition: border-color 0.3s, color 0.3s;
}
.wpmodal__close:hover { border-color: var(--accent); color: var(--accent); }
.wpmodal__grid { display: grid; grid-template-columns: 280px 1fr; }
.wpmodal__thumbwrap { border-right: 1px solid var(--line); background: #10151d; }
.wpmodal__thumbwrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.wpmodal__content { padding: clamp(1.6rem, 4vw, 2.4rem); }
.wpmodal__kicker { display: block; font-size: 0.66rem; letter-spacing: 0.24em; color: var(--accent); margin-bottom: 0.9rem; }
.wpmodal__content h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.12;
  margin-bottom: 1rem;
}
.wpmodal__abstract { color: var(--ink-dim); font-size: 0.95rem; line-height: 1.65; }
.wpmodal__meta { margin-top: 1.3rem; font-size: 0.68rem; letter-spacing: 0.12em; color: var(--ink-faint); }
.wpmodal__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

/* ============ BOOK MODAL ============ */
/* Same shell as .wpmodal, but the inner deck is swipeable: the panel stays put
   while .bkmodal__deck slides and fades between books. */
.bkmodal {
  position: fixed; inset: 0; z-index: 260;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.8rem, 3vw, 2rem);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.bkmodal.is-open { opacity: 1; visibility: visible; }
.bkmodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 8, 12, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bkmodal__panel {
  position: relative; z-index: 2;
  width: min(760px, 100%);
  max-height: min(88svh, 680px);
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.4s var(--ease);
}
.bkmodal.is-open .bkmodal__panel { transform: translateY(0) scale(1); }
.bkmodal__close {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink); font-size: 0.95rem;
  transition: border-color 0.3s, color 0.3s;
}
.bkmodal__close:hover { border-color: var(--accent); color: var(--accent); }

/* Chevrons sit just inside the panel edge, vertically centred on the jacket. */
.bkmodal__nav {
  position: absolute; top: 50%; z-index: 4;
  transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  border: 1px solid var(--line); color: var(--ink-dim);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.bkmodal__nav svg { width: 20px; height: 20px; }
.bkmodal__nav:hover { border-color: var(--accent); color: var(--accent); background: var(--card); }
.bkmodal__nav--prev { left: 0.7rem; }
.bkmodal__nav--next { right: 0.7rem; }

.bkmodal__deck { flex: 1 1 auto; overflow-y: auto; will-change: transform, opacity; }
.bkmodal__deck.is-animating { transition: transform 0.32s var(--ease), opacity 0.32s var(--ease); }
.bkmodal__grid { display: grid; grid-template-columns: 260px 1fr; align-items: stretch; }
.bkmodal__thumbwrap {
  border-right: 1px solid var(--line);
  background: #10151d;
  display: grid; place-items: center;
  padding: clamp(1.4rem, 3vw, 2rem);
}
.bkmodal__thumbwrap img {
  display: block; width: 100%; height: auto; max-height: 340px;
  object-fit: contain;
  border: 1px solid var(--line); border-radius: 3px;
  box-shadow: -8px 8px 22px rgba(0, 0, 0, 0.45);
}
.bkmodal__content { padding: clamp(1.6rem, 4vw, 2.2rem); padding-right: 3.4rem; }
.bkmodal__kicker { display: block; font-size: 0.66rem; letter-spacing: 0.24em; color: var(--accent); margin-bottom: 0.9rem; }
.bkmodal__content h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 1.95rem); line-height: 1.12;
  margin-bottom: 0.5rem;
}
.bkmodal__byline { color: var(--ink); font-size: 0.85rem; margin-bottom: 1.1rem; }
.bkmodal__summary { color: var(--ink-dim); font-size: 0.92rem; line-height: 1.65; }
.bkmodal__note {
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: 0.85rem; line-height: 1.55; font-style: italic;
}
.bkmodal__foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem clamp(1.1rem, 3vw, 1.6rem);
  border-top: 1px solid var(--line);
  background: var(--card);
}
.bkmodal__count, .bkmodal__hint { font-size: 0.66rem; letter-spacing: 0.16em; color: var(--ink-faint); }

@media (max-width: 720px) {
  .bkmodal__grid { grid-template-columns: 1fr; }
  .bkmodal__thumbwrap { border-right: none; border-bottom: 1px solid var(--line); padding: 1.6rem; }
  .bkmodal__thumbwrap img { max-height: 220px; width: auto; }
  .bkmodal__content { padding-right: clamp(1.6rem, 4vw, 2.2rem); }
  /* On touch the swipe is the primary control, so the chevrons drop to the
     footer rail where they cannot sit on top of the jacket. */
  .bkmodal__nav { top: auto; bottom: 0.5rem; transform: none; width: 36px; height: 36px; }
  .bkmodal__nav--prev { left: auto; right: 3.6rem; }
  .bkmodal__nav--next { right: 0.7rem; }
  .bkmodal__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bkmodal, .bkmodal__panel, .bkmodal__deck.is-animating { transition: none; }
}

/* ============ WHY ME ============ */
.chapter--why { background-image: radial-gradient(ellipse 80% 55% at 15% 10%, rgba(91, 140, 255, 0.06), transparent 55%); }
.why__intro { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.why__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.why__pillar {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card);
  padding: 2rem 1.7rem;
  transition: border-color 0.4s, transform 0.5s var(--ease), background 0.4s;
}
.why__pillar:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.why__tag { display: block; font-size: 0.68rem; letter-spacing: 0.26em; color: var(--accent); margin-bottom: 1rem; }
.why__pillar h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; margin-bottom: 0.7rem; line-height: 1.15; }
.why__pillar p { color: var(--ink-dim); font-size: 0.92rem; }
.why__pillar--accent {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.why__pillar--accent h3 { color: var(--accent-bright); }

/* What-you-get readout */
.whyspec { display: flex; flex-direction: column; }
.whyspec__row {
  display: grid; grid-template-columns: 240px 1fr;
  gap: clamp(1.2rem, 3.5vw, 3rem); align-items: baseline;
  padding: 1.5rem 0.8rem;
  border-top: 1px solid var(--line);
  transition: background 0.4s, padding-left 0.4s var(--ease);
}
.whyspec__row:last-child { border-bottom: 1px solid var(--line); }
.whyspec__row:hover { background: var(--card); padding-left: 1.4rem; }
.whyspec__trait { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--accent); }
.whyspec__row p { color: var(--ink-dim); max-width: 680px; }
.whyspec__row:hover p { color: var(--ink); transition: color 0.4s; }
.whyspec__row p a {
  color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  transition: color 0.3s, border-color 0.3s;
}
.whyspec__row p a:hover { color: var(--accent-bright); border-color: var(--accent); }
.why__closer {
  margin-top: clamp(3rem, 7vh, 5rem); max-width: 820px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1.5;
  border-left: 2px solid var(--accent); padding-left: 1.4rem;
}
.why__closer em { color: var(--accent-bright); }

/* ============ Contact ============ */
.contact {
  padding: clamp(6rem, 14vh, 11rem) clamp(1.2rem, 5vw, 4.5rem) 0;
  min-height: 100svh; display: flex; flex-direction: column;
}
.contact .chapter__head { width: 100%; }
.contact__body { max-width: 1200px; margin: 0 auto; width: 100%; flex: 1; }
.contact__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 7.5vw, 6rem); line-height: 1.05;
  margin-bottom: clamp(3rem, 7vh, 5rem);
}
.contact__title span { display: block; }
.contact__title span:nth-child(3) { color: var(--accent); font-style: italic; }
.contact__ctas {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1.4rem;
}
.contact__email {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.15rem, 2.8vw, 1.8rem);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.3em;
  transition: color 0.4s;
}
.contact__email-arrow { color: var(--accent); transition: transform 0.4s var(--ease); }
.contact__email:hover { color: var(--accent-bright); }
.contact__email:hover .contact__email-arrow { transform: translateX(12px); }
.contact__body--grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.contact__portrait { max-width: 350px; justify-self: end; width: 100%; }
.contact__portrait img {
  display: block; width: 100%;
  aspect-ratio: 4 / 4.7;
  object-fit: cover; object-position: 50% 18%;
  border-radius: 16px;
  border: 1px solid var(--line);
  transition: border-color 0.4s, transform 0.5s var(--ease), box-shadow 0.5s;
}
.contact__portrait:hover img {
  transform: translateY(-6px) rotate(-1deg);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.contact__portrait figcaption {
  margin-top: 0.9rem;
  font-size: 0.66rem; letter-spacing: 0.24em;
  color: var(--ink-dim); text-align: center;
}
.contact__links { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: clamp(3rem, 8vh, 5rem); }
.contact__links a {
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); transition: color 0.3s;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
}
.contact__links a:hover { color: var(--accent); border-color: var(--accent); }

.footer {
  max-width: 1200px; margin: clamp(4rem, 10vh, 7rem) auto 0; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.8rem 0 2rem; border-top: 1px solid var(--line);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim);
}
.footer__tag { color: var(--ink-dim); font-style: italic; text-transform: none; letter-spacing: 0.05em; font-family: var(--serif); font-size: 0.85rem; }
.footer__top { background: none; border: none; color: var(--ink-dim); font: inherit; letter-spacing: inherit; text-transform: inherit; transition: color 0.3s; }
.footer__top:hover { color: var(--accent); }

/* ============ Responsive ============ */
@media (max-height: 780px) {
  .hero__title { font-size: clamp(3.2rem, 13vw, 9rem); }
  .hero__sub { margin-top: 1.6rem; }
}
@media (max-height: 620px) {
  .hero__scrollcue { display: none; }
}
@media (max-width: 900px) {
  .feature__grid { grid-template-columns: 1fr; }
  .feature__shot { transform: none; }
  .record__row--shot { grid-template-columns: 1fr; }
  .record__shot { max-width: 320px; }
  .army-mark { font-size: clamp(3rem, 14vw, 5rem); opacity: 0.1; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .chapter__cols { grid-template-columns: 1fr; }
  .products { grid-template-columns: 1fr; }
  .school__cards { grid-template-columns: 1fr; }
  .why__pillars { grid-template-columns: 1fr; }
  .whyspec__row { grid-template-columns: 1fr; gap: 0.5rem; }
  .wp-grid { grid-template-columns: 1fr; }
  .wpmodal__grid { grid-template-columns: 1fr; }
  .wpmodal__thumbwrap { border-right: none; border-bottom: 1px solid var(--line); max-height: 210px; }
  .contact__body--grid { grid-template-columns: 1fr; }
  .contact__portrait { justify-self: start; max-width: 300px; }
  .hero__avatar { width: 108px; height: 108px; }
  .nav__face { width: 32px; height: 32px; }
  .stats { grid-template-columns: 1fr; border-top: none; }
  .stat { border-left: none; border-top: 1px solid var(--line); padding-left: 0; }
  .record__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .sources__list { columns: 1; }
  .footer { flex-direction: column; text-align: center; gap: 0.8rem; }
  .map__legend { flex-direction: column; gap: 0.5rem; }
  .heritage__symbol { opacity: 0.08; }
  .seal { opacity: 0.1; }
  .dossier:nth-child(2), .dossier:nth-child(3) { top: clamp(84px, 12vh, 120px); }
}

/* Mobile map: scrollable frame with readable labels */
.map__hint {
  display: none;
  font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.6rem;
}
@media (max-width: 700px) {
  .map__frame { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #worldMap { min-width: 640px; }
  .maplabel { font-size: 18px; }
  .maplabel--sub { font-size: 13px; }
  .map__hint { display: block; }
}

/* Touch feedback: mirror hover states on tap for coarse pointers */
@media (hover: none) {
  .product:active, .school__card:active, .why__pillar:active {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .whyspec__row:active, .record__row:active, .stat:active { background: var(--card); }
  .whyspec__row:active p { color: var(--ink); }
  .feature:active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .hcard:active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .book:active { transform: rotateY(-16deg) translateY(-12px); }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-lines span { opacity: 1; transform: none; }
  .hero__word .ch { transform: none; }
  .redact::after { transform: scaleX(0); }
  .arc, .skyline__b { stroke-dashoffset: 0; }
  .skyline__win { opacity: 0.5; }
  .missiles, .motes { display: none; }
  .heritage__symbol.broken .symbol__crack { stroke-dashoffset: 0; }
  .wipe { display: none; }
}