/* chokinghazard.org: Short Film page (loads after review.css) */

:root{--ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* ===================================================================
   1. About the film: photo of his setup + what's on his screen
   =================================================================== */
.fl-over{display:grid;gap:3px;margin-top:32px}
@media(min-width:900px){.fl-over{grid-template-columns:1.15fr .85fr}}
.fl-pc{margin:0;min-height:300px;background:#120a14;border:2px solid var(--ink);overflow:hidden}
.fl-pc img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.fl-med{display:flex;flex-direction:column}
.fl-med h3{margin-bottom:6px}
.fl-medlist{list-style:none;margin:0;padding:0;display:grid;gap:0!important}
.fl-medlist li{padding:13px 0 13px!important;border-bottom:1px solid var(--line);display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline}
.fl-medlist li::before{content:none!important}
.fl-medlist li b{font:700 var(--t-label)/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.fl-medlist li span{color:var(--ink2)}
.fl-med .fl-for{margin:auto 0 0!important;padding-top:20px}
@media(max-width:520px){.fl-medlist li{grid-template-columns:1fr;gap:4px}}

/* ===================================================================
   2. The livestream: stream frame with burned-in chat
   =================================================================== */
.fl-pn{margin:0;background:#050607;border:3px solid #050607;box-shadow:8px 8px 0 rgba(0,0,0,.45);font-family:var(--ui);color:#fff}
.fl-pnbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#0b0c0e;border-bottom:1px solid rgba(255,255,255,.08)}
.fl-pnlive{display:flex;align-items:center;gap:10px;font:800 11px/1 var(--ui)}
.fl-pnlive b{background:var(--coral);color:#fff;padding:5px 7px;border-radius:3px;letter-spacing:.08em}
.fl-pncat{font:600 13px/1 var(--ui);color:#c9d1d4}
.fl-pnview{margin-left:auto;font:800 11px/1 var(--ui);color:#ffd0d0}
.fl-pnview::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-right:6px;vertical-align:1px}

/* the photo is feathered into #1c1e1e at its edges, so the frame can letterbox it invisibly */
.fl-cam{position:relative;aspect-ratio:4/3;overflow:hidden;container-type:inline-size;background:#1c1e1e}
.fl-camimg{position:absolute;top:0;left:0;bottom:0;right:38%;width:62%;height:100%;object-fit:contain;padding:1% 0}

.fl-chat{position:absolute;z-index:5;top:0;right:0;bottom:0;width:38%;background:linear-gradient(90deg,rgba(5,6,7,.55),rgba(5,6,7,.85));display:flex;flex-direction:column}
.fl-chathd{padding:9px 12px;font:800 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#9aa3a8;border-bottom:1px solid rgba(255,255,255,.08)}
.fl-msgs{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px 12px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.fl-msg{font:500 max(11px,2.15cqi)/1.32 var(--ui);color:#e8ecee;overflow-wrap:anywhere;animation:flIn .25s ease-out}
.fl-msg b{font-weight:800;margin-right:.35em}
.fl-msg.dis{color:var(--coral)}
@keyframes flIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fl-chatin{margin:0 10px 10px;border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:7px 9px;font:400 11px/1 var(--ui);color:#7c868b}

@media(max-width:560px){
  .fl-pn{box-shadow:5px 5px 0 rgba(0,0,0,.45);margin-right:5px}
  .fl-cam{aspect-ratio:3/4}
  .fl-camimg{right:0;width:100%;bottom:auto;height:55%;padding:4% 4% 0}
  .fl-chat{top:auto;left:0;width:auto;height:45%;background:linear-gradient(180deg,rgba(5,6,7,0),rgba(5,6,7,.88) 30%)}
  .fl-chathd{display:none}
}

/* ===================================================================
   3. Screen it
   =================================================================== */
#screen .s2grid > .card{display:flex;flex-direction:column}
#screen .s2grid > .card ul{margin-bottom:24px}
#screen .s2grid > .card .screencta{margin-top:auto;align-self:flex-start}
@media(max-width:899px){#screen .s2side{grid-template-rows:auto}}

@media (prefers-reduced-motion:reduce){.fl-msg{animation:none}}

/* ===================================================================
   Shorter sections (Oct 12 revision)
   =================================================================== */
#about,#segment,#screen{padding-top:calc(var(--sec-y) - 16px);padding-bottom:calc(var(--sec-y) - 16px)}
#about .fl-over,#segment .segsplit,#screen .s2grid{margin-top:26px}

/* About: wider list column so most lines fit on one row, tighter rows */
@media(min-width:900px){.fl-over{grid-template-columns:1fr 1fr}}
.fl-pc{min-height:240px}
.fl-med{padding:24px 26px 14px}
.fl-medlist li{padding:9px 0!important;grid-template-columns:128px 1fr;gap:14px}
.fl-medlist li:last-child{border-bottom:0}

/* Livestream: a wider, shorter stream frame */
.fl-cam{aspect-ratio:16/9}
.fl-camimg{padding:3% 2%}
@media(max-width:560px){
  .fl-cam{aspect-ratio:1/1}
  .fl-camimg{height:56%;padding:4% 6% 0}
  .fl-chat{height:44%}
}

/* Screen it: one side card now, so it fills the column; hosts in two columns */
#screen .s2side{grid-template-rows:1fr}
#screen .s2grid > .card{padding:26px 28px}
#screen .s2grid > .card h3{margin-bottom:12px}
#screen .s2grid > .card ul{margin-bottom:20px}
@media(min-width:620px){#screen .s2grid > .card ul{grid-template-columns:1fr 1fr;column-gap:24px}}
/* the list sets the row height; the photo crops to fill it */
@media(min-width:900px){
  .fl-pc{position:relative;min-height:0}
  .fl-pc img{position:absolute;inset:0}
}
@media(max-width:899px){.fl-pc{aspect-ratio:16/9;min-height:0}}
@media(max-width:560px){.fl-medlist li{grid-template-columns:1fr;gap:3px}.fl-med{padding:22px 22px 10px}}

/* Livestream: the stream frame's top lines up with the bottom of the heading's last line */
@media(min-width:900px){
  #segment .segsplit{align-items:start}
  #segment .fl-pn{margin-top:calc(-26px - var(--t-h2) * .141)}
}

/* Notify me: confirmation / error line and spam trap (assets/js/notify.js) */
.x-nfrm[hidden]{display:none}
.x-nmsg{margin:12px 0 0;font:700 12px/1.5 var(--mono);letter-spacing:.06em;color:var(--coral)}
.x-nmsg.ok{margin-top:4px;font:400 20px/1.4 var(--serif);letter-spacing:0;color:#fff}
.x-nmsg:empty{display:none}
.x-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}