/* Night · shared ground for index, award and gallery. Tokens, type, statuette, screening room, toast, peek. */
@font-face{font-family:"TT Norms Pro";src:url(../fonts/TT_Norms_Pro_Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TT Norms Pro";src:url(../fonts/TT_Norms_Pro_Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@property --sweep{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  /* Gala: warm charcoal, ivory type in three steps, champagne gold as the one accent, bronze for foil edges */
  --bg:oklch(0.175 0.008 60);--bg2:oklch(0.205 0.009 62);--bg3:oklch(0.235 0.01 65);
  --fg:oklch(0.95 0.012 85);--fg2:oklch(0.84 0.014 85);--fg3:oklch(0.74 0.014 80);
  --line:oklch(0.95 0.012 85 / .1);--line2:oklch(0.95 0.012 85 / .22);
  --gold:oklch(0.82 0.078 85);--gold-hi:oklch(0.9 0.06 88);--gold-lo:oklch(0.6 0.07 72);
  --gold-l:oklch(0.82 0.078 85 / .38);--gold-ll:oklch(0.82 0.078 85 / .16);
  --foil:linear-gradient(135deg,oklch(0.62 0.07 72 / .75),oklch(0.88 0.07 88 / .9) 24%,oklch(0.58 0.065 72 / .5) 52%,oklch(0.78 0.075 85 / .62) 82%,oklch(0.55 0.06 70 / .55));
  --mint:oklch(0.82 0.159 164);--mint-a:rgba(127,227,201,.3);
  --chrome:linear-gradient(100deg,#0E3B36,#7FE3C9 22%,#EFFFFA 30%,#4FB39C 48%,#0F4A43 64%,#9FF0DA 82%,#2a8a74);
  --e:cubic-bezier(.22,1,.36,1);
  --serif:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --sans:"TT Norms Pro",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:var(--sans);--num:var(--sans);
  --pad:clamp(16px,4.4vw,64px);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.8' intercept='-.9'/%3E%3CfeFuncG type='linear' slope='2.8' intercept='-.9'/%3E%3CfeFuncB type='linear' slope='2.8' intercept='-.9'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.14 0 0 0 .87 .14 0 0 0 .86 .14 0 0 0 .84 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--bg);font-feature-settings:"lnum" 1,"tnum" 1;color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;overflow-x:clip}
html.lock{overflow:hidden}
body{background:transparent;font:400 15px/1.55 var(--sans);overflow-x:clip;min-height:100vh}
img,video,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--fg);outline-offset:4px;border-radius:2px}
[hidden]{display:none!important}
::selection{background:oklch(0.82 0.078 85 / .32)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* type */
.cap{font:500 12px/1.45 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--fg2)}
.mono{font-family:var(--num);font-variant-numeric:lining-nums tabular-nums}
.disp{font-feature-settings:"lnum" 1;font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 96;letter-spacing:-.03em;line-height:.9}
.ital{font-family:var(--serif);font-style:italic;font-weight:400}
.pill{display:inline-flex;align-items:center;height:21px;padding:0 9px 0 10px;border-radius:999px;background:var(--gold);color:oklch(0.2 0.02 70);font:500 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}
.dot{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:var(--mint)}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--mint);opacity:0;animation:ping 2.2s var(--e) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.rule{display:flex;align-items:center;gap:18px}
.rule::after{content:"";flex:1;height:1px;background:var(--line)}
.chrome-t{background:var(--chrome);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.5px rgba(214,255,240,.25);animation:chromeT 9s ease-in-out infinite alternate;filter:drop-shadow(0 0 22px rgba(127,227,201,.14));padding-right:.04em}
@keyframes chromeT{from{background-position:0 0}to{background-position:100% 0}}

/* buttons + text tabs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;border-radius:999px;font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:background .5s var(--e),color .5s var(--e),box-shadow .5s var(--e)}
.btn.line{box-shadow:inset 0 0 0 1px var(--line2);color:var(--fg)}
.btn.line:hover{box-shadow:inset 0 0 0 1px rgba(242,240,237,.7)}
.btn.solid{background:var(--fg);color:oklch(0.17 0.008 60)}
.btn.solid:hover{background:#fff}
.btn.mint{background:var(--mint);color:#03140d}
.btn.gold{background:var(--gold);color:oklch(0.2 0.02 70)}
.btn.gold:hover{background:var(--gold-hi)}
.btn.foil{box-shadow:inset 0 0 0 1px var(--gold-l);color:var(--gold)}
.btn.foil:hover{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-hi)}
kbd{font:500 9.5px/1 var(--mono);padding:3px 5px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--fg2)}
.tabs{display:flex;flex-wrap:wrap;gap:2px 22px}
.tabs button{position:relative;padding:9px 0;font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--fg3);white-space:nowrap;transition:color .5s var(--e)}
.tabs button:hover{color:var(--fg2)}
.tabs button[aria-pressed="true"]{color:var(--fg)}
.tabs button::after{content:"";position:absolute;left:0;right:.24em;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e)}
.tabs button[aria-pressed="true"]::after{transform:none}
.tabs .tl{align-self:center;font:500 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(242,240,237,.22);margin-right:-8px}

/* global layers */
/* the page ground: a slow, low-chroma ambient light (champagne above, curtain emerald left, bronze right) that the
   whole site scrolls over, plus a soft vignette. Fixed, so every section sits on the same light. */
body::before,body::after{content:"";position:fixed;pointer-events:none}
body::before{inset:-18%;z-index:-2;background:
  radial-gradient(46% 34% at 50% 0%,oklch(0.86 0.07 85 / .24),transparent 72%),
  radial-gradient(52% 58% at 6% 40%,oklch(0.52 0.09 168 / .44),transparent 72%),
  radial-gradient(54% 60% at 96% 68%,oklch(0.62 0.105 62 / .36),transparent 72%),
  radial-gradient(62% 46% at 38% 104%,oklch(0.5 0.075 35 / .28),transparent 72%),
  var(--bg);animation:ambient 38s ease-in-out infinite alternate}
body::after{inset:0;z-index:-1;background:radial-gradient(130% 100% at 50% 38%,transparent 55%,oklch(0.11 0.008 60 / .45) 100%)}
@keyframes ambient{0%{transform:translate3d(-4%,-2.5%,0) scale(1)}50%{transform:translate3d(2.5%,2%,0) scale(1.06) rotate(.8deg)}100%{transform:translate3d(4.5%,-1.5%,0) scale(1.1)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
.grain{position:fixed;inset:0;z-index:2147482000;pointer-events:none;opacity:.075;mix-blend-mode:overlay;background:var(--noise);background-size:160px}
.glitter{position:fixed;inset:0;width:100%;height:100%;z-index:500;pointer-events:none}

/* curtain (light bands) */
.curtain{position:absolute;inset:0;z-index:-4;pointer-events:none}
.bands{position:absolute;inset:0 -8%;filter:blur(1.6px);will-change:transform}
.bands.a{animation:swayA 18s ease-in-out infinite alternate}
.bands.b{filter:blur(26px);opacity:.9;mix-blend-mode:screen;animation:swayB 23s ease-in-out infinite alternate}
@keyframes swayA{from{transform:translateX(-1.4%) skewX(-1.4deg)}to{transform:translateX(1.4%) skewX(1.4deg)}}
@keyframes swayB{from{transform:translateX(1.8%) skewX(1deg)}to{transform:translateX(-1.8%) skewX(-1deg)}}

/* statuette: chrome Framey on a black lacquered plinth */
.statue{display:flex;flex-direction:column;align-items:center;-webkit-box-reflect:below 1px linear-gradient(transparent 58%,rgba(255,255,255,.2))}
.nibfig{position:relative;display:block;width:var(--w);aspect-ratio:80/72;margin-bottom:calc(var(--w) * -.105);z-index:3}
.nibfig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 calc(var(--w) * .02) calc(var(--w) * .03) rgba(0,0,0,.55))}
.nibfig svg circle{fill:#eefff8}
.nibfig svg>path{filter:url(#bevel)}
.nibfig .sh,.nibfig .gl{position:absolute;inset:0;-webkit-mask:var(--nib-mask) 0 0/100% 100% no-repeat;mask:var(--nib-mask) 0 0/100% 100% no-repeat}
.nibfig .sh{background:radial-gradient(70% 72% at 42% 36%,transparent 52%,rgba(2,30,22,.55) 100%)}
.nibfig .gl{background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.8) 50%,transparent 60%) 130% 0/260% 100% no-repeat;animation:glint 5s cubic-bezier(.45,0,.25,1) .7s infinite}
@keyframes glint{0%{background-position:130% 0}30%,100%{background-position:-30% 0}}
.plinth{position:relative;display:flex;flex-direction:column;align-items:center}
.plinth::after{content:"";position:absolute;left:50%;bottom:calc(var(--w) * -.05);width:calc(var(--w) * 1.5);height:calc(var(--w) * .12);transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(127,227,201,.16),transparent 70%);pointer-events:none}
.drum{position:relative;display:block;background:linear-gradient(90deg,#020303 0%,#121515 7%,#2f3535 15%,#141717 26%,#070808 46%,#0d0f0f 66%,#272c2c 83%,#0a0b0b 93%,#020303 100%)}
.drum::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--eh);transform:translateY(-50%);border-radius:50%;background:radial-gradient(60% 80% at 50% 38%,#2a2f2f,#0c0e0e 72%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.3),inset 0 1px 1px rgba(255,255,255,.05)}
.drum::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.4));border-radius:inherit;pointer-events:none}
.d1{--eh:calc(var(--w) * .08);width:calc(var(--w) * .5);height:calc(var(--w) * .1);border-radius:0 0 50% 50%/0 0 calc(var(--w) * .04) calc(var(--w) * .04);z-index:2}
.d2{--eh:calc(var(--w) * .13);width:calc(var(--w) * .88);height:calc(var(--w) * .3);margin-top:calc(var(--w) * -.03);border-radius:0 0 50% 50%/0 0 calc(var(--w) * .065) calc(var(--w) * .065)}
.plaque{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-38%);padding:calc(var(--w) * .022) calc(var(--w) * .05);padding-right:calc(var(--w) * .05 - .42em);background:linear-gradient(100deg,#55716a,#cde8df 26%,#98b9ae 46%,#5f7e76 70%,#a8c8bd);border-radius:1px;box-shadow:0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.4);font:500 calc(var(--w) * .036)/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;white-space:nowrap;color:rgba(14,38,32,.72);text-shadow:0 1px 0 rgba(255,255,255,.5)}

/* mint wax seal with Framey */
.seal{position:relative;display:grid;place-items:center;width:var(--s,64px);aspect-ratio:1;border-radius:48% 52% 47% 53%/53% 47% 53% 47%;background:radial-gradient(circle at 33% 28%,#fbf0d2 0,#e6cc8f 16%,#c9a560 38%,#a17c3e 66%,#6e5024 100%);box-shadow:0 2px 3px rgba(0,0,0,.35),0 7px 14px -5px rgba(40,26,6,.55),inset 0 -3px 5px rgba(60,38,8,.35),inset 0 2px 3px rgba(255,255,255,.4)}
.seal::before{content:"";position:absolute;inset:11%;border-radius:50%;box-shadow:inset 0 1px 2px rgba(70,44,8,.45),0 1px 0 rgba(255,255,255,.35)}
.seal svg{position:relative;width:60%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.4)) drop-shadow(0 -1px 0 rgba(70,44,8,.35))}
.seal svg path{fill:#a8823f;stroke:#a8823f}
.seal svg circle{fill:#e2c88a}
.seal svg g path,.seal svg g circle{stroke:#5e4419;fill:#5e4419}

/* section heads */
.sec{position:relative;max-width:1520px;margin:0 auto;padding:clamp(96px,11vw,168px) var(--pad) 0}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:22px 40px;margin-bottom:clamp(30px,3.6vw,52px)}
.sec-h h2{margin-top:16px;font-size:clamp(44px,6vw,96px)}
.sec-h .sub{margin-top:16px;max-width:46ch;font:italic 400 clamp(17px,1.45vw,21px)/1.38 var(--serif);color:var(--fg2)}

/* screening room (overlay) */
.x{position:absolute;top:18px;right:var(--pad);z-index:5;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 6px;font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--fg2);transition:color .4s}
.x:hover{color:var(--fg)}
.room{position:fixed;inset:0;z-index:600;background:#000;display:grid;place-items:center;overflow:auto;outline:none;animation:fadein .5s var(--e)}
@keyframes fadein{from{opacity:0}}
.room-in{width:min(1040px,100%);padding:76px var(--pad) 40px;display:flex;flex-direction:column;gap:clamp(22px,3vh,34px);opacity:0;transform:translateY(10px);transition:opacity .9s var(--e),transform .9s var(--e)}
.room.showing .room-in{opacity:1;transform:none}
/* the film itself fills the room, blurred enough to read as light but still visibly moving */
.room-amb{position:fixed;left:-4%;top:-4%;width:108%;height:108%;z-index:-1;pointer-events:none;filter:blur(22px) saturate(1.25) brightness(.5);opacity:0;transition:opacity 1s var(--e)}
.room.showing .room-amb{opacity:1}
.room-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:62vh;margin:0 auto;box-shadow:0 0 0 1px var(--line)}
.room-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.room-info{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px 40px;align-items:end}
.ri-t{margin-top:12px;font-size:clamp(40px,4.6vw,66px);line-height:.95}
.ri-by{margin-top:10px;font:italic 400 17px/1.3 var(--serif);color:var(--fg2)}
.ri-nums{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:8px 28px;margin:0}
.ri-nums dt{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
.ri-nums dd{margin:8px 0 0;font:400 17px/1 var(--num);font-variant-numeric:tabular-nums}
.ri-act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.leader{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:#0b0c0c;cursor:pointer}
.leader::before,.leader::after{content:"";position:absolute;background:rgba(242,240,237,.16)}
.leader::before{left:0;right:0;top:50%;height:1px}
.leader::after{top:0;bottom:0;left:50%;width:1px}
.ld-ring{position:relative;z-index:1;width:min(42vmin,300px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(242,240,237,.4),inset 0 0 0 14px #0b0c0c,inset 0 0 0 15px rgba(242,240,237,.22);background:conic-gradient(rgba(242,240,237,.16) var(--sweep),transparent 0)}
.room.leading .ld-ring{animation:sweep .7s linear 3}
@keyframes sweep{from{--sweep:0deg}to{--sweep:360deg}}
.ld-n{font:400 clamp(90px,16vmin,150px)/1 var(--serif);font-variation-settings:"opsz" 96}
.ld-skip{position:absolute;bottom:28px;left:0;right:0;text-align:center;font-size:9.5px;color:var(--fg3)}

.toast{position:fixed;left:50%;top:78px;z-index:700;transform:translate(-50%,-10px);padding:13px 20px;border-radius:999px;background:oklch(0.2 0.009 62 / .94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--gold-ll),0 20px 40px -10px #000;font:400 14px/1.2 var(--sans);color:var(--fg);opacity:0;pointer-events:none;transition:opacity .5s var(--e),transform .5s var(--e);white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.peek{position:fixed;left:0;top:0;z-index:300;width:236px;aspect-ratio:16/9;pointer-events:none;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line2),0 30px 60px -20px #000;opacity:0;transform:translate3d(-999px,-999px,0);transition:opacity .35s var(--e)}
.peek.on{opacity:1}
.peek video{width:100%;height:100%;object-fit:cover}

/* reveal */
.js [data-reveal]:not(.in){opacity:0}

@media (max-width:760px){
  .room-info{grid-template-columns:1fr}
  .ri-nums{grid-template-columns:repeat(2,auto)}
  .toast{top:70px;white-space:normal;width:max-content;max-width:calc(100vw - 40px);text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* sound toggle: in the screening room's frame and the film page's player bar */
.snd{display:inline-flex;align-items:center;gap:8px;flex:none;height:30px;padding:0 13px 0 10px;border-radius:999px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);background:oklch(0.175 0.008 60 / .55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .4s var(--e),color .4s var(--e)}
.snd:hover{box-shadow:inset 0 0 0 1px rgba(242,240,237,.7)}
.snd svg{width:16px;height:16px}
.snd[aria-pressed="true"]{color:#dbc18a}
.room-frame .snd{position:absolute;right:14px;bottom:14px;z-index:2}