@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #111111;
  --paper-deep: #171513;
  --paper-wash: #1c1916;
  --ink: #f2e4cc;
  --ink-soft: rgba(242, 228, 204, 0.82);
  --muted: rgba(242, 228, 204, 0.64);
  --rule: rgba(242, 228, 204, 0.12);
  --rule-strong: rgba(242, 228, 204, 0.3);
  --accent: #c96451;
  --accent-bright: #f86c69;
  --gold: #edbe24;
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Space Grotesk", sans-serif;
  --font-utility: "JetBrains Mono", monospace;
  --text-caption: 0.75rem;
  --text-secondary: 0.875rem;
  --text-body: 1rem;
  --text-subheading: 1.25rem;
  --text-card-title: 1.75rem;
  --leading-compact: 1.4;
  --leading-copy: 1.65;
  --leading-heading: 1.08;
  --chapter-width: clamp(52px, 4.2vw, 62px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-chapter: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 20;
  --z-toast: 40;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-width: 320px;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.lucide-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  overflow: visible;
  color: currentColor;
  fill: none;
  stroke: currentColor;
}

.icon-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: calc(var(--z-toast) + 1);
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-180%);
  transition: transform 0.18s var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.archive-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  animation: archive-in 0.42s var(--ease-out) both;
}

@keyframes archive-in {
  from { opacity: 0.01; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.mobile-chapters {
  display: none;
}

.library {
  display: flex;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.chapter {
  position: relative;
  flex: 0 0 var(--chapter-width);
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  transition: flex-basis 0.68s var(--ease-chapter), flex-grow 0.68s var(--ease-chapter), background 0.2s ease-out;
}

.chapter:last-child {
  border-right: 0;
}

.chapter.active {
  flex: 1 1 auto;
}

.chapter-tab {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: 92px 1fr 68px;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.16s ease-out, color 0.08s ease-out, background 0.08s ease-out;
}

.chapter-tab::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.28s var(--ease-out);
}

.chapter-tab:hover {
  background: var(--paper-deep);
  color: var(--accent-bright);
}

.chapter-tab:hover::after {
  transform: scaleY(1);
}

.chapter-tab:hover .chapter-icon svg,
.chapter-tab:hover .chapter-icon .lucide-icon,
.chapter-tab:hover .chapter-icon-fallback {
  transform: translateY(-2px) rotate(-4deg);
}

.chapter.active > .chapter-tab {
  pointer-events: none;
  opacity: 0;
}

.chapter-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-self: center;
  place-items: center;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 13px;
}

.chapter-icon svg,
.chapter-icon .lucide-icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.45;
  transition: transform 0.22s var(--ease-out);
}

.chapter-icon-fallback {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
  transition: transform 0.22s var(--ease-out);
}

.chapter-icon .lucide-icon + .chapter-icon-fallback {
  display: none;
}

.chapter-name {
  display: inline-flex;
  place-self: center;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.chapter-count {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 9px;
}

.chapter-number {
  place-self: center;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.chapter-number span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

.chapter-panel {
  position: absolute;
  inset: 0;
  min-width: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
  transition: opacity 0.28s 0.08s ease-out, clip-path 0.68s var(--ease-chapter), visibility 0s 0.68s;
}

.chapter.active > .chapter-panel {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0);
  pointer-events: auto;
  transition-delay: 0.08s, 0s, 0s;
}

.category-view {
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  background: var(--paper);
}

.panel-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(20px, 3vw, 38px);
  border-bottom: 1px solid var(--rule);
}

.panel-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 5px;
}

.panel-heading h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.1vw, 45px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

.panel-count {
  color: var(--muted);
  font-size: 10px;
  transform: translateY(2px);
}

.panel-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 10px;
  white-space: nowrap;
}

.panel-meta::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--rule-strong);
}

/* ESSAYS / FILTERED ARCHIVE */
.category-view.essays-view {
  display: grid;
  grid-template-rows: 104px minmax(0, 1fr);
  overflow: hidden;
  background:
    linear-gradient(rgba(242, 228, 204, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 228, 204, 0.025) 1px, transparent 1px),
    var(--paper);
  background-size: 76px 76px;
}

.essays-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 clamp(22px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
  background: rgba(17, 17, 17, 0.96);
}

.essays-heading {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.essays-heading h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 64px);
  font-weight: 300;
  line-height: 1;
}

.essays-heading > span {
  color: var(--accent);
  font-size: 11px;
}

.essay-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}

.essay-filters > span {
  margin-right: 14px;
  color: var(--muted);
  font-family: var(--font-utility);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.essay-filters button {
  position: relative;
  min-width: 60px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.12s ease-out, background 0.12s ease-out, border-color 0.18s ease-out;
}

.essay-filters button:hover {
  color: var(--ink);
  background: rgba(201, 100, 81, 0.06);
}

.essay-filters button[aria-pressed="true"] {
  border-bottom-color: var(--accent);
  background: transparent;
  color: var(--accent-bright);
  font-weight: 600;
}

.essay-scroll {
  min-height: 0;
  padding: clamp(28px, 4vw, 48px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--accent) transparent;
  scrollbar-width: thin;
}

.essay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 42px) clamp(18px, 2.4vw, 32px);
}

.essay-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto auto auto 1fr auto;
  color: var(--ink);
  animation: essay-card-in 0.42s var(--ease-out) both;
  animation-delay: calc(var(--essay-order) * 55ms);
}

@keyframes essay-card-in {
  from { opacity: 0.01; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.essay-visual {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --scene-x: 0px;
  --scene-y: 0px;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rule);
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), color-mix(in srgb, var(--essay-accent) 17%, transparent) 0, transparent 38%),
    #151513;
  cursor: crosshair;
  isolation: isolate;
  transition: border-color 0.18s ease-out, box-shadow 0.28s var(--ease-out);
}

.essay-visual::before,
.essay-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.essay-visual::before {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(242, 228, 204, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 228, 204, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.58;
}

.essay-visual::after {
  inset: 0;
  z-index: 4;
  border: 1px solid transparent;
  background: radial-gradient(circle 38px at var(--pointer-x) var(--pointer-y), transparent 0 92%, color-mix(in srgb, var(--essay-accent-alt) 70%, transparent) 94% 96%, transparent 98%);
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

.essay-card:hover .essay-visual,
.essay-card:focus-visible .essay-visual,
.essay-card[aria-current="true"] .essay-visual {
  border-color: color-mix(in srgb, var(--essay-accent) 72%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--essay-accent) 18%, transparent);
}

.essay-card:hover .essay-visual::after,
.essay-card:focus-visible .essay-visual::after,
.essay-card[aria-current="true"] .essay-visual::after {
  opacity: 0.8;
}

.essay-card[aria-current="true"] .essay-card-title {
  color: var(--essay-accent);
}

.essay-visual-chrome {
  position: absolute;
  top: 13px;
  right: 14px;
  left: 14px;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1;
  transition: color 0.18s ease-out;
}

.essay-visual-chrome span:last-child {
  color: color-mix(in srgb, var(--essay-accent-alt) 72%, var(--ink));
}

.essay-card:hover .essay-visual-chrome,
.essay-card:focus-visible .essay-visual-chrome {
  color: var(--ink-soft);
}

.essay-scene {
  position: absolute;
  inset: 5px;
  z-index: 1;
  transform: translate3d(var(--scene-x), var(--scene-y), 0);
  transition: transform 0.32s var(--ease-out);
}

.essay-card:hover .essay-scene,
.essay-card:focus-visible .essay-scene {
  transform: translate3d(var(--scene-x), var(--scene-y), 0);
}

/* Diffusion map */
.diffusion-path {
  position: absolute;
  top: 51%;
  right: 12%;
  left: 13%;
  height: 1px;
  background: linear-gradient(90deg, var(--essay-accent), var(--essay-accent-alt));
  opacity: 0.72;
  transform: rotate(-22deg);
  transform-origin: center;
}

.diffusion-stage {
  position: absolute;
  display: grid;
  gap: 5px;
  justify-items: center;
  color: var(--ink-soft);
  font-size: 7px;
  transition: transform 0.34s var(--ease-out), color 0.18s ease-out;
}

.diffusion-stage i {
  width: 9px;
  height: 9px;
  border: 2px solid #151513;
  border-radius: 50%;
  background: var(--essay-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--essay-accent) 76%, var(--ink));
}

.diffusion-stage b {
  font-weight: 500;
}

.diffusion-stage--method { top: 70%; left: 13%; }
.diffusion-stage--product { top: 56%; left: 34%; }
.diffusion-stage--adoption { top: 38%; left: 57%; }
.diffusion-stage--society { top: 22%; left: 79%; }

.diffusion-stage--society i,
.diffusion-stage--adoption i {
  background: var(--essay-accent-alt);
}

.essay-card:hover .diffusion-stage--method,
.essay-card:focus-visible .diffusion-stage--method { transform: translate(-4px, 4px); }
.essay-card:hover .diffusion-stage--product,
.essay-card:focus-visible .diffusion-stage--product { transform: translate(-2px, 2px); }
.essay-card:hover .diffusion-stage--adoption,
.essay-card:focus-visible .diffusion-stage--adoption { transform: translate(2px, -2px); }
.essay-card:hover .diffusion-stage--society,
.essay-card:focus-visible .diffusion-stage--society { transform: translate(4px, -4px); }

.diffusion-readout,
.scale-readout,
.failure-readout,
.forest-readout {
  position: absolute;
  left: 6%;
  bottom: 7%;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.diffusion-readout strong,
.failure-readout strong,
.forest-readout strong {
  color: var(--essay-accent-alt);
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 300;
}

.diffusion-readout span,
.failure-readout span,
.forest-readout span {
  max-width: 72px;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.2;
}

/* Scale chart */
.scale-grid {
  position: absolute;
  inset: 21% 8% 19%;
  border-bottom: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule-strong);
  background: repeating-linear-gradient(to top, transparent 0 24%, rgba(242, 228, 204, 0.055) 24% 25%);
}

.scale-bars {
  position: absolute;
  inset: 26% 15% 20% 13%;
  display: flex;
  align-items: flex-end;
  gap: clamp(5px, 1vw, 12px);
}

.scale-bars i {
  flex: 1;
  height: var(--bar);
  background: linear-gradient(to top, color-mix(in srgb, var(--essay-accent) 35%, transparent), var(--essay-accent));
  opacity: 0.68;
  transform-origin: bottom;
  transition: height 0.42s var(--ease-out), opacity 0.18s ease-out;
}

.essay-card:hover .scale-bars i,
.essay-card:focus-visible .scale-bars i {
  height: min(100%, calc(var(--bar) + 7%));
  opacity: 0.94;
}

.scale-plateau {
  position: absolute;
  top: 45%;
  right: 8%;
  left: 8%;
  height: 1px;
  background: var(--essay-accent-alt);
  opacity: 0.78;
  transition: transform 0.34s var(--ease-out);
}

.essay-card:hover .scale-plateau,
.essay-card:focus-visible .scale-plateau {
  transform: translateY(7px);
}

.scale-key {
  position: absolute;
  top: 26%;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 7px;
}

.scale-key i {
  width: 12px;
  height: 2px;
  background: currentColor;
}

.scale-key--compute { left: 13%; color: var(--essay-accent); }
.scale-key--knowledge { right: 9%; color: var(--essay-accent-alt); }

.scale-readout {
  right: 7%;
  left: auto;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: clamp(11px, 1.3vw, 16px);
}

/* Lossy compression lens */
.compression-copy {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 300;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.compression-copy--blurred {
  color: color-mix(in srgb, var(--essay-accent) 74%, var(--ink));
  filter: blur(5px);
  opacity: 0.5;
}

.compression-copy--sharp {
  color: var(--essay-accent-alt);
  clip-path: circle(26px at var(--pointer-x) var(--pointer-y));
  transition: clip-path 0.24s var(--ease-out);
}

.essay-card:hover .compression-copy--sharp,
.essay-card:focus-visible .compression-copy--sharp {
  clip-path: circle(54px at var(--pointer-x) var(--pointer-y));
}

.compression-grid {
  position: absolute;
  inset: 17% 8%;
  background:
    linear-gradient(rgba(21, 21, 19, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 21, 19, 0.32) 1px, transparent 1px);
  background-size: 14px 14px;
  mix-blend-mode: multiply;
  opacity: 0.76;
}

.compression-ratio {
  position: absolute;
  bottom: 7%;
  left: 6%;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.compression-ratio strong {
  color: var(--essay-accent-alt);
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 300;
}

.compression-ratio span,
.compression-artifact {
  color: var(--muted);
  font-size: 7px;
}

.compression-artifact {
  position: absolute;
  top: 23%;
  right: 6%;
  color: color-mix(in srgb, var(--essay-accent) 70%, var(--ink));
  transition: letter-spacing 0.34s var(--ease-out);
}

.essay-card:hover .compression-artifact,
.essay-card:focus-visible .compression-artifact {
  letter-spacing: 2px;
}

/* Failure-state map */
.failure-lines {
  position: absolute;
  inset: 20% 8% 18%;
  background:
    linear-gradient(18deg, transparent 49.6%, rgba(242, 228, 204, 0.18) 49.8% 50.2%, transparent 50.4%),
    linear-gradient(-16deg, transparent 49.6%, rgba(242, 228, 204, 0.13) 49.8% 50.2%, transparent 50.4%);
  opacity: 0.78;
}

.failure-node {
  position: absolute;
  display: grid;
  min-width: 42px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--rule-strong);
  background: #171715;
  color: var(--muted);
  font-size: 7px;
  transition: color 0.16s ease-out, border-color 0.16s ease-out, transform 0.3s var(--ease-out);
}

.failure-node--one { top: 31%; left: 8%; }
.failure-node--two { top: 57%; left: 31%; }
.failure-node--three { top: 27%; left: 55%; }
.failure-node--four { top: 52%; right: 7%; }
.failure-node--fault { top: 66%; left: 60%; border-color: var(--essay-accent); color: var(--essay-accent); }

.essay-card:hover .failure-node,
.essay-card:focus-visible .failure-node {
  border-color: color-mix(in srgb, var(--essay-accent-alt) 52%, var(--rule));
  color: var(--ink-soft);
}

.essay-card:hover .failure-node--fault,
.essay-card:focus-visible .failure-node--fault {
  border-color: var(--essay-accent);
  color: #fff8ed;
  transform: translate(5px, -4px);
}

.failure-scan {
  position: absolute;
  top: var(--pointer-y);
  left: var(--pointer-x);
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--essay-accent) 62%, transparent);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.75);
  transition: opacity 0.16s ease-out, transform 0.28s var(--ease-out);
}

.essay-card:hover .failure-scan,
.essay-card:focus-visible .failure-scan {
  opacity: 0.7;
  transform: translate(-50%, -50%) scale(1);
}

.failure-readout strong {
  color: var(--essay-accent);
}

/* Language probability inspector */
.language-prompt {
  position: absolute;
  top: 22%;
  left: 9%;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 24px);
}

.language-token {
  position: absolute;
  right: 9%;
  left: 9%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 7px;
  transition: color 0.18s ease-out, transform 0.32s var(--ease-out);
}

.language-token--one { top: 43%; }
.language-token--two { top: 56%; }
.language-token--three { top: 69%; }

.language-token b {
  font-weight: 500;
}

.language-token i {
  position: relative;
  height: 3px;
  background: var(--rule);
}

.language-token i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--probability);
  background: linear-gradient(90deg, var(--essay-accent), var(--essay-accent-alt));
  transition: width 0.36s var(--ease-out);
}

.language-token em {
  font-style: normal;
  text-align: right;
}

.essay-card:hover .language-token--one,
.essay-card:focus-visible .language-token--one {
  color: var(--essay-accent);
  text-decoration: line-through;
  transform: translateX(7px);
}

.essay-card:hover .language-token--two,
.essay-card:focus-visible .language-token--two { transform: translateX(3px); }
.essay-card:hover .language-token--three,
.essay-card:focus-visible .language-token--three { transform: translateX(1px); }

.language-correction {
  position: absolute;
  right: 9%;
  bottom: 7%;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--essay-accent) 58%, var(--rule));
  color: var(--essay-accent);
  font-size: 7px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.18s ease-out, transform 0.28s var(--ease-out);
}

.essay-card:hover .language-correction,
.essay-card:focus-visible .language-correction {
  opacity: 1;
  transform: none;
}

/* Human signal field */
.forest-field {
  position: absolute;
  inset: 22% 9% 17%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  place-items: center;
  transition: opacity 0.24s ease-out, transform 0.36s var(--ease-out);
}

.forest-field i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: 0.28;
  transition: transform 0.34s var(--ease-out), opacity 0.18s ease-out;
}

.forest-field i:nth-child(3n) { width: 7px; height: 7px; opacity: 0.15; }
.forest-field i:nth-child(4n) { border: 1px solid var(--muted); background: transparent; opacity: 0.32; }
.forest-field i:nth-child(7n) { transform: translate(8px, -5px); }

.essay-card:hover .forest-field,
.essay-card:focus-visible .forest-field {
  opacity: 0.58;
  transform: scale(1.06);
}

.essay-card:hover .forest-field i:nth-child(odd),
.essay-card:focus-visible .forest-field i:nth-child(odd) { transform: translate(-5px, 3px); }
.essay-card:hover .forest-field i:nth-child(even),
.essay-card:focus-visible .forest-field i:nth-child(even) { transform: translate(5px, -3px); }

.forest-signal {
  position: absolute;
  top: var(--pointer-y);
  left: var(--pointer-x);
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--essay-accent-alt) 62%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 24px color-mix(in srgb, var(--essay-accent-alt) 14%, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out);
}

.forest-signal i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--essay-accent-alt);
  transform: translate(-50%, -50%);
}

.essay-card:hover .forest-signal,
.essay-card:focus-visible .forest-signal {
  width: 76px;
  height: 76px;
}

.forest-label {
  position: absolute;
  right: 7%;
  bottom: 8%;
  color: var(--muted);
  font-size: 7px;
}

.essay-open {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff8ed;
  font-size: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease-out, transform 0.28s var(--ease-out);
}

.essay-open svg,
.essay-open .lucide-icon {
  width: 12px;
  height: 12px;
}

.essay-card:hover .essay-open,
.essay-card:focus-visible .essay-open {
  opacity: 1;
  transform: none;
}

.essay-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 8px;
  color: var(--muted);
  font-size: 9px;
}

.essay-card-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1.06;
  text-wrap: balance;
  transition: color 0.08s ease-out;
}

.essay-card:hover .essay-card-title,
.essay-card:focus-visible .essay-card-title {
  color: var(--essay-accent);
}

.essay-card-source {
  padding-top: 8px;
  color: var(--essay-accent);
  font-size: 10px;
}

.essay-card-summary {
  max-width: 55ch;
  padding-top: 12px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.48;
  text-wrap: pretty;
}

.essay-card-question {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  margin-top: 17px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.35;
}

.essay-card-question i {
  color: var(--essay-accent);
  font-family: var(--font-body);
  font-size: 8px;
  font-style: normal;
}

.essay-card-question span {
  text-wrap: pretty;
}

.essay-result-count {
  margin: 42px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 9px;
}

/* PODCASTS / BROADCAST DECK */
.category-view.broadcast-view {
  position: relative;
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr);
  overflow: hidden;
  background:
    linear-gradient(rgba(242, 228, 204, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 228, 204, 0.04) 1px, transparent 1px),
    #0d0e0d;
  background-size: 58px 58px;
  color: var(--ink);
}

.broadcast-view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border: 1px solid rgba(201, 100, 81, 0.2);
  pointer-events: none;
}

.broadcast-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(22px, 3vw, 38px);
  border-bottom: 1px solid var(--rule);
  background: rgba(13, 14, 13, 0.88);
}

.broadcast-header > div {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.broadcast-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.1vw, 45px);
  font-weight: 300;
  line-height: 1;
}

.broadcast-header span {
  color: var(--accent);
  font-size: 10px;
}

.broadcast-header p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.broadcast-header p i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 12px rgba(248, 108, 105, 0.85);
  animation: broadcast-live 1.6s ease-in-out infinite;
}

@keyframes broadcast-live {
  50% { opacity: 0.35; transform: scale(0.72); }
}

.broadcast-dots {
  top: 52%;
  left: 5px;
}

.broadcast-dots .item-dot[aria-selected="true"]::before {
  background: var(--accent-bright);
  box-shadow: 0 0 0 3px #0d0e0d, 0 0 0 4px var(--accent);
}

.broadcast-stage {
  display: grid;
  grid-template-columns: minmax(290px, 0.9fr) minmax(310px, 1.05fr) minmax(210px, 0.62fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(34px, 5vw, 72px) clamp(24px, 4vw, 56px) clamp(28px, 4vw, 48px) clamp(62px, 6vw, 84px);
  gap: clamp(24px, 3.5vw, 54px);
  align-items: center;
}

.broadcast-copy {
  min-width: 0;
  animation: broadcast-copy-in 0.45s var(--ease-out) both;
}

@keyframes broadcast-copy-in {
  from { opacity: 0.01; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}

.broadcast-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: var(--accent);
  font-size: 9px;
}

.broadcast-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.broadcast-kicker span {
  color: var(--muted);
}

.broadcast-copy h2 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 5.6vw, 78px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.broadcast-host {
  margin: 15px 0 0;
  color: var(--accent-bright);
  font-size: 11px;
}

.broadcast-summary {
  max-width: 54ch;
  margin: 24px 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
  text-wrap: pretty;
}

.broadcast-meta {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 10px;
}

.broadcast-meta dt,
.broadcast-meta dd {
  margin: 0;
  padding: 4px 0;
}

.broadcast-meta dt {
  color: var(--muted);
}

.broadcast-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 9px;
  margin-top: 22px;
}

.broadcast-actions a,
.broadcast-actions button {
  min-height: 46px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.08s ease-out, color 0.08s ease-out, transform 0.08s ease-out;
}

.broadcast-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff8ed;
  font-size: 10px;
}

.broadcast-actions button {
  display: grid;
  width: 46px;
  place-items: center;
}

.broadcast-actions a:hover,
.broadcast-actions button:hover {
  background: var(--ink);
  color: var(--paper);
}

.broadcast-actions a:active,
.broadcast-actions button:active {
  transform: scale(0.97);
}

.broadcast-actions svg,
.broadcast-actions .lucide-icon {
  width: 15px;
  height: 15px;
}

.broadcast-visual {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  align-content: center;
  gap: 28px;
}

.broadcast-dial {
  position: relative;
  display: grid;
  width: min(27vw, 340px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(242, 228, 204, 0.18);
  border-radius: 50%;
  background: #090a09;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.48);
  animation: broadcast-dial-in 0.55s var(--ease-out) both;
}

@keyframes broadcast-dial-in {
  from { opacity: 0.01; transform: scale(0.92) rotate(-5deg); }
  to { opacity: 1; transform: none; }
}

.broadcast-dial::before,
.broadcast-dial::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.broadcast-dial::before {
  inset: 8%;
  border: 1px dashed rgba(242, 228, 204, 0.24);
  animation: broadcast-spin 24s linear infinite;
}

.broadcast-dial::after {
  inset: 18%;
  border: 1px solid color-mix(in srgb, var(--broadcast-accent) 72%, transparent);
}

@keyframes broadcast-spin {
  to { transform: rotate(360deg); }
}

.broadcast-orbit {
  position: absolute;
  inset: 3%;
  border: 1px solid rgba(201, 100, 81, 0.38);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: broadcast-spin 16s linear infinite reverse;
}

.broadcast-cover {
  position: relative;
  z-index: 2;
  width: 58%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(242, 228, 204, 0.24);
  border-radius: 50%;
  background: var(--broadcast-accent);
}

.broadcast-cover img,
.broadcast-cover .poster-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.broadcast-cover img {
  z-index: 2;
  object-fit: cover;
}

.broadcast-cover .poster-fallback {
  border-radius: 50%;
}

.broadcast-cover .poster-series,
.broadcast-cover .poster-fallback > span:last-child {
  display: none;
}

.broadcast-cover .poster-fallback strong {
  font-size: clamp(24px, 3vw, 42px);
}

.broadcast-needle {
  position: absolute;
  top: 13%;
  right: 5%;
  z-index: 3;
  width: 34%;
  height: 2px;
  background: var(--accent);
  transform: rotate(37deg);
  transform-origin: right;
  box-shadow: 0 0 10px rgba(201, 100, 81, 0.55);
}

.broadcast-wave {
  display: flex;
  width: min(32vw, 410px);
  height: 58px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
}

.broadcast-wave i {
  width: 3px;
  height: var(--bar-height);
  flex: 0 0 3px;
  background: var(--accent-bright);
  opacity: 0.7;
  transform-origin: center;
  animation: broadcast-wave 0.8s ease-in-out infinite alternate;
  animation-delay: calc(var(--bar) * -37ms);
}

@keyframes broadcast-wave {
  from { transform: scaleY(0.22); opacity: 0.35; }
  to { transform: scaleY(1); opacity: 0.9; }
}

.broadcast-timeline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  width: min(32vw, 410px);
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 8px;
}

.broadcast-timeline i {
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 38%, var(--rule) 38%);
}

.broadcast-queue {
  min-width: 0;
  align-self: stretch;
  border-left: 1px solid var(--rule);
  overflow: hidden;
}

.broadcast-queue-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding-left: 18px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 9px;
}

.broadcast-queue-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 16px;
  width: 100%;
  min-height: 72px;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 18px;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease-out, padding-left 0.2s var(--ease-out);
}

.broadcast-queue-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.2s var(--ease-out);
}

.broadcast-queue-item:hover,
.broadcast-queue-item[aria-current="true"] {
  padding-left: 24px;
  background: rgba(201, 100, 81, 0.08);
}

.broadcast-queue-item:hover::before,
.broadcast-queue-item[aria-current="true"]::before {
  transform: scaleY(1);
}

.broadcast-queue-item > span,
.broadcast-queue-item small {
  color: var(--muted);
  font-size: 8px;
}

.broadcast-queue-item strong {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broadcast-queue-item svg,
.broadcast-queue-item > .lucide-icon {
  width: 13px;
  height: 13px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.12s ease-out, transform 0.2s var(--ease-out);
}

.broadcast-queue-item:hover svg,
.broadcast-queue-item:hover > .lucide-icon,
.broadcast-queue-item[aria-current="true"] svg,
.broadcast-queue-item[aria-current="true"] > .lucide-icon {
  opacity: 1;
  transform: none;
}

/* NEWSLETTERS / INBOX RACK */
.category-view.mail-view {
  position: relative;
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(242, 228, 204, 0.045) 50%, transparent 50.1%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(242, 228, 204, 0.04) 48px),
    #12110f;
}

.mail-header,
.people-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(22px, 3vw, 38px);
  border-bottom: 1px solid var(--rule);
  background: rgba(17, 17, 17, 0.94);
}

.mail-header > div,
.people-header > div {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.mail-header h1,
.people-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.1vw, 45px);
  font-weight: 300;
  line-height: 1;
}

.mail-header span,
.people-header span {
  color: var(--accent);
  font-size: 10px;
}

.mail-header p,
.people-header p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 9px;
}

.mail-header p svg,
.mail-header p .lucide-icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.mail-dots,
.people-dots {
  top: 52%;
  left: 5px;
}

.mail-dots .item-dot[aria-selected="true"]::before,
.people-dots .item-dot[aria-selected="true"]::before {
  background: var(--accent-bright);
  box-shadow: 0 0 0 3px #111, 0 0 0 4px var(--accent);
}

.mail-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 0.68fr) minmax(390px, 1.32fr);
  min-width: 0;
  min-height: 0;
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  padding: clamp(36px, 5vw, 72px) clamp(42px, 6vw, 88px) clamp(34px, 5vw, 62px) clamp(64px, 7vw, 96px);
}

.mail-rack {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 420px;
}

.mail-envelope {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 18px;
  min-height: 92px;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  background: #181613;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  transform: translateY(calc(var(--mail-order) * -8px));
  transition: transform 0.28s var(--ease-out), background 0.12s ease-out, border-color 0.12s ease-out;
}

.mail-envelope + .mail-envelope {
  margin-top: -6px;
}

.mail-envelope:hover {
  z-index: 3;
  border-color: var(--mail-accent);
  background: #201b17;
  transform: translate(8px, calc(var(--mail-order) * -8px - 4px));
}

.mail-envelope[aria-current="true"] {
  z-index: 4;
  border-color: var(--accent);
  background: rgba(201, 100, 81, 0.1);
  transform: translate(12px, calc(var(--mail-order) * -8px - 6px));
}

.mail-flap {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 42%;
  border-bottom: 1px solid var(--rule);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background: #1d1a16;
  transform-origin: top;
  transition: transform 0.3s var(--ease-out), background 0.12s ease-out;
  pointer-events: none;
}

.mail-envelope:hover .mail-flap,
.mail-envelope[aria-current="true"] .mail-flap {
  background: color-mix(in srgb, var(--mail-accent) 24%, #1d1a16);
  transform: rotateX(18deg);
}

.mail-number,
.mail-cadence {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 8px;
}

.mail-name {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-envelope svg,
.mail-envelope > .lucide-icon {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.12s ease-out, transform 0.22s var(--ease-out);
  transform: translate(-5px, 5px);
}

.mail-envelope:hover svg,
.mail-envelope:hover > .lucide-icon,
.mail-envelope[aria-current="true"] svg,
.mail-envelope[aria-current="true"] > .lucide-icon {
  opacity: 1;
  transform: none;
}

.mail-letter {
  position: relative;
  width: min(100%, 680px);
  min-height: min(650px, calc(100dvh - 170px));
  justify-self: center;
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(242, 228, 204, 0.24);
  background: #1a1714;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.48);
  animation: mail-letter-in 0.48s var(--ease-out) both;
}

@keyframes mail-letter-in {
  from { opacity: 0.01; transform: translateY(34px) rotate(0.8deg); }
  to { opacity: 1; transform: none; }
}

.mail-letter::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--letter-accent);
}

.mail-letter-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 8px;
}

.mail-stamp {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px dashed var(--accent);
  color: var(--accent-bright) !important;
  font-family: var(--font-display);
  font-size: 18px !important;
  transform: rotate(4deg);
}

.mail-from {
  margin: clamp(26px, 5vh, 54px) 0 10px;
  color: var(--accent);
  font-size: 10px;
}

.mail-letter h2 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 5.3vw, 76px);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.mail-summary,
.mail-letter blockquote {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.56;
  text-wrap: pretty;
}

.mail-summary {
  margin: 30px 0 18px;
}

.mail-letter blockquote {
  margin: 0;
  padding: 14px 0 14px 18px;
  border-left: 1px solid var(--accent);
  color: var(--ink);
}

.mail-meta {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 9px;
}

.mail-meta dt,
.mail-meta dd {
  margin: 0;
  padding: 4px 0;
}

.mail-meta dt {
  color: var(--muted);
}

.mail-actions,
.people-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 9px;
  margin-top: 24px;
}

.mail-actions a,
.mail-actions button,
.people-actions a,
.people-actions button {
  min-height: 46px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.08s ease-out, color 0.08s ease-out, transform 0.08s ease-out;
}

.mail-actions a,
.people-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff8ed;
  font-size: 10px;
}

.mail-actions button,
.people-actions button {
  display: grid;
  width: 46px;
  place-items: center;
}

.mail-actions a:hover,
.mail-actions button:hover,
.people-actions a:hover,
.people-actions button:hover {
  background: var(--ink);
  color: var(--paper);
}

.mail-actions svg,
.mail-actions .lucide-icon,
.people-actions svg,
.people-actions .lucide-icon {
  width: 15px;
  height: 15px;
}

.mail-fold {
  position: absolute;
  right: -48px;
  bottom: -48px;
  width: 96px;
  height: 96px;
  border: 1px solid var(--rule);
  background: #211d19;
  transform: rotate(45deg);
}

.mail-sort {
  position: absolute;
  right: 12px;
  bottom: 48px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 7px;
  writing-mode: vertical-rl;
}

/* PEOPLE / PORTRAIT STAGE */
.category-view.people-view {
  position: relative;
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr);
  overflow: hidden;
  background:
    linear-gradient(rgba(242, 228, 204, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 228, 204, 0.04) 1px, transparent 1px),
    #0e0e0d;
  background-size: 70px 70px;
}

.people-stage {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(300px, 0.9fr) minmax(210px, 0.58fr);
  min-width: 0;
  min-height: 0;
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  padding: clamp(34px, 5vw, 70px) clamp(24px, 4vw, 56px) clamp(30px, 4vw, 52px) clamp(64px, 7vw, 96px);
}

.people-copy {
  min-width: 0;
  animation: people-copy-in 0.44s var(--ease-out) both;
}

@keyframes people-copy-in {
  from { opacity: 0.01; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}

.people-index {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--accent);
  font-size: 9px;
}

.people-index::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.people-copy h2 {
  max-width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.2vw, 72px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.people-role {
  margin: 16px 0 0;
  color: var(--accent-bright);
  font-size: 11px;
}

.people-summary,
.people-copy blockquote {
  max-width: 56ch;
  font-size: 12px;
  line-height: 1.55;
  text-wrap: pretty;
}

.people-summary {
  margin: 26px 0 18px;
  color: var(--ink-soft);
}

.people-copy blockquote {
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid var(--accent);
  color: var(--ink);
}

.people-meta {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 9px;
}

.people-meta dt,
.people-meta dd {
  margin: 0;
  padding: 4px 0;
}

.people-meta dt {
  color: var(--muted);
}

.people-portrait {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: center;
}

.people-media {
  position: relative;
  width: min(29vw, 390px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: var(--person-accent);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.52);
  animation: people-portrait-in 0.55s var(--ease-out) both;
}

@keyframes people-portrait-in {
  from { opacity: 0.01; clip-path: inset(0 0 100% 0); transform: translateY(20px); }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}

.people-media img,
.people-media .poster-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.people-media img {
  z-index: 2;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.04);
  transition: filter 0.22s ease-out, transform 0.42s var(--ease-out);
}

.people-portrait:hover .people-media img {
  filter: saturate(1) contrast(1.02);
  transform: scale(1.025);
}

.people-crosshair {
  position: absolute;
  top: 8%;
  right: 4%;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}

.people-portrait > p {
  display: flex;
  width: min(29vw, 390px);
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 9px;
}

.people-portrait > p span {
  color: var(--accent);
}

.people-contacts {
  min-width: 0;
  align-self: stretch;
  border-left: 1px solid var(--rule);
}

.people-contacts-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 9px;
}

.people-contact {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  width: 100%;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease-out, padding-left 0.2s var(--ease-out);
}

.people-contact::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.2s var(--ease-out);
}

.people-contact:hover,
.people-contact[aria-current="true"] {
  padding-left: 22px;
  background: rgba(201, 100, 81, 0.08);
}

.people-contact:hover::before,
.people-contact[aria-current="true"]::before {
  transform: scaleY(1);
}

.people-thumb {
  position: relative;
  display: grid;
  width: 46px;
  height: 52px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--person-accent);
}

.people-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.people-thumb strong {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
}

.people-contact > span:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.people-contact > span:last-child strong {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-contact small {
  color: var(--muted);
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* GAMES / STUDY CONSOLE */
.category-view.game-view {
  position: relative;
  display: block;
  overflow: hidden;
  background: #080a09;
  color: #fffaf2;
  isolation: isolate;
}

.game-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #080a09;
  transform: translate(var(--game-x, 0), var(--game-y, 0)) scale(1.02);
  transition: transform 0.7s var(--ease-out);
}

.game-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 7, 6, 0.2), transparent 46%, rgba(5, 7, 6, 0.12)),
    linear-gradient(180deg, rgba(5, 7, 6, 0.12), rgba(5, 7, 6, 0.24) 43%, rgba(5, 7, 6, 0.94) 83%, #080a09 100%);
  pointer-events: none;
}

.game-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.78) brightness(0.64) contrast(1.08);
  transform: scale(1.02);
}

.game-view::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(242, 228, 204, 0.022) 4px, transparent 5px);
  pointer-events: none;
}

.game-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4;
  display: flex;
  height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(22px, 3vw, 38px);
  border-bottom: 1px solid rgba(255, 250, 242, 0.18);
}

.game-header > div {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.game-header h1,
.game-identity h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0;
}

.game-header h1 {
  font-size: clamp(30px, 3.1vw, 45px);
  line-height: 1;
}

.game-header span {
  color: rgba(255, 250, 242, 0.58);
  font-size: 10px;
}

.game-header p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(255, 250, 242, 0.68);
  font-size: 9px;
}

.game-header .lucide-icon {
  width: 15px;
  height: 15px;
  color: var(--game-accent);
}

.game-dots {
  top: 48%;
  left: 6px;
}

.game-dots .item-dot::before {
  background: rgba(255, 250, 242, 0.46);
}

.game-dots .item-dot:hover::before {
  background: #fffaf2;
}

.game-dots .item-dot[aria-selected="true"]::before {
  background: var(--game-accent);
  box-shadow: 0 0 0 3px rgba(8, 10, 9, 0.76), 0 0 0 4px rgba(255, 250, 242, 0.62);
}

.game-readout {
  position: absolute;
  top: 88px;
  right: clamp(22px, 3vw, 38px);
  z-index: 4;
  display: flex;
  min-width: 180px;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 250, 242, 0.2);
  background: rgba(8, 10, 9, 0.46);
  color: rgba(255, 250, 242, 0.62);
  font-size: 8px;
  backdrop-filter: blur(8px);
}

.game-readout span:first-child {
  color: var(--game-accent);
}

.game-scan {
  position: absolute;
  top: 68px;
  bottom: 48px;
  left: 38%;
  z-index: 2;
  width: 1px;
  background: linear-gradient(transparent, var(--game-accent), transparent);
  opacity: 0.34;
  pointer-events: none;
  animation: game-scan 5.6s var(--ease-in-out) infinite alternate;
}

@keyframes game-scan {
  from { transform: translateX(-12vw); opacity: 0.12; }
  to { transform: translateX(34vw); opacity: 0.42; }
}

.game-lower {
  position: absolute;
  right: clamp(22px, 3vw, 38px);
  bottom: 54px;
  left: clamp(22px, 3vw, 38px);
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(430px, 1.5fr);
  gap: clamp(30px, 4.5vw, 70px);
  align-items: end;
}

.game-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  color: var(--game-accent);
  font-size: 8px;
}

.game-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--game-accent);
}

.game-kicker span {
  color: rgba(255, 250, 242, 0.5);
}

.game-identity h2 {
  max-width: 13ch;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 0.96;
  text-wrap: balance;
}

.game-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.game-genres span {
  padding: 4px 9px;
  border: 1px solid rgba(255, 250, 242, 0.68);
  border-radius: 100px;
  font-size: 8px;
  line-height: 1;
}

.game-facts {
  display: grid;
  grid-template-columns: minmax(66px, 86px) minmax(0, 1fr);
  margin: clamp(20px, 3.5vh, 34px) 0 0;
  font-size: 9px;
  line-height: 1.35;
}

.game-facts dt,
.game-facts dd {
  margin: 0;
  padding: 3px 0;
}

.game-facts dt {
  color: rgba(255, 250, 242, 0.54);
}

.game-facts dd {
  color: rgba(255, 250, 242, 0.92);
}

.game-story {
  min-width: 0;
}

.game-gallery {
  display: grid;
  grid-template-columns: repeat(var(--frame-count, 5), minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}

.game-frame {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 250, 242, 0.28);
  background: #111;
  cursor: pointer;
  transition: border-color 0.08s ease-out, transform 0.12s var(--ease-out);
}

.game-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
}

.game-frame:hover {
  z-index: 1;
  border-color: #fffaf2;
  transform: translateY(-3px);
}

.game-frame[aria-selected="true"]::after {
  border-color: var(--game-accent);
}

.game-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) brightness(0.78);
  transition: filter 0.12s ease-out, transform 0.22s var(--ease-out);
}

.game-frame:hover img,
.game-frame[aria-selected="true"] img {
  filter: none;
  transform: scale(1.035);
}

.game-frame > span {
  position: absolute;
  right: 6px;
  bottom: 5px;
  z-index: 2;
  color: rgba(255, 250, 242, 0.82);
  font-size: 7px;
}

.game-story > p {
  max-width: 68ch;
  margin: clamp(16px, 2.2vh, 24px) 0 11px;
  color: rgba(255, 250, 242, 0.84);
  font-size: clamp(10px, 0.9vw, 12px);
  line-height: 1.48;
  text-wrap: pretty;
}

.game-lens {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  max-width: 68ch;
  padding: 11px 0 11px 14px;
  border-left: 1px solid var(--game-accent);
  color: rgba(255, 250, 242, 0.88);
  font-size: 9px;
  line-height: 1.42;
}

.game-lens span {
  color: var(--game-accent);
}

.game-lens strong {
  font-weight: 500;
}

.game-story > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  color: rgba(255, 250, 242, 0.62);
  font-size: 9px;
  transition: color 0.08s ease-out, gap 0.18s var(--ease-out);
}

.game-story > a:hover {
  gap: 11px;
  color: #fffaf2;
}

.game-story > a .lucide-icon {
  width: 13px;
  height: 13px;
}

.game-footer {
  position: absolute;
  right: 16px;
  bottom: 8px;
  left: 16px;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: rgba(255, 250, 242, 0.5);
  font-size: 8px;
}

.game-footer > i {
  width: 46px;
  height: 4px;
  border: 1px solid rgba(255, 250, 242, 0.42);
  border-radius: 100px;
  background: linear-gradient(90deg, var(--game-accent) 54%, transparent 54%);
}

.game-footer button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(255, 250, 242, 0.28);
  background: rgba(8, 10, 9, 0.42);
  color: #fffaf2;
  cursor: pointer;
  transition: background 0.08s ease-out, color 0.08s ease-out, border-color 0.08s ease-out;
}

.game-footer button:hover {
  border-color: #fffaf2;
  background: #fffaf2;
  color: #080a09;
}

.game-footer .lucide-icon {
  width: 14px;
  height: 14px;
}

/* FILMS / SCREENING ROOM */
.category-view.watch-view {
  position: relative;
  display: block;
  overflow: hidden;
  background: #080a09;
  color: #fffaf2;
  isolation: isolate;
}

.watch-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #080a09;
  transform: translate(var(--watch-x, 0), var(--watch-y, 0)) scale(1.025);
  transition: transform 0.8s var(--ease-out);
}

.watch-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 5, 4, 0.28), transparent 38%, rgba(3, 5, 4, 0.1)),
    linear-gradient(180deg, rgba(3, 5, 4, 0.12) 0%, rgba(3, 5, 4, 0.18) 42%, rgba(3, 5, 4, 0.93) 82%, #080a09 100%);
  pointer-events: none;
}

.watch-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.78) brightness(0.7) contrast(1.06);
  animation: watch-screen-in 1.2s var(--ease-out) both, watch-drift 16s 1.2s ease-in-out infinite alternate;
}

@keyframes watch-screen-in {
  from { opacity: 0.01; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes watch-drift {
  from { object-position: 48% 34%; scale: 1; }
  to { object-position: 54% 39%; scale: 1.045; }
}

.watch-view::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 1;
  background:
    repeating-linear-gradient(93deg, transparent 0 3px, rgba(255, 255, 255, 0.025) 4px, transparent 5px),
    repeating-linear-gradient(7deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 3px 7px);
  opacity: 0.28;
  pointer-events: none;
  animation: watch-grain 0.34s steps(2, end) infinite;
}

@keyframes watch-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -1%); }
  50% { transform: translate(-1%, 2%); }
  75% { transform: translate(1%, 1%); }
  100% { transform: translate(-2%, -1%); }
}

.watch-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4;
  display: flex;
  height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(22px, 3vw, 38px);
  border-bottom: 1px solid rgba(255, 250, 242, 0.16);
}

.watch-heading {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.watch-heading h1,
.watch-identity h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0;
}

.watch-heading h1 {
  font-size: clamp(30px, 3.1vw, 45px);
  line-height: 1;
}

.watch-heading span {
  color: rgba(255, 250, 242, 0.62);
  font-size: 10px;
}

.watch-mode {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 250, 242, 0.68);
  font-size: 9px;
  white-space: nowrap;
}

.watch-mode::before {
  content: "";
  width: 24px;
  height: 1px;
  background: rgba(255, 250, 242, 0.44);
}

.watch-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.watch-controls button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 250, 242, 0.3);
  background: rgba(8, 10, 9, 0.44);
  color: #fffaf2;
  cursor: pointer;
  transition: background 0.08s ease-out, color 0.08s ease-out, border-color 0.08s ease-out, transform 0.08s ease-out;
}

.watch-controls button:hover {
  border-color: #fffaf2;
  background: #fffaf2;
  color: #080a09;
}

.watch-controls button:active {
  transform: scale(0.96);
}

.watch-controls button svg,
.watch-controls button .lucide-icon {
  width: 14px;
  height: 14px;
}

.watch-item-dots {
  top: 49%;
  left: 6px;
}

.watch-item-dots .item-dot::before {
  background: rgba(255, 250, 242, 0.46);
}

.watch-item-dots .item-dot:hover::before {
  background: #fffaf2;
}

.watch-item-dots .item-dot[aria-selected="true"]::before {
  background: #fffaf2;
  box-shadow: 0 0 0 3px rgba(8, 10, 9, 0.72), 0 0 0 4px rgba(255, 250, 242, 0.55);
}

.watch-focus {
  position: absolute;
  top: 49%;
  left: 50%;
  z-index: 3;
  width: 36px;
  height: 28px;
  opacity: 0.6;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.watch-focus i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: rgba(255, 250, 242, 0.88);
  border-style: solid;
}

.watch-focus i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.watch-focus i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.watch-focus i:nth-child(3) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.watch-focus i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }

.watch-lower {
  position: absolute;
  right: clamp(22px, 3vw, 38px);
  bottom: 54px;
  left: clamp(22px, 3vw, 38px);
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(420px, 1.55fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}

.watch-identity h2 {
  max-width: 13ch;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 0.98;
  text-wrap: balance;
}

.watch-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.watch-genres span {
  padding: 4px 9px;
  border: 1px solid rgba(255, 250, 242, 0.72);
  border-radius: 100px;
  font-size: 9px;
  line-height: 1;
}

.watch-facts {
  display: grid;
  grid-template-columns: minmax(72px, 92px) minmax(0, 1fr);
  margin: clamp(24px, 4vh, 38px) 0 0;
  font-size: 10px;
  line-height: 1.35;
}

.watch-facts dt,
.watch-facts dd {
  margin: 0;
  padding: 3px 0;
}

.watch-facts dt {
  color: rgba(255, 250, 242, 0.62);
}

.watch-facts dd {
  color: rgba(255, 250, 242, 0.92);
}

.watch-story {
  min-width: 0;
}

.watch-filmstrip {
  display: grid;
  grid-template-columns: repeat(var(--frame-count, 5), minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}

.watch-filmstrip:has(.watch-frame:only-child) {
  grid-template-columns: minmax(150px, 42%);
  justify-content: end;
}

.watch-frame {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 250, 242, 0.3);
  background: #131513;
  cursor: pointer;
  transition: border-color 0.08s ease-out, transform 0.08s ease-out, opacity 0.08s ease-out;
}

.watch-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
}

.watch-frame:hover {
  z-index: 1;
  border-color: rgba(255, 250, 242, 0.88);
  transform: translateY(-2px);
}

.watch-frame[aria-selected="true"]::after {
  border-color: #fffaf2;
}

.watch-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.78);
  transition: filter 0.08s ease-out, transform 0.12s var(--ease-out);
}

.watch-frame > span {
  position: absolute;
  right: 6px;
  bottom: 5px;
  z-index: 2;
  color: rgba(255, 250, 242, 0.78);
  font-size: 7px;
  opacity: 0;
  transition: opacity 0.08s ease-out;
}

.watch-frame:hover > span,
.watch-frame[aria-selected="true"] > span {
  opacity: 1;
}

.watch-frame:hover img,
.watch-frame[aria-selected="true"] img {
  filter: none;
  transform: scale(1.025);
}

.watch-story p {
  max-width: 68ch;
  margin: clamp(18px, 2.5vh, 26px) 0 8px;
  color: rgba(255, 250, 242, 0.87);
  font-size: clamp(10px, 0.9vw, 12px);
  line-height: 1.48;
  text-wrap: pretty;
}

.watch-more {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: rgba(255, 250, 242, 0.62);
  font-size: 10px;
  transition: color 0.08s ease-out, gap 0.08s ease-out;
}

.watch-more::after {
  content: "\2197";
}

.watch-more:hover {
  gap: 12px;
  color: #fffaf2;
}

.watch-footer {
  position: absolute;
  right: 16px;
  bottom: 8px;
  left: 16px;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: rgba(255, 250, 242, 0.56);
  font-size: 9px;
}

.watch-position {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 5px;
  border: 1px solid rgba(255, 250, 242, 0.5);
  border-radius: 100px;
}

.watch-position i {
  display: block;
  width: 100%;
  height: 100%;
  background: #fffaf2;
  transform: scaleX(0);
  transform-origin: left;
}

.watch-position.is-running i {
  animation: watch-progress 4.8s linear forwards;
}

@keyframes watch-progress {
  to { transform: scaleX(1); }
}

.watch-footer button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(255, 250, 242, 0.3);
  background: rgba(8, 10, 9, 0.42);
  color: #fffaf2;
  cursor: pointer;
  transition: color 0.08s ease-out, background 0.08s ease-out, border-color 0.08s ease-out;
}

.watch-footer button svg,
.watch-footer button .lucide-icon {
  width: 14px;
  height: 14px;
}

.watch-footer button:hover {
  border-color: #fffaf2;
  background: #fffaf2;
  color: #080a09;
}

.resource-stage {
  display: grid;
  grid-template-columns: minmax(300px, 45%) minmax(0, 55%);
  min-width: 0;
  min-height: 0;
}

.media-pane {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--rule);
  background-color: var(--paper);
}

.media-pane::before,
.media-pane::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--rule);
}

.media-pane::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  opacity: 0.35;
}

.media-pane::after {
  right: 0;
  bottom: 68px;
  left: 0;
  height: 1px;
}

.media-object {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(58%, 310px);
  max-width: calc(100% - 104px);
  max-height: calc(100% - 120px);
  place-items: center;
  animation: object-in 0.34s var(--ease-out) both;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out;
}

@keyframes object-in {
  from { opacity: 0.01; translate: 0 10px; scale: 0.985; }
  to { opacity: 1; translate: 0; scale: 1; }
}

.media-poster {
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.52), 0 4px 12px rgba(0, 0, 0, 0.28);
  isolation: isolate;
}

.media-poster[data-shape="book"] {
  aspect-ratio: 0.67;
}

.media-poster[data-shape="document"] {
  aspect-ratio: 0.76;
}

.media-poster[data-shape="landscape"] {
  width: min(145%, 470px);
  aspect-ratio: 16 / 10;
}

.media-poster[data-shape="square"] {
  width: min(115%, 370px);
  aspect-ratio: 1;
}

.media-poster[data-shape="portrait"] {
  width: min(108%, 340px);
  aspect-ratio: 4 / 5;
}

.media-poster img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.18s var(--ease-out), filter 0.18s ease-out;
}

.media-poster[data-shape="book"] img,
.media-poster[data-shape="document"] img {
  object-fit: contain;
  background: #f5eee3;
}

.media-object:hover img {
  transform: scale(1.012);
  filter: saturate(1.02);
}

.poster-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  background: var(--accent-color, #6f604b);
  color: #fffaf2;
  transition: opacity 0.12s ease-out;
}

.image-failed .poster-fallback {
  opacity: 1;
}

.poster-fallback::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: 20%;
  width: 70%;
  height: 1px;
  background: currentColor;
  opacity: 0.34;
  transform: rotate(-42deg);
  transform-origin: right;
}

.poster-series {
  position: relative;
  z-index: 1;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.46);
  font-size: 9px;
}

.poster-fallback strong {
  position: relative;
  z-index: 1;
  align-self: center;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 300;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.poster-fallback > span:last-child {
  position: relative;
  z-index: 1;
  font-size: 10px;
}

.item-dots {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 4;
  display: grid;
  transform: translateY(-50%);
}

.item-dot {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.item-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  transition: width 0.08s ease-out, height 0.08s ease-out, background 0.08s ease-out;
}

.item-dot:hover::before {
  width: 9px;
  height: 9px;
  background: var(--ink-soft);
}

.item-dot[aria-selected="true"]::before {
  width: 11px;
  height: 11px;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--rule-strong);
}

.media-caption {
  position: absolute;
  right: 24px;
  bottom: 25px;
  left: 70px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-soft);
  font-size: 10px;
}

.media-caption span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-pager {
  position: absolute;
  right: 20px;
  bottom: 80px;
  z-index: 5;
  display: flex;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.media-pager button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.08s ease-out, color 0.08s ease-out;
}

.media-pager button + button {
  border-left: 1px solid var(--rule);
}

.media-pager button:hover {
  background: var(--ink);
  color: var(--paper);
}

.media-pager button svg,
.media-pager button .lucide-icon,
.share-action svg,
.share-action .lucide-icon {
  width: 15px;
  height: 15px;
}

.detail-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--paper);
}

.detail-scroll {
  width: 100%;
  height: 100%;
  padding: clamp(24px, 3.1vw, 42px) clamp(24px, 3.4vw, 48px) 58px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--muted) transparent;
  scrollbar-width: thin;
}

.detail-scroll::-webkit-scrollbar {
  width: 4px;
}

.detail-scroll::-webkit-scrollbar-thumb {
  background: var(--muted);
}

.detail-content {
  animation: detail-in 0.34s var(--ease-out) both;
}

@keyframes detail-in {
  from { opacity: 0.01; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}

.resource-title {
  max-width: 14ch;
  margin: 0 0 clamp(24px, 4vh, 42px);
  font-family: var(--font-display);
  font-size: clamp(44px, 5.2vw, 76px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.index-block {
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.index-head {
  display: flex;
  min-height: 36px;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.index-label {
  font-size: 10px;
}

.index-toggle {
  min-width: 44px;
  min-height: 44px;
  margin: -12px -10px 0 0;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 10px;
  cursor: pointer;
  transition: color 0.08s ease-out;
}

.index-toggle:hover {
  color: var(--accent);
}

.thumb-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 60px;
  gap: clamp(10px, 1.8vw, 24px);
  min-height: 104px;
  padding: 2px 2px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  transition: min-height 0.28s var(--ease-out);
}

.thumb-track::-webkit-scrollbar {
  display: none;
}

.thumb-track.expanded {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  min-height: 200px;
  overflow: visible;
}

.thumb-button {
  display: grid;
  grid-template-rows: 76px auto;
  gap: 6px;
  width: 60px;
  min-width: 44px;
  min-height: 96px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  opacity: 0.8;
  animation: thumb-in 0.3s var(--ease-out) both;
  animation-delay: calc(var(--order, 0) * 34ms);
  transition: color 0.08s ease-out, opacity 0.08s ease-out, transform 0.08s ease-out;
}

@keyframes thumb-in {
  from { opacity: 0.01; transform: translateY(6px); }
  to { opacity: 0.8; transform: none; }
}

.thumb-button:hover {
  color: var(--ink);
  opacity: 1;
  transform: translateY(-2px);
}

.thumb-button[aria-selected="true"] {
  color: var(--ink);
  opacity: 1;
}

.thumb-art {
  position: relative;
  display: grid;
  width: 60px;
  height: 76px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--accent-color, #6f604b);
  color: #fffaf2;
}

.thumb-button[aria-selected="true"] .thumb-art {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink);
}

.thumb-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-art[data-shape="book"] img,
.thumb-art[data-shape="document"] img {
  object-fit: cover;
}

.thumb-art span {
  max-width: 90%;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}

.thumb-button small {
  font-size: 9px;
  line-height: 1;
}

.resource-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 10px;
  margin: 18px 0 clamp(28px, 5vh, 48px);
}

.primary-action {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  transition: background 0.08s ease-out, transform 0.08s ease-out;
}

.primary-action::after {
  content: "\2197";
  font-size: 13px;
}

.primary-action:hover {
  background: var(--accent);
  color: #fff8ed;
}

.primary-action:active,
.share-action:active {
  transform: scale(0.98);
}

.share-action {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.08s ease-out, background 0.08s ease-out, color 0.08s ease-out, transform 0.08s ease-out;
}

.share-action:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.resource-meta {
  display: grid;
  grid-template-columns: minmax(88px, 128px) minmax(0, 1fr);
  margin: 0;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.45;
}

.resource-meta dt,
.resource-meta dd {
  margin: 0;
  padding: 8px 0;
}

.resource-meta dt {
  padding-right: 20px;
  color: var(--ink-soft);
  text-align: right;
}

.resource-meta dd {
  padding-left: 20px;
  border-left: 1px solid var(--rule);
  text-wrap: pretty;
}

.resource-notes {
  display: grid;
  grid-template-columns: minmax(88px, 128px) minmax(0, 1fr);
  gap: 0;
  padding: 28px 0 24px;
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.55;
}

.note-label {
  margin: 0;
  padding-right: 20px;
  color: var(--ink-soft);
  text-align: right;
}

.note-copy {
  margin: 0;
  padding: 0 0 20px 20px;
  border-left: 1px solid var(--rule);
  text-wrap: pretty;
}

.note-copy strong {
  font-weight: 650;
}

.detail-end {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 9px;
}

.detail-end::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.detail-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 4px;
  background: var(--paper-deep);
}

.detail-progress span {
  display: block;
  width: var(--detail-progress, 0%);
  height: 100%;
  background: var(--ink);
  transition: width 0.08s linear;
}

.copy-status {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: var(--z-toast);
  max-width: min(320px, calc(100vw - 36px));
  padding: 12px 15px;
  border: 1px solid var(--accent);
  background: var(--paper-deep);
  color: var(--ink);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease-out, transform 0.18s var(--ease-out);
}

.copy-status.show {
  opacity: 1;
  transform: none;
}

.noscript-note {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: grid;
  place-content: center;
  padding: 32px;
  background: var(--paper);
  text-align: center;
}

.noscript-note h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
}

.noscript-note a {
  text-decoration: underline;
}

@media (max-width: 1120px) and (min-width: 861px) {
  :root {
    --chapter-width: 48px;
  }

  .resource-stage {
    grid-template-columns: minmax(255px, 41%) minmax(0, 59%);
  }

  .media-object {
    width: min(60%, 270px);
    max-width: calc(100% - 82px);
  }

  .resource-title {
    font-size: clamp(40px, 5vw, 60px);
  }

  .detail-scroll {
    padding-right: 28px;
    padding-left: 28px;
  }

  .panel-meta {
    display: none;
  }

  .essay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .essay-filters > span {
    display: none;
  }

  .broadcast-stage {
    grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1fr);
    padding-right: 28px;
    gap: 24px;
  }

  .broadcast-queue {
    display: none;
  }

  .broadcast-copy h2 {
    font-size: clamp(40px, 5.4vw, 62px);
  }

  .broadcast-dial {
    width: min(31vw, 300px);
  }

  .mail-stage {
    grid-template-columns: 220px minmax(360px, 1fr);
    gap: 28px;
    padding-right: 28px;
    padding-left: 58px;
  }

  .mail-envelope {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .mail-cadence,
  .mail-envelope svg,
  .mail-envelope > .lucide-icon {
    display: none;
  }

  .people-stage {
    grid-template-columns: minmax(270px, 0.9fr) minmax(280px, 1fr);
    padding-right: 28px;
    gap: 26px;
  }

  .people-contacts {
    display: none;
  }

  .people-media,
  .people-portrait > p {
    width: min(34vw, 330px);
  }

  .game-lower {
    right: 22px;
    bottom: 48px;
    left: 22px;
    grid-template-columns: minmax(200px, 0.68fr) minmax(330px, 1.45fr);
    gap: 24px;
  }

  .game-identity h2 {
    font-size: clamp(30px, 3.8vw, 44px);
  }

  .game-facts,
  .game-story > p,
  .game-lens {
    font-size: 8.5px;
  }

  .watch-lower {
    right: 22px;
    bottom: 48px;
    left: 22px;
    grid-template-columns: minmax(200px, 0.72fr) minmax(330px, 1.45fr);
    gap: 24px;
  }

  .watch-identity h2 {
    font-size: clamp(30px, 3.8vw, 42px);
  }

  .watch-facts {
    margin-top: 20px;
    font-size: 9px;
  }

  .watch-story p {
    margin-top: 14px;
    font-size: 9px;
  }
}

@media (max-width: 860px) {
  html {
    overflow-x: clip;
  }

  body {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .archive-shell {
    display: block;
    max-width: 100vw;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    contain: inline-size;
  }

  .mobile-chapters {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    height: 54px;
    overflow-x: auto;
    max-width: 100%;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    scrollbar-width: none;
  }

  .mobile-chapters::-webkit-scrollbar {
    display: none;
  }

  .mobile-chapter {
    flex: 0 0 auto;
    min-width: 84px;
    min-height: 44px;
    padding: 0 14px;
    border-right: 1px solid var(--rule);
    background: transparent;
    color: var(--ink-soft);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.08s ease-out, color 0.08s ease-out;
  }

  .mobile-chapter[aria-selected="true"] {
    background: var(--ink);
    color: var(--paper);
  }

  .mobile-chapter span {
    margin-left: 4px;
    font-size: 8px;
    opacity: 0.72;
  }

  .library {
    display: block;
    height: auto;
    overflow: visible;
  }

  .chapter {
    position: static;
    display: none;
    width: 100%;
    height: auto;
    min-height: calc(100dvh - 54px);
    overflow: visible;
    border-right: 0;
  }

  .chapter.active {
    display: block;
  }

  .chapter-tab {
    display: none;
  }

  .chapter-panel,
  .chapter.active > .chapter-panel {
    position: static;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    clip-path: none;
    pointer-events: auto;
  }

  .category-view {
    display: block;
    height: auto;
  }

  .category-view.essays-view {
    display: block;
    min-height: calc(100svh - 54px);
    overflow: visible;
    background-size: 58px 58px;
  }

  .essays-header {
    position: sticky;
    top: 54px;
    z-index: 6;
    display: block;
    min-height: 112px;
    padding: 18px;
    overflow: hidden;
  }

  .essays-heading h1 {
    font-size: clamp(36px, 11vw, 50px);
  }

  .essay-filters {
    justify-content: flex-start;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .essay-filters::-webkit-scrollbar {
    display: none;
  }

  .essay-filters > span {
    display: none;
  }

  .essay-filters button {
    flex: 0 0 auto;
    min-width: 64px;
    min-height: 44px;
    padding: 0 12px;
  }

  .essay-scroll {
    padding: 28px 18px 82px;
    overflow: visible;
  }

  .essay-grid {
    grid-template-columns: 1fr;
  }

  .essay-card-title {
    font-size: clamp(24px, 7vw, 32px);
  }

  .category-view.broadcast-view {
    display: block;
    min-height: calc(100svh - 54px);
    overflow: visible;
  }

  .broadcast-header {
    position: sticky;
    top: 54px;
    z-index: 7;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 88px;
    height: auto;
    align-content: center;
    justify-items: start;
    gap: 6px;
    padding: 10px 18px 11px;
  }

  .broadcast-header p {
    max-width: 100%;
    font-size: 0.8125rem;
    line-height: 1.35;
    white-space: normal;
  }

  .broadcast-view .broadcast-dots {
    position: absolute;
    top: 342px;
    right: 0;
    bottom: auto;
    left: 0;
    display: flex;
    height: 44px;
    max-width: none;
    justify-content: center;
    pointer-events: none;
    transform: none;
  }

  .broadcast-stage {
    display: flex;
    padding: 26px 18px 90px;
    flex-direction: column;
    gap: 34px;
  }

  .broadcast-visual {
    order: -1;
    width: 100%;
    gap: 22px;
  }

  .broadcast-dial {
    width: min(76vw, 310px);
  }

  .broadcast-wave,
  .broadcast-timeline {
    width: min(88vw, 360px);
  }

  .broadcast-copy {
    width: 100%;
  }

  .broadcast-copy h2 {
    font-size: clamp(46px, 14vw, 70px);
  }

  .broadcast-summary {
    font-size: 13px;
  }

  .broadcast-queue {
    width: 100%;
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .broadcast-queue-item {
    min-height: 64px;
  }

  .category-view.mail-view,
  .category-view.people-view {
    display: block;
    min-height: calc(100svh - 54px);
    overflow: visible;
  }

  .mail-header,
  .people-header {
    position: sticky;
    top: 54px;
    z-index: 7;
    height: 64px;
    padding: 0 18px;
  }

  .mail-header p,
  .people-header p {
    display: none;
  }

  .mail-view .mail-dots,
  .people-view .people-dots {
    position: absolute;
    top: 76px;
    right: 0;
    bottom: auto;
    left: 0;
    display: flex;
    height: 44px;
    max-width: none;
    justify-content: center;
    pointer-events: none;
    transform: none;
  }

  .mail-stage {
    display: flex;
    padding: 82px 18px 90px;
    flex-direction: column;
    gap: 32px;
  }

  .mail-rack {
    width: 100%;
    min-height: 0;
  }

  .mail-envelope {
    min-height: 78px;
    transform: translateY(calc(var(--mail-order) * -4px));
  }

  .mail-envelope:hover,
  .mail-envelope[aria-current="true"] {
    transform: translate(5px, calc(var(--mail-order) * -4px - 3px));
  }

  .mail-letter {
    width: 100%;
    min-height: 0;
    padding: 28px 22px 36px;
  }

  .mail-letter h2 {
    font-size: clamp(42px, 13vw, 64px);
  }

  .mail-sort {
    display: none;
  }

  .people-stage {
    display: flex;
    padding: 82px 18px 90px;
    flex-direction: column;
    gap: 34px;
  }

  .people-portrait {
    order: -1;
    width: 100%;
  }

  .people-media,
  .people-portrait > p {
    width: min(76vw, 330px);
  }

  .people-copy {
    width: 100%;
  }

  .people-copy h2 {
    font-size: clamp(48px, 15vw, 72px);
  }

  .people-summary,
  .people-copy blockquote {
    font-size: 13px;
  }

  .people-contacts {
    width: 100%;
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .category-view.game-view,
  .category-view.watch-view {
    min-height: calc(100svh - 54px);
    padding-top: 52svh;
    color: #fffaf2;
  }

  .game-backdrop,
  .watch-backdrop {
    bottom: auto;
    height: 52svh;
  }

  .game-header,
  .watch-header {
    height: 64px;
    padding: 0 18px;
  }

  .game-header p,
  .game-readout {
    display: none;
  }

  .watch-mode {
    display: none;
  }

  .game-header h1,
  .watch-heading h1 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .game-view .game-dots {
    top: 27svh;
    bottom: auto;
    left: 2px;
    display: grid;
    max-width: none;
    overflow: visible;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .game-scan {
    top: 64px;
    bottom: auto;
    height: calc(52svh - 64px);
  }

  .watch-view .watch-item-dots {
    top: 27svh;
    bottom: auto;
    left: 2px;
    display: grid;
    max-width: none;
    overflow: visible;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .watch-focus {
    top: 27svh;
  }

  .game-lower,
  .watch-lower {
    position: relative;
    inset: auto;
    display: block;
    padding: 28px 18px 76px;
    background: #080a09;
  }

  .game-identity h2 {
    font-size: clamp(38px, 12vw, 58px);
  }

  .game-facts {
    margin-top: 26px;
    font-size: 11px;
  }

  .game-story {
    margin-top: 30px;
  }

  .game-gallery {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .game-gallery::-webkit-scrollbar {
    display: none;
  }

  .game-frame {
    flex: 0 0 132px;
    min-height: 74px;
  }

  .game-story > p {
    margin-top: 22px;
    font-size: 12px;
    line-height: 1.55;
  }

  .game-lens {
    grid-template-columns: 68px minmax(0, 1fr);
    font-size: 10px;
  }

  .game-footer {
    bottom: 10px;
  }

  .watch-identity h2 {
    font-size: clamp(38px, 12vw, 56px);
  }

  .watch-facts {
    margin-top: 26px;
    font-size: 11px;
  }

  .watch-story {
    margin-top: 30px;
  }

  .watch-filmstrip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .watch-filmstrip::-webkit-scrollbar {
    display: none;
  }

  .watch-frame {
    flex: 0 0 132px;
    min-height: 74px;
  }

  .watch-story p {
    margin-top: 22px;
    font-size: 12px;
    line-height: 1.55;
  }

  .watch-footer {
    bottom: 10px;
  }

  .panel-header {
    min-height: 72px;
    padding: 15px 18px;
  }

  .panel-heading h1 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .panel-meta {
    font-size: 9px;
  }

  .resource-stage {
    display: block;
  }

  .media-pane {
    min-height: 56svh;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .media-pane::after {
    bottom: 62px;
  }

  .media-object {
    width: min(52vw, 280px);
    max-width: calc(100% - 48px);
    max-height: 42svh;
  }

  .media-poster[data-shape="landscape"] {
    width: min(82vw, 520px);
  }

  .media-poster[data-shape="square"],
  .media-poster[data-shape="portrait"] {
    width: min(58vw, 320px);
  }

  .item-dots {
    top: auto;
    bottom: 9px;
    left: 50%;
    display: flex;
    max-width: calc(100% - 130px);
    overflow-x: auto;
    transform: translateX(-50%);
    scrollbar-width: none;
  }

  .item-dots::-webkit-scrollbar {
    display: none;
  }

  .item-dot {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    pointer-events: auto;
  }

  .media-caption {
    right: 16px;
    bottom: 48px;
    left: 16px;
  }

  .media-pager {
    right: 12px;
    bottom: 6px;
  }

  .media-pager button {
    width: 44px;
    height: 44px;
  }

  .detail-pane {
    min-height: auto;
  }

  .detail-scroll {
    height: auto;
    padding: 30px 18px 96px;
    overflow: visible;
  }

  .resource-title {
    max-width: 11ch;
    margin-bottom: 32px;
    font-size: clamp(42px, 13vw, 68px);
  }

  .thumb-track {
    grid-auto-columns: 56px;
    gap: 15px;
  }

  .thumb-button,
  .thumb-art {
    width: 56px;
  }

  .detail-progress {
    display: none;
  }

  .copy-status {
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
  }
}

@media (max-width: 520px) {
  .panel-meta {
    display: none;
  }

  .media-pane {
    min-height: 52svh;
  }

  .media-object {
    width: min(54vw, 230px);
  }

  .resource-meta,
  .resource-notes {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .resource-meta dt,
  .note-label {
    padding-right: 12px;
  }

  .resource-meta dd,
  .note-copy {
    padding-left: 12px;
  }
}

/* AI ARTICLE VISUALS */
.ai-viz {
  color: var(--ink-soft);
  font-family: var(--font-utility);
  font-size: 0.625rem;
  line-height: 1.25;
}

.ai-viz b,
.ai-viz strong,
.ai-viz em,
.ai-viz small {
  font: inherit;
}

.frontier-zone {
  position: absolute;
  top: 29%;
  display: grid;
  gap: 3px;
}

.frontier-zone--inside { left: 7%; color: var(--essay-accent); }
.frontier-zone--outside { right: 7%; color: var(--essay-accent-alt); text-align: right; }
.frontier-zone strong { font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 600; line-height: 1; }
.frontier-zone small { color: var(--muted); }

.frontier-edge {
  position: absolute;
  inset: 23% 38% 18%;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  transform: skewX(-10deg);
}

.frontier-edge i {
  flex: 1;
  height: 35%;
  background: var(--essay-accent);
  opacity: 0.55;
  transition: height 0.36s var(--ease-out), background 0.2s ease-out;
}

.frontier-edge i:nth-child(2) { height: 72%; }
.frontier-edge i:nth-child(3) { height: 48%; background: var(--essay-accent-alt); }
.frontier-edge i:nth-child(4) { height: 88%; background: var(--essay-accent); }
.frontier-edge i:nth-child(5) { height: 57%; background: var(--essay-accent-alt); }
.essay-card:hover .frontier-edge i:nth-child(odd),
.essay-card:focus-visible .frontier-edge i:nth-child(odd) { height: 92%; }

.viz-cursor {
  position: absolute;
  top: var(--pointer-y);
  left: var(--pointer-x);
  width: 14px;
  height: 14px;
  border: 1px solid var(--essay-accent-alt);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.16s ease-out;
}

.essay-card:hover .viz-cursor,
.essay-card:focus-visible .viz-cursor { opacity: 1; }

.ai-viz--primitives {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 14% 9% 9%;
}

.primitive-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 8px;
}

.primitive-row b { color: var(--ink-soft); }
.primitive-row > i { position: relative; height: 4px; background: var(--rule); }
.primitive-row > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value); background: var(--essay-accent); transition: width 0.36s var(--ease-out); }
.primitive-row--success > i::after { background: var(--essay-accent-alt); }
.primitive-row em { color: var(--muted); text-align: right; }
.primitive-note { justify-self: end; color: var(--essay-accent-alt); margin-top: 3px; }
.essay-card:hover .primitive-row > i::after,
.essay-card:focus-visible .primitive-row > i::after { width: min(100%, calc(var(--value) + 8%)); }

.index-stat {
  position: absolute;
  top: 28%;
  left: 7%;
  display: grid;
  gap: 4px;
}

.index-stat strong { color: var(--essay-accent); font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.75rem); font-weight: 650; line-height: 0.85; }
.index-stat small { max-width: 7rem; color: var(--muted); }
.index-chart { position: absolute; inset: 25% 8% 20% 43%; display: flex; align-items: flex-end; gap: 5px; border-bottom: 1px solid var(--rule-strong); }
.index-chart i { flex: 1; height: 18%; background: var(--essay-accent); opacity: 0.4; transition: height 0.36s var(--ease-out), opacity 0.2s ease-out; }
.index-chart i:nth-child(2) { height: 29%; }
.index-chart i:nth-child(3) { height: 37%; }
.index-chart i:nth-child(4) { height: 54%; }
.index-chart i:nth-child(5) { height: 62%; }
.index-chart i:nth-child(6) { height: 77%; background: var(--essay-accent-alt); }
.index-chart i:nth-child(7) { height: 94%; background: var(--essay-accent-alt); }
.essay-card:hover .index-chart i,
.essay-card:focus-visible .index-chart i { opacity: 0.85; }
.index-key { position: absolute; top: 21%; right: 8%; display: flex; align-items: center; gap: 5px; color: var(--muted); }
.index-key i { width: 10px; height: 2px; background: var(--essay-accent); }
.index-key i:last-child { background: var(--essay-accent-alt); }
.index-chapters { position: absolute; right: 8%; bottom: 7%; color: var(--essay-accent-alt); }

.defense-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: start center;
  border: 1px solid color-mix(in srgb, var(--essay-accent) 50%, var(--rule));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: border-color 0.24s ease-out, transform 0.36s var(--ease-out);
}

.defense-ring b { padding: 5px; color: var(--muted); background: #151513; }
.defense-ring--model { width: 60px; height: 60px; }
.defense-ring--system { width: 108px; height: 108px; }
.defense-ring--institution { width: 158px; height: 158px; }
.defense-core { position: absolute; top: 50%; left: 50%; color: var(--essay-accent-alt); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; transform: translate(-50%, -40%); }
.defense-threat { position: absolute; padding: 3px 5px; border: 1px solid var(--rule); background: #151513; color: var(--ink-soft); }
.defense-threat--misuse { top: 25%; left: 7%; }
.defense-threat--failure { right: 6%; bottom: 24%; }
.defense-threat--systemic { bottom: 8%; left: 15%; }
.essay-card:hover .defense-ring,
.essay-card:focus-visible .defense-ring { border-color: var(--essay-accent-alt); transform: translate(-50%, -50%) rotate(6deg); }

.power-source {
  position: absolute;
  left: 7%;
  width: 4.2rem;
  padding: 4px 5px;
  border: 1px solid var(--rule-strong);
  background: #151513;
  color: var(--ink-soft);
}

.power-source--compute { top: 25%; }
.power-source--data { top: 42%; }
.power-source--labor { top: 59%; }
.power-source--capital { top: 76%; }
.power-lines { position: absolute; inset: 24% 30% 13% 27%; background: repeating-linear-gradient(12deg, transparent 0 18%, color-mix(in srgb, var(--essay-accent) 50%, transparent) 18.5% 19%, transparent 19.5% 24%); opacity: 0.65; }
.power-hub { position: absolute; top: 50%; right: 21%; display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid var(--essay-accent); border-radius: 50%; background: #151513; color: var(--essay-accent); transform: translateY(-50%); transition: border-color 0.2s ease-out, transform 0.34s var(--ease-out); }
.power-hub small { color: var(--muted); margin-top: -18px; }
.power-public { position: absolute; right: 5%; bottom: 9%; color: var(--essay-accent-alt); }
.essay-card:hover .power-hub,
.essay-card:focus-visible .power-hub { border-color: var(--essay-accent-alt); transform: translateY(-50%) scale(1.08); }

.risk-loop-path {
  position:absolute;
  top:50%;
  left:50%;
  width:146px;
  height:112px;
  border:1px dashed color-mix(in srgb,var(--essay-accent) 64%,transparent);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-8deg);
  transition:transform .38s var(--ease-out),border-color .2s ease-out;
}
.risk-step{
  position:absolute;
  display:grid;
  min-width:62px;
  gap:2px;
  padding:6px 8px;
  border:1px solid var(--rule-strong);
  background:#151513;
  color:var(--ink-soft);
  transition:transform .32s var(--ease-out),border-color .18s ease-out,color .18s ease-out;
}
.risk-step b{color:var(--essay-accent);font-size:.55rem}
.risk-step strong{font-size:.66rem;font-weight:700}
.risk-step--govern{top:18%;left:50%;transform:translateX(-50%)}
.risk-step--map{top:48%;right:7%}
.risk-step--measure{bottom:9%;left:50%;transform:translateX(-50%)}
.risk-step--manage{top:48%;left:7%}
.risk-core{
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  justify-items:center;
  gap:2px;
  color:var(--essay-accent-alt);
  transform:translate(-50%,-50%);
}
.risk-core b{font-family:var(--font-display);font-size:1rem;font-weight:700}
.risk-core small{color:var(--muted);font-size:.5rem}
.essay-card:hover .risk-loop-path,
.essay-card:focus-visible .risk-loop-path{border-color:var(--essay-accent-alt);transform:translate(-50%,-50%) rotate(2deg) scale(1.04)}
.essay-card:hover .risk-step,
.essay-card:focus-visible .risk-step{border-color:var(--essay-accent);color:var(--ink)}
.essay-card:hover .risk-step--map,
.essay-card:focus-visible .risk-step--map{transform:translateX(4px)}
.essay-card:hover .risk-step--manage,
.essay-card:focus-visible .risk-step--manage{transform:translateX(-4px)}

.ai-viz--bottleneck {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 15% 9% 10%;
}

.bottleneck-row { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr); align-items: center; gap: 8px; }
.bottleneck-row > i { position: relative; height: 4px; background: var(--rule); }
.bottleneck-row > i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--speed); background: linear-gradient(90deg, var(--essay-accent), var(--essay-accent-alt)); transition: width 0.36s var(--ease-out); }
.bottleneck-gate { display: flex; align-items: center; gap: 8px; justify-self: end; margin-top: 3px; color: var(--muted); }
.bottleneck-gate i { width: 26px; height: 8px; border: 1px solid var(--essay-accent-alt); }
.essay-card:hover .bottleneck-row > i::before,
.essay-card:focus-visible .bottleneck-row > i::before { width: min(100%, calc(var(--speed) + 8%)); }

/* PAGE-WIDE TYPOGRAPHY SYSTEM */
html {
  color-scheme: dark;
  font-size: 100%;
  font-kerning: normal;
  font-optical-sizing: auto;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-copy);
}

.category-view :is(h1, h2, h3),
.essay-card-title,
.resource-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
}

:is(
  .panel-heading h1,
  .essays-heading h1,
  .broadcast-header h1,
  .watch-heading h1,
  .game-header h1,
  .people-header h1
) {
  font-size: clamp(2.5rem, 3.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
}

:is(
  .resource-title,
  .broadcast-copy h2,
  .watch-identity h2,
  .game-identity h2,
  .people-copy h2
) {
  max-width: 15ch;
  font-size: clamp(2.25rem, 4.1vw, 4rem);
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: 0;
  overflow-wrap: normal;
  text-wrap: balance;
}

.essay-card-title {
  font-size: clamp(1.5rem, 1.9vw, 1.875rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
}

:is(
  .note-copy,
  .essay-card-summary,
  .broadcast-summary,
  .watch-story p,
  .game-story p,
  .people-summary
) {
  max-width: 65ch;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-copy);
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

:is(.watch-story p, .game-story p) {
  color: rgba(255, 251, 244, 0.84);
}

:is(
  .resource-meta dt,
  .resource-meta dd,
  .broadcast-meta dt,
  .broadcast-meta dd,
  .watch-facts dt,
  .watch-facts dd,
  .game-facts dt,
  .game-facts dd,
  .people-meta dt,
  .people-meta dd
) {
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  line-height: 1.5;
}

:is(
  .resource-meta dt,
  .broadcast-meta dt,
  .watch-facts dt,
  .game-facts dt,
  .people-meta dt
) {
  color: var(--muted);
}

:is(
  .resource-meta dd,
  .broadcast-meta dd,
  .watch-facts dd,
  .game-facts dd,
  .people-meta dd
) {
  color: var(--ink-soft);
}

:is(
  .panel-meta,
  .essay-card-meta,
  .essay-result-count,
  .broadcast-kicker,
  .watch-mode,
  .game-kicker,
  .people-index,
  .index-label
) {
  font-family: var(--font-utility);
  font-size: var(--text-caption);
  line-height: var(--leading-compact);
  font-variant-numeric: tabular-nums;
}

:is(
  .panel-meta,
  .essay-filters > span,
  .broadcast-header p,
  .mail-header p,
  .watch-mode,
  .game-header p,
  .people-header p
) {
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.essay-card-source,
.broadcast-host {
  font-size: var(--text-secondary);
  line-height: var(--leading-compact);
}

.people-role {
  font-size: var(--text-secondary);
  line-height: var(--leading-compact);
}

.people-copy blockquote {
  max-width: 65ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.people-portrait > p,
.people-contacts-head {
  font-size: var(--text-caption);
  line-height: var(--leading-compact);
}

.people-contact {
  min-height: 80px;
}

.people-thumb strong,
.people-contact > span:last-child strong {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.25;
}

.people-contact > span:last-child strong,
.people-contact small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.people-contact small {
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.3;
}

.essay-card-question {
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.75rem;
  font-size: var(--text-secondary);
  line-height: 1.5;
}

.essay-card-question i {
  font-size: var(--text-caption);
  line-height: var(--leading-compact);
}

.primary-action {
  min-height: 44px;
  font-size: var(--text-secondary);
  line-height: 1.2;
}

.broadcast-queue-item strong {
  font-size: var(--text-secondary);
  line-height: 1.3;
}

:is(.broadcast-queue-item > span, .broadcast-queue-item small) {
  font-size: var(--text-caption);
  line-height: var(--leading-compact);
}

:is(.watch-genres span, .game-genres span) {
  font-size: var(--text-caption);
  line-height: 1.2;
}

:is(.watch-more, .game-story > a) {
  min-height: 44px;
  font-size: var(--text-secondary);
  line-height: 1.2;
}

.game-lens span {
  font-size: var(--text-caption);
  line-height: var(--leading-compact);
}

.game-lens strong {
  font-size: var(--text-secondary);
  line-height: 1.5;
}

:is(.chapter-label, .mobile-chapter) {
  font-size: var(--text-secondary);
  line-height: 1.2;
}

:is(.chapter-number, .chapter-count, .mobile-chapter small) {
  font-family: var(--font-utility);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.category-view p,
.category-view dd,
.essay-card-summary,
.essay-card-question span {
  overflow-wrap: break-word;
}

@media (max-width: 860px) {
  :is(
    .panel-meta,
    .essay-filters > span,
    .broadcast-header p,
    .mail-header p,
    .watch-mode,
    .game-header p,
    .people-header p
  ) {
    font-size: 0.8125rem;
  }

  :is(
    .panel-heading h1,
    .essays-heading h1,
    .broadcast-header h1,
    .watch-heading h1,
    .game-header h1,
    .people-header h1
  ) {
    font-size: clamp(2.25rem, 10vw, 3rem);
  }

  :is(
    .resource-title,
    .broadcast-copy h2,
    .watch-identity h2,
    .game-identity h2,
    .people-copy h2
  ) {
    max-width: 16ch;
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.1;
  }

  .essay-card-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
    line-height: 1.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

:is(
  .poster-fallback strong,
  .thumb-art span,
  .broadcast-cover strong,
  .people-thumb strong,
  .people-contact > span:last-child strong,
  .watch-identity h2,
  .game-identity h2
) {
  font-family: var(--font-display);
}

:is(
  .poster-series,
  .poster-fallback > span:last-child,
  .essay-visual-chrome,
  .essay-open,
  .broadcast-timeline,
  .broadcast-queue-head,
  .watch-footer,
  .game-footer,
  .people-contacts-head,
  .people-portrait > p,
  .detail-end
) {
  font-family: var(--font-utility);
}