/* ===========================================================================
   Pamana ng Muñoz — the public site: the marker
   Every page reads like a Philippine historical marker: a dark cast plate
   with raised gilt capitals and a double raised rim, set on pale concrete
   stone, with a round seal at its crown. The plate is cast in the Settings
   accent, so brand.accent_color recolours the iron and everything cast in it.
   Reading happens on stone and paper; colour lives in the plates and in the
   photographs, never in decoration.

   --accent is written into the page by base.html.twig. It is only read here,
   never declared, so the setting always wins.
   =========================================================================== */

@font-face { font-family: "Marcellus"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/marcellus-400-zKQuygg.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/alegreya-400-sBljkLB.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/alegreya-400-italic-_z4W60C.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/alegreya-600-K5ZESzT.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/alegreya-sans-400-UkDPTxW.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/alegreya-sans-500-DhlTaF3.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/alegreya-sans-700-97zjLn2.woff2") format("woff2"); }

.front {
    /* Cast iron, from the accent: the hue survives, the lightness and chroma
       are held where gilt lettering stays legible on it whatever the setting. */
    --iron: color-mix(in srgb, var(--accent, #1d7a56) 40%, #0a0e0b);
    --iron-deep: color-mix(in srgb, var(--accent, #1d7a56) 26%, #060807);
    --iron-rim: color-mix(in srgb, var(--accent, #1d7a56) 58%, #0a0e0b);
    --link: color-mix(in srgb, var(--accent, #1d7a56) 72%, #000);

    --gilt: #d7b76b;
    --gilt-bright: #efd998;
    --gilt-shade: #8f7433;
    /* Gilt that has to be read on stone, not on iron. */
    --gilt-ink: #6f5418;

    --on-iron: #efe8d2;
    --on-iron-soft: #c9c3ad;

    --stone: #e5e3dd;
    --stone-2: #d8d5cc;
    --stone-3: #c9c5ba;
    --paper: #f6f5f1;

    --ink: #1a1d1b;
    --ink-soft: #464c47;
    --ink-faint: #5d635e;
    --rule: #bdb9ad;

    --red: #9b2a22;
    --red-wash: #f1dcd8;

    --font-cast: "Marcellus", "Trajan Pro", Georgia, serif;
    --font-text: "Alegreya", Georgia, "Times New Roman", serif;
    --font-ui: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;

    --gutter: clamp(16px, 4vw, 40px);
    --wrap: 1180px;
    --radius: 4px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --shadow-plate:
        inset 0 1px 0 rgb(255 255 255 / 9%),
        inset 0 -2px 0 rgb(0 0 0 / 28%),
        0 1px 1px rgb(26 29 27 / 22%),
        0 22px 44px -22px rgb(26 29 27 / 55%);
    --shadow-slab: 0 1px 1px rgb(26 29 27 / 10%), 0 12px 28px -18px rgb(26 29 27 / 40%);
}

@supports (color: oklch(from red l c h)) {
    .front {
        --iron: oklch(from var(--accent, #1d7a56) 0.3 min(c, 0.07) h);
        --iron-deep: oklch(from var(--accent, #1d7a56) 0.225 min(c, 0.055) h);
        --iron-rim: oklch(from var(--accent, #1d7a56) 0.4 min(c, 0.085) h);
        --link: oklch(from var(--accent, #1d7a56) min(l, 0.42) c h);
    }
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }

body.front {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-text);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--stone);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    caret-color: var(--link);
    scrollbar-color: var(--stone-3) var(--stone);
    font-variant-numeric: oldstyle-nums;
}

.front ::selection { background: color-mix(in srgb, var(--gilt) 55%, transparent); color: var(--ink); }

.front img { max-width: 100%; display: block; }
.front p { margin: 0 0 0.75em; }
.front p:last-child { margin-bottom: 0; }

.front h1, .front h2, .front h3 {
    margin: 0;
    font-family: var(--font-cast);
    font-weight: 400;
    line-height: 1.12;
    text-wrap: balance;
}

.front a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.front a:hover { text-decoration-thickness: 2px; }

.front :focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 3px;
    border-radius: 2px;
}
/* On iron the focus ring is gilt, not the dark accent. */
.front-bar :focus-visible,
.front-foot :focus-visible,
.marker :focus-visible,
.plate :focus-visible,
.doors :focus-visible,
.band-flipbook :focus-visible,
.lightbox :focus-visible { outline-color: var(--gilt-bright); }

.front .icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 100;
    padding: 8px 14px;
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--iron-deep) !important;
    background: var(--gilt-bright);
    border-radius: var(--radius);
    transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.front-main { outline: none; }

.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.band { padding-block: clamp(56px, 8vw, 104px); }
.band + .band { padding-top: 0; }

/* Rich text written in the admin, wherever it lands. */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 0.8em; }
.prose h2, .prose h3, .prose h4 { margin: 1.3em 0 0.4em; font-size: 1.25em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; margin: 0 0 0.8em; }
.prose blockquote { margin: 1em 0; padding-inline-start: 1em; border-inline-start: 1px solid var(--rule); font-style: italic; }

/* ================================================================ seal == */

/* The city's seal is a white disc; on iron it is set in a gilt collar, the
   way a marker's crest is cast into its plate. */
.seal {
    display: block;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px var(--gilt), 0 0 0 4px var(--iron-deep);
}
.seal-crown { box-shadow: 0 0 0 4px var(--gilt), 0 0 0 10px var(--iron-deep), 0 0 0 11.5px var(--gilt-shade); }

/* ============================================================== header == */

.front-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    color: var(--on-iron);
    background: linear-gradient(180deg, var(--iron), var(--iron-deep));
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gilt) 45%, transparent), 0 10px 24px -18px rgb(0 0 0 / 60%);
}

.front-bar-inner {
    display: flex;
    align-items: center;
    gap: 12px 28px;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 10px var(--gutter);
    min-height: 68px;
}

.front-home {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit !important;
    text-decoration: none !important;
    margin-inline-end: auto;
    min-width: 0;
}
.front-home .seal { width: 42px; height: 42px; }
.front-brand-stack { display: grid; line-height: 1.1; min-width: 0; }
.front-brand {
    font-family: var(--font-cast);
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gilt-bright);
    text-shadow: 0 -1px 0 rgb(0 0 0 / 50%);
    white-space: nowrap;
}
.front-region {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--on-iron-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.front-menu { display: flex; align-items: center; gap: 8px 22px; }

.front-nav { display: flex; align-items: center; gap: 2px; }
.front-nav-link {
    position: relative;
    padding: 10px 12px;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--on-iron) !important;
    text-decoration: none !important;
    transition: color 0.2s var(--ease-out);
}
.front-nav-link::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 4px;
    height: 2px;
    background: var(--gilt);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-out);
}
.front-nav-link:hover { color: var(--gilt-bright) !important; }
.front-nav-link:hover::after { transform: scaleX(0.4); }
.front-nav-link.is-current { color: var(--gilt-bright) !important; }
.front-nav-link.is-current::after { transform: scaleX(1); }

.front-account {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--on-iron-soft) !important;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--gilt) 40%, transparent);
    border-radius: var(--radius);
    text-decoration: none !important;
    white-space: nowrap;
}
.front-account:hover { color: var(--gilt-bright) !important; border-color: var(--gilt); }

.front-menu-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font: 700 0.88rem/1 var(--font-ui);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gilt-bright);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--gilt) 55%, transparent);
    border-radius: var(--radius);
    cursor: pointer;
}
.front-menu-toggle .icon { width: 18px; height: 18px; }
.front-menu-toggle .icon-close { display: none; }
.front-bar.is-open .front-menu-toggle .icon-open { display: none; }
.front-bar.is-open .front-menu-toggle .icon-close { display: block; }

@media (max-width: 880px) {
    .front-bar-inner { flex-wrap: wrap; }
    .front-menu-toggle { display: inline-flex; }
    .front-menu {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 6px 0 14px;
        border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent);
    }
    .front-bar.is-open .front-menu { display: flex; }
    .front-nav { flex-direction: column; align-items: stretch; }
    .front-nav-link { padding: 13px 4px; border-bottom: 1px solid color-mix(in srgb, var(--on-iron) 10%, transparent); }
    .front-nav-link::after { left: 4px; right: auto; width: 32px; bottom: 8px; }
    .front-account { align-self: flex-start; }
}
@media (max-width: 420px) {
    .front-region { display: none; }
    .front-brand { font-size: 1.02rem; letter-spacing: 0.05em; }
    .front-menu-toggle span {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
}

/* ============================================================= notices == */

.strips { background: var(--stone-2); border-bottom: 1px solid var(--stone-3); }
.strip {
    display: flex;
    align-items: center;
    gap: 6px 16px;
    flex-wrap: wrap;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 12px var(--gutter);
    font-family: var(--font-ui);
}
.strip + .strip { border-top: 1px solid var(--stone-3); }
.strip-icon { color: var(--gilt-ink); width: 20px; height: 20px; }
.strip-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; flex: 1; min-width: 0; }
.strip-title { margin: 0 !important; font-weight: 700; font-size: 1rem; color: var(--ink); }
.strip-note { margin: 0 !important; font-size: 0.95rem; color: var(--ink-soft); }
.strip-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 0.92rem;
    white-space: nowrap;
}

/* ============================================================== marker == */

/* The cast plate. Its rim is a raised double line, and the lettering on it is
   gilt with a one-pixel cast shadow, the way paint sits on raised iron. */
.marker,
.plate {
    position: relative;
    color: var(--on-iron);
    background:
        radial-gradient(130% 80% at 20% 0%, color-mix(in srgb, var(--iron-rim) 70%, transparent), transparent 62%),
        linear-gradient(180deg, var(--iron), var(--iron-deep));
    border-radius: 6px;
    box-shadow: var(--shadow-plate);
}
.marker::before,
.plate::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 2px solid color-mix(in srgb, var(--gilt) 78%, transparent);
    border-radius: 3px;
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--iron-deep) 55%, transparent),
        0 0 0 6px color-mix(in srgb, var(--gilt) 32%, transparent),
        inset 0 1px 0 rgb(0 0 0 / 40%);
    pointer-events: none;
}

.marker h1, .marker h2, .plate h2 {
    color: var(--gilt-bright);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 55%), 0 1px 0 rgb(255 236 180 / 12%);
}
.marker .front-lede,
.marker .prose,
.plate p { color: var(--on-iron); }
.marker a:not(.btn), .plate a:not(.btn) { color: var(--gilt-bright); }

/* --- the homepage marker ------------------------------------------------ */

.opening {
    padding: clamp(84px, 11vw, 132px) var(--gutter) clamp(56px, 8vw, 96px);
    background:
        linear-gradient(180deg, var(--stone-2), var(--stone) 62%);
}

.opening .marker {
    max-width: var(--wrap);
    margin-inline: auto;
    padding: clamp(96px, 11vw, 132px) clamp(28px, 7vw, 104px) clamp(48px, 6vw, 72px);
    text-align: center;
    border-radius: 6px 6px 0 0;
}

/* The seal breaks the top edge of the plate, the way a marker's crest does. */
.opening-mark {
    position: absolute;
    top: 0;
    left: 50%;
    width: clamp(132px, 16vw, 176px);
    aspect-ratio: 1;
    transform: translate(-50%, -46%);
    border-radius: 50%;
    filter: drop-shadow(0 10px 16px rgb(0 0 0 / 35%));
}
.opening-mark .seal { width: 100%; height: 100%; }
.opening-mark.has-picture {
    display: grid;
    place-items: center;
    padding: 14%;
    background: var(--iron);
    box-shadow: 0 0 0 3px var(--gilt), 0 0 0 9px var(--iron-deep), 0 0 0 10.5px var(--gilt-shade);
}
.opening-mark.has-picture img { width: 100%; height: 100%; object-fit: contain; }

.opening-words h1 {
    font-size: clamp(2.3rem, 6.4vw, 5.25rem);
    line-height: 1.02;
    letter-spacing: 0.06em;
}

.opening-region {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 720px;
    margin: clamp(18px, 2.4vw, 26px) auto !important;
    font-family: var(--font-cast);
    font-size: clamp(0.82rem, 1.5vw, 1.02rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gilt);
}
.opening-region::before,
.opening-region::after {
    content: "";
    flex: 1;
    height: 5px;
    border-block: 1px solid color-mix(in srgb, var(--gilt) 60%, transparent);
}
.opening-region span { flex: none; max-width: 80%; }

.opening-words .front-lede {
    max-width: 44ch;
    margin: 0 auto 18px !important;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    line-height: 1.45;
    font-style: italic;
}
/* The inscription: one centred measure, the way a marker's text is set. */
.opening-text {
    max-width: 60ch;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.66;
    text-wrap: pretty;
    color: var(--on-iron-soft) !important;
}

.opening-actions { margin-top: clamp(28px, 4vw, 40px); }

/* The plinth: the rest of the site, bolted under the marker. */
.doors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: var(--wrap);
    margin-inline: auto;
    background: var(--iron-deep);
    border-radius: 0 0 6px 6px;
    box-shadow: var(--shadow-plate);
    overflow: hidden;
}
.door {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 26px 28px 30px;
    color: var(--on-iron-soft) !important;
    text-decoration: none !important;
    border-top: 1px solid color-mix(in srgb, var(--gilt) 50%, transparent);
    transition: background 0.35s var(--ease-out);
}
.door + .door { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--gilt) 24%, transparent); }
.door-name {
    font-family: var(--font-cast);
    font-size: 1.22rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gilt-bright);
}
.door-blurb { font-size: 0.98rem; line-height: 1.45; }
.door-arrow {
    position: absolute;
    top: 29px; right: 24px;
    color: var(--gilt);
    transition: transform 0.35s var(--ease-out);
}
.door:hover { background: var(--iron); }
.door:hover .door-arrow { transform: translateX(4px); }

@media (max-width: 960px) {
    .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .door:nth-child(odd) { box-shadow: none; }
}
@media (max-width: 560px) {
    .opening { padding-inline: 12px; }
    .opening .marker { padding-inline: 26px; }
    .opening .marker::before { inset: 8px; }
    .doors { grid-template-columns: 1fr; }
    .opening-region { display: block; text-align: center; letter-spacing: 0.14em; line-height: 1.6; }
    .opening-region::before, .opening-region::after { display: none; }
    .door { box-shadow: none !important; padding: 20px 26px 22px; }
}

/* --- buttons ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 22px;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--gilt-bright) !important;
    background: var(--iron);
    border: 1px solid var(--iron-deep);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 1px 2px rgb(0 0 0 / 20%);
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.btn:hover { background: var(--iron-deep); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn .icon { transition: transform 0.3s var(--ease-out); }
.btn:hover:not(:disabled) .icon:last-child { transform: translateX(3px); }

.btn-sm { min-height: 38px; padding: 8px 14px; font-size: 0.82rem; }

.btn-quiet {
    color: var(--iron) !important;
    background: transparent;
    border-color: color-mix(in srgb, var(--iron) 55%, transparent);
    box-shadow: none;
}
.btn-quiet:hover { background: color-mix(in srgb, var(--iron) 8%, transparent); border-color: var(--iron); }

/* On iron: a gilt-rimmed plate that fills with gilt when pressed. */
.btn-gilt {
    color: var(--iron-deep) !important;
    background: linear-gradient(180deg, var(--gilt-bright), var(--gilt));
    border-color: var(--gilt-shade);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 2px 0 var(--gilt-shade), 0 8px 18px -8px rgb(0 0 0 / 60%);
}
.btn-gilt:hover { background: var(--gilt-bright); }
.btn-gilt-quiet {
    color: var(--gilt-bright) !important;
    background: transparent;
    border-color: color-mix(in srgb, var(--gilt) 60%, transparent);
    box-shadow: none;
}
.btn-gilt-quiet:hover { background: color-mix(in srgb, var(--gilt) 12%, transparent); border-color: var(--gilt); }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.text-link .icon { transition: transform 0.3s var(--ease-out); }
.text-link:hover .icon { transform: translateX(3px); }

/* =========================================================== home bands == */

.band-head h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    color: var(--ink);
    margin-bottom: 14px;
}
.band-lede { max-width: 46ch; color: var(--ink-soft); margin-bottom: 20px !important; }
.band-head-row { display: flex; align-items: end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; margin-bottom: 36px; }
.band-head-row .band-lede { margin-bottom: 0 !important; }

/* --- the story: the first page of the book ------------------------------ */

.home-story { padding-top: clamp(24px, 4vw, 48px); }
.home-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
}
.story-page {
    position: relative;
    display: grid;
    gap: 18px;
    padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 60px) 64px;
    color: var(--ink) !important;
    text-decoration: none !important;
    background: var(--paper);
    border-radius: 3px;
    box-shadow:
        inset -26px 0 30px -26px rgb(26 29 27 / 32%),
        var(--shadow-slab);
    transform: rotate(-0.6deg);
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.story-page:hover { transform: rotate(0deg) translateY(-3px); box-shadow: inset -26px 0 30px -26px rgb(26 29 27 / 32%), 0 22px 40px -22px rgb(26 29 27 / 45%); }
.story-title {
    font-family: var(--font-cast);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
    color: var(--ink);
}
.story-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    margin-top: 14px;
    border-block: 1px solid var(--gilt-ink);
}
.story-text { font-size: 1.14rem; line-height: 1.7; }
.story-folio {
    position: absolute;
    bottom: 22px;
    inset-inline: 0;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--ink-faint);
}

/* --- places ------------------------------------------------------------- */

.home-places { background: var(--stone-2); padding-block: clamp(64px, 9vw, 112px) !important; }
.place-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}
.place-figure {
    margin: 0 0 14px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 3px;
    background: var(--stone-3);
    box-shadow: var(--shadow-slab);
}
.place-figure .zoom, .place-figure .zoom img { width: 100%; height: 100%; }
.place-figure .zoom img { object-fit: cover; }
.place-blank { display: grid; place-items: center; height: 100%; color: var(--ink-faint); font-size: 2.4rem; }
.place-title { font-size: 1.3rem; color: var(--ink); }
.place-note { margin-top: 4px !important; font-size: 0.98rem; color: var(--ink-soft); }
@media (max-width: 900px) { .place-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- archive index ------------------------------------------------------ */

.home-archive { padding-top: clamp(64px, 9vw, 112px) !important; }
.home-archive-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}
.collection-index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--iron); }
.collection-index li { border-bottom: 1px solid var(--rule); }
.collection {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 18px 4px;
    color: var(--ink) !important;
    text-decoration: none !important;
    transition: background 0.3s var(--ease-out);
}
.collection.has-thumb { grid-template-columns: 76px minmax(0, 1fr) auto; }
.collection:hover { background: color-mix(in srgb, var(--paper) 70%, transparent); }
.collection .collection-thumb { transition: transform 0.4s var(--ease-out); }
.collection:hover .collection-thumb { transform: translateX(6px); }
.collection-thumb {
    display: grid;
    place-items: center;
    width: 76px;
    aspect-ratio: 1;
    overflow: hidden;
    color: var(--gilt);
    font-size: 1.7rem;
    background: var(--iron);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gilt) 40%, transparent);
}
.collection-thumb img { width: 100%; height: 100%; object-fit: cover; }
.collection-words { display: grid; gap: 2px; }
.collection-name { font-family: var(--font-cast); font-size: 1.4rem; line-height: 1.2; }
.collection-intro { font-size: 0.98rem; color: var(--ink-soft); }
.collection-count {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}

/* --- quiz plate --------------------------------------------------------- */

.home-quiz { padding-top: 0 !important; }
.quiz-plate {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px clamp(28px, 4vw, 56px);
    padding: clamp(40px, 5vw, 64px) clamp(32px, 5vw, 72px);
}
.quiz-plate h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 12px; }
.quiz-plate p { color: var(--on-iron-soft) !important; }
.quiz-plate-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quiz-plate-levels li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--gilt) 26%, transparent);
}
.quiz-plate-level { font-family: var(--font-cast); font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gilt-bright); }
.quiz-plate-format { font-family: var(--font-ui); font-size: 0.92rem; color: var(--on-iron-soft); }

@media (max-width: 960px) {
    .home-story-grid, .home-archive-grid { grid-template-columns: 1fr; }
    .quiz-plate { grid-template-columns: 1fr; }
    .quiz-plate .btn { justify-self: start; }
}
@media (max-width: 560px) {
    .collection { grid-template-columns: minmax(0, 1fr); gap: 6px 14px; }
    .collection.has-thumb { grid-template-columns: 56px minmax(0, 1fr); }
    .collection-thumb { width: 56px; }
    .collection.has-thumb .collection-count { grid-column: 2; }
    .story-page { transform: none; }
}

/* ===================================================== inner page head == */

.page-marker { padding-top: clamp(40px, 6vw, 72px); }
.marker-page {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: clamp(44px, 6vw, 68px) clamp(28px, 6vw, 80px) clamp(40px, 5vw, 56px);
    text-align: center;
}
.marker-page .seal { width: 58px; height: 58px; margin-bottom: 4px; }
.marker-page h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); letter-spacing: 0.07em; }
.marker-page .front-lede {
    max-width: 52ch;
    margin: 0 !important;
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.5;
    font-style: italic;
    color: var(--on-iron);
}
.marker-back {
    position: absolute;
    top: 30px; left: 34px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gilt) !important;
    text-decoration: none;
    z-index: 1;
}
.marker-back:hover { color: var(--gilt-bright) !important; text-decoration: underline; }

/* The contents of the page, set into the foot of the plate. */
.marker-jump {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--gilt) 34%, transparent);
    padding-top: 18px;
}
.marker-jump a {
    padding: 6px 16px;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gilt) !important;
    text-decoration: none !important;
}
.marker-jump a + a { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--gilt) 34%, transparent); }
.marker-jump a:hover { color: var(--gilt-bright) !important; }

@media (max-width: 560px) {
    .page-marker .wrap { padding-inline: 12px; }
    .marker-page::before { inset: 8px; }
    .marker-back { position: static; justify-self: start; margin: -18px 0 4px -8px; }
    .marker-jump a + a { box-shadow: none; }
}

/* Section heads on stone. */
.section-head { display: grid; gap: 8px; max-width: 64ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    color: var(--ink);
}
.section-lede { color: var(--ink-soft); margin: 0 !important; }

.empty-note {
    margin: 0;
    padding: 28px;
    font-style: italic;
    color: var(--ink-soft);
    text-align: center;
    border: 1px dashed var(--stone-3);
    border-radius: var(--radius);
}

/* =================================================== entries & records == */

.entry-grid { display: grid; gap: clamp(20px, 3vw, 36px); }

.entry { min-width: 0; }
.entry-figure {
    margin: 0 0 16px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--stone-3);
    box-shadow: var(--shadow-slab);
}
.entry-figure img { width: 100%; height: 100%; object-fit: cover; }
.entry-title { font-size: 1.4rem; color: var(--ink); }
.entry-title a { color: inherit !important; text-decoration: none; }
.entry-title a:hover { text-decoration: underline; }
.entry-subtitle { margin: 4px 0 0 !important; font-style: italic; color: var(--ink-soft); }
.entry-meta {
    margin: 8px 0 0 !important;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--gilt-ink);
    font-variant-numeric: lining-nums;
}
.entry-text { margin-top: 12px; font-size: 1.04rem; color: var(--ink-soft); }
/* "Read the whole entry": opens the entry in the viewer, beside its picture. */
.entry-read { margin-top: 12px !important; }
.entry-read-button {
    padding: 0;
    font-size: 0.95rem;
    color: var(--link);
    background: none;
    border: 0;
    cursor: pointer;
}
.entry-read-button:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.entry-file { margin-top: 14px !important; }
.entry-file a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 700; }

/* Tiles: rows of pictures (places, culture). */
.entry-grid.is-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.is-tiles .entry-figure { aspect-ratio: 1; }

/* Rows: wide panels (people, livelihood) — the picture beside the words. */
.entry-grid.is-rows { gap: 0; border-top: 2px solid var(--iron); }
.is-rows .entry {
    display: grid;
    grid-template-columns: minmax(180px, 3fr) minmax(0, 8fr);
    gap: clamp(20px, 4vw, 48px);
    align-items: start;
    padding-block: clamp(24px, 3vw, 36px);
    border-bottom: 1px solid var(--rule);
}
.is-rows .entry.is-textual { grid-template-columns: minmax(0, 1fr); }
.is-rows .entry-figure { aspect-ratio: 4 / 3; margin: 0; }
.is-rows .entry-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.is-rows .entry-text { max-width: 68ch; }
@media (max-width: 640px) {
    .is-rows .entry { grid-template-columns: 1fr; }
}

/* Records: an archive collection's own screen. */
.entry-grid.is-records { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.is-records .entry { display: flex; flex-direction: column; background: var(--paper); box-shadow: var(--shadow-slab); overflow: hidden; }
.is-records .entry-figure { aspect-ratio: 4 / 3; margin: 0; border-radius: 0; box-shadow: none; }
.is-records .entry-body { padding: 20px 22px 24px; border-top: 3px solid var(--iron); }
.is-records .entry.is-textual .entry-body { border-top-width: 3px; }

/* A picture that opens larger. */
.zoom {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    cursor: zoom-in;
}
.zoom img { transition: transform 0.7s var(--ease-out), filter 0.4s var(--ease-out); }
.zoom-hint {
    position: absolute;
    right: 10px; bottom: 10px;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    color: var(--gilt-bright);
    background: color-mix(in srgb, var(--iron-deep) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--gilt) 50%, transparent);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.zoom:hover img { transform: scale(1.035); }
.zoom:hover .zoom-hint, .zoom:focus-visible .zoom-hint { opacity: 1; transform: none; }
.zoom:focus-visible { outline-offset: -3px; }
@media (hover: none) { .zoom-hint { opacity: 1; transform: none; } }

/* ============================================================= archive == */

.shelf { display: grid; border-top: 2px solid var(--iron); }

/* Each collection is a row of the register, set out the way its records are
   read. Photographs and objects run the full width under their heading; maps
   and documents sit beside theirs. The heading is the same in every row: the
   name with its count, the introduction, then the way in. */
.shelf-row {
    display: grid;
    gap: 24px clamp(32px, 5vw, 72px);
    padding-block: clamp(32px, 4.5vw, 56px);
    border-bottom: 1px solid var(--rule);
}
.shelf-row.is-map,
.shelf-row.is-register { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }

.shelf-head {
    display: grid;
    grid-template-columns: minmax(0, max-content) auto;
    justify-content: start;
    align-items: baseline;
    gap: 8px 20px;
    align-content: start;
}
.shelf-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.shelf-head h2 a { color: var(--ink) !important; text-decoration: none; }
.shelf-head h2 a:hover { text-decoration: underline; }
.shelf-count {
    margin: 0 !important;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}
.shelf-head .front-section-lede { grid-column: 1 / -1; margin: 0 !important; max-width: 52ch; color: var(--ink-soft); }
.shelf-more { grid-column: 1 / -1; margin: 6px 0 0 !important; }

.cover-grid { display: grid; gap: clamp(14px, 2vw, 24px); }
.cover-grid .entry-title { font-size: 1.12rem; line-height: 1.25; }
.cover-grid .entry-meta { font-size: 0.84rem; }

/* Photographs: a strip of pictures. */
.cover-grid.is-strip { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.cover-grid.is-strip .entry-figure { aspect-ratio: 4 / 3; margin-bottom: 12px; }
.cover-grid.is-strip .entry.is-textual,
.cover-grid.is-objects .entry.is-textual {
    display: flex;
    align-items: flex-end;
    min-height: 150px;
    padding: 18px;
    background: var(--stone-2);
    border-radius: 3px;
}

/* Documents: a register, one ruled line a record. */
.cover-grid.is-register { gap: 0; border-top: 1px solid var(--iron); }
.cover-grid.is-register .entry {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}
.cover-grid.is-register .entry.is-textual { grid-template-columns: minmax(0, 1fr); }
.cover-grid.is-register .entry-figure { aspect-ratio: 3 / 4; margin: 0; }
.cover-grid.is-register .entry-meta { margin-top: 4px !important; }

/* Material: objects laid out square. */
.cover-grid.is-objects { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.cover-grid.is-objects .entry-figure { aspect-ratio: 1; margin-bottom: 10px; background: var(--paper); }

.shelf-map { display: block; margin-bottom: 16px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 6px var(--iron), 0 0 0 7px var(--gilt-shade); }
.shelf-map-canvas { display: block; }
.shelf-map .map-canvas { height: 280px; pointer-events: none; }
.shelf-list { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--iron); }
.shelf-list .entry { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.shelf-list .entry-title { font-size: 1.12rem; }

@media (max-width: 820px) {
    .shelf-row.is-map,
    .shelf-row.is-register { grid-template-columns: 1fr; }
}

/* --- the pager ---------------------------------------------------------- */

.front-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: clamp(32px, 5vw, 56px);
    padding-top: 20px;
    border-top: 2px solid var(--iron);
    font-family: var(--font-ui);
}
.front-pager-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.front-pager-link.is-disabled { color: var(--ink-faint); opacity: 0.55; }
.front-pager-count { margin: 0 !important; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }

/* --- the map ------------------------------------------------------------ */

.map-hint {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px !important;
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--ink-soft);
}
.map-hint .icon { color: var(--iron); }

/* The map sits in the marker's own frame. */
.map-frame {
    position: relative;
    padding: 10px;
    background: linear-gradient(180deg, var(--iron), var(--iron-deep));
    border-radius: 6px;
    box-shadow: var(--shadow-plate);
}
.map-frame::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid color-mix(in srgb, var(--gilt) 55%, transparent);
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}
.map-canvas { display: block; background: var(--stone-2); }
.map-canvas-large { height: min(72vh, 680px); min-height: 380px; border-radius: 3px; }
/* The street map is quietened, so the pins are what the eye finds first. */
.map-canvas .leaflet-tile-pane { filter: saturate(0.4) contrast(0.96) brightness(1.02); }
.map-canvas .leaflet-container,
.front .leaflet-container { font-family: var(--font-ui); background: var(--stone-2); }
.front .leaflet-bar a { color: var(--iron); }
.front .leaflet-control-attribution { font-family: var(--font-ui); }

.map-marker { background: none; border: 0; }
.map-marker-head {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--iron);
    border: 2px solid var(--gilt);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 6px 10px -4px rgb(0 0 0 / 55%);
    transition: background 0.2s ease;
}
/* The number is set upright inside the turned pin. */
.map-marker-head > span {
    transform: rotate(45deg);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--gilt-bright);
    font-variant-numeric: lining-nums;
}
.map-marker:hover .map-marker-head,
.map-marker:focus-visible .map-marker-head { background: var(--iron-rim); }
.map-marker { outline-offset: 4px; }

.map-tip.leaflet-tooltip {
    width: min(300px, 78vw);
    padding: 16px 18px;
    white-space: normal;
    color: var(--on-iron);
    background: var(--iron-deep);
    border: 1px solid var(--gilt-shade);
    border-radius: 4px;
    box-shadow: 0 16px 32px -14px rgb(0 0 0 / 60%);
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 1.5;
}
.map-tip.leaflet-tooltip-top::before { border-top-color: var(--gilt-shade); }
.map-tip .entry-title {
    margin: 0 0 4px;
    font-family: var(--font-cast);
    font-size: 1.15rem;
    color: var(--gilt-bright);
}
.map-tip .entry-meta { margin: 0 0 8px !important; color: var(--gilt); font-size: 0.82rem; }
.map-tip .map-card-text { margin: 0 0 8px !important; color: var(--on-iron); }
.map-tip .map-card-coords { margin: 0 !important; font-family: var(--font-ui); font-size: 0.8rem; color: var(--on-iron-soft); font-variant-numeric: lining-nums tabular-nums; }

.map-records { margin-top: clamp(40px, 6vw, 64px); }
.map-records-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 18px; }
.map-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--iron); }
.map-record {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
}
.map-record-pin {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--gilt-bright);
    background: var(--iron);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--stone), 0 0 0 3px var(--gilt-shade);
    font-variant-numeric: lining-nums;
}
.map-record .entry-title { font-size: 1.3rem; }
.map-card-text { margin: 6px 0 0 !important; color: var(--ink-soft); font-size: 1rem; max-width: 70ch; }
.map-card-coords { margin: 6px 0 0 !important; font-family: var(--font-ui); font-size: 0.88rem; color: var(--ink-faint); font-variant-numeric: lining-nums tabular-nums; }
.map-record-unpinned { margin: 0 !important; font-family: var(--font-ui); font-size: 0.9rem; font-style: italic; color: var(--ink-faint); }
@media (max-width: 640px) {
    .map-record { grid-template-columns: 34px minmax(0, 1fr); }
    .map-record > .btn, .map-record-unpinned { grid-column: 2; justify-self: start; }
}

/* ============================================================= history == */

/* The flipbook sits on the dark band like a book laid open on a lectern. */
.band-flipbook {
    background:
        radial-gradient(80% 55% at 50% 38%, color-mix(in srgb, var(--iron-rim) 55%, transparent), transparent 72%),
        var(--iron-deep);
    color: var(--on-iron);
    margin-top: clamp(56px, 8vw, 96px);
}
.band-flipbook .section-head h2 { color: var(--gilt-bright); }
.band-flipbook .section-lede { color: var(--on-iron-soft); }
.band-flipbook .empty-note { color: var(--on-iron-soft); border-color: color-mix(in srgb, var(--gilt) 30%, transparent); }
.band-flipbook + .band { padding-top: clamp(56px, 8vw, 104px); }

.book {
    --book-mode: spread;
    --read: 0;
    --book-paper: #f6f3ea;
    --book-ink: #1f1d19;
    --board: color-mix(in srgb, var(--iron-rim) 70%, #2a2a22);
    max-width: 1120px;
    margin-inline: auto;
}

/* --- Above the book: the contents and where the reader is ------------ */

.book-bar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 22px;
}
.book-contents { position: relative; }
.book-contents > summary { list-style: none; }
.book-contents > summary::-webkit-details-marker { display: none; }
.book-contents[open] > summary { background: color-mix(in srgb, var(--gilt) 14%, transparent); border-color: var(--gilt); }
.book-contents-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(420px, calc(100vw - 2 * var(--gutter)));
    max-height: min(60vh, 460px);
    overflow: auto;
    margin: 0;
    padding: 10px;
    list-style: none;
    counter-reset: chapter;
    background: var(--iron-deep);
    border: 1px solid var(--gilt-shade);
    border-radius: 4px;
    box-shadow: 0 24px 48px -18px rgb(0 0 0 / 70%);
    scrollbar-color: var(--gilt-shade) transparent;
}
.book-contents-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
    padding: 10px 12px;
    color: var(--on-iron) !important;
    text-decoration: none !important;
    border-radius: 3px;
}
.book-contents-title { font-size: 1.02rem; line-height: 1.35; }
.book-contents-folio {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--gilt);
    font-variant-numeric: lining-nums tabular-nums;
}
.book-contents-entry:hover { background: color-mix(in srgb, var(--gilt) 10%, transparent); }
.book-contents-entry[aria-current] { background: color-mix(in srgb, var(--gilt) 16%, transparent); }
.book-contents-entry[aria-current] .book-contents-title { color: var(--gilt-bright); }

.book-where {
    margin: 0 !important;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: var(--on-iron-soft);
    font-variant-numeric: lining-nums tabular-nums;
}

/* --- The case ---------------------------------------------------------- */

/* Cloth boards a little larger than the pages, a darker spine down the
   middle, and a ribbon hanging out of the bottom. */
.book-case {
    position: relative;
    padding: 16px 20px;
    background:
        linear-gradient(90deg, transparent calc(50% - 16px), rgb(0 0 0 / 38%) calc(50% - 16px), rgb(0 0 0 / 20%) 50%, rgb(0 0 0 / 38%) calc(50% + 16px), transparent calc(50% + 16px)),
        linear-gradient(180deg, color-mix(in srgb, var(--board) 100%, #fff 6%), var(--board));
    border-radius: 7px;
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 6%),
        inset 0 0 0 5px color-mix(in srgb, var(--gilt) 18%, transparent),
        0 2px 0 rgb(0 0 0 / 35%),
        0 44px 70px -30px rgb(0 0 0 / 85%);
}

.book-ribbon {
    position: absolute;
    z-index: 0;
    left: calc(50% + 34px);
    top: calc(100% - 24px);
    width: 16px;
    height: 78px;
    background: linear-gradient(90deg, #6f1f19, #a3372c 45%, #7c241d);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
    filter: drop-shadow(0 6px 6px rgb(0 0 0 / 40%));
    transform-origin: top center;
    transform: rotate(4deg);
}

/* Deep enough that the leaf reads as a page in the air rather than a shape
   being stretched: a shallower perspective exaggerates the far edge and the
   turn stops looking like paper. */
.book-stage { position: relative; z-index: 1; perspective: 3400px; }

/* The page block. What has been read gathers under the left page. */
.book-edge {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 14px;
    background: repeating-linear-gradient(90deg, #e7e2d4 0 1px, #c9c2b0 1px 2px);
    transition: transform 0.62s cubic-bezier(0.42, 0.02, 0.24, 1);
    pointer-events: none;
}
.book-edge-left {
    right: 100%;
    border-radius: 3px 0 0 3px;
    transform-origin: right center;
    transform: scaleX(calc((3 + var(--read) * 11) / 14));
}
.book-edge-right {
    left: 100%;
    border-radius: 0 3px 3px 0;
    transform-origin: left center;
    transform: scaleX(calc((3 + (1 - var(--read)) * 11) / 14));
}

.book-spreads { display: grid; gap: 28px; }

.spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 10 / 7;
    /* A #topic-N link scrolls to the spread, and the bar is sticky: without
       this the running head arrives underneath it. */
    scroll-margin-top: 110px;
    border-radius: 2px;
    background: var(--book-paper);
    color: var(--book-ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

.page {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--book-paper);
}
/* The gutter: each page curves down into the fold and darkens there, and the
   outer edge catches a little light. */
.page-left {
    border-radius: 2px 0 0 2px;
    background:
        linear-gradient(90deg, rgb(255 255 255 / 35%), transparent 6%),
        linear-gradient(270deg, rgb(40 34 22 / 30%), rgb(40 34 22 / 8%) 5%, transparent 13%),
        var(--book-paper);
}
.page-right {
    border-radius: 0 2px 2px 0;
    background:
        linear-gradient(270deg, rgb(255 255 255 / 35%), transparent 6%),
        linear-gradient(90deg, rgb(40 34 22 / 30%), rgb(40 34 22 / 8%) 5%, transparent 13%),
        var(--book-paper);
}

/* The writing scrolls inside the page if it runs long, and stops above a
   strip kept clear for the page number. */
.page-inner {
    height: calc(100% - 56px);
    padding: clamp(34px, 4.4vw, 56px) clamp(30px, 4.4vw, 58px) 16px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cfc8b6 transparent;
}
.page-left > .page-inner, .leaf-back > .page-inner { padding-right: clamp(36px, 5vw, 64px); }
.page-right > .page-inner, .leaf-front > .page-inner { padding-left: clamp(36px, 5vw, 64px); }

/* A left page opens its topic: the title is set as a chapter heading. */
.page-head { margin: 0 0 22px; }
.page-title {
    font-family: var(--font-cast);
    font-size: clamp(1.45rem, 2.1vw, 1.9rem);
    line-height: 1.15;
    color: var(--book-ink);
    text-wrap: balance;
}
.page-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    margin-top: 14px;
    border-block: 1px solid var(--gilt-ink);
}

/* A right page carries the running head, between rules. */
.page-running {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px !important;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.page-running::before,
.page-running::after { content: ""; flex: 1; height: 1px; background: #d4cdbb; }

/* The type of a printed page: flush-left and hyphenated (a page this narrow
   opens rivers when justified), paragraphs indented rather than spaced. */
.page-text {
    font-size: 1.08rem;
    line-height: 1.68;
    text-align: left;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.page-text > :first-child { margin-top: 0; }
.page-text > :last-child { margin-bottom: 0; }
.page-text p { margin: 0 !important; }
.page-text p + p { text-indent: 1.5em; }
.page-text h1, .page-text h2, .page-text h3 { font-size: 1.3rem; margin: 22px 0 8px; text-align: left; }
.page-text ul, .page-text ol { padding-inline-start: 20px; text-align: left; }

.page-figure { margin: 0 0 20px; }
.page-figure img { display: block; width: 100%; border-radius: 1px; box-shadow: 0 0 0 1px rgb(0 0 0 / 8%); }

.page-caption {
    margin: 12px 2px 0;
    font-size: 0.98rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--ink-soft);
}
.page-caption > :first-child { margin-top: 0; }
.page-caption > :last-child { margin-bottom: 0; }

/* One picture, edge to edge — the page is the picture, so the running head
   stands down and the folio needs to hold its own against whatever is under
   it. */
.layout-image .page-inner { height: 100%; padding: 0 !important; overflow: hidden; }
.layout-image .page-head,
.layout-image .page-running { display: none; }
.layout-image .page-figure { height: 100%; margin: 0; }
.layout-image .page-figure .zoom { height: 100%; }
.layout-image .page-figure img { height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.layout-image .page-folio {
    color: rgb(255 255 255 / 92%);
    text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}

/* A picture at the top, the writing under it. The picture is cropped to one
   shape rather than left at whatever the original was, so the pictures agree
   with each other from spread to spread the way a printed book's do. */
.layout-image-text .page-figure img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Where the picture sits, for "Image and text". Above is the plain order;
   below puts the writing first; beside sets the two side by side, the
   picture taking the narrower share of a page. */
.pos-bottom .page-figure { margin: 20px 0 0; }
.pos-left .page-content,
.pos-right .page-content {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(16px, 2vw, 26px);
    align-items: start;
}
.pos-right .page-content { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.pos-left .page-figure,
.pos-right .page-figure { margin: 0; }
.pos-left .page-figure img,
.pos-right .page-figure img { aspect-ratio: 3 / 4; }
.pos-left .page-text,
.pos-right .page-text { text-align: left; hyphens: auto; }

/* --- A topic across the whole spread ---------------------------------- */

/* One sheet over both pages: the fold still runs down the middle, so the
   writing is set in two columns that keep clear of it, and a picture beside
   the writing takes one page while the writing takes the other. */
.page-whole {
    grid-column: 1 / -1;
    border-radius: 2px;
    background:
        linear-gradient(90deg,
            rgb(255 255 255 / 35%), transparent 3%,
            transparent 43.5%, rgb(40 34 22 / 8%) 47.5%, rgb(40 34 22 / 30%) 50%, rgb(40 34 22 / 8%) 52.5%, transparent 56.5%,
            transparent 97%, rgb(255 255 255 / 35%)),
        var(--book-paper);
}
.page-whole > .page-inner {
    --fold-gap: clamp(72px, 10vw, 128px);
    padding-inline: clamp(30px, 4.4vw, 58px);
}
.page-whole .page-head { max-width: calc(50% - var(--fold-gap) / 2); }
.page-whole .page-text { columns: 2; column-gap: var(--fold-gap); }
.page-whole .page-text > * { break-inside: avoid-column; }
.page-whole.pos-top .page-figure img,
.page-whole.pos-bottom .page-figure img { aspect-ratio: 21 / 8; }
.page-whole.pos-left .page-content,
.page-whole.pos-right .page-content { grid-template-columns: 1fr 1fr; gap: var(--fold-gap); }
.page-whole.pos-left .page-text,
.page-whole.pos-right .page-text { columns: auto; }
.page-whole.pos-left .page-figure img,
.page-whole.pos-right .page-figure img { aspect-ratio: 4 / 3; }
.page-whole.layout-image-caption .page-figure { max-width: calc(50% - var(--fold-gap) / 2); }
/* A picture alone is a panorama, edge to edge across the fold. */
.page-whole.layout-image .page-figure img { aspect-ratio: auto; }

/* While a whole spread turns, each stand-in shows half of the sheet. */
.is-slice { overflow: hidden; }
.page-slice { position: absolute; top: 0; bottom: 0; width: 200%; }
.page-slice-left { left: 0; }
.page-slice-right { left: -100%; }
.page-slice > .page-whole { height: 100%; }

/* Page numbers sit at the outer corners. */
.page-folio {
    position: absolute;
    bottom: 22px;
    font-family: var(--font-text);
    font-size: 1rem;
    color: var(--ink-soft);
    pointer-events: none;
    font-variant-numeric: lining-nums;
}
.page-left > .page-folio, .leaf-back > .page-folio, .folio-left { left: clamp(30px, 4.4vw, 58px); }
.page-right > .page-folio, .leaf-front > .page-folio, .folio-right { right: clamp(30px, 4.4vw, 58px); }

/* --- Once the controller has it -------------------------------------- */

/* The controller asks the stylesheet which mode the book is in rather than
   carrying its own copy of the breakpoint — two numbers that must agree are
   one number too many. */
.book.is-live .book-spreads { display: block; }
.book.is-live .spread { display: none; }
.book.is-live .spread.is-current { display: grid; }

.book.is-live [hidden] { display: none !important; }

/* An open page can be clicked to turn it; its outer corner lifts a little
   under the pointer to say so. */
@media (min-width: 1001px) {
    .book.is-live .spread .page { cursor: pointer; }
    .book.is-live .spread .page::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 34px;
        height: 34px;
        pointer-events: none;
        transform: scale(0);
        transition: transform 0.35s var(--ease-out);
    }
    .book.is-live .spread .page-right::after {
        right: 0;
        transform-origin: right bottom;
        background: linear-gradient(315deg, transparent 50%, #ddd6c4 50%, #f1ede2 72%, rgb(0 0 0 / 12%) 100%);
        box-shadow: -3px -3px 8px -4px rgb(0 0 0 / 30%);
    }
    .book.is-live .spread .page-left::after {
        left: 0;
        transform-origin: left bottom;
        background: linear-gradient(45deg, transparent 50%, #ddd6c4 50%, #f1ede2 72%, rgb(0 0 0 / 12%) 100%);
        box-shadow: 3px -3px 8px -4px rgb(0 0 0 / 30%);
    }
    .book.is-live .spread.is-current .page:not(.page-whole):hover::after { transform: scale(1); }
    .book.is-live .spread .page:has(.zoom:hover)::after,
    .book.is-live .spread .page:has(a:hover)::after { transform: scale(0); }
}

/* While a leaf is in the air the spread underneath keeps its place — it only
   stops being seen. Taking it out of the flow would collapse the stage, and
   the leaf and the base are both sized against the stage. */
.book.is-turning .book-spreads { visibility: hidden; }

/* The half of the book that stays still while a leaf swings over it. */
.book-base {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 2px;
    background: var(--book-paper);
    color: var(--book-ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

.leaf {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    will-change: transform;
    z-index: 2;
    color: var(--book-ink);
}
.leaf.is-turning { transition: transform 0.62s cubic-bezier(0.42, 0.02, 0.24, 1); }
.leaf.is-flipped { transform: rotateY(-180deg); }

.leaf-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
}
.leaf-front {
    border-radius: 0 2px 2px 0;
    background:
        linear-gradient(270deg, rgb(255 255 255 / 35%), transparent 6%),
        linear-gradient(90deg, rgb(40 34 22 / 30%), rgb(40 34 22 / 8%) 5%, transparent 13%),
        var(--book-paper);
}
.leaf-back {
    transform: rotateY(180deg);
    border-radius: 2px 0 0 2px;
    background:
        linear-gradient(90deg, rgb(255 255 255 / 35%), transparent 6%),
        linear-gradient(270deg, rgb(40 34 22 / 30%), rgb(40 34 22 / 8%) 5%, transparent 13%),
        var(--book-paper);
}
/* The leaf carries its own page's layout, so the page rules apply to it too. */


/* As the leaf lifts it catches shadow across its face, deepest mid-turn. */
.leaf-face::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.leaf-front::after { background: linear-gradient(90deg, rgb(20 16 8 / 34%), rgb(20 16 8 / 8%) 55%, transparent); }
.leaf-back::after { background: linear-gradient(270deg, rgb(20 16 8 / 34%), rgb(20 16 8 / 8%) 55%, transparent); }
.leaf.is-turning .leaf-face::after { animation: leaf-shade 0.62s cubic-bezier(0.42, 0.02, 0.24, 1); }
@keyframes leaf-shade { 50% { opacity: 1; } }

/* --- Under the book: turn, and the rail of topics ----------------------- */

.book-controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-top: 52px;
}
.book-rail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}
.book-rail li { flex: 0 1 36px; min-width: 6px; }
.book-tick {
    position: relative;
    display: block;
    width: 100%;
    height: 28px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.book-tick::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--on-iron) 22%, transparent);
    transform: translateY(-50%);
    transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.book-tick.is-read::before { background: color-mix(in srgb, var(--gilt) 62%, transparent); }
.book-tick[aria-current]::before { transform: translateY(-50%) scaleY(3); background: var(--gilt-bright); }
.book-tick:hover::before { transform: translateY(-50%) scaleY(2.5); background: var(--gilt); }
.book-tick:focus-visible { outline-offset: 1px; }

/* --- Narrow screens ----------------------------------------------------
   A page of prose needs about 500px to be a page rather than a column, so
   below that the two leaves stack and are read one under the other. The
   threshold is where the fixed-ratio page stops holding a spread's worth of
   writing without scrolling — measured, not guessed. There is no spine to
   swing about once they are stacked, so the controller steps between spreads
   instead of animating. */

@media (max-width: 1000px) {
    .book { --book-mode: stacked; }

    .book-case { padding: 8px; background: var(--board); }
    .book-edge, .book-ribbon { display: none; }

    .spread { grid-template-columns: 1fr; aspect-ratio: auto; }
    .page-left, .page-right { border-radius: 2px; background: var(--book-paper); }
    .page-left { border-bottom: 1px solid #ddd6c4; }
    .page-inner,
    .page-left > .page-inner,
    .page-right > .page-inner,
    .page-whole > .page-inner { height: auto; padding: 30px 24px 58px; overflow: visible; }
    .page-left > .page-folio, .folio-left { left: 24px; }
    .page-right > .page-folio, .folio-right { right: 24px; }

    /* Stacked, a whole spread is simply a long page: one column, the picture
       above the writing whatever side it sat on. */
    .page-whole { background: var(--book-paper); }
    .page-whole .page-text { columns: auto; }
    .page-whole .page-head { max-width: none; }
    .pos-left .page-content,
    .pos-right .page-content,
    .page-whole.pos-left .page-content,
    .page-whole.pos-right .page-content { display: block; }
    .pos-left .page-figure { margin: 0 0 20px; }
    .pos-right .page-figure { margin: 20px 0 0; }
    .pos-left .page-figure img,
    .pos-right .page-figure img { aspect-ratio: 4 / 3; }
    .folio-right { display: none; }
    .page-text { text-align: left; }
    .layout-image .page-figure img { height: auto; aspect-ratio: 4 / 3; }

    .book-controls { margin-top: 24px; gap: 12px; }
}
@media (max-width: 560px) {
    .book-control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .book-controls .btn { width: 46px; padding: 0; }
}

/* --- Timeline ---------------------------------------------------------
   An ordered list set along an iron post, because that is what it is: the
   moments in the order they happened, each one a small plaque on the post. */

.timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(28px, 4vw, 44px);
}
.timeline::before {
    content: "";
    position: absolute;
    top: 8px; bottom: 8px;
    left: 15px;
    width: 6px;
    background: linear-gradient(90deg, var(--iron-rim), var(--iron) 50%, var(--iron-deep));
    border-radius: 3px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gilt) 30%, transparent);
}
.moment {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: clamp(18px, 3vw, 32px);
    scroll-margin-top: 96px;
}
.moment-mark {
    position: relative;
    z-index: 1;
    width: 36px; height: 36px;
    margin-top: 12px;
    background: var(--iron);
    border: 2px solid var(--gilt);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--stone), inset 0 0 0 5px var(--iron-deep);
}
.moment-body {
    padding: clamp(22px, 3vw, 32px);
    background: var(--paper);
    border-radius: 3px;
    box-shadow: var(--shadow-slab);
}
.moment-title { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 16px; color: var(--ink); }
.moment-text { margin-top: 16px; color: var(--ink-soft); max-width: 70ch; }

@media (min-width: 1000px) {
    .timeline::before { left: calc(50% - 3px); }
    .moment { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
    .moment-mark { grid-column: 2; grid-row: 1; }
    .moment-body { grid-column: 3; grid-row: 1; }
    .moment:nth-child(even) .moment-body { grid-column: 1; }
}

/* The frame a recording or photo is mounted in. */
.frame {
    padding: 6px;
    background: var(--iron);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gilt) 45%, transparent);
}
.frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 2px; }
.frame img { display: block; width: 100%; height: auto; border-radius: 2px; }
/* An account recorded as sound: the player is all there is to show, so it
   takes the width and none of the 16/9 a filmed one would claim. */
.frame audio { display: block; width: 100%; border-radius: 2px; }

/* --- Oral stories ----------------------------------------------------- */

.accounts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: clamp(20px, 3vw, 36px);
}
.account {
    position: relative;
    padding: clamp(28px, 4vw, 40px);
    padding-top: clamp(48px, 5vw, 60px);
    background: var(--paper);
    border-radius: 3px;
    box-shadow: var(--shadow-slab);
    scroll-margin-top: 96px;
}
.account-quote {
    position: absolute;
    top: -14px;
    left: clamp(24px, 4vw, 38px);
    width: 52px;
    height: 40px;
    padding: 9px 10px;
    fill: var(--gilt);
    background: var(--iron);
    border-radius: 3px;
    box-shadow: 0 8px 16px -8px rgb(0 0 0 / 50%);
}
.account-title { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: 16px; color: var(--ink); }
.account-note {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px !important;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    color: var(--ink-faint);
}
.account .frame { margin-bottom: 18px; }
.account-text { font-style: italic; color: var(--ink-soft); }

/* =============================================================== quiz == */

.front-main-quiz { padding-bottom: clamp(56px, 8vw, 96px); }

.quiz-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(16px, 2.4vw, 28px);
    margin-top: clamp(28px, 4vw, 44px);
}
.quiz-level {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 40px 24px 36px;
    font: inherit;
    color: var(--on-iron);
    text-align: center;
    background:
        radial-gradient(130% 80% at 20% 0%, color-mix(in srgb, var(--iron-rim) 70%, transparent), transparent 62%),
        linear-gradient(180deg, var(--iron), var(--iron-deep));
    border: 0;
    border-radius: 6px;
    box-shadow: var(--shadow-plate);
    cursor: pointer;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.quiz-level::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1.5px solid color-mix(in srgb, var(--gilt) 65%, transparent);
    border-radius: 3px;
    pointer-events: none;
    transition: border-color 0.3s var(--ease-out);
}
.quiz-level:hover { transform: translateY(-4px); }
.quiz-level:hover::before { border-color: var(--gilt-bright); }
.quiz-level:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }
.quiz-level-name {
    font-family: var(--font-cast);
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gilt-bright);
    text-shadow: 0 -1px 0 rgb(0 0 0 / 55%);
}
.quiz-level-format { font-style: italic; font-size: 1.08rem; }
.quiz-level-count {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, transparent);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-iron-soft);
    font-variant-numeric: lining-nums;
}

.quiz-noscript {
    margin: 8px 0 0 !important;
    padding: 12px 16px;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--iron-deep);
    background: var(--gilt-bright);
    border-radius: var(--radius);
}

.quiz-round { max-width: calc(820px + 2 * var(--gutter)); padding-top: clamp(40px, 6vw, 72px); }
.quiz-round-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.quiz-round-label {
    margin: 0 !important;
    font-family: var(--font-cast);
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}
.quiz-progress { margin: 2px 0 0 !important; font-family: var(--font-ui); font-size: 0.95rem; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }

.quiz-bar {
    height: 8px;
    margin-bottom: 28px;
    background: var(--stone-3);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 15%);
}
.quiz-bar span {
    display: block;
    inline-size: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--iron), var(--iron-rim));
    border-radius: 4px;
    transition: inline-size 0.5s var(--ease-out);
}

.quiz-card {
    padding: clamp(28px, 5vw, 52px);
    background: var(--paper);
    border-top: 4px solid var(--iron);
    box-shadow: var(--shadow-slab);
}
.quiz-ask { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.25; color: var(--ink); }
.quiz-aside { margin-top: 10px !important; font-style: italic; color: var(--ink-soft); }

.quiz-options { display: grid; gap: 12px; margin-top: 28px; }
.quiz-options.is-pair { grid-template-columns: 1fr 1fr; }
.quiz-option {
    padding: 16px 20px;
    font: inherit;
    font-size: 1.1rem;
    color: var(--ink);
    text-align: left;
    background: var(--stone);
    border: 1.5px solid var(--stone-3);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.quiz-options.is-pair .quiz-option {
    text-align: center;
    font-family: var(--font-cast);
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.quiz-option:not(:disabled):hover { border-color: var(--iron); background: var(--paper); transform: translateY(-1px); }
.quiz-option:disabled { cursor: default; }
.quiz-option:disabled:not(.is-answer):not(.is-picked) { opacity: 0.6; }

/* Marked up: the answer is cast in iron, a wrong pick is struck through. */
.quiz-option.is-answer {
    color: var(--gilt-bright);
    background: var(--iron);
    border-color: var(--iron-deep);
}
.quiz-option.is-picked:not(.is-answer) {
    color: var(--red);
    background: var(--red-wash);
    border-color: var(--red);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.quiz-entry { display: flex; gap: 10px; margin-top: 28px; }
.quiz-input {
    flex: 1;
    min-inline-size: 0;
    min-height: 50px;
    padding: 12px 16px;
    font: inherit;
    font-size: 1.1rem;
    color: var(--ink);
    background: var(--stone);
    border: 1.5px solid var(--ink-faint);
    border-radius: var(--radius);
}
.quiz-input::placeholder { color: var(--ink-faint); opacity: 1; }
.quiz-input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-color: var(--iron); }

.quiz-feedback {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
}
.quiz-verdict {
    margin: 0 !important;
    font-family: var(--font-cast);
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.is-right .quiz-verdict { color: var(--link); }
.is-wrong .quiz-verdict { color: var(--red); }
.quiz-solution { margin: 6px 0 0 !important; font-size: 1.1rem; }
.quiz-explain { margin-top: 12px; color: var(--ink-soft); }

.quiz-card-foot { margin-top: 28px; }

.quiz-results { max-width: calc(820px + 2 * var(--gutter)); padding-top: clamp(40px, 6vw, 72px); }
.quiz-results h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.quiz-final { margin: 0 !important; font-size: 1.2rem; font-style: italic; color: var(--on-iron); }
.quiz-results-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 520px) {
    .quiz-options.is-pair { grid-template-columns: 1fr; }
    .quiz-entry { flex-direction: column; }
}

/* =========================================================== continue == */

.continue { padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(56px, 8vw, 96px); }
.continue-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 24px;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-top: 24px;
    color: var(--ink) !important;
    text-decoration: none !important;
    border-top: 2px solid var(--iron);
}
.continue-name {
    grid-column: 1;
    font-family: var(--font-cast);
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.continue-arrow {
    grid-column: 2;
    width: clamp(36px, 5vw, 56px) !important;
    height: clamp(36px, 5vw, 56px) !important;
    color: var(--iron);
    transition: transform 0.45s var(--ease-out);
}
.continue-link:hover .continue-name { color: var(--link); }
.continue-link:hover .continue-arrow { transform: translateX(8px); }

/* ============================================================= footer == */

.front-foot {
    color: var(--on-iron-soft);
    background: var(--iron-deep);
    box-shadow: inset 0 3px 0 var(--iron), inset 0 4px 0 color-mix(in srgb, var(--gilt) 40%, transparent);
    font-family: var(--font-ui);
}
.front-foot-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px clamp(32px, 6vw, 96px);
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding: clamp(48px, 6vw, 72px) var(--gutter) 32px;
}
.front-foot-mark { display: flex; align-items: flex-start; gap: 22px; }
.front-foot-mark .seal { width: 96px; height: 96px; flex: none; }
.front-foot-title {
    margin: 4px 0 8px !important;
    font-family: var(--font-cast);
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gilt-bright);
}
.front-foot-about { max-width: 46ch; font-family: var(--font-text); font-size: 1.02rem; line-height: 1.55; }
.front-foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 40px; align-content: start; }
.front-foot-nav a {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--on-iron) !important;
    text-decoration: none;
}
.front-foot-nav a:hover { color: var(--gilt-bright) !important; text-decoration: underline; }
.front-foot-note {
    grid-column: 1 / -1;
    margin: 0 !important;
    padding-top: 22px;
    font-size: 0.88rem;
    border-top: 1px solid color-mix(in srgb, var(--gilt) 22%, transparent);
}
@media (max-width: 720px) {
    .front-foot-inner { grid-template-columns: 1fr; }
    .front-foot-mark .seal { width: 64px; height: 64px; }
}

/* =========================================================== lightbox == */

.lightbox {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    color: var(--on-iron);
    background: transparent;
    border: 0;
}
.lightbox::backdrop { background: color-mix(in srgb, var(--iron-deep) 92%, #000); }
.lightbox-frame {
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
    padding: 64px clamp(16px, 7vw, 96px) 24px;
}
.lightbox-figure {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin: 0;
    max-height: 100%;
}
.lightbox-image {
    max-width: 100%;
    max-height: calc(100dvh - 160px);
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 6px var(--iron), 0 0 0 7px var(--gilt-shade), 0 30px 60px -20px rgb(0 0 0 / 80%);
}
.lightbox-caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    max-width: 70ch;
    text-align: center;
    font-size: 1.05rem;
}
.lightbox-count { font-family: var(--font-ui); color: var(--gilt); font-variant-numeric: lining-nums tabular-nums; }

.lightbox-button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 0.9rem/1 var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gilt-bright);
    background: var(--iron);
    border: 1px solid color-mix(in srgb, var(--gilt) 55%, transparent);
    border-radius: var(--radius);
    cursor: pointer;
}
.lightbox-button:hover { background: var(--iron-rim); border-color: var(--gilt); }
.lightbox-button .icon { width: 20px; height: 20px; }
.lightbox-close { top: 14px; right: 14px; padding: 10px 14px; }
.lightbox-step { top: 50%; width: 48px; height: 48px; justify-content: center; border-radius: 50%; transform: translateY(-50%); }
.lightbox-previous { left: clamp(8px, 2vw, 24px); }
.lightbox-next { right: clamp(8px, 2vw, 24px); }
.lightbox-step[hidden] { display: none; }
@media (max-width: 640px) {
    .lightbox-step { top: auto; bottom: 14px; transform: none; }
    .lightbox-frame { padding-bottom: 76px; }
}

/* Reading an entry: the picture takes three fifths, the entry the rest, on
   paper — the reading surface everywhere else on the site. */
.lightbox-detail { display: none; }
.lightbox.has-detail .lightbox-frame {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    place-items: stretch;
    padding: 0;
}
.has-detail .lightbox-figure {
    align-content: center;
    min-height: 0;
    padding: 64px clamp(16px, 4vw, 64px) 32px;
}
.has-detail .lightbox-image { max-height: calc(100dvh - 150px); }
.has-detail .lightbox-caption-text { display: none; }
.has-detail .lightbox-detail {
    display: block;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 84px clamp(24px, 3.5vw, 56px) 56px;
    color: var(--ink);
    background: var(--paper);
    box-shadow: inset 1px 0 0 var(--gilt-shade), -18px 0 36px -24px rgb(0 0 0 / 60%);
    scrollbar-color: var(--stone-3) var(--paper);
}
.has-detail .lightbox-detail:focus-visible { outline: 2px solid var(--link); outline-offset: -4px; }
.lightbox-detail :focus-visible { outline-color: var(--link); }
.has-detail .lightbox-next { right: calc(40% + clamp(8px, 2vw, 24px)); }

.lightbox-detail-title { font-size: clamp(1.8rem, 2.6vw, 2.35rem); color: var(--ink); }
.lightbox-detail-subtitle { margin: 8px 0 0 !important; font-style: italic; font-size: 1.1rem; color: var(--ink-soft); }
.lightbox-detail-meta {
    margin: 12px 0 0 !important;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--gilt-ink);
    font-variant-numeric: lining-nums;
}
.lightbox-detail-text {
    max-width: 62ch;
    margin-top: 24px;
    padding-top: 24px;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
}

/* An entry with no picture: the panel alone, at a reading width. */
.lightbox.has-detail.is-textual .lightbox-frame { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.has-detail.is-textual .lightbox-figure { display: none; }
.has-detail.is-textual .lightbox-detail { width: min(100%, 760px); border-inline: 0; }

@media (max-width: 860px) {
    /* Stacked: the picture above, the entry below, the whole viewer scrolls. */
    .lightbox.has-detail .lightbox-frame { display: block; overflow-y: auto; overscroll-behavior: contain; }
    .has-detail .lightbox-figure { padding: 72px 16px 20px; }
    .has-detail .lightbox-image { max-height: 55dvh; }
    .has-detail .lightbox-detail {
        overflow: visible;
        min-height: 45dvh;
        padding: 28px var(--gutter) 96px;
        border-inline-start: 0;
        border-top: 6px solid var(--iron);
    }
    .has-detail.is-textual .lightbox-detail { width: auto; min-height: 100%; padding-top: 72px; border-top: 0; }
    .has-detail .lightbox-close,
    .has-detail .lightbox-step { position: fixed; }
    .has-detail .lightbox-step { top: auto; bottom: 14px; transform: none; }
    .has-detail .lightbox-next { right: 14px; }
    .has-detail .lightbox-previous { left: 14px; }
}

.lightbox[open] .lightbox-image { animation: lightbox-in 0.45s var(--ease-out); }
@keyframes lightbox-in {
    from { opacity: 0; transform: scale(0.97); filter: blur(4px); }
}

/* ====================================================== the one moment == */

/* The homepage marker is cast as the page opens: the seal settles into its
   place and the raised rim draws itself out from the centre. Everything is
   visible from the first frame; the motion only settles it. */
@media (prefers-reduced-motion: no-preference) {
    .opening .seal { animation: seal-turn 1.6s var(--ease-out) both; }
    .opening .marker::before { animation: rim-draw 1.3s 0.1s var(--ease-out) both; }
    .opening-words h1 { animation: cast-rise 1.1s 0.15s var(--ease-out) both; }
}
@keyframes seal-turn { from { transform: rotate(-24deg) scale(0.94); } }
@keyframes rim-draw { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes cast-rise {
    from { text-shadow: 0 0 0 rgb(0 0 0 / 0%); letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
    .front *, .front *::before, .front *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================= print == */

/* Printing takes the whole book, not the leaf that happens to be open. */
@media print {
    .book.is-live .spread { display: grid !important; break-inside: avoid; page-break-after: always; }
    .book-controls, .leaf, .book-base, .front-bar, .front-foot, .continue, .lightbox { display: none !important; }
    .spread { box-shadow: none; }
    .band-flipbook { background: none; color: var(--ink); }
}