/* ============================================================================
   Whyismigraine — marketing site
   ----------------------------------------------------------------------------
   Dark FIRST, light as the override. Both siblings do the opposite. That is not
   a style preference: apps/whyismigraine/src/theme.ts ships `defaultScheme:
   'dark'` because photophobia is a defining migraine symptom and someone
   opening this at 2pm is disproportionately likely to be opening it *because*
   an attack is starting. The site inherits the stance along with the hexes.

   Every colour below is lifted verbatim from that file — the "ash plum"
   neutrals (oklch hue ~318–326°, 122° off Why Is Pain's ochre and 78° off
   Flarewatch's blush) and the eleven-step EMBER ramp. Nothing is eyeballed.

   NOTHING ON THIS PAGE MOVES. No scroll reveal, no parallax, no fade-in — the
   siblings have all three. Motion and flicker are migraine triggers, so the
   only transitions here are colour, and even those stop under
   prefers-reduced-motion. A happy side effect: "works without JavaScript" is
   true by construction rather than by fallback, because there is no JavaScript.

   Typeface is Manrope alone, vendored offline. The siblings lead with
   Instrument Serif italic; this one refuses the serif entirely and does the
   work with weight instead — 200 against 800, a range Geist does not have.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope_200ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope_500Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope_700Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope_800ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

/* ── Tokens — dark is the default scheme ─────────────────────────────────── */

:root {
  --bg: #1e191e;
  --bg-deep: #161217;
  --bg-frame: #100d11;
  --surface: #2c262d;
  --border: #403841;
  --ink: #d9ccd9;
  --ink-soft: #a597a5;
  --ink-faint: #7c717d;
  --danger: #e97772;

  /* EMBER, dark arc — `color` values, indexes 0…10 */
  --e0: #d8cba4;
  --e1: #dac694;
  --e2: #dec084;
  --e3: #e0b976;
  --e4: #e2b06d;
  --e5: #e2a468;
  --e6: #e19764;
  --e7: #de8960;
  --e8: #da7859;
  --e9: #d56451;
  --e10: #ce4e4d;

  /* The three band tiles the user actually taps: 3 / 7 / 10 */
  --mild-tint: #4e3b19;
  --mild-ink: #efd09c;
  --mild-border: #745929;
  --mod-tint: #502c1b;
  --mod-ink: #f3b79b;
  --mod-border: #7a4328;
  --sev-tint: #4c1f1d;
  --sev-ink: #eca49f;
  --sev-border: #75312f;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --rule: 1px solid var(--border);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f0ebf0; /* L* 94.5 — dimmer than either sibling, on purpose */
    --bg-deep: #e4dee5;
    --bg-frame: #dcd5dd;
    --surface: #f8f5f8; /* tinted, where the siblings can afford #FFFFFF */
    --border: #dad2db;
    --ink: #2a232b;
    --ink-soft: #675d68;
    --ink-faint: #998e99;
    --danger: #b03738;

    --e0: #decd9b;
    --e1: #e2c98b;
    --e2: #e8c47a;
    --e3: #edbe6e;
    --e4: #eeb467;
    --e5: #eca661;
    --e6: #e6955c;
    --e7: #de8458;
    --e8: #d46f4f;
    --e9: #c75643;
    --e10: #b93a3c;

    --mild-tint: #f7e0bb;
    --mild-ink: #7a570a;
    --mild-border: #e9c68a;
    --mod-tint: #f3c8b5;
    --mod-ink: #7c3b18;
    --mod-border: #e0a58a;
    --sev-tint: #e7b1ac;
    --sev-ink: #761319;
    --sev-border: #cb837e;

    color-scheme: light;
  }
}

/* ── Base ────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    'Manrope',
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
}

::selection {
  background: var(--e5);
  color: var(--bg-frame);
}

:focus-visible {
  outline: 2px solid var(--e4);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: var(--rule);
  z-index: 50;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
}

/* ── Layout scaffolding ──────────────────────────────────────────────────── */

.wrap {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  padding-block: clamp(4rem, 11vh, 8.5rem);
  border-top: var(--rule);
}
section:first-of-type {
  border-top: 0;
}

/* The left rail: a hairline and a number. Replaces the siblings' centred
   section headers with something asymmetric and quiet. */
.rail {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0;
}
.rail__no {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  padding-top: 0.5rem;
  border-right: var(--rule);
  align-self: stretch;
}
.rail__body {
  padding-left: clamp(1.25rem, 4vw, 3rem);
  min-width: 0;
}

@media (max-width: 42rem) {
  .rail {
    grid-template-columns: 1fr;
  }
  .rail__no {
    border-right: 0;
    border-bottom: var(--rule);
    padding-bottom: 0.5rem;
    margin-bottom: 1.75rem;
  }
  .rail__body {
    padding-left: 0;
  }
}

/* ── Type ────────────────────────────────────────────────────────────────── */

.eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}

.display {
  font-weight: 200;
  font-size: clamp(2.6rem, 8.5vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.display strong {
  font-weight: 800;
  letter-spacing: -0.045em;
}

.h2 {
  font-weight: 200;
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1.75rem;
  text-wrap: balance;
}
.h2 strong {
  font-weight: 800;
}

.h3 {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 1.75rem 0 0;
}

p {
  max-width: var(--measure);
  color: var(--ink-soft);
}
p strong {
  color: var(--ink);
  font-weight: 700;
}

.fine {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.5rem;
  border-bottom: var(--rule);
  flex-wrap: wrap;
}
.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
  margin-right: auto;
}
/* The mark is the ramp itself, compressed to a stack of three. */
.mark {
  display: inline-block;
  width: 0.72rem;
  height: 1.4rem;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--e2) 0 33.3%,
    var(--e6) 33.3% 66.6%,
    var(--e10) 66.6% 100%
  );
  flex: none;
}
.nav__links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.nav__links a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition:
    color 120ms linear,
    border-color 120ms linear;
}
.nav__links a:hover {
  color: var(--ink);
  border-bottom-color: var(--e6);
}
@media (max-width: 34rem) {
  .nav__links {
    display: none;
  }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid transparent;
  transition:
    background-color 120ms linear,
    color 120ms linear,
    border-color 120ms linear;
}
.btn--solid {
  background: var(--ink);
  color: var(--bg);
}
.btn--solid:hover {
  background: var(--e4);
  color: var(--bg-frame);
}
.btn--ghost {
  border-color: var(--border);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--e6);
  color: var(--e4);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(3.5rem, 13vh, 9rem) clamp(3.5rem, 10vh, 7rem);
}

/* ── The window: this site's signature visual ────────────────────────────────
   48h → 0. The engine's default lens is 6–24h. The last six hours before an
   attack are deliberately EXCLUDED — 81.5% of prodrome events convert to
   headache within 1–6h (Schwedt 2024), so anything logged in there is
   disproportionately likely to be the attack starting rather than its cause.
   Drawing the blind spot, and labelling it, is the most honest thing this
   product does and no competitor would ever show it. */

.window {
  /* `figure` ships a browser-default `margin: 1em 40px` — reset it explicitly
     or the panel sits inset from the column it belongs to. */
  margin: clamp(3rem, 7vh, 5rem) 0 0;
  border: var(--rule);
  border-radius: 4px;
  background: var(--surface);
  overflow: hidden;
}
.window__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  border-bottom: var(--rule);
  background: var(--bg-deep);
  flex-wrap: wrap;
}
.window__title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.window__meta {
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.band {
  display: grid;
  grid-template-columns: 1fr 2.4fr 1fr 0.35fr;
  align-items: stretch;
  min-height: 5.5rem;
}
.band__seg {
  padding: 0.9rem 0.85rem;
  border-right: var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.3rem;
  min-width: 0;
}
.band__seg:last-child {
  border-right: 0;
}
.band__k {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.band__v {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.band__seg--out {
  background: var(--bg-deep);
}
.band__seg--use {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--e5) 22%, transparent),
    transparent 70%
  );
}
.band__seg--use .band__k {
  color: var(--e4);
}
.band__seg--use .band__v {
  color: var(--ink);
}
/* The refused zone: hatched, not coloured. It is absence, not severity. */
.band__seg--blind {
  background-color: var(--bg-frame);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 5px,
    color-mix(in srgb, var(--ink-faint) 26%, transparent) 5px 6px
  );
}
.band__seg--hit {
  background: var(--sev-tint);
  align-items: center;
  justify-content: center;
  padding-inline: 0.4rem;
}
.band__hit {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sev-ink);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}
.window__foot {
  padding: 0.85rem 1.15rem;
  border-top: var(--rule);
  background: var(--bg-deep);
}
.window__foot p {
  margin: 0;
  max-width: none;
}

@media (max-width: 40rem) {
  .band {
    grid-template-columns: 1fr;
  }
  .band__seg {
    border-right: 0;
    border-bottom: var(--rule);
    min-height: 0;
  }
  .band__seg--hit {
    padding-block: 0.6rem;
  }
  .band__hit {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

/* ── Steps ───────────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: var(--rule);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.step {
  background: var(--surface);
  padding: 1.5rem 1.35rem;
}
.step__n {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--e5);
  display: block;
  margin-bottom: 0.9rem;
}
.step p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ── The ramp + bands ────────────────────────────────────────────────────── */

.ramp {
  display: flex;
  margin-top: 2.5rem;
  border-radius: 3px;
  overflow: hidden;
  border: var(--rule);
}
.ramp i {
  flex: 1;
  height: 2.4rem;
}
.ramp__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.tile {
  border-radius: 4px;
  padding: 1rem 1.1rem;
  border: 1px solid;
}
.tile__l {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
}
.tile__r {
  font-size: 0.78rem;
  opacity: 0.85;
}
.tile--mild {
  background: var(--mild-tint);
  border-color: var(--mild-border);
  color: var(--mild-ink);
}
.tile--mod {
  background: var(--mod-tint);
  border-color: var(--mod-border);
  color: var(--mod-ink);
}
.tile--sev {
  background: var(--sev-tint);
  border-color: var(--sev-border);
  color: var(--sev-ink);
}

/* ── Suspects table ──────────────────────────────────────────────────────── */

.suspects {
  margin-top: 2.5rem;
  border: var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
}
.srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem 5.5rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem 1.15rem;
  border-bottom: var(--rule);
  font-size: 0.88rem;
}
.srow:last-child {
  border-bottom: 0;
}
.srow--head {
  background: var(--bg-deep);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.srow__n,
.srow__lift {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.srow__name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: none;
}
.srow__lift strong {
  color: var(--ink);
  font-weight: 800;
}

/* ── Cards (privacy / price) ─────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  background: var(--border);
  border: var(--rule);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2.5rem;
}
.card {
  background: var(--surface);
  padding: 1.5rem 1.35rem;
}
.card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ── Closing ─────────────────────────────────────────────────────────────── */

.closing {
  text-align: center;
}
.closing .display {
  margin-inline: auto;
  max-width: 18ch;
}
.closing .lede,
.closing p {
  margin-inline: auto;
  text-align: center;
}
.closing .actions {
  justify-content: center;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot {
  border-top: var(--rule);
  padding-block: 3rem 4rem;
  background: var(--bg-deep);
}
.foot__mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.foot p {
  margin: 0 0 0.6rem;
  font-size: 0.84rem;
  color: var(--ink-faint);
}
.foot a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition:
    color 120ms linear,
    border-color 120ms linear;
}
.foot a:hover {
  color: var(--e4);
  border-bottom-color: var(--e6);
}
.foot__meta {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: var(--rule);
}

/* ── Legal pages ─────────────────────────────────────────────────────────── */

.legal {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 8vh, 5rem) 4rem;
}
.legal__back {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 2.5rem;
}
.legal__back:hover {
  color: var(--e4);
}
.legal__title {
  font-weight: 200;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 0.5rem;
}
.legal__updated {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0 0 2.5rem;
}
.legal__lede {
  border-left: 2px solid var(--e5);
  padding-left: 1.25rem;
  margin-bottom: 2.5rem;
}
.legal__lede p {
  max-width: none;
}
.legal h2 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: var(--rule);
}
.legal p,
.legal li {
  max-width: none;
  font-size: 0.94rem;
  line-height: 1.7;
}
.legal ul {
  padding-left: 1.2rem;
}
.legal li {
  margin-bottom: 0.4rem;
  color: var(--ink-soft);
}
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--e6);
}
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: var(--bg-deep);
  border: var(--rule);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}
.legal__disclaimer {
  margin-top: 3rem;
  padding: 1.25rem;
  border: 1px solid var(--sev-border);
  background: var(--sev-tint);
  color: var(--sev-ink);
  border-radius: 4px;
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
  :root {
    --bg: #fff;
    --surface: #fff;
    --ink: #000;
    --ink-soft: #333;
    --border: #ccc;
  }
  .nav,
  .foot,
  .legal__back {
    display: none;
  }
}