:root {
    /* Wood Palette */
    --paper: #bb8931;
    --oak-light: #8e6f40;
    --oak: #865812;
    --walnut: #a15b30;
    --walnut-dark: #24160d;
    --bark: #846c57;

    /* Ink */
    --ink-main: #2a1a10;
    --ink-soft: #6a4a35;
}

/* ================= RESET ================= */

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

/* ================= BASE ================= */

body {
    background:
        radial-gradient(circle at 12% 18%, rgba(0,0,0,0.035), transparent 45%),
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.015) 0px,
            rgba(0,0,0,0.015) 1px,
            transparent 2px,
            transparent 6px
        ),
        var(--paper);
    color: var(--ink-main);
    font-family: 'Alegreya', serif;
    line-height: 1.75;
    overflow-x: hidden;
}

/* ================= TYPOGRAPHY ================= */

/* Headings – print / archive feel */
.serif,
h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--walnut-dark);
}

/* Large editorial titles */
.hero-title {
    font-size: clamp(3.2rem, 8vw, 8rem);
    line-height: 0.95;
}

/* Body text */
p {
    font-size: 1.08rem;
    color: var(--ink-main);
    max-width: 70ch;
}

/* Poetic / accent line */
.cursive {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--bark);
    letter-spacing: 0.04em;
}

/* Meta / labels / UI */
.mono {
    font-family: 'Recursive', sans-serif;
    font-variation-settings:
        "MONO" 1,
        "CRSV" 0.4,
        "slnt" -8;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ================= REVEALS ================= */

.reveal {
    opacity: 0;
    transform: translateY(42px);
    transition: all 1.15s cubic-bezier(0.19,1,0.22,1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================= PAGE TRANSITIONS ================= */

.page-node { display: none; }

.page-node.active {
    display: block;
    animation: fadeIn 0.9s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ================= SEARCH OVERLAY ================= */

#search-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, var(--oak-light), var(--oak));
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

#search-overlay.active {
    display: flex;
    animation: slideDown 0.8s cubic-bezier(0.19,1,0.22,1);
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* ================= BUTTONS ================= */

.btn-editorial {
    font-family: 'Recursive', sans-serif;
    font-variation-settings:
        "MONO" 1,
        "slnt" -10;
    padding: 1.25rem 2.7rem;
    border: 1px solid var(--walnut);
    background: transparent;
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--walnut-dark);
    transition: all 0.45s ease;
}

.btn-editorial:hover {
    background: var(--walnut-dark);
    color: var(--paper);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(58,36,22,0.25);
}

/* ================= PANELS ================= */

#cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    max-width: 450px;
    background: linear-gradient(180deg, var(--paper), var(--oak-light));
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.77,0,0.175,1);
    box-shadow: -20px 0 50px rgba(0,0,0,0.08);
    z-index: 10001;
}

#cart-panel.active {
    transform: translateX(0);
}

/* ================= PARALLAX ================= */

.parallax-section {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* ================= TOAST ================= */

#toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--walnut-dark);
    color: var(--paper);
    padding: 1rem 2rem;
    font-family: 'Recursive', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    transition: 0.5s;
    z-index: 20000;
}

#toast.active {
    transform: translateX(-50%) translateY(0);
}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--bark),
        var(--walnut)
    );
    border-radius: 10px;
}
.handwritten {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  color: var(--bark);
  letter-spacing: 0.02em;
  line-height: 1;
}