/* Shared look for every page in direction A (round 4, 13 Nov 2026): links and buttons, the small
   logo at the top, the roster list on the right, C's bar and its panels. Cream and black only.
   The home adds /r/a/style.css on top; each inner page adds its own file. */

.a-body {
  margin: 0;
  background: var(--ink);
  color: var(--cream-dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  --gutter: 4.5rem;
  --list-w: calc(var(--gutter) + 13rem);
  /* Room the logo takes at the top and the caption plus the bar take at the bottom. */
  --top-r: 4.75rem;
  --bot-r: 7.25rem;
  /* The flyer: 4:5, as tall as the room between them allows, never touching the list. */
  --fh: clamp(300px, min(calc(100svh - var(--top-r) - var(--bot-r)), 780px, calc((100vw - 2 * var(--list-w) - 2.5rem) * 1.25)), 780px);
  --fw: calc(var(--fh) * 0.8);
  --press: 140ms var(--ease-out);
  --release: 420ms var(--ease-spring);
  --glass: rgba(26, 23, 20, 0.88);
  --glass-hi: rgba(26, 23, 20, 0.96);
  --veil: rgba(0, 0, 0, 0.94);
  --faint: 0.6;
  --unlit: 0.62;
  --card-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 14px 32px rgba(0, 0, 0, 0.6);
  --frame-edge: none;
  --rule: rgba(245, 230, 200, 0.16);
  --rule-mid: rgba(245, 230, 200, 0.32);
  --rule-hi: rgba(245, 230, 200, 0.5);
  color-scheme: dark;
}
/* Light look: the device's setting at first, then the visitor's own pick from the switch at the top
   right, kept for later visits (César liked the idea, 13 Nov 2026 call; the switch: Miguel, same night).
   the same two colours swapped, cream page and black type, so nothing new enters the palette.
   Photos keep their black and white; the logo turns to dark fur. Faint labels step up a little so
   they stay readable on cream. The preloader still starts black, so it opens like lights coming up. */
html[data-theme="light"] .a-body {
  --ink: #F5E6C8;
  --cream: #000000;
  --cream-dim: #4F4537;
  --glass: rgba(245, 230, 200, 0.9);
  --glass-hi: rgba(245, 230, 200, 0.97);
  --rule: rgba(0, 0, 0, 0.16);
  --rule-mid: rgba(0, 0, 0, 0.32);
  --rule-hi: rgba(0, 0, 0, 0.55);
  --veil: #F5E6C8;
  --faint: 0.86;
  --unlit: 0.8;
  --card-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(0, 0, 0, 0.14);
  --frame-edge: 0 0 0 1px var(--rule);
  color-scheme: light;
}
html[data-theme="light"].is-intro .a-body::before { background: #000; }
.a-body *, .a-body *::before, .a-body *::after { box-sizing: border-box; }
.a-body a:where(:not(.a-link)) { color: inherit; text-decoration: none; }
.a-body :focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

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

/* ---------- links and buttons: hover warms to cream with an underline, press sinks ---------- */

.a-btn {
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer;
}
.a-link {
  display: inline-block;
  color: var(--cream-dim);
  text-decoration: underline transparent;
  text-underline-offset: 3px;
  transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out), transform var(--release);
}
.a-link[aria-expanded="true"], .a-link[aria-pressed="true"] { color: var(--cream); text-decoration-color: currentColor; }
@media (hover: hover) { .a-link:hover { color: var(--cream); text-decoration-color: currentColor; } }
.a-link:active { transform: scale(0.95); transition: transform var(--press); }



/* Scroll reveal. The class is only added by JS once an observer exists. */
.rv { opacity: 0; transform: translateY(24px); }
.rv.is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--rv-delay, 0ms);
}

/* ---------- the logo, small, top centre ---------- */

.top-logo {
  position: fixed;
  z-index: 30;
  top: 1.1rem;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  padding: 0.35rem 0.5rem;
  transition: opacity 200ms var(--ease-out), transform var(--release);
}
.top-logo img { display: block; height: 26px; width: auto; }
.top-logo .logo-ink, html[data-theme="light"] .top-logo .logo-fur { display: none; }
html[data-theme="light"] .top-logo .logo-ink { display: block; }
/* The light and dark switch: top right, level with the logo, 44px to tap. */
.theme-btn { position: fixed; z-index: 30; top: calc(1.1rem - 5px); right: calc(var(--gutter) - 14px); width: 44px; height: 44px; display: grid; place-items: center; color: var(--cream-dim); }
@media (hover: hover) { .theme-btn:hover { color: var(--cream); } }
.theme-btn:active { transform: scale(0.9); transition: transform var(--press); }
.theme-btn svg { display: block; transition: transform 360ms var(--ease-out); }
html[data-theme="light"] .theme-btn svg { transform: rotate(180deg); }
@media (hover: hover) { .top-logo:hover { opacity: 0.8; } }
.top-logo:active { transform: scale(0.95); transition: transform var(--press); }

/* ---------- roster on the right (laptops) ---------- */

.roster {
  position: fixed;
  z-index: 5;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  text-align: right;
}
.roster__list, .panel__roster { list-style: none; margin: 0; padding: 0; }
.roster__link {
  display: inline-block;
  padding: 0.22rem 0;
  line-height: 1.4;
  color: var(--cream-dim);
  transform-origin: right center;
  transition: color 200ms var(--ease-out), transform var(--release);
}
.roster__link:active { transform: scale(0.95); transition: transform var(--press); }
@media (hover: hover) { .roster__link:hover { color: var(--cream); } }
.roster__link:focus-visible { color: var(--cream); }

/* ---------- the bar, after direction C, without its logo ----------
   Every page in one line, no MENÚ (César, 13 Nov 2026 call): it grows to fit on laptops and swipes
   sideways on phones, where the right edge fades while more is hidden there. */

.bar {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 10px;
  width: max-content;
  max-width: calc(100vw - 20px);
  height: 44px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border-radius: 4px;
  background: var(--glass);
  border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: opacity 400ms ease-in-out;
}
.bar__nav { min-width: 0; height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.bar__nav::-webkit-scrollbar { display: none; }
.bar__nav { --fl: #000; --fr: #000; -webkit-mask-image: linear-gradient(90deg, var(--fl), #000 28px, #000 calc(100% - 28px), var(--fr)); mask-image: linear-gradient(90deg, var(--fl), #000 28px, #000 calc(100% - 28px), var(--fr)); }
.bar__nav.is-more { --fr: transparent; }
.bar__nav.is-less { --fl: transparent; }
.bar__nav, .bar__lang, .bar__opt { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.bar__lang, .bar__opt { flex: none; }
/* The language pair keeps 44px to tap but sits as close as the nav's own slashes. */
.bar__lang .lang-btn { min-width: 30px; }
.bar__sep { color: var(--cream-dim); opacity: var(--faint); }
.bar__lang { color: var(--cream-dim); gap: 2px; }
/* BOOKING is what the agency sells, so it stays full cream; the rest sit a step dimmer and light
   up on hover, focus or when they are the page you are on. */
.a-body .bar__item { line-height: 44px; color: var(--cream-dim); white-space: nowrap; }
.a-body .bar__item--key, .a-body .bar__item[aria-current], .a-body .bar__item[aria-expanded="true"] { color: var(--cream); }
@media (hover: hover) { .a-body .bar__item:hover { color: var(--cream); } }
.a-body .bar__item:focus-visible { color: var(--cream); }

/* ---------- the bar's panels: fade and rise a little, never cut ---------- */

.panel {
  position: fixed;
  z-index: 49;
  left: 50%;
  bottom: calc(10px + 44px + 6px);
  width: min(400px, calc(100vw - 20px));
  max-height: calc(100svh - 80px);
  overflow-y: auto;
  padding: 14px;
  border-radius: 4px;
  background: var(--glass-hi);
  border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease-in-out, transform 180ms ease-in-out, visibility 0s linear 180ms;
}
.panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 240ms ease-in-out, transform 240ms var(--ease-out), visibility 0s;
}
.panel__head { display: flex; justify-content: space-between; margin: 0 0 12px; color: var(--cream-dim); }

.lang-btn { min-height: 44px; min-width: 44px; padding: 0 2px; }
[data-onsale][hidden] { display: none !important; }

/* The roster panel: every artist as a small black-and-white photo with the name under it. */
.panel__roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.panel__artist {
  display: block;
  color: var(--cream-dim);
  transition: color 200ms var(--ease-out), transform var(--release);
}
.panel__artist:active { transform: scale(0.985); transition: transform var(--press); }
.panel__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--ash);
  filter: grayscale(1) brightness(0.85);
  transition: filter 200ms var(--ease-out);
}
.panel__name { display: block; margin-top: 6px; line-height: 1.3; text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color 200ms var(--ease-out); }
/* The photo gets its colour back on hover (Miguel, 13 Nov 2026); phones have no hover, so a press
   shows it. The artist whose page this is stays lit. */
@media (hover: hover) {
  .panel__artist:hover { color: var(--cream); }
  .panel__artist:hover .panel__thumb { filter: none; }
  .panel__artist:hover .panel__name { text-decoration-color: currentColor; }
}
.panel__artist:active .panel__thumb, .panel__artist:focus-visible .panel__thumb { filter: none; }
.panel__artist:focus-visible, .panel__artist[aria-current] { color: var(--cream); }
.panel__artist[aria-current] .panel__name { text-decoration-color: currentColor; }
/* The bar marks the page you are on, the same underline every link shows on hover. */
.bar__item[aria-current] { text-decoration-color: currentColor; }
/* You are here: on an artist's own page their photo in the panel is in colour. */
.panel__artist[aria-current] .panel__thumb { filter: none; }

/* The old Roster page's call to join, as the panel's last line. */
.panel__join { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; padding-top: 4px; color: var(--cream-dim); }
.panel__apply { min-height: 44px; line-height: 44px; color: var(--cream); }

/* ---------- phones and tablets ---------- */

@media (max-width: 959px) {
  .a-body { --gutter: 2.6rem; --top-r: 3.4rem; }
  .top-logo { top: 0.7rem; }
  .top-logo img { height: 22px; }
  .theme-btn { top: calc(0.7rem - 7px); right: 0.4rem; }
  .roster { display: none; }
  .bar { gap: 12px; padding: 0 12px; }
  .bar__nav, .bar__opt { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .a-body *, .a-body *::before, .a-body *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
  .rv { opacity: 1; transform: none; }
  .a-link:active, .roster__link:active, .panel__artist:active, .top-logo:active { transform: none; }
  .panel, .panel.is-open { transform: translate(-50%, 0); }
}

/* Test link only: room for the MODO PRUEBA bar (see /r/leave.js). */
.has-pb .a-body { padding-top: var(--pb); --top-r: calc(4.75rem + var(--pb)); }
.has-pb .top-logo { top: calc(var(--pb) + 1.1rem); }
.has-pb .theme-btn { top: calc(var(--pb) + 1.1rem - 5px); }
.has-pb .roster { top: calc(50% + var(--pb) / 2); }
@media (max-width: 959px) {
  .has-pb .a-body { --top-r: calc(3.4rem + var(--pb)); }
  .has-pb .top-logo { top: calc(var(--pb) + 0.7rem); }
  .has-pb .theme-btn { top: calc(var(--pb) + 0.7rem - 7px); }
}

/* Review link only: lift the feedback button above the bar on narrow screens. */
@media (max-width: 720px) {
  :root { --fb-bottom: 66px; }
  /* An open panel fills the bottom of the screen, so the button waits in the top corner. */
  :root:has(.panel.is-open) { --fb-bottom: calc(100svh - 64px); }
}

/* ---------- inner pages: preloader, page fades, reveals ----------
   Set by the head script and the dp-first-frame script every inner page carries (the home has
   its own preloader and /r/leave.js). These replaced base.css and components.css on 13 Nov 2026. */

/* The preloader, first page of a visit and a reload only: direction C's flyer stack, the same as
   the home's (Miguel, 13 Nov 2026: "100% need to bring that back"). The black holds while up to
   five flyers stack in the centre (shell.js), then lifts over 420ms; on a party page that party's
   flyer grows into its spot. Done by 1.8s from the first frame: if the script is late or never
   runs, the black lifts by itself then (the head script also drops is-intro when this ends). */
html.is-intro body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  background: var(--ink);
  animation: intro-curtain 0s linear 1.8s forwards;
}
html.is-intro.is-lift body::before { opacity: 0; transition: opacity 420ms ease-in-out; }
@keyframes intro-curtain { to { opacity: 0; visibility: hidden; } }
.intro-stack { position: fixed; inset: 0; z-index: 3001; pointer-events: none; }
.intro-stack__img {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 180ms ease-in-out, transform 300ms var(--ease-out);
}
.intro-stack__img.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.intro-stack.is-lifting .intro-stack__img:not(.is-grow) { opacity: 0; transition: opacity 260ms ease-in-out; }

/* Moving between pages: everything but the logo and the bar dims out in 90ms and the next page
   fades in over 360ms, evenly. The logo and the bar stay put, the way the old nav did. */
@keyframes page-in { from { opacity: 0; } }
html.is-switch body > :not(.top-logo, .theme-btn, .bar, .panel) { animation: page-in 360ms ease-in-out backwards; }
html.is-leaving body > :not(.top-logo, .theme-btn, .bar, .panel) { opacity: 0; transition: opacity 90ms ease-out; }
/* What a page draws from its data fades in when it lands; after a language switch it shows at once. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-mount] > * { animation: page-in 360ms ease-in-out backwards; }
}
.js [data-mount].is-settled > * { animation: none; }

/* Sections fade up as they arrive (reveal.js), 24px, 16px on phones. If the reveal code has not
   started 3s later (html.reveal-fallback) everything shows. */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.js [data-reveal].is-visible, .reveal-fallback [data-reveal] { opacity: 1; transform: none; }
.js [data-reveal].is-instant { transition: none; }
@media (max-width: 959px) { .js [data-reveal] { transform: translateY(16px); } }

/* The language switch holds a scrambling word on one line (i18n.js). */
.lang-hold { white-space: nowrap; }
.lang-toggle__opt.is-active { color: var(--cream); text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  html.is-intro body::before, .intro-stack { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- the photo viewer (lightbox.js) and video posters (video-embed.js), cream on black ---------- */

html.lightbox-open, html.lightbox-open body { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--ink);
  display: grid; place-items: center;
  opacity: 0; transition: opacity 200ms ease-in-out;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none !important; }
.lightbox__stage { position: relative; margin: 0; width: 100%; height: 100%; display: grid; place-items: center; padding: 4rem 4rem 3rem; box-sizing: border-box; }
.lightbox__img { max-width: calc(100vw - 8rem); max-height: calc(100svh - 7rem); width: auto; height: auto; object-fit: contain; user-select: none; }
.lightbox__meta {
  position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  color: var(--cream-dim); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  pointer-events: none;
}
.lightbox__caption { text-align: right; max-width: 60ch; }
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2;
  background: transparent; border: 0; padding: 0.75rem;
  color: var(--cream); cursor: pointer;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  opacity: 0.7;
  transition: opacity 200ms var(--ease-out), transform 420ms var(--ease-spring);
}
.lightbox__close:hover, .lightbox__nav:hover, .lightbox__close:focus-visible, .lightbox__nav:focus-visible { opacity: 1; outline: 1px solid var(--cream); outline-offset: 4px; }
.lightbox__close:active, .lightbox__nav:active { transition: transform 140ms var(--ease-out); }
.lightbox__close:active { transform: scale(0.95); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav:active { transform: translateY(-50%) scale(0.95); }
.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }
/* One picture: no arrows (the grid display above would otherwise show them past [hidden]). */
.lightbox__nav[hidden] { display: none; }
@media (max-width: 720px) {
  .lightbox__stage { padding: 4rem 0.5rem 4rem; }
  .lightbox__img { max-width: calc(100vw - 1rem); max-height: calc(100svh - 8rem); }
  .lightbox__nav { width: 40px; height: 40px; padding: 0.5rem; }
  .lightbox__meta { left: 1rem; right: 1rem; bottom: 0.75rem; }
}

.video-embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ash); }
.video-embed__poster { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; transition: transform 420ms var(--ease-spring); }
.video-embed__poster:active { transform: scale(0.985); transition: transform 140ms var(--ease-out); }
.video-embed__poster img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 200ms var(--ease-out); }
@media (hover: hover) { .video-embed__poster:hover img { filter: none; } }
.video-embed__poster:focus-visible img, .video-embed__poster:active img { filter: none; }
.video-embed__poster:focus-visible { outline: 2px solid var(--cream); outline-offset: -2px; }
/* The play ring sits in the bottom-left corner, not the middle: the films open on a centred
   title (the Despapayeween aftermovie on the wordmark), which a centred ring covered. */
.video-embed__play {
  position: absolute; left: 14px; bottom: 14px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid #F5E6C8; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #F5E6C8;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
@media (hover: hover) { .video-embed__poster:hover .video-embed__play { background: var(--cream); color: var(--ink); } }
.video-embed__play svg { width: 18px; height: 18px; margin-left: 3px; fill: currentColor; }
.video-embed__frame { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- the ending, shared by every inner page ---------- */
.a-foot { margin-top: 6rem; padding-bottom: 8.5rem; }
.a-foot__line { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin: 0; line-height: 1.8; }
@media (max-width: 959px) {
  .a-foot { text-align: center; padding-bottom: 7rem; }
  .a-foot__line { justify-content: center; }
  .a-foot__line a, .a-foot__line span { padding: 0.85rem 0; }
}