/* CREATIVE SYSTEMS — case study styles (scoped to .sys). Black, white, charcoal, one red. Anybody + Schibsted Grotesk. */
.sys{--paper:#f3f2ef;--ink:#121212;--char:#1b1b1b;--mute:#77746e;--mute-d:#9a968f;--rule:#d8d5cf;--rule-d:#333;--red:#d71920;
  --sg:clamp(16px,2.2vw,32px);--disp:'Anybody','Arial Narrow',Arial,sans-serif;--txt:'Schibsted Grotesk',Arial,sans-serif;
  margin:0 calc(-1 * var(--sys-bleed,0px));font:400 15px/1.5 var(--txt);color:var(--ink);-webkit-font-smoothing:antialiased}
.sys *{box-sizing:border-box}
.sys img,.sys video{display:block;max-width:100%}
.sys button{font:inherit;color:inherit;cursor:pointer}
.sys a{color:inherit}
.sys :focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sys section{padding:clamp(64px,9vw,150px) var(--sg)}
.sys-paper{background:var(--paper);color:var(--ink)}
.sys-dark{background:var(--char);color:#ecebe7}
.sys-black{background:#000;color:#ecebe7}

/* opening: the purpose in one screen */
.sys-open{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sg);align-items:end;padding-top:clamp(40px,6vw,96px)!important}
.sys-kicker{grid-column:1/-1;margin:0;font-size:13px;color:var(--mute-d);letter-spacing:.02em}
.sys-kicker b{color:var(--red);font-weight:400}
.sys-open h1{grid-column:1/8;margin:0;font:700 clamp(68px,12.5vw,210px)/.82 var(--disp);font-stretch:75%;text-transform:uppercase;display:grid}
.sys-open h1 span+span{padding-left:.5em}
.sys-intro{grid-column:8/13;margin:0;font-size:clamp(18px,1.7vw,24px);line-height:1.38;max-width:30ch}
.sys-hero{grid-column:1/-1;margin:clamp(24px,3vw,48px) 0 0;background:#000}
.sys-hero video{width:100%;aspect-ratio:16/9;object-fit:cover}
.sys-strip{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.sys-strip img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sys-path{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid #ecebe7}
.sys-path a{display:block;padding:12px 0;text-decoration:none;font-size:14px}
.sys-path i{font-style:normal;color:var(--red);margin-right:8px;font-size:12px}

/* chapter head */
.sys-ch-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sg);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.sys-no{grid-column:1/2;margin:0;font:700 clamp(28px,3vw,44px)/1 var(--disp);font-stretch:78%;color:var(--red)}
.sys-ch-head h2{grid-column:2/9;margin:0;font:700 clamp(42px,6vw,100px)/.9 var(--disp);font-stretch:75%;text-transform:uppercase;letter-spacing:-.005em}
.sys-ch-side{grid-column:9/13}
.sys-ch-side p{margin:0 0 14px;max-width:44ch}
.sys-st{display:inline-block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;white-space:nowrap}
.sys-st-test{opacity:.7}
.sys-st-concept{border-style:dashed;opacity:.7}

/* 01 archive */
.sys-fig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sg);margin:0 0 clamp(36px,4vw,56px)}
.sys-fig div{border-top:1px solid var(--ink);padding-top:10px}
.sys-fig dd{margin:0;font:700 clamp(40px,4.6vw,76px)/1 var(--disp);font-stretch:76%;font-variant-numeric:tabular-nums}
.sys-fig dt{font-size:13px;color:var(--mute)}
.sys-arch{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sg)}
.sys-sheet{grid-column:1/9;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;align-content:start}
.sys-sheet button{padding:0;border:0;background:#e3e1dc;aspect-ratio:4/5;overflow:hidden}
.sys-sheet img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.sys-sheet:hover img{opacity:.72}
.sys-sheet button:hover img,.sys-sheet button[aria-pressed="true"] img{opacity:1}
.sys-sheet button[aria-pressed="true"]{outline:3px solid var(--red);outline-offset:-3px}
.sys-card{grid-column:9/13;align-self:start;position:sticky;top:76px}
.sys-card img{width:100%;max-height:380px;object-fit:contain;background:#e3e1dc}
.sys-card h3{margin:14px 0 10px;font:700 30px/1 var(--disp);font-stretch:78%}
.sys-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:13.5px}
.sys-card dt{color:var(--mute)}.sys-card dd{margin:0}
.sys-bits{display:grid;grid-template-columns:repeat(8,9px);gap:2px}
.sys-bits i{width:9px;height:9px;background:#d8d5cf}.sys-bits i.on{background:var(--ink)}
.sys-cap{margin:16px 0 0;font-size:13px;color:var(--mute)}
.sys-dups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sg);margin-top:clamp(48px,6vw,88px)}
.sys-dups figure{margin:0;border-top:1px solid var(--ink);padding-top:12px}
.sys-dups figure>div{display:flex;gap:3px}
.sys-dups span{flex:1;min-width:0}
.sys-dups img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top}
.sys-dups small{display:block;font-size:11.5px;color:var(--mute);margin-top:4px}
.sys-dups figcaption{margin-top:10px;font-size:14px;max-width:52ch}
.sys-dups figcaption b{font-weight:400;display:block;font:700 22px/1.1 var(--disp);font-stretch:78%;margin-bottom:4px;text-transform:uppercase}

/* 02 curation */
.sys-weights{display:flex;border:1px solid var(--rule-d);margin-bottom:28px;overflow:hidden}
.sys-weights span{padding:10px 12px;font-size:12.5px;border-right:1px solid var(--rule-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-weights span:last-child{border-right:0}
.sys-weights b{font:700 20px/1 var(--disp);font-stretch:78%;margin-right:8px}
.sys-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.sys-tabs button{background:none;border:1px solid var(--rule-d);padding:8px 14px;font:700 15px/1 var(--disp);font-stretch:80%;letter-spacing:.03em}
.sys-tabs button[aria-selected="true"]{background:#ecebe7;color:var(--ink);border-color:#ecebe7}
.sys-pline{margin:0 0 20px;font-size:18px;color:#cfccc6;max-width:52ch}
.sys-cur{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sg)}
.sys-pline{grid-column:1/-1}
.sys-plates{grid-column:1/9;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-content:start}
.sys-plates button{padding:0;border:0;background:none;text-align:left}
.sys-plates img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#2a2a2a}
.sys-plates span{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--rule-d)}
.sys-plates span b{font:700 16px/1 var(--disp);font-stretch:78%}
.sys-plates button[aria-pressed="true"] span{border-bottom-color:var(--red);color:#fff}
.sys-reason{grid-column:9/13;align-self:start;position:sticky;top:76px}
.sys-reason h3{margin:0 0 12px;font:700 34px/1 var(--disp);font-stretch:78%}
.sys-reason h3 b{color:var(--red);margin-left:8px}
.sys-reason h3 small{font:400 12px/1 var(--txt);color:var(--mute-d);margin-left:6px}
.sys-reason p{margin:0 0 16px;color:#d8d5cf}
.sys-bars{list-style:none;margin:0 0 12px;padding:0}
.sys-bars li{display:grid;grid-template-columns:1fr 90px 18px;gap:10px;align-items:center;font-size:12.5px;padding:5px 0;border-top:1px solid var(--rule-d)}
.sys-bars i{height:8px;background:#353535;position:relative}
.sys-bars s{position:absolute;inset:0 auto 0 0;background:#ecebe7}
.sys-small{font-size:12px;color:var(--mute-d)!important}

/* 03 motion */
.sys-player{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sg)}
.sys-film{grid-column:1/9;width:100%;aspect-ratio:16/9;background:#0b0b0b}
.sys-reel{grid-column:9/13;list-style:none;margin:0;padding:0;border-top:1px solid #ecebe7}
.sys-reel button{display:grid;grid-template-columns:96px 1fr;gap:14px;width:100%;padding:12px 0;background:none;border:0;border-bottom:1px solid var(--rule-d);text-align:left}
.sys-reel img{width:96px;aspect-ratio:16/9;object-fit:cover;background:#1a1a1a}
.sys-reel span{font-size:12.5px;color:var(--mute-d)}
.sys-reel b{display:block;font:700 19px/1.05 var(--disp);font-stretch:78%;text-transform:uppercase;color:#ecebe7;margin-bottom:3px}
.sys-reel button[aria-current="true"] b{color:var(--red)}

/* 04 release */
.sys-states{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sg)}
.sys-states button{width:100%;background:none;border:0;border-top:3px solid var(--ink);padding:12px 0 0;text-align:left}
.sys-states button[aria-pressed="true"]{border-top-color:var(--red)}
.sys-states small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.sys-states b{display:block;font:700 clamp(56px,7vw,120px)/.9 var(--disp);font-stretch:75%;font-variant-numeric:tabular-nums}
.sys-states b.z{color:#c4c0b9}
.sys-need{margin:0 0 28px;font-size:16px;min-height:1.5em}
.sys-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sg)}
.sys-groups h3{margin:0 0 8px;font:700 22px/1 var(--disp);font-stretch:78%;text-transform:uppercase}
.sys-groups ul{list-style:none;margin:0;padding:0}
.sys-groups li{padding:7px 0;border-top:1px solid var(--rule);font-size:13.5px;color:var(--mute);transition:color .2s}
.sys-groups li.req{color:var(--ink)}
.sys-groups li.req::before{content:"";display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;margin-right:8px;vertical-align:2px}
.sys-truth{margin:40px 0 0;padding-top:16px;border-top:1px solid var(--ink);font-size:clamp(18px,1.6vw,22px);max-width:46ch}

/* 05 output */
.sys-screens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sg)}
.sys-screens figure{margin:0}.sys-screens .wide{grid-column:1/-1}
.sys-screens img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;border:1px solid var(--rule-d)}
.sys-screens figcaption{font-size:13px;color:var(--mute-d);margin-top:8px}

/* end */
.sys-end h2{margin:0 0 20px;font:700 clamp(30px,3.6vw,54px)/1 var(--disp);font-stretch:76%;text-transform:uppercase}
.sys-end ul{margin:0;padding:0;list-style:none;max-width:70ch}
.sys-end li{padding:10px 0;border-top:1px solid var(--rule-d);font-size:15px}
.sys-legend{margin:32px 0 0;font-size:13px;color:var(--mute-d);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}

@media (max-width:1000px){
  .sys-open h1,.sys-intro{grid-column:1/-1}
  .sys-ch-head h2{grid-column:2/-1}.sys-ch-side{grid-column:1/-1}
  .sys-sheet,.sys-card,.sys-plates,.sys-reason,.sys-film,.sys-reel{grid-column:1/-1}
  .sys-card,.sys-reason{position:static}
  .sys-sheet{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sys-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .sys-open h1 span+span{padding-left:0}
  .sys-path{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sys-path a{font-size:12px}.sys-path i{display:block;margin:0 0 2px}
  .sys-no,.sys-ch-head h2{grid-column:1/-1}
  .sys-sheet{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sys-fig{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .sys-dups{grid-template-columns:1fr}
  .sys-weights{flex-direction:column}.sys-weights span{flex:none!important;border-right:0;border-bottom:1px solid var(--rule-d)}
  .sys-plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sys-states{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sys-groups{grid-template-columns:1fr}
  .sys-screens{grid-template-columns:1fr}
  .sys-reel button{grid-template-columns:80px 1fr}.sys-reel img{width:80px}
}
@media (prefers-reduced-motion:reduce){.sys-sheet img,.sys-groups li{transition:none}}

/* ---------- director's cut additions (2026-11-05) ---------- */
.sys-filmbox{margin:0;background:#000}
.sys-filmbox video{width:100%;aspect-ratio:16/9;background:#000;display:block}
.sys-filmbox figcaption{display:flex;gap:10px;align-items:center;padding:12px 0 0;font-size:13px;color:var(--mute-d)}
.sys-filmbox button{background:none;border:1px solid #ecebe7;color:#ecebe7;padding:7px 14px;font-size:13px;letter-spacing:.02em}
.sys-filmbox .sys-snd{background:#ecebe7;color:#121212}
.sys-filmbox button[aria-pressed="true"]{border-color:var(--red)}
.sys-hero{grid-column:1/-1;margin-top:clamp(24px,3vw,48px)}
.sys-sub{margin:clamp(40px,5vw,72px) 0 16px;font:400 12px/1.3 var(--txt);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sys-dark .sys-sub,.sys-black .sys-sub{color:var(--mute-d)}
.sys-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 16px}
.sys-filters button{background:none;border:1px solid var(--rule);padding:6px 12px;font-size:13px}
.sys-filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sys-count{margin-left:auto;font-size:12px;color:var(--mute)}
.sys-dups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sg);margin-top:0}
.sys-dupbtn{display:block;text-align:left;background:none;border:0;border-top:1px solid var(--ink);padding:12px 0 0}
.sys-dupbtn[aria-pressed="true"]{border-top:3px solid var(--red);padding-top:10px}
.sys-dupimgs{display:flex;gap:3px;margin-bottom:10px}
.sys-dupimgs img{flex:1;min-width:0;aspect-ratio:1;object-fit:cover;object-position:top}
.sys-dupbtn b{display:block;font:700 22px/1.1 var(--disp);font-stretch:78%;text-transform:uppercase}
.sys-dupbtn small{display:block;font-size:13.5px;color:var(--mute);margin-top:4px;max-width:52ch}
.sys-compare{margin-top:24px;padding:20px;border:1px solid var(--rule);background:#fff}
.sys-cmp-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px}
.sys-cmp-row figure{margin:0}.sys-cmp-row img{width:100%;max-height:420px;object-fit:contain;background:#efede9}
.sys-cmp-row figcaption{font-size:12.5px;margin-top:8px;line-height:1.6}
.sys-compare>p{margin:14px 0 0;font-size:14px}
/* 03 process */
.sys-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid #ecebe7}
.sys-steps button{width:100%;text-align:left;background:none;border:0;padding:12px 8px 12px 0;font:700 clamp(16px,1.6vw,22px)/1.05 var(--disp);font-stretch:78%;text-transform:uppercase;color:#77746e}
.sys-steps button i{display:block;font:400 11px/1 var(--txt);color:var(--red);margin-bottom:6px}
.sys-steps button[aria-selected="true"]{color:#ecebe7;box-shadow:inset 0 3px 0 var(--red)}
.sys-crit{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 22px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-d)}
.sys-crit span::before{content:"";display:inline-block;width:6px;height:6px;background:var(--red);margin-right:8px;vertical-align:1px}
.sys-k-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.sys-k-msg{margin:0;font-size:clamp(17px,1.5vw,21px);max-width:60ch}
.sys-k-act{display:flex;gap:6px;flex-wrap:wrap}
.sys-k-act button{background:none;border:1px solid #555;color:#ecebe7;padding:8px 14px;font-size:13px}
.sys-k-act .sys-k-demo{background:#ecebe7;color:#121212;border-color:#ecebe7}
.sys-k-act button:disabled{opacity:.35;cursor:default}
.sys-wall{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.sys-wall.few{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sys-kt{position:relative;padding:0;border:0;background:#1a1a1a;text-align:left;color:#ecebe7}
.sys-kt img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:opacity .2s}
.sys-kt span{position:absolute;left:0;right:0;bottom:0;padding:18px 6px 5px;font-size:10.5px;line-height:1.2;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .2s}
.sys-kt:hover span,.sys-kt:focus-visible span,.sys-wall.few .sys-kt span{opacity:1}
.sys-wall.few .sys-kt span{position:static;background:none;padding:8px 0 0;font-size:14px}
.sys-kt[aria-pressed="true"]{outline:3px solid var(--red);outline-offset:-3px}
.sys-wall.few .sys-kt[aria-pressed="true"]{outline:0}
.sys-wall:not(.few):has(.sys-kt[aria-pressed="true"]) .sys-kt:not([aria-pressed="true"]) img{opacity:.55}
.sys-kc{margin:8px 0 0;font-size:12.5px;color:#cfccc6;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
p.sys-kc{display:block}
.sys-kc dt{text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;color:var(--mute-d);padding-top:2px}
.sys-kc dd{margin:0}
.sys-herocomp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sg);align-items:start}
.sys-hc-main{grid-column:1/8;margin:0}
.sys-hc-main img{width:100%;max-height:86vh;object-fit:contain;object-position:left top}
.sys-hc-side{grid-column:8/13}
.sys-hc-kick{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.sys-hc-side h3{margin:0 0 10px;font:700 clamp(40px,5vw,84px)/.9 var(--disp);font-stretch:75%;text-transform:uppercase}
.sys-hc-side>p{color:#cfccc6;margin:0 0 12px}
.sys-hc-sup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:20px}
.sys-hc-sup img{width:100%;aspect-ratio:3/4;object-fit:cover}
.sys-hc-side video{width:100%;margin-top:14px;aspect-ratio:16/9;background:#000}
.sys-ktest video{width:100%;max-height:78vh;aspect-ratio:16/9;background:#000}
.sys-ktest p{max-width:70ch;color:#cfccc6;font-size:14px}
.sys-k-note{margin:28px 0 0;padding-top:14px;border-top:1px solid #333;font-size:13px;color:var(--mute-d);max-width:80ch}
/* 05 walk */
.sys-walk{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 20px;font-size:12.5px;color:var(--mute)}
.sys-walkbtn{background:none;border:1px solid var(--ink);padding:8px 14px;font-size:13px}
.sys-walkbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sys-groups li.pass{color:var(--ink)}.sys-groups li.pass::after{content:" ✓";color:#1f6f3a}
.sys-groups li.block{color:var(--red)}.sys-groups li.block::after{content:" — waiting";}
/* how it works + outputs */
.sys-how .sys-filmbox{max-width:1280px}
.sys-outputs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-d)}
.sys-outputs a{display:grid;grid-template-columns:1fr auto auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule-d);text-decoration:none;align-items:baseline}
.sys-outputs b{font:700 22px/1 var(--disp);font-stretch:78%;text-transform:uppercase}
.sys-outputs span{font-size:13px;color:var(--mute-d)}
.sys-outputs i{font-style:normal;font-size:12px;color:var(--red)}
@media (max-width:1000px){ .sys-wall{grid-template-columns:repeat(6,minmax(0,1fr))} .sys-hc-main,.sys-hc-side{grid-column:1/-1} }
@media (max-width:600px){
  .sys-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sys-wall.few{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sys-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sys-steps button{font-size:12px;padding-right:4px}
  .sys-dups{grid-template-columns:1fr}
  .sys-cmp-row{grid-auto-flow:row}
  .sys-outputs a{grid-template-columns:1fr auto}.sys-outputs span{grid-column:1/-1}
}

.sys [hidden]{display:none!important}
.sys-herocomp.final{grid-template-columns:repeat(12,minmax(0,1fr))}
.sys-fo-title{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #ecebe7;padding-bottom:10px}
.sys-fo-title h3{margin:0;font:700 clamp(64px,11vw,190px)/.8 var(--disp);font-stretch:75%;text-transform:uppercase}
.sys-fo-title h3 span{color:var(--red)}
.sys-herocomp.final .sys-hc-main{grid-column:1/6}
.sys-herocomp.final .sys-hc-side{grid-column:6/13}
.sys-herocomp.final .sys-hc-side video{margin-top:0}
.sys-herocomp.final .sys-hc-side>p{margin-top:14px}
@media (max-width:1000px){.sys-herocomp.final .sys-hc-main,.sys-herocomp.final .sys-hc-side{grid-column:1/-1}}