/* ==========================================================================
   HTML Can Do That?! — a living exhibition
   Dark gallery identity · Archivo Black display · Space Grotesk body
   ========================================================================== */

:root {
  --ink: #0d0b1e;
  --ink-2: #16122e;
  --ink-3: #1f1940;
  --paper: #f5f1e8;
  --muted: #a9a3c7;
  --line: #332b5e;
  --accent: #ff3d81;
  --pink: #ff3d81;
  --cyan: #2dd4ff;
  --amber: #ffb020;
  --lime: #9dff3d;
  --violet: #b18cff;
  --orange: #ff6b3d;
  --mint: #3dffb2;
  --red: #ff3d3d;
  --radius: 18px;
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html {
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(255, 61, 129, 0.14), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(45, 212, 255, 0.10), transparent 60%),
    var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pink); color: var(--ink); }

code, kbd, pre { font-family: var(--font-mono); }
code { font-size: 0.92em; color: var(--cyan); }
kbd {
  font-size: 0.8em;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 0.1em 0.45em;
}

a { color: var(--cyan); }
a:hover { color: var(--paper); }

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

.skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: 1rem;
  z-index: 50;
  background: var(--amber);
  color: var(--ink);
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-radius: 0 0 12px 12px;
  transition: inset-block-start 0.2s;
}
.skip-link:focus { inset-block-start: 0; color: var(--ink); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.2rem;
  background: rgba(13, 11, 30, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--paper);
}
.brand-mark {
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--pink);
  color: var(--ink);
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
}
.brand-name { font-weight: 700; letter-spacing: -0.01em; }
.brand-name em { color: var(--pink); font-style: italic; }

.menu-button {
  display: none;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--amber);
  border: 0;
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.mobile-nav {
  background: var(--ink-2);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  color: var(--paper);
  width: min(320px, 86vw);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}
.mobile-nav::backdrop { background: rgba(13, 11, 30, 0.5); }
.mobile-nav-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--amber);
}
.mobile-nav ol { margin: 0; padding-inline-start: 1.4rem; display: grid; gap: 0.35rem; }
.mobile-nav a { color: var(--paper); text-decoration: none; }
.mobile-nav a:hover { color: var(--amber); }

/* ---------- Shell / sidebar ---------- */

.shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 2.5rem;
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 1.5rem;
}

.side-nav {
  position: sticky;
  inset-block-start: 84px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-block: 1.5rem;
  scrollbar-width: thin;
}
.side-nav-title {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.side-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-nav a {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.42rem 0.7rem;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  border-inline-start: 3px solid transparent;
  transition: color 0.15s, background 0.15s;
}
.side-nav a:hover { color: var(--paper); background: var(--ink-2); }
.side-nav a[aria-current="true"] {
  color: var(--paper);
  background: var(--ink-2);
  border-inline-start-color: var(--pink);
}
.side-nav .nav-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--pink);
}
.side-nav code { color: inherit; }
.side-nav-note {
  margin-block-start: 1.2rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-block-start: 0.9rem;
}
.side-nav-note strong { color: var(--lime); }

/* ---------- Hero ---------- */

.hero {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 4rem 2rem;
  position: relative;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  margin: 0 0 1rem;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8.5vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}
.hero-title .line { display: block; }
.hero-title em {
  font-style: italic;
  background: linear-gradient(92deg, var(--pink), var(--amber) 55%, var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title .q { color: var(--cyan); }
.hero-lede {
  max-width: 56ch;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--muted);
  margin: 0 0 1.6rem;
}
.hero-lede strong { color: var(--paper); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  margin: 2.4rem 0 0;
}
.hero-stats div { margin: 0; }
.hero-stats dt {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--pink);
}
.hero-stats div:nth-child(2) dt { color: var(--cyan); }
.hero-stats div:nth-child(3) dt { color: var(--lime); }
.hero-stats dd { margin: 0; color: var(--muted); font-size: 0.9rem; }

.hero-popover {
  max-width: min(430px, 88vw);
  background: var(--ink-2);
  color: var(--paper);
  border: 2px solid var(--pink);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: 0 24px 70px rgba(255, 61, 129, 0.25), 0 10px 30px rgba(0, 0, 0, 0.55);
}
.hero-popover-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.hero-popover p { margin: 0 0 0.8rem; font-size: 0.95rem; color: var(--muted); }
.hero-popover code { color: var(--cyan); }

.marquee {
  margin-block-start: 3rem;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 0.55rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 2.4rem;
  width: max-content;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  animation: marquee 28s linear infinite;
}
.marquee-track span::before { content: "<"; color: var(--pink); }
.marquee-track span::after { content: ">"; color: var(--pink); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  padding: 0.75rem 1.3rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-primary {
  background: var(--pink);
  color: var(--ink);
  box-shadow: 5px 5px 0 rgba(255, 61, 129, 0.35);
}
.btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(255, 61, 129, 0.35); color: var(--ink); }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(255, 61, 129, 0.35); }
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--paper); color: var(--paper); }
.btn-big {
  font-size: 1.15rem;
  padding: 1rem 1.8rem;
  background: var(--accent, var(--pink));
  color: var(--ink);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--accent, var(--pink)) 40%, transparent);
}
.btn-big:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 9px 9px 0 color-mix(in srgb, var(--accent, var(--pink)) 40%, transparent); color: var(--ink); }
.btn-big:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 color-mix(in srgb, var(--accent, var(--pink)) 40%, transparent); }
.btn-small { font-size: 0.88rem; padding: 0.45rem 0.9rem; background: var(--paper); color: var(--ink); }
.btn-small:hover { color: var(--ink); background: var(--amber); }
.btn-remote {
  background: var(--ink-3);
  color: var(--paper);
  border: 2px solid var(--accent, var(--line));
  font-family: var(--font-mono);
  font-size: 0.95rem;
}
.btn-remote:hover { background: var(--accent, var(--pink)); color: var(--ink); }

/* ---------- Exhibits ---------- */

.exhibit {
  margin-block: 3.5rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 30%), var(--ink-2);
  overflow: clip;
  position: relative;
}
.exhibit::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
}
.exhibit:target {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
}

.exhibit-head {
  padding: 2.2rem 2.4rem 0.8rem;
  position: relative;
}
.exhibit-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem;
}
.exhibit-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
  line-height: 1.05;
}
.exhibit-head h2 code { color: var(--accent); font-size: 0.95em; }
.exhibit-lede {
  max-width: 62ch;
  color: var(--muted);
  margin: 0 0 1rem;
}
.exhibit-lede strong, .exhibit-lede code { color: var(--paper); }
.exhibit-lede code { color: var(--accent); }

/* ---------- Support block ---------- */

.support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  font-size: 0.85rem;
}
.badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
}
.badge-baseline { background: rgba(157, 255, 61, 0.14); color: var(--lime); border: 1px solid rgba(157, 255, 61, 0.4); }
.badge-new { background: rgba(255, 176, 32, 0.14); color: var(--amber); border: 1px solid rgba(255, 176, 32, 0.4); }
.browsers { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.browsers span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--muted);
}
.browsers span.ok::before { content: "● "; color: var(--lime); font-size: 0.65rem; vertical-align: 0.12em; }

.support-more { flex-basis: 100%; font-size: 0.85rem; }
.support-more summary {
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  width: fit-content;
}
.support-more summary:hover { color: var(--paper); }
.support-more table {
  margin-block-start: 0.6rem;
  border-collapse: collapse;
  width: 100%;
  max-width: 640px;
  color: var(--muted);
}
.support-more th, .support-more td {
  text-align: start;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  vertical-align: top;
}
.support-more th { color: var(--paper); font-family: var(--font-mono); font-size: 0.75rem; white-space: nowrap; background: var(--ink-3); }
.support-more code { color: var(--accent); }

/* ---------- Stage ---------- */

.stage {
  margin: 1.4rem;
  padding: 2.6rem 1.8rem;
  border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: var(--radius);
  background:
    radial-gradient(600px 300px at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(255, 255, 255, 0.025) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(255, 255, 255, 0.025) 27px 28px),
    var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  position: relative;
  min-height: 260px;
}
.stage-label {
  position: absolute;
  inset-block-start: -0.85rem;
  inset-inline-start: 1.2rem;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
}
.stage-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 46ch;
}

/* ---------- Snippets ---------- */

.snippet {
  margin: 0 1.4rem 2rem;
  position: relative;
  background: #0a0817;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
}
.snippet figcaption {
  padding: 0.65rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.snippet pre {
  margin: 0;
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
  tab-size: 2;
}
.snippet code { color: #cdc7ec; }
.copy-btn {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  z-index: 2;
}
.copy-btn:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.copy-btn.copied { color: var(--ink); background: var(--lime); border-color: var(--lime); }

/* syntax tokens (painted by furniture JS) */
.tok-tag { color: var(--pink); }
.tok-attr { color: var(--amber); }
.tok-val { color: var(--lime); }
.tok-comment { color: #5d5686; font-style: italic; }

/* ---------- Exhibit 01: popover ---------- */

.ticket {
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  width: min(360px, 86vw);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 0 6px rgba(255, 61, 129, 0.25);
  /* open/close animation */
  transition: opacity 0.22s ease, transform 0.22s ease, display 0.22s allow-discrete, overlay 0.22s allow-discrete;
}
.ticket:not(:popover-open) { opacity: 0; transform: translateY(14px) scale(0.96); }
@starting-style { .ticket:popover-open { opacity: 0; transform: translateY(14px) scale(0.96); } }
.ticket-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pink);
  border-block: 2px dashed var(--pink);
  padding-block: 0.35rem;
}
.ticket-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  margin: 0.7rem 0 0.4rem;
}
.ticket-body { color: #4a4468; font-size: 0.95rem; }
.ticket code { color: #b0205a; }

/* ---------- Exhibit 02: dialog ---------- */

.modal {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  width: min(520px, 90vw);
  background: var(--ink-2);
  color: var(--paper);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8), 0 0 0 2px var(--cyan);
  transition: opacity 0.25s ease, transform 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
}
.modal:not([open]) { opacity: 0; transform: translateY(24px) scale(0.97); }
@starting-style { .modal[open] { opacity: 0; transform: translateY(24px) scale(0.97); } }
.modal::backdrop {
  background: rgba(9, 7, 22, 0.66);
  backdrop-filter: blur(6px);
}
.modal form { padding: 2rem 2.2rem; text-align: start; }
.modal-kicker {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cyan);
}
.modal h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 0.7rem;
  line-height: 1.15;
}
.modal p { color: var(--muted); margin: 0 0 1.2rem; }
.modal code { color: var(--cyan); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.modal-result {
  margin: 0;
  min-height: 1.4em;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--lime);
}

/* ---------- Exhibit 03: accordion ---------- */

.stage-accordion { align-items: stretch; text-align: start; }
.accordion { width: min(640px, 100%); margin-inline: auto; display: grid; gap: 0.7rem; }
.accordion details {
  background: var(--ink-2);
  border: 2px solid var(--line);
  border-radius: 14px;
  overflow: clip;
  transition: border-color 0.2s;
}
.accordion details[open] { border-color: var(--accent); }
.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.2rem;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 8px;
  background: var(--ink-3);
  color: var(--accent);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.accordion details[open] summary::before { transform: rotate(45deg); background: var(--accent); color: var(--ink); }
.acc-body { padding: 0 1.2rem 1.1rem 3.5rem; color: var(--muted); }
.acc-body p { margin: 0; }
.acc-body code { color: var(--accent); }
@supports (interpolate-size: allow-keywords) {
  .accordion { interpolate-size: allow-keywords; }
  .accordion details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .accordion details[open]::details-content { block-size: auto; }
}

/* ---------- Exhibit 04: invokers ---------- */

.remote { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.stage-invokers .btn-remote { --accent: var(--lime); }
.toast {
  inset-block: auto 6vh;
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  max-width: min(420px, 88vw);
  background: var(--lime);
  color: var(--ink);
  border: 0;
  border-radius: 14px;
  padding: 1rem 1.3rem;
  font-size: 0.95rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
}
.toast:not(:popover-open) { opacity: 0; transform: translateY(12px); }
@starting-style { .toast:popover-open { opacity: 0; transform: translateY(12px); } }
.toast p { margin: 0 0 0.6rem; }

/* ---------- Exhibit 05: pickers ---------- */

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 780px;
}
.picker-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  background: var(--ink-2);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  text-align: start;
  transition: border-color 0.2s, transform 0.2s;
}
.picker-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.picker-name { font-weight: 700; }
.picker-note { font-size: 0.78rem; color: var(--muted); }
.picker-note code { color: var(--accent); }
.picker-card input {
  font: inherit;
  accent-color: var(--accent);
  color-scheme: dark;
}
.picker-card input[type="color"] {
  inline-size: 100%;
  block-size: 64px;
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: none;
  cursor: pointer;
}
.picker-card input[type="range"] { inline-size: 100%; cursor: pointer; }
.picker-card input[type="date"], .picker-card input[type="time"] {
  background: var(--ink-3);
  color: var(--paper);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}
.picker-card input[type="date"]:focus, .picker-card input[type="time"]:focus { border-color: var(--accent); outline: none; }
#picker-readout { font-family: var(--font-mono); font-size: 0.82rem; }

/* ---------- Exhibit 06: datalist ---------- */

.datalist-field { display: grid; gap: 0.6rem; width: min(480px, 100%); }
.datalist-label { font-weight: 700; font-size: 1.1rem; }
.datalist-field input {
  font: inherit;
  font-size: 1.15rem;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--ink-2);
  color: var(--paper);
  color-scheme: dark;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.datalist-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ---------- Exhibit 07: validation ---------- */

.guest-form {
  display: grid;
  gap: 1rem;
  width: min(480px, 100%);
  text-align: start;
}
.guest-form label { display: grid; gap: 0.35rem; font-weight: 700; }
.guest-form label em {
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted);
}
.guest-form input {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--ink-2);
  color: var(--paper);
  transition: border-color 0.15s;
}
.guest-form input:focus { outline: none; border-color: var(--accent); }
.guest-form input:user-valid { border-color: var(--lime); }
.guest-form input:user-invalid { border-color: var(--red); }
.guest-form .btn { justify-self: start; --accent: var(--mint); }
.form-success {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: rgba(61, 255, 178, 0.12);
  border: 1px solid var(--mint);
  color: var(--mint);
  font-size: 0.95rem;
}

/* ---------- Exhibit 08: meters ---------- */

.meter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 780px;
}
.meter-card {
  background: var(--ink-2);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  text-align: start;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.meter-name { margin: 0; font-weight: 700; font-size: 0.95rem; }
.meter-reading { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.meter-card meter, .meter-card progress {
  inline-size: 100%;
  block-size: 18px;
  accent-color: var(--accent);
}
.meter-card progress { color-scheme: dark; }

/* ---------- Exhibit 09: media ---------- */

.audio-figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 1rem;
}
.vinyl {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--ink) 0 18%, transparent 18%),
    repeating-radial-gradient(circle at 50% 50%, #221c46 0 4px, #14102c 4px 8px);
  border: 3px solid var(--cyan);
  display: grid;
  place-items: center;
}
.vinyl span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cyan);
}
@media (prefers-reduced-motion: no-preference) {
  .audio-figure:has(audio:active) .vinyl { animation: spin 1.8s linear infinite; }
  @keyframes spin { to { transform: rotate(1turn); } }
}
.audio-caption { color: var(--muted); font-size: 0.95rem; }
.audio-figure audio { inline-size: min(420px, 82vw); color-scheme: dark; accent-color: var(--cyan); }

/* ---------- Exhibit 10: editable ---------- */

.editable-card {
  width: min(560px, 100%);
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  padding: 1.6rem 1.8rem;
  text-align: start;
  box-shadow: 8px 8px 0 rgba(255, 176, 32, 0.35);
  transform: rotate(-0.6deg);
  position: relative;
}
.editable-hint {
  position: absolute;
  inset-block-start: -0.8rem;
  inset-inline-end: 0.9rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--amber);
  color: var(--ink);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}
.editable-area {
  margin: 0;
  font-size: 1.25rem;
  min-height: 3.2em;
  font-weight: 500;
  caret-color: var(--pink);
}
.editable-area:focus { outline: 3px dashed var(--pink); outline-offset: 6px; border-radius: 4px; }

/* ---------- Exhibit 11: lazy ---------- */

.lazy-counter {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--lime);
}
.corridor {
  max-height: 540px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  padding: 0.4rem;
  scroll-snap-type: y proximity;
  border-radius: 12px;
}
.poster {
  margin: 0;
  position: relative;
  border-radius: 12px;
  overflow: clip;
  border: 2px solid var(--line);
  scroll-snap-align: start;
  background: linear-gradient(110deg, var(--ink-3) 30%, #2b2355 50%, var(--ink-3) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -120% 0; } }
.poster:has(img.loaded) { animation: none; background: none; }
.poster img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 0.5s; }
.poster img.loaded { opacity: 1; }
.lazy-badge {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(13, 11, 30, 0.85);
  color: var(--amber);
  border: 1px solid var(--amber);
}
.lazy-badge.loaded { color: var(--lime); border-color: var(--lime); }

/* ---------- Exhibit 12: until-found ---------- */

.stage-treasure .btn-big { --accent: var(--pink); }
.treasure-copy { margin: 0; max-width: 48ch; color: var(--muted); }
.treasure {
  margin-block-start: 1rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  padding: 1.6rem 1.8rem;
  max-width: 420px;
  box-shadow: 0 0 0 4px var(--pink), 0 24px 60px rgba(255, 61, 129, 0.35);
}
.treasure-trophy {
  margin: 0;
  font-size: 3.4rem;
  line-height: 1;
}
.treasure-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0.5rem 0;
}
.treasure p:last-child { margin: 0; color: #4a4468; font-size: 0.92rem; }
.treasure code { color: #b0205a; }
.treasure[hidden] {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
  .treasure:target .treasure-trophy { animation: trophy 0.9s cubic-bezier(0.3, 1.6, 0.5, 1); }
  @keyframes trophy {
    0% { transform: scale(0) rotate(-30deg); }
    70% { transform: scale(1.25) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
  }
}

/* ---------- Exhibit 13: smooth scroll ---------- */

.lift { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.stage-smooth .btn-remote { --accent: var(--violet); }
.stage-smooth .btn-primary { --accent: var(--violet); background: var(--violet); box-shadow: 5px 5px 0 rgba(177, 140, 255, 0.35); }

/* ---------- Outro & footer ---------- */

.outro {
  margin-block: 5rem 3rem;
  text-align: center;
  padding-inline: 1rem;
}
.outro h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 0.8rem;
  background: linear-gradient(92deg, var(--cyan), var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.outro > p { color: var(--muted); max-width: 52ch; margin: 0 auto 1rem; }
.outro-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-block: 1.6rem !important; }
.honesty {
  font-size: 0.85rem;
  border-top: 1px dashed var(--line);
  padding-block-start: 1.2rem;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.2rem 1.5rem 3rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-footer p { margin: 0.3rem 0; }
.footer-meta { font-size: 0.8rem; }

/* ---------- Reveal-on-scroll (JS-gated) ---------- */

.js .exhibit, .js .outro {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .exhibit.in, .js .outro.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .exhibit, .js .outro { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side-nav { display: none; }
  .menu-button { display: inline-block; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .exhibit-head { padding: 1.6rem 1.2rem 0.6rem; }
  .stage { margin: 1rem; padding: 2.2rem 1rem; }
  .snippet { margin: 0 1rem 1.4rem; }
  .hero { min-height: auto; padding-block: 3rem 1rem; }
  .hero-stats { gap: 1.4rem; }
  .acc-body { padding-inline-start: 1.2rem; }
  .corridor { max-height: 480px; }
}