/* Shared stylesheet for the secondary pages: privacy.html, beta-terms.html,
   bot.html and 404.html. Same tokens and wordmark as the homepage
   (full-stop/styles.css), on a leaner reading layout for long-form text. */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/full-stop/web/enuva-display-medium-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-0131, U+0134-0148, U+014A-017E, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01CC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0300-0304, U+0306-030C, U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331, U+0335, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB-20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2116, U+2122, U+2212;
}
/* Georgia Regular width fit across the four-language display copy; vertical
   overrides derive from Newsreader 1470/-530/0 at 2000 units per em. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  font-style: normal;
  font-weight: 400;
  size-adjust: 95.8197%;
  ascent-override: 76.7066%;
  descent-override: 27.6561%;
  line-gap-override: 0%;
}
:root {
  --paper: #f5f2e9; --ink: #3a2a1f; --muted: #746355; --amber: #e29a45;
  --dusk: #594738; --dusk-ink: #f5f2e9; --dusk-muted: #d8c8b5;
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --step-display: clamp(4.5rem, 2.9rem + 6.6vw, 9rem);
  /* 54px on tablet and up (unchanged from the fixed size this replaced); eases
     down to 36px on phones so a three-word h1 like "Beta Programme Terms"
     stays within two lines. */
  --step-page-title: clamp(2.25rem, 1rem + 5vw, 3.375rem);
  --step-h2: clamp(2.5rem, 2.05rem + 1.9vw, 3.5rem);
  --step-h3: clamp(1.5rem, 1.39rem + 0.47vw, 1.75rem);
  --step-lede: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);
  --step-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --step-small: 0.875rem; --step-legal: 0.75rem;
  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem;
  --space-6: 3rem; --space-8: 4rem; --space-12: 6rem; --space-16: 8rem;
  --section-pad: clamp(5rem, 3.6rem + 5.8vw, 8rem);
  --radius-control: 10px; --radius-device: 36px; --radius-pill: 999px;
}
/* Hairline, matching the value full-stop/styles.css keeps in its own --rule. */
:root {
  --rule: #d5cfc1;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  /* A flex column: main (flex: 1 0 auto, below) grows to push a short page's
     footer to the bottom. header/main/footer each also need width: 100% (below)
     — as flex items with auto cross-axis margins (margin-inline: auto), they
     don't stretch to fill the column on their own; they shrink to their
     content's width and center that instead, which quietly shrank header down
     to just its logo before that rule was added. */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--amber); color: var(--ink); }
a { color: var(--ink); text-underline-offset: 5px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

header {
  max-width: 68ch;
  width: 100%;
  margin-inline: auto;
  padding: var(--space-4) var(--space-3) 0;
}
header a { display: inline-block; line-height: 0; }
.wordmark {
  stroke: none;
  width: 155px;
  height: auto;
  display: block;
}

main {
  max-width: 68ch;
  width: 100%;
  margin-inline: auto;
  padding: var(--space-6) var(--space-3) var(--space-12);
  /* Grow to fill the viewport on short pages (404), so footer stays pinned to the
     bottom instead of floating mid-screen. Longer pages already exceed the
     viewport, so this never shrinks their content. */
  flex: 1 0 auto;
}

h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-page-title);
  line-height: 1.04;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  margin: 0 0 var(--space-2);
}
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-h3);
  line-height: 1.2;
  margin: var(--space-8) 0 var(--space-2);
}
.period { color: var(--amber); }

.updated {
  font-size: var(--step-small);
  margin: 0 0 var(--space-4);
}
main p, main li { color: var(--muted); }
main ul { padding-left: 1.4em; }
main li { margin-bottom: var(--space-1); }
strong { color: var(--ink); font-weight: 600; }

code, pre {
  font-family: var(--font-mono);
  font-size: var(--step-small);
}
code { color: var(--ink); }
pre {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  padding: var(--space-2);
  margin: 0 0 var(--space-2);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--ink);
  line-height: 1.5;
}

.contact-block {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
  margin-top: var(--space-6);
}
.contact-block p { margin: 0; }

/* 404 */
.code {
  font-size: var(--step-legal);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--space-1);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-4);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--paper);
  font: 600 var(--step-body)/1.2 var(--font-text);
  text-decoration: none;
}
.button:hover { background: #2b1c13; }
.secondary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-1);
  font-weight: 600;
  color: var(--ink);
  text-underline-offset: 5px;
}

footer {
  /* Same 68ch as header/main, computed at the same (inherited, 17px) font size as
     those elements. font-size lives on footer p instead, so it never shrinks this
     max-width and pulls the footer's left edge away from the content column's. */
  max-width: 68ch;
  width: 100%;
  margin-inline: auto;
  padding: var(--space-6) var(--space-3) var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  line-height: 1.7;
}
footer p {
  margin: 0;
  font-size: var(--step-small);
}
.footer-grant { display: flex; align-items: center; gap: var(--space-2); }
.footer-grant img { width: 136px; height: 12px; object-fit: contain; }
.built { width: 100%; color: var(--muted); }
/* Keep the label and its link together: "email us" must not orphan onto its own
   line, away from "Contact:". */
#contact .contact-email { white-space: nowrap; }