/* arcane-ascension.com — the Gilded look (release 1.3.0).
 *
 * Shared by every page on the site. Mirrors the app's Gilded materials
 * (docs/harness/plans/2026-09-29-ui-craft-redesign-plan.md §4.6): dark lacquer
 * plates in thin gold frames with hex-notched corners, the emblem's three-hex
 * triad in each ornate corner, Cinzel in a gold ramp, enamel only as accent.
 *
 * Ownability rule: every ornament here is one of the game's own marks — a hex,
 * the emblem's triad, the board honeycomb. No stock scrollwork.
 *
 * Colours are lib/ui/design_tokens.dart, copied by name. Change them there
 * first. Ornament is CSS and inline/data-URI SVG only, so nothing here needs a
 * new CSP origin (img-src already allows data:, font-src 'self' covers the
 * self-hosted Cinzel).
 */

/* Cinzel, subset to Latin + typographic punctuation from assets/fonts/Cinzel.ttf
   (variable, wght 400–900, SIL OFL). `swap` plus a metric-matched fallback so
   the headings do not jump when it arrives. */
@font-face {
  font-family: "Cinzel";
  src: url("/assets/fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 113%;
  ascent-override: 90%;
  descent-override: 32%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* DesignTokens: core */
  --bg: #15131F;
  --primary: #7B5CFF;
  --primary-dark: #4A33B0;
  --accent: #F2C14E;
  --ink: #120F1C;
  --text: #ECE8FF;

  /* Gold ramp, darkest to lightest */
  --gold-shadow: #5C3F12;
  --gold-bronze: #9A6E24;
  --gold-deep: #C08F32;
  --gold: #D4A23C;
  --gold-leaf: #F2C14E;
  --gold-pale: #FFF0C4;
  --gold-text: #E9C66E;

  /* Lacquer ramp, lightest to darkest */
  --lacquer-hi: #282040;
  --lacquer-raised: #2A2140;
  --lacquer-nameplate: #30264A;
  --lacquer: #1A1428;
  --lacquer-lo: #0F0B18;
  --lacquer-well: #0C0913;

  /* Enamels */
  --amethyst-hi: #8468F4;
  --amethyst: #7456EE;
  --amethyst-mid: #5B3CD6;
  --amethyst-deep: #3A2494;
  --ruby-hi: #CF3552;
  --ruby: #B8233F;
  --ruby-deep: #5E0E20;
  --sapphire: #4A95F0;
  --sapphire-deep: #1C4A8A;
  --emerald: #33B67E;
  --emerald-deep: #145A3C;
  --frost: #7FD4FF;
  --frost-deep: #2A6A8C;

  /* Ink on lacquer */
  --ink-on-enamel: #FFF7E2;
  --ink-soft: #D2CBE8;
  --ink-muted: #BDB5D8;
  --ink-faint: #8E86AA;

  /* Metal: never one flat colour. */
  --metal: linear-gradient(160deg, var(--gold-pale) 0%, var(--gold-leaf) 22%,
      var(--gold-deep) 48%, var(--gold-bronze) 66%, var(--gold-text) 86%, var(--gold-bronze) 100%);
  --metal-text: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-leaf) 42%,
      var(--gold-deep) 72%, var(--gold-bronze) 100%);
  --lacquer-fill: linear-gradient(180deg, var(--lacquer-hi) 0%, var(--lacquer) 40%, var(--lacquer-lo) 100%);
  --sheen: linear-gradient(135deg, transparent 15%, rgba(255, 255, 255, .045) 30%, transparent 50%);

  --display: "Cinzel", "Cinzel Fallback", Georgia, serif;
  --body: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --gutter: 16px;
  --max: 1180px;

  /* The emblem's province triad, one per corner (gilded_kit.dart
     `_paintCornerKnot`): one gilt hex, two in outline, and a spur running
     out to the corner socket. */
  --triad-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF0C4'/%3E%3Cstop offset='.45' stop-color='%23F2C14E'/%3E%3Cstop offset='1' stop-color='%239A6E24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='1.05' stroke-linejoin='round'%3E%3Cpolygon points='18.27,7.10 21.65,9.05 21.65,12.95 18.27,14.90 14.90,12.95 14.90,9.05'/%3E%3Cpolygon points='14.64,13.40 18.01,15.35 18.01,19.25 14.64,21.20 11.26,19.25 11.26,15.35'/%3E%3Cpath d='M7.6 7.6L2 2'/%3E%3C/g%3E%3Cpolygon points='11.00,7.10 14.38,9.05 14.38,12.95 11.00,14.90 7.62,12.95 7.62,9.05' fill='url(%23g)' stroke='%235C3F12' stroke-width='.6'/%3E%3C/svg%3E");
  --triad-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF0C4'/%3E%3Cstop offset='.45' stop-color='%23F2C14E'/%3E%3Cstop offset='1' stop-color='%239A6E24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(26 0) scale(-1 1)'%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='1.05' stroke-linejoin='round'%3E%3Cpolygon points='18.27,7.10 21.65,9.05 21.65,12.95 18.27,14.90 14.90,12.95 14.90,9.05'/%3E%3Cpolygon points='14.64,13.40 18.01,15.35 18.01,19.25 14.64,21.20 11.26,19.25 11.26,15.35'/%3E%3Cpath d='M7.6 7.6L2 2'/%3E%3C/g%3E%3Cpolygon points='11.00,7.10 14.38,9.05 14.38,12.95 11.00,14.90 7.62,12.95 7.62,9.05' fill='url(%23g)' stroke='%235C3F12' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E");
  --triad-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23C08F32'/%3E%3Cstop offset='.5' stop-color='%23F2C14E'/%3E%3Cstop offset='1' stop-color='%239A6E24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(0 26) scale(1 -1)'%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='1.05' stroke-linejoin='round'%3E%3Cpolygon points='18.27,7.10 21.65,9.05 21.65,12.95 18.27,14.90 14.90,12.95 14.90,9.05'/%3E%3Cpolygon points='14.64,13.40 18.01,15.35 18.01,19.25 14.64,21.20 11.26,19.25 11.26,15.35'/%3E%3Cpath d='M7.6 7.6L2 2'/%3E%3C/g%3E%3Cpolygon points='11.00,7.10 14.38,9.05 14.38,12.95 11.00,14.90 7.62,12.95 7.62,9.05' fill='url(%23g)' stroke='%235C3F12' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E");
  --triad-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23C08F32'/%3E%3Cstop offset='.5' stop-color='%23F2C14E'/%3E%3Cstop offset='1' stop-color='%239A6E24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(26 26) scale(-1 -1)'%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='1.05' stroke-linejoin='round'%3E%3Cpolygon points='18.27,7.10 21.65,9.05 21.65,12.95 18.27,14.90 14.90,12.95 14.90,9.05'/%3E%3Cpolygon points='14.64,13.40 18.01,15.35 18.01,19.25 14.64,21.20 11.26,19.25 11.26,15.35'/%3E%3Cpath d='M7.6 7.6L2 2'/%3E%3C/g%3E%3Cpolygon points='11.00,7.10 14.38,9.05 14.38,12.95 11.00,14.90 7.62,12.95 7.62,9.05' fill='url(%23g)' stroke='%235C3F12' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E");

  /* Line, hex bead, line: the section rule. */
  --bead-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23D4A23C' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23E9C66E'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23D4A23C' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23E9C66E'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF0C4'/%3E%3Cstop offset='.5' stop-color='%23F2C14E'/%3E%3Cstop offset='1' stop-color='%239A6E24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='6.5' width='104' height='1' fill='url(%23l)'/%3E%3Crect x='136' y='6.5' width='104' height='1' fill='url(%23r)'/%3E%3Cpolygon points='106,7 109,5.3 109,8.7' fill='%23E9C66E'/%3E%3Cpolygon points='134,7 131,5.3 131,8.7' fill='%23E9C66E'/%3E%3Cpolygon points='120,1 125.2,4 125.2,10 120,13 114.8,10 114.8,4' fill='url(%23b)' stroke='%235C3F12' stroke-width='.6'/%3E%3Cpolygon points='120,5 121.7,6 121.7,8 120,9 118.3,8 118.3,6' fill='%235C3F12' fill-opacity='.55'/%3E%3C/svg%3E");
  /* Half a rule, pointing right, for flanking a line of text. */
  --bead-flank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 10'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23D4A23C' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23E9C66E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='4.5' width='44' height='1' fill='url(%23l)'/%3E%3Cpolygon points='50,1.5 53.5,3.25 53.5,6.75 50,8.5 46.5,6.75 46.5,3.25' fill='%23F2C14E' stroke='%235C3F12' stroke-width='.5'/%3E%3C/svg%3E");

  /* The board, faint: the page's ground. Pointy-top, r = 28. */
  --honeycomb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.497' height='84' viewBox='0 0 48.497 84'%3E%3Cpath d='M24.25 0V14M24.25 14L48.5 28V56L24.25 70L0 56V28ZM24.25 70V84' fill='none' stroke='%237B5CFF' stroke-opacity='.11' stroke-width='1'/%3E%3C/svg%3E");
  /* The board engraved into lacquer (hero plates only): a dark groove with a
     gold catch-light on its lower lip. r = 22. */
  --engraved: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38.105' height='66' viewBox='0 0 38.105 66'%3E%3Cg fill='none'%3E%3Cpath d='M19.05 0V11M19.05 11L38.11 22V44L19.05 55L0 44V22ZM19.05 55V66' stroke='%23000' stroke-opacity='.75' stroke-width='1.8'/%3E%3Cpath d='M19.05 1V12M19.05 12L38.11 23V45L19.05 56L0 45V23ZM19.05 56V67' stroke='%23D4A23C' stroke-opacity='.42' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 720px) {
  :root {
    --gutter: 28px;
  }
}

@media (min-width: 1100px) {
  :root {
    --gutter: 40px;
  }
}

/* --- Ground --------------------------------------------------------------- */

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(123, 92, 255, .26), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 108%, rgba(123, 92, 255, .12), transparent 70%),
    var(--bg);
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}

/* The honeycomb, strongest under the hero and fading down the page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--honeycomb) 50% 0 / 48.497px 84px;
  -webkit-mask-image: radial-gradient(ellipse 110% 85% at 50% 0%, #000 0%, rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, .15) 100%);
  mask-image: radial-gradient(ellipse 110% 85% at 50% 0%, #000 0%, rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, .15) 100%);
}

/* Drifting stars, as on the menu. One composited layer, moved by transform. */
body::after {
  content: "";
  position: fixed;
  inset: -80px;
  z-index: -1;
  pointer-events: none;
  opacity: .7;
  background:
    radial-gradient(1.3px 1.3px at 30px 40px, #fff 60%, transparent 100%) 0 0 / 290px 270px,
    radial-gradient(1px 1px at 180px 150px, #E9E2FF 60%, transparent 100%) 0 0 / 290px 270px,
    radial-gradient(1.6px 1.6px at 90px 300px, #FFF0C4 55%, transparent 100%) 0 0 / 430px 390px,
    radial-gradient(1px 1px at 320px 60px, #fff 60%, transparent 100%) 0 0 / 430px 390px,
    radial-gradient(1.2px 1.2px at 400px 420px, #D9CFFF 60%, transparent 100%) 0 0 / 640px 560px;
  animation: drift 140s linear infinite alternate;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-60px, -80px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }

  html {
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
}

a {
  color: var(--gold-text);
  text-decoration-color: rgba(233, 198, 110, .45);
  text-underline-offset: .18em;
  transition: color .15s, text-decoration-color .15s;
}

a:hover {
  color: var(--gold-pale);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--gold-leaf);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--amethyst-mid);
  color: var(--ink-on-enamel);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: .5rem 1rem;
  background: var(--lacquer-nameplate);
  color: var(--gold-text);
  border: 1px solid var(--gold);
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- Type ----------------------------------------------------------------- */

h1,
h2,
h3,
.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .03em;
  margin: 0;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Cinzel in the gold ramp over an engraved shadow. */
.gilt {
  background: var(--metal-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55));
}

.silver {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1ECFF 50%, #C9BEEF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55));
}

/* A heading over a line–bead–line rule. */
.ruled {
  text-align: center;
}

.ruled::after {
  content: "";
  display: block;
  width: min(240px, 70%);
  aspect-ratio: 240 / 14;
  margin: .7rem auto 0;
  background: var(--bead-rule) center / contain no-repeat;
}

/* Small caps between two bead flanks: the menu's tagline. */
.flanked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.flanked::before,
.flanked::after {
  content: "";
  flex: 0 0 auto;
  width: 56px;
  height: 10px;
  background: var(--bead-flank) center / contain no-repeat;
}

.flanked::after {
  transform: scaleX(-1);
}

.muted {
  color: var(--ink-muted);
}

/* --- Plates --------------------------------------------------------------- */
/* A lacquer plate in a thin gold frame with a hex bitten out of each corner —
   the socket a board tile would sit in (gilded_kit.dart `notchedRect`). The
   frame is ::before (metal), the lacquer is ::after inset by the frame width.
   --n is the notch: the radius of the bitten hex. */

.plate {
  --n: 8px;
  --fw: 1.5px;
  position: relative;
  isolation: isolate;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}

.plate::before,
.plate::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  --k: var(--n);
  clip-path: polygon(calc(var(--k) * .866) 0, calc(100% - var(--k) * .866) 0,
      calc(100% - var(--k) * .866) calc(var(--k) * .5), 100% var(--k),
      100% calc(100% - var(--k)), calc(100% - var(--k) * .866) calc(100% - var(--k) * .5),
      calc(100% - var(--k) * .866) 100%, calc(var(--k) * .866) 100%,
      calc(var(--k) * .866) calc(100% - var(--k) * .5), 0 calc(100% - var(--k)),
      0 var(--k), calc(var(--k) * .866) calc(var(--k) * .5));
}

.plate::before {
  z-index: -3;
  inset: 0;
  background: var(--metal);
}

.plate::after {
  z-index: -2;
  inset: var(--fw);
  --k: calc(var(--n) - var(--fw) * .6);
  background: var(--sheen), var(--lacquer-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(0, 0, 0, .35);
}

/* Section plates: the double frame broken at each corner by the triad. */
.plate--ornate {
  --n: 11px;
  --fw: 1.6px;
  --t: 32px;
  --hair: rgba(242, 193, 78, .5);
}

.plate--ornate::after {
  background:
    var(--triad-tl) 0 0 / var(--t) var(--t) no-repeat,
    var(--triad-tr) 100% 0 / var(--t) var(--t) no-repeat,
    var(--triad-bl) 0 100% / var(--t) var(--t) no-repeat,
    var(--triad-br) 100% 100% / var(--t) var(--t) no-repeat,
    linear-gradient(var(--hair), var(--hair)) 50% 5px / calc(100% - 2 * var(--t) - 4px) 1px no-repeat,
    linear-gradient(var(--hair), var(--hair)) 50% calc(100% - 5px) / calc(100% - 2 * var(--t) - 4px) 1px no-repeat,
    linear-gradient(var(--hair), var(--hair)) 5px 50% / 1px calc(100% - 2 * var(--t) - 4px) no-repeat,
    linear-gradient(var(--hair), var(--hair)) calc(100% - 5px) 50% / 1px calc(100% - 2 * var(--t) - 4px) no-repeat,
    var(--sheen),
    var(--lacquer-fill);
}

/* Hero plates carry the engraved honeycomb, fading out from a focus. */
.engrave {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--engraved) 0 0 / 38.105px 66px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at var(--focus, 50% 40%), #000 0%, rgba(0, 0, 0, .5) 45%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 75% at var(--focus, 50% 40%), #000 0%, rgba(0, 0, 0, .5) 45%, transparent 80%);
  clip-path: inset(6px);
}

.glow-amethyst::after {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(0, 0, 0, .35),
    inset 0 60px 90px -40px rgba(123, 92, 255, .30);
}

/* A sunken lacquer field with a single gold hairline. Square: carved into
   the plate, never chamfered. */
.well {
  background: var(--lacquer-well);
  border: 1px solid rgba(154, 110, 36, .6);
  box-shadow: inset 0 8px 12px -6px rgba(0, 0, 0, .85);
}

/* --- Controls ------------------------------------------------------------- */

/* Secondary plaque: gold outline on raised lacquer, Cinzel caps. Same
   notched frame as a plate, smaller cut. */
.plaque {
  --n: 7px;
  --fw: 1.4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0 1.25rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-text);
  text-decoration: none;
  white-space: nowrap;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
  transition: color .15s;
}

.plaque::after {
  background: linear-gradient(180deg, var(--lacquer-nameplate), var(--lacquer) 55%, var(--lacquer-lo));
  transition: filter .15s;
}

.plaque:hover {
  color: var(--gold-pale);
}

.plaque:hover::after {
  filter: brightness(1.35);
}

.plaque:active::after {
  background: linear-gradient(0deg, var(--lacquer-nameplate), var(--lacquer) 55%, var(--lacquer-lo));
}

/* --- Top bar and footer --------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 1rem;
  color: var(--text);
}

.brand svg {
  width: 30px;
  height: 30px;
  flex: none;
}

.brand:hover {
  color: var(--gold-pale);
}

.topnav {
  display: none;
  gap: 1.75rem;
  align-items: center;
}

.topnav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}

.topnav a:hover {
  color: var(--gold-pale);
}

@media (min-width: 720px) {
  .topnav {
    display: flex;
  }
}

.site-footer {
  text-align: center;
  color: var(--ink-muted);
  font-size: .9rem;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

.site-footer::before {
  content: "";
  display: block;
  width: min(320px, 80%);
  aspect-ratio: 240 / 14;
  margin: 0 auto 1.25rem;
  background: var(--bead-rule) center / contain no-repeat;
}

.site-footer p {
  margin: .3rem 0;
}

/* --- Document pages (privacy, delete account) ----------------------------- */

.doc {
  max-width: 800px;
  margin: 1rem auto 0;
  padding: 2.5rem clamp(1.25rem, 5vw, 3.25rem) 2.75rem;
}

.doc h1 {
  font-size: clamp(1.6rem, 4.6vw, 2.3rem);
  text-align: center;
}

.doc .meta {
  text-align: center;
  color: var(--ink-muted);
  font-size: .95rem;
  margin: .5rem 0 2rem;
}

.doc h2 {
  font-size: 1.2rem;
  color: var(--gold-text);
  margin: 2.4rem 0 .6rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(154, 110, 36, .45);
}

.doc p,
.doc li {
  color: var(--ink-soft);
}

.doc strong {
  color: var(--text);
}

.doc ul,
.doc ol {
  padding-left: 1.4rem;
}

.doc li {
  margin: .35rem 0;
}

.doc li::marker {
  color: var(--gold);
}

.doc .tldr {
  padding: 1rem 1.2rem;
  color: var(--text);
}

@media print {

  body::before,
  body::after {
    display: none;
  }

  .plate {
    filter: none;
  }
}