/* ==========================================================================
   Ornament layer — shared illumination details for every public page.
   Loaded after each page's own stylesheet so it refines, not replaces.
   Deliberately static: no new motion beyond simple colour/opacity fades.
   ========================================================================== */

:root {
    --gilt: #d4af37;
    --gilt-dim: rgba(212, 175, 55, 0.45);
    --gilt-faint: rgba(212, 175, 55, 0.22);
    --ink: #2b1d0e;
    --rubric: #8b2e2e;
    --leather-top: rgba(30, 21, 13, 0.97);
    --leather-bottom: rgba(15, 10, 7, 0.97);
    --font-ornament: 'Times New Roman', 'Noto Serif', serif;
}

::selection {
    background: rgba(139, 46, 46, 0.75);
    color: #f4e4bc;
}

/* Gilded scrollbar */
html {
    scrollbar-color: #6b5434 #120d09;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #120d09; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #4a3a24, #7a6040, #4a3a24);
    border: 2px solid #120d09;
}

:focus-visible {
    outline: 1px solid var(--gilt);
    outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Navigation — leather band with a double gilt rule beneath
   -------------------------------------------------------------------------- */
.site-header,
.site-nav {
    background: linear-gradient(180deg, var(--leather-top), var(--leather-bottom));
    border-bottom: 1px solid var(--gilt-dim);
    /* dark gap, then a second hairline: a scribe's double rule */
    box-shadow:
        0 3px 0 0 #140f0a,
        0 4px 0 0 var(--gilt-faint),
        0 10px 22px rgba(0, 0, 0, 0.45);
}

.site-header.is-scrolled {
    background: linear-gradient(180deg, rgba(30, 21, 13, 0.99), rgba(15, 10, 7, 0.99));
}

.logo {
    text-shadow:
        0 1px 0 #5c4310,
        0 2px 8px rgba(0, 0, 0, 0.7);
}

.nav-links li {
    position: relative;
}

/* Small lozenge between links */
.nav-links li + li::before {
    content: '◆';
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-ornament);
    font-size: 0.45rem;
    color: var(--gilt-dim);
    pointer-events: none;
}

/* Underline grows from the centre and fades at both ends */
.nav-links a::after {
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--gilt), transparent);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
    transform: scaleX(1);
}

.nav-links a.active {
    color: var(--gilt);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
}

@media (max-width: 830px) {
    .nav-links li + li::before {
        display: none;
    }

    /* Drawer as a leather panel bound with a gilt edge */
    .nav-links {
        background: linear-gradient(180deg, #1e150d, #0f0a07);
        border-left: 1px solid var(--gilt-dim);
        box-shadow:
            inset 4px 0 0 #140f0a,
            inset 5px 0 0 var(--gilt-faint),
            -6px 0 18px rgba(0, 0, 0, 0.6);
    }
}

/* Narrow phones: the blackletter logo otherwise collides with the menu toggle */
@media (max-width: 420px) {
    .main-nav {
        gap: 0.75rem;
    }

    .logo {
        font-size: 1.6rem;
    }
}

/* --------------------------------------------------------------------------
   Ornamental divider:  ———— ❦ ————
   <div class="orn-divider" aria-hidden="true"><span>❦</span></div>
   -------------------------------------------------------------------------- */
.orn-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: min(420px, 80%);
    margin: 0 auto;
    color: var(--gilt);
}

.orn-divider::before,
.orn-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gilt-dim));
    box-shadow: 0 3px 0 0 var(--gilt-faint);
}

.orn-divider::after {
    background: linear-gradient(90deg, var(--gilt-dim), transparent);
}

.orn-divider span {
    font-family: var(--font-ornament);
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.85;
}

/* On light parchment backgrounds: inked in darker gilt so it still reads */
.orn-divider--ink {
    color: #8b6a1e;
}

.orn-divider--ink::before {
    background: linear-gradient(90deg, transparent, rgba(110, 82, 30, 0.75));
    box-shadow: 0 3px 0 0 rgba(110, 82, 30, 0.3);
}

.orn-divider--ink::after {
    background: linear-gradient(90deg, rgba(110, 82, 30, 0.75), transparent);
    box-shadow: 0 3px 0 0 rgba(110, 82, 30, 0.3);
}

/* --------------------------------------------------------------------------
   Parchment slip — one notice for loading, empty and error states.
   Built by js/slip.js; static markup mirrors it where the page loads.
   -------------------------------------------------------------------------- */
.slip-wrap {
    grid-column: 1 / -1;
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 4rem 1rem;
}

.slip {
    position: relative;
    width: min(440px, 100%);
    padding: 2.6rem 2.4rem 2.2rem;
    text-align: center;
    color: var(--ink);
    background-color: #efe2c4;
    background-image:
        url('../asset/img/PaperTextureSeamless/parchment.webp'),
        linear-gradient(135deg, #f4e8d0 0%, #e6d6b4 100%);
    background-size: cover;
    background-blend-mode: multiply, normal;
    border: 1px solid #8b7355;
    box-shadow:
        inset 0 0 30px rgba(110, 82, 30, 0.18),
        0 10px 24px rgba(0, 0, 0, 0.35),
        0 3px 6px rgba(0, 0, 0, 0.25);
    transform: rotate(-0.6deg);
}

/* Ruled margin inside the slip */
.slip::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(74, 52, 28, 0.3);
    pointer-events: none;
}

/* Brass eyelet at the head, as if the slip were tied on */
.slip::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, #1a120b 0 3px, #d4af37 4px, #8b6a1e 6px, #5c4310 8px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
}

.slip-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-family: var(--font-ornament);
    font-size: 1.5rem;
    line-height: 1;
    color: #6e521e;
}

.slip-glyph::before,
.slip-glyph::after {
    content: '';
    flex: 0 1 70px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(110, 82, 30, 0.7));
    box-shadow: 0 3px 0 0 rgba(110, 82, 30, 0.25);
}

.slip-glyph::after {
    background: linear-gradient(90deg, rgba(110, 82, 30, 0.7), transparent);
}

.slip-title {
    margin: 1rem 0 0.4rem;
    font-family: 'RosmarinusText', serif;
    font-size: 2.4rem;
    font-weight: normal;
    line-height: 1.3;
    letter-spacing: 0.08em;
    color: #2c2416;
}

.slip-message {
    margin: 0.8rem 0 0;
    font-family: 'RosmarinusText', 'Crimson Text', serif;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #3d2f1f;
}

.slip-title + .slip-message {
    margin-top: 0.2rem;
}

.slip-detail {
    margin: 0.6rem 0 0;
    font-family: 'Crimson Text', serif;
    font-size: 0.95rem;
    font-style: italic;
    color: rgba(61, 47, 31, 0.7);
    word-break: break-word;
}

.slip-action {
    margin-top: 1.5rem;
    padding: 0.5rem 1.8rem;
    background: transparent;
    border: 1px solid var(--rubric);
    outline: 1px solid rgba(139, 46, 46, 0.35);
    outline-offset: 3px;
    font-family: 'RosmarinusText', serif;
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    color: var(--rubric);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.slip-action:hover {
    background: var(--rubric);
    color: #f4e4bc;
}

.slip-action:focus-visible {
    outline: 1px solid var(--rubric);
    outline-offset: 3px;
}

/* Loading: only the fleuron breathes, like ink drying */
.slip--loading .slip-glyph {
    animation: slip-ink 2.4s ease-in-out infinite alternate;
}

@keyframes slip-ink {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

/* Error: rubricated fleuron and a wax seal pressed into the corner */
.slip--error .slip-glyph {
    color: var(--rubric);
}

.slip--error .slip-glyph::before {
    background: linear-gradient(90deg, transparent, rgba(139, 46, 46, 0.6));
}

.slip--error .slip-glyph::after {
    background: linear-gradient(90deg, rgba(139, 46, 46, 0.6), transparent);
}

.slip--error:not(.slip--compact) {
    background-image:
        url('../asset/img/PaperTextureSeamless/waxSeal.png'),
        url('../asset/img/PaperTextureSeamless/parchment.webp'),
        linear-gradient(135deg, #f4e8d0 0%, #e6d6b4 100%);
    background-size: 54px 54px, cover, cover;
    background-position: right 14px bottom 14px, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-blend-mode: normal, multiply, normal;
}

/* Compact slip: tucked inside a card or list, no eyelet or tilt */
.slip-wrap--compact {
    padding: 1rem 0;
}

.slip--compact {
    width: min(360px, 100%);
    padding: 1.4rem 1.6rem 1.3rem;
    transform: none;
    box-shadow: inset 0 0 20px rgba(110, 82, 30, 0.15), 0 2px 6px rgba(0, 0, 0, 0.18);
}

.slip--compact::before {
    inset: 5px;
}

.slip--compact::after {
    display: none;
}

.slip--compact .slip-glyph {
    font-size: 1.1rem;
}

.slip--compact .slip-title {
    margin-top: 0.6rem;
    font-size: 1.6rem;
}

.slip--compact .slip-message {
    font-size: 1.15rem;
}

.slip--compact .slip-action {
    margin-top: 1rem;
    padding: 0.35rem 1.4rem;
    font-size: 1.1rem;
}

@media (max-width: 480px) {
    .slip {
        padding: 2.2rem 1.6rem 1.9rem;
    }

    .slip-title {
        font-size: 2rem;
    }

    /* Leave room under the button so the seal doesn't cover it */
    .slip--error:not(.slip--compact) {
        padding-bottom: 4.4rem;
        background-size: 46px 46px, cover, cover;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}