/* ============================================================================
   IN_MOTION — site.css (R-250, 2026-08-28)
   The child of vanmorrison.com (A) and capitolgranvia.com/en (B), rebuilt at code level.
   Every rule below carries its parent row id from MERGE.md / MECHANISMS.md (VM-nn = A, CG-nn = B).
   Values are the parents' measured values, not ours. Fonts: /fonts/fonts.css (OFL, self-hosted).
   ============================================================================ */

/* ---------- 0. Tokens: both palettes, both type systems (MERGE §0) ---------- */
:root {
  /* A · vanmorrison.com (VM-20) */
  --ff-inria: "Inria Serif", serif;
  --ff-oswald: "Oswald", sans-serif;
  --black: #0f0f0f; --near-black: #1a1a1a; --deep-black: #0a0a0a; --charcoal: #212121;
  --white: #fff; --off-white: #fefefe; --grey-light: #ebebeb; --grey-medium: #5a5a5a; --grey-dark: #333; --form-border: #343434;
  --promo-bg: #f79e4c; --promo-text: #0f0f0f;
  /* B · capitolgranvia.com (CG-18) */
  --ff-barlow: "Barlow Condensed", sans-serif;
  --ff-bricolage: "Bricolage Grotesque", sans-serif;
  --ink: #191715; --paper: #fff; --paper-2: #f7f7f7; --grey: #6f6f6f; --accent: #dc2600; --chip: rgba(0,0,0,.55); /* B's #808080 / #ff2c00 / rgba(0,0,0,.2) fail WCAG AA (3.95 / 3.74 / 1.61 on white); the nearest passing shades (5.0 / 4.9 / 4.6), MERGE §6 */ --glass: #6565656e;
  /* the fluid widths both parents compute from */
  --fw: min(100vw, 1920px);
}
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* VM-20 + CG-18: both parents */
@media (min-width: 1025px) and (max-height: 712px) and (max-width: 1600px) { html { font-size: 50%; } } /* CG-19 */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0 auto; position: relative; min-height: 100vh; text-rendering: optimizeSpeed; background-color: var(--black); color: var(--near-black);
  font-family: var(--ff-inria); font-size: 1.6rem; font-weight: 300; line-height: 1.8; overflow-x: hidden; cursor: default; } /* VM-20 (body bg #0F0F0F on the home page) */
@media (min-width: 768px) { body { font-size: 1.8rem; } }
body.eff-init_trans *, body.eff-init_trans *::before, body.eff-init_trans *::after { transition: none !important; } /* CG-01: the first-paint guard */
html.over-hidden, html.site-splash-locked { overflow: hidden; } /* CG-06 / VM-01 */
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 20px; }
h1, h2, h3 { margin: 0; }
[class^="mdl-"] :is(h1, h2, h3, h4) { font-size: inherit; font-weight: inherit; line-height: inherit; } /* B's heading reset, scoped to B modules: the module's header carries the type, not the UA h2 default */
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; flex-shrink: 0; } /* images/icons.svg: stroke 1.75 on a 24px grid, no fills */
.icon-sm { width: 16px; height: 16px; }
input, select, textarea { font: inherit; }
.mdl-footer .m-check input, .dob input { font-size: 16px; } /* the honeypot and B's checkbox inherited the UA 13.3 px: iOS zooms any control under 16 px */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--white); color: var(--black); padding: 12px 18px; font-family: var(--ff-oswald); text-transform: uppercase; }
.skip-link:focus { left: 16px; top: 16px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }
.fouc { animation: fouc-fallback 0s 2.5s forwards; opacity: 0; } /* VM-23: content shows after 2.5 s if JS never runs */
html.js .fouc { animation: none; opacity: 1; }
@keyframes fouc-fallback { to { opacity: 1; } }

/* ---------- A · buttons (VM-11) ---------- */
.button { align-items: center; border: 2px solid transparent; border-radius: 0; cursor: pointer; display: inline-flex; font-family: var(--ff-oswald); font-size: 16px; font-weight: 700; gap: 8px; justify-content: center; line-height: 1.1; min-height: 44px; padding: 10px 22px 12px; text-decoration: none; text-transform: uppercase; transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease; }
@media (min-width: 768px) { .button { font-size: 17px; min-height: 48px; padding: 11px 24px 12px; } }
@media (min-width: 1024px) { .button { font-size: max(17px, calc(16.515px + .1294vw)); min-height: max(54px, min(calc(47.143px + .6696vw), 60px)); padding: max(12px, min(calc(8.571px + .3348vw), 15px)) 26px max(13px, min(calc(9.571px + .3348vw), 16px)); } }
.button--solid { background-color: var(--black); border-color: var(--black); color: var(--white); }
.button--solid:hover, .button--solid:focus-visible { background-color: var(--white); border-color: var(--black); color: var(--black); opacity: 1; }
.button--disabled { opacity: .4; pointer-events: none; }
.button--black { background-color: transparent; border-color: var(--black); color: var(--black); }
.button--black:hover, .button--black:focus-visible { background-color: var(--black); color: var(--white); }
.button--white { background-color: transparent; border-color: var(--off-white); color: var(--off-white); }
.button--white:hover, .button--white:focus-visible { background-color: var(--off-white); color: var(--black); }
.button--text { background-color: transparent; border-color: transparent; color: currentColor; min-height: 0; padding-left: max(8px, .625vw); padding-right: max(8px, .625vw); text-decoration: underline; text-decoration-thickness: 9%; text-underline-offset: .01em; }

/* ---------- B · pills and arrow links (CG-07 / CG-08) ---------- */
.m-button, .m-buy-button, .m-submit, .m-info-button { display: inline-flex; align-items: center; justify-content: flex-start; cursor: pointer; height: 4.8rem; position: relative; border-radius: 1.9rem; box-sizing: border-box; padding: 0 2.4rem 0 6rem; font: 400 1.6rem/1.92rem var(--ff-bricolage); transition: .3s ease; color: #fff; background-color: var(--accent); text-decoration: none; white-space: nowrap; border: 0; }
.m-info-button { background-color: transparent; border: .2rem solid #fff; }
.m-info-button.v-dark { color: var(--ink); border-color: var(--ink); }
.m-info-button.v-dark svg * { stroke: var(--ink); }
.m-button svg, .m-buy-button svg, .m-submit svg, .m-info-button svg { flex: none; width: 2.4rem; height: auto; position: absolute; top: 50%; transform: translateY(-50%); transition: .3s ease; }
.m-button svg:not(.v-hover), .m-buy-button svg:not(.v-hover), .m-submit svg:not(.v-hover), .m-info-button svg:not(.v-hover) { left: 2.4rem; }
.m-button svg.v-hover, .m-buy-button svg.v-hover, .m-submit svg.v-hover, .m-info-button svg.v-hover { right: 0; opacity: 0; }
.m-button svg > *, .m-buy-button svg > *, .m-submit svg > *, .m-info-button svg > * { stroke: #fff; fill: none; transition: .3s ease; }
@media (min-width: 1366px) {
  .m-button:hover, .m-buy-button:hover, .m-submit:hover, .m-info-button:hover { padding: 0 6rem 0 2.4rem; }
  .m-button:hover svg:not(.v-hover), .m-buy-button:hover svg:not(.v-hover), .m-submit:hover svg:not(.v-hover), .m-info-button:hover svg:not(.v-hover) { left: 0; opacity: 0; }
  .m-button:hover svg.v-hover, .m-buy-button:hover svg.v-hover, .m-submit:hover svg.v-hover, .m-info-button:hover svg.v-hover { right: 2.4rem; opacity: 1; }
}
@media (max-width: 1365px) {
  .m-button, .m-buy-button, .m-submit, .m-info-button { padding: 0 1.6rem 0 5.2rem; }
  .m-button svg:not(.v-hover), .m-buy-button svg:not(.v-hover), .m-submit svg:not(.v-hover), .m-info-button svg:not(.v-hover) { left: 1.6rem; }
  .m-button svg.v-hover, .m-buy-button svg.v-hover, .m-submit svg.v-hover, .m-info-button svg.v-hover { display: none; }
}
.m-link { display: inline-flex; align-items: center; justify-content: flex-start; cursor: pointer; position: relative; box-sizing: border-box; padding: 0 0 0 3.6rem; font: 400 1.4rem/1.68rem var(--ff-bricolage); transition: .3s ease; text-decoration: none; color: inherit; }
.m-link svg { flex: none; width: 2.4rem; height: auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: .3s ease; }
.m-link svg > * { stroke: currentColor; fill: none; transition: .3s ease; }
@media (min-width: 1366px) { .m-link:hover { padding: 0 3.6rem 0 0; color: var(--accent); } .m-link:hover svg { left: 100%; transform: translate(-2.4rem, -50%); } }
.m-tag { height: 3.8rem; padding: 0 1.2rem; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; text-align: center; font: 600 1.4rem var(--ff-barlow); letter-spacing: .13rem; color: #fff; background-color: var(--chip); text-transform: uppercase; position: absolute; top: 1.6rem; right: 1.6rem; z-index: 2; }
@media (max-width: 1365px) { .m-tag { top: .8rem; right: .8rem; } }
/* B rolling-span links (CG-04/06/17) */
.m-roll { position: relative; overflow: hidden; display: inline-flex; text-decoration: none; }
.m-roll span { display: flex; align-items: center; transition: .3s ease; }
.m-roll span + span { position: absolute; top: calc(100% - 9px); left: 0; height: calc(100% - 18px); }
.m-roll { padding: 9px 0; margin: -9px 0; overflow: visible; clip-path: inset(9px 0); } /* 44 px hit box; the clip keeps the second span hidden and the roll lands on the same pixel */
@media (min-width: 1366px) { .m-roll:hover span { transform: translateY(-100%); } }

/* ---------- A · the header bar (VM-05) with B's items merged in (MERGE §0 ⚑) ---------- */
.site-header { left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 1000; }
.site-header__bar { --header-button-text: var(--off-white); --header-button-border: var(--off-white); --header-button-hover-text: var(--black); --header-button-hover-bg: var(--off-white);
  --site-header-fluid-width: min(100vw, 1920px); --site-header-nav-size: max(1rem, calc(var(--site-header-fluid-width) * .0065 + .757rem));
  align-items: center; color: var(--white); display: flex; justify-content: center; padding: 20px; pointer-events: all; position: relative; transition: color .5s; }
@media (min-width: 1920px) { .site-header__bar { --site-header-nav-fluid-width: max(1920px, min(100vw, 2560px)); --site-header-nav-size: calc(24.592px + (var(--site-header-nav-fluid-width) - 1920px) * .00064); } }
@media (min-width: 1024px) { .site-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; padding: max(20px, min(calc(8.57px + var(--site-header-fluid-width) * .0112), 30px)) max(20px, min(calc(-25.71px + var(--site-header-fluid-width) * .0446), 60px)); } }
@media (min-width: 1024px) { .site-header__left { grid-column: 1; } .site-header__right { grid-column: 3; } } /* explicit placement: when A's homepage rule hides the wordmark at 1024 the auto track must collapse, not swallow the right cell */
.site-header__left { align-items: center; display: flex; gap: 2.4rem; }
@media (max-width: 1023px) { .site-header__left { display: none; } } /* the left cell now holds only the desktop link list (R-260) */
.site-header__toggle { all: unset; align-items: center; border-radius: 4px; cursor: pointer; display: flex; flex-shrink: 0; font-size: var(--site-header-nav-size); height: max(44px, 2.75em); justify-content: center; pointer-events: all; transition: opacity .2s ease; width: max(44px, 2.75em); }
.site-header__toggle:hover { opacity: .7; }
.site-header__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.site-header__toggle-icon { --gap: 7px; --line: 2px; display: flex; flex-direction: column; gap: var(--gap); width: 26px; }
.site-header__toggle-icon span { background: currentColor; border-radius: var(--line); display: block; height: var(--line); transform-origin: center; transition: transform .2s cubic-bezier(.215,.61,.355,1), opacity .15s ease, width .2s ease; width: 100%; }
.site-header--nav-open .site-header__toggle-icon span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.site-header--nav-open .site-header__toggle-icon span:nth-child(2) { opacity: 0; }
.site-header--nav-open .site-header__toggle-icon span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.site-header__bar-nav { display: none; }
@media (min-width: 1024px) { .site-header__bar-nav { display: block; } }
.site-header__bar-nav-list { display: flex; gap: 2.4rem; align-items: center; }
.site-header__bar-nav-link { color: inherit; font-family: var(--ff-oswald); font-size: var(--site-header-nav-size); font-weight: 700; line-height: 1.5; text-decoration: none; text-transform: uppercase; transition: opacity .2s ease; }
.site-header__bar-nav-link:hover { opacity: .6; }
.site-header__wordmark { color: inherit; font-family: var(--ff-oswald); font-size: 32px; font-weight: 700; letter-spacing: -.05em; line-height: 1; text-decoration: none; text-transform: uppercase; }
@media (max-width: 1023px) { .site-header__wordmark { font-size: 22px; } }
@media (min-width: 768px) and (max-width: 1023px) { .site-header__wordmark { font-size: 28px; } }
@media (max-width: 1024px) { body.is-homepage .site-header__wordmark { display: none; } } /* VM-05: the hero carries the name */
.site-header__right { display: contents; align-items: center; justify-content: flex-end; gap: 2rem; min-width: 0; } /* ≤1023: contents, so only B's Menu trigger (absolute) survives; ≥1024: A's right cell */
@media (min-width: 1024px) { .site-header__right { display: flex; gap: max(24px, min(calc(17.52px + var(--site-header-fluid-width) * .0065), 30px)); } }
.site-header__stream { display: flex; align-items: center; gap: 1.8rem; }
.site-header__stream a { color: inherit; display: flex; transition: opacity .2s ease; }
.site-header__stream a:hover { opacity: .5; }
.site-header__stream svg { height: 22px; width: 22px; display: block; }
.site-header__subscribe { border: 2px solid var(--header-button-border); color: var(--header-button-text); background: transparent; white-space: nowrap; flex-shrink: 0; }
@media (min-width: 1024px) { .site-header__subscribe { font-size: var(--site-header-nav-size); min-height: max(46px, min(calc(29.99px + var(--site-header-fluid-width) * .0156), 60px)); padding: max(11px, min(calc(7.57px + var(--site-header-fluid-width) * .0033), 14px)) max(20px, min(calc(10.85px + var(--site-header-fluid-width) * .0089), 28px)); } }
.site-header__subscribe:hover { background: var(--header-button-hover-bg); color: var(--header-button-hover-text); border-color: var(--header-button-hover-bg); }
.site-header .m-nav-trigger { cursor: pointer; display: inline-flex; gap: .7rem; align-items: center; font: 400 1.6rem/2.56rem var(--ff-bricolage); color: inherit; flex-shrink: 0; white-space: nowrap; }
.site-header .m-nav-trigger svg { width: 2.4rem; height: auto; }
.site-header .m-nav-trigger svg * { stroke: currentColor; }
@media (max-width: 1023px) { .site-header__toggle { position: absolute; right: 11px; top: 8px; } .site-header__bar { min-height: 40px; } .site-header__right > :not(.site-header__toggle) { display: none; } } /* R-260: the one nav trigger sits top-RIGHT at every width. It used to be A's hamburger on the left and B's Menu on the right; Ramon wants the left one's panel opened from the right, and the other gone. */
/* R-260/R-268: the right cell now holds the stream icons and ONE button, B's red pill, which Ramon keeps
   because the red accent runs through the whole site. A's outlined 'Hold a date' and B's 'Menu' are both
   gone, so the cell no longer overflows at 1366 and the pill shows at every width down to 1024. The pill
   opens the same drawer A's button opened; its href is the no-JS fallback. */

/* ---------- B · the white pill bar that hides on scroll-down (CG-05) ---------- */
.mdl-header { padding: 0; }
.mdl-header .m-menu.v-sticky { width: 162rem; max-width: calc(100% - 8rem); position: fixed; top: 2.8rem; left: 50%; transform: translate(-50%, -150%); padding: 1.2rem 2.5rem; box-sizing: border-box; border-radius: 2.4rem; transition: .3s ease; box-shadow: 0 0 .5rem 0 rgba(0,0,0,.2); color: var(--ink); background: #fff; z-index: 100; }
.mdl-header.v-scroller .m-menu.v-sticky { transform: translate(-50%, 0); }
.mdl-header:not(.v-scroller) .m-menu.v-sticky { visibility: hidden; pointer-events: none; transition: none; } /* B's bar exists only past the hero: never over A's bar at the top of a page */
.mdl-header.v-scroller.v-scroller-down .m-menu.v-sticky { transform: translate(-50%, -112.5px); }
.mdl-header .m-menu .m-content { margin: 0 auto; max-width: 160rem; height: auto; display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; }
.mdl-header .m-menu .m-logo { flex: none; font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 2.8rem; line-height: 1; text-decoration: none; color: inherit; }
.mdl-header .m-menu .m-nav { font-family: var(--ff-oswald); font-weight: 700; font-size: 1.6rem; line-height: 2.56rem; text-transform: uppercase; display: flex; align-items: center; gap: 2.4rem; } /* one nav font on the whole site (R-260 item 11): B's Bricolage links read as a second, competing set */
.mdl-header .m-menu .m-lvl .activo { text-underline-offset: .5rem; text-decoration: underline; }
@media (max-width: 1023px) { .mdl-header .m-menu .m-lvl { display: none; } }
.mdl-header .m-menu .m-nav-trigger { cursor: pointer; display: inline-flex; gap: .7rem; align-items: center; font: 400 1.6rem/2.56rem var(--ff-bricolage); }
.mdl-header .m-menu .m-nav-trigger svg { width: 2.4rem; height: auto; }
.mdl-header .m-menu .m-nav-trigger svg * { stroke: var(--accent); }
@media (max-width: 767px) { .mdl-header .m-menu.v-sticky { top: 0; max-width: 100%; border-radius: 0; padding: 1.6rem 2.3rem; } .mdl-header .m-menu.v-sticky .m-button { display: none; } }

/* ---------- A · nav drawer (VM-06) ---------- */
.site-nav { display: flex; inset: 0; overflow: hidden; pointer-events: all; position: fixed; visibility: hidden; z-index: 999; }
.site-nav__panel { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.site-nav__panel--left { --top: 120px; --bottom: 30px; background: var(--white); color: var(--black); flex: 0 0 100%; padding: var(--top) max(20px, calc(10.291px + 2.589vw)) var(--bottom); position: relative; transform: translateX(-100%); }
@media (max-width: 1023px) { .site-nav__panel--left { --top: max(64px, min(11dvh, 120px)); --bottom: max(12px, min(3dvh, 30px)); } }
@media (min-width: 1024px) { .site-nav__panel--left { flex: 0 0 50%; padding: 90px max(20px, calc(10.291px + 2.589vw)) 6vh; } }
.site-nav__list { text-align: left; }
.site-nav__link { color: var(--black); display: inline-block; font-family: var(--ff-oswald); font-size: max(70px, calc(60.291px + 2.589vw)); font-weight: 700; line-height: 1.05; margin: 0 -6px; padding: 0 6px .08em; position: relative; text-decoration: none; text-transform: uppercase; opacity: 0; transform: translateX(-30px); }
.site-nav__link::after { background-color: currentColor; bottom: 0; content: ""; height: .07em; left: 6px; position: absolute; right: 6px; transform: scaleX(0); transform-origin: left center; transition: transform .2s ease; }
.site-nav__link:hover::after, .site-nav__link:focus-visible::after { transform: scaleX(1); }
.site-nav__stream { display: flex; flex-direction: column; gap: 1rem; margin-top: auto; opacity: 0; transform: translateY(24px); }
.site-nav__stream-label { color: var(--near-black); font-size: max(14px, calc(13.029px + .2589vw)); font-weight: 400; margin: 0; }
.site-nav__stream-icons { align-items: center; display: flex; gap: 1.8rem; }
.site-nav__stream-icon { color: var(--black); display: flex; transition: opacity .2s ease; }
.site-nav__stream-icon svg { display: block; height: 29px; width: auto; }
.site-nav__stream-icon:hover { opacity: .5; }
.site-nav__panel--right { background: var(--deep-black); color: var(--white); display: none; overflow: hidden; position: relative; transform: translateX(100%); }
@media (min-width: 1024px) { .site-nav__panel--right { align-items: center; display: flex; flex: 0 0 50%; justify-content: center; padding: 90px 4vw 6vh; background-image: var(--nav-vault-bg); background-position: 50%; background-size: cover; } }
.site-nav__panel--right::before { background: #0f0f0fcc; content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 0; }
.site-nav__panel--right > * { position: relative; z-index: 1; opacity: 0; }
.site-nav__next { font-family: var(--ff-oswald); text-transform: uppercase; font-size: max(20px, 1.5vw); font-weight: 700; text-align: center; }
.site-nav__next small { display: block; font-family: var(--ff-inria); font-weight: 300; text-transform: none; font-size: 18px; margin-top: 12px; }
.site-nav__close { position: absolute; top: 40px; left: max(20px, calc(10.291px + 2.589vw)); width: 30px; height: 30px; color: var(--black); border-radius: 4px; }
html.no-js .site-nav:target { visibility: visible; } html.no-js .site-nav:target .site-nav__panel--left, html.no-js .site-nav:target .site-nav__link, html.no-js .site-nav:target .site-nav__stream { transform: none; opacity: 1; }

/* ---------- A · subscribe-panel → the booking drawer (VM-07) ---------- */
.subscribe-panel { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.subscribe-panel__backdrop { position: absolute; inset: 0; background: rgba(15,15,15,.6); opacity: 0; transition: opacity .3s; }
.subscribe-panel__drawer { --subscribe-panel-fluid-width: min(100vw, 1920px); position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 560px); background: var(--black); color: var(--white); padding: 90px max(20px, 2.6vw) 40px; overflow-y: auto; transform: translateX(100%); }
.subscribe-panel__close { position: absolute; top: 28px; right: 28px; width: 44px; height: 44px; color: var(--white); }
.subscribe-panel h2 { font-family: var(--ff-oswald); text-transform: uppercase; font-size: 32px; line-height: 1; margin-bottom: 16px; }

/* ---------- B · navigation drawer (CG-06) ---------- */
.mdl-header .m-navigation { position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 100; pointer-events: none; transition: .3s ease; }
.mdl-header .m-navigation.v-selected { opacity: 1; pointer-events: auto; }
.mdl-header .m-navigation .m-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; background-color: rgba(0,0,0,.9); }
.mdl-header .m-navigation .m-navigation-content { position: fixed; top: 0; right: 0; bottom: 0; overflow: auto; box-sizing: border-box; width: 72rem; z-index: 100; border-radius: 0 0 4.8rem 4.8rem; background-color: var(--ink); color: #fff; padding: 12rem 4rem 4rem; }
.mdl-header .m-navigation .m-navigation-header { display: flex; align-items: center; justify-content: space-between; padding: 2.4rem 4rem; position: absolute; top: 0; left: 0; right: 0; }
.mdl-header .m-navigation .m-navigation-header .m-logo { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 2.8rem; text-decoration: none; color: #fff; }
.mdl-header .m-navigation .m-nav { font: 400 1.6rem/2.56rem var(--ff-bricolage); display: flex; align-items: center; gap: 2.4rem; color: #fff; }
.mdl-header .m-navigation .m-lvl { padding: 1.6rem 0; position: relative; }
.mdl-header .m-navigation .m-lvl + .m-lvl { border-top: .1rem solid #fff; }
.mdl-header .m-navigation .m-lvl1 { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 4.3rem; line-height: 3.9rem; position: relative; overflow: hidden; display: inline-block; transition: .3s ease; color: #fff; text-decoration: none; cursor: pointer; background: none; }
.mdl-header .m-navigation .m-lvl1 span { display: inline-block; transition: .3s ease; }
.mdl-header .m-navigation .m-lvl1 span + span { position: absolute; top: 110%; left: 0; }
@media (min-width: 1366px) { .mdl-header .m-navigation .m-lvl1:hover { color: var(--accent); } .mdl-header .m-navigation .m-lvl1:hover span { transform: translateY(-110%); } }
.mdl-header .m-navigation .m-lvl2 { display: none; padding: 1.2rem 0 0; }
.mdl-header .m-navigation .m-lvl.v-open .m-lvl2 { display: block; }
.mdl-header .m-navigation .m-lvl2 a { display: block; font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 2.4rem; line-height: 1.2; color: #fff; text-decoration: none; padding: .6rem 0; }
.mdl-header .m-navigation .m-lvl2 a:hover { color: var(--accent); }
@media (max-width: 767px) { .mdl-header .m-navigation .m-navigation-content { width: 100%; border-radius: 0; padding: 9.5rem 2.3rem 3rem; } .mdl-header .m-navigation .m-lvl1 { font-size: 3.2rem; line-height: 2.9rem; } .mdl-header .m-navigation .m-lvl2 a { font-size: 2rem; } .mdl-header .m-navigation .m-navigation-header { padding: 1.6rem 2.3rem; } }

/* ---------- A · splash (VM-01) ---------- */
.site-splash { align-items: stretch; background: var(--ink); color: #fff; display: none; justify-content: center; inset: 0; overflow-x: hidden; overflow-y: auto; position: fixed; z-index: 1001; }
html.js .site-splash.site-splash--on { display: flex; }
.site-splash__inner { margin: auto; text-align: center; padding: 40px 20px; max-width: 720px; width: 100%; }
.site-splash__album { width: min(60vw, 420px); aspect-ratio: 16/9; overflow: hidden; margin: 0 auto 32px; }
.site-splash__album img { width: 100%; height: 100%; object-fit: cover; }
.site-splash__meta { font-family: var(--ff-oswald); text-transform: uppercase; font-size: max(28px, 3vw); font-weight: 700; line-height: 1; }
.site-splash__meta small { display: block; font-family: var(--ff-inria); font-weight: 300; text-transform: none; font-size: 17.4px; margin-bottom: 10px; }
.site-splash__actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------- HERO: A (VM-01/02/03/04) layered with B (CG-02) — MERGE §0 ⚑ ---------- */
.site-hero-wrap { position: relative; }
.site-hero { align-items: center; background: var(--black); display: flex; height: 100dvh; justify-content: center; min-height: 600px; overflow: hidden; position: relative; width: 100%;
  /* B: */ border-radius: 0 0 4.8rem 4.8rem; padding: 12rem 4rem 4.8rem; color: #fff; }
@media (min-width: 1024px) { .site-hero { min-height: 74rem; } } /* CG-02 */
.site-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: rgba(0,0,0,.2); background-image: linear-gradient(45deg, rgba(0,0,0,.7) 25%, rgba(0,0,0,0) 50%); pointer-events: none; } /* CG-02 veil */
.site-hero__video { background-color: transparent; display: block; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; z-index: 0; }
.site-hero__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* R-268: the still stays in the stack under the video instead of display:none. The video paints
   over it once it has a frame; if it never gets one — codec, a blocked request, a slow phone —
   the hero is the photograph rather than a black box. The video's own black background is what
   used to hide it in that case, so that goes too. */
html.js .site-hero__still { display: block; }
html:not(.js) .mdl-capitol-video .m-bg video, html:not(.js) .concert-vault-featured__video { display: none; } /* JS off: the deferred videos never get a src; the still behind them is the page (motion honesty, law §3) */
@media (prefers-reduced-motion: reduce) { html.js .site-hero__still { display: block; } .site-hero__video { display: none; } }
.site-hero__curtain { background: var(--black); bottom: 0; position: absolute; top: 0; width: 50%; will-change: transform; z-index: 1; display: none; }
html.js .site-hero__curtain { display: block; }
.site-hero__curtain--left { left: 0; } .site-hero__curtain--right { right: 0; }
.site-hero__text-wrap { align-items: center; display: flex; justify-content: center; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; will-change: transform, opacity; z-index: 2; }
@media (max-width: 1024px) { body.is-homepage .site-hero__text-wrap { --off: max(70px, min(8vw, 82px)); top: calc(50% - var(--off)); } }
@media (max-width: 767px) { body.is-homepage .site-hero__text-wrap { top: 21vh; transform: none; } } /* on a phone the name is pinned to the upper third: centred, it collided with B's lower block whenever the subtitle wrapped (measured at 412x780) */
.site-hero__heading { font-family: var(--ff-oswald); font-size: max(5rem, 15.71vw); font-weight: 700; letter-spacing: -.02em; line-height: 1; margin: 0; position: relative; text-align: center; text-transform: uppercase; white-space: nowrap; color: var(--white); }
.site-hero__heading-fill { color: var(--white); display: block; text-align: center; }
.site-hero__heading-outline { color: transparent; -webkit-text-stroke: 1px var(--white); pointer-events: none; align-items: center; bottom: 0; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; }
/* B's lower-left block (CG-02) */
.site-hero .m-content { position: absolute; left: 4rem; right: 4rem; bottom: 4.8rem; z-index: 2; width: auto; }
@media (min-width: 1024px) { .site-hero .m-content { right: auto; max-width: 72rem; } }
.site-hero .m-subtitle { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 4.3rem; line-height: 3.9rem; }
.site-hero .m-subtitle p { margin: 0; }
.site-hero section { font: 300 1.6rem/2.56rem var(--ff-bricolage); }
.site-hero section p { margin: 0; max-width: 72rem; }
.site-hero .m-subtitle + section { margin-top: 1.6rem; }
.site-hero .m-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 2.4rem; width: 100%; margin-top: 2.4rem; }
@media (max-width: 767px) { .site-hero { padding: 12rem 2.3rem 4.8rem; border-radius: 0 0 2.4rem 2.4rem; } .site-hero .m-content { left: 2.3rem; right: 2.3rem; bottom: 166px; } .site-hero .m-subtitle { font-size: 3.2rem; line-height: 2.9rem; } .site-hero .m-buttons { margin-top: 1.6rem; } }
/* A promo card (VM-04) */
.site-hero__promo { align-items: center; display: flex; background: var(--promo-bg); color: var(--promo-text); gap: max(16px, .39vw + 14.55px); padding: max(20px, .52vw + 18.06px); width: 100%; z-index: 3; position: absolute; left: 0; right: 0; bottom: 0; }
@media (min-width: 1024px) { .site-hero__promo { bottom: max(20px, min(calc(-25.71px + 4.46vw), 60px)); left: auto; max-width: max(440px, min(calc(348.57144px + 8.92857vw), 520px)); right: max(20px, min(calc(-25.71px + 4.46vw), 60px)); width: auto; } }
@media (min-width: 1920px) { .site-hero__promo { max-width: max(400px, 13.39vw + 262.85px); } }
.site-hero__promo-img { display: block; flex-shrink: 0; height: max(100px, 1.94vw + 92.7px); object-fit: cover; width: max(100px, 1.94vw + 92.7px); }
.site-hero__promo-text { display: flex; flex-direction: column; gap: 6px; }
.site-hero__promo-eyebrow { color: currentColor; font-family: var(--ff-inria); font-size: max(1.4rem, calc(var(--fw) * .0032 + 1.279rem)); line-height: 1.3; margin: 0; }
.site-hero__promo-title { color: inherit; font-family: var(--ff-oswald); font-size: max(2rem, .52vw + 1.806rem); font-weight: 700; line-height: 1.2; margin: 0; text-transform: uppercase; }
.site-hero__promo-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 2px; }
.site-hero__promo-cta { color: inherit; display: inline-block; font-family: var(--ff-oswald); font-size: max(1.4rem, .32vw + 1.279rem); font-weight: 700; text-decoration: underline; text-decoration-thickness: 9%; text-transform: uppercase; text-underline-offset: 14%; transition: opacity .2s ease; }
.site-hero__promo-cta:hover { opacity: .6; }

/* ---------- A · UPCOMING SHOWS + the ledger (VM-08/09/10) ---------- */
.upcoming-shows { --upcoming-shows-fluid-width: min(100vw, 1920px); background: var(--white); color: var(--black); padding: max(60px, calc(35.728px + var(--upcoming-shows-fluid-width) * .06473)) 0; }
.upcoming-shows__inner { margin: 0 auto; padding: 0 max(20px, calc(var(--upcoming-shows-fluid-width) * .032)); }
.upcoming-shows__title { font-family: var(--ff-oswald); font-size: max(30px, calc(15.437px + var(--upcoming-shows-fluid-width) * .03884)); font-weight: 700; line-height: 1; margin: 0 0 max(30px, calc(var(--upcoming-shows-fluid-width) * .025)); text-align: center; text-transform: uppercase; }
.upcoming-shows__cta { display: flex; margin: max(30px, calc(var(--upcoming-shows-fluid-width) * .025)) auto 0; text-decoration: none; width: fit-content; }
.shows__list { --shows-fluid-width: min(100vw, 1920px); border-top: 1px solid var(--near-black); margin: 0 auto; max-width: 1394px; padding: 0; }
.shows__item { align-items: center; display: grid; grid-template-columns: 70px minmax(320px, max(320px, calc(var(--shows-fluid-width) * .36458))) minmax(180px, max(180px, calc(var(--shows-fluid-width) * .16667))) minmax(162px, 1fr); column-gap: max(20px, calc(10.291px + var(--shows-fluid-width) * .02589)); border-bottom: 1px solid var(--near-black); padding: 42.407px 0; }
@media (min-width: 768px) { .shows__item { column-gap: 24px; } }
@media (min-width: 1024px) { .shows__item { column-gap: 40px; } }
@media (min-width: 1400px) { .shows__item { column-gap: 60px; } }
@media (max-width: 1023px) { .shows__item { column-gap: 10px; grid-template-columns: 80px 1fr; grid-template-rows: auto auto; row-gap: 0; padding: 30.1745px 0; } }
.shows__date { align-items: baseline; color: var(--black); display: flex; flex-shrink: 0; font-family: var(--ff-oswald); font-size: max(30px, calc(17.68px + var(--shows-fluid-width) * .00642)); font-weight: 700; gap: 8px; line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 1023px) { .shows__date { align-items: flex-start; align-self: start; flex-direction: column-reverse; gap: 2px; grid-column: 1; grid-row: 1 / 3; padding-top: 1px; } }
.shows__venue { color: var(--black); font-family: var(--ff-oswald); font-size: max(20px, calc(17.68px + var(--shows-fluid-width) * .00642)); font-weight: 700; line-height: 1.2; margin: 0; text-transform: uppercase; }
.shows__location { font-family: var(--ff-oswald); font-size: max(20px, calc(17.68px + var(--shows-fluid-width) * .00642)); font-weight: 700; line-height: 1.3; margin: 0; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 768px) { .shows__location { min-width: 0; padding-left: 20px; white-space: normal; } }
@media (min-width: 1024px) { .shows__location { white-space: nowrap; } }
@media (max-width: 767px) { .shows__venue { grid-column: 2; grid-row: 1; } .shows__location { grid-column: 2; grid-row: 2; white-space: normal; } .shows__action { display: flex; grid-column: 1 / -1; padding-top: 20px; } }
@media (min-width: 768px) and (max-width: 1023px) { .shows__location { grid-column: 2; grid-row: 2; padding-left: 0; } .shows__action { align-self: center; grid-column: 3; grid-row: 1 / 3; justify-content: flex-end; padding-top: 0; } .shows__item { grid-template-columns: 80px 1fr auto; } }
@media (min-width: 768px) { .shows__action { display: flex; justify-self: end; min-width: 162px; } }
.shows__btn { justify-content: center; white-space: nowrap; width: 100%; }
/* the spliced promo row (VM-10, /live) */
.shows__promo-item { padding: 0; border-bottom: 1px solid var(--near-black); }
.shows__promo { background: var(--promo-bg); color: var(--promo-text); display: flex; align-items: center; gap: 30px; padding: 30px; }
.shows__promo img { width: 135px; height: 135px; object-fit: cover; flex-shrink: 0; }
.shows__promo-eyebrow { font-family: var(--ff-inria); font-size: 18px; line-height: 1.5; margin: 0; }
.shows__promo-title { font-family: var(--ff-oswald); font-size: 30px; line-height: 1.1; text-transform: uppercase; font-weight: 700; margin: 4px 0 14px; }
.shows__promo-actions { display: flex; gap: 12px 20px; flex-wrap: wrap; }
@media (max-width: 767px) { .shows__promo { flex-direction: column; align-items: flex-start; padding: 20px; } }

/* ---------- B · SHOWS section header, chips, toggle, cards, cursor, scrollbar (CG-09/10) ---------- */
.mdl-espectaculos-carteles { background: var(--paper); color: var(--ink); font-family: var(--ff-bricolage); padding: 8rem 4rem; overflow: hidden; }
@media (max-width: 1365px) { .mdl-espectaculos-carteles { padding: 6rem 3rem; } }
@media (max-width: 767px) { .mdl-espectaculos-carteles { padding: 4rem 2.3rem; } }
.mdl-espectaculos-carteles .m-content { margin: 0 auto; max-width: 160rem; position: relative; }
.mdl-espectaculos-carteles .m-header-content + * { margin-top: 4rem; }
.mdl-espectaculos-carteles .m-subtitle { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 4.3rem; line-height: 3.9rem; }
.mdl-espectaculos-carteles .m-subtitle + * { margin-top: .8rem; }
.mdl-espectaculos-carteles .m-header { display: flex; align-items: flex-end; gap: 2.4rem; }
.mdl-espectaculos-carteles .m-title { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 12rem; line-height: 10.8rem; }
.mdl-espectaculos-carteles .m-title h2 { font: inherit; }
.mdl-espectaculos-carteles .m-filters { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; flex-wrap: wrap; margin-top: 2.4rem; }
.mdl-espectaculos-carteles .m-filters nav { display: flex; gap: 2.4rem; }
.mdl-espectaculos-carteles .m-filters nav button { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 2rem; line-height: 1.8rem; position: relative; padding-bottom: .6rem; }
.mdl-espectaculos-carteles .m-filters nav button::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; height: .2rem; background: var(--accent); }
.mdl-espectaculos-carteles .m-filters nav button.v-active { color: var(--accent); } .mdl-espectaculos-carteles .m-filters nav button.v-active::before { opacity: 1; }
.mdl-espectaculos-carteles .m-swicth { display: flex; gap: 1.6rem; }
.mdl-espectaculos-carteles .m-swicth > * { font: 400 1.4rem/2.24rem var(--ff-bricolage); display: flex; align-items: center; gap: 1.2rem; position: relative; cursor: pointer; }
.mdl-espectaculos-carteles .m-swicth > *::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; height: .2rem; background: var(--accent); }
.mdl-espectaculos-carteles .m-swicth > *.v-active { color: var(--accent); } .mdl-espectaculos-carteles .m-swicth > *.v-active::before { opacity: 1; }
.mdl-espectaculos-carteles .m-swicth svg { width: 2.4rem; height: auto; } .mdl-espectaculos-carteles .m-swicth svg * { stroke: currentColor; fill: none; }
@media (min-width: 1366px) { .mdl-espectaculos-carteles .m-swicth > *:hover { color: var(--accent); } .mdl-espectaculos-carteles .m-slide-section { cursor: none; } .mdl-espectaculos-carteles .m-slide-section:hover ~ .m-custom-cursor { opacity: 1; } }
.mdl-espectaculos-carteles .m-sections { display: flex; }
.mdl-espectaculos-carteles .m-sections + * { margin-top: 4rem; }
.mdl-espectaculos-carteles .m-item { width: 31rem; max-width: calc(100% - 2.7rem); }
.mdl-espectaculos-carteles .m-thumbnail { overflow: hidden; position: relative; border-radius: 2rem; background: var(--ink); }
.mdl-espectaculos-carteles .m-thumbnail img { display: block; width: 100%; aspect-ratio: .67518248175182; object-fit: cover; object-position: center; transition: all 3s ease; }
.mdl-espectaculos-carteles .m-thumbnail:hover img { transform: scale(1.026); }
.mdl-espectaculos-carteles .m-thumbnail + * { margin-top: 2.4rem; }
.mdl-espectaculos-carteles .m-info { position: absolute; height: 100%; top: 100%; left: 0; right: 0; padding: 2.5rem 2.4rem 2.4rem; -webkit-backdrop-filter: blur(.8rem); backdrop-filter: blur(.8rem); display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between; box-sizing: border-box; border-radius: 2rem; transition: .3s ease; background-color: var(--glass); color: #fff; z-index: 20; }
@media (min-width: 1366px) { .mdl-espectaculos-carteles .m-thumbnail:hover .m-info, .mdl-espectaculos-carteles .m-thumbnail:focus-within .m-info { top: 0; } }
.mdl-espectaculos-carteles .m-info-title { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 4.3rem; line-height: 3.9rem; }
.mdl-espectaculos-carteles .m-info-content { width: 100%; }
.mdl-espectaculos-carteles .m-info-list { padding: 0; margin: 0; }
.mdl-espectaculos-carteles .m-info-list li { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 2rem; line-height: 1.8rem; display: flex; align-items: center; gap: .8rem; }
.mdl-espectaculos-carteles .m-info-list li + * { margin-top: 1.6rem; }
.mdl-espectaculos-carteles .m-info-list svg { width: 2.4rem; height: auto; } .mdl-espectaculos-carteles .m-info-list svg * { stroke: #fff; fill: none; }
.mdl-espectaculos-carteles .m-info-list + * { margin-top: 2.4rem; }
.mdl-espectaculos-carteles .m-info-actions { display: flex; gap: 2.4rem; flex: none; }
.mdl-espectaculos-carteles .m-info-button.v-square { width: 4.8rem; height: 4.8rem; padding: 0; justify-content: center; border-radius: 1.6rem; }
.mdl-espectaculos-carteles .m-info-button.v-square svg { position: static; transform: none; }
.mdl-espectaculos-carteles .m-item header { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 2.4rem; line-height: 1.1; }
.mdl-espectaculos-carteles .m-item section { font: 300 1.6rem/2.56rem var(--ff-bricolage); margin-top: .6rem; }
.mdl-espectaculos-carteles .m-item footer { margin-top: 1.6rem; display: flex; gap: 1.6rem; align-items: center; }
.mdl-espectaculos-carteles .m-pagination { max-width: 64rem; height: .2rem; margin: 4rem auto 0; background-color: #e2e2e2; position: relative; }
.mdl-espectaculos-carteles .m-pagination > * { background-color: var(--ink); border-radius: 0; }
.mdl-espectaculos-carteles .m-custom-cursor { position: absolute; top: 2rem; left: 2rem; z-index: 10; width: 16rem; aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; -webkit-backdrop-filter: blur(.8rem); pointer-events: none; backdrop-filter: blur(.8rem); background-color: var(--glass); transition: opacity .3s ease; }
.mdl-espectaculos-carteles .m-custom-cursor svg { width: 5.2rem; height: auto; } .mdl-espectaculos-carteles .m-custom-cursor svg * { stroke: #fff; fill: none; }
.mdl-espectaculos-carteles.v-list .m-item { width: 100%; max-width: 100%; }
.mdl-espectaculos-carteles.v-list .m-thumbnail img { aspect-ratio: 2.2529711375212; }
@media (max-width: 1365px) { .mdl-espectaculos-carteles .m-title { font-size: 10.4rem; line-height: 9.4rem; } .mdl-espectaculos-carteles .m-header-content + * { margin-top: 2.4rem; } .mdl-espectaculos-carteles .m-header { flex-direction: column; align-items: flex-start; gap: .8rem; } .mdl-espectaculos-carteles .m-title + * { margin-top: 1.6rem; } .mdl-espectaculos-carteles .m-info { display: none; } .mdl-espectaculos-carteles .m-slide-section { overflow: visible; } .mdl-espectaculos-carteles .m-thumbnail + * { margin-top: 1.2rem; } .mdl-espectaculos-carteles .m-pagination { max-width: 23rem; } .mdl-espectaculos-carteles .m-custom-cursor { display: none; } }
@media (max-width: 1023px) { .mdl-espectaculos-carteles .m-item { width: 70rem; max-width: 100%; } }
@media (max-width: 767px) { .mdl-espectaculos-carteles .m-title { font-size: 6.4rem; line-height: 5.8rem; } .mdl-espectaculos-carteles .m-subtitle { font-size: 3.2rem; line-height: 2.9rem; } .mdl-espectaculos-carteles .m-item { width: 21rem; } .mdl-espectaculos-carteles .m-info-title { font-size: 3.2rem; line-height: 2.9rem; } .mdl-espectaculos-carteles .m-info-list li { font-size: 1.6rem; line-height: 1.44rem; } }
@media (max-width: 393px) { .mdl-espectaculos-carteles .m-title { font-size: 6rem; } }

/* ---------- B · letterboard marquee strips (CG-03/11) ---------- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mdl-marquesina-main { display: flex; overflow: hidden; padding: 0; background-color: #fff; color: var(--ink); } /* B's letterboard peg-hole grid removed at every width (R-260). `background-size: auto 100%` scaled the 24px tile to the 144px strip, so the dots landed beside the type at the size of the marquee's own separators and read as stray punctuation, which is what Ramon saw. Row 36 had already turned it off below 1024 for the same complaint. */
.mdl-marquesina-main .m-maquee-content { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 8rem; line-height: 7.2rem; display: flex; align-items: center; gap: 14rem; flex: none; white-space: nowrap; height: 14.4rem; animation: marquee 50s linear infinite; }
.mdl-marquesina-main .m-maquee-content:hover { animation-play-state: paused; }
.mdl-marquesina-main .m-maquee-content > div { flex: none; display: flex; align-items: center; gap: 14rem; color: var(--ink); }
.mdl-marquesina-main .m-maquee-content a { color: var(--accent); text-decoration: none; }
@media (min-width: 1366px) { .mdl-marquesina-main .m-maquee-content a { transition: .3s ease; } .mdl-marquesina-main .m-maquee-content a:hover { opacity: .7; } }
@media (max-width: 1365px) { .mdl-marquesina-main .m-maquee-content { height: 7.2rem; font-size: 4rem; line-height: 3rem; gap: 10rem; } .mdl-marquesina-main .m-maquee-content > div { gap: 10rem; } }
@media (max-width: 1023px) { .mdl-marquesina-main .m-maquee-content { gap: 7rem; } .mdl-marquesina-main .m-maquee-content > div { gap: 7rem; } }
@media (prefers-reduced-motion: reduce) { .m-maquee-content { animation: none !important; } }

/* ---------- A · THE MUSIC fan (VM-09/13) ---------- */
.the-music { --the-music-fluid-width: min(100vw, 1920px); background: var(--black); color: var(--white); overflow: hidden; padding-bottom: max(60px, calc(35.728px + var(--the-music-fluid-width) * .06972)); padding-top: max(60px, calc(35.728px + var(--the-music-fluid-width) * .06473)); position: relative; }
.the-music__inner { align-items: center; display: flex; flex-direction: column; position: relative; }
.the-music__title { color: var(--white); font-family: var(--ff-oswald); font-size: max(60px, calc(-.679px + var(--the-music-fluid-width) * .16181)); font-weight: 700; line-height: 1; pointer-events: none; position: relative; text-align: center; text-transform: uppercase; user-select: none; width: 100%; z-index: 0; }
.the-music__fan { height: 128px; margin: 0 auto; position: relative; width: 100%; z-index: 1; }
@media (min-width: 641px) { .the-music__fan { height: max(200px, calc(var(--the-music-fluid-width) * .2)); margin-top: max(-60px, calc(var(--the-music-fluid-width) * -.03)); } }
@media (min-width: 1400px) { .the-music__fan { max-width: 1536px; width: 80%; } }
@media (min-width: 1680px) { .the-music__fan { max-width: 1152px; width: 60%; } }
@media (max-width: 768px) { .the-music__fan { margin-top: -34px; } }
@media (max-width: 640px) { .the-music__fan { height: max(198px, 54vw); } }
.the-music__card { --size: max(140px, calc(var(--the-music-fluid-width) * .2625)); border-radius: max(2px, calc(var(--the-music-fluid-width) * .0028)); bottom: 0; box-shadow: 0 4px 34px #000000a6; display: block; left: 50%; margin-left: calc(var(--size) * -.5); overflow: hidden; position: absolute; text-decoration: none; transform-origin: bottom center; width: var(--size); will-change: transform; z-index: var(--z, 3); transform: rotate(var(--r, 0deg)) translateX(var(--x, 0)); }
.the-music__card-img { aspect-ratio: 1 / 1; display: block; height: auto; object-fit: cover; pointer-events: none; width: 100%; }
.the-music__fan--count-5 .the-music__card:nth-child(1) { --size: max(78px, calc(var(--the-music-fluid-width) * .176)); --z: 1; --r: -24deg; --x: -110%; }
.the-music__fan--count-5 .the-music__card:nth-child(2) { --size: max(87px, calc(var(--the-music-fluid-width) * .226)); --z: 3; --r: -8deg; --x: -55%; }
.the-music__fan--count-5 .the-music__card:nth-child(3) { --z: 5; --r: 0deg; --x: 0; }
.the-music__fan--count-5 .the-music__card:nth-child(4) { --size: max(87px, calc(var(--the-music-fluid-width) * .226)); --z: 4; --r: 8deg; --x: 55%; }
.the-music__fan--count-5 .the-music__card:nth-child(5) { --size: max(78px, calc(var(--the-music-fluid-width) * .176)); --z: 2; --r: 24deg; --x: 110%; }
.the-music__cta { display: none; }
@media (max-width: 768px) { .the-music__cta { display: inline-flex; margin: 28px auto 0; text-decoration: none; } }

/* ---------- B · sticky video chapter (CG-12) ---------- */
.mdl-capitol-video { position: relative; padding-top: 100dvh; padding-bottom: 0; color: #fff; background: var(--ink); font-family: var(--ff-bricolage); }
.mdl-capitol-video .m-sticky-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.mdl-capitol-video .m-bg { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.mdl-capitol-video .m-bg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: rgba(0,0,0,.2); }
.mdl-capitol-video .m-bg video, .mdl-capitol-video .m-bg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mdl-capitol-video .m-button { position: absolute; right: 4rem; bottom: 4rem; display: flex; align-items: center; font: 1.6rem var(--ff-bricolage); gap: 1.6rem; color: #fff; z-index: 2; background: none; padding: 0; height: auto; border-radius: 0; }
@media (min-width: 1366px) { .mdl-capitol-video .m-button { transition: .3s ease; } .mdl-capitol-video .m-button:hover { opacity: .7; padding: 0; } }
.mdl-capitol-video .m-button-icon { width: 5.6rem; height: 5.6rem; display: flex; align-items: center; justify-content: center; border-radius: 2.4rem; background-color: var(--accent); }
.mdl-capitol-video .m-button-icon svg { width: 2.4rem; height: auto; position: static; transform: none; } .mdl-capitol-video .m-button-icon svg * { fill: #fff; stroke: transparent; }
.mdl-capitol-video .m-item { min-height: 100dvh; padding-bottom: 4rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative; }
.mdl-capitol-video article { margin: 0 auto; max-width: 132.8rem; width: 100%; z-index: 1; position: relative; padding: 0 4rem; }
.mdl-capitol-video article > * { width: 85rem; max-width: 100%; }
.mdl-capitol-video header { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 6.4rem; line-height: 5.8rem; }
.mdl-capitol-video header + * { margin-top: 2.4rem; }
.mdl-capitol-video .s_see_more-trigger span:last-of-type { display: none; } .mdl-capitol-video .s_see_more-trigger.open span:first-of-type { display: none; } .mdl-capitol-video .s_see_more-trigger.open span:last-of-type { display: inline; } /* CG CSS-KEY 431-435 */
.mdl-capitol-video .m-section { font: 300 2.1rem/3.4rem var(--ff-bricolage); }
.mdl-capitol-video .m-section p { margin: 0 0 2rem; }
.mdl-capitol-video .s_see_more-content.v-clamped > :not(:first-child) { display: none; }
.mdl-capitol-video .m-section footer { display: inline-flex; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; padding: 0 0 0 3.6rem; font: 700 1.4rem/1.68rem var(--ff-bricolage); transition: .3s ease; margin-top: 2rem; }
.mdl-capitol-video .m-section footer svg { flex: none; width: 2.4rem; height: auto; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: .3s ease; } .mdl-capitol-video .m-section footer svg * { stroke: currentColor; fill: none; }
@media (min-width: 1366px) { .mdl-capitol-video .m-section footer:hover { padding: 0 3.6rem 0 0; color: var(--accent); } .mdl-capitol-video .m-section footer:hover svg { left: 100%; transform: translate(-2.4rem, -50%); } }
@media (max-width: 1365px) { .mdl-capitol-video header { font-size: 6rem; line-height: 5.4rem; } .mdl-capitol-video article { padding: 0 22rem; } .mdl-capitol-video .m-button { right: 5.6rem; bottom: 4.8rem; } }
@media (max-width: 1023px) { .mdl-capitol-video .m-section { font-size: 1.6rem; line-height: 2.56rem; } .mdl-capitol-video article { padding: 0 5rem 0 17rem; } .mdl-capitol-video .m-button { right: 3rem; bottom: 2.4rem; } }
@media (max-width: 767px) { .mdl-capitol-video header { font-size: 4rem; line-height: 3.6rem; } .mdl-capitol-video article { padding: 0 2.4rem; } }

/* ---------- A · CONCERT VAULT → WATCH (VM-16) ---------- */
.concert-vault-featured { background: var(--black); color: var(--white); overflow: hidden; padding: 160px 0; position: relative; }
@media (max-width: 1023px) { .concert-vault-featured { padding: 86px 0 100px; } }
@media (max-width: 767px) { .concert-vault-featured { padding: 58px 0 64px; } }
.concert-vault-featured__background { position: absolute; inset: 0; z-index: 0; }
.concert-vault-featured__background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,15,.55), rgba(15,15,15,.35) 40%, rgba(15,15,15,.85)); }
.concert-vault-featured__video, .concert-vault-featured__background img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.concert-vault-featured__inner { position: relative; z-index: 1; margin: 0 auto; padding: 0 max(20px, 3.2vw); max-width: 1440px; display: flex; flex-direction: column; align-items: center; }
.concert-vault-featured__header { max-width: 980px; text-align: center; }
.concert-vault-featured__eyebrow { font-family: var(--ff-oswald); font-size: 18px; font-weight: 700; line-height: 1.1; text-transform: uppercase; margin: 0 0 30px; }
.concert-vault-featured__title { font-family: var(--ff-oswald); font-size: max(60px, calc(min(100vw, 1920px) * .1146)); font-weight: 700; line-height: .9; text-transform: uppercase; margin: 0 0 32px; }
@media (max-width: 767px) { .concert-vault-featured__title { font-size: 60px; line-height: 1; } .concert-vault-featured__eyebrow { font-size: 16px; } }
.concert-vault-featured__intro { font-family: var(--ff-inria); font-size: 18px; font-weight: 400; line-height: 1.35; max-width: 760px; margin: 0 auto 60px; }
.concert-vault-featured__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; width: 100%; max-width: 1182px; }
.concert-vault-listing__card { background: transparent; display: grid; filter: drop-shadow(0 0 2px #505050); grid-template-rows: auto 1fr auto; min-width: 0; position: relative; }
.concert-vault-listing__media { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #050505; }
.concert-vault-listing__image, .concert-vault-listing__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease, transform .35s ease; }
.concert-vault-listing__video { opacity: 0; }
.concert-vault-listing__card:hover .concert-vault-listing__media img { transform: scale(1.035); }
.concert-vault-listing__card.is-video-playing .concert-vault-listing__image { opacity: 0; }
.concert-vault-listing__card.is-video-playing .concert-vault-listing__video { opacity: 1; }
.concert-vault-listing__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; }
.concert-vault-listing__play circle { fill: #0f0f0f; fill-opacity: .6; stroke: #fff; stroke-width: 2; transition: fill .2s, fill-opacity .2s; }
.concert-vault-listing__play path { fill: #fff; transition: fill .2s; }
.concert-vault-listing__card:hover .concert-vault-listing__play circle { fill: var(--white); fill-opacity: 1; }
.concert-vault-listing__card:hover .concert-vault-listing__play path { fill: var(--black); }
.concert-vault-listing__content { background: #050505; padding: 32px 32px 24px; }
.concert-vault-listing__eyebrow { display: inline-block; font-family: var(--ff-oswald); font-size: 13px; font-weight: 700; line-height: 1; text-transform: uppercase; padding: 6px 6px 7px; border: 1px solid var(--white); margin: 0 0 20px; }
.concert-vault-listing__title { font-family: var(--ff-oswald); font-size: 40px; font-weight: 700; line-height: 1.1; text-transform: uppercase; margin: 0 0 12px; }
.concert-vault-listing__meta { font-family: var(--ff-inria); font-size: 18px; line-height: 1.25; margin: 0; }
.concert-vault-listing__action { background: #050505; padding: 0 32px 32px; }
.concert-vault-listing__button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-family: var(--ff-oswald); font-size: 18px; font-weight: 700; line-height: 1.1; text-transform: uppercase; text-decoration: none; color: var(--black); background: var(--white); border: 2px solid transparent; padding: 18px 22px; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.concert-vault-listing__card:hover .concert-vault-listing__button, .concert-vault-listing__button:hover, .concert-vault-listing__button:focus-visible { background: var(--black); border-color: var(--white); color: var(--white); }
.concert-vault-featured__button { margin-top: 60px; font-size: 20px; padding: 15px 24px 16px; }
@media (max-width: 767px) { .concert-vault-listing__title { font-size: 20px; } .concert-vault-listing__eyebrow { font-size: 11px; } .concert-vault-listing__meta { font-size: 16px; } .concert-vault-listing__content { padding: 24px 20px 16px; } .concert-vault-listing__action { padding: 0 20px 20px; } .concert-vault-listing__button { padding: 15px 24px; } }

/* ---------- B · services tiles (CG-13) ---------- */
.mdl-marcaladiferencia { background: var(--paper); color: var(--ink); font-family: var(--ff-bricolage); padding: 8rem 4rem; position: relative; }
.mdl-marcaladiferencia .m-content { max-width: 160rem; margin: 0 auto; position: relative; }
.mdl-marcaladiferencia .m-header h2 { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 12rem; line-height: 10.8rem; }
.mdl-marcaladiferencia .m-header + * { margin-top: 4rem; }
/* R-260 · the sideways rail. The carousel cut its fourth card off the right edge with no sign that
   anything was there; the rail is driven by page scroll instead (js: nightsRail), and where that
   cannot run — no GSAP, reduced motion, or a phone — it degrades to a normal touch-scrollable row
   with snap points, which is the same gesture people already use. */
.mdl-marcaladiferencia .m-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; flex-wrap: wrap; }
.mdl-marcaladiferencia .m-header-lede { max-width: 62rem; font: 300 1.7rem/2.72rem var(--ff-bricolage); color: var(--ink); }
.mdl-marcaladiferencia .m-header-lede p { margin: 0; }
.mdl-marcaladiferencia .m-header-hint { margin-top: 1.6rem !important; display: flex; align-items: center; gap: .8rem; color: var(--grey); font-size: 1.4rem; }
.mdl-marcaladiferencia .m-header-hint svg { width: 1.8rem; height: auto; }
.mdl-marcaladiferencia .nights-track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -4rem; padding: 0 4rem; }
.mdl-marcaladiferencia .nights-track::-webkit-scrollbar { display: none; }
.mdl-marcaladiferencia .nights-rail { display: flex; gap: 2.4rem; width: max-content; will-change: transform; }
.mdl-marcaladiferencia .nights-rail > .m-item { scroll-snap-align: center; }
/* Pinned mode. The section is held for exactly as long as the rail has left to travel, so it has to
   fit the viewport once: a full-height flex column, the cards sized to whatever is left after the
   heading and the lede, and enough head-room that B's sticky pill bar never lands on the text. */
.mdl-marcaladiferencia.v-railed { height: 100vh; padding-top: 13rem; padding-bottom: 4rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.mdl-marcaladiferencia.v-railed .m-content { display: flex; flex-direction: column; gap: 2.8rem; width: 100%; height: 100%; min-height: 0; }
.mdl-marcaladiferencia.v-railed .m-header + * { margin-top: 0; }
.mdl-marcaladiferencia.v-railed .m-header { flex: none; align-items: flex-end; gap: 3.2rem 6rem; }
.mdl-marcaladiferencia.v-railed .m-header h2 { font-size: 7.2rem; line-height: 6.5rem; }
.mdl-marcaladiferencia.v-railed .m-header-lede { max-width: 56rem; font-size: 1.5rem; line-height: 2.4rem; }
/* the cards take exactly what the heading leaves, so nothing is cut at any window height */
.mdl-marcaladiferencia.v-railed .nights-track { overflow: hidden; scroll-snap-type: none; flex: 1 1 auto; min-height: 0; }
.mdl-marcaladiferencia.v-railed .nights-rail { height: 100%; }
.mdl-marcaladiferencia.v-railed .m-item { height: 100%; width: clamp(28rem, 26vw, 42rem); }
.mdl-marcaladiferencia .m-item { width: 42rem; height: 75.2rem; position: relative; border-radius: 2rem; overflow: hidden; display: flex; align-items: flex-end; color: #fff; background: var(--ink); text-decoration: none; }
.mdl-marcaladiferencia .m-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: all 3s ease; }
.mdl-marcaladiferencia .m-item:hover img { transform: scale(1.026); }
.mdl-marcaladiferencia .m-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 60%); }
.mdl-marcaladiferencia .m-item article { position: relative; padding: 4rem 3.2rem; width: 100%; }
.mdl-marcaladiferencia .m-item header { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 6.4rem; line-height: 5.8rem; }
.mdl-marcaladiferencia .m-item section { font: 300 1.6rem/2.56rem var(--ff-bricolage); margin-top: 1.6rem; }
.mdl-marcaladiferencia .m-item section p { margin: 0; }
.mdl-marcaladiferencia .m-item .m-link { margin-top: 2rem; color: #fff; }
.mdl-marcaladiferencia .m-pagination { max-width: 64rem; height: .2rem; margin: 4rem auto 0; background-color: #e2e2e2; position: relative; }
.mdl-marcaladiferencia .m-pagination > * { background-color: var(--ink); border-radius: 0; }
@media (max-width: 1365px) { .mdl-marcaladiferencia .nights-track { margin: 0 -3rem; padding: 0 3rem; } .mdl-marcaladiferencia { padding: 6rem 3rem; } .mdl-marcaladiferencia .m-header h2 { font-size: 10.4rem; line-height: 9.4rem; } .mdl-marcaladiferencia .m-item { height: 60rem; width: 38rem; } }
@media (max-width: 767px) { .mdl-marcaladiferencia .nights-track { margin: 0 -2.3rem; padding: 0 2.3rem; } .mdl-marcaladiferencia .m-header { display: block; } .mdl-marcaladiferencia .m-header-lede { margin-top: 2.4rem; font-size: 1.5rem; line-height: 2.4rem; } .mdl-marcaladiferencia { padding: 4rem 2.3rem; } .mdl-marcaladiferencia .m-header h2 { font-size: 6.4rem; line-height: 5.8rem; } .mdl-marcaladiferencia .m-item { width: 28.8rem; height: 48rem; } .mdl-marcaladiferencia .m-item header { font-size: 4rem; line-height: 3.6rem; } .mdl-marcaladiferencia .m-item section { font-size: 1.4rem; line-height: 2.24rem; } }

/* ---------- A · LATEST NEWS (VM-14) ---------- */
.latest-news { --latest-news-fluid-width: 100vw; background: var(--white); color: var(--black); padding: max(72px, min(calc(var(--latest-news-fluid-width) * .08333), 180px)) max(20px, 3.2vw); }
.latest-news__header { text-align: center; margin-bottom: max(30px, 2.5vw); }
.latest-news__title { font-family: var(--ff-oswald); font-size: max(60px, calc(min(100vw, 1920px) * .1458)); font-weight: 700; line-height: .9; text-transform: uppercase; }
.latest-news__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(24px, min(calc(var(--latest-news-fluid-width) * .02604), 60px)); margin: 0 auto; max-width: min(100%, 1390px); }
.latest-news__item { min-width: 0; }
.latest-news__link { color: inherit; display: block; text-decoration: none; }
.latest-news__image-wrap { overflow: hidden; aspect-ratio: 3 / 2; background: var(--grey-light); }
.latest-news__image { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.latest-news__link:hover .latest-news__image { transform: scale(1.035); }
.latest-news__body { margin-top: max(16px, min(calc(var(--latest-news-fluid-width) * .01042), 24px)); }
.latest-news__date { font-family: var(--ff-inria); font-size: 16px; color: var(--grey-medium); margin: 0 0 8px; }
.latest-news__item-title { color: inherit; font-family: var(--ff-oswald); font-size: max(32px, min(calc(32px + (min(max(100vw, 1400px), 1920px) - 1400px) * .01923), 42px)); font-weight: 700; line-height: 1.2; margin: 0; text-decoration-thickness: 8%; text-transform: uppercase; text-underline-offset: .12em; display: inline; }
.latest-news__link:hover .latest-news__item-title { text-decoration: underline; }
.latest-news__item-title svg { width: .6em; height: .6em; margin-left: .2em; transition: transform .2s ease; vertical-align: baseline; }
.latest-news__link:hover .latest-news__item-title svg { transform: translate(3px, -3px); }
@media (max-width: 767px) { .latest-news__grid { gap: 20px; grid-template-columns: 1fr; } .latest-news__body { margin-top: 10px; } .latest-news__item-title { font-size: max(20px, min(5.333vw, 32px)); } .latest-news__title { font-size: 60px; } }

/* ---------- A · ORANGEFIELD RECORDS → THE SONGS (VM-17) ---------- */
.the-songs { --fwv: min(100vw, 1920px); background: var(--white); color: var(--black); overflow: hidden; position: relative; padding: max(60px, calc(35.728px + var(--fwv) * .06473)) 0 0; }
.the-songs__inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 max(20px, 3.2vw); }
.the-songs__logo { font-family: var(--ff-oswald); font-weight: 700; text-transform: uppercase; font-size: 32px; letter-spacing: -.05em; line-height: 1; }
.the-songs__title { font-family: var(--ff-oswald); font-size: max(58.5px, calc(var(--fwv) * .07336)); font-weight: 700; letter-spacing: -.03em; line-height: .88; text-transform: uppercase; margin: 32px 0 30px; }
.the-songs__intro { font-family: var(--ff-inria); font-size: 16px; line-height: 1.45; max-width: 456px; margin: 0 auto 30px; }
.the-songs__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.the-songs__marquee { overflow: hidden; margin-top: max(40px, 3vw); padding: 24px 0; border-top: 1px solid var(--near-black); border-bottom: 1px solid var(--near-black); }
.the-songs__marquee-track { --orangefield-marquee-duration: 72s; align-items: center; animation: orangefield-marquee var(--orangefield-marquee-duration) linear infinite; display: flex; width: max-content; will-change: transform; }
.the-songs__marquee-track span { font-family: var(--ff-oswald); font-weight: 700; text-transform: uppercase; font-size: max(28px, 2.6vw); line-height: 1; white-space: nowrap; padding: 0 .55em; }
.the-songs__marquee-track span::after { content: "·"; padding-left: 1.1em; opacity: .4; }
@keyframes orangefield-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .the-songs__marquee-track { animation: none; } }
.the-songs__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(24px, 3vw); max-width: 1390px; margin: 0 auto; padding: max(40px, 3vw) max(20px, 3.2vw) max(60px, calc(35.728px + var(--fwv) * .06972)); text-align: left; }
.the-songs__lists h3 { font-family: var(--ff-oswald); font-weight: 700; text-transform: uppercase; font-size: max(24px, 1.8vw); line-height: 1; margin-bottom: 16px; }
.the-songs__lists h3 small { font-family: var(--ff-inria); font-weight: 300; text-transform: none; font-size: 16px; margin-left: 10px; color: var(--grey-medium); }
.the-songs__lists li { font-family: var(--ff-inria); font-size: 18px; line-height: 1.8; border-bottom: 1px solid var(--grey-light); }
.the-songs__lists li .artist { font-family: var(--ff-oswald); font-weight: 700; text-transform: uppercase; font-size: 15px; margin-right: 8px; }
.the-songs__note { font-family: var(--ff-inria); font-size: 16px; color: var(--grey-medium); margin: 0 0 16px; }
@media (max-width: 767px) { .the-songs__lists { grid-template-columns: 1fr; } .the-songs__title { font-size: 58.5px; } }

/* ---------- B · Instagram band (CG-11) ---------- */
.mdl-instagram { background: var(--paper); color: var(--ink); padding: 8rem 4rem; position: relative; font-family: var(--ff-bricolage); }
.mdl-instagram .m-content { max-width: 160rem; margin: 0 auto; position: relative; }
.mdl-instagram .m-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem; }
.mdl-instagram .m-gallery a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 1.2rem; background: var(--ink); }
.mdl-instagram .m-gallery img { width: 100%; height: 100%; object-fit: cover; transition: all 3s ease; }
.mdl-instagram .m-gallery a:hover img { transform: scale(1.026); }
.mdl-instagram .m-marquesina-section { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); overflow: hidden; pointer-events: none; }
.mdl-instagram .m-maquee-content { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 12rem; line-height: 10.8rem; display: flex; align-items: center; gap: 4rem; flex: none; white-space: nowrap; animation: marquee 50s linear infinite; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.mdl-instagram .m-maquee-content.v-reverse { animation-direction: reverse; }
.mdl-instagram .m-maquee-content > div { display: flex; gap: 4rem; }
.mdl-instagram .m-link { margin-top: 2.4rem; }
@media (max-width: 1365px) { .mdl-instagram { padding: 6rem 3rem; } .mdl-instagram .m-gallery { grid-template-columns: repeat(4, 1fr); } .mdl-instagram .m-maquee-content { font-size: 8rem; line-height: 7.2rem; } }
@media (max-width: 767px) { .mdl-instagram { padding: 4rem 2.3rem; } .mdl-instagram .m-gallery { grid-template-columns: repeat(3, 1fr); gap: .8rem; } .mdl-instagram .m-maquee-content { font-size: 4.8rem; line-height: 4.3rem; } }

/* ---------- A · JOIN OUR COMMUNITY → HOLD A DATE (VM-15/18) ---------- */
.site-footer__prefooter { --footer-fluid-width: min(100vw, 1920px); --footer-gutter: max(20px, calc(var(--footer-fluid-width) * .032)); background: var(--black); color: var(--white); overflow: hidden; padding: 51.397px 0 60px; position: relative; }
@media (min-width: 1024px) { .site-footer__prefooter { padding: max(50px, calc(15.049px + var(--footer-fluid-width) * .0932)) 0; } }
.site-footer__prefooter-inner { margin: 0 auto; max-width: 675px; padding: 0 var(--footer-gutter); position: relative; z-index: 1; text-align: center; }
.site-footer__prefooter header h2 { font-family: var(--ff-oswald); font-size: max(30.33px, calc(var(--footer-fluid-width) * .02783)); font-weight: 700; line-height: 1; text-transform: uppercase; margin: 0 0 10px; }
.site-footer__prefooter header p { font-family: var(--ff-inria); font-size: max(16px, calc(var(--footer-fluid-width) * .0009 + 1.4rem)); line-height: 1.5; margin: 0 0 26px; }
/* R-260 · Ramon's own frame behind "Hold a date": an empty mic in a beam with the smoke still up,
   which is the offer stated as a picture. The four floating stills it replaces were band frames
   reused at 12% width, and they never reached opacity above 0 on a phone at all. The plate is the
   image he sent with the left edge cut at x=700 of the master — that is where the warm light-trail
   smears over the raised hands sat ("the streaks", R-260); nothing is painted in. */
.site-footer__prefooter-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.site-footer__prefooter-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; opacity: .68; }
.site-footer__prefooter-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 55%, rgba(15,15,15,.28) 0%, rgba(15,15,15,.74) 62%, rgba(15,15,15,.93) 100%); }
@media (max-width: 767px) { .site-footer__prefooter-bg img { opacity: .5; object-position: 62% 45%; } }
.freeform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 767px) { .freeform-row { grid-template-columns: 1fr; } }
.freeform-column { text-align: left; }
.freeform-label { display: block; font-family: var(--ff-inria); font-size: 16px; color: var(--white); margin-bottom: 6px; }
.freeform-input, .freeform-select, .freeform-textarea { width: 100%; font-family: var(--ff-inria); font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--grey-medium); background: var(--white); border: 2px solid var(--form-border); border-radius: 0; padding: 16px 24px; min-height: 63px; }
.freeform-textarea { min-height: 120px; resize: vertical; }
.freeform-input:focus, .freeform-select:focus, .freeform-textarea:focus { outline: 2px solid var(--white); outline-offset: 2px; color: var(--black); }
.freeform-button-container { margin-top: 12px; }
.freeform-button-container .button { width: 100%; }
.freeform-checkbox { display: flex; gap: 12px; align-items: flex-start; font-family: var(--ff-inria); font-size: 13.693px; line-height: 1.7; color: var(--white); text-align: left; margin-top: 16px; }
.freeform-checkbox input { width: 30px; height: 30px; flex-shrink: 0; accent-color: var(--white); border: 2px solid var(--form-border); border-radius: 2px; }
.dob { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; }

/* ---------- A · footer (VM-19) ---------- */
.site-footer { --footer-fluid-width: min(100vw, 1920px); --footer-gutter: max(20px, calc(var(--footer-fluid-width) * .032)); --footer-nav-size: max(2rem, calc(var(--footer-fluid-width) * .011 + .8rem)); --footer-meta-size: max(1.4rem, calc(var(--footer-fluid-width) * .0022 + 1.3rem)); background-color: var(--black); color: var(--white); overflow: hidden; padding: max(72px, calc(var(--footer-fluid-width) * .08)) 0 max(60px, calc(var(--footer-fluid-width) / 32)); position: relative; }
@media (max-width: 767px) { .site-footer { padding: 56px 0 120px; } }
.site-footer__inner { margin: 0 auto; padding: 0 var(--footer-gutter); position: relative; z-index: 1; }
.site-footer__nav { margin-bottom: 50px; text-align: center; }
.site-footer__nav-list { align-items: center; column-gap: max(24px, calc(var(--footer-fluid-width) * .026)); display: flex; flex-wrap: wrap; justify-content: center; row-gap: 20px; }
@media (max-width: 479px) { .site-footer__nav-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); justify-content: space-between; justify-items: start; text-align: left; row-gap: 20px; column-gap: 28px; } }
.site-footer__nav-link { color: var(--white); font-family: var(--ff-oswald); font-size: var(--footer-nav-size); font-weight: 700; letter-spacing: .02em; line-height: 1; text-decoration: none; text-decoration-thickness: 9%; text-transform: uppercase; text-underline-offset: .16em; }
.site-footer__nav-link:hover { text-decoration: underline; }
@media (max-width: 767px) { .site-footer__nav-link { font-size: 1.6rem; } }
.site-footer__base { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 28px; position: relative; z-index: 2; font-family: var(--ff-inria); font-size: var(--footer-meta-size); line-height: 1.35; }
@media (max-width: 1023px) { .site-footer__base { align-items: center; flex-direction: column; gap: 14px; text-align: center; } }
.site-footer__base p { margin: 0; }
.site-footer__legal { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.site-footer__legal-link { color: inherit; }
.site-footer__watermark { bottom: -30px; color: transparent; font-family: var(--ff-oswald); font-size: calc(var(--footer-fluid-width) * .13); font-weight: 900; left: 50%; letter-spacing: -.02em; line-height: 1; position: absolute; text-align: center; text-transform: uppercase; transform: translate(-50%); width: max-content; -webkit-text-stroke: 1px #343434; margin: 0; pointer-events: none; }
@media (max-width: 767px) { .site-footer__watermark { bottom: 0; } }

/* ---------- B · footer (CG-17) ---------- */
.mdl-footer { margin-top: 0; padding: 0; overflow: hidden; position: relative; border-top: .1rem solid var(--ink); color: var(--ink); background: var(--paper); font-family: var(--ff-bricolage); }
.mdl-footer .m-content { margin: 0 auto; max-width: 160rem; }
.mdl-footer .m-top { padding: 0 4rem; }
.mdl-footer nav { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 6.4rem; line-height: 5.8rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.4rem 1.6rem; padding: 4rem 0; border-bottom: .1rem solid var(--ink); }
.mdl-footer nav a { position: relative; overflow: hidden; text-decoration: none; display: inline-flex; }
.mdl-footer nav a span { display: flex; align-items: center; transition: .3s ease; }
.mdl-footer nav a span + span { position: absolute; bottom: 110%; left: 0; }
@media (min-width: 1366px) { .mdl-footer nav a:hover span { color: var(--accent); transform: translateY(110%); } }
/* The address as the footer's mark (R-260): the four small facts lines are replaced by the booking
   address set at the width of the page, which grows a little under the pointer and is deliberately
   NOT a link — the mailto and the phone live in the status bar under it, where they stay tappable. */
.mdl-footer .m-address { padding: 3.2rem 0 2.4rem; }
.mdl-footer .m-address__mark { font-family: var(--ff-oswald); font-weight: 700; text-transform: lowercase; font-size: min(7.6vw, 15rem); line-height: .95; letter-spacing: -.035em; margin: 0; text-align: center; white-space: nowrap; color: var(--ink); transition: transform .35s cubic-bezier(.22,1,.36,1), color .35s ease; transform-origin: 50% 60%; will-change: transform; cursor: default; }
@media (min-width: 1024px) { .mdl-footer .m-address__mark:hover { transform: scale(1.035); } }
.mdl-footer .m-address__at { color: var(--accent); }
.mdl-footer .m-address__bar { font: 300 1.4rem/2.2rem var(--ff-bricolage); display: flex; justify-content: space-between; align-items: center; gap: 1.6rem 3.2rem; flex-wrap: wrap; margin-top: 2.4rem; padding-top: 1.6rem; border-top: .1rem solid rgba(25,23,21,.14); color: var(--grey); }
.mdl-footer .m-address__bar a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1366px) { .mdl-footer .m-address__bar a:hover { color: var(--accent); } }
.mdl-footer .m-address__dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--accent); margin-right: .8rem; vertical-align: middle; }
@media (max-width: 1023px) { .mdl-footer .m-address__bar { justify-content: center; text-align: center; flex-direction: column; gap: .4rem; } }
@media (prefers-reduced-motion: reduce) { .mdl-footer .m-address__mark { transition: none; } .mdl-footer .m-address__mark:hover { transform: none; } }
.mdl-footer .m-newsletter { padding: 4rem; color: #fff; background-color: var(--ink); }
.mdl-footer .m-newsletter .m-content { display: flex; align-items: flex-start; gap: 2.2rem; }
.mdl-footer .m-title { font: 300 2.1rem/3.4rem var(--ff-bricolage); max-width: 44rem; }
.mdl-footer .m-title p { margin: 0; }
.mdl-footer .m-form { display: flex; align-items: flex-end; flex-direction: column; flex-grow: 1; gap: 2.4rem; }
.mdl-footer .m-data { display: flex; align-items: flex-end; justify-content: flex-end; gap: 4rem; width: 100%; }
.mdl-footer .m-input { max-width: 44rem; position: relative; flex-grow: 1; border-bottom: .1rem solid #fff; color: #fff; display: block; }
.mdl-footer .m-input input { font: 300 1.6rem/2.56rem var(--ff-bricolage); display: block; width: 100%; height: 4.6rem; background: none; border: 0; color: #fff; padding: 0; }
.mdl-footer .m-input input::placeholder { color: #fff; opacity: 1; }
.mdl-footer .m-input input:focus { outline: none; }
.mdl-footer .m-input span { position: absolute; left: 0; bottom: -1.8rem; font-size: 1.2rem; opacity: .7; }
.mdl-footer .m-check { font: 300 1.2rem/1.92rem var(--ff-bricolage); display: flex; align-items: center; gap: .8rem; color: #fff; }
.mdl-footer .m-check label { flex: none; width: 2.4rem; aspect-ratio: 1; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; border-radius: .8rem; border: .1rem solid #fff; }
.mdl-footer .m-check label input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; z-index: 1; margin: 0; }
.mdl-footer .m-check label svg { width: 1.6rem; height: auto; opacity: 0; } .mdl-footer .m-check label svg * { stroke: #fff; fill: none; }
.mdl-footer .m-check label input:checked ~ svg { opacity: 1; }
.mdl-footer .m-check a { color: inherit; }
@media (min-width: 1366px) { .mdl-footer .m-check a:hover { color: var(--accent); } }
.mdl-footer .m-bot { padding: 4rem; }
.mdl-footer .m-maquee-section { display: flex; overflow: hidden; }
.mdl-footer .m-maquee-content { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 12rem; line-height: 10.8rem; display: flex; align-items: center; gap: 1.2rem; flex: none; white-space: nowrap; animation: marquee 50s linear infinite; }
.mdl-footer .m-maquee-content > div { flex: none; display: flex; align-items: center; gap: 2.4rem; color: var(--ink); }
.mdl-footer .m-maquee-content a { color: var(--accent); text-decoration: none; }
.mdl-footer .m-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 4rem; border-top: .1rem solid var(--ink); border-bottom: .1rem solid var(--ink); }
.mdl-footer .m-rrss { display: flex; }
.mdl-footer .m-rrss > * { width: 12rem; height: 8.8rem; display: flex; align-items: center; justify-content: center; border-right: .1rem solid var(--ink); }
.mdl-footer .m-rrss a { width: 4rem; height: 4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 1.6rem; background-color: var(--accent); color: #fff; }
.mdl-footer .m-rrss a svg { width: 2.4rem; height: auto; }
.mdl-footer .m-links { font: 1.6rem/1.9rem var(--ff-bricolage); display: flex; align-items: center; gap: 2.4rem; }
.mdl-footer .m-links a { color: inherit; text-decoration: none; }
@media (min-width: 1366px) { .mdl-footer .m-links a:hover { color: var(--accent); } }
.mdl-footer .m-footer { margin-top: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 4rem; padding-bottom: 4rem; }
.mdl-footer .m-footer-info { display: flex; align-items: center; gap: 4rem; }
.mdl-footer .m-logo { flex: none; font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 4.8rem; line-height: 1; }
.mdl-footer .m-text { font: 300 1.2rem/1.92rem var(--ff-bricolage); color: var(--grey); max-width: 77.6rem; }
.mdl-footer .m-text p { margin-bottom: 1rem; }
.mdl-footer .m-poweredby { font: 1.6rem/1.9rem var(--ff-bricolage); flex: none; }
.mdl-footer .m-poweredby a { color: inherit; }
@media (min-width: 1366px) { .mdl-footer .m-poweredby a:hover { color: var(--accent); } }
@media (max-width: 1366px) { .mdl-footer .m-top, .mdl-footer .m-newsletter, .mdl-footer .m-bot { padding-left: 3rem; padding-right: 3rem; } .mdl-footer nav { font-size: 3.2rem; line-height: 2.9rem; gap: .8rem; } .mdl-footer .m-maquee-content { font-size: 4.4rem; line-height: 4rem; } .mdl-footer .m-maquee-content > div { gap: 1rem; } .mdl-footer .m-bar { flex-direction: column; } .mdl-footer .m-rrss > * { width: 8.8rem; } .mdl-footer .m-rrss > *:last-child { border: 0; } .mdl-footer .m-links { width: 100%; padding: 2.4rem 0; justify-content: center; border-top: .1rem solid var(--ink); } .mdl-footer .m-footer { flex-wrap: wrap; justify-content: center; gap: 3.2rem; margin-top: 3.2rem; } .mdl-footer .m-footer-info { gap: 3.2rem; width: 100%; align-items: flex-start; } .mdl-footer .m-newsletter .m-content { display: block; } .mdl-footer .m-title { max-width: 100%; } .mdl-footer .m-title + * { margin-top: 1.6rem; } .mdl-footer .m-form { gap: 3.6rem; align-items: flex-start; } .mdl-footer .m-data { gap: 2.4rem; position: relative; } .mdl-footer .m-input { flex-grow: 1; flex-basis: 0; max-width: 100%; } .mdl-footer .m-submit { position: absolute; top: 100%; right: 0; width: 35rem; transform: translateY(2.4rem); justify-content: center; gap: 1.2rem; padding-left: 1.6rem !important; } .mdl-footer .m-submit svg { position: static; transform: none; } .mdl-footer .m-check { margin-right: 37rem; } }
@media (max-width: 1023px) { .mdl-footer .m-footer-info { align-items: center; flex-direction: column; } }
@media (max-width: 767px) { .mdl-footer { border-top: 0; margin-top: 0; } .mdl-footer .m-top, .mdl-footer .m-newsletter, .mdl-footer .m-bot { padding-left: 2.3rem; padding-right: 2.3rem; } .mdl-footer nav { gap: 1.2rem .8rem; font-size: 2.6rem; line-height: 2.3rem; } .mdl-footer .m-rrss > * { flex-grow: 1; flex-basis: 0; } .mdl-footer .m-links { font-size: 1.4rem; line-height: 1.68rem; gap: .6rem; justify-content: space-between; } .mdl-footer .m-newsletter { padding-bottom: 12rem; position: relative; } .mdl-footer .m-form { display: block; } .mdl-footer .m-data { gap: 1.6rem; position: static; flex-direction: column; } .mdl-footer .m-data + * { margin-top: 1.6rem; } .mdl-footer .m-input { width: 100%; } .mdl-footer .m-submit { top: auto; left: 2.3rem; right: 2.3rem; bottom: 4.8rem; width: auto; transform: none; } .mdl-footer .m-check { margin-right: 0; } .mdl-footer .m-poweredby { margin-bottom: 7rem; } .mdl-footer .m-footer { padding-bottom: 0; } }

/* ---------- A · sub-page heroes (VM-24) ---------- */
.imageHero { --ihw: min(100vw, 1920px); align-items: flex-end; background: var(--black); clip-path: inset(0); color: var(--white); display: flex; justify-content: center; min-height: max(620px, min(45.8333vw, 980px)); overflow: hidden; padding: max(220px, min(22.6042vw, 520px)) max(24px, min(4.1667vw, 96px)) max(48px, min(4.1667vw, 96px)); position: relative; }
.imageHero::before { content: ""; left: 0; right: 0; pointer-events: none; position: absolute; background: #0000001a; inset: 0; z-index: 1; }
.imageHero::after { content: ""; left: 0; right: 0; pointer-events: none; position: absolute; background: linear-gradient(180deg, #0f0f0f00, #0f0f0f); bottom: 0; height: max(180px, min(15.625vw, 340px)); z-index: 2; }
@media (max-width: 767px) { .imageHero::after { background: linear-gradient(180deg, #0f0f0f14, #0f0f0fd1 58%, #0f0f0f); height: 60%; } }
.imageHero__image { display: block; height: 100%; inset: 0; object-fit: cover; object-position: top center; position: absolute; width: 100%; z-index: 0; }
@media (min-width: 1024px) { .imageHero__image { height: 100vh; position: fixed; } }
.imageHero__breadcrumbs, .hero__breadcrumbs { align-items: center; color: var(--white); display: inline-flex; font-family: var(--ff-oswald); font-size: max(1.4rem, calc(var(--ihw, min(100vw, 1920px)) * .00938)); font-weight: 600; gap: 6px; left: max(20px, min(calc(-25.71px + 4.46vw + 9px), 999px)); position: absolute; text-decoration: none; text-transform: uppercase; top: 120px; z-index: 3; transition: opacity .2s ease; }
.imageHero__breadcrumbs span:last-child, .hero__breadcrumbs span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.imageHero__breadcrumbs:hover, .hero__breadcrumbs:hover { opacity: .6; }
@media (max-width: 1023px) { .imageHero__breadcrumbs, .hero__breadcrumbs { display: none; } }
.imageHero__content { align-items: center; display: flex; flex-direction: column; gap: max(24px, min(2.0833vw, 48px)); margin: 0 auto; position: relative; text-align: center; width: min(100%, max(680px, min(57.8125vw, 1240px))); z-index: 3; }
.imageHero__content h1, .plainHero__text h1 { color: inherit; font-family: var(--ff-oswald); font-size: max(6rem, min(7.2917vw, 15.5rem)); font-weight: 700; line-height: .9; margin: 0; text-transform: uppercase; }
.imageHero__content p, .plainHero__text p { color: inherit; font-family: var(--ff-inria); font-size: max(1.8rem, min(1.1458vw, 2.4rem)); line-height: 1.7; margin: 0 auto; max-width: max(320px, min(39.0625vw, 820px)); }
.imageHero__content .button, .plainHero__text .button { align-self: center; width: auto; }
.plainHero { --phw: min(100vw, 1920px); background: var(--plain-hero-bg, var(--white)); color: var(--plain-hero-text, var(--near-black)); overflow: hidden; padding: max(140px, min(calc(var(--phw) * .11406), 260px)) max(24px, min(calc(var(--phw) * .04167), 96px)) max(56px, min(calc(var(--phw) * .04167), 96px)); position: relative; }
.plainHero .hero__breadcrumbs { color: currentColor; }
.plainHero__text { display: flex; flex-direction: column; gap: max(24px, min(calc(var(--phw) * .02083), 48px)); margin: 0 auto; max-width: max(680px, min(calc(var(--phw) * .57813), 1240px)); position: relative; text-align: center; z-index: 2; align-items: center; }
.plainHero__text .page-header__intro { font-style: italic; opacity: .7; white-space: pre-line; }
@media (max-width: 767px) { .plainHero { padding-bottom: 30px; padding-top: 116px; } .plainHero__text { gap: 18px; } .plainHero__text h1 { font-size: max(4.8rem, min(12vw, 6rem)); } .plainHero__text p { font-size: 1.6rem; line-height: 1.6; } }
.plainHero.bg-black { --plain-hero-bg: #000; --plain-hero-text: var(--white); align-items: center; display: flex; justify-content: center; min-height: 750px; }
.plainHero.bg-black::before, .plainHero.bg-black::after { content: ""; inset: 0; pointer-events: none; position: absolute; }
.plainHero.bg-black::before { background: #00000094; z-index: 1; }
.plainHero.bg-black::after { background: linear-gradient(180deg, #00000026, #101010); z-index: 1; }
.plainHero.bg-black .plainHero__text { z-index: 2; }
.plainHero.bg-black .plainHero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .7; }
.plainHero__actions { display: flex; gap: 16px 20px; flex-wrap: wrap; justify-content: center; }
@keyframes not-found-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
html.js .not-found .plainHero__text > * { animation: not-found-fade-up .7s cubic-bezier(.215,.61,.355,1) both; }
html.js .not-found .plainHero__text > :nth-child(2) { animation-delay: .1s; } html.js .not-found .plainHero__text > :nth-child(3) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { html.js .not-found .plainHero__text > * { animation: none; } }

/* ---------- B · sub-page modules: breadcrumb bar, text modules, facts row, session cards, gallery (CG-14/15/16) ---------- */
.mdl-breadcrumb { background: var(--paper); color: var(--ink); font: 400 1.2rem/1.4rem var(--ff-bricolage); padding: 2.4rem 4rem; height: 6.2rem; display: flex; align-items: center; }
.mdl-breadcrumb ol { display: flex; gap: 1.2rem; }
.mdl-breadcrumb li + li::before { content: "/"; margin-right: 1.2rem; opacity: .5; }
.mdl-breadcrumb a { color: inherit; text-decoration: none; }
@media (max-width: 767px) { .mdl-breadcrumb { padding: 2.4rem 2.3rem; } }
.mdl-texto { background: var(--paper); color: var(--ink); font-family: var(--ff-bricolage); padding: 6.4rem 2.4rem; }
.mdl-texto .m-content { max-width: 132.8rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6.4rem; align-items: start; } /* minmax(0,…): a long email in .content must not widen the track (answers 390 overflow) */
.mdl-texto .pretitle { font: 600 1.4rem/1.2rem var(--ff-bricolage); text-transform: uppercase; margin: 0 0 2.4rem; }
.mdl-texto .title, .mdl-texto h2, .mdl-texto h3 { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 6.4rem; line-height: 5.8rem; }
.mdl-texto .content { font: 300 1.6rem/2.56rem var(--ff-bricolage); overflow-wrap: anywhere; }
.mdl-texto .content p { margin: 0 0 1.6rem; }
.mdl-texto .content ul { list-style: disc; padding-left: 2rem; }
.mdl-texto .content a { color: inherit; }
.mdl-texto.v-dark { background: var(--ink); color: #fff; }
.mdl-texto.v-grey { background: var(--paper-2); }
@media (max-width: 1023px) { .mdl-texto .m-content { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; } .mdl-texto .title, .mdl-texto h2, .mdl-texto h3 { font-size: 4rem; line-height: 3.6rem; } }
.mdl-ficha { background: var(--paper); color: var(--ink); font-family: var(--ff-bricolage); padding: 4rem; border-bottom: .1rem solid var(--ink); }
.mdl-ficha .m-facts { max-width: 132.8rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2.4rem 6.4rem; }
.mdl-ficha .m-facts > div small { display: block; font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 2rem; line-height: 1.8rem; color: var(--grey); margin-bottom: .8rem; }
.mdl-ficha .m-facts > div { min-width: 0; max-width: 100%; }
.mdl-ficha .m-facts > div span { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 4.3rem; line-height: 3.9rem; overflow-wrap: anywhere; } /* the booking address is longer than a 320 px column */
.mdl-ficha .m-facts > div span a { color: inherit; text-decoration: none; }
@media (max-width: 767px) { .mdl-ficha { padding: 2.4rem 2.3rem; } .mdl-ficha .m-facts > div span { font-size: 3.2rem; line-height: 2.9rem; } }
.emisiones { background: var(--paper); padding: 4rem 4rem 8rem; color: var(--ink); font-family: var(--ff-bricolage); }
.emisiones .m-header { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 12rem; line-height: 10.8rem; max-width: 132.8rem; margin: 0 auto 4rem; }
.emisiones .m-sections { display: flex; gap: 3.6rem; flex-wrap: wrap; max-width: 132.8rem; margin: 0 auto; }
.emisiones .m-item { width: 20.6rem; }
.emisiones .m-item-content { background: var(--paper-2); padding: 2.4rem; min-height: 18.2rem; display: flex; flex-direction: column; justify-content: space-between; }
.emisiones .m-item-content div { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 2.4rem; line-height: 1.1; }
.emisiones .m-item-content big { display: block; font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 4.3rem; line-height: 3.9rem; margin: .8rem 0; }
.emisiones .m-item-content small { font: 300 1.6rem/2.56rem var(--ff-bricolage); }
@media (max-width: 767px) { .emisiones { padding: 2.4rem 2.3rem 4rem; } .emisiones .m-header { font-size: 6.4rem; line-height: 5.8rem; } .emisiones .m-sections { gap: 1.6rem; } .emisiones .m-item { width: calc(50% - .8rem); } }
.mdl-galeria { background: var(--paper); padding: 4rem 0 8rem; }
/* R-268 · the press-kit gallery mixes portrait crops (640x800) with landscape ones (1400x1000);
   a fixed 3:2 frame cropped the portraits to whatever happened to be in the middle band, which on
   one of them was a pair of trousers on the page a booker downloads photos from. Fixed HEIGHT and
   natural width instead: every photograph is shown whole, and Swiper's slidesPerView:'auto'
   already carries slides of different widths. */
.mdl-galeria .swiper-slide { width: auto; max-width: 86vw; }
.mdl-galeria img { height: 42rem; width: auto; max-width: 86vw; object-fit: contain; display: block; border-radius: 2rem; background: var(--paper-2); }
@media (max-width: 767px) { .mdl-galeria img { height: 30rem; } }
.mdl-galeria .m-pagination { max-width: 64rem; height: .2rem; margin: 4rem auto 0; background: #e2e2e2; position: relative; }
.mdl-galeria .m-pagination > * { background: var(--ink); border-radius: 0; }
.plot { width: 100%; height: auto; max-width: 76rem; display: block; background: var(--paper-2); border: .1rem solid var(--ink); color: var(--ink); }
.tablebox { overflow-x: auto; }
table.stack { width: 100%; border-collapse: collapse; font: 300 1.5rem/1.6 var(--ff-bricolage); }
table.stack th, table.stack td { text-align: left; padding: .8rem .6rem; border-bottom: .1rem solid var(--ink); vertical-align: top; }
@media (max-width: 767px) { table.stack thead { display: none; } table.stack tr { display: block; border-bottom: .1rem solid var(--ink); padding: .8rem 0; } table.stack td { display: flex; gap: 1.2rem; border: 0; padding: .3rem 0; } table.stack td::before { content: attr(data-label); font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; min-width: 8rem; } }
.printbtn { display: inline-flex; }
@media print { .site-header, .mdl-header, .site-splash, .site-nav, .subscribe-panel, .site-footer, .mdl-footer, .printbtn, .imageHero::after, video { display: none !important; } body { background: #fff; color: #000; } .imageHero { min-height: 0; padding: 40px 24px; background: #fff; color: #000; } }

/* ---------- Modal (A's GLightbox / B's magnificPopup: one dialog) ---------- */
.im-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; padding: 24px; }
.im-modal.is-open { display: flex; }
.im-modal__frame { width: min(100%, 1120px); aspect-ratio: 16 / 9; background: #000; }
.im-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.im-modal__close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; color: #fff; font-family: var(--ff-oswald); text-transform: uppercase; font-size: 16px; }

/* ---------- Reduced motion (VM-21: A's 5 blocks, applied to both parents' sections) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-hero__curtain { display: none !important; }
  .the-music__card, .latest-news__item, .shows__item, .upcoming-shows__title, .upcoming-shows__cta, .site-header, .site-hero__promo { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .site-hero__text-wrap { opacity: 1 !important; visibility: visible !important; } /* keeps its translateY(-50%) centring: the JS never sets y under reduced motion */
  .the-music__card { transform: rotate(var(--r, 0deg)) translateX(var(--x, 0)) !important; }
  .mdl-header .m-menu.v-sticky { transition: none; }
  .mdl-espectaculos-carteles .m-thumbnail img, .mdl-marcaladiferencia .m-item img, .mdl-instagram .m-gallery img { transition: none; }
}

/* hit areas ≥ 44 px without changing the measured type sizes (qa TAP-TARGET-SMALL); paddings are cancelled by negative margins, so nothing moves */
.site-header__bar-nav-link { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
.site-header__wordmark { display: inline-block; padding: 11px 0; margin: -11px 0; }
.site-header .m-nav-trigger, .mdl-header .m-menu .m-nav-trigger, .mdl-header .m-navigation-header .m-nav-trigger { padding: 9px 0; margin: -9px 0; min-width: 44px; justify-content: center; }
.site-header__stream a { padding: 11px; margin: -11px; }
.site-nav__close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }

/* ── /qa 2026-08-28 · the splash as a real modal, ≥44px hit boxes, the rider's channel list ── */

/* The first-visit splash covers the site; the page behind it is not readable, so it
   is hidden from sight and from assistive tech instead of sitting visible underneath
   (qa TEXT-OCCLUDED ×6 — the header and A's nav links reported covered by #site-splash).
   A's own state machine ends it: html.site-splash-seen (CSS-KEY-vanmorrison 145-147). */
html:not(.site-splash-seen) .site-splash--on ~ * { visibility: hidden; }
.site-splash__name { font-family: var(--ff-oswald); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; font-size: max(28px, 3.4vw); line-height: 1; margin: 0 0 28px; }

/* Standalone controls get a ≥44px box (qa TAP-TARGET-SMALL). In flex ROWS the padding is
   cancelled by a negative margin, so the measured layout does not move; in COLUMNS and
   wrapping lists the box grows instead, because a negative margin there would eat the
   parent's measured gap. Type sizes are untouched everywhere. */
.site-hero__promo-cta { padding: 10px 0; margin: -10px 0; }
.site-hero__promo-actions { row-gap: 32px; } /* the 44px hit boxes carry 20px of negative margin: A's measured 12px gap between wrapped rows only survives if the row-gap absorbs it (they overlapped by 8px at 320/360) */
.m-link { padding: 14px 0 14px 3.6rem; margin: -14px 0; } /* keeps B's 3.6rem arrow gutter: a bare `padding: 14px 0` wiped it and the arrow ran through the label */
.mdl-espectaculos-carteles .m-filters nav button { padding: 10px 0 16px; margin: -10px 0 -10px; } /* B's chips were 24px tall; the underline stays 6px under the text */
.mdl-espectaculos-carteles .m-filters nav button::before { bottom: 10px; }
.mdl-espectaculos-carteles .m-swicth > * { padding: 10px 0; margin: -10px 0; }
.site-header__bar-nav-link { padding: 12px 6px; margin: -12px -6px; }
.mdl-header .m-menu .m-nav .m-roll { min-width: 44px; justify-content: center; } /* R-260: in Oswald "MUSIC" measures 43px, one pixel under the hit box */
.mdl-header .m-menu .m-logo, .mdl-header .m-navigation .m-navigation-header .m-logo { padding: 9px 0; margin: -9px 0; }
.site-footer__nav-link { display: inline-flex; align-items: center; min-height: 44px; }
.mdl-header .m-navigation .m-lvl2 a { padding: 1.1rem 0; }
/* B's drawer links keep their roll: padding grows the box, clip-path keeps the second
   span hidden, and the travel becomes exactly one line so it lands on the same pixel. */
.mdl-header .m-navigation .m-lvl1 { padding: 8px 0; clip-path: inset(8px 0); }
.mdl-header .m-navigation .m-lvl1 span + span { top: calc(100% - 8px); }
@media (min-width: 1366px) { .mdl-header .m-navigation .m-lvl1:hover span { transform: translateY(-100%); } }

/* The rider's channel list: two 81px columns cannot hold "BACKING" at B's 4.3rem, and the
   overflow reached the document (H-OVERFLOW 323 > 320, WebKit). One card per row ≤430. */
.emisiones .m-item, .emisiones .m-item-content { min-width: 0; }
.emisiones .m-item-content big { overflow-wrap: anywhere; }
@media (max-width: 430px) { .emisiones .m-item { width: 100%; } }

/* the last standalone controls (qa TAP-TARGET-SMALL, footers) */
.mdl-footer .m-bar .m-rrss a { padding: 2px; margin: -2px; }
.dob input { width: 0; height: 0; padding: 0; border: 0; } /* the honeypot is not a control a person can tap */

/* the remaining standalone controls: one 44px box each. All sit in wrapping rows or
   flex lines, so the row grows a little and nothing moves sideways. */
.site-footer__legal-link, .site-footer__nav-link,
.mdl-footer .m-bar .m-links a, .mdl-footer .m-info a,
.mdl-breadcrumb a, .mdl-ficha .m-facts > div span a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
@media (max-width: 1365px) { .mdl-footer nav a { min-height: 44px; align-items: center; } } /* below B's hover line the roll never runs; overflow:hidden still hides the second span */
.mdl-footer .m-rrss a { width: 4.4rem; height: 4.4rem; } /* B's 4rem square is a 40px target */
/* the breadcrumb bar is absolutely positioned: it grows UPWARD into the hero's own
   padding, so a 44px hit box never reaches the h1 below it (qa TEXT-OCCLUDED). */
.hero__breadcrumbs, .imageHero__breadcrumbs, .plainHero__breadcrumbs { align-items: flex-end; padding-top: 25px; margin-top: -25px; } /* no display here: A hides this breadcrumb ≤1023 (CSS-KEY-vanmorrison) and setting display would bring it back over the h1 */
.mdl-breadcrumb li { display: flex; align-items: center; } /* the "/" and a 44px anchor share one centred line */
.mdl-header .m-navigation { z-index: 1100; } /* B's drawer is a modal: it covers A's absolute bar (z 1000) instead of opening under it */

/* R-260 · the sticky bar's trigger is the same icon button as the header bar's, in B's ink */
.mdl-header .m-menu .site-header__toggle { color: var(--ink); pointer-events: all; }
.mdl-header .m-menu .site-header__toggle .site-header__toggle-icon { width: 24px; }
.site-header--nav-open .m-sticky-toggle .site-header__toggle-icon span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.site-header--nav-open .m-sticky-toggle .site-header__toggle-icon span:nth-child(2) { opacity: 0; }
.site-header--nav-open .m-sticky-toggle .site-header__toggle-icon span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- /story/ · the band's own intake (R-267) ----------------------------------------
   No new component: the booking form's own .freeform parts, re-coloured for a light section
   because they were built for the black pre-footer, plus three helpers for a form that is one
   column of long questions rather than two columns of short ones. */
.mdl-texto .freeform { max-width: 78rem; }
.mdl-texto .freeform-row { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 0; }
.mdl-texto .freeform-column--full { grid-column: 1 / -1; }
.mdl-texto .freeform-label { color: var(--ink); font-family: var(--ff-bricolage); font-size: 1.6rem; line-height: 2.4rem; margin-bottom: .8rem; }
.mdl-texto .freeform-input, .mdl-texto .freeform-select, .mdl-texto .freeform-textarea { color: var(--ink); background: #fff; border: .1rem solid rgba(25,23,21,.28); border-radius: .4rem; padding: 1.2rem 1.4rem; font-family: var(--ff-bricolage); font-size: 1.6rem; min-height: 44px; }
.mdl-texto .freeform-input::placeholder { color: var(--grey); }
.mdl-texto .freeform-input:focus, .mdl-texto .freeform-select:focus, .mdl-texto .freeform-textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--ink); }
.mdl-texto .freeform-textarea { min-height: 12rem; }
.mdl-texto input[type="file"].freeform-input { padding: 1rem 1.2rem; background: #fff; }
.mdl-texto .freeform-set { border: 0; border-top: .1rem solid rgba(25,23,21,.16); margin: 0 0 3.2rem; padding: 2.4rem 0 0; }
.mdl-texto .freeform-set:first-of-type { border-top: 0; padding-top: 0; }
.mdl-texto .freeform-legend { font-family: var(--ff-barlow); font-weight: 600; text-transform: uppercase; font-size: 2.4rem; line-height: 1.1; color: var(--ink); padding: 0; margin-bottom: 1.6rem; }
.mdl-texto .freeform-note { font: 300 1.4rem/2.2rem var(--ff-bricolage); color: var(--grey); margin: 1.2rem 0 0; }
.mdl-texto .freeform-note a { color: var(--ink); }
.mdl-texto .freeform-button-container .button { width: auto; min-width: 24rem; background: var(--ink); color: #fff; border-color: var(--ink); }
@media (min-width: 1366px) { .mdl-texto .freeform-button-container .button:hover { background: var(--accent); border-color: var(--accent); } }
@media (max-width: 767px) { .mdl-texto .freeform-button-container .button { width: 100%; } }

/* R-268 · footer repairs found by the sweep */
.mdl-footer .m-address { overflow: hidden; }                       /* nothing in this block may push the footer wider than the page */
.mdl-footer .m-poweredby { display: flex; gap: 1.6rem 3.2rem; flex-wrap: wrap; align-items: baseline; }
@media (max-width: 767px) { .mdl-footer .m-poweredby { flex-direction: column; gap: .4rem; align-items: center; text-align: center; } }
@media (min-width: 1024px) { .mdl-footer .m-rrss { flex: none; } .mdl-footer .m-rrss > * { width: 8.8rem; } }

.mdl-marcaladiferencia .m-header-hint--swipe { display: none; }
@media (max-width: 1023px) { .mdl-marcaladiferencia .m-header-hint--scroll { display: none; } .mdl-marcaladiferencia .m-header-hint--swipe { display: flex; } }
@media (prefers-reduced-motion: reduce) { .mdl-marcaladiferencia .m-header-hint--scroll { display: none; } .mdl-marcaladiferencia .m-header-hint--swipe { display: flex; } }