:root {
  /* ── Brand palette ────────────────────────────── */
  --gold:    #F5A31A;
  --gold-dim:   rgba(245,163,26,0.5);  /* borders, dim accents */
  --gold-faint: rgba(245,163,26,0.18); /* subtle backgrounds */
  --gold-line:  rgba(245,163,26,0.08); /* hairline tints */
  --teal:    #3DAAB5;
  --teal-dim:   rgba(61,170,181,0.5);
  --orange:  #E87820;
  --bg:      #060504;
  --bg2:     #0C0A08;
  --bg3:     #161412;       /* skeleton mid + warm dark */
  --bg-warm: #1a1205;       /* ticker tag warm dark */
  --off:     #F0EBE1;
  --off-70:  rgba(240,235,225,0.70);
  --off-50:  rgba(240,235,225,0.60);
  --dim:     rgba(240,235,225,0.55);
  --faint:   rgba(240,235,225,0.18);  /* borders only — fails AA for text */
  --line:    rgba(240,235,225,0.08);
  --line-strong: rgba(240,235,225,0.12); /* scrollbar thumbs */

  /* ── Semantic ─────────────────────────────────── */
  --success: #4ade80;
  --danger:  #f87171;

  /* ── Brand exceptions (never use for site UI) ─── */
  --brand-uniswap: #F50DB4;      /* brand exception — never use for site UI */
  --brand-discord: #5865F2;      /* brand exception — never use for site UI */
  --brand-discord-dim: #7289da;  /* brand exception — never use for site UI */

  /* ── Type scale ───────────────────────────────── */
  --fs-display: clamp(72px, 9vw, 120px);
  --fs-title:   clamp(40px, 5vw, 64px);
  --fs-section: clamp(36px, 4.5vw, 56px);
  --fs-h3:      clamp(20px, 1.9vw, 26px);
  --fs-heading: clamp(15px, 1.2vw, 17px);
  --fs-card-name: 18px;       /* gallery + vitrine mask name (Playfair italic) */
  --fs-body:    16px;
  --fs-body-sm: 15px;
  --fs-button:  13px;
  --fs-label:   12px;
  --fs-meta:    12px;         /* raised from 11px — min readable size */
  --fs-mono:    12px;

  /* ── Letter-spacing scale ─────────────────────── */
  --track-tight:   0.04em;
  --track-default: 0.12em;
  --track-wide:    0.18em;
  --track-display: 0.22em;

  /* ── Spacing (4px base) ───────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ── Radius ───────────────────────────────────── */
  --r-sharp:  0px;
  --r-sm:     2px;
  --r-md:     4px;
  --r-pill:   999px;
  --r-circle: 50%;

  /* ── Motion ───────────────────────────────────── */
  --t-fast:   150ms;
  --t-base:   250ms;
  --t-slow:   400ms;
  --t-slower: 600ms;
  --ease:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: ease;

  /* ── Z-index ──────────────────────────────────── */
  --z-base:  1;
  --z-sticky: 10;
  --z-nav:   500;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-grain: 9999;

  /* ── Layout ───────────────────────────────────── */
  --section-gap: clamp(80px, 10vw, 140px);

  /* ── Breakpoints (reference only) ────────────── */
  --bp-sm: 540px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Reserve scrollbar space on every paint so the viewport width never changes
     mid-load. Fixes the half-second horizontal shift of the nav (and everything
     else) when content grows enough to introduce a scrollbar on first paint. */
  scrollbar-gutter: stable;
}

/* C2 — Scroll margin so sections clear the fixed nav */
#about, #gallery, #nct, #nctToken, #live { scroll-margin-top: 96px; }

/* C6 — Focus visible outline (keyboard accessibility) */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

body {
  background: var(--bg);
  color: var(--off);
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-body); line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain);
  opacity: 0.35; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ─── UTILITY ──────────────────────────────────────────────── */
.container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 52px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--gold);
}
.eyebrow::before {
  content: ''; width: 8px; height: 8px; background: var(--gold);
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}
.eyebrow.teal { color: var(--teal); }
.eyebrow.teal::before { background: var(--teal); }
.eyebrow.orange { color: var(--orange); }
.eyebrow.orange::before { background: var(--orange); }

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton-text { height: 14px; border-radius: var(--r-md); margin-top: 8px; width: 60%; }

/* Fade-in for images */
.img-fade { opacity: 0; transition: opacity var(--t-slower) ease; }
.img-fade.loaded { opacity: 1; }

/* ── Stat primitive ─────────────────────────────────────────── */
.stat { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6) var(--s-5); }
.stat--center { align-items: center; text-align: center; }
.stat-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-wide);
              text-transform: uppercase; color: var(--dim); }
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-h3);
              font-weight: 700; color: var(--off); white-space: nowrap; }
.stat-value span { font-size: 0.5em; font-weight: 500; color: var(--dim);
                   margin-left: 5px; letter-spacing: 0; }
.stat-sub   { font-size: var(--fs-label); color: var(--dim); }
/* Lead stat — promoted focal point in a stat row */
.stat--lead .stat-value { font-size: calc(var(--fs-h3) * 1.18); color: var(--gold); }
.stat--lead .stat-value span { color: var(--gold-dim); }

/* ── Btn primitive ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); padding: var(--s-3) var(--s-5);
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-button); font-weight: 600;
  letter-spacing: var(--track-default); text-transform: uppercase;
  background: transparent; border: 1px solid var(--line);
  color: var(--off); cursor: pointer; text-decoration: none;
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.btn:hover { border-color: var(--gold-dim); color: var(--gold); }
.btn--gold     { border-color: var(--gold-dim); color: var(--gold); }
.btn--gold:hover { background: var(--gold); color: var(--bg); }
.btn--ghost    { border-color: transparent; }
.btn--icon     { padding: var(--s-3); }

/* ── Chip primitive ─────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  border: 1px solid currentColor; border-radius: var(--r-sharp);
  color: var(--dim); background: transparent;
}
.chip--gold    { color: var(--gold);    border-color: rgba(245,163,26,0.3); }
.chip--teal    { color: var(--teal);    border-color: rgba(61,170,181,0.3); }
.chip--orange  { color: var(--orange);  border-color: rgba(232,120,32,0.3); }
.chip--success { color: var(--success); border-color: rgba(74,222,128,0.3); }
.chip--danger  { color: var(--danger);  border-color: rgba(248,113,113,0.3); }

/* ── Section title ──────────────────────────────────────────── */
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--off);
  line-height: 1.05;
  margin-bottom: var(--s-6);
}

/* ── Scroll utility ─────────────────────────────────────────── */
.scroll-y { overflow-y: auto; }
.scroll-y::-webkit-scrollbar       { width: 6px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-sm); }

/* ── Skip link ──────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -40px; left: var(--s-4);
  background: var(--gold); color: var(--bg);
  padding: var(--s-2) var(--s-4); z-index: var(--z-toast);
  text-decoration: none; font-weight: 700;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--s-2); }

/*
 * State class conventions:
 *   .open / .is-open        — element is open (drawer, menu, modal)
 *   .active / .is-active    — element is in active/selected state
 *   .visible / .is-visible  — element is rendered (pre-transition show)
 *   .has-*                  — element has a certain data condition
 *   .scrolled               — nav has been scrolled past hero
 *   .dragging               — carousel is being dragged
 *   .wallet-connected       — nav button shows connected address
 * All classes are toggled by JS. Do not add/remove in HTML templates.
 */

/* Touch targets — minimum 44×44px hit area */
.filter-chip-x::before,
.mask-modal-close::before,
.wallet-panel-close::before {
  content: '';
  position: absolute;
  inset: -8px;
}
.filter-chip-x,
.mask-modal-close,
.wallet-panel-close { position: relative; }

.filter-pill,
.gallery-sort-option,
.nav-toggle { min-height: 44px; }

/* ─── NAV ─────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  height: 64px;
  /* 3-column grid: brand | links | actions
     nav-links always stays in the geometric centre; nav-right always hugs the
     right edge. Neither column shifts when the wallet button changes content
     or visibility during the silent-reconnect window. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(20px, 4vw, 52px);
  background: transparent;
  transition: background var(--t-slow), backdrop-filter var(--t-slow);
}
nav.scrolled {
  background: rgba(6,5,4,0.88);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--line);
}
.nav-brand {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  justify-self: start; /* pin to left column */
}
.nav-brand img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold-dim);
  box-shadow: 0 0 12px var(--gold-faint), 0 0 24px var(--gold-line);
}
.nav-brand-text {
  display: flex; flex-direction: column; line-height: 1;
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-h3); font-weight: 700; color: var(--off);
  letter-spacing: var(--track-tight);
}
.nav-brand-community {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
  color: var(--gold); text-transform: uppercase;
  margin-top: 2px;
}
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a {
  font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--track-default);
  text-transform: uppercase; color: var(--off);
  text-decoration: none; transition: color var(--t-base);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6), 0 0 14px rgba(0,0,0,0.4);
}
.nav-links a:hover { color: var(--gold); }
/* .nav-cta uses .btn .btn--gold — unique properties kept here */
.nav-cta {
  padding: 10px 22px;
  font-family: inherit; /* override .btn Space Grotesk since nav already sets it */
  /* Reserve enough width for the widest of the three states
     ("Connect Wallet" / "● Connecting…" / "0xabcd…1234") so the neighboring
     nav links don't shift horizontally as the label swaps. */
  min-width: 184px;
  justify-content: center;
}
.nav-cta:hover { background: var(--gold); color: var(--bg); }

/* ─── HERO ────────────────────────────────────────────────── */
.hero {
  position: relative; height: 100vh; min-height: 650px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero-mosaic {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
}
.hero-mosaic-cell {
  overflow: hidden; position: relative; background: var(--bg2);
}
.hero-mosaic-cell img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  filter: brightness(0.58) saturate(0.72);
  position: absolute; inset: 0;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: var(--z-base); pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(6,5,4,0.4) 0%, transparent 35%, rgba(6,5,4,0.7) 70%, var(--bg) 100%),
    linear-gradient(to right, rgba(6,5,4,0.6) 0%, transparent 50%);
}
.hero-content {
  position: relative; z-index: 2;
  padding: 0 clamp(20px, 4vw, 52px) clamp(48px, 8vh, 100px);
  max-width: 720px;
}
.hero-eyebrow { margin-bottom: 20px; }
.hero-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700; line-height: 0.88; margin-bottom: 24px;
}
.hero-title .big {
  display: block; font-size: var(--fs-display); color: var(--off);
}
.hero-title .sub {
  display: block; font-size: var(--fs-section);
  font-style: italic; color: var(--gold); margin-top: 4px;
}
.hero-desc {
  font-size: var(--fs-heading); line-height: 1.8;
  color: var(--dim); max-width: 440px; margin-bottom: 36px;
}
.hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--track-default);
  text-transform: uppercase; padding: 15px 32px;
  background: var(--gold); color: var(--bg); border: none; cursor: pointer;
  transition: opacity var(--t-base);
}
.btn-primary:hover { opacity: 0.88; }
.btn-ghost {
  font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--track-default);
  text-transform: uppercase; color: var(--dim);
  background: none; border: none; cursor: pointer;
  transition: color var(--t-base), text-decoration-color var(--t-base);
  text-decoration: underline;
  text-decoration-color: rgba(240,235,225,0.2);
  text-underline-offset: 3px;
}
.btn-ghost:hover { color: var(--off); text-decoration-color: var(--off-50); }

.hero-scroll {
  position: absolute; bottom: 28px; right: clamp(20px, 4vw, 52px); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll span {
  font-size: var(--fs-label); letter-spacing: var(--track-display); text-transform: uppercase;
  color: var(--dim); writing-mode: vertical-rl;
}
.hero-scroll-line {
  width: 1px; height: 48px; background: var(--faint);
  position: relative; overflow: hidden;
}
.hero-scroll-line::after {
  content: ''; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%; background: var(--gold);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%{top:-100%} 50%{top:0} 100%{top:100%} }

/* ─── ABOUT ───────────────────────────────────────────────── */
.about {
  padding: var(--section-gap) 0;
  border-bottom: 1px solid var(--line);
}
.about-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.about .eyebrow { margin-bottom: 28px; justify-content: center; }
.about-headline {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-section);
  font-weight: 700; line-height: 1.05; margin-bottom: 28px;
}
.about-headline em { font-style: italic; color: var(--gold); }
.about-body {
  font-size: var(--fs-body); line-height: 1.6;
  color: var(--dim); margin-bottom: 48px;
}
.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
/* .about-stat rules removed — replaced by .stat primitive (Step 8) */
.about-stats .stat {
  background: var(--bg2);
  position: relative;
  min-width: 0;
}
.about-stats .stat-label { white-space: nowrap; }
/* Push sub-label to the bottom so all stat-sub rows align across cells,
   even though the lead stat has a taller stat-value font size. */
.about-stats .stat-sub { margin-top: auto; }
.about-stats .stat::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 28px; height: 2px;
  background: var(--gold);
  opacity: 0.85;
}

/* ─── GALLERY ─────────────────────────────────────────────── */
.gallery { padding: var(--section-gap) 0; }
.gallery-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 28px;
}
.gallery-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-title);
  font-weight: 700; line-height: 1.05;
}
.gallery-title em { font-style: italic; color: var(--teal); }
.gallery-shuffle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; color: rgba(240,235,225,0.6);
  background: none; border: 1px solid rgba(240,235,225,0.15); padding: 8px 18px;
  cursor: pointer; transition: all var(--t-fast); flex-shrink: 0;
}
.gallery-shuffle:hover { border-color: var(--teal); color: var(--teal); }
.gallery-shuffle:disabled { opacity: 0.4; cursor: not-allowed; }

.gallery-sort-select {
  position: relative; flex-shrink: 0;
}
.gallery-sort-trigger {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; color: rgba(240,235,225,0.6);
  background: transparent; border: 1px solid rgba(240,235,225,0.15);
  padding: 10px 16px 10px 18px; cursor: pointer;
  transition: border-color var(--t-base), color var(--t-base);
  white-space: nowrap;
}
.gallery-sort-trigger:hover {
  border-color: rgba(240,235,225,0.3); color: var(--off);
}
.gallery-sort-select.has-value .gallery-sort-trigger,
.gallery-sort-select.open .gallery-sort-trigger {
  border-color: var(--teal); color: var(--teal);
}
.gallery-sort-chevron {
  transition: transform var(--t-base) ease;
  flex-shrink: 0;
}
.gallery-sort-select.open .gallery-sort-chevron {
  transform: rotate(180deg);
}

.gallery-sort-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  z-index: 50; min-width: 100%;
  list-style: none; margin: 0; padding: 4px;
  background: var(--bg2);
  border: 1px solid rgba(240,235,225,0.15);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.gallery-sort-select.open .gallery-sort-menu {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.gallery-sort-option {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--track-tight);
  color: var(--off-70);
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.gallery-sort-option:hover {
  background: rgba(61,170,181,0.08);
  color: var(--off);
}
.gallery-sort-option.active {
  background: rgba(61,170,181,0.12);
  color: var(--teal);
}

.gallery-search-input {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--off); caret-color: var(--teal);
  background: transparent; border: 1px solid rgba(240,235,225,0.15);
  padding: 10px 16px; flex-shrink: 0; width: 150px;
  transition: border-color var(--t-base), color var(--t-base), width var(--t-base);
  margin-left: auto;
}
.gallery-search-input:hover { border-color: rgba(240,235,225,0.3); }
.gallery-search-input::placeholder { color: rgba(240,235,225,0.55); }
.gallery-search-input:focus { outline: none; border-color: var(--teal); color: var(--teal); width: 190px; }
.gallery-search-input::-webkit-search-cancel-button { display: none; }

.gallery-toolbar {
  display: flex; align-items: flex-start; gap: 20px;
  margin-bottom: 24px;
}
.gallery-toolbar .gallery-filters { flex: 1; margin-bottom: 0; }

/* ─── GALLERY FILTERS ─────────────────────────────────────── */
.gallery-filters {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 24px; min-height: 0;
}
.gallery-filters:empty { margin-bottom: 0; }

/* Wrapper row: scrollable tabs on left, sort + search fixed on right */
.gallery-controls-row {
  display: flex; align-items: center; gap: 8px; overflow: visible;
}
.gallery-controls-row .filter-tabs {
  flex: 1; min-width: 0;
}

/* Category tabs — single horizontal row */
.filter-tabs {
  display: flex; gap: 4px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tab {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; padding: 8px 18px;
  border: 1px solid rgba(240,235,225,0.15); color: rgba(240,235,225,0.6);
  background: transparent; cursor: pointer; transition: all var(--t-base);
  white-space: nowrap; flex-shrink: 0;
}
.filter-tab:hover { border-color: rgba(240,235,225,0.3); color: var(--off); }
.filter-tab.active {
  border-color: var(--teal); color: var(--teal);
  background: rgba(61,170,181,0.06);
}
.filter-tab-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); margin-left: 6px; opacity: 0.5;
}
.filter-tab.active .filter-tab-count { opacity: 1; }
.filter-tab.has-active-filter { border-color: var(--teal-dim); color: var(--teal); }

.filter-pill-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); margin-left: 6px; opacity: 0.5;
}
.filter-pill.active .filter-pill-count { opacity: 0.8; }

/* Value pills — shown for the active tab */
.filter-values {
  display: flex; gap: 6px; flex-wrap: wrap;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--t-slow) ease, opacity var(--t-base) ease;
}
.filter-values.open {
  max-height: 400px; opacity: 1;
}

.filter-pill {
  font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--track-tight);
  padding: 11px 16px;
  border: 1px solid rgba(240,235,225,0.15); color: var(--off-70);
  background: transparent; cursor: pointer; transition: all var(--t-fast);
}
.filter-pill:hover { border-color: var(--teal); color: var(--teal); }
.filter-pill.active {
  background: rgba(61,170,181,0.1);
  border-color: var(--teal); color: var(--teal);
}

/* Active selection chips — dismissible */
.filter-active-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.filter-active-chips:empty { display: none; }

.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; padding: 6px 12px 6px 14px;
  background: rgba(61,170,181,0.1); border: 1px solid rgba(61,170,181,0.3);
  color: var(--teal); cursor: pointer; transition: all var(--t-fast);
}
.filter-chip:hover {
  background: rgba(61,170,181,0.18); border-color: var(--teal);
}
.filter-chip-x {
  font-size: var(--fs-button); line-height: 1.6; opacity: 0.6;
  transition: opacity var(--t-fast);
}
.filter-chip:hover .filter-chip-x { opacity: 1; }

.filter-clear {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; padding: 6px 14px;
  background: none; border: 1px solid var(--line); color: var(--dim);
  cursor: pointer; transition: all var(--t-fast);
}
.filter-clear:hover { border-color: var(--orange); color: var(--orange); }

/* ─── MOBILE FILTER MODAL ────────────────────────────────────── */
.filter-modal-trigger { display: none; }     /* hidden on desktop */

.filter-modal-backdrop {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.filter-modal-backdrop.open { opacity: 1; pointer-events: auto; }

.filter-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.filter-modal.open { transform: translateY(0); }

.filter-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.filter-modal-title {
  font-size: 14px; font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
}
.filter-modal-title span { color: var(--dim); font-weight: 500; }
.filter-modal-close {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line);
  color: var(--off-70); cursor: pointer;
  transition: all var(--t-fast);
}
.filter-modal-close:hover { border-color: rgba(240,235,225,0.3); color: var(--off); }

.filter-modal-body {
  flex: 1; overflow-y: auto; padding: 0;
  -webkit-overflow-scrolling: touch;
}

/* Active chips bar inside modal */
.fm-active-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 20px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(61,170,181,0.03);
}
.fm-active-bar:empty { display: none; }
.fm-active-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  padding: 4px 10px 4px 12px;
  background: rgba(61,170,181,0.1); border: 1px solid rgba(61,170,181,0.25);
  color: var(--teal); cursor: pointer;
  transition: all var(--t-fast);
}
.fm-active-chip:hover { background: rgba(61,170,181,0.18); border-color: var(--teal); }
.fm-active-chip-x { opacity: 0.5; font-size: 12px; }
.fm-active-chip:hover .fm-active-chip-x { opacity: 1; }

/* Trait groups */
.fm-group { border-bottom: 1px solid var(--line); }
.fm-group:last-child { border-bottom: none; }
.fm-group-header {
  display: flex; align-items: center; width: 100%;
  padding: 16px 20px;
  background: none; border: none; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  transition: background var(--t-fast);
}
.fm-group-header:hover { background: rgba(240,235,225,0.02); }
.fm-group-label {
  flex: 1; text-align: left;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--off-70); transition: color var(--t-fast);
}
.fm-group.has-selection .fm-group-label { color: var(--teal); }
.fm-group-count {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--dim); margin-right: 12px;
}
.fm-group-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  background: var(--teal); color: var(--bg); font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: none; align-items: center; justify-content: center;
  margin-right: 10px;
}
.fm-group.has-selection .fm-group-badge { display: inline-flex; }
.fm-group-arrow {
  font-size: 10px; color: var(--off-50);
  transition: transform 0.25s ease;
}
.fm-group.open .fm-group-arrow { transform: rotate(180deg); }
.fm-group-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.fm-group.open .fm-group-body { max-height: 500px; }
.fm-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 20px 16px;
}

/* Trigger button */
.filter-modal-trigger {
  display: none; /* shown via media query */
  align-items: center; gap: 8px;
  padding: 10px 18px;
  background: none; border: 1px solid rgba(240,235,225,0.15);
  color: var(--off-70); cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  transition: all var(--t-fast);
}
.filter-modal-trigger:hover { border-color: rgba(240,235,225,0.3); color: var(--off); }
.filter-modal-trigger.has-filters {
  border-color: var(--teal); color: var(--teal);
  background: rgba(61,170,181,0.06);
}
.filter-trigger-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  background: var(--teal); color: var(--bg); font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Footer */
.filter-modal-footer {
  display: flex; gap: 10px; align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  flex-shrink: 0; background: var(--bg);
}
.fm-clear-btn {
  flex: 0 0 auto; padding: 12px 18px;
  background: none; border: 1px solid var(--line); color: var(--dim);
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  cursor: pointer; transition: all var(--t-fast);
}
.fm-clear-btn:hover { border-color: var(--orange); color: var(--orange); }
.fm-apply-btn {
  flex: 1; padding: 12px 18px;
  background: var(--teal); border: 1px solid var(--teal); color: var(--bg);
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  cursor: pointer; transition: all var(--t-fast);
}
.fm-apply-btn:hover { background: #4bbdc8; border-color: #4bbdc8; }
.fm-apply-count {
  font-family: 'JetBrains Mono', monospace; margin-left: 6px;
}

/* Double-row marquee */
.marquee-wrap {
  position: relative;
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  cursor: grab;
  transition: opacity var(--t-base) ease;
}
.marquee-wrap.dragging,
.marquee-wrap.dragging * { cursor: grabbing !important; user-select: none; }

@keyframes cardEnter { from { opacity: 0; } to { opacity: 1; } }
.m-row { overflow: hidden; }
.m-track { display: flex; gap: 10px; width: max-content; will-change: transform; }
.m-track.left  { animation: marquee-l 55s linear infinite; }
.m-track.right { animation: marquee-r 55s linear infinite; }
@keyframes marquee-l  { from{transform:translate3d(0,0,0)}     to{transform:translate3d(-50%,0,0)} }
@keyframes marquee-r  { from{transform:translate3d(-50%,0,0)}  to{transform:translate3d(0,0,0)} }

.m-card {
  flex-shrink: 0; width: 228px; height: 322px;
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--bg2);
  border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  display: block;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation: cardEnter var(--t-slow) ease forwards;
}
.m-card img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  will-change: transform;
  transition: transform var(--t-slower) ease;
}
.m-card:hover img { transform: scale(1.06); }
.m-card::after,
.m-card::before { display: none; }
/* "View" glass badge — top-left, injected as .m-view DOM element */
.m-view {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  background: rgba(6,5,4,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(240,235,225,0.14);
  padding: 3px 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  line-height: 1;
  color: var(--off);
  display: flex; align-items: center; gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.m-card:hover .m-view,
.m-card:focus-visible .m-view { opacity: 1; }
/* Diamond icon used before rarity rank numbers */
.rarity-diamond {
  display: inline-block;
  width: 9px; height: 9px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Rarity rank badge — top-right */
.m-rank {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  background: rgba(6,5,4,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(240,235,225,0.14);
  padding: 3px 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--off);
  pointer-events: none;
  display: flex; align-items: center; gap: 4px;
  line-height: 1;
}
.m-label {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 12px 14px 10px;
  background: linear-gradient(to top, rgba(6,5,4,0.92) 0%, rgba(6,5,4,0.6) 60%, transparent 100%);
}
.m-label-name {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-card-name); font-style: italic; color: var(--off);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-listed-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(6,5,4,0.82);
  border: 1px solid rgba(61,170,181,0.45);
  color: var(--teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-tight);
  padding: 3px 8px;
  line-height: 1;
  backdrop-filter: blur(6px);
  transition: opacity 0.2s ease;
}
.m-card:hover .m-listed-badge { opacity: 0; }

.gallery-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); color: var(--teal); letter-spacing: var(--track-default);
  margin-bottom: 24px;
}
.gallery-loading {
  text-align: center; padding: 48px 0;
  font-size: var(--fs-button); color: var(--dim); letter-spacing: var(--track-default);
}
.gallery-note {
  text-align: center; margin-top: 32px;
  font-size: var(--fs-button); color: var(--dim); letter-spacing: var(--track-default);
}
.gallery-static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-height: calc(322px * 2 + 10px + 20px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 10px;
  transition: opacity var(--t-base) ease;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.gallery-static::-webkit-scrollbar { width: 4px; }
.gallery-static::-webkit-scrollbar-track { background: transparent; }
.gallery-static::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-sm); }
.gallery-static .m-card { scroll-snap-align: start; }
.gallery-scroll-sentinel { width: 100%; height: 1px; flex-basis: 100%; pointer-events: none; }

/* ─── NCT ─────────────────────────────────────────────────── */
.nct {
  padding: var(--section-gap) 0;
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.nct-ghost {
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: clamp(200px, 28vw, 400px);
  font-weight: 700; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245,163,26,0.04);
  right: -20px; top: 50%; transform: translateY(-55%);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.nct-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px); align-items: center;
  position: relative; z-index: var(--z-base);
}
@keyframes kenBurns {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -0.8%, 0); }
}

.nct-visual {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--bg);
}
.nct-visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  transition: opacity 1.4s ease; /* slow image fade — intentional */
  opacity: 1;
}
.nct-loader {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity var(--t-slower) ease;
}
.nct-loader img {
  width: 72px; height: 72px;
  object-fit: contain; border-radius: 50%;
  opacity: 0.5;
  /* override the full-bleed rule above */
  position: static; inset: auto;
}
.nct-visual img.active { animation: kenBurns 10s ease-in-out forwards; }
.nct-visual img.old    { opacity: 0; }
.nct-visual-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg2) 0%, transparent 40%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px;
  z-index: var(--z-base);
}
.nct-visual-name {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-h3);
  font-weight: 700; font-style: italic; color: var(--off);
  transition: opacity var(--t-slow) ease;
}
.nct-visual-sub {
  font-size: var(--fs-label); letter-spacing: var(--track-display); text-transform: uppercase;
  color: var(--gold); margin-top: 6px;
}
.nct-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--gold); margin-left: 4px;
  animation: cursorBlink 1s step-end infinite; vertical-align: middle;
}
@keyframes cursorBlink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

.nct-text .eyebrow { margin-bottom: 24px; }
.nct-headline {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-title);
  font-weight: 700; line-height: 1.05; margin-bottom: 28px;
}
.nct-headline .stroke {
  display: block; font-style: italic;
  color: transparent; -webkit-text-stroke: 1.5px var(--gold);
}
.nct-body {
  font-size: var(--fs-heading); line-height: 1.8;
  color: var(--dim); max-width: 420px; margin-bottom: 44px;
}
.nct-steps { display: flex; flex-direction: column; gap: 2px; }
.nct-step {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid rgba(240,235,225,0.04);
  background: rgba(255,255,255,0.015);
  transition: border-color var(--t-base), background var(--t-base);
}
.nct-step:hover {
  border-color: var(--gold-faint);
  background: rgba(245,163,26,0.025);
}
.nct-step-n {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,163,26,0.1);
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  font-size: var(--fs-label); font-weight: 700; color: var(--gold);
}
.nct-step-title { font-size: var(--fs-body-sm); font-weight: 700; color: var(--off); margin-bottom: 4px; }
.nct-step-desc { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--dim); }
.nct-step-desc strong { color: var(--teal); font-weight: 600; }

/* ─── NCT TOKEN (Dexscreener) ─────────────────────────────── */
.nct-token { padding: var(--section-gap) 0; }

.nct-token-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
  margin-bottom: 36px;
}
.nct-token-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-title);
  font-weight: 700; line-height: 1.05;
}
.nct-token-title em { font-style: italic; color: var(--teal); }
.nct-token-sub {
  font-size: var(--fs-button); color: var(--dim);
  margin-top: 12px; letter-spacing: var(--track-tight);
}
.nct-token-contract-link {
  font-family: 'JetBrains Mono', monospace;
  color: var(--teal); text-decoration: none;
  border-bottom: 1px dashed rgba(61,170,181,0.4);
  padding-bottom: 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nct-token-contract-link:hover {
  color: var(--off); border-color: var(--off);
}

.nct-token-buy {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-button); font-weight: 600; letter-spacing: var(--track-default);
  text-transform: uppercase; color: var(--off);
  background: transparent;
  border: 1px solid rgba(240,235,225,0.22);
  transition: background var(--t-base) ease, color var(--t-base) ease, border-color var(--t-base) ease;
  text-decoration: none;
  overflow: hidden;
  transition: background var(--t-base) ease;
  position: relative;
}
.nct-token-buy:hover { background: transparent; color: var(--brand-uniswap); border-color: var(--brand-uniswap); }
.nct-token-buy-logo {
  position: relative;
  width: 20px; height: 20px;
  display: inline-block;
  flex-shrink: 0;
}
.nct-token-buy-logo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity var(--t-base) ease;
}
.nct-token-buy-logo-hover { opacity: 0; }
.nct-token-buy:hover .nct-token-buy-logo-rest { opacity: 0; }
.nct-token-buy:hover .nct-token-buy-logo-hover { opacity: 1; }

.nct-token-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 24px;
}
/* .nct-stat rules removed — replaced by .stat primitive (Step 8) */
.nct-token-stats .stat {
  background: var(--bg2);
}
.stat-value.positive { color: var(--success); }
.stat-value.negative { color: var(--danger); }

.nct-token-chart {
  position: relative;
  width: 100%;
  height: 620px;
  border: 1px solid var(--line);
  background: var(--bg2);
  overflow: hidden;
}
.nct-token-chart-iframe {
  width: 100%; height: 100%;
  border: none; display: block;
}
.nct-token-chart-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-button); letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--dim);
}

@media (max-width: 1024px) {
  .nct-token-stats { grid-template-columns: repeat(2, 1fr); }
  .nct-token-buy.stat { grid-column: 1 / -1; padding: 18px; }
  .nct-token-chart { height: 480px; }
}
@media (max-width: 768px) {
  .nct-token-header { margin-bottom: 24px; gap: 16px; }
  .nct-token-title { font-size: clamp(22px, 6vw, 28px); }
  .nct-token-sub { font-size: var(--fs-label); margin-top: 8px; }
  .nct-token-buy.stat { padding: 12px; font-size: var(--fs-label); }
  .nct-token-buy-logo { width: 16px; height: 16px; }
  .nct-token-chart { height: auto; aspect-ratio: 4 / 3; min-height: 300px; }
  .nct-token .stat-label { font-size: 10px; }
  .nct-token .stat-value { font-size: var(--fs-body-sm); }
}
@media (max-width: 540px) {
  .nct-token .stat-value { font-size: var(--fs-body-sm); }
}

/* ─── LIVE ────────────────────────────────────────────────── */
.live { padding: var(--section-gap) 0; }
.live-header { margin-bottom: 48px; }
.live-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-title);
  font-weight: 700; line-height: 1.05;
}
.live-title em { font-style: italic; color: var(--orange); }

.ticker {
  height: 48px; background: rgba(245,163,26,0.06);
  border: 1px solid rgba(245,163,26,0.22);
  display: flex; overflow: hidden; margin-bottom: 40px;
}
.ticker-tag {
  flex-shrink: 0; background: var(--bg-warm);
  border-right: 1px solid rgba(245,163,26,0.22);
  display: flex; align-items: center; gap: 8px; padding: 0 20px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--gold); z-index: 2;
}
.ticker-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  animation: blink 1.8s ease-in-out infinite; /* slow tick — intentional */
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }
.ticker-track {
  display: flex; align-items: center; gap: 48px; padding: 0 40px;
  white-space: nowrap; animation: tickerSlide 40s linear infinite;
  width: max-content; flex-shrink: 0;
}
@keyframes tickerSlide { from{transform:translateX(0)} to{transform:translateX(var(--ticker-x,-50%))} }
.ticker-item {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-button); color: var(--dim);
}
.ticker-item b { color: var(--off); font-weight: 500; }
.ticker-pill {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; padding: 3px 10px;
}
.ticker-pill.sale   { color: var(--gold);  border: 1px solid rgba(245,163,26,0.3); }
.ticker-pill.rename { color: var(--teal);  border: 1px solid rgba(61,170,181,0.3); }
.ticker-pill.buy    { color: var(--teal);  border: 1px solid rgba(61,170,181,0.3); }
.ticker-pill.sell   { color: var(--gold);  border: 1px solid rgba(245,163,26,0.3); }
.ticker-pill.add    { color: var(--teal);  border: 1px solid rgba(61,170,181,0.3); }
.ticker-pill.remove { color: var(--gold);  border: 1px solid rgba(245,163,26,0.3); }
.ticker-pill.claim  { color: var(--teal);  border: 1px solid rgba(61,170,181,0.3); }
.ticker-val   { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-label); color: var(--gold); }
.ticker-muted { font-size: var(--fs-label); color: var(--dim); }

.live-content {
  display: grid; grid-template-columns: 2.4fr 1.2fr;
  gap: clamp(30px, 5vw, 60px); align-items: start;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.act-card {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 3 / 4; background: var(--bg2);
}
.act-card img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
}
.act-card:hover::before { opacity: 0; }
.act-card-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(6,5,4,0.95) 0%, rgba(6,5,4,0.5) 40%, transparent 65%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px;
}
.act-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-wide);
  text-transform: uppercase; padding: 4px 10px;
  margin-bottom: 10px; align-self: flex-start;
}
.act-badge.sale   { color: var(--gold); border: 1px solid var(--gold-dim); background: var(--gold-line); }
.act-badge.rename { color: var(--teal); border: 1px solid rgba(61,170,181,0.45); background: rgba(61,170,181,0.08); }
.act-badge-dot { width: 5px; height: 5px; border-radius: 50%; }
.act-badge.sale   .act-badge-dot { background: var(--gold); }
.act-badge.rename .act-badge-dot { background: var(--teal); }
.act-name {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-card-name); font-style: italic; font-weight: 700;
  color: var(--off); line-height: 1.15; margin-bottom: 6px;
}
.act-val { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-button); }
.act-val.sale   { color: var(--gold); }
.act-val.rename { color: var(--teal); }
.act-time {
  font-size: var(--fs-label); letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--dim); margin-top: 5px;
}
.act-card-hint {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(6,5,4,0.78); backdrop-filter: blur(8px);
  border: 1px solid rgba(240,235,225,0.18);
  color: var(--off);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--t-base) ease, transform var(--t-base) ease, border-color var(--t-base) ease;
  pointer-events: none;
}
.act-card-hint img {
  width: 10px; height: 10px; object-fit: contain; opacity: 0.85;
}
.act-card-hint-arrow {
  display: inline-block; transition: transform var(--t-base) ease;
}
.act-card:hover .act-card-hint {
  opacity: 1; transform: translateY(0);
  border-color: rgba(240,235,225,0.35);
}
.act-card:hover .act-card-hint-arrow {
  transform: translateX(2px);
}

.live-sidebar { display: flex; flex-direction: column; gap: 32px; }

.social-accounts { display: flex; flex-direction: column; gap: 10px; }
.social-account {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.015); text-decoration: none;
  transition: border-color var(--t-base), background var(--t-base);
}
.social-account:hover {
  border-color: rgba(245,163,26,0.25);
  background: rgba(245,163,26,0.025);
}
.social-account-info { display: flex; align-items: center; gap: 14px; }
.social-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(245,163,26,0.1); border: 1px solid var(--gold-faint);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body-sm); flex-shrink: 0; overflow: hidden;
}
.social-avatar-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.social-handle {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-body-sm); color: var(--off); margin-bottom: 2px;
}
.social-role { font-size: var(--fs-label); color: var(--dim); }
.social-follow {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; padding: 6px 12px; min-width: 100px;
  border: 1px solid var(--gold-dim); color: var(--gold);
  background: transparent; cursor: pointer; transition: all var(--t-base);
  text-decoration: none; flex-shrink: 0;
}
.social-follow img { width: 11px; height: 11px; object-fit: contain; }
.social-follow:hover { background: var(--gold); color: var(--bg); }
.social-follow:hover img { filter: invert(1) brightness(0); }
.social-avatar-discord {
  background: rgba(88,101,242,0.12); border-color: rgba(88,101,242,0.3);
}
.social-avatar-discord img { width: 22px; height: 22px; object-fit: contain; }
.social-follow-discord {
  border-color: rgba(88,101,242,0.5); color: var(--brand-discord-dim);
}
.social-follow-discord:hover { background: var(--brand-discord); color: #fff; }
.social-follow-discord:hover img { filter: brightness(10); }

/* ── NCT Uniswap activity ────────────────────────────────────── */
.nct-act-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border: 1px solid var(--line);
  margin-bottom: 6px; text-decoration: none;
  cursor: pointer; transition: border-color var(--t-fast);
}
.nct-act-item:hover { border-color: rgba(240,235,225,0.3); }
.nct-act-badge {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; padding: 3px 8px; flex-shrink: 0;
}
.nct-act-badge.buy    { color: var(--teal);  border: 1px solid rgba(61,170,181,0.35); }
.nct-act-badge.sell   { color: var(--gold);  border: 1px solid rgba(245,163,26,0.35); }
.nct-act-badge.add    { color: var(--teal);  border: 1px solid rgba(61,170,181,0.35); }
.nct-act-badge.remove { color: var(--gold);  border: 1px solid rgba(245,163,26,0.35); }
.nct-act-badge.claim  { color: var(--teal);  border: 1px solid rgba(61,170,181,0.35); }
.nct-act-detail {
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-label); color: var(--dim);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nct-act-time  { font-size: var(--fs-label); color: var(--dim); white-space: nowrap; }
.nct-act-etherscan {
  width: 14px; height: 14px; flex-shrink: 0;
  opacity: 0.3;
  filter: brightness(0) invert(1); /* white on dark bg */
  transition: opacity var(--t-fast), filter var(--t-fast);
}
/* On hover: illuminate in Etherscan brand blue (#21325B lightened for dark bg) */
.nct-act-item:hover .nct-act-etherscan {
  opacity: 1;
  filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(183deg);
}
.nct-act-empty { font-size: var(--fs-label); color: var(--dim); padding: 8px 0; }

#nctActivity {
  max-height: 410px; /* ~8 items */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,235,225,0.15) transparent;
}
#nctActivity::-webkit-scrollbar { width: 4px; }
#nctActivity::-webkit-scrollbar-track { background: transparent; }
#nctActivity::-webkit-scrollbar-thumb { background: rgba(240,235,225,0.15); border-radius: 2px; }

.social-posts-label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--dim);
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.social-posts-label::before {
  content: ''; display: block; width: 20px; height: 1px;
  background: rgba(240,235,225,0.15);
}
.social-posts { display: flex; flex-direction: column; gap: 8px; }
.social-post {
  padding: 18px 20px;
  border: 1px solid rgba(240,235,225,0.05);
  background: rgba(255,255,255,0.012); transition: border-color var(--t-base);
}
.social-post:hover { border-color: var(--line-strong); }
.social-post-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.social-post-thumb {
  width: 36px; height: 50px; object-fit: cover; object-position: center center;
  flex-shrink: 0; background: var(--bg);
}
.social-post-name {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-body-sm); font-style: italic; color: var(--off); margin-bottom: 2px;
}
.social-post-event {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default); text-transform: uppercase;
}
.social-post-event.sale   { color: var(--gold); }
.social-post-event.rename { color: var(--teal); }
.social-post-body {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); line-height: 1; color: var(--off-70);
}
.social-post-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.social-post-time { font-size: var(--fs-label); color: var(--dim); }
.social-post-link {
  font-size: var(--fs-label); color: var(--dim); text-decoration: none;
  letter-spacing: var(--track-default); transition: color var(--t-fast);
}
.social-post-link:hover { color: var(--gold); }

/* ─── WALLET ──────────────────────────────────────────────── */

/* Nav button — connected state */
.nav-cta.wallet-connected {
  background: transparent;
  border-color: rgba(61,170,181,0.4);
  color: var(--teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); letter-spacing: var(--track-default);
}
.nav-cta.wallet-connected:hover {
  border-color: var(--teal);
  background: rgba(61,170,181,0.06);
}

/* Silent-reconnect in-flight: just hide the button. Its min-width reserves
   layout space so neighboring nav links don't shift. Once wallet.js resolves
   connected-or-not, setNavConnected/setNavDisconnected strips this class and
   the button becomes visible with the correct label. */
.nav-cta.wallet-restoring,
.mobile-nav-wallet.wallet-restoring {
  visibility: hidden;
}

/* Pre-paint override — when the user previously clicked Disconnect, the
   bootstrap script (js/wallet-bootstrap.js) sets
   <html data-wallet-intent="disconnected"> synchronously before body paints.
   Reveal the button immediately with "Connect Wallet" so these users never
   see an empty placeholder while wallet.js initializes.

   Implementation notes:
   - text-indent + overflow:hidden hides the original "Connecting…" textContent
     visually without disturbing any sizing/transitioning property. Can't use
     color:transparent (250ms fade when JS restores gold) or font-size:0
     (button height collapses). text-indent leaves line-box, font-size, color,
     padding — everything — unchanged.
   - ::after is absolute-positioned (not a flex child) so when JS later strips
     .wallet-restoring and writes the real textContent, the label stays at the
     same centered position — no horizontal slide from flex-gap differences. */
html[data-wallet-intent="disconnected"] .wallet-restoring {
  visibility: visible;
  cursor: pointer;
  position: relative;       /* anchor for the absolute-positioned ::after label */
  overflow: hidden;         /* clip the text that's been pushed off-screen below */
  white-space: nowrap;      /* keep text on one line so indent is effective */
  text-indent: -9999em;     /* push the "Connecting…" textContent off-screen */
}
html[data-wallet-intent="disconnected"] .wallet-restoring::after {
  content: 'Connect Wallet';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-button);
  font-family: inherit;
  font-weight: 600;
  letter-spacing: var(--track-default);
  text-transform: uppercase;
  text-indent: 0;           /* reset — text-indent is an inherited property */
  /* color inherits from .btn--gold on the button, so no color change (and no
     transition) when JS later hands off to real textContent. */
}

/* ── Delegate tag ────────────────────────────────────────────────
   Shared chip indicating "this content was loaded via delegate.xyz".
   Used in the Vitrine hero address row and in the wallet panel header. */
.vit-delegate-tag {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(245,163,26,0.06);
  border: 1px solid rgba(245,163,26,0.22);
  padding: 3px 8px 3px 7px;
  border-radius: 3px;
  margin-left: 6px;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.vit-delegate-tag:hover {
  background: rgba(245,163,26,0.10);
  border-color: rgba(245,163,26,0.38);
}
.vit-delegate-tag svg {
  width: 10px; height: 10px; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.95;
}
.vit-delegate-tag::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  white-space: pre; text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 400; line-height: 1.5;
  letter-spacing: normal; text-transform: none;
  color: var(--off); background: rgba(6,5,4,0.94);
  border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 6px;
  pointer-events: none;
  opacity: 0; transition: opacity var(--t-fast);
  z-index: 10;
}
.vit-delegate-tag:hover::after { opacity: 1; }

/* Panel overlay */
.wallet-panel {
  position: fixed; inset: 0; z-index: 900;
  display: none; pointer-events: none;
}
.wallet-panel.visible { display: block; pointer-events: auto; }
.wallet-panel-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,5,4,0.55); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--t-base) ease;
}
.wallet-panel.open .wallet-panel-backdrop { opacity: 1; }

/* Slide-in panel */
.wallet-panel-inner {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: var(--bg2); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease);
  overflow: hidden;
}
.wallet-panel.open .wallet-panel-inner { transform: translateX(0); }

.wallet-panel-close {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  background: none; border: none; cursor: pointer;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background var(--t-fast);
}
.wallet-panel-close img { filter: brightness(0) invert(1); opacity: 0.45; transition: opacity var(--t-fast); }
.wallet-panel-close:hover { background: rgba(240,235,225,0.08); }
.wallet-panel-close:hover img { opacity: 0.8; }

/* Header */
.wallet-panel-head {
  padding: 32px 60px 20px 28px; flex-shrink: 0;
}
.wallet-panel-head-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px;
}
.wallet-panel-address {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-body-sm); color: var(--off); letter-spacing: var(--track-tight);
}
.wallet-panel-address-text { white-space: nowrap; }
.wallet-nct-block {
  display: flex; align-items: center; justify-content: space-between;
}
.wallet-nct-label {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--dim);
}
.wallet-nct-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-body-sm); font-weight: 700; color: var(--dim);
}
.wallet-nct-val.wallet-nct-ready { color: var(--teal); }

.wallet-panel-divider { height: 1px; background: var(--line); flex-shrink: 0; }

/* Panel actions (Claim NCT, Name a Mask) */
.wallet-panel-actions {
  display: flex; gap: 8px;
  padding: 16px 28px; flex-shrink: 0;
}
.wallet-panel-action {
  flex: 1; padding: 10px 0; font-size: var(--fs-meta); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  border: 1px solid var(--line); background: none; color: var(--dim);
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  text-align: center; text-decoration: none; display: block;
}
.wallet-panel-action:hover { color: var(--off); border-color: rgba(240,235,225,0.3); }
.wallet-panel-action--primary {
  background: var(--gold); color: var(--bg); border-color: var(--gold);
}
.wallet-panel-action--primary:hover { background: #f7b23e; border-color: #f7b23e; color: var(--bg); }

/* Vitrine CTA */
.wallet-panel-vitrine {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 28px; flex-shrink: 0;
  background: rgba(212,175,55,0.06); border-top: 1px solid var(--line);
  text-decoration: none; color: var(--off);
  transition: background var(--t-fast);
}
.wallet-panel-vitrine:hover { background: rgba(212,175,55,0.12); }
.wallet-panel-vitrine-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(212,175,55,0.15);
  color: var(--gold); font-size: 16px;
}
.wallet-panel-vitrine-text { flex: 1; }
.wallet-panel-vitrine-title {
  font-size: var(--fs-body-sm); font-weight: 700; color: var(--off);
}
.wallet-panel-vitrine-sub {
  font-size: var(--fs-meta); color: var(--dim); margin-top: 1px;
}
.wallet-panel-vitrine-arrow {
  display: flex; align-items: center; transition: transform var(--t-fast);
}
.wallet-panel-vitrine-arrow img { filter: brightness(0) invert(1); opacity: 0.45; }
.wallet-panel-vitrine:hover .wallet-panel-vitrine-arrow { transform: translateX(3px); }


/* Masks list header */
.wallet-masks-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px 12px; flex-shrink: 0;
}
.wallet-masks-title {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--dim);
}
.wallet-masks-count { color: var(--dim); margin-left: 6px; }

/* Disconnect — sits in the head-top row next to address */
.wallet-disconnect-btn {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; color: var(--dim);
  background: none; border: 1px solid var(--line); padding: 5px 12px;
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
}
.wallet-disconnect-btn:hover { color: var(--off); border-color: rgba(240,235,225,0.3); }

/* Masks grid — scrollable when overflow */
.wallet-masks-grid {
  flex: 1 1 auto; min-height: 0;   /* min-height:0 lets flex child actually shrink so overflow-y engages */
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 28px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;     /* rows size to content — prevents stretching when flex has extra height */
  align-items: start;              /* don't stretch items vertically — respect the card's own aspect-ratio */
  align-content: start;            /* stack rows at the top, not spread */
  row-gap: 10px; column-gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,235,225,0.14) transparent;
}
.wallet-masks-grid::-webkit-scrollbar { width: 6px; }
.wallet-masks-grid::-webkit-scrollbar-track { background: transparent; }
.wallet-masks-grid::-webkit-scrollbar-thumb {
  background: rgba(240,235,225,0.14); border-radius: 3px;
}
.wallet-masks-grid::-webkit-scrollbar-thumb:hover { background: rgba(240,235,225,0.28); }

/* When grid is showing message (not cards), span all columns */
.wallet-masks-grid .wallet-panel-msg {
  grid-column: 1 / -1;
  padding: 20px 0;
  text-align: center; color: var(--dim);
  font-size: var(--fs-body-sm);
}

.wallet-mask-card {
  position: relative; cursor: pointer; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--bg);
  min-width: 0;                       /* allow 1fr columns to size cleanly */
  border: 1px solid var(--line);
  transition: border-color var(--t-fast) ease,
              transform var(--t-fast) ease,
              box-shadow var(--t-fast) ease;
}
.wallet-mask-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45),
              0 0 0 1px rgba(245,163,26,0.08);
}
.wallet-mask-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.wallet-mask-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wallet-mask-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 8px 6px;
  background: linear-gradient(to top,
    rgba(6,5,4,0.95) 0%,
    rgba(6,5,4,0.7) 55%,
    transparent 100%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; line-height: 1.2; color: var(--off);
  letter-spacing: var(--track-tight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Wallet picker (EIP-6963 multi-wallet selector) ── */
.wallet-picker {
  display: none; position: fixed; inset: 0; z-index: 1100;
  pointer-events: none;
}
.wallet-picker.visible { display: block; pointer-events: auto; }
.wallet-picker-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,5,4,0.65); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t-base) ease;
}
.wallet-picker.open .wallet-picker-backdrop { opacity: 1; }
.wallet-picker-inner {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  opacity: 0; transition: transform var(--t-base) ease, opacity var(--t-base) ease;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sharp);
  padding: 28px 28px 20px;
  min-width: min(300px, 90vw); max-width: 380px; width: 90%;
}
.wallet-picker.open .wallet-picker-inner {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.wallet-picker-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-card-name); font-style: italic; letter-spacing: var(--track-tight);
  color: var(--off); text-align: center;
  margin-bottom: 20px;
}
.wallet-picker-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}
.wallet-picker-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 12px 16px;
  background: rgba(240,235,225,0.04);
  border: 1px solid rgba(240,235,225,0.1);
  border-radius: var(--r-sharp); cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
  color: var(--off);
}
.wallet-picker-item:hover {
  background: rgba(240,235,225,0.08);
  border-color: rgba(240,235,225,0.25);
}
.wallet-picker-icon {
  width: 36px; height: 36px; border-radius: var(--r-sharp); object-fit: contain;
  flex-shrink: 0;
}
.wallet-picker-icon-placeholder {
  width: 36px; height: 36px; border-radius: var(--r-sharp);
  background: rgba(240,235,225,0.1); flex-shrink: 0;
}
.wallet-picker-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-body-sm); color: var(--off);
}
.wallet-picker-none {
  text-align: center; padding: 20px 0;
  font-size: var(--fs-button); color: var(--off-70);
  line-height: 1.6;
}
.wallet-picker-delegate-note {
  font-size: var(--fs-label); color: var(--off-70);
  text-align: center; line-height: 1.5;
  padding: 16px 20px; margin: 16px 0 8px;
  background: rgba(245,163,26,0.04);
  border: 1px solid rgba(245,163,26,0.10);
  border-radius: 6px;
}
.wallet-picker-delegate-link {
  color: var(--gold); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(245,163,26,0.3);
  transition: border-color 200ms ease;
}
.wallet-picker-delegate-link:hover {
  border-color: var(--gold);
}
.wallet-picker-cancel {
  width: 100%; padding: 10px;
  background: none; border: 1px solid var(--line-strong);
  border-radius: var(--r-sharp); color: var(--off-70);
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-label);
  cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast);
}
.wallet-picker-cancel:hover {
  border-color: rgba(240,235,225,0.3);
  color: rgba(240,235,225,0.8);
}

/* State messages */
.wallet-panel-msg {
  font-size: var(--fs-button); color: var(--dim);
  padding: 24px 0; text-align: center;
}

/* ─── ANTHEM ──────────────────────────────────────────────── */
.anthem-section { padding: var(--section-gap) 0; }
.anthem-header { margin-bottom: 40px; }
.anthem-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-title);
  font-weight: 700; line-height: 1.05;
}
.anthem-title .word { font-weight: 400; }
.anthem-title em { font-style: italic; color: var(--gold); }
.anthem-subtitle {
  font-size: var(--fs-body);
  font-style: italic; color: var(--gold);
  margin-top: 8px;
}

.video-wrap {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden;
}
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* .sound-btn uses .btn .btn--ghost .btn--icon — unique properties kept here */
.sound-btn {
  position: absolute; bottom: 20px; right: 20px;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(6,5,4,0.8); backdrop-filter: blur(12px);
  border-color: var(--gold-dim); color: var(--gold);
}
.sound-btn:hover, .sound-btn.active {
  background: var(--gold); color: var(--bg); border-color: var(--gold);
}

/* ─── MASK MODAL ──────────────────────────────────────────── */
.mask-modal {
  display: none; position: fixed; inset: 0; z-index: var(--z-modal);
  align-items: center; justify-content: center; padding: 20px;
}
.mask-modal.visible { display: flex; }
.mask-modal.open .mask-modal-backdrop { opacity: 1; }
.mask-modal.open .mask-modal-inner    { opacity: 1; transform: translateY(0) scale(1); }

.mask-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,5,4,0.9); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity var(--t-base) ease;
}
.mask-modal-inner {
  position: relative; z-index: var(--z-base);
  width: 100%; max-width: 820px;
  background: var(--bg2); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity var(--t-base) ease, transform var(--t-base) ease;
  overflow: hidden;
}
.mask-modal-close {
  position: absolute; top: 20px; right: 24px; z-index: 2;
  background: none; border: none; color: var(--dim); cursor: pointer;
  font-size: 32px; line-height: 1;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color var(--t-fast), background var(--t-fast);
}
.mask-modal-close:hover {
  color: var(--off);
  background: rgba(240,235,225,0.08);
}

.mask-modal-layout {
  display: flex; align-items: stretch;
  overflow: hidden; height: min(90vh, 760px);
}

/* Left — portrait 3:4 image drives modal height */
.mask-modal-left {
  flex: 0 0 48%;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
}
.mask-modal-img-wrap {
  flex: 1; min-height: 0;
  position: relative; overflow: hidden; background: var(--bg);
}
.mask-modal-img {
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0; transform: scale(1.02);
  transition: opacity var(--t-slow) ease, transform var(--t-slow) ease;
}
.mask-modal-img.revealed {
  opacity: 1; transform: scale(1);
}
.mask-modal-loader {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity var(--t-slow) ease;
  z-index: 2;
}
.mask-modal-loader.loaded {
  opacity: 0;
  pointer-events: none;
}
.mask-modal-loader-logo {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  animation: hmLoaderSpin 2.4s linear infinite;
  opacity: 0.75;
}
@keyframes hmLoaderSpin {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 0.75; }
  50%  { transform: rotate(180deg) scale(1.08); opacity: 1;    }
  100% { transform: rotate(360deg) scale(1);    opacity: 0.75; }
}
/* "D3 gallery" overlay: an engraved brass nameplate hovers over the
   rendered mask containing the name. The plate is pinned to the image's
   actual rendered area (not the wrap's edges) via CSS vars set by JS — so
   margins stay equal even when the image is letterboxed inside the wrap. */

/* Gunmetal nameplate — dark museum plate with subtle highlights, brushed-
   metal grain, and a worn-edge vignette so it reads as real metal rather
   than a flat black rectangle. Two nail-head studs flank the name.
   Shrink-to-fit width capped at image-width − 40px so all 1–25 char
   on-chain names fit (ellipsis only as a last-resort fallback). */
.mask-modal-img-name {
  position: absolute;
  left: calc(var(--shot-img-left, 0px) + var(--shot-img-w, 100%) / 2);
  z-index: 3;
  display: none;
  pointer-events: none;
  box-sizing: border-box;
  max-width: calc(var(--shot-img-w, 100%) - 40px);
  padding: 7px 36px;  /* horizontal padding leaves room for the nail-heads */
  border: 1px solid rgba(5, 8, 12, 0.95);
  border-radius: 2px;
  background:
    /* Worn-edge vignette — darker near the corners */
    radial-gradient(ellipse 130% 200% at 50% 50%,
      transparent 30%, rgba(0,0,0,0.35) 100%),
    /* Highlight blob — cool light reflection, upper-left */
    radial-gradient(ellipse 80% 120% at 22% 35%,
      rgba(130,140,160,0.16) 0%, transparent 65%),
    /* Shadow blob — deeper darkness, lower-right */
    radial-gradient(ellipse 70% 110% at 78% 65%,
      rgba(0,0,0,0.30) 0%, transparent 60%),
    /* Brushed-metal grain — faint horizontal striations */
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.040) 0px,
      rgba(180,190,210,0.022) 1px,
      transparent 2px),
    /* Base gunmetal — dark steel with cool undertones */
    linear-gradient(173deg,
      #4D525C 0%,
      #353A42 30%,
      #21262C 60%,
      #0B0E12 100%);
  box-shadow:
    inset 0 1px 0 rgba(180,190,210,0.30),
    inset 1px 0 0 rgba(150,160,180,0.12),
    inset -1px 0 0 rgba(0,0,0,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.65),
    0 3px 6px rgba(0,0,0,0.55);
}
.mask-modal-img-name--on { display: block; }
/* Nail-head studs at each end of the plate, vertically centered. */
.mask-modal-img-name::before,
.mask-modal-img-name::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 30% 30%,
      #9CA4B0 0%,
      #2E343C 55%,
      #06080C 100%);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.65),
    inset 0 1px 0.5px rgba(200,210,225,0.50),
    inset 0 -1px 0.5px rgba(0,0,0,0.5);
}
.mask-modal-img-name::before { left: 11px; }
.mask-modal-img-name::after  { right: 11px; }
/* Top: plaque sits near the image's top edge. */
.mask-modal-img-name[data-pos="top"] {
  top: calc(var(--shot-img-top, 0px) + 16px);
  transform: translateX(-50%);
}
/* Bottom: plaque sits near the image's bottom edge. */
.mask-modal-img-name[data-pos="bottom"] {
  top: calc(var(--shot-img-top, 0px) + var(--shot-img-h, 100%) - 16px);
  transform: translate(-50%, -100%);
}
/* When the name overlay is on, hide the OpenSea price badge so the preview
   matches the clean screenshot output. */
.mask-modal-img-wrap--name-on .mask-modal-img-listing { display: none !important; }
/* Raised cream lettering — light glyphs catching light from above, with a
   soft top highlight + deeper bottom shadow so the type reads as embossed
   from the gunmetal surface rather than engraved into it. */
.mask-modal-img-name-text {
  display: block;
  max-width: 100%;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: normal;
  font-weight: 700;
  color: #F4E8C8;
  font-size: calc(clamp(11px, 1.6vw, 18px) * var(--shot-scale, 1));
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-shadow:
    0 -1px 0 rgba(255,240,200,0.40),
    0 1px 0 rgba(0,0,0,0.55),
    0 1px 1.5px rgba(0,0,0,0.40);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Screenshot toolbar — sits between image and OpenSea/Etherscan links */
.mask-modal-shot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.mask-modal-shot-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--dim); cursor: pointer; user-select: none;
}
.mask-modal-shot-toggle input { accent-color: var(--gold); margin: 0; cursor: pointer; }
.mask-modal-shot-toggle:hover { color: var(--off); }
.mask-modal-shot-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--gold); cursor: pointer;
  background: rgba(245,163,26,0.06);
  border: 1px solid rgba(245,163,26,0.3);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.mask-modal-shot-btn:hover {
  background: rgba(245,163,26,0.12);
  border-color: var(--gold);
}
.mask-modal-shot-btn:disabled {
  opacity: 0.6; cursor: progress;
}

.mask-modal-links {
  display: flex; gap: 1px; border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.mask-modal-link {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 16px 12px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; color: var(--dim); text-decoration: none;
  background: transparent; border: none; transition: all var(--t-fast);
  border-right: 1px solid var(--line);
}
.mask-modal-link img { width: 18px; height: 18px; object-fit: contain; opacity: 0.6; transition: opacity var(--t-fast); }
.mask-modal-link:last-child { border-right: none; }
.mask-modal-link:hover { background: rgba(245,163,26,0.05); color: var(--gold); }
.mask-modal-link:hover img { opacity: 1; }

/* Right — fixed, only the sales region scrolls */
.mask-modal-right {
  flex: 1; padding: 40px 28px 28px;
  display: flex; flex-direction: column;
  overflow-y: auto; min-width: 0;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.mask-modal-right::-webkit-scrollbar { width: 3px; }
.mask-modal-right::-webkit-scrollbar-track { background: transparent; }
.mask-modal-right::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-sm); }
.mask-modal-name-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; flex-shrink: 0;
}
.mask-modal-name {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-h3);
  font-weight: 700; font-style: italic; color: var(--off);
  line-height: 1.1; flex: 1; min-width: 0;
}
.mask-modal-rename {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  padding: 6px 12px;
  border: 1px solid rgba(245,163,26,0.3);
  background: rgba(245,163,26,0.06);
  white-space: nowrap; flex-shrink: 0;
  transition: all var(--t-fast);
}
.mask-modal-rename:hover {
  background: rgba(245,163,26,0.12);
  border-color: var(--gold);
}
/* Default `display: inline-flex` above overrides the HTML `hidden` attribute;
   this restores it so JS can toggle with renameBtn.hidden = true/false. */
.mask-modal-rename[hidden] { display: none; }
.mask-modal-img-listing {
  position: absolute; top: 45px; left: 12px; right: auto; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  background: rgba(6,5,4,0.82);
  border: 1px solid rgba(61,170,181,0.45);
  color: var(--teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-tight);
  padding: 5px 10px;
  backdrop-filter: blur(6px);
  text-decoration: none;
  transition: border-color var(--t-fast);
}
.mask-modal-img-listing:hover { border-color: var(--teal); }
.mask-modal-img-listing img { width: 14px; height: 14px; opacity: 0.85; }
.mask-modal-img-burned {
  position: absolute; bottom: 12px; left: 12px; z-index: 3;
  display: none; align-items: center; gap: 6px;
  background: rgba(6,5,4,0.82); backdrop-filter: blur(6px);
  border: 1px solid rgba(232,120,32,0.6);
  color: var(--orange);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-tight);
  padding: 5px 10px;
  pointer-events: none;
}
.mask-modal-virgin {
  display: none; align-items: center; gap: 6px;
  padding: 3px 10px; margin-bottom: 8px; flex-shrink: 0;
  background: rgba(61,170,181,0.1); border: 1px solid rgba(61,170,181,0.35);
  color: var(--teal); font-size: var(--fs-meta); font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase; width: fit-content;
  cursor: default; position: relative;
}
.mask-modal-virgin::after {
  content: 'Never named · NCT never claimed · DoubleDrop untouched';
  position: absolute; bottom: calc(100% + 6px); left: 0;
  background: var(--bg-card, #1c1c1c); color: var(--off); border: 1px solid var(--line);
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  white-space: nowrap; padding: 4px 9px; pointer-events: none;
  opacity: 0; transition: opacity 0.15s; z-index: 10;
}
.mask-modal-virgin:hover::after { opacity: 1; }
.mask-modal-details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-bottom: 4px; flex-shrink: 0;
}
.mask-modal-detail {
  padding: 6px 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
  display: flex; flex-direction: column; gap: 2px;
}
.mask-modal-detail-label {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--dim);
}
.mask-modal-detail-label--icon {
  display: flex; align-items: center; gap: 5px;
}
.mask-modal-detail-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); color: var(--off); font-weight: 700;
}
.mask-modal-detail-link {
  color: var(--teal); text-decoration: none;
}
.mask-modal-detail-link:hover { text-decoration: underline; }
.mask-modal-unclaimed {
  color: var(--gold); position: relative; cursor: default;
}
.mask-modal-unclaimed::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--bg-card, #1c1c1c); color: var(--off); border: 1px solid var(--line);
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 400;
  white-space: nowrap; padding: 4px 9px; pointer-events: none;
  opacity: 0; transition: opacity 0.15s; z-index: 10;
}
.mask-modal-unclaimed:hover::after { opacity: 1; }
.loading-val { opacity: 0.3; }
.mask-modal-section-label {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--dim);
  margin-bottom: 8px; margin-top: 16px; flex-shrink: 0;
}

/* Activity tabs */
.mask-modal-tabs {
  display: flex; gap: 0; margin-top: 16px; margin-bottom: 0;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
  justify-content: space-evenly;
}
.mask-modal-tab {
  background: none; border: none; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--dim);
  padding: 6px 14px 8px; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
}
.mask-modal-tab:hover { color: var(--off); }
.mask-modal-tab--active { color: var(--off); border-bottom-color: var(--teal); }
.mask-modal-tab-panel { flex-shrink: 0; }

/* Naming history controls */
.mask-modal-names-header {
  display: flex; justify-content: flex-end; padding: 6px 0 4px;
}
.mask-modal-sort-btn {
  background: none; border: none; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-meta);
  color: var(--dim); padding: 2px 0; transition: color 0.15s;
}
.mask-modal-sort-btn:hover { color: var(--off); }

/* old → new name inside a rename row */
.mask-modal-name-change {
  display: flex; align-items: center; gap: 5px;
  min-width: 0; overflow: hidden;
}
.mask-modal-name-prev {
  color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100px; flex-shrink: 1;
}
.mask-modal-name-arrow { color: var(--dim); flex-shrink: 0; }
.mask-modal-name-next {
  color: var(--off); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1;
}
.mask-modal-tx-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.mask-modal-traits {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex-shrink: 0;
}
.mask-modal-trait {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid rgba(61,170,181,0.15);
  background: rgba(255,255,255,0.015);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-width: 0;
}
.mask-modal-trait-label {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; color: var(--dim); flex-shrink: 0;
}
.mask-modal-trait-right {
  display: flex; align-items: baseline; gap: 6px;
  min-width: 0; overflow: hidden;
}
.mask-modal-trait-value {
  font-size: var(--fs-button); font-weight: 600; color: var(--off);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mask-modal-trait-pct {
  color: var(--teal); font-weight: 700; font-size: var(--fs-meta); flex-shrink: 0;
}
/* Sales / activity — only scrollable region */
.mask-modal-sales {
  display: flex; flex-direction: column; gap: 6px;
  max-height: calc(4 * 50px + 3 * 6px);
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.mask-modal-sales::-webkit-scrollbar { width: 3px; }
.mask-modal-sales::-webkit-scrollbar-track { background: transparent; }
.mask-modal-sales::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-sm); }
.mask-modal-sale {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--line);
  flex-shrink: 0;
}
.mask-modal-sale-type {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-default);
  text-transform: uppercase; padding: 3px 8px; flex-shrink: 0;
}
.mask-modal-sale-type.sale   { color: var(--gold); border: 1px solid rgba(245,163,26,0.3); }
.mask-modal-sale-type.rename { color: var(--teal); border: 1px solid rgba(61,170,181,0.3); }
.mask-modal-sale-detail { font-size: var(--fs-button); color: var(--off-70); flex: 1; }
.mask-modal-sale-time { font-size: var(--fs-label); color: var(--dim); white-space: nowrap; cursor: default; }
.mask-modal-sale-time[data-date] { text-decoration: underline dotted; text-underline-offset: 3px; }
.sale-date-tip {
  background: var(--surface-2, #1c1c1c);
  color: var(--fg);
  font-size: var(--fs-label);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  white-space: nowrap;
}
.mask-modal-sale-loading { font-size: var(--fs-label); color: var(--dim); padding: 6px 0; }

@media (max-width: 768px) {
  /* Full-screen card that scrolls internally */
  .mask-modal { padding: 0; align-items: flex-start; }
  .mask-modal-inner {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100vh;   /* fallback */
    max-height: 100svh;  /* excludes browser chrome on mobile */
  }
  /* Close button stays pinned at top-right as you scroll */
  .mask-modal-close {
    position: sticky;
    top: 8px;
    align-self: flex-end;
    margin: 8px 8px 0;
    flex-shrink: 0;
  }
  /* Stacked layout */
  .mask-modal-layout { flex-direction: column; overflow: visible; height: auto; }
  .mask-modal-left   { flex: 0 0 auto; }
  .mask-modal-img-wrap { aspect-ratio: 3 / 4; max-height: 55vh; flex: none; }
  .mask-modal-right  { flex: none; overflow-y: visible; padding: 16px 20px 32px; }
  .mask-modal-traits { grid-template-columns: 1fr; }
}

/* ─── FOOTER ──────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line);
  padding: 40px clamp(20px, 4vw, 52px) 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.foot-top {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px;
}
.foot-copy {
  font-size: var(--fs-label); color: var(--dim);
  letter-spacing: var(--track-default);
  border-top: 1px solid var(--line); padding-top: 20px;
}
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.foot-name {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-body); font-weight: 700; color: var(--off);
  line-height: 1;
}
.foot-name-community {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
  color: var(--gold); text-transform: uppercase;
  margin-left: 6px;
}
.foot-tagline {
  font-size: var(--fs-label); letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--dim); margin-top: 3px;
}
.foot-links { display: flex; gap: 32px; list-style: none; flex-wrap: wrap; }
.foot-links a {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-label); letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--dim); text-decoration: none; transition: color var(--t-fast);
}
.foot-links a img { width: 16px; height: 16px; object-fit: contain; opacity: 0.55; transition: opacity var(--t-fast); }
.logo-invert { filter: brightness(0) invert(1); }

/* Inline SVG icons (black source → inverted to match text) */
.icon-inline {
  display: inline-block; vertical-align: middle; margin-left: 4px;
  filter: brightness(0) invert(1); opacity: 0.7;
}
.foot-links a:hover { color: var(--gold); }
.foot-links a:hover img { opacity: 1; }

/* ─── VITRINE STICKY BAR ────────────────────────────────────── */
.vitrine-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: linear-gradient(180deg, rgba(24,20,16,0.95) 0%, rgba(18,15,12,0.98) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(245,163,26,0.15);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
  pointer-events: none;
}
.vitrine-bar.visible {
  transform: translateY(0);
  pointer-events: auto;
}
/* Reserve space for the bar so footer isn't hidden */
body:has(.vitrine-bar.visible) footer { padding-bottom: 64px; }
.vitrine-bar-inner {
  padding: 12px clamp(20px, 4vw, 52px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; max-width: 1400px; margin: 0 auto;
}
.vitrine-bar-left {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.vitrine-bar-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; background: var(--gold); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.vitrine-bar-text {
  font-size: var(--fs-body-sm); color: var(--off-70); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.vitrine-bar-text strong { color: var(--gold); font-weight: 700; }
.vitrine-bar-right {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.vitrine-bar-cta {
  padding: 8px 20px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--gold); color: var(--bg); border: none;
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast);
}
.vitrine-bar-cta:hover { background: #f7b23e; }
.vitrine-bar-close {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--t-fast);
}
.vitrine-bar-close img { filter: brightness(0) invert(1); opacity: 0.45; transition: opacity var(--t-fast); }
.vitrine-bar-close:hover img { opacity: 0.8; }

@media (max-width: 600px) {
  .vitrine-bar-inner { padding: 10px 16px; gap: 10px; }
  .vitrine-bar-text { font-size: 12px; }
  .vitrine-bar-cta { padding: 7px 14px; font-size: 11px; }
}

/* ─── NAV RIGHT GROUP + HAMBURGER ─────────────────────────── */
.nav-right {
  display: flex; align-items: center; gap: 12px;
  justify-self: end; /* pin to right column */
}
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none;
  cursor: pointer; padding: 9px; flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: var(--off);
  transition: transform var(--t-base) ease, opacity var(--t-base) ease;
}
nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── MOBILE NAV DRAWER ───────────────────────────────────── */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 498;
  pointer-events: none;
}
.mobile-nav.visible { display: block; pointer-events: auto; }
.mobile-nav-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,5,4,0.92); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0; transition: opacity var(--t-base) ease;
}
.mobile-nav.open .mobile-nav-backdrop { opacity: 1; }
.mobile-nav-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 80px 40px 40px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  gap: 0;
  opacity: 0;
  transition: opacity var(--t-base) ease;
}
.mobile-nav.open .mobile-nav-inner { opacity: 1; }
.mobile-nav-inner a {
  display: block; padding: 14px 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 5.5vw, 28px); font-style: italic; font-weight: 700;
  color: var(--off-70); text-decoration: none;
  border-bottom: none;
  transition: color var(--t-fast);
  text-align: center;
}
.mobile-nav-inner a:hover,
.mobile-nav-inner a:active { color: var(--off); }
.mobile-nav-inner .mobile-nav-wallet {
  margin-top: 32px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-button);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--track-default);
  text-transform: uppercase;
  padding: 16px 48px;
  cursor: pointer;
  text-align: center;
}
.mobile-nav-inner .mobile-nav-wallet.wallet-connected {
  background: transparent;
  border: 1px solid rgba(61,170,181,0.4);
  color: var(--teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--track-tight);
  text-transform: none;
  padding: 14px 32px;
}
.mobile-nav-inner .mobile-nav-wallet.wallet-connected:hover {
  border-color: var(--teal);
  background: rgba(61,170,181,0.06);
}

/* ─── LEGAL PAGES ────────────────────────────────────────── */
.legal-page {
  max-width: 720px; margin: 0 auto;
  padding: clamp(60px, 10vw, 120px) clamp(20px, 4vw, 52px);
}
.legal-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700; color: var(--off); margin: 0 0 8px;
}
.legal-date {
  font-size: var(--fs-label); letter-spacing: var(--track-default);
  text-transform: uppercase; color: var(--dim); margin-bottom: 48px;
}
.legal-section {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.legal-section:last-child { border-bottom: none; }
.legal-section h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-body); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--off); margin: 0 0 12px;
}
.legal-section p {
  font-size: var(--fs-body-sm); color: var(--dim);
  line-height: 1.75; margin: 0 0 12px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.legal-list li {
  font-size: var(--fs-body-sm); color: var(--dim);
  line-height: 1.6; padding-left: 16px; position: relative;
}
.legal-list li::before {
  content: '—'; position: absolute; left: 0; color: var(--gold);
}
.legal-link {
  color: var(--teal); text-decoration: underline dotted;
  text-underline-offset: 3px; transition: color var(--t-fast);
}
.legal-link:hover { color: var(--off); }

/* ─── ADDITIONAL POLISH ───────────────────────────────────── */

/* ── Modal name checker ─────────────────────────────────── */
.mask-modal-name-check { margin: 0 0 6px; }
.mask-modal-check-toggle {
  display: inline-flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 1px solid rgba(61,170,181,0.2);
  cursor: pointer; padding: 6px 12px;
  font-family: 'Inter', sans-serif; font-size: var(--fs-label);
  font-weight: 700; letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--teal); transition: all var(--t-fast);
}
.mask-modal-check-toggle:hover {
  background: rgba(61,170,181,0.06);
  border-color: rgba(61,170,181,0.4);
}
.mask-modal-check-body { margin-top: 10px; }
.mask-modal-check-row { display: flex; gap: 0; width: 100%; }
.mask-modal-check-input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  border-right: none;
  color: var(--off); font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-body-sm); padding: 8px 12px;
  outline: none; transition: border-color var(--t-fast);
}
.mask-modal-check-input:focus { border-color: var(--teal); }
.mask-modal-check-input:focus + .mask-modal-check-btn { border-color: var(--teal); }
.mask-modal-check-btn {
  background: none; border: 1px solid var(--line); cursor: pointer;
  color: var(--teal); font-family: 'Inter', sans-serif;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  padding: 8px 16px; white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.mask-modal-check-btn:hover:not(:disabled) { border-color: var(--teal); background: rgba(61,170,181,0.08); }
.mask-modal-check-btn:disabled { opacity: 0.4; cursor: default; }
.mask-modal-check-result {
  margin-top: 8px; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); min-height: 18px;
}
.mask-modal-check-result.check-available   { color: var(--teal); }
.mask-modal-check-result.check-unavailable { color: #e05252; }
.mask-modal-check-result.check-error       { color: var(--dim); }

/* ── NCT section name checker ───────────────────────────── */
.nct-name-check { margin-top: 32px; }
.nct-name-check-label {
  font-family: 'Inter', sans-serif; font-size: var(--fs-label);
  font-weight: 700; letter-spacing: var(--track-default); text-transform: uppercase;
  color: var(--dim); margin-bottom: 12px;
}
.nct-name-check-row { display: flex; gap: 0; max-width: 400px; }
.nct-name-check-input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  border-right: none; color: var(--off);
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-body-sm);
  padding: 12px 16px; outline: none;
  transition: border-color var(--t-fast);
}
.nct-name-check-input:focus { border-color: var(--gold); }
.nct-name-check-input:focus + .nct-name-check-btn { border-color: var(--gold); }
.nct-name-check-btn {
  background: none; border: 1px solid rgba(255,255,255,0.12); cursor: pointer;
  color: var(--gold); font-family: 'Inter', sans-serif;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); text-transform: uppercase;
  padding: 12px 20px; white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.nct-name-check-btn:hover:not(:disabled) {
  border-color: var(--gold); background: rgba(245,163,26,0.08);
}
.nct-name-check-btn:disabled { opacity: 0.4; cursor: default; }
.nct-name-check-result {
  margin-top: 10px; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--track-default); min-height: 18px;
}
.nct-name-check-result.nct-check-available   { color: var(--teal); }
.nct-name-check-result.nct-check-unavailable { color: #e05252; }
.nct-name-check-result.nct-check-error       { color: var(--dim); }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
  .nct-layout { grid-template-columns: 1fr; }
  .nct-visual { max-width: 480px; margin: 0 auto; }
  .live-content { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
  /* On mobile the middle nav-links and nav-cta are hidden, so the 3-column grid
     collapses unpredictably (brand content can stretch its 1fr track, pulling the
     right-hand group inward). Switch to flex + space-between so the hamburger
     always hugs the right edge regardless of brand-text width. */
  nav { display: flex; justify-content: space-between; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  /* ── Live section — mobile overhaul ──────────────────────── */
  .live { padding: 48px 0; }
  .live-header { margin-bottom: 28px; }

  /* Ticker — slim with just the dot */
  .ticker { height: 34px; margin-bottom: 20px; }
  .ticker-tag { padding: 0 10px; font-size: 10px; }
  .ticker-tag span { display: none; }
  .ticker-track { gap: 24px; padding: 0 14px; }
  .ticker-item { font-size: 11px; gap: 5px; }
  .ticker-pill { font-size: 10px; padding: 2px 6px; }
  .ticker-val { font-size: 10px; }
  .ticker-muted { font-size: 10px; }

  /* Activity cards — 2-col, square, compact */
  .activity-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .act-card { aspect-ratio: 1 / 1; }
  .act-card-overlay { padding: 10px; }
  .act-badge { font-size: 9px; padding: 2px 6px; margin-bottom: 4px; gap: 3px; }
  .act-badge-dot { width: 4px; height: 4px; }
  .act-name { font-size: 12px; margin-bottom: 2px; }
  .act-val { font-size: 10px; }
  .act-time { font-size: 9px; margin-top: 2px; }
  .act-card-hint { display: none; }

  /* Sidebar spacing */
  .live-sidebar { gap: 20px; }

  /* Social accounts — vertical compact stack */
  .social-accounts { gap: 6px; }
  .social-account { padding: 10px 14px; }
  .social-account-info { gap: 10px; }
  .social-avatar { width: 28px; height: 28px; }
  .social-avatar-discord img { width: 16px; height: 16px; }
  .social-handle { font-size: 12px; margin-bottom: 0; }
  .social-role { font-size: 10px; }
  .social-follow { min-width: auto; padding: 5px 10px; font-size: 10px; gap: 5px; }
  .social-follow img { width: 10px; height: 10px; }

  /* NCT activity — compact items, shorter list */
  .social-posts-label { margin-bottom: 10px; font-size: 10px; }
  #nctActivity { max-height: 200px; }
  .nct-act-item { padding: 7px 10px; gap: 6px; margin-bottom: 4px; }
  .nct-act-badge { font-size: 9px; padding: 2px 6px; }
  .nct-act-detail { font-size: 10px; }
  .nct-act-time { font-size: 10px; }
  .nct-act-etherscan { width: 12px; height: 12px; }

  .gallery-header { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* ── Hero — mobile polish ──────────────────────────────────── */
  .hero-scroll { display: none; }
  .hero-desc { margin-bottom: 28px; }
  .hero-eyebrow { margin-bottom: 14px; }
  .btn-primary { padding: 14px 28px; }

  /* ── NCT (The Mechanic) — mobile polish ────────────────────── */
  .nct-visual-overlay { padding: 20px; }
  .nct-body { margin-bottom: 28px; }
  .nct-step { padding: 14px 16px; gap: 12px; }
  .nct-step-n { width: 28px; height: 28px; font-size: 10px; }
  .nct-step-title { font-size: var(--fs-button); }
  .nct-step-desc { font-size: var(--fs-label); }
  .nct-name-check-row { max-width: 100%; }
  .nct-name-check-label { margin-bottom: 8px; }
  .nct-headline { margin-bottom: 20px; }

  /* ── Anthem — mobile polish ────────────────────────────────── */
  .anthem-header { margin-bottom: 24px; }
  .anthem-subtitle { font-size: var(--fs-body-sm); }
  .sound-btn { padding: 8px 14px; gap: 6px; bottom: 12px; right: 12px; font-size: 11px; }

  /* ── Tighter section gaps on mobile ──────────────────────── */
  .about, .gallery, .nct, .nct-token, .anthem-section {
    padding-top: 48px; padding-bottom: 48px;
  }

  /* ── Footer — mobile ─────────────────────────────────────── */
  footer { flex-direction: column; align-items: center; padding: 28px 20px 20px; gap: 16px; }
  .foot-top { flex-direction: column; align-items: center; gap: 16px; }
  .foot-brand { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .foot-tagline { text-align: center; }
  .foot-links { justify-content: center; gap: 12px 20px; }
  .foot-links a { font-size: 11px; }
  .foot-copy { text-align: center; font-size: 10px; padding-top: 14px; line-height: 1.5; }
  /* Touch-friendly tap targets */
  .btn { min-height: 44px; }

  /* ── Mobile gallery: 2-col grid replaces carousel ───────────── */
  .marquee-wrap { display: none !important; }
  .gallery-static {
    display: flex !important;
    flex-wrap: wrap; gap: 8px;
    justify-content: center;
    /* 2 rows of square cards + 1 gap + breathing room */
    max-height: calc((50vw - 20px) * 2 + 8px);
    overflow-y: auto; overflow-x: hidden;
  }
  .gallery-static .m-card {
    width: calc(50% - 4px); height: auto;
    aspect-ratio: 1 / 1;
  }
  .gallery-static .m-label { padding: 8px 10px 8px; }
  .gallery-static .m-label-name { font-size: var(--fs-button); }
  .gallery-static .m-rank { padding: 2px 6px; font-size: 10px; }
  .gallery-static .m-listed-badge { padding: 2px 6px; font-size: 10px; }

  /* Gallery search: drop fixed width, grow alongside filter tabs */
  .gallery-search-input { width: auto; min-width: 0; flex: 1; margin-left: 0; }
  .gallery-search-input:focus { width: auto; }

  /* ── Filter modal replaces horizontal tabs on mobile ─────────── */
  .filter-tabs,
  .filter-values-wrap { display: none !important; }
  .filter-modal-trigger { display: inline-flex; }
  .gallery-sort-menu { right: auto; left: 0; }
  .gallery-filters { display: flex; flex-direction: column; }
  .filter-active-chips { order: 2; }
  .gallery-controls-row { order: 1; }
}
@media (max-width: 540px) {
  .hero-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}

/* ── Small-phone polish (375–480px) ──────────────────────────── */
@media (max-width: 480px) {
  /* Tighter container gutter */
  .container { padding: 0 16px; }
  /* Scale down stat values so they don't overflow 2-column about grid */
  .about-stats .stat-value { font-size: var(--fs-body); }
  .about-stats .stat--lead .stat-value { font-size: var(--fs-h3); }
  /* All three controls stay on one row — compact mode */
  .gallery-controls-row { flex-wrap: nowrap; gap: 6px; }
  .filter-modal-trigger { padding: 8px 10px; gap: 6px; }
  .filter-trigger-label { display: none; }
  .gallery-sort-trigger { padding: 8px 10px; gap: 6px; max-width: 88px; }
  .gallery-sort-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gallery-search-input { flex: 1; min-width: 60px; width: auto; margin-left: 0; }
  .gallery-search-input:focus { width: auto; }
}

/* ── Footer bottom row + back-to-top ────────────────────────────── */
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.back-to-top {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base), color var(--t-fast), border-color var(--t-fast);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { color: var(--off); border-color: var(--dim); }
@media (max-width: 600px) {
  .foot-bottom { flex-direction: column-reverse; align-items: center; gap: 20px; }
  .back-to-top { opacity: 1; pointer-events: auto; }
}

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

/* ── Utility classes (used to remove inline style= attributes for CSP) ── */
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }