*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#F0EDE6;color:#2B2D33;font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.75;letter-spacing:0.015em;overflow-x:hidden}

.aurora-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(135deg,#3A4A5C 0%,#8A9CAE 50%,#A8B0C8 100%);opacity:0.08;animation:auroraShift 30s ease-in-out infinite alternate}
@keyframes auroraShift{0%{opacity:0.06;background-position:0% 0%}50%{opacity:0.1;background-position:100% 50%}100%{opacity:0.06;background-position:50% 100%}}

.margin-line{position:fixed;left:clamp(24px,5vw,60px);top:0;bottom:0;width:4px;z-index:5;pointer-events:none}
.margin-line svg{width:4px;height:100%}

.manuscript{position:relative;z-index:2;max-width:clamp(640px,55vw,820px);margin:0 auto;padding:10vh clamp(24px,4vw,48px)}

.folio{padding:clamp(32px,6vh,80px) 0;position:relative}
.folio-hero{padding:20vh 0 10vh;text-align:left}
.hero-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2.5rem,6vw,5rem);letter-spacing:0.02em;line-height:1.1;color:#2B2D33;margin-bottom:0.5em}
.hero-subtitle{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.1rem,2vw,1.4rem);color:#6B6E78;line-height:1.6}

.folio-heading{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:0.02em;line-height:1.15;margin-bottom:0.8em;color:#2B2D33}

.body-text{margin-bottom:1.5em;max-width:52ch}

.ornament{margin-bottom:clamp(16px,3vh,32px)}
.ornament svg{width:clamp(40px,8vw,80px);height:auto;display:block;opacity:0;transform:translateY(10px);transition:opacity 0.8s ease,transform 0.8s ease}
.folio.visible .ornament svg{opacity:1;transform:translateY(0)}

.folio-gap{min-height:20vh}

.iso-icon{margin:clamp(24px,4vh,48px) 0;transform:translateY(-4px);box-shadow:0 4px 12px rgba(43,45,51,0.08)}
.iso-icon svg{width:clamp(80px,15vw,140px);height:auto;display:block;background:#F0EDE6;padding:12px;border-radius:4px}

.margin-note{font-family:'Caveat',cursive;font-size:clamp(0.85rem,1.5vw,1.1rem);color:#C4956A;display:block;transform:rotate(-1.5deg);margin-top:8px;opacity:0.8}

.folio-colophon{text-align:center;padding:10vh 0}
.colophon-text{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:0.9rem;color:#6B6E78;margin-bottom:0.5em}

.folio{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
.folio.visible{opacity:1;transform:translateY(0)}

a{color:#5B9EA6;text-decoration:none;transition:color 0.3s}
a:hover{color:#7EC8A4}

@media(max-width:768px){
  .manuscript{max-width:100%;padding:6vh clamp(16px,6vw,32px)}
  .margin-line{display:none}
}