/* ================================================================
   SO MUCH PIĘKNIE - theme ("Noc i szminka")
   ================================================================
   Plain semantic CSS, loaded directly by sites/somuchpieknie/base_site.html
   (NOT part of the Tailwind build). Every class is prefixed "smp-" so nothing
   leaks into the other sites; only the body rules are scoped to
   .site-somuchpieknie.

   Palette
     night #0B0B10   night-alt #121218   white #FFFFFF   snow #F5F0EA
     lipstick #E0123C (play / primary CTA only, white label)
     wine #5A0A22 (quote band gradient, hover)   pink #FF7A8E (labels on dark)
   Type
     Cormorant 600 UPPERCASE, wide tracking, lining numerals (display)
     Manrope 18px minimum (body)

   Sections
     site.css     1. Tokens and base  2. Layout and type  3. Buttons and links  4. Header and footer
     blocks.css   5. Hero, CTA band, quote band  6. Home blocks (tiles, places, steps, FAQ)
     song.css     7. Catalog and stories lists  8. Song page
     stories.css  9. Story article, legal page, 404  10. Lite video
   ================================================================ */

/* ---------- 1. Tokens and base ---------- */
.site-somuchpieknie {
  /* Remap the shared Tailwind tokens so base.html (body bg, skip link) follows the palette. */
  --color-primary: #E0123C;
  --color-primary-hover: #5A0A22;
  --color-bg-dark: #0B0B10;

  --night: #0B0B10;
  --night-alt: #121218;
  --white: #FFFFFF;
  --snow: #F5F0EA;
  --lipstick: #E0123C;
  --wine: #5A0A22;
  --pink: #FF7A8E;
  --display: "Cormorant", Garamond, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking: .12em;
  --wordmark: .24em;
  --shadow-red: 0 0 40px rgba(224, 18, 60, .45);
}

body.site-somuchpieknie {
  min-height: 100vh;
  background: var(--night);
  color: var(--snow);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
.site-somuchpieknie ::selection { background: var(--lipstick); color: #fff; }
.site-somuchpieknie html, html:has(.site-somuchpieknie) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.site-somuchpieknie) { scroll-behavior: auto; }
  .site-somuchpieknie * { transition: none !important; animation: none !important; }
}
.site-somuchpieknie a { color: inherit; text-decoration: none; }
.site-somuchpieknie img { max-width: 100%; height: auto; display: block; }
.site-somuchpieknie [hidden] { display: none !important; }

/* Visible keyboard focus everywhere (WCAG 2.4.7) */
.site-somuchpieknie a:focus-visible,
.site-somuchpieknie button:focus-visible,
.site-somuchpieknie summary:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
  border-radius: .5rem;
}
.site-somuchpieknie .smp-section--white a:focus-visible,
.site-somuchpieknie .smp-story a:focus-visible,
.site-somuchpieknie .smp-story button:focus-visible,
.site-somuchpieknie .smp-dialog button:focus-visible { outline-color: var(--lipstick); }

.smp-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 2. Layout and type ---------- */
.smp-wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.smp-wrap--narrow { max-width: 48rem; }
@media (min-width: 640px) { .smp-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .smp-wrap { padding: 0 2rem; } }

.smp-section { background: var(--night); padding: 4rem 0; }
.smp-section--alt { background: var(--night-alt); }
.smp-section--night { background: var(--night); }
.smp-section--white { background: var(--white); color: var(--night); }
@media (min-width: 768px) { .smp-section { padding: 6rem 0; } }

.smp-section__head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; }
.smp-section__head--filters { margin-bottom: 0; gap: 1.5rem; }
@media (min-width: 768px) {
  .smp-section__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

.smp-h2, .smp-hero__title, .smp-release__title, .smp-story-head__title,
.smp-tile__title, .smp-cover__title, .smp-soon__title, .smp-feature-card__title,
.smp-dialog__title, .smp-empty__title,
.smp-place__title, .smp-legal__heading, .smp-card-cta__title {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking); font-variant-numeric: lining-nums;
}
.smp-h2 { margin: 0; font-size: 2.25rem; line-height: 1.1; }
.smp-h2--md { font-size: 3rem; line-height: 1.1; }
.smp-h2--sm { font-size: 2.25rem; line-height: 1.15; }
.smp-h2--dark { color: var(--night); }
@media (min-width: 768px) {
  .smp-h2 { font-size: 3.75rem; }
  .smp-h2--sm { font-size: 3rem; }
}
.smp-lead { margin: 1rem 0 0; max-width: 36rem; font-size: 1.25rem; line-height: 1.7; color: rgba(245, 240, 234, .8); }
.smp-section--white .smp-lead { color: rgba(11, 11, 16, .8); }

/* Small uppercase label: pink on dark, lipstick on white */
.smp-label {
  margin: 0; font-size: 1rem; line-height: 1.5rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking); color: var(--pink);
}
.smp-label--on-white, .smp-section--white .smp-label, .smp-story .smp-label { color: var(--lipstick); }
.smp-section__head .smp-label + .smp-h2, .smp-label + .smp-h2 { margin-top: 1rem; }
.smp-pill {
  display: inline-flex; margin: 0; padding: .5rem 1rem; border: 1px solid rgba(245, 240, 234, .15);
  border-radius: 999px; background: var(--night-alt); color: var(--pink);
  font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking);
}
.smp-note { margin: 2rem 0 0; font-size: 1rem; }
.smp-note--on-white { color: rgba(11, 11, 16, .8); }
.smp-note--on-dark { color: rgba(245, 240, 234, .8); }
.smp-meta { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: 1rem; color: rgba(245, 240, 234, .8); }
.smp-hint { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; font-size: 1rem; color: rgba(245, 240, 234, .8); }
.smp-hint svg { flex-shrink: 0; }

/* ---------- 3. Buttons and links ---------- */
.smp-actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.smp-actions--center { align-items: center; justify-content: center; }
@media (min-width: 640px) { .smp-actions { flex-direction: row; align-items: center; } }

.smp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.5rem; padding: 0 2rem; border-radius: 999px; border: 2px solid transparent;
  font: 700 1.125rem/1 var(--sans); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.smp-btn--primary { background: var(--lipstick); color: #fff; box-shadow: var(--shadow-red); }
.smp-btn--primary:hover { background: var(--wine); }
.smp-btn--ghost { border-color: rgba(245, 240, 234, .4); color: var(--snow); font-weight: 600; background: transparent; }
.smp-btn--ghost:hover { border-color: var(--snow); background: rgba(245, 240, 234, .1); }
.smp-btn--ghost-dark { border-color: rgba(11, 11, 16, .4); color: var(--night); font-weight: 600; }
.smp-btn--ghost-dark:hover { border-color: var(--night); background: rgba(11, 11, 16, .06); }
.smp-icon { flex-shrink: 0; }

.smp-link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem;
  font-size: 1.125rem; font-weight: 600; color: var(--pink); text-underline-offset: .5rem;
}
.smp-link:hover { text-decoration: underline; }

/* ---------- 4. Header and footer ---------- */
.smp-header {
  position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(245, 240, 234, .1);
  background: rgba(11, 11, 16, .9); backdrop-filter: blur(12px);
}
.smp-header__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
.smp-logo {
  display: flex; align-items: center; gap: .5rem; min-height: 3rem; border-radius: 999px;
  font-family: var(--display); font-size: 1.25rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--snow); width: fit-content;
}
.smp-logo__avatar {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px var(--lipstick), 0 0 16px rgba(224, 18, 60, .6);
}
.smp-logo--large { gap: 1rem; font-size: 1.875rem; line-height: 1.2; }
.smp-logo--large .smp-logo__avatar { width: 4rem; height: 4rem; box-shadow: 0 0 0 2px var(--lipstick), 0 0 24px rgba(224, 18, 60, .6); }
@media (min-width: 768px) {
  .smp-logo { gap: 1rem; letter-spacing: var(--wordmark); }
  .smp-logo__avatar { width: 3rem; height: 3rem; }
  .smp-logo--large { letter-spacing: var(--wordmark); }
}
@media (max-width: 400px) { .smp-logo__word { font-size: 1.05rem; } }

.smp-nav { margin-left: auto; }
.smp-nav__list {
  position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: .5rem;
  margin: 0; padding: 1rem 1rem 2rem; list-style: none; border-bottom: 1px solid rgba(245, 240, 234, .1); background: var(--night);
}
.smp-nav__list.is-open { display: flex; }
.smp-nav__link {
  display: flex; align-items: center; min-height: 3.5rem; padding: 0 1rem; border-radius: .75rem;
  font-family: var(--display); font-size: 1.5rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking); color: var(--snow); transition: background-color .2s;
}
.smp-nav__link:hover { background: rgba(245, 240, 234, .1); }
.smp-nav__link.is-current { color: var(--pink); }
.smp-menu-toggle {
  display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--snow); cursor: pointer;
}
.smp-menu-toggle:hover { background: rgba(245, 240, 234, .1); }
@media (min-width: 768px) {
  .smp-menu-toggle { display: none; }
  .smp-nav__list { position: static; display: flex; flex-direction: row; align-items: center; gap: .5rem; padding: 0; border: 0; background: transparent; }
  .smp-nav__link { min-height: 3rem; font-family: var(--sans); font-size: 1.125rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
}

.smp-footer { border-top: 1px solid rgba(245, 240, 234, .1); background: var(--night-alt); }
.smp-footer__inner { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .smp-footer__inner { padding-top: 6rem; padding-bottom: 6rem; } }
.smp-footer__grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .smp-footer__grid { grid-template-columns: 6fr 3fr 3fr; } }
.smp-footer__tagline { margin: 1rem 0 0; max-width: 24rem; font-size: 1.25rem; line-height: 1.7; color: rgba(245, 240, 234, .9); }
.smp-footer__note { margin: 1rem 0 0; max-width: 24rem; color: rgba(245, 240, 234, .7); }
.smp-footer__list { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.smp-footer__link { display: flex; align-items: center; gap: 1rem; min-height: 3rem; border-radius: .75rem; color: var(--snow); }
.smp-footer__link:hover { color: var(--pink); }
.smp-footer__bottom {
  display: flex; flex-direction: column; gap: 1.5rem; margin-top: 4rem; padding-top: 2rem;
  border-top: 1px solid rgba(245, 240, 234, .1); font-size: 1rem; color: rgba(245, 240, 234, .7);
}
.smp-footer__bottom p { margin: 0; }
.smp-footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.smp-footer__legal a { display: flex; align-items: center; min-height: 3rem; color: rgba(245, 240, 234, .85); text-decoration: underline; text-underline-offset: .25rem; }
.smp-footer__legal a:hover { color: var(--snow); }
@media (min-width: 640px) { .smp-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.smp-link { white-space: nowrap; }

/* Language switcher: a pill with round flags, the current language lit */
.smp-lang {
  display: flex; gap: .25rem; margin: 0 0 0 auto; padding: .25rem; list-style: none;
  border: 1px solid rgba(245, 240, 234, .18); border-radius: 999px; background: rgba(245, 240, 234, .04);
}
@media (min-width: 768px) { .smp-lang { margin-left: 1.5rem; } }
.smp-lang__link {
  display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 .75rem 0 .375rem;
  border-radius: 999px; font-size: .8125rem; font-weight: 800; letter-spacing: .08em;
  color: rgba(245, 240, 234, .65); text-decoration: none; transition: background-color .2s, color .2s;
}
.smp-lang__link:hover { color: var(--snow); background: rgba(245, 240, 234, .08); }
.smp-lang__link.is-current { color: var(--snow); background: rgba(245, 240, 234, .14); }
.smp-lang__link:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.smp-flag {
  display: block; flex-shrink: 0; width: 1.5rem; height: 1.5rem; overflow: hidden; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(245, 240, 234, .35); opacity: .55; transition: opacity .2s, box-shadow .2s;
}
.smp-flag svg { display: block; width: 100%; height: 100%; }
.smp-lang__link:hover .smp-flag { opacity: .9; }
.smp-lang__link.is-current .smp-flag { opacity: 1; box-shadow: 0 0 0 2px var(--snow); }
/* Phones: flags only, tighter gaps and a 44px menu button, so logo, flags and menu
   fit a 360px screen (the button used to be squeezed and stick out of it). */
@media (max-width: 479px) {
  .smp-header__bar { gap: .5rem; }
  .smp-header .smp-logo__word { white-space: nowrap; }
  .smp-lang { gap: .125rem; padding: .125rem; }
  .smp-lang__link { min-width: 2.25rem; justify-content: center; padding: 0; }
  .smp-lang__code { display: none; }
  .smp-menu-toggle { flex-shrink: 0; width: 2.75rem; height: 2.75rem; }
}
@media (max-width: 400px) {
  .smp-header .smp-logo__word { font-size: .95rem; letter-spacing: .06em; }
  .smp-header .smp-logo__avatar { width: 2.25rem; height: 2.25rem; }
}
/* The narrowest phones (320px): the wordmark takes two lines. */
@media (max-width: 374px) { .smp-header .smp-logo__word { white-space: normal; line-height: 1.05; } }


/* Cookie consent (includes/consent.html): a card over the bottom of the page, above the
   listen bar, with two equal buttons. */
.smp-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
}
.smp-consent[hidden] { display: none; }
.smp-consent__inner {
  display: flex; flex-direction: column; gap: 1rem; max-width: 56rem; margin: 0 auto; padding: 1.5rem;
  border: 1px solid rgba(245, 240, 234, .16); border-radius: 1rem; background: var(--night-alt);
  color: var(--snow); box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
}
.smp-consent__title { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: var(--tracking); text-transform: uppercase; }
.smp-consent__text p { margin: 0; font-size: 1rem; line-height: 1.6; color: rgba(245, 240, 234, .85); }
.smp-consent__text a { color: var(--snow); text-decoration: underline; text-underline-offset: .2rem; }
.smp-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.smp-consent__btn { justify-content: center; border-color: rgba(245, 240, 234, .5); background: transparent; color: var(--snow); }
.smp-consent__btn:hover { border-color: var(--snow); background: rgba(245, 240, 234, .1); }
.smp-consent__btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
@media (min-width: 48rem) {
  .smp-consent__inner { flex-direction: row; align-items: center; gap: 2rem; }
  .smp-consent__actions { flex-shrink: 0; grid-template-columns: auto auto; }
  .smp-consent__btn { min-width: 9rem; }
}
.smp-footer__consent {
  display: flex; align-items: center; min-height: 3rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: rgba(245, 240, 234, .85); text-decoration: underline; text-underline-offset: .25rem;
}
.smp-footer__consent:hover { color: var(--snow); }