/* ============================================================
   SMC · Components
   ============================================================ */

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  padding-top: max(var(--sp-3), env(safe-area-inset-top));
  padding-left: max(var(--sp-5), env(safe-area-inset-left));
  padding-right: max(var(--sp-5), env(safe-area-inset-right));
  background: linear-gradient(180deg, var(--ink-0) 0%, color-mix(in oklab, var(--ink-0) 88%, transparent) 80%, transparent 100%);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.topbar__brand {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--vellum-0);
  letter-spacing: 0.01em;
  text-decoration: none; border: 0;
  min-height: 44px;
  white-space: nowrap;
  min-width: 0;
}
.topbar__brand span { overflow: hidden; text-overflow: ellipsis; }
.topbar__brand:hover { color: var(--gilt-0); border: 0; }
.topbar__brand svg { flex: 0 0 auto; }

.topbar__right { display: flex; align-items: center; gap: var(--sp-2); }

.lang-toggle {
  display: inline-flex;
  background: rgba(240, 230, 207, 0.04);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 3px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
}
.lang-toggle a {
  min-height: 38px;
  padding: 0 var(--sp-3);
  display: inline-flex; align-items: center;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--vellum-2);
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.lang-toggle a[aria-current="true"] {
  background: var(--vellum-0);
  color: var(--ink-0);
}
.lang-toggle a:not([aria-current="true"]):hover { color: var(--vellum-0); }

/* ---------- Sticky mini-nav (section pages) ---------- */
.mininav {
  position: sticky; top: calc(68px + env(safe-area-inset-top, 0px)); z-index: 30;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--ink-glass);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  font-size: var(--fs-small);
  transform: translateY(-12px);
  opacity: 0;
  transition: transform var(--dur-med) var(--ease-out),
              opacity var(--dur-med) var(--ease-out);
}
.mininav.is-stuck { display: flex; transform: translateY(0); opacity: 1; }
.mininav__home {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  color: var(--vellum-2); border: 0;
  min-height: 32px;
}
.mininav__home:hover { color: var(--vellum-0); border: 0; }
.mininav__label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--vellum-0);
  flex: 1; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mininav__num {
  font-family: var(--font-display);
  color: var(--gilt-0);
  font-weight: 600;
  margin-right: 0.35em;
}
.mininav__nav { display: flex; gap: var(--sp-2); flex: 0 0 auto; margin-left: auto; }
.mininav__btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: rgba(240,230,207,0.03);
  color: var(--vellum-0);
  font-family: var(--font-display);
  font-size: 24px; line-height: 1;
}
.mininav__btn:hover { border-color: var(--gilt-0); color: var(--gilt-0); }
.mininav__btn--next {
  background: var(--ember-1); border-color: var(--ember-1);
  color: var(--vellum-0); box-shadow: var(--shadow-ember);
}
.mininav__btn--next:hover { background: var(--ember-0); border-color: var(--ember-0); color: var(--vellum-0); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: var(--hero-height);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--sp-9) var(--sp-5) var(--sp-7);
  overflow: hidden;
  isolation: isolate;
}
.hero__art {
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero__art img,
.hero__art svg { width: 100%; height: 100%; object-fit: cover; }
.hero__art::after {
  /* even veil that keeps the title/subtitle legible over the bright heart,
     then deepens to ink at the bottom */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(8,9,13,0.58) 0%,
    rgba(8,9,13,0.50) 45%,
    rgba(8,9,13,0.74) 82%,
    var(--ink-0) 100%);
}
.hero__art::before {
  /* faint placeholder ribbon — bottom-left, only when .is-placeholder */
  display: none;
}
.hero__art.is-placeholder::before {
  content: "[placeholder · painting]";
  display: block;
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--vellum-2);
  background: rgba(8,9,13,0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  z-index: 2;
}

.hero__numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(120px, 36vw, 220px);
  line-height: 0.85;
  color: var(--gilt-0);
  text-shadow: 0 4px 30px rgba(224, 183, 116, 0.25);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-3) -0.04em;
  opacity: 0.96;
}
.hero__eyebrow { margin-bottom: var(--sp-3); }
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-md);
  line-height: var(--lh-display);
  color: var(--vellum-0);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--gilt-0);
}
.hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--vellum-1);
  margin-bottom: var(--sp-3);
  max-width: 30ch;
}
.hero__meta {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--vellum-2);
}
.hero__meta > * { display: inline-flex; align-items: center; gap: 6px; }
.hero__meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--vellum-3);
}
.hero__title { text-shadow: 0 2px 18px rgba(8,9,13,0.72), 0 1px 3px rgba(8,9,13,0.6); }
.hero__sub { text-shadow: 0 1px 12px rgba(8,9,13,0.72); }
.hero__meta { text-shadow: 0 1px 8px rgba(8,9,13,0.85); }
.eyebrow { text-shadow: 0 1px 10px rgba(8,9,13,0.7); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn--primary {
  background: var(--ember-1);
  color: var(--vellum-0);
  border-color: var(--ember-1);
  box-shadow: var(--shadow-ember);
}
.btn--primary:hover {
  background: var(--ember-0);
  border-color: var(--ember-0);
  color: var(--vellum-0);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--vellum-0);
  border-color: var(--hairline-strong);
}
.btn--ghost:hover {
  border-color: var(--gilt-0);
  color: var(--gilt-0);
}
.btn--quiet {
  min-height: 44px;
  padding: 0 var(--sp-4);
  font-size: 16px;
  font-style: normal;
  color: var(--vellum-2);
  border-color: var(--hairline);
}
.btn--quiet:hover { color: var(--vellum-0); border-color: var(--hairline-strong); }
.btn:active { transform: scale(0.98); }

/* ---------- Section cards (landing) ---------- */
.cards { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: block;
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(240,230,207,0.02) 0%, rgba(240,230,207,0) 100%),
    var(--ink-2);
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--vellum-1);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.card:hover, .card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--gilt-0) 40%, transparent);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--gilt-glow);
  color: var(--vellum-1);
}
.card__thumb {
  aspect-ratio: 5 / 4;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  position: relative;
  overflow: hidden;
  background: var(--ink-1);
  border-bottom: 1px solid var(--hairline);
}
.card__thumb img, .card__thumb svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__thumb img,
.card:hover .card__thumb svg { transform: scale(1.04); }
.card__thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,9,13,0.75) 100%);
  pointer-events: none;
}
.card__num {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--gilt-0);
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--vellum-0);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.card__sub {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--vellum-2);
}
.card__cta {
  margin-top: var(--sp-4);
  display: inline-flex; align-items: center; gap: 6px;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gilt-0);
}
.card__cta::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}
.card:hover .card__cta::after { transform: translateX(3px); }

/* ---------- Exhibit index: large, obvious tap target (elderly audience) ---------- */
/* Renders the card CTA as a full ember button so the call-to-open is unmistakable. */
.card__cta--btn {
  margin-top: var(--sp-5);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  padding: 0 var(--sp-6, 28px);
  background: var(--ember-1);
  color: var(--vellum-0);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-ember);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
}
.card:hover .card__cta--btn { background: var(--ember-0); color: var(--vellum-0); }
/* MEANING hook on an index card — a touch larger / lighter than card__sub for readability */
.card__hook {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--vellum-1);
  text-wrap: pretty;
}
.exhibit-hint {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--gilt-0);
  margin: 0 0 var(--sp-5);
}

/* ---------- Exhibit page: FACTS list + prev/next nav ---------- */
.facts { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.facts li {
  position: relative;
  padding: 0 0 var(--sp-3) var(--sp-5);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--vellum-1);
}
.facts li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--gilt-1);
  border-radius: 50%;
}
.exhibit-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: space-between; align-items: center;
}
.exhibit-nav .btn { flex: 1 1 auto; }

/* Exhibit-index cards: card must grow to fit title + hook + button (not clip),
   and the thumb is a calm 16:9 band matching the 1376x768 illustrations
   (the landing .card__thumb 5/4 cover pattern inverts on these wide images). */
.cards--exhibit .card { height: auto; }
.cards--exhibit .card__thumb { aspect-ratio: auto; height: 200px; }
.cards--exhibit .card__thumb img { height: 200px; }
.cards--exhibit .card__title { font-size: var(--fs-h3); }

/* ---------- Featured quote ---------- */
.pullquote {
  position: relative;
  margin: var(--sp-8) 0;
  padding: var(--sp-7) var(--sp-5);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}
.pullquote__mark {
  position: absolute;
  top: -22px; left: -8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 120px;
  line-height: 1;
  color: var(--ember-1);
  opacity: 0.6;
  pointer-events: none;
}
.pullquote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.3;
  color: var(--vellum-0);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
.pullquote__cite {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--vellum-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.pullquote__cite::before {
  content: ""; width: 18px; height: 1px;
  background: var(--vellum-3);
}

/* ---------- Long-form prose ---------- */
.prose {
  font-size: var(--fs-body);
  color: var(--vellum-1);
  line-height: var(--lh-body);
}
.prose p { margin: 0 0 1.1em; }
.prose p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  float: left;
  font-size: 4.2em;
  line-height: 0.9;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--ember-0);
}
.prose h2 {
  font-size: var(--fs-h2);
  margin: var(--sp-7) 0 var(--sp-3);
  color: var(--vellum-0);
}
.prose h3 {
  font-size: var(--fs-h3);
  font-style: italic;
  margin: var(--sp-6) 0 var(--sp-2);
  color: var(--gilt-0);
}
.prose em { font-style: italic; color: var(--vellum-0); }
.prose strong { font-weight: 500; color: var(--vellum-0); }
.prose blockquote {
  margin: var(--sp-6) 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--ember-1);
  font-style: italic;
  color: var(--vellum-0);
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
}
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 0.3em 0; }
.prose :lang(zh-hk) p:first-of-type::first-letter,
[lang^="zh"] .prose p:first-of-type::first-letter {
  float: none;
  font-size: 1em;
  color: inherit;
  padding: 0;
}

/* ---------- Expander (collapse on mobile) ---------- */
.expander summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--vellum-0);
  margin: var(--sp-4) 0 var(--sp-5);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.expander summary::-webkit-details-marker { display: none; }
.expander summary:hover { border-color: var(--gilt-0); color: var(--gilt-0); }
.expander summary::after {
  content: "▾";
  margin-left: 4px;
  transition: transform var(--dur-fast) var(--ease-out);
  font-size: 12px;
}
.expander[open] summary::after { transform: rotate(180deg); }
.expander[open] summary { display: none; }
@media (min-width: 720px) {
  /* expanded by default on desktop */
  .expander[data-collapse="mobile"] > summary { display: none; }
  .expander[data-collapse="mobile"]:not([open]) > :not(summary) { display: revert; }
  .expander[data-collapse="mobile"] { display: contents; }
}

/* ---------- Related readings ---------- */
.related {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-5);
}
.related h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--gilt-0);
  margin-bottom: var(--sp-4);
}
.related ul { list-style: none; padding: 0; margin: 0; }
.related li {
  border-bottom: 1px solid var(--hairline);
}
.related li:last-child { border-bottom: 0; }
.related a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  min-height: 48px;
  color: var(--vellum-0);
  border: 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
}
.related a:hover { color: var(--gilt-0); border: 0; }
.related a::after {
  content: "→";
  color: var(--vellum-3);
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.related a:hover::after { color: var(--gilt-0); transform: translateX(3px); }
.related__kind {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vellum-3);
  display: block;
  margin-bottom: 4px;
  font-style: normal;
}

/* ---------- Takeaway ---------- */
.takeaway {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(224, 183, 116, 0.08) 0%, transparent 60%),
    var(--ink-2);
  border: 1px solid var(--hairline);
}
.takeaway .label-caps { color: var(--gilt-0); }
.takeaway p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: 1.45;
  color: var(--vellum-0);
  margin-top: var(--sp-2);
}

/* ---------- Share row ---------- */
.share {
  margin-top: var(--sp-7);
  display: flex; gap: var(--sp-3);
  flex-wrap: wrap;
}
.share button {
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  color: var(--vellum-1);
  font-family: var(--font-body);
  font-size: 14px;
  background: rgba(240, 230, 207, 0.02);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.share button:hover { border-color: var(--hairline-strong); color: var(--vellum-0); }

/* ---------- Audio player (§3) ---------- */
.audioplayer {
  position: relative;
  margin: var(--sp-6) 0;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(212, 76, 84, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink-1) 100%);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.audioplayer__label { display: flex; align-items: center; justify-content: space-between; }
.audioplayer__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--vellum-0);
  margin: 0;
}
.audioplayer__time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--vellum-2);
  font-variant-numeric: tabular-nums;
}
.audioplayer__controls {
  margin-top: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
}
.audioplayer__play {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ember-1);
  color: var(--vellum-0);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-ember);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.audioplayer__play:hover { background: var(--ember-0); transform: scale(1.04); }
.audioplayer__play svg { width: 22px; height: 22px; }
.audioplayer__scrubwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.audioplayer__scrub {
  position: relative;
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.audioplayer__scrub::after {
  content: ""; position: absolute; inset: 0;
  width: var(--progress, 32%);
  background: linear-gradient(90deg, var(--gilt-1) 0%, var(--gilt-0) 100%);
}
.audioplayer__scrub::before {
  content: ""; position: absolute;
  left: var(--progress, 32%);
  top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--vellum-0);
  box-shadow: 0 0 0 2px var(--ink-2), 0 0 12px var(--gilt-glow);
}
.audioplayer__chips {
  display: flex; gap: var(--sp-2);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.audioplayer__chip {
  min-height: 36px; padding: 0 var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--vellum-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.audioplayer__chip:hover { border-color: var(--hairline-strong); color: var(--vellum-0); }

/* ---------- Transcript ---------- */
.transcript {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-5);
}
.transcript__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-body);
  line-height: 1.55;
}
.transcript__row:last-child { border-bottom: 0; }
.transcript__t {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--vellum-3);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.transcript__row.is-active .transcript__t { color: var(--gilt-0); }
.transcript__row.is-active .transcript__text { color: var(--vellum-0); }
.transcript__row[data-speaker="jesus"] .transcript__text { color: var(--ember-0); font-style: italic; font-family: var(--font-display); font-size: 17px; }
.transcript__row[data-speaker="margaret"] .transcript__text { color: var(--vellum-0); }

/* ---------- Footer ---------- */
.foot {
  margin-top: var(--sp-10);
  padding: var(--sp-7) var(--sp-5) var(--sp-8);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  color: var(--vellum-2);
}
.foot__cross {
  text-align: center;
  margin-bottom: var(--sp-5);
  font-family: var(--font-display);
  color: var(--gilt-0);
  font-size: 28px;
  font-style: italic;
}
.foot__grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 720px) {
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.foot__col h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--vellum-0);
  margin-bottom: var(--sp-3);
  font-weight: 500;
}
.foot__col a { color: var(--vellum-1); border-color: transparent; display: block; padding: 4px 0; }
.foot__col a:hover { color: var(--gilt-0); }
.foot__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
  color: var(--vellum-3);
  font-size: 12px;
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: space-between;
}

/* ---------- Section number motif ---------- */
.section-mark {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gilt-0);
  font-weight: 500;
}

/* ---------- Read-time badge ---------- */
.readtime {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--vellum-2);
  font-family: var(--font-body);
}
.readtime svg { color: var(--gilt-0); }

/* ---------- Prayer card ---------- */
.prayer {
  position: relative;
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(122, 29, 36, 0.18) 0%, transparent 50%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink-1) 100%);
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
}
.prayer__crest {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  color: var(--ember-0);
  line-height: 1;
  margin-bottom: var(--sp-4);
}
.prayer__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--vellum-0);
  margin-bottom: var(--sp-5);
  letter-spacing: -0.005em;
}
.prayer__body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--vellum-1);
}
.prayer__amen {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gilt-0);
  font-size: 18px;
}
.prayer__pdf {
  margin-top: var(--sp-5);
  display: inline-flex; align-items: center; gap: 8px;
  border: 0;
  color: var(--gilt-0);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
}

/* ---------- Gallery (§5) ---------- */
.gallery {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr 1fr;
  margin-top: var(--sp-5);
}
.gallery__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--ink-1);
}
.gallery__tile.is-wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.gallery__tile svg, .gallery__tile img { width: 100%; height: 100%; object-fit: cover; }
.gallery__tile figcaption {
  position: absolute; left: 10px; bottom: 10px; right: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--vellum-1);
  letter-spacing: 0.01em;
}
.gallery__tile figcaption .num {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  color: var(--vellum-3);
  letter-spacing: 0.16em;
  display: block;
  margin-bottom: 4px;
}

/* Elegant "image awaiting" placeholder — used inside gallery tiles
   and anywhere imagery will later be supplied. Pure colour fields with
   a fine corner mark. No drawn motifs. */
.img-slot {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 30% 30%, rgba(240, 230, 207, 0.04) 0%, transparent 60%),
    linear-gradient(135deg, var(--ink-2) 0%, var(--ink-1) 100%);
  overflow: hidden;
}
.img-slot::before {
  /* paint texture */
  content: "";
  position: absolute; inset: 0;
  background-image: url("../assets/grain.svg");
  background-size: 180px 180px;
  opacity: 0.35;
  mix-blend-mode: overlay;
}
.img-slot::after {
  /* corner mark */
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 16px; height: 16px;
  border-top: 1px solid var(--gilt-1);
  border-right: 1px solid var(--gilt-1);
  opacity: 0.55;
}
.img-slot--ember { background: linear-gradient(135deg, #1a0d10 0%, #0a0a10 100%); }
.img-slot--gilt  { background: linear-gradient(135deg, #1a140a 0%, #0a0908 100%); }
.img-slot--blue  { background: linear-gradient(135deg, #0e1018 0%, #06070d 100%); }
.img-slot--deep  { background: linear-gradient(135deg, #110e0c 0%, #060508 100%); }

/* ---------- Placeholder pill ---------- */
.placeholder {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ember-0);
  background: rgba(212, 76, 84, 0.10);
  border: 1px dashed color-mix(in oklab, var(--ember-0) 50%, transparent);
  border-radius: var(--r-xs);
  padding: 2px 6px;
}

.cite { font-size: 0.62em; vertical-align: super; line-height: 0; }
.cite a { color: var(--gilt-1); border: 0; }

/* ---------- Section page main ---------- */
.section-page {
  padding-bottom: var(--sp-9);
}
.section-page__intro {
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
}
.section-page__intro h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-md);
  line-height: var(--lh-display);
  margin: var(--sp-3) 0 var(--sp-4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.section-page__intro h1 em { font-style: italic; color: var(--gilt-0); }
.section-page__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--gilt-0);
  font-size: var(--fs-body);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.section-page__num::after {
  content: ""; width: 28px; height: 1px;
  background: var(--gilt-0); opacity: 0.6;
}
.section-page__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: 1.45;
  color: var(--vellum-0);
  margin: 0 0 var(--sp-5);
  max-width: 34ch;
}
.section-page__meta {
  display: flex; gap: var(--sp-4); align-items: center;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--vellum-2);
}
.section-page__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--vellum-3); }

/* dense list — used for schedules, credits */
.dlist { margin: var(--sp-5) 0; }
.dlist__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-body);
}
.dlist__row:last-child { border-bottom: 0; }
.dlist__t {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gilt-0);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.dlist__v { color: var(--vellum-0); }
.dlist__v .small { display: block; font-size: 13px; color: var(--vellum-2); margin-top: 2px; }

.figure { margin: var(--sp-6) 0; }
.figure img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--hairline); display: block; }
.figure figcaption { font-size: var(--fs-micro); color: var(--vellum-3); margin-top: var(--sp-2); font-style: italic; text-align: center; }

.sequence { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin: var(--sp-5) 0; }
@media (min-width: 600px) { .sequence { grid-template-columns: repeat(3, 1fr); } }
.sequence figure { margin: 0; }
.sequence img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--hairline); display: block; }
.sequence figcaption { font-size: var(--fs-micro); color: var(--vellum-3); margin-top: 4px; font-style: italic; text-align: center; }

/* ---------- Journey nav + continue CTA ---------- */
.journey { display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-5) 0; }
.journey__label { font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--vellum-3); white-space:nowrap; }
.journey__dots { display:flex; gap:8px; }
.journey__dots a { width:10px; height:10px; border-radius:50%; border:1px solid var(--hairline-strong); display:block; padding:0; }
.journey__dots a:hover { border-color:var(--gilt-0); }
.journey__dots a[aria-current="page"] { background:var(--gilt-0); border-color:var(--gilt-0); }
.continue-cta { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); margin-top:var(--sp-7); padding:var(--sp-5); border:1px solid var(--hairline); border-radius:var(--r-lg); text-decoration:none; }
.continue-cta:hover { border-color:var(--gilt-0); }
.continue-cta .k { font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--vellum-3); }
.continue-cta .t { font-family:var(--font-display); font-size:var(--fs-h3); color:var(--vellum-0); display:block; margin-top:4px; }
.continue-cta .arrow { font-size:var(--fs-h2); color:var(--gilt-0); }

/* ---------- Light a candle (§6) ---------- */
.candle-area { text-align:center; margin:var(--sp-7) 0; }
.candle { display:inline-flex; flex-direction:column; align-items:center; gap:var(--sp-3); background:transparent; border:0; cursor:pointer; padding:var(--sp-4); }
.candle__flame { width:16px; height:24px; border-radius:50% 50% 50% 50% / 62% 62% 40% 40%; background:radial-gradient(circle at 50% 70%, #fff7da, var(--gilt-0) 55%, var(--ember-1) 92%); opacity:0; transform:scale(.4); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.candle__stick { width:16px; height:64px; border-radius:3px; background:linear-gradient(180deg,#efe5cd,#cdbf9f); }
.candle[aria-pressed="true"] .candle__flame { opacity:1; transform:scale(1); filter:drop-shadow(0 0 16px var(--gilt-0)); }
.candle__caption { font-size:var(--fs-small); color:var(--vellum-2); font-style:italic; }
@media (prefers-reduced-motion: no-preference){ .candle[aria-pressed="true"] .candle__flame { animation:flicker 2.6s ease-in-out infinite; } }
@keyframes flicker { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) translateY(-1px) } }

/* ---------- §2 Sacred Heart auto cross-fade stage ---------- */
.seq-stage { display:none; }
@media (prefers-reduced-motion: no-preference){
  .sequence.has-stage { display:none; }
  .seq-stage { display:block; position:relative; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--hairline); margin:var(--sp-5) 0; }
  .seq-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:seqfade 24s linear infinite; }
  .seq-stage img:nth-child(1){ animation-delay:0s }
  .seq-stage img:nth-child(2){ animation-delay:4s }
  .seq-stage img:nth-child(3){ animation-delay:8s }
  .seq-stage img:nth-child(4){ animation-delay:12s }
  .seq-stage img:nth-child(5){ animation-delay:16s }
  .seq-stage img:nth-child(6){ animation-delay:20s }
  .seq-stage__cap { position:absolute; left:0; right:0; bottom:0; padding:10px 14px; font-size:var(--fs-micro); font-style:italic; color:var(--vellum-1); background:linear-gradient(180deg,transparent,rgba(8,9,13,.75)); }
}
@keyframes seqfade { 0%{opacity:0} 1.5%{opacity:1} 15%{opacity:1} 18%{opacity:0} 100%{opacity:0} }

/* ---------- Scroll reveal ---------- */
.reveal-on-scroll { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-on-scroll.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal-on-scroll { opacity:1 !important; transform:none !important; } }

/* ---------- "What this room is saying" meaning callout ---------- */
.meaning { border-left: 3px solid var(--gilt-1); background: rgba(224,183,116,0.05); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-md) var(--r-md) 0; margin: var(--sp-5) 0; }
.meaning .label-caps { color: var(--gilt-0); }
.meaning p { font-family: var(--font-display); font-style: italic; font-size: var(--fs-body-lg); color: var(--vellum-0); line-height: 1.5; margin: 6px 0 0; max-width: 34ch; }

/* ---------- Prose pacing — keep long-form from becoming a wall ---------- */
.prose p { max-width: 60ch; }
.prose > p, .prose > h2 { margin-top: var(--sp-5); }
.prose h2 { font-size: var(--fs-h3); color: var(--gilt-0); }
.beat-quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); color: var(--vellum-0); line-height: 1.4; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--sp-5) 0; margin: var(--sp-6) 0; text-align: center; }

/* ============================================================
   V2 — feedback additions (2026-05-27)
   carousel · progressive-disclosure modal · how-to · room actions ·
   journal · key-highlight · exploded diagram
   ============================================================ */

/* ---------- 1I · Key-point highlight ---------- */
mark.key {
  background: linear-gradient(180deg, transparent 58%, var(--gilt-glow) 58%);
  color: var(--vellum-0);
  padding: 0 0.08em;
  border-radius: 2px;
}
@media (forced-colors: active) { mark.key { background: Mark; color: MarkText; } }

/* ---------- 1E · Exhibit carousel (scroll-snap, shows images) ---------- */
.carousel { position: relative; margin: var(--sp-2) calc(var(--sp-5) * -1) 0; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--sp-2) var(--sp-5) var(--sp-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > .card { scroll-snap-align: center; margin: 0; }
@media (min-width: 720px)  { .carousel__track { grid-auto-columns: 46%; } }
@media (min-width: 1024px) { .carousel__track { grid-auto-columns: 31%; } }
.carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-2); }
.carousel__btn {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: rgba(240,230,207,0.03);
  color: var(--vellum-0);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.carousel__btn:hover { border-color: var(--gilt-0); color: var(--gilt-0); }
.carousel__btn:disabled { opacity: 0.35; cursor: default; }
.carousel__dots { display: flex; align-items: center; gap: 8px; }
.carousel__dots button {
  width: 9px; height: 9px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: transparent; cursor: pointer;
}
.carousel__dots button[aria-current="true"] { background: var(--gilt-0); border-color: var(--gilt-0); }

/* ---------- 1A/1B/1C · Exhibit progressive disclosure ---------- */
.exhibit-desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: 1.4;
  color: var(--vellum-0);
  max-width: 32ch;
  margin: var(--sp-4) 0 var(--sp-6);
}
.disclosure { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0; }
.disclosure .btn { flex: 1 1 200px; min-height: 56px; }

/* ---------- 1A · Accessible modal (native <dialog>) ---------- */
.modal {
  border: 1px solid var(--hairline-strong);
  padding: 0;
  width: min(680px, 92vw);
  max-height: 86vh;
  background: var(--ink-1);
  color: var(--vellum-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal::backdrop { background: rgba(4,5,8,0.74); backdrop-filter: blur(3px); }
.modal__head {
  position: sticky; top: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  background: var(--ink-1);
  border-bottom: 1px solid var(--hairline);
}
.modal__kicker { font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gilt-0); display: block; margin-bottom: 4px; }
.modal__title { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--vellum-0); margin: 0; line-height: 1.15; }
.modal__close {
  flex: 0 0 auto; width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent; color: var(--vellum-1);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal__close:hover { border-color: var(--gilt-0); color: var(--gilt-0); }
.modal__body { padding: var(--sp-5); overflow-y: auto; max-height: calc(86vh - 96px); }
/* No-JS fallback: dialogs render inline as normal blocks so all content stays reachable */
.no-js .modal, html:not(.js) .modal {
  display: block; position: static; width: auto; max-height: none;
  margin: var(--sp-4) 0; box-shadow: none;
}
.no-js .modal__close, html:not(.js) .modal__close { display: none; }

/* ---------- 1G · "How to use this space" ---------- */
.room-howto {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 80% at 0% 0%, rgba(224,183,116,0.07) 0%, transparent 60%), var(--ink-2);
}
.room-howto__icon { flex: 0 0 auto; color: var(--gilt-0); margin-top: 2px; }
.room-howto h3 { font-family: var(--font-display); font-style: italic; color: var(--gilt-0); margin: 0 0 4px; font-size: var(--fs-h3); }
.room-howto p { margin: 0; color: var(--vellum-1); font-size: var(--fs-body); line-height: 1.5; }

/* ---------- 1H · Room actions: Reflect / Games ---------- */
.room-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-5) 0 var(--sp-2); }
.room-actions .btn { flex: 1 1 160px; }

/* ---------- 4A · Reflection journal (saved on device) ---------- */
.journal {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--ink-2);
}
.journal h3 { font-family: var(--font-display); font-style: italic; color: var(--gilt-0); margin: 0 0 var(--sp-2); font-size: var(--fs-h3); }
.journal .hint { font-size: var(--fs-small); color: var(--vellum-2); margin: 0 0 var(--sp-3); }
.journal textarea {
  width: 100%; min-height: 120px; resize: vertical;
  background: var(--ink-1);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  color: var(--vellum-0);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
  padding: var(--sp-3);
  box-sizing: border-box;
}
.journal textarea:focus-visible { outline: 2px solid var(--gilt-0); outline-offset: 2px; }
.journal__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }
.journal__status { font-size: var(--fs-micro); color: var(--vellum-3); font-family: var(--font-body); }

/* ---------- 3C · Exploded Sacred Heart (placeholder for real animation) ---------- */
.exploded { margin: var(--sp-5) 0; }
.exploded__img { position: relative; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(135deg,#1a0d10,#0a0a10); }
.exploded__img img { width: 100%; height: 100%; object-fit: cover; }
.exploded__legend { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.exploded__legend li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-body); color: var(--vellum-1); }
.exploded__legend b { font-family: var(--font-display); font-style: italic; color: var(--gilt-0); font-weight: 500; }

/* ---------- 4A · "Take my journal home" button + count badge ---------- */
.journal__row .btn { min-height: 44px; }
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: var(--r-pill);
  background: var(--gilt-0); color: var(--ink-0);
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- 4A · Keepsake / reflections (a printable devotional leaf) ---------- */
.keepsake-page {
  background: radial-gradient(125% 90% at 50% -10%, #faf2dc 0%, #f2e7cb 55%, #ebdebb 100%);
  color: #2a2118;
}
.keepsake-page::before { display: none; } /* drop the dark-theme grain overlay */
.keepsake-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
}
.keepsake-top a { color: #7a1d24; border-bottom-color: rgba(122,29,36,0.32); font-family: var(--font-display); font-style: italic; font-size: 1rem; }
.keepsake-wrap { max-width: 640px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }
/* the sheet = what gets captured into the downloaded PDF (carries the keyline frame) */
.keepsake-sheet {
  background: #faf3de;
  border: 1px solid rgba(122,29,36,0.26);
  border-radius: var(--r-sm);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
}

/* masthead — compact so it doesn't eat half the first page */
.keepsake__masthead { text-align: center; margin: var(--sp-2) 0 var(--sp-6); }
.keepsake__cross { font-family: var(--font-display); font-style: italic; color: var(--ember-1); font-size: 24px; line-height: 1; opacity: 0.9; }
.keepsake__h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 6.5vw, 2.8rem); line-height: 1.0;
  letter-spacing: -0.025em; color: #29130f;
  margin: var(--sp-2) 0 5px;
}
.keepsake__h1 em { font-style: italic; color: var(--ember-2); }
.keepsake__sub { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: #8a7350; margin: 0; letter-spacing: 0.01em; }
.keepsake__masthead::after {
  content: ""; display: block; width: 120px; margin: var(--sp-4) auto 0; height: 4px;
  border-top: 1px solid rgba(176,48,56,0.5);
  border-bottom: 1px solid rgba(176,48,56,0.2);
}

/* each reflection — left-aligned, full column, tight rhythm, hairline between */
.keepsake__entry { text-align: left; padding: var(--sp-4) 0; break-inside: avoid; page-break-inside: avoid; }
.keepsake__entry + .keepsake__entry { border-top: 1px solid rgba(122,29,36,0.13); }
.keepsake__where {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 500;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: #7a1d24; margin: 0 0 7px;
}
.keepsake__text {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.22rem; line-height: 1.42;
  color: #221310; margin: 0; text-wrap: pretty;
}
.keepsake__when {
  font-family: var(--font-body); font-variant-numeric: oldstyle-nums;
  font-size: 0.74rem; letter-spacing: 0.05em; color: #a58d69;
  margin: 8px 0 0;
}
.keepsake__close {
  text-align: center; margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid rgba(122,29,36,0.16);
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: #8a7350;
}

.keepsake__empty { text-align: center; color: #8a7350; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.5; padding: var(--sp-8) 0; max-width: 30ch; margin: 0 auto; }
.keepsake__tools { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-8); }
.keepsake__tools .btn { flex: 0 1 220px; }
.btn--ink { background: var(--ember-1); color: #fdf6e6; border-color: var(--ember-1); box-shadow: var(--shadow-ember); }
.btn--ink:hover { background: var(--ember-0); color: #fff; }
.btn--ledger { background: transparent; color: #6b4a30; border-color: rgba(122,29,36,0.32); }
.btn--ledger:hover { border-color: #7a1d24; color: #7a1d24; }
.keepsake__note { text-align: center; font-size: 0.8rem; color: #a58d69; margin: var(--sp-5) auto 0; max-width: 42ch; }

@media print {
  @page { margin: 14mm; }
  .keepsake-page { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .keepsake-top, .keepsake__tools, .keepsake__note, .no-print { display: none !important; }
  .keepsake-wrap { max-width: none; padding: 0; }
  .keepsake-sheet { border-color: rgba(122,29,36,0.4); padding: 8mm; }
  .keepsake__entry { break-inside: avoid; }
  a[href]:after { content: ""; }
}

/* ============================================================
   Exhibit journey rebuild — audio, reflection, progress, hubs
   ============================================================ */
.progress-marker {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  color: var(--vellum-3);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.progress-marker--intro { margin-top: var(--sp-3); }
.progress-marker--end {
  margin: var(--sp-7) 0 var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
@media (max-width: 600px) {
  .mininav > .progress-marker { display: none; }
  .mininav__home-text { display: none; }
}

.exhibit-audio {
  margin: var(--sp-3) 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(224,183,116,0.06), rgba(240,230,207,0.015));
}
.exhibit-audio h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--gilt-0);
}
.exhibit-audio audio { display: block; width: 100%; min-height: 44px; color-scheme: dark; }
.exhibit-audio p { margin-top: var(--sp-2); color: var(--vellum-3); font-size: var(--fs-small); }

.reflect { margin-top: var(--sp-7); }
.reflect__cards { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.reflect-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-left: 2px solid color-mix(in oklab, var(--gilt-0) 58%, transparent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: rgba(224,183,116,0.04);
}
.reflect-card > span {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gilt-1);
  font-size: var(--fs-h3);
  line-height: 1.25;
}
.reflect-card p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--vellum-0);
}

.landing-intro { padding-top: var(--sp-6); }
.landing-intro > p {
  max-width: 38ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--vellum-0);
}
.landing-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.journey-index > .label-caps { display: block; margin-bottom: var(--sp-7); }
.section-hub { margin: 0 0 var(--sp-8); }
.section-hub__kicker {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gilt-0);
  font-size: var(--fs-body-lg);
}
.section-hub h2 { margin: var(--sp-1) 0 var(--sp-4); }
.section-hub__cards { display: grid; gap: var(--sp-3); }
.section-hub-card {
  display: grid;
  grid-template-columns: auto 76px 1fr;   /* big number · thumbnail · text */
  align-items: center;
  gap: var(--sp-4);
  min-height: 116px;
  padding: var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--ink-2);
  color: var(--vellum-1);
  text-decoration: none;
}
.section-hub-card:hover { border-color: color-mix(in oklab, var(--gilt-0) 45%, transparent); color: var(--vellum-1); }
.section-hub-card__num {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 42px;            /* was 27px — big for wayfinding */
  line-height: 1; color: var(--gilt-0);
  text-align: center; align-self: center;
}
.section-hub-card__thumb {
  width: 76px; height: 76px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--ink-1);
  align-self: center;
}
.section-hub-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section-hub-card__body { min-width: 0; }
.section-hub-card strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--vellum-0); line-height: 1.25; }
.section-hub-card em { display: block; margin-top: var(--sp-2); font-family: var(--font-display); color: var(--vellum-2); line-height: 1.45; }
.section-hub-card small { display: block; margin-top: var(--sp-3); color: var(--gilt-0); font-family: var(--font-display); font-style: italic; font-size: 16px; }
.journey-index__cta { width: 100%; margin-top: var(--sp-2); }
@media (min-width: 720px) {
  .section-hub__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-hub-card { min-height: 150px; }
}