/* Dario Dvon | Caribbean Soul - site styles (layout utilities live in tailwind.css) */
        /* ---- Compat for the compiled Tailwind build ---- */
        *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: #e5e7eb; }
        button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }

        :root {
            --nav-text: #e5e7eb;
            --nav-active: #ffffff;
            --accent: #d4af37;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #050505;
            color: #ffffff;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, .font-serif, .nav-link, .brand-title {
            font-family: 'Playfair Display', serif;
        }

        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* Smooth Snap Scrolling */
        .snap-container {
            height: 100dvh;
            overflow-y: scroll;
            scroll-snap-type: none; /* desktop: sections are glided between by JS */
        }
        
        .snap-section {
            min-height: 100dvh;
            width: 100%;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            position: relative;
        }

        /* --- Animations --- */
        @media (pointer: coarse) { .snap-container { scroll-snap-type: y mandatory; } }

        /* --- Scroll reveals: soft rise + masked line reveals, replayed each time a section enters --- */
        :root { --ease: cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-up { opacity: 0; }
        .in-view .reveal-up { opacity: 1; animation: riseIn 1.1s var(--ease) var(--d, 0s) backwards; }
        .reveal-glass { opacity: 0; }
        .in-view .reveal-glass { opacity: 1; }
        @keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
        .delay-100 { --d: .12s; } .delay-200 { --d: .24s; }
        .mask { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
        .mask > span { display: block; transform: translateY(115%); }
        .in-view .mask > span { animation: maskUp 1.2s var(--ease) var(--d, 0s) both; }
        @keyframes maskUp { from { transform: translateY(115%); } to { transform: none; } }
        .album-item { opacity: 0; }
        .in-view .album-item { opacity: 1; animation: albumIn 1.25s var(--ease) backwards; }
        .in-view .album-item img { animation: coverSettle 1.9s var(--ease) backwards; }
        @keyframes albumIn { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
        @keyframes coverSettle { from { transform: scale(1.2); } to { transform: scale(1); } }
        .in-view .album-item:nth-child(1), .in-view .album-item:nth-child(1) img { animation-delay: 0.95s; }
        .in-view .album-item:nth-child(2), .in-view .album-item:nth-child(2) img { animation-delay: 1.0s; }
        .in-view .album-item:nth-child(3), .in-view .album-item:nth-child(3) img { animation-delay: 1.04s; }
        .in-view .album-item:nth-child(4), .in-view .album-item:nth-child(4) img { animation-delay: 1.09s; }
        .in-view .album-item:nth-child(5), .in-view .album-item:nth-child(5) img { animation-delay: 1.13s; }
        .in-view .album-item:nth-child(6), .in-view .album-item:nth-child(6) img { animation-delay: 1.18s; }
        .in-view .album-item:nth-child(7), .in-view .album-item:nth-child(7) img { animation-delay: 1.22s; }
        .in-view .album-item:nth-child(8), .in-view .album-item:nth-child(8) img { animation-delay: 1.27s; }
        .in-view .album-item:nth-child(9), .in-view .album-item:nth-child(9) img { animation-delay: 1.31s; }
        .in-view .album-item:nth-child(10), .in-view .album-item:nth-child(10) img { animation-delay: 1.36s; }
        .in-view .album-item:nth-child(11), .in-view .album-item:nth-child(11) img { animation-delay: 1.4s; }
        .in-view .album-item:nth-child(12), .in-view .album-item:nth-child(12) img { animation-delay: 1.45s; }
        .in-view .album-item:nth-child(13), .in-view .album-item:nth-child(13) img { animation-delay: 1.49s; }
        .in-view .album-item:nth-child(14), .in-view .album-item:nth-child(14) img { animation-delay: 1.54s; }
        .in-view .album-item:nth-child(15), .in-view .album-item:nth-child(15) img { animation-delay: 1.58s; }
        .in-view .album-item:nth-child(16), .in-view .album-item:nth-child(16) img { animation-delay: 1.63s; }
        .in-view .album-item:nth-child(17), .in-view .album-item:nth-child(17) img { animation-delay: 1.67s; }
        .in-view .album-item:nth-child(18), .in-view .album-item:nth-child(18) img { animation-delay: 1.72s; }
        .in-view .album-item:nth-child(19), .in-view .album-item:nth-child(19) img { animation-delay: 1.76s; }
        .in-view .album-item:nth-child(20), .in-view .album-item:nth-child(20) img { animation-delay: 1.81s; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @media (prefers-reduced-motion: reduce) { .reveal-up, .reveal-glass, .mask > span, .album-item { opacity: 1 !important; transform: none !important; animation: none !important; } }


        /* Listen On icons */
        .listen-icon { color: rgba(255,255,255,.5); display: inline-flex; transition: color .35s ease, transform .35s var(--ease); }
        .listen-icon:hover, .listen-icon:focus-visible { transform: scale(1.22); }
        .li-spotify:hover, .li-spotify:focus-visible { color: #1DB954; }
        .li-ytm:hover, .li-ytm:focus-visible { color: #FF0000; }
        .li-apple:hover, .li-apple:focus-visible { color: #FA243C; }

        /* Support modal */
        .tip-chip { padding: .5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); font-size: .875rem; font-weight: 600; transition: all .25s ease; }
        .tip-chip:hover { border-color: rgba(255,255,255,.5); color: #fff; }
        .tip-chip.is-active { background: #d4af37; border-color: #d4af37; color: #050505; }

        /* Drawer mini lockup */
        .mini-lockup { display: inline-flex; flex-direction: column; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.05rem; line-height: 1; letter-spacing: -0.02em; }
        .ml-bar { background: #d4af37; color: #050505; padding: .1em .08em .14em .1em; line-height: .8; }
        .ml-name { color: #f4ecd8; text-align: center; line-height: .8; margin-top: .22em; font-size: 1.05em; }

        .clip-reveal {
            overflow: hidden;
            display: block;
            padding-bottom: 0.15em;
        }
        .clip-reveal > * {
            display: block;
            transform: translateY(120%);
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        body.loaded .clip-reveal > * { transform: translateY(0); }

        /* Navigation Links - Wiggle fix and left-to-right underline */
        .nav-link {
            color: rgba(255,255,255,0.7);
            transition: color 0.4s ease;
            position: relative;
            padding-bottom: 4px;
            text-shadow: 0px 2px 10px rgba(0,0,0,0.8);
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1.5px;
            background-color: #f4ecd8;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .nav-link:hover { color: #f4ecd8; }
        .nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
        .nav-link.nav-link { font-family: 'Cormorant Garamond', 'Playfair Display', serif; font-weight: 400; -webkit-text-stroke: 0 currentColor; transition: color .3s ease, font-weight .25s ease, -webkit-text-stroke-width .25s ease; }
        @media (min-width: 768px) { .nav-link.nav-link { font-size: 14.5px; } }
        /* invisible bold copy reserves width so switching weight never shifts the menu */
        #header-bg { inset: 0 0 -10px 0; }
        .nav-link::before { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none; }
        .nav-link.active { color: #f4ecd8; font-weight: 700; -webkit-text-stroke-width: .5px; text-shadow: 0px 2px 10px rgba(0,0,0,0.8); }

        /* App Blur State for Modals */
        #app-content { transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
        body.modal-open #app-content { pointer-events: none; }

        /* Modals */
        .modal {
            visibility: hidden;
            pointer-events: none;
            transition: visibility 0s linear .4s;
            z-index: 100;
        }
        .modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
        .modal > * { opacity: 0; transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1); }
        .modal.is-open > * { opacity: 1; }
        .modal-content {
            transform: scale(0.95) translateY(20px);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity .4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .modal.is-open .modal-content { transform: scale(1) translateY(0); }

        /* Glass Panels */
        .glass-panel {
            background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
            backdrop-filter: blur(24px) saturate(140%);
            -webkit-backdrop-filter: blur(24px) saturate(140%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
        }

        .workshop-panel:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(10px); }

        /* Dynamic Global Background for Music */
        #global-bg {
            transition: background-image 1s ease-in-out, opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;
        }

        /* Scroll Animation */
        .scroll-line-anim { animation: scrollDrop 2s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
        @keyframes scrollDrop {
            0% { transform: scaleY(0); transform-origin: top; opacity: 0;}
            10% { opacity: 1; }
            40% { transform: scaleY(1); transform-origin: top; }
            40.1% { transform-origin: bottom; }
            70% { transform: scaleY(0); transform-origin: bottom; opacity: 1;}
            80% { opacity: 0; }
            100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
        }

        /* Discography grid: 5 columns spread edge to edge; only scrolls (and shows arrows) if there are more albums */
        #album-container {
            --g: clamp(1rem, 3.8vw, 4rem);
            display: grid;
            grid-template-rows: repeat(2, auto);
            grid-auto-flow: column;
            grid-auto-columns: clamp(92px, min(42vw, var(--cover, calc((100dvh - 27.5rem) / 2 - 3.8rem))), 240px);
            gap: 1.25rem 1rem;
            width: max-content; min-width: 100%;   /* centres when it fits, grows (and swipes) when it doesn't */
            justify-content: center;
        }
        .album-item { min-width: 0; scroll-snap-align: start; }
        /* very wide screens: one larger row that scrolls sideways (set by JS) */
        .grid-arrow { width: 42px; height: 42px; margin-top: -26px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #f4ecd8;
            background: rgba(10,10,10,.38); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
            border: 1px solid rgba(255,255,255,.16); box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: opacity .35s ease, background .25s ease, border-color .25s ease; }
        .grid-arrow:hover { background: rgba(244,236,216,.16); border-color: rgba(244,236,216,.42); }
        #music:not(.wide-row) .grid-arrow { display: none; }
        #album-container.one-row { grid-template-rows: auto; grid-auto-columns: var(--cover); justify-content: start; }
        @media (min-width: 768px) {
            #album-container {
                grid-auto-columns: min(calc((100% - 3 * var(--g)) / 4), var(--cover, calc((100dvh - 23.5rem) / 2 - 3.8rem)));
                width: auto; min-width: 0;
                column-gap: var(--g); justify-content: space-between;
            }
        }
        @media (min-width: 1024px) {
            #album-container { grid-auto-columns: min(calc((100% - 4 * var(--g)) / 5), var(--cover, calc((100dvh - 23.5rem) / 2 - 3.8rem))); }
        }

        /* Swipe slider (below 768px): edge-to-edge track, soft edge fade, no arrow buttons */
        #album-grid { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
        @media (max-width: 767px) {
            #album-grid { margin-inline: -1.5rem; padding-inline: 1.5rem; scroll-padding-inline: 1.5rem;
                -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%); }
        }
        #album-progress { position: relative; display: flex; align-items: center; height: 18px; width: 4.5rem; margin: .25rem auto 0; transition: opacity .3s ease; }
        #album-track { position: relative; width: 100%; height: 2px; border-radius: 4px; background: rgba(255,255,255,.12); transition: height .25s var(--ease), background .25s ease; }
        #album-progress-thumb { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; background: #d4af37; }
        @media (hover: hover) and (pointer: fine) {
            #album-progress { width: min(18rem, 62%); cursor: pointer; }
            #album-progress:hover #album-track, #album-progress.dragging #album-track { height: 8px; background: rgba(255,255,255,.2); }
            #album-progress-thumb { cursor: grab; }
            #album-progress.dragging, #album-progress.dragging #album-progress-thumb { cursor: grabbing; }
        }

        /* Workshops: single-line title below lg; drop the intro paragraph on very short phones so everything fits */
        @media (max-width: 1023px) { #workshops h2 .mask { display: inline-block; margin-right: .22em; } #workshops h2 .mask:last-child { margin-right: 0; } }
        @media (max-width: 1023px) and (max-height: 690px) { #workshops .ws-intro { display: none; } }
        @media (max-width: 1023px) and (max-height: 640px) { .contact-intro { display: none; } }

        /* "Soul" gold highlight (same treatment as DARIO), wipes in after the heading */
        .soul-hl { display: inline-block; padding: .02em .07em .1em; margin: 0 .02em; line-height: 1; color: #f4ecd8;
            background: linear-gradient(#d4af37, #d4af37) no-repeat left center / 0% 100%; }
        .in-view .soul-hl { animation: soulWipe 1.1s var(--ease) .8s forwards; }
        @keyframes soulWipe { from { background-size: 0% 100%; color: #f4ecd8; } to { background-size: 100% 100%; color: #050505; } }

        /* Call-to-action: soft fog slowly drifting inside the button */
        .cta-fog { position: relative; overflow: hidden; isolation: isolate; }
        .cta-fog::before { content: ''; position: absolute; inset: -40% -30%; z-index: -1; pointer-events: none; filter: blur(10px); opacity: .9;
            background:
                radial-gradient(38% 70% at 22% 55%, var(--fog-a, rgba(212,175,55,.3)), transparent 70%),
                radial-gradient(34% 65% at 70% 40%, var(--fog-b, rgba(255,255,255,.4)), transparent 70%),
                radial-gradient(30% 60% at 92% 70%, var(--fog-a, rgba(212,175,55,.3)), transparent 70%);
            animation: fogDrift 9s ease-in-out infinite alternate; }
        @keyframes fogDrift { 0% { transform: translate3d(-9%, -3%, 0) scale(1); } 50% { transform: translate3d(4%, 4%, 0) scale(1.1); } 100% { transform: translate3d(10%, -2%, 0) scale(1.03); } }
        @media (prefers-reduced-motion: reduce) { .cta-fog::before { animation: none; } .name-bar { background-size: 100% 100%; color: #050505; animation: none !important; } .soul-hl { background-size: 100% 100%; color: #050505; animation: none !important; } }

        /* Interactive glow (one recipe for every button and panel): soft light that breathes and drifts a little around the cursor */
        @property --wx { syntax: '<length>'; initial-value: 0px; inherits: true; }
        @property --wy { syntax: '<length>'; initial-value: 0px; inherits: true; }
        @property --ws { syntax: '<number>'; initial-value: 1; inherits: true; }
        @property --gb { syntax: '<length>'; initial-value: 34px; inherits: true; }
        @keyframes gwx { from { --wx: -12px; } to { --wx: 14px; } }
        @keyframes gwy { from { --wy: 8px; } to { --wy: -10px; } }
        @keyframes gws { from { --ws: .88; } to { --ws: 1.16; } }
        @keyframes gwb { from { --gb: 26px; } to { --gb: 42px; } }
        .glow-hover { position: relative; isolation: isolate; --mx: 50%; --my: 50%; --gx: 0; --gy: 0;
            --spot: 120px; --spot-c: rgba(236,196,92,.32); --halo-c: rgba(236,196,92,.13); --glow-c: rgba(236,196,92,.36); --amp: 1;
            transition: box-shadow .5s ease, transform .35s var(--ease), background-color .3s ease, color .3s ease, border-color .3s ease; }
        .glow-hover::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .6s ease;
            background:
                radial-gradient(calc(var(--spot) * var(--ws)) circle at calc(var(--mx) + var(--wx) * var(--amp)) calc(var(--my) + var(--wy) * var(--amp)), var(--spot-c), transparent 70%),
                radial-gradient(calc(var(--spot) * 2.4 * var(--ws)) circle at var(--mx) var(--my), var(--halo-c), transparent 72%); }
        .glow-hover:hover::after, .glow-soft:focus-within::after { opacity: 1; }
        .glow-hover:hover { animation: gwx 3.7s ease-in-out infinite alternate, gwy 5.3s ease-in-out infinite alternate, gws 4.1s ease-in-out infinite alternate, gwb 3.1s ease-in-out infinite alternate;
            box-shadow: calc(var(--gx) * 7px + var(--wx) * .35) calc(var(--gy) * 5px + var(--wy) * .35) var(--gb) 0 var(--glow-c); }
        /* Panels (workshops + get in touch): two slow clouds of light that drift on their own, one fading in and out */
        @property --c1x { syntax: '<percentage>'; initial-value: 25%; inherits: true; }
        @property --c1y { syntax: '<percentage>'; initial-value: 30%; inherits: true; }
        @property --c2x { syntax: '<percentage>'; initial-value: 80%; inherits: true; }
        @property --c2y { syntax: '<percentage>'; initial-value: 70%; inherits: true; }
        @property --c2o { syntax: '<number>'; initial-value: 0; inherits: true; }
        @keyframes c1x { from { --c1x: 6%; } to { --c1x: 80%; } }
        @keyframes c1y { from { --c1y: 12%; } to { --c1y: 92%; } }
        @keyframes c2x { from { --c2x: 94%; } to { --c2x: 16%; } }
        @keyframes c2y { from { --c2y: 88%; } to { --c2y: 10%; } }
        @keyframes c2o { 0% { --c2o: 0; } 30% { --c2o: 1; } 60% { --c2o: .25; } 100% { --c2o: .95; } }
        .glow-soft { --spot: 240px; --mx: 86%; --my: 34%; --amp: 0; --gx: .5; --gy: .3; }
        .glow-soft::after { background:
            radial-gradient(calc(var(--spot) * var(--ws)) circle at calc(var(--mx) + var(--wx) * var(--amp)) calc(var(--my) + var(--wy) * var(--amp)), var(--spot-c), transparent 70%),
            radial-gradient(64% 105% at var(--c1x) var(--c1y), rgba(236,196,92,.36), transparent 72%); }
        .glow-soft::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .8s ease;
            background: radial-gradient(60% 100% at var(--c2x) var(--c2y), rgba(90,200,150,.34), transparent 72%); }
        .glow-soft:hover::before, .glow-soft:focus-within::before { opacity: var(--c2o); }
        .glow-soft:hover, .glow-soft:focus-within { animation: c1x 6.4s ease-in-out infinite alternate, c1y 8.3s ease-in-out infinite alternate, c2x 7.7s ease-in-out infinite alternate, c2y 9.6s ease-in-out infinite alternate, c2o 11s ease-in-out infinite alternate, gwx 3.7s ease-in-out infinite alternate, gwy 5.3s ease-in-out infinite alternate, gws 4.1s ease-in-out infinite alternate, gwb 3.1s ease-in-out infinite alternate;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06), calc(var(--gx) * 7px + var(--wx) * .35) calc(var(--gy) * 5px + var(--wy) * .35) var(--gb) 0 var(--glow-c); }
        @media (prefers-reduced-motion: reduce) { .glow-hover:hover, .glow-soft:hover { animation: none; } }

        /* Header nav: stronger type (no container) */

        .grow-on { transition: transform .55s var(--ease), box-shadow .5s ease, background-color .3s ease, border-color .3s ease; }
        .grow-on:hover { transform: scale(1.018); }
        .grow-on:focus-within:not(:hover) { transform: scale(1.006); }
        .glow-soft.grow-on:focus-within:not(:hover) { animation: none; }

        /* Hire: a soft blue stage glow breathing out from behind "Soul" */
        #hire h2 { position: relative; }
        #hire h2::before { content: ''; position: absolute; left: 46%; top: 36%; width: min(160vw, 1600px); height: min(100vw, 880px); transform: translate(-50%, -50%); z-index: -1; pointer-events: none; opacity: 0; mix-blend-mode: screen; filter: blur(34px);
            background: radial-gradient(closest-side, rgba(156,176,214,.2), rgba(128,146,190,.1) 46%, rgba(108,124,170,.04) 70%, transparent 82%); transition: opacity 2.2s ease .9s; }
        #hire.in-view h2::before { opacity: 1; animation: auraPulse 6.5s ease-in-out 3s infinite alternate; }
        @keyframes auraPulse { from { transform: translate(-50%, -50%) scale(.92); opacity: .78; } to { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } }
        @media (prefers-reduced-motion: reduce) { #hire.in-view h2::before { animation: none; } }

        
        .workshop-panel { transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s ease, background-color .4s ease, border-color .4s ease; }

        /* Library view toggle (very wide screens only): large albums <-> compact list */
        #view-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none; align-items: center; gap: 2px; padding: 3px; border-radius: 9999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
        #music.wide-row #view-toggle { display: flex; }
        .vt-btn { width: 34px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; color: rgba(255,255,255,.45); transition: color .25s ease, background .25s ease; }
        .vt-btn:hover { color: #f4ecd8; }
        .vt-btn[aria-pressed="true"] { color: #f4ecd8; background: rgba(244,236,216,.14); }
        #album-list { display: none; }
        #music.wide-row.view-list #album-grid { display: none; }
        #music.wide-row.view-list .grid-arrow { display: none; }
        #music.wide-row.view-list #album-list { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, var(--row-h, 72px)); grid-auto-flow: column; column-gap: clamp(2rem, 6vw, 6rem); }
        .al-row { display: flex; align-items: center; gap: 1.1rem; padding: 0 .75rem; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; min-width: 0;
            transition: background .3s ease; animation: riseIn .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 55ms + .05s); }
        .al-row:hover { background: rgba(255,255,255,.045); }
        .al-idx { width: 1.8rem; flex: none; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .2em; color: rgba(255,255,255,.35); transition: color .3s ease; }
        .al-thumb { flex: none; width: calc(var(--row-h, 72px) - 22px); aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.06); }
        .al-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .al-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(1.05rem, 1.3vw, 1.4rem); line-height: 1.2; color: #f4ecd8; transition: color .3s ease; }
        .al-meta { margin-top: 3px; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.45); }
        .al-play { margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; transition: background .3s ease, color .3s ease, border-color .3s ease; }
        .al-row:hover .al-play { background: #d4af37; border-color: #d4af37; color: #050505; }
        .al-row.is-playing .al-title, .al-row.is-playing .al-idx { color: #d4af37; }

        /* Landing sequence: title slides in, DARIO gets highlighted, then corners + scroll hint arrive */
        .sh-text, .sh-line, .corner-l, .corner-r { opacity: 0; }
        body.loaded .name-bar { animation: soulWipe .9s var(--ease) .75s forwards; }
        body.loaded .sh-text { opacity: 1; animation: riseIn .9s var(--ease) 1.1s backwards; }
        body.loaded .sh-line { opacity: 1; transform-origin: top; animation: lineGrow .9s var(--ease) 1.25s backwards; }
        @keyframes lineGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
        body.loaded .corner-l { opacity: 1; animation: cornerL 1.1s var(--ease) .8s backwards; }
        body.loaded .corner-r { opacity: 1; animation: cornerR 1.1s var(--ease) .95s backwards; }
        @keyframes cornerL { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
        @keyframes cornerR { from { opacity: 0; transform: translateX(26px) scale(.92); } to { opacity: 1; transform: none; } }
        @keyframes headerIn { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
        body.loaded #global-header > .site-logo svg { animation: headerIn .9s var(--ease) .4s backwards; }
        .hero-lockup .clip-reveal > * { transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .hero-shade { background:
            radial-gradient(ellipse 64% 54% at 100% 0%, rgba(0,0,0,.7), rgba(0,0,0,.45) 36%, rgba(0,0,0,.18) 64%, transparent 86%),
            linear-gradient(to bottom, rgba(0,0,0,.4), transparent 20%),
            radial-gradient(ellipse 82% 80% at 0% 100%, rgba(0,0,0,.62), rgba(0,0,0,.36) 42%, transparent 80%),
            linear-gradient(to top, #030303 0%, rgba(3,3,3,.78) 7%, rgba(3,3,3,.3) 17%, transparent 32%); }
        #global-header .nav-link { text-shadow: 0 1px 12px rgba(0,0,0,.65); }
                 @media (max-width: 767px) {
            .hero-shade { background:
                radial-gradient(ellipse 80% 34% at 100% 0%, rgba(0,0,0,.72), transparent 75%),
                linear-gradient(to top, #030303 0%, #030303 8%, rgba(3,3,3,.78) 28%, rgba(3,3,3,.38) 52%, transparent 76%); }
        }

        /* Music: blurred cover of the current track cross-fades in behind the library */
        #music-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
        #music-bg .mbg { position: absolute; inset: -14%; background-size: cover; background-position: center; filter: blur(58px) saturate(1.4); opacity: 0; transform: scale(1.18); transition: opacity 1.8s ease, transform 9s ease-out; }
        #music-bg .mbg.on { opacity: .5; transform: scale(1); }
        #music-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.12), rgba(0,0,0,.55) 92%); }

        /* Hire: performance backdrop with seamless fades into the neighbouring sections */
        .hire-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.4) 1.5%, #000 4.5%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.4) 1.5%, #000 4.5%, #000 86%, transparent 100%); }
        .hire-bg video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .78; }
        .hire-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(5,5,5,.34), rgba(5,5,5,.58) 100%); }
        @keyframes hireDrift { from { transform: scale(1.05) translate(-1.2%, 0); } to { transform: scale(1.12) translate(1.2%, -1%); } }
        @media (prefers-reduced-motion: reduce) { #music-bg .mbg { transition: opacity .4s; transform: none; } }


        /* Directional entrances */
        .in-view .reveal-up[data-fx="left"] { animation-name: slideInL; }
        .in-view .reveal-up[data-fx="right"] { animation-name: slideInR; animation-duration: 1.25s; }
        @keyframes slideInL { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
        @keyframes slideInR { from { opacity: 0; transform: translateX(90px) scale(.97); } to { opacity: 1; transform: none; } }

        /* Location + bio corners on the landing page */
        .sub-link { position: relative; transition: color .4s ease; }
        .sub-link::after { content: ''; position: absolute; left: 0; right: .3em; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
        .sub-link:hover { color: #f4ecd8; }
        .sub-link:hover::after { transform: scaleX(1); transform-origin: left; }

        /* Drawer tagline + staggered entrance */

        /* Hero title lockup (sized by JS fit below; vw values are the no-JS fallback) */
        .hero-lockup { display: inline-block; font-size: 11vw; }
        .hero-lockup h1 { font-weight: 900; line-height: 0; margin: 0; }
        .hero-lockup .clip-reveal { padding-bottom: 0; line-height: 0; text-align: left; }
        .hero-lockup .clip-reveal > * { display: inline-block; vertical-align: top; }
        .hero-lockup .clip-reveal:first-child { text-align: left; }
        /* bar: line-height + bottom padding place the caps optically centred in the gold box */
        .name-bar { background: linear-gradient(#d4af37, #d4af37) no-repeat left center / 0% 100%; color: #f4ecd8; line-height: 0.816; padding: 0 0.035em 0.154em 0.05em; letter-spacing: -0.04em; }
        .name-plain { color: #f4ecd8; line-height: 1; font-size: 1.07em; letter-spacing: -0.01em; }
        .hero-lockup h1 .clip-reveal + .clip-reveal { margin-top: -0.095em; }
        .tagline-wrap { margin-top: 0.133em; text-align: left; }
        .hero-lockup .clip-reveal > .tagline { display: inline-flex; align-items: center; gap: 1.1em; }
        .tagline i { width: .38em; height: .38em; border-radius: 50%; background: #d4af37; flex: none; }
        .tagline span:first-child { color: rgba(244,236,216,.92); }
        .tagline span:last-child { color: rgba(255,255,255,.55); }
        .tagline { font-family: 'Inter', sans-serif; font-size: 0.122em; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; font-weight: 500; white-space: nowrap; }

        /* ---- Header nav: one row on every screen; scales down on phones so it never reaches the logo ---- */
        #global-header nav { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; min-width: 0; margin-left: .75rem; gap: clamp(8px, 3.3vw, 22px); }
        #global-header nav .nav-link.nav-link { flex: none; white-space: nowrap; font-size: var(--nav-fs, clamp(8.5px, 2.9vw, 13px)); letter-spacing: clamp(.04em, .45vw, .1em); font-weight: 500; color: rgba(255,255,255,.93); }
        #global-header nav .nav-link.nav-link:hover { color: #f4ecd8; }
        #global-header nav .nav-link.nav-link.active { color: #f4ecd8; font-weight: 700; }
        @media (min-width: 768px) {
            #global-header nav { flex: none; margin: .5rem 0 0; gap: 2.5rem; }
            #global-header nav .nav-link.nav-link { font-size: 15px; letter-spacing: .1em; }
        }
        body.loaded #global-header nav .nav-link:nth-child(1) { animation: headerIn .9s var(--ease) .5s backwards; }
        body.loaded #global-header nav .nav-link:nth-child(2) { animation: headerIn .9s var(--ease) .57s backwards; }
        body.loaded #global-header nav .nav-link:nth-child(3) { animation: headerIn .9s var(--ease) .64s backwards; }
        body.loaded #global-header nav .nav-link:nth-child(4) { animation: headerIn .9s var(--ease) .71s backwards; }
        body.loaded #global-header nav .nav-link:nth-child(5) { animation: headerIn .9s var(--ease) .78s backwards; }

        /* ---- Landing: looping video (poster shows until it plays) ---- */
        .hero-photo { overflow: hidden; background: #030303; }
        .hero-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 62% 45%; animation: photoSettle 1.5s var(--ease) backwards; }
        @keyframes photoSettle { from { transform: scale(1.1); opacity: .4; } to { transform: scale(1); opacity: 1; } }
        @media (prefers-reduced-motion: reduce) { .hero-video { animation: none; } }

        /* ---- About pill: red on hover ---- */
        .about-pill:hover, .about-pill:focus-visible { background: #c4202f; color: #fff3ea; box-shadow: 0 6px 22px -6px rgba(196,32,47,.75); }

        /* ---- Music: big frosted play button on hover (cover only zooms), toggle stays put ---- */
        .album-play-btn { width: min(88px, 58%); aspect-ratio: 1; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff;
            background: rgba(8,8,8,.42); border: 1.5px solid rgba(255,255,255,.75);
            box-shadow: 0 8px 30px -10px rgba(0,0,0,.5); transform: scale(.86); transition: transform .35s var(--ease), background .25s ease; }
        .album-play-btn svg { width: 50%; height: 50%; display: block; }
        .group:hover .album-play-btn { transform: scale(1); }
        .group:hover .album-play-btn:hover { background: rgba(8,8,8,.58); }
        #music.wide-row #album-grid, #music.wide-row #album-list { height: calc(var(--cover, 380px) + 82px); }
        #music.wide-row.view-list #album-list { align-content: center; }
        #view-toggle { top: calc(100% + 8px); transform: none; }

        /* ---- Player: compact glass bar ---- */
        #player-card { border-radius: 1.75rem !important; background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), rgba(12,12,12,.22); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 14px 38px -18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12); }
        .pl-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; color: rgba(255,255,255,.7); transition: color .2s ease, background .2s ease; }
        .pl-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
        .pl-play { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: #f4ecd8; color: #050505; transition: transform .2s ease; }
        .pl-play:hover { transform: scale(1.07); }
        #player-bar:hover > div { height: 5px; }
        #player-vol-range { -webkit-appearance: none; appearance: none; width: 76px; height: 4px; border-radius: 4px; outline: none; cursor: pointer; --v: 80%;
            background: linear-gradient(90deg, #f4ecd8 var(--v), rgba(255,255,255,.2) var(--v)); }
        #player-vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 3px rgba(0,0,0,.15); opacity: 0; transition: opacity .15s; }
        #player-vol:hover #player-vol-range::-webkit-slider-thumb, #player-vol-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
        #player-vol-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
        #player-vol-range:focus-visible, .pl-btn:focus-visible, .pl-play:focus-visible { outline: 2px solid rgba(244,236,216,.7); outline-offset: 2px; }
        @media (pointer: coarse) { #player-vol { display: none; } }

        /* ---- About pill: cream, red on hover ---- */
        .about-pill:hover, .about-pill:focus-visible { background: #c4202f; color: #fff3ea; box-shadow: 0 6px 22px -6px rgba(196,32,47,.75); }

        /* ---- Contact: photo behind the panels ---- */
        .contact-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
        .contact-shade { background: linear-gradient(90deg, rgba(4,4,4,.3), rgba(4,4,4,.05) 45%, rgba(4,4,4,.05) 55%, rgba(4,4,4,.3)), linear-gradient(to bottom, #050505 0%, rgba(5,5,5,0) 18%, rgba(5,5,5,0) 78%, #050505 100%); }
        #contact h2, #contact .contact-intro { text-shadow: 0 2px 14px rgba(0,0,0,.55); }

        /* ---- Album hover: the whole cover (frame included) lifts a little ---- */
        .album-frame { box-shadow: 0 18px 34px -20px rgba(0,0,0,.6); transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
        .group:hover .album-frame { transform: scale(1.045); box-shadow: 0 24px 44px -20px rgba(0,0,0,.7); }
        @media (min-width: 768px) { #album-grid { margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; } }

        /* ---- Get in Touch ---- */
        .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
        .contact-intro { color: #fff; font-weight: 400; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 18px rgba(0,0,0,.7); }
        .contact-card { background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(10,10,10,.1) !important; -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
            transition: transform .45s var(--ease), background .3s ease, border-color .3s ease !important; }
        .contact-card:hover { transform: scale(1.03); border-color: rgba(255,255,255,.28) !important; }
        .contact-card h4, .contact-card p { transition: color .3s ease; }
        .contact-card:hover h4 { color: #fff; }
        .contact-card:hover p { color: rgba(255,255,255,.88); }
        .contact-card p { color: rgba(255,255,255,.7); font-size: .8rem; }
        .contact-shade { background: linear-gradient(90deg, rgba(4,4,4,.74) 0%, rgba(4,4,4,.5) 32%, rgba(4,4,4,.12) 54%, rgba(4,4,4,0) 66%), linear-gradient(to bottom, #050505 0%, rgba(5,5,5,0) 18%, rgba(5,5,5,0) 78%, #050505 100%) !important; }
        @media (max-width: 767px) { .contact-shade { background: linear-gradient(to bottom, #050505 0%, rgba(5,5,5,.45) 20%, rgba(5,5,5,.55) 60%, #050505 100%) !important; } }

        /* ---- Slow breathing zoom on the workshops + contact photos ---- */
        @keyframes slowBreath { 0%, 8% { transform: scale(1); } 50%, 58% { transform: scale(1.06); } 100% { transform: scale(1); } }
        .ws-photo img, .contact-photo img { transform-origin: 60% 35%; animation: slowBreath 28s ease-in-out infinite; will-change: transform; }
        @media (prefers-reduced-motion: reduce) { .ws-photo img, .contact-photo img { animation: none; } }

        /* ---- About popup: page stays visible, glass text panel, matching buttons ---- */
        .bio-text p, .bio-text h3 { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
        .bio-btns { display: grid; grid-template-columns: 1fr; gap: .6rem; max-width: 22rem; }
        .bio-btn { width: 100%; padding: .8rem 1rem; border-radius: 9999px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
            transition: transform .35s var(--ease), box-shadow .35s ease, background .3s ease, color .3s ease, border-color .3s ease; }
        .bio-btn-solid { background: #f4ecd8; color: #050505; font-weight: 700; }
        .bio-btn-ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.06); }
        .bio-btn:hover, .bio-btn:focus-visible { transform: scale(1.05); }
        .bio-btn-solid:hover, .bio-btn-solid:focus-visible { background: #fff; box-shadow: 0 0 0 1px rgba(244,236,216,.5), 0 0 26px 2px rgba(236,196,92,.45); }
        .bio-btn-ghost:hover, .bio-btn-ghost:focus-visible { border-color: rgba(244,236,216,.7); background: rgba(255,255,255,.14); box-shadow: 0 0 24px 1px rgba(236,196,92,.32); }

        /* ---- Landing title hover ---- */
        .hero-lockup { --rx: 0deg; --ry: 0deg; --tx: 0px; --ty: 0px; transform: perspective(900px) translate3d(var(--tx), var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry)); }
                .name-plain .tl { --h: 0; color: color-mix(in srgb, #f4ecd8, #f0c95e calc(var(--h) * 100%));
            text-shadow: 0 0 calc(var(--h) * .22em) rgba(236,196,92, calc(var(--h) * .55)); transition: color .25s ease, text-shadow .25s ease; }
        .name-bar { position: relative; }
        .name-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
            background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.65) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: soft-light; }
        .name-bar.sheen::after { animation: barSheen 1.1s var(--ease) forwards; }
        @keyframes barSheen { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }

        /* ---- Workshops ---- */
        #workshops { height: 100dvh; min-height: 0; overflow: hidden; }
        .ws-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
        .ws-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
        .ws-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
        .ws-wrap { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column;
            padding: 4.75rem max(1.25rem, env(safe-area-inset-right, 0px)) max(2.75rem, calc(env(safe-area-inset-bottom, 0px) + 2rem)) max(1.25rem, env(safe-area-inset-left, 0px)); }
        .ws-col { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
        .ws-head h2 { white-space: nowrap; line-height: 1.08; margin: 0; color: #f4ecd8;
            text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 24px rgba(0,0,0,.45); }
        .ws-intro { display: none; color: rgba(255,255,255,.92); font-weight: 400; line-height: 1.5; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 16px rgba(0,0,0,.6); }
        .ws-cards { display: flex; flex-direction: column; gap: .6rem; }
        .ws-card { text-align: left; }
        .ws-card h4 { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .6rem; }
        .ws-badge { font-family: 'Inter', sans-serif; background: rgba(240,207,106,.16); color: #f0cf6a; border: 1px solid rgba(240,207,106,.42); border-radius: 999px; padding: .1rem .5rem; font-size: 8px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: color .3s ease, border-color .3s ease; }
        .ws-card:hover .ws-badge { color: #ffe39a; border-color: rgba(255,227,154,.7); }
        .ws-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; font-family: 'Inter', sans-serif; }
        .ws-price span:first-child { font-size: 1.05rem; font-weight: 400; color: #f4ecd8; letter-spacing: .01em; line-height: 1.1; transition: color .3s ease; }
        .ws-price span:last-child { font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); transition: color .3s ease; }
        .ws-card:hover .ws-price span:first-child { color: #fff; }
        .ws-card:hover .ws-price span:last-child { color: rgba(255,255,255,.85); }
        .ws-book { display: flex; margin-top: 1.1rem; }
        .ws-book-btn { display: inline-flex; align-items: center; gap: .75rem; padding: .75rem 1.4rem .75rem 1.75rem; border-radius: 9999px !important; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #f4ecd8; }
        .ws-book-btn:hover { color: #fff; }
        .ws-book-btn svg { width: 1rem; height: 1rem; }

        /* card shape shared by every size */
        .ws-card h4 { white-space: nowrap; line-height: 1.3; }
        .ws-card p { display: none; }
        .ws-price { justify-content: center; }

        /* A) portrait screens up to square: title at the top, face + guitar in the middle, cards along the bottom */
        @media (max-aspect-ratio: 1/1) {
            .ws-photo { top: -3%; bottom: 3%; }
            .ws-photo img { object-position: 50% 70%; }
            .ws-shade { background: linear-gradient(to bottom, rgba(8,8,8,.42) 0%, rgba(8,8,8,0) 16%, rgba(8,8,8,0) 56%, rgba(8,8,8,.32) 78%, rgba(8,8,8,.62) 100%); }
            .ws-wrap { padding-top: 3.55rem; padding-bottom: max(1.75rem, calc(env(safe-area-inset-bottom, 0px) + 1.25rem)); }
            .ws-col { width: 100%; }
            .ws-head { text-align: center; }
            .ws-head h2 { font-size: clamp(1.9rem, 8.6vw, 2.9rem); }
            .ws-cards, .ws-book { width: clamp(17.5rem, 62vw, 24rem); max-width: 100%; margin-inline: auto; }
            .ws-cards { margin-top: auto; gap: .6rem; }
            .ws-card { border-radius: 1.15rem !important; padding: .6rem .7rem .6rem 1rem !important; position: relative; }
            .ws-card h4 { font-size: clamp(.98rem, 3.6vw, 1.12rem) !important; }
            .ws-price span:first-child { font-size: .98rem; }
            .ws-price span:last-child { font-size: 8.5px; }
            .ws-card .ws-badge { position: absolute; top: -.55rem; left: .85rem; padding: .05rem .45rem; font-size: 7.5px; background: rgba(28,22,12,.82); }
            .ws-book { margin-top: .85rem; display: block; }
            .ws-book-btn { width: 100%; justify-content: center; border-radius: 1.15rem !important; padding: .72rem 1rem !important; background: #f4ecd8 !important; color: #050505 !important; border-color: transparent !important; }
            .ws-book-btn svg { color: #050505 !important; }
            .ws-book-btn:hover { background: #fff !important; }
        }
        /* square-ish screens between portrait and landscape: use the wide photo, him centred */
        @media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 1/1) { .ws-photo { top: 0; bottom: 0; } .ws-photo img { object-position: 90% 32%; } }

        /* B) landscape windows (square and wider): photo on the right, title + cards on the left */
        @media (min-aspect-ratio: 1/1) {
            .ws-photo img { object-position: 50% 36%; }
            .ws-shade { background: linear-gradient(90deg, rgba(8,7,6,.5) 0%, rgba(8,7,6,.3) 32%, rgba(8,7,6,.06) 54%, transparent 70%), linear-gradient(to bottom, rgba(10,10,10,.32) 0%, rgba(10,10,10,0) 12%, rgba(10,10,10,0) 86%, rgba(10,10,10,.5) 100%); }
            .ws-wrap { padding: 5rem clamp(1.5rem, 4.4vw, 4rem) 2.5rem; }
            .ws-col { justify-content: center; width: min(47%, 40rem); }
            .ws-head h2 { font-size: clamp(2.2rem, 4.2vw, 4.2rem); margin-bottom: 1rem; }
            .ws-intro { display: block; font-size: clamp(1rem, 1.2vw, 1.15rem); margin-bottom: 1.4rem; max-width: 34rem; }
            .ws-cards { gap: clamp(.6rem, 1.1vw, .95rem); }
            .ws-card { border-radius: 1.15rem !important; }
            .ws-book { margin-top: 1.5rem; }
        }
        @media (min-aspect-ratio: 1/1) and (min-height: 600px) { .ws-card p { display: block; } .ws-card h4 { white-space: normal; } }
        /* square-ish landscape: keep the column narrower so he stays clear on the right */
        @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 13/10) {
            .ws-col { width: min(46%, 30rem); }
            .ws-head h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
            .ws-intro { display: none; }
        }
        @media (min-aspect-ratio: 1/1) and (max-height: 860px) {
            .ws-intro { display: none; }
            .ws-head h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); margin-bottom: .85rem; }
            .ws-cards { gap: .6rem; }
            .ws-book { margin-top: 1.1rem; }
        }
        @media (min-aspect-ratio: 1/1) and (max-height: 600px) {
            .ws-card { padding-top: .5rem !important; padding-bottom: .5rem !important; }
            .ws-head h2 { font-size: 1.8rem; margin-bottom: .5rem; }
            .ws-wrap { padding-top: 3.75rem; padding-bottom: 1.25rem; }
            .ws-book { margin-top: .75rem; }
            .ws-book-btn { padding-top: .55rem; padding-bottom: .55rem; }
        }

        .contact-shade { background: linear-gradient(90deg, rgba(4,4,4,.74) 0%, rgba(4,4,4,.5) 32%, rgba(4,4,4,.12) 54%, rgba(4,4,4,0) 66%), linear-gradient(to bottom, rgba(5,5,5,.35) 0%, rgba(5,5,5,0) 14%, rgba(5,5,5,0) 78%, #050505 100%) !important; }
        @media (max-width: 767px) { .contact-shade { background: linear-gradient(to bottom, rgba(5,5,5,.4) 0%, rgba(5,5,5,.45) 20%, rgba(5,5,5,.55) 60%, #050505 100%) !important; } }

        /* ---- Get in Touch: smaller cards ---- */
        .contact-grid { max-width: 29rem; }
        #contact .contact-card { padding: .6rem 1rem; }
        #contact .contact-card h4 { font-size: 1.08rem; }
        #contact .contact-card p { font-size: .74rem; margin-top: .15rem; }
        #contact .contact-card svg { width: 1.1rem; height: 1.1rem; }
        @media (min-width: 1024px) { #contact .contact-card { padding: .75rem 1.25rem; } #contact .contact-card h4 { font-size: 1.15rem; } }

        /* ---- Popups: same glass as the cards, page stays visible behind ---- */
        .modal-overlay { background: rgba(0,0,0,.12); }
        .glass-modal { background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(10,10,10,.14); -webkit-backdrop-filter: blur(36px) saturate(150%); backdrop-filter: blur(36px) saturate(150%);
            border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px -34px rgba(0,0,0,.5); overflow-x: hidden; }
        .glass-modal h3, .glass-modal p { text-shadow: 0 1px 10px rgba(0,0,0,.45); }
        .glass-modal h3.text-3xl { font-size: 1.6rem; line-height: 1.2; }
        .glass-modal p.text-sm { font-size: .84rem; color: rgba(255,255,255,.8); }
        .glass-modal label { color: rgba(255,255,255,.62) !important; }
        .glass-modal input, .glass-modal textarea, .glass-modal select { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.16) !important; padding-top: .6rem !important; padding-bottom: .6rem !important; font-size: .9rem; }
        .glass-modal input::placeholder, .glass-modal textarea::placeholder { color: rgba(255,255,255,.4); }
        .glass-modal form.space-y-4 > * + * { margin-top: .8rem; }
        .glass-modal form > button { padding-top: .8rem !important; padding-bottom: .8rem !important; margin-top: .9rem; border-radius: 9999px; transition: transform .35s var(--ease), box-shadow .35s ease, background .3s ease; }
        .glass-modal form > button:hover { transform: scale(1.03); box-shadow: 0 0 26px 2px rgba(236,196,92,.4); }
        .glass-modal .border-gray-700 { border-color: rgba(255,255,255,.25); }
        .modal-x { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(255,255,255,.08); }
        .bio-kicker { font-size: clamp(8.5px, 2.5vw, 10px); letter-spacing: .2em; white-space: nowrap; font-weight: 500; }
        .bio-copy { font-size: .85rem; line-height: 1.6; }
        @media (min-width: 768px) { .bio-copy { font-size: .95rem; line-height: 1.65; } .bio-kicker { letter-spacing: .3em; } }
        .bio-socials svg { width: 1.15rem; height: 1.15rem; }
        #bio-modal .modal-content { max-height: 94dvh; }

        /* ---- Mobile nav: spread across the row, a little higher, bigger tap targets ---- */
        @media (max-width: 767px) {
            #global-header { padding-top: max(.85rem, env(safe-area-inset-top, 0px)); padding-bottom: .85rem; }
            #global-header nav { justify-content: space-between; margin-left: clamp(1.25rem, 7vw, 2.5rem); gap: 6px; }
            #global-header nav .nav-link.nav-link { font-size: var(--nav-fs, clamp(10.5px, 3.45vw, 15px)); padding: .55rem .15rem; letter-spacing: .08em; }
        }

        /* ---- DARIO bar glows when the cursor is over it ---- */
        .hero-lockup .clip-reveal { overflow: clip; overflow-clip-margin: .3em; }
        .hero-lockup .name-bar { transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }

        /* ---- DARIO: faint highlight under the cursor + a soft halo when the cursor is close ---- */
        .hero-lockup .name-bar { box-shadow: 0 0 calc(var(--bh, 0) * .22em) rgba(240,198,84, calc(var(--bh, 0) * .32)); }

        /* ---- About pill on the landing page: glass, red on hover ---- */
        .about-pill { background: rgba(255,255,255,.1); color: #f4ecd8; border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
        .about-pill:hover, .about-pill:focus-visible { border-color: transparent; }

        /* ---- About popup buttons: compact, equal width, stacked on the left ---- */
        .bio-btns { display: grid; grid-template-columns: max-content; justify-content: start; gap: .6rem; max-width: none; }
        .bio-btn { padding: .72rem 1.8rem; }

        /* ---- Player: no seek strip, bigger centred play icon ---- */
        #player-bar { display: none !important; }
        .pl-play { width: 40px; height: 40px; }
        .pl-play svg { display: block; }

        /* ---- Music: exactly one screen tall (no dead scroll), footer row higher and clear of the player ---- */
        #music { height: 100dvh; min-height: 0; overflow: hidden; }
        #music-inner { padding-bottom: 5.25rem; }
        @media (min-width: 768px) { #music-inner { padding-bottom: 6.25rem; } }
        #view-toggle { top: 50%; transform: translateY(-50%); }

        /* ---- Landing on phones: keep the title clear of "scroll to explore" ---- */
        @media (max-width: 767px) { #home { padding-bottom: max(15dvh, 8.75rem); } }

        /* ---- Workshops: content a little higher on wide screens, firmer top shade ---- */
        @media (min-aspect-ratio: 1/1) { .ws-wrap { padding-bottom: 6rem; } .ws-shade { background: linear-gradient(90deg, rgba(8,7,6,.5) 0%, rgba(8,7,6,.3) 32%, rgba(8,7,6,.06) 54%, transparent 70%), linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,.18) 9%, rgba(10,10,10,0) 16%, rgba(10,10,10,0) 86%, rgba(10,10,10,.5) 100%); } }
        @media (min-aspect-ratio: 1/1) and (max-height: 700px) { .ws-wrap { padding-bottom: 3rem; } }

        /* ---- Workshop cards: description panel (always open on wide screens, tap to open on portrait screens) ---- */
        .ws-card p { display: block !important; }
        .ws-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .35s ease; }
        .ws-more > div { overflow: hidden; min-height: 0; }
        .ws-chev { display: none; width: 1rem; height: 1rem; flex: none; color: rgba(255,255,255,.55); transition: transform .45s var(--ease), color .3s ease; }
        .ws-limited { display: none; color: #f0cf6a; font-weight: 500; }
        @media (min-aspect-ratio: 1/1) and (min-height: 600px) { .ws-more { grid-template-rows: 1fr; opacity: 1; } }
        @media (max-aspect-ratio: 1/1) {
            .ws-card { align-items: flex-start !important; gap: .6rem !important; padding-right: .8rem !important; }
            .ws-card h4 { line-height: 1.55; }
            .ws-card .ws-badge { display: none; }
            .ws-limited { display: inline; }
            .ws-chev { display: block; margin-top: .55rem; }
            .ws-card.open .ws-chev { transform: rotate(180deg); color: #fff; }
            .ws-card.open .ws-more { grid-template-rows: 1fr; opacity: 1; }
            .ws-card p { font-size: .76rem !important; line-height: 1.45; color: rgba(255,255,255,.82) !important; margin-top: .1rem !important; padding-bottom: .15rem; }
            .ws-price { padding-top: .1rem; }
            .ws-price span:first-child { font-size: .86rem !important; }
            .ws-price span:last-child { font-size: 7.5px !important; }
            .ws-card:hover { transform: none; }
            .ws-card:active { transform: scale(.985); }
        }

        /* ---- Get in Touch on phones: title + line up top, cards low, face visible between ---- */
        @media (max-width: 767px) {
            #contact { padding-top: 4.4rem; }
            #contact .contact-main { justify-content: flex-start; }
            #contact .contact-grid { flex: 1; display: flex; flex-direction: column; margin-bottom: 1rem; }
            #contact .contact-col { flex: 1; justify-content: flex-start; }
            #contact .contact-intro { display: block; margin-bottom: 0; font-size: .95rem; }
            #contact .contact-btns { margin-top: auto; }
        }

        /* ---- Popups on phones: tighter so the forms fit one screen ---- */
        @media (max-width: 767px) {
            .glass-modal.p-6 { padding: 1.15rem 1.2rem; }
            .glass-modal h3.text-3xl { font-size: 1.35rem; margin-bottom: .25rem; }
            .glass-modal p.text-sm { font-size: .78rem; line-height: 1.45; }
            .glass-modal input, .glass-modal textarea, .glass-modal select { padding-top: .5rem !important; padding-bottom: .5rem !important; font-size: .85rem; }
            .glass-modal label { margin-bottom: .2rem; font-size: 9px; }
            .glass-modal form.space-y-4 > * + * { margin-top: .6rem; }
            .glass-modal .gap-3 { gap: .6rem; }
            .glass-modal form > button { margin-top: .7rem; padding-top: .7rem !important; padding-bottom: .7rem !important; }
        }

        /* ---- Top menu: no underline, the word slowly thickens on hover ---- */
        .nav-link::after { display: none; }
        #global-header nav .nav-link.nav-link { transition: color .5s ease, font-weight .6s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing .6s cubic-bezier(0.22, 1, 0.36, 1), text-shadow .5s ease; }
        @media (hover: hover) and (pointer: fine) {
            #global-header nav .nav-link.nav-link:hover { color: #f4ecd8; font-weight: 700; text-shadow: 0 1px 12px rgba(0,0,0,.65), 0 0 18px rgba(244,236,216,.18); }
        }

        /* ---- Discography: white scroll line; wide screens fade covers into the edges like on phones ---- */
        #album-progress-thumb { background: #f4ecd8; }
        @media (min-width: 768px) {
            #album-grid { --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
            #album-grid.fade-l { --fl: 7rem; }
            #album-grid.fade-r { --fr: 8rem; }
        }

        /* ---- Discography on phones: tighter top, room kept for the player so nothing is covered ---- */
        @media (max-width: 767px) {
            #music { padding-top: 4.6rem; }
            #music-head { margin-bottom: 1.4rem; gap: .9rem; }
            #music-inner { padding-bottom: 6.4rem; }
            #album-grid { padding-bottom: .9rem; }
        }

        /* ---- Get in Touch on phones: photo higher, slimmer cards ---- */
        @media (max-width: 767px) {
            .contact-photo { top: -11%; }
            .contact-photo img { object-position: 52% 20%; }
            #contact .contact-btns { width: min(100%, 18.5rem); gap: .5rem; }
            #contact .contact-card { padding: .5rem .85rem; border-radius: .9rem; }
            #contact .contact-card h4 { font-size: .98rem; }
            #contact .contact-card p { font-size: .68rem; }
            #contact .contact-card svg { width: 1rem; height: 1rem; }
        }

        /* ---- About popup on phones: fits one screen, buttons centred ---- */
        @media (max-width: 767px) {
            #bio-photo { height: min(24dvh, 190px) !important; }
            #bio-modal .bio-text { padding: 1rem 1.1rem 1rem !important; }
            #bio-modal h3 { font-size: 1.6rem !important; margin-bottom: .45rem !important; }
            .bio-kicker { margin-bottom: .3rem !important; }
            .bio-copy { font-size: .78rem; line-height: 1.5; margin-bottom: .55rem !important; }
            .bio-btns { justify-content: center; gap: .5rem; margin-top: .85rem; }
            .bio-btn { padding: .62rem 1.6rem; }
            .bio-socials { margin-top: .9rem !important; padding-top: .75rem !important; }
        }

        /* ---- About pill: hover turns into a slow-flowing gold-to-red gradient with a soft glow ---- */
        .about-pill { isolation: isolate; }
        .about-pill::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; pointer-events: none;
            background: linear-gradient(110deg, #f0c24f, #e9853a 25%, #c8282f 50%, #e9853a 75%, #f0c24f); background-size: 300% 100%;
            transition: opacity .5s ease; animation: pillFlow 6s linear infinite; }
        @keyframes pillFlow { to { background-position: 300% 0; } }
        .about-pill.about-pill:hover, .about-pill.about-pill:focus-visible { background: rgba(255,255,255,0); color: #fff; border-color: rgba(255,210,140,.35);
            box-shadow: 0 0 16px -3px rgba(236,140,60,.6), 0 0 34px -8px rgba(200,40,47,.55); text-shadow: 0 1px 6px rgba(80,10,0,.35); }
        .about-pill:hover::before, .about-pill:focus-visible::before { opacity: 1; }
        @media (prefers-reduced-motion: reduce) { .about-pill::before { animation: none; } }

        /* ---- Discography: grab-to-scroll with a mouse ---- */
        @media (hover: hover) and (pointer: fine) {
            #music.wide-row #album-grid { cursor: grab; }
            #album-grid.dragging { cursor: grabbing; user-select: none; }
            #album-grid.dragging .album-item { pointer-events: none; }
            #album-grid img { -webkit-user-drag: none; user-select: none; }
        }

        /* ---- Get in Touch on phones: warm light leak from the bottom-right corner (gold at the core, red at the edge) ---- */
        @media (max-width: 767px) {
            .contact-shade::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
                background: radial-gradient(85% 50% at 102% 104%, rgba(255,214,130,.56) 0%, rgba(248,150,70,.38) 22%, rgba(214,60,40,.26) 44%, rgba(170,30,30,.08) 62%, rgba(150,20,20,0) 76%); }
        }

        /* ================= Round 9 ================= */
        /* Top menu: same serif as the headings (Playfair), so it has real weight; the current page is set heavy */
        #global-header .nav-link, #global-header nav .nav-link.nav-link { text-shadow: 0 1px 3px rgba(0,0,0,.4); }
        #global-header nav .nav-link.nav-link { font-family: 'Playfair Display', serif; font-weight: 500; -webkit-text-stroke: 0 !important; color: rgba(255,255,255,.88); }
        #global-header nav .nav-link.nav-link::before { font-weight: 800; }
        #global-header nav .nav-link.nav-link.active { font-weight: 800; color: #f4ecd8; text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 14px rgba(244,236,216,.18); }
        @media (hover: hover) and (pointer: fine) { #global-header nav .nav-link.nav-link:hover { font-weight: 700; color: #f4ecd8; text-shadow: 0 1px 3px rgba(0,0,0,.4); } }
        @media (min-width: 768px) { #global-header nav { gap: 2.3rem; } #global-header nav .nav-link.nav-link { font-size: 14px; letter-spacing: .12em; } }
        @media (max-width: 767px) { #global-header nav .nav-link.nav-link { letter-spacing: .05em; font-size: var(--nav-fs, clamp(10.5px, 3.2vw, 14px)); } #global-header nav { margin-left: clamp(.9rem, 4.5vw, 2rem); } }

        /* DARIO bar: living warm gradient, slow and quiet */
        .bar-flow { position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: inset(0 0 0 0);
            background: linear-gradient(110deg, #d8ab3c 0%, #e7ba4b 16%, #eba246 34%, #e2763d 50%, #eba246 66%, #e7ba4b 84%, #d8ab3c 100%); background-size: 300% 100%; }
        body:not(.loaded) .bar-flow { clip-path: inset(0 100% 0 0); }
        body.loaded .bar-flow { animation: barFlow 16s linear infinite, flowWipe .9s var(--ease) .75s backwards; }
        @keyframes barFlow { to { background-position: 300% 0; } }
        @keyframes flowWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
        @media (prefers-reduced-motion: reduce) { body.loaded .bar-flow { animation: none; } }

        /* Get in Touch: About link + centred cards on phones */
        .contact-intro { margin-bottom: 0 !important; }
        .contact-about { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; margin: .85rem 0 1.75rem; padding-bottom: 3px; font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,236,216,.9);
            border-bottom: 1px solid rgba(244,236,216,.4); text-shadow: 0 1px 8px rgba(0,0,0,.6); transition: color .3s ease, border-color .3s ease; }
        .contact-about .bio-arrow { width: .95rem; height: .95rem; transition: transform .35s var(--ease); }
        .contact-about:hover { color: #fff; border-color: #f4ecd8; }
        .contact-about:hover .bio-arrow { transform: translateX(3px); }
        @media (min-width: 1024px) { .contact-about { margin-bottom: 2.25rem; } }
        @media (max-width: 767px) { .contact-about { margin: .7rem 0 0; font-size: .68rem; } #contact .contact-btns { margin-inline: auto; } }

        /* Support popup: amounts on one line */
        #tip-presets { flex-wrap: nowrap; gap: .4rem; }
        #tip-presets .tip-chip { padding: .42rem .72rem; font-size: .82rem; flex: 0 1 auto; min-width: 0; }

        /* Booking form: no overlapping fields, custom select arrow, date picker */
        .glass-modal .grid > * { min-width: 0; }
        .glass-modal input, .glass-modal select, .glass-modal textarea, .dd-date-btn { min-width: 0; max-width: 100%; }
        .dd-select { padding-right: 2.4rem !important; cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4ecd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important; background-position: right .85rem center !important; background-size: 1rem !important; }
        .dd-select.is-empty { color: rgba(255,255,255,.45); }
        .glass-modal select option { background: #161412; color: #fff; }
        .dd-date-btn { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.16) !important; padding-top: .6rem !important; padding-bottom: .6rem !important; color: #fff; font-size: .9rem; cursor: pointer; }
        .dd-date-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dd-date-val.is-empty { color: rgba(255,255,255,.45); }
        @media (max-width: 767px) { .dd-date-btn { padding-top: .5rem !important; padding-bottom: .5rem !important; font-size: .85rem; } }
        .dd-cal { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 1rem; border-radius: inherit;
            background: rgba(8,8,8,.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s ease; }
        .dd-cal.is-open { opacity: 1; }
        .dd-cal-card { width: min(100%, 19rem); padding: 1rem; border-radius: 1.1rem; background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.03)), rgba(16,14,12,.72);
            border: 1px solid rgba(255,255,255,.16); box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); transform: translateY(8px) scale(.98); transition: transform .3s var(--ease); }
        .dd-cal.is-open .dd-cal-card { transform: none; }
        .dd-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
        .dd-cal-title { font-family: 'Playfair Display', serif; font-weight: 700; color: #f4ecd8; font-size: 1.05rem; }
        .dd-cal-nav { width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #f4ecd8; background: rgba(255,255,255,.07); transition: background .2s ease; }
        .dd-cal-nav:hover { background: rgba(255,255,255,.16); }
        .dd-cal-nav:disabled { opacity: .3; pointer-events: none; }
        .dd-cal-week, .dd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
        .dd-cal-week span { font-size: 9px; letter-spacing: .14em; color: rgba(255,255,255,.45); padding: .25rem 0; }
        .dd-day { aspect-ratio: 1; border-radius: 9999px; font-size: .82rem; color: #fff; transition: background .2s ease, color .2s ease; }
        .dd-day:hover { background: rgba(255,255,255,.12); }
        .dd-day:disabled { color: rgba(255,255,255,.2); pointer-events: none; }
        .dd-day.is-today { box-shadow: inset 0 0 0 1px rgba(244,236,216,.45); }
        .dd-day.is-on { background: #f4ecd8; color: #050505; font-weight: 700; }
        .dd-cal-foot { display: flex; justify-content: flex-end; margin-top: .6rem; }
        .dd-cal-close { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); padding: .4rem .6rem; }
        .dd-cal-close:hover { color: #fff; }

        /* About popup: darker close button, arrows, left-aligned buttons, footer-like icon row */
        #bio-modal .modal-content > button[aria-label="Close"] { background: rgba(0,0,0,.5) !important; border: 1px solid rgba(255,255,255,.22); color: #fff; }
        #bio-modal .modal-content > button[aria-label="Close"]:hover { background: rgba(0,0,0,.7) !important; }
        .bio-btns { justify-content: start !important; }
        .bio-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; }
        .bio-arrow { width: 1rem; height: 1rem; flex: none; transition: transform .35s var(--ease); }
        .bio-btn:hover .bio-arrow { transform: translateX(3px); }
        .bio-socials { gap: 1.5rem !important; justify-content: flex-start !important; }
        @media (max-width: 767px) { .bio-socials { justify-content: center !important; gap: 1.55rem !important; padding-bottom: .15rem; } }

        /* Discography on phones: track spans the full width so the library sits centred */
        @media (max-width: 767px) { #album-grid { width: calc(100% + 3rem); max-width: none; } }

        /* Player: full bar on the music page, folds into a cover tile elsewhere */
        #mini-player { height: 112px; padding: 0 !important; }
        #player-card { --pe: cubic-bezier(.32,.72,0,1); position: absolute !important; margin: 0 !important; max-width: none !important; height: 64px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
            padding: 0 .5rem 0 66px !important; cursor: default;
            transition: left .62s var(--pe), bottom .62s var(--pe), width .62s var(--pe), height .62s var(--pe), border-radius .62s var(--pe), box-shadow .4s ease; }
        @media (min-width: 768px) { #player-card { bottom: 22px; } }
        #player-card.no-anim, #player-card.no-anim * { transition: none !important; }
        #player-cover { position: absolute; left: 10px; top: 10px; width: 44px !important; height: 44px !important; border-radius: 9px !important;
            transition: left .62s var(--pe), top .62s var(--pe), width .62s var(--pe), height .62s var(--pe), border-radius .62s var(--pe); }
        #player-card > :not(#player-cover):not(#player-dock-btn) { transition: opacity .3s ease .32s; }
        #player-card.docked { height: 58px; border-radius: 16px !important; padding: 0 !important; cursor: pointer; box-shadow: 0 14px 34px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12); }
        #player-card.docked > :not(#player-cover):not(#player-dock-btn) { opacity: 0; pointer-events: none; transition: opacity .14s ease; }
        #player-card.docked #player-cover { left: 0; top: 0; width: 58px !important; height: 58px !important; border-radius: 16px !important; }
        #player-dock-btn { position: absolute; left: 0; top: 0; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: scale(.7);
            transition: opacity .2s ease, transform .3s var(--pe); }
        #player-dock-btn span { width: 30px; height: 30px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff;
            background: rgba(10,10,10,.42); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
        #player-card.docked #player-dock-btn { opacity: 1; pointer-events: auto; transform: none; transition: opacity .3s ease .38s, transform .45s var(--pe) .38s; }
        /* phones: the folded tile waits on the left edge, mid-screen, clear of buttons and footers */
        @media (max-width: 767px) { #player-card.docked { bottom: 40dvh; } }
        #mini-player { transition: transform .7s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0s; }
        #mini-player.translate-y-\[120\%\] { visibility: hidden; transition: transform .7s cubic-bezier(0.16,1,0.3,1), visibility 0s linear .7s; }

        /* ================= Round 12 ================= */
        /* Top menu in title case: reads like the headings, more editorial than spaced capitals */
        #global-header nav .nav-link.nav-link { text-transform: none; letter-spacing: .02em; }
        @media (min-width: 768px) { #global-header nav .nav-link.nav-link { font-size: 16px; letter-spacing: .02em; } #global-header nav { gap: 2.2rem; } }
        @media (max-width: 767px) { #global-header nav .nav-link.nav-link { letter-spacing: .01em; font-size: var(--nav-fs, clamp(12px, 3.9vw, 16px)); } }

        /* Masked heading reveals: room at the sides so text shadows (e.g. the G of "Get in Touch") are never clipped */
        .mask { padding-left: .2em; padding-right: .2em; margin-left: -.2em; margin-right: -.2em; }

        /* Get in Touch on phones: the question on line one, the answer on line two (size fitted by JS) */
        @media (max-width: 767px) { #contact .ci-q { display: block; white-space: nowrap; } }

        /* ================= Round 13 ================= */
        /* booking date field: same shape and height as the other fields */
        .glass-modal .dd-date-btn { border-radius: .5rem !important; margin-top: 0 !important; line-height: 1.5rem; }
        .glass-modal .dd-date-btn:hover { transform: none; box-shadow: none; border-color: rgba(255,255,255,.3) !important; }
        .glass-modal input:not(.hp-field), .glass-modal .dd-date-btn { min-height: 2.75rem; }
        @media (max-width: 767px) { .glass-modal input:not(.hp-field), .glass-modal .dd-date-btn { min-height: 2.5rem; } }
        .hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

        /* community interests: one line, selectable */
        .interest-row { display: flex; flex-wrap: nowrap; gap: .4rem; }
        .interest-chip { flex: 0 1 auto; min-width: 0; white-space: nowrap; padding: .42rem .7rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.25); font-size: 11.5px; color: rgba(255,255,255,.85);
            transition: background .25s ease, border-color .25s ease, color .25s ease; }
        .interest-chip:hover { border-color: rgba(255,255,255,.6); }
        .interest-chip[aria-pressed="true"] { background: #f4ecd8; border-color: #f4ecd8; color: #050505; font-weight: 600; }
        @media (max-width: 380px) { .interest-chip { padding: .4rem .55rem; font-size: 10.5px; } }

        /* mobile menu a touch smaller, more air */
        @media (max-width: 767px) { #global-header nav .nav-link.nav-link { font-size: var(--nav-fs, clamp(11px, 3.4vw, 14px)); } }

        /* heading reveals: enough room on every side that soft text shadows are never clipped */
        .mask { padding: .35em .45em !important; margin: 0 -.45em -.7em !important; }
        .mask:first-child { margin-top: -.35em !important; }
        .mask:last-child { margin-bottom: -.35em !important; }
        @media (max-width: 1023px) { #workshops h2 .mask { margin-top: -.35em !important; margin-bottom: -.35em !important; margin-right: -.23em !important; } #workshops h2 .mask:last-child { margin-right: -.45em !important; } }

        /* "Soul" on the hire page: same living gradient as DARIO */
        .soul-hl { position: relative; isolation: isolate; }
        body.loaded .soul-hl .bar-flow { animation: none; }
        #hire:not(.in-view) .soul-hl .bar-flow { clip-path: inset(0 100% 0 0); }
        #hire.in-view .soul-hl .bar-flow { animation: barFlow 16s linear infinite, flowWipe 1.1s var(--ease) .8s backwards; }

        /* ================= Round 14 ================= */
        /* Hire: reel button beside the booking CTA, awards strip */
        .hire-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem; }
        .reel-btn { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem 1.25rem .55rem .55rem; border-radius: 9999px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #f4ecd8;
            background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .35s var(--ease), background .3s ease, border-color .3s ease, box-shadow .35s ease; }
        .reel-btn .reel-ic { width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #f4ecd8; color: #050505; transition: transform .35s var(--ease); }
        .reel-btn:hover { transform: scale(1.04); background: rgba(255,255,255,.14); border-color: rgba(244,236,216,.6); box-shadow: 0 0 24px 1px rgba(236,196,92,.3); }
        .reel-btn:hover .reel-ic { transform: scale(1.08); }
        .hire-awards { list-style: none; margin: 2.25rem auto 0; padding: 1rem 0 0; max-width: 46rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; border-top: 1px solid rgba(255,255,255,.12);
            font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); }
        .hire-awards li { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
        .hire-awards li::before { content: ''; width: 5px; height: 5px; transform: rotate(45deg); background: #e0bd55; flex: none; }
        .hire-awards b { color: #f4ecd8; font-weight: 600; }
        @media (max-width: 767px) {
            .hire-awards { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .4rem; margin-top: 1.4rem; padding-top: .85rem; font-size: 9.5px; letter-spacing: .1em; max-width: 19rem; }
            .reel-btn { font-size: 10px; padding: .45rem 1rem .45rem .45rem; }
            .reel-btn .reel-ic { width: 1.75rem; height: 1.75rem; }
        }
        /* reel lightbox */
        .reel-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: .9rem; overflow: hidden; background: #000; }
        .reel-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
        .reel-x { position: absolute; top: -.75rem; right: -.75rem; z-index: 5; width: 2.2rem; height: 2.2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); }
        @media (max-width: 767px) { .reel-x { top: -2.75rem; right: .25rem; } }
        .reel-link { display: block; text-align: right; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); padding: .55rem .4rem .1rem; }
        .reel-link:hover { color: #fff; }

        /* forms: messages, thank-you state, email line */
        .form-note { font-size: .78rem; color: #f0cf6a; margin-top: .6rem; text-align: center; }
        .form-note a, .dm-email a { color: #f4ecd8; text-decoration: underline; text-underline-offset: 3px; }
        .form-thanks { text-align: center; padding: 1.5rem .5rem .75rem; }
        .form-thanks svg { width: 2.6rem; height: 2.6rem; margin: 0 auto .75rem; color: #e0bd55; }
        .form-thanks h4 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: #f4ecd8; margin-bottom: .35rem; }
        .form-thanks p { font-size: .88rem; color: rgba(255,255,255,.78); }
        .dm-email { margin-top: .9rem; text-align: center; font-size: .78rem; color: rgba(255,255,255,.6); }
        .interest-row { flex-wrap: wrap !important; }
        #community-modal .glass-modal form > div { margin-top: .7rem; }
        #reel-modal .glass-modal { overflow: visible; }

        /* ================= Round 15 ================= */
        /* booking: every single-line field exactly the same height */
        .glass-modal input:not(.hp-field), .glass-modal select, .glass-modal .dd-date-btn { height: 2.75rem !important; min-height: 0 !important; box-sizing: border-box; padding-top: 0 !important; padding-bottom: 0 !important; line-height: normal; }
        @media (max-width: 767px) { .glass-modal input:not(.hp-field), .glass-modal select, .glass-modal .dd-date-btn { height: 2.5rem !important; } }
        #tip-input { height: auto !important; padding-top: 1rem !important; padding-bottom: 1rem !important; }

        /* mobile menu: smaller, words hang from the top of the D logo */
        @media (max-width: 767px) {
            #global-header { align-items: flex-start; }
            #global-header nav { align-items: flex-start; margin-top: 0; }
            #global-header nav .nav-link.nav-link { font-size: var(--nav-fs, clamp(10.5px, 3.15vw, 13px)); line-height: 1; padding: .12rem .1rem .7rem; }
        }

        /* email copy chip */
        .copy-email { position: relative; display: inline-flex; align-items: center; gap: .35rem; color: #f4ecd8; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(244,236,216,.45); }
        .copy-email svg { width: .95rem; height: .95rem; flex: none; transition: opacity .2s ease, transform .3s var(--ease); }
        .copy-email .ce-done { position: absolute; right: 0; opacity: 0; transform: scale(.6); color: #e0bd55; }
        .copy-email.copied .ce-copy { opacity: 0; transform: scale(.6); }
        .copy-email.copied .ce-done { opacity: 1; transform: none; }
        .ce-tip { position: absolute; left: 50%; bottom: calc(100% + .45rem); transform: translate(-50%, 4px); font-style: normal; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #050505; background: #f4ecd8;
            padding: .25rem .55rem; border-radius: 9999px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .3s var(--ease); white-space: nowrap; }
        .copy-email.copied .ce-tip { opacity: 1; transform: translate(-50%, 0); }

        /* ================= Round 16 ================= */
        /* mobile menu: smaller, centred on the D logo again */
        @media (max-width: 767px) {
            #global-header { align-items: center; }
            #global-header nav { align-items: center; }
            #global-header nav .nav-link.nav-link { font-size: var(--nav-fs, clamp(10px, 2.85vw, 12px)); line-height: 1; padding: .55rem .1rem; }
        }
        /* footer: Ontario Arts Council credit beside the copyright */
        .footer-credit { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; }
        .oac-logo { display: block; opacity: .72; transition: opacity .3s ease; }
        .oac-logo:hover { opacity: 1; }
        .oac-logo img { display: block; height: 26px; width: auto; }
        @media (min-width: 768px) {
            .footer-credit { flex-direction: row; gap: 1.25rem; text-align: left; }
            .footer-credit span { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,.15); }
            .oac-logo img { height: 30px; }
        }
        /* keep Get in Touch exactly one screen tall with the credit added */
        #contact footer { padding-top: .7rem; padding-bottom: .7rem; gap: .75rem; }
        #contact .footer-credit { gap: .5rem; }
        @media (min-width: 768px) { #contact footer { padding-top: .9rem; padding-bottom: .9rem; } }
        @media (max-width: 767px) { #contact .contact-grid { margin-bottom: .6rem; } }

        /* ================= Round 17 ================= */
        /* mobile menu: links grouped to the right, clear space after the D */
        @media (max-width: 767px) {
            #global-header nav { justify-content: flex-end; gap: clamp(.65rem, 3.4vw, 1.1rem); margin-left: clamp(2rem, 11vw, 3.5rem); }
        }
        /* glow hovers start mid-flow (the first seconds of the cycle looked lopsided) */
        .glow-hover:hover { animation-delay: -1.8s; }
        .glow-soft:hover, .glow-soft:focus-within { animation-delay: -2.8s; }
        /* landing title is clickable */
        .hero-lockup h1 { cursor: pointer; }
        .hero-lockup h1:focus-visible { outline: 2px solid rgba(244,236,216,.5); outline-offset: 8px; border-radius: 4px; }
        /* desktop: folded player sits above the footer */
        @media (min-width: 768px) { #player-card.docked { bottom: 92px; } }

        /* footer: © left · Ontario Arts Council centre · socials right (desktop); logo + © share one row on phones */
        .oac-logo { opacity: .42; }
        .oac-logo:hover { opacity: .9; }
        .footer-copy { white-space: nowrap; }
        @media (min-width: 768px) {
            #contact footer { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
            #contact .footer-credit { display: contents; }
            #contact .footer-copy { grid-column: 1; grid-row: 1; justify-self: start; padding-left: 0; border-left: 0; }
            #contact .oac-logo { grid-column: 2; grid-row: 1; justify-self: center; }
            #contact .oac-logo img { height: 40px; }
            #contact .footer-social { grid-column: 3; grid-row: 1; justify-self: end; }
        }
        @media (max-width: 767px) {
            #contact .footer-credit { flex-direction: row; justify-content: center; align-items: center; gap: .9rem; }
            #contact .oac-logo img { height: 30px; }
            #contact .footer-copy { padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.15); }
            .fc-rest { display: none; }
        }
        .footer-credit .fc-rest { padding: 0 !important; border: 0 !important; }

        /* ================= Round 18 ================= */
        .glow-hover:hover { animation-delay: var(--gd, -1.8s); }
        .glow-soft:hover, .glow-soft:focus-within { animation-delay: var(--gd, -2.8s); }

        /* phones: a little more air between the social icons and the logo / copyright row */
        @media (max-width: 767px) { #contact footer { gap: 1.15rem; padding-top: .85rem; } }

        /* folded player: the tile reacts as a link (opens the music page), the play button has its own response */
        #player-card.docked { transition: left .62s var(--pe), bottom .62s var(--pe), width .62s var(--pe), height .62s var(--pe), border-radius .62s var(--pe), box-shadow .4s ease, transform .35s var(--pe), border-color .3s ease; }
        @media (hover: hover) and (pointer: fine) {
            #player-card.docked:hover { transform: translateY(-3px) scale(1.04); border-color: rgba(244,236,216,.5); box-shadow: 0 18px 40px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(244,236,216,.25), 0 0 22px -4px rgba(236,196,92,.35); }
            #player-dock-btn span { transition: transform .3s var(--pe), background .25s ease, color .25s ease, border-color .25s ease; }
            #player-dock-btn:hover span { transform: scale(1.15); background: #f4ecd8; color: #050505; border-color: #f4ecd8; }
        }
        #player-card.docked:active { transform: scale(.96); }
        #player-dock-btn:active span { transform: scale(.88); }

        /* "Toronto, ON": quiet highlight on hover / tap */
        .city-tag { cursor: default; }
        .city-tag span { transition: letter-spacing .5s var(--ease), color .4s ease; }
        .city-tag svg { transition: transform .45s var(--ease), color .4s ease; }
        .city-tag:hover, .city-tag.lit { color: #f4ecd8; }
        .city-tag:hover span, .city-tag.lit span { letter-spacing: .38em; }
        .city-tag:hover svg, .city-tag.lit svg { transform: translateY(-2px); color: #e0bd55; }
        /* folded player: the play button is only the round button in the middle; the rest of the tile opens the music page */
        #player-dock-btn { left: 12px !important; top: 12px !important; width: 34px !important; height: 34px !important; border-radius: 9999px; }
        /* the song that's playing keeps its lifted cover with the same warm glow as the player tile */
        .album-item.is-playing .album-frame { transform: scale(1.045); box-shadow: 0 24px 44px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(244,236,216,.3), 0 0 26px -3px rgba(236,196,92,.45); }
        .album-item h3 { transition: color .4s ease, text-shadow .4s ease, opacity .3s ease; }
        .album-item.is-playing h3 { opacity: 1 !important; color: #f8edd0; text-shadow: 0 0 14px rgba(236,196,92,.55), 0 0 2px rgba(255,220,140,.35); }
        #album-grid { padding-top: 1.1rem !important; margin-top: -.6rem; }
        /* playing / hover glow: room so it is never clipped, titles always sit above the cover */
        .album-frame { position: relative; z-index: 1; transform-origin: 50% 88%; }
        .album-item h3, .album-item p { position: relative; z-index: 2; }
        #album-grid { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; margin-top: -1.1rem !important; margin-bottom: -.6rem; }
        @media (min-width: 768px) { #album-grid { margin-inline: -30px; padding-inline: 30px; scroll-padding-inline: 30px; } }
        .album-item.is-playing h3 { color: #fffaf0; text-shadow: 0 0 12px rgba(255,170,70,.6), 0 0 26px rgba(240,140,50,.35); }
.album-item.is-playing h3, .album-item:hover h3, .group:hover h3 { text-shadow: none !important; }
/* round: give the playing glow full room at the top */
#album-grid { padding-top: 2.4rem !important; margin-top: -1.9rem !important; }
#music.wide-row #album-grid { height: calc(var(--cover, 380px) + 82px + .8rem); }
/* mobile menu: a little more air on the right edge, links sit a touch closer to the D */
@media (max-width: 767px) { #global-header nav { padding-right: 7px; } }
/* phone: draggable docked player */
@media (max-width: 767px) {
    #player-card.docked { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    #player-card.docked img { -webkit-user-drag: none; pointer-events: none; }
    #player-card.docked.lifted { transform: scale(1.1) !important; border-color: rgba(244,236,216,.5); box-shadow: 0 26px 46px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(244,236,216,.25), 0 0 24px -4px rgba(236,196,92,.35) !important; }
}
/* phone menu: spread across the top, clear gap after the D, air on the right */
@media (max-width: 767px) {
    #global-header nav { justify-content: space-between !important; gap: 8px !important; margin-left: clamp(1.6rem, 8vw, 2.4rem) !important; padding-right: clamp(.5rem, 2.8vw, .9rem) !important; }
    #global-header nav .nav-link.nav-link { font-size: var(--nav-fs, clamp(12px, 3.55vw, 15.5px)); font-weight: 600; letter-spacing: .01em; }
    #global-header nav .nav-link.nav-link.active { font-weight: 800; }
}
/* Book Now + Request a Booking: same living warm gradient as the About button, fading in a touch slower */
.cta-flow { position: relative; isolation: isolate; transition: color .5s ease, border-color .5s ease, box-shadow .6s ease, transform .5s cubic-bezier(.32,.72,0,1), text-shadow .5s ease !important; }
.cta-flow::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; pointer-events: none;
    background: linear-gradient(110deg, #f0c24f, #e9853a 25%, #c8282f 50%, #e9853a 75%, #f0c24f); background-size: 300% 100%;
    transition: opacity .75s ease; animation: pillFlow 6s linear infinite; }
.cta-flow:hover::before, .cta-flow:focus-visible::before { opacity: 1; }
.cta-flow.cta-flow:hover, .cta-flow.cta-flow:focus-visible { color: #fff !important; border-color: rgba(255,210,140,.35) !important; transform: scale(1.03);
    box-shadow: 0 0 14px -3px rgba(236,140,60,.5), 0 0 30px -8px rgba(200,40,47,.42) !important; text-shadow: 0 1px 6px rgba(80,10,0,.35); }
.cta-flow:hover svg, .cta-flow:focus-visible svg { color: #fff !important; }
@media (prefers-reduced-motion: reduce) { .cta-flow::before { animation: none; } }
/* now-playing bars on the playing song's artwork (grid + list), frozen while paused */
.eq { position: absolute; left: 8px; bottom: 8px; z-index: 3; display: flex; align-items: flex-end; gap: 2.5px; height: 22px; padding: 5px 6px; border-radius: 8px;
    background: rgba(10,8,6,.38); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255,240,215,.16);
    opacity: 0; transform: translateY(4px) scale(.9); transition: opacity .45s ease, transform .5s cubic-bezier(.32,.72,0,1); pointer-events: none; }
.eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: #f8edd0; box-shadow: 0 0 6px rgba(255,190,110,.45); transform-origin: 50% 100%;
    animation: eqA 1.05s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-name: eqB; animation-duration: .82s; animation-delay: -.3s; }
.eq i:nth-child(3) { animation-name: eqC; animation-duration: 1.24s; animation-delay: -.6s; }
@keyframes eqA { 0% { transform: scaleY(.3); } 50% { transform: scaleY(.85); } 100% { transform: scaleY(.5); } }
@keyframes eqB { 0% { transform: scaleY(.9); } 45% { transform: scaleY(.35); } 100% { transform: scaleY(1); } }
@keyframes eqC { 0% { transform: scaleY(.55); } 60% { transform: scaleY(1); } 100% { transform: scaleY(.28); } }
.album-item.is-playing .eq, .al-row.is-playing .eq { opacity: 1; transform: none; }
body.audio-paused .eq i { animation-play-state: paused; }
.al-thumb { position: relative; }
.al-thumb .eq { left: 4px; bottom: 4px; height: 16px; padding: 3px 4px; gap: 2px; border-radius: 6px; }
.al-thumb .eq i { width: 2px; }
@media (prefers-reduced-motion: reduce) { .eq i { animation: none; transform: scaleY(.6); } }
/* desktop: hovering the folded player slides it open into a compact player */
@media (min-width: 768px) {
    #player-card.docked.peek { padding: 0 .4rem 0 68px !important; cursor: default; transform: none !important;
        border-color: rgba(244,236,216,.32); box-shadow: 0 18px 40px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(244,236,216,.18), 0 0 22px -6px rgba(236,196,92,.28) !important; }
    #player-card.docked.peek > :not(#player-cover):not(#player-dock-btn):not(#player-vol) { opacity: 1; pointer-events: auto; transition: opacity .32s ease .2s; }
    #player-card.docked.peek #player-vol { display: none !important; }
    #player-card.docked.peek #player-dock-btn { opacity: 0; pointer-events: none; transform: scale(.7); transition: opacity .15s ease, transform .3s var(--pe); }
    #player-card.docked.peek #player-cover { cursor: pointer; }
    #player-card.docked.peek #player-bar { left: 68px; right: 14px; }
}
/* pop-ups: the page behind dims only a touch */
.modal-overlay { background: rgba(0,0,0,.1); transition: opacity .5s ease !important; }
.modal-content, .modal.is-open .modal-content { transform: none; }
.modal > .modal-content { transition: none; }
.modal > .modal-content { opacity: 1; }
.modal:not(.is-open) > .modal-content { opacity: 0; transition: opacity 0s linear .4s !important; }
@media (prefers-reduced-motion: reduce) { .modal > .modal-content, .modal:not(.is-open) > .modal-content { transition: opacity .3s ease !important; } }
/* pop-ups: quicker in, much quicker out */
.modal { transition: visibility 0s linear .27s; }
.modal.is-open { transition-delay: 0s; }
.modal-overlay { transition: opacity .3s ease !important; }
.modal:not(.is-open) > .modal-overlay { transition: opacity .18s ease !important; }
.modal:not(.is-open) > .modal-content { transition: opacity 0s linear .27s !important; }
/* bars are driven frame by frame from script now (like a level meter) */
.eq { gap: 2px; padding: 5px 5px; }
.eq i { animation: none !important; width: 2.6px; transform: scaleY(.35); will-change: transform; }
.al-thumb .eq i { width: 1.8px; }
/* pop-ups: page recedes a touch behind an open pop-up */
#app-content { transform-origin: 50% 50%; transition: transform .26s cubic-bezier(.4,0,.6,1), filter .5s cubic-bezier(0.16,1,0.3,1); }
body.modal-open #app-content { transform: scale(.982); transition: transform .6s cubic-bezier(.2,.9,.25,1), filter .5s cubic-bezier(0.16,1,0.3,1); }
@media (prefers-reduced-motion: reduce) { body.modal-open #app-content { transform: none; } }
/* one glint of light along the top edge as the glass lands */
.modal-glint { position: absolute; top: 0; left: 18px; right: 18px; height: 34px; pointer-events: none; z-index: 30; opacity: 0; overflow: hidden; border-radius: 0; }
.modal-glint i { position: absolute; inset: 0; opacity: 0; }
.modal-glint i::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,244,220,.0) 30%, rgba(255,244,220,.85) 50%, rgba(255,244,220,0) 70%, transparent); }
.modal-glint i::after { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 100% at 50% 0%, rgba(255,240,210,.12), transparent 70%); }
/* heading reveal masks: more room so the soft title shadow is never clipped (layout unchanged: padding offset by margins) */
.mask { padding: .35em .75em .85em !important; margin: 0 -.75em -1.2em !important; }
.mask:first-child { margin-top: -.35em !important; }
.mask:last-child { margin-bottom: -.85em !important; }
@media (max-width: 1023px) { #workshops h2 .mask { margin-top: -.35em !important; margin-bottom: -.85em !important; margin-right: -.53em !important; } #workshops h2 .mask:last-child { margin-right: -.75em !important; } }
/* page recede behind pop-ups: same smooth curve in and out, and the page stays on its own layer so nothing snaps */
#app-content { transform: scale(1); transition: transform .45s cubic-bezier(.32,.72,0,1), filter .5s cubic-bezier(0.16,1,0.3,1) !important; }
body.modal-open #app-content { transform: scale(.985); transition: transform .75s cubic-bezier(.32,.72,0,1), filter .5s cubic-bezier(0.16,1,0.3,1) !important; }
.modal { transition: visibility 0s linear .17s; }
.modal:not(.is-open) > .modal-content { transition: opacity 0s linear .17s !important; }
.modal:not(.is-open) > .modal-overlay { transition: opacity .16s ease !important; }
/* page recede is driven from script now; keep the page on its own layer so start/end never re-render */
#app-content, body.modal-open #app-content { transform: none; transition: filter .5s cubic-bezier(0.16,1,0.3,1) !important; will-change: transform; }
/* no background effects behind pop-ups */
#app-content, body.modal-open #app-content { transform: none; will-change: auto; }
/* closing: a short, soft fade (pop-up and the light dim together) */
.modal { transition: visibility 0s linear .21s; }
.modal:not(.is-open) > .modal-content { transition: opacity 0s linear .21s !important; }
.modal:not(.is-open) > .modal-overlay { transition: opacity .19s ease-out !important; }
/* tablets in portrait: the taller menu needs more room above the Workshops title */
@media (max-aspect-ratio: 1/1) and (min-width: 768px) { .ws-wrap { padding-top: 5.4rem; } }
/* keyboard users: pop-up panels take focus without drawing a ring around the whole card */
.modal-content:focus { outline: none; }
/* desktop mini player: the panel keeps its full width and is revealed/hidden with a clip, so opening and closing never
   re-lay out the text or re-blur a resizing glass panel (smooth), and the panel closes over the text instead of the text sliding over the cover */
@media (min-width: 768px) {
    #player-card { clip-path: inset(0px 0px 0px 0px round 1.75rem); }
    #player-card.docked { padding: 0 .4rem 0 68px !important; clip-path: inset(0px calc(100% - 58px) 0px 0px round 16px); box-shadow: none !important; transform: none !important;
        transition: left .62s var(--pe), bottom .62s var(--pe), width .62s var(--pe), height .62s var(--pe), border-radius .62s var(--pe), clip-path .46s cubic-bezier(.4,0,.2,1), border-color .3s ease !important; }
    #player-card.docked.peek { clip-path: inset(0px 0px 0px 0px round 16px); transition: left .62s var(--pe), bottom .62s var(--pe), width .62s var(--pe), clip-path .55s cubic-bezier(.22,1,.36,1), border-color .3s ease !important; }
    #player-card.docked > :not(#player-cover):not(#player-dock-btn) { opacity: 1 !important; pointer-events: none; transition: none !important; }
    #player-card.docked.peek > :not(#player-cover):not(#player-dock-btn):not(#player-vol) { pointer-events: auto; }
    #player-card.docked #player-vol { display: none !important; }
    #player-card.docked #player-bar { left: 68px; right: 14px; }
    #player-card.docked #player-dock-btn { transition: opacity .25s ease .1s, transform .35s var(--pe) .1s; }
    #player-card.docked.peek #player-dock-btn { opacity: 0; pointer-events: none; transform: scale(.75); transition: opacity .14s ease, transform .25s var(--pe); }
    .pc-shadow { position: absolute; bottom: 92px; height: 58px; width: 58px; border-radius: 16px; pointer-events: none; opacity: 0;
        box-shadow: 0 14px 34px -14px rgba(0,0,0,.7); transition: width .46s cubic-bezier(.4,0,.2,1), left .62s cubic-bezier(.32,.72,0,1), opacity .3s ease, box-shadow .4s ease; }
    .pc-shadow.on { opacity: 1; transition-delay: 0s, 0s, .35s, 0s; }
    .pc-shadow.peek { width: 352px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.75), 0 0 22px -6px rgba(236,196,92,.28); transition: width .55s cubic-bezier(.22,1,.36,1), left .62s cubic-bezier(.32,.72,0,1), opacity .3s ease, box-shadow .4s ease; }
}
@media (min-width: 768px) and (hover: hover) { #player-card.docked:hover { border-color: rgba(244,236,216,.4); } }
/* Request a Booking: warmer, more gold/amber in the flow (a touch of ember, not a red wash); dark text reads best on the light gradient */
.cta-flow::before { background: linear-gradient(110deg, #f5d270, #f1b04a 22%, #ec8f3c 42%, #df6a36 52%, #ec8f3c 62%, #f1b04a 80%, #f5d270); background-size: 300% 100%; }
.cta-flow.cta-flow:hover, .cta-flow.cta-flow:focus-visible { color: #1a0e05 !important; text-shadow: 0 1px 0 rgba(255,235,200,.35);
    box-shadow: 0 0 16px -3px rgba(240,170,70,.5), 0 0 34px -8px rgba(225,110,50,.38) !important; }
.cta-flow:hover svg, .cta-flow:focus-visible svg { color: #1a0e05 !important; }
/* glow layers exist from the start (no layer creation on the first hover) + a one-off invisible warm-up run */
.glow-hover::after, .glow-soft::before, .cta-flow::before, .about-pill::before { will-change: opacity; }
.gw-warm { animation: gwx 3.7s ease-in-out infinite alternate, gwy 5.3s ease-in-out infinite alternate, gws 4.1s ease-in-out infinite alternate, gwb 3.1s ease-in-out infinite alternate; }
.gw-warm::after, .gw-warm::before { opacity: .001 !important; }
/* one title face everywhere (the one the section titles use): menu, list-view song names, calendar + thank-you titles.
   The DARIO DVON name on the landing stays in Playfair as the wordmark. */
:root { --title-font: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
#global-header nav .nav-link.nav-link, .al-title, .dd-cal-title, .form-thanks h4 { font-family: var(--title-font) !important; }
#global-header nav .nav-link.nav-link { font-weight: 500; letter-spacing: .01em; }
#global-header nav .nav-link.nav-link.active { font-weight: 700; }
/* last few labels on the device font -> Inter, like the rest of the text */
.sh-text, .city-tag, .city-tag *, .about-pill { font-family: 'Inter', sans-serif !important; }
/* menu: the bold state builds up gradually (thin outlines of the letters fade/spread in + letters open up) instead of snapping between weights */
#global-header nav .nav-link.nav-link, #global-header nav .nav-link.nav-link:hover, #global-header nav .nav-link.nav-link.active { font-weight: 500 !important; -webkit-text-stroke: 0px transparent !important; }
#global-header nav .nav-link.nav-link { letter-spacing: .01em;
    text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 rgba(244,236,216,0), 0 0 0 rgba(244,236,216,0), 0 0 0 rgba(244,236,216,0) !important;
    transition: color .45s ease, letter-spacing .5s cubic-bezier(.32,.72,0,1), text-shadow .5s cubic-bezier(.32,.72,0,1) !important; }
@media (hover: hover) and (pointer: fine) { #global-header nav .nav-link.nav-link:hover { letter-spacing: .026em;
    text-shadow: 0 1px 3px rgba(0,0,0,.4), .32px 0 0 rgba(244,236,216,.95), -.32px 0 0 rgba(244,236,216,.95), 0 .3px 0 rgba(244,236,216,.6) !important; } }
#global-header nav .nav-link.nav-link.active { letter-spacing: .03em;
    text-shadow: 0 1px 3px rgba(0,0,0,.4), .45px 0 0 rgba(244,236,216,1), -.45px 0 0 rgba(244,236,216,1), 0 .4px 0 rgba(244,236,216,.75) !important; }
/* heading masks: with the extra shadow room, the hidden line has to start further down to be fully out of sight */
.mask > span { transform: translateY(calc(100% + 1.25em)); will-change: transform; }
@keyframes maskUp { from { transform: translateY(calc(100% + 1.25em)); } to { transform: none; } }
/* entrance elements sit on their own layers from the start, so the first frame of the slide-in doesn't hitch */
.reveal-up, .album-item { will-change: transform; }
/* desktop folded player: grows a touch on hover (not while it's open) */
@media (min-width: 768px) and (hover: hover) {
    #player-card.docked:not(.peek) { transform-origin: 29px 50%; }
    #player-card.docked:not(.peek):hover { transform: scale(1.07) !important; }
    #player-card.docked { transition: left .62s var(--pe), bottom .62s var(--pe), width .62s var(--pe), height .62s var(--pe), border-radius .62s var(--pe), clip-path .46s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.32,.72,0,1), border-color .3s ease !important; }
    #player-card.docked.peek { transition: left .62s var(--pe), bottom .62s var(--pe), width .62s var(--pe), clip-path .55s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.32,.72,0,1), border-color .3s ease !important; }
}
/* menu: selected / hovered word opens up more (as the old bold did); the hidden sizer reserves that width so nothing shifts */
@media (hover: hover) and (pointer: fine) { #global-header nav .nav-link.nav-link:hover { letter-spacing: .05em; } }
#global-header nav .nav-link.nav-link.active { letter-spacing: .065em; }
#global-header nav .nav-link.nav-link::before { letter-spacing: .065em; font-weight: 700; }
/* desktop folded player opens on hover now, so no separate hover grow */
@media (min-width: 768px) and (hover: hover) { #player-card.docked:not(.peek):hover { transform: none !important; } }
/* desktop folded player: the live bars replace the play button (hover opens the player with its controls); phones keep the play button */
#player-card .pc-eq { display: none; }
@media (min-width: 768px) {
    #player-card .pc-eq { display: flex; left: 7px; bottom: 7px; z-index: 4; opacity: 0; transform: translateY(3px) scale(.9); }
    #player-card.docked:not(.peek) .pc-eq { opacity: 1; transform: none; transition: opacity .3s ease .25s, transform .4s cubic-bezier(.32,.72,0,1) .25s; }
    #player-card.docked.peek .pc-eq { transition: opacity .12s ease, transform .2s ease; }
    #player-card.docked #player-dock-btn { display: none !important; }
}
/* workshops intro line: shown in the desktop (cards-on-the-left) layout whenever there's room, compact on laptop heights */
@media (min-aspect-ratio: 13/10) and (min-height: 660px) { #workshops .ws-intro { display: block; font-size: clamp(.88rem, 1.05vw, 1.05rem); line-height: 1.5; margin-bottom: .95rem; max-width: 32rem; } }
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 13/10) and (min-height: 880px) { #workshops .ws-intro { display: block; font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; max-width: 28rem; } }
@media (min-aspect-ratio: 1/1) and (min-height: 861px) { #workshops .ws-intro { margin-bottom: 1.4rem; font-size: clamp(1rem, 1.2vw, 1.15rem); max-width: 34rem; } }
/* Hire title block: same living tilt + warm letter glow as the landing name */
.hire-lockup { --rx: 0deg; --ry: 0deg; --tx: 0px; --ty: 0px; }
.hire-lockup .hl-tilt { transform: perspective(900px) translate3d(var(--tx), var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry)); }
.hl-title .tl { --h: 0; color: color-mix(in srgb, #f4ecd8, #f0c95e calc(var(--h) * 100%));
    text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 24px rgba(0,0,0,.45), 0 0 calc(var(--h) * .22em) rgba(236,196,92, calc(var(--h) * .55)); transition: color .25s ease, text-shadow .25s ease; }
.hl-title .soul-hl { box-shadow: 0 0 calc(var(--bh, 0) * .22em) rgba(240,198,84, calc(var(--bh, 0) * .32)); }
/* desktop folded player bars: one small size at all times, they only fade */
@media (min-width: 768px) {
    #player-card .pc-eq, #player-card.docked:not(.peek) .pc-eq, #player-card.docked.peek .pc-eq { transform: none !important; height: 18px; padding: 4px 4px; gap: 1.6px; border-radius: 6px; left: 6px; bottom: 6px; }
    #player-card .pc-eq i { width: 2px; }
    #player-card.docked:not(.peek) .pc-eq { transition: opacity .3s ease .2s !important; }
    #player-card.docked.peek .pc-eq { transition: opacity .12s ease !important; }
}
/* touch screens: hire title block stays still */
@media not all and (hover: hover) and (pointer: fine) { .hire-lockup .hl-tilt { transform: none; } }
/* About pop-up: second sentence starts on its own line on desktop */
.br-desk { display: none; }
@media (min-width: 768px) { .br-desk { display: inline; } }
/* Hire title block is clickable (opens the booking request) */
.hl-click { cursor: pointer; border-radius: 1.25rem; outline: none; -webkit-tap-highlight-color: transparent; }
.hl-click:focus-visible { box-shadow: 0 0 0 2px rgba(212,175,55,.55); }

        /* ================= Round: Toronto Arts Council logo ================= */
        .oac-logo img { height: 36px; width: auto; }
        @media (min-width: 768px) { #contact .oac-logo img { height: 54px; } }
        @media (max-width: 767px) { #contact .oac-logo img { height: 40px; } }
        #contact .oac-logo { opacity: .6; }
        #contact .oac-logo:hover { opacity: .95; }

/* ================= Round: phone menu starts closer to the D ================= */
@media (max-width: 767px) {
    #global-header nav { gap: clamp(10px, 3.3vw, 16px) !important; margin-left: calc(clamp(12px, 3.3vw, 16px) + 2px) !important; padding-right: 0 !important; }
}
/* Toronto Arts Council logo a touch smaller */
@media (min-width: 768px) { #contact .oac-logo img { height: 46px; } }
@media (max-width: 767px) { #contact .oac-logo img { height: 34px; } }