/* =====================================================================
   polish.css — additive visual refinement layer
   Loaded AFTER style.css. Contains no content changes and no layout
   restructuring; safe to remove wholesale to revert.
   Sections:
     1. Browser chrome (selection, scrollbar, focus)
     2. Typography & ink details (drop caps, numerals, letterpress)
     3. Animated link underlines
     4. Sticky glass navigation (paired with js/polish.js)
     5. Light & atmosphere (hero vignette, gold sheen)
     6. Structural ornament (section glyphs, card corner ticks,
        chronicle date stamps, book-plate slider framing)
     7. Cross-document page fades
     8. Paper-grain atmosphere
     9. Reduced-motion guards
   ===================================================================== */


/* =====================================================
   1. BROWSER CHROME
   ===================================================== */

::selection {
    background: var(--accent-gold);
    color: var(--bg-dark);
    text-shadow: none;
}

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 160, 89, 0.35) #0c0b09;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0c0b09;
}

::-webkit-scrollbar-thumb {
    background: rgba(197, 160, 89, 0.3);
    border: 2px solid #0c0b09;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(197, 160, 89, 0.55);
}

:focus-visible {
    outline: 1px solid var(--accent-gold);
    outline-offset: 3px;
    border-radius: 1px;
}

/* Monocle cursor on interactive lore elements.
   Descendants included: codex records wrap their content in an <a> permalink
   whose default cursor would otherwise override the inherited monocle, leaving
   it visible only on the card's thin uncovered edges. */
.wing-card,
.wing-card *,
.codex-record,
.codex-record * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23c5a059' stroke-width='2'/%3E%3Cline x1='18.5' y1='18.5' x2='27' y2='27' stroke='%23c5a059' stroke-width='2'/%3E%3C/svg%3E") 12 12, pointer;
}


/* =====================================================
   2. TYPOGRAPHY & INK DETAILS
   ===================================================== */

/* Old-style numerals + discretionary ligatures on serif display text */
.main-title,
.section-title,
.codex-title,
.chronicle-title,
.page-header h1,
.record-header h2,
.entry-header h2,
.about-section h2,
.modal-header h2,
.modal-body h3,
.preview-header h3 {
    font-feature-settings: "onum" 1, "liga" 1, "dlig" 1;
}

/* Letterpress depth on large serif headings */
.main-title,
.section-title,
.codex-title,
.chronicle-title,
.page-header h1 {
    text-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.65),
        0 2px 24px rgba(197, 160, 89, 0.10);
}

/* Illuminated drop caps on lead-in prose */
.premise-block > p:first-of-type::first-letter,
.modal-body > p:first-of-type::first-letter,
.codex-intro::first-letter,
.chronicle-intro::first-letter {
    font-family: 'Crimson Pro', serif;
    float: left;
    font-size: 3.3em;
    line-height: 0.8;
    padding: 0.06em 0.14em 0 0;
    color: var(--accent-gold);
    font-weight: 400;
    font-style: normal;
}


/* =====================================================
   3. ANIMATED LINK UNDERLINES (pen-stroke draw-in)
   ===================================================== */

.nav-links a,
.footer-nav a,
.read-more,
.chronicle-link {
    position: relative;
}

.nav-links a::after,
.footer-nav a::after,
.read-more::after,
.chronicle-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--accent-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav-links a:hover::after,
.nav-links a.active::after,
.footer-nav a:hover::after,
.read-more:hover::after,
.chronicle-link:hover::after {
    transform: scaleX(1);
}

/* The draw-in replaces the old border/padding hover on these two */
.read-more,
.chronicle-link {
    border-bottom: none;
}

.read-more:hover,
.chronicle-link:hover {
    border-bottom: none;
    padding-left: 0;
}


/* =====================================================
   4. STICKY GLASS NAVIGATION (toggled by js/polish.js)
   ===================================================== */

@media (min-width: 601px) {
    body.nav-scrolled .top-nav {
        position: fixed;
        top: 0;
        left: 0;
        padding: 1.1rem 3rem;
        background: rgba(10, 10, 12, 0.82);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        backdrop-filter: blur(14px) saturate(1.2);
        border-bottom: 1px solid var(--border-warm);
        z-index: 100;
        animation: navDrop 0.35s ease;
    }

    body.nav-scrolled .studio-logo {
        opacity: 0.85;
    }
}

@keyframes navDrop {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}


/* =====================================================
   5. LIGHT & ATMOSPHERE
   ===================================================== */

/* Candlelit vignette over the hero */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
            transparent 52%,
            rgba(5, 4, 3, 0.55) 100%);
    pointer-events: none;
    z-index: 0;
}

.scroll-indicator {
    z-index: 2;
}

/* Gold-leaf sheen sweeping across highlighted serif text (~every 9s) */
.highlight {
    background: linear-gradient(110deg,
            var(--accent-gold) 0%,
            var(--accent-gold) 42%,
            #f3ddab 50%,
            var(--accent-gold) 58%,
            var(--accent-gold) 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldSheen 9s ease-in-out infinite;
}

@keyframes goldSheen {
    0% {
        background-position: 110% 0;
    }
    14% {
        background-position: -40% 0;
    }
    100% {
        background-position: -40% 0;
    }
}

/* Images inside lore modals rest in sepia, wake to full color */
.modal-body img {
    filter: sepia(0.35) saturate(0.85);
    transition: filter 0.6s ease;
}

.modal-body img:hover {
    filter: none;
}


/* =====================================================
   6. STRUCTURAL ORNAMENT
   ===================================================== */

/* Chapter glyph above major section titles */
.section-title::before {
    content: '\2756'; /* ❖ */
    display: block;
    font-family: 'Crimson Pro', serif;
    font-size: 0.95rem;
    letter-spacing: 0;
    color: var(--accent-gold);
    opacity: 0.45;
    margin-bottom: 1.2rem;
}

/* Fleuron resting on the divider line between About sections */
.about-section {
    position: relative;
}

.about-section:not(:last-child)::after {
    content: '\2767'; /* ❧ */
    position: absolute;
    bottom: -0.72em;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Crimson Pro', serif;
    font-size: 1.1rem;
    color: var(--accent-gold);
    opacity: 0.5;
    background: var(--bg-dark);
    padding: 0 1.2rem;
    line-height: 1;
}

/* Draft crop-marks in the corners of lore cards */
.wing-card,
.codex-record,
.pillar {
    background-image:
        linear-gradient(rgba(197, 160, 89, 0.35), rgba(197, 160, 89, 0.35)),
        linear-gradient(rgba(197, 160, 89, 0.35), rgba(197, 160, 89, 0.35)),
        linear-gradient(rgba(197, 160, 89, 0.35), rgba(197, 160, 89, 0.35)),
        linear-gradient(rgba(197, 160, 89, 0.35), rgba(197, 160, 89, 0.35)),
        linear-gradient(rgba(197, 160, 89, 0.35), rgba(197, 160, 89, 0.35)),
        linear-gradient(rgba(197, 160, 89, 0.35), rgba(197, 160, 89, 0.35)),
        linear-gradient(rgba(197, 160, 89, 0.35), rgba(197, 160, 89, 0.35)),
        linear-gradient(rgba(197, 160, 89, 0.35), rgba(197, 160, 89, 0.35));
    background-repeat: no-repeat;
    background-size:
        14px 1px, 1px 14px,   /* top-left */
        14px 1px, 1px 14px,   /* top-right */
        14px 1px, 1px 14px,   /* bottom-left */
        14px 1px, 1px 14px;   /* bottom-right */
    background-position:
        left 6px top 6px, left 6px top 6px,
        right 6px top 6px, right 6px top 6px,
        left 6px bottom 6px, left 6px bottom 6px,
        right 6px bottom 6px, right 6px bottom 6px;
}

/* NOTE: style.css hover rules use the `background:` shorthand, which resets
   background-size/repeat/position. Re-declare all longhands here so the
   brighter ticks stay 14px corner marks instead of flood-filling the card. */
.wing-card:hover,
.codex-record:hover,
.pillar:hover {
    background-image:
        linear-gradient(rgba(226, 192, 125, 0.75), rgba(226, 192, 125, 0.75)),
        linear-gradient(rgba(226, 192, 125, 0.75), rgba(226, 192, 125, 0.75)),
        linear-gradient(rgba(226, 192, 125, 0.75), rgba(226, 192, 125, 0.75)),
        linear-gradient(rgba(226, 192, 125, 0.75), rgba(226, 192, 125, 0.75)),
        linear-gradient(rgba(226, 192, 125, 0.75), rgba(226, 192, 125, 0.75)),
        linear-gradient(rgba(226, 192, 125, 0.75), rgba(226, 192, 125, 0.75)),
        linear-gradient(rgba(226, 192, 125, 0.75), rgba(226, 192, 125, 0.75)),
        linear-gradient(rgba(226, 192, 125, 0.75), rgba(226, 192, 125, 0.75));
    background-repeat: no-repeat;
    background-size:
        14px 1px, 1px 14px,   /* top-left */
        14px 1px, 1px 14px,   /* top-right */
        14px 1px, 1px 14px,   /* bottom-left */
        14px 1px, 1px 14px;   /* bottom-right */
    background-position:
        left 6px top 6px, left 6px top 6px,
        right 6px top 6px, right 6px top 6px,
        left 6px bottom 6px, left 6px bottom 6px,
        right 6px bottom 6px, right 6px bottom 6px;
}

/* Chronicle date as a library catalog stamp */
.entry-date,
.preview-header .entry-date {
    display: inline-block;
    border: 1px solid rgba(197, 160, 89, 0.35);
    padding: 0.35rem 0.85rem;
    transform: rotate(-1.3deg);
    color: var(--accent-gold);
    opacity: 0.7;
    margin-bottom: 1.2rem;
}

/* Book-plate framing for the Monocle field demonstration */
.reality-comparison {
    box-shadow:
        0 0 0 10px rgba(20, 17, 13, 0.95),
        0 0 0 11px rgba(197, 160, 89, 0.25),
        0 22px 55px rgba(0, 0, 0, 0.55);
}

.reality-slider-container::after {
    content: 'FIG. I \2014 THE MONOCLE, FIELD DEMONSTRATION';
    display: block;
    text-align: center;
    margin-top: 2.2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.32rem;
    color: var(--accent-gold);
    opacity: 0.45;
}


/* =====================================================
   7. CROSS-DOCUMENT PAGE FADES
   ===================================================== */

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 280ms;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    ::view-transition-old(root) {
        animation-name: archivePageFadeOut;
    }

    ::view-transition-new(root) {
        animation-name: archivePageFadeIn;
    }
}

@keyframes archivePageFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes archivePageFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* =====================================================
   8. PAPER-GRAIN ATMOSPHERE
   ===================================================== */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23grain)' opacity='0.62'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.045;
    mix-blend-mode: soft-light;
}

.site-wrapper,
.site-footer {
    position: relative;
    z-index: 1;
}


/* =====================================================
   9. REDUCED-MOTION GUARDS
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
    .highlight {
        animation: none;
        background-position: 100% 0;
    }

    body.nav-scrolled .top-nav {
        animation: none;
    }

    .nav-links a::after,
    .footer-nav a::after,
    .read-more::after,
    .chronicle-link::after {
        transition: none;
    }

    .scroll-indicator {
        animation: none;
    }
}


/* =====================================================
   10. THE SITE-WIDE MONOCLE
   Nav toggle → a fixed circular lens that tracks the cursor, dissolving the
   painted page into the sepia Underdrawing beneath it (backdrop-filter, no DOM
   clone) and revealing Gold Leaf lore fragments clipped to its circle.
   Position is driven by --mono-x / --mono-y (px), set in js/polish.js.
   ===================================================== */

/* Toggle button in the top nav — brass monocle glyph (matches the §1 cursor) */
.monocle-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 3rem;
    padding: 0.3rem;
    background: transparent;
    border: none;
    color: var(--accent-gold);
    opacity: 0.5;
    cursor: pointer;
    line-height: 0;
    transition: opacity 0.3s ease, color 0.3s ease, filter 0.3s ease;
}

.monocle-toggle:hover {
    opacity: 1;
}

.monocle-toggle[aria-pressed="true"] {
    opacity: 1;
    color: var(--accent-gold-bright);
    filter: drop-shadow(0 0 6px rgba(197, 160, 89, 0.7));
}

/* The lens — sepia glass; only visible while the Monocle is active. */
.monocle-lens {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    transform: translate(calc(var(--mono-x, 50vw) - 120px), calc(var(--mono-y, 50vh) - 120px));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 9000;
    border: 3px solid var(--accent-gold);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.55),
        inset 0 0 45px rgba(20, 14, 4, 0.65),
        0 0 26px rgba(197, 160, 89, 0.45);
    -webkit-backdrop-filter: sepia(0.95) contrast(1.25) brightness(0.92) saturate(0.6);
    backdrop-filter: sepia(0.95) contrast(1.25) brightness(0.92) saturate(0.6);
    will-change: transform;
}

body.monocle-active .monocle-lens {
    opacity: 1;
    visibility: visible;
}

/* Gold Leaf Illuminations — fixed full-viewport marginalia, revealed ONLY
   inside the lens via clip-path. Sweep the page to discover them. */
.monocle-illumination {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8999;
    opacity: 0;
    visibility: hidden;
    clip-path: circle(116px at var(--mono-x, 50vw) var(--mono-y, 50vh));
}

body.monocle-active .monocle-illumination {
    opacity: 1;
    visibility: visible;
}

.monocle-illumination .gold-fragment {
    position: absolute;
    max-width: 230px;
    margin: 0;
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: 0.02rem;
    color: var(--accent-gold-bright);
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.55);
}

/* Motion-OK: a faint living glow on the rim. */
@media (prefers-reduced-motion: no-preference) {
    body.monocle-active .monocle-lens {
        animation: monoclePulse 3.2s ease-in-out infinite;
    }

    @keyframes monoclePulse {
        0%, 100% {
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.55),
                inset 0 0 45px rgba(20, 14, 4, 0.65),
                0 0 22px rgba(197, 160, 89, 0.4);
        }
        50% {
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.55),
                inset 0 0 45px rgba(20, 14, 4, 0.65),
                0 0 34px rgba(197, 160, 89, 0.6);
        }
    }
}

/* Reduced-motion: no rim pulse. The lens still snaps to the cursor (js handles
   the instant follow); the Monocle remains fully functional. */
@media (prefers-reduced-motion: reduce) {
    body.monocle-active .monocle-lens {
        animation: none;
    }
}


/* =====================================================
   11. GALLERY PLATES
   Book-plate framing (matching the Monocle demo's .reality-comparison) +
   the sepia-to-color hover language from the lore-modal images (§ above).
   ===================================================== */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3.5rem 2.5rem;
    margin-top: 2rem;
}

.gallery-plate {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.gallery-plate .plate-frame {
    position: relative;
    overflow: hidden;
    background: rgba(20, 17, 13, 0.95);
    box-shadow:
        0 0 0 10px rgba(20, 17, 13, 0.95),
        0 0 0 11px rgba(197, 160, 89, 0.25),
        0 18px 45px rgba(0, 0, 0, 0.5);
    /* .plate-frame is a <button> (lightbox trigger) — reset UA chrome so it
       reads as the plate it frames; keyboard focus uses the gold :focus-visible
       ring from §1. */
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.gallery-plate img {
    display: block;
    width: 100%;
    height: auto;
    /* Rest in sepia, wake to full color — same language as lore-modal images. */
    filter: sepia(0.4) saturate(0.85);
    transition: filter 0.6s ease, transform 0.6s ease;
}

.gallery-plate:hover img,
.gallery-plate:focus-within img {
    filter: none;
    transform: scale(1.02);
}

.gallery-plate figcaption {
    margin-top: 1.6rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.28rem;
    text-transform: uppercase;
    color: var(--accent-gold);
    opacity: 0.55;
    text-align: center;
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    .gallery-plate img {
        transition: filter 0.3s ease;
    }

    .gallery-plate:hover img,
    .gallery-plate:focus-within img {
        transform: none;
    }
}

/* Lightbox — a native <dialog> (same pattern/backdrop language as the site
   modal). One shared instance; image + caption swapped on open. */
.lightbox {
    max-width: 92vw;
    max-height: 92vh;
    margin: auto;
    padding: 0;
    border: 1px solid var(--accent-gold);
    border-radius: 4px;
    background: linear-gradient(145deg, #1a1816 0%, #0f0e0d 100%);
    color: var(--text-white);
    overflow: visible;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.lightbox::backdrop {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.lightbox-figure {
    margin: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-figure picture {
    display: block;
    line-height: 0;
}

.lightbox-figure img {
    display: block;
    max-width: 88vw;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.lightbox-figure figcaption {
    margin-top: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.28rem;
    text-transform: uppercase;
    color: var(--accent-gold);
    opacity: 0.72;
    text-align: center;
}

.lightbox-close {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    border: 1px solid var(--accent-gold);
    border-radius: 50%;
    color: var(--accent-gold);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s ease, background 0.3s ease;
}

.lightbox-close:hover {
    background: var(--accent-gold);
    color: var(--bg-dark);
}

/* Open fade only for motion-OK users (mirrors the modal's guarded animation). */
@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] {
        animation: lightboxIn 0.3s ease;
    }

    @keyframes lightboxIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}


/* =====================================================
   12. PRESS FACT SHEET
   ===================================================== */

.fact-sheet {
    margin: 0 0 2rem;
    border-top: 1px solid var(--border-warm);
}

.fact-sheet div {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border-warm);
}

.fact-sheet dt {
    flex: 0 0 30%;
    min-width: 140px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: var(--accent-gold);
    opacity: 0.72;
    padding-top: 0.15rem;
}

.fact-sheet dd {
    flex: 1;
    min-width: 220px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    opacity: 0.85;
}

.press-assets-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.press-assets-list li {
    border: 1px solid var(--border-warm);
    background: rgba(255, 255, 255, 0.02);
    padding: 1.25rem 1.5rem;
    font-size: 0.95rem;
}

.press-assets-list a {
    color: var(--accent-gold);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.press-assets-list a:hover {
    border-color: var(--accent-gold);
}

.press-assets-list .asset-meta {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    color: var(--text-white);
    opacity: 0.5;
}