*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1C0F0A;color:#F2E8D5;font-family:'Crimson Pro',serif;font-weight:400;font-size:clamp(1rem,1.8vw,1.25rem);line-height:1.75;overflow-x:hidden}

/* Hex nav */
.hex-nav{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:8px;padding:8px}
.hex-icon{width:40px;height:40px;cursor:pointer;opacity:0.5;transition:opacity 0.3s ease,transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.hex-icon:hover{opacity:1;transform:scale(1.15)}
.hex-icon svg{width:100%;height:100%}

/* Chapter sections */
.chapter{min-height:100vh;padding:5vw;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}

/* Hex cells */
.hex-cell{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:#2A1A12;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:clamp(20px,4vw,40px);text-align:center;position:relative;border:none;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.hex-cell::before{content:'';position:absolute;inset:-3px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:linear-gradient(135deg,#B87333,#8B5E3C);z-index:-1}
.hex-cell::after{content:'';position:absolute;inset:-1px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:#2A1A12;z-index:-1}
.hex-cell:hover{transform:scale(1.05)}
.hex-cell.queen{width:clamp(280px,50vw,500px);min-height:clamp(240px,40vw,400px)}
.hex-cell:not(.queen){width:clamp(120px,20vw,200px);min-height:clamp(100px,16vw,170px)}

/* Hex mosaic */
.hex-mosaic{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:900px}

/* Hex cluster */
.hex-cluster{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:900px}
.hex-cluster.ring{gap:8px}

/* Dense grid */
.hex-grid-dense{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:700px;margin-top:32px}
.hex-cell.mini{width:clamp(100px,15vw,140px);min-height:clamp(90px,13vw,120px);cursor:pointer;perspective:800px}

/* Flip */
.flip .flip-inner{width:100%;height:100%;transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1);transform-style:preserve-3d;display:flex;align-items:center;justify-content:center}
.flip:hover .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{backface-visibility:hidden;display:flex;align-items:center;justify-content:center;position:absolute}
.flip-back{transform:rotateY(180deg);font-family:'Cinzel Decorative',serif;font-size:0.85rem;color:#C9A84C}
.flip-front svg{width:40px;height:40px}

/* Typography */
h1,.wordmark{font-family:'Cinzel Decorative',serif;font-size:clamp(2.5rem,5vw,4.5rem);color:#C9A84C;letter-spacing:0.06em}
.wordmark{display:flex;flex-direction:column;gap:0;line-height:1.1}
.tagline{font-family:'Crimson Pro',serif;font-style:italic;font-weight:400;font-size:clamp(0.9rem,1.5vw,1.1rem);color:#D4C5A9;margin-top:8px}
h2{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:clamp(2rem,6vw,5.5rem);letter-spacing:0.06em;color:#F2E8D5;margin-bottom:16px}
.chapter-title{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:clamp(1.6rem,4vw,3rem);letter-spacing:0.04em;color:#F2E8D5;text-align:center}
.drop-cap{font-family:'Cinzel Decorative',serif;font-size:3rem;float:left;margin-right:8px;line-height:0.8;color:#C9A84C}
.material-label{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;color:#C9A84C}
.fn-mark{color:#C84B31;cursor:pointer;font-size:0.8em}
.teal-heading{color:#2E8B7A}
.teal-cell{background:#1a2a25}

/* Chapter head */
.chapter-head{display:flex;align-items:center;justify-content:center;margin-bottom:32px;position:relative}
.chapter-num{font-family:'Cinzel Decorative',serif;font-size:2rem;color:#C9A84C;position:relative;z-index:2}
.chapter-num.teal{color:#2E8B7A}
.cartouche{width:120px;height:60px;position:absolute}
.scroll-path{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.2s ease}
.chapter-head.visible .scroll-path{stroke-dashoffset:0}

/* Marginalia */
.marginalia{position:absolute;left:2vw;top:50%;transform:translateY(-50%);max-width:180px;font-family:'Crimson Pro',serif;font-style:italic;font-size:0.85rem;color:#D4C5A9;opacity:0.6;line-height:1.5}

/* Library layout */
.library-layout{display:flex;align-items:center;gap:24px;max-width:900px}
.fern-col{width:40px;flex-shrink:0}
.fern-col svg{width:100%;height:200px}
.text-cell{min-height:auto !important;width:100% !important;clip-path:none;padding:clamp(24px,4vw,48px)}
.text-cell::before,.text-cell::after{clip-path:none}
.text-cell p{margin-bottom:1rem;max-width:60ch}

/* Hex separator */
.hex-separator{height:48px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(90deg,#B87333 0px,#B87333 2px,#1C0F0A 2px,#1C0F0A 24px,#C9A84C 24px,#C9A84C 26px,#1C0F0A 26px,#1C0F0A 48px);opacity:0.3}

/* Renewal */
.renewal-chapter{background:linear-gradient(180deg,#1C0F0A,#0f1e1a)}

/* Gear animations */
.gear-rosette{width:80px;height:80px}
.gear-rosette.sm{width:60px;height:60px}
.gear-rosette.spin{animation:gearSpin 30s linear infinite}
.gear-rosette.slow{animation-duration:45s}
@keyframes gearSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Stagger reveal */
[data-stagger]>*{opacity:0;transform:scale(0.8) rotate(15deg);transition:opacity 0.6s cubic-bezier(0.34,1.56,0.64,1),transform 0.6s cubic-bezier(0.34,1.56,0.64,1)}
[data-stagger].visible>*{opacity:1;transform:scale(1) rotate(0deg)}
[data-stagger].visible>*:nth-child(1){transition-delay:0s}
[data-stagger].visible>*:nth-child(2){transition-delay:0.12s}
[data-stagger].visible>*:nth-child(3){transition-delay:0.24s}
[data-stagger].visible>*:nth-child(4){transition-delay:0.36s}
[data-stagger].visible>*:nth-child(5){transition-delay:0.48s}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* Palette refs */
.ref-mahogany{color:#1C0F0A}
.ref-drawer{color:#2A1A12}
.ref-gold{color:#C9A84C}
.ref-teal{color:#2E8B7A}
.ref-copper{color:#B87333}
.ref-parchment{color:#F2E8D5}
.ref-ivory{color:#D4C5A9}
.ref-cinnabar{color:#C84B31}

@media(max-width:768px){
.hex-nav{display:none}
.hex-cell.queen{width:90vw}
.hex-cell:not(.queen){width:40vw}
.marginalia{position:relative;left:auto;top:auto;transform:none;max-width:100%;margin-top:16px;text-align:center}
.library-layout{flex-direction:column}
.fern-col{display:none}
}