/*
  The public front. Nothing here is behind a password, because a server nobody
  can read about is a server nobody joins.

  Colour comes from the emblem: a cold night ground, iron, and the one warm
  thing in it. Everything gold is load bearing. If it glows, it is a way in.
*/
:root{
  --night:#0B0E0A;      /* the ground, colder and darker than the app */
  --stone:#14180F;
  --iron:#1D2318;
  --edge:#2B3323;
  --edge2:#3D4733;
  --page:#E4E7DA;       /* not white. nothing here is white */
  --quiet:#96A084;
  --faint:#7A8568;
  --gold:#C9A24B;
  --gold-hot:#E4BE66;
  --ember:#B4512C;
  --serif:Spectral,Georgia,"Times New Roman",serif;
  --carve:Cinzel,Spectral,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--page);
  font:400 17px/1.7 var(--serif);overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* A link is underlined (#2768, Patrick's answer on 22 Oct 2026). Gold on the
   grey of running text is told apart by colour alone, which is not enough for
   somebody who cannot see the difference (WCAG 1.4.1, Lighthouse
   link-in-text-block). The underline is on every link here, so a link written
   into any sentence anywhere on the site has one without anybody remembering
   to add it. Menus and buttons are links that do not sit in a sentence, and
   they opt out in the one list below. */
a{color:var(--gold);text-decoration-line:underline;text-decoration-thickness:1px;
  text-decoration-color:rgba(201,162,75,.45);text-underline-offset:3px}
a:hover{color:var(--gold-hot);text-decoration-color:currentColor}
nav.top a,footer .cols a,.mark,.mobile-cta,.btn,.skip{text-decoration-line:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Skip link: first focusable, off-screen until Tab. Gold on night ground. */
.skip{position:absolute;left:12px;top:12px;z-index:100;padding:10px 14px;
  background:var(--gold);color:var(--night);font:600 14px/1 var(--sans);
  letter-spacing:.04em;
  clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;
  white-space:nowrap}
.skip:focus,.skip:focus-visible{clip:auto;clip-path:none;width:auto;height:auto;overflow:visible;
  outline:2px solid var(--gold-hot);outline-offset:3px}

.wrap{width:min(1480px,100% - 48px);margin-inline:auto}
@media(max-width:560px){ .wrap{width:min(1480px,100% - 32px)} }

/* ------------------------------------------------------------------ nav -- */
header{position:sticky;top:0;z-index:40;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(11,14,10,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--edge)}
header .bar{display:flex;align-items:center;gap:26px;height:64px}
.mark{display:flex;align-items:center;gap:11px;font:600 19px/1 var(--carve);
  letter-spacing:.11em;text-transform:uppercase;color:var(--page);white-space:nowrap;
  flex-shrink:0}
.mark img{width:28px;height:28px;border-radius:6px}
nav.top{display:flex;gap:24px;margin-left:auto;align-items:center}
nav.top a{font:400 14px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--quiet)}
nav.top a:hover{color:var(--page)}
.enter{padding:9px 17px;border:1px solid var(--gold);border-radius:2px;
  color:var(--gold);font:600 13px/1 var(--sans);letter-spacing:.11em;
  text-transform:uppercase}
.enter:hover{background:var(--gold);color:var(--night)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--edge2);
  color:var(--page);width:44px;height:44px;border-radius:2px;font-size:17px;cursor:pointer}
.mobile-cta{display:none}
.hero-motion{margin-top:14px;min-height:44px;background:var(--night);color:var(--gold);
  border:1px solid var(--gold);padding:8px 12px;cursor:pointer;font:13px/1.4 var(--sans)}
.breadcrumbs{padding-top:24px;font:14px/1.6 var(--sans);color:var(--quiet)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.breadcrumbs li+li::before{content:'/';margin-right:12px}
/* The menu folds into the burger at 1080 and under, not 900: the name (210
   wide, never squeezed) and the eight links need about 1050 across, and below
   that the bar shrank the name into RULES and pushed Discord and Download off
   the right edge (#3293). home.js narrow() asks the same width. */
@media(max-width:900px){
  .mark{font-size:15px;letter-spacing:.04em;gap:7px}
}
@media(max-width:1080px){
  header .bar{gap:12px}
  .mobile-cta{display:flex;align-items:center;min-height:44px;margin-left:auto;
    padding:0 10px;border:1px solid var(--gold);font:600 13px/1 var(--sans);color:var(--gold)}
  .burger{margin-left:0;flex-shrink:0}
}
/* Keep anchor destinations visible below the sticky header. */
[id]{scroll-margin-top:100px}
@media(max-width:1080px){
  nav.top{position:fixed;inset:calc(64px + env(safe-area-inset-top,0px)) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--stone);
    border-bottom:1px solid var(--edge);margin:0;padding:6px 0 14px}
  nav.top[hidden]{display:none}
  nav.top a{padding:14px 24px;font-size:15px}
  nav.top .enter{margin:10px 24px 0;text-align:center}
  .burger{display:block}
}

/* --------------------------------------------------------------- notice -- */
/* Above the fold and above the hero, because "you cannot just join" is the
   single most useful thing to know before reading any of the rest. */
.notice{background:linear-gradient(90deg,rgba(180,81,44,.20),rgba(180,81,44,.09));
  border-bottom:1px solid rgba(201,162,75,.30);font:400 14.5px/1.55 var(--sans);
  color:var(--page)}
.notice .wrap{padding:13px 0}
.notice b{color:var(--gold-hot);font-weight:600}
.notice a{margin-left:8px;white-space:nowrap}
@media(max-width:560px){ .notice{font-size:13.5px} }

/* ----------------------------------------------------------------- hero -- */
/*
  The hero is a drawn landscape, not a photograph and not an empty field. Every
  other server puts a screenshot here; we have none worth using yet and a fake
  one would be worse than none.

  It was midpoint-displacement ridgelines, an aurora and a hundred and fifty
  stars, generated once and served as a fifteen kilobyte file. Replaced on 20
  September with the painted banner, asked for by Patrick, because the same
  picture now wants to be on the site, the game's main menu and its loading
  screens, and a generated ridgeline cannot be any of the other two.

  ridge.svg is still in this folder. Putting it back is one line here.

  The loop ships at 1600 by 900, 24 frames a second, 3.1 MB, with its first
  frame beside it as the still under it (banner-*.webp, #3218). Three times the launcher strip it replaced
  and two hundred times the ridgeline, which is the price of the picture
  moving at the size the hero actually is. It is worth not adding a second
  one.
*/
/*
  Tall enough to show the painting, wide or narrow. The height used to be
  capped at 780px with the picture pinned to its bottom edge, which on a
  1920 wide screen showed most of it and on a 3440 wide one scaled the
  painting to 1935 rows and showed the bottom 780: the lake, and none of the
  title or the sky. Patrick's ultrawide, 20 September. Now the hero is as
  tall as the picture's own shape allows (16:9 of the width) up to 84vh, and
  the crop keeps the top, where the title is painted in.

  The painting carries its own title and emblem, so the crest and the big
  Thornswood over it went the same day: two titles on one picture. The
  words sit at the bottom over a dark scrim instead, where they read.

  THE SCRIM RIDES WITH THE WORDS, AND NARROW SCREENS PUT THE WORDS UNDER THE
  PAINTING (#2767). The scrim was the bottom 64% of the hero, so how dark it
  was behind the words depended on how tall the hero was next to them: at
  1366 by 768 the era line sat where it was barely half dark, over the
  sunset, at 1.9:1. It now hangs from the words themselves (.wrap::before),
  clear for the 96 pixels above the era line and dark enough under every
  line of them at any size. On a phone no scrim was enough, because the
  crop put the painted title behind the pitch (1.0:1 at worst), so below
  900 pixels the painting is a band of its own, whole, and the words follow
  it on the page. Patrick's answer on the board, 22 October: below the
  painting, and readable on desktop too. Measured at 412, 768, 1024, 1366,
  1920 and 3440 wide with the words hidden: 4.5:1 or better at the worst
  pixel behind every line.

  THE WORDS ARE UNDER THE PAINTING AT EVERY WIDTH (Patrick, 26 Oct: "the text
  be covering the logo some"). On a wide screen the words still sat over the
  painting's foot, and at 1920 by 950 the era line and the pitch covered the
  bottom of the painted title, its thorns and the purple crest: the words
  are about 430 pixels tall, and no hero height under the 84vh cap left that
  much room below the title once the picture was cropped. So the band below
  900 pixels is the layout everywhere now. The painting is a band of its
  own, the whole picture (16:9 of the width) when that fits, kept to the top
  (the title is in its top 42%), no taller than 52vh so the Download button
  is still on a 1366 by 768 screen, and never under 27vw so the whole title
  fits in it even on an ultrawide and with the slow drift. Measured at 412,
  768, 1024, 1366, 1920, 2560 and 3440 wide: the era line starts under the
  painting every time, and the title's foot is inside it.
*/
.hero{position:relative;padding:0 0 56px;text-align:center;overflow:hidden;isolation:isolate}
.hero > .paint{position:relative;z-index:-2;overflow:hidden;height:min(56.25vw,max(52vh,27vw))}
.hero .art{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 0}
/* the foot of the painting fades into the page the words are on */
.hero > .paint::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;
  background:linear-gradient(180deg,rgba(11,14,10,0),var(--night))}
.hero .wrap{padding-top:22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Grain over the whole thing, because a flat gradient reads as a web page and
   a grained one reads as a place. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.06'/></svg>")}
.hero > *{position:relative;z-index:1}
/* A video ignores prefers-reduced-motion on its own, so it is stopped in
   script below and the still under it is what stays on screen. This only covers the
   slow drift on top of it. */
@media(prefers-reduced-motion:no-preference){
  .hero .art{animation:drift 60s ease-in-out infinite alternate}
  @keyframes drift{ from{transform:scale(1.04) translateY(0)} to{transform:scale(1.09) translateY(-14px)} }
}
h1{font:700 clamp(46px,9vw,92px)/0.97 var(--carve);letter-spacing:.055em;
  text-transform:uppercase;margin:0;text-wrap:balance;
  background:linear-gradient(180deg,#F0E6CE 12%,var(--gold) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Lighter than the page's own faint, and a solid colour: a see-through one
   is only as readable as whatever is behind it (#2767). */
.era{margin:0 auto;font:400 13px/1 var(--sans);letter-spacing:.34em;
  text-transform:uppercase;color:#DCD2B9;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.pitch{max-width:30ch;margin:18px auto 0;font:300 clamp(19px,2.3vw,25px)/1.5 var(--serif);
  color:#F5EEDD;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.pitch em{font-style:italic;color:var(--gold)}
.acts{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.btn{display:inline-block;padding:15px 34px;border-radius:2px;
  font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer}
.btn.first{background:var(--gold);color:#120F07;
  box-shadow:0 14px 36px -14px rgba(201,162,75,.6)}
.btn.first:hover{background:var(--gold-hot);color:#120F07}
.btn.ghost{background:transparent;border-color:var(--edge2);color:var(--page)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.live{margin-top:30px;font:400 13px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(240,230,206,.7);display:flex;gap:9px;
  align-items:center;justify-content:center;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.live a{color:inherit;text-decoration-color:currentColor}
.live a:hover{color:var(--gold)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.dot.on{background:#79B05F;box-shadow:0 0 0 4px rgba(121,176,95,.16)}

/* -------------------------------------------------------------- figures -- */
.figures{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  background:var(--stone)}
.figures .wrap{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.figures .fig{padding:30px 22px;text-align:center;border-left:1px solid var(--edge)}
.figures .fig:first-child{border-left:0}
.figures b{display:block;font:600 27px/1.1 var(--carve);letter-spacing:.04em;color:var(--gold)}
.figures span{display:block;margin-top:7px;font:400 12px/1.4 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
@media(max-width:640px){
  .figures .wrap{grid-template-columns:1fr}
  .figures .fig{border-left:0;border-top:1px solid var(--edge);padding:22px}
  .figures .fig:first-child{border-top:0}
  .figures b{font-size:22px}
}

/* ---------------------------------------------------------------- bands -- */
section{padding:86px 0;border-top:1px solid var(--edge)}
.eyebrow{font:400 12px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px}
h2{font:600 clamp(28px,4.2vw,42px)/1.15 var(--carve);letter-spacing:.035em;
  margin:0 0 18px;text-wrap:balance}
h3{font:600 20px/1.3 var(--carve);letter-spacing:.03em;margin:0 0 9px;color:var(--page)}
.lede{max-width:62ch;color:var(--quiet);font-size:18px}
.lede strong{color:var(--page);font-weight:400}

.three{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:52px}
.three .num{font:400 12px/1 var(--mono);letter-spacing:.2em;color:var(--faint);
  margin-bottom:14px}
.three p{margin:0;color:var(--quiet);font-size:16px}

.split{display:grid;gap:60px;grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:860px){ .split{grid-template-columns:1fr;gap:40px} }

blockquote.chron{margin:0;padding:26px 30px;border-left:2px solid var(--gold);
  background:linear-gradient(90deg,rgba(201,162,75,.07),transparent 80%);
  font:300 italic 19px/1.65 var(--serif);color:var(--page)}
blockquote.chron cite{display:block;margin-top:14px;font:400 12px/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-style:normal}

.feats{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));margin-top:52px}
.feat{background:var(--stone);padding:30px 28px 28px;transition:background .16s}
.feat:hover{background:var(--iron)}
.feat .glyph{width:26px;height:26px;margin-bottom:16px;color:var(--gold)}
.feat p{margin:0;color:var(--quiet);font-size:15.5px;line-height:1.65}

.being-built{margin-top:40px;padding-top:28px;border-top:1px solid var(--edge)}
.being-built .built-lead{margin:0;max-width:62ch;color:var(--quiet);font-size:15.5px;line-height:1.65}

.steps{counter-reset:s;margin-top:48px;border-top:1px solid var(--edge)}
/* 34px of top margin was right when this sat on its own above the steps.
   Inside one it only has to clear the paragraph it follows. */
.grab{margin:18px 0 2px}
.grab .btn{margin:0}
.grab .also{margin:16px 0 0;max-width:56ch;font:400 15px/1.65 var(--serif,var(--carve));
  color:var(--page)}
.grab .faintly{margin-top:6px;font-size:13px;color:var(--faint)}
.step{counter-increment:s;display:grid;grid-template-columns:70px 1fr;gap:26px;
  padding:30px 0;border-bottom:1px solid var(--edge);align-items:start}
.step::before{content:counter(s,decimal-leading-zero);
  font:400 26px/1 var(--carve);color:var(--gold);letter-spacing:.04em}
.step p{margin:7px 0 0;color:var(--quiet);font-size:16px}
@media(max-width:560px){ .step{grid-template-columns:44px 1fr;gap:16px} }

/* -------------------------------------------------------------- report -- */
.form{display:grid;gap:18px;max-width:640px;margin-top:26px}
.form label{display:block;font:600 13px/1.5 var(--sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--quiet)}
.form .hint{display:block;font:400 13.5px/1.6 var(--serif);text-transform:none;
  letter-spacing:0;color:var(--faint);margin:3px 0 8px}
.form input[type=text],.form textarea{width:100%;box-sizing:border-box;
  padding:12px 14px;background:var(--stone);color:var(--page);
  border:1px solid var(--faint);border-radius:2px;
  font:15px/1.6 var(--serif);transition:border-color .12s,background .12s}
.form input[type=text]:hover,.form textarea:hover{border-color:var(--faint)}
.form input[type=text]:focus,.form textarea:focus{outline:none;
  border-color:var(--gold);background:var(--iron)}
.form textarea{min-height:160px;resize:vertical}
.form .check{display:flex;gap:10px;align-items:center;text-transform:none;
  letter-spacing:0;font:400 15px/1.6 var(--serif);color:var(--page)}
.form .check input{width:16px;height:16px;accent-color:var(--gold)}
.said{font:400 15px/1.6 var(--serif);color:var(--gold)}

.gallery{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:44px;width:100%;justify-items:stretch}
.shot{aspect-ratio:16/10;background:var(--iron);border:1px solid var(--edge);
  display:grid;place-items:center;color:var(--faint);
  font:400 12px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:16px}
.shot img,.shot video{width:100%;height:100%;object-fit:cover}
.shot-card{display:flex;flex-direction:column;gap:8px}
.shot-card .shot-actions{display:flex;flex-wrap:wrap;gap:8px}
/* Gallery submit box: same dark gold panel language as the rest of the site,
   not a separate olive slab. Staff queue lives on the hub only. */
.gal-box{margin-top:28px;padding:26px 28px;border:1px solid var(--edge);
  background:var(--stone);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(201,162,75,.08)}
.gal-box h2{font:600 clamp(20px,2.4vw,26px)/1.22 var(--carve);letter-spacing:.03em;
  margin:0 0 10px;color:var(--gold)}
.gal-box .hint{color:var(--quiet);margin:0 0 16px;font:400 15.5px/1.55 var(--serif)}
.gal-box .form{gap:22px}
.gal-box .form .gal-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.gal-box .form .gal-label{display:block;font:600 13px/1.5 var(--sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--page);margin:0}
.gal-box .form .gal-label .gal-opt{font:400 12px/1.5 var(--serif);letter-spacing:0;
  text-transform:none;color:var(--faint);margin-left:6px}
.gal-box .form label{color:var(--page)}
/* Native file control stays white on Windows; hide it and paint our own. */
.gal-box .form input[type=file]{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;opacity:0}
.gal-box .form .gal-drop{position:relative;padding:26px 22px;text-align:center;
  border:1.5px dashed var(--edge2);border-radius:2px;background:rgba(11,14,10,.55);
  transition:border-color .12s,background .12s,box-shadow .12s}
.gal-box .form .gal-drop-lead{margin:0 0 16px;font:400 15.5px/1.45 var(--serif);
  color:var(--quiet);text-transform:none;letter-spacing:0}
.gal-box .form .file-pick{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:12px}
.gal-box .form .btn.gal-pick{padding:12px 22px;background:var(--iron);
  border-color:var(--gold);color:var(--gold)}
.gal-box .form .btn.gal-pick:hover{background:var(--gold);color:#120F07}
.gal-box .form .file-name{font:400 14px/1.4 var(--serif);color:var(--quiet);
  text-transform:none;letter-spacing:0}
.gal-box .form .gal-chosen{list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;text-align:left}
.gal-box .form .gal-chosen-item{display:flex;align-items:center;gap:12px;
  padding:8px 10px;background:var(--iron);border:1px solid var(--edge);
  border-radius:2px}
.gal-box .form .gal-chosen-thumb{flex:0 0 56px;width:56px;height:56px;
  border:1px solid var(--edge2);border-radius:2px;overflow:hidden;
  background:var(--night)}
.gal-box .form .gal-chosen-thumb img{display:block;width:100%;height:100%;
  object-fit:cover}
.gal-box .form .gal-chosen-meta{flex:1 1 auto;min-width:0}
.gal-box .form .gal-chosen-name{font:500 14px/1.35 var(--sans);color:var(--page);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-transform:none;letter-spacing:0}
.gal-box .form .gal-chosen-size{font:400 12px/1.4 var(--serif);color:var(--quiet);
  text-transform:none;letter-spacing:0;margin-top:2px}
.gal-box .form .btn.gal-chosen-x{flex:0 0 auto;padding:6px 12px;font-size:12px;
  border-color:var(--edge2);color:var(--gold)}
.gal-box .form .btn.gal-chosen-x:hover{border-color:var(--gold);
  background:rgba(201,162,75,.12);color:var(--gold)}
.gal-box .form input[type=text]{width:100%;box-sizing:border-box;padding:12px 14px;
  background:var(--iron);color:var(--page);border:1px solid var(--faint);
  border-radius:2px;font:15px/1.6 var(--serif);
  -webkit-appearance:none;appearance:none;color-scheme:dark;
  transition:border-color .12s,background .12s,box-shadow .12s}
.gal-box .form input[type=text]::placeholder{color:var(--faint);opacity:1}
.gal-box .form input[type=text]:hover{border-color:var(--edge2);background:var(--night)}
.gal-box .form input[type=text]:focus{outline:none;border-color:var(--gold);
  background:var(--night);box-shadow:0 0 0 1px rgba(201,162,75,.28)}
.gal-box .form .gal-drop.drag{border-color:var(--gold);background:rgba(201,162,75,.1);
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.28)}

/* Eighteen-and-over door for /downloads and /join only. Statement, not a check. */
.age-gate{max-width:34rem;margin:48px auto;padding:32px 34px;border:1px solid var(--edge);
  background:var(--stone);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(201,162,75,.08)}
.age-gate h1{font:600 clamp(26px,3vw,34px)/1.2 var(--carve);letter-spacing:.03em;
  margin:0 0 14px;color:var(--gold)}
.age-gate p{font:400 16.5px/1.55 var(--serif);color:var(--page);margin:0 0 12px}
.age-gate .quiet{color:var(--quiet)}
.age-gate .acts{justify-content:flex-start;margin-top:26px}

/* Home gallery slideshow of approved public shots. */
.gal-show{position:relative;margin-top:34px;border:1px solid var(--edge);
  background:var(--stone);border-radius:2px;overflow:hidden;
  aspect-ratio:16/9;width:100%;margin-inline:auto}
.gal-show img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s ease}
.gal-show img.on{opacity:1}
.gal-show .gal-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 22px;
  background:linear-gradient(180deg,transparent,rgba(11,14,10,.88));
  color:var(--page);font:400 15px/1.4 var(--serif);z-index:2}
.gal-show .gal-nav{position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;width:44px;height:44px;padding:0;border-radius:2px;
  border:1px solid var(--gold);background:rgba(11,14,10,.82);
  color:var(--gold);cursor:pointer;font:600 22px/1 var(--carve);
  display:grid;place-items:center;line-height:1}
.gal-show .gal-nav:hover,.gal-show .gal-nav:focus-visible{
  background:var(--gold);color:var(--night)}
.gal-show .gal-prev{left:14px}
.gal-show .gal-next{right:14px}
@media(max-width:560px){
  .gal-show .gal-nav{width:38px;height:38px;font-size:18px}
  .gal-show .gal-prev{left:8px}
  .gal-show .gal-next{right:8px}
}
/* Each dot is a 24 pixel button with the 9 pixel dot drawn in the middle of
   it (#3218). The buttons were the 9 pixel dots themselves, 8 apart, under
   the 24 by 24 a finger or a shaky hand needs (WCAG 2.5.8). */
.gal-dots{display:flex;gap:2px;justify-content:center;margin-top:12px}
.gal-dots button{width:24px;height:24px;padding:0;border:0;background:transparent;
  cursor:pointer;display:grid;place-items:center}
.gal-dots button::before{content:"";width:9px;height:9px;border-radius:50%;
  border:1px solid var(--edge2)}
.gal-dots button.on::before{background:var(--gold);border-color:var(--gold)}
.gal-more{margin-top:22px}

.release{display:flex;gap:22px;align-items:baseline;flex-wrap:wrap;
  padding:22px 0;border-bottom:1px solid var(--edge)}
.release .when{font:400 12px/1 var(--mono);letter-spacing:.1em;color:var(--faint);
  flex:0 0 108px}
.release .what{flex:1;min-width:230px}

.call{text-align:center;padding:104px 0;border-top:1px solid var(--edge);
  background:radial-gradient(60% 100% at 50% 100%, rgba(201,162,75,.09), transparent 70%)}
.call h2{margin-bottom:14px}
.call .lede{margin:0 auto 34px}

/* ----------------------------------------------------------- read page -- */
.page{padding:64px 0 96px}
.page .wrap{width:min(1120px,100% - 48px)}
.page h1{font:600 clamp(34px,5vw,52px)/1.12 var(--carve);letter-spacing:.035em;
  margin:0 0 30px;text-wrap:balance;
  background:linear-gradient(180deg,#F0E6CE 18%,var(--gold) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.page h2{font:600 clamp(23px,3vw,31px)/1.22 var(--carve);letter-spacing:.03em;
  margin:58px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--edge)}
.page h3{font:600 18px/1.35 var(--carve);letter-spacing:.03em;margin:34px 0 10px;
  color:var(--gold)}
.page p,.page li{color:#CFD6C3;font-size:17.5px}
.page strong{color:var(--page);font-weight:600}
.page em{color:var(--gold)}
.page ul,.page ol{padding-left:24px}
.page li{margin:7px 0}
.page hr{border:0;border-top:1px solid var(--edge);margin:56px 0}
.page blockquote{margin:26px 0;padding:4px 0 4px 26px;border-left:2px solid var(--gold);
  color:var(--quiet);font-style:italic}
.page code{font:14px var(--mono);background:var(--iron);padding:2px 6px;border-radius:3px;
  color:var(--gold)}
.page pre{background:#070A06;border:1px solid var(--edge);padding:18px 20px;
  overflow-x:auto;border-radius:3px}
.page pre code{background:none;padding:0;color:#CFE0BE;font-size:13.5px;line-height:1.7}
.page table{width:100%;border-collapse:collapse;margin:22px 0;display:block;overflow-x:auto}
.page th{text-align:left;padding:11px 14px;background:var(--iron);color:var(--gold);
  font:600 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--edge);white-space:nowrap}
.page td{padding:11px 14px;border-bottom:1px solid var(--edge);vertical-align:top;
  color:#CFD6C3;font-size:16px}

/* roadmap and releases */
.lane{margin:44px 0}
.lane h2{margin-top:0}
.card-row{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge)}
.card-row .r{background:var(--stone);padding:20px 22px;display:grid;gap:5px}
.card-row .r b{font:600 17px/1.35 var(--serif);color:var(--page);font-weight:600}
.card-row .r span{color:var(--quiet);font-size:15.5px}
.rel{border-bottom:1px solid var(--edge);padding:26px 0}
.rel .when{font:400 12px/1 var(--mono);letter-spacing:.1em;color:var(--faint)}
.rel h2,.rel h3{margin:9px 0 8px;font-size:21px;color:var(--page)}
.rel ul{margin:8px 0 0;color:var(--quiet);font-size:15px}

footer{border-top:1px solid var(--edge);padding:52px 0 64px;
  padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));color:var(--faint);
  font:400 14px/1.9 var(--sans)}
footer .cols{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
footer h2{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 14px}
footer a{color:var(--faint);display:block}
footer a:hover{color:var(--gold)}
footer .base{margin-top:44px;padding-top:24px;border-top:1px solid var(--edge);
  font-size:12.5px;line-height:1.8}

/* #1474: former inline style= attributes */
.mt-28 { margin-top: 28px; }
.mt-26 { margin-top: 26px; }
.mt-34 { margin-top: 34px; }
.play-box {
  margin-top: 26px;
  padding: 24px 26px;
  border: 1px solid var(--edge);
  background: var(--stone);
}
.play-box h3 { font-size: 17px; }
.play-box > p {
  color: var(--quiet);
  font-size: 15.5px;
  margin: 0;
}
.faint { color: var(--faint); }
.faint-mt-28 { color: var(--faint); margin-top: 28px; }
.pre-wrap { white-space: pre-wrap; }
.nowrap { white-space: nowrap; }
.wrap-anywhere { overflow-wrap: anywhere; }
.lede-mt-34.lede { margin-top: 34px; }
.acts-start.acts { justify-content: flex-start; margin-top: 26px; }
.hp-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Turnstile's widget on the report form (#3216): its own height held, so the
   button under it does not jump when Cloudflare draws it. */
.ts-check { min-height: 65px; }