/* ==========================================================================
   The Exit Society — typography system
   Single source of truth. Linked by index.html, privacy.html, circle.html
   and the Circle private page, so shared components cannot drift apart.

   Instrument Serif display only — h1, h2, selected h3, editorial statements
   Hanken Grotesk   everything else — body, lists, nav, forms, buttons, labels

   Weights: 400 and 500 only.
   ========================================================================== */

:root{
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* seven levels ------------------------------------------------------- */
  --t-display: clamp(44px, 6vw, 80px);      /* 1 · reserved                */
  --t-h2:      clamp(34px, 4.2vw, 54px);    /* 2 · section statements      */
  --t-h3:      clamp(26px, 2.6vw, 34px);    /* 3 · editorial / hero h1     */
  --t-lg:      clamp(18px, 1.5vw, 19px);    /* 4 · large body, lists       */
  --t-body:    clamp(16.5px, 1.35vw, 17px); /* 5 · body, form controls     */
  --t-ui:      13.5px;                      /* 6 · nav, buttons            */
  --t-label:   12px;                      /* 7 · labels, legal, footer   */

  /* line heights ------------------------------------------------------- */
  --lh-display: 0.98;
  --lh-head:    1.02;
  --lh-h3:      1.12;
  --lh-ui:      1.4;
  --lh-tight:   1.5;
  --lh-body:    1.6;

  /* tracking ----------------------------------------------------------- */
  --tr-display:   -0.012em;
  --tr-head:      -0.01em;
  --tr-none:      0;
  --tr-ui:        0.03em;
  --tr-formlabel: 0.18em;
  --tr-label:     0.18em;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-none);
}

h1, h2, h3{
  font-family: var(--font-serif);
  font-weight: 400;
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1{ font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
h2{ font-size: var(--t-h2);      line-height: var(--lh-head);    letter-spacing: var(--tr-head); }
h3{ font-size: var(--t-h3);      line-height: var(--lh-h3);      letter-spacing: var(--tr-none); }

/* --------------------------------------------------------------------------
   Level 7 — labels, eyebrows. The only uppercase on the site.
   -------------------------------------------------------------------------- */
.eyebrow,
.hero-kicker,
.final-mark,
.final-sub,
.final-tag,
.access-note{
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* hero supporting lines — sentence case, quiet. Not straplines. */
.hero-position{
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  font-weight: 400;
  line-height: var(--lh-ui);
  letter-spacing: 0.01em;
  text-transform: none;
}

/* form labels keep uppercase, tighter — a form convention, not a flourish */
.field label,
fieldset.choice legend,
.field input[type=file]::file-selector-button{
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-formlabel);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Level 6 — UI. Sentence case; capitalisation comes from the markup.
   -------------------------------------------------------------------------- */
.btn,
nav.primary-nav a,
.back,
.mobile-nav .close-menu,
.modal-close,
.footer-bottom,
.footer-bottom .legal-link,
.circle-footer{
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-ui);
  text-transform: none;
}
.btn, .back{ font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.footer-bottom,
.footer-bottom .legal-link,
.circle-footer{ font-weight: 400; }

.mobile-nav a{
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-none);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Levels 2–3 — display
   -------------------------------------------------------------------------- */
.statement,
.final-statement{
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  font-style: normal;
  text-wrap: balance;
  font-optical-sizing: auto;
}

/* the homepage hero — semantic h1, set at editorial size (Option A) */
h1.hero-lead,
.finish,
.four-words span,
.modal-box h3{
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-none);
  font-style: normal;
  font-optical-sizing: auto;
}
/* hero: 24px min gives a four-line wrap on a phone instead of five,
   at negligible cost to hierarchy (still 1.33x the subhead, plus serif/sans) */
h1.hero-lead{ text-wrap: balance; font-size: clamp(24px, 2.3vw, 30px); }

/* --------------------------------------------------------------------------
   Levels 4–5 — body
   -------------------------------------------------------------------------- */
.line-list,
.hero-sub,
.form-confirm,
.access-lead{
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tr-none);
  font-style: normal;
}
.form-confirm{ font-weight: 500; }

.body-copy,
.form-note,
.radio-row label,
.field.check label,
.modal-box p,
.lead{
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tr-none);
  font-style: normal;
}

/* form controls — 17px stops iOS Safari auto-zooming on focus */
.field input,
.field select,
.field textarea,
.access-form input[type=text]{
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--tr-none);
  text-transform: none;
}
.access-form input[type=text]::placeholder{ letter-spacing: var(--tr-none); text-transform: none; }

/* --------------------------------------------------------------------------
   Level 7 — small print
   -------------------------------------------------------------------------- */
.consent-text,
.form-error,
.final-fineprint,
.help,
.access-error,
.updated{
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-none);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Privacy page long-form
   -------------------------------------------------------------------------- */
.doc p, .doc li, p, li{ letter-spacing: var(--tr-none); }

/* --------------------------------------------------------------------------
   Answers and long questions read as sentences, not labels. Spaced capitals
   are for short labels only.
   -------------------------------------------------------------------------- */
.field .radio-row label,
.field.check label{
  text-transform: none;
  letter-spacing: var(--tr-none);
  font-size: var(--t-body);
  font-weight: 400;
}
fieldset.choice legend{
  text-transform: none;
  letter-spacing: var(--tr-none);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: var(--lh-tight);
}