/* Fearward — fearward.studio668.com
   Palette and type follow design/README.md (DECISIONS #125): ink on paper, and no accent colour.
   Hierarchy is built from weight, size and whitespace only. Do not add an accent — a light accent
   cannot reach 4.5:1 on a light ground, which is why the brand has none. */

:root {
  --ink:   #15171C;  /* not black — ink with a blue cast */
  --paper: #EAE7E0;  /* not white — printing paper */

  --bg: var(--paper);
  --fg: var(--ink);
  --hairline: rgba(21, 23, 28, 0.16);
  --muted: rgba(21, 23, 28, 0.62);

  /* The one section that flips. On a dark page it lifts to the dark card rather than
     flashing full paper at someone reading at night. */
  --invert-bg: var(--ink);
  --invert-fg: var(--paper);
  --invert-edge: transparent;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;

  --measure: 34rem;
  /* The identity block runs wider than prose: its lines are short, it is display type, and the
     whole statement has to land on the first screen without anyone scrolling for it. */
  --measure-identity: 46rem;
  --gutter: clamp(1.5rem, 6vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --fg: var(--paper);
    --hairline: rgba(234, 231, 224, 0.18);
    --muted: rgba(234, 231, 224, 0.66);
    /* On a dark page there is nothing to flip to that isn't a flash in the eyes at 2am, so
       the section lifts to the dark card instead and is marked out by its edges. The gesture
       survives; the retina burn does not. */
    --invert-bg: #1E2128;
    --invert-edge: rgba(234, 231, 224, 0.14);
    --invert-fg: var(--paper);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---- the wordmark ------------------------------------------------------- */
/* One file, masked, painted with currentColor — so it takes the colour of whatever
   ground it sits on and the EA stays a genuine hole that the background shows through.
   The source SVG keeps its two paths and its fill-rule="evenodd"; never split them. */
.wordmark {
  display: block;
  aspect-ratio: 5218.2 / 729.2;
  background-color: currentColor;
  -webkit-mask: url("/wordmark.svg") no-repeat center / contain;
          mask: url("/wordmark.svg") no-repeat center / contain;
}

.wordmark--hero { width: clamp(15rem, 62vw, 32rem); }
.wordmark--small { width: 8.25rem; }

/* ---- layout ------------------------------------------------------------- */
.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.hero, .invert .wrap { max-width: var(--measure-identity); }

.site-header { padding-block: clamp(2rem, 6vw, 3.25rem) 0; }
.site-header a { display: inline-block; color: inherit; }

main { display: block; }

/* ---- type --------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 5.5vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 3.6vw, 1.85rem); margin-top: 3rem; margin-bottom: 0.85rem; }
h3 { font-size: 1.125rem; letter-spacing: -0.015em; margin-top: 2rem; margin-bottom: 0.4rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

/* The app sets its own questions in a serif (Theme.QuestionText). Serif on this site is
   likewise reserved for Fearward speaking, never for ordinary prose. */
.voice { font-family: var(--serif); }

/* Sans, deliberately. Serif on this site is reserved for Fearward's own voice — the identity
   line, the three words, the paragraph about seeing. A description of the app is not the app
   speaking, and in serif it blurred into the line above it on a narrow screen. */
.lede {
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  line-height: 1.45;
  margin-top: 1.5rem;
  text-wrap: pretty;
}

.muted { color: var(--muted); }
.small { font-size: 0.9375rem; line-height: 1.6; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

ul { padding-left: 1.15rem; margin: 0 0 1.15rem; }
li { margin-bottom: 0.45rem; }

strong { font-weight: 700; }

/* ---- hero --------------------------------------------------------------- */
.hero { padding-block: clamp(2rem, 6vw, 3rem) 0; }
.hero .wordmark { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }

.hero-line {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(1.4rem, 4.2vw, 2rem);
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}

.status {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

/* ---- the three words --------------------------------------------------- */
/* Inline term-and-definition, in the serif the rest of the identity uses. They were stacked
   blocks until the whole statement had to fit on the first screen together. */
.three { margin-top: clamp(1.25rem, 3.5vw, 1.75rem); }

.three > div {
  padding-block: 0.8rem;
  border-top: 1px solid var(--hairline);
}
.three > div:last-child { border-bottom: 1px solid var(--hairline); }

.three dt, .three dd {
  display: inline;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.8vw, 1.2rem);
  line-height: 1.5;
}
.three dt { font-weight: 600; }
.three dt::after { content: " — "; font-weight: 400; }
.three dd { margin: 0; }

/* ---- the one inversion -------------------------------------------------- */
/* The page flips its two colours exactly once, at the sentence about seeing — the same
   move the app icon makes down its middle. Do not add a second one. */
.invert {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-block: 1px solid var(--invert-edge);
  margin-block: clamp(1.75rem, 4vw, 2.25rem) clamp(2.5rem, 7vw, 4rem);
  padding-block: clamp(2.25rem, 6vw, 3.25rem);
}

.invert p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.invert .close {
  font-size: clamp(1.1rem, 2.8vw, 1.3rem);
  margin-top: 1.5rem;
  opacity: 0.85;
}

/* ---- closing blocks ----------------------------------------------------- */
.block { padding-block: clamp(2rem, 5vw, 3rem); }
.block + .block { border-top: 1px solid var(--hairline); }

.block h2 { margin-top: 0; font-size: 1.0625rem; letter-spacing: 0.09em;
            text-transform: uppercase; font-weight: 700; margin-bottom: 0.9rem; }

/* ---- documents (privacy / terms / support) ------------------------------ */
.doc { padding-block: clamp(2.5rem, 7vw, 4rem) clamp(3rem, 8vw, 5rem); }
.doc .updated { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--muted); }
.doc h2 + p, .doc h3 + p { margin-top: 0; }
.doc .note {
  border-left: 2px solid var(--hairline);
  padding-left: 1.1rem;
  margin-block: 1.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ---- footer ------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: 2.25rem 3.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1.1rem; }
.site-footer nav a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.site-footer nav a:hover { border-bottom-color: currentColor; }
.site-footer p { margin-bottom: 0.4rem; }

/* Wide content must scroll inside itself rather than pushing the page sideways. */
.scroll-x { overflow-x: auto; }