/* $BULB shared styles: tokens, header (brand, nav, demo pill), footer (demo line, socials), helpers.
   One dark look on purpose: the site is a black room full of light bulbs.

   TYPE SYSTEM (written down so the Bulbville game UI can reuse it as is)
   Fonts: one Google Fonts request, the same <link> in every page's <head> (the CSP allows only fonts.googleapis.com
   stylesheets and fonts.gstatic.com files):
     https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Jost:wght@300;400;500&display=swap
   --font-ui       Inter 400 / 500 / 600: everything you read or tap (nav, pill, buttons, labels, body copy, cards, notes)
                   and the names drawn on canvas (grid.js and wardrobe.js read this token, so canvas and CSS never drift).
   --font-display  Jost: only the $BULB mark (500, .08em) and display type of 24px and up: 300 for the big numbers and
                   headlines (28px and up: holder count, Info h1, step numbers, rarity word, 404 h1), 400 for the Info h2s
                   and roadmap stage names, 500 for the live stage.
   Weights: 400 reading, 500 buttons and nav, 600 labels, titles and emphasis. 300 only in Jost at 28px and up; Inter
   never goes below 400. Sentence case everywhere; the one-word You badge is the only caps (--track-caps).
   Scale (CSS px, nothing on screen is smaller than 12):
     --fs-tag    12  the You badge, the Grid's demo pill and nav at 340px and below
     --fs-label  13  quiet labels (Demo holders, Preview, Nickname, Contract address), chips, the demo pill,
                     address lines on cards and results, outfit tile status, "coming soon", the Grid's nav below 360px
     --fs-btn    14  nav, buttons, tabs, links, CTAs
     --fs-help   14  helper text: search field and results, the activity note, the bulb card, the demo line, messages,
                     outfit names
     --fs-body   16  reading copy (Wardrobe lead, 404, the contract address)
     --fs-read   17  Info reading copy at every width, FAQ questions
     --fs-brand  17  the $BULB mark (Jost 500)
     --fs-title  20  dialog titles (Inter 600)
     --fs-h3     24  roadmap stage names (Jost)
     display     Jost 28px and up: h2 clamp(28-36) 400, hero h1 46-92 300, count 36-56 300, rarity 30 300
     canvas      bulb names Inter 500 at 12-13px (yours 600, warm), cream at .8-.92 on a 3px rgba(0,0,0,.8) outline
   Rhythm: --lh-ui 1.4 (one or two line UI text), --lh-body 1.6 (paragraphs), --measure 32em (60-68 characters a line).
   Colour, WCAG contrast on black (#000):
     --ink    #f3ead9         17.6:1  primary text, titles, the names you search for
     --soft   cream at .86    12.8:1  reading copy, secondary text (12.1:1 on --panel, 11.6:1 on --tile)
     --faint  cream at .70     8.5:1  quiet labels, inactive nav, tabs and sizes (8.2:1 on --panel, 8:1 on --tile)
     --warm   #ffcf7a         14.5:1  accent: CTAs, the live chip, your bulb (black text on --warm is 14.5:1 too)
     --line   cream at .13            borders and rules only, never text
   Over the glowing canvas, text sits on black: the note (.9), card (.94), camera buttons (.86), pick list and search
   message (.97) and, zoomed in or crowded, the header and dock scrims (.94); bulb names get a dark outline instead, and
   grid.js leaves out any name that would land under that text. */
:root{
  --black:#000;
  --panel:#0c0c0d;
  --ink:#f3ead9;                      /* primary text: 17.6:1 on black */
  --soft:rgba(243,234,217,.86);       /* reading copy: 12.8:1 on black, 12.1:1 on the panel */
  --faint:rgba(243,234,217,.7);       /* quiet labels, inactive links and tabs: 8.5:1 on black, 8:1 on a tile */
  --line:rgba(243,234,217,.13);       /* rules and borders only, never text */
  --tile:#131315;
  --warm:#ffcf7a;                     /* accent: 14.5:1 on black */
  --warm-line:rgba(255,207,122,.45);
  --glow:255,204,90;
  /* two faces: Inter for everything you read or tap; Jost only for the $BULB mark and big display type (24px and up) */
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --font:var(--font-ui);
  /* type scale: nothing on screen is smaller than --fs-tag; nav, buttons and links are --fs-btn */
  --fs-tag:12px;      /* the You badge, the Grid's pill and nav at 340px and below */
  --fs-label:13px;    /* quiet labels, chips, the demo pill, address lines, tile status */
  --fs-btn:14px;      /* nav, buttons, links */
  --fs-help:14px;     /* helper text: search, cards, notes, the demo line, outfit names */
  --fs-body:16px;     /* reading copy */
  --fs-read:17px;     /* Info reading copy (phones too), FAQ questions */
  --fs-title:20px;    /* dialog titles (Inter) */
  --fs-brand:17px;    /* the $BULB mark (Jost) */
  --fs-h3:24px;       /* roadmap stage names (Jost) */
  --lh-ui:1.4;        /* one or two line UI text */
  --lh-body:1.6;      /* paragraphs */
  --measure:32em;     /* paragraph width: 60-68 characters a line */
  --track-caps:.06em; /* the one-word caps badge (You); everything else is sentence case with no extra tracking */
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--black)}
body{margin:0;overflow-x:clip;background:var(--black);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
p,li,dd{text-wrap:pretty}   /* no one-word last lines (the note and the demo line balance instead) */
img,svg,canvas{display:block}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--warm);outline-offset:3px;border-radius:4px}
::selection{background:rgba(255,207,122,.32);color:var(--ink)}

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;z-index:50;left:16px;top:-60px;padding:8px 14px;border-radius:999px;background:var(--warm);color:var(--black);font-size:var(--fs-btn);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---- header: brand + nav on the left, demo pill (and page controls) on the right */
.site-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px}
.head-lead{display:flex;align-items:center;gap:28px;min-width:0}
.head-tail{display:flex;align-items:center;gap:12px;min-width:0}
.brand{margin:0;font:500 var(--fs-brand)/1 var(--font-display);letter-spacing:.08em;color:var(--soft);text-decoration:none;white-space:nowrap}
a.brand:hover{color:var(--ink)}
.nav{display:flex;align-items:center;gap:20px}
.nav a{padding:7px 0;font-size:var(--fs-btn);font-weight:500;line-height:1.3;color:var(--faint);text-decoration:none;white-space:nowrap;transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--warm-line)}
.pill{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-label);line-height:var(--lh-ui);color:var(--soft);white-space:nowrap}
.pill .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--warm);box-shadow:0 0 8px rgba(var(--glow),.9)}

/* ---- header search (the Grid): a compact field at the top right; on narrow screens a search icon that opens the
   field over the header */
.search{position:relative;flex:none}
.search svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.search-open,.search-close{display:none}
.search-box{display:flex;align-items:center;gap:8px;width:244px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:17px;background:rgba(0,0,0,.6);color:var(--faint);transition:border-color .2s,color .2s}
.search-box:focus-within{border-color:var(--warm);color:var(--soft)}
.search-glyph{flex:none}
.search input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);font:400 var(--fs-help)/1 var(--font);outline:none;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--faint);opacity:1}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.results{position:absolute;right:0;top:calc(100% + 6px);z-index:4;width:max(100%,300px);margin:0;padding:4px;list-style:none;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.97);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.results button{display:block;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:400 var(--fs-help)/var(--lh-ui) var(--font);text-align:left;cursor:pointer}
.results button:hover,.results button:focus-visible{background:var(--tile)}
.results button:focus-visible{outline-offset:-2px}
.results b{display:block;font-weight:600}
.results span{display:block;font-size:var(--fs-label);color:var(--soft);font-variant-numeric:tabular-nums}
.results .more{padding:6px 10px 4px;font-size:var(--fs-label);line-height:var(--lh-ui);color:var(--faint)}
.search-msg{position:absolute;right:0;top:calc(100% + 6px);z-index:4;margin:0;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.97);font-size:var(--fs-help);line-height:20px;color:var(--soft);white-space:nowrap}
.search-msg:empty{display:none}
@media (max-width:760px){
  .has-search .head-lead{padding-right:46px}
  .search{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
  .search-open{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--soft);cursor:pointer}
  .search-open:hover{color:var(--ink);border-color:var(--faint)}
  .search-box{display:none;position:absolute;top:-1px;right:0;z-index:4;width:calc(100vw - max(16px,env(safe-area-inset-left,0px)) - max(16px,env(safe-area-inset-right,0px)));height:40px;padding:0 3px 0 14px;border-radius:20px;background:var(--black)}
  .search.open .search-box{display:flex}
  .search.open .search-open{visibility:hidden}
  .search input{font-size:16px}   /* 16px keeps iOS from zooming the page on focus */
  .search-close{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--soft);cursor:pointer}
  .results{top:46px;width:calc(100vw - max(16px,env(safe-area-inset-left,0px)) - max(16px,env(safe-area-inset-right,0px)))}
  .search-msg{top:46px}
}

/* ---- footer: demo line + socials */
.site-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:56px;padding-block:18px 26px;border-top:1px solid var(--line);font-size:var(--fs-help);line-height:1.5;color:var(--faint)}
.demo-line{margin:0;max-width:36em;text-wrap:balance}
.foot-tail{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}
.socials{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.social{display:inline-flex;align-items:baseline;gap:6px;font-size:var(--fs-btn);font-weight:500;color:var(--soft);text-decoration:none;white-space:nowrap}
a.social{padding:4px 0}
a.social:hover{color:var(--warm)}
.social .soon{font-size:var(--fs-label);font-weight:400;color:var(--faint)}
.cta{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--warm-line);border-radius:999px;font-size:var(--fs-btn);font-weight:600;line-height:1.3;color:var(--warm);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.cta:hover{background:var(--warm);color:var(--black)}

/* ---- the classic Icon bulb as inline SVG (Info and 404 pages) */
.bulb{overflow:visible}
.bulb .glass-off{fill:#161616;stroke:rgba(243,234,217,.22);stroke-width:.03}

/* ---- page shell for the scrolling pages (side padding also clears a landscape notch) */
.shell{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-top:calc(18px + env(safe-area-inset-top,0px))}

@media (max-width:600px){
  .shell{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .site-head{row-gap:8px}
  .head-lead{width:100%;justify-content:space-between;gap:16px}
  .head-tail{width:100%;justify-content:space-between}
  .nav{gap:16px}
  .nav a{padding-block:11px}
  .pill{padding:5px 11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- four nav links (Grid · World · Wardrobe · Info) on small phones: tighter gaps keep the header inside the 16px
   gutters with the nav at its full 14px (about 264px of 288 at 320px wide) */
@media (max-width:374px){
  .head-lead{gap:12px}
  .nav{gap:12px}
}
/* the Grid also keeps 46px free for its search button, so its nav steps down to 13px below 360px (a foldable's 344px
   cover screen) and, like its demo pill, to 12px at 340px and below */
@media (max-width:359px){.has-search .nav a{font-size:var(--fs-label)}}
@media (max-width:340px){
  .has-search .head-lead{gap:10px}
  .has-search .nav{gap:10px}
  .has-search .nav a{font-size:var(--fs-tag)}
}