/* Shared by every page: fonts, colour tokens, base type, layout, footer.
   Anything only one page uses stays in that page. */

/* Self-hosted, so loading a page tells nobody but us that you visited.
   Latin subset only; anything outside it falls back to the system font. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-500-700-800-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-400-500-600-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* light */
  --ground: #e9eae6;
  --surface: #ffffff;
  --sunk: #dfe1dc;
  --ink: #14161a;
  --muted: #5c6169;
  --line: #cdd0ca;
  --accent: #d8451a;
  --accent-ink: #ffffff;
  --accent-wash: #f6ddd4;

  /* the dark band commits to one look in both themes */
  --band: #14161a;
  --band-ink: #f2f3f0;
  --band-muted: #9aa0a6;
  --band-line: #2b2f35;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 36rem;
  --s1: 1.0625rem;
  --s2: 1.3rem;
  --s3: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --s4: clamp(2.9rem, 1.6rem + 6vw, 5.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #101215;
    --surface: #181b1f;
    --sunk: #0c0e11;
    --ink: #eceded;
    --muted: #969ca4;
    --line: #272b31;
    --accent: #ff6a35;
    --accent-ink: #14161a;
    --accent-wash: #2a1b14;
    --band: #080a0c;
    --band-ink: #f2f3f0;
    --band-muted: #9aa0a6;
    --band-line: #22262b;
  }
}
:root[data-theme="dark"] {
  --ground: #101215;
  --surface: #181b1f;
  --sunk: #0c0e11;
  --ink: #eceded;
  --muted: #969ca4;
  --line: #272b31;
  --accent: #ff6a35;
  --accent-ink: #14161a;
  --accent-wash: #2a1b14;
  --band: #080a0c;
  --band-ink: #f2f3f0;
  --band-muted: #9aa0a6;
  --band-line: #22262b;
}

* { box-sizing: border-box; }
/* The hidden attribute always wins, even over a class that sets display. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--s1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.02; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
p { margin: 0; max-width: var(--measure); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 68rem; margin-inline: auto; padding-inline: 20px; }
.label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

footer { border-top: 1px solid var(--line); padding-block: 26px 44px; color: var(--muted); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
footer a { text-underline-offset: 3px; }
footer a:hover { color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------------- subpages: privacy, invites ---------------- */
.page-head {
  background: var(--band); color: var(--band-ink);
  border-bottom: 1px solid var(--band-line);
  padding-block: 22px clamp(36px, 6vw, 60px);
}
.home {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 1.2rem; letter-spacing: -0.02em;
  color: var(--band-ink); text-decoration: none;
}
.home svg { color: var(--accent); flex: none; }
.home span { font-weight: 500; }
.home b { font-weight: 800; }
.page-head .label { color: var(--band-muted); margin-top: clamp(30px, 5vw, 48px); }
.page-title { font-size: var(--s3); font-weight: 800; margin-top: 14px; }
.page-lede { font-size: var(--s2); line-height: 1.45; color: var(--band-muted); margin-top: 18px; max-width: 34rem; }
.page-main { padding-block: clamp(36px, 6vw, 64px); }