/* The app's look (roleplaying/frontend/src/tokens.css): Catppuccin Mocha for
   dark, Latte for light, the same three faces. Unlike the app the page
   follows the visitor's system theme, since there is no toggle to remember.
   Fonts are served from here, not Google: a German page that loads Google
   Fonts hands every visitor's IP to Google without asking. */

@font-face {
  font-family: "Instrument Sans";
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/instrument-sans.woff2) format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/newsreader.woff2) format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-italic.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono.woff2) format("woff2");
}

:root {
  color-scheme: dark;
  --crust: #11111b;
  --mantle: #181825;
  --base: #1e1e2e;
  --surface0: #313244;
  --accent: #cba6f7;
  --accent-rgb: 203, 166, 247;
  --accent-on: #11111b;
  --warn: #fab387;
  --warn-rgb: 250, 179, 135;
  --ink-rgb: 205, 214, 244;
  --coin: #f9e2af;
  --coin-rim: #d9b872;
  --coin-ink: #3a2f12;

  --font-ui: "Instrument Sans", system-ui, sans-serif;
  --font-read: "Newsreader", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --crust: #dce0e8;
    --mantle: #e6e9ef;
    --base: #eff1f5;
    --surface0: #ccd0da;
    --accent: #8839ef;
    --accent-rgb: 136, 57, 239;
    --accent-on: #eff1f5;
    --warn: #fe640b;
    --warn-rgb: 254, 100, 11;
    --ink-rgb: 76, 79, 105;
    --coin: #f5c95c;
    --coin-rim: #c8962a;
    --coin-ink: #3a2a05;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--crust);
  color: rgb(var(--ink-rgb));
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  width: min(1120px, 100% - 32px);
  margin-inline: auto;
}

/* The mono kicker the app puts over its sections ("WHERE YOU LEFT OFF"). */
.kicker {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.55);
  margin: 0 0 14px;
}

/* --- header --- */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--crust) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.07);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  color: rgb(var(--ink-rgb));
}
.brand:hover {
  text-decoration: none;
}
.brand svg {
  width: 28px;
  height: 28px;
}
/* The app's rail name (appShell.module.css): lowercase, "fabel" in ink and
   "feuer" in the flame colour, so the name carries the fire. */
.brand {
  gap: 8px;
}
.wordmark {
  font-size: 1.15em;
  letter-spacing: -0.01em;
}
.wordmark .fire {
  color: var(--warn);
}
.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.langs {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  display: flex;
  gap: 2px;
}
.langs a {
  padding: 6px 7px;
  border-radius: var(--radius-md);
  color: rgba(var(--ink-rgb), 0.55);
}
.langs a:hover {
  text-decoration: none;
  color: rgb(var(--ink-rgb));
}
.langs a[aria-current] {
  background: var(--surface0);
  color: rgb(var(--ink-rgb));
}

/* --- buttons, as the app's primary and ghost buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font: 600 15px/1.2 var(--font-ui);
  background: var(--accent);
  color: var(--accent-on);
  border: 1px solid transparent;
}
.btn:hover {
  text-decoration: none;
  filter: brightness(1.06);
}
.btn.ghost {
  background: transparent;
  color: rgb(var(--ink-rgb));
  border-color: rgba(var(--ink-rgb), 0.18);
}
.btn.ghost:hover {
  background: rgba(var(--ink-rgb), 0.05);
}
.btn.small {
  padding: 7px 12px;
  font-size: 13.5px;
}

/* --- hero --- */

.hero {
  padding: 72px 0 40px;
  text-align: center;
}
.hero h1 {
  font: 400 clamp(40px, 7vw, 76px) / 1.05 var(--font-read);
  letter-spacing: -0.01em;
  margin: 0 auto 22px;
  max-width: 14ch;
  color: rgb(var(--ink-rgb));
}
.hero h1 em {
  color: var(--accent);
}
.hero .lede {
  font: 400 clamp(18px, 2.2vw, 21px) / 1.55 var(--font-read);
  max-width: 40ch;
  margin: 0 auto 32px;
  color: rgba(var(--ink-rgb), 0.82);
}
.cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.fine {
  margin-top: 16px;
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.5);
}

/* A screenshot sits in a window, the app's own panel edge around it. */
.shot {
  margin: 56px auto 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  background: var(--mantle);
  box-shadow:
    0 30px 80px -30px rgba(var(--accent-rgb), 0.35),
    0 12px 32px rgba(0, 0, 0, 0.25);
}
.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
}

/* --- story --- */

section {
  padding: 88px 0;
}
.story {
  border-top: 1px solid rgba(var(--ink-rgb), 0.07);
}
.prose {
  max-width: 640px;
  margin-inline: auto;
}
.prose h2,
.features h2,
.lights h2 {
  font: 500 clamp(30px, 4vw, 40px) / 1.15 var(--font-read);
  margin: 0 0 24px;
}
.prose p {
  font: 400 19px/1.7 var(--font-read);
  margin: 0 0 20px;
  color: rgba(var(--ink-rgb), 0.88);
}
/* Dialogue in a scene: a mauve rule down the left, as the app sets a line
   a character speaks. */
.prose blockquote {
  margin: 32px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--accent);
  font: italic 400 22px/1.55 var(--font-read);
  color: rgb(var(--ink-rgb));
}
.prose .sign {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warn);
}

/* --- features --- */

.features {
  background: var(--mantle);
  border-block: 1px solid rgba(var(--ink-rgb), 0.07);
}
.features > .wrap > header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 64px;
}
.features header p {
  font: 400 19px/1.6 var(--font-read);
  color: rgba(var(--ink-rgb), 0.78);
  margin: 0;
}
.row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 96px;
}
.row:last-of-type {
  margin-bottom: 0;
}
.row.flip {
  grid-template-columns: 7fr 5fr;
}
.row.flip .text {
  order: 2;
}
.row h3 {
  font: 600 24px/1.25 var(--font-ui);
  margin: 0 0 14px;
}
.row p {
  font: 400 18px/1.65 var(--font-read);
  color: rgba(var(--ink-rgb), 0.85);
  margin: 0;
}
.row .shot {
  margin: 0;
}
/* A turntable is portrait, so it gets a narrow frame centred in an even
   split rather than the wide screenshot column. */
.row.tall {
  grid-template-columns: 1fr 1fr;
}
.clip {
  justify-self: center;
  width: min(100%, 340px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  background: var(--mantle);
  box-shadow:
    0 30px 80px -30px rgba(var(--accent-rgb), 0.35),
    0 12px 32px rgba(0, 0, 0, 0.25);
}
.clip video {
  display: block;
  width: 100%;
  height: auto;
}
.row .text p + p {
  margin-top: 14px;
}
/* Before and after, side by side: the same turn with one garment less. */
.clips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.clips .clip {
  width: 100%;
  margin: 0;
}
.outfits {
  margin-bottom: 96px;
}
.outfits .text {
  max-width: 660px;
  margin: 0 auto 40px;
  text-align: center;
}
.outfits h3 {
  font: 600 24px/1.25 var(--font-ui);
  margin: 0 0 14px;
}
.outfits p {
  font: 400 18px/1.65 var(--font-read);
  color: rgba(var(--ink-rgb), 0.85);
  margin: 0;
}
.outfits .text p + p {
  margin-top: 14px;
}
.switcher {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  max-width: 920px;
  margin: 0 auto;
}
.stage {
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--mantle);
  box-shadow: 0 24px 60px -28px rgba(var(--accent-rgb), 0.35);
}
.stage {
  margin: 0;
}
.stage .now {
  padding: 10px 12px;
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.75);
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}
.outfits .more {
  margin: 28px auto 0;
  max-width: 560px;
  text-align: center;
  font: 400 15px/1.6 var(--font-read);
  color: rgba(var(--ink-rgb), 0.7);
}
.stage video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 576 / 1024;
}
.chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.chip {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--base);
  color: inherit;
  text-decoration: none;
}
.chip:hover {
  text-decoration: none;
  border-color: rgba(var(--accent-rgb), 0.5);
}
.chip:focus-visible,
.chip.on {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chip img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}
.chip span {
  padding: 9px 10px 10px;
  font: 500 11px/1.35 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.7);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.chip.on span {
  color: rgb(var(--ink-rgb));
}
.clip figcaption {
  padding: 9px 12px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.6);
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 96px;
}
.fact {
  background: var(--base);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: var(--radius-xl);
  padding: 22px 22px 24px;
}
.fact h3 {
  font: 600 16px/1.3 var(--font-ui);
  margin: 0 0 8px;
}
.fact p {
  margin: 0;
  font-size: 15px;
  color: rgba(var(--ink-rgb), 0.75);
}
.tag {
  display: inline-block;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  padding: 4px 6px;
  border-radius: 3px;
  margin-bottom: 14px;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
}
.tag.warn {
  background: rgba(var(--warn-rgb), 0.18);
  color: var(--warn);
}

/* --- keeping the lights on --- */

.lights .card {
  max-width: 720px;
  margin-inline: auto;
  background: var(--base);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: var(--radius-xl);
  padding: 44px 44px 40px;
  text-align: center;
}
.lights p {
  font: 400 18px/1.65 var(--font-read);
  color: rgba(var(--ink-rgb), 0.86);
  margin: 0 auto 18px;
  max-width: 54ch;
}
/* The app's coin (#358): yellow, which nothing else uses, so money reads
   as money. */
.coin {
  width: 44px;
  height: 44px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--coin);
  box-shadow: inset 0 0 0 3px var(--coin-rim);
  color: var(--coin-ink);
  font: 600 20px/1 var(--font-ui);
}

/* --- footer --- */

footer {
  border-top: 1px solid rgba(var(--ink-rgb), 0.07);
  padding: 32px 0 48px;
  font-size: 14px;
  color: rgba(var(--ink-rgb), 0.55);
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
}
footer nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
}
footer a {
  color: rgba(var(--ink-rgb), 0.7);
}

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

.legal {
  padding: 64px 0 88px;
}
.legal h1 {
  font: 500 40px/1.15 var(--font-read);
  margin: 0 0 32px;
}
.legal h2 {
  font: 600 18px/1.3 var(--font-ui);
  margin: 36px 0 10px;
}
.legal p,
.legal li {
  font: 400 17px/1.65 var(--font-read);
  color: rgba(var(--ink-rgb), 0.86);
}
.legal address {
  font: 400 17px/1.65 var(--font-read);
}
mark.todo {
  background: rgba(var(--warn-rgb), 0.22);
  color: var(--warn);
  padding: 0 4px;
  border-radius: 3px;
}

/* --- narrow --- */

@media (max-width: 820px) {
  section {
    padding: 64px 0;
  }
  .hero {
    padding-top: 48px;
  }
  .row,
  .row.flip,
  .row.tall {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 64px;
  }
  .row.flip .text {
    order: 0;
  }
  .outfits {
    margin-bottom: 64px;
  }
  .switcher {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
  }
  .stage {
    width: min(100%, 300px);
  }
  .chips {
    width: 100%;
  }
  .facts {
    grid-template-columns: 1fr;
    margin-top: 64px;
  }
  .lights .card {
    padding: 32px 20px;
  }
  .top .btn {
    display: none;
  }
  footer nav {
    margin-left: 0;
  }
}

/* .prose p and .features header p would otherwise set a kicker in the
   reading face. */
.prose .kicker,
.features header .kicker {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.55);
  margin: 0 0 14px;
}

/* --- a line you can hear --- */

.voice {
  margin: 28px 0 0;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: start;
  background: var(--base);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: var(--radius-xl);
}
.voice blockquote {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font: 400 17px/1.55 var(--font-read);
  color: rgb(var(--ink-rgb));
}
.voice figcaption {
  grid-column: 2;
  margin-top: 8px;
  font: 400 11.5px/1.4 var(--font-mono);
  letter-spacing: 0.04em;
  color: rgba(var(--ink-rgb), 0.55);
}
.voice .who {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.play {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--accent);
  display: grid;
  place-items: center;
}
.play:hover {
  filter: brightness(1.06);
}
/* A triangle, and two bars while it plays, drawn in the button's ink. */
.play span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--accent-on);
}
.play[data-playing] span {
  margin-left: 0;
  width: 12px;
  height: 15px;
  border: none;
  border-inline: 4px solid var(--accent-on);
}

/* --- story cards --- */

.stories {
  margin-top: 96px;
}
.stories .text {
  max-width: 620px;
  margin-bottom: 28px;
}
.stories h3 {
  font: 600 24px/1.25 var(--font-ui);
  margin: 0 0 14px;
}
.stories .text p {
  font: 400 18px/1.65 var(--font-read);
  color: rgba(var(--ink-rgb), 0.85);
  margin: 0;
}
.story-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.story-card {
  display: flex;
  flex-direction: column;
  background: var(--base);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.story-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.story-card .body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.story-card h4 {
  font: 500 24px/1.2 var(--font-read);
  margin: 0 0 10px;
}
.story-card p {
  font: 400 16px/1.6 var(--font-read);
  color: rgba(var(--ink-rgb), 0.82);
  margin: 0 0 16px;
}
.story-card .cast {
  margin-top: auto;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

/* --- GPU, under the costs --- */

.gpu {
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}
.gpu h3 {
  font: 600 18px/1.3 var(--font-ui);
  margin: 0 0 10px;
}
.gpu h4 {
  font: 600 16px/1.3 var(--font-ui);
  margin: 26px 0 6px;
}
/* The flame from the logo, in the warm colour, instead of a disc: the
   centred text left the default bullets stranded at the card's edge. */
.gpu ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.gpu li {
  margin: 8px 0;
}
.gpu li::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 1em;
  margin-right: 0.55em;
  vertical-align: -0.12em;
  background: var(--warn);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='50 10 160 230'%3E%3Cpath d='M136 14C142 58 196 86 200 148C204 200 170 236 128 236C86 236 54 204 56 158C58 118 80 96 96 72C94 100 102 116 114 120C132 90 138 54 136 14Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='50 10 160 230'%3E%3Cpath d='M136 14C142 58 196 86 200 148C204 200 170 236 128 236C86 236 54 204 56 158C58 118 80 96 96 72C94 100 102 116 114 120C132 90 138 54 136 14Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- contact --- */

.contact {
  border-top: 1px solid rgba(var(--ink-rgb), 0.07);
}
.contact form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}
.contact label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14.5px;
  color: rgba(var(--ink-rgb), 0.76);
}
.contact .opt {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: rgba(var(--ink-rgb), 0.45);
}
.contact input,
.contact select,
.contact textarea {
  font: 400 16px/1.4 var(--font-ui);
  color: rgb(var(--ink-rgb));
  background: var(--base);
  border: 1px solid rgba(var(--ink-rgb), 0.15);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  outline: none;
}
.contact textarea {
  resize: vertical;
  font-family: var(--font-read);
  font-size: 17px;
}
.contact input:focus,
.contact select:focus,
.contact textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
}
.contact .note,
.prose .contact .note {
  font: 400 14px/1.5 var(--font-ui);
  color: rgba(var(--ink-rgb), 0.55);
  margin: 0;
}
.contact .btn {
  align-self: flex-start;
  border: none;
  cursor: pointer;
}
/* The honeypot: a field people never see and bots fill in. */
.trap {
  position: absolute;
  left: -9999px;
}

@media (max-width: 820px) {
  .story-cards {
    grid-template-columns: 1fr;
  }
  .stories {
    margin-top: 64px;
  }
}

/* --- the guide (guide/build.mjs) --- */

.guide {
  padding: 56px 0 88px;
}
.guide-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 760px);
  gap: 56px;
  align-items: start;
}
.guide-nav {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14.5px;
}
.guide-nav a {
  color: rgba(var(--ink-rgb), 0.7);
  padding: 5px 10px;
  border-radius: var(--radius-md);
}
.guide-nav a:hover {
  color: rgb(var(--ink-rgb));
  background: rgba(var(--ink-rgb), 0.06);
  text-decoration: none;
}
.guide-nav a[aria-current] {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
}
.guide-body h1 {
  font: 500 clamp(32px, 4.5vw, 44px) / 1.15 var(--font-read);
  margin: 0 0 24px;
}
.guide-body h2 {
  font: 600 19px/1.3 var(--font-ui);
  margin: 44px 0 10px;
}
.guide-body p,
.guide-body li {
  font: 400 18px/1.65 var(--font-read);
  color: rgba(var(--ink-rgb), 0.88);
}
.guide-body p {
  margin: 0 0 16px;
}
.guide-body li {
  margin-bottom: 8px;
}
.guide-body b {
  font-weight: 500;
  color: rgb(var(--ink-rgb));
}
.guide-body .lede {
  font-size: 21px;
  color: rgb(var(--ink-rgb));
}
.gshot {
  margin: 28px 0 32px;
}
.gshot img,
.gshot video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  background: var(--mantle);
  box-shadow: 0 16px 40px -20px rgba(var(--accent-rgb), 0.35);
}
.gshot.narrow img {
  aspect-ratio: auto;
  max-width: 420px;
  margin: 0 auto;
}
.gshot.narrow figcaption {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.gshot figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(var(--ink-rgb), 0.6);
}
.guide-cards {
  list-style: none;
  padding: 0;
  margin: 28px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.guide-cards li {
  margin: 0;
}
.guide-cards a {
  display: block;
  height: 100%;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  background: var(--base);
  font: 400 15px/1.5 var(--font-ui);
  color: rgba(var(--ink-rgb), 0.7);
}
.guide-cards a:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  text-decoration: none;
}
.guide-cards b {
  display: block;
  margin-bottom: 4px;
  font: 600 16px/1.3 var(--font-ui);
  color: var(--accent);
}
.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
}
.pager a {
  display: flex;
  flex-direction: column;
  font: 500 16px/1.3 var(--font-ui);
}
.pager .next {
  text-align: right;
  margin-left: auto;
}
.pager span {
  font: 500 11px/1.6 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.5);
}

@media (max-width: 820px) {
  .guide {
    padding-top: 32px;
  }
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .guide-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .guide-nav .kicker {
    width: 100%;
  }
  .guide-cards {
    grid-template-columns: 1fr;
  }
}

/* The guide link in the header, beside the language switch. */
.navlink {
  font-size: 14.5px;
  color: rgba(var(--ink-rgb), 0.75);
}
.navlink:hover {
  color: rgb(var(--ink-rgb));
}