/* takepau.se — the app's design system (BUILD.md §4) on a page.
   Two typefaces, the ramp, hairline rules. Nothing outside that set. */

:root {
  /* §4.1 — the ramp, and the one neutral the water never departs from. */
  --bone:      #EFEBE1;
  --bone-2:    #E9E5D9;
  --bone-3:    #E2E0D3;
  --sand:      #EDDFC0;
  --ember:     #F2CBA6;
  --blush:     #E6BDB7;
  --settled:   #D9C8E0;
  --ink:       #1B2620;
  --ink-2:     #4B5852;
  /* The hero only. Warmed out of the terracotta's own family rather than set
     against it: the cold charcoal was correct on neutral water but is the
     heaviest thing on a hero made of paper and clay. 6.20:1 on the wash disc
     against the cold ink's 6.26:1 — legibility does not move, only weight. */
  --ink-warm:  #402B24;
  /* 4.88:1 on bone. #6E7A74 reads better but measures 3.75:1, and §4.1
     already records that the tertiary ink fails contrast. */
  --ink-3:     #5C6862;
  --rule:      #D2CFC4;
  --water:     #1E3A2D;
  --destructive: #C97A6D;

  /* §4.3 — the spacing scale. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* The wordmark only. Everything else stays on the app's two typefaces. */
  --mark: "Sentient", ui-serif, "New York", Georgia, serif;
}

/* Sentient Light — Indian Type Foundry, ITF Free Font License, self-hosted
   (assets/fonts/Sentient-LICENSE.txt). woff2 only: every browser that can run
   this page has supported it since 2016. */
@font-face {
  font-family: "Sentient";
  src: url("/assets/fonts/Sentient-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;              /* §4.2 body */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* The app is single-theme: the ramp is the theme. Honour the viewer's
   preference only far enough to stop a dark-mode browser inverting us. */
:root { color-scheme: light; }

a { color: inherit; }

.wrap { max-width: 660px; margin: 0 auto; padding: 0 var(--s5); }

/* ---------------------------------------------------------------- the hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* The ground at rest — warm ivory, the palette's first key. It does not
     travel here: the ramp is a gauge for a running pause, and the site is not
     running one. Mirrors GROUND in water.js, and stands in when JS is off. */
  background: linear-gradient(
    to bottom,
    #FAF6EB   0%,
    #F3F1E2  30%,
    #E4EAE1  62%,
    #E4EAE1 100%);
  overflow: hidden;
}

.hero canvas.water {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 var(--s5) var(--s7);
}

/* §4.6 — one circle, centred at 31% of the height, holding the wordmark as S02
   does at rest.

   The web hero departs from §4.6's "a ring, never a disc" deliberately: it is
   filled here, as five terracotta washes, to carry paperwater.html's material.
   Decided 2026-09-03. The app is unaffected and keeps its ring — this is the
   site only. Do not "correct" it back without asking. */
.circle {
  --d: clamp(230px, 62vw, 340px);
  /* The clearance the circle keeps above the waterline, which water.js puts at
     47svh at rest. Hanging the circle from a flat 31svh only cleared the water
     at phone proportions: the diameter is capped at 340px while the height is
     not, so on a desktop viewport the ring's foot crossed the first contour
     lines. Measuring up from the waterline instead holds the gap at every size,
     and barely moves the phone layout it was drawn for (centre 31% -> ~30%). */
  --clear: 28px;
  width: var(--d); height: var(--d);
  margin-top: max(24px, calc(47svh - var(--d) - var(--clear)));
  border-radius: 50%;
  /* The circle is painted, not drawn: water.js measures this element and lays
     five terracotta washes into the ground where it sits, so the ring and its
     fill both come off the canvas. The element stays for geometry and for the
     wordmark it holds — and, with no JS, for the ring it used to be. */
  display: grid; place-items: center;
  flex: none;
}
html:not(.js) .circle {
  border: 1px solid rgba(92, 104, 100, 0.46);
  background: radial-gradient(circle at 50% 50%,
              rgba(255,255,255,0.22) 0%,
              rgba(255,255,255,0.04) 72%,
              rgba(255,255,255,0.02) 100%);
}

/* §1 — the wordmark: serif, letter-spaced, mixed case. Never all-caps.
   Sentient Light on the web; the app still sets it in New York. */
.wordmark {
  font-family: var(--mark);
  font-weight: 300; font-style: normal;
  letter-spacing: 0.08em;
  text-indent: 0.08em;           /* re-centres against the trailing letterspace */
  color: var(--ink);
}
.circle .wordmark { font-size: clamp(28px, 7vw, 38px); }

/* Text sitting on the water. Ported from Screens.swift `waterHalo` +
   `waterGround`: a feathered ground that dissolves into the water rather than
   cutting a panel out of it, plus a soft halo on the glyphs. Neither alone can
   carry contrast where the contour lines are densest. */
.on-water {
  /* The band of shade lives in the water itself (see water.js). All the glyphs
     need on top of it is the app's halo — light, because the ramp never
     darkens, so one halo colour holds at every stop. */
  text-shadow: 0 0 3px rgba(255,252,246,0.80),
               0 0 7px rgba(255,252,246,0.60),
               0 0 14px rgba(255,252,246,0.40);
}

.hero-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 4.6vw, 22px);
  margin: var(--s6) 0 0; padding: var(--s4) var(--s5);
  max-width: 22ch; text-wrap: balance;
  text-align: center; color: var(--ink);
}

.hero-lede {
  margin: var(--s3) 0 0; padding: var(--s4) var(--s5);
  max-width: 36ch; text-align: center;
  color: var(--ink); font-size: 16px;
}

/* One button, and one quiet way past it. §4.3 — a rule, not a fill: filled
   buttons read as software, and the whole hero is trying not to. */
.hero-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s4); margin-top: var(--s6);
}

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s6);
  border: 1px solid var(--ink); border-radius: 2px;
  background: rgba(255, 252, 246, 0.34);
  color: var(--ink); text-decoration: none;
  font-family: var(--sans); font-size: 11.5px;
  letter-spacing: 0.20em; text-transform: uppercase;
  transition: background-color .2s ease;
}
.cta:hover { background: rgba(255, 252, 246, 0.62); }

.cta-quiet {
  color: var(--ink); font-size: 15px; text-decoration: none;
  border-bottom: 1px solid rgba(27, 38, 32, 0.35);
  padding-bottom: 1px;
  text-shadow: 0 0 3px rgba(255,252,246,0.80), 0 0 7px rgba(255,252,246,0.60);
}
.cta-quiet:hover { border-bottom-color: var(--ink); }

/* The hero runs on the warm ink; the reading pages below keep the cold one.
   Same contrast, less weight on a ground made of paper and clay. */
.hero .wordmark, .hero-sub, .hero-lede, .cta, .cta-quiet { color: var(--ink-warm); }
.cta { border-color: var(--ink-warm); }
.cta-quiet { border-bottom-color: rgba(64, 43, 36, 0.38); }
.cta-quiet:hover { border-bottom-color: var(--ink-warm); }

/* Anchor jumps land under nothing, but a little air above the target reads
   better than the heading pinned to the top edge. */
#what, #notify { scroll-margin-top: var(--s6); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ------------------------------------------------------------ reading pages */

/* §4.1 — the long-form pages keep an opaque ground. Paragraphs over moving
   water cannot hold contrast; the lines cross every glyph eventually. */
.page { background: var(--bone); padding: var(--s8) 0; }
.page + .page { padding-top: var(--s7); }

.eyebrow {
  font-size: 11.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 var(--s4);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; font-style: italic; }
h1 { font-size: clamp(26px, 5.6vw, 32px); line-height: 1.18; margin: 0 0 var(--s5); }
h2 { font-size: 23px; line-height: 1.25; margin: var(--s7) 0 var(--s3); }
h3 { font-size: 21px; line-height: 1.3; margin: var(--s6) 0 var(--s2); }

p { margin: 0 0 var(--s4); }
.page p { color: var(--ink-2); }
.page p strong { color: var(--ink); font-weight: 600; }

.note {
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3);
  line-height: 1.6;
}

hr.rule { height: 1px; background: var(--rule); border: 0; margin: var(--s7) 0; }

/* §4.3 — hairline rows, not filled panels. Rules read as printed matter. */
.rows { border-top: 1px solid var(--rule); margin: var(--s5) 0 0; }
.row {
  border-bottom: 1px solid var(--rule);
  min-height: 52px; padding: var(--s3) 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
}
.row-label { font-size: 11.5px; letter-spacing: 0.20em; text-transform: uppercase; }
.row-value { color: var(--ink-3); font-size: 15px; text-align: right; }

ul.plain { margin: 0 0 var(--s4); padding-left: 1.15em; color: var(--ink-2); }
ul.plain li { margin-bottom: var(--s2); }

ol.sources { margin: 0; padding-left: 1.3em; color: var(--ink-2); font-size: 15px; }
ol.sources li { margin-bottom: var(--s3); }

/* ------------------------------------------------------------------- signup */

.signup { border-top: 1px solid var(--rule); padding-top: var(--s6); margin-top: var(--s7); }

.field {
  display: flex; align-items: stretch; gap: var(--s4);
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: var(--s3); margin: var(--s5) 0 var(--s3);
}

.field input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-family: var(--sans); font-size: 17px; color: var(--ink);
  padding: var(--s3) 0;
  min-height: 44px;             /* §4.3 minimum tap target */
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus-visible { outline: none; }
.field:focus-within { border-bottom-color: var(--ink); }

/* A rule, not a filled button — filled reads as software (§4.3). */
.field button {
  flex: none; min-height: 44px; padding: 0 var(--s4);
  border: 1px solid var(--ink-3); border-radius: 2px;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 11.5px;
  letter-spacing: 0.20em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.field button:hover:not(:disabled) { border-color: var(--ink); }
.field button:disabled { opacity: .45; cursor: default; }

.form-msg { min-height: 1.6em; font-size: 15px; color: var(--ink-2); margin: 0; }
.form-msg[data-state="error"] { color: var(--ink); }

/* ------------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--rule);
  padding: var(--s6) 0 var(--s8);
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3);
}
footer nav { display: flex; flex-wrap: wrap; gap: var(--s5); margin-bottom: var(--s4); }
footer a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
footer a:hover { border-bottom-color: var(--ink-3); }

.back {
  display: inline-block; margin-bottom: var(--s6);
  font-size: 11.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
}
.back:hover { color: var(--ink); }

/* §4.7 — motion is ambient and never demands attention; it stops entirely when
   the viewer has asked for less of it. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 540px) {
  .page { padding: var(--s7) 0; }
  h2 { margin-top: var(--s6); }
  /* A label and its value fight for the same line on a phone. Stack them; the
     rule between rows still does the separating. */
  .row { flex-direction: column; align-items: stretch; gap: var(--s1); }
  .row-value { text-align: left; }
  /* Stacked, the shared bottom rule would sit under the button. Give the rule
     back to the input, where it belongs. */
  .field { flex-wrap: wrap; border-bottom: 0; padding-bottom: 0; gap: var(--s3); }
  .field input { border-bottom: 1px solid var(--ink-3); width: 100%; }
  .field:focus-within { border-bottom-color: transparent; }
  .field input:focus { border-bottom-color: var(--ink); }
  .field button { width: 100%; }
}