/*
 * Arted — the landing page, in the Refrain system.
 *
 * Every value here is lifted from `apps/mobile/src/design/tokens.ts`. Where the web
 * needs a value the app has no equivalent for (the widest display size, the reading
 * column), the token's *ratio* is kept and the size is scaled. Two rules from the
 * system are load-bearing and are not negotiable per-section:
 *
 *   1. Every section is an encounter above a 3px seam and the idea beneath it.
 *   2. `--signal` means return. It appears on the mark's full stop and on the echo.
 *      Nothing else, ever — it is not a button colour and not a highlight.
 *
 * No web fonts, no analytics, no third-party anything: the page makes zero network
 * requests beyond its own two files.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  /* palette.light */
  --paper: #ffffff;
  --surface-muted: #f2f2ee;
  --ink: #0b0b0b;
  --ink-muted: #5e5e58;
  --border: #d6d6d0;
  --on-accent: #ffffff;
  --signal: #d0021b;
  --on-signal: #ffffff;

  /* palette.light.mastery — a monochrome ramp, not five hues */
  --mastery-1: #6b6b64;
  --mastery-2: #57574f;
  --mastery-3: #3e3e38;
  --mastery-4: #262622;
  --mastery-5: #0b0b0b;

  /* spacing */
  --xs: 4px;
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --xl: 32px;
  --xxl: 48px;

  /* seam, radius, targets */
  --seam: 3px;
  --radius: 0;
  --target: 44px;

  /* motion */
  --quick: 140ms;
  --standard: 220ms;
  --celebration: 520ms;

  /* two voices */
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --machine: ui-monospace, Menlo, "SF Mono", "DejaVu Sans Mono", monospace;
  /* The wordmark only, per brand/README.md: a high-contrast editorial serif. */
  --wordmark: "Didot", "Bodoni 72", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b0b0b;
    --surface-muted: #1a1a18;
    --ink: #f3f2ee;
    --ink-muted: #9c9c93;
    --border: #2c2c27;
    --on-accent: #0b0b0b;
    --signal: #ff4438;
    --on-signal: #0b0b0b;
    --mastery-1: #8e8e85;
    --mastery-2: #a6a69c;
    --mastery-3: #bfbfb4;
    --mastery-4: #d9d8ce;
    --mastery-5: #f3f2ee;
  }
}

/* ── Reset, and the reading rhythm ──────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 var(--md); }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--md);
  top: var(--md);
  z-index: 10;
  background: var(--ink);
  color: var(--on-accent);
  padding: var(--sm) var(--md);
  font-family: var(--machine);
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* ── The two registers ──────────────────────────────────────────────────── */

.machine {
  font-family: var(--machine);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.display {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.display--xl { font-size: clamp(46px, 10.5vw, 128px); }
.display--lg { font-size: clamp(34px, 5.4vw, 68px); line-height: 1.05; }
.display--card { font-size: clamp(24px, 2.4vw, 28px); line-height: 1.07; letter-spacing: -0.02em; }
.display--num { font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.035em; }

.deck {
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.35;
  font-weight: 400;
  color: var(--ink-muted);
  max-width: 30em;
  margin-top: var(--lg);
}

/* ── The one rule: encounter, seam, idea ────────────────────────────────── */

.band { padding-block: clamp(40px, 5vw, 72px) 0; }
.band--hero { padding-top: clamp(32px, 4vw, 64px); }
.band--muted { background: var(--surface-muted); }
.band--close { padding-bottom: 0; }

.seam {
  height: var(--seam);
  margin: clamp(32px, 4vw, 56px) 0 0;
  border: 0;
  background: var(--ink);
}
.seam--card { margin: var(--lg) 0 0; }

.idea {
  padding-block: clamp(28px, 3vw, 40px) clamp(40px, 5vw, 64px);
  display: grid;
  gap: var(--lg);
}

.idea__label { margin: 0; }
.idea__body { max-width: 62ch; }
.idea__body--wide { max-width: none; }
.measure { max-width: 62ch; }
.idea__body > p { margin-bottom: var(--lg); }

@media (min-width: 900px) {
  .idea {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--xxl);
  }
  .idea__body--split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--xxl);
    align-items: start;
  }
}

.encounter__kicker { margin: 0 0 var(--lg); }
.encounter--figure {
  display: grid;
  gap: var(--xl);
  align-items: center;
}
@media (min-width: 900px) {
  .encounter--figure {
    grid-template-columns: minmax(0, 22em) minmax(0, 1fr);
    gap: var(--xxl);
  }
  .encounter--figure .register { max-width: 22em; }
}
.encounter--tight .deck { margin-top: var(--lg); }

/* ── Controls ───────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
  min-height: var(--target);
  padding: 0 var(--lg);
  background: var(--ink);
  color: var(--on-accent);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--quick) ease, color var(--quick) ease;
}
.button:hover { background: var(--paper); color: var(--ink); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md) var(--lg);
  margin-top: var(--xl);
}
.cta-row__note { max-width: 24em; }

.footnote { color: var(--ink-muted); }

.caption {
  margin: var(--md) 0 0;
  font-size: 10px;
  letter-spacing: 0.9px;
}

/* ── The app's own illustrations ────────────────────────────────────────────
 *
 * The spots ship with the app as black artwork with value in the alpha channel
 * only, which is exactly what a mask wants: drawn as a mask over `--ink`, one file
 * serves the light page and the dark one, and it is the theme's ink either way.
 * An <img> could not do that without a filter that lies about the colour. */

.spot {
  display: block;
  background-color: var(--ink);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.spot[data-spot="topic-japanese-art"] {
  -webkit-mask-image: url("assets/spots/topic-japanese-art.png");
  mask-image: url("assets/spots/topic-japanese-art.png");
}
.spot[data-spot="topic-ancient-egypt"] {
  -webkit-mask-image: url("assets/spots/topic-ancient-egypt.png");
  mask-image: url("assets/spots/topic-ancient-egypt.png");
}
.spot[data-spot="topic-dutch-golden-age"] {
  -webkit-mask-image: url("assets/spots/topic-dutch-golden-age.png");
  mask-image: url("assets/spots/topic-dutch-golden-age.png");
}
.spot[data-spot="topic-myth-and-religion"] {
  -webkit-mask-image: url("assets/spots/topic-myth-and-religion.png");
  mask-image: url("assets/spots/topic-myth-and-religion.png");
}

/* ── The stores ─────────────────────────────────────────────────────────────
 *
 * The call to action, and both go to the waitlist: there is nothing to download,
 * and a button that says "coming soon" on its face cannot mislead anybody. The
 * glyphs are drawn here rather than borrowed — a store's own badge is its
 * trademark, and one is not ours to reproduce before we are in it. */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md);
  margin: var(--xl) 0 var(--md);
}
.store {
  display: inline-flex;
  align-items: center;
  gap: var(--md);
  min-height: 56px;
  padding: var(--sm) var(--lg) var(--sm) var(--md);
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--quick) ease, color var(--quick) ease;
}
.store:hover { background: var(--ink); color: var(--on-accent); }
.store__glyph {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.store__text { display: grid; gap: 2px; }
.store__kicker { color: inherit; opacity: 0.65; }
.store__name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.stores__note { margin: 0; }

/* ── The phone ──────────────────────────────────────────────────────────────
 *
 * A frame, a screen, and four cards that cross-fade. The frame is drawn with the
 * page's own rules — one keyline, no radius on the outer edge would look like a
 * slab, so the phone is the single exception to `radius: 0` and it is here rather
 * than in the tokens because it is a picture of a device, not a control. */

.phone-figure { margin: 0; display: grid; justify-items: start; gap: var(--md); }
.phone {
  width: 100%;
  max-width: 320px;
  padding: 10px;
  border: 1px solid var(--ink);
  border-radius: 34px;
  background: var(--paper);
}
.phone__screen {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 9 / 17;
  background: var(--paper);
}
.screen {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  transition: opacity var(--standard) ease;
}
.screen.is-current { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .screen { transition: none; }
}
.screen__image {
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  border-bottom: var(--seam) solid var(--ink);
  padding: var(--lg);
}
.screen__image .spot { width: 72%; aspect-ratio: 1; }
.screen__idea { padding: var(--md) var(--md) var(--lg); }
.screen__meta { margin: 0 0 var(--sm); }
.screen__hook {
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.gallery-dots { display: flex; gap: var(--sm); }
.gallery-dots button {
  width: 26px;
  height: var(--target);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.gallery-dots button::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--border);
  transition: background var(--quick) ease;
}
.gallery-dots button[aria-selected="true"]::after { background: var(--ink); }

/* ── The echo ───────────────────────────────────────────────────────────── */

.register__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  margin-bottom: var(--md);
}
.register__proposition {
  display: flex;
  align-items: center;
  gap: var(--sm);
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 1.1px;
}
.rule {
  display: inline-block;
  width: 3px;
  align-self: stretch;
  min-height: 1.1em;
  background: var(--ink);
}
.chip {
  margin: 0;
  padding: var(--sm) var(--md);
  white-space: nowrap;
}
.chip--signal { background: var(--signal); color: var(--on-signal); }

.register {
  margin: 0;
  padding: var(--lg);
  border: 1px solid var(--border);
  background: var(--paper);
}
.register__echo {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.register__echo li {
  padding: var(--md) 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.register__echo li:last-child { border-bottom: 0; color: var(--signal); }

/* Opacity and translation only, exactly as the app's Echo does it.
 *
 * The rows are visible in the stylesheet and hidden only by `is-armed`, which
 * JavaScript adds at the moment it takes responsibility for revealing them. The
 * arrival is an enhancement; the encounters are the information, and nothing about
 * a missed observer, a throttled background tab or a failed script may cost them. */
.register.is-armed .register__echo li {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity var(--standard) ease, transform var(--standard) ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.register.is-armed.is-in .register__echo li {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .register.is-armed .register__echo li { opacity: 1; transform: none; transition: none; }
}

/* ── The mastery ramp ───────────────────────────────────────────────────── */

.ramp {
  list-style: none;
  margin: 0 0 var(--xl);
  padding: 0;
  display: grid;
  gap: var(--sm);
  max-width: 34em;
}
.ramp__step { display: flex; align-items: center; gap: var(--md); }
.ramp__track { flex: 0 0 62%; display: block; }
.ramp__bar { display: block; height: 12px; background: var(--mastery-1); }
.ramp__step[data-step="1"] .ramp__bar { width: 18%; }
.ramp__step[data-step="2"] .ramp__bar { width: 36%; background: var(--mastery-2); }
.ramp__step[data-step="3"] .ramp__bar { width: 58%; background: var(--mastery-3); }
.ramp__step[data-step="4"] .ramp__bar { width: 79%; background: var(--mastery-4); }
.ramp__step[data-step="5"] .ramp__bar { width: 100%; background: var(--mastery-5); }
.ramp__step .machine { color: var(--ink); }
.ramp__gate {
  margin: var(--sm) 0;
  padding-top: var(--sm);
  border-top: var(--seam) solid var(--ink);
  color: var(--ink);
}

/* ── Numbers, tables, lists ─────────────────────────────────────────────── */

.stats {
  margin: 0 0 var(--xl);
  display: grid;
  gap: var(--lg);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat { border-top: 1px solid var(--border); padding-top: var(--md); }
.stat dt { margin-bottom: var(--sm); }
.stat dd { margin: 0; }

.table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--xl);
  font-size: 15px;
}
.table caption {
  text-align: left;
  padding-bottom: var(--md);
  font-family: var(--machine);
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.table th, .table td {
  text-align: right;
  padding: var(--md) var(--sm);
  border-bottom: 1px solid var(--border);
}
.table thead th {
  font-family: var(--machine);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: var(--seam) solid var(--ink);
}
.table th[scope="row"] { text-align: left; font-weight: 700; }
.table thead th:first-child { text-align: left; }

.subjects { list-style: none; margin: 0 0 var(--xl); padding: 0; }
.subjects li {
  display: flex;
  align-items: center;
  gap: var(--md);
  padding: var(--md) 0;
  border-bottom: 1px solid var(--border);
}
.subjects li:first-child { border-top: var(--seam) solid var(--ink); }
.subjects .spot--inline { width: 28px; height: 28px; flex: 0 0 auto; }
.subjects__name { font-weight: 700; letter-spacing: -0.01em; flex: 1 1 auto; }
.subjects__count { flex: 0 0 auto; }

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 var(--sm);
}
.tally span { width: 3px; height: 18px; background: var(--ink); }

.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.nots li {
  padding: var(--lg) 0;
  border-bottom: 1px solid var(--border);
  max-width: 62ch;
}
.nots li:first-child { padding-top: 0; }
.nots li:last-child { border-bottom: 0; }

/* ── The waitlist ───────────────────────────────────────────────────────── */

.signup { max-width: 34em; }
.signup label { display: block; margin-bottom: var(--sm); }
.signup__row { display: flex; flex-wrap: wrap; gap: var(--md); }
.signup input {
  flex: 1 1 16em;
  min-height: var(--target);
  padding: 0 var(--md);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
}
.signup input::placeholder { color: var(--ink-muted); }
.signup__status { margin: var(--md) 0 0; min-height: 1.45em; color: var(--ink); }
.signup__status[data-state="error"] { color: var(--ink); text-decoration: underline; }

/* ── Masthead and footer ────────────────────────────────────────────────── */

.masthead { border-bottom: 1px solid var(--border); }
.masthead__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  min-height: 64px;
  padding-block: var(--sm);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sm);
  text-decoration: none;
  color: var(--ink);
}
.brand__mark { width: 20px; height: 20px; color: var(--ink); align-self: center; }
.brand__word {
  font-family: var(--wordmark);
  font-size: 24px;
  letter-spacing: 0.01em;
}
.brand__stop { color: var(--signal); }

.masthead__end {
  display: flex;
  align-items: center;
  gap: var(--md) var(--lg);
  flex-wrap: wrap;
}

.masthead__nav { display: flex; flex-wrap: wrap; gap: var(--md) var(--lg); }
.masthead__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.masthead__nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Below the fold-out width the page reads straight through, and a wrapped
   two-row anchor list costs more height than it saves scrolling. */
@media (max-width: 639px) {
  .masthead__nav { display: none; }
}

/* The language picker.
 *
 * A native <select>, on purpose: it is one control, it is keyboard and screen
 * reader correct without any script, and on a phone the OS already knows how to
 * present a list of five. Set in the machine register, because the language a
 * page is in is something the system knows rather than something a person wrote. */
.lang { display: inline-flex; align-items: center; }
.lang__select {
  min-height: var(--target);
  padding: 0 var(--sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--machine);
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  cursor: pointer;
}
.lang__select:hover { border-color: var(--ink); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.footer__grid {
  display: grid;
  gap: var(--xl);
  padding-block: var(--xl) var(--xxl);
}
@media (min-width: 700px) {
  .footer__grid {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: var(--xxl);
  }
}
.footer__brand { display: inline-flex; align-items: baseline; gap: var(--sm); margin: 0 0 var(--sm); }
.footer__line { margin: 0; }
.footer__heading { margin: 0 0 var(--sm); }
.footer__nav ul { list-style: none; margin: 0; padding: 0; }
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer__nav a:hover { border-bottom-color: var(--ink); }