@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

/* ------------------------------------------------------------------
   Static Spirits. One consolidated stylesheet.
   Palette: ink black, warm white, vermilion. Editorial serif display.
   Layout rule: nothing is positioned outside its own box, no negative
   margins on text, every display heading wraps inside the viewport.
   ------------------------------------------------------------------ */

:root{
  --ground:#f3f1ea;
  --paper:#fbfaf6;
  --ink:#0c0c0d;
  --ink-2:#161617;
  --muted:#6d6a63;
  --muted-dark:#9a9791;
  --line:#c9c5ba;
  --line-dark:#3a3a3b;
  --red:#e8412a;
  --red-deep:#c9331f;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",Arial,Helvetica,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --rail:112px;
  --gutter:clamp(18px,3.2vw,48px);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:1rem/1.5 var(--sans);overflow-x:hidden;min-width:320px}
img,video{display:block;width:100%;max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-weight:400}
p{overflow-wrap:break-word}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
main{display:block;min-width:0}
.hero-title,.hero-actions,.desk-workspace,.desk-panel,.statement-copy,.statement-notes,.trait-heading,.trait-orbit,.spirit-mixer,.mixer-copy,.mixer-art,.mixer-readout,.hover-room-title,.hover-field,.loop-intro,.loop-grid,.protocol-note,.archive-head,.archive-intro,.filters,.grid,.signal-sequence,.sequence-layout,.sequence-steps,.sequence-step,.project-summary,.collector-desk,.desk-intro{min-width:0;max-width:100%}
.label{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}

/* Cursor and tap feedback (pointer:fine only, hidden for reduced motion) */
.cursor{position:fixed;left:0;top:0;width:22px;height:22px;border:1px solid var(--ink);border-radius:50%;z-index:100;pointer-events:none;transform:translate(-50%,-50%);transition:width .45s var(--ease-out),height .45s var(--ease-out),background .35s ease;mix-blend-mode:difference;display:none}
@media(pointer:fine){.cursor{display:block}}
.cursor.active{width:56px;height:56px;background:#fff}
.tap-mark{position:fixed;z-index:200;width:12px;height:12px;border:1px solid var(--red);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:tapMark .55s ease-out forwards}
@keyframes tapMark{to{width:70px;height:70px;opacity:0}}

/* Scroll progress */
.exhibition-progress{position:fixed;right:12px;top:50%;z-index:80;height:180px;width:28px;transform:translateY(-50%);display:flex;align-items:center;gap:7px;writing-mode:vertical-rl;pointer-events:none}
.exhibition-progress:before{content:"";position:absolute;left:3px;top:0;width:1px;height:100%;background:#9996}
.exhibition-progress span{position:absolute;left:1px;top:calc(var(--progress,0) * (100% - 7px));width:5px;height:7px;background:var(--red);transition:top .1s linear}
.exhibition-progress b{font-size:.62rem;font-weight:400;letter-spacing:.1em;color:var(--muted)}

/* ------------------------------------------------------------------ Nav */
.nav{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 18px;padding:12px var(--gutter);background:rgba(12,12,13,.96);color:#fff;border-bottom:1px solid var(--line-dark);backdrop-filter:blur(12px)}
.identity{display:flex;align-items:center;gap:16px;text-decoration:none;min-height:44px}
.identity strong{font:1.7rem/.85 var(--serif);letter-spacing:-.06em}
.identity span{font-size:.7rem;line-height:1.3;color:var(--muted-dark);text-transform:uppercase;letter-spacing:.06em}
.nav nav{grid-column:1/3;display:flex;flex-wrap:wrap;gap:4px 18px}
.nav nav a{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;position:relative}
.nav nav a i{font-style:normal;color:var(--muted-dark)}
.nav nav a:after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:#fff;transition:right .25s}
.nav nav a:hover:after{right:0}
.external{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:#fff}
.external span{display:inline-block;transition:transform .2s}
.external:hover span{transform:translate(3px,-3px)}

/* ------------------------------------------------------------------ Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;padding:22px var(--gutter) 24px;display:flex;flex-direction:column}
.hero:before{content:"";position:absolute;inset:-18%;z-index:0;pointer-events:none;background:radial-gradient(circle 30vw at var(--hero-x,24%) var(--hero-y,32%),rgba(232,65,42,.55),transparent 66%);filter:blur(24px);transform:translate(calc(var(--hero-nx,0) * -32px),calc(var(--hero-ny,0) * -24px));transition:transform .65s var(--ease-out);background-repeat:no-repeat}
.hero>*{position:relative;z-index:1}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.7rem;letter-spacing:.09em}
.hero-meta span:last-child{color:var(--red);font-weight:600}
.hero-title{padding-top:clamp(44px,8vh,90px);display:flex;flex-direction:column}
.hero-title .edition{display:block;margin-bottom:20px;font-size:.7rem;letter-spacing:.09em;color:#d8d5cc}
.hero h1{margin:0;padding:.14em .04em .04em;font:clamp(4.6rem,19vw,10rem)/.74 var(--serif);letter-spacing:-.06em;text-wrap:balance;overflow:visible}
.hero h1 span{display:block}
.hero h1 span:last-child{font-style:italic;color:var(--red);padding-right:.12em}
.hero-title .hero-intro{width:min(100%,34rem);margin:clamp(26px,4vh,44px) 0 0;font-size:1.05rem;line-height:1.45;color:#e6e3da}
.hero-actions{width:min(100%,34rem);margin:26px 0 0;border:1px solid var(--line);background:var(--paper);color:var(--ink)}

/* --- launch bar: coin contract, OpenSea, community --- */
/* Sits directly under the hero intro so the contract address is the first
   thing a visitor can act on. Cells wrap instead of scrolling, so nothing
   clips between 320px and 1920px. */
.launch-bar{width:min(100%,34rem);margin:clamp(18px,2.6vh,26px) 0 0}
.launch-row{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.launch-cell{flex:1 1 10rem;min-width:0;padding:11px 13px;background:#131314;display:flex;flex-direction:column;gap:5px}
.launch-label{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
.launch-value{display:flex;align-items:center;gap:8px;min-width:0;font-size:.82rem}
.launch-value a{color:#f2efe6;text-decoration:none;border-bottom:1px solid rgba(232,65,42,.55);padding-bottom:1px;overflow-wrap:anywhere;transition:color .2s ease,border-color .2s ease}
.launch-value a:hover,.launch-value a:focus-visible{color:var(--red);border-bottom-color:var(--red)}
.launch-cell.is-pending .launch-value b{font-weight:500;color:var(--muted-dark);font-style:italic}
.launch-copy{flex:none;border:1px solid var(--line-dark);background:transparent;color:var(--muted-dark);font:inherit;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;cursor:pointer;transition:color .2s ease,border-color .2s ease}
.launch-copy:hover,.launch-copy:focus-visible{color:#f2efe6;border-color:#f2efe6}
.launch-copy.is-done{color:var(--red);border-color:var(--red)}
@media (max-width:520px){.launch-cell{flex:1 1 100%}}

/* the collector pages carry the same bar on their light panels */
.page-launch .launch-row{border-color:var(--line);background:var(--line)}
.page-launch .launch-cell{background:var(--paper)}
.page-launch .launch-label{color:var(--muted)}
.page-launch .launch-value a{color:var(--ink)}
.page-launch .launch-copy{border-color:var(--line);color:var(--muted)}
.page-launch .launch-copy:hover,.page-launch .launch-copy:focus-visible{color:var(--ink);border-color:var(--ink)}
.hero-action-head{display:flex;justify-content:space-between;gap:12px;padding:10px 13px;border-bottom:1px solid var(--ink);font-size:.68rem;letter-spacing:.09em}
.hero-action-head b{font-weight:600;color:var(--red)}
.hero-actions>button{width:100%;min-height:58px;display:grid;grid-template-columns:minmax(96px,.9fr) minmax(0,1.3fr) 26px;column-gap:10px;align-items:center;padding:10px 13px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;transition:background .3s ease,color .3s ease,padding .4s var(--ease-out)}
.hero-actions>button>*{min-width:0}
.hero-actions>button strong{font:1.2rem/1.05 var(--serif)}
.hero-actions>button span{font-size:.76rem;line-height:1.3;color:var(--muted)}
.hero-actions>button i{font-style:normal;font-size:.72rem;text-align:right}
.hero-actions>button:hover,.hero-actions>button:focus-visible{padding-left:20px;background:var(--red);color:#fff}
.hero-actions>button:hover span,.hero-actions>button:focus-visible span{color:#fff}
.hero-actions>.hero-connect{background:var(--ink);color:#fff}
.hero-actions>.hero-connect span{color:#bdbab2}
.hero-actions>p{margin:0;padding:10px 13px;font-size:.72rem;line-height:1.35;color:#3d3b36}
.hero-stage{position:relative;width:100%;height:clamp(360px,68vw,600px);margin-top:40px;min-width:0}
.hero-stage{container-type:size;display:grid;place-items:center}
.flag-plate{position:relative;margin:0;width:min(100cqw,100cqh - 48px);aspect-ratio:1;max-width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.flag-plate img{width:100%;height:100%;object-fit:contain;display:block;transition:opacity .7s ease}
.flag-plate.is-live img{opacity:0}
.flag-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges;opacity:0;transition:opacity .7s ease}
.flag-plate.is-live .flag-canvas{opacity:1}
.flag-plate figcaption{position:absolute;left:0;right:0;top:calc(100% + 10px);display:flex;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;font-size:.64rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#d8d5cc}
.flag-plate figcaption b{font-weight:600;color:#fff}
.flag-plate figcaption span{color:#8d8a84}
.work{position:absolute;margin:0;will-change:transform;transition:transform .65s var(--ease-out),filter .4s ease}
.work img{aspect-ratio:1;height:auto;object-fit:cover;filter:none;transition:filter .55s ease,transform .9s var(--ease-out)}
.work:hover{z-index:9}
.work:hover img,.work:focus-within img{filter:contrast(1.05);transform:scale(1.02)}
.work figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;padding:7px 0 0;font-size:.64rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#d8d5cc}
.work figcaption span{min-width:0;text-align:right}
.work-a{width:min(58%,460px);left:27%;top:4%;z-index:4}
.work-b{width:min(29%,220px);right:0;top:11%;z-index:5}
.work-c{width:min(24%,205px);left:0;bottom:2%;z-index:6}
.hero-foot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-top:22px;font-size:.66rem;letter-spacing:.09em;color:#d8d5cc}
.hero-foot i{display:block;height:1px;background:#555}

/* Hero entrance */
.hero-meta,.hero-title .edition,.hero h1,.hero-intro,.hero .launch-bar,.hero-actions{opacity:0;transform:translateY(20px)}
.site-ready .hero-meta,.site-ready .hero-title .edition,.site-ready .hero h1,.site-ready .hero-intro,.site-ready .hero .launch-bar,.site-ready .hero-actions{opacity:1;transform:none;transition:opacity .9s ease,transform 1.1s var(--ease-out)}
.site-ready .hero-title .edition{transition-delay:.08s}
.site-ready .hero h1{transition-delay:.14s}
.site-ready .hero-intro{transition-delay:.23s}
.site-ready .hero .launch-bar{transition-delay:.27s}
.site-ready .hero-actions{transition-delay:.34s}

/* ------------------------------------------------------------------ Summary strip */
.project-summary{display:grid;grid-template-columns:1fr;border-block:1px solid var(--ink);background:var(--paper)}
.project-summary article{padding:22px var(--gutter);border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(96px,120px) 1fr;gap:16px;align-items:start}
.project-summary b{font-size:.7rem;font-weight:600;letter-spacing:.09em;padding-top:4px}
.project-summary p{margin:0;font:1.08rem/1.25 var(--serif)}
.project-summary a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;padding:20px var(--gutter);background:var(--red);color:#fff;text-decoration:none;font-size:.82rem}
.project-summary a span{font-size:1.4rem;transition:transform .2s}
.project-summary a:hover span{transform:translateY(6px)}

/* Scroll ribbon (scroll-linked marquee) */
.scroll-ribbon{height:82px;overflow:hidden;background:var(--red);color:var(--ink);border-bottom:1px solid var(--ink);display:flex;align-items:center}
.scroll-ribbon>div{display:flex;align-items:center;gap:20px;width:max-content;white-space:nowrap;will-change:transform}
.scroll-ribbon span{font:clamp(2.4rem,5.8vw,6.2rem)/1 var(--serif);letter-spacing:-.04em}
.scroll-ribbon i{font:1.4rem var(--sans);font-style:normal}

/* ------------------------------------------------------------------ Motion surfaces */
.motion-surface{position:relative;isolation:isolate;overflow:hidden}
.motion-surface:before{content:"";position:absolute;z-index:-1;width:38vw;height:38vw;left:var(--surface-x,50%);top:var(--surface-y,50%);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(232,65,42,.14),rgba(232,65,42,0) 68%);transition:left .5s var(--ease-soft),top .5s var(--ease-soft)}
.collector-desk.motion-surface:before{background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,0) 68%)}
.trait-room.motion-surface:before{background:radial-gradient(circle,rgba(232,65,42,.2),rgba(232,65,42,0) 68%)}
.archive.motion-surface:before{background:radial-gradient(circle,rgba(232,65,42,.16),rgba(232,65,42,0) 68%)}
.statement.motion-surface{overflow:visible}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);filter:blur(7px);clip-path:inset(0 0 18% 0);transition:opacity 1s ease,transform 1.1s var(--ease-out),filter 1s ease,clip-path 1.1s var(--ease-out)}
.reveal.visible{opacity:1;transform:none;filter:none;clip-path:none}

/* ------------------------------------------------------------------ Collector desk */
.collector-desk{padding:10vh var(--gutter);background:var(--red);color:var(--ink);border-top:1px solid var(--ink)}
.desk-intro>span,.action-kicker,.protocol-note span,.flow-head span,.sequence-head>span,.trait-heading span,.loop-intro span,.archive-head span,.hover-room-title>span,.section-index,.mixer-copy>span{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}
.desk-intro h2{margin:6vh 0 3vh;font:clamp(3rem,11vw,8rem)/.86 var(--serif);letter-spacing:-.05em;text-wrap:balance}
.desk-intro h2 i{color:var(--paper)}
.desk-intro p{max-width:390px}
.wallet-button{margin-top:22px;min-height:48px;padding:13px 18px;border:1px solid var(--ink);background:var(--ink);color:#fff;transition:transform .15s ease-out,background .2s,color .2s}
.wallet-button:hover{background:var(--paper);color:var(--ink)}
.desk-intro small{display:block;margin-top:9px;color:#3a1a14}
.desk-workspace{margin-top:7vh;background:var(--paper);border:1px solid var(--ink)}
.desk-tabs{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink);background:var(--paper)}
.desk-tab{min-height:64px;padding:14px 12px;background:transparent;border:0;border-right:1px solid var(--line);text-align:left;font-size:.95rem;transition:background .38s ease,color .38s ease}
.desk-tab:last-child{border-right:0}
.desk-tab span{display:block;margin-bottom:14px;font-size:.7rem;color:var(--muted)}
.desk-tab.active{background:var(--ink);color:#fff}
.desk-tab.active span{color:var(--red)}
.desk-panel{padding:32px 20px;display:grid;grid-template-columns:42px minmax(0,1fr);gap:18px}
.desk-panel[hidden]{display:none}
.desk-panel.active{animation:panelIn .45s var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}}
.action-number{font:italic 2rem var(--serif);color:var(--red)}
.action-kicker{color:var(--muted);margin:0}
.desk-panel h3{margin:10px 0 18px;font:clamp(2.4rem,9vw,4.6rem)/.92 var(--serif);letter-spacing:-.03em}
.desk-panel>div:nth-child(2)>p:last-child{max-width:440px}
.desk-panel dl{grid-column:2;margin:0}
.desk-panel dl div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-top:1px solid var(--line)}
.desk-panel dl div:last-child{border-bottom:1px solid var(--line)}
.desk-panel dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.desk-panel dd{margin:0;text-align:right;font:italic 1rem var(--serif)}
.transaction-button{grid-column:2;margin-top:2vh;min-height:50px;padding:14px;border:1px solid #b5b1a6;background:#e4e1d8;color:#6a675f;cursor:not-allowed}
.desk-notice{margin:0;padding:16px 20px;border-top:1px solid var(--ink);font-size:.78rem;color:var(--muted)}

/* Flow lab */
.flow-lab{border-top:1px solid var(--ink);padding:28px 20px 32px}
.flow-head{display:grid;grid-template-columns:1fr;gap:12px}
.flow-head p{margin:0;max-width:600px;font:1.2rem/1.25 var(--serif)}
.flow-track{display:grid;grid-template-columns:1fr;margin-top:22px}
.flow-track>i{display:block;width:1px;height:18px;margin-left:50%;background:var(--ink)}
.flow-step{min-height:72px;padding:12px;border:1px solid var(--ink);background:transparent;text-align:left;transition:background .3s ease,color .3s ease,transform .4s var(--ease-out)}
.flow-step:hover{transform:translateY(-4px)}
.flow-step.active{background:var(--ink);color:#fff}
.flow-step b{display:block;font-size:.66rem;font-weight:400;margin-bottom:10px}
.flow-step span{font:1.05rem var(--serif)}
@keyframes signalPulse{0%,100%{transform:scaleX(.15);opacity:.25}50%{transform:scaleX(1);opacity:1}}

/* ------------------------------------------------------------------ Statement */
.statement{padding:12vh var(--gutter);display:grid;grid-template-columns:1fr;gap:5vh;border-top:1px solid var(--line);background:var(--ground)}
.section-index span{color:var(--muted)}
.statement-copy{font:clamp(3rem,13vw,4.6rem)/.92 var(--serif);letter-spacing:-.04em}
.statement-copy p{margin:0;text-wrap:balance;transition:transform .5s var(--ease-out)}
.statement-copy p:last-child{font-style:italic;color:var(--red);font-size:.84em;line-height:1.02}
.statement-notes{font-size:1rem;max-width:42rem}
.statement-notes p{margin:0 0 1.4rem}
.statement-notes p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ Signal timeline */
.signal-sequence{padding:10vh var(--gutter) 12vh;background:var(--ink);color:#fff;border-top:1px solid var(--line-dark);overflow:hidden}
.sequence-head{display:grid;grid-template-columns:1fr;gap:16px;padding-bottom:8vh}
.sequence-head>span{color:var(--muted-dark)}
.sequence-head h2{margin:0;font:clamp(2.8rem,12vw,8rem)/.88 var(--serif);letter-spacing:-.05em;text-wrap:balance}
.sequence-layout{display:grid;grid-template-columns:1fr;gap:6vh;align-items:start}
.sequence-visual{position:sticky;top:calc(var(--nav-h,64px) + 10px);z-index:4;width:min(58vw,300px);margin:0 0 0 auto;background:var(--ink)}
.sequence-frame{position:relative;aspect-ratio:1;overflow:hidden;background:var(--red)}
.sequence-frame:after{content:"";position:absolute;inset:0;border:1px solid #fff3;pointer-events:none}
.sequence-frame img{height:100%;object-fit:cover;filter:none;transform:scale(1.035);transition:opacity .32s ease,transform .8s var(--ease-out),filter .5s}
.sequence-visual.swap .sequence-frame img{opacity:.15;transform:scale(1.1)}
.sequence-visual:hover img{filter:none;transform:scale(1)}
.sequence-visual figcaption{display:flex;justify-content:space-between;gap:10px;padding:12px 0;font-size:.64rem;letter-spacing:.1em}
.sequence-visual figcaption b{color:var(--red);font-weight:500}
.sequence-meter{display:block;height:2px;background:#333;overflow:hidden}
.sequence-meter span{display:block;width:var(--sequence-progress,25%);height:100%;background:var(--red);transition:width .65s var(--ease-out)}
.sequence-steps{position:relative;z-index:5;border-top:1px solid var(--line-dark)}
.sequence-step{min-height:40vh;padding:6vh 12px;display:grid;grid-template-columns:42px minmax(0,1fr);align-content:center;border-bottom:1px solid var(--line-dark);cursor:pointer;opacity:.5;background:rgba(12,12,13,.9);transform:translateY(20px);transition:opacity .55s ease,transform .75s var(--ease-out),background .35s,padding .55s}
.sequence-step:hover,.sequence-step:focus-visible,.sequence-step.is-active{opacity:1;transform:none;background:#171717}
.sequence-step>b{font-size:.72rem;font-weight:400;color:var(--red)}
.sequence-step h3{margin:0;font:clamp(2.2rem,10vw,5rem)/.92 var(--serif);letter-spacing:-.035em;text-wrap:balance}
.sequence-step p{grid-column:2;margin:2.5vh 0 0;max-width:430px;color:#b3b0a8;font-size:1rem}
.sequence-step.is-active p{color:#e6e3da}

/* ------------------------------------------------------------------ Trait room and mixer */
.trait-room{padding:10vh var(--gutter);background:var(--ink);color:#fff}
.trait-heading{display:grid;grid-template-columns:1fr;gap:14px}
.trait-heading span{color:var(--muted-dark)}
.trait-heading h2,.loop-intro h2,.archive-head h2,.hover-room-title h2{margin:0;font:clamp(2.8rem,12vw,8rem)/.88 var(--serif);letter-spacing:-.05em;text-wrap:balance;transform:translate3d(0,var(--scroll-title-y,0),0);transition:transform .22s linear;will-change:transform}
.trait-orbit{margin-top:8vh;border-top:1px solid var(--line-dark)}
.trait-orbit article{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:4px 10px;min-height:66px;padding:18px 0;border-bottom:1px solid var(--line-dark);transform:translateX(var(--trait-shift,0));transition:transform .42s var(--ease-out),padding .4s var(--ease-out),background .3s,color .3s}
.trait-orbit article:hover{padding-inline:16px;background:var(--red);color:#fff}
.trait-orbit article span{font-size:.7rem;color:#8d8a84}
.trait-orbit article:hover span,.trait-orbit article:hover p,.trait-orbit article:hover em{color:#fff}
.trait-orbit h3{margin:0;font:1.7rem var(--serif)}
.trait-orbit h3 em{font-style:normal;font-size:.72rem;font-family:var(--sans);letter-spacing:.06em;color:#8d8a84;margin-left:10px;vertical-align:middle;text-transform:uppercase}
.trait-orbit p{grid-column:2;margin:0;font-size:.88rem;color:#b3b0a8}
.spirit-mixer{margin-top:10vh;border:1px solid #505050;display:grid;grid-template-columns:1fr;background:#181818}
.mixer-copy{padding:28px;min-height:400px;display:flex;flex-direction:column;align-items:flex-start}
.mixer-copy>span{color:#9a9791}
.mixer-copy h3{margin:auto 0 24px;font:clamp(3rem,12vw,7rem)/.84 var(--serif);letter-spacing:-.05em;color:#fff;text-wrap:balance}
.mixer-copy p{max-width:300px;color:#b3b0a8}
.mixer-copy button{margin-top:22px;min-height:48px;padding:13px 16px;border:1px solid var(--red);background:var(--red);color:#fff;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform .15s ease-out,background .2s}
.mixer-copy button:active{transform:scale(.96)}
.mixer-copy small{margin-top:10px;color:#8d8a84}
.mixer-art{position:relative;min-height:85vw;border:0;border-block:1px solid #505050;padding:0;background:var(--red);overflow:hidden;color:var(--ink)}
.mixer-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;transition:filter .5s ease}
.mixer-art:hover img,.mixer-art:focus-visible img{filter:none}
.mixer-art img.arrive{animation:mixerArrive .38s var(--ease-out)}
@keyframes mixerArrive{from{transform:scale(1.12);filter:contrast(1.4)}}
.mixer-art span{position:absolute;left:14px;top:14px;background:var(--paper);color:var(--ink);padding:6px 9px;font-size:.7rem}
.mixer-art .mixer-kind{left:auto;right:14px}
.mixer-art i{position:absolute;inset:auto 0 0;padding:15px;background:var(--ink);color:#fff;font-style:normal;font-size:.7rem;letter-spacing:.09em;transform:translateY(101%);transition:transform .3s var(--ease-out)}
.mixer-art:hover i,.mixer-art:focus-visible i{transform:none}
.mixer-readout{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.mixer-readout div{padding:14px 0;border-bottom:1px solid #444;animation:readoutIn .35s both;animation-delay:calc(var(--m) * 35ms);min-width:0}
.mixer-readout small{display:block;color:#8d8a84;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em}
.mixer-readout strong{display:block;margin-top:3px;color:#fff;font:1.25rem var(--serif);font-weight:400;overflow-wrap:anywhere}
@keyframes readoutIn{from{opacity:0;transform:translateX(15px)}}

/* ------------------------------------------------------------------ Moving wall */
.moving-wall{background:var(--red);padding:5vh 0;overflow:hidden;border-block:1px solid var(--ink);transition:background-color .7s ease}
.moving-wall:hover{background:var(--red-deep)}
.wall-track{display:flex;gap:16px;width:max-content;animation:wall 32s linear infinite;will-change:transform}
.wall-track:hover{animation-play-state:paused}
.wall-track img{width:190px;height:190px;object-fit:cover;cursor:pointer;filter:none;transition:filter .3s,transform .3s}
.wall-track img:hover,.wall-track img:focus-visible{filter:none;transform:scale(.96)}
.wall-track img:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@keyframes wall{to{transform:translateX(calc(-50% - 8px))}}

/* ------------------------------------------------------------------ Hover room */
.hover-room{background:var(--ink-2);color:#fff;display:grid;grid-template-columns:1fr;border-top:1px solid #444}
.hover-room-title{min-height:400px;padding:8vh var(--gutter);display:flex;flex-direction:column;border-bottom:1px solid #444}
.hover-room-title>span{color:#8d8a84}
.hover-room-title h2{margin:auto 0 4vh}
.hover-room-title h2 i{color:var(--red)}
.hover-room-title p{max-width:340px;color:#b3b0a8}
.hover-field{position:relative;min-height:620px;overflow:hidden;background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),#2a2a2a 0,var(--ink-2) 72%);touch-action:pan-y}
.float-work{position:absolute;margin:0;padding:0;border:0;background:#fff;overflow:hidden;box-shadow:0 16px 55px #0008;transform:translate3d(var(--tx,0),var(--ty,0),0) rotateX(var(--rx,0)) rotateY(var(--ry,0));transform-style:preserve-3d;transition:transform .55s var(--ease-out),filter .45s ease,z-index 0s}
.float-work img{aspect-ratio:1;height:auto;object-fit:cover;filter:none;transition:filter .5s ease,transform .85s var(--ease-out)}
.float-work span{position:absolute;left:0;right:0;bottom:0;padding:6px 7px;background:var(--red);color:#fff;font-size:.58rem;line-height:1.3;letter-spacing:.06em;text-align:left;overflow-wrap:anywhere;transition:transform .28s}
.float-work:hover,.float-work:focus-visible{z-index:10!important;transform:translate3d(var(--tx,0),calc(var(--ty,0) - 10px),80px) rotateX(0) rotateY(0) scale(1.08)}
.float-work:hover img,.float-work:focus-visible img{filter:none;transform:scale(1.03)}
.fw-a{width:52%;left:24%;top:24%;z-index:4}
.fw-b{width:30%;left:3%;top:6%;z-index:2}
.fw-c{width:28%;right:3%;top:9%;z-index:5}
.fw-d{width:27%;left:4%;bottom:6%;z-index:6}
.fw-e{width:31%;right:3%;bottom:7%;z-index:3}
.pointer-label{position:absolute;left:var(--mx,50%);top:var(--my,50%);transform:translate(18px,18px);font-size:.62rem;letter-spacing:.09em;color:var(--red);pointer-events:none;display:none}
.hover-field:before,.hover-field:after{content:"";position:absolute;pointer-events:none;background:#444;display:none}
.hover-field:before{left:var(--mx,50%);top:0;bottom:0;width:1px}
.hover-field:after{top:var(--my,50%);left:0;right:0;height:1px}

/* ------------------------------------------------------------------ Reward loop */
.loop-section{padding:12vh var(--gutter);background:var(--ground)}
.loop-intro{display:grid;grid-template-columns:1fr;gap:14px}
.loop-grid{display:grid;grid-template-columns:1fr;margin-top:8vh;border-top:1px solid var(--ink)}
.loop-grid article{position:relative;isolation:isolate;overflow:hidden;min-height:200px;padding:22px 18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;transition:background .3s,color .3s}
.loop-grid article:before{content:"";position:absolute;z-index:-1;width:260px;height:260px;left:var(--card-x,50%);top:var(--card-y,50%);transform:translate(-50%,-50%) scale(.25);border-radius:50%;background:var(--red);opacity:0;transition:opacity .45s ease,transform .8s var(--ease-out)}
.loop-grid article:hover:before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.loop-grid article:hover{color:#fff}
.loop-grid b{font-size:.7rem;font-weight:400}
.loop-grid h3{margin:auto 0 .8rem;font:2.3rem/.95 var(--serif)}
.loop-grid p{margin:0;font-size:.9rem;max-width:26rem}
.protocol-note{margin-top:8vh;display:grid;grid-template-columns:1fr;gap:16px;padding-top:22px;border-top:1px solid var(--ink)}
.protocol-note p{margin:0;max-width:34rem}

/* ------------------------------------------------------------------ Archive */
.archive{padding:11vh var(--gutter);background:var(--paper)}
.archive-head{display:grid;grid-template-columns:1fr;gap:28px;align-items:end}
.archive-head h2{font-style:italic;color:var(--red);margin-top:10px}
.archive-head p{max-width:380px;font-size:.95rem;margin:0}
.archive-intro .test-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.archive-intro .test-links button,.archive-intro button,#randomEncounter{min-height:44px;padding:10px 14px;border:1px solid var(--ink);background:transparent;transition:transform .15s ease-out,background .2s,color .2s}
.archive-intro button:hover,#randomEncounter:hover{background:var(--ink);color:#fff}
#randomEncounter{margin-top:16px;width:100%}
.filters{position:sticky;top:0;z-index:18;margin:6vh 0 18px;display:grid;grid-template-columns:1fr;border-block:1px solid var(--ink);background:var(--paper)}
.filters>*{min-width:0}
.filters label{padding:10px 14px;border-bottom:1px solid var(--line)}
.filters label span{display:block;font-size:.68rem;letter-spacing:.09em;color:var(--muted)}
.filters input,.filters select{width:100%;min-height:40px;border:0;background:transparent;padding:6px 0;outline:0;color:var(--ink)}
.filters button{min-height:50px;border:0;background:transparent;padding:0 20px;text-decoration:underline;text-underline-offset:4px;transition:background .2s,color .2s}
.filters button:hover{background:var(--red);color:#fff}
.result-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 18px;font-size:.7rem;letter-spacing:.06em;margin-bottom:36px}
.result-line span{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
.card{min-width:0;cursor:pointer;perspective:900px;position:relative;border:0;padding:0;background:transparent;text-align:left;font:inherit;color:inherit}
.card-image{aspect-ratio:1;overflow:hidden;background:#e6e3da;position:relative;transform-style:preserve-3d;transition:transform .4s var(--ease-out),box-shadow .5s ease}
.card:hover .card-image{box-shadow:0 22px 60px rgba(0,0,0,.16)}
.card-image:after{content:"VIEW RECORD";position:absolute;inset:auto 0 0;background:var(--red);color:#fff;padding:11px;text-align:center;font-size:.68rem;letter-spacing:.09em;transform:translateY(101%);transition:transform .3s var(--ease-out)}
.card:hover .card-image:after,.card:focus-visible .card-image:after{transform:none}
.card-image img,.card-image video{width:100%;height:100%;object-fit:cover;filter:none;transition:filter .5s ease,transform .9s var(--ease-out)}
.card:hover .card-image img,.card:hover .card-image video,.card:focus-visible .card-image img{filter:none;transform:scale(1.04)}
.card-num{position:absolute;top:8px;left:8px;background:var(--paper);padding:4px 7px;font-size:.66rem;letter-spacing:.04em}
.card-kind{position:absolute;top:8px;right:8px;background:var(--ink);color:#fff;padding:4px 7px;font-size:.6rem;letter-spacing:.08em}
.card-kind.animated{background:var(--red)}
.card-copy{display:block;padding-top:9px}
.card-copy h3{margin:0;font-size:.76rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em}
.card-copy span{display:block;margin-top:3px;font:italic 1rem var(--serif);color:var(--muted);overflow-wrap:anywhere}
.more{display:block;margin:60px auto 0;min-height:48px;padding:14px 25px;border:1px solid var(--ink);background:transparent;transition:transform .15s ease-out,background .2s,color .2s}
.more:hover{background:var(--red);color:#fff;border-color:var(--red)}
.empty-state{grid-column:1/-1;padding:40px 0;font:italic 1.4rem var(--serif);color:var(--muted)}

/* ------------------------------------------------------------------ Footer */
footer{padding:50px var(--gutter);background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr;gap:34px;border-top:1px solid var(--line-dark)}
footer strong{font:2.8rem/.85 var(--serif);font-weight:400;transition:letter-spacing .35s,color .35s}
footer:hover strong{letter-spacing:.06em;color:var(--red)}
footer p{font-size:.88rem;margin:0;color:#c9c5ba;max-width:34rem}
footer a{font-size:.8rem;justify-self:start}
footer .contract{font-size:.74rem;color:#9a9791;overflow-wrap:anywhere}

/* ------------------------------------------------------------------ Dialog */
dialog{width:100vw;max-width:100vw;max-height:100dvh;margin:0;border:0;padding:0;background:var(--paper);color:var(--ink);overflow:auto}
dialog::backdrop{background:rgba(12,12,13,.85);backdrop-filter:blur(4px)}
dialog{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .4s ease,transform .55s var(--ease-out),overlay .4s allow-discrete,display .4s allow-discrete}
dialog[open]{opacity:1;transform:none}
@starting-style{dialog[open]{opacity:0;transform:translateY(24px) scale(.985)}}
dialog::backdrop{opacity:0;transition:opacity .4s ease,overlay .4s allow-discrete,display .4s allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]::backdrop{opacity:0}}
.close{position:sticky;top:0;float:right;z-index:4;min-width:54px;min-height:44px;margin:12px 12px 0 0;border:1px solid var(--ink);background:var(--paper);padding:8px 12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.close:hover{background:var(--ink);color:#fff}
.detail-grid{display:grid;grid-template-columns:1fr;clear:both}
.detail-media{position:relative;background:var(--red);padding:28px;display:grid;place-items:center}
.detail-media img,.detail-media video{width:auto;max-width:100%;max-height:min(70vh,560px);aspect-ratio:1;object-fit:contain}
.detail-stamp{position:absolute;left:14px;bottom:12px;color:#fff;font-size:.62rem;letter-spacing:.09em}
.detail-kind{position:absolute;right:14px;top:12px;background:var(--ink);color:#fff;padding:5px 8px;font-size:.62rem;letter-spacing:.09em}
.detail-copy{padding:34px 22px 70px;min-width:0}
.detail-copy .kicker{margin:0;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.detail-copy h2{margin:.8rem 0;font:clamp(2.6rem,11vw,6rem)/.88 var(--serif);letter-spacing:-.04em;overflow-wrap:anywhere}
.token-line{margin:0;font-size:.72rem;color:var(--muted);letter-spacing:.06em}
.media-line{margin:8px 0 0;font-size:.85rem}
.traits{margin:30px 0}
.trait{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:center;border-top:1px solid var(--line);padding:11px 0}
.trait:last-child{border-bottom:1px solid var(--line)}
.trait small{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;line-height:1.35}
.trait small em{display:block;font-style:normal;color:#9a9791;letter-spacing:.02em;text-transform:none}
.trait strong{font:1.1rem var(--serif);font-weight:400;overflow-wrap:anywhere}
.trait span{font-size:.66rem;white-space:nowrap}
.detail-copy .button{display:inline-block;background:var(--ink);color:#fff;padding:12px 18px;text-decoration:none;font-size:.76rem}
.detail-copy .button:hover{background:var(--red)}
.detail-owner{margin:18px 0 0;font-size:.72rem;color:var(--muted);overflow-wrap:anywhere}

/* ------------------------------------------------------------------ Mobile action dock */
.mobile-action-dock{position:fixed;z-index:90;display:grid;grid-template-columns:repeat(3,1fr);left:0;right:0;bottom:0;height:64px;background:rgba(12,12,13,.97);backdrop-filter:blur(12px);color:#fff;border-top:1px solid #555;padding-bottom:env(safe-area-inset-bottom)}
.mobile-action-dock button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-right:1px solid #444;background:transparent;color:#fff;font-size:.9rem}
.mobile-action-dock button:last-child{border:0}
.mobile-action-dock span{color:var(--red);font-size:.62rem}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

/* ================================================================== */
/* Tablet: 621px to 900px                                              */
/* ================================================================== */
@media(min-width:621px){
  .nav{grid-template-columns:auto 1fr auto;gap:18px 32px}
  .nav nav{grid-column:auto;justify-content:center}
  .hero-stage{height:clamp(460px,70vw,620px)}
  .work-a{width:min(52%,470px);left:27%;top:4%}
  .work-b{width:min(26%,230px)}
  .work-c{width:min(24%,210px)}
  .project-summary{grid-template-columns:repeat(3,1fr)}
  .project-summary article{display:block;padding:24px 20px;border-right:1px solid var(--line);border-bottom:0}
  .project-summary article:last-of-type{border-right:0}
  .project-summary p{margin-top:18px}
  .project-summary a{grid-column:1/4;border-top:1px solid var(--ink)}
  .scroll-ribbon{height:110px}
  .scroll-ribbon>div{gap:30px}
  .desk-panel{grid-template-columns:52px 1.2fr 1fr;gap:20px 2vw;padding:5vh 3vw}
  .desk-panel dl{grid-column:3}
  .transaction-button{grid-column:2/4}
  .desk-tab{padding:18px}
  .desk-tab span{margin-bottom:20px}
  .flow-lab{padding:3vh 3vw 4vh}
  .flow-head{grid-template-columns:1fr 2fr;gap:2vw}
  .flow-track{grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;align-items:center}
  .flow-track>i{width:auto;height:1px;margin:0;transform-origin:left;animation:signalPulse 2.8s ease-in-out infinite}
  .flow-step{min-height:92px}
  .flow-step b{margin-bottom:22px}
  .statement{grid-template-columns:1fr 2fr;gap:4vh 5vw}
  .statement-copy{grid-column:1/3;font-size:clamp(3.5rem,7.5vw,7.5rem);line-height:.9}
  .statement-notes{grid-column:2}
  .sequence-head h2{font-size:clamp(3.5rem,9vw,8rem)}
  .sequence-layout{grid-template-columns:minmax(220px,42%) 1fr;gap:5vw}
  .sequence-visual{width:100%;margin:0}
  .sequence-step{min-height:38vh;padding:6vh 2vw;grid-template-columns:48px minmax(0,1fr);transform:translateX(24px)}
  .sequence-step h3{font-size:clamp(2.2rem,4.6vw,4.4rem)}
  .trait-heading h2,.loop-intro h2,.archive-head h2,.hover-room-title h2{font-size:clamp(3.5rem,8vw,8rem)}
  .trait-orbit article{grid-template-columns:60px minmax(0,1fr) minmax(0,1fr);padding:22px 0}
  .trait-orbit p{grid-column:3;text-align:right}
  .spirit-mixer{grid-template-columns:1fr 1fr}
  .mixer-copy{min-height:480px;padding:40px}
  .mixer-art{min-height:0;border-block:0;border-left:1px solid #505050}
  .mixer-readout{grid-column:1/3;grid-template-columns:repeat(3,1fr);gap:0 20px;border-top:1px solid #505050}
  .wall-track img{width:240px;height:240px}
  .hover-room-title{min-height:460px}
  .hover-field{min-height:740px}
  .fw-a{width:36%;left:30%;top:24%}
  .fw-b{width:22%;left:5%;top:9%}
  .fw-c{width:19%;right:5%;top:12%}
  .fw-d{width:18%;left:9%;bottom:7%}
  .fw-e{width:23%;right:7%;bottom:8%}
  .float-work span{font-size:.64rem;padding:9px;transform:translateY(100%)}
  .float-work:hover span,.float-work:focus-visible span{transform:none}
  .loop-grid{grid-template-columns:1fr 1fr}
  .loop-grid article{min-height:300px;padding:24px 20px;border-right:1px solid var(--line)}
  .loop-grid article:nth-child(even){border-right:0}
  .protocol-note{grid-template-columns:1fr 2fr;gap:3vw}
  .archive-head{grid-template-columns:1fr 1fr}
  #randomEncounter{width:auto}
  .filters{grid-template-columns:1fr 1fr 1fr}
  .filters label{border-right:1px solid var(--line)}
  .filters label:nth-child(3n){border-right:0}
  .filters button{grid-column:1/4;min-height:52px;border-top:1px solid var(--line)}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 16px}
  footer{grid-template-columns:1fr 1fr;align-items:end}
  footer a{justify-self:end}
  dialog{width:min(1100px,94vw);max-width:94vw;max-height:92vh;margin:auto}
  .detail-copy{padding:40px 34px 60px}
  .mobile-action-dock{display:none}
  body{padding-bottom:0}
}

/* ================================================================== */
/* Desktop: 901px and up. Fixed left rail plus an asymmetric catalogue */
/* ================================================================== */
@media(min-width:901px){
  body{padding-left:var(--rail)}
  .nav{position:fixed;inset:0 auto 0 0;width:var(--rail);height:100vh;height:100dvh;padding:22px 16px;display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);border:0;border-right:1px solid var(--line-dark);z-index:40;overflow:auto;backdrop-filter:none}
  .identity{display:block;min-height:0}
  .identity strong{display:block;font:2.15rem/.8 var(--serif);letter-spacing:-.07em}
  .identity span{display:block;margin-top:13px;font-size:.6rem;line-height:1.35}
  .nav nav{margin:auto 0;display:flex;flex-direction:column;gap:4px;justify-content:flex-start}
  .nav nav a{padding:9px 0;min-height:0;display:grid;grid-template-columns:25px 1fr;gap:0;font-size:.66rem;border-bottom:1px solid var(--line-dark);transition:font-style .2s,transform .4s var(--ease-out)}
  .nav nav a:after{display:none}
  .nav nav a:hover{font-style:italic;transform:translateX(5px)}
  .external{writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;font-size:.62rem;min-height:0;margin-top:20px}
  .external span{display:inline}

  .hero{min-height:100vh;min-height:100dvh;padding:26px 2.4vw 24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:1.2vw}
  .hero-meta{grid-column:1/8;grid-row:1;align-self:start;flex-wrap:nowrap;justify-content:space-between}
  .hero-stage{grid-column:1/8;grid-row:2;height:auto;min-height:520px;margin-top:25px;background:transparent}
  .hero-title{grid-column:8/13;grid-row:1/3;padding:0 1vw 1vh 2.8vw;border-left:1px solid var(--line-dark)}
  .hero-title .edition{font-weight:600;color:#fff}
  .hero h1{margin:auto 0 0;padding:.14em 0 .04em;font-size:clamp(5.2rem,8.3vw,10rem);line-height:.72;letter-spacing:-.07em}
  .hero h1 span:last-child{padding-right:.14em}
  .hero-title .hero-intro{width:100%;max-width:480px;margin:3vh 0 0 auto;font-size:clamp(1rem,1.15vw,1.2rem);line-height:1.4}
  .hero-actions{width:min(100%,520px);margin:4vh 0 0 auto}
  .work-a{width:70%;left:5%;top:5%}
  .work-b{width:25%;right:2%;top:7%;z-index:7}
  .work-c{width:19%;left:auto;right:3%;bottom:4%;z-index:6}
  .work figcaption{background:var(--ink);padding:7px 6px 5px}
  .hero-foot{grid-column:1/13;grid-row:3;margin-top:18px}

  .project-summary{grid-template-columns:repeat(3,1fr) auto}
  .project-summary article{padding:25px 2vw}
  .project-summary a{grid-column:auto;min-width:200px;flex-direction:column;align-items:flex-start;border-top:0;padding:25px 2vw}
  .project-summary a span{align-self:flex-end}

  .collector-desk{padding:12vh var(--gutter);display:grid;grid-template-columns:4fr 8fr;gap:6vw}
  .desk-intro{position:sticky;top:8vh;align-self:start}
  .desk-intro h2{margin-top:10vh;font-size:clamp(3.6rem,6.2vw,7.6rem)}
  .desk-workspace{margin-top:0;align-self:start}
  .desk-notice{padding:16px 3vw}

  .statement{min-height:90vh;padding:15vh var(--gutter) 17vh;grid-template-columns:1.15fr 1.6fr .85fr;column-gap:6vw;align-items:start}
  .section-index{position:sticky;top:30px}
  .statement-copy{grid-column:2/4;font-size:clamp(4.2rem,7.6vw,9rem);line-height:.9;max-width:980px}
  .statement-copy p:last-child{font-size:.78em;line-height:.98}
  .statement-notes{grid-column:3;grid-row:2;margin-top:10vh}

  .signal-sequence{padding:14vh var(--gutter) 18vh}
  .sequence-head{grid-template-columns:1fr 2fr;gap:4vw;padding-bottom:12vh}
  .sequence-head h2{font-size:clamp(4rem,6.8vw,8rem)}
  .sequence-layout{grid-template-columns:minmax(320px,.82fr) 1.18fr;gap:7vw}
  .sequence-visual{top:8vh}
  .sequence-step{min-height:48vh;padding:6vh 2vw;grid-template-columns:70px minmax(0,1fr);transform:translateX(32px)}
  .sequence-step:hover,.sequence-step:focus-visible,.sequence-step.is-active{padding-left:3vw}
  .sequence-step h3{font-size:clamp(2.5rem,3.8vw,5rem)}

  .trait-room{padding:15vh var(--gutter);display:grid;grid-template-columns:5fr 7fr;gap:6vw}
  .trait-heading{display:block;position:sticky;top:8vh;align-self:start}
  .trait-heading h2{margin-top:14vh;font-size:clamp(4rem,6.2vw,8rem)}
  .trait-orbit{margin:0}
  .trait-orbit article{grid-template-columns:54px minmax(0,1fr);padding:28px 0}
  .trait-orbit p{grid-column:2;text-align:left;margin-top:6px;max-width:420px}
  .spirit-mixer{grid-column:1/3;margin-top:14vh;grid-template-columns:1fr 1.25fr 1fr;min-height:600px}
  .mixer-copy{padding:45px}
  .mixer-copy h3{font-size:clamp(3.6rem,5.6vw,7rem)}
  .mixer-art{border-inline:1px solid #505050;border-left:1px solid #505050}
  .mixer-readout{grid-column:auto;display:flex;flex-direction:column;justify-content:center;border-top:0;padding:24px}
  .mixer-readout div{padding:16px 0}

  .moving-wall{padding:4vh 0 4vh 3vw}
  .wall-track{gap:4vh}
  .wall-track img{width:40vh;height:40vh;min-width:220px;min-height:220px}

  .hover-room{min-height:100vh;grid-template-columns:4fr 8fr}
  .hover-room-title{min-height:0;padding:9vh var(--gutter);border-bottom:0;border-right:1px solid #444}
  .hover-room-title h2{font-size:clamp(4rem,6.2vw,8rem)}
  .hover-field{min-height:100vh}
  .fw-a{width:34%;left:29%;top:25%}
  .fw-b{width:21%;left:5%;top:9%}
  .fw-c{width:18%;right:5%;top:12%}
  .fw-d{width:17%;left:9%;bottom:7%}
  .fw-e{width:22%;right:7%;bottom:8%}
  .float-work:hover,.float-work:focus-visible{transform:translate3d(var(--tx,0),calc(var(--ty,0) - 12px),80px) rotateX(0) rotateY(0) scale(1.12)}
  .pointer-label,.hover-field:before,.hover-field:after{display:block}

  .loop-section{padding:16vh var(--gutter)}
  .loop-intro{grid-template-columns:3fr 7fr}
  .loop-intro h2{font-size:clamp(4rem,6.8vw,8rem)}
  .loop-grid{display:block;margin:14vh 0 0 22%;border-bottom:0}
  .loop-grid article{min-height:0;padding:24px 2vw;display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1fr);gap:0 2vw;align-items:center;border:0;border-bottom:1px solid var(--line)}
  .loop-grid article:nth-child(even){margin-right:10%}
  .loop-grid h3{margin:0;font-size:clamp(2rem,3.4vw,4.4rem)}
  .loop-grid p{justify-self:end;margin:0}
  .protocol-note{margin:10vh 0 0 40%}

  .archive{padding:15vh var(--gutter)}
  .archive-head{grid-template-columns:7fr 3fr}
  .archive-head h2{font-size:clamp(5.5rem,9.5vw,12rem)}
  .filters{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr auto}
  .filters label{border-bottom:0;border-right:1px solid var(--line)}
  .filters label:nth-child(3n){border-right:1px solid var(--line)}
  .filters button{grid-column:auto;border-top:0;padding:0 24px}
  .grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:9vh 1.4vw;align-items:start}
  .card{grid-column:span 3}
  .card:nth-child(8n+1){grid-column:span 4}
  .card:nth-child(8n+2){grid-column:6/span 3;margin-top:13vh}
  .card:nth-child(8n+3){grid-column:10/span 3}
  .card:nth-child(8n+4){grid-column:2/span 3}
  .card:nth-child(8n+5){grid-column:7/span 3;margin-top:8vh}
  .card:nth-child(8n+6){grid-column:9/span 4}
  .card:nth-child(8n+7){grid-column:1/span 3}
  .card:nth-child(8n){grid-column:5/span 3;margin-top:15vh}
  .card-copy{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .card-copy span{margin-top:0;text-align:right}

  footer{min-height:300px;grid-template-columns:1fr 1fr 1fr;align-items:end;padding:55px var(--gutter)}
  footer p{grid-column:2}
  footer a{grid-column:3}
  footer .contract{grid-column:1/4}

  .detail-grid{grid-template-columns:1.2fr 1fr}
  .detail-media{padding:45px;min-height:520px}
  .detail-copy{padding:60px 45px}
  .detail-copy h2{font-size:clamp(3rem,5vw,6rem)}
}

/* Very narrow phones */
@media(max-width:360px){
  .identity span{display:none}.nav{padding:8px var(--gutter)}.nav nav{gap:2px 14px}.nav nav a{min-height:32px;font-size:.7rem}.external{min-height:36px;font-size:.7rem}
  .hero h1{font-size:clamp(4rem,19vw,5rem)}
  .hero-actions>button{grid-template-columns:minmax(84px,.9fr) minmax(0,1.3fr) 22px}
  .hero-actions>button strong{font-size:1.05rem}
  .mixer-readout{grid-template-columns:1fr}
  .grid{gap:26px 10px}
}

/* Mobile headings wrap naturally instead of obeying desktop line breaks */
@media(max-width:620px){
  h2 br,.mixer-copy h3 br{display:none}
  .hero-meta span:nth-child(2){display:none}
}

/* Touch devices: give the hero field a slow drift instead of a pointer */
@media(pointer:coarse){
  .hero:before{inset:-30%;animation:mobileField 12s ease-in-out infinite alternate}
  .motion-surface:before{width:90vw;height:90vw;left:50%;top:30%;animation:surfaceDrift 9s ease-in-out infinite alternate}
  .statement-copy p,.trait-orbit article{transform:none!important}
  .loop-grid article:before{display:none}
  .float-work span{transform:none}
  .card-image img,.card-image video,.wall-track img,.mixer-art img,.sequence-frame img,.float-work img{filter:none}
}
@keyframes mobileField{0%{transform:translate(-8%,-5%) rotate(0)}50%{transform:translate(9%,4%) rotate(8deg)}100%{transform:translate(-2%,10%) rotate(-5deg)}}
@keyframes surfaceDrift{to{transform:translate(-35%,-30%) scale(1.25)}}

/* ------------------------------------------------------------------ Reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none;filter:none;clip-path:none}
  .hero-meta,.hero-title .edition,.hero h1,.hero-intro,.hero-actions{opacity:1;transform:none}
  .cursor,.pointer-label,.hero-field:before,.hover-field:before,.hover-field:after,.motion-surface:before,.loop-grid article:before{display:none}
  .hero:before{transform:none}
  .wall-track{animation:none;transform:none}
  .scroll-ribbon>div{transform:none!important}
  .trait-heading h2,.loop-intro h2,.archive-head h2,.hover-room-title h2{transform:none}
  .sequence-step{transform:none}
  .statement-copy p,.trait-orbit article,.float-work{transform:none!important}
  .flow-step:hover{transform:none}
  .hover-field{background:var(--ink-2)}
  dialog,dialog::backdrop{transition:none}
}

/* Debug flag used only for layout screenshots: /?still */
.hero:before{display:none}
.hero>.hero-ripple-background,.site-field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.site-field{position:fixed;background:var(--ink)}
.site-field>img{width:100%;height:100%;object-fit:cover}
.site-field:after{content:"";position:absolute;inset:0;background:rgba(12,12,13,.32);pointer-events:none}
main,footer{position:relative;z-index:1}
.hero-ripple-background>img{width:100%;height:100%;object-fit:cover}
.hero-ripple-background.is-live>.flag-canvas{opacity:1}
.hero-ripple-background.is-live>img{opacity:0}
.hero-ripple-background:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,13,.1),rgba(12,12,13,.68));pointer-events:none}
#heroArtwork img{opacity:1;transform:none;filter:none}
@media(max-width:900px){.hero-ripple-background:after{background:rgba(12,12,13,.45)}}
.debug-still *,.debug-still *:before,.debug-still *:after{transition:none!important;animation:none!important}
.debug-still .reveal,.debug-still .hero-meta,.debug-still .hero-title .edition,.debug-still .hero h1,.debug-still .hero-intro,.debug-still .hero-actions{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}

/* The wavy field runs behind the whole page: dark rooms are translucent so it shows through, paper rooms sit on it like sheets, vermilion rooms stay solid. */
body{background:var(--ink)}
.hero{background:transparent}
.signal-sequence,.trait-room{background:rgba(12,12,13,.58)}
.hover-room{background:rgba(22,22,23,.55)}
.hover-field{background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),rgba(42,42,42,.85) 0,rgba(22,22,23,.35) 72%)}
.spirit-mixer{background:rgba(24,24,24,.72)}
footer{background:rgba(12,12,13,.7)}
.statement,.loop-section{background:rgba(243,241,234,.9)}
.project-summary,.archive,.filters,.desk-workspace,.desk-tabs{background:rgba(251,250,246,.93)}
@media(min-width:901px){.nav{background:rgba(12,12,13,.82);backdrop-filter:blur(10px)}}
@media(prefers-reduced-motion:reduce){.site-field>img{opacity:1}}

/* Collector desk: live controls */
.transaction-button:not([disabled]){background:var(--ink);color:#fff;border-color:var(--ink);cursor:pointer;transition:background .2s}
.transaction-button:not([disabled]):hover{background:var(--red);border-color:var(--red)}
.tx-status{grid-column:2/-1;margin:12px 0 0;font-size:.82rem;line-height:1.4;color:var(--muted);min-height:1.2em;overflow-wrap:anywhere}
.tx-status a{color:var(--red)}
.tx-status.is-error{color:#b3261e}
.desk-panel select{width:100%;max-width:220px;border:0;border-bottom:1px solid var(--line);background:transparent;padding:4px 0;font:italic 1rem var(--serif);color:var(--ink);text-align:right}
.parked-list{grid-column:2/-1;border-top:1px solid var(--line)}
.vault-stats,.rooms-note{grid-column:2/-1}
.parked-empty{margin:0;padding:12px 0;font:italic 1rem var(--serif);color:var(--muted)}
.parked-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.parked-row b{font:1.15rem var(--serif);font-weight:400}
.parked-row small{display:block;color:var(--muted);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.parked-row .row-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.parked-row button{min-height:40px;padding:8px 14px;border:1px solid var(--ink);background:transparent;font-size:.82rem;transition:background .2s,color .2s}
.parked-row button:hover:not([disabled]){background:var(--ink);color:#fff}
.parked-row button[disabled]{opacity:.5;cursor:not-allowed}
.mint-guide{border-top:1px solid var(--ink);padding:28px 20px 32px}
.guide-head{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:22px}
.guide-head span{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}
.guide-head p{margin:0;max-width:600px;font:1.2rem/1.25 var(--serif)}
.mint-guide ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.mint-guide li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 12px;padding:16px 0;border-bottom:1px solid var(--line)}
.mint-guide li b{font-size:.7rem;font-weight:400;color:var(--red);padding-top:6px}
.mint-guide h4{margin:0 0 6px;font:1.35rem/1 var(--serif);font-weight:400}
.mint-guide p{margin:0;font-size:.9rem;max-width:520px}
.guide-button{display:inline-block;margin-top:12px;min-height:40px;padding:9px 14px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:.82rem;text-decoration:none;transition:background .2s,color .2s;cursor:pointer}
.guide-button:hover{background:var(--ink);color:#fff}
.guide-note{display:block;margin-top:10px;font-size:.78rem;color:var(--muted)}
@media(min-width:621px){.mint-guide{padding:3vh 3vw 4vh}.guide-head{grid-template-columns:1fr 2fr;gap:2vw}.mint-guide ol{grid-template-columns:1fr 1fr}.mint-guide li{padding:20px 16px 20px 0}.mint-guide li:nth-child(odd){border-right:1px solid var(--line);padding-right:20px}.mint-guide li:nth-child(even){padding-left:20px}}
@media(max-width:620px){.tx-status,.parked-list,.vault-stats,.rooms-note{grid-column:1/-1}.desk-panel select{max-width:160px}}

/* ------------------------------------------------------------------ Route pages: /mint and /stake */
.route-page{padding-left:0!important;padding-bottom:0!important}
.route-bar{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px 24px;padding:12px var(--gutter);background:rgba(12,12,13,.9);color:#fff;border-bottom:1px solid var(--line-dark);backdrop-filter:blur(12px)}
.route-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.route-brand strong{font:1.7rem/.85 var(--serif);letter-spacing:-.06em}
.route-brand span{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-dark)}
.route-tabs{display:flex;gap:4px;justify-self:center;border:1px solid var(--line-dark);padding:3px}
.route-tabs a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:#fff;transition:background .2s,color .2s}
.route-tabs a i{font-style:normal;color:var(--muted-dark)}
.route-tabs a:hover{background:#222}
.route-tabs a[aria-current="page"]{background:var(--red);color:#fff}
.route-tabs a[aria-current="page"] i{color:#fff}
.route-wallet{margin:0;min-height:40px;padding:9px 14px;background:var(--paper);color:var(--ink);border-color:var(--paper);font-size:.82rem}
.route-wallet:hover{background:var(--red);border-color:var(--red);color:#fff}
.route-main{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:5vh;padding:9vh var(--gutter) 12vh;color:#fff}
.route-kicker{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-dark)}
.route-intro h1{margin:18px 0 22px;font:clamp(3.4rem,12vw,8rem)/.86 var(--serif);letter-spacing:-.05em;text-wrap:balance}
.route-intro h1 i{color:var(--red)}
.route-intro p{max-width:34rem;color:#e6e3da;font-size:1.05rem;line-height:1.5}
.route-intro small{display:block;margin-top:16px;color:var(--muted-dark)}
.route-card{margin:0;color:var(--ink)}
.route-next{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding:16px 20px;border-top:1px solid var(--line);font-size:.85rem}
.route-next span{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.route-next a{color:var(--red)}
.desk-panel .route-next{grid-column:1/-1;margin:16px -20px -32px;border-bottom:0}
.route-page footer{position:relative;z-index:1}
.route-page .route-card .desk-tabs{position:static}
@media(min-width:621px){.desk-panel .route-next{margin:18px calc(-3vw) calc(-5vh)}}
@media(min-width:901px){.route-main{grid-template-columns:4fr 8fr;gap:6vw;padding:12vh var(--gutter)}.route-intro{position:sticky;top:12vh;align-self:start}.route-intro h1{font-size:clamp(3.6rem,6.2vw,7.6rem)}}
@media(max-width:620px){.route-bar{grid-template-columns:1fr auto}.route-tabs{grid-column:1/3;justify-self:stretch}.route-tabs a{flex:1;justify-content:center;padding:0 8px;font-size:.72rem}.route-brand span{display:none}}

/* Home page: route cards and link-shaped actions */
.route-cards{display:grid;grid-template-columns:1fr}
.route-card-link{display:flex;flex-direction:column;gap:12px;padding:28px 20px;border-bottom:1px solid var(--ink);text-decoration:none;color:var(--ink);transition:background .25s,color .25s}
.route-card-link span{font-size:.7rem;letter-spacing:.09em}
.route-card-link h3{margin:0;font:clamp(2.2rem,8vw,3.6rem)/.95 var(--serif)}
.route-card-link p{margin:0;max-width:30rem;font-size:.95rem}
.route-card-link b{margin-top:auto;font-weight:500;font-size:.85rem;color:var(--red)}
.route-card-link:hover{background:var(--ink);color:#fff}
.route-card-link:hover b{color:#fff}
.route-cards .flow-lab{grid-column:1/-1}
.route-cards .desk-notice{grid-column:1/-1}
.hero-route{display:grid;text-decoration:none}
.hero-actions>a{width:100%;min-height:58px;display:grid;grid-template-columns:minmax(96px,.9fr) minmax(0,1.3fr) 26px;column-gap:10px;align-items:center;padding:10px 13px;border-bottom:1px solid var(--line);text-align:left;color:var(--ink);transition:background .3s ease,color .3s ease,padding .4s var(--ease-out)}
.hero-actions>a>*{min-width:0}
.hero-actions>a strong{font:1.2rem/1.05 var(--serif)}
.hero-actions>a span{font-size:.76rem;line-height:1.3;color:var(--muted)}
.hero-actions>a i{font-style:normal;font-size:.72rem;text-align:right}
.hero-actions>a:hover,.hero-actions>a:focus-visible{padding-left:20px;background:var(--red);color:#fff}
.hero-actions>a:hover span,.hero-actions>a:focus-visible span{color:#fff}
.hero-actions>a.hero-connect{background:var(--ink);color:#fff}
.hero-actions>a.hero-connect span{color:#bdbab2}
.mobile-action-dock a{display:flex;align-items:center;justify-content:center;gap:8px;border-right:1px solid #444;color:#fff;font-size:.9rem;text-decoration:none}
.mobile-action-dock a:last-child{border:0}
.desk-route-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.desk-route-buttons .wallet-button{margin:0;text-decoration:none;display:inline-flex;align-items:center}
.desk-route-buttons .is-outline{background:transparent;color:var(--ink)}
.desk-route-buttons .is-outline:hover{background:var(--paper)}
.nav-route{font-weight:600}
@media(min-width:621px){.route-cards{grid-template-columns:1fr 1fr}.route-card-link{padding:32px 28px;min-height:280px}.route-card-link:first-child{border-right:1px solid var(--ink)}}

/* --- vault transparency: room cards and vault wide totals --- */
/* Every value rendered here comes from a storage read at page load. Layout
   wraps rather than scrolls so nothing clips between 320px and 1920px. */
.vault-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 18px}
.vault-stat{background:var(--paper);padding:13px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.vault-stat span{font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.vault-stat b{font-family:var(--serif);font-size:1.5rem;line-height:1.05;font-weight:400;overflow-wrap:break-word}
.vault-stat small{font-size:.68rem;color:var(--muted);line-height:1.3}

.room-card{border:1px solid var(--line);background:var(--paper);margin:0 0 12px}
.room-card header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.room-card header b{font-family:var(--serif);font-size:1.25rem;font-weight:400;letter-spacing:.01em}
.room-card header .guide-button{margin-left:auto}
.room-closed{font-style:normal;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:2px 6px}
/* the panel wide dl rules force flex rows with right aligned italic values;
   room cards are stat tiles instead, so those are overridden explicitly */
.room-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;background:var(--line)}
.room-card dl>div{display:block;background:var(--paper);padding:11px 14px;min-width:0;border:0}
.room-card dt{font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;line-height:1.25}
.room-card dd{margin:0;font:400 1.05rem/1.2 var(--serif);text-align:left;overflow-wrap:break-word}
.room-card dd i{font-style:normal;font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;color:var(--muted)}
/* one column on phones: three tiles in a two column grid leaves a dead cell,
   and the labels wrap to four lines at 375px */
@media(max-width:620px){
  .room-card dl{grid-template-columns:minmax(0,1fr)}
  .room-card dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
  .room-card dt{margin:0;flex:0 1 auto}
  .room-card dd{text-align:right;flex:0 0 auto}
  .room-card header .guide-button{margin-left:0;width:auto}
}
.rooms-note{margin:2px 0 0;font-size:.72rem;line-height:1.5;color:var(--muted)}
@media (max-width:420px){.room-card header .guide-button{margin-left:0;width:100%}}

/* --- the payout curve, shown on the stake page --- */
.tier-curve{grid-column:2/-1;border:1px solid var(--line);background:var(--paper);padding:14px;margin:0 0 18px}
.tier-curve h4{margin:0 0 12px;font:400 1.15rem/1.15 var(--serif)}
.tier-curve ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:1px;margin:0 0 12px;padding:0;background:var(--line);border:1px solid var(--line)}
.tier-curve li{background:var(--paper);padding:9px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tier-curve li b{font:400 1.15rem/1 var(--serif)}
.tier-curve li:last-child b{color:var(--red)}
.tier-curve li span{font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.tier-curve p{margin:0;font-size:.74rem;line-height:1.5;color:var(--muted)}
.tier-stale{display:block;margin-top:4px;color:var(--red);font-weight:500}
@media(max-width:620px){.tier-curve{grid-column:1/-1}.tier-curve ol{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- connect dialog: browser wallet or email --- */
.wallet-dialog{width:min(92vw,420px);max-width:100%;border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:26px 22px 22px;position:relative}
.wallet-dialog::backdrop{background:rgba(12,12,13,.72)}
.wallet-dialog h3{margin:6px 0 10px;font:400 1.9rem/1.05 var(--serif)}
.wallet-dialog .action-kicker{margin:0;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wallet-dialog .close{position:absolute;top:10px;right:10px;border:1px solid var(--line);background:transparent;font:inherit;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;cursor:pointer;color:var(--muted)}
.wallet-dialog .close:hover{color:var(--ink);border-color:var(--ink)}
.wallet-lead{margin:0 0 16px;font-size:.85rem;line-height:1.5;color:var(--muted)}
.wallet-option{display:block;width:100%;text-align:left;border:1px solid var(--line);background:transparent;padding:13px 14px;margin:0 0 10px;cursor:pointer;font:inherit;transition:border-color .2s ease,background .2s ease}
.wallet-option:hover:not(:disabled),.wallet-option:focus-visible{border-color:var(--ink);background:var(--ground)}
.wallet-option:disabled{opacity:.5;cursor:default}
.wallet-option b{display:block;font:400 1.15rem/1.2 var(--serif)}
.wallet-option span{display:block;margin-top:3px;font-size:.72rem;color:var(--muted)}
.wallet-form{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.wallet-form label{font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.wallet-form input{border:1px solid var(--line);background:var(--ground);padding:12px;font:inherit;font-size:1rem;color:var(--ink);min-width:0;width:100%}
.wallet-form input:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.wallet-dialog .transaction-button.is-ready{grid-column:auto;margin:4px 0 0;border-color:var(--ink);background:var(--ink);color:var(--paper);cursor:pointer}
.wallet-dialog .transaction-button.is-ready:hover:not(:disabled){background:var(--red);border-color:var(--red)}
.wallet-dialog .transaction-button:disabled{opacity:.55;cursor:default}
.wallet-back{border:0;background:transparent;padding:6px 0;font:inherit;font-size:.72rem;color:var(--muted);text-decoration:underline;cursor:pointer}
.wallet-back:hover{color:var(--ink)}
.wallet-address{margin:0 0 12px;font-size:.82rem;overflow-wrap:anywhere;padding:10px;border:1px solid var(--line);background:var(--ground)}
#walletDialogStatus{margin:10px 0 0;font-size:.75rem;line-height:1.45;color:var(--muted)}
#walletDialogStatus.is-error{color:var(--red)}

/* ============ Lore page ============ */
/* Editorial chapters on the warm ground, separated by hairlines. Nothing here
   introduces a colour, a font or an easing that the site did not already use. */
.lore-main{padding-bottom:6vh}
.lore-hero .lore-beat{font:400 clamp(1.4rem,4vw,2rem)/1.15 var(--serif);color:var(--red);margin-top:6px}
.lore-label{display:block;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.lore-chapter{display:grid;gap:clamp(18px,3vw,32px);padding:clamp(28px,5vh,56px) var(--gutter);max-width:1180px;margin:0 auto;width:100%}
.lore-chapter header h2{margin:0;font:400 clamp(2rem,7vw,3.6rem)/1.02 var(--serif);letter-spacing:-.02em}
.lore-chapter header h2 i{font-style:italic;color:var(--red)}
.lore-body{max-width:34rem}
.lore-body p{margin:0 0 12px;font-size:1.02rem;line-height:1.55;color:var(--ink-2)}
.lore-body .lore-beat{font:400 1.35rem/1.2 var(--serif);color:var(--ink);margin-top:16px}
.lore-foot{margin:0;font-size:.78rem;line-height:1.5;color:var(--muted);max-width:34rem}
.lore-foot a{color:var(--red)}
.lore-rule{border:0;border-top:1px solid var(--line);margin:0 var(--gutter);max-width:1180px}
@media(min-width:901px){
  .lore-chapter{grid-template-columns:1fr 1fr;align-items:start}
  .lore-chapter header{grid-column:1}
  .lore-chapter .lore-body{grid-column:2;grid-row:1/span 2}
  .lore-chapter .lore-plate,.lore-chapter .lore-strip,.lore-chapter .lore-panel{grid-column:1}
  .lore-chapter .lore-foot{grid-column:2}
  .lore-chapter.is-wide{grid-template-columns:1fr}
  .lore-chapter.is-wide .lore-body,.lore-chapter.is-wide .lore-foot{grid-column:1;grid-row:auto}
  .lore-rule{margin-left:auto;margin-right:auto}
}
.lore-plate{margin:0;border:1px solid var(--line);background:var(--paper);padding:10px}
.lore-plate img{width:100%;height:auto}
.lore-plate figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 2px 2px;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lore-plate figcaption b{color:var(--ink)}
.lore-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lore-strip img{width:100%;height:auto;border:1px solid var(--line)}
.record-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.record-grid>div{background:var(--paper);padding:14px}
.record-grid dt{font:400 1.2rem/1.1 var(--serif);margin:0 0 4px}
.record-grid dt em{display:block;font:500 .56rem/1 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.record-grid dd{margin:0;font-size:.85rem;color:var(--ink-2)}
.lore-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.lore-panel>div{background:var(--paper);padding:13px 14px}
.lore-panel dt{font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.lore-panel dd{margin:0;font:400 1.5rem/1.05 var(--serif)}
.lore-panel dd.is-accent{color:var(--red)}
.lore-close{padding:clamp(34px,7vh,80px) var(--gutter);max-width:1180px;margin:0 auto;text-align:left}
.lore-close blockquote{margin:0 0 26px;max-width:22ch}
.lore-close blockquote p{margin:0 0 14px;font:400 clamp(1.6rem,5.5vw,3rem)/1.1 var(--serif);letter-spacing:-.02em}
.lore-close blockquote p:last-child{color:var(--red)}
.lore-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ============ Proof page ============ */
.proof-main{padding-bottom:6vh}
.proof-section{padding:clamp(22px,4vh,40px) var(--gutter);max-width:1180px;margin:0 auto;width:100%}
.proof-heading{margin:0 0 16px;font:400 clamp(1.5rem,4.5vw,2.2rem)/1.1 var(--serif)}
.proof-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.proof-filter{border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease}
.proof-filter:hover,.proof-filter:focus-visible{color:var(--ink);border-color:var(--ink)}
.proof-filter.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.proof-ops{display:grid;gap:10px}
.op-row{border:1px solid var(--line);background:var(--paper);padding:14px;display:grid;gap:12px}
.op-main b{display:block;font:400 1.2rem/1.15 var(--serif);margin:6px 0 4px}
.op-main small{display:block;font-size:.8rem;line-height:1.45;color:var(--muted)}
.op-status{display:inline-block;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--line-dark);color:var(--muted)}
/* status is never colour alone: the word is always present */
.op-status.is-verified{color:var(--red);border-color:var(--red)}
.op-status.is-pending{color:var(--muted);border-color:var(--line)}
.op-status.is-failed{color:var(--ink);border-color:var(--ink)}
.op-status.is-unavailable{color:var(--muted);border-color:var(--line)}
.op-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.op-meta>div{background:var(--paper);padding:9px 11px;min-width:0}
.op-meta dt{font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.op-meta dd{margin:0;font-size:.9rem;overflow-wrap:break-word}
.op-meta dd i{font-style:normal;font-size:.7rem;letter-spacing:.08em;color:var(--muted)}
.op-actions{display:flex;flex-wrap:wrap;gap:8px}
.op-detail{display:grid;gap:1px;margin:14px 0;background:var(--line);border:1px solid var(--line)}
.op-detail>div{background:var(--paper);padding:9px 11px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.op-detail dt{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.op-detail dd{margin:0;font-size:.88rem;overflow-wrap:anywhere}
.proof-detail{width:min(94vw,460px)}
.room-proof{margin:10px 14px 12px;font-size:.76rem}
.room-proof a{color:var(--red)}
@media(min-width:621px){
  .op-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
  .op-row .op-actions{grid-column:1/-1}
}

/* ============ Homepage summary blocks ============ */
.home-summaries{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.home-summary{background:var(--ground);padding:clamp(24px,4vw,40px) var(--gutter)}
.home-summary h3{margin:0 0 12px;font:400 clamp(1.6rem,4.5vw,2.4rem)/1.05 var(--serif);letter-spacing:-.02em}
.home-summary h3 i{font-style:italic;color:var(--red)}
.home-summary p{margin:0 0 10px;max-width:34rem;font-size:.98rem;line-height:1.55;color:var(--ink-2)}
.home-summary .summary-link{display:inline-block;margin-top:6px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--red);padding-bottom:3px;text-decoration:none}
.home-summary .summary-link:hover,.home-summary .summary-link:focus-visible{color:var(--red)}
@media(min-width:901px){.home-summaries{grid-template-columns:1fr 1fr}}

/* ============ Mint page additions ============ */
.mint-steps{grid-column:2/-1;list-style:none;margin:14px 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.mint-steps li{background:var(--paper);padding:12px 14px}
.mint-steps b{display:block;font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--red)}
.mint-steps span{display:block;margin:5px 0 3px;font:400 1.1rem/1.2 var(--serif)}
.mint-steps small{display:block;font-size:.74rem;line-height:1.45;color:var(--muted)}
.mint-disclosure,.mint-faq{grid-column:1/-1;padding:clamp(20px,3.5vw,32px) 20px;border-top:1px solid var(--line)}
.mint-disclosure h3,.mint-faq h3{margin:0 0 14px;font:400 clamp(1.4rem,4vw,2rem)/1.1 var(--serif)}
.mint-disclosure p{margin:12px 0 0;max-width:34rem;font-size:.85rem;line-height:1.55;color:var(--muted)}
.mint-faq dl{display:grid;gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.mint-faq dl>div{background:var(--paper);padding:13px 14px}
.mint-faq dt{margin:0 0 5px;font:400 1.05rem/1.25 var(--serif)}
.mint-faq dd{margin:0;font-size:.85rem;line-height:1.55;color:var(--ink-2)}
.mint-faq dd a{color:var(--red)}
.mint-faq code{font-size:.8em;background:var(--ground);border:1px solid var(--line);padding:1px 4px}
@media(max-width:620px){.mint-steps{grid-column:1/-1}.mint-disclosure,.mint-faq{padding-left:var(--gutter);padding-right:var(--gutter)}}

/* Lore and Proof are long form pages, not the sticky-intro-plus-panel layout
   the collector pages use, so the two column grid .route-main sets is reset
   here and each section owns its own gutter. */
.lore-main,.proof-main{grid-template-columns:minmax(0,1fr);gap:0;padding:9vh 0 12vh}
.lore-main>.route-intro,.proof-main>.route-intro{position:static;padding:0 var(--gutter);max-width:1180px;margin:0 auto;width:100%}
.lore-main>.route-intro h1,.proof-main>.route-intro h1{font-size:clamp(3rem,9vw,6rem)}
@media(min-width:901px){
  .lore-main,.proof-main{grid-template-columns:minmax(0,1fr);gap:0;padding:12vh 0}
  .lore-main>.route-intro,.proof-main>.route-intro{position:static;top:auto}
}

/* The primary nav carries five destinations now, not three. At narrow widths
   five items at flex:1 cannot fit on one row, so they wrap, and the index
   numbers are dropped below 460px where they are the first thing to cost a
   line break. Wrapping keeps every destination reachable without a scroller. */
.route-tabs{flex-wrap:wrap}
@media(max-width:620px){
  .route-tabs a{flex:1 1 auto;min-width:5.5rem}
}
@media(max-width:460px){
  .route-tabs{gap:2px;padding:2px}
  .route-tabs a{min-width:4.4rem;padding:0 6px;font-size:.68rem;min-height:36px;gap:5px}
  .route-tabs a i{display:none}
}

/* --- contrast fix: Lore and Proof sit on the dark field --- */
/* .route-main sets color:#fff for a reason. The body copy rules below had
   inherited the light-ground palette (--ink-2, --muted), which is near-black
   text on a near-black background. Panels with their own paper background are
   left alone, because those are genuinely light surfaces. */
.lore-main .lore-body p{color:#e6e3da}
.lore-main .lore-body .lore-beat{color:#fff}
.lore-main .lore-chapter .lore-foot{color:var(--muted-dark)}
.lore-main .lore-label,.proof-main .lore-label{color:var(--muted-dark)}
.proof-main .rooms-note{color:var(--muted-dark)}
.lore-main .lore-plate figcaption{color:var(--muted)}
/* the record grid and the mechanics panels keep paper backgrounds, so their
   dark text is correct and must not be lightened */
.lore-main .record-grid dd,.lore-main .lore-panel dd{color:var(--ink)}
.lore-main .record-grid dt{color:var(--ink)}

/* --- nav: even spacing when the five tabs wrap --- */
/* Three per row reads as a deliberate grid. Four plus one stranded item does
   not, which is what flex:1 1 auto produced at phone widths. */
@media(max-width:620px){
  .route-tabs a{flex:1 1 calc(33.333% - 4px);min-width:0}
}
@media(max-width:460px){
  .route-tabs a{flex:1 1 calc(33.333% - 2px);padding:0 4px;letter-spacing:.04em}
}