/* Signal Festival concept. Reference: demofestival.com (Awwwards SOTD) */
:root{
  --bg:#050505;--fg:#f4f3ee;--muted:#a9a8a2;--line:rgba(244,243,238,.2);
  --glow:#fff4dc;--gut:20px;
  --display:"Anybody",system-ui,sans-serif;
  --text:"Schibsted Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:400 18px/1.45 var(--text);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--glow);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-60px;background:var(--fg);color:var(--bg);padding:10px 14px;z-index:99;text-decoration:none}
.skip:focus{top:10px}

/* Header: centred stacked logo, text "menu" right (as the reference) */
.site-head{position:fixed;inset:0 0 auto 0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:22px var(--gut);mix-blend-mode:difference;color:#fff;pointer-events:none}
.site-head>*{pointer-events:auto}
.lang{font:500 15px/1 var(--text);text-decoration:none;letter-spacing:.02em;padding-top:6px}
.lang span{opacity:.55}
.logo{display:block;text-align:center;text-decoration:none}
.logo svg{width:150px;height:auto;fill:currentColor;display:block;margin:0 auto 7px}
.logo small{display:block;font:600 12px/1.15 var(--display);font-variation-settings:"wdth" 120;text-transform:uppercase;letter-spacing:.04em}
.menu-btn{justify-self:end;background:none;border:0;color:inherit;font:500 30px/1 var(--display);font-variation-settings:"wdth" 130,"wght" 500;cursor:pointer;padding:0}
.menu{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:90px var(--gut) 28px;clip-path:inset(50% 0 50% 0);visibility:hidden;transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s .7s}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.menu-close{position:absolute;top:22px;right:var(--gut);background:none;border:0;color:var(--fg);font:500 30px/1 var(--display);font-variation-settings:"wdth" 130;cursor:pointer}
.menu nav a{display:block;font:900 clamp(44px,9vw,128px)/.9 var(--display);font-variation-settings:"wdth" 60;text-transform:uppercase;text-decoration:none;transition:font-variation-settings .5s}
.menu nav a:hover,.menu nav a:focus-visible{font-variation-settings:"wdth" 150}
.menu nav a[aria-current="page"]{color:var(--muted)}
.menu-foot{display:flex;flex-wrap:wrap;gap:8px 32px;color:var(--muted);font-size:15px}
.menu-foot a{color:var(--fg)}

/* Giant kinetic words: one word across the whole width, width axis driven by scroll */
.giant{position:relative;padding:0 var(--gut);overflow:hidden}
.giant:not(.hero-word){display:flex;flex-direction:column;justify-content:flex-end;min-height:20vw}
.giant .word{display:flex;justify-content:space-between;align-items:flex-end;white-space:nowrap;font-family:var(--display);font-weight:900;line-height:.74;text-transform:uppercase;font-variation-settings:"wdth" var(--w,100);transform-origin:50% 100%}
.giant .word span{display:block}
.lit{background:linear-gradient(100deg,#5b5a57 0%,#d9d8d2 calc(var(--sw,30%) - 22%),#fff calc(var(--sw,30%) - 4%),var(--glow) var(--sw,30%),#fff calc(var(--sw,30%) + 4%),#cfcec8 calc(var(--sw,30%) + 22%),#5b5a57 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Hero: projected word. Bottom layer = dim type, top layer = festival photo clipped into the letters, revealed by a light sweep */
.hero{position:relative;padding-top:124px}
.hero .giant{height:var(--hh,62vh)}
.hero .word{position:absolute;left:var(--gut);right:var(--gut);bottom:0}
.hero .word.base{color:#1d1d1b}
.hero .word.proj span{background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .word.proj{-webkit-mask-image:linear-gradient(100deg,transparent calc(var(--sw,50%) - 60%),#000 calc(var(--sw,50%) - 18%),#000 calc(var(--sw,50%) + 18%),transparent calc(var(--sw,50%) + 60%));mask-image:linear-gradient(100deg,transparent calc(var(--sw,50%) - 60%),#000 calc(var(--sw,50%) - 18%),#000 calc(var(--sw,50%) + 18%),transparent calc(var(--sw,50%) + 60%))}
.hero-meta{display:flex;justify-content:space-between;gap:24px;padding:18px var(--gut) 0;font:600 clamp(16px,1.6vw,22px)/1.2 var(--display);font-variation-settings:"wdth" 120;text-transform:uppercase}
.hero-meta a{text-decoration:none;border-bottom:2px solid currentColor}
.hero-credit{padding:8px var(--gut) 0;color:var(--muted);font-size:14px}

/* Big centred statement (reference: centred intro paragraph) */
.statement{max-width:1180px;margin:0 auto;padding:clamp(80px,12vw,180px) var(--gut);text-align:center;font:500 clamp(24px,3.1vw,44px)/1.18 var(--text);letter-spacing:-.01em;text-wrap:balance}
.statement a{text-underline-offset:.18em;text-decoration-thickness:2px}
.statement p+p{margin-top:.8em}
.statement .soft{color:var(--muted)}

/* Full-bleed image with centred label (reference: "Watch trailer") */
.screen{position:relative;margin:0 var(--gut);height:min(84vh,860px);overflow:hidden;background:#111}
.screen img{width:100%;height:100%;object-fit:cover}
.screen .label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-block;padding:16px 26px;border:2px solid #fff;border-radius:6px;background:rgba(5,5,5,.55);color:#fff;font:600 clamp(18px,1.8vw,26px)/1 var(--display);font-variation-settings:"wdth" 115;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
.screen .label:hover,.screen .label:focus-visible{background:#fff;color:#050505}
.screen figcaption,.cap{position:absolute;left:16px;bottom:14px;font-size:14px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* Projection wipe: a horizontal slit opens like a projector changing scene (used on images only) */
.wipe{clip-path:inset(48% 0 48% 0);transition:clip-path 1.2s cubic-bezier(.7,0,.15,1)}
.wipe.in{clip-path:inset(0 0 0 0)}
.wipe img{transform:scale(1.12);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.wipe.in img{transform:scale(1)}

/* Signal Space path */
.space{padding:0 var(--gut) clamp(80px,10vw,140px)}
.space-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:20px}
.space-grid .screen{grid-column:1/-1;margin:0}
.space h2,.h2{font:900 clamp(40px,6.4vw,104px)/.9 var(--display);font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.005em}
.space-text{grid-column:1/8;padding-top:40px}
.space-text p{font-size:clamp(20px,1.7vw,24px);max-width:36ch;margin-top:22px}
.facts{grid-column:8/-1;padding-top:44px;border-top:2px solid var(--fg);margin-top:40px;align-self:start}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;font-size:17px}
.facts dt{color:var(--muted)}
.cta{display:inline-block;margin-top:30px;padding:20px 28px;background:var(--fg);color:#050505;border-radius:6px;font:700 clamp(18px,1.6vw,22px)/1 var(--display);font-variation-settings:"wdth" 110;text-decoration:none;transition:font-variation-settings .4s,background .3s}
.cta:hover,.cta:focus-visible{font-variation-settings:"wdth" 150;background:var(--glow)}
.tlink{display:inline-block;margin-top:18px;font-weight:500;text-underline-offset:.2em}

/* Scenes: sticky stage, each artwork is a full-screen projection scene */
.scenes{position:relative;height:calc(var(--n,5) * 100vh)}
.stage{position:sticky;top:0;height:100vh;overflow:hidden}
.scene{position:absolute;inset:0;clip-path:inset(50% 0 50% 0)}
.scene:first-child{clip-path:inset(0 0 0 0)}
.scene img{width:100%;height:100%;object-fit:cover;filter:brightness(.82)}
.scene .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,0) 55%)}
.scene .credit{position:absolute;left:var(--gut);right:var(--gut);bottom:28px}
.scene .artist{font:900 clamp(44px,8.6vw,150px)/.86 var(--display);font-variation-settings:"wdth" var(--sw2,60);text-transform:uppercase;text-wrap:balance}
.scene .work{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:14px;font-size:clamp(16px,1.4vw,20px)}
.scene .work b{font:600 clamp(20px,2vw,30px)/1.1 var(--display);font-variation-settings:"wdth" 115}
.scene .work span{color:#d4d3cd}
.scene-count{position:absolute;top:110px;right:var(--gut);font:600 18px/1 var(--display);font-variation-settings:"wdth" 120;z-index:3}

/* Archive list (reference: list of names) */
.archive{padding:0 var(--gut) clamp(60px,8vw,120px)}
.archive ul{list-style:none;border-top:2px solid var(--fg)}
.archive li{display:grid;grid-template-columns:1fr 1fr 90px;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.archive li .a{font:800 clamp(22px,2.6vw,40px)/1 var(--display);font-variation-settings:"wdth" 70;text-transform:uppercase;transition:font-variation-settings .45s}
.archive li:hover .a{font-variation-settings:"wdth" 140}
.archive li .w{font-size:clamp(16px,1.3vw,19px)}
.archive li .y{text-align:right;color:var(--muted)}
.peek{position:fixed;left:0;top:0;width:320px;aspect-ratio:3/2;object-fit:cover;pointer-events:none;z-index:30;opacity:0;transition:opacity .25s;clip-path:inset(46% 0 46% 0)}
.peek.on{opacity:1;clip-path:inset(0);transition:opacity .25s,clip-path .45s}

/* Awards + newsletter */
.awards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 40px;padding:0 var(--gut);font:700 clamp(18px,1.7vw,24px)/1.2 var(--display);font-variation-settings:"wdth" 110;text-transform:uppercase}
.awards span{color:var(--muted);font-weight:500}
.closing{text-align:center;padding:clamp(80px,10vw,150px) var(--gut)}
.closing p{font:500 clamp(22px,2.4vw,34px)/1.25 var(--text);max-width:30ch;margin:0 auto}

/* Generic subpage blocks */
.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding:0 var(--gut)}
.cols .lead{grid-column:1/7}
.cols .body{grid-column:8/-1}
.body p{margin-bottom:1em;font-size:19px}
.body h3,.item h3{font:800 clamp(24px,2.4vw,34px)/1 var(--display);font-variation-settings:"wdth" 80;text-transform:uppercase;margin:0 0 10px}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 20px;padding:0 var(--gut)}
.item .screen{margin:0 0 18px;height:auto;aspect-ratio:3/2}
.item p{color:#dcdbd5;max-width:46ch}
.item .meta{color:var(--muted);font-size:15px;margin-top:8px}
.qa{padding:0 var(--gut);max-width:1100px}
.qa details{border-bottom:1px solid var(--line);padding:22px 0}
.qa summary{cursor:pointer;font:700 clamp(20px,2vw,28px)/1.15 var(--display);font-variation-settings:"wdth" 100;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa details p{margin-top:12px;max-width:62ch;color:#dcdbd5}
.sp{height:clamp(60px,9vw,130px)}

/* Footer */
.site-foot{border-top:2px solid var(--fg);margin:0 var(--gut);padding:34px 0 30px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;font-size:15px}
.site-foot h2{font:900 clamp(30px,3vw,44px)/.9 var(--display);font-variation-settings:"wdth" 70;text-transform:uppercase;margin-bottom:12px}
.site-foot ul{list-style:none}
.site-foot li{margin-bottom:6px}
.site-foot .muted,.legal{color:var(--muted)}
.legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;border-top:1px solid var(--line);padding-top:18px;font-size:14px}
.legal a{color:var(--fg)}

@media (max-width:900px){
  :root{--gut:16px}
  body{font-size:17px}
  .logo svg{width:112px}
  .logo small{font-size:10px}
  .menu-btn,.menu-close{font-size:24px}
  .hero{padding-top:104px}
  .hero-meta{flex-direction:column;gap:6px}
  .screen{height:62vh}
  .space-text,.facts,.cols .lead,.cols .body{grid-column:1/-1}
  .facts{margin-top:28px;padding-top:24px}
  .archive li{grid-template-columns:1fr 64px;gap:4px 12px}
  .archive li .w{grid-column:1;grid-row:2}
  .archive li .y{grid-row:1/3;grid-column:2}
  .items{grid-template-columns:1fr;gap:44px}
  .site-foot{grid-template-columns:1fr}
  .scene-count{top:96px}
  .peek{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .wipe{clip-path:none}.wipe img{transform:none}
  .scenes{height:auto}.stage{position:relative;height:auto}
  .scene{position:relative;height:90vh;clip-path:none!important}
  .scene-count{display:none}
  .hero .word.proj{-webkit-mask-image:none;mask-image:none}
  .hero .word.base{display:none}
}