/* Brand fonts (manual de marca, 08 Tipografía): Cinzel + Inter, SIL OFL 1.1, see ../fonts/OFL_*.txt */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cinzel-regular-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cinzel-regular-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cinzel-bold-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cinzel-bold-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/cinzel-black-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/cinzel-black-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-regular-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-regular-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-semibold-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-semibold-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-bold-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-bold-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   BELLIOSS BEATS — Peace and well.
   Plain CSS, no build step. Sections: tokens · base · stage (fixed bg) ·
   header/nav · dots · hero · sections · beats · discography · services ·
   about · blog · contact · footer · article pages · motion · responsive
   ========================================================================== */

:root {
  --black: #090b0c;
  --black-soft: #1c1c1f; /* carbón */
  --white: #f3eee3; /* marfil */
  --pure-white: #ffffff;
  --white-muted: #bdb7aa;
  --gold: #b08824; /* oro Bellioss */
  --gold-dark: #7a5f19;
  --gold-light: #d4af5a; /* oro claro */
  --line: rgba(243, 238, 227, 0.19);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Cinzel", "Trajan Pro", Georgia, serif;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --header-h: 92px;
  --pad: clamp(1.25rem, 5vw, 4.75rem);
  --maxw: 1380px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --slow: 900ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--black); }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font-family: var(--sans); font-size: clamp(1rem, .96rem + .2vw, 1.125rem); line-height: 1.6;
  font-optical-sizing: auto; color: var(--white); background: transparent;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
em, .serif { font-family: var(--serif); font-style: normal; font-weight: 400; letter-spacing: -.01em; }
::selection { background: var(--gold); color: var(--black); }
[id] { scroll-margin-top: var(--header-h); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; border-radius: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .8rem 1.2rem; background: var(--gold-light); color: var(--black); font-weight: 600; transition: top .3s var(--ease); }
.skip-link:focus { top: 1rem; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- stage: fixed background layer (iOS-safe, no background-attachment) ---------- */
.stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--black); pointer-events: none; }
.stage__media, .stage__media img, .stage__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
}
.stage__video { opacity: 0; transition: opacity 1.6s var(--ease); }
.stage.has-video .stage__video { opacity: 1; }
/* animated light layer: sits between the photo and the veils, adds light only (screen) */
.stage__light { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: 0; transition: opacity 2.4s var(--ease); }
.stage__light.is-ready { opacity: 1; }
.stage__glow { position: absolute; left: 0; top: 0; width: 0; height: 0; mix-blend-mode: screen; pointer-events: none; opacity: 0; transition: opacity 2.4s var(--ease); }
.stage__glow.is-ready { opacity: 1; }
.stage.has-video .stage__light, .stage.has-video .stage__glow { display: none; }
/* inner pages (blog, legal): text sits over the sign area, so the clef glow is calmer and the photo a bit dimmer */
.is-inner .stage__glow.is-ready { opacity: .4; }
.is-inner .stage__dim { opacity: max(var(--stage-dim, 0), .28); }
.is-inner .page-hero { text-shadow: 0 1px 16px rgba(9,11,12,.9), 0 0 2px rgba(9,11,12,.6); }
@media (orientation: portrait) and (max-width: 1100px) { .is-inner .stage__glow.is-ready { opacity: .28; } }
.stage__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 20% 30%, rgba(9,11,12,0) 0%, rgba(9,11,12,.35) 55%, rgba(9,11,12,.8) 100%),
    linear-gradient(180deg, rgba(9,11,12,.55) 0%, rgba(9,11,12,.08) 28%, rgba(9,11,12,.2) 55%, rgba(9,11,12,.92) 100%);
}
.stage__dim { position: absolute; inset: 0; background: var(--black); opacity: var(--stage-dim, 0); transition: opacity .6s linear; }
.stage__grain {
  position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  transition: background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { background: rgba(9,11,12,.72); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border-color: var(--line); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 2rem; max-width: none; }
.brand { display: inline-flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.brand img { width: 22px; height: auto; filter: drop-shadow(0 0 10px rgba(176,136,36,.35)); transition: transform .8s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .brand:hover img, .brand:focus-visible img { transform: rotate(-8deg) scale(1.06); } }
.brand__name { font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: .82rem; line-height: 1.15; }
.brand__name span { display: block; color: var(--white-muted); font-weight: 400; letter-spacing: .3em; font-size: .68rem; }
.nav { margin-left: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav__link { position: relative; display: inline-block; padding: .5rem 0; font-size: .95rem; color: var(--white-muted); transition: color .4s var(--ease); }
.nav__link::after, .u-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; background: var(--gold-light);
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current="true"] { color: var(--white); }
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.lang { display: inline-flex; align-items: center; gap: .1rem; font-size: .85rem; letter-spacing: .12em; border: 1px solid var(--line); border-radius: 999px; padding: .2rem; flex-shrink: 0; }
.lang a { padding: .35rem .65rem; border-radius: 999px; color: var(--white-muted); transition: color .3s, background-color .3s; min-width: 2.6rem; text-align: center; }
.lang a[aria-current="page"] { background: var(--white); color: var(--black); }
.lang a:not([aria-current]):hover, .lang a:not([aria-current]):focus-visible { color: var(--gold-light); }
.menu-toggle {
  display: none; align-items: center; gap: .7rem; min-height: 44px; padding: .5rem .9rem .5rem 1rem;
  background: transparent; color: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font: 500 .9rem/1 var(--sans); letter-spacing: .08em; cursor: pointer;
}
.menu-toggle__icon { position: relative; width: 18px; height: 8px; }
.menu-toggle__icon::before, .menu-toggle__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--ease-out), top .45s var(--ease-out); }
.menu-toggle__icon::before { top: 0; } .menu-toggle__icon::after { top: 6.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 3.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 3.25px; transform: rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49; max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  background: var(--black); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px rgba(0,0,0,.6);
  padding: 1.25rem var(--pad) 2rem;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ol { list-style: none; margin: 0; padding: 0; }
.mobile-menu li { border-bottom: 1px solid var(--line); }
.mobile-menu a { display: flex; align-items: baseline; gap: 1rem; padding: .95rem 0; font-size: clamp(1.6rem, 7vw, 2.3rem); font-weight: 600; letter-spacing: -.02em; }
.mobile-menu a:active, .mobile-menu a:focus-visible { color: var(--gold-light); }
.mobile-menu__foot { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; color: var(--white-muted); font-size: .95rem; }
.mobile-menu__foot em { color: var(--gold-light); font-size: 1.4rem; }

/* ---------- side dot navigation ---------- */
.dots { position: fixed; right: clamp(.9rem, 1.6vw, 1.75rem); top: 50%; transform: translateY(-50%); z-index: 40; }
.dots ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.dots a { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
.dots a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--white-muted); opacity: .55; transition: all .5s var(--ease-out); }
.dots a:hover::before, .dots a:focus-visible::before { opacity: 1; background: var(--white); }
.dots a[aria-current="true"]::before { width: 7px; height: 22px; border-radius: 4px; background: var(--gold-light); opacity: 1; box-shadow: 0 0 14px rgba(212,175,90,.55); }
.dots__label {
  position: absolute; right: calc(100% + .4rem); top: 50%; white-space: nowrap; pointer-events: none;
  padding: .3rem .7rem; font-size: .8rem; letter-spacing: .08em; color: var(--white);
  background: rgba(17,18,15,.9); border: 1px solid var(--line); border-radius: 999px;
  opacity: 0; transform: translate(6px, -50%); transition: opacity .35s var(--ease), transform .45s var(--ease-out);
}
.dots a:hover .dots__label, .dots a:focus-visible .dots__label { opacity: 1; transform: translate(0, -50%); }

/* ---------- shared: buttons, links, labels, rules ---------- */
.btn {
  --mx: 0px; --my: 0px;
  position: relative; display: inline-flex; align-items: center; gap: .9rem; min-height: 52px; padding: .85rem 1.15rem .85rem 1.5rem;
  border: 1px solid var(--gold); border-radius: 999px; color: var(--white); font-weight: 500; font-size: 1rem; letter-spacing: .02em;
  background: rgba(9,11,12,.25); overflow: hidden; isolation: isolate;
  transform: translate(var(--mx), var(--my)); transition: transform .6s var(--ease-out), color .45s var(--ease), border-color .45s;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-light); transform: translateY(101%); transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover, .btn:focus-visible { color: var(--black); border-color: var(--gold-light); } }
@media (hover: hover) and (pointer: fine) { .btn:hover::before, .btn:focus-visible::before { transform: translateY(0); } }
.btn__arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: rotate(-45deg); } }
.btn--solid { background: var(--white); color: var(--black); border-color: var(--white); }
.u-link { position: relative; display: inline-flex; align-items: center; gap: .5rem; color: var(--white); padding: .3rem 0; }
.u-link::after { bottom: 0; transform: scaleX(1); transform-origin: left; background: var(--line); }
.u-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-light); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-out); z-index: 1; }
.u-link:hover::before, .u-link:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.u-link:hover, .u-link:focus-visible { color: var(--gold-light); }
.eyebrow { display: inline-flex; align-items: center; gap: .9rem; font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--white-muted); }
.rule { height: 1px; background: var(--line); transform-origin: left; }
.tag { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white-muted); }
.tag--draft { color: var(--gold-light); border-color: rgba(212,175,90,.5); }
.tag--draft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--header-h) + clamp(1rem, 3vh, 2.5rem)); padding-bottom: clamp(1.5rem, 4vh, 3rem); }
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
@media (min-width: 761px) { .hero__top { padding-left: calc(var(--pad) + 42%); } }
@media (min-width: 761px) and (max-width: 1366px) { .hero__top { padding-left: calc(var(--pad) + 34%); } }
.hero__id { font-size: clamp(.78rem, .74rem + .2vw, .9rem); letter-spacing: .3em; text-transform: uppercase; line-height: 1.7; font-weight: 400; }
.hero__id { text-shadow: 0 1px 14px rgba(0,0,0,.7); }
.hero__id strong { display: block; font-weight: 700; letter-spacing: .32em; color: var(--white); }
.hero__id span { display: block; color: var(--white-muted); }
.hero__genres { text-align: right; font-size: .85rem; letter-spacing: .22em; text-transform: uppercase; color: var(--white-muted); line-height: 1.9; }
.hero__genres span { display: block; white-space: nowrap; }
.hero__genres span + span { color: var(--gold-light); font-family: var(--serif); font-style: normal; text-transform: none; letter-spacing: .02em; font-size: 1.15rem; }
.hero__stage { flex: 1; min-height: 1rem; }
.slogan { margin: 0; line-height: .8; position: relative; }
.slogan__peace {
  display: block; font-family: var(--sans); font-weight: 800; letter-spacing: -.065em; 
  font-size: clamp(5rem, min(19.5vw, 31svh), 21rem); color: var(--white); margin-left: -.06em;
  text-shadow: 0 6px 40px rgba(0,0,0,.28);
}
.slogan__well {
  display: block; font-family: var(--serif); font-style: normal; font-weight: 400; color: var(--gold-light);
  font-size: clamp(3.4rem, min(12.5vw, 20svh), 13rem); letter-spacing: -.02em; line-height: .9;
  margin-top: -.18em; padding-left: clamp(1rem, 30vw, 34rem);
  text-shadow: 0 0 40px rgba(176,136,36,.25);
}
.hero__bottom { margin-top: clamp(1.25rem, 3.5vh, 2.5rem); display: grid; grid-template-columns: minmax(0, 1.25fr) auto; gap: 1.25rem 3rem; align-items: end; padding-top: clamp(1rem, 2.5vh, 1.75rem); position: relative; }
.hero__bottom > .rule { position: absolute; top: 0; left: 0; right: 0; }
.hero__lead { max-width: 34rem; margin: 0; font-size: clamp(1.05rem, .98rem + .35vw, 1.3rem); line-height: 1.45; color: var(--white); }
.hero__lead em { color: var(--gold-light); }
.hero__cta { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.scroll-cue { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--white-muted); }
.scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--gold-light), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- sections ---------- */
.section { position: relative; padding-block: clamp(5.5rem, 11vw, 10rem); background: rgba(9,11,12,var(--veil, .86)); }
.section--fade { background: linear-gradient(180deg, rgba(9,11,12,0) 0, rgba(9,11,12,var(--veil, .86)) clamp(8rem, 18vw, 16rem)); padding-top: clamp(7rem, 15vw, 13rem); }
.section-head { display: grid; grid-template-columns: minmax(10rem, 1fr) 3fr; gap: 1.5rem 3rem; align-items: end; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section-head__label { display: flex; flex-direction: column; gap: 1rem; align-self: start; padding-top: .6rem; }
.section-head__label .rule { width: 100%; max-width: 12rem; background: var(--gold); }
.section-title { font-size: clamp(2.7rem, 1.6rem + 5.4vw, 7.25rem); font-weight: 700; letter-spacing: -.045em; line-height: .92; }
.section-title em { display: block; color: var(--gold-light); font-size: 1.02em; letter-spacing: -.02em; line-height: .95; }
.section-intro { max-width: 36rem; color: var(--white-muted); font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); margin: 1.5rem 0 0; }

/* ---------- beats ---------- */
.player { border: 1px solid var(--line); background: rgba(17,18,15,.72); border-radius: 4px; overflow: hidden; }
.player__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--white-muted); }
.player__bar strong { color: var(--white); font-weight: 500; letter-spacing: .04em; }
.player__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); margin-right: .6rem; box-shadow: 0 0 10px var(--gold); vertical-align: middle; }
.player iframe { width: 100%; height: 720px; border: 0; background: var(--black-soft); }
.beats__foot { margin-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--white-muted); font-size: .95rem; }

/* ---------- discography ---------- */
.section--discography { --veil: .62; }
.albums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 8vw, 9rem); }
.album:nth-child(even) { margin-top: clamp(0rem, 12vw, 11rem); }
.album__link { display: block; perspective: 1100px; }
.album__frame {
  --rx: 0deg; --ry: 0deg; --lx: 50%; --ly: 50%;
  position: relative; aspect-ratio: 1; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform .9s var(--ease-out), box-shadow .9s var(--ease-out);
  box-shadow: 0 18px 44px -24px rgba(0,0,0,.6);
}
.album__frame img { width: 100%; height: 100%; object-fit: cover; transition: filter .9s var(--ease); filter: saturate(.92); }
.album__halo { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease);
  background: radial-gradient(60% 60% at var(--lx) var(--ly), rgba(212,175,90,.32), rgba(176,136,36,0) 70%); mix-blend-mode: screen; }
.album__frame::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(212,175,90,0); transition: border-color .7s var(--ease), inset .7s var(--ease-out); pointer-events: none; }
.album__overlay {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem .85rem 1.2rem; background: rgba(9,11,12,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 999px; font-size: .95rem; letter-spacing: .04em;
  opacity: 0; transform: translateY(12px) translateZ(30px); transition: opacity .6s var(--ease), transform .7s var(--ease-out);
}
.album__overlay svg { width: 22px; height: 22px; color: var(--gold-light); flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .album__link:hover .album__frame, .album__link:focus-visible .album__frame { box-shadow: 0 40px 120px -30px rgba(176,136,36,.35), 0 30px 80px -30px rgba(0,0,0,.9); } }
@media (hover: hover) and (pointer: fine) { .album__link:hover .album__halo, .album__link:focus-visible .album__halo { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .album__link:hover .album__frame::after, .album__link:focus-visible .album__frame::after { border-color: rgba(212,175,90,.6); inset: -10px; } }
@media (hover: hover) and (pointer: fine) { .album__link:hover .album__overlay, .album__link:focus-visible .album__overlay { opacity: 1; transform: translateY(0) translateZ(30px); } }
@media (hover: hover) and (pointer: fine) { .album__link:hover img, .album__link:focus-visible img { filter: saturate(1.05) brightness(1.04); } }
.album__link:focus-visible { outline: none; }
.album__link:focus-visible .album__frame { outline: 2px solid var(--gold-light); outline-offset: 14px; }
.album__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.album__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; }
.album__title em { color: var(--gold-light); font-size: .9em; }
.album__kind { font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--white-muted); text-align: right; }
.discography__foot { margin-top: clamp(3rem, 7vw, 6rem); color: var(--white-muted); }

/* ---------- services ---------- */
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.service { position: relative; border-bottom: 1px solid var(--line); }
.service::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(176,136,36,.10), rgba(176,136,36,0) 70%); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.service__row { display: grid; grid-template-columns: 5rem minmax(0, 1.35fr) minmax(0, 1fr) auto; gap: 1rem 2.5rem; align-items: start; padding: clamp(1.75rem, 3.2vw, 2.75rem) 0; position: relative; }
.service__num { font-family: var(--serif); font-style: normal; font-size: 1.6rem; color: var(--gold-light); line-height: 1; padding-top: .35rem; }
.service__title { font-size: clamp(1.75rem, 1.2rem + 2.3vw, 3.4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; transition: transform .7s var(--ease-out), color .5s; }
.service__desc { margin: 0; color: var(--white-muted); font-size: 1.02rem; max-width: 30rem; }
.service__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-out), opacity .5s; opacity: 0; }
.service__more > span { overflow: hidden; display: block; color: var(--white); font-family: var(--serif); font-style: normal; font-size: 1.2rem; line-height: 1.35; }
.service__more > span::before { content: "— "; color: var(--gold-light); }
.service__side { display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; text-align: right; min-width: 11rem; }
.service__price { font-size: clamp(1.4rem, 1.2rem + .8vw, 2rem); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.service__price--quote { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); color: var(--gold-light); white-space: normal; max-width: 12rem; line-height: 1.15; }
.service__actions { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.service__cta { font-size: .95rem; }
.service__cta--secondary { color: var(--white-muted); font-size: .88rem; }
.service__cta--secondary:hover, .service__cta--secondary:focus-visible { color: var(--gold-light); }
.service__cta svg { width: 14px; height: 14px; transition: transform .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .service:hover::before, .service:focus-within::before { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .service:hover .service__title, .service:focus-within .service__title { transform: translateX(.6rem); } }
@media (hover: hover) and (pointer: fine) { .service:hover .service__more, .service:focus-within .service__more { grid-template-rows: 1fr; opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .service:hover .service__cta svg, .service:focus-within .service__cta svg { transform: translateX(4px); } }
.services__note { margin-top: 1.75rem; color: var(--white-muted); font-size: .95rem; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.portrait { position: relative; margin: 0; max-width: 560px; }
.portrait__img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--black-soft); }
.portrait__img img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; filter: grayscale(1) contrast(1.12) brightness(.9); transition: transform 1.4s var(--ease-out), filter 1s; }
.portrait__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,11,12,0) 55%, rgba(9,11,12,.55)); }
@media (hover: hover) and (pointer: fine) { .portrait:hover .portrait__img img { transform: scale(1.03); } }
.portrait::before { content: ""; position: absolute; left: -14px; top: 14%; width: 2px; height: 34%; background: var(--gold); box-shadow: 0 0 18px rgba(176,136,36,.5); z-index: 1; }
.portrait figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--white-muted); }
.portrait figcaption em { text-transform: none; letter-spacing: 0; font-size: 1.1rem; color: var(--gold-light); }
.about__text { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.05rem); line-height: 1.32; letter-spacing: -.012em; font-weight: 400; max-width: 38rem; margin: 2rem 0; }
.about__text em { color: var(--gold-light); }
.about__tags { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.signature { margin-top: 2.5rem; font-family: var(--serif); font-style: normal; font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); color: var(--gold-light); line-height: 1; }

/* ---------- blog cards ---------- */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.post-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem clamp(1.5rem, 4vw, 4rem); padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); align-items: center; }
.post-card__img { overflow: hidden; aspect-ratio: 3 / 2; background: var(--black-soft); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.8); transition: transform 1.2s var(--ease-out), filter .8s; }
@media (hover: hover) and (pointer: fine) { .post-card:hover .post-card__img img, .post-card:focus-within .post-card__img img { transform: scale(1.04); filter: grayscale(0) brightness(.95); } }
.post-card__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; color: var(--white-muted); font-size: .9rem; margin-bottom: 1rem; }
.post-card__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; margin-bottom: .9rem; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card__title a:focus-visible { outline: none; }
.post-card:focus-within { outline: 2px solid var(--gold-light); outline-offset: 6px; }
.post-card__excerpt { color: var(--white-muted); max-width: 40rem; }
.blog__foot { margin-top: 2rem; }

/* ---------- contact ---------- */
.section--contact { overflow: hidden; --veil: .9; }
.contact-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: .32; }
.contact-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--black) 10%, rgba(9,11,12,.55) 60%, rgba(9,11,12,.8)), linear-gradient(180deg, var(--black), rgba(9,11,12,0) 30%, rgba(9,11,12,0) 70%, var(--black)); }
.section--contact > .container { position: relative; z-index: 1; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 6vw, 7rem); }
.contact__mail { display: inline-block; margin: 2rem 0 .5rem; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.4rem); font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; }
.contact__aside p { color: var(--white-muted); max-width: 28rem; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.5rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label, .field .label { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--white-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: .8rem 0; font: inherit; font-size: 1.1rem; color: var(--white);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; transition: border-color .4s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23c0ac60' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .2rem center; padding-right: 1.8rem; cursor: pointer; }
.field select option { background: var(--black-soft); color: var(--white); }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(243,238,227,.4); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--gold-light); box-shadow: 0 1px 0 0 var(--gold-light); }
.field [aria-invalid="true"] { border-color: #c9826b; }
.field__error { min-height: 1.2em; font-size: .9rem; color: #e0a690; }
.check { grid-column: 1 / -1; display: flex; gap: .9rem; align-items: flex-start; font-size: 1rem; color: var(--white-muted); cursor: pointer; }
.field .check { text-transform: none; letter-spacing: 0; font-size: 1rem; color: #e6e0d3; line-height: 1.5; }
.field .check input[type=checkbox] { flex-shrink: 0; width: 22px; height: 22px; min-height: 0; margin: .05rem 0 0; padding: 0; border: 1px solid rgba(243,238,227,.55); border-radius: 3px; background: transparent center / 14px no-repeat; cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.field .check input[type=checkbox]:hover { border-color: var(--gold-light); }
.field .check input[type=checkbox]:checked { background-color: var(--gold); border-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23090a09' stroke-width='2'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E"); }
.field .check input[type=checkbox]:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; box-shadow: none; }
.field .check input[aria-invalid="true"] { border-color: #c9826b; }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.form__actions button { cursor: pointer; font-family: inherit; }
.form__note { margin: 0; font-size: .95rem; color: var(--white-muted); max-width: 26rem; }
.form__status { grid-column: 1 / -1; min-height: 1.5em; color: var(--gold-light); font-size: 1rem; margin: 0; }
.form__status a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- social ---------- */
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.social a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem .95rem; border: 1px solid var(--line); border-radius: 999px; font-size: .92rem; color: var(--white-muted); transition: color .4s, border-color .4s, background-color .4s; }
.social svg { width: 17px; height: 17px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .social a:hover, .social a:focus-visible { color: var(--black); background: var(--gold-light); border-color: var(--gold-light); } }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--black); border-top: 1px solid var(--line); padding: clamp(4rem, 8vw, 7rem) 0 2rem; overflow: hidden; }
.footer__sign { font-family: var(--serif); font-style: normal; font-size: clamp(4rem, 15vw, 15rem); line-height: .85; color: transparent; -webkit-text-stroke: 1px rgba(212,175,90,.45); letter-spacing: -.02em; white-space: nowrap; margin: 0 0 clamp(2.5rem, 6vw, 5rem); }
.footer__sign span { color: var(--gold-light); -webkit-text-stroke: 0; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.6fr; gap: 2.5rem; align-items: start; }
.footer__logo { width: 190px; opacity: .92; }
.footer__grid h2 { font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--white-muted); font-weight: 500; margin-bottom: 1.1rem; }
.footer__nav { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.footer__nav li { margin-bottom: .35rem; }
.footer__base { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--white-muted); font-size: .9rem; }

/* ---------- inner pages (blog) ---------- */
.page { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); }
.page-hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-title { font-size: clamp(3rem, 2rem + 6vw, 8rem); font-weight: 800; letter-spacing: -.055em; line-height: .9; margin: 1.5rem 0 1.5rem; }
.page-title em { color: var(--gold-light); font-weight: 400; letter-spacing: -.02em; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .6rem; font-size: .9rem; color: var(--white-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: .6rem; color: var(--gold); }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--gold-light); }
.page-body { background: rgba(9,11,12,.9); padding-block: clamp(3rem, 7vw, 6rem); }
.notice { display: block; padding: 1.1rem 1.3rem; border: 1px solid rgba(212,175,90,.45); background: rgba(176,136,36,.08); border-radius: 4px; margin-bottom: 2.5rem; color: var(--white); }
.article { max-width: 46rem; margin-inline: auto; }
.article__meta { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; align-items: center; color: var(--white-muted); font-size: .95rem; }
.article__cover { margin: 0 0 3rem; }
.article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(.85); }
.article__cover figcaption { margin-top: .6rem; font-size: .88rem; color: var(--white-muted); }
.prose { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); line-height: 1.75; color: #e6e0d3; }
.prose h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); margin: 2.5em 0 .8em; letter-spacing: -.03em; color: var(--white); }
.prose blockquote { margin: 2em 0; padding-left: 1.4rem; border-left: 2px solid var(--gold); font-family: var(--serif); font-style: normal; font-size: 1.5em; line-height: 1.3; color: var(--white); }
.prose a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-left: 1.2rem; }
.article__back { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* ---------- legal pages, placeholders, post CTA, Spotify facade, form states (round 3) ---------- */
mark.pending { display: inline; padding: .05em .35em; margin: 0 .05em; background: rgba(176,136,36,.10); color: var(--gold-light); outline: 1.5px dashed var(--gold); outline-offset: 1px; border-radius: 2px; font-style: normal; font-size: .92em; letter-spacing: .02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.legal { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 46rem); gap: clamp(2rem, 6vw, 6rem); justify-content: center; }
.legal__aside { position: relative; }
.toc { position: sticky; top: calc(var(--header-h) + 2rem); }
.toc ol { list-style: none; margin: 1.1rem 0 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: .38rem 0 .38rem 1rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--white-muted); font-size: .95rem; line-height: 1.3; transition: color .4s var(--ease), border-color .4s var(--ease); }
.toc a:hover, .toc a:focus-visible { color: var(--gold-light); border-color: var(--gold-light); }
.legal__main { min-width: 0; }
.legal__main h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); margin: 2.4em 0 .7em; }
.legal__sec { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal__sec:first-of-type h2 { margin-top: 1.4em; }
.legal__meta { font-size: .95rem; color: var(--white-muted); margin: 0 0 1rem; }
.legal__legend { font-size: .95rem; color: var(--white-muted); padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 4px; margin: 0; }
.legal-data { list-style: none; padding: 0 !important; margin: 0; border-top: 1px solid var(--line); }
.legal-data li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.legal-data li > span:first-child { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--white-muted); padding-top: .3em; }
.legal__summary { margin: 0 0 2rem; padding: clamp(1.2rem, 3vw, 1.75rem); border: 1px solid rgba(212,175,90,.4); background: linear-gradient(135deg, rgba(176,136,36,.12), rgba(176,136,36,0) 70%); border-radius: 4px; }
.legal__summary-title { font-family: var(--serif); font-style: normal; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--gold-light); margin: 0 0 .75rem; line-height: 1.15; }
.legal__summary p:last-child { margin: 0; color: #e6e0d3; }
.legal__disclaimer { margin-top: 3rem; font-size: .9rem; color: var(--white-muted); font-style: normal; }
.prose .legal__disclaimer, .prose .legal__meta, .prose .legal__legend { line-height: 1.6; }
.footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.footer__legal .u-link { color: var(--white-muted); padding: .55rem 0; }
.footer__legal .u-link:hover, .footer__legal .u-link:focus-visible { color: var(--gold-light); }
.footer__base { align-items: center; }
.post-cta { margin-top: 4rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(212,175,90,.35); background: linear-gradient(135deg, rgba(176,136,36,.10), rgba(176,136,36,0) 60%); }
.post-cta__title { font-family: var(--serif); font-style: normal; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.1; color: var(--gold-light); margin: 0 0 .8rem; }
.post-cta p { color: #e6e0d3; margin: 0 0 1.6rem; max-width: 38rem; }
.post-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.related { margin-top: 3.5rem; }
.related ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.related .u-link { font-size: 1.1rem; }
.page-title--post { font-size: clamp(2.4rem, 1.6rem + 4vw, 5.2rem); overflow-wrap: break-word; hyphens: auto; }
.album__embed { margin-top: 1.1rem; }
.embed-btn { display: inline-flex; align-items: center; gap: .9rem; width: 100%; min-height: 64px; padding: .75rem 1.1rem; text-align: left; color: var(--white); background: rgba(17,18,15,.72); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font: inherit; transition: border-color .5s var(--ease), background-color .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .embed-btn:hover, .embed-btn:focus-visible { border-color: var(--gold-light); background: rgba(176,136,36,.10); } }
.embed-btn__icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(212,175,90,.55); color: var(--gold-light); transition: transform .6s var(--ease-out); }
.embed-btn__icon svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .embed-btn:hover .embed-btn__icon, .embed-btn:focus-visible .embed-btn__icon { transform: scale(1.08); } }
.embed-btn__txt { display: grid; gap: .1rem; }
.embed-btn__txt strong { font-weight: 600; font-size: 1.02rem; }
.embed-btn__txt small { font-size: .85rem; color: var(--white-muted); }
.embed-note { margin: .6rem 0 0; font-size: .82rem; color: var(--white-muted); }
.embed-note a { text-decoration: underline; text-underline-offset: 3px; }
.embed-note a:hover, .embed-note a:focus-visible { color: var(--gold-light); }
.album__embed.is-loaded { min-height: 152px; }
.embed-frame { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; background: var(--black-soft); }
html:not(.js) .album__embed { display: none; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.check a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.check a:hover, .check a:focus-visible { color: var(--gold-light); }
.form__info { margin: .9rem 0 0 calc(22px + .9rem); font-size: .82rem; line-height: 1.55; color: var(--white-muted); max-width: 44rem; }
.form__info a { text-decoration: underline; text-underline-offset: 3px; }
.form__status.is-sending { color: var(--white-muted); }
.form__status.is-success { color: var(--white); padding: 1rem 1.2rem; border: 1px solid rgba(212,175,90,.55); background: rgba(176,136,36,.10); border-radius: 4px; }
.form__status.is-success::before { content: "✓"; color: var(--gold-light); margin-right: .6rem; }
.form__status.is-error { color: #e9c9a0; }
.btn.is-busy { opacity: .7; cursor: progress; }
.btn.is-busy .btn__arrow { animation: busy 1.1s linear infinite; }
@keyframes busy { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc ol { columns: 2; column-gap: 1.5rem; }
  .toc li { break-inside: avoid; }
}
@media (max-width: 560px) {
  .toc ol { columns: 1; }
  .legal-data li { grid-template-columns: 1fr; gap: .2rem; }
  .form__info { margin-left: 0; }
}

/* BeatStars click-to-load facade */
.beats-embed { position: relative; display: grid; place-items: center; min-height: clamp(420px, 34vw + 120px, 520px); overflow: hidden; background: var(--black-soft); transition: min-height .9s var(--ease-out); }
.beats-embed.is-loaded { display: block; min-height: 720px; background: transparent; }
.beats-embed.is-loaded iframe { display: block; width: 100%; height: 720px; border: 0; }
.beats-embed__bg { position: absolute; inset: 0; }
.beats-embed__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; filter: grayscale(.35) brightness(.38) contrast(1.05); transform: scale(1.03); transition: transform 1.6s var(--ease-out), filter 1s var(--ease); }
.beats-embed__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(9,11,12,.25), rgba(9,11,12,.85)); }
@media (hover: hover) and (pointer: fine) { .beats-embed:hover .beats-embed__bg img, .beats-embed:focus-within .beats-embed__bg img { transform: scale(1); filter: grayscale(.2) brightness(.45) contrast(1.05); } }
.beats-embed__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; padding: 2.5rem clamp(1.25rem, 4vw, 3rem); max-width: 34rem; }
.beats-embed__logo { width: 40px; height: auto; filter: drop-shadow(0 0 18px rgba(212,175,90,.45)); }
.beats-embed__kicker { margin: 0; font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); }
.beats-embed__btn { margin-top: .4rem; font-family: inherit; font-size: inherit; line-height: inherit; cursor: pointer; }
.beats-embed__note { margin: .3rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--white-muted); max-width: 28rem; }
.beats-embed__note a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.beats-embed__note a:hover, .beats-embed__note a:focus-visible { color: var(--gold-light); }
@media (max-width: 760px) { .beats-embed.is-loaded, .beats-embed.is-loaded iframe { min-height: 700px; } .beats-embed { min-height: 440px; } }

/* ---------- reveal motion (only when JS adds .js on <html>) ---------- */
.js .hero .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease-out); transition-delay: var(--d, 0s); }
.js .hero .reveal.is-in { opacity: 1; transform: none; }
.js .hero .rule.draw { transform: scaleX(0); transition: transform 1.6s var(--ease-out); transition-delay: var(--d, 0s); }
.js .hero .rule.draw.is-in { transform: scaleX(1); }
.js .hero .slogan__peace, .js .hero .slogan__well { transition: opacity 1.4s var(--ease), transform 1.6s var(--ease-out), letter-spacing 1.8s var(--ease-out); }
.js .hero:not(.is-in) .slogan__peace { opacity: 0; transform: translateY(.12em); letter-spacing: -.02em; }
.js .hero:not(.is-in) .slogan__well { opacity: 0; transform: translateX(-.3em); }
.js .hero .slogan__well { transition-delay: .35s; }

/* ---------- touch devices: no hover, show states statically ---------- */
@media (hover: none) {
  .album__overlay { opacity: 1; transform: none; left: .75rem; right: auto; bottom: .75rem; padding: .6rem .8rem .6rem 1rem; font-size: .9rem; }
  .service__more { grid-template-rows: 1fr; opacity: 1; }
  .dots__label { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header__inner { gap: 1rem; }
  .lang { margin-left: auto; }
  .service__row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .service__desc-wrap { grid-column: 2 / 3; }
  .service__side { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; }
  .about, .contact { grid-template-columns: 1fr; }
  .portrait { max-width: 520px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .post-card { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --header-h: 84px; }
  .dots { display: none; }
  .brand__name span { display: none; }
  .hero__top { flex-direction: column; align-items: flex-end; text-align: right; gap: .9rem; padding-left: 40%; padding-right: var(--pad); }
  .hero__id { letter-spacing: .2em; font-size: .74rem; }
  .hero__id strong { letter-spacing: .24em; }
  .hero__genres { text-align: right; letter-spacing: .14em; font-size: .76rem; line-height: 1.8; }
  .hero__genres span + span { font-size: 1.05rem; }
  .slogan__peace { font-size: clamp(4.5rem, 30vw, 9rem); }
  .slogan__well { font-size: clamp(3rem, 18.5vw, 6rem); padding-left: 16vw; margin-top: -.12em; }
  .hero__bottom { grid-template-columns: 1fr; }
  .albums { grid-template-columns: 1fr; gap: 4rem; }
  .album:nth-child(even) { margin-top: 0; }
  .service__row { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .8rem 1rem; }
  .service__desc-wrap { grid-column: 2; }
  .service__side { grid-column: 2; grid-row: auto; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; min-width: 0; flex-wrap: wrap; }
  .service__actions { align-items: flex-start; }
  .service__price--quote { max-width: none; }
  .service:hover .service__title, .service:focus-within .service__title { transform: none; }
  .form { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .player iframe { height: 720px; min-height: 700px; }
  .stage__media img { object-position: 22% 50%; }
}
@media (max-width: 480px) {
  .brand__name { display: none; }
}
@media (max-width: 380px) {
  .lang a { min-width: 2.3rem; padding: .35rem .5rem; }
  .menu-toggle { padding-inline: .8rem; }
}
/* portrait phones/tablets use the tighter crop (clef + desk + first light trails) */
@media (orientation: portrait) and (min-width: 761px) and (max-width: 1100px) {
  .hero__top { padding-left: 45%; }
  .hero__top { flex-direction: column; align-items: flex-end; text-align: right; gap: 1rem; }
  .hero__genres { text-align: right; }
  .slogan__peace { font-size: 25vw; }
  .slogan__well { font-size: 15.5vw; padding-left: 22vw; }
}
@media (orientation: portrait) and (max-width: 1100px) {
  .stage__media img { object-position: 6% 50%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .rule.draw, .js .hero:not(.is-in) .slogan__peace, .js .hero:not(.is-in) .slogan__well { opacity: 1 !important; transform: none !important; }
  .js .hero:not(.is-in) .slogan__peace { letter-spacing: -.065em; }
  .album__frame { transform: none !important; }
  .btn { transform: none !important; }
  .scroll-cue i { animation: none; }
}
/* hero reveal is driven by .hero.is-in (not by scroll) */
.js .hero.is-in .reveal, .js .hero.is-in .rule.draw { opacity: 1; transform: none; }

/* ---------- CTA hierarchy: the hero "Explorar beats" is the ONLY primary button ---------- */
.btn--primary { background: var(--gold-light); color: var(--black); border-color: var(--gold-light); font-weight: 600; }
.btn--primary::before { background: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover, .btn--primary:focus-visible { border-color: var(--white); } }

/* ---------- 404 ---------- */
.nf { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
.nf__code { font-family: var(--serif); font-style: normal; color: var(--gold-light); font-size: clamp(4rem, 14vw, 9rem); line-height: 1; margin: 0 0 1rem; }
.nf__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.5rem; }
.nf__actions .u-link { min-height: 44px; }

/* ---------- Cookie consent (banner + dialog) ---------- */
.cc { display: none; position: fixed; z-index: 90; left: 1rem; right: 1rem; bottom: 1rem; max-width: 40rem; margin-inline: auto;
  background: rgba(14,15,13,.97); border: 1px solid rgba(212,175,90,.45); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
html.js.cc-ask .cc { display: block; animation: cc-in .5s var(--ease-out) both; }
@keyframes cc-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { html.js.cc-ask .cc { animation: none; } }
.cc__inner, .cc-dlg__form { padding: 1.25rem 1.35rem 1.35rem; }
.cc__title { font-family: var(--serif); font-style: normal; font-size: 1.45rem; color: var(--gold-light); margin: 0 0 .4rem; }
.cc__text { color: #e6e0d3; font-size: .95rem; line-height: 1.55; margin: 0; }
.cc__text a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.cc__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.cc-btn { flex: 1 1 8.5rem; min-height: 46px; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--white); background: var(--white); color: var(--black);
  font: 600 .95rem/1.2 var(--sans); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
@media (hover: hover) and (pointer: fine) { .cc-btn:hover, .cc-btn:focus-visible { background: var(--gold-light); border-color: var(--gold-light); } }
.cc-btn--ghost { background: transparent; color: var(--white); border-color: rgba(243,238,227,.55); }
@media (hover: hover) and (pointer: fine) { .cc-btn--ghost:hover, .cc-btn--ghost:focus-visible { color: var(--black); } }
.cc-dlg { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; color: var(--white);
  background: #141416; border: 1px solid rgba(212,175,90,.45); border-radius: 18px; }
.cc-dlg::backdrop { background: rgba(0,0,0,.65); }
.cc-dlg__form { position: relative; }
.cc-dlg__x { position: absolute; top: .5rem; right: .5rem; width: 44px; height: 44px; border: 0; background: none; color: var(--white); font-size: 1.6rem; cursor: pointer; border-radius: 50%; }
.cc-row { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--line); }
.cc-row:first-of-type { margin-top: 1rem; }
.cc-row label { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.cc-row p { grid-column: 1 / -1; margin: 0; color: var(--white-muted); font-size: .9rem; line-height: 1.5; }
.cc-row small { grid-column: 2; color: var(--white-muted); font-size: .8rem; justify-self: end; }
.cc-sw { position: relative; display: inline-block; width: 52px; height: 30px; }
.cc-sw input { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); margin: 0; opacity: 0; cursor: pointer; z-index: 1; -webkit-appearance: auto; appearance: auto; }
.cc-sw span { position: absolute; inset: 0; border-radius: 999px; background: #3a3b36; border: 1px solid rgba(243,238,227,.45); transition: background-color .3s; }
.cc-sw span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); transition: transform .3s var(--ease-out); }
.cc-sw input:checked + span { background: var(--gold); border-color: var(--gold); }
.cc-sw input:checked + span::after { transform: translateX(22px); }
.cc-sw input:focus-visible + span { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.cc-sw--locked { opacity: .6; } .cc-sw--locked input { cursor: not-allowed; }
.cc-row:has(.cc-sw--locked) { grid-template-columns: 1fr auto auto; } .cc-row:has(.cc-sw--locked) small { grid-column: auto; }

/* ---------- tap targets ≥ 44px (WCAG 2.5.5 AAA / Apple HIG) ---------- */
.u-link:not(.prose .u-link) { min-height: 44px; }
.lang a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.brand { min-height: 44px; }
.brand { min-width: 44px; }

/* contrast: placeholder was the UA default #757575 (3.9:1 on the form) → #9d9d94 */
.field input::placeholder, .field textarea::placeholder { color: #9d9d94; opacity: 1; }
/* contrast: scroll cue on mobile #b5b5ab = 2.5:1 over the lit road in the photo → cream + dark halo (≥4.6:1) */
.scroll-cue { color: var(--white); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.85); }

/* ==========================================================================
   BRAND KIT 2026 (Manual de marca · 07 Paleta, 08 Tipografía)
   Titular: Cinzel Black/Bold, mayúsculas, oro o marfil · Subtítulo: Cinzel Regular
   Etiqueta: Inter SemiBold mayúsculas, tracking amplio · Texto: Inter Regular marfil
   Llamada: Inter SemiBold · Oro solo como acento (nunca en textos largos)
   Cinzel is a capitals face (no italic): former italic accents become Cinzel Regular in gold.
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: .01em; }
em, .serif { font-family: var(--serif); font-style: normal; font-weight: 400; letter-spacing: .02em; }
.prose em, .legal__main em, .post-cta p em, .cc__text em { font-family: inherit; font-style: italic; letter-spacing: 0; }
strong, b { font-weight: 600; }

.slogan__peace { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em;
  font-size: clamp(3.2rem, min(14vw, 23.5svh), 15rem); margin-left: -.03em; }
.slogan__well { font-family: var(--display); font-weight: 400; letter-spacing: .02em; text-transform: none;
  font-size: clamp(2rem, min(7.9vw, 13.2svh), 8.4rem); margin-top: -.05em; text-shadow: none; }
.js .hero:not(.is-in) .slogan__peace { letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) { .js .hero:not(.is-in) .slogan__peace { letter-spacing: .005em; } }

.section-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: .98;
  font-size: clamp(2.1rem, 1.2rem + 4.4vw, 5.6rem); }
.section-title em { font-weight: 400; letter-spacing: .02em; font-size: .92em; line-height: 1.05; }
.page-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: 1;
  font-size: clamp(2.2rem, 1.4rem + 4.2vw, 6rem); overflow-wrap: break-word; hyphens: auto; }
.page-title em { font-weight: 400; letter-spacing: .02em; }

.album__title, .service__title, .post-card__title { font-family: var(--display); font-weight: 700; letter-spacing: .01em; line-height: 1.08; }
.album__title { font-size: clamp(1.7rem, 1.2rem + 2vw, 3rem); }
.service__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.8rem); }
.post-card__title { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.05rem); }
.prose h2, .legal__main h2 { font-weight: 700; letter-spacing: .01em; line-height: 1.15; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.05rem); }
.prose h3, .legal__main h3 { font-weight: 700; letter-spacing: .01em; line-height: 1.2; }
.service__price, .contact__mail, .mobile-menu a { letter-spacing: -.01em; }
.service__num, .service__more > span, .service__price--quote, .signature, .legal__summary-title, .post-cta__title, .nf__code, .cc__title, .prose blockquote { letter-spacing: .02em; }
.service__price--quote, .signature { font-weight: 400; }
.mobile-menu a { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.footer__sign { font-family: var(--display); font-weight: 400; letter-spacing: .02em; font-size: clamp(2.6rem, 11vw, 11rem); white-space: normal; }
.about__text { letter-spacing: 0; }
/* labels (Etiqueta): Inter SemiBold, uppercase, wide tracking */
.footer__grid h2, .eyebrow, .hero__genres span:first-child, .post-card__meta, .kicker { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: .24em; }
.footer__grid h2 { font-size: .78rem; }
.btn, .cc-btn, .embed-btn__txt strong { font-family: var(--sans); font-weight: 600; }
.hero__genres span + span { font-family: var(--display); letter-spacing: .04em; }

/* ---------- official logo (01_Logotipo / 02_Pictograma) ---------- */
/* clear zone ≥ 20 % of the logo height on every side; min width 120 px; no effects/shadows (05 Usos incorrectos) */
.brand { gap: 0; padding-block: 4px; }
.brand__logo { display: block; width: 128px; height: auto; }
.footer__logo { width: 200px; height: auto; opacity: 1; margin: 8px 0; }
.beats-embed__logo { width: 40px; filter: none; }
.brand img { filter: none; }
@media (max-width: 380px) { .brand__logo { width: 120px; } }
.brand .brand__logo { width: 128px; height: auto; filter: none; }
.hero__id { font-family: var(--sans); }
.hero__id strong { font-family: var(--display); font-weight: 700; letter-spacing: .14em; font-size: 1.12em; }
.hero__id span { font-weight: 600; letter-spacing: .24em; font-size: .86em; }
@media (max-width: 760px) {
  .hero__id { letter-spacing: .16em; }
  .hero__id span { letter-spacing: .16em; }
  .hero__genres { letter-spacing: .14em; font-size: .78rem; }
  .hero__genres span + span { font-size: .98rem; letter-spacing: .02em; white-space: normal; }
}
@media (max-width: 380px) { .brand .brand__logo { width: 120px; } .hero__genres span { white-space: normal; } }
@media (max-width: 380px) {
  .site-header__inner { gap: .5rem; }
  .menu-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-toggle { min-width: 44px; justify-content: center; }
  .hero__genres { letter-spacing: .08em; font-size: .72rem; }
  .hero__genres span + span { font-size: .9rem; }
}
.footer__sign { font-size: clamp(1.6rem, 7.4vw, 7.6rem); white-space: nowrap; line-height: 1; max-width: 100%; }
.page-title { hyphens: manual; }
.page-title--post { font-weight: 700; font-size: clamp(1.75rem, 1.15rem + 2.5vw, 3.7rem); line-height: 1.08; max-width: 22ch; }
.post-card__meta { letter-spacing: .12em; font-size: .76rem; }
@media (max-width: 440px) {
  .site-header__inner { gap: .5rem; }
  .menu-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-toggle { min-width: 44px; justify-content: center; }
}
@media (max-width: 760px) { .brand .brand__logo { width: 120px; } }
.footer__sign { -webkit-text-stroke: 1px var(--gold); }

/* Hero logo above the Cinzel slogan. Clear zone per brand manual: 25% of logo height on every side (manual minimum 20%). */
.hero__logo { --lw: clamp(150px, 16vw, 240px); display: block; width: var(--lw); height: auto;
  margin: calc(var(--lw) * .1453) 0 calc(var(--lw) * .1453) 0; }

/* ==========================================================================
   UX ROUND (2026-11): press feedback · hover only on mouse · fast UI motion ·
   quiet labels · less uppercase · moderate gold · tap targets · album shadow
   ========================================================================== */
:root { --ui: cubic-bezier(.23, 1, .32, 1); --ui-fast: 160ms; --ui-med: 240ms; }

/* focus-visible stays for everyone (the hover twins live in @media (hover:hover) and (pointer:fine)) */
.btn:focus-visible { color: var(--black); border-color: var(--gold-light); }
.btn:focus-visible::before { transform: translateY(0); }
.btn:focus-visible .btn__arrow { transform: rotate(-45deg); }
.btn--primary:focus-visible { border-color: var(--white); }
.brand:focus-visible img { transform: rotate(-8deg) scale(1.06); }
.album__link:focus-visible .album__halo { opacity: 1; }
.album__link:focus-visible .album__frame::after { border-color: rgba(212,175,90,.6); inset: -10px; }
.album__link:focus-visible .album__overlay { opacity: 1; transform: translateY(0) translateZ(30px); }
.album__link:focus-visible .album__frame { box-shadow: 0 26px 64px -26px rgba(0,0,0,.75), 0 18px 60px -30px rgba(176,136,36,.28); }
.social a:focus-visible { color: var(--black); background: var(--gold-light); border-color: var(--gold-light); }
.embed-btn:focus-visible { border-color: var(--gold-light); background: rgba(176,136,36,.10); }
.cc-btn:focus-visible { background: var(--gold-light); border-color: var(--gold-light); }
.cc-btn--ghost:focus-visible { color: var(--black); }
.service:focus-within::before { opacity: 1; }
.service:focus-within .service__more { grid-template-rows: 1fr; opacity: 1; }

/* 1) press feedback, composed with the magnetic translate via --press */
.btn { --press: 1; transform: translate(var(--mx), var(--my)) scale(var(--press));
  transition: transform var(--ui-med) var(--ui), color var(--ui-med) var(--ui), border-color var(--ui-med) var(--ui); }
.btn:active { --press: .97; transition-duration: 120ms; }
.cc-btn, .embed-btn, .menu-toggle, .lang a, .social a, .cc-dlg__x { transition: transform 140ms ease-out, color var(--ui-med) var(--ui), background-color var(--ui-med) var(--ui), border-color var(--ui-med) var(--ui); }
.cc-btn:active, .embed-btn:active, .menu-toggle:active, .lang a:active, .social a:active, .cc-dlg__x:active { transform: scale(.97); }

/* 3) fast UI transitions (ambient: video, lights, hero glow, loops untouched) */
.btn::before, .btn__arrow { transition: transform 280ms var(--ui); }
.nav__link { transition: color var(--ui-med) var(--ui); }
.nav__link::after, .u-link::after, .u-link::before { transition: transform 280ms var(--ui); }
.brand img { transition: transform 300ms var(--ui); }
.field input, .field select, .field textarea { transition: border-color var(--ui-fast) var(--ui); }
.field .check input[type=checkbox], .toc a, .cc-sw span, .cc-sw span::after { transition-duration: 200ms; transition-timing-function: var(--ui); }
.dots a::before { transition: all 260ms var(--ui); }
.dots__label { transition: opacity 200ms var(--ui), transform 240ms var(--ui); }
.embed-btn__icon, .service__cta svg { transition: transform 240ms var(--ui); }
.service__title { transition: transform 300ms var(--ui), color 240ms var(--ui); }
.service::before { transition: opacity 300ms var(--ui); }
.album__overlay { transition: opacity 260ms var(--ui), transform 300ms var(--ui); }
.album__halo, .album__frame::after { transition: opacity 300ms var(--ui), border-color 300ms var(--ui), inset 300ms var(--ui); }

/* 5) quiet eyebrows / small labels (text unchanged) */
.eyebrow, .beats-embed__kicker { font-size: .74rem; font-weight: 500; letter-spacing: .04em; text-transform: none; color: rgba(189,183,170,.72); }

/* 6) less uppercase + wide tracking (CSS only). Kept: brand wordmark, hero "Bellioss Beats", mobile menu & titles (Cinzel brand look) */
.hero__id span, .hero__genres, .hero__genres span:first-child, .tag, .footer__grid h2, .album__kind, .portrait figcaption,
.scroll-cue, .field label, .field .label, .post-card__meta, .legal-data li > span:first-child, .kicker, .dots__label, .lang {
  text-transform: none; letter-spacing: .03em; }
.footer__grid h2 { font-size: .85rem; }

/* 7) moderate gold: accents in titles go ivory, except the hero slogan and the Beats heading */
.section-title em, .page-title em, .album__title em { color: var(--white); }
.section-title em.accent-gold { color: var(--gold-light); }

/* 9) side dots: 44×44 hit area, visible dot unchanged */
.dots ol { gap: 0; }
.dots a { width: 44px; height: 44px; }

/* 11) album covers: subtle shadow at rest, a bit deeper on mouse hover */
@media (hover: hover) and (pointer: fine) {
  .album__link:hover .album__frame { box-shadow: 0 26px 64px -26px rgba(0,0,0,.75), 0 18px 60px -30px rgba(176,136,36,.28); }
}
.album__frame { transition: transform .9s var(--ease-out), box-shadow 320ms var(--ui); }

@media (prefers-reduced-motion: reduce) { .btn, .cc-btn, .embed-btn, .lang a, .social a { transform: none !important; } }