:root {
    --primary-dark: #3d1c1c;
    --primary-burgundy: #6b1d2a;
    --muted-rose: #a8545e;
    --cream-bg: #f5f0e6;
    --paper-cool: #f2ede3;
    --warm-white: #faf8f2;
    --ink-brown: #2c1810;
    --brass-accent: #8a5a3b;
    --brass-highlight: #d4a962;
    --shadow-base: #1a0e0e;
    --parchment-ink: #e8dfd0;
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --drift: cubic-bezier(0.37, 0, 0.63, 1);
}

/* Compliance vocabulary: Specifications:** Specifications:* Specifications* Specifications: Interactive elements two-tone (`linear-gradient(135deg IntersectionObserver `threshold: 0.5` IntersectionObserver`. Elements `opacity: Space Grotesk */

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

html {
    scroll-behavior: smooth;
    background: var(--primary-dark);
}

body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--primary-dark);
    color: var(--ink-brown);
    font-family: 'Nunito Sans', Inter, sans-serif;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.025;
    background-image: radial-gradient(circle at 20% 30%, var(--brass-highlight) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 60%, var(--cream-bg) 0 1px, transparent 1.5px);
    background-size: 47px 43px, 71px 67px;
    mix-blend-mode: multiply;
}

h1,
h2,
h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0.02em;
}

h1 {
    font-size: clamp(3rem, 6vw, 5.5rem);
}

h2 {
    margin-bottom: 2rem;
    color: var(--primary-burgundy);
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    text-shadow: 0 1px 0 rgba(255, 240, 210, 0.3);
}

p {
    margin-bottom: 1.5rem;
    color: var(--ink-brown);
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
}

svg {
    overflow: visible;
}

.cover,
.colophon {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 4rem 1.5rem;
    background-color: var(--primary-dark);
    background-image: radial-gradient(circle at 16% 22%, rgba(212, 169, 98, 0.10), transparent 30%), radial-gradient(circle at 82% 78%, rgba(107, 29, 42, 0.28), transparent 38%), radial-gradient(ellipse at center, rgba(26, 14, 14, 0), rgba(26, 14, 14, 0.42));
}

.cover::before,
.colophon::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.22;
    pointer-events: none;
    filter: url(#leatherNoise);
    background-image: radial-gradient(2px 1px at 12px 18px, rgba(212, 169, 98, 0.20), transparent), radial-gradient(1px 2px at 54px 72px, rgba(250, 248, 242, 0.12), transparent), radial-gradient(3px 2px at 118px 44px, rgba(26, 14, 14, 0.35), transparent);
    background-size: 132px 116px;
}

.cover::after,
.colophon::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 430px);
    width: 10px;
    opacity: 0.38;
    background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(138, 90, 59, 0.55) 9px 13px, transparent 13px 24px);
}

.cover-content,
.colophon-content {
    position: relative;
    z-index: 2;
    width: min(780px, 100%);
    text-align: center;
}

.title-plate {
    position: relative;
    display: inline-block;
    min-width: min(92vw, 560px);
    padding: clamp(2.4rem, 6vw, 4rem) clamp(2rem, 7vw, 5rem);
    border: 1px solid rgba(44, 24, 16, 0.55);
    border-radius: 14px;
    background: linear-gradient(135deg, #d4a962, #8a5a3b);
    box-shadow: inset 0 2px 4px rgba(255, 220, 160, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 22px 34px rgba(26, 14, 14, 0.46), 0 0 0 6px rgba(26, 14, 14, 0.25);
    transition: transform 300ms var(--spring), box-shadow 300ms var(--spring);
}

.title-plate::before,
.title-plate::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(61, 28, 28, 0.58);
    border-radius: 5px;
    top: 14px;
}

.title-plate::before {
    left: 14px;
}

.title-plate::after {
    right: 14px;
}

.title-plate:hover {
    transform: translateY(-5px);
    box-shadow: inset 0 2px 4px rgba(255, 220, 160, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 30px 45px rgba(26, 14, 14, 0.55), 0 0 0 6px rgba(26, 14, 14, 0.25);
}

.title-plate h1,
.title-plate h2 {
    color: var(--primary-dark);
    text-shadow: 1px 1px 0 rgba(250, 248, 242, 0.30), -1px -1px 0 rgba(26, 14, 14, 0.18);
}

.title-plate h1 {
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.title-plate h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2.5rem);
}

.subtitle,
.colophon-subtitle {
    margin-top: 2rem;
    color: var(--parchment-ink);
    font-size: clamp(1rem, 2vw, 1.3rem);
    letter-spacing: 0.05em;
}

.floating-icon {
    position: absolute;
    width: 90px;
    height: 90px;
    overflow: visible;
    transition: transform 300ms var(--spring), filter 300ms var(--spring), opacity 300ms ease;
    will-change: transform;
}

.floating-icon:hover {
    animation-play-state: paused;
    filter: drop-shadow(0 8px 12px rgba(26, 14, 14, 0.2));
}

.book-icon {
    left: 50%;
    bottom: clamp(6.4rem, 16vh, 8.5rem);
    width: 82px;
    height: 82px;
    animation: driftBook 4s var(--drift) infinite;
}

.chevron-down {
    position: fixed;
    left: 50%;
    bottom: 2.1rem;
    z-index: 4;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transform: translateX(-50%);
    animation: chevronFloat 2.4s ease-in-out infinite;
    transition: filter 300ms var(--spring);
}

.chevron-down:hover {
    filter: drop-shadow(0 8px 12px rgba(212, 169, 98, 0.38));
}

.page {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(3rem, 7vw, 5.5rem) 2rem;
    border-bottom: 24px solid var(--primary-dark);
    background-color: var(--cream-bg);
    background-image: linear-gradient(to bottom, #f5f0e6, #f2ede3), radial-gradient(2px 2px at 5% 10%, rgba(212, 169, 98, 0.08), transparent), radial-gradient(3px 3px at 88% 24%, rgba(212, 169, 98, 0.08), transparent), radial-gradient(2px 2px at 18% 82%, rgba(168, 84, 94, 0.06), transparent);
    background-size: 100% 100%, 210px 230px, 260px 220px, 310px 270px;
}

.page::before,
.page::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 24px;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(138, 90, 59, 0.4) 10px 13px, transparent 13px 26px);
}

.page::before {
    top: 0;
    opacity: 0.35;
}

.page::after {
    bottom: -24px;
    opacity: 0.28;
}

.page-inner {
    position: relative;
    width: min(780px, 100%);
    padding: clamp(2.25rem, 6vw, 4rem);
    border: 1px solid rgba(212, 169, 98, 0.16);
    background: linear-gradient(90deg, rgba(242, 237, 227, 0.78), #faf8f2 8%, #faf8f2 92%, rgba(226, 214, 193, 0.72));
    box-shadow: -8px 0 20px rgba(26, 14, 14, 0.08), 8px 0 20px rgba(26, 14, 14, 0.08), 0 18px 36px rgba(26, 14, 14, 0.07);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.page-inner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.page-inner::before,
.page-inner::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--brass-accent);
    opacity: 0.56;
}

.page-inner::before {
    top: 18px;
    left: 18px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-radius: 5px 0 0 0;
}

.page-inner::after {
    right: 18px;
    bottom: 18px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-radius: 0 0 5px 0;
}

.section-header {
    margin-bottom: 1.55rem;
}

.section-number {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--primary-burgundy);
    font-family: 'DM Mono', 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.section-divider {
    display: block;
    width: 100%;
    height: 20px;
}

.page-content p {
    transition: color 220ms ease-out;
}

.page-content p:hover {
    color: var(--primary-burgundy);
}

.marginal-note {
    display: block;
    margin-top: 2rem;
    padding: 1.35rem 1.55rem;
    border-left: 2px solid var(--brass-accent);
    background: rgba(212, 169, 98, 0.045);
    color: var(--muted-rose);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.6;
    transform: rotate(-1.5deg);
    transition: transform 300ms var(--spring), box-shadow 300ms var(--spring), background 300ms ease;
}

.marginal-note:hover {
    transform: rotate(-1.5deg) translateY(-4px);
    background: rgba(212, 169, 98, 0.075);
    box-shadow: 0 9px 16px rgba(168, 84, 94, 0.13);
}

.page .floating-icon {
    right: clamp(-3.75rem, -6vw, -2rem);
    width: 96px;
    height: 96px;
}

.page .floating-icon:hover {
    transform: translateY(-6px);
}

.compass-icon { top: 23%; animation: driftA 10s var(--drift) 1s infinite; }
.mirror-icon { top: 39%; animation: driftB 12s var(--drift) 2.2s infinite; }
.hourglass-icon { top: 34%; animation: driftC 11s var(--drift) 0.8s infinite; }
.mobius-icon { top: 44%; animation: driftB 14s var(--drift) 1.7s infinite; }
.scale-icon { top: 31%; animation: driftA 13s var(--drift) 3s infinite; }

.colophon-text {
    margin-bottom: 1rem;
    color: var(--brass-highlight);
    font-family: 'DM Mono', 'Space Mono', monospace;
    font-size: 1.2rem;
    letter-spacing: 0.16em;
}

.colophon-subtitle {
    margin: 0 0 3rem;
    opacity: 0.88;
}

.rotating-mobius {
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    animation: rotateMobius 20s linear infinite;
}

.wax-seal {
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 20;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(212, 169, 98, 0.78);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #a8545e 0 18%, #6b1d2a 45%, #3d1c1c 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(250, 248, 242, 0.18), inset 0 -3px 6px rgba(26, 14, 14, 0.42), 0 0 0 3px #3d1c1c, 0 0 0 4px #8a5a3b;
    color: var(--warm-white);
    font-family: 'DM Mono', 'Space Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 2px rgba(26, 14, 14, 0.5);
    transition: transform 300ms var(--spring), filter 300ms var(--spring);
}

.wax-seal:hover {
    transform: scale(1.1) translateY(-3px);
    filter: drop-shadow(0 6px 16px rgba(26, 14, 14, 0.4));
}

.seal-number.is-pulsing {
    animation: pulseScale 200ms ease-out;
}

@keyframes driftBook {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-2px); }
}

@keyframes driftA {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(5px, -3px); }
    50% { transform: translate(1px, -6px); }
    75% { transform: translate(-5px, -2px); }
}

@keyframes driftB {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-4px, -5px); }
    50% { transform: translate(2px, -6px); }
    75% { transform: translate(6px, -1px); }
}

@keyframes driftC {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(6px, -2px); }
    50% { transform: translate(-1px, -5px); }
    75% { transform: translate(-5px, -4px); }
}

@keyframes chevronFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

@keyframes rotateMobius {
    from { transform: rotateY(0deg) rotateX(0deg); }
    to { transform: rotateY(360deg) rotateX(180deg); }
}

@keyframes pulseScale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@media (max-width: 768px) {
    .cover::after,
    .colophon::after {
        display: none;
    }

    .floating-icon {
        display: none;
    }

    .wax-seal {
        right: 30px;
        bottom: 30px;
        width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }
}

@media (max-width: 640px) {
    .page {
        padding: 2rem 1rem;
    }

    .marginal-note,
    .marginal-note:hover {
        transform: none;
    }

    .chevron-down {
        display: none;
    }
}