:root {
  /* Sunny: warm paper stock, near-black ink. Iris survives only where
     something is interactive, so the page still reads as Leaf. */
  --color-ink: #22211c;
  --color-ink-2: #4b483e;
  --color-ink-3: #837e70;
  --color-ink-4: #6f6a5d;
  --color-page: #efedE4;
  --color-page-2: #e9e6da;
  --color-board: #f4f2ea;
  --color-board-2: #e4e0d2;
  --color-card: #f7f5ee;
  --color-rule: #d6d1bf;
  --color-rule-2: #e0dccc;
  --color-iris: #2945ca;
  --color-iris-2: #4361e0;
  --color-iris-soft: #e4e6f3;
  --color-iris-line: #c3c8e4;
  --color-clay: #a83b21;
  --color-night: #1b1a15;
  --frame: 7px;
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shell: 1080px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { margin: 0; }

body {
  background: var(--color-page);
  padding: var(--frame);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ── the field ───────────────────────────────────────────────────────────── */

.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* The printed screen: a fine, regular dot grid over the whole sheet. Kept
   tighter than the mark's own halftone so the two never beat against each
   other. */
.paper {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.3;
  background-image: radial-gradient(var(--color-ink) 0.5px, transparent 0.55px);
  background-size: 5px 5px;
}

/* Film grain. Overlay rather than multiply, so it speckles the dark ink light
   and the paper dark - which is what makes it look printed instead of dusty. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.36;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* The mat the whole sheet is trimmed into. */
.frame {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border: var(--frame) solid var(--color-ink);
}

main, .bar, .foot { position: relative; z-index: 2; }

/* ── chrome ──────────────────────────────────────────────────────────────── */

.bar {
  position: fixed;
  top: var(--frame); left: var(--frame); right: var(--frame);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1.2rem, 4vw, 2.5rem) 0.9rem;
  background: linear-gradient(180deg, rgb(239 237 228 / 0.95), rgb(239 237 228 / 0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-image: linear-gradient(180deg, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  text-decoration: none;
}

.tile {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--color-iris);
  color: var(--color-page);
  box-shadow: 0 2px 6px rgb(41 69 202 / 0.3);
}

.wordmark.small .tile { width: 21px; height: 21px; border-radius: 6px; }

.word {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.wordmark.small .word { font-size: 17px; }

.bar-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.label-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin: 0;
}

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

section {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 12vh, 9rem) clamp(1.15rem, 5vw, 3rem);
  min-height: 100vh;
  min-height: 100svh;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.032em;
  line-height: 1.05;
  margin: 0;
  font-weight: 700;
}

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

/* The mark gets its own half of the screen. Sitting it behind the headline
   just buries it. */
/* The mark gets its own half of the screen, with margin. Sitting it behind the
   headline just buries it. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-top: clamp(6rem, 13vh, 8.5rem);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-stage { width: 100%; aspect-ratio: 1 / 0.96; }
.close-stage { width: min(100%, 340px); aspect-ratio: 1 / 0.96; margin-bottom: -6%; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.3rem;
  padding: 0.32rem 0.85rem 0.32rem 0.6rem;
  border: 1px solid var(--color-iris-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-iris);
}

.pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-iris);
  animation: pip 2s ease-in-out infinite;
}

h1 {
  font-size: clamp(36px, 4.6vw, 62px);
  max-width: 14ch;
}

h1 em {
  display: block;
  font-style: normal;
  color: var(--color-iris);
  margin-top: 0.1em;
}

.lede {
  max-width: 40ch;
  margin: 1.35rem 0 0;
  font-size: clamp(15.5px, 1.15vw, 18px);
  color: var(--color-ink-2);
}

/* ── the form ────────────────────────────────────────────────────────────── */

.join-wrap { width: min(100%, 452px); margin-top: 1.9rem; }

.join {
  display: flex;
  width: 100%;
  padding: 5px;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background: rgb(244 242 234 / 0.9);
  box-shadow: 0 1px 2px rgb(34 33 28 / 0.06), 0 22px 46px -24px rgb(34 33 28 / 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 200ms var(--ease), box-shadow 300ms var(--ease);
}

.join:focus-within {
  border-color: var(--color-iris);
  box-shadow: 0 0 0 4px rgb(41 69 202 / 0.1), 0 22px 46px -24px rgb(34 33 28 / 0.38);
}

.join input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  /* Without this, type="email" keeps its native OS widget chrome in some
     engines, which sizes itself and silently ignores the `height` above —
     the input then renders at its intrinsic text height instead of ours,
     out of proportion with the button beside it. */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  padding: 0 0.95rem;
  outline: none;
}

.join input::placeholder { color: var(--color-ink-3); }

.join button {
  flex-shrink: 0;
  height: 44px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-iris);
  color: var(--color-page);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgb(41 69 202 / 0.3);
  transition: background 150ms var(--ease), transform 150ms var(--ease);
}

.join button:hover { background: var(--color-iris-2); }
.join button:active { transform: scale(0.98); }
.join button:disabled { opacity: 0.65; cursor: wait; }
.join.is-joined { border-color: var(--color-iris); }

.status {
  min-height: 1.35rem;
  margin: 0.7rem 0 0;
  font-size: 13.5px;
  color: var(--color-ink-3);
}

.status.ok { color: var(--color-iris); }
.status.err { color: var(--color-clay); }

.beats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink-2);
}

.beats li { display: flex; align-items: center; gap: 0.45rem; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.9rem;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  animation: hint 3.4s ease-in-out infinite;
}

/* ── the three beats ─────────────────────────────────────────────────────── */

.beat {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  width: min(100%, var(--shell));
  margin-inline: auto;
}

.beat.right { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.beat.right .beat-copy { order: 2; }
.beat.right .card-real { order: 1; }

.beat-copy { width: 100%; }

.beat-copy h2 {
  font-size: clamp(29px, 3.8vw, 50px);
  margin: 0.7rem 0 1.1rem;
}

.beat-copy p {
  margin: 0 0 1rem;
  color: var(--color-ink-2);
  font-size: clamp(15px, 1.1vw, 17px);
}

.beat-copy p em { font-style: normal; color: var(--color-iris); font-weight: 500; }

.beat-copy .aside {
  margin-top: 1.5rem;
  padding-left: 0.95rem;
  border-left: 2px solid var(--color-iris-line);
  color: var(--color-ink-3);
  font-size: 14.5px;
}

/* ── the real product cards ──────────────────────────────────────────────
   Lifted from the app itself, re-inked for paper: warm stock, near-black
   type, and iris kept as the single spot colour the way a two-colour riso
   print would use it. */

.card-real {
  margin: 0;
  border: 1px solid var(--color-rule);
  border-radius: 16px;
  background: var(--color-card);
  box-shadow: 0 1px 2px rgb(34 33 28 / 0.05), 0 30px 60px -42px rgb(34 33 28 / 0.42);
  overflow: hidden;
}

.cr-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.05rem 1.15rem 0;
}

.cr-head-plain { align-items: baseline; justify-content: space-between; }
.cr-who { min-width: 0; flex: 1; }

.cr-name { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.2; }

.cr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35rem;
  margin: 0.28rem 0 0;
  font-size: 12px;
  color: var(--color-ink-3);
}

.cr-meta .dot { color: var(--color-ink-4); }

.cr-h { margin: 0.3rem 0 0; font-size: 20px; letter-spacing: -0.03em; }
.cr-by { margin: 0.28rem 0 0; font-size: 13px; color: var(--color-ink-3); }
.cr-by em { font-style: italic; color: var(--color-ink-2); }

.avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-board-2);
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.avatar-xs { width: 22px; height: 22px; font-size: 8.5px; }

.chip-mood {
  flex-shrink: 0;
  padding: 0.24rem 0.55rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-ink-3);
}

.chip-on {
  border-color: var(--color-iris-line);
  background: var(--color-iris-soft);
  color: var(--color-iris);
}

/* what they read */
.cr-book { display: flex; gap: 0.95rem; padding: 0.9rem 1.15rem 0; }

.cover {
  flex-shrink: 0;
  width: 58px;
  border-radius: 1px 3px 3px 1px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(34 33 28 / 0.16), 0 6px 14px -8px rgb(34 33 28 / 0.3);
}

.cover svg { display: block; width: 100%; height: 87px; }
.cr-title { min-width: 0; }
.cr-title h3 { margin: 0.35rem 0 0; font-size: 21px; line-height: 1.15; }

/* the numbers */
.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1rem 0 0;
  padding: 0 1.15rem;
}

.strip div { padding: 0 0.5rem; border-left: 1px solid var(--color-rule-2); }
.strip div:first-child { padding-left: 0; border-left: 0; }
.strip dd { margin: 0; font-family: var(--font-mono); font-size: 17px; font-weight: 500; line-height: 1; }
.strip dd.accent { color: var(--color-iris); }
.strip dt {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* the trail */
.trail { position: relative; margin: 0.85rem 1.15rem 0; padding-top: 9px; }
.trail-row { display: flex; align-items: center; justify-content: space-between; gap: 3px; }

.td {
  flex: 1;
  max-width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
}

.t0 { box-shadow: inset 0 0 0 1px var(--color-rule); }
.t1 { background: rgb(41 69 202 / 0.22); }
.t2 { background: rgb(41 69 202 / 0.5); }
.t3 { background: var(--color-iris); }

.trail-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--color-ink);
  line-height: 0;
}

/* what they thought */
.quote {
  margin: 0.9rem 1.15rem 0;
  padding: 0.7rem 0.85rem;
  border-left: 2px solid #b07d2a;
  border-radius: 3px;
  background: rgb(200 148 58 / 0.11);
}

.quote svg { color: #97691f; }
.quote blockquote {
  margin: 0.3rem 0 0;
  font-size: 15px;
  line-height: 1.45;
  font-style: italic;
}
.quote figcaption { margin-top: 0.5rem; }

/* social */
.cr-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.72rem 1.15rem;
  border-top: 1px solid var(--color-rule-2);
}

.cr-foot-plain { justify-content: space-between; margin-top: 0.9rem; }

.btn-leaf, .btn-ghost {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.42rem;
  height: 34px;
  padding: 0 0.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-ink-2);
}

.btn-leaf {
  border-color: var(--color-iris-line);
  background: var(--color-iris-soft);
  color: var(--color-iris);
}
.btn-leaf svg { fill: currentColor; }
.cr-foot .btn-ghost:last-child { margin-left: auto; }
.cr-foot-plain .btn-ghost:last-child { margin-left: 0; }

/* the heatmap */
.heat {
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  gap: 3px;
  margin: 0.9rem 1.15rem 0;
}

.hm-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hc { width: 100%; aspect-ratio: 1; border-radius: 50%; }
.h0 { box-shadow: inset 0 0 0 1px var(--color-rule); }
.h1 { background: rgb(41 69 202 / 0.25); }
.h2 { background: rgb(41 69 202 / 0.5); }
.h3 { background: rgb(41 69 202 / 0.75); }
.h4 { background: var(--color-iris); }

.months, .legend {
  display: flex;
  margin: 0.5rem 1.15rem 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.months { justify-content: space-between; }
.legend { align-items: center; justify-content: flex-end; gap: 0.3rem; }
.legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-iris); }
.legend i:nth-of-type(1) { background: none; box-shadow: inset 0 0 0 1px var(--color-rule); }
.legend i:nth-of-type(2) { opacity: 0.25; }
.legend i:nth-of-type(3) { opacity: 0.5; }
.legend i:nth-of-type(4) { opacity: 0.75; }

.ledger {
  margin: 1rem 0 0;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--color-rule-2);
  font-size: 13.5px;
}

.ledger div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
}

.ledger dt { color: var(--color-ink-3); }
.ledger dd { margin: 0; color: var(--color-ink); }

/* the room */
.room { margin: 0.85rem 0 0; padding: 0 1.15rem; list-style: none; }

.rm {
  display: grid;
  grid-template-columns: 22px minmax(64px, 1fr) minmax(0, 2.6fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0;
}

.rm-name { font-size: 13px; color: var(--color-ink-2); }
.rm-here .rm-name { color: var(--color-ink); font-weight: 500; }
.rm-bar { position: relative; }
.rm-bar .trail-row { gap: 2px; }
.rm-bar .td { max-width: 5px; }
.rm-page { font-size: 11.5px; color: var(--color-ink-3); }
.rm-here .rm-page { color: var(--color-iris); }

/* ── the six parts ───────────────────────────────────────────────────────── */

.parts {
  flex-direction: column;
  justify-content: center;
}

.parts-head { text-align: center; margin-bottom: 3rem; }
.parts-head h2 { font-size: clamp(29px, 3.6vw, 46px); margin-top: 0.65rem; }

/* Three across, two down. An even block - not a ragged auto-fit that leaves
   two cards stranded on the second row. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: min(100%, var(--shell));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 16px;
  background: rgb(244 242 234 / 0.82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 2px rgb(34 33 28 / 0.03), 0 24px 40px -30px rgb(34 33 28 / 0.42);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgb(34 33 28 / 0.04), 0 30px 50px -30px rgb(34 33 28 / 0.5);
}

.card h3 {
  font-size: 19px;
  margin: 1.15rem 0 0.5rem;
}

.card p {
  margin: 0;
  font-size: 14.5px;
  color: var(--color-ink-3);
  line-height: 1.58;
}

/* The glass tile, after the calendar icon: a squircle of frosted white with a
   warm-to-cool chip behind the glyph, a hard specular lip along the top edge,
   and a long soft cast beneath. */
.glass {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 27%;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-iris);
  background: linear-gradient(176deg, #fbfaf4 0%, #f2f0e7 58%, #e2ded0 100%);
  box-shadow:
    inset 0 1.2px 0 rgb(255 255 252 / 0.95),
    inset 0 0 0 1px rgb(255 255 252 / 0.55),
    inset 0 -11px 15px -11px rgb(34 33 28 / 0.16),
    0 1px 1px rgb(34 33 28 / 0.05),
    0 15px 26px -14px rgb(34 33 28 / 0.36);
  transition: transform 380ms var(--ease), box-shadow 380ms var(--ease);
}

/* the coloured chip that shows through the glass */
.glass::before {
  content: "";
  position: absolute;
  inset: 13% 13% 52%;
  border-radius: 30% 30% 42% 42%;
  background: linear-gradient(102deg, #f7c862, #7b99f2 58%, var(--color-iris-2));
  filter: blur(3px);
  opacity: 0.55;
  z-index: -1;
  transition: transform 520ms var(--ease), opacity 380ms var(--ease);
}

/* the sheen travelling across the face */
.glass::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    104deg,
    transparent 38%,
    rgb(255 255 255 / 0.72) 48%,
    transparent 58%
  );
  transform: translateX(-38%);
  transition: transform 700ms var(--ease);
  pointer-events: none;
}

.card:hover .glass { transform: translateY(-2px) scale(1.03); }
.card:hover .glass::after { transform: translateX(38%); }
.card:hover .glass::before { transform: translateY(-8%) scale(1.12); opacity: 0.92; }

.glass svg { width: 32px; height: 32px; position: relative; }

/* ── the triptych ────────────────────────────────────────────────────────── */

.triptych {
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.slab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex: 1 1 280px;
  max-width: 350px;
  min-height: min(72vh, 520px);
  padding: 2rem 1.7rem;
  border: 1px solid var(--color-rule);
  border-radius: 20px;
  background: rgb(244 242 234 / 0.86);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 1px 2px rgb(34 33 28 / 0.03), 0 34px 56px -40px rgb(34 33 28 / 0.45);
  text-align: center;
}

.slab-top {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-ink-2);
  max-width: 24ch;
}

.slab-foot {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.slab-dark {
  border-color: #2c2a22;
  background: linear-gradient(178deg, #3c3930 0%, #24231d 42%, var(--color-night) 100%);
  color: #f0eee5;
  justify-content: flex-start;
  gap: 0.4rem;
}

.slab-dark .slab-top {
  color: rgb(240 238 229 / 0.7);
  font-size: 14px;
}

.slab-dark .label-cat { color: rgb(214 209 191 / 0.75); }

.slab-body { margin-top: auto; text-align: left; width: 100%; }

.slab-body h3 {
  margin: 0.7rem 0 0;
  font-size: clamp(21px, 1.85vw, 26px);
  line-height: 1.16;
  color: #f6f4ec;
}

.slab-body h3 span { color: rgb(214 209 191 / 0.6); }

.motif {
  width: 100%;
  height: 132px;
  flex-shrink: 0;
}

.motif-loop {
  height: 150px;
  margin: 0.4rem 0 0.2rem;
}

/* ── the close ───────────────────────────────────────────────────────────── */

.close { justify-content: center; text-align: center; }

.close-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 40rem;
}

.close-copy h2 { font-size: clamp(29px, 4vw, 52px); margin: 0.7rem 0 1rem; }
.close-copy p { margin: 0; color: var(--color-ink-2); max-width: 38ch; }

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: 1.6rem clamp(1.15rem, 5vw, 3rem) 2.2rem;
  border-top: 1px solid var(--color-rule);
  background: rgb(239 237 228 / 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.consent {
  max-width: 44ch;
  margin: 0.85rem auto 0;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-ink-3);
}

/* `.close-copy p` (class+type) outranks the class-only rule above and was
   zeroing these margins back out, pinning the block to the left instead of
   centering it. Scope an override to beat it explicitly rather than chase
   specificity with `!important`. */
.join-wrap .consent {
  margin: 0.85rem auto 0;
}

.consent a { color: var(--color-ink-2); text-underline-offset: 2px; }
.consent a:hover { color: var(--color-iris); }

.foot-links { display: flex; gap: 1.1rem; }
.foot-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  text-decoration: none;
}
.foot-links a:hover { color: var(--color-iris); }

/* ── the legal page ─────────────────────────────────────────────────────── */

.doc {
  width: min(100%, 40rem);
  margin: 0 auto;
  padding: clamp(5.5rem, 12vh, 8rem) clamp(1.15rem, 5vw, 2rem) 4rem;
}

.doc h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 0.4rem; }
.doc h2 {
  margin: 2.4rem 0 0.6rem;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.doc p, .doc li { color: var(--color-ink-2); font-size: 15.5px; line-height: 1.68; }
.doc p { margin: 0 0 0.9rem; }
.doc ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.doc li { margin-bottom: 0.35rem; }
.doc a { color: var(--color-iris); text-underline-offset: 2px; }
.doc strong { color: var(--color-ink); font-weight: 600; }
.doc .updated { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-3); }
.doc .back { display: inline-block; margin-top: 2.6rem; font-size: 14px; }

/* ── reveals ─────────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms var(--ease) var(--d, 0ms),
    transform 620ms var(--ease) var(--d, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

@keyframes pip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.78); }
}

@keyframes hint {
  0%, 100% { opacity: 0.5; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 4px); }
}

/* ── narrow ──────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  section { min-height: auto; padding-block: clamp(4.5rem, 11vh, 7rem); }
  .hero { min-height: 100svh; }
  .hero, .beat, .beat.right { grid-template-columns: minmax(0, 1fr); }
  .beat.right .beat-copy, .beat.right .card-real { order: 0; }
  .hero { text-align: center; padding-top: 5.5rem; }
  .hero-copy { align-items: center; }
  .beats { justify-content: center; }
  .hero-stage { width: min(100%, 340px); margin: 0 auto; }
  .stats { display: none; }
  .slab { min-height: 420px; }
  .triptych { flex-direction: column; align-items: center; }
  .slab { max-width: 460px; width: 100%; }
}

/* Real cards carry a lot of furniture; give it room to break sensibly before
   the viewport gets tight. */
@media (max-width: 460px) {
  .cr-head { flex-wrap: wrap; }
  .chip-mood { order: 3; margin-left: 46px; }
  .cr-head-plain { flex-wrap: nowrap; }
  .cr-head-plain .chip-mood { order: 0; margin-left: 0; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.85rem; }
  .strip div:nth-child(3) { padding-left: 0; border-left: 0; }
  .cover { width: 46px; }
  .cover svg { height: 69px; }
  .cr-title h3 { font-size: 19px; }
  .rm { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .rm-bar { display: none; }
  .cr-foot-plain { flex-direction: column; align-items: flex-start; gap: 0.65rem; }
  .quote blockquote { font-size: 14px; }
}

@media (max-width: 640px) {
  .grid { grid-template-columns: minmax(0, 1fr); }

  /* The pill reads fine as one shape in a row, but stacked it nested a
     999px-radius button inside an 18px-radius shell — two different
     roundnesses fighting each other. Split into two independently-rounded
     controls instead, at the corner radius the rest of the page's cards use. */
  .join {
    flex-direction: column;
    gap: 0.65rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .join input {
    /* Sized by vertical padding, not `height`: some engines refuse an
       explicit height on text inputs (this one ignores it even inline with
       !important), but padding always counts. height stays as a cap for the
       engines that do honour it — border-box absorbs the padding there, so
       both paths land on the same ~58px pill as the button. */
    height: 58px;
    padding-top: 17px;
    padding-bottom: 17px;
    /* 16px, not 15 — anything smaller makes iOS Safari zoom the whole page
       in on focus, which reads as the input being broken. */
    font-size: 16px;
    text-align: center;
    border: 1px solid var(--color-rule);
    border-radius: 16px;
    background: rgb(244 242 234 / 0.9);
    box-shadow: 0 1px 2px rgb(34 33 28 / 0.06), 0 14px 28px -20px rgb(34 33 28 / 0.36);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
  }
  .join input:focus {
    border-color: var(--color-iris);
    box-shadow: 0 0 0 4px rgb(41 69 202 / 0.12);
    outline: none;
  }
  .join button {
    width: 100%;
    height: 58px;
    border-radius: 16px;
    font-size: 15.5px;
  }
  .bar-note { display: none; }
  .scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pip, .scroll-hint { animation: none; }
  [data-reveal] { transition-duration: 1ms; }
  .card, .glass, .glass::after, .glass::before { transition: none; }
}