/* ---------- Tokens ---------- */
:root {
  --bg: #f5f3ee;
  --bg-deep: #ecebe4;
  --ink: #1a1a1a;
  --accent: #e0532a;
  --ink-soft: #2a2a2a;
  --mid: #6b6b6b;
  --line: rgba(26, 26, 26, 0.12);
  --line-strong: rgba(26, 26, 26, 0.25);
  --accent: #1a1a1a;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 2.5vw, 32px);
  --max: 1640px;
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  cursor: none;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: none; }

/* ---------- Grain overlay ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  transition: opacity .65s ease;
}
#preloader.done { opacity: 0; pointer-events: none; }
.pl-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 6vw, 76px); letter-spacing: 0.02em;
  color: var(--ink); line-height: 1;
}
.pl-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--mid);
}
.pl-bar {
  width: min(220px, 44vw); height: 1px; margin-top: 14px;
  background: rgba(26,26,26,0.16); position: relative; overflow: hidden;
}
.pl-bar span {
  position: absolute; left: 0; top: 0; height: 100%; width: 0%;
  background: #f57b42;
}
.pl-pct {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--mid);
}
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none;
  z-index: 9999; will-change: transform;
  transform: translate3d(-100px, -100px, 0);
}
.cursor-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink);
  margin: -2.5px 0 0 -2.5px;
  transition: width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), background .2s;
}
.cursor-ring {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--ink);
  margin: -16px 0 0 -16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
  transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1),
              background .25s, color .25s, border-color .25s;
  background: transparent;
}
body.c-hover .cursor-ring {
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
body.c-hover .cursor-dot {
  width: 0; height: 0;
}
body.c-drag .cursor-ring {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  background: var(--accent); color: var(--bg);
  border-radius: 50%;
}

/* Enlarge the hit / hover trigger zone of small controls by a small ring
   (the cursor dot stays the same size — this only widens what it can catch) */
header.chrome .tr a,
header.chrome .tr button,
.proj-link,
#rz-overlay .rz-btn,
#dk-overlay .dk-ctrls button { position: relative; }
header.chrome .tr a::after,
header.chrome .tr button::after,
.proj-link::after,
#rz-overlay .rz-btn::after,
#dk-overlay .dk-ctrls button::after,
#dk-overlay .dk-arrow::after {
  content: ""; position: absolute; inset: -7px;
  border-radius: inherit; pointer-events: auto;
}

/* ---------- Frame chrome (mono labels at edges) ---------- */
.chrome {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
}
.chrome > * { position: absolute; pointer-events: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; }
.chrome .tl { top: 22px; left: var(--gutter); }
.chrome .tr { top: 22px; right: var(--gutter); display: flex; gap: 28px; align-items: center; }
.chrome .bl { bottom: 22px; left: var(--gutter); }
.chrome .br { bottom: 22px; right: var(--gutter); }
.chrome a:hover { font-style: italic; }
.lang-toggle {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 4px 10px; cursor: none; line-height: 1;
  transition: background .2s, color .2s;
}
.lang-toggle:hover { background: #f57b42; color: #fff; border-color: #f57b42; }
#cn-mirror-btn.on { background: #f57b42; color: #fff; border-color: #f57b42; }
.dot-pulse {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #2a8c47; margin-right: 8px; vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(42,140,71,.55); }
  50% { box-shadow: 0 0 0 6px rgba(42,140,71,0); }
}

/* ---------- Section base ---------- */
section { position: relative; padding: 0 var(--gutter); }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mid);
  display: flex; gap: 14px; align-items: baseline;
}
.eyebrow .num { color: var(--ink); }
.divider { height: 1px; background: var(--line); width: 100%; }

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh; padding-top: 84px; padding-bottom: 56px;
  display: grid; grid-template-rows: auto 1fr auto;
}
.hero-top { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; }
.hero-top .col-r { justify-self: end; text-align: right; color: var(--mid); max-width: 360px; }
.hero-center {
  display: grid; place-items: center;
  position: relative;
}
.hero-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 9.2vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-align: center;
}
.hero-display .word + .word { margin-left: 0.32em; }
.hero-display .it { font-style: italic; }
.hero-display .amp { font-style: italic; font-size: 0.85em; vertical-align: -0.04em; }
.hero-display .strike { position: relative; }
.hero-display .strike::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 55%;
  height: 6px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  animation: strikeIn 1.4s .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes strikeIn { to { transform: scaleX(1); } }

.hero-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.hero-bottom .col-c { text-align: center; color: var(--mid); }
.hero-bottom .scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
}
.scroll-cue .line {
  width: 1px; height: 38px; background: var(--ink);
  position: relative; overflow: hidden;
}
.scroll-cue .line::after {
  content: ""; position: absolute; inset: 0; background: var(--bg);
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  50%, 100% { transform: translateY(100%); }
}

.hero-meta { color: var(--mid); }
.hero-meta b { color: var(--ink); font-weight: 400; }

/* Hero → Index scroll cue */
.hero-to-index {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 34px;
  padding: 18px 0 64px;
  background: var(--bg);
}
/* Ask-AI pill sitting on the bottom edge of the digital-twin video */
.ask-wrap {
  position: relative; display: inline-block;
  padding-bottom: 34px;
}
.ask-bgvid {
  display: block;
  width: clamp(255px, 27vw, 345px); height: auto;
  border-radius: 10px;
  object-fit: contain;
  pointer-events: none;
}
.ask-ai {
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 1;
  white-space: nowrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
  background: rgba(245,243,238,0.82); backdrop-filter: blur(2px);
  border: 1px solid var(--ink);
  border-radius: 999px; padding: 11px 24px; cursor: none;
  transition: background .25s, color .25s, transform .25s, letter-spacing .25s;
}
.ask-ai:hover {
  background: #f57b42; color: #fff; border-color: #f57b42;
  transform: translate(-50%, calc(50% - 2px)); letter-spacing: 0.16em;
}
/* Animated vertical guide line below the scroll cue */
.scroll-track {
  width: 1px; height: 72px; background: rgba(26,26,26,0.18);
  position: relative; overflow: hidden;
}
.scroll-track .scroll-bead {
  position: absolute; left: 50%; top: 0;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: #f57b42;
  animation: scrollBead 1.9s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes scrollBead {
  0%   { top: -8px; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { top: 72px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-track .scroll-bead { animation: none; top: 30px; }
}

/* Hero name reveal */
.hero-center { position: relative; }
.hero-name {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(60px, 14vw, 240px);
  letter-spacing: 0.04em;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  user-select: none;
  transition: opacity 0.35s;
  -webkit-mask-image: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), black 0%, black 45%, transparent 80%);
          mask-image: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), black 0%, black 45%, transparent 80%);
}
.hero-name.active { opacity: 1; }
.hero-display { position: relative; z-index: 1; }
.dis-ch { display: inline-block; transition: opacity 0.4s; }
.word-see { display: inline-flex; align-items: center; gap: 0.02em; color: var(--ink); }
.eye-glyph { height: 0.6em; width: auto; display: inline-block; vertical-align: middle; margin: 0 0.01em; }
.hero-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Hero rotating sigil */
.sigil {
  position: absolute; top: 0; right: 0;
  width: clamp(120px, 14vw, 220px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.sigil svg { width: 100%; height: 100%; animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- MARQUEE ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden; padding: 18px 0;
  white-space: nowrap; position: relative;
}
.marquee-track { display: inline-flex; gap: 48px; animation: marq 38s linear infinite; will-change: transform; }
.marquee-track span {
  font-family: var(--serif); font-size: clamp(28px, 4.4vw, 64px); line-height: 1;
  display: inline-flex; align-items: center; gap: 48px;
}
.marquee-track .sep {
  font-family: var(--mono); font-size: 0.4em; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mid);
  align-self: center;
}
.marquee-track em { font-style: italic; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- INDEX (the 7 chapters) ---------- */
.index {
  padding-top: 50px; padding-bottom: 40px;
  position: relative;
}
.index-head {
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: baseline;
  padding-bottom: 16px; border-bottom: 1px solid var(--ink); margin-bottom: 0;
}
.index-head h2 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(36px, 4.8vw, 72px); line-height: 1; letter-spacing: -0.01em;
}
.index-head .note { color: var(--mid); }
.index-head .note.r { text-align: right; }

.row {
  display: grid; grid-template-columns: 80px 1fr auto auto;
  align-items: center; gap: 32px;
  padding: 14px 6px; border-bottom: 1px solid var(--line);
  position: relative; transition: padding .5s cubic-bezier(.2,.8,.2,1);
}
.row:hover { padding-left: 24px; }
.row .rn {
  font-family: var(--mono); font-size: 12px; color: var(--mid);
  letter-spacing: 0.08em;
}
.row .rt {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.6vw, 52px); line-height: 0.95; letter-spacing: -0.015em;
  position: relative; display: inline-flex; align-items: baseline; gap: 16px;
  color: var(--ink); transform-origin: left center;
  transition: color .35s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.row .rt .ital { font-style: italic; color: var(--mid); transition: color .4s; font-size: 0.6em; white-space: nowrap; }
.row:hover .rt { color: var(--row-c, var(--ink)); transform: scale(1.06); }
.row:hover .rt .ital { color: var(--row-c, var(--ink)); opacity: .8; }
.row:hover .rn,
.row:hover .rarrow { color: var(--row-c, var(--ink)); }
.row .rcount { color: var(--mid); font-family: var(--mono); font-size: 12px; min-width: 90px; text-align: right; }
.row .rarrow {
  font-family: var(--serif); font-style: italic; font-size: 28px;
  transform: translateX(-6px); opacity: 0.4; transition: all .4s;
}
.row:hover .rarrow { transform: translateX(0); opacity: 1; }

/* Preview that follows cursor on row hover */
.preview {
  position: fixed; top: 0; left: 0; width: 420px; aspect-ratio: 16 / 9;
  pointer-events: none; z-index: 50;
  opacity: 0; transform: translate3d(-9999px, -9999px, 0) scale(0.92);
  transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.25);
}
.preview.active { opacity: 1; }
.preview .pv {
  position: absolute; inset: 0; opacity: 0; transition: opacity .25s;
  display: grid; place-items: center;
}
.preview .pv.show { opacity: 1; }
.preview .pv img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- SELECTED WORK GRID ---------- */
.selected {
  padding-top: 140px; padding-bottom: 100px;
}
.selected-head {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding-bottom: 56px;
}
.selected-head h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6vw, 88px);
  line-height: 0.95; letter-spacing: -0.015em;
}
.selected-head h3 .it { font-style: italic; }
.selected-head .meta { color: var(--mid); justify-self: end; text-align: right; max-width: 320px; }

.proj-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
}
.proj {
  position: relative; overflow: hidden; background: var(--bg-deep);
  display: block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.proj .ph {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  background: var(--bg-deep);
  overflow: hidden;
}
.proj .ph svg { width: 100%; height: 100%; }
.proj.size-l { grid-column: span 7; }
.proj.size-m { grid-column: span 5; }
.proj.size-s { grid-column: span 4; }
.proj.size-w { grid-column: span 8; }
.proj.size-w .ph { aspect-ratio: 16 / 10; }
.proj.size-t { grid-column: span 4; }
.proj.size-t .ph { aspect-ratio: 3 / 4; }
.proj.size-mid { grid-column: span 6; }

.proj .meta {
  display: grid; grid-template-columns: 1fr auto;
  padding-top: 14px; gap: 16px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
}
.proj .meta .ttl { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; text-transform: none; }
.proj .meta .ttl em { font-style: italic; color: var(--mid); }
.proj .meta .tag { color: var(--mid); text-transform: uppercase; font-size: 10px; letter-spacing: 0.12em; align-self: center; }

.proj .hover-fill {
  position: absolute; inset: 0; background: var(--ink);
  transform: translateY(101%);
  transition: transform .7s cubic-bezier(.7,0,.2,1);
  display: flex; align-items: flex-end; padding: 20px;
  color: var(--bg);
}
.proj:hover .hover-fill { transform: translateY(0); }
.proj .hover-fill .meta-h {
  display: grid; gap: 6px; opacity: 0; transform: translateY(20px);
  transition: opacity .4s .15s, transform .5s .15s cubic-bezier(.2,.8,.2,1);
}
.proj:hover .hover-fill .meta-h { opacity: 1; transform: translateY(0); }
.proj .hover-fill .meta-h .num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(245,243,238,.55); }
.proj .hover-fill .meta-h .ttl { font-family: var(--serif); font-size: 28px; line-height: 1.05; }
.proj .hover-fill .meta-h .ttl em { font-style: italic; color: rgba(245,243,238,.7); }

/* ---------- About preview ---------- */
.about-preview {
  padding-top: 160px; padding-bottom: 160px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end;
  border-top: 1px solid var(--line);
}
.about-preview .text { max-width: 720px; }
.about-preview .text .big {
  font-family: var(--serif); font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05;
  letter-spacing: -0.015em; margin-top: 24px; margin-bottom: 32px;
}
.about-preview .text .big em { font-style: italic; }
.about-preview .text .big mark {
  background: var(--ink); color: var(--bg); padding: 0 .15em;
}
.about-preview .text p {
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink-soft);
  max-width: 520px;
}
.about-preview .portrait-col { display: grid; gap: 16px; justify-items: end; }
.about-preview .portrait {
  width: clamp(240px, 28vw, 420px); aspect-ratio: 3 / 4;
  background: var(--bg-deep); overflow: hidden; position: relative;
}
.about-preview .portrait svg { width: 100%; height: 100%; }
.about-preview .portrait-cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mid);
  display: flex; justify-content: space-between; width: clamp(240px, 28vw, 420px);
}

/* ---------- Contact ---------- */
.contact {
  padding-top: 160px; padding-bottom: 100px;
  border-top: 1px solid var(--ink);
}
.contact-head { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 60px; align-items: baseline; }
.contact-head .eyebrow { align-self: start; }
.contact-head .right { justify-self: end; color: var(--mid); max-width: 320px; text-align: right; }
.contact h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(64px, 12vw, 200px); line-height: 0.92; letter-spacing: -0.025em;
  padding-bottom: 32px;
}
.contact h2 .it { font-style: italic; }
.contact .email-btn {
  display: inline-block; position: relative;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(36px, 6vw, 88px); line-height: 1.1;
  letter-spacing: -0.015em;
}
.contact .email-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8%;
  height: 2px; background: var(--ink);
  transform: scaleX(0.04); transform-origin: left;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.contact .email-btn:hover::after { transform: scaleX(1); }
.contact-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-top: 80px; border-top: 1px solid var(--line); margin-top: 80px;
}
.contact-grid .col h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mid); margin-bottom: 14px;
}
.contact-grid .col a, .contact-grid .col p {
  font-family: var(--serif); font-size: 22px; line-height: 1.3; display: block;
}
.contact-grid .col a em, .contact-grid .col p em { font-style: italic; color: var(--mid); }
.contact-grid .col a:hover { font-style: italic; }

/* ---------- Footer ---------- */
footer {
  padding: 36px var(--gutter); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  color: var(--mid);
}
footer .c { text-align: center; }
footer .r { text-align: right; }
footer .timecode { color: var(--ink); }

/* ---------- Section transition lines (between sections) ---------- */
.linker {
  height: 100px; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mid);
}
.linker .seg { width: 1px; height: 100%; background: var(--line-strong); position: absolute; left: 50%; }
.linker .lbl { background: var(--bg); padding: 0 16px; position: relative; z-index: 2; }
.linker .arrow {
  position: absolute; left: 50%; bottom: -8px; width: 8px; height: 8px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: translateX(-50%) rotate(45deg); background: var(--bg);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .19s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .26s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .33s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .4s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .47s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .54s; }

/* Letters split */
.split-line { display: block; overflow: hidden; }
.split-line .word { display: inline-block; transform: translateY(105%); animation: wordIn 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes wordIn { to { transform: translateY(0); } }
.split-line .word:nth-child(1) { animation-delay: 0.05s; }
.split-line .word:nth-child(2) { animation-delay: 0.13s; }
.split-line .word:nth-child(3) { animation-delay: 0.21s; }
.split-line .word:nth-child(4) { animation-delay: 0.29s; }
.split-line .word:nth-child(5) { animation-delay: 0.37s; }
.split-line .word:nth-child(6) { animation-delay: 0.45s; }
.split-line .word:nth-child(7) { animation-delay: 0.53s; }
.split-line .word:nth-child(8) { animation-delay: 0.61s; }

/* ---------- Misc ---------- */
.hoverable { cursor: none; }

/* ============================================================ */
/* ============== CHAPTER COMMON ============================== */
/* ============================================================ */
.chapter {
  position: relative;
  padding: 120px var(--gutter) 100px;
  min-height: 100vh;
  border-top: 1px solid var(--line);
}
.chapter.ch-ai .ch-head,
.chapter.ch-webtool .ch-head,
.chapter.ch-parametric .ch-head { color: var(--ink); }
.chapter.ch-ai .ch-head .ch-num,
.chapter.ch-webtool .ch-head .ch-num,
.chapter.ch-parametric .ch-head .ch-num { color: var(--ink); }
.chapter.ch-ai .ch-head .ch-num span,
.chapter.ch-webtool .ch-head .ch-num span,
.chapter.ch-parametric .ch-head .ch-num span { color: var(--mid); }

.ch-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px;
  align-items: baseline;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 80px;
}
.ch-head.ch-head-light { border-bottom-color: rgba(245,243,238,.18); }
.ch-num {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  color: var(--ink);
}
.ch-num span { color: var(--mid); margin-left: 4px; }
.ch-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 6vw, 92px); line-height: 0.95; letter-spacing: -0.015em;
}
.ch-title .it { font-style: italic; color: var(--mid); }
.chapter.ch-ai .ch-title .it,
.chapter.ch-webtool .ch-title .it,
.chapter.ch-parametric .ch-title .it { color: var(--mid); }
.ch-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--mid); justify-self: end;
}

/* ============================================================ */
/* ============== CHAPTER ABOUT (ROTATING COLLAGE) ============ */
/* ============================================================ */
.ch-about {
  background: var(--bg);
  padding: 80px var(--gutter) 80px;
  position: relative;
  overflow: hidden;
}
.ab2-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 32px;
}
.ab2-head-l {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 20px;
}
.ab2-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mid);
  padding-top: 12px;
}
.ab2-eyebrow em { font-style: italic; color: var(--ink); text-transform: none; }
.ab2-display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 920px;
}
.ab2-display .it { font-style: italic; }

/* Stage with rotating collage + callouts */
.ab2-stage {
  position: relative;
  height: clamp(520px, 64vh, 680px);
  margin: 0 auto;
  max-width: 1400px;
}
.ab2-spin {
  position: absolute; left: 50%; top: 50%;
  width: clamp(360px, 38vw, 520px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.ab2-collage {
  width: 100%; height: 100%;
  position: relative;
}
.ab2-video {
  width: 100%; height: 100%;
  background: transparent;
  overflow: hidden;
  transform: scale(1.5);          /* enlarge the About video 1.5× */
  transform-origin: center;
}
.ab2-video svg { width: 100%; height: 100%; display: block; }

/* Anchor squares — JS sets target --ax / --ay percentages */
.ab2-anchor {
  position: absolute;
  left: var(--ax, 50%); top: var(--ay, 50%);
  width: 18px; height: 18px;
  background: var(--accent);
  outline: 2px solid var(--bg);
  transform: translate(-50%, -50%);
  z-index: 3;
  transition: left 0.65s cubic-bezier(.4, 1.2, .4, 1), top 0.65s cubic-bezier(.4, 1.2, .4, 1);
}

/* SVG lines layer (covers stage) */
.ab2-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Callout tags around stage */
.ab2-tag {
  position: absolute;
  display: grid; gap: 4px;
  max-width: 220px;
  z-index: 4;
}
.tag-tl { left: 0; top: 4%; }
.tag-tr { right: 0; top: 8%; text-align: right; }
.tag-br { right: 0; bottom: 14%; text-align: right; }
.tag-bl { left: 0; bottom: 8%; }
.ab2-tag.tag-hidden { display: none; }
.ab2-anchor.anc-hidden { display: none; }

.tag-key {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mid);
}
.tag-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05;
  letter-spacing: -0.01em; color: var(--ink);
}
.tag-name em { font-style: italic; color: var(--mid); }
.tag-meta {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  letter-spacing: 0.04em; line-height: 1.55;
}
/* Skills: hide the (empty) top key line; widen so tool lists read on fewer lines */
.ab2-tag.no-key .tag-key { display: none; }
#ab2-stage.cat-skills .ab2-tag { max-width: 300px; }
#ab2-stage.cat-skills .tag-meta { font-size: 10px; }
.tag-meta .grp {
  display: inline-block; min-width: 46px;
  color: var(--mid); text-transform: uppercase;
  font-size: 8.5px; letter-spacing: 0.16em;
}
.tag-tr .tag-meta .grp, .tag-br .tag-meta .grp { margin-left: 6px; }
.tag-tl .tag-meta .grp, .tag-bl .tag-meta .grp { margin-right: 6px; }

/* Foot bar: bio left + category switcher right */
.ab2-foot {
  display: grid; grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: end;
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.ab2-bio { max-width: 480px; }
.ab2-bio p {
  font-family: var(--mono); font-size: 13px; line-height: 1.65;
  color: var(--ink-soft);
}
.ab2-pings {
  display: flex; gap: 18px;
  margin-top: 14px;
}
.ab2-pings .ping {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mid);
  display: flex; align-items: center; gap: 6px;
}
.ab2-pings .ping .dot {
  width: 7px; height: 7px; background: #2a8c47;
  box-shadow: 0 0 0 0 rgba(42,140,71,.55);
  animation: pulse 1.6s ease-in-out infinite;
}

.ab2-switch {
  display: flex; gap: 4px;
  border: 1px solid var(--line);
  padding: 4px;
}
.ab2-switch .sw {
  display: grid; grid-template-rows: auto auto;
  gap: 4px;
  padding: 10px 16px;
  border: none; background: none;
  font-family: inherit; text-align: left;
  cursor: pointer;
  color: var(--mid);
  transition: background 0.35s, color 0.35s;
}
.ab2-switch .sw:hover { color: var(--ink); }
.ab2-switch .sw.active {
  background: var(--accent);
  color: var(--bg);
}
.ab2-switch .sw .sw-num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
}
.ab2-switch .sw .sw-ttl {
  font-family: var(--serif); font-size: 18px; line-height: 1;
}
.ab2-switch .sw .sw-ttl em { font-style: italic; }
.ab2-switch .sw.active .sw-num,
.ab2-switch .sw.active .sw-ttl em { color: rgba(245,243,238,.7); }
.ch-about {
  background: var(--bg);
  padding: 100px var(--gutter) 120px;
}
.ab-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px;
  align-items: baseline;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 64px;
}
.ab-head .ch-num {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
}
.ab-head .ch-num span { color: var(--mid); margin-left: 4px; }
.ab-head .ch-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 6vw, 92px); line-height: 0.95; letter-spacing: -0.015em;
}
.ab-head .ch-title .it { font-style: italic; color: var(--mid); }
.ab-head .ch-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--mid); justify-self: end;
}

/* Top half: image + intro */
.ab-top {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: stretch;
  margin-bottom: 100px;
}
.ab-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-deep);
  cursor: none;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.25);
  position: relative;
  transition: transform 0.5s;
}
.ab-portrait:hover { transform: translateY(-4px); }
.ab-portrait svg { width: 100%; height: 100%; display: block; }

.ab-intro {
  display: flex; flex-direction: column; gap: 18px;
  justify-content: center;
}
.ab-lead {
  font-family: var(--serif); font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.1; letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.ab-lead em { font-style: italic; }
.ab-lead mark { background: var(--ink); color: var(--bg); padding: 0 0.2em; }
.ab-body {
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  color: var(--ink-soft);
  max-width: 580px;
}
.ab-body em { font-style: italic; color: var(--ink); }

.ab-quick {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.ab-quick .qi {
  display: flex; flex-direction: column; gap: 4px;
}
.ab-quick .qk {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mid);
}
.ab-quick .qv {
  font-family: var(--serif); font-size: 18px; letter-spacing: -0.005em;
}
.ab-quick .qv em { font-style: italic; color: var(--mid); }

/* Accordion */
.ab-accordion {
  border-top: 1px solid var(--ink);
}
.ab-acc-row { border-bottom: 1px solid var(--line); }
.ab-acc-head {
  display: grid; grid-template-columns: 60px 1fr 40px;
  align-items: center;
  width: 100%;
  padding: 32px 8px;
  background: none; border: none;
  text-align: left;
  cursor: none;
  font-family: inherit;
  transition: padding 0.4s cubic-bezier(.2,.8,.2,1);
}
.ab-acc-row:hover .ab-acc-head { padding-left: 20px; }
.aah-num {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  color: var(--mid);
}
.ab-acc-row.open .aah-num { color: var(--ink); }
.aah-ttl {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 64px); line-height: 1;
  letter-spacing: -0.015em;
  color: var(--mid);
  transition: color 0.4s;
}
.ab-acc-row.open .aah-ttl,
.ab-acc-row:hover .aah-ttl { color: var(--ink); }
.aah-ttl em { font-style: italic; color: var(--mid); }
.aah-icon {
  font-family: var(--serif); font-size: 28px; line-height: 1;
  color: var(--ink); justify-self: end;
  transition: transform 0.4s;
}

.ab-acc-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 8px 0 60px;
  transition: max-height 0.7s cubic-bezier(.65,0,.2,1), padding 0.5s;
}
.ab-acc-row.open .ab-acc-body {
  max-height: 1400px;
  padding-bottom: 40px;
}

/* Timeline inside accordion */
.ab-timeline {
  list-style: none; display: grid; gap: 22px;
}
.ab-timeline li {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 28px;
  padding: 14px 0;
  border-top: 1px dashed var(--line);
}
.ab-timeline li:first-child { border-top: none; padding-top: 0; }
.ab-yr {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--mid); padding-top: 6px;
}
.ab-role h4 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.ab-role h4 em { font-style: italic; color: var(--mid); }
.ab-role p {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--ink-soft); max-width: 640px;
}

/* Skills layout */
.ab-skills {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.sk-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sk-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mid);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}
.sk {
  font-family: var(--serif); font-size: 18px; letter-spacing: -0.005em;
  padding: 4px 0;
}

/* ============================================================ */
/* ============== CHAPTER AI (CUBE) =========================== */
/* ============================================================ */
.ch-ai { padding: 0; min-height: 0; }
.ai-scroller { height: 320vh; position: relative; }
.ai-stage {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
  padding: 80px var(--gutter) 40px;
  background: var(--bg); color: var(--ink);
  border-top: 1px solid var(--line);
}
.ai-stage .ch-head { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }

.ai-scene {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.2fr 1fr;
  gap: 40px; align-items: center;
  margin-top: 20px;
}

.ai-floats { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ai-floats span {
  position: absolute; left: var(--x); top: var(--y);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(26,26,26,.28);
  animation: floatY 6s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); opacity: .3; }
  50% { transform: translateY(-12px); opacity: .55; }
}

/* Cube */
.cube-wrap {
  position: relative; z-index: 2;
  perspective: 1400px;
  display: grid; place-items: center;
  height: 480px;
}
.cube {
  position: relative;
  width: 360px; height: 360px;
  transform-style: preserve-3d;
  /* Will be driven by JS via --rot and --scale */
  transform: scale(var(--scale, 0.3)) translateZ(var(--tz, -200px)) rotateX(-12deg) rotateY(var(--rot, 0deg));
  transition: transform 0.1s linear;
}
.cube .face {
  position: absolute; inset: 0;
  background: var(--bg-deep);
  border: 1px solid rgba(26,26,26,.12);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(26,26,26,0.06);
}
.cube .face svg { width: 100%; height: 100%; }
.cube .f0 { transform: rotateY(0deg) translateZ(180px); }
.cube .f1 { transform: rotateY(90deg) translateZ(180px); }
.cube .f2 { transform: rotateY(180deg) translateZ(180px); }
.cube .f3 { transform: rotateY(270deg) translateZ(180px); }
.cube-shadow {
  position: absolute; bottom: 40px; left: 50%;
  width: 280px; height: 24px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 70%);
  transform: translateX(-50%) scale(var(--scale, 0.3));
  filter: blur(8px);
}

/* Info panels */
.ai-info { position: relative; z-index: 3; }
.ai-info-l {
  display: grid; gap: 0;
  align-self: center;
}
.ai-info-row {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1);
}
.ai-info-row.active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.ai-info-l { position: relative; min-height: 240px; }
.ai-info-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--mid); margin-bottom: 16px;
}
.ai-info-num span { color: var(--mid); opacity: .6; }
.ai-info-ttl {
  font-family: var(--serif); font-size: clamp(36px, 4.2vw, 56px); line-height: 1; letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.ai-info-ttl em { font-style: italic; color: var(--mid); }
.ai-info-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mid);
  margin-bottom: 20px;
}
.ai-info-desc {
  font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--ink-soft);
  max-width: 420px;
}

.ai-info-r {
  display: flex; flex-direction: column; gap: 24px;
  align-items: flex-end; align-self: center;
  text-align: right;
}
.ai-face-indicator {
  display: flex; gap: 10px;
}
.ai-face-indicator .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(26,26,26,.2);
  transition: background .3s, transform .3s;
}
.ai-face-indicator .dot.active {
  background: var(--ink);
  transform: scale(1.4);
}
.ai-face-progress {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--mid);
}
.ai-face-progress .cur { color: var(--ink); font-size: 18px; }
.ai-face-progress .sep { margin: 0 4px; color: var(--mid); opacity: .6; }
.ai-hint {
  font-family: var(--mono); font-size: 11px; line-height: 1.7;
  color: var(--mid); letter-spacing: 0.04em;
  max-width: 200px;
}
.ai-hint em { font-style: italic; color: var(--ink); }

/* Cursor change near cube */
body.c-video .cursor-ring {
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  background: #f57b42;
  color: #fff;
  border-color: #f57b42;
  font-size: 9px;
  font-style: italic;
  font-family: var(--serif);
}
body.c-video .cursor-dot { width: 0; height: 0; }
/* "Open" cursor — orange circle */
body.c-open .cursor-ring {
  background: #f57b42;
  color: #fff;
  border-color: #f57b42;
}

/* ============================================================ */
/* ============== CHAPTER ARVR (SPLIT PANES) ================== */
/* ============================================================ */
.ch-arvr { background: var(--bg); padding-bottom: 80px; }
.arvr-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  height: clamp(560px, 78vh, 820px);
  /* Width ratios driven by --left and --right (each 0..1) */
  grid-template-columns: var(--left, 1fr) var(--right, 1fr);
  transition: grid-template-columns 0.7s cubic-bezier(.2,.85,.25,1);
}
.arvr-split.h-l { --left: 3fr; --right: 1fr; }
.arvr-split.h-r { --left: 1fr; --right: 3fr; }

.arvr-pane {
  position: relative;
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden;
  cursor: none;
  background: var(--bg);
  border-radius: 4px;
  transition: filter 0.5s, transform 0.5s;
}
/* Dim the non-hovered pane slightly */
.arvr-split.h-l .arvr-pane[data-side="r"],
.arvr-split.h-r .arvr-pane[data-side="l"] {
  filter: brightness(0.95) saturate(0.85);
}

.arvr-pane-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
}
.arvr-pane-media svg {
  width: 100%; height: 100%;
  display: block;
  transition: transform 1.4s cubic-bezier(.2,.85,.25,1);
}
.arvr-pane:hover .arvr-pane-media svg { transform: scale(1.04); }

.arvr-shape-spin { animation: arvrSpin 60s linear infinite; transform-origin: 400px 400px; }
.arvr-shape-spin-rev { animation: arvrSpin 70s linear infinite reverse; transform-origin: 400px 400px; }
@keyframes arvrSpin { to { transform: rotate(360deg); } }

.arvr-pane-info {
  padding: 24px 28px 26px;
  background: var(--bg);
  display: grid; gap: 10px;
  border-top: 1px solid var(--line);
  /* Content collapses when pane is shrunk */
  overflow: hidden;
  min-width: 0;
}
.arvr-pane-info.dark {
  background: var(--ink);
  color: var(--bg);
  border-top-color: rgba(245,243,238,.18);
}
.arvr-pane-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
}
.arvr-pane-info.dark .arvr-pane-meta { color: rgba(245,243,238,.6); }
.arvr-pane-meta .arvr-go {
  text-transform: none; letter-spacing: 0;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--ink);
}
.arvr-pane-info.dark .arvr-pane-meta .arvr-go { color: var(--bg); }
.arvr-pane-ttl {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.6vw, 56px); line-height: 1.0;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.arvr-pane-ttl em { font-style: italic; color: var(--mid); }
.arvr-pane-info.dark .arvr-pane-ttl em { color: rgba(245,243,238,.6); }
.arvr-pane-desc {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
  /* Smoothly hide when shrunk */
  opacity: var(--info-op, 1);
  transition: opacity 0.4s 0.05s;
}
.arvr-pane-info.dark .arvr-pane-desc { color: rgba(245,243,238,.75); }
.arvr-pane-stack {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
  opacity: var(--info-op, 1);
  transition: opacity 0.4s 0.05s;
}
.arvr-pane-stack span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  padding: 3px 9px;
  border: 1px solid rgba(26,26,26,.22);
  border-radius: 999px;
  color: var(--ink-soft);
}
.arvr-pane-info.dark .arvr-pane-stack span {
  border-color: rgba(245,243,238,.22);
  color: rgba(245,243,238,.85);
}

/* When pane is shrunk (other one is hovered), fade desc + stack */
.arvr-split.h-l .arvr-pane[data-side="r"] .arvr-pane-desc,
.arvr-split.h-l .arvr-pane[data-side="r"] .arvr-pane-stack,
.arvr-split.h-r .arvr-pane[data-side="l"] .arvr-pane-desc,
.arvr-split.h-r .arvr-pane[data-side="l"] .arvr-pane-stack {
  opacity: 0;
  transition: opacity 0.2s;
}
.arvr-split.h-l .arvr-pane[data-side="r"] .arvr-pane-ttl,
.arvr-split.h-r .arvr-pane[data-side="l"] .arvr-pane-ttl {
  font-size: clamp(20px, 1.8vw, 28px);
  transition: font-size 0.6s cubic-bezier(.2,.85,.25,1);
}
.arvr-pane-ttl { transition: font-size 0.6s cubic-bezier(.2,.85,.25,1); }
.arvr-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid); }

/* ============================================================ */
/* ============== CHAPTER UIUX ================================ */
/* ============================================================ */
.uiux-stack { display: grid; gap: 100px; }
.uiux-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; cursor: none;
}
.uiux-row-rev { grid-template-columns: 1fr 1fr; }
.uiux-row-rev .uiux-row-mock { order: 2; }
.uiux-row-rev .uiux-row-info { order: 1; }
.uiux-row-info { padding: 24px 0; }
.uiux-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mid); display: block; margin-bottom: 12px; }
.uiux-num span { color: var(--mid); opacity: .6; }
.uiux-ttl { font-family: var(--serif); font-size: clamp(36px, 4.2vw, 56px); line-height: 1; letter-spacing: -0.015em; margin-bottom: 8px; display: block; }
.uiux-ttl em { font-style: italic; color: var(--mid); }
.uiux-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid); display: block; margin-bottom: 24px; }
.uiux-desc { font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--ink-soft); max-width: 460px; }

.uiux-row-mock { display: grid; place-items: center; }

/* Phone frame */
.phone-frame {
  width: 280px; aspect-ratio: 9 / 19;
  background: var(--ink);
  border-radius: 38px;
  padding: 12px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.3);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.uiux-row:hover .phone-frame { transform: translateY(-6px) rotate(-1deg); }
.phone-screen {
  width: 100%; height: 100%;
  background: var(--bg);
  border-radius: 26px;
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
  font-family: var(--mono);
}
.phone-screen-dark { background: var(--ink); color: var(--bg); }
.ps-status {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.08em; color: var(--mid);
}
.phone-screen-dark .ps-status { color: rgba(245,243,238,.55); }
.ps-title {
  font-family: var(--serif); font-size: 28px; line-height: 1.05;
  letter-spacing: -0.01em; margin-top: 8px; margin-bottom: 6px;
}
.ps-title.light { color: var(--bg); }
.ps-title em { font-style: italic; color: var(--mid); }
.phone-screen-dark .ps-title em { color: rgba(245,243,238,.55); }
.ps-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center;
  font-size: 11px; letter-spacing: 0.02em;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.ps-row.dark { border-top-color: rgba(245,243,238,.12); color: rgba(245,243,238,.8); }
.ps-row.dark.err .dot { background: #c4513a; }
.ps-row .dot { width: 7px; height: 7px; background: var(--ink); border-radius: 50%; }
.phone-screen-dark .ps-row .dot { background: var(--bg); }
.ps-row .t { font-family: var(--mono); font-size: 10px; color: var(--mid); }
.ps-row.dark .t { color: rgba(245,243,238,.5); }
.ps-block {
  margin-top: auto;
  font-family: var(--serif); font-style: italic; font-size: 16px;
  line-height: 1.35; color: var(--ink-soft);
  padding-top: 12px; border-top: 1px solid var(--line);
}
.ps-block.light { color: rgba(245,243,238,.75); border-top-color: rgba(245,243,238,.12); }
.ps-block em { font-style: normal; color: var(--ink); }

/* Laptop frame */
.laptop-frame {
  width: 100%; max-width: 540px;
  display: grid; place-items: center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.uiux-row:hover .laptop-frame { transform: translateY(-6px); }
.laptop-screen {
  width: 100%; aspect-ratio: 16 / 10;
  background: var(--bg);
  border: 10px solid var(--ink);
  border-radius: 10px 10px 4px 4px;
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
  font-family: var(--mono); font-size: 11px;
}
.ls-bar {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 12px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  color: var(--mid); font-size: 10px; letter-spacing: 0.05em;
}
.ls-bar .ls-url { font-family: var(--mono); color: var(--ink); }
.ls-body { display: grid; grid-template-columns: 140px 1fr; }
.ls-sidebar {
  border-right: 1px solid var(--line); padding: 14px 12px;
  display: grid; gap: 6px;
  font-size: 11px;
}
.ls-sidebar > div { padding: 4px 8px; color: var(--mid); display: flex; justify-content: space-between; align-items: center; }
.ls-sidebar > div span { font-size: 9px; }
.ls-sidebar > div.active { background: var(--ink); color: var(--bg); border-radius: 2px; }
.ls-content { padding: 24px 24px; }
.ls-content h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 12px; }
.ls-content h3 em { font-style: italic; color: var(--mid); }
.ls-content p { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 6px; }
.laptop-base {
  width: 110%; height: 12px;
  background: var(--ink);
  border-radius: 0 0 14px 14px;
  margin-top: -2px;
  position: relative; z-index: -1;
}

/* Terminal in laptop */
.ls-terminal {
  padding: 18px 22px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-soft); line-height: 1.7;
  background: var(--bg);
  display: grid; gap: 2px;
}
.ls-terminal .dim { color: var(--mid); }
.ls-terminal .ok { color: #2a8c47; }
.ls-terminal em { font-style: italic; color: var(--ink); }
.cursor-blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.uiux-extras {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.uiux-extra { display: grid; gap: 16px; cursor: none; }
.uiux-extra-mock { aspect-ratio: 3 / 2; overflow: hidden; transition: transform .5s; }
.uiux-extra:hover .uiux-extra-mock { transform: translateY(-4px); }
.uiux-extra-meta {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: baseline;
}
.uiux-extra-meta .uiux-num,
.uiux-extra-meta .uiux-ttl,
.uiux-extra-meta .uiux-tag { margin: 0; display: inline; font-size: inherit; }
.uiux-extra-meta .uiux-num { font-size: 11px; }
.uiux-extra-meta .uiux-ttl { font-size: 22px; line-height: 1.2; }
.uiux-extra-meta .uiux-tag { font-size: 10px; }

/* ============================================================ */
/* ============== CHAPTER WEB TOOL (HORIZONTAL SCROLL) ======== */
/* ============================================================ */
.ch-webtool { padding: 0; min-height: 0; border-top: none; }
.wt-scroller { height: 600vh; position: relative; background: var(--bg); }
.wt-stage {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
  background: var(--bg); color: var(--ink);
  border-top: 1px solid var(--line);
}

.wt-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  padding: 80px var(--gutter) 0;
}
.wt-head .ch-head { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }

/* Background giant word — slow horizontal parallax via --wt-bg-x */
.wt-bg-type {
  position: absolute; left: 0; top: 50%;
  transform: translate(var(--wt-bg-x, 0px), -50%);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(220px, 32vw, 460px);
  line-height: 0.9; letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26,26,26,0.10);
  pointer-events: none; z-index: 0;
  white-space: nowrap; user-select: none;
}

/* Track holds 4 cards horizontally, translated by JS via --wt-x */
.wt-track {
  position: absolute; top: 0; left: 0;
  height: 100vh;
  display: flex; align-items: center;
  padding: 0 8vw;
  gap: 8vw;
  z-index: 2;
  transform: translate3d(var(--wt-x, 100vw), 0, 0);
  will-change: transform;
}

.wt-card {
  flex: 0 0 auto;
  width: clamp(360px, 32vw, 500px);
  background: var(--ink);
  color: var(--bg);
  border-radius: 18px;
  overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
  box-shadow: 0 30px 70px -22px rgba(0,0,0,0.35);
  cursor: none;
  transform:
    translateY(calc(var(--yoff, 0) * 1px))
    rotate(calc(var(--rot, 0) * 1deg));
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.wt-card:hover {
  transform:
    translateY(calc(var(--yoff, 0) * 1px - 8px))
    rotate(0deg) scale(1.025);
  box-shadow: 0 40px 90px -22px rgba(0,0,0,0.5);
  z-index: 4;
}
.wt-card-img {
  aspect-ratio: 3 / 2;
  background: var(--ink-soft);
  overflow: hidden;
}
.wt-card-img svg { width: 100%; height: 100%; display: block; }
.wt-card-body {
  padding: 22px 26px 26px;
  display: grid; gap: 6px;
  position: relative;
}
.wt-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(245,243,238,.55);
}
.wt-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05; letter-spacing: -0.015em;
  margin: 4px 0;
  color: var(--bg);
}
.wt-title .it { font-style: italic; color: rgba(245,243,238,.6); }
.wt-desc {
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  color: rgba(245,243,238,.75);
  max-width: 90%; padding-right: 32px;
}
.wt-arrow {
  position: absolute; top: 22px; right: 26px;
  font-family: var(--serif); font-style: italic;
  font-size: 32px; color: rgba(245,243,238,.7);
  transition: transform .3s, color .3s;
}
.wt-card:hover .wt-arrow { transform: translate(4px, -4px); color: var(--bg); }

/* Bottom progress + counter */
.wt-bottom {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 40px;
  z-index: 6;
  display: grid; grid-template-columns: 1fr auto auto; gap: 28px;
  align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--mid);
}
.wt-progress-bar {
  height: 1px; background: var(--line-strong); overflow: hidden;
}
.wt-progress-fill {
  height: 100%; width: 0%;
  background: var(--ink);
  transform-origin: left;
}
.wt-counter { color: var(--ink); }
.wt-counter .wt-cur { font-size: 18px; }
.wt-counter span:last-child { color: var(--mid); }
.wt-cue {
  color: var(--mid); font-style: italic; font-family: var(--serif);
  font-size: 14px; letter-spacing: 0;
  text-transform: none;
  justify-self: end;
}

/* ============================================================ */
/* ============== CHAPTER UIUX HERO + STICKY NOTE ============ */
/* ============================================================ */
.ch-uiux-hero { padding: 0; min-height: 0; border-top: none; background: var(--bg); }
.uiux-pin { height: auto; position: relative; background: var(--bg); }
.uiux-pin-stage {
  position: relative; height: auto;
  overflow: visible;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 230px var(--gutter) 150px;
}

/* Chapter meta top-left */
.uiux-hero-meta {
  position: absolute; top: 80px; left: var(--gutter); right: var(--gutter);
  z-index: 5;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  pointer-events: none;
}
.ch-num.light { color: var(--ink); }
.ch-num.light span { color: var(--mid); }
.ch-meta.light { color: var(--mid); font-size: 11px; }
.uiux-hero-meta .hm-l { display: flex; align-items: baseline; gap: 20px; }
.uiux-hero-meta .ch-title.light {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 6vw, 92px); line-height: 0.95;
  letter-spacing: -0.015em; color: var(--ink);
}
.uiux-hero-meta .ch-title.light .it { font-style: italic; color: var(--mid); }

/* Big hero image — nearly full width */
.uiux-hero-img {
  position: relative;
  width: 100%; height: auto;
  overflow: visible;
  border-radius: 14px;
  cursor: none;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.35);
}
.uiux-hero-img svg { width: 100%; height: 100%; display: block; }
.uiux-hero-img video, .uiux-hero-img img {
  width: 100%; height: auto;
  object-fit: contain;            /* keep the full video — no height crop */
  display: block;
  border-radius: 14px;
}

/* Big title overlay (top-left of image) */
.uiux-hero-title {
  position: absolute; left: 6%; top: 8%;
  z-index: 4;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(60px, 9vw, 140px);
  line-height: 0.92; letter-spacing: -0.025em;
  color: var(--bg);
  display: grid;
  pointer-events: none;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.uiux-hero-title .t1 { display: block; }
.uiux-hero-title .t2 em { font-style: italic; color: rgba(245,243,238,.75); }

/* Sticky note panel — small, like a real sticky */
.uiux-note {
  position: absolute;
  left: 50%; top: 80%;          /* on the video; shifted ½ note down & ½ note right from here */
  z-index: 6;
  width: clamp(280px, 24vw, 360px);
  background: #f3e8a8;
  color: #1a1a1a;
  padding: 22px 22px 18px;
  box-shadow:
    0 18px 40px -10px rgba(0,0,0,0.35),
    0 2px 4px rgba(0,0,0,0.12);
  font-family: var(--mono);
  border-radius: 2px;
  transform: rotate(-2deg);     /* anchored at left/top → ½ note right & ½ note down */
  transition: transform 0.3s ease;
  /* Subtle paper edge */
  background-image:
    linear-gradient(135deg, rgba(0,0,0,0.05) 0%, transparent 50%);
}
.uiux-note:hover { transform: rotate(0deg); }
.un-tape {
  position: absolute; top: -16px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 110px; height: 26px;
  background: rgba(245,243,238,0.55);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.un-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #6a5e3c;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0,0,0,0.18);
  margin-bottom: 12px;
}
.un-yr { font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; color: #1a1a1a; }
.un-img { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 12px; }
.un-img svg { width: 100%; height: 100%; display: block; }
.un-ttl {
  font-family: var(--serif); font-weight: 400;
  font-size: 30px; line-height: 1.0; letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.un-ttl em { font-style: italic; color: #6a5e3c; }
.un-desc {
  font-family: var(--mono); font-size: 11px; line-height: 1.55;
  color: #2f2a1c;
  margin-bottom: 14px;
}
.un-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(0,0,0,0.18);
  margin-bottom: 12px;
}
.un-tags span {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;
  padding: 3px 8px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
  color: #1a1a1a;
}
.un-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.08em;
  color: #1a1a1a;
}
.un-st {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); text-transform: uppercase;
}
.un-st .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2a8c47;
  box-shadow: 0 0 0 0 rgba(42,140,71,.55);
  animation: pulse 1.6s ease-in-out infinite;
}
.un-go {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  text-transform: none; letter-spacing: 0;
}

/* ============================================================ */
/* ============== CHAPTER DATA VIZ (FEATURED WORK · LIGHT) ==== */
/* ============================================================ */
.ch-dataviz {
  background: var(--bg);
  color: var(--ink);
  padding: 100px var(--gutter) 100px;
  border-top: 1px solid var(--line);
}
.ch-dataviz .ch-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px;
  align-items: baseline;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 56px;
}
.ch-dataviz .ch-head .ch-num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--ink); }
.ch-dataviz .ch-head .ch-num span { color: var(--mid); margin-left: 4px; }
.ch-dataviz .ch-head .ch-title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 92px); line-height: 0.95; letter-spacing: -0.015em; }
.ch-dataviz .ch-head .ch-title .it { font-style: italic; color: var(--mid); }
.ch-dataviz .ch-head .ch-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mid); justify-self: end; }

.dv3-stage {
  display: grid; grid-template-columns: minmax(320px, 36%) 1fr;
  gap: 72px;
  align-items: start;
}
.dv3-left { display: grid; gap: 28px; align-content: start; position: sticky; top: 80px; }
.dv3-blurb { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink-soft); max-width: 380px; }
.dv3-blurb em { font-style: italic; color: var(--ink); }

.dv3-project-meta {
  display: grid; gap: 10px; padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 110px;
}
.dv3-name { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -0.01em; transition: opacity 0.4s, transform 0.4s cubic-bezier(.2,.85,.25,1); }
.dv3-name em { font-style: italic; color: var(--mid); }
.dv3-desc { font-family: var(--mono); font-size: 12px; line-height: 1.65; color: var(--ink-soft); max-width: 420px; transition: opacity 0.4s, transform 0.4s cubic-bezier(.2,.85,.25,1); }
.dv3-name.swap, .dv3-desc.swap { opacity: 0; transform: translateY(8px); }

.dv3-thumbs-wrap { position: relative; padding-top: 22px; }
.dv3-marker {
  position: absolute; top: 4px; left: 0;
  width: 14px; height: 14px; background: var(--accent);
  transform: translateX(var(--mx, 0px));
  transition: transform 0.65s cubic-bezier(.55, 1.4, .35, 1);
  z-index: 2;
}
.dv3-thumbs { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dv3-thumb {
  position: relative; aspect-ratio: 5 / 3;
  overflow: hidden; cursor: none;
  opacity: 0.55;
  transition: opacity 0.4s, transform 0.4s cubic-bezier(.2,.85,.25,1);
  outline: 1px solid transparent;
}
.dv3-thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.dv3-thumb.active { opacity: 1; outline-color: var(--ink); }
.dv3-thumb svg { width: 100%; height: 100%; display: block; }

.dv3-right { position: relative; cursor: none; }
.dv3-cta {
  position: absolute; top: -12px; left: -12px; z-index: 6;
  background: var(--accent); color: var(--bg);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  padding: 6px 12px; transform: rotate(-2deg);
  transition: transform 0.4s, background 0.3s, color 0.3s;
  pointer-events: none;
}
.dv3-right:hover .dv3-cta { transform: rotate(0deg) translate(2px, -2px); background: var(--ink); color: var(--bg); }
.dv3-preview-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-deep); }
.dv3-preview {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.02);
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(.2,.85,.25,1);
  pointer-events: none;
}
.dv3-preview.active { opacity: 1; transform: scale(1); transition-delay: 0.05s; pointer-events: auto; }
.dv3-preview svg { width: 100%; height: 100%; display: block; }

/* ============================================================ */
/* ============== CHAPTER MANAGEMENT (PROXIMITY WALL) ========= */
/* ============================================================ */
.ch-mgmt {
  background: var(--bg);
  padding: 100px var(--gutter) 100px;
  border-top: none;
  position: relative;
  overflow: hidden;
}
.ch-mgmt .ch-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px;
  align-items: baseline;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 36px;
  position: relative; z-index: 5;
}
.mg-wall {
  position: relative;
  height: clamp(700px, 85vh, 980px);
  background: #d4d2cb;
  overflow: hidden;
}
.mg-wall::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(212, 210, 203, 0.35);
  pointer-events: none;
  z-index: 2;
}
.mg-photos {
  position: absolute; inset: -8%;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.6s cubic-bezier(.2,.85,.25,1);
  will-change: transform;
}
/* 9 photos positioned via custom props */
.mg-photo {
  position: absolute;
  left: var(--x, 0); top: var(--y, 0);
  width: var(--w, 20%); height: var(--h, 30%);
  transform: rotate(var(--tilt, 0deg));
  overflow: hidden;
  filter: grayscale(calc(1 - var(--br, 0) * 0.4)) brightness(calc(0.75 + var(--br, 0) * 0.25)) saturate(calc(0.4 + var(--br, 0) * 0.6));
  transition: filter 0.15s linear, transform 0.6s cubic-bezier(.2,.85,.25,1);
  will-change: filter, transform;
  pointer-events: none;
  z-index: 1;
}
.mg-photo.active {
  transform: rotate(var(--tilt, 0deg)) scale(1.04);
  filter: grayscale(0) brightness(1) saturate(1);
  z-index: 5;
}
.mg-photo svg { width: 100%; height: 100%; display: block; }

/* Dot anchors */
.mg-dot {
  position: absolute;
  left: var(--dx, 50%); top: var(--dy, 50%);
  width: 14px; height: 14px;
  background: #f5f3ee;
  border: 1px solid rgba(26,26,26,.3);
  transform: translate(-50%, -50%);
  cursor: none;
  z-index: 4;
  transition: background 0.3s, transform 0.3s;
  padding: 0;
}
/* Invisible ~1cm hit-area around each dot so it's easy to trigger */
.mg-dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 92px; height: 92px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.mg-dot:hover, .mg-dot.hot {
  background: var(--accent);
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.3);
}

/* Info card */
.mg-info {
  position: absolute;
  left: var(--ix, -9999px); top: var(--iy, -9999px);
  z-index: 6;
  width: clamp(220px, 22vw, 280px);
  pointer-events: none;
  opacity: 0;
  transform: translate(20px, -50%);
  transition: opacity 0.3s;
  color: var(--ink);
}
.mg-info.show { opacity: 1; pointer-events: auto; }
.mg-info .proj-links { margin-top: 12px; }
.mg-info-key {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 6px;
}
.mg-info-name {
  font-family: var(--serif); font-weight: 400;
  font-size: 28px; line-height: 1.0; letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--ink);
}
.mg-info-name em { font-style: italic; color: var(--ink); opacity: .7; }
.mg-info-desc {
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  color: var(--ink);
}
.mg-info-go {
  display: inline-block; margin-top: 10px;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--bg);
}

.mg-foot {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--mid);
  padding-top: 18px; margin-top: 18px;
  border-top: 1px solid var(--line);
}
.mg-foot em { font-style: italic; color: var(--ink); text-transform: none; }

/* ============================================================ */
/* ============== CHAPTER PARAMETRIC (HOW IT WORKS) =========== */
/* ============================================================ */
.ch-parametric { padding: 0; min-height: 0; border-top: none; }
.hw-scroller { height: 700vh; position: relative; background: var(--bg); }
.hw-stage {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
  padding: 60px var(--gutter) 40px;
  background: var(--bg);
  display: grid; grid-template-rows: auto 1fr auto;
}

.hw-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 56px;
}
.hw-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 80px); line-height: 0.95;
  letter-spacing: -0.02em;
}
.hw-title .it { font-style: italic; color: var(--mid); }
.hw-eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em;
  color: var(--ink);
}
.hw-eyebrow em { font-style: italic; color: var(--mid); }

/* Grid */
.hw-grid {
  display: grid; grid-template-columns: minmax(300px, 34%) 1fr;
  gap: 72px;
  align-items: center;
  min-height: 0;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

/* LEFT: vertical image carousel */
.hw-images {
  position: relative;
  max-height: 62vh;
  aspect-ratio: 1055 / 1491;        /* match the source images so nothing is cropped */
  overflow: hidden;
  background: transparent;          /* no beige side bands — just the image */
  cursor: none;
  border-radius: 2px;
  justify-self: center;
  align-self: center;
  width: 100%;
}
.hw-image-track {
  position: absolute; top: 0; left: 0; right: 0;
  height: 100%;                                   /* one window tall — so one step = one image */
  transform: translateY(calc(var(--hw-y, 0) * -100%));
  transition: transform 0.9s cubic-bezier(.65,0,.2,1);
  will-change: transform;
}
.hw-image {
  width: 100%; height: 100%;
  overflow: hidden;
}
.hw-image svg { width: 100%; height: 100%; display: block; }
.hw-image img, .hw-image video {
  width: 100%; height: 100%;
  object-fit: contain;            /* show the whole image — no crop */
  display: block;
}

/* RIGHT: list with single floating marker */
/* RIGHT: list with single floating marker */
.hw-list {
  list-style: none;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 10px;
  padding: 0;
  position: relative;
  align-self: center;
}
.hw-marker-float {
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 14px;
  background: var(--accent);
  transform: translateY(var(--my, 0px));
  transition:
    transform 0.7s cubic-bezier(.55, 1.55, .35, 1),
    background 0.4s;
  pointer-events: none;
  z-index: 2;
}
.hw-item {
  display: grid; grid-template-columns: 1fr;
  gap: 4px;
  align-items: start;
  padding: 4px 0 4px 32px;
  cursor: pointer;
  transition: opacity 0.5s, transform 0.5s;
  opacity: 0.5;
  position: relative;
}
.hw-item:hover { opacity: 0.85; }
.hw-item.active { opacity: 1; }
.hw-row {
  display: flex; align-items: baseline; gap: 14px;
}
.hw-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--mid);
}
.hw-item.active .hw-num { color: var(--ink); }
.hw-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px); line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--mid);
  transition: color 0.5s;
}
.hw-name em { font-style: italic; color: var(--mid); opacity: .7; }
.hw-item.active .hw-name { color: var(--ink); }
.hw-item.active .hw-name em { color: var(--mid); opacity: 1; }

.hw-desc {
  font-family: var(--mono); font-size: 11px; line-height: 1.55;
  color: var(--mid);
  max-width: 460px;
  margin-top: 4px;
  transition: color 0.4s;
}
.hw-item.active .hw-desc { color: var(--ink-soft); }

.hw-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--mid);
}
.hw-counter { color: var(--ink); }
.hw-counter #hw-cur { font-size: 18px; }
.hw-counter .sep { margin: 0 4px; color: var(--mid); }
.hw-cue em { font-style: italic; color: var(--ink); text-transform: none; letter-spacing: 0; }

/* ============================================================ */
/* ============== MINI TOC ==================================== */
/* ============================================================ */
.mini-toc {
  position: fixed; left: var(--gutter); bottom: 56px;
  z-index: 200; pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1);
  background: rgba(245,243,238,0.86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  min-width: 180px;
  font-family: var(--mono);
}
.mini-toc.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Onboarding hint — force-visible while it parks at left-centre then tucks away */
.mini-toc.intro { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Docked to a screen edge — peeks out as a tab, pops back on hover */
.mini-toc.docked {
  box-shadow: 0 10px 36px -14px rgba(0,0,0,0.4);
  will-change: transform;
}
.mini-toc.on-dark {
  background: rgba(26,26,26,0.78);
  border-color: rgba(245,243,238,0.18);
  color: var(--bg);
}
.mini-toc.on-dark .mt-lbl,
.mini-toc.on-dark .mt-count { color: rgba(245,243,238,.7); }
.mini-toc.on-dark .mt-list a { color: rgba(245,243,238,.6); }
.mini-toc.on-dark .mt-list a:hover,
.mini-toc.on-dark .mt-list a.active { color: var(--bg); }
.mini-toc.on-dark .mt-list a.active .n { color: var(--bg); }

.mt-head {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--mid);
  padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mini-toc.on-dark .mt-head { border-bottom-color: rgba(245,243,238,.18); }
.mt-list { list-style: none; display: grid; gap: 2px; }
.mt-list a {
  display: grid; grid-template-columns: 22px 1fr; gap: 8px;
  font-size: 11px; letter-spacing: 0.03em;
  color: var(--mid);
  padding: 4px 0;
  transition: color .25s, transform .25s;
  cursor: none;
}
.mt-list a:hover { color: var(--ink); transform: translateX(2px); }
.mt-list a.active { color: var(--ink); }
.mt-list a.active .n { color: var(--ink); }
.mt-list .n { color: var(--mid); }

/* ============================================================ */
/* ============== VIDEO MODAL ================================= */
/* ============================================================ */
.vmodal {
  position: fixed; inset: 0; z-index: 9000;
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.vmodal.open { opacity: 1; pointer-events: auto; }
/* Frosted background — click the exposed strip to close */
.vmodal-bg {
  position: absolute; inset: 0;
  background: rgba(245,243,238,0.05);
  backdrop-filter: blur(1.5px) saturate(1.03);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.03);
  cursor: none;
}
/* Project card open: freeze the blurred home behind it (no background scroll) */
body.vm-locked { overflow: hidden; }
/* Right-anchored drawer; narrower so more of the blurred home shows on the left */
.vmodal-panel {
  position: absolute; top: 0; right: 0;
  height: 100vh; width: min(1240px, 84vw);
  background: var(--bg-deep);
  display: grid; grid-template-columns: minmax(240px, 22%) 1fr;
  transform: translateX(102%);
  transition: transform .55s cubic-bezier(.22,.8,.25,1);
  box-shadow: -50px 0 90px -50px rgba(0,0,0,0.45);
  /* folder-style notch cut out of the top-left corner */
  clip-path: polygon(54px 0, 100% 0, 100% 100%, 0 100%, 0 54px);
}
.vmodal.open .vmodal-panel { transform: translateX(0); }
.vmodal-close {
  position: absolute; top: 20px; right: 18px; z-index: 6;
  font-family: var(--mono); font-size: 15px; line-height: 1;
  color: var(--vp-fg, var(--ink)); background: none; border: none; cursor: none;
  opacity: .8;
}
.vmodal-close:hover { color: var(--vp-acc, #f57b42); opacity: 1; }
/* Left info column — vivid per-project background, no visible scrollbar */
.vp-info {
  position: relative;
  background: var(--vp-bg, var(--bg));
  color: var(--vp-fg, var(--ink));
  padding: 62px 32px 44px;
  overflow-y: auto;
  -ms-overflow-style: none; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 18px;
}
.vp-info::-webkit-scrollbar { width: 0; height: 0; display: none; }
.vp-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--vp-soft, rgba(26,26,26,0.55));
}
.vp-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 2.6vw, 44px); line-height: 1.0;
  letter-spacing: -0.02em; color: var(--vp-fg, var(--ink)); margin: 0;
}
.vp-divider { height: 1px; background: var(--vp-line, rgba(26,26,26,0.18)); }
.vp-desc {
  display: flex; flex-direction: column; gap: 16px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.62;
  color: var(--vp-fg, rgba(26,26,26,0.82));
}
/* Right media column — flush to the panel: no padding, no gaps */
.vp-media {
  overflow-y: auto; overflow-x: hidden;
  background: var(--ink);
  padding: 0; margin: 0;
  display: block;
  -ms-overflow-style: none; scrollbar-width: none;
}
.vp-media::-webkit-scrollbar { width: 0; height: 0; display: none; }
.vp-item {
  position: relative; display: block; width: 100%;
  background: var(--ink); overflow: hidden;
  font-size: 0;
}
.vp-item video, .vp-item img {
  display: block; width: 100%; height: auto;
}
.vp-fs {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  font-family: var(--mono); font-size: 12px; line-height: 1;
  color: #fff; background: rgba(26,26,26,0.55);
  border: 1px solid rgba(245,243,238,0.25);
  padding: 7px 9px; cursor: none;
  transition: background .2s;
}
.vp-fs:hover { background: #f57b42; }
.vm-p { margin: 0; color: var(--vp-fg, var(--ink-soft)); }
.vm-sec { display: flex; flex-direction: column; gap: 7px; }
.vm-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--vp-acc, #f57b42); margin: 0;
}
.vm-li { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vm-li li { position: relative; padding-left: 16px; }
.vm-li li::before { content: "›"; position: absolute; left: 0; color: var(--vp-acc, #f57b42); }
.vm-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px;
}
.vm-flow .step {
  border: 1px solid var(--vp-line, var(--ink)); padding: 5px 10px;
  font-size: 11px; letter-spacing: 0.04em;
}
.vm-flow .arr { color: var(--vp-acc, #f57b42); font-weight: 600; }
@media (max-width: 860px) {
  .vmodal-panel { width: 100vw; grid-template-columns: 1fr; }
  .vp-info { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ============================================================ */
/* ============== AI ASSISTANT (digital twin) ================ */
/* ============================================================ */
.asst {
  position: fixed; inset: 0; z-index: 9100;
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.asst.open { opacity: 1; pointer-events: auto; }
.asst-bg {
  position: absolute; inset: 0;
  background: rgba(245,243,238,0.05);
  backdrop-filter: blur(1.5px) saturate(1.03);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.03);
  cursor: none;
}
/* Slides in from the LEFT, half the screen */
.asst-panel {
  position: absolute; top: 0; left: 0;
  height: 100vh; width: min(720px, 50vw);
  background: #9e3b32;                 /* vintage red panel */
  color: #f3e7d3;
  display: flex; flex-direction: column;
  transform: translateX(-102%);
  transition: transform .5s cubic-bezier(.22,.8,.25,1);
  box-shadow: 50px 0 90px -50px rgba(0,0,0,0.5);
  /* folder notch in the TOP-RIGHT corner (toward the exposed page) */
  clip-path: polygon(0 0, calc(100% - 54px) 0, 100% 54px, 100% 100%, 0 100%);
}
.asst.open .asst-panel { transform: translateX(0); }
.asst-close {
  position: absolute; top: 20px; right: 22px; z-index: 4;
  font-family: var(--mono); font-size: 15px; line-height: 1;
  color: #f3efe6; background: none; border: none; cursor: none; opacity: .8;
}
.asst-close:hover { color: #f4b06a; opacity: 1; }
/* Digital-twin reaction video, top-right of the panel */
.asst-twin {
  position: absolute; top: 64px; right: 26px; z-index: 4;
  width: 132px; height: auto;
  object-fit: contain; border-radius: 8px;
  border: 1px solid rgba(243,231,211,0.45);
  background: #7d2c25;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,0.5);
  opacity: 0; transform: scale(0.9);
  transition: opacity .4s ease, transform .4s ease;
}
.asst.open .asst-twin { opacity: 1; transform: scale(1); }
.asst-head { padding: 56px 34px 16px; flex: 0 0 auto; padding-right: 160px; }
.asst-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(243,239,230,0.6);
}
.asst-title {
  font-family: var(--serif); font-weight: 400; margin: 8px 0 0;
  font-size: clamp(26px, 2.4vw, 38px); line-height: 1.0; letter-spacing: -0.02em;
}
/* 1 · answer box (scrolls) */
.asst-answer {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 8px 34px 0; padding: 18px 0;
  border-top: 1px solid rgba(243,239,230,0.18);
  font-family: var(--mono); font-size: 13px; line-height: 1.66;
  color: rgba(243,239,230,0.92);
  -ms-overflow-style: none; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 12px;
}
.asst-answer::-webkit-scrollbar { width: 0; display: none; }
.asst-answer p { margin: 0; }
.asst-hint { color: rgba(243,239,230,0.55) !important; }
.asst-answer .a-q {
  color: #f4b06a; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.asst-answer.loading::after {
  content: "···"; color: #f4b06a; letter-spacing: 4px;
  animation: asstDots 1s steps(4) infinite;
}
@keyframes asstDots { to { opacity: .3; } }
/* 2 · related resources */
.asst-res {
  flex: 0 0 auto; margin: 0 34px;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 0;
  border-top: 1px solid rgba(243,239,230,0.18);
}
.asst-res:empty { display: none; }
.asst-chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: #9e3b32; background: #f3efe6;
  border: none; padding: 7px 12px; border-radius: 999px; cursor: none;
  transition: background .2s, transform .2s;
}
.asst-chip:hover { background: #f4b06a; transform: translateY(-1px); }
/* 3 · input */
.asst-input {
  flex: 0 0 auto; padding: 16px 34px 30px;
  border-top: 1px solid rgba(243,239,230,0.18);
}
.asst-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.asst-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em;
  color: rgba(243,239,230,0.85); background: transparent;
  border: 1px solid rgba(243,239,230,0.32);
  padding: 6px 11px; border-radius: 999px; cursor: none;
  transition: background .2s, color .2s;
}
.asst-tag:hover { background: #f4b06a; color: #9e3b32; border-color: #f4b06a; }
.asst-row { display: flex; gap: 10px; align-items: flex-end; }
.asst-row textarea {
  flex: 1 1 auto; resize: none; max-height: 120px;
  font-family: var(--mono); font-size: 13px; line-height: 1.5;
  color: #f3efe6; background: rgba(243,239,230,0.08);
  border: 1px solid rgba(243,239,230,0.28);
  padding: 11px 13px; outline: none; cursor: text;
}
.asst-row textarea::placeholder { color: rgba(243,239,230,0.45); }
.asst-row textarea:focus { border-color: #f4b06a; }
.asst-row button {
  flex: 0 0 auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: #9e3b32; background: #f4b06a; border: none;
  padding: 12px 16px; cursor: none; transition: background .2s;
}
.asst-row button:hover { background: #f3efe6; }
@media (max-width: 860px) {
  .asst-panel { width: 100vw; clip-path: none; }
}



@media (max-width: 900px) {
  .hero-top, .hero-bottom, .index-head, .selected-head, .about-preview, .contact-head, .contact-grid, footer {
    grid-template-columns: 1fr !important; gap: 16px;
  }
  .hero-bottom .col-c { display: none; }
  .row { grid-template-columns: 50px 1fr auto; }
  .row .rcount { display: none; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .proj.size-l, .proj.size-m, .proj.size-s, .proj.size-w, .proj.size-t, .proj.size-mid { grid-column: span 2; }
  .chrome .tr { gap: 14px; font-size: 10px; }
  .about-preview .portrait-col { justify-items: start; }
}

@media (pointer: coarse) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
  button, a { cursor: pointer; }
}

/* ---- Real media (img/video) fills its container exactly like the SVG placeholders did ---- */
.ab2-video video, .ab2-video img,
.cube .face video, .cube .face img,
.arvr-pane-media video, .arvr-pane-media img,
.wt-card-img video, .wt-card-img img,
.un-img video, .un-img img,
.dv3-thumb video, .dv3-thumb img,
.dv3-preview video, .dv3-preview img,
.mg-photo video, .mg-photo img,
.vmodal-frame video, .vmodal-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.vmodal-frame video, .vmodal-frame img { object-fit: contain; background: #000; }
/* About video: show full frame (no crop) and no shadow */
.ab2-video video, .ab2-video img { object-fit: contain; background: transparent; }
/* Sticky-note card: show the whole card (no crop) */
.un-img { aspect-ratio: 2 / 1; }
.un-img img { object-fit: contain; }
.media-badge {
  position: absolute; left: 14px; bottom: 12px;
  font-family: "JetBrains Mono", monospace; font-size: 9px;
  letter-spacing: 2px; color: #f5f3ee; opacity: .55;
  pointer-events: none; z-index: 2;
}

/* ---- "Open URL" link buttons under project titles ---- */
.proj-links {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 2px;
}
.proj-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 6px 11px; border-radius: 999px;
  text-decoration: none; cursor: none;
  transition: background .2s, color .2s, transform .2s;
  white-space: nowrap;
}
.proj-link:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }
.proj-link .ar { font-style: normal; }
/* On dark panels (e.g. ARVR dark info) invert */
.arvr-pane-info.dark .proj-link,
.uiux-note .proj-link { color: #1a1a1a; border-color: rgba(26,26,26,.5); }
.uiux-note .proj-link:hover { background:#1a1a1a; color:#f3e8a8; }
.arvr-pane-info.dark .proj-link { color:#f5f3ee; border-color: rgba(245,243,238,.5); }
.arvr-pane-info.dark .proj-link:hover { background:#f5f3ee; color:#1a1a1a; }

/* ============================================================
   RÉSUMÉ  —  bilingual preview / editor / multi-template
   ============================================================ */
.resume-btn {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: #fff; background: #f57b42;
  border: 1px solid #f57b42; border-radius: 999px;
  padding: 4px 12px; cursor: none; line-height: 1;
  transition: background .2s, color .2s, transform .2s;
}
.resume-btn:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; transform: translateY(-1px); }

/* ---- Overlay shell ---- */
#rz-overlay {
  position: fixed; inset: 0; z-index: 240;
  background: #e9e7e0;
  display: none; flex-direction: column;
  opacity: 0; transition: opacity .35s ease;
}
#rz-overlay.on { display: flex; opacity: 1; }
body.rz-open { overflow: hidden; }
body.rz-open .cursor-dot, body.rz-open .cursor-ring { opacity: 0 !important; }
#rz-overlay, #rz-overlay * { cursor: auto; }
#rz-overlay button { cursor: pointer; }

/* ---- Toolbar ---- */
.rz-bar {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px clamp(14px, 3vw, 36px);
  background: #1a1a1a; color: #f5f3ee;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
}
.rz-bar .rz-brand { font-family: var(--serif); font-size: 17px; letter-spacing: .02em; margin-right: auto; }
.rz-bar .rz-brand em { font-style: italic; opacity: .6; }
.rz-btn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #f5f3ee; background: transparent;
  border: 1px solid rgba(245,243,238,.34); border-radius: 999px;
  padding: 7px 14px; line-height: 1;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
  white-space: nowrap;
}
.rz-btn:hover { background: rgba(245,243,238,.12); transform: translateY(-1px); }
.rz-btn.is-on { background: #f57b42; border-color: #f57b42; color: #fff; }
.rz-btn.rz-primary { background: #f57b42; border-color: #f57b42; color: #fff; }
.rz-btn.rz-primary:hover { background: #ff8d57; }
.rz-btn.rz-x { border-radius: 50%; width: 32px; height: 32px; padding: 0; font-size: 14px; }
.rz-sel {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: #f5f3ee; background: #2a2a2a;
  border: 1px solid rgba(245,243,238,.34); border-radius: 999px;
  padding: 7px 12px; outline: none;
}
.rz-sel option { color: #1a1a1a; }
.rz-divider { width: 1px; height: 22px; background: rgba(245,243,238,.18); }

/* ---- Scroll stage ---- */
.rz-stage {
  flex: 1 1 auto; overflow: auto;
  display: flex; justify-content: center;
  padding: 34px clamp(14px, 3vw, 40px) 70px;
}

/* ---- Page : A4 210×297mm, two pages by default ---- */
.rz-page {
  --rz-paper:#ffffff; --rz-fg:#1a1a1a; --rz-muted:#6b6b6b;
  --rz-acc:#33404f; --rz-line:rgba(26,26,26,.16); --rz-soft:#f1f0ec;
  --rz-name-ff:var(--serif); --rz-head-ff:var(--mono); --rz-body-ff:var(--mono);
  --rz-fs:1; --rz-A4:1123px;
  position: relative;
  width: 794px; min-height: calc(var(--rz-A4) * 2); flex: none;
  background: var(--rz-paper); color: var(--rz-fg);
  padding: 50px 56px;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  font-family: var(--rz-body-ff);
  font-size: calc(10px * var(--rz-fs)); line-height: 1.46;
}
/* page-2 fold guide (screen only) */
.rz-page::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--rz-A4); height: 0;
  border-top: 1px dashed rgba(0,0,0,.18); pointer-events: none;
}
.rz-page::after {
  content: "PAGE 2"; position: absolute; right: 14px; top: calc(var(--rz-A4) + 7px);
  font: 8px/1 var(--mono); letter-spacing: .18em; color: rgba(0,0,0,.3); pointer-events: none;
}

/* header */
.rz-head { display: flex; align-items: flex-start; gap: 24px; padding-bottom: 9px; }
.rz-head-main { flex: 1 1 auto; min-width: 0; }
.rz-name {
  font-family: var(--rz-name-ff); font-weight: 400;
  font-size: calc(28px * var(--rz-fs)); line-height: 1.05; letter-spacing: .01em;
  color: var(--rz-fg);
}
.rz-title {
  margin-top: 5px; font-family: var(--rz-head-ff);
  font-size: calc(9.6px * var(--rz-fs)); letter-spacing: .08em; text-transform: uppercase;
  color: var(--rz-acc);
}
.rz-contact {
  margin-top: 7px; font-family: var(--rz-head-ff);
  font-size: calc(9.4px * var(--rz-fs)); letter-spacing: .02em; color: var(--rz-muted);
}
.rz-contact b { color: var(--rz-fg); font-weight: 500; }
.rz-photo {
  flex: none; width: 88px; height: 104px; object-fit: cover; object-position: top center;
  border-radius: 4px; background: var(--rz-soft);
}
.rz-photo.hide { display: none; }

/* section */
.rz-sec { margin-top: 13px; break-inside: avoid; }
.rz-sec-h {
  display: inline-block;
  font-family: var(--rz-head-ff); font-weight: 500;
  font-size: calc(10.5px * var(--rz-fs)); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--rz-acc);
  padding: 4px 14px 4px 11px; margin-bottom: 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.rz-sec-h .zh { letter-spacing: .06em; }

/* summary block */
.rz-sum p { margin: 0 0 3.5px; }
.rz-sum p:last-child { margin-bottom: 0; }
.rz-sum b {
  color: var(--rz-acc); font-weight: 600;
  font-family: var(--rz-head-ff); font-size: .9em; letter-spacing: .02em;
  margin-right: 5px;
}

/* row item (project / experience / education) */
.rz-item { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--rz-line); }
.rz-item:last-child { border-bottom: 0; }
.rz-sec.rz-flush .rz-item { padding: 6px 0; }
.rz-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.rz-it-name { font-weight: 600; font-size: calc(11.4px * var(--rz-fs)); color: var(--rz-fg); }
.rz-it-name .at { color: var(--rz-muted); font-weight: 400; }
.rz-it-date {
  flex: none; font-family: var(--rz-head-ff);
  font-size: calc(9.2px * var(--rz-fs)); letter-spacing: .04em; color: var(--rz-muted); white-space: nowrap;
}
.rz-it-sub {
  font-style: italic; font-size: calc(9.8px * var(--rz-fs)); color: var(--rz-acc); margin-top: 1px;
}
.rz-it-body { margin-top: 3px; }
.rz-it-body li { list-style: none; position: relative; padding-left: 12px; margin: 2px 0; }
.rz-it-body li::before {
  content: ""; position: absolute; left: 2px; top: .6em;
  width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--rz-acc);
}
.rz-it-body li b {
  color: var(--rz-acc); font-weight: 600;
  font-family: var(--rz-head-ff); font-size: .88em; letter-spacing: .02em; margin-right: 4px;
}

/* compact edu / skill grid lines */
.rz-line2 { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4px 0; border-bottom: 1px solid var(--rz-line); }
.rz-line2:last-child { border-bottom: 0; }
.rz-line2 .l { font-weight: 600; }
.rz-line2 .m { flex: 1 1 auto; color: var(--rz-muted); padding: 0 10px; }
.rz-line2 .r { flex: none; font-family: var(--rz-head-ff); font-size: calc(9.2px * var(--rz-fs)); color: var(--rz-muted); white-space: nowrap; }
.rz-skill { padding: 3px 0; }
.rz-skill b { color: var(--rz-acc); font-family: var(--rz-head-ff); font-size: .88em; letter-spacing: .03em; text-transform: uppercase; margin-right: 8px; }

/* ---------- TEMPLATES ---------- */
/* slate = default (declared on .rz-page) */
.rz-page[data-tpl="mono"] {
  --rz-paper:#fbfaf6; --rz-acc:#1a1a1a; --rz-line:rgba(26,26,26,.14);
  --rz-name-ff:var(--mono);
}
.rz-page[data-tpl="mono"] .rz-name { font-weight: 500; font-size: calc(27px * var(--rz-fs)); letter-spacing: .14em; text-transform: uppercase; }
.rz-page[data-tpl="mono"] .rz-sec-h {
  color: var(--rz-fg); background: none; padding: 0 0 7px; clip-path: none;
  border-bottom: 1.5px solid var(--rz-fg); display: block;
}
.rz-page[data-tpl="mono"] .rz-sum b,
.rz-page[data-tpl="mono"] .rz-it-body li b,
.rz-page[data-tpl="mono"] .rz-skill b { color: var(--rz-fg); }

.rz-page[data-tpl="serif"] {
  --rz-paper:#fcfbf7; --rz-fg:#23201b; --rz-acc:#8a6a32; --rz-muted:#7a756c;
  --rz-line:rgba(40,33,22,.16); --rz-head-ff:var(--serif); --rz-body-ff:var(--serif);
}
.rz-page[data-tpl="serif"] { font-size: calc(12.6px * var(--rz-fs)); line-height: 1.6; }
.rz-page[data-tpl="serif"] .rz-head { flex-direction: column; align-items: center; text-align: center; border-bottom: 1px solid var(--rz-acc); padding-bottom: 18px; }
.rz-page[data-tpl="serif"] .rz-name { font-size: calc(40px * var(--rz-fs)); letter-spacing: .04em; }
.rz-page[data-tpl="serif"] .rz-title,
.rz-page[data-tpl="serif"] .rz-contact { font-family: var(--serif); text-transform: none; letter-spacing: .03em; font-size: calc(12px * var(--rz-fs)); }
.rz-page[data-tpl="serif"] .rz-photo { order: -1; width: 96px; height: 114px; border-radius: 50%; margin-bottom: 12px; }
.rz-page[data-tpl="serif"] .rz-sec-h {
  color: var(--rz-acc); background: none; clip-path: none; padding: 0 0 5px;
  display: block; text-align: center; letter-spacing: .26em;
  border-bottom: 1px solid var(--rz-line);
}
.rz-page[data-tpl="serif"] .rz-sum b,
.rz-page[data-tpl="serif"] .rz-it-body li b,
.rz-page[data-tpl="serif"] .rz-skill b { font-family: var(--serif); color: var(--rz-acc); }

.rz-page[data-tpl="ink"] {
  --rz-paper:#ffffff; --rz-fg:#16181d; --rz-acc:#c0563a; --rz-muted:#71747c;
  --rz-line:rgba(20,22,28,.14);
}
.rz-page[data-tpl="ink"] .rz-name { font-size: calc(38px * var(--rz-fs)); }
.rz-page[data-tpl="ink"] .rz-sec { border-left: 3px solid var(--rz-acc); padding-left: 18px; }
.rz-page[data-tpl="ink"] .rz-sec-h {
  color: var(--rz-acc); background: none; clip-path: none; padding: 0 0 4px;
  margin-left: -18px; padding-left: 18px;
}
.rz-page[data-tpl="ink"] .rz-it-date,
.rz-page[data-tpl="ink"] .rz-line2 .r { color: var(--rz-acc); }

/* ---------- EDIT MODE ---------- */
#rz-overlay.editing .rz-page {
  background-image:
    linear-gradient(rgba(51,64,79,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,64,79,.07) 1px, transparent 1px);
  background-size: 16px 16px;
}
#rz-overlay.editing .rz-block { outline: 1px dashed transparent; transition: outline-color .15s; }
#rz-overlay.editing .rz-block:hover { outline-color: rgba(245,123,66,.45); }
.rz-block { position: relative; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
#rz-overlay.editing .rz-block { cursor: grab; }
#rz-overlay.editing .rz-block.dragging { cursor: grabbing; outline: 1px solid #f57b42; z-index: 5; }
#rz-overlay.editing [contenteditable="true"] { cursor: text; }
#rz-overlay.editing [contenteditable="true"]:focus {
  outline: 2px solid rgba(245,123,66,.55); outline-offset: 3px; border-radius: 2px;
}
.rz-grip {
  position: absolute; top: -9px; left: -9px; width: 18px; height: 18px;
  background: #f57b42; color: #fff; border-radius: 50%;
  font-size: 10px; line-height: 18px; text-align: center;
  display: none; z-index: 6; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
#rz-overlay.editing .rz-block:hover > .rz-grip,
#rz-overlay.editing .rz-block.dragging > .rz-grip { display: block; }
/* snap guides */
.rz-guide { position: absolute; z-index: 9; background: #f57b42; pointer-events: none; opacity: .9; }
.rz-guide.v { width: 1px; top: 0; bottom: 0; }
.rz-guide.h { height: 1px; left: 0; right: 0; }

/* floating text mini-toolbar */
.rz-fmt {
  position: fixed; z-index: 260; display: none; gap: 4px; align-items: center;
  padding: 5px; background: #1a1a1a; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.rz-fmt.on { display: flex; }
.rz-fmt button {
  font-family: var(--mono); font-size: 11px; color: #f5f3ee;
  width: 28px; height: 26px; border-radius: 5px; line-height: 1;
}
.rz-fmt button:hover { background: rgba(245,243,238,.16); }
.rz-fmt .fs-val { font-size: 10px; color: #9a9a92; min-width: 26px; text-align: center; }

/* ---------- HISTORY PANEL ---------- */
.rz-hist {
  position: absolute; top: 56px; right: clamp(14px,3vw,36px); z-index: 270;
  width: 320px; max-height: 64vh; overflow: auto; display: none;
  background: #1f1f1f; color: #f5f3ee; border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.5); padding: 14px;
}
.rz-hist.on { display: block; }
.rz-hist h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9a9a92; margin-bottom: 10px; }
.rz-hist-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.08); font-size: 11px;
}
.rz-hist-row:last-child { border-bottom: 0; }
.rz-hist-row .t { flex: 1 1 auto; color: #d8d6cf; }
.rz-hist-row .t span { display: block; color: #8a8a82; font-size: 9.5px; margin-top: 2px; }
.rz-hist-row button {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #f5f3ee; border: 1px solid rgba(245,243,238,.3); border-radius: 999px; padding: 4px 9px;
}
.rz-hist-row button:hover { background: rgba(245,243,238,.14); }
.rz-hist-row button.del { border-color: rgba(224,83,42,.5); color: #e0876a; }
.rz-hist-empty { color: #7a7a72; font-size: 11px; padding: 8px 0; }

/* toast */
.rz-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 280; background: #1a1a1a; color: #f5f3ee;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  padding: 11px 22px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.rz-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* keep A4 proportion on smaller viewports — scale, never reflow */
@media (max-width: 1100px) {
  .rz-bar { flex-wrap: wrap; gap: 7px; }
  .rz-bar .rz-brand { width: 100%; margin-bottom: 4px; }
  .rz-stage { padding: 20px 10px 50px; align-items: flex-start; }
  .rz-page { zoom: .78; }
}
@media (max-width: 720px)  { .rz-page { zoom: .56; } }
@media (max-width: 480px)  { .rz-page { zoom: .4; } }

/* ---------- PRINT / PDF EXPORT  (A4, up to 2 pages) ---------- */
@media print {
  @page { size: A4; margin: 11mm 12mm; }
  body > *:not(#rz-overlay) { display: none !important; }
  body.rz-open { overflow: visible !important; }
  #rz-overlay { position: static !important; display: block !important; opacity: 1 !important; background: #fff !important; }
  #rz-overlay.editing .rz-page { background-image: none !important; }
  .rz-bar, .rz-hist, .rz-fmt, .rz-toast, .rz-grip, .rz-guide { display: none !important; }
  .rz-page::before, .rz-page::after { display: none !important; }
  .rz-stage { overflow: visible !important; padding: 0 !important; display: block !important; }
  .rz-page {
    width: 100% !important; min-height: 0 !important; box-shadow: none !important;
    zoom: 1 !important; margin: 0 auto !important; padding: 0 !important;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
  .rz-block { outline: none !important; }
  .rz-sec, .rz-item, .rz-line2 { break-inside: avoid; }
}

/* ============================================================
   PORTFOLIO DECK  —  exportable, in the site's own aesthetic
   Full-screen 1600×900 stage scaled to fit; bottom filmstrip.
   ============================================================ */
#dk-overlay {
  --b:#f5f3ee; --bd:#ecebe4; --b3:#e4e1d6;
  --dink:#1a1a1a; --dmid:#6b6b6b; --dsoft:#3a3a36;
  --dln:rgba(26,26,26,.14); --dln2:rgba(26,26,26,.26); --acc:#f57b42;
  --sf:var(--serif); --mo:var(--mono);
  position:fixed; inset:0; z-index:245; display:none;
  background:#d9d6cc; opacity:0; transition:opacity .3s ease;
}
#dk-overlay.on { display:block; opacity:1; }
body.dk-open { overflow:hidden; }
body.dk-open .cursor-dot, body.dk-open .cursor-ring { opacity:0 !important; }
#dk-overlay, #dk-overlay * { cursor:auto; }
#dk-overlay button { cursor:pointer; }

.dk-viewport { position:fixed; inset:0 0 104px 0; display:flex; align-items:center; justify-content:center; }
.dk-stage { width:1600px; height:900px; position:relative; transform-origin:center center;
  flex-shrink:0; background:var(--b); box-shadow:0 24px 70px rgba(0,0,0,.32); }
.dk-slide { position:absolute; inset:0; width:1600px; height:900px; background:var(--b);
  color:var(--dink); overflow:hidden; opacity:0; visibility:hidden;
  transition:opacity .42s ease; pointer-events:none; font-family:var(--mo); }
.dk-slide.active { opacity:1; visibility:visible; pointer-events:auto; }

@keyframes dkUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes dkF { from{opacity:0} to{opacity:1} }
.dk-slide:not(.active) [data-a]{ opacity:0; }
.dk-slide.active [data-a]{ animation:var(--an,dkUp) .7s cubic-bezier(.2,.7,.25,1) both; animation-delay:var(--d,0s); }
[data-a="f"]{--an:dkF}
@media (prefers-reduced-motion:reduce){ .dk-slide.active [data-a]{ animation:dkF .3s both; } }

/* slim running head + footer (portfolio-PDF grammar) */
.dk-rhead { position:absolute; left:74px; right:74px; top:52px; display:flex;
  justify-content:space-between; font-family:var(--mo); font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--dmid); z-index:4; }
.dk-rhead .mk { color:var(--acc); }
.dk-foot { position:absolute; left:74px; right:74px; bottom:50px; display:flex;
  justify-content:space-between; align-items:baseline; border-top:1px solid var(--dln);
  padding-top:15px; font-family:var(--mo); font-size:12px; letter-spacing:.12em; color:var(--dmid); z-index:4; }
.dk-foot .pj { color:var(--dink); }
.dk-foot .pg { color:var(--dmid); letter-spacing:.2em; }
.dk-foot .pg em { color:var(--acc); font-style:normal; padding:0 .45em; }

/* shared bits */
.dk-kick { font-family:var(--mo); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--acc); display:flex; gap:14px; align-items:center; }
.dk-kick .pl { color:var(--dmid); }
.dk-title { font-family:var(--sf); font-weight:400; line-height:1.02; letter-spacing:.005em; color:var(--dink); }
.dk-desc { font-family:var(--mo); font-size:14.5px; line-height:1.72; color:var(--dsoft); font-weight:300; }
.dk-tech { display:flex; flex-wrap:wrap; gap:8px; }
.dk-tech span { font-family:var(--mo); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dmid); border:1px solid var(--dln); border-radius:999px; padding:6px 13px; }
.dk-link { font-family:var(--mo); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dink); background:none; border:0; border-bottom:1px solid var(--acc);
  padding:0 0 4px; width:fit-content; transition:color .2s; }
.dk-link:hover { color:var(--acc); }

/* images — borderless, uncropped (contain), float on the page */
.dk-img { background:transparent; overflow:hidden; position:relative; }
.dk-img img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; display:block; }

/* ---- PROJECT slide ---- */
.dk-proj .body { position:absolute; inset:118px 74px 116px 74px; display:grid;
  grid-template-columns:1fr 432px; gap:58px; }
.dk-proj[data-side="r"] .body { grid-template-columns:432px 1fr; }
.dk-proj[data-side="r"] .dk-media { order:2; } .dk-proj[data-side="r"] .dk-col { order:1; }
.dk-media { display:flex; flex-direction:column; gap:16px; min-width:0; min-height:0; }
.dk-media.two { flex-direction:row; gap:18px; }
.dk-media.two .dk-img.eq { flex:1 1 0; min-width:0; height:100%; }
.dk-hero { flex:1 1 auto; min-height:0; }
.dk-strip { flex:none; height:128px; display:flex; gap:16px; }
.dk-strip .dk-img { flex:1 1 0; min-width:0; }
.dk-col { display:flex; flex-direction:column; gap:22px; justify-content:center; }
.dk-proj .dk-title { font-size:62px; }
#dk-overlay[data-lang="zh"] .dk-proj .dk-title { font-size:50px; }
.dk-proj .dk-desc { font-size:15px; }

/* ---- COVER (matches the portfolio-PDF cover) ---- */
.dk-cover .cv { position:absolute; inset:84px 70px 96px 70px; display:grid;
  grid-template-columns:0.82fr 1.14fr 0.92fr; gap:46px; align-items:stretch; }
.dk-cv-l { display:flex; flex-direction:column; justify-content:center; }
.dk-cv-name { font-family:var(--sf); font-weight:400; font-size:70px; line-height:1; color:var(--dink);
  padding-bottom:16px; border-bottom:1px solid var(--dln2); }
#dk-overlay[data-lang="zh"] .dk-cv-name { font-size:60px; }
.dk-cv-cred { font-family:var(--mo); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dmid); margin-top:14px; }
.dk-cv-bio { font-family:var(--mo); font-weight:300; font-size:14.5px; line-height:1.86;
  color:var(--dsoft); margin-top:30px; }
.dk-cv-mid { display:flex; align-items:center; justify-content:center; }
.dk-cv-mid .dk-img { width:100%; height:100%; }
.dk-cv-mid .dk-img img { object-fit:cover; }
.dk-cv-ix { display:flex; flex-direction:column; justify-content:center; gap:13px; }
.dk-ix-g { display:flex; flex-direction:column; gap:4px;
  padding-bottom:11px; border-bottom:1px solid var(--dln); }
.dk-ix-g:last-child { border-bottom:0; padding-bottom:0; }
.dk-ix-g .ixt { font-family:var(--mo); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acc); }
.dk-ix-g .ixi { font-family:var(--mo); font-size:12.5px; line-height:1.5; color:var(--dmid); }
.dk-cvfoot { position:absolute; left:0; right:0; bottom:0; height:58px;
  border-top:1px solid var(--dln2); display:flex; align-items:stretch; }
.dk-cvk { flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:0 22px; font-family:var(--mo); font-size:12px; color:var(--dmid); text-decoration:none; min-width:0; }
.dk-cvk + .dk-cvk { border-left:1px solid var(--dln); }
.dk-cvk .k { color:var(--dmid); white-space:nowrap; }
.dk-cvk .v { color:var(--dink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dk-cvk:hover .v { color:var(--acc); }

/* ---- COMBINED galleries (Parametric horizontal-4 / Leadership 3×3) ---- */
.dk-gal .gh { position:absolute; left:74px; right:74px; top:96px; display:flex;
  align-items:flex-end; justify-content:space-between; gap:48px;
  border-bottom:1px solid var(--dln); padding-bottom:18px; }
.dk-gal .gh .gt { font-family:var(--sf); font-size:50px; line-height:1; color:var(--dink); }
.dk-gal .gh .gs { font-family:var(--mo); font-size:13px; color:var(--dmid); max-width:42ch; text-align:right; }
.dk-gal .dk-grid { position:absolute; left:74px; right:74px; top:206px; bottom:112px;
  display:grid; align-items:stretch; justify-items:stretch; }
.dk-gal .dk-grid.r4 { grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; align-content:center; }
.dk-gal .dk-grid.r9 { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,1fr); gap:22px 30px; }
.dk-gc { display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; overflow:hidden; }
.dk-gc .gi { flex:1 1 auto; min-height:0; }
.dk-gal .dk-grid.r4 .dk-gc .gi { flex:none; width:100%; aspect-ratio:16/10; }
.dk-gc .gx b { display:block; font-family:var(--sf); font-size:20px; color:var(--dink); line-height:1.15; }
.dk-gc .gx span { display:block; font-family:var(--mo); font-weight:300; font-size:12px;
  line-height:1.45; color:var(--dmid); margin-top:4px; }
.dk-gal .dk-grid.r9 .gx b { font-size:16px; }
.dk-gal .dk-grid.r9 .gx span { font-size:11px; margin-top:2px; }

/* bilingual */
#dk-overlay .zh { display:none; }
#dk-overlay[data-lang="zh"] .en { display:none; }
#dk-overlay[data-lang="zh"] .zh { display:revert; }

/* ---- arrows + controls ---- */
.dk-arrow { position:fixed; top:calc(50% - 52px); transform:translateY(-50%); z-index:32;
  width:46px; height:46px; border-radius:50%; background:rgba(26,26,26,.06);
  color:var(--dink); border:1px solid var(--dln2); font-size:20px; transition:.18s; }
.dk-arrow:hover { background:var(--acc); border-color:var(--acc); color:#fff; }
.dk-arrow:disabled { opacity:.2; pointer-events:none; }
.dk-prev { left:22px; } .dk-next { right:22px; }
.dk-ctrls { position:fixed; right:18px; top:16px; display:flex; gap:8px; z-index:34; }
.dk-ctrls button { background:rgba(245,243,238,.92); color:var(--dink); border:1px solid var(--dln2);
  font-family:var(--mo); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 14px; border-radius:999px; transition:.18s; }
.dk-ctrls button:hover { background:var(--acc); color:#fff; border-color:var(--acc); }
.dk-ctrls button:disabled { opacity:.4; pointer-events:none; }
.dk-ctrls .dk-x { padding:9px 13px; }

/* ---- bottom filmstrip + section dividers ---- */
.dk-film { position:fixed; left:0; right:0; bottom:0; height:104px; z-index:32;
  background:var(--bd); border-top:1px solid var(--dln2);
  display:flex; flex-direction:column; padding:8px 18px 10px; }
.dk-secs { display:flex; height:15px; margin-bottom:6px; }
.dk-sec { display:flex; align-items:center; justify-content:center; gap:8px; min-width:0;
  font-family:var(--mo); font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dmid); white-space:nowrap; padding:0 6px; }
.dk-sec::before, .dk-sec::after { content:""; flex:1; height:1px; background:var(--dln2); }
.dk-sec.cur { color:var(--acc); }
.dk-sec.cur::before, .dk-sec.cur::after { background:var(--acc); }
.dk-tns { flex:1; display:flex; gap:5px; min-height:0; }
.dk-tn { flex:1 1 0; min-width:0; background:#fff; overflow:hidden; position:relative;
  opacity:.46; transition:opacity .16s, transform .16s; }
.dk-tn img { width:100%; height:100%; object-fit:cover; display:block; }
.dk-tn .tl { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--sf); font-size:14px; color:var(--dmid); background:var(--b3); }
.dk-tn:hover { opacity:.85; }
.dk-tn.on { opacity:1; outline:2px solid var(--acc); outline-offset:-2px; }

/* ---- print : one slide per A4 landscape page ---- */
@media print {
  @page { size:A4 landscape; margin:0; }
  body > *:not(#dk-overlay) { display:none !important; }
  body.dk-open { overflow:visible !important; }
  #dk-overlay { position:static !important; display:block !important; opacity:1 !important; background:#fff !important; }
  .dk-viewport { position:static !important; inset:auto !important; display:block !important; }
  .dk-stage { transform:none !important; width:100% !important; height:auto !important; box-shadow:none !important; }
  .dk-arrow, .dk-ctrls, .dk-film { display:none !important; }
  .dk-slide { position:relative !important; opacity:1 !important; visibility:visible !important;
    width:100% !important; height:100vh !important; break-after:page; page-break-after:always;
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .dk-slide:last-child { break-after:auto; page-break-after:avoid; }
  .dk-slide [data-a]{ animation:none !important; opacity:1 !important; }
}