/* Per-page personalities inside one RHG system.
   Eventos keeps its own kraft wall in events.css. */

.app-shell {
  --chrome-top: 136px;
  --chrome-bottom: 52px;
  background: #070605;
}

.paper-grain {
  z-index: 4;
  opacity: 0.14;
  mix-blend-mode: overlay;
}

.scene.ed-scene {
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--chrome-top) 0 var(--chrome-bottom);
  color: #f6f1e8;
  background: transparent !important;
  transform: translateY(16px);
  transition:
    opacity 0.45s cubic-bezier(0.16, 0.84, 0.24, 1),
    transform 0.5s cubic-bezier(0.16, 0.84, 0.24, 1),
    visibility 0.45s;
}

.scene.ed-scene.active { transform: none; }

.app-shell.is-tv .brand-strip { display: flex; }

/* Shared chrome — dark bar, light mono. Hidden on Eventos. */

.topbar {
  height: 64px;
  padding: 0 3.1%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  background: linear-gradient(#0c0b0af0, #0c0b0ac2);
  border-bottom: 0;
  color: #f6f1e8;
}

.wordmark {
  font-family: "Libre Bodoni", Georgia, serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.03em;
  line-height: 0.8;
  color: #f6f1e8;
}

.wordmark span {
  font: 700 11px/1 "Libre Bodoni", Georgia, serif;
  letter-spacing: 0;
  vertical-align: super;
}

.main-nav {
  justify-content: center;
  gap: clamp(12px, 2vw, 32px);
}

.nav-link {
  padding: 8px 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.13em;
  color: #f6f1e8;
}

.nav-link::after { bottom: -6px; height: 1px; background: currentColor; }

.city-label {
  position: relative;
  padding: 8px 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.13em;
  color: #f6f1e8;
  white-space: nowrap;
}

.city-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
}

.menu-toggle {
  display: none;
  position: relative;
  width: 34px;
  height: 34px;
  border: 1.5px solid #f6f1e8;
  border-radius: 50%;
  background: transparent;
  color: #f6f1e8;
  padding: 0;
}

.menu-toggle span { display: none; }

.menu-toggle::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid #f6f1e8;
  border-radius: 50%;
}

.menu-toggle[aria-expanded="true"],
.menu-toggle:hover { background: #f6f1e8; }

.menu-toggle[aria-expanded="true"]::before,
.menu-toggle:hover::before { border-color: #111; }

/* Brand logos back on their photographs. */

.brand-strip {
  top: 64px;
  height: 72px;
  padding: 0;
  gap: 0;
  justify-content: stretch;
  background: transparent;
  background-image: none;
  box-shadow: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.brand-strip::-webkit-scrollbar { display: none; }

.brand-strip .brand,
.brand-strip .brand.script {
  position: relative;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-right: 1px solid #ffffff33;
  border-radius: 0;
  background-color: #120e0c;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  font: 600 18px/0.95 var(--cond);
  letter-spacing: -0.02em;
  text-transform: none;
  text-shadow: 0 2px 12px #000c;
  filter: none;
  white-space: normal;
  isolation: isolate;
}

.brand-strip .brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(#05050555, #050505c4);
}

.brand-strip .brand.script { font: 22px/0.9 var(--script); letter-spacing: -0.04em; }
.brand-strip .brand.red { color: #ff3b42; }
.brand-strip .brand.yellow { color: #f3ce42; }
.brand-strip .brand.orange { color: #ff7a32; }
.brand-strip .brand.pink { color: #ff4d6a; font-size: 15px; }
.brand-strip .brand.magenta { color: #ff4ea6; }
.brand-strip .brand.mint { color: #d5efe0; font: 600 13px/0.95 var(--cond); }

.brand-strip .brand[data-place="yuhu"] { background-image: url("./assets/rhg-nightlife-hero.jpg"); background-position: center 62%; }
.brand-strip .brand[data-place="ruido"] { background-image: url("./assets/poster-ruido.jpg"); background-position: center 30%; }
.brand-strip .brand[data-place="astra"] { background-image: url("./assets/poster-astra.jpg"); background-position: center 22%; }
.brand-strip .brand[data-place="phonique"] { background-image: url("./assets/rhg-nightlife-hero.jpg"); background-position: 72% 40%; }
.brand-strip .brand[data-place="alma"] { background-image: url("./assets/poster-alma.jpg"); background-position: center 35%; }
.brand-strip .brand[data-place="lisboa"] { background-image: url("./assets/rhg-nightlife-hero.jpg"); background-position: 28% 28%; }
.brand-strip .brand[data-place="casa-amor"] { background-image: url("./assets/poster-casa.jpg"); background-position: center 18%; }

.brand-strip .brand small {
  display: block;
  margin-top: 3px;
  color: #fff;
  font: 500 7px/1.15 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px #000;
  opacity: 0.92;
}

.brand-strip .brand::after { display: none; }

.brand-strip .brand:hover,
.brand-strip .brand.is-current {
  transform: none;
  filter: saturate(1.15) brightness(1.12);
  color: #fff;
}

.brand-strip .brand.red:hover,
.brand-strip .brand.red.is-current { color: #ff3b42; }
.brand-strip .brand.yellow:hover,
.brand-strip .brand.yellow.is-current { color: #f3ce42; }
.brand-strip .brand.orange:hover,
.brand-strip .brand.orange.is-current { color: #ff7a32; }
.brand-strip .brand.pink:hover,
.brand-strip .brand.pink.is-current { color: #ff4d6a; }
.brand-strip .brand.magenta:hover,
.brand-strip .brand.magenta.is-current { color: #ff4ea6; }
.brand-strip .brand.mint:hover,
.brand-strip .brand.mint.is-current { color: #d5efe0; }

.bottom-nav {
  height: calc(46px + env(safe-area-inset-bottom));
  padding: 0 3.1% env(safe-area-inset-bottom);
  background: linear-gradient(to top, #070605f2 62%, #07060500);
  border: 0;
  backdrop-filter: none;
  color: #f6f1e8;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  z-index: 11;
}

.bottom-nav > span:last-child { color: #f6f1e8; }

.scene-dots { gap: 2px; }

.scene-dots button {
  position: relative;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.scene-dots button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid #f6f1e8;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.scene-dots button.active { width: 36px; background: transparent; }

.scene-dots button.active::before {
  width: 18px;
  border-radius: 8px;
  background: #f6f1e8;
}

/* Shared editorial frame */

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.04);
  transition: opacity 0.45s ease, background-image 0.45s ease;
}

.ed-frame {
  position: relative;
  z-index: 1;
  flex: 1;
  width: min(1160px, calc(100% - 120px));
  min-height: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.ed-hero {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
  align-items: end;
  gap: 8px;
  min-height: 0;
}

.ed-side,
.ed-coord {
  margin: 0 0 8px;
  font: 500 10px/1.7 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ed-side span,
.ed-coord span { display: block; }

.ed-side span {
  width: 32px;
  height: 1px;
  margin-top: 10px;
  background: currentColor;
}

.ed-lockup { position: relative; width: max-content; max-width: 100%; }

.ed-lockup .eyebrow {
  margin: 0 0 8px;
  color: inherit;
  opacity: 0.8;
  letter-spacing: 0.16em;
}

.ed-lockup h1,
.ed-lockup h2,
.home-script {
  margin: 0;
  font-family: Oswald, Impact, sans-serif;
  font-weight: 700;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.ed-kicker {
  margin: 8px 0 0;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.ed-scribble {
  position: absolute;
  left: calc(100% + 8px);
  top: 8px;
  width: 120px;
  margin: 0;
  transform: rotate(-10deg);
  transform-origin: left center;
  font-family: "Permanent Marker", cursive;
  font-size: 18px;
  line-height: 0.95;
  text-align: left;
  pointer-events: none;
}

.ed-scribble span { display: block; }

.ed-scribble i {
  display: block;
  width: 70px;
  height: 2px;
  margin-top: 6px;
  background: currentColor;
  transform: rotate(-8deg);
  transform-origin: left center;
}

.ed-scene .button {
  border-radius: 2px;
  min-height: 38px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
}

/* INICIO — cinematic night, kinetic title, marquee.
   Broadwick Live / ADE: full-bleed room, type as the light. */

.home-bg {
  background-image:
    linear-gradient(90deg, #070605f2 0%, #070605b8 34%, #07060533 68%, #07060588 100%),
    linear-gradient(#07060555, transparent 30%, #070605cc 100%),
    url("./assets/rhg-nightlife-hero.jpg");
  background-position: center 58%;
  filter: saturate(0.9) contrast(1.05);
}

.ed-lockup .home-script {
  font-family: "Permanent Marker", cursive;
  font-size: clamp(84px, 12vw, 168px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.8;
  text-transform: none;
  color: #f6f1e8;
}

.home-scene .ed-kicker { color: #f3ce42; }

.home-scene .period { color: #ff3b42; }

.home-lead {
  margin: 8px 0 0;
  font: 700 clamp(32px, 4vw, 58px)/0.9 var(--cond);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.home-lead em { font-style: normal; color: #ff5a3c; }

.home-scene .home-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.home-scene .home-buttons .button { width: auto; flex: 0 0 auto; }

.home-scene .button-outline {
  border-color: #f6f1e8aa;
  color: #f6f1e8;
  background: transparent;
}

.home-scene .button-outline:hover { background: #f6f1e8; color: #111; }

.ed-foot {
  margin: 12px 0 0;
  font: 500 10px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}

.marquee {
  overflow: hidden;
  margin-top: 18px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: ticker 32s linear infinite;
}

.marquee-track span {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f6f1e8cc;
  white-space: nowrap;
}

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

/* MÚSICA — dark room, neon, vinyl, equalizer.
   ADE's black-and-gold club field, without leaving the type system. */

.music-scene { --px: 70%; --py: 40%; }

.music-bg {
  background-image:
    radial-gradient(520px circle at var(--px) var(--py), #ff2a6a33, transparent 62%),
    linear-gradient(#07060ae8, #07060acc 40%, #07060af2),
    url("./assets/rhg-nightlife-hero.jpg");
  background-position: center, center, 64% 42%;
  filter: saturate(1.15) contrast(1.08);
}

.music-scene .ed-lockup h2 { color: #f6f1e8; }
.music-scene .ed-lockup h2 .period { color: #ff2a6a; }

.music-toolbar,
.places-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.music-scene .genre-list,
.ed-filters {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.music-scene .genre,
.ed-chip {
  flex: none;
  border: 1px solid #f6f1e833;
  border-radius: 99px;
  background: #07060566;
  color: #f6f1e8;
  padding: 8px 12px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.music-scene .genre.active,
.ed-chip.active {
  background: #ff2a6a;
  border-color: #ff2a6a;
  color: #16060c;
}

.music-scene .sound-label {
  border-color: #f6f1e888;
  color: #f6f1e8;
  background: transparent;
}

.music-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: end;
}

.vinyl {
  width: min(220px, 28vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #1a120e 0 18%, #0a0a0a 19% 22%, transparent 23%),
    repeating-radial-gradient(circle at 50% 50%, #141414 0 2px, #0c0c0c 3px 5px);
  box-shadow: 0 18px 40px #000a, inset 0 0 0 10px #111;
  animation: spin 12s linear infinite;
  justify-self: center;
}

.vinyl span {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background:
    url("./assets/rhg-nightlife-hero.jpg") center/cover,
    #ff2a6a;
  box-shadow: 0 0 0 6px #1a1a1a;
}

.vinyl { position: relative; }

.music-card {
  max-width: 520px;
  padding: 8px 0 4px;
}

.music-scene .music-description {
  margin: 0 0 12px;
  max-width: 46ch;
  color: #f0e6da;
  font: 15px/1.55 var(--sans);
}

.music-scene .now-playing {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #f6f1e833;
}

.music-scene .now-playing small,
.music-scene .now-playing > div > span { color: #f6f1e8aa; }

.music-scene .now-playing strong {
  display: block;
  font: 600 16px/1.3 var(--sans);
}

.music-scene.active .equalizer i {
  display: block;
  width: 3px;
  margin-right: 3px;
  background: #ff2a6a;
  animation: beat 0.7s infinite alternate;
}

.equalizer { display: flex; align-items: flex-end; height: 22px; }

.music-stamp {
  position: static;
  margin: 14px 0 0;
  color: #f6f1e8;
  font: 26px/0.8 "Permanent Marker", cursive;
  text-shadow: none;
  transform: rotate(-6deg);
  transform-origin: left center;
}

.music-stamp span { font: 700 42px/0.8 var(--cond); }
.music-stamp small { display: block; margin-top: 4px; font: 500 9px/1 var(--mono); letter-spacing: 0.18em; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes beat { to { height: 4px; } }

/* RUIDO TV — broadcast room, scanlines, CRT.
   Aurel's dust and a signal, not another paper wall. */

.tv-scene { color: #e7f6ea; }

.tv-bg {
  background:
    radial-gradient(ellipse at 50% 40%, #123028 0%, #07080c 62%);
}

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(#0000 0 2px, #00000040 3px 4px);
  mix-blend-mode: multiply;
  animation: static-flicker 0.18s steps(2) infinite;
  opacity: 0.45;
}

.tv-scene .tv-wordmark,
.tv-scene .ed-kicker,
.tv-scene .ed-side,
.tv-scene .ed-coord { color: #d9ffe4; }

.tv-scene .tv-wordmark > strong:before,
.tv-scene .tv-wordmark > strong:after {
  background: repeating-linear-gradient(90deg, #d9ffe4 0 9px, transparent 9px 13px);
}

.tv-scene .tv-wordmark { height: auto; }
.tv-scene .tv-wordmark > span { font-size: clamp(52px, 7vw, 100px); }
.tv-scene .tv-wordmark > strong { font-size: clamp(44px, 5.4vw, 78px); margin-top: 14px; color: #7dffb2; }

.tv-scene .live-indicator i { background: #39ff78; box-shadow: 0 0 0 3px #39ff7833; }

.tv-scene .tv-controls {
  position: relative;
  inset: auto;
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
}

.tv-scene .tv-play-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.tv-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 14px;
  min-height: 0;
  height: min(42vh, 360px);
}

.tv-scene .tv-wall {
  position: relative;
  inset: auto;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  filter: none;
}

.tv-scene .tv-tapes {
  position: relative;
  inset: auto;
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  transform: none;
}

.tv-tagline {
  position: relative;
  inset: auto;
  margin: 10px 0 0;
  color: #9dccb0;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.16em;
}

@keyframes static-flicker {
  0% { opacity: 0.35; }
  50% { opacity: 0.55; }
  100% { opacity: 0.3; }
}

/* LUGARES — one color world per brand, logo on the photograph. */

.places-scene { --mark: #ff3b42; --wash: #e1060055; }
.places-scene[data-brand="yuhu"] { --mark: #ff3b42; --wash: #c4181855; }
.places-scene[data-brand="ruido"] { --mark: #f3ce42; --wash: #8a6a1055; }
.places-scene[data-brand="astra"] { --mark: #ff7a32; --wash: #c2410c66; }
.places-scene[data-brand="phonique"] { --mark: #ff4d6a; --wash: #9d174d66; }
.places-scene[data-brand="alma"] { --mark: #ff4ea6; --wash: #9d174d55; }
.places-scene[data-brand="lisboa"] { --mark: #d5efe0; --wash: #14532d66; }
.places-scene[data-brand="casa-amor"] { --mark: #ff3b42; --wash: #7f1d1d66; }

.places-scene .scene-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #05050522 0%, #05050555 42%, #050505ee 78%),
    linear-gradient(var(--wash), transparent 55%);
}

.place-logo {
  position: absolute;
  z-index: 1;
  left: max(96px, 9%);
  bottom: 18%;
  max-width: 8ch;
  color: var(--mark);
  font-family: var(--cond);
  font-weight: 700;
  font-size: clamp(64px, 8vw, 128px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-shadow: 0 10px 30px #000c;
  pointer-events: none;
}

.place-logo.is-script {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.03em;
}

.places-scene.is-swapping .scene-bg { animation: photo-dip 0.45s ease; }

@keyframes photo-dip {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.place-gallery {
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-height: 0;
}

.place-sheet {
  width: min(420px, 42vw);
  padding: 22px 22px 18px;
  background: #0c0b0ad4;
  color: #f6f1e8;
  border: 1px solid #f6f1e822;
  backdrop-filter: blur(8px);
}

.place-kicker,
.places-scene .place-caption {
  position: static;
  font: 500 10px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f6f1e8bb;
}

.places-scene .place-caption { display: block; margin: 14px 0 0; }

.place-sheet h3 {
  margin: 4px 0 8px;
  color: var(--mark);
  font: 600 42px/0.9 "Permanent Marker", cursive;
}

.places-scene[data-brand="yuhu"] .place-sheet h3,
.places-scene[data-brand="astra"] .place-sheet h3,
.places-scene[data-brand="phonique"] .place-sheet h3,
.places-scene[data-brand="lisboa"] .place-sheet h3 {
  font-family: var(--cond);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.place-sheet > p { margin: 0; max-width: 36ch; font: 15px/1.5 var(--sans); color: #f3ebdf; }

.place-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.place-tags span {
  border: 1px solid #f6f1e855;
  padding: 6px 8px;
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.1em;
}

.place-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.places-scene .button-outline { border-color: #f6f1e888; color: #f6f1e8; }
.places-scene .button-outline:hover { background: #f6f1e8; color: #111; }
.places-scene .text-button { color: #f6f1e8; }

.places-scene .ed-chip.active {
  background: var(--mark);
  border-color: var(--mark);
  color: #140c0a;
}

.place-booking[hidden] { display: none !important; }

/* RHG — quiet editorial manifesto.
   No Art's white wall: one red word, marker beside mono, no kraft photo. */

.about-scene {
  color: #17130f;
  background: #f4efe6 !important;
}

.about-bg {
  background:
    radial-gradient(ellipse at 80% 20%, #ffffff 0%, transparent 42%),
    #f4efe6;
  transform: none;
}

.about-scene .ed-lockup h2 { color: #14110e; font-size: clamp(46px, 5.4vw, 78px); }
.about-scene .ed-accent { color: #c42118; }

.about-scene .about-mark {
  position: static;
  margin: 0;
  justify-self: end;
  color: #14110e;
  font: 700 clamp(72px, 9vw, 120px)/0.74 "Libre Bodoni", Georgia, serif;
  letter-spacing: -0.08em;
}

.about-sheet { max-width: 640px; padding-bottom: 8px; }

.about-statement {
  margin: 0 0 16px;
  max-width: 46ch;
  font: 17px/1.6 var(--sans);
  color: #3c342c;
}

.about-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.about-scene .button-outline { border-color: #17130f88; color: #17130f; }
.about-scene .button-outline:hover { background: #17130f; color: #f4efe6; }

.about-scene .text-button,
.about-scene .back-home {
  position: static;
  border: 0;
  background: none;
  color: #17130f;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.about-scene .bottom-nav,
.about-scene .ed-side { color: #17130f; }

/* Entrance */

.ed-scene.is-intro .ed-lockup h1,
.ed-scene.is-intro .ed-lockup h2,
.ed-scene.is-intro .home-script,
.ed-scene.is-intro .tv-wordmark,
.ed-scene.is-intro .place-logo {
  animation: rise 0.7s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

.ed-scene.is-intro .ed-side,
.ed-scene.is-intro .ed-coord,
.ed-scene.is-intro .about-mark { animation: rise 0.5s 0.08s both; }

.ed-scene.is-intro .ed-scribble span { animation: write 0.45s both; }
.ed-scene.is-intro .ed-scribble span:nth-child(2) { animation-delay: 0.12s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

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

.event-dialog,
.contact-dialog {
  background: #f4efe6;
  color: #17130f;
  border: 1px solid #17130f;
}

.brand:focus-visible,
.menu-toggle:focus-visible,
.ed-chip:focus-visible,
.genre:focus-visible,
.gallery-arrow:focus-visible {
  outline: 2px solid #f3ce42;
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .ed-frame { width: calc(100% - 48px); }
  .ed-lockup h1,
  .ed-lockup h2,
  .home-script { font-size: clamp(52px, 8vw, 96px); }
  .place-logo { font-size: clamp(52px, 8vw, 96px); }
  .vinyl { width: 160px; }
}

@media (max-width: 760px) {
  .app-shell { --chrome-top: 118px; --chrome-bottom: 64px; }
  .topbar { height: 56px; padding: 0 16px; }
  .wordmark { font-size: 30px; }
  .city-label { display: none; }
  .menu-toggle { display: inline-flex; }

  .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    width: min(250px, 84vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: #12100ef5;
    border: 1px solid #f6f1e855;
  }

  .main-nav.open { display: flex; }

  .main-nav .nav-link {
    padding: 13px 12px;
    font-size: 12px;
    text-align: left;
    color: #f6f1e8;
  }

  .main-nav .nav-link::after { display: none; }
  .main-nav .nav-link.active,
  .main-nav .nav-link:hover { background: #f6f1e8; color: #111; }

  .brand-strip {
    top: 56px;
    height: 62px;
    justify-content: flex-start;
  }

  .brand-strip .brand,
  .brand-strip .brand.script {
    flex: 0 0 118px;
    min-width: 118px;
  }

  .scene.ed-scene {
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
    padding-bottom: 28px;
  }

  .ed-frame { width: calc(100% - 28px); min-height: calc(100% - 8px); }
  .ed-hero { display: block; }
  .ed-side, .ed-coord, .about-scene .about-mark { display: none; }

  .ed-scribble {
    position: static;
    width: auto;
    margin: 10px 0 0;
    transform: rotate(-6deg);
    transform-origin: left center;
  }

  .home-script { font-size: clamp(64px, 18vw, 92px); }
  .music-stage, .tv-stage, .place-gallery { display: block; height: auto; }
  .vinyl { width: 140px; margin: 8px 0 16px; }
  .place-logo { display: none; }
  .place-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 18vh;
  }
  .place-gallery .gallery-arrow {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    right: auto;
  }
  .place-sheet { width: 100%; margin-top: 12px; }
  .tv-scene .tv-wall {
    display: flex;
    height: 280px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .tv-scene .crt { flex: 0 0 78%; scroll-snap-align: center; height: 100%; }
  .tv-scene .tv-tapes { height: auto; width: 100%; flex-direction: row; flex-wrap: wrap; margin-top: 10px; }
  .bottom-nav > span:last-child { display: none; }
  .about-scene .ed-lockup h2 { font-size: clamp(42px, 12vw, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .vinyl,
  .scanlines,
  .music-scene.active .equalizer i,
  .ed-scene.is-intro .ed-lockup h1,
  .ed-scene.is-intro .ed-lockup h2,
  .ed-scene.is-intro .home-script,
  .ed-scene.is-intro .tv-wordmark,
  .ed-scene.is-intro .place-logo,
  .ed-scene.is-intro .ed-side,
  .ed-scene.is-intro .ed-coord,
  .ed-scene.is-intro .about-mark,
  .ed-scene.is-intro .ed-scribble span,
  .places-scene.is-swapping .scene-bg { animation: none; }
}