/* Nightshore marketing surface — landing page and course. The legal pages keep
   style.css on purpose; this file is the app's design system on the web.
   Tokens mirror app/lib/app/theme/app_colors.dart (Aura light / Nightfall dark). */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Italic-Variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #FBF8F4;
  --bg-mid: #FBF8F4;
  --bg-end: #FBF8F4;
  --surface: #FFFDFA;
  --wash: rgba(35, 33, 43, .04);
  --ink: #23212B;
  --ink2: #726E7E;
  --ink3: #736F81;
  --hairline: #EFE9E0;
  --halo: #7E74D6;
  --sacred: #8F7420;
  --accent: #7E74D6;
  --accent-ink: #5A50BA;
  --accent-soft: #F4F1FB;
  --glow: rgba(126, 116, 214, .16);
  --button-fill: #23212B;
  --button-on-fill: #FBF8F4;
  --phone-bg: #FBF8F4;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101426;
    --bg-mid: #0C0F1C;
    --bg-end: #141527;
    --surface: rgba(241, 237, 229, .05);
    --wash: rgba(241, 237, 229, .08);
    --ink: #F1EDE5;
    --ink2: rgba(241, 237, 229, .55);
    --ink3: rgba(241, 237, 229, .5);
    --hairline: rgba(241, 237, 229, .14);
    --halo: #9AA7C7;
    --sacred: #E4C88F;
    --accent: #E4C88F;
    --accent-ink: #E4C88F;
    --accent-soft: rgba(228, 200, 143, .1);
    --glow: rgba(154, 167, 199, .2);
    --button-fill: rgba(241, 237, 229, .08);
    --button-on-fill: #F1EDE5;
    --phone-bg: #101426;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-mid) 55%, var(--bg-end) 100%);
  min-height: 100vh;
  color: var(--ink);
  font: 17px/1.65 var(--sans);
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .15em; }
p { margin: 0 0 1.1em; }
strong { font-weight: 600; }

/* Atmosphere: the app's radial glow, sitting behind the hero. */
.atmosphere {
  position: relative;
  isolation: isolate;
  overflow: clip; /* not hidden: hidden makes a scroll container, and view() timelines would measure against it */
}
.atmosphere::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 8%;
  width: 720px;
  height: 720px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  pointer-events: none;
}

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }
.measure { max-width: 40rem; }

/* Type */
.display, h1, h2.display {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.08;
  margin: 0 0 .5rem;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.005em; margin: 2.6rem 0 .6rem; }
h2.display { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 0 0 .75rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1.6rem 0 .35rem; }
.lede { font-size: 1.15rem; color: var(--ink2); max-width: 34rem; }
.micro {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 0;
  font-size: .92rem;
}
.nav .brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-right: auto;
}
.nav .brand:hover { text-decoration: none; }
.nav .brand svg { width: 20px; height: 20px; fill: var(--accent); }
.nav a { color: var(--ink2); }
.nav a.active { color: var(--ink); font-weight: 600; }
.nav .btn { margin-left: .25rem; white-space: nowrap; }
@media (max-width: 480px) { .nav { gap: 1rem; } .nav .btn { min-height: 40px; padding: .4rem .9rem; font-size: .85rem; } }
.nav a.btn-primary { color: var(--button-on-fill); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 46px;
  padding: .55rem 1.2rem;
  border-radius: 999px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--button-fill); color: var(--button-on-fill); border-color: var(--button-fill); }
@media (prefers-color-scheme: dark) {
  .btn-primary { border-color: rgba(241, 237, 229, .22); }
}
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-quiet { background: transparent; color: var(--accent-ink); padding-left: .25rem; padding-right: .25rem; }

/* Chips — the evidence grade is the signature. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .28rem .7rem .28rem .55rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink2);
  white-space: nowrap;
  align-self: start;
}
.chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink3);
  flex: 0 0 auto;
}
.chip.grade-strong::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chip.grade-mixed::before { background: var(--sacred); }
.chip.grade-anecdotal::before { background: var(--ink3); }
.chip.grade-myth::before { background: transparent; border: 1.5px solid var(--ink2); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 1.5rem 1.6rem;
}
.card-halo { box-shadow: 0 30px 80px -40px var(--glow); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr; } }

/* Hero */
.hero { padding: 3.5rem 0 3rem; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.hero-note { margin-top: 1rem; color: var(--ink3); font-size: .85rem; }

/* The phone — a drawn frame with the breathing orb. No screenshots yet. */
.phone {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 9 / 19;
  margin: 0 auto;
  border-radius: 44px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--phone-bg), var(--phone-bg));
  box-shadow: 0 40px 100px -40px rgba(20, 16, 40, .45), inset 0 0 0 6px var(--surface);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
}
.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, var(--glow) 0%, transparent 55%);
}
.orb {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--surface), var(--accent-soft) 60%, transparent 100%);
  border: 1px solid var(--hairline);
  box-shadow: 0 0 60px 10px var(--glow);
  animation: breathe 8s ease-in-out infinite;
}
.orb::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--accent);
  opacity: .9;
}
@keyframes breathe {
  0%, 100% { transform: scale(.88); }
  50% { transform: scale(1.06); }
}
.phone .cue {
  position: relative;
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.55rem;
  color: var(--ink);
}
.phone .sub { position: relative; color: var(--ink3); font-size: .8rem; margin-top: .2rem; }
.phone .panic-bar {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.2rem;
  padding: .8rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--hairline);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

/* Sections */
.section { padding: 3rem 0; }
.section + .section { border-top: 1px solid var(--hairline); }
.section-head { margin-bottom: 1.5rem; }
.section-head .micro { margin-bottom: .6rem; }

/* Course index list */
.module { margin-bottom: 2rem; }
.module h3 { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 .25rem; }
.module h3 .n { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.4rem; color: var(--accent-ink); }
.module-summary { color: var(--ink2); margin: 0 0 .6rem; }
.lesson-list { list-style: none; margin: 0; padding: 0; }
.lesson-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--hairline);
}
.lesson-list a { grid-column: 1; grid-row: 1; color: var(--ink); font-weight: 500; }
.lesson-list .teaser { grid-column: 1; grid-row: 2; color: var(--ink2); font-size: .9rem; }
.lesson-list .mins { grid-column: 2; grid-row: 1 / span 2; align-self: start; color: var(--ink3); font-size: .8rem; padding-top: .2rem; }

/* Lesson page */
.lesson-head { padding: 2.25rem 0 1.5rem; }
.breadcrumb { font-size: .85rem; color: var(--ink3); margin: 0 0 1.25rem; }
.breadcrumb a { color: var(--ink3); }
.lesson-head h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 22ch; }
.lesson-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; color: var(--ink3); font-size: .85rem; margin-top: 1rem; }
.lesson-body { padding: 1.5rem 0 2rem; font-size: 1.05rem; }
.lesson-body p { margin-bottom: 1.25em; }
.callout {
  border-left: 2px solid var(--accent);
  padding: .2rem 0 .2rem 1.1rem;
  margin: 1.75rem 0;
}
.callout .micro { margin-bottom: .2rem; }
.callout p { margin: 0; }
.check { margin: 2rem 0; }
.check .prompt { font-weight: 600; margin-bottom: .5rem; }
.check ul { margin: 0 0 .75rem; padding-left: 1.2rem; }
details.sources { margin: 2rem 0; }
details.sources summary { cursor: pointer; color: var(--ink2); font-size: .9rem; list-style: none; }
details.sources summary::before { content: "+ "; color: var(--accent-ink); }
details.sources[open] summary::before { content: "– "; }
details.sources ul { list-style: none; padding: 0; margin: .9rem 0 0; font-size: .88rem; color: var(--ink2); }
details.sources li { display: grid; grid-template-columns: auto 1fr; gap: .25rem .6rem; align-items: start; padding: .55rem 0; border-top: 1px solid var(--hairline); }
@media (max-width: 640px) { details.sources li { grid-template-columns: 1fr; } details.sources .src { grid-column: 1; } }
details.sources .src { grid-column: 2; color: var(--ink3); }
.takeaways { list-style: none; padding: 0; margin: 0 0 1rem; }
.takeaways li { padding: .5rem 0 .5rem 1.4rem; position: relative; }
.takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.pager { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 3rem; border-top: 1px solid var(--hairline); font-size: .92rem; }
.pager span { color: var(--ink3); }

.lesson-body blockquote {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: var(--accent-soft);
  border: 1px solid var(--hairline);
  font-weight: 500;
}
.lesson-body ul, .lesson-body ol { padding-left: 1.3rem; margin: 0 0 1.25rem; }
.lesson-body li { margin-bottom: .5rem; }
.lesson-body h2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.6rem; margin: 2rem 0 .5rem; }
em { font-style: italic; }

/* App CTA card */
.cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  margin: 2.5rem 0;
}
@media (max-width: 640px) { .cta { grid-template-columns: 1fr; } }
.cta .mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  box-shadow: 0 0 40px 4px var(--glow);
}
.cta .mark svg { width: 26px; height: 26px; fill: var(--accent); }
.cta p { margin: 0; }
.cta .lead { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.2; margin-bottom: .25rem; }
.cta .fine { color: var(--ink3); font-size: .8rem; margin-top: .5rem; }

/* Quiz — segmented, never slid. Mirrors the app's ScaleSelector. */
.scale { margin: 2rem 0; }
.scale .label { font-weight: 600; margin-bottom: .1rem; }
.scale .help { color: var(--ink2); font-size: .92rem; margin-bottom: .7rem; }
.scale .stops { display: flex; gap: .4rem; }
.scale .stops label { flex: 1 1 0; position: relative; }
.scale .stops input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.scale .stops span {
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: .9rem;
  color: var(--ink2);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.scale .stops input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.scale .stops input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.scale .anchors { display: flex; justify-content: space-between; color: var(--ink3); font-size: .78rem; margin-top: .4rem; }
.snapshot dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; margin: 0 0 1.25rem; }
.snapshot dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.snapshot dd { margin: .1rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.9rem; line-height: 1; }
.snapshot dd small { font-family: var(--sans); font-style: normal; font-size: .8rem; color: var(--ink3); margin-left: .2rem; }
.snapshot dd.watch { color: var(--accent-ink); }
.email { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.email form { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.email input[type=email] {
  flex: 1 1 15rem;
  min-height: 46px;
  padding: .6rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.email .fine { color: var(--ink3); font-size: .8rem; margin-top: .6rem; }
[hidden] { display: none !important; }

/* Footer — the serious bit, where it belongs. */
footer {
  border-top: 1px solid var(--hairline);
  padding: 2.5rem 0 3.5rem;
  color: var(--ink3);
  font-size: .85rem;
}
footer .links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1rem; }
footer .links a { color: var(--ink2); }
footer .crisis {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: .9rem 1.1rem;
  margin-top: 1.25rem;
  color: var(--ink2);
}

/* ───────────────────────────────────────────────────────────────────────
   Editorial variant (design two). Scoped to body.editorial so the two
   directions can sit side by side until one is chosen. Tighter type,
   ruled grid, evidence as the hero, real device frames. */
.editorial { font-size: 16px; }
.editorial .atmosphere::before { opacity: .55; }
.editorial .rule { border-top: 1px solid var(--hairline); }
.editorial .kicker {
  display: flex; align-items: center; gap: .75rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3);
}
.editorial .kicker::before { content: ""; width: 2rem; height: 1px; background: var(--ink3); }
.editorial h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.05; max-width: 16ch; }
.editorial .lede { font-size: 1.1rem; max-width: 32rem; }
.editorial .hero { padding: 2.5rem 0 0; }
.editorial .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .editorial .hero-grid { grid-template-columns: 1fr; } .editorial .frame { width: min(260px, 100%); } }
@media (max-width: 480px) { .editorial .nav { gap: .8rem; font-size: .85rem; } }
.editorial .frame {
  width: min(320px, 100%);
  margin: 0 auto;
  border-radius: 40px;
  padding: 8px;
  background: var(--ink);
  box-shadow:
    0 0 0 1px rgba(35, 33, 43, .06),
    0 18px 36px -18px rgba(35, 33, 43, .28),
    0 48px 96px -32px rgba(35, 33, 43, .22);
}
@media (prefers-color-scheme: dark) {
  .editorial .frame {
    background: #2A2F45;
    box-shadow: 0 0 0 1px rgba(241, 237, 229, .06), 0 40px 90px -40px rgba(0, 0, 0, .7);
  }
}
.editorial .frame img, .editorial .frame video { display: block; width: 100%; height: auto; border-radius: 32px; }
.editorial .frame-note { text-align: center; font-size: .78rem; color: var(--ink3); margin-top: .75rem; }

/* Evidence legend — the hero's second column of meaning. */
.editorial .legend { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2.5rem 0 0; border-top: 1px solid var(--hairline); }
@media (max-width: 760px) { .editorial .legend { grid-template-columns: repeat(2, 1fr); } }
.editorial .legend div { padding: 1.1rem 1rem 1.1rem 0; border-right: 1px solid var(--hairline); }
.editorial .legend div:last-child { border-right: 0; }
.editorial .legend div + div { padding-left: 1rem; }
.editorial .legend .n { font-family: var(--serif); font-style: italic; font-size: 2.4rem; line-height: 1; }
.editorial .legend .chip { margin-top: .5rem; }
.editorial .legend p { margin: .5rem 0 0; font-size: .85rem; color: var(--ink2); }

/* Ruled sections with a numbered margin. */
.editorial .sec { display: grid; grid-template-columns: 9.5rem 1fr; gap: 2rem; padding: 3rem 0; border-top: 1px solid var(--hairline); }
@media (max-width: 760px) { .editorial .sec { grid-template-columns: 1fr; gap: .75rem; } }
.editorial .sec .num { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--accent-ink); line-height: 1; }
.editorial .sec .num small { display: block; font-family: var(--sans); font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-top: .5rem; }
.editorial .sec h2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 1rem; line-height: 1.1; }
.editorial .sec p { max-width: 38rem; }

/* Ledger — what's free, what isn't. */
.editorial .ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hairline); border-radius: 16px; overflow: clip; margin-top: 1.5rem; }
@media (max-width: 640px) { .editorial .ledger { grid-template-columns: 1fr; } }
.editorial .ledger > div { padding: 1.25rem 1.4rem; }
.editorial .ledger > div + div { border-left: 1px solid var(--hairline); }
@media (max-width: 640px) { .editorial .ledger > div + div { border-left: 0; border-top: 1px solid var(--hairline); } }
.editorial .ledger h3 { margin: 0 0 .75rem; display: flex; align-items: baseline; justify-content: space-between; }
.editorial .ledger h3 .chip { font-size: .66rem; }
.editorial .ledger ul { list-style: none; margin: 0; padding: 0; }
.editorial .ledger li { padding: .45rem 0; border-top: 1px solid var(--hairline); font-size: .95rem; }
.editorial .ledger li span { color: var(--ink3); font-size: .85rem; }
.editorial .ledger .premium-head .chip::before { background: var(--sacred); }

/* Screens strip */
.editorial .screens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 860px) { .editorial .screens { grid-template-columns: repeat(2, 1fr); } }
.editorial .screens img, .editorial .screens video {
  display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--hairline);
  box-shadow: 0 14px 32px -20px rgba(35, 33, 43, .35);
}
@media (prefers-color-scheme: dark) { .editorial .screens img, .editorial .screens video { box-shadow: none; } }
/* The clips are the app's screen only — 620×1342, the still's size rounded
   to even. Each sits over its poster, a lazy <img> of its own first frame,
   and is faded in only once it is playing, so a page without JavaScript, a
   reduced-motion setting, or a browser that refuses autoplay shows the
   still exactly as before. Play and pause are the IntersectionObserver's. */
.shot { position: relative; }
.shot video.cap {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  object-fit: cover; opacity: 0; transition: opacity .3s ease;
}
.shot.on video.cap { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .shot video.cap { display: none; } }
/* A replaced element's intrinsic width (620 px) must not size the grid
   track it sits in — the phone-width layout would overflow. */
.editorial .hero-grid > div, .editorial .sec > div, .editorial .split > div, .editorial .screens figure { min-width: 0; }
.editorial .screens figcaption { margin-top: .6rem; font-size: .85rem; color: var(--ink2); }
.editorial .screens figcaption b { display: block; color: var(--ink); font-weight: 600; }
.editorial figure { margin: 0; }

/* Course parts as an index. */
.editorial .parts { list-style: none; margin: 1.5rem 0 0; padding: 0; columns: 2; column-gap: 2rem; }
@media (max-width: 640px) { .editorial .parts { columns: 1; } }
.editorial .parts li { break-inside: avoid; display: grid; grid-template-columns: 2.2rem 1fr; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--hairline); font-size: .95rem; }
.editorial .parts .n { font-family: var(--serif); font-style: italic; color: var(--accent-ink); font-size: 1.15rem; }
.editorial .parts span.t { color: var(--ink3); font-size: .85rem; display: block; }

/* Claims register page */
.claims { list-style: none; margin: 1rem 0 0; padding: 0; }
.claims li { display: grid; grid-template-columns: 4.5rem 1fr; gap: .5rem 1.25rem; padding: 1.1rem 0; border-top: 1px solid var(--hairline); }
@media (max-width: 640px) { .claims li { grid-template-columns: 1fr; } }
.claims .id { font-family: var(--serif); font-style: italic; color: var(--ink3); font-size: 1.1rem; }
.claims .claim { margin: 0 0 .35rem; }
.claims .src { color: var(--ink3); font-size: .85rem; }
.claims .chip { margin-bottom: .5rem; }
.filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.filter button { font: inherit; cursor: pointer; }
.filter button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.editorial .screens.two { grid-template-columns: repeat(2, 1fr); max-width: 36rem; }
.editorial .screens.three { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.editorial .sec .split.wide { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 760px) { .editorial .sec .split.wide { grid-template-columns: 1fr; } }
.editorial .split .parts { columns: 1; margin-top: 0; }
.editorial .split .screens.one { margin-top: 0; }
@media (max-width: 760px) { .editorial .split .screens.one { margin: 1.5rem auto 0; } }
.editorial .screens.one { grid-template-columns: 1fr; max-width: 17rem; }
.editorial .sec .split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 760px) { .editorial .sec .split { grid-template-columns: 1fr; } }
.editorial .quote { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.3; color: var(--ink); border-left: 2px solid var(--accent); padding-left: 1rem; margin: 1.25rem 0; max-width: 30rem; }
.editorial .quote small { display: block; font-family: var(--sans); font-style: normal; font-size: .78rem; color: var(--ink3); margin-top: .4rem; }

.turnstile { flex: 1 1 100%; margin-top: .5rem; }
.turnstile:empty { display: none; }

/* The "sent" state: the form leaves, the confirmation arrives. */
.sent { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.sent.in { opacity: 1; transform: none; }
.sent-mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft); box-shadow: 0 0 36px 4px var(--glow); margin-bottom: .9rem; }
.sent-mark svg { width: 22px; height: 22px; stroke-dasharray: 24; stroke-dashoffset: 24; }
.sent.in .sent-mark svg { animation: draw .5s .15s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.sent-title { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.15; margin: 0 0 .35rem; }
.sent-body { margin: 0 0 .5rem; }
@media (prefers-reduced-motion: reduce) { .sent { transition: none; } .sent.in .sent-mark svg { animation: none; stroke-dashoffset: 0; } }

/* ───────────────────────────────────────────────────────────────────────
   Motion. Calm and once: things arrive as you scroll, the hero phone
   floats, the atmosphere drifts, and pages fade through each other. All of
   it is off under prefers-reduced-motion, and none of it touches first
   paint — an element already in view at load is shown in its final state. */

/* Scroll reveals. `.rv` marks a unit that rises 14 px and fades in as it
   enters; --i staggers siblings. Where the browser has scroll-driven
   animations the reveal is a view() timeline and needs no JavaScript; where
   it doesn't, the page's IntersectionObserver adds `.in` once, and the
   element is only hidden when `html.js` says the script is there to show it. */
.rv { --i: 0; }
.rv:nth-child(2) { --i: 1; }
.rv:nth-child(3) { --i: 2; }
.rv:nth-child(4) { --i: 3; }
.rv:nth-child(5) { --i: 4; }
.rv:nth-child(6) { --i: 5; }
.rv:nth-child(n+7) { --i: 6; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: cover calc(var(--i) * 3%) cover calc(22% + var(--i) * 3%);
    }
  }
  @supports not (animation-timeline: view()) {
    .js .rv { opacity: 0; }
    .js .rv.in { animation: rise .55s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 60ms) both; }
  }

  /* The hero phone floats 6 px on a 6 s breath; the atmosphere's glow drifts.
     --t0 is set by a one-line script in every <head> to minus the wall-clock
     time modulo the loops' common period, so a page reached by a transition
     starts each loop at the phase the previous page had reached — otherwise
     every navigation snapped the glow and the phone back to frame zero and
     the background looked as if it had changed colour. */
  .editorial .hero .frame { animation: float 6s ease-in-out infinite; animation-delay: var(--t0, 0ms); }
  .atmosphere::before { animation: drift 22s ease-in-out infinite alternate; animation-delay: var(--t0, 0ms); }
  body::after { animation: drift-far 36s ease-in-out infinite alternate; animation-delay: var(--t0, 0ms); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes drift {
  from { transform: translate(-50%, 0) scale(1); }
  to { transform: translate(-46%, 4%) scale(1.06); }
}
@keyframes drift-far {
  from { transform: translate(0, 0); }
  to { transform: translate(-4vw, -3vh); }
}
/* A second, fainter glow low on the page, fixed to the viewport, so the
   background below the hero is not a flat field. */
body { position: relative; }
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  right: -20vw;
  bottom: -20vh;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  opacity: .45;
  pointer-events: none;
}

/* Page transitions: the native cross-document View Transitions API. Every
   page that links this sheet opts in; a browser without it simply loads the
   page. One cross-fade, 520 ms: the old page fades out and the new page
   fades in with the SAME curve and the SAME duration, and nothing moves.
   That is not fussiness — the browser composites the two snapshots with
   plus-lighter, so opacities that sum to one at every instant give a
   constant-brightness dissolve, and any mismatch (a shorter fade-out, a
   slide on the new page) reads as the background flashing darker mid-way,
   which is exactly what the first cut did. The nav keeps its own snapshot
   so the wordmark and links stay put. */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
::view-transition-old(root) { animation: vt-out .52s cubic-bezier(.45, 0, .55, 1) both; }
::view-transition-new(root) { animation: vt-in .52s cubic-bezier(.45, 0, .55, 1) both; }
.nav { view-transition-name: nav; }
::view-transition-group(nav) { animation-duration: 0s; }
::view-transition-old(nav) { animation: vt-out .52s cubic-bezier(.45, 0, .55, 1) both; }
::view-transition-new(nav) { animation: vt-in .52s cubic-bezier(.45, 0, .55, 1) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
}