/* Shared-link landing pages (/t/<type>/<id>, /u/<username>, /l/<id>, /p/<personality>) and /welcome/: what people
   without the app see when a friend shares something from Scroll Movies. Loaded after site.css. */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1080px;margin:0 auto;padding:18px 20px;position:relative;z-index:2}
.top .get{font:800 15px var(--display);font-stretch:108%;color:var(--gold);text-decoration:none;white-space:nowrap}
.top .get:hover{text-decoration:underline}

.backdrop{position:absolute;inset:0 0 auto;height:min(78vh,680px);overflow:hidden;z-index:0;pointer-events:none}
.backdrop img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;filter:saturate(1.05)}
.backdrop img.on{opacity:.38}
.backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(11,11,16,.55),rgba(11,11,16,.75) 55%,var(--ground)),radial-gradient(70% 90% at 30% 40%,transparent,rgba(11,11,16,.6))}

.share{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:24px 20px 64px;display:grid;gap:52px;align-items:center;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.media{display:flex;justify-content:center}
.poster{width:min(100%,340px);aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.06)}
.poster img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.poster img.on{opacity:1}
.label{font:800 12.5px/1 var(--display);font-stretch:120%;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.share h1{font:900 54px/1 var(--display);font-stretch:110%;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance;overflow-wrap:break-word}
.share h1 em{font-style:normal;color:var(--gold)}
.facts{font-size:16px;color:var(--ink2);margin:0 0 6px}
.by{font-size:15px;color:var(--ink3);margin:0 0 22px}
.overview{font-size:18px;line-height:1.6;color:var(--ink2);margin:0 0 30px;max-width:36em}
.tagline{font:700 19px/1.4 var(--display);font-stretch:104%;color:var(--ink);margin:0 0 14px}
.missing{color:var(--ink2)}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.open{font-size:15px;color:var(--ink2);display:none;margin:0}
.open a{color:var(--gold);font-weight:700}
.ios .open{display:block}
.fine{font-size:14px;color:var(--ink3);margin:6px 0 0;max-width:32em}
.stats{display:flex;gap:26px;margin:0 0 26px;padding:0;list-style:none}
.stats b{display:block;font:900 26px/1 var(--display);font-stretch:108%;color:var(--ink)}
.stats span{font-size:13px;color:var(--ink3)}
.avatar{width:min(100%,240px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--panel2);display:grid;place-items:center;box-shadow:var(--shadow),0 0 0 4px var(--gold)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar .initial{font:900 96px/1 var(--display);color:var(--gold)}

/* Personality pages: three signature films */
.trio{position:relative;width:100%;max-width:440px;aspect-ratio:1.1;margin:0 auto}
.trio img{position:absolute;width:48%;aspect-ratio:2/3;height:auto;border-radius:12px;box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.06);background:var(--panel)}
.trio img:nth-of-type(1){left:2%;top:12%;transform:rotate(-7deg)}
.trio img:nth-of-type(3){right:2%;top:12%;transform:rotate(7deg)}
.trio img:nth-of-type(2){left:26%;top:2%;width:50%;z-index:1}
.glow{position:absolute;inset:-10%;background:radial-gradient(closest-side,var(--c,var(--gold)),transparent);opacity:.18;filter:blur(20px)}
.swatch{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--c,var(--gold));margin-right:8px;vertical-align:0}
.blurb{font:600 23px/1.45 var(--display);font-stretch:100%;color:var(--ink);margin:0 0 18px;max-width:28em}
.sig{font-size:15px;color:var(--ink3);margin:0 0 30px}
.sig b{color:var(--ink2);font-weight:600}
.others{max-width:1080px;margin:0 auto;padding:0 20px 56px;position:relative;z-index:1}
.others h2{font:800 15px var(--display);font-stretch:118%;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 14px}
.others nav{display:flex;flex-wrap:wrap;gap:10px}
.others a{font-size:14px;color:var(--ink2);text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid var(--rule)}
.others a:hover,.others a[aria-current]{color:var(--ink);border-color:var(--ink3)}

.site-foot{position:relative;z-index:1}

@media (max-width:820px){
  .share{grid-template-columns:1fr;gap:30px;padding-top:4px}
  .poster{width:min(62vw,260px)}
  .avatar{width:min(48vw,180px)}
  .avatar .initial{font-size:72px}
  .share h1{font-size:40px}
  .overview{font-size:17px}
  .blurb{font-size:20px}
  .cta{align-items:stretch}
  .cta .btn{width:100%}
  .trio{max-width:340px}
}
.persona-page .label,.persona-page h1 em{color:var(--c)}
.persona-page .sig a{color:inherit;text-decoration:none}
.persona-page .sig a:hover b{color:var(--ink);text-decoration:underline}