@font-face {
  font-family: 'BoyerBold';
  src: url('fonts/boyerbold-normal-normal.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-600-italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/inter-tight-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/inter-tight-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/inter-tight-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/inter-tight-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --copper: #DA916D;
  --copper-bright: #E8A985;
  --copper-dark: #B56E4C;

  --bg: #F5F1EA;
  --bg-2: #EDE7DC;
  --bg-3: #E3DBCC;
  --surface: #FFFFFF;
  --ink: #1A1715;
  --ink-soft: #3A332D;
  --ink-dim: #6B6258;
  --line: rgba(26,23,21,0.16);
  --line-soft: rgba(26,23,21,0.1);
  --accent: var(--copper-dark);
  --accent-bright: var(--copper);

  --serif: 'Playfair Display', Georgia, serif;
  --display: 'BoyerBold', Georgia, serif;
  --sans: 'Inter Tight', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

[data-theme="dark"] {
  --bg: #0D0C0B;
  --bg-2: #161412;
  --bg-3: #211E1A;
  --surface: #1A1816;
  --ink: #F5F0E8;
  --ink-soft: #CFC6B8;
  --ink-dim: #8E8576;
  --line: rgba(245,240,232,0.16);
  --line-soft: rgba(245,240,232,0.08);
  --accent: var(--copper-bright);
  --accent-bright: var(--copper-bright);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

[data-theme="dark"] .logo-svg path { filter: brightness(1.18) saturate(0.95); }

/* VIENNA hero image - two variants for theme */
.vienna-hero-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}
.vienna-img-light { display: none; }
[data-theme="dark"] .vienna-img-dark { display: none; }
[data-theme="dark"] .vienna-img-light { display: block; }

/* ═══════ TOP NAV ═══════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 24px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-left .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.nav-left .dates { white-space: nowrap; }
@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

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

.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.nav-link {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-link:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-2); }
.nav-link svg { width: 13px; height: 13px; }

.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, background 0.3s;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-left .dates { display: none; }
@media (min-width: 540px) {
  .nav-left .dates { display: inline; }
}

/* ═══════ HERO — FULL SCREEN ═══════ */
.hero {
  min-height: 100dvh;          /* dynamic viewport height — accounts for mobile address bar */
  min-height: 100vh;           /* fallback */
  padding: 80px 24px 32px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Center group: prelude, wordmark, dates — all centered together */
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 40px);   /* equal spacing above & below the wordmark */
  width: 100%;
}

/* Reset the auto-margin trick from earlier */
.hero-prelude { margin-top: 0; }

.hero > * { position: relative; z-index: 1; }

.hero-prelude {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3.5vw, 32px);
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin: 0;
  animation: heroIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-wordmark {
  width: 92%;
  max-width: 720px;
  margin: 0 auto;
  animation: heroIn 1.2s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-dates {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3.5vw, 32px);
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin: 0 auto;
  animation: heroIn 1.2s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3.5vw, 32px);
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto 60px;
  animation: heroIn 1.2s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  align-self: end;
  animation: heroIn 1.2s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  transition: background 0.3s, gap 0.3s, transform 0.3s;
  letter-spacing: 0.01em;
  animation: heroCtaPulse 2.6s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
@keyframes heroCtaPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
/* Pause the pulse when user hovers/focuses (replaced by the hover state) */
.hero-cta:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-cta { animation: none; }
}
.hero-cta:hover { background: var(--accent); gap: 16px; }

.hero-cta.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.hero-cta.secondary:hover { background: var(--bg-2); border-color: var(--accent); color: var(--accent); }

/* ═══════ FULL-BLEED IMAGE STRIP ═══════ */
.image-strip {
  width: 100%;
  height: 60vh;
  min-height: 360px;
  max-height: 560px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.image-strip img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02);
}
[data-theme="dark"] .image-strip img {
  filter: brightness(0.85) contrast(1.05);
}
.image-strip-caption {
  position: absolute;
  bottom: 24px; left: 24px;
  padding: 10px 18px;
  background: rgba(245,241,234,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1A1715;
}

/* ═══════ TWO SHOWS — BIGGER, BOLDER ═══════ */
.shows {
  padding: 120px 24px 140px;
}

.shows-inner { max-width: 1100px; margin: 0 auto; }

.shows-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.shows-label::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--accent);
}

.shows-headline {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(56px, 11vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  color: var(--ink);
}
.shows-headline em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.shows-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 26px);
  color: var(--ink-soft);
  margin-bottom: 56px;
  max-width: 580px;
  line-height: 1.4;
}

.shows-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.show-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.show-card:hover { border-color: var(--accent); transform: translateY(-4px); }

.show-card-banner {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-3);
}
.show-card-banner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.show-card:hover .show-card-banner img { transform: scale(1.04); }
[data-theme="dark"] .show-card-banner img {
  filter: brightness(0.85) contrast(1.05);
}

.show-card-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.show-card-body::after {
  content: '';
  position: absolute;
  right: 28px; bottom: 28px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: url('data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B56E4C' stroke-width='1.8' stroke-linecap='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>') center/16px no-repeat;
  transition: border-color 0.3s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.show-card:hover .show-card-body::after {
  border-color: var(--accent);
  transform: translateX(6px);
}

.show-card-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}

.show-card-name {
  font-family: var(--display);
  font-size: clamp(30px, 4.6vw, 40px);
  font-weight: normal;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 4px 0 12px;
  color: var(--ink);
  padding-right: 56px;
}

.show-card-meta {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.show-card-meta strong {
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
}

.shows-walking {
  margin-top: 32px;
  padding: 18px 28px;
  background: var(--bg);
  border: 1.5px dashed var(--line);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.shows-walking strong { color: var(--accent); font-weight: 700; }

/* ═══════ BRAND FILTER ═══════ */
.brand-filter {
  padding: 22px 24px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 72px;
  z-index: 50;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
}

.brand-filter-inner { max-width: 1100px; margin: 0 auto; }

.brand-filter-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-filter-label::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--accent);
}
.brand-filter-label .count {
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
}

.brand-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.brand-chip {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.2;
}
.brand-chip:hover { border-color: var(--accent); color: var(--accent); }
.brand-chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.brand-chip .chip-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 600;
  opacity: 0.55;
}
.brand-chip.active .chip-count { opacity: 1; }

.brand-chip-clear {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 10px 8px;
  margin-left: 4px;
  transition: opacity 0.3s;
  display: none;
}
.brand-chip-clear.visible { display: inline-block; }
.brand-chip-clear:hover { opacity: 0.7; }

/* ═══════ SHOW SECTION ═══════ */
.show-section {
  padding: 140px 24px 120px;
  position: relative;
}
.show-section.alt {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.show-section-inner { max-width: 1100px; margin: 0 auto; }

.show-header {
  margin-bottom: 72px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.show-eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.show-eyebrow::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--accent);
}

.show-title {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(56px, 13vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  color: var(--ink);
}
.show-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.show-venue {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 8px;
}
.show-venue strong {
  color: var(--ink);
  font-weight: 600;
  font-size: 19px;
}

.show-summary {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 22px;
  max-width: 500px;
}

.show-header-image {
  aspect-ratio: 4/3;
  background: var(--bg-3);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.show-header-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
[data-theme="dark"] .show-header-image img {
  filter: brightness(0.85) contrast(1.05);
}

/* ═══════ ROOM CARDS — BOLDER ═══════ */
.rooms-list { display: flex; flex-direction: column; gap: 14px; }

.room-card {
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s, opacity 0.4s ease;
}
.show-section.alt .room-card { background: var(--bg); }
.room-card:hover { border-color: var(--accent); }
.room-card.filter-hidden { display: none; }

.room-summary {
  padding: 28px;
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  transition: background 0.3s;
}
.room-summary::-webkit-details-marker { display: none; }
.room-summary:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

.room-summary-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.room-id {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.room-id.flagship::after {
  content: '★';
  margin-left: 10px;
  color: var(--copper);
  font-size: 14px;
}

.room-name {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: normal;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.room-name em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.room-size {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.room-summary-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.room-brand-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-soft);
}
.show-section.alt .room-brand-pill { background: var(--bg-2); }
.room-brand-pill.match {
  color: var(--bg);
  border-color: var(--accent);
  background: var(--accent);
  font-weight: 700;
}

.room-toggle {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, border-color 0.3s;
}
.room-card[open] .room-toggle {
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.room-toggle svg { width: 16px; height: 16px; }

.room-detail {
  padding: 0 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: roomOpen 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes roomOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.room-blurb {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.room-items-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: -10px;
}

.room-items { display: flex; flex-direction: column; gap: 12px; }

.room-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  transition: background 0.3s, border-color 0.3s;
}
.show-section.alt .room-item { background: var(--bg-2); }
.room-item.highlight {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-color: var(--accent);
}
.show-section.alt .room-item.highlight {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
}

.room-item-brand {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.room-item-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: normal;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.room-item-desc {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 6px;
}
.room-item-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  align-self: start;
  white-space: nowrap;
}
.room-item-tag.new {
  color: var(--bg);
  border-color: var(--accent);
  background: var(--accent);
  font-weight: 700;
}

.room-map-placeholder {
  aspect-ratio: 16/9;
  background: var(--bg-3);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1.5px dashed var(--line);
  text-align: center;
  padding: 24px;
}
.show-section.alt .room-map-placeholder { background: var(--bg); }

.room-map-placeholder::before {
  content: '';
  width: 40px; height: 40px;
  background: var(--accent);
  mask: url('data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'><path d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z'/><path d='M9 4v16M15 6v16'/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'><path d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z'/><path d='M9 4v16M15 6v16'/></svg>') center/contain no-repeat;
}

.no-match-message {
  display: none;
  padding: 80px 24px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1.5px dashed var(--line);
  border-radius: 14px;
}
.show-section.no-matches .no-match-message { display: block; }
.show-section.no-matches .rooms-list { display: none; }

/* ═══════ LAUNCHES ═══════ */
.launches {
  padding: 140px 24px;
}

.launches-inner { max-width: 1100px; margin: 0 auto; }

.launches-header { margin-bottom: 56px; }

.launches-eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.launches-eyebrow::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--accent);
}

.launches-title {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(56px, 11vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.launches-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.launches-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 26px);
  color: var(--ink-soft);
  max-width: 480px;
  line-height: 1.45;
}

.launches-list { display: flex; flex-direction: column; gap: 18px; }

.launch-card {
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
  display: flex;
  flex-direction: column;
}
.launch-card:hover { border-color: var(--accent); transform: translateY(-3px); }

.launch-card-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-3);
}
.launch-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
[data-theme="dark"] .launch-card-image img {
  filter: brightness(0.85) contrast(1.05);
}
.launch-card:hover .launch-card-image img { transform: scale(1.04); }

.launch-card-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.launch-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 100px;
  align-self: flex-start;
}

.launch-name {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}

.launch-brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  color: var(--accent);
  margin-top: -4px;
}

.launch-desc {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.55;
}

.launch-where {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 16px;
  border-top: 1.5px dashed var(--line);
  margin-top: 8px;
}
.launch-where strong { color: var(--accent); font-weight: 700; }

/* ═══════ MAPS ═══════ */
.maps {
  padding: 140px 24px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.maps-inner { max-width: 1100px; margin: 0 auto; }

.maps-title {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(56px, 11vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.maps-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.maps-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 26px);
  color: var(--ink-soft);
  margin-bottom: 56px;
  max-width: 480px;
  line-height: 1.45;
}

.map-placeholder-big {
  aspect-ratio: 16/10;
  background: var(--bg);
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
  text-align: center;
  padding: 40px;
}
.map-placeholder-big::before {
  content: '';
  width: 56px; height: 56px;
  background: var(--accent);
  mask: url('data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.2'><path d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z'/><path d='M9 4v16M15 6v16'/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.2'><path d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z'/><path d='M9 4v16M15 6v16'/></svg>') center/contain no-repeat;
}
.map-placeholder-big strong {
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
}

/* ═══════ FOOTER ═══════ */
footer {
  padding: 120px 24px 50px;
}

.footer-inner { max-width: 1100px; margin: 0 auto; }

.footer-mark {
  margin-bottom: 64px;
}
.footer-mark .see-you {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
  max-width: 720px;
}

.footer-divider { height: 1px; background: var(--line); margin-bottom: 44px; }

.footer-credit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 56px;
}

.footer-credit-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.footer-anniversary {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 520px;
}
.footer-anniversary strong { color: var(--accent); font-weight: 600; }

.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); }

@media (min-width: 720px) {
  nav { padding: 18px 36px; }
  .hero { padding: 100px 40px 56px; }
  .shows { padding: 160px 40px 180px; }
  .shows-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .brand-filter { padding: 44px 40px; top: 73px; }
  .show-section { padding: 160px 40px 140px; }
  .show-header {
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: end;
  }
  .launches { padding: 160px 40px; }
  .launches-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .maps { padding: 160px 40px; }
  footer { padding: 160px 40px 50px; }
  .room-summary { padding: 32px 36px; }
  .room-detail { padding: 0 36px 36px; }
}

/* ═══════ INSTAGRAM GRID ═══════ */
.instagram {
  padding: 80px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.instagram-inner { max-width: none; width: 80%; margin: 0 auto; }

.instagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.instagram-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.instagram-label svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

.instagram-handle {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.3s;
  font-weight: 700;
}
.instagram-handle:hover { opacity: 0.7; }

@media (min-width: 720px) {
  .instagram { padding: 100px 40px; }
}


/* ═══════ ROOM EVENTS BLOCK ═══════ */
.room-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 11px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  align-self: flex-start;
}
.room-event-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

.room-events {
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 10px;
  padding: 22px;
}
.show-section.alt .room-events {
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
}

.room-events-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.room-events-header svg { width: 16px; height: 16px; flex-shrink: 0; }

.room-event { margin-bottom: 18px; }
.room-event:last-child { margin-bottom: 0; }

.room-event-name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: normal;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 10px;
}

.room-event-times {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.room-event-time {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--line));
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.room-event-time .day {
  color: var(--ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.room-event-time .time { color: var(--ink-soft); }

/* ═══════ FLAGSHIP PULSE — gentle copper glow ═══════ */
.room-card.pulse {
  position: relative;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: flagshipPulse 3.5s ease-in-out infinite;
}
@keyframes flagshipPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    border-color: var(--accent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent),
                0 0 32px 4px color-mix(in srgb, var(--accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent) 80%, var(--bg-2));
  }
}

.flagship-marker {
  display: inline-block;
  margin-left: 10px;
  color: var(--copper);
  font-size: 13px;
}

/* ═══════ SHUNYATA MEETING ROOM ═══════ */
.shunyata-meeting {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.shunyata-portraits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.shunyata-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.shunyata-portrait-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--copper-bright) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--bg);
  letter-spacing: -0.01em;
  box-shadow: inset 0 -8px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

.shunyata-portrait-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.2;
}

.shunyata-book {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  align-self: flex-start;
  transition: background 0.3s, gap 0.3s;
  letter-spacing: 0.01em;
}
.shunyata-book:hover { background: var(--accent); gap: 16px; }

/* ═══════ EVENTS FILTER CHIP (distinct treatment) ═══════ */
.brand-chip.events-chip {
  border-color: var(--accent);
  color: var(--accent);
  position: relative;
  padding-left: 22px;
}
.brand-chip.events-chip::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
.brand-chip.events-chip.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.brand-chip.events-chip.active::before {
  background: var(--bg);
}

@media (min-width: 720px) {
  .shunyata-portrait-circle { width: 96px; height: 96px; font-size: 32px; }
  .room-event-time {
    grid-template-columns: 140px 1fr;
  }
}


/* ═══════ FOOTER CONTACT CTA ═══════ */
.footer-contact-cta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 36px;
}

.footer-contact-text {
  max-width: 520px;
}

.footer-contact-title {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}
.footer-contact-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.footer-contact-blurb {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.footer-contact-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background 0.3s, gap 0.3s;
  letter-spacing: 0.01em;
}
.footer-contact-button:hover { background: var(--accent); gap: 18px; }

.footer-contact-arrow { display: inline-block; transition: transform 0.3s; }
.footer-contact-button:hover .footer-contact-arrow { transform: translateX(4px); }

/* Nav contact button matches link styling */
.nav-link-contact {
  background: transparent;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-link-contact:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-2); }
.nav-link-contact svg { width: 13px; height: 13px; }

/* Hide Maps label on smaller screens to make room for Contact */
@media (max-width: 540px) {
  .nav-link-maps span,
  .nav-link-contact span {
    display: none;
  }
  .nav-link-maps,
  .nav-link-contact {
    padding: 8px 10px;
  }
}

/* ═══════ CONTACT MODAL ═══════ */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalIn 0.3s ease;
}
.contact-modal[hidden] { display: none; }

@keyframes modalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 65%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.contact-modal-panel {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  animation: panelIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.contact-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, background 0.3s;
  z-index: 2;
  padding: 0;
}
.contact-modal-close:hover { border-color: var(--accent); color: var(--accent); }
.contact-modal-close svg { width: 14px; height: 14px; }

.contact-modal-content {
  padding: 44px 36px 36px;
}

.contact-modal-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.contact-modal-title {
  font-family: var(--display);
  font-weight: normal;
  font-size: clamp(36px, 7vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}
.contact-modal-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.contact-modal-blurb {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-bottom: 28px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

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

.contact-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact-input {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.25s, background 0.25s;
}
.contact-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}
.contact-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--sans);
  line-height: 1.5;
}

.contact-roles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.contact-role {
  position: relative;
  cursor: pointer;
}
.contact-role input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.contact-role span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.contact-role:hover span { border-color: var(--accent); color: var(--accent); }
.contact-role input:checked + span {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s, gap 0.3s;
  letter-spacing: 0.01em;
  margin-top: 4px;
}
.contact-submit:hover { background: var(--accent); gap: 16px; }
.contact-submit:disabled { opacity: 0.6; cursor: wait; }

.contact-fineprint {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-dim);
  text-align: center;
  margin-top: 4px;
}

.contact-success {
  text-align: center;
  padding: 20px 0;
  animation: panelIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-success-icon svg { width: 32px; height: 32px; }

.contact-success-title {
  font-family: var(--display);
  font-weight: normal;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
}
.contact-success-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.contact-success-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}

@media (min-width: 720px) {
  .contact-modal-content { padding: 56px 48px 48px; }
  .contact-roles { grid-template-columns: repeat(4, 1fr); }
}


/* ═══════ ROOMS ZONE — distinct visual container for the meat of the microsite ═══════ */
.rooms-zone {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  /* Establishes a containing block — sticky filter only sticks WITHIN this zone */
}
[data-theme="dark"] .rooms-zone {
  background: var(--bg-2);
}

/* Subtle inset shadow at the top edge to create separation from sections above/below */
.rooms-zone::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 32px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent), transparent);
  pointer-events: none;
}
.rooms-zone::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 32px;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 5%, transparent), transparent);
  pointer-events: none;
}

/* Show sections inside the zone use the zone's surface, not their own bg */
.rooms-zone .show-section { background: transparent; border: none; }
.rooms-zone .show-section.alt { background: transparent; border: none; }
/* Use a single dashed divider between AVC and Tech Gate sections instead */
.rooms-zone .show-section.alt {
  border-top: 1px dashed var(--line);
  margin-top: 40px;
  padding-top: 100px;
}

/* Filter sits at the top of the zone — sticky scope = zone */
.rooms-zone .brand-filter {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
[data-theme="dark"] .rooms-zone .brand-filter {
  background: color-mix(in srgb, var(--bg-2) 92%, transparent);
}

/* Room cards: confident, popped against the zone */
.rooms-zone {
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-2));
}
[data-theme="dark"] .rooms-zone {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
}

.rooms-zone .room-card {
  background: var(--surface);
  border-width: 1.5px;
  border-color: var(--line);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent),
    0 4px 14px color-mix(in srgb, var(--ink) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ink) 4%, transparent);
  transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
}
[data-theme="dark"] .rooms-zone .room-card {
  background: var(--bg-3);
}

.rooms-zone .room-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--accent) 25%, transparent),
    0 12px 32px color-mix(in srgb, var(--ink) 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.contact-error {
  font-family: var(--sans);
  font-size: 13px;
  color: #C04A2E;
  text-align: center;
  padding: 10px 14px;
  background: color-mix(in srgb, #C04A2E 8%, transparent);
  border: 1px solid color-mix(in srgb, #C04A2E 30%, transparent);
  border-radius: 8px;
  margin-top: 4px;
}


/* ═══════ ROOM MODAL ═══════ */
/* Hide the room-detail content - it lives in the card but is only used as a source for the modal */
.room-card .room-detail {
  display: none;
}

/* Cards no longer need internal hover/open state for expansion */
.room-card {
  cursor: default;
}
.room-summary {
  /* now a button */
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 28px;
  transition: background 0.3s;
}
.room-summary:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.room-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 14px;
}

/* The plus-icon toggle becomes an "open" indicator (arrow into room) */
.room-toggle {
  position: relative;
}
.room-toggle svg {
  /* Swap the plus for an arrow → */
  display: none;
}
.room-toggle::after {
  content: '';
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: -4px;
  transition: transform 0.3s;
}
.room-summary:hover .room-toggle {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.room-summary:hover .room-toggle::after { transform: rotate(45deg) translate(2px, -2px); }

/* Backdrop & panel */
.room-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: stretch;
  justify-content: center;
  animation: modalIn 0.25s ease;
}
.room-modal[hidden] { display: none; }

.room-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.room-modal-panel {
  position: relative;
  background: var(--bg);
  width: 100%;
  max-width: 760px;
  margin: auto;
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0,0,0,0.35);
  animation: roomPanelIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes roomPanelIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 720px) {
  .room-modal { padding: 40px; align-items: center; }
  .room-modal-panel { border-radius: 16px; max-height: 90vh; }
}

.room-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.room-modal-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 14px 8px 10px;
  border-radius: 100px;
  border: 1px solid var(--line);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.room-modal-back:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-2);
}
.room-modal-back svg { width: 14px; height: 14px; }

.room-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.room-modal-close:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-2);
}
.room-modal-close svg { width: 14px; height: 14px; }

.room-modal-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 32px 28px 40px;
}

@media (min-width: 720px) {
  .room-modal-content { padding: 44px 48px 48px; }
}

/* Room modal: hero section (room name + id) */
.room-modal-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

/* Each piece of the room summary is its own block in the modal */
.room-modal-hero > .room-id,
.room-modal-hero > .room-name,
.room-modal-hero > .room-size {
  display: block;
  width: 100%;
  margin: 0;
}

.room-modal-hero .room-id {
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.4;
}

.room-modal-hero .room-name {
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-top: 4px;     /* breathing room above the title */
}

.room-modal-hero .room-size {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-top: 2px;
}

.room-modal-hero .room-summary-brands {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.room-modal-hero .room-event-badge {
  margin-top: 4px;
}

/* Reuse all the existing .room-detail / .room-items / .room-events styles inside the modal */
.room-modal .room-detail {
  display: flex; /* re-show in modal context */
  flex-direction: column;
  gap: 28px;
  padding: 0;
  animation: none;
  border: none;
}
.room-modal .room-blurb {
  font-size: 21px;
  padding-top: 0;
  border-top: none;
}

/* Make sure flagship pulse animation doesn't leak into modal */
.room-modal .room-card { animation: none; box-shadow: none; }