/* ================================================================
   SO MUCH PIĘKNIE - stories and lite video
   Story article, legal page, 404 and lite video.
   Part of the theme loaded by sites/somuchpieknie/base_site.html in the
   order site.css, blocks.css, song.css, stories.css. Tokens are in site.css.
   ================================================================ */

/* ---------- 9. Story article, legal page, 404 ---------- */
.smp-story-head { position: relative; isolation: isolate; overflow: hidden; background: var(--night); padding: 2rem 0 3rem; }
@media (min-width: 768px) { .smp-story-head { padding-top: 4rem; } }
.smp-story-head__label { margin-top: 1.5rem; }
.smp-story-head__title { margin: 1rem 0 0; font-size: 2.25rem; line-height: 1.1; }
@media (min-width: 640px) { .smp-story-head__title { font-size: 3rem; } }
@media (min-width: 768px) { .smp-story-head__title { font-size: 4.5rem; } }
.smp-story-cover { margin: 0; padding: 0 1rem 4rem; background: var(--night); }
@media (min-width: 640px) { .smp-story-cover { padding-left: 1.5rem; padding-right: 1.5rem; } }
.site-somuchpieknie .smp-story-cover__image { width: 100%; max-width: 64rem; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 1.5rem; object-fit: cover; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .4); }
.smp-story { background: var(--white); color: var(--night); padding: 4rem 0; }
@media (min-width: 768px) { .smp-story { padding: 6rem 0; } }

.smp-prose { font-size: 1.125rem; line-height: 1.75; }
.smp-prose .rich-text > p:first-child, .smp-prose > p:first-child { font-size: 1.25rem; line-height: 1.7; }
@media (min-width: 768px) { .smp-prose .rich-text > p:first-child, .smp-prose > p:first-child { font-size: 1.5rem; } }
.smp-prose p { margin: 1rem 0 0; }
.smp-prose h2 { margin: 3rem 0 0; font-family: var(--display); font-size: 2.25rem; font-weight: 600; line-height: 1.1; text-transform: uppercase; letter-spacing: var(--tracking); }
.smp-prose h3 { margin: 2rem 0 0; font-size: 1.5rem; font-weight: 700; }
.smp-prose ul, .smp-prose ol { margin: 1rem 0 0; padding-left: 1.5rem; display: grid; gap: .5rem; }
.smp-prose ul { list-style: disc; }
.smp-prose ol { list-style: decimal; }
.smp-prose li::marker { color: var(--lipstick); }
.smp-prose a { text-decoration: underline; text-underline-offset: .25rem; }
.smp-prose a:hover { text-decoration-thickness: 2px; }
.smp-prose blockquote { margin: 2rem 0 0; padding-left: 1.5rem; border-left: 4px solid var(--lipstick); font-weight: 600; }
.smp-figure { margin: 2rem 0 0; }
.smp-figure__image { width: 100%; aspect-ratio: 16 / 9; border-radius: 1rem; object-fit: cover; }
.smp-figure__caption { margin-top: .5rem; font-size: 1rem; color: rgba(11, 11, 16, .8); }
.smp-gallery { display: grid; gap: 1rem; }
@media (min-width: 640px) { .smp-gallery { grid-template-columns: repeat(2, 1fr); } }
.smp-code { margin-top: 1.5rem; }
.smp-code__name { margin: 0 0 .5rem; font-size: 1rem; color: rgba(11, 11, 16, .8); }
.smp-code pre { margin: 0; padding: 1.5rem; overflow-x: auto; border-radius: 1rem; background: var(--night); color: var(--snow); font-size: 1rem; line-height: 1.7; }
.smp-code code { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.smp-callout { margin-top: 2rem; padding: 1.5rem; border-left: 4px solid var(--lipstick); border-radius: 0 1rem 1rem 0; background: rgba(224, 18, 60, .1); font-weight: 600; }
.smp-callout p { margin: 0; }
.smp-callout p + p { margin-top: .75rem; }
.smp-card-cta {
  display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem; border-radius: 1.5rem; color: var(--snow);
  background: linear-gradient(135deg, var(--wine), var(--night)); box-shadow: inset 0 0 0 1px rgba(245, 240, 234, .1);
}
@media (min-width: 768px) { .smp-card-cta { padding: 3rem; } }
.smp-card-cta .smp-h2 { margin-top: .5rem; }
.smp-card-cta .smp-lead { color: var(--snow); }
.smp-card-cta--small { padding: 1.5rem; }
.smp-card-cta__title { margin: 0 0 .5rem; font-size: 1.5rem; }

.smp-toc { padding: 1.5rem; border-radius: 1.5rem; background: rgba(224, 18, 60, .1); }
@media (min-width: 640px) { .smp-toc { padding: 2rem; } }
.smp-toc__list { margin: 1rem 0 0; padding-left: 1.5rem; list-style: decimal; }
.smp-toc__list li::marker { font-weight: 700; }
.smp-toc__link { display: inline-flex; align-items: center; min-height: 3rem; text-decoration: underline; text-underline-offset: .25rem; }
.smp-toc__link:hover { text-decoration-thickness: 2px; }
.smp-legal { margin-top: 4rem; line-height: 1.75; }
.smp-legal__heading { margin: 3rem 0 0; font-size: 1.875rem; line-height: 1.2; scroll-margin-top: 8rem; }
.smp-legal__heading:first-child { margin-top: 0; }
@media (min-width: 768px) { .smp-legal__heading { font-size: 2.25rem; } }
.smp-legal__text { margin-top: 1rem; }
.smp-legal__text p { margin: 0 0 1rem; }
.smp-legal__text a { text-decoration: underline; }
.smp-legal__list { margin: 1rem 0 0; padding-left: 1.5rem; list-style: disc; display: grid; gap: .5rem; }

.smp-notfound { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 72vh; overflow: hidden; background: var(--night); }
.smp-notfound__glow {
  position: absolute; top: 50%; left: 50%; z-index: -1; width: 40rem; height: 40rem; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(224, 18, 60, .3), transparent 65%);
}
.smp-notfound__inner { padding-top: 6rem; padding-bottom: 6rem; text-align: center; }
.smp-notfound .smp-hero__title { margin-top: 1rem; text-shadow: 0 2px 24px rgba(11, 11, 16, .7); }
@media (min-width: 768px) { .smp-notfound .smp-hero__title { font-size: 6rem; } }

/* ---------- 10. Lite video ---------- */
.smp-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1rem; background: var(--night-alt); box-shadow: 0 0 80px rgba(224, 18, 60, .35), inset 0 0 0 1px rgba(224, 18, 60, .4); }
.site-somuchpieknie .smp-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.smp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.smp-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; border: 0; border-radius: 1rem; background: transparent; cursor: pointer; }
.smp-video__icon {
  display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--lipstick); color: #fff;
  box-shadow: 0 0 48px rgba(224, 18, 60, .6); transition: transform .2s, background-color .2s;
}
.smp-video__icon svg { transform: translateX(.2rem); }
@media (min-width: 768px) { .smp-video__icon { width: 6rem; height: 6rem; } }
.smp-video__play:hover .smp-video__icon { transform: scale(1.05); background: var(--wine); }
.smp-video__play:focus-visible { outline: 4px solid var(--pink); outline-offset: -4px; }
.smp-video.is-empty { background: linear-gradient(135deg, var(--wine), var(--night-alt) 60%, var(--night)); }
.smp-video__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 2rem; text-align: center; }
.smp-video__empty p { margin: 0; max-width: 28rem; color: rgba(245, 240, 234, .8); }
.smp-video__empty-title { font-family: var(--display); font-size: 1.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking); color: var(--snow) !important; }

/* Countdown to the premiere of an upcoming song's video (in place of the player) */
.smp-countdown {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem;
  text-align: center; background: radial-gradient(circle at 50% 45%, rgba(224, 18, 60, .28), transparent 60%);
}
.smp-countdown__label { margin: 0; font-size: .875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
.smp-countdown__units { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.smp-countdown__units li {
  display: flex; flex-direction: column; align-items: center; min-width: 4.25rem; padding: .625rem .5rem .5rem;
  border-radius: 1rem; background: rgba(11, 11, 16, .55); box-shadow: inset 0 0 0 1px rgba(245, 240, 234, .14), 0 0 40px rgba(224, 18, 60, .25);
}
.smp-countdown__num { font-family: var(--display); font-size: 2.5rem; font-weight: 700; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: #fff; }
.smp-countdown__unit { margin-top: .375rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 240, 234, .75); }
.smp-countdown__done { margin: 0; font-family: var(--display); font-size: 1.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking); }
.smp-countdown__done a { color: #fff; }
@media (min-width: 640px) {
  .smp-countdown__units { gap: .875rem; }
  .smp-countdown__units li { min-width: 6rem; padding: 1rem .75rem .75rem; }
  .smp-countdown__num { font-size: 4rem; }
}

/* ---------- Kulisy: featured story card ---------- */
/* The cover fills the card; the copy is printed over a dark fade at its foot. */
.smp-feature { background: var(--night); padding: 2rem 0 1rem; }
@media (min-width: 768px) { .smp-feature { padding-top: 3rem; } }
.smp-feature__card {
  position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden;
  min-height: 30rem; border-radius: 1.5rem; color: var(--snow); text-decoration: none; background: var(--night-alt);
}
@media (min-width: 768px) { .smp-feature__card { min-height: 0; aspect-ratio: 2 / 1; } }
.site-somuchpieknie .smp-feature__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.smp-feature__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(11, 11, 16, .95) 0%, rgba(11, 11, 16, .8) 45%, rgba(11, 11, 16, .25) 80%, rgba(11, 11, 16, 0) 100%);
}
.smp-feature__card:hover .smp-feature__bg, .smp-feature__card:focus-visible .smp-feature__bg { transform: scale(1.03); }
.smp-feature__card:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.smp-feature__copy { max-width: 44rem; padding: 1.5rem; text-shadow: 0 1px 12px rgba(11, 11, 16, .6); }
@media (min-width: 768px) { .smp-feature__copy { padding: 2.5rem 3rem; } }
.smp-feature__copy p { margin: 0; }
.smp-feature__title {
  margin: .75rem 0 0; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; line-height: 1.05; font-size: clamp(1.875rem, 4vw, 3.25rem);
}
.smp-feature__copy .smp-feature__kicker {
  margin-top: .5rem; color: var(--pink); font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-variation-settings: "SOFT" 100; font-size: clamp(1.125rem, 1.8vw, 1.5rem); line-height: 1.35;
}
.smp-feature__copy .smp-feature__text { margin-top: .75rem; font-size: 1.125rem; line-height: 1.55; color: rgba(245, 240, 234, .88); }
.smp-feature__copy .smp-feature__meta { margin-top: .75rem; font-size: .9375rem; color: rgba(245, 240, 234, .7); }