@font-face { font-family: "Montserrat"; src: url("/store/typeset/montserrat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/store/typeset/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/store/typeset/montserrat-latin-800-normal.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/store/typeset/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/store/typeset/inter-latin-600-normal.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/store/typeset/inter-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --core: #61be2f;
  --highlight: #ffc108;
  --action-down: #dca100;
  --surface: #131415;
  --bg-elevated: #1c1e20;
  --type: #FFFFFF;
  --subtle: #c1c1c1;
  --divider: #2d3033;
  --edge-hard: #4a4f53;
  --blend-a: #ffe082;
  --blend-b: #ffd233;
  --rg-banner: #9f1239;
  --core-deep: #4c9a22;
  --ink-on-bright: #131415;

  --s-hair: 6px;
  --s-tiny: 14px;
  --s-snug: 20px;
  --s-base: 32px;
  --s-wide: 48px;
  --s-roomy: 72px;
  --s-vast: 112px;
  --s-huge: 160px;
  --sec-y: var(--s-wide);

  --r-hair: 2px;
  --r-tiny: 2px;
  --r-snug: 8px;
  --r-base: 14px;
  --r-wide: 22px;
  --pill: 9999px;
  --dot: 50%;
  --d-tiny: 0 0 0 1px rgba(255,255,255,0.06) inset;
  --d-snug: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.08) inset;
  --d-base: 0 8px 24px rgba(0,0,0,0.20), 0 0 0 1px rgba(255,255,255,0.10) inset;
  --d-wide: 0 16px 48px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.12) inset;
  --slim: 1px;
  --b-even: 2px;
  --strong: 3px;

  --display: "Montserrat", "Arial Black", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --xxl: 36px;
  --head: 28px;
  --h3: 22px;
  --md-2: 18px;
  --h5: 16px;
  --h6: 14px;
  --normal: 16px;
  --fine: 13px;
  --mini: 11px;
  --close: 1.1;
  --base: 1.5;
  --open: 1.75;
  --regular: 400;
  --demi: 500;
  --thick: 700;
  --e-close: -0.02em;
  --even: 0;
  --e-open: 0.04em;

  --short: 160ms;
  --t-base: 340ms;
  --gentle: 624ms;
  --exit: cubic-bezier(0.3, 0.67, 0.46, 0.96);
  --smooth: cubic-bezier(0.62, 0.08, 0.35, 0.93);
  --overshoot: cubic-bezier(0.4, 1.65, 0.74, 1.15);
  --rise-shift: 28px;
  --lift: 6px;

  --main: 1160px;
  --v-text: 1160px;
  --narrow-col: 550px;
  --edge-wide: 48px;
  --edge-mid: 32px;
  --pad-sm: 16px;
  --tall: 80px;
  --h-short: 64px;
  --gutter: var(--pad-sm);
  interpolate-size: allow-keywords;
}

@media (min-width: 720px) {
  :root {
    --xxl: 64px;
    --head: 40px;
    --h3: 28px;
    --md-2: 22px;
    --h5: 18px;
    --h6: 16px;
    --normal: 17px;
    --fine: 14px;
    --mini: 12px;
    --gutter: var(--edge-mid);
  }
}
@media (min-width: 1040px) {
  :root { --gutter: var(--edge-wide); }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: calc(var(--tall) + var(--s-snug)); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--type);
  font-family: var(--text);
  font-size: var(--normal);
  line-height: var(--base);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.ground { display: block; flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: var(--highlight); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--short) var(--exit); }
a:hover { color: var(--blend-a); }
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; font-family: var(--display); margin: 0; }
h1, h2 { font-weight: var(--thick); letter-spacing: var(--e-close); line-height: var(--close); }
h3 { font-weight: var(--thick); line-height: var(--close); }
p { margin: 0; }
button { font: inherit; }

.skip-hop { position: absolute; left: var(--s-tiny); top: -200px; z-index: 200; background: var(--highlight); color: var(--ink-on-bright); padding: var(--s-tiny) var(--s-snug); font-weight: var(--thick); }
.skip-hop:focus { top: var(--s-tiny); }
.skip-hop:not(:focus) { top: -200px !important; }
:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; }

/* reveal: unfold */
[data-rise] > * { clip-path: inset(0 0 0 0); }
.js-rise [data-rise]:not(.is-in) > * { clip-path: inset(100% 0 0 0); transform: translateY(var(--rise-shift)); }
.js-rise [data-rise] > * { transition: clip-path var(--gentle) var(--exit), transform var(--gentle) var(--exit); }

/* ---------- RG-03 ribbon ---------- */
.tollgate { padding: var(--s-hair) var(--gutter) 0; background: var(--surface); }
.tollgate-say {
  max-width: var(--main);
  margin-inline: auto;
  display: block;
  text-align: center;
  background: var(--rg-banner);
  color: #ffffff;
  border-radius: var(--r-snug);
  padding: var(--s-hair) var(--s-tiny);
  font-size: var(--fine);
  line-height: 1.4;
}
.tollgate-age { display: inline-flex; align-items: center; justify-content: center; background: #ffffff; color: var(--rg-banner); border-radius: var(--pill); padding: 0 7px; margin-right: 6px; font-size: var(--mini); line-height: 18px; }
.tollgate-route { color: #ffffff; background: var(--rg-banner); text-decoration: underline; }
.tollgate-route:hover { color: #ffe4e8; background: var(--rg-banner); }

/* ---------- header HEAD-RIGHT ---------- */
.mantle {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  transition: background-color var(--t-base) var(--exit);
}
.mantle.is-stuck { background: rgba(19,20,21,0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mantle-bar {
  max-width: 1440px;
  margin-inline: auto;
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: var(--s-snug);
  padding-inline: var(--s-wide);
  position: relative;
  flex-wrap: nowrap;
}
.mantle-emblem {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #22252a;
  border: 1px solid var(--edge-hard);
  border-radius: 50%;
  height: 70px;
  padding: 0 22px;
  color: var(--type);
}
.mantle-visual { flex-shrink: 0; height: 48px; width: auto; }
.mantle-lever {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto !important;
  background: var(--surface);
  color: var(--type);
  border: 0;
  cursor: pointer;
  order: 3;
}
.mantle-lines { display: grid; gap: 5px; width: 22px; }
.mantle-lines i { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--short) var(--exit), opacity var(--short) var(--exit); }
.mantle-lever[aria-expanded="true"] .mantle-lines i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mantle-lever[aria-expanded="true"] .mantle-lines i:nth-child(2) { opacity: 0; }
.mantle-lever[aria-expanded="true"] .mantle-lines i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mantle-map { display: none; }
.mantle-stack { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: var(--s-hair); }
.mantle-unit { flex: 0 0 auto; display: flex; align-items: center; }
.mantle-stack > .mantle-unit + .mantle-unit::before,
.mantle-stack > .mantle-more::before { content: "·"; color: #8d9296; margin-right: var(--s-hair); font-size: 16px; }
.mantle-route {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-hair);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  color: var(--type);
  background: var(--surface);
  text-decoration: none;
  white-space: nowrap;
  border-left: 3px solid transparent;
}
.mantle-route:hover { color: var(--highlight); background: var(--surface); }
.mantle-route[aria-current="page"] { border-left-color: var(--highlight); color: var(--type); padding-left: 8px; }
.mantle-more { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.mantle-more[hidden] { display: none; }
.mantle-more-lever { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--type); border: 0; cursor: pointer; }
.mantle-more-lever:hover { color: var(--highlight); background: var(--surface); }
.mantle-dots { display: grid; gap: 4px; }
.mantle-dots i { display: block; width: 18px; height: 2px; background: currentColor; }
.mantle-extra {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: var(--s-hair);
  background: var(--bg-elevated);
  border: 1px solid var(--edge-hard);
  border-radius: var(--r-snug);
  box-shadow: var(--d-wide);
  z-index: 95;
}
.mantle-extra.is-open { display: block; }
.mantle-extra .mantle-unit { display: block; }
.mantle-extra .mantle-unit::before { content: none; }
.mantle-extra .mantle-route { display: flex; width: 100%; padding: 0 var(--s-tiny); background: var(--bg-elevated); }
.mantle-extra .mantle-route:hover { background: var(--bg-elevated); color: var(--highlight); }
.mantle-actions { display: flex; align-items: center; gap: var(--s-tiny); flex: 0 0 auto; order: 2; margin-left: auto; }
.mantle-flag { display: none; width: 26px; height: 18px; border-radius: 2px; overflow: hidden; flex: 0 0 auto; position: relative;
  background:
    linear-gradient(#c8102e, #c8102e) center / 100% 20% no-repeat,
    linear-gradient(#c8102e, #c8102e) center / 14% 100% no-repeat,
    linear-gradient(#ffffff, #ffffff) center / 100% 40% no-repeat,
    linear-gradient(#ffffff, #ffffff) center / 30% 100% no-repeat,
    linear-gradient(33deg, transparent 45%, #ffffff 45%, #ffffff 55%, transparent 55%),
    linear-gradient(-33deg, transparent 45%, #ffffff 45%, #ffffff 55%, transparent 55%),
    #012169;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.mantle-flag i { display: none; }
.mantle-hush {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-snug);
  border: 2px solid var(--edge-hard);
  border-radius: var(--r-tiny);
  background: var(--surface);
  color: var(--type);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--short) var(--exit), color var(--short) var(--exit);
}
.mantle-hush:hover { border-color: var(--highlight); color: var(--highlight); background: var(--surface); }
.mantle-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  white-space: nowrap;
  flex-shrink: 0;
  padding-inline: var(--s-snug);
  border-radius: var(--r-tiny);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.mantle-pane {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--divider);
  box-shadow: 0 18px 30px rgba(0,0,0,0.5);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: var(--s-hair) var(--gutter) var(--s-snug);
}
.mantle-pane.is-open { display: block; }
.mantle-pane-stack { list-style: none; margin: 0; padding: 0; }
.mantle-pane .mantle-unit { display: block; }
.mantle-pane .mantle-route { display: flex; width: 100%; font-size: 15px; background: var(--bg-elevated); border-bottom: 1px solid var(--divider); padding-left: var(--s-hair); }
.mantle-pane .mantle-route:hover { background: var(--bg-elevated); color: var(--highlight); }
.mantle-pane .mantle-route[aria-current="page"] { padding-left: 10px; }

@media (max-width: 899px) {
  .mantle-lever { margin-left: 0 !important; }
}
@media (max-width: 420px) {
  .mantle-bar { padding-inline: var(--s-tiny); gap: 10px; }
  .mantle-emblem { height: 48px; padding: 0 12px; }
  .mantle-visual { height: 28px; }
  .mantle-key { font-size: 12px; padding-inline: 10px; }
}
@media (min-width: 421px) and (max-width: 899px) {
  .mantle-bar { padding-inline: var(--s-snug); }
  .mantle-emblem { height: 54px; padding: 0 16px; }
  .mantle-visual { height: 32px; }
  .mantle-flag { display: inline-block; }
}
@media (min-width: 900px) {
  .mantle-lever { display: none; }
  .mantle-pane, .mantle-pane.is-open { display: none; }
  .mantle-map { display: block; flex: 1 1 auto; min-width: 0; order: 1; }
  .mantle-stack { justify-content: flex-end; }
  .mantle-actions { margin-left: 0; }
  .mantle-flag { display: inline-block; }
  .mantle-hush { display: inline-flex; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .mantle-bar { padding-inline: var(--s-snug); gap: var(--s-tiny); }
  .mantle-emblem { height: 56px; padding: 0 16px; }
  .mantle-visual { height: 34px; }
  .mantle-hush { padding: 0 12px; font-size: 13px; }
  .mantle-actions .mantle-key { padding-inline: 14px; font-size: 13px; }
}

/* ---------- shared section frame ---------- */
.armoire-inner, .lectern-inner, .alcove-inner, .window-inner, .pediment-inner, .lozenge-inner,
.facet-inner, .belfry-inner, .spread-inner, .spandrel-inner, .pergola-inner {
  max-width: calc(var(--main) + 2 * var(--edge-wide));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.lozenge, .armoire, .lectern, .alcove, .window, .pediment, .belfry, .spread { padding-block: var(--sec-y); }
.armoire-top, .lectern-top, .alcove-top, .pediment-top { font-size: var(--head); margin-bottom: var(--s-base); }

/* ---------- HERO-08 magazine cover ---------- */
.hallway {
  position: relative;
  min-height: clamp(560px, calc(100vh - 110px), 820px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0b0c0d;
  color: #ffffff;
  isolation: isolate;
}
.hallway-visual { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hallway-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0.4)); }
.hallway-cover {
  width: 100%;
  max-width: calc(var(--main) + 2 * var(--edge-wide));
  padding: var(--s-roomy) var(--gutter) var(--s-vast);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-snug);
}
.hallway-issue { font-size: var(--mini); text-transform: uppercase; letter-spacing: var(--e-open); color: #d6d6d6; background: #0b0c0d; padding: 4px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--pill); }
.hallway-head { font-size: var(--xxl); text-transform: uppercase; color: #ffffff; max-width: 900px; font-weight: 800; }
.hallway-deck { font-size: var(--h5); color: #e2e2e2; max-width: var(--narrow-col); line-height: var(--base); }
.hallway-detail { display: flex; flex-wrap: wrap; justify-content: center; font-size: var(--fine); color: #d0d0d0; }
.hallway-detail span + span { border-left: 1px solid rgba(255,255,255,0.4); margin-left: var(--s-tiny); padding-left: var(--s-tiny); }
.hallway-hint { position: absolute; bottom: var(--s-snug); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--mini); text-transform: uppercase; letter-spacing: var(--e-open); color: #cfcfcf; }
.hallway-chev { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: hallway-bob 1.6s var(--smooth) infinite; }
@keyframes hallway-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }

/* ---------- PHEAD-03 big block ---------- */
.facet { background: var(--core); color: var(--ink-on-bright); padding-top: var(--s-roomy); padding-bottom: var(--s-wide); }
.facet-head { font-size: clamp(32px, 6vw, 64px); color: var(--ink-on-bright); max-width: 1000px; }
.facet-text { display: block; margin-top: var(--s-snug); max-width: var(--narrow-col); font-size: var(--md-2); color: #1d2a14; background: var(--core); line-height: var(--base); }
.facet-actions { margin-top: var(--s-base); }
.facet-key { display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--s-base); border-radius: var(--r-tiny); font-weight: 700; text-decoration: none; box-shadow: 0 0 0 3px var(--ink-on-bright); }
.hearth { display: inline-flex; align-items: center; gap: var(--s-snug); margin-top: var(--s-snug); background: var(--core); color: var(--ink-on-bright); }
.hearth-face { width: 88px; height: 88px; border-radius: var(--dot); object-fit: cover; object-position: center 20%; border: 3px solid var(--ink-on-bright); flex-shrink: 0; }
.hearth-who { display: flex; flex-direction: column; }
.hearth-name { font-size: var(--normal); font-weight: var(--thick); color: var(--ink-on-bright); background: var(--core); }
.hearth-hat { font-size: var(--mini); color: #1d2a14; background: var(--core); text-transform: uppercase; letter-spacing: var(--e-open); }
.hearth-articles { margin-top: var(--s-roomy); text-align: left; background: var(--bg-elevated); border-radius: var(--r-wide); padding: var(--s-base); }
.hearth-articles-top { font-size: var(--h3); margin-bottom: var(--s-snug); text-align: center; }
.hearth-articles-stack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-tiny); }
.hearth-articles-unit { display: block; }
.hearth-articles-star { grid-column: 1 / -1; }
.hearth-articles-route { display: block; padding: var(--s-tiny) var(--s-snug); border: 1px solid var(--divider); border-radius: var(--r-snug); background: var(--surface); color: var(--type); text-decoration: none; font-weight: 600; }
.hearth-articles-star .hearth-articles-route { border-color: var(--highlight); color: var(--highlight); background: var(--surface); }
.hearth-articles-route:hover { color: var(--highlight); background: var(--surface); }

/* ---------- PROSE-06 centered ---------- */
.lozenge { text-align: center; }
.lozenge-inner > * + * { margin-top: var(--s-snug); }
.lozenge-top { font-size: var(--head); font-weight: var(--demi); letter-spacing: var(--e-close); margin-bottom: var(--s-base); text-wrap: balance; }
.lozenge p, .lozenge li { color: var(--subtle); line-height: var(--open); }
.lozenge strong { color: var(--type); }
.lozenge ul, .lozenge ol { list-style: none; padding: 0; margin-inline: 0; display: grid; gap: var(--s-tiny); }
.lozenge ul li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: var(--dot); background: var(--core); margin-right: 10px; vertical-align: middle; }
.lozenge ol { counter-reset: step; }
.lozenge ol li { counter-increment: step; }
.lozenge ol li::before { content: counter(step) "."; color: var(--highlight); font-weight: var(--thick); margin-right: 8px; }
.lozenge-route { color: var(--highlight); background: var(--surface); }
.lozenge-route:hover { color: var(--blend-a); background: var(--surface); }
.lozenge-figure { margin: var(--s-base) auto; width: 100%; }
.lozenge-figure-wide { max-width: 820px; }
.lozenge-figure-square { max-width: 460px; }
.lozenge-figure-tall { max-width: 380px; }
.lozenge-visual { width: 100%; height: auto; max-width: 100%; border-radius: var(--r-wide); box-shadow: var(--d-base); }
.lozenge-call { margin-top: var(--s-base); display: flex; flex-direction: column; align-items: center; gap: var(--s-hair); }
.lozenge-key { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding-inline: var(--s-base); border-radius: var(--r-tiny); font-weight: 700; text-decoration: none; }

.lozenge-fine, .armoire-fine, .lectern-fine, .alcove-fine, .window-fine { display: block; font-size: var(--mini); color: #a9adb1; background: var(--surface); margin-top: var(--s-hair); }
.lozenge-help, .armoire-help, .lectern-help, .alcove-help, .window-help { color: #d9dcdf; background: var(--surface); }
.lozenge-help:hover, .armoire-help:hover, .lectern-help:hover, .alcove-help:hover, .window-help:hover { color: var(--highlight); background: var(--surface); }

/* ---------- GRID-04 icon cards ---------- */
.armoire-stack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s-snug); }
.armoire-box {
  padding: var(--s-wide) var(--s-base);
  border: 1px solid var(--divider);
  border-radius: var(--r-base);
  background: #181a1c;
  box-shadow: var(--d-tiny);
}
.armoire-badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--dot); background: var(--highlight); color: var(--ink-on-bright); margin-bottom: var(--s-base); font-family: var(--display); font-weight: var(--thick); font-size: var(--md-2); }
.armoire-badge svg { width: 24px; height: 24px; }
.armoire-head { font-size: var(--md-2); margin-bottom: var(--s-snug); }
.armoire-text { color: var(--subtle); line-height: var(--base); }
.armoire-plug { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--s-base); border: 2px dashed var(--highlight); border-radius: var(--r-base); background: var(--surface); }
.armoire-key { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--s-snug); border-radius: var(--r-tiny); font-weight: 700; text-decoration: none; }
@media (min-width: 720px) { .armoire-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } .armoire-plug-wide { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .armoire-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-base); } }

/* ---------- REV-04 featured + list ---------- */
.lectern-lead { margin: 0 0 var(--s-wide); padding: var(--s-wide) var(--s-base); background: #1a2316; border-radius: var(--r-wide); }
.lectern-lead .lectern-quote p { font-size: var(--md-2); font-style: italic; line-height: var(--base); color: var(--type); }
.lectern-quote { margin: 0; }
.lectern-by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-tiny); margin-top: var(--s-snug); background: #1a2316; color: var(--subtle); }
.lectern-lead .lectern-stars { font-size: 28px; }
.lectern-name { font-style: normal; font-weight: 700; color: var(--type); }
.lectern-stars { color: var(--highlight); letter-spacing: 2px; line-height: 1; background: inherit; }
.lectern-posted { font-size: var(--fine); color: #a9adb1; background: inherit; }
.lectern-stack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s-snug) var(--s-base); }
.lectern-unit { padding: var(--s-snug) var(--s-tiny); border-top: 1px solid var(--edge-hard); background: var(--surface); }
.lectern-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-tiny); margin-bottom: var(--s-hair); }
.lectern-unit .lectern-quote p { font-size: var(--fine); color: var(--subtle); line-height: var(--base); }
.lectern-unit .lectern-posted { display: block; margin-top: var(--s-hair); }
.lectern-plug { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--s-snug); border-top: 1px solid var(--edge-hard); background: var(--surface); }
.lectern-key { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--s-snug); border-radius: var(--r-tiny); font-weight: 700; text-decoration: none; }
@media (min-width: 720px) { .lectern-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lectern-lead { padding: var(--s-wide); } }

/* ---------- FAQ-05 details ---------- */
.alcove-stack { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
.alcove-unit { border-bottom: 1px solid var(--divider); }
.alcove-fold { padding-block: var(--s-snug); }
.alcove-ask { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-snug); cursor: pointer; }
.alcove-ask::-webkit-details-marker { display: none; }
.alcove-ask::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--highlight); border-bottom: 2px solid var(--highlight); transform: rotate(45deg); transition: transform var(--t-base) var(--smooth); margin-right: 6px; }
.alcove-fold[open] .alcove-ask::after { transform: rotate(225deg); }
.alcove-head { font-family: var(--text); font-size: var(--h5); font-weight: var(--thick); line-height: 1.35; transition: color var(--short) var(--exit); }
.alcove-ask:hover .alcove-head { color: var(--highlight); }
.alcove-fold::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-base) var(--smooth), content-visibility var(--t-base) var(--smooth) allow-discrete; }
.alcove-fold[open]::details-content { block-size: auto; }
.alcove-inside { padding-top: var(--s-tiny); }
.alcove-inside p { color: var(--subtle); line-height: var(--open); }
.alcove-plug { display: flex; flex-direction: column; align-items: center; padding-block: var(--s-base); border-bottom: 1px solid var(--divider); text-align: center; }
.alcove-key { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--s-snug); border-radius: var(--r-tiny); font-weight: 700; text-decoration: none; }

/* ---------- TABLE-04 ---------- */
.pediment-scroll { overflow-x: auto; border-radius: var(--r-base); border: 1px solid var(--divider); }
.pediment-grid { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fine); }
.pediment-grid th, .pediment-grid td { padding: var(--s-tiny) var(--s-snug); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.pediment-grid thead th { background: var(--core-deep); color: var(--ink-on-bright); font-family: var(--display); font-weight: var(--thick); }
.pediment-grid thead th:first-child { background: var(--core); color: var(--ink-on-bright); border-right: 4px solid var(--highlight); }
.pediment-grid tbody th { background: var(--core); color: var(--ink-on-bright); font-weight: var(--thick); border-right: 4px solid var(--highlight); padding: var(--s-tiny) var(--s-snug); }
.pediment-grid thead th:first-child, .pediment-grid tbody th { width: 30%; }
.pediment-grid td { color: var(--subtle); background: var(--surface); border-bottom: 1px solid var(--divider); }
.pediment-grid tbody tr:nth-child(even) td { background: #181a1c; }
.pediment-hint { display: block; margin-top: var(--s-hair); color: #a9adb1; background: var(--surface); font-size: var(--mini); }
@media (min-width: 720px) { .pediment-hint { display: none; } }

/* ---------- CTA-07 ---------- */
.window-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-snug); padding: var(--s-wide) var(--s-snug); background: var(--surface); border: 2px solid var(--highlight); border-radius: var(--r-wide); }
.window-figure { font-family: var(--display); font-weight: 800; font-size: var(--xxl); line-height: 1; color: var(--highlight); background: var(--surface); }
.window-top { font-size: var(--head); }
.window-text { max-width: var(--narrow-col); color: var(--subtle); line-height: var(--open); }
.window-key { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding-inline: var(--s-base); border-radius: var(--r-tiny); font-weight: 700; text-decoration: none; }
@media (min-width: 720px) { .window-box { padding: var(--s-wide); } }

/* ---------- BYLINE-01 ---------- */
.pergola { padding-block: var(--s-base); }
.pergola-inner { display: flex; align-items: center; gap: var(--s-snug); }
.pergola-face { flex-shrink: 0; display: block; width: 48px; height: 48px; border-radius: var(--dot); overflow: hidden; }
.pergola-face img { width: 48px; height: 48px; object-fit: cover; object-position: center top; }
.pergola-text { color: var(--subtle); font-size: var(--normal); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.pergola-name { color: var(--highlight); background: var(--surface); text-decoration: underline; }
.pergola-name:hover { color: var(--blend-a); background: var(--surface); }
.pergola-hat { flex-basis: 100%; font-size: var(--fine); font-style: italic; color: #a9adb1; background: var(--surface); margin-top: 2px; }
.pergola-posted { flex-basis: 100%; font-size: var(--fine); color: #a9adb1; background: var(--surface); }

/* ---------- LEGAL-07 ---------- */
.belfry-kicker { display: block; font-size: var(--mini); text-transform: uppercase; letter-spacing: var(--e-open); color: var(--highlight); background: var(--surface); margin-bottom: var(--s-snug); }
.belfry-part + .belfry-part { margin-top: var(--s-wide); }
.belfry-top { font-family: var(--display); font-style: italic; font-size: var(--h3); font-weight: var(--thick); }
.belfry-rule { width: 80px; height: 3px; border: 0; background: var(--highlight); margin: var(--s-tiny) 0 var(--s-snug); }
.belfry-part p { color: var(--subtle); line-height: var(--open); }
.belfry-part p + p { margin-top: var(--s-tiny); }
.belfry-rule + p::first-letter { float: left; font-family: var(--display); font-size: 3.3em; line-height: 0.9; font-weight: 800; color: var(--highlight); margin: 4px 10px 0 0; }
.belfry-stack { margin: 0; padding-left: 1.2em; color: var(--subtle); display: grid; gap: var(--s-hair); }
.belfry-fine { display: block; margin-top: var(--s-wide); color: #a9adb1; background: var(--surface); font-size: var(--fine); border-top: 1px solid var(--divider); padding-top: var(--s-snug); }

/* ---------- FORM-04 ---------- */
.spread-say { color: var(--subtle); text-align: center; max-width: var(--narrow-col); margin: 0 auto var(--s-snug); }
.spread-bar { display: flex; flex-wrap: wrap; gap: var(--s-snug); max-width: calc(var(--narrow-col) * 1.4); margin-inline: auto; }
.spread-mark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spread-entry { flex: 1 1 240px; min-height: 50px; padding: 0 var(--s-snug); border: 1px solid var(--edge-hard); border-radius: var(--r-tiny); background: var(--bg-elevated); color: var(--type); font: inherit; }
.spread-send { flex: 0 0 auto; min-height: 50px; padding: 0 var(--s-base); border: 0; border-radius: var(--r-tiny); background: var(--core); color: var(--ink-on-bright); font-weight: 700; cursor: pointer; }
.spread-send:hover { background: var(--type); color: var(--ink-on-bright); }
.spread-done { display: block; text-align: center; margin-top: var(--s-snug); color: var(--core); background: var(--surface); }
.spread-done[hidden] { display: none; }

/* ---------- ERR-03 ---------- */
.spandrel { flex: 1 0 auto; display: flex; align-items: center; padding-block: var(--s-wide); }
.spandrel-inner { text-align: center; width: 100%; }
.spandrel-head { font-size: var(--head); max-width: var(--narrow-col); margin-inline: auto; }
.spandrel-text { margin: var(--s-snug) auto var(--s-base); color: var(--subtle); line-height: var(--open); max-width: var(--narrow-col); }
.spandrel-home { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-snug); border-radius: var(--r-tiny); background: var(--core); color: var(--ink-on-bright); font-weight: 700; text-decoration: none; }
.spandrel-home:hover { background: var(--type); color: var(--ink-on-bright); }
.ground:has(> .spandrel) { display: flex; flex-direction: column; }

/* ---------- FOOT-07 ---------- */
.vault { background: var(--core); color: var(--ink-on-bright); padding-block: var(--s-wide); margin-top: var(--s-wide); }
.vault-inner { max-width: calc(var(--main) + 2 * var(--edge-wide)); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr; gap: var(--s-base); }
.vault-inside { display: grid; gap: var(--s-base); align-content: start; }
.vault-emblem { display: inline-flex; width: fit-content; background: var(--surface); border-radius: 50%; padding: 12px 24px; color: var(--type); }
.vault-emblem img { height: 44px; width: auto; }
.vault-cols { display: grid; grid-template-columns: 1fr; gap: var(--s-base); }
.vault-map { display: block; }
.vault-top { display: block; font-family: var(--display); font-size: var(--fine); text-transform: uppercase; letter-spacing: var(--e-open); color: var(--ink-on-bright); background: var(--core); margin-bottom: var(--s-tiny); }
.vault-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vault-route { display: inline-flex; min-height: 32px; align-items: center; color: var(--ink-on-bright); background: var(--core); text-decoration: none; font-weight: 500; }
.vault-route:hover { color: var(--ink-on-bright); background: var(--core); text-decoration: underline; }
.vault-copy { display: block; font-size: var(--fine); color: #15210e; background: var(--core); }
.vault-poster { background: var(--highlight); padding: var(--s-roomy) var(--s-base); display: flex; align-items: center; justify-content: center; border-radius: var(--r-snug); }
.vault-poster-word { font-family: var(--display); font-size: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: var(--e-close); color: var(--ink-on-bright); background: var(--highlight); line-height: 1; }
@media (min-width: 720px) {
  .vault-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vault-inner { grid-template-columns: 2fr 1fr; }
  .vault-poster-word { writing-mode: vertical-rl; transform: rotate(180deg); font-size: calc(var(--head) * 1.4); }
}

/* ---------- COOK-10 centred modal ---------- */
.sconce { position: static; }
.sconce-backdrop { position: fixed; inset-block-start: 0; inset-inline-start: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.45); z-index: 94; pointer-events: none; }
.sconce-backdrop[hidden] { display: none; }
.sconce-box {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(480px, calc(100vw - 2 * var(--s-wide)));
  z-index: 95;
  background: var(--bg-elevated);
  border-radius: var(--r-wide);
  padding: var(--s-base);
  box-shadow: var(--d-wide);
  display: flex;
  flex-direction: column;
  gap: var(--s-tiny);
}
.sconce-box[hidden] { display: none; }
.sconce-top { font-family: var(--display); font-size: var(--h5); color: var(--type); background: var(--bg-elevated); }
.sconce-say { color: var(--subtle); background: var(--bg-elevated); font-size: var(--fine); line-height: var(--base); }
.sconce-actions { display: flex; flex-direction: column; gap: var(--s-hair); margin-top: var(--s-hair); }
.sconce-agree, .sconce-decline { min-height: 44px; padding: 0 var(--s-snug); border-radius: var(--r-tiny); font-weight: 700; cursor: pointer; }
.sconce-agree { background: var(--core); color: var(--ink-on-bright); border: 0; }
.sconce-agree:hover { background: var(--type); color: var(--ink-on-bright); }
.sconce-decline { background: var(--bg-elevated); color: var(--type); border: 1px solid var(--edge-hard); }
.sconce-decline:hover { background: var(--surface); color: var(--highlight); }
@media (min-width: 720px) { .sconce-actions { flex-direction: row; } .sconce-agree, .sconce-decline { flex: 1 1 0; } }
@media (max-width: 720px) {
  .sconce-box {
    width: calc(100vw - 2 * var(--s-snug));
    padding: 12px 14px !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .sconce-top { display: none !important; }
  .sconce-box button {
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  .js-rise [data-rise]:not(.is-in) > * { clip-path: none; transform: none; }
}

/* offer buttons */
.foyer-act{
  background:#0891B2;color:#131415;text-decoration:none;
  transition:background var(--short) var(--exit);}
.foyer-act.foyer-act{color:#131415;text-decoration:none;}
.foyer-act:hover{background:#0E7490;color:#FFFFFF;animation:none}
.foyer-act.foyer-act:hover{color:#FFFFFF;text-decoration:none}
.foyer-act:hover::after{animation:none}
.foyer-act:active{background:#155E75;color:#FFFFFF}
.foyer-act:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
@keyframes foyer-glow{0%{transform:rotate(0)}15.000%{transform:rotate(0.6deg)}30.000%,100%{transform:rotate(0)}}
.foyer-act{animation:foyer-glow 1.5s var(--exit) infinite;transform-origin:50% 90%}

@media (max-width: 934px) {
  .mantle-map,
  .mantle-stack,
  .mantle-hush { display: none !important; }
  .mantle-lever { display: flex !important; }
}