/* Robin Mood — storybook Sherwood. Parchment cards with thick ink outlines and hard shadows
   (the $PIG manner), in the artist's palette. Self-hosted fonts only; no inline styles anywhere
   (the CSP forbids them). Animate transform/opacity only. */

/* The display face is the artist's Berlin Sans FB Demi. It is a commercial Monotype font
   (it ships with MS Office) and its desktop licence does not cover web embedding, so the page
   uses a visitor's installed copy (local) and, once a WEB licence is bought, the self-hosted
   file below. build.mjs drops the url() line while fonts/berlin-sans-fb-demi.woff2 is absent,
   so nobody downloads a 404. Everyone else gets Fredoka, the closest free face. */
@font-face {
  font-family: "Mood Display";
  src: local("Berlin Sans FB Demi Bold"), local("BerlinSansFBDemi-Bold"), local("Berlin Sans FB Demi");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Mood Text";
  src: local("Berlin Sans FB"), local("BerlinSansFB-Reg");
  font-weight: 300 500;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Fell";
  src: url("../fonts/fell.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Fell";
  src: url("../fonts/fell-italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

:root {
  /* the artist's palette */
  --base: #e8d591;        /* main base */
  --base-2: #efe3a7;      /* secondary base */
  --ink: #3d2509;         /* highlights (outlines, text) */
  --green: #3d8e28;       /* touch of green */
  --green-2: #245f0f;     /* secondary touch of green */
  --gold: #f0c419;        /* yellowish gold: sampled from the coin art (the brief repeated #245f0f here) */
  --gold-light: #fcfc80;  /* lighter yellowish gold */

  --paper: #f7efc9;       /* a lighter step of the bases, for inputs and table heads */
  --ink-soft: #6b4a22;
  --red: #b3261e;
  --outline: 3px;
  --radius: 14px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --maxw: 1180px;
  --nav-h: 64px;
  --head: "Mood Display", "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --lore: "Fell", "IM Fell English", Georgia, "Times New Roman", serif;
  --body: "Mood Text", "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* clip, not hidden: `hidden` makes body a scroll container, which silently breaks every
   position:sticky on the page (the nav, the docs' chapter list). hidden stays as the
   fallback for browsers without clip. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 450;
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
/* The backdrop: the painted feather coins, scattered at mixed sizes and faded into the base
   (web/tools/coin-field.py makes the seamless tile). A fixed layer behind everything, not
   background-attachment:fixed, which stutters on phones. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(252, 252, 128, 0.35), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(252, 252, 128, 0.22), transparent 50%),
    url("../img/coin-field.webp") 0 0 / 1100px 1100px repeat,
    var(--base);
  background-blend-mode: normal, normal, multiply, normal; /* coins sink into the parchment */
}
@media (max-width: 760px) {
  body::before { background-size: auto, auto, 700px 700px, auto; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--green); }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.05; margin: 0 0 0.4em; overflow-wrap: anywhere; }
b, strong { font-weight: 650; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
:focus-visible { outline: 3px solid var(--green-2); outline-offset: 2px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--gold-light); padding: 8px 12px; border: var(--outline) solid var(--ink); border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------------------------------------------------------------- shared */
.card {
  background: var(--base-2);
  border: var(--outline) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card__title { font-size: 1.3rem; margin-bottom: 10px; }
section { max-width: var(--maxw); margin: 0 auto; padding: 56px 20px; }
.section__title { font-size: clamp(2rem, 5vw, 3rem); text-align: center; margin-bottom: 8px; }
.section__title--left { text-align: left; }
.section__sub { text-align: center; font-family: var(--lore); font-style: italic; font-size: 1.2rem; margin: 0 auto 28px; max-width: 46ch; color: var(--ink-soft); }
.lore { font-family: var(--lore); font-size: 1.22rem; line-height: 1.5; margin: 0 0 18px; }
.lore--sm { font-size: 1.12rem; }
.aside { font-size: 0.92rem; color: var(--ink-soft); margin: 14px 0 0; }
.kicker { font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.85rem; color: var(--green-2); margin: 0 0 4px; }

.btn {
  font-family: var(--head);
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 9px 18px;
  color: var(--ink); background: var(--base-2);
  border: var(--outline) solid var(--ink); border-radius: 12px;
  box-shadow: var(--shadow-sm);
  text-decoration: none; cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.btn:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { color: #fff; background: var(--green-2); }
.btn--gold { background: var(--gold); }
.btn--gold:hover { background: var(--gold-light); }
.btn--lg { font-size: 1.12rem; min-height: 52px; padding: 12px 24px; }
.btn--sm { min-height: 36px; padding: 5px 12px; font-size: 0.9rem; }
.btn--block { width: 100%; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--head); font-weight: 600; font-size: 0.95rem;
  min-height: 38px; padding: 5px 12px; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink);
}
.chip.is-active { background: var(--green); color: #fff; }

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 20px;
  background: var(--base);
  border-bottom: var(--outline) solid var(--ink);
}
.nav__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.nav__coin { width: 40px; height: 40px; object-fit: contain; }
.nav__word { font-family: var(--head); font-weight: 700; font-size: 1.45rem; white-space: nowrap; }
.nav__links { display: flex; align-items: center; gap: 18px; }
.nav__links > a { color: var(--ink); text-decoration: none; font-family: var(--head); font-weight: 600; white-space: nowrap; }
.nav__links > a:hover { color: var(--green-2); }
.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 44px; padding: 10px; cursor: pointer;
  background: var(--base-2); border: var(--outline) solid var(--ink); border-radius: 10px;
}
.nav__burger span { display: block; height: 3px; background: var(--ink); border-radius: 2px; }
.net {
  font-family: var(--head); font-weight: 600; font-size: 0.8rem;
  padding: 3px 9px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); white-space: nowrap;
}
.net--ok { background: var(--green); color: #fff; }
.net--bad { background: var(--red); color: #fff; }
.netwarn {
  position: sticky; top: var(--nav-h); z-index: 49;
  display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 8px 16px; background: var(--gold-light); border-bottom: var(--outline) solid var(--ink); font-weight: 600;
}

/* ----------------------------------------------------------------- hero */
.hero { max-width: none; padding: 0 0 40px; }
/* The painting is never cropped: Mood's face sits near the top and the painted title at the
   bottom, so any crop loses one of them. Desktop and tablet get the artist's wide panorama
   (1760x576), which fills the width of any screen up to 3:1; phones get the tall painting.
   Only a screen wider than the art gets side fill, a blurred copy of the same painting. */
.hero__art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: #6f5a33;
  border-bottom: var(--outline) solid var(--ink);
}
.hero__art::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  background: url("../img/hero-wide.webp") center / cover no-repeat;
  filter: blur(28px) brightness(0.82) saturate(0.9);
}
.hero__art picture {
  display: block;
  width: 100%;
  max-width: calc((100svh - var(--nav-h)) * 1760 / 576);
}
.hero__art img { width: 100%; }
.hero__card {
  position: relative;
  max-width: 860px;
  margin: 28px auto 0;
  padding: 26px 30px 24px;
  text-align: center;
}
.hero__title { font-size: clamp(2.6rem, 7vw, 4.2rem); margin: 0; }
.hero__tag { font-family: var(--head); font-weight: 600; font-size: clamp(1.1rem, 2.6vw, 1.45rem); color: var(--green-2); margin: 2px 0 14px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.hero__price { min-height: 1.2em; margin: 14px 0 0; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.ca { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ca__label { font-family: var(--head); font-weight: 700; }
.ca__value {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 8px;
  padding: 6px 10px; font-size: 0.88rem; word-break: break-all; max-width: 100%;
}

/* --------------------------------------------------------------- legend */
.legend__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: 32px; align-items: center; }
.face { margin: 0; display: grid; justify-items: center; gap: 12px; }
.face__frame {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, var(--paper) 0%, var(--base-2) 70%);
}
.face__frame img { width: 100%; height: 100%; object-fit: contain; }
.face__split { position: absolute; top: 5%; bottom: 5%; left: 50%; border-left: 3px dashed rgba(61, 37, 9, 0.5); }
.face__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 380px); }
.face__note { margin: 0; font-size: 0.95rem; line-height: 1.3; color: var(--ink-soft); }
.face__note b { display: block; font-family: var(--head); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.face__note--weep { text-align: right; padding-right: 10px; border-right: 3px solid #5b8fb0; }
.face__note--smile { padding-left: 10px; border-left: 3px solid var(--green); }
.face__cap { font-family: var(--lore); font-style: italic; font-size: 1.08rem; text-align: center; color: var(--ink-soft); text-wrap: balance; }
.legend__story { padding: 26px 30px; }
.legend__story .lore { font-size: 1.18rem; margin-bottom: 14px; }
.legend__moral {
  text-wrap: balance;
  margin: 18px 0 0; padding-top: 14px; border-top: 2px dashed rgba(61, 37, 9, 0.3);
  font-family: var(--head); font-weight: 700; font-size: 1.2rem; line-height: 1.35; color: var(--green-2); text-align: center;
}

/* --------------------------------------------------------------- ledger */
.ledger__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.signpost {
  position: relative;
  margin: 0;
  container-type: inline-size;
  border: var(--outline) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: #cfe7ea;
}
.signpost img { width: 100%; }
/* Each number sits in the blank lower half of its painted board. Positions are fractions of
   the artwork (1480x1218), so they hold at every width; the text scales with the figure. */
.sign {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  width: 25cqw;
  text-align: center;
  font-family: var(--head);
  font-weight: 700;
  font-size: 4.1cqw;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.sign--1 { left: 39.4%; top: 48.9%; --tilt: -2.2deg; }
.sign--2 { left: 40.4%; top: 61.6%; --tilt: -1.4deg; }
.sign--3 { left: 40.8%; top: 73.7%; --tilt: -0.4deg; }
.sign--4 { left: 41.8%; top: 87.3%; --tilt: -1.2deg; }

.ledger__book { padding: 20px 22px; }
.book { margin: 0; display: grid; gap: 2px; }
.book div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 2px dashed rgba(61, 37, 9, 0.22); }
.book div:last-child { border-bottom: 0; }
.book dt { color: var(--ink-soft); }
.book dd { margin: 0; font-family: var(--head); font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.book__big { font-size: 1.6rem; color: var(--green-2); }

/* ------------------------------------------------------------------ buy */
.buy__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 28px; align-items: end; justify-content: center; max-width: 900px; margin: 0 auto; }
.buy__mascot { display: flex; flex-direction: column; align-items: center; }
.buy__mascot img { width: min(100%, 260px); }
.bubble {
  position: relative;
  font-family: var(--lore); font-size: 1.12rem; line-height: 1.4;
  background: var(--paper); border: var(--outline) solid var(--ink); border-radius: 16px;
  padding: 12px 16px; margin: 0 0 18px; max-width: 30ch; box-shadow: var(--shadow-sm);
}
.bubble::after {
  content: ""; position: absolute; bottom: -14px; left: 50%;
  width: 22px; height: 22px; background: var(--paper);
  border-right: var(--outline) solid var(--ink); border-bottom: var(--outline) solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
.swap { padding: 22px; }
.swap__tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.swap__tab {
  flex: 1; min-height: 46px; cursor: pointer;
  font-family: var(--head); font-weight: 700; font-size: 1.1rem;
  border: var(--outline) solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink);
}
.swap__tab.is-active { background: var(--green); color: #fff; }
#tabSell.is-active { background: var(--ink); }
.swap__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.swap__label { font-family: var(--head); font-weight: 600; }
.swap__field { display: grid; gap: 6px; margin-bottom: 6px; }
.swap__input { position: relative; display: block; }
.swap__input input {
  width: 100%; min-height: 56px; padding: 10px 74px 10px 14px;
  font-family: var(--head); font-weight: 600; font-size: 1.45rem; color: var(--ink);
  background: #fffbe8; border: var(--outline) solid var(--ink); border-radius: 12px;
}
.swap__input input:disabled { background: var(--paper); }
.swap__max {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  min-height: 36px; padding: 4px 12px; cursor: pointer;
  font-family: var(--head); font-weight: 700; font-size: 0.85rem;
  border: 2px solid var(--ink); border-radius: 9px; background: var(--gold); color: var(--ink);
}
.swap__max:disabled { opacity: 0.45; cursor: not-allowed; }
.swap__bal { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 14px; }
.swap__quote { margin: 0 0 12px; display: grid; gap: 5px; }
.swap__quote div { display: flex; justify-content: space-between; gap: 10px; }
.swap__quote dt { color: var(--ink-soft); }
.swap__quote dd { margin: 0; font-family: var(--head); font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.swap__cap { margin: 0 0 12px; padding: 8px 10px; font-weight: 600; color: var(--red); border: 2px solid var(--red); border-radius: 10px; background: rgba(179, 38, 30, 0.07); }
.swap__note { font-size: 0.85rem; color: var(--ink-soft); text-align: center; margin: 0 0 12px; }
.swap__hint { min-height: 1.3em; margin: 12px 0 0; font-weight: 600; color: var(--green-2); text-align: center; }

/* --------------------------------------------------------------- market */
.market__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; }
.market__chart, .market__trades { padding: 14px; min-width: 0; }
.chartbox { height: 460px; border-radius: 10px; overflow: hidden; background: var(--paper); border: 2px solid var(--ink); }
.chartbox iframe { width: 100%; height: 100%; border: 0; display: block; }
.chartbox__wait { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; font-family: var(--lore); font-size: 1.15rem; }
.chartbox__wait img { width: 72px; height: 72px; object-fit: contain; }
.market__dex { display: inline-block; margin-top: 10px; font-family: var(--head); font-weight: 600; }
.tablewrap { max-height: 460px; overflow: auto; scrollbar-width: thin; }
.trades { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.trades th, .trades td { text-align: left; padding: 7px 8px; border-bottom: 1px solid rgba(61, 37, 9, 0.18); white-space: nowrap; font-variant-numeric: tabular-nums; }
.trades th { position: sticky; top: 0; background: var(--base-2); font-family: var(--head); font-weight: 700; }
.trades a { color: var(--ink); text-decoration: none; }
.trades a:hover { text-decoration: underline; }
.trades .buy { color: var(--green); font-weight: 700; }
.trades .sell { color: var(--red); font-weight: 700; }
.trades .mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
.trades__empty { text-align: center !important; padding: 28px 8px !important; font-family: var(--lore); font-size: 1.1rem; white-space: normal !important; }

/* ---------------------------------------------------------------- tithe */
.tithe__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tithe__prose { padding: 24px; }
.split { display: flex; height: 34px; border: var(--outline) solid var(--ink); border-radius: 10px; overflow: hidden; margin: 6px 0 18px; }
.split__part { display: flex; align-items: center; padding-left: 10px; font-family: var(--head); font-weight: 700; font-size: 0.9rem; color: #fff; white-space: nowrap; overflow: hidden; }
.split__part + .split__part { border-left: 2px solid var(--ink); }
.split__part--holders { flex: 80; background: var(--green); }
.split__part--buyback { flex: 5; background: var(--gold); }
.split__part--raid { flex: 5; background: var(--gold-light); }
.split__part--keep { flex: 10; background: var(--ink-soft); }
.tithe__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tithe__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.dot { width: 18px; height: 18px; margin-top: 4px; border: 2px solid var(--ink); border-radius: 50%; }
.dot--holders { background: var(--green); }
.dot--buyback { background: var(--gold); }
.dot--raid { background: var(--gold-light); }
.dot--keep { background: var(--ink-soft); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fact { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.fact__k { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; color: var(--ink-soft); }
.fact__v { font-family: var(--head); font-weight: 700; font-size: 1.3rem; overflow-wrap: anywhere; }
.fact__s { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- raids */
.raids__card {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 26px 32px; background: var(--gold-light);
}
.raids__mascot { width: 100%; max-width: 220px; justify-self: center; }
.raids__list { margin: 0 0 6px; padding-left: 1.2em; display: grid; gap: 6px; }
.raids__copy .hero__actions { justify-content: flex-start; }

/* ------------------------------------------------------------------ faq */
.faq__wrap { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; align-items: end; max-width: 980px; margin: 0 auto; }
.faq__list { display: grid; gap: 12px; }
.faq__mascot { width: 100%; max-width: 200px; }
.faq__item { overflow: hidden; }
.faq__q {
  width: 100%; min-height: 52px; padding: 14px 18px; cursor: pointer; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--head); font-weight: 600; font-size: 1.1rem; color: var(--ink);
  background: transparent; border: 0;
}
.faq__q::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--green-2); }
.faq__q[aria-expanded="true"]::after { content: "\2013"; } /* en dash: U+2212 minus is missing from Berlin Sans */
.faq__a { max-height: 0; overflow: hidden; padding: 0 18px; transition: max-height 0.22s ease, padding 0.22s ease; }
.faq__a.is-open { max-height: 800px; padding: 0 18px 18px; }
.faq__a p:first-child { margin-top: 0; }
.faq__a .ca { justify-content: flex-start; }
.kv { display: grid; gap: 4px; margin: 10px 0 14px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed rgba(61, 37, 9, 0.3); padding-bottom: 3px; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; font-weight: 600; text-align: right; word-break: break-all; }

/* --------------------------------------------------------------- footer */
.footer { border-top: var(--outline) solid var(--ink); background: var(--base-2); padding: 30px 20px 60px; text-align: center; }
.footer__links { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; margin-bottom: 14px; }
.footer__links a { font-family: var(--head); font-weight: 600; color: var(--ink); }
.footer__small { max-width: 70ch; margin: 0 auto; font-size: 0.88rem; color: var(--ink-soft); }

/* --------------------------------------------------------- modal, toasts */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(61, 37, 9, 0.55); }
.modal__box { width: 100%; max-width: 420px; padding: 24px; }
.modal__title { font-size: 1.4rem; }
.wallets { display: grid; gap: 10px; margin: 6px 0 14px; }
.wallets button, .wallets a {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px; cursor: pointer;
  font-family: var(--head); font-weight: 600; font-size: 1.05rem; text-align: left; color: var(--ink); text-decoration: none;
  background: var(--paper); border: var(--outline) solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm);
}
.wallets img { width: 28px; height: 28px; border-radius: 6px; }
.wallets__empty, .wallets__status { margin: 0 0 12px; color: var(--ink-soft); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 110; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px)); }
.toast {
  background: var(--base-2); border: var(--outline) solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm);
  padding: 12px 14px; font-size: 0.95rem; opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; cursor: pointer;
}
.toast.is-in { opacity: 1; transform: none; }
.toast--ok { border-left: 10px solid var(--green); }
.toast--err { border-left: 10px solid var(--red); }
.toast--info { border-left: 10px solid var(--gold); }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1020px) {
  .nav__links { gap: 12px; }
  .ledger__grid, .tithe__grid, .legend__grid { grid-template-columns: 1fr; }
  .signpost { width: 100%; max-width: 720px; margin: 0 auto; }
  .market__grid { grid-template-columns: 1fr; }
}
/* the full nav needs ~1060px; below that it folds into the menu button */
@media (max-width: 1100px) {
  .nav__burger { display: flex; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 20px 16px; background: var(--base); border-bottom: var(--outline) solid var(--ink);
  }
  .nav__links.is-open { display: flex; }
  .nav__links > a { padding: 12px 2px; border-bottom: 1px dashed rgba(61, 37, 9, 0.3); }
  .net { align-self: flex-start; margin-top: 10px; }
  .nav__connect { margin-top: 10px; }
}
@media (max-width: 860px) {
  .buy__grid { grid-template-columns: 1fr; }
  .buy__mascot { display: none; }
  .raids__card { grid-template-columns: 1fr; text-align: left; }
  .raids__mascot { max-width: 150px; }
  .faq__wrap { grid-template-columns: 1fr; }
  .faq__mascot { display: none; }
}
@media (max-width: 760px) {
  .hero__card { margin: 20px 14px 0; padding: 20px 18px; }
  .lore { font-size: 1.12rem; text-align: left; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  section { padding: 40px 16px; }
  .hero { padding: 0 0 20px; }
  .hero__actions .btn { width: 100%; }
  .swap { padding: 16px; }
  .facts { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fact__v { font-size: 1.1rem; }
  .chartbox { height: 380px; }
  .raids__card { padding: 20px 18px; }
  .legend__story { padding: 20px 18px; }
  .legend__story .lore { font-size: 1.08rem; }
  .nav { padding: 0 14px; }
  .nav__word { font-size: 1.25rem; }
}