/* vxKite website — static CSS. Hostinger-ready. No Tailwind. Fonts self-hosted (fonts/, OFL). */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Syne", var(--font-sans);
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --color-chroma-red: #e45a5a;
  --color-chroma-cyan: #3ec8e0;
  --bg: #181818;
  --fg: #e8e8e8;
  --muted: #8d8d8d;
  --line: #333333;
  --accent: #d8d8d8;
  --accent-fg: #181818;
  --surface: #242424;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

button:not(:disabled),
[role="button"]:not(:disabled) {
  cursor: pointer;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
}

a {
  color: inherit;
}

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

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-home {
  color: inherit;
  text-decoration: none;
}

.site-home:hover {
  color: inherit;
}

.door.is-on {
  color: var(--fg);
}

.door.is-on span {
  opacity: 0.8;
}

.ascii-fit {
  container-type: inline-size;
  width: 100%;
  display: flex;
  justify-content: center;
}

.ascii-stage {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1.12;
  font-size: clamp(5px, calc(100cqw / 42), 10px);
  overflow: visible;
}

.ascii-sm .ascii-stage {
  font-size: clamp(4.5px, calc(100cqw / 46), 8px);
}

.ascii-layer {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  white-space: pre;
  text-align: left;
}

.ascii-cyan,
.ascii-red {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ascii-cyan {
  color: var(--color-chroma-cyan);
  transform: translate(0.8px, 0);
  opacity: 0.75;
  mix-blend-mode: screen;
}

.ascii-red {
  color: var(--color-chroma-red);
  transform: translate(-0.8px, 0);
  opacity: 0.75;
  mix-blend-mode: screen;
}

.ascii-main {
  position: relative;
  color: #d8d8d8;
}

.ascii-tone-ink .ascii-cyan,
.ascii-tone-ink .ascii-red {
  mix-blend-mode: multiply;
  opacity: 0.28;
}

.ascii-tone-ink .ascii-main {
  color: #1c1914;
}

.about-plate {
  margin: 0 auto;
  width: min(100%, 28rem);
  background: #222222;
  color: #e8e8e8;
  padding: 1.15rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: visible;
}

.about-plate .ascii-fit {
  width: min(100%, 22rem);
}

.about-tag {
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: #9a9a9a;
}

.about-name {
  margin: 0.35rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
}

.about-ver {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8d8d8d;
}

.kite-mark {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.inapp-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.inapp-word {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  font-weight: 590;
  letter-spacing: -0.02em;
}

.exhibit-plate {
  width: 7.6rem;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

.exhibit-face {
  position: relative;
  background: #f5d000;
  color: #1a1400;
  border-radius: 0.2rem;
  padding: 0.55rem 0.45rem 0.5rem;
  text-align: center;
  box-shadow: 0 0 0 0.35rem #1c1c1c;
}

.exhibit-face::after {
  content: "";
  position: absolute;
  inset: 0.18rem;
  border: 1px solid rgba(40, 30, 0, 0.28);
  pointer-events: none;
}

.exhibit-head {
  display: block;
  margin-bottom: 0.1rem;
  font-family: var(--font-sans);
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  opacity: 0.8;
}

.exhibit-type {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.exhibit-num {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 650;
}

.product-shot {
  margin: 0;
}

.product-shot img,
.product-shot video {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: -1px;
}

.product-shot figcaption {
  margin: 0.55rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.os-swap {
  margin: 0;
}

.os-stage {
  position: relative;
  aspect-ratio: 1800 / 1247;
  background: #0e0e0e;
  overflow: hidden;
}

.os-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 480ms var(--ease-out);
}

.os-stage img.is-on {
  opacity: 1;
}

.os-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0 0;
}

.os-seg {
  display: inline-flex;
  border: 1px solid var(--line);
}

.os-seg button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
}

.os-seg button.is-on {
  background: var(--fg);
  color: var(--bg);
}

.os-bar figcaption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .os-stage img {
    transition: none;
  }
}

.door-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
}

.door {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.door span {
  opacity: 0.55;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.door:hover span {
  opacity: 0.8;
}

.draft-page {
  min-height: 100vh;
}

[data-draft="night"] {
  --bg: #121214;
  --fg: #ececec;
  --muted: #8a8a8a;
  --line: #2a2a2e;
  background: var(--bg);
  color: var(--fg);
}

.night-shell {
  width: min(100% - 2rem, 42rem);
  margin: 0 auto;
  padding: 1rem 0 3rem;
  display: grid;
  gap: 1.75rem;
}

[data-draft="night"] .site-nav {
  padding: 0.4rem 0 0.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

[data-draft="night"] .site-home {
  color: var(--fg);
}

.night-hero .about-plate {
  width: 100%;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.night-claim {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 36em;
}

.night-claim a {
  color: var(--fg);
}

.night-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

[data-draft="sun"] {
  --bg: #f3ead4;
  --fg: #1c1914;
  --muted: #6b6256;
  --line: #d9ccb4;
  --accent: #1d6a8a;
  --accent-fg: #f3ead4;
  --surface: #ebe1c8;
  font-family: var(--font-sans);
  background: var(--bg);
}

.sun-tag {
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: color-mix(in oklab, #f7f4ee 82%, transparent);
}

.sun-top {
  width: min(100% - 2rem, 68rem);
  margin: 0 auto;
  padding: 0.35rem 0 0;
}

.sun-body {
  width: min(100% - 2rem, 68rem);
  margin: 0 auto;
  padding: 1.25rem 0 3rem;
  display: grid;
  gap: 2.25rem;
}

.sun-mast {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.sun-portrait {
  margin: 0;
}

.sun-portrait img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  outline: 1px solid rgba(28, 25, 20, 0.12);
  outline-offset: -1px;
}

.sun-landscape {
  margin: 0;
}

.sun-landscape img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  outline: 1px solid rgba(28, 25, 20, 0.12);
  outline-offset: -1px;
}

.sun-portrait,
.sun-landscape {
  position: relative;
}

.sun-portrait figcaption,
.sun-landscape figcaption {
  position: absolute;
  right: 0.65rem;
  bottom: 0.55rem;
  margin: 0;
  font-size: 0.68rem;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}

.sun-portrait:hover figcaption,
.sun-portrait:focus-within figcaption,
.sun-landscape:hover figcaption,
.sun-landscape:focus-within figcaption {
  opacity: 0.9;
}

.sun-portrait figcaption a,
.sun-landscape figcaption a {
  color: #f7f4ee;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

@media (hover: none) {
  .sun-portrait figcaption,
  .sun-landscape figcaption {
    opacity: 0.45;
  }
}

.sun-intro-copy {
  display: grid;
  gap: 0.85rem;
  justify-items: start;
}

.sun-intro-copy .ascii-fit {
  width: min(100%, 22rem);
}

.sun-intro-copy .exhibit-plate {
  margin: 0.2rem 0;
}

.sun-intro-copy h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 550;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.sun-intro-copy p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 38rem;
}

.sun-tag-ink {
  margin: 0;
  color: var(--muted);
}

.sun-kicker {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.room-lede h1 {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 550;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.sun-beats {
  list-style: none;
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.25rem;
}

.sun-beats h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 550;
}

.sun-beats p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

.sun-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

@media (min-width: 800px) {
  .sun-mast {
    grid-template-columns: min(22rem, 42%) 1fr;
    gap: 2.5rem;
    align-items: start;
  }

  .sun-beats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

[data-draft="room"] {
  --bg: #161616;
  --fg: #ececec;
  --muted: #8a8a8a;
  --line: #2c2c2c;
  --accent: #d8d8d8;
  --surface: #1e1e1e;
  font-family: var(--font-sans);
  padding: 0 1.15rem 2.75rem;
}

[data-draft="room"] .site-nav {
  width: min(100%, 74rem);
  margin: 0 auto;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

[data-draft="room"] .site-home {
  color: var(--fg);
}

.room-hero {
  width: min(100%, 74rem);
  margin: 0 auto;
  padding: 1.75rem 0 0;
  display: grid;
  gap: 1.25rem;
}

.room-lede p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 38rem;
}

.room-split {
  width: min(100%, 74rem);
  margin: 2rem auto 0;
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .room-split {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
  }
}

.room-split-copy {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

.room-split-copy h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 550;
  letter-spacing: -0.025em;
}

.room-split-copy p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 34rem;
}

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

.sun-jump {
  margin: 1rem 0 0;
}

.sun-jump a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: inherit;
  text-underline-offset: 0.18em;
}

.room-split-copy .sun-jump {
  margin-top: 0.2rem;
}

.room-tools {
  width: min(100%, 74rem);
  margin: 2.25rem auto 0;
}

.room-foot {
  width: min(100%, 74rem);
  margin: 1.75rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--muted);
}

.home-about {
  width: min(100%, 74rem);
  margin: 2.75rem auto 0;
  display: grid;
  gap: 2.25rem;
}

[data-draft="hold"] {
  --bg: #161616;
  --fg: #ececec;
  --muted: #8a8a8a;
  --line: #2c2c2c;
  background: var(--bg);
  color: var(--fg);
}

.hold-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

[data-draft="hold"] .site-nav {
  width: min(100% - 2rem, 42rem);
  margin: 0 auto;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

[data-draft="hold"] .site-home {
  color: var(--fg);
}

.hold-center {
  width: min(100% - 2rem, 28rem);
  margin: 0 auto;
  padding: 2.5rem 0 3rem;
  display: grid;
  gap: 1.15rem;
  justify-items: center;
  text-align: center;
}

.hold-center .about-plate {
  width: 100%;
}

.hold-plate {
  margin: 0.35rem 0 0.15rem;
}

.hold-line {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

.store-oses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg);
}

.store-oses span {
  color: var(--muted);
  text-transform: lowercase;
}

.hold-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

/* ---- the app's own kite, Home's flow, the footer pages ---- */

.kite-mark .k-green { fill: #35b768; }
.kite-mark .k-white { fill: #f2f5f8; fill-opacity: 0.95; }
.kite-mark .k-spar { fill: none; stroke: #cfe8da; stroke-opacity: 0.75; stroke-width: 0.7; stroke-linecap: round; }
.kite-mark .k-edge { fill: none; stroke: #cfe8da; stroke-opacity: 0.95; stroke-width: 1; stroke-linejoin: round; }
[data-draft="sun"] .kite-mark .k-white { fill: #fbf8f0; }
[data-draft="sun"] .kite-mark .k-spar,
[data-draft="sun"] .kite-mark .k-edge { stroke: #1c1914; stroke-opacity: 0.6; }

[data-draft="sun"] { color: var(--fg); }
.os-stage.is-pilot { aspect-ratio: 16 / 10; }
.room-lede .sun-tag { margin: 0 0 1rem; }
code { font-family: var(--font-mono); font-size: 0.92em; }

.room-moves { width: min(100%, 74rem); margin: 2.5rem auto 0; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem 1.5rem; }
@media (min-width: 800px) { .moves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.moves figure { margin: 0 0 0.75rem; }
.moves img, .moves video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; background: #0e0e0e; outline: 1px solid rgba(255, 255, 255, 0.08); outline-offset: -1px; }
.moves .is-wide { object-fit: contain; }
.moves video { height: auto; object-fit: contain; }
.moves h2, .room-guide h2 { margin: 0 0 0.35rem; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 550; letter-spacing: -0.02em; }
.moves h2 span, .room-guide h2 span { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); margin-right: 0.45rem; }
.moves p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--muted); max-width: 34rem; }
.moves figcaption, .shot-note { margin: 0.4rem 0 0; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }

.room-guide { width: min(100%, 74rem); margin: 2.5rem auto 0; display: grid; gap: 0.9rem; }
.room-guide figure { margin: 0; }
.room-guide img { width: 100%; outline: 1px solid rgba(255, 255, 255, 0.08); outline-offset: -1px; }
.room-guide p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--muted); max-width: 40rem; }
/* 360, after Guide (1 Nov 2026): a lead picture, three beside, srScout named */
.room-360 h2 { margin-top: 0.4rem; }
.room-360 .quad { display: grid; gap: 0.75rem; }
@media (min-width: 560px) { .room-360 .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .room-360 .quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.room-360 .quad figure { margin: 0; }
.room-360 .quad img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; outline: 1px solid rgba(255, 255, 255, 0.08); outline-offset: -1px; }

.moves .slot { aspect-ratio: 16 / 10; display: flex; align-items: flex-end; }
.moves .slot img { aspect-ratio: auto; height: auto; background: none; }
.two-screens { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.two-screens .ts-edge { fill: none; stroke: #e8e8e8; stroke-opacity: 0.85; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }

.foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.9rem 0 0; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted); }
.foot-links a { color: var(--fg); text-underline-offset: 0.18em; }
[data-draft="room"] .foot-links { width: min(100%, 74rem); margin-left: auto; margin-right: auto; }
.hold-center .foot-links { justify-content: center; margin-top: 1.5rem; }

/* About: pictures under the beats, the ways in, the families */
.sun-beats figure { margin: 0 0 0.65rem; }
.sun-beats img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; outline: 1px solid rgba(28, 25, 20, 0.12); outline-offset: -1px; }
.sun-section { border-top: 1px solid var(--line); padding-top: 1.25rem; display: grid; gap: 1rem; }
.sun-section > h2 { margin: 0; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 550; letter-spacing: -0.02em; }
.sun-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem 1.75rem; }
@media (min-width: 800px) { .sun-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sun-ways h3 { margin: 0 0 0.15rem; font-size: 0.95rem; font-weight: 600; }
.sun-ways p, .sun-section > p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted); max-width: 40rem; }
.sun-shots-head { margin: 0.5rem 0 -0.4rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; color: var(--muted); }
.sun-shots { margin: 0; display: grid; gap: 0.75rem; }
@media (min-width: 800px) { .sun-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sun-shots figure { margin: 0; }
.sun-shots img, .sun-shots video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; outline: 1px solid rgba(28, 25, 20, 0.12); outline-offset: -1px; }
.sun-shots figcaption { margin: 0.35rem 0 0; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.sun-families { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-family: var(--font-mono); font-size: 0.74rem; }
.sun-families li { border: 1px solid var(--line); padding: 0.2rem 0.5rem; }
.sun-families span { color: var(--muted); }

/* Footer pages and the friends' download: a reading column on the Night ground */
.doc { display: grid; gap: 0; font-size: 0.92rem; line-height: 1.62; color: var(--fg); }
.doc h1 { margin: 0.2rem 0 0.6rem; font-family: var(--font-serif); font-size: 1.9rem; font-weight: 550; letter-spacing: -0.02em; line-height: 1.15; }
.doc h2 { margin: 2rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 550; letter-spacing: -0.01em; scroll-margin-top: 1rem; }
.doc h3 { margin: 1.4rem 0 0.35rem; font-size: 1rem; font-weight: 600; scroll-margin-top: 1rem; }
.doc p { margin: 0 0 0.85rem; }
.doc ul, .doc ol { margin: 0 0 0.85rem; padding-left: 1.3rem; }
.doc li { margin: 0.2rem 0; }
.doc li > ul, .doc li > ol { margin: 0.2rem 0 0.3rem; }
.doc a { color: var(--fg); text-underline-offset: 0.18em; }
.doc code { background: #1d1d21; padding: 0.05rem 0.3rem; border-radius: 0.2rem; overflow-wrap: anywhere; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.doc .doc-lede { color: var(--muted); }
.doc-table { width: 100%; overflow-x: auto; margin: 0 0 1rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.45rem 0.6rem 0.45rem 0; border-bottom: 1px solid var(--line); }
.doc th { font-weight: 600; color: var(--muted); }
.doc details { margin: 0 0 1rem; border: 1px solid var(--line); padding: 0.6rem 0.85rem; }
.doc summary { cursor: pointer; color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; }
.doc details[open] summary { margin-bottom: 0.6rem; }
.doc-index { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); font-size: 0.84rem; }
.doc-index ol { margin: 0; padding-left: 0; list-style: none; }
.doc-index ol ol { padding-left: 1rem; margin: 0.1rem 0 0.3rem; color: var(--muted); }
.doc-pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.5; background: #17171a; border: 1px solid var(--line); padding: 0.9rem; margin: 0 0 1rem; overflow-x: auto; }
.get { display: inline-block; margin: 0.25rem 0; padding: 0.4rem 0.75rem; border: 1px solid var(--fg); color: var(--fg); text-decoration: none; font-weight: 500; }
.get:hover { background: var(--fg); color: var(--bg); }
/* The early-access page (4 Nov): its downloads are buttons that send the tester's code, styled as the links were */
button.get { font: inherit; background: none; cursor: pointer; text-align: left; border-radius: 0; }
.ea-code { margin: 0 0 1.25rem; padding: 0.85rem 0.95rem; border: 1px solid var(--line); display: grid; gap: 0.45rem; }
.ea-code label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ea-code input { font: inherit; font-family: var(--font-mono); font-size: 1rem; width: min(100%, 14rem); padding: 0.4rem 0.6rem; border: 1px solid var(--fg); background: var(--bg); color: var(--fg); border-radius: 0; }
.ea-code input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.ea-code .ea-code-note { margin: 0; font-size: 0.84rem; color: var(--muted); }
.ea-code-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ea-code-row .get { margin: 0; }
.ea-code .ea-code-status { margin: 0; min-height: 1.3em; font-size: 0.88rem; color: var(--muted); }
.ea-code .ea-code-status[data-ok="yes"] { color: #35b768; }
.ea-code .ea-code-status[data-ok="yes"]::before { content: "✓ "; }
.ea-code .ea-code-status[data-ok="no"] { color: #e8a87c; }
.night-wide { width: min(100% - 2rem, 48rem); }

.does { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.does li { font-size: 0.84rem; line-height: 1.55; color: var(--muted); padding: 0.5rem 0.7rem; border: 1px solid var(--line); }
.does strong { color: var(--fg); font-weight: 600; }
@media (min-width: 640px) { .does { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sun-beats figcaption { margin: 0.35rem 0 0; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }

/* The friends' page: its jump links */
.tut-jump { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; }
.tut-jump a { color: var(--fg); text-decoration: none; border: 1px solid var(--line); padding: 0.25rem 0.55rem; }
.tut-jump a:hover { border-color: var(--muted); }
kbd { font-family: var(--font-mono); font-size: 0.78em; color: var(--fg); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 0.2rem; padding: 0.02rem 0.3rem; white-space: nowrap; }
.does strong a::after { content: " →"; }
.does strong a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); }
.does strong a:hover { border-bottom-color: var(--fg); }
.doc-index ol ol { columns: 3 11rem; column-gap: 1.25rem; }
.doc-index ol ol li { break-inside: avoid; }
.hold-line a { color: var(--fg); text-underline-offset: 0.18em; }

/* macOS or Windows: the hero alone carries both (Deane, 2 Nov); every picture below it is the Mac's. */
.os-seg button { cursor: pointer; }

/* Home, 3 Nov 2026 (Deane): Mark beside the hand-off is step 5 of How it flows, the width of the row; "What it's for" */
.moves > .room-mark { grid-column: 1 / -1; }
.room-mark .mark-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.room-mark .mark-head .exhibit-plate { width: 6.4rem; }
.room-mark .mark-head h2 { margin: 0; }
.room-mark .moves h3 { margin: 0 0 0.35rem; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 550; letter-spacing: -0.02em; }
.room-guide .room-about { margin-top: 0.6rem; }
.room-guide .sun-jump { margin: 0; }
.role-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.role-pick a { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.5rem 0.8rem; border: 1px solid var(--line); border-radius: 4px; color: var(--fg); text-decoration: none; font-size: 0.92rem; }
.role-pick a:hover, .role-pick a:focus-visible { border-color: #35b768; }
.role-pick span, .role h3 span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.role h3 span { margin-right: 0.45rem; }
.role { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; margin: 0 -1rem; border: 1px solid transparent; border-radius: 6px; scroll-margin-top: 1.5rem; transition: border-color 0.5s, background-color 0.5s; }
.role h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.role > p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted); max-width: 40rem; }
.role .role-see { font-family: var(--font-mono); font-size: 0.72rem; }
.role .role-see a { color: var(--fg); text-underline-offset: 0.18em; }
.role:target { border-color: #35b768; background-color: rgba(53, 183, 104, 0.07); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Downloads (2 Nov 2026, Deane's pick B): Store's place, three cards, then four steps */
.dl { width: min(100%, 74rem); margin: 2.25rem auto 0; display: grid; gap: 2rem; }
.dl-head { display: grid; gap: 0.6rem; }
.dl-head .sun-kicker { margin: 0; }
.dl h1 { margin: 0; font-family: var(--font-serif); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 550; letter-spacing: -0.02em; line-height: 1.1; }
.dl .lede { margin: 0; max-width: 40rem; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.dl kbd { font-family: var(--font-mono); font-size: 0.8em; padding: 0.05rem 0.35rem; border: 1px solid var(--line); border-radius: 3px; }
.dl a { color: var(--fg); text-underline-offset: 0.18em; }
.dl .meta { margin: 0.4rem 0 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
.dl-get { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.6rem 0.95rem; border: 1px solid var(--line); border-radius: 4px; color: var(--fg); font-size: 0.9rem; white-space: nowrap; }
.btn span { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }
.btn.is-main { background: #35b768; border-color: #35b768; color: #07140c; font-weight: 600; }
.btn.is-main span { color: #0d2a17; }
.btn.is-soon { opacity: 0.6; }
.cards { display: grid; gap: 1rem; }
@media (min-width: 680px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.02); }
.card > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.card .body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.55rem; align-content: start; }
.card .chip { margin: 0; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card h2 { margin: 0; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 550; letter-spacing: -0.02em; }
.card .body > p:not(.chip):not(.meta) { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.filelist { margin: 0; padding: 1rem 1.1rem; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; align-content: start; background: #f6f3ec; }
.filelist li { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; justify-content: space-between; gap: 0.3rem; padding: 0.4rem 0.5rem; border: 1px solid rgba(28, 25, 20, 0.15); border-radius: 3px; background: #fffdf8; color: #1c1914; font-size: 0.66rem; line-height: 1.25; }
.filelist span { font-family: var(--font-mono); font-size: 0.62rem; color: #8a7f6c; white-space: nowrap; flex: none; }  /* a folder's number never breaks (3 Nov: 21 read 2 / 1) */
.dl-also, .dl-help { margin: 0; font-size: 0.9rem; color: var(--muted); }
.dl-also strong { color: var(--fg); }
.dl-steps { border-top: 1px solid var(--line); padding-top: 1.25rem; display: grid; gap: 0.75rem; scroll-margin-top: 1rem; }
.dl-steps h2 { margin: 0; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 550; letter-spacing: -0.02em; }
.dl-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 0.6rem; }
@media (min-width: 760px) { .dl-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 2rem; } }
.dl-steps li { counter-increment: s; position: relative; padding-left: 2rem; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
.dl-steps li::before { content: counter(s); position: absolute; left: 0; top: 0.05rem; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg); }
.dl-steps strong { color: var(--fg); font-weight: 600; }

/* What it's for (2 Nov, round 4): four in a row for Open & Read; the camera's corner marked */
.sun-shots.is-four { grid-template-columns: 1fr; }
@media (min-width: 560px) { .sun-shots.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sun-shots.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cam-wrap { position: relative; display: block; }
.cam-mark { position: absolute; left: 67.6%; top: 67.6%; width: 32.4%; height: 29.6%; display: grid; place-items: center; align-content: center; gap: 2%; pointer-events: none; }
.cam-mark svg { width: 34%; height: auto; fill: rgba(255, 255, 255, 0.85); }
.cam-mark b { font: 600 clamp(0.5rem, 1.1vw, 0.7rem)/1 var(--font-sans); color: #fff; background: rgba(0, 0, 0, 0.55); padding: 0.15rem 0.35rem; border-radius: 3px; letter-spacing: 0.02em; }

/* Downloads: the demo files' folders as a list */
.filelist.is-long { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; padding: 0.75rem 0.9rem; }
.filelist.is-long li { flex-direction: row; justify-content: flex-start; gap: 0.4rem; padding: 0.22rem 0.4rem; font-size: 0.62rem; }