:root {
  --paper: #1a1e1c;
  --ink: #e7dece;
  --muted: #b0aa9c;
  --orange: #c9ac83;
  --line: #e1c4a33a;
  --display: Georgia, "Times New Roman", "Songti SC", SimSun, serif;
  --body: "DM Sans", system-ui, "Microsoft YaHei", sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='175' height='175'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.61' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h175v175H0z' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
}

body {
  max-width: none;
  background:
    radial-gradient(ellipse at 68% 8%, #272c286e, transparent 38rem),
    url("assets/identity/paper-charcoal.webp") center top / max(100%, 1100px) auto repeat-y,
    #191d1b;
  color: var(--ink);
}
.skip-link {
  position: fixed; z-index: 10; top: 10px; left: 10px; transform: translateY(-200%);
  padding: .7rem 1rem; background: #ede4d1; color: #211f1a;
}
.skip-link:focus { transform: none; }
.folio-shell { width: min(86%, 1210px); margin-inline: auto; }
.folio-micro {
  font: 500 .66rem/1.5 var(--body); letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted);
}
.folio-micro > span:first-child { color: var(--orange); }
.mark-filter-defs { position: absolute; pointer-events: none; }
.folio-mark { object-fit: contain; filter: url(#folio-mark-ink); }
.header {
  position: relative; z-index: 2;
  width: 100%; height: 76px; margin-inline: 0;
  padding-inline: max(4.5%, calc((100% - 1370px) / 2));
  background: #1a1e1c;
  gap: 1.3rem; border-color: var(--line);
}
.header .brand { flex: none; gap: .85rem; font-size: inherit; letter-spacing: normal; }
.brand .folio-mark { width: 46px; height: 45px; }
.header .brand-word {
  display: block; margin: 0; padding-inline-start: .85rem; border-inline-start: 1px solid var(--line);
  color: #e8d6bd; font: 400 .75rem/1.6 var(--display); letter-spacing: .18em;
}
.header nav { margin-inline-start: auto; gap: clamp(.9rem, 3.2vw, 3rem); }
.header nav a { font-weight: 500; font-size: .78rem; white-space: nowrap; }
.header [aria-current="page"] { text-decoration: underline; text-underline-offset: .5em; }
.header-tools { display: flex; align-items: center; gap: .75rem; flex: none; }
.header .language-switch { margin: 0; white-space: nowrap; background: #191d19; border-color: var(--line); }
.header .language-switch button { color: var(--muted); }
.header .language-switch button[aria-pressed="true"] { color: #e7c8a0; background: #514434; }
.sound-control { display: flex; align-items: center; gap: .42rem; color: var(--orange); }
.sound-toggle {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line); background: #191d19; color: inherit; cursor: pointer;
}
.sound-toggle:hover { background: #514434; color: #f0ddbf; }
.sound-toggle svg { width: 18px; height: 18px; }
.sound-toggle .sound-cross, .sound-toggle[aria-pressed="false"] .sound-waves { display: none; }
.sound-toggle[aria-pressed="false"] .sound-cross { display: initial; }
.sound-toggle[aria-pressed="false"] { color: var(--muted); }
.sound-toggle .sound-play, .sound-toggle[data-waiting="true"] .sound-cross { display: none; }
.sound-toggle[data-waiting="true"] { color: #e7c8a0; border-color: #9a7e59; }
.sound-toggle[data-waiting="true"] .sound-play { display: initial; }
.sound-volume { width: clamp(50px, 5vw, 74px); margin: 0; accent-color: var(--orange); cursor: pointer; }
.sound-volume:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.sound-value { min-width: 3.3em; color: var(--muted); font: 500 .62rem/1 var(--body); font-variant-numeric: tabular-nums; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }

.archive-landing {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: #1b1e1b;
  background-image:
    radial-gradient(ellipse at 60% 16%, transparent 7%, #0a0d0b42 84%),
    url("assets/identity/paper-charcoal.webp");
  background-size: 100% 100%, max(100%, 1100px) auto;
  background-position: center top;
  background-repeat: no-repeat, repeat-y;
}
.archive-hero { position: relative; isolation: isolate; overflow: hidden; }
.archive-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 56% 68%, #e1cfad9e 0 1px, transparent 1.8px),
    radial-gradient(circle at 60% 18%, #dcc9a660 0 .8px, transparent 1.6px),
    radial-gradient(circle at 65% 44%, #dcc9a653 0 .7px, transparent 1.5px),
    radial-gradient(circle at 72% 25%, #dcc9a665 0 .8px, transparent 1.7px),
    radial-gradient(circle at 77% 82%, #dcc9a650 0 1px, transparent 1.8px),
    radial-gradient(circle at 83% 57%, #dcc9a653 0 .7px, transparent 1.5px),
    radial-gradient(ellipse 44% 75% at 65% 51%, #71877e24, transparent 74%);
}
.archive-watermark {
  pointer-events: none; position: absolute; z-index: -1; width: min(57vw, 700px);
  inset-inline-end: clamp(-156px, -10.7vw, -54px); top: clamp(-26px, -1.7vw, -12px); bottom: 0;
  overflow: hidden;
  opacity: .13;
  mask-image: linear-gradient(#000 65%, transparent 100%);
}
.archive-watermark .folio-mark { width: 100%; height: auto; }
.hero-composition { position: relative; padding-block: clamp(3rem, 5vw, 5rem) clamp(2.6rem, 4vw, 3.8rem); }
.hero-discipline { color: #d1c1a8; letter-spacing: .22em; }
.hero-discipline span { margin-right: .55rem; font-size: .9rem; }
.archive-hero h1 {
  color: #f0e7d8; font: 400 clamp(4.5rem, 8.3vw, 8rem)/.87 var(--display);
  letter-spacing: -.067em; margin: 1.1rem 0 1.6rem;
}
.archive-hero h1 i { display: block; color: #d5c3a7; font-size: .70em; font-weight: 400; margin-top: .17em; }
.archive-intro { max-width: 35rem; color: #d4cabc; font: 400 clamp(.91rem, 1.45vw, 1.12rem)/1.65 var(--display); }
.archive-hero-links { display: flex; gap: 1.55rem; flex-wrap: wrap; margin-top: 1.4rem; }
.archive-hero-actions {
  display: grid; grid-template-columns: max-content minmax(0, max-content); align-items: center;
  gap: .65rem clamp(.9rem, 3vw, 2.15rem); margin-top: 1.05rem;
}
.archive-hero-actions .archive-hero-links { grid-column: 1; grid-row: 1; margin-top: 0; }
.hero-persona-link {
  display: grid; grid-column: 2; grid-row: 1 / span 2;
  grid-template-rows: 1fr auto; grid-template-rows: subgrid;
  align-self: stretch; place-items: center; min-width: 0; text-align: center;
}
.hero-persona-link img {
  display: block; width: clamp(2.9rem, 5.3vw, 3.8rem); height: auto;
  filter: drop-shadow(0 2px 2px #0007);
  transition: filter .2s;
}
.hero-persona-caption {
  color: #d4bea0; font: 500 .72rem/1.4 var(--body); text-wrap: balance;
}
.hero-persona-arrow { margin-inline-start: .35em; color: var(--orange); }
.hero-persona-link:hover img { filter: drop-shadow(0 2px 2px #0007) brightness(1.12); }
.hero-persona-link:hover .hero-persona-caption { color: #f6e3c8; }
.hero-persona-link:focus-visible { outline: 1px solid #f4d7a7; outline-offset: 4px; border-radius: 6px; }
@media (max-width: 420px) {
  .archive-hero-actions .archive-hero-links { gap: .95rem; }
  .hero-persona-caption { font-size: .68rem; }
}
.hero-record-cue {
  display: inline-flex; grid-column: 1; grid-row: 2; width: fit-content; align-items: center; gap: .56rem;
  color: #c8ad88; font: 400 italic .9rem/1.4 var(--display);
}
.hero-record-cue:lang(zh) { font-style: normal; letter-spacing: .07em; }
.hero-record-icon { width: .95rem; height: .95rem; border: 1px solid currentColor; border-radius: 50%; background: radial-gradient(circle, currentColor 0 1px, transparent 1.2px 3px, currentColor 3.1px 3.7px, transparent 3.8px); }
.folio-link {
  display: inline-flex; align-items: center; gap: .7rem; color: #dfc39e; width: fit-content;
  padding-bottom: .35rem; border-bottom: 1px solid #c9ac8373; font: 500 .72rem/1.45 var(--body);
  letter-spacing: .065em;
}
.folio-link:hover { color: #f6e3c8; border-color: currentColor; }
.folio-link.secondary { color: var(--muted); border-color: transparent; }
.folio-link.secondary:hover { color: var(--ink); }
.hero-folio { position: absolute; bottom: 2.45rem; right: 0; opacity: .74; }
.hero-folio b { color: var(--orange); font-weight: 400; margin-inline: .45rem; }
.archive-subhero .hero-composition { padding-block: 3.3rem 2.8rem; }
.archive-subhero h1 { font-size: clamp(3.9rem, 8.7vw, 7.6rem); }
.archive-subhero h1 i { display: inline; font-size: .91em; }

.folio-cut {
  --cut-depth: clamp(76px, 17vw, 216px);
  --cut-space: clamp(33px, 4.5vw, 63px);
  position: relative; display: block; width: 100%; height: var(--cut-depth);
  margin-block-end: calc(var(--cut-space) - var(--cut-depth));
  overflow: visible; pointer-events: none;
}
.folio-cut.cut-1, .folio-cut.cut-3 { --cut-space: clamp(43px, 6.1vw, 92px); }
.folio-cut.cut-4 { --cut-depth: clamp(60px, 9vw, 130px); --cut-space: clamp(32px, 4.1vw, 60px); }
.cut-core { fill: #76695a; }
.cut-relief { fill: #090b09; opacity: .63; }
.cut-pulp { opacity: .70; }
.cut-rim, .cut-tuft { fill: none; }
.cut-rim { stroke: #322c25; stroke-width: .78; stroke-opacity: .68; }
.cut-tuft { stroke: #b6a58d; stroke-width: 1; stroke-opacity: .47; stroke-linecap: round; }
.archive-works { position: relative; padding-bottom: .25rem; scroll-margin-top: 1rem; }
.archive-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-block: .9rem .85rem; }
.archive-heading h2, .archive-index h2 {
  font: 400 clamp(2rem, 4.7vw, 3.9rem)/1 var(--display); margin-top: .55rem; letter-spacing: -.045em;
}
.archive-heading h2 { font-size: clamp(1.75rem, 3.2vw, 3rem); }
.archive-heading h2 i, .archive-index h2 i { color: #d5bd9e; font-weight: 400; }
.archive-more-games { display: flex; justify-content: flex-end; margin-block: 1rem .75rem; }
.archive-more-games .folio-link { font-size: .9rem; }
.archive-track {
  --accent: #8d6058; --bloom: #8c5a4b5b; --label: #593e3a;
  position: relative; padding-block: .95rem 1.25rem;
}
.tone-sage { --accent: #9eaf96; --bloom: #718d8059; --label: #435748; }
.tone-slate { --accent: #a0aab5; --bloom: #75839c55; --label: #444f5e; }
.tone-ochre { --accent: #c4a379; --bloom: #8c745451; --label: #665239; }
.tone-coral { --accent: #cf9281; --bloom: #b15c4859; --label: #633f3a; }
.track-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .83fr) minmax(0, 1.16fr);
  grid-template-areas: "object copy media"; align-items: center; gap: clamp(1.3rem, 3vw, 3.25rem);
}
.archive-track:nth-of-type(even) .track-grid {
  grid-template-areas: "media copy object";
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .83fr) minmax(0, 1fr);
}
.track-object { grid-area: object; min-width: 0; }
.track-copy { grid-area: copy; min-width: 0; }
.track-media { grid-area: media; min-width: 0; position: relative; padding-top: 2.35rem; }
.track-index { color: #d3bda0; letter-spacing: .145em; }
.track-index span { opacity: .65; margin-inline: .17rem; }
.track-copy h3 { margin: .55rem 0 .45rem; font: 400 clamp(1.8rem, 3.25vw, 3.1rem)/.99 var(--display); letter-spacing: -.044em; }
.track-copy h3 a:hover { color: #ddc19d; }
.track-category { color: #ccbda8; font-size: .62rem; letter-spacing: .105em; }
.track-description { margin: .83rem 0 1.05rem; color: #bbb4a7; font-size: .83rem; line-height: 1.58; max-width: 27ch; }
.archive-track:nth-of-type(even) .track-copy { text-align: right; }
.archive-track:nth-of-type(even) .track-description { margin-inline-start: auto; }

.record-control {
  position: relative; display: block; width: 100%; aspect-ratio: 1.23; min-width: 0;
  border: 0; color: #efe0c6; background: transparent; isolation: isolate; cursor: pointer; padding: 0;
}
.record-disc, .record-ambient, .record-ring {
  position: absolute; width: 73%; aspect-ratio: 1; right: 0; top: 50%;
  border-radius: 50%; translate: 0 -50%;
}
.record-disc {
  display: grid; place-items: center;
  border: 1px solid #9a8e7b62; box-shadow: 0 10px 21px #0009, inset 0 0 12px #000;
  background: url("assets/identity/vinyl-grooves.webp") center / cover no-repeat, #121313;
  transition: filter .35s, scale .35s;
}
.record-center {
  display: grid; grid-template-rows: 1fr auto 1fr; place-items: center;
  width: 41%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #d7bfa773;
  background: var(--grain), url("assets/identity/paper-pulp.webp") center / 145% auto, var(--label);
  background-blend-mode: normal, multiply, normal;
  box-shadow: inset 0 0 0 4px #ddbd9140, inset 0 0 16px #160d0a70; text-align: center;
  font: 400 clamp(.75rem, 1.7vw, 1.35rem)/1 var(--display); letter-spacing: .08em;
}
.record-center > span:first-child { align-self: end; margin-bottom: .28em; }
.record-center i { width: 7%; aspect-ratio: 1; border-radius: 50%; background: #080a09; box-shadow: inset 0 1px 2px #000; }
.record-number { font: 500 clamp(.3rem, .54vw, .53rem)/1 var(--body); letter-spacing: .15em; align-self: start; margin-top: .75em; }
.record-ambient { background: radial-gradient(circle, var(--bloom) 42%, transparent 72%); width: 109%; right: -18%; opacity: .18; transition: opacity .55s; }
.record-ring { box-shadow: 0 0 0 12px #c5b48e0f, 0 0 0 24px #c5b48e0c; opacity: 0; transition: opacity .5s; }
.record-sleeve {
  position: absolute; left: -2%; top: 50%; width: 55%; aspect-ratio: .92; translate: 0 -50%; rotate: -8deg;
  filter: drop-shadow(3px 6px 5px #0009); pointer-events: none;
}
.sleeve-shadow {
  display: block; position: absolute; inset: 38% 12% 1% 1%;
  clip-path: polygon(3% 54%,12% 39%,18% 40%,22% 27%,35% 23%,39% 12%,53% 17%,61% 9%,66% 23%,81% 26%,85% 41%,97% 53%,90% 66%,94% 77%,77% 81%,70% 93%,54% 87%,46% 98%,33% 87%,21% 90%,18% 78%,7% 74%);
  background: linear-gradient(#68312640,#2e151547), url("assets/identity/paper-pulp.webp") center / 210px auto, #8c4b3d;
  background-blend-mode: normal, multiply, normal;
  rotate: -13deg;
}
.sleeve-art {
  display: block; position: absolute; inset: 0 0 9%;
}
.sleeve-art img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
#track-slime-stealth .sleeve-art { inset-block: -5% 14%; }
.sleeve-index {
  position: absolute; bottom: 5%; left: 7%; color: #372d21; padding: .45em .9em;
  background: linear-gradient(#c6ab8350,#8c6b4633), url("assets/identity/paper-pulp.webp") center/220px;
  rotate: -4deg; font: italic 400 clamp(.62rem, 1.15vw, 1rem)/1.1 var(--display); letter-spacing: .035em;
  clip-path: polygon(1% 12%, 12% 7%, 25% 9%, 42% 2%, 57% 9%, 74% 4%, 86% 1%, 99% 7%, 97% 29%, 100% 55%, 96% 87%, 82% 91%, 68% 96%, 56% 93%, 39% 99%, 22% 91%, 10% 95%, 2% 90%, 4% 66%, 0 53%);
}
.archive-track:nth-of-type(even) :is(.record-disc, .record-ring) { left: 0; right: auto; }
.archive-track:nth-of-type(even) .record-ambient { left: -18%; right: auto; }
.archive-track:nth-of-type(even) .record-sleeve { left: auto; right: -2%; rotate: 8deg; }
.archive-track:nth-of-type(even) .sleeve-shadow { inset-inline: 12% 1%; rotate: 13deg; }
.archive-track:nth-of-type(even) .sleeve-index { left: auto; right: 7%; rotate: 4deg; }
.record-disc { animation: record-turn 14s linear infinite paused; }
.archive-track:is(.track-open,:has(.record-control:focus-visible)) .record-disc { animation-play-state: running; }
.archive-track:is(.track-open,:has(.record-control:focus-visible)) .record-ambient { opacity: 1; }
.archive-track:is(.track-open,:has(.record-control:focus-visible)) .record-ring { opacity: .75; }
.record-control:active .record-disc { scale: .965; }
.record-pulse {
  position: absolute; top: var(--pulse-y); left: var(--pulse-x);
  translate: -50% -50%; width: 20%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--accent); box-shadow: 0 0 0 8px var(--bloom);
  animation: record-pulse .85s ease-out both; pointer-events: none;
}
@keyframes record-turn { to { transform: rotate(360deg); } }
@keyframes record-pulse { from { scale: .3; opacity: .8; } to { scale: 4; opacity: 0; } }

.track-note {
  position: absolute; z-index: 2; bottom: calc(100% - 1.8rem); right: 0; left: 0;
  display: flex; justify-content: end; align-items: center; gap: .6rem;
  opacity: 0; visibility: hidden; transform: translateY(5px);
  transition: opacity .3s, transform .3s, visibility .3s; pointer-events: none;
}
.archive-track:nth-of-type(even) .track-note { flex-direction: row-reverse; }
.track-note p {
  color: #3c3429; background: var(--grain), #cec0a5; padding: .47rem .78rem; max-width: 30ch;
  clip-path: polygon(1% 7%,18% 5%,23% 0,44% 7%,69% 1%,82% 7%,99% 4%,98% 51%,100% 95%,78% 91%,65% 100%,42% 94%,24% 100%,1% 93%);
  font: italic 400 clamp(.71rem, 1.12vw, .88rem)/1.26 var(--display);
}
.note-motif { display: block; flex: 0 0 32px; color: #d2bc9b; }
.note-motif svg { display: block; width: 100%; }
.tone-sage .note-motif { flex-basis: 68px; }
.note-motif img { width: 100%; height: auto; filter: sepia(.42) brightness(1.35); mix-blend-mode: screen; }
.archive-track.track-open .track-note { visibility: visible; opacity: 1; transform: none; }
@media (hover: hover) {
  .archive-track:has(.record-control:hover) .record-disc { animation-play-state: running; }
  .archive-track:has(.record-control:hover) .record-ambient { opacity: 1; }
  .archive-track:has(.record-control:hover) .record-ring { opacity: .75; }
  .archive-track:has(.record-control:hover) .track-note { visibility: visible; opacity: 1; transform: none; }
}
.archive-frame {
  display: block; position: relative; padding: 6px; width: 100%; border: 1px solid #a08766;
  border-radius: 2px; color: #f5e6cc; background: #29251d; cursor: pointer;
  box-shadow: 0 9px 22px #0007, inset 0 0 0 1px #251d15, inset 0 0 0 2px #9c816266, inset 0 0 0 4px #1a1711, inset 0 0 0 5px #816b4d95;
  transition: border-color .25s, box-shadow .25s;
}
.archive-frame:hover, .archive-track.track-open .archive-frame { border-color: #d0ac7d; box-shadow: 0 9px 25px #0008, 0 0 25px var(--bloom); }
.frame-visual { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: #101410; }
.frame-visual img { width: 100%; height: 100%; object-fit: contain; filter: saturate(.64) brightness(.89); transition: filter .25s; }
.archive-reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s; }
.reel-playing .archive-reel { opacity: 1; }
.archive-frame:hover img { filter: saturate(.88) brightness(1); }
.frame-visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, #0b0e0b51); pointer-events: none; }
.frame-action {
  position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center;
  width: 42px; aspect-ratio: 1; border-radius: 50%; background: #1016118a; border: 1px solid #e2c59ab0;
  color: #f1e0c2; font: 400 1.25rem/1 var(--display); transition: background .25s, opacity .18s;
}
/* Image previews keep their content clear; video retains its central play control. */
.archive-frame[data-archive-medium="image"] .frame-action {
  inset: auto clamp(9px, 1.2vw, 16px) clamp(9px, 1.2vw, 16px) auto;
  translate: none;
  width: clamp(36px, 4vw, 42px);
}
.archive-frame:hover .frame-action { background: #30271de6; }
.archive-frame.reel-playing .frame-action { opacity: 0; }
.frame-action svg { width: 21px; margin-left: 1px; }
.frame-corner {
  position: absolute; z-index: 2; width: clamp(23px, 2.25vw, 38px); aspect-ratio: 1;
  top: -4px; left: -4px; pointer-events: none;
  background: url("assets/identity/filigree-corner.svg") center / contain no-repeat;
  filter: drop-shadow(1px 2px 1px #0e0b07);
}
.frame-corner:nth-of-type(3) { left: auto; right: -4px; transform: scaleX(-1); }
.frame-corner:nth-of-type(4) { top: auto; bottom: -4px; transform: scaleY(-1); }
.frame-corner:nth-of-type(5) { top: auto; bottom: -4px; left: auto; right: -4px; transform: scale(-1); }
.frame-caption { display: flex; justify-content: space-between; gap: .5rem; margin-top: .65rem; font-size: .56rem; }
.archive-track:nth-of-type(even) .frame-caption { flex-direction: row-reverse; }
.frame-caption > span:first-child { color: var(--muted); }
.archive-index { padding-block: 3.3rem 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.archive-index-links { display: grid; }
.archive-index-links a {
  padding: .85rem 0; border-top: 1px solid var(--line); display: flex; align-items: center;
  justify-content: space-between; font: 400 1.12rem/1.35 var(--display);
}
.archive-index-links a:last-child { border-bottom: 1px solid var(--line); }
.archive-index-links a:hover { color: var(--orange); }
.archive-index-links a > span:last-child { color: var(--orange); }
.archive-dialog {
  width: min(92vw, 1000px); padding: 1rem; max-height: 93dvh; color: #ebdfce; background: #1d211e;
  border: 1px solid #a78a63; box-shadow: 0 0 0 4px #22261f, 0 0 0 5px #79674c, 0 18px 100px #000b;
}
.archive-dialog::backdrop { background: #0b0d0bea; }
.archive-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 0 .12rem .75rem; }
.archive-dialog-head h2 { font: 400 clamp(1.2rem, 3vw, 2rem)/1.2 var(--display); }
.archive-dialog-head button {
  border: 1px solid #cfb48c75; background: transparent; color: #f1dfc3; font-size: 1.5rem;
  width: 2.1rem; height: 2.1rem; cursor: pointer;
}
.archive-dialog :is(video,img) { width: 100%; max-height: 75dvh; object-fit: contain; display: block; background: #0c0e0c; }

.case-player-slot[data-floating] { height: var(--case-player-height); }
.case-player-slot[data-floating] .case-player-surface {
  position: fixed; z-index: 12; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(21rem, 62vw); background: #1c201b; border: 1px solid #9a7e59;
  box-shadow: 0 .5rem 1.8rem #000a; color: #e5d2b5;
}
.case-player-bar:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding-left: .68rem; }
.case-player-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .68rem/1.4 var(--body); }
.case-player-close { flex: none; width: 2rem; height: 2rem; border: 0; background: transparent; color: inherit; font: 400 1.25rem/1 var(--body); cursor: pointer; }
.case-player-close:hover { background: #514434; }
.case-player-slot[data-floating] .case-player-surface .project-video { width: 100%; height: auto; max-height: 34dvh; }

/* Long-form case studies and CV read as warm paper within the dark archive. */
body[data-view="reading"] main {
  --paper: #ebe5d7; --ink: #262722; --muted: #615c50; --line: #c9c0b0; --orange: #8b5139;
  width: min(94%, 1390px); margin: 1.75rem auto 0; padding-block: .5rem 2rem;
  background: linear-gradient(#ebe5d7ee,#ebe5d7ee), url("assets/identity/paper-pulp.webp") center / 510px auto, #ebe5d7;
  color: var(--ink); box-shadow: 0 15px 55px #0006;
}
body[data-view="reading"] main .project-head h1, .cv-title h1 { letter-spacing: -.045em; }
body[data-view="reading"] main .button { background: #2c3028; color: #eee5d3; }
body[data-view="reading"] main .button:hover { background: #86533d; }
body[data-view="about"] .profile-about-layout > div > p:not(.about-role),
body[data-view="about"] .profile-highlights p { color: var(--muted); }
.concept-head.folio-shell, .concept-section.folio-shell { margin-inline: auto; }
.concept-head { padding-block: clamp(2rem, 4.5vw, 4rem) 0; }
.concept-head h1 { font-size: clamp(3.45rem, 7.5vw, 6.7rem); margin-block: 1.1rem 1.65rem; }
.concept-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.concept-jump a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  min-height: 3.5rem; padding: .75rem 1rem; border: 1px solid var(--line); background: #e1c4a309;
  font: 400 clamp(1rem, 2.2vw, 1.35rem)/1.25 var(--display);
}
.concept-jump a:hover, .concept-jump a:focus-visible { border-color: var(--orange); background: #e1c4a318; }
.concept-jump .folio-micro, .concept-jump a > span:last-child, .concept-category-head > .folio-micro { color: var(--orange); }
.concept-section { padding-block: clamp(2.3rem, 5vw, 4rem); }
.concept-category { scroll-margin-top: 1.5rem; }
.concept-category + .concept-category { margin-top: clamp(2.8rem, 6vw, 5rem); }
.concept-category-head { display: flex; align-items: baseline; gap: .95rem; border-top: 1px solid var(--line); padding-top: 1.15rem; margin-bottom: 1.45rem; }
.concept-category-head h2 { font: 400 clamp(1.8rem, 4vw, 3rem)/1.12 var(--display); }
.concept-category-head h2:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.concept-category-head p, .concept-empty { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.concept-category-head p { margin-top: .6rem; }
.concept-empty { border: 1px dashed var(--line); padding: 1.45rem; }
.concept-project-card .card-bottom { gap: 1.2rem; align-items: baseline; }
.concept-project-card .card-bottom p { color: var(--muted); margin-top: .5rem; line-height: 1.6; }
.concept-category .concept-project-card { display: flex; flex-direction: column; }
.concept-category .concept-project-card > .art { flex-shrink: 0; }
.concept-category .concept-project-card > .card-bottom { flex: 1; }
@media (min-width: 1050px) {
  .concept-category .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
}
@media (max-width: 540px) {
  .concept-jump { grid-template-columns: 1fr; gap: .5rem; }
  .concept-jump a { min-height: 3rem; }
}
.site-footer {
  padding: 0; background: transparent; color: #c4baaa; margin-top: 1.1rem;
}
.archive-footer {
  width: min(86%, 1210px); margin-inline: auto; padding: 1.05rem 0 1.7rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border-top: 1px solid var(--line);
}
.archive-footer-brand { display: inline-flex; align-items: center; gap: .65rem; color: #dfc6a4; }
.archive-footer-brand .folio-mark { width: 27px; height: 27px; }
.archive-footer-brand:hover { color: #f4e4cd; }

@media (max-width: 880px) {
  .folio-shell, .archive-footer { width: 90%; }
  .track-grid { gap: 1.35rem; }
  .track-copy h3 { font-size: clamp(1.55rem, 4vw, 2.5rem); }
  .track-description { font-size: .77rem; }
  .track-category { font-size: .57rem; }
}
@media (max-width: 900px) {
  .header { height: auto; min-height: 72px; display: grid; grid-template-columns: 1fr auto; gap: 0 .6rem; padding-block: .55rem; }
  .header .brand { grid-column: 1; grid-row: 1; gap: .58rem; }
  .header-tools { grid-column: 2; grid-row: 1; }
  .header nav { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: .48rem 0 0; justify-content: space-between; gap: .35rem; }
  .header nav a { padding: .38rem 0; }
  .header [aria-current="page"] { text-underline-offset: .34em; }
}
@media (max-width: 650px) {
  .brand .folio-mark { width: 35px; height: 35px; }
  .header .brand-word { padding-inline-start: .65rem; font-size: .69rem; }
  .header-tools { gap: .45rem; }
  .sound-control { gap: .3rem; }
  .sound-toggle { width: 29px; height: 30px; }
  .sound-volume { width: clamp(40px, 13vw, 66px); }
  .sound-value { display: none; }
  .header nav a { font-size: .72rem; }
  .hero-composition { padding-block: 2.8rem 2.2rem; }
  .archive-hero h1 { font-size: clamp(3.9rem, 14vw, 6.3rem); margin-block: .95rem 1.05rem; }
  .archive-intro { max-width: min(88%, 27rem); }
  .archive-watermark { width: 81vw; right: -29vw; top: .45rem; opacity: .105; }
  .hero-folio { display: none; }
  .archive-heading { padding-block: .9rem 1.25rem; }
  .archive-track { padding-block: .5rem 1rem; }
  .archive-track .track-grid {
    grid-template: "object copy" auto "media media" auto / minmax(0, .9fr) minmax(0, 1fr);
    gap: .6rem 1.1rem;
  }
  .archive-track:nth-of-type(even) .track-grid {
    grid-template: "copy object" auto "media media" auto / minmax(0, 1fr) minmax(0, .9fr);
  }
  .track-copy h3 { font-size: clamp(1.7rem, 5.5vw, 2.65rem); }
  .track-description { margin: .55rem 0 .72rem; font-size: .75rem; }
  .track-index { font-size: .54rem; }
  .record-center { font-size: clamp(.64rem, 3vw, .98rem); }
  .record-number { font-size: .35rem; }
  .record-sleeve { width: 54%; }
  .track-media { width: 100%; padding-top: 2.2rem; }
  .track-note p { font-size: .74rem; }
  .archive-index { grid-template-columns: 1fr; gap: 1.6rem; padding-block: 2rem 2.8rem; }
  .archive-footer { flex-wrap: wrap; padding-bottom: 1.25rem; }
  body[data-view="reading"] main { width: 100%; margin-top: .7rem; }
}
@media (max-width: 360px) {
  .header .brand-word { padding-inline-start: .35rem; font-size: .6rem; letter-spacing: .14em; }
  .header .language-switch button { padding-inline: .38rem; }
}
@media (prefers-reduced-motion: reduce) {
  .record-disc, .record-pulse { animation: none; }
  .track-note, .record-ambient, .record-ring { transition: none; }
}

.project-head > .text-link,
.project-head > .project-title-line > .eyebrow,
.page-head > .eyebrow,
.about-page > .eyebrow,
.cv-head > .eyebrow,
.archive-hero .hero-discipline {
  font-size: clamp(.875rem, 1.2vw, 1rem);
  letter-spacing: .045em;
  line-height: 1.5;
}
.project-head > .project-title-line {
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
  margin-top: clamp(1.35rem, 3vw, 2.25rem);
}
.project-head > .project-title-line > .eyebrow + .eyebrow { color: var(--muted); }
@media (min-width: 651px) {
  .project-head > .project-title-line > .eyebrow + .eyebrow {
    padding-inline-start: 1rem;
    border-inline-start: 1px solid var(--line);
  }
}
.project-head .project-period > span,
.project-head .jaguar-facts dt {
  font-size: clamp(.8125rem, 1.05vw, .875rem);
  letter-spacing: .045em;
}

.practice-research-head > h1 {
  font-size: clamp(2.25rem, 5.8vw, 5.4rem);
  text-wrap: balance;
}
@media (min-width: 701px) {
  .practice-research-head > .project-title-line { justify-content: space-between; }
  .practice-research-head > .project-title-line > .eyebrow + .eyebrow {
    border-inline-start: 0;
    padding-inline-start: 0;
    text-align: end;
  }
}
.project-origin-note {
  margin: 0;
  padding: .85rem 0 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: clamp(.9rem, 1.4vw, 1rem);
  line-height: 1.65;
}
.project-origin-note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.project-origin-note a:hover { color: var(--orange); }

/* The catalog filters sit above a single chronological sequence of records. */
.archive-catalog { scroll-margin-top: 5rem; }
.catalog-tools { padding-block: .65rem .25rem; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.15rem; }
.catalog-filters a {
  display: inline-flex; align-items: center; min-height: 2.65rem; padding: .45rem .85rem;
  color: var(--muted); border: 1px solid var(--line); font-size: .83rem;
}
.catalog-filters a[aria-current="true"] { color: var(--ink); border-color: #a78561; background: #b99a7029; }
.catalog-filters a:hover { color: var(--ink); border-color: var(--orange); }
.catalog-status {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line); color: var(--muted);
}
.catalog-status h2 { margin: 0; color: var(--ink); font: 400 clamp(1.15rem,2.5vw,1.6rem)/1.2 var(--display); letter-spacing: 0; text-transform: none; }
.catalog-status > span { text-align: end; }
.archive-catalog .archive-track { scroll-margin-top: 5rem; }
.archive-concept-list .study-sleeve .sleeve-art {
  inset: 11% 4% 13%;
  clip-path: polygon(3% 13%,16% 7%,28% 10%,42% 3%,58% 8%,68% 4%,78% 10%,95% 8%,98% 20%,94% 29%,99% 44%,95% 57%,98% 72%,91% 81%,92% 94%,79% 96%,69% 91%,51% 99%,41% 94%,30% 97%,18% 92%,6% 95%,8% 80%,2% 69%,7% 53%,1% 42%,5% 32%,1% 25%);
}
.archive-concept-list .study-sleeve .sleeve-art img { object-fit: cover; filter: saturate(1.05) brightness(.92); }
.archive-concept-list #track-till-the-world-ends .sleeve-art img { object-position: 48% 54%; }
@media (max-width: 520px) {
  .catalog-filters { gap: .4rem; }
  .catalog-filters a { padding-inline: .65rem; }
  .archive-catalog, .archive-catalog .archive-track { scroll-margin-top: 7rem; }
}

.archive-game-list > .folio-cut,
.archive-concept-list > .folio-cut,
.archive-catalog > .folio-cut {
  --cut-depth: clamp(42px, 8vw, 105px);
  margin-block-end: 0;
}