/* components.css — ExamplePDF v1 component library (C01–C26 + wordmark)
   Visual source of truth: stages/06-design/design-source.md §2/§3/§5/§6.
   Rules: zero box-shadow · zero gradients · ember never as fill · mobile-first.
   States covered: hover / focus-visible / active / disabled / loading /
   success / error / empty / scrolled-nav / reduced-motion (design §5). */

/* ============ shared ============ */
.btn, .size-cell, .faq__q, .segmented__opt, .codeblock__copy, .nav__burger {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
}
[id] { scroll-margin-top: 96px; }
img, svg { display: block; max-width: 100%; }

/* ============ C01 pill button — the ONLY solid action surface ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 14px 24px;
  font-size: var(--text-label); line-height: 1;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.btn--pill { background: var(--color-bark-brown); color: var(--color-warm-cream); }
.btn--pill:hover { background: var(--color-bark-hover); transform: translateY(-1px); }
.btn--pill:active { transform: translateY(0); background: var(--color-bark-brown); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--color-bark-brown); transform: none; }
/* loading / done / error (download state machine, design §3.4) */
.btn__spin { display: none; }
.btn.is-loading .btn__spin { display: inline-block; }
.btn.is-done .btn__label { color: var(--color-ember-accent); }
.btn.is-error .btn__label { color: var(--color-ember-accent); }
.spin {
  width: 14px; height: 14px; border-radius: var(--radius-full);
  border: 2px solid rgba(255,237,215,.3); border-top-color: var(--color-warm-cream);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ C02 ghost button ============ */
.btn--ghost {
  background: transparent; color: var(--color-warm-cream);
  border: 1px solid var(--color-warm-cream); border-radius: var(--radius-ghost);
  padding: 11px 22px;
  transition: background var(--dur-2) var(--ease-out);
}
.btn--ghost:hover { background: var(--color-cream-06); }
.btn--ghost:active { background: transparent; }

/* ============ C03 underline text links ============ */
.link-ul {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-label); text-transform: uppercase; letter-spacing: .02em;
  color: var(--color-warm-cream); text-decoration: none;
  border-bottom: 1px dashed rgba(255,237,215,.35); padding-bottom: 2px;
  transition: color var(--dur-1), border-color var(--dur-1), border-bottom-style var(--dur-1);
}
.link-ul:hover { color: var(--color-ember-accent); border-bottom-color: var(--color-ember-accent); border-bottom-style: solid; }
.link-arrow { display: inline-flex; align-items: baseline; gap: 8px; }
.link-arrow__a {
  font-family: var(--font-mono); font-style: normal;
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2);
}
.link-arrow:hover .link-arrow__a { transform: translateX(4px); color: var(--color-ember-accent); }

/* ============ C04 tag ============ */
.tag {
  display: inline-flex; align-items: center;
  border: 1px dashed var(--color-cork-border); border-radius: var(--radius-ghost);
  padding: 5px 12px; min-height: 26px;
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-fineprint); line-height: 1; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-cream-72); background: transparent; text-decoration: none;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.tag--ember { color: var(--color-ember-accent); border-color: var(--color-ember-50); }
a.tag:hover, button.tag:hover { border-color: var(--color-warm-cream); color: var(--color-warm-cream); }
a.tag--ember:hover, button.tag--ember:hover { border-color: var(--color-ember-accent); color: var(--color-ember-accent); }

/* ============ C05 underline input field ============ */
.field { display: flex; flex-direction: column; }
.field__label {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-cream-72); margin-bottom: var(--sp-2);
}
.field__input {
  border: 0; border-bottom: 1px solid rgba(255,237,215,.35);
  background: transparent; border-radius: var(--radius-input);
  color: var(--color-warm-cream); caret-color: var(--color-ember-accent);
  font: var(--fw-regular) 16px var(--font-mono);
  padding: 10px 2px; min-height: 44px; width: 100%;
  transition: border-color var(--dur-1);
}
.field__input::placeholder { color: var(--color-driftwood); }
.field__input:focus { outline: none; border-bottom-color: var(--color-ember-accent); }
.field__input:focus-visible { outline: none; } /* underline IS the focus signal (design C05) */
.field__error { display: none; font: var(--fw-regular) var(--text-mono-sm)/1.5 var(--font-mono); color: var(--color-ember-accent); margin-top: var(--sp-2); }
.field--error .field__input { border-bottom-color: var(--color-ember-accent); }
.field--error .field__error { display: block; }
.field__hint { font: var(--fw-regular) var(--text-mono-sm)/1.5 var(--font-mono); color: var(--color-cream-48); margin-top: var(--sp-2); }

/* ============ C06 checkbox / toggle ============ */
.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.toggle input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0; flex: none;
  border: 1px solid rgba(255,237,215,.5); border-radius: var(--radius-control);
  background: transparent; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur-1), border-color var(--dur-1);
}
.toggle input:checked { background: var(--color-bark-brown); border-color: var(--color-warm-cream); }
.toggle input:checked::after {
  content: "✓"; font-family: var(--font-mono); font-size: 12px; line-height: 1;
  color: var(--color-ember-accent);
}
.toggle__text {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-label); text-transform: uppercase; letter-spacing: .02em;
  color: var(--color-cream-72);
}

/* ============ C07 select (native, restyled) ============ */
.field--select { position: relative; }
.field__select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; }
.field__select option { background: var(--color-walnut-shadow); color: var(--color-warm-cream); }
.field--select::after {
  content: "▾"; position: absolute; right: 4px; bottom: 12px;
  font: var(--fw-regular) var(--text-mono-sm) var(--font-mono);
  color: var(--color-cream-72); pointer-events: none;
}

/* ============ C08 size grid cell — the homepage instrument ============ */
.size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (min-width: 640px)  { .size-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
@media (min-width: 1024px) { .size-grid { grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); } }
.size-cell {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--sp-2); aspect-ratio: 1 / 1; width: 100%;
  border: 1px dashed rgba(255,237,215,.22); border-radius: var(--radius-card);
  padding: var(--sp-4); background: rgba(255,237,215,.045); color: var(--color-warm-cream);
  text-align: left; cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2), border-style var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.size-cell__file { font: var(--fw-regular) 10px/1.3 var(--font-mono); color: var(--color-cream-48); overflow-wrap: anywhere; transition: color var(--dur-1); }
.size-cell__size { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 16px; line-height: 1; text-transform: none; }
.size-cell__note { position: absolute; right: 8px; bottom: 8px; font: var(--fw-regular) 10px/1 var(--font-mono); color: var(--color-cream-48); letter-spacing: .04em; }
.size-cell__status { display: none; font: var(--fw-regular) var(--text-mono-sm)/1.3 var(--font-mono); align-items: center; gap: 6px; }
.size-cell:hover {
  border-style: solid; border-color: rgba(255,237,215,.85); background: rgba(56,36,22,.55);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(220,80,0,.45), 0 2px 14px -6px rgba(255,237,215,.18);
}
.size-cell:hover .size-cell__file { color: var(--color-warm-cream); }
.size-cell:active { background: var(--color-bark-brown); transform: translateY(0); }
@media (min-width: 640px) {
  .size-cell__file { font-size: 12px; }
  .size-cell__size { font-size: 18px; }
}
@media (min-width: 1024px) {
  .size-cell__file { font-size: var(--text-mono); }
  .size-cell__size { font-size: var(--text-heading-sm); }
}
/* download state machine on cells */
.size-cell.is-error .size-cell__status { display: inline-flex; color: var(--color-ember-accent); }
.size-cell.is-error .size-cell__size { display: none; }
/* custom-size gateway cell (12th cell → /generator) */
.size-cell--link { text-decoration: none; color: inherit; }
.size-cell--link .size-cell__size { color: var(--color-cream-72); }
.size-cell--link:hover .size-cell__size { color: var(--color-warm-cream); }
.size-cell--link:hover { border-color: var(--color-ember-accent); box-shadow: 0 12px 28px -14px rgba(220,80,0,.55); }
/* download state machine on cells — warm glow on fetching/done */
.size-cell.is-fetching { background: var(--color-bark-brown); border-color: var(--color-warm-cream); }
.size-cell.is-fetching .size-cell__size,
.size-cell.is-fetching .size-cell__note { display: none; }
.size-cell.is-fetching .size-cell__status { display: inline-flex; }
.size-cell.is-done { border-style: solid; border-color: rgba(220,80,0,.55); background: rgba(220,80,0,.08); box-shadow: 0 10px 30px -12px rgba(220,80,0,.5); }
.size-cell.is-done .size-cell__status { display: inline-flex; color: var(--color-ember-accent); }
.size-cell.is-done .size-cell__size { display: none; }

/* ============ C09 artifact frame — the signature component ============ */
.artifact {
  position: relative; border: 1px dashed var(--color-cork-border); border-radius: var(--radius-card);
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(220,80,0,.10), rgba(16,9,4,0) 60%),
    linear-gradient(180deg, #150c06 0%, #100904 55%, #0d0703 100%);
}
.artifact__caption {
  border-bottom: 1px dashed var(--color-cork-border);
  padding: 12px 16px;
  font: var(--fw-regular) var(--text-mono-sm)/1.5 var(--font-mono);
  color: var(--color-cream-72); letter-spacing: .02em;
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  transition: color var(--dur-2);
}
.artifact__frame { position: relative; padding: var(--sp-6); display: flex; justify-content: center; }
.artifact__sheet { width: 100%; max-width: 340px; height: auto; }
/* V2: lit paper stack — spotlight pool behind, two offset under-sheets, warm glow on the sheet */
.artifact__frame::before { /* amber spotlight pool behind the paper */
  content: ""; position: absolute; left: 50%; top: 52%; width: 120%; height: 82%;
  transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(220,80,0,.26), rgba(220,80,0,.09) 55%, transparent 78%);
  filter: blur(2px);
}
.artifact__frame::after { /* floor glow under the floating paper */
  content: ""; position: absolute; left: 50%; bottom: 6%; width: 62%; height: 14%;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(220,80,0,.30), transparent 75%);
  filter: blur(6px);
}
.artifact__sheet { position: relative; z-index: 2; filter: drop-shadow(0 0 22px rgba(220,80,0,.28)) drop-shadow(0 0 46px rgba(220,80,0,.14)); }
.artifact__sheet .sheet--back, .artifact__sheet .sheet--mid { opacity: 1; }
.js .reveal .artifact__sheet .sheet--back, .js .reveal .artifact__sheet .sheet--mid { opacity: 0; transition: opacity .45s var(--ease-out); }
.reveal.is-in .artifact__sheet .sheet--back { opacity: 1; transition-delay: .28s; }
.reveal.is-in .artifact__sheet .sheet--mid { opacity: 1; transition-delay: .4s; }
/* V2: amber validation stamp fades in after the corners */
.artifact__sheet .sheet-stamp { opacity: .95; transform: rotate(-8deg); transform-origin: center; transform-box: fill-box; }
.js .reveal .artifact__sheet .sheet-stamp { opacity: 0; transform: rotate(-8deg) scale(.8); transition: opacity .4s var(--ease-out) .55s, transform .4s var(--ease-out) .55s; }
.reveal.is-in .artifact__sheet .sheet-stamp { opacity: .95; transform: rotate(-8deg) scale(1); }
.artifact__corner { position: absolute; width: 8px; height: 8px; z-index: 2; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2); }
.artifact__corner svg { width: 8px; height: 8px; }
.artifact__corner--tl { top: -1px; left: -1px; transform-origin: 0 0; }
.artifact__corner--tr { top: -1px; right: -1px; transform-origin: 100% 0; }
.artifact__corner--tr svg { transform: rotate(90deg); }
.artifact__corner--br { bottom: -1px; right: -1px; transform-origin: 100% 100%; }
.artifact__corner--br svg { transform: rotate(180deg); }
.artifact__corner--bl { bottom: -1px; left: -1px; transform-origin: 0 100%; }
.artifact__corner--bl svg { transform: rotate(270deg); }
.artifact--hoverable:hover .artifact__corner { transform: scale(1.2); }
.artifact--hoverable:hover .artifact__caption { color: var(--color-warm-cream); }
/* unveiling choreography: corners pop in (stagger 50ms), then sheet fades (design §3.3) */
.js .reveal .artifact__corner { opacity: 0; transform: scale(0); }
.reveal.is-in .artifact__corner { opacity: 1; transform: scale(1); }
.reveal.is-in .artifact__corner--tr { transition-delay: 50ms; }
.reveal.is-in .artifact__corner--br { transition-delay: 100ms; }
.reveal.is-in .artifact__corner--bl { transition-delay: 150ms; }
.js .reveal .artifact__sheet { opacity: 0; transition: opacity var(--dur-3) var(--ease-out) 200ms; }
.reveal.is-in .artifact__sheet { opacity: 1; }
/* hero float (design §3.5) */
.artifact--float { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-6px); }
  75% { transform: translateY(6px); }
}

/* ============ C10 collection index row ============ */
.row-index {
  display: block; padding: 20px 0;
  border-bottom: 1px dashed var(--color-cork-border);
  color: inherit; text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), padding var(--dur-2) var(--ease-out), margin var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.row-index__num { font: var(--fw-medium) var(--text-mono)/1 var(--font-mono); color: var(--color-ember-accent); }
.row-index__name { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-subheading); line-height: var(--leading-subheading); text-transform: uppercase; color: var(--color-warm-cream); margin: 0; }
.row-index__desc { font: var(--fw-regular) 16px/1.5 var(--font-body); color: var(--color-cream-72); margin: 6px 0 0; }
.row-index__meta { font: var(--fw-regular) var(--text-mono-sm)/1.5 var(--font-mono); color: var(--color-cream-48); white-space: nowrap; }
.row-index__tail { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 10px; }
.row-index__arrow { font: var(--fw-regular) 18px/1 var(--font-mono); color: var(--color-cream-72); transition: transform 180ms var(--ease-out), color 180ms; }
.row-index:hover { background: var(--color-bark-40); }
.row-index:hover .row-index__arrow { transform: translateX(4px); color: var(--color-ember-accent); }
/* V2: inline set icon, desktop only (hidden on mobile for density) */
.row-index__icon { display: none; }
@media (min-width: 1024px) {
  .row-index { display: grid; grid-template-columns: 48px minmax(0,1fr) auto auto; gap: var(--sp-6); align-items: center; }
  .row-index__tail { display: contents; }
  .row-index:hover { padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
  .row-index > span:nth-child(2) { display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto auto; column-gap: var(--sp-5); align-items: center; }
  .row-index__icon { display: grid; place-items: center; grid-row: 1 / 3; width: 46px; height: 46px; border: 1px dashed rgba(255,237,215,.18); border-radius: var(--radius-control); background: rgba(255,237,215,.035); color: rgba(255,237,215,.72); transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2); }
  .row-index:hover .row-index__icon { color: var(--color-ember-accent); border-color: rgba(220,80,0,.5); background: rgba(220,80,0,.07); }
}

/* ============ C11 museum card ============ */
.museum-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) {
  .museum-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .card-museum--alert { grid-column: 1 / -1; }
}
.card-museum {
  display: flex; flex-direction: column; gap: var(--sp-5);
  border: 1px dashed var(--color-cork-border); border-radius: var(--radius-card);
  padding: var(--card-padding);
  background: linear-gradient(180deg, rgba(255,237,215,.035) 0%, rgba(255,237,215,0) 42%);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.card-museum:hover {
  border-color: rgba(255,237,215,.7); background: var(--color-bark-45); transform: translateY(-2px);
  box-shadow: 0 14px 34px -16px rgba(220,80,0,.4);
}
.card-museum__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-museum__num { font: var(--fw-medium) var(--text-micro)/1 var(--font-mono); color: var(--color-ember-accent); letter-spacing: .06em; }
.card-museum__title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); text-transform: uppercase; margin: 0; }
.card-museum__desc { font: var(--fw-regular) 16px/1.5 var(--font-body); color: var(--color-cream-72); margin: 8px 0 0; text-align: left; }
.card-museum__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.card-museum__meta { font: var(--fw-regular) var(--text-mono-sm)/1.5 var(--font-mono); color: var(--color-cream-48); }
.card-museum--alert { border-color: var(--color-ember-55); }
.card-museum--alert:hover { border-color: var(--color-ember-accent); }

/* ============ C12 code block ============ */
.codeblock {
  position: relative;
  border: 1px dashed var(--color-cork-border); border-radius: var(--radius-card);
  background: var(--color-bark-25);
  padding: 18px 24px; overflow-x: auto;
}
.codeblock code, .codeblock pre {
  font: var(--fw-regular) var(--text-mono)/1.6 var(--font-mono);
  letter-spacing: -0.01em; color: var(--color-warm-cream);
  margin: 0; white-space: pre; background: none;
}
.codeblock .c-prompt { color: var(--color-ember-accent); }
.codeblock .c-comment { color: var(--color-cream-48); }
.codeblock__copy {
  position: absolute; top: 12px; right: 12px;
  border: 1px dashed var(--color-cork-border); border-radius: var(--radius-ghost);
  background: var(--color-walnut-shadow); color: var(--color-cream-72);
  font-size: var(--text-fineprint); text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 12px; min-height: 28px; cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.codeblock__copy:hover { border-color: var(--color-warm-cream); color: var(--color-warm-cream); }
.codeblock__copy.is-copied { color: var(--color-ember-accent); border-color: var(--color-ember-50); }
.codeblock--has-copy { padding-right: 96px; }

/* ============ C13 metadata row (specimen label) ============ */
.meta-list { margin: 0; }
.meta-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6);
  padding: 10px 0; border-bottom: 1px dashed rgba(64,55,46,.6);
}
.meta-row dt { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--color-cream-48); }
.meta-row dd { margin: 0; font: var(--fw-regular) var(--text-mono)/1.5 var(--font-mono); color: var(--color-warm-cream); text-align: right; overflow-wrap: anywhere; }
.meta-row dd.is-ember { color: var(--color-ember-accent); }

/* ============ C14 numbered steps ============ */
.steps { list-style: none; margin: 0; padding: 0; }
.steps__item { position: relative; margin-left: 7px; padding: 0 0 var(--sp-8) var(--sp-8); border-left: 1px dashed var(--color-cork-border); }
.steps__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.steps__num {
  position: absolute; left: 0; top: 0; transform: translateX(-50%);
  background: var(--color-walnut-shadow); padding: 2px 0;
  font: var(--fw-medium) var(--text-mono)/1.4 var(--font-mono); color: var(--color-ember-accent);
}
.steps__body { font: var(--fw-regular) 18px/1.5 var(--font-body); color: var(--color-warm-cream); }
.steps__body code { font: var(--fw-regular) var(--text-mono-sm)/1.5 var(--font-mono); color: var(--color-cream-72); }
.steps__body p { margin: 0; }

/* ============ C15 callout / warning panel ============ */
.callout {
  border: 1px dashed var(--color-cork-border); border-left: 3px solid var(--color-driftwood);
  border-radius: var(--radius-card); padding: 18px 24px;
  background: var(--color-bark-25);
}
.callout__title { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.callout__body { font: var(--fw-regular) 16px/1.6 var(--font-body); color: var(--color-warm-cream); margin: 8px 0 0; }
.callout--warn { border-color: var(--color-ember-55); border-left: 3px solid var(--color-ember-accent); }
.callout--warn .callout__title { color: var(--color-ember-accent); }
.callout--full { border-radius: 0; border-inline: 0; } /* top-of-page full-width disclaimer (P6) */

/* ============ C16 FAQ accordion ============ */
.faq { max-width: var(--prose-max); }
.faq__item { border-bottom: 1px dashed var(--color-cork-border); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6);
  padding: 18px 0; text-align: left;
  font-size: var(--text-subheading); line-height: var(--leading-subheading);
  text-transform: uppercase; color: var(--color-warm-cream);
  transition: color var(--dur-2);
}
.faq__q:hover { color: var(--color-ember-accent); }
.faq__mark { flex: none; font: var(--fw-regular) 18px/1 var(--font-mono); color: var(--color-cream-48); transition: transform var(--dur-2) var(--ease-out); }
.faq__mark::before { content: "+"; }
.faq__q:hover .faq__mark { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__mark { transform: none; }
.faq__q[aria-expanded="true"] .faq__mark::before { content: "−"; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.faq__a > div { overflow: hidden; }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a p { font: var(--fw-regular) 18px/1.6 var(--font-body); color: var(--color-cream-72); margin: 0 0 18px; text-align: left; }

/* ============ C17 progress (real bytes only — fake progress forbidden) ============ */
.progress { display: flex; align-items: center; gap: var(--sp-4); }
.progress__track { flex: 1; height: 2px; background: rgba(64,55,46,.8); position: relative; }
.progress__fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--color-bark-brown); transition: width var(--dur-1) linear; }
.progress__fill::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 0; border-right: 2px solid var(--color-ember-accent); }
.progress__read { font: var(--fw-regular) var(--text-mono)/1 var(--font-mono); color: var(--color-warm-cream); white-space: nowrap; }

/* ============ C18 breadcrumb ============ */
.crumb { display: flex; align-items: center; gap: 10px; font: var(--fw-regular) var(--text-mono-sm)/1.5 var(--font-mono); color: var(--color-cream-48); flex-wrap: wrap; }
.crumb a { color: inherit; text-decoration: none; transition: color var(--dur-1); }
.crumb a:hover { color: var(--color-ember-accent); }
.crumb__current { color: var(--color-warm-cream); }

/* ============ C19 segmented control ============ */
.segmented { display: inline-flex; align-items: center; gap: 2px; border: 1px dashed var(--color-cork-border); border-radius: var(--radius-ghost); padding: 3px; min-height: 44px; }
.segmented__opt {
  border: 0; background: transparent; cursor: pointer;
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-cream-48); padding: 8px 16px; border-radius: var(--radius-full);
  transition: color var(--dur-1), background var(--dur-1);
}
.segmented__opt:hover { color: var(--color-warm-cream); }
.segmented__opt[aria-pressed="true"] { background: var(--color-bark-brown); color: var(--color-warm-cream); }

/* ============ C20 fixed top navigation ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 20px clamp(16px, 4vw, 45px);
  background: transparent; border-bottom: 1px dashed transparent;
  transition: background var(--dur-2), border-color var(--dur-2), backdrop-filter var(--dur-2);
}
.nav.is-scrolled { background: rgba(16,9,4,.88); backdrop-filter: blur(8px); border-bottom-color: var(--color-cork-border); }
.nav__links { display: none; align-items: center; gap: var(--sp-8); }
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
}
.nav__link {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-warm-cream); text-decoration: none; padding: 8px 0;
  border-bottom: 1px dashed transparent;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.nav__link:hover { color: var(--color-ember-accent); }
.nav__link[aria-current="page"] { border-bottom-color: var(--color-ember-accent); }
.nav__burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  align-items: center;
}
.nav__burger .bar { width: 18px; height: 2px; background: var(--color-warm-cream); transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2); }
.nav__burger[aria-expanded="true"] .bar:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .bar:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ============ C21 mobile menu overlay ============ */
.menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--color-walnut-shadow);
  display: flex; flex-direction: column;
  padding: calc(80px + 24px) clamp(16px, 4vw, 45px) var(--sp-6);
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-2), visibility var(--dur-2);
}
.menu.is-open { visibility: visible; opacity: 1; }
.menu__list { display: flex; flex-direction: column; }
.menu__item {
  display: flex; align-items: baseline; gap: var(--sp-4);
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-heading-sm); text-transform: uppercase;
  color: var(--color-warm-cream); text-decoration: none;
  padding: 16px 0; border-bottom: 1px dashed var(--color-cork-border);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), color var(--dur-1);
}
.menu__item:hover { color: var(--color-ember-accent); }
.menu__item .idx { font: var(--fw-regular) var(--text-mono-sm) var(--font-mono); color: var(--color-cream-48); }
.menu.is-open .menu__item { opacity: 1; transform: none; }
.menu.is-open .menu__item:nth-child(1) { transition-delay: 40ms; }
.menu.is-open .menu__item:nth-child(2) { transition-delay: 80ms; }
.menu.is-open .menu__item:nth-child(3) { transition-delay: 120ms; }
.menu.is-open .menu__item:nth-child(4) { transition-delay: 160ms; }
.menu.is-open .menu__item:nth-child(5) { transition-delay: 200ms; }
.menu__foot { margin-top: auto; font: var(--fw-regular) var(--text-micro)/1.5 var(--font-mono); color: var(--color-cream-48); letter-spacing: .06em; }
body.no-scroll { overflow: hidden; }

/* ============ C22 footer ============ */
.footer { border-top: 1px dashed var(--color-cork-border); }
.footer__grid { display: grid; gap: var(--sp-10); padding-block: var(--sp-17); }
@media (min-width: 640px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer__tagline { font: var(--fw-regular) 16px/1.5 var(--font-body); color: var(--color-cream-72); margin: var(--sp-4) 0 0; max-width: 34ch; }
.footer h3 {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-cream-48); margin: 0 0 var(--sp-5);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col .link-ul { font-size: var(--text-micro); }
.footer__bottom {
  border-top: 1px dashed var(--color-cork-border);
  padding-block: var(--sp-6);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
  font: var(--fw-medium) var(--text-fineprint)/1.4 var(--font-fallback-micro);
  text-transform: uppercase; letter-spacing: .05em; color: var(--color-cream-48);
}
.footer__bottom nav { display: flex; gap: var(--sp-5); }
.footer__bottom a { color: inherit; text-decoration: none; transition: color var(--dur-1); }
.footer__bottom a:hover { color: var(--color-ember-accent); }

/* ============ C23 phase-2 / waitlist slots ============ */
.slot { border: 1px dashed var(--color-cork-border); border-radius: var(--radius-card); padding: var(--card-padding); }
.slot__note { font: var(--fw-regular) var(--text-mono-sm)/1.6 var(--font-mono); color: var(--color-cream-48); margin: 0; letter-spacing: .02em; }
.slot-waitlist form { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; margin-top: var(--sp-5); }
.slot-waitlist .field { flex: 1 1 220px; }
.slot-waitlist .slot__msg { font: var(--fw-regular) var(--text-mono-sm)/1.6 var(--font-mono); color: var(--color-cream-48); margin: var(--sp-3) 0 0; min-height: 1.6em; }

/* ============ C24 legal prose ============ */
.legal { max-width: var(--legal-max); }
.legal h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-subheading); text-transform: uppercase; margin: var(--sp-10) 0 var(--sp-5); }
.legal h3 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-label); text-transform: uppercase; margin: var(--sp-6) 0 var(--sp-3); color: var(--color-cream-72); }
.legal p, .legal li { font: var(--fw-regular) 18px/1.7 var(--font-body); color: var(--color-cream-72); }
.legal ul, .legal ol { padding-left: 1.4em; margin: var(--sp-4) 0; }
.legal li { margin: var(--sp-2) 0; }
.legal .legal__updated { font: var(--fw-regular) var(--text-mono-sm)/1.5 var(--font-mono); color: var(--color-cream-48); }

/* ============ C25 error / empty states ============ */
.page-404 { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: 120px var(--sp-17); }
.page-404__frame { position: absolute; inset: var(--sp-6); border: 1px dashed var(--color-cork-border); border-radius: var(--radius-card); pointer-events: none; }
.page-404__frame .artifact__corner { position: absolute; animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .4; } 50% { opacity: .9; } }
.page-404__inner { position: relative; z-index: 2; max-width: 720px; }
.t-line { font: var(--fw-regular) var(--text-mono-lg)/1.6 var(--font-mono); color: var(--color-cream-72); margin: 0; }
.t-line .is-err { color: var(--color-ember-accent); }
.page-404 h1 { font-size: var(--text-heading); line-height: var(--leading-heading); margin-top: var(--sp-6); }
.page-404__body { font: var(--fw-regular) var(--text-body)/var(--leading-body) var(--font-body); color: var(--color-cream-72); margin: var(--sp-5) 0 var(--sp-8); }
.caret { color: var(--color-ember-accent); animation: caret-blink 1s steps(2, jump-none) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* ============ C26 scroll reveal ============ */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal [data-stagger] > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.reveal.is-in [data-stagger] > * { opacity: 1; transform: none; }

/* ============ wordmark (§6.1) ============ */
.wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-warm-cream); }
.wordmark__icon { width: 16px; height: 16px; flex: none; }
.wordmark__text { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .04em; line-height: 1; }

/* ============ tag cloud / misc groupings ============ */
.cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cloud__label { font: var(--fw-regular) var(--text-mono-sm)/1.5 var(--font-mono); color: var(--color-cream-48); margin: 0 0 var(--sp-3); letter-spacing: .06em; }

/* ============ V2 test-set icon system (programmatic inline SVG, cream + ember) ============ */
/* sprite lives at end of <body> on every page; <use href="#ico-*"> inherits currentColor */
.ico-sprite { display: none; }
.ico { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico .fill { fill: currentColor; stroke: none; }
/* museum-card illustration zone: cream line art on a warm-toned plate, ember accents + light sweep on hover */
.card-museum__art {
  order: -1; position: relative; overflow: hidden;
  border: 1px dashed rgba(255,237,215,.14); border-radius: var(--radius-control);
  background: linear-gradient(160deg, rgba(255,237,215,.05), rgba(255,237,215,.012) 55%, rgba(220,80,0,.045));
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  color: rgba(255,237,215,.72);
  transition: color var(--dur-3), border-color var(--dur-3);
}
.card-museum__art::after { /* warm light sweep */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 120% at 18% 0%, rgba(220,80,0,.16), transparent 60%);
  transition: opacity var(--dur-3) var(--ease-out);
}
.card-museum:hover .card-museum__art { color: rgba(255,237,215,.92); border-color: rgba(220,80,0,.42); }
.card-museum:hover .card-museum__art::after { opacity: 1; }
.card-museum__art .ico { width: 100%; max-width: 300px; height: auto; margin-inline: auto; }
.card-museum__art .ico { transition: transform var(--dur-3) var(--ease-out); transform-origin: 50% 50%; }
.card-museum:hover .card-museum__art .ico { transform: translateY(-2px); }
/* OCR scan beam — gentle loop, paused under reduced motion / touch */
.ico .scan-beam { animation: scan-sweep 2.6s var(--ease-out) infinite; }
@keyframes scan-sweep { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(24px); } }
/* security siren pulse */
.ico .pulse { animation: pulse-soft 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse-soft { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .ico .scan-beam, .ico .pulse { animation: none; }
}
@media (hover: none) {
  .ico .scan-beam, .ico .pulse { animation: none; }
}

/* ==========================================================================
   V3 — warm-duet enrichment (orange #dc5000 voice + gold #d99a4e voice,
   three cream luminances). Incremental: nothing above is removed.
   ========================================================================== */
:root {
  /* gold/copper second warm voice */
  --color-gold:        #d99a4e;
  --color-gold-deep:   #c8893f;
  --color-gold-40: rgba(217,154,78,.40);
  --color-gold-25: rgba(217,154,78,.25);
  --color-gold-12: rgba(217,154,78,.12);
  --color-gold-07: rgba(217,154,78,.07);
  /* ember micro-gradient voice (orange → ember → ochre) */
  --grad-ember: linear-gradient(135deg, #ff6a1a 0%, #dc5000 55%, #b8430a 100%);
  --grad-volume: linear-gradient(90deg, #ff6a1a 0%, #dc5000 45%, #d99a4e 100%);
  /* cream luminance steps for illustration fills */
  --color-cream-mid: #e8d3b8;
  --color-cream-dark:#caa988;
  /* restrained iron-oxide accent — SECURITY illustration + .is-error ONLY */
  --color-oxide:     #9c3320;
}

/* ---------- V3 §A: size-cell mini thumbnails (text boxes → file objects) ---------- */
.size-cell { justify-content: flex-start; aspect-ratio: 4 / 5; }
.size-cell__thumb {
  position: relative; align-self: center; flex: none;
  width: 42%; min-width: 34px; aspect-ratio: 3 / 4;
  border-radius: 3px; border: 1px solid var(--color-gold-40);
  background: linear-gradient(158deg, #fff6e8 0%, #ffe9cf 48%, #eed6b2 100%);
  padding: 15% 11% 18%; display: flex; flex-direction: column; gap: 3px; justify-content: center;
  transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out), border-color var(--dur-2);
  filter: drop-shadow(0 0 0 rgba(220,80,0,0));
}
.size-cell:hover .size-cell__thumb {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 14px rgba(220,80,0,.35)) drop-shadow(0 2px 6px rgba(217,154,78,.3));
  border-color: var(--color-gold);
}
.size-cell__thumb i { display: block; height: 3px; border-radius: 1px; }
.size-cell__thumb i:nth-child(1) { width: 62%; background: rgba(122,82,48,.75); }
.size-cell__thumb i:nth-child(2) { width: 92%; background: rgba(122,82,48,.34); }
.size-cell__thumb i:nth-child(3) { width: 76%; background: rgba(122,82,48,.34); }
/* page-corner fold + page-count badge (real counts from the assets) */
.size-cell__thumb::before {
  content: ""; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 9px 9px 0;
  border-color: transparent #caa988 transparent transparent;
}
.size-cell__thumb::after {
  content: attr(data-pages); position: absolute; top: 3px; left: 4px;
  font: 400 7px/1 var(--font-mono); color: #96603a; letter-spacing: .02em;
}
.size-cell__thumb--stream::after {
  content: ""; top: 3px; left: 4px; width: 13px; height: 7px;
  border: 1px solid rgba(220,80,0,.65); border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(220,80,0,.5) 0 2px, transparent 2px 4px);
}
/* volume indicator — amber→gold bar whose length encodes file size (visual rhythm) */
.size-cell__meter {
  height: 3px; margin-top: auto; border-radius: 2px; background: rgba(255,237,215,.10); overflow: hidden;
}
.size-cell__meter i {
  display: block; height: 100%; width: var(--w, 10%); border-radius: 2px;
  background: var(--grad-volume);
  transition: width var(--dur-3) var(--ease-out), filter var(--dur-2);
}
.size-cell:hover .size-cell__meter i { filter: brightness(1.15); }
/* streamed cells: faint ripple beside the thumb */
.size-cell__ripple {
  position: absolute; right: -4px; bottom: 2px; width: 16px; height: 12px; opacity: .75;
}
.size-cell__ripple path { stroke: var(--color-gold); fill: none; stroke-width: 1.3; stroke-linecap: round; }
.size-cell__ripple path:nth-child(2) { stroke: rgba(220,80,0,.75); }
/* custom gateway cell: ruler + gradient slider knob */
.size-cell__dial { align-self: center; flex: none; width: 66%; min-width: 56px; }
.size-cell__dial i {
  position: relative; display: block; height: 14px;
  background: repeating-linear-gradient(90deg, rgba(255,237,215,.38) 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat,
              linear-gradient(90deg, rgba(255,237,215,.22), rgba(255,237,215,.22)) 0 100% / 100% 1px no-repeat;
}
.size-cell__dial i::after {
  content: ""; position: absolute; top: -3px; left: 62%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--grad-ember); box-shadow: 0 0 8px rgba(220,80,0,.55);
  transition: left var(--dur-3) var(--ease-out);
}
.size-cell--link:hover .size-cell__dial i::after { left: 78%; }
/* mobile: keep the object feeling at small sizes */
@media (max-width: 639px) {
  .size-cell { padding: 10px; gap: 5px; }
  .size-cell__thumb { width: 62%; min-width: 40px; padding: 16% 12% 20%; gap: 2px; }
  .size-cell__thumb i { height: 2px; }
  .size-cell__thumb::after { font-size: 6px; }
}

/* ---------- V3 §B: generator console mockup (product object in the band) ---------- */
.band__inner { align-items: center; }
@media (min-width: 1024px) { .band__inner { grid-template-columns: minmax(0,1fr) minmax(0,440px) auto; } }
.genmock {
  position: relative; overflow: hidden;
  border: 1px dashed rgba(217,154,78,.35); border-radius: var(--radius-card);
  background: linear-gradient(165deg, rgba(217,154,78,.10) 0%, rgba(255,237,215,.03) 40%, rgba(220,80,0,.06) 100%);
  padding: 16px 18px 18px;
  transition: border-color var(--dur-3), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.genmock:hover {
  border-color: rgba(217,154,78,.6); transform: translateY(-2px);
  box-shadow: 0 16px 38px -18px rgba(220,80,0,.45);
}
.genmock::after { /* gold key-light sweep, breathes */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(70% 90% at 82% -10%, rgba(217,154,78,.20), transparent 62%);
  animation: genmock-breathe 5.5s ease-in-out infinite;
}
@keyframes genmock-breathe { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
.genmock__head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 400 var(--text-fineprint)/1 var(--font-mono); letter-spacing: .08em; color: rgba(217,154,78,.85);
  padding-bottom: 10px; border-bottom: 1px dashed rgba(217,154,78,.28); }
.genmock__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad-ember); box-shadow: 0 0 6px rgba(220,80,0,.7); }
.genmock__body { display: grid; grid-template-columns: minmax(0,1fr) 72px; gap: 14px 16px; margin-top: 14px; }
.genmock__sliders { display: grid; gap: 11px; }
.genmock__slider { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 10px; }
.genmock__slider label { font: 400 var(--text-fineprint)/1 var(--font-mono); letter-spacing: .06em; color: var(--color-cream-48); }
.genmock__track { position: relative; height: 4px; border-radius: 2px; background: rgba(232,211,184,.28); }
.genmock__track::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 50%); border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,106,26,.9), #dc5000); }
.genmock__knob { position: absolute; top: 50%; left: var(--fill, 50%); width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--grad-ember);
  box-shadow: 0 0 9px rgba(220,80,0,.65), 0 0 0 2px rgba(16,9,4,.6);
  animation: knob-breathe 4.2s ease-in-out infinite; }
.genmock__knob--gold { background: linear-gradient(135deg, #e8b06b, #d99a4e 55%, #c8893f); box-shadow: 0 0 9px rgba(217,154,78,.6), 0 0 0 2px rgba(16,9,4,.6); }
@keyframes knob-breathe { 0%, 100% { box-shadow: 0 0 6px rgba(220,80,0,.45), 0 0 0 2px rgba(16,9,4,.6); } 50% { box-shadow: 0 0 12px rgba(220,80,0,.8), 0 0 0 2px rgba(16,9,4,.6); } }
.genmock__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.genmock__chip {
  border: 1px solid rgba(217,154,78,.45); border-radius: var(--radius-full);
  padding: 3px 9px; font: 400 var(--text-fineprint)/1.4 var(--font-mono); letter-spacing: .03em;
  color: var(--color-cream-mid); background: rgba(217,154,78,.07);
}
.genmock__chip--ember { border-color: rgba(220,80,0,.5); color: #ffb27d; background: rgba(220,80,0,.09); }
/* mini preview sheet inside the mockup */
.genmock__preview { grid-row: 1 / 3; align-self: stretch; position: relative;
  border-radius: 3px; border: 1px solid var(--color-gold-40);
  background: linear-gradient(160deg, #fff6e8, #f2dcb9);
  padding: 9px 8px; display: flex; flex-direction: column; gap: 3px;
  filter: drop-shadow(0 4px 12px rgba(220,80,0,.28)); }
.genmock__preview i { display: block; height: 2px; border-radius: 1px; background: rgba(122,82,48,.4); }
.genmock__preview i:first-child { width: 58%; height: 3px; background: rgba(122,82,48,.7); }
.genmock__preview::after { content: "7.5 MB"; position: absolute; bottom: 4px; right: 5px;
  font: 500 6.5px/1 var(--font-mono); letter-spacing: .03em; color: #b8430a; }
@media (max-width: 639px) { .genmock__preview { display: none; } .genmock__body { grid-template-columns: 1fr; } }
/* strengthen the existing pill with a gold→ember outline in the band */
.band .btn--pill { box-shadow: inset 0 0 0 1px rgba(217,154,78,.55); }
.band .btn--pill:hover { box-shadow: inset 0 0 0 1px rgba(255,106,26,.85), 0 10px 28px -12px rgba(220,80,0,.55); }

/* ---------- V3 §C: collections rows — showcase treatment + archive wallpaper ---------- */
.row-index { position: relative; }
.row-index:hover { background: linear-gradient(90deg, rgba(220,80,0,.07), rgba(217,154,78,.05) 55%, transparent 90%); }
.row-index:hover .row-index__arrow { transform: translateX(8px); color: var(--color-gold); }
/* icon plate: bigger, gold-rimmed, shown on ALL breakpoints (mobile: inline next to name) */
.row-index__icon {
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; margin-right: 10px; vertical-align: middle;
  border: 1px solid rgba(217,154,78,.4); border-radius: var(--radius-control);
  background: linear-gradient(160deg, rgba(217,154,78,.12), rgba(255,237,215,.03));
  color: var(--color-cream-mid);
  transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
}
.row-index__icon .ico { width: 26px; height: 18px; }
.row-index:hover .row-index__icon {
  color: var(--color-warm-cream); border-color: rgba(220,80,0,.55);
  background: linear-gradient(160deg, rgba(220,80,0,.14), rgba(217,154,78,.08));
  box-shadow: 0 0 12px -2px rgba(220,80,0,.35);
}
@media (min-width: 1024px) {
  .row-index__icon { width: 52px; height: 52px; margin-right: 0; }
  .row-index__icon .ico { width: 36px; height: 25px; }
}
/* archive-cabinet hairline wallpaper, faintest tier */
#collections-block { position: relative; }
#collections-block::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(217,154,78,.05) 44px 45px),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(255,237,215,.025) 118px 119px);
}

/* ---------- V3 §D: special types & examples — label cloud → illustrated tile grid ---------- */
.cloud--tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
@media (min-width: 640px) { .cloud--tiles { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .cloud--tiles { grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--sp-4); } }
.cloud--tiles3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px) { .cloud--tiles3 { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 620px; } }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 16px 16px 15px; text-decoration: none; color: var(--color-warm-cream);
  border: 1px dashed rgba(255,237,215,.20); border-radius: var(--radius-card);
  background: linear-gradient(165deg, rgba(255,237,215,.045), rgba(255,237,215,.012) 60%);
  transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.tile:hover {
  border-color: rgba(255,237,215,.6); transform: translateY(-3px);
  background: linear-gradient(165deg, rgba(217,154,78,.10), rgba(255,237,215,.03) 60%);
  box-shadow: 0 14px 32px -16px rgba(220,80,0,.42);
}
.tile::after { /* hover underline tick — ember→gold micro-gradient */
  content: ""; position: absolute; left: 16px; bottom: 11px; height: 2px; width: 0; border-radius: 2px;
  background: var(--grad-volume); transition: width var(--dur-3) var(--ease-out);
}
.tile:hover::after { width: 26px; }
.tile__glyph {
  width: 56px; height: 56px; padding: 9px; border-radius: var(--radius-control);
  border: 1px solid rgba(217,154,78,.35);
  background: linear-gradient(160deg, rgba(217,154,78,.10), rgba(255,237,215,.02));
  color: var(--color-cream-mid);
  transition: color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.tile__glyph .ico { width: 100%; height: 100%; }
.tile:hover .tile__glyph {
  color: var(--color-warm-cream); border-color: rgba(220,80,0,.55); transform: translateY(-2px);
  box-shadow: 0 0 14px -2px rgba(220,80,0,.4);
}
.tile__name {
  margin-top: auto; padding-bottom: 6px;
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-micro); text-transform: uppercase; letter-spacing: .03em; line-height: 1.3;
}
/* gold-accent variant (EXAMPLES tiles — second voice) */
.tile--gold .tile__glyph { border-color: rgba(217,154,78,.5); background: linear-gradient(160deg, rgba(217,154,78,.16), rgba(255,237,215,.03)); }
.tile--gold .tile__glyph .ico { stroke: var(--color-gold); }
.tile--gold:hover .tile__glyph { border-color: var(--color-gold); box-shadow: 0 0 14px -2px rgba(217,154,78,.5); }
/* sprite accent hook: gold details inside tile glyphs */
.tile__glyph .ico .acc, .row-index__icon .ico .acc { stroke: var(--color-gold); }
/* scan-style tile: animated scan line */
.ico .scanline { animation: tilescan 2.8s var(--ease-out) infinite; }
@keyframes tilescan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(20px); } }
@media (prefers-reduced-motion: reduce) { .ico .scanline { animation: none; } }
@media (hover: none) { .ico .scanline { animation: none; } .tile:hover { transform: none; } }

/* ---------- V3 §E: terminal chrome + response preview (API section) ---------- */
.term {
  border: 1px solid rgba(217,154,78,.32); border-radius: var(--radius-card); overflow: hidden;
  background: rgba(13,7,3,.6);
  transition: border-color var(--dur-3), box-shadow var(--dur-3) var(--ease-out);
}
.term:hover { border-color: rgba(217,154,78,.55); box-shadow: 0 18px 44px -22px rgba(220,80,0,.5); }
.term__bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: linear-gradient(180deg, rgba(217,154,78,.16), rgba(217,154,78,.06));
  border-bottom: 1px solid rgba(217,154,78,.28);
}
.term__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.term__dot--ochre { background: #b8430a; }
.term__dot--ember { background: #dc5000; box-shadow: 0 0 6px rgba(220,80,0,.7); }
.term__dot--gold  { background: #d99a4e; box-shadow: 0 0 6px rgba(217,154,78,.7); }
.term__tag {
  margin-left: 6px; border: 1px solid rgba(217,154,78,.4); border-radius: var(--radius-full);
  padding: 2px 9px; font: 400 var(--text-fineprint)/1.4 var(--font-mono);
  letter-spacing: .08em; color: var(--color-gold);
}
.term__title { margin-left: auto; font: 400 var(--text-fineprint)/1 var(--font-mono); letter-spacing: .06em; color: var(--color-cream-48); }
.term__body { padding: 16px 18px; }
.term__body .codeblock { border: 0; border-radius: 0; background: transparent; padding: 0 72px 0 0; }
/* response row — the "living request→response" strip */
.resp { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 13px 18px;
  border-top: 1px dashed rgba(217,154,78,.28); background: rgba(217,154,78,.045); }
.resp__flow { display: inline-flex; align-items: center; gap: 5px;
  font: 400 var(--text-fineprint)/1 var(--font-mono); letter-spacing: .08em; color: rgba(217,154,78,.85); }
.resp__flow svg { width: 30px; height: 8px; }
.resp__flow svg path { stroke: var(--color-gold); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.resp__chip {
  border: 1px solid rgba(217,154,78,.5); border-radius: var(--radius-full);
  padding: 3px 10px; font: 500 var(--text-fineprint)/1.4 var(--font-mono); letter-spacing: .05em;
  color: #e8b877; background: rgba(217,154,78,.10);
}
.resp__chip--ok { color: #ffb27d; border-color: rgba(220,80,0,.55); background: rgba(220,80,0,.10); }
.resp__chip--dim { color: var(--color-cream-48); border-color: rgba(255,237,215,.22); background: transparent; }
/* mini returned-file thumb */
.resp__file {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(217,154,78,.3); border-radius: var(--radius-control);
  padding: 5px 10px 5px 6px; background: rgba(16,9,4,.5);
}
.resp__file .mini-doc { width: 15px; height: 20px; flex: none; border-radius: 2px;
  border: 1px solid var(--color-gold-40);
  background: linear-gradient(160deg, #fff6e8, #eed6b2); position: relative; }
.resp__file .mini-doc::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 1.5px;
  background: rgba(122,82,48,.5); box-shadow: 0 4px 0 rgba(122,82,48,.35), 0 8px 0 rgba(122,82,48,.25); }
.resp__file span { font: 400 var(--text-fineprint)/1.3 var(--font-mono); color: var(--color-cream-mid); letter-spacing: .02em; }
@media (max-width: 639px) { .term__title { display: none; } .resp { padding: 12px 14px; } }

/* ---------- V3 §F: FAQ decor + warm accordion motion ---------- */
.faq-wrap { position: relative; }
.faq-decor { position: absolute; z-index: -1; pointer-events: none; }
.faq-decor--mark { right: -10px; top: -34px; width: 150px; height: 170px; opacity: .16; }
.faq-decor--bubble { display: none; left: -16px; top: 44px; width: 120px; height: 96px; opacity: .22; }
@media (min-width: 1240px) { .faq-decor--bubble { display: block; } .faq-decor--mark { right: -40px; } }
.faq-decor path, .faq-decor circle { fill: none; stroke: var(--color-cream-mid); stroke-width: 2; stroke-linecap: round; }
.faq-decor .g { stroke: var(--color-gold); }
/* accordion: + rotates to × and turns ember; answer panel gets a faint warm pool */
.faq__mark { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border: 1px dashed rgba(217,154,78,.4); border-radius: 50%; align-self: center;
  transition: transform var(--dur-3) var(--ease-out), color var(--dur-2), border-color var(--dur-2), background var(--dur-2); }
.faq__q[aria-expanded="true"] .faq__mark { transform: rotate(45deg); color: var(--color-ember-accent);
  border-color: rgba(220,80,0,.6); background: rgba(220,80,0,.08); }
.faq__q[aria-expanded="true"] .faq__mark::before { content: "+"; } /* + rotated 45deg = × */
.faq__q:hover .faq__mark { transform: rotate(90deg); border-color: rgba(217,154,78,.7); }
.faq__q[aria-expanded="true"]:hover .faq__mark { transform: rotate(45deg); }
.faq__a > div { transition: background var(--dur-3), box-shadow var(--dur-3); border-radius: var(--radius-control); }
.faq__q[aria-expanded="true"] + .faq__a > div {
  background: linear-gradient(180deg, rgba(220,80,0,.05), transparent 85%);
  box-shadow: inset 2px 0 0 rgba(217,154,78,.35);
}
.faq__a p { padding-left: 14px; }

/* ---------- V3 §G: footer — warm light floor instead of plain black ---------- */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60rem 18rem at 85% -10%, rgba(220,80,0,.10), transparent 62%),
    radial-gradient(46rem 16rem at 6% 110%, rgba(217,154,78,.08), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 140px, rgba(255,237,215,.022) 140px 141px),
    repeating-linear-gradient(0deg, transparent 0 140px, rgba(255,237,215,.022) 140px 141px);
}
.footer > .wrap { position: relative; }

/* ---------- V3: iron-oxide voice — SECURITY card + error states ONLY ---------- */
.card-museum--alert .card-museum__art { border-color: rgba(156,51,32,.5);
  background: linear-gradient(160deg, rgba(156,51,32,.10), rgba(255,237,215,.012) 55%, rgba(156,51,32,.05)); }
.card-museum--alert .card-museum__art .ico { stroke: #c96a52; }
.card-museum--alert .card-museum__art .ico [stroke="#dc5000"] { stroke: #9c3320; }
.card-museum--alert:hover .card-museum__art { border-color: rgba(156,51,32,.85); }
.card-museum--alert:hover .card-museum__art::after {
  background: radial-gradient(80% 120% at 18% 0%, rgba(156,51,32,.18), transparent 60%); }
.size-cell.is-error { border-color: rgba(156,51,32,.7); }
.size-cell.is-error .size-cell__status { color: #c96a52; }
.btn.is-error .btn__label { color: #c96a52; }
.field--error .field__input { border-bottom-color: #9c3320; }
.field--error .field__error { color: #c96a52; }

/* ---------- V3.1 corrections: streamed-note position, mobile size-cell fit ---------- */
/* STREAMED tag moves to the top-right corner so the bottom stays clear for the meter + ripple */
.size-cell__note { top: 8px; bottom: auto; color: rgba(255,178,125,.75); letter-spacing: .06em; }
.size-cell__ripple { right: 6px; left: auto; bottom: 5px; }
/* keep the meter clear of the ripple decoration on streamed cells */
.size-cell__thumb--stream + .size-cell__ripple + .size-cell__meter { margin-right: 20px; }
/* mobile: slightly taller file-card proportion so thumb + meter always fit */
@media (max-width: 639px) {
  .size-cell { aspect-ratio: 4 / 5; padding: 10px; gap: 4px; }
  .size-cell__file { font-size: 9px; line-height: 1.25; }
  .size-cell__size { font-size: 14px; }
  .size-cell__thumb { width: 46%; min-width: 34px; }
  .size-cell__note { top: 6px; font-size: 8.5px; }
}

/* ==========================================================================
   V4 — compact hero support + light-theme audit + theme switch
   1) hero compresses to one fold; 2) hardcoded cream/black rgba values get
   light-theme re-assignments; 3) .term (API terminal) stays dark by design.
   ========================================================================== */

/* ---------- V4 §1: hardcoded dark-theme colors, remapped for light ---------- */
/* form chrome */
[data-theme="light"] .spin { border-color: rgba(43,26,14,.3); border-top-color: var(--color-warm-cream); }
[data-theme="light"] .link-ul { border-bottom-color: rgba(43,26,14,.38); }
[data-theme="light"] .field__input { border-bottom-color: rgba(43,26,14,.35); }
[data-theme="light"] .toggle input { border-color: rgba(43,26,14,.5); }
/* C08 size cells — the homepage instrument */
[data-theme="light"] .size-cell { border-color: rgba(43,26,14,.22); background: rgba(43,26,14,.028); }
[data-theme="light"] .size-cell:hover {
  border-color: rgba(43,26,14,.6); background: rgba(217,154,78,.12);
  box-shadow: 0 12px 28px -14px rgba(179,66,7,.30), 0 2px 14px -6px rgba(168,114,47,.22);
}
[data-theme="light"] .size-cell:active { background: var(--color-bark-brown); }
[data-theme="light"] .size-cell.is-done {
  border-color: rgba(179,66,7,.5); background: rgba(217,154,78,.14);
  box-shadow: 0 10px 30px -12px rgba(179,66,7,.32);
}
[data-theme="light"] .size-cell--link:hover { border-color: var(--color-ember-accent); box-shadow: 0 12px 28px -14px rgba(179,66,7,.4); }
[data-theme="light"] .size-cell__thumb {
  background: linear-gradient(158deg, #fffdf8 0%, #fbf2e0 48%, #efe0c2 100%);
  border-color: var(--color-gold-40);
}
[data-theme="light"] .size-cell:hover .size-cell__thumb {
  filter: drop-shadow(0 6px 14px rgba(168,114,47,.38)) drop-shadow(0 2px 6px rgba(179,66,7,.28));
  border-color: var(--color-gold);
}
[data-theme="light"] .size-cell__meter { background: rgba(43,26,14,.12); }
[data-theme="light"] .size-cell__ripple path:nth-child(2) { stroke: rgba(179,66,7,.7); }
[data-theme="light"] .size-cell__dial i {
  background: repeating-linear-gradient(90deg, rgba(43,26,14,.4) 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat,
              linear-gradient(90deg, rgba(43,26,14,.24), rgba(43,26,14,.24)) 0 100% / 100% 1px no-repeat;
}
[data-theme="light"] .size-cell__dial i::after { box-shadow: 0 0 8px rgba(179,66,7,.4); }
/* C09 artifact frame — light mode uses a warm parchment plate; amber wash keeps the paper "lit" */
[data-theme="light"] .artifact {
  border-color: rgba(43,26,14,.26);
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(179,66,7,.14), rgba(122,82,48,0) 60%),
    linear-gradient(180deg, #f4ead8 0%, #efe3cc 55%, #e9dabf 100%);
}
/* under-sheets: cream strokes vanish on parchment — switch to ink-alpha */
[data-theme="light"] .artifact__sheet .sheet--back rect { fill: rgba(43,26,14,.045); stroke: rgba(43,26,14,.2); }
[data-theme="light"] .artifact__sheet .sheet--mid rect { fill: rgba(43,26,14,.06); stroke: rgba(43,26,14,.28); }
[data-theme="light"] .artifact__sheet {
  filter: drop-shadow(0 0 22px rgba(168,114,47,.35)) drop-shadow(0 0 46px rgba(179,66,7,.16));
}
/* C10 collection rows */
[data-theme="light"] .row-index:hover { background: linear-gradient(90deg, rgba(179,66,7,.07), rgba(168,114,47,.06) 55%, transparent 90%); }
[data-theme="light"] .row-index__icon {
  border-color: rgba(168,114,47,.45); color: #5c4630;
  background: linear-gradient(160deg, rgba(168,114,47,.14), rgba(43,26,14,.03));
}
[data-theme="light"] .row-index:hover .row-index__icon {
  color: var(--color-ember-accent); border-color: rgba(179,66,7,.55);
  background: linear-gradient(160deg, rgba(179,66,7,.12), rgba(168,114,47,.08));
  box-shadow: 0 0 12px -2px rgba(179,66,7,.25);
}
/* C11 museum cards */
[data-theme="light"] .card-museum { background: linear-gradient(180deg, rgba(43,26,14,.03) 0%, rgba(43,26,14,0) 42%); }
[data-theme="light"] .card-museum:hover {
  border-color: rgba(43,26,14,.5); background: rgba(217,154,78,.10);
  box-shadow: 0 14px 34px -16px rgba(179,66,7,.28);
}
[data-theme="light"] .card-museum__art {
  border-color: rgba(43,26,14,.16); color: #5c4630;
  background: linear-gradient(160deg, rgba(168,114,47,.07), rgba(43,26,14,.012) 55%, rgba(179,66,7,.05));
}
[data-theme="light"] .card-museum:hover .card-museum__art { color: #3a2817; border-color: rgba(179,66,7,.45); }
[data-theme="light"] .card-museum__art::after { background: radial-gradient(80% 120% at 18% 0%, rgba(217,154,78,.28), transparent 60%); }
[data-theme="light"] .card-museum--alert .card-museum__art {
  border-color: rgba(156,51,32,.4);
  background: linear-gradient(160deg, rgba(156,51,32,.08), rgba(43,26,14,.012) 55%, rgba(156,51,32,.04));
}
[data-theme="light"] .card-museum--alert .card-museum__art .ico { stroke: #9c3320; }
[data-theme="light"] .card-museum--alert:hover .card-museum__art { border-color: rgba(156,51,32,.75); }
/* C14 steps + C17 progress — number plate matches the paper */
[data-theme="light"] .steps__num { background: var(--color-walnut-shadow); }
[data-theme="light"] .progress__track { background: rgba(43,26,14,.22); }
[data-theme="light"] .progress__fill { background: rgba(168,114,47,.55); }
/* V3 wallpaper hairlines */
[data-theme="light"] #collections-block::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(168,114,47,.10) 44px 45px),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(43,26,14,.04) 118px 119px);
}
/* V3 §D tiles */
[data-theme="light"] .tile {
  border-color: rgba(43,26,14,.2);
  background: linear-gradient(165deg, rgba(43,26,14,.028), rgba(43,26,14,.008) 60%);
}
[data-theme="light"] .tile:hover {
  border-color: rgba(43,26,14,.5);
  background: linear-gradient(165deg, rgba(168,114,47,.12), rgba(43,26,14,.02) 60%);
  box-shadow: 0 14px 32px -16px rgba(179,66,7,.3);
}
[data-theme="light"] .tile__glyph {
  border-color: rgba(168,114,47,.42); color: #5c4630;
  background: linear-gradient(160deg, rgba(168,114,47,.12), rgba(43,26,14,.02));
}
[data-theme="light"] .tile:hover .tile__glyph {
  color: var(--color-ember-accent); border-color: rgba(179,66,7,.55);
  box-shadow: 0 0 14px -2px rgba(179,66,7,.28);
}
[data-theme="light"] .tile--gold .tile__glyph { border-color: rgba(168,114,47,.55); background: linear-gradient(160deg, rgba(168,114,47,.16), rgba(43,26,14,.03)); }
[data-theme="light"] .tile--gold .tile__glyph .ico { stroke: var(--color-gold); }
/* V3 §F FAQ decor + mark */
[data-theme="light"] .faq-decor path, [data-theme="light"] .faq-decor circle { stroke: rgba(43,26,14,.35); }
[data-theme="light"] .faq-decor .g { stroke: var(--color-gold); }
[data-theme="light"] .faq__mark { border-color: rgba(168,114,47,.5); }
[data-theme="light"] .faq__q[aria-expanded="true"] .faq__mark { border-color: rgba(179,66,7,.55); background: rgba(179,66,7,.07); }
[data-theme="light"] .faq__q[aria-expanded="true"] + .faq__a > div {
  background: linear-gradient(180deg, rgba(217,154,78,.12), transparent 85%);
  box-shadow: inset 2px 0 0 rgba(168,114,47,.4);
}
/* V3 §G footer floor */
[data-theme="light"] .footer::before {
  background:
    radial-gradient(60rem 18rem at 85% -10%, rgba(217,154,78,.14), transparent 62%),
    radial-gradient(46rem 16rem at 6% 110%, rgba(168,114,47,.10), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 140px, rgba(43,26,14,.03) 140px 141px),
    repeating-linear-gradient(0deg, transparent 0 140px, rgba(43,26,14,.03) 140px 141px);
}
/* V3 §B generator console mockup */
[data-theme="light"] .genmock {
  border-color: rgba(168,114,47,.45);
  background: linear-gradient(165deg, rgba(168,114,47,.10) 0%, rgba(43,26,14,.02) 40%, rgba(179,66,7,.06) 100%);
}
[data-theme="light"] .genmock:hover { border-color: rgba(168,114,47,.7); box-shadow: 0 16px 38px -18px rgba(179,66,7,.3); }
[data-theme="light"] .genmock__head { color: var(--color-gold-deep); border-bottom-color: rgba(168,114,47,.35); }
[data-theme="light"] .genmock__track { background: rgba(43,26,14,.18); }
[data-theme="light"] .genmock__knob { box-shadow: 0 0 9px rgba(179,66,7,.5), 0 0 0 2px rgba(250,246,238,.9); }
[data-theme="light"] .genmock__knob--gold { box-shadow: 0 0 9px rgba(168,114,47,.5), 0 0 0 2px rgba(250,246,238,.9); }
[data-theme="light"] .genmock__chip { border-color: rgba(168,114,47,.5); color: var(--color-gold-deep); background: rgba(168,114,47,.08); }
[data-theme="light"] .genmock__chip--ember { border-color: rgba(179,66,7,.5); color: var(--color-ember-accent); background: rgba(179,66,7,.07); }
[data-theme="light"] .genmock__preview {
  background: linear-gradient(160deg, #fffdf8, #f6e8cd);
  border-color: var(--color-gold-40);
  filter: drop-shadow(0 4px 12px rgba(168,114,47,.35));
}
[data-theme="light"] .band .btn--pill { box-shadow: inset 0 0 0 1px rgba(168,114,47,.6); }
[data-theme="light"] .band .btn--pill:hover { box-shadow: inset 0 0 0 1px rgba(179,66,7,.8), 0 10px 28px -12px rgba(179,66,7,.4); }

/* ---------- V4 §2: (hero compression rules live in main.css V4 block — cascade order) ---------- */

/* ---------- V4 §3: theme switch — safelight lamp ---------- */
.theme-switch {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 36px; padding: 7px 12px 7px 10px; cursor: pointer;
  border: 1px dashed var(--color-gold-40); border-radius: var(--radius-ghost);
  background: transparent; color: var(--color-cream-mid);
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-fineprint); line-height: 1; text-transform: uppercase; letter-spacing: .06em;
  transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2);
}
.theme-switch:hover {
  color: var(--color-warm-cream); border-color: rgba(217,154,78,.7);
  background: rgba(217,154,78,.08); box-shadow: 0 0 14px -4px rgba(220,80,0,.5);
}
.theme-switch__label { pointer-events: none; }
.ts-icon { position: relative; width: 16px; height: 16px; flex: none; pointer-events: none; }
.ts-icon .ts-sun, .ts-icon .ts-moon { position: absolute; inset: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ts-icon .ts-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.ts-icon .ts-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
.ts-icon .ts-sun, .ts-icon .ts-moon { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
/* dark UI shows the sun (tap to switch on the light); light UI shows the moon */
[data-theme="light"] .ts-icon .ts-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
[data-theme="light"] .ts-icon .ts-moon { opacity: 1; transform: rotate(0deg) scale(1); }
/* mobile menu variant — full-width row */
.theme-switch--menu { width: 100%; justify-content: space-between; padding: 14px 16px; border-radius: var(--radius-card); font-size: var(--text-micro); margin-top: var(--sp-5); }
@media (prefers-reduced-motion: reduce) {
  .ts-icon .ts-sun, .ts-icon .ts-moon { transition: none; }
}

/* ============ C25 user memory — download-history mark + generator reset (local-only, epd- storage) ============ */
/* Amber tick on size cells the visitor has already downloaded (epd-downloads). */
.size-cell.is-downloaded::after {
  content: "✓";
  position: absolute; right: 6px; top: 6px;
  font-size: 10px; line-height: 1;
  color: var(--color-ember-accent, #dc5000);
  opacity: 0.7; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}
.size-cell.is-downloaded:hover::after,
.size-cell.is-downloaded:focus-visible::after { opacity: 1; }

/* Ghost micro-link: reset generator to defaults (UI chrome, not site copy) */
.gen-reset {
  appearance: none; background: none; border: 0; padding: 0; margin-left: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--text-fineprint);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-cream-48); cursor: pointer;
  border-bottom: 1px dashed var(--color-cream-16);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.gen-reset:hover, .gen-reset:focus-visible { color: var(--color-ember-accent, #dc5000); border-bottom-color: var(--color-ember-accent, #dc5000); }
@media (prefers-reduced-motion: reduce) {
  .size-cell.is-downloaded::after, .gen-reset { transition: none; }
}