/* ============================================================
   HTML CAN DO THAT — The Museum of Native Elements
   Every behavior on this page is native HTML + CSS.
   This stylesheet is the only authored "logic" aboard.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-italic-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibmplexmono-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibmplexmono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibmplexmono-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --font-display: "Anton", "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

/* day gallery (default) */
body {
  --paper: #f2ecdc;
  --paper-2: #eae2cc;
  --paper-3: #e0d6ba;
  --case: #fbf7ea;
  --case-2: #f4eeda;
  --ink: #17211a;
  --ink-soft: #46543f;
  --ink-faint: #7b8468;
  --line: #cfc5a4;
  --line-strong: #a89a70;
  --green: #0e7a3d;
  --green-deep: #0a4d27;
  --green-ink: #083a1e;
  --green-bright: #1fbf63;
  --green-soft: #dcecd4;
  --brass: #a97b1f;
  --brass-2: #d4af5a;
  --brass-ink: #6d4f0d;
  --brass-soft: #efe3c2;
  --red: #b3382c;
  --amber: #b07a12;
  --code-bg: #101a12;
  --code-ink: #cde8d2;
  --glass-glare: rgba(255, 255, 255, .5);
  --shadow: 0 1px 0 rgba(23,33,26,.04), 0 12px 32px -12px rgba(23,33,26,.25);
  --shadow-lift: 0 2px 0 rgba(23,33,26,.05), 0 24px 48px -16px rgba(23,33,26,.35);
  --focus: #0e7a3d;
}

/* night gallery — the lights switch is a plain checkbox, restyled by :has() */
body:has(#lights:checked) {
  --paper: #0d130e;
  --paper-2: #121a12;
  --paper-3: #1a2419;
  --case: #162016;
  --case-2: #1b261b;
  --ink: #e6efdf;
  --ink-soft: #a8b89c;
  --ink-faint: #6f7d66;
  --line: #2c3a28;
  --line-strong: #4a5a3c;
  --green: #35d878;
  --green-deep: #1fbf63;
  --green-ink: #cde8d2;
  --green-bright: #4ae58b;
  --green-soft: #1c2f20;
  --brass: #d4af5a;
  --brass-2: #a97b1f;
  --brass-ink: #e0c47e;
  --brass-soft: #2a2c17;
  --red: #e05c4a;
  --amber: #e0a83c;
  --code-bg: #050a06;
  --code-ink: #b8e0c2;
  --glass-glare: rgba(255, 255, 255, .06);
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lift: 0 2px 0 rgba(0,0,0,.3), 0 24px 48px -16px rgba(0,0,0,.7);
  --focus: #4ae58b;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 420;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--green-soft), transparent 60%),
    var(--paper);
  background-attachment: fixed;
  transition: background-color .5s ease, color .5s ease;
}

/* subtle blueprint grid over the whole gallery */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .18;
  pointer-events: none;
}

::selection { background: var(--green); color: var(--case); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 { line-height: 1.05; margin: 0; }

a { color: var(--green); text-decoration-color: var(--brass-2); text-underline-offset: .18em; }
a:hover { color: var(--green-bright); }

code, kbd, samp, pre { font-family: var(--font-mono); }
code {
  font-size: .88em;
  background: var(--green-soft);
  border: 1px solid var(--line);
  padding: .08em .38em;
  border-radius: 5px;
  white-space: nowrap;
}
pre code { background: none; border: 0; padding: 0; white-space: pre; }

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  background: var(--green-ink);
  color: var(--case);
  padding: .6rem 1rem;
  border-radius: 0 0 8px 8px;
  font-family: var(--font-mono);
  font-size: .85rem;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* ---------- ticket-strip nav ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1rem .55rem 1.25rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--green-ink);
}
.masthead::after {
  /* perforation edge — the ticket is torn here */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 7px;
  background-image: radial-gradient(circle at 6px -2px, transparent 6px, var(--paper) 6px);
  background-size: 14px 7px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 1px 0 var(--green-ink));
  pointer-events: none;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand .glyph {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--green);
  font-size: 1.25rem;
}
.brand strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .68rem;
  color: var(--ink-faint);
  letter-spacing: .08em;
}
.mastnav {
  display: flex;
  gap: .15rem;
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: thin;
}
.mastnav a {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  padding: .45rem .7rem;
  border-radius: 6px;
  white-space: nowrap;
}
.mastnav a:hover { background: var(--green-soft); color: var(--green-deep); }
.mastnav a:active { background: var(--green); color: var(--case); }

/* the gallery lights — a checkbox doing a switch's job */
.lights {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.lights input {
  appearance: none;
  width: 2.6rem;
  height: 1.4rem;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  background: var(--case);
  position: relative;
  cursor: pointer;
  margin: 0;
  transition: background .3s;
}
.lights input::before {
  content: "";
  position: absolute;
  top: 50%; left: .12rem;
  translate: 0 -50%;
  width: .95rem; height: .95rem;
  border-radius: 50%;
  background: var(--brass);
  transition: translate .25s cubic-bezier(.6,1.6,.5,1), background .3s;
}
.lights input:checked { background: var(--green-ink); border-color: var(--green-ink); }
.lights input:checked::before { translate: 1.15rem -50%; background: var(--brass-2); }
.js-stamp {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--case);
  background: var(--green);
  padding: .4rem .6rem;
  border-radius: 4px;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--green-ink);
  white-space: nowrap;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) 1.25rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .14em;
  color: var(--green-deep);
  border: 1.5px solid var(--line-strong);
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--case);
}
.hero-kicker::before {
  content: "";
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--red); /* specimen pin */
  box-shadow: 0 0 0 2px var(--case), 0 0 0 3.5px var(--red);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 9.5vw, 8.25rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 1.25rem 0 .5rem;
  line-height: .94;
}
.hero h1 .tight { display: block; }
.hero h1 mark {
  background: none;
  color: var(--green);
  position: relative;
}
.hero h1 mark::after {
  /* the pin through the exclamation */
  content: "";
  position: absolute;
  right: -.18em; top: .06em;
  width: .16em; height: .16em;
  border-radius: 50%;
  background: var(--red);
}
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 34rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.hero-sub strong { color: var(--ink); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 2px dashed var(--line-strong);
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  color: var(--green-deep);
  line-height: 1;
}
.stat span {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.hero-art { position: relative; }
.hero-art img {
  width: min(100%, 30rem);
  margin-inline: auto;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(23,33,26,.28));
  transform: rotate(1.5deg);
}
body:has(#lights:checked) .hero-art img {
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)) brightness(.92);
}
.hero-art .art-caption {
  position: absolute;
  bottom: -0.5rem; right: 8%;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-faint);
  transform: rotate(1.5deg);
}

/* marquee ribbon of tag names — pure CSS */
.ribbon {
  overflow: hidden;
  margin-top: clamp(2rem, 5vw, 4rem);
  border-block: 2px solid var(--green-ink);
  background: var(--green-ink);
  color: var(--green-bright);
  font-family: var(--font-mono);
  font-size: .92rem;
  letter-spacing: .1em;
  white-space: nowrap;
}
.ribbon-track {
  display: inline-flex;
  gap: 0;
  padding-block: .55rem;
  animation: ribbon-scroll 38s linear infinite;
}
.ribbon span { padding-inline: 1.1rem; }
.ribbon span:nth-child(even) { color: var(--brass-2); }
@keyframes ribbon-scroll { to { transform: translateX(-50%); } }

/* ---------- museum map ---------- */
.map {
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 0;
}
.map h2, .wing h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.map-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 3px double var(--line-strong);
  padding-bottom: 1rem;
  margin-bottom: 1.4rem;
}
.map-intro p { margin: 0; max-width: 38rem; color: var(--ink-soft); }
.tickets {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: .8rem;
}
.tickets a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  background: var(--case);
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--line);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
  position: relative;
  overflow: hidden;
}
.tickets a::before {
  /* punched ticket notch */
  content: "";
  position: absolute;
  left: 3.1rem; top: 0; bottom: 0;
  border-left: 2px dashed var(--line);
}
.tickets a:hover {
  transform: translateY(-3px) rotate(-.4deg);
  box-shadow: 4px 6px 0 var(--line);
  border-color: var(--green);
}
.tickets .num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .95rem;
  color: var(--brass-ink);
  width: 2rem;
  flex: none;
}
.tickets .t-name { display: flex; flex-direction: column; line-height: 1.25; }
.tickets .t-name code { background: none; border: 0; padding: 0; font-weight: 600; font-size: .95rem; color: var(--green-deep); }
.tickets .t-name small { color: var(--ink-faint); font-size: .74rem; }

/* ---------- wings ---------- */
.wing {
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) 1.25rem 0;
}
.wing-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 3px double var(--line-strong);
  padding-bottom: .9rem;
}
.wing-head .wing-no {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--case);
  background: var(--green);
  padding: .2rem .55rem;
  border-radius: 5px;
  font-size: .85rem;
}
.wing-head p { margin: 0 0 0 auto; color: var(--ink-faint); font-family: var(--font-mono); font-size: .78rem; }

/* ---------- exhibit case ---------- */
.exhibit {
  margin-top: clamp(2rem, 4vw, 3rem);
  scroll-margin-top: 6rem;
}
.case {
  background: var(--case);
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
/* vitrine glare + corner screws */
.case::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, var(--glass-glare) 0%, transparent 22%),
    radial-gradient(circle at .6rem .6rem, var(--line-strong) 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - .6rem) .6rem, var(--line-strong) 2.5px, transparent 3px),
    radial-gradient(circle at .6rem calc(100% - .6rem), var(--line-strong) 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - .6rem) calc(100% - .6rem), var(--line-strong) 2.5px, transparent 3px);
  pointer-events: none;
  z-index: 1;
}
.case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1rem;
  padding: 1.1rem 1.4rem .95rem;
  border-bottom: 2px solid var(--line);
  background: var(--case-2);
}
.case-head .ex-no {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .82rem;
  color: var(--case);
  background: var(--ink);
  padding: .25rem .55rem;
  border-radius: 4px;
}
body:has(#lights:checked) .case-head .ex-no { background: var(--brass); color: #17211a; }
.case-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.case-head h3 code {
  background: none; border: 0; padding: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .82em;
  color: var(--green);
  white-space: nowrap;
}
.case-head .aka {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--brass-ink);
  font-style: normal;
}
.case-head .alive {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--green-deep);
  border: 1.5px dashed var(--green);
  border-radius: 4px;
  padding: .3rem .55rem;
  transform: rotate(1.6deg);
  text-transform: uppercase;
}
.case-body {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: 0;
}
/* the engraved placard */
.placard {
  padding: 1.3rem 1.4rem 1.4rem;
  border-right: 2px solid var(--line);
  font-size: .95rem;
}
.placard .accession {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--brass-ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: .5rem;
  margin-bottom: .9rem;
}
.placard p { margin: 0 0 .8rem; color: var(--ink-soft); }
.placard p strong, .placard li strong { color: var(--ink); }
.try-list {
  list-style: none;
  margin: 0 0 1rem; padding: 0;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--ink-soft);
}
.try-list li { padding: .28rem 0 .28rem 1.4rem; position: relative; }
.try-list li::before {
  content: "▸";
  position: absolute;
  left: .25rem;
  color: var(--red);
  font-weight: 700;
}
/* support chips */
.support {
  border-top: 1px solid var(--line);
  padding-top: .8rem;
}
.support .sup-title {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}
.baseline-tag {
  font-weight: 600;
  padding: .1rem .4rem;
  border-radius: 4px;
  letter-spacing: .06em;
}
.baseline-tag.wide { background: var(--green-soft); color: var(--green-deep); }
.baseline-tag.new { background: var(--brass-soft); color: var(--amber); }
.baseline-tag.limited { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .2rem .55rem .2rem .45rem;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  background: var(--case);
}
.chip::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--green);
}
.chip.new::before { background: var(--amber); }
.chip.no::before { background: var(--red); }
.chip.na::before { background: var(--ink-faint); }
.support a.caniuse {
  font-family: var(--font-mono);
  font-size: .68rem;
  display: inline-block;
  margin-top: .5rem;
}

/* the markup drawer — a <details>, naturally */
.drawer {
  margin-top: 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--code-bg);
}
.drawer summary {
  list-style: none;
  cursor: pointer;
  padding: .6rem .9rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  color: var(--brass-ink);
  background: var(--case-2);
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: .55rem;
  user-select: none;
}
body:has(#lights:checked) .drawer summary { background: var(--paper-3); color: var(--brass-ink); }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::before {
  content: "⌄";
  display: inline-block;
  font-weight: 700;
  transition: transform .25s ease;
  transform: rotate(-90deg);
  color: var(--green);
}
.drawer[open] summary::before { transform: rotate(0deg); }
.drawer[open] summary { border-bottom-color: var(--line); }
.drawer summary:hover { color: var(--green); }
.drawer .drawer-note {
  margin-left: auto;
  font-size: .62rem;
  color: var(--ink-faint);
  font-style: italic;
}
.drawer pre {
  margin: 0;
  padding: .9rem 1rem 1rem;
  overflow-x: auto;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--code-ink);
}
.drawer pre .c { color: #6d8f72; font-style: italic; }
.drawer pre .t { color: #7ee2a0; }
.drawer pre .a { color: #9fd0ff; }
.drawer pre .v { color: #ffd479; }

/* ---------- stage ---------- */
.stage {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.2rem;
  min-height: 17rem;
  background:
    linear-gradient(var(--stage-grid, rgba(14,122,61,.05)) 1px, transparent 1px),
    linear-gradient(90deg, var(--stage-grid, rgba(14,122,61,.05)) 1px, transparent 1px);
  background-size: 28px 28px;
}
.stage-caption {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-faint);
  text-align: center;
  max-width: 30rem;
}
.stage-caption kbd {
  border: 1px solid var(--line-strong);
  border-bottom-width: 2.5px;
  border-radius: 5px;
  padding: .05rem .4rem;
  background: var(--case);
  font-size: .92em;
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .9rem;
  color: var(--case);
  background: var(--green);
  border: 2px solid var(--green-ink);
  border-radius: 8px;
  padding: .75rem 1.3rem;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--green-ink);
  transition: transform .12s ease, box-shadow .12s ease, background .15s;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: 0 6px 0 var(--green-ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--green-ink); }
.btn.ghost {
  background: var(--case);
  color: var(--green-deep);
  border-color: var(--line-strong);
  box-shadow: 0 4px 0 var(--line-strong);
}
.btn.ghost:hover { background: var(--case-2); color: var(--green); }
.btn.brass {
  background: var(--brass);
  border-color: #6d4c0e;
  box-shadow: 0 4px 0 #6d4c0e;
}
.btn.brass:hover { background: #96690f; }
.btn.small { padding: .5rem .85rem; font-size: .78rem; box-shadow: 0 3px 0 var(--green-ink); }
.btn.small.ghost { box-shadow: 0 3px 0 var(--line-strong); }

/* ---------- dialog exhibit ---------- */
dialog.velvet {
  border: 2px solid var(--brass);
  border-radius: 14px;
  padding: 0;
  max-width: min(30rem, calc(100vw - 2.5rem));
  background: var(--case);
  color: var(--ink);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.55), 0 0 0 6px var(--case);
}
dialog.velvet::backdrop {
  background: color-mix(in srgb, var(--green-ink) 45%, black 35%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
dialog.velvet .dlg-inner { padding: 1.6rem 1.7rem 1.4rem; }
dialog.velvet .dlg-kicker {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--brass-ink);
  margin: 0 0 .4rem;
  text-transform: uppercase;
}
dialog.velvet h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
dialog.velvet p { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .95rem; }
dialog.velvet .dlg-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
dialog.velvet .dlg-hint {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-faint);
  border-top: 1px dashed var(--line-strong);
  padding-top: .8rem;
}
dialog.velvet[open], [popover]:popover-open {
  animation: stage-in .38s cubic-bezier(.3, 1.4, .4, 1);
}
@keyframes stage-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
}
dialog.pinned {
  position: static;
  display: block;
  border: 2px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--case-2);
  color: var(--ink-soft);
  padding: 1rem 1.2rem;
  max-width: 26rem;
  font-size: .88rem;
  margin: 0;
}
dialog.pinned .pin-label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--red);
  text-transform: uppercase;
  display: block;
  margin-bottom: .4rem;
}

/* ---------- popover exhibit ---------- */
.pop-card {
  border: 2px solid var(--green-ink);
  border-radius: 12px;
  background: var(--case);
  color: var(--ink);
  padding: 0;
  width: min(21rem, calc(100vw - 3rem));
  box-shadow: var(--shadow-lift);
}
.pop-card .pop-head {
  background: var(--green-ink);
  color: var(--case);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  padding: .5rem .9rem;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}
.pop-card .pop-head .dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--red);
  margin-right: .6rem;
}
.pop-card .pop-body { padding: 1rem 1.1rem 1.2rem; }
.pop-card .pop-body p { margin: 0 0 .7rem; font-size: .92rem; color: var(--ink-soft); }
.pop-card .pop-actions { display: flex; justify-content: flex-end; gap: .5rem; }
@supports (anchor-name: --x) {
  .anchor-btn { anchor-name: var(--an); }
  .anchored { position-anchor: var(--an); position-area: block-start; margin-bottom: .8rem; }
}
.toast {
  border-radius: 10px;
  border: 2px solid var(--brass);
  background: var(--green-ink);
  color: var(--case);
  padding: .9rem 1.2rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  box-shadow: var(--shadow-lift);
  inset-block-end: 1.2rem;
  inset-block-start: auto;
  inset-inline: auto;
  margin: 0 auto;
}
.toast b { color: var(--brass-2); }

/* ---------- invoker console ---------- */
.console {
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.console-pad {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  padding: 1rem 1.2rem;
  background: var(--paper-3);
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.12);
}
body:has(#lights:checked) .console-pad { background: var(--paper-2); }
.console-pad .btn { min-width: 9.5rem; }
.crt {
  border: 2px solid var(--green-ink);
  border-radius: 10px;
  background: var(--code-bg);
  color: var(--green-bright);
  font-family: var(--font-mono);
  padding: 1.1rem 1.3rem;
  width: min(24rem, calc(100vw - 3rem));
  font-size: .85rem;
  box-shadow: var(--shadow-lift);
}
.crt .scan {
  height: .6rem;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(126,226,160,.25) 2px 3px);
  border-radius: 4px;
  margin-bottom: .7rem;
}
.crt b { color: var(--brass-2); }

/* ---------- accordion drawers ---------- */
.accordions {
  width: min(34rem, 100%);
  display: grid;
  gap: .8rem;
}
.accordions details {
  background: var(--case);
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--line);
}
.accordions summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.1rem;
  font-weight: 600;
  font-size: 1rem;
  user-select: none;
}
.accordions summary::-webkit-details-marker { display: none; }
.accordions summary .hall {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  color: var(--case);
  background: var(--green);
  border-radius: 4px;
  padding: .15rem .45rem;
  letter-spacing: .08em;
}
.accordions summary .chev {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--brass-ink);
  transition: transform .3s ease;
}
.accordions details[open] summary .chev { transform: rotate(180deg); }
.accordions summary:hover { background: var(--case-2); }
.accordions .panel {
  padding: .2rem 1.2rem 1.1rem;
  color: var(--ink-soft);
  font-size: .92rem;
  border-top: 1px dashed var(--line);
}
@supports (interpolate-size: allow-keywords) {
  .accordions details {
    interpolate-size: allow-keywords;
  }
  .accordions details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .35s ease, content-visibility .35s allow-discrete;
  }
  .accordions details[open]::details-content {
    block-size: auto;
  }
}

/* ---------- card catalogue (datalist) ---------- */
.catalogue {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  width: min(30rem, 100%);
}
.catalogue .searchbox {
  display: grid;
  gap: .45rem;
  width: 100%;
}
.field-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.catalogue input[list] {
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: .85rem 1rem;
  border: 2px solid var(--green-ink);
  border-radius: 9px;
  background: var(--case);
  color: var(--ink);
  width: 100%;
  box-shadow: 3px 3px 0 var(--line);
}
.catalogue input[list]:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.tick-demo { width: 100%; }
.tick-demo input[type="range"] { width: 100%; accent-color: var(--green); }

/* ---------- instrument panel ---------- */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: .9rem;
  width: 100%;
}
.dial {
  background: var(--case);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  padding: .9rem 1rem 1rem;
  display: grid;
  gap: .55rem;
  align-content: start;
}
.dial .d-name {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: .4rem;
}
.dial input, .dial select {
  font-family: var(--font-mono);
  font-size: .92rem;
  padding: .45rem .55rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 7px;
  background: var(--case-2);
  color: var(--ink);
  accent-color: var(--green);
  width: 100%;
}
.dial input[type="color"] { height: 2.8rem; padding: .15rem; cursor: pointer; }
.dial input[type="range"] { padding-inline: 0; }
.dial input[type="checkbox"] { width: 1.3rem; height: 1.3rem; }
.dial input[type="checkbox"][switch] { width: auto; height: auto; }
.dial .d-note { font-size: .7rem; font-family: var(--font-mono); color: var(--ink-faint); }
.dial input[type="range"].fancy {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
}
.dial input[type="range"].fancy::-webkit-slider-runnable-track {
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--brass-2));
  border: 1px solid var(--green-ink);
}
.dial input[type="range"].fancy::-webkit-slider-thumb {
  appearance: none;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--case);
  border: 3px solid var(--green-ink);
  margin-top: -.48rem;
  box-shadow: 1px 2px 0 rgba(0,0,0,.3);
  cursor: grab;
}
.dial input[type="range"].fancy::-moz-range-track {
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--brass-2));
  border: 1px solid var(--green-ink);
}
.dial input[type="range"].fancy::-moz-range-thumb {
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--case);
  border: 3px solid var(--green-ink);
  cursor: grab;
}

/* ---------- requisition form ---------- */
.requisition {
  width: min(34rem, 100%);
  display: grid;
  gap: 1rem;
}
.requisition fieldset {
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.2rem;
  display: grid;
  gap: .9rem;
  background: var(--case);
}
.requisition legend {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-ink);
  padding: 0 .5rem;
}
.requisition .f-row { display: grid; gap: .35rem; }
.requisition .f-row label {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-soft);
}
.requisition .f-row label .req { color: var(--red); font-weight: 700; }
.requisition input, .requisition select, .requisition textarea {
  font-family: var(--font-body);
  font-size: .95rem;
  padding: .6rem .75rem;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: var(--case);
  color: var(--ink);
  width: 100%;
}
.requisition textarea {
  resize: vertical;
  min-height: 4.5rem;
}
@supports (field-sizing: content) {
  .requisition textarea { field-sizing: content; max-height: 12rem; }
}
.requisition input:user-valid, .requisition select:user-valid, .requisition textarea:user-valid {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green-soft) 45%, var(--case));
}
.requisition input:user-invalid, .requisition textarea:user-invalid {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--case));
}
.requisition .consent { display: flex; gap: .6rem; align-items: start; font-size: .88rem; }
.requisition .consent input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--green); }
.requisition .f-hint { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-faint); }
.granted-slip {
  display: none;
  border: 2px dashed var(--green);
  border-radius: 10px;
  background: var(--green-soft);
  padding: 1rem 1.2rem;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--green-deep);
}
.granted-slip:target { display: block; animation: stage-in .5s cubic-bezier(.3,1.4,.4,1); }
.granted-slip b { display: block; font-size: 1rem; margin-bottom: .25rem; }

/* ---------- vitals ---------- */
.vitals {
  width: min(34rem, 100%);
  display: grid;
  gap: .8rem;
}
.vital {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  gap: .8rem;
  align-items: center;
  background: var(--case);
  border: 1.5px solid var(--line-strong);
  border-radius: 9px;
  padding: .7rem 1rem;
}
.vital .v-name { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.vital .v-val { font-family: var(--font-mono); font-size: .72rem; color: var(--brass-ink); text-align: right; }
.vital meter, .vital progress { width: 100%; height: 1.1rem; }
.vital progress { accent-color: var(--green); }
.vital progress:indeterminate { accent-color: var(--brass-ink); }

/* ---------- vault (lazy loading) ---------- */
.vault {
  width: min(34rem, 100%);
  border: 2px solid var(--green-ink);
  border-radius: 12px;
  background: var(--code-bg);
  overflow: hidden;
}
.vault-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--green-ink);
  color: var(--case);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  padding: .55rem 1rem;
  text-transform: uppercase;
}
.vault-bar .arrow { margin-left: auto; color: var(--brass-2); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }
.vault-scroll {
  height: 21rem;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  display: grid;
  gap: 0;
}
.crate {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: .9rem 1.1rem;
  border-bottom: 1px dashed #2c3a28;
  color: var(--code-ink);
}
.crate:last-child { border-bottom: 0; }
.crate img {
  width: 5rem; height: 5rem;
  border-radius: 8px;
  border: 1.5px solid #3a4a34;
  background: #0d130e;
}
.crate .c-name { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--green-bright); }
.crate .c-meta { font-family: var(--font-mono); font-size: .66rem; color: #7d9070; }

/* ---------- until found ---------- */
.fossil-case { text-align: center; display: grid; gap: 1.1rem; justify-items: center; }
.fossil {
  border: 2px solid var(--brass);
  border-radius: 12px;
  background: var(--brass-soft);
  padding: 1.4rem 1.6rem;
  max-width: 28rem;
}
.fossil:not([hidden]) { animation: stage-in .5s cubic-bezier(.3,1.4,.4,1); }
.fossil .f-tag {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  color: var(--red);
  text-transform: uppercase;
}
.fossil h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  color: var(--green-deep);
  margin: .3rem 0;
  text-transform: uppercase;
}
.fossil p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* ---------- diorama ---------- */
.diorama {
  width: min(40rem, 100%);
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--code-bg);
  box-shadow: var(--shadow);
}
.dio-reel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.dio-reel figure {
  margin: 0;
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
}
.dio-reel img { display: block; width: 100%; height: auto; }
.dio-reel figure:target { outline: 4px solid var(--brass-2); outline-offset: -4px; }
.dio-nav {
  display: flex;
  gap: .5rem;
  justify-content: center;
  padding: .7rem;
  background: var(--case);
  border-top: 2px solid var(--line);
}
.dio-nav a {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--green-deep);
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  padding: .3rem .8rem;
  background: var(--case);
}
.dio-nav a:hover { background: var(--green); color: var(--case); border-color: var(--green-ink); }

/* ---------- living placard ---------- */
.editable {
  width: min(30rem, 100%);
  background: var(--case);
  border: 2px solid var(--brass);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 1.4rem 1.6rem;
  position: relative;
  font-size: .95rem;
}
.editable::before {
  /* brass pin */
  content: "";
  position: absolute;
  top: -.55rem; left: 50%;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-2), var(--brass) 65%, #6d4c0e);
  box-shadow: 0 2px 3px rgba(0,0,0,.35);
}
.editable [contenteditable] {
  outline: none;
  border-radius: 6px;
  padding: .3rem .4rem;
  transition: box-shadow .2s;
}
.editable [contenteditable]:hover { box-shadow: 0 0 0 2px var(--brass-2); }
.editable [contenteditable]:focus { box-shadow: 0 0 0 3px var(--green); background: var(--case-2); }
.editable .ed-label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--brass-ink);
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.editable [contenteditable] p { margin: .2rem 0; }

/* ---------- cabinet of small wonders ---------- */
.cabinet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .7rem;
  width: 100%;
}
.mini {
  background: var(--case);
  border: 1.5px solid var(--line-strong);
  border-radius: 9px;
  padding: .75rem .85rem;
  display: grid;
  gap: .45rem;
  align-content: start;
  position: relative;
}
.mini::before {
  content: "";
  position: absolute;
  top: .5rem; right: .5rem;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--red);
  opacity: .65;
}
.mini .m-tag {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  color: var(--green-deep);
  border-bottom: 1px solid var(--line);
  padding-bottom: .35rem;
}
.mini .m-demo { font-size: .84rem; color: var(--ink-soft); }
.mini .m-demo abbr { text-decoration-style: dotted; cursor: help; }
.mini .m-demo kbd {
  border: 1px solid var(--line-strong);
  border-bottom-width: 2.5px;
  border-radius: 5px;
  padding: .05rem .4rem;
  background: var(--case-2);
  font-size: .85em;
}
.mini .m-demo mark { background: var(--brass-2); color: var(--ink); border-radius: 3px; padding: 0 .2em; }
.mini .m-demo input[type="search"] {
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: .35rem .5rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  width: 100%;
  background: var(--case-2);
  color: var(--ink);
}
.mini .m-demo ol { margin: 0; padding-left: 1.4rem; }
.mini .m-demo details summary { cursor: pointer; font-family: var(--font-mono); font-size: .78rem; color: var(--green-deep); }
.mini .m-demo details .panel { font-size: .78rem; padding-top: .3rem; }
.mini .m-demo samp, .mini .m-demo output { font-size: .8em; }
.mini .m-demo .microform { display: flex; gap: .4rem; align-items: center; }
.mini .m-demo .microform input { width: 3.4rem; padding: .25rem .4rem; font-family: var(--font-mono); font-size: .8rem; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--case-2); color: var(--ink); }
.mini .m-demo .microform output { font-weight: 700; color: var(--green-deep); font-family: var(--font-mono); }

/* ---------- retired specimen ---------- */
.basement {
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 0;
}
.retired {
  border: 2px dashed var(--red);
  border-radius: 14px;
  padding: 1.4rem;
  background: repeating-linear-gradient(-45deg, transparent 0 18px, color-mix(in srgb, var(--red) 5%, transparent) 18px 36px);
}
.retired .r-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--red);
  text-transform: uppercase;
  display: flex;
  gap: .6rem;
  align-items: center;
  margin-bottom: .8rem;
}
.retired .r-label::before { content: "⚠"; font-size: 1rem; }
.retired marquee {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--ink-soft);
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--case);
  padding: .7rem 0;
}
.retired .r-note { font-size: .82rem; color: var(--ink-faint); margin: .8rem 0 0; }
.annex { margin: 1.4rem 0 0; }
.annex img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow);
}
.annex figcaption {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-faint);
  margin-top: .7rem;
  text-align: center;
}

/* ---------- pull-quote bands ---------- */
.band {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--green-ink);
  color: var(--case);
  text-align: center;
  padding: clamp(2.2rem, 5vw, 3.6rem) 1.25rem;
  border-block: 3px solid var(--brass);
  position: relative;
  overflow: hidden;
}
.band::before {
  content: "< / >";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 26rem;
  color: var(--case);
  opacity: .045;
  pointer-events: none;
}
.band p {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.4vw, 4rem);
  text-transform: uppercase;
  margin: 0 auto;
  max-width: 60rem;
  line-height: 1.02;
}
.band p mark { background: none; color: var(--green-bright); }
.band small {
  position: relative;
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--brass-2);
  text-transform: uppercase;
}

/* ---------- footer ---------- */
.colophon {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--paper-2);
  border-top: 3px double var(--line-strong);
  padding: clamp(2.5rem, 5vw, 4rem) 1.25rem 2.5rem;
}
.colophon-inner { max-width: 78rem; margin: 0 auto; display: grid; gap: 1.6rem; }
.colophon h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  text-transform: uppercase;
}
.colophon p { margin: 0; max-width: 46rem; color: var(--ink-soft); }
.colophon .seal {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--green-deep);
  border: 2px solid var(--green);
  border-radius: 8px;
  padding: .6rem 1rem;
  width: fit-content;
  transform: rotate(-1.2deg);
  background: var(--case);
}
.colophon .seal .check {
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--case);
  display: inline-grid;
  place-items: center;
  font-size: .8rem;
}
.colophon .fineprint {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
}
.to-top { margin-left: auto; }

/* ---------- entrance motion (load-time only — content can never strand hidden) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero-art, .map-intro, .tickets li {
    animation: exhibit-in .7s cubic-bezier(.2,.8,.3,1) backwards;
  }
  .hero-art { animation-delay: .15s; }
  .map-intro { animation-delay: .1s; }
  .tickets li:nth-child(2) { animation-delay: .06s; }
  .tickets li:nth-child(3) { animation-delay: .12s; }
  .tickets li:nth-child(4) { animation-delay: .18s; }
  .tickets li:nth-child(5) { animation-delay: .24s; }
  .tickets li:nth-child(6) { animation-delay: .3s; }
  .tickets li:nth-child(7) { animation-delay: .36s; }
  .tickets li:nth-child(8) { animation-delay: .42s; }
  .tickets li:nth-child(9) { animation-delay: .48s; }
  .tickets li:nth-child(10) { animation-delay: .54s; }
  .tickets li:nth-child(11) { animation-delay: .6s; }
  .tickets li:nth-child(12) { animation-delay: .66s; }
  .tickets li:nth-child(13) { animation-delay: .72s; }
  @keyframes exhibit-in {
    from { opacity: 0; transform: translateY(1.4rem); }
  }
}

/* target flash when jumped to */
.exhibit:target .case { animation: target-flash 1.4s ease; }
@keyframes target-flash {
  0%, 40% { box-shadow: 0 0 0 5px var(--green-bright), var(--shadow); }
  100% { box-shadow: var(--shadow); }
}

/* ---------- responsive ---------- */
@media (max-width: 62rem) {
  .case-body { grid-template-columns: 1fr; }
  .placard { border-right: 0; border-bottom: 2px solid var(--line); }
  .hero { grid-template-columns: 1fr; gap: 2rem; }
  .hero-art img { width: min(52%, 15rem); }
  .hero h1 { font-size: clamp(3rem, 15vw, 5.5rem); }
  .masthead { flex-wrap: wrap; row-gap: .2rem; }
  .mastnav { order: 3; flex-basis: 100%; }
}
@media (max-width: 40rem) {
  html { scroll-padding-top: 7rem; }
  .vital { grid-template-columns: 1fr; gap: .35rem; }
  .vital .v-val { text-align: left; }
  .hero-stats { gap: 1rem; }
  .js-stamp { display: none; }
  .brand em { display: none; }
  .case-head .aka { flex-basis: 100%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ribbon-track { animation: none; }
}