/* FunSpace sketchbook theme: beige paper, graphite ink, one marker-red action.
   Source of truth for colours, type and motion is the October 2026 research pack. */
@font-face{font-family:'Fraunces';src:url('/assets/fraunces-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Kalam';src:url('/assets/kalam-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url('/assets/atkinson-next.woff2') format('woff2');font-weight:200 800;font-display:swap}


/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-color:var(--muted) var(--paper)}
body{min-height:100vh;padding:0;zoom:normal;width:auto;
  color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.12;color:var(--ink)}
h1{font-size:clamp(32px,4.4vw,52px)}h2{font-size:clamp(24px,2.6vw,32px)}
h3,.hand{font-family:var(--hand);font-weight:700;line-height:1.2}
h3{font-size:21px}
p,li,label,td,th{font-size:16px}
small,.muted{font-size:14px;color:var(--muted)}
a{color:var(--blue);text-underline-offset:3px}
button,input,textarea,select{font:inherit;color:inherit}
img{max-width:100%}
::selection{background:var(--note);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue)!important;outline-offset:3px}
[hidden]{display:none!important}
.skip-link{position:absolute;left:12px;top:-60px;z-index:calc(var(--z-modal) + 10);padding:10px 16px;background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2)}
.skip-link:focus{top:12px}

/* ---------- buttons ---------- */
button{cursor:pointer;background:none;border:0}
.btn,.chip,.mintbtn,.tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 20px;
  border:3px solid var(--ink);border-radius:var(--wob1);background:var(--card);color:var(--ink);text-decoration:none;
  font:600 16px/1.2 var(--sans);box-shadow:var(--shadow-sm);transform:none;
  transition:transform 100ms ease-out,box-shadow 100ms ease-out,background-color 100ms,color 100ms}
.btn:hover,.chip:hover,.mintbtn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow)}
.btn:active,.chip:active,.mintbtn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--shadow)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 var(--shadow)}
.btn.sm,.chip{min-height:44px;padding:7px 14px;font-size:15px}
.btn.primary,.btn.purple,.btn.green,.btn.blue-btn,.mintbtn,.primary-action,.nav-create,#buyBtn{background:var(--accent);color:var(--on-accent);border-color:var(--ink)}
.btn.primary:hover,.btn.purple:hover,.btn.green:hover,.btn.blue-btn:hover,.mintbtn:hover,.nav-create:hover{background:var(--accent-hover)}
.btn.yellow,.chip.on,.tabs button.on{background:var(--note)}
.btn.red{background:var(--card);color:var(--accent)}
.text-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--blue);font-weight:600;text-decoration:none;background:none;border:0;box-shadow:none;
  background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-repeat:no-repeat;background-position:0 78%;transition:background-size 300ms ease-out}
.text-link:hover{background-size:100% 2px}
.back-link{margin-bottom:10px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:var(--card);font-size:19px;transition:transform 150ms}
.icon-btn:hover{transform:rotate(-12deg)}

/* ---------- paper pieces ---------- */
.sticker,.eyebrow,.featured-label{display:inline-block;padding:5px 12px;background:var(--note);border:2px solid var(--ink);border-radius:var(--wob2);
  font:700 15px/1.3 var(--hand);color:var(--ink);transform:rotate(-2deg);letter-spacing:0;text-transform:none}
.post-it{display:block;padding:14px 16px;background:var(--note);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 4px 0 var(--shadow);font-family:var(--hand);transform:rotate(2deg)}
.tape-label,.window-titlebar,.featured-titlebar{position:relative;display:inline-flex!important;align-items:center;width:auto!important;height:auto!important;min-height:0!important;
  margin:-16px 0 12px 18px!important;padding:4px 16px!important;background:var(--tape)!important;color:var(--ink)!important;border:0!important;
  font:700 16px/1.4 var(--hand)!important;transform:rotate(-1.5deg);box-shadow:none!important;z-index:2}
.taped{position:relative}
.taped::before,.card::before,.art-card::before,.collection-card::before{content:"";position:absolute;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;
  background:var(--tape);transform:rotate(-3deg);z-index:2;pointer-events:none;
  clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,2% 96%,0 50%)}
.card .tape{display:none}
.badge,.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);
  font:600 13px/1.4 var(--sans);text-transform:none;letter-spacing:0;color:var(--ink)}
.badge.live{background:var(--sage);color:var(--on-sage)}.badge.soon{background:var(--note)}.badge.done{background:var(--card-2)}

/* Verified Artist rubber stamp */
.verified-stamp{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 2px;border:2.5px solid var(--accent);border-radius:6px;color:var(--accent);
  font:700 13px/1.2 var(--hand);text-transform:uppercase;letter-spacing:.06em;transform:rotate(-4deg);
  -webkit-mask:radial-gradient(circle at 30% 40%,var(--ink) 0 60%,var(--ink) 61%) ;background:transparent;white-space:nowrap}
.verified-stamp::before{content:"✓";font-size:14px}

/* Neutral tag for the FunSpace team's own sketchbook */
.team-tag{display:inline-flex;align-items:center;padding:2px 10px;border:2px dashed var(--ink);border-radius:var(--wob2);background:var(--card);color:var(--soft);font:700 14px/1.4 var(--hand);white-space:nowrap}

/* Token price chip */
.coin{position:relative;display:inline-block;width:18px;height:18px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--note) 0 30%,var(--gold) 31%);
  border:2px solid var(--ink);box-shadow:inset -2px -2px 0 var(--shadow);vertical-align:-3px}
.coin.lg{width:28px;height:28px}
/* the gold planet coin: a ring around the coin */
.coin::after{content:"";position:absolute;left:-30%;right:-30%;top:38%;height:24%;border:1.5px solid var(--ink);border-radius:50%;transform:rotate(-18deg);pointer-events:none}
.tok-price{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font:600 15px/1.3 var(--sans);white-space:nowrap}
.tok-price small{font-size:13px;color:var(--muted);font-weight:500}
.tok-price.big{font-size:20px;padding:6px 16px}
.tok-price.big small{font-size:15px}

/* Edition counter with pencil hatching */
.edition{margin:6px 0 16px}
.edition-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:700 18px/1.3 var(--hand)}
.edition-row small{font:500 14px var(--sans);color:var(--muted)}
.edition-bar{height:16px;margin-top:6px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);overflow:hidden}
.edition-bar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--ink) 0 2px,transparent 2px 6px);transition:width 600ms ease-out}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:14px;flex-wrap:nowrap;min-height:72px;margin:0;
  padding:10px max(16px,calc((100vw - 1240px)/2));background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(6px);border:0;border-bottom:2px solid var(--ink);box-shadow:0 3px 0 var(--line-soft)}
.brand{display:inline-flex;align-items:center;gap:8px;flex:none;color:var(--ink);text-decoration:none;font:600 27px/1 var(--serif);letter-spacing:-.02em}
.brand-planet{width:42px;height:42px;overflow:visible}
.brand-planet .draw{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.brand-planet .thin{stroke-width:2.2}
.brand-planet .dot{fill:var(--accent)}
.brand-word{position:relative;top:-1px}
.topnav{display:flex;align-items:center;gap:0;margin:0;flex:none}
.topnav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 9px;white-space:nowrap;color:var(--ink);text-decoration:none;font:600 16px var(--sans);background:none;border:0;box-shadow:none}
.topnav a::after{content:"";position:absolute;left:10px;right:10px;bottom:8px;height:3px;border-radius:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 300ms ease-out}
.topnav a:hover::after,.topnav a.on::after,.topnav a[aria-current=page]::after{transform:scaleX(1)}
.top .right{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;flex-wrap:nowrap}
.top .right>*{flex:none}
.top .right>.header-search{flex:0 1 auto}
.header-search{display:flex;align-items:center;gap:6px;width:clamp(120px,13vw,210px);height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);box-shadow:none}
.top .header-search input{border:0;border-radius:0;box-shadow:none;width:100%;min-width:0;border:0;background:transparent;outline:0;font:15px var(--sans);color:var(--ink);padding:0;min-height:0}
.header-search input::placeholder{color:var(--muted)}
.fsp-chip{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font:700 16px var(--sans);white-space:nowrap;transition:transform 150ms}
.fsp-chip:hover{transform:translateY(-2px)}
.fsp-chip b{font-variant-numeric:tabular-nums}
.fsp-chip-label{font-weight:500;font-size:14px;color:var(--muted)}
.fsp-chip.tick b{animation:tick 400ms ease-out}
@keyframes tick{40%{transform:translateY(-4px);color:var(--accent)}}
.avatar-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--sage);color:var(--ink);font:700 16px var(--sans);letter-spacing:.02em;overflow:hidden}
.avatar-btn img{width:100%;height:100%;object-fit:cover}
.nav-create{white-space:nowrap}
.menu-toggle,.mobile-theme-toggle{display:none!important}
.account-bar{display:none!important}
.avatar-menu{position:fixed;z-index:var(--z-popover);right:max(16px,calc((100vw - 1240px)/2));top:80px;min-width:210px;max-height:min(80vh,640px);overflow:auto;padding:8px;
  background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
.avatar-menu a,.avatar-menu button{display:flex;align-items:center;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:transparent;box-shadow:none;color:var(--ink);text-align:left;text-decoration:none;font:15px var(--sans)}
.avatar-menu a:hover,.avatar-menu button:hover{background:var(--card-2)}
.avatar-menu #accountStatus{display:block;padding:8px 12px;border-bottom:2px dashed var(--line-soft);font-size:13px;color:var(--muted)}

/* ---------- layout ---------- */
.shell{display:block;background:transparent}
.shell>.side,.space-margins,.desktop-icons,.app-framebar,.taskbar,.start-menu,.boot-screen{display:none!important}
.main{width:100%;max-width:1240px;margin:0 auto;padding:28px 16px 24px;min-width:0}
.main>section[id^="view-"]{scroll-margin-top:90px}
.main>section[style*="display: block"]{animation:page-in 250ms ease-out both}
@keyframes page-in{from{opacity:0;transform:translateX(18px) rotate(.4deg)}to{opacity:1;transform:none}}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:40px 0 18px;padding:0;background:none;border:0;flex-wrap:wrap}
.rowhead h1,.rowhead h2{margin:0;font-size:clamp(24px,2.6vw,32px)}
.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:8px 0 18px}
.page-heading h1{margin:12px 0 6px}
.page-heading p{max-width:620px;color:var(--muted)}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:48px;align-items:center;margin:12px 0 36px;padding:0;border:0;background:none;box-shadow:none;min-height:0}
.hero-copy h1{margin:16px 0 18px;font-size:clamp(40px,5.6vw,68px)}
.hero-copy p{max-width:560px;font-size:18px;color:var(--soft)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-perks{display:flex;flex-wrap:wrap;gap:8px 20px;margin:22px 0 0;padding:0;list-style:none}
.hero-perks li{font:700 16px var(--hand);color:var(--ink)}
.hero-frame{margin:0;padding:16px 16px 10px;background:var(--card);border:3px solid var(--ink);border-radius:var(--wob1);box-shadow:var(--shadow-lg);transform:rotate(1.5deg)}
.hero-frame img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:var(--paper);border:2px solid var(--line-soft);border-radius:4px}
.hero-frame figcaption{margin-top:8px;text-align:center;font:italic 600 15px var(--serif);color:var(--muted)}
.hero-note{position:absolute;right:-18px;bottom:46px;font-size:17px;line-height:1.15;text-align:center}
.scribble{position:relative;white-space:nowrap}
.scribble svg{position:absolute;left:-4%;width:108%;pointer-events:none;overflow:visible}
.scribble svg path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.scribble[data-scribble=underline] svg{bottom:-.22em;height:.4em}
.scribble[data-scribble=circle] svg{top:-2%;height:104%;left:-5%;width:110%}

.daily-theme{margin:0 0 36px}
.daily-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:22px 26px;background:var(--note);border:3px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm);transform:rotate(-.6deg)}
.daily-card .daily-date{font:700 15px var(--hand);text-align:center;line-height:1.1;padding:2px 6px;transform:rotate(-3deg)}
.daily-card .daily-date b{display:block;font:600 30px var(--serif)}
.daily-card h2{margin:2px 0 4px;font-size:clamp(24px,3vw,34px)}
.daily-card p{margin:0;color:var(--ink)}
.daily-card .streak{display:inline-flex;gap:6px;align-items:center;margin-top:8px;font:700 15px var(--hand)}

.home-columns{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:28px;margin:0 0 12px;align-items:start}
.carousel-pause{margin-top:12px}
.featured-window,.how-it-works{position:relative;padding:22px;background:var(--card);border:3px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
.featured-content{position:relative;display:grid;grid-template-columns:minmax(160px,300px) minmax(0,1fr);gap:28px;align-items:center;padding:4px 52px}
.featured-content.single{padding:4px 0}
.featured-price{margin:4px 0 0}
.featured-image-button,.featured-artwork{display:block;width:100%;padding:0;background:none;border:0;border-radius:0;transform:rotate(-1.5deg);box-shadow:none;transition:transform 150ms}
.featured-image-button img{border:2px solid var(--ink)}
.featured-image-button:hover{transform:rotate(0) translateY(-3px)}
.featured-image-button img,.featured-artwork{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.featured-info h2{margin:0 0 4px;font-size:30px}
.featured-info p{margin:0 0 12px;color:var(--muted)}
.featured-info .btn{margin-top:14px}
.carousel-arrow{position:absolute;top:calc(50% - 22px);width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--card);font:28px/1 var(--serif);box-shadow:2px 2px 0 var(--shadow)}
.carousel-arrow.previous{left:0}.carousel-arrow.next{right:0}
.carousel-dots{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.carousel-dots button{flex:none}
.carousel-dots button{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;box-shadow:none}
.carousel-dots button::before{content:"";width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;background:var(--card)}
.carousel-dots button.active::before{background:var(--ink)}
.steps-list{display:grid;gap:16px;margin:4px 0 0;padding:0;list-style:none}
.steps-list li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.steps-list li>b{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:var(--sage);font:700 20px var(--hand);transform:rotate(-6deg)}
.steps-list h3{margin:0 0 2px}
.steps-list p{margin:0;font-size:15px;color:var(--muted)}
.home-primary{margin:0;padding:0;background:none;border:0;box-shadow:none}
.home-journal{max-width:none;margin:40px 0 0;padding:16px 20px;background:var(--card);border:2px dashed var(--ink);border-radius:var(--wob2)}
.home-journal summary{cursor:pointer;font:700 20px var(--hand)}
.home-journal summary span{font:15px var(--sans);color:var(--muted);margin-left:8px}

/* ---------- cards ---------- */
.grid,.catalog-grid,.nft-market-grid,.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:34px 26px;padding-top:14px}
.card,.art-card,.collection-card{position:relative;min-width:0;padding:12px 12px 14px;background:var(--card);border:2px solid var(--ink);border-radius:3px;
  box-shadow:3px 3px 0 var(--shadow);transform:rotate(1deg);transition:transform 150ms ease-out,box-shadow 150ms ease-out;cursor:pointer}
.grid>:nth-child(2n),.catalog-grid>:nth-child(2n),.profile-grid>:nth-child(2n){transform:rotate(-1.2deg)}
.grid>:nth-child(3n),.catalog-grid>:nth-child(3n),.profile-grid>:nth-child(3n){transform:rotate(.6deg)}
.card:hover,.art-card:hover,.collection-card:hover,.grid>:hover,.catalog-grid>:hover,.profile-grid>:hover{transform:rotate(0) translateY(-6px);box-shadow:7px 9px 0 var(--shadow)}
.art-open{display:block;width:100%;padding:0;background:var(--paper);border:0;box-shadow:none}
.art-open img,.collection-card .thumb,.card .thumb img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--paper);border:1px solid var(--line-soft)}
.card .thumb{height:auto;border:0;border-radius:0;background:none}
.art-card-copy{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding-top:10px}
.art-name{padding:0;background:none;border:0;box-shadow:none;text-align:left;font:700 20px/1.2 var(--hand);color:var(--ink);min-height:0}
.art-number{display:none}
.art-by,.card-artist{grid-column:1/-1;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.art-card-bottom{position:absolute;top:22px;right:22px;display:flex}
.art-card-bottom>span{display:none}
.art-price{grid-column:1/-1;margin-top:8px}
.favorite-button{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--card);color:var(--accent);font-size:22px;box-shadow:2px 2px 0 var(--shadow);transition:transform 150ms}
.favorite-button:hover{transform:scale(1.08)}
.favorite-button.is-favorite{background:var(--accent);color:var(--on-accent);animation:heart-pop 250ms ease-out}
@keyframes heart-pop{50%{transform:scale(1.25)}}
.collection-card h3{margin:10px 0 2px}
.collection-card>.favorite-button{position:absolute;right:22px;top:22px}
.collection-card-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;margin-top:10px;font-size:14px;color:var(--muted)}
.card h3{font-size:20px;margin-top:10px}
.card .pitch,.card .meta{font-size:15px;color:var(--muted)}
.cardfoot .soon{display:inline}
.catalog-empty,.empty{grid-column:1/-1;display:grid;justify-items:center;gap:10px;padding:48px 20px;text-align:center;background:var(--card);border:2px dashed var(--ink);border-radius:var(--wob2);color:var(--ink)}
.catalog-empty>span{font-size:42px}

/* ---------- coming soon ---------- */
.coming-soon{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:22px 4px;color:var(--soft)}
.coming-soon svg{width:56px;height:56px;flex:none;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.coming-soon svg .dot{fill:var(--accent);stroke:none}
.coming-soon p{margin:0;font:700 19px var(--hand);color:var(--ink)}
.featured-window.is-coming .featured-content{display:block;min-height:0;padding:6px 4px}
.coming-card h2{margin:6px 0 8px}
.coming-card p{max-width:520px;color:var(--soft)}
.coming-card .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}

/* ---------- explore ---------- */
.explore-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 8px;padding:0;border:0}
.explore-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);color:var(--ink);text-decoration:none;font-weight:600}
.explore-tabs a.active{background:var(--ink);color:var(--paper)}
.catalog-toolbar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0 0 12px;padding:0;background:none;border:0}
.catalog-toolbar label:not(.catalog-search){display:grid;gap:4px;font:700 15px var(--hand)}
.catalog-toolbar select{min-height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);color:var(--ink);font:15px var(--sans)}
.catalog-search{display:none!important}
#catalogCount{font-size:14px;color:var(--muted);align-self:center}

/* ---------- forms + sheets ---------- */
.field label,.sheet label{font:700 16px var(--hand);color:var(--ink)}
.field input,.field textarea,.field select,input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=date],input[type=time],textarea,select{
  min-height:44px;padding:9px 12px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);color:var(--ink);font:16px var(--sans)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input[type=range]{accent-color:var(--accent)}
input[type=checkbox]{accent-color:var(--accent);width:20px;height:20px}
.veil{background:var(--overlay)}
.sheet{width:min(880px,100%);background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:var(--wob1);box-shadow:var(--shadow-lg);padding:26px 28px}
.sheet .sub{color:var(--muted)}
/* Helper text under forms: full-strength soft ink, never faint grey. */
.warn{color:var(--soft);font-size:15px;line-height:1.4}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.steps span{padding:4px 12px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);font:700 15px var(--hand)}
.steps span.on{background:var(--note)}
.route-window{position:relative;max-width:980px;margin:18px auto 24px;padding:20px 26px 26px;background:var(--card);border:3px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm);overflow:visible}
.route-window #sheet{position:static;width:100%;max-width:none;max-height:none;margin:0;padding:0;overflow:visible;background:transparent;border:0;box-shadow:none}
.window-body{padding:0}
.narrow-window{max-width:520px;margin:40px auto}
.narrow-window #sheet .auth-actions .btn.purple{flex:1}
.auth-actions{display:flex;align-items:center;gap:14px;margin-top:6px}
.auth-forgot{margin:6px 0 0}
.auth-wallet{display:grid;gap:10px;margin-top:18px;padding-top:14px;border-top:2px dashed var(--line-soft)}
.auth-wallet>span{justify-self:center;margin-top:-26px;padding:0 10px;background:var(--card);color:var(--soft);font:700 15px var(--hand)}
.auth-wallet .wallet-signin{width:100%}
/* Chrome autofill paints inputs light blue; keep the card colour and ink text. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--card) inset;box-shadow:0 0 0 1000px var(--card) inset;transition:background-color 9999s}
.os-dialog{max-width:480px;margin:40px auto;padding:20px;background:var(--card);border:3px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
.house-rules{display:flex;align-items:center;gap:8px;margin:12px 0}
.auth-switch{margin-top:18px;padding-top:12px;border-top:2px dashed var(--line-soft)}
.toast{background:var(--ink);color:var(--paper);border:0;border-radius:var(--wob2);font:700 17px var(--hand);box-shadow:var(--shadow-sm);bottom:28px;z-index:var(--z-modal);padding:12px 22px}

/* ---------- artwork + collection pages ---------- */
.artwork-detail{display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,.9fr);gap:36px;align-items:start}
.artwork-large{display:block;width:100%;max-height:640px;object-fit:contain;padding:12px;background:var(--card);border:2px solid var(--ink);border-radius:3px;box-shadow:var(--shadow-sm);transform:rotate(-.8deg)}
.artist-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:2px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font-weight:600}
.artwork-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.artwork-actions .btn{min-height:44px}
.collect-area{margin-top:18px;padding:16px 18px;background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
.collect-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.collect-soon{margin:0 0 10px;font:700 20px var(--hand)}
.collect-hint{margin:10px 0 0;font-size:14px;color:var(--soft)}
.artist-more,.artwork-comments{grid-column:1/-1;padding:18px 0 0;border-top:2px dashed var(--line-soft)}
.related-art{display:flex;gap:16px;overflow:auto;padding:8px 4px 12px}
.related-art a{flex:none;width:150px;color:var(--ink);text-decoration:none;font:700 16px var(--hand)}
.related-art img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--ink);background:var(--card)}
.mhead,.stagecard,.sched,.colrow,.preview,.log,.mrow,.cdown .box,.qty,.slot,.thumbs button,.tool,.canvaswrap,.stat,.bar,.availbar,.profile-card,.post-card,.market-summary{background:var(--card);border-color:var(--ink);color:var(--ink)}
.mhead{border-radius:var(--wob2);box-shadow:var(--shadow-sm);padding:16px 20px}
.mhead h2{font-size:clamp(26px,3vw,36px);margin:0 0 6px}
.mhead img.av{background:var(--paper)}
.mtabs{border-bottom:2px solid var(--ink);gap:6px}
.mtabs button{position:relative;min-height:44px;padding:0 12px;font:700 18px var(--hand);text-transform:capitalize;border:0;margin:0}
.mtabs button.on{border:0}
.mtabs button.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-2px;height:4px;background:var(--accent);border-radius:3px}
.preview{border-radius:3px;box-shadow:var(--shadow-lg);transform:rotate(-.6deg)}
.preview img,.thumbs img,.slot img{background:var(--paper)}
.thumbs button.on{background:var(--note)}
.stagecard{border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
.stagecard h3{font-size:22px}
.stagecard .sm2,.sched .det,.soon{color:var(--muted)}
.availbar i,.bar i{background:repeating-linear-gradient(-45deg,var(--ink) 0 2px,transparent 2px 6px)}
.sched .dot.on{background:var(--sage)}
.slot.minted:after{content:"collected";background:var(--note);border-color:var(--ink)}
.slot.todo{background:repeating-linear-gradient(45deg,var(--card) 0 7px,var(--paper) 7px 14px)}
.qty button{min-height:44px;width:36px;font-size:20px}
.cdown .lbl,.cdown .box small{color:var(--muted)}
.reveal img{background:var(--card)}
.collected-stamp{position:absolute;left:50%;top:44%;z-index:5;padding:6px 18px;border:4px solid var(--accent);border-radius:8px;color:var(--accent);
  font:700 34px/1 var(--hand);letter-spacing:.08em;background:color-mix(in srgb,var(--paper) 70%,transparent);transform:translate(-50%,-50%) rotate(-12deg);
  animation:stamp 600ms ease-out both;pointer-events:none}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.4)}60%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(.92)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
.coin-flip{position:absolute;left:50%;top:30%;z-index:4;width:40px;height:40px;margin-left:-20px;animation:flip 600ms ease-in both}
@keyframes flip{0%{transform:translateY(-80px) rotateY(0)}100%{transform:translateY(0) rotateY(720deg);opacity:0}}
.artwork-media{display:grid;gap:18px;align-content:start;min-width:0}
.replay-player{padding:16px;background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
.replay-title{margin:0 0 10px;font:700 20px var(--hand)}
.replay-stage canvas,.replay-stage img{display:block;width:100%;max-width:520px;aspect-ratio:1;margin:0 auto 12px;background:var(--artboard);border:2px solid var(--ink)}
.replay-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.replay-play{min-width:150px}
.replay-scrub{flex:1 1 160px;min-height:44px;accent-color:var(--accent)}
.replay-speeds{display:flex;gap:6px}
.replay-speeds .chip{min-width:48px;min-height:44px;box-shadow:2px 2px 0 var(--shadow)}
.replay-speeds .chip[aria-pressed=true]{background:var(--note)}
.replay-status{min-height:0;margin:6px 0 0;font-size:14px;color:var(--muted)}
.replay-note{margin:0;font-size:14px;color:var(--muted)}

/* ---------- collections by date ---------- */
.cc-search input{min-width:220px}
.cc-month{margin:22px 0 34px}
.month-label.post-it{display:inline-block;margin:0 0 22px;padding:8px 18px;font:700 22px var(--hand);transform:rotate(-1.5deg)}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:30px 24px}
.cc-card{display:grid;align-content:start;gap:8px;padding:12px 12px 16px;background:var(--card);border:3px solid var(--ink);border-radius:3px;box-shadow:var(--shadow-card);transform:rotate(.8deg)}
.cc-grid>.cc-card:nth-child(2n){transform:rotate(-1deg)}
.cc-cover{display:block;padding:8px 8px 24px;background:var(--polaroid);border:2px solid var(--ink)}
.cc-cover img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:1.5px solid var(--note-ink);background:var(--artboard)}
.cc-copy{min-width:0;display:grid;gap:6px;align-content:start}
.cc-copy h3{margin:0}.cc-copy h3 a{color:var(--ink);text-decoration:none}
.cc-artist,.cc-meta{margin:0;font-size:14px;color:var(--soft);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cc-countdown{margin:0;font:700 16px var(--hand);color:var(--ink)}
.cc-copy .edition{margin:2px 0}
.cc-copy .tok-price{justify-self:start}
.status-pill{justify-self:start;padding:2px 10px;border:2px solid var(--ink);border-radius:999px;font:700 13px var(--sans)}
.status-pill.upcoming{background:var(--note)}.status-pill.live{background:var(--sage)}.status-pill.soldout{background:var(--card-2)}
@media (max-width:899px){
  .cc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .cc-search input{min-width:0;width:100%}
}

/* ---------- cabinet + account menu ---------- */
.cab-head{display:flex;align-items:center;gap:16px;margin:4px 0 20px}
.cab-head h1{margin:0}
.cab-avatar,.menu-avatar{display:inline-grid;place-items:center;flex:none;width:64px;height:64px;border:2px solid var(--ink);border-radius:50%;background:var(--sage);font:700 22px var(--sans);overflow:hidden}
.menu-avatar{width:40px;height:40px;font-size:15px}
.cab-avatar img,.menu-avatar img{width:100%;height:100%;object-fit:cover}
.cabinet{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;align-items:start}
.cab-tabs{display:grid;gap:6px;position:sticky;top:90px}
.cab-tabs a{display:flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid transparent;border-radius:var(--wob2);color:var(--ink);font-weight:700;text-decoration:none}
.cab-tabs a:hover{border-color:var(--line-soft)}
.cab-tabs a[aria-current=page]{background:var(--note);border-color:var(--ink)}
.cab-panel{min-width:0;padding:20px 22px;background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
.cab-panel>h2{margin-top:0}
.cab-panel h3{margin:18px 0 8px}
.cab-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.cab-card{padding:14px 16px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--wob2)}
.cab-card h3{margin:0 0 6px}
.cab-balance{display:flex;align-items:center;gap:8px;margin:4px 0 0;font-size:18px}
.cab-balance b{font:600 32px var(--serif)}
.cab-actions,.cab-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cab-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.cab-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--wob2);flex-wrap:wrap}
.cab-list li>span:first-child,.cab-list li>img+span{display:grid;flex:1;min-width:180px}
.cab-list li small{color:var(--soft)}
.cab-list img{width:52px;height:52px;object-fit:cover;border:1.5px solid var(--ink);background:var(--card)}
.cab-list time{font-size:12px;color:var(--muted)}
.cab-empty{display:grid;justify-items:start;gap:10px;padding:16px 0}
.cab-empty p{margin:0;font:700 19px var(--hand)}
.cab-section{margin-bottom:20px}
.cab-data{margin-top:20px}
.check{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.menu-id{display:flex;align-items:center;gap:10px}
.menu-id span{display:grid}
.menu-id small{font-size:14px;color:var(--soft)}
.copy-mini{min-height:32px!important;padding:0 6px!important;border:1px solid var(--line-soft)!important;border-radius:6px!important;font-size:13px!important;width:auto!important;display:inline-flex!important}
.avatar-menu hr{margin:6px 0;border:0;border-top:2px dashed var(--line-soft)}
.verified-check{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;border:2px solid var(--accent);border-radius:50%;color:var(--accent);font-size:12px;font-weight:700}
.save-status{position:fixed;left:16px;bottom:16px;z-index:var(--z-popover);padding:6px 12px;background:var(--card);border:2px solid var(--ink);border-radius:999px;font:700 14px var(--hand)}
.save-status:empty{display:none}
.toast-action{margin-left:10px;min-height:36px;padding:2px 12px;border:2px solid var(--paper);border-radius:8px;background:transparent;color:var(--paper);font:700 15px var(--sans)}
@media (max-width:899px){
  .cabinet{grid-template-columns:1fr}
  .cab-tabs{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:thin}
  .cab-tabs a{flex:none}
  .cab-panel{padding:16px 14px}
  .save-status{top:70px;bottom:auto;left:auto;right:12px}
}

/* ---------- market ---------- */
.big-search{position:relative;margin:0 0 26px}
.big-search input{width:100%;min-height:58px;padding:12px 18px;font-size:20px;border:3px solid var(--ink);border-radius:var(--wob2);background:var(--card);box-shadow:var(--shadow-sm)}
.suggest{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
.suggest li{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 8px;border-radius:8px;cursor:pointer}
.suggest li[aria-selected=true],.suggest li:hover{background:var(--note)}
.suggest li img{width:40px;height:40px;object-fit:cover;border:1.5px solid var(--ink)}
.suggest li span{display:grid}.suggest li small{color:var(--soft)}
.suggest .no-match{color:var(--soft);cursor:default}
.demo-tag{display:inline-block;margin-top:8px;padding:3px 10px;border:2px dashed var(--ink);border-radius:8px;font:700 14px var(--hand)}
.table-wrap{overflow-x:auto;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);box-shadow:var(--shadow-sm)}
.trend-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.trend-table th,.trend-table td{padding:10px 12px;text-align:left;border-bottom:1.5px dashed var(--line-soft);white-space:nowrap}
.trend-table thead th{font:700 15px var(--hand);color:var(--soft)}
.trend-table th a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:700;text-decoration:none;min-height:44px}
.trend-table img{width:36px;height:36px;object-fit:cover;border:1.5px solid var(--ink)}
.trend-table small{color:var(--soft)}
.up{color:var(--muted);font-weight:700}.down{color:var(--accent);font-weight:700}
.market-columns{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.feed{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.feed li{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2)}
.feed li img{width:48px;height:48px;object-fit:cover;border:1.5px solid var(--ink);background:var(--paper)}
.feed li span{display:grid;flex:1;min-width:0}.feed li small{color:var(--soft);overflow-wrap:anywhere}
.feed time{font-size:12px;color:var(--muted);white-space:nowrap}
.trade-stats{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.trade-stats .stat small{display:block}
.trade-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0}
.trade-controls .check{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.trade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:18px}
.trade-item{display:grid;gap:6px;align-content:start;padding:10px;background:var(--card);border:2px solid var(--ink);border-radius:4px;box-shadow:3px 3px 0 var(--shadow)}
.trade-item img{width:100%;aspect-ratio:1;object-fit:cover;border:1.5px solid var(--line-soft);background:var(--paper)}
.trade-item h3,.trade-item p{margin:0}
.item-actions{display:flex;flex-wrap:wrap;gap:6px}
.about-trade{max-width:680px}
.header-search{position:relative;width:auto!important;height:auto;padding:0;border:0;background:none}
.search-pop{position:absolute;right:0;top:calc(100% + 12px);width:min(420px,calc(100vw - 32px));z-index:var(--z-popover);display:grid;gap:8px;padding:12px;background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-lg)}
.top .search-pop input{width:100%;min-height:48px;padding:10px 14px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--paper);color:var(--ink);font:16px var(--sans);box-shadow:none}
.search-results{display:grid;gap:2px;max-height:min(60vh,440px);overflow:auto}
.search-results a{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 8px;border-radius:10px;color:var(--ink);text-decoration:none}
.search-results a[aria-selected=true],.search-results a:hover{background:var(--note);color:var(--note-ink)}
.search-results a[aria-selected=true] small,.search-results a:hover small{color:var(--note-ink)}
.search-results img,.search-initials{flex:none;width:40px;height:40px;object-fit:cover;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper)}
.search-initials{display:grid;place-items:center;border-radius:50%;font:700 14px var(--sans)}
.search-results a span{display:grid;min-width:0}.search-results b{overflow:hidden;text-overflow:ellipsis}
.search-results small{color:var(--soft);font-size:14px}
.search-group{margin:6px 8px 2px;font:700 15px var(--hand);color:var(--soft)}
.search-empty,.search-hint{margin:6px 8px;color:var(--soft);font-size:15px}
@media (max-width:899px){.market-columns{grid-template-columns:1fr}}

/* ---------- swap ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num,.swap-out,#swapPay,.confirm-list dd,.tok-price,.fsp-chip b{font-variant-numeric:tabular-nums}
.swap-page{max-width:640px;margin:0 auto}
.swap-page .page-heading{align-items:center}
.swap-demo-note{flex:none;font-size:16px;white-space:nowrap;transform:rotate(3deg)}
.swap-need{margin:0 0 18px;padding:10px 14px;border:2px dashed var(--ink);border-radius:var(--wob2);background:var(--card)}
.swap-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:26px 24px 22px;background:var(--card);border:3px solid var(--ink);border-radius:6px;box-shadow:var(--shadow-lg)}
.swap-title{margin:0 0 4px;font-size:26px}
.swap-field{padding:10px 2px 12px;background:none;border:0;border-bottom:2px dashed var(--line-soft);border-radius:0}
.swap-field label,.swap-label{display:block;font:700 15px var(--hand);color:var(--soft)}
.swap-input-row{display:flex;align-items:center;gap:10px}
.swap-field{min-width:0}
#swapPay,.swap-out{flex:1;width:100%;min-width:0;min-height:48px;padding:0;border:0;background:transparent;font:600 30px/1.2 var(--serif);color:var(--ink);outline-offset:4px}
.token-pill{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--card);font-weight:700;white-space:nowrap}
.tether{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#26A17B;color:var(--on-accent);font:700 13px/1 var(--sans);font-style:normal}
.swap-balance{margin:6px 0 0;font-size:14px;color:var(--soft)}
.swap-balance .text-link{min-height:32px}
.flip-btn{justify-self:center;width:48px;height:48px;margin:-22px 0;z-index:2;border:2px solid var(--ink);border-radius:50%;background:var(--note);font:700 22px/1 var(--sans);box-shadow:2px 2px 0 var(--shadow);transition:transform 250ms}
.flip-btn:hover{transform:rotate(180deg)}
.swap-details{padding:12px 2px 0;border:0;border-top:2px dashed var(--ink);background:none}
.swap-details dl,.confirm-list{display:grid;gap:6px;margin:0}
.swap-details dl>div,.confirm-list>div{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.swap-details dt,.confirm-list dt{color:var(--soft);font-size:15px}
.swap-details dd,.confirm-list dd{margin:0;font-weight:700;text-align:right}
.slippage{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.slippage .chip{min-height:36px;padding:4px 10px;box-shadow:2px 2px 0 var(--shadow)}
.slippage .chip[aria-pressed=true]{background:var(--note)}
.slip-custom{display:inline-flex;align-items:center;gap:2px;font-weight:600}
.slip-custom input{width:84px;min-height:36px;padding:4px 8px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);color:var(--ink);font:600 15px var(--sans)}
.slip-confirm{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;margin-top:8px;padding:10px 12px;text-align:left;background:var(--note);color:var(--note-ink);border:2px solid var(--ink);border-radius:var(--wob2)}
.slip-confirm p{margin:0;font-size:15px;color:var(--note-ink)}
.slip-confirm[hidden]{display:none}
.swap-field-error{margin:4px 0 0;color:var(--accent);font-weight:700;font-size:15px}
.swap-field-error:empty{display:none}
.impact-high,.warn-text{color:var(--accent);font-weight:700}
.warn-text{display:block;font-size:14px}
.quote-timer{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;color:var(--soft)}
.quote-timer svg{width:22px;height:22px;transform:rotate(-90deg)}
.quote-timer circle{fill:none;stroke-width:4}
.quote-timer circle:first-child{stroke:var(--line-soft)}
#quoteRing{stroke:var(--accent);stroke-dasharray:94.25;transition:stroke-dashoffset 250ms linear}
.swap-btn{width:100%;min-height:52px;font-size:18px}
.swap-error{min-height:0;margin:0;color:var(--accent);font-weight:700}
.safety{margin:18px 0 4px;font-weight:700}
.risk{margin:0 0 14px;color:var(--soft)}
.about-tokens{padding:12px 16px;background:var(--card);border:2px dashed var(--ink);border-radius:var(--wob2)}
.about-tokens summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:700 18px var(--hand)}
.mint-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.mint-row code{font-size:13px;word-break:break-all;background:var(--paper);padding:4px 6px;border-radius:4px}
.wallet-btn.connected{background:var(--card)}
.sol-dot{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;background:linear-gradient(135deg,#9945FF,#14F195)}
.wallet-veil{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:16px;background:var(--overlay)}
.wallet-sheet{position:relative;width:min(440px,100%);padding:26px 22px 20px;background:var(--paper);border:3px solid var(--ink);border-radius:var(--wob1);box-shadow:var(--shadow-lg)}
.wallet-sheet h2{margin:0 0 6px}
.wallet-list{display:grid;gap:10px;margin:16px 0}
.wallet-option{justify-content:space-between;width:100%}
.wallet-option small{font-weight:500;color:var(--soft)}
.wallet-status{font-size:15px;line-height:1.4;color:var(--ink)}
.wallet-missing{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;min-height:52px;padding:6px 8px 6px 16px;border:2px dashed var(--line-soft);border-radius:var(--wob2);font-weight:600}
.wallet-missing small{color:var(--soft);font-weight:500}
.menu-head{display:block;padding:8px 12px;border-bottom:2px dashed var(--line-soft);font-size:14px;color:var(--soft)}
@media (max-width:899px){
  .wallet-btn{display:none}
  .swap-page{max-width:none}
  .swap-card{padding:22px 14px 16px}
  .swap-action{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));z-index:5;padding:8px 0 0;background:var(--card)}
  .wallet-veil{place-items:end stretch;padding:0}
  .wallet-sheet{width:100%;border-radius:18px 18px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* ---------- artists page ---------- */
.artists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:26px;padding-top:12px}
.artist-card{position:relative;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:18px;background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none;transition:transform 150ms}
.artist-card:hover{transform:translateY(-4px) rotate(-.5deg)}
.artist-card .pfp{width:64px;height:64px;border:2px solid var(--ink);border-radius:50%;background:var(--note);display:grid;place-items:center;overflow:hidden;font:700 26px var(--hand)}
.artist-card .pfp img{width:100%;height:100%;object-fit:cover}
.artist-card h3{margin:0}
.artist-card p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.apply-card{margin-top:34px;padding:22px 24px;background:var(--note);border:3px solid var(--ink);border-radius:var(--wob1);box-shadow:var(--shadow-sm);transform:rotate(-.4deg)}
.apply-card h2{margin-top:0}

/* ---------- 404 ---------- */
.notfound{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:40px;align-items:center;max-width:860px;margin:32px auto;padding:36px 40px;background:var(--card);border:3px solid var(--ink);border-radius:var(--wob-card);box-shadow:var(--shadow-card)}
.notfound-cat{margin:0;padding:12px 12px 0;background:var(--polaroid);border:3px solid var(--ink);transform:rotate(-2deg)}
.notfound-cat img{display:block;width:100%;height:auto;border:2px solid var(--note-ink)}
.notfound-cat figcaption{padding:10px 0 12px;text-align:center;font:italic 600 14px var(--serif);color:var(--note-ink)}
.notfound-copy h1{margin:14px 0 10px}
.notfound-copy p{max-width:46ch;color:var(--soft)}
.notfound .cab-actions{margin-top:18px;gap:12px}
@media (max-width:640px){.notfound{grid-template-columns:1fr;gap:24px;padding:24px 20px}.notfound-cat{max-width:200px;justify-self:center}}

/* ---------- about ---------- */
.about-window{display:grid;grid-template-columns:260px 1fr;gap:36px;max-width:1040px;margin:12px auto;padding:8px 0}
.about-figure{margin:0;padding:12px;background:var(--paper);border:2px solid var(--ink);transform:rotate(-2deg);align-self:start}
.about-figure img{display:block;width:100%}
.about-copy h1{margin:0 0 48px;line-height:1.25}
/* Room for the hand-drawn circle around "Good people." so it never touches the paragraph. */
.about-copy h1 .scribble{display:inline-block;padding:.08em .2em .12em}
.about-copy p{color:var(--ink);max-width:68ch}
.about-note{margin:18px 0;padding:16px 18px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--paper)}
.about-note.post-it{border:2px solid var(--ink);background:var(--note)}
.about-note ul{margin:8px 0 0;padding-left:20px;font-family:var(--sans)}
.about-note li{margin:4px 0}
.about-steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.about-steps article{padding:16px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--wob2)}
.about-steps article>b{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:var(--note);font:700 20px var(--hand)}
.about-steps h2{margin:10px 0 4px;font-size:22px}
.about-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- profile / creator / studio ---------- */
.profile-card,.post-card{border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
.profile-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0;border:0}
.profile-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);color:var(--ink);text-decoration:none;font-weight:600}
.profile-tabs a[aria-current=page],.profile-tabs a.active{background:var(--ink);color:var(--paper)}
.avatar{background:var(--note);border-color:var(--ink)}
.shelf-title{display:flex;align-items:center;gap:10px}
.shelf{position:relative;padding:18px 18px 16px;background:linear-gradient(var(--ink),var(--ink)) bottom/100% 10px no-repeat}

/* ---------- public collection page ---------- */
.public-collection-hero{border:3px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm);transform:rotate(-.3deg)}
.public-collection-copy h1{font-family:var(--serif);color:var(--ink)}
.public-gallery,.collection-journal{border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
.collection-section-title{font:700 20px var(--hand)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}
.public-art{border:2px solid var(--ink);border-radius:3px;box-shadow:3px 3px 0 var(--shadow)}
.public-collection-stats span{border:2px solid var(--ink);border-radius:var(--wob2);background:var(--card);color:var(--ink)}

.preview-stamp{background:var(--note);border:2px solid var(--ink);color:var(--ink);font:700 13px var(--hand)}

/* ---------- editor ---------- */
.editor-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.editor-status{font:700 16px var(--hand);color:var(--muted)}
.paint{align-items:flex-start}
.canvaswrap{border-radius:3px;box-shadow:var(--shadow-lg);height:auto;line-height:0}
.canvaswrap canvas#pcv{background:var(--artboard)}
.tool{width:46px;height:46px;border-radius:var(--wob2)}
.tool svg{stroke:var(--ink)!important}
.tool.on{background:var(--note);box-shadow:3px 3px 0 var(--shadow)}
.pal{grid-template-columns:repeat(6,1fr);gap:8px}
.pal button{border-radius:48% 52% 45% 55%/55% 45% 52% 48%;box-shadow:inset -3px -3px 0 var(--shadow)}
.pal button.on{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--shadow)}
.toolnote{color:var(--muted)}
.rec-dot{display:inline-flex;align-items:center;gap:6px;font:700 14px var(--hand);color:var(--accent)}
.rec-dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
@keyframes blink{50%{opacity:.25}}


/* ---------- single drawing page + colour picker ---------- */
.draw-page{max-width:1020px;margin:0 auto}
.draw-theme{display:inline-block;margin:0 0 16px;font-size:18px;transform:rotate(-1deg)}
.draw-actions{margin-top:18px}
.saved-note{font:700 17px var(--hand);color:var(--ink)}
.editor-status{font:700 15px var(--hand);color:var(--soft)}
.tools{position:relative}
.swatch-row{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:44px;height:44px;padding:0;border:2px solid var(--ink);border-radius:48% 52% 45% 55%/55% 45% 52% 48%;box-shadow:inset -3px -3px 0 var(--shadow);cursor:pointer}
.swatch.on{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--shadow)}
.add-swatch{display:grid;place-items:center;background:var(--card);font:700 24px/1 var(--sans);color:var(--ink);border-style:dashed}
.swatch-label{margin:10px 0 4px;font:700 15px var(--hand);color:var(--soft)}
.swatch-hint{margin:4px 0 0;font-size:12px;color:var(--muted)}
.pal{display:block}
canvas.picking{cursor:crosshair;outline:3px dashed var(--accent);outline-offset:3px}
.colour-picker{position:absolute;z-index:var(--z-popover);top:0;left:0;width:min(320px,100%);display:grid;gap:10px;padding:16px;background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-lg)}
.cp-head{display:flex;justify-content:space-between;align-items:center;font:700 19px var(--hand)}
.cp-sv{position:relative;height:170px;border:2px solid var(--ink);border-radius:6px;touch-action:none;cursor:crosshair}
.cp-thumb{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 2px black;pointer-events:none}
.cp-field{display:grid;gap:2px;font:700 15px var(--hand)}
.cp-field input[type=range]{width:100%;min-height:32px;touch-action:none}
.cp-hue{appearance:none;height:16px;min-height:16px!important;border:2px solid var(--ink);border-radius:8px;background:linear-gradient(90deg,red,yellow,lime,cyan,blue,magenta,red)} /* exception: the hue scale must show real hues */
.cp-hue::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border:3px solid var(--ink);border-radius:50%;background:var(--card)}
.cp-alpha-out{font:600 14px var(--sans);color:var(--soft)}
.cp-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.cp-hex-label{font:700 15px var(--hand)}
.cp-hex{min-width:0;font:600 16px ui-monospace,Menlo,monospace!important;text-transform:uppercase}
.cp-error{min-height:18px;margin:-4px 0 0;font-size:14px;color:var(--accent)}
.cp-preview{display:flex;align-items:center;gap:0}
.cp-new,.cp-old{width:64px;height:40px;border:2px solid var(--ink)}
.cp-new{border-radius:8px 0 0 8px}.cp-old{border-radius:0 8px 8px 0;border-left:0}
.cp-preview small{margin-left:10px;color:var(--muted)}
.cp-actions{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:899px){
  .colour-picker{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-height:86dvh;overflow:auto;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));z-index:calc(var(--z-modal) + 1)}
}

/* ---------- footer ---------- */
.site-footer{display:block!important;margin-top:0;background:var(--paper);padding:0 0 calc(30px + env(safe-area-inset-bottom));color:var(--ink)}
.footer-engraving{display:block;width:100%;height:48px}
.footer-engraving path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.footer-engraving .rover{fill:var(--paper);stroke:var(--ink);stroke-width:1.6;animation:rover 22s linear infinite}
@keyframes rover{from{transform:translate(-40px,6px)}to{transform:translate(1240px,-4px)}}
.footer-inner{display:grid;grid-template-columns:auto 1fr auto;gap:8px 24px;align-items:center;max-width:1240px;margin:0 auto;padding:18px 16px 0;border-top:2px solid var(--ink)}
.footer-brand{font-size:24px}
.footer-motto{margin:0;font:italic 600 16px var(--serif);color:var(--soft)}
.footer-links{display:flex;gap:4px 14px;flex-wrap:wrap}
.footer-links a{color:var(--ink);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.footer-links a:hover{color:var(--accent)}
.footer-socials{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
.footer-legal{grid-column:1/-1;margin:0;font-size:14px;color:var(--soft)}

/* ---------- mobile bar ---------- */
.mobile-taskbar{display:none}

/* ---------- logo draw-in on first visit ---------- */
body.first-visit .brand-planet .draw{stroke-dasharray:160;stroke-dashoffset:160;animation:draw 1.2s ease-out forwards}
body.first-visit .brand-planet .dot{transform-origin:51px 13px;animation:pop 400ms 1s both}
body.first-visit .brand-word{animation:fade 600ms 600ms both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- responsive ---------- */
@media (max-width:520px){.scribble{white-space:normal}.scribble svg{display:none}.scribble{text-decoration:underline 4px var(--accent);text-underline-offset:6px;text-decoration-skip-ink:none}}
@media (max-width:1100px){
  .home-columns{grid-template-columns:1fr}
}
/* Between the phone layout and 1200 px the full header row does not fit: keep the planet, hide the word visually. */
@media (min-width:900px) and (max-width:1199px){
  .top .brand-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:900px) and (max-width:1023px){
  .top{gap:10px}.top .right{gap:6px}.topnav a{padding:0 6px}
  .fsp-chip{padding:0 10px}.fsp-chip-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body:not(.signed-in) .fsp-chip{width:44px;padding:0;justify-content:center}
  body:not(.signed-in) .fsp-chip .fsp-chip-get{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:899px){
  :root{--header-h:60px}
  .top{gap:10px;min-height:60px;padding:8px 12px}
  .brand{font-size:23px}.brand-planet{width:36px;height:36px}
  .topnav{display:none}
  .menu-toggle{display:inline-flex!important}
  .nav-create{display:none!important}
  .nav-open .topnav{position:absolute;left:0;right:0;top:100%;display:grid;gap:0;padding:8px 12px 14px;background:var(--paper);border-bottom:2px solid var(--ink);box-shadow:0 6px 0 var(--line-soft)}
  .nav-open .topnav a{min-height:48px;font-size:18px}
  .nav-open .mobile-theme-toggle{display:inline-flex!important;justify-self:start;min-height:44px;padding:0 10px;font-weight:600}
  .fsp-chip{padding:0 10px;gap:5px;font-size:15px}.fsp-chip-label{font-size:13px}
  .hero{grid-template-columns:1fr;gap:30px}
  .hero-frame{max-width:340px;margin:0 auto}
  .hero-note{right:-6px}
  .featured-content{grid-template-columns:minmax(0,1fr);padding:4px 48px}
  .featured-image-button{max-width:300px;justify-self:center}
  .featured-image-button img{height:auto}
  .daily-card{grid-template-columns:auto 1fr;padding:18px}
  .daily-card .btn{grid-column:1/-1;justify-self:start}
  .artwork-detail,.mgrid{grid-template-columns:1fr}
  .about-window{grid-template-columns:1fr;padding:20px}
  .about-figure{max-width:200px}
  .about-steps{grid-template-columns:1fr}
  .tokens-head{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .main{padding:20px 16px calc(96px + env(safe-area-inset-bottom))}
  .mobile-taskbar{position:fixed;z-index:var(--z-header);left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;height:66px;
    padding:4px 8px calc(4px + env(safe-area-inset-bottom));background:var(--paper);border-top:2px solid var(--ink)}
  .mobile-taskbar a{display:grid;justify-items:center;align-content:center;gap:0;min-height:52px;color:var(--ink);text-decoration:none;font-size:20px}
  .mobile-taskbar span{font:600 12px var(--sans)}
  .mobile-taskbar .mobile-create{align-self:start;margin-top:-18px;min-height:58px;background:var(--accent);color:var(--on-accent);border:3px solid var(--ink);border-radius:var(--wob1);box-shadow:3px 3px 0 var(--shadow)}
  .mobile-taskbar .mobile-create span{color:var(--on-accent)}
  .site-footer{padding-bottom:90px}
  .veil.open{align-items:flex-end;padding:0}
  .sheet{max-height:92dvh;overflow:auto;border-radius:18px 18px 0 0;padding:20px 16px}
  .route-window{padding:18px 14px 20px}
  .route-window .sheetfoot{position:sticky;bottom:70px;background:var(--card);padding:10px 0;z-index:3}
  .avatar-menu{top:66px;right:8px}
}
@media (max-width:520px){
  .grid,.catalog-grid,.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .art-name{font-size:17px}
  .art-card-bottom{top:16px;right:16px}
  .favorite-button{width:44px;height:44px}
  .hero-copy h1{font-size:40px}
  .btn{padding:9px 16px}
  #topSignIn{padding:6px 12px}
  /* The theme switch moves into the ☰ menu so the header fits a 360-390 px phone */
  .top #theme-toggle{display:none}
  .two{grid-template-columns:1fr}
  .featured-content{padding:4px 0 0}
  .carousel-arrow{display:none}
  .packs{grid-template-columns:1fr 1fr;gap:14px}
  .collection-card-meta{flex-direction:column;align-items:flex-start}
  .tok-price{white-space:normal;flex-wrap:wrap;font-size:14px;padding:3px 10px}
  .tok-price small{font-size:12px}
}

/* ---------- reduced motion: fades only ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-property:opacity,background-color,color!important;scroll-behavior:auto!important}
  .footer-engraving .rover{animation:none}
  .card,.art-card,.collection-card,.grid>*,.catalog-grid>*,.btn:hover,.btn:active{transform:none!important}
  .main>section[style*="display: block"]{animation:fade 200ms both!important}
}
.buy-btn{font-weight:700}

/* ---------- tap targets: at least 44 x 44 ---------- */
.brand{min-height:44px}
.footer-brand,.footer-links a{min-height:48px;min-width:44px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center}
.art-name{min-height:44px;display:flex;align-items:center}
.cc-copy h3 a{display:inline-flex;align-items:center;min-height:44px}
.swap-balance .text-link{min-height:44px;min-width:44px}
.slippage .chip,.slip-custom input{min-height:44px}
#pw{min-height:44px}
.home-journal summary{min-height:44px}
.menu-toggle{min-width:44px!important;padding:0!important}
.mobile-only{display:none!important}
@media (max-width:899px){
  .top{gap:8px}
  .top .right{gap:6px}
  /* Phones open search from the ☰ menu; the popover spans the screen under the header. */
  .top .header-search .search-toggle{display:none}
  .top .header-search{position:static}
  .top .search-pop{position:fixed;left:16px;right:16px;top:70px;width:auto}
  .brand{font-size:21px;gap:6px}.brand-planet{width:32px;height:32px}
  .nav-open .mobile-only{display:inline-flex!important;justify-self:start;min-height:48px;align-items:center;font-weight:600}
}

.artist-card .artist-name{margin:0;font:700 21px/1.2 var(--hand)}

/* =====================================================================
   Theme kit components (12 Oct 2026): header, hero, polaroids, band,
   cards, tickets. Colours only from tokens.css.
   ===================================================================== */
/* Stacking (tokens in tokens.css): the page wrappers sit at 0, so nothing inside them,
   however it is rotated, taped or shadowed, can rise above the sticky header (100).
   Menus and popovers (200) and dialogs, sheets and toasts (300) clear the header. */
main.main,.shell,.site-footer{position:relative;z-index:0}
.top{position:sticky;top:env(safe-area-inset-top,0px);isolation:isolate;background:var(--card);backdrop-filter:none;border-bottom:2px solid var(--ink);box-shadow:none}
/* The notch strip above the stuck header is painted too, so nothing shows through it. */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:calc(var(--z-header) + 1);background:var(--card);pointer-events:none}
/* Anchor links land just below the header */
html{scroll-padding-top:calc(var(--header-h) + 8px)}
.topnav a{font:600 15px var(--nav);white-space:nowrap}
.top .right>*{white-space:nowrap}
.fsp-chip{border:2px solid var(--ink);border-radius:999px;background:var(--card)}
.fsp-chip .coin{width:14px;height:14px;border-width:1.5px}
.fsp-chip .coin::after{display:none}
.wallet-btn{background:transparent;box-shadow:none}
.wallet-btn:hover{box-shadow:var(--shadow-sm)}
#theme-toggle{font-size:18px}

/* Post-it surfaces: dark text in both themes; a red button on a post-it keeps the light red. */
.sticker,.eyebrow,.featured-label,.post-it,.tape-label,.window-titlebar,.daily-card,.daily-card *,.steps span.on,.chip.on,.tabs button.on,.btn.yellow,
.thumbs button.on,.badge.soon,.status-pill.upcoming,.cab-tabs a[aria-current=page],
.suggest li[aria-selected=true],.suggest li:hover,.pack[aria-pressed=true],.replay-speeds .chip[aria-pressed=true],.slippage .chip[aria-pressed=true],.flip-btn,
.about-note.post-it,.about-note.post-it *,.apply-card,.apply-card h2,.apply-card p,.steps-list li>b,.hero-note,.coming-card .post-it,.trade-controls .chip[aria-pressed=true],
.cab-tabs a[aria-current=page],.slot.minted:after,.swap-demo-note,.draw-theme,.draw-theme b,.mhead .badge.soon{color:var(--note-ink)}
.steps-list li>b,.avatar-btn,.cab-avatar,.menu-avatar,.status-pill.live{color:var(--on-sage)}
.daily-card .btn.primary,.post-it .btn.primary,.apply-card .btn.primary,.coming-card .post-it .btn.primary{background:var(--note-accent);color:var(--note-on-accent);border-color:var(--note-ink);box-shadow:4px 4px 0 var(--note-ink)}
.daily-card .btn.primary:hover,.apply-card .btn.primary:hover{background:var(--note-accent)}
.apply-card .btn,.daily-card .btn{border-color:var(--note-ink)}
.post-it{border:2px solid var(--ink)}
.tape-label,.window-titlebar{background:var(--note)!important;border:2px solid var(--ink)!important;transform:rotate(-2deg)}

/* Hero */
.hero-sticker{transform:rotate(-2deg);font-size:15px}
.hero-copy h1{font-size:clamp(40px,4.6vw,64px);line-height:1.04;letter-spacing:-.02em}
@media (min-width:1100px){.hero-copy h1{font-size:clamp(56px,4.4vw,64px)}}
.hero-copy p{color:var(--soft)}

/* Polaroid frames for artwork */
.hero-frame,.artwork-large,.featured-image-button,.art-open,.related-art a,.trade-item>img,.shelf .art-card>img{
  background:var(--polaroid);border:3px solid var(--ink);box-shadow:var(--shadow-plate)}
.hero-frame{padding:14px 14px 0;border-radius:4px;transform:rotate(1.5deg)}
.hero-frame img{border:2px solid var(--note-ink);background:var(--polaroid)}
.hero-frame figcaption{margin:0;padding:12px 0 16px;font:italic 600 15px var(--serif);color:var(--note-ink)}
.hero-frame.taped::before{top:-14px}
.featured-image-button{padding:10px 10px 34px;border-radius:3px}
.featured-image-button img{border:2px solid var(--note-ink)}
.art-open{padding:8px 8px 26px;border-width:2px;box-shadow:none;border-radius:2px}
.art-open img{border:1.5px solid var(--note-ink)}
.artwork-media{position:relative}
.artwork-large{padding:14px 14px 48px;border-radius:3px;transform:rotate(-1.5deg);max-height:none}
.artwork-detail .artwork-large+#artReplay{margin-top:10px}
.related-art a{position:relative;padding:6px 6px 22px;border-width:2px;box-shadow:4px 4px 0 var(--shadow);color:var(--note-ink);transform:rotate(-1.5deg)}
.related-art a:nth-child(2n){transform:rotate(1.5deg)}
.related-art a::before{content:"";position:absolute;top:-10px;left:50%;width:50px;height:16px;margin-left:-25px;background:var(--tape);transform:rotate(-4deg)}
.related-art a span{display:block;margin-top:4px;font:italic 600 13px var(--serif);color:var(--note-ink)}
.trade-item>img{padding:6px 6px 18px;border-width:2px;box-shadow:none}

/* Today's theme band */
.daily-card{background:var(--note);border:3px solid var(--ink);border-radius:15px 225px 15px 255px/255px 15px 225px 15px;box-shadow:var(--shadow-card);transform:none}
.daily-card .daily-date{padding:6px 12px;border:0;outline:2px dashed var(--note-ink);outline-offset:0;border-radius:10px;background:transparent}
.daily-card h2{font-family:var(--serif)}

/* Cards */
.featured-window,.how-it-works,.coming-card-wrap,.cab-panel,.collect-area,.replay-player,.os-dialog,.route-window,.public-gallery,.collection-journal,.mhead,.stagecard{
  background:var(--card);border:3px solid var(--ink);border-radius:var(--wob-card);box-shadow:var(--shadow-card)}
.featured-window>.tape-label,.how-it-works>.tape-label{position:absolute!important;top:-14px;left:18px;margin:0!important}
.featured-window,.how-it-works{padding-top:34px}
.steps-list li>b{background:var(--sage)}
.card,.art-card,.collection-card{border-width:3px;border-radius:var(--wob-card);box-shadow:var(--shadow-card);background:var(--card)}
.card:hover,.art-card:hover,.collection-card:hover,.grid>:hover,.catalog-grid>:hover,.profile-grid>:hover{box-shadow:8px 10px 0 var(--shadow)}

/* Swap ticket: a gold coin doodle by the title */
.swap-card{border-radius:6px;overflow:visible}
.swap-card .swap-title::after{content:"";display:inline-block;width:22px;height:22px;margin-left:10px;vertical-align:-2px;border-radius:50%;border:2px solid var(--ink);background:radial-gradient(circle at 35% 35%,var(--note) 0 30%,var(--gold) 31%)}

/* Drawing page: labelled tools left, canvas centre, colours and actions right */
.paint.paint-3col{display:grid;grid-template-columns:180px minmax(0,560px) minmax(200px,1fr);gap:18px;align-items:start}
.paint-3col .canvaswrap{grid-column:2;grid-row:1;width:100%;max-width:560px}
.paint-3col .tool-column{grid-column:1;grid-row:1}
.paint-3col .tools{grid-column:3;grid-row:1}
.paint-sheet{display:contents}
.paint-sheet-head,.paint-mbar,.paint-scrim{display:none}
.history-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tool-column .history-pair .btn{min-width:0;padding:6px 6px;justify-content:center;gap:4px}
.clear-confirm{display:grid;gap:8px;padding:10px 12px;background:var(--note);color:var(--note-ink);border:2px solid var(--ink);border-radius:var(--wob2)}
.clear-confirm p{margin:0;font-size:15px;color:var(--note-ink)}
.clear-confirm[hidden]{display:none}
.sign-in-save{flex-basis:100%;margin:0 0 4px;font-size:16px}
.tool-column{display:grid;gap:8px}
.tool-column .tool,.tool-column .btn{width:100%;height:auto;min-height:44px;justify-content:flex-start;gap:10px;padding:6px 12px;border-radius:var(--wob2);font:600 15px var(--sans)}
.tool-column .tool svg{flex:none}
.tool-column .tool.on{background:var(--note);color:var(--note-ink)}
.paint-3col .tools{gap:12px}
.paint-3col .draw-status{font:700 15px var(--hand);color:var(--soft)}
@media (max-width:899px){
  .paint.paint-3col{grid-template-columns:minmax(0,1fr);gap:10px}
  .paint-3col .canvaswrap{grid-column:1;grid-row:2;max-width:none}
  /* A compact bar pinned above the canvas, under the sticky header. */
  .paint-mbar{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:6px;grid-row:1;position:sticky;top:64px;z-index:20;padding:6px;background:var(--card);border:2px solid var(--ink);border-radius:var(--wob2);box-shadow:var(--shadow-sm)}
  .mbar-btn{display:grid;place-items:center;min-height:44px;border:2px solid var(--ink);border-radius:12px;background:var(--card);color:var(--ink)}
  .mbar-tool svg{width:22px;height:22px}
  .mbar-dot{width:24px;height:24px;border:2px solid var(--ink);border-radius:50%}
  .mbar-size{display:grid;place-items:center;width:30px;height:30px}
  .mbar-size i{display:block;border-radius:50%;background:var(--ink)}
  /* Everything else opens in a bottom sheet above the tab bar. */
  .paint-sheet{display:none}
  .paint-sheet.open{display:grid;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-modal) + 1);max-height:78dvh;overflow:auto;padding:12px 16px calc(18px + env(safe-area-inset-bottom));background:var(--card);border-top:3px solid var(--ink);border-radius:18px 18px 0 0;box-shadow:0 -6px 0 var(--line-soft)}
  .paint-sheet .tool-column,.paint-sheet .tools{grid-column:auto;grid-row:auto}
  .paint-sheet .tool-column{grid-template-columns:repeat(2,minmax(0,1fr))}
  .paint-sheet .tool-column .history-pair,.paint-sheet .tool-column .clear-confirm{grid-column:1/-1}
  .paint-sheet-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-12px;z-index:1;margin:-12px -16px 0;padding:10px 16px;background:var(--card);border-bottom:2px dashed var(--line-soft);font:700 18px var(--hand)}
  .paint-scrim.open{display:block;position:fixed;inset:0;z-index:var(--z-modal);background:var(--overlay)}
  .tool-column .tool span,.tool-column .btn{white-space:nowrap}
  .draw-page .draw-status{display:block;margin-top:10px}
  .draw-page .draw-actions{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:12px}
}

/* Mobile: round raised Draw button; sticky collect bar on artwork pages */
@media (max-width:899px){
  .mobile-taskbar .mobile-create{width:64px;height:64px;min-height:0;justify-self:center;margin-top:-26px;padding:0;border-radius:50%;display:grid;place-items:center;align-content:center;box-shadow:4px 4px 0 var(--shadow)}
  .collect-sticky{position:fixed;left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom));z-index:50;display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--card);border-top:2px solid var(--ink)}
  .collect-sticky .btn.primary{flex:1;justify-content:center;white-space:nowrap}
  body[data-route^="/art/"] .site-footer{padding-bottom:160px}
}
@media (min-width:900px){.collect-sticky{display:none}}
.art-stamp{margin-left:10px;font-size:15px;transform:rotate(-8deg)}
/* Post-it text stays dark even where older rules set --ink with higher specificity. */
.daily-card :is(p,h2,h3,span,b,small,div),.post-it :is(p,b,span,li,ul),.about-note.post-it :is(p,b,li){color:var(--note-ink)}
.tape-label,.window-titlebar,.tape-label *{color:var(--note-ink)!important}
.plate-wrap{position:relative}
.washi{position:absolute;z-index:3;width:96px;height:26px;background:var(--tape);pointer-events:none}
.washi.tl{top:-4px;left:-20px;transform:rotate(-38deg)}
.washi.br{bottom:4px;right:-20px;transform:rotate(-38deg)}
.tool-column .tool.on,.tool-column .tool.on span{color:var(--note-ink)}
.tool-column .tool.on svg{stroke:var(--note-ink)!important}
.avatar{color:var(--note-ink)}
.artist-card .pfp,.apply-card :is(label,p,h2,span,small),.about-steps article>b,.save-recovery,.save-recovery :is(h2,p),.pink-avatar,.yellow-avatar{color:var(--note-ink)}

/* Step 2 of a new collection: start the base from a blank page or a saved drawing. */
.base-pick{display:flex;gap:10px;align-items:center;overflow-x:auto;padding:4px 2px 12px;margin-bottom:6px}
.base-pick .hand{flex:none;color:var(--soft)}
.base-pick button{flex:none;display:grid;justify-items:center;gap:4px;width:92px;padding:6px;font:inherit;font-size:14px;line-height:1.2;color:var(--ink);background:var(--card);border:2px solid var(--line-soft);border-radius:var(--wob2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.base-pick button.on{border-color:var(--ink);box-shadow:3px 3px 0 var(--shadow)}
.base-pick img,.base-pick .blank{width:64px;height:64px;object-fit:cover;border:1.5px solid var(--ink);background:var(--polaroid)}

/* Signed out: no balance in the header. */
.fsp-chip-get{display:none}
body:not(.signed-in) .fsp-chip b,body:not(.signed-in) .fsp-chip-label{display:none}
body:not(.signed-in) .fsp-chip-get{display:inline}
body:not(.signed-in) .owner-only{display:none!important}
.route-loading{padding:40px 0;font:700 19px var(--hand);color:var(--soft)}
.apply-note{max-width:640px;margin:0 0 18px;transform:rotate(-.6deg)}
@media (max-width:520px){.slip-confirm{grid-template-columns:1fr 1fr}.slip-confirm p{grid-column:1/-1}}
.proof-note{margin:8px 0 0;font-size:15px;color:var(--soft)}
.public-art-open{display:block;width:100%;padding:0;background:none;border:0;cursor:pointer}
.public-art figcaption span{color:var(--accent)}
/* Narrow polaroids: the stamp and price shrink to fit inside the card. */
.cc-card{min-width:0}
.cc-card .verified-stamp{font-size:11px;padding:2px 6px 1px;max-width:100%}
@media (max-width:520px){.cc-card{padding:8px 8px 12px}.cc-cover{padding:6px 6px 18px}.cc-card .tok-price{font-size:13px;padding:2px 8px;white-space:normal;border-radius:14px}.cc-card .tok-price small{display:block;width:100%}.cc-copy h3{font-size:18px}}

/* Phones: the balance chip always shows its unit ("50 FSp"). Signed out on the narrowest
   screens it is just the coin, labelled "Get FSp" for screen readers. */
@media (max-width:420px){
  body:not(.signed-in) .fsp-chip{width:44px;padding:0;justify-content:center}
  body:not(.signed-in) .fsp-chip .fsp-chip-get{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:520px){.page-heading{flex-wrap:wrap}.swap-demo-note{flex:0 1 auto;white-space:normal;max-width:100%}}