:root {
  --bg: #faf7f1;
  --surface: #ffffff;
  --surface-2: #f2ede3;
  --text: #1f1b16;
  --muted: #6b6258;
  --border: #e4ddcf;
  --accent: #c98a0b;
  --accent-strong: #a86f00;
  --accent-ink: #1f1b16;
  --blue: #1f5fbf;
  --success: #1d7a46;
  --danger: #b3261e;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(31, 27, 22, .06), 0 8px 24px rgba(31, 27, 22, .06);
  --page-width: 90%;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14120f;
    --surface: #1d1a16;
    --surface-2: #26221c;
    --text: #f3eee6;
    --muted: #a89f92;
    --border: #353027;
    --accent: #f0b429;
    --accent-strong: #ffc94d;
    --accent-ink: #1a1400;
    --blue: #7fb0ff;
    --success: #5fcf8e;
    --danger: #ff8a80;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 750; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1em; }

.container { width: var(--page-width); margin: 0 auto; }
@media (max-width: 620px) { .container { width: calc(100% - 32px); } }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header: a top bar (socials, languages) that scrolls away, then the logo bar that stays pinned */
:root { --topbar-h: 40px; --header-h: 72px; }
@media (max-width: 620px) { :root { --header-h: 60px; } }
html { scroll-padding-top: calc(var(--header-h) + 16px); }

.skip-link {
  position: absolute; left: 16px; top: 8px; z-index: 100; transform: translateY(-200%);
  padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }

.site-header {
  position: sticky; top: calc(-1 * var(--topbar-h)); z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 20px rgba(31, 27, 22, .08); }
.nav { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand { display: flex; align-items: center; border-radius: 8px; }
.brand-logo { height: 56px; width: auto; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { text-decoration: none; padding: 10px 16px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .95rem; transition: color .15s ease, background .15s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
@media (max-width: 620px) {
  .nav { gap: 12px; }
  .brand-logo { height: 44px; }
  .nav-links a { padding: 10px 14px; }
}

/* Visible keyboard focus everywhere in the header, never on mouse click */
.site-header a:focus-visible, .skip-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-block { width: 100%; }

/* Home carousel: the next event in the middle, past events peeking in on both sides.
   Every card sits in the same grid cell and is moved sideways by its --offset from the middle (-1, 0, 1). */
.slider { --card-w: min(64vw, 1100px); --gap: 20px; position: relative; padding-top: 40px; overflow: hidden; }
.slider-stage { position: relative; display: grid; justify-content: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.slide {
  --offset: 0; grid-area: 1 / 1; width: var(--card-w); display: flex; flex-direction: column;
  color: inherit; text-decoration: none; border-radius: var(--radius); outline-offset: 4px; -webkit-tap-highlight-color: transparent;
  transform: translateX(calc(var(--offset) * (var(--card-w) + var(--gap)))) scale(.92);
  transition: transform .55s cubic-bezier(.25, .8, .25, 1), opacity .4s ease;
}
.slide[aria-current="true"] { z-index: 1; transform: none; }
.slide.is-hidden { opacity: 0; pointer-events: none; }
.slide.no-anim { transition: none; }
.slider:not(.is-ready) .slide { transition: none; }
/* The cover keeps its whole poster: it is fitted inside, over a blurred copy of itself. */
.slide-media {
  position: relative; display: grid; place-items: center; aspect-ratio: 2 / 1; max-height: 68vh; overflow: hidden;
  border-radius: var(--radius); background: var(--surface-2); box-shadow: var(--shadow);
}
.slide-media::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: rgba(10, 8, 6, .55); transition: opacity .4s ease;
}
.slide[aria-current="true"] .slide-media::after { opacity: 0; }
.slide:not([aria-current="true"]) { cursor: pointer; }
.slide:not([aria-current="true"]):hover .slide-media::after { background: rgba(10, 8, 6, .4); }
.slide[aria-current="true"]:hover .slide-media img, .slide[aria-current="true"]:hover .slide-media video { transform: scale(1.015); }
.slide-media img, .slide-media video { grid-area: 1 / 1; position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.slide-media img { z-index: 1; }
.slide-media video { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .4s ease, transform .5s ease; }
.slide.is-playing .slide-media video { opacity: 1; }
.slide-backdrop { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(28px) brightness(.55); }
.slide .cover-fallback { width: 100%; height: 100%; }
/* Arrows sit over the side cards, at the height of the picture. */
.slider-arrow, .slider-sound {
  position: absolute; z-index: 2; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--accent-ink); background: var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); transition: background .15s ease, transform .15s ease;
}
.slider-arrow { top: 50%; translate: 0 -50%; width: 52px; height: 52px; }
.slider-arrow:hover, .slider-sound:hover { background: var(--accent-strong); }
.slider-arrow:active { transform: scale(.94); }
.slider-arrow svg, .slider-sound svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.slider-arrow.prev { left: max(16px, calc(50% - var(--card-w) / 2 - var(--gap) - 26px)); }
.slider-arrow.next { right: max(16px, calc(50% - var(--card-w) / 2 - var(--gap) - 26px)); }
.slider-sound {
  top: calc(min(var(--card-w) / 2, 68vh) - 58px); right: calc(50% - var(--card-w) / 2 + 14px); width: 44px; height: 44px;
  color: #fff; background: rgba(0, 0, 0, .5); box-shadow: none; backdrop-filter: blur(6px);
}
.slider-sound:hover { background: rgba(0, 0, 0, .7); }
.slider-sound[hidden] { display: none; }
.slider-sound .icon-sound, .slider-sound[aria-pressed="true"] .icon-muted { display: none; }
.slider-sound[aria-pressed="true"] .icon-sound { display: block; }
.slider-sound svg { width: 20px; height: 20px; stroke-width: 2; }
.slider-sound svg path:first-child { fill: currentColor; }
@media (max-width: 620px) {
  .slider { --card-w: 84vw; --gap: 10px; padding-top: 24px; }
  .slider-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide-media img, .slide-media video, .slide-media::after { transition: none; }
}

/* An event over the years: the next one up top, then each past year with its photos */
.year-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; }
.year-nav a {
  padding: 4px 12px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text); font-weight: 700; font-size: .9rem; text-decoration: none;
}
.year-nav a.year-nav-series { background: none; box-shadow: none; padding-left: 0; color: var(--muted); }
.year-nav a:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.year-nav a[aria-current="page"] { background: var(--accent); box-shadow: none; color: var(--accent-ink); }
.series-head { margin: 8px 0 28px; }
.series-head h1 { margin: 0 0 10px; }
.series-about { max-width: 70ch; margin: 0 0 16px; color: var(--muted); font-size: 1.1rem; line-height: 1.6; }
.series-next {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 48px;
  padding: 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--border);
}
.series-next-cover { display: block; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 12px; background: var(--surface-2); }
.series-next-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.series-next-body h2 { margin: 8px 0 6px; font-size: 1.6rem; }
.series-next-body h2 a { color: inherit; text-decoration: none; }
.series-next-when { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .8rem; }
.series-next-price { margin: 8px 0 0; font-weight: 800; font-size: 1.2rem; }
.series-next-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.series-year { margin-bottom: 40px; }
.series-year-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.series-year-head h2 { margin: 0; font-size: 2rem; }
.series-year-head p { margin: 0; }
.series-year-link { margin-left: auto; font-weight: 700; }
.series-year-cover { display: block; max-width: 520px; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 12px; }
.series-year-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .series-next { grid-template-columns: 1fr; padding: 14px; gap: 16px; }
  .series-year-link { margin-left: 0; }
}

/* A year's description: kept as typed (emojis, line breaks); a long one is cut short until "Read more" */
.description { line-height: 1.6; overflow-wrap: anywhere; }
.description p { margin: 0 0 .8em; }
.description p:last-child { margin-bottom: 0; }
.description.is-long { max-height: 20em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* A preview of a year's photos: a grid of thumbnails, each opening the album at that photo */
.gallery-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.gallery-head h2 { margin-bottom: 12px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gallery li[hidden] { display: none; }
.gallery a { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.gallery a:hover img { transform: scale(1.04); }
.gallery a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Event videos: YouTube loads only when played */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.video { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.video video, .video iframe, .video-poster { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; display: block; }
.video-poster { position: relative; display: grid; place-items: center; background-size: cover; background-position: center; cursor: pointer; padding: 0; }
.video-poster svg { width: 64px; height: 64px; padding: 14px 12px 14px 16px; border-radius: 50%; background: rgba(0, 0, 0, .6); fill: #fff; transition: background .15s ease; }
.video-poster:hover svg { background: var(--accent); fill: var(--accent-ink); }
.video figcaption { color: var(--muted); font-size: .9rem; font-weight: 600; }

/* Ticket prices: a row per sale period, a column per ticket size; the one on sale now stands out */
.prices { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin: 4px 0 0; }
.prices thead th { padding: 0 10px 2px; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: right; white-space: nowrap; }
.prices tbody th, .prices tbody td { padding: 10px; background: var(--surface-2); vertical-align: middle; }
.prices tbody th { text-align: left; font-weight: 400; border-radius: 10px 0 0 10px; }
.prices tbody td:last-child { border-radius: 0 10px 10px 0; }
.prices td.price { text-align: right; font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.prices-name { display: block; font-weight: 700; }
.prices-when { display: block; color: var(--muted); font-size: .82rem; }
.prices-when:empty { display: none; }
.prices-now {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  background: var(--accent); color: var(--accent-ink); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.prices tr.is-current th, .prices tr.is-current td { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.prices tr.is-current th { box-shadow: inset 3px 0 0 var(--accent); }
.prices tr.is-current td.price { color: var(--accent-strong); }
.prices tr.is-ended { opacity: .5; }
.prices tr.is-ended td.price { text-decoration: line-through; font-weight: 600; }
.prices-info { margin: 12px 0 0; padding: 0 0 0 18px; color: var(--muted); font-size: .9rem; }
.prices-info li + li { margin-top: 4px; }

/* Where else to buy: partners that sell tickets without the online fees; the Tickets panel links down to them */
.in-person { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.in-person span { color: var(--muted); font-size: .9rem; font-weight: 600; }
.in-person:hover { border-color: var(--accent); }
#buy-in-person { scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 16px); }
.sellers { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(240px, 40%), 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.seller { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 12px; background: var(--surface-2); }
.seller-address { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-size: .92rem; font-weight: 600; text-decoration: none; }
.seller-address span { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); text-underline-offset: 3px; }
.seller-address:hover span { text-decoration-color: currentColor; }
.seller svg, .seller-address svg { flex: none; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seller-address .seller-go { display: inline-block; width: 14px; height: 14px; margin: 0 0 0 4px; vertical-align: -1px; stroke: var(--muted); }
.seller-hours { display: flex; gap: 8px; font-size: .9rem; }
.seller-hours dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; }
.seller-hours dt { font-weight: 700; color: var(--text); }
.seller-hours dd { margin: 0; color: var(--muted); }
.seller-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.seller-price { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.seller-price svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--accent-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.seller-price > span { display: flex; flex-direction: column; line-height: 1.15; }
.seller-price b { font-size: 1.15rem; font-weight: 900; color: var(--text); }
.seller-price small { font-size: .78rem; font-weight: 700; color: var(--muted); }

/* Venue: its photo beside the name, the address (a link to the map), Directions and a Free parking tag */
.venue.has-photo { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); padding: 0; overflow: hidden; }
.venue-photo { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.venue.has-photo .venue-body { padding: 24px 26px; }
.venue-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.venue-label { color: var(--accent-strong); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.venue-name { margin: 0; font-size: 1.45rem; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; }
.venue-address {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px;
  border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; transition: box-shadow .15s ease;
}
.venue-address:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
.venue-address svg { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--accent-strong); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.venue-address span { display: flex; flex-direction: column; gap: 2px; font-weight: 700; line-height: 1.35; }
.venue-address small { color: var(--muted); font-size: .95rem; font-weight: 600; }
.venue-capacity { color: var(--muted); font-size: .9rem; font-weight: 600; }
.venue-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.venue-directions, .venue-parking, .venue-more { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; font-weight: 800; text-decoration: none; }
.venue-directions { background: var(--accent); color: var(--accent-ink); }
.venue-directions:hover { background: var(--accent-strong); color: var(--accent-ink); }
.venue-directions svg { width: 17px; height: 17px; fill: currentColor; }
.venue-parking { background: color-mix(in srgb, #2f5fb3 16%, transparent); color: var(--blue); cursor: default; }
.venue-parking span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #2f5fb3; color: #fff; font-size: .8rem; font-weight: 900; }
.venue-more { border: 1px solid var(--border); color: var(--text); }
@media (max-width: 620px) {
  .venue.has-photo { grid-template-columns: 1fr; }
  .venue-photo { min-height: 0; aspect-ratio: 3 / 2; }
  .venue-actions { gap: 8px; }
  .venue-directions, .venue-parking, .venue-more { padding: 10px 13px; font-size: .92rem; }
}

/* Event team: photo (or initial), name, what they did and social links */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(220px, 40%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.team-member { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.team-avatar {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 30%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--blue)));
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent-ink); font-weight: 800; font-size: 1.3rem;
}
.team-text { display: flex; flex-direction: column; min-width: 0; }
.team-name { font-weight: 700; color: var(--text); }
.team-socials { display: flex; gap: 2px; margin: 4px 0 0 -6px; }
.team-socials a { display: inline-flex; padding: 5px; border-radius: 999px; color: var(--muted); transition: color .15s ease, background .15s ease; }
.team-socials a:hover { color: var(--text); background: var(--bg); }
.team-socials svg { width: 17px; height: 17px; display: block; }
.team-did { font-size: .86rem; font-weight: 600; color: var(--muted); }

/* Event artists: a big square photo each, three across (two on a phone) */
.artists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.artist { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.artist-photo {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 14px; object-fit: cover; object-position: center 30%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--blue)));
  color: var(--accent-ink); font-weight: 900; font-size: 3rem;
}
.artist-name { font-weight: 800; font-size: 1.05rem; color: var(--text); }
@media (max-width: 620px) { .artists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Event sponsors and partners: logo (on white, as logos are drawn), or initials, and name */
.org-logo {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 6px; box-sizing: border-box; border-radius: 12px;
  background: #fff; color: #6b6258; font-weight: 900; font-size: .9rem; letter-spacing: .02em; overflow: hidden;
}
.org-logo img { width: 100%; height: 100%; object-fit: contain; }
a.org-logo { text-decoration: none; }
.org-logo--wide { width: 100%; height: auto; aspect-ratio: 16 / 9; padding: 12px; font-size: 1.1rem; }
.sponsors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sponsor { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; box-sizing: border-box; padding: 14px 10px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; }
.sponsor-name { font-size: .9rem; font-weight: 800; text-align: center; }
@media (max-width: 620px) { .sponsors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.partner { height: 100%; box-sizing: border-box; }
.partner-head { display: flex; align-items: center; gap: 14px; }
.partner-head a.team-name { text-decoration: none; }
.partner-head a.team-name:hover { color: var(--accent-strong); }
a.sponsor:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--accent)); }
.partner-helps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.partner-helps:empty { display: none; }
.partner-helps span {
  padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Sections */
.section { padding: 48px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head a { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.page-head { padding: 40px 0 8px; }

/* Grid + cards */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Home page sections: one row of four cards (two by two on tablets, one column on phones) */
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-4 { grid-template-columns: 1fr; } }
.section-more { display: flex; justify-content: center; padding: 32px 0 8px; }
.btn-lg { padding: 15px 36px; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.cover-fallback {
  width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; padding: 16px; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, var(--surface-2)), color-mix(in srgb, var(--blue) 30%, var(--surface-2)));
}
/* Event cards as tickets: the poster on top, a perforated tear line with two notches, the date on the stub.
   Upcoming events are printed on the inverse paper (cream on the dark theme, ink on the light one) with their
   price; past ones on plain paper, stamped with what they raised. */
:root {
  --ticket-up: #1f1b16; --ticket-up-ink: #f3eee6; --ticket-up-muted: #c2b8aa; --ticket-up-line: #4a4238; --ticket-up-accent: #f0b429;
  --ticket-past: #f2ede3; --ticket-past-line: #d9d0c0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ticket-up: #f3eee6; --ticket-up-ink: #1a1612; --ticket-up-muted: #5c5246; --ticket-up-line: #cfc3ad; --ticket-up-accent: #8a5d00;
    --ticket-past: #2a251f; --ticket-past-line: #4a4238;
  }
}
.ticket {
  --paper: var(--ticket-up); --ink: var(--ticket-up-ink); --ink-muted: var(--ticket-up-muted); --line: var(--ticket-up-line); --mark: var(--ticket-up-accent);
  position: relative; display: flex; flex-direction: column; color: var(--ink); text-decoration: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .28)); transition: transform .25s ease, filter .25s ease;
}
.ticket.is-past { --paper: var(--ticket-past); --ink: var(--text); --ink-muted: var(--muted); --line: var(--ticket-past-line); --mark: var(--accent-strong); }
a.ticket:hover { transform: translateY(-4px) rotate(-.4deg); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .38)); }
a.ticket:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 16px; }
/* The poster fills its 2:1 frame exactly, as the posters are made: no blurred bands. */
.ticket-cover { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 16px 16px 0 0; background: var(--surface-2); }
.ticket-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ticket-cover .cover-fallback { font-size: 1.15rem; }
.ticket-stamp {
  position: absolute; right: 12px; bottom: 12px; padding: 5px 11px; border: 2.5px solid #f3eee6; border-radius: 8px;
  color: #f3eee6; background: rgba(20, 18, 15, .6); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-6deg); backdrop-filter: blur(2px);
}
.ticket-stamp.is-gold { border-color: #f0b429; color: #f0b429; background: rgba(20, 18, 15, .72); font-size: .85rem; letter-spacing: .05em; }
.ticket-body {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); flex: 1;
  background: var(--paper); border-radius: 0 0 16px 16px;
}
.ticket-body::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; border-top: 2px dashed var(--line); }
.ticket-notch { position: absolute; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.ticket-notch.is-left { left: -12px; }
.ticket-notch.is-right { right: -12px; }
.ticket-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 0;
  border-right: 2px dashed var(--line); line-height: 1; text-align: center;
}
.ticket-stub .m { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mark); }
.ticket-stub .d { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; margin: 2px 0; }
.ticket-stub .y { font-size: .7rem; font-weight: 800; color: var(--ink-muted); }
.ticket-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 16px 16px 15px; }
.ticket-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ticket-tag { padding: 2px 9px; border-radius: 999px; border: 1.5px solid var(--line); font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
.ticket-tag.is-type { border-color: transparent; background: var(--ink); color: var(--paper); text-transform: uppercase; letter-spacing: .05em; }
.ticket.is-past .ticket-tag.is-type { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-strong); }
.ticket h3 { margin: 0; font-size: 1.1rem; font-weight: 900; line-height: 1.22; letter-spacing: -.015em; }
.ticket-meta { overflow: hidden; color: var(--ink-muted); font-size: .82rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ticket-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 10px; margin-top: auto; padding-top: 8px; }
.ticket-figure { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.ticket-figure small { overflow: hidden; color: var(--ink-muted); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-overflow: ellipsis; }
.ticket-figure strong { font-size: 1.55rem; font-weight: 900; letter-spacing: -.02em; }
.ticket-figure strong.is-soft { color: var(--ink-muted); font-size: 1.2rem; }
.ticket-figure strong.is-gold { color: var(--accent-strong); font-size: 1.7rem; }
.ticket-cta { padding: 8px 13px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.ticket-cause { width: 100%; color: var(--ink-muted); font-size: .8rem; font-weight: 600; }
.ticket-recap { display: flex; align-items: center; gap: 12px; width: 100%; }
.ticket-bars {
  flex: 1; height: 22px; border-radius: 2px; opacity: .3;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px);
}
.ticket-link { color: var(--mark); font-size: .82rem; font-weight: 800; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ticket { transition: none; } a.ticket:hover { transform: none; } }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.pill-accent { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-strong); }
.pill-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 24px; }
.filters input[type=search], .filters select {
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: .95rem;
}
.filters input[type=search] { flex: 1 1 240px; min-width: 0; }
.tabs { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 4px; }
.tabs a { padding: 7px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--muted); }
.tabs a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--muted); background: var(--surface); }
.chip.active, .chip:hover { border-color: var(--accent); color: var(--text); }

/* Detail layout */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; padding: 32px 0 48px; align-items: start; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.detail-cover { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); margin-bottom: 24px; }
.detail-cover img { width: 100%; height: auto; }
.detail-cover:has(> img) { aspect-ratio: auto; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.sticky { position: sticky; top: calc(var(--header-h) + 20px); }
/* Event details as a ticket: the date on a stub, the time and the guests' age (with a "why"), and the night step
   by step. On phones the steps go below a tear line; on wider screens beside the stub, in a row. */
.tdetails {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); margin: 20px 0 16px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
}
.tdetails-stub {
  grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 18px 0; border-radius: 15px 0 0 15px; background: var(--ticket-up); color: var(--ticket-up-ink);
  border-right: 2px dashed var(--ticket-up-line); line-height: 1; text-align: center; position: relative;
}
.tdetails-stub::before, .tdetails-stub::after {
  content: ""; position: absolute; right: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg);
}
.tdetails-stub::before { top: -13px; }
.tdetails-stub::after { bottom: -13px; }
.tdetails-stub .dow { color: var(--ticket-up-accent); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tdetails-stub .d { font-size: 2.8rem; font-weight: 900; letter-spacing: -.03em; }
.tdetails-stub .my { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tdetails-stub a { margin-top: 10px; color: var(--ticket-up-accent); font-size: .78rem; font-weight: 800; text-decoration: none; }
.tdetails-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 20px 0; }
.tdetails:not(.has-steps) .tdetails-head { padding-bottom: 16px; }
.tdetails-head strong { font-size: 1.2rem; font-weight: 900; }
.tdetails-age {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 5px 7px 5px 12px; border-radius: 999px;
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: .9rem; font-weight: 800;
}
.tdetails-age:not(:has(button)) { padding-right: 12px; }
.tdetails-age button {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-size: .8rem; font-weight: 900; cursor: pointer;
}
.tdetails-note { margin: 12px 20px 0; padding: 11px 13px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: .9rem; line-height: 1.5; }
.tdetails-note strong { color: var(--text); }
.tdetails-steps { position: relative; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 18px 20px 18px; list-style: none; }
.tdetails-steps::before { content: ""; position: absolute; left: 26px; right: 26px; top: 24px; height: 2px; background: var(--border); }
.tdetails-steps li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 22px 10px 0 0; }
.tdetails-steps li::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--surface); }
.tdetails-steps li.is-last::before { background: var(--muted); }
.tdetails-steps strong { font-size: 1rem; font-weight: 900; }
.tdetails-steps span { color: var(--muted); font-size: .85rem; font-weight: 600; line-height: 1.35; }
.mobile-buy { display: none; }
@media (max-width: 620px) {
  .tdetails { grid-template-columns: 86px minmax(0, 1fr); }
  .tdetails-stub { grid-row: 1; border-radius: 15px 0 0 0; }
  .tdetails-stub::before, .tdetails-stub::after { display: none; }
  .tdetails-stub .d { font-size: 2.2rem; }
  .tdetails-head { flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px 14px; }
  .tdetails:not(.has-steps) .tdetails-head { padding-bottom: 12px; }
  .tdetails-age { margin-left: 0; }
  .tdetails-note { grid-column: 1 / -1; margin: 0 14px 12px; }
  .tdetails-steps { grid-column: 1 / -1; grid-auto-flow: row; grid-template-columns: 1fr; gap: 6px; padding: 14px 16px 16px; border-top: 2px dashed var(--border); }
  .tdetails-steps::before { display: none; }
  .tdetails-steps li { display: grid; grid-template-columns: 14px 72px minmax(0, 1fr); gap: 10px; padding: 0; }
  .tdetails-steps li::before { position: static; width: 10px; height: 10px; margin-top: 5px; box-shadow: none; }
  .tdetails-steps span { font-size: .9rem; }
}
@media (max-width: 900px) {
  .mobile-buy {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 15px 18px;
    border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 1.05rem; text-decoration: none;
  }
  .mobile-buy span { font-size: .9rem; font-weight: 800; }
}
.price { font-weight: 800; font-size: 1.15rem; }
.back { display: inline-flex; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 600; margin-top: 24px; }
.back:hover { color: var(--text); }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }

/* Forms */
.form-grid { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.field input[type=radio], .field input[type=checkbox] { width: auto; accent-color: var(--accent); }
.field label:has(> input[type=radio]), .field label:has(> input[type=checkbox]) { font-weight: 500; display: flex; gap: 8px; align-items: center; margin: 0; cursor: pointer; }
.field > div:has(input[type=checkbox]) { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.field > div:has(input[type=radio]) { display: flex; gap: 20px; }
@media (max-width: 420px) { .form-row, .field > div:has(input[type=checkbox]) { grid-template-columns: 1fr; } }
.errorlist { color: var(--danger); font-size: .85rem; margin: 4px 0 0; padding: 0; list-style: none; }
.alert { padding: 14px 18px; border-radius: 12px; margin: 16px 0; font-weight: 600; }
.alert-success { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }

/* Empty */
.empty { text-align: center; padding: 56px 16px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); }
.empty h3 { color: var(--text); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 32px 0; margin-top: 32px; color: var(--muted); font-size: .9rem; }
.site-footer .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer a { text-decoration: none; margin-left: 16px; }
.site-footer a:hover { color: var(--text); }

.cta-band { background: var(--surface-2); border-radius: 20px; padding: 36px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-band h2 { margin: 0 0 4px; }
.cta-band p { margin: 0; color: var(--muted); }

/* Top bar: socials on the left, languages on the right */
.topbar { height: var(--topbar-h); background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .85rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; }
.socials-bar { display: flex; gap: 2px; margin: 0 0 0 -8px; padding: 0; list-style: none; }
.socials-bar a { display: inline-flex; padding: 8px; border-radius: 999px; color: var(--muted); transition: color .15s ease, background .15s ease; }
.socials-bar a:hover { color: var(--text); background: var(--bg); }
.socials-bar svg { width: 18px; height: 18px; display: block; }

/* Language toggle (top bar and footer): a segmented pill of short codes (EN / FR / UA).
   A thumb slides under the chosen code; the clicked one is marked before the page loads, so it glides there. */
.lang-toggle {
  --seg: 2.75em; --pad: 3px; --i: 0;
  position: relative; display: inline-flex; align-items: center; padding: var(--pad); border-radius: 999px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); isolation: isolate;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
.lang-toggle:has(.lang-toggle__item:nth-of-type(2)[aria-current="true"]) { --i: 1; }
.lang-toggle:has(.lang-toggle__item:nth-of-type(3)[aria-current="true"]) { --i: 2; }
.lang-toggle__thumb {
  position: absolute; z-index: 0; top: var(--pad); bottom: var(--pad); left: var(--pad); width: var(--seg);
  border-radius: 999px; background: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transform: translateX(calc(var(--i) * var(--seg))); transition: transform .28s cubic-bezier(.3, .7, .2, 1);
}
.lang-toggle:not(:has([aria-current="true"])) .lang-toggle__thumb { opacity: 0; }
.lang-toggle__item {
  position: relative; z-index: 1; width: var(--seg); padding: 5px 0; padding-left: .08em; border-radius: 999px;
  text-align: center; color: var(--muted); text-decoration: none; transition: color .2s ease;
}
.lang-toggle__item:hover, .lang-toggle__item:focus-visible { color: var(--text); }
.lang-toggle__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lang-toggle__item[aria-current="true"] { color: var(--accent-ink); }
.topbar .lang-toggle { margin-right: -4px; }
.site-footer .lang-toggle { margin-left: auto; }

@media (max-width: 420px) {
  .topbar { font-size: .8rem; }
  .socials-bar a { padding: 7px; }
  .socials-bar svg { width: 16px; height: 16px; }
  .lang-toggle { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .nav-links a, .socials-bar a, .lang-toggle__item, .lang-toggle__thumb { transition: none; }
}

/* Cookie banner and cookie settings dialog */
.cookie-banner {
  position: fixed; z-index: 50; bottom: 16px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18); padding: 20px 22px;
  animation: cookie-in .25s ease-out;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner { left: 50%; transform: translateX(-50%); width: min(960px, calc(100% - 32px)); display: flex; align-items: center; gap: 24px; }
.cookie-banner h2 { font-size: 1.05rem; margin: 0 0 4px; }
.cookie-banner p { margin: 0; color: var(--muted); font-size: .92rem; }
.cookie-banner a, .cookie-dialog a { color: var(--text); }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.cookie-actions .btn { padding: 10px 18px; }
@media (max-width: 760px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 14px; bottom: 8px; width: calc(100% - 16px); }
  .cookie-actions .btn { flex: 1 1 auto; }
}
@keyframes cookie-in { from { opacity: 0; translate: 0 12px; } }

.cookie-dialog {
  width: min(520px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.cookie-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.cookie-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-dialog h2 { font-size: 1.25rem; margin: 0; }
.cookie-dialog > form > p { margin: 8px 0 16px; }
.cookie-close { background: none; border: 0; color: var(--muted); font-size: 1.6rem; line-height: 1; padding: 4px 8px; border-radius: 8px; cursor: pointer; }
.cookie-close:hover { color: var(--text); background: var(--surface-2); }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.cookie-option label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.cookie-option label span { color: var(--muted); font-size: .9rem; }
.cookie-dialog .cookie-actions { justify-content: flex-end; margin-top: 8px; }

.switch {
  appearance: none; flex-shrink: 0; width: 44px; height: 26px; margin: 0; border-radius: 999px; cursor: pointer;
  background: var(--border); position: relative; transition: background .15s ease;
}
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: translate .15s ease; }
.switch:checked { background: var(--success); }
.switch:checked::after { translate: 18px 0; }
.switch:disabled { opacity: .6; cursor: not-allowed; }
.switch:focus-visible, .cookie-close:focus-visible, .link-button:focus-visible, .cookie-banner .btn:focus-visible, .cookie-dialog .btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.site-footer .link-button { margin-left: 16px; }
.site-footer .link-button:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { animation: none; }
  .switch, .switch::after { transition: none; }
}

/* Text pages (cookie policy) */
.prose { max-width: 760px; padding-bottom: 32px; }
.prose h2 { font-size: 1.3rem; margin-top: 1.8em; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.cookie-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cookie-table th, .cookie-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cookie-table tr:last-child td { border-bottom: 0; }
.cookie-table th { background: var(--surface-2); font-weight: 600; }
.cookie-table code { font-size: .85rem; word-break: break-word; }

/* Proso FM radio page. The card is always dark so CHIN's white logo reads in both themes. */
.radio-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center;
  padding: 40px; border-radius: 24px; color: #f3eee6;
  background: radial-gradient(120% 140% at 0% 0%, #2c2620 0%, #14120f 60%), #14120f;
  box-shadow: var(--shadow);
}
.radio-station { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.radio-station-logo { width: min(100%, 360px); height: auto; }
.radio-frequency { display: flex; align-items: baseline; gap: 10px; }
.radio-frequency strong { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.radio-frequency span { font-size: 1.1rem; color: #a89f92; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.radio-show h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 6px 0 4px; }
.radio-schedule { font-size: 1.1rem; font-weight: 600; margin: 0 0 4px; }
.radio-card .muted { color: #a89f92; }
.radio-status { margin: 0; }
.pill-on-air, .pill-off-air {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.pill-on-air { background: #b3261e; color: #fff; }
.pill-on-air::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: on-air-pulse 1.6s ease-in-out infinite; }
.pill-off-air { background: rgba(255, 255, 255, .1); color: #d6cfc4; }
.pill-on-air[hidden], .pill-off-air[hidden] { display: none; }
@keyframes on-air-pulse { 50% { opacity: .3; } }

.radio-player { margin-top: 22px; }
.play-button {
  display: inline-flex; align-items: center; gap: 14px; padding: 12px 28px 12px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: #f0b429; color: #1a1400; font: inherit; font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  transition: transform .08s ease, background .15s ease;
}
.play-button:hover { background: #ffc94d; }
.play-button:active { transform: scale(.98); }
.play-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.play-button svg { width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: #1a1400; fill: #f0b429; }
.play-button .icon-stop { display: none; }
.play-button[data-state="playing"] .icon-play, .play-button[data-state="connecting"] .icon-play { display: none; }
.play-button[data-state="playing"] .icon-stop, .play-button[data-state="connecting"] .icon-stop { display: block; }
.play-button[data-state="connecting"] svg { animation: on-air-pulse 1.2s ease-in-out infinite; }
.radio-player-status { min-height: 1.5em; margin: 10px 0 0; color: #ffb4ab; }
.radio-next { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
.radio-next p { margin: 0 0 4px; }
.radio-info { margin: 24px 0 48px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.radio-info .panel + .panel { margin-top: 0; }
.radio-info h2 { font-size: 1.15rem; }
.radio-info p { margin: 0; color: var(--muted); }

@media (max-width: 760px) {
  .radio-card { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; border-radius: 20px; }
  .play-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pill-on-air::before, .play-button[data-state="connecting"] svg { animation: none; }
}

/* Live countdown to the next Proso FM show */
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 420px; margin: 16px 0 14px; }
.countdown div { display: flex; flex-direction: column; align-items: center; padding: 12px 6px 10px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.countdown span { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #f0b429; }
.countdown small { margin-top: 6px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a89f92; }
@media (max-width: 420px) {
  .countdown { gap: 6px; }
  .countdown small { font-size: .62rem; letter-spacing: .03em; }
}

/* Previous Proso FM shows (Mixcloud) */
.episodes { margin: 8px 0 56px; }
.episode-list { display: grid; gap: 16px; margin-bottom: 14px; }
.episode {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.episode-cover { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; font-size: 2.4rem; }
.episode-cover img { width: 100%; height: 100%; object-fit: cover; }
.episode-meta { margin: 0 0 4px; color: var(--muted); font-size: .88rem; font-weight: 600; }
.episode h3 { font-size: 1.15rem; margin: 0 0 6px; }
.episode-description { margin: 0 0 12px; color: var(--muted); font-size: .95rem; }
.episode-player { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.episode-player.is-loaded { display: block; }
.episode-player iframe { display: block; width: 100%; height: 120px; border: 0; border-radius: 10px; }
.episode-external { color: var(--muted); font-size: .9rem; font-weight: 600; }
.episode-external:hover { color: var(--text); }
@media (max-width: 620px) {
  .episode { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .episode-player { gap: 12px; }
}
@media (max-width: 360px) {
  .lang-toggle { --seg: 2.5em; }
  .socials-bar a { padding: 6px; }
}

/* Photo album: a big photo up top with the photographer's credit, chapter tabs that stay under the header,
   then each chapter's photos in rows at their own shapes, and a full-screen viewer. */
.album-hero { position: relative; display: flex; align-items: flex-end; min-height: min(62vh, 560px); overflow: hidden; background: #0a0908; color: #f3eee6; }
.album-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.album-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 8, .1) 0%, rgba(10, 9, 8, .35) 45%, var(--bg) 100%); }
.album-hero-body { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; padding-top: 120px; padding-bottom: 36px; }
.album-hero-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.album-hero h1 { margin: 0; color: #fff; font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.album-back { color: #f3eee6; font-weight: 700; text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.album-back:hover { color: var(--accent); }
.album-meta { margin: 0; color: #f3eee6; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.album-credits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.album-credit {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px;
  border-radius: 999px; background: rgba(10, 9, 8, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px);
}
.album-credit img, .album-credit-initial { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.album-credit-initial { display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 900; }
.album-credit-text { display: flex; flex-direction: column; line-height: 1.15; padding-right: 4px; }
.album-credit-text small { color: #cfc6b8; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.album-credit-text strong { color: #fff; font-size: 1rem; }
.album-credit a { display: inline-flex; padding: 8px; border-radius: 50%; color: #e8dfd2; }
.album-credit a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.album-credit svg { width: 18px; height: 18px; display: block; }
.album-actions { display: flex; gap: 10px; }
.album-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
}
.album-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.album-btn.is-round { width: 50px; padding: 0; color: #f3eee6; background: rgba(10, 9, 8, .45); border: 1px solid rgba(255, 255, 255, .25); }
.album-btn.is-done, .viewer2-btn.is-done { background: var(--success); color: #10210f; }
.album-tabs { position: sticky; top: var(--header-h); z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }
.album-tabs-row { display: flex; gap: 8px; padding-top: 12px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.album-tabs-row::-webkit-scrollbar { display: none; }
.album-tabs a {
  flex: none; padding: 8px 15px; border-radius: 999px; background: var(--surface-2); color: var(--text);
  font-size: .9rem; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.album-tabs a span { opacity: .6; font-weight: 700; }
.album-tabs a.is-active { background: var(--accent); color: var(--accent-ink); }
.album-body { scroll-margin-top: calc(var(--header-h) + 70px); padding-top: 28px; padding-bottom: 48px; }
.album-chapter { scroll-margin-top: calc(var(--header-h) + 70px); margin-bottom: 40px; }
.album-chapter-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.album-chapter-head h2 { margin: 0; font-size: 1.7rem; font-weight: 900; letter-spacing: -.02em; }
.album-chapter-head h2 span { color: var(--muted); font-size: 1.05rem; font-weight: 700; }
/* Rows at the photos' own shapes: each grows in step with its width/height, so a row's photos share one height. */
.album-rows { --row: 230px; display: flex; flex-wrap: wrap; gap: 6px; }
.album-rows::after { content: ""; flex-grow: 999999; }
.album-item { position: relative; flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row)); aspect-ratio: var(--ar); margin: 0; overflow: hidden; border-radius: 6px; background: var(--surface-2); }
.album-item > a:first-child { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.album-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.album-item:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .album-rows { --row: 120px; gap: 3px; } .album-item { border-radius: 3px; } }

.viewer2 { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0a0908; color: #f3eee6; }
.viewer2[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.viewer2::backdrop { background: #0a0908; }
.viewer2-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.viewer2-info { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: .95rem; }
.viewer2-group { padding: 3px 11px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: .8rem; font-weight: 800; }
.viewer2-time { color: #8a8178; font-size: .85rem; font-weight: 600; }
.viewer2-tools { display: flex; align-items: center; gap: 8px; }
.viewer2-btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.viewer2-btn:hover { background: rgba(255, 255, 255, .2); }
.viewer2-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.viewer2-btn[data-play] svg { fill: currentColor; stroke: none; }
.viewer2-btn .i-pause, .viewer2-btn[aria-pressed="true"] .i-play { display: none; }
.viewer2-btn[aria-pressed="true"] .i-pause { display: block; }
.viewer2-stage { position: relative; min-height: 0; }
/* The photo fills the space between the bar and the filmstrip, whole, whatever its shape. */
.viewer2-img { position: absolute; inset: 0 84px; width: calc(100% - 168px); height: 100%; object-fit: contain; user-select: none; touch-action: pan-y; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
.viewer2-nav { position: absolute; top: 50%; translate: 0 -50%; width: 54px; height: 54px; }
.viewer2-nav.is-prev { left: 18px; }
.viewer2-nav.is-next { right: 18px; }
.viewer2-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 12px 16px; }
.viewer2-strip { display: flex; gap: 6px; max-width: 100%; overflow: hidden; }
.viewer2-strip button { flex: none; width: 74px; height: 50px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #26221c; opacity: .45; cursor: pointer; transition: opacity .2s ease; }
.viewer2-strip button:hover { opacity: .8; }
.viewer2-strip button.is-current { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.viewer2-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer2-hint { color: #6f675e; font-size: .78rem; font-weight: 600; text-align: center; }
@media (max-width: 760px) {
  .viewer2-img { inset: 0; width: 100%; }
  .viewer2-nav, .viewer2-time, .viewer2-group, .viewer2-btn[data-play] { display: none; }
  .viewer2-bar { padding: 10px 12px; }
  .viewer2-tools { gap: 6px; }
  .viewer2-btn { width: 44px; height: 44px; }
  .viewer2-hint { display: none; }
  .viewer2-strip button { width: 52px; height: 38px; }
}