/* simple20 Her — web pages.
   Tokens and type from design/brand-guide.pdf (October 2026), binding per S-28.
   Square corners everywhere, 32px side margins, nothing below 16px,
   blue only for links, one pink button per page. */

:root {
  /* Colour: one ground, one ink, two identity colours. */
  --ink: #0A0A0A;         /* every word that isn't a link */
  --paper: #FFFFFF;       /* the only background */
  --pink: #FF0A9A;        /* the 2 in the mark, nothing else */
  --blue: #1232F5;        /* the 0 in the mark, and every link */
  --pink-action: #EA3597; /* primary button, one per page; label 18px and up */
  --muted: #5C5C5C;       /* secondary lines */
  --line: #6E6E6E;        /* borders and dividers */
  --pink-tint: #FFE6F4;   /* selected chip fill */

  /* Type: a Didone for the voice, a sans for the work. */
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --text: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scale (screen). Small 16/24 is the floor. */
  --headline: 52px;  --headline-lh: 56px;
  --title: 44px;     --title-lh: 48px;
  --section: 34px;   --section-lh: 40px;
  --lead: 20px;      --lead-lh: 30px;
  --body: 18px;      --body-lh: 28px;
  --small: 16px;     --small-lh: 24px;

  --margin: 32px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: var(--body);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
}

/* Layout: single column, content at the top, leftover space at the bottom. */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--margin);
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
}

/* The wordmark. Never redrawn: site/logo.svg is design/logo.svg. */
.mark { display: block; margin: 0 0 var(--margin); }
.mark img { display: block; width: 180px; height: auto; }

/* Headings. Display 900, sentence case. */
h1, h2, h3 { font-family: var(--display); font-weight: 900; margin: 0; }
h1 { font-size: var(--title); line-height: var(--title-lh); }
h2 {
  font-size: var(--section);
  line-height: var(--section-lh);
  margin-top: var(--margin);
  margin-bottom: 16px;
}
h3 {
  font-family: var(--text);
  font-weight: 400;
  font-size: var(--body);
  line-height: var(--body-lh);
  margin-top: 24px;
  margin-bottom: 8px;
}

.headline { font-size: var(--headline); line-height: var(--headline-lh); }

.lead {
  font-size: var(--lead);
  line-height: var(--lead-lh);
  margin: 16px 0 0;
}

p, ul, ol, dl { margin: 16px 0 0; }

ul, ol { padding-left: 24px; }
li { margin-top: 8px; }

/* Fact lists: the term on its own line, the value under it. */
dt { font-size: var(--body); line-height: var(--body-lh); margin-top: 16px; }
dd { margin: 4px 0 0; color: var(--muted); }

/* Blue means "tap to go somewhere". If it isn't a link, it isn't blue. */
a { color: var(--blue); }
a:hover { text-decoration: none; }

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

/* The one pink button per page. Label 18px and up: white on Pink action is 3.9:1. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  border: 0;
  background: var(--pink-action);
  color: var(--paper);
  font-family: var(--text);
  font-size: var(--body);
  line-height: var(--body-lh);
  text-decoration: none;
}
.button:hover { text-decoration: underline; }

/* The draft note on /privacy and /terms. Comes off when O-7 closes. */
.draft {
  margin: 0 0 var(--margin);
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--pink-tint);
  font-size: var(--small);
  line-height: var(--small-lh);
}

/* Secondary lines. */
.muted { color: var(--muted); }

.updated {
  margin-top: var(--margin);
  color: var(--muted);
  font-size: var(--small);
  line-height: var(--small-lh);
}

/* Link lists stacked as blue links, not buttons. */
.links { list-style: none; padding: 0; margin: var(--margin) 0 0; }
.links li { margin-top: 0; }
.links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--body);
  line-height: var(--body-lh);
}

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

/* The footer, on every page. S-7, S-8, S-32. */
.footer {
  margin-top: var(--margin);
  padding-top: var(--margin);
  border-top: 1px solid var(--line);
  font-size: var(--small);
  line-height: var(--small-lh);
}
.footer p { margin: 0; }
.footer p + p { margin-top: 6px; }

/* The phone. The margins and the floor hold; only the display sizes come down. */
@media (max-width: 480px) {
  :root {
    --headline: 40px;  --headline-lh: 44px;
    --title: 34px;     --title-lh: 40px;
    --section: 24px;   --section-lh: 32px;
  }
  .mark img { width: 150px; }
}