/* =====================================================================
   pencloser.com  --  The Emerald Cabinet
   Art Deco Vitrine System; Diagonal Sections; Layered Depth
   ===================================================================== */

:root {
    /* ---- Palette ---------------------------------------------------- */
    --c-obsidian:   #061210;   /* deep background */
    --c-forest:     #0d1b14;   /* primary background (front pane) */
    --c-gold:       #c9a84c;   /* antiqued gold */
    --c-bronze:     #3d2e1f;   /* dark bronze / patina */
    --c-champagne:  #d4c9a8;   /* pale gold */
    --c-stone:      #b8b0a0;   /* warm stone body text */
    --c-brass:      #7a7060;   /* aged brass / muted */
    --c-emerald:    #2d6b4f;   /* jewel highlight */
    --c-emerald-deep: #1a3a2a; /* inner emerald (vitrine inner border) */
    --c-ruby:       #8b2d3a;   /* ruby inlay */
    --c-jet:        #000000;   /* opening curtain */

    /* ---- Frame inset (vitrine standoff) ----------------------------- */
    --frame-inset: clamp(24px, 5vw, 80px);

    /* ---- Type scale ------------------------------------------------- */
    --f-display: "Poiret One", "Cormorant Garamond", serif;
    --f-serif:   "Cormorant Garamond", "Libre Baskerville", serif;
    --f-body:    "Libre Baskerville", Georgia, serif;
    --f-mono:    "DM Mono", "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--c-jet);
    color: var(--c-stone);
    font-family: var(--f-body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    min-height: 100vh;
}

::selection { background: var(--c-gold); color: var(--c-obsidian); }

/* =====================================================================
   1. Cabinet opening overlay (initial reveal)
   ===================================================================== */

#cabinet-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--c-jet);
    pointer-events: none;
    transition: opacity 800ms ease-out, background-color 500ms ease-out 400ms;
}

#cabinet-overlay.is-fading {
    background-color: transparent;
}

#cabinet-overlay.is-done {
    opacity: 0;
    visibility: hidden;
    transition: opacity 600ms ease-out, visibility 0s linear 600ms;
}

.overlay-edge {
    position: absolute;
    background: var(--c-gold);
    opacity: 0;
}

.edge-top, .edge-bottom { left: 0; right: 0; height: 1px; transform-origin: center; transform: scaleX(0); }
.edge-left, .edge-right { top: 0;  bottom: 0; width: 1px;  transform-origin: center; transform: scaleY(0); }
.edge-top    { top: var(--frame-inset); }
.edge-bottom { bottom: var(--frame-inset); }
.edge-left   { left: var(--frame-inset); }
.edge-right  { right: var(--frame-inset); }

#cabinet-overlay.is-drawing .overlay-edge {
    opacity: 1;
    transition: transform 800ms ease-out;
}

#cabinet-overlay.is-drawing .edge-top,
#cabinet-overlay.is-drawing .edge-bottom { transform: scaleX(1); }
#cabinet-overlay.is-drawing .edge-left,
#cabinet-overlay.is-drawing .edge-right  { transform: scaleY(1); }


/* =====================================================================
   2. Persistent Vitrine Frame (the gilded mullion)
   ===================================================================== */

.vitrine-frame {
    position: fixed;
    inset: var(--frame-inset);
    z-index: 50;
    pointer-events: none;

    /* Layered bevelled frame: outer gold, mid bronze, inner emerald (#1a3a2a) */
    outline: 1px solid var(--c-gold);
    box-shadow:
        0 0 0 1px var(--c-gold),
        inset 0 0 0 1px var(--c-bronze),
        inset 0 0 0 6px var(--c-obsidian),
        inset 0 0 0 7px var(--c-emerald-deep),
        0 0 24px rgba(0,0,0,0.85),
        inset 0 0 60px rgba(0,0,0,0.75);

    transition: transform 200ms ease-out;
}

.vitrine-frame.is-pulsing { transform: scale(1.005); }

.frame-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 1px solid var(--c-gold);
}
.corner-tl { top: -1px;    left: -1px;    border-right: none; border-bottom: none; }
.corner-tr { top: -1px;    right: -1px;   border-left:  none; border-bottom: none; }
.corner-bl { bottom: -1px; left: -1px;    border-right: none; border-top:    none; }
.corner-br { bottom: -1px; right: -1px;   border-left:  none; border-top:    none; }

.frame-corner::before {
    content: "";
    position: absolute;
    width: 6px; height: 6px;
    background: var(--c-gold);
    transform: rotate(45deg);
}
.corner-tl::before { top: -3px;    left: -3px;    }
.corner-tr::before { top: -3px;    right: -3px;   }
.corner-bl::before { bottom: -3px; left: -3px;    }
.corner-br::before { bottom: -3px; right: -3px;   }


/* =====================================================================
   3. Floating Diamond Facets (scattered gemstone scatter)
   ===================================================================== */

.facets {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.facet {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(201, 168, 76, 0.5);
    transform: rotate(45deg);
    background: transparent;
    animation: facet-glimmer 6s ease-in-out infinite alternate;
}
.facet:nth-child(2n)  { animation-duration: 7.2s; animation-delay: -0.8s; }
.facet:nth-child(3n)  { animation-duration: 8.4s; animation-delay: -1.6s; }
.facet:nth-child(4n+1){ animation-duration: 9.1s; animation-delay: -2.3s; }

@keyframes facet-glimmer {
    0%   { opacity: 0.25; transform: rotate(45deg) scale(0.92); }
    100% { opacity: 0.85; transform: rotate(45deg) scale(1.08); }
}


/* =====================================================================
   4. Index Plate (navigation -- engraved brass plate)
   ===================================================================== */

.index-plate {
    position: fixed;
    top: calc(var(--frame-inset) + 18px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 55;
    height: 48px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    background: linear-gradient(135deg, #c9a84c 0%, #b89436 35%, #8a6d2f 100%);
    border: 1px solid var(--c-bronze);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.6);

    opacity: 0;
    transform: translate(-50%, -8px);
    transition: opacity 700ms ease-out 1800ms, transform 700ms ease-out 1800ms;

    max-width: calc(100vw - var(--frame-inset) * 2 - 24px);
    overflow: hidden;
}

.index-plate.is-revealed {
    opacity: 1;
    transform: translate(-50%, 0);
}

.plate-mark {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--c-obsidian);
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
    padding: 4px 6px;
    transition: color 220ms ease-out, text-shadow 220ms ease-out, box-shadow 220ms ease-out;
    border-radius: 1px;
    white-space: nowrap;
}

.plate-mark:hover {
    color: var(--c-bronze);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.6);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.plate-mark.is-active {
    color: #2a1a0a;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

@media (max-width: 880px) {
    .index-plate { gap: 14px; padding: 0 16px; height: 44px; }
    .plate-mark { font-size: 9px; letter-spacing: 0.3em; }
}
@media (max-width: 640px) {
    .plate-mark:nth-child(n+4) { display: none; }
}


/* =====================================================================
   5. Cabinet (main content rail)
   ===================================================================== */

.cabinet {
    position: relative;
    z-index: 5;
    padding: var(--frame-inset);
    padding-top: calc(var(--frame-inset) + 90px); /* reserve room beneath plate */
}


/* =====================================================================
   6. Vitrine Sections (the display cases)
   ===================================================================== */

.vitrine {
    position: relative;
    min-height: 90vh;
    padding: clamp(80px, 12vh, 160px) clamp(36px, 6vw, 120px);
    margin-bottom: clamp(40px, 6vh, 90px);

    /* layered bevel (outer gold, mid bronze, inner emerald) */
    box-shadow:
        0 0 0 1px var(--c-gold),
        0 0 0 4px var(--c-bronze),
        0 0 0 5px rgba(45, 107, 79, 0.7),
        0 30px 60px -20px rgba(0,0,0,0.85);

    /* Diagonal section cut: 6deg seam */
    clip-path: polygon(
        0   3.2%,
        50% 0,
        100% 3.2%,
        100% 96.8%,
        50% 100%,
        0   96.8%
    );

    /* progressive disclosure starting state */
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 500ms ease-out 300ms, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms;
}

.vitrine.is-revealed {
    opacity: 1;
    transform: scale(1);
}

.vitrine-front {
    background: var(--c-forest);
}

.vitrine-recessed {
    background: var(--c-obsidian);
    margin-left:  clamp(0px, 8vw, 120px);
    margin-right: clamp(0px, 8vw, 120px);
    box-shadow:
        0 0 0 1px var(--c-gold),
        0 0 0 4px var(--c-bronze),
        0 0 0 5px rgba(45, 107, 79, 0.7),
        inset 0 0 0 14px transparent,
        inset 0 0 0 15px rgba(201, 168, 76, 0.35),
        0 40px 80px -20px rgba(0,0,0,0.95);
}

/* hover scale on vitrine */
.vitrine {
    transition:
        opacity 500ms ease-out 300ms,
        transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms,
        box-shadow 300ms ease-out;
}

.vitrine.is-revealed:hover {
    transform: scale(1.015);
    box-shadow:
        0 0 0 1px var(--c-emerald),
        0 0 0 4px var(--c-bronze),
        0 0 0 5px rgba(201, 168, 76, 0.6),
        0 50px 90px -20px rgba(0,0,0,0.95),
        inset 0 0 80px rgba(0,0,0,0.45);
}

.vitrine.is-revealed.vitrine-recessed:hover {
    box-shadow:
        0 0 0 1px var(--c-emerald),
        0 0 0 4px var(--c-bronze),
        0 0 0 5px rgba(201, 168, 76, 0.6),
        inset 0 0 0 15px rgba(45, 107, 79, 0.55),
        0 50px 90px -20px rgba(0,0,0,0.95);
}

.vitrine-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    z-index: 2;
}


/* =====================================================================
   7. Fan Motif Corners (conic gradient quarter-fans)
   ===================================================================== */

.fan-corner {
    position: absolute;
    width: clamp(80px, 12vw, 160px);
    height: clamp(80px, 12vw, 160px);
    pointer-events: none;
    z-index: 1;

    background: conic-gradient(
        from 0deg,
        rgba(201, 168, 76, 0.18) 0deg,
        transparent 11.25deg,
        rgba(201, 168, 76, 0.18) 22.5deg,
        transparent 33.75deg,
        rgba(201, 168, 76, 0.18) 45deg,
        transparent 56.25deg,
        rgba(201, 168, 76, 0.18) 67.5deg,
        transparent 78.75deg,
        rgba(201, 168, 76, 0.18) 90deg,
        transparent 90deg
    );
}

.fan-tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.fan-br { bottom: 0; right: 0; clip-path: polygon(100% 100%, 100% 0, 0 100%); }


/* =====================================================================
   8. Chevron Strips (inner edge of vitrine)
   ===================================================================== */

.chevron-strip {
    position: absolute;
    left: 0; right: 0;
    height: 12px;
    pointer-events: none;
    background-image:
        repeating-linear-gradient( 45deg, var(--c-gold) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(-45deg, var(--c-bronze) 0 1px, transparent 1px 6px);
    background-size: 12px 12px, 12px 12px;
    opacity: 0.55;
    z-index: 1;
}
.chevron-top    { top: 12px; }
.chevron-bottom { bottom: 12px; }


/* =====================================================================
   9. Typography
   ===================================================================== */

.display-title {
    font-family: var(--f-display);
    font-weight: 400;
    color: var(--c-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: clamp(2.8rem, 7vw, 6rem);
    line-height: 1.05;
    text-shadow: 1px 1px 0 var(--c-bronze);
    margin: 0.4em 0 0.6em 0;
}

.section-opening .display-title {
    font-size: clamp(3rem, 8vw, 7rem);
    text-align: center;
    margin: 0.3em 0 0.4em 0;
}

.serif-heading {
    font-family: var(--f-serif);
    font-weight: 500;
    color: var(--c-champagne);
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.25;
    margin-bottom: 0.5em;
}

.body-text {
    font-family: var(--f-body);
    color: var(--c-stone);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    margin-bottom: 1.1em;
}

.body-text em, .lede em, .case-body em, .colophon-text em {
    color: var(--c-champagne);
    font-style: italic;
}

.metadata-line {
    font-family: var(--f-mono);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-brass);
    margin-bottom: 0.6em;
    display: block;
}

.metadata-line span { margin-right: 0.6em; }

.lede {
    font-family: var(--f-serif);
    color: var(--c-champagne);
    font-size: clamp(1.15rem, 1.7vw, 1.55rem);
    line-height: 1.55;
    font-style: italic;
    font-weight: 400;
    max-width: 70ch;
    margin: 1.4em auto;
    text-align: center;
}

.section-lede {
    font-family: var(--f-serif);
    color: var(--c-champagne);
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    line-height: 1.55;
    max-width: 65ch;
    margin: 0.6em auto 2.4em auto;
    text-align: center;
    font-style: italic;
}

.subtitle {
    font-family: var(--f-mono);
    text-align: center;
    color: var(--c-brass);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 2em;
}


/* =====================================================================
   10. Letter-by-letter blur reveal on hero title
   ===================================================================== */

.display-title .letter {
    display: inline-block;
    filter: blur(8px);
    opacity: 0;
    transition: filter 600ms ease-out, opacity 600ms ease-out;
}

.display-title .letter.is-resolved {
    filter: blur(0);
    opacity: 1;
}

.opening-foot {
    text-align: center;
    margin-top: 2.4em;
}


/* =====================================================================
   11. Sunburst Divider
   ===================================================================== */

.sunburst {
    width: clamp(100px, 14vw, 180px);
    height: clamp(100px, 14vw, 180px);
    margin: 2em auto 1.4em auto;
    display: block;
}
.sunburst svg { width: 100%; height: 100%; display: block; }
.sunburst-small { width: clamp(80px, 10vw, 130px); height: clamp(80px, 10vw, 130px); margin: 1.2em auto 1em auto; }


/* =====================================================================
   12. Manifesto Section
   ===================================================================== */

.manifesto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 56px);
    margin: 3em 0;
}
.article-pane {
    padding: clamp(20px, 2.4vw, 36px);
    border: 1px solid rgba(201, 168, 76, 0.35);
    background: rgba(13, 27, 20, 0.4);
    box-shadow:
        inset 0 0 0 4px rgba(6, 18, 16, 0.6),
        inset 0 0 0 5px rgba(45, 107, 79, 0.25);
    transition: border-color 300ms ease-out, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.article-pane:hover {
    border-color: var(--c-emerald);
    transform: scale(1.012);
}
.article-pane-wide {
    grid-column: 1 / -1;
}

@media (max-width: 740px) {
    .manifesto-grid { grid-template-columns: 1fr; }
}

.pull-quote {
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--c-champagne);
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    line-height: 1.5;
    text-align: center;
    max-width: 70ch;
    margin: 3em auto 1em auto;
    padding: clamp(20px, 3vw, 40px) clamp(30px, 5vw, 60px);
    border-top: 1px solid rgba(201, 168, 76, 0.4);
    border-bottom: 1px solid rgba(201, 168, 76, 0.4);
    position: relative;
}

.quote-mark {
    font-family: var(--f-display);
    color: var(--c-gold);
    font-size: 1.4em;
    margin: 0 0.2em;
    vertical-align: -0.1em;
}

.quote-cite {
    display: block;
    margin-top: 1.2em;
    font-family: var(--f-mono);
    font-style: normal;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    color: var(--c-brass);
}


/* =====================================================================
   13. Vitrines section: cabinet of cases
   ===================================================================== */

.vitrine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2vw, 36px);
    margin-top: 2em;
}

@media (max-width: 980px) { .vitrine-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .vitrine-grid { grid-template-columns: 1fr; } }

.case-pane {
    position: relative;
    padding: clamp(22px, 2.4vw, 36px);
    background: rgba(6, 18, 16, 0.65);
    border: 1px solid var(--c-gold);
    box-shadow:
        inset 0 0 0 3px var(--c-bronze),
        inset 0 0 0 4px rgba(45, 107, 79, 0.4),
        0 12px 32px -8px rgba(0,0,0,0.7);

    transition:
        transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 300ms ease-out,
        box-shadow 300ms ease-out;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.case-pane:hover {
    transform: scale(1.015);
    border-color: var(--c-emerald);
    box-shadow:
        inset 0 0 0 3px var(--c-bronze),
        inset 0 0 0 4px rgba(201, 168, 76, 0.6),
        0 22px 50px -8px rgba(0,0,0,0.85);
}

.case-number {
    font-family: var(--f-mono);
    color: var(--c-gold);
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    margin-bottom: 1em;
    border-bottom: 1px solid rgba(201, 168, 76, 0.3);
    padding-bottom: 0.6em;
}

.case-title {
    font-family: var(--f-display);
    color: var(--c-champagne);
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.4em;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
}

.case-meta {
    font-family: var(--f-mono);
    color: var(--c-brass);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1em;
}

.case-body {
    font-family: var(--f-body);
    color: var(--c-stone);
    font-size: 0.98rem;
    line-height: 1.65;
    flex-grow: 1;
}

.case-corner-mark {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border: 1px solid var(--c-gold);
    transform: rotate(45deg);
    opacity: 0.55;
}


/* =====================================================================
   14. Mechanism Section
   ===================================================================== */

.mechanism-pair {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) 1.6fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
    margin: 2em 0;
}

@media (max-width: 820px) {
    .mechanism-pair { grid-template-columns: 1fr; }
}

.mechanism-figure {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mechanism-svg {
    width: clamp(220px, 28vw, 360px);
    height: clamp(220px, 28vw, 360px);
}

.mech-ring-outer { animation: mech-rotate-cw  60s linear infinite; transform-origin: center; }
.mech-ring-inner { animation: mech-rotate-ccw 90s linear infinite; transform-origin: center; }

@keyframes mech-rotate-cw  { to { transform: rotate(360deg); } }
@keyframes mech-rotate-ccw { to { transform: rotate(-360deg); } }

.mechanism-list {
    list-style: none;
    margin: 1.6em 0;
    padding: 0;
}
.mechanism-list li {
    font-family: var(--f-serif);
    color: var(--c-champagne);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.6;
    padding: 0.6em 0;
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}
.list-tag {
    font-family: var(--f-mono);
    color: var(--c-gold);
    margin-right: 1em;
    font-size: 0.85em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.meander-strip {
    height: 18px;
    margin-top: 3em;
    background-image:
        linear-gradient(90deg,
            transparent 0%, transparent 4%,
            rgba(201, 168, 76, 0.3) 4%, rgba(201, 168, 76, 0.3) 5%,
            transparent 5%, transparent 9%,
            rgba(201, 168, 76, 0.3) 9%, rgba(201, 168, 76, 0.3) 10%,
            transparent 10%
        );
    background-size: 40px 100%;
    border-top: 1px solid rgba(201, 168, 76, 0.3);
    border-bottom: 1px solid rgba(201, 168, 76, 0.3);
    position: relative;
}
.meander-strip::before, .meander-strip::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid var(--c-gold);
    transform: translateY(-50%) rotate(45deg);
    background: var(--c-obsidian);
}
.meander-strip::before { left: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.meander-strip::after  { display: none; }


/* =====================================================================
   15. Archive (ledger)
   ===================================================================== */

.archive-list {
    list-style: none;
    margin: 2em 0;
    padding: 0;
    counter-reset: arc;
}

.archive-row {
    display: grid;
    grid-template-columns: 130px 1.6fr 1fr 1fr;
    gap: 18px;
    padding: 1em 0.8em;
    border-bottom: 1px solid rgba(201, 168, 76, 0.18);
    transition: background-color 240ms ease-out, padding-left 240ms ease-out;
    align-items: baseline;
}

.archive-row:hover {
    background: rgba(45, 107, 79, 0.18);
    padding-left: 1.4em;
}

.archive-row:first-child { border-top: 1px solid rgba(201, 168, 76, 0.18); }

.archive-num {
    font-family: var(--f-mono);
    color: var(--c-gold);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.archive-title {
    font-family: var(--f-serif);
    color: var(--c-champagne);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-style: italic;
    font-weight: 500;
}

.archive-medium {
    font-family: var(--f-body);
    color: var(--c-stone);
    font-size: 0.92rem;
    line-height: 1.4;
}

.archive-frame {
    font-family: var(--f-mono);
    color: var(--c-brass);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.archive-row-rare .archive-num { color: var(--c-ruby); }
.archive-row-rare .archive-title { color: var(--c-ruby); }

@media (max-width: 820px) {
    .archive-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}


/* =====================================================================
   16. Colophon
   ===================================================================== */

.colophon-text {
    font-family: var(--f-body);
    color: var(--c-stone);
    line-height: 1.7;
    text-align: center;
    max-width: 70ch;
    margin: 1.4em auto;
}

.colophon-text em { color: var(--c-champagne); }

.colophon-fineprint {
    font-family: var(--f-serif);
    font-size: 1rem;
    color: var(--c-champagne);
}
.colophon-fineprint .metadata-line {
    display: block;
    margin-bottom: 0.2em;
    color: var(--c-gold);
}

.swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid var(--c-gold);
    vertical-align: -2px;
    margin: 0 4px 0 6px;
    transform: rotate(45deg);
}

.seal {
    width: 130px;
    height: 130px;
    margin: 3em auto 1.2em auto;
}
.seal svg { width: 100%; height: 100%; }
.seal-svg { animation: seal-slow-spin 120s linear infinite; transform-origin: center; }
@keyframes seal-slow-spin { to { transform: rotate(360deg); } }

.colophon-foot {
    text-align: center;
    margin-top: 1.2em;
}


/* =====================================================================
   17. Reduce padding adjustments / final polish
   ===================================================================== */

@media (max-width: 720px) {
    .vitrine {
        padding: clamp(60px, 9vh, 100px) clamp(20px, 4vw, 40px);
    }
    .vitrine-recessed {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .cabinet { padding-top: calc(var(--frame-inset) + 70px); }
    .index-plate { padding: 0 10px; gap: 10px; }
}