/* style". */
:root::before { content: "(Google IntersectionObserver applies toggling `opacity: → 1` `translateY(30px IntersectionObserver: animates `polygon(0 IntersectionObserver` `threshold: 0.15` external libraries `1.1rem`: entire group `opacity` `transform: `clamp(3.5rem Grotesk's slightly quirky 'g' open counters prevent feeling sterile. `#f5e6e0` (rose-tinted cream Layout (3% frequency"; display: none; }

:root {
    --bg-primary: #0d0709;
    --bg-secondary: #1a0e12;
    --surface: #2a1520;
    --accent-primary: #8b2d3a;
    --accent-bright: #c4415a;
    --text-primary: #f5e6e0;
    --text-secondary: #c4a090;
    --ornament-border: #5a1a2a;
    --highlight: #d4a070;
    --font-display: "Space Grotesk", sans-serif;
    --font-body: "Source Serif 4", serif;
    --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-primary); scroll-behavior: smooth; }
body { min-width: 320px; overflow-x: hidden; background: var(--bg-primary); color: var(--text-secondary); font-family: var(--font-body); font-weight: 300; line-height: 1.72; }
main { background: radial-gradient(circle at 70% 18%, rgba(90, 26, 42, 0.18), transparent 30rem), var(--bg-primary); }
.section { position: relative; overflow: hidden; width: 100%; }

.section-codex { min-height: 100vh; display: grid; place-items: center; background: #0d0709; }
.border-unfurl { position: absolute; inset: 0; pointer-events: none; opacity: 0.9; }
.drawn-border { position: absolute; inset: 0; width: 100%; height: 100%; }
.unfurl-path { fill: none; stroke: var(--accent-primary); stroke-width: 0.75; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; animation: drawUnfurl 12s linear infinite; }
.corner { position: absolute; z-index: 2; width: clamp(74px, 9vw, 120px); height: clamp(74px, 9vw, 120px); fill: none; stroke: var(--ornament-border); stroke-width: 0.7; overflow: visible; }
.corner path + path { fill: var(--highlight); stroke: var(--accent-primary); stroke-width: 0.4; }
.corner-nw { top: 40px; left: 40px; }
.corner-ne { top: 40px; right: 40px; }
.corner-sw { bottom: 40px; left: 40px; }
.corner-se { right: 40px; bottom: 40px; }
.codex-content { position: relative; z-index: 3; display: grid; place-items: center; text-align: center; opacity: 0; transform: translateY(20px); animation: codexReveal 1.5s ease-out 1.2s forwards; }
.folio { margin-bottom: 1.4rem; color: var(--accent-primary); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { color: var(--text-primary); font-family: var(--font-display); font-size: clamp(3.5rem, 9vw, 8rem); font-weight: 700; letter-spacing: 0.04em; line-height: 0.95; text-transform: uppercase; }
.subtitle { margin-top: 2rem; color: var(--text-primary); font-size: 1.1rem; font-style: italic; letter-spacing: 0.02em; }

.section-authority { min-height: 120vh; padding: 14vh clamp(1.5rem, 4vw, 4rem); background: linear-gradient(180deg, #0d0709 0%, #1a0e12 46%, #0d0709 100%); }
.scaffold-line { position: absolute; top: 10vh; left: 50%; width: min(1440px, calc(100% - 6rem)); transform: translateX(-50%); border-top: 1px solid rgba(90, 26, 42, 0.15); }
.authority-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; max-width: 1440px; margin: 0 auto; }
.authority-copy { grid-column: 2 / 6; padding-top: 6vh; }
.text-block { margin-bottom: 8rem; opacity: 0; transform: translateY(30px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.text-block.visible { opacity: 1; transform: translateY(0); }
.text-block p:not(.folio) { max-width: 38ch; color: var(--text-primary); font-size: clamp(1rem, 1.2vw, 1.15rem); }
.rule { position: relative; width: 100%; margin-bottom: 2rem; border-top: 1px solid rgba(90, 26, 42, 0.28); }
.rule span, .rule::before, .rule::after { content: ""; position: absolute; top: -5px; width: 9px; height: 9px; background: var(--accent-primary); transform: rotate(45deg); }
.rule span { left: calc(50% - 4px); background: var(--highlight); }
.rule::before { left: 0; }
.rule::after { right: 0; }
.artifact { grid-column: 8 / 13; grid-row: 1 / 3; position: sticky; top: 10vh; height: 74vh; overflow: hidden; background: var(--surface); clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%); box-shadow: inset 0 0 0 1px rgba(90, 26, 42, 0.5); }
.artifact::after, .specimen-panel::after { content: ""; position: absolute; inset: 0; background: #8b2d3a; mix-blend-mode: multiply; opacity: 0.6; pointer-events: none; }
.plate { position: absolute; inset: -5%; filter: grayscale(0.85) contrast(1.3); background: linear-gradient(125deg, transparent 0 34%, rgba(245, 230, 224, 0.2) 34.3% 35%, transparent 35.3%), radial-gradient(ellipse at 58% 38%, rgba(245, 230, 224, 0.6) 0 5%, transparent 5.5%), radial-gradient(ellipse at 62% 52%, rgba(196, 160, 144, 0.48) 0 18%, transparent 18.5%), radial-gradient(ellipse at 48% 63%, rgba(245, 230, 224, 0.3) 0 10%, transparent 10.5%), repeating-linear-gradient(100deg, #12090c 0 18px, #2a1520 19px 25px, #5a1a2a 26px 27px); }
.plate::before { content: ""; position: absolute; right: -10%; bottom: -6%; width: 70%; height: 82%; background: linear-gradient(125deg, transparent 0 18%, rgba(245,230,224,.72) 18.4% 23%, rgba(42,21,32,.5) 23.4% 28%, transparent 28.5%), linear-gradient(25deg, transparent 0 38%, rgba(245,230,224,.5) 38.5% 41%, transparent 41.5%); clip-path: polygon(26% 0, 78% 4%, 100% 72%, 48% 100%, 4% 58%); }

.section-specimens { min-height: 150vh; padding: 0; background: #0d0709; }
.specimen-panel { position: relative; height: 90vh; margin-bottom: 10vh; overflow: hidden; background: var(--surface); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path 800ms cubic-bezier(0.16, 1, 0.3, 1); }
.specimen-panel.visible { clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%); }
.specimen-art { position: absolute; inset: -3%; filter: grayscale(0.85) contrast(1.3); }
.textile-art { background: repeating-linear-gradient(45deg, rgba(245, 230, 224, 0.18) 0 6px, transparent 7px 22px), repeating-linear-gradient(-45deg, rgba(212, 160, 112, 0.16) 0 4px, transparent 5px 20px), linear-gradient(115deg, #0d0709, #2a1520 42%, #5a1a2a 72%, #1a0e12); }
.molding-art { background: linear-gradient(100deg, transparent 0 18%, rgba(245,230,224,.28) 18.3% 20%, transparent 20.3%), repeating-linear-gradient(90deg, #10080b 0 8%, #35202a 8.5% 11%, #c4a090 11.4% 12%, #1a0e12 12.5% 20%), radial-gradient(circle at 78% 44%, rgba(245,230,224,.35), transparent 22%); }
.hardware-art { background: radial-gradient(circle at 50% 50%, rgba(212,160,112,.65) 0 5%, transparent 5.5%), conic-gradient(from 45deg at 50% 50%, #0d0709, #5a1a2a, #d4a070, #2a1520, #0d0709), repeating-linear-gradient(135deg, rgba(245,230,224,.18) 0 3px, transparent 4px 30px); }
figcaption { position: absolute; bottom: 3rem; left: 3rem; z-index: 3; padding: 1rem 2rem; background: rgba(13, 7, 9, 0.85); color: var(--text-primary); font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 500; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; }

.section-seal { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(42, 21, 32, 0.4), transparent 32rem), #0d0709; }
.seal-container { text-align: center; opacity: 0; transform: translateY(30px); transition: opacity 800ms ease-out, transform 800ms ease-out; }
.seal-container.visible { opacity: 1; transform: translateY(0); }
.seal-rosette { width: 200px; height: 200px; margin-bottom: 3rem; animation: breathe 120s ease-in-out infinite; overflow: visible; }
.starburst polygon { fill: var(--accent-primary); stroke: var(--ornament-border); stroke-width: 0.4; }
.seal-ring { fill: none; stroke: var(--highlight); stroke-width: 2; }
.inner-gold { fill: var(--highlight); opacity: 0.78; }
.seal-container p { color: var(--ornament-border); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 300; letter-spacing: 0.2em; }

@keyframes codexReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes drawUnfurl { 0% { stroke-dashoffset: 1; opacity: 0.15; } 18%, 82% { stroke-dashoffset: 0; opacity: 0.8; } 100% { stroke-dashoffset: -1; opacity: 0.15; } }
@keyframes breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.03) rotate(180deg); } }

@media (max-width: 900px) {
    .authority-grid { grid-template-columns: 1fr; }
    .authority-copy, .artifact { grid-column: 1; }
    .artifact { position: relative; top: auto; height: 58vh; }
    .corner-nw { top: 20px; left: 20px; } .corner-ne { top: 20px; right: 20px; } .corner-sw { bottom: 20px; left: 20px; } .corner-se { right: 20px; bottom: 20px; }
    figcaption { left: 1.25rem; bottom: 1.25rem; max-width: calc(100% - 2.5rem); }
}