/* FAWDA·TV — per-film themes and signature scenes */

/* the settled filter of the title still, read by screening.js when the page "develops" */
#screening { --still-filter: invert(0) grayscale(0.2) blur(0px) brightness(0.95) sepia(0.35); }
#screening.theme-bw { --still-filter: invert(0) grayscale(1) blur(0px) brightness(0.9) contrast(1.2); }
#screening.theme-bw .s-story .bg { filter: grayscale(1) brightness(.5) contrast(1.25); }
#screening.theme-dogs { --still-filter: invert(0) grayscale(0.45) blur(0px) brightness(0.85) contrast(1.15); }
#screening.theme-dogs .s-story .bg { filter: grayscale(.5) brightness(.45) contrast(1.2); }
#screening.theme-starve { --still-filter: invert(0) grayscale(0) blur(0px) brightness(0.85) saturate(1.1); }
#screening.theme-starve .s-story .bg { filter: saturate(.9) brightness(.45); }
#screening.theme-jahilya { --still-filter: invert(0) grayscale(0) blur(0px) brightness(1) contrast(1.04); }
/* the opening frame in its own light: shade only where the title sits (left and bottom), no vignette */
#screening.theme-jahilya .s-title .bg::after { background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,0) 55%), linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 38%); }
#screening.theme-jahilya .t-title { transform: skewX(-9deg); text-shadow: 6px 4px 0 var(--hb-mid); }
/* the frame as it is, only darkened at the bottom so the subtitles stay readable */
#screening.theme-jahilya .s-story .bg { filter: brightness(.82) contrast(1.05); }
#screening.theme-jahilya .s-story .bg { box-shadow: inset 0 -38vh 26vh -14vh rgba(0,0,0,.75); box-shadow: inset 0 -38dvh 26dvh -14dvh rgba(0,0,0,.75); }
#screening.theme-badass { --still-filter: invert(0) grayscale(0) blur(0px) brightness(0.85) saturate(1.2) contrast(1.1); }
#screening.theme-badass .t-title { font-size: clamp(46px, min(12vw, 13vh), 200px); font-size: clamp(46px, min(12vw, 13dvh), 200px); }
#screening.theme-badass .t-title .w { display: block; }
#screening.theme-badass .s-story .bg { filter: saturate(1.1) brightness(.45); }
#screening.theme-satan { --still-filter: invert(0) grayscale(0.1) blur(0px) brightness(0.9) saturate(0.85) hue-rotate(-8deg); }
#screening.theme-satan .s-story .bg { filter: saturate(.7) brightness(.45) hue-rotate(-10deg); }
#screening .s-title .bg::after { background: linear-gradient(180deg, rgba(0,0,0,.2), color-mix(in srgb, var(--hb-deep) 40%, transparent) 50%, var(--hb-deep) 100%), radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0,0,0,.6)); }

.s-sig { height: 520vh; height: 520dvh; }
.s-sig .sticky { background: var(--hb-deep); }

/* ─────────── The End · à rebours ─────────── */
.sig-rebours .sticky { display: grid; place-content: center; text-align: center; background: #000; }
.rb-bg { position: absolute; inset: -6%; background: center / cover no-repeat; filter: grayscale(1) brightness(.35) contrast(1.4); }
.rb-burn { position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 8%, #ffd9a0 18%, rgba(160,60,10,.6) 34%, transparent 60%); mix-blend-mode: screen; }
.rb-head { position: absolute; top: 90px; left: clamp(16px, 5vw, 80px); color: #ECECEC; letter-spacing: .03em; }
.rb-year { position: relative; font-family: var(--f-mono); font-size: 14px; letter-spacing: .03em; color: #A1A1A1; margin-bottom: 12px; }
.rb-text { position: relative; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 7vw, 120px); line-height: .9; color: #F2F2F2; max-width: 16ch; }
.rb-text.huge { font-size: clamp(120px, 26vw, 420px); letter-spacing: -.02em; }
.rb-leader { position: absolute; right: clamp(16px, 5vw, 80px); bottom: 100px; width: 74px; height: 74px; border-radius: 50%; border: 2px solid #ECECEC; display: grid; place-content: center; font-size: 26px; color: #ECECEC; }

/* ─────────── C'est eux les chiens · reportage ─────────── */
.sig-reportage .sticky { background: #000; }
.rp-shake { position: absolute; inset: -3%; }
.rp-img { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; filter: grayscale(.35) contrast(1.15) brightness(.85); transform-origin: 50% 45%; }
.rp-img.on { opacity: 1; }
.rp-vf { position: absolute; inset: 8vh 6vw; inset: 8dvh 6vw; pointer-events: none; }
.rp-vf i { position: absolute; width: 46px; height: 46px; border: 0 solid rgba(255,255,255,.85); }
.rp-vf i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; } .rp-vf i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.rp-vf i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .rp-vf i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.rp-thirds { position: absolute; inset: 0; opacity: .25;
  background: linear-gradient(90deg, transparent calc(33.3% - .5px), #fff calc(33.3% - .5px) calc(33.3% + .5px), transparent 0, transparent calc(66.6% - .5px), #fff calc(66.6% - .5px) calc(66.6% + .5px), transparent 0),
              linear-gradient(0deg, transparent calc(33.3% - .5px), #fff calc(33.3% - .5px) calc(33.3% + .5px), transparent 0, transparent calc(66.6% - .5px), #fff calc(66.6% - .5px) calc(66.6% + .5px), transparent 0); }
.rp-rec { position: absolute; top: calc(8vh + 18px); top: calc(8dvh + 18px); left: calc(6vw + 22px); color: #fff; font-size: 14px; }
.rp-rec b { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #e0261b; margin-right: 6px; animation: blink 1s steps(2) infinite; vertical-align: -1px; }
.rp-tc { position: absolute; top: calc(8vh + 18px); top: calc(8dvh + 18px); right: calc(6vw + 22px); color: #fff; font-size: 14px; }
.rp-batt { position: absolute; bottom: calc(8vh + 18px); bottom: calc(8dvh + 18px); right: calc(6vw + 22px); color: #fff; font-size: 10px; }
.rp-take { position: absolute; bottom: calc(8vh + 18px); bottom: calc(8dvh + 18px); left: calc(6vw + 22px); color: #fff; font-size: 10px; }
.rp-lower { position: absolute; left: 6vw; bottom: 24vh; bottom: 24dvh; background: rgba(10,10,14,.85); border-left: 6px solid var(--hb-amber); padding: 10px 18px 12px; }
.rp-who { font-family: var(--f-display); font-weight: 900; font-size: clamp(26px, 3vw, 44px); line-height: .9; color: #fff; }
.rp-role { color: var(--hb-amber); margin-top: 4px; }
.rp-line { position: absolute; left: 50%; bottom: 13vh; bottom: 13dvh; transform: translateX(-50%); width: min(90%, 900px); text-align: center; font-family: var(--f-mono); font-size: clamp(14px, 1.4vw, 19px); color: #f3e9b5; background: rgba(0,0,0,.7); padding: 6px 12px; }

/* ─────────── The Sea Is Behind · intrusion ─────────── */

/* ─────────── Starve Your Dog · bande-annonce animée, en papier découpé ─────────── */
.sig-mains { height: 100vh; height: 100dvh; }

.sig-mains .sticky { background: #0d0a0a; }

@keyframes sd-rain { to { transform: translate(-28px, 112px); } }

@keyframes sd-gallop { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-4deg); } }

.sd-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); text-align: center; pointer-events: none; }
.sd-ar { font-family: var(--f-ar-display); font-size: clamp(64px, 10vw, 170px); line-height: 1; color: #efe3e3; }
.sd-lat { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 4.4vw, 74px); line-height: .9; color: #e0261b; margin-top: 4px; }
.sd-meta { margin-top: 16px; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #c9a3a3; }

/* ─────────── The Sea Is Behind · le cortège ─────────── */
.sig-intrusion { height: 460vh; height: 460dvh; }
.sig-intrusion .sticky { background: #000; }
.co-img { position: absolute; inset: 0; background: #000 center / cover no-repeat; }
.co-bw { filter: grayscale(1) contrast(1.2) brightness(.78); }
.co-col { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(290deg) brightness(.95) contrast(1.1); -webkit-mask-image: linear-gradient(90deg, transparent 100%, #000 100%); mask-image: linear-gradient(90deg, transparent 100%, #000 100%); }
.co-shade { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.55)), linear-gradient(90deg, rgba(0,0,0,.55), transparent 45%); pointer-events: none; }
.co-cart { position: absolute; left: 0; bottom: 6vh; bottom: 6dvh; width: min(38vw, 560px); z-index: 2; will-change: transform; filter: drop-shadow(0 0 1px #f4ead8) drop-shadow(0 0 1px #f4ead8) drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.co-cart:has(.has-asset) { filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); width: min(46vw, 680px); } /* the photographed cart needs no outline */
.co-cart svg, .co-cart img { display: block; width: 100%; height: auto; }
.co-wheel { transform-box: fill-box; transform-origin: center; }
.co-caps { position: absolute; top: clamp(90px, 16vh, 150px); top: clamp(90px, 16dvh, 150px); left: clamp(16px, 6vw, 90px); z-index: 3; list-style: none; display: grid; gap: 6px; }
.co-caps li { font-family: var(--f-serif); font-style: italic; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.1; color: #f4ead8; opacity: 0; transform: translateX(-14px);
  transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.co-caps li.on { opacity: 1; transform: none; }
.co-caps li:last-child { color: #fff; font-style: normal; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 2vw, 30px); letter-spacing: .02em; }
.co-quote { position: absolute; right: clamp(16px, 6vw, 90px); top: 50%; z-index: 3; max-width: 46vw; text-align: right; opacity: 0; translate: 0 -50%; }
.co-ar { font-family: var(--f-ar-display); font-size: clamp(40px, 5.6vw, 92px); line-height: 1.15; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.co-fr { font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 1.9vw, 26px); color: #fff; margin-top: 8px; }
.co-hint { position: absolute; left: 50%; bottom: 3vh; bottom: 3dvh; transform: translateX(-50%); z-index: 3; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: rgba(255,255,255,.7); }
@media (max-width: 760px) { .co-cart { width: 74vw; } .co-quote { max-width: 86vw; top: auto; bottom: 30vh; bottom: 30dvh; translate: none; } }

/* ─────────── Jahilya · six vies ─────────── */
.sig-six .sticky { background: #000; }
.sx-stage, .sx-shot, .sx-veil { position: absolute; inset: 0; }
.sx-shot { background: #000 center / cover no-repeat; filter: grayscale(1) contrast(1.25) brightness(1.1); opacity: 0; }
.sx-shot.on { opacity: 1; animation: sx-push 7s ease-out both; }
@keyframes sx-push { from { transform: scale(1.08); } to { transform: scale(1); } }
.sx-veil { background: linear-gradient(90deg, rgba(0,0,0,.7), transparent 55%), #d0262b; mix-blend-mode: multiply; pointer-events: none; }
.sx-text { position: absolute; left: clamp(16px, 6vw, 96px); top: 50%; translate: 0 -50%; z-index: 3; max-width: min(620px, 80vw); }
.sx-k { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: rgba(242,230,230,.7); }
.sx-k b { color: #fff; }
.sx-numeral { font-family: var(--f-display); font-weight: 900; font-size: clamp(110px, 20vw, 300px); line-height: .8; color: transparent; -webkit-text-stroke: 2px #f2e6e6; margin: 10px 0 6px; transform-origin: 0 80%; }
.sx-line { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 4.2vw, 68px); line-height: .9; color: #fff; transform: skewX(-9deg); text-shadow: 5px 4px 0 #7F0001; }
.sx-strip { position: absolute; right: clamp(16px, 4vw, 60px); bottom: clamp(18px, 6vh, 56px); bottom: clamp(18px, 6dvh, 56px); z-index: 3; list-style: none; display: flex; gap: 6px; }
.sx-strip li { position: relative; width: clamp(44px, 5vw, 76px); aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; filter: grayscale(1) brightness(.45); outline: 1px solid rgba(242,230,230,.15); transition: filter .3s, outline-color .3s; }
.sx-strip li.seen { filter: grayscale(1) sepia(1) hue-rotate(-40deg) saturate(3) brightness(.55); }
.sx-strip li.on { filter: none; outline: 1px solid #C0262B; outline-offset: 2px; }
.sx-strip span { position: absolute; left: 4px; bottom: 2px; font-size: 9px; color: #fff; text-shadow: 0 1px 3px #000; }
.sx-mosaic { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; opacity: 0; pointer-events: none; background: #000; }
.sx-mosaic div { position: relative; background: #000 center / cover no-repeat; filter: grayscale(1) contrast(1.3) brightness(.6) sepia(1) hue-rotate(-40deg) saturate(4); }
.sx-mosaic span { position: absolute; left: 10px; top: 6px; font-family: var(--f-display); font-weight: 900; font-size: clamp(26px, 3vw, 46px); color: #fff; opacity: .85; }
.sx-end { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; opacity: 0; pointer-events: none; }
.sx-final { width: 90vw; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 8vw, 140px); line-height: .88; color: #fff; transform: skewX(-9deg); text-shadow: 6px 4px 0 #7F0001, 0 0 60px rgba(0,0,0,.8); }
.sx-named { max-width: 90vw; color: #f2e6e6; font-size: 10px; letter-spacing: .03em; background: rgba(0,0,0,.6); padding: 6px 10px; }
.sx-obj { position: absolute; right: 7%; bottom: 10%; width: 34%; max-height: 72%; z-index: 2; opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); filter: grayscale(1) contrast(1.3) sepia(1) hue-rotate(-40deg) saturate(3) brightness(.9); }
.sx-obj img { width: 100%; max-height: 72vh; max-height: 72dvh; object-fit: contain; object-position: bottom; display: block; }
.sx-obj.on.has-asset { opacity: 1; transform: none; }
@media (max-width: 760px) { .sx-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); } .sx-strip li { width: 40px; } }

/* ─────────── Moroccan Badass Girl · compte à rebours ─────────── */
.sig-compte .sticky { background: #11130C; }
.cp-face { position: absolute; inset: 0; background: center 30% / cover no-repeat; filter: saturate(1.2) contrast(1.1) brightness(.55); transform-origin: 50% 40%; }
.cp-poster { position: absolute; right: 6vw; top: 14vh; top: 14dvh; width: min(22vw, 240px); aspect-ratio: 3 / 4; background: center / cover no-repeat #000; border: 10px solid #f4e7cf; border-bottom-width: 34px; transform: rotate(5deg); box-shadow: 0 20px 40px rgba(0,0,0,.6); }
.cp-day { position: absolute; top: 90px; left: clamp(16px, 5vw, 80px); color: var(--hb-paper); letter-spacing: .03em; }
.cp-clock { position: absolute; left: clamp(16px, 5vw, 80px); bottom: 12vh; bottom: 12dvh; font-family: var(--f-mono); font-weight: 700; font-size: clamp(80px, 16vw, 260px); line-height: .8; color: #ffd36e; text-shadow: 0 0 30px rgba(255,170,40,.45); letter-spacing: -.04em; }
.cp-stickers { position: absolute; inset: 0; pointer-events: none; }
.cp-st { position: absolute; font-family: var(--f-display); font-weight: 900; font-size: clamp(40px, 6.2vw, 104px); line-height: .95; white-space: nowrap; padding: .12em .32em .06em; transform: rotate(var(--r)) scale(.4); opacity: 0; transition: transform .25s cubic-bezier(.3,1.6,.5,1), opacity .1s; box-shadow: 6px 8px 0 rgba(0,0,0,.45); }
.cp-st.on { transform: rotate(var(--r)) scale(1); opacity: 1; }
.cp-st.c0 { background: #ffd36e; color: #11130C; } .cp-st.c1 { background: #E0457B; color: #fff; } .cp-st.c2 { background: #f4e7cf; color: #11130C; } .cp-st.c3 { background: #11130C; color: #ffd36e; border: 2px solid #ffd36e; }
.cp-thirty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(200px, 50vw, 760px); line-height: .8; color: #fff; mix-blend-mode: difference; transition: opacity .1s, transform .6s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
.cp-thirty.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ─────────── Thank You Satan · l'hôtel ─────────── */
.sig-hotel { height: 600vh; height: 600dvh; }
.sig-hotel .sticky { background: #050807; perspective: 600px; }

.ht-num { font-family: var(--f-mono); font-weight: 700; font-size: clamp(54px, 7vw, 110px); line-height: .9; color: var(--hb-light); letter-spacing: -.04em; }
.ht-title { color: var(--hb-amber); margin: 8px 0 14px; }
.ht-text { font-family: 'Courier New', var(--f-mono); font-size: clamp(18px, 1.8vw, 26px); line-height: 1.45; color: #e5eee6; min-height: 3em; }
.redact { background: #000; color: transparent; padding: 0 2px; transition: color .25s, background .25s; cursor: help; }
.redact:hover, .redact:focus { color: #e5eee6; background: rgba(224,38,27,.25); outline: none; }
.ht-hint { position: absolute; left: 50%; bottom: 10vh; bottom: 10dvh; transform: translateX(-50%); color: var(--hb-light); }

@media (max-width: 760px) {
  .cp-poster { display: none; }
  
}
@media (prefers-reduced-motion: reduce) {
  .rp-rec b { animation: none; }
  .cp-st, .cp-thirty { transition: none; }
}

/* ─────────── generated PNG slots ─────────── */
.slot { display: block; }
.slot img { display: block; width: 100%; height: auto; }
.slot:empty { display: none; }

/* The End · rewind */
.rb-tear { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(180deg, transparent 0 18px, rgba(255,255,255,.5) 18px 20px, transparent 20px 46px, rgba(255,255,255,.18) 46px 47px, transparent 47px 80px); }
.rb-strip { position: absolute; right: clamp(16px, 4vw, 60px); top: 0; bottom: 0; width: clamp(70px, 9vw, 130px); overflow: hidden; opacity: .55;
  background: repeating-linear-gradient(180deg, #000 0 10px, #e9e3d4 10px 16px, #000 16px 26px) left / 10px 100% no-repeat, repeating-linear-gradient(180deg, #000 0 10px, #e9e3d4 10px 16px, #000 16px 26px) right / 10px 100% no-repeat, #000; }
.rb-strip-in { display: grid; gap: 8px; padding: 0 14px; will-change: transform; }
.rb-strip-in span { display: block; aspect-ratio: 4 / 3; background: center / cover no-repeat; filter: grayscale(1) contrast(1.3) brightness(.7); transform: scaleX(-1); }
.rb-car { position: absolute; bottom: 6vh; bottom: 6dvh; left: 0; width: min(46vw, 520px); filter: grayscale(1) contrast(1.2) brightness(.8) drop-shadow(0 10px 20px rgba(0,0,0,.8)); pointer-events: none; }

/* Dogs · autofocus */
.rp-af { position: absolute; left: 50%; top: 45%; width: 120px; height: 90px; margin: -45px 0 0 -60px; border: 2px solid #fff; opacity: 0; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) top left / 20px 20px no-repeat, linear-gradient(#000 0 0) top right / 20px 20px no-repeat, linear-gradient(#000 0 0) bottom left / 20px 20px no-repeat, linear-gradient(#000 0 0) bottom right / 20px 20px no-repeat;
          mask: linear-gradient(#000 0 0) top left / 20px 20px no-repeat, linear-gradient(#000 0 0) top right / 20px 20px no-repeat, linear-gradient(#000 0 0) bottom left / 20px 20px no-repeat, linear-gradient(#000 0 0) bottom right / 20px 20px no-repeat; }

/* Jahilya · sheep */

/* Badass · split-flap clock, glitch, cake */
.cp-clock { display: flex; align-items: center; perspective: 600px; }
.cp-clock .fl { display: inline-block; min-width: .62em; text-align: center; background: rgba(0,0,0,.35); margin-right: .04em; border-radius: .05em; transform-origin: 50% 50%; box-shadow: inset 0 -.5em 0 rgba(0,0,0,.18); }
.cp-colon { margin: 0 .04em; opacity: .8; }
.cp-face.glitch { animation: face-glitch .42s steps(2) 1; }
@keyframes face-glitch {
  0% { clip-path: inset(10% 0 60% 0); transform: translateX(-14px) scale(1.2); filter: saturate(3) hue-rotate(80deg) brightness(.8); }
  25% { clip-path: inset(50% 0 20% 0); transform: translateX(16px) scale(1.2); filter: saturate(2) hue-rotate(-60deg) brightness(.9); }
  50% { clip-path: inset(0 0 0 0); transform: translateX(-6px) scale(1.2); }
  100% { clip-path: inset(0 0 0 0); }
}
.cp-cake { position: absolute; left: 50%; bottom: 2vh; bottom: 2dvh; width: min(48vw, 580px); transform: translate(-50%, 40%) scale(.6); opacity: 0; transition: transform .7s cubic-bezier(.2,1.5,.4,1), opacity .2s; pointer-events: none; z-index: 2; }
.cp-cake.on { transform: translate(-50%, 0) scale(1); opacity: 1; }

/* Satan · door, light, key */

.ht-key { position: absolute; right: 7vw; top: 10vh; top: 10dvh; width: min(10vw, 110px); transform-origin: 50% 0; animation: key-swing 3.2s ease-in-out infinite; pointer-events: none; z-index: 4; }
@keyframes key-swing { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-9deg); } }
@media (prefers-reduced-motion: reduce) { .ht-key, .cp-face.glitch { animation: none; } }

/* Headbang · during the headbang only: fast cuts from inside the film, graded like cinema */
.pont-cuts { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: #0e0b07; }
.pont-cuts.on { opacity: 1; }
.pf { position: absolute; inset: -6%; background: center / cover no-repeat; opacity: 0; filter: sepia(.3) saturate(.95) contrast(1.15) brightness(.72); }
.pf.on { opacity: 1; }
.pont-grade { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #000 0 11vh, transparent 11vh calc(100% - 11vh), #000 calc(100% - 11vh)),
    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0,0,0,.6) 100%),
    linear-gradient(180deg, rgba(214,150,70,.22), rgba(20,60,70,.28)); background: linear-gradient(180deg, #000 0 11dvh, transparent 11dvh calc(100% - 11dvh), #000 calc(100% - 11dvh)),
    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0,0,0,.6) 100%),
    linear-gradient(180deg, rgba(214,150,70,.22), rgba(20,60,70,.28)); }
.sig-pont .headbang-word { z-index: 3; }

/* Headbang · Daoud stays visible over the cuts; then a clean black end card */
.sig-pont .headbang-word { z-index: 5; }
.pont-black { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at 70% 60%, #15110b, #000 70%); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.sig-pont .sticky.carded .pont-black { opacity: 1; }
.sig-pont .sticky.carded .bt, .sig-pont .sticky.carded .bridge-hud { opacity: 0 !important; }

/* from one film's palmarès to the whole career's */
.p-all { justify-self: start; display: inline-block; margin-top: 0; padding: 11px 16px; border: 1px solid var(--hb-amber); color: var(--hb-paper); font-size: 11px; }
.p-all:hover, .p-all:focus-visible { background: var(--hb-amber); color: #0b0a09; outline: none; }

/* the film's wallpaper behind the text sections, seen as the paper itself under a veil of the film's deep colour
   (assets/patterns/<film>.png, prompts in concept/asset-prompts.md §11) */
/* graded in the film's own colours: the wallpaper keeps only its drawing (luminosity) and takes the film's hue,
   under a veil of the film's darkest tone, with a soft light of its accent from the top corner */
#screening :is(.s-vision, .s-palmares, .s-critique, .s-liens, .s-dossier) { background-color: var(--g-deep, var(--hb-deep)); }
/* one continuous paper behind every section, no seams: a single finished picture held still behind the page. A fixed background on the
   sections themselves was repainted at every step of the scroll, and on a phone it left a band of bare colour when the
   browser's bars moved. It is taller than any height the bars leave */
#screening.has-pattern :is(.s-vision, .s-palmares, .s-critique, .s-liens, .s-dossier) { background: none; }
/* the scenes with no ground of their own keep the black they always stood on, in front of that layer */
#screening.has-pattern .film > :is(.s-title, .s-sig) { background-color: #000; }
#screening.has-pattern .film::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 130vh; height: 130dvh; z-index: 0; pointer-events: none;
  background: var(--g-deep) var(--pat) 0 0 / 920px auto repeat; }

/* ══════════ per-film art direction: the small pieces speak each film's language ══════════
   .p-tag = prize tag · .p-all/.og-ch = buttons · .motif = motif cards · .v-label = quote label */
#screening[data-film] .motif { position: relative; }
#screening[data-film] :is(.p-all, .og-ch) { transition: transform .15s, box-shadow .15s, background .2s, color .2s; }

/* THE END · black & white, the end of a reign told backwards: film-leader marks, typed index cards */
#screening[data-film="the-end"] .p-tag { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: #f4ead8; padding: 0; }
#screening[data-film="the-end"] .p-tag::before { content: ''; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #f4ead8;
  background: linear-gradient(#f4ead8, #f4ead8) center / 1px 100% no-repeat, linear-gradient(#f4ead8, #f4ead8) center / 100% 1px no-repeat; }
#screening[data-film="the-end"] .p-row.won .p-tag { background: none; color: #f4ead8; }
#screening[data-film="the-end"] .p-row.won .p-tag::before { background-color: #f4ead8; box-shadow: inset 0 0 0 4px #120f0a; }
#screening[data-film="the-end"] :is(.p-all, .og-ch) { background: #f4ead8; color: #000; border: 0; padding: 14px 26px; font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 -6px 0 -3px #000, 0 6px 0 -3px #000, 0 0 0 1px #f4ead8; }
#screening[data-film="the-end"] :is(.p-all, .og-ch)::before { content: '◀︎ '; }
#screening[data-film="the-end"] :is(.p-all, .og-ch):hover { background: #000; color: #f4ead8; }
#screening[data-film="the-end"] .motif { background: #ece6da; color: #111; border: 0; font-family: 'Courier New', var(--f-mono); font-style: normal; font-size: 16px;
  padding: 16px 18px 14px; transform: rotate(-1deg); box-shadow: 0 10px 24px rgba(0,0,0,.5);
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(70,110,170,.25) 23px 24px); }
#screening[data-film="the-end"] .motif:nth-child(even) { transform: rotate(1.2deg); }
#screening[data-film="the-end"] .motif .mono { color: #6a1f1f; }
#screening[data-film="the-end"] .v-label::before { content: '◀︎◀︎ '; }

/* C'EST EUX LES CHIENS · a TV crew in 2011: news chyrons, a lower-third, REC */
#screening[data-film="dogs"] .p-tag { background: #c8102e; color: #fff; border: 0; transform: skewX(-12deg); font-weight: 700; }
#screening[data-film="dogs"] .p-tag::before { content: '● '; }
#screening[data-film="dogs"] .p-row:not(.won) .p-tag { background: #f4ead8; color: #111; }
#screening[data-film="dogs"] :is(.p-all, .og-ch) { display: inline-flex; align-items: stretch; padding: 0 18px 0 0; border: 0; background: #f4ead8; color: #111;
  font-family: var(--f-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; line-height: 2.4; }
#screening[data-film="dogs"] :is(.p-all, .og-ch)::before { content: 'EN DIRECT'; display: grid; place-items: center; padding: 0 14px; margin-right: 14px;
  background: #c8102e; color: #fff; font-family: var(--f-mono); font-size: 10px; letter-spacing: .03em; line-height: 1; }
#screening[data-film="dogs"] :is(.p-all, .og-ch):hover { transform: translateX(6px); }
#screening[data-film="dogs"] .motif { border: 0; border-left: 6px solid #c8102e; background: rgba(0,0,0,.55); padding: 12px 54px 12px 16px; font-style: normal;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 20px; letter-spacing: .01em; }
#screening[data-film="dogs"] .motif::before { content: '● REC'; position: absolute; top: 8px; right: 10px; font-family: var(--f-mono); font-size: 8px; color: #ff4b4b; letter-spacing: .03em; }
#screening[data-film="dogs"] .motif .mono { color: #f2c94c; }
#screening[data-film="dogs"] .v-label::before { content: '● '; color: #ff4b4b; }

/* THE SEA IS BEHIND · a wedding dancer, almost no colour: wedding-card ornaments, double frames */
#screening[data-film="sea"] .p-tag { border: 0; background: none; color: #f4ead8; font-family: var(--f-serif); font-style: italic; font-size: 15px;
  letter-spacing: .02em; text-transform: none; }
#screening[data-film="sea"] .p-tag::before, #screening[data-film="sea"] .p-tag::after { content: ' ◆ '; font-style: normal; font-size: 8px; vertical-align: middle; }
#screening[data-film="sea"] .p-row.won .p-tag { background: none; color: #f4ead8; }
#screening[data-film="sea"] :is(.p-all, .og-ch) { background: none; color: #f4ead8; border: 1px solid #f4ead8; outline: 1px solid #f4ead8; outline-offset: 4px;
  padding: 14px 28px; font-family: var(--f-serif); font-style: italic; font-size: 20px; letter-spacing: .01em; text-transform: none; }
#screening[data-film="sea"] :is(.p-all, .og-ch):hover { background: #f4ead8; color: #000; }
#screening[data-film="sea"] .motif { border: 1px solid rgba(244,234,216,.7); outline: 1px solid rgba(244,234,216,.35); outline-offset: 5px; border-radius: 999px;
  padding: 16px 30px; text-align: center; font-size: 19px; }
#screening[data-film="sea"] .motif .mono { color: rgba(244,234,216,.6); }
#screening[data-film="sea"] .v-label::before, #screening[data-film="sea"] .v-label::after { content: ' ◆ '; font-size: 7px; }

/* STARVE YOUR DOG · the impossible interview on old video: camcorder OSD, transcript cards */
#screening[data-film="starve"] .p-tag { border: 0; background: none; color: #fff; font-family: var(--f-mono); font-size: 12px; letter-spacing: .03em;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
#screening[data-film="starve"] .p-tag::before { content: '▶︎ '; color: #ff6b6b; }
#screening[data-film="starve"] .p-row.won .p-tag { background: none; color: #fff; }
#screening[data-film="starve"] :is(.p-all, .og-ch) { background: rgba(0,0,0,.6); color: #fff; border: 2px solid #fff; padding: 12px 20px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 0 6px rgba(255,255,255,.5); }
#screening[data-film="starve"] :is(.p-all, .og-ch)::before { content: 'PLAY ▶︎  '; color: #9effa0; }
#screening[data-film="starve"] :is(.p-all, .og-ch):hover { background: #fff; color: #000; text-shadow: none; }
#screening[data-film="starve"] .motif { background: #efe7dc; color: #2a2220; border: 0; font-style: normal; font-family: 'Courier New', var(--f-mono); font-size: 15px;
  padding: 14px 18px 14px 44px; box-shadow: 0 10px 22px rgba(0,0,0,.45); }
#screening[data-film="starve"] .motif::before { content: 'Q.'; position: absolute; left: 16px; top: 14px; font-weight: 700; color: #9e5450; }
#screening[data-film="starve"] .motif .mono { color: #9e5450; }
#screening[data-film="starve"] .v-label::before { content: 'REC ● '; color: #ff6b6b; }

/* HEADBANG LULLABY · a policeman, a bridge, 1986: rubber stamps, an enamel plaque, report fields */
#screening[data-film="headbang"] .p-tag { background: none; color: #d9603f; border: 2px solid #d9603f; box-shadow: inset 0 0 0 2px #120f0a, inset 0 0 0 3px #d9603f;
  padding: 5px 10px; transform: rotate(-7deg); font-family: var(--f-display); font-weight: 800; font-size: 13px; letter-spacing: .03em; opacity: .92; }
#screening[data-film="headbang"] .p-row.won .p-tag { background: none; color: #e8714f; border-color: #e8714f; }
#screening[data-film="headbang"] :is(.p-all, .og-ch) { background: #d4b25a; color: #1b1712; border: 3px solid #1b1712; border-radius: 6px;
  box-shadow: 0 0 0 3px #d4b25a, 0 8px 20px rgba(0,0,0,.45); padding: 12px 22px; font-family: var(--f-display); font-weight: 800; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; }
#screening[data-film="headbang"] :is(.p-all, .og-ch):hover { transform: translateY(-2px); }
#screening[data-film="headbang"] .motif { border: 0; border-bottom: 1px dashed rgba(244,234,216,.5); padding: 10px 4px 8px 92px; font-style: normal; font-size: 18px; }
#screening[data-film="headbang"] .motif::before { content: 'OBJET :'; position: absolute; left: 4px; top: 13px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .03em; color: #d4b25a; }
#screening[data-film="headbang"] .motif .mono { color: rgba(244,234,216,.55); }
#screening[data-film="headbang"] .v-label::before { content: '☎︎ '; }

/* JAHILYA · six lives, humiliation, red: torn tape, perforated numbered tickets */
#screening[data-film="jahilya"] .p-tag { background: #a3101a; color: #f4ead8; border: 0; padding: 5px 14px; transform: rotate(-2deg);
  clip-path: polygon(0 12%, 6% 0, 94% 6%, 100% 0, 97% 52%, 100% 100%, 4% 92%, 0 100%); }
#screening[data-film="jahilya"] :is(.p-all, .og-ch) { background: #a3101a; color: #f4ead8; border: 0; padding: 14px 30px; font-family: var(--f-display);
  font-weight: 900; font-size: 18px; letter-spacing: .03em; text-transform: uppercase;
  clip-path: polygon(0 8%, 3% 0, 97% 5%, 100% 0, 98% 50%, 100% 100%, 2% 94%, 0 100%); }
#screening[data-film="jahilya"] :is(.p-all, .og-ch):hover { background: #f4ead8; color: #a3101a; }
#screening[data-film="jahilya"] .motifs { counter-reset: life; }
#screening[data-film="jahilya"] .motif { counter-increment: life; border: 0; background: #f4ead8; color: #2a0a0a; font-style: normal; padding: 12px 18px 12px 64px;
  -webkit-mask: radial-gradient(circle 4px at 46px 8px, #0000 96%, #000) 0 0 / 100% 16px repeat-y; mask: radial-gradient(circle 4px at 46px 8px, #0000 96%, #000) 0 0 / 100% 16px repeat-y; }
#screening[data-film="jahilya"] .motif::before { content: 'N° ' counter(life); position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 10px; color: #a3101a; }
#screening[data-film="jahilya"] .motif .mono { color: #7f0001; }

/* MOROCCAN BADASS GIRL · Cathy, 30, pop: hard-shadow stickers, patterned notes */
#screening[data-film="badass"] .p-tag { background: #D9653B; color: #111; border: 2px solid #111; box-shadow: 3px 3px 0 #111; transform: rotate(-3deg); font-weight: 700; }
#screening[data-film="badass"] .p-row.won .p-tag { background: #f2d43a; border-color: #111; }
#screening[data-film="badass"] :is(.p-all, .og-ch) { background: #f2d43a; color: #111; border: 3px solid #111; box-shadow: 6px 6px 0 #D9653B; padding: 12px 22px;
  font-family: var(--f-display); font-weight: 900; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; transform: rotate(-1deg); }
#screening[data-film="badass"] :is(.p-all, .og-ch):hover { transform: rotate(0) translate(-2px, -2px); box-shadow: 8px 8px 0 #D9653B; }
#screening[data-film="badass"] .motif { border: 2px solid #111; color: #111; font-style: normal; font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: 18px; padding: 12px 16px; box-shadow: 4px 4px 0 #111;
  background: radial-gradient(#ff4fa0 22%, transparent 24%) 0 0 / 14px 14px, radial-gradient(#3fe0c5 22%, transparent 24%) 7px 7px / 14px 14px, #f4ead8; }
#screening[data-film="badass"] .motif:nth-child(even) { transform: rotate(1.5deg); }
#screening[data-film="badass"] .motif .mono { color: #111; background: #f4ead8; display: inline-block; padding: 0 4px; margin-top: 6px; }

/* THANK YOU SATAN · one night in a hotel, 1993: key tags, a brass reception plaque, notepad sheets */
#screening[data-film="satan"] .p-tag { background: #b7ccb8; color: #1b2a1d; border: 0; padding: 5px 12px 5px 24px; border-radius: 3px 14px 14px 3px;
  -webkit-mask: radial-gradient(circle 3.5px at 11px 50%, #0000 96%, #000); mask: radial-gradient(circle 3.5px at 11px 50%, #0000 96%, #000); }
#screening[data-film="satan"] :is(.p-all, .og-ch) { background: linear-gradient(135deg, #8a6a2e, #e4c77a 45%, #a4813a 60%, #f0d898); color: #2a1e08; border: 0;
  padding: 13px 24px; font-family: var(--f-serif); font-style: italic; font-size: 19px; text-transform: none; letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(60,40,10,.5), 0 8px 18px rgba(0,0,0,.45); border-radius: 2px; }
#screening[data-film="satan"] :is(.p-all, .og-ch):hover { filter: brightness(1.08); }
#screening[data-film="satan"] .motif { background: #f6f3e8; color: #2a2a28; border: 0; font-style: normal; font-family: var(--f-serif); font-size: 18px;
  padding: 30px 18px 12px; box-shadow: 0 10px 22px rgba(0,0,0,.4);
  background-image: linear-gradient(#94a899, #94a899) 0 22px / 100% 1px no-repeat, repeating-linear-gradient(transparent 0 25px, rgba(148,168,153,.35) 25px 26px); }
#screening[data-film="satan"] .motif::before { content: 'HÔTEL · NOTE'; position: absolute; left: 18px; top: 7px; font-family: var(--f-mono); font-size: 8px; letter-spacing: .03em; color: #708676; }
#screening[data-film="satan"] .motif .mono { color: #708676; }

/* ══════════ the dossier after the film's scene: one grid, one card, five chapters ══════════ */
.s-dossier { --line: color-mix(in srgb, var(--g-glow, var(--hb-amber)) 24%, transparent); --card: color-mix(in srgb, var(--g-deep, var(--hb-deep)) 78%, transparent);
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: clamp(28px, 4vw, 72px);
  padding: clamp(90px, 14vh, 150px) clamp(16px, 5vw, 80px) clamp(140px, 24vh, 240px); padding: clamp(90px, 14dvh, 150px) clamp(16px, 5vw, 80px) clamp(140px, 24dvh, 240px); color: var(--hb-paper); }
.s-dossier::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26vh; height: 26dvh; background: linear-gradient(#000, transparent); pointer-events: none; }
.s-dossier::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28vh; height: 28dvh; background: linear-gradient(transparent, #000); pointer-events: none; }
.s-dossier > * { position: relative; z-index: 1; }
.ds-main { min-width: 0; display: grid; gap: clamp(72px, 12vh, 130px); gap: clamp(72px, 12dvh, 130px); }
.ds-h { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(20px, 3vh, 32px); margin-bottom: clamp(20px, 3dvh, 32px); }
.ds-n { font-family: var(--f-display); font-weight: 900; font-size: 20px; color: var(--g-glow, var(--hb-amber)); }
.ds-h h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 4.6vw, 64px); line-height: .9; }
.ds-ar { font-family: var(--f-ar-display); font-size: clamp(18px, 1.8vw, 26px); color: color-mix(in srgb, var(--hb-paper) 55%, transparent); }
.ds-h i { flex: 1; height: 1px; background: var(--line); align-self: center; }
.ds-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.ds-grid > .c3 { grid-column: span 3; } .ds-grid > .c4 { grid-column: span 4; } .ds-grid > .c5 { grid-column: span 5; } .ds-grid > .c6 { grid-column: span 6; }
.ds-grid > .c7 { grid-column: span 7; } .ds-grid > .c8 { grid-column: span 8; } .ds-grid > .c12 { grid-column: 1 / -1; }
.ds-card { position: relative; padding: clamp(18px, 2vw, 28px); background: var(--card); border: 1px solid var(--line); min-width: 0; }
.ds-k { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--g-glow, var(--hb-amber)); margin-bottom: 12px; }
.ds-src { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--hb-paper) 50%, transparent); margin-top: 14px; }
.ds-src a { color: inherit; }
.ds-card p:not(.mono) { font-family: var(--f-serif); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.4; }
/* images: a frame of the film, its caption on the frame */
.ds-img { padding: 0; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.ds-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-img figcaption { position: absolute; left: 12px; bottom: 10px; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
/* the fiche: a film's identity card */
.ds-facts { display: grid; align-content: start; margin: 0; }
.ds-title { font-family: var(--f-display) !important; font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 40px) !important; line-height: .9 !important; margin-bottom: 14px; }
.ds-title span { display: block; font-family: var(--f-ar-display); font-weight: 400; text-transform: none; font-size: .6em; margin-top: 6px; color: var(--g-glow, var(--hb-amber)); }
.ds-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.ds-row dt { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--hb-paper) 55%, transparent); padding-top: 3px; }
.ds-row dd { font-family: var(--f-serif); font-size: 16px; line-height: 1.35; }
.ds-row small { display: block; font-size: 12px; opacity: .6; }
.ds-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
/* the vision */
.ds-card.ds-quote .v-quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.08; }
.ds-card.ds-quote .v-quote .tr { display: block; font-size: .42em; margin-top: 12px; opacity: .6; }
.ds-card.ds-quote-sm .v-quote { font-size: clamp(22px, 2.2vw, 34px); }
.ds-quote .v-src { font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--hb-paper) 50%, transparent); margin-top: 16px; }
.ds-quote .v-src a { color: inherit; }
/* the reception */
.ds-award { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; color: inherit; text-decoration: none; transition: border-color .25s, transform .25s; }
.ds-award:hover { border-color: var(--g-glow, var(--hb-amber)); transform: translateY(-2px); }
.ds-award .p-ico { grid-row: span 3; width: 54px; }
.ds-aw { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(17px, 1.5vw, 22px); line-height: 1; }
.ds-aw small { display: block; font-family: var(--f-serif); font-weight: 400; text-transform: none; font-size: 15px; margin-top: 4px; opacity: .75; }
.ds-where { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; opacity: .7; }
.ds-award .p-tag { grid-column: 2; grid-row: auto; justify-self: start; align-self: start; } /* under the title, never beside it: long prize names need the width */
.ds-award .ds-src { grid-column: 2; margin-top: 4px; }
.ds-rq { font-style: italic; font-size: clamp(20px, 2vw, 28px) !important; line-height: 1.25 !important; }
.ds-tr { font-size: 15px !important; opacity: .65; margin-top: 8px; }
.ds-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.ds-strip .ds-k { margin: 0; }
.ds-strip .ds-src { margin: 0; flex-basis: 100%; }
/* the faces */
.ds-lead { font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 1.7vw, 24px); max-width: none; margin-bottom: 22px; opacity: .85; }
.ds-face { padding: 0; overflow: hidden; display: grid; align-content: start; }
.ds-face figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.ds-face img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25); transition: filter .4s, transform .8s cubic-bezier(.2,.8,.2,1); }
.ds-face:hover img { filter: none; transform: scale(1.04); }
.ds-face h4 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 20px; line-height: 1; padding: 16px 18px 6px; }
.ds-face ul, .ds-also ul { list-style: none; }
.ds-face li { font-family: var(--f-serif); font-style: italic; font-size: 15px; line-height: 1.35; padding: 0 18px; }
.ds-face .ds-src { padding: 0 18px 16px; }
.ds-also ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 28px; }
.ds-also li { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.ds-also b { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 17px; }
.ds-also span { font-family: var(--f-serif); font-style: italic; font-size: 15px; opacity: .75; }
/* around the film */
@media (max-width: 1000px) {
  .s-dossier { grid-template-columns: 1fr; }
  .ds-rail { display: none; }
  .ds-grid > :is(.c3) { grid-column: span 6; }
  .ds-grid > :is(.c4, .c5, .c7, .c8) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ds-grid > :is(.c3, .c6) { grid-column: 1 / -1; }
}

#ds-fiche .ds-img { aspect-ratio: auto; min-height: 280px; } /* as tall as the fiche beside it */
.ds-face.c6 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.ds-face.c6 figure { grid-row: span 3; }

/* ══════════ the dossier, finished: film-frame corners, programme numerals, credits typography ══════════ */
.s-dossier { --glow: var(--g-glow, var(--hb-amber)); --tick: 16px; }
.ds-main { gap: clamp(96px, 15vh, 170px); gap: clamp(96px, 15dvh, 170px); }
.ds-grid { gap: 18px; }
/* cards: no box, a film frame: four corner marks in the film's accent, a faint hairline, a deep glassy fill */
.s-dossier .ds-card {
  border: 1px solid color-mix(in srgb, var(--hb-paper) 7%, transparent);
  background:
    linear-gradient(var(--glow), var(--glow)) 0 0 / var(--tick) 1px no-repeat, linear-gradient(var(--glow), var(--glow)) 0 0 / 1px var(--tick) no-repeat,
    linear-gradient(var(--glow), var(--glow)) 100% 0 / var(--tick) 1px no-repeat, linear-gradient(var(--glow), var(--glow)) 100% 0 / 1px var(--tick) no-repeat,
    linear-gradient(var(--glow), var(--glow)) 0 100% / var(--tick) 1px no-repeat, linear-gradient(var(--glow), var(--glow)) 0 100% / 1px var(--tick) no-repeat,
    linear-gradient(var(--glow), var(--glow)) 100% 100% / var(--tick) 1px no-repeat, linear-gradient(var(--glow), var(--glow)) 100% 100% / 1px var(--tick) no-repeat,
    linear-gradient(160deg, color-mix(in srgb, var(--hb-paper) 4%, transparent), transparent 40%),
    var(--card);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
  transition: --tick .3s, border-color .3s, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  padding: clamp(22px, 2.4vw, 34px);
}
.s-dossier :is(a, .ds-face).ds-card:hover { --tick: 34px; border-color: color-mix(in srgb, var(--glow) 30%, transparent); transform: translateY(-3px); box-shadow: 0 34px 70px -30px rgba(0,0,0,.85); }
@property --tick { syntax: '<length>'; inherits: true; initial-value: 16px; }
.s-dossier .ds-k { display: flex; align-items: center; gap: 10px; }
.s-dossier .ds-k::before { content: ''; width: 18px; height: 1px; background: currentColor; }
/* chapter heads: a big outlined numeral behind, like a cinema programme */
.ds-h { position: relative; padding-top: clamp(26px, 5vh, 54px); padding-top: clamp(26px, 5dvh, 54px); margin-bottom: clamp(26px, 4vh, 40px); margin-bottom: clamp(26px, 4dvh, 40px); }
.ds-h::before { content: attr(data-n); position: absolute; left: -.06em; bottom: .04em; /* inside the head: never under the first card */ z-index: -1; font-family: var(--f-display); font-weight: 900; line-height: .8;
  font-size: clamp(120px, 15vw, 220px); color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--glow) 32%, transparent); pointer-events: none; }
.ds-h .ds-n { font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: .03em; align-self: center; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--glow) 50%, transparent); }
.ds-h h3 { font-size: clamp(38px, 5.2vw, 76px); letter-spacing: -.005em; }
/* the fiche: set like film credits */
#ds-fiche .ds-img { box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.ds-img::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 60%, rgba(0,0,0,.55)), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.35)); }
.ds-img figcaption { z-index: 1; left: 18px; bottom: 14px; display: flex; align-items: center; gap: 8px; }
.ds-facts { border-top: 3px solid var(--glow) !important; }
.ds-title { font-size: clamp(30px, 3vw, 46px) !important; margin-bottom: 20px; }
.ds-row { grid-template-columns: 96px minmax(0, 1fr); padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--hb-paper) 9%, transparent); }
.ds-row dt { color: var(--glow); opacity: .85; }
.ds-row dd { font-size: 17px; }
/* the actions */
.ds-actions { padding-top: 6px; }
/* quotes: a hanging guillemet in the film's accent, the source behind a rule */
.ds-card.ds-quote { padding-left: clamp(54px, 6vw, 96px); }
.ds-card.ds-quote::before { content: '«'; position: absolute; left: clamp(12px, 1.6vw, 26px); top: clamp(30px, 4vw, 54px); font-family: var(--f-serif); font-size: clamp(70px, 8vw, 120px); line-height: .6; color: var(--glow); opacity: .85; }
.ds-card.ds-quote .v-quote { text-wrap: balance; }
.ds-card.ds-quote .v-src { display: flex; align-items: center; gap: 12px; }
.ds-card.ds-quote .v-src::before { content: ''; width: 34px; height: 1px; background: var(--glow); }
.ds-note p:not(.mono) { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }
/* awards: laurels in the film's light */
.ds-award { grid-template-columns: 64px minmax(0, 1fr); }
.ds-award .p-ico { width: 64px; }
.ds-award .p-ico svg { width: 64px; height: auto; overflow: visible; }
.ds-award.laurel path { stroke: var(--glow); stroke-width: 3; }
.ds-award.laurel.won path.leaf { fill: var(--glow); fill-opacity: .9; }
.ds-aw { font-size: clamp(19px, 1.7vw, 25px); }
.ds-card.ds-review { border-left: 3px solid var(--glow) !important; }
/* faces: toned in the film's colour, full colour on hover, the name set on the photograph */
.s-dossier .ds-face { padding: 0; }
.ds-face figure { position: relative; }
.ds-face figure::after { content: ''; position: absolute; inset: 0; background: var(--g-mid, var(--hb-mid)); mix-blend-mode: color; opacity: .75; transition: opacity .5s; }
.ds-face figure::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 55%, rgba(0,0,0,.8)); }
.ds-face:hover figure::after { opacity: 0; }
.ds-face img { filter: contrast(1.05); }
.ds-face figure h4 { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 18px 14px; color: #fff; font-size: clamp(20px, 1.8vw, 26px); }
.ds-face ul { padding-top: 14px; }
.ds-face li { padding: 2px 18px; }
.ds-face li::before { content: '· '; color: var(--glow); }
.ds-face.c6 figure h4 { font-size: clamp(22px, 2vw, 30px); }
@media (prefers-reduced-motion: reduce) { .s-dossier .ds-card { transition: none; } }

/* the cast, like a film's page: portraits in a row, name, character, where else to see them */
.ds-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 44%), 1fr)); gap: 26px 18px; }
.ds-person { margin: 0; display: grid; gap: 12px; align-content: start; }
.ds-ph { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--card);
  border: 1px solid color-mix(in srgb, var(--hb-paper) 8%, transparent); box-shadow: 0 24px 50px -28px rgba(0,0,0,.8); }
.ds-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; filter: grayscale(.2) contrast(1.05);
  transition: filter .5s, transform .9s cubic-bezier(.2,.8,.2,1); }
.ds-ph::after { content: ''; position: absolute; inset: 0; background: var(--g-mid, var(--hb-mid)); mix-blend-mode: color; opacity: .6; transition: opacity .5s; pointer-events: none; }
.ds-person:hover .ds-ph::after { opacity: 0; }
.ds-person:hover .ds-ph img { filter: none; transform: scale(1.05); }
/* no verifiable photo: a name card, not a guessed face */
.no-ph .ds-ph { display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 60%), var(--card); }
.no-ph .ds-ph::after { content: none; }
.no-ph .ds-ph span { font-family: var(--f-display); font-weight: 900; font-size: clamp(38px, 4vw, 56px); letter-spacing: .04em; color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--glow) 70%, transparent); }
.ds-person figcaption { display: grid; gap: 3px; }
.ds-person b { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 17px; line-height: 1; }
.ds-role { font-family: var(--f-serif); font-style: italic; font-size: 15px; color: var(--glow); }
.ds-credit { font-size: 8px; letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--hb-paper) 45%, transparent); margin-top: 4px; }

/* a teaser made of the film's stills: each one fades in, drifts slowly, fades out */
.teaser-slides { position: absolute; inset: 0; background: #000; overflow: hidden; }
.teaser-slides .ts { position: absolute; inset: -4%; background: center / cover no-repeat; opacity: 0;
  animation: ts-show 3.4s ease-in-out forwards; animation-delay: calc(var(--i) * 2.6s); }
@keyframes ts-show { 0% { opacity: 0; transform: scale(1.08); } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .teaser-slides .ts { animation: none; opacity: 0; } .teaser-slides .ts:first-child { opacity: 1; } }
.teaser-ui a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ─────────── Thank You Satan · the hotel corridor, night shift (signatures.js · hotel) ─────────── */
.sig-hotel .sticky { background: #050706; perspective: none; overflow: hidden; }
.hx-view { position: absolute; inset: 0; perspective: 620px; perspective-origin: 50% 46%; }
.hx-corridor { --W: 100vw; --H: 100vh; --H: 100dvh; --walk: 0px; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d;
  transform: translateZ(var(--walk)); }
.hx-floor, .hx-ceil, .hx-wall { position: absolute; transform-style: preserve-3d; backface-visibility: visible; }
/* the carpet: a worn hotel pattern, dark green and wine */
.hx-floor { left: calc(var(--W) / -2); top: calc(var(--H) / 2); width: var(--W); height: var(--L); transform-origin: 50% 0; transform: rotateX(-90deg);
  background:
    linear-gradient(90deg, rgba(0,0,0,.65), transparent 18%, transparent 82%, rgba(0,0,0,.65)),
    repeating-linear-gradient(45deg, rgba(120,30,34,.45) 0 14px, transparent 14px 56px),
    repeating-linear-gradient(-45deg, rgba(120,30,34,.45) 0 14px, transparent 14px 56px),
    #1b2a24; }
.hx-ceil { left: calc(var(--W) / -2); top: calc(var(--H) / -2); width: var(--W); height: var(--L); transform-origin: 50% 0; transform: rotateX(-90deg);
  background: #0c100e; }
.hx-lamp { position: absolute; left: 35%; width: 30%; top: var(--at); height: 26px; background: #eef3e8;
  box-shadow: 0 0 40px 20px rgba(214,232,210,.35); }
/* the walls: faded striped paper over a dark wainscot */
.hx-wall { top: calc(var(--H) / -2); width: var(--L); height: var(--H);
  background:
    linear-gradient(180deg, transparent 64%, #1a1410 64% 65%, #2a2017 65%),
    repeating-linear-gradient(90deg, #2c3a33 0 22px, #34463d 22px 26px, #2c3a33 26px 48px),
    #2c3a33; }
.hx-wall.l { left: calc(var(--W) / -2); transform-origin: 0 50%; transform: rotateY(90deg); }
.hx-wall.r { left: calc(var(--W) / 2 - var(--L)); transform-origin: 100% 50%; transform: rotateY(-90deg); }
/* doors: dark wood, a brass number, light under the door of the room we reach */
.hx-door { position: absolute; bottom: 0; width: 260px; height: 72%; background: linear-gradient(90deg, #2a1d14, #3a291c 50%, #2a1d14);
  box-shadow: inset 0 0 0 10px rgba(0,0,0,.25), inset 0 0 0 12px rgba(120,90,60,.35), 0 0 0 8px #1a120c; }
.hx-wall.l .hx-door, .hx-wall.l .hx-pic, .hx-wall.l .hx-sconce { left: var(--at); }
.hx-wall.r .hx-door, .hx-wall.r .hx-pic, .hx-wall.r .hx-sconce { right: var(--at); }
.hx-plate { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); padding: 4px 12px; font: 700 26px/1 var(--f-mono); letter-spacing: .03em;
  color: #1b150c; background: linear-gradient(180deg, #e2cd92, #a8904f); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.hx-knob { position: absolute; right: 14%; top: 52%; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2e2a8, #7c6430); }
.hx-gap { position: absolute; left: 0; right: 0; bottom: -2px; height: 6px; background: transparent; transition: background .4s, box-shadow .4s; }
.hx-door.on .hx-gap { background: #f5dfa8; box-shadow: 0 0 30px 12px rgba(245,214,150,.55); }
.hx-door.on .hx-plate { box-shadow: 0 0 18px rgba(245,214,150,.7); }
/* the film's stills, framed like hotel pictures */
.hx-pic { position: absolute; top: 18%; width: 320px; height: 200px; background: center / cover no-repeat; filter: saturate(.6) brightness(.75) contrast(1.05);
  box-shadow: 0 0 0 10px #3a2c1c, 0 0 0 12px #6b5536, 0 10px 30px rgba(0,0,0,.7); }
.hx-sconce { position: absolute; top: 30%; width: 26px; height: 40px; background: radial-gradient(ellipse at 50% 30%, #fbefcc, #c8a464 60%, transparent 70%);
  box-shadow: 0 0 60px 30px rgba(245,214,150,.22); }
.hx-end { position: absolute; left: -22vw; top: -22vh; top: -22dvh; width: 44vw; height: 44vh; height: 44dvh; transform: translateZ(calc(var(--L) * -1)); background: center / cover no-repeat;
  filter: saturate(.6) brightness(.7); box-shadow: 0 0 120px rgba(183,204,184,.35); }
/* 666: the lamps turn red */
.sig-hotel .sticky.is-666 .hx-lamp { background: #ff3a2a; box-shadow: 0 0 50px 26px rgba(224,38,27,.5); }
.sig-hotel .sticky.is-666 .hx-sconce { background: radial-gradient(ellipse at 50% 30%, #ffb3a8, #e0261b 60%, transparent 70%); box-shadow: 0 0 60px 30px rgba(224,38,27,.35); }
.sig-hotel .sticky.is-666 .hx-door.on .hx-gap { background: #ff6a4a; box-shadow: 0 0 34px 14px rgba(224,38,27,.6); }
/* the night porter's card: paper, typed, a stamped room number */
.hx-card { position: absolute; z-index: 5; left: 50%; bottom: 9vh; bottom: 9dvh; width: min(560px, 90vw); margin-left: calc(min(560px, 90vw) / -2); padding: 18px 24px 16px;
  color: #1b1712; background: linear-gradient(180deg, #efe7d4, #e3d8bf); transform: rotate(-1.2deg);
  box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.08); }
.hx-head, .hx-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: rgba(27,23,18,.6); }
.hx-head { padding-bottom: 8px; border-bottom: 1px solid rgba(27,23,18,.35); }
.hx-foot { margin-top: 12px; padding-top: 8px; border-top: 1px dotted rgba(27,23,18,.35); }
.hx-stamp { position: absolute; right: 22px; top: 46px; padding: 4px 10px; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: #a3231b;
  border: 2px solid #a3231b; transform: rotate(6deg); opacity: .85; }
.hx-stamp .ht-num { font-size: 28px; font-weight: 700; letter-spacing: 0; color: inherit; font-family: var(--f-mono); line-height: 1; }
.hx-card .ht-title { margin: 14px 0 8px; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: #6b5a3c; }
.hx-card .ht-text { font-family: 'Courier New', var(--f-mono); font-size: clamp(17px, 1.6vw, 23px); line-height: 1.45; color: #1b1712; min-height: 3em; padding-right: 110px; }
.hx-card .redact { background: #121010; color: transparent; }
.hx-card .redact:hover, .hx-card .redact:focus { color: #a3231b; background: rgba(163,35,27,.12); }
.sig-hotel .ht-hint { bottom: 3vh; bottom: 3dvh; color: rgba(229,238,230,.6); }
@media (max-width: 760px) { .hx-card .ht-text { padding-right: 0; } .hx-stamp { top: auto; bottom: 46px; } .hx-pic { width: 220px; height: 140px; } }
@media (prefers-reduced-motion: reduce) { .hx-corridor { transition: none; } }

/* Starve Your Dog: the cut-paper trailer stays light (no live filters), so it runs smoothly */

/* ─────────── Starve Your Dog · « L'entretien »: through the camera's viewfinder ─────────── */
.sig-mains .sticky { background: #000; overflow: hidden; }
.vf-shots { position: absolute; inset: 0; }
/* each frame whole, letterboxed in black as the film is shot (2.35:1) */
.vf-shot { position: absolute; inset: 0; background: #000 center / contain no-repeat; opacity: 0; will-change: transform; }
/* the viewfinder: corner marks, a centre cross, recording state, timecode, the take number */
.vf-ui { position: absolute; inset: clamp(18px, 4vh, 40px) clamp(18px, 3vw, 44px); inset: clamp(18px, 4dvh, 40px) clamp(18px, 3vw, 44px); z-index: 2; pointer-events: none; color: #f4ede2; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.vf-c { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(244,237,226,.85); }
.vf-c.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; } .vf-c.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.vf-c.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; } .vf-c.br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.vf-cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  background: linear-gradient(rgba(244,237,226,.7), rgba(244,237,226,.7)) center / 100% 1px no-repeat, linear-gradient(rgba(244,237,226,.7), rgba(244,237,226,.7)) center / 1px 100% no-repeat; }
.vf-rec, .vf-tc, .vf-take, .vf-info { position: absolute; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.vf-rec { left: 46px; top: 8px; display: flex; align-items: center; gap: 8px; }
.vf-rec b { width: 10px; height: 10px; border-radius: 50%; background: #e0261b; box-shadow: 0 0 10px #e0261b; animation: blink 1s steps(2) infinite; }
.vf-tc { right: 46px; top: 8px; font-variant-numeric: tabular-nums; }
.vf-take { left: 46px; bottom: 8px; } .vf-take b { color: #e0261b; }
.vf-info { right: 46px; bottom: 8px; color: rgba(244,237,226,.6); }
/* subtitles, as on a screening copy */
.vf-sub { position: absolute; left: 50%; bottom: clamp(70px, 13vh, 120px); bottom: clamp(70px, 13dvh, 120px); z-index: 2; transform: translateX(-50%); width: min(900px, 86vw); text-align: center;
  font-family: var(--f-serif); font-size: clamp(18px, 2vw, 28px); line-height: 1.3; color: #fff; text-shadow: 0 2px 10px #000, 0 0 2px #000; }
/* between takes: black, and the slate number */

/* hands on the lens: the recording stops */
.sig-mains.is-stopped .vf-rec b { animation: none; background: #8a8a8a; box-shadow: none; }
.sig-mains.is-stopped .vf-state::after { content: ' · stop'; color: #e0261b; }
/* the end: « Coupez. », then the title */
.vf-cut { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); font-family: var(--f-display); font-weight: 900; font-size: clamp(40px, 6vw, 96px);
  text-transform: uppercase; color: #f4ede2; opacity: 0; pointer-events: none; }
.sig-mains.is-cut .vf-cut { animation: vf-cut 1.2s ease forwards; }
@keyframes vf-cut { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }
.sig-mains.is-cut .vf-ui, .sig-mains.is-cut .vf-sub { opacity: 0; transition: opacity .4s; }
.sig-mains .sd-title { z-index: 4; }
@media (prefers-reduced-motion: reduce) { .vf-rec b { animation: none; } .vf-shot { transform: none !important; } }
/* the timecode sits at the top centre (the exit sign holds the top right); « Passer » above the viewfinder's bottom line */
.vf-tc { right: auto; left: 50%; transform: translateX(-50%); }

/* ── Starve Your Dog · « L'entretien », scroll-driven like C'est eux les chiens, ending on the clapperboard ── */
.sig-mains { height: 650vh; height: 650dvh; }
.vf-shot { transition: opacity .45s ease; transform-origin: 50% 45%; }
.vf-shot.on { opacity: 1; }

/* the clapperboard: a black board with chalk lines, a striped stick hinged on the left */
.vf-clap { position: absolute; left: 50%; bottom: 10vh; bottom: 10dvh; z-index: 4; width: min(560px, 82vw); margin-left: calc(min(560px, 82vw) / -2); pointer-events: none;
  transform: translateY(130%); filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)); }
.vc-stick { position: relative; height: 46px; transform-origin: 4px 100%; }
.vc-stick i { position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, #f4ede2 0 26px, #121010 26px 52px); box-shadow: inset 0 0 0 2px #121010; }
.vc-board { padding: 18px 22px 16px; background: #141212; border: 3px solid #121010; box-shadow: inset 0 0 0 1px rgba(244,237,226,.35); color: #f4ede2; }
.vc-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid rgba(244,237,226,.6);
  font-family: var(--f-display); font-weight: 900; font-size: clamp(22px, 2.6vw, 34px); text-transform: uppercase; line-height: 1; }
.vc-title span[lang] { font-family: var(--f-ar-display); font-weight: 400; text-transform: none; color: #e0261b; }
.vc-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.vc-grid div { padding: 8px 10px; border-bottom: 1px solid rgba(244,237,226,.3); }
.vc-grid div:not(.wide):not(:nth-child(3n+1)) { border-left: 1px solid rgba(244,237,226,.3); }
.vc-grid .wide { grid-column: span 3; }
.vc-grid dt { font-size: 8px; letter-spacing: .03em; text-transform: uppercase; color: rgba(244,237,226,.55); }
.vc-grid dd { font-family: 'Courier New', var(--f-mono); font-size: 18px; margin-top: 2px; }
/* « Coupez ! », called by the director */
.vf-cut { top: 34%; display: grid; gap: 6px; justify-items: center; text-align: center; animation: none !important; }
.vf-cut .mono { font-size: 11px; letter-spacing: .03em; color: rgba(244,237,226,.65); font-family: var(--f-mono); font-weight: 400; }
.sig-mains.is-end .vf-ui, .sig-mains.is-end .vf-sub { opacity: 0; transition: opacity .4s; }
.sig-mains:not(.is-end) .vf-ui, .sig-mains:not(.is-end) .vf-sub { opacity: 1; transition: opacity .4s; }
/* the note under each take is the script supervisor's log of what is in frame, not a subtitle */
.sig-mains .vf-sub { font-family: var(--f-mono); font-size: clamp(11px, 1vw, 14px); letter-spacing: .03em; text-transform: uppercase; color: #f4ede2; }
.sig-mains .vf-sub::before { content: 'Note · '; color: #e0261b; }

/* the script supervisor's note: a small centred caption box, readable over any frame */
.sig-mains .vf-sub { left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: 86vw; transform: none;
  display: flex; align-items: center; gap: 14px; padding: 9px 18px 9px 9px; white-space: nowrap;
  font-size: clamp(10px, .95vw, 13px); letter-spacing: .03em; color: #f4ede2; text-shadow: none;
  background: rgba(10,9,8,.82); box-shadow: inset 0 0 0 1px rgba(244,237,226,.22), 0 10px 30px rgba(0,0,0,.45); backdrop-filter: blur(4px); }
.sig-mains .vf-sub::before { content: 'Note'; padding: 4px 9px; font-weight: 700; letter-spacing: .03em; color: #0b0a09; background: #e0261b; }
@media (max-width: 760px) { .sig-mains .vf-sub { white-space: normal; text-align: left; } }
/* the ending, laid out so the animation's own transforms never shift it: « Coupez ! » at the top, the clapperboard under it,
   both centred by their box, not by a transform */
.sig-mains .vf-cut { left: 0; right: 0; top: 7vh; top: 7dvh; margin: 0 auto; width: fit-content; transform: none; font-size: clamp(34px, min(5vw, 8vh), 80px); font-size: clamp(34px, min(5vw, 8dvh), 80px); }
.sig-mains .vf-clap { left: 0; right: 0; bottom: auto; top: 26vh; top: 26dvh; margin: 0 auto; width: min(520px, 82vw, 78vh); width: min(520px, 82vw, 78dvh); transform: none; visibility: hidden; }
.sig-mains .vc-board { padding: clamp(10px, 2vh, 18px) 22px clamp(8px, 1.6vh, 16px); padding: clamp(10px, 2dvh, 18px) 22px clamp(8px, 1.6dvh, 16px); }
.sig-mains .vc-grid dd { font-size: clamp(14px, 2.2vh, 18px); font-size: clamp(14px, 2.2dvh, 18px); }

/* the dossier's photographs: the film's frames on their own, full-bleed at the film's wide format, no card around them,
   a slow push-in when looked at, the caption only then */
.s-dossier .ds-img { padding: 0; border: 0; background: #000; aspect-ratio: 2.39 / 1; box-shadow: 0 34px 70px -34px rgba(0,0,0,.9); }
.s-dossier .ds-img img { transition: transform 1.6s cubic-bezier(.2,.8,.2,1); }
.s-dossier .ds-img:hover img { transform: scale(1.045); }
.s-dossier .ds-img::after { background: linear-gradient(transparent 70%, rgba(0,0,0,.5)); }
.s-dossier .ds-img figcaption { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; font-size: 9px; letter-spacing: .03em; color: rgba(255,255,255,.85); }
.s-dossier .ds-img:hover figcaption { opacity: 1; transform: none; }
#ds-fiche .ds-img { aspect-ratio: auto; }
@media (hover: none) { .s-dossier .ds-img figcaption { opacity: .8; transform: none; } }

/* The End · one frame per step */
.rb-frames { position: absolute; inset: 0; overflow: hidden; }
.sig-rebours .rb-bg { inset: 0; opacity: 0; transition: opacity .35s ease; will-change: transform; }
.sig-rebours .rb-bg.on { opacity: 1; }
.sig-rebours .rb-bg.is-wide { background-position: 30% 50%; }

/* Jahilya · a reel cut from the film's frames: quicker cuts, title cards between them */
.teaser-slides.is-reel .ts { inset: 0; animation: ts-cut 1.9s ease-out forwards; animation-delay: calc(var(--i) * 1.7s); }
@keyframes ts-cut { 0% { opacity: 0; transform: scale(1.05); } 8% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
.teaser-slides .ts-card { display: grid; place-content: center; gap: 14px; text-align: center; background: #000; }
.ts-card p { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 4.4vw, 64px); line-height: 1; color: #F2E6E6; letter-spacing: .01em; }
.ts-card .ts-ar { font-family: var(--f-ar-display); font-weight: 400; text-transform: none; color: #C0262B; }

/* ── Headbang · the bridge ── */
/* the headbang: one frame per kick, graded like the film, no flash */
.sig-pont .pf { inset: 0; transition: none; }
/* ── Headbang · the walk in the film's own frames (replaces the generated road) ── */
.sig-pont .sticky { background: #000; }
.pw, .pw-f { position: absolute; inset: 0; }
.pw-f { background: center / cover no-repeat; opacity: 0; transition: opacity .9s ease; will-change: transform; }
.pw-f.on { opacity: 1; }
/* shade only behind the words at the top and the counter at the bottom */
.pw-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 80%, rgba(0,0,0,.5)); }
.sig-pont .sticky.carded .pw { opacity: 0; transition: opacity .6s; }

/* the titles over the wait: each one rises out of a blur and settles, then dissolves into the next */
.sig-pont .bt { transform: translateX(-50%) translateY(18px); filter: blur(8px); letter-spacing: .04em;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), filter .9s ease, letter-spacing 1.4s ease; }
.sig-pont .bt.on { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .sig-pont .bt { transform: translateX(-50%); filter: none; transition: opacity .3s; } }

/* the end of the bridge: his face alone, full frame, no card */

/* the bridge ends on black after the headbang: a shorter scene, so the black doesn't linger */
.sig-pont { height: 450vh; height: 450dvh; }

/* dossier quote cards: the film's own label icon replaces the small rule (they used to stack, icon under the line) */
#screening:is([data-film="the-end"], [data-film="dogs"], [data-film="sea"], [data-film="starve"], [data-film="headbang"]) .s-dossier .ds-k.v-label::before { width: auto; height: auto; background: none; }
/* the opening guillemet sits in the quote itself, not as a large mark beside it */
.ds-card.ds-quote { padding-left: clamp(22px, 3vw, 40px); }
.ds-card.ds-quote::before { content: none; }

/* ── the small labels of the film pages (« Lasri, sur le cinéma », the dossier's kickers, the quote's source): set in the
   display face instead of the typewriter, and led by each film's own mark instead of the same red rule everywhere:
   a rewind for The End, the crew's REC light for the dogs, a wave for the sea, scissors for Starve's cut paper, the
   orange armband for Headbang, a cross for Jahilya, a star sticker for Cathy, the key number for Satan ── */
#screening { --mark: '·'; --mark-c: currentColor; }
#screening[data-film="the-end"] { --mark: '◀︎◀︎'; }
#screening[data-film="dogs"] { --mark: '●'; --mark-c: #ff4b4b; }
#screening[data-film="sea"] { --mark: '≈'; }
#screening[data-film="starve"] { --mark: '✂︎'; }
#screening[data-film="headbang"] { --mark: '▬'; --mark-c: #E8892E; }
#screening[data-film="jahilya"] { --mark: '✕'; --mark-c: #c0262c; }
#screening[data-film="badass"] { --mark: '★'; --mark-c: #F2D43A; }
#screening[data-film="satan"] { --mark: '666'; }
#screening .v-label, #screening .s-dossier .ds-k { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
#screening .v-label::before, #screening .s-dossier .ds-k::before, #screening[data-film] .v-label::before {
  content: var(--mark); width: auto; height: auto; background: none; font-family: var(--f-display); font-size: 12px; letter-spacing: .04em; color: var(--mark-c); }
#screening[data-film="sea"] .v-label::after { content: none; }
#screening .v-src, #screening .ds-quote .v-src { font-family: var(--f-serif); font-style: italic; font-size: 14px; letter-spacing: 0; text-transform: none; }
#screening .ds-card.ds-quote .v-src::before { content: var(--mark); width: auto; height: auto; background: none; font-style: normal; font-family: var(--f-display); font-size: 12px; color: var(--mark-c); }
#screening .v-quote[dir="rtl"] { text-align: right; }
#screening .v-quote[dir="rtl"] .tr { text-align: left; }

/* ── phones: the pictures of the scenes keep their true, horizontal shape — full width, centred, like a video watched
   upright — instead of being cropped to fill the tall screen; the words sit in the dark above and below ── */
@media (max-width: 760px) {
  /* …except Moroccan Badass Girl and Thank You Satan, whose scenes stay upright, filling the screen */
  #screening:not([data-film="badass"]):not([data-film="satan"]) :is(.s-story .bg, .rb-bg, .rp-img, .co-img, .sx-shot, .cp-face, .pf, .teaser-slides .ts) {
    inset: 0; background-size: 100% auto; background-position: center; background-repeat: no-repeat; }
  /* the viewfinder (Starve Your Dog): the take count and the film's line each get their own row */
  .vf-take { left: 16px; bottom: 30px; }
  .vf-info { left: 16px; right: auto; bottom: 10px; }
  /* the countdown (The End): the strip of frames stays clear of the exit and the timecode */
  .rb-strip { top: 120px; right: 8px; width: 58px; }
  .rb-head { top: 76px; left: 14px; font-size: 11px; }
}
@media (max-width: 760px) { .vf-rec { left: 16px; } .vf-tc { left: 16px; right: auto; top: 30px; } }

/* phones: the title's picture stays full screen, framed on the actors' faces (measured on each still) */
@media (max-width: 760px) {
  #screening[data-film="the-end"] .s-title .bg { background-position: 70% 30%; }
  #screening[data-film="dogs"] .s-title .bg { background-position: 26% 30%; }
  #screening[data-film="sea"] .s-title .bg { background-position: 68% 30%; }
  #screening[data-film="starve"] .s-title .bg { background-position: 69% 40%; }
  #screening[data-film="headbang"] .s-title .bg { background-position: 28% 35%; }
  #screening[data-film="jahilya"] .s-title .bg { background-position: 47% 40%; }
  #screening[data-film="badass"] .s-title .bg { background-position: 53% 40%; }
  #screening[data-film="satan"] .s-title .bg { background-position: 76% 30%; }
}

/* The End, read backwards: the big lines keep clear of the reel on the right, set a size smaller so a long line holds
   in its column; the heading in the book face, the rewind sign in the film's light */
.rb-year, .rb-text { margin-right: calc(clamp(70px, 9vw, 130px) + clamp(16px, 4vw, 60px) + clamp(12px, 3vw, 40px)); }
.rb-text { font-size: clamp(34px, 5.4vw, 96px); line-height: .92; max-width: 14ch; text-wrap: balance; }
.rb-head { font-family: var(--f-serif); font-size: clamp(16px, 1.4vw, 20px); letter-spacing: 0; text-transform: none; color: #ECECEC; }
.rb-head b { font-family: var(--f-display); font-weight: 900; color: var(--hb-amber, #A0835C); margin-right: 4px; }
.rb-head i { color: #A1A1A1; }
@media (max-width: 760px) {
  .rb-year, .rb-text { margin-right: 76px; margin-left: 14px; }
  .rb-text { font-size: clamp(28px, 9vw, 40px); }
  .rb-head { top: 76px; left: 14px; font-size: 15px; }
}

/* ── C'est eux les chiens: the camera's battery drawn, not typed; the name of who is filmed as a news lower-third —
   a white bar with the name, a strip in the film's light with what it is, read in the book face ── */
.rp-cell { display: inline-grid; grid-template-columns: repeat(4, 4px); gap: 2px; height: 10px; padding: 2px 4px 2px 2px; margin-right: 6px; vertical-align: -1px;
  border: 1.5px solid #fff; position: relative; }
.rp-cell::after { content: ''; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: #fff; }
.rp-cell i { background: #fff; } .rp-cell i:last-child { background: transparent; }
.rp-batt, .rp-take { text-transform: none; letter-spacing: .02em; }
.rp-lower { display: grid; padding: 0; background: none; border: 0; box-shadow: none; }
.rp-who { padding: 8px 16px 6px; background: #F4EFE6; color: #111; font-size: clamp(26px, 3vw, 46px); }
.rp-role { justify-self: start; margin: 0; padding: 5px 16px 6px; background: var(--hb-amber, #A0835C); color: #111;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(15px, 1.3vw, 19px); letter-spacing: 0; text-transform: none; }

@media (max-width: 760px) {
  /* the reportage: everything sits on the picture's band, the labels each on their own line */
  .rp-vf { inset: calc(50% - 30vw) 10px; }
  .rp-rec { top: calc(50% - 30vw + 10px); left: 22px; font-size: 12px; }
  .rp-tc { top: calc(50% - 30vw + 10px); right: 22px; font-size: 12px; }
  .rp-take { bottom: calc(50% - 30vw - 24px); left: 14px; }
  .rp-batt { bottom: calc(50% - 30vw - 44px); left: 14px; right: auto; }
  .rp-lower { left: 10px; bottom: calc(50% - 30vw + 14px); max-width: calc(100% - 20px); }
  .rp-who { font-size: 24px; padding: 6px 12px 4px; }
  .rp-role { font-size: 14px; padding: 4px 12px 5px; }
  .rp-line { bottom: 14vh; bottom: 14dvh; font-size: 14px; }
  /* The Sea: the cart rolls along the bottom of the picture, not in the dark under it */
  .co-cart, .co-cart:has(.has-asset) { width: 46vw; bottom: calc(50% - 28.125vw - 2px); }
  /* Headbang Lullaby: the lines sit in the middle of the screen, over the picture whichever way it is framed */
  .bridge-text { top: 50%; }
  .sig-pont .bt { translate: 0 -50%; font-size: 34px; }
}

/* C'est eux les chiens · the lower-third of a news report: the channel's bug in a square, a red tab, the name on a
   white bar, the caption on a dark strip — and the last take, the one the broadcast never aired, goes grey */
.rp-lower { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.rp-bug { display: grid; place-content: center; margin: 0; padding: 0 12px; background: #111; color: #F4EFE6; border-top: 4px solid #E8352B;
  font: 900 clamp(15px, 1.4vw, 20px)/.85 var(--f-display); text-transform: uppercase; text-align: center; }
.rp-bug b { display: block; color: #E8352B; font-weight: 900; }
.rp-bars { display: grid; justify-items: start; }
.rp-tag { margin: 0; padding: 3px 10px 2px; background: #E8352B; color: #fff; font: 800 clamp(12px, 1vw, 14px)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.rp-who { justify-self: stretch; margin: 0; padding: 6px 18px 4px 14px; background: #F4EFE6; color: #111; font-size: clamp(26px, 3vw, 46px); }
.rp-role { justify-self: stretch; margin: 0; padding: 5px 18px 6px 14px; background: rgba(10,10,14,.92); color: #F4EFE6;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(15px, 1.3vw, 19px); letter-spacing: 0; text-transform: none; }
.rp-lower.is-cut .rp-tag { background: #6b6b6b; }
.rp-lower.is-cut .rp-bug { border-top-color: #6b6b6b; }
.rp-lower.is-cut .rp-bug b { color: #9a9a9a; }
.rp-lower.is-cut .rp-who { background: #d9d4cb; color: #3a3a3a; }
@media (max-width: 760px) {
  .rp-bug { padding: 0 8px; font-size: 13px; }
  .rp-tag { font-size: 11px; padding: 2px 8px 1px; }
  .rp-who { font-size: 24px; padding: 5px 12px 3px 10px; }
  .rp-role { font-size: 14px; padding: 4px 12px 5px 10px; }
}
/* the lower-third, smaller: a caption on the picture, not a headline */
.rp-bug { padding: 0 9px; font-size: clamp(12px, 1vw, 15px); border-top-width: 3px; }
.rp-tag { font-size: clamp(10px, .8vw, 12px); padding: 2px 8px 1px; }
.rp-who { font-size: clamp(18px, 1.8vw, 28px); padding: 4px 14px 3px 10px; }
.rp-role { font-size: clamp(12px, 1vw, 15px); padding: 3px 14px 4px 10px; }
@media (max-width: 760px) {
  .rp-bug { padding: 0 6px; font-size: 11px; }
  .rp-tag { font-size: 9px; padding: 1px 6px; }
  .rp-who { font-size: 18px; padding: 3px 10px 2px 8px; }
  .rp-role { font-size: 12px; padding: 3px 10px 4px 8px; }
}

/* ── the dossier's opening, its festivals and its faces ── */
/* « Avant la séance »: the synopsis set like a programme note, open, no box */
.ds-intro { display: grid; gap: clamp(16px, 2.4vh, 24px); gap: clamp(16px, 2.4dvh, 24px); font-family: var(--f-serif); font-size: clamp(19px, 2vw, 30px); padding: clamp(6px, 1vw, 14px) 0 clamp(20px, 3vh, 36px); padding: clamp(6px, 1vw, 14px) 0 clamp(20px, 3dvh, 36px); } /* a standfirst: the full width of the dossier, as the photograph and the fiche below */
/* the label runs like a strip of film leader: the words, a row of sprocket holes, the Arabic at its end */
.ds-intro-k { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--glow); white-space: nowrap; }
.ds-intro-k::after { content: ''; order: 1; flex: 1; height: 10px; opacity: .55;
  border-block: 1px solid color-mix(in srgb, var(--glow) 45%, transparent);
  background: repeating-linear-gradient(90deg, transparent 0 7px, var(--glow) 7px 11px) center / 100% 4px no-repeat; }
.ds-intro-k [lang="ar"] { order: 2; font-family: var(--f-ar); font-size: 16px; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--hb-paper) 55%, transparent); }
.ds-intro-text { line-height: 1.5; text-wrap: pretty; }
.ds-intro-text::first-letter { float: left; font-family: var(--f-display); font-weight: 900; font-size: 3.5em; line-height: .8;
  padding: .07em .1em 0 0; color: var(--glow); }

/* the festivals: one line, as a poster lists them, and a quiet way to the whole Palmarès */
.ds-strip { align-items: baseline; justify-content: space-between; gap: 18px 40px; padding-top: 22px; }
.ds-fest { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 8px; margin: 0; }
/* the label speaks at the names' size, in the book face: « Sélections », as a poster says « Sélection officielle » */
.ds-fest-k { font-family: var(--f-serif); font-style: italic; font-size: clamp(20px, 1.75vw, 26px); line-height: 1; color: var(--glow); margin-right: 18px; }
.ds-fest-i { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.1; letter-spacing: .02em; }
.ds-fest-i:not(:last-child)::after { content: '·'; margin: 0 .5em; font-weight: 400; color: var(--glow); } /* the dot ends a line, never starts one */
.ds-to-palm { display: inline-flex; align-items: baseline; gap: 14px; padding: 2px 0 8px; cursor: pointer;
  font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 1.5vw, 22px); color: var(--hb-paper);
  border-bottom: 1px solid color-mix(in srgb, var(--glow) 45%, transparent); transition: border-color .3s; }
.ds-to-palm .mono { font-style: normal; font-size: 10px; letter-spacing: .03em; color: var(--glow); }
.ds-to-palm i { display: inline-block; font-style: normal; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ds-to-palm:hover, .ds-to-palm:focus-visible { border-color: var(--glow); outline: none; }
.ds-to-palm:hover i, .ds-to-palm:focus-visible i { transform: translateX(6px); }

/* the faces: each one a framed photograph, name plate inside the frame; turned over, a « carte de tournage » */
.ds-cast { grid-template-columns: repeat(auto-fill, minmax(min(172px, 44%), 1fr)); gap: 36px 26px; padding: 8px 6px 0; }
.ds-person { display: block; perspective: 1100px; outline: none; cursor: pointer; }
.ds-idc { display: grid; transform: rotate(var(--tilt, 0deg)); transition: transform .75s cubic-bezier(.2,.8,.2,1); }
.ds-front { transform: perspective(1100px) rotateY(var(--turn, 0deg)); transition: transform .75s cubic-bezier(.2,.8,.2,1); }
.ds-person:nth-child(3n + 1) { --tilt: -.6deg; }
.ds-person:nth-child(3n + 2) { --tilt: .45deg; }
.ds-person:nth-child(5n) { --tilt: -.25deg; }
@media (hover: hover) and (pointer: fine) { .ds-person:hover { --tilt: 0deg; --turn: 180deg; } }
@media (hover: none) { .ds-person.is-turned { --tilt: 0deg; --turn: 180deg; } }
.ds-person:focus-visible { --tilt: 0deg; --turn: 180deg; }
.ds-front, .ds-back { grid-area: 1 / 1; min-width: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ds-idc { position: relative; }
.ds-back { position: absolute !important; inset: 0; }

/* front: a dark moulding, a thin gilt line, a mat in the film's paper, the photograph and its name plate */
.ds-front { --mat: clamp(7px, .7vw, 10px); display: grid; gap: var(--mat); padding: var(--mat);
  background: color-mix(in srgb, var(--hb-paper) 58%, var(--g-deep, #15130d));
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 0 5px color-mix(in srgb, var(--g-deep, #15130d) 55%, #000),
    0 0 0 6px color-mix(in srgb, var(--glow) 45%, transparent), 0 26px 38px -20px rgba(0,0,0,.9); }
.ds-person .ds-ph { border: 0; box-shadow: none; }
.ds-person .ds-ph::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 1px 6px rgba(0,0,0,.55); }
.ds-person:hover .ds-ph img { transform: none; }
.ds-plate { display: grid; gap: 2px; padding: 2px 2px 3px; color: var(--g-deep, #15130d); text-align: center; }
.ds-plate b { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 15px; line-height: 1; }
.ds-plate .ds-role { font-family: var(--f-serif); font-style: italic; font-size: 13px; line-height: 1.15; color: inherit; opacity: .75; }

/* back: a set pass in the film's light — guilloche lines, a censored field, a thumbprint, the opening's visa stamp */
.ds-back { transform: perspective(1100px) rotateY(calc(var(--turn, 0deg) - 180deg)); transition: transform .75s cubic-bezier(.2,.8,.2,1); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  padding: 0 9px 7px; gap: 6px; border-radius: 5px; color: #1b1712;
  background: repeating-radial-gradient(circle at 115% -12%, transparent 0 6px, color-mix(in srgb, var(--glow) 16%, transparent) 6px 7px),
    repeating-linear-gradient(-28deg, transparent 0 11px, color-mix(in srgb, var(--g-mid, #9E5450) 7%, transparent) 11px 12px),
    linear-gradient(160deg, color-mix(in srgb, var(--hb-paper) 94%, #fff), color-mix(in srgb, var(--hb-paper) 68%, var(--glow)));
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 26px 38px -20px rgba(0,0,0,.9); }
.idc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; white-space: nowrap; margin: 0 -9px; padding: 6px 9px;
  background: var(--g-deep, #15130d); color: var(--glow); font-size: 8px; letter-spacing: .03em; text-transform: uppercase; }
.idc-h [lang="ar"] { font-family: var(--f-ar); font-size: 12px; letter-spacing: 0; color: var(--hb-paper); }
.idc-body { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 9px; align-items: start; }
.idc-ph { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--g-deep, #15130d); box-shadow: 0 0 0 1px rgba(0,0,0,.45); display: grid; place-items: center; }
.idc-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1) contrast(1.15); }
/* the card's ink line runs across the photo, as on a real card */
.idc-ph::after { content: ''; position: absolute; inset: auto -10% 14% -10%; height: 9px; transform: rotate(-8deg);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--glow) 55%, transparent) 0 2px, transparent 2px 5px); mix-blend-mode: multiply; }
.idc-ph span { font-family: var(--f-display); font-weight: 900; font-size: 22px; color: var(--glow); }
.idc-f { display: grid; gap: 4px; margin: 0; }
.idc-n dd { font-size: 8px; letter-spacing: .03em; opacity: .75; }
.idc-f dt { font-size: 7px; letter-spacing: .03em; text-transform: uppercase; opacity: .6; }
.idc-f dd { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 12px; line-height: 1.05; overflow-wrap: anywhere; }
/* censorship as form: the field is there, its content blacked out */
.idc-red { position: relative; margin-top: 2px; height: 11px; background: #111; transform: rotate(-1deg); }
.idc-red i { position: absolute; right: 4px; top: 1px; font-family: var(--f-mono); font-style: normal; font-weight: 400; font-size: 6.5px; letter-spacing: .03em;
  padding: 1px 3px; color: #a3101a; border: 1px solid #a3101a; background: color-mix(in srgb, var(--hb-paper) 85%, transparent); transform: rotate(6deg); }
.idc-also { font-family: var(--f-serif); font-size: 11.5px; line-height: 1.2; }
.idc-also .mono { display: block; font-size: 7px; letter-spacing: .03em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.idc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.idc-print { display: grid; justify-items: center; gap: 2px; width: 40px; color: color-mix(in srgb, var(--g-mid, #9E5450) 70%, #1b1712);
  transform: rotate(calc(-12deg + var(--i, 0) * 23deg)); }
.idc-print .mono { font-size: 6px; letter-spacing: .03em; text-transform: uppercase; opacity: .55; color: #1b1712; }
.idc-print svg { width: 30px; height: auto; opacity: .7; mix-blend-mode: multiply; }
.idc-stamp { display: grid; place-items: center; align-content: center; width: 52px; height: 52px; margin-bottom: -2px; border-radius: 50%;
  border: 1.5px double color-mix(in srgb, var(--g-mid, #9E5450) 85%, #000); outline: 1px solid color-mix(in srgb, var(--g-mid, #9E5450) 60%, transparent); outline-offset: -5px;
  color: color-mix(in srgb, var(--g-mid, #9E5450) 85%, #000); font-size: 6px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; text-align: center;
  transform: rotate(calc(-18deg + var(--i, 0) * 11deg)); opacity: .62; mix-blend-mode: multiply; }
.idc-stamp b { display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0; }
.idc-mrz { font-size: 7.5px; letter-spacing: .05em; line-height: 1.3; white-space: nowrap; overflow: hidden; margin-right: -9px; opacity: .7; }
.ds-back .ds-credit { color: rgba(27,23,18,.55); margin: 0; }
/* the glass catches the light where the camera (the cursor) is */
.ds-front { position: relative; }
.ds-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.28), rgba(255,255,255,.06) 28%, transparent 55%); mix-blend-mode: soft-light; }
.ds-person:hover .ds-glare { opacity: 1; }
/* while it turns, the card lifts off the wall */
.ds-person:hover .ds-idc, .ds-person:focus-visible .ds-idc, .ds-person.is-turned .ds-idc { animation: idc-lift .75s cubic-bezier(.2,.8,.2,1); }
@keyframes idc-lift { 50% { scale: 1.06; } }
.no-ph .ds-ph { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 60%), var(--card); }
@media (prefers-reduced-motion: reduce) { .ds-idc, .ds-front, .ds-back, .ds-to-palm i, .ds-glare { transition: none; animation: none !important; } }

/* ── « Regarder le film »: the same ticket as the trailer's, in the film's colour, at full size. Pointed at, it straightens and
   its stub starts to tear. ──────────────────────────────────────────────────────────────────────────────────────────── */
#screening { --rf-ink: #0b0a09; }
#screening[data-film="jahilya"] { --rf-ink: #f4ead8; }
.rf { display: grid; justify-items: start; gap: 14px; width: 100%; }
.s-title .rf { margin-top: 22px; }
.ds-actions > .rf, .ds-actions > .rf-side { flex: 1 0 100%; }
.rf-btn { --bite: 9px; display: grid; grid-template-columns: 84px 1fr; align-items: stretch; width: 100%; max-width: 420px; min-height: 96px; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--rf-ink); text-align: left; text-decoration: none; cursor: pointer; transform: rotate(-1.2deg); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.rf-stub, .rf-words { background-color: var(--hb-amber); }
.rf-stub { display: grid; place-items: center; border-right: 2px dashed var(--rf-ink); transition: transform .25s cubic-bezier(.2,.8,.2,1);
  -webkit-mask: radial-gradient(circle var(--bite) at 100% 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--bite) at 100% 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--bite) at 100% 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--bite) at 100% 100%, #0000 96%, #000) bottom / 100% 51% no-repeat; }
.rf-stub svg { width: 40px; height: 40px; fill: var(--rf-ink); }
.rf-words { display: grid; align-content: center; justify-items: center; text-align: center; gap: 1px; padding: 10px 18px;
  -webkit-mask: radial-gradient(circle var(--bite) at 0 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--bite) at 0 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--bite) at 0 0, #0000 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--bite) at 0 100%, #0000 96%, #000) bottom / 100% 51% no-repeat; }
.rf-btn .rf-words i { font-family: var(--f-serif); font-size: 15px; line-height: 1.1; letter-spacing: normal; text-transform: none; }
.rf-words b { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 40px; line-height: 1; }
.rf-btn .rf-words small { font-family: var(--f-serif); font-size: 17px; line-height: 1.2; font-weight: 400; letter-spacing: normal; text-transform: none; }
.rf-btn:hover, .rf-btn:focus-visible { transform: rotate(0); }
.rf-btn:hover .rf-stub, .rf-btn:focus-visible .rf-stub { transform: translateX(-6px) rotate(-3deg); }
.rf-btn:active { transform: rotate(0) scale(.985); }
.rf-btn:focus-visible, .rf-x:focus-visible, .rf-alt:focus-visible, .rf-side:focus-visible { outline: 3px solid #f4ead8; outline-offset: 3px; }
.rf-off { display: grid; gap: 2px; width: 100%; max-width: 420px; padding: 14px 16px; border: 2px dashed var(--hb-paper); color: #f4ead8; }
.rf-off b { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; }
.rf-off small { font-family: var(--f-serif); font-size: 17px; line-height: 1.25; }
.rf-note { max-width: 420px; font-size: 17px; line-height: 1.35; color: #f4ead8; }
/* what else there is to see: one quiet line beneath the ticket */
.rf-side { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; max-width: 420px; min-height: 52px; padding: 8px 16px;
  border: 1px solid var(--hb-amber); font-family: var(--f-serif); font-size: 18px; line-height: 1.2; color: #f4ead8; text-decoration: none; transition: background-color .15s, color .15s; }
.rf-side:hover { background-color: var(--hb-amber); color: var(--rf-ink); }
.ds-actions { gap: 12px; }
.rf-alt { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-serif); font-size: 17px; color: #f4ead8; text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: 4px; }

/* the room: the film as large as the screen allows; the bars come and go over it */
.rf-watching :is(#signal, #grain, #remote, .pn-open, .pn-next) { visibility: hidden; }
.rf-room { position: fixed; inset: 0; z-index: 60; background: #000; color: #f4ead8; }
.rf-screen { position: absolute; inset: 0; display: grid; place-items: center; }
.rf-screen iframe { display: block; border: 0; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; }
.rf-sheet { display: none; position: absolute; inset: 0; z-index: 1; cursor: none; }
.rf-room.is-idle .rf-sheet { display: block; }
.rf-bar, .rf-foot { position: absolute; left: 0; right: 0; z-index: 2; transition: opacity .3s, visibility .3s; }
.rf-room.is-idle :is(.rf-bar, .rf-foot) { opacity: 0; visibility: hidden; }
.rf-bar { top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px clamp(16px, 3vw, 32px); background: #000; }
.rf-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; min-width: 0; }
.rf-name b { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 24px; line-height: 1.1; }
.rf-name span { font-family: var(--f-serif); font-size: 17px; }
.rf-x { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 0; background: #f4ead8; color: #120f0a;
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 20px; cursor: pointer; }
.rf-x span { font-size: 28px; line-height: 1; }
.rf-x:hover { background: #fff; }
/* inside the top bar, so that YouTube's own controls at the foot of the picture stay free */
.rf-foot { top: 0; left: 300px; right: 150px; height: 64px; display: flex; align-items: center; justify-content: flex-end; gap: 0 28px; line-height: 1.15; }
.rf-joke { font-family: var(--f-serif); font-style: italic; font-size: 16px; color: var(--hb-paper); }
.rf-refused { display: grid; justify-items: center; gap: 16px; width: min(100%, 512px); padding: 16px; text-align: center; font-size: 20px; }
/* a phone held upright: black above and below the picture, so the second bar goes to the foot */
@media (max-aspect-ratio: 1 / 1) {
  .rf-foot { top: auto; bottom: 0; left: 0; right: 0; height: auto; display: block; padding: 4px 16px max(8px, env(safe-area-inset-bottom)); background: #000; }
}
/* a narrower screen on its side: the joke gives way */
@media (min-aspect-ratio: 1 / 1) and (max-width: 1100px) {
  .rf-joke { display: none; }
}
/* phones: the ticket spans the width, and the title card makes room for it */
@media (max-width: 760px) {
  .rf-btn { --bite: 6px; max-width: 262px; min-height: 62px; grid-template-columns: 44px 1fr; }
  .rf-stub svg { width: 20px; height: 20px; }
  .rf-words { padding: 5px 10px; }
  .rf-words b { font-size: 23px; }
  .rf-btn .rf-words i { font-size: 12px; }
  .rf-btn .rf-words small { font-size: 13px; }
  .rf-side, .rf-note { max-width: 262px; }
  .s-title .card { bottom: 56px; }
  .s-title .t-log { font-size: 18px; margin-top: 10px; }
  .s-title .rf { margin-top: 16px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .s-title .t-log { display: none; }
}

/* end credits: each role in the film's tall capitals, as on a real crawl */
.cr-r p.mono { font-family: var(--f-display); font-weight: 700; font-size: clamp(13px, 1vw, 15px); letter-spacing: .1em; margin-bottom: 4px; }

/* « Regarder le film »: the ticket on the left, the other ways to watch beside it */
.ds-actions { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); row-gap: 6px; align-items: center; }
.ds-actions > .rf { display: contents; }
.ds-actions :is(.rf-btn, .rf-off) { grid-column: 1; grid-row: 1 / span 4; }
.ds-actions :is(.rf-side, .rf-note, .rf-alt) { grid-column: 2; justify-self: start; max-width: 520px; }
.ds-actions .rf-side { min-height: 0; width: auto; gap: 14px; justify-content: flex-start; padding: 10px 0 8px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--glow) 45%, transparent);
  font-style: italic; font-size: clamp(18px, 1.5vw, 22px); color: var(--hb-paper); background: none; transition: border-color .3s, color .3s; }
.ds-actions .rf-side:hover, .ds-actions .rf-side:focus-visible { background: none; color: #fff; border-color: var(--glow); }
@media (max-width: 760px) {
  .ds-actions { grid-template-columns: 1fr; }
  .ds-actions :is(.rf-btn, .rf-off, .rf-side, .rf-note, .rf-alt) { grid-column: 1; grid-row: auto; }
}

/* ── « La revue de presse »: an index, as at the back of a festival catalogue. One line per source; pointed at, a frame
   of the film shows through it like a projector's beam, and the line takes the film's light ── */
.pr-index { list-style: none; border-top: 1px solid var(--line); counter-reset: pr; }
.pr-row { position: relative; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; counter-increment: pr; }
.pr-row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--still) center 35% / cover no-repeat; opacity: 0;
  filter: grayscale(.3) contrast(1.1); transform: scale(1.06); transition: opacity .5s, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.pr-row::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: linear-gradient(90deg, var(--g-deep, #0b0a09) 8%, color-mix(in srgb, var(--g-deep, #0b0a09) 55%, transparent) 45%, color-mix(in srgb, var(--g-deep, #0b0a09) 85%, transparent)); }
.pr-row:hover::before, .pr-row:focus-within::before { opacity: .55; transform: scale(1); }
.pr-row:hover::after, .pr-row:focus-within::after { opacity: 1; }
.pr-line { flex: 1; min-width: 0; display: grid; grid-template-columns: 34px 128px minmax(0, auto) minmax(0, 1fr) auto; align-items: baseline; gap: 6px 22px;
  padding: clamp(14px, 2.2vh, 22px) 4px; padding: clamp(14px, 2.2dvh, 22px) 4px; color: var(--hb-paper); text-decoration: none; outline: none; }
.pr-line::before { content: counter(pr, decimal-leading-zero); font-family: var(--f-mono); font-size: 10px; color: var(--glow); opacity: .7; }
.pr-kind { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--glow); }
.pr-out { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 40px); line-height: .95; letter-spacing: .005em;
  transition: color .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.pr-head { font-family: var(--f-serif); font-style: italic; font-size: clamp(16px, 1.3vw, 20px); color: color-mix(in srgb, var(--hb-paper) 70%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-src { justify-self: end; display: flex; align-items: baseline; gap: 12px; font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hb-paper) 55%, transparent); white-space: nowrap; }
.pr-go { font-size: 16px; color: var(--glow); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pr-line:hover .pr-out, .pr-line:focus-visible .pr-out { color: var(--glow); transform: translateX(10px); }
.pr-line:hover .pr-go, .pr-line:focus-visible .pr-go { transform: translate(4px, -4px); }
.pr-line:focus-visible { box-shadow: inset 3px 0 0 var(--glow); }
.pr-ch { flex: none; margin-right: 4px; padding: 8px 0; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--hb-paper);
  border-bottom: 1px solid var(--glow); cursor: pointer; }
.pr-ch:hover, .pr-ch:focus-visible { color: var(--glow); outline: none; }
/* a narrower screen: the kind and the site move under the name */
@media (max-width: 900px) {
  .pr-line { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .pr-kind { grid-column: 2; grid-row: 1; }
  .pr-out { grid-column: 2 / -1; grid-row: 2; }
  .pr-head { grid-column: 2 / -1; grid-row: 3; white-space: normal; }
  .pr-src { grid-column: 2 / -1; grid-row: 4; justify-self: start; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; }
  .pr-line::before { grid-row: 1; }
  .pr-row { flex-wrap: wrap; gap: 0; }
  .pr-ch { margin: 0 0 16px 52px; }
}
@media (prefers-reduced-motion: reduce) { .pr-row::before, .pr-out, .pr-go { transition: none; } }

/* ── the chapters as the film's reels: a strip of five frames from the film, sprocket holes running as the page scrolls,
   the strip's edge printed with the film and the reel that is on ── */
.ds-rail { --hole: color-mix(in srgb, var(--hb-paper) 22%, transparent); position: sticky; top: 96px; align-self: start; z-index: 3;
  display: grid; gap: 8px; width: 64px; padding: 14px 13px; background: color-mix(in srgb, var(--g-deep, #0b0a09) 70%, #000);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 18%, transparent), 0 30px 50px -30px #000; }
/* the perforations, both edges; they run with the reading */
.ds-rail::before, .ds-rail::after { content: ''; position: absolute; top: 0; bottom: 0; width: 5px; pointer-events: none; }
.ds-rail::before { left: 4px; } .ds-rail::after { right: 4px; }
.ds-rail::before, .ds-rail::after { background: repeating-linear-gradient(transparent 0 3px, var(--hole) 3px 8px, transparent 8px 12px); background-position: 0 calc(var(--rp, 0) * -360px); }
/* the edge print, as on real film stock */
/* the edge print, as exposed along real film stock: amber light, condensed capitals, key marks between the parts */
.rl-edge { position: absolute; top: 12px; right: -17px; writing-mode: vertical-rl; white-space: nowrap; pointer-events: none;
  font-family: var(--f-display); font-weight: 700; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; max-height: calc(100% - 24px); overflow: hidden;
  color: #e0a04a; opacity: .62; text-shadow: 0 0 3px rgba(224,160,74,.55), 0 0 1px rgba(224,160,74,.9); }
.rl-edge b { font-weight: 900; letter-spacing: .08em; }
.rl-edge i { font-style: normal; font-size: 6px; margin: 4px 0; opacity: .8; }
.rl-now { opacity: 1; color: #f2b860; }
/* each reel: a frame of the film, its number over it */
.ds-rail button { position: relative; display: grid; place-items: center; width: 38px; aspect-ratio: 3 / 4; padding: 0; cursor: pointer;
  isolation: isolate; color: var(--hb-paper); box-shadow: 0 0 0 1px rgba(0,0,0,.6); outline: none; transition: box-shadow .4s; }
/* the frame itself: dimmed and grey until its reel is on (the name beside it keeps its own light) */
.ds-rail button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--f) center / cover no-repeat; filter: grayscale(1) brightness(.45); transition: filter .4s; }
.ds-rail button b { font-family: var(--f-display); font-weight: 900; font-size: 20px; line-height: 1; text-shadow: 0 1px 6px #000; }
.ds-rail button:hover::before, .ds-rail button:focus-visible::before { filter: grayscale(.4) brightness(.8); }
.ds-rail button.on::before { filter: none; }
.ds-rail button.on { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 0 3px var(--glow); }
.ds-rail button.on b { color: #fff; }
/* the reel's name slides out beside the strip */
.rl-name { position: absolute; left: calc(100% + 24px); top: 50%; display: grid; gap: 2px; padding: 8px 12px; white-space: nowrap; pointer-events: none;
  background: color-mix(in srgb, var(--g-deep, #0b0a09) 92%, #000); box-shadow: inset 2px 0 0 var(--glow);
  font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--hb-paper); text-align: left;
  opacity: 0; transform: translate(-8px, -50%); transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.rl-name i { font-style: normal; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--glow); }
.ds-rail button:hover .rl-name, .ds-rail button:focus-visible .rl-name { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) { .ds-rail button, .ds-rail button::before, .rl-name { transition: none; } }

/* the reel strip, a size down: a quiet guide in the margin, not a second picture beside the text */
@media (min-width: 1001px) { .s-dossier { grid-template-columns: 44px minmax(0, 1fr); } }
.ds-rail { gap: 5px; width: 44px; padding: 10px 9px; }
.ds-rail::before, .ds-rail::after { width: 3px; }
.ds-rail::before { left: 3px; } .ds-rail::after { right: 3px; }
.ds-rail button { width: 26px; }
.ds-rail button b { font-size: 13px; }
.rl-edge { right: -13px; font-size: 7px; opacity: .45; }
.rl-edge i { font-size: 5px; margin: 3px 0; }
.rl-name { left: calc(100% + 18px); font-size: 15px; }

/* on a phone the reel gives way to a bar of chapters along the top, as the Gazette's rubrics: names in capitals, the one
   being read underlined, the bar sliding sideways when the names run past the edge */
@media (max-width: 1000px) {
  .ds-rail { display: flex; position: sticky; top: 0; z-index: 6; width: auto; gap: 0; padding: 0; margin: 0 calc(-1 * clamp(16px, 5vw, 80px)) 8px;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; background: color-mix(in srgb, var(--g-deep, #0b0a09) 94%, #000);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--glow) 25%, transparent); }
  .ds-rail::-webkit-scrollbar { display: none; }
  .ds-rail::before, .ds-rail::after, .rl-edge, .ds-rail button::before, .ds-rail button b, .rl-name i { display: none; }
  .ds-rail button { flex: none; width: auto; aspect-ratio: auto; padding: 14px 14px 12px; box-shadow: none; }
  .ds-rail button:first-child { margin-left: clamp(4px, 3vw, 66px); }
  .ds-rail button.on { box-shadow: inset 0 -2px 0 var(--glow); }
  .rl-name { position: static; display: block; padding: 0; opacity: 1; transform: none; background: none; box-shadow: none;
    font-family: var(--f-display); font-style: normal; font-weight: 700; font-size: 16px; letter-spacing: .02em; text-transform: uppercase;
    color: color-mix(in srgb, var(--hb-paper) 62%, transparent); transition: color .25s; }
  .ds-rail button.on .rl-name { color: var(--glow); }
}

/* phones · the press review uses the whole width: the number and the kind share the first line, then the name,
   the headline and the source run edge to edge, so long names wrap as lines, not as a column of single words */
@media (max-width: 760px) {
  .pr-line { grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; padding-block: 16px; }
  .pr-line::before { grid-column: 1; grid-row: 1; }
  .pr-kind { grid-column: 2; grid-row: 1; }
  .pr-out { grid-column: 1 / -1; grid-row: 2; font-size: clamp(22px, 7vw, 28px); line-height: 1; overflow-wrap: anywhere; hyphens: auto; }
  .pr-head { grid-column: 1 / -1; grid-row: 3; font-size: 16px; line-height: 1.35; }
  .pr-src { grid-column: 1 / -1; grid-row: 4; }
  .pr-ch { margin: 0 0 14px; }
}

/* « next film » from a room other than La Salle: black over everything while one film gives way to the next */
.next-veil { position: fixed; inset: 0; z-index: 9999; background: #000; pointer-events: none; }

/* the end of the corridor: the film's still at its own 16:9, centred, at any screen shape */
.hx-end { --ew: min(44vw, 70vh); --ew: min(44vw, 70dvh); left: calc(var(--ew) / -2); top: calc(var(--ew) * 9 / 32 * -1); width: var(--ew); height: calc(var(--ew) * 9 / 16); }

/* the film's sheet: the labels in the book face, in italic, beside their names instead of a typewriter column far off */
.ds-row { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ds-row dt { font-family: var(--f-serif); font-style: italic; font-size: 14px; letter-spacing: 0; text-transform: none; padding-top: 0; }
@media (max-width: 760px) { .ds-row { grid-template-columns: 70px minmax(0, 1fr); } .ds-row dt { font-size: 13.5px; } }

/* the countdown (The End): its ring sits at the bottom left, clear of the strip of frames, the number in the poster face and truly centred */
.rb-leader { right: auto; left: clamp(16px, 5vw, 80px); bottom: clamp(96px, 14vh, 140px); bottom: clamp(96px, 14dvh, 140px); place-content: initial; place-items: center;
  font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: 0; }
@media (max-width: 760px) { .rb-leader { width: 60px; height: 60px; font-size: 28px; bottom: 96px; } }

/* the actors' cards turn on a tap on any touch screen: some phones say they can hover, so the tap is keyed to the finger, not to hover */
@media (pointer: coarse), (hover: none) { .ds-person.is-turned { --tilt: 0deg; --turn: 180deg; } }

/* Thank You Satan · the corridor as pictures: one per room, the one in view pushed slowly closer, a soft cut to the next */
.sig-hotel .sticky { perspective: none; }
.hd-view { position: absolute; inset: 0; overflow: hidden; background: #050706; }
.hd-shot { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .7s ease; }
.hd-shot.on { opacity: 1; }
/* the picture's own frame, sized like « cover » for a 1672 × 941 picture, so a spot on it (the door's plate) can be found again */
.hd-frame { --z: 1; position: absolute; left: 50%; top: 50%; width: max(100vw, 177.7vh); width: max(100vw, 177.7dvh); height: max(56.27vw, 100vh); height: max(56.27vw, 100dvh);
  background: #050706 center / 100% 100% no-repeat; transform: translate(-50%, -50%) scale(var(--z)); transform-origin: 50.43% 38%;
  filter: saturate(.55) brightness(.62) contrast(1.08); }
.hd-shot.on .hd-frame { will-change: transform; }
.hd-shot.is-door .hd-frame { filter: brightness(.95) contrast(1.04); }
/* every other room: the same corridor in another light, warmer and lower, instead of a mirror image (numbers stay readable) */
.hd-shot.is-door.is-alt .hd-frame { filter: brightness(.78) contrast(1.1) sepia(.28) saturate(1.1); }
.hd-shot::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 42%, transparent 35%, rgba(3,5,4,.82) 100%), linear-gradient(to top, rgba(3,5,4,.9), transparent 45%); }
/* the room's number, a brass plate on the door in view */
/* without a door picture: a brass plate near the top; with one: the number engraved on the door's own plate */
.hd-plate { position: absolute; z-index: 1; left: 50%; top: 14vh; top: 14dvh; transform: translateX(-50%); padding: 5px 14px; font: 700 clamp(20px, 2.2vw, 30px)/1 var(--f-mono);
  color: #2a1d10; background: linear-gradient(180deg, #e9cf8a, #b08a45); box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 22px rgba(245,214,150,.35); }
.hd-shot.is-door .hd-plate { left: 50.43%; top: 30%; width: 3.6%; height: 2.55%; padding: 0; transform: translate(-50%, -50%); display: grid; place-items: center;
  background: none; box-shadow: none; font: 700 max(1.05vw, 1.85vh)/1 var(--f-serif); font: 700 max(1.05vw, 1.85dvh)/1 var(--f-serif); font-variant-numeric: lining-nums; white-space: nowrap; letter-spacing: .04em; text-indent: .04em; color: #3a2508;
  text-shadow: 0 1px 0 rgba(255,236,180,.45), 0 -1px 0 rgba(0,0,0,.35); }
.hd-lamp { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #f6e7c0; mix-blend-mode: soft-light; opacity: 0; }
.sig-hotel .sticky.is-666 .hd-frame { filter: saturate(.9) brightness(.6) contrast(1.15) sepia(.4) hue-rotate(-30deg); }
.sig-hotel .sticky.is-666 .hd-shot:not(.is-door) .hd-plate { background: linear-gradient(180deg, #ff8a70, #b3241a); color: #1a0505; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 30px rgba(224,38,27,.6); }
.sig-hotel .sticky.is-666 .hd-lamp { background: #ff3a2a; }
@media (max-width: 760px) { .hd-shot:not(.is-door) .hd-plate { top: 12vh; top: 12dvh; } }
@media (prefers-reduced-motion: reduce) { .hd-shot { transition: none; } }
.sig-hotel .sticky.is-666 .hd-shot.is-door .hd-plate { color: #4a0a04; text-shadow: 0 0 10px rgba(255,60,40,.7); }
/* who the intro's synopsis comes from, in small print under it */
.ds-intro-by { margin: 8px 0 0; font-family: var(--f-serif); font-style: italic; font-size: 13px; opacity: .65; }

/* « La bobine manquante »: a black room, the editing table barely there, its screen the only light, cycling through his
   posters. The projectionist's note is a strip of black film held up to it */
.hunt { position: fixed; inset: 0; z-index: 90; overflow: hidden; background: #000; color: #ECE7DE; }
body.hunting :is(#signal, #remote, .pn-open, .pn-next) { visibility: hidden; }
.hu-scene { position: fixed; top: 0; left: 64vw; z-index: 0; width: max(118vw, 210vh); width: max(118vw, 210dvh); aspect-ratio: 16 / 9; transform: translateX(-50%); pointer-events: none; }
.hu-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, #000 4%, transparent 26%), linear-gradient(to top, #000, transparent 34%); }
.hu-bg { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.2) saturate(.75); transition: filter 1.4s ease; }
.hunt.is-open .hu-bg { filter: brightness(.5); }
.hu-bg-full { position: absolute; inset: 0; opacity: 0; transition: filter 1.4s ease, opacity .6s ease; }
.hu-bg-full.is-in { opacity: 1; }
.hu-tv { position: absolute; left: 34.1%; top: 10%; width: 31.8%; height: 33.2%; z-index: 1; display: grid; place-items: center; overflow: hidden; background: #050505; box-shadow: 0 0 70px rgba(236, 200, 150, .18); }
.hu-tv img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.hu-tv img.is-out { opacity: 0; }
.hu-tvn { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 26px 12px 8px; background: linear-gradient(to top, rgba(0,0,0,.9), transparent); color: #F4EBDA; font: 900 clamp(16px, 2.2vw, 30px)/1 var(--f-display); text-align: center; text-transform: uppercase; transition: opacity .3s ease; }
.hu-tvn.is-out { opacity: 0; }
/* the screen: locked, dark posters behind the padlock, one lamp per answer; then the reels turn and it stays open */
.hu-tv img { transition: opacity .35s ease, filter 1.2s ease; }
.hunt:not(.is-open) .hu-tv img, .hunt.is-opening .hu-tv img { filter: grayscale(1) brightness(.32); }
.hu-tvn { z-index: 3; }
.hu-lock { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, .8vw, 12px); padding-bottom: clamp(18px, 3vw, 40px); color: #E8B24A; text-align: center; opacity: 1; transition: opacity .5s ease; pointer-events: none; }
.hu-pad { width: clamp(24px, 4vw, 54px); height: auto; }
.hu-shackle { transition: transform .5s ease; transform-origin: 34px 26px; }
.hu-lock-t { margin: 0; font: 900 clamp(15px, 2.6vw, 36px)/1 var(--f-display); text-transform: uppercase; color: #F4EBDA; }
.hu-lock-t .is-ready, .hu-turning { display: none; }
.hu-lamps { display: flex; gap: 7px; margin: 0; }
.hu-lamps i { width: clamp(6px, .8vw, 10px); height: clamp(6px, .8vw, 10px); border-radius: 50%; background: rgba(236,231,222,.2); transition: background .4s, box-shadow .4s; }
.hu-lamps i.on { background: #E8B24A; box-shadow: 0 0 10px #E8B24A; }
.hunt.is-opening .hu-shackle { transform: translateY(-6px) rotate(24deg); }
.hunt.is-opening .hu-lock-t .is-shut, .hunt.is-open .hu-lock-t .is-shut { display: none; }
.hunt.is-opening .hu-lock-t .is-ready, .hunt.is-open .hu-lock-t .is-ready { display: inline; color: #E8B24A; }
.hunt.is-opening .hu-turning { display: flex; gap: clamp(14px, 3vw, 44px); color: #F4EBDA; }
.hunt.is-opening .hu-pad, .hunt.is-opening .hu-lamps { display: none; }
.hu-reel { width: clamp(38px, 7vw, 96px); height: auto; animation: hu-turn 1.1s linear infinite; }
.hu-reel + .hu-reel { animation-duration: .85s; }
@keyframes hu-turn { to { transform: rotate(360deg); } }
/* then it stays that way: colour back, and a small sign in the corner of the screen */
.hunt.is-open:not(.is-opening) .hu-lock { inset: 0 auto auto 0; padding: clamp(5px, .8vw, 10px) clamp(8px, 1vw, 14px); background: rgba(0,0,0,.72); }
.hunt.is-open:not(.is-opening) .hu-pad, .hunt.is-open:not(.is-opening) .hu-lamps { display: none; }
.hunt.is-open:not(.is-opening) .hu-lock-t { font-size: clamp(11px, 1.2vw, 16px); }
@media (prefers-reduced-motion: reduce) { .hu-reel { animation: none; } }
/* once the door is open the whole screen is a button: the film on it plays */
.hu-play { display: none; position: absolute; inset: 0; z-index: 4; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 0 9px rgba(0,0,0,.95)); }
.hunt.is-open:not(.is-opening) .hu-play { display: block; }
.hu-play::before { content: ''; position: absolute; left: 50%; top: 50%; width: clamp(30px, 4.4vw, 64px); aspect-ratio: 1 / 1.15; background: #F4EBDA; clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: .82; transform: translate(-40%, -50%); transition: opacity .2s ease, transform .2s ease; }
.hu-play:hover::before, .hu-play:focus-visible::before { opacity: 1; background: #E8B24A; transform: translate(-40%, -50%) scale(1.14); }
.hu-play:focus-visible { outline: 3px solid #E8B24A; outline-offset: -3px; }
.hu-x { position: fixed; top: 12px; right: 12px; z-index: 2; padding: 10px 14px; border: 1px solid rgba(236,231,222,.4); background: #000; color: #ECE7DE; font: 400 20px/1 var(--f-display); text-transform: uppercase; }
/* only the card scrolls, inside its film strip: the room and the screen stay where they are */
.hu-note { position: absolute; z-index: 1; left: clamp(16px, 3vw, 44px); top: 32px; bottom: 32px; display: flex; width: min(calc(100% - 32px), max(380px, 38vw)); max-width: 470px; background: rgba(9, 8, 7, .96); box-shadow: 0 0 0 1px rgba(236,231,222,.14), 0 20px 70px #000; }
.hu-body { flex: 1; min-width: 0; min-height: 0; padding: 28px 40px 34px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hu-body::-webkit-scrollbar { display: none; }
.hu-note::before, .hu-note::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 9px; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(236,231,222,.3) 9px 19px, transparent 19px 26px); }
.hu-note::before { left: 11px; } .hu-note::after { right: 11px; }
.hu-kicker { margin: 0 0 3px; font: italic 17px/1.2 var(--f-serif); color: #D9A85A; }
.hu-title { margin: 0; font: 900 clamp(32px, 4vw, 48px)/.95 var(--f-display); text-transform: uppercase; color: #F4EBDA; }
.hu-lead { margin: 14px 0 0; font: 17px/1.45 var(--f-serif); color: rgba(236,231,222,.8); }
.hu-list { margin: 22px 0 0; padding: 0 0 0 22px; font: 800 18px/1.3 var(--f-display); color: #D9A85A; }
.hu-clue { margin-bottom: 20px; }
.hu-q { display: block; margin-top: 16px; font: 18px/1.4 var(--f-serif); color: #ECE7DE; }
.hu-clue .hu-q { margin-top: 0; }
.hu-qrow { display: flex; align-items: flex-start; gap: 10px; }
.hu-qrow .hu-q { flex: 1; min-width: 0; }
/* small to the eye, a full finger to the thumb */
.hu-help { position: relative; flex: none; width: 20px; height: 20px; margin-top: 3px; padding: 0; border: 1px solid rgba(232,178,74,.6); background: transparent; color: #E8B24A; font: 700 13px/1 var(--f-serif); cursor: pointer; transition: background .15s ease, color .15s ease; }
.hu-help::after { content: ''; position: absolute; inset: -12px; }
.hu-help:hover, .hu-help[aria-expanded="true"] { background: #E8B24A; color: #090807; }
.hu-help:focus-visible { outline: 2px solid #E8B24A; outline-offset: 2px; }
.hu-where { margin: 6px 0 0; font: italic 16px/1.4 var(--f-serif); color: #E8B24A; }
.hu-where b { font-weight: 600; }
/* the answer boxes, like a verification code: their number is the length of the word, and they turn green when it is right */
.hu-code { position: relative; display: block; width: min(100%, calc(var(--n) * clamp(26px, 7.2vw, 36px))); margin-top: 10px; }
.hu-cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(3px, .6vw, 5px); }
.hu-cell { display: grid; place-items: center; aspect-ratio: 4 / 5; min-width: 0; border: 1px solid rgba(236,231,222,.38); background: rgba(236,231,222,.05); color: #F4EBDA; font: 800 clamp(15px, 4.2vw, 21px)/1 var(--f-display); font-style: normal; text-transform: uppercase; transition: background .25s, border-color .25s, color .25s; }
/* a cursor in the first empty box says « write here »; it wakes up and blinks once the box is chosen */
.hu-cell.is-cur::after { content: ''; width: 2px; height: 58%; background: #E8B24A; opacity: .55; }
.hu-code:hover .hu-cell { border-color: rgba(236,231,222,.62); }
.hu-code:focus-within .hu-cell.is-cur { border-color: #E8B24A; box-shadow: inset 0 -3px 0 #E8B24A; }
.hu-code:focus-within .hu-cell.is-cur::after { opacity: 1; animation: hu-caret 1.05s ease-in-out infinite; }
@keyframes hu-caret { 50% { opacity: .1; } }
@media (prefers-reduced-motion: reduce) { .hu-code:focus-within .hu-cell.is-cur::after { animation: none; } }
.hu-code input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: transparent; caret-color: transparent; font-size: 16px; outline: none; cursor: text; }
.hu-code input::selection { background: none; }
.hu-code.is-right .hu-cell { border-color: #2f9460; background: #1f6d46; color: #F3FBF5; }
.hu-code.is-wrong .hu-cell { border-color: #E2503F; color: #E2503F; }
.hu-code.is-wrong { animation: hu-no .3s ease; }
@keyframes hu-no { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .hu-code.is-wrong { animation: none; } }
.hu-msg { min-height: 1.3em; margin: 8px 0 0; font: italic 16px/1.4 var(--f-serif); color: #E8A08F; }
.hu-msg b { font-weight: 600; }
/* the small puzzle: the torn frame, in six pieces */
.hu-puzzle { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(236,231,222,.25); }
.hu-puzzle h3, .hu-last h3 { margin: 0; font: 900 clamp(24px, 3vw, 32px)/1 var(--f-display); text-transform: uppercase; color: #E8B24A; }
.hu-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 14px; transition: gap .4s; }
.hu-tiles.is-whole { gap: 0; }
.hu-tiles { position: relative; }
.hu-tile { position: relative; aspect-ratio: 16 / 9; padding: 0; border: 0; background-size: 300% 200%; cursor: grab; touch-action: none; transition: filter .2s ease, transform .2s ease; }
.hu-tile:hover { filter: brightness(1.15); }
.hu-tile:focus-visible { outline: 2px solid rgba(232,178,74,.7); outline-offset: -2px; }
/* the piece picked up: lifted, gold, the others wait for it */
.hu-tile.is-picked { z-index: 2; outline: 3px solid #E8B24A; outline-offset: -3px; filter: brightness(1.25); transform: scale(1.06); box-shadow: 0 10px 26px rgba(0,0,0,.7); }
.hu-tiles.has-pick .hu-tile:not(.is-picked) { filter: brightness(.7); }
.hu-tiles.has-pick .hu-tile:not(.is-picked):hover, .hu-tile.is-target { filter: brightness(1.1); outline: 2px dashed #E8B24A; outline-offset: -2px; }
.hu-tile.is-dragged { z-index: 3; cursor: grabbing; transition: none; filter: brightness(1.2); box-shadow: 0 14px 30px rgba(0,0,0,.8); }
/* a piece in its place: a thin green line along its foot */
.hu-tile.is-placed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #2f9460; }
.hu-tiles.is-whole .hu-tile::after { display: none; }
.hu-tile.is-swapped { animation: hu-swap .35s ease; }
@keyframes hu-swap { from { opacity: .35; } }
.hu-pz-status { min-height: 1.4em; margin: 10px 0 0; font: italic 16px/1.4 var(--f-serif); color: #E8B24A; }
@media (prefers-reduced-motion: reduce) { .hu-tile, .hu-tile.is-picked { transition: none; transform: none; } .hu-tile.is-swapped { animation: none; } }
/* the watching code, once earned */
.hu-seance { margin-top: 20px; padding: 16px 0; border-top: 1px solid rgba(236,231,222,.25); border-bottom: 1px solid rgba(236,231,222,.25); }
.hu-reels { margin: 18px 0 0; padding: 0; list-style: none; }
.hu-reels a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid rgba(236,231,222,.2); color: #F4EBDA; font: 900 clamp(21px, 2.4vw, 26px)/1.05 var(--f-display); text-transform: uppercase; text-decoration: none; transition: color .2s; }
.hu-reels a:hover, .hu-reels a:focus-visible { color: #E8B24A; outline: none; }
.hu-reels i { flex: none; font: 20px/1 var(--f-serif); }
.hu-reels img { flex: none; width: 42px; height: 58px; object-fit: cover; background: #15120f; }
.hu-reels span { flex: 1; min-width: 0; }
.hu-group { margin-top: 22px; }
.hu-group h3 { position: sticky; top: -28px; z-index: 1; margin: 0; padding: 30px 0 8px; background: #090807; font: 900 clamp(24px, 3vw, 30px)/1 var(--f-display); text-transform: uppercase; color: #E8B24A; border-bottom: 1px solid rgba(232,178,74,.45); }
.hu-group .hu-reels { margin-top: 0; }
.hu-last { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(236,231,222,.25); }
@media (max-width: 760px) {
  .hu-scene { left: 50vw; width: 175vw; }
  .hu-scene::after { background: linear-gradient(to top, #000 8%, transparent 40%); }
  .hu-note { left: 10px; right: 10px; top: min(62vw, 40dvh); bottom: 0; width: auto; max-width: none; }
  .hu-body { padding: 22px 30px 40px; }
  .hu-note::before { left: 8px; } .hu-note::after { right: 8px; }
  .hu-group h3 { top: -22px; padding-top: 24px; }
}