/*
 * SlavBot.com. A poster, not a template: flat colour blocks (red, black, paper, gold), one heavy display face,
 * diagonal cuts, no gradients, no glows, no soft shadows, no rounded cards. Two themes: a rule on the page ground paints with
 * the colours named by their job on :root (--ground, --text, --rule...), whose dark values are in css/theme.css; the spot
 * colours (black, red, gold, the games') are the same in both. A new colour is a token on :root, never written in a rule.
 * No inline styles anywhere (the CSP forbids them), so every state is a class.
 *
 * Type: four display sizes (--fs-1 to --fs-4) and three text sizes, two letter-spacings. Anton shouts (headings, buttons, the
 * menu); small labels are the body face, bold, in sentence case. A new size or spacing goes in :root, not in a rule.
 * Colour: a rule that paints a background also says what colour its text is, so nothing inherits cream onto a light chip
 * inside a dark panel (test/humanize.test.js reads this file and checks it).
 */

@font-face {
  font-family: 'Anton';
  src: url('/fonts/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #121212;
  --paper: #efe5cf;
  --paper-2: #e2d5b8;
  --cream: #fff6e0;
  --red: #c8171c;
  --gold: #ffc741;
  --muted: #5a5243;
  --muted-on-ink: #b9ad92;
  --off: #3a3a3a;
  --on-off: #8f8f8f;
  --hint: #736a59;
  /* Colours by job: a rule on the page ground uses these, not the brand names above, and so follows the theme. These are the
     light values; css/theme.css holds the dark ones, and points them back at these inside gold areas. A new job needs both. */
  --ground: var(--paper); /* the page and the paper blocks */
  --ground-2: var(--paper-2); /* the alternate band, code chips, the hairlines between rows */
  --card: var(--cream); /* what sits on top: folds, game bodies, tables */
  --text: var(--ink); /* type on those three */
  --quiet: var(--muted); /* small print on them */
  --rule: var(--ink); /* thick rules and outlines on them, and a button's edge */
  --hot: var(--red); /* red used as a mark on them: the red word, a count, an underline, an open/close mark */
  --focus: var(--red); /* the focus ring on them */
  --tag: var(--ink); /* a filled label, a chosen chip */
  --on-tag: var(--cream);
  --solid: var(--ink); /* the strongest fill: a black button, a hover */
  --on-solid: var(--cream);
  --on-solid-hi: var(--gold); /* the gold type on a black fill */
  --wedge: var(--ink); /* the hero's wedge */
  --land: var(--paper); /* the map's countries */
  --short: var(--gold); /* the privacy policy's short version: its ground, type and marks */
  --on-short: var(--ink);
  --short-mark: var(--ink);
  --switch: transparent; /* the header switch's square */
  --bar-edge: transparent; /* the top edge of a game bar: the bar's own fill in light, a paper rule in dark */
  --notch-face: var(--red); /* the hero's notched button: a lit red with ink type in dark, one shape with no outline */
  --on-notch-face: var(--cream);
  --mark: var(--ink); /* a fold's open/close box and the sign in it: gold with an ink sign in dark */
  --on-mark: var(--gold);
  --display: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --body: system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The games' own colours, from the bot's /help guides (commands/help.js). Used as the edge of a bar, never as a page colour. */
  --g-ww: #c8102e;
  --g-cards: #ff9800;
  --g-warfare: #f1c40f;
  --g-slave: #ff8c9e;
  --g-casino: #ffc741;
  --g-tokens: #2ecc71;
  /* The type scale. Display (Anton): the one shout a page has, a section heading, a heading inside a section, a small heading. */
  --fs-1: clamp(4.2rem, 15vw, 11rem);
  --fs-2: clamp(2.6rem, 7.5vw, 6.2rem);
  --fs-3: clamp(1.9rem, 4.6vw, 3.4rem);
  --fs-4: clamp(1.35rem, 2.6vw, 1.9rem);
  --fs-ui: 1.1rem; /* Anton on controls: buttons, the menu, tabs, chips */
  --fs-lede: 1.25rem;
  --fs-small: 0.94rem;
  --fs-tiny: 0.8rem;
  /* The header's height: the logo row (.mark, 64px), the menu's own row below 1000px (.nav, 41px) and the red rule (4px).
     The Commands search bar sticks at exactly this, and anchors land below it. A test adds the three up. */
  --bar-h: 109px;
  --ls-tight: 0.01em; /* big display type */
  --ls-wide: 0.06em; /* small capitals on controls */
  /* The open and close marks on folds, questions and game bars: two flat bars, centred by geometry, not by a font's metrics. */
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4v20h-4zM2 10h20v4H2z'/%3E%3C/svg%3E");
  --minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h20v4H2z'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 16px);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 17px/1.55 var(--body);
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
}

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

a {
  color: inherit;
  text-decoration-color: var(--hot);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ink a,
.red a {
  text-decoration-color: var(--gold);
}

.gold a {
  text-decoration-color: var(--ink);
}

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

.ink :focus-visible,
.red :focus-visible,
.streak :focus-visible,
.warn :focus-visible,
.explain-detail :focus-visible,
.bar :focus-visible,
.foot :focus-visible,
.cmd-bar :focus-visible,
.poster > summary:focus-visible {
  outline-color: var(--gold);
}

.nav a[aria-current='page']:focus-visible,
.tab[aria-pressed='true']:focus-visible {
  outline-color: var(--ink);
}

.g-guides > summary:focus-visible {
  outline-color: var(--rule);
}

/* Inside a box that clips (the scrolling menu, the tabs, the tilted ticker) or running edge to edge (a game bar), a ring
   drawn outside the element is cut off. These draw it inside. */
.nav a:focus-visible,
.tab:focus-visible,
.ticker a:focus-visible,
.poster > summary:focus-visible {
  outline-offset: -4px;
}

/* A gold chip on the black bar (the current page, the pressed tab): an ink ring at its very edge would merge with the black
   around it, so it sits further in, with gold on both sides. An unpressed tab's ring sits inside its cream border. */
.nav a[aria-current='page']:focus-visible,
.tab[aria-pressed='true']:focus-visible {
  outline-offset: -7px;
}

.tab:not([aria-pressed='true']):focus-visible {
  outline-offset: -8px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

h1 + .lede,
h2 + .lede {
  margin-top: 22px;
}

h2 {
  font-size: var(--fs-2);
}

h3 {
  font-size: var(--fs-4);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

/* A code chip brings its own text colour: in a dark panel it never inherits cream onto its light ground. */
code {
  font-family: var(--mono);
  font-size: 0.9em;
  font-weight: 600;
  background: var(--ground-2);
  color: var(--text);
  border: 2px solid var(--rule);
  padding: 0 5px;
}

.ink code,
.red code,
.explain-detail code,
.warn code,
.streak code {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--gold);
}

.red code {
  border-color: var(--ink);
}

/* A command in a fold inside a red block (the Commands header): a black chip in light, as on the red; on the dark slip it is a
   gold chip with ink type, as a fold's box is. */
.red .fold code {
  background: var(--mark);
  color: var(--on-mark);
  border-color: var(--mark);
}

.gold code {
  background: var(--cream);
  color: var(--ink);
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.js-only {
  display: none;
}

.js .js-only {
  display: block;
}


.sr-copy {
  position: fixed;
  left: -9999px;
  top: 0;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 800;
}

.skip:focus {
  left: 8px;
}

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

.block {
  position: relative;
  padding: 72px 0;
}

.paper {
  background: var(--ground);
  color: var(--text);
}

.paper2 {
  background: var(--ground-2);
  color: var(--text);
}

.cream {
  background: var(--card);
  color: var(--text);
}

.ink {
  background: var(--ink);
  color: var(--cream);
}

.red {
  background: var(--red);
  color: var(--cream);
}

.gold {
  background: var(--gold);
  color: var(--ink);
}

/* A diagonal top edge. The block pulls up under the one above, so that block's colour shows in the cut. */
.cut {
  --cut: clamp(28px, 5vw, 72px);
  margin-top: calc(var(--cut) * -1);
  padding-top: calc(var(--cut) + 64px);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}

.tag {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 11px;
  background: var(--tag);
  color: var(--on-tag);
  font: 700 var(--fs-small)/1.2 var(--body);
}

.ink .tag,
.red .tag {
  background: var(--gold);
  color: var(--ink);
}

.lede {
  max-width: 32em;
  font-size: var(--fs-lede);
  line-height: 1.45;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

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

.btn,
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 13px 25px 10px;
  border: 3px solid var(--rule);
  background: var(--gold);
  color: var(--ink);
  font: 400 var(--fs-ui)/1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

/* The notched corners are kept for two buttons only: Add to Discord in the header and in the hero. A clip-path also cuts
   off the focus ring, so a focused notched button drops its notch and shows the ring (a test checks every clipped control). */
.cta,
.btn.notch {
  border: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.btn.notch {
  padding: 16px 28px 13px;
}

.cta:focus-visible,
.btn.notch:focus-visible {
  clip-path: none;
}

/* Only a link gets the arrow: a button that acts on the page (Pick one for me, Start over, Warn them) has none, and Back has none. */
a.btn::after {
  content: '\2192';
  transition: transform 0.15s;
}

a.btn:hover::after {
  transform: translateX(6px);
}

a.btn.back::after {
  content: none;
}

.btn:hover,
.cta:hover {
  background: var(--solid);
  color: var(--on-solid-hi);
}

.ink .btn:hover,
.ink .cta:hover {
  background: var(--cream);
  color: var(--ink);
}

.btn.red {
  background: var(--red);
  color: var(--cream);
}

/* The hero's notched button: brand red in light; on the dark page (red was 2.67:1 there) a lit red face with ink type. */
.btn.red.notch {
  background: var(--notch-face);
  color: var(--on-notch-face);
}

.btn.red:hover {
  background: var(--solid);
  color: var(--on-solid);
}

.btn.ink {
  background: var(--solid);
  color: var(--on-solid);
}

.btn.ink:hover {
  background: var(--red);
  color: var(--cream);
}

.btn.line {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.btn.line:hover {
  background: var(--solid);
  color: var(--on-solid);
  border-color: var(--solid);
}

.ink .btn.line:hover,
.red .btn.line:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

.btn.big {
  padding: 19px 37px 15px;
  font-size: var(--fs-4);
}

/* After every colour variant, so a disabled red button (Warn them) looks as dead as it is. */
.btn:disabled,
.btn:disabled:hover {
  background: var(--off);
  border-color: var(--off);
  color: var(--on-off);
  cursor: not-allowed;
}

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

.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 4px solid var(--red);
}

.bar-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  color: var(--cream);
  text-decoration: none;
}

.mark-box {
  display: block;
  width: 46px;
  height: 44px;
}

.mark-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

.mark-word {
  font: 400 1.75rem/1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.cta {
  margin-left: auto;
  padding: 11px 18px 8px;
}

.nav {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  height: 41px;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav a {
  flex: none;
  padding: 9px 6px 6px;
  color: var(--cream);
  font: 400 var(--fs-ui)/1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
}

/* The smallest phones (360 wide): the logo and the Add button share one row. */
@media (max-width: 389px) {
  .mark-word {
    font-size: 1.5rem;
  }

  .cta {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Narrower still (320): the crest stands alone and the words are kept for screen readers, so the header stays two rows. */
@media (max-width: 359px) {
  .mark-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* On a phone the menu is wider than the screen. It scrolls sideways, and a hard gold tab at its right edge says so; the menu
   keeps room at its end so the last link can always scroll clear of the tab. Wide enough screens fit the whole menu (no tab). */
@media (max-width: 499px) {
  .bar-in {
    position: relative;
  }

  .nav {
    padding-right: 40px;
  }

  .nav::after {
    content: '';
    flex: none;
    width: 1px;
  }

  .bar-in::after {
    content: '\203A';
    position: absolute;
    right: 20px;
    bottom: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 33px;
    padding-bottom: 3px;
    background: var(--ink);
    color: var(--gold);
    border: 2px solid var(--gold);
    font: 400 1.6rem/1 var(--display);
    pointer-events: none;
  }

  /* common.js adds this once the menu is scrolled to its end: nothing more to the right, so no tab. */
  .bar.menu-end .bar-in::after {
    display: none;
  }
}

.nav a:hover {
  background: var(--red);
  color: var(--cream);
}

.nav a[aria-current='page'] {
  background: var(--gold);
  color: var(--ink);
}

/* One row (logo, menu, Add button) only where all of it fits; below that the menu has a row of its own. */
@media (min-width: 1000px) {
  :root {
    --bar-h: 68px;
  }

  .nav {
    order: 1;
    flex: 1;
    height: auto;
    margin-left: 12px;
    padding: 0;
  }

  .nav a {
    padding: 9px 14px 6px;
  }

  .cta {
    order: 2;
    margin-left: 0;
  }
}

/* ---------- home: hero ---------- */

.hero {
  padding: 0;
  overflow: hidden;
}

.hero-grid {
  position: relative;
  display: grid;
  align-items: end;
  padding-top: 44px;
}

.hero-copy {
  position: relative;
  z-index: 1;
  padding-bottom: 64px;
}

.hero h1 {
  font-size: var(--fs-1);
  line-height: 0.9;
}

.hero h1 span {
  display: block;
}

.hero h1 .hl {
  color: var(--hot);
}

.hero .lede {
  margin: 28px 0 28px;
}

/* On a phone the picture sits beside the headline, behind the words, instead of filling a screen of its own under the buttons. */
.hero-art {
  position: absolute;
  top: 34px;
  right: -10px;
  width: min(44%, 260px);
  aspect-ratio: 5 / 6;
}

.sun {
  position: absolute;
  top: 2%;
  right: -6%;
  width: min(92%, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
}

/* The black slope keeps its angle and runs out past the right edge, where the hero clips it, so it never ends in a
   vertical edge that lines up with nothing. */
.wedge {
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 160%;
  height: 94%;
  background: var(--wedge);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

@media (max-width: 899px) {
  .wedge {
    left: 22%;
  }
}

.girl {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: min(88%, 470px);
  transform: translateX(-46%);
}

@media (max-width: 560px) {
  .actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.25fr 0.85fr;
    gap: 24px;
    padding-top: 60px;
  }

  .hero-copy {
    padding-bottom: 96px;
  }

  .hero-art {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    height: 600px;
    aspect-ratio: auto;
  }
}

/* ---------- home: ticker ---------- */

.ticker-wrap {
  position: relative;
  z-index: 3;
  margin-top: -22px;
  padding: 22px 0;
  overflow: hidden;
}

.ticker {
  margin: 0 -3vw;
  overflow: hidden;
  background: var(--gold);
  color: var(--ink);
  border-block: 4px solid var(--ink);
  transform: rotate(-1.3deg);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: tick 90s linear infinite;
}

.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track {
  animation-play-state: paused;
}

.ticker ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticker li {
  display: flex;
  align-items: center;
}

.ticker li::after {
  content: '';
  width: 13px;
  height: 13px;
  margin: 0 28px;
  background: var(--ink);
  transform: rotate(45deg);
}

.ticker a {
  padding: 15px 0 11px;
  color: var(--ink);
  font: 400 var(--fs-4)/1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
}

.ticker a:hover {
  color: var(--red);
}

@keyframes tick {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ticker-track {
    animation: none;
  }

  .ticker {
    overflow-x: auto;
  }
}

/* ---------- home: five bots you can kick ---------- */

/* Each row is the bot Slav replaces, struck out big, and what she does instead. The strike is the joke, so it is thick and gold. */
.ledger {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 4px solid var(--ink);
}

.row {
  display: grid;
  gap: 12px 40px;
  padding: 24px 0 22px;
  border-bottom: 4px solid var(--ink);
  color: var(--cream);
  text-decoration: none;
}

.row:hover,
.row:focus-visible {
  background: var(--ink);
  color: var(--cream);
}

/* The strike is a bar of its own, not text-decoration, so motion.css can draw it across as the row arrives. */
.row-bot {
  position: relative;
  justify-self: start;
  white-space: nowrap;
  font: 400 var(--fs-2)/0.92 var(--display);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  text-decoration: none;
}

.row-bot::after {
  content: '';
  position: absolute;
  top: 0.42em;
  left: -0.04em;
  right: -0.04em;
  height: 0.1em;
  background: var(--gold);
}

.row-body {
  display: grid;
  gap: 4px;
  max-width: 36em;
}

.row-title {
  color: var(--gold);
  font: 700 var(--fs-lede)/1.2 var(--body);
}

@media (min-width: 940px) {
  .row {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
  }
}

/* ---------- home: the map ---------- */

.map-head {
  position: relative;
  display: grid;
  gap: 8px 24px;
  align-items: end;
}

/* The headline runs down over the top of the map, so the words sit on the world they are about. The map stays clickable
   under it, and an ink outline keeps the letters readable where they cross land. */
.map-head h2 {
  position: relative;
  z-index: 2;
  margin-bottom: calc(var(--fs-1) * -0.36);
  font-size: var(--fs-1);
  line-height: 0.86;
  -webkit-text-stroke: 0.07em var(--ink);
  paint-order: stroke fill;
  pointer-events: none;
}

/* Below the desktop layout the counter is one line in the tag's row, top right, out of the headline's way at every width. */
.counter {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  line-height: 0.82;
  text-align: right;
}

.js .counter {
  display: flex;
}

.counter b {
  display: block;
  color: var(--gold);
  font: 400 var(--fs-3)/0.9 var(--display);
}

.counter span {
  font: 700 var(--fs-lede)/1.2 var(--body);
}

@media (min-width: 900px) {
  .map-head {
    grid-template-columns: 1.3fr 0.7fr;
  }

  .counter {
    position: static;
    justify-self: end;
  }

  .js .counter {
    display: block;
  }

  .counter b {
    margin-bottom: 10px;
    font-size: var(--fs-2);
  }
}

.map-scroll {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-block: 4px solid var(--cream);
  -webkit-overflow-scrolling: touch;
}

.map {
  display: block;
  width: 100%;
  min-width: 780px;
  height: auto;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.map .land,
.map .pin {
  fill: var(--land);
  stroke: var(--ink);
  stroke-width: 0.35;
  stroke-linejoin: round;
  fill-rule: evenodd;
  cursor: pointer;
}

.map .pin {
  fill: var(--ink);
  stroke: var(--land);
  stroke-width: 0.6;
}

.map .land:hover,
.map .pin:hover {
  fill: var(--gold);
}

.map .claimed {
  fill: var(--red);
}

.map .pin.claimed {
  fill: var(--red);
  stroke: var(--cream);
}

.map .flash {
  stroke: var(--gold);
  stroke-width: 2.2;
}

.map-tip {
  position: fixed;
  z-index: 70;
  display: none;
  padding: 7px 12px 4px;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--gold);
  font: 400 var(--fs-ui)/1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

.map-tip.on {
  display: block;
}

.map-lede {
  margin: 26px 0 0;
}

.map-bar {
  display: none;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin-top: 22px;
}

.js .map-bar {
  display: flex;
}

.map-status {
  flex: 1 1 260px;
  margin: 0;
  color: var(--muted-on-ink);
}

.pan-hint {
  display: none;
}

@media (max-width: 780px) {
  .pan-hint {
    display: inline;
  }
}

.map-hint {
  margin: 12px 0 0;
  font-size: var(--fs-small);
  color: var(--muted-on-ink);
}

/* ---------- home: three ways in ---------- */

/* The heading is the three marks themselves. Then one plain row each, the slash first and biggest. */
.marks {
  font-size: var(--fs-1);
  letter-spacing: var(--ls-wide);
  line-height: 0.9;
}

.ways {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  border-top: 4px solid var(--rule);
}

.way {
  display: grid;
  gap: 10px 32px;
  padding: 22px 0 24px;
  border-bottom: 4px solid var(--rule);
}

.way h3 {
  font-size: var(--fs-3);
}

.way.first h3 {
  font-size: var(--fs-2);
}

.way p {
  max-width: 30em;
  margin: 0;
}

.way .try {
  margin: 0;
}

@media (min-width: 900px) {
  .way {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18em) minmax(0, 1fr);
    align-items: center;
  }
}

.try {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: 22em;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 3px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font: 700 1.1rem/1.2 var(--mono);
  text-align: left;
  cursor: pointer;
}

/* On black the chip keeps a frame you can see. */
.ink .try {
  border-color: var(--gold);
}

.try::after {
  content: 'Copy';
  display: none;
  flex: none;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--gold);
  font: 700 var(--fs-small)/1.2 var(--body);
}

.js .try::after {
  display: block;
}

.try:hover::after {
  background: var(--red);
  color: var(--cream);
}

/* ---------- home: the dashboard line and the closing strip ---------- */

/* The dashboard is one line on black, not a second split band like the closing strip. */
.dash {
  padding: 40px 0;
}

.dash-line {
  max-width: 46em;
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.45;
}

.closer-in {
  display: grid;
  gap: 20px 72px;
  align-items: end;
}

.closer-in .lede {
  margin: 0 0 26px;
}

@media (min-width: 900px) {
  .closer-in {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* ---------- inner page headers ---------- */

.top {
  padding: 56px 0 56px;
  overflow: hidden;
}

.top-art {
  display: none;
  position: relative;
  align-self: end;
  width: 380px;
  height: 360px;
  margin-bottom: -56px;
}

.top-art .disc {
  position: absolute;
  top: 0;
  right: 0;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: var(--red);
}

/* A black disc on the page's own colour (named on-ink, not ink: .ink would paint the whole box black). */
.top-art.on-ink .disc {
  background: var(--ink);
}

.top-art img {
  position: absolute;
  right: 28px;
  bottom: 0;
  width: 300px;
  height: auto;
}

@media (min-width: 900px) {
  .top-art {
    display: block;
  }
}

.top h1 {
  font-size: var(--fs-1);
  line-height: 0.9;
}

.top .lede {
  margin: 26px 0 0;
}

.top .actions,
.block > .wrap > h2 + .actions {
  margin-top: 28px;
}

.top-grid {
  display: grid;
  gap: 24px;
  align-items: end;
}

@media (min-width: 900px) {
  .top-grid {
    grid-template-columns: 1fr auto;
  }
}

.big-count {
  margin: 0;
  font: 400 var(--fs-1) / 0.8 var(--display);
}

.big-count small {
  display: block;
  margin-top: 14px;
  font: 700 var(--fs-lede)/1.2 var(--body);
  letter-spacing: normal;
  text-transform: none;
}

.cmd-intro .lede {
  margin-top: 0;
}

.top .crest {
  display: block;
  width: min(300px, 60vw);
  justify-self: end;
}

/* Commands: the count is the headline, and the search sits straight under it. On a phone the short intro comes first. */
.cmd-head {
  display: grid;
  gap: 18px 56px;
  align-items: end;
}

.cmd-head .big-count {
  order: 2;
}

.cmd-head .fold {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .cmd-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cmd-head .big-count {
    order: 0;
  }
}

.cmd-top {
  padding-bottom: 40px;
}

/* Games: the girl in the hard hat leans into the end of the word. */
.games-top {
  padding-top: clamp(56px, 8vw, 96px);
}

.games-head h1 {
  position: relative;
}

.games-girl {
  position: absolute;
  left: 100%;
  bottom: -0.03em;
  width: auto;
  max-width: none;
  height: 1.4em;
  margin-left: -0.4em;
}

.games-intro {
  margin-top: 28px;
}

.games-intro .lede {
  margin: 0;
}

/* Chat: her face first, the words beside it. */
.chat-head {
  display: grid;
  gap: 20px 48px;
  align-items: end;
}

.top .chat-head .crest {
  width: min(180px, 46vw);
  justify-self: start;
}

@media (min-width: 900px) {
  .chat-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .top .chat-head .crest {
    width: 330px;
    margin-bottom: -56px;
  }
}

/* ---------- commands ---------- */

.cmd-bar {
  position: sticky;
  top: var(--bar-h);
  z-index: 40;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 4px solid var(--gold);
}

.cmd-bar[hidden] {
  display: none;
}

.cmd-bar .wrap {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.search {
  position: relative;
}

.search input {
  width: 100%;
  padding: 16px 70px 14px 18px;
  border: 0;
  background: var(--cream);
  color: var(--ink);
  font: 700 1.25rem/1.2 var(--mono);
  border-radius: 0;
}

.search input::placeholder {
  color: var(--hint);
  font-weight: 400;
}

.search input:focus {
  outline: 4px solid var(--gold);
  outline-offset: 0;
}

.search kbd {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 9px;
  background: var(--ink);
  color: var(--gold);
  border: 0;
  font: 700 1.1rem/1.4 var(--mono);
}

.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  padding: 9px 14px 6px;
  border: 3px solid var(--cream);
  background: transparent;
  color: var(--cream);
  font: 400 var(--fs-ui)/1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
}

.tab:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--cream);
}

.tab[aria-pressed='true'] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.cmd-count {
  margin: 0;
  color: var(--muted-on-ink);
  font-size: var(--fs-small);
}

/* On a phone the pinned header and search bar keep to about a third of the screen: tighter spacing, the tabs on one
   scrolling line, and the result count kept for screen readers only (it is the live region that announces a search). */
@media (max-width: 699px) {
  .cmd-bar .wrap {
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .search input {
    padding-top: 11px;
    padding-bottom: 9px;
    font-size: 1.1rem;
  }

  .tab {
    padding: 7px 11px 5px;
  }

  .cmd-count {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.cmd-group[hidden],
.cmd[hidden] {
  display: none;
}

.cmd-group {
  padding: 44px 0 0;
}

.cmd-group h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 4px solid var(--rule);
  font-size: var(--fs-3);
}

.cmd-group h2 span {
  color: var(--hot);
}

.cmd-rows {
  display: grid;
}

@media (min-width: 900px) {
  .cmd-rows {
    grid-template-columns: 1fr 1fr;
    column-gap: 44px;
  }
}

/* align-content: a row beside a taller one keeps its name and description together instead of spreading them apart. */
.cmd {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: 2px 14px;
  padding: 14px 8px 13px;
  border-bottom: 2px solid var(--ground-2);
}

.cmd {
  scroll-margin-top: 250px;
}

.cmd:target {
  background: var(--gold);
  color: var(--ink);
}

.cmd:hover {
  background: var(--card);
  color: var(--text);
}

.cmd-name {
  font: 700 1.1rem/1.3 var(--mono);
}

.cmd-alias {
  margin-left: 10px;
  font: 400 var(--fs-tiny)/1.3 var(--mono);
  color: var(--quiet);
}

.cmd-desc {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--quiet);
  font-size: var(--fs-small);
}

.cmd-desc code {
  font-size: 0.85em;
}

.copy {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding: 3px 10px;
  border: 2px solid var(--rule);
  background: transparent;
  color: var(--text);
  font: 700 var(--fs-small)/1.2 var(--body);
  cursor: pointer;
}

.copy {
  display: none;
}

.js .copy {
  display: inline-block;
}

.copy:hover,
.copy:focus-visible {
  background: var(--solid);
  color: var(--on-solid-hi);
}

mark {
  background: var(--gold);
  color: var(--ink);
  padding: 0 1px;
}

.empty {
  padding: 44px 0;
}

.empty[hidden] {
  display: none;
}

/* ---------- games ---------- */

/* The bars are house colours: World War red, the rest black, the guides paper. Each game keeps its colour from the bot's own
   /help guides as a thick edge beside its name and as its open and close mark. The biggest bar is the biggest game. */
.poster {
  --edge: var(--gold);
  border-bottom: 3px solid var(--ground);
}

.poster > summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  padding: 17px max(20px, calc(50% - 570px)) 18px;
  border-top: 3px solid var(--bar-edge);
  background: var(--ink);
  color: var(--cream);
  list-style: none;
  cursor: pointer;
}

.poster > summary::-webkit-details-marker {
  display: none;
}

.poster > summary::before {
  content: '';
  position: absolute;
  top: -3px;
  bottom: 0;
  left: max(0px, calc(50% - 594px));
  width: 14px;
  background: var(--edge);
}

.poster > summary h2 {
  grid-column: 1;
  font-size: var(--fs-3);
  line-height: 0.9;
}

.poster.lead > summary {
  padding-top: 25px;
  padding-bottom: 24px;
}

.poster.lead > summary h2 {
  font-size: var(--fs-2);
}

.poster > summary .pitch {
  grid-column: 1;
  max-width: 34em;
  font-weight: 600;
  line-height: 1.35;
}

.poster > summary::after {
  content: '';
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  background: var(--edge);
  -webkit-mask: var(--plus) center / contain no-repeat;
  mask: var(--plus) center / contain no-repeat;
}

.poster[open] > summary::after {
  -webkit-mask-image: var(--minus);
  mask-image: var(--minus);
}

.poster > summary:hover h2 {
  text-decoration: underline 0.08em var(--edge);
  text-underline-offset: 0.12em;
}

.poster-body {
  padding: 36px 0 26px;
  background: var(--card);
  color: var(--text);
}

/* minmax(0, 1fr): a wide piece inside (the streak medals) can never push the page past the screen. */
.poster-body .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 48px;
}

.poster-body p,
.poster-body li {
  max-width: 40em;
}

.poster-body ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.poster-body li {
  margin-bottom: 6px;
}

.poster-body h3 {
  margin: 22px 0 8px;
}

.poster-body h3:first-child {
  margin-top: 0;
}

.poster-body .actions {
  margin-top: 6px;
}

@media (min-width: 900px) {
  .poster-body .wrap.two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.g-ww {
  --edge: var(--gold);
}

.g-ww > summary {
  background: var(--g-ww);
  color: var(--cream);
}

.g-cards {
  --edge: var(--g-cards);
}

.g-warfare {
  --edge: var(--g-warfare);
}

.g-slave {
  --edge: var(--g-slave);
}

.g-casino {
  --edge: var(--g-casino);
}

.g-tokens {
  --edge: var(--paper);
}

.g-guides {
  --edge: var(--text);
}

.g-guides > summary {
  background: var(--ground-2);
  color: var(--text);
}

.g-guides > summary h2 {
  font-size: var(--fs-4);
}

/* Slots and the rest: each game's name on a small line of its own, then what it is. */
.games-list {
  margin: 0;
  border-top: 3px solid var(--rule);
}

.games-list > div {
  display: grid;
  gap: 2px 24px;
  padding: 12px 0 11px;
  border-bottom: 2px solid var(--ground-2);
}

.games-list dt {
  color: var(--quiet);
  font-size: var(--fs-small);
}

.games-list dd {
  max-width: 40em;
  margin: 0;
}

@media (min-width: 700px) {
  .games-list > div {
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.cash {
  margin: 20px 0 0;
  color: var(--quiet);
  font-size: var(--fs-small);
}

/* streak medals */

.streak {
  padding: 22px;
  background: var(--ink);
  color: var(--cream);
}

.streak output {
  display: block;
  color: var(--gold);
  font: 400 var(--fs-2) / 0.9 var(--display);
}

.streak-days {
  margin: 0 0 10px;
  font: 700 var(--fs-small)/1.2 var(--body);
}

.streak input[type='range'] {
  width: 100%;
  height: 40px;
  margin: 12px 0 4px;
  accent-color: var(--gold);
  cursor: pointer;
}

.medal-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

.medal {
  flex: none;
  width: 110px;
  height: 110px;
}

.medal-none {
  display: grid;
  place-items: center;
  border: 3px dashed var(--muted-on-ink);
  color: var(--muted-on-ink);
  font: 700 var(--fs-small)/1.1 var(--body);
  text-align: center;
}

.medal-name {
  margin: 0;
  font: 400 var(--fs-4)/1 var(--display);
  text-transform: uppercase;
}

.medal-next {
  margin: 4px 0 0;
  color: var(--muted-on-ink);
}

.rungs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 520px) {
  .rungs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rungs li {
  padding: 7px 2px 6px;
  border: 2px solid var(--muted-on-ink);
  color: var(--muted-on-ink);
  font: 700 var(--fs-tiny)/1.15 var(--body);
  text-align: center;
  overflow-wrap: anywhere;
}

.rungs li.on {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

/* rarity ladder */

.rarity {
  display: grid;
  gap: 6px;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rarity li {
  width: var(--w);
  padding: 13px 16px 10px;
  border: 4px solid var(--rule);
  font: 400 var(--fs-4)/1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.rarity small {
  display: block;
  margin-top: 6px;
  font: 600 var(--fs-tiny)/1.2 var(--body);
  letter-spacing: 0;
  text-transform: none;
}

.rarity .r1 {
  --w: 44%;
  background: var(--paper-2);
  color: var(--ink);
}

.rarity .r2 {
  --w: 56%;
  background: var(--paper);
  color: var(--ink);
}

.rarity .r3 {
  --w: 68%;
  background: var(--gold);
  color: var(--ink);
}

.rarity .r4 {
  --w: 80%;
  background: var(--red);
  color: var(--cream);
}

.rarity .r5 {
  --w: 90%;
  background: var(--ink);
  color: var(--cream);
}

.rarity .r6 {
  --w: 100%;
  background: var(--ink);
  color: var(--gold);
  border-color: var(--gold);
}

/* ---------- moderation ---------- */

.mod-grid {
  display: grid;
  gap: 48px;
}

@media (min-width: 900px) {
  .mod-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.mod-grid h2,
.mod-stack h2 {
  margin-bottom: 18px;
  font-size: var(--fs-3);
}

/* Automod, then Logs and alarms under it: one column, so a short section never sits beside a long one with a hole under it. */
.mod-stack {
  display: grid;
  gap: 44px;
}

.mod-stack > div {
  max-width: 46em;
}

.mod-grid ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.mod-grid li {
  margin-bottom: 6px;
}

.toolbox {
  columns: 2 300px;
  column-gap: 48px;
  margin: 22px 0 28px;
  padding-left: 1.2em;
}

.toolbox li {
  break-inside: avoid;
  margin-bottom: 8px;
}

.warn {
  padding: 26px;
  background: var(--ink);
  color: var(--cream);
}

.warn h2 {
  color: var(--gold);
}

.strikes {
  display: flex;
  gap: 12px;
  margin: 8px 0 20px;
}

.strike {
  flex: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 120px;
  border: 4px solid var(--muted-on-ink);
  color: var(--muted-on-ink);
  font: 400 var(--fs-3)/1 var(--display);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.strike.on {
  background: var(--red);
  border-color: var(--red);
  color: var(--cream);
}

.warn.done .strike {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.warn-result {
  min-height: 3.4em;
  margin: 0 0 18px;
  font: 400 var(--fs-4)/1.15 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.steps {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border: 4px solid var(--rule);
}

.steps li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 14px 16px 12px;
  border-bottom: 4px solid var(--rule);
}

.steps li:last-child {
  border-bottom: 0;
}

.steps b {
  font: 400 var(--fs-3)/1 var(--display);
  color: var(--hot);
}

/* ---------- chat ---------- */

.facts {
  margin: 0;
  border-top: 4px solid var(--rule);
}

.fact {
  display: grid;
  gap: 8px 40px;
  padding: 26px 0 14px;
  border-bottom: 4px solid var(--rule);
}

.fact h2 {
  font-size: var(--fs-3);
}

.fact p {
  max-width: 38em;
}

@media (min-width: 900px) {
  .fact {
    grid-template-columns: 360px 1fr;
  }
}

/* ---------- setup ---------- */

.explain {
  display: grid;
  gap: 28px;
  margin-top: 36px;
}

@media (min-width: 940px) {
  .explain {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .explain-detail {
    position: sticky;
    top: 96px;
  }
}

.perm-group h3 {
  margin: 0 0 10px;
}

.perm-group + .perm-group {
  margin-top: 26px;
}

.perm-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.perm-list li {
  margin-bottom: 14px;
}

.js .perm-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.js .perm-list li {
  margin: 0;
}

.perm-btn {
  padding: 10px 14px 7px;
  border: 3px solid var(--rule);
  background: transparent;
  color: var(--text);
  font: 400 var(--fs-ui)/1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: default;
}

.js .perm-btn {
  cursor: pointer;
}

.js .perm-btn:hover {
  background: var(--ground-2);
  color: var(--text);
}

/* The pressed chip stays pressed under the pointer (the hover above must not turn it gold on beige). */
.perm-btn[aria-pressed='true'],
.js .perm-btn[aria-pressed='true']:hover {
  background: var(--tag);
  color: var(--on-solid-hi);
}

.perm-body {
  margin: 8px 0 0;
  font-size: var(--fs-small);
}

.perm-body ul {
  margin: 4px 0 0;
  padding-left: 1.2em;
}

.js .perm-body {
  display: none;
}

.explain-detail {
  display: none;
  padding: 24px;
  background: var(--ink);
  color: var(--cream);
  min-height: 280px;
}

.js .explain-detail {
  display: block;
}

.explain-detail h3 {
  margin-bottom: 4px;
  color: var(--gold);
  font-size: var(--fs-3);
}

.explain-detail .impact {
  display: inline-block;
  margin: 8px 0 16px;
  padding: 4px 10px;
  background: var(--gold);
  color: var(--ink);
  font: 700 var(--fs-small)/1.2 var(--body);
}

.explain-detail .without {
  margin: 0 0 6px;
  font: 700 var(--fs-small)/1.2 var(--body);
  color: var(--muted-on-ink);
}

.explain-detail ul {
  margin: 0;
  padding-left: 1.2em;
}

.explain-detail li {
  margin-bottom: 8px;
}

.faq details {
  border-top: 4px solid var(--rule);
}

.faq details:last-child {
  border-bottom: 4px solid var(--rule);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0 14px;
  font: 400 var(--fs-4) / 1.05 var(--display);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--hot);
  -webkit-mask: var(--plus) center / contain no-repeat;
  mask: var(--plus) center / contain no-repeat;
}

.faq details[open] summary::after {
  -webkit-mask-image: var(--minus);
  mask-image: var(--minus);
}

.faq details p {
  max-width: 40em;
  margin: 0 0 20px;
}

/* ---------- legal ---------- */

.verbatim {
  max-width: 46em;
  margin: 18px 0 8px;
  padding: 22px 24px 8px;
  background: var(--card);
  color: var(--text);
  border-left: 10px solid var(--hot);
}

.prose h2 {
  margin: 56px 0 14px;
  font-size: var(--fs-3);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  max-width: 40em;
}

/* ---------- the pre-launch gate: "coming soon" and the password screen ---------- */

/* The content sits on the bottom edge, so the gold slope runs off the bottom of the screen instead of stopping above it. */
.soon {
  display: grid;
  align-items: end;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
}

.soon-grid {
  display: grid;
  gap: 8px;
  align-items: end;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 20px 0;
}

.soon h1 {
  font-size: var(--fs-1);
  line-height: 0.88;
}

.soon h1 span {
  display: block;
}

.soon-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

.soon-link:hover,
.soon-link:focus-visible {
  color: var(--gold);
}

.soon .lede {
  margin: 22px 0 30px;
}

/* The words keep clear of the bottom edge; the picture and its slope stay on it. */
.soon-copy {
  padding-bottom: 28px;
}

.soon-art {
  position: relative;
  height: min(104vw, 520px);
}

/* The gate's own picture: the girl on a big gold slope, no sun. */
.soon .wedge {
  left: -40%;
  width: 180%;
  height: 72%;
  background: var(--gold);
}

@media (min-width: 900px) {
  .soon-grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    padding-top: 60px;
  }

  .soon-art {
    height: 640px;
  }
}

.unlock-form {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 20px;
}

.unlock h1 {
  margin-bottom: 26px;
  font-size: var(--fs-2);
}

.unlock-form input {
  display: block;
  width: 100%;
  margin: 0 0 22px;
  padding: 18px 18px 16px;
  border: 0;
  border-radius: 0;
  background: var(--cream);
  color: var(--ink);
  font: 700 1.4rem/1.2 var(--mono);
}

.unlock-form input:focus {
  outline: 4px solid var(--gold);
  outline-offset: 0;
}

.gate-error {
  margin: 0 0 18px;
  padding: 13px 16px 10px;
  background: var(--red);
  color: var(--cream);
  font: 400 var(--fs-ui)/1.1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ---------- the privacy policy ---------- */

.policy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 20px 0 0;
  font: 700 var(--fs-small)/1.2 var(--body);
}

/* In line with the text above it: no padding on a chip whose colour is the page's own. */
.policy-meta span {
  background: var(--ink);
  color: var(--gold);
}

/* The short version: the first thing under the title, a gold block of eight plain bullets, each one linked to the section that holds the detail. */
.short {
  max-width: 54em;
  margin: 0 0 30px;
  padding: 26px 28px 12px;
  background: var(--short);
  color: var(--on-short);
  border: 4px solid var(--short-mark);
}

.policy .short h2 {
  margin: 0 0 10px;
  color: var(--short-mark);
  font-size: var(--fs-3);
}

.short-lede {
  margin: 0 0 18px;
}

.policy .short ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.policy .short li {
  position: relative;
  max-width: none;
  margin: 0 0 14px;
  padding-left: 30px;
}

.short li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 11px;
  height: 11px;
  background: var(--short-mark);
  transform: rotate(45deg);
}

.short li > b {
  font-weight: 800;
}

.short .more {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-small);
}

.short .to {
  margin-right: 0.9em;
  white-space: nowrap;
  font-weight: 700;
  text-decoration-color: var(--short-mark);
}

.short .to::after {
  content: '\2192';
  margin-left: 0.25em;
}

@media (max-width: 560px) {
  .short {
    padding: 20px 16px 6px;
  }

  .policy .short li {
    padding-left: 24px;
  }
}

.toc {
  margin: 0 0 8px;
}

.toc-label {
  margin: 0 0 10px;
  font: 700 var(--fs-small)/1.2 var(--body);
}

.policy .toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.policy .toc li {
  max-width: none;
  margin: 0;
}

.toc a {
  display: block;
  padding: 8px 12px 5px;
  border: 3px solid var(--rule);
  font: 400 var(--fs-ui)/1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
}

.toc a:hover {
  background: var(--solid);
  color: var(--on-solid-hi);
}

.toc .btn {
  padding: 9px 14px 6px;
}

.toc .btn::after {
  content: none;
}

.policy section {
  scroll-margin-top: 96px;
}

.policy h2 {
  margin: 56px 0 14px;
  font-size: var(--fs-3);
}

.policy h3 {
  margin: 26px 0 8px;
}

.policy p,
.policy li {
  max-width: 44em;
}

.policy ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.policy li {
  margin-bottom: 6px;
}

.table-wrap {
  margin: 18px 0 24px;
  overflow-x: auto;
}

.policy-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  border: 4px solid var(--rule);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-small);
}

.policy-table th {
  padding: 11px 14px 9px;
  background: var(--ink);
  color: var(--cream);
  font: 700 var(--fs-small)/1.2 var(--body);
  text-align: left;
}

.policy-table td {
  padding: 11px 14px;
  border-top: 2px solid var(--ground-2);
  vertical-align: top;
}

.policy-table td:first-child {
  font-weight: 700;
}

.fold-body .table-wrap {
  margin: 14px 0 12px;
}

.fold-body .policy-table {
  border-width: 0;
}

@media (max-width: 720px) {
  /* A phone cannot hold three columns: each row becomes a card, with its column name in front of each cell. */
  .table-wrap {
    overflow: visible;
  }

  .policy-table,
  .policy-table tbody,
  .policy-table tr,
  .policy-table td {
    display: block;
  }

  .policy-table {
    min-width: 0;
    border-width: 0;
    background: transparent;
  }

  .policy-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .policy-table tr {
    margin: 0 0 14px;
    border: 4px solid var(--rule);
    background: var(--card);
    color: var(--text);
  }

  .policy-table td {
    padding: 9px 12px 10px;
  }

  .policy-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--quiet);
    font: 700 var(--fs-tiny)/1.2 var(--body);
  }

  .policy-table td:first-child {
    padding: 11px 12px 8px;
    border-top: 0;
    background: var(--ink);
    color: var(--cream);
    font: 400 var(--fs-ui)/1.1 var(--display);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
  }

  .policy-table td:first-child::before {
    display: none;
  }
}

.policy .note {
  max-width: 44em;
  padding: 14px 18px 2px;
  background: var(--card);
  color: var(--text);
  border-left: 8px solid var(--hot);
}

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

.foot {
  position: relative;
  overflow: hidden;
  padding: 56px 0 48px;
  background: var(--ink);
  color: var(--cream);
  border-top: 4px solid var(--red);
}

.foot-grid {
  display: grid;
  gap: 28px 40px;
}

@media (min-width: 760px) {
  .foot-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.foot h2 {
  margin: 0 0 12px;
  color: var(--gold);
  font: 700 var(--fs-small)/1.2 var(--body);
  text-transform: none;
}

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot li {
  margin-bottom: 6px;
}

.foot a {
  color: var(--cream);
  text-decoration-color: transparent;
}

.foot a:hover {
  text-decoration-color: var(--gold);
}

.foot-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-on-ink);
  font-size: var(--fs-small);
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 90;
  max-width: calc(100vw - 32px);
  padding: 12px 20px 9px;
  background: var(--gold);
  color: var(--ink);
  border: 3px solid var(--ink);
  font: 400 var(--fs-ui)/1.1 var(--display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.15s, transform 0.15s;
}

.toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

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

/* ---------- a fold: the small "Details" box ---------- */

/* A plain <details>, so it opens without a script. The detail sits behind it; nothing in it is removed. */
.fold {
  margin: 22px 0 10px;
  background: var(--card);
  color: var(--text);
  border: 4px solid var(--rule);
}

.cream .fold,
.poster-body .fold {
  background: var(--ground);
  color: var(--text);
}

.fold > summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 11px 16px 9px 11px;
  list-style: none;
  cursor: pointer;
}

.fold > summary::-webkit-details-marker {
  display: none;
}

/* The black box, and over it the gold mark, centred by geometry. */
.fold > summary::before {
  content: '';
  flex: none;
  width: 36px;
  height: 36px;
  background: var(--mark);
}

.fold > summary::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 11px;
  width: 36px;
  height: 36px;
  background: var(--on-mark);
  -webkit-mask: var(--plus) center / 18px no-repeat;
  mask: var(--plus) center / 18px no-repeat;
}

.fold[open] > summary::after {
  -webkit-mask-image: var(--minus);
  mask-image: var(--minus);
}

/* The old "Details" chip. The fold's own title says what is inside, so the chip is gone from the marketing pages; the privacy
   page's markup is pinned word for word (test/fixtures/privacy-sentences.json), so there it stays in the text and is hidden. */
.fold-tag {
  display: none;
}

.fold-title {
  flex: 1 1 15em;
  font-weight: 700;
}

.fold > summary:hover .fold-title {
  text-decoration: underline 3px var(--hot);
  text-underline-offset: 4px;
}

.fold-body {
  padding: 8px 18px 6px;
  border-top: 4px solid var(--rule);
}

.fold-body > :last-child {
  margin-bottom: 8px;
}

.fold-body h3 {
  margin: 20px 0 8px;
  font-size: var(--fs-4);
}

.fold-body h3:first-child {
  margin-top: 8px;
}

/* ---------- home: how to start, in one line ---------- */

.start-row {
  display: grid;
  gap: 18px 40px;
  align-items: center;
}

/* On a phone the button fills the row; its label stays in the middle. */
.start-row .btn {
  justify-content: center;
}

.start-line {
  max-width: 40em;
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.45;
}

@media (min-width: 900px) {
  .start-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ---------- setup: a few things worth knowing ---------- */

/* Not a grid of equal boxes: notes under a rule each, two columns where there is room. */
.notes {
  display: grid;
  gap: 8px 56px;
  margin-top: 30px;
}

.note {
  padding: 18px 0 8px;
  border-top: 4px solid var(--rule);
}

.note h3 {
  margin-bottom: 8px;
  font-size: var(--fs-3);
}

.note p {
  max-width: 32em;
}

.note .fold {
  margin-top: 8px;
}

@media (min-width: 900px) {
  .notes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- home and setup: questions ---------- */

.faq h2 {
  margin-bottom: 22px;
}

.faq details p + p {
  margin-top: -10px;
}

.faq details p a {
  font-weight: 700;
}

.faq-more {
  margin: 26px 0 0;
}

/* ---------- commands: start here, and a search that found nothing ---------- */

.picks {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 4px solid var(--rule);
}

.pick {
  display: grid;
  align-content: start;
  gap: 3px;
  height: 100%;
  padding: 14px 6px 13px;
  border-bottom: 4px solid var(--rule);
  color: inherit;
  text-decoration: none;
}

.pick:hover {
  background: var(--solid);
  color: var(--on-solid);
}

.pick-title {
  font: 400 var(--fs-4)/1 var(--display);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.pick-name {
  font: 700 var(--fs-small)/1.3 var(--mono);
  color: var(--quiet);
}

.pick:hover .pick-name {
  color: var(--on-solid-hi);
}

.pick-desc {
  font-size: var(--fs-small);
}

@media (min-width: 700px) {
  .picks {
    grid-template-columns: 1fr 1fr;
    column-gap: 44px;
  }
}

.start-here {
  padding-bottom: 8px;
}

.start-here[hidden] {
  display: none;
}

.start-here .fold {
  margin-top: 28px;
}

.empty {
  max-width: 34em;
}

.empty b {
  display: block;
  margin-bottom: 14px;
  font: 400 var(--fs-3) / 1 var(--display);
  text-transform: uppercase;
}

.empty p {
  margin: 0 0 18px;
}

/* ---------- moderation: one line of links under the title instead of a summary that said everything twice ---------- */

.jump {
  margin: 30px 0 0;
  font-weight: 700;
}

.jump a {
  white-space: nowrap;
}

/* A legal page's title band is smaller, so the short version is on the first screen. */
.top.compact {
  padding: 40px 0 44px;
}

.top.compact h1 {
  font-size: var(--fs-2);
}

.top.compact .lede {
  margin-top: 18px;
}

/* ---------- print: the policy on paper, every fold open ---------- */

@media print {
  .bar,
  .skip,
  .foot,
  .toast,
  .toc .btn,
  .js-only {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .block,
  .top {
    padding: 14pt 0;
    background: #fff !important;
    color: #000 !important;
    clip-path: none;
  }

  .top h1,
  .top .tag,
  .top .lede,
  .top .policy-meta span {
    background: none !important;
    color: #000 !important;
    animation: none !important;
  }

  .short {
    background: #fff;
    color: #000;
    border-width: 2px;
  }

  .fold,
  .fold-body {
    border-width: 1px;
  }

  .policy-table {
    min-width: 0;
  }

  .fold > summary::before {
    display: none;
  }

  a {
    color: #000;
  }
}

/* A browser that supports it shows a closed fold's contents on paper too (the script opens them for the rest). */
@media print {
  .fold::details-content {
    content-visibility: visible;
  }
}