/* "The Unbuilt Archive" — dark/gold theme, approved 2026-09-14 (see CLAUDE.md).
   Scoped entirely to html[data-theme="unbuilt-archive"] so every other page
   keeps the existing light theme untouched until it is deliberately
   redesigned. Overrides only the token layer in _shared/base.css — every
   rule written against var(--ink)/var(--paper)/etc. re-themes for free.
   Colors are the real values from the approved Stitch design reference
   (Material color roles: surface, on-surface, outline, primary), not
   invented for this file. */
html[data-theme="unbuilt-archive"]{
  color-scheme: dark;
}
html[data-theme="unbuilt-archive"] :root,
html[data-theme="unbuilt-archive"]{
  --paper:#131315;
  --ink:#e5e1e4;
  --grey:#b6ac93;
  --faint:#8a8168;
  --rule:#4d4635;
  --accent:#e9c349;
  --accent-ink:#e9c349;
  --red:#e9c349;
  --glass:rgba(19,19,21,.55);
  --glass-solid:rgba(19,19,21,.86);
  --glass-edge:rgba(229,225,228,.14);
  --glass-light:rgba(19,19,21,.62);
  --glass-light-solid:#131315;
}
/* The light theme uses a white radial-fade image behind the hero title for
   legibility on busy artwork imagery — wrong direction on a dark page. Same
   legibility need, inverted fade instead of a second image asset. */
html[data-theme="unbuilt-archive"] [data-section="home"] .hero-card{
  background-image:none;
  background:radial-gradient(closest-side,rgba(19,19,21,.88),rgba(19,19,21,0) 90%);
}
/* The composite/imagined marker (.stamp, dashed borders) keeps its own
   distinct warning color rather than inheriting the new gold accent — gold
   is now the brand/interactive color, so reusing it for "this is imagined"
   would blur the one distinction CLAUDE.md is strictest about. */
html[data-theme="unbuilt-archive"] .stamp{
  border-color:#ff6b6b;color:#ff6b6b;
}
/* UX fix: real photos default to a blank WHITE box while loading (the <img>
   element's own background before content paints) -- glaring against a
   dark page in a way it never was against the light theme's cream. A dark
   placeholder means a slow-loading image reads as "still loading" rather
   than "broken/wrong theme" for that split second. */
html[data-theme="unbuilt-archive"] img{
  filter:brightness(.94) contrast(1.03);
  background-color:var(--rule);
}
/* catalogue.html's search input hardcodes background:#fff rather than
   var(--paper) — same fix pattern as the hero-card fade above: override
   here rather than touch the page's own light-theme rule. */
html[data-theme="unbuilt-archive"] .search-bar input{
  background:var(--paper);color:var(--ink);
}
/* about.html's audio-block card hardcodes background:#fff. Only the card's
   own background is touched here -- the native <audio> control itself
   (memory: "KEEP, do not restyle without Jeff asking") is left completely
   alone; browsers skin that themselves and it isn't part of this change. */
html[data-theme="unbuilt-archive"] .audio-block{
  background:var(--paper);
  box-shadow:2px 2px 0 rgba(0,0,0,.25);
}
/* lost.html sets body's background as a hardcoded light gradient rather
   than var(--paper) -- same override pattern as everything else here. */
html[data-theme="unbuilt-archive"] body{
  background:var(--paper);
}
/* lost.html's card-like elements (count-card, dot-field, timeline-entry,
   reflection-card, invitation-links a) all hardcode background:#fff. */
html[data-theme="unbuilt-archive"] .count-card,
html[data-theme="unbuilt-archive"] .dot-field,
html[data-theme="unbuilt-archive"] .timeline-entry,
html[data-theme="unbuilt-archive"] .reflection-card,
html[data-theme="unbuilt-archive"] .invitation-links a{
  background:var(--paper);
}
/* contact.html's .contact-info hardcodes the light --paper hex directly
   (#f4f1ea) rather than the token, so it didn't re-theme automatically. */
html[data-theme="unbuilt-archive"] .contact-info{
  background:var(--paper);
}

/* UX fix: nav unification. The homepage's Command Dock (a small, centered,
   rounded floating pill) and every other page's .runhead (a full-bleed
   sticky bar, from _shared/base.css, shared by nav.js across the whole
   site) were two different nav languages under the same color theme.
   Rather than rebuild every page's markup to match the dock exactly (risky
   across 1,087+ generated pages for a cosmetic change), .runhead itself is
   restyled here to borrow the dock's visual vocabulary -- rounded ends,
   inset margin so it "floats" instead of running edge-to-edge, the same
   dark glass + gold hairline border -- while staying the same single
   component nav.js already populates everywhere, so link sets can't drift. */
html[data-theme="unbuilt-archive"] .runhead{
  margin:10px clamp(10px,2vw,20px) 0;
  border:1px solid rgba(233,195,73,.25);
  border-bottom:1px solid rgba(233,195,73,.25);
  border-radius:999px;
  background:var(--glass-solid);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
html[data-theme="unbuilt-archive"] .runhead.shrink{
  margin-top:6px;
}
@media(max-width:1099px){
  html[data-theme="unbuilt-archive"] .runhead{
    border-radius:20px;
  }
}

/* UX fix: footer visual family. The homepage's Monumental Plinth footer
   (sparse links, one manifesto quote, large negative space) has no real
   counterpart here -- _shared/footer.js's .site-footer carries genuine
   functionality the homepage's footer doesn't (a recently-added filmstrip,
   per-decade counts, link-kind markers for external/PDF links), so
   stripping it down to match would delete real utility across every page
   that uses it, not just restyle one. Borrowing the plinth's *vocabulary*
   instead -- more air, a gold hairline in place of the flat --ink rule,
   glass panels instead of flat paper-tint fills -- without touching
   footer.js's structure or removing any column. */
html[data-theme="unbuilt-archive"] .site-footer{
  border-top:1px solid rgba(233,195,73,.25);
  padding:80px 0 60px;
}
/* !important: footer.js hardcodes rgba(244,241,234,.5) -- the light theme's
   paper tint -- directly on these two rules instead of a token, so under
   the dark theme they rendered as visible grey boxes no matter what. Its
   <style> is injected by JS at runtime, landing after this file's static
   <link> in the cascade, so equal-specificity overrides here lost outright
   until this. */
html[data-theme="unbuilt-archive"] .site-footer .foot-col{
  border-right-color:rgba(233,195,73,.16);
  background:var(--glass-light) !important;
}
html[data-theme="unbuilt-archive"] .site-footer .foot-credit{
  border-top-color:rgba(233,195,73,.25);
  background:var(--glass-light) !important;
}