/* =========================================================
   cbdc.study - Styles
   Color Palette:
     Vault Black:       #0d0f0a
     Redaction Black:   #1a1c17
     Ledger Green:      #4a6741
     Institutional Gray:#6b7268
     Reserve Blue:      #2c4a6e
     Archival Gold:     #c9a84c
     Parchment:         #e8e0d0
   ========================================================= */

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

html {
    scroll-behavior: smooth;
    font-size: 18px;
    background-color: #0d0f0a;
}

body {
    background-color: #0d0f0a;
    color: #e8e0d0;
    font-family: 'Source Serif 4', 'Georgia', serif;
    line-height: 1.72;
    overflow-x: hidden;
}

/* ---- Vignette Overlay ---- */
#vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    background: radial-gradient(ellipse at center, transparent 50%, #0d0f0a 100%);
    opacity: 0.15;
}

/* ---- Opening Sequence ---- */
#opening-sequence {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 900;
    background-color: #0d0f0a;
    transition: opacity 1s ease-out;
}

#opening-sequence.fade-out {
    opacity: 0;
    pointer-events: none;
}

#opening-sequence.hidden {
    display: none;
}

#ledger-line-svg {
    width: 60%;
    height: 2px;
    overflow: visible;
    transition: transform 800ms ease-in-out;
}

#ledger-line-svg.rotate {
    transform: rotate(90deg) scaleX(2.5);
}

#ledger-line {
    stroke: #4a6741;
    stroke-width: 1.5;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

#ledger-line.draw {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.5s ease-out;
}

#opening-title {
    text-align: center;
    opacity: 0;
    transition: opacity 1.2s ease-out;
    margin-top: 2rem;
}

#opening-title.visible {
    opacity: 1;
}

#site-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 600;
    font-variant: small-caps;
    letter-spacing: 0.3em;
    font-size: clamp(2rem, 8vw, 6rem);
    color: #e8e0d0;
}

#site-subtitle {
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-style: italic;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    color: #e8e0d0;
    opacity: 0.6;
    margin-top: 0.5em;
    transition: opacity 1s ease-out 0.4s;
}

/* ---- Ledger Spine ---- */
#ledger-spine {
    position: fixed;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100vh;
    background-color: #4a6741;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    animation: spine-pulse 4s ease-in-out infinite;
}

#ledger-spine.visible {
    opacity: 1;
}

@keyframes spine-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

#ledger-spine.visible {
    animation: spine-pulse 4s ease-in-out infinite;
}

/* ---- Main Content ---- */
#main-content {
    opacity: 0;
    transition: opacity 1s ease-out;
    position: relative;
    z-index: 5;
    padding-top: 100vh;
}

#main-content.visible {
    opacity: 1;
}

/* ---- Table of Contents ---- */
#table-of-contents {
    max-width: 600px;
    margin: 0 auto;
    padding: 4rem 2rem 6rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

#table-of-contents.visible {
    opacity: 1;
    transform: translateY(0);
}

.toc-entry {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.8rem 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(74, 103, 65, 0.2);
    transition: all 0.3s ease-out;
}

.toc-entry:hover {
    padding-left: 0.5rem;
}

.toc-entry:hover .toc-numeral {
    color: #c9a84c;
}

.toc-entry:hover .toc-title {
    color: #e8e0d0;
}

.toc-numeral {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: #c9a84c;
    min-width: 2.5rem;
    letter-spacing: 0.05em;
}

.toc-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 600;
    font-variant: small-caps;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: #6b7268;
    flex: 1;
    transition: color 0.3s ease-out;
}

.toc-sparkline {
    width: 80px;
    height: 20px;
    opacity: 0.5;
}

.toc-sparkline path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.toc-entry.drawn .toc-sparkline path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.2s ease-out;
}

/* ---- Chapter Sections ---- */
.chapter {
    position: relative;
    padding: 0 2rem 6rem;
    margin-bottom: 2rem;
}

/* ---- Watermarks ---- */
.watermark {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 80%;
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    will-change: transform;
}

/* Eye of Providence - Chapter I */
.watermark-eye {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpolygon points='200,50 350,310 50,310' fill='none' stroke='%234a6741' stroke-width='2'/%3E%3Cellipse cx='200' cy='210' rx='70' ry='40' fill='none' stroke='%234a6741' stroke-width='2'/%3E%3Ccircle cx='200' cy='210' r='18' fill='none' stroke='%234a6741' stroke-width='2'/%3E%3Cline x1='200' y1='50' x2='200' y2='310' stroke='%234a6741' stroke-width='0.5' opacity='0.5'/%3E%3Cline x1='50' y1='310' x2='350' y2='310' stroke='%234a6741' stroke-width='0.5' opacity='0.5'/%3E%3C/svg%3E");
}

/* Network/Trust - Chapter II */
.watermark-network {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='120' fill='none' stroke='%234a6741' stroke-width='1.5'/%3E%3Ccircle cx='200' cy='200' r='80' fill='none' stroke='%234a6741' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='40' fill='none' stroke='%234a6741' stroke-width='0.8'/%3E%3Cline x1='200' y1='80' x2='200' y2='320' stroke='%234a6741' stroke-width='0.5'/%3E%3Cline x1='80' y1='200' x2='320' y2='200' stroke='%234a6741' stroke-width='0.5'/%3E%3Cline x1='115' y1='115' x2='285' y2='285' stroke='%234a6741' stroke-width='0.5'/%3E%3Cline x1='285' y1='115' x2='115' y2='285' stroke='%234a6741' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* Panopticon - Chapter III */
.watermark-panopticon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='150' fill='none' stroke='%234a6741' stroke-width='1.5'/%3E%3Ccircle cx='200' cy='200' r='30' fill='none' stroke='%234a6741' stroke-width='2'/%3E%3Cline x1='200' y1='200' x2='200' y2='50' stroke='%234a6741' stroke-width='0.8'/%3E%3Cline x1='200' y1='200' x2='330' y2='125' stroke='%234a6741' stroke-width='0.8'/%3E%3Cline x1='200' y1='200' x2='330' y2='275' stroke='%234a6741' stroke-width='0.8'/%3E%3Cline x1='200' y1='200' x2='200' y2='350' stroke='%234a6741' stroke-width='0.8'/%3E%3Cline x1='200' y1='200' x2='70' y2='275' stroke='%234a6741' stroke-width='0.8'/%3E%3Cline x1='200' y1='200' x2='70' y2='125' stroke='%234a6741' stroke-width='0.8'/%3E%3Crect x='175' y='35' width='50' height='30' fill='none' stroke='%234a6741' stroke-width='0.5'/%3E%3Crect x='310' y='110' width='50' height='30' fill='none' stroke='%234a6741' stroke-width='0.5'/%3E%3Crect x='310' y='260' width='50' height='30' fill='none' stroke='%234a6741' stroke-width='0.5'/%3E%3Crect x='175' y='335' width='50' height='30' fill='none' stroke='%234a6741' stroke-width='0.5'/%3E%3Crect x='40' y='260' width='50' height='30' fill='none' stroke='%234a6741' stroke-width='0.5'/%3E%3Crect x='40' y='110' width='50' height='30' fill='none' stroke='%234a6741' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* Globe - Chapter IV */
.watermark-globe {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='140' fill='none' stroke='%234a6741' stroke-width='1.5'/%3E%3Cellipse cx='200' cy='200' rx='60' ry='140' fill='none' stroke='%234a6741' stroke-width='0.8'/%3E%3Cellipse cx='200' cy='200' rx='100' ry='140' fill='none' stroke='%234a6741' stroke-width='0.5'/%3E%3Cline x1='60' y1='200' x2='340' y2='200' stroke='%234a6741' stroke-width='0.8'/%3E%3Cellipse cx='200' cy='140' rx='130' ry='20' fill='none' stroke='%234a6741' stroke-width='0.5'/%3E%3Cellipse cx='200' cy='260' rx='130' ry='20' fill='none' stroke='%234a6741' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* Fingerprint - Chapter V */
.watermark-fingerprint {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M200,80 C120,80 80,140 80,200 C80,280 140,340 200,340' fill='none' stroke='%234a6741' stroke-width='1.2'/%3E%3Cpath d='M200,100 C140,100 100,150 100,200 C100,270 150,320 200,320' fill='none' stroke='%234a6741' stroke-width='1'/%3E%3Cpath d='M200,120 C155,120 120,160 120,200 C120,255 155,300 200,300' fill='none' stroke='%234a6741' stroke-width='0.8'/%3E%3Cpath d='M200,140 C170,140 140,170 140,200 C140,240 170,280 200,280' fill='none' stroke='%234a6741' stroke-width='0.8'/%3E%3Cpath d='M200,160 C180,160 160,175 160,200 C160,230 180,260 200,260' fill='none' stroke='%234a6741' stroke-width='0.6'/%3E%3Cpath d='M200,80 C280,80 320,140 320,200 C320,280 260,340 200,340' fill='none' stroke='%234a6741' stroke-width='1.2'/%3E%3Cpath d='M200,100 C260,100 300,150 300,200 C300,270 250,320 200,320' fill='none' stroke='%234a6741' stroke-width='1'/%3E%3Cpath d='M200,120 C245,120 280,160 280,200 C280,255 245,300 200,300' fill='none' stroke='%234a6741' stroke-width='0.8'/%3E%3Cpath d='M200,140 C230,140 260,170 260,200 C260,240 230,280 200,280' fill='none' stroke='%234a6741' stroke-width='0.8'/%3E%3Cpath d='M200,160 C220,160 240,175 240,200 C240,230 220,260 200,260' fill='none' stroke='%234a6741' stroke-width='0.6'/%3E%3C/svg%3E");
}

/* Circuit - Chapter VI */
.watermark-circuit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M50,200 L150,200 L150,100 L250,100 L250,200 L350,200' fill='none' stroke='%234a6741' stroke-width='1'/%3E%3Cpath d='M200,50 L200,150 L300,150 L300,250 L200,250 L200,350' fill='none' stroke='%234a6741' stroke-width='1'/%3E%3Ccircle cx='150' cy='200' r='4' fill='%234a6741'/%3E%3Ccircle cx='250' cy='200' r='4' fill='%234a6741'/%3E%3Ccircle cx='200' cy='150' r='4' fill='%234a6741'/%3E%3Ccircle cx='200' cy='250' r='4' fill='%234a6741'/%3E%3Ccircle cx='150' cy='100' r='4' fill='%234a6741'/%3E%3Ccircle cx='250' cy='100' r='4' fill='%234a6741'/%3E%3Ccircle cx='300' cy='150' r='4' fill='%234a6741'/%3E%3Ccircle cx='300' cy='250' r='4' fill='%234a6741'/%3E%3C/svg%3E");
}

/* ---- Folio Header ---- */
.folio-header {
    display: flex;
    align-items: center;
    height: 64px;
    border-bottom: 1px solid #4a6741;
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    background-color: #0d0f0a;
    z-index: 50;
}

.folio-numeral {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: #c9a84c;
    letter-spacing: 0.05em;
    min-width: 3rem;
}

.folio-stamp {
    width: 32px;
    height: 32px;
    margin-right: 1rem;
    transition: transform 0.2s ease-out;
}

.folio-stamp.rotated {
    transform: rotate(15deg);
}

.folio-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 600;
    font-variant: small-caps;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    letter-spacing: 0.12em;
    color: #e8e0d0;
    flex: 1;
    text-align: center;
}

.folio-pages {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    color: #6b7268;
    letter-spacing: 0.04em;
    min-width: 4rem;
    text-align: right;
}

/* ---- Chapter Content (3-column) ---- */
.chapter-content {
    display: grid;
    grid-template-columns: 18% 1fr 18%;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---- Reading Column ---- */
.reading-column {
    max-width: 65ch;
    margin: 0 auto;
}

.reading-column p {
    text-indent: 1.5em;
    margin-bottom: 0;
}

.reading-column p:first-child {
    text-indent: 0;
}

.reading-column p + p {
    margin-top: 0;
}

/* ---- Marginalia ---- */
.margin-left,
.margin-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 1rem;
}

.marginalia {
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.3s ease-out;
}

.marginalia.slide-in-left {
    transform: translateX(-30px);
}

.marginalia.slide-in-right {
    transform: translateX(30px);
}

.marginalia.visible {
    opacity: 1;
    transform: translateX(0);
}

.margin-note {
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-style: italic;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #e8e0d0;
    opacity: 0.8;
    border-left: 2px solid #4a6741;
    padding-left: 0.6rem;
}

.margin-annotation {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    line-height: 1.55;
    color: #6b7268;
}

.margin-caption {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    color: #6b7268;
    letter-spacing: 0.04em;
    display: block;
    margin-top: 0.3rem;
}

.cross-ref {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: 0.7rem;
    color: #2c4a6e;
    cursor: pointer;
    transition: color 0.2s ease-out;
}

.cross-ref:hover {
    color: #c9a84c;
}

/* ---- Sparklines ---- */
.sparkline {
    width: 100%;
    max-height: 30px;
    display: block;
}

.sparkline path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 1.2s ease-out;
}

.sparkline.drawn path {
    stroke-dashoffset: 0;
}

.margin-underline-svg svg {
    width: 100%;
    height: auto;
}

.margin-underline-svg svg path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0.8s ease-out;
}

.marginalia.visible .margin-underline-svg svg path {
    stroke-dashoffset: 0;
}

/* ---- Redaction Blocks ---- */
.redacted {
    position: relative;
    cursor: pointer;
    display: inline;
}

.redacted::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -2px;
    right: -2px;
    bottom: -1px;
    background-color: #1a1c17;
    transition: opacity 0.6s ease-out;
    pointer-events: none;
}

.redacted:hover::after {
    opacity: 0;
}

.redacted:hover {
    color: #c9a84c;
    transition: color 0.1s ease-out 0.1s;
}

/* ---- Chapter End ---- */
.chapter-end {
    max-width: 1200px;
    margin: 4rem auto 2rem;
    position: relative;
    text-align: center;
}

.chapter-rule {
    border: none;
    border-top: 1px solid #4a6741;
    opacity: 0.4;
}

.declassified-stamp {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.5em;
    color: #6b7268;
    text-transform: uppercase;
    transform: rotate(-3deg);
    margin-top: 1rem;
    padding: 0.3em 1em;
    border: 1px solid rgba(107, 114, 104, 0.3);
}

/* ---- Colophon / Footer ---- */
#colophon {
    max-width: 600px;
    margin: 6rem auto 4rem;
    padding: 2rem;
    text-align: center;
    border-top: 1px solid rgba(74, 103, 65, 0.3);
}

.colophon-text {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-variant: small-caps;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    color: #6b7268;
    text-indent: 0;
}

.colophon-meta {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: 0.65rem;
    color: #6b7268;
    opacity: 0.6;
    margin-top: 0.5rem;
    text-indent: 0;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .chapter-content {
        grid-template-columns: 1fr;
    }

    .margin-left,
    .margin-right {
        display: none;
    }

    .reading-column {
        padding: 0 1rem;
    }

    .folio-header {
        padding: 0 0.5rem;
    }

    .folio-pages {
        display: none;
    }

    #ledger-spine {
        display: none;
    }

    #table-of-contents {
        padding: 2rem 1.5rem 4rem;
    }

    .toc-sparkline {
        display: none;
    }
}

@media (max-width: 600px) {
    html {
        font-size: 16px;
    }

    .folio-stamp {
        display: none;
    }

    .chapter {
        padding: 0 1rem 4rem;
    }
}