/* silsode.com — "Lights down". The page is a dark room and the product is the picture on the
   screen. Tokens are docs/BRIEF.md §7.2; type is Imbue (display), Instrument Sans (text) and Chivo
   Mono (positions, dates and counts), served from this domain (§7.4).
   The styles are split by section and load in this order, which the cascade depends on: base,
   hero, strip, features, questions, responsive. */

/* size-adjust brings each face to the presence Gloock had at the same font-size (cap heights are
   close, but Imbue is narrow and light), and matches Instrument Sans to Chivo's x-height. The same
   value on both subsets, so a latin-ext letter (the ō in Shōgun) matches its neighbours. */
@font-face { font-family: Imbue; font-style: normal; font-weight: 300 600; font-display: swap; size-adjust: 116%; src: url(/fonts/imbue-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Imbue; font-style: normal; font-weight: 300 600; font-display: swap; size-adjust: 116%; src: url(/fonts/imbue-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Instrument Sans at 90% width, a fixed instance: the font shorthand resets font-stretch. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 90%; font-display: swap; size-adjust: 102%; src: url(/fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 90%; font-display: swap; size-adjust: 102%; src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chivo Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/chivo-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Chivo Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/chivo-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  /* §7.2, dark */
  --bg: #121110;
  --surface: #1a1917;
  --surface-high: #232120;
  --hairline: #2a2825;
  --rule: #3b3834;
  --text: #e9e4d9;
  --text-dim: #8c8880;
  --text-faint: #5a5650;
  --accent: #d9a441;
  --accent-hover: #e8b95c;
  --on-accent: #121110;
  --st-returning: #7fa37f;
  --st-airing: #d9a441;
  --st-ended: #c9bda5;
  --st-cancelled: #b5695f;
  --st-undecided: #6f8ca8;
  --error: #e3958a;
  /* §7.2, light: the paper the house lights fall on */
  --paper: #efe9dd;
  --ink: #1c1a17;
  --ink-dim: #5e5950;
  --paper-rule: #d8d0c1;
  --ink-accent: #8a6210;

  --display: Imbue, 'Bodoni 72', Didot, 'Times New Roman', serif;
  --display-weight: 500;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Chivo Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(88px, 9.5vw, 144px);
  --grain: url(/img/texture/grain.webp);
  --top-h: 72px;
  /* Where a frame's corner control sits, in the hero and in every demo. */
  --corner: clamp(10px, 1.4vw, 18px);
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg) var(--grain) 0 0 / 256px;
  background-blend-mode: overlay;
  color: var(--text);
  font: 400 18px/1.55 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
/* Display type is set from Imbue's measured ink, at the size-adjust we serve: ascenders reach
   0.87em above the baseline and descenders 0.30em below, so a line of ink is 1.17em tall, while
   the font's own line metrics (ascent 1.10, descent 0.29) sit well outside it.
   - Leading 1.2: the ink plus a hairline, so descenders never meet the ascenders below. Tighter
     collides; looser, with Imbue's small x-height, falls apart into separate lines.
   - Spacing is measured from the ink, not the line box (the way Apple and Figma trim text):
     at leading L the ink starts L/2 − 0.465em inside the box's top and ends 0.705 − L/2em past
     its bottom, so display text pulls up by --ink-top and makes room below for --ink-bottom.
   - No tracking: Imbue's optical size, which the browser picks from the font size, already sets
     its display cut tight. Negative tracking on top is what makes letters touch. */
h1, h2, .screen-title, .fates-word, .done-title, .qa summary, .tap-title, .cu-title, .cal-card b, .row-title {
  --lead: 1.2;
  --ink-top: calc((var(--lead) / 2 - 0.465) * 1em);
  --ink-bottom: calc((0.705 - var(--lead) / 2) * 1em);
  letter-spacing: 0;
}
h1, h2 { font-family: var(--display); font-weight: var(--display-weight); line-height: var(--lead); text-wrap: balance; margin-block: calc(-1 * var(--ink-top)) var(--ink-bottom); }
/* One word per title is lit: projector amber, in a faint glow with the page's grain through it,
   like the fates' glyphs but quieter, breathing slowly. The glow is light added on top of the
   word (screen), not a backdrop behind it: the sections paint their own backgrounds, and a
   layer under the text would fall behind them. Neither the word nor its title forms a stacking
   context, so the grain blends with the page itself. */
.lit { position: relative; color: var(--accent); }
/* The word's box runs from Imbue's ascent (1.10em above the baseline) to its descent (0.29em
   below); the glow reaches 0.3em further down, so it centres on the letters, not above them. */
.lit::before, .lit::after { content: ''; position: absolute; inset: 0 -0.45em -0.3em; pointer-events: none; }
.lit::before {
  background: radial-gradient(closest-side, rgb(217 164 65 / 0.26), rgb(217 164 65 / 0.09) 55%, transparent);
  mix-blend-mode: screen;
  animation: lit-breathe 6.4s var(--ease-in-out) infinite;
}
.lit::after {
  background: var(--grain) 0 0 / 160px; mix-blend-mode: overlay; opacity: 0.55;
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent);
  mask-image: radial-gradient(closest-side, #000 15%, transparent);
}
@keyframes lit-breathe { 50% { opacity: 0.55; transform: scale(1.06, 1.12); } }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button { font: inherit; color: inherit; }
/* Each of these shows its own pressed or changed state, so phones' grey tap flash is off. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
/* The page runs edge to edge (viewport-fit=cover), so in landscape the content keeps clear of
   the notch and rounded corners. */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--text); color: var(--bg); border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.fine { margin-top: 28px; font-size: 14px; color: var(--text-dim); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: none; fill: currentColor; }

h2 { font-size: clamp(38px, 4.8vw, 68px); }

/* Status colours belong to marks and strips, never to text (§7.2). */
.glyph { flex: none; }
[data-status='airing'] { --status: var(--st-airing); }
[data-status='returning'] { --status: var(--st-returning); }
[data-status='undecided'] { --status: var(--st-undecided); }
[data-status='ended'] { --status: var(--st-ended); }
[data-status='cancelled'] { --status: var(--st-cancelled); }
.glyph[data-status] { color: var(--status); }

/* ---------- Buttons, fields ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 54px; padding: 0 24px; border: 0; border-radius: 12px;
  background: var(--accent); color: var(--on-accent);
  font: 600 16px/1 var(--sans); letter-spacing: 0.005em; white-space: nowrap; text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn .icon { margin: 0 -4px 0 10px; }

/* Round controls: pause / play on every animation, and undo. Icons only, labelled for screen
   readers; centred by the grid, with nothing else inside to push them off. */
.pause, .undo {
  flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  color: var(--text); cursor: pointer;
  transition: background-color 160ms var(--ease), opacity 200ms var(--ease), transform 120ms var(--ease);
}
.pause > .icon, .undo > .icon { grid-area: 1 / 1; }
.pause:active, .undo:active { transform: scale(0.92); }
.pause { width: 40px; height: 40px; background: rgb(18 17 16 / 0.5); box-shadow: inset 0 0 0 1px rgb(233 228 217 / 0.1); }
.pause[hidden] { display: none; }
.pause .icon-play, .pause[aria-pressed='true'] .icon-pause { display: none; }
.pause[aria-pressed='true'] .icon-play { display: block; }
.undo { width: 44px; height: 44px; background: rgb(233 228 217 / 0.1); }
/* Out of use, an undo keeps its place, so nothing beside it moves when it comes back. */
.undo[data-off] { opacity: 0; pointer-events: none; }

/* The undo toast (toast.js): after going back, it slides up from the bottom of the window, paper
   on the dark room, with a line along its foot running down its five seconds. */
.undo-toast {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: min(560px, calc(100vw - 32px)); margin-inline: auto;
  padding: 4px 6px 4px 18px; border-radius: 12px; overflow: hidden;
  background: var(--text); color: var(--bg); box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.75);
  font-size: 15px; font-weight: 500; line-height: 1.3;
  transform: translateY(calc(100% + 32px)); visibility: hidden;
  transition: transform 420ms var(--ease), visibility 0s linear 420ms;
}
.undo-toast.is-on { transform: none; visibility: visible; transition: transform 420ms var(--ease); }
.undo-toast-text { padding-block: 10px; }
.undo-toast-btn {
  flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer;
  font: 700 15px var(--sans); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}
.undo-toast :focus-visible { outline-color: var(--bg); }
.undo-toast-time { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: 0.3; transform-origin: left; }
.undo-toast.is-on .undo-toast-time { animation: toast-time 5s linear both; }
.undo-toast.is-held .undo-toast-time { animation-play-state: paused; }
@keyframes toast-time { to { transform: scaleX(0); } }
.btn-small { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 15px; }
.link-btn {
  padding: 10px 2px; border: 0; background: none; cursor: pointer;
  font: 600 15px var(--sans); color: var(--text);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}

.join { position: relative; }
.join-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.join-row { display: flex; gap: 10px; }
.join input[type='email'] {
  flex: 1; min-width: 0; height: 54px; padding: 0 16px;
  border: 1px solid #5f5b54; border-radius: 12px;
  background: rgb(18 17 16 / 0.6); color: var(--text);
  font: 400 17px var(--sans); caret-color: var(--accent);
}
.join input::placeholder { color: #75716a; opacity: 1; }
.join input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.join input[aria-invalid='true'] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.join[data-state='busy'] .btn { cursor: progress; opacity: 0.8; }
.tick { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 10px; font-size: 16px; cursor: pointer; }
.tick input { position: absolute; left: 0; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.tick-box { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #6f6a62; border-radius: 6px; background: rgb(18 17 16 / 0.6); flex: none; }
.tick input:checked + .tick-box { background: var(--text); border-color: var(--text); }
.tick input:checked + .tick-box::after { content: ''; width: 10px; height: 5px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: translateY(-1px) rotate(-45deg); }
.tick input:focus-visible + .tick-box { outline: 2px solid var(--text); outline-offset: 3px; }
.join-msg { margin-top: 6px; font-size: 15px; color: var(--text-dim); }
.join-msg.is-error { color: var(--error); }
.join[data-state='done'] .join-fields { display: none; }
.join-done { outline: none; }
.done-title { font: var(--display-weight) 30px/var(--lead) var(--display); }
.done-text { margin-top: 8px; }