/*
  The website's one stylesheet.

  Shared by all four pages so the nav, the background and the card shapes cannot drift apart. The
  colours are the game's own tokens (client/tailwind.config.js) — somebody crossing from here to
  play.immortalzenith.com should not feel they have changed products.

  No framework and no build step. This is served by Caddy from a directory; a person editing it
  should be able to open the file, change a colour and see the result, without a toolchain.
*/

:root {
  --ink-950: #06080b;
  --ink-900: #0b0d10;
  --ink-800: #12151a;
  --ink-700: #1a1f26;
  --gold: #e6c161;
  --gold-300: #f2dca0;
  --jade: #5fd6a6;
  --parchment: #e9e1cf;
  --muted: #b5ae9f;
  --dim: #8b8477;
  --rose: #e2575c;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/*
  `hidden` must actually hide.

  The browser's own rule is `[hidden] { display: none }`, which is the weakest kind of rule there
  is: ANY author rule that sets `display` beats it. `.actions { display: flex }` below is exactly
  such a rule, and the effect was that the pre-launch play button — marked hidden in the markup and
  only meant to appear when the countdown reaches zero — was visible on the page the whole time.

  A button that says "play" before the game opens is the one mistake this page cannot make, so the
  fix is the blunt one rather than a more careful selector somewhere further down.
*/
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  background: var(--ink-950);
  color: var(--parchment);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/*
  The cultivator-select artwork, as the page's backdrop.

  A fixed pseudo-element rather than `background-attachment: fixed` on the body, because iOS Safari
  does not implement that and instead repaints the image on every scroll frame — the page judders,
  and on a long page like the wiki it judders badly. A fixed element is composited once and simply
  stays where it is put.

  The scrim on top is not decoration. The artwork is busy and mid-toned, and parchment text laid
  straight onto it is unreadable in about half the frame. The gradient is heaviest at the top, where
  the nav sits, and stays dark enough everywhere else to keep body text above contrast.
*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 8, 11, .92) 0%, rgba(6, 8, 11, .78) 35%, rgba(6, 8, 11, .93) 100%),
    url("/bg.webp") center / cover no-repeat;
  background-color: var(--ink-950);
}

/*
  Pages that are mostly words get a heavier scrim than the home page.

  The artwork has a bright sky through the middle of it, and the home page gets away with that
  because it is a logo, a headline and four tiles — very little of it is small text and none of it
  is a paragraph. Guides, the wiki and the stats tables are the opposite: long runs of secondary
  text in --dim and --muted, which over the bright band come out around 2.5:1 and are genuinely
  hard to read rather than merely less pretty.

  So those pages carry class="reading" and the art is pushed further back on them. It is still
  visible — this is a scrim, not a switch — but the page is a page first.
*/
body.reading::before {
  background:
    linear-gradient(180deg, rgba(6, 8, 11, .95) 0%, rgba(6, 8, 11, .90) 40%, rgba(6, 8, 11, .96) 100%),
    url("/bg.webp") center / cover no-repeat;
  background-color: var(--ink-950);
}

/* ── the bar ──────────────────────────────────────────────────────────────────────────────── */

header.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  padding: .75rem 16px;
  background: rgba(6, 8, 11, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-700);
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
}
/* The IZ monogram. Cropped to its ink, so it is wider than it is tall — height is what is fixed,
   and the width follows, or the mark would be squashed into a square it is not. */
.brand img { height: 32px; width: auto; display: block; }
nav.links { display: flex; flex-wrap: wrap; gap: .25rem; }
nav.links a {
  color: var(--muted);
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: 8px;
  font-size: .95rem;
  transition: background .15s, color .15s;
}
nav.links a:hover { color: var(--parchment); background: rgba(230, 193, 97, .1); }
/* Set by each page on its own entry, so the bar always says where you are. */
nav.links a[aria-current="page"] { color: var(--gold); background: rgba(230, 193, 97, .14); }

/* ── page frame ───────────────────────────────────────────────────────────────────────────── */

main {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem 16px 4rem; /* 16px gutter: nothing touches the edge of a phone */
}
main.home { max-width: 900px; padding-top: 8vh; text-align: center; }

h1 {
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  line-height: 1.1;
  margin: 0 0 .5rem;
  color: var(--gold);
  letter-spacing: -0.02em;
}
h2 { font-size: clamp(1.3rem, 4vw, 1.6rem); color: var(--gold); margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.05rem; color: var(--gold-300); margin: 1.75rem 0 .4rem; }
p { margin: 0 0 1rem; }
a { color: var(--gold); }
.lede { font-size: clamp(1rem, 3.4vw, 1.2rem); color: var(--muted); max-width: 60ch; }
main.home .lede { margin-left: auto; margin-right: auto; max-width: 36ch; }
.mark { width: 120px; height: 120px; border-radius: 26px; margin-bottom: 1.25rem; }

/*
  The hero lockup, standing in for the <h1> text.

  Sized in vw with a ceiling so it fills a phone's width properly and stops growing on a monitor.
  The width/height attributes on the <img> are the intrinsic ones, which reserve the right box
  before the file arrives — without them the countdown below jumps down the page on first paint.
*/
.wordmark { margin: 0 0 .75rem; }
.wordmark img {
  display: block;
  margin: 0 auto;
  width: min(440px, 78vw);
  height: auto;
}

/* ── the countdown ────────────────────────────────────────────────────────────────────────── */

.countdown { margin: 2.5rem auto 1rem; }
.countdown .label {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .75rem;
}
.clock { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.clock .unit {
  background: rgba(18, 21, 26, .75);
  border: 1px solid var(--ink-700);
  border-radius: 12px;
  padding: .75rem .25rem;
  min-width: 78px;
}
.clock .n {
  display: block;
  /* Tabular figures: without them the digits change width as they tick and the whole row shuffles. */
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 700;
  color: var(--parchment);
  line-height: 1.1;
}
.clock .u { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.launch-note { font-size: .85rem; color: var(--dim); margin-top: .9rem; }

/* ── buttons and store tiles ──────────────────────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 2rem 0 .5rem; }
a.btn {
  display: inline-block;
  padding: .85rem 1.75rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .15s;
}
a.btn.play { background: var(--gold); color: var(--ink-950); }
a.btn.play:hover { background: var(--gold-300); transform: translateY(-1px); }
a.btn.ghost { border-color: rgba(230, 193, 97, .45); color: var(--gold); }
a.btn.ghost:hover { background: rgba(230, 193, 97, .12); border-color: rgba(230, 193, 97, .8); }

/* ── store buttons ────────────────────────────────────────────────────────────────────────── */

/*
  Four buttons carrying each platform's own mark.

  Each takes its brand's colour on hover and stays neutral at rest, so the row reads as one set of
  buttons rather than as four competing logos — the page is the game's, not the stores'.

  The App Store one is a <span>, not an <a>, because there is no URL for it yet. It is styled to
  look like the others but flat and unhoverable, which is what "soon" should look like.
*/
.stores {
  display: grid;
  /* 168px fits all four across at the home page's 900px max-width, two on a tablet, one on a
     phone. 190px orphaned the App Store button on its own row at desktop width. */
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: .75rem;
  margin: 2rem 0 .5rem;
}
.store {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  background: rgba(18, 21, 26, .8);
  border: 1px solid var(--ink-700);
  border-radius: 12px;
  text-decoration: none;
  color: var(--parchment);
  text-align: left;
  transition: border-color .15s, background .15s, transform .15s, color .15s;
}
.store svg {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  /* currentColor so the glyph inherits the hover colour below rather than needing four rules. */
  fill: currentColor;
  color: var(--parchment);
  transition: color .15s;
}
.store span { display: block; line-height: 1.25; }
.store small { display: block; font-size: .7rem; color: var(--dim); }
.store b { display: block; font-size: .98rem; font-weight: 600; }

a.store:hover { transform: translateY(-1px); background: rgba(26, 31, 38, .9); }
a.store.discord:hover { border-color: #5865f2; }
a.store.discord:hover svg { color: #5865f2; }
a.store.steam:hover { border-color: #c7d5e0; }
a.store.steam:hover svg { color: #c7d5e0; }
a.store.play:hover { border-color: #48ff91; }
a.store.play:hover svg { color: #48ff91; }

.store.soon { opacity: .4; cursor: default; }

/*
  On a phone: the marks alone, four across.

  The text tiles need about 168px each, so a 375px screen fits one per row — four stacked bars in
  the footer of every page, taking more vertical space than the thing they sit under. The logos are
  what people recognise anyway, and the accessible name does not depend on the visible text: every
  one of these carries its own aria-label ("Immortal Zenith on Discord"), so hiding the words costs
  a screen reader nothing.
*/
@media (max-width: 620px) {
  .stores, footer .stores {
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
  }
  .store {
    justify-content: center;
    padding: .8rem .5rem;
  }
  /* The label block, not the button itself — .store is a <span> on the iOS one. */
  .store > span { display: none; }
  .store svg { width: 30px; height: 30px; flex-basis: 30px; }
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
  margin: 1.5rem 0;
  text-align: left;
}
.tile {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  background: rgba(18, 21, 26, .75);
  border: 1px solid var(--ink-700);
  border-radius: 12px;
  text-decoration: none;
  color: var(--parchment);
  transition: border-color .15s, background .15s, transform .15s;
}
a.tile:hover { border-color: rgba(230, 193, 97, .55); background: rgba(26, 31, 38, .85); transform: translateY(-1px); }
.tile .icon { width: 26px; height: 26px; flex: 0 0 26px; color: var(--gold); }
.tile .icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.tile b { display: block; font-size: .95rem; font-weight: 600; }
.tile span { display: block; font-size: .78rem; color: var(--dim); }
/*
  A store that has no URL yet.

  Rendered as a <div>, not a dead <a>: a link that 404s is worse than a tile that says "soon",
  because a visitor who clicks it concludes the game is broken rather than unreleased.
*/
.tile.soon { opacity: .45; cursor: default; }

/* ── cards, grids, tables ─────────────────────────────────────────────────────────────────── */

/* ── the section deck ─────────────────────────────────────────────────────────────────────── */

/*
  A marquee: a real horizontal scroller that something nudges every frame.

  NO scroll-snap here, deliberately. Snap points and a continuous drift are two things arguing
  about where the scroller should be, and snap wins — it drags every frame back to the nearest
  tile, and the deck sits still and judders instead of moving.

  The tiles are rendered twice; IZ.deck subtracts one set's width when it has travelled one set's
  width, which is invisible because the content repeats. See site.js.
*/
.deck-wrap { margin-top: 3rem; }
.deck {
  display: flex;
  align-items: flex-start;   /* an open tile grows downward, not from the middle */
  gap: 1rem;
  overflow-x: auto;
  /* Room for the tiles' lift on hover and for a focus ring, neither of which should be clipped. */
  padding: 4px 4px 12px;
  /* Hide the scrollbar: a bar that creeps along on its own under a row of art looks like a fault.
     The scroller still works in every other way — swipe, trackpad, shift-wheel, keyboard. */
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  flex: 0 0 auto;
  /* Deliberately not a whole row: a sliver of the next tile is what says this scrolls. */
  width: clamp(200px, 40vw, 260px);
  height: clamp(134px, 27vw, 174px);
  scroll-snap-align: none;
  border: 1px solid var(--ink-700);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: var(--ink-800);
  cursor: pointer;
  font: inherit;
  /* width and height are what the open state changes, so they are what has to ease. */
  transition: width .38s cubic-bezier(.22, .61, .36, 1),
              height .38s cubic-bezier(.22, .61, .36, 1),
              border-color .15s, transform .15s;
}
.slide:hover, .slide:focus-visible { border-color: rgba(230, 193, 97, .7); transform: translateY(-2px); }

.slide-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/*
  The scrim, which does two jobs.

  Shut, it is a bottom-weighted gradient that keeps the title legible — the overview art is bright
  and busy along the bottom of several of these frames and gold text straight onto it is
  unreadable in about half of them.

  Open, the same element becomes a flat dark wash over the whole picture so the blurb can sit on
  top of it. One element, two states, so the two can cross-fade into each other.
*/
.slide-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 11, .1) 35%, rgba(6, 8, 11, .85) 100%);
  transition: background .38s ease;
}
.slide-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .7rem .9rem;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-300);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  transition: opacity .2s ease;
}

/* The expanded face. Present but invisible while shut, so opening is a fade rather than a reflow. */
.slide-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem 1.25rem;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease .08s;
}
.slide-body-title { font-size: 1.15rem; font-weight: 700; color: var(--gold); }
.slide-body-text {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--parchment);
  /* The six blurbs are not the same length and the open box is a fixed size, so the longest one
     scrolls rather than being cut off mid-sentence. */
  overflow-y: auto;
}

/* ── open ─────────────────────────────────────────────────────────────────────────────────── */

.slide.open {
  width: min(680px, 86vw);
  height: min(340px, 62vh);
  border-color: var(--gold);
  cursor: default;
}
/* Lifting an open tile on hover would wobble a paragraph somebody is reading. */
.slide.open:hover { transform: none; }
.slide.open .slide-scrim { background: rgba(6, 8, 11, .86); }
.slide.open .slide-title { opacity: 0; }
.slide.open .slide-body { opacity: 1; pointer-events: auto; }

/* The rest of the deck steps back while one tile is open, so the eye has somewhere to rest. */
.deck-wrap.has-open .slide:not(.open) { opacity: .45; }
.slide:not(.open) { transition: width .38s cubic-bezier(.22, .61, .36, 1),
                                height .38s cubic-bezier(.22, .61, .36, 1),
                                opacity .3s ease, border-color .15s, transform .15s; }

.pillars, .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  text-align: left;
}
.pillar, .card {
  background: rgba(18, 21, 26, .78);
  border: 1px solid var(--ink-700);
  border-radius: 12px;
  padding: 1.25rem;
}
.pillar h2, .card h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--gold); }
.pillar p, .card p { margin: 0; font-size: .9rem; color: var(--muted); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.stat {
  background: rgba(18, 21, 26, .78);
  border: 1px solid var(--ink-700);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.stat .n { font-size: 2rem; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .k { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--ink-700); }
th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── wiki ─────────────────────────────────────────────────────────────────────────────────── */

.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0 1rem; }
.tabs button {
  font: inherit;
  font-size: .92rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--ink-700);
  background: rgba(18, 21, 26, .75);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.tabs button:hover { color: var(--parchment); border-color: rgba(230, 193, 97, .4); }
.tabs button[aria-selected="true"] { color: var(--ink-950); background: var(--gold); border-color: var(--gold); font-weight: 600; }

input.search {
  font: inherit;
  width: 100%;
  padding: .65rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--ink-700);
  background: rgba(11, 13, 16, .8);
  color: var(--parchment);
  margin-bottom: 1rem;
}
input.search::placeholder { color: var(--dim); }
input.search:focus { outline: none; border-color: rgba(230, 193, 97, .6); }

/*
  The group picker: ranks for bloodlines and physiques, elements for guardian beasts.

  A rank tile borrows the crest of one of its members, an element tile uses the game's own element
  icon — so the grid is pictures first, which is how people actually recognise these. The tile is a
  <button> rather than a styled div because it does something when you press it, and a keyboard
  should be able to reach it without help.
*/
.groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
  margin-top: .5rem;
}
.group {
  font: inherit;
  display: flex;
  align-items: center;
  gap: .75rem;
  text-align: left;
  padding: .75rem .9rem;
  background: rgba(18, 21, 26, .8);
  border: 1px solid var(--ink-700);
  border-radius: 12px;
  color: var(--parchment);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.group:hover { border-color: rgba(230, 193, 97, .6); background: rgba(26, 31, 38, .9); transform: translateY(-1px); }
.group-art {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: cover;
  border-radius: 9px;
  background: rgba(6, 8, 11, .6);
}
.group-text b { display: block; font-size: 1.05rem; color: var(--gold); line-height: 1.2; }
.group-text span { display: block; font-size: .76rem; color: var(--dim); }

/* Where you are, and the way back out of it. */
.crumb { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.crumb button {
  font: inherit;
  font-size: .88rem;
  padding: .35rem .8rem;
  border-radius: 8px;
  border: 1px solid var(--ink-700);
  background: rgba(18, 21, 26, .8);
  color: var(--gold);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.crumb button:hover { border-color: rgba(230, 193, 97, .6); background: rgba(26, 31, 38, .9); }
.crumb span { font-size: .9rem; color: var(--muted); }

button.more {
  font: inherit;
  cursor: pointer;
  background: none;
  padding: .7rem 1.5rem;
  border-radius: 10px;
  border: 1px solid rgba(230, 193, 97, .45);
  color: var(--gold);
  transition: background .15s, border-color .15s;
}
button.more:hover { background: rgba(230, 193, 97, .12); border-color: rgba(230, 193, 97, .8); }

.entry {
  background: rgba(18, 21, 26, .78);
  border: 1px solid var(--ink-700);
  border-radius: 12px;
  padding: 1rem 1.15rem;
}
/*
  align-items: flex-start, not baseline: the header now holds a 56px picture beside the text, and
  baseline alignment would drop the image to sit on the title's baseline and push the card open.
*/
.entry header { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .35rem; }
.entry .titles { min-width: 0; } /* lets a long name wrap instead of forcing the card wider */
.entry .pills { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.entry .crest {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(6, 8, 11, .6);
  border: 1px solid var(--ink-700);
}
.entry h3 { margin: 0; font-size: 1rem; color: var(--gold); }
.entry .desc { font-size: .88rem; color: var(--muted); margin: .4rem 0 .6rem; }
.entry dl { margin: 0; font-size: .82rem; }
.entry dt { color: var(--gold-300); font-weight: 600; margin-top: .5rem; }
.entry dd { margin: .15rem 0 0; color: var(--muted); }
.entry .mods { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.entry .mod {
  background: rgba(6, 8, 11, .6);
  border: 1px solid var(--ink-700);
  border-radius: 6px;
  padding: .1rem .45rem;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}
.entry .mod.bad { border-color: rgba(226, 87, 92, .35); color: #f0a8ab; }

/* ── a guardian beast's growth chain ──────────────────────────────────────────────────────── */

/*
  Egg → Young → Adult → Superior → Mythic.

  The open card spans the whole grid, because five frames and four arrows do not fit in a 260px
  column and shrinking them defeats the point of showing pictures. On a phone the grid is one
  column anyway and the strip scrolls sideways instead.
*/
.entry.beast.open { grid-column: 1 / -1; }

.growth {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding-bottom: .5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.growth-step { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: 0 0 auto; }
.growth-art {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--ink-700);
  background: rgba(6, 8, 11, .6);
}
.growth-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.growth-arrow { color: var(--gold); font-size: 1.25rem; flex: 0 0 auto; line-height: 1; }

.growth-toggle {
  font: inherit;
  font-size: .82rem;
  margin-top: .9rem;
  padding: .4rem .85rem;
  border-radius: 8px;
  border: 1px solid var(--ink-700);
  background: rgba(6, 8, 11, .5);
  color: var(--gold);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.growth-toggle:hover { border-color: rgba(230, 193, 97, .6); background: rgba(26, 31, 38, .9); }

.pill {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--ink-700);
  color: var(--dim);
  white-space: nowrap;
}
.pill.rank { border-color: rgba(230, 193, 97, .45); color: var(--gold); }

.count { font-size: .8rem; color: var(--dim); margin-bottom: 1rem; }
.note { font-size: .82rem; color: var(--dim); }
.empty { color: var(--dim); padding: 2rem 0; text-align: center; }
.error { color: var(--rose); }

/* ── guides prose ─────────────────────────────────────────────────────────────────────────── */

article.guide { max-width: 68ch; }
article.guide ul, article.guide ol { padding-left: 1.25rem; color: var(--muted); }
article.guide li { margin-bottom: .4rem; }
article.guide strong { color: var(--parchment); }
.toc {
  background: rgba(18, 21, 26, .78);
  border: 1px solid var(--ink-700);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}
.toc ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem; }
@media (max-width: 520px) { .toc ul { columns: 1; } }
.toc li { margin: .2rem 0; }
.toc a { text-decoration: none; font-size: .92rem; }
.toc a:hover { text-decoration: underline; }

/* ── footer ───────────────────────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--ink-700);
  padding: 1.75rem 16px 1.5rem;
  text-align: center;
  font-size: .8rem;
  color: #6f6a5f;
  background: rgba(6, 8, 11, .82);
}
/* The store bar sits in the footer on every page, so it needs a width of its own down here
   rather than inheriting the home page's hero column. */
footer .stores {
  max-width: 760px;
  margin: 0 auto 1.25rem;
  text-align: left;
}
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--parchment); }
.status { display: inline-flex; align-items: center; gap: .4rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #6f6a5f; }
.dot.up { background: var(--jade); }
.dot.down { background: var(--rose); }