/* Kiliworld static site — one stylesheet, no build step, no external fonts,
   no JavaScript, no images beyond the app icon itself.

   Dark by default, because the game is: the palette below is lifted from the
   app's own launcher icon and in-game board — deep navy ground, blue grid
   lines, and the neon green / cyan / violet / amber accents the icon uses.
   A light mode follows for readers who ask for one, but dark is the identity.

   NOTE: every href in this site is RELATIVE (style.css, privacy.html), never
   root-absolute (/style.css). Root-absolute paths break when the pages are
   opened straight off disk with file://, which is how they get previewed
   before deploy — the stylesheet silently 404s and you get raw HTML. Cloudflare
   Pages serves relative links identically, so there is no reason to use the
   form that only works in one of the two places. */

:root {
  color-scheme: dark;

  --bg: #080b14;
  --bg-2: #0b1020;
  --surface: #111830;
  --surface-2: #16203c;
  --border: #223056;
  --border-soft: #1a2444;
  --grid-line: #3a63c0;

  --text: #e9eefb;
  --text-soft: #9fb0d4;
  --text-faint: #6e7fa6;

  --neon-cyan: #35ddd0;
  --neon-green: #79f2a0;
  --neon-violet: #b28cff;
  --neon-amber: #ffab5e;
  --neon-pink: #ff6a8b;

  --accent: var(--neon-cyan);
  --accent-2: var(--neon-violet);
  --accent-ink: #05221f;
  --accent-glow: rgba(53, 221, 208, .28);

  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 62rem;
  --maxw-text: 45rem;

  --shadow: 0 8px 24px -8px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 56px -20px rgba(0, 0, 0, .8);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg: #f7f8fc;
    --bg-2: #eef1f9;
    --surface: #ffffff;
    --surface-2: #f2f5fc;
    --border: #d9e0f0;
    --border-soft: #e6ebf7;
    --grid-line: #7d9ae0;

    --text: #101627;
    --text-soft: #4d5975;
    --text-faint: #7a86a3;

    --neon-cyan: #0d9c92;
    --neon-green: #1f9d5b;
    --neon-violet: #6d3fd4;
    --neon-amber: #c26a12;
    --neon-pink: #d13b60;

    --accent: #0d9c92;
    --accent-2: #6d3fd4;
    --accent-ink: #ffffff;
    --accent-glow: rgba(13, 156, 146, .2);

    --shadow: 0 6px 18px -8px rgba(16, 22, 39, .18);
    --shadow-lg: 0 20px 44px -20px rgba(16, 22, 39, .26);
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.06rem);
  line-height: 1.7;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  /* Two soft light sources behind the top of the page, in the icon's own
     green-cyan and violet. Fixed so they stay put as the page scrolls. */
  background-image:
    radial-gradient(50rem 28rem at 12% -8%, rgba(53, 221, 208, .10), transparent 65%),
    radial-gradient(44rem 26rem at 92% -14%, rgba(178, 140, 255, .10), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

::selection { background: var(--accent); color: var(--accent-ink); }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--text); }

/* --- header --------------------------------------------------------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

header.site nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .7rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
}

/* The STUDIO mark (cat + globe), not the Sudoku app icon -- the two identities
   are deliberately separate: Kiliworld is the studio, Sudoku is one of its
   games. Width AND height are also set inline on the <img>, so the logo is the
   right size even in the raw-HTML case where this stylesheet fails to load. */
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .5);
}

.nav-links { display: flex; flex-wrap: wrap; gap: .2rem 1.3rem; }

.nav-links a {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  padding: .1rem 0;
  transition: color .15s ease;
}

.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -.2rem 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* --- layout --------------------------------------------------------- */

main { max-width: var(--maxw); margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }

/* Policy/legal pages: same chrome, narrower measure, calmer rhythm. */
main.doc { max-width: var(--maxw-text); padding-top: 3rem; }

/* --- hero ----------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: clamp(4rem, 9vw, 7rem);
}

/* Single-column hero, for pages whose visual is a full-width banner above it
   rather than something sitting beside the text. */
.hero-solo {
  display: block;
  max-width: 42rem;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: .3rem .75rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}

.eyebrow::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.hero h1 { margin-top: 0; }

.hero .lede { margin-bottom: 1.75rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* --- studio logo & banner -------------------------------------------- */

/* The Kiliworld mark, shown large on the home page. No device frame and no
   neon rim -- the artwork already has its own glow and its own dark ground,
   so wrapping it in another lit border just fights it. */
.logo-hero {
  display: block;
  width: 100%;
  max-width: clamp(11rem, 26vw, 15rem);
  height: auto;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
}

/* Full-width marketing art (the Play feature graphic), used to open a game
   page. Ratio is fixed so the space is reserved before the image loads. */
.banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 500;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* --- screenshots ---------------------------------------------------- */

/* Real captures from the app, framed as devices. Sized by HEIGHT rather than
   width: the two shots have different aspect ratios (450x800 and 339x694), and
   matching their heights makes them read as two phones side by side, where
   matching their widths would make one visibly taller than the other. */

.shots {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shots li { margin: 0; text-align: center; }

.shot {
  display: block;
  height: clamp(19rem, 42vw, 27rem);
  width: auto;
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  box-shadow: var(--shadow-lg);
}

.shot-caption {
  display: block;
  margin-top: .75rem;
  font-size: .84rem;
  color: var(--text-faint);
}

/* Hero variant: one capture, floated large, with the neon rim the icon uses. */
.shot-hero {
  position: relative;
  display: inline-block;
  padding: clamp(.6rem, 1.5vw, .9rem);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
}

.shot-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    var(--neon-green), var(--neon-cyan) 40%, var(--neon-violet) 75%, transparent);
  opacity: .45;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.shot-hero img {
  display: block;
  width: 100%;
  max-width: 17rem;
  height: auto;
  border-radius: 16px;
}

/* --- games grid (studio home) --------------------------------------- */

.games { display: grid; gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.games li { margin: 0; }

.game-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.game-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
  color: var(--text);
}

.game-card img {
  display: block;
  width: clamp(6rem, 16vw, 8.5rem);
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.game-card h3 {
  margin: 0 0 .35rem;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  letter-spacing: -.025em;
}

.game-card p { color: var(--text-soft); margin: 0 0 .75rem; font-size: .96rem; }

.game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  align-items: center;
  font-size: .78rem;
}

.tag {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  letter-spacing: .02em;
}

.tag-live {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.game-card .go {
  color: var(--accent);
  font-weight: 600;
  font-size: .9rem;
}

@media (max-width: 34rem) {
  .game-card { grid-template-columns: 1fr; justify-items: start; }
}

/* --- type ----------------------------------------------------------- */

h1 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.04em;
  font-weight: 700;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--neon-green), var(--neon-cyan) 45%, var(--neon-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.028em;
  font-weight: 650;
  margin: 3.5rem 0 1.1rem;
  text-wrap: balance;
}

main.doc h2::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: .7;
  margin-bottom: 1.05rem;
}

h3 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.012em;
  margin: 2.25rem 0 .6rem;
}

:where(h1, h2, h3)[id] { scroll-margin-top: 5rem; }

p { margin: 0 0 1.1rem; }

.lede {
  color: var(--text-soft);
  font-size: clamp(1.06rem, 1rem + .45vw, 1.24rem);
  line-height: 1.6;
  letter-spacing: -.012em;
  text-wrap: pretty;
}

main.doc > p, main.doc > ul, main.doc > ol { max-width: 42rem; }

.updated {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-faint);
  font-size: .84rem;
  margin: 0 0 2.25rem;
  padding: .28rem .8rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
}

ul, ol { padding-left: 1.3rem; margin: 0 0 1.1rem; }
li { margin: .45rem 0; }
li::marker { color: var(--accent); }

strong { font-weight: 650; color: var(--text); }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
    "Liberation Mono", monospace;
  font-size: .86em;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--accent);
  padding: .12em .4em;
  border-radius: 5px;
  white-space: nowrap;
}

/* --- sections ------------------------------------------------------- */

/* Vertical rhythm between sections lives HERE, on the heading block, not as
   margins scattered across every content type that might follow one. A section
   is "a .section-head plus whatever comes after it", so giving the head a
   generous top margin spaces every section identically no matter whether it is
   followed by cards, a list, a table or an image. */
.section-head {
  max-width: 40rem;
  margin: clamp(3.5rem, 8vw, 6rem) 0 2rem;
}

.section-head:first-child { margin-top: 0; }
.section-head h2 { margin-top: 0; }
.section-head p { color: var(--text-soft); margin-bottom: 0; }

/* Content blocks only need to clear each other; the next .section-head brings
   its own space. */
.grid-2, .tiles, .games, .checks, .palettes, .shots, .banner { margin-bottom: 1.5rem; }
.grid-2 + .palettes { margin-top: 2rem; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.feature {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.feature:hover {
  transform: translateY(-3px);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.feature h3 {
  margin: 0 0 .4rem;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.feature h3::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  flex: none;
}

.feature:nth-child(2) h3::before { background: var(--neon-violet); box-shadow: 0 0 10px rgba(178,140,255,.4); }
.feature:nth-child(3) h3::before { background: var(--neon-amber); box-shadow: 0 0 10px rgba(255,171,94,.4); }
.feature:nth-child(4) h3::before { background: var(--neon-green); box-shadow: 0 0 10px rgba(121,242,160,.4); }

.feature p { color: var(--text-soft); margin: 0; font-size: .96rem; }

/* Palette strip — one chip per theme family, showing the generated pairing. */
.palettes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.palettes li {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .45rem .85rem .45rem .5rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-size: .85rem;
  color: var(--text-soft);
}

.palettes .sw {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .12);
}

/* The six theme families, each shown as its own light-to-dark sweep — the two
   ends of what the generator produces for that hue. Defined here rather than
   with a style="" attribute so the strict CSP in _headers (style-src 'self',
   which forbids inline styles) needs no 'unsafe-inline' escape hatch. */
.sw-blue   { background: linear-gradient(135deg, #4d8dff, #0b2d6b); }
.sw-red    { background: linear-gradient(135deg, #ff5c6c, #5c0f1a); }
.sw-green  { background: linear-gradient(135deg, #79f2a0, #0d3d24); }
.sw-purple { background: linear-gradient(135deg, #b28cff, #2c1259); }
.sw-lemon  { background: linear-gradient(135deg, #ffe66a, #5c4a0c); }
.sw-orange { background: linear-gradient(135deg, #ffab5e, #5c2f0c); }

/* Room player slots, in the same order Theme.playerColors assigns them. */
.dots { display: inline-flex; gap: .35rem; align-items: center; vertical-align: middle; }
.dots i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.dots .p1 { background: var(--neon-cyan); }
.dots .p2 { background: var(--neon-violet); }
.dots .p3 { background: var(--neon-amber); }
.dots .p4 { background: var(--neon-green); }

/* --- link tiles ----------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .85rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.tiles li { margin: 0; }

.tiles a {
  display: block;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.05rem 1.2rem;
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tiles a:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.tiles strong { display: block; font-size: .98rem; margin-bottom: .2rem; color: var(--accent); }
.tiles span { display: block; font-size: .89rem; line-height: 1.5; color: var(--text-soft); }

/* --- blocks --------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin: 1.75rem 0;
}

.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.note {
  position: relative;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
  margin: 1.75rem 0;
  max-width: 42rem;
}

.note::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--accent);
}

.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }

.checks { list-style: none; padding: 0; margin: 1.5rem 0; }
.checks li { position: relative; padding-left: 1.8rem; margin: .55rem 0; }

.checks li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .58em;
  width: .4rem;
  height: .7rem;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg);
}

/* --- toc ------------------------------------------------------------ */

.toc {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
  margin: 2rem 0 2.5rem;
  max-width: 42rem;
}

.toc h2 {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
  font-weight: 650;
  margin: 0 0 .7rem;
}

.toc h2::before { display: none; }
.toc ol { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.toc li { margin: .18rem 0; break-inside: avoid; }
.toc a { color: var(--text-soft); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 34rem) { .toc ol { columns: 1; } }

/* --- tables --------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
}

table { border-collapse: collapse; width: 100%; min-width: 22rem; font-size: .93rem; }

th, td {
  text-align: left;
  vertical-align: top;
  padding: .78rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

thead th, tr:first-child th {
  background: var(--surface-2);
  font-weight: 650;
  font-size: .77rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  white-space: nowrap;
}

tbody tr:hover td, tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
tr:last-child td { border-bottom: none; }
td:first-child { font-weight: 550; }

/* --- buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(120deg, var(--neon-cyan), var(--neon-green));
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 650;
  font-size: .96rem;
  letter-spacing: -.008em;
  padding: .72rem 1.4rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px -8px var(--accent-glow);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.btn:hover {
  color: var(--accent-ink);
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 12px 28px -10px var(--accent-glow);
}

.btn:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border);
  text-decoration: none;
  font-weight: 550;
  font-size: .96rem;
  padding: .7rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: border-color .16s ease, color .16s ease;
}

.btn-ghost:hover { color: var(--text); border-color: var(--accent); }

.mail { font-weight: 650; font-size: 1.04rem; letter-spacing: -.01em; }

/* --- footer --------------------------------------------------------- */

footer.site {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-2);
  color: var(--text-soft);
  font-size: .88rem;
}

footer.site div {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.25rem 1.5rem 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.4rem;
}

footer.site a { color: var(--text-soft); text-decoration: none; }
footer.site a:hover { color: var(--accent); }
footer.site .spacer { margin-left: auto; }

@media (max-width: 30rem) { footer.site .spacer { margin-left: 0; } }

/* --- print (a reviewer saving the policy as PDF) --------------------- */

@media print {
  header.site, footer.site, .toc, .hero, .tiles { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body, main, main.doc { max-width: none; padding: 0; background-image: none; }
  .card, .note, .table-wrap { border: 1px solid #bbb; background: #fff; }
  h2 { break-after: avoid; }
  table, .card, .note { break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}