/* =============================================================================
   Vatroslav — site styles. LAYERS ON TOP of letbe-ds (vendor/letbe-ds).
   Token-only: colours / spacing / radius / type / motion come from DS tokens (--lb-*).
   Theme: LIGHT-ONLY, MONO (grayscale near-black accent) — the only colour is in the imagery.
   Page-glue is confined to the DS's documented gaps (hero, scrim, ghost wordmark,
   editorial overlines, monument footer wordmark). Hardcoded values = genuine
   layout/design-intent dimensions only.
   ============================================================================= */

/* ---- Site layout constants (design-intent dimensions, not DS tokens) ---- */
:root {
  --site-header-h: 3.75rem;
  --site-max-w: 78rem;          /* content max width */
  --site-max-w-narrow: 44rem;   /* text / forms */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lb-surface-bg-default);
  color: var(--lb-fg-default);
  font-family: var(--lb-typography-family-body);
  font-size: var(--lb-font-size-m);
  line-height: var(--lb-font-line-height-m);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--lb-fg-default); color: var(--lb-bg-default); }

/* ---- Scroll behaviour: FREE scroll (no snap); anchor jumps clear the fixed header ---- */
html {
  scroll-padding-top: var(--site-header-h);
  scroll-behavior: smooth;
}

.section {
  position: relative;
  padding: var(--lb-size-16x) var(--lb-size-5x);
}
/* First content section clears the fixed header (the full-bleed hero is excluded) */
main > .section--auto:first-child { padding-top: calc(var(--site-header-h) + var(--lb-size-10x)); }
/* Editorial section rhythm — hairline separators between content sections */
.section + .section { border-top: var(--lb-border-width-thin) solid var(--lb-border-muted); }

.wrap { width: 100%; max-width: var(--site-max-w); margin-inline: auto; }
.wrap--narrow { max-width: var(--site-max-w-narrow); }

@media (min-width: 48rem) {
  .section { padding-inline: var(--lb-size-10x); }
}

/* =============================================================================
   Editorial typography helpers (token-only)
   ============================================================================= */
/* Mono slash-numbered overline — the signature section marker */
.overline {
  display: flex; align-items: baseline; gap: var(--lb-size-3x);
  font-family: var(--lb-typography-family-code);
  font-size: var(--lb-font-size-xs);
  letter-spacing: var(--lb-font-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--lb-fg-muted);
  margin: 0 0 var(--lb-size-5x);
}
.overline__i { color: var(--lb-fg-accent); font-weight: var(--lb-font-weight-bold); }

/* Display headings — built from DS display role tokens (responsive) */
.display {
  font-family: var(--lb-typography-family-display);
  font-weight: var(--lb-t-display-s-font-weight);
  font-size: var(--lb-t-display-s-font-size);
  line-height: var(--lb-t-display-s-line-height);
  letter-spacing: var(--lb-t-display-s-letter-spacing);
  color: var(--lb-fg-default);
  margin: 0 0 var(--lb-size-5x);
}
.display--hero {
  font-size: var(--lb-t-display-l-font-size);
  line-height: var(--lb-t-display-l-line-height);
}
.display--monument {
  font-size: var(--lb-t-display-xl-font-size);
  line-height: var(--lb-t-display-xl-line-height);
}

.lede {
  font-size: var(--lb-font-size-l);
  line-height: var(--lb-font-line-height-l);
  color: var(--lb-fg-muted);
  max-width: 40rem;
  margin: 0;
}

.cta-row { display: flex; flex-wrap: wrap; gap: var(--lb-size-3x); margin-top: var(--lb-size-8x); }

.section-head { max-width: 46rem; margin-bottom: var(--lb-size-10x); }
.section-head .lede { margin-top: var(--lb-size-5x); }

/* =============================================================================
   HEADER — fixed; logo left, inline nav (desktop) + store CTA + hamburger
   ============================================================================= */
/* Floating navigation dock — detached, top-centre, 32px (size-8x) below the top edge,
   fixed so it follows the scroll. Light surface, matching the (light-only) page, with a
   drop shadow so it lifts off and stays legible over any content. Square corners. */
.site-header {
  position: fixed; top: var(--lb-size-8x); bottom: auto; left: 50%; right: auto;
  transform: translateX(-50%);
  z-index: var(--lb-z-3);
  display: inline-flex; align-items: center; gap: var(--lb-size-4x);
  height: auto; max-width: calc(100vw - 2 * var(--lb-size-8x));
  padding: var(--lb-size-2x) var(--lb-size-4x);
  background: var(--lb-surface-bg-default); color: var(--lb-fg-default);
  border: var(--lb-border-width-thin) solid var(--lb-border-muted);
  border-radius: var(--lb-radius-surface); /* 0 — square */
  box-shadow: var(--lb-shadow-modal);
}
.site-header__logo { display: inline-flex; }
/* white SVG logo → invert to dark ink on the light dock */
.site-header__logo img { height: var(--lb-size-8x); width: auto; display: block; filter: invert(1); }
.site-header__right { display: flex; align-items: center; gap: var(--lb-size-4x); }

.site-header__nav { display: none; gap: var(--lb-size-5x); }
.site-header__link {
  font-family: var(--lb-typography-family-code);
  font-size: var(--lb-font-size-xs);
  letter-spacing: var(--lb-font-letter-spacing-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lb-fg-muted);
  transition: color var(--lb-animation-dur-normal) var(--lb-animation-ease-ui);
}
.site-header__link:hover { color: var(--lb-fg-default); }
.site-header__link[aria-current="page"] { color: var(--lb-fg-default); text-decoration: underline; text-underline-offset: 4px; }

.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--lb-size-8x); height: var(--lb-size-8x);
  padding: 0; background: transparent; border: 0; cursor: pointer;
  color: var(--lb-fg-default); border-radius: var(--lb-radius-field);
}
.hamburger:hover { background: var(--lb-bg-strong); }
.hamburger [data-lb-icon] { width: var(--lb-size-6x); height: var(--lb-size-6x); }

@media (min-width: 60rem) {
  .site-header__nav { display: flex; }
  .hamburger { display: none; }
}
/* On small screens the dock keeps just logo · hamburger (the menu holds the rest) */
@media (max-width: 59.999rem) {
  .site-header__right > .lb-btn { display: none; }
}

/* =============================================================================
   FULL-SCREEN OVERLAY MENU — native <dialog>, clip-path reveal (mobile)
   ============================================================================= */
.menu[open] { display: flex; }
.menu {
  border: 0; padding: 0; margin: 0; inset: 0;
  width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh;
  background: var(--lb-surface-bg-default); color: var(--lb-fg-default);
  flex-direction: column; align-items: center; justify-content: space-between;
  padding: var(--lb-size-6x) var(--lb-size-5x);
}
.menu::backdrop { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] { animation: menu-in var(--lb-animation-dur-slow) var(--lb-animation-ease-ui) both; }
  .menu.is-closing { animation: menu-out var(--lb-animation-dur-gentle) var(--lb-animation-ease-ui) both; }
}
@keyframes menu-in  { from { clip-path: circle(0% at 92% 5%); } to { clip-path: circle(150% at 92% 5%); } }
@keyframes menu-out { from { clip-path: circle(150% at 92% 5%); } to { clip-path: circle(0% at 92% 5%); } }

.menu__top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.menu__top img { height: var(--lb-size-8x); }
.menu__nav { display: flex; flex-direction: column; align-items: center; gap: var(--lb-size-6x); text-align: center; }
.menu__link {
  display: flex; align-items: baseline; gap: var(--lb-size-3x);
  font-family: var(--lb-typography-family-display);
  font-size: var(--lb-font-size-4xl); font-weight: 700; text-decoration: none;
  text-transform: uppercase; letter-spacing: var(--lb-font-letter-spacing-tight);
  color: var(--lb-fg-default);
}
.menu__link-i {
  font-family: var(--lb-typography-family-code);
  font-size: var(--lb-font-size-s); font-weight: 400;
  letter-spacing: 0; color: var(--lb-fg-subtle);
}
.menu__link:hover { color: var(--lb-fg-muted); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu__nav > * { animation: item-in var(--lb-animation-dur-gentle) var(--lb-animation-ease-in) both; animation-delay: calc(120ms + var(--i) * 45ms); }
}
@keyframes item-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

.menu__socials { display: flex; gap: var(--lb-size-5x); }
.menu__socials a { display: inline-flex; width: var(--lb-size-8x); height: var(--lb-size-8x); align-items: center; justify-content: center; color: var(--lb-fg-muted); }
.menu__socials a:hover { color: var(--lb-fg-default); }
.menu__socials [data-lb-icon] { width: var(--lb-size-6x); height: var(--lb-size-6x); }

body.menu-open { overflow: hidden; }

/* =============================================================================
   HERO — full-bleed chiaroscuro image, ghost wordmark, bottom-anchored content
   (DS ships no hero/scrim/figure — this block is sanctioned page-glue)
   ============================================================================= */
.hero { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding: 0; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--lb-bg-strong) center / cover no-repeat; }
/* soft cinematic scrim — bottom-weighted gradient so the hero text reads clearly over
   the imagery/video (a gentle gradient, not a flat wash). Sits above the (parallaxing)
   bg, below the content. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to top,
    rgba(6,5,4,0.72) 0%,
    rgba(6,5,4,0.42) 28%,
    rgba(6,5,4,0.12) 58%,
    rgba(6,5,4,0) 82%);
}
/* ghost logo behind the content — the single low-contrast signature (SVG wordmark) */
.hero__ghost {
  position: absolute; left: 50%; bottom: var(--lb-size-8x); transform: translateX(-50%);
  width: min(94%, 58rem); height: auto; margin: 0;
  opacity: 0.06; pointer-events: none; user-select: none;
}
.hero__content {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--site-max-w); margin-inline: auto;
  padding: var(--lb-size-16x) var(--lb-size-5x) var(--lb-size-20x);
}
.hero__content .lede { max-width: 36rem; }
/* Light text over the scrim — readable and cinematic on both the home video hero
   and the character portrait heroes (theme-independent light ink). */
.hero .hero__content .display,
.hero .hero__content .lede { color: var(--lb-neutral-50); }
@media (min-width: 48rem) {
  .hero__content { padding-inline: var(--lb-size-10x); padding-bottom: var(--lb-size-24x); }
  .hero__ghost { width: min(82%, 64rem); }
}

/* =============================================================================
   VIDEO
   ============================================================================= */
.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: var(--lb-border-width-thin) solid var(--lb-border-default); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-meta { margin: var(--lb-size-5x) 0 0; }

/* =============================================================================
   CHARACTERS — DS grid + DS cards + DS badge; corner-tagged specimen cards
   ============================================================================= */
.char-card { overflow: hidden; }
/* fixed image frame — the portrait zooms INSIDE this, so the card and its text
   block never change size (the zoom is clipped here, not pushed onto the body). */
.char-card__media-wrap { position: relative; overflow: hidden; }
.char-card__media-wrap .lb-card__media { background-color: var(--lb-bg-strong); }
.char-card__tag {
  position: absolute; top: var(--lb-size-2x); left: var(--lb-size-2x);
  font-family: var(--lb-typography-family-code);
}
.char-card__quote { font-style: italic; margin-top: var(--lb-size-2x); }
/* Portraits: black-and-white at rest, full colour + a gentle zoom on hover
   (matches the video cards). Zoom is clipped by .char-card__media-wrap above. */
.char-card .lb-card__media {
  filter: grayscale(1) contrast(1.03);
  transition: filter var(--lb-animation-dur-slow) var(--lb-animation-ease-ui),
              transform var(--lb-animation-dur-slow) var(--lb-animation-ease-ui);
}
.char-card:hover .lb-card__media,
.char-card:focus-within .lb-card__media { filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .char-card:hover .lb-card__media,
  .char-card:focus-within .lb-card__media { transform: scale(1.06); }
}
.char-grid__all { display: flex; justify-content: flex-start; margin-top: var(--lb-size-8x); }

/* =============================================================================
   MUSIC
   ============================================================================= */
.spotify-embed { margin-bottom: var(--lb-size-8x); border: var(--lb-border-width-thin) solid var(--lb-border-default); }
.spotify-embed iframe { display: block; width: 100%; border: 0; }

/* =============================================================================
   CONTACT FORM — deterministic spacing on top of DS fields
   ============================================================================= */
.contact-form { display: flex; flex-direction: column; gap: var(--lb-size-4x); margin-top: var(--lb-size-2x); }
.contact-form .lb-field { margin: 0; }
.contact-form .lb-select-field,
.contact-form .lb-datepicker-field { width: 100%; }
.cond { display: flex; flex-direction: column; gap: var(--lb-size-4x); padding: var(--lb-size-5x); border: var(--lb-border-width-thin) solid var(--lb-border-muted); background: var(--lb-bg-strong); }
.cond[hidden] { display: none; }
.lb-form__actions { margin-top: var(--lb-size-2x); }
.char-count { text-align: right; color: var(--lb-fg-subtle); margin: 0; }

/* =============================================================================
   FOOTER — brand + columns + monument ghost wordmark
   ============================================================================= */
.site-footer {
  position: relative; overflow: hidden;
  border-top: var(--lb-border-width-thin) solid var(--lb-border-default);
  padding: var(--lb-size-10x) var(--lb-size-5x) var(--lb-size-8x);
}
.site-footer__inner { display: grid; grid-template-columns: 1fr; gap: var(--lb-size-8x); }
.site-footer__brand img { height: var(--lb-size-10x); margin-bottom: var(--lb-size-4x); }
.site-footer__tagline { color: var(--lb-fg-muted); font-size: var(--lb-font-size-s); max-width: 22rem; margin: 0; }
.site-footer__col { display: flex; flex-direction: column; gap: var(--lb-size-2x); }
.site-footer__col-title {
  font-family: var(--lb-typography-family-code);
  font-size: var(--lb-font-size-2xs); letter-spacing: var(--lb-font-letter-spacing-wide);
  text-transform: uppercase; color: var(--lb-fg-subtle); margin: 0 0 var(--lb-size-2x);
}
.site-footer__col a { color: var(--lb-fg-muted); text-decoration: none; font-size: var(--lb-font-size-s); }
.site-footer__col a:hover { color: var(--lb-fg-default); }
.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--lb-size-3x) var(--lb-size-6x); justify-content: space-between;
  color: var(--lb-fg-subtle); font-size: var(--lb-font-size-xs);
  padding-top: var(--lb-size-5x); margin-top: var(--lb-size-8x);
  border-top: var(--lb-border-width-thin) solid var(--lb-border-muted);
}
@media (min-width: 48rem) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--lb-size-8x); }
}

/* =============================================================================
   Scroll-reveal (IntersectionObserver adds .is-visible) — motion-gated
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--lb-duration-500) var(--lb-ease-decelerate), transform var(--lb-duration-500) var(--lb-ease-decelerate); }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* =============================================================================
   SUB-PAGES (about / song product template) — shared editorial patterns
   ============================================================================= */
/* Compact page header that clears the fixed header */
.page-head { margin-bottom: var(--lb-size-10x); max-width: 52rem; }

/* Characters roster (about.html) — head thumb + name/kind + meaning, no slogans */
.roster { display: flex; flex-direction: column; }
.roster__item {
  display: grid; grid-template-columns: 6rem 1fr; gap: var(--lb-size-5x); align-items: start;
  padding: var(--lb-size-8x) 0; border-top: var(--lb-border-width-thin) solid var(--lb-border-muted);
}
.roster__item:first-child { border-top: 0; }
.roster__thumb {
  width: 6rem; height: 6rem; background: var(--lb-bg-strong) center top / cover no-repeat;
}
.roster__kind { margin: 0 0 var(--lb-size-2x); }
.roster__name {
  font-family: var(--lb-typography-family-heading);
  font-size: var(--lb-t-heading-l-font-size); line-height: var(--lb-t-heading-l-line-height);
  font-weight: var(--lb-t-heading-l-font-weight); letter-spacing: var(--lb-t-heading-l-letter-spacing);
  color: var(--lb-fg-default); margin: 0 0 var(--lb-size-3x);
}
.roster__meaning { color: var(--lb-fg-muted); max-width: 46rem; margin: 0; }
@media (min-width: 48rem) {
  .roster__item { grid-template-columns: 9rem 1fr; gap: var(--lb-size-10x); }
  .roster__thumb { width: 9rem; height: 9rem; }
}

/* Song product page */
.prose { max-width: 46rem; }
.prose p { color: var(--lb-fg-muted); margin: 0 0 var(--lb-size-4x); }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { margin: var(--lb-size-9x) 0 var(--lb-size-4x); }
.prose h2:first-child { margin-top: 0; }
.lyrics {
  max-width: 46rem; white-space: pre-line;
  font-size: var(--lb-font-size-l); line-height: var(--lb-font-line-height-l);
  color: var(--lb-fg-default);
}
.lyrics__lang { margin-bottom: var(--lb-size-4x); }
/* Cast — small character heads that appear in the video */
.cast { display: flex; flex-wrap: wrap; gap: var(--lb-size-5x); }
.cast__item { display: flex; flex-direction: column; align-items: center; gap: var(--lb-size-2x); width: 5rem; text-decoration: none; }
.cast__thumb {
  width: 5rem; height: 5rem; background: var(--lb-bg-strong) center top / cover no-repeat;
}
.cast__name { font-size: var(--lb-font-size-xs); color: var(--lb-fg-muted); text-align: center; }
/* single-track player wrapper */
.player-wrap { max-width: 46rem; }

/* Featured-songs strip — reusable bottom section (image card → song page) */
/* Let each video card hug its own content instead of stretching to the tallest in
   the row — so a card with no cast avatars is visibly shorter (no empty gap that
   reads as "still loading"). */
.song-grid { align-items: start; }
.song-card { overflow: hidden; text-decoration: none; }
.song-card .lb-card__media {
  position: relative; z-index: 0;
  background-color: var(--lb-bg-strong);
  filter: grayscale(1) contrast(1.03);
  transition: filter var(--lb-animation-dur-slow) var(--lb-animation-ease-ui),
              transform var(--lb-animation-dur-slow) var(--lb-animation-ease-ui);
}
/* body sits above the media on an opaque fill, so the media zoom is clipped at the
   top/sides (card overflow) and hidden behind the body at the bottom — no resize. */
.song-card .lb-card__body { position: relative; z-index: 1; background: var(--lb-surface-bg-default); }
.song-card:hover .lb-card__media,
.song-card:focus-within .lb-card__media { filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .song-card:hover .lb-card__media,
  .song-card:focus-within .lb-card__media { transform: scale(1.06); }
}

/* Footer legal meta link (Privacy, etc.) */
.site-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer__legal a:hover { color: var(--lb-fg-default); }

/* Contact form & FAQ accordion — readable width, LEFT-aligned with other sections */
.contact-form { max-width: 44rem; }
.lb-accordion { max-width: 52rem; }

/* Video page — grid of embeds */
.video-item__title {
  margin: 0 0 var(--lb-size-3x);
  font-family: var(--lb-typography-family-heading);
  font-size: var(--lb-t-heading-s-font-size); line-height: var(--lb-t-heading-s-line-height);
  font-weight: var(--lb-t-heading-s-font-weight); letter-spacing: var(--lb-t-heading-s-letter-spacing);
  color: var(--lb-fg-default);
}

/* Light-only site: the white SVG logo would vanish on light surfaces — invert it to
   dark ink everywhere (dock handles its own invert above; menu + footer here). */
.menu__top img,
.site-footer__brand img { filter: invert(1); }
/* giant is a gold mask box (not a white img) — it needs no invert; gold reads on both themes */

/* Character cards / roster rows link to their /cast page */
.char-card { text-decoration: none; }
/* The row is a <div> (not an <a>) because the meaning holds inline crosslinks —
   nested <a> is invalid HTML. Only the portrait and the name link out. */
.roster__figure, .roster__namelink { display: block; text-decoration: none; }
.roster__namelink { width: max-content; max-width: 100%; }
.roster__namelink .roster__name { transition: color var(--lb-animation-dur-normal) var(--lb-animation-ease-ui); }
.roster__namelink:hover .roster__name { color: var(--lb-fg-accent); }

/* Cast (character) page hero — shorter than the home hero */
.cast-hero { min-height: 68svh; }
.cast-hero .hero__bg { background-position: center 22%; }

/* Cast hero shows the character portrait in full colour (gold on grey). */

/* =============================================================================
   Video-thumbnail component — single source of truth.
   url() is relative to THIS stylesheet (/css/), so one class works on every page
   at any folder depth. Swap assets/thumb-<slug>.jpg → updates everywhere at once.
   ============================================================================= */
[class*="vthumb--"] { background-size: cover; background-position: center; background-color: var(--lb-bg-strong); }
.vthumb--sushtina             { background-image: url('../assets/thumb-sushtina.jpg'); }
.vthumb--ovce                 { background-image: url('../assets/thumb-ovce.jpg'); }
.vthumb--seme                 { background-image: url('../assets/thumb-seme.jpg'); }
.vthumb--zlatna-jaja          { background-image: url('../assets/thumb-zlatna-jaja.jpg'); }
.vthumb--diskonektovani       { background-image: url('../assets/thumb-diskonektovani.jpg'); }
.vthumb--svi-znaju-sve        { background-image: url('../assets/thumb-svi-znaju-sve.jpg'); }
.vthumb--nova-roba-zabranjena { background-image: url('../assets/thumb-nova-roba-zabranjena.jpg'); }
.vthumb--obey                 { background-image: url('../assets/thumb-obey.jpg'); }

/* Inline character cross-links inside descriptions (keep users in the universe) */
/* Crosslinks — monochrome theme, so they carry a persistent underline for affordance
   (accent colour is now near-black, indistinguishable from body text on its own). */
.xlink { color: var(--lb-fg-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: from-font; }
.xlink:hover { text-decoration-thickness: 2px; }

/* Discography list (songs hub) */
.disco { display: flex; flex-direction: column; max-width: 60rem; }
.disco__row {
  display: grid; grid-template-columns: 2.25rem 1fr auto; gap: var(--lb-size-4x); align-items: baseline;
  padding: var(--lb-size-4x) var(--lb-size-2x); text-decoration: none; color: inherit;
  border-top: var(--lb-border-width-thin) solid var(--lb-border-muted);
  transition: background var(--lb-animation-dur-normal) var(--lb-animation-ease-ui);
}
.disco__row:hover { background: var(--lb-bg-strong); }
.disco__num { font-family: var(--lb-typography-family-code); font-size: var(--lb-font-size-s); color: var(--lb-fg-subtle); }
.disco__title { font-family: var(--lb-typography-family-heading); font-size: var(--lb-t-heading-s-font-size); font-weight: var(--lb-t-heading-s-font-weight); color: var(--lb-fg-default); }
.disco__gloss { font-family: var(--lb-typography-family-body); font-weight: 400; font-size: var(--lb-font-size-s); color: var(--lb-fg-muted); margin-left: var(--lb-size-2x); }
.disco__meta { display: inline-flex; align-items: center; gap: var(--lb-size-4x); color: var(--lb-fg-muted); font-size: var(--lb-font-size-s); }
.disco__meta [data-lb-icon] { width: var(--lb-size-4x); height: var(--lb-size-4x); color: var(--lb-fg-subtle); }

/* =============================================================================
   TYPOGRAPHY COLOUR — one dark ink for all reading text
   The theme reads too grey; remap the muted role to the default foreground so body,
   lede, descriptions, footer and meta text all use the near-black default. (Subtle is
   left alone — it backs field placeholders and the quiet uppercase overlines.)
   ============================================================================= */
:root { --lb-fg-muted: var(--lb-fg-default); }

/* Clickable text carries a little more weight now that colour no longer sets it apart */
.xlink,
.site-footer__col a,
.lb-link,
.disco__row,
.video-meta a { font-weight: var(--lb-font-weight-semibold); }
.site-header__link,
.menu__link { font-weight: var(--lb-font-weight-bold); }
.lb-btn { font-weight: var(--lb-font-weight-semibold); }

/* =============================================================================
   STUFF PAGE — wide merch hero banner
   ============================================================================= */
/* Video-card cast — small avatar group of the characters appearing in that video */
.song-card__cast { margin-top: var(--lb-size-3x); }

.stuff-hero { margin: 0; }
.stuff-hero img {
  display: block; width: 100%; height: auto;
  border: var(--lb-border-width-thin) solid var(--lb-border-default);
}

/* =============================================================================
   FX: CAROUSEL — see js/fx/carousel.js. A scroll-snap row of cards with prev/next
   controls and a reveal-on-enter effect. Consumes DS tokens; square, monochrome.
   ============================================================================= */
.fx-carousel { position: relative; }
.fx-carousel__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* NOTE: no CSS scroll-behavior:smooth here — the JS controls it (smooth for a
     click, instant for the invisible loop recentre). CSS smooth would animate the
     recentre too, which looked like the row "rolling back to the start". */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox — controls drive it */
  overscroll-behavior-x: contain;
}
.fx-carousel__viewport::-webkit-scrollbar { display: none; }
.fx-carousel__track {
  display: flex; gap: var(--lb-size-6x);
  padding-bottom: var(--lb-size-2x); /* room so focus rings aren't clipped */
}
.fx-carousel__track > * {
  flex: 0 0 auto;
  width: 16rem; max-width: 78vw;
  scroll-snap-align: start;
}
/* reveal-on-enter — subtle rise + fade as each slide scrolls into the viewport */
@media (prefers-reduced-motion: no-preference) {
  .fx-carousel[data-fx-ready] .fx-carousel__track > * {
    opacity: 0; transform: translateY(var(--lb-size-3x));
    transition: opacity var(--lb-animation-dur-slow) var(--lb-animation-ease-in),
                transform var(--lb-animation-dur-slow) var(--lb-animation-ease-in);
  }
  .fx-carousel[data-fx-ready] .fx-carousel__track > .is-in {
    opacity: 1; transform: none;
  }
}
/* controls */
/* controls — arrows overlaid on the left/right edges, revealed on carousel hover
   (desktop); on touch they stay hidden and the row is swiped. The carousel loops,
   so the arrows never disable. */
.fx-carousel__controls { display: contents; }
.fx-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--lb-size-10x); height: var(--lb-size-10x);
  padding: 0; cursor: pointer;
  background: var(--lb-surface-bg-default);
  color: var(--lb-fg-default);
  border: var(--lb-border-width-thin) solid var(--lb-border-strong);
  border-radius: var(--lb-radius-interactive);
  box-shadow: var(--lb-shadow-card);
  opacity: 0; pointer-events: none;
  transition: opacity var(--lb-animation-dur-normal) var(--lb-animation-ease-ui),
              background var(--lb-animation-dur-normal) var(--lb-animation-ease-ui),
              border-color var(--lb-animation-dur-normal) var(--lb-animation-ease-ui);
}
.fx-carousel__btn[data-fx-carousel-prev] { left: var(--lb-size-3x); }
.fx-carousel__btn[data-fx-carousel-next] { right: var(--lb-size-3x); }
@media (hover: hover) {
  .fx-carousel:hover .fx-carousel__btn,
  .fx-carousel:focus-within .fx-carousel__btn { opacity: 1; pointer-events: auto; }
}
.fx-carousel__btn:hover { background: var(--lb-bg-strong); border-color: var(--lb-fg-default); }
.fx-carousel.is-static .fx-carousel__btn { display: none; }  /* nothing to scroll */
.fx-carousel__btn [data-lb-icon] { width: var(--lb-size-6x); height: var(--lb-size-6x); }

/* =============================================================================
   CONTACT — the whole form sits in ONE dark container (data-theme="dark") that
   lifts off the white page. All DS fields inside pick up dark tokens for free.
   ============================================================================= */
.contact-shell {
  background: var(--lb-bg-default);           /* dark under data-theme="dark" */
  color: var(--lb-fg-default);
  max-width: 49rem;
  padding: var(--lb-size-10x);
  box-shadow: var(--lb-shadow-modal);
}
.contact-shell .contact-form { max-width: none; margin-top: 0; }

/* Support block — a subtle raised inset within the dark shell (Bitcoin QR + shop) */
.cf-support { margin-top: 0; }
.support-card {
  display: flex; gap: var(--lb-size-6x); align-items: center; flex-wrap: wrap;
  background: var(--lb-bg-strong);
  color: var(--lb-fg-default);
  padding: var(--lb-size-6x);
  border: var(--lb-border-width-thin) solid var(--lb-border-default);
}
.support-card__qr {
  flex: 0 0 auto; width: 9rem; height: 9rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--lb-fg-default); color: var(--lb-bg-default);
}
.support-card__qr img { display: block; width: 100%; height: 100%; }
.support-card__qr-ph {
  font-family: var(--lb-typography-family-code); font-size: var(--lb-font-size-xs);
  text-transform: uppercase; letter-spacing: var(--lb-font-letter-spacing-wide); line-height: 1.3;
}
.support-card__addr {
  display: flex; align-items: center; gap: var(--lb-size-3x);
  flex-wrap: wrap; margin: 0 0 var(--lb-size-5x);
}
/* Contact form status + privacy note + success panel (inside the dark shell) */
.cf-status {
  margin: var(--lb-size-4x) 0 0; color: var(--lb-fg-default);
  font-size: var(--lb-font-size-s);
  border-inline-start: var(--lb-border-width-medium) solid var(--lb-border-strong);
  padding-inline-start: var(--lb-size-4x);
}
.cf-note {
  margin: var(--lb-size-4x) 0 0; color: var(--lb-fg-muted);
  font-size: var(--lb-font-size-xs);
}
.cf-success { text-align: center; padding: var(--lb-size-8x) var(--lb-size-4x); }
.cf-success h3 { margin: 0 0 var(--lb-size-3x); color: var(--lb-fg-default); }
.cf-success p { color: var(--lb-fg-muted); margin: 0 auto; max-width: 32rem; }

.support-card__addr-value {
  font-family: var(--lb-typography-family-code); font-size: var(--lb-font-size-xs);
  color: var(--lb-fg-default); word-break: break-all; flex: 1 1 14rem;
  padding: var(--lb-size-2x) var(--lb-size-3x);
  background: var(--lb-bg-default);
  border: var(--lb-border-width-thin) solid var(--lb-border-default);
}
.support-card__body { flex: 1 1 16rem; }
.support-card__title {
  font-family: var(--lb-typography-family-heading);
  font-size: var(--lb-t-heading-m-font-size); line-height: var(--lb-t-heading-m-line-height);
  color: var(--lb-fg-default); margin: 0 0 var(--lb-size-3x);
}
.support-card__text { color: var(--lb-fg-muted); margin: 0 0 var(--lb-size-5x); max-width: 34rem; }
.support-card__actions { display: flex; gap: var(--lb-size-3x); flex-wrap: wrap; }

/* Roomier rhythm between contact-form fields (matches the letbe.design layout spacing).
   The wrappers (#cf-rest, .cond) become flex columns so their fields space like the
   top-level form does. */
.contact-form { gap: var(--lb-size-8x); }
/* :not([hidden]) so the display rule never overrides the hidden attribute that drives
   the progressive disclosure (JS toggles [hidden] on #cf-rest and each .cond) */
.cf-rest:not([hidden]), .cf-rest .cond:not([hidden]) { display: flex; flex-direction: column; gap: var(--lb-size-8x); }

/* =============================================================================
   MUSIC PAGE — cinematic hero + dark album player (pops on the white page)
   ============================================================================= */
.music-hero { min-height: 56svh; }
/* the player-wrap carries data-theme="dark" so the DS media widget renders dark;
   a soft shadow lifts it off the light page */
.player-wrap[data-theme="dark"] .lb-media { box-shadow: var(--lb-shadow-modal); }