/* 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 .wrap:first-child { 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 .wrap:first-child { grid-template-columns: 1fr 1fr; } .foot .wrap:first-child > 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; }
}