/* SAY MERCY — saymercymovie.com
   Black, candlelight parchment, one drop of blood. */

:root {
  color-scheme: dark only;
  --black: #060708;
  --night: #0c0d0f;
  --night-2: #121316;
  --parchment: #d6d4cf;
  --parchment-dim: #9b9994;
  --ash: #6e6f73;
  --blood: #8e1b17;
  --rule: rgba(214, 212, 207, 0.16);
  --serif: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--black);
  color: var(--parchment);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: #fff; }
a:focus-visible { color: #fff; }
img { display: block; max-width: 100%; height: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--parchment); color: var(--black); padding: 8px 12px; z-index: 10; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; inset: 0 0 auto 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  height: 40px; padding: 5px 40px;
  background: var(--black);
  font-family: var(--sans); font-size: 11px; line-height: 1; letter-spacing: .3em; text-transform: uppercase;
}
.brand { color: var(--parchment); font-weight: 500; }
.nav { display: flex; gap: 28px; align-items: center; }
.nav a { color: var(--parchment-dim); }
.lang { display: flex; gap: 10px; padding-left: 28px; border-left: 1px solid var(--rule); }
.lang a[aria-current="true"] { color: var(--parchment); border-bottom: 1px solid var(--blood); }


.burger { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 36px; height: 30px; padding: 0;
  background: transparent; border: 0; cursor: pointer; color: #e8e5df; -webkit-appearance: none; appearance: none; z-index: 2; }
.burger span { display: block; font-size: 0; line-height: 0; width: 20px; height: 1.5px; margin: 2.25px 0; background: var(--parchment-dim); transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.site-header.open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.open .burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.site-header.open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.burger:focus-visible { outline: 1px solid var(--parchment); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .burger span { transition: none; } }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 40px 24px 48px;
  background: radial-gradient(ellipse at 50% 45%, #121418 0%, var(--black) 70%);
}
.hero figure { width: 100%; max-width: 1280px; }
.hero img { width: 100%; box-shadow: 0 40px 120px rgba(0,0,0,.8); }
.hero .meta {
  margin-top: 36px; text-align: center;
  font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ash);
}
.hero .meta span + span::before { content: "·"; margin: 0 14px; color: var(--blood); }

/* ---------- Sections ---------- */
.section { padding: 88px 24px; border-top: 1px solid var(--rule); }
.section.alt { background: var(--night); }
.wrap { max-width: 760px; margin: 0 auto; }
.wrap-wide { max-width: 1040px; margin: 0 auto; }

.eyebrow {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--parchment-dim);
  margin-bottom: 32px; display: flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blood); }

.logline {
  font-size: clamp(24px, 3vw, 34px); line-height: 1.45; font-weight: 300; letter-spacing: -.005em;
  color: #e8e5df;
}

.synopsis p { margin-bottom: 1.2em; }
.synopsis p:last-child { margin-bottom: 0; }
.synopsis .closing { font-weight: 600; color: #e8e5df; letter-spacing: .01em; }
.synopsis .request { margin-top: 3em; font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--ash); text-align: center; }
.synopsis .request a { color: var(--parchment-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blood); }
.synopsis .request a:hover { color: #fff; }

.prose p { margin-bottom: 1.2em; }
.prose p:last-child { margin-bottom: 0; }
.prose em { font-style: italic; color: #e8e5df; }

/* ---------- Creators ---------- */
.creators { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px; }
.person .role {
  font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--parchment-dim);
}
.person .name { font-size: 28px; line-height: 1.2; margin: 10px 0 12px; font-weight: 300; letter-spacing: .02em; }
.person p { color: var(--parchment-dim); font-size: 16px; }

/* ---------- Contact ---------- */
.contact h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 300; line-height: 1.25; margin-bottom: 28px; }
.contact .mail {
  display: inline-block; font-family: var(--sans); font-size: 15px; letter-spacing: .12em;
  padding: 0 0 6px; border: 0; border-bottom: 1px solid rgba(214,212,207,.4); color: var(--parchment); transition: border-color .2s, color .2s;
}
.contact .mail:hover { border-bottom-color: var(--blood); color: #fff; }
.contact address { font-style: normal; margin-top: 28px; color: var(--ash); font-family: var(--sans); font-size: 13px; letter-spacing: .08em; }

/* ---------- Footer ---------- */
.site-footer {
  padding: 48px 24px 56px; border-top: 1px solid var(--rule); text-align: center;
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em; color: var(--ash); line-height: 1.8;
}

/* ---------- Treatment page ---------- */
.notice {
  margin: 0 auto 64px; max-width: 760px; padding: 20px 24px;
  border: 1px solid var(--rule); border-left: 2px solid var(--blood);
  font-family: var(--sans); font-size: 13px; line-height: 1.7; color: var(--parchment-dim);
}
.treatment-head { text-align: center; padding: 150px 24px 40px; }
.treatment-head h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 300; letter-spacing: .24em; text-transform: uppercase; line-height: 1.05; }
.treatment-head .sub { margin-top: 16px; font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ash); }
.tabs { display: flex; justify-content: center; gap: 12px; margin-top: 36px; font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.tabs a { padding: 10px 20px; border: 1px solid var(--rule); }
.tabs a:hover { border-color: var(--blood); }
.treatment { padding: 72px 24px 120px; border-top: 1px solid var(--rule); }
.treatment h2 { font-size: 26px; font-weight: 300; letter-spacing: .04em; margin-bottom: 40px; }
.treatment p { margin-bottom: 1.15em; text-align: left; -webkit-hyphens: auto; hyphens: auto; }
.placeholder { padding: 32px; border: 1px dashed var(--rule); color: var(--ash); font-family: var(--sans); font-size: 14px; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .site-header { padding: 0 16px; letter-spacing: .2em; }
  .nav { gap: 0; }
  .nav .links { display: none; }
  .lang { border-left: 0; padding-left: 0; }
  .hero { padding: 30px 0 40px; }
  .hero .meta { padding: 0 16px; letter-spacing: .22em; line-height: 2; }
  .hero .meta span { display: inline-block; }
  .section { padding: 60px 16px; }
  .treatment { padding: 56px 16px 96px; }
  .notice { margin-left: 16px; margin-right: 16px; }
}

@media print {
  .site-header, .tabs { display: none; }
  body { background: #fff; color: #000; }
}
.nav .links { display: flex; gap: 28px; }
@media (max-width: 720px) { .hero { min-height: auto; padding: 30px 0 48px; } }

@media (max-width: 720px) {
  .burger { display: flex; }
  .nav .links {
    display: flex; flex-direction: column; align-items: center; gap: 22px;
    position: fixed; left: 0; right: 0; top: 30px; padding: 26px 16px 30px;
    background: var(--black); border-bottom: 1px solid var(--rule); font-size: 12px;
    visibility: hidden; pointer-events: none;
    -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0);
    transition: -webkit-clip-path .6s cubic-bezier(.45,0,.25,1), clip-path .6s cubic-bezier(.45,0,.25,1), visibility 0s linear .6s;
  }
  .site-header.open .nav .links {
    visibility: visible; pointer-events: auto;
    -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
    transition: -webkit-clip-path .6s cubic-bezier(.45,0,.25,1), clip-path .6s cubic-bezier(.45,0,.25,1), visibility 0s;
  }
  @media (prefers-reduced-motion: reduce) { .nav .links, .site-header.open .nav .links { transition: none; } }
}

/* Phone: 5px extra room above and below the menu bar */
@media (max-width: 720px) {
  .site-header { height: calc(40px + env(safe-area-inset-top, 0px)); padding-top: calc(5px + env(safe-area-inset-top, 0px)); padding-bottom: 5px; }
  .burger { top: calc(50% + env(safe-area-inset-top, 0px) / 2); }
  .nav .links { top: calc(40px + env(safe-area-inset-top, 0px)); }
  .hero { padding-top: 40px; }
}

/* Phone: film info under the key art, one item per line, no dots */
@media (max-width: 720px) {
  .hero .meta span { display: block; }
  .hero .meta span + span::before { content: none; }
  .hero .meta { line-height: 2.2; }
}
section[id] { scroll-snap-margin-top: 40px; scroll-margin-top: 40px; }
@media (min-width: 721px) and (max-width: 980px) { .site-header { padding-left: 24px; padding-right: 24px; letter-spacing: .18em; } .nav { gap: 18px; } .nav .links { gap: 16px; } .lang { padding-left: 18px; } }
@media (min-width: 721px) and (max-width: 860px) { .site-header { padding-left: 20px; padding-right: 20px; letter-spacing: .14em; } .nav { gap: 14px; } .nav .links { gap: 12px; } .lang { padding-left: 14px; } }
@media (min-width: 721px) { .nav .links a { color: #6e6f73; transition: color .2s; } .nav .links a:hover { color: var(--parchment-dim); } .nav { flex: 1; margin-left: 28px; } .nav .links { flex: 1; justify-content: center; } .lang { border-left: none; padding-left: 0; } }

/* ---------- Tagline over the key art (fades in after the image loads) ---------- */
.hero figure { position: relative; container-type: inline-size; }
.tagline {
  position: absolute; left: 0; right: 0; top: 85.8%; margin: 0;
  text-align: center; font-family: var(--sans); font-weight: 400;
  font-size: 2.19cqw; line-height: 1.48; letter-spacing: .205em; padding-left: .1em;
  color: #9b9994; opacity: 0; transform-origin: 50% 50%; pointer-events: none; will-change: transform, opacity, filter;
}
.hero figure.ready .tagline { animation: taglineIn 6s linear forwards; }
@keyframes taglineIn {
  0.000% { opacity: 0.000; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.8600); filter: blur(0px); }
  2.500% { opacity: 0.080; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.8702); filter: blur(0px); }
  5.000% { opacity: 0.155; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.8800); filter: blur(0px); }
  7.500% { opacity: 0.226; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.8892); filter: blur(0px); }
  10.000% { opacity: 0.293; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.8979); filter: blur(0px); }
  12.500% { opacity: 0.356; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9062); filter: blur(0px); }
  15.000% { opacity: 0.415; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9140); filter: blur(0px); }
  16.667% { opacity: 0.452; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9190); filter: blur(0px); }
  17.167% { opacity: 0.463; transform: translate(-0.013em,0.013em) rotate(-0.09deg) scale(0.9204); filter: blur(1.74px); }
  17.417% { opacity: 0.469; transform: translate(-0.012em,-0.015em) rotate(-0.01deg) scale(0.9211); filter: blur(1.41px); }
  17.500% { opacity: 0.470; transform: translate(-0.003em,0.005em) rotate(-0.15deg) scale(0.9214); filter: blur(1.17px); }
  17.750% { opacity: 0.352; transform: translate(0.021em,-0.011em) rotate(-0.19deg) scale(0.9221); filter: blur(1.13px); }
  17.917% { opacity: 0.479; transform: translate(0.007em,0.016em) rotate(-0.12deg) scale(0.9226); filter: blur(1.61px); }
  18.000% { opacity: 0.410; transform: translate(-0.018em,0.014em) rotate(0.03deg) scale(0.9228); filter: blur(1.54px); }
  18.250% { opacity: 0.486; transform: translate(0.019em,0.017em) rotate(-0.18deg) scale(0.9235); filter: blur(1.72px); }
  18.500% { opacity: 0.379; transform: translate(0.009em,0.023em) rotate(-0.23deg) scale(0.9242); filter: blur(2.0px); }
  18.667% { opacity: 0.495; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9247); filter: blur(0px); }
  18.750% { opacity: 0.497; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9249); filter: blur(0px); }
  19.000% { opacity: 0.502; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9256); filter: blur(0px); }
  19.167% { opacity: 0.505; transform: translate(-0.018em,0.007em) rotate(0.05deg) scale(0.9261); filter: blur(1.06px); }
  19.250% { opacity: 0.507; transform: translate(0.017em,0.001em) rotate(0.14deg) scale(0.9263); filter: blur(1.0px); }
  19.500% { opacity: 0.512; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9270); filter: blur(0px); }
  19.750% { opacity: 0.517; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9276); filter: blur(0px); }
  20.000% { opacity: 0.522; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9283); filter: blur(0px); }
  20.250% { opacity: 0.527; transform: translate(0.044em,-0.006em) rotate(-0.21deg) scale(0.9290); filter: blur(1.42px); }
  20.500% { opacity: 0.424; transform: translate(-0.028em,0.022em) rotate(0.31deg) scale(0.9297); filter: blur(1.51px); }
  20.583% { opacity: 0.534; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9299); filter: blur(0px); }
  20.750% { opacity: 0.537; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9303); filter: blur(0px); }
  21.000% { opacity: 0.542; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9310); filter: blur(0px); }
  21.250% { opacity: 0.547; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9316); filter: blur(0px); }
  21.333% { opacity: 0.548; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9318); filter: blur(0px); }
  21.500% { opacity: 0.552; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9323); filter: blur(0px); }
  21.583% { opacity: 0.553; transform: translate(-0.022em,0.002em) rotate(0.15deg) scale(0.9325); filter: blur(1.2px); }
  21.750% { opacity: 0.556; transform: translate(0.026em,-0.002em) rotate(-0.08deg) scale(0.9329); filter: blur(1.49px); }
  22.000% { opacity: 0.561; transform: translate(0.026em,0.007em) rotate(-0.04deg) scale(0.9336); filter: blur(1.4px); }
  22.250% { opacity: 0.566; transform: translate(0.009em,-0.009em) rotate(-0.10deg) scale(0.9342); filter: blur(1.27px); }
  22.333% { opacity: 0.567; transform: translate(0.005em,0.003em) rotate(0.22deg) scale(0.9344); filter: blur(1.44px); }
  22.500% { opacity: 0.570; transform: translate(-0.016em,0.003em) rotate(0.23deg) scale(0.9348); filter: blur(1.53px); }
  22.583% { opacity: 0.572; transform: translate(-0.016em,0.001em) rotate(0.01deg) scale(0.9350); filter: blur(0.86px); }
  22.750% { opacity: 0.575; transform: translate(-0.001em,-0.001em) rotate(0.06deg) scale(0.9355); filter: blur(0.8px); }
  23.000% { opacity: 0.580; transform: translate(0.011em,-0.008em) rotate(0.10deg) scale(0.9361); filter: blur(0.85px); }
  23.250% { opacity: 0.584; transform: translate(-0.013em,-0.001em) rotate(-0.02deg) scale(0.9367); filter: blur(0.82px); }
  23.333% { opacity: 0.586; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9369); filter: blur(0px); }
  23.500% { opacity: 0.589; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9373); filter: blur(0px); }
  23.583% { opacity: 0.590; transform: translate(-0.002em,0.010em) rotate(0.03deg) scale(0.9375); filter: blur(1.73px); }
  23.750% { opacity: 0.593; transform: translate(-0.019em,0.020em) rotate(-0.28deg) scale(0.9379); filter: blur(1.94px); }
  23.833% { opacity: 0.595; transform: translate(-0.000em,0.017em) rotate(0.14deg) scale(0.9381); filter: blur(2.0px); }
  24.000% { opacity: 0.598; transform: translate(-0.020em,-0.009em) rotate(-0.16deg) scale(0.9385); filter: blur(2.27px); }
  24.250% { opacity: 0.602; transform: translate(-0.012em,-0.005em) rotate(0.25deg) scale(0.9391); filter: blur(1.9px); }
  24.333% { opacity: 0.604; transform: translate(-0.023em,-0.011em) rotate(-0.28deg) scale(0.9393); filter: blur(1.51px); }
  24.500% { opacity: 0.488; transform: translate(0.033em,0.000em) rotate(-0.26deg) scale(0.9397); filter: blur(1.67px); }
  24.667% { opacity: 0.610; transform: translate(-0.006em,0.021em) rotate(-0.19deg) scale(0.9401); filter: blur(2.19px); }
  24.750% { opacity: 0.611; transform: translate(0.053em,0.008em) rotate(-0.37deg) scale(0.9403); filter: blur(2.15px); }
  25.000% { opacity: 0.615; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9409); filter: blur(0px); }
  25.250% { opacity: 0.620; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9415); filter: blur(0px); }
  25.500% { opacity: 0.624; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9421); filter: blur(0px); }
  25.750% { opacity: 0.628; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9427); filter: blur(0px); }
  26.000% { opacity: 0.632; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9433); filter: blur(0px); }
  28.500% { opacity: 0.673; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9488); filter: blur(0px); }
  31.000% { opacity: 0.710; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9540); filter: blur(0px); }
  33.500% { opacity: 0.745; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9588); filter: blur(0px); }
  36.000% { opacity: 0.776; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9633); filter: blur(0px); }
  38.500% { opacity: 0.805; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9674); filter: blur(0px); }
  41.000% { opacity: 0.831; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9712); filter: blur(0px); }
  43.500% { opacity: 0.855; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9747); filter: blur(0px); }
  46.000% { opacity: 0.876; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9780); filter: blur(0px); }
  48.500% { opacity: 0.896; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9809); filter: blur(0px); }
  51.000% { opacity: 0.913; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9835); filter: blur(0px); }
  53.500% { opacity: 0.928; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9859); filter: blur(0px); }
  56.000% { opacity: 0.941; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9881); filter: blur(0px); }
  58.500% { opacity: 0.953; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9900); filter: blur(0px); }
  61.000% { opacity: 0.963; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9917); filter: blur(0px); }
  63.500% { opacity: 0.971; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9932); filter: blur(0px); }
  66.000% { opacity: 0.978; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9945); filter: blur(0px); }
  68.500% { opacity: 0.984; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9956); filter: blur(0px); }
  71.000% { opacity: 0.989; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9966); filter: blur(0px); }
  73.500% { opacity: 0.992; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9974); filter: blur(0px); }
  76.000% { opacity: 0.995; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9981); filter: blur(0px); }
  78.500% { opacity: 0.997; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9986); filter: blur(0px); }
  81.000% { opacity: 0.998; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9990); filter: blur(0px); }
  83.500% { opacity: 0.999; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9994); filter: blur(0px); }
  86.000% { opacity: 1.000; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9996); filter: blur(0px); }
  88.500% { opacity: 1.000; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9998); filter: blur(0px); }
  91.000% { opacity: 1.000; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(0.9999); filter: blur(0px); }
  93.500% { opacity: 1.000; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(1.0000); filter: blur(0px); }
  96.000% { opacity: 1.000; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(1.0000); filter: blur(0px); }
  98.500% { opacity: 1.000; transform: translate(0.000em,0.000em) rotate(0.00deg) scale(1.0000); filter: blur(0px); }
  100.000% { opacity: 1.000; transform: none; filter: none; }
}

.tagline .m-br { display: none; }
@media (max-width: 720px) {
  .tagline { top: 64.0%; margin-top: 1.41em; font-size: 4.82cqw; line-height: 1.41; letter-spacing: .215em; padding-left: .14em; }
  .tagline .m-br { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .hero figure.ready .tagline { animation: none; opacity: 1; } }

/* ---------- Title on the jacket: starts mid-shake (1.25s), fades in over 3s ---------- */
.title-layer { position: absolute; left: 35.417%; top: 53.241%; width: 29.167%; height: 24.537%; opacity: 1; pointer-events: none; }
.hero .title-layer img { display: block; width: 100%; height: 100%; box-shadow: none; }
.hero figure.ready .title-layer { animation: none; }
@keyframes titleIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 720px) { .title-layer { left: 12.093%; top: 36.986%; width: 52.315%; height: 15.550%; } }
@media (prefers-reduced-motion: reduce) { .hero figure.ready .title-layer { animation: none; opacity: 1; } }
.hero .meta { position: relative; z-index: 1; } /* keep the key-art shadow from darkening the info line */
@media (max-width: 720px) { .hero .meta { align-self: stretch; margin-top: 40px; padding-top: 44px; margin-bottom: -29px; border-top: 1px solid var(--rule); } #story, #cs-story { border-top: none; padding-top: 16px; } .hero figure { margin-bottom: -118px; } .hero figure > picture:first-child img { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 178px), transparent calc(100% - 118px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 178px), transparent calc(100% - 118px)); box-shadow: none; } }
.hero .meta span { white-space: nowrap; }
@media (min-width: 721px) and (max-width: 980px) { .hero .meta span:nth-child(3) { display: block; margin-top: 4px; } .hero .meta span:nth-child(3)::before { content: none; } }

/* ---------- "Concept art" label, bottom-left corner of the key art ---------- */
.art-label {
  position: absolute; left: 1.6%; bottom: 2.2%; z-index: 2; pointer-events: none;
  font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(214, 212, 207, .225);
}
@media (max-width: 720px) { .art-label { left: 12px; bottom: calc(24.5% - 40px); font-size: 9px; } } /* level with the bottom of her elbow */

/* Creator: night Prague panorama, heavily subdued */
.section.has-city { position: relative; overflow: hidden; background: var(--night) url("../img/prague-night.jpg") center 0% / cover no-repeat; }
.section.has-city::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgba(12,13,15,0) 14%, rgba(12,13,15,0) 72%, var(--night) 100%); pointer-events: none; }
.section.has-city > * { position: relative; z-index: 1; }
@media (max-width: 720px) { .section.has-city { background-image: url("../img/prague-night-mobile.jpg"); background-position: center 0%; } }

/* Concept stills under the synopsis */
.stills { max-width: 1200px; margin: 72px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stills figure { position: relative; margin: 0; }
.stills img { display: block; width: 100%; height: auto; box-shadow: 0 24px 70px rgba(0,0,0,.65); }
.stills .art-label { left: 12px; bottom: 10px; font-size: 9px; }
@media (max-width: 720px) { .stills { grid-template-columns: 1fr; gap: 14px; margin-top: 48px; } .stills .art-label { left: 10px; bottom: 8px; } }
.person p a { color: var(--parchment); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blood); } .person p a:hover { color: #fff; }

/* Creator: expandable full bio */
.bio-more { margin-top: 28px; }
.bio-toggle { background: none; border: 0; padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--parchment-dim); }
.bio-toggle:hover { color: var(--parchment); }
.bio-toggle .ico { display: inline-block; font-size: 16px; font-weight: 300; line-height: 1; color: var(--blood); transition: transform .4s ease; }
.bio-toggle[aria-expanded="true"] .ico { transform: rotate(45deg); }
.bio-panel { overflow: hidden; height: 0; opacity: 0; transition: height .55s ease, opacity .45s ease; }
.bio-panel.open { opacity: 1; }
.bio-panel.done { overflow: visible; }
.bio-inner { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; padding-top: 28px; }
.bio-poster { display: block; }
.bio-poster img { display: block; width: 100%; height: auto; transition: opacity .3s ease; opacity: .9; }
.bio-poster:hover img { opacity: 1; }
.bio-inner p { color: var(--parchment-dim); font-size: 16px; margin: 0; }
.bio-inner p a { color: var(--parchment); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blood); }
.bio-inner p a:hover { color: #fff; }
@media (max-width: 720px) { .bio-inner { grid-template-columns: 1fr; gap: 28px; } .bio-poster { width: 100%; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .bio-panel, .bio-toggle .ico { transition: none; } }

.stills figure.wide { grid-column: 1 / -1; }

/* Dividers between sections: full tone in the centre, fading (not vanishing) towards both edges */
.section, .site-footer, .treatment, .hero .meta {
  border-image: linear-gradient(90deg, rgba(214,212,207,.04) 0%, rgba(214,212,207,.16) 50%, rgba(214,212,207,.04) 100%) 1;
}

/* Concept stills: reveal one after another as they scroll into view */
.stills.reveal figure { opacity: 0; transform: translateY(28px); transition: opacity 1.65s ease, transform 1.65s cubic-bezier(.2,.7,.2,1); }
.stills.reveal figure.in { opacity: 1; transform: none; }

/* Key art (image + title together) fades in from black on first load.
   A black cover fades out (opacity only = GPU-composited, no per-frame repaint of the image). */
.hero figure::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: #000; opacity: 1; pointer-events: none; z-index: 1; }
.hero figure.shown::after { animation: keyArtIn 2s ease forwards; will-change: opacity; }
@keyframes keyArtIn { from { opacity: 1; } to { opacity: 0; } }
.hero .tagline { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero figure::after, .hero figure.shown::after { animation: none; opacity: 0; } }

/* Tagline starts 0.5 s after the key art begins fading in (first load only) */
.hero figure.intro.ready .tagline { animation-delay: .5s; }

/* Info line under the key art fades in together with it (2 s) */
.hero .meta { opacity: 0; }
.hero figure.shown ~ .meta { animation: metaIn 2s ease forwards; }
@keyframes metaIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero .meta, .hero figure.shown ~ .meta { animation: none; opacity: 1; } }
@media (min-width: 721px) { .tagline { font-size: 2.394cqw; top: 85.27%; text-shadow: 0 0 1.65em rgba(0,0,0,1), 0 0 3.9em rgba(0,0,0,1), 0 0 2.4em rgba(0,0,0,.6); } }

/* Logline glimmers at ~14% until the visitor starts scrolling, then lights up */
.pre-scroll [data-sec="story"] .wrap { opacity: .14; }
[data-sec="story"] .wrap { transition: opacity 1.6s ease; }
@media (prefers-reduced-motion: reduce) { [data-sec="story"] .wrap { transition: none; } }

@media (max-width: 720px) { .nav .links { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(214,212,207,.04) 0%, rgba(214,212,207,.16) 50%, rgba(214,212,207,.04) 100%) 1; } }

/* Never allow sideways panning (guards against zoom drift after rotating a phone) */
html { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html, body { max-width: 100%; }

/* Display serif (EB Garamond) for logline, creator name, contact heading */
:root{ --display: 'EB Garamond', Georgia, serif; }
.logline{ font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.2vw, 37px); line-height: 1.38; letter-spacing: 0; }
.person .name{ font-family: var(--display); font-weight: 400; font-size: 33px; letter-spacing: .01em; }
.contact h2{ font-family: var(--display); font-weight: 400; font-size: clamp(27px, 3.2vw, 38px); }

/* Pull quote under the stills: always exactly two lines, shrinks to fit */
.pull{ margin: 112px auto 0; padding: 0 24px; max-width: 820px; text-align: center; }
.pull p{ font-family: var(--display); font-weight: 400; font-size: clamp(14px, calc((100vw - 80px) / 12.8), 42px); line-height: 1.3; color: #e8e5df; margin: 0; }
.pull p span{ display: block; white-space: nowrap; }
.pull cite{ display: block; font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--parchment-dim); margin: 26px 0 0; }
@media (max-width: 720px){ .pull{ margin: 80px auto 0; } }

/* Mobile header: wider EN/CZ gap; burger, brand and language on one optical axis */
@media (max-width: 720px) { .site-header .lang { gap: 15px; position: relative; top: 1px; } .site-header .burger { transform: translate(-50%, calc(-50% + 1px)); } }

/* The Film: compact facts */
.facts{ display:grid; grid-template-columns: 150px 1fr; column-gap: 32px; row-gap: 14px; margin: 0 0 48px; padding: 0 0 40px; border-bottom: 1px solid var(--rule); }
.facts dt{ font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--parchment-dim); padding-top: .45em; }
.facts dd{ margin: 0; color: var(--parchment); }
@media (max-width: 720px){ .facts{ grid-template-columns: 1fr; row-gap: 4px; } .facts dd{ margin-bottom: 14px; } }
/* Synopsis: slightly larger text, closing line in display serif */
.synopsis p{ font-size: 1.06em; }
.synopsis .closing{ font-family: var(--display); font-weight: 400; font-size: 1.32em; line-height: 1.45; color: #e8e5df; }
/* One separator only: no alternating backgrounds */
.section.alt:not(.has-city){ background: transparent; }

/* ================= Compatibility fallbacks for older browsers =================
   Each block applies only where a feature is missing; modern browsers render exactly as before. */

/* clamp(): Safari < 13.1, Chrome < 79, Firefox < 75 */
@supports not (width: clamp(1px, 1px, 1px)) {
  .logline { font-size: 26px; }
  .contact h2 { font-size: 27px; }
  .treatment-head h1 { font-size: 36px; }
  .pull p { font-size: 42px; }
  @media (min-width: 601px) { .treatment-head h1 { font-size: 6vw; } }
  @media (min-width: 813px) { .logline { font-size: 3.2vw; } }
  @media (min-width: 844px) { .contact h2 { font-size: 3.2vw; } }
  @media (min-width: 1067px) { .treatment-head h1 { font-size: 64px; } }
  @media (min-width: 1157px) { .logline { font-size: 37px; } }
  @media (min-width: 1188px) { .contact h2 { font-size: 38px; } }
  @media (max-width: 617px) { .pull p { font-size: calc((100vw - 80px) / 12.8); } }
}

/* Container units (cqw) for the tagline: Safari < 16, Chrome < 105, Firefox < 110.
   --cq = 1% of the key-art width, set by a small script. */
.no-cq .tagline { font-size: calc(var(--cq, 12.8px) * 2.19); }
@media (max-width: 720px) { .no-cq .tagline { font-size: calc(var(--cq, 3.9px) * 4.82); } }
@media (min-width: 721px) { .no-cq .tagline { font-size: calc(var(--cq, 12.8px) * 2.394); } }

/* Flexbox gap: Safari < 14.1 (iPhone 6/6+/5s on iOS 12), Chrome < 84 */
.no-flexgap .nav > * + * { margin-left: 28px; }
.no-flexgap .nav .links > a + a { margin-left: 28px; }
.no-flexgap .lang > a + a { margin-left: 10px; }
.no-flexgap .eyebrow::before { margin-right: 14px; }
.no-flexgap .bio-toggle .lbl { margin-right: 12px; }
.no-flexgap .tabs > a + a { margin-left: 12px; }
@media (min-width: 721px) and (max-width: 980px) { .no-flexgap .nav > * + * { margin-left: 18px; } .no-flexgap .nav .links > a + a { margin-left: 16px; } }
@media (min-width: 721px) and (max-width: 860px) { .no-flexgap .nav > * + * { margin-left: 14px; } .no-flexgap .nav .links > a + a { margin-left: 12px; } }
@media (max-width: 720px) { .no-flexgap .nav > * + * { margin-left: 0; } .no-flexgap .nav .links > a + a { margin-left: 0; margin-top: 22px; } .no-flexgap .lang > a + a { margin-left: 15px; } }

/* Treatment page: title in the brand face (Open Sans 500, as top-left); EN/CZ in the right corner */
.treatment-head h1 { font-family: var(--sans); font-weight: 500; letter-spacing: .3em; }
@media (min-width: 721px) { .nav > .lang:first-child { margin-left: auto; } }

/* Treatment page: title-page block */
.treatment-head .tp-genre { margin-top: 18px; }
.tp-tagline { margin-top: 96px; font-family: var(--sans); font-size: 18px; line-height: 1.6; letter-spacing: .2em; color: var(--parchment-dim); }
.tp-credit { margin-top: 96px; font-family: var(--sans); text-transform: uppercase; }
.tp-credit span { display: block; font-size: 11px; letter-spacing: .3em; color: var(--ash); }
.tp-credit strong { display: block; margin-top: 12px; font-size: 15px; font-weight: 500; letter-spacing: .3em; color: var(--parchment); }
.tp-legal { margin-top: 99px; font-family: var(--sans); font-size: 12px; line-height: 1.8; letter-spacing: .06em; color: var(--ash); }
.treatment-head .tp-label { margin-top: 72px; }
@media (max-width: 720px) { .tp-tagline { margin-top: 72px; font-size: 16px; letter-spacing: .16em; } .tp-credit { margin-top: 72px; } .tp-legal { margin-top: 87px; } .treatment-head .tp-label { margin-top: 56px; } }
.tr-lang[hidden] { display: none; }
.treatment { border-top: 0; }
.treatment .tr-sep { margin: 2.2em 0; text-align: center; color: var(--ash); letter-spacing: .3em; }
.tr-pdf { max-width: 760px; margin: -40px auto 64px; font-family: var(--sans); text-align: center; }
.tr-pdf a { display: inline-flex; align-items: baseline; gap: 14px; padding: 11px 20px; border: 1px solid var(--rule); font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--parchment); transition: border-color .2s, color .2s; }
.tr-pdf a:hover { border-color: var(--blood); color: #fff; }
.tr-pdf span { font-weight: 400; letter-spacing: .12em; text-transform: none; color: var(--ash); }
.no-flexgap .tr-pdf span { margin-left: 14px; }
@media (max-width: 720px) { .tr-pdf { margin-left: 16px; margin-right: 16px; } }
.treatment .tr-pdf-end { margin: 72px auto 0; text-align: center; }
.treatment .tr-top { margin: 56px 0 0; text-align: center; }
.tr-top a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; font-family: var(--sans); font-size: 18px; line-height: 1; color: var(--parchment-dim); transition: border-color .2s, color .2s; }
.tr-top a:hover { border-color: var(--blood); color: #fff; }
/* Treatment page: footer half as far from the back-to-top arrow */
.treatment { padding-bottom: 36px; }
@media (max-width: 720px) { .treatment { padding-bottom: 24px; } }
/* Switch between the main page and the treatment: small red arrow in a ring, right of the brand (→ to the treatment, ← back) */
.site-header .tr-switch { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; height: 24px; font-family: var(--sans); line-height: 1; color: #b0231d; transition: color .2s; }
.site-header .tr-switch .sw-short { display: none; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; padding-left: 6px; }
.site-header .tr-switch .sw-text { font-size: 11px; font-weight: 600; letter-spacing: inherit; text-transform: uppercase; padding-left: 6px; }
@media (max-width: 720px) { .site-header .tr-switch { min-width: 26px; } .site-header .tr-switch .sw-short { display: inline-block; } .site-header .tr-switch .sw-text { display: none; } }
.site-header .tr-switch:hover, .site-header .tr-switch:focus-visible { color: #d0352e; outline: none; }
@media print { .site-header .tr-switch { display: none; } }
/* Treatment page: floating up / down while reading */
.tr-nav { position: fixed; right: 20px; top: 50%; z-index: 4; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.tr-nav.on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.tr-nav button { width: 40px; height: 40px; margin: 0; border: 1px solid var(--rule); border-radius: 50%; background: rgba(6,7,8,.41); color: var(--blood); font-family: var(--sans); font-size: 16px; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color .2s, color .2s, opacity .25s; }
.tr-nav button:hover { border-color: var(--blood); }
.tr-nav button:focus-visible { outline: 1px solid var(--parchment); outline-offset: 2px; }
.tr-nav button.off { opacity: .25; pointer-events: none; }
@media (max-width: 720px) { .tr-nav { right: 12px; } .tr-nav button { width: 38px; height: 38px; } }
@media print { .tr-nav { display: none; } }
.tr-nav button + button { margin-top: 8px; }

/* Treatment title + genre optically centred (compensate trailing letter-spacing) */
.treatment-head h1 { padding-left: .3em; }
.treatment-head .tp-genre { padding-left: .3em; }
/* Treatment page: "Read the treatment ↓" cue, pinned to the bottom of the first screen until the text comes into view */
.tr-read { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 48px 16px calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; font-family: var(--sans); pointer-events: none;
  background: linear-gradient(to top, rgba(6,7,8,1) 0%, rgba(6,7,8,.92) 45%, rgba(6,7,8,0) 100%); transition: opacity .45s ease, visibility 0s linear 0s; }
.tr-read.off { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.tr-read a { pointer-events: auto; display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--parchment-dim); padding: 8px 12px 4px calc(12px + .3em); }
.tr-read .arr { margin-top: 8px; font-size: 18px; font-weight: 400; letter-spacing: 0; line-height: 1; color: var(--blood); animation: trReadBob 2.2s ease-in-out infinite; }
@keyframes trReadBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (hover: hover) { .tr-read a:hover { color: var(--parchment); } }
@media (prefers-reduced-motion: reduce) { .tr-read .arr { animation: none; } .tr-read, .tr-read.off { transition: none; } }
@media print { .tr-read { display: none !important; } }
/* Floating arrows: stronger red glyph; on phones further apart */
.tr-nav button { color: #b0231d; font-size: 19px; font-weight: 700; }
@media (max-width: 720px) { .tr-nav button + button { margin-top: 24px; } }
/* Treatment first screen moved up by half the height of the SAY MERCY title */
.tr-page .treatment-head { padding-top: 116px; padding-top: calc(150px - 0.525 * clamp(36px, 6vw, 64px)); }
/* Treatment: tagline appears with the same flickering animation as on the main page */
.tp-tagline { opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity, filter; }
.tp-tagline.run { animation: taglineIn 6s linear forwards; }
.tp-tagline.run.intro { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .tp-tagline, .tp-tagline.run { animation: none; opacity: 1; } }
@media print { .tp-tagline { animation: none !important; opacity: 1 !important; } }
/* ================= Device optimisation =================
   Touch screens (phones, tablets): no "stuck" hover colours after a tap */
@media (hover: none) {
  .brand:hover { color: var(--parchment); }
  .nav a:hover { color: var(--parchment-dim); }
  .lang a[aria-current="true"]:hover { color: var(--parchment); }
  .bio-toggle:hover { color: var(--parchment-dim); }
  .contact .mail:hover { border-bottom-color: rgba(214,212,207,.4); color: var(--parchment); }
  .tr-pdf a:hover { border-color: var(--rule); color: var(--parchment); }
  .tr-nav button:hover { border-color: var(--rule); }
  .site-header .tr-switch:hover { color: #b0231d; }
}
@media (hover: none) and (min-width: 721px) { .nav .links a:hover { color: #6e6f73; } }
/* Larger tap area for the small WEB / TREATMENT switch (visual size unchanged) */
.site-header .tr-switch::after { content: ""; position: absolute; top: -10px; right: -8px; bottom: -10px; left: -2px; }
/* Treatment page printed from the browser: dark text on white, no on-screen controls */
@media print {
  .tr-nav, .tr-pdf, .tr-page .site-header, .tr-page .site-footer { display: none !important; }
  .tr-lang[hidden] { display: none !important; }
  .treatment-head { padding-top: 0; }
  .treatment-head h1, .treatment h2, .treatment p, .tp-tagline { color: #000 !important; }
  .tp-genre, .tp-legal, .notice { color: #333 !important; border-color: #bbb !important; }
  .treatment { padding: 24px 0 0; }
  .treatment p { orphans: 3; widows: 3; }
}