/* ==========================================================================
   Battle Runes of Metalaria

   A single dark page about one game. The palette is the game's own: a black
   table, an ember rim light coming off the stage, gold for the logo and the
   money, and the four band colours used as accents wherever a section belongs
   to a band.

   Standalone: no framework, no utility classes, so the sheet carries its own
   reset. Section order matches index.html.
   ========================================================================== */

/* ---------- Reset ------------------------------------------------------- */

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

* {
  margin: 0;
  padding: 0;
}

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

button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden],
.hidden {
  display: none !important;
}

/* ---------- Tokens ------------------------------------------------------ */

:root {
  --font-display: "Anton", "Haettenschweiler", "Segoe UI", sans-serif;
  --font-sans: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --ink: #08070b;
  --ink-2: #0e0c12;
  --ink-3: #15121b;
  --ink-4: #1f1a27;

  --text: #ece5d8;
  --muted: #9a9086;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --ember: #ff5a1f;
  --ember-light: #ff8548;
  --ember-deep: #c73c0b;
  --gold: #f2c14e;
  --gold-light: #ffdd85;

  --thunder: #52a9ff;
  --serpent: #4ec46e;
  --pyre: #e8402f;
  --tyr: #f4c22b;

  --shell: 1240px;
  --nav-h: 76px;
  --shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.6);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  background-color: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

/* The stage light. A wide ember wash across the top of the page, the same
   rim light the game throws across the table, fading out before the fold. */
body::before {
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255, 90, 31, 0.22), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 5%, rgba(242, 193, 78, 0.12), transparent 70%);
  content: "";
  height: 900px;
  inset: 0 0 auto;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

/* Plank grain, so every dark section reads as the same table. */
body::after {
  background-image: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.022) 0 1px,
      transparent 1px 84px);
  content: "";
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

main {
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.02;
  text-transform: uppercase;
}

p {
  text-wrap: pretty;
}

b, strong {
  color: #fff;
  font-weight: 600;
}

em {
  color: var(--gold-light);
  font-style: italic;
}

::selection {
  background: var(--ember);
  color: #fff;
}

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

.shell {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .shell {
    padding-inline: 32px;
  }
}

.skip-link {
  background: var(--ember);
  color: #fff;
  font-weight: 700;
  left: 12px;
  padding: 10px 16px;
  position: fixed;
  top: -100px;
  transition: top 0.2s;
  z-index: 200;
}

.skip-link:focus {
  top: 12px;
}

/* ---------- Shared bits ------------------------------------------------- */

/* Small mono label with a rune bullet, sits above every section heading. */
.kicker {
  align-items: center;
  color: var(--ember-light);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.kicker::before {
  background: currentColor;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  content: "";
  height: 10px;
  width: 11px;
}

.kicker--gold { color: var(--gold); }
.kicker--ember { color: var(--ember); }
.kicker--ink { color: #2a1405; }

.section {
  padding-block: 88px;
  position: relative;
}

@media (min-width: 768px) {
  .section {
    padding-block: 118px;
  }
}

.section--tight {
  padding-block: 56px;
}

/* The alternate section is one shade up plus hairlines, so the page reads as
   stacked planks rather than one endless void. */
.section--alt {
  background: linear-gradient(180deg, var(--ink-2), rgba(14, 12, 18, 0));
  border-top: 1px solid var(--line);
}

.sechead {
  margin-bottom: 56px;
  max-width: 62ch;
}

.section-title {
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  margin-top: 16px;
}

.subtitle {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin-top: 14px;
}

.subhead {
  border-bottom: 1px solid var(--line);
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.18em;
  margin-bottom: 24px;
  margin-top: 56px;
  padding-bottom: 12px;
}

.subhead:first-of-type {
  margin-top: 0;
}

.lede {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.68;
  margin-top: 18px;
  max-width: 64ch;
}

.lede--tight {
  margin-top: 14px;
}

.subnote {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 26px;
  max-width: 72ch;
}

.subnote--center {
  margin-inline: auto;
  margin-top: 44px;
  text-align: center;
}

/* Reveal on scroll. Elements start slightly low and fade up once. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

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

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  align-items: center;
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  gap: 10px;
  justify-content: center;
  letter-spacing: 0.12em;
  padding: 14px 22px;
  text-transform: uppercase;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn svg {
  flex: none;
  height: 18px;
  width: 18px;
}

.btn--sm {
  font-size: 11.5px;
  padding: 10px 16px;
}

/* Every variant below paints its own background, so the disabled state has to
   drain the colour rather than add any: a button that still looks pressable is
   worse than one that is plainly out of order. */
.btn:disabled {
  background: var(--ink-4);
  border-color: var(--line-strong);
  box-shadow: none;
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

.btn--steam {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 4px 4px 0 #56360a;
  color: #17100a;
}

.btn--steam:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  box-shadow: 6px 6px 0 #56360a;
  transform: translate(-2px, -2px);
}

.btn--steam:active {
  box-shadow: 0 0 0 #56360a;
  transform: translate(4px, 4px);
}

.btn--ember {
  background: var(--ember);
  border-color: var(--ember);
  box-shadow: 4px 4px 0 #5e1c02;
  color: #fff;
}

.btn--ember:hover {
  background: var(--ember-light);
  border-color: var(--ember-light);
  box-shadow: 6px 6px 0 #5e1c02;
  transform: translate(-2px, -2px);
}

.btn--ember:active {
  box-shadow: 0 0 0 #5e1c02;
  transform: translate(4px, 4px);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--ember);
  color: #fff;
}

.btn--dark {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  color: #fff;
}

.btn--dark:hover {
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
  transform: translate(-2px, -2px);
}

.btn--outline {
  background: transparent;
  border-color: rgba(20, 10, 4, 0.5);
  color: #21100a;
}

.btn--outline:hover {
  background: rgba(20, 10, 4, 0.1);
  border-color: #21100a;
}

.btn--block {
  width: 100%;
}

/* Chunky card ------------------------------------------------------------ */

.card {
  background: var(--ink-2);
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-hard);
  position: relative;
}

/* ---------- Launch bar -------------------------------------------------- */

.launchbar {
  background: linear-gradient(90deg, var(--ember-deep), var(--ember) 45%, var(--gold));
  color: #1b0e03;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.launchbar a {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  padding: 10px 20px;
  text-align: center;
}

.launchbar a:hover .launchbar__cta {
  text-decoration-thickness: 3px;
}

.launchbar__tag {
  background: #1b0e03;
  color: var(--gold);
  padding: 3px 8px;
}

.launchbar__cta {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Nav --------------------------------------------------------- */

.nav {
  backdrop-filter: blur(14px);
  background: rgba(8, 7, 11, 0.86);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__inner {
  align-items: center;
  display: flex;
  gap: 20px;
  height: var(--nav-h);
  justify-content: space-between;
}

.nav__logo {
  flex: none;
}

.nav__logo img {
  height: 46px;
  width: auto;
}

.nav__links {
  display: none;
  gap: 2px;
}

@media (min-width: 1100px) {
  .nav__links {
    display: flex;
  }
}

.nav__link {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 10px 10px;
  position: relative;
  text-transform: uppercase;
  transition: color 0.15s;
}

.nav__link:hover {
  color: var(--text);
}

.nav__link::after {
  background: var(--ember);
  bottom: 4px;
  content: "";
  height: 2px;
  left: 10px;
  position: absolute;
  right: 10px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}

.nav__link:hover::after {
  transform: scaleX(1);
}

/* The one link in the bar that leaves this page, and the only thing here you
   can act on rather than read about. Coloured so it is not lost among nine
   section anchors. */
.nav__link--demo {
  color: var(--ember);
}

.nav__link--demo:hover {
  color: var(--ember-light);
}

.nav__actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.nav__cta {
  display: none;
}

@media (min-width: 640px) {
  .nav__cta {
    display: inline-flex;
  }
}

.nav__toggle {
  align-items: center;
  border: 2px solid var(--line-strong);
  color: var(--text);
  cursor: pointer;
  display: flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.nav__toggle:hover {
  border-color: var(--ember);
}

@media (min-width: 1100px) {
  .nav__toggle {
    display: none;
  }
}

.nav__toggle svg {
  height: 20px;
  width: 20px;
}

.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }

.nav__mobile {
  border-top: 1px solid var(--line);
  display: none;
  padding: 12px 0 20px;
}

.nav__mobile[data-open="true"] {
  display: block;
}

@media (min-width: 1100px) {
  .nav__mobile[data-open="true"] {
    display: none;
  }
}

.nav__mobile a {
  border-bottom: 1px solid var(--line);
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 14px 4px;
  text-transform: uppercase;
}

.nav__mobile a:last-child {
  border-bottom: 0;
}

/* ---------- Hero -------------------------------------------------------- */

.hero {
  padding-block: 56px 72px;
  position: relative;
}

@media (min-width: 1024px) {
  .hero {
    padding-block: 76px 96px;
  }
}

.hero__grid {
  align-items: center;
  display: grid;
  gap: 56px;
}

@media (min-width: 1024px) {
  .hero__grid {
    gap: 56px;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}

.hero__logo {
  margin: 22px 0 0;
}

.hero__logo img {
  height: auto;
  width: min(100%, 520px);
}

.hero__sub {
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.62;
  margin-top: 24px;
  max-width: 54ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero__meta {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 34px;
  padding-top: 24px;
}

.hero__meta div {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__meta strong {
  color: var(--gold);
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 4px;
}

/* Countdown -------------------------------------------------------------- */

.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.countdown__unit {
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  min-width: 74px;
  padding: 10px 12px 8px;
  text-align: center;
}

.countdown__unit b {
  color: var(--ember-light);
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.countdown__unit span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.countdown--out {
  background: var(--gold);
  border: 0;
  color: #17100a;
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 14px 18px;
  text-transform: uppercase;
  width: max-content;
}

/* ---------- Chain board (hero graphic) ---------------------------------- */

/* A live chain detonation. The board is drawn flat and tipped away from the
   viewer with perspective, the way the game's camera looks down the table. */

.chainfig {
  margin: 0;
  position: relative;
}

.chainfig__frame {
  perspective: 1000px;
  position: relative;
}

.chainfig__frame::before {
  background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(255, 90, 31, 0.4), transparent 68%);
  content: "";
  filter: blur(28px);
  inset: -8%;
  position: absolute;
}

.chainboard {
  aspect-ratio: 1;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, 1fr);
  margin-inline: auto;
  max-width: 470px;
  position: relative;
  transform: rotateX(40deg);
  transform-origin: 50% 62%;
  width: 100%;
}

.cbcell {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  position: relative;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Cells the chain can reach are painted in the owner's colour. */
.cbcell[data-owner="you"] { --team: var(--ember); }
.cbcell[data-owner="foe"] { --team: var(--serpent); }

.cbcell[data-owner] {
  background: color-mix(in srgb, var(--team) 22%, transparent);
  border-color: color-mix(in srgb, var(--team) 55%, transparent);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45), inset 0 0 20px color-mix(in srgb, var(--team) 32%, transparent);
}

/* Stack height, drawn as a little pile of rune slabs. */
.cbcell__stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
}

.cbcell__rune {
  background: var(--team, var(--muted));
  box-shadow: 0 0 10px color-mix(in srgb, var(--team, #fff) 60%, transparent);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  height: 7px;
  width: 26px;
}

@media (min-width: 480px) {
  .cbcell__rune {
    height: 8px;
    width: 32px;
  }
}

/* The cell the player completes: it pulses before it goes off. */
.cbcell.is-seed {
  animation: seed-pulse 1s ease-in-out infinite;
}

/* A cell the chain is paying out, right now. */
.cbcell.is-firing {
  background: color-mix(in srgb, var(--team) 62%, #fff 12%);
  border-color: #fff;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45), 0 0 34px color-mix(in srgb, var(--team) 85%, transparent);
  transform: translateZ(14px);
}

/* Cells already paid out and cleared. */
.cbcell.is-spent {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45);
}

.cbcell.is-spent .cbcell__stack {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* The x2, x3, x4 receipt that floats off a paying cell. */
.cbcell__mult {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 20px;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
  top: 50%;
  transform: translate(-50%, -50%);
}

.cbcell.is-firing .cbcell__mult {
  animation: mult-pop 0.9s ease-out forwards;
}

@keyframes seed-pulse {
  0%, 100% { box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45), inset 0 0 18px color-mix(in srgb, var(--team) 34%, transparent); }
  50% { box-shadow: 0 7px 0 rgba(0, 0, 0, 0.45), inset 0 0 26px color-mix(in srgb, var(--team) 70%, transparent), 0 0 26px color-mix(in srgb, var(--team) 55%, transparent); }
}

@keyframes mult-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}

.chainfig figcaption {
  margin-top: 26px;
  text-align: center;
}

.chainfig__label {
  color: var(--gold);
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  min-height: 1.4em;
  text-transform: uppercase;
}

.chainfig__hint {
  color: var(--muted);
  display: block;
  font-size: 13.5px;
  margin-inline: auto;
  margin-top: 8px;
  max-width: 38ch;
}

@media (prefers-reduced-motion: reduce) {
  .cbcell.is-seed { animation: none; }
  .cbcell.is-firing .cbcell__mult { animation: none; opacity: 1; }
}

/* ---------- Rail strip -------------------------------------------------- */

.railstrip {
  background: var(--ink-2);
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: 13px;
}

.railstrip__track {
  animation: rail 34s linear infinite;
  display: flex;
  gap: 26px;
  width: max-content;
}

.railstrip span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.railstrip i {
  background: var(--ember);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  flex: none;
  height: 9px;
  width: 10px;
}

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

@media (prefers-reduced-motion: reduce) {
  .railstrip__track { animation: none; }
}

/* ---------- Trailer ----------------------------------------------------- */

.trailer-section {
  padding-top: 64px;
}

.media {
  overflow: hidden;
}

.ytlite {
  aspect-ratio: 16 / 9;
  display: block;
  position: relative;
}

.ytlite img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ytlite::after {
  background: linear-gradient(180deg, rgba(8, 7, 11, 0.1), rgba(8, 7, 11, 0.45));
  content: "";
  inset: 0;
  position: absolute;
  transition: background-color 0.2s ease;
}

.ytlite__play {
  background: var(--ember);
  border: 3px solid #fff;
  height: 74px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.16s ease, background-color 0.16s ease;
  width: 74px;
  z-index: 2;
}

.ytlite__play::before {
  border-bottom: 15px solid transparent;
  border-left: 25px solid #fff;
  border-top: 15px solid transparent;
  content: "";
  height: 0;
  left: 54%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
}

.ytlite:hover .ytlite__play {
  background: var(--gold);
  transform: translate(-50%, -50%) scale(1.08);
}

.media iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  height: auto;
  width: 100%;
}

.media__bar {
  align-items: center;
  border-top: 2px solid var(--line-strong);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding: 16px 20px;
}

.media__bar p {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Browser demo band ------------------------------------------- */

/* The band that sends people to /demo/. Deliberately a panel and not an embed:
   the itch.io player is a large download, and nothing on this page is allowed
   to start it. */
.demoband {
  align-items: center;
  background:
    radial-gradient(ellipse 70% 140% at 100% 50%, rgba(255, 90, 31, 0.15), transparent 70%),
    var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  padding: 34px 30px;
}

.demoband > div {
  min-width: min(38ch, 100%);
}

.demoband__actions {
  flex: none;
}

.demoband__meta {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-top: 14px;
  max-width: 30ch;
  text-transform: uppercase;
}

/* ---------- Basics: the loop -------------------------------------------- */

.loop {
  display: grid;
  gap: 18px;
}

@media (min-width: 700px) {
  .loop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .loop {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.loop__step {
  padding: 26px 24px 28px;
}

.loop__num {
  color: var(--ember);
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  opacity: 0.55;
}

.loop__step h3 {
  font-size: 20px;
  margin: 12px 0 10px;
}

.loop__step p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.66;
}

/* Fact strip ------------------------------------------------------------- */

.factstrip {
  display: grid;
  gap: 14px;
  margin-top: 40px;
}

@media (min-width: 620px) {
  .factstrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .factstrip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fact {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ember);
  display: grid;
  gap: 2px 14px;
  grid-template-columns: auto 1fr;
  padding: 16px 18px;
}

.fact svg {
  color: var(--ember);
  grid-row: span 2;
  height: 26px;
  width: 26px;
}

.fact b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fact span {
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Runes ------------------------------------------------------- */

.runegrid {
  display: grid;
  gap: 18px;
}

@media (min-width: 620px) {
  .runegrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .runegrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.runegrid:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.runecard {
  overflow: hidden;
  padding: 26px 24px 28px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.runecard::before {
  background: var(--accent);
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
}

.runecard:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.6);
  transform: translate(-3px, -3px);
}

.runecard__glyph {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  display: flex;
  height: 56px;
  justify-content: center;
  margin-bottom: 16px;
  width: 56px;
}

.runecard__glyph svg {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 70%, transparent));
  height: 30px;
  width: 30px;
}

.runecard__band {
  color: var(--accent);
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.runecard h4 {
  font-size: 21px;
  margin-bottom: 10px;
}

.runecard p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.66;
}

/* Rules list ------------------------------------------------------------- */

.rules {
  margin-top: 44px;
  padding: 30px 28px 32px;
}

.rules h3 {
  color: var(--gold);
  font-size: 20px;
  margin-bottom: 18px;
}

.rules__list {
  display: grid;
  gap: 12px 32px;
}

@media (min-width: 860px) {
  .rules__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rules__list li {
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
  padding-left: 14px;
}

/* ---------- Split layout ------------------------------------------------ */

.split {
  align-items: center;
  display: grid;
  gap: 48px;
}

@media (min-width: 960px) {
  .split {
    gap: 64px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 960px) {
  .split--reverse > :first-child {
    order: 2;
  }
}

.split + .split,
.split + .scaler {
  margin-top: 64px;
}

/* Ticked list ------------------------------------------------------------ */

.ticks {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.ticks li {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.66;
  padding-left: 26px;
  position: relative;
}

.ticks li::before {
  background: var(--gold);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  content: "";
  height: 9px;
  left: 0;
  position: absolute;
  top: 9px;
  width: 10px;
}

/* ---------- Mini board -------------------------------------------------- */

.boardfig {
  margin: 0;
}

.miniboard {
  background: var(--ink-2);
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-hard);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(5, 1fr);
  padding: 14px;
}

.mb {
  align-items: center;
  aspect-ratio: 1;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--muted);
  display: flex;
  font-family: var(--font-display);
  font-size: clamp(12px, 2.4vw, 17px);
  justify-content: center;
}

.mb[data-bonus="pos"] {
  border-color: color-mix(in srgb, var(--serpent) 45%, transparent);
  color: var(--serpent);
}

.mb[data-bonus="neg"] {
  border-color: color-mix(in srgb, var(--pyre) 45%, transparent);
  color: var(--pyre);
}

.mb[data-bonus="x2"],
.mb[data-bonus="x3"] {
  background: linear-gradient(165deg, rgba(242, 193, 78, 0.16), rgba(242, 193, 78, 0.04));
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  color: var(--gold-light);
}

.mb--hole {
  background: repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.03) 0 5px,
      transparent 5px 10px);
  border-color: transparent;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.08);
}

.boardfig figcaption {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 16px;
}

/* Scaler ----------------------------------------------------------------- */

.scaler {
  display: grid;
  gap: 18px;
}

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

.scaler__item {
  border-top: 3px solid var(--ember);
  padding-top: 18px;
}

.scaler__size {
  color: var(--gold);
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
}

.scaler__item b {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  margin: 8px 0 8px;
  text-transform: uppercase;
}

.scaler__item p {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.62;
}

/* ---------- Scoring: chain cards ---------------------------------------- */

.chaincards {
  display: grid;
  gap: 18px;
}

@media (min-width: 700px) {
  .chaincards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .chaincards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.chaincard {
  padding: 26px 24px 28px;
}

.chaincard__icon {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  display: flex;
  height: 52px;
  justify-content: center;
  margin-bottom: 16px;
  width: 52px;
}

.chaincard__icon svg {
  height: 26px;
  width: 26px;
}

.chaincard h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.chaincard p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.66;
}

/* Callout ---------------------------------------------------------------- */

.callout {
  display: grid;
  margin-top: 44px;
  overflow: hidden;
}

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

.callout__body {
  padding: 34px 32px 36px;
}

.callout__body h3 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 14px 0 14px;
}

.callout__body p {
  color: var(--muted);
  line-height: 1.7;
  max-width: 52ch;
}

.callout img {
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  width: 100%;
}

/* ---------- Max power --------------------------------------------------- */

.powergrid {
  display: grid;
  gap: 18px;
}

@media (min-width: 700px) {
  .powergrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .powergrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.power {
  overflow: hidden;
  padding: 26px 24px 28px;
}

.power::before {
  background: linear-gradient(90deg, var(--accent), transparent);
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.power__band {
  color: var(--accent);
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.power h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.power p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.66;
}

/* ---------- Game modes -------------------------------------------------- */

.modes {
  display: grid;
  gap: 20px;
}

@media (min-width: 980px) {
  .modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mode {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 30px 28px 32px;
}

.mode::before {
  background: var(--accent);
  content: "";
  height: 5px;
  inset: 0 0 auto;
  position: absolute;
}

.mode__head {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: auto 1fr;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.mode__icon {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  display: flex;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.mode__icon svg {
  height: 28px;
  width: 28px;
}

.mode__tag {
  color: var(--accent);
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.mode h3 {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
}

.mode__pitch {
  color: var(--gold);
  font-size: 0.95rem;
  font-style: italic;
  margin-top: 8px;
}

.mode > p {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
  margin-bottom: 14px;
}

.mode__rules {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

.mode__rules li {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  padding-left: 22px;
  position: relative;
}

.mode__rules li::before {
  background: var(--accent);
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  top: 8px;
  transform: rotate(45deg);
  width: 8px;
}

/* ---------- Bands ------------------------------------------------------- */

.bands {
  display: grid;
  gap: 20px;
}

@media (min-width: 980px) {
  .bands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.band {
  display: grid;
  overflow: hidden;
}

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

.band::before {
  background: var(--accent);
  content: "";
  height: 100%;
  inset: 0 auto 0 0;
  position: absolute;
  width: 4px;
  z-index: 2;
}

.band__emblem {
  background: #0b0910;
  height: 100%;
  min-height: 168px;
  object-fit: cover;
  width: 100%;
}

.band__body {
  padding: 26px 26px 28px;
}

.band h3 {
  font-size: 26px;
}

.band__tagline {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 8px 0 14px;
}

.band__blurb {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.68;
}

.band__stats {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
}

.band__stats > div {
  display: grid;
  gap: 2px 14px;
  grid-template-columns: 92px minmax(0, 1fr);
}

.band__stats dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  padding-top: 3px;
  text-transform: uppercase;
}

.band__stats dd {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.88rem;
  gap: 8px;
  line-height: 1.5;
  min-width: 0;
}

.band__deal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.band__deal li:not(:last-child)::after {
  color: var(--muted);
  content: "\2192";
  margin: 0 0.35em;
}

.band__stats dd svg {
  color: var(--accent);
  flex: none;
  height: 16px;
  width: 16px;
}

.band__listen {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.14em;
  margin-top: 16px;
  padding: 10px 14px;
  text-transform: uppercase;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.band__listen svg {
  flex: none;
  height: 16px;
  width: 16px;
}

.band__listen:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
  color: var(--text);
}

/* Deal note -------------------------------------------------------------- */

.dealnote {
  align-items: start;
  display: grid;
  gap: 22px 44px;
  margin-top: 24px;
  padding: 32px 30px 34px;
}

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

.dealnote h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  margin-top: 12px;
}

.dealnote p {
  color: var(--muted);
  line-height: 1.7;
}

/* ---------- Campaign ---------------------------------------------------- */

.season {
  display: grid;
  gap: 18px;
  margin-bottom: 64px;
}

@media (min-width: 700px) {
  .season {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .season {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.seasoncard {
  padding: 26px 24px 28px;
}

.seasoncard__num {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 0.9;
  margin-bottom: 12px;
}

.seasoncard h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.seasoncard p {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.64;
}

.campaignshot {
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-hard);
  height: auto;
  width: 100%;
}

/* ---------- Ways to play ------------------------------------------------ */

.ways {
  display: grid;
  gap: 18px;
}

@media (min-width: 700px) {
  .ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .ways {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.way {
  padding: 26px 24px 28px;
}

.way--wide {
  grid-column: 1 / -1;
}

.way__icon {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent);
  display: flex;
  height: 52px;
  justify-content: center;
  margin-bottom: 16px;
  width: 52px;
}

.way__icon svg {
  height: 26px;
  width: 26px;
}

.way h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.way p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.66;
}

.way p + p {
  margin-top: 12px;
}

.way--wide p {
  max-width: 78ch;
}

.way__meta {
  border-top: 1px solid var(--line);
  color: var(--accent) !important;
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  letter-spacing: 0.14em;
  margin-top: 18px !important;
  padding-top: 14px;
  text-transform: uppercase;
}

/* ---------- Facts ------------------------------------------------------- */

.stats {
  border-block: 1px solid var(--line-strong);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat {
  padding: 26px 8px;
  position: relative;
  text-align: center;
}

.stat::after {
  background: var(--line);
  content: "";
  inset: 18px 0 18px auto;
  position: absolute;
  width: 1px;
}

.stat:last-child::after {
  display: none;
}

@media (max-width: 759px) {
  .stat:nth-child(2n)::after {
    display: none;
  }
}

.stat b {
  color: var(--gold);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 400;
  line-height: 1;
}

.stat span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}

.platform {
  align-items: center;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  gap: 9px;
  letter-spacing: 0.1em;
  padding: 10px 15px;
  text-transform: uppercase;
}

.platform svg {
  color: var(--ember);
  height: 17px;
  width: 17px;
}

/* ---------- CTA --------------------------------------------------------- */

.cta {
  background: linear-gradient(120deg, var(--ember-deep), var(--ember) 42%, var(--gold));
  color: #1b0d03;
  padding-block: 76px;
  position: relative;
}

.cta::before {
  background-image: repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.06) 0 2px,
      transparent 2px 12px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.cta__inner {
  position: relative;
  text-align: center;
}

.cta h2 {
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  margin-top: 14px;
}

.cta p {
  font-size: 1.05rem;
  line-height: 1.62;
  margin: 18px auto 0;
  max-width: 52ch;
  opacity: 0.82;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
}

/* ---------- Support ----------------------------------------------------- */

.support__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1000px) {
  .support__grid {
    align-items: start;
    gap: 56px;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  }
}

.support__points {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.support__point {
  border-left: 3px solid var(--ember);
  padding-left: 18px;
}

.support__point b {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.support__point span {
  color: var(--muted);
  display: block;
  font-size: 15px;
  line-height: 1.6;
  margin-top: 6px;
}

.form {
  background: var(--ink-2);
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-hard);
  padding: 28px;
}

@media (min-width: 768px) {
  .form {
    padding: 38px;
  }
}

.field {
  display: block;
  margin-bottom: 22px;
}

.field > span {
  color: var(--text);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  background: var(--ink);
  border: 2px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 13px 15px;
  transition: border-color 0.15s ease;
  width: 100%;
}

.field textarea {
  min-height: 132px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #6d6459;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ember);
  outline: none;
}

/* The native arrow does not take a colour, so the control draws its own. */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9086' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 18px;
  padding-right: 44px;
}

.field select option {
  background: var(--ink);
  color: var(--text);
}

.form__note {
  color: var(--ember-light);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 16px;
  text-align: center;
}

.form__success {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 0;
  text-align: center;
}

.form__success svg {
  color: var(--serpent);
  height: 48px;
  width: 48px;
}

.form__success h3 {
  font-size: 1.6rem;
}

.form__success p {
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- Footer ------------------------------------------------------ */

.foot {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-block: 52px 34px;
}

.foot__inner {
  display: grid;
  gap: 32px;
}

@media (min-width: 860px) {
  .foot__inner {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.foot__logo {
  height: auto;
  width: 220px;
}

.foot__note {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 16px;
  max-width: 46ch;
}

.foot__note a {
  border-bottom: 1px solid var(--ember);
  color: var(--ember-light);
}

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

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

@media (min-width: 860px) {
  .foot__links {
    justify-content: flex-end;
  }
}

.foot__links a {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.15s;
}

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

.foot__legal {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-top: 34px;
  padding-top: 22px;
  text-transform: uppercase;
}