/* =========================================================
   bunnygirl.bar — moonlit conservatory
   Day mode (marble-classical) / Night mode (dark-neon)
========================================================= */

/* ---------- Tokens ---------- */
:root {
    --ms: 1.618;
    --fs-0: 1rem;
    --fs-1: calc(var(--fs-0) * var(--ms));
    --fs-2: calc(var(--fs-1) * var(--ms));
    --fs-3: calc(var(--fs-2) * var(--ms));
    --fs-4: calc(var(--fs-3) * var(--ms));
    --fs-5: calc(var(--fs-4) * var(--ms));

    --col-w: 720px;

    /* Day palette */
    --bg: #f6f1e7;        /* pentelic marble cream */
    --ink: #1f1a14;       /* inkwell brown-black */
    --moss: #7d8a72;      /* conservatory moss-green */
    --bronze: #c2a878;    /* aged-bronze gilt */
    --rose: #a23a4e;      /* madder-rose pigment */
    --line: #1f1a14;      /* default stroke */
    --accent: #a23a4e;    /* current accent (rose by day, magenta by night) */
    --underline: #c2a878; /* counter underline */
    --halo: 0 0 0 transparent;
    --transition: background-color 1200ms ease, color 1200ms ease, fill 1200ms ease, stroke 1200ms ease, filter 1200ms ease, box-shadow 1200ms ease, border-color 1200ms ease;
}

/* Night palette via attribute */
html[data-mode="night"] {
    --bg: #0c1410;        /* forest after-hours */
    --ink: #e8efe2;       /* moonlight cream */
    --moss: #5fffc7;      /* fern-cyan glow */
    --bronze: #fff48f;    /* sodium-lamp yellow */
    --rose: #ff6ad5;      /* hibiscus magenta */
    --line: #e8efe2;
    --accent: #ff6ad5;
    --underline: #5fffc7;
    --halo: 0 0 12px rgba(95, 255, 199, 0.55);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
    text-rendering: geometricPrecision;
}

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: "EB Garamond", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.7;
    transition: var(--transition);
    overflow-x: hidden;
}

img, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 400ms ease;
}

a:hover {
    border-bottom-color: var(--accent);
}

/* ---------- Line-art SVG global ---------- */
.line-art {
    fill: none;
    stroke: var(--line);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: var(--transition);
}

html[data-mode="night"] .line-art {
    stroke-width: 1.25;
    filter: drop-shadow(0 0 12px rgba(95, 255, 199, 0.65));
}

.line-art.draw path {
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: var(--len, 1000);
}

.line-art.draw.is-drawing path {
    animation: draw-stroke 1800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes draw-stroke {
    to { stroke-dashoffset: 0; }
}

/* ---------- Layout container ---------- */
.conservatory {
    width: 100%;
    margin: 0 auto;
}

.section {
    width: 100%;
    max-width: var(--col-w);
    margin: 0 auto;
    padding-inline: 1.5rem;
    padding-block: calc(2rem * var(--ms));
    position: relative;
}

/* Golden-ratio heights for some sections */
.threshold {
    min-height: 100vh;
    padding-block: calc(2rem * var(--ms) * var(--ms));
}

.counter-section {
    min-height: 61.8vh;
}

.frieze {
    max-width: 100%;
    padding-inline: 0;
    min-height: 61.8vh;
    text-align: center;
}

.footer-garden {
    min-height: 38.2vh;
    text-align: center;
}

/* ---------- Day/Night brass toggle ---------- */
.mode-toggle {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    background: transparent;
    border: 1px solid var(--bronze);
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    color: var(--ink);
    font-family: "Commissioner", "Helvetica Neue", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: var(--transition);
    backdrop-filter: blur(6px);
}

html[data-mode="night"] .mode-toggle {
    box-shadow: var(--halo);
}

.mode-toggle:hover {
    border-color: var(--accent);
}

.toggle-track {
    display: inline-block;
    width: 28px;
    height: 14px;
    background: transparent;
    border: 1px solid var(--bronze);
    border-radius: 999px;
    position: relative;
    transition: var(--transition);
}

.toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 10px;
    height: 10px;
    background: var(--bronze);
    border-radius: 50%;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), background-color 1200ms ease;
}

html[data-mode="night"] .toggle-thumb {
    transform: translateX(14px);
    background: var(--bronze);
}

.toggle-label::before {
    content: attr(data-day);
}

html[data-mode="night"] .toggle-label::before {
    content: attr(data-night);
}

/* ---------- Micro labels ---------- */
.micro-label {
    font-family: "Commissioner", "Helvetica Neue", sans-serif;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--moss);
    text-align: center;
    margin-bottom: calc(2rem * var(--ms));
    transition: var(--transition);
}

/* ---------- Section 1 — Threshold ---------- */
.threshold-stage {
    position: relative;
    width: 100%;
    height: clamp(360px, 56vh, 540px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 2rem;
}

.fern {
    position: absolute;
    bottom: 0;
    width: clamp(140px, 22vw, 230px);
    height: 100%;
    transform-origin: bottom center;
    will-change: transform;
    pointer-events: none;
}

.fern svg {
    width: 100%;
    height: 100%;
}

.fern-left {
    left: 0;
}

.fern-right {
    right: 0;
}

.caryatid {
    position: relative;
    width: clamp(220px, 36vw, 340px);
    height: 100%;
    z-index: 2;
}

.caryatid svg {
    width: 100%;
    height: 100%;
}

.caryatid .rabbit-ears {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: var(--transition);
}

html[data-mode="night"] .caryatid .rabbit-ears {
    filter: drop-shadow(0 0 10px rgba(255, 106, 213, 0.7));
}

.wordmark {
    font-family: "Libre Baskerville", "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(3.5rem, 7.2vw, 6rem);
    letter-spacing: -0.012em;
    line-height: 1.05;
    text-align: center;
    margin: calc(1rem * var(--ms)) 0 1rem;
    color: var(--ink);
    transition: var(--transition);
}

.invitation {
    font-family: "EB Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.7;
    text-align: center;
    max-width: 36ch;
    margin: 0 auto;
    color: var(--ink);
    opacity: 0.9;
    transition: var(--transition);
}

/* ---------- Section 2 — Counters ---------- */
.counters {
    display: flex;
    flex-direction: column;
    gap: calc(2rem * var(--ms));
    align-items: center;
}

@media (min-width: 720px) {
    .counters {
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
    }
}

.counter-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.counter-number {
    font-family: "Libre Baskerville", "Times New Roman", serif;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    transition: var(--transition);
    display: block;
}

.counter-underline {
    width: 80%;
    max-width: 240px;
    height: 6px;
    margin-top: 0.5rem;
    overflow: visible;
}

.counter-underline line {
    fill: none;
    stroke: var(--underline);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    transition: stroke 1200ms ease;
}

html[data-mode="night"] .counter-underline line {
    filter: drop-shadow(0 0 6px rgba(95, 255, 199, 0.7));
}

.counter-cell.is-counted .counter-underline line {
    animation: draw-underline 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes draw-underline {
    to { stroke-dashoffset: 0; }
}

.counter-caption {
    margin-top: 1rem;
    font-family: "EB Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink);
    opacity: 0.85;
    max-width: 22ch;
}

/* ---------- Section 3 — Herbarium ---------- */
.section-heading {
    font-family: "Libre Baskerville", "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    letter-spacing: -0.012em;
    line-height: 1.1;
    text-align: center;
    margin: 0 0 calc(2rem * var(--ms));
    color: var(--ink);
    transition: var(--transition);
}

.plants {
    display: flex;
    flex-direction: column;
    gap: calc(2rem * var(--ms) * var(--ms));
    align-items: center;
}

.plant {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 520px;
    gap: 1.25rem;
}

.plant-art {
    width: clamp(220px, 40vw, 360px);
    height: clamp(320px, 50vw, 480px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plant-art svg {
    width: 100%;
    height: 100%;
}

.plant-text {
    max-width: 36ch;
}

.plant-binomial {
    font-family: "EB Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    margin: 0 0 0.4rem;
    color: var(--ink);
    transition: var(--transition);
}

.plant-note {
    font-family: "EB Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    color: var(--ink);
    opacity: 0.85;
    transition: var(--transition);
}

/* ---------- Section 4 — Marble Frieze ---------- */
.frieze-band {
    width: 100%;
    height: 64px;
    overflow: hidden;
    position: relative;
    margin-block: calc(1rem * var(--ms));
    transition: var(--transition);
}

html[data-mode="night"] .frieze-band {
    box-shadow: inset 0 0 24px rgba(95, 255, 199, 0.4);
}

.meander {
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image:
        linear-gradient(to right, var(--bronze) 0, var(--bronze) 6px, transparent 6px),
        linear-gradient(to right, var(--bronze) 0, var(--bronze) 6px, transparent 6px),
        linear-gradient(to bottom, var(--bronze) 0, var(--bronze) 6px, transparent 6px),
        linear-gradient(to bottom, var(--bronze) 0, var(--bronze) 6px, transparent 6px),
        linear-gradient(to right, var(--bronze) 0, var(--bronze) 6px, transparent 6px),
        linear-gradient(to right, var(--bronze) 0, var(--bronze) 6px, transparent 6px);
    background-repeat: repeat-x;
    background-size:
        40px 6px,
        40px 6px,
        6px 32px,
        6px 32px,
        24px 6px,
        24px 6px;
    background-position:
        0 8px,
        20px 50px,
        12px 8px,
        32px 24px,
        18px 24px,
        6px 40px;
    animation: meander-flow 90s linear infinite;
    transition: var(--transition);
}

html[data-mode="night"] .meander {
    filter: drop-shadow(0 0 6px rgba(95, 255, 199, 0.5));
}

@keyframes meander-flow {
    from { background-position: 0 8px, 20px 50px, 12px 8px, 32px 24px, 18px 24px, 6px 40px; }
    to   { background-position: 200px 8px, 220px 50px, 212px 8px, 232px 24px, 218px 24px, 206px 40px; }
}

.frieze-heading {
    font-family: "Libre Baskerville", "Times New Roman", serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    margin: calc(1rem * var(--ms)) 0;
    font-feature-settings: "smcp" 1;
    color: var(--ink);
    transition: var(--transition);
}

.frieze-heading span {
    border-bottom: 1px solid var(--bronze);
    padding-bottom: 0.4rem;
    transition: border-color 1200ms ease;
}

.hours {
    text-align: center;
    margin: 1.5rem auto;
}

.hours-line {
    display: inline-flex;
    gap: 1.25rem;
    align-items: baseline;
    justify-content: center;
    margin: 0;
}

.roman {
    font-family: "Libre Baskerville", "Times New Roman", serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: 0.06em;
    font-feature-settings: "smcp" 1;
    color: var(--ink);
    transition: var(--transition);
}

.hours-divider {
    color: var(--moss);
    font-size: 1.5rem;
    transition: var(--transition);
}

.hours-arabic {
    font-family: "Commissioner", "Helvetica Neue", sans-serif;
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0.6rem 0 0;
    color: var(--moss);
    transition: var(--transition);
}

/* ---------- Section 5 — Footer Garden ---------- */
.garden-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    max-width: 720px;
    margin: 0 auto calc(1rem * var(--ms));
    height: 240px;
    padding-inline: 1rem;
}

.garden-stem {
    width: clamp(40px, 8vw, 60px);
    height: 100%;
    flex: 0 0 auto;
}

.garden-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0 auto 1rem;
    font-family: "Commissioner", "Helvetica Neue", sans-serif;
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.garden-links a {
    transition: color 600ms ease, border-color 600ms ease;
}

.garden-links a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.signoff {
    font-family: "EB Garamond", Georgia, serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--ink);
    margin: 1rem auto 0.4rem;
    opacity: 0.9;
    text-align: center;
    max-width: 32ch;
}

.signoff-stamp {
    font-family: "Commissioner", "Helvetica Neue", sans-serif;
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--moss);
    margin: 0 0 calc(1rem * var(--ms));
    transition: var(--transition);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 540px) {
    .threshold-stage {
        height: clamp(320px, 50vh, 420px);
    }

    .fern {
        opacity: 0.55;
    }

    .frieze-band {
        height: 48px;
    }

    .garden-row {
        height: 180px;
    }

    .garden-links {
        gap: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .line-art.draw path,
    .counter-cell.is-counted .counter-underline line,
    .meander,
    .toggle-thumb {
        animation: none !important;
        transition: none !important;
        stroke-dashoffset: 0 !important;
    }

    html, body, * {
        scroll-behavior: auto !important;
    }
}