/* Per-page colour themes. Each page sets <body data-theme="..."> and everything recolours from these tokens. */
:root{--poster:"Anton","Impact","Arial Narrow",sans-serif;--sand:#F2E2BE;--ink2:#15110E;--red:#E8431F;--orange:#FF8A2B;--sea:#0E7C7B;--sun:#FFC94A;--pink:#FF3D7F;--blue:#1F5CFF;--night:#0B0507;--acc2:#E8431F}
body[data-theme]{--neon:var(--acc);background:var(--black);color:var(--ink)}
body[data-theme=sand]{--soft:#3D342A;--tealish:var(--ink);--black:#F2E2BE;--ink:#15110E;--ash:#5A4F42;--line:rgba(21,17,14,.28);--panel:#EBD7A8;--acc:#E8431F;--accf:#F2E2BE}
body[data-theme=ink]{--soft:#D8D2C4;--tealish:var(--acc);--black:#0B0A09;--ink:#F2E2BE;--ash:#A8A398;--line:#2C2A27;--panel:#151311;--acc:#FF8A2B;--accf:#15110E}
body[data-theme=blue]{--soft:#EAF0FF;--tealish:var(--ink);--black:#1F5CFF;--ink:#FFFFFF;--ash:#DCE5FF;--line:rgba(255,255,255,.35);--panel:#1A4FE0;--acc:#FFC94A;--accf:#15110E}
body[data-theme=sea]{--soft:#E9F6EE;--tealish:var(--ink);--black:#0E7C7B;--ink:#FFF1DA;--ash:#D2EBE2;--line:rgba(255,241,218,.35);--panel:#0B6A69;--acc:#FF8A2B;--accf:#15110E}
body[data-theme=yellow]{--soft:#2E2610;--tealish:var(--ink);--black:#FFC94A;--ink:#15110E;--ash:#4A3D1A;--line:rgba(21,17,14,.3);--panel:#F6BC34;--acc:#E8431F;--accf:#FFF1DA}
body[data-theme=pink]{--soft:#3A0A1C;--tealish:var(--ink);--black:#FF3D7F;--ink:#2A0615;--ash:#4D0F27;--line:rgba(42,6,21,.35);--panel:#F2307A;--acc:#15110E;--accf:#FFE3EE}
body[data-theme=sessions]{--soft:#EBD3C0;--tealish:var(--acc);--black:#0B0507;--ink:#FFE9D6;--ash:#CBAA94;--line:#3A2420;--panel:#150A0C;--acc:#FF8A2B;--accf:#1A0A05;
 background:radial-gradient(120% 40% at 10% 0,rgba(200,25,95,.35),transparent 70%),radial-gradient(80% 30% at 100% 0,rgba(255,138,43,.22),transparent 70%),var(--black)}
body[data-theme] .nav,body[data-theme] .nav.solid{background:var(--black);border-bottom:2px solid var(--ink);backdrop-filter:none;position:fixed}
body[data-theme] .nav ul a{color:var(--ink);opacity:.8}body[data-theme] .nav ul a:hover,body[data-theme] .nav ul a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
body[data-theme] .nav .btn{background:var(--acc);color:var(--accf);border-color:var(--acc)}
body[data-theme] .nav .btn:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
body[data-theme] .btn{background:var(--ink);color:var(--black);border:2px solid var(--ink)}
body[data-theme] .btn:hover{background:transparent;color:var(--ink)}
body[data-theme] .btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
body[data-theme] .btn.neon{background:var(--acc);color:var(--accf);border:2px solid var(--acc)}
body[data-theme] .neontxt{background:none;color:var(--acc);-webkit-text-fill-color:var(--acc)}
body[data-theme=sand] .neontxt,body[data-theme=yellow] .neontxt,body[data-theme=pink] .neontxt{color:var(--ink);-webkit-text-fill-color:var(--ink);background:var(--acc);padding:0 .1em;color:var(--accf);-webkit-text-fill-color:var(--accf)}
body[data-theme] h1,body[data-theme] h2{font-family:var(--poster);font-weight:400;font-stretch:100%;text-transform:uppercase;letter-spacing:.005em;line-height:.95;text-wrap:balance}
body[data-theme] h1{font-size:clamp(44px,8vw,112px)}body[data-theme] h2{font-size:clamp(34px,5.4vw,70px)}
body[data-theme] footer{border-top:2px solid var(--ink)}
body[data-theme] .flinks a{color:var(--ink)}
body[data-theme] ::selection{background:var(--acc);color:var(--accf)}
body[data-theme] input,body[data-theme] select,body[data-theme] textarea{background:var(--panel);color:var(--ink);border-color:var(--ink)}
body[data-theme] .lightbox{background:rgba(0,0,0,.92)}body[data-theme] .lightbox .close{color:#fff}
body[data-theme] a:focus-visible,body[data-theme] button:focus-visible{outline:3px solid var(--acc);outline-offset:3px}

/* home: poster hero, trailer window */
.poster{padding:calc(72px + clamp(24px,4vw,56px)) 0 clamp(48px,6vw,80px)}
.poster .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.poster h1{font-size:clamp(46px,7.4vw,112px);margin:0}
.poster h1 em{font-style:normal;background:var(--acc);color:var(--accf);padding:0 .12em;display:inline-block;transform:rotate(-2deg)}
.poster .lead{max-width:38ch;margin-top:20px;font-size:clamp(17px,1.5vw,20px)}
.poster .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.win{position:relative;min-width:0}
.vid{position:relative;aspect-ratio:16/9;border:4px solid var(--ink);border-radius:6px;overflow:hidden;background:#000 center/cover no-repeat;box-shadow:10px 10px 0 var(--ink);display:block;width:100%;cursor:pointer;padding:0}
.vid iframe{position:absolute;top:50%;left:50%;width:177.78%;height:100%;min-width:100%;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity 1.2s}
.vid iframe.on{opacity:1}
.vid .rec{position:absolute;z-index:2;left:12px;top:10px;color:#fff;font:600 12px var(--body);letter-spacing:.06em;display:flex;gap:8px;align-items:center;text-shadow:0 1px 3px #000}
.vid .rec i{width:9px;height:9px;border-radius:50%;background:#ff2d2d;animation:bl 1.2s steps(2) infinite}
@keyframes bl{50%{opacity:.2}}
.vid .pl{position:absolute;z-index:2;right:14px;bottom:14px;width:58px;height:58px;border-radius:50%;background:var(--black);display:grid;place-items:center}
.vid .pl::after{content:"";margin-left:4px;border-left:15px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.strip{background:var(--ink);color:var(--black);padding:12px 0;overflow:hidden;white-space:nowrap;font:400 22px var(--poster);text-transform:uppercase;letter-spacing:.04em;border-block:2px solid var(--ink)}
.strip span{padding-right:28px}
.scene{padding:clamp(40px,7vw,84px) 0}
.scene .wrap>.tag{display:flex;gap:10px;align-items:center;font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.scene .wrap>.tag i{width:34px;height:12px;border-radius:99px;background:currentColor;opacity:.6}
.scene .sub{max-width:52ch;margin-top:14px;font-size:18px}
.sc-orange{background:var(--orange);color:#1A0A05;--ink:#1A0A05;--black:#FF8A2B;--line:rgba(26,10,5,.3)}
.sc-sessions{background:radial-gradient(110% 80% at 10% 130%,#FF5A2B 0,#C8195F 38%,transparent 72%),radial-gradient(70% 50% at 100% 120%,#FFB347 0,transparent 60%),#0B0507;color:#FFE9D6;--ink:#FFE9D6;--black:#0B0507;--line:#4a2a22}
.sc-sessions h2{color:#FFC27A}
.sc-sea{background:var(--sea);color:#FFF1DA;--ink:#FFF1DA;--black:#0E7C7B}
.sc-blue{background:var(--blue);color:#fff;--ink:#fff;--black:#1F5CFF}
.sc-yellow{background:var(--sun);color:#15110E;--ink:#15110E;--black:#FFC94A}
.cl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,22px);margin-top:28px}
.cl a{display:block;text-decoration:none;color:inherit;min-width:0}
.cl .th{position:relative;aspect-ratio:16/9;border:3px solid var(--ink);border-radius:5px;overflow:hidden;background:#222;box-shadow:6px 6px 0 var(--ink);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
.cl .th img{width:100%;height:100%;object-fit:cover}
.cl .th::after{content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23111'/%3E%3C/svg%3E") center/18px no-repeat}
.cl a:hover .th,.cl a:focus-visible .th{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.cl h3{font:700 16px/1.25 var(--display);margin-top:16px;text-wrap:balance}
.cl small{display:block;margin-top:2px;opacity:.8;font-size:14px}
.more{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.more .btn{background:var(--ink);color:var(--black);border-color:var(--ink)}
@media (max-width:900px){.cl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.poster .wrap{grid-template-columns:minmax(0,1fr)}.vid{box-shadow:6px 6px 0 var(--ink)}}
@media (prefers-reduced-motion:reduce){.vid .rec i{animation:none}.cl .th{transition:none}}

.js body[data-theme] .tagline .w{color:color-mix(in srgb,var(--ink) 30%,transparent)}
.js body[data-theme] .tagline .w.on{color:var(--ink)}
body[data-theme] .nav svg{filter:none}
.poster ~ .wavediv{display:none}
body[data-theme] main>section::before,body[data-theme] .shero::before{display:none!important}
body[data-theme] .wavediv i{background:var(--acc)}
body[data-theme=sand] .wavediv i,body[data-theme=yellow] .wavediv i,body[data-theme=pink] .wavediv i{background:var(--ink)}

/* sky: clouds drift fully inside the screen (fade in and out, never clipped), shift with scroll (sky.js). Transform and opacity only. */
body[data-theme] main{position:relative}
body[data-theme] main>section,body[data-theme] main>.poster{position:relative;z-index:1}
.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.clouds{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;pointer-events:none;z-index:2}
.clouds i{position:absolute;left:0;top:0;width:min(var(--w,320px),42vw)}
.clouds i::before{content:"";display:block;aspect-ratio:62/48;background:var(--ink);opacity:var(--o,.1);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 62 48'%3E%3Cpath d='M18 46h30a12 12 0 0 0 1-24 16 16 0 0 0-30-3 13 13 0 0 0-1 27z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 62 48'%3E%3Cpath d='M18 46h30a12 12 0 0 0 1-24 16 16 0 0 0-30-3 13 13 0 0 0-1 27z'/%3E%3C/svg%3E") center/contain no-repeat;
 transform:translate3d(4vw,0,0);animation:drift var(--t,90s) ease-in-out infinite alternate;animation-delay:var(--d,0s);will-change:transform}
body[data-theme=sessions] .clouds i::before,body[data-theme=ink] .clouds i::before{background:var(--acc)}
body[data-theme=sessions] .clouds i::before{--o:.16}
@keyframes drift{to{transform:translate3d(calc(100vw - min(var(--w,320px),42vw) - 4vw),0,0)}}
@media (prefers-reduced-motion:reduce){.clouds i::before{animation:none}.sky .fly,.sky .drop{display:none}}
@media (prefers-reduced-data:reduce){.sky{display:none}}
/* little visitors that cross the sky now and then */
.sky .fly{position:absolute;left:0;top:0;width:var(--s,44px);color:var(--ink);opacity:.55;animation:cross var(--t,14s) linear forwards;will-change:transform}
.sky .fly svg{display:block;width:100%;height:auto;fill:currentColor}
body[data-theme=sessions] .sky .fly,body[data-theme=ink] .sky .fly{color:var(--acc)}
@keyframes cross{from{transform:translate3d(var(--x0),var(--y0),0)}to{transform:translate3d(var(--x1),var(--y1),0)}}
.fly .wing{transform-origin:50% 60%;animation:flap .5s ease-in-out infinite alternate}
@keyframes flap{to{transform:scaleY(.35)}}
.fly .prop{transform-origin:center;animation:spin .15s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* rain from the cloud badge */
.sky .drop{position:absolute;top:0;left:0;width:2px;height:16px;border-radius:2px;background:var(--acc);opacity:0;animation:fall var(--t,.9s) linear forwards}
body[data-theme=sand] .sky .drop,body[data-theme=yellow] .sky .drop,body[data-theme=pink] .sky .drop{background:var(--ink)}
@keyframes fall{0%{opacity:0;transform:translate3d(var(--x),-20px,0)}15%{opacity:.7}to{opacity:.5;transform:translate3d(calc(var(--x) - 30px),105vh,0)}}
.cb{cursor:pointer}.cb:active{transform:scale(.94)}
/* night: moon, stars, and a tiny day/night switch bottom left */
.sky .moon{position:absolute;right:6vw;top:92px;width:54px;height:54px;color:var(--ink);opacity:0;transition:opacity 1.2s}
.sky .moon svg{width:100%;height:100%;fill:currentColor}
.sky .star{position:absolute;left:0;top:0;width:6px;height:6px;opacity:0;transition:opacity 1.2s;color:var(--ink)}
.sky .star::before{content:"";position:absolute;inset:0;background:currentColor;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:tw 3s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
body[data-theme=sessions] .sky .moon,body[data-theme=ink] .sky .moon,body[data-theme=sessions] .sky .star,body[data-theme=ink] .sky .star{color:var(--acc)}
@keyframes tw{from{transform:scale(.4);opacity:.4}to{transform:scale(1);opacity:1}}
.night .sky .moon{opacity:.75}.night .sky .star{opacity:.6}
.dn{position:fixed;left:14px;bottom:14px;z-index:30;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .16s ease-out}
.dn:active{transform:scale(.94)}.dn svg{width:22px;height:22px;fill:currentColor}.dn .mo{display:none}.night .dn .mo{display:block}.night .dn .su{display:none}
@media (prefers-reduced-data:reduce){.dn{display:none}}

/* page badge: cloud with the page's icon */
.cb{position:relative;display:inline-block;width:64px;height:50px;margin-right:12px;vertical-align:middle;animation:bob 5s ease-in-out infinite}
.cb-c{position:absolute;inset:0;width:100%;height:100%;fill:var(--acc);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;overflow:visible}
.cb-i{position:absolute;left:50%;top:56%;width:26px;height:26px;transform:translate(-50%,-50%);fill:none;stroke:var(--accf);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cbrow{margin-bottom:10px}
@keyframes bob{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.cb{animation:none}}

/* fewer sound waves: only on the Sessions pages */
body[data-theme] .wavediv,body[data-theme] .hero-wave{display:none}
body:not([data-theme=sessions]):not([data-theme=sea]) .wave{display:none}
.nav ul{gap:clamp(14px,1.8vw,28px)}
body[data-theme] .nav.open ul{background:var(--black);border-bottom:2px solid var(--ink)}
.nav ul a,.brand{white-space:nowrap}
@media (max-width:1180px){
 body[data-theme] .nav ul{display:none}
 body[data-theme] .nav.open ul{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:20px;padding:24px var(--gutter);background:var(--black);border-bottom:2px solid var(--ink)}
 body[data-theme] .menu-toggle{display:block}
}

/* trailer window: a little TV. Scanlines, vignette and a rolling bar hide the low quality; clouds drift behind it */
.poster{z-index:auto!important}
.poster .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}
.win{z-index:3;position:relative}
.win .vid{border:4px solid var(--ink);border-radius:22px;box-shadow:10px 10px 0 var(--ink);background:#000;overflow:hidden}
.vid .loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(.5px) saturate(1.15) contrast(1.08);transform:scale(1.02)}
.vid::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6) 100%);box-shadow:inset 0 0 40px rgba(0,0,0,.55)}
.vid::before{content:"";position:absolute;left:0;right:0;top:0;height:26%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,255,255,.07),transparent);animation:roll 6s linear infinite}
@keyframes roll{from{transform:translateY(-110%)}to{transform:translateY(460%)}}
.vid .rec{left:5%;top:7%;z-index:2}.vid .pl{right:5%;bottom:7%;z-index:2;border:3px solid var(--ink)}
@media (prefers-reduced-motion:reduce){.vid::before{animation:none}}
@media (prefers-reduced-data:reduce){.vid .loop{display:none}}
@media (max-width:760px){.poster .wrap{grid-template-columns:minmax(0,1fr)}}