/*
  The three text pages: privacy, terms, and the 404.

  Shared as a file, where index.html inlines its own. The split is principled
  rather than arbitrary: index.html's correctness at FIRST PAINT is load-bearing
  -- the doors have to be there, closed and right, before anything else -- and a
  policy page's is not. The cost is the token block existing in two places; the
  benefit is that the door never waits on a network request and these pages stay
  editable without touching it.
*/

:root {
  /* Lifted verbatim from design/specs/SMARNA_App.html by way of
     SMARNA/Design/Palette.swift. Same spine as index.html. */
  --ink:       #3B3128;
  --cream:     #F5F0E6;
  --champagne: #B89B5E;
  --muted:     #6A5E51;
  --hairline:  #E9E1D0;

  --face: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

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

html { background: var(--cream); }

body {
  margin: 0;
  padding: clamp(28px, 6vw, 72px) clamp(24px, 6vw, 40px) 96px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--face);
  font-size: 15px;            /* Type.copy */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A measure, not a width. Long-form text wants ~68 characters. */
main, header.masthead { max-width: 64ch; margin: 0 auto; }

header.masthead {
  padding-bottom: clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(28px, 5vw, 48px);
}

/* The mark, at the app's own proportions, linking home. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--wm, 20px) * 0.385);
  color: var(--ink);
  text-decoration: none;
  --wm: 20px;
}
.wordmark__mark { display: block; height: calc(var(--wm) + 2px); width: auto; }
.wordmark__word { font-size: var(--wm); font-weight: 600; letter-spacing: 0.2em; }
.wordmark__word b { font-weight: 800; }

/* The champagne all-caps kicker that opens most sections in the app:
   11pt regular, 0.24em tracking. */
.kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(26px, 4.4vw, 30px);   /* Type.display() */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

h2 {
  margin: 40px 0 10px;
  font-size: 17px;                        /* Type.subtitle */
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { margin: 0 0 14px; }
p.lede { color: var(--muted); }

a { color: var(--ink); text-decoration-color: var(--champagne); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 2px; }

/* An honest notice, not a policy pretending to be one. Champagne rule on the
   leading edge, which is how the app marks something that wants reading. */
.notice {
  margin: 0 0 32px;
  padding: 16px 18px;
  border-left: 2px solid var(--champagne);
  background: #FBF8F1;                    /* Palette.card */
  color: var(--muted);
}
.notice p:last-child { margin-bottom: 0; }

/* The measure is in `ch`, so it resolves against THIS element's font size. The
   footer must therefore keep the body's 15px or its 64ch comes out narrower
   than main's and the rule above it sits visibly inset. The smaller Type.meta
   size goes on the links instead. */
footer.colophon {
  max-width: 64ch;
  margin: 64px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
}
footer.colophon a {
  margin-right: 16px;
  font-size: 13px;                        /* Type.meta */
}

/* The 404 says one thing, centred, the way the app's empty states do. */
body.lost { display: grid; place-items: center; min-height: 100vh; padding-bottom: 0; text-align: center; }
body.lost main { max-width: 46ch; }