/* ── Variables & reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-deep:       #06060a;
    --bg-mid:        #0e0e18;
    --bg-card:       #13131f;
    --accent-mauve:  #b081ba;
    --accent-mint:   #adfff2;
    --text-primary:  #f2ede8;
    --text-secondary:rgba(242,237,232,0.55);
    --text-muted:    rgba(242,237,232,0.28);
    --border:        rgba(176,129,186,0.18);
    --font-display:  'Cormorant Garamond', serif;
    --font-ui:       'Syne', sans-serif;
}

html  { scroll-behavior: smooth; }
body  {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-ui);
    overflow-x: hidden;
}

/* Grain texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9998;
    opacity: 0.45;
}

/* ── Custom cursor (desktop / hover-capable only) ────────────────────── */
@media (hover: hover) {
    body { cursor: none; }
    a, button { cursor: none; }
}

#cursor-note {
    display: none;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%,-100%) translateY(-6px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
#cursor-note svg {
    transition: filter 0.3s ease;
    filter:
        drop-shadow(-0.6px -0.6px 0 black)
        drop-shadow( 0.6px -0.6px 0 black)
        drop-shadow(-0.6px  0.6px 0 black)
        drop-shadow( 0.6px  0.6px 0 black)
        drop-shadow(0 0 3px rgba(173,255,242,0.35));
}
#cursor-dot {
    display: none;
    position: fixed;
    width: 5px; height: 5px;
    background: var(--accent-mint);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
}
@media (hover: hover) {
    #cursor-note, #cursor-dot { display: block; }
    body.cursor-ready #cursor-note,
    body.cursor-ready #cursor-dot { opacity: 1; }
}

/* ── Section labels & headings ───────────────────────────────────────── */
.section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-mauve);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.section-label::before {
    content: '';
    width: 26px; height: 1px;
    background: var(--accent-mauve);
    flex-shrink: 0;
}
.section-heading {
    font-family: var(--font-display);
    font-size: clamp(32px, 8vw, 66px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bg-deep);
    background: var(--accent-mint);
    border: none;
    padding: 15px 30px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn-primary:hover, .btn-primary:focus-visible {
    background: #d4fff9;
    transform: translateY(-2px);
    box-shadow: 0 14px 44px rgba(173,255,242,0.28);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline {
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid rgba(242,237,232,0.25);
    padding: 15px 30px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn-outline:hover, .btn-outline:focus-visible {
    border-color: var(--accent-mauve);
    color: var(--accent-mauve);
    transform: translateY(-2px);
}
.btn-outline:active { transform: translateY(0); }

/* ── Scroll reveal ───────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.85s cubic-bezier(0.4,0,0.2,1),
                transform 0.85s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }

/* ── Generic page layout (page.php) ──────────────────────────────────── */
.page-content { background: var(--bg-mid); padding: 160px 24px 80px; }
.page-inner   { max-width: 800px; margin: 0 auto; }
.body-text    { font-size: 15px; line-height: 1.85; color: var(--text-secondary); margin-top: 28px; }
.body-text p + p { margin-top: 20px; }

@media (min-width: 900px) {
    .page-content { padding: 160px 72px 120px; }
}