/* Opress landing. Brand: V3 (brand/README.md).
   Principle: round means actionable or protected (controls, the core); layout stays square. */
:root {
  --ink: #0E0F10;
  --vermilion: #FD3F25;
  --paper: #FAF9F5;
  --white: #FFFFFF;
  --muted: #6F7978;

  --bg: var(--paper);
  --fg: var(--ink);
  --text-2: #4A5352;          /* secondary text, 7:1 on paper */
  --rule: #DEDCD4;
  --raised: var(--white);
  --band-bg: var(--ink);
  --band-fg: var(--paper);
  --band-2: #B9C0BF;
  --band-rule: #2B3133;

  --display: Didot, "Didot LT STD", "GFS Didot", "Bodoni 72", "Bodoni MT", "Libre Bodoni", "Noto Serif Display", Georgia, serif;
  --text: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1200px;
  --gutter: 16px;
  --space: clamp(80px, 12vw, 160px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --fg: var(--paper);
    --text-2: #B9C0BF;
    --rule: #2B3133;
    --raised: #181D1E;
    --band-bg: #181D1E;
    --band-fg: var(--paper);
    --band-2: #B9C0BF;
    --band-rule: #30373A;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 18px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--vermilion); }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  font-kerning: normal;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: 0.96; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -0.015em; max-width: 18ch; }
h3 { font-size: 1.55rem; line-height: 1.15; }
p { margin: 0; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--text-2); max-width: 36em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 40px; } }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--bg); padding: 8px 14px; z-index: 10; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Controls: pills echo the core */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 1rem/1 var(--text);
  border-radius: 999px; padding: 15px 24px; border: 1.5px solid var(--fg);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-3) var(--ease-golden), border-color var(--t-3) var(--ease-golden), color var(--t-3) var(--ease-golden);
}
.pill-ink { background: var(--fg); color: var(--bg); }
.pill-ink:hover { background: var(--vermilion); border-color: var(--vermilion); color: var(--white); }

/* Header */
.site-header { position: relative; z-index: 2; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; flex-wrap: wrap; }
.brand { display: block; line-height: 0; }
.brand img { width: 150px; height: auto; }
nav { display: flex; align-items: center; gap: 28px; font-size: 0.98rem; }
nav a:not(.pill) { text-decoration: none; color: var(--text-2); }
nav a:not(.pill):hover { color: var(--fg); }
nav .pill { padding: 11px 18px; font-size: 0.92rem; }
@media (max-width: 760px) { nav a:not(.pill) { display: none; } .brand img { width: 128px; } }

/* Hero */
.hero { padding: clamp(32px, 6vw, 72px) 0 var(--space); }
.hero-grid { display: grid; gap: 56px; align-items: start; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; } }
.hero-copy { padding-top: clamp(8px, 3vw, 48px); }
.status { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--text-2); margin-bottom: 28px; }
.core-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vermilion); flex: none; }
.hero h1 { max-width: 11ch; margin-bottom: 32px; }
.hero .lead { margin-bottom: 40px; }

/* Waitlist */
.waitlist { max-width: 560px; }
.fields { display: flex; gap: 10px; flex-wrap: wrap; }
.fields input {
  flex: 1 1 260px; min-width: 0;
  font: 400 1.05rem/1 var(--text); color: var(--fg);
  background: transparent; border: 1.5px solid var(--fg); border-radius: 999px; padding: 15px 22px;
}
.fields input::placeholder, .note-toggle textarea::placeholder { color: var(--muted); }
.fields .pill { flex: 0 0 auto; }
.waitlist button:disabled { opacity: 0.6; cursor: progress; }
.note-toggle { margin-top: 14px; font-size: 0.95rem; color: var(--text-2); }
.note-toggle summary { cursor: pointer; width: fit-content; }
.note-toggle summary:hover { color: var(--fg); }
.note-toggle textarea {
  display: block; width: 100%; margin-top: 10px; resize: vertical;
  font: 400 1rem/1.5 var(--text); color: var(--fg);
  background: transparent; border: 1.5px solid var(--rule); border-radius: 18px; padding: 12px 18px;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.6em; margin-top: 14px; font-weight: 600; }
.form-status[data-state="error"] { color: var(--vermilion); }
.fine { font-size: 0.88rem; color: var(--text-2); }

/* The mark */
.mark { display: block; width: 100%; height: auto; color: var(--fg); fill: currentColor; overflow: visible; }
.mark .ring, .mark .core { transform-box: view-box; transform-origin: center; }
.mark .core { fill: var(--vermilion); }

.hero-demo { display: grid; gap: 20px; justify-items: center; }
.hero-demo .mark { max-width: 340px; }
@media (max-width: 979px) { .hero-demo .mark { max-width: 300px; } }

/* Motion: everything below is built on the golden ratio φ = 1.6180339887.
   Times     t(n) = φⁿ seconds.
   Angles    g(n) = golden angle / φⁿ, golden angle = 360° / φ² = 137.508°.
   Keyframes sit on golden sections: 23.6% (1/φ³), 38.2% (1/φ²), 61.8% (1/φ), 85.4% (1 − 1/φ⁴).
   Settling  each overshoot is the previous one divided by φ³, so motion decays like a golden spiral.
   Idle      the whole mark breathes as one piece, period φ⁵ s. */
:root {
  --t-4: 0.146s;  --t-3: 0.236s;  --t-2: 0.382s;  --t-1: 0.618s;  --t0: 1s;  --t1: 1.618s;  --t2: 2.618s;
  --t5: 11.09s;   --t6: 17.944s;  --t7: 29.034s;
  /* distances d(n) = 10px · φⁿ */
  --d-3: 2.36px;  --d-2: 3.82px;  --d-1: 6.18px;  --d0: 10px;  --d1: 16.18px;  --d2: 26.18px;
  --g0: 137.508deg;  --g1: 84.985deg;  --g2: 52.523deg;  --g3: 32.461deg;  --g4: 20.062deg;
  --g5: 12.399deg;   --g6: 7.663deg;   --g7: 4.736deg;   --g8: 2.927deg;
  /* Bézier control points from φ powers: x1 = 1/φ³, y1 = 1/φ, x2 = 1/φ⁴ */
  --ease-golden: cubic-bezier(0.236, 0.618, 0.146, 1);
  /* golden in-out: x1 = 1/φ², x2 = 1/φ */
  --ease-breathe: cubic-bezier(0.382, 0, 0.618, 1);
  /* overshoot spring: y1 = φ */
  --ease-spring: cubic-bezier(0.382, 1.618, 0.618, 1);
}


/* Arrival: each ring swings in from a multiple of the golden angle and settles in a golden decay.
   The crescent pair starts at 0, the orbit strokes at 1/φ, the core at 1 s. */
@keyframes golden-arrive {
  0%    { transform: rotate(var(--from-rot)) scale(var(--from-scale)); opacity: 0; }
  38.2% { opacity: 1; }
  61.8% { transform: rotate(calc(var(--from-rot) * -0.236)) scale(1); }   /* overshoot −1/φ³ */
  85.4% { transform: rotate(calc(var(--from-rot) * 0.0557)); }           /* then +1/φ⁶ */
  100%  { transform: none; opacity: 1; }
}
@keyframes golden-pop {
  0%    { transform: scale(0); }
  61.8% { transform: scale(1.146); }   /* 1 + 1/φ⁴ */
  85.4% { transform: scale(0.966); }   /* 1 − 1/φ⁷ */
  100%  { transform: scale(1); }
}
/* The crescents arrive as one rigid pair, so the mark is symmetric in every frame. */
.mark .checks, .mark .review { --from-rot: var(--g0); --from-scale: 1; }
.mark .writers { --from-rot: calc(var(--g0) * -1.618); --from-scale: 1.236; } /* 1 + 1/φ³ */
.mark.is-arriving .ring { animation: golden-arrive var(--t1) var(--ease-golden) both; }
.mark.is-arriving .checks, .mark.is-arriving .review { animation-delay: 0s; }
.mark.is-arriving .writers { animation-delay: var(--t-1); }
.mark.is-arriving .core    { animation: golden-pop var(--t-1) var(--ease-golden) var(--t0) both; }

/* Idle breathing: the whole mark turns as one piece (period φ⁵ s, amplitude g(6)), so its parts never
   drift apart. A negative half-period delay starts it at the centre, already in motion. */
@keyframes breathe { from { rotate: calc(var(--g6) * -1); } to { rotate: var(--g6); } }
.hero-demo .mark { animation: breathe var(--t5) var(--ease-breathe) calc(var(--t5) * -0.5) infinite alternate; }

/* Reactions to the demo, one per outcome */
@keyframes golden-deflect {
  23.6% { transform: rotate(calc(var(--g4) * -1)) scale(1.146); }
  61.8% { transform: rotate(var(--g7)) scale(0.982); }
}
@keyframes golden-flare { 23.6%, 61.8% { color: var(--vermilion); } }
@keyframes golden-hold {
  /* Both crescents turn half a circle together, so each takes the other's place. They move as one
     rigid pair: the gap between them never changes and the mark stays symmetric in every frame.
     Overshoot g(6), hold until 61.8%, then home with a mirrored overshoot. */
  23.6%        { transform: rotate(calc(180deg + var(--g6))); }
  38.2%, 61.8% { transform: rotate(180deg); }
  85.4%        { transform: rotate(calc(var(--g6) * -1)); }
}
@keyframes golden-land {
  38.2% { transform: scale(1.382); }   /* 1 + 1/φ² */
  61.8% { transform: scale(0.944); }   /* 1 − 1/φ⁶ */
  85.4% { transform: scale(1.021); }   /* 1 + 1/φ⁸ */
}
@keyframes golden-pull { 38.2% { transform: rotate(var(--g5)) scale(0.944); } }
@keyframes golden-rewind {
  61.8% { transform: rotate(calc(var(--g0) * -1)); }
  85.4% { transform: rotate(var(--g5)); }
}
.mark[data-state="rejected"] .writers  { animation: golden-deflect var(--t0) var(--ease-golden); }
.mark[data-state="rejected"] .checks,
.mark[data-state="rejected"] .review   { animation: golden-flare var(--t0) var(--ease-golden); }
.mark[data-state="review"] .review,
.mark[data-state="review"] .checks     { animation: golden-hold var(--t2) var(--ease-golden); }
.mark[data-state="published"] .core    { animation: golden-land var(--t0) var(--ease-golden); }
.mark[data-state="published"] .writers { animation: golden-pull var(--t0) var(--ease-golden); }
.mark[data-state="rolledback"] .ring   { animation: golden-rewind var(--t1) var(--ease-golden); }
.mark[data-state="rolledback"] .checks,
.mark[data-state="rolledback"] .review { animation-delay: var(--t-3); }

/* Demo panel. Distances use the φ ladder d(n) = 10px · φⁿ, times the t(n) ladder above. */
.demo { width: 100%; max-width: 480px; }
.demo-title { font-size: 1.55rem; margin-bottom: var(--d1); }
.demo-actions { display: flex; flex-wrap: wrap; gap: var(--d-1); margin-bottom: var(--d1); }
.demo-actions[hidden] { display: none; }

/* Chips: padding 10 : 16.18 (1 : φ). Hover lifts by d(−3); selection fills with ink from the
   centre outward, like a write reaching the core. */
.chip {
  position: relative; isolation: isolate; overflow: hidden;
  font: 500 0.92rem/1.2 var(--text); color: var(--fg);
  background: transparent; border: 1.5px solid var(--rule); border-radius: 999px;
  padding: var(--d0) var(--d1); cursor: pointer;
  transition:
    transform var(--t-3) var(--ease-golden),
    border-color var(--t-3) var(--ease-golden),
    color var(--t-2) var(--ease-golden);
}
.chip::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path var(--t-2) var(--ease-golden);
}
.chip:hover { border-color: var(--fg); transform: translateY(calc(var(--d-3) * -1)); }
.chip:active { transform: scale(0.966); transition-duration: var(--t-4); }   /* 1 − 1/φ⁷ */
.chip[aria-pressed="true"] { border-color: var(--fg); color: var(--bg); transform: none; }
.chip[aria-pressed="true"]::after { clip-path: circle(76.4% at 50% 50%); }    /* 1 − 1/φ³: covers the corners */

.demo-log {
  background: var(--raised); border: 1px solid var(--rule); padding: var(--d1) var(--d1); min-height: 148px;
}
.demo-log .cmd { font: 0.88rem/1.5 var(--code); color: var(--text-2); margin-bottom: var(--d0); overflow-wrap: anywhere; }
.demo-log .cmd span { color: var(--fg); }
.demo-log .cmd span::after { content: " ›"; color: var(--muted); }
.verdict { display: flex; align-items: center; gap: var(--d0); font-weight: 700; font-size: 1.05rem; margin-bottom: var(--d-1); }
.verdict::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; border: 2px solid var(--fg); }
.verdict[data-kind="rejected"]::before { background: var(--vermilion); border-color: var(--vermilion); }
.verdict[data-kind="published"]::before { background: var(--fg); }
.verdict[data-kind="review"]::before { background: transparent; }
.verdict[data-kind="rolledback"]::before { background: linear-gradient(90deg, var(--fg) 50%, transparent 50%); }
.reason { color: var(--text-2); font-size: 0.98rem; }

/* A new result rises by d(−1), line by line, staggered 0, 1/φ⁴, 1/φ³ s; the verdict's dot pops. */
@keyframes log-in { from { opacity: 0; transform: translateY(var(--d-1)); } }
.demo-log.is-new > * { animation: log-in var(--t-2) var(--ease-golden) both; }
.demo-log.is-new > :nth-child(2) { animation-delay: var(--t-4); }
.demo-log.is-new > :nth-child(3) { animation-delay: var(--t-3); }
.demo-log.is-new .verdict::before { animation: golden-pop var(--t-1) var(--ease-golden) var(--t-3) both; }
.demo-note { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
@media (prefers-color-scheme: dark) { .demo-note { color: var(--text-2); } }

/* Problem */
.problem { padding: var(--space) 0; border-top: 1px solid var(--rule); }
.claims { margin: clamp(40px, 6vw, 72px) 0 0; display: grid; }
.claims > div { display: grid; gap: 12px 48px; padding: 32px 0; border-top: 1px solid var(--rule); }
.claims > div:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) { .claims > div { grid-template-columns: 5fr 6fr; align-items: baseline; } }
.claims dt { font: 700 clamp(1.7rem, 3vw, 2.5rem)/1.08 var(--display); letter-spacing: -0.01em; }
.claims dd { margin: 0; color: var(--text-2); max-width: 34em; }

/* How it works */
.how { padding: var(--space) 0; }
.how-grid { display: grid; gap: 56px; align-items: start; }
@media (min-width: 980px) { .how-grid { grid-template-columns: 5fr 6fr; gap: 88px; } .how-figure { position: sticky; top: 48px; } }
.how-figure .mark { max-width: 440px; margin: 0 auto; }
@media (max-width: 979px) { .how-figure .mark { max-width: 260px; } }
.how-copy h2 { margin-bottom: 20px; }
.path { list-style: none; counter-reset: step; padding: 0; margin: 48px 0 0; display: grid; gap: 4px; }
.path li {
  counter-increment: step; position: relative; padding: 24px 0 24px 64px; border-top: 1px solid var(--rule);
  cursor: default; transition: color var(--t-3) var(--ease-golden);
}
.path li::before {
  content: counter(step); position: absolute; left: 0; top: 24px;
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--fg);
  display: grid; place-items: center; font: 700 1.1rem/1 var(--display);
}
.path li[data-ring="core"]::before { background: var(--vermilion); border-color: var(--vermilion); color: var(--white); }
.path h3 { margin-bottom: 8px; }
.path p { color: var(--text-2); max-width: 32em; }

/* Legend highlight: the hovered step's ring stays, the rest recede */
.mark .ring, .mark .core { transition: opacity var(--t-2) var(--ease-golden); }
.mark[data-focus] .ring, .mark[data-focus] .core { opacity: 0.16; }
.mark[data-focus="writers"] .writers,
.mark[data-focus="checks"] .checks,
.mark[data-focus="review"] .review,
.mark[data-focus="core"] .core { opacity: 1; }

/* What's inside */
.inside { padding: var(--space) 0; border-top: 1px solid var(--rule); }
.features { display: grid; gap: 0 64px; margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 760px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .features { grid-template-columns: 1fr 1fr 1fr; } }
.features article { padding: 28px 0 40px; border-top: 1.5px solid var(--fg); }
.features h3 { margin-bottom: 12px; }
.features p { color: var(--text-2); }

/* Memory by Pamet: the one inverted band */
.memory { background: var(--band-bg); color: var(--band-fg); padding: var(--space) 0; }
.memory-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 980px) { .memory-grid { grid-template-columns: 6fr 5fr; gap: 88px; } }
.memory h2 { margin-bottom: 28px; }
.memory p { color: var(--band-2); max-width: 34em; }
.memory p + p { margin-top: 16px; }
.memory .byline { color: var(--band-fg); margin-bottom: 20px; font-weight: 600; }
.memory a { color: var(--band-fg); text-decoration-color: var(--vermilion); }
.record { margin: 0; border: 1px solid var(--band-rule); padding: clamp(24px, 3vw, 36px); }
.record figcaption { font-size: 0.9rem; color: var(--band-2); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.record figcaption::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--vermilion); }
.record-text { font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--display); color: var(--band-fg) !important; margin-bottom: 28px; }
.record dl { margin: 0; display: grid; }
.record dl > div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--band-rule); font-size: 0.98rem; }
.record dt { color: var(--band-2); }
.record dd { margin: 0; }

/* Final call to action */
.cta { padding: var(--space) 0; text-align: left; }
.cta h2 { font-size: clamp(2.6rem, 7.4vw, 7rem); line-height: 0.96; max-width: none; margin-bottom: 32px; }
.cta .lead { margin-bottom: 40px; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); font-size: 0.92rem; color: var(--text-2); }
.site-footer .bar { min-height: 96px; }

/* Simple pages (joined, error, 404) */
.simple { min-height: 100vh; display: grid; place-items: center; padding: 64px var(--gutter); text-align: center; }
.simple .mark { width: 120px; margin: 0 auto 32px; }
.simple h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 0 auto 16px; }
.simple p { color: var(--text-2); }
.simple .pill { margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  .mark, .mark .ring, .mark .core { animation: none !important; transition: none; }
  .chip, .chip::after { transition: none; }
  .chip:hover, .chip:active { transform: none; }
  .demo-log.is-new > *, .demo-log.is-new .verdict::before { animation: none; }
}