/* =========================================================================
   Jan Saška — Phase 2 monochrome morph theme
   1) Reset  2) Tokens  3) @font-face  4) Base/Type  5) Grain+Mask
   6) Layout  7) Header/Nav  8) Footer  9) Forms/Buttons 10) Utilities
   11) Hero 12) Page-bg 13) Audio player 14) Video rows 15) Nav smoke
   16) Responsive
   ========================================================================= */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* scrollbar-gutter: stable — reserve the scrollbar space on EVERY page, so a
   short page (no scrollbar) and a tall page (scrollbar present) have the same
   content width. Without it, switching pages shifts the whole layout sideways. */
html { -webkit-text-size-adjust: 100%; line-height: 1.5; scrollbar-gutter: stable; overflow-x: hidden; }
body { min-height: 100vh; }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- 2. Tokens ---------- */
:root {
  /* Monochrome palette */
  --c-black: #0b0b0b;
  --c-ink:   #141414;
  --c-smoke: #6e6e6e;
  --c-ash:   #9a9a9a;
  --c-fog:   #cfcfcf;
  --c-white: #f2f2f2;

  /* Neumorphism / Soft UI base (dark) — surfaces share this color; form comes from shadows */
  --c-base:  #1b1c1f;
  --c-deep:  #101012;   /* dark shadow tone (bottom-right) */
  --c-hi:    #27282d;   /* light highlight tone (top-left) */
  --nm-out:    7px 7px 16px var(--c-deep), -7px -7px 16px var(--c-hi);
  --nm-out-sm: 4px 4px 9px var(--c-deep), -4px -4px 9px var(--c-hi);
  --nm-in:     inset 5px 5px 11px var(--c-deep), inset -5px -5px 11px var(--c-hi);
  --nm-in-sm:  inset 3px 3px 7px var(--c-deep), inset -3px -3px 7px var(--c-hi);

  --color-bg: var(--c-base);
  --color-text: var(--c-fog);
  --color-heading: var(--c-white);
  --color-muted: var(--c-ash);
  --color-border: rgba(242, 242, 242, 0.10);

  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-base: 1rem;
  --fs-h1: clamp(2.5rem, 8vw, 6rem);
  --fs-h2: clamp(2rem, 5vw, 4rem);
  --fs-h3: clamp(1.4rem, 3vw, 2.2rem);
  --fs-small: 0.85rem;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem;
  --sp-24: 6rem; --sp-32: 8rem;

  --container: 1290px;
  --container-narrow: 820px;
  --radius: 16px;
  --transition: 300ms cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 3. @font-face ---------- */
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-v24-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-v24-latin_latin-ext-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-v24-latin_latin-ext-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-v24-latin_latin-ext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-v24-latin_latin-ext-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-v44-latin_latin-ext-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-v44-latin_latin-ext-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-v44-latin_latin-ext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/open-sans-v44-latin_latin-ext-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- 4. Base / Typography ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--c-base);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* sticky footer: main grows, footer always at the very bottom of the page */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--c-white); transition: color var(--transition); }
::selection { background: var(--c-white); color: var(--c-black); }

/* ---------- 5. Grain + edge masks ---------- */
/* Film grain — plain alpha composite (no mix-blend-mode: blending the whole
   page every frame was a measurable compositing cost on weak GPUs) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .05; filter: grayscale(1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Pre-paint hiding of JS-animated elements. <html> gets .js from an inline
   <head> script BEFORE first paint, so reveal targets never flash visible and
   then re-hide (the "load glitch"). main.js removes .js again if GSAP failed
   to load, so content can never be trapped hidden. */
.js [data-reveal], .js [data-reveal-lines], .js [data-stagger] > *, .js [data-brutal] > *,
.js .page--home2 [data-hero-lines], .js .page--home2 .home-hero__sub { opacity: 0; }

/* ---------- 6. Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--sp-6); padding-right: var(--sp-6); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding: var(--sp-24) 0; }
/* overflow-x: clip — the "brutal" row entrance slides rows in from ±28% off
   their own width; without clipping here that pushes the document wider than the
   viewport and lets the whole page scroll sideways (very visible on iOS). */
.site-main { display: block; flex: 1 0 auto; width: 100%; overflow-x: clip; }

/* ---------- 7. Header / Nav ---------- */
/* Static overlay header — sits at the top, scrolls away with the page (not sticky) */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--sp-6) 0;
  background: transparent;
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); position: relative; }
.site-header__logo { display: inline-flex; }
.site-header__logo img { width: auto; max-width: 130px; filter: brightness(0) invert(1); }
@media (min-width: 1025px) { .site-header__logo img { max-width: 200px; } }

/* Nav is always inline (no hamburger dropdown). On mobile/tablet the current
   page's own link is hidden (see responsive) so only the other pages appear. */
.nav { display: block; }
.nav__list { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-6); }
/* No underline — hover/active state is the canvas smoke (js/smoke.js);
   the active item smokes continuously */
.nav__link {
  position: relative; display: inline-block; isolation: isolate;
  font-family: var(--font-heading); font-weight: 600; letter-spacing: .14em;
  text-transform: lowercase; color: var(--c-fog); padding: var(--sp-2) 0;
  transition: color var(--transition), text-shadow .6s ease;
}
/* The word itself glows softly with the smoke around it — text and haze read
   as one light source, not a sticker on top of a cloud */
.nav__link:hover, .nav__link--active { color: var(--c-white); text-shadow: 0 0 18px rgba(242, 242, 242, .45), 0 0 4px rgba(242, 242, 242, .25); }

/* Header social */
.site-header__social { display: none; gap: var(--sp-4); align-items: center; }
.site-header__social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; color: var(--c-fog); border: 1px solid var(--color-border); transition: var(--transition); }
.site-header__social a:hover { color: var(--c-black); background: var(--c-white); border-color: var(--c-white); }
@media (min-width: 1025px) { .site-header__social { display: flex; } }

/* ---------- 8. Footer ---------- */
/* Minimal footer — plain centered copyright line, no card/background */
.site-footer {
  position: relative; z-index: 1;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  color: var(--color-muted);
  font-size: .8rem;
  text-align: center;
}
.site-footer__copy { opacity: .85; }

/* ---------- 9. Forms / Buttons ---------- */
/* Outline aesthetic (the neumorphic surfaces read as broken on a pure-black page) */
.btn { display: inline-block; padding: var(--sp-4) var(--sp-8); border-radius: 999px; font-weight: 600; font-family: var(--font-heading); letter-spacing: .08em; text-transform: uppercase; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.btn--primary { background: transparent; color: var(--c-white); border: 1px solid var(--color-border); box-shadow: none; }
.btn--primary:hover, .btn--primary:focus { color: var(--c-black); background: var(--c-white); border-color: var(--c-white); box-shadow: none; }
.btn--primary:active { transform: translateY(1px); box-shadow: none; }
.form { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-6); margin: var(--sp-12) 0; }
.form__row { display: flex; flex-direction: column; gap: var(--sp-2); }
.form__label { font-weight: 600; font-size: var(--fs-small); letter-spacing: .06em; color: var(--c-ash); text-transform: uppercase; }
.form__input { padding: var(--sp-4); border: 1px solid var(--color-border); border-radius: 12px; background: transparent; color: var(--c-white); width: 100%; box-shadow: none; transition: border-color var(--transition); }
.form__input::placeholder { color: var(--c-smoke); }
.form__input:focus { outline: none; border-color: var(--c-white); box-shadow: none; }
.form__input--invalid, .form__input--invalid:focus { border-color: #d05a5a; box-shadow: none; }
.form__input--textarea { resize: vertical; min-height: 9rem; }
.form .btn--primary { align-self: flex-start; }   /* content-width button, not a full-width bar */
.form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: var(--sp-4); border-radius: var(--radius); margin: var(--sp-6) 0; border: 1px solid var(--color-border); }
.alert--success { background: rgba(242,242,242,.08); color: var(--c-white); }
.alert--error { background: rgba(242,242,242,.04); color: var(--c-fog); }

/* Fakturační údaje (Ozvěte se) — plain text block, no box */
.ico { margin-top: var(--sp-16); }
.ico__title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.page-content .ico p { margin: 0 0 var(--sp-1); font-size: .95rem; line-height: 1.7; color: var(--c-ash); max-width: none; }
.ico a { color: var(--c-fog); }
.ico a:hover { color: var(--c-white); }

/* ---------- 10. Utilities ---------- */
.text-center { text-align: center; }
.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; }

/* Generic page content */
.page-content { padding-top: clamp(13rem, 22vh, 19rem); padding-bottom: var(--sp-24); position: relative; z-index: 1; }
.page-content h1 { margin-bottom: var(--sp-8); }
.page-content p { font-size: 1.05rem; line-height: 1.8; color: var(--c-fog); margin-top: var(--sp-6); max-width: 62ch; }

/* ---------- 16. Responsive ---------- */
/* Mobile + tablet (< 1025px): links shown inline, no hamburger; hide the current
   page's own link so only the other pages are offered. Nav drops to its own line
   under the logo so the long labels never crowd it. */
@media (max-width: 1024px) {
  /* Centered header: logo on top, the (three) nav links centered below it */
  .site-header__inner { flex-wrap: wrap; row-gap: var(--sp-4); justify-content: center; }
  .nav { flex-basis: 100%; }
  .nav__list { justify-content: center; }
  /* Inner pages: header in normal flow (not an absolute overlay) so its full
     height — logo + the nav wrapped onto its own line — pushes the content down
     instead of overlapping it. (Home has its header in normal flow too — see
     the .page--home2 rules.) */
  .site-header { position: static; }
  .page-content { padding-top: var(--sp-8); }
  /* Perf: film grain je fixed full-screen vrstva s `filter` nad měnícím se
     obsahem — na mobilu se přeblenduje každý frame při scrollu (znatelný jank).
     Při opacity .05 je stejně sotva vidět, na mobilu ji vypneme. */
  body::after { display: none; }
}
@media (min-width: 1025px) {
  .nav__list { gap: var(--sp-8); }
}
/* Phones: shrink the nav so all three links fit comfortably on one centered
   line (the set can include the long "hlavní stránka") */
@media (max-width: 560px) {
  .nav__list { gap: var(--sp-3); }
  .nav__link { font-size: .78rem; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body::after { display: none; }
}

/* ======== page modules appended below (hero, player, video, smoke) ======== */

/* ---------- 11. Home hero — shared pieces (band, fade, statement) ---------- */
/* A cinematic video BAND dissolves into pure black; below it the statement
   sits in the black area, vertically centred and left-aligned in the site
   container (comfortable margin, natural line length). The page layout itself
   (menu → video → statement, height behaviour) is set by .page--home2 in 11b. */
/* Contact + simple pages (privacy/disclaimer/404): unified black background */
.page--contact, .page--default { background: #000; }

.home-hero { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Video band — cover-cropped, dissolves into black at its lower edge */
.home-hero__video { position: relative; flex: none; height: 48svh; overflow: hidden; background: #000; }
.home-hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.62);
}
/* "Fade into nothing" — the bottom of the band dissolves to pure black */
.home-hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, #000 88%); }
/* The statement — in the black area under the band, vertically centred, and
   left-aligned to the same container edge as the Vidět/Slyšet intro lines.
   (width:100% stops the flexbox auto-margins from shrink-centring the container.) */
.home-hero__content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.home-hero__content > .container { width: 100%; }
.home-hero__headline { margin: 0; max-width: 20ch; color: var(--c-white);
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(2.8rem, 6.2vw, 5.6rem); line-height: 1.0; }
.home-hero__sub { margin: var(--sp-8) 0 0; max-width: 50ch; color: var(--c-fog);
  font-family: var(--font-body); font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1.55; }
@media (max-width: 640px) {
  .home-hero__video { height: 40svh; }
  .home-hero__headline { font-size: clamp(2.3rem, 9vw, 3.4rem); max-width: 16ch; }
  .home-hero__sub { margin-top: var(--sp-6); font-size: clamp(1.05rem, 4.3vw, 1.3rem); }
}

/* ---------- 11b. Home v2 — menu → video → statement ----------
   Menu je NAHOŘE v běžném toku (ne překryté nízko na bandu jako ve v1). Chování
   výšky je responzivní:
   • DESKTOP (≥1025px): JEDNA obrazovka bez scrollu — header (auto) + site-main
     (vyplní zbytek) + footer (auto) = přesně 100svh; statement vyplní a vycentruje
     prostor pod videem.
   • MOBIL/TABLET (≤1024px): přirozený tok se scrollem — na malých zařízeních se
     výška viewportu mění podle chromu prohlížeče (svh), takže cpát vše do jedné
     obrazovky nespolehlivě přetéká a statement se překrýval s videem. Radši scroll.
   Původní v1 (.page--home, menu překryté na videu) je jen v git historii. */
/* NEPOUŽÍVAT pevné height:100svh + overflow:hidden — na nízkém notebooku
   (např. 1366×768) se video + menu + statement + footer nevejdou, ořez je
   schová a justify-center vytlačí statement pod video. Místo toho single-screen
   vzniká přirozeně: body má min-height:100svh + display:flex (sticky footer),
   site-main vyplní zbytek a statement se vycentruje. Když se obsah nevejde,
   stránka se prostě odroluje (žádný ořez, žádný text pod videem). */
.page--home2 { --c-base: #000; }
.page--home2 .site-header { position: static; }   /* menu nahoře v toku — nikdy přes video */
.page--home2 .site-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.page--home2 .home-hero__video { height: 40svh; }  /* menší než v1 (48svh), protože menu teď bere místo nad videem */
/* Horní hrana bandu se vynořuje z černého pásu s menu — zrcadlí spodní fade
   (.home-hero__fade), takže video nemá tvrdý střih ani nahoře, ani dole. */
.page--home2 .home-hero__video::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, #000 0%, transparent 100%);
}
@media (max-width: 1024px) {
  /* Odemkni výšku → přirozený tok, ať se nic necpe ani nepřekrývá. */
  .page--home2 { height: auto; overflow: visible; }
  .page--home2 .site-main { display: block; }
  .page--home2 .home-hero { display: block; }
  .page--home2 .home-hero__video { height: 44svh; }
  .page--home2 .home-hero__content { padding: var(--sp-10) 0 var(--sp-12); }
}

/* ---------- 12. Fixed background (Slyšet / Vidět) ---------- */
/* Portrait artwork shown whole (contain), left-aligned, on a black page. Its
   right edge is feathered into the black so the photo→background seam is
   invisible. Static (no animation). */
.page--about, .page--services { background: #000; }
.page-bg {
  position: fixed; top: 0; left: 0; width: 100%; z-index: -3;
  /* Height tied to the LARGEST viewport (lvh), not the live one: on phones the
     visible viewport grows/shrinks as the browser's address bar hides and
     shows while you scroll; a fixed layer sized with plain 100% / vh follows
     that and the photo visibly re-scales and jumps with every scroll. lvh is
     stable. (100vh is the fallback for browsers without lvh.) */
  height: 100vh; height: 100lvh;
  background-size: auto 120%; background-position: left center; background-repeat: no-repeat;
  /* Feather the photo's right edge into the black page so the photo→background
     seam disappears. Black itself now comes from the body (above), so masking
     the image away can't reveal any non-black fill.
     CRITICAL: mask-size width must be an explicit length, NOT `auto`. A gradient
     has no intrinsic size, so `mask-size: auto` resolves to the full element
     (viewport) width instead of the image width — the fade then tracks the
     viewport, not the photo, and the seam reappears at some resolutions. The
     image is shown at `background-size: auto 120%` (height = 120vh), and both
     photos have aspect ≈0.563, so their displayed width is 120vh × 0.563 ≈
     67.6vh. Sizing the mask box to exactly that makes the 90deg fade span the
     photo's real width, so its right edge lands deep in the transparent zone on
     every viewport. */
  -webkit-mask-image: linear-gradient(90deg, #000 28%, transparent 78%);
          mask-image: linear-gradient(90deg, #000 28%, transparent 78%);
  -webkit-mask-size: calc(120vh * 0.563) 120%; mask-size: calc(120vh * 0.563) 120%;
  -webkit-mask-size: calc(120lvh * 0.563) 120%; mask-size: calc(120lvh * 0.563) 120%;   /* stable on phones (see height) */
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Darken for legibility with a cheap overlay instead of a CSS `filter` on the
   fixed layer. A filtered fixed full-screen layer forces the compositor to
   re-blend it over the scrolling content every frame → major scroll jank on
   mobile (even on an iPhone 14 Pro). A flat alpha overlay is essentially free. */
.page-bg::after { content: ""; position: absolute; inset: 0; background: #000; opacity: .30; }
/* Load-in: the artwork develops out of the black with a plain fade — NO
   transform. (A scale transition on this fixed, masked, full-screen layer
   made the photo tear away from the viewport while scrolling until the
   animation finished, and the movement itself was too much anyway.)
   It starts only once the image file has actually loaded (main.js adds
   .is-loaded), so nothing pops in half-decoded. The keyframe is a safety
   net: if the script never runs, the photo is forced visible after 4 s. */
.js .page-bg {
  opacity: 0;
  animation: page-bg-safety 1ms linear 4s forwards;
}
.js .page-bg.is-loaded { opacity: 1; }   /* the 1.6 s fade itself is played by main.js (Web Animations API) */
@keyframes page-bg-safety { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .page-bg { opacity: 1; animation: none; } }

/* ---------- 15. Nav smoke ---------- */
/* Shared header smoke canvases — white smoke behind the nav text, grey smoke
   in front of it (veils the letters); never clipped per item */
.nav-smoke { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; }
.nav-smoke--front { z-index: 3; }
/* letters of a smoking word (split by smoke.js): moved by transform only —
   sub-pixel smooth, never re-rasterised */
.nav__ch { display: inline-block; white-space: pre; will-change: transform, opacity; transform-origin: 50% 70%; }

/* ---------- 15b. Smoke reveal (rows + reveal blocks) ---------- */
/* The element is masked by a smoke blob (images/bg/reveal-*.webp — a solid
   core with wispy, bitten edges) that animations.js grows from a point until
   the core covers the whole box: the content appears INSIDE the smoke, edge
   first where the wisps are. Origin, texture and pace vary per element. The
   mask is dropped the moment the animation ends (.rv-done), so nothing stays
   masked and there is no per-frame cost afterwards. */
/* One smoke blob per block; animations.js sets mask-image/size/position inline. */
.rv { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.js .rv, .js .rv-done, .js [data-brutal] > .rv, .js [data-brutal] > .rv-done { opacity: 1; }

/* ---------- 13. Audio player (Slyšet) ---------- */
/* Each mount is one group inside a zigzag .video-row (no own top margin) */
.player { display: flex; flex-direction: column; gap: var(--sp-4); }
.player__group { color: var(--c-smoke); font-size: .85rem; letter-spacing: .25em; text-transform: uppercase; font-weight: 600; margin: var(--sp-12) 0 var(--sp-2); }
.player__group:first-child { margin-top: 0; }

/* Outline style — same language as the "více info" chips on Vidět:
   transparent background, 1px hairline border, pill shape; border lights up
   on hover, full white while playing. No neumorphic shadows. */
.track {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6); color: var(--c-fog);
  background: transparent; border: 1px solid var(--color-border); border-radius: 999px;
  transition: border-color var(--transition), color var(--transition);
}
.track:hover { color: var(--c-white); border-color: rgba(242, 242, 242, .28); }
.track.is-playing { color: var(--c-white); border-color: var(--c-white); }

.track__toggle { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 1px solid var(--color-border); color: var(--c-white); transition: border-color var(--transition); }
.track__toggle:hover { border-color: var(--c-white); }
.track.is-playing .track__toggle { border-color: var(--c-white); }
.track__play { width: 0; height: 0; margin-left: 3px; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.track.is-playing .track__play { margin: 0; border: 0; width: 11px; height: 13px; background: linear-gradient(currentColor 0 0) 0 / 3px 100% no-repeat, linear-gradient(currentColor 0 0) 8px / 3px 100% no-repeat; }

.track__title { flex: none; width: clamp(7rem, 15vw, 12rem); font-family: var(--font-heading); font-size: clamp(1rem, 1.7vw, 1.35rem); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.track__seek { flex: 1; min-width: 70px; height: 20px; position: relative; cursor: pointer; touch-action: none; }
.track__seek::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 3px; border: 1px solid var(--color-border); background: transparent; }
.track__seek-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 6px; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--c-ash), var(--c-white)); }
.track__seek-fill::after { content: ""; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--c-white); }

.track__time { flex: none; width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--c-ash); }

.track__viz { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 20px; width: 27px; opacity: 0; transition: opacity var(--transition); }
.track.is-playing .track__viz { opacity: 1; }
.track__viz i { width: 3px; height: 100%; background: var(--c-white); transform-origin: bottom; transform: scaleY(.15); }

.track__more { flex: none; font-family: var(--font-heading); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ash); padding: var(--sp-2) var(--sp-4); border-radius: 999px; background: transparent; border: 1px solid var(--color-border); transition: border-color var(--transition), color var(--transition); }
.track__more:hover { color: var(--c-white); border-color: var(--c-white); }

/* Up to tablet width the player column is too narrow for a one-line pill
   (titles were truncated to "Run For Your L…" on an iPad): wrap the seek bar
   onto its own second line and let the title breathe. */
@media (max-width: 1024px) {
  .track { flex-wrap: wrap; border-radius: 24px; }   /* wrapped 2-line rows: softer corners than a pill */
  .track__title { flex: 1; width: auto; }
  .track__seek { flex-basis: 100%; order: 6; }
  .track__time { width: auto; }
}

/* ---------- 13b. Mobile deck (Slyšet) — track list card per section ---------- */
/* On phones each section's stacked pills are replaced by ONE card under that
   section's text: a plain numbered track list (so it is obvious there are
   several pieces and any of them can be tapped) with one seek bar and one
   prev / play / next row. All cards share a single <audio>. Desktop (≥768px)
   keeps the zigzag lists; the card is hidden there. */
.deck {
  display: none; position: relative;
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  border: 1px solid var(--color-border); border-radius: 20px;
  background: rgba(0, 0, 0, .6); color: var(--c-fog);
}
@media (max-width: 767px) {
  .page--services .video-row .player { display: none; }
  .deck { display: block; }
}
.page-content .deck__hint { margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-1) 0; font-size: .74rem; line-height: 1.4; color: var(--c-ash); max-width: none; }
.deck__list { margin: 0; padding: 0; list-style: none; }
.deck__row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 50px;
  padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-3); text-align: left; color: var(--c-fog);
  border-bottom: 1px solid var(--color-border); border-radius: 8px 0 0 8px;
  transition: color var(--transition), background var(--transition);
}
.deck__list li:last-child .deck__row { border-bottom: 0; }
.deck__num { flex: none; width: 1.3rem; font-size: .74rem; color: var(--c-smoke); font-variant-numeric: tabular-nums; transition: color var(--transition); }
.deck__text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.deck__name { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.01em; }
/* state line under the selected title — only once it has been started
   ("Právě hraje" / "Pozastaveno") */
/* the status line always keeps its height (empty or not), so a row never
   changes size when playback starts */
.deck__status { display: block; min-height: 1em; font-family: var(--font-body); font-weight: 600; font-size: .64rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ash); margin-top: 3px; }
.deck__row.is-live .deck__status { color: var(--c-white); }
/* live equalizer: nine hair-thin bars between the title and the button, fading
   in from the left so they hang in the row like a trace of the sound. The slot
   is always reserved (fixed width) — only its opacity changes, no reflow. */
.deck__viz { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 20px; width: 46px; margin-right: var(--sp-2); opacity: 0; transition: opacity .45s var(--transition);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
.deck__viz i { flex: none; width: 2px; height: 100%; background: var(--c-white); opacity: .8; transform-origin: bottom; transform: scaleY(.1); }
.deck__row.is-live .deck__viz { opacity: 1; }
/* right-hand control: an outlined play button on EVERY row ("tap to play this
   one"); a pause glyph on the row that is playing */
.deck__state { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); display: grid; place-items: center; transition: border-color var(--transition); }
.deck__state::before { content: ""; width: 0; height: 0; margin-left: 2px; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; opacity: .75; transition: opacity var(--transition); }
.deck__row.is-live .deck__state::before { margin: 0; border: 0; width: 8px; height: 11px; background: linear-gradient(currentColor 0 0) 0 / 2.5px 100% no-repeat, linear-gradient(currentColor 0 0) 5.5px / 2.5px 100% no-repeat; }
/* selected row: white type on a faint white veil that fades out to the right */
.deck__row.is-current { color: var(--c-white); background: linear-gradient(90deg, rgba(242, 242, 242, .085), rgba(242, 242, 242, .03) 55%, transparent 90%); }
.deck__row.is-current .deck__num { color: var(--c-white); }
.deck__row.is-current .deck__state { border-color: var(--c-white); }
.deck__row.is-current .deck__state::before { opacity: 1; }
.deck__seek { position: relative; height: 24px; margin-top: var(--sp-3); cursor: pointer; touch-action: none; }
.deck__seek::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 5px; border-radius: 3px; border: 1px solid var(--color-border); }
.deck__seek-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 5px; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--c-ash), var(--c-white)); }
.deck__seek-fill::after { content: ""; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--c-white); }
.deck__times { display: flex; justify-content: space-between; font-size: .72rem; color: var(--c-ash); font-variant-numeric: tabular-nums; margin-top: 2px; }
.deck__ctrl { display: flex; justify-content: center; align-items: center; gap: var(--sp-8); margin-top: var(--sp-2); }
.deck__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); color: var(--c-white); background: transparent; transition: border-color var(--transition), transform var(--transition); }
.deck__btn:active { transform: scale(.94); }
.deck__btn svg { width: 20px; height: 20px; fill: currentColor; }
.deck__play { width: 52px; height: 52px; border-color: rgba(242, 242, 242, .5); }
.deck.is-playing .deck__play { border-color: var(--c-white); }
.deck__play-icon { width: 0; height: 0; margin-left: 3px; border-left: 15px solid currentColor; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.deck.is-playing .deck__play-icon { margin: 0; border: 0; width: 13px; height: 17px; background: linear-gradient(currentColor 0 0) 0 / 4px 100% no-repeat, linear-gradient(currentColor 0 0) 9px / 4px 100% no-repeat; }

/* ---------- 14. Video rows (Vidět) — zigzag video/text layout ---------- */
/* Intro lead — the page's first sentence promoted to a standalone opener above the zigzag */
.rows-intro { margin-bottom: var(--sp-16); }
.page-content .rows-intro p { max-width: 20ch; margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.12; letter-spacing: -.02em; color: var(--c-white); }
@media (min-width: 768px) { .rows-intro { margin-bottom: var(--sp-24); } }
.video-rows { display: flex; flex-direction: column; gap: var(--sp-16); }
.video-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
/* Bleed: the smoke reveal (animations.js) masks the WHOLE row, and a CSS mask
   clips everything to the element's border box — so the dark pockets below
   (they overflow the card and the text on purpose) were cut off with straight
   edges while the reveal played and popped out to full size the moment the
   mask was dropped (p ≥ .985). Pad the row over the pockets' overflow and
   pull the padding back with the same negative margin: the masked box now
   holds the pockets and the layout does not move. The vertical bleed stays
   under the row gap (4rem / 6rem), so a revealing row — a stacking context,
   painted above its siblings — never covers a neighbour's text. */
.video-row {
  --bleed-x: max(3rem, 14%); --bleed-y: 3.75rem;
  padding: var(--bleed-y) var(--bleed-x);
  margin: calc(-1 * var(--bleed-y)) calc(-1 * var(--bleed-x));
}
@media (min-width: 768px) { .video-row { --bleed-x: 4.5rem; --bleed-y: 4.5rem; } }
/* Row text — no numbering, no hairline (the "01 ——" eyebrow drowned in the
   artwork and is the default of every generated page). The words are the
   design: set larger, white, in the display face, and sitting in a pocket of
   darkness — a soft dark cloud behind the text that keeps it legible over
   the photo and the smoke, as if the smoke had parted around the words. */
.video-row__text { position: relative; }
.video-row__text::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -2.4rem -3rem;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .4) 42%, rgba(0, 0, 0, 0) 72%);
}
.page-content .video-row__text p { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.65rem); line-height: 1.55; letter-spacing: -.005em; color: var(--c-white); max-width: 32ch; }
@media (min-width: 768px) {
  .video-rows { gap: var(--sp-24); }
  .video-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-16); }
  .video-row .video-card, .video-row .player { grid-column: 1; grid-row: 1; }
  .video-row .video-row__text { grid-column: 2; grid-row: 1; }
  /* zigzag: flipped rows mirror the template — media right (7fr), text left (5fr).
     Explicit placement (not `order`) so rows without text still alternate sides.
     `.player` = the Slyšet audio-group blocks, which share this row layout. */
  .video-row--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .video-row--flip .video-card, .video-row--flip .player { grid-column: 2; }
  .video-row--flip .video-row__text { grid-column: 1; }
}

.video-card { margin: 0; position: relative; }
/* Pocket of darkness behind the frame: the mask fades the picture to
   TRANSPARENT, which is fine over the black desktop page but on a phone the
   frame sits right on the artwork and dissolved into a busy photo. This dark
   halo (same device as behind the texts) gives the fade something black to
   dissolve into, then itself melts softly into the photo. */
.video-card::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -14% -9%;
  background: radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, .9) 28%, rgba(0, 0, 0, .6) 52%, rgba(0, 0, 0, 0) 74%);
}
/* Phones: the frame lies right on the artwork, so the pocket must be a real
   patch of black — fully dark well past the frame's dissolved rim, then a
   wide, slow melt into the photo. */
@media (max-width: 767px) {
  .video-card::before {
    inset: max(-22%, calc(-1 * var(--bleed-y))) -14%;   /* vertical overflow capped at the row bleed (matters only above ~450px wide) */
    background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .9) 40%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, 0) 74%);
  }
}
/* The frame dissolves into smoke: one pre-rendered alpha mask (a soft core
   whose edges were built from the site's own kour texture) makes the video's
   border irregular and cloudy — not a rectangle, not a circle — while the
   picture inside keeps its full contrast (no darkening overlay). A single
   raster mask renders identically in every browser; no gradient compositing,
   no shadow pseudo-element (those diverged between browsers).
   The mask's alpha is exactly 0 along its own border (a guard is baked into
   the file), so the picture can never show a straight edge against the page —
   idle or playing, on any screen size. Nothing moves or grows on play — the
   frame stays put; only the thumbnail is swapped for the player. */
/* Hidden until its mask image has arrived (animations.js adds
   .frame-mask-ready to <html>) — never shown with hard edges first. */
.js .video-card__frame { opacity: 0; transition: opacity .4s var(--transition); }
.js.frame-mask-ready .video-card__frame, html:not(.js) .video-card__frame { opacity: 1; }
.video-card__frame {
  position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  -webkit-mask-image: url("../images/bg/frame-mask.webp"); mask-image: url("../images/bg/frame-mask.webp");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.video-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-smoke); font-family: var(--font-heading); letter-spacing: .25em; text-transform: uppercase; font-size: .75rem; }
.video-card__title { margin-top: var(--sp-4); font-family: var(--font-heading); font-weight: 600; color: var(--c-fog); font-size: 1.15rem; }
.video-card iframe { width: 100%; height: 100%; border: 0; display: block; }

/* YouTube facade — clean full-colour thumbnail (no filters, no scrim) */
.video-card__frame[data-yt] { cursor: pointer; background-size: cover; background-position: center; }
/* Play button — outline circle, same language as the players and buttons;
   fills white on hover (like .btn--primary) */
.video-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; background: rgba(0, 0, 0, .38); border: 1px solid rgba(242, 242, 242, .6); display: grid; place-items: center; z-index: 1; transition: transform var(--transition), background var(--transition), border-color var(--transition); }
.video-card__play::after { content: ""; width: 0; height: 0; margin-left: 4px; border-left: 18px solid var(--c-white); border-top: 11px solid transparent; border-bottom: 11px solid transparent; transition: border-left-color var(--transition); }
.video-card__frame[data-yt]:hover .video-card__play { transform: translate(-50%, -50%) scale(1.08); background: var(--c-white); border-color: var(--c-white); }
.video-card__frame[data-yt]:hover .video-card__play::after { border-left-color: var(--c-black); }

/* ---- Our player chrome (video.js) — YouTube's own controls are off ---- */
.video-card__frame.is-playing { cursor: pointer; }
/* slight overscan: YouTube's title strip at the top and its bottom edge fall
   into the masked (dissolved) rim of the frame instead of the picture */
.yt-host { position: absolute; inset: -8%; }
.yt-host iframe { width: 100%; height: 100%; border: 0; display: block; }
/* transparent layer over the iframe: the pointer never reaches YouTube, so its
   hover chrome never wakes; tapping the picture toggles play / pause */
.vp { position: absolute; inset: 0; z-index: 2; }
/* our own still while paused / loading / ended (instead of YouTube's "more
   videos" shelf): the card's thumbnail */
.vp__poster { position: absolute; inset: 0; background: #000 center / cover no-repeat; opacity: 1; transition: opacity .45s var(--transition); }
.video-card__frame.is-live .vp__poster { opacity: 0; }
.vp__toggle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; background: rgba(0, 0, 0, .38); border: 1px solid rgba(242, 242, 242, .6); display: grid; place-items: center; z-index: 1; opacity: 1; transition: opacity .35s var(--transition), background var(--transition), border-color var(--transition); }
.vp__icon { width: 0; height: 0; margin-left: 4px; border-left: 18px solid var(--c-white); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.video-card__frame.is-live .vp__icon { margin: 0; border: 0; width: 16px; height: 20px; background: linear-gradient(var(--c-white) 0 0) 0 / 5px 100% no-repeat, linear-gradient(var(--c-white) 0 0) 11px / 5px 100% no-repeat; }
/* while playing the button fades away; it comes back under the pointer */
.video-card__frame.is-live .vp__toggle { opacity: 0; }
.video-card__frame.is-live:hover .vp__toggle, .video-card__frame.is-live .vp__toggle:focus-visible { opacity: 1; }
.video-card__frame.is-loading .vp__toggle { opacity: .5; }
/* progress line + time + fullscreen live UNDER the frame, outside the mask */
.vp__bar { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.vp__seek { flex: 1 1 auto; position: relative; height: 18px; cursor: pointer; touch-action: none; }
.vp__seek::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: rgba(242, 242, 242, .22); }
.vp__fill { position: absolute; left: 0; top: 50%; height: 2px; width: 0; transform: translateY(-50%); background: var(--c-white); }
.vp__fill::after { content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--c-white); transform: translate(50%, -50%); }
.vp__time { flex: none; font-size: .74rem; color: var(--c-ash); font-variant-numeric: tabular-nums; }
.vp__fs { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-border); color: var(--c-fog); display: grid; place-items: center; transition: border-color var(--transition), color var(--transition); }
.vp__fs:hover { color: var(--c-white); border-color: var(--c-white); }
.vp__fs[hidden] { display: none; }
/* Fullscreen = the whole card (frame + our bar), on a plain black stage: no
   smoke mask, no overscan, and an unmistakable close button top right. */
.vp__close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(242, 242, 242, .55); background: rgba(0, 0, 0, .45); color: var(--c-white); display: none; place-items: center; font-size: 1.5rem; line-height: 1; }
.video-card:fullscreen { background: #000; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--sp-4); }
.video-card:fullscreen .video-card__frame { -webkit-mask-image: none; mask-image: none; }
.video-card:fullscreen .yt-host { inset: 0; }
.video-card:fullscreen .vp__poster { background-size: contain; }
.video-card:fullscreen::before { display: none; }
.video-card:fullscreen figcaption { display: none; }
.video-card:fullscreen .vp__close { display: grid; }
.video-card:fullscreen .vp__bar { margin-top: var(--sp-4); }
.video-card__more { margin-top: var(--sp-4); font-family: var(--font-heading); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ash); padding: var(--sp-3) var(--sp-6); border-radius: 999px; background: transparent; border: 1px solid var(--color-border); transition: border-color var(--transition), color var(--transition); }
.video-card__more:hover { color: var(--c-white); border-color: var(--c-white); }
/* "více info" / "info" buttons hidden for now — kept in the DOM to re-enable later */
.video-card__more, .track__more { display: none; }
.video-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* ---------- Modal ("více info") ---------- */
.modal { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: var(--sp-6);
  opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
  background: rgba(8, 8, 8, .6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel { position: relative; max-width: 580px; width: 100%; max-height: 85vh; overflow-y: auto;
  background: var(--c-base); border-radius: 28px; box-shadow: var(--nm-out); padding: var(--sp-12) var(--sp-8);
  transform: translateY(24px) scale(.97); transition: transform var(--transition); }
.modal.is-open .modal__panel { transform: none; }
.modal__close { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem; line-height: 1; color: var(--c-fog);
  background: var(--c-base); box-shadow: var(--nm-out-sm); transition: box-shadow var(--transition), color var(--transition); }
.modal__close:hover { color: var(--c-white); box-shadow: var(--nm-in-sm); }
.modal__eyebrow { font-family: var(--font-heading); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--c-smoke); margin-bottom: var(--sp-3); }
.modal__title { font-size: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: var(--sp-6); color: var(--c-white); }
.modal__body { color: var(--c-fog); line-height: 1.8; }
.modal__body p + p { margin-top: var(--sp-4); }

/* ---------- Footer legal line ---------- */
.site-footer__legal { margin-top: var(--sp-3); display: flex; gap: var(--sp-3); align-items: center; justify-content: center; flex-wrap: wrap; font-size: .78rem; }
.site-footer__legal a, .site-footer__cookies { color: var(--color-muted); transition: color var(--transition); }
.site-footer__legal a:hover, .site-footer__cookies:hover { color: var(--c-fog); }
.site-footer__cookies { font: inherit; letter-spacing: inherit; }

/* ---------- Legal pages (privacy) — readable long-form ---------- */
.legal h2 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; margin-top: var(--sp-12); margin-bottom: var(--sp-3); }
.page-content .legal p { margin-top: var(--sp-4); max-width: 70ch; }
.legal ul { list-style: disc; margin: 0 0 var(--sp-4) var(--sp-6); max-width: 70ch; }
.legal li { margin-bottom: var(--sp-2); color: var(--c-fog); line-height: 1.7; }
.legal a { color: var(--c-white); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Cookie consent — themed dark to match the site ---------- */
#cc-main {
  --cc-bg: #0b0b0b;
  --cc-primary-color: var(--c-white);
  --cc-secondary-color: var(--c-ash);
  --cc-btn-primary-bg: var(--c-white);
  --cc-btn-primary-color: var(--c-black);
  --cc-btn-primary-border-color: var(--c-white);
  --cc-btn-primary-hover-bg: var(--c-fog);
  --cc-btn-primary-hover-color: var(--c-black);
  --cc-btn-primary-hover-border-color: var(--c-fog);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--c-fog);
  --cc-btn-secondary-border-color: var(--color-border);
  --cc-btn-secondary-hover-bg: rgba(242, 242, 242, .08);
  --cc-btn-secondary-hover-color: var(--c-white);
  --cc-btn-secondary-hover-border-color: var(--c-white);
  --cc-separator-border-color: var(--color-border);
  --cc-toggle-on-bg: var(--c-white);
  --cc-toggle-off-bg: #555;
  --cc-cookie-category-block-bg: rgba(242, 242, 242, .04);
  --cc-cookie-category-block-border: var(--color-border);
  --cc-font-family: var(--font-body);
  --cc-modal-border-radius: 16px;
  --cc-btn-border-radius: 999px;
  --cc-z-index: 9600;
}