:root{
  --step-0:clamp(0.95rem,1.1vw,1.15rem);
  --step-1:clamp(1.1rem,1.5vw,1.4rem);
  --step-2:clamp(1.4rem,2.5vw,2.2rem);
  --step-3:clamp(2rem,4vw,3.5rem);
  --step-4:clamp(2.5rem,5.5vw,5rem);
  --step-5:clamp(3.5rem,8vw,7rem);
  --vellum:#F5F0E8;--parchment:#F8F4ED;--midnight:#1E1B2E;
  --graphite:#3A3640;--mauve:#8B8589;--sienna:#B5654A;
  --teal:#5A8B83;--gilt:#C4A35A;--lavender:#D8D0E0;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:var(--vellum);color:var(--graphite);font-family:'Source Serif 4',serif;font-weight:400;font-size:var(--step-0);line-height:1.65;overflow-x:hidden;letter-spacing:0.01em}

/* Noise overlay */
.noise-filter{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:0.03;z-index:9999}

/* Navigation */
.nav-bar{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;height:clamp(48px,6vh,64px);padding:0 clamp(16px,3vw,48px);background:rgba(245,240,232,0.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav-name{font-family:'DM Serif Display',serif;font-size:var(--step-1);color:var(--graphite)}
.nav-links{display:flex;gap:clamp(12px,2vw,24px)}
.nav-links a{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:clamp(0.7rem,0.9vw,0.85rem);letter-spacing:0.12em;text-transform:uppercase;color:var(--mauve);text-decoration:none;transition:color 0.3s ease}
.nav-links a:hover{color:var(--sienna)}

/* Title Folio */
.title-folio{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.network-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0.12}
.network-svg{width:80%;max-width:800px;animation:netDrift 30s linear infinite}
.net-node{fill:var(--teal)}
.net-edge{stroke:var(--mauve);stroke-width:1;opacity:0.4}
@keyframes netDrift{0%{transform:translate(0,0)}25%{transform:translate(10px,-8px)}50%{transform:translate(-5px,12px)}75%{transform:translate(8px,5px)}100%{transform:translate(0,0)}}
.folio-content{position:relative;z-index:2}
.folio-title{font-family:'DM Serif Display',serif;font-weight:400;font-size:var(--step-5);color:var(--graphite);letter-spacing:0.02em;line-height:1.1}
.folio-rule{margin:1.5rem auto;width:30%;height:1px;background:rgba(196,163,90,0.5);position:relative;display:flex;align-items:center;justify-content:center}
.ornament-lozenge{display:block;width:6px;height:6px;background:var(--gilt);transform:rotate(45deg);position:absolute}
.folio-subtitle{font-family:'Source Serif 4',serif;font-weight:300;font-size:var(--step-1);color:var(--mauve);letter-spacing:0.15em}

/* Chapter Dividers */
.chapter-divider{text-align:center;margin:clamp(32px,6vh,64px) auto;max-width:800px;position:relative}
.chapter-rule{border:none;height:1px;background:rgba(196,163,90,0.5);margin-bottom:1rem}
.chapter-rule--light{background:rgba(196,163,90,0.3)}
.chapter-number{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--mauve);border-radius:50%;font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:0.85rem;color:var(--mauve)}
.chapter-number--light{border-color:var(--lavender);color:var(--lavender)}

/* Section Headings */
.section-heading{font-family:'DM Serif Display',serif;font-weight:400;font-size:var(--step-3);color:var(--graphite);text-align:center;margin-bottom:clamp(24px,4vh,48px)}
.section-heading--light{color:var(--vellum)}

/* Codex Grid */
.codex-section{max-width:1000px;margin:0 auto;padding:0 clamp(16px,2.5vw,32px) clamp(48px,8vh,80px)}
.codex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px)}
.codex-card{background:var(--vellum);border:1px solid var(--mauve);padding:clamp(16px,2vw,24px);box-shadow:0 2px 8px rgba(58,54,64,0.08);transition:all 0.3s cubic-bezier(0.25,0.1,0.25,1)}
.codex-card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(58,54,64,0.12);border-color:var(--gilt);background:var(--parchment)}
.card-viz{height:60px;margin-bottom:12px;overflow:hidden}
.sparkline{width:100%;height:100%}
.spark-path{fill:none;stroke:var(--sienna);stroke-width:1.5;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 2s ease-out}
.codex-card.visible .spark-path{stroke-dashoffset:0}
.card-title{font-family:'DM Serif Display',serif;font-weight:400;font-size:var(--step-1);color:var(--graphite);margin-bottom:8px;line-height:1.2}
.card-desc{font-size:var(--step-0);color:var(--mauve);max-width:52ch;line-height:1.55}

/* Marginalia Grid */
.marginalia-section{max-width:1000px;margin:0 auto;padding:0 clamp(16px,2.5vw,32px) clamp(48px,8vh,80px)}
.marginalia-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(24px,3vw,48px);border-left:2px solid var(--teal);padding-left:clamp(16px,2vw,32px)}
.margin-main{position:relative}
.contour-bg{position:absolute;inset:0;opacity:0.1;pointer-events:none}
.contour-svg{width:100%;height:100%}
.contour{fill:none;stroke-width:1.5}
.c1{stroke:var(--teal);opacity:0.05}
.c2{stroke:var(--teal);opacity:0.08}
.c3{stroke:var(--teal);opacity:0.12}
.c4{stroke:var(--lavender);opacity:0.15}
.margin-title{font-family:'DM Serif Display',serif;font-weight:400;font-size:var(--step-2);color:var(--graphite);margin-bottom:1.5rem;position:relative}
.pull-quote{border-left:3px solid var(--sienna);background:var(--parchment);border-top:1px solid var(--lavender);border-right:1px solid var(--lavender);border-bottom:1px solid var(--lavender);padding:clamp(12px,2vw,24px);margin:2rem 0;position:relative}
.pull-quote p{font-family:'DM Serif Display',serif;font-style:italic;font-size:var(--step-2);color:var(--graphite);line-height:1.4}
.margin-main>p{margin-bottom:1em;max-width:52ch;color:var(--graphite);position:relative}
.margin-sidebar{display:flex;flex-direction:column;gap:clamp(12px,2vw,24px)}
.annotation{border-left:1px solid var(--lavender);padding-left:12px;font-size:0.85rem;color:var(--mauve)}
.annotation-num{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:0.7rem;color:var(--sienna);vertical-align:super;margin-right:4px}

/* Index Section */
.index-section{background:var(--midnight);padding:clamp(48px,8vh,80px) clamp(16px,2.5vw,32px);position:relative}
.index-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center top,#2A2640 0%,var(--midnight) 60%);pointer-events:none}
.index-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem 1rem;position:relative}
.index-entry{display:flex;align-items:center;gap:8px;padding:6px 0;position:relative;background-image:linear-gradient(var(--sienna),var(--sienna));background-size:0% 1px;background-position:bottom left;background-repeat:no-repeat;transition:background-size 0.3s ease}
.index-entry:hover{background-size:100% 1px}
.index-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-teal{background:var(--teal)}
.dot-sienna{background:var(--sienna)}
.dot-gilt{background:var(--gilt)}
.index-title{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:var(--step-0);color:var(--vellum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.index-desc{font-family:'IBM Plex Sans',sans-serif;font-weight:400;font-size:0.8rem;color:var(--mauve);margin-left:auto;white-space:nowrap}

/* Colophon */
.colophon-section{max-width:800px;margin:0 auto;padding:clamp(48px,8vh,80px) clamp(16px,3vw,48px);text-align:center}
.bookplate{display:inline-block;padding:4px;border:2px solid var(--gilt);margin-bottom:2rem}
.bookplate-inner{border:1px solid var(--mauve);padding:clamp(16px,3vw,32px) clamp(24px,4vw,48px)}
.bookplate-title{font-family:'DM Serif Display',serif;font-size:var(--step-3);color:var(--graphite)}
.bookplate-year{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:0.85rem;letter-spacing:0.12em;color:var(--mauve);margin:8px 0}
.bookplate-subtitle{font-family:'Source Serif 4',serif;font-weight:300;font-variant:small-caps;font-size:0.9rem;color:var(--mauve);letter-spacing:0.05em}
.colophon-text{font-family:'Source Serif 4',serif;font-weight:300;font-size:0.9rem;color:var(--mauve);max-width:48ch;margin:0 auto 2rem;line-height:1.7}
.return-top{display:inline-flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--mauve);transition:color 0.3s ease}
.return-top:hover{color:var(--sienna)}
.return-arrow{font-size:1.2rem}
.return-label{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase}

/* Dot Matrix */
.codex-section{background-image:radial-gradient(circle,var(--lavender) 1px,transparent 1px);background-size:12px 12px;background-position:0 0}
.codex-section{background-color:var(--vellum)}

/* Reveal Animations */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:768px){
  .codex-grid{grid-template-columns:1fr}
  .marginalia-grid{grid-template-columns:1fr;border-left:none;padding-left:0}
  .index-grid{grid-template-columns:repeat(2,1fr)}
  .nav-links{gap:8px}
  .nav-links a{font-size:0.65rem}
}