/* kletos.dev — design tokens from handoff README */
:root {
  --bg: #faf7f1;
  --ink: #1d1a16;
  --body: #3d382e;
  --muted-italic: #57503f;
  --muted: #6b6152;
  --faint: #8a8171;
  --hairline: #dcd6ca;
  --hold-fill: #e8e2d4;
  --overlay: rgba(29, 26, 22, .45);
}

* { box-sizing: border-box; }

/* no visible scrollbars anywhere */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

.page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  justify-content: center;
}

.wrap {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
}

/* ---------- header ---------- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}

.wordmark {
  font: 500 18px 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 28px;
  font: 400 15.7px 'Newsreader', serif;
}

.nav a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--faint);
  cursor: pointer;
}

/* ---------- projects (index) ---------- */
.index .wrap { padding: 52px 72px 64px; }

.intro {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: end;
  padding: 56px 0 48px;
}

.intro h1 {
  margin: 0;
  font: 400 92px/.98 'Instrument Serif', serif;
  letter-spacing: -.015em;
}

.tagline {
  margin: 0 0 8px;
  font: italic 300 21.3px/1.45 'Newsreader', serif;
  color: var(--muted-italic);
  text-wrap: pretty;
}

.entry {
  padding: 36px 0 44px;
  display: grid;
  grid-template-columns: 64px 1fr 460px;
  gap: 40px;
  align-items: start;
}

.entry--01 { border-top: 1px solid var(--ink); }
.entry--02 { border-top: 1px solid var(--hairline); padding-bottom: 8px; }

.entry .num {
  font: 400 18px 'JetBrains Mono', monospace;
  color: var(--faint);
  padding-top: 10px;
}

.entry .body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 2px;
}

.entry h2 {
  margin: 0;
  font: 400 44px/1.05 'Instrument Serif', serif;
}

.entry .desc {
  margin: 0;
  font: 300 19.0px/1.6 'Newsreader', serif;
  color: var(--body);
  text-wrap: pretty;
  max-width: 420px;
}

.entry .tags {
  font: 400 18px 'JetBrains Mono', monospace;
  color: var(--muted);
  letter-spacing: .04em;
}

.entry .link {
  font: 400 16.8px 'Newsreader', serif;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  width: fit-content;
}

.entry img {
  width: 460px;
  height: 290px;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}

.entry img.left { object-position: left center; }

/* ---------- footer ---------- */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.index .footer {
  margin-top: 48px;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}

.footer .foot-link {
  font: italic 300 17.9px 'Newsreader', serif;
  color: var(--muted);
  text-decoration: none;
}

.footer .copy {
  font: 400 18px 'JetBrains Mono', monospace;
  color: var(--faint);
}

/* ---------- about ---------- */
.about .wrap {
  padding: 56px 72px 72px;
  gap: 56px;
}

.about .header {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 20px;
}

.about .wordmark { color: var(--muted); }

.about .nav { gap: 24px; }

.about .nav a {
  text-decoration: none;
  border-bottom: 1px solid #c9c1b0;
  text-underline-offset: 0;
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 680px;
}

.about-body h1 {
  margin: 0;
  font: 400 64px/1.05 'Instrument Serif', serif;
  letter-spacing: -.01em;
}

.about-body p {
  margin: 0;
  font: 300 21px/1.65 'Newsreader', serif;
  color: var(--body);
  text-wrap: pretty;
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  max-width: 820px;
}

.facts .cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 28px;
}

.facts .cell:not(:last-child) { border-right: 1px solid var(--hairline); }
.facts .cell:first-child { padding-left: 0; }
.facts .cell:last-child { padding-right: 0; }

.facts.values { grid-template-columns: repeat(4, 1fr); }
.facts .cell .head { font: 400 34.7px 'Instrument Serif', serif; }
.facts .cell .sub { font: 300 18.5px 'Newsreader', serif; color: var(--muted); }

.about .footer .foot-link { font-size: 19.0px; }

/* ---------- info page (retin.html) ---------- */
.eyebrow {
  font: 400 18px 'JetBrains Mono', monospace;
  letter-spacing: .07em;
  color: var(--faint);
  text-transform: uppercase;
}

.about-body .tagline-block {
  font: italic 300 21px/1.5 'Newsreader', serif;
  color: var(--muted-italic);
  max-width: 620px;
}

.hero-shot {
  width: 100%;
  max-width: 920px;
  height: auto;
  display: block;
  border-radius: 6px;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 680px;
}

.prose h2 {
  margin: 0;
  font: 400 38.1px/1.1 'Instrument Serif', serif;
}

.prose p {
  margin: 0;
  font: 300 20.2px/1.65 'Newsreader', serif;
  color: var(--body);
  text-wrap: pretty;
}

.prose strong { font-weight: 500; color: var(--ink); }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.tag {
  font: 500 18px 'JetBrains Mono', monospace;
  letter-spacing: .05em;
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  padding: 6px 13px;
}

.controls {
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 40px;
  max-width: 520px;
}

.controls > div {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 8px;
}

.controls dt {
  font: 500 18px 'JetBrains Mono', monospace;
  letter-spacing: .04em;
  color: var(--ink);
  min-width: 68px;
}

.controls dd {
  margin: 0;
  font: 300 17.9px 'Newsreader', serif;
  color: var(--muted-italic);
}

.link.play {
  font: 400 22px 'Newsreader', serif;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  width: fit-content;
  margin-top: 4px;
}

/* two links on a projects entry */
.entry .links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- retin showcase ---------- */
.showcase .wrap { gap: 76px; }

.section { display: flex; flex-direction: column; gap: 26px; }
.section-head { display: flex; flex-direction: column; gap: 9px; max-width: 720px; }

.section-label {
  font: 500 18px 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

.section-head h2 {
  margin: 0;
  font: 400 42px/1.06 'Instrument Serif', serif;
  letter-spacing: -.01em;
}

.section-head .lead {
  margin: 0;
  font: 300 21px/1.6 'Newsreader', serif;
  color: var(--body);
  text-wrap: pretty;
}

.section .body-copy {
  margin: 0;
  font: 300 20px/1.6 'Newsreader', serif;
  color: var(--body);
  max-width: 730px;
  text-wrap: pretty;
}
.section .body-copy strong { font-weight: 500; color: var(--ink); }
.section .body-copy + .body-copy { margin-top: -8px; }

/* metric strip */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.metrics .m { padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.metrics .m:first-child { padding-left: 0; }
.metrics .m:not(:last-child) { border-right: 1px solid var(--hairline); }
.metrics .m .n { font: 400 46px/1 'Instrument Serif', serif; color: var(--ink); }
.metrics .m .l {
  font: 500 18px 'JetBrains Mono', monospace;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

/* feature grid (gameplay clips) */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.feature { display: flex; flex-direction: column; gap: 14px; }
.feature img {
  width: 100%; height: auto; display: block;
  border-radius: 6px; border: 1px solid var(--hairline); background: #05060a;
}
.feature .k {
  font: 500 18px 'JetBrains Mono', monospace;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
}
.feature .d { margin: 5px 0 0; font: 300 19.0px/1.55 'Newsreader', serif; color: var(--muted-italic); }

/* deep dive + code */
.deepdive { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.code {
  font: 400 18px/1.7 'JetBrains Mono', monospace;
  color: #2a2620; background: #f1ece1; border: 1px solid var(--hairline);
  border-radius: 6px; padding: 18px 20px; overflow-x: auto; white-space: pre; margin: 0;
}
.code .c { color: #a99e88; }
.code .k { color: #9a5a24; }

/* archetype chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; max-width: 720px; }

/* weapons */
.weapons {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.weapons .w { padding: 22px 24px; display: flex; flex-direction: column; gap: 7px; }
.weapons .w:first-child { padding-left: 0; }
.weapons .w:not(:last-child) { border-right: 1px solid var(--hairline); }
.weapons .w .wn { font: 400 29.1px 'Instrument Serif', serif; }
.weapons .w .wt {
  font: 500 18px 'JetBrains Mono', monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.weapons .w .wd { font: 300 17.4px/1.5 'Newsreader', serif; color: var(--muted); }

.cta-row { display: flex; align-items: baseline; gap: 28px; }

@media (max-width: 800px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics .m:nth-child(3) { padding-left: 0; }
  .metrics .m:nth-child(2n) { border-right: 0; }
  .metrics .m:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .feature-grid { grid-template-columns: 1fr; }
  .weapons { grid-template-columns: 1fr; }
  .weapons .w { padding-left: 0; border-right: 0; }
  .weapons .w:not(:last-child) { border-bottom: 1px solid var(--hairline); }
}

/* ---------- responsive: single column under 800px ---------- */
@media (max-width: 800px) {
  .index .wrap,
  .about .wrap { padding: 40px 24px 48px; }

  .intro {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }
  .intro h1 { font-size: 64px; }

  .entry {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .entry .num { padding-top: 0; }
  .entry .body { order: 2; }
  .entry img { order: 1; width: 100%; height: auto; aspect-ratio: 460 / 290; }

  .facts { grid-template-columns: 1fr; }
  .facts .cell {
    padding: 20px 0;
    border-right: 0 !important;
  }
  .facts .cell:not(:last-child) { border-bottom: 1px solid var(--hairline); }
}

/* ================= horizontal slide deck ================= */
body.deck-page { height: 100vh; overflow: hidden; }
/* bottom fade so scrolling slide content stays clear of the fixed dots/copyright */
body.deck-page::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 88px;
  background: linear-gradient(transparent, var(--bg) 72%);
  z-index: 25; pointer-events: none;
}

.deck-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 24px 40px 18px;
  background: linear-gradient(var(--bg) 55%, transparent);
  pointer-events: none;
}
.deck-header .brand,
.deck-header .nav,
.deck-header .deck-copy { pointer-events: auto; }
.deck-header .brand { display: flex; flex-direction: column; gap: 5px; }
.brand-tagline {
  font: italic 300 17.9px/1.3 'Newsreader', serif;
  color: var(--muted-italic);
}
@media (max-width: 640px) { .brand-tagline { display: none; } }

/* Swiper decks: main = horizontal projects; retin = vertical (hero + breakdown);
   breakdown = horizontal sub-deck under retin. */
.main-deck { width: 100vw; height: 100vh; }
.vdeck { width: 100%; height: 100%; }
.breakdown-deck { width: 100%; height: 100%; }
.deck-page .swiper-slide { overflow: hidden; box-sizing: border-box; }

/* mermr phone screens (portrait app captures) */
.screens { display: flex; gap: 26px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.screen { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.screen img { height: 42vh; max-height: 380px; width: auto; display: block; border-radius: 22px; border: 1px solid var(--hairline); background: #1c1917; }
.screen .k { font: 500 18px 'JetBrains Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.screen .d { margin: 0; font: 300 16px/1.45 'Newsreader', serif; color: var(--muted-italic); text-align: center; max-width: 190px; }

.slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  overflow: hidden;
  padding: 78px 72px 64px;
  box-sizing: border-box;
}
.slide-inner { width: 100%; max-width: 1040px; margin: 0 auto; }

/* breakdown horizontal progress dots (bottom center, only while in the breakdown) */
.bdots {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: none; gap: 9px;
}
.bdots.show { display: flex; }
.bdots button {
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  border: 1px solid var(--faint); background: transparent; cursor: pointer;
}
.bdots button.active { background: var(--ink); border-color: var(--ink); }
.deck-dots.hide { display: none; }

/* keep clip media within the viewport so slides never scroll — never crop */
.slide .hero-shot { max-height: 54vh; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.slide .feature img { width: 100%; height: auto; max-height: 42vh; object-fit: contain; }

/* project hero slide */
.hero-slide {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-slide.flip .hero-media { order: 2; }
.hero-media img {
  width: 100%; height: auto; display: block;
  border-radius: 6px; border: 1px solid var(--hairline); background: #05060a;
}
.hero-copy { display: flex; flex-direction: column; gap: 18px; }
.hero-copy .num {
  font: 400 18px 'JetBrains Mono', monospace; letter-spacing: .1em; color: var(--faint);
}
.hero-copy h2 { margin: 0; font: 400 72px/1 'Instrument Serif', serif; letter-spacing: -.015em; }
.hero-copy .desc {
  margin: 0; font: 300 21px/1.6 'Newsreader', serif; color: var(--body); max-width: 480px; text-wrap: pretty;
}
.hero-copy .tags {
  font: 400 18px 'JetBrains Mono', monospace; color: var(--muted); letter-spacing: .04em;
}

/* title / intro slide */
.title-slide { display: flex; flex-direction: column; gap: 26px; }
.title-slide h1 { margin: 0; font: 400 108px/.96 'Instrument Serif', serif; letter-spacing: -.02em; }
.title-slide .tagline { margin: 0; font: italic 300 21px/1.45 'Newsreader', serif; color: var(--muted-italic); max-width: 460px; }
.hint {
  margin-top: 8px; font: 500 18px 'JetBrains Mono', monospace;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}

/* nav arrows — labeled pills in the bottom corners (clear of slide content) */
.deck-nav {
  position: fixed; bottom: 18px; z-index: 30;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 100px; max-width: 26vw;
  border: 1px solid var(--hairline); background: rgba(250, 247, 241, .85);
  color: var(--ink); cursor: pointer;
  font: 400 21.3px 'Newsreader', serif; text-transform: capitalize;
  backdrop-filter: blur(4px); transition: opacity .2s, border-color .2s;
}
.deck-nav svg { width: 17px; height: 17px; flex: none; }
.deck-nav .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-nav:hover { border-color: var(--muted); }
.deck-nav.prev { left: 24px; }
.deck-nav.next { right: 24px; }
.deck-nav:disabled { opacity: 0; pointer-events: none; }

/* dots + copyright */
.deck-dots {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; gap: 9px;
}
.deck-dots button {
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  border: 1px solid var(--faint); background: transparent; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.deck-dots button.active { background: var(--ink); border-color: var(--ink); }

/* horizontal hint above the dots (e.g. "Slide right for projects") */
/* identical treatment to the up/down cues, just pointing right */
.deck-hint {
  position: fixed; bottom: 54px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: none; align-items: center; gap: 9px; white-space: nowrap;
  font: italic 300 21.3px 'Newsreader', serif; text-transform: capitalize; color: var(--muted);
}
.deck-hint svg { width: 15px; height: 15px; }
.deck-hint.show { display: inline-flex; }
/* copyright now lives in the header (right side) */
.deck-copy { font: 400 18px 'JetBrains Mono', monospace; color: var(--faint); align-self: baseline; }

/* informational (non-actionable) cue — e.g. play requires desktop WebGPU */
.deck-cue.is-note { color: var(--faint); cursor: default; }
.deck-cue.is-note:hover { color: var(--faint); }
.deck-cue.is-note svg { display: none; }

/* retin "play" gating: the note always explains the requirement; the Play
   button is hidden on devices that can't run it. */
.play-note { margin: 14px 0 0; font: 300 18.5px/1.6 'Newsreader', serif; color: var(--muted); max-width: 540px; }
body.no-play [data-play] { display: none; }

/* deck slide section rhythm (tech breakdown) */
.slide .section { gap: 15px; }
.slide .metrics { margin-top: 8px; }
.slide .body-copy { font: 300 20px/1.55 'Newsreader', serif; }
.slide .section-head .lead { font-size: 21px; line-height: 1.5; }

/* ---------- SharedArrayBuffer visualization ---------- */
.sab-viz { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 760px; }
.sab-node {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--hairline); border-radius: 8px; padding: 12px 22px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  text-align: center; min-width: 260px;
}
.sab-node .role { font: 500 18px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.sab-node .note { font: 300 18px 'Newsreader', serif; color: var(--muted); font-style: italic; }
.sab-node.writer { border-color: #cbb98f; }
.sab-node.reader { border-color: #9fb0c9; }

.sab-arrow { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 500 18px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.sab-arrow svg { width: 14px; height: 14px; }

.sab-buffer { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.sab-buffer .cap {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 500 18px 'JetBrains Mono', monospace; letter-spacing: .05em; color: var(--muted);
}
.sab-cells { display: grid; grid-template-columns: repeat(11, 1fr); border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; }
.sab-cells .cell {
  padding: 12px 2px; text-align: center;
  font: 500 18px 'JetBrains Mono', monospace; color: var(--body);
  border-right: 1px solid var(--hairline); background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.sab-cells .cell:last-child { border-right: 0; }
.sab-cells .cell.hot { background: rgba(240, 190, 110, .2); color: var(--ink); }
.sab-cells .cell.cold { background: rgba(120, 170, 235, .2); color: var(--ink); }
.sab-cells .cell.dim { color: var(--faint); }
.sab-legend { display: flex; gap: 20px; font: 400 18px 'JetBrains Mono', monospace; color: var(--muted); }
.sab-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sab-legend .sw.hot { background: rgba(240, 190, 110, .55); border: 1px solid rgba(240, 190, 110, .6); }
.sab-legend .sw.cold { background: rgba(120, 170, 235, .55); border: 1px solid rgba(120, 170, 235, .6); }

/* ---------- ethos slide (the "about" that isn't about) ---------- */
.ethos { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 46px; }
.ethos-lead { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 780px; }
.ethos-name { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ethos-lockup { display: inline-flex; align-items: center; gap: 22px; }
.ethos-mark { width: 68px; height: 68px; color: var(--ink); flex: none; }
.ethos-word {
  font: 500 104px/1 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
  letter-spacing: -.025em; color: var(--ink);
}

/* landing is "bare" — hide the top bar there */
body.slide-bare .deck-header { opacity: 0; pointer-events: none; }
.ethos-phon { font: 400 18px 'JetBrains Mono', monospace; letter-spacing: .22em; text-transform: lowercase; color: var(--faint); }
.ethos-say { margin: 0; font: 400 30.2px/1.4 'Instrument Serif', serif; color: var(--ink); max-width: 640px; text-wrap: pretty; letter-spacing: -.005em; }
.ethos-say em { font-style: italic; color: var(--muted-italic); }

.ethos-values {
  display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 900px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline);
}
.ethos-values .ev {
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 24px 18px;
}
.ethos-values .ev:not(:last-child) { border-right: 1px solid var(--hairline); }
.ethos-values .ev .seed { width: 18px; height: 9px; opacity: .9; }
.ethos-values .ev .w { font: 400 37.0px 'Instrument Serif', serif; color: var(--ink); }
.ethos-values .ev .g { font: 300 20.2px/1.5 'Newsreader', serif; color: var(--muted); max-width: 200px; }

@media (max-width: 820px) {
  .deck-header { padding: 16px 22px 14px; }
  .slide {
    /* clear the fixed chrome: top cue sits at 78px, bottom dots/hint at ~24-54px */
    padding: 100px 22px 104px;
    overflow-y: auto;               /* let tall content scroll on small screens (scrollbar hidden) */
    justify-content: flex-start;
  }
  .slide-inner { margin: auto 0; }

  /* Opaque fade bands so scrolled slide content never shows through the fixed
     header/cue (top) or dots/hint (bottom). Taller + denser than desktop. */
  body.deck-page::after {
    height: 132px;
    background: linear-gradient(transparent, var(--bg) 58%);
  }
  body.deck-page::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 108px;
    background: linear-gradient(var(--bg) 60%, transparent);
    z-index: 25; pointer-events: none;
  }
  /* landing hides the header/cues entirely — no top band needed there */
  body.slide-bare.deck-page::before { display: none; }

  .hero-slide { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .hero-slide.flip .hero-media { order: 0; }
  .hero-copy { gap: 14px; }
  .hero-copy h2 { font-size: 46px; }
  .hero-copy .desc { font-size: 19.0px; }
  .title-slide h1 { font-size: 52px; }
  .about-body h1 { font-size: 46px; }
  .about-hero .about-intro h2 { font-size: 46px; }
  .section-head h2 { font-size: 35.8px; }
  .section-head .lead { font-size: 19.0px; }

  .slide .hero-shot { max-height: 42vh; }
  .slide .feature img { max-height: none; }
  .feature-grid { grid-template-columns: 1fr; gap: 22px; }

  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics .m { padding: 15px 16px; }
  .metrics .m:nth-child(odd) { padding-left: 0; }
  .metrics .m:nth-child(2n) { border-right: 0; }
  .metrics .m:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .metrics .m .n { font-size: 40.3px; }

  .weapons { grid-template-columns: 1fr; }
  .weapons .w { padding: 16px 0; border-right: 0; }
  .weapons .w:not(:last-child) { border-bottom: 1px solid var(--hairline); }

  .sab-cells { grid-template-columns: repeat(6, 1fr); }
  .sab-node { min-width: 0; width: 100%; }

  .ethos { gap: 28px; }
  .ethos-word { font-size: 72px; }
  .ethos-say { font-size: 22.4px; }
  .ethos-values { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .ethos-values .ev { padding: 15px 12px; border-right: 0 !important; }
  .ethos-values .ev:not(:last-child) { border-bottom: 1px solid var(--hairline); }
  .ethos-values .ev .w { font-size: 31.4px; }

  .deck-nav { display: none; }         /* rely on swipe + dots on mobile */
  .deck-copy { display: none; }
  .deck-cue .lbl { font-size: 16.8px; }
}

/* ---------- phone-specific tightening (<=480px) ---------- */
@media (max-width: 480px) {
  /* Landing: the bare slide has no header/cue, so reclaim the top band and
     tighten the ethos rhythm — all four values now fit one screen, no scroll. */
  .deck-page .swiper-slide[data-bare] .slide { padding-top: 48px; padding-bottom: 88px; }
  .ethos { gap: 20px; }
  .ethos-lead { gap: 12px; }
  .ethos-word { font-size: 58px; }
  .ethos-say { font-size: 19.5px; }
  .ethos-values .ev { padding: 10px 12px; gap: 5px; }
  .ethos-values .ev .w { font-size: 27px; }
  .ethos-values .ev .g { font-size: 16.5px; }

  /* Breakdown rhythm: a touch tighter so dense slides breathe. */
  .slide .section { gap: 18px; }
  .section-head { gap: 7px; }
  .slide .body-copy { font-size: 18px; line-height: 1.5; }

  /* SharedArrayBuffer diagram: de-cramp at phone width. Stacking the caption
     fixes the label/value running together; smaller cells stop the squish. */
  .sab-viz { gap: 8px; }
  .sab-node { padding: 9px 14px; min-width: 0; }
  .sab-node .role,
  .sab-node .note,
  .sab-arrow { font-size: 15px; }
  .sab-buffer .cap { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 15px; }
  .sab-cells .cell { padding: 8px 1px; font-size: 13.5px; }
  .sab-legend { flex-direction: column; gap: 5px; font-size: 15px; }
}

/* ================= RICE values infographic ================= */
.rice-head { display: flex; align-items: center; gap: 14px; }
.rice-grains { display: flex; gap: 5px; }
.grain { width: 20px; height: 10px; display: block; }
.grain:nth-child(2) { transform: translateY(3px); }
.grain:nth-child(3) { transform: translateY(-2px); }
.grain:nth-child(4) { transform: translateY(2px); }

.rice { display: flex; flex-direction: column; max-width: 620px; margin-top: 6px; }
.rice-row {
  display: grid; grid-template-columns: 60px 1fr; align-items: baseline; gap: 22px;
  padding: 18px 0; border-bottom: 1px solid var(--hairline);
}
.rice-row:first-child { border-top: 1px solid var(--hairline); }
.rice-cap { font: 400 48px/1 'Instrument Serif', serif; color: var(--ink); text-align: center; }
.rice-word { font: 400 28.0px 'Instrument Serif', serif; color: var(--ink); }
.rice-gloss { display: block; margin-top: 3px; font: 300 16.8px/1.5 'Newsreader', serif; color: var(--muted); }

/* vertical slide cues (project hero: up = play, down = breakdown) */
.deck-cue {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
  display: none; align-items: center; gap: 9px;
  font: italic 300 21.3px 'Newsreader', serif; text-transform: capitalize;
  color: var(--muted); background: none; border: 0; cursor: pointer;
}
.deck-cue.show { display: inline-flex; }
.deck-cue.up { top: 78px; }
.deck-cue.down { bottom: 54px; }
.deck-cue svg { width: 15px; height: 15px; }
.deck-cue:hover { color: var(--ink); }
.deck-cue.up:hover svg { transform: translateY(-2px); }
.deck-cue.down:hover svg { transform: translateY(2px); }
.deck-cue svg { transition: transform .18s; }

/* ================= per-project color themes ================= */
.deck-page .swiper-slide { background: var(--bg); color: var(--ink); }
/* only TOP-LEVEL project slides declare tokens; nested breakdown slides inherit them */
.main-deck > .swiper-wrapper > .swiper-slide {
  --bg: #faf7f1; --ink: #1d1a16; --body: #3d382e; --muted-italic: #57503f;
  --muted: #6b6152; --faint: #8a8171; --hairline: #dcd6ca; --accent: #1d1a16;
}
/* retin.app — dark space, cyan */
.main-deck > .swiper-wrapper > .swiper-slide[data-theme="retin"],
body[data-theme="retin"] {
  --bg: #080c12; --ink: #e7f7ff; --body: #aec7d4; --muted-italic: #9fbccb;
  --muted: #7f9fad; --faint: #5b7581; --hairline: #1e2c35; --accent: #37e0f2;
}
/* mermr.io — warm dark, amber */
.main-deck > .swiper-wrapper > .swiper-slide[data-theme="mermr"],
body[data-theme="mermr"] {
  --bg: #1c1917; --ink: #ede9e0; --body: #cfc7bb; --muted-italic: #c3b8a8;
  --muted: #9c8f80; --faint: #726858; --hairline: #3a342e; --accent: #f0c674;
}
/* themed chrome (fixed elements read body tokens) */
body[data-theme="retin"] .deck-nav { background: rgba(8, 12, 18, .82); }
body[data-theme="mermr"] .deck-nav { background: rgba(28, 25, 23, .82); }
/* project CTA link takes the brand accent */
.swiper-slide[data-theme] .link.play { color: var(--accent); text-decoration-color: var(--accent); }
.swiper-slide[data-theme] .link.play:hover { opacity: .85; }

/* ================= project brand fonts on their hero ================= */
/* retin.app — its own monospace wordmark with a cyan glow */
.swiper-slide[data-theme="retin"] .hero-copy h2 {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  letter-spacing: -.02em;
  text-shadow: 0 0 28px rgba(55, 224, 242, .35);
}
/* mermr.io — DM Serif Display wordmark with the waveform mark, DM Sans body */
.brand-mermr { display: flex; align-items: center; gap: 16px; font-family: 'DM Serif Display', Georgia, serif !important; font-weight: 400; }
.brand-mermr .wave { height: .6em; width: auto; color: var(--accent); flex: none; }
.swiper-slide[data-theme="mermr"] .hero-copy .desc,
.swiper-slide[data-theme="mermr"] .hero-copy .tags { font-family: 'DM Sans', system-ui, sans-serif; }

/* ================= retin neon splashes (subtle) ================= */
.main-deck > .swiper-wrapper > .swiper-slide[data-theme="retin"] { --accent2: #ff4fd8; }
.swiper-slide[data-theme="retin"] .slide { position: relative; }
.swiper-slide[data-theme="retin"] .slide::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(42vw 42vw at 10% 16%, rgba(55, 224, 242, .10), transparent 62%),
    radial-gradient(40vw 40vw at 90% 86%, rgba(255, 79, 216, .09), transparent 62%);
}
.swiper-slide[data-theme="retin"] .slide-inner { position: relative; z-index: 1; }
/* dual cyan+magenta halo on the retin wordmark */
.swiper-slide[data-theme="retin"] .hero-copy h2 {
  text-shadow: 0 0 26px rgba(55, 224, 242, .35), 0 0 64px rgba(255, 79, 216, .16);
}
/* a magenta tick on the index number */
.swiper-slide[data-theme="retin"] .hero-copy .num { color: var(--accent2); }