/* GRIN — site styles.
   Palette and type follow BRIEF.md: the game's own UI colours, "aged paper,
   ink, candlelight and a single blood-rust accent used sparingly".
   No neon, no purple, no pure white, no pure red. */

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

:root {
  --ink: #08080A;
  --panel: #0E0D0F;
  --panel-2: #1A181A;
  --line: #463E36;
  --bone: #E2D8C4;
  --bone-dim: #968C7C;
  --bone-faint: #8A8072;         /* captions, meta: 5.2:1 on ink (was #605A52, 2.9:1) */
  --bone-hi: #EBE3D2;            /* text on rust: 4.9:1 (bone alone is 4.4:1) */
  --rust: #B03428;
  --rust-deep: #782822;
  --candle: #C4A062;
  --candle-rgb: 196, 160, 98;
  --radius: 6px;                 /* the game's corner */
  --serif: 'Merriweather', Georgia, serif;
  --sans: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --type: 'Special Elite', 'Courier New', monospace;  /* lore and file labels only */
  /* one type scale for the whole page */
  --fs-h2: clamp(32px, 4.4vw, 50px);
  --fs-h3: clamp(23px, 2.6vw, 30px);
  --fs-card: 21px;
  --fs-lead: clamp(16px, 1.5vw, 17.5px);
  --fs-small: 14px;
  --fs-meta: 12px;
  --paper: linear-gradient(160deg, #E2D8C4, #D3C6AB 60%, #C8B996);
  --paper-ink: #2A221B;
  --nav-h: 64px;
  --gutter: 20px;
  --section-y: clamp(40px, 5vw, 60px);
  --px: 0px;                     /* parallax offsets, set by grin.js */
  --py: 0px;
}

html { scroll-behavior: smooth; background: var(--ink); scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  min-height: 100vh;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: var(--bone); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: var(--radius); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--rust); color: var(--bone); border-radius: var(--radius); text-decoration: none; font-weight: 700; }
.skip:focus { top: 12px; }
.ico { width: 20px; height: 20px; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─── background: parallax scene, fog, vignette, grain ─────────── */

.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--ink); pointer-events: none; }
.bg-layer { position: absolute; object-fit: cover; will-change: transform; transition: opacity 0.8s ease; }
.bg:not(.on) .bg-layer { opacity: 0; }
.bg-far {
  inset: -6%; width: 112%; height: 112%;
  opacity: 0.22; filter: saturate(0.7) brightness(0.5) blur(2px);
  transform: translate3d(calc(var(--px) * -0.5), calc(var(--py) * -0.5), 0) scale(1.04);
}
.bg-face {
  right: -4%; top: 4%; width: min(56vw, 760px); height: auto; aspect-ratio: 845 / 842;
  opacity: 0.1; filter: saturate(0.8) brightness(0.8);
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  transform: translate3d(calc(var(--px) * -1.2), calc(var(--py) * -1.2), 0);
}
.bg-fog {
  position: absolute; inset: -30%;
  background:
    radial-gradient(38% 26% at 30% 60%, rgba(226, 216, 196, 0.06), transparent 70%),
    radial-gradient(30% 22% at 70% 40%, rgba(226, 216, 196, 0.04), transparent 70%);
  will-change: transform;
}
.fog-a { animation: drift-a 48s ease-in-out infinite alternate; }
@keyframes drift-a { from { transform: translate3d(-6%, 2%, 0); } to { transform: translate3d(6%, -3%, 0); } }
@keyframes drift-b { from { transform: translate3d(5%, -2%, 0) scale(1.1); } to { transform: translate3d(-7%, 3%, 0) scale(1); } }
.bg-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 35%, rgba(8, 8, 10, 0.92) 100%),
    linear-gradient(to bottom, rgba(8, 8, 10, 0.3), rgba(8, 8, 10, 0.6));
  animation: vignette-breathe 14s ease-in-out infinite;
}
@keyframes vignette-breathe { 50% { opacity: 0.86; } }
/* Film grain at ~4% over everything, shifted in steps like real film. */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url('/media/bg/grain.webp'); background-size: 220px 220px;
  opacity: 0.04; mix-blend-mode: overlay;
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-6%, 4%); } 33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, 8%); } 67% { transform: translate(8%, 2%); } 83% { transform: translate(-7%, -5%); }
}

/* ─── header ────────────────────────────────────────────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(to bottom, rgba(8, 8, 10, 0.7), rgba(8, 8, 10, 0));
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.nav.scrolled { background: rgba(8, 8, 10, 0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.nav-logo { display: block; width: 84px; }
.nav-logo img { width: 100%; height: auto; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav-links > a:not(.btn-play) {
  padding: 8px 12px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bone-dim); text-decoration: none; transition: color 0.2s;
}
.nav-links > a:not(.btn-play):hover { color: var(--bone); }
.nav-links .btn-play { margin-left: 10px; }
.nav-toggle, .sound-toggle { width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--line); align-items: center; justify-content: center; color: var(--bone); background: rgba(8, 8, 10, 0.5); }
.nav-toggle { display: none; }
.sound-toggle { display: inline-flex; margin-left: auto; order: 3; }
.sound-toggle + .nav-toggle { margin-left: 8px; }
.sound-toggle .ico-on, .sound-toggle[aria-pressed="true"] .ico-off { display: none; }
.sound-toggle[aria-pressed="true"] .ico-on { display: block; }
.sound-toggle[aria-pressed="true"] { border-color: rgba(var(--candle-rgb), 0.7); }
@media (min-width: 901px) { .sound-toggle { order: 4; margin-left: 10px; } }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; order: 4; margin-left: auto; }
  .sound-toggle ~ .nav-toggle { margin-left: 8px; }
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 18px;
    background: rgba(8, 8, 10, 0.97); border-bottom: 1px solid var(--line);
  }
  .nav.open { background: rgba(8, 8, 10, 0.97); }
  .nav.open .nav-links { display: flex; }
  .nav-links > a:not(.btn-play) { padding: 14px 8px; font-size: 14px; border-bottom: 1px solid rgba(70, 62, 54, 0.5); }
  .nav-links .btn-play { margin: 14px 0 0; justify-content: center; }
}

/* ─── buttons ───────────────────────────────────────────────── */

.btn-play {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px; border-radius: var(--radius);
  background: var(--rust); color: var(--bone-hi);
  font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border: 1px solid rgba(226, 216, 196, 0.12);
  box-shadow: 0 10px 30px rgba(120, 40, 34, 0.35);
  transition: background 0.2s, box-shadow 0.2s;
}
.btn-play:hover { background: var(--rust-deep); color: var(--bone-hi); box-shadow: 0 10px 34px rgba(120, 40, 34, 0.6), 0 0 0 1px rgba(var(--candle-rgb), 0.25); }
.btn-play:active { background: var(--rust-deep); transform: translateY(1px); }
.ico-play { width: 16px; height: 16px; }
.btn-small { padding: 9px 16px; font-size: 12.5px; gap: 8px; box-shadow: none; }
.btn-small .ico-play { width: 12px; height: 12px; }
/* Heartbeat: a resting 72 bpm "lub-dub", scale 1 → 1.03 → 1. */
.btn-hero { animation: heartbeat 0.833s ease-in-out infinite; transform-origin: center; }
@keyframes heartbeat {
  0% { transform: scale(1); } 12% { transform: scale(1.03); } 24% { transform: scale(1); }
  36% { transform: scale(1.03); } 52% { transform: scale(1); } 100% { transform: scale(1); }
}
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 24px; border-radius: var(--radius);
  border: 1px solid rgba(226, 216, 196, 0.28); color: var(--bone);
  font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  background: rgba(14, 13, 15, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.2s, background 0.2s;
}
.btn-ghost .ico { width: 15px; height: 15px; color: var(--bone-dim); }
.btn-ghost .ico-play { width: 13px; height: 13px; color: var(--bone); }
.btn-ghost:hover { border-color: rgba(var(--candle-rgb), 0.7); background: rgba(26, 24, 26, 0.75); }
.btn-text {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim);
}
.btn-text .ico { width: 15px; height: 15px; }
.btn-text:hover { color: var(--bone); }

/* ─── hero ──────────────────────────────────────────────────── */

.hero {
  position: relative; min-height: min(92svh, 880px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--nav-h) + 28px) var(--gutter) 108px; isolation: isolate; overflow: hidden;
  background: var(--ink);
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media picture, .hero-video {
  position: absolute; inset: -3%; width: 106%; height: 106%;
  transform: translate3d(calc(var(--px) * -0.35), calc(var(--py) * -0.35), 0);
}
/* The video sits exactly over the poster and is fully opaque once playing,
   so no still frame shows through; the dimming is brightness, not opacity. */
.hero-media img { width: 100%; height: 100%; }
.hero-media img, .hero-video { object-fit: cover; }
.hero-poster, .hero-video { filter: saturate(0.9) brightness(0.72); }
.hero-video { max-width: none; opacity: 0; transition: opacity 1.4s ease; }
.hero-video.on { opacity: 1; }
/* Bottom-to-top ink so the copy reads and the hero melts into the page. */
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 44% at 50% 46%, rgba(8, 8, 10, 0.45), transparent 75%),
    linear-gradient(to top, var(--ink) 0%, rgba(8, 8, 10, 0.78) 16%, rgba(8, 8, 10, 0.18) 50%, rgba(8, 8, 10, 0.42) 100%);
}
.hero-inner { max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.hero-logo { width: min(460px, 76vw); line-height: 0; }
.logo-stack { position: relative; display: block; }
.logo-stack img { width: 100%; height: auto; }
.logo-stack picture:last-child { position: absolute; inset: 0; }
/* The game's live logo (js/hero-logo.js): its canvas is the hero width plus
   the logo's 24 px glow margin, 420 x 237 logo units, so the box is reserved
   at that height before the canvas draws. */
.logo-live { display: none; }
html.hero-live .logo-live { display: block; min-height: calc(min(460px, 76vw) * 0.5643 + 20.9px); }
html.hero-live .logo-stack { display: none; }
/* Intro: the wordmark fades and settles, the smile follows (a top-down
   reveal of the unmodified PNG), then the pupils light up last. */
@property --reveal { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.logo-base {
  animation: logo-settle 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both, logo-reveal 1.9s ease-out both;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--reveal), transparent calc(var(--reveal) + 18%));
  mask-image: linear-gradient(to bottom, #000 var(--reveal), transparent calc(var(--reveal) + 18%));
}
@keyframes logo-settle { from { opacity: 0; transform: translateY(-14px) scale(1.03); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes logo-reveal { from { --reveal: -18%; } 55% { --reveal: 55%; } to { --reveal: 100%; } }
.logo-eyes { opacity: 0; animation: eyes-on 0.9s ease-out 2.5s forwards, eyes-flicker 7s steps(1) 3.6s infinite; }
@keyframes eyes-on { to { opacity: 1; } }
@keyframes eyes-flicker { 0%, 100% { opacity: 1; } 91% { opacity: 1; } 92% { opacity: 0.72; } 93% { opacity: 1; } 95% { opacity: 0.86; } 96% { opacity: 1; } }
.tagline {
  margin-top: 6px;
  font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.4vw, 22px); color: var(--bone-dim);
  animation: fade-up 0.6s ease-out 0.25s both;
}
.hero-line {
  margin-top: 14px; font-family: var(--serif); font-weight: 900; font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.2; letter-spacing: -0.01em; color: var(--bone); text-wrap: balance;
  animation: fade-up 0.6s ease-out 0.35s both;
}
.hero-intro { margin-top: 10px; max-width: 46ch; font-size: var(--fs-lead); color: var(--bone-dim); text-wrap: balance; animation: fade-up 0.6s ease-out 0.4s both; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; animation: fade-up 0.5s ease-out 0.3s both; }
.trust {
  margin-top: 20px; text-wrap: balance; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--bone-dim);
  animation: fade-up 0.6s ease-out 0.5s both;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .hero-actions { flex-direction: column; align-items: stretch; width: min(100%, 340px); }
  .hero-actions > * { justify-content: center; }
}
@media (max-width: 360px) {
  .btn-play, .btn-ghost { padding-left: 16px; padding-right: 16px; letter-spacing: 0.05em; font-size: 14.5px; gap: 10px; }
}

/* live stats, along the bottom of the hero */
.stats {
  position: absolute; left: 0; right: 0; bottom: 30px;
  display: flex; justify-content: center; gap: clamp(28px, 6vw, 64px); list-style: none;
  animation: fade-up 0.8s ease-out both;
}
.stats li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stats strong { font-family: var(--serif); font-weight: 900; font-size: clamp(22px, 3vw, 28px); line-height: 1.1; color: var(--bone); }
.stats span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); }
.stats .live span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 0 rgba(176, 52, 40, 0.6); animation: live 2s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(176, 52, 40, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(176, 52, 40, 0); } }

/* ─── sections ──────────────────────────────────────────────── */

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; position: relative; }
.section-head { margin-bottom: 28px; }
.section-title { font-family: var(--serif); font-weight: 900; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em; color: var(--bone); }
.section-title em { font-style: normal; color: var(--rust); }
.section-head .lead { margin-top: 14px; }
.lead { max-width: 60ch; font-size: var(--fs-lead); color: var(--bone-dim); }
.sub-title { font-family: var(--serif); font-weight: 900; font-size: var(--fs-h3); line-height: 1.15; }
.count { font-family: var(--sans); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-faint); }
.sub-title .count, .group-title .count { white-space: nowrap; }
.sub-title .count { margin-left: 10px; vertical-align: middle; }
.eyebrow { font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--candle); }
.status { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.more-row { margin-top: 24px; text-align: center; }
.text-link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 0; min-height: 32px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--candle); text-decoration: none;
}
.text-link .ico-play { width: 11px; height: 11px; }
.text-link:hover { color: var(--bone); }

/* shared media-card bits */
.card { position: relative; display: flex; flex-direction: column; text-align: left; width: 100%; }
.media { position: relative; display: block; overflow: hidden; background: #050506; border-radius: var(--radius); border: 1px solid var(--line); transition: border-color 0.25s ease; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media video { position: absolute; inset: 0; }
.media img { filter: saturate(0.85) brightness(0.95); transition: filter 0.3s ease; }
button.card:hover .media, button.card:focus-visible .media { border-color: rgba(var(--candle-rgb), 0.65); }
button.card:hover .media img, button.card:focus-visible .media img { filter: none; }
.card:focus-visible { outline: none; }
.card:focus-visible .media { outline: 2px solid var(--rust); outline-offset: 3px; }
.card-caption { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.title { font-weight: 600; font-size: var(--fs-small); line-height: 1.35; color: var(--bone); }
.play-dot {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(8, 8, 10, 0.6); border: 1px solid rgba(226, 216, 196, 0.35); color: var(--bone);
  transition: opacity 0.2s, background 0.2s;
}
.play-dot .ico { width: 18px; height: 18px; margin-left: 3px; }
button.card:hover .play-dot { background: var(--rust); border-color: var(--rust); }
.card.previewing .play-dot, .card.previewing .play-badge { opacity: 0; }
/* Shorts keep their cover text clear: a small play badge in the corner. */
.play-badge {
  position: absolute; left: 8px; bottom: 8px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(8, 8, 10, 0.72); border: 1px solid rgba(226, 216, 196, 0.3); color: var(--bone);
  transition: background 0.2s, opacity 0.2s;
}
.play-badge .ico { width: 11px; height: 11px; margin-left: 2px; }
button.card:hover .play-badge { background: var(--rust); border-color: var(--rust); }

/* coming soon: a small quiet slot with consistent status text, never a big
   empty frame and never clickable */
.soon-list { list-style: none; display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.soon-slot { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border: 1px dashed rgba(70, 62, 54, 0.9); border-radius: var(--radius); }
.soon-frame {
  flex-shrink: 0; width: 26px; aspect-ratio: 9 / 16; border-radius: 3px; border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, rgba(70, 62, 54, 0.35) 0 1px, transparent 1px 5px), var(--panel);
}
.soon-frame.wide { width: 56px; aspect-ratio: 16 / 9; }
.soon-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.soon-text .title { font-size: 13.5px; color: var(--bone-dim); }
.soon-title { margin: 30px 0 14px; }

/* ─── watch ─────────────────────────────────────────────────── */

.watch-top { display: grid; gap: 22px; }
@media (min-width: 960px) { .watch-top.has-side { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 24px; } }
.featured .media { aspect-ratio: 16 / 9; }
.featured .title { font-family: var(--serif); font-weight: 900; font-size: var(--fs-h3); line-height: 1.2; }
.play-lg { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: rgba(8, 8, 10, 0.5); }
.play-lg .ico { width: 26px; height: 26px; }
/* The lead trailer before it lands: the logo on a dark panel, a label, no play button. */
.lead-soon .media { background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(176, 52, 40, 0.16), transparent 70%), #050506; }
.lead-soon .media img { position: absolute; left: 50%; top: 42%; width: 38%; height: auto; transform: translate(-50%, -50%); object-fit: contain; filter: saturate(0.85) brightness(0.72); }
.lead-status {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%);
  padding: 8px 14px; border: 1px dashed rgba(226, 216, 196, 0.45); border-radius: var(--radius);
  background: rgba(8, 8, 10, 0.62); white-space: nowrap;
}
.lead-status .status { color: var(--bone); }
.side-trailers { display: flex; flex-direction: column; gap: 12px; }
.side-trailers ul { list-style: none; display: grid; gap: 18px; }
.side-trailers .soon-list { gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 600px) and (max-width: 959px) { .side-trailers ul { grid-template-columns: 1fr 1fr; } }
.side .media { aspect-ratio: 16 / 9; }
.side .title { font-size: 15px; }
.side .play-dot { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.side .play-dot .ico { width: 15px; height: 15px; }

.shorts-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin: 44px 0 16px; }
.shorts-row { list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.short .media { aspect-ratio: 9 / 16; }
@media (max-width: 959px) { .shorts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; } }
/* phones: the featured six in one swipeable row */
@media (max-width: 599px) {
  .shorts-row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-padding: 0 var(--gutter);
  }
  .shorts-row::-webkit-scrollbar { display: none; }
  .shorts-row > li { scroll-snap-align: start; }
}
.all-shorts { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(70, 62, 54, 0.6); }
.all-shorts .sub-title { margin-bottom: 18px; }
.shorts-grid { list-style: none; display: grid; gap: 20px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 360px) { .shorts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shorts-grid .title { font-size: 12.5px; } }
@media (min-width: 960px) { .shorts-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px 14px; } .shorts-grid .title { font-size: 13px; } }

/* ─── the game: alternating feature rows ────────────────────── */

.feature-rows { display: grid; gap: clamp(36px, 5vw, 56px); margin-top: clamp(28px, 4vw, 44px); }
.feature { display: grid; gap: 18px; align-items: center; }
@media (min-width: 860px) {
  .feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); }
  .feature:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .feature:nth-child(even) .feature-media { order: 2; }
}
.feature-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: #050506; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-media.native { aspect-ratio: 1714 / 1080; } /* Studio's game view: uncropped, so the HUD stays in */
.feature-text h3 { font-family: var(--serif); font-weight: 900; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; }
.feature-text p { margin-top: 10px; max-width: 46ch; font-size: var(--fs-lead); color: var(--bone-dim); }
.feature-text .extras { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(70, 62, 54, 0.6); font-size: var(--fs-small); color: var(--bone-faint); }

/* Standard / Bodycam / VHS: one big image, three-way switch */
.modes { aspect-ratio: 1714 / 1080; }
.mode-stage, .mode-img { position: absolute; inset: 0; }
.mode-img { opacity: 0; transition: opacity 0.35s ease; }
.mode-img.on { opacity: 1; }
.mode-img picture, .mode-img img { width: 100%; height: 100%; object-fit: cover; }
.mode-tabs {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; display: flex; gap: 2px; padding: 4px;
  border-radius: 999px; background: rgba(8, 8, 10, 0.88); border: 1px solid var(--line);
}
@media (max-width: 400px) { .mode-tabs { left: 8px; bottom: 8px; } .mode-tabs button { padding: 8px 10px !important; letter-spacing: 0.04em; } }
.mode-tabs button { min-height: 36px; padding: 8px 14px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-dim); transition: background 0.2s, color 0.2s; }
.mode-tabs button:hover { color: var(--bone); }
.mode-tabs button[aria-pressed="true"] { background: var(--rust); color: var(--bone-hi); }
html:not(.js) .mode-tabs { display: none; }

/* ─── updates: a short log, newest first ────────────────────── */

.updates { list-style: none; border-top: 1px solid rgba(70, 62, 54, 0.7); }
.update-file { display: grid; gap: 14px; padding: 22px 0; border-bottom: 1px solid rgba(70, 62, 54, 0.7); }
@media (min-width: 760px) { .update-file { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: center; } }
.update-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: #050506; }
.update-media img { width: 100%; height: 100%; object-fit: cover; }
.update-text { display: flex; flex-direction: column; gap: 6px; max-width: 64ch; }
.update-text h3 { font-family: var(--serif); font-weight: 900; font-size: 22px; line-height: 1.2; }
.update-text p:not(.file-meta) { color: var(--bone-dim); }
.update-file:first-child .update-text h3::after { content: 'New'; margin-left: 10px; padding: 2px 8px; border-radius: 3px; vertical-align: 3px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-hi); background: var(--rust); }
.file-meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--type); font-size: 13px; letter-spacing: 0.05em; color: var(--candle); }
.update-text .file-meta { justify-content: flex-start; }
.update-text .file-meta time::before { content: '·'; margin-right: 12px; color: var(--bone-faint); }

/* ─── monsters: taped case-file notes on aged paper ─────────── */

.case-files { display: grid; gap: 30px 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); padding-top: 10px; }
.case-file {
  --tilt: 0deg;
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 24px 22px 20px; border-radius: 2px; color: var(--paper-ink);
  background:
    radial-gradient(ellipse at 18% 12%, rgba(120, 92, 54, 0.2), transparent 55%),
    radial-gradient(ellipse at 85% 92%, rgba(110, 80, 40, 0.22), transparent 50%),
    repeating-linear-gradient(0deg, rgba(90, 70, 40, 0.035) 0 1px, transparent 1px 3px),
    var(--paper);
  box-shadow: 0 1px 0 rgba(255, 248, 230, 0.4) inset, 0 12px 28px rgba(0, 0, 0, 0.55);
  transform: rotate(var(--tilt));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* a strip of tape holding each note up */
.case-file::before {
  content: ''; position: absolute; left: 50%; top: -10px; width: 68px; height: 20px; margin-left: -34px;
  background: rgba(226, 216, 196, 0.36); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transform: rotate(-2deg);
}
.case-file:nth-child(12n+1) { --tilt: -0.6deg; } .case-file:nth-child(12n+2) { --tilt: 0.35deg; } .case-file:nth-child(12n+3) { --tilt: -0.2deg; }
.case-file:nth-child(12n+4) { --tilt: 0.55deg; } .case-file:nth-child(12n+5) { --tilt: -0.45deg; } .case-file:nth-child(12n+6) { --tilt: 0.15deg; }
.case-file:nth-child(12n+7) { --tilt: 0.6deg; } .case-file:nth-child(12n+8) { --tilt: -0.3deg; } .case-file:nth-child(12n+9) { --tilt: 0.25deg; }
.case-file:nth-child(12n+10) { --tilt: -0.55deg; } .case-file:nth-child(12n+11) { --tilt: 0.45deg; } .case-file:nth-child(12n+12) { --tilt: -0.1deg; }
.case-file:hover, .case-file:focus-within { transform: rotate(0deg) translateY(-3px); box-shadow: 0 1px 0 rgba(255, 248, 230, 0.4) inset, 0 18px 36px rgba(0, 0, 0, 0.6); }
.case-file .file-meta { padding-bottom: 8px; border-bottom: 1px dashed rgba(42, 34, 27, 0.35); color: var(--rust-deep); font-size: 12.5px; }
.case-file h3 { margin-top: 10px; font-family: var(--serif); font-weight: 900; font-size: 23px; line-height: 1.15; color: #1C1612; }
.case-file .power { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5A4A3A; }
.case-file .lore { margin-top: 6px; font-family: var(--type); font-size: 14.5px; line-height: 1.6; color: var(--paper-ink); }
.case-file .footage { margin-top: auto; padding-top: 12px; color: var(--rust-deep); }
.case-file .footage:hover { color: #1C1612; }
.swipe-cue { display: none; margin: -14px 0 4px; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-faint); }
@media (max-width: 599px) { .swipe-cue { display: block; } }
.file-portrait { margin: -6px -4px 10px; aspect-ratio: 4 / 5; overflow: hidden; border: 5px solid #EFE7D6; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.file-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* phones: one swipeable row of notes instead of a 12-note stack */
@media (max-width: 599px) {
  .case-files {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 16px var(--gutter) 22px; scroll-padding: 0 var(--gutter);
  }
  .case-files::-webkit-scrollbar { display: none; }
  .case-file { scroll-snap-align: start; }
}

/* ─── grids that never leave a lonely last row (classes from sync.mjs) ── */

.fit { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.fit > * { grid-column: span 6; }
@media (min-width: 600px) {
  .fit > * { grid-column: span 3; }
  .fit > .md-full { grid-column: span 6; }
}
@media (min-width: 960px) {
  .fit > *, .fit > .md-full { grid-column: span 2; }
  .fit > .lg-half { grid-column: span 3; }
  .fit > .lg-full { grid-column: span 6; }
}

/* ─── maps: recovered locations, and the unphotographed records ── */

.map { display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.map .media { aspect-ratio: 16 / 9; border: 0; border-radius: 0; }
.map-text { padding: 14px 18px 18px; }
.map-text .file-meta { justify-content: flex-start; }
.map h3 { margin-top: 2px; font-family: var(--serif); font-weight: 900; font-size: var(--fs-card); line-height: 1.2; }
.map .lore { margin-top: 6px; max-width: 60ch; font-family: var(--type); font-size: 14px; line-height: 1.6; color: var(--bone-dim); }
.records-title { margin: 40px 0 20px; }
.map-records { gap: 30px 22px; padding-top: 10px; }
.map-record {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 24px 24px 18px 40px; border-radius: 2px; color: var(--paper-ink);
  background:
    radial-gradient(circle at 18px 34px, #0E0D0F 0 5px, transparent 6px),
    radial-gradient(circle at 18px calc(100% - 34px), #0E0D0F 0 5px, transparent 6px),
    radial-gradient(ellipse at 80% 15%, rgba(110, 80, 40, 0.26), transparent 55%),
    radial-gradient(ellipse at 10% 95%, rgba(90, 64, 34, 0.28), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(42, 34, 27, 0.09) 27px 28px),
    linear-gradient(165deg, #D8CCB2, #C7B793 65%, #BBA987);
  box-shadow: 0 1px 0 rgba(255, 248, 230, 0.35) inset, inset 0 0 40px rgba(90, 64, 34, 0.25), 0 12px 28px rgba(0, 0, 0, 0.55);
}
/* tape at two corners: a report pinned to the board */
.map-record::before, .map-record::after {
  content: ''; position: absolute; top: -9px; width: 58px; height: 18px;
  background: rgba(226, 216, 196, 0.34); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.map-record::before { left: 14px; transform: rotate(-6deg); }
.map-record::after { right: 14px; transform: rotate(5deg); }
.map-record .file-meta { align-items: center; flex-wrap: wrap; row-gap: 8px; color: var(--rust-deep); font-size: 12.5px; padding-bottom: 8px; border-bottom: 1px solid rgba(42, 34, 27, 0.3); }
.stamp {
  display: inline-block; white-space: nowrap; padding: 3px 8px; border: 1.5px solid rgba(120, 40, 34, 0.75); border-radius: 3px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(120, 40, 34, 0.9); transform: rotate(-3deg);
}
.map-record h3 { margin-top: 8px; font-family: var(--serif); font-weight: 900; font-size: 23px; line-height: 1.15; color: #1C1612; }
.map-record .lore { font-family: var(--type); font-size: 14.5px; line-height: 1.6; }
.record-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(42, 34, 27, 0.35); font-family: var(--type); font-size: 12px; color: #5A4A3A; }

/* ─── gallery: three labelled groups ────────────────────────── */

.gallery-group + .gallery-group { margin-top: 36px; }
.group-title { margin-bottom: 14px; font-family: var(--serif); font-weight: 700; font-size: 20px; }
.group-title .count { margin-left: 8px; vertical-align: 2px; }
.gallery { gap: 10px; }
.gallery > * { grid-column: span 3; }            /* two across on phones */
.gallery > .md-full { grid-column: span 6; }
@media (min-width: 960px) {
  .gallery { gap: 14px; }
  .gallery > *, .gallery > .md-full { grid-column: span 2; }
  .gallery > .lg-half { grid-column: span 3; }
}
/* collapsed: the first 6 only, a plain grid (6 fits 2 and 3 across) */
.gallery:not(.expanded) > .more { display: none; }
.gallery:not(.expanded) > * { grid-column: span 3; }
@media (min-width: 960px) { .gallery:not(.expanded) > * { grid-column: span 2; } }
/* whole images, never cropped: letterboxed in a 16:9 frame */
.shot { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: #050506; cursor: zoom-in; transition: border-color 0.25s; }
.shot picture, .shot img { width: 100%; height: 100%; object-fit: contain; }
.shot img { filter: saturate(0.85) brightness(0.95); transition: filter 0.3s; }
.shot:hover, .shot:focus-visible { border-color: rgba(var(--candle-rgb), 0.65); }
.shot:hover img, .shot:focus-visible img { filter: none; }

/* ─── press kit ─────────────────────────────────────────────── */

.press-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .press-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; } }
.press-block { padding-top: 16px; border-top: 1px solid rgba(70, 62, 54, 0.8); }
.press-block h3 { margin-bottom: 12px; font-family: var(--serif); font-weight: 700; font-size: 19px; }
.press-block > p { color: var(--bone-dim); font-size: 15px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 16px; }
.facts dt { font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-faint); }
.facts dd { font-size: 15px; color: var(--bone); }
.press-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; }
.press-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; font-weight: 600; color: var(--candle); text-decoration: none; }
.press-links a:hover { color: var(--bone); }
.press-links .ico { width: 14px; height: 14px; }
.downloads { list-style: none; display: grid; gap: 4px; }
.downloads a { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid rgba(70, 62, 54, 0.5); text-decoration: none; color: var(--bone); }
.downloads a:hover strong { color: var(--candle); }
.downloads .ico { width: 18px; height: 18px; color: var(--candle); }
.downloads span { display: flex; flex-direction: column; }
.downloads strong { font-size: 15px; font-weight: 600; }
.downloads small { font-size: 13px; color: var(--bone-faint); }
.rules { list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: var(--bone-dim); }
.rules li { padding-left: 16px; position: relative; }
.rules li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 6px; height: 1px; background: var(--candle); }
.swatches { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; font-size: 13.5px; color: var(--bone-dim); }
.swatches li { display: flex; align-items: center; gap: 10px; }
.swatches code { font-size: 12px; color: var(--bone-faint); }
.sw { width: 26px; height: 26px; border-radius: 4px; border: 1px solid rgba(226, 216, 196, 0.25); }
.sw-ink { background: #08080A; } .sw-bone { background: #E2D8C4; } .sw-rust { background: #B03428; } .sw-candle { background: #C4A062; }

/* ─── footer ────────────────────────────────────────────────── */

.footer { margin-top: var(--section-y); border-top: 1px solid var(--line); background: rgba(8, 8, 10, 0.92); }
.footer-top { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 40px; padding-bottom: 28px; }
.footer-logo { display: block; width: 112px; }
.footer-logo img { width: 100%; height: auto; }
.footer-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 18px; padding-bottom: calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(70, 62, 54, 0.5); text-align: center; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none; }
.footer-nav a:hover { color: var(--bone); }
/* Settings / Replay intro sit in the footer row, styled like its links. */
.footer-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.footer-btn:hover { color: var(--bone); }
.footer-btn[hidden] { display: none; }
.footer-legal { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--bone-faint); }
@media (min-width: 960px) {
  .footer-top { flex-direction: row; justify-content: space-between; }
  .footer-bottom { align-items: stretch; text-align: left; }
  .footer-nav { justify-content: flex-start; margin-left: -10px; }
  .footer-legal { flex-direction: row; justify-content: space-between; gap: 24px; }
}

/* Social row and contacts (every page's footer; the 404 page reuses the row). */
.footer-follow { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 18px; padding-bottom: 18px; border-top: 1px solid rgba(70, 62, 54, 0.5); text-align: center; }
.footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; list-style: none; margin: 0; padding: 0; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: var(--radius); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none; transition: color 0.2s; }
.footer-social a:hover { color: var(--bone); }
.footer-social .ico { width: 18px; height: 18px; flex: none; }
.footer-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; font-size: 13px; color: var(--bone-faint); }
.footer-contact a { color: var(--bone-dim); text-decoration: underline; text-decoration-color: rgba(var(--candle-rgb), 0.45); text-underline-offset: 3px; overflow-wrap: anywhere; }
.footer-contact a:hover { color: var(--bone); }
.footer-contact .footer-support { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 4px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--bone); font-weight: 600; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.footer-contact .footer-support:hover { border-color: rgba(var(--candle-rgb), 0.6); color: var(--bone-hi); }
.footer-support .ico { width: 16px; height: 16px; flex: none; color: var(--candle); }
@media (min-width: 960px) {
  .footer-follow { flex-direction: row; justify-content: space-between; text-align: left; }
  .footer-social { flex: 1; justify-content: flex-start; margin-left: -10px; }
  .footer-contact { flex: none; flex-direction: column; align-items: flex-end; }
}
.lost-social { margin-top: 18px; }

/* ─── /socials ──────────────────────────────────────────────── */

.socials-page { padding-top: calc(var(--nav-h) + var(--section-y)); min-height: 70svh; }
.socials-page .section-head .eyebrow { margin-bottom: 10px; }
.social-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2); color: var(--bone); }
.social-mark .ico { width: 28px; height: 28px; }
.social-play {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 22px; margin-bottom: 18px; border-radius: var(--radius);
  border: 1px solid rgba(var(--candle-rgb), 0.45); background: linear-gradient(135deg, rgba(120, 40, 34, 0.22), rgba(14, 13, 15, 0.92) 60%);
}
.social-play h2 { font-family: var(--serif); font-weight: 900; font-size: var(--fs-h3); line-height: 1.15; }
.social-play p { margin-top: 4px; color: var(--bone-dim); }
.social-play .btn-play { align-self: stretch; justify-content: center; padding-left: 18px; padding-right: 18px; white-space: nowrap; }
@media (min-width: 700px) {
  .social-play { flex-direction: row; align-items: center; gap: 20px; padding: 24px 28px; }
  .social-play-text { flex: 1; }
  .social-play .btn-play { align-self: auto; }
}
.social-grid { display: grid; grid-template-columns: 1fr; gap: 14px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .social-grid { grid-template-columns: repeat(4, 1fr); } }
.social-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(14, 13, 15, 0.92);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.social-card:hover { transform: translateY(-2%); border-color: rgba(var(--candle-rgb), 0.5); box-shadow: 0 10px 30px rgba(var(--candle-rgb), 0.08); }
.social-card .social-mark { margin-bottom: 10px; }
.social-card h2 { font-family: var(--serif); font-weight: 900; font-size: var(--fs-card); line-height: 1.2; }
.social-handle { font-size: var(--fs-small); font-weight: 600; color: var(--candle); overflow-wrap: anywhere; }
.social-blurb { flex: 1; color: var(--bone-dim); margin-bottom: 12px; }
.social-card .btn-ghost { align-self: stretch; padding: 13px 18px; }
.social-support { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 28px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(14, 13, 15, 0.92); }
.social-support .social-mark { color: var(--candle); }
.social-support-text { flex: 1 1 220px; }
.social-support-text h2 { font-family: var(--serif); font-size: var(--fs-card); margin: 0 0 4px; }
.social-support-text p { margin: 0; color: var(--bone-dim); font-size: var(--fs-small); }
.social-support .btn-ghost { white-space: nowrap; }
.social-support .btn-ghost .ico { width: 16px; height: 16px; }
.social-contact { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.social-contact ul { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .social-contact ul { grid-template-columns: repeat(2, 1fr); } }
.social-contact li { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(14, 13, 15, 0.92); }
.social-contact li > .ico { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--candle); }
.social-contact small { font-size: 13px; color: var(--bone-faint); }
.social-contact a { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--bone); text-decoration: underline; text-decoration-color: rgba(var(--candle-rgb), 0.55); text-underline-offset: 3px; overflow-wrap: anywhere; }
.social-contact a:hover { color: var(--bone-hi); }
@media (prefers-reduced-motion: reduce) { .social-card, .social-card:hover { transition: none; transform: none; } }

/* ─── phones: a compact Play bar once the hero is out of view ── */

.playbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(8, 8, 10, 0.94); border-top: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translateY(0); transition: transform 0.25s ease;
}
.playbar .btn-play { display: flex; justify-content: center; width: 100%; padding: 13px 20px; font-size: 14.5px; box-shadow: none; }
@media (min-width: 761px) { .playbar { display: none !important; } }

/* ─── dialogs: player and lightbox ─────────────────────────── */

dialog { border: 0; padding: 0; color: var(--bone); background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(4, 4, 5, 0.94); }
.player[open], .lightbox[open] { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(4, 4, 5, 0.96); animation: dlg-in 0.16s ease-out; }
@keyframes dlg-in { from { opacity: 0; } to { opacity: 1; } }
html.modal-open { overflow: hidden; }
.dlg-close, .dlg-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(14, 13, 15, 0.85); color: var(--bone);
}
.dlg-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 3; }
.dlg-close:hover, .dlg-nav:hover { border-color: rgba(var(--candle-rgb), 0.7); }
.player-stage { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 12px 8px; touch-action: pan-x pan-y; }
.player-stage video { max-width: 100%; max-height: 100%; border-radius: var(--radius); background: #000; }
.player-state { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 12px; padding: 12px 18px; border-radius: var(--radius); background: rgba(8, 8, 10, 0.85); font-size: 14px; color: var(--bone-dim); pointer-events: none; }
.player-state.on { display: flex; }
.player-state.loading::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--candle); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.player-bar { display: flex; align-items: center; gap: 16px; width: min(640px, 100%); padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); }
.player-title { flex: 1; text-align: center; font-weight: 600; font-size: 14.5px; }
.lightbox figure { max-width: 92vw; max-height: 86dvh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lightbox img { max-width: 92vw; max-height: 78dvh; width: auto; height: auto; border-radius: var(--radius); }
.lightbox figcaption { color: var(--bone-dim); font-size: 14px; text-align: center; max-width: 720px; }
.lb-prev, .lb-next { position: absolute; top: 50%; margin-top: -23px; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }

/* very subtle case-file reveal (only once grin.js runs; nothing else animates in) */
.js .reveal { opacity: 0; transition: opacity 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.js .reveal.in { opacity: 1; }

/* ─── 404 ───────────────────────────────────────────────────── */

.lost { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 40px var(--gutter); text-align: center; }
.lost-inner { max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lost-logo { width: 150px; height: auto; margin-bottom: 10px; }
.lost h1 { font-family: var(--serif); font-weight: 900; font-size: clamp(30px, 6vw, 46px); line-height: 1.1; letter-spacing: -0.01em; }
.lost .lost-line { font-family: var(--type); font-size: 15px; letter-spacing: 0.04em; color: var(--candle); }
.lost p { color: var(--bone-dim); }
.lost-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }

/* owner editing toolbar (only appears after the server confirms a login) */
.owner-bar { position: fixed; right: 16px; bottom: 16px; z-index: 95; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 32px); padding: 10px 12px; border-radius: var(--radius); background: rgba(14, 13, 15, 0.96); border: 1px solid var(--line); }
.owner-bar .btn { padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.owner-bar .btn-primary { background: var(--rust); border-color: var(--rust); color: var(--bone-hi); }
.owner-status { font-size: 12.5px; color: var(--bone-dim); padding: 0 6px; }
.owner-status.bad { color: var(--rust); }
body.editing [data-edit] { outline: 1.5px dashed rgba(var(--candle-rgb), 0.6); outline-offset: 3px; cursor: text; }
body.editing [data-edit]:hover, body.editing [data-edit]:focus-visible { outline: 2px solid var(--rust); }
.owner-dialog[open] { margin: auto; width: min(640px, calc(100vw - 24px)); }
.owner-form { padding: 22px; display: grid; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.owner-form h2 { font-family: var(--serif); font-size: 21px; }
.owner-form textarea { width: 100%; min-height: 110px; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--ink); color: var(--bone); font: 15px/1.55 var(--sans); }
.owner-form .hint { font-size: 12px; color: var(--bone-faint); }
.owner-form .form-error { color: var(--rust); font-size: 14px; min-height: 1.2em; }
.owner-form .form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.owner-form .btn { padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--line); font-weight: 600; }
.owner-form .btn-primary { background: var(--rust); border-color: var(--rust); color: var(--bone-hi); }
.owner-form .btn-danger { border-color: var(--rust-deep); color: var(--bone-dim); }
.owner-choice { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.owner-choice legend { font-weight: 700; color: var(--bone); padding: 0; }
.owner-options { display: flex; flex-wrap: wrap; gap: 12px; }
.owner-option { display: grid; gap: 6px; align-content: start; font-size: 14px; color: var(--bone-dim); cursor: pointer; }
.owner-option input { accent-color: var(--rust); }
.owner-option.whole-row { flex-basis: 100%; }
.owner-option:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
.owner-preview { width: 240px; max-width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.owner-option:has(input:checked) .owner-preview { border-color: var(--rust); outline: 2px solid var(--rust); outline-offset: 1px; }
.owner-msg { min-height: 1.3em; }

/* ─── reduced motion: nothing moves; the page is complete without it ── */

/* ─── intro: "Click to enter", the intro stage, visitor Settings ──── */

.gate { display: none; }
/* The gate is the first thing in <body> and gate.js sets html.gated before
   the first paint, so a visitor who gets the intro never sees the page first.
   The stable gutter keeps the page the same width when the gate lifts, so the
   hero logo doesn't shift sideways under the intro's landing logo. */
html.gated { overflow: hidden; scrollbar-gutter: stable; }
html.gated .gate {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background-color: var(--ink); transition: background-color 0.9s ease;
}
.gate-stage { position: absolute; inset: 0; z-index: 0; } /* keeps the intro's own layer under our Skip */
.gate-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 var(--gutter); text-align: center; }
.gate-enter {
  padding: 22px 34px 22px calc(34px + 0.32em); border: 1px solid rgba(226, 216, 196, 0.35); border-radius: var(--radius);
  background: rgba(8, 8, 10, 0.4); color: var(--bone);
  font: 700 clamp(15px, 2.4vw, 19px) / 1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase;
  animation: gate-breathe 3.2s ease-in-out infinite;
}
.gate-enter:hover, .gate-enter:focus-visible { outline: none; border-color: var(--rust); color: var(--bone-hi); box-shadow: 0 0 0 2px var(--rust); animation-play-state: paused; }
@keyframes gate-breathe { 50% { opacity: 0.62; } }
.gate-note { font-size: var(--fs-meta); color: var(--bone-faint); }
.gate-skip { color: var(--bone-dim); text-decoration: underline; text-underline-offset: 3px; }
.gate-skip:hover, .gate-skip:focus-visible { color: var(--bone); }
.gate.playing .gate-card { display: none; }
/* The intro's last beat: the page shows through while the logo glides home. */
html.gated .gate.revealing { background-color: transparent; }
.gate:focus { outline: none; }
/* Hidden until focused (the intro shows its own SKIP bottom right). */
.intro-skip {
  position: absolute; left: 20px; bottom: 20px; z-index: 2; min-height: 40px; padding: 0 16px;
  border: 1px solid rgba(226, 216, 196, 0.3); border-radius: var(--radius); background: rgba(8, 8, 10, 0.55);
  color: var(--bone-dim); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.intro-skip:hover, .intro-skip:focus-visible { color: var(--bone); border-color: var(--rust); outline: none; }
.intro-skip:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.intro-skip[hidden] { display: none; }

.settings-dlg { margin: auto; width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--bone); }
.settings-dlg::backdrop { background: rgba(8, 8, 10, 0.72); }
.settings-form { display: grid; gap: 18px; padding: 22px; }
.settings-form h2 { font-family: var(--serif); font-weight: 900; font-size: var(--fs-h3); line-height: 1.15; }
.settings-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.settings-form legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-small); font-weight: 700; color: var(--bone); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-small); color: var(--bone-dim); cursor: pointer; }
.choice input { margin: 0; accent-color: var(--rust); }
.choice:has(input:checked) { border-color: var(--rust); color: var(--bone); }
.choice:has(input:focus-visible) { outline: 2px solid var(--rust); outline-offset: 2px; }
.settings-note { font-size: var(--fs-meta); color: var(--bone-faint); }
.settings-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.settings-actions [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
  .grain, .fog-a, .bg-vignette, .btn-hero, .stats .live span::before { animation: none !important; }
  .logo-base { -webkit-mask-image: none; mask-image: none; }
  .logo-eyes { opacity: 1; }
  .bg-layer, .hero-media picture, .hero-video { transform: none !important; }
  .js .reveal { opacity: 1; }
}