/* ==========================================================================
   catsns — main.css (shell: tokens, layout, sections, components)
   Strict 1-bit: only #000 / #fff. No greys, gradients, shadows, blur or radii
   (except the round logo disc). Depth comes from dither density + inversion.
   Module styles live in glitch.css (glitch-text / ticker) and cat.css (cat).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --ink: #000;
  --paper: #fff;
  --px: 4px;                                          /* base pixel unit */
  --font-pixel: "Pixelify Sans", ui-monospace, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --maxw: 1344px;                                     /* 1440 viewport: content edge = nav gutter */
  --gutter: clamp(16px, 4vw, 48px);

  --nav-h: 64px;
  --ticker-h: 64px;                                   /* the black bar under the hero */
  --bd: 2px;                                          /* the "pixel border" */

  /* Contextual colours: every component paints with --fg / --bg so that
     anything placed in an .invert context flips automatically. */
  --fg: var(--ink);
  --bg: var(--paper);

  /* Bayer 4×4 ordered-dither tiles, ink on transparent (n/16 cells set). */
  --d2:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z'/%3E%3C/svg%3E");
  --d4:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 0h1v1H2zM0 2h1v1H0zM2 2h1v1H2z'/%3E%3C/svg%3E");
  --d8:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 0h1v1H2zM1 1h1v1H1zM3 1h1v1H3zM0 2h1v1H0zM2 2h1v1H2zM1 3h1v1H1zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --d12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h4v1H0zM0 2h4v1H0zM1 1h1v1H1zM3 1h1v1H3zM1 3h1v1H1zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --d14: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h4v1H0zM0 2h4v1H0zM0 1h2v1H0zM3 1h1v1H3zM1 3h3v1H1z'/%3E%3C/svg%3E");
  --d1:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0z'/%3E%3C/svg%3E");
  --d6:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 0h1v1H2zM0 2h1v1H0zM2 2h1v1H2zM1 1h1v1H1zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --d10: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h3v1H0zM1 1h1v1H1zM3 1h1v1H3zM0 2h1v1H0zM2 2h2v1H2zM1 3h1v1H1zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --dither-cell: 8px;                                  /* 2 CSS px per dither dot (fine, like the banner) */

  /* Pixel crosshair cursors (white halo keeps them visible on ink and paper). */
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M10 0h3v9h-3zM10 14h3v9h-3zM0 10h9v3H0zM14 10h9v3h-9zM10 10h3v3h-3z'/%3E%3Cpath d='M11 1h1v7h-1zM11 15h1v7h-1zM1 11h7v1H1zM15 11h7v1h-7zM11 11h1v1h-1z'/%3E%3C/svg%3E") 11 11, crosshair;
  --cursor-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M10 0h3v6h-3zM10 17h3v6h-3zM0 10h6v3H0zM17 10h6v3h-6zM6 6h11v11H6z'/%3E%3Cpath d='M11 1h1v4h-1zM11 18h1v4h-1zM1 11h4v1H1zM18 11h4v1h-4zM7 7h9v9H7z'/%3E%3Cpath fill='%23fff' d='M10 10h3v3h-3z'/%3E%3C/svg%3E") 11 11, pointer;
}

.invert {
  --fg: var(--paper);
  --bg: var(--ink);
  background: var(--bg);
  color: var(--fg);
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
  scrollbar-color: var(--ink) var(--paper);
  background: var(--paper);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { body { font-size: 18px; } }

img, svg, canvas, video { display: block; max-width: 100%; }
canvas { image-rendering: crisp-edges; image-rendering: pixelated; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

::selection { background: var(--ink); color: var(--paper); }
.invert ::selection { background: var(--paper); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 2px dashed currentColor; outline-offset: 4px; }

.skip {
  position: fixed; left: 8px; top: -80px; z-index: 100;
  padding: 12px 16px;
  background: var(--ink); color: var(--paper);
  font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}
.skip:focus-visible { top: 8px; outline-color: var(--paper); outline-offset: -6px; }

/* Pixel crosshair, pointer devices only. */
@media (pointer: fine) {
  html { cursor: var(--cursor); }
  a, button, label, summary, [role="button"], [data-cat-mount], .card { cursor: var(--cursor-hot); }
  input[type="text"] { cursor: text; }
}

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- 3. Type primitives ------------------------------------------ */
.label, .section__bar, .eyebrow, .hero__meta {
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.h2 {
  font: 700 clamp(40px, 7vw, 120px)/.88 var(--font-pixel);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.lede {
  font: 500 clamp(17px, 1.45vw, 20px)/1.45 var(--font-sans);
  max-width: 36ch;
  text-wrap: pretty;
}

/* ---------- 4. Buttons --------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 18px;
  border: var(--bd) solid var(--fg);
  background: var(--bg); color: var(--fg);
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--lg { height: 56px; padding: 0 26px; font-size: 13px; }
.btn__label, .btn__arrow { display: inline-block; }

.btn:focus-visible { background: var(--fg); color: var(--bg); }
.btn--solid:focus-visible { background: var(--bg); color: var(--fg); }
@media (hover: hover) {
  .btn:hover { background: var(--fg); color: var(--bg); animation: px-shift .27s steps(1, end) 1; }
  .btn--solid:hover { background: var(--bg); color: var(--fg); }
  .btn:hover .btn__arrow { transform: translateX(4px); }
}
.btn:active { transform: translate(2px, 2px); }
.btn.is-soon { animation: px-shift .27s steps(1, end) 1; }
.btn__label--short { display: none; }

/* 1-step glitch shift: hard jumps, no easing. */
@keyframes px-shift {
  0%   { transform: translate(4px, 0);  clip-path: inset(0 0 45% 0); }
  33%  { transform: translate(-3px, 0); clip-path: inset(40% 0 0 0); }
  66%  { transform: translate(2px, 0);  clip-path: none; }
  100% { transform: none; }
}

/* ---------- 5. Nav ------------------------------------------------------- */
.nav {
  --fg: var(--ink); --bg: var(--paper);
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: stretch;
  background: var(--bg); color: var(--fg);
  border-bottom: var(--bd) solid var(--fg);
}
.nav.is-inverted { --fg: var(--paper); --bg: var(--ink); }

.nav__brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px 0 var(--gutter);
  color: inherit; text-decoration: none;
  border-right: var(--bd) solid var(--fg);
}
.nav__disc {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;                                 /* the one allowed radius */
  background: var(--paper);
  border: var(--bd) solid var(--ink);
}
.nav.is-inverted .nav__disc { border-color: var(--paper); }
.nav__disc img { width: auto; height: 24px; }
.nav__word { font: 700 26px/1 var(--font-pixel); letter-spacing: -.01em; margin-top: -3px; }
@media (hover: hover) { .nav__brand:hover .nav__word { animation: px-shift .27s steps(1, end) 1; } }

.nav__links { display: flex; margin-left: auto; }
.nav__links a {
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px;
  border-left: var(--bd) solid var(--fg);
  font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}
.nav__links a.is-current { background: var(--fg); color: var(--bg); }
@media (hover: hover) { .nav__links a:hover { background: var(--fg); color: var(--bg); } }
.nav__idx { font-weight: 400; }
.nav__links .nav__links-x { display: none; }

.nav__actions { display: flex; align-items: stretch; }
.nav__buy { height: auto; border: 0; border-left: var(--bd) solid var(--fg); padding: 0 24px; }
.nav__buy:hover, .nav__buy:focus-visible { border-color: var(--fg); }
.nav__x {
  width: var(--nav-h);
  display: grid; place-items: center;
  border-left: var(--bd) solid var(--fg);
  color: inherit;
}
@media (hover: hover) { .nav__x:hover { background: var(--fg); color: var(--bg); } }
.nav a:focus-visible, .nav button:focus-visible { outline-offset: -8px; }

.nav__menu {
  display: none;
  align-items: center; justify-content: center; gap: 10px;
  min-width: var(--nav-h); padding: 0 16px;
  border: 0; border-left: var(--bd) solid var(--fg);
  background: var(--bg); color: var(--fg);
  font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.nav__menu-icon { flex: none; }
.nav__menu-icon--close, .nav.is-open .nav__menu-icon--open { display: none; }
.nav.is-open .nav__menu-icon--close { display: block; }
.nav.is-open .nav__menu { background: var(--fg); color: var(--bg); border-left-color: var(--bg); }

/* Scroll progress: a 4px rail riding on the bottom border. */
.nav__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--fg);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  pointer-events: none;
}

@media (max-width: 900px) {
  .nav__brand { flex: 1 1 auto; border-right: 0; }   /* no empty cell between brand and actions */
  .nav__buy { border-left: var(--bd) solid var(--fg); }
  html.is-menu-open { overflow: hidden; }          /* the page doesn't scroll behind the open menu */
  .nav__menu { display: flex; }
  .nav__x { display: none; }
  .nav__links {
    position: fixed; left: 0; right: 0; top: var(--nav-h);
    display: none; flex-direction: column;
    max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
    background: var(--bg); color: var(--fg);
    border-bottom: var(--bd) solid var(--fg);
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a {
    border-left: 0; border-top: var(--bd) solid var(--fg);
    padding: 22px var(--gutter);
    font: 700 32px/1 var(--font-pixel); letter-spacing: -.01em; text-transform: lowercase;
  }
  .nav__links a:first-child { border-top: 0; }
  .nav__links .nav__links-x { display: flex; }
  .nav__idx { font: 400 12px/1 var(--font-mono); letter-spacing: .08em; min-width: 3ch; }
  .nav__links a:focus-visible { outline-offset: -6px; }
}
@media (max-width: 480px) {
  .nav__brand { padding-right: 16px; gap: 10px; }
  .nav__disc { width: 36px; height: 36px; }
  .nav__disc img { height: 22px; }
  .nav__word { font-size: 22px; }
  .nav__buy { padding: 0 14px; font-size: 11px; }
  .nav__menu { padding: 0; }
  .nav__menu-label { display: none; }
}
@media (max-width: 359px) { .nav__word { display: none; } }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;                    /* the cat peeks; the ticker bar "covers" its body */
  /* First screen = hero + the black ticker bar under it (the banner composition). */
  min-height: 600px;
  min-height: max(600px, calc(100vh - var(--ticker-h)));
  min-height: max(600px, calc(100svh - var(--ticker-h)));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 40px) var(--gutter) clamp(72px, 10vh, 120px);
  background: var(--paper);
  text-align: center;
  --cat-w: clamp(260px, max(34vw, 36vh), 520px);
  --render-h: clamp(52px, 12vh, 124px);  /* height of the streamed domain name */
}
/* Wide screens: a bigger cat that shows its chin and eyes well above the bar, like the banner. */
@media (min-width: 1100px) {
  .hero { --cat-w: clamp(300px, max(36vw, 40vh), 640px); }
}
/* Narrower than the CTA row + cat side by side: keep the CTAs above the peeking (and hovering) cat. */
@media (max-width: 900px) {
  .hero { padding-bottom: max(clamp(112px, 15vh, 168px), calc(var(--cat-w) * .6 + 24px)); }
}
.hero__field {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.hero__center {
  position: relative; z-index: 2;
  width: 100%; max-width: 880px;
  display: flex; flex-direction: column; align-items: center;
}

/* One inverted label as the accent; everything else in the hero is unboxed. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 10px 6px;
  background: var(--ink); color: var(--paper);
  letter-spacing: .14em;
}
.eyebrow i { font-style: normal; }

.wordmark {
  margin: 22px 0 24px;
  font: 700 clamp(84px, min(17vw, 29vh), 320px)/.8 var(--font-pixel);
  letter-spacing: -.035em;
  white-space: nowrap;
  font-kerning: none;
}

.hero__tag {
  font: 700 clamp(20px, 2.4vw, 30px)/1.12 var(--font-sans);
  letter-spacing: -.015em;
}
.hero__sub {
  max-width: 46ch;
  margin-top: 12px;
  font: 400 17px/1.5 var(--font-sans);
  text-wrap: balance;
}
/* Short desktop windows: the tag already says it; give the height to the names and the cat. */
@media (min-width: 641px) and (max-height: 860px) { .hero__sub { display: none; } }

/* The streamed domain name: an empty slot in the column; the canvas (full hero width, so the
   streaks can fly in from the side bands) is positioned over it by main.js. Under the cat. */
.hero__render-slot { width: 100%; height: var(--render-h); margin-top: clamp(16px, 3vh, 30px); }
.hero__render {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: var(--render-h);
  pointer-events: none;
}

/* Caption under the name: the real text (screen readers, copy/paste). */
.hero__stream {
  margin-top: 10px;
  font: 400 13px/1.2 var(--font-mono);
  letter-spacing: .02em;
  white-space: nowrap;
}
.hero__stream [data-domain-stream] { font-weight: 700; }
.caret { display: inline-block; margin-left: 2px; animation: caret-blink 1.06s steps(1, end) infinite; }
@keyframes caret-blink { 50% { visibility: hidden; } }

/* 1-bit emoji sprites inline in text (pixel-font.js spriteSVG): one em tall, width from the sprite's
   aspect ratio, so sprites of any grid size sit on the text line. */
.px-emoji-wrap { display: inline; white-space: nowrap; }
.px-emoji {
  display: inline-block;
  height: 1em; width: calc(1em * var(--w, 9) / var(--h, 9));
  vertical-align: -.14em;
  margin: 0 .06em;
}

.hero__cta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: clamp(18px, 3vh, 28px);
}

.hero__meta {
  position: absolute; z-index: 2;
  margin: 0;
  font-size: 11px; letter-spacing: .12em;
}
.hero__meta-sep { padding: 0 4px; }
.hero__meta--tl { top: calc(var(--nav-h) + 22px); left: var(--gutter); }
.hero__meta--tr { top: calc(var(--nav-h) + 22px); right: var(--gutter); }
.hero__meta--bl { bottom: 24px; left: var(--gutter); }
.hero__scroll { display: inline-block; animation: scroll-hop 1.4s steps(1, end) infinite; }
@keyframes scroll-hop { 50% { transform: translateY(3px); } }

/* Cat mount: bottom-right, sitting on the ticker bar. cat.js owns everything inside (canvas,
   peek/startle transforms). The art spans ~16–84% of the square, so a slightly negative right
   puts the head at ~78% of the width like the banner. --cat-peek = fraction hidden at rest. */
.hero__cat {
  position: absolute; z-index: 3;
  right: -1vw;
  bottom: 0;
  width: var(--cat-w);
  aspect-ratio: 1 / 1;
  --cat-peek: .27;                     /* eyes + chin above the bar; the CTAs stay clear even at the startle peak */
}

/* Intro: hide the centre column until fonts are in, then wipe it in, row by row. The animation is
   dropped once it's done (.is-intro-done) so it never fights glitchOnce for `animation`. */
.js body.is-loading .hero__center > *,
.js body.is-loading .hero__meta { visibility: hidden; }
body:not(.is-loading):not(.is-intro-done) .hero__center > :not(.hero__render-slot) {
  animation: px-wipe .5s steps(6, end) backwards;
  animation-delay: calc(var(--i, 0) * 85ms + 60ms);
}
body:not(.is-loading):not(.is-intro-done) .hero__meta { animation: px-wipe .4s steps(4, end) .6s backwards; }

@media (max-width: 640px) {
  .hero {
    --cat-w: min(58vw, 300px);
    --render-h: clamp(40px, 8vh, 64px);
    min-height: calc(100svh - var(--ticker-h));
    justify-content: flex-start;
    padding-top: calc(var(--nav-h) + 28px);
    padding-bottom: calc(var(--cat-w) * .62 + 16px); /* keep CTAs clear of the peeking cat */
  }
  .hero__meta { display: none; }
  .eyebrow { font-size: 11px; letter-spacing: .08em; gap: 6px; }
  .wordmark { margin: 14px 0 12px; }
  .hero__sub { font-size: 16px; margin-top: 10px; }
  .hero__render-slot { margin-top: 14px; }
  .hero__stream { font-size: 12px; margin-top: 8px; }
  .hero__cta { flex-wrap: nowrap; width: 100%; max-width: 400px; margin-top: 18px; gap: 8px; }
  .hero__cta .btn { flex: 1 1 0; min-width: 0; }
  .btn--lg { height: 52px; padding: 0 12px; }
  .hero__cat { width: var(--cat-w); right: -2vw; }
}
/* Small phones: "Claim your name" → "Claim" so both CTAs fit on one row. */
@media (max-width: 420px) {
  .hero__cta .btn--ghost .btn__label:not(.btn__label--short) { display: none; }
  .hero__cta .btn--ghost .btn__label--short { display: inline-block; }
}
@media (max-width: 640px) and (max-height: 760px) { .hero__sub { display: none; } }
/* Landscape phones: one screen, no extras. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: calc(100svh - var(--ticker-h));
    padding: calc(var(--nav-h) + 12px) var(--gutter) 48px;
    --cat-w: min(44vh, 220px);
    --render-h: 40px;
  }
  .hero__meta, .hero__sub { display: none; }
  .wordmark { font-size: clamp(56px, 11vw, 110px); margin: 10px 0 8px; }
  .hero__render-slot { margin-top: 8px; }
  .hero__cta { margin-top: 12px; }
}

/* ---------- 7. Ticker ---------------------------------------------------- */
.ticker {
  position: relative; z-index: 5;
  height: var(--ticker-h);
  display: flex; align-items: center;
  overflow: hidden;
  padding-right: 48px;                 /* room for the pause button */
  background: var(--ink); color: var(--paper);
  font: 400 12px/1 var(--font-mono);
  letter-spacing: .06em;
  white-space: nowrap;
}
.ticker .gt-ticker__name { font: 700 22px/1 var(--font-pixel); letter-spacing: -.01em; margin-right: .35em; }
.ticker .gt-ticker__meta { text-transform: uppercase; }
.ticker .gt-ticker__item { padding: 0 1.4em; }
.ticker .gt-ticker__sep { font-size: 8px; }
/* the cat's scare: the bar flashes inverted for two frames */
.ticker.is-flash { background: var(--paper); color: var(--ink); }
@media (max-width: 640px) {
  :root { --ticker-h: 56px; }
  .ticker .gt-ticker__name { font-size: 19px; }
}

/* ---------- 8. Sections, dither transitions, reveal ---------------------- */
.section { position: relative; padding: clamp(104px, 12vw, 176px) 0 clamp(96px, 11vw, 160px); }

/* White → ink → white: stepped Bayer ramps that sit on the white neighbour. */
.invert.section::before,
.invert.section::after,
.ticker + .section::before,
.footer::before {
  content: "";
  position: absolute; left: 0; right: 0; z-index: 1;
  --c: var(--dither-cell);
  height: calc(var(--c) * 8);
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: var(--c) var(--c);
}
/* 8 Bayer steps of 2px dots: paper → ink reads as a gradient, but every pixel is #000 or #fff. */
.invert.section::before,
.footer::before {
  bottom: 100%;
  background-image: var(--d1), var(--d2), var(--d4), var(--d6), var(--d8), var(--d10), var(--d12), var(--d14);
  background-position: 0 0, 0 var(--c), 0 calc(var(--c) * 2), 0 calc(var(--c) * 3), 0 calc(var(--c) * 4), 0 calc(var(--c) * 5), 0 calc(var(--c) * 6), 0 calc(var(--c) * 7);
}
.invert.section::after,
.ticker + .section::before {
  top: 100%;
  background-image: var(--d14), var(--d12), var(--d10), var(--d8), var(--d6), var(--d4), var(--d2), var(--d1);
  background-position: 0 0, 0 var(--c), 0 calc(var(--c) * 2), 0 calc(var(--c) * 3), 0 calc(var(--c) * 4), 0 calc(var(--c) * 5), 0 calc(var(--c) * 6), 0 calc(var(--c) * 7);
}
/* Ink → paper ramp under the ticker bar, drawn at the top of the first white section. */
.ticker + .section::before { top: 0; }

.section__bar {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding-bottom: 12px;
  border-bottom: var(--bd) solid var(--fg);
}
.section__bar-meta { text-align: right; }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: end;
  gap: 24px 64px;
  margin: 44px 0 56px;
}
@media (max-width: 800px) {
  .section__head { grid-template-columns: minmax(0, 1fr); margin: 32px 0 40px; }
  .section__bar-meta { display: none; }
}

/* Reveal: a stepped top-down wipe (+ 12px drop). Clip is removed once done. */
@keyframes px-wipe {
  from { clip-path: inset(0 0 100% 0); transform: translateY(12px); }
  to   { clip-path: inset(0 0 0 0);    transform: none; }
}
.js [data-reveal]:not(.is-in) { clip-path: inset(0 0 100% 0); }
.js [data-reveal].is-in {
  animation: px-wipe .56s steps(7, end) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* ---------- 9. Vault ----------------------------------------------------- */
.vault { padding-top: clamp(124px, 12vw, 180px); }

.vault__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-flow: row dense;
  border-top: var(--bd) solid var(--ink);
  border-left: var(--bd) solid var(--ink);
}
@media (max-width: 640px) { .vault__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
  --fs: 30cqi;
  position: relative;
  container-type: inline-size;
  min-width: 0;
  min-height: clamp(200px, 18vw, 264px);   /* square-ish cells; rows stretch so every border lines up */
  display: flex; flex-direction: column;
  padding: 14px 16px 14px;
  border-right: var(--bd) solid var(--ink);
  border-bottom: var(--bd) solid var(--ink);
  background: var(--paper); color: var(--ink);
  outline-offset: -8px;
}
.card__top, .card__bot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font: 700 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.card__bot { font-weight: 400; white-space: nowrap; }
.card__kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card__status { flex: none; }
@container (max-width: 180px) {                  /* small cards: the category beats "in vault" */
  .card:not([data-status="soon"]) .card__status { display: none; }
}
.card__k { font-weight: 700; white-space: nowrap; }
.card__body {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; padding: 8px 0;
}
.card__name {
  display: block;
  max-width: 100%;
  font: 700 56px/.9 var(--font-pixel);
  font-size: var(--fs);
  letter-spacing: -.02em;
  white-space: nowrap;
}
/* Emoji names: hand-drawn 1-bit sprites (pixel-font.js) in currentColor, so they invert with the
   card. The box is exactly one text line tall (.9 × --fs), so ".sns" lines up with the text cards. */
.card__name--sprite { display: flex; align-items: center; justify-content: center; height: calc(var(--fs) * .9); }
.card__sprite { display: block; height: calc(var(--fs) * .9); width: auto; max-width: 100%; }
.card__tld { margin-top: 10px; font: 400 13px/1 var(--font-mono); letter-spacing: .06em; }
.card__status::before { content: "■ "; content: "■ " / ""; }
.card[data-status="soon"] .card__status::before { content: "□ "; content: "□ " / ""; }

/* Golden lots: trophies, double-width, inverted, with an inner paper frame
   so neighbouring golden cards never merge into one black slab. */
.card--golden {
  grid-column: span 2;
  background: var(--ink); color: var(--paper);
}
.card--golden::before {
  content: "";
  position: absolute; inset: 6px;
  border: var(--bd) solid var(--paper);
  pointer-events: none;
}
.card--golden > .card__top, .card--golden > .card__body, .card--golden > .card__bot { position: relative; }
.card--golden .card__top, .card--golden .card__bot { padding: 6px 8px; }
.card--golden .card__tier::before { content: "★ "; content: "★ " / ""; }

/* Container-relative name sizing (set per grapheme count in main.js). */
.card[data-len="1"] { --fs: 44cqi; }
.card[data-len="2"] { --fs: 40cqi; }
.card[data-len="3"] { --fs: 33cqi; }
.card[data-len="4"] { --fs: 26cqi; }
.card[data-len="5"] { --fs: 21cqi; }
.card--golden[data-len="1"] { --fs: 30cqi; }
.card--golden[data-len="2"] { --fs: 26cqi; }
.card--golden[data-len="3"] { --fs: 22cqi; }

@media (hover: hover) {
  .card:hover { background: var(--ink); color: var(--paper); }
  .card--golden:hover { background: var(--paper); color: var(--ink); }
  .card--golden:hover::before { border-color: var(--ink); }
  /* a dashed selection box with square handles, like picking a sprite in an editor */
  .card:hover::after {
    content: "";
    position: absolute; inset: 7px; z-index: 1;
    border: var(--bd) dashed currentColor;
    background:
      linear-gradient(currentColor 0 0) 0 0 / 6px 6px no-repeat,
      linear-gradient(currentColor 0 0) 100% 0 / 6px 6px no-repeat,
      linear-gradient(currentColor 0 0) 0 100% / 6px 6px no-repeat,
      linear-gradient(currentColor 0 0) 100% 100% / 6px 6px no-repeat;
    pointer-events: none;
  }
  .card--golden:hover::after { inset: 14px; }
}

/* The "next drop" slot: stretches from wherever it lands to the end of the last row. */
.card--next { grid-column: auto / -1; }
.card--next::before {
  content: "";
  position: absolute; inset: 6px;
  border: var(--bd) dashed currentColor;
  pointer-events: none;
}
.card--next > * { position: relative; }
.card--next .card__top, .card--next .card__bot { padding: 6px 8px; }
.card__next { font: 700 clamp(20px, 2.2vw, 30px)/1.1 var(--font-pixel); text-align: center; text-wrap: balance; }
@media (hover: hover) { .card--next:hover::after { content: none; } }

/* Cards stay hidden until ditherReveal() runs over them. */
.js .card:not(.is-in) > * { visibility: hidden; }

.vault__note {
  margin-top: 20px;
  font: 400 12px/1.5 var(--font-mono); letter-spacing: .04em;
}

/* ---------- 10. How (invert) -------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--bd) solid var(--fg);
  border-bottom: var(--bd) solid var(--fg);
}
.step {
  position: relative;
  padding: 32px 32px 40px;
  border-left: var(--bd) solid var(--fg);
}
.step:first-child { border-left: 0; padding-left: 0; }
.step:last-child { padding-right: 0; }
.step:not(:last-child)::after {               /* arrow node sitting on the divider */
  content: "→"; content: "→" / "";
  position: absolute; z-index: 1; top: 44px; right: -15px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--bg); color: var(--fg);
  border: var(--bd) solid var(--fg);
  font: 700 14px/1 var(--font-mono);
}
.step__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.step__num { font: 700 clamp(80px, 10vw, 148px)/.78 var(--font-pixel); letter-spacing: -.04em; }
.step__icon { width: 56px; margin-top: 6px; color: var(--fg); }
.step__icon svg { width: 100%; height: auto; image-rendering: pixelated; }
.step__title {
  margin: 40px 0 14px;
  font: 700 14px/1 var(--font-mono); letter-spacing: .2em;
}
.step__title::before { content: "/ "; content: "/ " / ""; }
.step__text { max-width: 32ch; font: 400 18px/1.5 var(--font-sans); }

@media (max-width: 800px) {
  .steps { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .step { border-left: 0; padding: 28px 0 36px; border-bottom: var(--bd) solid var(--fg); }
  .step:not(:last-child)::after { content: "↓"; content: "↓" / ""; top: auto; right: auto; left: 0; bottom: -15px; }
  .step__title { margin-top: 28px; }
}

/* ---------- 11. Tiers ---------------------------------------------------- */
.tiers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--bd) solid var(--ink);
  border-left: var(--bd) solid var(--ink);
}
.tier {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 380px;
  border-right: var(--bd) solid var(--ink);
  border-bottom: var(--bd) solid var(--ink);
  background: var(--paper);
}
.tier__dither {
  width: 100%; height: 148px;
  border-bottom: var(--bd) solid var(--ink);
  background: var(--paper);
}
.tier__body { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.tier__idx { font: 700 11px/1 var(--font-mono); letter-spacing: .12em; }
.tier__name { font: 700 clamp(32px, 3vw, 46px)/.92 var(--font-pixel); letter-spacing: -.015em; text-transform: lowercase; }
.tier__desc { font: 400 17px/1.45 var(--font-sans); text-wrap: pretty; }
.tier__mono { font-family: var(--font-mono); font-size: .9em; font-weight: 700; letter-spacing: -.01em; }
.tier__meta {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 12px;
  border-top: var(--bd) solid currentColor;
  font: 700 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
/* GOLDEN COB gets the trophy treatment of the golden vault cards: inverted, ★, inner frame. */
.tier[data-tier="golden"] { background: var(--ink); color: var(--paper); }
.tier[data-tier="golden"]::after {
  content: "";
  position: absolute; inset: 6px; z-index: 1;
  border: var(--bd) solid var(--paper);
  pointer-events: none;
}
.tier[data-tier="golden"] .tier__dither { filter: invert(1); border-bottom-color: var(--paper); }
.tier[data-tier="golden"] .tier__name::before { content: "★ "; content: "★ " / ""; }
@media (hover: hover) {
  .tier:hover { background: var(--ink); color: var(--paper); }
  .tier:hover .tier__dither { filter: invert(1); }
  .tier[data-tier="golden"]:hover { background: var(--paper); color: var(--ink); }
  .tier[data-tier="golden"]:hover::after { border-color: var(--ink); }
  .tier[data-tier="golden"]:hover .tier__dither { filter: none; border-bottom-color: var(--ink); }
}
/* Wide: a staircase — every harvest steps up a level, husk → golden cob. */
@media (min-width: 1081px) {
  .tiers__grid { align-items: end; border: 0; }
  .tier { min-height: calc(360px + var(--i, 0) * 36px); border: var(--bd) solid var(--ink); }
  .tier + .tier { margin-left: calc(var(--bd) * -1); }   /* neighbours share one 2px wall */
}
@media (max-width: 1080px) { .tiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tiers__grid { grid-template-columns: minmax(0, 1fr); }
  .tier { min-height: 0; }
  .tier__dither { height: 112px; }
  .tier__meta { margin-top: 12px; }
}

/* ---------- 12. Claim (invert) ------------------------------------------ */
.claim__form { width: 100%; }
.claim__label { display: block; font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.claim__field {
  display: flex; align-items: stretch;
  margin-top: 14px;
  border: var(--bd) solid var(--fg);
}
.claim__field:focus-within { outline: 2px dashed var(--fg); outline-offset: 6px; }
.claim__input, .claim__suffix { font: 700 clamp(26px, 4.6vw, 60px)/1 var(--font-pixel); letter-spacing: -.01em; }
.claim__input {
  flex: 1 1 auto; min-width: 0;
  padding: 22px 0 22px 20px;
  border: 0; border-radius: 0;
  background: transparent; color: var(--fg);
  caret-color: var(--fg);
  text-align: right;
  -webkit-appearance: none; appearance: none;
}
.claim__input:focus-visible { outline: none; }
.claim__input::placeholder { color: var(--fg); opacity: 1; -webkit-text-stroke: 1px var(--fg); color: transparent; }
.claim__suffix { align-self: center; padding: 0 20px 0 2px; white-space: nowrap; }
.claim__submit { height: auto; border: 0; border-left: var(--bd) solid var(--fg); padding: 0 28px; font-size: 13px; }

/* The name tag: the handle streams in from the sides (domain-render.js), white on ink. */
.claim__render { display: block; width: 100%; height: clamp(36px, 5.6vw, 76px); margin-top: clamp(24px, 3vw, 36px); }
.claim__out {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  margin-top: 18px;
}
.claim__preview { font: 400 clamp(15px, 1.8vw, 20px)/1.3 var(--font-mono); overflow-wrap: anywhere; }
.claim__preview [data-claim-preview] { font-weight: 700; }
.claim__status {
  padding: 8px 12px;
  border: var(--bd) solid var(--fg);
  font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
/* Symbols use CSS alt text (`/ ""`) so the live region doesn't announce "black square …". */
.claim__status::before { content: "○ "; content: "○ " / ""; }
.claim__status[data-state="ok"],
.claim__status[data-state="sent"] { background: var(--fg); color: var(--bg); }
.claim__status[data-state="ok"]::before { content: "■ "; content: "■ " / ""; }
.claim__status[data-state="sent"]::before { content: "▶ "; content: "▶ " / ""; }
.claim__status[data-state="reserved"]::before { content: "◪ "; content: "◪ " / ""; }
.claim__status[data-state="invalid"] { border-style: dashed; }
.claim__status[data-state="invalid"]::before { content: "✕ "; content: "✕ " / ""; }
.claim__hint { margin-top: 16px; font: 400 12px/1.5 var(--font-mono); letter-spacing: .04em; }

@media (max-width: 640px) {
  .claim__field { flex-wrap: wrap; }
  .claim__input { flex: 1 1 0; padding: 18px 0 18px 14px; }
  .claim__input, .claim__suffix { font-size: clamp(22px, 6.6vw, 30px); }
  .claim__suffix { padding-right: 14px; }
  .claim__submit { flex: 1 0 100%; height: 52px; border-left: 0; border-top: var(--bd) solid var(--fg); }
}

/* ---------- 13. Granary -------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--bd) solid var(--ink);
  border-left: var(--bd) solid var(--ink);
}
.stat {
  display: flex; flex-direction: column;
  min-height: 232px;
  padding: 18px 20px 20px;
  border-right: var(--bd) solid var(--ink);
  border-bottom: var(--bd) solid var(--ink);
}
.stat__label { font: 700 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.stat__value {
  margin-top: auto;
  font: 700 clamp(48px, 6vw, 88px)/.86 var(--font-pixel);
  letter-spacing: -.03em;
  white-space: nowrap;
}
/* Not live yet: a ###-mask whose digits scramble every few seconds (main.js), never fake numbers. */
.stat__value.is-soon { font-size: clamp(40px, 5vw, 76px); letter-spacing: .02em; }
.stat__unit {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-top: 14px; padding-top: 10px;
  border-top: var(--bd) solid var(--ink);
  font: 400 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.stat__live {
  padding: 3px 5px 2px;
  border: 1px dashed currentColor;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  white-space: nowrap;
}
.stat:nth-child(2) { background: var(--ink); color: var(--paper); }
.stat:nth-child(2) .stat__unit { border-top-color: var(--paper); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { min-height: 180px; } }
@media (max-width: 380px) { .stat { padding: 14px; } .stat__value { font-size: 44px; } .stat__value.is-soon { font-size: 34px; } }
@media (max-width: 480px) { .stat__unit { flex-direction: column; align-items: flex-start; } }

/* ---------- 14. Footer (invert) ----------------------------------------- */
.footer {
  --mark: min(25vw, 380px);
  --stage-pad: clamp(56px, 8vw, 128px);
  position: relative;
  padding: var(--stage-pad) 0 28px;
}
/* White side bands on ink framing the big wordmark, like the hero (protected under the letters). */
.footer__field {
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%; height: calc(var(--mark) * .78 + var(--stage-pad) * 2);
}
.footer .wrap { position: relative; z-index: 1; }
/* The wordmark in the banner's scanline texture: 2px paper lines, 2px gaps. Solid on hover. */
.footer__mark {
  margin: 0 0 var(--stage-pad);
  font: 700 var(--mark)/.78 var(--font-pixel);
  letter-spacing: -.04em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h4v2H0z'/%3E%3C/svg%3E") 0 0 / 4px 4px repeat;
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}
@media (hover: hover) { .footer__mark:hover { color: var(--paper); } }
.footer__row {
  position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 0;
  border-top: var(--bd) solid var(--fg);
}
/* The second cat peeks over the footer rule: a black cat in the dark — outline and eyes only. */
.footer__cat {
  position: absolute; z-index: 2;
  right: clamp(4px, 8vw, 140px); bottom: 100%;
  width: clamp(132px, 15vw, 210px);
  aspect-ratio: 1 / 1;
  --cat-peek: .4;
}
.footer__links { display: flex; flex-wrap: wrap; }
.footer__links a, .footer__top {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; min-width: 44px; padding: 0 14px;
  border: var(--bd) solid var(--fg);
  font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}
.footer__links a + a { margin-left: calc(var(--bd) * -1); }
@media (hover: hover) { .footer__links a:hover, .footer__top:hover { background: var(--fg); color: var(--bg); } }
.footer__base {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px; flex-wrap: wrap;
  padding-top: 18px;
  border-top: var(--bd) solid var(--fg);
  font: 400 12px/1.5 var(--font-mono); letter-spacing: .04em;
}
.footer__disclaimer { max-width: 62ch; }

/* ---------- 15. Pixel icons (built in main.js from ASCII art) ----------- */
.px-icon { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }

/* ---------- 16. Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .caret, .hero__scroll,
  .btn__label, .nav__word,
  body:not(.is-loading) .hero__center > *,
  body:not(.is-loading) .hero__meta,
  .btn:hover, .btn.is-soon,
  .js [data-reveal].is-in { animation: none !important; }
  .js [data-reveal]:not(.is-in) { clip-path: none; }
  .btn:active, .btn:hover .btn__arrow { transform: none; }
}