/* Layout: one long evening up north. Night sky with the neon sign, down to the lake (shows),
   into the pines (listen), inside the mahogany dining room (songbook menu), back out under the
   stars for reservations, and a treeline footer. Every section is dark; light comes from neon. */
:root {
  color-scheme: dark;
  --sky: #12132F;        /* night sky */
  --sky-2: #1B1C45;
  --lake: #0C2034;       /* deep lake water */
  --lake-2: #12304A;
  --pine: #0E2620;       /* forest at night */
  --pine-2: #15362D;
  --wood: #1E120D;       /* mahogany dining room */
  --leather: #34161A;    /* red booth leather */
  --deep: #0A0B1F;       /* footer, darkest */

  --cream: #EDE3CF;      /* main text on dark (no pure white) */
  --muted: #ADA7C2;
  --rule: rgba(237, 227, 207, 0.14);

  --neon: #FF4F2E;       /* red-orange tube glow */
  --tube: #FFF1E8;       /* white-hot tube core */
  --blue: #4F9DFF;       /* lake neon */
  --green: #35D98A;      /* pine neon */
  --bulb: #FFD27A;       /* marquee bulbs */
  --gold: #D9A84E;       /* menu foil */
  --flame-deep: #C23400; /* buttons */
  --peach: #FFB48F;

  --display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --script: 'Mr Dafoe', 'Brush Script MT', cursive;
  --body: 'Karla', 'Helvetica Neue', Arial, sans-serif;

  --radius: 10px;
  --wrap: 1160px;
  --glow: 0 0 2px var(--tube), 0 0 6px var(--neon), 0 0 14px var(--neon), 0 0 30px var(--neon);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--sky); }
body { margin: 0; background: var(--sky); color: var(--cream); font-family: var(--body); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--cream); text-underline-offset: 3px; }
a:hover { color: var(--bulb); }
:focus-visible { outline: 3px solid var(--bulb); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }
@media (max-width: 480px) { .wrap { padding-inline: 18px; } }

h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--cream); text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1; }
p { margin: 0; }
.script { font-family: var(--script); line-height: 1.1; }
.label { font-size: 0.8rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); }

/* ---------- Neon type and icons ---------- */
.neon-script { font-family: var(--script); color: var(--tube); text-shadow: var(--glow); font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1; transform: rotate(-4deg); transform-origin: left center; }
.neon-caps {
  font-family: var(--body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tube);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); line-height: 1.25;
  text-shadow: 0 0 2px var(--tube), 0 0 8px rgba(255, 210, 122, 0.85), 0 0 22px rgba(255, 170, 90, 0.6);
}
.sign { display: flex; flex-direction: column; gap: 10px; }
.sign-sm .neon-caps { font-size: 1.05rem; }
.neon-icon { width: 46px; height: 46px; flex: 0 0 auto; fill: none; stroke: var(--tube); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 7px var(--neon)); }
.neon-green { filter: drop-shadow(0 0 2px var(--green)) drop-shadow(0 0 8px var(--green)); width: 40px; height: 60px; }
.neon-gold { filter: drop-shadow(0 0 2px var(--bulb)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.9)); width: 54px; height: 54px; }
.head-with-icon { display: flex; align-items: center; gap: 14px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  font: 700 1rem/1 var(--body); text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-flame { background: var(--flame-deep); color: #FFF6EF; box-shadow: 0 0 14px rgba(255, 79, 46, 0.45); }
.btn-flame:hover { background: #D63B00; color: #FFF6EF; box-shadow: 0 0 22px rgba(255, 79, 46, 0.7); }
.btn-ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px var(--cream); }
.btn-ghost:hover { color: var(--bulb); box-shadow: inset 0 0 0 2px var(--bulb), 0 0 16px rgba(255, 210, 122, 0.45); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } .btn:hover { transform: none; } }

.sample-note { background: var(--leather); color: var(--cream); font-size: 0.85rem; text-align: center; padding: 8px 16px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(18, 19, 47, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); }
.brand img { width: 48px; height: 50px; }
.brand span { font-family: var(--display); font-size: 1.1rem; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; font-size: 0.98rem; font-weight: 500; }
.nav-links a:not(.btn) { text-decoration: none; padding-block: 10px; }
@media (max-width: 700px) { .brand span { font-size: 1rem; } .nav-links { gap: 2px 16px; } .nav-links .btn { margin-left: auto; } }

/* ---------- Hero: rise up out of the pines to the night sky and the sign ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #06071A 0%, #0E1036 45%, #1A1E50 75%, #2B2F66 100%); }
.hero > .wrap { position: relative; z-index: 2; padding-top: 64px; padding-bottom: 470px; }
@media (max-width: 700px) { .hero > .wrap { padding-top: 40px; padding-bottom: 300px; } }

/* Sky */
.stars { position: absolute; left: 0; top: 0; width: 100%; height: 80%; z-index: 0; pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(255, 246, 220, 0.9)) drop-shadow(0 0 6px rgba(200, 210, 255, 0.45)); }
.stars circle { fill: #F7F1E1; }
@media (prefers-reduced-motion: no-preference) { .stars .tw { animation: twinkle 3.6s ease-in-out infinite alternate; } }
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 1; } }
.milky { position: absolute; left: -10%; top: 0; width: 120%; height: 70%; z-index: 0; pointer-events: none; transform: rotate(-24deg);
  background:
    radial-gradient(ellipse 46% 18% at 52% 46%, rgba(200, 185, 240, 0.16), transparent 70%),
    radial-gradient(ellipse 30% 10% at 62% 52%, rgba(255, 215, 170, 0.10), transparent 70%),
    radial-gradient(ellipse 22% 7% at 40% 42%, rgba(170, 180, 255, 0.10), transparent 70%); }
.moon { position: absolute; top: 90px; right: 10%; width: 64px; height: 64px; border-radius: 50%; z-index: 0;
  background: #F1EBD6; box-shadow: inset -14px -5px 0 0 #D6CDB3, 0 0 18px 4px rgba(241, 235, 214, 0.55), 0 0 60px 18px rgba(241, 235, 214, 0.22), 0 0 160px 50px rgba(190, 200, 255, 0.12); }
@media (max-width: 700px) { .moon { width: 40px; height: 40px; top: 46px; right: 7%; } }
.sky-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 24% at 50% 17%, rgba(255, 90, 31, 0.40), transparent 70%),
    radial-gradient(ellipse 48% 20% at 50% 30%, rgba(79, 157, 255, 0.30), transparent 72%); }

/* Canada geese: a V crosses the sky now and then, flapping */
.geese-track { position: absolute; top: 110px; left: 0; z-index: 1; pointer-events: none; transform: translate(58vw, 10px); }
.geese { width: 240px; height: 160px; overflow: visible; }
.goose path { fill: #04050F; }
.goose .g-wing-far { fill: #0B0D24; }
@media (prefers-reduced-motion: no-preference) {
  .geese-track { animation: migrate 40s linear 3.6s infinite both; }
  .goose .bob { animation: bob 2.2s ease-in-out infinite alternate; }
  .goose .g-wing, .goose .g-wing-far { transform-box: fill-box; transform-origin: 50% 100%; animation: flap 0.55s ease-in-out infinite alternate; }
  .goose .g-wing-far { animation-delay: -0.05s; }
}
@keyframes migrate { 0% { transform: translate(-300px, 60px); } 42% { transform: translate(calc(100vw + 60px), -50px); } 100% { transform: translate(calc(100vw + 60px), -50px); } }
@keyframes bob { from { transform: translateY(-2px); } to { transform: translateY(3px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-0.7); } }
@media (max-width: 700px) { .geese { width: 160px; height: 107px; } .geese-track { top: 70px; } }

/* The sign */
.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.hero-visual { width: 100%; max-width: 560px; }
.neon-frame { display: grid; place-items: center; }
.neon-frame.has-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 3px var(--tube), 0 0 18px var(--neon), 0 0 50px rgba(255, 79, 46, 0.5); }
.hero-logo { width: 100%; max-width: 560px; filter: drop-shadow(0 0 10px rgba(255, 90, 31, 0.55)) drop-shadow(0 0 34px rgba(255, 90, 31, 0.35)) drop-shadow(0 0 60px rgba(79, 157, 255, 0.35)); }
@keyframes power-on { 0% { opacity: 0.2; } 12% { opacity: 1; } 18% { opacity: 0.35; } 26% { opacity: 1; } 34% { opacity: 0.6; } 46%, 100% { opacity: 1; } }
@keyframes hum { 0%, 94%, 100% { opacity: 1; } 95% { opacity: 0.8; } 96% { opacity: 1; } }
.hero-tagline { margin-top: 10px; max-width: 26em; }
.lead { font-size: 1.15rem; max-width: 36em; color: var(--cream); opacity: 0.92; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.arrow-sign { width: 100%; max-width: 620px; height: auto; overflow: visible; }
.arrow-body { fill: #0C0D26; }
.arrow-tube { fill: none; stroke: var(--tube); stroke-width: 3.5; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 9px var(--neon)) drop-shadow(0 0 18px var(--neon)); }
.inner-tube { stroke-width: 1.6; opacity: 0.55; }
.sparkle { fill: var(--tube); filter: drop-shadow(0 0 3px var(--bulb)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.8)); }
.bulbs circle { fill: var(--bulb); filter: drop-shadow(0 0 4px var(--bulb)) drop-shadow(0 0 8px rgba(255, 170, 70, 0.8)); }
@media (prefers-reduced-motion: no-preference) { .bulbs .b { animation: chase 1.2s steps(1) infinite; } .bulbs .b2 { animation-delay: 0.4s; } .bulbs .b3 { animation-delay: 0.8s; } }
@keyframes chase { 0% { opacity: 1; } 33% { opacity: 0.22; } 100% { opacity: 0.22; } }
.arrow-text { font-family: var(--body); font-weight: 700; font-size: 30px; letter-spacing: 8px; fill: var(--tube); filter: drop-shadow(0 0 3px var(--neon)) drop-shadow(0 0 8px var(--neon)); }
.next-show { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; padding: 6px 4px; }
.next-label { font-family: var(--script); font-size: 2rem; line-height: 1; color: var(--tube); text-shadow: 0 0 4px var(--tube), 0 0 10px var(--neon), 0 0 22px var(--neon); }
.next-show strong { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--bulb); text-shadow: 0 0 8px rgba(255, 180, 80, 0.7); }

/* Shoreline: far hills, a forested headland on the left, tall pines framing the edges */
.forest { position: absolute; left: 0; right: 0; bottom: 220px; height: 0; z-index: 3; pointer-events: none; }
.layer { position: absolute; left: 0; right: 0; bottom: 0; }
.layer > svg { display: block; width: 100%; height: 260px; }
.layer .skirt { position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 140vh; }
.layer-back path { fill: #141A44; } .layer-back .skirt { background: #141A44; }
.layer-mid path { fill: #070B19; } .layer-mid .skirt { background: #070B19; }
.layer-sides { height: 0; } .layer-sides .skirt { background: #05080F; }
.layer .big-pines { position: absolute; bottom: -2px; width: 260px; height: 452px; }
.big-pines path { fill: #04070E; }
.big-left { left: -70px; } .big-right { right: -70px; }
@media (max-width: 900px) { .layer .big-pines { width: 170px; height: 296px; } .big-left { left: -60px; } .big-right { right: -60px; } }
@media (max-width: 700px) { .layer > svg { height: 150px; } .layer .big-pines { width: 120px; height: 209px; } }
.owl-eye { fill: #FFC24A; filter: drop-shadow(0 0 3px #FFB020); }
@media (prefers-reduced-motion: no-preference) { .owl-eye { transform-box: fill-box; transform-origin: center; animation: blink 7s infinite; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } 96% { transform: scaleY(1); } }

/* Fireflies along the treeline */
.fireflies { position: absolute; left: 0; right: 0; bottom: 220px; height: 250px; z-index: 4; pointer-events: none; }
.fly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #F1FF9E;
  box-shadow: 0 0 6px 2px rgba(214, 255, 110, 0.75), 0 0 16px 4px rgba(190, 255, 90, 0.35); opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .fly { animation: glow var(--b, 3s) ease-in-out var(--d, 0s) infinite alternate, drift var(--m, 9s) ease-in-out var(--d, 0s) infinite alternate; }
}
@keyframes glow { 0%, 40% { opacity: 0.05; } 70%, 100% { opacity: 1; } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(var(--x, 20px), var(--y, -24px)); } }

/* Lake: still water mirroring the shore, the moon and the sign */
.lake { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 5; overflow: hidden;
  background: linear-gradient(180deg, #2A3170 0%, #1E2658 18%, #131C40 55%, #0C2034 100%); }
.shore-reflect { position: absolute; left: 0; top: 0; width: 100%; height: 260px; opacity: 0.92; filter: blur(1.4px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 45%, transparent 95%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 45%, transparent 95%); }
.shore-reflect .r-far { fill: #121840; }
.shore-reflect .r-head { fill: #060A17; }
@media (max-width: 700px) { .lake { height: 150px; } .forest, .fireflies { bottom: 150px; } .shore-reflect { height: 150px; } }
/* A soft moonlit sheen drifting slowly over the water instead of lines */
.sheen { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 30% 22% at 70% 35%, rgba(200, 210, 255, 0.07), transparent 70%),
              radial-gradient(ellipse 22% 16% at 30% 60%, rgba(255, 200, 150, 0.05), transparent 70%); }
@media (prefers-reduced-motion: no-preference) { .sheen { animation: sheen 22s ease-in-out infinite alternate; } }
@keyframes sheen { from { transform: translateX(-4%); opacity: 0.7; } to { transform: translateX(4%); opacity: 1; } }
.sign-col { position: absolute; left: 50%; top: 0; width: 0; height: 100%; }
.moon-col { position: absolute; right: calc(10% + 32px); top: 0; width: 0; height: 100%; }
@media (max-width: 700px) { .moon-col { right: calc(7% + 20px); } }
.refl, .mrefl { position: absolute; left: 0; height: 2px; border-radius: 2px; transform: translateX(-50%); }
.refl.c0 { background: #FF6A35; box-shadow: 0 0 8px rgba(255, 90, 31, 0.9); }
.refl.c1 { background: #5BA6FF; box-shadow: 0 0 8px rgba(79, 157, 255, 0.9); }
.refl.c2 { background: #FFC062; box-shadow: 0 0 8px rgba(255, 190, 90, 0.8); }
.mrefl { background: #EFE8D2; box-shadow: 0 0 6px rgba(241, 235, 214, 0.7); }
@media (prefers-reduced-motion: no-preference) { .refl, .mrefl { animation: shimmer 2.8s ease-in-out infinite alternate; } }
@keyframes shimmer { 0% { transform: translateX(-54%) scaleX(0.82); } 100% { transform: translateX(-46%) scaleX(1.12); } }

/* Fisherman in a rowboat with a lantern */
.boat { position: absolute; left: 13%; bottom: 14px; width: 250px; height: 150px; z-index: 4; }
.boat svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.hull path { fill: #02040A; }
.boat-reflect path { fill: rgba(2, 4, 10, 0.45); }
.rod { fill: none; stroke: #02040A; stroke-width: 2; stroke-linecap: round; }
.line { fill: none; stroke: rgba(236, 229, 207, 0.28); stroke-width: 0.8; }
.oar { fill: none; stroke: #02040A; stroke-width: 3.5; stroke-linecap: round; }
.lantern-frame { fill: none; stroke: #02040A; stroke-width: 1.6; }
.lantern-cap { fill: #02040A; }
.lantern-glass { fill: #FFD27A; filter: drop-shadow(0 0 3px #FFB347) drop-shadow(0 0 8px #FF9A2E); }
.lantern-glow { position: absolute; left: -66px; top: -18px; width: 220px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 190, 100, 0.42), rgba(255, 150, 60, 0.14) 38%, transparent 68%); }
.lantern-refl { position: absolute; left: 40px; top: 104px; width: 0; }
.lantern-refl span { position: absolute; left: 0; height: 2px; border-radius: 2px; transform: translateX(-50%); background: #FFC874; box-shadow: 0 0 6px rgba(255, 190, 100, 0.9); }
.lantern-refl span:nth-child(1) { top: 0; width: 22px; } .lantern-refl span:nth-child(2) { top: 8px; width: 34px; opacity: 0.8; }
.lantern-refl span:nth-child(3) { top: 17px; width: 18px; opacity: 0.6; } .lantern-refl span:nth-child(4) { top: 27px; width: 28px; opacity: 0.4; }
.lantern-refl span:nth-child(5) { top: 38px; width: 12px; opacity: 0.25; }
@media (prefers-reduced-motion: no-preference) {
  .lantern-glass, .lantern-glow { animation: lamp 3.4s ease-in-out infinite; }
  .lantern-refl span { animation: shimmer 2.2s ease-in-out infinite alternate; }
  .boat svg { animation: rock 5s ease-in-out infinite alternate; }
}
@keyframes lamp { 0%, 100% { opacity: 1; } 40% { opacity: 0.86; } 55% { opacity: 0.97; } 70% { opacity: 0.82; } }
@keyframes rock { from { transform: rotate(-0.8deg) translateY(0); } to { transform: rotate(0.8deg) translateY(1.5px); } }
@media (max-width: 700px) { .boat { left: 4%; bottom: 6px; width: 160px; height: 96px; } .lantern-glow { left: -40px; top: -12px; width: 140px; height: 120px; } .lantern-refl { left: 26px; top: 66px; } }

/* Slow rings spreading out from the boat */
.boat-ripples { position: absolute; left: 50%; top: 64%; width: 0; height: 0; }
.boat-ripples span { position: absolute; left: 0; top: 0; width: 300px; height: 34px; margin: -17px 0 0 -150px; border-radius: 50%;
  border: 2.5px solid rgba(236, 229, 207, 0.32); box-shadow: 0 0 6px rgba(236, 229, 207, 0.18), inset 0 0 6px rgba(236, 229, 207, 0.12); opacity: 0; transform: scale(0.75); }
@media (prefers-reduced-motion: no-preference) {
  .boat-ripples span { animation: boat-ripple 13s ease-out infinite; }
  .boat-ripples span:nth-child(2) { animation-delay: 4.3s; }
  .boat-ripples span:nth-child(3) { animation-delay: 8.6s; }
}
@media (prefers-reduced-motion: reduce) { .boat-ripples span:nth-child(1) { opacity: 0.6; transform: scale(0.9); } }
@keyframes boat-ripple { 0% { opacity: 0; transform: scale(0.7); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.55); } }
@media (max-width: 700px) { .boat-ripples span { width: 190px; height: 22px; margin: -11px 0 0 -95px; } }

/* The rise: on load, the forest starts covering the screen and sinks away as we climb into the sky */
@media (prefers-reduced-motion: no-preference) {
  .layer-sides { animation: rise 2.6s cubic-bezier(0.6, 0, 0.2, 1) 0.3s both; --lift: calc(100vh * 1.0 - var(--y0, 1500px)); }
  .layer-mid { animation: rise 2.6s cubic-bezier(0.6, 0, 0.2, 1) 0.3s both; --lift: calc(100vh * 0.7 - var(--y0, 1500px)); }
  .layer-back { animation: rise 2.6s cubic-bezier(0.6, 0, 0.2, 1) 0.3s both; --lift: calc(100vh * 0.42 - var(--y0, 1500px)); }
  .fireflies { animation: rise 2.6s cubic-bezier(0.6, 0, 0.2, 1) 0.3s both; --lift: calc(100vh * 0.8 - var(--y0, 1500px)); }
  .hero-logo, .sky-glow { animation: power-on 1.4s ease-out 2.7s both, hum 9s 5s infinite; }
  .hero .arrow-sign { animation: power-on 1.2s ease-out 3.1s both; }
}
@keyframes rise { from { transform: translateY(var(--lift)); } to { transform: translateY(0); } }

/* Footer treeline */
.treeline { display: block; width: 100%; }
.treeline-foot { height: 130px; margin-bottom: -1px; }
.treeline-foot .trees-front { fill: var(--deep); }

/* Fisherman v2: outboard boat that rocks, idle sway, rod twitch, drifting wake lines */
.boat { width: 260px; }
.boat-ripples { display: none; }
.boat .hull path, .boat .fisher path { fill: #02040A; }
.boat .gunwale { fill: none; stroke: rgba(150, 170, 220, 0.18); stroke-width: 1; }
.boat .reel { fill: #02040A; }
.boat .boat-reflect path { fill: rgba(2, 4, 10, 0.38); }
.boat .boat-reflect { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.boat .wake path { fill: none; stroke: rgba(170, 195, 245, 0.32); stroke-width: 1.2; stroke-linecap: round; }
.boat .rig, .boat .fisher, .boat .rodg, .boat .wake path { transform-box: view-box; }
.boat .rig { transform-origin: 130px 100px; }
.boat .fisher { transform-origin: 112px 84px; }
.boat .rodg { transform-origin: 138px 72px; }
@media (prefers-reduced-motion: no-preference) {
  .boat svg { animation: none; }
  .boat .rig { animation: boat-rock 4.6s ease-in-out infinite alternate; }
  .boat .fisher { animation: fisher-idle 6.5s ease-in-out infinite; }
  .boat .rodg { animation: rod-twitch 8s ease-in-out infinite; }
  .boat .wake path { animation: wake-drift 3.2s ease-in-out infinite alternate; }
  .boat .wake path:nth-child(3n) { animation-duration: 4.4s; } .boat .wake path:nth-child(2n) { animation-duration: 2.7s; }
}
@keyframes boat-rock { from { transform: rotate(-1.4deg) translateY(-0.6px); } to { transform: rotate(1.3deg) translateY(1.4px); } }
@keyframes fisher-idle { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-1.6deg); } 60% { transform: rotate(0.6deg); } }
@keyframes rod-twitch { 0%, 58%, 100% { transform: rotate(0deg); } 63% { transform: rotate(-3.5deg); } 67% { transform: rotate(1.2deg); } 71% { transform: rotate(-2deg); } 78% { transform: rotate(0.4deg); } 86% { transform: rotate(0deg); } }
@keyframes wake-drift { from { transform: translateX(-5px); opacity: 0.45; } to { transform: translateX(5px); opacity: 1; } }
@media (max-width: 700px) { .boat { width: 166px; } }

/* Fishing line always runs into the water: clipped at the surface, with a small entry ring */
.boat .line-entry { fill: none; stroke: rgba(200, 220, 255, 0.4); stroke-width: 0.8; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .boat .line-entry { animation: line-entry 8s ease-in-out infinite; } }
@keyframes line-entry { 0%, 58%, 100% { transform: scale(1); opacity: .6; } 64% { transform: scale(1.8); opacity: 1; } 80% { transform: scale(1.2); opacity: .7; } }

/* Owl: click to send it flying off into the distance; it returns 15s later */
.big-right { overflow: visible; }
.owl { pointer-events: auto; cursor: pointer; outline: none; }
.owl:focus-visible .owl-hit { stroke: var(--bulb); stroke-width: 2; }
.owl .owl-fly { opacity: 0; transform-box: view-box; transform-origin: 174px 146px; }
.owl .wing { transform-box: fill-box; }
.owl .wing-l { transform-origin: 100% 60%; } .owl .wing-r { transform-origin: 0% 60%; }
.owl.is-leaving .owl-perch, .owl.is-gone .owl-perch, .owl.is-returning .owl-perch { opacity: 0; }
.owl.is-gone { pointer-events: none; }
.owl.is-leaving .owl-fly { animation: owl-away 3.2s cubic-bezier(.45,.1,.6,1) forwards; }
.owl.is-returning .owl-fly { animation: owl-back 3.4s cubic-bezier(.25,.6,.35,1) forwards; }
.owl.is-leaving .wing, .owl.is-returning .wing { animation: owl-flap .32s ease-in-out infinite alternate; }
@keyframes owl-away { 0% { opacity: 1; transform: translate(0,0) scale(1); } 15% { transform: translate(-30px,-40px) scale(1); } 100% { opacity: 0; transform: translate(-760px,-300px) scale(.08); } }
@keyframes owl-back { 0% { opacity: 1; transform: translate(320px,-200px) scale(1.7); } 85% { opacity: 1; transform: translate(6px,-8px) scale(1.04); } 100% { opacity: 1; transform: translate(0,0) scale(1); } }
@keyframes owl-flap { from { transform: scaleY(1) rotate(0deg); } to { transform: scaleY(-.55) rotate(0deg); } }

/* Click the boat: the fisherman tumbles in, splash, rod clatters into the boat, heavy rocking, then he climbs back in */
.boat { pointer-events: auto; cursor: pointer; outline: none; }
.boat:focus-visible { outline: 2px solid var(--bulb); outline-offset: 6px; border-radius: 8px; }
.boat .fisher-dunk, .boat .rod-dunk, .boat .splash * { transform-box: view-box; }
.boat .fisher-dunk { transform-origin: 112px 96px; }
.boat .rod-dunk { transform-origin: 136px 74px; }
.boat .splash { pointer-events: none; }
.boat .spl-ring { fill: none; stroke: rgba(210, 230, 255, 0.7); stroke-width: 1.2; opacity: 0; transform-origin: 122px 101px; }
.boat .spl-crown { fill: rgba(200, 225, 255, 0.55); opacity: 0; transform-origin: 122px 101px; }
.boat .spl-drops circle { fill: rgba(215, 235, 255, 0.85); opacity: 0; }
.boat.is-dunk .fisher-dunk { animation: dunk-fisher 5.6s ease-in-out forwards; }
.boat.is-dunk .rod-dunk { animation: dunk-rod 5.6s ease-in-out forwards; }
.boat.is-dunk .line-wrap, .boat.is-dunk .line-entry { animation: dunk-line 5.6s linear forwards; }
.boat.is-dunk .rig { animation: dunk-rock 3.4s cubic-bezier(.2,.6,.3,1) .45s both; }
.boat.is-dunk .fisher { animation: none; }
.boat.is-dunk .spl-ring.r1 { animation: spl-ring 1.4s ease-out .62s forwards; }
.boat.is-dunk .spl-ring.r2 { animation: spl-ring 1.8s ease-out .85s forwards; }
.boat.is-dunk .spl-crown { animation: spl-crown .7s ease-out .6s forwards; }
.boat.is-dunk .spl-drops circle { animation: spl-drop .9s cubic-bezier(.3,.7,.6,1) forwards; animation-delay: .62s; }
@keyframes dunk-fisher {
  0% { transform: none; }
  6% { transform: translate(2px,-10px) rotate(-14deg); }
  12% { transform: translate(-14px,-6px) rotate(-62deg); }
  18% { transform: translate(-22px,46px) rotate(-100deg); }
  60% { transform: translate(-22px,70px) rotate(-100deg); }
  68% { transform: translate(-16px,10px) rotate(-30deg); }
  76% { transform: translate(-4px,-6px) rotate(8deg); }
  82% { transform: translate(0,2px) rotate(-3deg); }
  88%, 100% { transform: none; } }
@keyframes dunk-rod {
  0%, 6% { transform: none; }
  14% { transform: rotate(40deg); }
  18% { transform: rotate(28deg); }
  22% { transform: rotate(36deg); }
  25%, 76% { transform: rotate(33deg); }
  86%, 100% { transform: none; } }
@keyframes dunk-line { 0%, 5% { opacity: 1; } 8%, 86% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes dunk-rock { 0% { transform: rotate(0); } 10% { transform: rotate(-6deg) translateY(2px); } 24% { transform: rotate(4.5deg) translateY(-1px); } 40% { transform: rotate(-3deg) translateY(1px); } 56% { transform: rotate(2deg); } 72% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }
@keyframes spl-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes spl-crown { 0% { opacity: .9; transform: scaleY(.2); } 40% { opacity: .9; transform: scaleY(1.15); } 100% { opacity: 0; transform: scaleY(.3) scaleX(1.3); } }
@keyframes spl-drop { 0% { opacity: 1; transform: translate(0,0); } 55% { opacity: 1; transform: translate(calc(var(--dx) * .7), var(--dy)); } 100% { opacity: 0; transform: translate(var(--dx), 6px); } }
@media (prefers-reduced-motion: reduce) { .boat.is-dunk * { animation: none !important; } }

/* Owl v2: proper silhouette with ear tufts, facial discs, folded wing lines and talons */
.owl .owl-perch path, .owl .owl-fly path { fill: #04070E; }
.owl .owl-line { fill: none !important; stroke: rgba(70, 85, 130, 0.45); stroke-width: 1; }
.owl .owl-disc { fill: none; stroke: rgba(90, 105, 150, 0.4); stroke-width: 1; }
.owl .owl-beak { fill: #1A2036 !important; }
.owl .owl-talon { fill: none !important; stroke: #04070E; stroke-width: 1.6; stroke-linecap: round; }
.owl .wing-l { transform-origin: 100% 40%; } .owl .wing-r { transform-origin: 0% 40%; }
@keyframes owl-flap { from { transform: scaleY(1); } to { transform: scaleY(-.35) translateY(-4px); } }

/* Owl sits on a branch against the sky, slightly lighter than the trees so it reads */
.owl .owl-perch path, .owl .owl-fly path { fill: #0C1124; }
.owl .owl-perch > path:first-child { stroke: rgba(120, 140, 200, 0.28); stroke-width: 1; }
.owl .owl-talon { stroke: #0C1124; }
.owl .owl-fly path { stroke: rgba(120, 140, 200, 0.25); stroke-width: 0.8; }

/* Dunk v2: he tips back, legs and boots swing up over the far side, then he drops head-first behind the hull */
@keyframes dunk-fisher {
  0% { transform: none; }
  5% { transform: translate(0,-6px) rotate(-12deg); }
  11% { transform: translate(-4px,-10px) rotate(-55deg); }
  17% { transform: translate(-8px,-12px) rotate(-120deg); }
  23% { transform: translate(-12px,10px) rotate(-160deg); }
  29% { transform: translate(-14px,70px) rotate(-175deg); }
  60% { transform: translate(-14px,80px) rotate(-175deg); }
  67% { transform: translate(-10px,24px) rotate(-60deg); }
  74% { transform: translate(-4px,-4px) rotate(-10deg); }
  80% { transform: translate(0,2px) rotate(3deg); }
  86%, 100% { transform: none; } }

/* Owl v3: lifts off and flies straight off-screen; on return it quietly fades back onto its branch */
.owl .owl-perch { transition: opacity 1.4s ease; }
.owl.is-leaving .owl-perch { transition: opacity .18s ease; }
.owl.is-leaving .owl-fly { animation: owl-off 2.4s cubic-bezier(.5,.05,.7,.6) forwards; }
.owl.is-returning .owl-fly { animation: none; opacity: 0; }
.owl.is-returning .owl-perch { opacity: 1; }
.owl.is-leaving .wing { animation: owl-flap .38s ease-in-out infinite alternate; }
@keyframes owl-off { 0% { opacity: 0; transform: translate(0,0) scale(1); } 8% { opacity: 1; transform: translate(4px,-10px) scale(1); } 100% { opacity: 1; transform: translate(520px,-420px) scale(1.25); } }
@keyframes owl-flap { from { transform: scaleY(1); } to { transform: scaleY(.25); } }

/* Owl back to the original silhouette: click and it blinks */
.owl:focus-visible .owl-eye { filter: drop-shadow(0 0 6px #FFD27A); }
.owl.is-blink .owl-eye { animation: owl-blink-now .35s ease-in-out 2; }
@keyframes owl-blink-now { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.08); } }

/* Dunk v3: a quick tumble so the fall reads as one fast motion */
@keyframes dunk-fisher {
  0% { transform: none; }
  3% { transform: translate(0,-6px) rotate(-25deg); }
  6% { transform: translate(-6px,-10px) rotate(-110deg); }
  9% { transform: translate(-12px,20px) rotate(-165deg); }
  12% { transform: translate(-14px,80px) rotate(-175deg); }
  60% { transform: translate(-14px,80px) rotate(-175deg); }
  67% { transform: translate(-10px,24px) rotate(-60deg); }
  74% { transform: translate(-4px,-4px) rotate(-10deg); }
  80% { transform: translate(0,2px) rotate(3deg); }
  86%, 100% { transform: none; } }
.boat.is-dunk .fisher-dunk { animation-timing-function: cubic-bezier(.5,0,.8,.6); }
.boat.is-dunk .rig { animation-delay: .3s; }
.boat.is-dunk .spl-ring.r1 { animation-delay: .5s; }
.boat.is-dunk .spl-ring.r2 { animation-delay: .7s; }
.boat.is-dunk .spl-crown { animation-delay: .45s; }
.boat.is-dunk .spl-drops circle { animation-delay: .48s; }

/* Intro v2: descend from high in the night sky down onto the lake.
   Everything starts lower on screen and glides up into place; nearer layers travel farther (parallax). */
@media (prefers-reduced-motion: no-preference) {
  .stars { animation: descend 3s cubic-bezier(0.55, 0, 0.15, 1) 0.2s both; --drop: 12vh; }
  .moon { animation: descend 3s cubic-bezier(0.55, 0, 0.15, 1) 0.2s both; --drop: 18vh; }
  .hero-center { animation: descend-fade 2.8s cubic-bezier(0.55, 0, 0.15, 1) 0.3s both; --drop: 26vh; }
  .layer-back { animation: descend 3s cubic-bezier(0.55, 0, 0.15, 1) 0.2s both; --drop: 55vh; }
  .layer-mid { animation: descend 3s cubic-bezier(0.55, 0, 0.15, 1) 0.2s both; --drop: 75vh; }
  .layer-sides { animation: descend 3s cubic-bezier(0.55, 0, 0.15, 1) 0.2s both; --drop: 95vh; }
  .fireflies { animation: descend 3s cubic-bezier(0.55, 0, 0.15, 1) 0.2s both; --drop: 85vh; }
  .lake { animation: descend 3s cubic-bezier(0.55, 0, 0.15, 1) 0.2s both; --drop: 100vh; }
  .hero-logo, .sky-glow { animation: power-on 1.4s ease-out 2.4s both, hum 9s 5s infinite; }
  .hero .arrow-sign { animation: power-on 1.2s ease-out 2.8s both; }
}
@keyframes descend { from { transform: translateY(var(--drop)); } to { transform: translateY(0); } }
@keyframes descend-fade { from { transform: translateY(var(--drop)); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }

/* Click the owl: its eyes flare red, then cool back to amber */
.owl .owl-eye { transition: fill .25s ease, filter .25s ease; }
.owl.is-red .owl-eye { fill: #FF2A1A; filter: drop-shadow(0 0 3px #FF2A1A) drop-shadow(0 0 8px #FF4F2E); transition: fill .15s ease, filter .15s ease; }
.owl.is-cooling .owl-eye { transition: fill 1.6s ease, filter 1.6s ease; }

/* Moon craters (night only; by day this element is the sun and has its own look) */
.moon { background:
    radial-gradient(circle at 34% 30%, rgba(170, 160, 132, 0.55) 0 6%, rgba(200, 190, 162, 0.35) 8%, transparent 10%),
    radial-gradient(circle at 58% 62%, rgba(165, 155, 128, 0.5) 0 9%, rgba(200, 190, 162, 0.3) 12%, transparent 14.5%),
    radial-gradient(circle at 28% 66%, rgba(175, 165, 138, 0.45) 0 4.5%, transparent 7%),
    radial-gradient(circle at 63% 28%, rgba(175, 165, 138, 0.4) 0 3.5%, transparent 5.5%),
    radial-gradient(circle at 46% 46%, rgba(185, 175, 148, 0.3) 0 2.5%, transparent 4%),
    radial-gradient(circle at 42% 80%, rgba(175, 165, 138, 0.35) 0 3%, transparent 5%),
    radial-gradient(ellipse 40% 30% at 45% 45%, rgba(190, 180, 150, 0.25), transparent 70%),
    #F1EBD6; }

/* ---------- Sections ---------- */
.section { padding-block: 88px; position: relative; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; margin-bottom: 28px; }
.section-script { font-size: 2rem; color: var(--tube); text-shadow: 0 0 6px var(--neon), 0 0 16px var(--neon); }

.heard { background: var(--lake); border-top: 1px solid var(--rule); padding-block: 22px; }
.heard-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; }
.heard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 36px; font-family: var(--display); font-size: 1.05rem; }

/* Shows: on the lake */
.lakeside { background: linear-gradient(180deg, var(--lake) 0%, #0D1B30 100%); padding-top: 64px; }
.shows { list-style: none; margin: 0; padding: 0; position: relative; }
.shows::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tube); box-shadow: 0 0 6px var(--blue), 0 0 16px var(--blue); }
.show { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-block: 22px; border-bottom: 1px solid var(--rule); }
.show-date { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 9px 0; border-radius: 8px; line-height: 1; gap: 4px;
  background: #091626; color: var(--cream); box-shadow: 0 0 0 1.5px rgba(79, 157, 255, 0.7), 0 0 12px rgba(79, 157, 255, 0.35); }
.show-date .mon { font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.show-date .day { font-family: var(--display); font-size: 1.9rem; }
.show-date .dow { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.show.is-next .show-date { color: var(--tube); box-shadow: 0 0 0 2px var(--tube), 0 0 12px var(--neon), 0 0 28px rgba(255, 79, 46, 0.6); }
.show.is-next .show-date .day { text-shadow: 0 0 8px var(--neon); }
.show-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.show-title { font-family: var(--display); font-size: 1.3rem; color: var(--cream); line-height: 1.25; }
.show-meta, .show-private, .empty { color: var(--muted); font-size: 1rem; }
.show-note { font-family: var(--script); color: var(--peach); font-size: 1.5rem; line-height: 1.2; }
.show-link { font-weight: 700; font-size: 1rem; color: var(--bulb); }
.empty { padding-top: 18px; }

/* Listen: in the pines */
.pines { background: radial-gradient(ellipse 60% 80% at 20% 40%, rgba(53, 217, 138, 0.07), transparent 70%), var(--pine); border-top: 1px solid rgba(53, 217, 138, 0.18); }
.sound-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 56px; }
.sound-media { flex: 1 1 520px; min-width: 0; position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius); overflow: hidden;
  background: #071510; box-shadow: 0 0 0 2px rgba(53, 217, 138, 0.55), 0 0 22px rgba(53, 217, 138, 0.25), 0 24px 40px rgba(0, 0, 0, 0.45); }
.sound-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-lite { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-decoration: none; color: var(--cream);
  background-size: cover; background-position: center; }
.video-lite::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 21, 16, 0.2), rgba(7, 21, 16, 0.65)); }
.video-play { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(12, 13, 38, 0.6);
  box-shadow: 0 0 0 3px var(--tube), 0 0 14px var(--neon), 0 0 34px rgba(255, 79, 46, 0.6); transition: transform 0.15s ease; }
.video-play svg { width: 34px; height: 34px; fill: var(--tube); filter: drop-shadow(0 0 6px var(--neon)); margin-left: 4px; }
.video-lite:hover .video-play { transform: scale(1.06); }
.video-cap { position: relative; font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.sound-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.sound-copy > p { max-width: 34em; }
.facts { margin: 4px 0 0; border-top: 1px solid var(--rule); }
.facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 12px; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.facts dt { font-weight: 700; color: var(--green); }
.facts dd { margin: 0; text-align: right; }

/* Songbook: the supper club menu in the mahogany dining room */
.dining { background:
  repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 120px),
  radial-gradient(ellipse 50% 60% at 50% 30%, rgba(255, 190, 110, 0.10), transparent 70%), var(--wood);
  border-top: 1px solid rgba(217, 168, 78, 0.25); }
.menu-card { max-width: 820px; margin: 0 auto; padding: 44px clamp(22px, 5vw, 56px); border-radius: 14px; background: var(--leather);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 7px var(--leather), inset 0 0 0 8px rgba(217, 168, 78, 0.55), 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 170, 80, 0.08); }
.menu-head { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; margin-bottom: 26px; }
.menu-head > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.menu-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.menu-card h2 { color: var(--gold); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.menu-script { font-size: 1.8rem; color: var(--peach); }
.tunes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.tune { display: flex; flex-direction: column; gap: 2px; }
.tune-line { display: flex; align-items: baseline; gap: 10px; }
.tune-title { font-family: var(--display); color: var(--cream); font-size: 1.2rem; line-height: 1.3; }
.tune-dots { flex: 1 1 auto; min-width: 24px; border-bottom: 2px dotted rgba(217, 168, 78, 0.55); transform: translateY(-5px); }
.tune-year { font-family: var(--display); color: var(--gold); font-size: 1.05rem; }
.tune-story { color: var(--muted); font-size: 0.98rem; font-style: italic; }
.menu-foot { margin-top: 28px; text-align: center; font-family: var(--script); font-size: 1.6rem; color: var(--gold); }
.band-wrap { margin-top: 72px; }
.members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.member { display: flex; flex-direction: column; gap: 8px; }
.member-photo { aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius); background: var(--leather); overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(217, 168, 78, 0.5); }
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-initials { font-family: var(--script); font-size: 4rem; color: var(--tube); text-shadow: var(--glow); }
.member-name { font-family: var(--display); font-size: 1.3rem; }
.member-role { font-weight: 700; color: var(--gold); font-size: 0.98rem; }
.member-bio { font-size: 1rem; color: var(--muted); }

/* Reservations: back out under the stars */
.night-sky { background: radial-gradient(ellipse 50% 60% at 18% 20%, rgba(255, 79, 46, 0.12), transparent 70%), var(--sky-2); border-top: 1px solid var(--rule); }
.book-grid { display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: flex-start; }
.book-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.checks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checks li { position: relative; padding-left: 34px; font-size: 1.02rem; line-height: 1.5; }
.checks li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--bulb); box-shadow: 0 0 6px var(--bulb), 0 0 12px rgba(255, 180, 80, 0.7); }
.checks strong { color: var(--bulb); }
.contact-line { font-size: 1rem; }
.contact-line a { font-weight: 700; }
.book-form { flex: 1 1 440px; min-width: 0; position: relative; background: var(--leather); border-radius: 14px; padding: 30px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px;
  box-shadow: inset 0 0 0 1px rgba(217, 168, 78, 0.45), 0 24px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 79, 46, 0.12); }
.form-tab { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px dashed rgba(217, 168, 78, 0.45); }
.form-tab .neon-icon { width: 36px; height: 36px; stroke-width: 3; }
.form-tab span { font-family: var(--script); font-size: 2rem; line-height: 1; color: var(--tube); text-shadow: 0 0 6px var(--neon); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 0.88rem; font-weight: 700; color: var(--gold); letter-spacing: 0.02em; }
.field input, .field select, .field textarea { font: 400 1rem/1.4 var(--body); color: var(--cream); background: #1F0C0F; border: 1px solid rgba(237, 227, 207, 0.25); border-radius: 8px; padding: 12px 14px; width: 100%; }
.field input::placeholder, .field textarea::placeholder { color: rgba(237, 227, 207, 0.45); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bulb); box-shadow: 0 0 0 3px rgba(255, 210, 122, 0.25), 0 0 14px rgba(255, 210, 122, 0.25); }
.form-error { color: var(--peach); font-weight: 700; font-size: 0.95rem; }
.form-note { color: var(--muted); font-size: 0.88rem; }
.book-form .btn { justify-self: start; }

/* ---------- Footer: treeline at night ---------- */
.site-footer { background: var(--sky-2); }
.treeline-foot .trees-front { fill: var(--deep); }
.footer-inner { background: var(--deep); padding-block: 36px 30px; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.footer-brand { display: flex; align-items: center; gap: 22px; }
.footer-brand img { width: 120px; height: auto; }
.footer-neon { font-size: 2.6rem; transform: rotate(-3deg); margin-bottom: 6px; }
.footer-name { font-family: var(--display); font-size: 1.2rem; }
.footer-place { color: var(--muted); font-size: 0.95rem; }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.social a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px 16px 10px 12px; border-radius: 999px; font-weight: 700; font-size: 0.98rem;
  box-shadow: inset 0 0 0 1.5px rgba(237, 227, 207, 0.35); transition: box-shadow 0.15s ease, color 0.15s ease; }
.social a:hover { color: var(--tube); box-shadow: inset 0 0 0 2px var(--tube), 0 0 12px var(--neon), 0 0 26px rgba(255, 79, 46, 0.5); }
.social svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.footer-base { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.9rem; color: var(--muted); }

/* ---------- Upcoming shows as a Wisconsin pull-tab ticket ---------- */
.pulltab { --display: 'Ultra', 'Rockwell Extra Bold', 'Rockwell', Georgia, serif; --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.32%20%200%200%200%200%200.26%20%200%200%200%200%200.18%20%200%200%200%200.16%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"); --fiber: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27320%27%20height%3D%27320%27%3E%3Cfilter%20id%3D%27f%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.008%200.06%27%20numOctaves%3D%273%27%20seed%3D%277%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.42%20%200%200%200%200%200.34%20%200%200%200%200%200.22%20%200%200%200%200.12%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23f%29%27/%3E%3C/svg%3E"); --mottle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27400%27%20height%3D%27400%27%3E%3Cfilter%20id%3D%27m%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.006%27%20numOctaves%3D%272%27%20seed%3D%273%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.55%20%200%200%200%200%200.42%20%200%200%200%200%200.2%20%200%200%200%200.16%20-0.02%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23m%29%27/%3E%3C/svg%3E"); --grain-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.95%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200.11%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"); --tk-h: 720px; --ink: #141414; --stipple: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27s%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%271.35%27%20numOctaves%3D%271%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.16%20%200%200%200%200%200.11%20%200%200%200%200%200.06%20%201%200%200%200%200%27/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%270%200%200%200%200%200%200%200%200.55%200.85%27/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23s%29%27/%3E%3C/svg%3E"); --halftone: radial-gradient(rgba(20, 20, 20, 0.16) 0.9px, transparent 1.4px) 0 0 / 5px 5px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; max-width: 1060px; margin: 0 auto; }
@media (max-width: 880px) { .pulltab { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
.ticket { position: relative; height: var(--tk-h); color: var(--ink); border-radius: 3px; overflow: hidden;
  background: var(--grain), var(--fiber), #FBF8EF;
  box-shadow: inset 0 0 24px rgba(140, 105, 50, 0.12), 0 2px 3px rgba(0, 0, 0, 0.35), 0 12px 22px rgba(0, 0, 0, 0.3); }
.ticket::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: var(--stipple), var(--grain), var(--fiber), var(--mottle); mix-blend-mode: multiply; opacity: 0.9; }

/* Shared chunky lettering */
.chunk { font-family: var(--display); paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink); text-shadow: 3px 4px 0 var(--ink); letter-spacing: 0.5px; }

/* ===== Left: the key ===== */
.key { display: flex; flex-direction: column; }
.tk-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: #FFFFFF; border-bottom: 2.5px solid var(--ink);
  font: 800 0.62rem/1.2 var(--body); text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink); }
.tk-each { font-family: var(--display); font-size: 1.5rem; line-height: 1; display: flex; align-items: baseline; gap: 3px; }
.tk-each small { font: 800 0.62rem var(--body); text-transform: uppercase; }
.tk-fine { text-align: right; }
.tk-header { position: relative; padding: 14px 10px 12px; text-align: center; overflow: hidden;
  background: var(--halftone), radial-gradient(ellipse 70% 90% at 50% 40%, #FFE04A 0%, #FFB300 55%, #F07A00 100%); border-bottom: 2.5px solid var(--ink); }
.tk-burst { display: none; }
.tk-name { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 0.88; transform: rotate(-3deg); }
.tk-name .n1 { font-family: var(--display); font-size: clamp(2.6rem, 5.6vw, 3.5rem); color: #E0201B; paint-order: stroke fill; -webkit-text-stroke: 8px var(--ink); text-shadow: 4px 5px 0 var(--ink); }
.tk-name .n2 { font-family: var(--display); font-size: clamp(1.7rem, 3.8vw, 2.3rem); color: #3BD15A; paint-order: stroke fill; -webkit-text-stroke: 7px var(--ink); text-shadow: 3px 4px 0 var(--ink); margin-top: 2px; text-transform: uppercase; }
.tk-rules { padding: 6px 10px; text-align: center; background: var(--ink); color: #FFE04A; font: 900 0.7rem/1.2 var(--body); letter-spacing: 1.5px; text-transform: uppercase; }
.key-rows { list-style: none; margin: 0; padding: 4px 12px; flex: 1 1 auto; display: flex; flex-direction: column;
  background: var(--halftone), linear-gradient(180deg, #E0201B 0%, #F2451A 30%, #FF8A00 62%, #FFD23F 100%); }
.key-row { flex: 1 1 0; display: grid; grid-template-columns: auto minmax(26px, 1fr) auto; align-items: center; column-gap: 10px; }
.key-row + .key-row { border-top: 2px dashed rgba(20, 20, 20, 0.28); }
.syms, .under-reels { display: flex; gap: 2px; }
.reel { display: inline-grid; place-items: center; width: 44px; height: 44px; }
.reel svg { width: 44px; height: 44px; overflow: visible; filter: drop-shadow(1.5px 2px 0 rgba(20, 20, 20, 0.35)); }
.arrow { display: block; height: 22px; background: linear-gradient(180deg, #8ED8FF 0%, #3DB3F2 45%, #1E8FD8 100%); clip-path: polygon(0 28%, 70% 28%, 70% 0, 100% 50%, 70% 100%, 70% 72%, 0 72%); }
.arrow-wrap { display: block; padding: 2px 3px; filter: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink)); }
.key-prize { font-family: var(--display); font-size: 2.5rem; line-height: 1; color: var(--ink); text-align: right; min-width: 2.6em;
  paint-order: stroke fill; -webkit-text-stroke: 5px #FFFFFF; }
.key-prize sup { font-size: 0.5em; vertical-align: 0.75em; margin-right: 1px; }
.key-row.is-hit { animation: hit 1.6s ease-out; }
@keyframes hit { 0%, 60% { background: rgba(255, 255, 255, 0.75); outline: 4px solid var(--ink); outline-offset: -2px; } 100% { outline-color: transparent; } }
.tk-bar { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 10px; background: #FFFFFF; border-top: 2.5px solid var(--ink); }
.barcode { width: 180px; height: 30px;
  background: repeating-linear-gradient(90deg, #141414 0 2px, transparent 2px 3px, #141414 3px 4px, transparent 4px 7px, #141414 7px 10px, transparent 10px 11px, #141414 11px 12px, transparent 12px 15px, #141414 15px 16px, transparent 16px 18px); }
.tk-serial { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; letter-spacing: 2px; }

/* ===== Right: stack of 6-window show tickets ===== */
.stack-wrap { display: flex; flex-direction: column; gap: 16px; }
.stack { position: relative; height: var(--tk-h); }
.stack.has-more { margin-bottom: 18px; }
.show-ticket { position: absolute; inset: 0; display: flex; flex-direction: column;
  z-index: calc(10 - var(--depth, 0));
  transform: translate(calc(var(--depth, 0) * 8px), calc(var(--depth, 0) * 9px)) rotate(calc(var(--depth, 0) * 1.4deg));
  transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1), filter 0.35s ease; }
.show-ticket:not(.is-top) { filter: brightness(0.86) sepia(0.15); }
.show-ticket:not(.is-top) > * { visibility: hidden; }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 9px;
  background: var(--halftone), radial-gradient(ellipse 80% 120% at 30% 30%, #FF5A3C 0%, #E0201B 55%, #A9120E 100%); border-bottom: 2.5px solid var(--ink); }
.st-title { font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 1.9rem); line-height: 1; color: #FFE04A; paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink); text-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); }
.st-range { font: 900 0.72rem/1 var(--body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); background: #FFE04A; padding: 6px 8px; border: 2px solid var(--ink); border-radius: 3px; white-space: nowrap; }
.windows { list-style: none; margin: 0; padding: 12px 14px 10px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 9px; }
.win { position: relative; flex: 1 1 0; min-height: 0; border-radius: 6px; background: var(--grain), #FFFFFF; border: 2px solid var(--ink); }
.win::after { content: ""; position: absolute; inset: 3px; border-radius: 4px; border: 1.5px dashed rgba(20, 20, 20, 0.25); pointer-events: none; }
.under { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 28px; }
.under-reels .reel { width: 46px; height: 46px; } .under-reels .reel svg { width: 46px; height: 46px; }
.result { font-family: var(--display); font-size: 1.6rem; color: var(--ink); min-width: 2.4em; }
.win.is-win .result { color: #E0201B; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.dir-btn { margin-left: auto; position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 6px;
  font: 900 0.82rem/1 var(--body); letter-spacing: 0.5px; text-transform: uppercase; color: #FFFFFF; background: #1F7FD6; text-decoration: none; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.dir-btn:hover { background: #2B90EA; color: #FFFFFF; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.dir-note { margin-left: auto; font: 900 0.78rem/1 var(--body); color: #6F6B7E; text-transform: uppercase; letter-spacing: 1px; }

.tab { position: absolute; inset: -2px; z-index: 2; cursor: pointer; border: 2px solid var(--ink); border-radius: 6px; padding: 0 12px 0 10px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; color: #FFFFFF; text-align: left;
  background: radial-gradient(rgba(255, 255, 255, 0.07) 0.9px, transparent 1.4px) 0 0 / 5px 5px, var(--grain-dark), #262C5C; box-shadow: 0 2px 0 rgba(20, 20, 20, 0.45);
  transform-origin: 0 50%; transition: transform 0.25s ease; }
.tab::before, .tab::after { content: ""; position: absolute; left: 8px; right: 8px; height: 4px;
  background: radial-gradient(circle at 3px 50%, #FBF8EF 1.6px, transparent 2px) 0 0 / 7px 4px repeat-x; }
.tab::before { top: -1px; } .tab::after { bottom: -1px; }
.tab > span { transition: opacity 0.2s ease; }
.tab:hover { transform: translateX(-2px) scaleX(0.99); }
.tab:focus-visible { outline: 3px solid var(--bulb); outline-offset: 3px; }
.tab-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 78px; padding: 5px 8px; border-radius: 4px; line-height: 1;
  background: #FFE04A; color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.tab-dow { font: 900 0.68rem/1 var(--body); letter-spacing: 2px; text-transform: uppercase; }
.tab-md { font-family: var(--display); font-size: 1.35rem; margin-top: 3px; white-space: nowrap; }
.win.is-next .tab-date { background: #E0201B; color: #FFFFFF; }
.win.is-private .tab-date { background: #D5D1DF; }
.win.is-open .tab-date { background: #FFFFFF; }
.tab-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tab-venue { font-family: var(--display); font-size: 1.08rem; color: #FFFFFF; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-meta { font: 700 0.8rem/1.2 var(--body); color: #C9D0F0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-pull { font: 900 0.66rem/1 var(--body); letter-spacing: 3px; text-transform: uppercase; color: #FFE04A; writing-mode: vertical-rl; transform: rotate(180deg); }
.st-foot { display: flex; justify-content: space-between; align-items: center; padding: 7px 14px; background: #FFFFFF; border-top: 2.5px solid var(--ink);
  font: 900 0.66rem/1 var(--body); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.st-no { font-family: ui-monospace, Menlo, monospace; letter-spacing: 1.5px; }

/* Pulling a paper tab: it lifts from the free end, folds back on the left hinge and leaves a curl */
.win.is-pulling .tab { animation: peel 0.56s cubic-bezier(0.45, 0.05, 0.55, 1) forwards; }
.win.is-pulling .tab > span { opacity: 0.6; }
@keyframes peel {
  0% { transform: perspective(700px) rotateY(0deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
  22% { transform: perspective(700px) rotateY(-14deg) skewY(-1.2deg); box-shadow: 6px 4px 8px rgba(0, 0, 0, 0.35); }
  100% { transform: perspective(700px) rotateY(-96deg) skewY(-2deg); box-shadow: 14px 6px 14px rgba(0, 0, 0, 0.25); }
}
.win.is-pulling::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 4px; pointer-events: none;
  background: linear-gradient(90deg, rgba(40, 30, 10, 0.35), transparent 55%); animation: lift-shadow 0.56s ease-out forwards; }
@keyframes lift-shadow { from { opacity: 0; } 40% { opacity: 1; } to { opacity: 0.4; } }
.win.is-pulled .tab { visibility: hidden; transform: none; }
.curl { position: absolute; left: -12px; top: 3px; bottom: 3px; width: 26px; z-index: 3; pointer-events: none; opacity: 0;
  border-radius: 13px 4px 4px 13px / 50% 4px 4px 50%;
  background: var(--grain), linear-gradient(90deg, #A79E86 0%, #E9E2CC 30%, #F6F1E1 48%, #C8BFA6 78%, #8F8670 100%);
  box-shadow: inset -3px 0 0 #252A52, 3px 2px 4px rgba(0, 0, 0, 0.28); }
.curl::after { content: ""; position: absolute; left: 6px; right: 6px; top: -1px; bottom: -1px;
  background: radial-gradient(circle at 50% 3px, #EFE9D8 1.4px, transparent 1.8px) 0 0 / 100% 6px repeat-y; opacity: 0.0; }
.win.is-pulled .curl { opacity: 1; animation: curl-in 0.22s ease-out; }
@keyframes curl-in { from { transform: scaleX(1.6) translateX(6px); opacity: 0.6; } to { transform: none; opacity: 1; } }
/* torn perforation left behind along the hinge */
.win.is-pulled::before { content: ""; position: absolute; left: 14px; top: 4px; bottom: 4px; width: 4px; z-index: 1;
  background: radial-gradient(circle at 2px 3px, rgba(37, 42, 82, 0.55) 1.3px, transparent 1.7px) 0 0 / 4px 6px repeat-y; }
@media (prefers-reduced-motion: reduce) { .win.is-pulling .tab, .win.is-pulled .curl, .win.is-pulling::before { animation: none; } }
@media (prefers-reduced-motion: reduce) { .tab, .show-ticket { transition: none; } .key-row.is-hit { animation: none; background: #FFE45C; } }

/* Win celebration */
.win-badge { position: absolute; right: 120px; top: 50%; z-index: 4; display: flex; flex-direction: column; align-items: center; line-height: 1; pointer-events: none;
  padding: 6px 12px; border-radius: 3px; background: #FFD23F; border: 2.5px solid #1A1A1A; transform: translateY(-50%) rotate(-6deg);
  animation: badge 2.2s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
.win-badge b { font: 800 0.7rem/1 var(--body); letter-spacing: 2px; text-transform: uppercase; color: #121212; }
.win-badge span { font-family: var(--display); font-size: 1.6rem; color: #E0201B; }
@keyframes badge { 0% { transform: translateY(-50%) rotate(-6deg) scale(0); opacity: 0; } 18% { transform: translateY(-50%) rotate(-6deg) scale(1.25); opacity: 1; } 30% { transform: translateY(-50%) rotate(-6deg) scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-80%) rotate(-6deg) scale(0.9); opacity: 0; } }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 5; pointer-events: none; }
.burst i { position: absolute; left: 0; top: 0; width: 8px; height: 12px; margin: -6px 0 0 -4px; border-radius: 2px; background: var(--c);
  animation: pop 1.4s cubic-bezier(0.15, 0.7, 0.3, 1) forwards; }
.burst i.coin { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF1A8, #F2B705 60%, #B57F00); box-shadow: 0 0 0 1px #8A6100; }
@keyframes pop { 0% { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)) scale(1); opacity: 0; } }
.win.is-win { border-color: var(--ink); box-shadow: 0 0 0 3px #FFE04A, 0 0 0 5px var(--ink); }

/* Stack controls */
.stack-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack-btn { font: 800 0.92rem/1 var(--body); color: var(--cream); background: transparent; border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(237, 227, 207, 0.5); white-space: nowrap; }
.stack-btn:hover { color: var(--bulb); box-shadow: inset 0 0 0 2px var(--bulb), 0 0 14px rgba(255, 210, 122, 0.4); }
.stack-count { white-space: nowrap; font: 700 0.85rem/1 var(--body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }

#shows .empty { margin-top: 18px; }
@media (max-width: 520px) {
  .pulltab { --tk-h: 680px; }
  .reel, .reel svg { width: 36px; height: 36px; }
  .under-reels .reel, .under-reels .reel svg { width: 34px; height: 34px; }
  .key-prize { font-size: 2rem; }
  .windows { padding: 10px 10px 8px; }
  .tab { gap: 8px; padding: 0 8px; } .tab-date { min-width: 64px; } .tab-md { font-size: 1.12rem; }
  .under { padding-left: 22px; gap: 4px; } .result { font-size: 1.2rem; } .dir-btn { padding: 0 10px; font-size: 0.74rem; }
  .win-badge { right: 92px; }
  .stack-btn { padding: 10px 12px; font-size: 0.82rem; } .stack-count { font-size: 0.72rem; letter-spacing: 1px; }
}
.lakeside { overflow-x: clip; }

/* Extra ticket character */
.tk-name .n1 { font-size: clamp(3rem, 6.6vw, 4.1rem); }
.tk-name .n2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); color: #3BD15A; }
.tk-name::before, .tk-name::after { content: "\2605"; position: absolute; top: 14%; font-size: 1.5rem; color: #FFFFFF; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); }
.tk-name::before { left: -34px; } .tk-name::after { right: -34px; }
.tk-star { position: absolute; right: 8px; top: 8px; width: 72px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  transform: rotate(14deg); color: var(--ink); text-align: center;
  background: var(--halftone), radial-gradient(circle, #FFFFFF 0 36%, #FFE04A 37%);
  clip-path: polygon(50% 0, 59% 13%, 75% 7%, 77% 23%, 93% 25%, 87% 41%, 100% 50%, 87% 59%, 93% 75%, 77% 77%, 75% 93%, 59% 87%, 50% 100%, 41% 87%, 25% 93%, 23% 77%, 7% 75%, 13% 59%, 0 50%, 13% 41%, 7% 25%, 23% 23%, 25% 7%, 41% 13%); }
.tk-star small { font: 900 0.48rem/1 var(--body); letter-spacing: 1px; text-transform: uppercase; }
.tk-star b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: #E0201B; }
.tk-legal { padding: 6px 14px; text-align: center; font: 700 0.6rem/1.35 var(--body); color: #4A4658; background: #FFFFFF; border-top: 2.5px solid var(--ink); }
.tk-bar { border-top: 1px dashed rgba(20, 20, 20, 0.35); }
.st-rules { margin: 0; padding: 6px 10px; text-align: center; background: var(--ink); color: #FFE04A; font: 900 0.66rem/1.2 var(--body); letter-spacing: 1.2px; text-transform: uppercase; }
.tab-pull::before { content: "\25B2"; display: block; margin-bottom: 4px; font-size: 0.6rem; }
@media (max-width: 520px) { .tk-star { width: 58px; height: 58px; right: 4px; top: 4px; } .tk-star b { font-size: 0.95rem; } .tk-name::before, .tk-name::after { display: none; } .st-rules { font-size: 0.58rem; } }

/* Lucky Night Out header: flames, gold coins, crazier lettering */
.tk-header { padding: 16px 10px 26px; min-height: 170px; display: grid; place-items: center;
  background: radial-gradient(rgba(255, 210, 63, 0.16) 1px, transparent 1.4px) 0 0 / 6px 6px, radial-gradient(ellipse 80% 90% at 50% 100%, #5A1206 0%, #2A0804 55%, #120303 100%); }
.tk-flames { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 0; }
.tk-bill, .tk-coin, .tk-pile { position: absolute; z-index: 1; height: auto; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
.tk-coin, .tk-pile { z-index: 2; }
.tk-name { z-index: 3; transform: rotate(-4deg); }
.tk-name .n1, .tk-name .n2 { font-family: 'Luckiest Guy', var(--display); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; paint-order: stroke fill; }
.tk-name .n1 { font-size: clamp(3.4rem, 7.6vw, 4.8rem); line-height: 0.95; color: #FFE04A; -webkit-text-stroke: 9px var(--ink); text-shadow: 3px 3px 0 #E0201B, 6px 6px 0 var(--ink); }
.tk-name .n2 { font-size: clamp(1.7rem, 3.9vw, 2.4rem); line-height: 1; color: #3BD15A; -webkit-text-stroke: 7px var(--ink); text-shadow: 4px 4px 0 var(--ink); margin-top: 2px; }
.tk-name::before, .tk-name::after { display: none; }
.tk-star { z-index: 4; }
.win-badge span { font-family: 'Luckiest Guy', var(--display); font-size: 1rem; color: #E0201B; white-space: nowrap; }
.under-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; line-height: 1.15; }
.ui-date { font: 900 0.7rem/1.1 var(--body); letter-spacing: 1px; text-transform: uppercase; color: #E0201B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-venue { font-family: var(--display); font-size: 0.92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-city { font: 700 0.7rem/1.1 var(--body); color: #4A4658; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.under .dir-btn, .under .dir-note { flex: 0 0 auto; }
@media (max-width: 520px) { .under-reels .reel, .under-reels .reel svg { width: 30px; height: 30px; } .ui-venue { font-size: 0.8rem; } .ui-city { font-size: 0.64rem; } .ui-venue, .ui-city { white-space: normal; overflow-wrap: anywhere; } .under .dir-btn { padding: 0 9px; font-size: 0.68rem; min-height: 36px; } .under .dir-note { font-size: 0.66rem; } }
@media (max-width: 520px) { .tk-header { min-height: 150px; } .tk-header [data-xs="hide"] { display: none; } .tk-bill { width: 56px !important; } .tk-pile { width: 84px !important; } }

/* Closed tabs share the key card's red-to-gold gradient, top to bottom */
.tab { color: var(--ink); }
.windows .win:nth-child(1) .tab { background: var(--halftone), var(--grain), linear-gradient(180deg, #E0201B, #EA351A); }
.windows .win:nth-child(2) .tab { background: var(--halftone), var(--grain), linear-gradient(180deg, #EA351A, #F34C17); }
.windows .win:nth-child(3) .tab { background: var(--halftone), var(--grain), linear-gradient(180deg, #F34C17, #FA700A); }
.windows .win:nth-child(4) .tab { background: var(--halftone), var(--grain), linear-gradient(180deg, #FA700A, #FF9308); }
.windows .win:nth-child(5) .tab { background: var(--halftone), var(--grain), linear-gradient(180deg, #FF9308, #FFB223); }
.windows .win:nth-child(6) .tab { background: var(--halftone), var(--grain), linear-gradient(180deg, #FFB223, #FFD23F); }
.tab-venue { color: #FFFFFF; paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); text-shadow: 2px 2px 0 var(--ink); letter-spacing: 0.3px; }
.tab-meta { color: var(--ink); font-weight: 900; }
.tab-pull { color: var(--ink); }
.tab-date { background: #FFFFFF; }
.win.is-next .tab-date { background: var(--ink); color: #FFE04A; }

/* ---------- Shows page: tickets resting on the bar top ---------- */
.bar-page { background: #140B06; }
.bar-top { position: relative; overflow: hidden; padding: 48px 0 120px; min-height: 100vh;
  background:
    radial-gradient(ellipse 55% 38% at 50% -4%, rgba(255, 200, 130, 0.38), transparent 72%),
    radial-gradient(ellipse 130% 95% at 50% 35%, transparent 45%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(172deg, transparent 30%, rgba(255, 228, 190, 0.07) 44%, transparent 58%),
    repeating-linear-gradient(180deg, transparent 0 186px, rgba(0, 0, 0, 0.5) 186px 188px, rgba(255, 210, 160, 0.06) 188px 189px),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%273000%27%20height%3D%27940%27%3E%3Cfilter%20id%3D%27w%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0035%200.11%27%20numOctaves%3D%274%27%20seed%3D%274%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.10%20%200%200%200%200%200.05%20%200%200%200%200%200.02%20%200%200%200%201.1%20-0.35%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23w%29%27/%3E%3C/svg%3E") 0 0 / 3000px 940px,
    linear-gradient(180deg, #6A3A1C 0%, #4E2812 55%, #3A1D0D 100%); }
.bar-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58px; pointer-events: none;
  background:
    linear-gradient(180deg, #E8C27A 0 2px, #9C7330 2px 4px, transparent 4px),
    radial-gradient(ellipse 100% 140% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #4A1A1E 4px, #2C0D10 70%, #1A0709 100%);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.45); }
.bar-wrap { position: relative; z-index: 1; }
.bar-head { text-align: center; margin: 0 auto 34px; max-width: 640px; }
.bar-kicker { margin: 0 0 6px; font: 700 0.78rem/1 var(--body); letter-spacing: 3px; text-transform: uppercase; }
.bar-kicker a { color: var(--bulb); text-decoration: none; }
.bar-head h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; color: var(--cream); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); }
.bar-sub { margin: 10px 0 0; color: #E6D3B8; }
.bar-top .pulltab { position: relative; }
.bar-top .ticket.key { transform: rotate(-1.4deg); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), 0 22px 36px rgba(0, 0, 0, 0.55); }
.bar-top .stack-wrap { transform: rotate(0.9deg); }
.bar-top .show-ticket { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), 0 22px 36px rgba(0, 0, 0, 0.5); }
.bar-top .stack-btn { background: rgba(20, 10, 6, 0.65); }
.bar-top .empty { text-align: center; }
.bar-props { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.prop { position: absolute; display: block; }
.prop-coaster { left: calc(50% - 700px); top: 300px; width: 170px; height: 170px; border-radius: 50%; transform: rotate(-14deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #B3261E;
  background: radial-gradient(circle, transparent 58%, rgba(120, 70, 30, 0.18) 60%, transparent 66%), #EADBBE;
  box-shadow: inset 0 0 0 6px #EADBBE, inset 0 0 0 9px #B3261E, 0 6px 10px rgba(0, 0, 0, 0.5); }
.prop-coaster b { font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.prop-coaster i { font-family: var(--script); font-style: normal; font-size: 1.3rem; color: #1E3A6B; }
.prop-ring { border-radius: 50%; border: 3px solid rgba(255, 236, 205, 0.07); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.prop-ring.r1 { width: 112px; height: 108px; left: calc(50% - 650px); top: 640px; }
.prop-ring.r2 { width: 100px; height: 104px; left: calc(50% - 628px); top: 664px; border-width: 2px; }
.prop-ring.r3 { width: 116px; height: 112px; right: calc(50% - 690px); top: 760px; }
.prop-glass { right: calc(50% - 720px); top: 210px; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(255, 220, 160, 0.55), transparent 30%), radial-gradient(circle, #C46A1A 0%, #8C3E0C 62%, #5A2508 72%, rgba(255, 240, 220, 0.5) 74%, rgba(255, 240, 220, 0.12) 80%, rgba(255, 255, 255, 0.35) 84%, transparent 86%);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.45); }
.prop-glass .ice { position: absolute; width: 46px; height: 46px; border-radius: 9px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 240, 220, 0.12)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); }
.prop-glass .i1 { left: 44px; top: 50px; transform: rotate(12deg); } .prop-glass .i2 { left: 92px; top: 66px; transform: rotate(-20deg); } .prop-glass .i3 { left: 60px; top: 100px; transform: rotate(32deg); }
.prop-glass .peel { position: absolute; left: 96px; top: 108px; width: 54px; height: 22px; border-radius: 50%; background: #FF9A1A; box-shadow: inset 0 -5px 0 #FFD08A; transform: rotate(-30deg); }
.prop-glass .cherry { position: absolute; left: 70px; top: 40px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF7A7A, #B5120B 60%, #6E0705); }
.prop-matches { left: calc(50% - 690px); top: 860px; width: 110px; height: 64px; border-radius: 4px; transform: rotate(18deg);
  background: linear-gradient(180deg, #B3261E 0 76%, #2C1A10 76% 80%, #B3261E 80%); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
  display: grid; place-items: center; }
.prop-matches b { font: 400 0.95rem/1 var(--script); color: #FFE7B0; transform: translateY(-6px); }
@media (max-width: 1360px) { .prop-coaster { left: -60px; } .prop-glass { right: -80px; } .prop-ring.r1, .prop-ring.r2 { left: -40px; } .prop-ring.r3 { right: -50px; } .prop-matches { left: -40px; } }
@media (max-width: 880px) { .bar-props { display: none; } .bar-top { padding-top: 32px; } .bar-top .ticket.key, .bar-top .stack-wrap { transform: none; } }

/* ---------- Home: upcoming shows teaser ---------- */
.teaser-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.teaser-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--radius);
  background: rgba(237, 227, 207, 0.05); border: 1px solid var(--rule); }
.teaser-date { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 8px; border-radius: 6px; line-height: 1; color: #141414;
  background: linear-gradient(180deg, #F2451A, #FF8A00); }
.teaser-dow { font: 700 0.68rem/1 var(--body); letter-spacing: 2px; text-transform: uppercase; }
.teaser-md { font-family: var(--display); font-size: 1.2rem; margin-top: 3px; white-space: nowrap; color: #FFFFFF; text-shadow: 1px 1px 0 #141414; }
.teaser-info { display: flex; flex-direction: column; min-width: 0; }
.teaser-venue { font-family: var(--display); font-size: 1.1rem; line-height: 1.2; }
.teaser-meta { color: var(--muted); font-size: 0.92rem; }
.teaser-dir { font: 700 0.85rem/1 var(--body); color: var(--bulb); text-decoration: none; padding: 10px 12px; border: 1px solid rgba(255, 210, 122, 0.4); border-radius: 6px; }
.teaser-dir:hover { background: rgba(255, 210, 122, 0.12); }
.teaser-cta { display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 8px; text-decoration: none; color: #141414;
  background: linear-gradient(90deg, #E0201B, #FF8A00 60%, #FFD23F); border: 2px solid #141414; box-shadow: 4px 4px 0 #141414; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.teaser-cta:hover { color: #141414; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #141414; }
.teaser-cta-tab { font: 700 0.62rem/1 var(--body); letter-spacing: 3px; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 4px; background: #141414; color: #FFE04A; border-radius: 4px; }
.teaser-cta-text { display: flex; flex-direction: column; line-height: 1.2; }
.teaser-cta-text b { font-family: 'Luckiest Guy', var(--display); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.5px; color: #FFFFFF; -webkit-text-stroke: 1px #141414; paint-order: stroke fill; text-shadow: 2px 2px 0 #141414; }
.teaser-cta-text small { font: 700 0.8rem/1.2 var(--body); }
@media (max-width: 560px) { .teaser-item { grid-template-columns: auto minmax(0, 1fr); } .teaser-dir { grid-column: 1 / -1; text-align: center; } }

/* ---------- Social icons in the main nav ---------- */
.nav-social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav-social:empty { display: none; }
.nav-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--cream); transition: color 0.15s ease, box-shadow 0.15s ease; }
.nav-social a:hover { color: var(--tube); box-shadow: inset 0 0 0 2px var(--tube), 0 0 10px var(--neon), 0 0 22px rgba(255, 79, 46, 0.45); }
.nav-social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) { .nav-links { gap: 4px 14px; } .nav-social { gap: 0; order: 5; flex-basis: 100%; margin-left: -8px; } .nav-social a { width: 34px; height: 34px; } .nav-social svg { width: 20px; height: 20px; } }

/* Hero buttons share one size */
.hero .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; gap: 12px; }
.hero .actions .btn { width: 100%; padding-inline: 16px; white-space: nowrap; }
@media (max-width: 720px) { .hero .actions { grid-template-columns: minmax(0, 300px); } }

/* Site display type: Oswald Bold in all caps (the pull-tab tickets keep their own lettering) */
h1, h2, h3, .brand span, .next-show strong, .heard-list, .show-date .day, .show-title, .tune-title, .tune-year, .member-name, .footer-name, .bar-head h1, .teaser-venue, .teaser-md {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.brand span { font-size: 1.25rem; letter-spacing: 0.06em; }
h2 { font-size: clamp(2rem, 3.8vw, 2.8rem); line-height: 1.05; }
.bar-head h1 { font-size: clamp(2.6rem, 6vw, 4rem); }
.teaser-md { text-shadow: none; color: #141414; }

/* Home: the lake now flows straight into The Sound, so fade the water into the pines */
#sound.pines { border-top: 0; padding-top: 72px; background: radial-gradient(ellipse 55% 70% at 25% 45%, rgba(79, 157, 255, 0.08), transparent 70%), linear-gradient(180deg, var(--lake) 0%, #0B1A30 45%, #0D1430 100%); }
#sound .sound-media { background: #081426; box-shadow: 0 0 0 2px rgba(79, 157, 255, 0.55), 0 0 22px rgba(79, 157, 255, 0.25), 0 24px 40px rgba(0, 0, 0, 0.45); }
.neon-blue { filter: drop-shadow(0 0 2px var(--blue)) drop-shadow(0 0 8px var(--blue)); width: 40px; height: 60px; }
#sound .sound-copy p { max-width: 52ch; font-size: 1.04rem; margin: 0 0 1em; }

/* Footer logo: flat full-colour logo with one soft warm glow instead of small neon tubes */
.footer-brand img { filter: drop-shadow(0 0 14px rgba(255, 120, 60, 0.35)); }

/* Old Fashioned from above: drawn as SVG; this resets the earlier CSS-only glass */
.prop-glass { width: 230px; height: 230px; right: calc(50% - 830px); top: 190px; background: none; box-shadow: none; border-radius: 0; }
.prop-glass svg { display: block; overflow: visible; }
@media (max-width: 1360px) { .prop-glass { right: -160px; } }
@media (max-width: 1240px) { .prop-glass { display: none; } }

/* Ashtray with a lit cigarette: amber glass from above, smoke drifting up */
.prop-ashtray { width: 210px; height: 210px; right: calc(50% - 800px); top: 560px; }
.prop-ashtray svg { display: block; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .prop-ashtray .smoke path { animation: smoke-drift 8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  .prop-ashtray .smoke .s4 { animation-duration: 10s; animation-delay: -5s; } .prop-ashtray .smoke .s5 { animation-duration: 12s; animation-delay: -7s; }
  .prop-ashtray .smoke .s2 { animation-duration: 9s; animation-delay: -3s; }
  .prop-ashtray .smoke .s3 { animation-duration: 6s; animation-delay: -1.5s; }
  .prop-ashtray .ember-glow { animation: ember 3.2s ease-in-out infinite; }
}
@keyframes smoke-drift { 0% { transform: translate(0, 4px) scaleX(0.92); opacity: 0.2; } 30% { opacity: 1; } 75% { opacity: 0.7; } 100% { transform: translate(-6px, -22px) scaleX(1.18); opacity: 0.15; } }
@keyframes ember { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.8; } }
@media (max-width: 1360px) { .prop-ashtray { right: -130px; } }
@media (max-width: 1240px) { .prop-ashtray { display: none; } }

/* Hot Club matchbook: cream cover with the logo, striker strip and staple at the fold */
.prop-matches { width: 128px; height: 176px; top: 820px; left: calc(50% - 720px); padding: 0; border-radius: 5px; transform: rotate(-12deg); display: flex; flex-direction: column; place-items: stretch;
  background: #F2E7D0; box-shadow: inset 0 0 0 4px #F2E7D0, inset 0 0 0 6px #C2261B, 0 8px 14px rgba(0, 0, 0, 0.55); overflow: hidden; }
.prop-matches .mb-cover { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 10px 6px; text-align: center; }
.prop-matches img { width: 84px; height: auto; }
.prop-matches b { font: 700 0.72rem/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.06em; color: #363670; transform: none; }
.prop-matches i { font: 700 0.5rem/1 var(--body); font-style: normal; letter-spacing: 1.5px; text-transform: uppercase; color: #C2261B; }
.prop-matches .mb-strike { position: relative; flex: 0 0 34px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 4px), #C2261B; }
.prop-matches .mb-strike::before { content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 12px; border-radius: 2px;
  background: radial-gradient(rgba(255, 255, 255, 0.18) 0.8px, transparent 1.2px) 0 0 / 3px 3px, #3A2618; }
.prop-matches .mb-strike::after { content: ""; position: absolute; left: 50%; top: -3px; width: 26px; height: 5px; margin-left: -13px; border-radius: 2px;
  background: linear-gradient(180deg, #F4F4F4, #9A9A9A); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
@media (max-width: 1360px) { .prop-matches { left: -34px; } }

/* ---------- Home: the page below the hero is one deep lake you pan down through ---------- */
.lake-page .site-footer { background: #050C1C; }
.lake-deep { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--lake) 0%, #0A1B31 28%, #08162B 60%, #060F22 85%, #050C1C 100%); }
.lake-deep > section { position: relative; z-index: 2; background: none !important; border-top: 0 !important; }
.lake-caustics { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 38% 22% at 22% 8%, rgba(120, 170, 255, 0.10), transparent 70%),
    radial-gradient(ellipse 30% 18% at 78% 20%, rgba(120, 170, 255, 0.07), transparent 70%),
    radial-gradient(ellipse 45% 25% at 40% 46%, rgba(90, 140, 230, 0.06), transparent 70%),
    radial-gradient(ellipse 35% 20% at 70% 72%, rgba(90, 140, 230, 0.05), transparent 70%);
  background-repeat: no-repeat; will-change: transform; }
.lake-deep::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 900px; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(100deg, transparent 0 80px, rgba(140, 190, 255, 0.035) 110px, transparent 140px 260px); filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 160px, transparent 100%); }
.lake-life { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ripple { position: absolute; width: 0; height: 0; }
.ripple i { position: absolute; left: -70px; top: -22px; width: 140px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(170, 205, 255, 0.45); opacity: 0; transform: scale(0.1);
  animation: ripple-out 3.6s ease-out forwards; }
.ripple i:nth-child(2) { animation-delay: 0.45s; } .ripple i:nth-child(3) { animation-delay: 0.9s; border-color: rgba(170, 205, 255, 0.3); }
@keyframes ripple-out { 0% { opacity: 0; transform: scale(0.1); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
.fish { position: absolute; width: 44px; height: 12px; opacity: 0; filter: blur(1.1px); color: rgba(2, 6, 14, 0.9); animation: fish-swim var(--dur, 8s) ease-in-out forwards; }
.fish svg { width: 100%; height: 100%; display: block; animation: fish-wiggle 1.3s ease-in-out infinite alternate; transform-origin: 80% 50%; }
.fish.left svg { scale: -1 1; }
@keyframes fish-swim { 0% { opacity: 0; translate: 0 0; } 25% { opacity: var(--o, 0.3); } 70% { opacity: var(--o, 0.3); } 100% { opacity: 0; translate: var(--dx) var(--dy); } }
@keyframes fish-wiggle { from { transform: skewY(-2deg); } to { transform: skewY(2deg); } }
@media (prefers-reduced-motion: reduce) { .lake-life { display: none; } }
#sound .sound-media { background: rgba(4, 12, 26, 0.85); }
#book .book-form { background-color: rgba(30, 12, 18, 0.92); }

/* ---------- Songbook page ---------- */
.songbook-page { min-height: 70vh; padding-block: 64px 96px; }
.menu-card h1 { color: var(--gold); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; }
.songbook-page .band-wrap { max-width: 820px; margin: 56px auto 0; }

/* Three loose paper matches beside the matchbook, one already struck */
.prop-matchsticks { width: 170px; height: 80px; left: calc(50% - 760px); top: 1000px; transform: rotate(-6deg); }
.prop-matchsticks svg { display: block; overflow: visible; }
@media (max-width: 1360px) { .prop-matchsticks { left: -50px; } }

/* Spent match lying on the bar by the ashtray */
.prop-spent { width: 96px; height: 22px; right: calc(50% - 650px); top: 790px; transform: rotate(24deg); }
.prop-spent svg { display: block; overflow: visible; }
@media (max-width: 1360px) { .prop-spent { right: -20px; } }
@media (max-width: 1240px) { .prop-spent { display: none; } }

/* Worn coaster and matchbook: paper grain, a damp glass ring, yellowed edges */
.bar-props { --paper-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20seed%3D%274%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.35%20%200%200%200%200%200.26%20%200%200%200%200%200.14%20%200%200%200%200.55%20-0.12%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23g%29%27/%3E%3C/svg%3E"); --paper-fiber: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27f%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.02%200.25%27%20numOctaves%3D%273%27%20seed%3D%278%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.4%20%200%200%200%200%200.3%20%200%200%200%200%200.18%20%200%200%200%200.35%20-0.08%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23f%29%27/%3E%3C/svg%3E"); }
.prop-coaster { background:
    var(--paper-grain) 0 0 / 160px 160px,
    var(--paper-fiber) 0 0 / 240px 240px,
    radial-gradient(circle at 56% 44%, transparent 0 50%, rgba(96, 58, 22, 0.5) 52.5%, rgba(96, 58, 22, 0.18) 56%, transparent 58.5%),
    radial-gradient(circle at 48% 54%, transparent 0 51%, rgba(96, 58, 22, 0.22) 53%, transparent 55.5%),
    radial-gradient(ellipse 34% 28% at 62% 38%, rgba(110, 70, 30, 0.2), transparent 70%),
    radial-gradient(ellipse 22% 16% at 30% 66%, rgba(110, 70, 30, 0.14), transparent 70%),
    radial-gradient(circle, transparent 58%, rgba(150, 105, 40, 0.26) 92%, rgba(120, 80, 30, 0.38) 100%),
    #E8D7B4;
  box-shadow: inset 0 0 0 6px #E3D0AA, inset 0 0 0 9px #A8392C, 0 6px 10px rgba(0, 0, 0, 0.5); }
.prop-coaster b, .prop-coaster i { opacity: 0.86; mix-blend-mode: multiply; }
.prop-coaster::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(118deg, transparent 46%, rgba(255, 250, 235, 0.22) 47%, transparent 49%), radial-gradient(circle at 18% 22%, rgba(80, 50, 20, 0.18) 0 3px, transparent 4px), radial-gradient(circle at 82% 76%, rgba(80, 50, 20, 0.14) 0 2px, transparent 3px); }
.prop-matches { background:
    var(--paper-grain) 0 0 / 160px 160px,
    var(--paper-fiber) 0 0 / 240px 240px,
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(140, 100, 40, 0.28) 100%),
    #EEE1C6; }
.prop-matches img { opacity: 0.9; mix-blend-mode: multiply; }
.prop-matches i { opacity: 0.88; }
.prop-matches .mb-strike { background: var(--paper-grain) 0 0 / 160px 160px, linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 4px), #B4241A; }

/* Nav links share the social icons' neon hover: a tube ring and red-orange glow */
.nav-links a:not(.btn) { padding: 8px 14px; border-radius: 999px; color: var(--cream); transition: color 0.15s ease, box-shadow 0.15s ease; }
.nav-links a:not(.btn):hover, .nav-links a:not(.btn):focus-visible { color: var(--tube); box-shadow: inset 0 0 0 2px var(--tube), 0 0 10px var(--neon), 0 0 22px rgba(255, 79, 46, 0.45); }
.nav-links a[aria-current="page"] { color: var(--tube); box-shadow: inset 0 0 0 1.5px rgba(255, 241, 232, 0.55), 0 0 8px rgba(255, 79, 46, 0.35); }
.nav-links .btn:hover, .nav-links .btn:focus-visible { box-shadow: inset 0 0 0 2px var(--tube), 0 0 10px var(--neon), 0 0 26px rgba(255, 79, 46, 0.6); }
.nav-links { gap: 6px 10px; }
@media (max-width: 520px) { .nav-links a:not(.btn) { padding: 6px 10px; } .nav-links { gap: 4px 4px; } }

/* Social icons keep a true circle: no text-link padding, icon centred in the ring */
.nav-links .nav-social a { padding: 0; width: 40px; height: 40px; display: grid; place-items: center; }
.nav-links .nav-social svg { display: block; margin: 0; }
@media (max-width: 520px) { .nav-links .nav-social a { width: 36px; height: 36px; } }

/* Nav buttons share one size: Shows, Listen, Songbook and Booking */
.nav-links > a { display: inline-flex; align-items: center; justify-content: center; width: 116px; height: 44px; min-height: 0; padding: 0 !important; box-sizing: border-box; }
@media (max-width: 520px) { .nav-links > a { width: 80px; height: 38px; font-size: 0.86rem; } .nav-links { justify-content: flex-start; } }

/* ---------- Home underwater: water line, murky lake, light shafts, motes, weeds on the floor ---------- */
.lake-deep { background:
    radial-gradient(ellipse 70% 40% at 30% 30%, rgba(60, 110, 100, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 35% at 75% 65%, rgba(50, 90, 70, 0.10), transparent 70%),
    linear-gradient(180deg, var(--lake) 0, var(--lake) 40px, #123246 90px, #0E2A3A 14%, #0B2331 40%, #0B2027 66%, #0E2422 86%, #10261F 100%);
  padding-bottom: 220px; }
.lake-deep::before, .lake-caustics { display: none; }
.waterline { position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 3; overflow: hidden; pointer-events: none; }
.waterline svg { width: 200%; height: 100%; display: block; }
.waterline .wl-under { fill: #1A4460; opacity: 0.85; }
.waterline .wl-line { fill: none; stroke: rgba(200, 230, 255, 0.55); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(170, 215, 255, 0.6)); }
.lake-rays { position: absolute; left: 0; right: 0; top: 0; height: 1300px; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%); }
.lake-rays i { position: absolute; top: -40px; height: 110%; width: 160px; transform-origin: 50% 0; transform: skewX(-14deg);
  background: linear-gradient(180deg, rgba(175, 215, 230, 0.13), rgba(150, 200, 210, 0.05) 50%, transparent 90%); filter: blur(22px); }
.lake-rays i:nth-child(1) { left: 6%; width: 120px; } .lake-rays i:nth-child(2) { left: 20%; width: 210px; opacity: 0.8; }
.lake-rays i:nth-child(3) { left: 41%; width: 140px; } .lake-rays i:nth-child(4) { left: 57%; width: 240px; opacity: 0.7; }
.lake-rays i:nth-child(5) { left: 74%; width: 130px; } .lake-rays i:nth-child(6) { left: 88%; width: 180px; opacity: 0.8; }
.lake-motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.lake-life { z-index: 1; }
.fish { color: rgba(4, 12, 14, 0.95); }
.lake-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 280px; z-index: 1; pointer-events: none; }
.lake-weeds { width: 100%; height: 100%; display: block; overflow: visible; }
.lake-weeds .wl-back path { fill: #163A30; opacity: 0.6; }
.lake-weeds .wl-mid path { fill: #0A1F18; opacity: 0.9; }
.lake-weeds .wl-front path { fill: #050D0B; }
.lake-weeds .silt { fill: #050D0B; } .lake-weeds .rocks { fill: #050D0B; }
.lake-weeds .wl { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .waterline svg { animation: wl-drift 14s linear infinite; }
  .lake-rays i { animation: ray-sway 11s ease-in-out infinite alternate; }
  .lake-rays i:nth-child(2n) { animation-duration: 15s; animation-delay: -4s; }
  .lake-rays i:nth-child(3n) { animation-duration: 9s; animation-delay: -7s; }
  .lake-weeds .wl-back { animation: weed-sway 9s ease-in-out infinite alternate; }
  .lake-weeds .wl-mid { animation: weed-sway 7s ease-in-out infinite alternate-reverse; }
  .lake-weeds .wl-front { animation: weed-sway 6s ease-in-out infinite alternate; }
}
@keyframes wl-drift { to { transform: translateX(-50%); } }
@keyframes ray-sway { from { transform: skewX(-18deg) translateX(-24px); opacity: 0.55; } to { transform: skewX(-10deg) translateX(24px); opacity: 1; } }
@keyframes weed-sway { from { transform: skewX(-2.5deg); } to { transform: skewX(2.5deg); } }
.lake-page .site-footer .treeline-foot { display: none; }
.lake-page .site-footer { background: #050D0B; }
.lake-page .footer-inner { background: #050D0B; }
@media (max-width: 700px) { .lake-floor { height: 200px; } .lake-deep { padding-bottom: 160px; } }

/* Lake floor depth: receding beds, lit rock tops, pebbles */
.lake-floor { height: 340px; }
.lake-weeds .wl-back path { fill: #1C463B; opacity: 0.55; }
.lake-weeds .wl-mid path { fill: #0E2A21; opacity: 0.95; }
.lake-weeds .wl-front path { fill: #050D0B; }
.lake-weeds .rocks-mid { fill: #0B211B; } .lake-weeds .rocks-near { fill: #060F0C; }
.lake-weeds .rocks-lit { fill: none; stroke: rgba(150, 200, 180, 0.16); stroke-width: 2; stroke-linecap: round; }
.lake-weeds .rocks-lit.near { stroke: rgba(150, 200, 180, 0.1); }
.lake-weeds .pebbles { fill: #0C1C17; }
.lake-deep { padding-bottom: 280px; }
@media (max-width: 700px) { .lake-floor { height: 240px; } .lake-deep { padding-bottom: 200px; } }

/* Water line v2: irregular layered surface seen from below, soft glow beneath */
.waterline { height: 90px; }
.waterline svg { width: 200%; height: 100%; display: block; overflow: visible; }
.waterline .wl-line { fill: none; stroke: rgba(225, 245, 255, 0.7); stroke-width: 1.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(170, 220, 255, 0.8)) drop-shadow(0 0 10px rgba(120, 190, 230, 0.35)); }
.waterline .wl-a, .waterline .wl-b { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .waterline svg { animation: wl-drift 26s linear infinite; }
  .waterline .wl-a { animation: wl-drift-a 17s linear infinite; }
  .waterline .wl-b { animation: wl-drift-b 11s linear infinite; }
  .waterline .wl-glow { animation: wl-shimmer 5s ease-in-out infinite alternate; }
}
@keyframes wl-drift-a { from { transform: translateX(0); } to { transform: translateX(-1440px); } }
@keyframes wl-drift-b { from { transform: translateX(-1440px); } to { transform: translateX(0); } }
@keyframes wl-shimmer { from { opacity: 0.85; } to { opacity: 1; } }

/* Water line sits behind the content; light shafts and silt start below the surface */
.waterline { z-index: 1; }
.lake-rays { top: 34px; }
.lake-motes { top: 40px; height: calc(100% - 40px); }

/* Matchbook tagline: two centred lines, letter-spacing balanced on both sides */
.prop-matches i { display: block; width: 100%; text-align: center; line-height: 1.25; padding-left: 1.5px; }

/* Date boxes: one consistent style on every tab */
.tab-date, .win.is-next .tab-date, .win.is-private .tab-date, .win.is-open .tab-date { background: #FFFFFF; color: var(--ink); }

/* Peeling: a dog-eared free corner invites the pull; pulling rolls the strip back from right to left */
.tab { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.tab-corner { position: absolute; top: -2px; right: -2px; width: 24px; height: 24px; z-index: 3; pointer-events: none;
  background: linear-gradient(225deg, transparent 0 49%, #F6F0DF 50%, #E2D9C2 78%, #C9BEA2 100%);
  border-bottom-left-radius: 4px; filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.35)); transition: width 0.2s ease, height 0.2s ease; }
.tab-corner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(225deg, transparent 0 49%, rgba(20, 20, 20, 0.5) 50%, transparent 53%); }
.win:hover .tab-corner { width: 32px; height: 32px; }
.win:hover .tab { clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); transform: none; }
.win.is-pulling .tab-corner, .win.is-pulled .tab-corner { display: none; }
.win.is-pulling .tab { animation: peel-roll 0.72s cubic-bezier(0.5, 0.05, 0.6, 1) forwards; }
@keyframes peel-roll { from { clip-path: inset(0 0 0 0 round 6px); } to { clip-path: inset(0 100% 0 0 round 6px); } }
.win.is-pulling .curl { opacity: 1; animation: curl-roll 0.72s cubic-bezier(0.5, 0.05, 0.6, 1) forwards; }
@keyframes curl-roll { from { left: calc(100% - 30px); width: 36px; } to { left: -12px; width: 26px; } }
.win.is-pulling::before { background: linear-gradient(270deg, rgba(40, 30, 10, 0.25), transparent 40%); }
@media (prefers-reduced-motion: reduce) { .win.is-pulling .tab, .win.is-pulling .curl { animation: none; } }

/* Junk sunk in the lake bed: a guitar, a tire, beer bottles */
.lake-weeds .junk-mid > * { fill: #081A14; }
.lake-weeds .junk-near > * { fill: #071510; }
.lake-weeds .junk .hole { fill: #143A30; }
.lake-weeds .junk-near .hole { fill: #0C211B; }
.lake-weeds .junk .strings { fill: none; stroke: rgba(150, 200, 180, 0.18); stroke-width: 0.6; }
.lake-weeds .junk .glint { fill: none; stroke: rgba(160, 210, 190, 0.22); stroke-width: 1.4; stroke-linecap: round; }
.lake-weeds .junk .tread { fill: none; stroke: #143A30; stroke-width: 2; }

/* Worn bar top: subtle scratches, scuffs and worn-through finish where elbows rest */
.bar-top::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1400'%20height='1100'%3E%3Cdefs%3E%3Cfilter%20id='b'%20x='-100%'%20y='-100%'%20width='300%'%20height='300%'%3E%3CfeGaussianBlur%20stdDeviation='30'/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d='M505%20658%20q24%202%2049%202'%20stroke='%23FFE6C4'%20stroke-opacity='0.028'%20stroke-width='0.5'%20fill='none'/%3E%3Cpath%20d='M311%201065%20q59%20-13%20118%20-25'%20stroke='%23FFE6C4'%20stroke-opacity='0.063'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M825%20933%20q46%20-14%2092%20-29'%20stroke='%23FFE6C4'%20stroke-opacity='0.058'%20stroke-width='1.0'%20fill='none'/%3E%3Cpath%20d='M808%20343%20q13%200%2027%206'%20stroke='%23FFE6C4'%20stroke-opacity='0.064'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M919%20988%20q50%2017%20101%2034'%20stroke='%23FFE6C4'%20stroke-opacity='0.061'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M140%20171%20q63%2020%20125%2043'%20stroke='%23FFE6C4'%20stroke-opacity='0.068'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M662%20431%20q47%20-9%2094%20-16'%20stroke='%23FFE6C4'%20stroke-opacity='0.051'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M1165%20921%20q63%2013%20127%2020'%20stroke='%23FFE6C4'%20stroke-opacity='0.055'%20stroke-width='0.6'%20fill='none'/%3E%3Cpath%20d='M1148%20622%20q57%2026%20113%2049'%20stroke='%23FFE6C4'%20stroke-opacity='0.035'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M101%20918%20q44%20-5%2087%20-17'%20stroke='%23FFE6C4'%20stroke-opacity='0.029'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M400%20830%20q33%20-8%2066%20-21'%20stroke='%23FFE6C4'%20stroke-opacity='0.027'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M462%20946%20q12%205%2025%205'%20stroke='%23FFE6C4'%20stroke-opacity='0.048'%20stroke-width='1.2'%20fill='none'/%3E%3Cpath%20d='M804%2063%20q27%20-12%2053%20-21'%20stroke='%23FFE6C4'%20stroke-opacity='0.043'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M1169%20356%20q18%20-5%2036%20-15'%20stroke='%23FFE6C4'%20stroke-opacity='0.065'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M847%20649%20q38%201%2075%201'%20stroke='%23FFE6C4'%20stroke-opacity='0.053'%20stroke-width='1.2'%20fill='none'/%3E%3Cpath%20d='M941%20277%20q40%20-4%2081%20-5'%20stroke='%23FFE6C4'%20stroke-opacity='0.069'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M552%20633%20q39%20-21%2078%20-35'%20stroke='%23FFE6C4'%20stroke-opacity='0.053'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M641%20736%20q14%201%2027%203'%20stroke='%23FFE6C4'%20stroke-opacity='0.057'%20stroke-width='1.0'%20fill='none'/%3E%3Cpath%20d='M925%201032%20q11%20-6%2021%20-8'%20stroke='%23FFE6C4'%20stroke-opacity='0.046'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M427%20414%20q29%20-3%2058%20-7'%20stroke='%23FFE6C4'%20stroke-opacity='0.039'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M735%20795%20q52%20-24%20103%20-45'%20stroke='%23FFE6C4'%20stroke-opacity='0.035'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M592%20756%20q23%20-9%2047%20-13'%20stroke='%23FFE6C4'%20stroke-opacity='0.039'%20stroke-width='0.7'%20fill='none'/%3E%3Cpath%20d='M1081%20206%20q60%20-4%20120%20-6'%20stroke='%23FFE6C4'%20stroke-opacity='0.054'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M176%20581%20q36%20-11%2072%20-18'%20stroke='%23FFE6C4'%20stroke-opacity='0.061'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M1085%20698%20q21%20-2%2041%20-8'%20stroke='%23FFE6C4'%20stroke-opacity='0.041'%20stroke-width='0.6'%20fill='none'/%3E%3Cpath%20d='M374%20390%20q27%206%2053%2014'%20stroke='%23FFE6C4'%20stroke-opacity='0.044'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M26%201011%20q62%20-17%20125%20-39'%20stroke='%23FFE6C4'%20stroke-opacity='0.069'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M294%20805%20q62%2026%20125%2049'%20stroke='%23FFE6C4'%20stroke-opacity='0.055'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M317%20101%20q27%20-3%2054%20-8'%20stroke='%23FFE6C4'%20stroke-opacity='0.038'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M947%20991%20q12%207%2024%209'%20stroke='%23FFE6C4'%20stroke-opacity='0.065'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M250%20342%20q11%203%2021%205'%20stroke='%23FFE6C4'%20stroke-opacity='0.049'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M439%20293%20q66%209%20132%2013'%20stroke='%23FFE6C4'%20stroke-opacity='0.046'%20stroke-width='1.0'%20fill='none'/%3E%3Cpath%20d='M715%20879%20q30%20-10%2060%20-16'%20stroke='%23FFE6C4'%20stroke-opacity='0.061'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M29%20684%20q56%2018%20112%2033'%20stroke='%23FFE6C4'%20stroke-opacity='0.027'%20stroke-width='0.7'%20fill='none'/%3E%3Cpath%20d='M573%20522%20q26%202%2052%201'%20stroke='%23FFE6C4'%20stroke-opacity='0.025'%20stroke-width='0.5'%20fill='none'/%3E%3Cpath%20d='M111%201044%20q17%20-4%2033%20-11'%20stroke='%23FFE6C4'%20stroke-opacity='0.029'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M478%20703%20q29%20-4%2057%20-9'%20stroke='%23FFE6C4'%20stroke-opacity='0.041'%20stroke-width='0.6'%20fill='none'/%3E%3Cpath%20d='M744%20775%20q28%20-10%2056%20-19'%20stroke='%23FFE6C4'%20stroke-opacity='0.029'%20stroke-width='0.6'%20fill='none'/%3E%3Cpath%20d='M1034%20425%20q32%205%2065%206'%20stroke='%23FFE6C4'%20stroke-opacity='0.053'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M930%20467%20q32%201%2065%20-0'%20stroke='%23FFE6C4'%20stroke-opacity='0.046'%20stroke-width='0.7'%20fill='none'/%3E%3Cpath%20d='M111%20472%20q42%207%2083%2014'%20stroke='%23FFE6C4'%20stroke-opacity='0.065'%20stroke-width='1.2'%20fill='none'/%3E%3Cpath%20d='M1047%20303%20q31%2011%2061%2022'%20stroke='%23FFE6C4'%20stroke-opacity='0.031'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M1023%20724%20q47%2018%2094%2033'%20stroke='%23FFE6C4'%20stroke-opacity='0.050'%20stroke-width='0.6'%20fill='none'/%3E%3Cpath%20d='M203%20835%20q41%20-22%2082%20-38'%20stroke='%23FFE6C4'%20stroke-opacity='0.029'%20stroke-width='0.6'%20fill='none'/%3E%3Cpath%20d='M49%20905%20q60%20-20%20121%20-35'%20stroke='%23FFE6C4'%20stroke-opacity='0.063'%20stroke-width='1.0'%20fill='none'/%3E%3Cpath%20d='M743%20861%20q56%2020%20111%2046'%20stroke='%23FFE6C4'%20stroke-opacity='0.060'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M964%201002%20q50%20-20%20100%20-36'%20stroke='%23FFE6C4'%20stroke-opacity='0.040'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M244%20290%20q58%20-13%20116%20-27'%20stroke='%23FFE6C4'%20stroke-opacity='0.059'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M474%20465%20q32%20-5%2064%20-6'%20stroke='%23FFE6C4'%20stroke-opacity='0.048'%20stroke-width='1.2'%20fill='none'/%3E%3Cpath%20d='M228%20748%20q34%209%2068%2015'%20stroke='%23FFE6C4'%20stroke-opacity='0.055'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M1171%20185%20q39%202%2077%2010'%20stroke='%23FFE6C4'%20stroke-opacity='0.059'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M939%20224%20q41%20-3%2082%20-4'%20stroke='%23FFE6C4'%20stroke-opacity='0.034'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M921%201022%20q28%20-8%2056%20-13'%20stroke='%23FFE6C4'%20stroke-opacity='0.057'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M351%20256%20q61%202%20122%209'%20stroke='%23FFE6C4'%20stroke-opacity='0.047'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M445%20835%20q20%20-5%2040%20-5'%20stroke='%23FFE6C4'%20stroke-opacity='0.070'%20stroke-width='0.8'%20fill='none'/%3E%3Cpath%20d='M1078%20884%20q46%20-1%2092%20-3'%20stroke='%23FFE6C4'%20stroke-opacity='0.047'%20stroke-width='1.0'%20fill='none'/%3E%3Cpath%20d='M928%201029%20q61%20-6%20122%20-11'%20stroke='%23FFE6C4'%20stroke-opacity='0.035'%20stroke-width='0.7'%20fill='none'/%3E%3Cpath%20d='M1223%20918%20q52%207%20105%2016'%20stroke='%23FFE6C4'%20stroke-opacity='0.034'%20stroke-width='0.7'%20fill='none'/%3E%3Cpath%20d='M1152%20966%20q21%202%2042%208'%20stroke='%23FFE6C4'%20stroke-opacity='0.064'%20stroke-width='0.7'%20fill='none'/%3E%3Cpath%20d='M131%20126%20q35%209%2069%2014'%20stroke='%23FFE6C4'%20stroke-opacity='0.038'%20stroke-width='0.7'%20fill='none'/%3E%3Cpath%20d='M29%20378%20q44%206%2089%2014'%20stroke='%23FFE6C4'%20stroke-opacity='0.047'%20stroke-width='0.6'%20fill='none'/%3E%3Cpath%20d='M519%20596%20q42%2015%2083%2035'%20stroke='%23FFE6C4'%20stroke-opacity='0.037'%20stroke-width='1.0'%20fill='none'/%3E%3Cpath%20d='M1227%20131%20q16%208%2032%2011'%20stroke='%23FFE6C4'%20stroke-opacity='0.042'%20stroke-width='1.0'%20fill='none'/%3E%3Cpath%20d='M865%20710%20q55%20-8%20109%20-20'%20stroke='%23FFE6C4'%20stroke-opacity='0.037'%20stroke-width='1.0'%20fill='none'/%3E%3Cpath%20d='M677%20148%20q67%2010%20134%2020'%20stroke='%23FFE6C4'%20stroke-opacity='0.041'%20stroke-width='1.0'%20fill='none'/%3E%3Cpath%20d='M249%20701%20q51%204%20101%206'%20stroke='%23FFE6C4'%20stroke-opacity='0.033'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M1200%20177%20q47%20-17%2093%20-32'%20stroke='%23FFE6C4'%20stroke-opacity='0.057'%20stroke-width='0.9'%20fill='none'/%3E%3Cpath%20d='M603%20355%20q43%204%2086%2011'%20stroke='%23FFE6C4'%20stroke-opacity='0.028'%20stroke-width='1.0'%20fill='none'/%3E%3Cpath%20d='M944%20404%20q55%201%20110%204'%20stroke='%23FFE6C4'%20stroke-opacity='0.042'%20stroke-width='1.1'%20fill='none'/%3E%3Cpath%20d='M350%20830%20q13%20-1%2025%200'%20stroke='%23FFE6C4'%20stroke-opacity='0.040'%20stroke-width='0.8'%20fill='none'/%3E%3Ccircle%20cx='757'%20cy='843'%20r='1.3'%20fill='%23000'%20fill-opacity='0.18'/%3E%3Ccircle%20cx='165'%20cy='302'%20r='0.9'%20fill='%23000'%20fill-opacity='0.09'/%3E%3Ccircle%20cx='1085'%20cy='795'%20r='1.1'%20fill='%23000'%20fill-opacity='0.10'/%3E%3Ccircle%20cx='585'%20cy='813'%20r='1.9'%20fill='%23000'%20fill-opacity='0.17'/%3E%3Ccircle%20cx='827'%20cy='168'%20r='1.4'%20fill='%23000'%20fill-opacity='0.10'/%3E%3Ccircle%20cx='738'%20cy='624'%20r='1.1'%20fill='%23000'%20fill-opacity='0.11'/%3E%3Ccircle%20cx='1089'%20cy='42'%20r='1.9'%20fill='%23000'%20fill-opacity='0.19'/%3E%3Ccircle%20cx='1320'%20cy='424'%20r='1.6'%20fill='%23000'%20fill-opacity='0.15'/%3E%3Ccircle%20cx='884'%20cy='1065'%20r='1.8'%20fill='%23000'%20fill-opacity='0.12'/%3E%3Ccircle%20cx='1197'%20cy='533'%20r='1.6'%20fill='%23000'%20fill-opacity='0.17'/%3E%3Ccircle%20cx='13'%20cy='842'%20r='1.7'%20fill='%23000'%20fill-opacity='0.14'/%3E%3Ccircle%20cx='733'%20cy='507'%20r='1.1'%20fill='%23000'%20fill-opacity='0.14'/%3E%3Ccircle%20cx='61'%20cy='550'%20r='1.7'%20fill='%23000'%20fill-opacity='0.13'/%3E%3Ccircle%20cx='791'%20cy='1046'%20r='2.0'%20fill='%23000'%20fill-opacity='0.10'/%3E%3Ccircle%20cx='1103'%20cy='683'%20r='0.9'%20fill='%23000'%20fill-opacity='0.12'/%3E%3Ccircle%20cx='332'%20cy='94'%20r='1.6'%20fill='%23000'%20fill-opacity='0.19'/%3E%3Ccircle%20cx='456'%20cy='950'%20r='1.8'%20fill='%23000'%20fill-opacity='0.10'/%3E%3Ccircle%20cx='1194'%20cy='659'%20r='2.1'%20fill='%23000'%20fill-opacity='0.17'/%3E%3Ccircle%20cx='1031'%20cy='381'%20r='1.9'%20fill='%23000'%20fill-opacity='0.19'/%3E%3Ccircle%20cx='1199'%20cy='482'%20r='1.9'%20fill='%23000'%20fill-opacity='0.14'/%3E%3Ccircle%20cx='161'%20cy='56'%20r='0.9'%20fill='%23000'%20fill-opacity='0.10'/%3E%3Ccircle%20cx='232'%20cy='547'%20r='1.8'%20fill='%23000'%20fill-opacity='0.14'/%3E%3Ccircle%20cx='593'%20cy='711'%20r='1.2'%20fill='%23000'%20fill-opacity='0.14'/%3E%3Ccircle%20cx='1055'%20cy='444'%20r='1.1'%20fill='%23000'%20fill-opacity='0.19'/%3E%3Ccircle%20cx='1003'%20cy='406'%20r='1.3'%20fill='%23000'%20fill-opacity='0.14'/%3E%3Ccircle%20cx='833'%20cy='252'%20r='0.8'%20fill='%23000'%20fill-opacity='0.11'/%3E%3Ccircle%20cx='1091'%20cy='165'%20r='1.4'%20fill='%23000'%20fill-opacity='0.10'/%3E%3Ccircle%20cx='299'%20cy='194'%20r='1.4'%20fill='%23000'%20fill-opacity='0.10'/%3E%3Ccircle%20cx='48'%20cy='129'%20r='1.0'%20fill='%23000'%20fill-opacity='0.14'/%3E%3Ccircle%20cx='92'%20cy='34'%20r='1.4'%20fill='%23000'%20fill-opacity='0.13'/%3E%3Ccircle%20cx='981'%20cy='65'%20r='1.4'%20fill='%23000'%20fill-opacity='0.13'/%3E%3Ccircle%20cx='47'%20cy='1053'%20r='1.1'%20fill='%23000'%20fill-opacity='0.09'/%3E%3Ccircle%20cx='665'%20cy='188'%20r='1.7'%20fill='%23000'%20fill-opacity='0.12'/%3E%3Ccircle%20cx='181'%20cy='66'%20r='1.8'%20fill='%23000'%20fill-opacity='0.11'/%3E%3Ccircle%20cx='1097'%20cy='513'%20r='2.1'%20fill='%23000'%20fill-opacity='0.12'/%3E%3Ccircle%20cx='355'%20cy='297'%20r='1.9'%20fill='%23000'%20fill-opacity='0.16'/%3E%3Ccircle%20cx='486'%20cy='111'%20r='1.8'%20fill='%23000'%20fill-opacity='0.20'/%3E%3Ccircle%20cx='827'%20cy='14'%20r='0.8'%20fill='%23000'%20fill-opacity='0.09'/%3E%3Ccircle%20cx='245'%20cy='50'%20r='0.9'%20fill='%23000'%20fill-opacity='0.16'/%3E%3Ccircle%20cx='1252'%20cy='227'%20r='2.2'%20fill='%23000'%20fill-opacity='0.14'/%3E%3Cellipse%20cx='943'%20cy='800'%20rx='126'%20ry='36'%20fill='%23000'%20fill-opacity='.07'%20filter='url(%23b)'/%3E%3Cellipse%20cx='544'%20cy='614'%20rx='127'%20ry='38'%20fill='%23000'%20fill-opacity='.07'%20filter='url(%23b)'/%3E%3Cellipse%20cx='535'%20cy='760'%20rx='77'%20ry='49'%20fill='%23000'%20fill-opacity='.07'%20filter='url(%23b)'/%3E%3Cellipse%20cx='567'%20cy='658'%20rx='126'%20ry='41'%20fill='%23000'%20fill-opacity='.07'%20filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 1400px 1100px,
    radial-gradient(ellipse 30% 16% at 50% 96%, rgba(150, 100, 55, 0.14), transparent 70%),
    radial-gradient(ellipse 22% 12% at 18% 92%, rgba(150, 100, 55, 0.16), transparent 70%),
    radial-gradient(ellipse 22% 12% at 82% 92%, rgba(150, 100, 55, 0.16), transparent 70%); }
.bar-top::after { background:
    linear-gradient(180deg, #C9A462 0 2px, #7E5A24 2px 4px, transparent 4px),
    radial-gradient(ellipse 100% 140% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 18% 60% at 22% 40%, rgba(255, 220, 200, 0.06), transparent 70%), radial-gradient(ellipse 14% 60% at 70% 45%, rgba(255, 220, 200, 0.05), transparent 70%),
    linear-gradient(180deg, #43181B 4px, #2A0D10 70%, #180709 100%); }

/* ---------- Songbook page: a 1930s song book on the bar ---------- */
.songbook-bar { --paper: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.75%27%20numOctaves%3D%273%27%20seed%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.45%20%200%200%200%200%200.33%20%200%200%200%200%200.16%20%200%200%200%200.5%20-0.1%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27/%3E%3C/svg%3E"); --foxing: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27600%27%20height%3D%27800%27%3E%3Cfilter%20id%3D%27f%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.012%27%20numOctaves%3D%273%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.5%20%200%200%200%200%200.33%20%200%200%200%200%200.12%20%200%200%200%200.9%20-0.5%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23f%29%27/%3E%3C/svg%3E"); --cloth: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%3E%3Cfilter%20id%3D%27c%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%200.08%27%20numOctaves%3D%272%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.35%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23c%29%27/%3E%3C/svg%3E");
  --sb-ink: #2A1E14; --sb-red: #8E2318; --sb-paper: #EADCBC; --sb-gold: #D9B25A;
  --sb-display: 'Limelight', 'Ultra', Georgia, serif; --sb-serif: 'Old Standard TT', 'Georgia', 'Times New Roman', serif; }
.songbook-main .songbook-page { display: none; }
.songbook-book { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.book-stage { position: relative; width: min(980px, 100%); aspect-ratio: 1.46; perspective: 2200px; }
.book-stage.is-single { width: min(460px, 100%); aspect-ratio: 0.72; }

/* cover */
.book-cover { position: absolute; top: 0; bottom: 0; left: 25.5%; width: 49%; border: 0; padding: 0; cursor: pointer; color: var(--sb-gold);
  border-radius: 4px 12px 12px 4px; transform-origin: 0 50%; transform: rotate(-2deg); transition: transform 0.65s cubic-bezier(.5,.05,.4,1);
  background: var(--cloth) 0 0 / 120px 120px, radial-gradient(ellipse 120% 90% at 40% 30%, #2E5240 0%, #1F3B2D 55%, #142A20 100%);
  box-shadow: inset 10px 0 12px -6px rgba(0,0,0,.6), inset -2px 0 0 rgba(255,255,255,.06), 0 2px 3px rgba(0,0,0,.5), 0 26px 40px rgba(0,0,0,.6); }
.book-stage.is-single .book-cover { left: 0; width: 100%; }
.book-cover::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 100% 0, rgba(200,180,140,.35) 0 14px, transparent 26px), radial-gradient(circle at 100% 100%, rgba(200,180,140,.3) 0 12px, transparent 24px),
    linear-gradient(90deg, rgba(0,0,0,.35) 0 14px, rgba(255,255,255,.05) 15px, transparent 18px); }
.book-cover:hover { transform: rotate(-1deg) translateY(-3px); }
.book-cover:focus-visible { outline: 3px solid var(--bulb); outline-offset: 4px; }
.book-cover.is-opening { transform: rotate(0deg) perspective(1600px) rotateY(-100deg); }
.cv-frame { position: absolute; inset: 7% 9% 7% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; text-align: center;
  border: 2px solid rgba(217,178,90,.75); outline: 1px solid rgba(217,178,90,.5); outline-offset: 5px; }
.cv-top, .cv-sub, .cv-vol { font: 700 clamp(.6rem,1.4vw,.8rem)/1.3 var(--sb-serif); letter-spacing: .22em; text-transform: uppercase; }
.cv-title { font-family: var(--sb-display); font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: .95; letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,240,190,.35), 0 -1px 0 rgba(0,0,0,.6); }
.cv-orn { width: 46%; height: 12px; background: radial-gradient(circle, var(--sb-gold) 0 3px, transparent 3.5px) center / 12px 12px no-repeat,
  linear-gradient(var(--sb-gold), var(--sb-gold)) left center / 42% 1.5px no-repeat, linear-gradient(var(--sb-gold), var(--sb-gold)) right center / 42% 1.5px no-repeat; opacity: .85; }
.cv-top, .cv-sub, .cv-vol, .cv-title, .cv-orn { opacity: .9; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.cv-open { position: absolute; right: -14px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; padding: 4px 12px; border-radius: 3px;
  font: 700 .66rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #2A1E14; background: var(--sb-gold); box-shadow: 0 2px 4px rgba(0,0,0,.4); }

/* open book */
.book-spread { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; cursor: pointer;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.55)) drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.book-spread::before { content: ""; position: absolute; inset: -10px -12px -12px; z-index: -1; border-radius: 8px;
  background: var(--cloth) 0 0 / 120px 120px, #1A3527; }
.book-stage.is-single .book-spread { grid-template-columns: 1fr; }
.book-stage.is-single .page-left { display: none; }
.page { position: relative; overflow: hidden; color: var(--sb-ink);
  background: var(--foxing) 0 0 / 600px 800px, var(--paper) 0 0 / 300px 300px, linear-gradient(180deg, #EFE3C4, #E4D3AE); }
.page-left { border-radius: 4px 0 0 4px; box-shadow: inset -26px 0 30px -18px rgba(70,45,15,.55), inset 2px 0 0 rgba(0,0,0,.08); }
.page-right { border-radius: 0 4px 4px 0; box-shadow: inset 26px 0 30px -18px rgba(70,45,15,.55), inset -2px 0 0 rgba(0,0,0,.08); }
.book-stage.is-single .page-right { border-radius: 4px; box-shadow: inset 18px 0 22px -16px rgba(70,45,15,.5); }
.pg-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6% 9% 5%; }
.pg-in::before { content: ""; position: absolute; inset: 3.5% 5%; border: 1px solid rgba(142,35,24,.45); outline: 1px solid rgba(142,35,24,.25); outline-offset: 3px; pointer-events: none; }
.pg-run { margin: 0 0 4%; text-align: center; font: 700 .62rem/1 var(--sb-serif); letter-spacing: .28em; text-transform: uppercase; color: var(--sb-red); }
.pg-num { margin: auto 0 0; padding-top: 3%; text-align: center; font: italic .82rem/1 var(--sb-serif); color: #6A563E; }
.pg-h { margin: 0 0 4%; text-align: center; font-family: var(--sb-display); font-weight: 400; font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-red); }
.pg-h::after { content: ""; display: block; width: 40%; height: 7px; margin: 8px auto 0;
  background: radial-gradient(circle, var(--sb-red) 0 2.5px, transparent 3px) center / 10px 7px no-repeat, linear-gradient(var(--sb-red), var(--sb-red)) left center / 42% 1px no-repeat, linear-gradient(var(--sb-red), var(--sb-red)) right center / 42% 1px no-repeat; }
.pg-title { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.pg-title p { margin: 0; }
.pt-small { font: italic 1rem/1 var(--sb-serif); }
.pt-big { font-family: var(--sb-display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; color: var(--sb-red); }
.pt-rule, .pt-orn, .pe-orn { width: 50%; height: 9px; background: radial-gradient(circle, var(--sb-ink) 0 3px, transparent 3.5px) center / 12px 9px no-repeat, linear-gradient(var(--sb-ink), var(--sb-ink)) left center / 42% 1px no-repeat, linear-gradient(var(--sb-ink), var(--sb-ink)) right center / 42% 1px no-repeat; opacity: .7; }
.pt-song { font: 700 clamp(1rem, 2vw, 1.3rem)/1 var(--sb-serif); letter-spacing: .3em; text-transform: uppercase; }
.pt-desc { max-width: 26ch; font: italic .92rem/1.45 var(--sb-serif); color: #4A3A28; }
.pt-vol { font: 700 .68rem/1 var(--sb-serif); letter-spacing: .22em; text-transform: uppercase; color: #6A563E; }
.ct-list, .sb-list { list-style: none; margin: 0; padding: 0; }
.ct-list li { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; font: .92rem/1.35 var(--sb-serif); }
.ct-no { min-width: 1.8em; color: #6A563E; font-variant-numeric: tabular-nums; }
.ct-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-dots, .sb-dots { flex: 1; min-width: 12px; border-bottom: 1.5px dotted rgba(42,30,20,.45); transform: translateY(-4px); }
.ct-p { font-variant-numeric: tabular-nums; color: var(--sb-red); }
.sb-list { display: flex; flex-direction: column; gap: 3.2%; flex: 1; }
.sb-tune p { margin: 0; }
.sb-no { font: 700 .62rem/1 var(--sb-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--sb-red); }
.sb-line { display: flex; align-items: baseline; gap: 8px; margin-top: 2px !important; }
.sb-t { font: 700 clamp(1rem, 1.9vw, 1.22rem)/1.2 var(--sb-serif); text-transform: uppercase; letter-spacing: .03em; }
.sb-y { font: italic .95rem/1 var(--sb-serif); color: #6A563E; font-variant-numeric: tabular-nums; }
.sb-s { font: italic .9rem/1.35 var(--sb-serif); color: #4A3A28; margin-top: 2px !important; }
.pg-end { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.pg-end p { margin: 0; }
.pe-t { font-family: var(--sb-display); font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.2; color: var(--sb-red); }
.pe-s { font: italic .92rem/1.4 var(--sb-serif); color: #4A3A28; max-width: 24ch; }

/* turning leaf */
.leaf { position: absolute; top: 0; bottom: 0; width: 50%; display: none; transform-style: preserve-3d; z-index: 3; pointer-events: none; }
.leaf.on-right { left: 50%; transform-origin: 0 50%; display: block; }
.leaf.on-left { left: 0; transform-origin: 100% 50%; display: block; }
.book-stage.is-single .leaf.on-right { left: 0; width: 100%; }
.leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf-back { transform: rotateY(180deg); }
.leaf.on-right .leaf-front { border-radius: 0 4px 4px 0; } .leaf.on-right .leaf-back { border-radius: 4px 0 0 4px; }
.leaf.on-left .leaf-front { border-radius: 4px 0 0 4px; } .leaf.on-left .leaf-back { border-radius: 0 4px 4px 0; }
.leaf.fwd.go { transition: transform .76s cubic-bezier(.45,.05,.35,1); transform: rotateY(-180deg); }
.leaf.bwd.go { transition: transform .76s cubic-bezier(.45,.05,.35,1); transform: rotateY(180deg); }
.leaf.back-in { transform: rotateY(-180deg); }
.leaf.back-in.go { transition: transform .76s cubic-bezier(.45,.05,.35,1); transform: rotateY(0deg); }
.book-stage.is-single .leaf-back { display: none; }
.leaf-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(60,40,10,.25), transparent 30%, transparent 75%, rgba(255,255,255,.15)); }

.book-nav { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.book-nav .stack-btn:disabled { opacity: .4; cursor: default; }
.songbook-bar .bar-head { margin-bottom: 26px; }
@media (max-width: 760px) { .cv-open { right: -10px; } }

/* Date boxes: fixed size on every tab so they line up */
.tab-date { width: 92px; min-width: 0; height: 58px; padding: 0; box-sizing: border-box; flex: 0 0 auto; }
.tab-md { font-size: 1.25rem; }
@media (max-width: 520px) { .tab-date { width: 72px; height: 50px; } .tab-md { font-size: 1.05rem; } }

/* Lake section: cool green-blue palette (aqua neon, teal booking card) */
.lake-deep { --aqua: #6FE3D2; --aqua-deep: #1F9E8E; --teal-glow: 0 0 2px #E8FFFB, 0 0 6px #3FD6C2, 0 0 14px #2BB8A6, 0 0 30px #1F9E8E; }
.lake-deep .neon-script { color: #E8FFFB; text-shadow: var(--teal-glow); }
.lake-deep .neon-caps { color: #D9FFF8; text-shadow: 0 0 2px #E8FFFB, 0 0 8px #3FD6C2, 0 0 18px rgba(31, 158, 142, 0.7); }
.lake-deep .checks li::before { background: var(--aqua); box-shadow: 0 0 6px var(--aqua), 0 0 12px rgba(63, 214, 194, 0.7); }
.lake-deep .checks strong { color: var(--aqua); }
.lake-deep .contact-line a { color: var(--aqua); }
.lake-deep .contact-line a:hover { color: #E8FFFB; }
#book .book-form { background: linear-gradient(180deg, rgba(10, 44, 46, 0.94), rgba(7, 32, 34, 0.94));
  box-shadow: inset 0 0 0 1px rgba(111, 227, 210, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(31, 158, 142, 0.15); }
.lake-deep .form-tab { border-bottom-color: rgba(111, 227, 210, 0.4); }
.lake-deep .form-tab span { color: #E8FFFB; text-shadow: 0 0 6px #3FD6C2; }
.lake-deep .form-tab .neon-icon { stroke: #E8FFFB; filter: drop-shadow(0 0 2px #3FD6C2) drop-shadow(0 0 8px #1F9E8E); }
.lake-deep .field label { color: var(--aqua); }
.lake-deep .field input, .lake-deep .field select, .lake-deep .field textarea { background: #061F21; border-color: rgba(111, 227, 210, 0.25); }
.lake-deep .field input:focus, .lake-deep .field select:focus, .lake-deep .field textarea:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(111, 227, 210, 0.22), 0 0 14px rgba(111, 227, 210, 0.25); }
.lake-deep .btn-flame { background: var(--aqua-deep); color: #F2FFFD; box-shadow: 0 0 14px rgba(63, 214, 194, 0.45); }
.lake-deep .btn-flame:hover { background: #26B5A3; color: #FFFFFF; box-shadow: 0 0 22px rgba(63, 214, 194, 0.7); }
.lake-deep .form-note { color: rgba(217, 255, 248, 0.6); }
.lake-deep .video-play { box-shadow: 0 0 0 3px #E8FFFB, 0 0 12px #3FD6C2, 0 0 28px rgba(31, 158, 142, 0.7); }
.lake-deep .video-play svg { filter: drop-shadow(0 0 6px #3FD6C2); }
#sound .sound-media { box-shadow: 0 0 0 2px rgba(111, 227, 210, 0.55), 0 0 22px rgba(63, 214, 194, 0.25), 0 24px 40px rgba(0, 0, 0, 0.45); }
.lake-deep .neon-blue { stroke: #E8FFFB; filter: drop-shadow(0 0 2px #3FD6C2) drop-shadow(0 0 8px #1F9E8E); }

/* Peel finishes cleanly: the strip rolls all the way to the hinge and a torn stub stays under the curl */
@keyframes peel-roll { from { clip-path: inset(0 0 0 0 round 6px); } to { clip-path: inset(0 calc(100% - 16px) 0 0 round 6px 0 0 6px); } }
@keyframes curl-roll { from { left: calc(100% - 30px); width: 36px; } to { left: -12px; width: 26px; } }
.win.is-pulled .tab { visibility: visible; pointer-events: none; transform: none; clip-path: inset(0 calc(100% - 16px) 0 0 round 6px 0 0 6px); }
.win.is-pulled .tab > span { visibility: hidden; }
.win.is-pulled .curl { opacity: 1; animation: none; }

/* Lake section dividers: aqua neon wave lines with a centre gem */
.lake-rule { width: min(320px, 100%); margin: 14px 0 20px; }
.lake-rule svg { display: block; width: 100%; height: auto; overflow: visible; }
.lake-rule path { fill: none; stroke: #6FE3D2; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(63, 214, 194, 0.8)); }
.lake-rule .lr-gem { fill: rgba(111, 227, 210, 0.18); stroke: #E8FFFB; }
.lake-rule circle { fill: #6FE3D2; filter: drop-shadow(0 0 3px rgba(63, 214, 194, 0.9)); }

/* Songbook polish: real 3D page turns, cover opens onto already-printed pages, soft shading while turning */
.book-spread { perspective: 2400px; filter: none; transition: opacity .35s ease; }
.book-spread::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px; box-shadow: 0 3px 4px rgba(0,0,0,.45), 0 26px 40px rgba(0,0,0,.55); pointer-events: none; }
.book-spread.is-revealing { opacity: 0; transition: none; }
.book-spread.is-hiding { opacity: 0; }
.book-stage { perspective: none; }
.book-cover { z-index: 5; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: left .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1), transform .62s cubic-bezier(.45,.05,.35,1) .3s, opacity .2s linear .78s; }
.book-cover.is-opening { left: 50%; width: 50%; transform: perspective(2400px) rotateY(-180deg); opacity: 0; }
.book-stage.is-single .book-cover.is-opening { left: 0; width: 100%; }
.book-cover.is-closing { opacity: 0; transition: none; }
.leaf { will-change: transform; }
.leaf.go { transition-duration: .8s !important; transition-timing-function: cubic-bezier(.42,.0,.25,1) !important; }
.leaf-face::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(40,25,5,.0), rgba(40,25,5,.35)); }
.leaf.on-right .leaf-back::before, .leaf.on-left .leaf-front::before { background: linear-gradient(270deg, rgba(40,25,5,0), rgba(40,25,5,.35)); }
.leaf.go .leaf-face::before { animation: leaf-shade .8s ease-in-out forwards; }
@keyframes leaf-shade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.page, .leaf-face { -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { .book-cover, .book-spread { transition: none; } }

/* Coaster moved under the Old Fashioned */
.prop-coaster { left: auto; right: calc(50% - 842px); top: 172px; width: 254px; height: 254px; }
.prop-coaster b { font-size: 1.7rem; } .prop-coaster i { font-size: 1.6rem; }
@media (max-width: 1360px) { .prop-coaster { left: auto; right: -172px; } }
@media (max-width: 1240px) { .prop-coaster { display: none; } }

/* Songbook polish v2: matching transform lists so the cover truly swings open on its spine,
   flatter perspective so turning pages stay inside the book, and a moving shadow on the page underneath */
.book-cover { transform: perspective(2400px) rotateY(0deg) rotate(-2deg); transform-style: preserve-3d; }
.book-cover:hover { transform: perspective(2400px) rotateY(0deg) rotate(-1deg) translateY(-3px); }
.book-cover.is-opening { transform: perspective(2400px) rotateY(-180deg) rotate(0deg) translateY(0); opacity: 1;
  transition: left .34s cubic-bezier(.4,0,.2,1), width .34s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.45,.05,.3,1) .28s; }
.book-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); transition: opacity .35s ease .28s; }
.book-cover.is-opening::after { opacity: 1; }
.book-spread { perspective: 4200px; }
.book-cover * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf-face { position: absolute; }
.page-right::after, .page-left::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2; }
.page-right::after { background: linear-gradient(90deg, rgba(40,25,5,.35), rgba(40,25,5,0) 60%); }
.page-left::after { background: linear-gradient(270deg, rgba(40,25,5,.35), rgba(40,25,5,0) 60%); }
.book-spread.turn-fwd .page-right::after, .book-spread.turn-bwd .page-left::after { animation: under-shade .8s ease-in-out forwards; }
@keyframes under-shade { 0% { opacity: .9; } 100% { opacity: 0; } }

/* Booking now leads the nav */
@media (max-width: 700px) { .nav-links .btn { margin-left: 0; } }

/* Songbook cover v3: a real two-sided cover.
   Closed it sits centred; opening slides it onto the right half, then it swings over the spine to the left.
   Its inside face is the left page, so the left page only appears when the cover lands. */
.book-cover { background: none !important; box-shadow: none !important; transform-style: preserve-3d; transform-origin: 0 50%;
  transform: perspective(2400px) rotateY(0deg) rotate(-2deg); opacity: 1 !important;
  transition: left .42s cubic-bezier(.4,0,.2,1), width .42s cubic-bezier(.4,0,.2,1), transform .42s cubic-bezier(.4,0,.2,1) !important; }
.book-cover::before, .book-cover::after { display: none !important; }
.book-cover * { backface-visibility: visible; -webkit-backface-visibility: visible; }
.cv-face, .cv-back { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; }
.cv-face { background: var(--cloth) 0 0 / 120px 120px, radial-gradient(ellipse 120% 90% at 40% 30%, #2E5240 0%, #1F3B2D 55%, #142A20 100%);
  box-shadow: inset 10px 0 12px -6px rgba(0,0,0,.6), inset -2px 0 0 rgba(255,255,255,.06), 0 2px 3px rgba(0,0,0,.5), 0 26px 40px rgba(0,0,0,.6); }
.cv-face::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 100% 0, rgba(200,180,140,.35) 0 14px, transparent 26px), radial-gradient(circle at 100% 100%, rgba(200,180,140,.3) 0 12px, transparent 24px),
    linear-gradient(90deg, rgba(0,0,0,.35) 0 14px, rgba(255,255,255,.05) 15px, transparent 18px); }
.cv-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.1)); transition: opacity .75s ease; }
.cv-back { transform: rotateY(180deg); border-radius: 4px 0 0 4px; box-shadow: inset -26px 0 30px -18px rgba(70,45,15,.55); overflow: hidden; }
.cv-back::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, rgba(40,25,5,.45), rgba(40,25,5,0) 70%); opacity: 1; transition: opacity .75s ease; }
.book-cover.is-slid { left: 50%; width: 50%; transform: perspective(2400px) rotateY(0deg) rotate(0deg); }
.book-stage.is-single .book-cover.is-slid { left: 0; width: 100%; }
.book-cover.is-flipping { left: 50%; width: 50%; transform: perspective(2400px) rotateY(-180deg) rotate(0deg);
  transition: transform .8s cubic-bezier(.42,0,.25,1) !important; }
.book-cover.is-flipping .cv-face::after { opacity: 1; }
.book-cover.is-flipping .cv-back::after { opacity: 0; }
.book-stage.is-single .book-cover.is-flipping { left: 0; width: 100%; }
.book-spread.hide-left .page-left { visibility: hidden; }
.book-spread.is-revealing { opacity: 1 !important; }
.book-cover.is-opening { transform: perspective(2400px) rotateY(0deg) rotate(-2deg); left: 25.5%; width: 49%; }

/* While the cover is still closed over the right half, the left half of the book doesn't exist yet:
   no board, no page, no shadow on the left until the cover lands there. */
.book-spread.hide-left::before { left: 50%; }
.book-spread.hide-left::after { left: 50%; }
.book-spread.hide-left .page-left { visibility: hidden; box-shadow: none; }
.book-cover .cv-back { box-shadow: inset -26px 0 30px -18px rgba(70,45,15,.55), -10px 0 0 #1A3527, -12px 3px 6px rgba(0,0,0,.4); }

/* Songbook sizing v4: the cover boards are bigger than the pages.
   The closed cover, the board under the open spread and the cover's inside are all exactly half the book,
   and the paper pages sit inset on top, so nothing grows or stretches when the book opens. */
.songbook-bar { --bd-y: 10px; --bd-x: 14px; }
.book-spread::before { inset: 0; border-radius: 6px 10px 10px 6px; background: var(--cloth) 0 0 / 120px 120px, radial-gradient(ellipse 120% 90% at 40% 30%, #2E5240 0%, #1F3B2D 55%, #142A20 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 3px 4px rgba(0,0,0,.45), 0 26px 40px rgba(0,0,0,.55); }
.book-spread::after { display: none; }
.book-spread { padding: var(--bd-y) var(--bd-x); box-sizing: border-box; }
.book-spread::before { z-index: 0; } .page { z-index: 1; }
.book-spread .spine { display: none; }
.leaf { top: var(--bd-y); bottom: var(--bd-y); }
.leaf.on-right { left: 50%; width: calc(50% - var(--bd-x)); }
.leaf.on-left { left: var(--bd-x); width: calc(50% - var(--bd-x)); }
.book-stage.is-single .leaf.on-right { left: var(--bd-x); width: calc(100% - 2 * var(--bd-x)); }
.book-cover, .book-cover.is-opening { left: 25%; width: 50%; }
.book-stage.is-single .book-cover { left: 0; width: 100%; }
.cv-face { border-radius: 6px 10px 10px 6px; }
.cv-back { background: var(--cloth) 0 0 / 120px 120px, radial-gradient(ellipse 120% 90% at 60% 30%, #2E5240 0%, #1F3B2D 55%, #142A20 100%);
  border-radius: 10px 6px 6px 10px; box-shadow: none !important; overflow: visible; }
.cv-back::after { display: none; }
.cv-back-page { position: absolute; top: var(--bd-y); bottom: var(--bd-y); left: var(--bd-x); right: 0; border-radius: 4px 0 0 4px;
  box-shadow: inset -26px 0 30px -18px rgba(70,45,15,.55); overflow: hidden; }
.cv-back-page::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(270deg, rgba(40,25,5,.45), rgba(40,25,5,0) 70%); opacity: 1; transition: opacity .75s ease; }
.book-cover.is-flipping .cv-back-page::before { opacity: 0; }
.book-spread.hide-left::before { left: 50%; border-radius: 0 10px 10px 0; }

/* Shading v2: one soft, continuous shadow per turn. It eases in, peaks as the page stands upright, and eases out;
   no layer jumps straight to dark. */
.leaf-face::after { background: linear-gradient(90deg, rgba(60,40,10,.10), transparent 25%, transparent 80%, rgba(255,255,255,.08)); }
.leaf-face::before { background: rgba(40,25,5,.22) !important; }
.leaf.go .leaf-face::before { animation: leaf-shade-soft .8s ease-in-out forwards; }
@keyframes leaf-shade-soft { 0% { opacity: 0; } 50% { opacity: .9; } 100% { opacity: 0; } }
.book-spread.turn-fwd .page-right::after, .book-spread.turn-bwd .page-left::after { animation: under-shade-soft .8s ease-in-out forwards; }
@keyframes under-shade-soft { 0% { opacity: 0; } 45% { opacity: .55; } 100% { opacity: 0; } }
.page-right::after { background: linear-gradient(90deg, rgba(40,25,5,.28), rgba(40,25,5,0) 55%); }
.page-left::after { background: linear-gradient(270deg, rgba(40,25,5,.28), rgba(40,25,5,0) 55%); }
.cv-face::after { background: rgba(0,0,0,.28); transition: opacity .4s ease-in; }
.cv-back-page::before { background: rgba(40,25,5,.22); opacity: .9; transition: opacity .45s ease-out .35s; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Theme: day (light mode) ----------
   Night is the default look. With data-theme="light" on <html> the same scenes play out by day:
   a blue sky with the sun and clouds, the painted sign in place of the neon, green pines, a sunlit lake,
   clear shallow water below the surface, and a bar in afternoon light. */

/* Toggle in the nav (both themes) */
.theme-toggle { order: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cream); cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.3s ease; }
.theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .tt-moon { display: none; }
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--tube); box-shadow: inset 0 0 0 2px var(--tube), 0 0 10px var(--neon), 0 0 22px rgba(255, 79, 46, 0.45); }
.theme-toggle:active { transform: rotate(-20deg); }
.nav > .brand { order: 1; } .nav > .nav-links { order: 2; margin-left: auto; }
@media (max-width: 700px) {
  .theme-toggle { order: 2; margin-left: auto; width: 38px; height: 38px; }
  .nav > .nav-links { order: 3; flex-basis: 100%; margin-left: 0; }
}
:root[data-theme="light"] .theme-toggle .tt-sun { display: none; }
:root[data-theme="light"] .theme-toggle .tt-moon { display: block; }
.hero-logo-day { display: none; }

/* A brief crossfade when someone flips the switch */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after { transition: background-color 0.5s ease, color 0.5s ease, fill 0.5s ease, stroke 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease !important; }

/* ---- Palette ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --sky: #F4EEE2; --sky-2: #CFE6F1; --deep: #1E3A2C;
  --cream: #1C2347;       /* main text is now dark ink */
  --muted: #4E5574;
  --rule: rgba(28, 35, 71, 0.14);
  --glow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
:root[data-theme="light"] body { background: var(--sky); }
:root[data-theme="light"] a:hover { color: #C23400; }
:root[data-theme="light"] :focus-visible { outline-color: #C23400; }

/* ---- Nav ---- */
:root[data-theme="light"] .site-header { background: rgba(250, 246, 238, 0.92); border-bottom-color: rgba(28, 35, 71, 0.12); box-shadow: 0 1px 10px rgba(28, 35, 71, 0.06); }
:root[data-theme="light"] .nav-links a:not(.btn):hover, :root[data-theme="light"] .nav-links a:not(.btn):focus-visible,
:root[data-theme="light"] .nav-social a:hover, :root[data-theme="light"] .theme-toggle:hover, :root[data-theme="light"] .theme-toggle:focus-visible {
  color: #C23400; box-shadow: inset 0 0 0 2px #C23400, 0 0 12px rgba(255, 79, 46, 0.22); }
:root[data-theme="light"] .nav-links a[aria-current="page"] { color: #C23400; box-shadow: inset 0 0 0 1.5px rgba(194, 52, 0, 0.55); }
:root[data-theme="light"] .nav-links .btn:hover, :root[data-theme="light"] .nav-links .btn:focus-visible { box-shadow: inset 0 0 0 2px #FFD9C4, 0 0 14px rgba(255, 79, 46, 0.35); }
:root[data-theme="light"] .btn-flame { box-shadow: 0 2px 8px rgba(194, 52, 0, 0.3); }
:root[data-theme="light"] .btn-ghost:hover { color: #C23400; box-shadow: inset 0 0 0 2px #C23400; }

/* ---- Hero by day ---- */
:root[data-theme="light"] .hero { background: linear-gradient(180deg, #3D8ED6 0%, #62A9E3 30%, #96CBEE 58%, #CDE6F2 80%, #EFE6D0 100%); }
:root[data-theme="light"] .stars, :root[data-theme="light"] .fireflies { display: none; }
/* clouds drifting where the Milky Way was */
:root[data-theme="light"] .milky { left: -10%; top: 40px; width: 120%; height: 60%; transform: none; opacity: 0.95;
  background:
    radial-gradient(ellipse 9% 3.2% at 14% 22%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 6% 2.6% at 18% 19%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 5% 2% at 10% 24%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 11% 3.4% at 74% 46%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 7% 2.8% at 79% 42%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 8% 2.4% at 36% 64%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 6% 2% at 90% 70%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 70%); }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="light"] .milky { animation: clouds 90s ease-in-out infinite alternate; } }
@keyframes clouds { from { transform: translateX(-3%); } to { transform: translateX(4%); } }
/* the moon becomes the sun */
:root[data-theme="light"] .moon { width: 72px; height: 72px; top: 84px; background: radial-gradient(circle at 50% 50%, #FFFDF2 0 46%, #FFE9A8 70%, #FFD873 100%);
  box-shadow: 0 0 22px 8px rgba(255, 236, 170, 0.75), 0 0 70px 26px rgba(255, 240, 200, 0.45), 0 0 180px 70px rgba(255, 250, 230, 0.3); }
@media (max-width: 700px) { :root[data-theme="light"] .moon { width: 46px; height: 46px; top: 46px; } }
:root[data-theme="light"] .sky-glow { background: radial-gradient(ellipse 46% 26% at 50% 20%, rgba(255, 255, 255, 0.35), transparent 70%); animation: none !important; }
:root[data-theme="light"] .goose path { fill: #283038; } :root[data-theme="light"] .goose .g-wing-far { fill: #3A444E; }
/* the painted sign instead of the neon */
:root[data-theme="light"] .hero-logo { display: none; }
:root[data-theme="light"] .hero-logo-day { display: block; width: 100%; max-width: 560px; height: auto; filter: drop-shadow(7px 7px 0 #14182E); }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="light"] .hero-logo-day { animation: day-in 1s ease-out 2.2s both; } }
@keyframes day-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
:root[data-theme="light"] .arrow-body { fill: #2A1A3E; }
:root[data-theme="light"] .arrow-tube { stroke: #FFE7D6; filter: drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 5px rgba(255, 79, 46, 0.6)); }
:root[data-theme="light"] .arrow-text { fill: #FFF1E8; filter: drop-shadow(0 0 2px var(--neon)); }
:root[data-theme="light"] .arrow-sign { filter: drop-shadow(0 6px 10px rgba(20, 30, 60, 0.25)); }
:root[data-theme="light"] .hero-tagline { color: #1C2347; font-weight: 700; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
:root[data-theme="light"] .lead { color: #1C2A46; opacity: 1; }
:root[data-theme="light"] .hero .btn-ghost { background: rgba(255, 255, 255, 0.35); }
:root[data-theme="light"] .next-label { color: #C23400; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
:root[data-theme="light"] .next-show strong { color: #1C2347; text-shadow: none; }
/* green pines and blue hills */
:root[data-theme="light"] .layer-back path { fill: #7FA2AE; } :root[data-theme="light"] .layer-back .skirt { background: #7FA2AE; }
:root[data-theme="light"] .layer-mid path { fill: #34604A; } :root[data-theme="light"] .layer-mid .skirt { background: #34604A; }
:root[data-theme="light"] .layer-sides .skirt { background: #1C3A2A; }
:root[data-theme="light"] .big-pines path { fill: #1C3A2A; }
:root[data-theme="light"] .owl { display: none; }
/* sunlit lake */
:root[data-theme="light"] .lake { background: linear-gradient(180deg, #8EC0E2 0%, #6FAAD6 22%, #5B9CCB 60%, #5196C4 100%); }
:root[data-theme="light"] .shore-reflect { opacity: 0.6; }
:root[data-theme="light"] .shore-reflect .r-far { fill: #7FA2AE; }
:root[data-theme="light"] .shore-reflect .r-head { fill: #2C5440; }
:root[data-theme="light"] .sheen { background: radial-gradient(ellipse 30% 22% at 76% 30%, rgba(255, 255, 255, 0.28), transparent 70%), radial-gradient(ellipse 24% 16% at 30% 64%, rgba(255, 255, 255, 0.16), transparent 70%); }
:root[data-theme="light"] .boat .hull path, :root[data-theme="light"] .boat .fisher path, :root[data-theme="light"] .boat .reel, :root[data-theme="light"] .lantern-cap { fill: #23292E; }
:root[data-theme="light"] .rod, :root[data-theme="light"] .lantern-frame { stroke: #23292E; }
:root[data-theme="light"] .boat .boat-reflect path { fill: rgba(20, 40, 60, 0.3); }
:root[data-theme="light"] .line { stroke: rgba(30, 40, 50, 0.45); }
:root[data-theme="light"] .boat .gunwale { stroke: rgba(255, 255, 255, 0.28); }
:root[data-theme="light"] .boat .wake path { stroke: rgba(255, 255, 255, 0.6); }
:root[data-theme="light"] .boat .line-entry { stroke: rgba(255, 255, 255, 0.7); }
:root[data-theme="light"] .lantern-glow { display: none; }
:root[data-theme="light"] .lantern-glass { fill: #E9E2C8; filter: none; animation: none; opacity: 0.9; }
:root[data-theme="light"] .boat .spl-ring { stroke: rgba(255, 255, 255, 0.85); }
:root[data-theme="light"] .boat .spl-crown { fill: rgba(255, 255, 255, 0.75); }
:root[data-theme="light"] .boat .spl-drops circle { fill: rgba(255, 255, 255, 0.95); }

/* ---- Under the lake by day: clear, sunlit shallows going green toward the bottom ---- */
:root[data-theme="light"] .lake-deep {
  --cream: #0F2C2E; --muted: #2E5755; --rule: rgba(15, 44, 46, 0.16);
  background:
    radial-gradient(ellipse 70% 40% at 30% 30%, rgba(255, 255, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 35% at 75% 65%, rgba(120, 190, 160, 0.14), transparent 70%),
    linear-gradient(180deg, #5196C4 0, #5196C4 40px, #79B7D3 110px, #A2D3DC 14%, #A3D5D4 40%, #8EC6BE 64%, #6CA899 84%, #46806E 100%); }
:root[data-theme="light"] .waterline .wl-line { stroke: rgba(255, 255, 255, 0.95); filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)); }
:root[data-theme="light"] #wlSky stop { stop-color: #CFEFF6; }
:root[data-theme="light"] #wlGlow stop { stop-color: #E6FAFC; }
:root[data-theme="light"] .lake-rays i { background: linear-gradient(180deg, rgba(255, 255, 240, 0.55), rgba(255, 255, 240, 0.2) 50%, transparent 90%); }
:root[data-theme="light"] .fish { color: rgba(20, 60, 60, 0.75); }
:root[data-theme="light"] .lake-deep h2 { color: #0D2A2D; }
:root[data-theme="light"] .lake-deep .neon-script { color: #0F7F72; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 255, 255, 0.5); }
:root[data-theme="light"] .lake-deep .neon-caps { color: #0E5C55; font-weight: 700; text-shadow: none; }
:root[data-theme="light"] .lake-deep .checks li::before { background: #14907F; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
:root[data-theme="light"] .lake-deep .checks strong { color: #0B6B60; }
:root[data-theme="light"] .lake-deep .contact-line a { color: #0B6B60; }
:root[data-theme="light"] .lake-rule path { stroke: #14907F; filter: none; }
:root[data-theme="light"] .lake-rule .lr-gem { fill: rgba(255, 255, 255, 0.6); stroke: #0B6B60; }
:root[data-theme="light"] .lake-rule circle { fill: #14907F; filter: none; }
/* video card stays dark so the play button reads */
:root[data-theme="light"] #sound .sound-media { --cream: #EDE3CF; box-shadow: 0 18px 40px rgba(15, 60, 60, 0.28); }
/* booking card: a pale card with teal edges */
:root[data-theme="light"] #book .book-form { background: linear-gradient(180deg, rgba(250, 255, 253, 0.94), rgba(236, 248, 245, 0.94));
  box-shadow: inset 0 0 0 1px rgba(20, 144, 127, 0.45), 0 18px 40px rgba(15, 60, 60, 0.22); }
:root[data-theme="light"] .lake-deep .form-tab { border-bottom-color: rgba(20, 144, 127, 0.35); }
:root[data-theme="light"] .lake-deep .form-tab span { color: #0D2A2D; text-shadow: none; }
:root[data-theme="light"] .lake-deep .field label { color: #0B6B60; }
:root[data-theme="light"] .lake-deep .field input, :root[data-theme="light"] .lake-deep .field select, :root[data-theme="light"] .lake-deep .field textarea { background: #FFFFFF; color: #0F2C2E; border-color: rgba(15, 92, 85, 0.3); }
:root[data-theme="light"] .field input::placeholder, :root[data-theme="light"] .field textarea::placeholder { color: rgba(15, 44, 46, 0.45); }
:root[data-theme="light"] .lake-deep .field input:focus, :root[data-theme="light"] .lake-deep .field select:focus, :root[data-theme="light"] .lake-deep .field textarea:focus { border-color: #14907F; box-shadow: 0 0 0 3px rgba(20, 144, 127, 0.2); }
:root[data-theme="light"] .lake-deep .btn-flame { box-shadow: 0 2px 8px rgba(15, 60, 60, 0.25); }
:root[data-theme="light"] .lake-deep .form-note, :root[data-theme="light"] .lake-deep .form-error { color: #2E5755; }
/* weeds, rocks and junk in greens */
:root[data-theme="light"] .lake-weeds .wl-back path { fill: #5E9A80; opacity: 0.6; }
:root[data-theme="light"] .lake-weeds .wl-mid path { fill: #3A7058; opacity: 0.95; }
:root[data-theme="light"] .lake-weeds .wl-front path, :root[data-theme="light"] .lake-weeds .silt, :root[data-theme="light"] .lake-weeds .rocks { fill: #1E3A2C; }
:root[data-theme="light"] .lake-weeds .rocks-mid { fill: #33604A; } :root[data-theme="light"] .lake-weeds .rocks-near { fill: #22402F; }
:root[data-theme="light"] .lake-weeds .rocks-lit { stroke: rgba(230, 255, 240, 0.3); }
:root[data-theme="light"] .lake-weeds .pebbles { fill: #2A4C3A; }
:root[data-theme="light"] .lake-weeds .junk-mid > * { fill: #2E5743; }
:root[data-theme="light"] .lake-weeds .junk-near > * { fill: #22402F; }
:root[data-theme="light"] .lake-weeds .junk .hole { fill: #4E8A70; }
:root[data-theme="light"] .lake-weeds .junk-near .hole { fill: #33604A; }
:root[data-theme="light"] .lake-weeds .junk .glint { stroke: rgba(230, 255, 240, 0.4); }
:root[data-theme="light"] .lake-weeds .junk .tread { stroke: #4E8A70; }

/* ---- Footer: green pines against a pale sky ---- */
:root[data-theme="light"] .site-footer { --cream: #EDE3CF; --muted: #B8CBBE; --rule: rgba(237, 227, 207, 0.16); background: #CFE6F1; }
:root[data-theme="light"] .footer-inner { background: var(--deep); }
:root[data-theme="light"] .lake-page .site-footer, :root[data-theme="light"] .lake-page .footer-inner { background: #1E3A2C; }
:root[data-theme="light"] .footer-base a:hover, :root[data-theme="light"] .site-footer a:hover { color: var(--bulb); }

/* ---- The bar in afternoon light: lighter oak, sun through the front window ---- */
:root[data-theme="light"] .bar-page { background: #E3CFAE; }
:root[data-theme="light"] .bar-top { background:
    radial-gradient(ellipse 60% 40% at 50% -4%, rgba(255, 250, 235, 0.5), transparent 72%),
    radial-gradient(ellipse 130% 95% at 50% 35%, transparent 55%, rgba(70, 35, 10, 0.3) 100%),
    linear-gradient(118deg, transparent 18%, rgba(255, 248, 228, 0.16) 26%, rgba(255, 248, 228, 0.16) 34%, transparent 40%, transparent 58%, rgba(255, 248, 228, 0.12) 64%, rgba(255, 248, 228, 0.12) 71%, transparent 76%),
    repeating-linear-gradient(180deg, transparent 0 186px, rgba(70, 35, 10, 0.32) 186px 188px, rgba(255, 240, 210, 0.18) 188px 189px),
    linear-gradient(rgba(184, 136, 86, 0.38), rgba(170, 122, 72, 0.3)),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%273000%27%20height%3D%27940%27%3E%3Cfilter%20id%3D%27w%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.0035%200.11%27%20numOctaves%3D%274%27%20seed%3D%274%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200.10%20%200%200%200%200%200.05%20%200%200%200%200%200.02%20%200%200%200%201.1%20-0.35%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23w%29%27/%3E%3C/svg%3E") 0 0 / 3000px 940px,
    linear-gradient(180deg, #C1915D 0%, #AE7C49 55%, #9A693A 100%); }
:root[data-theme="light"] .bar-top::after { background:
    linear-gradient(180deg, #F0D08E 0 2px, #A8803C 2px 4px, transparent 4px),
    radial-gradient(ellipse 100% 140% at 50% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #7A2A2C 4px, #5A1C1F 70%, #3E1114 100%);
  box-shadow: 0 -8px 20px rgba(70, 35, 10, 0.3); }
:root[data-theme="light"] .bar-head h1 { color: #2A1709; text-shadow: 0 1px 0 rgba(255, 236, 200, 0.45); }
:root[data-theme="light"] .bar-sub { color: #3A2412; }
:root[data-theme="light"] .bar-kicker a { color: #8E2318; }
:root[data-theme="light"] .bar-top .stack-btn { background: rgba(255, 247, 232, 0.78); color: #2A1709; box-shadow: inset 0 0 0 1.5px rgba(42, 23, 9, 0.35); }
:root[data-theme="light"] .bar-top .stack-btn:hover { color: #8E2318; box-shadow: inset 0 0 0 2px #8E2318; }
:root[data-theme="light"] .bar-top .stack-count { color: #3A2412; }
:root[data-theme="light"] .bar-top .ticket.key, :root[data-theme="light"] .bar-top .show-ticket { box-shadow: 0 2px 3px rgba(60, 30, 10, 0.3), 0 18px 30px rgba(60, 30, 10, 0.32); }

/* Lake bed gradients and inherited text colours by day */
:root[data-theme="light"] #bedFar stop:nth-child(1) { stop-color: #6AA68A; } :root[data-theme="light"] #bedFar stop:nth-child(2) { stop-color: #558F75; } :root[data-theme="light"] #bedFar stop:nth-child(3) { stop-color: #477D64; }
:root[data-theme="light"] #bedMid stop:nth-child(1) { stop-color: #477F66; } :root[data-theme="light"] #bedMid stop:nth-child(2) { stop-color: #376B53; } :root[data-theme="light"] #bedMid stop:nth-child(3) { stop-color: #2D5B46; }
:root[data-theme="light"] #bedNear stop:nth-child(1) { stop-color: #2E5644; } :root[data-theme="light"] #bedNear stop:nth-child(2) { stop-color: #254836; } :root[data-theme="light"] #bedNear stop:nth-child(3) { stop-color: #1E3A2C; }
:root[data-theme="light"] .site-footer, :root[data-theme="light"] .lake-deep { color: var(--cream); }
:root[data-theme="light"] .sample-note { --cream: #F6ECE0; color: var(--cream); }

/* Daytime: plain big bold "Live swing band" in place of the neon marquee */
.day-band { display: none; }
:root[data-theme="light"] .hero .arrow-sign { display: none; }
:root[data-theme="light"] .day-band { display: block; margin: 4px 0 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.8rem, 7.6vw, 4.2rem); line-height: 1; letter-spacing: 0.07em; color: #1C2347; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="light"] .day-band { animation: day-in 0.9s ease-out 2.5s both; } }

/* No lantern by day */
:root[data-theme="light"] .boat .lantern { display: none; }

/* Layered clouds drifting at different speeds (night: hidden) */
.clouds, .sun-rays, .sun-flare, .glints, .caustics { display: none; }
:root[data-theme="light"] .milky { display: none; }
:root[data-theme="light"] .clouds { display: block; position: absolute; inset: 0 0 auto 0; height: 760px; z-index: 0; pointer-events: none; overflow: hidden; }
/* Misty clouds: soft, see-through banks of haze that break into wisps, with no hard outline */
.mist-cloud { position: absolute; max-width: 60vw; background-size: 100% 100%; background-repeat: no-repeat; filter: blur(2px);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.75) 28%, rgba(0, 0, 0, 0.3) 52%, transparent 74%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.75) 28%, rgba(0, 0, 0, 0.3) 52%, transparent 74%); }
.mist-cloud.mc0 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='320'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0045%200.016'%20numOctaves='4'%20seed='41'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%202.3%20-0.6'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23m%29'/%3E%3C/svg%3E"); }
.mist-cloud.mc1 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='320'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0045%200.016'%20numOctaves='4'%20seed='56'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%202.3%20-0.6'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23m%29'/%3E%3C/svg%3E"); }
.mist-cloud.mc2 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='320'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0045%200.016'%20numOctaves='4'%20seed='63'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%202.3%20-0.6'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23m%29'/%3E%3C/svg%3E"); }
.mist-cloud.mc3 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='320'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0045%200.016'%20numOctaves='4'%20seed='78'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%202.3%20-0.6'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23m%29'/%3E%3C/svg%3E"); }
.mist-cloud.mc4 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1500'%20height='330'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0032%200.017'%20numOctaves='4'%20seed='84'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%202.3%20-0.6'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23m%29'/%3E%3C/svg%3E"); }
.mist-cloud.mc5 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1500'%20height='330'%3E%3Cfilter%20id='m'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0032%200.017'%20numOctaves='4'%20seed='97'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%202.3%20-0.6'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23m%29'/%3E%3C/svg%3E"); }

.mist-cloud.mc4, .mist-cloud.mc5 { max-width: 85vw; }
@media (prefers-reduced-motion: no-preference) { .mist-cloud { animation: cloud-drift var(--cd, 160s) ease-in-out var(--cdl, 0s) infinite alternate; } }
@keyframes cloud-drift { from { transform: translateX(-7vw); } to { transform: translateX(7vw); } }
@media (max-width: 700px) { .mist-cloud { max-width: 80vw; } .mist-cloud.mc4, .mist-cloud.mc5 { display: none; } }

/* Sun: slow-turning rays, a wide bloom and a faint lens flare toward the sign */
:root[data-theme="light"] .sun-rays { display: block; position: absolute; z-index: 0; pointer-events: none; width: 1100px; height: 1100px; top: -430px; right: calc(10% + 36px - 550px);
  background: repeating-conic-gradient(from 0deg, rgba(255, 252, 232, 0.2) 0deg 2.5deg, transparent 2.5deg 9deg, rgba(255, 252, 232, 0.1) 9deg 10.5deg, transparent 10.5deg 19deg),
    radial-gradient(circle, rgba(255, 250, 225, 0.55) 0 4%, rgba(255, 246, 210, 0.22) 12%, transparent 40%);
  -webkit-mask-image: radial-gradient(circle, #000 0 6%, rgba(0, 0, 0, 0.5) 24%, transparent 50%); mask-image: radial-gradient(circle, #000 0 6%, rgba(0, 0, 0, 0.5) 24%, transparent 50%); }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="light"] .sun-rays { animation: sun-turn 180s linear infinite; } }
@keyframes sun-turn { to { transform: rotate(360deg); } }
@media (max-width: 700px) { :root[data-theme="light"] .sun-rays { width: 640px; height: 640px; top: -251px; right: calc(7% + 23px - 320px); } }
:root[data-theme="light"] .sun-flare { display: block; position: absolute; z-index: 1; pointer-events: none; top: 120px; right: calc(10% + 36px); width: 0; height: 0; }
.sun-flare i { position: absolute; border-radius: 50%; transform: translate(50%, -50%); }
.sun-flare i:nth-child(1) { right: 150px; top: 60px; width: 26px; height: 26px; background: radial-gradient(circle, rgba(255, 255, 255, 0.0) 40%, rgba(255, 240, 200, 0.35) 70%, transparent 72%); }
.sun-flare i:nth-child(2) { right: 260px; top: 105px; width: 60px; height: 60px; background: radial-gradient(circle, rgba(200, 235, 255, 0.18), transparent 70%); }
.sun-flare i:nth-child(3) { right: 340px; top: 140px; width: 12px; height: 12px; background: rgba(255, 245, 215, 0.35); filter: blur(1px); }
.sun-flare i:nth-child(4) { right: 470px; top: 196px; width: 110px; height: 110px; background: radial-gradient(circle, transparent 55%, rgba(180, 220, 255, 0.16) 66%, transparent 72%); }
@media (max-width: 700px) { :root[data-theme="light"] .sun-flare { top: 69px; right: calc(7% + 23px); transform: scale(0.55); transform-origin: 100% 0; } }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="light"] .sun-flare { animation: flare 9s ease-in-out infinite alternate; } }
@keyframes flare { from { opacity: 0.55; } to { opacity: 1; } }
:root[data-theme="light"] .moon { z-index: 0; }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="light"] .moon { animation: descend 3s cubic-bezier(0.55, 0, 0.15, 1) 0.2s both, sun-pulse 6s ease-in-out 3.2s infinite alternate; } }
@keyframes sun-pulse { from { filter: brightness(1); } to { filter: brightness(1.06) saturate(1.1); } }

/* Sun glints dancing on the lake: tiny four-point sparkles that wink on and off */
:root[data-theme="light"] .glints { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 100%); }
.glints i { position: absolute; width: var(--gs, 14px); height: var(--gs, 14px); margin: calc(var(--gs, 14px) / -2) 0 0 calc(var(--gs, 14px) / -2); opacity: 0;
  background: radial-gradient(circle, #FFFFFF 0 1.4px, rgba(255, 255, 255, 0.6) 2px, transparent 3.5px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent) center / 100% 1.4px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.9), transparent) center / 1.4px 64% no-repeat;
  filter: drop-shadow(0 0 2px rgba(255, 255, 240, 0.9)); }
@media (prefers-reduced-motion: no-preference) { .glints i { animation: glint var(--gd, 2.4s) ease-in-out var(--gl, 0s) infinite; } }
@media (prefers-reduced-motion: reduce) { .glints i:nth-child(3n) { opacity: 0.7; transform: scale(0.8); } }
@keyframes glint { 0%, 55%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 72% { opacity: 1; transform: scale(1) rotate(12deg); } 86% { opacity: 0.3; transform: scale(0.5) rotate(20deg); } }
/* a brighter, moving shimmer across the water */
:root[data-theme="light"] .sheen { background:
    radial-gradient(ellipse 26% 26% at 82% 18%, rgba(255, 255, 245, 0.42), transparent 70%),
    radial-gradient(ellipse 34% 20% at 66% 48%, rgba(255, 255, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 24% 16% at 28% 66%, rgba(255, 255, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 18% 12% at 48% 86%, rgba(255, 255, 255, 0.10), transparent 70%); }

/* Underwater by day: dancing caustic light near the surface and brighter, flickering rays */
:root[data-theme="light"] .caustics { display: block; position: absolute; left: 0; right: 0; top: 30px; height: 1500px; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0.18) 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0.18) 70%, transparent 100%); }
.caustics::before, .caustics::after { content: ""; position: absolute; inset: -600px; }
.caustics::before { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%3E%3Cfilter%20id='c'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='turbulence'%20baseFrequency='0.012'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%200.97%20%200%200%200%201%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='1%200.4%200.05%200%200%200%200%200%200%200'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23c%29'/%3E%3C/svg%3E") 0 0 / 600px 600px; opacity: 0.34; }
.caustics::after { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='500'%20height='500'%3E%3Cfilter%20id='c'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='turbulence'%20baseFrequency='0.016'%20numOctaves='2'%20seed='12'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%200.97%20%200%200%200%201%200'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='table'%20tableValues='1%200.4%200.05%200%200%200%200%200%200%200'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23c%29'/%3E%3C/svg%3E") 0 0 / 500px 500px; opacity: 0.26; }
@media (prefers-reduced-motion: no-preference) {
  .caustics::before { animation: caustic-a 38s linear infinite; }
  .caustics::after { animation: caustic-b 27s linear infinite; }
  :root[data-theme="light"] .lake-rays { animation: rays-flicker 5s ease-in-out infinite alternate; }
}
@keyframes caustic-a { from { transform: translate(0, 0); } to { transform: translate(600px, 300px); } }
@keyframes caustic-b { from { transform: translate(0, 0); } to { transform: translate(-500px, 250px); } }
@keyframes rays-flicker { 0% { opacity: 0.75; } 40% { opacity: 1; } 60% { opacity: 0.85; } 100% { opacity: 1; } }
:root[data-theme="light"] .lake-rays i { filter: blur(16px); background: linear-gradient(180deg, rgba(255, 255, 240, 0.62), rgba(255, 255, 240, 0.24) 45%, transparent 88%); }
:root[data-theme="light"] .waterline .wl-line { stroke-width: 1.8; }

/* Sun, simplified to fit the flat illustration: a crisp pale-gold disc with flat, soft halo rings; no rotating rays or lens flare */
:root[data-theme="light"] .sun-rays, :root[data-theme="light"] .sun-flare { display: none; }
:root[data-theme="light"] .moon { background: #FFE9A6; filter: none;
  box-shadow: 0 0 0 12px rgba(255, 246, 214, 0.38), 0 0 0 28px rgba(255, 246, 214, 0.2), 0 0 0 48px rgba(255, 250, 230, 0.1); }
@media (max-width: 700px) { :root[data-theme="light"] .moon { box-shadow: 0 0 0 8px rgba(255, 246, 214, 0.38), 0 0 0 18px rgba(255, 246, 214, 0.2), 0 0 0 30px rgba(255, 250, 230, 0.1); } }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="light"] .moon { animation: descend 3s cubic-bezier(0.55, 0, 0.15, 1) 0.2s both; } }

/* Sun v4: soft and realistic to match the misty clouds: a white-hot core that melts into a warm, hazy glow; no rings or rays */
:root[data-theme="light"] .moon { width: 92px; height: 92px; top: 74px; filter: blur(0.6px);
  background: radial-gradient(circle, #FFFFFF 0 34%, #FFFBEA 46%, rgba(255, 244, 205, 0.85) 58%, rgba(255, 238, 190, 0) 72%);
  box-shadow: 0 0 40px 18px rgba(255, 252, 235, 0.7), 0 0 110px 50px rgba(255, 246, 215, 0.42), 0 0 240px 120px rgba(255, 248, 225, 0.22), 0 0 420px 200px rgba(255, 250, 235, 0.1); }
@media (max-width: 700px) { :root[data-theme="light"] .moon { width: 60px; height: 60px; top: 40px;
  box-shadow: 0 0 26px 12px rgba(255, 252, 235, 0.7), 0 0 70px 32px rgba(255, 246, 215, 0.42), 0 0 160px 80px rgba(255, 248, 225, 0.2); } }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="light"] .moon { animation: descend 3s cubic-bezier(0.55, 0, 0.15, 1) 0.2s both, sun-breathe 7s ease-in-out 3.2s infinite alternate; } }
@keyframes sun-breathe { from { opacity: 0.94; } to { opacity: 1; } }
:root[data-theme="light"] .sky-glow { background: radial-gradient(ellipse 34% 30% at 88% 12%, rgba(255, 252, 238, 0.4), transparent 70%), radial-gradient(ellipse 46% 26% at 50% 20%, rgba(255, 255, 255, 0.25), transparent 70%); }
:root[data-theme="light"] .moon { filter: blur(1.5px); background: radial-gradient(circle, #FFFFFF 0 48%, #FFFCEE 68%, #FFF4D2 100%);
  box-shadow: 0 0 14px 6px rgba(255, 248, 222, 0.95), 0 0 48px 22px rgba(255, 250, 230, 0.6), 0 0 120px 56px rgba(255, 246, 215, 0.36), 0 0 250px 120px rgba(255, 248, 225, 0.2), 0 0 420px 200px rgba(255, 250, 235, 0.09); }
@media (max-width: 700px) { :root[data-theme="light"] .moon { box-shadow: 0 0 10px 4px rgba(255, 248, 222, 0.95), 0 0 32px 15px rgba(255, 250, 230, 0.6), 0 0 80px 38px rgba(255, 246, 215, 0.34), 0 0 170px 80px rgba(255, 248, 225, 0.18); } }

/* Very soft sunbeams fanning down from the sun across sky, trees and lake, plus a warm wash of light from the top right */
.sun-beams { display: none; }
:root[data-theme="light"] .sun-beams { --sx: calc(90% - 46px); --sy: 120px; display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen; overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at var(--sx) var(--sy), rgba(255, 246, 220, 0.16), rgba(255, 246, 220, 0.05) 55%, transparent 80%); }
.sun-beams i { position: absolute; inset: 0; filter: blur(10px);
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), transparent 0 60px, #000 220px, rgba(0, 0, 0, 0.55) 900px, transparent 1500px);
  mask-image: radial-gradient(circle at var(--sx) var(--sy), transparent 0 60px, #000 220px, rgba(0, 0, 0, 0.55) 900px, transparent 1500px); }
.sun-beams i:nth-child(1) { background: conic-gradient(from 0deg at var(--sx) var(--sy), transparent 0deg 158deg, rgba(255, 248, 225, 0) 158.0deg, rgba(255, 248, 225, 0.14) 161.7deg, rgba(255, 248, 225, 0) 165.3deg, rgba(255, 248, 225, 0) 176.2deg, rgba(255, 248, 225, 0.11) 178.7deg, rgba(255, 248, 225, 0) 181.2deg, rgba(255, 248, 225, 0) 186.3deg, rgba(255, 248, 225, 0.14) 189.3deg, rgba(255, 248, 225, 0) 192.3deg, rgba(255, 248, 225, 0) 204.5deg, rgba(255, 248, 225, 0.14) 208.7deg, rgba(255, 248, 225, 0) 212.8deg, rgba(255, 248, 225, 0) 222.8deg, rgba(255, 248, 225, 0.09) 225.3deg, rgba(255, 248, 225, 0) 227.8deg, rgba(255, 248, 225, 0) 236.8deg, rgba(255, 248, 225, 0.15) 241.9deg, rgba(255, 248, 225, 0) 247.1deg, rgba(255, 248, 225, 0) 252.6deg, rgba(255, 248, 225, 0.10) 254.9deg, rgba(255, 248, 225, 0) 257.2deg, rgba(255, 248, 225, 0) 268.3deg, rgba(255, 248, 225, 0.07) 271.8deg, rgba(255, 248, 225, 0) 275.2deg, rgba(255, 248, 225, 0) 287.7deg, rgba(255, 248, 225, 0.12) 290.0deg, rgba(255, 248, 225, 0) 292.2deg, transparent 300deg 360deg); }
.sun-beams i:nth-child(2) { background: conic-gradient(from 0deg at var(--sx) var(--sy), transparent 0deg 165deg, rgba(255, 252, 238, 0) 165.0deg, rgba(255, 252, 238, 0.11) 167.1deg, rgba(255, 252, 238, 0) 169.2deg, rgba(255, 252, 238, 0) 182.0deg, rgba(255, 252, 238, 0.08) 183.6deg, rgba(255, 252, 238, 0) 185.2deg, rgba(255, 252, 238, 0) 199.8deg, rgba(255, 252, 238, 0.07) 201.6deg, rgba(255, 252, 238, 0) 203.4deg, rgba(255, 252, 238, 0) 223.1deg, rgba(255, 252, 238, 0.08) 225.0deg, rgba(255, 252, 238, 0) 226.9deg, rgba(255, 252, 238, 0) 238.4deg, rgba(255, 252, 238, 0.10) 241.4deg, rgba(255, 252, 238, 0) 244.4deg, rgba(255, 252, 238, 0) 257.0deg, rgba(255, 252, 238, 0.09) 258.8deg, rgba(255, 252, 238, 0) 260.7deg, rgba(255, 252, 238, 0) 277.7deg, rgba(255, 252, 238, 0.08) 279.1deg, rgba(255, 252, 238, 0) 280.4deg, rgba(255, 252, 238, 0) 294.2deg, rgba(255, 252, 238, 0.07) 296.8deg, rgba(255, 252, 238, 0) 299.3deg, transparent 295deg 360deg); filter: blur(5px); }
@media (prefers-reduced-motion: no-preference) {
  .sun-beams i:nth-child(1) { animation: beams-a 9s ease-in-out infinite alternate; }
  .sun-beams i:nth-child(2) { animation: beams-b 13s ease-in-out infinite alternate; }
}
@keyframes beams-a { from { opacity: 0.7; } to { opacity: 1; } }
@keyframes beams-b { from { opacity: 1; } to { opacity: 0.55; } }
@media (max-width: 700px) { :root[data-theme="light"] .sun-beams { --sx: calc(93% - 30px); --sy: 70px; opacity: 0.55; } }

/* About: band photos beside the bio, live video in its own row below */
.band-photos { flex: 1 1 480px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.band-photo { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.band-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(111, 227, 210, 0.55), 0 0 22px rgba(63, 214, 194, 0.22), 0 24px 40px rgba(0, 0, 0, 0.45); }
.bp-1 img { object-position: 42% 30%; transform: rotate(-1.6deg); }
.bp-2 { margin-top: 56px; } .bp-2 img { object-position: 50% 50%; transform: rotate(1.4deg); }
.band-photo figcaption { display: flex; flex-direction: column; gap: 2px; padding-left: 4px; }
.band-photo figcaption strong { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; line-height: 1.2; }
.band-photo figcaption span { font-size: 0.82rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--aqua, #6FE3D2); }
.listen-row { margin-top: 72px; }
.listen-row .sound-media { width: 100%; max-width: 880px; margin: 0 auto; }
@media (max-width: 700px) { .band-photos { gap: 14px; } .bp-2 { margin-top: 32px; } .listen-row { margin-top: 48px; } .band-photo figcaption strong { font-size: 0.95rem; } }
:root[data-theme="light"] .band-photo img { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 18px 36px rgba(15, 60, 60, 0.28); }
:root[data-theme="light"] .band-photo figcaption span { color: #0B6B60; }

/* Band photos as polaroids: square prints in a cream frame with the wide bottom strip, names in marker */
.band-photo { gap: 0; background: #FBF8F0; padding: 12px 12px 0; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.3), 0 18px 34px rgba(0, 0, 0, 0.42); }
.band-photo img, .bp-1 img, .bp-2 img { aspect-ratio: 1 / 1; border-radius: 0; transform: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); filter: saturate(0.92) contrast(1.02); }
.bp-1 { transform: rotate(-3deg); } .bp-1 img { object-position: 45% 28%; }
.bp-2 { transform: rotate(2.6deg); margin-top: 56px; } .bp-2 img { object-position: 50% 30%; }
.band-photo figcaption { align-items: center; text-align: center; gap: 0; padding: 12px 6px 16px; }
.band-photo figcaption strong, :root[data-theme="light"] .band-photo figcaption strong { font-family: 'Permanent Marker', 'Comic Sans MS', cursive; font-weight: 400; text-transform: none; letter-spacing: 0.01em; font-size: 1.3rem; line-height: 1.1; color: #23243A; }
.band-photo figcaption span, :root[data-theme="light"] .band-photo figcaption span { font-family: 'Permanent Marker', 'Comic Sans MS', cursive; font-weight: 400; text-transform: none; letter-spacing: 0.02em; font-size: 0.95rem; color: #5A5560; }
:root[data-theme="light"] .band-photo img { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
:root[data-theme="light"] .band-photo { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(20, 50, 50, 0.2), 0 16px 30px rgba(15, 60, 60, 0.28); }
@media (max-width: 700px) { .band-photo { padding: 8px 8px 0; } .band-photo figcaption { padding: 8px 4px 12px; } .band-photo figcaption strong { font-size: 1rem; } .band-photo figcaption span { font-size: 0.8rem; } }

/* Polaroid captions in the site's own type: name in the display caps, instrument in small spaced caps */
.band-photo figcaption { gap: 3px; }
.band-photo figcaption strong, :root[data-theme="light"] .band-photo figcaption strong { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; line-height: 1.2; color: #23243A; }
.band-photo figcaption span, :root[data-theme="light"] .band-photo figcaption span { font-family: var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.78rem; color: #0E7A6D; }
@media (max-width: 700px) { .band-photo figcaption strong { font-size: 0.92rem; } .band-photo figcaption span { font-size: 0.68rem; letter-spacing: 1.5px; } }
.band-photo figcaption span { line-height: 1.5; text-wrap: balance; max-width: 26ch; }

/* Paper texture on the polaroids: fine grain and faint fibres in the frame, a light grain over the print, aged edges */
.band-photo { position: relative; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='p'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20seed='9'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.4%20%200%200%200%200%200.33%20%200%200%200%200%200.24%20%200%200%200%200.32%20-0.08'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23p%29'/%3E%3C/svg%3E") 0 0 / 220px 220px, url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='340'%20height='340'%3E%3Cfilter%20id='f'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.02%200.12'%20numOctaves='2'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.5%20%200%200%200%200%200.42%20%200%200%200%200%200.3%20%200%200%200%200.16%20-0.05'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23f%29'/%3E%3C/svg%3E") 0 0 / 340px 340px, radial-gradient(ellipse 120% 100% at 50% 45%, #FBF8F0 62%, #F1EADB 100%); }
.band-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='p'%20color-interpolation-filters='sRGB'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20seed='9'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200.4%20%200%200%200%200%200.33%20%200%200%200%200%200.24%20%200%200%200%200.32%20-0.08'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23p%29'/%3E%3C/svg%3E") 40px 70px / 220px 220px; opacity: 0.35; mix-blend-mode: multiply; }


/* ---------- Artwork texture: paper cutout layers + print grain pinned to the artwork itself ----------
   The grain is part of each scene (sky, hills, trees, lake, logo, lake floor, bar top, footer pines), so it scrolls with
   the page instead of floating over it. Text, buttons, cards and photos stay clean. Tiles are seamless (stitched noise). */

/* 1. Paper cutout: every scenery layer is a sheet of cut paper with a crisp shadow on the sheet behind and its own paper grain */
.layer, .boat svg, .geese { filter: drop-shadow(-3px -2px 0 rgba(8, 20, 30, 0.22)) drop-shadow(-2px -4px 5px rgba(8, 20, 30, 0.28)); }
.layer-sides { filter: drop-shadow(4px -3px 0 rgba(8, 20, 30, 0.25)) drop-shadow(5px -5px 7px rgba(8, 20, 30, 0.3)); }
.lake { box-shadow: inset 0 6px 8px -4px rgba(8, 20, 30, 0.35); }
.hero-logo-day { filter: drop-shadow(7px 7px 0 #14182E) drop-shadow(4px 10px 10px rgba(10, 20, 50, 0.3)) !important; }
.hero-logo { filter: drop-shadow(0 0 10px rgba(255, 90, 31, 0.55)) drop-shadow(0 0 34px rgba(255, 90, 31, 0.35)) drop-shadow(6px 10px 12px rgba(0, 0, 0, 0.5)); }

/* grain built into vector artwork: hills, headland, pines, boat, geese, lake-floor weeds, footer pines and the hero logo */
.layer > svg, .big-pines, .boat svg, .geese, .lake-weeds, .treeline-foot { filter: url(#paperGrain); }
.layer, .boat svg, .geese { filter: drop-shadow(-3px -2px 0 rgba(8, 20, 30, 0.22)) drop-shadow(-2px -4px 5px rgba(8, 20, 30, 0.28)); }
.layer-sides { filter: drop-shadow(4px -3px 0 rgba(8, 20, 30, 0.25)) drop-shadow(5px -5px 7px rgba(8, 20, 30, 0.3)); }
.boat svg { filter: url(#paperGrain) drop-shadow(-3px -2px 0 rgba(8, 20, 30, 0.22)); }
.treeline-foot { filter: url(#paperGrain) drop-shadow(-3px -3px 0 rgba(0, 0, 0, 0.18)) drop-shadow(-2px -5px 6px rgba(0, 0, 0, 0.25)); }
.lake-weeds { filter: url(#paperGrain) drop-shadow(-2px -3px 0 rgba(0, 10, 8, 0.25)) drop-shadow(-2px -4px 5px rgba(0, 10, 8, 0.3)); }
.hero-logo-day { filter: url(#paperGrain) drop-shadow(7px 7px 0 #14182E) drop-shadow(4px 10px 10px rgba(10, 20, 50, 0.3)) !important; }
.hero-logo { filter: url(#paperGrainLight) drop-shadow(0 0 10px rgba(255, 90, 31, 0.55)) drop-shadow(0 0 34px rgba(255, 90, 31, 0.35)) drop-shadow(6px 10px 12px rgba(0, 0, 0, 0.5)); }
/* grain tiles on the flat painted areas: sky, the solid ground under each tree layer, the lake, under water, the bar */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.85 -0.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='2' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0 0.16 0 0 0 0.5 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 420px 420px; mix-blend-mode: multiply; opacity: 0.42; }
.layer .skirt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.85 -0.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 240px 240px; background-blend-mode: multiply; }
.lake::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.85 -0.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='2' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0 0.16 0 0 0 0.5 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 60px 30px / 420px 420px; mix-blend-mode: multiply; opacity: 0.45; }
.lake-deep::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.85 -0.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='2' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0 0.16 0 0 0 0.5 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 420px 420px; mix-blend-mode: multiply; opacity: 0.38; }
main.bar-page { position: relative; }
main.bar-page::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.85 -0.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='2' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0 0.16 0 0 0 0.5 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 420px 420px; mix-blend-mode: multiply; opacity: 0.38; }
.bar-wrap { z-index: 2; }
/* halftone dots along the treeline and on the lake */
.forest::after, .lake::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(rgba(10, 20, 30, 0.42) 0.8px, transparent 1.3px) 0 0 / 5px 5px; mix-blend-mode: soft-light; }
.forest::after { bottom: -220px; height: 380px; -webkit-mask-image: linear-gradient(0deg, #000 70%, transparent); mask-image: linear-gradient(0deg, #000 70%, transparent); }
.lake::after { top: 0; bottom: 0; }
.lake-weeds { filter: drop-shadow(-2px -3px 0 rgba(0, 10, 8, 0.25)) drop-shadow(-2px -4px 5px rgba(0, 10, 8, 0.3)); }
/* Logo stays crisp and clean so it pops off the textured scene */
.hero-logo-day { filter: drop-shadow(7px 7px 0 #14182E) drop-shadow(4px 10px 10px rgba(10, 20, 50, 0.3)) !important; }
.hero-logo { filter: drop-shadow(0 0 10px rgba(255, 90, 31, 0.55)) drop-shadow(0 0 34px rgba(255, 90, 31, 0.35)) drop-shadow(0 0 60px rgba(79, 157, 255, 0.35)); }

.about-tag { font-family: var(--script); font-size: 2.1rem; line-height: 1.1; margin-top: 4px !important; color: var(--aqua, #6FE3D2); text-shadow: 0 0 10px rgba(63, 214, 194, 0.45); transform: rotate(-2deg); transform-origin: left center; }
:root[data-theme="light"] .about-tag { color: #0B6B60; text-shadow: none; }
/* The strip at the very bottom of the lake floor matches the footer in each theme */
.lake-weeds .floor-base { fill: #050D0B; }
:root[data-theme="light"] .lake-weeds .floor-base { fill: #1E3A2C; }

/* Water break: the halftone stipple on the lake carries on down behind the wavy surface line instead of stopping
   at a straight edge. The dots stay put (same 5px grid as the lake above, so no seam); only the wave-shaped mask drifts with the surface. */
.lake-deep::before { content: ""; display: block !important; position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: 1; pointer-events: none;
  filter: none; background: radial-gradient(rgba(10, 20, 30, 0.42) 0.8px, transparent 1.3px) 0 0 / 5px 5px; mix-blend-mode: soft-light;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202880%2090'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2032.3%206%2032.5%2012%2032.5%2018%2032.3%2024%2032.1%2030%2031.9%2036%2031.8%2042%2031.8%2048%2031.8%2054%2032.0%2060%2032.1%2066%2032.3%2072%2032.4%2078%2032.3%2084%2032.2%2090%2032.0%2096%2031.8%20102%2031.5%20108%2031.4%20114%2031.4%20120%2031.5%20126%2031.8%20132%2032.2%20138%2032.7%20144%2033.1%20150%2033.4%20156%2033.6%20162%2033.5%20168%2033.1%20174%2032.5%20180%2031.7%20186%2030.8%20192%2029.8%20198%2028.9%20204%2028.1%20210%2027.5%20216%2027.0%20222%2026.7%20228%2026.5%20234%2026.4%20240%2026.3%20246%2026.2%20252%2026.0%20258%2025.9%20264%2025.7%20270%2025.6%20276%2025.7%20282%2025.9%20288%2026.2%20294%2026.8%20300%2027.5%20306%2028.3%20312%2029.1%20318%2029.9%20324%2030.5%20330%2030.9%20336%2031.1%20342%2031.0%20348%2030.8%20354%2030.4%20360%2030.1%20366%2029.7%20372%2029.5%20378%2029.5%20384%2029.6%20390%2030.0%20396%2030.4%20402%2030.9%20408%2031.3%20414%2031.7%20420%2032.1%20426%2032.3%20432%2032.4%20438%2032.5%20444%2032.6%20450%2032.8%20456%2033.0%20462%2033.3%20468%2033.7%20474%2034.1%20480%2034.4%20486%2034.6%20492%2034.7%20498%2034.5%20504%2034.0%20510%2033.3%20516%2032.4%20522%2031.3%20528%2030.3%20534%2029.3%20540%2028.4%20546%2027.7%20552%2027.3%20558%2027.0%20564%2027.0%20570%2027.0%20576%2027.1%20582%2027.2%20588%2027.3%20594%2027.2%20600%2027.2%20606%2027.1%20612%2027.0%20618%2027.0%20624%2027.1%20630%2027.4%20636%2027.7%20642%2028.1%20648%2028.6%20654%2029.0%20660%2029.3%20666%2029.4%20672%2029.4%20678%2029.1%20684%2028.7%20690%2028.3%20696%2027.9%20702%2027.5%20708%2027.3%20714%2027.4%20720%2027.7%20726%2028.2%20732%2028.9%20738%2029.7%20744%2030.5%20750%2031.3%20756%2032.0%20762%2032.5%20768%2032.9%20774%2033.2%20780%2033.4%20786%2033.6%20792%2033.7%20798%2033.9%20804%2034.2%20810%2034.4%20816%2034.6%20822%2034.7%20828%2034.7%20834%2034.5%20840%2034.0%20846%2033.4%20852%2032.5%20858%2031.6%20864%2030.6%20870%2029.8%20876%2029.0%20882%2028.5%20888%2028.2%20894%2028.2%20900%2028.3%20906%2028.6%20912%2028.9%20918%2029.1%20924%2029.3%20930%2029.3%20936%2029.2%20942%2029.0%20948%2028.8%20954%2028.4%20960%2028.2%20966%2028.0%20972%2027.9%20978%2027.9%20984%2027.9%20990%2028.0%20996%2028.0%201002%2027.9%201008%2027.7%201014%2027.4%201020%2026.9%201026%2026.5%201032%2026.1%201038%2025.8%201044%2025.8%201050%2025.9%201056%2026.4%201062%2027.0%201068%2027.9%201074%2028.9%201080%2029.9%201086%2030.9%201092%2031.8%201098%2032.5%201104%2033.0%201110%2033.2%201116%2033.4%201122%2033.4%201128%2033.4%201134%2033.4%201140%2033.5%201146%2033.6%201152%2033.7%201158%2033.7%201164%2033.7%201170%2033.6%201176%2033.4%201182%2033.0%201188%2032.4%201194%2031.8%201200%2031.1%201206%2030.5%201212%2030.1%201218%2029.8%201224%2029.8%201230%2029.9%201236%2030.2%201242%2030.6%201248%2031.1%201254%2031.4%201260%2031.6%201266%2031.6%201272%2031.4%201278%2031.0%201284%2030.4%201290%2029.8%201296%2029.1%201302%2028.5%201308%2028.0%201314%2027.6%201320%2027.3%201326%2027.1%201332%2026.9%201338%2026.7%201344%2026.5%201350%2026.2%201356%2025.9%201362%2025.6%201368%2025.3%201374%2025.2%201380%2025.2%201386%2025.4%201392%2025.9%201398%2026.6%201404%2027.5%201410%2028.5%201416%2029.5%201422%2030.5%201428%2031.3%201434%2031.9%201440%2032.3%201446%2032.5%201452%2032.5%201458%2032.3%201464%2032.1%201470%2031.9%201476%2031.8%201482%2031.8%201488%2031.8%201494%2032.0%201500%2032.1%201506%2032.3%201512%2032.4%201518%2032.3%201524%2032.2%201530%2032.0%201536%2031.8%201542%2031.5%201548%2031.4%201554%2031.4%201560%2031.5%201566%2031.8%201572%2032.2%201578%2032.7%201584%2033.1%201590%2033.4%201596%2033.6%201602%2033.5%201608%2033.1%201614%2032.5%201620%2031.7%201626%2030.8%201632%2029.8%201638%2028.9%201644%2028.1%201650%2027.5%201656%2027.0%201662%2026.7%201668%2026.5%201674%2026.4%201680%2026.3%201686%2026.2%201692%2026.0%201698%2025.9%201704%2025.7%201710%2025.6%201716%2025.7%201722%2025.9%201728%2026.2%201734%2026.8%201740%2027.5%201746%2028.3%201752%2029.1%201758%2029.9%201764%2030.5%201770%2030.9%201776%2031.1%201782%2031.0%201788%2030.8%201794%2030.4%201800%2030.1%201806%2029.7%201812%2029.5%201818%2029.5%201824%2029.6%201830%2030.0%201836%2030.4%201842%2030.9%201848%2031.3%201854%2031.7%201860%2032.1%201866%2032.3%201872%2032.4%201878%2032.5%201884%2032.6%201890%2032.8%201896%2033.0%201902%2033.3%201908%2033.7%201914%2034.1%201920%2034.4%201926%2034.6%201932%2034.7%201938%2034.5%201944%2034.0%201950%2033.3%201956%2032.4%201962%2031.3%201968%2030.3%201974%2029.3%201980%2028.4%201986%2027.7%201992%2027.3%201998%2027.0%202004%2027.0%202010%2027.0%202016%2027.1%202022%2027.2%202028%2027.3%202034%2027.2%202040%2027.2%202046%2027.1%202052%2027.0%202058%2027.0%202064%2027.1%202070%2027.4%202076%2027.7%202082%2028.1%202088%2028.6%202094%2029.0%202100%2029.3%202106%2029.4%202112%2029.4%202118%2029.1%202124%2028.7%202130%2028.3%202136%2027.9%202142%2027.5%202148%2027.3%202154%2027.4%202160%2027.7%202166%2028.2%202172%2028.9%202178%2029.7%202184%2030.5%202190%2031.3%202196%2032.0%202202%2032.5%202208%2032.9%202214%2033.2%202220%2033.4%202226%2033.6%202232%2033.7%202238%2033.9%202244%2034.2%202250%2034.4%202256%2034.6%202262%2034.7%202268%2034.7%202274%2034.5%202280%2034.0%202286%2033.4%202292%2032.5%202298%2031.6%202304%2030.6%202310%2029.8%202316%2029.0%202322%2028.5%202328%2028.2%202334%2028.2%202340%2028.3%202346%2028.6%202352%2028.9%202358%2029.1%202364%2029.3%202370%2029.3%202376%2029.2%202382%2029.0%202388%2028.8%202394%2028.4%202400%2028.2%202406%2028.0%202412%2027.9%202418%2027.9%202424%2027.9%202430%2028.0%202436%2028.0%202442%2027.9%202448%2027.7%202454%2027.4%202460%2026.9%202466%2026.5%202472%2026.1%202478%2025.8%202484%2025.8%202490%2025.9%202496%2026.4%202502%2027.0%202508%2027.9%202514%2028.9%202520%2029.9%202526%2030.9%202532%2031.8%202538%2032.5%202544%2033.0%202550%2033.2%202556%2033.4%202562%2033.4%202568%2033.4%202574%2033.4%202580%2033.5%202586%2033.6%202592%2033.7%202598%2033.7%202604%2033.7%202610%2033.6%202616%2033.4%202622%2033.0%202628%2032.4%202634%2031.8%202640%2031.1%202646%2030.5%202652%2030.1%202658%2029.8%202664%2029.8%202670%2029.9%202676%2030.2%202682%2030.6%202688%2031.1%202694%2031.4%202700%2031.6%202706%2031.6%202712%2031.4%202718%2031.0%202724%2030.4%202730%2029.8%202736%2029.1%202742%2028.5%202748%2028.0%202754%2027.6%202760%2027.3%202766%2027.1%202772%2026.9%202778%2026.7%202784%2026.5%202790%2026.2%202796%2025.9%202802%2025.6%202808%2025.3%202814%2025.2%202820%2025.2%202826%2025.4%202832%2025.9%202838%2026.6%202844%2027.5%202850%2028.5%202856%2029.5%202862%2030.5%202868%2031.3%202874%2031.9%202880%2032.3%20L2880%200%20L0%200Z'/%3E%3C/svg%3E") 0 0 / 200vw 90px repeat-x; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202880%2090'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2032.3%206%2032.5%2012%2032.5%2018%2032.3%2024%2032.1%2030%2031.9%2036%2031.8%2042%2031.8%2048%2031.8%2054%2032.0%2060%2032.1%2066%2032.3%2072%2032.4%2078%2032.3%2084%2032.2%2090%2032.0%2096%2031.8%20102%2031.5%20108%2031.4%20114%2031.4%20120%2031.5%20126%2031.8%20132%2032.2%20138%2032.7%20144%2033.1%20150%2033.4%20156%2033.6%20162%2033.5%20168%2033.1%20174%2032.5%20180%2031.7%20186%2030.8%20192%2029.8%20198%2028.9%20204%2028.1%20210%2027.5%20216%2027.0%20222%2026.7%20228%2026.5%20234%2026.4%20240%2026.3%20246%2026.2%20252%2026.0%20258%2025.9%20264%2025.7%20270%2025.6%20276%2025.7%20282%2025.9%20288%2026.2%20294%2026.8%20300%2027.5%20306%2028.3%20312%2029.1%20318%2029.9%20324%2030.5%20330%2030.9%20336%2031.1%20342%2031.0%20348%2030.8%20354%2030.4%20360%2030.1%20366%2029.7%20372%2029.5%20378%2029.5%20384%2029.6%20390%2030.0%20396%2030.4%20402%2030.9%20408%2031.3%20414%2031.7%20420%2032.1%20426%2032.3%20432%2032.4%20438%2032.5%20444%2032.6%20450%2032.8%20456%2033.0%20462%2033.3%20468%2033.7%20474%2034.1%20480%2034.4%20486%2034.6%20492%2034.7%20498%2034.5%20504%2034.0%20510%2033.3%20516%2032.4%20522%2031.3%20528%2030.3%20534%2029.3%20540%2028.4%20546%2027.7%20552%2027.3%20558%2027.0%20564%2027.0%20570%2027.0%20576%2027.1%20582%2027.2%20588%2027.3%20594%2027.2%20600%2027.2%20606%2027.1%20612%2027.0%20618%2027.0%20624%2027.1%20630%2027.4%20636%2027.7%20642%2028.1%20648%2028.6%20654%2029.0%20660%2029.3%20666%2029.4%20672%2029.4%20678%2029.1%20684%2028.7%20690%2028.3%20696%2027.9%20702%2027.5%20708%2027.3%20714%2027.4%20720%2027.7%20726%2028.2%20732%2028.9%20738%2029.7%20744%2030.5%20750%2031.3%20756%2032.0%20762%2032.5%20768%2032.9%20774%2033.2%20780%2033.4%20786%2033.6%20792%2033.7%20798%2033.9%20804%2034.2%20810%2034.4%20816%2034.6%20822%2034.7%20828%2034.7%20834%2034.5%20840%2034.0%20846%2033.4%20852%2032.5%20858%2031.6%20864%2030.6%20870%2029.8%20876%2029.0%20882%2028.5%20888%2028.2%20894%2028.2%20900%2028.3%20906%2028.6%20912%2028.9%20918%2029.1%20924%2029.3%20930%2029.3%20936%2029.2%20942%2029.0%20948%2028.8%20954%2028.4%20960%2028.2%20966%2028.0%20972%2027.9%20978%2027.9%20984%2027.9%20990%2028.0%20996%2028.0%201002%2027.9%201008%2027.7%201014%2027.4%201020%2026.9%201026%2026.5%201032%2026.1%201038%2025.8%201044%2025.8%201050%2025.9%201056%2026.4%201062%2027.0%201068%2027.9%201074%2028.9%201080%2029.9%201086%2030.9%201092%2031.8%201098%2032.5%201104%2033.0%201110%2033.2%201116%2033.4%201122%2033.4%201128%2033.4%201134%2033.4%201140%2033.5%201146%2033.6%201152%2033.7%201158%2033.7%201164%2033.7%201170%2033.6%201176%2033.4%201182%2033.0%201188%2032.4%201194%2031.8%201200%2031.1%201206%2030.5%201212%2030.1%201218%2029.8%201224%2029.8%201230%2029.9%201236%2030.2%201242%2030.6%201248%2031.1%201254%2031.4%201260%2031.6%201266%2031.6%201272%2031.4%201278%2031.0%201284%2030.4%201290%2029.8%201296%2029.1%201302%2028.5%201308%2028.0%201314%2027.6%201320%2027.3%201326%2027.1%201332%2026.9%201338%2026.7%201344%2026.5%201350%2026.2%201356%2025.9%201362%2025.6%201368%2025.3%201374%2025.2%201380%2025.2%201386%2025.4%201392%2025.9%201398%2026.6%201404%2027.5%201410%2028.5%201416%2029.5%201422%2030.5%201428%2031.3%201434%2031.9%201440%2032.3%201446%2032.5%201452%2032.5%201458%2032.3%201464%2032.1%201470%2031.9%201476%2031.8%201482%2031.8%201488%2031.8%201494%2032.0%201500%2032.1%201506%2032.3%201512%2032.4%201518%2032.3%201524%2032.2%201530%2032.0%201536%2031.8%201542%2031.5%201548%2031.4%201554%2031.4%201560%2031.5%201566%2031.8%201572%2032.2%201578%2032.7%201584%2033.1%201590%2033.4%201596%2033.6%201602%2033.5%201608%2033.1%201614%2032.5%201620%2031.7%201626%2030.8%201632%2029.8%201638%2028.9%201644%2028.1%201650%2027.5%201656%2027.0%201662%2026.7%201668%2026.5%201674%2026.4%201680%2026.3%201686%2026.2%201692%2026.0%201698%2025.9%201704%2025.7%201710%2025.6%201716%2025.7%201722%2025.9%201728%2026.2%201734%2026.8%201740%2027.5%201746%2028.3%201752%2029.1%201758%2029.9%201764%2030.5%201770%2030.9%201776%2031.1%201782%2031.0%201788%2030.8%201794%2030.4%201800%2030.1%201806%2029.7%201812%2029.5%201818%2029.5%201824%2029.6%201830%2030.0%201836%2030.4%201842%2030.9%201848%2031.3%201854%2031.7%201860%2032.1%201866%2032.3%201872%2032.4%201878%2032.5%201884%2032.6%201890%2032.8%201896%2033.0%201902%2033.3%201908%2033.7%201914%2034.1%201920%2034.4%201926%2034.6%201932%2034.7%201938%2034.5%201944%2034.0%201950%2033.3%201956%2032.4%201962%2031.3%201968%2030.3%201974%2029.3%201980%2028.4%201986%2027.7%201992%2027.3%201998%2027.0%202004%2027.0%202010%2027.0%202016%2027.1%202022%2027.2%202028%2027.3%202034%2027.2%202040%2027.2%202046%2027.1%202052%2027.0%202058%2027.0%202064%2027.1%202070%2027.4%202076%2027.7%202082%2028.1%202088%2028.6%202094%2029.0%202100%2029.3%202106%2029.4%202112%2029.4%202118%2029.1%202124%2028.7%202130%2028.3%202136%2027.9%202142%2027.5%202148%2027.3%202154%2027.4%202160%2027.7%202166%2028.2%202172%2028.9%202178%2029.7%202184%2030.5%202190%2031.3%202196%2032.0%202202%2032.5%202208%2032.9%202214%2033.2%202220%2033.4%202226%2033.6%202232%2033.7%202238%2033.9%202244%2034.2%202250%2034.4%202256%2034.6%202262%2034.7%202268%2034.7%202274%2034.5%202280%2034.0%202286%2033.4%202292%2032.5%202298%2031.6%202304%2030.6%202310%2029.8%202316%2029.0%202322%2028.5%202328%2028.2%202334%2028.2%202340%2028.3%202346%2028.6%202352%2028.9%202358%2029.1%202364%2029.3%202370%2029.3%202376%2029.2%202382%2029.0%202388%2028.8%202394%2028.4%202400%2028.2%202406%2028.0%202412%2027.9%202418%2027.9%202424%2027.9%202430%2028.0%202436%2028.0%202442%2027.9%202448%2027.7%202454%2027.4%202460%2026.9%202466%2026.5%202472%2026.1%202478%2025.8%202484%2025.8%202490%2025.9%202496%2026.4%202502%2027.0%202508%2027.9%202514%2028.9%202520%2029.9%202526%2030.9%202532%2031.8%202538%2032.5%202544%2033.0%202550%2033.2%202556%2033.4%202562%2033.4%202568%2033.4%202574%2033.4%202580%2033.5%202586%2033.6%202592%2033.7%202598%2033.7%202604%2033.7%202610%2033.6%202616%2033.4%202622%2033.0%202628%2032.4%202634%2031.8%202640%2031.1%202646%2030.5%202652%2030.1%202658%2029.8%202664%2029.8%202670%2029.9%202676%2030.2%202682%2030.6%202688%2031.1%202694%2031.4%202700%2031.6%202706%2031.6%202712%2031.4%202718%2031.0%202724%2030.4%202730%2029.8%202736%2029.1%202742%2028.5%202748%2028.0%202754%2027.6%202760%2027.3%202766%2027.1%202772%2026.9%202778%2026.7%202784%2026.5%202790%2026.2%202796%2025.9%202802%2025.6%202808%2025.3%202814%2025.2%202820%2025.2%202826%2025.4%202832%2025.9%202838%2026.6%202844%2027.5%202850%2028.5%202856%2029.5%202862%2030.5%202868%2031.3%202874%2031.9%202880%2032.3%20L2880%200%20L0%200Z'/%3E%3C/svg%3E") 0 0 / 200vw 90px repeat-x; }
@media (prefers-reduced-motion: no-preference) { .lake-deep::before { animation: wl-mask-drift 26s linear infinite; } }
@keyframes wl-mask-drift { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: -100vw 0; mask-position: -100vw 0; } }
/* Light patterns under the surface fade in below the wave instead of starting at a hard straight edge */
.lake-rays { top: 34px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px, rgba(0, 0, 0, 0.55) 45%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 60px, rgba(0, 0, 0, 0.55) 45%, transparent 100%); }
:root[data-theme="light"] .caustics { top: 34px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0.18) 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 70px, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0.18) 70%, transparent 100%); }
.lake-motes { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 50px); mask-image: linear-gradient(180deg, transparent 0, #000 50px); }

/* Divider: a fishing bobber floating on the surface line, with rings spreading out around it */
.lake-rule-bobber { width: min(320px, 100%); margin: 10px 0 16px; }
.lake-rule-bobber svg { overflow: visible; }
.lake-rule-bobber path, .lake-rule-bobber ellipse, .lake-rule-bobber circle { filter: none; }
.lake-rule-bobber .lr-line { fill: none; stroke: #6FE3D2; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(63, 214, 194, 0.7)); }
.lake-rule-bobber .lr-ring { fill: none; stroke: #6FE3D2; stroke-width: 1.2; opacity: 0.55; }
.lake-rule-bobber .lr-ring.r2 { opacity: 0.28; }
.lake-rule-bobber .lr-fishline { fill: none; stroke: rgba(232, 255, 251, 0.45); stroke-width: 0.8; }
.lake-rule-bobber .lr-stem { fill: none; stroke: #E8FFFB; stroke-width: 1.6; stroke-linecap: round; }
.lake-rule-bobber .lr-knob { fill: #E23E05; stroke: none; }
.lake-rule-bobber .lr-top { fill: #E23E05; stroke: none; }
.lake-rule-bobber .lr-bot { fill: #F4EEE2; stroke: none; }
.lake-rule-bobber .lr-band { fill: none; stroke: #14182E; stroke-width: 1.2; }
.lake-rule-bobber .lr-bobber, .lake-rule-bobber .lr-ring { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .lake-rule-bobber .lr-bobber { animation: bobber-bob 3.2s ease-in-out infinite; }
  .lake-rule-bobber .lr-ring.r1 { animation: bobber-ring 3.2s ease-out infinite; }
  .lake-rule-bobber .lr-ring.r2 { animation: bobber-ring 3.2s ease-out 1.6s infinite; }
}
@keyframes bobber-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(1.8px) rotate(-4deg); } 60% { transform: translateY(-0.6px) rotate(3deg); } }
@keyframes bobber-ring { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(1.25); opacity: 0; } }
:root[data-theme="light"] .lake-rule-bobber .lr-line, :root[data-theme="light"] .lake-rule-bobber .lr-ring { stroke: #14907F; filter: none; }
:root[data-theme="light"] .lake-rule-bobber .lr-fishline { stroke: rgba(15, 44, 46, 0.4); }
:root[data-theme="light"] .lake-rule-bobber .lr-stem { stroke: #14182E; }
:root[data-theme="light"] .lake-rule-bobber .lr-bot { fill: #FFFFFF; }
:root[data-theme="light"] .lake-rule-bobber .lr-top, :root[data-theme="light"] .lake-rule-bobber .lr-bot { stroke: none; }
:root[data-theme="light"] .lake-rule-bobber .lr-knob { fill: #E23E05; }
:root[data-theme="light"] .lake-rule-bobber .lr-band { stroke: #14182E; }
.lake-rule-bobber .lr-top, .lake-rule-bobber .lr-bot { stroke: none; }

/* Divider v2: bobber-inspired, not literal: a still orange-and-cream disc with a navy band, a thin ring and two dots on the line */
.lake-rule-bobber .lr-bobber, .lake-rule-bobber .lr-ring { animation: none !important; }
.lake-rule-bobber .lr-ring { fill: none; stroke: #6FE3D2; stroke-width: 1.3; opacity: 0.6; transform: none; }
.lake-rule-bobber .lr-dot { fill: #6FE3D2; stroke: none; filter: drop-shadow(0 0 3px rgba(63, 214, 194, 0.8)); }
.lake-rule-bobber .lr-band { stroke-width: 1.6; }
:root[data-theme="light"] .lake-rule-bobber .lr-ring { stroke: #14907F; }
:root[data-theme="light"] .lake-rule-bobber .lr-dot { fill: #14907F; filter: none; }

.lake-rule-bobber .lr-top, :root[data-theme="light"] .lake-rule-bobber .lr-top { fill: #E23E05; stroke: none; }
.lake-rule-bobber .lr-bot { fill: #F4EEE2; stroke: none; } :root[data-theme="light"] .lake-rule-bobber .lr-bot { fill: #FFFFFF; stroke: none; }
/* About tag: big and bold, in the display caps */
.about-tag { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.05; transform: none; margin-top: 10px !important; max-width: none !important; }
#sound .sound-copy p.about-tag { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.05; margin: 10px 0 0; }

/* Live video: a small marquee-style heading, art-deco corner brackets and float-and-dot side decals */
.listen-head { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 880px; margin: 0 auto 22px; }
.listen-head p { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(1rem, 2vw, 1.25rem); color: #E8FFFB; white-space: nowrap; }
.lh-rule { flex: 1; height: 1.6px; background: #6FE3D2; box-shadow: 0 0 6px rgba(63, 214, 194, 0.6); }
.lh-star { color: #E23E05; font-size: 0.95rem; line-height: 1; }
.listen-frame { position: relative; max-width: 880px; margin: 0 auto; }
.listen-frame .sound-media { max-width: none; }
.lf-corner { position: absolute; width: 34px; height: 34px; z-index: 3; pointer-events: none; border: 2px solid #6FE3D2; filter: drop-shadow(0 0 4px rgba(63, 214, 194, 0.6)); }
.lf-corner.tl { left: -12px; top: -12px; border-right: 0; border-bottom: 0; }
.lf-corner.tr { right: -12px; top: -12px; border-left: 0; border-bottom: 0; }
.lf-corner.bl { left: -12px; bottom: -12px; border-right: 0; border-top: 0; }
.lf-corner.br { right: -12px; bottom: -12px; border-left: 0; border-top: 0; }
.lf-corner::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #E23E05; }
.lf-corner.tl::after { left: -4px; top: -4px; } .lf-corner.tr::after { right: -4px; top: -4px; } .lf-corner.bl::after { left: -4px; bottom: -4px; } .lf-corner.br::after { right: -4px; bottom: -4px; }
.ld-side { position: absolute; top: 50%; width: 28px; height: 300px; transform: translateY(-50%); overflow: visible; }
.ld-left { left: -70px; } .ld-right { right: -70px; }
.ld-line { fill: none; stroke: #6FE3D2; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(63, 214, 194, 0.6)); }
.ld-dot { fill: #6FE3D2; } .ld-dot.sm { opacity: 0.7; }
.ld-side .lr-top { fill: #E23E05; } .ld-side .lr-bot { fill: #F4EEE2; }
@media (max-width: 1080px) { .ld-side { display: none; } }
@media (max-width: 700px) { .lf-corner { width: 22px; height: 22px; } .lf-corner.tl, .lf-corner.bl { left: -7px; } .lf-corner.tr, .lf-corner.br { right: -7px; } .lf-corner.tl, .lf-corner.tr { top: -7px; } .lf-corner.bl, .lf-corner.br { bottom: -7px; } }
:root[data-theme="light"] .listen-head p { color: #0D2A2D; }
:root[data-theme="light"] .lh-rule { background: #14907F; box-shadow: none; }
:root[data-theme="light"] .lf-corner { border-color: #14907F; filter: none; }
:root[data-theme="light"] .ld-line { stroke: #14907F; filter: none; } :root[data-theme="light"] .ld-dot { fill: #14907F; }
:root[data-theme="light"] .ld-side .lr-bot { fill: #FFFFFF; }
/* Booking sign subline on a single line at every width */
#book .sign-sm .neon-caps { white-space: nowrap; font-size: min(1rem, 2.75vw); letter-spacing: 0.1em; }

/* Geese: both wings of each bird beat together (each bird keeps its own slight offset from the others) */
.goose .g-wing, .goose .g-wing-far { animation-delay: var(--fd, 0s) !important; }

/* Booking list bullets: the orange-and-cream float drop from the dividers */
.lake-deep .checks li::before, :root[data-theme="light"] .lake-deep .checks li::before { left: 6px; top: 3px; width: 12px; height: 19px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2026'%3E%3Cpath%20fill='%23F4EEE2'%20d='M8%2025%20C0%2025%200.6%2016%201.4%2012%20L14.6%2012%20C15.4%2016%2016%2025%208%2025%20Z'/%3E%3Cpath%20fill='%23E23E05'%20d='M8%201%20C12%205%2014.2%208.5%2014.6%2012%20L1.4%2012%20C1.8%208.5%204%205%208%201%20Z'/%3E%3C/svg%3E") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 0 4px rgba(63, 214, 194, 0.35)); }
:root[data-theme="light"] .lake-deep .checks li::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2026'%3E%3Cpath%20fill='%23FFFFFF'%20d='M8%2025%20C0%2025%200.6%2016%201.4%2012%20L14.6%2012%20C15.4%2016%2016%2025%208%2025%20Z'/%3E%3Cpath%20fill='%23E23E05'%20d='M8%201%20C12%205%2014.2%208.5%2014.6%2012%20L1.4%2012%20C1.8%208.5%204%205%208%201%20Z'/%3E%3C/svg%3E"); filter: drop-shadow(0 1px 1px rgba(15, 44, 46, 0.25)); }
/* Booking bullets: simple split circles, red on top and white below */
.lake-deep .checks li::before, :root[data-theme="light"] .lake-deep .checks li::before { left: 5px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(180deg, #E23E05 0 50%, #FBF8F0 50% 100%); }
:root[data-theme="light"] .lake-deep .checks li::before { background: linear-gradient(180deg, #E23E05 0 50%, #FFFFFF 50% 100%); }

/* ---------- One consistent button effect across the site ----------
   Every button lifts 1px on hover/focus. Outline-style buttons (nav links, ghost buttons, social icons, theme toggle,
   prev/next) light up with a tube ring and red-orange glow; filled buttons (Booking, Book the band, Send) keep their fill
   and gain the same ring and glow. By day the ring is fire orange with a softer glow; on dark grounds (footer) it stays neon. */
.btn, .nav-links > a, .nav-social a, .social a, .theme-toggle, .stack-btn, .video-play {
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.btn-ghost:hover, .btn-ghost:focus-visible, .nav-links > a:not(.btn):hover, .nav-links > a:not(.btn):focus-visible,
.nav-social a:hover, .nav-social a:focus-visible, .social a:hover, .social a:focus-visible,
.theme-toggle:hover, .theme-toggle:focus-visible, .stack-btn:not(:disabled):hover, .stack-btn:not(:disabled):focus-visible, .bar-top .stack-btn:not(:disabled):hover {
  color: var(--tube); background-color: transparent; box-shadow: inset 0 0 0 2px var(--tube), 0 0 10px var(--neon), 0 0 22px rgba(255, 79, 46, 0.45); transform: translateY(-1px); outline: none; }
.btn-flame, .lake-deep .btn-flame { background: var(--flame-deep); color: #FFF6EF; box-shadow: 0 0 14px rgba(255, 79, 46, 0.45); }
.btn-flame:hover, .btn-flame:focus-visible, .lake-deep .btn-flame:hover, .lake-deep .btn-flame:focus-visible, .nav-links .btn:hover, .nav-links .btn:focus-visible {
  background: #D63B00; color: #FFF6EF; box-shadow: inset 0 0 0 2px var(--tube), 0 0 10px var(--neon), 0 0 26px rgba(255, 79, 46, 0.6); transform: translateY(-1px); outline: none; }
.video-lite:hover .video-play, .video-lite:focus-visible .video-play { transform: translateY(-1px) scale(1.04); box-shadow: inset 0 0 0 2px var(--tube), 0 0 10px var(--neon), 0 0 26px rgba(255, 79, 46, 0.6); }
.bar-top .stack-btn { background: rgba(20, 10, 6, 0.65); }

:root[data-theme="light"] .btn-ghost:hover, :root[data-theme="light"] .btn-ghost:focus-visible,
:root[data-theme="light"] .nav-links > a:not(.btn):hover, :root[data-theme="light"] .nav-links > a:not(.btn):focus-visible,
:root[data-theme="light"] .nav-social a:hover, :root[data-theme="light"] .nav-social a:focus-visible,
:root[data-theme="light"] .theme-toggle:hover, :root[data-theme="light"] .theme-toggle:focus-visible,
:root[data-theme="light"] .stack-btn:not(:disabled):hover, :root[data-theme="light"] .stack-btn:not(:disabled):focus-visible, :root[data-theme="light"] .bar-top .stack-btn:not(:disabled):hover {
  color: #C23400; box-shadow: inset 0 0 0 2px #C23400, 0 0 12px rgba(255, 79, 46, 0.28); transform: translateY(-1px); }
:root[data-theme="light"] .bar-top .stack-btn:not(:disabled):hover { background: rgba(255, 247, 232, 0.9); }
:root[data-theme="light"] .btn-flame, :root[data-theme="light"] .lake-deep .btn-flame { box-shadow: 0 2px 8px rgba(194, 52, 0, 0.3); }
:root[data-theme="light"] .btn-flame:hover, :root[data-theme="light"] .btn-flame:focus-visible, :root[data-theme="light"] .lake-deep .btn-flame:hover,
:root[data-theme="light"] .nav-links .btn:hover, :root[data-theme="light"] .nav-links .btn:focus-visible {
  box-shadow: inset 0 0 0 2px #FFD9C4, 0 0 14px rgba(255, 79, 46, 0.4); transform: translateY(-1px); }
:root[data-theme="light"] .video-lite:hover .video-play { box-shadow: inset 0 0 0 2px #FFD9C4, 0 0 14px rgba(255, 79, 46, 0.45); }
/* footer stays dark in both themes, so its social buttons keep the neon ring */
:root[data-theme="light"] .site-footer .social a:hover, :root[data-theme="light"] .site-footer .social a:focus-visible { color: #FFF1E8; box-shadow: inset 0 0 0 2px #FFF1E8, 0 0 10px #FF4F2E, 0 0 22px rgba(255, 79, 46, 0.45); }
@media (prefers-reduced-motion: reduce) { .btn:hover, .nav-links > a:hover, .nav-social a:hover, .social a:hover, .theme-toggle:hover, .stack-btn:hover, .btn:focus-visible { transform: none !important; } }
:root[data-theme="light"] a.btn-flame:hover, :root[data-theme="light"] a.btn-flame:focus-visible, :root[data-theme="light"] .btn-flame:hover { color: #FFF6EF; background: #D63B00; }
/* Booking: the card stretches to the height of the description beside it; the Details box takes up the extra room */
@media (min-width: 900px) {
  #book .book-grid { align-items: stretch; }
  #book .book-form { grid-template-rows: auto auto auto auto 1fr auto auto auto; align-content: stretch; }
  #book .book-form .field-wide:has(textarea) { min-height: 0; }
  #book .book-form textarea { flex: 1 1 auto; min-height: 110px; resize: none; }
}
/* Ticket header "Upcoming shows": all caps, sitting straight */
.st-title { text-transform: uppercase; transform: none; font-style: normal; letter-spacing: 0.03em; }
/* Pull tabs without a date: no calendar box, the text fills the strip and "Pull" stays at the end */
.tab.no-date { grid-template-columns: 1fr auto; }
.tab.no-date .tab-info { flex: 1 1 auto; padding-left: 6px; }

/* Personal site link at the bottom of each polaroid, like a note written on the strip */
.band-photo .bp-link, :root[data-theme="light"] .band-photo .bp-link { margin-top: 6px; font: 600 0.82rem/1.2 var(--body); color: #23243A; text-decoration: underline; text-decoration-color: rgba(194, 52, 0, 0.6); text-underline-offset: 3px; overflow-wrap: anywhere; }
.band-photo .bp-link:hover, .band-photo .bp-link:focus-visible, :root[data-theme="light"] .band-photo .bp-link:hover { color: #C23400; text-decoration-color: #C23400; }
@media (max-width: 700px) { .band-photo .bp-link { font-size: 0.68rem; } }
@media (max-width: 700px) { .band-photo figcaption .bp-link, :root[data-theme="light"] .band-photo figcaption .bp-link { font-size: 0.62rem; letter-spacing: -0.01em; overflow-wrap: normal; white-space: nowrap; } }

/* "Try the other mode" nudge that pops out of the sun/moon switch */
.nav { position: relative; }
.theme-hint { position: absolute; z-index: 30; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: 999px;
  background: #14182E; color: #FFF1E8; box-shadow: inset 0 0 0 1.5px rgba(255, 241, 232, 0.6), 0 0 14px rgba(255, 79, 46, 0.45), 0 10px 24px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(-6px) scale(0.96); transform-origin: top right; transition: opacity 0.3s ease, transform 0.3s ease; white-space: nowrap; }
.theme-hint.is-on { opacity: 1; transform: none; }
.theme-hint::before { content: ""; position: absolute; top: -6px; right: var(--arrow-right, 14px); width: 12px; height: 12px; background: #14182E; transform: rotate(45deg);
  box-shadow: -1.5px -1.5px 0 0 rgba(255, 241, 232, 0.6); }
.th-msg { border: 0; background: none; color: inherit; font: 500 0.88rem/1 var(--body); cursor: pointer; padding: 6px 4px; }
.th-msg b { font-weight: 800; color: #FFB48F; margin-right: 2px; }
.th-close { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 241, 232, 0.75); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.th-close:hover, .th-close:focus-visible { color: #FFF1E8; background: rgba(255, 241, 232, 0.12); }
:root[data-theme="light"] .theme-hint { background: #FFF8EE; color: #1C2347; box-shadow: inset 0 0 0 1.5px #C23400, 0 10px 24px rgba(28, 35, 71, 0.18); }
:root[data-theme="light"] .theme-hint::before { background: #FFF8EE; box-shadow: -1.5px -1.5px 0 0 #C23400; }
:root[data-theme="light"] .th-msg b { color: #C23400; }
:root[data-theme="light"] .th-close { color: #4E5574; } :root[data-theme="light"] .th-close:hover { color: #1C2347; background: rgba(28, 35, 71, 0.08); }
@media (prefers-reduced-motion: no-preference) { .theme-toggle.hint-pulse { animation: hint-pulse 1.6s ease-in-out infinite; } }
@keyframes hint-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 46, 0.55); } 50% { box-shadow: 0 0 0 7px rgba(255, 79, 46, 0); } }
@media (max-width: 520px) { .th-msg { font-size: 0.8rem; } }

/* ---------- No layout shift when switching light/dark ----------
   Every swap between the two themes keeps exactly the same footprint, so nothing on the page jumps. */
/* day "Live swing band" text occupies the same box as the night marquee sign */
:root[data-theme="light"] .day-band { width: 100%; max-width: 620px; aspect-ratio: 640 / 110; margin: 0; display: flex; align-items: center; justify-content: center; }
/* day and night logos share one box */
.hero-logo, .hero-logo-day { aspect-ratio: 1174 / 1228; height: auto; object-fit: contain; }
/* polaroid captions use the same sizes in both themes on phones */
@media (max-width: 700px) {
  .band-photo figcaption strong, :root[data-theme="light"] .band-photo figcaption strong { font-size: 0.92rem; }
  .band-photo figcaption span, :root[data-theme="light"] .band-photo figcaption span { font-size: 0.68rem; letter-spacing: 1.5px; }
}

/* Day logo appears with the rest of the scene instead of waiting for the night sign's power-on cue */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="light"] .hero-logo-day { animation: day-in 0.6s ease-out 0.7s both; }
  :root[data-theme="light"] .day-band { animation: day-in 0.6s ease-out 0.9s both; }
}
/* Day logo: no extra fade of its own, and the hero text block becomes visible early in the descent */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="light"] .hero-logo-day, :root[data-theme="light"] .day-band { animation: none; }
  :root[data-theme="light"] .hero-center { animation-name: descend-fade-quick; }
}
@keyframes descend-fade-quick { from { transform: translateY(var(--drop)); opacity: 0; } 12% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }

/* Nav "Booking": styled like the other nav links, with a soft outline that keeps rippling outward to draw the eye */
.nav-links .btn.btn-flame { position: relative; background: transparent; color: var(--cream); font-weight: 500; font-size: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(255, 241, 232, 0.55), 0 0 8px rgba(255, 79, 46, 0.3); }
.nav-links .btn.btn-flame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--neon), 0 0 10px rgba(255, 79, 46, 0.5); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .nav-links .btn.btn-flame::after { animation: nav-ripple 2.4s ease-out infinite; } }
@media (prefers-reduced-motion: reduce) { .nav-links .btn.btn-flame { box-shadow: inset 0 0 0 2px var(--neon), 0 0 10px rgba(255, 79, 46, 0.4); } }
@keyframes nav-ripple { 0% { opacity: 0.9; transform: scale(1); } 70% { opacity: 0; transform: scale(1.22, 1.45); } 100% { opacity: 0; transform: scale(1.22, 1.45); } }
.nav-links .btn.btn-flame:hover, .nav-links .btn.btn-flame:focus-visible { background: transparent; color: var(--tube); box-shadow: inset 0 0 0 2px var(--tube), 0 0 10px var(--neon), 0 0 22px rgba(255, 79, 46, 0.45); transform: translateY(-1px); }
:root[data-theme="light"] .nav-links .btn.btn-flame { color: #1C2347; box-shadow: inset 0 0 0 1.5px rgba(194, 52, 0, 0.6); }
:root[data-theme="light"] .nav-links .btn.btn-flame::after { box-shadow: 0 0 0 1.5px #C23400, 0 0 8px rgba(255, 79, 46, 0.3); }
:root[data-theme="light"] .nav-links .btn.btn-flame:hover, :root[data-theme="light"] .nav-links .btn.btn-flame:focus-visible { background: transparent; color: #C23400; box-shadow: inset 0 0 0 2px #C23400, 0 0 12px rgba(255, 79, 46, 0.28); }
/* Nav bar drop shadow so it floats above the scene */
.site-header { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); }
:root[data-theme="light"] .site-header { box-shadow: 0 4px 14px rgba(28, 35, 71, 0.18), 0 1px 3px rgba(28, 35, 71, 0.14); }

/* ---------- Buttons outside the nav: drop shadow instead of an outline ----------
   Same shape and colours, but no ring around them; they sit on a soft shadow and lift a little higher on hover. */
main .btn, main .btn-flame, main .btn-ghost, .site-footer .social a, main .stack-btn, .bar-top .stack-btn, main .video-play {
  --sh: 0 2px 3px rgba(0, 0, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.35);
  --sh-up: 0 3px 5px rgba(0, 0, 0, 0.35), 0 14px 28px rgba(0, 0, 0, 0.42);
  box-shadow: var(--sh) !important; border: 0; outline: none; }
main .btn-ghost { background: rgba(255, 241, 232, 0.12); color: var(--cream); backdrop-filter: blur(2px); }
.site-footer .social a { background: rgba(255, 241, 232, 0.1); }
main .stack-btn, .bar-top .stack-btn { background: rgba(20, 10, 6, 0.72); }
main .btn:hover, main .btn:focus-visible, .site-footer .social a:hover, .site-footer .social a:focus-visible,
main .stack-btn:not(:disabled):hover, main .stack-btn:not(:disabled):focus-visible, .bar-top .stack-btn:not(:disabled):hover {
  box-shadow: var(--sh-up) !important; transform: translateY(-2px); }
main .btn-ghost:hover, main .btn-ghost:focus-visible { background: rgba(255, 241, 232, 0.2); color: var(--tube); }
.site-footer .social a:hover, .site-footer .social a:focus-visible { background: rgba(255, 241, 232, 0.18); color: #FFF1E8; }
main .stack-btn:not(:disabled):hover, .bar-top .stack-btn:not(:disabled):hover { background: rgba(20, 10, 6, 0.85); color: var(--bulb); }
main .btn-flame:hover, main .btn-flame:focus-visible { background: #D63B00; color: #FFF6EF; }
main .video-lite:hover .video-play, main .video-lite:focus-visible .video-play { box-shadow: var(--sh-up) !important; transform: translateY(-2px) scale(1.04); }
:root[data-theme="light"] main .btn, :root[data-theme="light"] main .stack-btn, :root[data-theme="light"] .bar-top .stack-btn {
  --sh: 0 2px 3px rgba(28, 35, 71, 0.18), 0 8px 18px rgba(28, 35, 71, 0.18);
  --sh-up: 0 3px 5px rgba(28, 35, 71, 0.2), 0 14px 26px rgba(28, 35, 71, 0.24); }
:root[data-theme="light"] main .btn-ghost { background: rgba(255, 255, 255, 0.72); color: #1C2347; }
:root[data-theme="light"] main .btn-ghost:hover, :root[data-theme="light"] main .btn-ghost:focus-visible { background: #FFFFFF; color: #C23400; }
:root[data-theme="light"] .bar-top .stack-btn { background: rgba(255, 247, 232, 0.9); color: #2A1709; }
:root[data-theme="light"] .bar-top .stack-btn:not(:disabled):hover { background: #FFFFFF; color: #8E2318; }
@media (prefers-reduced-motion: reduce) { main .btn:hover, .site-footer .social a:hover, main .stack-btn:hover { transform: none; } }

/* "As seen at": venues the band has played, between About and the video */
.seen-at { margin-top: 64px; text-align: center; }
.seen-head { margin-bottom: 18px; }
.seen-list { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; }
.seen-list li { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(0.95rem, 1.8vw, 1.15rem); color: var(--cream); white-space: nowrap; }
.seen-list li + li::before { content: ""; width: 9px; height: 9px; margin: 0 16px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(180deg, #E23E05 0 50%, #FBF8F0 50% 100%); }
.seen-list .seen-more { font-family: var(--body); font-weight: 500; text-transform: none; letter-spacing: 0; font-style: italic; color: var(--aqua, #6FE3D2); }
:root[data-theme="light"] .seen-list li { color: #0D2A2D; }
:root[data-theme="light"] .seen-list .seen-more { color: #0B6B60; }
@media (max-width: 700px) { .seen-at { margin-top: 44px; } .seen-list li + li::before { margin: 0 10px; } }
/* each venue gets its own bobber dot in front, so wrapped lines never start with a stray separator */
.seen-list { gap: 12px 30px; }
.seen-list li + li::before { content: none; }
.seen-list li:not(.seen-more)::before { content: ""; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(180deg, #E23E05 0 50%, #FBF8F0 50% 100%); }
@media (max-width: 700px) { .seen-list { gap: 10px 22px; } }

/* Listen block: one cohesive section in the same sign style as Now Booking (neon script + neon caps + bobber divider),
   with the "As seen at" venues under the sign and the video below */
.listen-row { margin-top: 88px; }
.listen-intro { max-width: 900px; margin: 0 auto 30px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.listen-intro .sign { align-items: center; }
.listen-intro .neon-script { transform: rotate(-3deg); transform-origin: center; }
.listen-intro .neon-caps { white-space: nowrap; font-size: min(1rem, 2.75vw); letter-spacing: 0.1em; }
.seen-at { margin: 0; text-align: center; }
.seen-label { margin: 0 0 12px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.05; color: var(--cream); }
.lake-rule.lr-center { margin: 0 auto; }
:root[data-theme="light"] .seen-label { color: #0D2A2D; }
@media (max-width: 700px) { .listen-row { margin-top: 60px; } }
/* Script headings: room between the tilted script and the caps line beneath, so they never touch */
.listen-intro .sign, #book .sign-sm { gap: 0; }
.listen-intro .neon-script { transform: rotate(-2deg); line-height: 1.15; padding-bottom: 0.18em; margin-bottom: 6px; }
#book .sign-sm .neon-script { line-height: 1.15; padding-bottom: 0.15em; margin-bottom: 8px; }
.listen-intro .seen-at { margin-top: 10px; }
@media (max-width: 700px) { .listen-intro .neon-script { transform: rotate(-2deg); font-size: clamp(2.3rem, 11vw, 3rem); } }
/* As seen at: plain venue names, no bullet dots */
.seen-list li:not(.seen-more)::before, .seen-list li + li::before { content: none; display: none; }
.seen-list { gap: 12px 34px; }
@media (max-width: 700px) { .seen-list { gap: 10px 24px; } }
.seen-at .lake-rule.lr-center { margin: 4px auto 18px; }
.listen-intro { margin-bottom: 40px; }

/* Page changes: reserve the scrollbar's space so short and long pages line up (no sideways jump) */
html { scrollbar-gutter: stable; }

/* Song book: turning pages carry exactly the same spine shadow as the pages lying flat, so nothing brightens
   at the seam mid-turn (the old leaf highlight flipped onto the spine side of the back face). */
.leaf-face::after { background: none !important; }
.leaf.on-right .leaf-front, .leaf.on-left .leaf-back { box-shadow: inset 26px 0 30px -18px rgba(70,45,15,.55), inset -2px 0 0 rgba(0,0,0,.08); }
.leaf.on-right .leaf-back, .leaf.on-left .leaf-front { box-shadow: inset -26px 0 30px -18px rgba(70,45,15,.55), inset 2px 0 0 rgba(0,0,0,.08); }
.book-stage.is-single .leaf.on-right .leaf-front { box-shadow: inset 18px 0 22px -16px rgba(70,45,15,.5); }

/* ---------- Mobile audit fixes ---------- */
/* Compact sticky header on phones: links on one row, socials live in the footer */
@media (max-width: 560px) {
  html { scroll-padding-top: 112px; }
  .nav { gap: 6px 10px; padding-block: 8px; }
  .nav-links .nav-social, .nav-social { display: none !important; }
  .nav > .nav-links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; width: 100%; flex-basis: 100%; margin: 0; }
  .nav-links > a { width: auto !important; min-width: 0; height: 40px; padding: 0 2px !important; margin: 0 !important; display: grid; place-items: center; font-size: clamp(0.78rem, 3.6vw, 0.9rem); white-space: nowrap; }
  .nav-links > a[hidden] { display: none !important; }
  .brand span { font-size: clamp(0.92rem, 4.6vw, 1.05rem); }
}
/* Less dead space between sections on phones */
@media (max-width: 700px) { .section { padding-block: 60px; } }
/* Bigger tap targets and readable small print */
.site-footer a[href="#top"] { display: inline-block; padding: 10px 0; }
@media (max-width: 700px) {
  .band-photo figcaption .bp-link, :root[data-theme="light"] .band-photo figcaption .bp-link { font-size: 0.68rem; letter-spacing: -0.02em; padding: 6px 0; display: inline-block; }
  .listen-intro .neon-caps { font-size: min(1rem, 3.1vw); letter-spacing: 0.06em; }
  .dir-btn { font-size: 0.8rem; min-height: 40px; }
}
/* Songbook: scale page type to the page so nothing is clipped on small screens */
.page, .leaf-face { container-type: size; }
.book-stage.is-single { aspect-ratio: 0.66; }
.pg-run { font-size: min(0.62rem, 2.1cqh); }
.pg-num { font-size: min(0.82rem, 2.7cqh); }
.pg-h { font-size: min(clamp(1.1rem, 2.4vw, 1.6rem), 4.6cqh); }
.ct-list li { font-size: min(0.92rem, 3.05cqh); padding-block: min(2px, 0.3cqh); }
.sb-no { font-size: min(0.62rem, 2.1cqh); }
.sb-t { font-size: min(clamp(1rem, 1.9vw, 1.22rem), 3.5cqh); }
.sb-y { font-size: min(0.95rem, 3cqh); }
.sb-s { font-size: min(0.9rem, 2.9cqh); }
.pt-desc { font-size: min(0.92rem, 3cqh); }
.sb-list { gap: min(14px, 2.2cqh); }
.sb-t { font-size: min(clamp(1rem, 1.9vw, 1.22rem), 3.3cqh); }
@media (max-width: 480px) { .book-stage.is-single { aspect-ratio: 0.64; } }
/* paused while off screen (set by app.js) */
.anim-paused, .anim-paused *, .anim-paused *::before, .anim-paused *::after { animation-play-state: paused !important; }
/* 404 page */
.nf { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.nf-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 640px; }
.nf h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.2rem); }
.nf p { margin: 0; }
.nf-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
:root[data-theme="light"] .nf .neon-script { color: #C23400; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
:root[data-theme="light"] .nf .neon-caps { color: #1C2347; text-shadow: none; font-weight: 700; }
/* booking form: spam trap + sent state */
.form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.book-form.is-sent > :not(.form-sent):not(.form-tab) { display: none !important; }
.form-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0 4px; outline: none; }
.form-sent p { margin: 0; }
.form-sent-title { font: 400 clamp(1.6rem, 5vw, 2.1rem)/1.1 var(--script); color: #D9FFF8; text-shadow: 0 0 2px #E8FFFB, 0 0 10px #3FD6C2; }
:root[data-theme="light"] .form-sent-title { color: #0F7F72; text-shadow: none; }
.form-sent-title { font: 700 1.3rem/1.25 var(--body); text-shadow: none; color: #7FF0DF; }
:root[data-theme="light"] .form-sent-title { color: #0F7F72; }