/* Sniffr: a dog show for headlines, drawn in pixels. Stories are judged on a scoring sheet; winners get a rosette and a
   coin. Layout: one 1180px column, the editorial hero with the live judging card beside it, sections separated by
   space and rules rather than boxes; cards only where a thing is an object (a coin, a story, an agent).
   Pixel rules: square corners (small chips get pixel-notched corners), 2px borders, hard offset shadows on raised
   objects (buttons, primary cards) that a hover moves 2px towards, segmented bars, pixel icons and art, motion in
   steps() only. One textured surface: the faint dither behind the home hero. */

/* Jersey 10 (titles, labels, eyebrows, buttons, tickers, big numbers) and Pixelify Sans (reading text), latin +
   latin-ext; Martian Mono (addresses, hashes, tables), latin. Jersey 10 has one weight: nothing asks it for bold. */
@font-face { font-family: 'Pixelify Sans'; src: url('../fonts/pixelify-sans-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Pixelify Sans'; src: url('../fonts/pixelify-sans-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jersey 10'; src: url('../fonts/jersey-10-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jersey 10'; src: url('../fonts/jersey-10-latin-ext.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Pixelify's 5, 6 and C close up at text sizes (5 reads as S): reading text takes its digits from Silkscreen */
@font-face { font-family: 'Sniffr Digits'; src: url('../fonts/silkscreen-400-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: 'Martian Mono'; src: url('../fonts/martian-mono.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  /* Colour: warm paper and espresso ink; ember is the brand (fills; text on ember is ink, ember as text is ember-deep);
     gold for highlights, cherry for burns, leaf for passes and live, plum for the big milestones. */
  --paper: #faf8f5;
  --card: #ffffff;
  --ink: #1d1612;
  --ink-2: #5c4e45;
  --ink-3: #8f8178;
  --rule: #ece4da;
  --rule-strong: #d8cbbe;
  --ember: #ff6b1a;
  --ember-deep: #c2440c;
  --ember-wash: #ffe8d9;
  --on-ember: #1d1612;
  --gold: #ffb524;
  --gold-wash: #fff1cc;
  --gold-deep: #8a5a00;
  --cherry: #e23d3d;
  --cherry-wash: #fde3e1;
  --leaf: #1f9d60;
  --leaf-wash: #ddf3e7;
  --leaf-deep: #157a4a;
  --plum: #8a4fff;
  --plum-wash: #eee6ff;
  --hard: var(--ink);                 /* hard offset shadows */
  --dither: rgba(255, 107, 26, 0.10); /* the hero's dither */

  /* Type: Jersey 10 for titles and for labels, buttons, tickers and big numbers; Pixelify Sans for reading text (its
     digits from Silkscreen); Martian Mono for addresses, hashes and tables. Jersey lacks a few signs (→ ↗ ≥): they
     come from Pixelify. */
  --display: 'Jersey 10', 'Pixelify Sans', 'Segoe UI', system-ui, sans-serif;
  --label: 'Jersey 10', 'Pixelify Sans', 'Martian Mono', ui-monospace, monospace;
  --text: 'Sniffr Digits', 'Pixelify Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);
  --step-5: clamp(2.125rem, 1.3rem + 3vw, 3.5rem);
  /* Jersey 10 is drawn on a grid of 1/18.67 em. At these sizes each of its pixels is 1, 1.5, 2, 2.5 or 3 screen pixels
     (the half steps are whole pixels on 2x screens), so its edges stay sharp: it is never set at any other size. */
  --j1: 18.6667px;   /* labels, nav, buttons, small tickers */
  --j15: 28px;       /* card titles, the wordmark, mid-size numbers */
  --j2: 37.3333px;   /* section titles, big numbers */
  --j25: 46.6667px;
  --j3: 56px;
  --title-xl: var(--j3);  /* page titles */
  --title-l: var(--j2);   /* section titles */

  /* Pixel corners: one 2px step (small chips), two steps (bubbles and notes). Segments: 6px blocks, 2px gaps. */
  --notch: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
  --notch-2: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
  --segs: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);

  --gutter: clamp(16px, 4vw, 32px);
  --max: 1180px;
  color-scheme: light;
}

@media (max-width: 640px) { :root { --title-xl: var(--j25); } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15100d; --card: #201814; --ink: #fbf1e7; --ink-2: #c9b8aa; --ink-3: #8c7b6e; --rule: #33271f; --rule-strong: #4a3a2f;
    --ember: #ff7b33; --ember-deep: #ff9a5c; --ember-wash: #3a2114; --gold: #ffc24d; --gold-wash: #3a2c10; --gold-deep: #ffc24d;
    --cherry: #ff5a52; --cherry-wash: #3d1a1a; --leaf: #3fd38f; --leaf-wash: #12301f; --leaf-deep: #3fd38f; --plum: #a988ff; --plum-wash: #2a1e45;
    --hard: #4a3a2f; --dither: rgba(255, 123, 51, 0.07);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #15100d; --card: #201814; --ink: #fbf1e7; --ink-2: #c9b8aa; --ink-3: #8c7b6e; --rule: #33271f; --rule-strong: #4a3a2f;
  --ember: #ff7b33; --ember-deep: #ff9a5c; --ember-wash: #3a2114; --gold: #ffc24d; --gold-wash: #3a2c10; --gold-deep: #ffc24d;
  --cherry: #ff5a52; --cherry-wash: #3d1a1a; --leaf: #3fd38f; --leaf-wash: #12301f; --leaf-deep: #3fd38f; --plum: #a988ff; --plum-wash: #2a1e45;
  --hard: #4a3a2f; --dither: rgba(255, 123, 51, 0.07);
  color-scheme: dark;
}
/* the sprites' paper sticker shows on dark grounds only (web/js/dogs.js) */
.sticker { display: none; }
:root[data-theme="dark"] .sticker { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sticker { display: inline; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; font-synthesis: style;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { max-width: 100%; }
svg.px, svg.mark, svg.dog, .avatar, img[src^="data:image/svg"] { image-rendering: pixelated; }
a { color: inherit; text-decoration-color: var(--rule-strong); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ember); }
:focus-visible { outline: 2px solid var(--ember-deep); outline-offset: 2px; }
::selection { background: var(--ember); color: var(--on-ember); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; letter-spacing: 0; margin: 0; text-wrap: balance; }
p { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--ink-2); }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grow { min-width: 0; flex: 1; }
.part .fill { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-family: var(--label); font-size: var(--j1); font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: var(--ink-2); line-height: 1.4; }

/* ---------------------------------------------------------------- sample banner + header */
.banner {
  background: var(--gold); color: #1d1612; font-size: var(--step--1); text-align: center;
  padding: 6px var(--gutter); border-bottom: 2px solid #1d1612;
}
.banner b { font-family: var(--label); font-weight: 400; font-size: var(--j1); letter-spacing: 0; text-transform: uppercase; margin-right: 4px; }

.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(8px); -webkit-backdrop-filter: saturate(1.3) blur(8px);
  border-bottom: 2px solid var(--ink);
}
.top .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.logo svg.mark { width: 52px; height: 30px; flex: none; overflow: visible; }
.logo .word { font-family: var(--display); font-weight: 400; font-size: var(--j15); line-height: 1; letter-spacing: 0; }
.nav { display: flex; gap: 6px; margin-left: 8px; }
.nav a {
  font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; text-decoration: none;
  color: var(--ink-2); padding: 7px 10px; border: 2px solid transparent; white-space: nowrap; flex: none; line-height: 1.2;
}
.nav a:hover { color: var(--ink); background: var(--ember-wash); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--card); border-color: var(--ink); box-shadow: 2px 2px 0 var(--hard); }
.top .spacer { flex: 1; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 2px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; flex: none;
  box-shadow: 2px 2px 0 var(--hard);
}
.icon-btn:hover { background: var(--ember-wash); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--hard); }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.icon-btn svg { width: 16px; height: 16px; }

@media (max-width: 860px) {
  .top .wrap { height: auto; flex-wrap: wrap; padding-block: 10px; gap: 10px 14px; }
  .nav { order: 3; width: calc(100% + 4px); margin: 0 -2px; padding: 0 2px 4px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) {
  .nav { gap: 2px; }
  .nav a { padding-inline: 7px; }
}

/* ---------------------------------------------------------------- buttons, chips, pills */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font: 400 var(--j1)/1 var(--label); text-transform: uppercase; letter-spacing: 0;
  padding: 13px 18px; text-decoration: none; cursor: pointer;
  border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  box-shadow: 4px 4px 0 var(--hard);
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hard); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--hard); }
.btn.primary { background: var(--ember); color: var(--on-ember); }
.btn.small { padding: 9px 12px; font-size: var(--j1); box-shadow: 3px 3px 0 var(--hard); }
.btn.small:hover { box-shadow: 1px 1px 0 var(--hard); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.small svg { width: 14px; height: 14px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--label); font-size: var(--j1); font-weight: 400;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; background: var(--ember-wash); color: var(--ink);
  white-space: nowrap; clip-path: var(--notch); line-height: 1.3;
}
.pill {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--label); font-size: var(--j1); font-weight: 400;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 9px; white-space: nowrap; line-height: 1.2;
  clip-path: var(--notch); background: var(--paper); box-shadow: inset 0 0 0 2px transparent;
}
.pill.watching { color: var(--ink-2); background: var(--rule); }
.pill.scored { color: var(--ember-deep); background: color-mix(in srgb, var(--ember-wash) 45%, var(--card)); box-shadow: inset 0 0 0 2px var(--ember-wash); }
.pill.held { color: var(--gold-deep); background: var(--gold-wash); }
.pill.launching { color: var(--on-ember); background: var(--ember); }
.pill.launched { color: var(--on-ember); background: var(--ember); }
.pill.passed { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 2px var(--rule); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding-block: clamp(36px, 6vw, 80px) clamp(32px, 5vw, 64px); }
/* the one textured surface: a faint 2px dither, fading out downwards */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: conic-gradient(var(--dither) 25%, transparent 0 50%, var(--dither) 0 75%, transparent 0);
  background-size: 4px 4px;
  -webkit-mask-image: linear-gradient(#000 0 30%, transparent 100%); mask-image: linear-gradient(#000 0 30%, transparent 100%);
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { font-size: var(--title-xl); line-height: 1.02; font-weight: 400; }
.hero h1 .mark {
  background: linear-gradient(transparent 64%, var(--gold) 64%, var(--gold) 92%, transparent 92%);
  padding-inline: 0.08em; margin-inline: -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero .lede { font-size: var(--step-1); color: var(--ink-2); max-width: 34em; margin-top: 22px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero .eyebrow { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 18px; }
:root[data-theme="dark"] .hero h1 .mark { background: none; color: var(--ember); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1 .mark { background: none; color: var(--ember); } }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }

/* the live judging card */
.judge {
  position: relative; background: var(--card); border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--hard); padding: 18px 20px 16px; min-width: 0;
}
.judge::before { /* a title bar, like a window in an old OS */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--ember);
  border-bottom: 2px solid var(--ink);
}
.judge .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.judge .feed { display: flex; align-items: center; gap: 8px; font-family: var(--label); font-weight: 400; font-size: var(--j1); color: var(--ink-2); letter-spacing: 0; text-transform: uppercase; }
.judge .story { margin-top: 14px; min-height: 5.6em; }
.judge .story .outlet { font-size: var(--step--1); color: var(--ink-2); }
.judge .story h3 { font-family: var(--text); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.005em; line-height: 1.3; margin-top: 6px; }
.judge .sheet { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 2px dashed var(--rule-strong); }
.dial { position: relative; width: 112px; height: 112px; flex: none; }
.dial svg { display: block; width: 112px; height: 112px; }
.dial .track { fill: var(--rule); }
.dial .val { fill: var(--ember); }
.dial .val.over { fill: var(--ember-deep); }
.dial .line { fill: var(--ink); }
.dial .num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dial .num b { font-family: var(--label); letter-spacing: 0; font-size: var(--j15); font-weight: 400; line-height: 1; }
.dial .num small { font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; color: var(--ink-2); margin-top: 4px; }
.dial.sm .num b { font-size: var(--j1); letter-spacing: 0; }
.dial.sm .num small { font-size: var(--j1); margin-top: 2px; }
.parts { display: grid; gap: 8px; min-width: 0; }
.judge .parts-slot { width: 100%; min-width: 0; }
.part { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) 2.6em; gap: 8px; align-items: center; font-size: 0.75rem; }
.part .name { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part .rail { position: relative; height: 8px; background: var(--rule); -webkit-mask-image: var(--segs); mask-image: var(--segs); }
.part .fill { height: 100%; background: var(--ember); }
.part .pts { font-family: var(--mono); text-align: right; font-size: 0.6875rem; }
.judge .verdict { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; min-height: 64px; }
.judge .verdict .says { display: block; flex: 1; min-width: 0; margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--j15); line-height: 1.2; }
.judge .verdict .says small { display: block; font-family: var(--text); font-weight: 400; color: var(--ink-2); font-size: var(--step--1); margin-top: 2px; }
.coin-out { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity 0.3s steps(3, end), transform 0.3s steps(3, end); }
.coin-out.show { opacity: 1; transform: none; }
.coin-out .sym { font-family: var(--label); font-weight: 400; font-size: var(--j15); }
.rosette { width: 54px; height: 64px; flex: none; }
@media (max-width: 480px) {
  .judge .sheet { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .parts { width: 100%; }
}
/* Sniffr peeking over the top of the judging card, behind it, on a two-frame bob */
.hero-copy { min-width: 0; }
.hero-card { position: relative; min-width: 0; }
.hero-card .judge { z-index: 1; }
.peek { position: absolute; z-index: 0; right: 26px; top: -54px; width: 96px; height: 96px; pointer-events: none; }
.peek svg { animation: bob 1.2s steps(1, end) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (max-width: 900px) { .hero-card { margin-top: 58px; } }

/* ---------------------------------------------------------------- facts strip */
.facts { border-block: 2px solid var(--ink); background: var(--card); }
.facts .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { padding: 18px 18px 18px 0; display: grid; gap: 4px; min-width: 0; }
.fact + .fact { padding-left: 18px; border-left: 2px solid var(--rule); }
.fact b { font-family: var(--label); letter-spacing: 0; font-size: var(--j2); font-weight: 400; line-height: 1.1; }
.fact span { font-size: var(--step--1); color: var(--ink-2); }
@media (max-width: 760px) {
  .facts .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 2px solid var(--rule); }
  .fact b { font-size: var(--j2); }
}

/* ---------------------------------------------------------------- sections */
.section { padding-block: clamp(48px, 7vw, 96px); }
.section + .section { border-top: 2px solid var(--rule); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head h2 { font-size: var(--title-l); }
.section-head p { color: var(--ink-2); max-width: 40em; margin-top: 12px; }
.section-head .eyebrow { margin-bottom: 12px; display: block; }
.page-head { padding-block: clamp(36px, 6vw, 64px) 8px; }
.page-head h1 { font-size: var(--title-xl); }
.page-head p { color: var(--ink-2); font-size: var(--step-1); max-width: 38em; margin-top: 16px; }
.page-head .eyebrow { display: block; margin: 0 0 14px; font-size: var(--j1); max-width: none; }
.page-head + .section { padding-top: clamp(20px, 3vw, 32px); }

/* ---------------------------------------------------------------- coin cards (dog tags) */
.tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 20px; }
.tag {
  position: relative; display: grid; gap: 14px; background: var(--card); color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--hard);
  padding: 30px 18px 18px; min-width: 0;
}
.tag::before { /* the ring hole of a dog tag, a pixel ring */
  content: ''; position: absolute; top: 9px; left: 50%; width: 14px; height: 14px; margin-left: -7px;
  background: var(--paper); border: 2px solid var(--ink); clip-path: var(--notch);
}
.tag:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hard); }
.tag .id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar { width: 56px; height: 56px; flex: none; background: var(--ember-wash); object-fit: cover; border: 2px solid var(--ink); }
.avatar.lg { width: 96px; height: 96px; border-width: 3px; box-shadow: 4px 4px 0 var(--hard); }
.tag .sym { font-family: var(--label); letter-spacing: 0; font-weight: 400; font-size: var(--j15); line-height: 1.1; overflow-wrap: anywhere; }
.tag .name { color: var(--ink-2); font-size: 0.875rem; }
.tag .why { font-size: 0.875rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.tag .why .co { font-weight: 700; }
.tag .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--step--1); color: var(--ink-2); }
.tag .row b { font-family: var(--label); color: var(--ink); font-size: var(--j1); font-weight: 400; }
/* the curve to graduation: a segmented bar */
.curve { display: grid; gap: 6px; }
.curve .rail { position: relative; height: 10px; background: var(--rule); -webkit-mask-image: var(--segs); mask-image: var(--segs); }
.curve .fill { position: absolute; inset: 0 auto 0 0; background: var(--ember); }
.curve.done .fill { background: var(--gold); }
.curve .labels { display: flex; justify-content: space-between; gap: 10px; font-size: 0.6875rem; color: var(--ink-3); font-family: var(--mono); }

/* ---------------------------------------------------------------- the ring (stories) */
.ring { display: grid; border-top: 2px solid var(--ink); }
.story-row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(170px, 230px) 128px; gap: 18px; align-items: center;
  padding: 16px 6px; border-bottom: 2px solid var(--rule); color: inherit; text-decoration: none;
}
.story-row:hover { background: var(--card); box-shadow: inset 4px 0 0 var(--ember); }
.story-row .co { font-family: var(--label); font-size: var(--j1); font-weight: 400; }
.story-row .co small { display: block; color: var(--ink-3); font-weight: 400; font-family: var(--text); font-size: 0.75rem; }
.story-row .hl { font-weight: 600; line-height: 1.35; min-width: 0; }
.story-row .meta { font-size: 0.75rem; color: var(--ink-2); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.story-row .coin { font-family: var(--label); font-weight: 400; color: var(--ink); font-size: var(--j1); }
.story-row .seal { display: inline-flex; align-items: center; gap: 5px; }
.story-row .seal svg { width: 12px; height: 12px; }
.story-row .st { justify-self: end; }
/* the score bar: segmented, with the line drawn over it */
.scorebar { display: grid; gap: 5px; min-width: 0; }
.scorebar .top-line { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ink-2); }
.scorebar .top-line b { font-family: var(--label); color: var(--ink); font-weight: 400; font-size: var(--j1); line-height: 1; }
.scorebar .rail { position: relative; height: 10px; }
.scorebar .seg { position: absolute; inset: 0; background: var(--rule); -webkit-mask-image: var(--segs); mask-image: var(--segs); }
.scorebar .fill { position: absolute; inset: 0 auto 0 0; background: var(--ink-3); }
.scorebar.over .fill { background: var(--ember-deep); }
.scorebar.near .fill { background: var(--ember); }
.scorebar .line { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
@media (max-width: 820px) {
  .story-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "co st" "hl hl" "sb sb"; gap: 8px 12px; }
  .story-row .co { grid-area: co; display: flex; gap: 8px; align-items: baseline; }
  .story-row .co small { display: inline; }
  .story-row > .body { grid-area: hl; }
  .story-row .scorebar { grid-area: sb; }
  .story-row .st { grid-area: st; }
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filters button {
  font: 400 var(--j1)/1 var(--label); text-transform: uppercase; letter-spacing: 0; padding: 9px 11px; cursor: pointer;
  border: 2px solid var(--rule-strong); background: var(--card); color: var(--ink-2);
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.toolbar .filters { margin-bottom: 0; }
.toolbar input {
  font: 500 0.9375rem var(--text); padding: 10px 14px; border: 2px solid var(--ink);
  background: var(--card); color: var(--ink); min-width: 0; flex: 1 1 220px; max-width: 360px; border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--rule);
}
.toolbar input::placeholder { color: var(--ink-3); }
.toolbar input:focus { outline: none; border-color: var(--ember-deep); box-shadow: inset 2px 2px 0 var(--rule), 0 0 0 2px var(--ember-wash); }

/* ---------------------------------------------------------------- how it works: the scent trail */
.trail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.trail .path {
  position: absolute; left: 52px; right: calc(25% - 68px); top: 51px; height: 4px; z-index: 0;
  background-image: linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 12px); background-size: 12px 4px;
}
.step { position: relative; z-index: 1; display: grid; gap: 10px; align-content: start; min-width: 0; }
.step .art {
  width: 104px; height: 104px; display: grid; place-items: center;
  background: var(--card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--hard);
}
.step .art svg { width: 60px; height: 60px; }
.step .n { font-family: var(--label); font-weight: 400; font-size: var(--j1); letter-spacing: 0; color: var(--ember-deep); margin-top: 10px; }
.step h3 { font-size: var(--j15); }
.step p { color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 860px) {
  .trail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trail .path { display: none; }
}
@media (max-width: 460px) { .trail { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- judging sheet, house rules, terms */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.sheet-card { background: var(--card); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--hard); padding: 8px 22px 20px; }
.sheet-card .title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 12px; border-bottom: 2px solid var(--ink); }
.sheet-card .title b { font-family: var(--display); font-size: var(--j15); font-weight: 400; }
.criterion { display: grid; grid-template-columns: minmax(0, 1fr) 140px 3.4em; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 2px dashed var(--rule); }
.criterion:last-of-type { border-bottom: 0; }
.criterion .what b { display: block; font-weight: 700; }
.criterion .what span { font-size: 0.8125rem; color: var(--ink-2); }
.criterion .bar { height: 12px; background: var(--rule); -webkit-mask-image: var(--segs); mask-image: var(--segs); }
.criterion .bar i { display: block; height: 100%; background: var(--ember); }
.criterion .max { font-family: var(--label); letter-spacing: 0; font-size: var(--j15); font-weight: 400; text-align: right; }
.sheet-card .line-note { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; background: var(--gold-wash); font-size: 0.875rem; clip-path: var(--notch-2); }
.sheet-card .line-note b { font-family: var(--label); font-weight: 400; font-size: var(--j1); }
.sheet-card .line-note svg { width: 20px; height: 20px; flex: none; color: var(--leaf-deep); }
@media (max-width: 520px) { .criterion { grid-template-columns: minmax(0, 1fr) 3.4em; } .criterion .bar { display: none; } }

.rules { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.rules li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 2px solid var(--rule); }
.rules li svg { width: 18px; height: 18px; margin-top: 3px; }
.rules li b { font-weight: 700; }
.rules li span { color: var(--ink-2); font-size: 0.9375rem; }

/* the rules between terms are the grid's gaps over a rule-coloured background, so any count of terms lines up */
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; border: 2px solid var(--ink); background: var(--rule); box-shadow: 6px 6px 0 var(--hard); }
.term { padding: 18px 20px; background: var(--card); display: grid; gap: 6px; align-content: start; }
.term b { font-family: var(--label); letter-spacing: 0; font-size: var(--j15); font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; }
.term span { font-size: 0.875rem; color: var(--ink-2); }
@media (max-width: 820px) {
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .term:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .terms { grid-template-columns: minmax(0, 1fr); box-shadow: 4px 4px 0 var(--hard); } }

/* ---------------------------------------------------------------- launch fees → claimed → split burn / costs */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 0; align-items: stretch; box-shadow: 6px 6px 0 var(--hard); }
.flow .node { position: relative; padding: 20px 20px 20px 24px; background: var(--card); border: 2px solid var(--ink); display: grid; gap: 6px; align-content: start; min-width: 0; }
.flow .node + .node { border-left: 0; }
/* a pixel arrowhead over the seam between two nodes */
.flow .node + .node::before {
  content: ''; position: absolute; left: -2px; top: 50%; width: 10px; height: 20px; margin-top: -10px; background: var(--ink); z-index: 1;
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 8px 6px, 8px 8px, 10px 8px, 10px 12px, 8px 12px, 8px 14px, 6px 14px, 6px 16px, 4px 16px, 4px 18px, 2px 18px, 2px 20px, 0 20px);
}
.flow .node svg { width: 34px; height: 34px; }
.flow .node b { font-family: var(--label); font-size: var(--j1); font-weight: 400; line-height: 1.25; text-transform: uppercase; }
.flow .node span { font-size: 0.875rem; color: var(--ink-2); }
.flow .node.fork { padding: 0; grid-template-rows: 1fr 1fr; gap: 0; overflow: hidden; }
.flow .fork .half { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; align-content: center; padding: 14px 18px 14px 24px; }
.flow .fork .half svg { grid-row: span 2; align-self: center; }
.flow .fork .half.burn { background: var(--cherry-wash); border-bottom: 2px dashed var(--ink); }
.flow .fork .half.costs { background: var(--ember-wash); }
@media (max-width: 820px) {
  .flow { grid-template-columns: minmax(0, 1fr); box-shadow: 4px 4px 0 var(--hard); }
  .flow .node { padding: 22px 20px 20px; }
  .flow .node + .node { border-left: 2px solid var(--ink); border-top: 0; }
  .flow .node + .node::before { left: 50%; top: -6px; margin: 0 0 0 -5px; transform: rotate(90deg); }
  .flow .fork .half { padding: 20px 18px 16px; }
}
/* the totals: everything claimed as one segmented bar, cut into burned / costs / not split yet */
.splitbar { margin-top: 26px; background: var(--ink); color: var(--paper); padding: 22px 24px; display: grid; gap: 14px; box-shadow: 6px 6px 0 var(--ember); }
.splitbar .eyebrow { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.splitbar-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.splitbar-head b { font-family: var(--label); font-size: var(--j2); font-weight: 400; letter-spacing: 0; }
.splitbar-rail { display: flex; height: 18px; background: color-mix(in srgb, var(--paper) 18%, transparent); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); }
.splitbar-rail i { display: block; height: 100%; }
.splitbar-rail i.burn, .splitbar-keys .burn i { background: var(--cherry); }
.splitbar-rail i.costs, .splitbar-keys .costs i { background: var(--ember); }
.splitbar-rail i.wait, .splitbar-keys .wait i { background: color-mix(in srgb, var(--paper) 35%, transparent); }
.splitbar-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; }
.splitbar-keys .k { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 2px 10px; align-items: center; }
.splitbar-keys .k i { width: 12px; height: 12px; }
.splitbar-keys .k b { grid-column: 2; font-family: var(--label); font-size: var(--j15); font-weight: 400; letter-spacing: 0; }
.splitbar-keys .k small { grid-column: 2; color: color-mix(in srgb, var(--paper) 70%, transparent); font-size: 0.8125rem; }
.splitbar-keys .k span { font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; }
.splitbar .unit { font-family: var(--text); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: color-mix(in srgb, var(--paper) 72%, transparent); }
.burn-log { margin-top: clamp(40px, 6vw, 72px); }
.fine-print { font-size: 0.8125rem; }

.table-wrap { overflow-x: auto; border: 2px solid var(--ink); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 2px solid var(--rule); white-space: nowrap; }
th { font-family: var(--label); font-size: var(--j1); font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: var(--ink-2); background: var(--paper); border-bottom-color: var(--ink); }
tr:last-child td { border-bottom: 0; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
th.num { text-align: right; }
.step-tag { font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; padding: 3px 8px; clip-path: var(--notch); background: var(--rule); }
.step-tag.burn { background: var(--cherry-wash); }
.step-tag.costs { background: var(--ember-wash); }
.step-tag.sell { background: var(--gold-wash); }
.step-tag.claim { background: var(--leaf-wash); }

/* ---------------------------------------------------------------- story page */
.story-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; padding-block: clamp(28px, 5vw, 56px) 24px; }
.story-head h1 { font-family: var(--text); font-weight: 700; font-size: var(--step-4); letter-spacing: -0.02em; line-height: 1.15; }
.story-head .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 14px; color: var(--ink-2); font-size: 0.875rem; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 860px) { .story-head, .story-grid { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--card); border: 2px solid var(--rule-strong); padding: 18px 20px; min-width: 0; }
.panel h2 { font-size: var(--j15); margin-bottom: 12px; }
.gates { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.gates li { display: grid; grid-template-columns: 22px 3em minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 2px dashed var(--rule); font-size: 0.875rem; align-items: start; }
.gates li:last-child { border-bottom: 0; }
.gates svg { width: 16px; height: 16px; margin-top: 3px; }
.gates .gid { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); margin-top: 2px; }
.sources { list-style: none; padding: 0; margin: 0; display: grid; }
.sources li { padding: 10px 0; border-bottom: 2px solid var(--rule); font-size: 0.875rem; }
.sources li:last-child { border-bottom: 0; }
.sources .o { font-weight: 700; }
.spark { width: 100%; height: auto; display: block; }
.sealed { display: grid; place-items: center; gap: 10px; text-align: center; padding: 28px 12px; color: var(--ink-2); }
.sealed svg { width: 32px; height: 32px; color: var(--ink-3); }

.panel.wide { grid-column: 1 / -1; }
.panel > * + * { margin-top: 12px; }
.story-head .reason { margin-top: 12px; }
.h2-inline { font-size: var(--step-4); margin: 12px 0 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn.is-off { opacity: 0.55; cursor: default; box-shadow: none; }
.btn.is-off:hover { transform: none; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 2px dashed var(--rule); font-size: 0.875rem; }
.kv span { color: var(--ink-2); }
.coin-hero { display: flex; align-items: center; gap: 20px; }
.coin-banner { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border: 2px solid var(--ink); margin-bottom: 26px; image-rendering: pixelated; box-shadow: 6px 6px 0 var(--hard); }
.mono-h { font-family: var(--label); letter-spacing: 0; font-weight: 400; font-size: var(--j25); line-height: 1.1; overflow-wrap: anywhere; }
.coin-hero p { margin-top: 6px; }
.coin-hero .eyebrow { display: block; margin-bottom: 6px; }
.sheet-inline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; }
.coin-mini { display: flex; align-items: center; gap: 12px; }
.sym-lg { font-family: var(--label); letter-spacing: 0; font-size: var(--j15); font-weight: 400; }
svg.ok { color: var(--leaf); }
svg.no { color: var(--cherry); }
@media (max-width: 520px) { .coin-hero { flex-direction: column; align-items: start; } .sheet-inline { grid-template-columns: minmax(0, 1fr); justify-items: center; } }

/* ---------------------------------------------------------------- faq + footer */
.faq { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 2px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 2px; font-weight: 700; font-size: var(--step-1); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ember-deep); }
/* the marker: a pixel box with a plus (a minus when open) */
.faq summary::after {
  content: ''; flex: none; width: 20px; height: 20px; border: 2px solid var(--ink); background-color: var(--card);
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: 8px 2px, 2px 8px; background-position: center; background-repeat: no-repeat;
}
.faq details[open] summary::after { background-color: var(--ember); background-size: 8px 2px, 0 0; }
.faq details p { padding: 0 2px 18px; color: var(--ink-2); max-width: 62em; }

.foot { border-top: 2px solid var(--ink); margin-top: 24px; padding-block: 32px 40px; font-size: 0.875rem; color: var(--ink-2); background: var(--card); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.foot .fine { max-width: 60em; }
.foot .logo { margin-bottom: 12px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot nav a { font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; text-decoration: none; color: var(--ink-2); }
.foot nav a:hover { color: var(--ember-deep); }
@media (max-width: 700px) { .foot .wrap { grid-template-columns: minmax(0, 1fr); } }

.empty { padding: 36px 16px; text-align: center; color: var(--ink-2); border: 2px dashed var(--rule-strong); }
.more { display: flex; justify-content: center; margin-top: 26px; }

/* ---------------------------------------------------------------- accents (a coin's colour, a milestone's) */
/* the accent keys; the older names (blue, red, yellow, green, violet) still work */
[data-accent="ember"], [data-accent="blue"] { --accent: var(--ember); --accent-wash: var(--ember-wash); --accent-ink: var(--ember-deep); }
[data-accent="cherry"], [data-accent="red"] { --accent: var(--cherry); --accent-wash: var(--cherry-wash); --accent-ink: var(--cherry); }
[data-accent="gold"], [data-accent="yellow"] { --accent: var(--gold); --accent-wash: var(--gold-wash); --accent-ink: var(--gold-deep); }
[data-accent="leaf"], [data-accent="green"] { --accent: var(--leaf); --accent-wash: var(--leaf-wash); --accent-ink: var(--leaf-deep); }
[data-accent="plum"], [data-accent="violet"] { --accent: var(--plum); --accent-wash: var(--plum-wash); --accent-ink: var(--plum); }
[data-accent] { --on-accent: #1d1612; }
.ribbon { display: block; width: 64px; height: 76px; flex: none; overflow: visible; }
/* a coin card's milestones: the rosettes it holds, the next one filling up, and a line of text */
.tag .tag-ms { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; background: var(--paper); border: 2px solid var(--rule); }
.tag .tag-ms-ros { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.tag .tag-ms-ros .ribbon { width: 24px; height: 28px; }
.tag .tag-ms-txt { display: flex; flex-direction: column; min-width: 0; font-size: 0.8125rem; line-height: 1.3; }
.tag .tag-ms-txt b { font-family: var(--label); font-weight: 400; font-size: var(--j1); }
.tag .tag-ms-txt small { font-size: 0.75rem; color: var(--ink-2); }

/* what each milestone unlocks */
.ms-table td:first-child { white-space: nowrap; font-weight: 600; }
.ms-dot { display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--ember); vertical-align: 0; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); margin-left: 4px; }
.ms-dot.cherry, .ms-dot.red { background: var(--cherry); }
.ms-dot.leaf, .ms-dot.green { background: var(--leaf); }
.ms-dot.plum, .ms-dot.violet { background: var(--plum); }
.ms-dot.gold, .ms-dot.yellow { background: var(--gold); }

/* a shelf of rosette cards (1200x675) */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.rcard { display: grid; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
a.rcard:hover .rcard-img, a.rcard:hover .rcard-art { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hard); }
.rcard-img, .rcard-art { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 675; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--hard); object-fit: cover; background: var(--card); }
.rcard-art { position: relative; overflow: hidden; background: #faf8f5; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; padding: 6% 6% 16%; }
.rcard-art::before { content: ''; position: absolute; left: 5%; top: 9%; width: 42%; height: 66%; background: var(--accent); border: 2px solid #1d1612; }
.rcard-sprite { position: relative; width: 62%; height: auto; aspect-ratio: 1; image-rendering: pixelated; border: 2px solid #1d1612; }
.rcard-art .ribbon { position: relative; width: 52%; height: auto; }
.rcard-sym { position: absolute; left: 6%; bottom: 6%; font-family: var(--label); font-weight: 400; font-size: var(--j1); color: #1d1612; }
.rcard-meta { display: flex; align-items: baseline; gap: 8px; font-size: 0.875rem; min-width: 0; margin-top: 4px; }
.rcard-meta b { font-family: var(--label); font-weight: 400; }
.rcard-meta small { margin-left: auto; color: var(--ink-3); font-size: 0.75rem; white-space: nowrap; }

/* the ladder of one coin: market-cap rungs on a segmented line, then holders, graduation, the listing */
.ladder { display: grid; gap: 22px; }
.ladder-row { display: grid; gap: 8px; }
.ladder-row.mcap { position: relative; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ladder-row.more { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 18px; border-top: 2px dashed var(--rule-strong); }
.ladder-line { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 30px; height: 6px; background: var(--rule); -webkit-mask-image: var(--segs); mask-image: var(--segs); }
.ladder-line i { display: block; height: 100%; background: var(--ink); }
.rung { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; color: inherit; text-decoration: none; min-width: 0; }
.rung .ribbon { width: min(64px, 100%); height: auto; }
.rung b { font-family: var(--label); font-size: var(--j1); font-weight: 400; margin-top: 4px; }
.rung .perk { font-size: 0.6875rem; color: var(--ink-2); line-height: 1.25; }
.rung small { font-size: 0.6875rem; color: var(--ink-3); }
.rung.next small { color: var(--ember-deep); font-weight: 700; }
.rung.locked b { color: var(--ink-3); }
a.rung:hover .ribbon { transform: translateY(-2px); }
@media (max-width: 560px) {
  .ladder-row.more { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .rung .perk { display: none; }
  .rung .ribbon { width: min(48px, 100%); }
  .ladder-line { top: 22px; }
}
.ladder-panel .panel-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ladder-panel .panel-top h2 { margin: 0; }
.site-locked { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-2); }
.site-locked svg { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------- a coin's own website (/TICKER) */
.top-coins { display: none; align-items: center; gap: 8px; font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.top-coins:hover { color: var(--ember-deep); }
.top-coins svg { width: 14px; height: 14px; }
[data-chrome="coin"] .top .nav { display: none; }
[data-chrome="coin"] .top-coins { display: inline-flex; }
.cs-top {
  padding-block: clamp(16px, 3vw, 32px) clamp(28px, 4vw, 48px);
  /* a banded fade, in steps rather than a smooth gradient */
  background: linear-gradient(var(--accent-wash) 0 52%, color-mix(in srgb, var(--accent-wash) 66%, var(--paper)) 52% 68%, color-mix(in srgb, var(--accent-wash) 33%, var(--paper)) 68% 84%, var(--paper) 84%);
}
.cs-banner { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border: 2px solid var(--ink); image-rendering: pixelated; background: var(--card); box-shadow: 6px 6px 0 var(--hard); }
/* the logo overlaps the banner's bottom edge; the name starts below the banner */
.cs-id { display: flex; align-items: start; gap: clamp(14px, 3vw, 28px); margin-top: calc(-1 * clamp(40px, 7vw, 72px)); padding-inline: clamp(12px, 3vw, 28px); }
.cs-id .cs-name { padding-top: calc(clamp(40px, 7vw, 72px) + 12px); }
.cs-logo { position: relative; width: clamp(104px, 18vw, 168px); height: auto; aspect-ratio: 1; flex: none; border: 3px solid var(--ink); background: var(--accent); image-rendering: pixelated; box-shadow: 6px 6px 0 var(--hard); }
.cs-name { min-width: 0; padding-bottom: 4px; }
.cs-by { display: inline-flex; align-items: center; gap: 8px; font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; color: var(--ink-2); text-decoration: none; }
.cs-by:hover { color: var(--ink); }
.cs-by svg.mark { width: 39px; height: 22.5px; flex: none; overflow: visible; }
.cs-sym { font-family: var(--label); letter-spacing: 0; font-weight: 400; font-size: var(--title-xl); line-height: 1.05; overflow-wrap: anywhere; margin-top: 8px; }
.cs-name p { color: var(--ink-2); font-size: var(--step-1); margin-top: 4px; }
.cs-origin { margin-top: 24px; font-size: var(--step-1); max-width: 44em; }
.cs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; border: 2px solid var(--ink); background: var(--card); }
.cs-stats > div { display: grid; gap: 2px; padding: 12px 16px; min-width: 0; }
.cs-stats > div + div { border-left: 2px solid var(--rule); }
.cs-stats span { font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; letter-spacing: 0; color: var(--ink-2); }
.cs-stats b { font-family: var(--label); letter-spacing: 0; font-size: var(--j15); font-weight: 400; }
.cs-top .actions { margin-top: 22px; }
.cs .btn.primary { background: var(--accent); color: var(--on-accent); }
.cs-ca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; }
.cs-ca code { font-size: 0.8125rem; padding: 7px 12px; background: var(--card); border: 2px solid var(--rule-strong); overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cs-chips .chip { background: var(--card); box-shadow: inset 0 0 0 2px var(--rule-strong); }
.cs-story { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.cs-headline { margin: 12px 0 12px; font-family: var(--display); font-weight: 400; font-size: var(--title-l); line-height: 1.12; text-wrap: balance; }
.cs-headline::before { content: '“'; color: var(--accent-ink); }
.cs-headline::after { content: '”'; color: var(--accent-ink); }
.cs-story .sources { margin-top: 14px; border-top: 2px solid var(--rule); }
.cs-judged { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.cs-judged b { font-family: var(--display); font-weight: 400; font-size: var(--j15); }
.cs-judged p { margin: 6px 0 12px; font-size: 0.875rem; }
.cs-head { margin-bottom: 24px; }
.cs-head h2 { font-size: var(--title-l); margin: 10px 0 8px; }
.cs .shelf { margin-bottom: 30px; }
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.route .hop { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 2px solid var(--ink); background: var(--card); box-shadow: 4px 4px 0 var(--hard); }
.route .hop b { font-family: var(--label); font-weight: 400; font-size: var(--j1); }
.route .hop small { color: var(--ink-2); font-size: 0.75rem; }
.route .hop.main { background: var(--gold-wash); }
.route .hop.coin { background: var(--accent-wash); }
.route .hop img { width: 28px; height: 28px; image-rendering: pixelated; border: 2px solid var(--ink); }
.route .arrow svg { width: 20px; height: 20px; color: var(--ink-2); display: block; }
.cs-steps { list-style: none; counter-reset: step; margin: 26px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs-steps li { counter-increment: step; display: grid; gap: 4px; align-content: start; padding: 16px 18px; background: var(--card); border: 2px solid var(--rule-strong); }
.cs-steps li::before { content: counter(step); font-family: var(--label); font-size: var(--j1); font-weight: 400; width: 28px; height: 28px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink); margin-bottom: 8px; }
.cs-steps b { font-weight: 700; }
.cs-steps span { font-size: 0.875rem; color: var(--ink-2); }
.cs-foot p { color: var(--ink-2); max-width: 52em; margin-bottom: 18px; font-size: 0.9375rem; }
@media (max-width: 760px) {
  .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-stats > div:nth-child(3) { border-left: 0; }
  .cs-stats > div:nth-child(n+3) { border-top: 2px solid var(--rule); }
  .cs-story, .cs-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .cs-id { flex-direction: column; align-items: start; gap: 12px; }
  .cs-id .cs-name { padding-top: 0; }
  .cs-judged { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .route { flex-direction: column; align-items: flex-start; gap: 8px; }
  .route .arrow { padding-left: 24px; }
  .route .arrow svg { transform: rotate(90deg); }
}
@media (max-width: 560px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .rcard-sym { display: none; }
  .rcard-art { padding: 6%; }
  .rcard-art::before { top: 9%; height: 82%; }
  .rcard-meta { flex-wrap: wrap; gap: 0 6px; font-size: 0.8125rem; }
  .rcard-meta small { margin-left: 0; width: 100%; }
}

/* the locked state: the coin's website before $10K */
.cs-locked { padding-block: clamp(36px, 7vw, 88px); }
.kennel { max-width: 640px; margin-inline: auto; text-align: center; display: grid; justify-items: center; gap: 16px; }
.kennel h1 { font-size: var(--title-l); }
.kennel .lede { font-size: var(--step-1); color: var(--ink-2); }
.kennel .lede b { font-family: var(--label); font-weight: 400; color: var(--ink); }
.kennel-art { position: relative; width: 128px; height: 128px; margin-bottom: 10px; }
.kennel-sprite { width: 128px; height: 128px; border: 3px solid var(--ink); image-rendering: pixelated; filter: grayscale(0.55); box-shadow: 6px 6px 0 var(--hard); }
.kennel-lock { position: absolute; right: -14px; bottom: -14px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--gold); border: 2px solid #1d1612; color: #1d1612; box-shadow: 2px 2px 0 #1d1612; }
.kennel-lock svg { width: 20px; height: 20px; }
.unlock { width: 100%; display: grid; gap: 8px; }
.unlock-rail { position: relative; height: 22px; padding: 3px; background: var(--card); border: 2px solid var(--ink); }
.unlock-rail .seg { position: relative; height: 100%; background: var(--rule); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); }
.unlock-rail .fill { position: absolute; inset: 0 auto 0 0; background: var(--ember); }
.unlock-labels { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2); }
.kennel .actions { justify-content: center; margin-top: 8px; }

/* page enter: a two-step drop, no easing */
main > * { animation: rise 0.24s steps(2, end) both; }
main > *:nth-child(2) { animation-delay: 0.04s; }
main > *:nth-child(3) { animation-delay: 0.08s; }
@keyframes rise { from { transform: translateY(8px); } to { transform: none; } }
.pop { animation: pop 0.36s steps(3, end) both; }
@keyframes pop { from { transform: scale(0.4); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .coin-out { opacity: 1; transform: none; }
  .coin-out:not(.show) { visibility: hidden; }
}

/* the footer sits at the bottom of short pages */
#app { min-height: 100vh; display: flex; flex-direction: column; }
#app > main { flex: 1 0 auto; }
.page-head .actions { margin-top: 26px; }
.sheet-card .title b { line-height: 1.1; }
.sheet-card .title .eyebrow { white-space: nowrap; }
@media (max-width: 480px) {
  .sheet-card { padding-inline: 16px; }
  .sheet-card .title b { font-size: var(--j15); }
  /* a coin's site: the mark alone, so its link back and the theme switch share one line */
  [data-chrome="coin"] .top .logo .word { display: none; }
}

/* ---------------------------------------------------------------- what a coin unlocks (home) */
/* Two framed pictures of the perks: the coin's website in a browser window, its DexScreener profile header. */
.unlocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 860px) { .unlocks { grid-template-columns: minmax(0, 1fr); } }
.unlock { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 22px; background: var(--card); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--hard); }
.unlock-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.unlock-at { font-family: var(--label); font-weight: 400; font-size: var(--j1); padding: 5px 9px; background: var(--ember); color: var(--on-ember); clip-path: var(--notch); }
.unlock h3 { font-size: var(--j15); }
.unlock > p { color: var(--ink-2); }
.unlock > p b { color: var(--ink); font-size: 0.9375rem; overflow-wrap: anywhere; }
.unlock-art { min-width: 0; overflow: hidden; background: var(--paper); border: 2px solid var(--ink); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--rule); border-bottom: 2px solid var(--ink); }
.browser-bar i { flex: none; width: 8px; height: 8px; background: var(--ink-3); }
.browser-bar .url { flex: 1; min-width: 0; margin-left: 8px; padding: 3px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; background: var(--card); border: 2px solid var(--ink); }
.browser-bar .url b { color: var(--ember-deep); }
.unlock-banner { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; image-rendering: pixelated; }
.unlock-coin { display: flex; align-items: center; gap: 12px; padding: 0 12px 12px; }
.unlock-coin .avatar { width: 52px; height: 52px; margin-top: -22px; background: var(--card); image-rendering: pixelated; }
.unlock-coin b { display: block; font-family: var(--label); font-size: var(--j1); overflow-wrap: anywhere; }
.unlock-coin small { display: block; font-size: 0.8125rem; color: var(--ink-2); }
.unlock-buy { flex: none; font-family: var(--label); font-weight: 400; font-size: var(--j1); padding: 8px 12px; background: var(--ember); color: var(--on-ember); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--hard); }
.unlock-coin .unlock-ok { flex: none; width: 22px; height: 22px; color: var(--ember-deep); }
.unlock-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.unlock-links span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; font-family: var(--label); font-weight: 400; font-size: var(--j1); text-transform: uppercase; border: 2px solid var(--rule-strong); }
.unlock-links svg { width: 12px; height: 12px; }