/* ==========================================================================
   diplomatic.bar — Styles
   A skeuomorphic diplomatic dossier experience
   ========================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow: hidden;
    height: 100%;
}

body {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(15px, 1.8vw, 19px);
    line-height: 1.75;
    color: #2C1810;
    background: #0D0D0D;
    overflow: hidden;
    height: 100%;
}

/* --- SVG Grain Pattern for textures --- */
/* Defined inline via background-image data URIs */

/* ==========================================================================
   DESK SURFACE
   ========================================================================== */
#desk-surface {
    position: fixed;
    inset: 0;
    background:
        /* Wood grain pattern */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 40px,
            rgba(0,0,0,0.03) 40px,
            rgba(0,0,0,0.03) 41px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 7px,
            rgba(0,0,0,0.015) 7px,
            rgba(0,0,0,0.015) 8px
        ),
        repeating-linear-gradient(
            92deg,
            transparent,
            transparent 120px,
            rgba(100,60,30,0.06) 120px,
            rgba(100,60,30,0.06) 122px
        ),
        linear-gradient(135deg, #4A2C17 0%, #3D2414 50%, #4A2C17 100%);
    opacity: 0;
    transition: opacity 500ms ease;
}

#desk-surface.visible {
    opacity: 1;
}

/* Desk lamp spotlight */
#desk-lamp {
    position: fixed;
    inset: 0;
    background: radial-gradient(
        ellipse 60vw 55vh at 50% 40%,
        rgba(255, 240, 200, 0.12) 0%,
        rgba(255, 240, 200, 0.05) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   DOSSIER COVER
   ========================================================================== */
#dossier-cover {
    position: fixed;
    top: 5vh;
    left: 5vw;
    width: 90vw;
    height: 90vh;
    background:
        /* Leather grain noise */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%232C1810'/%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000' opacity='0.05'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23fff' opacity='0.03'/%3E%3Crect width='1' height='1' x='1' y='3' fill='%23000' opacity='0.04'/%3E%3Crect width='1' height='1' x='3' y='1' fill='%23fff' opacity='0.02'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 40% 30%, #3D2318 0%, #2C1810 60%, #1F120B 100%);
    border-radius: 4px;
    z-index: 100;
    transform-origin: left center;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 5px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    /* Initial state: off-screen, animated in */
    transform: translateY(100vh);
    opacity: 0;
}

#dossier-cover.cover-entered {
    transform: translateY(0);
    opacity: 1;
}

#dossier-cover.cover-opened {
    transform: perspective(2000px) rotateY(-160deg);
    opacity: 0;
    pointer-events: none;
}

/* Stitching border */
.cover-stitching {
    position: absolute;
    inset: 8px;
    border: 2px dashed #C9A84C;
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.6;
}

/* Corner reinforcements */
.cover-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #3D2318;
    pointer-events: none;
}

.cover-corner-tl {
    top: 4px;
    left: 4px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.cover-corner-tr {
    top: 4px;
    right: 4px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.cover-corner-bl {
    bottom: 4px;
    left: 4px;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.cover-corner-br {
    bottom: 4px;
    right: 4px;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* Cover content */
.cover-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
}

.cover-stamp-top {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(14px, 1.5vw, 20px);
    letter-spacing: 0.25em;
    color: #6B1520;
    text-transform: uppercase;
    transform: rotate(-3deg);
    margin-bottom: 24px;
    opacity: 0.85;
    /* Distressed stamp effect */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%23F5ECD7' opacity='0.3'/%3E%3C/svg%3E");
}

.cover-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(28px, 4.5vw, 64px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #C9A84C 0%, #E8D48B 40%, #C9A84C 60%, #E8D48B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.3));
    line-height: 1.2;
    /* Shimmer animation */
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 400ms ease;
}

.cover-title.shimmer {
    opacity: 1;
    animation: goldShimmer 1.5s ease-in-out;
}

@keyframes goldShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.cover-divider {
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C9A84C, transparent);
    margin: 20px auto;
    opacity: 0;
    transition: opacity 400ms ease 200ms;
}

.cover-title.shimmer ~ .cover-divider {
    opacity: 1;
}

.cover-subtitle {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(16px, 2vw, 28px);
    letter-spacing: 0.35em;
    color: #6B1520;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 400ms ease 400ms;
}

.cover-title.shimmer ~ .cover-subtitle {
    opacity: 0.9;
}

.cover-domain {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(18px, 2.5vw, 36px);
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #C9A84C, #E8D48B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 16px;
    opacity: 0;
    transition: opacity 400ms ease 500ms;
}

.cover-title.shimmer ~ .cover-domain {
    opacity: 1;
}

.cover-date {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(10px, 1vw, 14px);
    letter-spacing: 0.25em;
    color: #C9A84C;
    margin-top: 24px;
    opacity: 0;
    transition: opacity 400ms ease 600ms;
}

.cover-title.shimmer ~ .cover-date {
    opacity: 0.6;
}

/* Brass Clasp */
#brass-clasp {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 80px;
    cursor: pointer;
    z-index: 10;
}

.clasp-body {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #C9A84C 0%, #B8963F 40%, #E8D48B 60%, #C9A84C 100%);
    border-radius: 4px 8px 8px 4px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.3);
}

.clasp-latch {
    position: absolute;
    top: 30%;
    left: -8px;
    width: 16px;
    height: 30px;
    background: linear-gradient(180deg, #E8D48B, #C9A84C);
    border-radius: 3px;
    box-shadow: -1px 1px 4px rgba(0,0,0,0.3);
}

.clasp-tooltip {
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Caveat', cursive;
    font-size: 16px;
    color: #E8DCC8;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 400ms ease;
}

#dossier-cover.cover-entered .clasp-tooltip {
    animation: tooltipPulse 2s ease-in-out 1.8s forwards;
}

@keyframes tooltipPulse {
    0% { opacity: 0; }
    30% { opacity: 0.6; }
    70% { opacity: 0.6; }
    100% { opacity: 0.4; }
}

/* Clasp glint */
#dossier-cover.cover-entered .clasp-body {
    animation: claspGlint 600ms ease 1.4s;
}

@keyframes claspGlint {
    0% { box-shadow: 2px 2px 8px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.3); }
    50% { box-shadow: 2px 2px 8px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.3), 0 0 20px rgba(232,212,139,0.6); }
    100% { box-shadow: 2px 2px 8px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.3); }
}

/* ==========================================================================
   INTERIOR PAGES CONTAINER
   ========================================================================== */
#pages-container {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    opacity: 0;
    pointer-events: none;
    transition: opacity 600ms ease;
    z-index: 50;
}

#pages-container.active {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   DOSSIER PAGES
   ========================================================================== */
.dossier-page {
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

/* Page Tabs */
.page-tab {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    padding: 16px 4px;
    background: linear-gradient(180deg, #E8D5B0, #D4C4A0);
    border-radius: 0 6px 6px 0;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
    z-index: 10;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-tab span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(12px, 1.2vw, 16px);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #4A3728;
}

/* Page Surfaces */
.page-surface {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.page-linen {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='5' height='5' fill='%23F5ECD7'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%23000' opacity='0.015'/%3E%3Crect width='1' height='1' x='3' y='3' fill='%23000' opacity='0.01'/%3E%3C/svg%3E"),
        #F5ECD7;
}

.page-parchment {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='5' height='5' fill='%23E8D5B0'/%3E%3Crect width='1' height='1' x='2' y='0' fill='%23000' opacity='0.02'/%3E%3Crect width='1' height='1' x='0' y='3' fill='%23fff' opacity='0.02'/%3E%3C/svg%3E"),
        #E8D5B0;
}

/* Ruled lines on pages */
.page-ruled-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 31px,
        rgba(74, 55, 40, 0.06) 31px,
        rgba(74, 55, 40, 0.06) 32px
    );
    pointer-events: none;
}

/* ==========================================================================
   PAGE CONTENT LAYOUT
   ========================================================================== */
.page-content {
    display: flex;
    height: 100%;
    padding: 60px 60px 60px 0;
    position: relative;
    z-index: 2;
}

/* Margin Column (left 25%) */
.margin-column {
    width: 25%;
    min-width: 25%;
    padding: 40px 20px 40px 40px;
    position: relative;
    border-right: 1px solid rgba(74, 55, 40, 0.1);
}

/* Main Column */
.main-column {
    flex: 1;
    padding: 20px 60px 20px 40px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #C9A84C #F5ECD7;
}

.main-column::-webkit-scrollbar {
    width: 6px;
}

.main-column::-webkit-scrollbar-track {
    background: transparent;
}

.main-column::-webkit-scrollbar-thumb {
    background: #C9A84C;
    border-radius: 3px;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.page-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(22px, 3vw, 40px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #C9A84C, #E8D48B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.15));
    margin-bottom: 24px;
    line-height: 1.3;
}

.main-column p {
    margin-bottom: 18px;
    color: #2C1810;
}

.main-column strong {
    font-weight: 700;
    color: #1F120B;
}

/* ==========================================================================
   RUBBER STAMPS
   ========================================================================== */
.rubber-stamp {
    display: inline-block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(18px, 2.5vw, 32px);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 6px 20px;
    border: 3px solid;
    border-radius: 4px;
    margin-bottom: 16px;
    position: relative;
    /* Distressed texture overlay */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%23F5ECD7' opacity='0.25'/%3E%3Ccircle cx='6' cy='5' r='1' fill='%23F5ECD7' opacity='0.2'/%3E%3Ccircle cx='4' cy='7' r='0.8' fill='%23F5ECD7' opacity='0.3'/%3E%3C/svg%3E");
}

.stamp-red {
    color: #6B1520;
    border-color: #6B1520;
}

.stamp-blue {
    color: #1A3A5C;
    border-color: #1A3A5C;
}

/* ==========================================================================
   REDACTED TEXT
   ========================================================================== */
.redacted {
    display: inline;
    background: #0D0D0D;
    color: #0D0D0D;
    padding: 2px 6px;
    cursor: pointer;
    transition: background 400ms ease, color 400ms ease;
    border-radius: 1px;
}

.redacted.revealed,
.redacted:hover {
    background: transparent;
    color: #6B1520;
}

/* ==========================================================================
   ANNOTATIONS (Marginalia)
   ========================================================================== */
.annotation {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms ease, transform 600ms ease;
    position: relative;
}

.annotation.visible {
    opacity: 1;
    transform: translateY(0);
}

.annotation-line {
    width: 100%;
    height: 30px;
    margin-bottom: 4px;
}

.annotation-line path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 600ms ease-in-out;
}

.annotation.visible .annotation-line path {
    stroke-dashoffset: 0;
}

.annotation-text {
    display: block;
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(13px, 1.5vw, 17px);
    color: #1A3A5C;
    line-height: 1.4;
}

/* ==========================================================================
   PAPER-CLIPPED BLOCKS
   ========================================================================== */
.paper-clipped-block {
    position: relative;
    background: rgba(245, 236, 215, 0.7);
    border: 1px solid rgba(74, 55, 40, 0.12);
    padding: 28px 24px 20px;
    margin: 28px 0;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.06);
}

.page-parchment .paper-clipped-block {
    background: rgba(245, 236, 215, 0.85);
}

/* Paper Clip (CSS only) */
.paper-clip {
    position: absolute;
    top: -10px;
    left: 24px;
    width: 20px;
    height: 40px;
    z-index: 5;
}

.paper-clip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 4px;
    width: 12px;
    height: 34px;
    border: 2px solid #B8B8B8;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}

.paper-clip::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 6px;
    width: 8px;
    height: 30px;
    border: 2px solid #B8B8B8;
    border-radius: 0 0 4px 4px;
    border-top: none;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.clipped-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.25em;
    color: #4A3728;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.8;
}

.clipped-content p {
    font-size: clamp(13px, 1.4vw, 16px);
}

/* ==========================================================================
   COFFEE RING STAINS
   ========================================================================== */
.coffee-ring {
    position: absolute;
    border: 2px solid rgba(139, 100, 60, 0.12);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.coffee-ring::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(139, 100, 60, 0.06);
    border-radius: 50%;
}

/* ==========================================================================
   SIGNAL GRID (Page IV)
   ========================================================================== */
.signal-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 24px 0;
}

.signal-item {
    padding: 16px 20px;
    background: rgba(245, 236, 215, 0.5);
    border-left: 3px solid #C9A84C;
}

.signal-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(14px, 1.5vw, 20px);
    letter-spacing: 0.15em;
    color: #4A3728;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.signal-item p {
    font-size: clamp(14px, 1.5vw, 17px);
}

/* ==========================================================================
   PROTOCOL LIST
   ========================================================================== */
.protocol-list {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

.protocol-list li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(74, 55, 40, 0.08);
    color: #2C1810;
}

.protocol-list li:last-child {
    border-bottom: none;
}

/* ==========================================================================
   DISPATCH SEAL
   ========================================================================== */
.dispatch-seal {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
}

.large-wax-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 40% 35%, #8B2530 0%, #6B1520 60%, #4A0E16 100%);
    border-radius: 50%;
    clip-path: polygon(
        50% 0%, 58% 3%, 65% 1%, 72% 5%, 78% 3%,
        84% 8%, 88% 14%, 92% 10%, 95% 18%, 98% 25%,
        100% 32%, 97% 40%, 100% 48%, 98% 55%, 100% 62%,
        97% 70%, 100% 78%, 95% 82%, 92% 88%, 88% 85%,
        84% 92%, 78% 95%, 72% 92%, 65% 98%, 58% 95%,
        50% 100%, 42% 97%, 35% 100%, 28% 95%, 22% 98%,
        16% 92%, 12% 88%, 8% 92%, 5% 85%, 2% 78%,
        0% 70%, 3% 62%, 0% 55%, 2% 48%, 0% 40%,
        3% 32%, 0% 25%, 5% 18%, 8% 14%, 12% 10%,
        16% 5%, 22% 3%, 28% 6%, 35% 2%, 42% 4%
    );
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.large-wax-seal .seal-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #3A0A10;
    text-shadow: 0 1px 1px rgba(255,255,255,0.15), 0 -1px 1px rgba(0,0,0,0.4);
}

.dispatch-signature {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: #1A3A5C;
    margin-top: 16px;
    line-height: 1.5;
}

.dispatch-signature em {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 20px;
    background: linear-gradient(135deg, #C9A84C, #E8D48B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================================================
   WAX SEAL NAVIGATION
   ========================================================================== */
#wax-seal-nav {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}

#wax-seal-nav.active {
    opacity: 1;
    pointer-events: auto;
}

.seal-surface {
    width: 64px;
    height: 64px;
    background: radial-gradient(circle at 40% 35%, #8B2530 0%, #6B1520 60%, #4A0E16 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    clip-path: polygon(
        50% 0%, 58% 3%, 65% 1%, 72% 5%, 78% 3%,
        84% 8%, 88% 14%, 92% 10%, 95% 18%, 98% 25%,
        100% 32%, 97% 40%, 100% 48%, 98% 55%, 100% 62%,
        97% 70%, 100% 78%, 95% 82%, 92% 88%, 88% 85%,
        84% 92%, 78% 95%, 72% 92%, 65% 98%, 58% 95%,
        50% 100%, 42% 97%, 35% 100%, 28% 95%, 22% 98%,
        16% 92%, 12% 88%, 8% 92%, 5% 85%, 2% 78%,
        0% 70%, 3% 62%, 0% 55%, 2% 48%, 0% 40%,
        3% 32%, 0% 25%, 5% 18%, 8% 14%, 12% 10%,
        16% 5%, 22% 3%, 28% 6%, 35% 2%, 42% 4%
    );
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 200ms ease;
}

.seal-surface:hover {
    transform: scale(1.1);
}

.seal-numeral {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 20px;
    color: #3A0A10;
    text-shadow: 0 1px 1px rgba(255,255,255,0.15), 0 -1px 1px rgba(0,0,0,0.4);
}

/* Seal Radial Menu */
.seal-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 300ms ease, transform 300ms ease;
}

.seal-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.seal-menu-item {
    width: 42px;
    height: 42px;
    background: radial-gradient(circle at 40% 35%, #8B2530, #6B1520);
    border: none;
    border-radius: 50%;
    clip-path: polygon(
        50% 2%, 60% 5%, 68% 2%, 76% 7%, 82% 5%,
        88% 12%, 92% 18%, 95% 14%, 98% 22%, 100% 30%,
        98% 40%, 100% 50%, 98% 60%, 100% 70%, 98% 78%,
        92% 82%, 88% 88%, 82% 85%, 76% 92%, 68% 95%,
        60% 92%, 50% 98%, 40% 95%, 32% 98%, 24% 92%,
        18% 88%, 12% 92%, 8% 85%, 5% 78%, 2% 70%,
        0% 60%, 2% 50%, 0% 40%, 2% 30%, 5% 22%,
        8% 14%, 12% 10%, 18% 5%, 24% 7%, 32% 2%, 40% 5%
    );
    cursor: pointer;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 14px;
    color: #3A0A10;
    text-shadow: 0 1px 1px rgba(255,255,255,0.12), 0 -1px 1px rgba(0,0,0,0.3);
    transition: transform 200ms ease;
}

.seal-menu-item:hover {
    transform: scale(1.15);
}

.seal-menu-item.current {
    box-shadow: 0 0 0 2px #C9A84C;
}

/* ==========================================================================
   PAGE TRANSITION ANIMATIONS
   ========================================================================== */
.dossier-page {
    opacity: 0;
    transform: translateX(60px) translateY(10px);
    transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dossier-page.in-view {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Paper rustle effect */
@keyframes paperRustle {
    0% { transform: translateX(0); }
    25% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

.dossier-page.rustling {
    animation: paperRustle 100ms ease;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 900px) {
    .page-content {
        flex-direction: column;
        padding: 40px 20px;
    }

    .margin-column {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(74, 55, 40, 0.1);
        padding: 10px 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .annotation {
        margin-bottom: 10px;
    }

    .annotation-line {
        display: none;
    }

    .main-column {
        padding: 20px;
    }

    .page-tab {
        width: 28px;
        padding: 10px 2px;
    }
}

@media (max-width: 600px) {
    #dossier-cover {
        top: 2vh;
        left: 2vw;
        width: 96vw;
        height: 96vh;
    }

    #brass-clasp {
        right: 10px;
    }

    .cover-content {
        width: 90%;
    }

    .page-content {
        padding: 20px 10px;
    }
}