/* Palais Mascotte — website styles
   One system: yellow ground (--pm-ink), ink writing (--club-yellow),
   red hover tint (--pm-paper). */

*, *::before, *::after { box-sizing: border-box; }

/* ── Site palette ──────────────────────────────────────────────────
   One ground (--pm-ink), one writing color (--club-yellow), one hover
   tint (--pm-paper) — the redesign's yellow ground / ink writing / red
   hover, sitewide. */
:root {
  --pm-ink:#ffff00;
  --club-yellow:#000000;
  --pm-paper:#cc1216;
}

/* The Eventlocation world runs its own pair: dark plum ground,
   rosé writing. */
:root[data-world="location"] {
  --pm-ink:#372528;
  --club-yellow:#E0D1D4;
  --pm-paper:#ffffff;
}

/* The Bar world runs the Aperitivo poster pair: peach ground,
   vivid red writing (brand guideline, 01 Aperitivo). */
:root[data-world="bar"] {
  --pm-ink:#f9d3c4;
  --club-yellow:#ed1b12;
  --pm-paper:#aa342d;
}

html { scroll-behavior: auto; }

/* ── World slide (View Transitions) ─────────────────────────────────
   Club · Bar · Eventlocation sit left · center · right in the
   masthead; moving between worlds pans the CONTENT toward the target,
   while the header and masthead stay put and only their colors wipe
   across in the same direction. Mechanical, no bounce. */
.site-header { view-transition-name: site-header; }
.masthead-nav { view-transition-name: masthead-nav; }
.sub-band { view-transition-name: sub-band; }

::view-transition-old(root),
::view-transition-new(root),
::view-transition-new(site-header),
::view-transition-new(masthead-nav),
::view-transition-new(sub-band) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
}

/* Content pans */
html[data-slide="left"]::view-transition-old(root) { animation-name: world-out-left; }
html[data-slide="left"]::view-transition-new(root) { animation-name: world-in-right; }
html[data-slide="right"]::view-transition-old(root) { animation-name: world-out-right; }
html[data-slide="right"]::view-transition-new(root) { animation-name: world-in-left; }

/* Chrome holds still; the incoming palette wipes over the outgoing one.
   sub-band is excluded here: when the target route has no band (e.g.
   Eventlocation), its old snapshot has no new counterpart to wipe
   against, so it gets the UA default fade-out instead of freezing. */
::view-transition-old(site-header),
::view-transition-old(masthead-nav) { animation: none; }

html[data-slide="left"]::view-transition-new(site-header),
html[data-slide="left"]::view-transition-new(masthead-nav),
html[data-slide="left"]::view-transition-new(sub-band) { animation-name: wipe-from-right; }
html[data-slide="right"]::view-transition-new(site-header),
html[data-slide="right"]::view-transition-new(masthead-nav),
html[data-slide="right"]::view-transition-new(sub-band) { animation-name: wipe-from-left; }

@keyframes world-out-left  { to   { transform: translateX(-100%); } }
@keyframes world-in-right  { from { transform: translateX(100%); } }
@keyframes world-out-right { to   { transform: translateX(100%); } }
@keyframes world-in-left   { from { transform: translateX(-100%); } }

@keyframes wipe-from-right { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes wipe-from-left  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

body {
  margin: 0;
  background: var(--pm-ink);
  color: var(--club-yellow);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* Yellow-on-black is high contrast; a 2px yellow outline works as focus ring. */
:focus-visible {
  outline: 2px solid var(--club-yellow);
  outline-offset: 2px;
}

a { color: var(--club-yellow); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ── Recurring devices ─────────────────────────────────────────────── */

/* Wide-tracked microline — address, times, captions */
.microline {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

/* Stacked date/time numerals in the poster face */
.date-stamp {
  font-family: var(--font-poster);
  line-height: 0.86;
  letter-spacing: 0.02em;
  display: inline-flex;
  flex-direction: column;
  text-transform: uppercase;
}

/* ── Header ────────────────────────────────────────────────────────
   Centered wordmark over the ground; the umbrella mark sits absolute
   at the left edge and scrolls with the header (not sticky). */

.site-header {
  position: relative;
  background: var(--pm-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 48px 22px;
}

.header-mark {
  position: absolute;
  left: 48px;
  top: 10px; /* (108px header − 88px mark) / 2 — equal air above and below */
  display: block;
  width: 66px;  /* matches the SVG's 490:656 aspect, so the ink fills the
                   box edge-to-edge and the 10px air measures from the
                   visible black, not the file's letterboxed bounds */
  height: 88px;
}

.header-mark .mark {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--club-yellow);
  -webkit-mask: url('assets/pm-mark-rose.svg') center / contain no-repeat;
  mask: url('assets/pm-mark-rose.svg') center / contain no-repeat;
}

.social-icons {
  display: flex;
  gap: 18px;
}

.social-icons a {
  display: block;
  width: 20px;
  height: 20px;
}

.social-icons .icon {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--club-yellow);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background 160ms cubic-bezier(.2,0,0,1);
}

.social-icons a:hover .icon,
.social-icons a:focus-visible .icon {
  background: var(--pm-paper);
}

.footer-icons { display: flex; align-items: center; justify-content: center; }

.icon-whatsapp  { -webkit-mask-image: url('assets/icons/whatsapp.svg');  mask-image: url('assets/icons/whatsapp.svg'); }
.icon-instagram { -webkit-mask-image: url('assets/icons/instagram.svg'); mask-image: url('assets/icons/instagram.svg'); }
.icon-mail      { -webkit-mask-image: url('assets/icons/mail.svg');      mask-image: url('assets/icons/mail.svg'); }

/* Logo — typographic wordmark only; the brand has no raster logo. */
.logo {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1;
  text-decoration: none;
  color: var(--club-yellow);
}

.logo .wordmark {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.logo .year {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-align: center;
  text-indent: 0.34em; /* optically re-center: compensate trailing tracking */
}

/* ── Masthead nav — three equal cells between 3px rules ───────────── */

.masthead-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--club-yellow);
  border-bottom: 2px solid var(--club-yellow);
  background: var(--pm-ink);
}

.masthead-nav a {
  text-align: center;
  padding: 16px 0;
  font: 700 13px/16px var(--font-body); /* 16+16+16 = 48px cell — 4 modules */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--club-yellow);
  transition: background 160ms var(--ease-std), color 160ms var(--ease-std);
}

.masthead-nav a + a { border-left: 2px solid var(--club-yellow); }

.masthead-nav a:hover,
.masthead-nav a.active {
  background: var(--club-yellow);
  color: var(--pm-ink);
}

/* Header socials — the rail icon set relocated; the footer set stays
   as the every-width anchor. Hidden on small screens with the rest of
   the desktop chrome. */
.header-icons {
  position: absolute;
  right: 48px;
  top: 11.5px; /* optically level with the mark — tuned by eye */
  flex-direction: column;
  align-items: center;
  width: 66px; /* the umbrella mark's box, so the column mirrors its axis */
  gap: 11px;   /* 3 × 22px + 2 × 11px = the mark's 88px, same air above and below */
}

/* Optical spacing: the envelope (Lucide) draws inside ~3px of internal
   padding while Instagram/WhatsApp (Simple Icons) bleed to their box
   edges. Dropping mail 2px levels the column's ink bottom with the
   umbrella's tip; dropping WhatsApp 2px makes its visible gap to the
   neighbors equal above and below. */
.header-icons a:nth-child(2) { transform: translateY(2.5px); }
.header-icons a:last-child { transform: translateY(2px); }

/* ── Sub-band — subsite nav as a second masthead band ──────────────
   Same construction as .masthead-nav one step smaller. Rendered only
   when a world subsite is active (updateSubnav in app.js); the
   masthead's bottom rule doubles as this band's top rule. */
.sub-band {
  display: grid;
  grid-template-columns: repeat(var(--sub-cells, 4), 1fr);
  border-bottom: 2px solid var(--club-yellow);
  background: var(--pm-ink);
}

.sub-band[hidden] { display: none; }

.sub-band a {
  text-align: center;
  padding: 12px 4px;
  font: 700 12px/12px var(--font-body); /* 12+12+12 = 36px cell — 3 modules, 4:3 to the masthead */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--club-yellow);
  transition: background 160ms var(--ease-std), color 160ms var(--ease-std);
}

.sub-band > * + * { border-left: 2px solid var(--club-yellow); }

.sub-toggle { display: none; }

.sub-band a:hover,
.sub-band a.active {
  background: var(--club-yellow);
  color: var(--pm-ink);
}

/* ── Programm listing ──────────────────────────────────────────────── */

.listing {
  padding: 8px 32px 60px;
}

.listing-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 26px 0 6px;
}

.listing-head h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}

/* Shared page hero — every subsite opens with the same poster headline
   in the identical spot, so the title holds still when switching worlds */
.page-hero {
  text-align: center;
  padding: 40px 0 6px;
}

.page-hero h1 {
  font-family: var(--font-poster);
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.84;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 400;
}

.page-hero .claim {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
}

/* ── Programm (Club) — content column ──────────────────────────────
   Centered column with fixed side margins that now just breathe. */

#main { position: relative; }

.club-main {
  width: clamp(560px, calc(100% - 176px), 1464px);
  margin: 0 auto;
}

/* Spine text — the claim, rotated into the left margin's axis; era and
   address mirrored on the right. Desktop-grid only. */
.spine { display: none; }

/* Sheets calibrated to the masthead thirds (event detail, Bar) keep
   the original rail-width margins: their poster dividers assume a
   170px column inset, and the event page's prev/next blocks live in
   that margin. Single-class modifier so the 860px fluid override
   still wins by source order. */
.club-main--tight { width: clamp(560px, calc(100% - 340px), 1464px); }

/* ── Claim — the event-title voice above the slider ────────────────
   Same face and scale as the event titles; the three dots roll in a
   staggered wave. */
/* One claim size on every page: the Bar claim (the longest) fills the
   content column exactly at 6.18% of the column width — every other
   claim renders at the same size, and rolling notes fill what's left. */
.claim-row {
  display: flex;
  align-items: flex-end;
  margin: 36px 0 0; /* same 36px module below the chrome as the Programm slider */
  font-size: clamp(30px, calc(5.27vw - 18px), 88px);
}

@media (min-width: 1805px) {
  .claim-row { font-size: 77px; } /* column caps at 1464px */
}

.claim-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: inherit;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap; /* never breaks — JS shrinks it to fit instead */
  flex: 0 1 auto;
  min-width: 0;
}

@keyframes claim-roll {
  0%, 50%, 100% { transform: translateY(0); }
  25% { transform: translateY(-0.18em); }
}

/* Three hearts closing the Bar claim — small, middle, full size,
   rolling with the same wave as the club claim's dots. */
.claim-hearts {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.12em;
  margin-left: 0.22em;
}

.claim-hearts .heart {
  display: inline-block;
  animation: claim-roll 1.5s var(--ease-std) infinite;
}

.claim-hearts .heart:nth-child(2) { animation-delay: 0.15s; }
.claim-hearts .heart:nth-child(3) { animation-delay: 0.3s; }

.claim-hearts svg {
  display: block;
  width: 0.78em; /* height ≈ cap height at the 100:88 ratio */
  height: auto;
}

.claim-hearts .heart--s svg { width: 0.44em; }
.claim-hearts .heart--m svg { width: 0.6em; }

@media (prefers-reduced-motion: reduce) {
  .claim-hearts .heart { animation: none; }
}

/* ── Flyer slider — one outer 3px frame: arrow / Swiper / arrow ───── */

.flyer-slider {
  display: flex;
  align-items: stretch;
  margin-top: 36px; /* the air repeats the sub-band's 36px cell */
  border: 3px solid var(--club-yellow);
}

.slider-arrow {
  flex: none;
  width: 52px;
  background: none;
  border: none;
  color: var(--club-yellow);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: background 160ms var(--ease-std), color 160ms var(--ease-std), opacity 160ms var(--ease-std);
}

.slider-arrow--prev { border-right: 3px solid var(--club-yellow); }

.slider-arrow:hover {
  background: var(--club-yellow);
  color: var(--pm-ink);
}

.slider-arrow:focus-visible {
  outline: 2px solid var(--club-yellow);
  outline-offset: -6px;
}

.swiper-button-disabled { opacity: 0.3; pointer-events: none; }

/* Slider arrows drawn in CSS — shaft plus chevron in currentColor,
   identical on every platform (same family as .ext-arrow). */
.slider-arrow { position: relative; }

.slider-arrow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 2px;
  margin: -1px 0 0 -14px;
  background: currentColor;
}

.slider-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.slider-arrow--next::after {
  right: calc(50% - 14px);
  transform: translateY(-50%) rotate(45deg);
}

.slider-arrow--prev::after {
  left: calc(50% - 14px);
  transform: translateY(-50%) rotate(-135deg);
}

.flyer-slider .swiper {
  flex: 1;
  min-width: 0;
}

.flyer-slider .swiper-slide {
  box-sizing: border-box;
  aspect-ratio: 3 / 4;
  border-right: 3px solid var(--club-yellow);
  height: auto;
}

/* Coming-soon tile fills empty slots so the strip is never blank:
   the flyer-tile inversion, type only. */
.soon-tile {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 24px;
  background: var(--club-yellow);
  color: var(--pm-ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(16px, calc(100vw / 55), 30px);
}

/* Without Swiper (CDN down) the frame still shows the first row of tiles */
.flyer-slider .swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; }
.flyer-slider .swiper:not(.swiper-initialized) .swiper-slide { width: 33.3333%; flex: none; }


/* ── Proportional chrome (desktop) ─────────────────────────────────
   One drawing, one unit: --pxu is "a 1440-design pixel" (100vw/1440,
   capped where the claim scale caps). The header keeps its 108-unit
   height; both nav cells are 10:1 boxes (masthead 480×48, sub-band
   360×36 — heights three times their own padding), and the air below
   the chrome repeats the sub-band — all true at every desktop width,
   not only at 1440. Horizontal
   insets (48/88) stay fixed; the rule governs heights and glyphs. */
@media (min-width: 1101px) {
  :root { --pxu: calc(min(100vw, 1805px) / 1440); }

  .site-header {
    box-sizing: border-box;
    height: calc(var(--pxu) * 108); /* 9 modules; pads resolve to 24 */
    padding: 0 48px;
    justify-content: center;
  }
  .logo { gap: calc(var(--pxu) * 12); }
  .logo .wordmark { font-size: calc(var(--pxu) * 36); }
  .logo .year { font-size: calc(var(--pxu) * 12); }

  /* Mark and socials sit on the margin axes (the halves of the first
     and last sixth, 100vw/12), one module of air above and below:
     mark 84 tall, icon column 20+12+20+12+20 = 84. */
  .header-mark {
    left: calc(100vw / 12 - var(--pxu) * 31.5);
    top: calc(var(--pxu) * 12);
    width: calc(var(--pxu) * 63);
    height: calc(var(--pxu) * 84);
  }
  .header-icons {
    right: calc(100vw / 12 - var(--pxu) * 31.5);
    top: calc(var(--pxu) * 12);
    width: calc(var(--pxu) * 63);
    gap: calc(var(--pxu) * 12);
  }
  .header-icons a {
    width: calc(var(--pxu) * 20);
    height: calc(var(--pxu) * 20);
  }
  .header-icons a:nth-child(2) { transform: translateY(calc(var(--pxu) * 2.5)); }
  .header-icons a:last-child { transform: translateY(calc(var(--pxu) * 2)); }

  .masthead-nav a {
    padding: calc(var(--pxu) * 16) 0; /* 10:1 cell: 16+16+16 = 48 on a 480 cell */
    font-size: calc(var(--pxu) * 13);
    line-height: calc(var(--pxu) * 16);
  }
  .sub-band a {
    padding: calc(var(--pxu) * 12) 4px; /* 10:1 cell: 12+12+12 = 36 on a 360 cell */
    font-size: calc(var(--pxu) * 12);
    line-height: calc(var(--pxu) * 12);
  }

  .flyer-slider { margin-top: calc(var(--pxu) * 36); } /* header/3 of air */
  .claim-row { margin-top: calc(var(--pxu) * 36); }
  .slider-progress { margin-top: calc(var(--pxu) * 12); }
}

/* ── Sixths grid (desktop) ─────────────────────────────────────────
   The strip spans viewport sixths 1–5 as a framed box: arrow cells of
   half a sixth flank three flyers of 100vw/6 each. The arrow dividers
   land on the sub-band's outer rules (360/1080); the flyer dividers on
   the half-sixths between them. Every slide carries its own left rule,
   so a scrolled-in slide's divider always sits on the 360 line. */
@media (min-width: 1101px) {
  .flyer-slider {
    display: flex;
    align-items: stretch;
    width: calc(200vw / 3);
    margin-left: auto;
    margin-right: auto;
    border: 3px solid var(--club-yellow);
  }
  .flyer-slider .swiper-slide { border-right: none; border-left: 3px solid var(--club-yellow); }
  .flyer-slider .swiper:not(.swiper-initialized) .swiper-slide { width: 33.333%; }
  .slider-arrow {
    position: relative;
    flex: none;
    width: calc(100vw / 12);
    min-width: 0;
    background: none;
  }
  .slider-arrow--prev { border-right: none; }
  .slider-arrow--next { border-left: 3px solid var(--club-yellow); }
  .slider-progress {
    width: calc(200vw / 3);
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px; /* one module below the strip */
  }
}

.flyer-tile {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

.flyer-tile .flyer-img,
.archive-cell .flyer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder color block when no flyer exists: stacked date numerals
   top-left, event name bottom-left, sized to the tile via cqw. */
.ft-date {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  flex-direction: column;
  font: 700 clamp(14px, 8cqw, 26px)/0.95 var(--font-body);
}

.ft-name {
  position: absolute;
  bottom: 18px;
  left: 18px;
  font-family: var(--font-display);
  font-size: clamp(14px, 9cqw, 30px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
}

/* Hover overlay: date + time top, acts + Tickets bottom. Literal
   yellow-on-scrim regardless of world tokens. */
.tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.78);
  color: #ffff00;
  opacity: 0;
  transition: opacity 200ms var(--ease-std);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

.flyer-tile:hover .tile-overlay,
.flyer-tile:focus-visible .tile-overlay { opacity: 1; }

.ov-date {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.ov-time {
  font: 600 12px var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 8px;
}

.ov-foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ov-acts {
  font: 600 13px/1.6 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ov-tickets {
  font: 700 13px var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Slide progress — 2px frame, ink fill, 50 → 100% ──────────────── */

.slider-progress {
  display: flex;
  height: 10px;
  margin-top: 16px;
  border: 2px solid var(--club-yellow);
}

.slider-progress .fill {
  width: 50%;
  background: var(--club-yellow);
  transition: width 240ms var(--ease-std);
}

/* ── Event list — grouped by month, 3px rules ─────────────────────── */

.month-group { padding-top: 24px; }
.month-group:first-of-type { padding-top: 48px; }

.month-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 36px 0 12px;
}

.month-name {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.month-count {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.event-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  border-top: 3px solid var(--club-yellow);
  padding: 36px 0 48px;
  text-decoration: none;
  color: var(--club-yellow);
  transition: background 160ms var(--ease-std), color 160ms var(--ease-std);
}

.event-row:hover,
.event-row:focus-visible {
  background: var(--club-yellow);
  color: var(--pm-ink);
}

.month-group .event-row:last-child { border-bottom: 3px solid var(--club-yellow); }

.row-date {
  display: inline-flex;
  flex-direction: column;
  font: 700 44px/0.95 var(--font-body);
  letter-spacing: 0.02em;
}

.row-time { display: none; }

.row-body {
  padding-left: 64px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.row-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 6.5vw, 118px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.row-music {
  font: 700 20px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

/* ── Archiv — gapless 4-col poster grid in one 3px frame ──────────── */

/* Closes the page below the event list */
.archive { padding: 48px 0 72px; }

.archive-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 3px solid var(--club-yellow);
}

.archive-cell {
  min-width: 0;
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

.archive-toggle-wrap {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.btn--frame {
  font: 600 14px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 36px;
  background: transparent;
  color: var(--club-yellow);
  border: 3px solid var(--club-yellow);
  cursor: pointer;
  transition: background 160ms var(--ease-std), color 160ms var(--ease-std);
}

.btn--frame:hover {
  background: var(--club-yellow);
  color: var(--pm-ink);
}

/* ── Event detail ──────────────────────────────────────────────────── */

/* Click-to-enlarge poster — the tile-overlay idiom as a lightbox */
.poster-zoom {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.poster-zoom img {
  max-width: calc(200vw / 3);
  max-height: 84vh;
  border: 3px solid var(--club-yellow);
}

/* One viewport, no scrolling: back line, title, then a flex row that
   takes exactly what remains below the sticky header. The poster's
   width follows from the row height via aspect-ratio (flex gives it a
   definite height, so 3:4 resolves natively — no track circularity),
   and the info column sits exactly one gap away. */
.event-detail {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* the sheet spans the shared column */
  padding: 14px 0 56px;
}

/* One reference rectangle: back link, title, and both columns share
   the same left and right edges. The frame's width comes from the
   columns; the nowrap title is kept out of the equation (width: 0,
   min-width: 100%) and the fit routine shrinks it to exactly the
   frame width — type as the rectangle's top edge. */
.event-frame {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  max-width: 100%;
}

/* One continuous framed sheet — the slider's vocabulary: a 3px outer
   frame whose cells are separated by 3px rules. Poster fills the left
   cell edge-to-edge; info and the fact/CTA band share the right cell.

   The sheet's inner geometry follows the masthead's thirds: the
   poster's right divider sits on the CLUB|BAR line (100vw/3), so the
   poster cell is 33.333vw minus the column's 170px left margin, and
   the sheet's height follows from the poster's 3:4 format. */
.event-columns {
  display: flex;
  gap: 0;
  flex: none;
  height: calc((33.3333vw - 170px) * 4 / 3);
  min-height: 0;
  border: 3px solid var(--club-yellow);
}

.event-poster {
  position: relative;
  width: calc(33.3333vw - 170px);
  border-right: 3px solid var(--club-yellow);
  height: 100%;
  flex: none;
}

.event-right {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

/* The info cell can get wide in the full column — keep text measures readable */
.event-info > * { max-width: 620px; }

/* Placeholder until photography is supplied — see handoff README.
   Crossed hairlines mark it as an intentional empty image frame. */
.poster-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  opacity: 0.5;
  background:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px), var(--club-yellow) calc(50% - 0.5px),
      var(--club-yellow) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top left,
      transparent calc(50% - 0.5px), var(--club-yellow) calc(50% - 0.5px),
      var(--club-yellow) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.poster-slot .microline {
  background: var(--pm-ink);
  padding: 6px 10px;
}

/* Flyer from Nunight fills the poster frame; placeholder shows otherwise */
.poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 0;
  min-height: 0;
  padding: 28px 28px 24px;
  overflow-y: auto; /* only scrolls if "Mehr lesen" outgrows the cell */
}

/* Auto-margins center the content when it is short, but unlike
   justify-content:center they never clip the top once "Mehr lesen"
   makes the content taller than the cell — it just scrolls. */
.event-info > :first-child { margin-top: auto; }
.event-info > :last-child { margin-bottom: auto; }

.tag-row { display: flex; flex-wrap: wrap; gap: 12px; }

.tag {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 2px solid var(--club-yellow);
  color: var(--club-yellow);
  display: inline-block;
  white-space: nowrap;
}

.tag--fill {
  background: var(--club-yellow);
  color: var(--pm-ink);
}

/* Poster headline spanning the full detail width above flyer + info,
   same scale as the Programm page hero. */
.title-seg { white-space: nowrap; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.event-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 7.5vw, 104px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: uppercase;
  min-width: 100%; /* match the frame without inflating it */
}

.event-info .blurb {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
}

/* Billing line: muted label, artists on one line, headliner bold */
.event-info .lineup {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lineup-names {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lineup-artist--head { font-weight: 700; }

/* Marker highlight that sweeps from the left through one name at a
   time; the swept name inverts to ground-on-writing. */
.lineup-artist {
  padding: 1px 4px;
  margin: -1px -4px;
  background-image: linear-gradient(var(--club-yellow), var(--club-yellow));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 480ms var(--ease-std), color 480ms var(--ease-std);
}

.lineup-artist.lit {
  background-size: 100% 100%;
  color: var(--pm-ink);
}

/* Long descriptions must not push the facts and CTAs off-screen */
.event-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.event-desc .blurb + .blurb { margin-top: 12px; }

.event-desc--open { -webkit-line-clamp: unset; }

.desc-toggle {
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--club-yellow);
  font: 600 11px var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── Event band — the sheet's bottom strip: fact cells + CTA caps ────
   A 3px-ruled row closing the right cell: labeled facts as cells with
   3px dividers, Lounge as an outline cap, Tickets as the solid black
   end-cap — the masthead/arrow-cap vocabulary. */
.event-band {
  display: flex;
  align-items: stretch;
  height: 72px;
  margin-top: auto; /* pins to the sheet's bottom edge */
  border-top: 3px solid var(--club-yellow);
}

/* The fact box spans exactly the masthead's BAR cell: from the poster
   divider (CLUB|BAR line) to the BAR|EVENTLOCATION line — one third of
   the viewport minus the 3px divider. */
.band-facts {
  display: flex;
  align-items: stretch;
  flex: none;
  width: calc(33.3333vw - 3px);
  min-width: 0;
}

/* Facts share the width equally so the strip has no dead middle */
.band-fact {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 16px;
  min-width: 0;
}

.band-fact + .band-fact { border-left: 3px solid var(--club-yellow); }

/* Left column of the sheet: poster with the Datum box docked below */
.event-left {
  display: flex;
  flex-direction: column;
  flex: none;
  min-width: 0;
}

.event-left > .band-fact {
  flex: 1 1 0;
  border-top: 3px solid var(--club-yellow);
}

.band-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}

.band-value {
  font: 600 15px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* CTA caps: Lounge outline, Tickets solid — both invert on hover.
   Together they fill the last third, splitting it evenly. */
.band-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  min-width: 0;
  border: none;
  border-left: 3px solid var(--club-yellow);
  background: transparent;
  color: var(--club-yellow);
  font: 600 12px/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--ease-std), color 160ms var(--ease-std);
}

.band-btn:hover,
.band-btn:focus-visible {
  background: var(--club-yellow);
  color: var(--pm-ink);
}

.band-btn--fill {
  background: var(--club-yellow);
  color: var(--pm-ink);
}

.band-btn--fill:hover,
.band-btn--fill:focus-visible {
  background: transparent;
  color: var(--club-yellow);
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
  text-decoration: none;
  font: 600 14px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 160ms cubic-bezier(.2,0,0,1), color 160ms cubic-bezier(.2,0,0,1);
}

.btn--accent {
  background: var(--club-yellow);
  color: var(--pm-ink);
  border: 1px solid var(--club-yellow);
}

.btn--accent:hover {
  background: transparent;
  color: var(--club-yellow);
}

.btn--outline {
  background: transparent;
  color: var(--club-yellow);
  border: 1px solid var(--club-yellow);
}

.btn--outline:hover {
  background: var(--club-yellow);
  color: var(--pm-ink);
}

/* ── Footer ────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--pm-ink);
  padding: 0 48px 36px;
}

.site-footer .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* Equal tracks keep the one-row footer balanced: address left,
   Impressum/Datenschutz centered, socials right. */
.site-footer .inner > * { flex: 1 1 0; white-space: nowrap; }
.site-footer .inner > .footer-legal { text-align: center; }
.site-footer .footer-icons { justify-content: flex-end; }

.footer-maps {
  color: inherit;
  margin-left: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Outward arrow drawn in CSS — identical on every platform, no
   emoji-presentation surprises. */
.ext-arrow {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  margin-left: 6px;
}

.ext-arrow::before {
  content: '';
  position: absolute;
  left: 1px;
  bottom: 1px;
  width: 11px;
  height: 2px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: 1px 1px;
}

.ext-arrow::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.site-footer .microline { font-weight: 600; }

.footer-legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease-std);
}

.footer-legal a:hover,
.footer-legal a:focus-visible { border-bottom-color: currentColor; }

/* ── Legal pages (Impressum / Datenschutz) ─────────────────────────── */

.legal {
  max-width: 720px;
  margin: 0 auto; /* centered in the column — no lopsided right margin */
  padding: 32px 0 96px;
}

.legal h1 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 8px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--club-yellow);
}

.legal h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 36px 0 10px;
}

.legal p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 14px;
}

.legal a { color: inherit; }

.legal h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 40px 0 4px;
}

.legal h4 {
  font: 700 11px var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 20px 0 6px;
}

.xmas .xmas-lead {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 24px 0 4px;
}

.xmas .xmas-kicker { margin-bottom: 20px; }

.xmas .xmas-sub {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
}

.xmas .xmas-cta { margin: 20px 0 12px; display: flex; flex-wrap: wrap; gap: 12px; }

/* .legal's inherit-colored links must not swallow the button */
.legal .btn--accent { color: var(--pm-ink); }

/* ── Location und Anfahrt — the map window on the grid ─────────────
   Framed like the picture strip, grayscaled into the world palette. */
.anfahrt-map {
  border: 3px solid var(--club-yellow);
  margin: 24px 0;
}

.anfahrt-map iframe {
  display: block;
  width: 100%;
  height: 60vw;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

/* ── Event Anfrage — page-level form on the ladder ─────────────────
   Reuses the underline-only .field vocabulary; the world palette does
   the theming (location: cream on ink). */
.anfrage-form {
  margin-top: 36px;
}

/* Button leads on the 360 line; the note sits beside it, quiet. */
.anfrage-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
}

.anfrage-actions .btn { flex-shrink: 0; }

.anfrage-note {
  opacity: 0.7;
}

.anfrage-done-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 36px 0 12px;
}

.legal .legal-date {
  margin-top: 40px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ── Bar — one framed sheet, the event detail's geometry ───────────
   Poster cell left (its divider on the CLUB|BAR line), Konzept in the
   right cell, hours + CTAs as the bottom band with the fact box
   spanning the BAR cell. The poster is CSS-cropped from the bottom so
   its own masthead and hours (duplicated by the chrome and the band)
   stay out of frame. */

/* ── Bar page — a printed announcement ─────────────────────────────
   Title over a full rule, copy and flyer split on the page centerline,
   the opening times as a typographic marquee between two rules (the
   flyer's own left/right time corners, restated page-wide). */
.bar-page { padding: 32px 0 64px; }

.bar-page h1 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 8px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--club-yellow);
}

.bar-kicker { opacity: 0.75; }

.bar-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  margin: 36px 0;
}

.bar-copy .bar-lead {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}

.bar-copy p {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  margin: 0 0 10px;
  text-wrap: pretty;
}

.bar-copy p:last-child { margin-bottom: 0; }

.bar-flyer { border: 3px solid var(--club-yellow); min-width: 0; }

.bar-copy { min-width: 0; }

.bar-flyer img { display: block; width: 100%; height: auto; }

.bar-times {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 3px solid var(--club-yellow);
  border-bottom: 3px solid var(--club-yellow);
  padding: 18px 0;
  margin: 36px 0;
}

.bar-times span {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
}

@media (min-width: 1101px) {
  .bar-page {
    width: calc(200vw / 3);
    margin: 0 auto;
    padding: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 72);
  }
  .bar-page h1 { font-size: calc(var(--pxu) * 44); }
  .bar-split {
    grid-template-columns: 1fr 1fr; /* split on the 720 centerline */
    gap: 0;
    margin: calc(var(--pxu) * 48) 0;
  }
  .bar-split .bar-copy { padding-right: calc(var(--pxu) * 48); }
  .bar-split--mirror .bar-copy { padding-right: 0; padding-left: calc(var(--pxu) * 48); }
  .bar-times { padding: calc(var(--pxu) * 18) 0; margin: calc(var(--pxu) * 48) 0; }
}

@media (max-width: 1080px) {
  /* Stacked: the voucher's terms read after its flyer, like a caption */
  .bar-split--mirror .bar-flyer { order: 0; }
  .bar-times { flex-direction: column; align-items: center; gap: 8px; }
}

/* ── Bar Menu — a printed card ─────────────────────────────────────── */

.bar-menu {
  display: flex;
  justify-content: center;
  padding: 40px 0 96px;
}

.menu-card {
  width: min(980px, 100%);
  border: 3px solid var(--club-yellow);
  outline: 1px solid var(--club-yellow);
  outline-offset: 5px;
  padding: 48px 40px 36px;
  margin: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mc-mark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mc-wordmark { font-size: 18px; }

.mc-year {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

.mc-title {
  font-family: var(--font-poster);
  font-size: clamp(64px, 8vw, 110px);
  font-weight: 400;
  line-height: 0.84;
  text-transform: uppercase;
  margin: 26px 0 10px;
}

/* Two explicit columns so both start on the same line */
.mc-sections {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  align-items: start;
  margin-top: 8px;
}

.mc-col { min-width: 0; }

.mc-section {
  width: 100%;
  padding: 22px 0 18px;
  border-top: 1px solid var(--club-yellow);
  margin-top: 18px;
  break-inside: avoid;
}

@media (max-width: 720px) {
  .mc-sections { grid-template-columns: 1fr; }
}

.mc-section h3 {
  font: 700 13px var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.mc-section p {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
}

.mc-currency {
  margin-top: 14px;
  opacity: 0.7;
  font-weight: 600;
}

.mc-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 5px 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  text-align: left;
}

.mc-price {
  flex: none;
  font: 700 15px var(--font-body);
  letter-spacing: 0.06em;
}

.mc-note {
  margin-top: 30px;
  font-weight: 600;
  opacity: 0.7;
}

/* Desktop: the card spans the strip (240–1200) and its column rule
   sits on the page centerline, like the event sheet's divider. */
@media (min-width: 1101px) {
  .bar-menu { padding: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 72); }
  .menu-card {
    width: calc(200vw / 3);
    box-sizing: border-box;
    margin: 0;
    padding: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 24);
  }
  .mc-sections { gap: 0; margin-top: calc(var(--pxu) * 12); }
  .mc-col { padding: 0 calc(var(--pxu) * 24); }
  .mc-col + .mc-col { border-left: 3px solid var(--club-yellow); }
  .mc-section { padding: calc(var(--pxu) * 24) 0 calc(var(--pxu) * 12); margin-top: calc(var(--pxu) * 12); }
  .mc-section h3 { font-size: calc(var(--pxu) * 13); margin-bottom: calc(var(--pxu) * 12); }
  .mc-item { font-size: calc(var(--pxu) * 19); padding: calc(var(--pxu) * 5) 0; }
  .mc-price { font-size: calc(var(--pxu) * 15); }
  .mc-section p { font-size: calc(var(--pxu) * 20); }
}

/* ── Vision — manifesto page ───────────────────────────────────────── */

.vision p {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}

.vision .vision-lead {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 28px 0 22px;
}

.vision .vision-claim {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  margin: 30px 0 18px;
}

/* Short lines as stacked poster type */
.vision-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 44px 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.vision-stack--close {
  margin-top: 56px;
  font-size: clamp(32px, 3.8vw, 54px);
}

/* ── Awareness contact form ────────────────────────────────────────── */

.awareness-form { margin-top: 24px; }

.awareness-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.awareness-mail a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.awareness-done {
  margin-top: 24px !important;
  font-weight: 600;
}

/* ── Jobs — accordion of postings in the stamp vocabulary ─────────── */

.jobs-claim {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  margin: 0 0 6px;
}

.jobs-intro {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 24px 0 10px;
}

.jobs-lang {
  margin-top: 56px !important;
  padding-top: 24px;
  border-top: 3px solid var(--club-yellow);
}

.job { border-top: 3px solid var(--club-yellow); }
.job:last-of-type { border-bottom: 3px solid var(--club-yellow); }

.job summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 160ms var(--ease-std);
}

.job summary::-webkit-details-marker { display: none; }

/* Plus flips to minus when open — square, mechanical */
.job summary::after {
  content: '+';
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  flex: none;
}

.job[open] summary::after { content: '–'; }

.job summary:hover { color: var(--pm-paper); }

.job-body { padding: 4px 0 26px; }

.job-body h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 22px 0 8px;
}

.job-body ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.job-body li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 2px;
}

.job-apply {
  margin-top: 22px !important;
  font-weight: 600;
}

/* The footer icon set anchors socials at every width, alongside the
   header row. */

/* ── Lounge-Laufband (Variante 1d) ─────────────────────────────────── */

.lounge-ticker {
  display: block;
  width: 100%;
  height: 62px;
  padding: 0;
  border: 3px solid var(--club-yellow);
  background: transparent;
  color: var(--club-yellow);
  overflow: hidden;
  cursor: pointer;
  transition: background 160ms var(--ease-std), color 160ms var(--ease-std);
}

.lounge-ticker:hover,
.lounge-ticker:focus-visible {
  background: var(--club-yellow);
  color: var(--pm-ink);
}

.lounge-ticker .lounge-ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  white-space: nowrap;
  font: 600 14px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: lounge-ticker-run 18s linear infinite;
}

/* Laufband stoppt beim Hover */
.lounge-ticker:hover .lounge-ticker-track,
.lounge-ticker:focus-visible .lounge-ticker-track { animation-play-state: paused; }

.lounge-ticker .lounge-ticker-item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
}

/* Quadratischer Trenner — keine Rundungen im System */
.lounge-ticker .lounge-ticker-dot {
  width: 7px;
  height: 7px;
  background: currentColor;
}

@keyframes lounge-ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lounge-ticker .lounge-ticker-track { animation: none; }
}

/* ── Lounge reservation modal ──────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal {
  background: var(--pm-ink);
  color: var(--club-yellow);
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 2px solid var(--club-yellow);
  box-shadow: 8px 8px 0 var(--club-yellow);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 2px solid var(--club-yellow);
}

.modal-head .title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Kontakt modal: linked phone number above the form */
.modal-phone {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--club-yellow);
  margin-bottom: 22px;
}

.modal-phone .phone-label {
  font: 600 10px var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.modal-phone a {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  text-decoration: none;
  color: var(--club-yellow);
  transition: color 160ms var(--ease-std);
}

.modal-phone a:hover { color: var(--pm-paper); }

.modal-close {
  font-size: 20px;
  line-height: 1;
  color: var(--club-yellow);
}

.modal-body { padding: 22px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Underline-only inputs — no box, 2px baseline rule in the writing color */
.field input,
.field select,
.field textarea {
  font: 400 16px var(--font-body);
  color: var(--club-yellow);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--club-yellow);
  border-radius: 0;
  padding: 8px 0;
  outline: none;
  transition: border-color 160ms var(--ease-std);
}

.field textarea { resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-bottom-color: var(--pm-paper);
}

.field select option {
  background: var(--pm-ink);
  color: var(--club-yellow);
}

.modal-footer {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-done {
  padding: 40px 22px;
  text-align: center;
}

.modal-done .headline {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
}

.modal-done p {
  font-family: var(--font-body);
  font-size: 16px;
  max-width: 360px;
  margin: 16px auto 0;
  line-height: 1.5;
}

.modal-done .btn { margin-top: 26px; }

/* ── Bar subsite ───────────────────────────────────────────────────── */

/* ── Location subsite ──────────────────────────────────────────────── */

.loc-section {
  padding: 96px 32px 0;
  max-width: 1240px;
  margin: 0 auto;
}

.loc-hero { padding: 8px 32px 0; }

.loc-intro {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  max-width: 940px;
  margin: 64px auto 0;
  text-align: center;
  text-wrap: pretty;
}

.loc-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
  border-top: 1px solid var(--club-yellow);
  padding-top: 40px;
}

.loc-split-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loc-split h2 {
  font-family: var(--font-poster);
  font-size: clamp(38px, 4.6vw, 72px);
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  font-weight: 400;
}

.loc-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.6;
  text-wrap: pretty;
}

.loc-copy p { margin: 0; }

.loc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--club-yellow);
}

.loc-card {
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.loc-card:not(:last-child) { border-right: 1px solid var(--club-yellow); }

.loc-card h3 {
  font-family: var(--font-poster);
  font-size: clamp(30px, 3vw, 48px);
  line-height: 0.94;
  text-transform: uppercase;
  margin: 0;
  font-weight: 400;
}

.loc-card p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.6;
  text-wrap: pretty;
}

.loc-closing {
  border-top: 1px solid var(--club-yellow);
  padding-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
}

.loc-closing .loc-copy { gap: 14px; }

.loc-statement {
  font-family: var(--font-poster);
  font-size: clamp(40px, 5vw, 84px);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
}

.loc-echo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  padding-top: 56px;
  max-width: 760px;
}

.loc-echo p { margin: 0; }

.loc-contact { padding-bottom: 96px; padding-top: 80px; }

.loc-rooms {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-bottom: 36px;
  flex-wrap: wrap;
}

.loc-rooms .tag { font-weight: 400; letter-spacing: 0.22em; padding: 6px 12px; }

.loc-cta { display: flex; justify-content: center; }

.loc-mail {
  text-align: center;
  opacity: 0.65;
  margin-top: 14px;
}

/* ── Responsive ────────────────────────────────────────────────────── */

/* The sheet stacks before the rails go — in the full column the info
   cell gets too narrow next to the height-driven poster. */
@media (max-width: 1080px) {
  /* One-screen card: poster thumbnail with the Datum docked below in
     the left cell; title, tags, line-up, and a two-line micro blurb
     beside it (Mehr lesen grows it); the band stacks below as two
     half-cell rows. */
  .event-detail { height: auto; padding: 12px 0 48px; }
  .event-frame { flex: none; gap: 0; }
  .event-frame { border: 3px solid var(--club-yellow); }
  .event-columns { flex: none; gap: 0; height: auto; border: none; }
  .band-facts { width: auto; flex: 1 1 100%; }
  .event-left { width: 40%; flex: none; }
  .event-poster {
    height: auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    flex: none;
    border-right: none;
  }
  .event-left .band-fact { padding: 8px 12px; }
  /* Datum and Start share the cell as two stacked pairs */
  .event-left .band-fact + .band-fact { border-top: none; border-left: none; padding-top: 0; flex: none; }
  .event-right { flex: 1 1 0; min-width: 0; border-left: 3px solid var(--club-yellow); }
  .event-title { font-size: clamp(18px, 5.6vw, 30px); padding: 10px 12px 0; }
  .title-seg { white-space: normal; } /* the narrow cell wraps freely */
  .event-info { flex: 1 1 auto; overflow: visible; gap: 8px; padding: 6px 12px 10px; }
  .poster-slot .microline { display: none; }
  .event-info .tag { white-space: nowrap; }
  .event-desc,
  .event-desc .blurb { font-size: 11px; line-height: 1.45; }
  .event-desc { -webkit-line-clamp: 2; }
  .event-desc--open { -webkit-line-clamp: unset; flex-shrink: 0; }
  /* Blurb strip: full card width between the columns and the band */
  .event-frame > .event-desc { border-top: 3px solid var(--club-yellow); padding: 8px 12px 0; }
  .desc-toggle { margin: 6px 12px 10px; align-self: flex-start; flex: none; }
  .event-band {
    height: auto;
    flex-wrap: wrap;
    margin-top: 0;
    border: none;
    border-top: 3px solid var(--club-yellow);
  }
  .event-band > * { flex: 1 1 50%; box-sizing: border-box; }
  .event-band .band-fact { flex: 1 1 100%; padding: 8px 12px; }
  /* The two CTAs share one row at identical size */
  .event-band .band-btn {
    flex: 1 1 50%;
    justify-content: center;
    padding: 12px;
    min-height: 44px;
    border-left: none;
    border-top: 3px solid var(--club-yellow);
  }
  .event-band .band-btn--fill { border-left: 3px solid var(--club-yellow); }
  .event-band .band-fact + .band-fact { border-left: 3px solid var(--club-yellow); }
}

@media (max-width: 860px) {

  .loc-section { padding-left: 20px; padding-right: 20px; }
  .loc-hero { padding-left: 20px; padding-right: 20px; }
  .loc-split, .loc-closing { grid-template-columns: 1fr; gap: 28px; }
  .loc-cards { grid-template-columns: 1fr; }
  .loc-card:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--club-yellow);
  }
  /* Compact chrome — the footer icon set is the only social surface;
     the content column goes fluid. */
  .header-icons { display: none; }
  /* The band becomes the burger: collapsed it shows only the active
     subsite as a full-width "you are here" cell with a toggle glyph;
     tapping accordions the other subsites open as stacked cells —
     the masthead's cell vocabulary turned vertical. */
  .sub-band { position: relative; display: block; }
  .sub-band .sub-empty { display: none; }
  .sub-band a {
    display: none;
    text-align: left;
    padding: 14px 20px;
    font-size: 11px;
    letter-spacing: 0.22em;
  }
  .sub-band a.active,
  .sub-band--open a { display: block; }
  .sub-band > * + * { border-left: none; border-top: 2px solid var(--club-yellow); }
  /* Burger drawn in CSS (no font dependency): three bars that fold
     into an X when the band is open. currentColor follows the active
     cell's text color. */
  .sub-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 45px;
    background: none;
    border: none;
    color: var(--pm-ink);
    cursor: pointer;
  }
  .sub-toggle::before,
  .sub-toggle::after {
    content: '';
    position: absolute;
    left: 19px;
    right: 19px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: currentColor;
    transition: transform 160ms var(--ease-std), box-shadow 160ms var(--ease-std);
  }
  .sub-toggle::before { transform: translateY(-6px); box-shadow: 0 6px 0 currentColor; }
  .sub-toggle::after { transform: translateY(6px); }
  .sub-band--open .sub-toggle::before { transform: rotate(45deg); box-shadow: none; }
  .sub-band--open .sub-toggle::after { transform: rotate(-45deg); }
  .club-main { width: auto; padding: 0 20px; }

  .month-name { font-size: 32px; }
  .event-row { padding: 26px 0 32px; }
  .row-date { font-size: 28px; }
  .row-body { padding-left: 28px; }
  .row-title { font-size: clamp(34px, 9.5vw, 72px); }
  .row-music { font-size: 15px; gap: 24px; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Event detail as a flyer page: tags, title, line-up, the box with
     facts / Tickets / Laufband, and the full-width poster at the end. */
}

@media (max-width: 720px) {
  .site-header { padding: 22px 20px 16px; }
  .header-mark {
    left: 16px;
    top: 14px;
    width: 34px;
    height: 52px;
  }
  .logo .wordmark { font-size: clamp(20px, 6.4vw, 30px); }
  .logo .year { font-size: clamp(8px, 2.5vw, 11px); }

  .masthead-nav a {
    padding: 13px 0;
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .listing { padding: 8px 20px 48px; }
  .listing-head { flex-direction: column; gap: 10px; align-items: flex-start; }
  .site-footer { padding: 0 20px 28px; }
  /* Stacked footer, left-aligned like the rest of the mobile page.
     white-space must relax here — the nowrap three-track desktop row
     is wider than any phone and overflowed the viewport. */
  .site-footer .inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer .inner > * { flex: none; white-space: normal; text-align: left; max-width: 100%; }
  .site-footer a[href^="tel"] { white-space: nowrap; }
  .site-footer .footer-icons { justify-content: flex-start; }

  .page-hero { padding-top: 28px; }
  .page-hero h1 { font-size: clamp(56px, 16vw, 140px); }
}

/* ── Proportional content (desktop) ────────────────────────────────
   The content below the chrome runs on the same 12px module and the
   same --pxu unit: every vertical space is a rung of the ladder
   (12 within, 24 between, 36 into a block, 48 out of one, 72 to
   close the page), and the fixed content type scales with it. The
   sixths govern the horizontals: the archive grid spans the flyer
   strip (four cells of one flyer each), and the list's title column
   starts on the strip's left line, so one left edge runs from the
   flyers through the titles to the archive. */
@media (min-width: 1101px) {
  .month-group { padding-top: calc(var(--pxu) * 24); }
  .month-group:first-of-type { padding-top: calc(var(--pxu) * 48); }
  .month-head { padding: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 12); }
  .month-name { font-size: calc(var(--pxu) * 44); }
  .month-count { font-size: calc(var(--pxu) * 12); }
  /* The list adopts the strip's span: rules, titles, and counts live
     between the same two lines as the flyers and the archive. Dates
     are marginalia — right-aligned against a 12px gutter before the
     left line, keeping the page-text color even while the row
     inverts. Each row beats at least one sixth. */
  .month-group {
    width: calc(200vw / 3);
    margin-left: auto;
    margin-right: auto;
  }
  /* Date and time live inside the row, on the sub-band's own lines:
     each takes half a sixth (100vw/12), so titles start on the 360
     line and times end on the 1200 edge with their column starting on
     the 1080 line. The hover inverts the row box itself. */
  .event-row {
    padding: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 48);
    grid-template-columns: calc(100vw / 12) 1fr calc(100vw / 12);
    box-sizing: border-box;
    min-height: calc(var(--pxu) * 240);
    align-content: center;
  }
  .row-date { font-size: calc(var(--pxu) * 44); }
  .row-time {
    display: inline-flex;
    flex-direction: column;
    font: 700 calc(var(--pxu) * 44)/0.95 var(--font-body);
    letter-spacing: 0.02em;
    justify-self: end;
    text-align: right;
  }
  /* The hover band bleeds edge to edge across the viewport while the
     content keeps to the row box. */
  .event-row { position: relative; }
  .event-row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(0px - 100vw / 6);
    right: calc(0px - 100vw / 6);
    background: transparent;
    transition: background 160ms var(--ease-std);
    z-index: -1;
  }
  .event-row:hover,
  .event-row:focus-visible { background: transparent; }
  .event-row:hover::before,
  .event-row:focus-visible::before { background: var(--club-yellow); }
  /* Rules touching the band dissolve with it, so the bar reads as one
     clean uninterrupted stripe. */
  .event-row { transition: background 160ms var(--ease-std), color 160ms var(--ease-std), border-color 160ms var(--ease-std); }
  .event-row:hover,
  .event-row:focus-visible,
  .event-row:hover + .event-row,
  .event-row:focus-visible + .event-row { border-top-color: transparent; }
  .month-group .event-row:last-child:hover,
  .month-group .event-row:last-child:focus-visible { border-bottom-color: transparent; }
  .row-title { font-size: clamp(56px, calc(100vw / 16), 118px); /* the grid names the size: half a masthead cell's third */ }
  .row-body { padding-left: 0; gap: calc(var(--pxu) * 12); }
  .row-music { font-size: calc(var(--pxu) * 20); gap: calc(var(--pxu) * 48); }
  .archive {
    padding: calc(var(--pxu) * 48) 0 calc(var(--pxu) * 72);
    width: calc(200vw / 3); /* the whole section sits on the strip's span */
    margin-left: auto;
    margin-right: auto;
  }
  .archive-head { padding-bottom: calc(var(--pxu) * 12); }
  .archive-toggle-wrap { padding-top: calc(var(--pxu) * 24); }
  /* Text subsites (Awareness, Vision, Jobs, legal) speak the Programm
     page's language: the section spans the strip (240–1200), the h1
     sits on the 240 line like a month head with a full-width rule,
     and the body starts on the 360 line — where the list's titles
     begin — with its 720px measure closing on the 1080 line. */
  .legal {
    max-width: none;
    width: calc(200vw / 3);
    margin: 0 auto;
    padding: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 72);
  }
  .legal h1 {
    font-size: calc(var(--pxu) * 44);
    margin: 0 0 calc(var(--pxu) * 12);
    padding-bottom: calc(var(--pxu) * 12);
  }
  .club-main .legal > :not(h1) { margin-left: calc(100vw / 12); }
  .legal h2 {
    font-size: calc(var(--pxu) * 20);
    margin: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 12);
    margin-left: calc(100vw / 12);
  }
  .legal p {
    font-size: calc(var(--pxu) * 15);
    margin: 0 0 calc(var(--pxu) * 12);
    margin-left: calc(100vw / 12);
    max-width: 720px;
  }
  .legal .legal-date { margin-top: calc(var(--pxu) * 48); font-size: calc(var(--pxu) * 12); }
  .legal h3 {
    font-size: calc(var(--pxu) * 17);
    margin: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 6);
    margin-left: calc(100vw / 12);
  }
  .legal h4 {
    font-size: calc(var(--pxu) * 11);
    margin: calc(var(--pxu) * 24) 0 calc(var(--pxu) * 6);
    margin-left: calc(100vw / 12);
  }
  .xmas .xmas-lead { margin: calc(var(--pxu) * 24) 0 calc(var(--pxu) * 6); }
  .xmas .xmas-cta { margin: calc(var(--pxu) * 24) 0 calc(var(--pxu) * 12); }
  /* Map spans the full strip (240–1200), two sixths tall */
  .club-main .legal > .anfahrt-map { margin: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 12); margin-left: 0; }
  .anfahrt-map iframe { height: calc(100vw / 3 - 6px); }
  .anfrage-form { margin-top: calc(var(--pxu) * 36); gap: calc(var(--pxu) * 24); }
  .anfrage-actions { margin-top: calc(var(--pxu) * 12); gap: calc(var(--pxu) * 24); }
  .anfrage-done-title { font-size: calc(var(--pxu) * 28); margin: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 12); }
  /* Event sheet: the flyer you clicked at double scale. The frame
     spans the strip (240–1200); the poster fills the left half as a
     2×2 block of flyer cells whose divider sits on the page
     centerline; the right half carries title, info, and the facts
     band, composed like the flyer hover overlay. */
  .event-detail {
    width: calc(200vw / 3);
    margin: 0 auto;
    padding: calc(var(--pxu) * 36) 0 calc(var(--pxu) * 72);
  }
  .event-frame { gap: calc(var(--pxu) * 12); }
  /* The sheet is a strip row: the flyer docks into the left cell at
     its own size (divider on the CLUB|BAR line), the info unfolds
     across the remaining three cells, and the whole sheet fits the
     viewport by construction. Click the poster to enlarge. */
  /* The sheet is exactly two sixths tall (300vw/9 outer): the flyer
     keeps its full strip height (200vw/9 — nothing cropped), and the
     remaining sixth splits equally into the Datum and band rows.
     In ninths: columns 250vw/9 + band 50vw/9 = 100vw/3. */
  .event-columns { height: calc(250vw / 9); }
  /* The divider ink lives on the right cell (480–483, the chrome
     convention), so the line runs straight into the band row's. The
     left column is a full sixth and the frame's ink overlays its
     edges, so the poster sits in exactly the strip's slide box —
     clicking the first flyer hands off without a pixel of movement. */
  .event-left { width: calc(100vw / 6); }
  .event-right { border-left: 3px solid var(--club-yellow); }
  .event-frame { position: relative; }
  .event-frame::before,
  .event-frame::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--club-yellow);
    z-index: 5;
    pointer-events: none;
  }
  .event-frame::before { left: 0; }
  .event-frame::after { right: 0; }
  /* Top rule stays a real border (content starts below it, like the
     strip); only the side ink overlays. */
  .event-columns { border: none; border-top: 3px solid var(--club-yellow); }
  .event-poster {
    width: 100%;
    height: calc(200vw / 9); /* the strip's slide height — full flyer */
    flex: none;
    border-right: none;
  }
  .poster-zoomable { cursor: zoom-in; }
  .event-title {
    font-size: calc(var(--pxu) * 48); /* 4 modules — two lines fit the flyer-height cell */
    padding: calc(var(--pxu) * 12) calc(var(--pxu) * 24) 0;
  }
  .event-info { padding: calc(var(--pxu) * 12) calc(var(--pxu) * 24) calc(var(--pxu) * 24); gap: calc(var(--pxu) * 12); }
  .event-info > :first-child { margin-top: 0; }
  /* The band is its own full-width bar below the sheet — the strip +
     progress construction — with every divider on a grid line:
     Datum 240–480, Start 480–600, Entry 600–720 (the centerline),
     Lounge 720–960, Tickets 960–1200. */
  /* The band is the sheet's bottom row: same frame, full width, its
     top edge the internal rule between the rows. */
  .event-frame { gap: 0; }
  .event-columns { border-bottom: none; }
  .event-band {
    margin-top: 0;
    border: 3px solid var(--club-yellow);
    box-sizing: border-box;
    height: calc(50vw / 9); /* half the remaining sixth, rules included */
  }
  .event-band .band-fact,
  .event-band .band-btn { box-sizing: border-box; }
  /* Band: four cells of one flyer each — its dividers are the
     strip's own: 480, 720, 960. */
  .event-band > .band-fact:first-child { flex: 0 0 calc(100vw / 6 - 3px); }
  .event-band > .band-fact + .band-fact { flex: 0 0 calc(100vw / 6); }
  .event-band > .band-btn:not(.band-btn--fill) { flex: 0 0 calc(100vw / 6); }
  .event-band > .band-btn--fill { flex: 1 1 0; }
  .event-desc { -webkit-line-clamp: 4; /* the taller cell holds four lines at rest */ }
  .event-desc--open { -webkit-line-clamp: unset; flex-shrink: 0; /* full height — the cell scrolls */ }
  /* The toggle pins below the scrolling cell, always visible. */
  .desc-toggle { flex: none; align-self: flex-start; margin: 0 calc(var(--pxu) * 24) calc(var(--pxu) * 12); }

  /* The claim rides every Club-world page — centered when the
     viewport allows, but never above the strip's top line (36 below
     the chrome). */
  html[data-world='club'] .spine,
  html[data-world='bar'] .spine,
  html[data-world='location'] .spine {
    display: block;
    position: fixed;
    top: max(calc(50vh - 100vw / 9 - 10px - var(--pxu) * 6), calc(var(--pxu) * 234)); /* chrome is 4px shorter on 2px rules */
    height: calc(200vw / 9 + 20px + var(--pxu) * 12); /* the strip's height incl. progress bar */
    writing-mode: vertical-rl;
    text-align: justify;
    text-align-last: justify;
    text-justify: distribute; /* surplus melts into tracking, not word holes */
    font: 600 calc(var(--pxu) * 12) var(--font-body);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* literal yellow + difference blend: black over the yellow page,
       yellow over the black hover band — the spine inverts live with
       whatever passes beneath it */
    color: #ffff00;
    mix-blend-mode: difference;
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
  }
  /* The difference blend is yellow/black math — in the Bar's blush
     palette the spine takes the world's ink color directly. */
  html[data-world='bar'] .spine,
  html[data-world='location'] .spine { color: var(--club-yellow); mix-blend-mode: normal; }
  .spine--left { left: calc(100vw / 12); transform: translateX(-50%); }
  /* the right spine is the left one reflected: reads downward too,
     glyphs flipped — a true mirror across the page's center axis */
  .spine--right { right: calc(100vw / 12); transform: translateX(50%) scaleX(-1); }

  .btn--frame { font-size: calc(var(--pxu) * 14); padding: calc(var(--pxu) * 12) calc(var(--pxu) * 36); }
  .site-footer { padding-bottom: calc(var(--pxu) * 36); }
}

/* ── Eventlocation on the grid ─────────────────────────────────────
   The picture window is the strip's construction with one full-width
   slide: two sixths tall (960 × 480 at 1440), arrows on the margin
   axes, progress bar one module below. Sections span the strip and
   split on the centerline. */
.loc-slider .swiper-slide {
  aspect-ratio: 2 / 1;
  position: relative;
}

.loc-slider .swiper:not(.swiper-initialized) .swiper-slide { width: 100%; flex: none; }

.loc-slot .microline {
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

@media (min-width: 1101px) {
  /* Location slider keeps the boxed anatomy: arrow cells of half a
     sixth flank the picture, their dividers on the 360/1080 lines,
     the window 1.5 sixths tall. */
  .loc-slider {
    display: flex;
    align-items: stretch;
    border: 3px solid var(--club-yellow);
  }
  .loc-slider::before,
  .loc-slider::after { display: none; }
  .loc-slider .slider-arrow {
    position: relative;
    transform: none;
    flex: none;
    width: calc(100vw / 12);
    min-width: 0;
    min-height: 0;
    background: none;
    z-index: auto;
  }
  .loc-slider .slider-arrow--prev { border-right: 3px solid var(--club-yellow); left: auto; }
  .loc-slider .slider-arrow--next { border-left: 3px solid var(--club-yellow); right: auto; }
  .loc-slider .swiper { flex: 1; min-width: 0; }
  .loc-slider .swiper-slide { aspect-ratio: auto; height: calc(100vw / 4); }
  .loc-slider .swiper-slide + .swiper-slide { border-left: none; }
  .loc-section {
    max-width: none;
    width: calc(200vw / 3);
    padding: calc(var(--pxu) * 72) 0 0;
  }
  .loc-hero { padding: calc(var(--pxu) * 36) 0 0; }
  .loc-split,
  .loc-closing {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
  }
  .loc-split > :first-child,
  .loc-closing > :first-child { padding-right: calc(var(--pxu) * 24); }
  .loc-split > :last-child,
  .loc-closing > :last-child { padding-left: calc(var(--pxu) * 24); }
  .loc-slider .swiper:not(.swiper-initialized) .swiper-slide { width: 100%; }
}

/* ── Opening modal — the flyer fills the panel, chrome from the
   shared modal vocabulary. */
.modal--flyer {
  width: fit-content;
  max-width: min(92vw, 480px);
}

.modal--flyer .flyer-link { display: block; }

.modal--flyer img {
  display: block;
  height: min(72vh, 620px);
  width: auto;
  max-width: calc(92vw - 4px);
  object-fit: contain;
  background: #f5e3da;
}