/* PHALANX shell — one page frame, one atmosphere, tokens, rule classes. Route bodies add NO border/outline, max-width, side padding or page background. */
:root{
  --u:calc(100vw / 1920);                 /* 1 design px at the 1920 build width */
  --paper:#D71B43; --paper-nav:#DB304B; --paper-s2:#DC2548;
  --ink:#090909; --cream:#FFF7E7; --cream-2:#F5F1D8;
  --signal:#83E07E; --signal-lt:#97F59A; --leader:#EEE667; --chain-mint:#97FCE4; --locked:#C9C6C0; --loss:#FA1949;
  --f-display:"Anton SC",Impact,"Arial Narrow",sans-serif;
  --f-body:"Atkinson Hyperlegible Next",Arial,sans-serif;
  --f-num:"Cabin Condensed","Arial Narrow",Arial,sans-serif;
  --f-label:Roboto,Arial,sans-serif;
  /* frame (USER_FIXES: 36 left / 34 right at 1920) */
  --gutter-l:calc(36 * var(--u)); --gutter-r:calc(34 * var(--u));
  /* type (never below 12px) */
  --fs-body:max(12px, calc(16 * var(--u))); --fs-nav:max(12px, calc(15 * var(--u))); --fs-label:max(12px, calc(14 * var(--u)));
  --fs-cell:max(12px, calc(14 * var(--u))); --fs-panel:max(16px, calc(24 * var(--u))); --fs-h2:max(24px, calc(40 * var(--u)));
  --fs-h1:max(36px, calc(64 * var(--u))); --fs-hero:max(40px, calc(72 * var(--u)));
  /* rule tokens: width per rule kind, hairlines never vanish */
  --rule-w:max(1px, calc(3 * var(--u)));        /* primary 3px ink */
  --rule-w-inner:max(1px, calc(2 * var(--u)));  /* inner dividers, chips, inputs */
  --rule-w-heavy:max(2px, calc(4 * var(--u)));  /* nav underline, big module frames, chip stack */
  --rule-c:var(--ink);
  --shadow:calc(4 * var(--u));
  --hard:var(--shadow) var(--shadow) 0 var(--ink);
  /* motion character: hard, mechanical, brick-laying */
  --ease-snap:cubic-bezier(.2,0,0,1); --t-fast:120ms; --t-mid:220ms; --t-brick:280ms;
}
@media (max-width:1023px){:root{--u:.5px;--gutter-l:14px;--gutter-r:14px;--fs-body:15px;--fs-hero:40px;--fs-h1:36px;--fs-h2:26px;--fs-panel:20px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;min-height:100vh;color:var(--ink);font:400 var(--fs-body)/1.35 var(--f-body);overflow-x:hidden;
  background-color:var(--paper);
  /* PAGE ATMOSPHERE (DESIGN §3b): print grain over stepped ground, shared by every route */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='.07'/></svg>"),
    linear-gradient(180deg,var(--paper) 0,var(--paper) calc(1040 * var(--u)),var(--paper-s2) calc(1120 * var(--u)),var(--paper-s2) 100%);
  background-repeat:repeat,no-repeat}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
:where(button,input,select,textarea){border:0;border-radius:0;background:none}
:where(button){cursor:pointer}
:focus-visible{outline:max(2px,calc(3 * var(--u))) solid var(--ink);outline-offset:max(2px,calc(2 * var(--u)))}

/* ---- rule classes: ONE per framed component (DESIGN §4b). Routes use these, never ad-hoc borders. ---- */
.rule-nav{border-bottom:var(--rule-w-heavy) solid var(--rule-c)}
.rule-wallet-btn,.rule-card,.rule-chip,.rule-panel,.rule-panel-wide,.rule-modal,.rule-tab-strip{border:var(--rule-w) solid var(--rule-c)}
.rule-wallet-btn,.rule-card,.rule-chip,.rule-panel,.rule-panel-wide,.rule-modal,.rule-tab-strip{box-shadow:var(--hard)}
.rule-chip{border-width:var(--rule-w-inner)}
.rule-panel-wide,.rule-modal{border-width:var(--rule-w-heavy)}
.rule-input{border:var(--rule-w-inner) solid var(--rule-c);box-shadow:none}
.rule-row{border:var(--rule-w) solid var(--rule-c)}
.rule-row + .rule-row{border-top:0}                 /* shared edge drawn once */
.rule-tablecell{border:var(--rule-w-inner) solid var(--rule-c)}
.rule-tablecell + .rule-tablecell{border-left:0}
.rule-chip-stack{border:var(--rule-w-heavy) solid var(--rule-c)}
.rule-qhairline{border:var(--rule-w) solid var(--rule-c)}
.rule-qhairline + .rule-qhairline{border-top:0}
.rule-divider{border-top:var(--rule-w-inner) solid var(--rule-c)}

/* ---- ONE PAGE FRAME ---- */
main{display:block;padding:0 var(--gutter-r) 0 var(--gutter-l);min-height:60vh}
main > *{width:100%}
.page{padding-top:calc(44 * var(--u));padding-bottom:calc(64 * var(--u))}
.h1,.h2,.panel-title{font-family:var(--f-display);font-weight:400;text-transform:uppercase;margin:0}
.h1{font-size:var(--fs-h1);line-height:1;color:var(--cream);text-shadow:calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--ink)}
.h2{font-size:var(--fs-h2);line-height:1;color:var(--cream);text-shadow:calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--ink)}
.panel-title{font-size:var(--fs-panel);line-height:1.1}
.hero-title{font:400 var(--fs-hero)/1.05 var(--f-display);letter-spacing:-.03em;color:var(--cream);text-shadow:calc(4 * var(--u)) calc(4 * var(--u)) 0 var(--ink);margin:0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600}
.label{font:500 var(--fs-label)/1.2 var(--f-label)}
.panel{background:var(--cream);padding:calc(16 * var(--u))}

/* block buttons: hard shadow, press collapses it */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:calc(44 * var(--u));padding:0 calc(18 * var(--u));background:var(--cream);color:var(--ink);font:700 var(--fs-nav)/1 var(--f-body);text-decoration:none;white-space:nowrap}
.btn-leader{background:var(--leader)} .btn-signal{background:var(--signal)} .btn-ink{background:var(--ink);color:var(--cream)}
.btn-locked,.btn[disabled]{background:var(--locked);cursor:not-allowed}
.btn-press{transition:transform 80ms var(--ease-snap),box-shadow 80ms var(--ease-snap)}
.btn-press:active:not([disabled]){transform:translate(var(--shadow),var(--shadow));box-shadow:0 0 0 var(--ink)}
.btn-press:hover:not([disabled]):not(:active){transform:translate(calc(-2 * var(--u)),calc(-2 * var(--u)));box-shadow:calc(6 * var(--u)) calc(6 * var(--u)) 0 var(--ink)}

/* ---- NAV N9 (from chrome/nav.html) ---- */
.site-header{background:var(--paper-nav);color:var(--ink);font-family:var(--f-body);position:relative;z-index:20}
.tape{height:calc(32 * var(--u));min-height:20px;background:var(--ink);color:#FFF7E6;overflow:hidden;white-space:nowrap;font:600 max(12px,calc(15 * var(--u)))/calc(32 * var(--u)) var(--f-num);letter-spacing:.02em}
.tape{line-height:max(20px,calc(32 * var(--u)))}
.tape-track{display:inline-flex;min-width:100%;will-change:transform;animation:tape var(--tape-dur,40s) linear 6s infinite}
.tape-track > span{display:inline-block;margin-right:calc(58 * var(--u));flex:none}
@keyframes tape{to{transform:translateX(-50%)}}
.nav{height:calc(68 * var(--u));min-height:52px;padding:0 var(--gutter-r) 0 var(--gutter-l);display:flex;align-items:center;gap:calc(14 * var(--u))}
.brand{display:flex;align-items:center;gap:calc(10 * var(--u));margin-right:auto;text-decoration:none;color:var(--ink)}
.mark{height:calc(48 * var(--u));min-height:30px;width:auto;object-fit:contain}
.wordmark{font:400 calc(27 * var(--u))/1 var(--f-display);font-size:max(20px,calc(27 * var(--u)));letter-spacing:.01em}
.links{display:flex;align-items:center;gap:calc(8 * var(--u))}
.link,.social{display:inline-block;padding:calc(8 * var(--u)) calc(12 * var(--u));font-size:var(--fs-nav);font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;color:var(--ink);border:var(--rule-w) solid transparent}
.social{font-family:var(--f-num)}
.links .link.is-active{background:var(--leader);border-color:var(--rule-c);box-shadow:var(--hard)}
.link:not(.is-active):hover,.social:hover{text-decoration:underline;text-underline-offset:.25em}
.wallet{background:var(--leader);padding:calc(11 * var(--u)) calc(15 * var(--u));font:700 var(--fs-nav)/1 var(--f-body);white-space:nowrap;margin-left:calc(12 * var(--u))}
.menu-btn,.nav-mobile{display:none}
@media (max-width:1023px){
  .links,.nav .social{display:none}
  .nav{gap:10px}
  .mark{height:30px}.wordmark{font-size:22px}
  .wallet{padding:9px 10px;font-size:13px;margin-left:0}
  .menu-btn{display:inline-block;background:var(--cream);padding:9px 10px;font:700 13px/1 var(--f-body)}
  .nav-mobile{flex-direction:column;background:var(--paper-nav);padding:6px var(--gutter-r) 12px var(--gutter-l)}
  .nav-mobile.is-open{display:flex}
  .nav-mobile a{padding:12px 0;font:700 16px/1 var(--f-body);text-decoration:none;color:var(--ink)}
  .nav-mobile a.is-active{background:var(--leader);padding-left:10px}
}

/* ---- FOOTER F1 (from chrome/footer.html) ---- */
.site-footer{background:var(--paper-nav);color:var(--ink);padding:calc(20 * var(--u)) var(--gutter-r) calc(18 * var(--u)) var(--gutter-l);margin-top:calc(48 * var(--u))}
.wall{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(12 * var(--u))}
.wall span{display:flex;align-items:center;justify-content:center;height:calc(226 * var(--u));min-height:64px;background:var(--cream);font:400 calc(150 * var(--u))/1 var(--f-display);font-size:max(40px,calc(150 * var(--u)))}
.small{display:flex;align-items:center;justify-content:center;gap:calc(34 * var(--u));padding-top:calc(14 * var(--u));font:700 max(13px,calc(15 * var(--u)))/1 var(--f-num)}
.small a{color:var(--ink);text-decoration:none}.small a:hover{text-decoration:underline}
.foot-brand{display:inline-flex;align-items:center;gap:calc(10 * var(--u))}
.foot-brand .mark{height:calc(44 * var(--u));min-height:30px}
@media (max-width:1023px){.small{flex-wrap:wrap;gap:14px}.wall span{font-size:9vw}}

/* ---- MOTION: brick-laying (see DESIGN §10) ---- */
html.js:not(.rm) [data-lay]:not(.is-laid),html.js:not(.rm) [data-lay-group] > *:not(.is-laid){opacity:0;transform:translateX(calc(-28 * var(--u)))}
[data-lay],[data-lay-group] > *{transition:opacity var(--t-brick) steps(4,end),transform var(--t-brick) var(--ease-snap)}
[data-lay].is-laid,[data-lay-group] > *.is-laid{opacity:1;transform:none}
html.js:not(.rm) [data-grow]:not(.is-laid){transform:scaleX(0);transform-origin:0 50%}
html.js:not(.rm) [data-grow="y"]:not(.is-laid){transform:scaleY(0);transform-origin:50% 100%}
[data-grow]{transition:transform 500ms steps(8,end)}
[data-grow].is-laid{transform:none}
.tick{position:relative}
.tick::after{content:"";position:absolute;inset:0;background:var(--leader);opacity:0;pointer-events:none}
.tick.is-tick::after{animation:tick 360ms steps(3,end) 1}
@keyframes tick{0%{opacity:.85}100%{opacity:0}}
main.is-leaving{opacity:0;transition:opacity 80ms linear}
main.route-in > *{animation:route-in 160ms var(--ease-snap) both}
@keyframes route-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .tape-track{animation:none}.tape-track > span[aria-hidden]{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-lay],[data-lay-group] > *,[data-grow]{opacity:1!important;transform:none!important}
}
.route-stub{padding-top:calc(44 * var(--u))}