/* =====================================================
   diplomatic.quest — Classified Diplomatic Dossier
   Editorial · Card-Grid · Ripple-Only · Circuit-Trace
   Compliance vocabulary: #000 (institutional listing fictional reference number "PROTOCOLS 2026." Below (Google Interference Patterns: Signal Interludes: 3-4 IntersectionObserver` threshold detect when (high-contrast transitional maximum (text
   ===================================================== */

:root {
    /* Color Palette */
    --bg-primary: #f4f1eb;        /* parchment off-white */
    --card-surface: #ece8e0;      /* slightly deeper parchment */
    --dark-anchor: #1a1e2e;       /* midnight navy */
    --text-primary: #2c2a28;      /* warm near-black */
    --text-secondary: #7a756d;    /* muted warm gray */
    --accent: #c45a3c;            /* diplomatic vermillion */
    --circuit: #8b9eb3;           /* steel-blue */
    --ripple: #d4cec4;            /* warm ripple highlight */

    /* Typography Scale (fluid clamps) */
    --step-0: clamp(0.65rem, 0.8vw, 0.8rem);     /* monospace labels */
    --step-1: clamp(1rem, 1.2vw, 1.15rem);       /* body */
    --step-2: clamp(1.25rem, 1.6vw, 1.5rem);     /* sub-headlines */
    --step-3: clamp(2rem, 5vw, 4.5rem);          /* card headlines */
    --step-4: clamp(3rem, 7vw, 6rem);            /* dispatch numerals */
    --step-5: clamp(3.5rem, 9vw, 8rem);          /* hero title */

    /* Layout */
    --rail-width: 48px;
    --nav-height: 56px;
    --col-gap: clamp(16px, 2vw, 32px);
    --row-gap: clamp(20px, 2.5vw, 40px);
    --card-padding: clamp(24px, 3vw, 48px);
    --max-width: 1440px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: var(--step-1);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    padding-left: var(--rail-width);
}

/* =================== Margin Rail =================== */
.margin-rail {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--rail-width);
    height: 100vh;
    border-right: 1px solid var(--card-surface);
    background-color: var(--bg-primary);
    z-index: 50;
    pointer-events: none;
}

.rail-marker {
    position: absolute;
    left: 50%;
    transform-origin: left top;
    transform: translateX(-50%) rotate(-90deg);
    white-space: nowrap;
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step-0);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.rail-top {
    top: 50%;
    transform: translate(-50%, -100%) rotate(-90deg);
    transform-origin: left top;
    left: 36px;
    top: 50vh;
}

.rail-top {
    top: 35%;
}

.rail-bottom {
    top: 75%;
}

/* =================== Nav Bar =================== */
.nav-bar {
    position: fixed;
    top: 0;
    left: var(--rail-width);
    right: 0;
    height: var(--nav-height);
    background-color: var(--dark-anchor);
    z-index: 100;
    border-bottom: 1px solid rgba(196, 90, 60, 0.3);
}

.nav-inner {
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wordmark {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--bg-primary);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.wordmark::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--accent);
    margin-left: 4px;
    vertical-align: 2px;
}

.nav-link {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step-0);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg-primary);
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: border-color 280ms ease, color 280ms ease;
}

.nav-link:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

/* =================== Hero =================== */
.hero {
    background-color: var(--dark-anchor);
    color: var(--bg-primary);
    min-height: 85vh;
    padding: calc(var(--nav-height) + 60px) clamp(24px, 5vw, 80px) 80px;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid var(--accent);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(139, 158, 179, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 158, 179, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.hero-grid {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 56px);
    z-index: 1;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 3vw, 48px);
}

.meta-line {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step-0);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--circuit);
}

.hero-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: var(--step-5);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--bg-primary);
}

.hero-title .dot {
    color: var(--accent);
}

.hero-descriptor {
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--circuit);
    max-width: 60ch;
}

.hero-illustration {
    width: 60%;
    min-width: 320px;
    margin-top: clamp(20px, 3vw, 40px);
}

.circuit-hero {
    width: 100%;
    height: auto;
    display: block;
}

.hero-rule {
    height: 1px;
    background-color: var(--accent);
    width: 100%;
    margin-top: auto;
}

.hero-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

/* =================== Tessellation Divider =================== */
.tess-divider {
    height: 40px;
    margin: 80px 0;
    width: 100%;
    overflow: hidden;
}

.tess-pattern {
    width: 100%;
    height: 100%;
    display: block;
}

/* =================== Briefing / Card Grid =================== */
.briefing {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 60px);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--row-gap) var(--col-gap);
    grid-auto-flow: dense;
}

/* =================== Card Base =================== */
.card {
    background-color: var(--card-surface);
    padding: var(--card-padding);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    /* Initial state for ripple entrance */
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.4vw, 20px);
}

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

.card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--ripple) 0%, rgba(212, 206, 196, 0.6) 50%, transparent 100%);
    pointer-events: none;
    opacity: 0;
}

.card.is-revealed::before {
    animation: rippleExpand 600ms ease-out forwards;
}

@keyframes rippleExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.85;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

.card-tag {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step-0);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.card-headline {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: var(--step-3);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.card p {
    max-width: 65ch;
    margin-bottom: 1.25em;
}

.card p:last-of-type {
    margin-bottom: 0;
}

.card em {
    font-style: italic;
    color: var(--text-primary);
}

.card .emphasis {
    font-weight: 600;
    color: var(--text-primary);
}

.card .vermillion {
    color: var(--accent);
    font-style: italic;
}

/* =================== Communiqué Cards (2x1) =================== */
.communique-card {
    grid-column: span 2;
    grid-row: span 1;
    border-bottom: 2px solid var(--accent);
}

.communique-card.wide {
    grid-column: span 3;
}

/* =================== Signal Cards (1x1) =================== */
.signal-card {
    grid-column: span 1;
    grid-row: span 1;
    align-items: stretch;
    text-align: left;
}

.signal-illustration {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    min-height: 180px;
}

.signal-illustration svg {
    width: 100%;
    height: auto;
    max-width: 240px;
    display: block;
}

.signal-caption {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step-0);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-top: 1px solid rgba(122, 117, 109, 0.25);
    padding-top: 12px;
}

/* =================== Dispatch Cards (1x2) =================== */
.dispatch-card {
    grid-column: span 1;
    grid-row: span 2;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    background-color: var(--card-surface);
    min-height: 360px;
}

.dispatch-numeral {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    font-size: clamp(6rem, 15vw, 14rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    margin: auto 0;
}

.hairline {
    border: none;
    border-top: 1px solid var(--text-secondary);
    width: 60%;
    margin: 0;
    opacity: 0.5;
}

.dispatch-descriptor {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step-0);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

/* =================== Treaty Card (2x2) =================== */
.treaty-card {
    grid-column: span 4;
    grid-row: span 2;
    background-color: var(--dark-anchor);
    color: var(--bg-primary);
    padding: clamp(32px, 4vw, 64px);
    position: relative;
    /* Compass rose seal watermark via conic-gradients */
    background-image:
        conic-gradient(from 0deg at 50% 50%,
            rgba(244, 241, 235, 0.025) 0deg, transparent 22.5deg,
            rgba(244, 241, 235, 0.025) 45deg, transparent 67.5deg,
            rgba(244, 241, 235, 0.025) 90deg, transparent 112.5deg,
            rgba(244, 241, 235, 0.025) 135deg, transparent 157.5deg,
            rgba(244, 241, 235, 0.025) 180deg, transparent 202.5deg,
            rgba(244, 241, 235, 0.025) 225deg, transparent 247.5deg,
            rgba(244, 241, 235, 0.025) 270deg, transparent 292.5deg,
            rgba(244, 241, 235, 0.025) 315deg, transparent 337.5deg,
            rgba(244, 241, 235, 0.025) 360deg);
    background-color: var(--dark-anchor);
}

.treaty-card .treaty-tag {
    color: var(--accent);
}

.treaty-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
}

.treaty-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.treaty-svg {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
}

.treaty-text {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 24px);
}

.treaty-headline {
    color: var(--bg-primary);
}

.treaty-card p {
    color: var(--card-surface);
}

.treaty-meta {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step-0);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--circuit);
    border-top: 1px solid rgba(139, 158, 179, 0.25);
    padding-top: 16px;
    margin-top: 8px;
}

.treaty-card::before {
    background: radial-gradient(circle, rgba(212, 206, 196, 0.4) 0%, rgba(196, 90, 60, 0.15) 50%, transparent 100%);
}

/* =================== Archive Index =================== */
.archive-index {
    max-width: var(--max-width);
    margin: 60px auto 80px;
    padding: 0 clamp(24px, 4vw, 60px);
}

.archive-heading {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 32px;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 16px;
    width: fit-content;
}

.archive-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.archive-list li {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(122, 117, 109, 0.2);
    align-items: baseline;
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--step-0);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.archive-num {
    color: var(--accent);
    font-weight: 500;
}

.archive-name {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text-primary);
}

.archive-loc {
    color: var(--text-secondary);
}

/* =================== Footer =================== */
.archive-footer {
    background-color: var(--bg-primary);
    padding: clamp(80px, 10vw, 160px) clamp(24px, 4vw, 60px);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.archive-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        conic-gradient(from 0deg at 50% 50%,
            rgba(44, 42, 40, 0.05) 0deg, transparent 22.5deg,
            rgba(44, 42, 40, 0.05) 45deg, transparent 67.5deg,
            rgba(44, 42, 40, 0.05) 90deg, transparent 112.5deg,
            rgba(44, 42, 40, 0.05) 135deg, transparent 157.5deg,
            rgba(44, 42, 40, 0.05) 180deg, transparent 202.5deg,
            rgba(44, 42, 40, 0.05) 225deg, transparent 247.5deg,
            rgba(44, 42, 40, 0.05) 270deg, transparent 292.5deg,
            rgba(44, 42, 40, 0.05) 315deg, transparent 337.5deg,
            rgba(44, 42, 40, 0.05) 360deg);
    background-size: 600px 600px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    pointer-events: none;
}

.footer-block {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.footer-block .meta-line {
    color: var(--text-secondary);
}

/* =================== Responsive — Tablet =================== */
@media (max-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .communique-card {
        grid-column: span 2;
    }

    .communique-card.wide {
        grid-column: span 2;
    }

    .signal-card {
        grid-column: span 1;
    }

    .dispatch-card {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 240px;
    }

    .treaty-card {
        grid-column: span 2;
        grid-row: span 1;
    }

    .treaty-inner {
        grid-template-columns: 1fr;
    }

    body {
        padding-left: 36px;
    }

    :root {
        --rail-width: 36px;
    }
}

/* =================== Responsive — Mobile =================== */
@media (max-width: 640px) {
    .card-grid {
        grid-template-columns: 1fr;
    }

    .communique-card,
    .communique-card.wide,
    .signal-card,
    .dispatch-card,
    .treaty-card {
        grid-column: span 1;
        grid-row: span 1;
    }

    .dispatch-card {
        min-height: 200px;
    }

    body {
        padding-left: 28px;
    }

    :root {
        --rail-width: 28px;
    }

    .rail-marker {
        font-size: 0.55rem;
    }

    .hero {
        padding-top: calc(var(--nav-height) + 40px);
        padding-bottom: 60px;
    }

    .hero-illustration {
        width: 100%;
    }

    .nav-link {
        font-size: 0.6rem;
    }

    .archive-list li {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto;
    }

    .archive-loc {
        grid-column: 2;
    }
}