/* =========================================================
   FILMPOP.SE — "screening-room pop"  ·  en filmdagbok
   Static, self-hosted, CSP-safe (no inline styles/scripts).
   ========================================================= */
@font-face{font-family:"Bricolage Grotesque";font-weight:200 900;font-display:swap;src:url("/assets/fonts/BricolageGrotesque-var.woff2") format("woff2")}
@font-face{font-family:"InterVF";font-weight:100 900;font-display:swap;src:url("/assets/fonts/Inter-var.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-weight:400;font-display:swap;src:url("/assets/fonts/dmmono-400.woff2") format("woff2")}
@font-face{font-family:"Marker";font-weight:400;font-display:swap;src:url("/assets/fonts/permanent-marker.woff2") format("woff2")}

:root{
  --ink:#14101c; --ink-2:#1d1728; --ink-3:#281f36; --panel:#191322;
  --paper:#f4eee3; --dim:#a99ec2; --dimmer:rgba(244,238,227,.52); --faint:rgba(244,238,227,.12);
  --line:rgba(244,238,227,.12); --line-2:rgba(244,238,227,.22);
  --gold:#ffc23d; --gold-deep:#e2971b; --gold-soft:rgba(255,194,61,.14);
  --beam:#74c7ff;
  --display:"Bricolage Grotesque",Georgia,serif;
  --body:"InterVF",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",monospace;
  --hand:"Marker","Comic Sans MS",cursive;
  --wrap:1200px; --ease:cubic-bezier(.2,.8,.2,1);
  --r:13px; --r-lg:18px; --shadow:0 18px 46px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:17px;line-height:1.62;letter-spacing:.005em;
  background-image:radial-gradient(120% 80% at 82% -8%,#231a30 0,var(--ink) 58%),radial-gradient(90% 60% at 0% 108%,#1a1526 0,transparent 60%);
  overflow-x:hidden;min-height:100vh}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.015em;text-wrap:balance;margin:0}
p{margin:0}
::selection{background:var(--gold);color:#1a1206}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.grain,.vig{position:fixed;inset:0;pointer-events:none;z-index:60}
.grain{opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.vig{background:radial-gradient(130% 100% at 50% 36%,transparent 58%,rgba(6,4,10,.62) 100%)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,44px)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hand{font-family:var(--hand)}
.skip{position:fixed;top:8px;left:8px;z-index:100;transform:translateY(-160%);background:var(--gold);color:#1a1206;font-family:var(--mono);font-size:.8rem;padding:9px 14px;border-radius:8px;transition:transform .2s}
.skip:focus{transform:none}

/* ---------- masthead ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(20,16,28,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;line-height:1;display:inline-flex;align-items:center}
.brand .film{color:var(--paper)}
.brand .pop{color:var(--gold);position:relative}
.brand .pop::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:2px;background-image:radial-gradient(circle,var(--gold) 42%,transparent 46%);background-size:9px 3px;opacity:.9}
.tagline{font-family:var(--hand);color:var(--dim);font-size:1rem;transform:rotate(-1.5deg);white-space:nowrap}
@media(max-width:640px){.tagline{display:none}}
.top nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.top nav a{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:8px 11px;transition:color .2s}
.top nav a:hover,.top nav a.on{color:var(--paper)}
@media(max-width:720px){.top nav a:not(.tnav-key){display:none}}

/* ---------- homepage ---------- */
.home-hero{padding:clamp(34px,6vw,72px) 0 clamp(24px,3vw,34px)}
.home-hero .kick{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.home-hero .avatar{width:44px;height:44px}
.home-hero .kick p{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--dim)}
.home-hero .kick b{color:var(--paper);font-weight:400}
.home-hero h1{font-size:clamp(2.6rem,8vw,6.4rem);letter-spacing:-.03em;line-height:.94;max-width:16ch}
.home-hero h1 em{font-style:normal;color:var(--gold)}
.home-hero .lede{font-family:var(--hand);color:var(--dim);font-size:clamp(1.1rem,2vw,1.5rem);margin-top:18px;transform:rotate(-1deg)}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 26px;border-bottom:1px solid var(--line)}
.filters button{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  background:none;border:1px solid var(--line-2);border-radius:20px;padding:7px 14px;cursor:pointer;transition:.2s}
.filters button:hover{color:var(--paper);border-color:var(--line-2)}
.filters button.on{color:#1a1206;background:var(--gold);border-color:var(--gold)}
.grid-wrap{padding:clamp(26px,4vw,44px) 0 20px}

/* ---------- hero (review) ---------- */
.hero{position:relative;margin-top:clamp(18px,3vw,30px)}
.hero-still{position:relative;aspect-ratio:21/9;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:#0f0b16}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(1.05) contrast(1.02)}
.hero-still::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,18,.15) 30%,rgba(12,8,18,.55) 66%,rgba(12,8,18,.94));z-index:1}
.hero-badge{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);background:rgba(12,8,18,.55);border:1px solid var(--line-2);padding:5px 10px;border-radius:20px;display:inline-flex;gap:.6em;align-items:center}
.hero-badge b{color:var(--gold);font-weight:400}
.hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,3vw,36px)}
.hero-cap h1{font-size:clamp(2.4rem,7vw,6rem);letter-spacing:-.03em;color:var(--paper);text-shadow:0 4px 40px rgba(0,0,0,.55)}
.hero-cap .orig{font-family:var(--mono);color:#e7ddf2;font-size:.86rem;letter-spacing:.06em;margin-top:10px}

/* ---------- byline ---------- */
.byline{display:flex;align-items:center;gap:16px;padding:22px 0 6px}
.avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;color:#1a1206;background:radial-gradient(circle at 35% 30%,#ffe4a0,#ffc23d 55%,#e2971b);box-shadow:0 0 0 2px rgba(255,194,61,.25),var(--shadow)}
.by-name{font-size:.98rem}
.by-name b{font-weight:600}
.by-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--dim);margin-top:2px}
.byline .scrawl{font-family:var(--hand);color:var(--gold);font-size:1.15rem;transform:rotate(-4deg);margin-left:8px}
.byline .by-date{margin-left:auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--dimmer)}
@media(max-width:640px){.byline .scrawl,.byline .by-date{display:none}}

/* ---------- meta strip ---------- */
.metabar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:16px 0 22px;border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line-2);border-radius:20px;padding:5px 12px}
.metabar .verdict-line{color:var(--dim);font-style:italic;font-family:var(--display);font-weight:400;font-size:1.02rem;max-width:40ch}
.rating{display:inline-flex;align-items:center;gap:12px;margin-left:auto}
.rating .score{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--dim)}
.rating .score b{color:var(--gold);font-weight:400}

/* ---------- film-frame rating ---------- */
.frames{display:inline-flex;gap:5px}
.fr{display:inline-block}
.fr svg{width:26px;height:29px;display:block}
.fr .frbody{fill:var(--ink-2);stroke:var(--line-2);stroke-width:1}
.fr .frperf rect{fill:var(--faint)}
.fr .frimg{fill:none;stroke:var(--line-2);stroke-width:1.3}
.fr.lit .frbody{stroke:var(--gold-deep)}
.fr.lit .frperf rect{fill:var(--gold)}
.fr.lit .frimg{fill:var(--gold);stroke:var(--gold);filter:drop-shadow(0 0 3px rgba(255,194,61,.7))}
.frames.big .fr svg{width:44px;height:49px}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,5vw,64px);padding:clamp(34px,5vw,58px) 0}
@media(max-width:900px){.layout{grid-template-columns:1fr;gap:40px}}
.aside{position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;gap:24px}
@media(max-width:900px){.aside{position:static}}
.poster{position:relative;aspect-ratio:2/3;border-radius:var(--r);transform:rotate(-1.6deg);margin-top:6px}
.poster img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.4)}
.poster::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(2deg);width:84px;height:22px;background:rgba(255,236,190,.22);border:1px solid rgba(255,236,190,.28);border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.3);z-index:2}
.credits{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:18px 18px 8px}
.credits h2{font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.credits dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0}
.credits dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);padding:9px 12px 9px 0;border-top:1px solid var(--line);white-space:nowrap}
.credits dd{margin:0;font-size:.9rem;padding:9px 0;border-top:1px solid var(--line);text-align:right;color:var(--paper)}
.credits dl>dt:first-of-type,.credits dl>dt:first-of-type + dd{border-top:0}

/* ---------- review body ---------- */
.review{max-width:66ch}
.review .lead{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.32;color:var(--paper);margin-bottom:26px}
.review .lead::first-letter{float:left;font-weight:800;font-size:3.6em;line-height:.72;padding:6px 12px 0 0;color:var(--gold)}
.review p{margin-bottom:20px;color:#e7e0d3}
.review p strong{color:var(--paper);font-weight:600}
.pull{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.12;letter-spacing:-.02em;color:var(--paper);margin:32px 0;padding-left:22px;border-left:3px solid var(--gold)}
.pull span{color:var(--gold)}
.sign{font-family:var(--hand);color:var(--gold);font-size:1.5rem;transform:rotate(-3deg);margin-top:30px}

/* ---------- trailer ---------- */
.trailer{padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--line)}
.trailer h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:6px}
.trailer .sub{font-family:var(--hand);color:var(--dim);font-size:1.05rem;margin-bottom:22px;transform:rotate(-1deg)}
.screen{position:relative;aspect-ratio:16/9;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- stills (taped polaroids) ---------- */
.stills{padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--line)}
.stills h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.stills .sub{font-family:var(--hand);color:var(--dim);font-size:1.05rem;margin:4px 0 28px;transform:rotate(-1deg)}
.polas{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);justify-content:center;padding:6px 0 14px}
.pola{background:#f4eee3;padding:12px 12px 46px;border-radius:6px;box-shadow:var(--shadow);position:relative;flex:0 1 380px;cursor:pointer;transition:transform .3s var(--ease);border:0}
.pola img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px;display:block}
.pola figcaption{font-family:var(--hand);color:#2a2030;font-size:1.15rem;text-align:center;position:absolute;left:12px;right:12px;bottom:10px}
.pola::before{content:"";position:absolute;top:-13px;left:50%;width:96px;height:26px;transform:translateX(-50%) rotate(-2.5deg);background:rgba(255,220,150,.5);border:1px solid rgba(200,160,90,.4);box-shadow:0 3px 8px rgba(0,0,0,.3)}
.pola.r1{transform:rotate(-3deg)}.pola.r2{transform:rotate(2.4deg)}
.pola:hover{transform:rotate(0) scale(1.02)}

/* ---------- verdict ---------- */
.verdict{margin:0 0 clamp(30px,4vw,52px);border:1px solid var(--gold-deep);background:linear-gradient(180deg,var(--gold-soft),transparent);border-radius:var(--r);padding:clamp(22px,3vw,34px);display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;position:relative}
.verdict .vt{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.verdict .vq{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.1;letter-spacing:-.02em;max-width:28ch}
.verdict .vr{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.verdict .vr .num{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--gold)}
.verdict .stamp{position:absolute;right:clamp(14px,3vw,26px);top:-14px;font-family:var(--hand);color:var(--gold);font-size:1.2rem;transform:rotate(5deg);background:var(--ink);padding:0 8px}

/* ---------- film cards / grids ---------- */
.ns-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;gap:16px}
.ns-head h2{font-size:clamp(1.5rem,3vw,2.3rem)}
.ns-head a{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.nowshow{padding:clamp(34px,5vw,60px) 0 20px;border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr 1fr}}
.card{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);transition:border-color .25s,transform .25s var(--ease)}
.card:hover{border-color:var(--line-2);transform:translateY(-5px) rotate(-.6deg)}
.card .art{aspect-ratio:2/3;position:relative;overflow:hidden;background:var(--ink-3)}
.card .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .art .t{position:absolute;left:10px;right:10px;bottom:10px;z-index:1;font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:.98;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.75)}
.card .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,6,14,.72))}
.card .art .t{z-index:2}
.card .ft{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;gap:8px}
.card .ft .gen{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.card .ft .mini{display:inline-flex;gap:2px}
.card .ft .mini i{width:7px;height:8px;border-radius:1px;background:var(--faint)}
.card .ft .mini i.on{background:var(--gold);box-shadow:0 0 4px rgba(255,194,61,.6)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;background:rgba(6,4,10,.92);display:none;align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:88vh;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.lb-close{position:absolute;top:18px;right:20px;background:none;border:1px solid var(--line-2);color:var(--paper);font-family:var(--mono);font-size:.8rem;padding:8px 12px;border-radius:8px;cursor:pointer}

/* ---------- backlink ---------- */
.backlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:22px 0 0}
.backlink:hover{color:var(--gold)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:24px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:30px 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--dim)}
.foot .brand{font-size:1.05rem}
.foot .r{margin-left:auto;color:var(--dimmer)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}