@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Inter:wght@400;500;600&display=swap");

:root {
  --night: #080910;
  --night-2: #0f1119;
  --ivory: #efe4cb;
  --muted: #b9ad95;
  --gold: #d8a654;
  --gold-light: #f0cf8a;
  --teal: #234e55;
  --rust: #843f2f;
  --line: rgba(216, 166, 84, .3);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ivory);
  background:
    radial-gradient(circle at 12% 7%, rgba(102, 54, 38, .24), transparent 28rem),
    radial-gradient(circle at 91% 44%, rgba(24, 63, 70, .18), transparent 34rem),
    var(--night);
  font-family: var(--serif);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
img { max-width: 100%; }
a { color: inherit; }
button { color: inherit; }

.reading-progress { position: fixed; inset: 0 0 auto; height: 2px; background: rgba(255,255,255,.04); z-index: 100; }
.reading-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--rust), var(--gold-light)); box-shadow: 0 0 18px var(--gold); }
.star-field { position: fixed; inset: 0; pointer-events: none; opacity: .4; background-image: radial-gradient(circle at 13% 17%, var(--gold-light) 0 1px, transparent 1.5px), radial-gradient(circle at 79% 12%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 48% 72%, var(--gold) 0 1px, transparent 1.5px); background-size: 31rem 37rem, 43rem 47rem, 53rem 59rem; animation: starDrift 40s linear infinite; }

.library-header { position: relative; z-index: 50; min-height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 16px clamp(20px, 4vw, 72px); border-bottom: 1px solid var(--line); background: rgba(8,9,16,.9); backdrop-filter: blur(18px); }
.library-brand { width: max-content; text-decoration: none; }
.library-brand small { display: block; color: var(--gold); font: 500 8px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.library-brand strong { font-size: clamp(27px, 2.5vw, 42px); line-height: .9; font-weight: 500; letter-spacing: .03em; }
.library-header > p { margin: 0; color: var(--muted); text-align: center; font: 500 9px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.library-header > p span { margin: 0 .7rem; color: var(--gold); }
.library-header > nav { display: flex; justify-content: flex-end; gap: 1.35rem; align-items: center; }
.cabinet-toggle, .ask-hypatia { border: 0; padding: 10px 0; background: none; text-decoration: none; cursor: pointer; font: 500 9px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.cabinet-toggle i, .ask-hypatia i { width: 13px; height: 13px; margin-right: 8px; display: inline-block; vertical-align: -2px; }
.cabinet-toggle i { border: 1px solid var(--gold); transform: rotate(45deg); box-shadow: inset 0 0 0 3px var(--night); background: var(--gold); }
.ask-hypatia { color: var(--gold-light); }
.ask-hypatia i { border: 1px solid var(--gold); border-radius: 50%; box-shadow: 0 0 12px rgba(216,166,84,.35); }

.story-cabinet { position: fixed; top: 0; right: 0; width: min(510px, 93vw); height: 100dvh; z-index: 90; padding: 30px clamp(24px,4vw,52px); overflow-y: auto; background: linear-gradient(145deg, rgba(24,22,28,.99), rgba(8,9,16,.99)); border-left: 1px solid var(--gold); box-shadow: -40px 0 100px rgba(0,0,0,.7); transform: translateX(105%); transition: transform .55s cubic-bezier(.77,0,.18,1); }
.story-cabinet.is-open { transform: translateX(0); }
body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.58); backdrop-filter: blur(2px); }
.cabinet-heading { display: flex; justify-content: space-between; align-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.cabinet-heading small { display: block; color: var(--gold); font: 500 8px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.cabinet-heading strong { display: block; margin-top: 7px; font-size: 28px; font-weight: 500; }
.cabinet-close { width: 38px; height: 38px; border: 1px solid var(--line); background: transparent; border-radius: 50%; cursor: pointer; position: relative; }
.cabinet-close::before, .cabinet-close::after { content: ""; position: absolute; left: 11px; top: 18px; width: 15px; height: 1px; background: var(--gold); transform: rotate(45deg); }
.cabinet-close::after { transform: rotate(-45deg); }
.story-cabinet nav { display: grid; }
.story-cabinet nav a { display: grid; grid-template-columns: 44px 1fr; gap: 3px 10px; padding: 17px 10px; text-decoration: none; border-bottom: 1px solid rgba(216,166,84,.14); transition: background .25s, padding-left .25s; }
.story-cabinet nav a:hover, .story-cabinet nav a:focus-visible, .story-cabinet nav a.is-active { padding-left: 17px; background: rgba(216,166,84,.08); }
.story-cabinet nav a > span { grid-row: 1 / 3; color: var(--gold); font: 500 9px/1.6 var(--sans); }
.story-cabinet nav strong { font-size: 18px; font-weight: 500; }
.story-cabinet nav small { color: var(--muted); font: 400 9px/1.4 var(--sans); letter-spacing: .08em; }

.origin-hero { position: relative; width: min(1600px,100%); min-height: calc(100vh - 88px); margin: auto; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; padding: clamp(55px,8vw,120px) clamp(20px,6vw,90px); overflow: hidden; }
.hero-art { position: absolute; inset: 0; overflow: hidden; }
.hero-art > img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .39; filter: saturate(.7) contrast(1.1); animation: heroBreathe 18s ease-in-out infinite alternate; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,16,.96) 0%, rgba(8,9,16,.75) 43%, rgba(8,9,16,.18) 76%, rgba(8,9,16,.7) 100%), linear-gradient(0deg, var(--night), transparent 35%); }
.history-orbits { position: absolute; width: min(57vw,780px); aspect-ratio: 1; right: -6%; top: 4%; border: 1px solid rgba(216,166,84,.26); border-radius: 50%; animation: orbit 38s linear infinite; }
.history-orbits span { position: absolute; inset: 10%; border: 1px dashed rgba(216,166,84,.25); border-radius: 50%; }
.history-orbits span:nth-child(2) { inset: 27%; border-style: solid; }
.history-orbits span:nth-child(3) { inset: 42%; border-color: rgba(216,166,84,.48); }
.history-orbits i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 18px var(--gold); top: 50%; left: -5px; }
.history-orbits i:last-child { left: auto; right: 9%; top: 17%; }
.hero-copy { position: relative; z-index: 3; align-self: start; padding-top: 8vh; }
.eyebrow { margin: 0 0 22px; color: var(--muted); font: 500 9px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.eyebrow span { margin-right: 15px; color: var(--gold); }
h1 { margin: 0; font-size: clamp(78px,12vw,190px); line-height: .66; letter-spacing: -.065em; font-weight: 400; }
h1 em { color: var(--gold-light); font-weight: 400; text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.begin-reading { display: inline-flex; align-items: center; gap: 18px; margin-top: 70px; color: var(--gold-light); text-decoration: none; font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.begin-reading i { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 50%; font-style: normal; transition: background .25s, color .25s; }
.begin-reading:hover i { color: var(--night); background: var(--gold-light); }
.hypatia-portrait { --rx: 0deg; --ry: 0deg; position: relative; z-index: 2; justify-self: end; width: min(470px,36vw); margin: 0 2vw 0 0; padding: 13px; border: 1px solid rgba(216,166,84,.48); background: rgba(12,12,17,.75); box-shadow: 0 40px 90px rgba(0,0,0,.7); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(2deg); transition: transform .18s ease-out; }
.hypatia-portrait::before, .hypatia-portrait::after { content: ""; position: absolute; inset: -20px 15% -20px -20px; border: 1px solid rgba(216,166,84,.12); z-index: -1; }
.hypatia-portrait::after { inset: 10% -22px 10% 30%; }
.hypatia-portrait img { display: block; width: 100%; filter: sepia(.08) contrast(1.05); }
.hypatia-portrait figcaption { display: flex; justify-content: center; align-items: center; gap: 9px; padding: 12px 5px 2px; color: var(--muted); font: 500 8px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; }
.hypatia-portrait figcaption i { width: 4px; height: 4px; background: var(--gold); transform: rotate(45deg); }

.story-shell { width: min(1320px,100%); margin: auto; padding: clamp(75px,10vw,150px) clamp(20px,6vw,80px); display: grid; grid-template-columns: 230px 1fr; gap: clamp(55px,8vw,125px); }
.origin-index { position: sticky; top: 120px; align-self: start; }
.origin-index > p { margin: 0 0 22px; color: var(--gold); font: 500 8px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.origin-index nav { display: grid; }
.origin-index nav a { position: relative; padding: 12px 5px 12px 41px; border-left: 1px solid rgba(216,166,84,.2); color: #766f64; text-decoration: none; font: 500 9px/1.35 var(--sans); letter-spacing: .08em; transition: color .25s, border-color .25s; }
.origin-index nav a span { position: absolute; left: 10px; color: var(--gold); font-size: 8px; }
.origin-index nav a.is-current, .origin-index nav a:hover { color: var(--ivory); border-left-color: var(--gold); }
.index-status { display: flex; gap: 10px; align-items: center; margin-top: 25px; color: #726b61; font: 500 8px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .1em; }
.index-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.index-status strong { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.story-content { min-width: 0; }
.story-chapter { position: relative; min-height: 420px; padding: 20px 0 clamp(85px,10vw,145px) 72px; border-left: 1px solid rgba(216,166,84,.22); }
.chapter-number { position: absolute; left: -22px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; background: var(--night); color: var(--gold-light); font: 500 9px/1 var(--sans); }
.chapter-number i { position: absolute; inset: -8px; border: 1px dashed rgba(216,166,84,.24); border-radius: 50%; animation: orbit 18s linear infinite; }
.prose { max-width: 770px; }
.prose p, .wind-prose p { margin: 0 0 1.15em; color: #d2c7af; font-size: clamp(21px,2.2vw,29px); line-height: 1.4; }
.prose p:first-child::first-letter { float: left; margin: .02em .09em 0 0; color: var(--gold-light); font-size: 3.3em; line-height: .78; }
.prose a { color: var(--gold-light); text-decoration-color: rgba(216,166,84,.45); text-underline-offset: 4px; }
.waterway-line { position: relative; width: 70%; height: 55px; margin: 35px 0 0; overflow: hidden; }
.waterway-line span, .waterway-line i { position: absolute; left: 0; right: 0; top: 20px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); transform: rotate(2deg); }
.waterway-line i { top: 29px; opacity: .4; transform: rotate(-2deg); }
.waterway-line b { position: absolute; width: 9px; height: 9px; left: 0; top: 17px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 15px var(--gold); animation: travel 7s ease-in-out infinite; }
.elegy-markers { display: grid; grid-template-columns: repeat(9,1fr); gap: 12px; width: min(630px,100%); margin-top: 45px; }
.elegy-markers i { aspect-ratio: 1; border: 1px solid var(--line); transform: rotate(45deg); animation: markerGlow 4s ease-in-out infinite; }
.elegy-markers i:nth-child(2n) { animation-delay: -.7s; }
.elegy-markers i:nth-child(3n) { animation-delay: -1.4s; }
.conference-card { width: 280px; margin: 36px 0 0 auto; padding: 11px; background: #e7d7ad; color: #35251a; transform: rotate(3deg); box-shadow: 0 20px 50px #000; position: relative; }
.conference-card img { display: block; width: 100%; }
.conference-card span { position: absolute; right: -22px; bottom: -25px; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--rust); color: var(--gold-light); border: 1px solid var(--gold); box-shadow: 0 8px 20px #000; font: 600 14px/1 var(--sans); transform: rotate(-9deg); }
.reformation-statement { margin: 0; max-width: 840px; position: relative; }
.reformation-statement::before { content: "“"; position: absolute; left: -35px; top: -50px; color: rgba(216,166,84,.16); font-size: 180px; line-height: 1; }
.reformation-statement p { position: relative; margin: 0; color: var(--ivory); font-size: clamp(30px,4.2vw,58px); line-height: 1.05; }
.book-object { display: grid; grid-template-columns: 126px 1fr; align-items: center; gap: 30px; max-width: 590px; margin: 70px 0 0 auto; padding: 26px; border: 1px solid var(--line); background: rgba(16,17,25,.85); box-shadow: 0 25px 55px rgba(0,0,0,.55); }
.book-object > img { width: 100%; box-shadow: 0 13px 25px #000; transform: rotateY(7deg); }
.book-object h2, .book-object h3 { margin: 0 0 6px; font-size: clamp(25px,3vw,40px); line-height: 1; font-weight: 500; }
.book-object h3 { font-size: clamp(21px,2.5vw,31px); }
.book-object div > p { margin: 0; color: var(--gold); font: 500 9px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.book-object a { display: inline-block; margin-top: 21px; padding: 12px 20px; border: 1px solid var(--gold); color: var(--gold-light); text-decoration: none; font: 600 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: background .25s,color .25s; }
.book-object a:hover { color: var(--night); background: var(--gold-light); }
.large-prose p { color: var(--ivory); font-size: clamp(27px,3.5vw,46px); line-height: 1.12; }
.alexandria-year { display: flex; justify-content: flex-end; align-items: baseline; gap: 7px; margin-top: 35px; color: var(--gold-light); }
.alexandria-year span { font-size: clamp(90px,15vw,170px); line-height: .7; }
.alexandria-year small { font: 500 11px/1 var(--sans); letter-spacing: .2em; }
.alexandria-year i { width: 22%; height: 1px; background: linear-gradient(90deg,var(--gold),transparent); }

.wind-rose-origin { position: relative; overflow: hidden; padding: clamp(90px,11vw,170px) clamp(20px,7vw,110px); border-top: 1px solid var(--line); background: radial-gradient(circle at 86% 25%, rgba(216,166,84,.11), transparent 28rem), linear-gradient(180deg, rgba(14,34,42,.32), transparent 38%); }
.wind-heading, .wind-layout { position: relative; z-index: 2; width: min(1160px,100%); margin-inline: auto; }
.wind-heading { margin-bottom: 70px; }
.wind-heading > p { margin: 0 0 12px; color: var(--muted); font: 500 9px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.wind-heading > p span { color: var(--gold); margin-right: 18px; }
.wind-heading h2 { max-width: 900px; margin: 0; font-size: clamp(56px,8vw,112px); line-height: .83; font-weight: 400; letter-spacing: -.045em; }
.wind-heading h2 em { color: var(--gold-light); font-weight: 400; }
.wind-layout { display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: clamp(50px,8vw,115px); align-items: start; }
.wind-prose p { font-size: clamp(19px,2vw,26px); }
.wind-actions { display: grid; gap: 40px; }
.case-file { display: grid; position: relative; padding: 14px; border: 1px solid var(--line); background: rgba(9,10,16,.82); text-decoration: none; transition: transform .3s,border-color .3s; }
.case-file:hover { transform: translateY(-5px) rotate(-1deg); border-color: var(--gold); }
.case-file img { width: 100%; opacity: .74; filter: sepia(.25) contrast(1.15); }
.case-file span { position: absolute; inset: auto 28px 26px; padding: 17px; background: rgba(8,9,16,.9); border: 1px solid var(--gold); text-align: center; color: var(--ivory); font: 500 10px/1.55 var(--sans); letter-spacing: .12em; }
.case-file b { color: var(--gold-light); }
.wind-book { margin: 0; grid-template-columns: 110px 1fr; padding: 21px; }
.wind-compass { position: absolute; width: min(58vw,740px); aspect-ratio: 1; right: -18%; top: -5%; border: 1px solid rgba(216,166,84,.17); border-radius: 50%; animation: orbit 45s linear infinite; }
.wind-compass span { position: absolute; inset: 12%; border: 1px dashed rgba(216,166,84,.18); border-radius: 50%; }
.wind-compass span:nth-child(2) { inset: 30%; border-style: solid; }
.wind-compass span:nth-child(3) { inset: 45%; border-color: rgba(216,166,84,.35); }
.wind-compass i, .wind-compass b { position: absolute; left: 50%; top: 4%; width: 1px; height: 92%; background: linear-gradient(transparent,var(--gold),transparent); }
.wind-compass b { transform: rotate(90deg); }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px clamp(20px,6vw,90px); border-top: 1px solid rgba(216,166,84,.16); color: #777064; font: 500 8px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--gold); text-decoration: none; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes starDrift { to { background-position: 31rem 37rem, -43rem 47rem, 53rem -59rem; } }
@keyframes heroBreathe { to { transform: scale(1.055); filter: saturate(.9) contrast(1.05); } }
@keyframes travel { 0%,100% { left: 0; opacity: .25; } 50% { left: calc(100% - 10px); opacity: 1; } }
@keyframes markerGlow { 50% { border-color: var(--gold-light); box-shadow: 0 0 14px rgba(216,166,84,.28); } }

@media (max-width: 1050px) {
  .library-header { grid-template-columns: 1fr auto; }
  .library-header > p { display: none; }
  .origin-hero { grid-template-columns: 1fr 1fr; }
  .hypatia-portrait { width: min(430px,43vw); }
  .story-shell { grid-template-columns: 190px 1fr; gap: 52px; }
  .wind-layout { grid-template-columns: 1fr 330px; gap: 50px; }
}

@media (max-width: 760px) {
  .library-header { min-height: 76px; padding: 13px 17px; }
  .library-brand small, .ask-hypatia { display: none; }
  .library-brand strong { font-size: 27px; }
  .cabinet-toggle { font-size: 8px; }
  .origin-hero { min-height: 900px; grid-template-columns: 1fr; align-content: start; padding-top: 75px; }
  .hero-copy { padding-top: 0; }
  h1 { font-size: clamp(84px,25vw,145px); }
  .begin-reading { margin-top: 43px; }
  .hypatia-portrait { width: min(390px,78vw); margin: -20px 1vw 0 auto; }
  .hero-shade { background: linear-gradient(180deg,rgba(8,9,16,.93),rgba(8,9,16,.55) 55%,rgba(8,9,16,.88)); }
  .story-shell { grid-template-columns: 1fr; padding-top: 85px; }
  .origin-index { position: relative; top: 0; display: none; }
  .story-chapter { padding-left: 48px; }
  .book-object { grid-template-columns: 105px 1fr; margin-top: 55px; }
  .wind-layout { grid-template-columns: 1fr; }
  .wind-actions { grid-template-columns: 1fr 1fr; align-items: start; }
  .wind-book { grid-template-columns: 1fr; }
  .wind-book > img { width: 130px; }
}

@media (max-width: 520px) {
  .origin-hero { min-height: 790px; }
  .hypatia-portrait { width: 76vw; margin-top: 12px; }
  .hypatia-portrait figcaption { display: none; }
  .story-chapter { padding-left: 37px; }
  .prose p, .wind-prose p { font-size: 19px; }
  .book-object { grid-template-columns: 92px 1fr; gap: 19px; padding: 18px; }
  .book-object h2 { font-size: 23px; }
  .wind-heading h2 { font-size: 54px; }
  .wind-actions { grid-template-columns: 1fr; }
  .wind-book { grid-template-columns: 105px 1fr; }
  .wind-book > img { width: 100%; }
  .site-footer { display: grid; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}