/* A shortlisted entry's invitation (/premiere/shortlist/[slug]), on top of the story page's own styles.
   Two fonts, as on the rest of the site: Bebas Neue for display, Manrope for everything else. */
:root{--display:"Bebas Neue",Impact,sans-serif;--body:"Manrope",system-ui,sans-serif;--mono:"Manrope",system-ui,sans-serif;--gold:#f4c542;--gold-deep:#b9821a;--paper:#f4f1e9;--paper-ink:#15161b}
body{font-synthesis:none;-webkit-font-smoothing:antialiased}

/* buttons and cards further down the page */
.buy,.buy.big{font-family:var(--body);font-size:15px;line-height:1.4;font-weight:800;text-transform:none;letter-spacing:0;box-shadow:3px 3px 0 var(--paper-ink);border-radius:3px;padding:14px 20px}
.buy:active{box-shadow:1px 1px 0 var(--paper-ink)}
.sharebtn{font-weight:700;border-width:1px;padding:13px 16px}
.paper-code button{font-family:var(--body);font-weight:800}
.panel h2{line-height:1.04}
.panel h2 em{display:block;margin-top:4px}
.panel p{line-height:1.65}
.panel .small{line-height:1.55}
.panel .chips{gap:10px}
@media(min-width:821px){.card .h{font-size:20cqh;line-height:1.02}.card .s{font-size:10cqh}.card .g{font-size:11cqh}}
.mins small{max-width:35ch;line-height:1.6}

/* ---------- the first screen: their film on the IMAX, the invitation in front of it ---------- */
#c0.inv .stage{background:#050608}
/* The hall moves right so the screen, and the film on it, sit clear of the invitation. */
#c0.inv .hall{margin-left:calc(var(--hw) / -2 + 11vw)}
/* The film is projected onto the blank screen in the photograph: multiply keeps the screen's own light and curve. */
#c0.inv .hall .onscreen{mix-blend-mode:multiply;opacity:1;object-position:50% 42%}
#c0.inv .hall .onscreen:not(.still){object-position:50% 20%;filter:brightness(.9)}
#c0.inv .hallshade{background:
  linear-gradient(90deg,rgba(5,6,8,.92) 0,rgba(5,6,8,.7) 26%,rgba(5,6,8,.08) 46%,rgba(5,6,8,0) 60%),
  linear-gradient(0deg,rgba(5,6,8,.78) 0,rgba(5,6,8,0) 28%),
  linear-gradient(180deg,rgba(5,6,8,.55) 0,rgba(5,6,8,0) 14%)}

/* their poster, in a lightbox by the seats */
#c0.inv .inv-poster{margin:0;position:absolute;z-index:8;right:5vw;bottom:7svh;height:min(46svh,500px);aspect-ratio:2/3;padding:8px;background:#111;border:3px solid var(--gold);rotate:2deg;box-shadow:0 0 40px rgba(244,197,66,.3),0 24px 44px rgba(0,0,0,.7)}
#c0.inv .inv-poster .p{width:100%;height:100%;object-fit:cover;display:block}
#c0.inv .inv-poster .crest{position:absolute;right:-15%;top:-9%;width:36%;height:auto;color:var(--gold);filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}

/* the invitation: a taped paper card with a ticket stub, like the cards further down */
#c0.inv .hero{position:absolute;z-index:30;left:4vw;right:auto;top:50%;bottom:auto;translate:0 -50%;max-width:none;width:min(540px,40vw)}
#c0.inv .invite{position:relative;margin:0;background:var(--paper);color:var(--paper-ink);border-radius:3px;padding:34px 32px 22px;rotate:-.7deg;box-shadow:0 34px 60px -22px rgba(0,0,0,.9),0 2px 0 rgba(0,0,0,.06)}
#c0.inv .invite::before{content:"";position:absolute;top:-11px;left:calc(50% - 56px);width:112px;height:24px;background:rgba(242,182,50,.88);transform:rotate(-3deg)}
.inv-from{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:15px;line-height:1.3;color:#3d3e44}
.inv-from b{color:var(--paper-ink);font-weight:800}
.inv-from img,.inv-from .ini{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);flex:none;display:grid;place-items:center;background:#1a1f2e;font-family:var(--display);font-size:22px;color:var(--gold)}
.inv-eyebrow{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
#c0.inv .inv-title{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere;color:var(--paper-ink);font-size:clamp(50px,4.9vw,84px);line-height:.92;letter-spacing:.01em;text-shadow:3px 3px 0 rgba(244,197,66,.95)}
#c0.inv .inv-title.long{font-size:clamp(42px,4vw,68px)}
#c0.inv .inv-title.xlong{font-size:clamp(34px,3.1vw,54px)}
.inv-logline{margin:14px 0 0;font-size:15px;line-height:1.55;color:#45464c;max-width:44ch}
.inv-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 0;padding:14px 0 0;border-top:2px solid var(--paper-ink)}
.inv-facts div{min-width:0}
.inv-facts dt{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 4px}
.inv-facts dd{margin:0;font-size:14px;line-height:1.3;font-weight:800;color:var(--paper-ink)}
.inv-facts small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:#5b5a55}
/* the stub: torn off at the dashes, with the ticket underneath */
.inv-stub{position:relative;margin:20px -32px 0;padding:20px 32px 0;border-top:2px dashed rgba(21,22,27,.35)}
.inv-stub::before,.inv-stub::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:#050608}
.inv-stub::before{left:-11px}.inv-stub::after{right:-11px}
.inv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
#c0.inv .inv-cta .buy{font-size:16px;padding:14px 22px;min-height:50px}
.inv-code{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:10px 14px;border:2px dashed var(--gold-deep);border-radius:3px;background:#fff8e6;color:var(--paper-ink);font:600 14px/1.2 var(--body);cursor:pointer}
.inv-code b{font-weight:800;letter-spacing:.08em}
.inv-code:focus-visible,.inv-share:focus-visible,#c0.inv .buy:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px}
.inv-out{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--gold-deep)}
.inv-out:empty{display:none}
.inv-fine{margin:14px 0 0;font-size:12px;line-height:1.55;color:#5b5a55}
.inv-share{display:inline;margin:0 0 0 4px;padding:0;border:0;background:none;font:800 12px/1.55 var(--body);color:var(--paper-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* short laptop screens */
@media(min-width:821px) and (max-height:800px){
  #c0.inv .invite{padding:26px 28px 18px}
  .inv-from{margin-bottom:12px}.inv-from img,.inv-from .ini{width:40px;height:40px}
  #c0.inv .inv-title{font-size:clamp(44px,4.2vw,70px)}#c0.inv .inv-title.long{font-size:clamp(38px,3.5vw,58px)}#c0.inv .inv-title.xlong{font-size:clamp(30px,2.7vw,46px)}
  .inv-logline{margin-top:10px;font-size:14px}
  .inv-facts{margin-top:14px;padding-top:10px}
  .inv-stub{margin:16px -28px 0;padding:16px 28px 0}
  .inv-fine{margin-top:10px}
  #c0.inv .inv-poster{height:min(42svh,440px)}
}
/* tablets and narrow windows */
@media(min-width:821px) and (max-width:1180px){
  #c0.inv .hero{width:min(520px,50vw)}
  #c0.inv .hall{margin-left:calc(var(--hw) / -2 + 18vw)}
  #c0.inv .inv-poster{height:min(34svh,360px);right:4vw;bottom:5svh}
  .inv-facts{grid-template-columns:1fr 1fr}.inv-facts div:last-child{grid-column:1 / -1}
}

/* phones: the film on the screen at the top, the invitation underneath, the poster clipped to its corner */
@media(max-width:820px){
  #c0.inv .hall{--hw:max(100vw,48svh * 1.7917);top:calc(52px - var(--hw) / 1.7917 * .02);margin-top:0;margin-left:calc(var(--hw) / -2)}
  #c0.inv .hallshade{background:linear-gradient(0deg,rgba(5,6,8,.96) 0,rgba(5,6,8,.85) 44%,rgba(5,6,8,0) 66%),linear-gradient(180deg,rgba(5,6,8,.5) 0,rgba(5,6,8,0) 12%)}
  #c0.inv .inv-poster{display:none}
  /* the story's own phone shade darkens the top for text that used to sit there; the film is there now */
  #c0.inv .stage::after{background:none}
  #c0.inv .hero{left:12px;right:12px;width:auto;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));translate:none}
  #c0.inv .invite{padding:22px 18px 14px;rotate:-.4deg}
  #c0.inv .invite::before{width:84px;left:calc(50% - 42px);height:20px;top:-9px}
  .inv-from{font-size:13px;gap:10px;margin:0 0 10px}
  .inv-from img,.inv-from .ini{width:36px;height:36px;font-size:17px}
  .inv-eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:6px}
  #c0.inv .inv-title{font-size:38px;line-height:.94;text-shadow:2px 2px 0 rgba(244,197,66,.95)}
  #c0.inv .inv-title.long{font-size:32px}
  #c0.inv .inv-title.xlong{font-size:27px}
  .inv-logline{margin-top:8px;font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .inv-facts{grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:12px;padding-top:10px}
  .inv-facts div:last-child{grid-column:1 / -1}
  .inv-facts dt{font-size:9.5px;margin-bottom:2px}
  .inv-facts dd{font-size:13px}.inv-facts small{font-size:12px}
  .inv-stub{margin:12px -18px 0;padding:14px 18px 0}
  .inv-stub::before,.inv-stub::after{width:18px;height:18px;top:-10px}.inv-stub::before{left:-9px}.inv-stub::after{right:-9px}
  .inv-cta{gap:8px;flex-wrap:nowrap}
  #c0.inv .inv-cta .buy{flex:1 1 auto;justify-content:center;font-size:15px;padding:12px 12px;min-height:46px}
  .inv-code{flex:0 0 auto;min-height:46px;padding:8px 10px;font-size:12px}
  .inv-fine{font-size:11px;margin-top:10px}
  .inv-share{font-size:11px}
}
@media(max-width:820px) and (max-height:700px){
  .inv-logline{display:none}
  #c0.inv .inv-title{font-size:32px}#c0.inv .inv-title.long{font-size:28px}#c0.inv .inv-title.xlong{font-size:24px}
  .inv-from{margin-bottom:8px}
  .inv-fine{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){#c0.inv .invite{rotate:none}}