/* =============================================
   SPIRALIS AETERNA — Da Vinci Manuscript
   ============================================= */

:root{
    --ink:       #1a0e02;
    --ink-mid:   #2a1808;
    --ink-light: #3a2812;
    --ink-faded: #5a4830;
    --sepia:     #4a2a08;
    --gold:      #8a6a18;
    --red:       #6a1a08;
    --parch:     #d8c8a0;
    --ff:        'IM Fell English', serif;
    --ffi:       'IM Fell English', serif;
    --ffc:       'Cinzel Decorative', serif;
    --ffm:       'MedievalSharp', cursive;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
    font-family:var(--ff);
    background:url('parchment.png') center/cover fixed;
    color:var(--ink);
    line-height:1.85;
    font-size:19px;
    overflow-x:hidden;
}

::selection{background:var(--gold);color:#fff;}

/* =============================================
   DUST PARTICLES LAYER
   ============================================= */
.dust-layer{
    position:fixed;inset:0;z-index:100;
    pointer-events:none;
}

/* =============================================
   SCROLL PROGRESS
   ============================================= */
.scroll-progress{
    position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* =============================================
   THE MANUSCRIPT
   ============================================= */
.manuscript{
    max-width:100%;
    margin:0 auto;
    position:relative;
    z-index:2;
}

/* =============================================
   EACH PAGE
   ============================================= */
.page{
    position:relative;
    background:none;
    margin-bottom:0;
}

/* Random stains / aging */
.page-stain{
    position:absolute;pointer-events:none;border-radius:50%;z-index:1;
    mix-blend-mode:multiply;
}
.page-stain-1{
    width:200px;height:180px;top:10%;right:5%;
    background:radial-gradient(ellipse,rgba(120,80,30,0.08),transparent 70%);
}
.page-stain-2{
    width:160px;height:200px;bottom:15%;left:3%;
    background:radial-gradient(ellipse,rgba(90,70,40,0.06),transparent 70%);
}
.page-stain-3{
    width:240px;height:120px;top:50%;left:20%;
    background:radial-gradient(ellipse,rgba(100,80,30,0.05),transparent 70%);
}
.page-stain-4{
    width:180px;height:180px;top:5%;left:8%;
    background:radial-gradient(ellipse,rgba(80,60,20,0.07),transparent 65%);
}

/* Page content area */
.page-border{
    position:relative;z-index:2;
}
.page-border-inner{
    padding:80px 12%;
    position:relative;
    max-width:1400px;
    margin:0 auto;
}
.page-border-inner::before{display:none;}

/* =============================================
   TYPOGRAPHY
   ============================================= */
.drop-cap::first-letter{
    float:left;
    font-family:var(--ffc);
    font-size:58px;
    font-weight:400;
    line-height:0.75;
    margin:6px 10px 0 0;
    color:var(--red);
}

/* =============================================
   HERO PAGE
   ============================================= */
.page-hero{
    min-height:100vh;
    display:flex;
    align-items:stretch;
}
.page-hero .page-border{
    display:flex;flex:1;
}
.page-hero .page-border-inner{
    display:flex;flex:1;
    align-items:center;justify-content:center;
}

.hero-spiral-canvas{
    position:absolute;inset:0;width:100%;height:100%;
    opacity:0.07;pointer-events:none;z-index:0;
}

.hero-content{
    position:relative;z-index:2;text-align:center;
    max-width:800px;padding:40px 24px;
}

.hero-inscription{
    font-family:var(--ffc);font-size:14px;letter-spacing:6px;
    text-transform:uppercase;color:#6b5010;margin-bottom:32px;
    opacity:0;
    text-shadow:0 0 8px rgba(0,0,0,0.08);
}
.hero-title{
    font-family:var(--ffc);font-weight:700;line-height:1.2;margin-bottom:36px;
}
.hero-line{
    display:block;font-size:clamp(28px,5.5vw,52px);color:#0e0800;
    opacity:0;transform:translateY(20px);
    text-shadow:1px 1px 3px rgba(0,0,0,0.1);
}
.hero-nums{
    font-family:var(--ff);font-size:19px;font-style:italic;
    color:#1a0e02;letter-spacing:2px;
    padding:20px 0;margin-bottom:32px;
    border-top:2px solid rgba(80,50,10,0.3);
    border-bottom:2px solid rgba(80,50,10,0.3);
    opacity:0;
}
.hero-nums em{color:#6b5010;font-style:normal;font-weight:700;}

.hero-quote{
    font-style:italic;font-size:18px;color:#1a0e02;
    line-height:1.9;margin-bottom:40px;opacity:0;
}

/* =============================================
   VITRUVIAN INTERLUDE
   ============================================= */
/* vitruvian removed */

/* =============================================
   CHAPTER HEADERS
   ============================================= */
.chapter-header{text-align:center;margin-bottom:48px;}
.chapter-num{
    font-family:var(--ffc);font-size:11px;letter-spacing:6px;
    text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px;
}
.chapter-title{
    font-family:var(--ffc);font-size:clamp(22px,4vw,36px);
    font-weight:400;color:var(--ink);margin-bottom:8px;line-height:1.3;
}
.chapter-sub{font-style:italic;color:var(--ink-faded);font-size:16px;}
.chapter-rule{
    margin-top:16px;font-size:12px;color:var(--gold);
    display:flex;align-items:center;justify-content:center;gap:12px;
}
.chapter-rule::before,.chapter-rule::after{
    content:'';width:40px;height:1px;background:var(--gold);opacity:0.4;
}

/* =============================================
   PAGE DIVIDER
   ============================================= */
.page-divider{
    text-align:center;padding:48px 0;font-size:14px;color:var(--gold);
    display:flex;align-items:center;justify-content:center;gap:20px;
}
.page-divider::before,.page-divider::after{
    content:'';width:80px;height:1px;background:var(--gold);opacity:0.3;
}

/* =============================================
   MANIFEST ENTRIES
   ============================================= */
.manifest-entries{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px;}

.entry{
    display:flex;gap:16px;padding-bottom:28px;
    border-bottom:1px solid rgba(120,80,30,0.1);
}
.entry:last-child{border-bottom:none;padding-bottom:0;}
.entry-num{
    font-family:var(--ffc);font-size:20px;color:var(--gold);
    flex-shrink:0;padding-top:2px;opacity:0.6;
}
.entry-title{
    font-family:var(--ffi);font-size:20px;font-style:italic;
    color:var(--ink);margin-bottom:6px;
}
.entry-text{font-size:17px;color:var(--ink-mid);line-height:1.9;}

/* =============================================
   PHI DISPLAY
   ============================================= */
.phi-display{
    text-align:center;padding:24px 0 48px;
    display:flex;align-items:baseline;justify-content:center;
    gap:14px;flex-wrap:wrap;
}
.phi-letter{
    font-family:var(--ffc);font-size:clamp(56px,10vw,100px);
    color:var(--gold);line-height:1;
}
.phi-eq{font-size:clamp(24px,4vw,40px);color:var(--ink-faded);}
.phi-value{
    font-family:var(--ff);font-size:clamp(22px,4vw,36px);
    font-style:italic;color:var(--ink-mid);
}

.phi-props-row{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    border:1px solid rgba(120,80,30,0.15);margin-bottom:48px;
}
.phi-prop-item{
    padding:28px 20px;text-align:center;
    border-right:1px solid rgba(120,80,30,0.1);
}
.phi-prop-item:last-child{border-right:none;}
.prop-f{
    font-family:var(--ff);font-size:20px;font-style:italic;
    color:var(--sepia);margin-bottom:8px;
}
.phi-prop-item p{font-size:14px;color:var(--ink-light);line-height:1.7;}

/* =============================================
   MANUSCRIPT QUOTE
   ============================================= */
.manuscript-quote{
    margin:0 0 48px;padding:28px 32px;
    border-left:3px solid var(--red);
    background:rgba(120,80,30,0.03);
}
.manuscript-quote p{
    font-style:italic;font-size:18px;line-height:1.9;
    color:var(--ink-mid);margin-bottom:10px;
}
.manuscript-quote cite{
    font-family:var(--ffc);font-size:11px;letter-spacing:2px;
    color:var(--gold);font-style:normal;
}

/* =============================================
   PHI EXPLANATION
   ============================================= */
.phi-explanation{
    margin-bottom:48px;padding:32px 40px;
    background:rgba(120,80,30,0.03);
    border:1px solid rgba(120,80,30,0.1);
}
.phi-explanation h3{
    font-family:var(--ffc);font-size:18px;font-weight:400;
    color:var(--ink);margin-bottom:16px;
}
.phi-explanation p{
    font-size:17px;color:var(--ink-mid);line-height:1.9;
    margin-bottom:16px;
}
.phi-explanation p:last-child{margin-bottom:0;}

/* =============================================
   RATIO TABLE
   ============================================= */
.ratio-block{max-width:560px;margin:0 auto;}
.ratio-title{font-family:var(--ffc);font-size:18px;text-align:center;margin-bottom:4px;}
.ratio-sub{text-align:center;font-style:italic;color:var(--ink-faded);font-size:15px;margin-bottom:20px;}
.ratio-table{border:1px solid rgba(120,80,30,0.15);}
.ratio-row{
    display:grid;grid-template-columns:60px 28px 60px 1fr 110px;
    align-items:center;padding:8px 12px;
    border-bottom:1px solid rgba(120,80,30,0.12);
    font-size:17px;
}
.ratio-row:last-child{border-bottom:none;}
.ratio-a,.ratio-b{font-weight:400;color:#0e0800;text-align:center;}
.ratio-div{color:#5a4010;text-align:center;font-weight:700;}
.ratio-arrow{text-align:center;color:#2a1808;font-size:13px;}
.ratio-result{font-style:italic;color:#0e0800;text-align:right;font-variant-numeric:tabular-nums;font-weight:400;}

/* =============================================
   CHRONICLE ENTRIES
   ============================================= */
.chronicle-entries{display:grid;grid-template-columns:1fr 1fr;gap:36px 56px;}
.chr-entry{
    padding:0 0 24px 24px;
    border-left:1px solid rgba(120,80,30,0.2);
    position:relative;
}
.chr-entry::before{
    content:'';position:absolute;left:-4px;top:6px;
    width:7px;height:7px;border-radius:50%;background:var(--gold);
}
.chr-entry:last-child{padding-bottom:0;}
.chr-year{
    font-family:var(--ffc);font-size:11px;letter-spacing:3px;color:var(--gold);
    display:block;margin-bottom:2px;
}
.chr-entry h3{
    font-family:var(--ffi);font-size:20px;font-style:italic;
    color:var(--ink);margin-bottom:6px;font-weight:400;
}
.chr-entry p{font-size:16px;color:var(--ink-mid);line-height:1.85;}

/* =============================================
   ANATOMY
   ============================================= */
.anatomy-layout{
    display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
}
.anatomy-canvas-wrap{
    aspect-ratio:1;position:relative;
}
.anatomy-canvas-wrap canvas{width:100%;height:100%;}

.anatomy-notes{display:flex;flex-direction:column;gap:20px;}
.note{
    font-size:16px;color:var(--ink-mid);line-height:1.8;
    padding-left:12px;border-left:1px solid rgba(120,80,30,0.15);
}
.note em{
    font-family:var(--ffc);font-size:14px;color:var(--gold);
    font-style:normal;margin-right:6px;
}

.anatomy-deeper{
    margin-top:56px;padding:32px 40px;
    background:rgba(120,80,30,0.03);
    border:1px solid rgba(120,80,30,0.1);
}
.anatomy-deeper h3{
    font-family:var(--ffc);font-size:18px;font-weight:400;
    color:var(--ink);margin-bottom:16px;
}
.anatomy-deeper p{
    font-size:17px;color:var(--ink-mid);line-height:1.9;
    margin-bottom:16px;
}
.anatomy-deeper p:last-child{margin-bottom:0;}

/* =============================================
   FINALE
   ============================================= */
.finale-inner{text-align:center;padding-top:80px;padding-bottom:80px;}
.finale-latin{
    font-family:var(--ffc);font-size:12px;letter-spacing:6px;
    text-transform:uppercase;color:var(--gold);margin-bottom:16px;
}
.finale-title{
    font-family:var(--ffc);font-size:clamp(24px,5vw,42px);
    font-weight:400;color:var(--ink);margin-bottom:28px;line-height:1.3;
}
.finale-text{
    font-style:italic;font-size:18px;line-height:1.9;
    color:var(--ink-mid);margin-bottom:28px;
    max-width:760px;margin-left:auto;margin-right:auto;
}
.finale-sequence{
    font-size:15px;color:var(--ink-mid);letter-spacing:1px;
    opacity:1;margin-bottom:48px;word-break:break-all;
}

/* =============================================
   COLOPHON (FOOTER)
   ============================================= */
.colophon{
    text-align:center;padding:48px 24px;
    background:none;
}
.colophon-links{margin-bottom:20px;}
.colophon-twitter{
    font-family:var(--ffc);font-size:14px;letter-spacing:3px;
    text-transform:uppercase;color:var(--ink);text-decoration:none;
    border:1px solid rgba(80,50,10,0.3);padding:10px 28px;
    transition:all 0.3s;display:inline-block;
}
.colophon-twitter:hover{
    background:rgba(80,50,10,0.08);border-color:var(--gold);color:var(--gold);
}
.colophon-ca{
    margin-bottom:20px;display:flex;align-items:center;
    justify-content:center;gap:10px;flex-wrap:wrap;
}
.ca-label{
    font-family:var(--ffc);font-size:12px;letter-spacing:3px;
    text-transform:uppercase;color:var(--gold);
}
.ca-value{
    font-family:'Courier New',monospace;font-size:13px;
    color:var(--ink);word-break:break-all;
    background:rgba(80,50,10,0.06);padding:6px 12px;
    border:1px solid rgba(80,50,10,0.15);user-select:all;
}
.ca-copy{
    background:none;border:1px solid rgba(80,50,10,0.2);
    color:var(--ink-light);cursor:pointer;padding:5px 8px;
    font-size:16px;transition:all 0.3s;line-height:1;
}
.ca-copy:hover{border-color:var(--gold);color:var(--gold);}
.colophon p{
    font-family:var(--ffc);font-size:13px;letter-spacing:5px;
    text-transform:uppercase;color:var(--ink-light);
}
.colophon-latin{font-size:15px !important;letter-spacing:1px !important;text-transform:none !important;color:var(--ink) !important;font-weight:400;}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1100px){
    .manifest-entries{grid-template-columns:1fr;}
    .chronicle-entries{grid-template-columns:1fr;}
}
@media(max-width:900px){
    .page-border-inner{padding:40px 32px;}
    .phi-props-row{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:700px){
    .page-border-inner{padding:32px 20px;}
    .phi-props-row{grid-template-columns:1fr;}
    .phi-prop-item{border-right:none;border-bottom:1px solid rgba(120,80,30,0.1);}
    .phi-prop-item:last-child{border-bottom:none;}
    .anatomy-layout{grid-template-columns:1fr;}
    .phi-explanation,.anatomy-deeper{padding:24px 20px;}
    .entry{flex-direction:column;gap:4px;}
    .ratio-row{grid-template-columns:45px 22px 45px 1fr 85px;font-size:14px;}
}
@media(max-width:480px){
    body{font-size:16px;}
    .page-border{padding:12px;}
    .page-border-inner{padding:24px 16px;}
    .hero-content{padding:20px 0;}
}