/* Swan Street Studios / Absentia
   The site is laid out as a case file: dark where the house is, paper where you read.
   Special Elite is the game's own UI typeface; Public Sans carries body text. */

@font-face {
  font-family: "Special Elite";
  src: url("../fonts/special-elite.woff2?v=eb02d8f7") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans.woff2?v=6bac9ce7") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-italic.woff2?v=8798913b") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Constant across themes: the house (hero, footer) is always dark. */
  --night: #131714;
  --wall: #3a3c32;
  --torch: #f2d48c;
  --ink: #221e18;
  --paper: #efe7d1;
  --paper-bright: #f7f2e3;
  --on-dark: #efe7d1;
  --on-dark-soft: rgba(239, 231, 209, 0.74);

  --font-type: "Special Elite", "Courier New", Courier, monospace;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --sheet-max: 74rem;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --tabs-h: 3.5rem;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-light-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --noise-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-paper-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- Theme: Folder (default). A manila folder with white paper inside. ---- */
  --folder: #cdb88a;
  --folder-grain: var(--noise-soft);
  --tab: #bba473;
  --tab-hover: #d6c599;
  --tab-text: #3a3228;
  --tab-hover-text: #221e18;
  --tab-current: #e4d6b0;
  --tab-current-text: #221e18;
  --sheet: #fdfcf9;
  --raised: #f6f1e4;
  --field: #ffffff;
  --paper-grain: var(--noise-paper);
  --text: #221e18;
  --text-rgb: 34 30 24;
  --text-soft: #5b5245;
  --rule: rgb(34 30 24 / 0.16);
  --btn-bg: #221e18;
  --btn-fg: #fdfcf9;
  --btn-hover: #3b3329;
  --stamp: #9c2b21;
  --focus: #9c2b21;
  --print: #ffffff;
  --redact: #221e18;
  --shadow-rgb: 52 38 12;
  --sheet-shadow:
    0 1px 1px rgb(52 38 12 / 0.12),
    5px 6px 0 -1px #efe8d8,
    5px 6px 1px -1px rgb(52 38 12 / 0.18),
    0 20px 36px -24px rgb(52 38 12 / 0.55);
  --scroll-thumb: #bba473;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23221e18' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* ---- Theme: Mansion. Dark green board, bone paper, brass. ---- */
[data-theme="mansion"] {
  --folder: #0e1511;
  --folder-grain: var(--noise-light-soft);
  --tab: #1a241f;
  --tab-hover: #24322b;
  --tab-text: #b8c1b3;
  --tab-hover-text: #ebe5d3;
  --sheet: #18221d;
  --raised: #1f2b25;
  --field: #101713;
  --text: #ebe5d3;
  --text-rgb: 235 229 211;
  --text-soft: #a9b2a3;
  --rule: rgb(235 229 211 / 0.14);
  --btn-bg: #f2d48c;
  --btn-fg: #1a1712;
  --btn-hover: #f8e3b0;
  --stamp: #ea7066;
  --focus: #f2d48c;
  --print: #e6e0cd;
  --redact: #050806;
  --shadow-rgb: 0 0 0;
  --scroll-thumb: #24322b;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ebe5d3' stroke-width='1.6'/%3E%3C/svg%3E");
  --tab-current: #18221d;
  --tab-current-text: #ebe5d3;
  --paper-grain: var(--noise-paper-light);
  --sheet-shadow:
    0 0 0 1px rgb(235 229 211 / 0.06),
    5px 6px 0 -1px #131b17,
    0 30px 60px -30px rgb(0 0 0 / 0.85);
}

/* ---- Theme: Case file. Manila folder, cream paper, rubber-stamp red. ---- */
[data-theme="file"] {
  --folder: #cdb88a;
  --folder-grain: var(--noise-soft);
  --tab: #bba473;
  --tab-hover: #dac9a0;
  --tab-text: #3a3228;
  --tab-hover-text: #221e18;
  --sheet: #efe7d1;
  --raised: #f7f2e3;
  --field: #fffdf6;
  --text: #221e18;
  --text-rgb: 34 30 24;
  --text-soft: #5b5245;
  --rule: rgb(34 30 24 / 0.2);
  --btn-bg: #221e18;
  --btn-fg: #efe7d1;
  --btn-hover: #3b3329;
  --stamp: #9c2b21;
  --focus: #9c2b21;
  --print: #f7f2e3;
  --redact: #221e18;
  --shadow-rgb: 52 38 12;
  --sheet-shadow:
    0 1px 1px rgb(34 30 24 / 0.1),
    5px 6px 0 -1px #e4d9bd,
    5px 6px 1px -1px rgb(52 38 12 / 0.18),
    0 20px 36px -24px rgb(52 38 12 / 0.55);
  --tab-current: #efe7d1;
  --tab-current-text: #221e18;
  --paper-grain: var(--noise-paper);
  --scroll-thumb: #bba473;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23221e18' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* ---- Theme: Evidence. Slate folder, cold report paper. ---- */
[data-theme="evidence"] {
  --folder: #6c7671;
  --folder-grain: var(--noise-soft);
  --tab: #5a645f;
  --tab-hover: #4b5550;
  --tab-text: #eef0ec;
  --tab-hover-text: #ffffff;
  --sheet: #eaece8;
  --raised: #f6f7f4;
  --field: #ffffff;
  --text: #1a1f1d;
  --text-rgb: 26 31 29;
  --text-soft: #4c5652;
  --rule: rgb(26 31 29 / 0.18);
  --btn-bg: #1a1f1d;
  --btn-fg: #eef0ec;
  --btn-hover: #333b38;
  --stamp: #a3261d;
  --focus: #a3261d;
  --print: #ffffff;
  --redact: #1a1f1d;
  --shadow-rgb: 16 22 20;
  --sheet-shadow:
    0 1px 1px rgb(26 31 29 / 0.1),
    5px 6px 0 -1px #d9ddd8,
    5px 6px 1px -1px rgb(16 22 20 / 0.18),
    0 20px 36px -24px rgb(16 22 20 / 0.6);
  --tab-current: #eaece8;
  --tab-current-text: #1a1f1d;
  --paper-grain: var(--noise-paper);
  --scroll-thumb: #5a645f;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a1f1d' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tabs-h) + 1.25rem);
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 64em) {
  body { font-size: 1.125rem; }
}

img { max-width: 100%; height: auto; display: block; }
/* <picture> only picks the file; the <img> inside is what gets laid out and styled. */
picture { display: contents; }

/* Long URLs and emails wrap instead of pushing the page sideways on small screens. */
p, li, dd, dt, h1, h2, h3, figcaption, summary, label { overflow-wrap: break-word; }

p { margin: 0 0 1em; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--torch);
  outline-offset: 3px;
}
.sheet :focus-visible,
.folder :focus-visible { outline-color: var(--focus); }

[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--torch);
  color: var(--ink);
  padding: 0.6rem 1rem;
  font-family: var(--font-type);
  text-decoration: none;
}
.skip:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  padding: 0.7em 1.35em;
  font-family: var(--font-type);
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid currentColor;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }

.btn--torch { background: var(--torch); border-color: var(--torch); color: var(--ink); }
.btn--torch:hover { background: #f8e3b0; border-color: #f8e3b0; }

.btn--ghost { background: transparent; color: var(--on-dark); border-color: rgba(239, 231, 209, 0.45); }
.btn--ghost:hover { border-color: var(--on-dark); background: rgba(239, 231, 209, 0.06); }

.btn--ink { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn--ink:hover { background: var(--btn-hover); border-color: var(--btn-hover); }

.btn--line { background: transparent; color: var(--text); border-color: var(--text); }
.btn--line:hover { background: rgb(var(--text-rgb) / 0.08); }

.btn--small { min-height: 2.5rem; padding: 0.45em 1em; font-size: 0.9375rem; }

/* ---------- Top bar (shared) ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  color: var(--on-dark);
  position: relative;
  z-index: 2;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-type);
  font-size: 1.125rem;
  text-decoration: none;
  color: var(--on-dark);
  white-space: nowrap;
}
/* The studio logo: two swans in a heart. White, for the dark top bar and footer. */
.wordmark__logo {
  flex: none;
  width: auto;
  height: 2.1rem;
}
.site-footer__logo { display: inline-block; margin-bottom: 0.9rem; }
.site-footer__logo img {
  width: auto;
  height: clamp(6rem, 12vw, 8rem);
  opacity: 0.92;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.site-footer__logo:hover img { opacity: 1; transform: rotate(-3deg) scale(1.03); }
.site-footer__logo--small { display: block; width: max-content; margin: 0 0 1rem; }
.site-footer__logo--small img { height: 4.5rem; }
/* On paper the logo takes the page's ink colour, whichever colour scheme is in use. */
.studio-mark {
  display: block;
  width: 5.5rem;
  aspect-ratio: 1130 / 1216;
  margin-bottom: 1rem;
  background: var(--text);
  -webkit-mask: url("../img/studio-logo.svg?v=f01d698c") center / contain no-repeat;
  mask: url("../img/studio-logo.svg?v=f01d698c") center / contain no-repeat;
}
.logo-tile__studio { width: auto; height: 9rem; margin: 0 auto; }
.topbar__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.75rem);
}
.topbar__links > a:not(.btn) {
  font-size: 0.9375rem;
  color: var(--on-dark-soft);
  text-decoration: none;
}
.topbar__links > a:not(.btn):hover { color: var(--on-dark); text-decoration: underline; }

@media (max-width: 30em) {
  .topbar .btn { display: none; }
}

/* ---------- Hero: the house, with a torch ---------- */

.hero {
  --bx: 70%;
  --by: 42%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(34rem, 92svh);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--night);
  color: var(--on-dark);
}

/* The wall: panelled wallpaper and a dado rail. */
.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -6;
  background:
    linear-gradient(to bottom,
      transparent 63%,
      rgba(0, 0, 0, 0.45) 63%, rgba(0, 0, 0, 0.45) 63.7%,
      rgba(255, 244, 214, 0.07) 63.7%, rgba(255, 244, 214, 0.07) 64.1%,
      rgba(0, 0, 0, 0.18) 64.1%),
    repeating-linear-gradient(90deg,
      rgba(255, 244, 214, 0.045) 0 1px,
      transparent 1px 1.1rem,
      rgba(0, 0, 0, 0.12) 1.1rem calc(1.1rem + 1px),
      transparent calc(1.1rem + 1px) 3.4rem),
    var(--wall);
}
.hero__scene:has(.hero__room) {
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 244, 214, 0.045) 0 1px,
      transparent 1px 1.1rem,
      rgba(0, 0, 0, 0.12) 1.1rem calc(1.1rem + 1px),
      transparent calc(1.1rem + 1px) 3.4rem),
    var(--wall);
}
.hero__room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The Shade. Hold the torch on the door: it creaks open, something leans into the gap and looks
   back, fingers round the edge. Move the light away and it's gone, faster than it came. */
.hero__leaf {
  transform-box: fill-box;
  transform-origin: right center;
  transition: transform 1.4s cubic-bezier(0.25, 0.6, 0.2, 1);
}
.hero__shade {
  opacity: 0;
  transform: translateX(52px);
  transition: transform 1.3s cubic-bezier(0.3, 0, 0.15, 1) 0.35s, opacity 0.9s ease 0.35s;
}
.hero__shade-glint {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hero__fingers {
  opacity: 0;
  transform: translateX(-10px);
  transition: transform 0.7s cubic-bezier(0.3, 0, 0.2, 1) 1.1s, opacity 0.5s ease 1.1s;
}
.hero.is-peeking .hero__leaf { transform: scaleX(0.82); }
.hero.is-peeking .hero__shade,
.hero.is-peeking .hero__fingers { opacity: 1; transform: none; }
.hero.is-peeking .hero__shade-glint { opacity: 0.85; transition-delay: 1.5s; }
/* Leaving is quick: no delays, and the door swings shut behind it. */
.hero.is-unpeeking .hero__shade,
.hero.is-unpeeking .hero__fingers { transition-duration: 0.22s; transition-delay: 0s; }
.hero.is-unpeeking .hero__shade-glint { transition-duration: 0.1s; transition-delay: 0s; }
.hero.is-unpeeking .hero__leaf { transition: transform 0.5s cubic-bezier(0.6, 0, 0.8, 0.4) 0.15s; }
.hero__lever {
  transform-box: fill-box;
  transition: transform 0.12s ease;
}
.hero.is-switched .hero__lever { transform: translateY(14px); }

.hero__scene::before {
  content: "";
  position: absolute;
  inset: 0;
}
/* Darkness everywhere except where the torch points. */
.hero__dark {
  position: absolute;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  transition: opacity 1.4s ease;
  background:
    linear-gradient(90deg, rgba(19, 23, 20, 0.82) 0%, rgba(19, 23, 20, 0.35) 45%, rgba(19, 23, 20, 0) 65%),
    radial-gradient(ellipse min(30rem, 60vw) min(22rem, 44vw) at var(--bx) var(--by),
      rgba(19, 23, 20, 0) 0%,
      rgba(19, 23, 20, 0.5) 50%,
      rgba(19, 23, 20, 0.97) 100%);
}

/* Warm cast of the bulb. */
.hero__beam {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse min(24rem, 50vw) min(18rem, 36vw) at var(--bx) var(--by),
    rgba(242, 212, 140, 0.26) 0%,
    rgba(242, 212, 140, 0.08) 45%,
    rgba(242, 212, 140, 0) 70%);
}

.hero__dust {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Full black layers: one for the torch switching on at load, one for overheating. */
.hero__blackout,
.hero__cut {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--night);
  opacity: 0;
}

/* Film grain, oversized so it can jitter without showing an edge. */
.hero::after {
  content: "";
  position: absolute;
  inset: -120px;
  z-index: -1;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.35;
}

.hero__body {
  align-self: center;
  padding: 2rem var(--pad) 3rem;
}

/* The logo: a hand holding a magnifying glass over the A. The copy sits in the space the logo
   leaves under the wordmark, to the right of the hand. */
.hero__lockup {
  position: relative;
  width: min(100%, 62rem);
}
.hero__logo {
  margin: 0;
  line-height: 0;
}
.hero__logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.25rem 1.5rem rgba(0, 0, 0, 0.55));
}
.hero__copy { margin-top: clamp(1rem, 4vw, 1.75rem); }
@media (min-width: 56em) {
  .hero__copy {
    position: absolute;
    left: 38.5%;
    right: 0;
    top: 35%;
    margin: 0;
  }
}

.hero__title {
  margin: 0 0 0.2em;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: clamp(3.75rem, 17vw, 10.5rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
  color: var(--paper-bright);
  text-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.55);
}

.hero__lede {
  margin: 0 0 0.4rem;
  max-width: 36rem;
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
  line-height: 1.4;
}
/* Who made it, straight after what it is. */
.hero__made {
  display: block;
  margin: 0.35rem 0 0.6rem;
  font-size: 0.8em;
  color: var(--on-dark);
  text-wrap: balance;
}

.hero__tagline {
  margin: 0 0 2.25rem;
  font-family: var(--font-type);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.35;
  color: var(--torch);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.hero__foot {
  margin: 0;
  padding: 1rem var(--pad) 1.6rem;
  font-size: 0.9375rem;
  color: var(--on-dark-soft);
}

/* No trailer published yet: hide anything that points at it. */
body:has([data-youtube=""]) [data-needs-trailer],
.trailer:has([data-youtube=""]) { display: none; }

/* ---------- The folder ---------- */

.folder {
  position: relative;
  z-index: 1;
  box-shadow: 0 -28px 60px -18px rgba(0, 0, 0, 0.65);
  background-color: var(--folder);
  background-image: var(--folder-grain);
  background-size: 180px 180px;
  padding: 0 clamp(0rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 5rem);
}

.tabs-sentinel { height: 1px; }

.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--folder);
  background-image: var(--folder-grain);
  background-size: 180px 180px;
  padding-top: 0.75rem;
  transition: box-shadow 0.2s ease;
}
.tabs.is-stuck { box-shadow: 0 10px 14px -12px rgb(var(--shadow-rgb) / 0.6); }

.tabs__inner {
  max-width: var(--sheet-max);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  padding: 0 clamp(0.75rem, 2vw, 1.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs__inner::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  padding: 0.55rem 1.15rem 0.55rem;
  font-family: var(--font-type);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--tab-text);
  text-decoration: none;
  white-space: nowrap;
  background: var(--tab);
  border-radius: 0.55rem 0.55rem 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-color 0.15s ease, color 0.15s ease, padding-top 0.2s ease;
}
.tab:hover { background: var(--tab-hover); color: var(--tab-hover-text); text-decoration: none; padding-top: 0.7rem; }
.tab[aria-current] { background: var(--tab-current); color: var(--tab-current-text); padding-top: 0.85rem; }

.tabs__cta {
  flex: none;
  margin: 0 0 0.45rem auto;
}

@media (max-width: 52em) {
  .tabs__cta { display: none; }
}

/* ---------- Paper sheet ---------- */

/* The folder holds separate sheets of paper; each section of the site is one sheet. */
.sheet {
  position: relative;
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 1.75rem) 6px 6px 0;
}
.sheet > * { position: relative; }

.page {
  padding: clamp(3rem, 7vw, 5.75rem) var(--pad);
  background-color: var(--sheet);
  background-image: var(--paper-grain);
  background-size: 180px 180px;
  border-radius: 2px;
  box-shadow: var(--sheet-shadow);
}
.page + .page { margin-top: clamp(1.25rem, 3vw, 2.25rem); }

.page h2,
.page-title {
  margin: 0 0 1.25rem;
  max-width: 22ch;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.page h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
}

.prose p,
.prose li { max-width: 62ch; }

.lead {
  font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
  line-height: 1.5;
}

.muted { color: var(--text-soft); }
.measure { max-width: 62ch; }

/* ---------- Overview ---------- */

.overview {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.factcard {
  background: var(--raised);
  border: 1px solid var(--rule);
  padding: 1.5rem 1.6rem 1.75rem;
  box-shadow: 0 14px 26px -22px rgb(var(--shadow-rgb) / 0.6);
}

.facts { margin: 0 0 1.25rem; }
.facts > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
.facts > div:first-child { padding-top: 0; }
.facts dt {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-soft);
  padding-top: 0.1rem;
}
.facts dd {
  margin: 0;
  font-family: var(--font-type);
  font-size: 1.0625rem;
  line-height: 1.4;
}
.facts a { text-decoration-color: rgb(var(--text-rgb) / 0.4); }

.stamp {
  display: inline-block;
  margin: 0.25rem 0 1.4rem;
  padding: 0.3rem 0.75rem 0.25rem;
  font-family: var(--font-type);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--stamp);
  border: 2px solid currentColor;
  border-radius: 3px;
  transform: rotate(-3.5deg);
  transform-origin: left center;
}

.factcard .btn { width: 100%; }

/* An evidence photo, printed with a white border and paper-clipped to the page. */
.evidence {
  position: relative;
  max-width: 26rem;
  margin: 2.5rem 0 0 0.5rem;
  padding: 0.5rem 0.5rem 0.65rem;
  background: var(--print);
  box-shadow: 0 0 0 1px rgb(var(--text-rgb) / 0.1), 0 16px 30px -24px rgb(var(--shadow-rgb) / 0.85);
  transform: rotate(-1.5deg);
}
.evidence img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--night);
}
.evidence figcaption {
  margin: 0.55rem 0.15rem 0;
  font-family: var(--font-type);
  font-size: 0.875rem;
  line-height: 1.35;
  /* Written on the print, which is light in every scheme. */
  color: #5b5245;
}
/* The clip: two nested wire loops over the top edge. */
.evidence::before,
.evidence::after {
  content: "";
  position: absolute;
  z-index: 1;
  border: 2px solid #8d8f8a;
  border-radius: 0.6rem;
  pointer-events: none;
}
.evidence::before {
  top: -1.1rem;
  left: 2rem;
  width: 0.95rem;
  height: 3.1rem;
  box-shadow: 1px 2px 2px rgb(0 0 0 / 0.25);
}
.evidence::after {
  top: -0.7rem;
  left: calc(2rem + 0.22rem);
  width: 0.55rem;
  height: 2.15rem;
  border-color: #a6a8a2;
}
/* Parked until the file exists (see tools/build.mjs). */
.evidence:has(img:not([src])) { display: none; }

/* ---------- Trailer ---------- */

.trailer { margin-top: clamp(3rem, 7vw, 4.5rem); }

/* How it's made: a short note from the two of us under the pitch. */
.made {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.5rem clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.made__body p { max-width: 62ch; }
.made__body p:last-child { margin-bottom: 0; }
@media (max-width: 40em) {
  .made { grid-template-columns: minmax(0, 1fr); }
}

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--night);
  border: 0.5rem solid var(--print);
  box-shadow: 0 0 0 1px rgb(var(--text-rgb) / 0.1), 0 22px 40px -28px rgb(var(--shadow-rgb) / 0.8);
  overflow: hidden;
}
.video iframe,
.video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video__play {
  padding: 0;
  background: var(--night);
  cursor: pointer;
}
.video__play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.video__play:hover img { opacity: 1; }
.video__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5rem;
  height: 5rem;
  margin: -2.5rem 0 0 -2.5rem;
  border-radius: 50%;
  background: rgba(19, 23, 20, 0.78);
  border: 2px solid var(--paper);
}
.video__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -0.75rem 0 0 -0.45rem;
  border-style: solid;
  border-width: 0.75rem 0 0.75rem 1.25rem;
  border-color: transparent transparent transparent var(--paper);
}
.trailer__caption {
  margin: 0.9rem 0 0;
  font-size: 0.9375rem;
  color: var(--text-soft);
}

/* ---------- How it plays ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 3vw, 2.5rem);
  margin: 2.75rem 0 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  padding-top: 1rem;
  border-top: 2px solid var(--text);
}
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-type);
  font-size: 2.5rem;
  line-height: 1;
}
.steps h3 { font-size: 1.375rem; }
.steps p { margin: 0; }

/* A polaroid pinned under the string on each step. They show as a set or not at all. */
.steps li:has(> .polaroid) { display: flex; flex-direction: column; }
.polaroid {
  order: -1;
  width: min(100%, 15rem);
  margin: 0.4rem 0 1.4rem;
  padding: 0.45rem 0.45rem 1.7rem;
  background: var(--print);
  box-shadow: 0 0 0 1px rgb(var(--text-rgb) / 0.1), 0 14px 26px -20px rgb(var(--shadow-rgb) / 0.85);
  transform: rotate(-1.6deg);
}
.steps li:nth-child(even) .polaroid { transform: rotate(1.4deg); }
.polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--night);
}
.steps:has(.polaroid img:not([src])) .polaroid { display: none; }

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(3.5rem, 7vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.features p { margin: 0; max-width: 52ch; }

/* ---------- Entities ---------- */

.dossiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2.5rem, 6vw, 5rem);
  margin-top: 2.5rem;
}
.dossier {
  /* The still's height (a 16:9 print as wide as the file, plus its gap), so the extras that sit
     beside the name in fx.css?v=e3c20469 can step down past it. */
  container-type: inline-size;
  --still: 0px;
  padding: 1.75rem 0 1.5rem;
  border-top: 1px solid var(--rule);
}
.dossier:has(.still img[src]) { --still: calc((100cqw - 0.75rem) * 0.5625 + 0.75rem + 1.5rem); }

/* A still from the game, taped to the top of the file. */
.still {
  position: relative;
  margin: 0.35rem 0 1.5rem;
}
.dossier:nth-child(even) .still { transform: rotate(0.5deg); }
.dossier:nth-child(odd) .still { transform: rotate(-0.5deg); }
/* A strip of tape over the top edge. */
.still::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  z-index: 1;
  width: 5.5rem;
  height: 1.4rem;
  margin-left: -2.75rem;
  background: rgb(232 222 190 / 0.72);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
  transform: rotate(-2deg);
  pointer-events: none;
}
.dossier:nth-child(even) .still::before { transform: rotate(2.5deg); }
.still__tag {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  padding: 0.2rem 0.5rem 0.1rem;
  font-family: var(--font-type);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff4d6;
  background: rgb(10 11 10 / 0.72);
  pointer-events: none;
}
/* The withheld file's still is underexposed; look closer and a little more comes through. */
.dossier--redacted .still img { filter: brightness(0.4) grayscale(0.5); }
.dossier--redacted .shot__open:is(:hover, :focus-visible) img { filter: brightness(0.85) grayscale(0.2); }
.dossier h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.dossier__field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
  color: var(--text-soft);
}
.dossier__field strong {
  font-family: var(--font-type);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--text);
  padding: 0 0.6rem 0.05rem 0.2rem;
  border-bottom: 1px solid var(--text);
}
.dossier p:last-child { margin: 0; max-width: 46ch; }

.dossier--more {
  display: flex;
  align-items: center;
}
.dossier--more p {
  font-family: var(--font-type);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--text-soft);
}

/* ---------- Screenshots ---------- */


.shot__open {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: var(--night);
  border: 0.375rem solid var(--print);
  box-shadow: 0 0 0 1px rgb(var(--text-rgb) / 0.1), 0 16px 30px -24px rgb(var(--shadow-rgb) / 0.85);
  cursor: zoom-in;
  overflow: hidden;
}
.shot__open img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot.is-empty,
.shot:has(img:not([src])) { display: none; } /* not uploaded yet, even without JS */

.media-note { margin: 1.75rem 0 0; }

/* ---------- Lightbox ---------- */

.lightbox {
  width: min(96vw, 110rem);
  max-width: none;
  max-height: 96vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-dark);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(12, 14, 13, 0.93); }
.lightbox figure { margin: 0; }
.lightbox img {
  width: 100%;
  max-height: 84vh;
  object-fit: contain;
  background: var(--night);
}
.lightbox figcaption {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--on-dark-soft);
  min-height: 1.5em;
}
.lightbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.lightbox__count {
  margin-right: auto;
  font-family: var(--font-type);
  font-size: 0.9375rem;
  color: var(--on-dark-soft);
}
.lightbox__bar a { color: var(--on-dark-soft); font-size: 0.9375rem; margin-right: 0.75rem; }
.lightbox__bar a:hover { color: var(--on-dark); }
.lightbox img { touch-action: pan-y; user-select: none; -webkit-user-drag: none; }

/* ---------- Creators ---------- */

.creators {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.creators h3 { margin-top: 2.25rem; }
.checklist { margin: 0; padding-left: 1.2rem; }
.checklist li { margin-bottom: 0.6rem; padding-left: 0.2rem; }
.checklist li::marker { color: var(--text-soft); }

.keybox {
  background: var(--raised);
  border: 1px solid var(--rule);
  padding: 1.6rem 1.6rem 1.75rem;
  box-shadow: 0 14px 26px -22px rgb(var(--shadow-rgb) / 0.6);
}
.keybox h3 { margin-top: 0; }
.keybox .btn { width: 100%; margin: 0.5rem 0 1rem; }
.keybox p:last-child { margin: 0; font-size: 0.9375rem; }

/* ---------- Studio ---------- */

.studio {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.team { margin: 0; }
.team > div {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.team > div:first-child { border-top: 1px solid var(--rule); }
.team dt { font-family: var(--font-type); font-size: 1.25rem; line-height: 1.3; }
.team dd { margin: 0.15rem 0 0; color: var(--text-soft); font-size: 0.9375rem; }
/* The story, then the people and what they care about, then how to reach them. On a phone the
   side column comes straight after the story rather than at the very bottom. */
.studio {
  grid-template-areas: "story side" "more side";
  grid-template-rows: auto 1fr;
  row-gap: 0;
}
.studio__story { grid-area: story; }
.studio__side { grid-area: side; }
.studio__more { grid-area: more; }
.studio .values-title { margin: 2.5rem 0 0.9rem; }
@media (max-width: 60em) {
  .studio {
    grid-template-areas: "story" "side" "more";
    grid-template-rows: none;
    row-gap: 2.5rem;
  }
  .studio__story > p:last-child { margin-bottom: 0; }
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  background: var(--night);
  color: var(--on-dark-soft);
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad) 2rem;
  font-size: 0.9375rem;
}
.site-footer__grid {
  max-width: var(--sheet-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}
.site-footer h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--on-dark);
}
.site-footer .wordmark { font-size: 1.375rem; display: inline-block; margin-bottom: 0.6rem; }
.site-footer__game { line-height: 0; }
.site-footer__game img { width: auto; height: 2.4rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--on-dark); text-decoration-color: rgba(239, 231, 209, 0.35); }
.site-footer a:hover { color: var(--torch); }
.site-footer__small {
  max-width: var(--sheet-max);
  margin: 3rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(239, 231, 209, 0.14);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(239, 231, 209, 0.58);
}
.site-footer__small p { margin: 0 0 0.25rem; }
.site-footer--compact { padding-top: 2rem; }
.site-footer--compact .site-footer__small { margin-top: 0; padding-top: 0; border-top: 0; }

/* Social links stay hidden until they have a real address. */
a[data-social][href="#"],
li:has(> a[data-social][href="#"]) { display: none; }

/* ---------- Press kit page ---------- */

.press-hero {
  position: relative;
  isolation: isolate;
  background: var(--night);
  color: var(--on-dark);
  overflow: hidden;
}
.press-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: 0.35;
}
.press-hero__body {
  display: grid;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: calc(var(--sheet-max) + 2 * var(--pad));
  padding: clamp(2.5rem, 7vw, 5rem) var(--pad) clamp(3rem, 7vw, 5rem);
}
.press-hero__logo {
  width: min(28rem, 100%);
  height: auto;
  filter: drop-shadow(0 0.25rem 1.5rem rgba(0, 0, 0, 0.55));
}
@media (min-width: 60em) {
  .press-hero__body { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); }
  .press-hero__logo { order: 2; width: 100%; }
}

.logo-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 0 !important;
  list-style: none;
}
.logo-tile { margin: 0 !important; max-width: none !important; }
.logo-tile img {
  width: 100%;
  height: auto;
  padding: 1.25rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(var(--text-rgb) / 0.12);
}
.logo-tile--dark img { background: var(--night); }
.logo-tile--light img { background: #fdfcf9; }
.logo-tile p { margin: 0.6rem 0 0; font-size: 0.9375rem; }
@media (max-width: 40em) {
  .logo-tiles { grid-template-columns: minmax(0, 1fr); }
}

.press-hero h1 {
  margin: 0 0 1rem;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: clamp(2.75rem, 8vw, 5.5rem);
  line-height: 0.95;
  color: var(--paper-bright);
}
.press-hero p { max-width: 52ch; font-size: 1.1875rem; color: var(--on-dark-soft); }
.press-hero .hero__actions { margin-top: 2rem; }

.press-folder { padding-top: clamp(1.5rem, 4vw, 3rem); }

.press-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.facts .facts__email { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.6; }
.facts > div.facts__stack { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
@media (min-width: 60.01em) and (min-height: 50rem) {
  .press-layout > aside { position: sticky; top: 1.5rem; }
}
.press-section { padding-bottom: 2.75rem; margin-bottom: 2.75rem; border-bottom: 1px dashed rgb(var(--text-rgb) / 0.3); }
.press-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.press-section h2 {
  max-width: none;
  margin: 0 0 1rem;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: 1.15;
}
.press-section h3 {
  margin: 1.75rem 0 0.5rem;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: 1.25rem;
}
.press-section ul { padding-left: 1.2rem; }
.press-section li { margin-bottom: 0.5rem; max-width: 62ch; }

.press-section.trailer { margin-top: 0; }
.social-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

.quote {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--raised);
  border-left: 3px solid var(--text);
  max-width: 62ch;
}
.quote p:last-child { margin: 0; }

.downloads { list-style: none; padding: 0 !important; margin: 0; }
.downloads li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  max-width: none !important;
  margin: 0 !important;
}
.downloads li:first-child { border-top: 1px solid var(--rule); }
.downloads a { font-family: var(--font-type); font-size: 1.0625rem; }
.downloads span { font-size: 0.875rem; color: var(--text-soft); white-space: nowrap; }

.thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 1.25rem;
  padding: 0;
  list-style: none;
}
.thumbs li { margin: 0 !important; max-width: none !important; }
.thumbs a {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--night);
  border: 0.25rem solid var(--print);
  box-shadow: 0 0 0 1px rgb(var(--text-rgb) / 0.1);
  overflow: hidden;
}
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs li.is-empty,
.thumbs li:has(img:not([src])) { display: none; }

/* ---------- 404 ---------- */

.lost {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
}
.lost__body {
  align-self: center;
  padding: 2rem var(--pad) 5rem;
  max-width: 44rem;
}
.lost h1 {
  margin: 0 0 1rem;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--paper-bright);
}
.lost p { color: var(--on-dark-soft); font-size: 1.1875rem; max-width: 40ch; }

/* ---------- Enhancements ----------
   Everything below is progressive: older browsers, no-JS and reduced-motion users get the
   same content without the effects. */

p, li { text-wrap: pretty; }
::selection { background: var(--torch); color: var(--ink); }
html { scrollbar-color: var(--scroll-thumb) var(--night); }

/* The folder slides up over the house as you scroll. */
@media (min-height: 34rem) {
  .hero--stack { position: sticky; top: 0; }
}

/* Torchlight sheen on buttons, following the pointer. */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(9rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 250, 235, 0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.btn:hover::before { opacity: 1; }
.btn--ghost::before { background: radial-gradient(9rem circle at var(--mx, 50%) var(--my, 50%), rgba(242, 212, 140, 0.22), transparent 70%); }

/* Tabs: the title slides in when the folder is pinned; a red thread tracks reading progress. */
.tabs__mark {
  flex: none;
  align-self: center;
  max-width: 0;
  margin: 0 0 0.2rem;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  font-family: var(--font-type);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.35s ease, visibility 0s linear 0.35s;
}
.tabs__mark img { display: block; width: auto; height: 2.15rem; }
[data-theme="mansion"] .tabs__mark img { filter: invert(0.9) sepia(0.15); }
.tabs.is-stuck .tabs__mark {
  max-width: 10rem;
  margin-right: 1rem;
  opacity: 1;
  visibility: visible;
  transition: max-width 0.35s ease, opacity 0.25s ease 0.1s, margin 0.35s ease, visibility 0s;
}
@media (max-width: 52em) {
  .tabs__mark { display: none; }
}

@supports (animation-timeline: scroll()) {
  .tabs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--stamp);
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: thread linear both;
    animation-timeline: scroll(root);
  }
  .tabs.is-stuck::after { opacity: 0.8; }
  @keyframes thread { to { transform: scaleX(1); } }
}

/* A sixth file, withheld. */
.redact {
  display: inline-block;
  height: 0.85em;
  vertical-align: -0.08em;
  background: var(--redact);
  box-shadow: inset 0 0 0 1px rgb(var(--text-rgb) / 0.1);
  border-radius: 1px;
}
.redact--name { width: 9.5ch; height: 0.8em; }
.redact--field { width: 5.5ch; margin-left: 0.2rem; }
.dossier--redacted > p:last-child {
  font-family: var(--font-type);
  font-size: clamp(1.1875rem, 2vw, 1.375rem);
  line-height: 1.4;
  color: var(--text-soft);
}

/* Copyable text blocks. */
[data-copy] { display: none; }
.io [data-copy] { display: inline-flex; }
[data-copy].is-done { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }

.snippet {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--raised);
  border: 1px dashed rgb(var(--text-rgb) / 0.35);
  max-width: 62ch;
}
.snippet p { margin: 0; flex: 1; font-size: 0.9375rem; overflow-wrap: anywhere; }
.snippet .btn { flex: none; }

.copy-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: 62ch;
}
.copy-head h3 { margin-bottom: 0.5rem; }
.factcard .copy-row { display: flex; justify-content: flex-end; margin: 0 0 0.75rem; }
.factcard .copy-row .btn { width: auto; }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 60;
  padding: 0.7rem 1.1rem;
  font-family: var(--font-type);
  font-size: 0.9375rem;
  color: var(--paper);
  background: var(--ink);
  border-radius: 3px;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0.75rem);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { visibility: hidden; }

/* Ambient sound toggle: floats over the page once an audio file exists. */
.sound {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.95rem 0.45rem 0.8rem;
  font-family: var(--font-type);
  font-size: 0.875rem;
  color: var(--paper);
  background: rgba(19, 23, 20, 0.8);
  border: 1px solid rgba(239, 231, 209, 0.25);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.sound:hover { border-color: rgba(239, 231, 209, 0.5); }
.sound { transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s, border-color 0.15s ease; }
/* Out of the way once you're reading, unless it's playing. */
.is-past-hero .sound[aria-pressed="false"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.9rem; }
.sound__bars i {
  display: block;
  width: 3px;
  height: 30%;
  background: currentColor;
  border-radius: 1px;
}
.sound[aria-pressed="true"] .sound__bars i { background: var(--torch); height: 100%; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { height: 55%; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { height: 80%; }

/* Hero status line for the overheating torch. */
.hero__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.hero__foot p { margin: 0; }
/* Keep clear of the floating sound toggle when it's showing. */
@media (min-width: 40em) {
  body:has(.sound:not([hidden])) .hero__foot { padding-right: max(var(--pad), 10rem); }
}
@media (max-width: 39.99em) {
  body:has(.sound:not([hidden])) .hero__foot { padding-bottom: 4.5rem; }
}
@media (hover: none) {
  .hero__status { display: none; }
}
body:has(.sound:not([hidden])) .toast { bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3.5rem)); }
.hero__status {
  font-family: var(--font-type);
  color: var(--torch);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero__status.is-shown { opacity: 1; transition-delay: 0.5s; }

/* Lightbox opens and closes rather than popping. */
.lightbox {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease, overlay 0.25s ease allow-discrete, display 0.25s ease allow-discrete;
}
.lightbox[open] { opacity: 1; transform: none; }
@starting-style {
  .lightbox[open] { opacity: 0; transform: scale(0.97); }
}
.lightbox::backdrop {
  background: rgba(12, 14, 13, 0);
  transition: background 0.25s ease, overlay 0.25s ease allow-discrete, display 0.25s ease allow-discrete;
}
.lightbox[open]::backdrop { background: rgba(12, 14, 13, 0.93); }
@starting-style {
  .lightbox[open]::backdrop { background: rgba(12, 14, 13, 0); }
}
.lightbox img.is-from-right { animation: slide-from-right 0.3s ease both; }
.lightbox img.is-from-left { animation: slide-from-left 0.3s ease both; }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(2rem); } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-2rem); } }

/* Moving between the home page and the press kit cross-fades, with the wordmark held in place. */
@view-transition { navigation: auto; }
.topbar .wordmark { view-transition-name: wordmark; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; }

/* ---------- The light switch ---------- */

.hero__switch-btn {
  position: absolute;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.hero__switch-btn:focus-visible { outline: 2px solid var(--torch); outline-offset: 4px; }
@media (max-width: 47.99em) {
  .hero__switch-btn { display: none; }
}

.hero__roomlight {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 70% 78% at 60% -8%,
    rgba(255, 221, 160, 0.34),
    rgba(255, 221, 160, 0.1) 50%,
    rgba(255, 221, 160, 0) 78%);
  transition: opacity 1.4s ease;
}
.hero.is-lit .hero__roomlight { opacity: 1; transition-duration: 0.2s; }
.hero.is-lit .hero__dark { opacity: 0.18; transition-duration: 0.2s; }

/* ---------- Pulses: the house's lights, simulated ---------- */

/* Pure red: the house floods with red light, breathing slowly, then lets go. */
.hero__red,
.hero__redglow,
.hero__pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.hero__red {
  z-index: -3;
  background: #b3140f;
  mix-blend-mode: color;
  transition: opacity 1.1s ease;
}
.hero__redglow {
  z-index: -3;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 70% 80% at 62% -5%,
    rgba(200, 30, 22, 0.3),
    rgba(120, 10, 8, 0.12) 55%,
    rgba(70, 5, 5, 0.06) 100%);
  transition: opacity 1.1s ease;
}
.hero.is-red .hero__red { opacity: 0.9; }
.hero.is-red .hero__redglow { opacity: 1; }
.hero.is-red .hero__dark { opacity: 0.78; transition-duration: 1.1s; }

/* Blackout: a dip, then the dark, then the light slowly comes back. */
.hero__pulse {
  z-index: -2;
  background: var(--night);
  transition: opacity 1.4s ease;
}
.hero.is-warn .hero__pulse { opacity: 0.5; transition-duration: 0.25s; }
.hero.is-blackout .hero__pulse { opacity: 0.97; transition-duration: 0.5s; }

/* The pinned hero only lives as long as its wrapper, so it can never reappear over the footer. */
.stack { position: relative; }

body:has(.lightbox[open]) { overflow: hidden; }
@media (max-width: 30em) {
  .lightbox__bar { display: grid; grid-template-columns: 1fr 1fr; }
  .lightbox__count { grid-column: 1; grid-row: 1; }
  .lightbox__bar [data-close] { grid-column: 2; grid-row: 1; justify-self: end; }
  .lightbox__bar [data-prev] { grid-column: 1; grid-row: 2; }
  .lightbox__bar [data-next] { grid-column: 2; grid-row: 2; }
  .lightbox__bar [data-original] { display: none; }
}
.toast { border: 1px solid rgba(239, 231, 209, 0.16); }

/* ---------- News from Steam ---------- */

.news-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}
.news-item {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.35rem 1.4rem;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--text);
}
.news-item time { font-size: 0.875rem; color: var(--text-soft); }
.news-item h3 { margin: 0.35rem 0 0.6rem; font-size: 1.25rem; line-height: 1.25; }
.news-item h3 a { text-decoration: none; }
.news-item h3 a:hover { text-decoration: underline; }
.news-item p { margin: 0; font-size: 0.9375rem; }
.news-more { margin: 1.5rem 0 0; }

/* ---------- Questions ---------- */

.faq {
  max-width: 52rem;
  margin-top: 1.75rem;
  border-bottom: 1px solid var(--rule);
}
.faq details { border-top: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-type);
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-soft);
  transition: transform 0.25s ease;
}
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.faq details > p { margin: 0 0 1.25rem; max-width: 62ch; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease, content-visibility 0.3s ease allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* Anything that points at the Discord stays hidden until it has a real invite link. */
.needs-discord:has([data-discord][href="#"]) { display: none; }

/* ---------- Social links ----------
   Each platform's official single-colour icon goes in assets/icons/<name>.svg. The icon is used
   as a mask, so it takes on whatever colour the surrounding text is: the site's near-black on
   paper, cream on the dark house. Until a file exists, the platform's name shows instead. */
.social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
}
.social__icon {
  display: none;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.social.has-icon .social__icon { display: block; }
.social--youtube { --icon: url("../icons/youtube.svg"); }
.social--tiktok { --icon: url("../icons/tiktok.svg"); }
.social--instagram { --icon: url("../icons/instagram.svg"); }
.social--x { --icon: url("../icons/x.svg"); }
.social--reddit { --icon: url("../icons/reddit.svg"); }

/* Hero: a quiet row under the buttons. Icons only once they exist, in cream. */
.hero__follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin: 1.2rem 0 0;
  font-size: 0.9375rem;
  color: var(--on-dark-soft);
}
.hero__follow .social { color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(239, 231, 209, 0.4); text-underline-offset: 0.18em; }
.hero__follow .social:hover { color: var(--torch); }
.hero__follow .social.has-icon { padding: 0.25rem; text-decoration: none; }

/* Studio section: icon buttons in the house's dark colour, like stamps on the page. */
.follow__links .social {
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-type);
  font-size: 0.9375rem;
  color: var(--social-ink, var(--night));
  text-decoration: none;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.follow__links .social:hover { background: var(--social-ink, var(--night)); color: var(--sheet); transform: translateY(-1px); }
.follow__links .social.has-icon { padding: 0.5rem; }
.follow__links .social.has-icon .social__icon { width: 1.4rem; height: 1.4rem; }
[data-theme="mansion"] { --social-ink: var(--text); }

/* With an icon in place, the name is kept for screen readers only. */
.hero__follow .social.has-icon .social__label,
.follow__links .social.has-icon .social__label {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Footer: icon and name together, in cream. */
.site-footer .social .social__icon { width: 1.1rem; height: 1.1rem; }

.follow {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px dashed rgb(var(--text-rgb) / 0.3);
}
.follow h3 { margin-top: 0; }
.follow__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.community {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px dashed rgb(var(--text-rgb) / 0.3);
}
.community h3 { margin-top: 0; }

/* ---------- Key request form ---------- */

.keyform { margin: 0.75rem 0 0.5rem; }
.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
}
.field label { font-size: 0.875rem; color: var(--text-soft); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--field);
  border: 1px solid rgb(var(--text-rgb) / 0.4);
  border-radius: 2px;
}
.field textarea { resize: vertical; min-height: 5rem; }
.field select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--text); }
.field [aria-invalid="true"] { border-color: var(--stamp); box-shadow: inset 0 0 0 1px var(--stamp); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.keyform__status { min-height: 1.5em; margin: 0 0 0.5rem; font-size: 0.9375rem; }
.keyform__status.is-error { color: var(--stamp); }
.keyform__note { margin: 0 0 1rem; font-size: 0.8125rem; color: var(--text-soft); }
.keyform[data-state="sent"] .field,
.keyform[data-state="sent"] .field-row,
.keyform[data-state="sent"] button { display: none; }
.keyform[data-state="sent"] .keyform__status { font-family: var(--font-type); font-size: 1.125rem; }

/* ---------- Mobile wishlist bar ---------- */

.mobile-cta { display: none; }
@media (max-width: 51.99em) {
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    padding: 0.7rem max(1rem, env(safe-area-inset-right)) calc(0.7rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: rgba(19, 23, 20, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(239, 231, 209, 0.14);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .mobile-cta .btn { width: 100%; }
  body.is-past-hero .mobile-cta { transform: none; visibility: visible; transition: transform 0.3s ease, visibility 0s; }
  body.is-past-hero { padding-bottom: 4.6rem; }
  body.is-past-hero .sound { bottom: calc(5.1rem + env(safe-area-inset-bottom)); }
  body.is-past-hero .toast,
  body.is-past-hero:has(.sound:not([hidden])) .toast { bottom: calc(5.6rem + env(safe-area-inset-bottom)); }
}

/* ---------- 404 ---------- */

.lost { --bx: 62%; --by: 48%; }

/* ---------- Print (mainly the press kit) ---------- */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .skip, .topbar, .hero__actions, .tabs, .site-footer, .toast, .sound, .mobile-cta, .lightbox, [data-copy], .press-hero::after, .sheet::before { display: none !important; }
  .press-hero { background: none; color: #000; }
  .press-hero h1, .press-hero p { color: #000; }
  .press-hero__body { padding: 0 0 1rem; }
  .folder { background: none; box-shadow: none; padding: 0; }
  .sheet { background: none; box-shadow: none; }
  .page { padding: 0; background: none; box-shadow: none; }
  .page + .page { margin-top: 1.5rem; }
  .press-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .factcard, .quote { box-shadow: none; background: none; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- Motion (only when the visitor hasn't asked for less) ---------- */

@media (prefers-reduced-motion: no-preference) {

  /* Load: the title fades up out of the dark, then the torchlight rises and settles into place. */
  .motion .hero__title,
  .motion .hero__logo { animation: title-in 1.1s cubic-bezier(0.2, 0.6, 0.2, 1) 0.1s both; }
  .motion .hero__lede,
  .motion .hero__tagline,
  .motion .hero__actions { animation: rise-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .motion .hero__lede { animation-delay: 0.45s; }
  .motion .hero__tagline { animation-delay: 0.55s; }
  .motion .hero__actions { animation-delay: 0.65s; }
  .motion .hero__follow { animation: rise-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s both; }
  .motion .hero__blackout { animation: light-rise 1.6s ease-out 0.3s both; }

  @keyframes title-in {
    from { opacity: 0; transform: translateY(0.35rem); filter: blur(4px); }
  }
  @keyframes rise-in { from { opacity: 0; transform: translateY(0.6rem); } }
  @keyframes light-rise {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  /* The bulb gives out a moment after the switch is flicked. */
  .hero.is-dying .hero__roomlight { animation: bulb-dying 0.8s steps(1, end) both; }
  @keyframes bulb-dying {
    0% { opacity: 1; }
    22% { opacity: 0.35; }
    32% { opacity: 1; }
    58% { opacity: 0.2; }
    70%, 100% { opacity: 0.85; }
  }

  .hero.is-red .hero__redglow { animation: red-breathe 2.8s ease-in-out infinite alternate; }
  @keyframes red-breathe {
    from { opacity: 0.45; }
    to { opacity: 1; }
  }

  /* Grain jitters like film. */
  .motion .hero::after { animation: grain 0.9s steps(5) infinite; }
  @keyframes grain {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-37px, 22px); }
    40% { transform: translate(28px, -41px); }
    60% { transform: translate(-19px, -13px); }
    80% { transform: translate(44px, 31px); }
    100% { transform: translate(0, 0); }
  }

  /* Hold the torch on too long and it overheats. */
  .hero.is-overheating .hero__cut { animation: overheat 2.4s steps(1, end) both; }
  @keyframes overheat {
    0% { opacity: 0; }
    6% { opacity: 0.55; }
    9% { opacity: 0; }
    15% { opacity: 0.75; }
    18% { opacity: 0.2; }
    24% { opacity: 0.92; }
    72% { opacity: 0.92; }
    76% { opacity: 0.4; }
    80% { opacity: 0.92; }
    86%, 100% { opacity: 0; }
  }

  /* The house recedes as the folder comes up over it. */
  @supports (animation-timeline: scroll()) {
    @media (min-height: 34rem) {
      .hero--stack .hero__body,
      .hero--stack .topbar {
        animation: recede linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100vh;
      }
      @keyframes recede { to { opacity: 0.12; transform: translateY(-7vh) scale(0.97); } }
    }
  }

  /* The release stamp lands when it comes into view. */
  .io .stamp { opacity: 0; }
  .io .stamp.is-in { animation: stamp 0.45s cubic-bezier(0.25, 1.5, 0.45, 1) both; }
  @keyframes stamp {
    0% { opacity: 0; transform: rotate(-11deg) scale(1.9); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: rotate(-3.5deg) scale(1); }
  }

  /* Screenshots develop like prints. */
  .io .shot img {
    transition:
      filter 1.6s cubic-bezier(0.2, 0.6, 0.2, 1),
      opacity 1.1s ease,
      transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .io .shot:not(.is-in) img {
    opacity: 0.45;
    filter: brightness(2.2) contrast(0.45) sepia(0.7) blur(8px);
  }
  .io .dossier:nth-child(even) .shot img { transition-delay: 0.15s, 0.15s, 0s; }
  .shot__open:hover img { transform: scale(1.035); }

  /* So do the evidence photo and the polaroids, one after another along the string. */
  .io [data-photo] img {
    transition:
      filter 1.8s cubic-bezier(0.2, 0.6, 0.2, 1),
      opacity 1.2s ease;
  }
  .io [data-photo]:not(.is-in) img {
    opacity: 0.45;
    filter: brightness(2.2) contrast(0.45) sepia(0.7) blur(8px);
  }
  .io .steps li:nth-child(2) .polaroid img { transition-delay: 0.25s; }
  .io .steps li:nth-child(3) .polaroid img { transition-delay: 0.5s; }
  .io .steps li:nth-child(4) .polaroid img { transition-delay: 0.75s; }

  /* The sound bars move while sound is on. */
  .sound[aria-pressed="true"] .sound__bars i { animation: bars 0.9s ease-in-out infinite alternate; }
  .sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: -0.3s; }
  .sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: -0.6s; }
  @keyframes bars { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
  .sound__bars i { transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 60em) {
  .overview,
  .creators,
  .studio,
  .press-layout { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-list { grid-template-columns: minmax(0, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 40em) {
  .steps,
  .features,
  .dossiers { grid-template-columns: minmax(0, 1fr); }
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dossier--more { padding-top: 1.5rem; border-top: 1px solid var(--rule); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__actions .btn { flex: 1 1 100%; }
  .facts > div { grid-template-columns: 5.25rem minmax(0, 1fr); }
  /* One step per row: the polaroid sits small to the right of the text. */
  .steps li:has(> .polaroid) { display: flow-root; }
  .steps li:has(> .polaroid)::before { float: left; }
  .steps li:has(> .polaroid) h3 { clear: left; }
  .polaroid {
    float: right;
    width: 7.5rem;
    margin: 0.15rem 0.2rem 0.75rem 1.25rem;
    padding: 0.35rem 0.35rem 1.15rem;
  }
  .evidence { margin-left: 0.25rem; }
}

/* ---------- Motion ---------- */

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