:root {
  color-scheme: light;
  --paper: #f6f4ee;
  --ink: #191916;
  --muted: #55524b;
  --rule: #ccc7ba;
  --accent: #a53020;
  --display: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
.folio { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--sans); }
.folio a { color: inherit; text-underline-offset: .24em; }
.folio :focus-visible { outline: 2px solid #b64c3a; outline-offset: 5px; }
.folio h1,.folio h2,.folio h3,.folio p,.folio figure,.folio dl,.folio dd { margin: 0; }
.folio h1,.folio h2,.folio h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .97;
  overflow-wrap: anywhere;
}
.folio img { display: block; max-width: 100%; }
.folio-container { max-width: 1440px; margin-inline: auto; padding-inline: clamp(20px, 5.2vw, 84px); }
.folio .skip-link {
  position: fixed; z-index: 20; inset: 8px auto auto 12px; transform: translateY(-160%);
  background: var(--ink); color: white; padding: 12px 16px;
}
.folio .skip-link:focus { transform: none; }
.folio-label {
  color: var(--accent); font: 650 .72rem/1.45 var(--mono);
  letter-spacing: .085em; text-transform: uppercase;
}
[hidden] { display: none !important; }

/* Navigation.
   At rest it floats over each page's dark opening as a single glass dock on the right (a Menu island on small screens).
   Past the opening, the dock shrinks into an orb at its right end and its links fly into it; the orb
   blooms into a menu card. The header itself is transparent to the pointer: only the dock, orb and card respond. */
.folio { --nav-h: 88px; }
.folio-header {
  --orb-size: 52px; --orb-edge: clamp(20px, 5.2vw, 84px);
  --glass: #16141db8; --glass-rule: #ffffff21; --glass-ink: #f6eee6; --glass-muted: #c3b8c3;
  position: sticky; top: 0; z-index: 20; height: var(--nav-h); margin-bottom: calc(var(--nav-h) * -1);
  pointer-events: none;
}
.folio-header-inner { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 100%; }
.folio-header ul { margin: 0; padding: 0; list-style: none; }
.header-skin,.reading-line { display: none; }
/* The page's scroll-padding keeps anchors clear of the header; header controls themselves must not trigger it on focus. */
.folio-header :is(a, button, summary) { scroll-margin-top: -96px; }

/* The dock and the Menu island share one glass treatment. */
.folio-header:not(.is-card) #site-nav,.nav-toggle {
  pointer-events: auto; border: 1px solid var(--glass-rule); border-radius: 999px;
  background: var(--glass); color: var(--glass-ink);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 14px 34px -16px #000a, inset 0 1px 0 #ffffff12;
}

/* The dock: page links with a highlight that rests on the current page and follows hover and focus. */
.folio-header #site-nav { position: relative; padding: 5px; }
.folio-header .nav-pages { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-pages::before {
  content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: var(--hl-x, 0); width: var(--hl-w, 0);
  border-radius: 999px; background: #ffffff1a; opacity: var(--hl-o, 0); pointer-events: none;
}
.nav-pages > li { position: relative; z-index: 1; }
.folio .nav-pages > li > a,.folio .project-disclosure summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  color: var(--glass-muted); font: 620 .86rem/1.3 var(--sans); text-decoration: none; transition: color .25s ease;
}
.folio .nav-pages > li > a:is(:hover, :focus-visible, [aria-current], [data-active-section]),
.folio .project-disclosure summary:is(:hover, :focus-visible),.project-disclosure[open] summary { color: var(--glass-ink); }
.nav-pages > li > a:is([aria-current], [data-active-section])::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #ffcb8d;
}
.folio .nav-pages > .nav-contact > a { margin-left: 6px; padding-inline: 19px; background: #ffcb8d; color: #2c1c23; font-weight: 680; }
.folio .nav-pages > .nav-contact > a:is(:hover, :focus-visible) { background: #ffe1bb; color: #2c1c23; }
.nav-pages > .nav-contact > a[aria-current]::before { background: #2c1c23; }
.folio-header :focus-visible { outline: 2px solid #ffcb8d; outline-offset: 3px; }

.project-disclosure { position: relative; }
.project-disclosure summary { list-style: none; cursor: pointer; }
.project-disclosure summary::-webkit-details-marker { display: none; }
.project-disclosure summary span,.nav-toggle span {
  width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translateY(-2px);
}
.project-disclosure[open] summary span,.nav-toggle[aria-expanded="true"] span { transform: rotate(225deg) translate(-1px, -1px); }

/* Projects panel: a darker glass sheet under the dock. */
.nav-panel {
  position: absolute; top: calc(100% + 16px); right: -6px; width: 384px; max-height: calc(100dvh - 120px); overflow: auto;
  padding: 14px; border: 1px solid var(--glass-rule); border-radius: 24px; background: #17151ff5; color: var(--glass-ink);
  box-shadow: 0 34px 70px -28px #000d;
}
.nav-panel .folio-label { padding-inline: 8px; color: #ffcb8d; }
.nav-panel ul { display: grid; gap: 3px; margin-top: 10px; }
.folio .nav-panel li a {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px; border-radius: 14px; color: var(--glass-ink); text-decoration: none; transition: background-color .2s ease;
}
.nav-panel li a:hover,.nav-panel li a:focus-visible { background: #ffffff12; }
.nav-project-label { display: grid; gap: 2px; }
.nav-project-label strong { font-size: .93rem; }
.nav-project-label small { color: var(--glass-muted); font-size: .76rem; }
.nav-panel li a > span:last-child { padding-right: 6px; color: #ffcb8d; }
.nav-project-thumb { display: grid; place-items: center; height: 48px; overflow: hidden; border-radius: 10px; background: #29253b; }
.nav-project-thumb img { width: 100%; height: 48px; object-fit: cover; object-position: top; }
.nav-project-thumb.preview-funa-gigs { background: #e2ad43; }
.nav-project-thumb.preview-funa-gigs img { width: 32px; }
.nav-project-thumb .hero-trace { font-size: .5rem; gap: 4px; }
.folio .nav-panel .nav-all-work {
  display: flex; align-items: center; justify-content: space-between; min-height: 46px; margin-top: 8px; padding-inline: 10px;
  border-top: 1px solid var(--glass-rule); color: var(--glass-ink); text-decoration: none; font: 680 .84rem/1 var(--sans);
}
.nav-panel .nav-all-work:hover { color: #ffcb8d; }

/* Small screens: a single Menu island. */
.nav-toggle { display: none; cursor: pointer; }
.nav-toggle:not([hidden]) { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px; font: 650 .88rem/1 var(--sans); }

/* On larger screens, at the very top of a page the dock stays out of the way of the opening. It returns as the
   orb once the page scrolls, and keyboard focus brings it back at any time. Small screens keep the Menu island. */
@media (min-width: 761px) {
  .folio-header.is-hidden:not(.is-card):not(:focus-within) #site-nav { opacity: 0; translate: 0 -14px; pointer-events: none; }
}

/* ---------- The orb ---------- */
.folio-header.is-orb .nav-toggle { visibility: hidden; }
.folio-header.is-orb:not(.is-card) #site-nav {
  visibility: hidden;
  /* A radius of half the orb is already a circle, and it keeps the in-between frames a clean shrinking pill. */
  clip-path: inset(calc(50% - var(--orb-size) / 2) 0 calc(50% - var(--orb-size) / 2) calc(100% - var(--orb-size)) round calc(var(--orb-size) / 2));
}
.nav-orb {
  position: absolute; top: 50%; right: var(--orb-edge); z-index: 2;
  width: var(--orb-size); height: var(--orb-size); margin-top: calc(var(--orb-size) / -2);
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  visibility: hidden; -webkit-tap-highlight-color: transparent;
}
.folio-header.is-orb .nav-orb { visibility: visible; pointer-events: auto; }
.folio .nav-orb:focus-visible { outline-offset: 7px; }
.nav-orb-core {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: #211d27; color: #fbf3e8;
  box-shadow: 0 0 0 1px #ffffff1f, 0 14px 30px #12101a52, 0 3px 8px #12101a38;
}
.nav-orb:hover .nav-orb-core,.is-open .nav-orb-core { background: #812c23; }
.nav-orb-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); overflow: visible; rotate: -90deg; pointer-events: none; }
.nav-orb-ring circle { fill: none; stroke: #a5483126; stroke-width: 2; }
.nav-orb-ring .nav-orb-progress { stroke: #d0603f; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--reading-progress, 0)); }
.nav-orb-lines { position: relative; width: 18px; height: 10px; }
.nav-orb-lines i { position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px; background: currentColor; }
.nav-orb-lines i:first-child { top: 0; }
.nav-orb-lines i:last-child { bottom: 0; left: 7px; }
.nav-orb:hover .nav-orb-lines i:last-child { left: 0; }
.is-open .nav-orb-lines i:first-child { transform: translateY(4.2px) rotate(45deg); }
.is-open .nav-orb-lines i:last-child { left: 0; transform: translateY(-4.2px) rotate(-45deg); }

/* ---------- The menu card (from the orb, or from the Menu island on small screens) ---------- */
.folio-header.is-card #site-nav {
  position: absolute; inset: calc(100% + 10px) var(--orb-edge) auto auto; pointer-events: auto;
  width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 110px); overflow: auto; overscroll-behavior: contain;
  padding: 20px 12px 12px; border: 0; border-radius: 26px; background: #211d27; color: #fbf3e8; clip-path: none;
  box-shadow: 0 0 0 1px #ffffff14, 0 30px 70px #12101a5c, 0 8px 20px #12101a33;
}
.folio-header.is-card #site-nav::before {
  content: "Navigate"; content: "Navigate" / "";
  display: block; padding: 0 12px 10px; color: #ffcb8d;
  font: 650 .68rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.folio-header.is-card #site-nav .nav-pages { display: grid; gap: 2px; counter-reset: orb-nav; }
.folio-header.is-card #site-nav .nav-pages::before { display: none; }
.folio-header.is-card #site-nav .nav-pages > li { counter-increment: orb-nav; }
.folio-header.is-card #site-nav .nav-pages > li > a,
.folio-header.is-card #site-nav .project-disclosure summary {
  align-items: baseline; justify-content: flex-start; gap: 14px; min-height: 54px; margin: 0; padding: 9px 12px; border-radius: 14px;
  background: transparent; color: #f5ede2; font: 400 clamp(1.7rem, 5vw, 2.05rem)/1.1 var(--display); letter-spacing: -.045em;
}
.folio-header.is-card #site-nav .nav-pages > li > a::before,
.folio-header.is-card #site-nav .project-disclosure summary::before {
  content: counter(orb-nav, decimal-leading-zero); width: auto; height: auto; border-radius: 0; background: none;
  color: #ffcb8d99; font: 600 .66rem/1 var(--mono); letter-spacing: .08em; translate: 0 -.7em;
}
.folio-header.is-card #site-nav .nav-pages > li > a:hover,
.folio-header.is-card #site-nav .project-disclosure summary:hover,
.folio-header.is-card #site-nav .project-disclosure[open] summary { background: #ffffff0d; color: #fff; translate: 6px 0; }
.folio-header.is-card #site-nav .nav-pages > li > a:is([aria-current], [data-active-section]) { color: #ffcb8d; background: #ffcb8d12; }
.folio-header.is-card #site-nav .project-disclosure summary span { margin-left: auto; align-self: center; }
.folio-header.is-card #site-nav .nav-pages > .nav-contact > a {
  justify-content: center; align-items: center; min-height: 52px; margin: 10px 0 0; border-radius: 999px;
  background: #ffcb8d; color: #2c1c23; font: 650 .95rem/1.2 var(--sans); letter-spacing: 0;
}
.folio-header.is-card #site-nav .nav-pages > .nav-contact > a::before { content: none; }
.folio-header.is-card #site-nav .nav-pages > .nav-contact > a:hover { background: #ffe1bb; color: #2c1c23; translate: none; }
.folio-header.is-card #site-nav .nav-panel {
  position: static; width: 100%; max-height: none; overflow: visible;
  margin: 4px 0 6px; padding: 8px; border: 0; border-radius: 18px; background: #ffffff0a; box-shadow: none;
}
.folio-header.is-card .nav-projects:has(.project-disclosure[open]) { width: 100%; }

@media (max-width: 760px) {
  .folio { --nav-h: 74px; }
  .folio-header { --orb-size: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  .nav-pages::before { transition: left .5s cubic-bezier(.3,1.25,.45,1), width .5s cubic-bezier(.3,1.25,.45,1), opacity .25s ease; }
  .nav-toggle { transition: background-color .3s ease, border-color .3s ease, opacity .35s ease, translate .45s cubic-bezier(.2,.8,.3,1); }
  /* The dock condenses into the orb: its glass shrinks to the right end, then it hides once the orb is out. */
  /* At rest the clip reaches well past the dock so the Projects panel below it is never cut off. */
  .folio-header:not(.is-card) #site-nav { clip-path: inset(-40px -80px -100vh -480px); transition: clip-path .55s cubic-bezier(.75,0,.2,1), opacity .35s ease, translate .45s cubic-bezier(.2,.8,.3,1); }
  .folio-header.is-orb:not(.is-card) #site-nav { transition: clip-path .5s cubic-bezier(.75,0,.2,1), visibility 0s .52s; }
  .project-disclosure[open] .nav-panel { animation: nav-panel-in .32s cubic-bezier(.2,.8,.3,1) both; }
  .folio-header.is-card:not(.is-orb) #site-nav { animation: nav-panel-in .32s cubic-bezier(.2,.8,.3,1) both; }
  .nav-orb-core { transition: background-color .25s, translate .5s cubic-bezier(.2,.9,.3,1.4); }
  .nav-orb-lines i { transition: transform .45s cubic-bezier(.7,0,.2,1), left .3s cubic-bezier(.2,.8,.3,1); }
  .nav-orb-progress { transition: stroke-dashoffset .12s linear; }
  .project-disclosure summary span,.nav-toggle span { transition: transform .3s cubic-bezier(.2,.8,.3,1); }
  .folio-header.is-card #site-nav .nav-pages > li > a,
  .folio-header.is-card #site-nav .project-disclosure summary { transition: background-color .2s, color .2s, translate .35s cubic-bezier(.2,.8,.3,1); }
}
@keyframes nav-panel-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* A full-bleed photograph anchors the opening, with the work visible beneath it. */
.folio-opening {
  --ink: #faf3e9;
  --paper: #191722;
  --muted: #ded6dd;
  --rule: #625666;
  --accent: #ffcb8d;
  color: var(--ink); background: #191722;
}
.folio-opening :focus-visible { outline-color: #ffcf9c; }
.hero-stage { position: relative; isolation: isolate; overflow: hidden; background: #1b1824; }
.hero-visual { position: absolute; inset: 0 0 0 47%; z-index: -1; overflow: hidden; background: #121620; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.hero-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,#1b1824 0%,#1b1824ed 4%,#1b182460 21%,transparent 43%),
    linear-gradient(0deg,#1b1824 0%,#1b18241a 29%,transparent 70%);
}
.folio-hero {
  min-height: clamp(450px, 40vw, 570px); display: flex; align-items: center;
  padding-block: clamp(41px, 4.7vw, 68px);
}
.hero-copy { width: min(57%, 710px); }
.hero-location { display: flex; align-items: center; gap: 9px; }
.hero-location span { width: 18px; height: 1px; flex: none; background: currentColor; }
.hero-identity { font-size: clamp(1rem, 1.65vw, 1.4rem); font-weight: 700; margin-top: 13px !important; }
.folio-hero h1 {
  font-size: clamp(3.2rem, 6.6vw, 6.8rem); line-height: .93; letter-spacing: -.06em; margin-block: 17px 22px;
}
.folio-hero h1 em { display: block; color: var(--accent); font-weight: 400; }
.folio .hero-intro { color: var(--muted); max-width: 44ch; font-size: clamp(1rem, 1.45vw, 1.16rem); margin-bottom: 26px; }
.hero-copy .folio-action:first-child { --button-bg: #ffcb8d; --button-text: #2c1c23; --button-rule: #ffcb8d; }
.hero-copy .folio-action:first-child:hover { --button-bg: #ffe1bb; --button-rule: #ffe1bb; }

.hero-trace { display: grid; gap: 6px; color: #e2e9bd; font: .61rem/1.3 var(--mono); white-space: nowrap; }
.hero-trace span + span { color: #ffc2a2; }

.folio-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.folio .folio-action {
  --button-bg: var(--ink); --button-text: var(--paper); --button-rule: var(--ink);
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 9px 15px; border: 1px solid var(--button-rule);
  color: var(--button-text); background: var(--button-bg);
  text-decoration: none; font-size: .87rem; font-weight: 670;
  transition: color .18s, background-color .18s, border-color .18s;
}
.folio .folio-action:hover { --button-bg: var(--accent); --button-rule: var(--accent); --button-text: #fff; }
.folio .folio-action-secondary { --button-bg: transparent; --button-text: var(--ink); --button-rule: var(--rule); }
.folio-action span { font-size: 1rem; transition: transform .2s; }
.folio-action:hover span { transform: translateX(3px); }

.folio-opening .folio-action:hover { --button-text: #211a22; }

.folio-work { padding-block: clamp(42px, 7vw, 103px); background: #f0eadf; border-block: 1px solid var(--rule); }
.folio-section-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(24px, 4vw, 50px); }
.folio-section-heading > p { color: var(--muted); max-width: 34ch; padding-bottom: 3px; }
.folio h2 { font-size: clamp(2.95rem, 6.5vw, 6.3rem); }
.folio h2,.folio h3 { margin-top: 10px; }
.project-media { display: flex; flex-direction: column; justify-content: end; position: relative; min-width: 0; overflow: hidden; }
.project-media figcaption { padding: 12px 16px; font: .68rem/1.5 var(--mono); }
.funa-media { background: radial-gradient(ellipse at 49% 22%, #ffe395 0%, #f5c741 68%, #eab930); }
.funa-screens {
  min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end; justify-content: center; gap: clamp(8px, 2vw, 24px);
  width: min(100%, 540px); margin-inline: auto; padding: clamp(16px, 3.4vw, 44px);
}
.funa-screens img {
  width: 100%; height: auto; border: 1px solid #7a6125;
  border-radius: 4px; box-shadow: 0 12px 24px #4930063d;
}
.funa-screens img:first-child { transform: translateY(-9px); }
.funa-media figcaption { color: #28210f; border-top: 1px solid #987f32; }
.cyber-media,.replay-media { background: #111b2b; color: #f2f5ff; }
.cyber-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cyber-media figcaption { z-index: 1; }
.cyber-media figcaption,.replay-media figcaption { background: #151f2d; border-top: 1px solid #536079; }
.replay-media { background: #24201e; }
.replay-media figcaption { background: #24201e; border-color: #63584b; }
.replay-window {
  width: min(88%, 470px); margin: 24px auto; border: 1px solid #675b52;
  background: #1c1917; border-radius: 5px; font: .85rem/1.4 var(--mono);
}
.replay-bar { padding: 8px 13px; border-bottom: 1px solid #675b52; color: #e0cbbd; display: flex; align-items: center; gap: 9px; }
.replay-dot { width: 7px; height: 7px; border-radius: 50%; background: #faad8d; flex: none; }
.replay-content { padding: clamp(9px, 2vw, 20px); }
.replay-file { color: #bfb5ac; }
.replay-content pre { overflow: auto; color: #ffe6c7; margin-block: .6em; }
.replay-result { color: #d9e8b8; }
.replay-compare { margin-top: 12px; border-top: 1px solid #675b52; }
.replay-compare summary { cursor: pointer; color: #ffdbb0; padding-block: 10px 2px; }
.replay-compare summary:hover { text-decoration: underline; }
.replay-diff { margin-top: 10px; color: #ffd1b8; overflow-wrap: anywhere; }

.section-end { display: flex; justify-content: flex-end; margin-top: 26px; }
.home-leadership { padding-block: clamp(44px, 8vw, 110px); }

.role-section { padding-block: clamp(28px, 5.5vw, 76px); }

.folio .folio-text-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  margin-inline-start: 10px; color: #872c20; font-size: .84rem; font-weight: 670;
}
.folio .folio-text-link:hover { color: #481711; }

/* Case studies use the same editorial shell, whether the evidence is an app screen or system design. */
.folio-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 21px; }
.case-opening-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5.5vw, 78px); align-items: center; }

.case-facts dt { font: 650 .74rem var(--mono); text-transform: uppercase; color: var(--accent); }
.case-facts dd { margin-top: 5px; overflow-wrap: anywhere; }

.system-media { background: #262336; color: #fff2e6; }
.system-visual { width: 100%; padding: clamp(22px, 4vw, 56px); }
.system-visual .folio-label { color: #f2c18a; }
.system-visual ol { list-style: none; padding: 0; margin: 18px 0 0; }
.system-visual li {
  display: grid; grid-template-columns: 27px 1fr; gap: 10px;
  margin-top: 8px; padding: 14px; border: 1px solid #72647d;
  font-size: clamp(.9rem, 1.5vw, 1.18rem); font-weight: 590; overflow-wrap: anywhere;
}
.system-visual li span { color: #f2c18a; font: .78rem/2 var(--mono); }
.system-media figcaption { border-top: 1px solid #72647d; color: #e9dcec; }
.case-story { padding-bottom: clamp(35px, 6vw, 90px); }
.case-chapter {
  display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: clamp(16px, 4vw, 56px);
  padding-block: clamp(25px, 4.5vw, 62px); border-top: 1px solid var(--rule);
}
.case-chapter h2 { font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1; }
.chapter-body { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.case-layers { display: grid; gap: 10px; margin-block: 18px; }
.case-layers article,.case-evidence { padding: clamp(14px, 2.4vw, 27px); border: 1px solid var(--rule); background: #eee8dd; }
.case-layers h3 { color: var(--ink); font: 680 1rem/1.4 var(--sans); letter-spacing: 0; margin: 0 0 6px; }
.chapter-body details { margin-block: 10px; border: 1px solid var(--rule); }
.chapter-body summary { cursor: pointer; min-height: 44px; padding: 11px 14px; color: var(--ink); font-weight: 630; }
.decision-notes { padding: 0 14px 14px; }
.decision-notes dt { margin-top: 12px; color: var(--ink); font-weight: 650; }
.chapter-body pre { overflow: auto; margin: 0 12px 12px; padding: 14px; color: #fff3e3; background: #242132; overflow-wrap: normal; }
.case-evidence strong { display: block; color: var(--ink); font: 400 clamp(1.6rem, 3.1vw, 2.7rem)/1.15 var(--display); margin-block: 8px; }
.case-sources { display: flex; flex-wrap: wrap; gap: 6px 19px; margin: 13px 0; padding: 0; list-style: none; }
.case-sources a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); }

@media (max-width: 980px) {

}
@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }
  .hero-stage { display: flex; flex-direction: column; }
  .folio-hero { min-height: auto; padding-block: 40px 24px; width: 100%; }
  .hero-copy { width: 100%; }
  .folio-hero h1 { font-size: clamp(2.9rem, 11vw, 5.3rem); margin-block: 12px 16px; }
  .hero-visual { position: relative; inset: auto; order: 1; width: 100%; aspect-ratio: 1.55; }
  .hero-visual img { object-position: 50% 22%; }
  .hero-visual::after { background: linear-gradient(0deg,#191722 0%,transparent 25%),linear-gradient(180deg,#1b1824 0%,transparent 18%); }
  .folio .hero-intro { margin-bottom: 18px; }

  .case-opening-grid,.case-chapter { grid-template-columns: minmax(0, 1fr); }

  .replay-window { font-size: .78rem; }

}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-location span { transform-origin: left; animation: line-enter .5s ease-out both; }
  .hero-identity,.hero-copy h1 { animation: folio-enter .68s cubic-bezier(.2,.7,.3,1) both; }
  .hero-intro,.hero-copy .folio-actions { animation: folio-enter .6s .12s cubic-bezier(.2,.7,.3,1) both; }
  .hero-visual img { animation: portrait-enter 1s cubic-bezier(.2,.7,.3,1) both; }

  [data-scroll-reveal].is-revealed { animation: section-enter .58s cubic-bezier(.2,.7,.3,1) both; }
  [data-scroll-reveal="media"].is-revealed { animation-duration: .75s; }
  [data-scroll-reveal="media"].is-revealed img { animation: project-image-enter .78s cubic-bezier(.2,.7,.3,1) both; }
  .folio-section-heading.is-revealed .folio-label::after {
    content: ""; display: inline-block; width: 36px; height: 1px; margin-left: 10px;
    vertical-align: middle; background: currentColor; transform-origin: left;
    animation: line-enter .65s ease-out both;
  }
  @view-transition { navigation: auto; }
  ::view-transition-old(root),::view-transition-new(root) { animation-duration: .18s; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-action,.folio-action span { transition: none; }
  .folio-action:hover span { transform: none; }
}
@keyframes line-enter { from { transform: scaleX(.25); } }
@keyframes folio-enter { from { transform: translateY(11px); } }
@keyframes section-enter { from { transform: translateY(18px); } }
@keyframes project-image-enter { from { opacity: .82; clip-path: inset(3% 2% 0); } to { clip-path: inset(0); } }
@keyframes portrait-enter { from { opacity: .72; transform: scale(1.06); } }