/* DoodBrand — design system
   Carried forward from /css/dood.css (2026): warm black, gold, Cormorant + Syne + DM Mono.
   Rewritten for the artist-led build. */

:root{
  --bg:#0a0a09; --bg2:#111110; --bg3:#1a1a17; --bg4:#222220;
  --border:rgba(255,255,255,.07); --border-m:rgba(255,255,255,.14); --border-s:rgba(255,255,255,.22);
  --text:#e8e5de; --text-2:#8a8778; --text-3:#5a5850;
  --gold:#c9a84c; --gold-lt:#e0c273; --gold-dim:rgba(201,168,76,.12); --gold-glow:rgba(201,168,76,.25);
  --fire:#e8593c; --blue:#4a9eff; --green:#4caf82; --smooth:#d4c4a8;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Syne',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:4px;
  --gut:clamp(18px,4vw,40px);
  --max:1240px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
}
/* film grain — the 2026 signature */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;background-size:180px;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}
img{max-width:100%;display:block}
/* a class that sets display beats the browser's own [hidden] rule, which is
   how a hidden button can still be on screen. This settles it once. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r)}
::selection{background:var(--gold);color:#0a0a09}

.wrap{max-width:var(--max);margin-inline:auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right))}
.narrow{max-width:760px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.05;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(40px,7vw,78px)}
h2{font-size:clamp(30px,4.4vw,46px)}
h3{font-size:clamp(22px,2.6vw,28px);font-weight:400}
em.g{font-style:italic;color:var(--gold)}
p{max-width:66ch}
.lede{font-family:var(--serif);font-weight:300;font-size:clamp(19px,2.2vw,24px);line-height:1.5;color:var(--text-2)}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.muted{color:var(--text-2)}
.mono{font-family:var(--mono)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(10,10,9,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:66px}
.nav-mark{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;
  font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.nav-mark b{font-weight:700}
.nav-mark span{color:var(--gold)}
.nav-mark sup{font-size:9px;color:var(--text-3);top:-.6em}
.nav-links{display:flex;gap:4px;margin-left:auto;list-style:none;align-items:center}
.nav-links a{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);padding:9px 12px;border:1px solid transparent;border-radius:var(--r);transition:.18s var(--ease)}
.nav-links a:hover{color:var(--text);border-color:var(--border-m);background:var(--bg2)}
.nav-links a[aria-current]{color:var(--gold)}
.nav-links a.pill{color:#0a0a09;background:var(--gold);border-color:var(--gold);font-weight:500}
.nav-links a.pill:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:#0a0a09}
.burger{display:none;margin-left:auto;width:42px;height:42px;place-items:center;
  background:none;border:1px solid var(--border-m);border-radius:var(--r);color:var(--text);cursor:pointer}
.burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@media (max-width:900px){
  .nav .wrap{min-height:58px}
  .burger{display:grid}
  .nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--border-m);
    padding:8px max(var(--gut),env(safe-area-inset-right)) 16px max(var(--gut),env(safe-area-inset-left))}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 4px;border-bottom:1px solid var(--border);border-radius:0;font-size:13.5px}
  .nav-links a.pill{margin-top:12px;border-radius:var(--r);text-align:center;padding:14px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:13px 22px;border:1px solid var(--border-s);
  border-radius:var(--r);color:var(--text);transition:.2s var(--ease);cursor:pointer;background:none}
.btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}
.btn.solid{background:var(--gold);border-color:var(--gold);color:#0a0a09;font-weight:500}
.btn.solid:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:#0a0a09}
/* Touch sizing. On a coarse pointer every standing control gets a 44px hit
   box — the size a fingertip actually needs — without changing how anything
   looks on a mouse-driven screen. Links inside a sentence are left alone:
   their size comes from the text, and WCAG 2.5.8 exempts them for that
   reason. Vertical gaps shrink by the padding that was added, so the lists
   take the same room on the page as before. */
@media (pointer:coarse){
  .btn{min-height:48px}
  .nav-links a{min-height:44px;display:flex;align-items:center}
  .burger{min-width:44px;min-height:44px}
  .skip-link{min-height:44px;display:inline-flex;align-items:center}
  .nav-mark{min-height:44px;display:inline-flex;align-items:center}
  .foot-col a,.map a,.map-names a{min-height:44px;display:flex;align-items:center}
  .foot-base a{min-height:44px;display:inline-flex;align-items:center}
  .tool-back,.coll-tool{min-height:44px;display:inline-flex;align-items:center}
  .foot-col ul{gap:0}
  .map ul{gap:0}
  .pager a{min-width:44px;min-height:44px}
}

/* ---------- sections ---------- */
section{padding-block:clamp(56px,9vh,104px)}
section+section{border-top:1px solid var(--border)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(32px,5vw,52px);max-width:70ch}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border-m);padding-block:48px 56px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:36px 28px}
.foot-mark{font-family:var(--serif);font-size:34px;font-weight:300}
/* keyboard users land here first on every page: hidden until it takes focus,
   then a normal visible control at the top-left */
/* above .nav, which is sticky at z-index 60 and paints later in the DOM */
.skip-link{position:fixed;left:8px;top:-72px;z-index:200;padding:10px 16px;min-width:210px;
  background:#141413;color:var(--text,#f2f0ea);border:1px solid var(--gold);
  border-radius:var(--r,10px);font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;transition:top .15s}
.skip-link:focus{top:8px}
main:focus{outline:none}
.foot-mark span{color:var(--gold)}
.foot-tag{color:var(--text-2);font-size:14px;margin-top:8px;max-width:34ch}
.foot-col h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);font-weight:400;margin-bottom:14px}
.foot-col ul{list-style:none;display:grid;gap:9px}
.foot-col a{font-size:14px;color:var(--text-2);transition:.16s}
.foot-col a:hover{color:var(--gold)}
.foot-base{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin-top:40px;
  padding-top:22px;border-top:1px solid var(--border);font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
.foot-base a{color:var(--text-3)}
.foot-base a:hover{color:var(--gold)}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;gap:28px}}

/* footer ornament */
.shades{display:inline-block;cursor:pointer;opacity:.55;transition:.3s var(--ease)}
.shades:hover{opacity:1;filter:drop-shadow(0 0 8px var(--gold-glow))}
.shades svg{width:26px;height:13px;display:block}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the wallet control — one control, six states, same in the header everywhere */
.wallet{display:flex;align-items:center;gap:8px;margin-left:auto;order:2}
.wallet-btn{display:inline-flex;align-items:center;gap:7px;font:500 .74rem/1 var(--mono,inherit);
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold,#c9a84c);background:transparent;
  border:1px solid rgba(201,168,76,.4);border-radius:999px;padding:8px 13px;cursor:pointer;
  transition:border-color .18s var(--ease,ease),color .18s var(--ease,ease)}
.wallet-btn:hover:not([disabled]){border-color:var(--gold,#c9a84c)}
.wallet-btn[disabled]{cursor:default;opacity:.75}
.wallet-btn:focus-visible,.wallet-forget:focus-visible{outline:2px solid var(--gold,#c9a84c);outline-offset:3px}
.wallet-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;flex:0 0 auto}
.wallet[data-state="authenticated"] .wallet-dot{opacity:1}
.wallet[data-state="address"] .wallet-dot{opacity:.65;box-shadow:0 0 0 2px rgba(201,168,76,.18)}
.wallet[data-state="expired"] .wallet-dot,
.wallet[data-state="unavailable"] .wallet-dot{opacity:.3}
.wallet[data-state="checking"] .wallet-btn{opacity:.6}
.wallet-note{font:400 .66rem/1.3 var(--mono,inherit);color:var(--muted,#8b8b86);max-width:15ch}
.wallet-forget{font:400 .66rem/1 var(--mono,inherit);letter-spacing:.05em;color:var(--muted,#8b8b86);
  background:none;border:0;border-bottom:1px solid transparent;padding:2px 0;cursor:pointer}
.wallet-forget:hover{color:var(--gold,#c9a84c);border-bottom-color:currentColor}
@media (max-width:820px){
  .wallet{order:1;margin-left:auto;margin-right:4px;min-width:0}
  .wallet-note{display:none}          /* the dot and the address still carry the state */
  .wallet-btn{padding:7px 10px;font-size:.68rem;min-width:0}
}
/* Touch targets. 44px is the floor on anything a thumb has to hit, so the
   control is padded up to it on a phone rather than shrunk to fit. */
@media (max-width:820px){
  .wallet-btn{min-height:44px}
  .wallet-forget{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:460px){
  /* Below this the header cannot hold the mark, the control and the burger on
     one line at full size. The control takes its own row instead of losing
     words or dropping under the touch floor. */
  .nav .wrap{flex-wrap:wrap;row-gap:8px}
  .wallet{order:3;width:100%;margin-left:0;justify-content:flex-start;gap:10px}
  .wallet-note{display:inline}
}
}

/* the two gallery walls */
.wall-modes{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.wall-mode{font:500 .72rem/1 var(--mono,inherit);letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted,#8b8b86);background:transparent;border:1px solid rgba(139,139,134,.28);
  border-radius:999px;padding:9px 15px;cursor:pointer;transition:color .18s var(--ease,ease),border-color .18s var(--ease,ease)}
.wall-mode:hover{color:var(--gold,#c9a84c);border-color:rgba(201,168,76,.45)}
.wall-mode.is-on{color:var(--gold,#c9a84c);border-color:var(--gold,#c9a84c)}
.wall-mode:focus-visible{outline:2px solid var(--gold,#c9a84c);outline-offset:3px}
.wall-mine-note{font:400 .8rem/1.5 inherit;color:var(--muted,#8b8b86);margin:0 0 14px}
@media (max-width:420px){ .wall-mode{padding:8px 12px;font-size:.66rem;letter-spacing:.05em} }