*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --deep-night:#0f0b18;
  --purple-dark:#1e1433;
  --purple-mid:#261840;
  --purple-warm:#3d2e4f;
  --brown-deep:#4a2e1a;
  --gold:#c4a265;
  --gold-bright:#d4b87a;
  --parchment:#e8dcc8;
  --stone:#b8a99a;
  --muted:#7a6b5c;
  --font-display:'Cormorant Garamond',serif;
  --font-body:'DM Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

html{font-size:16px;scroll-behavior:smooth}

body{
  background:#0f0b18;
  color:var(--parchment);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.7;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

.grain-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1000;
  opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* HEADER */
.archive-header{
  padding:clamp(3rem,10vh,8rem) clamp(2rem,5vw,4rem) clamp(2rem,5vh,4rem);
  text-align:center;
  position:relative;
}

.header-glyph{
  margin-bottom:2rem;
  display:flex;
  justify-content:center;
}

.archive-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.8rem,6vw,5.5rem);
  letter-spacing:0.08em;
  line-height:1.1;
  color:var(--parchment);
  text-transform:uppercase;
}

.archive-subtitle{
  font-family:var(--font-mono);
  font-size:clamp(0.7rem,1.2vw,0.85rem);
  letter-spacing:0.15em;
  color:var(--gold);
  margin-top:1.5rem;
  text-transform:uppercase;
}

.header-rule{
  width:clamp(60px,15vw,120px);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:2rem auto 0;
}

/* GRID */
.archive-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.5vw,32px);
  padding:clamp(2rem,4vw,4rem);
  max-width:1400px;
  margin:0 auto;
}

.module{
  background:var(--purple-dark);
  border:1px solid rgba(196,162,101,0.12);
  border-radius:2px;
  padding:clamp(1.5rem,3vw,2.5rem);
  position:relative;
  transition:border-color 0.4s ease, box-shadow 0.4s ease;
  grid-column:span 6;
}

.module:hover{
  border-color:rgba(196,162,101,0.3);
  box-shadow:0 0 40px rgba(196,162,101,0.05);
}

.module-large{grid-column:span 8}
.module-wide{grid-column:span 12}
.module-small{grid-column:span 4}

.module-index{
  font-family:var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.2em;
  color:var(--gold);
  opacity:0.6;
  position:absolute;
  top:1rem;
  right:1rem;
}

.module-heading{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.4rem,2.5vw,2rem);
  letter-spacing:0.08em;
  line-height:1.2;
  color:var(--parchment);
  text-transform:uppercase;
  margin-bottom:1.2rem;
}

.module-text{
  font-size:clamp(0.9rem,1.1vw,1.05rem);
  color:var(--stone);
  line-height:1.8;
  margin-bottom:1rem;
}

.module-text.secondary{
  font-style:italic;
  font-size:0.85rem;
  color:var(--muted);
  border-left:2px solid var(--gold);
  padding-left:1rem;
  margin-top:1.5rem;
}

.module-ornament{
  width:40px;
  height:1px;
  background:var(--gold);
  margin-top:1.5rem;
  opacity:0.5;
}

/* CODE MODULES */
.module-notation{
  background:var(--deep-night);
  border-color:rgba(196,162,101,0.08);
}

.module-code{
  font-family:var(--font-mono);
  font-size:clamp(0.75rem,1vw,0.85rem);
  line-height:1.9;
  color:var(--gold-bright);
  white-space:pre-wrap;
}

/* SIGILS */
.module-sigil{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-color:rgba(196,162,101,0.06);
  grid-column:span 4;
}

.sigil{
  width:120px;
  height:120px;
  border-radius:50%;
  position:relative;
}

.sigil-header{
  width:80px;
  height:80px;
  background:conic-gradient(from 0deg,var(--purple-dark),var(--gold),var(--purple-mid),var(--gold-bright),var(--purple-dark));
  mix-blend-mode:screen;
  animation:sigil-rotate 20s linear infinite;
}

.sigil-alpha{
  background:
    radial-gradient(circle at 30% 40%,var(--gold) 0%,transparent 50%),
    radial-gradient(circle at 70% 60%,var(--purple-warm) 0%,transparent 50%),
    conic-gradient(from 45deg,var(--deep-night),var(--gold),var(--purple-mid),var(--deep-night));
  mix-blend-mode:screen;
}

.sigil-beta{
  background:
    conic-gradient(from 120deg,transparent 0%,var(--gold) 15%,transparent 30%),
    conic-gradient(from 240deg,transparent 0%,var(--gold-bright) 15%,transparent 30%),
    conic-gradient(from 0deg,transparent 0%,var(--purple-warm) 15%,transparent 30%),
    radial-gradient(circle,var(--deep-night) 30%,transparent 70%);
}

.sigil-gamma{
  background:
    repeating-conic-gradient(from 0deg,var(--gold) 0deg 10deg,transparent 10deg 20deg),
    radial-gradient(circle,var(--deep-night) 40%,transparent 70%);
  mix-blend-mode:screen;
}

.sigil-footer{
  width:40px;
  height:40px;
  margin:1.5rem auto 0;
  background:conic-gradient(from 0deg,var(--gold),transparent,var(--gold));
  opacity:0.4;
}

.sigil-label{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.15em;
  color:var(--muted);
  margin-top:1.2rem;
  text-transform:uppercase;
}

@keyframes sigil-rotate{
  to{transform:rotate(360deg)}
}

/* CONSTELLATION DIAGRAM */
.module-diagram{
  grid-column:span 6;
  background:var(--deep-night);
}

.constellation{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
}

.constellation-point{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:6px;
  height:6px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 8px var(--gold);
  animation:pulse 3s ease-in-out infinite;
}

.constellation-point:nth-child(2){animation-delay:0.5s}
.constellation-point:nth-child(3){animation-delay:1s}
.constellation-point:nth-child(4){animation-delay:1.5s}
.constellation-point:nth-child(5){animation-delay:2s}
.constellation-point:nth-child(6){animation-delay:2.5s}

.constellation-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.constellation-lines line{
  stroke:var(--gold);
  stroke-width:0.3;
  opacity:0.4;
}

.diagram-caption{
  display:block;
  font-family:var(--font-mono);
  font-size:0.7rem;
  color:var(--muted);
  letter-spacing:0.1em;
  margin-top:1rem;
  text-align:center;
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(1.5)}
}

/* FOOTER */
.archive-footer{
  padding:clamp(3rem,6vh,5rem) clamp(2rem,5vw,4rem);
  text-align:center;
}

.footer-rule{
  width:clamp(60px,15vw,120px);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:0 auto 2rem;
}

.footer-text{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.15em;
  color:var(--muted);
  text-transform:uppercase;
}

/* REVEAL ANIMATIONS */
.module{
  opacity:0;
  transform:translateY(20px);
}

.module.revealed{
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.8s ease, transform 0.8s ease;
}

/* RESPONSIVE */
@media(max-width:768px){
  .module,.module-large,.module-wide,.module-small,.module-sigil,.module-diagram{
    grid-column:span 12;
  }
}