/* Legends of Satera. Dark parchment: an old atlas read by candlelight.
   A warm ink-black ground with paper grain and a vignette, parchment text,
   gold-leaf rules and ornaments, one oxblood wax seal, and a single light
   piece (Stump's torn note). Cinzel for display, EB Garamond for reading,
   IM Fell English italic for the pitch and the quote. The @font-face rules
   are in base.html so the font URLs carry ?v=. Every texture and ornament is
   an SVG data: URI (CSP img-src data:). Contrast ratios are against --bg. */

:root {
  --bg: #0e0b07;
  --bg-2: #16110b;
  --field: #0a0805;
  --sea: #0a1315;
  --text: #e6d7b3;            /* parchment, 13.8:1 */
  --muted: #b3a283;           /* 7.9:1 */
  --gold: #c9a14a;            /* gold leaf, 8.1:1 */
  --gold-bright: #e2c27a;
  --gold-rule: rgba(201, 161, 74, 0.5);
  --gold-faint: rgba(201, 161, 74, 0.2);
  --oxblood: #7a2a1f;
  --wax: #b5473a;
  --field-border: #86724a;    /* 4:1 on --bg-2, the non-text minimum is 3:1 */
  --on-gold: #1a1208;         /* 6.2:1 on the darkest stop of the button */
  --error: #e9a08a;
  --paper: #e4d0a1;
  --ink: #2a1c0d;             /* 12:1 on --paper */
  --ink-soft: #4a3519;        /* 7.6:1 on --paper */

  --display: "Cinzel", "Trajan Pro", "Cormorant SC", Georgia, serif;
  --body: "EB Garamond", Garamond, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --fell: "IM Fell English", "EB Garamond", Garamond, Georgia, serif;

  --wrap: 72rem;
  --measure: 38rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* Fine light grain over the ground. */
  --grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9 0 0 0 0 .82 0 0 0 0 .64 0 0 0 .5 -.23'/></filter><rect width='256' height='256' filter='url(%23g)'/></svg>");
  /* Parchment fibres and stains for the light note. */
  --paper-grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32 0 0 0 0 .21 0 0 0 0 .08 0 0 0 .8 -.3'/></filter><rect width='220' height='220' filter='url(%23p)'/></svg>");
  --paper-stain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='4' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 1.3 -.6'/></filter><rect width='480' height='480' filter='url(%23s)'/></svg>");
  /* The note's torn, deckled outline: a rectangle pushed about by noise. */
  --torn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300' preserveAspectRatio='none'><filter id='t' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.045 .06' numOctaves='4' seed='7'/><feDisplacementMap in='SourceGraphic' scale='13' xChannelSelector='R' yChannelSelector='G'/></filter><rect x='9' y='9' width='382' height='282' filter='url(%23t)'/></svg>");
  /* A portolan compass rose with its sixteen rhumb lines. */
  --rose: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000' viewBox='-1000 -1000 2000 2000'><g fill='none' stroke='%23c9a14a'><path stroke-width='1.6' d='M-1000 0H1000M-924-383L924 383M-707-707L707 707M-383-924L383 924M0-1000V1000M383-924L-383 924M707-707L-707 707M924-383L-924 383'/><circle r='300' stroke-width='3'/><circle r='284' stroke-width='1.5'/><circle r='120' stroke-width='1.5'/></g><g fill='%23c9a14a'><path fill-opacity='.35' d='M156-156L0-32 0 0ZM156 156L32 0 0 0ZM-156 156L0 32 0 0ZM-156-156L-32 0 0 0Z'/><path d='M156-156L32 0 0 0ZM156 156L0 32 0 0ZM-156 156L-32 0 0 0ZM-156-156L0-32 0 0Z'/><path fill-opacity='.35' d='M0-330L-45-45 0 0ZM330 0L45-45 0 0ZM0 330L45 45 0 0ZM-330 0L-45 45 0 0Z'/><path d='M0-330L45-45 0 0ZM330 0L45 45 0 0ZM0 330L-45 45 0 0ZM-330 0L-45-45 0 0ZM0-395L18-360 0-325-18-360Z'/></g><circle r='14' fill='%230e0b07' stroke='%23c9a14a' stroke-width='3'/></svg>");
  /* The same rose cropped close, so a large rose needs no huge raster. */
  --rose-near: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000' viewBox='-500 -500 1000 1000'><g fill='none' stroke='%23c9a14a'><path stroke-width='1.6' d='M-1000 0H1000M-924-383L924 383M-707-707L707 707M-383-924L383 924M0-1000V1000M383-924L-383 924M707-707L-707 707M924-383L-924 383'/><circle r='300' stroke-width='3'/><circle r='284' stroke-width='1.5'/><circle r='120' stroke-width='1.5'/></g><g fill='%23c9a14a'><path fill-opacity='.35' d='M156-156L0-32 0 0ZM156 156L32 0 0 0ZM-156 156L0 32 0 0ZM-156-156L-32 0 0 0Z'/><path d='M156-156L32 0 0 0ZM156 156L0 32 0 0ZM-156 156L-32 0 0 0ZM-156-156L0-32 0 0Z'/><path fill-opacity='.35' d='M0-330L-45-45 0 0ZM330 0L45-45 0 0ZM0 330L45 45 0 0ZM-330 0L-45 45 0 0Z'/><path d='M0-330L45-45 0 0ZM330 0L45 45 0 0ZM0 330L-45 45 0 0ZM-330 0L-45-45 0 0ZM0-395L18-360 0-325-18-360Z'/></g><circle r='14' fill='%230e0b07' stroke='%23c9a14a' stroke-width='3'/></svg>");
  /* Double gold rule with notched corners and a diamond in each. */
  --frame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='none' stroke='%23c9a14a'><rect x='1.5' y='1.5' width='57' height='57' stroke-opacity='.85'/><path stroke-opacity='.6' stroke-width='.8' d='M14 6H46A8 8 0 0 0 54 14V46A8 8 0 0 0 46 54H14A8 8 0 0 0 6 46V14A8 8 0 0 0 14 6Z'/></g><path fill='%23c9a14a' d='M6 3.5 8.5 6 6 8.5 3.5 6ZM54 3.5 56.5 6 54 8.5 51.5 6ZM54 51.5 56.5 54 54 56.5 51.5 54ZM6 51.5 8.5 54 6 56.5 3.5 54Z'/></svg>");
  /* Section divider centrepiece. */
  --ornament: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='16' viewBox='0 0 64 16'><path fill='none' stroke='%23c9a14a' d='M32 1.5 39 8 32 14.5 25 8Z'/><path fill='%23c9a14a' d='M32 5 35 8 32 11 29 8Z'/><circle cx='12' cy='8' r='1.8' fill='%23c9a14a'/><circle cx='52' cy='8' r='1.8' fill='%23c9a14a'/></svg>");
  --diamond: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23c9a14a' d='M6 1 11 6 6 11 1 6Z'/></svg>");
  --star: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='-8 -8 16 16'><path fill='%23c9a14a' fill-opacity='.55' d='M4.6-4.6 1.3 0 4.6 4.6 0 1.3-4.6 4.6-1.3 0-4.6-4.6 0-1.3Z'/><path fill='%23c9a14a' d='M0-8 1.6-1.6 8 0 1.6 1.6 0 8-1.6 1.6-8 0-1.6-1.6Z'/></svg>");
  /* Oxblood wax seal with an embossed star. */
  --seal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><defs><radialGradient id='w' gradientUnits='userSpaceOnUse' cx='18' cy='15' r='34'><stop offset='0' stop-color='%23a54434'/><stop offset='.55' stop-color='%237a2a1f'/><stop offset='1' stop-color='%234a150e'/></radialGradient></defs><g fill='url(%23w)'><circle cx='24' cy='24' r='19'/><circle cx='24' cy='6' r='4.5'/><circle cx='39.5' cy='12' r='4'/><circle cx='42.5' cy='28' r='4.5'/><circle cx='33' cy='41.5' r='4'/><circle cx='16' cy='42' r='4.5'/><circle cx='6' cy='31' r='4'/><circle cx='7' cy='14.5' r='4.5'/></g><circle cx='24' cy='24' r='12.5' fill='none' stroke='%23501810' stroke-width='2'/><circle cx='23.4' cy='23.4' r='12.5' fill='none' stroke='%23b4574a' stroke-opacity='.5' stroke-width='.8'/><path fill='%23501810' d='M24 15 26.2 21.8 33 24 26.2 26.2 24 33 21.8 26.2 15 24 21.8 21.8Z'/></svg>");

  color-scheme: dark;
}

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

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

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font: 400 clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem)/1.6 var(--body);
  font-variant-numeric: oldstyle-nums;
}

/* Candlelight: a warm glow from above, the edges falling into dark, and a
   few broad brown stains like charred vellum. The stains are gradients, not
   noise: an feTurbulence image stretched over the viewport is re-rasterised
   at full display size, which is slow on large and high-DPI screens. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(214, 150, 70, 0.07), rgba(214, 150, 70, 0) 70%),
    radial-gradient(ellipse 115% 95% at 50% 42%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%),
    radial-gradient(ellipse 42% 32% at 16% 30%, rgba(96, 64, 30, 0.16), rgba(96, 64, 30, 0) 70%),
    radial-gradient(ellipse 36% 30% at 84% 62%, rgba(96, 64, 30, 0.14), rgba(96, 64, 30, 0) 70%),
    radial-gradient(ellipse 28% 20% at 62% 14%, rgba(110, 76, 38, 0.1), rgba(110, 76, 38, 0) 70%),
    radial-gradient(ellipse 34% 26% at 34% 86%, rgba(96, 64, 30, 0.12), rgba(96, 64, 30, 0) 70%);
}

main { flex: 1; }

::selection { background: rgba(201, 161, 74, 0.35); color: #fff6e0; }

a {
  color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--gold-bright); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--gold);
  color: var(--on-gold);
}

/* Header and footer: each edged with an atlas neatline, a rule over a
   graduated scale bar. */

.site-header {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--gold-rule);
  background: linear-gradient(180deg, rgba(8, 6, 4, 0.7), rgba(8, 6, 4, 0.2));
}
.site-header::after,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--gold-faint) 0 3rem, transparent 3rem 6rem);
}
.site-header::after { bottom: -7px; border-bottom: 1px solid var(--gold-rule); }

.header-row,
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.12em;
  color: var(--text);
  text-decoration: none;
}
.brand::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--star) center / contain no-repeat;
}
.brand:hover { color: var(--gold-bright); }

.site-nav,
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }

.site-nav a,
.site-footer a {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.site-nav a:hover,
.site-footer a:hover,
.site-nav a[aria-current="page"],
.site-footer a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"],
.site-footer a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.35em;
}

.site-footer {
  position: relative;
  margin-top: 7px;
  border-top: 1px solid var(--gold-rule);
  background: linear-gradient(180deg, rgba(8, 6, 4, 0.2), rgba(8, 6, 4, 0.7));
  color: var(--muted);
}
.site-footer::before { top: -8px; border-top: 1px solid var(--gold-rule); }
.footer-row { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.footer-row p {
  margin: 0;
  font-family: var(--display);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
}

/* Studio credit: quieter than the row above it — body type, smaller, dimmer,
   and forced onto its own centered line (flex-basis: 100%, so it wraps under
   the brand and Privacy link in the same flex row) so it signs the page
   without competing with either. */
.footer-row .footer-credit {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-family: var(--body);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.75;
}
.footer-row .footer-credit a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--gold-rule);
  text-underline-offset: 0.2em;
}
.footer-row .footer-credit a:hover {
  color: var(--text);
  text-decoration-color: var(--gold);
}

/* Hero: a chart. Faint rhumb lines from a compass rose, and sea hatching
   drawn in along the bottom edge as on an old map's coastline. */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3.5rem, 8vw, 6.25rem);
  background:
    radial-gradient(ellipse 70% 60% at 25% 0%, rgba(201, 161, 74, 0.06), rgba(201, 161, 74, 0) 70%),
    linear-gradient(180deg, rgba(22, 17, 11, 0.75), rgba(14, 11, 7, 0) 75%);
  border-bottom: 3px double var(--gold-rule);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.hero::before {
  inset: 0;
  /* On the home page the rose sits under Stump's note, as if the note were
     lying on the chart. */
  background: var(--rose) no-repeat calc(50% + 22rem) -9rem / 72rem 72rem;
  opacity: 0.1;
}
.hero::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: repeating-linear-gradient(180deg, transparent 0 11px, rgba(201, 161, 74, 0.07) 11px 12px);
  -webkit-mask-image: linear-gradient(transparent, #000);
  mask-image: linear-gradient(transparent, #000);
}

.hero-grid,
.hero-single { position: relative; z-index: 1; }

/* Home hero: the title spans the width, then the pitch and form sit on the
   left with the in-world passage beside them. One column on phones, in
   source order: title, pitch, form, passage. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}
.hero-grid > .hero-text > .pitch { margin-top: 0; }
.hero-grid > .notify { margin-top: 1.25rem; }
.hero-grid > .passage { margin-top: 1rem; }

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: 5rem;
    row-gap: 2rem;
  }
  .hero-grid > .hero-head { grid-column: 1 / -1; grid-row: 1; }
  .hero-grid > .hero-text { grid-column: 1; grid-row: 2; }
  .hero-grid > .notify { grid-column: 1; grid-row: 3; }
  .hero-grid > .passage { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: 0.75rem; }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.25rem;
  color: var(--gold);
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--diamond) center / contain no-repeat;
}

.hero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 8.2vw, 5.75rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
  color: var(--text);
}
/* Gilded where the browser can clip a gradient to the glyphs. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title {
    background: linear-gradient(180deg, #f4e8c8 0%, #e6cf97 50%, #bf9747 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero-kicker {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--muted);
  font-size: clamp(0.875rem, 2.1vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.28em;
}

.pitch {
  max-width: 26ch;
  margin: 1.75rem 0 1.25rem;
  font-family: var(--fell);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.3vw, 2.125rem);
  line-height: 1.28;
  color: var(--text);
}

.lede {
  max-width: var(--measure);
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 1.1em;
}

.more { margin: 1.5rem 0 0; }

.text-link { font-weight: 600; }
.text-link::after { content: " \2192"; }

/* The game hero is a title page: centred, over a cold black-sea tint. */
.hero-game {
  text-align: center;
  background:
    radial-gradient(ellipse 90% 80% at 50% 115%, rgba(10, 19, 21, 0.95), rgba(10, 19, 21, 0) 75%),
    linear-gradient(180deg, rgba(22, 17, 11, 0.7) 0%, rgba(10, 19, 21, 0.7) 100%);
}
.hero-game::before { background-position: 50% 42%; opacity: 0.08; }
.hero-game::after { height: 46%; }
.hero-game .eyebrow { justify-content: center; }
.hero-game .eyebrow::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--diamond) center / contain no-repeat;
}
.hero-game .hero-title::after {
  content: "";
  display: block;
  width: min(22rem, 70%);
  height: 16px;
  margin: 1.4rem auto 0;
  background:
    var(--ornament) center / 64px 16px no-repeat,
    linear-gradient(90deg, rgba(201, 161, 74, 0), var(--gold-rule)) left center / calc(50% - 38px) 1px no-repeat,
    linear-gradient(90deg, var(--gold-rule), rgba(201, 161, 74, 0)) right center / calc(50% - 38px) 1px no-repeat;
}
.hero-game .pitch { max-width: 30ch; margin: 1.6rem auto 1.1rem; }
.hero-game .lede { margin-left: auto; margin-right: auto; max-width: 36rem; }
.hero-game .more { margin-top: 2rem; }

/* The in-world passage: the one light thing on the site, a torn scrap of
   parchment in dark ink. The paper and its ragged edge are a pseudo-element
   so the drop shadow on the figure follows the tear. */

.passage {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 2.1rem 2.2rem 1.8rem;
  color: var(--ink);
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.6));
  transform: rotate(-1.2deg);
}
.passage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--paper);
  background-image:
    var(--paper-grain),
    var(--paper-stain),
    radial-gradient(ellipse 80% 70% at 38% 32%, rgba(255, 248, 226, 0.5), rgba(255, 248, 226, 0) 65%),
    radial-gradient(ellipse 125% 115% at 50% 50%, rgba(110, 72, 28, 0) 55%, rgba(110, 72, 28, 0.5) 100%);
  -webkit-mask: var(--torn) 0 0 / 100% 100% no-repeat;
  mask: var(--torn) 0 0 / 100% 100% no-repeat;
}
.passage blockquote {
  margin: 0;
  font-family: var(--fell);
  font-style: italic;
  font-size: clamp(1.3rem, 2.3vw, 1.55rem);
  line-height: 1.38;
}
.passage blockquote p { margin: 0; }
.passage blockquote p::before { content: "\201C"; }
.passage blockquote p::after { content: "\201D"; }
.passage figcaption {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.passage figcaption::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: var(--oxblood);
}

/* Sections, parted by a gold rule with a centred ornament. */

.section {
  position: relative;
  padding: clamp(3rem, 7vw, 5.25rem) 0;
}
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(var(--wrap) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  height: 16px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    var(--ornament) center / 64px 16px no-repeat,
    linear-gradient(90deg, rgba(201, 161, 74, 0), var(--gold-rule) 55%) left center / calc(50% - 38px) 1px no-repeat,
    linear-gradient(90deg, var(--gold-rule) 45%, rgba(201, 161, 74, 0)) right center / calc(50% - 38px) 1px no-repeat;
}

.section-sea {
  background:
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(160, 190, 190, 0.025) 13px 14px),
    linear-gradient(180deg, rgba(10, 19, 21, 0), rgba(10, 19, 21, 0.92) 22%, rgba(10, 19, 21, 0.92) 78%, rgba(10, 19, 21, 0));
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 3.5rem;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 19rem) minmax(0, var(--measure)); }
}

h2 {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: var(--text);
}
h2::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 10px;
  margin-top: 0.75rem;
  background:
    var(--diamond) left center / 10px 10px no-repeat,
    linear-gradient(90deg, var(--gold-rule), rgba(201, 161, 74, 0)) 16px center / calc(100% - 16px) 1px no-repeat;
}
.split > h2 { margin-top: 0.1rem; }

.prose > * { max-width: var(--measure); }
.prose h1 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
}
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.3rem, 2.6vw, 1.625rem); }
.prose h2:first-child { margin-top: 0; }
.prose p,
.prose ul { margin: 0 0 1rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.25rem; padding-left: 0.25rem; }
.prose li::marker { color: var(--gold); }
.prose .notify { margin-top: 3rem; }

/* Drop caps open each section of the game page. */
/* flow-root keeps a one-line opening paragraph from pushing its drop cap
   into the next paragraph. */
[data-page="black-seas"] .section .prose > p:first-child { display: flow-root; }
[data-page="black-seas"] .section .prose > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.02em 0 0;
  padding: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 3.35em;
  line-height: 0.8;
  color: var(--gold);
}

.updated { color: var(--muted); font-size: 0.95em; }

/* Privacy: the same system, kept quiet. One centred column. */
[data-page="privacy"] .prose {
  max-width: calc(var(--measure) + 2 * var(--gutter));
}
[data-page="privacy"] .prose h1::after {
  content: "";
  display: block;
  width: 7rem;
  height: 12px;
  margin-top: 0.9rem;
  background:
    var(--diamond) left center / 12px 12px no-repeat,
    linear-gradient(90deg, var(--gold-rule), rgba(201, 161, 74, 0)) 18px center / calc(100% - 18px) 1px no-repeat;
}

/* 404: uncharted water. A framed cartouche over a compass rose. */
.section-404 {
  overflow: hidden;
  padding: clamp(3.5rem, 10vw, 7rem) 0;
  text-align: center;
  background: radial-gradient(ellipse 65% 70% at 50% 50%, rgba(10, 19, 21, 0.9), rgba(10, 19, 21, 0) 75%);
}
.section-404::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--rose-near) no-repeat 50% 50% / 72rem 72rem;
  -webkit-mask-image: radial-gradient(circle 36rem at 50% 50%, #000 65%, transparent);
  mask-image: radial-gradient(circle 36rem at 50% 50%, #000 65%, transparent);
  opacity: 0.14;
}
.section-404 .prose {
  position: relative;
  z-index: 1;
  width: calc(100% - 2 * var(--gutter));
  max-width: 38rem;
  padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1rem, 4vw, 2.5rem);
  border: 20px solid transparent;
  border-image: var(--frame) 20 / 20px stretch;
  background: rgba(14, 11, 7, 0.9);
}
.section-404 .prose > * { margin-left: auto; margin-right: auto; }
.section-404 .eyebrow {
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.4rem;
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.1;
}
.section-404 .eyebrow::before,
.section-404 .eyebrow::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--diamond) center / contain no-repeat;
}
.section-404 h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); margin-bottom: 1.25rem; }
.section-404 .prose p:last-child { margin-bottom: 0; }

/* Buttons and the sign-up form */

.button {
  display: inline-block;
  padding: 0.72rem 1.4rem 0.66rem;
  border: 1px solid #e8c983;
  border-radius: 2px;
  background: linear-gradient(180deg, #dbb660 0%, #b98f3c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 205, 0.45),
    inset 0 -2px 0 rgba(70, 45, 10, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.55);
  color: var(--on-gold);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.3);
  cursor: pointer;
}
.button:hover {
  background: linear-gradient(180deg, #e8c677 0%, #c99d48 100%);
  color: var(--on-gold);
}
.button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* The sign-up is a posted notice: a double gold frame, sealed in wax. It
   frames every state of the form, so success and unavailable match. */
.notify {
  position: relative;
  max-width: 34rem;
  padding: 1.9rem clamp(1rem, 3vw, 1.75rem) 1.4rem;
  border: 20px solid transparent;
  border-image: var(--frame) 20 / 20px stretch;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 161, 74, 0.08), rgba(201, 161, 74, 0) 70%),
    rgba(22, 17, 11, 0.94);
  background-origin: border-box;
  background-repeat: no-repeat;
  text-align: left;
}
.notify::before {
  content: "";
  position: absolute;
  top: -42px;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--seal) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

.notify-label {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.notify-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.notify-input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--field-border);
  border-radius: 2px;
  background: var(--field);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  color: var(--text);
  font: inherit;
  line-height: 1.3;
}
.notify-input::placeholder { color: #8f8066; opacity: 1; }
.notify-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }

.consent {
  margin: 0.7rem 0 1rem;
  color: var(--muted);
  font-size: 0.9em;
}

/* Honeypot field: off-canvas, never display:none (some bots skip those). */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cf-turnstile { min-height: 65px; }

.notice p { margin: 0; }
.notice p + p { margin-top: 0.4rem; color: var(--muted); }
.notice:focus-visible { outline-offset: 6px; }

.notice-ok,
.notice[data-notify="unavailable"] { padding: 0.35rem 0 0.15rem; text-align: center; }
.notice-ok strong {
  font-family: var(--display);
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold-bright);
}

.notice-error {
  margin-bottom: 1rem;
  padding: 0.65rem 0.9rem;
  border-left: 3px solid var(--wax);
  background: rgba(122, 42, 31, 0.25);
}
.notice-error p { color: var(--text); }

/* Small screens: ornaments shrink, the note stops leaning. */
@media (max-width: 40rem) {
  .hero::before { background-size: 44rem 44rem; background-position: 70% 8%; opacity: 0.08; }
  .hero-game::before { background-position: 50% 30%; }
  .passage { transform: rotate(-0.6deg); padding: 1.75rem 1.6rem 1.5rem; }
  .notify {
    border-width: 14px;
    border-image-width: 14px;
    padding: 1.6rem 0.9rem 1.1rem;
  }
  .notify::before { top: -32px; width: 36px; height: 36px; }
  .section-404 .prose { border-width: 14px; border-image-width: 14px; }
  .section-404::after {
    background-size: 40rem 40rem;
    -webkit-mask-image: radial-gradient(circle 20rem at 50% 50%, #000 65%, transparent);
    mask-image: radial-gradient(circle 20rem at 50% 50%, #000 65%, transparent);
  }
  .site-header::after,
  .site-footer::before { background-size: 4rem 100%; }
  [data-page="black-seas"] .section .prose > p:first-child::first-letter { font-size: 3.1em; }
}

@media (forced-colors: active) {
  .hero-title { background: none; color: CanvasText; }
  .notify,
  .section-404 .prose { border: 3px double CanvasText; border-image: none; }
}