/* ============================================================
   MASTER.CSS — Audio Engineer Portfolio
   Premium dark-mode aesthetic · Glassmorphism nav
   Pure CSS dropdowns & hamburger menu
   ============================================================ */

/* ---------- Google Fonts ---------- */
/* The Modular Synth font pairing: Manrope for primary + Space Grotesk for display */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ---------- Custom Properties (Design Tokens) ---------- */
:root {
    /* — Palette (φ-locked: saturation = 100/φ ≈ 61.8%, lightness from φ²) — */
    --clr-bg: #07070b;
    --clr-surface: #0f0f17;
    --clr-surface-2: #16161f;
    --clr-glass: rgba(12, 12, 20, 0.72);
    --clr-glass-border: rgba(255, 255, 255, 0.06);
    --clr-text: #e8e6e3;
    --clr-text-dim: #8a8a96;
    --clr-accent: hsl(42, 61.8%, 42%);
    /* φ-locked warm gold — S = 100/φ, L tuned for contrast */
    --clr-accent-glow: hsla(42, 61.8%, 42%, 0.25);
    --clr-hover-bg: rgba(255, 255, 255, 0.04);
    --clr-dropdown-bg: rgba(14, 14, 22, 0.92);

    /* — Typography (Manrope 300-700 + Space Grotesk 300-700) — */
    --ff-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ff-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* — φ-Modular Type Scale (base 1rem, ratio φ = 1.618) — */
    --fs-phi-5: 0.146rem;
    /* 1/φ⁵ */
    --fs-phi-4: 0.236rem;
    /* 1/φ⁴ */
    --fs-phi-3: 0.382rem;
    /* 1/φ³ */
    --fs-phi-2: 0.618rem;
    /* 1/φ² */
    --fs-phi-1: 0.764rem;
    /* 1/φ¹·⁵ — half-step */
    --fs-body: 1rem;
    /* φ⁰ = 16px base */
    --fs-phi1: 1.236rem;
    /* φ⁰·⁵ — half-step */
    --fs-phi2: 1.618rem;
    /* φ¹ */
    --fs-phi3: 2.618rem;
    /* φ² */
    --fs-phi4: 4.236rem;
    /* φ³ */
    --fs-phi5: 6.854rem;
    /* φ⁴ */

    --fs-nav: 1.15rem;
    --fs-nav-sub: 1.05rem;
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi: 600;
    --fw-bold: 700;
    --ls-body: 0.02em;
    --ls-nav: 0.08em;
    --ls-nav-wide: 0.10em;
    --lh-body: 1.618;
    /* φ line-height for body */
    --lh-heading: 1.3em;

    /* — Spacing (Phi-based: 1 · 1.618 · 2.618 · 4.236 …) — */
    --sp-xs: 0.382rem;
    /* ~6px  = 1/φ² */
    --sp-sm: 0.618rem;
    /* ~10px = 1/φ  */
    --sp-md: 1rem;
    /* 16px  = φ⁰   */
    --sp-lg: 1.618rem;
    /* ~26px = φ¹   */
    --sp-xl: 2.618rem;
    /* ~42px = φ²   */
    --sp-2xl: 4.236rem;
    /* ~68px = φ³   */
    --sp-section: 3.75rem;

    /* — Layout (Fibonacci container) — */
    --container-max: 987px;
    /* Fibonacci number — nearest to 960, mathematically grounded */
    --nav-height: 3.6rem;
    --nav-blur: 18px;
    --radius: 6px;

    /* — Transitions (Phi-based) — */
    --t-phi-base: 618ms;
    --t-phi-fast: 382ms;
    --t-phi-slow: 1000ms;
    --t-phi-xs: 236ms;
    --t-phi-xslow: 1618ms;
    --t-phi-xxslow: 2618ms;

    /* — φ-Derived Easing (control points at 1/φ and 1-1/φ) — */
    --ease-phi: cubic-bezier(0.382, 0.0, 0.618, 1.0);
    --ease-phi-out: cubic-bezier(0.0, 0.382, 0.382, 1.0);
    --ease-phi-in: cubic-bezier(0.618, 0.0, 1.0, 0.618);

    --transition: var(--t-phi-fast) var(--ease-phi);
    /* 382ms with φ-easing */
    --transition-slow: var(--t-phi-base) var(--ease-phi);
    /* 618ms with φ-easing */
    --transition-slide: var(--t-phi-base) var(--ease-phi-out);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #000;
}

/* View Transitions disabled — replaced by ternary {1,0,-1} overlay system
   (js/ternary-transition.js) which handles all page navigation transitions.
   The browser's MPA snapshot transitions were creating white rectangles
   for named elements (navbar, nav-menu) during cross-page navigation. */

body {
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-extralight);
    /* Uses the new Manrope 200 weight */
    color: var(--clr-text);
    background-color: var(--clr-bg);
    letter-spacing: var(--ls-body);
    /* 0.02em — old site paragraph tracking */
    line-height: var(--lh-body);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
    /* elegant phi transition on all links */
}

ul,
ol {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* — Headings (φ-modular scale) — */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ff-display);
    line-height: var(--lh-heading);
    letter-spacing: 0.01em;
}

h2 {
    padding-bottom: 0.8em;
    font-weight: var(--fw-bold);
    font-size: var(--fs-phi1);
    /* φ⁰·⁵ ≈ 1.236rem — replaces arbitrary 1.25rem */
}

/* — Paragraphs — */
p {
    padding-bottom: 0.5em;
    /* old site paragraph spacing */
    line-height: 1.5em;
    /* old site paragraph line height */
}

/* — Blockquotes (style from old site) — */
blockquote {
    position: relative;
    display: block;
    margin: var(--sp-sm) 0;
    padding: 0 2em;
    font-family: var(--ff-primary);
    font-size: 1.125rem;
    /* 18px — old site */
    font-weight: var(--fw-normal);
    line-height: 1.8em;
    color: var(--clr-text-dim);
    border-left: 2px solid var(--clr-accent);
}

blockquote::before {
    position: relative;
    vertical-align: middle;
    font-family: var(--ff-display);
    font-size: 3.5rem;
    /* old site: 56px */
    font-weight: var(--fw-bold);
    line-height: 0;
    color: var(--clr-accent);
    content: '\201C';
    left: -5px;
}

/* — Containers (Fibonacci max-width: 987px) — */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sp-xl);
    box-sizing: border-box;
}

/* — Section wrapper — */
.section {
    padding: var(--sp-2xl) 0;
    /* Extra padding for restfulness */
    text-align: left;
    /* Anchoring text left for comfortable reading */
}

.section--surface {
    background: var(--clr-surface);
}

.section--alt {
    background: var(--clr-surface-2);
}

/* ============================================================
   HERO / BACKGROUND
   ============================================================ */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    /* — Background image (replace URL with your own file) — */
    background-image: url('../img/hero-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    /* Fallback gradient when no image is present */
    background-color: var(--clr-bg);
}

/* Shorter hero for subpages — just enough for the nav */
.hero--short {
    min-height: 34vh;
}

/* Immersive full-width custom bg variant for subpages with photos.
   Apply bg image via inline style: style="background-image: url('path/to/img.jpg')" */
.hero--custom-bg {
    min-height: 100vh;
    /* Fill the entire screen */
    background: transparent;
    /* JS fixed layers handle the image */
    justify-content: flex-end;
    /* push nav + title to the bottom */
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
}

/* On pages with a full-screen photo slideshow, the body must be transparent
   so the fixed z-index:-1 slideshow layers show through all sections */
.has-slideshow {
    background: transparent;
}

/* Very light gradient so the photo still reads correctly at the bottom */
.hero--custom-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(7, 7, 11, 0.15) 0%,
            rgba(7, 7, 11, 0.0) 45%,
            rgba(7, 7, 11, 0.45) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Glassmorphism floating title chip at the bottom of the hero */
.hero__page-card {
    position: relative;
    z-index: 2;
    padding: var(--sp-xl) var(--sp-lg) var(--sp-2xl);
    text-align: center;
    /* Fade the card container in with the title */
    opacity: 0;
    animation: phiFadeIn var(--t-phi-slow) var(--ease-phi) var(--t-phi-fast) forwards;
}

/* Ensure nav floats above the gradient overlay */
.hero--custom-bg .navbar {
    position: relative;
    z-index: 2;
}

/* Page title floating over the hero image — clean, thin, no pill */
.hero__page-card .page__title {
    display: inline-block;
    font-size: clamp(1.2rem, 3.5vw, 2.4rem);
    font-weight: var(--fw-extralight);
    /* 200 — very thin */
    letter-spacing: 0.12em;
    /* wide tracking suits thin weight */
    color: rgba(232, 230, 227, 0.82);
    /* slightly translucent */
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
    border-bottom: none;
    margin-bottom: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
    opacity: inherit;
    animation: none;
}

/* Standard page title (used on subpages below the hero) */
.page__title {
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 3vw, 2.618rem);
    font-weight: var(--fw-bold);
    color: var(--clr-text);
    margin-bottom: var(--sp-lg);
    padding-bottom: var(--sp-sm);
    border-bottom: 1px solid var(--clr-glass-border);
}

/* Content section that scrolls over a fixed hero image. */
.section--over-hero {
    position: relative;
    z-index: 1;
    background: transparent;
    border-top: none;
}

/* Welcome section (landing page) */
.section--welcome {
    text-align: center;
    background: var(--clr-surface);
}

.section--welcome .section__title {
    font-family: var(--ff-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: var(--fw-bold);
    color: var(--clr-text);
    margin-bottom: var(--sp-md);
}

/* Links list & Inline Text Links */
.links-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    font-size: 0.85rem;
}

.page__content {
    line-height: var(--lh-body);
    font-size: 0.88rem;
    font-weight: var(--fw-extralight);
    letter-spacing: 0.06em;
    color: rgba(232, 230, 227, 0.72);
    margin-left: auto;
    margin-right: -2rem;
    text-align: left;
}

.content-block {
    margin-bottom: var(--sp-xl);
    padding-bottom: var(--sp-lg);
}

/* — Cinematic Intro Scene — */
.intro-scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    /* Below the scrolling credits */
    pointer-events: none;
    /* Let empty space pass clicks */
}

/* Push the welcome text lower specifically on the landing page */
.navbar--horizontal~.section .intro-scene {
    justify-content: flex-end;
    padding-bottom: 12vh;
}

.intro-scene .container {
    width: 100%;
}

.intro {
    font-size: 0.88rem;
    line-height: var(--lh-body);
    font-weight: var(--fw-extralight);
    letter-spacing: 0.06em;
    color: rgba(232, 230, 227, 0.72);
    pointer-events: auto;
    margin-left: auto;
    margin-right: -2rem;
    /* No max-width — container (987px) constrains width.
       Keeps list-style entries on a single line. */
    text-align: left;
}

/* ============================================================
   DESKTOP TYPOGRAPHY SCALING (Web Only)
   ============================================================ */
@media (min-width: 768px) {
    .page__content {
        font-size: 1.05rem;
        padding-left: 14rem;
        /* Clear the fixed left nav */
    }

    .intro {
        font-size: 1.05rem;
        padding-left: 14rem;
    }

    .links-list {
        font-size: clamp(0.85rem, 1.25vw, 1.05rem);
    }

    .nav-link {
        font-size: clamp(0.85rem, 1.25vw, 1.05rem);
    }

    .dropdown__link {
        font-size: 1rem;
    }
}

/* — Scroll prompt — */
.scroll-prompt {
    font-size: var(--fs-phi-1);
    /* φ-scale caption step */
    font-weight: var(--fw-extralight);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
    margin-top: var(--sp-2xl);
    /* φ³ spacing below intro */
    margin-left: auto;
    text-align: right;
    animation: promptPulse 3.5s infinite ease-in-out;
}

@keyframes promptPulse {

    0%,
    100% {
        opacity: 0.15;
    }

    50% {
        opacity: 0.7;
    }
}

/* — Scrolling Credits Container — */
.credits-container {
    position: relative;
    z-index: 2;
    /* Scrolls over the fixed intro-scene */
    margin-top: 100vh;
    /* Push credits completely below the fold initially */
}


/* — Credits heading — */
.credits__heading {
    font-size: var(--fs-phi-1);
    /* φ-scale caption step */
    font-weight: var(--fw-extralight);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(232, 230, 227, 0.65);
    margin-bottom: var(--sp-xl);
    text-align: right;
}

/* — Individual credit entry — */
.credit {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-bottom: var(--sp-2xl);
    /* φ³ between entries */
    padding-bottom: var(--sp-lg);
    /* φ breathing room */
    border-bottom: none;
    /* scroll fade-in */
    opacity: 0;
    transform: translateY(var(--sp-md));
    transition: transform 800ms ease-out;
}

.credit.is-visible {
    transform: translateY(0);
}

.credit__year {
    display: block;
    font-size: var(--fs-phi-1);
    /* φ-scale caption */
    font-weight: var(--fw-extralight);
    letter-spacing: 0.18em;
    color: rgba(232, 230, 227, 0.65);
    margin-bottom: var(--sp-xs);
}

.credit__role {
    display: block;
    font-size: var(--fs-body);
    /* φ⁰ baseline */
    font-weight: var(--fw-light);
    letter-spacing: 0.08em;
    color: rgba(232, 230, 227, 0.85);
    margin-bottom: var(--sp-xs);
    border-bottom: none;
    text-transform: uppercase;
}

.credit__title {
    display: block;
    font-size: var(--fs-body);
    /* φ⁰ baseline */
    font-weight: var(--fw-light);
    letter-spacing: 0.04em;
    color: rgba(232, 230, 227, 0.90);
    margin-bottom: var(--sp-xs);
}

.credit__artists {
    display: block;
    font-size: var(--fs-phi-1);
    /* φ⁻¹·⁵ half-step */
    font-weight: var(--fw-extralight);
    letter-spacing: 0.06em;
    color: rgba(232, 230, 227, 0.72);
    margin-bottom: var(--sp-sm);
    line-height: 1.8;
}

.credit__label {
    display: block;
    font-size: var(--fs-phi-2);
    /* 1/φ² ≈ 0.618rem */
    font-weight: var(--fw-extralight);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(232, 230, 227, 0.55);
    border-bottom: none;
}

/* Links — subtle, barely tinted, not bold gold */
.links-list li a,
.page__content a {
    display: inline;
    padding: 0;
    color: rgba(232, 230, 227, 0.55);
    font-weight: var(--fw-extralight);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color var(--transition), border-bottom-color var(--transition);
}

.links-list li a:hover,
.page__content a:hover {
    color: var(--clr-hi, rgba(232, 230, 227, 0.90));
    border-bottom-color: var(--clr-hi, rgba(201, 168, 76, 0.35));
    text-shadow: 0 0 14px color-mix(in srgb, var(--clr-hi, var(--clr-accent)) 30%, transparent);
}

/* — Contact form (Glassmorphism — thin bezels, translucent, sleek) — */
.contact-form {
    max-width: 32rem;
    margin: var(--sp-2xl) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
    text-align: left;
}

.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.form-label {
    font-size: var(--fs-phi-2);
    /* 1/φ² ≈ 0.618rem */
    font-weight: var(--fw-extralight);
    color: var(--clr-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin-bottom: var(--sp-xs);
    transition: color var(--transition);
}

.form-input,
.form-textarea {
    width: 100%;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-extralight);
    color: var(--clr-text);
    /* Glassmorphism: translucent background with backdrop blur */
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* Thin bezel — single pixel, barely-there border */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    padding: var(--sp-sm) var(--sp-md);
    transition:
        border-color var(--t-phi-base) var(--ease-phi),
        background var(--t-phi-base) var(--ease-phi);
    box-sizing: border-box;
    letter-spacing: 0.04em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-input:hover,
.form-textarea:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
}

/* Label highlighting when input is focused */
.form-group:focus-within .form-label {
    color: var(--clr-text);
}

.form-textarea {
    resize: none;
    min-height: 100px;
    line-height: var(--lh-body);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(232, 230, 227, 0.18);
    font-weight: var(--fw-extralight);
    letter-spacing: 0.06em;
}

/* Sleek minimal Submit — thin bezel capsule */
.btn-submit {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    padding: var(--sp-xs) var(--sp-lg);
    margin-top: var(--sp-sm);
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    color: var(--clr-text-dim);
    font-family: var(--ff-primary);
    font-size: var(--fs-phi-2);
    font-weight: var(--fw-extralight);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    cursor: pointer;
    transition:
        color var(--t-phi-base) var(--ease-phi),
        border-color var(--t-phi-base) var(--ease-phi),
        background var(--t-phi-base) var(--ease-phi);
}

.btn-submit::after {
    content: '↗';
    font-size: var(--fs-body);
    font-family: sans-serif;
    transform: translateY(0);
    transition: transform var(--t-phi-fast) var(--ease-phi);
}

.btn-submit:hover {
    color: var(--clr-text);
    border-color: rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.05);
}

.btn-submit:hover::after {
    transform: translate(3px, -2px);
}

/* Dark overlay for legibility */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(7, 7, 11, 0.60) 0%,
            rgba(7, 7, 11, 0.35) 40%,
            rgba(7, 7, 11, 0.70) 100%);
    z-index: 1;
}

/* Subtle radial accent glow */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 45%,
            var(--clr-accent-glow) 0%,
            transparent 70%);
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}

.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--sp-xl) var(--sp-lg);
    max-width: 48rem;
}

.hero__title {
    font-family: var(--ff-display);
    /* Playfair Display serif */
    font-size: clamp(2rem, 5vw, 4.236rem);
    font-weight: var(--fw-bold);
    /* 700 — matches old site logo/title weight */
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--clr-text);
    margin-bottom: var(--sp-md);
}

.hero__title span {
    color: var(--clr-accent);
}

.hero__subtitle {
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    font-weight: var(--fw-normal);
    color: var(--clr-text-dim);
    letter-spacing: 0.04em;
    max-width: 36rem;
    margin: 0 auto;
}

/* ============================================================
   NAVIGATION — Vertical left sidebar
   ============================================================ */
.navbar {
    position: relative;
    z-index: 10;
    width: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background: none;
}

/* Fixed variant: minimal sidebar pinned to the left, vertically centered */
.navbar--fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: 100vh;
    z-index: 100;
    background: none;
    padding: 0 0 0 calc(var(--sp-xl) * 1.5);
    display: flex;
    align-items: center;
    /* vertically center the nav cluster */
}

/* Horizontal variant for landing page */
.navbar--horizontal {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: clamp(10vh, 20vh, 30vh);
}

.navbar--horizontal .navbar__inner {
    flex-direction: row;
    align-items: center;
}

.navbar--horizontal .nav-menu {
    flex-direction: row;
    align-items: center;
    gap: clamp(var(--sp-sm), 2vw, var(--sp-lg));
}

.navbar--horizontal .dropdown {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
}

.navbar--horizontal .nav-item:hover>.dropdown,
.navbar--horizontal .nav-item:focus-within>.dropdown {
    transform: translateX(-50%) translateY(0);
}

.navbar--horizontal .dropdown::after {
    top: -1.5rem;
    left: 0;
    height: 1.5rem;
    width: 100%;
}

.navbar--horizontal .nav-link .caret {
    border-top: 3px solid currentColor;
    border-bottom: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}

.navbar--horizontal .nav-item:hover>.nav-link .caret {
    transform: translateY(3px);
}

/* Spacer pushes content down so the photo is visible on load,
   but 70vh means the title is already peeking into view. */
.slideshow-spacer {
    height: 70vh;
    pointer-events: none;
}

.navbar__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-md) var(--sp-sm);
}

/* ---------- Desktop Menu (Vertical · Compact) ---------- */
.nav-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.nav-menu>.nav-item {
    position: relative;
    width: 100%;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.35em var(--sp-sm);
    /* ultra-tight vertical rhythm */
    font-size: var(--fs-nav);
    /* small, whispery labels */
    font-weight: var(--fw-light);
    letter-spacing: 0.14em;
    /* wide tracking for tiny text */
    text-transform: uppercase;
    color: rgba(232, 230, 227, 0.60);
    /* slightly brighter ghostly labels */
    border-radius: 0;
    border-bottom: none;
    border-left: none;
    position: relative;
    transition: color var(--transition),
        background var(--transition);
    /* old site border transition */
    white-space: nowrap;
    cursor: pointer;
}

/* Gradient text highlight — --clr-hi is set per-item by JS (nav-spectrum.js)
   with a random starting hue on each page load. */

.nav-link::before {
    display: none;
}

.nav-link:hover,
.nav-link:focus-visible,
.dropdown__link:hover,
.dropdown__link:focus-visible {
    color: var(--clr-hi, rgba(232, 230, 227, 0.95));
    background: none;
    text-shadow: 0 0 18px color-mix(in srgb, var(--clr-hi, var(--clr-accent)) 40%, transparent);
}

/* Active page indicator */
.nav-link--active {
    color: var(--clr-hi, var(--clr-accent));
}

/* Tiny caret for dropdown parents — points right */
.nav-link .caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 3px solid currentColor;
    transition: transform var(--transition);
    opacity: 0.5;
}

/* ---------- Dropdown (Desktop — minimal floating text, no box) ---------- */
.dropdown {
    position: absolute;
    top: 0;
    left: calc(100% + 0.5rem);
    min-width: auto;
    padding: 0.2em 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
    pointer-events: none;
}

/* No triangle pointer */
.dropdown::before {
    display: none;
}

/* Back button (Mobile only, hidden on desktop) */
.dropdown__back-item {
    display: none;
}

/* Transparent bridge — now on the left side */
.dropdown::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    width: 1.5rem;
}

/* Show on hover */
.nav-item:hover>.dropdown,
.nav-item:focus-within>.dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.nav-item:hover>.nav-link .caret {
    transform: translateX(3px);
}

.dropdown__link {
    display: block;
    padding: 0.3em var(--sp-sm);
    font-size: var(--fs-nav-sub);
    font-weight: var(--fw-light);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232, 230, 227, 0.50);
    white-space: nowrap;
    transition: color var(--transition), text-shadow var(--transition);
}

.dropdown__link:hover,
.dropdown__link:focus-visible {
    color: var(--clr-hi, rgba(232, 230, 227, 0.95));
    background: none;
    padding-left: var(--sp-sm);
    text-shadow: 0 0 18px color-mix(in srgb, var(--clr-hi, var(--clr-accent)) 40%, transparent);
}

/* ---------- Hidden checkboxes (drives CSS-only interactivity) ---------- */
.hamburger-toggle,
.accordion-toggle {
    display: none;
}

.hamburger {
    display: none;
    /* hidden on desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1.6rem;
    height: 1.6rem;
    cursor: pointer;
    z-index: 1001;
    gap: 3px;
    /* Position in top-LEFT, small and unobtrusive */
    position: absolute;
    top: var(--sp-sm);
    left: var(--sp-sm);
}

.hamburger__bar {
    display: block;
    width: 1rem;
    height: 1.5px;
    background: var(--clr-text);
    border-radius: 1px;
    transition: transform var(--transition), opacity var(--transition);
}

/* ============================================================
   MOBILE RESPONSIVE  ( < 768px )
   ============================================================ */
@media (max-width: 767px) {

    /* Reset horizontal navbar for mobile */
    .navbar--horizontal {
        padding-top: 0;
    }

    .navbar--fixed {
        padding: 0;
    }

    .navbar--horizontal .nav-menu {
        flex-direction: column;
    }

    .hamburger {
        display: flex;
    }

    /* Animate hamburger → X  */
    .hamburger-toggle:checked~.navbar .hamburger .hamburger__bar:nth-child(1) {
        transform: translateY(4.5px) rotate(45deg);
    }

    .hamburger-toggle:checked~.navbar .hamburger .hamburger__bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger-toggle:checked~.navbar .hamburger .hamburger__bar:nth-child(3) {
        transform: translateY(-4.5px) rotate(-45deg);
    }

    /* Mobile Menu Panel — Full-screen cinematic overlay */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sp-sm);
        padding: var(--sp-xl) var(--sp-lg);
        background: rgba(4, 4, 8, 0.85);
        /* Deep dark overlay */
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        border: none;
        overflow-y: auto;

        /* Hidden by default — fade and scale in */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(0.98);
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }

    /* Show menu when checkbox is checked */
    .hamburger-toggle:checked~.navbar .nav-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: scale(1);
    }

    .nav-link {
        padding: var(--sp-md) var(--sp-lg);
        font-size: 1.6rem;
        /* Large, bold mobile links */
        font-family: var(--ff-display);
        letter-spacing: 0.1em;
        text-align: center;
        border: none;
        background: none;
        width: 100%;
        justify-content: center;
    }

    /* Reset nav-item to static so submenus can cover the full .nav-menu panel */
    .nav-menu>.nav-item {
        position: static;
    }

    /* ---------- Mobile Dropdown (Slide-Over Panel) ---------- */
    .dropdown {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        min-height: 100vh;
        background: rgba(4, 4, 8, 0.95);
        /* Deeper overlay to hide parent */
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        z-index: 1002;
        padding: var(--sp-2xl) 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        /* Override Desktop States */
        opacity: 1;
        visibility: hidden;
        pointer-events: none;
        border: none;
        border-radius: 0;
        box-shadow: none;

        transition: left var(--transition-slide), visibility var(--transition-slide);
    }

    .dropdown::before {
        display: none;
        /* hide the triangle */
    }

    /* Target state when menu is checked: Slide IN! */
    .accordion-toggle:checked~.dropdown {
        left: 0;
        visibility: visible;
        pointer-events: auto;
    }

    .dropdown__back-item {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: var(--sp-xl);
    }

    .dropdown__back {
        display: inline-block;
        padding: var(--sp-md) var(--sp-xl);
        font-family: var(--ff-primary);
        font-size: 0.8rem;
        font-weight: var(--fw-light);
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--clr-text-dim);
        cursor: pointer;
        transition: color var(--transition);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50px;
    }

    .dropdown__back:hover {
        color: var(--clr-text);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .dropdown__link {
        padding: var(--sp-sm) var(--sp-xl);
        font-size: 1.25rem;
        font-weight: var(--fw-light);
        text-align: center;
        border: none;
        white-space: normal;
        /* Allow long titles like Stage Management to wrap on small screens */
    }

    /* Make nav-link act as label for accordion */
    .nav-item--dropdown .nav-link {
        cursor: pointer;
    }

    /* Reset text grid for mobile constraints */
    .page__content,
    .intro {
        margin-right: auto;
        margin-left: auto;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
        max-width: 100%;
    }
}

/* ============================================================
   UTILITY & MISC
   ============================================================ */
::selection {
    background: rgba(255, 255, 255, 0.15);
    color: var(--clr-text);
}

/* Scrollbar styling (Webkit) */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--clr-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--clr-text-dim);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--clr-accent);
}

/* Focus-visible for keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

/* Smooth fade-in for page load */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__content {
    animation: fadeIn 1s ease-out 0.3s both;
}

/* ============================================================
   BUTTON FOUNDATIONS (tokens from old site, ready for use)
   ============================================================ */
.btn {
    display: inline-block;
    padding: 10px 16px;
    /* old site button padding */
    background: var(--clr-accent);
    color: var(--clr-bg);
    border: 2px solid transparent;
    border-radius: 0;
    /* old site: square corners */
    text-transform: uppercase;
    letter-spacing: 0.07em;
    /* old site button tracking */
    font-family: var(--ff-primary);
    font-size: 0.875rem;
    /* 14px — old site */
    font-weight: var(--fw-medium);
    line-height: normal;
    cursor: pointer;
    transition: all var(--transition);
    /* elegant phi button transition */
}

.btn:hover {
    background: transparent;
    color: var(--clr-accent);
    border-color: var(--clr-accent);
}

.btn--outline {
    background: transparent;
    color: var(--clr-text);
    border: 2px solid var(--clr-text);
}

.btn--outline:hover {
    background: var(--clr-text);
    color: var(--clr-bg);
}

.btn--large {
    padding: 12px 20px;
    /* old site large button */
    font-size: 1rem;
}

/* Form foundations — now handled by glassmorphism styles above (line ~610) */

/* ============================================================
   FOOTER FOUNDATIONS (footer distance = column gutter per grid rule)
   ============================================================ */
.footer {
    background: var(--clr-bg);
    padding: var(--sp-xl) 0;
    /* Footer distance = column gutter (sp-xl = φ²) per Müller-Brockmann */
    font-size: var(--fs-phi-1);
    /* φ-scale caption */
}

.footer a {
    color: var(--clr-text-dim);
}

.footer a:hover {
    color: var(--clr-text);
}

/* ============================================================
   RESPONSIVE : TABLET ( < 992px )
   ============================================================ */
@media (max-width: 992px) {
    .container {
        padding: 0 var(--sp-lg);
    }

    .section {
        padding: var(--sp-xl) 0;
    }

}

/* ============================================================
   ANIMATIONS (Global)
   ============================================================ */

/* Phi-timed Fade In / Slide Up */
@keyframes phiFadeIn {
    0% {
        opacity: 0;
        transform: translateY(var(--sp-lg));
        /* 1.618rem (~26px) for unmissable smooth rise */
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered elegant load animations for text and content blocks */
.page__title,
.page__hero-img,
.page__content,
.section--welcome,
.contact-form,
.links-list {
    opacity: 0;
    /* Use t-phi-xslow (1618ms) for a dreamlike cinematic fade */
    animation: phiFadeIn var(--t-phi-xslow) var(--ease-phi) forwards;
}

.page__title {
    animation-delay: var(--t-phi-fast);
    /* 382ms delay */
}

.page__hero-img {
    animation-delay: var(--t-phi-base);
    /* 618ms delay */
    margin: var(--sp-lg) auto 0 auto;
    max-width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.page__content,
.section--welcome {
    animation-delay: var(--t-phi-slow);
    /* 1000ms delay */
}

/* ============================================================
   LOBBY / WELCOME SCREEN
   ============================================================ */
.lobby-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--t-phi-xxslow) var(--ease-phi),
        visibility var(--t-phi-xxslow) var(--ease-phi);
}

.lobby-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lobby-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: var(--sp-2xl);
    transform: translateY(0);
    transition: transform var(--t-phi-xxslow) var(--ease-phi),
        opacity var(--t-phi-xslow) var(--ease-phi);
    /* Allow wrapping on very small screens, but row by default */
    flex-wrap: wrap;
}

.lobby-hidden .lobby-content {
    transform: translateY(-40px);
    opacity: 0;
}

.lobby-picture {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    transform: translateX(-2vw);
    /* Remove placeholder opacity since we have the real image */
}

.lobby-title {
    font-family: var(--ff-primary);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: var(--fw-extralight);
    letter-spacing: 0.2em;
    color: var(--clr-text);
    text-transform: uppercase;
}

/* Pause animations behind the lobby screen */
body.is-in-lobby * {
    animation-play-state: paused !important;
}

body.is-in-lobby {
    overflow: hidden;
}

/* ============================================================
   TERNARY TRANSITION OVERLAY — The 0-State
   {1 = Active Page} → {0 = Transition Image} → {-1 = Gone}
   A full-screen colour image flash between page navigations,
   encoding the ternary superposition from the τ/φ/e framework.
   ============================================================ */
.ternary-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* e-based exponential fade: fast attack, natural decay */
    transition:
        opacity var(--t-phi-base) var(--ease-phi-in),
        visibility var(--t-phi-base) var(--ease-phi-in);
}

.ternary-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    /* Slower reveal for the 0-state — φ² duration */
    transition:
        opacity var(--t-phi-fast) var(--ease-phi),
        visibility var(--t-phi-fast) var(--ease-phi);
}

/* Gradient fallback when no image is loaded yet */
.ternary-overlay--fallback {
    background: radial-gradient(ellipse at 50% 50%,
            hsl(42, 61.8%, 12%) 0%,
            hsl(42, 40%, 4%) 60%,
            #000 100%);
}

/* ============================================================
   MOBILE SPECTRAL GRADIENTS
   ============================================================ */
@media (max-width: 767px),
(hover: none) {

    /* Auto-apply JS-generated spectral colors to links on touch devices 
       so they don't appear as plain text waiting for a non-existent hover */
    .links-list li a,
    .page__content a,
    .nav-link,
    .dropdown__link {
        color: var(--clr-hi, rgba(232, 230, 227, 0.95)) !important;
    }

    /* Isolated from color property in case older iPhones drop color-mix() */
    .links-list li a,
    .page__content a,
    .nav-link,
    .dropdown__link {
        text-shadow: 0 0 14px color-mix(in srgb, var(--clr-hi, var(--clr-accent)) 30%, transparent) !important;
    }

    .links-list li a,
    .page__content a {
        border-bottom-color: var(--clr-hi, rgba(201, 168, 76, 0.35)) !important;
    }
}