/* ─────────────────────────────────────────────────────────────────────────
   doc.css — the document pages (app privacy / support / security).

   Same tokens as index.html, same drafting-sheet logic: one left margin,
   rules between blocks, mono for labels, the redline spent only on links.
   Shared rather than inlined nine times so the palette can't drift between
   the front page and the documents hanging off it.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --paper:   #edede7;
  --ink:     #141618;
  --muted:   #666b67;
  --rule:    #c8cac2;
  --redline: #d0301f;

  /* The redline at text size. #d0301f is 4.33:1 on the light ground — fine for
     the display-size accent it carries on the front page, short of AA's 4.5 for
     body copy and 11px labels, which is what these pages are made of. Dark mode
     needs no separate value; #ff5340 is already 5.67:1 there. */
  --redline-ink: #c42a1a;

  --display: 'Big Shoulders Display', 'Haettenschweiler', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --body:    'IBM Plex Sans', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gutter:  clamp(1.5rem, 6vw, 6rem);
  --measure: 36rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #141618;
    --ink:     #e8e9e3;
    --muted:   #8e938e;
    --rule:    #2e322f;
    --redline: #ff5340;
    --redline-ink: #ff5340;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--redline);
  outline-offset: 3px;
}

.sheet {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.25rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}

/* ─── masthead ─────────────────────────────────────────────────────────── */
/* The studio name is the small mark here; the app name is the headline. */

.studio {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.studio:hover,
.studio:focus-visible { color: var(--redline-ink); }

.doc-head {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.app-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 11vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.doc-kind {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--redline-ink);
}

.updated {
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── prose ────────────────────────────────────────────────────────────── */
.prose {
  max-width: var(--measure);
  margin-top: clamp(2rem, 5vw, 3rem);
}

.prose > .intro {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.prose h2 {
  margin: clamp(2.25rem, 6vw, 3rem) 0 0.75rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.875rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.prose h3 {
  margin: 1.75rem 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.prose p { margin: 0.75rem 0 0; text-wrap: pretty; }

.prose ul {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
}

.prose li { margin-top: 0.35rem; text-wrap: pretty; }

.prose a {
  color: var(--redline-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.prose strong { font-weight: 500; }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */
/* A question is set in the ink colour, its answer one step back — the same
   name/blurb relationship the roster uses on the front page. */

.faq { margin-top: 1.5rem; }

.faq .q {
  margin: 0;
  font-weight: 500;
}

.faq .a {
  margin: 0.3rem 0 0;
  color: var(--muted);
}

.faq + .faq { margin-top: 1.25rem; }

/* ─── contact ──────────────────────────────────────────────────────────── */
.contact-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 4.5vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: break-word;
  border-bottom: 2px solid var(--rule);
  transition: color 160ms ease, border-color 160ms ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  color: var(--redline);
  border-bottom-color: var(--redline);
}

/* ─── footer ───────────────────────────────────────────────────────────── */
.doc-foot {
  margin-top: clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--rule);
  padding-top: 0.875rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc-foot a {
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.doc-foot a:hover,
.doc-foot a:focus-visible { color: var(--redline-ink); }

.doc-foot .sep { margin: 0 0.6rem; opacity: 0.55; }