/* TAM.TV: one design system, themed per festival (data-theme on <html>).
   The look comes from The Best Christmas Ever: chrome display type, an acid
   ticker, offset-shadow buttons and a night-sky background that reacts to music. */

:root {
  --night: #0b0709; --panel: #160e12; --panel-2: #1f141a; --line: #3a2a31;
  --ink: #f6ecd8; --ink-dim: #c9b9a2; --muted: #9a8b80;
  --gold: #e8c77a; --gold-deep: #a8752e; --pink: #ff2e88; --cyan: #00d8ff; --acid: #ffe500; --violet: #8a2be2; --red: #ff3b4e;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --f-display: 'DM Serif Display', 'Times New Roman', Georgia, serif;
  --f-inline: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif; --f-space: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --f-disco: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif; --f-hand: 'Caveat', cursive;
  --syn-bass: 0; --syn-mid: 0; --syn-treb: 0; --syn-beat: 0; --syn-color: #e8c77a;
  --r: 18px; --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
[data-theme="tam"] { --acid: #f3c35b; --pink: #b25cff; --cyan: #5ce1ff; }
[data-theme="christmas"] { --night: #0b0709; --acid: #ffe500; --pink: #ff2e88; --red: #ff3b4e; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 17px/1.6 var(--f-body); overflow-x: clip; min-height: 100vh; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--acid); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.05; margin: 0 0 .4em; }
h1 { font: 400 clamp(44px, 8vw, 96px)/1 var(--f-display); }
h2 { font: 400 clamp(32px, 5vw, 60px)/1.05 var(--f-display); }
h3 { font: 700 22px/1.2 var(--f-body); }
p { margin: 0 0 1em; }
.wrap { width: min(1200px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { width: min(820px, 100%); }
.section { padding: clamp(48px, 8vw, 96px) 0; position: relative; z-index: 1; }
.muted { color: var(--muted); } .small { font-size: 14px; }
.sr, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--acid); color: #120a0a; padding: 8px 14px; border-radius: 8px; }
.label { display: inline-block; font: 400 13px/1.3 var(--f-space); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); text-decoration: none; margin-bottom: 10px; }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--ink-dim); max-width: 60ch; }
.intro { color: var(--ink-dim); max-width: 52ch; }
.badge { display: inline-block; font: 400 11px/1 var(--f-space); letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(180deg, #fff3c4, var(--gold) 50%, var(--gold-deep)); color: #2a1606; padding: 5px 9px; border-radius: 999px; }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.head .more { font: 400 14px var(--f-space); letter-spacing: .12em; text-transform: uppercase; }
.month { font: 400 15px/1 var(--f-space); letter-spacing: .2em; text-transform: uppercase; color: var(--acid); margin: 40px 0 16px; }
ul.plain { list-style: none; padding: 0; margin: 0 0 1em; } ul.plain li { padding: 6px 0; border-bottom: 1px solid var(--line); }
ul.cols { columns: 2 280px; column-gap: 40px; } ul.cols li { break-inside: avoid; }

/* chrome display type: gradient fill, offset shadows that move with the bass */
.chrome { background-image: linear-gradient(180deg, #ffffff 0%, #e6e9f2 30%, #6c7286 48%, #2c2f3a 52%, #9aa1b5 62%, #f2f4fa 85%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(3px 3px 0 #0e0616) drop-shadow(calc(4px + var(--syn-bass) * 10px) calc(4px + var(--syn-bass) * 10px) 0 var(--syn-color)) drop-shadow(calc(4px - var(--syn-mid) * 12px) 4px 0 var(--cyan)); }
.chrome.gold { background-image: linear-gradient(180deg, #fffce6 0%, #ffd682 30%, #965c1e 48%, #46240e 52%, #c88232 60%, #ffdc8c 82%, #fff8dc 100%); }
.chrome.red { background-image: linear-gradient(180deg, #ffdce1 0%, #ff506e 32%, #5a061e 50%, #aa1432 56%, #ff4659 80%, #ffbeaa 100%); }
.mega { font-size: clamp(60px, 10vw, 136px); overflow-wrap: anywhere; }
.flush { margin: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; font: 400 15px/1 var(--f-inline); letter-spacing: .06em; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn.hot { background: var(--acid); color: #120a0a; box-shadow: 4px 4px 0 var(--pink), 8px 8px 0 var(--cyan); }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--gold); }
.btn.small { min-height: 38px; padding: 0 16px; font-size: 13px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.ctas, .row-btn { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin: 20px 0; }

/* header */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--night) 84%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 400 22px/1 var(--f-inline); }
.brand b { color: var(--acid); font-weight: 400; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--ink-dim); text-decoration: none; font-size: 15px; white-space: nowrap; }
.nav a:hover, .nav .fest-link { color: var(--acid); }
.menu-btn { display: none; margin-left: auto; background: none; border: 2px solid var(--line); color: var(--ink); border-radius: 999px; padding: 8px 14px; font: inherit; }
@media (max-width: 920px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--panel); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px; }
  .nav.open { display: flex; } .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .top .btn { display: none; }
}
.subnav { position: sticky; top: 64px; z-index: 20; background: color-mix(in srgb, var(--panel) 90%, transparent); border-bottom: 1px solid var(--line); overflow-x: auto; }
.subnav .wrap { display: flex; gap: 22px; padding-block: 10px; }
.subnav a { color: var(--ink-dim); text-decoration: none; font: 400 13px var(--f-space); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }

/* hero */
.hero { position: relative; z-index: 1; padding: clamp(48px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.hero-mark img { width: min(420px, 100%); margin-left: auto; filter: drop-shadow(0 0 calc(30px + var(--syn-bass) * 60px) color-mix(in srgb, var(--syn-color) 60%, transparent)); }
.meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 14px/1.3 var(--f-space); letter-spacing: .14em; color: var(--acid); margin: 18px 0; padding: 0; }
.meta span + span::before { content: '✦'; margin-right: 22px; color: var(--pink); }
.lockup { width: min(640px, 100%); }
.tree { position: relative; } .tree img { width: min(360px, 100%); margin: 0 auto; filter: drop-shadow(0 0 calc(24px + var(--syn-bass) * 50px) color-mix(in srgb, var(--syn-color) 70%, transparent)); }
.glint { position: absolute; width: 14px; height: 14px; background: radial-gradient(circle, #fff 0 20%, transparent 70%); animation: glint 2.4s ease-in-out infinite; }
@keyframes glint { 0%, 100% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1.6); opacity: 1; } }
.next { margin-top: 24px; } .presenters { font: 400 18px var(--f-space); color: var(--cyan); }
.ev-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.ev-art { border-radius: var(--r); box-shadow: 8px 8px 0 var(--pink), 16px 16px 0 var(--cyan); }
@media (max-width: 820px) { .hero .wrap, .ev-in { grid-template-columns: 1fr; } .hero-mark { order: -1; max-width: 220px; } .tree img { max-height: 280px; width: auto; } }

/* countdown */
.countdown { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.countdown .cd-unit { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; text-align: center; min-width: 70px; }
.countdown .cd-unit b { display: block; font: 400 30px/1 var(--f-disco); color: var(--acid); }
.countdown .cd-unit small { font: 400 10px var(--f-space); letter-spacing: .18em; color: var(--muted); }
.countdown a { margin-left: 8px; }

/* ticker */
.ticker { position: relative; z-index: 2; background: var(--acid); color: #120a0a; overflow: hidden; border-block: 3px solid #120a0a; }
.ticker .row { display: flex; width: max-content; animation: tick 26s linear infinite; }
.ticker span { font: 400 clamp(22px, 3vw, 34px)/1 var(--f-inline); padding: 14px 22px; white-space: nowrap; }
.ticker span:nth-child(4n+2) { color: var(--pink); } .ticker span:nth-child(4n+4) { color: var(--violet); }
@keyframes tick { to { transform: translateX(-50%); } }

/* cards and grids */
.nights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.night-card a { display: flex; gap: 16px; padding: 18px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; height: 100%; transition: transform .15s, border-color .15s; }
.night-card a:hover { transform: translateY(-3px); border-color: var(--gold); }
.nc-date { text-align: center; min-width: 54px; } .nc-date b { display: block; font: 400 38px/1 var(--f-disco); color: var(--acid); }
.nc-date span, .nc-date small { display: block; font: 400 12px var(--f-space); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nc-body h3 { font-size: 19px; margin-bottom: 4px; } .nc-body .label { font-size: 10px; margin-bottom: 4px; }
.price { font: 700 17px var(--f-body); color: var(--gold); margin: 6px 0 0; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; overflow: hidden; }
.card img { width: 70%; margin: 10px 0 -30px auto; }
.card.c1 h3 { color: var(--acid); } .card.c2 h3 { color: var(--pink); } .card.c3 h3 { color: var(--cyan); } .card.c4 h3 { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; font: 500 14px var(--f-body); cursor: pointer; }
.chip[aria-pressed="true"], .chip.on { border-color: var(--acid); background: color-mix(in srgb, var(--acid) 18%, var(--panel)); }
.artist-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-left: -6px; }
.yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.yt { display: block; color: var(--ink); text-decoration: none; } .yt img { aspect-ratio: 16/9; object-fit: cover; border-radius: 14px; width: 100%; }
.yt span { display: block; margin-top: 8px; font-size: 15px; } .yt iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 14px; }
.lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.artist-card img { aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin-bottom: 10px; width: 100%; }
.artist-card h3 a { color: var(--ink); text-decoration: none; }
.schedule { list-style: none; padding: 0; } .schedule li { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.schedule b { font: 400 18px var(--f-space); color: var(--acid); }
.az { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0; } .az a { padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.year { display: block; padding: 22px; text-align: center; font: 400 34px var(--f-disco); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; }
.fest-banner { background: radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--pink) 25%, transparent), transparent 60%), var(--panel); border-block: 1px solid var(--line); }
.fb-in { display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center; } .fb-art { max-height: 420px; margin: 0 auto; }
@media (max-width: 760px) { .fb-in { grid-template-columns: 1fr; } .fb-art { max-height: 220px; } }
.fest-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 40px; }
.fest-tile { display: block; padding: 24px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }

/* festival sections */
.trailer .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; }
.trailer .remix { grid-column: 1 / -1; }
@media (max-width: 900px) { .trailer .wrap { grid-template-columns: 1fr; } }
.vid { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 8px 8px 0 var(--pink), 16px 16px 0 var(--cyan); background: #000; }
.xvideo { position: relative; aspect-ratio: 16/9; } .xvideo iframe, .xvideo #trailer-player, .vthumb { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; padding: 14px 22px; border-radius: 999px; border: 0; background: var(--acid); color: #120a0a; font: 400 16px var(--f-inline); cursor: pointer; box-shadow: 4px 4px 0 var(--pink); }
.vid.playing .vthumb, .vid.playing .vplay { display: none; }
.storybook { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; pointer-events: none; display: flex; justify-content: flex-start; }
.story { max-width: 380px; background: color-mix(in srgb, #fff8e8 94%, transparent); color: #24140c; border-radius: 6px; padding: 12px 16px; box-shadow: 4px 4px 0 rgba(0,0,0,.4); transform: rotate(-1.2deg) scale(calc(1 + var(--syn-beat) * .03)); animation: page .6s ease; }
.story .k { font: 400 12px var(--f-space); letter-spacing: .14em; text-transform: uppercase; color: #a8331b; } .story p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.story img { width: 90px; float: right; margin: 0 0 6px 10px; border: 4px solid #fff; transform: rotate(3deg); }
@keyframes page { from { transform: rotate(-12deg) translateY(30px); opacity: 0; } }
.fx-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fx-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-glow { position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(255, 170, 60, .55); mix-blend-mode: screen; }
.fx-pop { position: absolute; inset: 0; background: radial-gradient(circle, transparent 1.5px, rgba(255, 46, 136, .22) 2px) 0 0 / 9px 9px; mix-blend-mode: multiply; }
.fx-leaks { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255, 90, 0, .35), transparent 30%, transparent 70%, rgba(255, 0, 140, .3)); mix-blend-mode: screen; animation: leak 6s ease-in-out infinite alternate; }
@keyframes leak { to { opacity: .3; transform: translateX(6%); } }
.fx-pulse { position: absolute; inset: 0; border: calc(2px + var(--syn-beat) * 14px) solid color-mix(in srgb, var(--syn-color) 70%, transparent); border-radius: 22px; }
.fx-photos { position: absolute; right: 10px; top: 10px; display: flex; gap: 8px; z-index: 3; }
.fx-photos img { width: 70px; background: #fff; padding: 4px 4px 12px; transform: rotate(-4deg) scale(calc(1 + var(--syn-beat) * .06)); }
.fx-photos img:nth-child(even) { transform: rotate(4deg); }
.song .who a { font: 400 22px var(--f-inline); color: var(--cyan); text-decoration: none; }
.switch { display: flex; gap: 10px; align-items: center; margin: 18px 0; } .themes .chips { margin-top: 8px; } .themes .chip { font-size: 13px; padding: 5px 11px; }
.remix { margin-top: 40px; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 3vw, 36px); }
.remix-head { display: flex; flex-wrap: wrap; gap: 10px 40px; justify-content: space-between; } .remix-head h3 { font: 400 30px var(--f-display); }
.remix-grid { display: grid; gap: 20px; margin: 20px 0; }
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; margin: 0; min-width: 0; }
legend { padding: 0 8px; font: 400 13px var(--f-space); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pola-pick, .own-pick { display: flex; flex-wrap: wrap; gap: 12px; }
.pola { background: #fff; padding: 5px 5px 16px; border: 3px solid transparent; cursor: pointer; transform: rotate(-2deg); } .pola:nth-child(even) { transform: rotate(2deg); }
.pola img { width: 76px; height: 76px; object-fit: cover; } .pola[aria-pressed="true"] { border-color: var(--acid); }
.own-add { display: grid; place-items: center; width: 92px; height: 108px; border: 2px dashed var(--line); border-radius: 8px; text-align: center; font-size: 13px; cursor: pointer; padding: 6px; }
.own-add input { display: none; } .own-thumb { width: 92px; height: 108px; object-fit: cover; border-radius: 8px; }
.pola-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.card-out { margin-top: 20px; } .card-link { display: flex; gap: 10px; margin: 10px 0; } .card-link input { flex: 1; }
.dates .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; } .big { font-size: clamp(70px, 12vw, 150px); }
@media (max-width: 860px) { .dates .wrap { grid-template-columns: 1fr; } }
.cal { width: 100%; border-collapse: separate; border-spacing: 6px; text-align: center; } .cal caption { margin-bottom: 8px; }
.cal th { font: 400 12px var(--f-space); letter-spacing: .14em; color: var(--muted); }
.cal td { padding: 0; height: 46px; border-radius: 10px; font: 400 17px var(--f-space); color: var(--muted); }
.cal td a { display: grid; place-items: center; height: 100%; border-radius: 10px; text-decoration: none; color: #120a0a; background: var(--gold); font-weight: 700; }
.cal td.wk a { background: var(--acid); } .cal td.edge a { background: var(--cyan); }
.cal td.closed { background: repeating-linear-gradient(45deg, transparent 0 6px, var(--line) 6px 8px); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13px; color: var(--ink-dim); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.k-edge { background: var(--cyan); } .k-wk { background: var(--acid); } .k-on { background: var(--gold); } .legend .x { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--muted) 3px 4px); }
.charity { background: radial-gradient(ellipse at 20% 50%, rgba(255, 59, 78, .2), transparent 60%); }
.charity-in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.charity-heart { font-size: clamp(120px, 18vw, 240px); color: var(--red); transform: scale(calc(1 + var(--syn-beat) * .12)); line-height: 1; }
@media (max-width: 700px) { .charity-in { grid-template-columns: 1fr; } .charity-heart { display: none; } }
.raised { font: 400 22px var(--f-space); color: var(--acid); }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; padding-left: 1.2em; }
.table-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }
.ttable { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; } .ttable h4 { margin: 0 0 8px; color: var(--acid); }
.pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.pin { background: #fff8e8; color: #24140c; padding: 16px; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 4px 4px 0 rgba(0,0,0,.4); position: relative; }
.pin:nth-child(even) { transform: rotate(1.5deg); } .pin::before { content: ''; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--red); }
.pin.gold::before { background: var(--gold); box-shadow: 0 0 10px var(--gold); } .pin img { max-height: 60px; margin-bottom: 8px; } .pin a { color: #a8331b; }
.xbox { display: flex; gap: 16px; align-items: center; background: var(--panel); border-radius: var(--r); padding: 16px 20px; margin-bottom: 20px; } .gift { font-size: 42px; }
.pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 28px; }
.pkg { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; } .pkg h3 { font: 400 30px var(--f-display); color: var(--acid); }
.visit .addr { font: 400 20px/1.5 var(--f-space); }
.facts { list-style: none; padding: 0; } .facts li { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* forms */
.formbox { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 3vw, 30px); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 16px 0; }
.field { display: grid; gap: 6px; } .field.full, .check.full { grid-column: 1 / -1; } .field > span { font-size: 14px; color: var(--ink-dim); }
@media (max-width: 600px) { .fields { grid-template-columns: 1fr; } }
input, select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--night); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--acid); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.err { color: #ff8a9a; min-height: 1.2em; margin: 10px 0 0; } .err.good { color: #7dffb0; }
.hint { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.ok { background: color-mix(in srgb, var(--acid) 12%, var(--panel)); border: 2px solid var(--acid); border-radius: 22px; padding: 24px; margin-top: 24px; }
.tix-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .tix-grid { grid-template-columns: 1fr; } .summary { position: static; } }
.step { margin-bottom: 18px; } .step legend b, .lg b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--acid); color: #120a0a; margin-right: 8px; font-size: 13px; }
.lg { font: 400 13px var(--f-space); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.nights { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.nights button { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--night); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.nights button[aria-pressed="true"] { border-color: var(--acid); background: color-mix(in srgb, var(--acid) 16%, var(--night)); }
.nights button small { display: block; color: var(--muted); font-size: 12px; } .nights button b { color: var(--gold); }
.nights button:disabled { opacity: .35; }
.types { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.type { display: block; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; position: relative; }
.type:has(input:checked) { border-color: var(--acid); background: color-mix(in srgb, var(--acid) 10%, transparent); }
.type input { position: absolute; opacity: 0; } .type h4 { margin: 0 0 4px; font-size: 17px; } .type p { margin: 0; font-size: 14px; color: var(--ink-dim); }
.type .tag { font: 400 10px var(--f-space); letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.type .tp { font-weight: 700; color: var(--gold); }
.qty { display: inline-flex; align-items: center; margin-top: 10px; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty button { width: 46px; height: 46px; font-size: 22px; background: var(--panel-2); color: var(--ink); border: 0; cursor: pointer; } .qty input { width: 70px; text-align: center; border: 0; border-radius: 0; }
.mix { display: grid; gap: 10px; } .opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.opt small { display: block; color: var(--muted); font-size: 13px; } .opt:has(input:checked) { border-color: var(--acid); }
.tables-pick { display: grid; gap: 8px; padding-left: 28px; }
.summary { position: sticky; top: 140px; background: var(--panel); border: 1.5px solid var(--gold); border-radius: 22px; padding: 22px; }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; } .summary dt { color: var(--muted); } .summary dd { margin: 0; text-align: right; }
.save { color: #7dffb0; } .total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding: 14px 0; font-size: 18px; }
.total b { font: 400 34px var(--f-disco); color: var(--acid); } .summary .btn { width: 100%; }
.give { margin: 10px 0; } .give-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .give-other { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

/* invitations, cards, tickets */
.invite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.invite-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px; color: var(--ink); cursor: pointer; font: inherit; font-size: 14px; text-align: left; }
.invite-tile img { aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin-bottom: 6px; width: 100%; }
.invite-dialog { background: transparent; border: 0; padding: 0; width: min(560px, 94vw); color: var(--ink); } .invite-dialog::backdrop { background: rgba(0,0,0,.7); }
.invite-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: center; background: var(--panel); border: 1.5px solid var(--gold); border-radius: 26px; padding: clamp(18px, 3vw, 32px); }
.invite-card img { border-radius: 16px; } .invite-card img.polaroid { background: #fff; padding: 8px 8px 30px; border-radius: 2px; transform: rotate(-3deg); }
@media (max-width: 640px) { .invite-card { grid-template-columns: 1fr; } }
.hand { font: 600 28px/1.2 var(--f-hand); color: var(--acid); } .hand.from { text-align: right; }
.envelope { display: grid; place-items: center; gap: 10px; width: min(560px, 100%); aspect-ratio: 3/2; margin: 0 auto; border: 0; border-radius: 16px; cursor: pointer; color: #3b1d0b;
  background: linear-gradient(160deg, #fff4dc, #f0d8a8); box-shadow: 8px 8px 0 var(--pink), 16px 16px 0 var(--cyan); font: inherit; }
.env-to { font: 600 34px var(--f-hand); } .env-seal { width: 64px; height: 64px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font: 400 16px var(--f-inline); } .env-tap { font: 400 12px var(--f-space); letter-spacing: .18em; text-transform: uppercase; }
.card-msg { margin: 24px 0; }
.ticket { text-align: center; } .ticket .meta { justify-content: center; } .qr { background: #fff; padding: 14px; border-radius: 14px; margin: 20px auto; }
.tdl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; text-align: left; max-width: 420px; margin: 0 auto 20px; } .tdl dt { color: var(--muted); } .tdl dd { margin: 0; }
.door-panel:empty { display: none; } .door-panel { border-radius: 22px; padding: 20px; margin-bottom: 24px; text-align: center; border: 3px solid var(--line); background: var(--panel); }
.door-panel.yes { border-color: #36e08a; } .door-panel.no { border-color: #ff4a62; } .door-mark { font-size: 80px; line-height: 1; }
.big-count { font: 400 32px var(--f-space); } .big-count b { font: 400 64px var(--f-disco); color: var(--acid); }
.books { display: grid; gap: 22px; margin-bottom: 20px; } .book { display: grid; grid-template-columns: 160px 1fr; gap: 22px; } .book img { border-radius: 6px; box-shadow: 6px 6px 0 var(--pink); }
@media (max-width: 560px) { .book { grid-template-columns: 100px 1fr; } }
.legacy p { color: var(--ink-dim); } .legacy-img { border-radius: 14px; margin: 20px 0; } .legacy-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 20px 0; } .legacy-gallery img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; }
.prose ul { padding-left: 1.2em; } .prose li { margin-bottom: 8px; }

/* staff */
.staff table { width: 100%; border-collapse: collapse; font-size: 14px; } .staff th, .staff td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.staff th { font: 400 11px var(--f-space); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.staff td .btn { min-height: 30px; padding: 0 10px; font-size: 11px; margin: 2px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; } .scroll { overflow-x: auto; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; } .stat b { display: block; font: 400 30px var(--f-space); color: var(--acid); }

/* footer */
.foot { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 48px 0 calc(100px + env(safe-area-inset-bottom)); background: var(--panel); }
.foot .foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; }
.foot nav { display: grid; gap: 8px; align-content: start; } .foot nav a { color: var(--ink-dim); text-decoration: none; } .foot-logo { width: 96px; margin-bottom: 14px; }
@media (max-width: 700px) { .foot .foot-grid { grid-template-columns: 1fr 1fr; } .foot .foot-grid > div { grid-column: 1 / -1; } }

/* the night sky and the Tamalume player */
.ambient { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.syn { position: fixed; z-index: 40; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px;
  border-radius: 999px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(10px); border: 1.5px solid color-mix(in srgb, var(--syn-color) 60%, var(--line)); box-shadow: 0 0 calc(var(--syn-energy, 0) * 40px) var(--syn-color); max-width: calc(100vw - 24px); }
.syn-play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--acid); color: #120a0a; display: grid; place-items: center; cursor: pointer; flex: none; }
.syn-play svg { width: 22px; height: 22px; } .syn-play .i-pause, .syn-play[aria-pressed="true"] .i-play { display: none; } .syn-play[aria-pressed="true"] .i-pause { display: block; }
.syn-title { font: 400 13px var(--f-inline); letter-spacing: .06em; } .syn-now { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.syn-bars { width: 96px; height: 32px; } .syn-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim); }
.syn-note i { width: 14px; height: 14px; border-radius: 50%; background: var(--syn-color); box-shadow: 0 0 10px var(--syn-color); }
.syn select { width: auto; padding: 6px 8px; font-size: 13px; border-radius: 999px; }
.syn-yt { position: fixed; width: 2px; height: 2px; left: -10px; bottom: 0; overflow: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .syn-bars, .syn-note { display: none; } .syn-now { max-width: 120px; } }

/* ---------- pathways and Ask TAM ---------- */
.linkish { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.for-you { color: var(--ink-dim); text-decoration: none; font-size: 14px; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.for-you:hover { border-color: var(--gold); color: var(--acid); }
@media (max-width: 920px) { .for-you { display: none; } }
.home-hero .wrap:first-child { align-items: start; }
.home-hero h1 { font-size: clamp(42px, 6.5vw, 84px); }
.home-ask, .path-ask { background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1.5px solid var(--gold); border-radius: 24px; padding: 18px; box-shadow: 8px 8px 0 var(--pink), 16px 16px 0 var(--cyan); }
.home-ask .label, .path-ask .label { margin-bottom: 8px; }
.path-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .path-in { grid-template-columns: 1fr; } }
.path-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 36px 0 12px; }
.path-tile { display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--panel); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .15s, border-color .15s; }
.path-tile:hover, .path-tile.on { transform: translateY(-3px); border-color: var(--acid); }
.path-tile.on { background: color-mix(in srgb, var(--acid) 10%, var(--panel)); }
.path-tile b { font: 400 18px/1.2 var(--f-inline); color: var(--acid); }
.path-tile small { color: var(--ink-dim); font-size: 14px; line-height: 1.4; }
.pt-icon { font-size: 30px; line-height: 1; }
.path-tiles.small .path-tile { grid-template-columns: auto 1fr; align-items: center; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.step-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.step-card:hover { border-color: var(--gold); } .step-card p { color: var(--ink-dim); margin: 0; } .step-card .more { color: var(--acid); font: 400 13px var(--f-space); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }
.step-n { font: 400 40px/1 var(--f-disco); color: var(--pink); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.facts-grid ul.plain li { border-color: var(--line); }

.chat { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.chat-log { display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.chat-log:empty { display: none; }
.cmsg { max-width: 92%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.cmsg p { margin: 0 0 .5em; } .cmsg p:last-child { margin: 0; }
.cmsg.user { align-self: flex-end; background: var(--acid); color: #120a0a; border-bottom-right-radius: 4px; }
.cmsg.assistant { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cmsg.assistant a { color: var(--acid); }
.cstatus { color: var(--muted); display: flex; gap: 8px; align-items: center; }
.cstatus i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .2; transform: scale(.6); } }
.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 10px; }
.ccard { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--night); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; }
.ccard:hover { border-color: var(--acid); } .ccard b { font-size: 14px; line-height: 1.25; } .ccard span { color: var(--muted); }
.ccard .cprice { color: var(--gold); font-weight: 700; } .ccard .cgo { color: var(--acid); font-weight: 700; }
.ccard.book { border-color: var(--acid); } .ccard.done { border-color: #36e08a; }
.ccard.artist img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; } .chat-suggest .chip { font-size: 13px; padding: 6px 12px; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea { resize: none; min-height: 46px; max-height: 140px; field-sizing: content; }
.chat-foot { font-size: 12px; color: var(--muted); margin: 0; }

.ask-fab { position: fixed; z-index: 45; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); display: inline-flex; gap: 8px; align-items: center; padding: 12px 18px; border: 0; border-radius: 999px;
  background: var(--acid); color: #120a0a; font: 400 15px var(--f-inline); letter-spacing: .04em; cursor: pointer; box-shadow: 4px 4px 0 var(--pink), 8px 8px 0 var(--cyan); }
.ask-fab span { font-size: 18px; }
.ask-on .ask-fab { display: none; }
.ask-drawer { position: fixed; z-index: 60; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); max-height: min(680px, calc(100vh - 32px)); display: flex; flex-direction: column; gap: 10px;
  background: var(--panel); border: 1.5px solid var(--gold); border-radius: 22px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.ask-drawer .chat { flex: 1; } .ask-drawer .chat-log { max-height: none; flex: 1; }
.ask-head { display: flex; justify-content: space-between; align-items: start; } .ask-head small { display: block; color: var(--muted); }
.ask-head b { font: 400 20px var(--f-inline); color: var(--acid); }
.ask-x { background: none; border: 0; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
@media (max-width: 600px) { .ask-drawer { inset: 0; width: auto; max-height: none; border-radius: 0; } .ask-fab { bottom: calc(84px + env(safe-area-inset-bottom)); right: 12px; } }

@media (min-width: 901px) { .has-inline-chat .ask-fab { display: none; } }

/* ---------- Legacy type, clean finish ----------
   DM Serif Display for headlines, Bebas Neue for labels, dates and buttons,
   Inter to read. Solid colour instead of chrome, soft depth instead of offset
   shadows. The music still lights the headlines, gently. */
body { font-size: 16.5px; letter-spacing: -.003em; }
h1 { font-size: clamp(42px, 7vw, 88px); line-height: 1.02; letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.005em; }
h3 { font-weight: 600; letter-spacing: -.01em; }
.chrome, .chrome.gold, .chrome.red { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); filter: none;
  text-shadow: 0 0 calc(var(--syn-bass) * 30px) color-mix(in srgb, var(--syn-color) 75%, transparent); }
.chrome.gold { color: var(--gold); }
.chrome.red { color: #ff7f8a; }
.mega { font-size: clamp(56px, 9vw, 120px); }
.label, .lg, legend { font-size: 16px; letter-spacing: .12em; }
.label .muted { letter-spacing: .08em; }
.meta { font-size: 19px; letter-spacing: .08em; }
.meta span + span::before { color: var(--gold-deep); }
.month { font-size: 22px; letter-spacing: .1em; }
.head .more, .subnav a, .step-card .more { font-size: 16px; letter-spacing: .1em; }
.badge { background: var(--gold); font-size: 13px; letter-spacing: .1em; padding: 5px 10px 4px; }
.btn { font-size: 18px; letter-spacing: .07em; padding: 2px 24px 0; }
.btn.small { font-size: 16px; }
.btn.hot, .vplay { box-shadow: 0 8px 24px color-mix(in srgb, var(--acid) 22%, transparent); }
.btn.hot:hover { background: color-mix(in srgb, var(--acid) 88%, #fff); }
.btn:hover { transform: translateY(-1px); }
.brand { font-size: 26px; letter-spacing: .04em; }
.ticker span { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: .06em; padding: 12px 22px 9px; }
.ticker span:nth-child(4n+2), .ticker span:nth-child(4n+4) { color: inherit; }
.countdown .cd-unit b { font-size: 40px; } .countdown .cd-unit small { font-size: 13px; letter-spacing: .1em; }
.nc-date b { font-size: 48px; } .nc-date span, .nc-date small { font-size: 15px; letter-spacing: .08em; }
.total b { font-size: 42px; } .big-count b { font-size: 76px; } .year { font-size: 44px; } .step-n { font-size: 46px; } .stat b { font-size: 36px; }
.schedule b { font-size: 21px; } .presenters { font-size: 22px; } .raised { font-size: 26px; } .visit .addr { font-family: var(--f-body); font-size: 19px; }
.cal th { font-size: 15px; } .cal td { font-size: 20px; } .type .tag { font-size: 14px; } .story .k { font-size: 15px; } .staff th { font-size: 13px; }
.path-tile b { font-size: 22px; letter-spacing: .05em; } .ask-head b { font-size: 24px; letter-spacing: .05em; } .syn-title { font-size: 17px; letter-spacing: .06em; }
.song .who a, .env-seal { font-size: 22px; letter-spacing: .06em; } .env-tap { font-size: 15px; }
.remix-head h3, .pkg h3 { font-size: 34px; }
.ev-art, .vid, .envelope, .home-ask, .path-ask { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.book img { box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.home-ask, .path-ask { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }

/* ---------- the Ask TAM avatar ---------- */
.ask-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; }
.ask-head { align-items: center; } .ask-head > div { display: flex; gap: 12px; align-items: center; }
.ask-fab { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); padding: 6px 18px 6px 6px; font-size: 18px; letter-spacing: .06em; }
.ask-fab img { width: 36px; height: 36px; border-radius: 50%; }
.ask-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ask-title .label { margin: 0; }
.ask-title small { display: block; color: var(--muted); font-size: 13px; }
.crow { display: flex; gap: 10px; align-items: flex-start; max-width: 96%; }
.crow .cav { width: 30px; height: 30px; border-radius: 50%; flex: none; margin-top: 2px; }
.crow .cmsg { max-width: none; flex: 1; min-width: 0; }

/* ---------- neon modern-art icons (public/img/neon/) ---------- */
.neon-ico { display: block; }
.pt-icon { width: 64px; height: 64px; margin: -6px 0 2px -6px; transition: transform .2s ease, filter .2s ease; }
.path-tiles.small .pt-icon { width: 44px; height: 44px; margin: -4px 0; }
.path-tile:hover .pt-icon, .path-tile.on .pt-icon { transform: scale(1.06); animation: neon-flicker 1.4s linear 1; filter: brightness(1.15); }
.for-you { display: inline-flex; align-items: center; gap: 6px; }
.for-you .neon-ico { width: 22px; height: 22px; }
.gift { width: 64px; height: 64px; flex: none; }
.charity-heart { width: clamp(140px, 18vw, 230px); height: auto; transform: scale(calc(1 + var(--syn-beat) * .08)); }
.ask-avatar, .crow .cav, .ask-fab img { background: #0d0811; }
@keyframes neon-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .55; } 10% { opacity: 1; } 14% { opacity: .7; } 16% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .path-tile:hover .pt-icon { animation: none; } }

/* ---------- Play the site ---------- */
.play-site { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-dim);
  font: 400 16px/1 var(--f-inline); letter-spacing: .08em; cursor: pointer; transition: border-color .2s, color .2s, box-shadow .2s; }
.play-site:hover { border-color: var(--gold); color: var(--ink); }
.play-site[aria-pressed="true"] { color: #fff; border-color: #ff3ea5; box-shadow: 0 0 0 1px #ff3ea5 inset, 0 0 18px rgba(255, 62, 165, .45); }
.ps-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.ps-eq i { width: 3px; height: 4px; border-radius: 2px; background: currentColor; }
.play-site[aria-pressed="true"] .ps-eq i { animation: eq .9s ease-in-out infinite; }
.play-site[aria-pressed="true"] .ps-eq i:nth-child(1) { background: #ff3ea5; } .play-site[aria-pressed="true"] .ps-eq i:nth-child(2) { background: #2ee6ff; animation-delay: -.3s; }
.play-site[aria-pressed="true"] .ps-eq i:nth-child(3) { background: #ffe14d; animation-delay: -.6s; } .play-site[aria-pressed="true"] .ps-eq i:nth-child(4) { background: #a66bff; animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (max-width: 920px) { .play-site { margin-left: auto; } .play-site + .btn { display: none; } }
@media (max-width: 920px) { .menu-btn { margin-left: 8px; order: 3; } }
/* when the site is an instrument, everything you can play lights up as you touch it */
.site-playing .path-tile:hover, .site-playing .night-card a:hover, .site-playing .step-card:hover, .site-playing .chip:hover { box-shadow: 0 0 0 1px var(--syn-color) inset, 0 0 24px color-mix(in srgb, var(--syn-color) 45%, transparent); border-color: var(--syn-color); }

@media (max-width: 920px) { .top .for-you { display: none; } }
@media (max-width: 380px) { .play-site .ps-label { display: none; } .play-site { padding: 0 11px; } }

.fest-home { margin-top: 18px; font-size: 15px; color: var(--ink-dim); } .fest-home a { color: var(--acid); }

/* ---------- performance: the music only moves cheap things ----------
   Blurs, drop-shadows and border widths that change with the music made the
   browser re-render big areas every frame (and crashed Safari on iPhone).
   The music now changes only transforms, opacity and colours. */
.chrome, .chrome.gold, .chrome.red { text-shadow: none; filter: none; }
.hero-mark img { filter: drop-shadow(0 0 30px rgba(232, 199, 122, .35)); }
.tree img { filter: drop-shadow(0 0 24px rgba(232, 199, 122, .45)); }
.fx-pulse { border: 4px solid var(--syn-color); opacity: calc(.2 + var(--syn-beat) * .8); }
.syn { box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }
.story, .charity-heart, .fx-photos img { will-change: transform; }
.ambient { will-change: auto; }

/* ---------- iPhone memory ----------
   A live canvas behind the page forced page-sized GPU layers for everything
   overlapping it ("overlap" compositing), and frosted-glass blurs re-rendered
   over it every frame: iPhones ran out mid-song. */
.top { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 7, 9, .96); }
.syn { backdrop-filter: none; -webkit-backdrop-filter: none; background: #1b1216; }
/* Phones paint the background once as an image (visuals.js) instead of a live canvas. */

/* Eventbrite ticket types on a night's page */
.eb-tickets { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.eb-tickets li { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 12px; background: rgba(255,255,255,.03); }
.eb-tickets li p { margin: 4px 0 0; }
.eb-tickets li.off { opacity: .55; }
.eb-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; gap: 2px; }
.eb-price b { font-size: 1.15em; }
.eb-price .tag { color: var(--pink); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
@media (max-width: 560px) { .eb-tickets li { flex-direction: column; } .eb-price { align-items: flex-start; text-align: left; } }

/* admin: Old site tab */
#admin select[data-legacy] { min-width: 140px; }

/* Friday Night Live (friday.tam.tv): always listed, lit up on a Friday */
.nav .fri-link { color: var(--cyan); }
.nav .fri-link.lit { color: #fff; text-shadow: 0 0 8px var(--cyan), 0 0 18px var(--cyan); animation: fri-glow 2.4s ease-in-out infinite; }
@keyframes fri-glow { 50% { text-shadow: 0 0 4px var(--cyan), 0 0 10px var(--cyan); } }
.fri-ribbon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 10px 16px; text-decoration: none;
  color: #fff; background: linear-gradient(90deg, rgba(0,216,255,.16), rgba(178,92,255,.16)); border-bottom: 1px solid rgba(92,225,255,.45); font-size: 15px; text-align: center; }
.fri-ribbon b { font: 400 18px/1 var(--f-space); letter-spacing: .08em; color: var(--cyan); }
.fri-ribbon .fri-go, .fri-tile .fri-go { color: var(--cyan); font-weight: 600; white-space: nowrap; }
.fri-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: fri-pulse 1.6s ease-in-out infinite; }
@keyframes fri-pulse { 50% { opacity: .35; } }
.fri-tile { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin: 18px 0 8px; padding: 20px 22px; border-radius: 16px; text-decoration: none; color: inherit;
  border: 1px solid rgba(92,225,255,.35); background: rgba(0,216,255,.05); }
.fri-tile h3 { margin: 4px 0 6px; } .fri-tile p { margin: 0 0 8px; }
.fri-tile.lit { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 0 28px rgba(0,216,255,.35); background: rgba(0,216,255,.09); }
.fri-word { display: flex; flex-direction: column; line-height: .9; font-family: var(--f-space); color: #fff; letter-spacing: .04em; }
.fri-word b { font-weight: 400; font-size: 26px; } .fri-word .fri-live { font-size: 46px; color: var(--cyan); text-shadow: 0 0 14px rgba(0,216,255,.6); } .fri-word small { font: 12px var(--f-body); color: var(--ink-dim); margin-top: 4px; }
.night-card.fri .fri-label { color: var(--cyan); }
.night-card.fri.lit { box-shadow: 0 0 0 1px var(--cyan), 0 0 22px rgba(0,216,255,.3); border-radius: 14px; }
@media (max-width: 560px) { .fri-tile { grid-template-columns: 1fr; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .nav .fri-link.lit, .fri-dot { animation: none; } }

/* ---------- /shows: the show calendar and editor ---------- */
.wrap.wide { width: min(1440px, 100%); }
.shows-page { padding-top: 28px; }
.shows-top { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.shows-top h1 { font-size: clamp(40px, 6vw, 64px); margin: 4px 0 12px; }
.linkish { background: none; border: 0; padding: 0; color: var(--acid); text-decoration: underline; cursor: pointer; font: inherit; }
.sh-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); gap: 24px; align-items: start; }
.sh-cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sh-cal-head h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 6px; min-width: 8ch; }
.sh-cal-head [data-new] { margin-left: auto; }
.sh-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 12px; }
.sh-legend .sh-chip { cursor: default; pointer-events: none; }
.sh-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sh-wd { font: 400 13px var(--f-space); letter-spacing: .12em; color: var(--muted); text-align: center; padding: 4px 0; }
.sh-day { min-height: 112px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-day.pad { background: transparent; border-color: transparent; }
.sh-day.rest { background: repeating-linear-gradient(135deg, var(--panel), var(--panel) 8px, var(--panel-2) 8px, var(--panel-2) 16px); }
.sh-day.today { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid) inset; }
.sh-day.past { opacity: .55; }
.sh-dn { display: flex; align-items: baseline; gap: 6px; }
.sh-dn b { font-size: 17px; } .sh-dn span { font-size: 11px; color: var(--muted); }
.sh-add { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); cursor: pointer; line-height: 1; font-size: 16px; opacity: .5; }
.sh-day:hover .sh-add, .sh-add:focus-visible { opacity: 1; border-color: var(--acid); color: var(--acid); }
.sh-chip { display: block; width: 100%; text-align: left; font-size: 12px; line-height: 1.25; padding: 4px 6px; border-radius: 6px; border: 1px solid transparent; background: var(--panel-2); color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-legend .sh-chip { display: inline-block; width: auto; }
.sh-chip i { font-style: normal; color: var(--muted); }
.sh-chip em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--acid); }
.sh-chip.src-show.st-published { background: rgba(232,199,122,.18); border-color: rgba(232,199,122,.55); }
.sh-chip.src-show.st-draft { background: transparent; border: 1px dashed var(--gold); }
.sh-chip.src-show.st-cancelled { text-decoration: line-through; opacity: .6; }
.sh-chip.src-eventbrite { background: rgba(255,128,0,.14); border-color: rgba(255,128,0,.4); }
.sh-chip.src-schedule { background: rgba(92,225,255,.1); border-color: rgba(92,225,255,.3); }
.sh-chip.src-festival { background: rgba(255,46,136,.14); border-color: rgba(255,46,136,.4); }
.sh-chip.on { outline: 2px solid var(--acid); outline-offset: 1px; }
.sh-editor { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; display: grid; gap: 14px; padding-bottom: 20px; }
.sh-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.sh-card h3 { font-size: 20px; margin: 0 0 10px; } .sh-card h4 { margin: 0 0 6px; font-size: 16px; }
.sh-card .field { display: grid; gap: 4px; margin-bottom: 10px; } .sh-card .field > span { font-size: 13px; color: var(--ink-dim); }
.sh-card input, .sh-card select, .sh-card textarea { width: 100%; background: var(--night); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 15px; }
.sh-card textarea { resize: vertical; }
.sh-card input[type="checkbox"], .sh-card input[type="radio"] { width: auto; }
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0; }
#sh-form { display: grid; gap: 14px; }
.sh-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; }
.sh-bar-btns { display: flex; align-items: center; gap: 10px; }
.tag.st-published { color: #7fe3a1; } .tag.st-draft { color: var(--gold); } .tag.st-cancelled { color: var(--red); }
#sh-toast { min-height: 0; font-size: 14px; } #sh-toast:empty { display: none; }
#sh-toast.err { color: #ff8a8a; } #sh-toast.good { color: #7fe3a1; }
.warn { color: #ffc36b; } .good { color: #7fe3a1; }
.sh-row { display: grid; grid-template-columns: 1.3fr 1fr auto 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.sh-row[data-row="schedule"] { grid-template-columns: 80px 1fr 32px; }
.sh-ticket { grid-template-columns: 1.4fr 110px 80px 32px; } .sh-ticket .wide { grid-column: 1 / 4; }
.sh-money { display: flex; align-items: center; gap: 4px; }
.sh-check { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.sh-x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); cursor: pointer; }
.sh-x:hover { color: var(--red); border-color: var(--red); }
.sh-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 10px; }
.sh-mode { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.sh-mode small { grid-column: 2; color: var(--muted); font-size: 12px; } .sh-mode.on { border-color: var(--gold); background: rgba(232,199,122,.08); }
.sh-image { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; align-items: center; margin: 6px 0 12px; }
.sh-image img, .sh-noimg { width: 160px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; grid-row: span 2; }
.sh-noimg { display: grid; place-items: center; background: var(--night); border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.sh-image label.btn { justify-self: start; }
.sh-write details { border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; }
.sh-write summary { cursor: pointer; color: var(--acid); }
.sh-sugg { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; } .sh-sugg p { margin: 4px 0 6px; font-size: 14px; color: var(--ink-dim); }
.sh-net { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; } .sh-net:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.sh-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.sh-conn { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); margin: 2px 2px 2px 0; }
.sh-conn.on { color: #7fe3a1; border-color: rgba(127,227,161,.4); } .sh-conn.off { color: var(--muted); }
.sh-artist { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--panel-2); margin: 4px 4px 0 0; }
.sh-artist .sh-x { width: 22px; height: 22px; }
.sh-stats { margin: 10px 0 0; } .sh-up li { margin-bottom: 6px; } .sh-hist li { margin-bottom: 4px; }
.show-lineup { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.show-lineup li { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; }
.show-lineup li.soon { border-style: dashed; }
@media (max-width: 1080px) {
  .sh-grid { grid-template-columns: 1fr; }
  .sh-editor { position: static; max-height: none; overflow: visible; }
  .sh-bar { top: 72px; } /* below the site header, which stays on screen */
}
/* Phones: the month becomes a list of days with something on (plus today) */
@media (max-width: 700px) {
  .sh-month { grid-template-columns: 1fr; gap: 6px; }
  .sh-wd, .sh-day.pad { display: none; }
  .sh-day { min-height: 0; }
  .sh-day:not(.has):not(.today) { display: none; }
  .sh-add { opacity: 1; width: 32px; height: 32px; }
  .sh-chip { white-space: normal; font-size: 14px; padding: 8px 10px; }
  .fields.three { grid-template-columns: 1fr 1fr; }
  .sh-row, .sh-ticket { grid-template-columns: 1fr 1fr 32px; } .sh-ticket .wide { grid-column: 1 / 3; }
  .sh-row .sh-check { grid-column: 1 / 3; }
  .sh-image { grid-template-columns: 1fr; } .sh-image img, .sh-noimg { width: 100%; grid-row: auto; }
}

/* ---------- The Great British Blues Jam ---------- */
.bj-hero { background: radial-gradient(ellipse at 70% 20%, rgba(77,141,255,.18), transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(232,199,122,.12), transparent 55%); }
.bj-hero .wrap { display: block; } .bj-hero h1 { max-width: 14ch; }
.bj-nights { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 16px; }
.bj-night { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
.bj-night.next { border-color: rgba(77,141,255,.6); box-shadow: 0 0 0 1px rgba(77,141,255,.35), 0 0 30px rgba(77,141,255,.12); }
.bj-night header h3 { margin: 2px 0; font-size: 24px; }
.bj-who { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.bj-k { font: 400 12px var(--f-space); letter-spacing: .14em; text-transform: uppercase; color: var(--acid); margin-top: 6px; }
.bj-host { font-size: 18px; margin: 2px 0; }
.bj-band, .bj-jammers { margin: 4px 0; padding-left: 18px; } .bj-band { list-style: none; padding: 0; }
.bj-jammers li { margin: 2px 0; } .bj-jammers li.played { opacity: .55; } .bj-jammers li.on b { color: var(--acid); }
.bj-note { margin: 0; color: var(--ink-dim); font-style: italic; }
.bj-signup .fields { margin: 8px 0; } .bj-done { margin: 0 0 6px; }
.bj-signup input, .bj-signup select, .bj-wall-form input, .bj-wall-form textarea { width: 100%; background: var(--night); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font: inherit; }
.bj-wall-form { margin-bottom: 18px; } .bj-wall-form .bj-msg { grid-column: span 1; }
.bj-wall { columns: 3 260px; column-gap: 14px; }
.bj-post { break-inside: avoid; margin: 0 0 14px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.bj-post blockquote { margin: 0 0 8px; font: 400 20px/1.3 var(--f-display); }
.bj-post figcaption { color: var(--acid); font-size: 14px; }
@media (max-width: 640px) { .bj-who { grid-template-columns: 1fr; } }
/* staff */
.bj-m-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; margin: 14px 0; align-items: start; }
.bj-m-list { padding-left: 22px; } .bj-m-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bj-m-list li.on { color: var(--acid); } .bj-m-list li.st-played, .bj-m-list li.st-removed { opacity: .55; } .bj-m-list li.st-removed b { text-decoration: line-through; }
.bj-m-btns { display: flex; gap: 4px; flex: none; }
.bj-m-wall li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); } .bj-m-wall li.st-pending { color: var(--acid); }
.bj-onstage { background: rgba(232,199,122,.1); border: 1px solid var(--gold); border-radius: 12px; padding: 8px 12px; }
@media (max-width: 860px) { .bj-m-grid { grid-template-columns: 1fr; } }

/* the big screen */
body.bj-screen { margin: 0; height: 100vh; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, #14101e 0%, #050304 70%); color: #f6ecd8; font-family: var(--f-body);
  display: grid; grid-template-columns: 1fr minmax(260px, 24vw); grid-template-rows: auto 1fr auto; grid-template-areas: "title title" "stage side" "foot foot"; }
body.bj-screen.idle { cursor: none; }
#bj-rings { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bj-s-title { grid-area: title; text-align: center; padding: 2.4vh 2vw 0; position: relative; z-index: 1; }
.bj-s-title h1 { margin: .2vh 0; font: 400 clamp(36px, 6.4vw, 128px)/1 var(--f-display); background: linear-gradient(180deg, #fff3c4, #e8c77a 55%, #a8752e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bj-s-kicker { font: 400 clamp(14px, 1.6vw, 30px) var(--f-space); letter-spacing: .2em; text-transform: uppercase; color: #4d8dff; }
.bj-s-title p { margin: .4vh 0 0; font-size: clamp(16px, 1.8vw, 34px); color: #c9b9a2; } .bj-s-title p b { color: #fff; }
.bj-s-stage { grid-area: stage; display: grid; place-items: center; position: relative; z-index: 1; min-height: 0; }
#bj-logo { width: min(52vh, 40vw); height: auto; will-change: transform, filter; transform-origin: 50% 50%; }
.bj-s-side { grid-area: side; padding: 2vh 2vw 2vh 0; position: relative; z-index: 1; overflow: hidden; font-size: clamp(14px, 1.35vw, 28px); }
.bj-s-k { font: 400 clamp(12px, 1vw, 22px) var(--f-space); letter-spacing: .18em; text-transform: uppercase; color: #e8c77a; margin: 2vh 0 .6vh; }
.bj-s-side ol, .bj-s-side ul { margin: 0; padding-left: 1.4em; } .bj-s-side ul { list-style: none; padding: 0; }
.bj-s-side li { margin: .5vh 0; } .bj-s-side li span { color: #9a8b80; }
.bj-s-now { background: rgba(232,199,122,.12); border: 2px solid #e8c77a; border-radius: 1vw; padding: 1.2vh 1vw; display: grid; }
.bj-s-now b { font: 400 clamp(22px, 2.4vw, 52px)/1.05 var(--f-display); } .bj-s-now span { color: #c9b9a2; }
.bj-s-now .bj-s-k { margin-top: 0; }
.bj-s-foot { grid-area: foot; display: grid; grid-template-columns: 1fr auto; gap: 2vw; align-items: center; padding: 0 2vw 2.4vh; position: relative; z-index: 1; }
.bj-s-wall { min-height: 9vh; opacity: 0; transition: opacity .4s; } .bj-s-wall.in { opacity: 1; }
.bj-s-wall span { font: 400 clamp(12px, 1vw, 22px) var(--f-space); letter-spacing: .18em; text-transform: uppercase; color: #4d8dff; }
.bj-s-wall p { margin: .4vh 0 0; font: 400 clamp(18px, 2vw, 44px)/1.2 var(--f-display); } .bj-s-wall p b { font: 400 .7em var(--f-body); color: #e8c77a; }
.bj-s-qr { display: flex; gap: 1vw; align-items: center; font-size: clamp(12px, 1.1vw, 24px); color: #c9b9a2; } .bj-s-qr img { width: clamp(80px, 8vw, 170px); height: auto; border-radius: 8px; } .bj-s-qr b { color: #fff; }
.bj-s-start { position: fixed; inset: 0; z-index: 5; display: grid; place-content: center; gap: 14px; text-align: center; background: rgba(5,3,4,.9); padding: 24px; }
.bj-s-start[hidden] { display: none; } .bj-s-start h2 { font: 400 clamp(32px, 4vw, 64px) var(--f-display); margin: 0; color: #e8c77a; }
.bj-s-start .btn { justify-self: center; min-width: 320px; }
.bj-s-notice { position: fixed; top: 2vh; left: 50%; transform: translateX(-50%); z-index: 6; background: #1f141a; border: 1px solid #3a2a31; padding: 10px 18px; border-radius: 999px; }
body.bj-screen.bare .bj-s-side, body.bj-screen.bare .bj-s-foot { visibility: hidden; }
@media (max-aspect-ratio: 1/1) { body.bj-screen { grid-template-columns: 1fr; grid-template-areas: "title" "stage" "side" "foot"; } #bj-logo { width: 60vw; } .bj-s-side { padding: 0 4vw; } }
.sh-card .field.sh-check { display: flex; gap: 8px; align-items: center; }

/* ---------- Old-school blues: the Great British Blues Jam area ----------
   1920s race records (Bessie Smith) and 1950s Chess-era juke-joint posters
   (Muddy Waters): wood-type capitals, typed sign-up sheets, aged paper,
   oxblood and mustard ink on smoky brown. */
body.blues, body.bj-screen {
  --paper: #ecdcb6; --paper-2: #dfc896; --paper-ink: #1f1611; --oxblood: #8e1f22; --oxblood-2: #a3262a; --mustard: #d9a441; --smoke: #140d09; --umber: #3a2618; --rust: #c46a2b;
  --f-wood: 'Ultra', 'Rockwell Extra Bold', 'Clarendon', Georgia, serif; --f-juke: 'Rye', 'Ultra', Georgia, serif;
  --f-typed: 'Special Elite', 'Courier New', monospace; --f-print: 'Old Standard TT', 'Times New Roman', Georgia, serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .07  0 0 0 0 .04  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.blues { background: var(--grain), radial-gradient(ellipse at 50% 0%, #3a2618 0%, #1c120c 45%, var(--smoke) 100%); background-attachment: fixed; color: #efe0bd; }
body.blues main { font-family: var(--f-print); font-size: 18px; }
body.blues main .muted { color: #bfa77f; }
body.blues main h2 { font: 400 clamp(36px, 5vw, 64px)/1 var(--f-wood); color: var(--paper); background: none; -webkit-text-fill-color: currentColor; text-shadow: 3px 3px 0 var(--oxblood); letter-spacing: .01em; }
body.blues main .head { border-bottom: 3px double rgba(236,220,182,.35); padding-bottom: 10px; }
body.blues .btn { border-radius: 4px; font-family: var(--f-juke); letter-spacing: .06em; text-transform: none; }
body.blues .btn.hot { background: var(--oxblood); color: var(--paper); border: 2px solid var(--oxblood-2); box-shadow: 3px 3px 0 #000; }
body.blues .btn.hot:hover { background: var(--oxblood-2); }
body.blues .btn.ghost { color: var(--paper); border: 2px solid rgba(236,220,182,.6); background: transparent; }
body.blues main a:not(.btn) { color: var(--mustard); }

/* the poster */
.bj-hero { background: none; }
.bj-hero-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.bj-poster { text-align: center; padding: 28px clamp(16px, 3vw, 40px) 32px; border: 3px solid var(--paper); outline: 1px solid var(--paper); outline-offset: 6px; background: var(--grain), radial-gradient(ellipse at 50% 30%, rgba(217,164,65,.12), transparent 70%); }
.bj-kicker { font: 400 clamp(16px, 2vw, 24px) var(--f-juke); color: var(--mustard); letter-spacing: .08em; }
.bj-pre { font: italic 400 clamp(16px, 1.8vw, 22px) var(--f-print); color: #d8c49c; margin-top: 8px; }
.bj-title { margin: 10px 0 6px; line-height: .9; }
.bj-title span { display: block; font: 400 clamp(26px, 3.6vw, 46px)/1 var(--f-juke); color: var(--paper); letter-spacing: .04em; }
.bj-title b { display: block; font: 400 clamp(64px, 10vw, 148px)/.9 var(--f-wood); color: var(--paper); text-transform: uppercase; text-shadow: 4px 4px 0 var(--oxblood), 8px 8px 0 rgba(0,0,0,.45); letter-spacing: .01em; }
.bj-rule { display: flex; justify-content: center; gap: 18px; margin: 12px 0 16px; font: 400 clamp(14px, 1.5vw, 19px) var(--f-typed); text-transform: uppercase; letter-spacing: .3em; color: var(--mustard); }
.bj-rule span + span::before { content: '♦'; margin-right: 18px; color: var(--oxblood-2); }
.bj-lede { max-width: 34em; margin: 0 auto 18px; font: 400 clamp(17px, 1.6vw, 21px)/1.5 var(--f-print); color: #e8d8b3; }
.bj-poster .ctas { justify-content: center; }
/* a 78 rpm record */
.bj-78 { aspect-ratio: 1; width: min(100%, 420px); justify-self: center; border-radius: 50%; display: grid; place-items: center; animation: bj-spin 1.8s linear infinite paused;
  background: radial-gradient(circle, transparent 33%, rgba(255,255,255,.04) 33.5%, transparent 34%),
    repeating-radial-gradient(circle, #121010 0 2px, #1d1a19 2px 3px), #111;
  box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 0 0 6px #0a0909, inset 0 0 60px rgba(255,255,255,.05); }
.bj-78:hover { animation-play-state: running; }
@keyframes bj-spin { to { transform: rotate(360deg); } }
.bj-78-label { width: 38%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px; padding: 8%;
  background: var(--grain), radial-gradient(circle, transparent 7%, var(--oxblood) 7.5%); color: var(--paper); box-shadow: inset 0 0 0 3px var(--mustard), inset 0 0 0 5px var(--oxblood); }
.bj-78-label small { font: 400 clamp(7px, .8vw, 10px) var(--f-typed); letter-spacing: .12em; text-transform: uppercase; color: var(--mustard); }
.bj-78-label b { font: 400 clamp(12px, 1.5vw, 19px)/1 var(--f-juke); }
.bj-78-label i { font: italic 400 clamp(8px, .9vw, 11px)/1.2 var(--f-print); }
@media (max-width: 860px) { .bj-hero-in { grid-template-columns: 1fr; } .bj-78 { width: min(70vw, 300px); order: -1; } }
@media (prefers-reduced-motion: reduce) { .bj-78 { animation: none; } }

/* each Saturday: a handbill on aged paper */
body.blues .bj-night { background: var(--grain), linear-gradient(170deg, var(--paper), var(--paper-2)); color: var(--paper-ink); border: 0; border-radius: 2px; position: relative;
  box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 18px 34px rgba(0,0,0,.55); padding: 22px 24px; }
body.blues .bj-night::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(31,22,17,.35); pointer-events: none; }
body.blues .bj-night.next { box-shadow: 0 18px 34px rgba(0,0,0,.55); }
body.blues .bj-night.next::before { content: 'NEXT JAM'; position: absolute; top: 16px; right: 18px; transform: rotate(8deg); font: 400 18px var(--f-wood); letter-spacing: .06em; color: var(--oxblood);
  border: 3px solid var(--oxblood); padding: 4px 10px; border-radius: 4px; opacity: .85; mix-blend-mode: multiply; }
body.blues .bj-night header h3 { font: 400 clamp(24px, 2.6vw, 32px)/1.05 var(--f-wood); color: var(--paper-ink); text-transform: uppercase; }
body.blues .bj-night .label { font: 400 15px var(--f-juke); letter-spacing: .06em; color: var(--oxblood); }
body.blues .bj-night a { color: var(--oxblood); }
body.blues .bj-k { font: 400 13px var(--f-typed); letter-spacing: .22em; color: var(--oxblood); border-bottom: 1px solid rgba(31,22,17,.3); padding-bottom: 2px; }
body.blues .bj-host { font: 400 22px var(--f-juke); color: var(--paper-ink); }
body.blues .bj-band li b, body.blues .bj-jammers li b { font-family: var(--f-print); font-weight: 700; }
body.blues .bj-night .muted { color: #6b5540; }
body.blues .bj-note { color: #4a3826; }
/* the jam list: a typed sign-up sheet */
body.blues .bj-jammers { font-family: var(--f-typed); font-size: 16px; padding-left: 28px; margin: 6px 0;
  background: repeating-linear-gradient(transparent 0 29px, rgba(31,22,17,.22) 29px 30px); line-height: 30px; }
body.blues .bj-jammers li { margin: 0; }
body.blues .bj-jammers li b { font-family: var(--f-typed); font-weight: 400; }
body.blues .bj-jammers li.played b { text-decoration: line-through; text-decoration-color: var(--oxblood); }
body.blues .bj-jammers li.on b { color: var(--oxblood); }
body.blues .bj-signup .field > span, body.blues .bj-wall-form .field > span { font: 400 13px var(--f-typed); letter-spacing: .12em; text-transform: uppercase; }
body.blues .bj-signup input, body.blues .bj-signup select { background: transparent; color: var(--paper-ink); border: 0; border-bottom: 2px solid rgba(31,22,17,.6); border-radius: 0; font: 400 17px var(--f-typed); padding: 6px 2px; }
body.blues .bj-signup select option { color: #000; }
body.blues .bj-signup .err { color: var(--oxblood); } body.blues .bj-done { color: #2f5d2a; font-family: var(--f-typed); }
body.blues .bj-night .btn.hot { box-shadow: 2px 2px 0 var(--paper-ink); }
/* the wall: notes pinned up */
body.blues .bj-wall-form { background: var(--grain), rgba(236,220,182,.06); border: 2px dashed rgba(236,220,182,.35); border-radius: 4px; }
body.blues .bj-wall-form input, body.blues .bj-wall-form textarea { background: rgba(0,0,0,.25); border: 1px solid rgba(236,220,182,.35); border-radius: 2px; font: 400 17px var(--f-typed); color: var(--paper); }
body.blues .bj-post { background: var(--grain), linear-gradient(175deg, #f1e4c3, #e3cfa3); color: var(--paper-ink); border: 0; border-radius: 1px; padding: 22px 18px 14px; position: relative; box-shadow: 0 12px 22px rgba(0,0,0,.5); }
body.blues .bj-post:nth-child(3n+1) { transform: rotate(-1.2deg); } body.blues .bj-post:nth-child(3n+2) { transform: rotate(.9deg); } body.blues .bj-post:nth-child(3n) { transform: rotate(-.4deg); }
body.blues .bj-post::before { content: ''; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e05a4f, var(--oxblood) 60%, #4a0e10); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
body.blues .bj-post blockquote { font: italic 400 21px/1.35 var(--f-print); color: var(--paper-ink); }
body.blues .bj-post figcaption { font: 400 15px var(--f-typed); color: var(--oxblood); }
body.blues .bj-post figcaption::before { content: '— '; }

/* the big screen: a juke joint at showtime */
body.bj-screen { font-family: var(--f-print); color: var(--paper);
  background: var(--grain), radial-gradient(ellipse at 50% 58%, rgba(217,164,65,.20) 0%, rgba(142,31,34,.14) 30%, transparent 60%), radial-gradient(ellipse at 50% 50%, #2a1a10 0%, #120b07 60%, #050302 100%); }
.bj-screen .bj-s-title h1 { font: 400 clamp(40px, 6.6vw, 132px)/.95 var(--f-wood); text-transform: uppercase; background: none; color: var(--paper); -webkit-text-fill-color: currentColor;
  text-shadow: .045em .045em 0 var(--oxblood), .09em .09em 0 rgba(0,0,0,.55); letter-spacing: .01em; }
.bj-screen .bj-s-title h1 span { display: block; font: 400 .42em/1.1 var(--f-juke); text-transform: none; letter-spacing: .05em; text-shadow: .06em .06em 0 var(--oxblood); }
.bj-screen .bj-s-kicker { font: 400 clamp(14px, 1.5vw, 30px) var(--f-typed); color: var(--mustard); letter-spacing: .3em; }
.bj-screen .bj-s-title p { font: italic 400 clamp(18px, 1.9vw, 38px) var(--f-print); color: #e2cfa6; } .bj-screen .bj-s-title p b { font: 400 1em var(--f-juke); font-style: normal; color: var(--paper); }
.bj-screen .bj-s-k { font: 400 clamp(12px, 1vw, 22px) var(--f-typed); letter-spacing: .24em; color: var(--mustard); border-bottom: 1px solid rgba(236,220,182,.25); padding-bottom: .3vh; }
.bj-screen .bj-s-side { font-family: var(--f-typed); }
.bj-screen .bj-s-side li b { font-family: var(--f-print); font-weight: 700; } .bj-screen .bj-s-side li span { color: #b59c74; }
/* on stage: a ticket stub */
.bj-screen .bj-s-now { background: var(--grain), linear-gradient(170deg, var(--paper), var(--paper-2)); color: var(--paper-ink); border: 0; border-radius: 3px; box-shadow: 0 1vh 2.4vh rgba(0,0,0,.6);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent .8vw, #000 .85vw) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .8vw, #000 .85vw) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent .8vw, #000 .85vw) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .8vw, #000 .85vw) right / 51% 100% no-repeat; padding: 1.4vh 1.6vw; }
.bj-screen .bj-s-now .bj-s-k { color: var(--oxblood); border-color: rgba(31,22,17,.3); }
.bj-screen .bj-s-now b { font: 400 clamp(24px, 2.6vw, 56px)/1.05 var(--f-wood); text-transform: uppercase; color: var(--paper-ink); }
.bj-screen .bj-s-now span { font-family: var(--f-typed); color: var(--oxblood); }
.bj-screen .bj-s-wall span { font-family: var(--f-typed); color: var(--mustard); letter-spacing: .24em; }
.bj-screen .bj-s-wall p { font: italic 400 clamp(20px, 2.1vw, 46px)/1.2 var(--f-print); } .bj-screen .bj-s-wall p b { font: 400 .62em var(--f-typed); font-style: normal; color: var(--mustard); }
.bj-screen .bj-s-qr { font-family: var(--f-typed); } .bj-screen .bj-s-qr img { border-radius: 2px; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--oxblood); }
.bj-screen .bj-s-start { background: var(--grain), rgba(12,7,4,.94); }
.bj-screen .bj-s-start h2 { font: 400 clamp(36px, 5vw, 84px)/1 var(--f-wood); text-transform: uppercase; color: var(--paper); text-shadow: 4px 4px 0 var(--oxblood); }
.bj-screen .bj-s-start p { font-family: var(--f-print); }
.bj-screen .btn { border-radius: 4px; font-family: var(--f-juke); } .bj-screen .btn.hot { background: var(--oxblood); color: var(--paper); border: 2px solid var(--oxblood-2); }
.bj-screen .btn.ghost { color: var(--paper); border: 2px solid rgba(236,220,182,.6); background: transparent; }
/* old film: a slow vignette flicker over everything */
.bj-screen::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); animation: bj-flicker 6s steps(12) infinite; }
@keyframes bj-flicker { 0%, 100% { opacity: .92; } 40% { opacity: 1; } 70% { opacity: .86; } }
@media (prefers-reduced-motion: reduce) { .bj-screen::after { animation: none; } }
.bj-hero .wrap.bj-hero-in { display: grid; }
@media (max-width: 860px) { .bj-hero .wrap.bj-hero-in { grid-template-columns: 1fr; } }
.bj-hero h1.bj-title { max-width: none; margin-inline: auto; }
body.blues main .bj-night a:not(.btn) { color: var(--oxblood); }
body.blues .bj-night .field > span { color: var(--paper-ink); }
body.blues .bj-night .field small.muted { color: #6b5540; letter-spacing: 0; text-transform: none; }
body.blues .bj-signup input::placeholder { color: #8a7459; }
.bj-78-label { overflow: hidden; padding: 0 4%; align-content: center; }
@media (max-width: 860px) {
  .bj-78 { width: min(62vw, 260px); order: 0; }
  .bj-78-label i, .bj-78-label small:last-child { display: none; }
  .bj-poster { outline-offset: 3px; padding-inline: 12px; }
  .bj-title b { font-size: clamp(54px, 17vw, 96px); }
  .bj-rule { gap: 8px; letter-spacing: .18em; } .bj-rule span + span::before { margin-right: 8px; }
}
@media (max-width: 860px) { .bj-hero .wrap.bj-hero-in { grid-template-columns: minmax(0, 1fr); } .bj-poster { min-width: 0; margin-inline: 6px; } .bj-title b { font-size: clamp(48px, 15.5vw, 96px); } }

/* the Blues Jam host (MAZZA) */
.bj-host-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 36px; align-items: center; }
.bj-host-photo { margin: 0; position: relative; }
.bj-host-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border: 10px solid var(--paper, #ecdcb6); box-shadow: 0 20px 40px rgba(0,0,0,.6); transform: rotate(-1.5deg); filter: sepia(.25) contrast(1.05); }
.bj-host-photo figcaption { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg); background: var(--oxblood, #8e1f22); color: var(--paper, #ecdcb6); font: 400 18px var(--f-juke, serif); padding: 6px 16px; box-shadow: 2px 2px 0 #000; white-space: nowrap; }
.bj-host-in .bj-kicker { text-align: left; }
.bj-host-pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 6px; }
.bj-host-pics img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 5px solid var(--paper, #ecdcb6); filter: sepia(.2); box-shadow: 0 8px 18px rgba(0,0,0,.5); }
.bj-host-pics img:nth-child(1) { transform: rotate(1.2deg); } .bj-host-pics img:nth-child(2) { transform: rotate(-.8deg); } .bj-host-pics img:nth-child(3) { transform: rotate(.6deg); }
body.blues .bj-night .bj-host a { color: var(--paper-ink); text-decoration-color: var(--oxblood); }
@media (max-width: 860px) { .bj-host-in { grid-template-columns: 1fr; } .bj-host-photo { max-width: 360px; justify-self: center; } }
.artist-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.artist-gallery figure { margin: 0; } .artist-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; display: block; }
/* the screen: the host's portrait */
.bj-screen .bj-s-host { display: flex; gap: 1vw; align-items: center; margin-bottom: 1.6vh; }
.bj-screen .bj-s-host[hidden] { display: none; }
.bj-screen .bj-s-host img { width: clamp(64px, 6.5vw, 140px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--mustard); filter: sepia(.3); }
.bj-screen .bj-s-host b { font: 400 clamp(20px, 2vw, 44px)/1 var(--f-wood); text-transform: uppercase; }
.bj-screen .bj-s-host .bj-s-k { margin-top: 0; border: 0; }

/* ---------- The featured show: a futuristic carousel hero (src/views/featured.js) ---------- */
.fx-hero { --fx: #ffe600; --fx2: #ff2ea6; --fx3: #22e1ff; position: relative; overflow: hidden; padding: clamp(36px, 6vw, 72px) 0 clamp(44px, 6vw, 80px);
  background: radial-gradient(ellipse at 70% 30%, rgba(255,46,166,.22), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(34,225,255,.16), transparent 55%), #07050c; isolation: isolate; }
.fx-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); pointer-events: none; }
/* a neon perspective grid floor */
.fx-grid { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 60%; z-index: -1; transform: perspective(500px) rotateX(62deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(34,225,255,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(255,46,166,.4) 1px, transparent 1px); background-size: 60px 60px;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); animation: fx-floor 6s linear infinite; }
@keyframes fx-floor { to { background-position: 0 60px, 0 0; } }
.fx-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.fx-kicker { display: inline-flex; align-items: center; gap: 10px; font: 400 clamp(14px, 1.4vw, 18px) var(--f-space); letter-spacing: .24em; text-transform: uppercase; color: var(--fx3); }
.fx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fx2); box-shadow: 0 0 12px var(--fx2); animation: fx-blink 1.4s steps(2) infinite; }
@keyframes fx-blink { 50% { opacity: .2; } }
.fx-title { margin: 10px 0 8px; font: 400 clamp(44px, 6.4vw, 96px)/.92 var(--f-space); letter-spacing: .01em; text-transform: uppercase; color: var(--fx);
  text-shadow: 0 0 18px rgba(255,230,0,.45), 3px 3px 0 var(--fx2), -2px -2px 0 rgba(34,225,255,.7); }
.fx-when { font: 600 clamp(17px, 1.7vw, 22px) var(--f-body); color: #fff; margin: 0 0 10px; }
.fx-lede { color: #d9d2e6; max-width: 34em; }
.fx-note { color: var(--fx3); font-size: 14px; letter-spacing: .02em; }
.btn.fx-btn { background: var(--fx); color: #07050c; border: 0; box-shadow: 0 0 0 2px #07050c, 0 0 0 4px var(--fx), 0 0 26px rgba(255,230,0,.55); }
.btn.fx-btn:hover { background: #fff; }
/* the coverflow */
.fx-car { position: relative; outline: none; }
.fx-car:focus-visible { outline: 2px solid var(--fx3); outline-offset: 6px; border-radius: 12px; }
.fx-stage { position: relative; height: clamp(360px, 46vw, 600px); perspective: 1400px; transform-style: preserve-3d; touch-action: pan-y; }
.fx-slide { --o: 0; --a: 0; position: absolute; top: 0; left: 50%; width: clamp(220px, 28vw, 400px); margin: 0 0 0 calc(clamp(220px, 28vw, 400px) / -2); aspect-ratio: 4 / 5;
  transform: translateX(calc(var(--o) * 46%)) translateZ(calc(var(--a) * -190px)) rotateY(calc(var(--o) * -32deg)); transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s, filter .7s;
  opacity: calc(1 - var(--a) * .22); filter: saturate(calc(1 - var(--a) * .25)) brightness(calc(1 - var(--a) * .18)); cursor: pointer; -webkit-box-reflect: below 6px linear-gradient(transparent 70%, rgba(255,255,255,.18)); }
.fx-slide a { display: block; height: 100%; border-radius: 14px; overflow: hidden; position: relative; }
.fx-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-slide a::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.fx-slide.on a { box-shadow: 0 0 0 2px var(--fx), 0 0 30px rgba(255,230,0,.45), 0 0 80px rgba(255,46,166,.35); animation: fx-glow 3s ease-in-out infinite alternate; }
@keyframes fx-glow { to { box-shadow: 0 0 0 2px var(--fx3), 0 0 34px rgba(34,225,255,.5), 0 0 90px rgba(255,46,166,.3); } }
.fx-slide.on a::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%); background-size: 250% 100%; animation: fx-sheen 3.5s ease-in-out infinite; }
@keyframes fx-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.fx-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; position: relative; z-index: 2; }
.fx-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(34,225,255,.6); background: rgba(7,5,12,.7); color: var(--fx3); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 0 14px rgba(34,225,255,.3); }
.fx-arrow:hover { color: var(--fx); border-color: var(--fx); }
.fx-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.fx-dots button { width: 10px; height: 10px; padding: 0; border-radius: 3px; border: 0; background: rgba(255,255,255,.25); cursor: pointer; transition: width .3s, background .3s; }
.fx-dots button[aria-selected="true"] { width: 26px; background: var(--fx); box-shadow: 0 0 10px var(--fx); }
.fx-caption { text-align: center; color: #fff; font: 400 clamp(15px, 1.3vw, 18px) var(--f-space); letter-spacing: .12em; text-transform: uppercase; min-height: 1.4em; margin: 10px 0 0; }
.fx-credit { text-align: center; font-size: 12px; color: #8f87a3; margin: 4px 0 0; }
.fx-hero.compact { padding: 28px 0 40px; margin: 18px 0 10px; border-radius: 22px; }
.fx-hero.compact .fx-title { font-size: clamp(36px, 4.6vw, 68px); }
/* reduced motion: a plain crossfade */
.fx-car.still .fx-slide { transform: none; transition: opacity .4s; opacity: 0; -webkit-box-reflect: none; }
.fx-car.still .fx-slide.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fx-grid, .fx-dot, .fx-slide.on a, .fx-slide.on a::before { animation: none; } }
@media (max-width: 860px) {
  .fx-in { grid-template-columns: minmax(0, 1fr); }
  .fx-stage { height: clamp(340px, 108vw, 520px); }
  .fx-slide { width: min(64vw, 340px); margin-left: calc(min(64vw, 340px) / -2); transform: translateX(calc(var(--o) * 40%)) translateZ(calc(var(--a) * -160px)) rotateY(calc(var(--o) * -28deg)); }
}
.fx-copy { position: relative; z-index: 2; }
.fx-stage { clip-path: inset(-12% 0 -40% 0); } /* the fanned slides stay in their column, clear of the title */
.fx-slide video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.fx-sound { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(7,5,12,.7); color: #fff; font-size: 18px; cursor: pointer; opacity: 0; transition: opacity .3s; }
.fx-slide.on .fx-sound { opacity: 1; }
.fx-slide.is-video.on::after { content: 'Film'; position: absolute; left: 10px; top: 10px; z-index: 3; font: 400 12px var(--f-space); letter-spacing: .2em; color: #07050c; background: var(--fx3); padding: 3px 8px; border-radius: 4px; }

/* ---------- Christmas on the home page (src/views/christmas.js, public/js/xmas.js) ---------- */
:root { --beat: 0; --bass: 0; --glow: .1; }
.xm-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 5vw, 64px) 0 clamp(20px, 4vw, 40px);
  background: radial-gradient(ellipse at 72% 18%, rgba(255,214,120,calc(.10 + var(--glow) * .25)), transparent 55%), radial-gradient(ellipse at 15% 85%, rgba(200,30,60,.18), transparent 55%), linear-gradient(180deg, #0a0812 0%, #120a10 60%, #0b0709 100%); }
/* falling snow: two layers of flakes drifting at different speeds */
.xm-snow { position: absolute; inset: -100% 0 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(3px 3px at 120px 80px, rgba(255,255,255,.9) 50%, transparent 51%), radial-gradient(2px 2px at 220px 160px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 300px 40px, rgba(255,255,255,.8) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 380px 220px, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 60px 260px, rgba(255,255,255,.7) 50%, transparent 51%);
  background-size: 420px 300px; animation: xm-fall 14s linear infinite; opacity: .85; }
.xm-snow2 { background-size: 300px 240px; animation-duration: 22s; opacity: .5; filter: blur(.6px); }
@keyframes xm-fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-40px, 50%, 0); } }
.xm-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(16px, 4vw, 48px); align-items: center; }
.xm-kicker { font: 400 clamp(14px, 1.4vw, 18px) var(--f-space); letter-spacing: .3em; color: #ffd98a; text-shadow: 0 0 calc(6px + var(--beat) * 14px) rgba(255,210,120,.8); }
.xm-lockup { margin: 10px 0 6px; } .xm-lockup img { width: min(100%, 640px); height: auto; filter: drop-shadow(0 0 calc(8px + var(--beat) * 26px) rgba(255,215,120,.55)); transform: scale(calc(1 + var(--beat) * .02)); transition: transform .08s; }
.xm-dates { font: 400 clamp(18px, 2vw, 26px) var(--f-space); letter-spacing: .12em; color: #fff; margin: 4px 0 10px; }
.xm-lede { max-width: 34em; color: #ead9c4; }
.xm-hint { color: #c9a7b0; }
/* the Shard tree */
.xm-tree { position: relative; justify-self: center; width: min(100%, 360px); padding-top: 26%; }
.xm-shard { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 calc(18px + var(--glow) * 40px) rgba(255,205,110,calc(.25 + var(--glow) * .5))) brightness(calc(1 + var(--beat) * .18)); }
.xm-glow { position: absolute; left: 10%; right: 10%; bottom: -6%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,210,120,calc(.25 + var(--glow) * .4)), transparent 70%); filter: blur(10px); z-index: -1; }
.xm-light { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff6d8; box-shadow: 0 0 8px 2px #ffe7a1; animation: xm-twinkle 2.4s ease-in-out infinite; opacity: calc(.55 + var(--beat) * .45); transform: scale(calc(1 + var(--beat) * .8)); }
.xm-body { position: relative; }
.xm-light.r { background: #ff8a8a; box-shadow: 0 0 9px 2px #ff3b4e; } .xm-light.g { background: #b9ffcf; box-shadow: 0 0 9px 2px #38d27a; }
@keyframes xm-twinkle { 50% { opacity: .25; } }
/* the holographic 3D TAM star */
.xm-star { position: absolute; left: 50%; top: 0; width: 34%; aspect-ratio: 1; transform: translate(-50%, -8%); z-index: 3; perspective: 600px; }
.xm-rays { position: absolute; inset: -55%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,240,190,.0) 0deg 9deg, rgba(255,240,190,calc(.18 + var(--glow) * .35)) 10deg 11deg, rgba(255,240,190,0) 12deg 22.5deg);
  mask-image: radial-gradient(circle, #000 18%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 70%); animation: xm-rays 24s linear infinite; transform: scale(calc(1 + var(--beat) * .25)); }
@keyframes xm-rays { to { rotate: 360deg; } }
.xm-holo { position: absolute; inset: 0; transform-style: preserve-3d; animation: xm-spin 7s linear infinite; }
@keyframes xm-spin { from { transform: rotateY(0deg) rotateX(8deg); } to { transform: rotateY(360deg) rotateX(8deg); } }
.xm-holo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: translateZ(calc(var(--z) * 1.6px)) scale(calc(1 + var(--beat) * .12));
  filter: brightness(calc(.75 + (4 - max(var(--z), calc(var(--z) * -1))) * .08)) drop-shadow(0 0 calc(4px + var(--glow) * 18px) rgba(255,220,140,.8)); }
/* the hologram's rainbow shimmer, cut to the logo's shape */
.xm-sheen { position: absolute; inset: 0; transform: translateZ(7px); pointer-events: none; mix-blend-mode: color-dodge; opacity: .85;
  background: conic-gradient(from 0deg, #ff5ec8, #6ef5ff, #b8ff6e, #ffe76e, #ff8a5e, #b66bff, #ff5ec8); background-size: 200% 200%; animation: xm-holo 4s linear infinite;
  mask: url(/img/christmas/tam-logo-gold.png) center / contain no-repeat; -webkit-mask: url(/img/christmas/tam-logo-gold.png) center / contain no-repeat; }
@keyframes xm-holo { to { filter: hue-rotate(360deg); } }
/* while the song plays the whole page joins in */
body.xm-playing main h2.chrome { text-shadow: 0 0 calc(var(--beat) * 22px) rgba(255,215,120,.7); }
body.xm-playing .xm-hero { box-shadow: inset 0 -2px 0 rgba(255,215,120,calc(var(--beat) * .8)); }
@media (max-width: 860px) { .xm-in { grid-template-columns: minmax(0, 1fr); } .xm-tree { width: min(64vw, 280px); order: -1; } }
@media (prefers-reduced-motion: reduce) { .xm-snow, .xm-rays, .xm-holo, .xm-sheen, .xm-light { animation: none; } }
/* the star swings in 3D rather than spinning right round, so TAM always reads the right way */
.xm-holo { animation: xm-swing 5s ease-in-out infinite alternate; }
@keyframes xm-swing { from { transform: rotateY(-48deg) rotateX(10deg); } to { transform: rotateY(48deg) rotateX(4deg); } }
@media (max-width: 860px) { .xm-tree { width: min(46vw, 210px); } .xm-hero { padding-top: 18px; } }
@media (max-width: 860px) { .xm-tree { width: min(36vw, 160px); } }

/* ---------- TAM Sunday Showcases (src/views/showcases.js) ---------- */
.sc-hero { position: relative; overflow: hidden; }
.sc-hero .wrap { display: block; position: relative; }
.sc-spot { position: absolute; top: -40%; right: -10%; width: 70%; height: 180%; pointer-events: none; z-index: -1;
  background: conic-gradient(from 200deg at 70% 0%, transparent 0deg, rgba(255,230,170,.16) 14deg, transparent 30deg); filter: blur(6px); }
.sc-hero h1 { max-width: 12ch; }
.sc-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; counter-reset: s; }
.sc-steps li { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.sc-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--acid); color: #0b0709; font: 400 22px var(--f-space); margin-bottom: 8px; }
.sc-steps h3 { margin: 4px 0 6px; }
.sc-circuit { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.sc-night { background: linear-gradient(170deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.sc-night h3 { margin: 4px 0 4px; font-size: 22px; } .sc-host { margin: 0 0 6px; color: var(--ink-dim); }
.sc-dates { margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 8px; } .sc-dates li { padding: 4px 0; }
.sc-form .field select, .sc-form .field input, .sc-form .field textarea { width: 100%; }

/* ---------- Sunday Showcase: the tree and its presents ---------- */
.sc-xmas { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, rgba(255,210,120,.10), transparent 60%); }
.sc-snow { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 90px 110px, #fff, transparent), radial-gradient(2.5px 2.5px at 160px 60px, #fff, transparent), radial-gradient(1.5px 1.5px at 230px 160px, #fff, transparent);
  background-size: 260px 200px; animation: sc-fall 14s linear infinite; }
@keyframes sc-fall { to { background-position: 30px 200px; } }
.sc-xmas .head { display: block; text-align: center; } .sc-xmas .head p { max-width: 60ch; margin-inline: auto; }
.sc-scene { display: grid; justify-items: center; gap: 0; }
.sc-tree { position: relative; width: min(78vw, 360px); aspect-ratio: 3 / 4; }
.sc-star { position: absolute; left: 50%; top: -2%; width: 22%; height: auto; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 0 14px rgba(255,214,120,.9)); animation: sc-star 3s ease-in-out infinite; }
@keyframes sc-star { 50% { filter: drop-shadow(0 0 26px rgba(255,230,160,1)); transform: translateX(-50%) scale(1.06); } }
.sc-tiers { position: absolute; inset: 10% 0 10%; display: grid; grid-template-rows: repeat(4, 1fr); }
.sc-tiers i { display: block; margin: 0 auto -12%; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(160deg, #2f9d5a, #135a33 55%, #0b3b22); box-shadow: inset 0 -8px 0 rgba(0,0,0,.2); }
.sc-tiers i:nth-child(1) { width: 40%; } .sc-tiers i:nth-child(2) { width: 60%; } .sc-tiers i:nth-child(3) { width: 80%; } .sc-tiers i:nth-child(4) { width: 100%; }
.sc-trunk { position: absolute; left: 50%; bottom: 2%; width: 13%; height: 10%; transform: translateX(-50%); background: linear-gradient(90deg, #4a2a16, #6d4024, #4a2a16); border-radius: 2px; }
.sc-light { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff6d8; box-shadow: 0 0 9px 2px #ffe7a1; animation: sc-twinkle 2.4s ease-in-out infinite; z-index: 1; }
.sc-light.r { background: #ff9a9a; box-shadow: 0 0 9px 2px #ff3b4e; } .sc-light.g { background: #c2ffd6; box-shadow: 0 0 9px 2px #ffd24a; }
@keyframes sc-twinkle { 50% { opacity: .35; transform: scale(.7); } }
.sc-gifts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 980px; margin-top: -6px; align-items: end; }
.sc-g { position: relative; display: grid; justify-items: center; min-height: 230px; align-content: end; }
.sc-wrap { --p: #c8102e; --r: #ffd24a; position: relative; width: 100%; max-width: 132px; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .2s; }
.sc-wrap:hover, .sc-wrap:focus-visible { transform: translateY(-4px) rotate(-2deg); }
.sc-wrap:focus-visible { outline: 2px solid var(--acid); outline-offset: 6px; border-radius: 8px; }
.sc-g:nth-child(even) .sc-wrap { max-width: 112px; }
.c1 .sc-wrap { --p: #1d6b3f; --r: #f3e3c3; } .c2 .sc-wrap { --p: #1f3f8f; --r: #e9c46a; } .c3 .sc-wrap { --p: #f3e3c3; --r: #c8102e; }
.c4 .sc-wrap { --p: #6b2b8f; --r: #ffd24a; } .c5 .sc-wrap { --p: #d4a017; --r: #8a0f22; }
.sc-wrap > span { position: absolute; transition: transform .7s cubic-bezier(.2,.8,.3,1.2), opacity .6s; }
.g-l, .g-r { top: 22%; bottom: 0; width: 50%; background: linear-gradient(90deg, transparent 44%, var(--r) 44% 56%, transparent 56%) , repeating-linear-gradient(45deg, var(--p) 0 12px, color-mix(in srgb, var(--p) 82%, #000) 12px 24px); }
.g-l { left: 0; border-radius: 4px 0 0 4px; background-position: 100% 0, 0 0; background-size: 200% 100%, auto; }
.g-r { right: 0; border-radius: 0 4px 4px 0; background-position: 0 0, 0 0; background-size: 200% 100%, auto; }
.g-lid { left: -5%; right: -5%; top: 10%; height: 16%; border-radius: 4px; background: linear-gradient(90deg, var(--p) 44%, var(--r) 44% 56%, var(--p) 56%); box-shadow: 0 4px 0 rgba(0,0,0,.25); z-index: 2; }
.g-bow { left: 50%; top: -4%; width: 44%; height: 20%; transform: translateX(-50%); z-index: 3;
  background: radial-gradient(circle at 50% 70%, var(--r) 18%, transparent 19%), radial-gradient(ellipse at 22% 50%, var(--r) 45%, transparent 47%), radial-gradient(ellipse at 78% 50%, var(--r) 45%, transparent 47%); }
.g-tag { left: 50%; bottom: 10%; transform: translateX(-50%) rotate(-4deg); z-index: 3; background: #f6ecd8; color: #2a1608; font: 600 12px/1 var(--f-body, system-ui); padding: 5px 8px; border-radius: 3px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sc-card { position: absolute; left: 50%; bottom: 0; width: min(200px, 100%); transform: translateX(-50%) scale(.4) translateY(40px); opacity: 0; pointer-events: none;
  background: linear-gradient(170deg, #fff8e8, #f1dfb8); color: #2a1608; border-radius: 14px; padding: 14px; text-align: center; box-shadow: 0 10px 40px rgba(255,210,120,.35);
  transition: transform .6s .25s cubic-bezier(.2,.9,.3,1.3), opacity .4s .25s; visibility: hidden; }
.sc-card .label { color: #8a0f22; } .sc-card h3 { margin: 4px 0; color: #2a1608; font-size: 19px; } .sc-card .muted { color: #6b5038; } .sc-card a { color: #8a0f22; }
.sc-plays { margin: 0 0 6px; font-style: italic; }
.sc-g.open .g-lid { transform: translate(30%, -160%) rotate(28deg); opacity: 0; }
.sc-g.open .g-bow { transform: translate(-50%, -200%) rotate(-40deg); opacity: 0; }
.sc-g.open .g-l { transform: translateX(-70%) rotate(-16deg); opacity: 0; }
.sc-g.open .g-r { transform: translateX(70%) rotate(16deg); opacity: 0; }
.sc-g.open .g-tag { opacity: 0; }
.sc-g.open .sc-wrap { pointer-events: none; }
.sc-g.open .sc-card { transform: translateX(-50%) scale(1); opacity: 1; pointer-events: auto; visibility: visible; }
.sc-all { text-align: center; margin-top: 22px; }
@media (max-width: 760px) {
  .sc-gifts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .sc-g { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .sc-snow, .sc-star, .sc-light { animation: none; } .sc-wrap > span, .sc-card { transition: none; } }
.sc-pic { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; border: 3px solid #d4a017; margin: 2px auto 6px; display: block; }
.sc-g:has(.sc-pic) { min-height: 300px; }
.sc-profiles { display: grid; gap: 16px; max-width: 900px; margin: 26px auto 0; }
.sc-prof { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; background: linear-gradient(170deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 18px; animation: sc-in .6s ease both; }
.sc-prof[hidden] { display: none; }
.sc-prof > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.sc-prof h3 { margin: 4px 0; font-size: 26px; } .sc-links { display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes sc-in { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 600px) { .sc-prof { grid-template-columns: minmax(0, 1fr); } .sc-prof > img { max-width: 260px; } }
.sc-m-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .sc-m-photo > span { flex-basis: 100%; }
.sc-m-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; }
.sc-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; margin-top: 12px; }
.sc-media video, .sc-media img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: #000; }
.sc-media img { aspect-ratio: 4 / 5; }
/* the Sunday Showcase line-up carousel (src/views/showcases.js) */
.sc-fx .fx-title { font-size: clamp(38px, 5.4vw, 80px); }
.sc-fx-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; display: grid; gap: 2px; text-align: left; pointer-events: none; background: linear-gradient(transparent, rgba(5,2,12,.92)); border-radius: 0 0 inherit inherit; }
.sc-fx-name b { font: 400 clamp(18px, 2vw, 26px)/1.05 var(--f-space); text-transform: uppercase; color: #fff; letter-spacing: .03em; }
.sc-fx-name span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--fx3); }
.sc-fx-blank { display: grid !important; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 40%, rgba(255,214,120,.25), #0b0614 70%); }
.sc-fx-blank img { width: 46% !important; height: auto !important; object-fit: contain !important; opacity: .55; filter: drop-shadow(0 0 18px rgba(255,214,120,.8)); }
.sc-fx-blank span { position: absolute; font: 400 clamp(60px, 9vw, 120px) var(--f-space); color: var(--fx); text-shadow: 0 0 24px var(--fx2); }
.sc-fx-tba .sc-fx-name b { color: #cfc6dc; }

/* ---------- Sunday Showcase: The Best Christmas Ever's Shard tree behind the presents ---------- */
.sc-scene { position: relative; min-height: clamp(520px, 60vw, 760px); align-content: end; }
.sc-shard { position: absolute; left: 50%; bottom: 40px; width: min(62vw, 400px); transform: translateX(-50%); pointer-events: none; z-index: 0; }
.sc-shard .sc-star { position: absolute; left: 50%; top: -9%; width: 34%; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 0 16px rgba(255,214,120,.95)); animation: sc-star 3s ease-in-out infinite; }
.sc-shard-body { position: relative; }
.sc-shard-body > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 40px rgba(120,200,255,.25)); opacity: .9; }
.sc-shard .sc-light { width: 7px; height: 7px; }
.sc-gifts { position: relative; z-index: 1; }

/* ---------- An act's own page (src/views/showcases.js actPage): each vibe sets the colours ---------- */
.sc-actpage { --v-bg: #0b0709; --v-ink: #fff6e6; --v-1: #e8c77a; --v-2: #ff2ea6; --v-3: #22e1ff; --v-font: var(--f-space); }
.vibe-stage { --v-bg: #0b0709; --v-1: #e8c77a; --v-2: #ff2ea6; --v-3: #22e1ff; }
.vibe-disco { --v-bg: #160a1c; --v-1: #ffd54a; --v-2: #ff4fb8; --v-3: #b38cff; }
.vibe-pop { --v-bg: #14081a; --v-1: #ff5cc8; --v-2: #3d7bff; --v-3: #ffe14d; }
.vibe-noir { --v-bg: #070405; --v-1: #ff2a3d; --v-2: #8a0f22; --v-3: #f4e6d8; }
.vibe-campfire { --v-bg: #0d0b06; --v-1: #ffb347; --v-2: #3d8b4f; --v-3: #f2d6a2; }
.vibe-mist { --v-bg: #07100f; --v-1: #9fe3d6; --v-2: #5e8f7a; --v-3: #d9f3ea; }
.vibe-spotlight { --v-bg: #0b0716; --v-1: #c79bff; --v-2: #6c2bd9; --v-3: #ffffff; }
.vibe-riot { --v-bg: #050805; --v-1: #b6ff2e; --v-2: #ff2ea6; --v-3: #22e1ff; }
.sc-actpage { background: var(--v-bg); }
.va-hero { position: relative; overflow: hidden; min-height: min(92vh, 860px); display: grid; align-items: end; padding: 120px 0 clamp(40px, 7vw, 90px); isolation: isolate; }
.va-bg { position: absolute; inset: 0; z-index: -2; background: var(--hero, none) center 25% / cover no-repeat, var(--v-bg); transform: scale(1.04); animation: va-drift 18s ease-in-out infinite alternate; }
.va-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 45%, var(--v-bg) 96%), radial-gradient(ellipse at 20% 100%, color-mix(in srgb, var(--v-2) 45%, transparent), transparent 60%); }
.va-snow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 90px 110px, #fff, transparent), radial-gradient(2.5px 2.5px at 160px 60px, #fff, transparent); background-size: 220px 180px; animation: sc-fall 16s linear infinite; }
@keyframes va-drift { to { transform: scale(1.12) translate(-1.5%, -1%); } }
.va-kicker { margin: 0 0 6px; font: 400 clamp(13px, 1.3vw, 16px) var(--f-space); letter-spacing: .24em; text-transform: uppercase; color: var(--v-3); }
.va-kicker a { color: inherit; }
.va-name { margin: 0; font: 400 clamp(56px, 11vw, 170px)/.86 var(--v-font); text-transform: uppercase; color: var(--v-ink); letter-spacing: .01em;
  text-shadow: 3px 3px 0 var(--v-2), -2px -2px 0 color-mix(in srgb, var(--v-3) 70%, transparent), 0 0 40px color-mix(in srgb, var(--v-1) 60%, transparent); overflow-wrap: anywhere; }
.va-plays { margin: 12px 0 4px; font: italic 600 clamp(18px, 2.2vw, 26px) var(--f-body); color: var(--v-1); }
.va-when { margin: 0 0 18px; color: #e9e1d6; } .va-when a { color: inherit; }
.va-btn { background: var(--v-1); color: #0b0709; border-color: var(--v-1); box-shadow: 0 0 24px color-mix(in srgb, var(--v-1) 55%, transparent); }
@keyframes va-flash { 0%, 100% { filter: brightness(1); transform: scale(1); } 12% { filter: brightness(1.9) saturate(1.4); transform: scale(1.12) rotate(-3deg); } 24% { filter: brightness(1); transform: scale(1); } 36% { filter: brightness(1.6); transform: scale(1.08) rotate(3deg); } 48% { filter: brightness(1); transform: scale(1); } }
.va-car { --fx: var(--v-1); --fx2: var(--v-2); --fx3: var(--v-3); padding-top: 20px; }
.va-car .fx-car { max-width: 760px; margin: 0 auto; }
.va-about { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; } .va-about p:first-child::first-letter { font: 400 3.2em/.8 var(--v-font); float: left; margin: 6px 10px 0 0; color: var(--v-1); }
.va-panel { position: relative; z-index: 1; background: color-mix(in srgb, var(--v-bg) 70%, #000); border: 1px solid color-mix(in srgb, var(--v-1) 40%, transparent); border-radius: 22px; padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 0 60px color-mix(in srgb, var(--v-2) 22%, transparent); }
.va-panel h2 { margin: 4px 0 8px; color: var(--v-ink); } .va-panel .label { color: var(--v-3); }
.va-share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.va-xmas { position: relative; overflow: hidden; min-height: 560px; display: grid; align-items: center; background: radial-gradient(ellipse at 70% 60%, rgba(120,200,255,.12), transparent 60%); }
.va-xmas .va-tree { left: auto; right: max(2%, calc(50% - 560px)); transform: none; bottom: 0; width: min(46vw, 330px); opacity: .7; }
.va-xpanel { max-width: 560px; }
.va-want { font-size: 18px; padding: 16px 24px; }
.va-want:disabled { opacity: .9; cursor: default; background: var(--v-2); border-color: var(--v-2); color: #fff; }
.va-count { margin: 12px 0 0; font: 400 20px var(--f-space); letter-spacing: .06em; color: var(--v-1); }
.va-cheer .va-xpanel { animation: va-cheer 1.4s ease; } @keyframes va-cheer { 30% { box-shadow: 0 0 120px var(--v-1); transform: scale(1.02); } }
.va-nav .wrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* where in the world */
.va-world .head { text-align: center; display: block; }
.va-map { position: relative; aspect-ratio: 1000 / 370; max-width: 1100px; margin: 0 auto; }
.va-land { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--v-2) 55%, #333), color-mix(in srgb, var(--v-3) 45%, #333));
  -webkit-mask: url(/img/world-land.svg) center / 100% 100% no-repeat; mask: url(/img/world-land.svg) center / 100% 100% no-repeat; opacity: .55; }
.va-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.va-arcs path { fill: none; stroke: var(--v-1); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--v-1)); animation: va-draw 2.4s .4s ease forwards; }
@keyframes va-draw { to { stroke-dashoffset: 0; } }
.va-star { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; z-index: 2; }
.va-star i { font-style: normal; font-size: clamp(22px, 3vw, 38px); line-height: 1; color: var(--v-1); text-shadow: 0 0 14px var(--v-1), 0 0 30px var(--v-2); animation: va-twinkle 1.6s ease-in-out infinite; }
.va-star b { font: 400 clamp(11px, 1.2vw, 14px) var(--f-space); letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 1px 4px #000; }
.va-tam i { color: #fff; font-size: clamp(16px, 2vw, 26px); }
@keyframes va-twinkle { 50% { transform: scale(1.35) rotate(18deg); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .va-bg, .va-snow, .va-vibe, .va-star i, .sc-fx-vibe i { animation: none; } .va-arcs path { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 700px) { .va-xmas .va-tree { opacity: .28; right: -10%; } .va-hero { min-height: 82vh; } }
.sc-xmas .sc-scene { margin-top: clamp(56px, 7vw, 90px); }

/* each act's vibe, flashing: on their page and on the line-up slides */
.va-vibes { margin-bottom: 14px; }
.va-vibe { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 999px; color: #0b0709;
  background: linear-gradient(100deg, var(--v-1), var(--v-2)); box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 30px color-mix(in srgb, var(--v-1) 70%, transparent); animation: va-flash 2.4s ease-in-out infinite; }
.va-vibe i { font-style: normal; font-size: 26px; line-height: 1; color: #fff; text-shadow: 0 0 10px var(--v-3); }
.va-vibe b { font: 400 20px/1 var(--f-space); letter-spacing: .22em; text-transform: uppercase; }
.sc-fx-vibe { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--v-1); }
.sc-fx-vibe i { font-style: normal; font-size: 15px; text-shadow: 0 0 8px var(--v-1); animation: va-flash 2.4s ease-in-out infinite; }
.sc-fx-vibe b { font: inherit; letter-spacing: inherit; color: var(--v-1); }
/* an act's socials and press (src/views/showcases.js) */
.va-follow h2, .va-press h2 { margin: 4px 0 14px; color: var(--v-ink); } .va-follow .label, .va-press .label { color: var(--v-3); }
.va-socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.va-socials a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 16px 18px; border-radius: 16px; text-decoration: none; color: var(--v-ink);
  background: linear-gradient(130deg, color-mix(in srgb, var(--v-2) 30%, transparent), color-mix(in srgb, var(--v-bg) 80%, #000)); border: 1px solid color-mix(in srgb, var(--v-1) 45%, transparent); transition: transform .2s, box-shadow .2s; }
.va-socials a:hover, .va-socials a:focus-visible { transform: translateY(-3px); box-shadow: 0 0 30px color-mix(in srgb, var(--v-1) 40%, transparent); }
.va-net { grid-column: 1; font: 400 13px var(--f-space); letter-spacing: .2em; text-transform: uppercase; color: var(--v-1); }
.va-socials b { grid-column: 1; font-size: 19px; overflow-wrap: anywhere; } .va-socials i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 22px; color: var(--v-1); }
.va-press-list { display: grid; gap: 12px; }
.va-press-list li { padding: 16px 18px; border-left: 3px solid var(--v-1); background: color-mix(in srgb, var(--v-bg) 75%, #000); border-radius: 0 14px 14px 0; }
.va-press-list a { display: grid; gap: 4px; color: var(--v-ink); text-decoration: none; } .va-press-list a:hover b { text-decoration: underline; }
.va-src { font: 400 12px var(--f-space); letter-spacing: .2em; text-transform: uppercase; color: var(--v-3); }
.va-press-list p { margin: 8px 0 0; color: #d8cfc4; }

/* ---------- The Sunday Showcase brand: its mark and wordmark, and "Sunday Showcase × TAM" ---------- */
.ss-lockup { display: inline-flex; align-items: center; gap: 12px; line-height: 1; }
.ss-lockup img { width: 56px; height: 56px; filter: drop-shadow(0 0 12px rgba(255,200,110,.45)); }
.ss-word { display: grid; gap: 2px; }
.ss-word i { font: italic 400 26px/0.9 var(--f-display); color: #fff6e6; }
.ss-word b { font: 400 26px/0.9 var(--f-space); letter-spacing: .26em; color: #f0b44a; }
.ss-lockup.big img { width: 92px; height: 92px; } .ss-lockup.big .ss-word i { font-size: 44px; } .ss-lockup.big .ss-word b { font-size: 42px; }
.sc-brand { margin-bottom: 14px; }
.ss-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; line-height: 1; }
.ss-t-ss i { font: italic 400 1.1em var(--f-display); color: #fff6e6; } .ss-t-ss b { font: 400 1.15em var(--f-space); letter-spacing: .08em; color: #fff6e6; }
.ss-x { color: var(--v-2, #ff2ea6); font: 400 1.1em var(--f-body); }
.ss-t-tam { display: inline-flex; align-items: center; gap: 6px; font: 400 1.35em/1 var(--f-inline); letter-spacing: .06em; color: var(--v-1, #e8c77a); }
.ss-t-tam img { width: 1.25em; height: 1.25em; }
.va-brand { display: inline-block; font-size: clamp(18px, 2.2vw, 26px); text-decoration: none; margin-bottom: 8px; }

/* ---------- The invite card on an act's page ---------- */
.va-invite-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(20px, 4vw, 44px); align-items: center; }
.va-pick { border: 0; padding: 0; margin: 14px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.va-pick legend { padding: 0 0 8px; }
.va-pick label { cursor: pointer; } .va-pick input { position: absolute; opacity: 0; pointer-events: none; }
.va-pick img { display: block; width: 64px; height: 80px; object-fit: cover; border-radius: 10px; border: 3px solid transparent; opacity: .7; transition: .2s; }
.va-pick input:checked + img { border-color: var(--v-1); opacity: 1; box-shadow: 0 0 16px color-mix(in srgb, var(--v-1) 60%, transparent); }
.va-pick input:focus-visible + img { outline: 2px solid var(--v-3); outline-offset: 2px; }
.va-cardbox { margin: 0; text-align: center; }
.va-card { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 22px; text-align: left; color: #fff6e6;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 30%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.92)), var(--pic) center 30% / cover no-repeat, var(--v-bg);
  border: 4px solid var(--v-1); box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--v-2) 30%, transparent); }
.va-card .ss-lockup img { width: 44px; height: 44px; } .va-card .ss-word i, .va-card .ss-word b { font-size: 20px; }
.va-card-mid { align-self: end; display: grid; gap: 4px; padding-bottom: 10px; }
.va-card-name { font: 400 clamp(44px, 5vw, 64px)/.9 var(--f-space); text-transform: uppercase; text-shadow: 3px 3px 0 var(--v-2); overflow-wrap: anywhere; }
.va-card-mid span { font: italic 600 15px var(--f-body); color: var(--v-1); }
.va-card-title { font-size: 19px; } .va-card-foot p { margin: 8px 0 0; font-size: 13px; color: #e9e1d6; }
@media (max-width: 760px) { .va-invite-in { grid-template-columns: minmax(0, 1fr); } .va-cardbox { order: -1; max-width: 340px; margin: 0 auto; width: 100%; } }
/* the Google Analytics cookie banner (public/js/consent.js) */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300; max-width: 560px; margin: 0 auto; padding: 16px 18px; border-radius: 16px;
  background: #140c12; border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.5); display: grid; gap: 10px; }
.cookie-banner p { margin: 0; font-size: 15px; } .cookie-banner div { display: flex; gap: 10px; flex-wrap: wrap; }
/* published set times */
.va-on { margin: 6px 0 2px; font: 400 clamp(18px, 2vw, 24px) var(--f-space); letter-spacing: .14em; text-transform: uppercase; color: var(--v-3); } .va-on b { color: var(--v-1); font-weight: 400; }
.sc-run { max-width: 520px; margin: 26px auto 0; text-align: left; }
.sc-run li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sc-run li b { font: 400 20px var(--f-space); color: var(--acid); min-width: 52px; } .sc-int { flex-basis: 100%; padding-left: 66px; font-size: 13px; color: var(--ink-dim); }
/* the running order panel (public/js/running-order.js) */
.ro { --v-1: #e8c77a; }
.ro-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .ro-head h2 { margin: 0; }
.ro-live { background: #1d6b3f; color: #fff; }
.ro-times { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ro-list { display: grid; gap: 8px; margin: 14px 0; }
.ro-slot { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ro-slot.ok { border-color: #3d8b4f; }
.ro-when b { display: block; font: 400 26px/1 var(--f-space); color: var(--acid); } .ro-when span { font-size: 13px; color: var(--ink-dim); }
.ro-name { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .ro-move { display: flex; gap: 4px; }
.ro-nums { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0; font-size: 14px; align-items: center; }
.ro-nums input[inputmode] { width: 52px; padding: 4px 6px; }
.ro-sc { font-weight: 600; } .ro-slot.ok .ro-sc { color: #7ddc8f; }
.ro-why textarea { width: 100%; font-size: 14px; }
.ro-int { text-align: center; font: 400 15px var(--f-space); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); padding: 6px; border: 1px dashed var(--line); border-radius: 10px; }
.ro-total { font-size: 16px; } .ro-checks li { padding: 6px 10px; border-radius: 8px; margin-bottom: 6px; font-size: 14px; }
.ro-warn { background: rgba(255, 80, 80, .14); } .ro-info { background: rgba(120, 180, 255, .1); } .ro-hold { background: rgba(255, 200, 80, .12); }
.ro-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ro-btns [disabled] { opacity: .45; cursor: not-allowed; }
.ro-why-all summary { cursor: pointer; } .ro-why-all summary h3 { display: inline; }
.ro-table { overflow-x: auto; } .ro-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ro-table th, .ro-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; } .ro-table th:nth-child(2), .ro-table td:nth-child(2) { text-align: left; }
.ro-sugg li { padding: 8px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) { .ro-slot { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sunday Showcase brand, Gen Z: wavy sun-and-mic sticker, lowercase type, a lime "showcase" sticker ---------- */
.ss-lockup { gap: 10px; }
.ss-lockup img { filter: none; transform: rotate(-4deg); }
.ss-word { gap: 4px; justify-items: start; }
.ss-word i { font: 700 28px/0.9 var(--f-body); font-style: normal; letter-spacing: -.04em; text-transform: lowercase; color: #fff; }
.ss-word b { font: 700 15px/1 var(--f-body); letter-spacing: -.01em; text-transform: lowercase; color: #111; background: #d4ff3c; padding: 4px 10px 5px; border-radius: 999px;
  border: 2px solid #111; box-shadow: 3px 3px 0 #ff3ea5; transform: rotate(-4deg); }
.ss-lockup.big .ss-word i { font-size: 52px; } .ss-lockup.big .ss-word b { font-size: 26px; padding: 6px 16px 8px; box-shadow: 5px 5px 0 #ff3ea5; }
.va-card .ss-word i { font-size: 22px; } .va-card .ss-word b { font-size: 12px; }
.ss-t-ss i { font: 700 1.05em var(--f-body); font-style: normal; letter-spacing: -.04em; text-transform: lowercase; color: #fff; }
.ss-t-ss b { font: 700 .8em var(--f-body); letter-spacing: -.01em; text-transform: lowercase; color: #111; background: #d4ff3c; padding: 3px 9px 4px; border-radius: 999px; border: 2px solid #111; box-shadow: 2px 2px 0 #ff3ea5; display: inline-block; transform: rotate(-3deg); }

/* ---------- An act's page dancing to their music (Tamalume's --syn-beat / --syn-bass / --syn-color) ---------- */
.va-listen .head { display: block; text-align: center; }
.va-video { position: relative; max-width: 900px; margin: 0 auto; }
.va-video-in { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; border: 3px solid var(--v-1); z-index: 1; }
.va-video-in iframe, .va-video-in #va-player, .va-video-in video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.va-clip .va-video-in { aspect-ratio: auto; max-height: 80vh; } .va-clip video { position: static !important; display: block; max-height: 80vh; margin: 0 auto; }
.va-video .vthumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.va-video .vplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 400 22px var(--f-space); letter-spacing: .08em; text-transform: uppercase; background: var(--v-1); color: #0b0709; box-shadow: 0 0 40px var(--v-1); }
.va-video.playing .vthumb, .va-video.playing .vplay { display: none; }
.va-pulse { position: absolute; inset: -14px; border-radius: 28px; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--syn-color, var(--v-1)) 70%, transparent), transparent); filter: blur(18px); }
.va-playing .va-pulse { opacity: calc(.25 + var(--syn-bass, 0) * .9); transform: scale(calc(1 + var(--syn-beat, 0) * .05)); }
/* the whole page, while it plays */
.va-playing .va-name { transform: scale(calc(1 + var(--syn-beat, 0) * .045)); transform-origin: left bottom;
  text-shadow: calc(3px + var(--syn-beat, 0) * 6px) calc(3px + var(--syn-beat, 0) * 6px) 0 var(--syn-color, var(--v-2)), 0 0 calc(30px + var(--syn-bass, 0) * 60px) var(--syn-color, var(--v-1)); }
.va-playing .va-bg { filter: brightness(calc(.85 + var(--syn-bass, 0) * .5)) saturate(calc(1 + var(--syn-beat, 0) * .6)); }
.va-playing .va-hero::after { opacity: calc(1 - var(--syn-beat, 0) * .25); }
.va-playing .va-vibe { animation: none; transform: scale(calc(1 + var(--syn-beat, 0) * .14)) rotate(calc(var(--syn-beat, 0) * -4deg)); }
.va-playing .va-panel, .va-playing .va-socials a, .va-playing .va-card { box-shadow: 0 0 calc(20px + var(--syn-bass, 0) * 70px) color-mix(in srgb, var(--syn-color, var(--v-1)) 55%, transparent); border-color: var(--syn-color, var(--v-1)); }
.va-playing .va-star i { transform: scale(calc(1 + var(--syn-beat, 0) * .7)); }
.va-playing .va-arcs path { stroke: var(--syn-color, var(--v-1)); }
.va-playing .ss-lockup img { transform: rotate(calc(-4deg + var(--syn-beat, 0) * 12deg)) scale(calc(1 + var(--syn-beat, 0) * .12)); }
.va-video-in { transition: border-color .15s; } .va-playing .va-video-in { border-color: var(--syn-color, var(--v-1)); }
@media (prefers-reduced-motion: reduce) { .va-playing .va-name, .va-playing .va-vibe, .va-playing .va-star i, .va-playing .ss-lockup img, .va-playing .va-pulse { transform: none; } }
/* keeping grassroots music live: the donation panel on /sunday-showcases */
.sc-give-in { text-align: center; padding: clamp(22px, 4vw, 40px); border-radius: 22px; background: linear-gradient(140deg, rgba(212,255,60,.12), rgba(255,62,165,.14)); border: 2px solid #d4ff3c; box-shadow: 6px 6px 0 #ff3ea5; }
.sc-give-in h2 { margin: 6px 0 10px; } .sc-give-in p { max-width: 52ch; margin: 0 auto 14px; }

/* ---------- each act's wall (src/views/showcases.js wall(), public/js/artist.js) ---------- */
.aw .head { display: block; text-align: center; }
.aw-form { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 10px; align-items: end; max-width: 900px; margin: 0 auto 20px; }
.aw-form textarea { width: 100%; } .aw-form [data-aw-msg] { grid-column: 1 / -1; margin: 0; }
.aw-grid { columns: 3 280px; column-gap: 14px; max-width: 1100px; margin: 0 auto; }
.aw-note, .aw-post { break-inside: avoid; margin: 0 0 14px; border-radius: 16px; padding: 14px 16px; background: color-mix(in srgb, var(--v-bg) 70%, #000); border: 1px solid color-mix(in srgb, var(--v-1) 40%, transparent); }
.aw-note:nth-child(3n+1) { transform: rotate(-1deg); } .aw-note:nth-child(3n+2) { transform: rotate(1deg); }
.aw-note blockquote { margin: 0 0 8px; font: 600 18px/1.35 var(--f-body); color: var(--v-ink); } .aw-note figcaption { font: 400 15px var(--f-space); letter-spacing: .1em; text-transform: uppercase; color: var(--v-1); }
.aw-embed { position: relative; border-radius: 12px; overflow: hidden; background: #000; }
.aw-yt { aspect-ratio: 16 / 9; } .aw-ig { height: 560px; background: #fff; }
.aw-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.aw-post figcaption { margin-top: 8px; } .aw-by { display: block; margin-top: 6px; font: 400 12px var(--f-space); letter-spacing: .18em; text-transform: uppercase; color: var(--v-3); }
.aw-empty, .aw-artist { text-align: center; }
.va-playing .aw-note, .va-playing .aw-post { border-color: var(--syn-color, var(--v-1)); }
@media (max-width: 700px) { .aw-form { grid-template-columns: minmax(0, 1fr); } }
.ar-wall li, .sc-m-wall li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ar-btns { display: flex; gap: 6px; flex-shrink: 0; } .ar-w.st-pending { background: rgba(255, 200, 80, .08); } .ar-w.st-hidden { opacity: .6; }
.sc-m-wall { margin: 8px 0; } .sc-m-wall summary { cursor: pointer; font-weight: 600; }
.sc-artist .ar-act h2 { margin: 0 0 4px; } .sc-artist .ar-add { margin: 12px 0; }

/* ---------- showcase.tam.tv: the Sunday Showcase microsite, for a Gen Z crowd ---------- */
.ss-site { --v-bg: #0d0614; --v-1: #d4ff3c; --v-2: #ff3ea5; --v-3: #4d7cff; --v-ink: #fff; background: #0d0614; }
.ssx-hero { position: relative; overflow: hidden; padding: clamp(60px, 10vw, 130px) 0 clamp(40px, 6vw, 80px); text-align: center;
  background: radial-gradient(circle at 20% 20%, rgba(255,62,165,.28), transparent 45%), radial-gradient(circle at 80% 30%, rgba(77,124,255,.28), transparent 45%), radial-gradient(circle at 50% 100%, rgba(212,255,60,.18), transparent 50%); }
.ssx-lock { display: flex; justify-content: center; margin-bottom: 18px; }
.ssx-tag { margin: 0 auto; max-width: 14ch; font: 700 clamp(48px, 9vw, 120px)/.9 var(--f-body); letter-spacing: -.05em; color: #fff; text-transform: lowercase; text-shadow: 6px 6px 0 #ff3ea5; }
.ssx-lede { max-width: 56ch; margin: 22px auto 18px; font-size: clamp(17px, 1.8vw, 21px); color: #e8e0f0; }
.ssx-next { font-size: 18px; } .ssx-pill { display: inline-block; padding: 3px 12px 4px; border-radius: 999px; background: #d4ff3c; color: #111; font-weight: 700; border: 2px solid #111; box-shadow: 3px 3px 0 #ff3ea5; transform: rotate(-3deg); }
.ssx-hero .ctas { justify-content: center; }
.ssx-btn { background: #d4ff3c; color: #111; border: 2px solid #111; box-shadow: 4px 4px 0 #ff3ea5; font-weight: 700; }
.ssx-btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 #ff3ea5; }
.ss-site .head { display: block; text-align: center; } .ss-site .head h2 { font: 700 clamp(34px, 5vw, 60px)/1 var(--f-body); letter-spacing: -.04em; text-transform: lowercase; color: #fff; }
.ss-site .label { color: #d4ff3c; }
.ssx-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.ssx-steps li, .ssx-ladder li { position: relative; padding: 22px; border-radius: 22px; background: #1a0f24; border: 2px solid #111; box-shadow: 6px 6px 0 #4d7cff; }
.ssx-steps li:nth-child(2) { box-shadow: 6px 6px 0 #ff3ea5; transform: rotate(1deg); } .ssx-steps li:nth-child(3) { box-shadow: 6px 6px 0 #d4ff3c; transform: rotate(-1deg); }
.ssx-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #d4ff3c; color: #111; font: 700 22px var(--f-body); border: 2px solid #111; }
.ssx-steps h3, .ssx-ladder h3 { margin: 10px 0 6px; color: #fff; font-size: 22px; }
.ssx-circuit { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0; }
.ssx-night { display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; background: #1a0f24; border: 1px solid #3a2a4a; color: #fff; text-decoration: none; min-width: 190px; }
.ssx-night:hover { border-color: #d4ff3c; } .ssx-night span { font-size: 13px; color: #b9a9c9; } .ssx-night em { font-style: normal; font-size: 13px; color: #d4ff3c; }
.ssx-cta { text-align: center; }
.ssx-ladder { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; counter-reset: l; }
.ssx-ladder li:not(:last-child)::after { content: '→'; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); z-index: 2; font: 700 26px var(--f-body); color: #d4ff3c; }
.ssx-step { font: 700 40px/1 var(--f-body); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px #ff3ea5; }
.ssx-h3 { text-align: center; margin: 30px 0 14px; font: 700 26px var(--f-body); letter-spacing: -.03em; text-transform: lowercase; color: #fff; }
.ss-site .aw-note figcaption a { color: #d4ff3c; }
.ssx-alumni { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
.ssx-alumni a { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border-radius: 18px; background: #1a0f24; color: #fff; text-decoration: none; text-align: center; border: 2px solid transparent; }
.ssx-alumni a:hover { border-color: var(--v-1); transform: rotate(-2deg); }
.ssx-alumni img, .ssx-ph { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--v-1); }
.ssx-ph { display: grid; place-items: center; font: 700 40px var(--f-body); background: #2a1a3a; } .ssx-alumni span { font-size: 12px; color: #b9a9c9; }
.ssx-join { max-width: 640px; margin: 34px auto 0; padding: clamp(22px, 4vw, 34px); border-radius: 24px; background: #1a0f24; border: 2px solid #d4ff3c; box-shadow: 8px 8px 0 #ff3ea5; }
.ssx-join h3 { margin: 0 0 6px; font: 700 30px var(--f-body); letter-spacing: -.03em; text-transform: lowercase; color: #fff; }
.ssx-role { border: 0; padding: 0; margin: 10px 0; display: flex; gap: 16px; align-items: center; } .ssx-role legend { padding: 0 8px 0 0; float: left; }
@media (max-width: 700px) { .ssx-ladder li:not(:last-child)::after { content: '↓'; right: 50%; top: auto; bottom: -22px; transform: translateX(50%); } }
/* the header between phone and wide screens: tighter, so every link fits on one line */
@media (min-width: 921px) and (max-width: 1240px) {
  .nav { gap: 14px; } .nav a { font-size: 14px; }
  .top .for-you { display: none; } /* "Who are you?" is on the home page and in the menu below this */
}
@media (min-width: 921px) and (max-width: 1060px) { .nav { gap: 10px; } .nav a { font-size: 13px; } .brand span { display: none; } }
/* ---------- the TAM Club: the list and the card (src/views/club.js, public/js/club.js) ---------- */
.cl-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px 28px; align-items: center; padding-top: 28px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.cl-strip b { color: var(--gold); } .cl-strip span { color: var(--ink-dim); }
.cl-join.compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; }
.cl-join.compact .check { grid-column: 1 / -1; font-size: 13px; color: var(--ink-dim); order: 3; }
.cl-join.compact .err { grid-column: 1 / -1; order: 4; margin: 0; }
.cl-join .err.ok, .cl-signin .err.ok, #cm .err.ok { color: #7fe0a8; }
.cl-join:not(.compact) { display: grid; gap: 16px; margin-top: 18px; }
.cl-chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chips legend { font-size: 14px; color: var(--ink-dim); margin-bottom: 8px; padding: 0; }
.cl-chip { position: relative; } .cl-chip input { position: absolute; opacity: 0; inset: 0; }
.cl-chip span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); font-size: 14px; cursor: pointer; transition: background .2s, border-color .2s; }
.cl-chip input:checked + span { background: linear-gradient(135deg, #ffd36b, #e88a1a); color: #2a1606; border-color: transparent; font-weight: 600; }
.cl-chip input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.cl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 32px; align-items: center; }
.cl-hero-glass { display: grid; justify-items: center; gap: 10px; } .cl-hero-glass .cl-glass { width: min(220px, 60vw); }
.cl-glass-cap { font: 600 22px/1.2 var(--f-hand); color: var(--gold); text-align: center; }
.cl-glass { width: 120px; color: var(--ink); filter: drop-shadow(0 10px 30px rgba(255, 190, 80, .25)); }
.cl-glass svg { width: 100%; height: auto; display: block; overflow: visible; }
.cl-glass .cl-beer { transform: translateY(calc(166px - var(--fill) * 79px)); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.cl-glass .cl-foam { transform: translateY(calc(160px - var(--fill) * 79px)); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); opacity: clamp(0, calc(var(--fill) * 8), 1); }
.cl-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; }
.cl-steps { padding-left: 1.2em; } .cl-steps li { margin-bottom: 8px; }
.cl-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-tiers span { display: grid; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; }
.cl-tiers small { font-weight: 400; color: var(--muted); font-size: 12px; }
.cl-ways { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 6px; }
.cl-ways li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.cl-ways b { color: #ffd36b; font-size: 15px; } .cl-ways small { color: var(--muted); }
.cl-ways li.done { opacity: .55; } .cl-ways li i { font-style: normal; color: #7fe0a8; }
.cl-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.cl-perks > div { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; } .cl-perks b { color: var(--gold); }
.cl-archive { list-style: none; padding: 0; } .cl-archive li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cl-archive small { color: var(--muted); margin-left: 8px; } .cl-archive.big a { font: 400 26px/1.15 var(--f-display); }
.cl-archive p { margin: 4px 0 0; color: var(--ink-dim); font-size: 15px; }
.cl-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 32px; align-items: center; padding: clamp(20px, 4vw, 36px); border-radius: 28px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 196, 92, .18), transparent 55%), linear-gradient(160deg, #241820, #120b0f); border: 1px solid #4a3540; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.cl-card h1 { font-size: clamp(36px, 6vw, 64px); margin: 0 0 6px; }
.cl-points { font: 400 22px/1 var(--f-space); letter-spacing: .1em; margin: 0 0 12px; } .cl-points b { font: 400 64px/1 var(--f-display); color: #ffd36b; letter-spacing: 0; }
.cl-bar { height: 12px; border-radius: 999px; background: #2a1d24; overflow: hidden; margin-bottom: 14px; }
.cl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e88a1a, #ffd36b); border-radius: inherit; transition: width 1.2s; }
.cl-reward { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px dashed #5a4450; margin-bottom: 12px; }
.cl-reward.ready { border: 1px solid #ffd36b; background: rgba(255, 211, 107, .08); animation: cl-glow 2.4s ease-in-out infinite; }
.cl-reward.live { border: 2px solid #7fe0a8; background: rgba(127, 224, 168, .08); }
@keyframes cl-glow { 50% { box-shadow: 0 0 0 6px rgba(255, 211, 107, .12); } }
.cl-code { font: 400 clamp(40px, 7vw, 64px)/1 var(--f-space); letter-spacing: .18em; color: #7fe0a8; margin: 4px 0 8px; }
.cl-qr { display: grid; justify-items: center; gap: 6px; text-align: center; } .cl-qr img { background: #fff; padding: 8px; border-radius: 14px; } .cl-qr small { color: var(--muted); font-size: 12px; max-width: 160px; }
.cl-pending { background: rgba(255, 211, 107, .1); border: 1px solid #ffd36b; padding: 12px 16px; border-radius: 14px; }
.cl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.cl-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: clamp(16px, 3vw, 26px); }
.cl-panel h2 { font-size: clamp(26px, 3vw, 34px); } .cl-panel h3 { font-size: 17px; margin-top: 16px; }
.cl-ref { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; } .cl-ref input { min-width: 0; }
.cl-socials { display: flex; flex-wrap: wrap; gap: 8px; } .cl-socials .done { opacity: .6; }
.cl-badges { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 18px; }
.cl-badges li { display: grid; justify-items: center; text-align: center; gap: 4px; font-size: 12px; padding: 10px 6px; border-radius: 14px; background: var(--panel-2); filter: grayscale(1); opacity: .45; }
.cl-badges li.got { filter: none; opacity: 1; border: 1px solid #ffd36b; } .cl-badges span { font-size: 26px; }
.cl-history { list-style: none; padding: 0; margin: 0; } .cl-history li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cl-history li > small:last-child { margin-left: auto; color: var(--muted); white-space: nowrap; } .cl-history b { color: #7fe0a8; min-width: 38px; } .cl-history b.neg { color: #ffd36b; }
.cl-mini { text-align: center; } .cl-tier { color: var(--gold); font-size: 20px; }
.cl-staff .row-btn { margin: 12px 0; } .cl-barform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.cl-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 90; background: linear-gradient(135deg, #ffd36b, #e88a1a); color: #2a1606; font-weight: 700;
  padding: 12px 18px; border-radius: 999px; box-shadow: 0 12px 40px rgba(0, 0, 0, .4); animation: cl-up .4s cubic-bezier(.2, .8, .2, 1); max-width: calc(100vw - 32px); text-align: center; }
.cl-toast.out { opacity: 0; transform: translate(-50%, 12px); transition: .5s; }
@keyframes cl-up { from { opacity: 0; transform: translate(-50%, 20px); } }
.cl-book { font-size: 14px; color: var(--ink-dim); margin: 10px 0; }
.nl-issue { background: #0b0709; border: 1px solid var(--line); border-radius: 22px; padding: clamp(18px, 4vw, 36px); margin-bottom: 28px; }
.nl-issue h1 { font: 400 clamp(32px, 5vw, 48px)/1.1 var(--f-display) !important; }
@media (max-width: 860px) {
  .cl-strip, .cl-hero-grid, .cl-how, .cl-grid, .cl-perks { grid-template-columns: minmax(0, 1fr); }
  .cl-card { grid-template-columns: minmax(0, 1fr); justify-items: start; } .cl-card .cl-glass { width: 96px; } .cl-qr { justify-self: center; }
}
/* the back office: /club/manage */
.cm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.cm-tabs button { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font: inherit; cursor: pointer; }
.cm-tabs button.on { background: var(--gold); color: #2a1606; font-weight: 700; }
.cm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 22px; }
.cm-tiles div { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; }
.cm-tiles b { font: 400 36px/1 var(--f-display); color: var(--gold); } .cm-tiles span { font-size: 13px; color: var(--ink-dim); }
.cm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.cm-bars { list-style: none; padding: 0; } .cm-bars li { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.cm-bars i { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #e88a1a, #ffd36b); }
.cm-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 14px 0; } .cm-table th, .cm-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cm-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } #cm-issue { display: grid; gap: 12px; }
.cm-preview iframe { width: 100%; height: 760px; border: 1px solid var(--line); border-radius: 16px; background: #0b0709; }
.cm-send { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; } .cm-aud b { color: var(--gold); font-size: 20px; }
.cm-search { display: flex; flex-wrap: wrap; gap: 8px; } .cm-search input { flex: 1; min-width: 200px; }
@media (max-width: 960px) { .cm-editor { grid-template-columns: minmax(0, 1fr); } .cm-table { display: block; overflow-x: auto; } }
/* a member's photo on their TAM Club card */
.cl-who { display: flex; gap: 16px; align-items: center; margin-bottom: 6px; }
.cl-face-btn { cursor: pointer; flex: none; border-radius: 50%; }
.cl-face-btn:focus-within { outline: 3px solid var(--cyan); outline-offset: 3px; }
.cl-face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #ffd36b; display: grid; place-items: center; background: var(--panel-2); font-size: 28px; }
.cl-face.empty { border-style: dashed; }
.cl-face.big { width: 160px; height: 160px; margin: 0 auto 14px; }
.cl-photo-hint { margin: 0 0 10px; }

/* The Analogue Room (/analogue-room): a daily escape room. Cyan files the record, violet files the story. */
.ar-note { border-left: 3px solid var(--gold); padding-left: 14px; color: var(--ink-dim); max-width: 60ch; }
.ar-setting { font: 400 20px/1.2 var(--f-inline); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 22px 0 8px; }
.ar-briefing p, .ar-lock p { max-width: 62ch; }
.ar-points { color: var(--ink-dim); }
.ar-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 14px; flex-wrap: wrap; }
.ar-seals { display: flex; gap: 8px; }
.ar-seal { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 400 15px/1 var(--f-inline); letter-spacing: .06em; transition: background .5s, color .5s; }
.ar-seal.done { background: var(--gold); border-color: var(--gold); color: #120a0a; }
.ar-timer { font: 400 30px/1 var(--f-inline); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.ar-days { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ar-days .on { border-color: var(--acid); color: var(--acid); }
.ar-lock { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(18px, 3vw, 28px); margin: 0 0 18px; }
.ar-lock.shut { opacity: .55; }
.ar-lock header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ar-lock h2 { font: 400 clamp(28px, 4vw, 40px)/1 var(--f-inline); letter-spacing: .04em; }
.ar-cards { display: grid; gap: 10px; }
.ar-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--panel-2); }
.ar-card p { margin: 0 0 10px; } .ar-card p:last-child { margin: 0; }
.ar-card.rec { border-color: var(--cyan); } .ar-card.sto { border-color: var(--pink); }
.ar-tag { display: block; font: 400 14px/1.3 var(--f-inline); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px; }
.rec .ar-tag { color: var(--cyan); } .sto .ar-tag { color: var(--pink); }
.ar-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ar-input { font: 400 32px/1 var(--f-inline); letter-spacing: .3em; width: 200px; max-width: 100%; padding: 8px 14px; background: var(--night); color: var(--gold); border: 1px solid var(--line); border-radius: 12px; text-transform: uppercase; }
.ar-gate { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; display: grid; gap: 8px; }
.ar-gate p { margin: 0; }
.ar-gate.won { grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.ar-letter { font: 400 56px/.9 var(--f-inline); color: var(--gold); min-width: 34px; }
.ar-opt { font: inherit; text-align: left; width: 100%; padding: 12px 16px; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.ar-opt:hover:not(:disabled) { border-color: var(--gold); } .ar-opt:disabled { cursor: not-allowed; opacity: .6; }
.ar-open { border-color: var(--gold); } .ar-open h2 { color: var(--gold); }
.ar-won { color: var(--gold); font-weight: 600; }
.ar-sources ul { margin: 6px 0 0; padding-left: 18px; }

/* The Analogue Room's invitation on every page, its tile on the home page, and the team's counts */
.ar-invite { display: flex; align-items: center; justify-content: center; gap: 12px 18px; flex-wrap: wrap; padding: 10px var(--gutter); background: var(--panel-2); border-bottom: 1px solid var(--line); position: relative; z-index: 2; text-align: center; }
.ar-invite p { margin: 0; color: var(--ink); }
.ar-x { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; padding: 6px 10px; cursor: pointer; }
.ar-x:hover { color: var(--ink); }
.ar-tile { background: var(--panel); border: 1px solid var(--gold-deep); border-radius: var(--r); padding: clamp(22px, 4vw, 44px); }
.ar-teaser { color: var(--ink-dim); max-width: 62ch; }
.ar-tile .ctas { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.ar-pts { color: var(--gold); }
.ar-stats { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-variant-numeric: tabular-nums; }
.ar-stats th, .ar-stats td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.table-wrap { overflow-x: auto; }
/* ---------- the TAM Stage: A&R as a game (src/views/stage.js) ---------- */
.mv { margin: 0 auto; width: min(var(--mv-size, 560px), 100%); }
.mv svg { width: 100%; height: auto; display: block; overflow: visible; }
.mv-stars circle { fill: var(--v-3, #fff); opacity: .7; animation: mv-twinkle 3s ease-in-out infinite alternate; }
.mv-stars circle:nth-child(3n) { animation-delay: -1s; } .mv-stars circle:nth-child(3n+1) { animation-delay: -2s; }
@keyframes mv-twinkle { to { opacity: .15; } }
.mv-orbit { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.2; stroke-dasharray: 3 6; }
.mv-orbit.on { stroke: var(--v-1, #e8c77a); stroke-opacity: .55; stroke-dasharray: none; }
.mv-arc { fill: none; stroke: var(--v-2, #ff2ea6); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--v-2, #ff2ea6)); }
.mv-core { animation: mv-pulse 3.2s ease-in-out infinite; transform-origin: 300px 300px; }
@keyframes mv-pulse { 50% { transform: scale(1.12); } }
.mv-me { fill: var(--v-1, #e8c77a); }
.mv-planets { transform-origin: 300px 300px; animation: mv-spin 240s linear infinite; }
.mv-planets text { animation: mv-spin 240s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
@keyframes mv-spin { to { transform: rotate(360deg); } }
.mv-planet circle { stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; fill: #1d1520; }
.mv-planet.done circle { fill: var(--v-1, #e8c77a); stroke: none; }
.mv-planet.here circle { fill: var(--v-2, #ff2ea6); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 10px var(--v-2, #ff2ea6)); }
.mv-planet.next circle { stroke: var(--v-2, #ff2ea6); stroke-width: 2; stroke-dasharray: 3 3; }
.mv-planet text { fill: var(--v-ink, #f6ecd8); font: 400 15px var(--f-space); letter-spacing: .08em; text-anchor: middle; }
.mv-planet.far text { opacity: .55; }
.st-boosted .mv-stars circle { animation: mv-burst .8s ease-out 2; }
@keyframes mv-burst { 50% { opacity: 1; r: 3.5; } }
@media (prefers-reduced-motion: reduce) { .mv-planets, .mv-planets text, .mv-core, .mv-stars circle { animation: none; } }
.st-page { background: var(--v-bg, var(--night)); }
.st-page main { color: var(--v-ink, var(--ink)); }
.st-preview { background: var(--acid); color: #120a0a; text-align: center; padding: 8px; margin: 0; font-weight: 600; }
.st-top { padding: clamp(32px, 6vw, 72px) 0 24px; position: relative; z-index: 1; }
.st-top-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.st-id h1 { font: 400 clamp(48px, 8vw, 104px)/.95 var(--f-display); color: var(--v-1); margin-bottom: 10px; }
.st-id .label { color: var(--v-3, var(--gold)); }
.st-plays { font-size: 21px; color: var(--v-ink, var(--ink)); }
.st-boost { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; }
.st-boost .btn { background: var(--v-2); box-shadow: 0 0 30px color-mix(in srgb, var(--v-2) 50%, transparent); font-size: 18px; }
.st-boost b { font: 400 44px/1 var(--f-display); color: var(--v-1); } .st-boost span { color: var(--ink-dim); }
.st-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.st-next { max-width: 520px; margin: 8px auto 0; }
.st-next b { color: var(--v-1); }
.st-goals { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.st-goals li { position: relative; padding: 8px 12px 8px 40px; border-radius: 12px; background: rgba(255, 255, 255, .05); overflow: hidden; font-size: 15px; }
.st-goals li > i { position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: color-mix(in srgb, var(--v-2, #ff2ea6) 22%, transparent); z-index: -1; }
.st-goals li { isolation: isolate; }
.st-goals li::after { content: '○'; position: absolute; left: 14px; top: 8px; color: var(--muted); }
.st-goals li.done::after { content: '✓'; color: #7fe0a8; } .st-goals li.done { color: var(--ink); }
.st-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 32px; }
.st-video { margin-bottom: 22px; }
.st-links { list-style: none; padding: 0; } .st-links li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); } .st-links a { color: var(--v-1); }
.st-backers { color: var(--v-3, var(--ink-dim)); }
.st-hero h1 { font-size: clamp(56px, 10vw, 128px); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.st-card { display: block; text-decoration: none; color: var(--ink); background: var(--v-bg, var(--panel)); border: 1px solid color-mix(in srgb, var(--v-1, #e8c77a) 35%, transparent); border-radius: 20px; overflow: hidden; transition: transform .2s; }
.st-card:hover { transform: translateY(-4px); color: var(--ink); }
.st-pic { aspect-ratio: 1; background: radial-gradient(circle, var(--v-2, #ff2ea6), transparent 70%); display: grid; place-items: center; font-size: 64px; color: var(--v-1); }
.st-pic img { width: 100%; height: 100%; object-fit: cover; }
.st-card-body { padding: 14px; } .st-card h3 { margin: 4px 0; color: var(--v-1); } .st-card p { margin: 0 0 8px; color: var(--ink-dim); font-size: 14px; }
.st-planet { font: 400 12px var(--f-space); letter-spacing: .16em; text-transform: uppercase; color: var(--v-3, var(--gold)); }
.st-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-bottom: 6px; } .st-bar i { display: block; height: 100%; background: var(--v-2, #ff2ea6); }
.st-card small { color: var(--muted); }
.st-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.st-filter button { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.st-filter button.on { background: var(--gold); color: #2a1606; }
.st-path { list-style: none; padding: 0; display: grid; gap: 8px; }
.st-path li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.st-path b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--gold); color: var(--gold); }
.st-path strong { display: block; } .st-path span { color: var(--ink-dim); font-size: 15px; }
.st-how, .st-apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.st-help li { margin-bottom: 8px; }
.st-dash-top { margin-bottom: 18px; } .st-dash-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
.st-dash-grid form { display: grid; gap: 12px; }
.st-checks { list-style: none; padding: 0; } .st-checks li { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.st-checks i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-style: normal; flex: none; }
.st-checks li.done i { background: #7fe0a8; color: #0b2a1a; border: 0; } .st-checks small { margin-left: auto; color: var(--muted); }
.st-photo { display: flex; gap: 14px; align-items: center; } .st-photo img, .st-photo > span { width: 96px; height: 96px; border-radius: 18px; object-fit: cover; background: var(--panel-2); display: grid; place-items: center; font-size: 32px; }
.st-msg { background: rgba(255, 211, 107, .1); border: 1px solid #ffd36b; border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; }
@media (max-width: 860px) { .st-top-grid, .st-body, .st-how, .st-apply, .st-dash-grid { grid-template-columns: minmax(0, 1fr); } }
/* the A&R board */
.anr-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.anr-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding-bottom: 8px; }
.anr-board section { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px; min-width: 0; }
.anr-board h3 { font-size: 15px; } .anr-board h3 small { color: var(--muted); }
.anr-col { display: grid; gap: 8px; }
.anr-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 8px; margin-bottom: 8px; font: inherit; cursor: pointer; }
.anr-card img, .anr-noimg { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: var(--panel); color: var(--gold); }
.anr-card b { display: block; } .anr-card small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anr-score { font: 400 26px/1 var(--f-display); color: var(--gold); font-style: normal; } .anr-score.big { font-size: 48px; margin-left: auto; }
.anr-sug { font-style: normal; font-size: 12px; font-weight: 600; color: #ffd36b; } .anr-sug.advance { color: #7fe0a8; } .anr-sug.review { color: var(--cyan); }
.anr-detail:empty { display: none; } .anr-detail { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 18px; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; }
.anr-head { display: flex; gap: 14px; align-items: flex-start; } .anr-head img { border-radius: 14px; object-fit: cover; } .anr-head h2 { font-size: 30px; margin: 0; }
.anr-suggest { background: var(--panel-2); border-left: 4px solid var(--gold); padding: 10px 12px; border-radius: 8px; } .anr-suggest.advance { border-color: #7fe0a8; }
.anr-rate { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.anr-stars { display: grid; gap: 4px; font-size: 13px; } .anr-note { display: flex; gap: 8px; } .anr-note input { flex: 1; min-width: 0; }
@media (max-width: 960px) { .anr-wrap { grid-template-columns: minmax(0, 1fr); } .anr-detail { position: static; max-height: none; } }
/* ---------- JOM Youth Music × TAM: jom.tam.tv (src/views/jom.js) ---------- */
.jm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 32px; align-items: center; }
.jm-poster { border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); transform: rotate(2deg); }
.jm-next { display: grid; gap: 4px; justify-items: start; background: var(--panel); border: 1px solid var(--gold-deep); border-radius: 18px; padding: 16px 18px; margin-top: 18px; max-width: 520px; }
.jm-next b { font-size: 20px; } .jm-next .btn { margin-top: 8px; }
.jm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.jm-card { display: block; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform .2s, border-color .2s; }
.jm-card:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--ink); }
.jm-pic { aspect-ratio: 4 / 5; display: grid; place-items: center; background: linear-gradient(150deg, #2b1a3a, #0e2a2a); }
.jm-pic img { width: 100%; height: 100%; object-fit: cover; }
.jm-pic span { font: 400 56px/1 var(--f-display); color: var(--gold); }
.jm-pic.big { border-radius: 22px; } .jm-pic.big span { font-size: 120px; }
.jm-card-body { padding: 10px 12px; display: grid; gap: 2px; } .jm-card-body small { color: var(--muted); font-size: 12px; } .jm-card-body .jm-pl { color: var(--gold); }
.jm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.jm-act-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.jm-photos img { border-radius: 22px; width: 100%; height: auto; }
.jm-photos.many { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .jm-photos.many img:first-child { grid-column: 1 / -1; }
.jm-links { display: flex; flex-wrap: wrap; gap: 8px; text-transform: capitalize; }
.jm-h { font-size: 24px; margin-top: 18px; } .jm-played { list-style: none; padding: 0; } .jm-played li { padding: 6px 0; border-bottom: 1px solid var(--line); } .jm-played small { color: var(--muted); margin-left: 6px; }
.jm-pledge { margin: 22px 0 14px; padding: 18px 20px; border-radius: 20px; background: radial-gradient(120% 140% at 0 0, rgba(255, 59, 78, .22), transparent 60%), var(--panel); border: 1px solid #7a2a33; }
.jm-pledge h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 4px 0 6px; }
.jm-pledge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 4px; }
.jm-pledge-row select { padding: 10px 12px; border-radius: 12px; background: var(--night); color: var(--ink); border: 1px solid var(--line); font: inherit; }
.jm-pledge-row b { font: 400 40px/1 var(--f-display); color: var(--gold); margin-left: 6px; }
.jm-share { display: flex; flex-wrap: wrap; gap: 8px; }
.jm-claim summary, .jm-concern summary { cursor: pointer; } .jm-claim form, .jm-concern form { display: grid; gap: 12px; margin-top: 12px; } .jm-concern { margin: 16px 0; }
.jm-edit { display: grid; gap: 12px; margin-bottom: 18px; } .jm-edit h2 { font-size: 28px; }
.jm-wait { background: rgba(255, 211, 107, .1); border: 1px solid #ffd36b; border-radius: 12px; padding: 10px 12px; }
.jm-thumbs { display: flex; flex-wrap: wrap; gap: 10px; } .jm-thumbs figure { margin: 0; display: grid; gap: 2px; justify-items: start; } .jm-thumbs img { border-radius: 10px; object-fit: cover; }
.jmm-item { margin-bottom: 14px; display: grid; gap: 8px; }
.jmm-diff { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.jmm-diff del { color: #ff8a8a; white-space: pre-wrap; } .jmm-diff ins { color: #7fe0a8; text-decoration: none; white-space: pre-wrap; }
@media (max-width: 860px) { .jm-hero-grid, .jm-two, .jm-act-grid { grid-template-columns: minmax(0, 1fr); } .jm-poster { max-width: 320px; margin: 0 auto; } }