/* ==========================================================================
   OBOL — ERC-402
   Design system: brutalist monospace skeleton, near-black ground, one green.
   ========================================================================== */

:root {
  /* Ground */
  --bg:            #000000;
  --bg-alt:        #000000;
  --panel:         #0e0e0e;
  --panel-raised:  #161616;

  /* Lines */
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.16);
  --bracket:       rgba(255, 255, 255, 0.28);

  /* Type */
  --fg:            #ededed;
  --fg-dim:        #9a9a9a;
  --fg-muted:      #6b6b6b;
  --fg-faint:      #4a4a4a;

  /* The one saturated colour */
  --green:         #00c805;
  --green-bright:  #3dff42;
  --green-dim:     #00a204;
  --green-ghost:   rgba(0, 200, 5, 0.10);
  --green-line:    rgba(0, 200, 5, 0.32);

  --red:           #ff4d4d;

  /* Numismatic grade ramp: vivid green at Proof, dead grey at Good. */
  --grade-proof:   #3dff42;
  --grade-ms:      #00c805;
  --grade-ef:      #4f9b52;
  --grade-vf:      #7d8f7e;
  --grade-f:       #6b6b6b;
  --grade-g:       #4a4a4a;

  /* Type scale */
  /* JetBrains Mono is what Erebus ships; loaded via Google Fonts on every page. */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "IBM Plex Mono", Menlo,
          Consolas, "Liberation Mono", monospace;

  --fs-eyebrow: 0.625rem;
  --fs-micro:   0.6875rem;
  --fs-small:   0.75rem;
  --fs-body:    0.8125rem;
  --fs-lead:    0.9375rem;
  --fs-h3:      1.0625rem;
  --fs-h2:      2rem;
  --fs-h1:      3rem;

  /* Rhythm */
  --gut:        1.5rem;
  --section-y:  7rem;
  --maxw:       1160px;

  /* Corner brackets */
  --brk-b: 1px;
  --brk-s: 9px;
  --brk-c: var(--bracket);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

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

::selection { background: var(--green); color: #000; }

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
  position: relative;
}

.section--flush { border-top: 0; }
.section--tight { padding-block: 4.5rem; }
.section--alt { background: var(--bg-alt); }

.stack > * + * { margin-top: 1rem; }

/* ==========================================================================
   Type
   ========================================================================== */

.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 1.25rem;
}

.eyebrow--green { color: var(--green); }

.h1 {
  font-size: clamp(1.75rem, 5.2vw, var(--fs-h1));
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.h2 {
  font-size: clamp(1.5rem, 3.6vw, var(--fs-h2));
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.lead {
  font-size: var(--fs-body);
  color: var(--fg-dim);
  max-width: 46ch;
  line-height: 1.75;
}

.lead--wide { max-width: 62ch; }
.lead--center { margin-inline: auto; }

.prose { color: var(--fg-dim); max-width: 70ch; line-height: 1.8; }
.prose > * + * { margin-top: 1.1rem; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--green); border-bottom: 1px solid var(--green-line); }
.prose a:hover { border-bottom-color: var(--green); }

.dim   { color: var(--fg-dim); }
.muted { color: var(--fg-muted); }
.green { color: var(--green); }

/* Headline prefix — same weight and colour as the rest, like Erebus's hero. */
.mark {
  color: inherit;
  font-weight: inherit;
}

code, .code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--fg-dim);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.1em 0.35em;
  border: 1px solid var(--line);
}

.prose code { white-space: nowrap; }

pre {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.15rem 1.25rem;
  overflow-x: auto;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--fg-dim);
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}

pre .k  { color: var(--green); }
pre .c  { color: var(--fg-faint); font-style: normal; }
pre .s  { color: #c9a227; }

/* ==========================================================================
   Corner brackets — the signature detail
   ========================================================================== */

.brk {
  position: relative;
  background-color: var(--panel);
  background-image:
    linear-gradient(var(--brk-c) 0 0), linear-gradient(var(--brk-c) 0 0),
    linear-gradient(var(--brk-c) 0 0), linear-gradient(var(--brk-c) 0 0),
    linear-gradient(var(--brk-c) 0 0), linear-gradient(var(--brk-c) 0 0),
    linear-gradient(var(--brk-c) 0 0), linear-gradient(var(--brk-c) 0 0);
  background-repeat: no-repeat;
  background-size:
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

.brk--green { --brk-c: var(--green); }
.brk--bare  { background-color: transparent; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  background: transparent;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
  white-space: nowrap;
}

.btn:hover { border-color: var(--fg-dim); }

.btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: #000;
  font-weight: 600;
}

.btn--primary:hover {
  background: var(--green-bright);
  border-color: var(--green-bright);
}

.btn--ghost { border-color: var(--line); color: var(--fg-dim); }
.btn--ghost:hover { border-color: var(--green-line); color: var(--green); }

.btn--sm { padding: 0.4rem 0.75rem; font-size: var(--fs-eyebrow); }

.btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* Erebus-style wallet button: flat dark slab framed by corner brackets. */
.btn--wallet {
  position: relative;
  border: 1px solid var(--line);
  color: var(--fg);
  background: var(--panel-raised);
}

.btn--wallet::before {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--fg) 0 0), linear-gradient(var(--fg) 0 0),
    linear-gradient(var(--fg) 0 0), linear-gradient(var(--fg) 0 0),
    linear-gradient(var(--fg) 0 0), linear-gradient(var(--fg) 0 0),
    linear-gradient(var(--fg) 0 0), linear-gradient(var(--fg) 0 0);
  background-repeat: no-repeat;
  background-size:
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

.btn--wallet[aria-disabled="true"] {
  opacity: 1;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.icon { width: 13px; height: 13px; flex: none; fill: currentColor; }

/* ==========================================================================
   Nav
   ========================================================================== */

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

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 68px;
}

.wordmark {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
}

.wordmark span { color: var(--fg); }

.nav__links {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1.6rem;
}

/* Two auto margins split the free space evenly, centring the link group
   between the wordmark and the wallet button, as Erebus does. */
.nav__links .nav__link:first-child { margin-left: auto; }
.nav__links .btn--wallet { margin-left: auto; }

.nav__link {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  transition: color 0.15s;
  position: relative;
  padding-block: 0.35rem;
}

/* Thin vertical rule between links. */
.nav__link + .nav__link::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--line-strong);
}

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

.nav__link[aria-current="page"] { color: var(--fg); }

.nav__toggle {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  align-items: center;
  justify-content: center;
}

.nav__toggle span {
  display: block;
  width: 13px;
  height: 1px;
  background: var(--fg);
  position: relative;
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 13px;
  height: 1px;
  background: var(--fg);
}

.nav__toggle span::before { top: -4px; }
.nav__toggle span::after  { top: 4px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-block: 5.5rem 4rem;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 12% 42%, rgba(0, 200, 5, 0.13), transparent 70%),
    radial-gradient(46% 50% at 88% 8%, rgba(0, 200, 5, 0.05), transparent 70%);
}

/* Hero portrait, anchored left and fading into the black. */
.hero__statue {
  position: absolute;
  /* Full hero height at the photo's own aspect: zero cropping, zero seams.
     Pulled off-canvas by 40% of its own width so the face is cut by the
     left edge, leaving the text area black. */
  inset: 0 auto 0 0;
  transform: translateX(-38%);
  aspect-ratio: 1024 / 764;
  pointer-events: none;
  background: url(../img/hero-statue.png?v=9) 42% center / cover no-repeat;
  opacity: 0.55;
  mask-image: linear-gradient(to right, #000 74%, transparent 96%);
  -webkit-mask-image: linear-gradient(to right, #000 74%, transparent 96%);
}

.hero__inner {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .h1 { max-width: 19ch; }

.hero .lead {
  margin-top: 1.5rem;
  max-width: 56ch;
  text-align: center;
}

.hero .btn-row { margin-top: 2.25rem; justify-content: center; }

/* Ticker line under the coin strip */
.tickerline {
  margin-top: 2rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
}

.tickerline b { color: var(--fg-dim); font-weight: 400; }
.tickerline .sep { color: var(--green); }

/* ==========================================================================
   Coin strip + coin cards
   ========================================================================== */

.strip {
  margin-top: 3rem;
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

.coin {
  display: block;
  width: 112px;
  padding: 0.6rem 0.6rem 0.5rem;
  transition: transform 0.2s ease, background-color 0.2s;
}

.coin:hover { transform: translateY(-4px); background-color: var(--panel-raised); }

.coin__art {
  aspect-ratio: 1;
  background: #000000;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.coin__art svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: case-float 5s ease-in-out infinite;
}

/* The case animation — one shared clip, tinted per grade so the ladder still reads.
   Screen blending folds the clip's dark backdrop into the page, and the radial mask
   feathers the frame edges, so the video's rectangle never shows — only the case
   floating in its glow. */
.vart {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 74%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 52%, transparent 74%);
}

.vart--proof { filter: saturate(1.35) brightness(1.1); }
.vart--ef    { filter: saturate(0.8); }
.vart--vf    { filter: saturate(0.5) brightness(0.95); }
.vart--f     { filter: saturate(0.28) brightness(0.9); }
.vart--g     { filter: grayscale(1) brightness(0.85); }

.pcard__case .vart {
  aspect-ratio: 1;
  height: auto;
}

/* Stagger the strip so the five cases drift out of phase with each other. */
.strip .coin:nth-child(2) .coin__art svg { animation-delay: -1s; }
.strip .coin:nth-child(3) .coin__art svg { animation-delay: -2s; }
.strip .coin:nth-child(4) .coin__art svg { animation-delay: -3s; }
.strip .coin:nth-child(5) .coin__art svg { animation-delay: -4s; }

@keyframes case-float {
  0%, 100% { transform: translateY(2.5%); }
  50%      { transform: translateY(-2.5%); }
}

.coin__meta {
  margin-top: 0.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
}

.coin__id { color: var(--fg-dim); }
.coin__grade { color: var(--fg-faint); }

.strip .coin:nth-child(n+5) { display: none; }

@media (min-width: 720px) {
  .strip .coin:nth-child(n+5) { display: block; }
}

/* ==========================================================================
   Contract pill
   ========================================================================== */

.pill {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  background: var(--panel);
  max-width: 100%;
}

.pill__label {
  padding: 0.5rem 0.7rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.pill__addr {
  padding: 0.5rem 0.8rem;
  font-size: var(--fs-eyebrow);
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.pill__copy {
  padding-inline: 0.7rem;
  border-left: 1px solid var(--line);
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  transition: color 0.15s, background-color 0.15s;
}

.pill__copy:hover { color: var(--green); background: var(--green-ghost); }
.pill__copy.is-done { color: var(--green); }

/* ==========================================================================
   ERC-402 standard page hero
   ========================================================================== */

.stdhero {
  position: relative;
  overflow: hidden;
  padding: 7.5rem 0 6.5rem;
  border-bottom: 1px solid var(--line);
}

/* Engraved-crowd artwork, folded into the page black via screen blending and
   feathered with a radial mask so no rectangle edge ever shows. */
.stdhero__art {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: min(52vw, 640px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(ellipse 62% 68% at 36% 50%, #000 32%, transparent 76%);
          mask-image: radial-gradient(ellipse 62% 68% at 36% 50%, #000 32%, transparent 76%);
  pointer-events: none;
  user-select: none;
}

.stdhero__inner { position: relative; z-index: 1; text-align: center; }
.stdhero .h1 { margin-inline: auto; max-width: 18ch; }
.stdhero .lead { margin: 1.6rem auto 0; max-width: 54ch; }

@media (max-width: 720px) {
  .stdhero { padding: 5rem 0 4.5rem; }
  .stdhero__art { left: -18vw; width: 92vw; opacity: 0.55; }
}

/* ==========================================================================
   Section header
   ========================================================================== */

.sechead { margin-bottom: 3.25rem; max-width: 62ch; }
.sechead .h2 + .lead { margin-top: 1.1rem; }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead--center .lead { margin-inline: auto; }

/* ==========================================================================
   Cards
   ========================================================================== */

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card {
  padding: 1.6rem 1.4rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

/* A card that takes the whole row — used for announced-but-not-live products. */
.card--wide { grid-column: 1 / -1; min-height: 0; }
.card--wide p { max-width: 66ch; }

/* ------------------------------------------------ path chooser (app) */

.path__head {
  text-align: center;
  margin-bottom: 3.5rem;
}

.path__head .eyebrow { margin-bottom: 1rem; }

.path {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 980px;
  margin-inline: auto;
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  /* Erebus draws these corners in full white, not the faint default. */
  --brk-c: rgba(255, 255, 255, 0.9);
  transition: background-color 0.2s, transform 0.2s ease;
}

/* The artwork block sits flush with the card edges and paints over the
   .brk corners, so redraw them on an overlay above the content. */
.pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--brk-c) 0 0), linear-gradient(var(--brk-c) 0 0),
    linear-gradient(var(--brk-c) 0 0), linear-gradient(var(--brk-c) 0 0),
    linear-gradient(var(--brk-c) 0 0), linear-gradient(var(--brk-c) 0 0),
    linear-gradient(var(--brk-c) 0 0), linear-gradient(var(--brk-c) 0 0);
  background-repeat: no-repeat;
  background-size:
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

.pcard:hover {
  background-color: var(--panel-raised);
  transform: translateY(-3px);
}

.pcard__art {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(60% 85% at 50% 55%, rgba(0, 200, 5, 0.07), transparent 70%),
    #030303;
}

.pcard__case { width: 116px; flex-shrink: 0; }
.pcard__case--lg { width: 150px; }

.pcard__case svg {
  display: block;
  width: 100%;
  height: auto;
  animation: case-float 5s ease-in-out infinite;
}

.pcard__art .pcard__case:nth-child(1) svg { animation-delay: -1.5s; }
.pcard__art .pcard__case:nth-child(3) svg { animation-delay: -3s; }

/* The obol between the two staked cases — a slow flip, since that is the game. */
.pcard__disc {
  width: 32px;
  flex-shrink: 0;
  color: var(--green-dim);
  animation: coin-spin 4.5s linear infinite;
}

@keyframes coin-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

.pcard__body {
  flex: 1;
  padding: 1.6rem 1.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.pcard__body .card__num { margin-bottom: 0; }

.pcard__text {
  color: var(--fg-dim);
  font-size: 0.9rem;
  line-height: 1.7;
}

.pcard__go {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg);
  font-weight: 700;
  font-size: 0.85rem;
  transition: color 0.15s;
}

.pcard:hover .pcard__go,
.pcard__go:hover { color: var(--green); }

/* Stretch the enter link over the whole card. */
.pcard__go::after { content: ""; position: absolute; inset: 0; }

.pcard--soon .pcard__art { filter: grayscale(0.35) brightness(0.8); }

/* Bottom row holding the enter link and, on gated products, the Soon pill. */
.pcard__foot {
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pcard__foot .pcard__go { margin-top: 0; }

@media (max-width: 860px) {
  .path { grid-template-columns: 1fr; }
  .pcard__art { height: 215px; gap: 1.25rem; }
  .pcard__case { width: 92px; }
  .pcard__case--lg { width: 118px; }
  .pcard__disc { width: 26px; }
}

/* --------------------------------------------------- the toss (gated) */

.toss__stage { position: relative; overflow: hidden; }

/* The interface it will be — legible in shape, out of focus until it exists. */
.toss__mock {
  filter: blur(7px) saturate(0.75);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.toss__arena {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  max-width: 860px;
}

.toss__slot {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.75rem 1.5rem;
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.toss__slot-k {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.toss__slot-v { font-size: 0.8rem; color: var(--fg-dim); }

.toss__mid {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}

.toss__gate {
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(430px, calc(100% - 2rem));
  background: var(--panel);
  border: 1px solid var(--line-strong);
  padding: 2.4rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.toss__gate .eyebrow { margin-bottom: 0; }

.toss__gate-text {
  color: var(--fg-dim);
  font-size: 0.875rem;
  line-height: 1.75;
}

.toss__gate .btn { margin-top: 0.5rem; }

@media (max-width: 860px) {
  .toss__arena { grid-template-columns: 1fr; max-width: 420px; }
  .toss__mid { order: 2; }
  .toss__gate { top: 4rem; }
}

.card__num {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  color: var(--green);
  margin-bottom: 1rem;
}

.card .h3 { margin-bottom: 0.75rem; }

.card p {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  line-height: 1.75;
}

/* Numbered step list */
.steps {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.step {
  background: var(--bg);
  padding: 1.35rem 1.4rem;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.1rem;
  align-items: start;
}

.step__n {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--green);
  padding-top: 0.2rem;
}

.step__body .h3 { font-size: var(--fs-body); margin-bottom: 0.4rem; }
.step__body p { font-size: var(--fs-small); color: var(--fg-muted); }

.step--warn { background: rgba(255, 77, 77, 0.04); }
.step--warn .step__n { color: var(--red); }

/* Hover: the row lifts to the raised panel tone and the content glides right. */
.step {
  position: relative;
  transition: background-color 0.35s ease;
}

.step__n,
.step__body { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

.step:hover { background-color: var(--panel-raised); }
.step:hover .step__n { transform: translateX(0.35rem) scale(1.12); }
.step:hover .step__body { transform: translateX(0.35rem); }

/* Staggered entrance once the strike pipeline scrolls into view */
.steps[data-animate] .step { opacity: 0; }

.steps[data-animate].in .step {
  opacity: 1;
  animation: step-in 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.steps[data-animate].in .step:nth-child(2) { animation-delay: 90ms; }
.steps[data-animate].in .step:nth-child(3) { animation-delay: 180ms; }
.steps[data-animate].in .step:nth-child(4) { animation-delay: 270ms; }
.steps[data-animate].in .step:nth-child(5) { animation-delay: 360ms; }
.steps[data-animate].in .step:nth-child(6) { animation-delay: 450ms; }

@keyframes step-in {
  from { opacity: 0; transform: translateY(0.85rem); }
}

@media (prefers-reduced-motion: reduce) {
  .steps[data-animate] .step { opacity: 1; animation: none; }
  .step,
  .step::before,
  .step__n,
  .step__body { transition: none; }
}

/* ==========================================================================
   The strike — scroll-drawn timeline (index.html)
   A monochrome spine draws itself down the page as you scroll; stages light
   up as the line passes them. No boxes, no accent panels — just the line.
   ========================================================================== */

.strike-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

/* Inline code stays quiet in this section — no green chips. */
#strike code {
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

.strike-head__sub {
  margin-top: 1.4rem;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  line-height: 1.85;
}

.tl { position: relative; margin-top: 4.5rem; }

.tl__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.35rem;
  width: 1px;
  background: var(--line);
}

.tl__progress {
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, rgba(0, 200, 5, 0.15), rgba(61, 255, 66, 0.75));
  box-shadow: 0 0 10px rgba(0, 200, 5, 0.35);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tl--go .tl__progress { opacity: 1; }

/* Fletching rides the top of the shaft; the arrowhead leads the tip down. */
.tl__progress::before,
.tl__progress::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.tl__progress::before {
  top: -6px;
  width: 30px;
  height: 42px;
  background-image: url("../img/arrow-fletch.png");
}

.tl__progress::after {
  bottom: -34px;
  width: 26px;
  height: 39px;
  background-image: url("../img/arrow-head.png");
}

.tl__row {
  position: relative;
  padding: 2.4rem 0 2.4rem 2.6rem;
  opacity: 0.3;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.tl__row.on { opacity: 1; transform: none; }

.tl__node {
  position: absolute;
  left: calc(0.35rem - 4px);
  top: 3.95rem;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--bg);
  border: 1px solid var(--fg-muted);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.tl__row.on .tl__node {
  background: var(--green);
  border-color: var(--green-bright);
  box-shadow: 0 0 8px rgba(0, 200, 5, 0.5);
}

.tl__card {
  --brk-c: rgba(255, 255, 255, 0.3);
  position: relative;
  max-width: 26rem;
  padding: 1.35rem 1.5rem 1.4rem;
  transition: background-color 0.4s ease;
}

/* Short tick connecting the card to the spine */
.tl__card::after {
  content: "";
  position: absolute;
  top: 2rem;
  left: -2.6rem;
  width: 2.6rem;
  height: 1px;
  background: var(--line);
  transition: background 0.3s ease;
}

.tl__row.on .tl__card {
  --brk-c: var(--green);
  background-color: rgba(0, 200, 5, 0.03);
}

.tl__row.on .tl__card::after { background: var(--green-line); }

.tl__card .h3 { font-size: var(--fs-body); margin-bottom: 0.5rem; }
.tl__card p { font-size: var(--fs-small); color: var(--fg-muted); }

.strike-foot {
  position: relative;
  margin: 4rem auto 0;
  max-width: 40rem;
  padding-top: 2rem;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  line-height: 1.9;
}

.strike-foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.5rem;
  height: 1px;
  background: var(--fg-muted);
  transform: translateX(-50%);
}

@media (min-width: 900px) {
  .tl { margin-top: 6rem; }
  .tl__spine { left: 50%; }

  .tl__row {
    width: calc(50% - 3.2rem);
    padding: 2.6rem 0;
  }

  .tl__node { top: 4.15rem; }

  /* Spine child is first, so even children are stages 01/03/05 (left side)
     and odd children are 02/04 (right side). Cards hug the spine; text stays
     left-aligned on both sides. */
  .tl__row:nth-child(even) { margin-right: auto; }
  .tl__row:nth-child(even) .tl__node { left: auto; right: calc(-3.2rem - 5px); }
  .tl__row:nth-child(even) .tl__card { margin-left: auto; }
  .tl__row:nth-child(even) .tl__card::after { left: auto; right: -3.2rem; width: 3.2rem; }

  .tl__row:nth-child(odd) { margin-left: auto; }
  .tl__row:nth-child(odd) .tl__node { left: calc(-3.2rem - 5px); }
  .tl__row:nth-child(odd) .tl__card::after { left: -3.2rem; width: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tl__row { opacity: 1; transform: none; transition: none; }
  .tl__node { transition: none; }
}

/* Stat row */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.stat { background: var(--bg); padding: 1.35rem 1.3rem; }

.stat__k {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.55rem;
}

.stat__v {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.stat__v--green { color: var(--green); }
.stat__sub { font-size: var(--fs-eyebrow); color: var(--fg-muted); margin-top: 0.4rem; }

/* ==========================================================================
   Launch page — Erebus-style panels, market cards, chart box
   ========================================================================== */

.lpanel {
  --brk-c: rgba(255, 255, 255, 0.9);
  padding: 2.4rem 2.2rem 2.6rem;
}

.lpanel__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 2.1rem; }
.lpanel__sub { font-size: var(--fs-small); color: var(--fg-faint); margin: -1.6rem 0 0; }

.lgrid { display: grid; gap: 2.4rem 3.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lgrid { grid-template-columns: 1fr 1fr; } }

.lblock__k {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.85rem;
}

.lblock p, .lblock li { font-size: var(--fs-body); color: var(--fg-muted); line-height: 1.85; }
.lblock p + p { margin-top: 0.95rem; }
.lblock strong { color: var(--fg); font-weight: 600; }
.lblock--wide { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 2.1rem; }

.lseq { list-style: none; }
.lseq li + li { margin-top: 0.55rem; }
.lseq strong { color: var(--fg); }

.addrnote { margin-top: 1.1rem; }
.addrnote p { color: var(--fg-faint); }

/* Market data cards: 3-up bracket cards, big value, small footnote. */
.mgrid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mcard {
  --brk-c: rgba(255, 255, 255, 0.9);
  padding: 1.5rem 1.6rem 1.45rem;
  min-height: 128px;
}

.mcard__k {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.mcard__v { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.5rem 0 0.55rem; }
.mcard__v--live { color: var(--green); }
.mcard__v--tba { color: var(--fg-dim); }
.mcard__sub { font-size: var(--fs-eyebrow); letter-spacing: 0.02em; color: var(--fg-muted); line-height: 1.7; }

/* Chart placeholder panel */
.chartbox {
  min-height: 440px;
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.chartbox p { font-size: var(--fs-small); color: var(--fg-faint); text-align: center; padding: 1rem; }

/* External links row — Erebus-style bracket chips */
.extlinks { display: flex; flex-wrap: wrap; gap: 1rem; }
.extlinks a {
  font-size: var(--fs-small);
  color: var(--fg-dim);
  padding: 0.85rem 1.7rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.extlinks a:hover { color: var(--fg); background-color: var(--panel-raised); }

/* ==========================================================================
   Comparison matrix
   ========================================================================== */

.matrix-scroll { overflow-x: auto; border: 1px solid var(--line); }

/* Erebus renders its matrix in the JetBrains Mono Medium (500) cut at 0.8rem;
   the Regular cut at 0.75rem reads as a different typeface next to it. */
.matrix {
  min-width: 660px;
  font-size: 0.8rem;
}

.matrix th, .matrix td {
  padding: 0.85rem 1rem;
  text-align: center;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}

.matrix thead th {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 700;
  background: var(--panel);
}

.matrix th:first-child,
.matrix td:first-child {
  text-align: left;
  color: var(--fg-dim);
  width: 34%;
  font-weight: 500;
}

.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: 0; }

/* Row highlight on hover, as Erebus does. */
.matrix tbody tr { transition: background-color 0.12s; }
.matrix tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.matrix tbody tr:hover td:first-child { color: var(--fg); }
.matrix tbody tr:hover .col-ours { background: rgba(0, 200, 5, 0.18); }

/* highlighted ERC-402 column */
.matrix .col-ours {
  background: var(--green-ghost);
  color: var(--green);
  border-left: 1px solid var(--green-line);
  border-right: 1px solid var(--green-line);
}

.matrix thead .col-ours {
  color: var(--green);
  font-weight: 700;
  border-top: 1px solid var(--green-line);
}

.matrix tbody tr:last-child .col-ours { border-bottom: 1px solid var(--green-line); }

.yes { color: var(--green); }
.no  { color: var(--fg-faint); }

/* ==========================================================================
   Accordion
   ========================================================================== */

.acc { border-top: 1px solid var(--line); }

.acc__item { border-bottom: 1px solid var(--line); }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  text-align: left;
  font-size: var(--fs-body);
  color: var(--fg-dim);
  transition: color 0.15s;
}

.acc__btn:hover { color: var(--fg); }
.acc__btn[aria-expanded="true"] { color: var(--fg); }

.acc__sign {
  flex: none;
  width: 11px;
  height: 11px;
  position: relative;
}

.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.2s, opacity 0.2s;
}

.acc__sign::before { left: 0; top: 5px; width: 11px; height: 1px; }
.acc__sign::after  { top: 0; left: 5px; width: 1px; height: 11px; }

.acc__btn[aria-expanded="true"] .acc__sign::after { transform: scaleY(0); opacity: 0; }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.acc__panel[data-open="true"] { grid-template-rows: 1fr; }

.acc__panel > div { overflow: hidden; }

.acc__panel p {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  line-height: 1.85;
  max-width: 76ch;
  padding-bottom: 1.5rem;
}

.acc__panel p + p { padding-top: 0.9rem; margin-top: -0.6rem; }

.acc__panel code {
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

/* ==========================================================================
   Gallery (app page)
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 2rem;
}

/* Trait + grade dropdowns. The first option doubles as the category label,
   so an unfiltered select reads as "Background" rather than "All". */
.fsel,
.fjump,
.fclear {
  font: inherit;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.42rem 0.8rem;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.fsel {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.9rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 0.95rem) 55%, calc(100% - 0.62rem) 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.fsel:hover,
.fjump:hover,
.fclear:hover { color: var(--fg); border-color: var(--line-strong); }

.fsel:focus-visible,
.fjump:focus-visible { outline: 1px solid var(--green); outline-offset: 1px; }

/* A select with a value chosen is the only visual cue that a filter is on. */
.fsel:not([value=""]):valid { color: var(--fg-muted); }

.fsel option { background: var(--bg); color: var(--fg); text-transform: none; letter-spacing: 0; }

.fjump { width: 8.5rem; }
.fjump::-webkit-outer-spin-button,
.fjump::-webkit-inner-spin-button { appearance: none; margin: 0; }
.fjump { -moz-appearance: textfield; }

.fclear { color: var(--green); border-color: var(--green-line); background: var(--green-ghost); }
.fclear:hover { color: var(--green); border-color: var(--green); }

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}

.gcard {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: background-color 0.18s, transform 0.18s;
}

.gcard:hover { background-color: var(--panel-raised); transform: translateY(-3px); }

.gcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
}

.gcard__id { color: var(--fg); font-weight: 600; }

.gcard__badge {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--g, var(--fg-faint));
  border: 1px solid currentColor;
  padding: 0.12rem 0.4rem;
  font-size: 0.5625rem;
  white-space: nowrap;
}

.gcard__art {
  aspect-ratio: 1;
  background: #000000;
  border: 1px solid var(--line);
  overflow: hidden;
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color 0.15s;
}

.gcard__art:hover { border-color: var(--green-line); }

.gcard__art svg,
.gcard__art video { display: block; width: 100%; height: 100%; }

/* Only the hovered card animates — a thousand of these at once is not worth it. */
.gcard:hover .gcard__art svg { animation: case-float 3.5s ease-in-out infinite; }

.gcard__rows {
  display: grid;
  gap: 0.3rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
}

.gcard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.gcard__row dt { color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.5625rem; }
.gcard__row dd { margin: 0; color: var(--fg-dim); }
.gcard__row dd.is-strike { color: var(--green); }

.gallery-empty {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--fg-faint);
  font-size: var(--fs-small);
  border: 1px dashed var(--line);
}

/* ==========================================================================
   Coin detail modal
   ========================================================================== */

.coin-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.coin-modal[hidden] { display: none; }

.coin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.coin-modal__panel {
  position: relative;
  width: min(100%, 880px);
  max-height: 92vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}

.coin-modal__panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(var(--bracket) 0 0), linear-gradient(var(--bracket) 0 0),
    linear-gradient(var(--bracket) 0 0), linear-gradient(var(--bracket) 0 0),
    linear-gradient(var(--bracket) 0 0), linear-gradient(var(--bracket) 0 0),
    linear-gradient(var(--bracket) 0 0), linear-gradient(var(--bracket) 0 0);
  background-repeat: no-repeat;
  background-size:
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

.coin-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 3;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
}

.coin-modal__close:hover {
  border-color: var(--line-strong);
  color: var(--fg);
}

.coin-modal__art {
  background: #000000;
  border-right: 1px solid var(--line);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coin-modal__art video,
.coin-modal__art svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.coin-modal__body {
  padding: 1.5rem 1.35rem 1.25rem;
  overflow-y: auto;
}

.coin-modal__eyebrow {
  margin: 0 0 0.35rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.coin-modal__title {
  margin: 0 0 0.35rem;
  font-size: var(--fs-h3);
  font-weight: 700;
}

.coin-modal__grade {
  margin: 0 0 1rem;
  font-size: var(--fs-small);
  font-weight: 600;
}

.coin-modal__owner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0;
  margin-bottom: 0.85rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}

.coin-modal__owner-k {
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-eyebrow);
}

.coin-modal__owner-v {
  color: var(--fg);
  font-weight: 600;
}

.coin-modal__meta {
  margin: 0 0 1.1rem;
  display: grid;
  gap: 0.45rem;
}

.coin-modal__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--fs-small);
}

.coin-modal__row dt {
  margin: 0;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-eyebrow);
}

.coin-modal__row dd {
  margin: 0;
  color: var(--fg-dim);
  text-align: right;
}

.coin-modal__row dd.is-strike { color: var(--green); }

.coin-modal__traits-k {
  margin: 0 0 0.55rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.coin-modal__trait-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.coin-modal__trait {
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.coin-modal__trait-k {
  display: block;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.2rem;
}

.coin-modal__trait-v {
  display: block;
  font-size: var(--fs-small);
  color: var(--fg);
}

.coin-modal__chain {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--fg-faint);
}

@media (max-width: 720px) {
  .coin-modal__panel {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }

  .coin-modal__art {
    border-right: none;
    border-bottom: 1px solid var(--line);
    min-height: 260px;
  }

  .coin-modal__trait-list { grid-template-columns: 1fr; }
}
}

/* ==========================================================================
   Grade ladder
   ========================================================================== */

.ladder {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.rung {
  background: var(--bg);
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 1rem;
  align-items: center;
}

.rung__bar { width: 4px; height: 100%; min-height: 34px; background: var(--g); }

.rung__grid {
  display: grid;
  gap: 0.35rem 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .rung__grid { grid-template-columns: 12rem 1fr auto; align-items: baseline; }
}

.rung__name {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g);
}

.rung__desc { font-size: var(--fs-small); color: var(--fg-muted); }

.rung__fee {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  white-space: nowrap;
}

/* ==========================================================================
   Callout
   ========================================================================== */

.callout {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 1.35rem 1.5rem;
  transition: border-color 0.3s ease;
}

.callout:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.callout__k {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 0.6rem;
}

.callout__k::after {
  content: "_";
  margin-left: 0.35ch;
  animation: callout-blink 1.1s step-end infinite;
}

@keyframes callout-blink {
  50% { opacity: 0; }
}

.callout--warn:hover {
  border-color: var(--red);
  box-shadow: inset 0 0 32px rgba(255, 77, 77, 0.06);
}

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

.callout p { font-size: var(--fs-small); color: var(--fg-dim); line-height: 1.8; max-width: 74ch; }

.callout--warn { border-color: rgba(255, 77, 77, 0.32); background: rgba(255, 77, 77, 0.05); }
.callout--warn .callout__k { color: var(--red); }

/* ==========================================================================
   Two-column split
   ========================================================================== */

.split {
  display: grid;
  gap: 3rem;
  align-items: start;
}

/* Grid and flex children default to min-width:auto, which lets a wide <pre>
   or a long address push the whole column past the viewport. */
.split > *,
.cards > *,
.steps > *,
.stats > *,
.gallery > *,
.step__body,
.rung__grid,
.rung__grid > * { min-width: 0; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .split--sidebar { grid-template-columns: 200px 1fr; gap: 3.5rem; }
}

/* Docs sidebar */
.docnav { position: sticky; top: 5.5rem; }

.docnav__group + .docnav__group { margin-top: 1.75rem; }

.docnav__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.75rem;
}

.docnav__link {
  display: block;
  padding: 0.3rem 0;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  border-left: 1px solid var(--line);
  padding-left: 0.85rem;
  margin-left: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.docnav__link:hover { color: var(--fg); border-left-color: var(--fg-faint); }
.docnav__link.is-active { color: var(--green); border-left-color: var(--green); }

.docsec + .docsec { margin-top: 3.5rem; }
.docsec .h3 { margin-bottom: 1rem; }

/* Definition table */
.deftable { font-size: var(--fs-small); border: 1px solid var(--line); }

.deftable th, .deftable td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.deftable thead th {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
  background: var(--panel);
}

/* Addresses and selectors have no break opportunities, and `anywhere`
   (unlike `break-word`) also shrinks min-content so the table can fit. */
.deftable th,
.deftable td,
.deftable code { overflow-wrap: anywhere; }

.deftable tbody th { color: var(--fg-dim); font-weight: 400; white-space: nowrap; }
.deftable tbody td { color: var(--fg-muted); }
.deftable tbody tr:last-child th,
.deftable tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   Gate / status
   ========================================================================== */

.gate {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.gate__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-faint);
  position: relative;
}

.gate--live { border-color: var(--green-line); color: var(--green); }
.gate--live .gate__dot { background: var(--green); }

.gate--live .gate__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--green);
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  0%   { transform: scale(0.6); opacity: 0.9; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 3.5rem 2.5rem;
  background: var(--bg-alt);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__brand { max-width: 30ch; }
.footer__brand .wordmark { margin-right: 0; }

.footer__tag {
  margin-top: 0.9rem;
  font-size: var(--fs-eyebrow);
  color: var(--fg-faint);
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.footer__by {
  margin-top: 0.9rem;
  font-size: var(--fs-eyebrow);
  color: var(--fg-muted);
  letter-spacing: 0.06em;
}

.footer__by a { color: var(--fg-dim); }
.footer__by a:hover { color: var(--green); }

.footer__cols { display: flex; flex-wrap: wrap; gap: 3rem; }

.footer__col h4 {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
  margin-bottom: 0.9rem;
}

.footer__col li + li { margin-top: 0.5rem; }

.footer__col a {
  font-size: var(--fs-micro);
  color: var(--fg-muted);
  transition: color 0.15s;
}

.footer__col a:hover { color: var(--green); }

.footer__bar {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-eyebrow);
  color: var(--fg-faint);
  letter-spacing: 0.06em;
}

.footer__bar a:hover { color: var(--fg-dim); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
  :root { --section-y: 4.5rem; --gut: 1.15rem; }

  .nav__toggle { display: inline-flex; }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gut) 1rem;
    display: none;
  }

  .nav__links[data-open="true"] { display: flex; }

  .nav__link { padding-block: 0.7rem; border-bottom: 1px solid var(--line); }
  .nav__link + .nav__link::before { display: none; }
  .nav__links .nav__link:first-child { margin-left: 0; }
  .nav__links .btn { margin-top: 0.85rem; margin-left: 0; justify-content: center; }

  .hero {
    padding-block: 3.5rem 2.5rem;
    min-height: 0;
  }

  /* Erebus-style mobile hero: pure black, typography-first — no portrait. */
  .hero__statue { display: none; }
  .hero__glow { display: none; }

  .hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .hero .h1 {
    max-width: 100%;
    font-size: clamp(1.75rem, 7.5vw, 2.1rem);
    line-height: 1.15;
  }

  .hero .lead {
    margin-top: 1.25rem;
    max-width: 100%;
    font-size: var(--fs-body);
    line-height: 1.75;
  }

  .hero .btn-row {
    margin-top: 2rem;
    justify-content: center;
  }

  .hero .strip {
    margin-top: 2.5rem;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hero .strip::-webkit-scrollbar { display: none; }

  .strip .coin:nth-child(n+5) { display: block; }

  .coin {
    width: 92px;
    flex: 0 0 auto;
  }
  .pill { flex-wrap: wrap; }
  .pill__addr { font-size: 0.5625rem; }
  .step { grid-template-columns: 1fr; gap: 0.4rem; }
  .step__n { padding-top: 0; }
  .footer__cols { gap: 2rem; }
}

@media (max-width: 480px) {
  .hero { padding-block: 3rem 2.25rem; }

  .hero .strip { margin-top: 2.25rem; gap: 0.65rem; }

  .coin { width: 88px; }

  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Wallet connect modal — OBOL style. One column, corner brackets, terminal
   status line. Wording follows the mint, not the wallet industry.
   ========================================================================== */

.wallet-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.wallet-modal[hidden] { display: none; }

.wallet-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.wallet-modal__panel {
  position: relative;
  width: min(100%, 420px);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: 1.5rem 1.4rem 1.15rem;
}

/* The same corner brackets the wallet button wears. */
.wallet-modal__panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--bracket) 0 0), linear-gradient(var(--bracket) 0 0),
    linear-gradient(var(--bracket) 0 0), linear-gradient(var(--bracket) 0 0),
    linear-gradient(var(--bracket) 0 0), linear-gradient(var(--bracket) 0 0),
    linear-gradient(var(--bracket) 0 0), linear-gradient(var(--bracket) 0 0);
  background-repeat: no-repeat;
  background-size:
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s),
    var(--brk-s) var(--brk-b), var(--brk-b) var(--brk-s);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

.wallet-modal__eyebrow {
  margin: 0 0 0.4rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.wallet-modal__title {
  margin: 0 0 1.25rem;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wallet-modal__close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  transition: border-color 0.15s, color 0.15s;
}

.wallet-modal__close:hover {
  border-color: var(--fg-dim);
  color: var(--fg);
}

.wallet-modal__label {
  margin: 0 0 0.5rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.wallet-list {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wallet-opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-body);
  text-align: left;
  transition: border-color 0.15s, background-color 0.15s;
}

.wallet-opt:hover {
  border-color: var(--green-line);
  background: var(--panel-raised);
}

.wallet-opt__icon {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.wallet-opt__arrow {
  margin-left: auto;
  color: var(--fg-faint);
  transition: color 0.15s;
}

.wallet-opt:hover .wallet-opt__arrow { color: var(--green); }

/* No injected wallet found. */
.wallet-modal__empty {
  margin: 0 0 1.1rem;
  padding: 0.9rem;
  border: 1px dashed var(--line-strong);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-dim);
}

.wallet-modal__empty a { color: var(--green); }
.wallet-modal__empty a:hover { color: var(--green-bright); }

/* Connected state: a ledger entry, not a profile card. */
.wallet-ledger {
  margin: 0 0 1.1rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.wallet-ledger__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  font-size: var(--fs-small);
}

.wallet-ledger__row + .wallet-ledger__row { border-top: 1px solid var(--line); }

.wallet-ledger__key {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.wallet-ledger__val { color: var(--fg); }
.wallet-ledger__val.is-good { color: var(--green); }
.wallet-ledger__val.is-bad  { color: var(--red); }

.wallet-modal__actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.wallet-modal__actions .btn { flex: 1; }

/* Terminal status line at the foot of the panel. */
.wallet-modal__status {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-modal__status::before { content: "> "; color: var(--green); }
.wallet-modal__status.is-busy  { color: var(--fg-dim); }
.wallet-modal__status.is-good  { color: var(--green); }
.wallet-modal__status.is-bad   { color: var(--red); }

.wallet-modal__note {
  margin: 0 0 1.1rem;
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--fg-faint);
}

/* Nav button once a wallet is connected. */
.btn--wallet.is-connected { color: var(--green); }