/* ==========================================================================
   KARDLY — visual system
   --------------------------------------------------------------------------
   The logo is a pixel K on a hairline grid. Everything here follows from that:
   a visible grid, hairline rules, zero radii, dithered fills, and registration
   marks on the panels that matter.

   Two typefaces, strictly divided — the pixel face for marks and labels only,
   monospace for everything else, because an order book is read in monospace.

   Colour is one set of tokens, and there is only ever one palette: black,
   white and dark gray. Sections separate by rule and surface, never by hue.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */

:root{
  --ink:#ffffff;
  --ink-2:#d2d2d2;   /* body copy */
  --ink-3:#a2a2a2;   /* labels and metadata */
  --ink-4:#767676;   /* recessed, struck through, fine print */
  --paper:#050505;
  --paper-2:#0d0d0d;

  --rule:#2a2a2a;
  --rule-2:#3d3d3d;
  --rule-3:#585858;

  --dither:rgba(255,255,255,.055);
  --wash:rgba(255,255,255,.03);

  --pixel:'Press Start 2P',monospace;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:clamp(42px,8.2vw,148px);
  --t-h2:clamp(28px,4.6vw,78px);
  --t-h3:clamp(16px,1.4vw,21px);
  --t-body:clamp(14px,1.02vw,17px);
  --t-small:13px;
  --t-label:10px;

  --gap:clamp(14px,1.6vw,26px);
  --pad:clamp(18px,3.6vw,58px);
  --band:clamp(64px,8.5vh,132px);
  --measure:66ch;

  --shell:1720px;
  --nav-h:62px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:150ms;
  --mid:280ms;
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

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

html{background:#050505;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:#050505;
  color:var(--ink);
  font-family:var(--mono);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
}

/* Leaving a page fades out; arriving is handled by the reveal system, which is
   already driving every element. Nothing globally hides the page, so a stalled
   animation can never leave a viewer staring at a blank screen. */
html.is-leaving body{opacity:0;transition:opacity 170ms linear}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}

::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#242424;border:2px solid #000}
::-webkit-scrollbar-thumb:hover{background:#3d3d3d}

/* --------------------------------------------------------------------------
   TEXTURE — dither is the pixel-art way to make a tone. Used for fills that
   would otherwise be flat black.
   -------------------------------------------------------------------------- */

.dither{
  background-image:
    linear-gradient(45deg,var(--dither) 25%,transparent 25%,transparent 75%,var(--dither) 75%),
    linear-gradient(45deg,var(--dither) 25%,transparent 25%,transparent 75%,var(--dither) 75%);
  background-size:4px 4px;
  background-position:0 0,2px 2px;
}

/* registration marks: four pixels pinning a panel to the grid */
.marks{position:relative}
.marks::after{
  content:'';
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background-image:
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-size:4px 4px;
  background-position:0 0,100% 0,0 100%,100% 100%;
  background-repeat:no-repeat;
}

/* --------------------------------------------------------------------------
   BACKGROUND — the hairline grid the logo sits on. Scroll-reactive only.
   -------------------------------------------------------------------------- */

.field{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  transform-origin:50% 42%;
  will-change:transform;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:104px 104px,104px 104px,13px 13px,13px 13px;
}

.field::after{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 38%,transparent 30%,rgba(5,5,5,.8) 74%,#050505 100%),
    linear-gradient(to bottom,#050505 0,transparent 11%,transparent 89%,#050505 100%);
}

/* --------------------------------------------------------------------------
   SHELL / GRID
   -------------------------------------------------------------------------- */

.site{position:relative;z-index:1}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}

.full{grid-column:1 / -1}

.band{padding-block:var(--band)}
.band--set{background:var(--paper-2);border-block:1px solid var(--rule)}
.band--half{padding-block:calc(var(--band) * .6)}

.mt-s{margin-top:clamp(14px,2vh,24px)}
.mt{margin-top:clamp(26px,4vh,52px)}
.mb{margin-bottom:clamp(20px,3vh,38px)}
.pb-band{padding-bottom:var(--band)}

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */

.display{
  font-size:var(--t-display);
  font-weight:500;
  line-height:.9;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.display span{display:block}
.display--page{font-size:clamp(36px,6.4vw,104px)}

.h2{font-size:var(--t-h2);font-weight:500;line-height:.98;letter-spacing:-.04em;text-transform:uppercase}
.h3{font-size:var(--t-h3);font-weight:500;line-height:1.25;letter-spacing:-.01em;text-transform:uppercase}

.body{color:var(--ink-2);font-size:var(--t-body);line-height:1.75;max-width:var(--measure)}
.body,.doc p,.doc li{font-weight:400}
.small{font-size:var(--t-small);color:var(--ink-3);line-height:1.7}

.label{
  font-family:var(--pixel);
  font-size:var(--t-label);
  line-height:1.6;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.label--ink{color:var(--ink)}

.index{font-family:var(--pixel);font-size:var(--t-label);letter-spacing:.14em;color:var(--ink-3)}

.recede{color:var(--ink-4)}
.quiet{color:var(--ink-3)}

/* a ruled label that sits on a full-width hairline */
.strip{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}
.strip::after{content:'';flex:1 1 auto}

/* --------------------------------------------------------------------------
   ACTIONS — one ruled link plus the nav link. No boxed CTAs.
   -------------------------------------------------------------------------- */

.link{
  display:inline-flex;
  align-items:baseline;
  gap:.7em;
  font-size:var(--t-small);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  padding-block:10px;
  border-bottom:1px solid var(--rule-3);
  transition:border-color var(--fast) linear,color var(--fast) linear;
}
.link span{transition:transform var(--mid) var(--ease)}
.link:hover{border-color:var(--ink)}
.link:hover span{transform:translateX(5px)}

.link--quiet{color:var(--ink-3);border-color:var(--rule)}
.link--quiet:hover{color:var(--ink);border-color:var(--rule-3)}

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

.nav{
  position:fixed;
  inset:0 0 auto;
  height:var(--nav-h);
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-inline:var(--pad);
  background:rgba(5,5,5,.6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--mid) linear,background var(--mid) linear;
}
.nav.is-scrolled{border-bottom-color:#1b1b1b;background:rgba(5,5,5,.86)}

.nav__mark{display:flex;align-items:center;gap:10px}
.nav__mark img{width:24px;height:24px;image-rendering:pixelated}
.nav__mark span{font-family:var(--pixel);font-size:12px;letter-spacing:.08em;line-height:1}

.nav__set{display:flex;align-items:center;gap:clamp(14px,2.2vw,38px)}

.nav__link{
  position:relative;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a2a2a2;
  padding-block:6px;
  transition:color var(--fast) linear;
}
.nav__link::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--mid) var(--ease);
}
.nav__link:hover{color:#fff}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:#fff}
.nav__tight{display:none}

/* contract address chip */
.ca{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  /* never transform the case: an address is case-significant */
  color:var(--ink-2);
  background:transparent;
  border:1px solid var(--rule-2);
  padding:8px 12px;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color var(--fast) linear,color var(--fast) linear,background var(--fast) linear;
}
.ca:hover{border-color:var(--ink);color:var(--ink)}
.ca:active{transform:translateY(1px)}
.ca.is-copied{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* --------------------------------------------------------------------------
   WALLET
   -------------------------------------------------------------------------- */

.wallet{position:relative;display:inline-flex;flex:0 0 auto}

.wallet__btn{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--rule-3);
  padding:8px 13px;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color var(--fast) linear,background var(--fast) linear,color var(--fast) linear;
}
/* an address is case-significant — never let the label transform it */
.wallet__btn--addr{text-transform:none;letter-spacing:.08em}
.wallet__btn:hover{border-color:var(--ink)}
.wallet__btn.is-wrong{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.wallet__btn[disabled]{opacity:.45;cursor:default}

.wallet__menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:70;
  min-width:262px;
  max-width:calc(100vw - var(--pad) * 2);
  background:var(--paper-2);
  border:1px solid var(--rule-2);
  padding:4px;
  text-align:left;
}

.wallet__head{font-family:var(--pixel);font-size:9px;letter-spacing:.14em;color:var(--ink-3);padding:11px 11px 7px}
.wallet__addr{font-size:11px;line-height:1.55;color:var(--ink);word-break:break-all;padding:0 11px 7px}
.wallet__net{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:0 11px 11px;
  border-bottom:1px solid var(--rule);
}

.wallet__item{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  color:var(--ink-2);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.05em;
  padding:11px;
  cursor:pointer;
  transition:background var(--fast) linear,color var(--fast) linear;
}
.wallet__item:hover{background:var(--wash);color:var(--ink)}
.wallet__item--end{border-top:1px solid var(--rule);margin-top:4px;color:var(--ink-3)}
.wallet__item--primary{background:var(--ink);color:var(--paper)}
.wallet__item--primary:hover{background:var(--ink);color:var(--paper);opacity:.86}

.wallet__menu--status .wallet__note{border-top:0}
.wallet__note{font-size:11px;line-height:1.55;padding:10px 11px;color:var(--ink-3);border-top:1px solid var(--rule)}
.wallet__note.is-ok{color:var(--ink)}
.wallet__note.is-warn{color:var(--ink-2)}

/* --------------------------------------------------------------------------
   CARD — a pixel collectible at real card proportions
   -------------------------------------------------------------------------- */

.card{
  position:relative;
  aspect-ratio:5/7;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  gap:9px;
  padding:9px;
  background:var(--paper);
  border:1px solid var(--rule-2);
  transition:border-color var(--mid) linear;
}

.card__art{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--rule);
  background-color:var(--paper-2);
  background-image:
    linear-gradient(45deg,var(--dither) 25%,transparent 25%,transparent 75%,var(--dither) 75%),
    linear-gradient(45deg,var(--dither) 25%,transparent 25%,transparent 75%,var(--dither) 75%);
  background-size:4px 4px;
  background-position:0 0,2px 2px;
}

.card__foot{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:3px 8px;min-width:0}
.card__name{font-family:var(--pixel);font-size:8px;letter-spacing:.02em;line-height:1.4;min-width:0}
.card__meta{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}

/* Sprites come in different grid sizes (characters are drawn at 24, objects at
   16). Sizing from the grid keeps one pixel pitch per context, so a detailed
   character simply fills more of the frame instead of looking finer-grained. */
.sprite{width:min(calc(var(--g,16) * var(--pitch,3.4%)),94%);height:auto;fill:var(--ink);shape-rendering:crispEdges}
.card__art{--pitch:3.4%}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

/* the first screen: type top-left, cards right, the belt pinned to the base */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
}

.hero__inner{
  display:flex;
  align-items:center;
  padding-block:calc(var(--nav-h) + 5vh) 5vh;
}

.hero__grid{width:100%;row-gap:clamp(18px,3vh,40px);align-items:start}
.hero__label{grid-column:1 / -1;grid-row:1}
.hero__display{grid-column:1 / span 8;grid-row:2}
.hero__say{grid-column:1 / span 5;grid-row:3}
.hero__fan{grid-column:9 / span 4;grid-row:2 / span 3;align-self:center}

.spec{
  grid-column:1 / span 8;
  grid-row:4;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
  border-top:1px solid var(--rule);
  padding-top:16px;
}
.spec li{
  display:flex;
  align-items:baseline;
  gap:11px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
}

/* three cards, fanned, each on its own depth plane */
.fan{position:relative;aspect-ratio:1/.82}
.fan__slot{position:absolute;width:48%}
.fan__slot > .card{border-color:var(--rule-3);box-shadow:0 0 0 5px var(--paper)}
.fan__slot--a{left:0;top:9%}
.fan__slot--a > .card{transform:rotate(-8deg)}
.fan__slot--b{left:26%;top:0;z-index:3}
.fan__slot--c{left:52%;top:9%;z-index:2}
.fan__slot--c > .card{transform:rotate(8deg)}

/* --------------------------------------------------------------------------
   RAIL — a full-bleed belt of collectibles. The site's subject as texture.
   -------------------------------------------------------------------------- */

.rail{
  position:relative;
  overflow:hidden;
  border-block:1px solid var(--rule);
  background:var(--wash);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}

.rail__belt{display:flex;width:max-content;animation:belt 62s linear infinite}
.rail__track{display:flex;flex:0 0 auto}
@keyframes belt{to{transform:translateX(-50%)}}
.rail:hover .rail__belt{animation-play-state:paused}

.rail__cell{
  width:clamp(70px,7vw,104px);
  flex:0 0 auto;
  padding:13px clamp(7px,.7vw,12px);
  display:grid;
  place-items:center;
  border-right:1px solid var(--rule);
}

.rail__cell .tile{width:100%}

/* --------------------------------------------------------------------------
   WALL — a collection, read as one dense block
   -------------------------------------------------------------------------- */

.wall{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(78px,1fr));
  grid-template-rows:auto auto;
  grid-auto-rows:0;             /* anything past two rows is clipped away */
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  overflow:hidden;
}

.tile{
  position:relative;
  aspect-ratio:5/7;
  display:grid;
  place-items:center;
  background-color:var(--paper);
  background-image:
    linear-gradient(45deg,var(--dither) 25%,transparent 25%,transparent 75%,var(--dither) 75%),
    linear-gradient(45deg,var(--dither) 25%,transparent 25%,transparent 75%,var(--dither) 75%);
  background-size:4px 4px;
  background-position:0 0,2px 2px;
  transition:background-color var(--fast) linear;
}
.tile{--pitch:2.7%}
.tile .sprite{fill:var(--ink-2);transition:fill var(--fast) linear,transform var(--mid) var(--ease)}
.tile:hover{background-color:var(--ink)}
.tile:hover .sprite{fill:var(--paper);transform:scale(1.14)}

/* --------------------------------------------------------------------------
   BOOK
   -------------------------------------------------------------------------- */

.book{border:1px solid var(--rule-2);background:var(--paper-2)}

.book__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:15px var(--gap);
  border-bottom:1px solid var(--rule-2);
  background:var(--wash);
}
.book__id{font-size:12px;letter-spacing:.16em;text-transform:uppercase}

.book__body{display:grid;grid-template-columns:minmax(0,44px) minmax(0,290px) minmax(0,1fr)}

/* the spine: a rotated label running down the side of the panel */
.book__spine{
  border-right:1px solid var(--rule-2);
  display:grid;
  place-items:center;
  background:var(--wash);
}
.book__spine span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--pixel);
  font-size:9px;
  letter-spacing:.3em;
  color:var(--ink-4);
  white-space:nowrap;
}

.book__ask{padding:var(--gap);border-right:1px solid var(--rule-2);display:grid;gap:14px;align-content:start}
/* bid rows slide in from the right; clip that transform here so it can
   never extend the page's scrollable width */
.book__rows{display:flex;flex-direction:column;overflow-x:clip}

.bid{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(12px,1.5vw,24px);
  padding:clamp(12px,1.4vw,18px) var(--gap);
  border-bottom:1px solid var(--rule);
  transition:background var(--mid) linear;
}
.bid:last-child{border-bottom:0}
.bid:hover{background:var(--wash)}

.bid__cards{display:flex;align-items:center;gap:7px}

.chip{
  width:36px;
  aspect-ratio:5/7;
  display:grid;
  place-items:center;
  background:var(--paper);
  border:1px solid var(--rule-2);
  transition:transform var(--mid) var(--ease),border-color var(--mid) linear;
}
.chip{--pitch:3.1%}
.bid:hover .chip{border-color:var(--rule-3);transform:translateY(-3px)}
.bid:hover .chip:nth-child(2){transition-delay:40ms}
.bid:hover .chip:nth-child(3){transition-delay:80ms}

.bid__plus{font-size:12px;color:var(--ink-4)}
.bid__what{font-size:var(--t-small);color:var(--ink-2)}
.bid__what b{color:var(--ink);font-weight:500}
.bid__kind{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;text-align:right}

.caption{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:14px}

/* --------------------------------------------------------------------------
   ROUTE — the two ways between one card and another
   -------------------------------------------------------------------------- */

.path{display:grid;gap:12px clamp(16px,2vw,34px);align-items:center;grid-template-columns:minmax(0,120px) minmax(0,1fr)}
.path__label{font-family:var(--pixel);font-size:var(--t-label);letter-spacing:.14em;color:var(--ink-4);white-space:nowrap}
.path--live .path__label{color:var(--ink)}
.path__steps{display:flex;align-items:center;gap:clamp(8px,1.2vw,18px);flex-wrap:wrap;max-width:720px}

.stop{
  font-size:clamp(11px,1vw,14px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-bottom:8px;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.dash{width:clamp(12px,2.4vw,44px);height:1px;background:var(--rule-2);flex:0 0 auto}

/* the payoff: two real cards and the rule between them */
/* Capped: left to stretch, the rule pushed the two cards to opposite edges of a
   1720px shell and left a corridor of dead space between them. */
.swapline{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);max-width:720px}
.swapline__card{width:clamp(118px,11vw,164px);flex:0 0 auto}
.swapline__link{flex:1 1 auto;height:1px;background:var(--ink);position:relative;min-width:40px}
.swapline__link::before,.swapline__link::after{
  content:'';position:absolute;top:-3px;width:7px;height:7px;background:var(--ink);
}
.swapline__link::before{left:0}
.swapline__link::after{right:0}
/* --------------------------------------------------------------------------
   CHAIN — live network readout and the bid composer
   -------------------------------------------------------------------------- */

.net{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.net > div{background:var(--paper);padding:16px 18px}
.net dt{font-family:var(--pixel);font-size:9px;letter-spacing:.14em;color:var(--ink-3);margin-bottom:9px}
.net dd{margin:0;font-size:14px;color:var(--ink);letter-spacing:.02em;word-break:break-word}
.net__err{margin-top:12px;font-size:12px;color:var(--ink-2);letter-spacing:.02em}

.compose{border:1px solid var(--rule-2);background:var(--paper-2);padding:clamp(20px,2.4vw,32px)}
.compose__lead{color:var(--ink-3);font-size:var(--t-small);margin-top:10px}

.picks{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  gap:1px;
  margin:clamp(16px,2vw,24px) 0;
}
.pick{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--paper);
  border:0;
  padding:12px 14px;
  cursor:pointer;
  color:var(--ink-2);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
  line-height:1.4;
  text-align:left;
  min-height:58px;
  transition:background var(--fast) linear,color var(--fast) linear;
}
.pick{box-shadow:0 0 0 1px var(--rule)}
.pick .sprite{width:26px;flex:0 0 auto;fill:var(--ink-2)}
.pick:hover{background:var(--wash);color:var(--ink)}
.pick.is-on{background:var(--ink);color:var(--paper)}
.pick.is-on .sprite{fill:var(--paper)}

.compose__count{font-size:12px;letter-spacing:.02em;color:var(--ink-3);margin-bottom:clamp(14px,1.8vw,20px)}
.compose__row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.compose__field{display:flex;flex-direction:column;gap:9px;flex:0 1 380px;min-width:240px}
.compose__field > span:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

.units{display:inline-flex;border:1px solid var(--rule-2)}
.unit{
  background:transparent;border:0;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  padding:5px 9px;color:var(--ink-3);
  transition:background var(--fast) linear,color var(--fast) linear;
}
.unit:hover{color:var(--ink)}
.unit.is-on{background:var(--ink);color:var(--paper)}

.conv{font-size:12px;letter-spacing:.02em;color:var(--ink-2);text-transform:none;min-height:1.2em}
.compose__field input{
  background:var(--paper);
  border:1px solid var(--rule-2);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  padding:12px 13px;
}
.compose__field input:focus{outline:none;border-color:var(--ink)}

.compose__go{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  padding:13px 20px;
  cursor:pointer;
  transition:background var(--fast) linear,color var(--fast) linear;
}
.compose__go:hover:not([disabled]){background:var(--ink);color:var(--paper)}
.compose__go[disabled]{border-color:var(--rule-2);color:var(--ink-3);cursor:not-allowed}

.compose__gate{margin-top:14px;font-size:13px;color:var(--ink-2);letter-spacing:.02em}
.compose__note{margin-top:12px;font-size:12px;color:var(--ink-3)}
.compose__note.is-ok{color:var(--ink)}
.compose__note.is-warn{color:var(--ink-2)}
.compose__small{
  margin-top:clamp(16px,2vw,22px);
  padding-top:14px;
  border-top:1px solid var(--rule);
  font-size:12px;
  line-height:1.75;
  color:var(--ink-3);
  max-width:78ch;
}

.signed{margin-top:clamp(16px,2vw,22px);padding-top:16px;border-top:1px solid var(--rule)}
.signed__row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:9px 0;
  border-bottom:1px solid var(--rule);
  font-size:12px;
}
.signed__what{color:var(--ink-2)}
.signed__sig{color:var(--ink-4);font-family:var(--mono);font-size:11px}
.signed__clear{
  margin-top:12px;background:transparent;border:0;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
}
.signed__clear:hover{color:var(--ink)}

@media (max-width:820px){
  .net{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .net{grid-template-columns:1fr}
  .compose__go{width:100%}
}

/* --------------------------------------------------------------------------
   DOCS
   -------------------------------------------------------------------------- */

.docs{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(30px,5vw,96px);align-items:start}

.toc{position:sticky;top:calc(var(--nav-h) + 40px)}
.toc ol{border-left:1px solid var(--rule);margin-top:16px}
.toc a{
  display:block;
  padding:8px 0 8px 16px;
  margin-left:-1px;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink-3);
  border-left:1px solid transparent;
  transition:color var(--fast) linear,border-color var(--fast) linear;
}
.toc a:hover{color:var(--ink-2)}
.toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--ink)}

.doc{padding-bottom:clamp(44px,6vh,80px);scroll-margin-top:calc(var(--nav-h) + 40px)}
.doc > h2{padding-bottom:16px;border-bottom:1px solid var(--rule-2);margin-bottom:26px}
.doc h3{font-family:var(--pixel);font-size:11px;letter-spacing:.14em;color:var(--ink-3);margin:34px 0 14px;font-weight:400}
.doc p{color:var(--ink-2);margin-bottom:16px;max-width:var(--measure)}
.doc p b,.doc li b{color:var(--ink);font-weight:500}
.doc ul{max-width:var(--measure);margin-bottom:18px}
.doc li{color:var(--ink-2);padding:7px 0 7px 22px;position:relative}
.doc li::before{content:'';position:absolute;left:0;top:calc(.85em + 5px);width:6px;height:6px;background:var(--rule-3)}

.aside{border-left:1px solid var(--rule-3);padding:4px 0 4px 22px;margin-bottom:44px;max-width:var(--measure)}
.aside p{color:var(--ink-3);font-size:var(--t-small)}

.terms{border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,56px)}
.terms > div{
  display:grid;
  grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:var(--gap);
  padding:18px 0;
  border-bottom:1px solid var(--rule);
}
.terms dt{font-family:var(--pixel);font-size:10px;letter-spacing:.06em;line-height:1.6}
.terms dd{color:var(--ink-2);font-size:var(--t-small)}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.foot{position:relative;z-index:1;overflow:hidden;border-top:1px solid var(--rule);padding-block:clamp(36px,5vh,62px) clamp(26px,4vh,42px)}
.foot__ghost{
  position:absolute;
  right:calc(var(--pad) * -1);
  bottom:-38%;
  width:min(26vw,300px);
  pointer-events:none;
}
.foot__ghost svg{width:100%;height:auto;fill:#101010;shape-rendering:crispEdges}
.foot .shell{position:relative;z-index:1}
.foot__row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.foot__mark{display:flex;align-items:center;gap:12px}
.foot__mark img{width:28px;height:28px;image-rendering:pixelated}
.foot__mark span{font-family:var(--pixel);font-size:11px;letter-spacing:.06em}
.foot__set{display:flex;gap:clamp(18px,2.6vw,42px);flex-wrap:wrap}
.foot__set a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:color var(--fast) linear}
.foot__set a:hover{color:var(--ink)}

/* --------------------------------------------------------------------------
   MOTION — JS writes opacity/transform each frame while the scroll position
   is changing; CSS only sets the pre-paint state.
   -------------------------------------------------------------------------- */

[data-reveal]{opacity:0}
[data-depth]{will-change:transform}

html.no-motion [data-reveal]{opacity:1 !important;transform:none !important;filter:none !important}
html.no-motion [data-depth]{transform:none !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important;filter:none !important}
  [data-depth]{transform:none !important}
  .rail__belt{animation:none}
}

/* --------------------------------------------------------------------------
   PAGE-LEVEL COMPOSITION
   -------------------------------------------------------------------------- */

.flip__old{grid-column:1 / span 5}
.flip__new{grid-column:7 / span 6;border-left:1px solid var(--rule);padding-left:clamp(18px,2.2vw,40px)}
.flip__q{
  font-size:clamp(19px,2.7vw,42px);
  color:var(--ink-3);
  text-decoration:line-through;
  text-decoration-thickness:1px;
  line-height:1.2;
  letter-spacing:-.02em;
  margin-top:14px;
}

.close__line{grid-column:1 / span 8}
.close__note{grid-column:10 / span 3;align-self:end}

.phead{padding-block:calc(var(--nav-h) + 12vh) clamp(34px,5vh,64px)}
.phead__title{grid-column:1 / span 8}
.phead__note{grid-column:9 / span 4;align-self:end}

.anat{grid-column:span 4;padding-top:20px;border-top:1px solid var(--rule-2)}
.anat h2{margin:12px 0 10px}
.anat p{color:var(--ink-3);font-size:var(--t-small)}

/* --------------------------------------------------------------------------
   RESPONSIVE — recomposed, not shrunk
   -------------------------------------------------------------------------- */

@media (max-width:1240px){
  .hero__display{grid-column:1 / span 9}
  .hero__say{grid-column:1 / span 6}
  .hero__fan{grid-column:9 / span 4}
  .book__body{grid-template-columns:minmax(0,40px) minmax(0,240px) minmax(0,1fr)}
}

@media (max-width:940px){
  :root{--nav-h:56px}
  .hero{min-height:auto}
  .hero__inner{padding-block:calc(var(--nav-h) + 8vh) 7vh}
  .flip__new{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:clamp(20px,3vh,34px)}
  .hero__display,.hero__say,.hero__fan,.spec,
  .flip__old,.flip__new,.close__line,.close__note,
  .phead__title,.phead__note{grid-column:1 / -1}
  .hero__fan{grid-row:auto;margin-top:clamp(28px,4vh,54px);max-width:480px}
  .spec{grid-row:auto;margin-top:clamp(24px,4vh,44px)}
  .close__note,.phead__note{margin-top:24px}
  .docs{grid-template-columns:1fr;gap:32px}
  .toc{position:static}
  .toc ol{display:flex;flex-wrap:wrap;gap:0 22px;border-left:0;border-top:1px solid var(--rule);padding-top:6px}
  .toc a{padding:8px 0;border-left:0}
  .toc a[aria-current="true"]{border-left:0}
  .book__body{grid-template-columns:36px minmax(0,1fr)}
  .book__ask{border-right:0;border-bottom:1px solid var(--rule-2);grid-template-columns:140px minmax(0,1fr);align-items:center}
  .book__rows{grid-column:2}
  .path{grid-template-columns:1fr}
  .anat{grid-column:1 / -1}
  .terms{grid-template-columns:1fr}
  .terms > div{grid-template-columns:1fr;gap:8px}
}

@media (max-width:620px){
  .nav__mark span{display:none}
  .nav__wide{display:none}
  .nav__tight{display:inline}
  .nav__link{font-size:10px;letter-spacing:.12em}
  .nav__set{gap:12px}
  .wallet__btn{font-size:10px;padding:7px 10px;letter-spacing:.1em}
  .ca{font-size:10px;padding:7px 9px;letter-spacing:.06em}
  .spec{grid-template-columns:1fr;gap:10px}
  .bid{grid-template-columns:1fr;gap:12px}
  .bid__kind{text-align:left}
  .book__ask{grid-template-columns:1fr;max-width:200px}
  .swapline{flex-wrap:wrap;gap:16px}
  .swapline__link{min-width:100%;order:3}
  .wall{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
}