/* ppuzzle.org -- Academic Classic Library */
:root {
    --shadow: #1E1409;
    --parchment: #F5ECD7;
    --parchment-edge: #EDE4C8;
    --walnut: #2C1810;
    --mahogany: #3D2B1F;
    --faded-ink: #7A6B5A;
    --brass: #B8860B;
    --burgundy: #8B2500;
    --rule: #8B7355;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Crimson Pro', serif; font-weight: 400; font-size: 17px; line-height: 1.65; color: var(--mahogany); background: var(--shadow); overflow-x: hidden; }
body::after { content: ''; position: fixed; inset: 0; background: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='%23F5ECD7' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; }

.lamp-glow { position: fixed; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: radial-gradient(circle, rgba(184,134,11,0.03) 0%, transparent 70%); transform: translate(-50%, -50%); z-index: 0; transition: width 1.5s, height 1.5s; pointer-events: none; }
.lamp-glow.on { width: 80vw; height: 80vh; }

.page-surface { max-width: 880px; margin: 0 auto; background: var(--parchment); box-shadow: 0 2px 40px rgba(0,0,0,0.4); position: relative; z-index: 1; min-height: 100vh; opacity: 0; transform: translateY(20px); transition: opacity 1.2s ease-out, transform 1.2s ease-out; }
.page-surface.on { opacity: 1; transform: translateY(0); }

.puzzle-watermark { position: absolute; bottom: 15%; right: 10%; width: 200px; height: 200px; opacity: 0.025; pointer-events: none; }

.marginalia-nav { position: fixed; left: max(calc(50% - 440px - 60px), 20px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 20px; z-index: 10; opacity: 0; transition: opacity 0.3s; }
.marginalia-nav.on { opacity: 1; }
.margin-link { font-family: 'Spectral', serif; font-weight: 300; font-style: italic; font-size: 13px; color: var(--faded-ink); text-decoration: none; letter-spacing: 0.03em; display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.margin-link:hover { color: var(--brass); }
.margin-dot { width: 4px; height: 4px; border-radius: 50%; background: transparent; transition: background 0.2s; }
.margin-link.active .margin-dot { background: var(--brass); }

.text-block { max-width: 580px; margin: 0 auto; padding: 0 24px 80px; padding-left: 80px; }

.hero-section { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.hero-rule { width: 0; height: 1px; background: var(--rule); opacity: 0.3; transition: width 0.6s cubic-bezier(0.33, 0, 0.67, 1); }
.hero-rule.on { width: 300px; }
.hero-title { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 52px; letter-spacing: 0.01em; color: var(--walnut); opacity: 0; transition: opacity 0.4s; }
.hero-title.on { opacity: 1; }
.hero-subtitle { font-family: 'EB Garamond', serif; font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rule); font-variant: small-caps; opacity: 0; transition: opacity 0.4s; }
.hero-subtitle.on { opacity: 1; }

.brass-divider { text-align: center; padding: 28px 0; position: relative; }
.brass-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--rule); opacity: 0.3; }
.brass-diamond { display: inline-block; width: 6px; height: 6px; border: 1px solid var(--brass); transform: rotate(45deg); background: var(--parchment); position: relative; z-index: 1; }

.puzzle-section { padding: 28px 0; position: relative; }
.margin-ornament { position: absolute; left: -60px; top: 56px; font-size: 16px; color: var(--rule); }
.puzzle-card { background: var(--parchment-edge); padding: 28px 24px; border-left: 1px solid var(--brass); position: relative; opacity: 0; transform: translateY(12px); transition: opacity 0.4s, transform 0.4s, background 0.2s; }
.puzzle-card.visible { opacity: 1; transform: translateY(0); }
.puzzle-card:hover { border-left-width: 3px; background: #E5D9B8; }

.drop-cap { float: left; font-family: 'EB Garamond', serif; font-weight: 600; font-size: 64px; line-height: 1; color: var(--brass); margin-right: 16px; margin-top: 4px; padding: 4px 8px; border: 1px solid var(--rule); position: relative; opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.3s; }
.puzzle-card.visible .drop-cap { opacity: 1; transform: scale(1); }
.drop-cap::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(184,134,11,0.05) 0%, transparent 70%); }

.puzzle-type { display: block; font-family: 'EB Garamond', serif; font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rule); margin-bottom: 8px; }
.chapter-heading { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 32px; letter-spacing: 0.01em; color: var(--walnut); font-variant: small-caps; margin-bottom: 16px; }
.body-text { color: var(--mahogany); margin-bottom: 12px; }
.body-text em { font-style: italic; }
.puzzle-meta { display: block; font-family: 'EB Garamond', serif; font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rule); margin-top: 16px; }

.reveal-link { display: inline-block; font-family: 'Spectral', serif; font-weight: 300; font-style: italic; font-size: 13px; color: var(--faded-ink); text-decoration: none; margin-top: 12px; border-bottom: 1px solid transparent; transition: border-color 0.3s; cursor: pointer; }
.reveal-link:hover { border-bottom-color: var(--faded-ink); }
.hidden-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, opacity 0.4s; opacity: 0; }
.hidden-content.open { max-height: 200px; opacity: 1; }
.hint-text { background: #F0E5C8; padding: 16px; margin-top: 12px; border-left: 1px solid var(--rule); }

.tome-footer { text-align: center; padding: 56px 0 28px; }
.wax-seal { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, var(--burgundy) 40%, #5C1A00 100%); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), inset 0 -1px 2px rgba(255,255,255,0.1); }
.seal-letter { font-family: 'EB Garamond', serif; font-weight: 500; font-size: 20px; color: var(--parchment); }
.footer-text { font-family: 'EB Garamond', serif; font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rule); }

@media (max-width: 768px) {
    .text-block { padding-left: 24px; }
    .marginalia-nav { display: none; }
    .margin-ornament { display: none; }
    .hero-title { font-size: 36px; }
    .chapter-heading { font-size: 24px; }
    .drop-cap { font-size: 48px; }
}