/* scire.bar - Fairycore Knowledge Tavern */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --forest-parchment: #F5EFE0;
    --moss-velvet: #2D4A3E;
    --lantern-gold: #D4A843;
    --fairy-violet: #7B5EA7;
    --berry-red: #A63D40;
    --bark-brown: #6B4E35;
    --deep-forest: #1A2E1A;
    --lichen-sage: #6A7A6A;
}
body {
    background: var(--forest-parchment);
    color: var(--deep-forest);
    font-family: 'Crimson Text', serif;
    font-size: 1.05rem;
    line-height: 1.85;
    font-weight: 400;
    overflow-x: hidden;
}

/* Hero */
#hero {
    text-align: center;
    padding: 5rem 2rem 3rem;
    position: relative;
}
.lantern-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.glow-hero {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212,168,67,0.2) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hero-content {
    position: relative;
    z-index: 1;
}
.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    font-style: italic;
    color: var(--deep-forest);
}
.hero-subtitle {
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    color: var(--lichen-sage);
    margin-top: 0.5rem;
}
.fairy-ring {
    display: block;
    width: 120px;
    margin: 2rem auto;
}

/* Spreads */
#spreads {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}
.spread {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0 40px;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.spread.visible {
    opacity: 1;
    transform: translateY(0);
}
.page {
    position: relative;
    padding: 2rem 0;
}
.spine {
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--bark-brown) 20%, var(--bark-brown) 80%, transparent 100%);
    transform: perspective(200px) rotateY(2deg);
}
.glow-tl { width: 200px; height: 200px; background: radial-gradient(circle, rgba(212,168,67,0.12) 0%, transparent 70%); top: -20px; left: -40px; }
.glow-tr { width: 180px; height: 180px; background: radial-gradient(circle, rgba(212,168,67,0.1) 0%, transparent 70%); top: 10px; right: -30px; }
.glow-bl { width: 160px; height: 160px; background: radial-gradient(circle, rgba(212,168,67,0.1) 0%, transparent 70%); bottom: -10px; left: -20px; }
.glow-br { width: 180px; height: 180px; background: radial-gradient(circle, rgba(212,168,67,0.12) 0%, transparent 70%); bottom: 0; right: -30px; }
.page-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
    color: var(--deep-forest);
    margin-bottom: 1rem;
}
.page-body {
    color: var(--deep-forest);
    margin-bottom: 1rem;
}
.page-body:last-child { margin-bottom: 0; }

/* Menu Board */
.menu-board {
    background: var(--moss-velvet);
    border-radius: 8px;
    padding: 3rem;
    margin: 3rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.menu-board.visible {
    opacity: 1;
    transform: translateY(0);
}
.menu-title {
    font-family: 'Special Elite', cursive;
    font-size: 1.5rem;
    color: var(--lantern-gold);
    text-align: center;
    margin-bottom: 2rem;
}
.menu-items {
    max-width: 500px;
    margin: 0 auto;
}
.menu-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 1rem;
}
.menu-name {
    font-family: 'Special Elite', cursive;
    font-size: 1rem;
    color: #F5EFE0;
    white-space: nowrap;
}
.menu-dots {
    flex: 1;
    border-bottom: 1px dotted rgba(245,239,224,0.3);
    min-width: 20px;
    margin-bottom: 4px;
}
.menu-desc {
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    color: rgba(245,239,224,0.6);
    white-space: nowrap;
}

/* Section animation */
.section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Footer */
#footer {
    text-align: center;
    padding: 3rem 2rem;
    border-top: 1px solid rgba(107,78,53,0.2);
}
.footer-text {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--lichen-sage);
}

/* Responsive */
@media (max-width: 700px) {
    .spread {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .spine { display: none; }
    .page { padding: 1.5rem 0; }
}