/* Sapiomate web presence. Tokens mirror the app's: paper, ink, stone, honey.
   Sharp edges throughout, like the app. */
:root {
  --paper: #f0eee9;   /* cloud dancer */
  --ink: #402e32;     /* umbra */
  --stone: #9c8d88;
  --muted: #6f6360;
  --line: #d9d3cc;
  --honey: #c98a18;
  --margin: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 300;
  padding: 0 var(--margin);
}

/* ── Chrome ─────────────────────────────────────────────────────────── */
.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 0;
}

.wordmark {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.28em;
}

.menu { display: flex; gap: 24px; }
.menu a {
  color: var(--stone);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--ink); }

.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ── Type ───────────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

h1, h2, h3 {
  margin: 0;
  font-family: "Jost", system-ui, sans-serif;
  letter-spacing: -0.015em;
}
h1 { font-weight: 600; font-size: clamp(32px, 6vw, 56px); line-height: 1.05; }
h2 { font-weight: 600; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.1; }
h3 { font-weight: 500; font-size: 18px; line-height: 1.2; }

.line {
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.5;
  max-width: 34em;
}

/* ── Home ───────────────────────────────────────────────────────────── */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
  padding: 48px 0;
}

/* ── Narrative ──────────────────────────────────────────────────────── */
/* An editorial page. One 12-column grid; a 3-column rail on the left for
   the section numeral and label, an 8-column measure on the right for the
   headline and running text (about 34em at 17px). Every section shares the
   same vertical rhythm, on an 8pt scale. The type scale has five steps:
   eyebrow 11, body 17, lede 22, headline 40, display 72. */
.narrative {
  flex: 1;
  width: min(100%, 1120px);
  margin-inline: auto;
}

.spread, .part {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  border-top: 1px solid var(--line);
  padding: 56px 0 72px;
}
.spread { border-top: 0; padding: 72px 0 96px; }

.rail { grid-column: 1 / span 3; }
.body { grid-column: 4 / span 8; }

.rail .eyebrow { margin: 0; }
.rail .num {
  display: block;
  margin-bottom: 8px;
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--honey);
}
.note {
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.display {
  font-weight: 600;
  font-size: clamp(44px, 7vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.narrative h2 {
  margin: 0 0 28px;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18em;
}
.narrative h2.display { margin-bottom: 32px; }

.body > p {
  margin: 0 0 20px;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.65;
}
.body > p:last-child { margin-bottom: 0; }
.body > .lede {
  margin: 36px 0 0;
  max-width: 28em;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.5;
}

.aside {
  color: var(--muted);
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

/* The asks: two columns of four numbered items, a hairline above each row. */
.asks {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  counter-reset: ask;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.asks li {
  padding: 20px 0 24px;
  border-top: 1px solid var(--line);
}
.asks li::before {
  counter-increment: ask;
  content: "0" counter(ask);
  display: block;
  margin-bottom: 12px;
  font-family: "Jost", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--honey);
}
.asks h3 { margin: 0 0 8px; font-size: 19px; font-weight: 500; line-height: 1.2; }
.asks p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* The how: a definition list in the same two-column rhythm. */
.how {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.how.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
.how div { padding: 20px 0 24px; border-top: 1px solid var(--line); }
.how dt { font-family: "Jost", system-ui, sans-serif; font-weight: 500; font-size: 19px; line-height: 1.2; margin-bottom: 8px; }
.how dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* The facts: four numbers in a strip, the way a magazine sidebar states
   the figures once so the prose does not have to. */
.facts {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  border-top: 1px solid var(--line);
}
.facts li { padding: 16px 0 4px; }
.facts strong {
  display: block;
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 8px;
}
.facts span { font-size: 13px; line-height: 1.4; color: var(--muted); }

/* The cycle: five phases as a timeline, phase name on the left in the
   same rail-and-body relationship the page already uses. */
.cycle {
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
}
.cycle li {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2.2fr);
  column-gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.cycle .phase {
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
}
.cycle .what { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* The boundary: a full-bleed ink band, so the page has one moment of
   weight. Bleeds past the body margin with negative margins. */
.band {
  --paper: #402e32;
  --line: #5c4a4e;
  --muted: #cfc4c1;
  background: var(--paper);
  color: #f0eee9;
  border-top: 0;
  /* Bleed to the viewport edges whatever the container width, then pad the
     grid back to where the container sits. */
  margin: 24px calc(50% - 50vw);
  padding: 72px calc(50vw - 50%) 88px;
}
.band .rail .eyebrow { color: #a99a97; }
.band .num { color: #e8b04f; }
.band .body > p { color: #e6dfdb; }

.close { padding-bottom: 96px; }
.close .aside { border-left: 0; padding-left: 0; margin-top: 8px; }

@media (max-width: 760px) {
  .spread, .part { display: block; padding: 40px 0 48px; }
  .spread { padding-top: 40px; }
  .rail { margin-bottom: 24px; }
  .note { margin-top: 12px; }
  .asks, .how, .how.trio { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cycle li { grid-template-columns: 1fr; row-gap: 4px; }
  .band { padding-top: 48px; padding-bottom: 56px; }
}

/* ── The curtain ────────────────────────────────────────────────────── */
html:not(.unlocked) .gated { display: none !important; }
html.unlocked #gate-link { display: none; }
.foot-right { display: flex; gap: 24px; }

#gate {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margin);
}
.gate-form { width: min(100%, 360px); }
.gate-form h2 {
  margin: 0 0 24px;
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.gate-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}
.gate-input {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  outline: none;
}
.gate-input:focus { border-color: var(--honey); }
.gate-error { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.gate-button {
  display: block;
  width: 100%;
  padding: 14px;
  font: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}
.gate-button:hover { background: #2e1f22; }