:root{
  --paper: #ffffff;
  --paper-2: #f3f1ec;
  --frame: #ffffff;
  --ink: #0a0a0a;
  --ink-2: rgba(10,10,10,.74);
  --muted: rgba(10,10,10,.5);
  --hair: rgba(10,10,10,.14);
  /* bold palette (from the ARCHIVIST deck) */
  --pink: #ff2e88;
  --yellow: #fff200;
  --blue: #1a2bff;
  --cyan: #00e0ff;
  --red: #ff3b1f;
  --black: #0a0a0a;
  --cream: #f5f1e8;
  --accent: var(--pink);
  --serif: 'Inter', 'Helvetica Neue', Arial, sans-serif;   /* main face (kept var name) */
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --pad: clamp(22px, 4.5vw, 72px);
}
/* colour-block sections */
.on-black{--paper:var(--black); --paper-2:#1b1b1b; --ink:var(--cream); --ink-2:rgba(245,241,232,.78); --muted:rgba(245,241,232,.55); --hair:rgba(245,241,232,.2); background:var(--black); color:var(--ink)}
.on-yellow{--paper:var(--yellow); --paper-2:#efe300; --ink:var(--black); --ink-2:rgba(10,10,10,.8); --muted:rgba(10,10,10,.6); --hair:rgba(10,10,10,.22); --accent:var(--black); background:var(--yellow); color:var(--ink)}
.on-pink{--paper:var(--pink); --paper-2:#f0207a; --ink:var(--black); --ink-2:rgba(10,10,10,.82); --muted:rgba(10,10,10,.62); --hair:rgba(10,10,10,.24); --accent:var(--yellow); background:var(--pink); color:var(--ink)}
.on-red{--paper:var(--red); --ink:var(--black); --ink-2:rgba(10,10,10,.82); --muted:rgba(10,10,10,.62); --hair:rgba(10,10,10,.24); --accent:var(--black); background:var(--red); color:var(--ink)}
.on-blue{--paper:var(--blue); --ink:var(--cream); --ink-2:rgba(245,241,232,.82); --muted:rgba(245,241,232,.62); --hair:rgba(245,241,232,.25); --accent:var(--yellow); background:var(--blue); color:var(--ink)}
/* deck-style eyebrow: [01] LABEL */
.tag{display:inline-flex; align-items:center; gap:12px; margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.tag b{font-weight:500; border:1.5px solid currentColor; padding:1px 7px; letter-spacing:.06em}
.hl{color:var(--accent)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-weight:450; font-size:17px; line-height:1.55; font-optical-sizing:auto; font-feature-settings:'ss01','cv11';
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
image-slot{height:auto !important}

/* ---------- press ---------- */
.press{padding:clamp(100px,16vh,200px) var(--pad) clamp(60px,10vh,120px); border-top:1px solid var(--hair)}
.press h2{font-size:clamp(34px,4vw,60px); letter-spacing:-.012em; margin:14px 0 clamp(44px,7vh,80px)}
.pr-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:clamp(40px,6vw,110px); align-items:start}
.pr-k{margin:0 0 18px}
.pr-honours ul{list-style:none; margin:0; padding:0}
.pr-honours li{display:grid; grid-template-columns:52px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--hair); font-size:17px; line-height:1.35}
.pr-honours li .mono{color:var(--muted); padding-top:4px}
.pr-honours li b{display:block; font-weight:800; color:var(--ink); font-size:15px; margin-bottom:2px; text-transform:uppercase; letter-spacing:-.01em}
.pr-fest{margin:0; display:flex; flex-wrap:wrap; gap:8px}
.pr-fest span{font-size:13px; font-weight:600; color:var(--ink); border:1.5px solid var(--ink); padding:5px 10px}
.pr-bar{display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:6px}
.pr-bar .pr-k{margin:0}
.pr-filter{display:flex; gap:4px; flex-wrap:wrap}
.pr-filter button{all:unset; cursor:pointer; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:7px 11px; color:var(--ink-2); border:1px solid transparent; transition:border-color .3s, background .3s, color .3s}
.pr-filter button:hover{border-color:var(--hair)}
.pr-filter button[aria-pressed="true"]{background:var(--pink); color:var(--black)}
.pr-list{list-style:none; margin:14px 0 0; padding:0}
.pr-list li{animation:tpIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--k) * 35ms)}
.pr-item{display:grid; grid-template-columns:150px 1fr; grid-template-rows:auto auto; column-gap:24px; row-gap:6px; padding:20px 0; border-top:1px solid var(--hair); text-decoration:none}
.pr-item .o{grid-row:1/3; color:var(--pink); padding-top:5px; font-weight:500}
.pr-item .t{font-size:clamp(18px,1.4vw,22px); line-height:1.25; font-weight:700; letter-spacing:-.015em; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pr-item .m{color:var(--muted); font-size:10px}
a.pr-item:hover .t{transform:translateX(6px)}
.pr-item.nolink .t{color:var(--ink-2)}
.pr-list li:last-child .pr-item{border-bottom:1px solid var(--hair)}
.pr-more{all:unset; cursor:pointer; margin-top:22px; padding:12px 20px; border:1px solid var(--ink); transition:background .3s, color .3s}
.pr-more:hover{background:var(--ink); color:var(--paper)}
.pr-more[hidden]{display:none}
.pr-foot{margin-top:clamp(50px,8vh,90px)}
@keyframes tpIn{from{opacity:0; transform:translateY(10px)}}
@media (max-width:900px){ .pr-grid{grid-template-columns:1fr} .pr-item{grid-template-columns:1fr} .pr-item .o{grid-row:auto} }

p{text-wrap:pretty}
h1,h2,h3{font-weight:900; margin:0; text-wrap:balance; letter-spacing:-.04em; line-height:.95}
h2{text-transform:uppercase}
em{font-style:normal}
.mono{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:400}
.muted{color:var(--muted)}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:baseline; justify-content:space-between;
  padding:26px var(--pad);
  transition:background .5s, padding .5s;
}
.nav.scrolled{background:color-mix(in oklch, var(--paper) 86%, transparent); backdrop-filter:blur(10px); padding-top:16px; padding-bottom:16px}
.nav .name{font-family:var(--serif); font-size:18px; font-weight:900; text-decoration:none; letter-spacing:-.02em; text-transform:uppercase}
.nav ul{list-style:none; display:flex; gap:clamp(18px,3vw,40px); margin:0; padding:0}
.nav ul a{text-decoration:none; position:relative; padding-bottom:3px}
.nav ul a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .45s cubic-bezier(.2,.7,.2,1)}
.nav ul a:hover::after, .nav ul a[aria-current]::after{right:0}
.nav .ext{font-size:10px; margin-left:4px; vertical-align:1px}
@media (max-width:560px){
  .nav{padding:18px 18px; gap:12px}
  .nav .name{font-size:17px; white-space:nowrap}
  .nav ul{gap:12px; font-size:9.5px; letter-spacing:.08em}
}
@media (max-width:640px){
  .nav{flex-wrap:wrap; row-gap:10px}
  .nav ul{width:100%; justify-content:space-between; align-items:center; white-space:nowrap}
  .nav.scrolled{padding-top:12px; padding-bottom:12px}
}

/* ---------- polaroid ---------- */
.polaroid{
  background:var(--frame); padding:12px 12px 46px;
  box-shadow: 0 1px 1px oklch(30% 0.02 60 / .06), 0 14px 34px -14px oklch(30% 0.02 60 / .28);
  position:relative;
}
.polaroid image-slot{display:block; width:100%; aspect-ratio:1/1.04; background:var(--paper-2)}
.polaroid figcaption{position:absolute; left:14px; right:14px; bottom:12px; font-style:italic; font-size:15px; color:var(--ink-2)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ---------- footer / contact ---------- */
.contact{padding:clamp(110px,16vh,200px) var(--pad) 48px}
.contact h2{font-size:clamp(44px,7vw,112px); max-width:13ch}
.contact h2 em{color:var(--cream)}
.contact .row{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px; margin-top:72px; max-width:980px}
.contact .row a{font-size:22px; font-weight:700; letter-spacing:-.01em; text-decoration:none; border-bottom:1px solid var(--hair); padding-bottom:4px; transition:border-color .3s}
.contact .row a:hover{border-color:var(--ink)}
.contact .row .mono{display:block; margin-bottom:12px; color:var(--muted)}
.colophon{display:flex; justify-content:space-between; margin-top:120px; color:var(--muted)}

/* ---------- play: photos in action ---------- */
.play{margin-top:clamp(70px,11vh,130px)}
.play-head{display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:20px}
.play-head .pr-k{margin:0}
.play-note{margin:0; font-size:15px; font-weight:600; color:var(--ink-2)}
.play-grid{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(120px,14vw,210px); gap:clamp(8px,1vw,14px)}
.play-grid image-slot{display:block; width:100%; height:100% !important; background:var(--paper-2)}
.play-grid .p1{grid-column:1/3; grid-row:span 2}
.play-grid .p2{grid-column:3/5}
.play-grid .p3{grid-column:5/7; grid-row:span 2}
.play-grid .p4{grid-column:3/4}
.play-grid .p5{grid-column:4/5}
.play-grid .p6{grid-column:1/7; grid-row:span 1}
.play-grid .p2{outline:4px solid var(--pink); outline-offset:-4px}
.play-grid .p5{outline:4px solid var(--yellow); outline-offset:-4px}
@media (max-width:760px){ .play-grid{grid-template-columns:1fr 1fr; grid-auto-rows:40vw} .play-grid image-slot{grid-column:auto !important; grid-row:auto !important} }

/* nav over the video hero: light until scrolled */
.nav.on-hero:not(.scrolled){color:var(--cream)}

/* ---------- festival laurels ---------- */
.fest{margin-top:clamp(64px,10vh,110px)}
.laurels{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; row-gap:clamp(26px,3.5vw,48px); --cols:6}
.laurels li{flex:0 0 calc(100% / var(--cols)); min-width:0; box-sizing:border-box; padding:0 clamp(6px,1vw,14px); display:flex; align-items:center; justify-content:center; gap:4px; color:var(--ink); height:clamp(92px,8vw,112px); transition:transform .45s cubic-bezier(.2,.7,.2,1), color .25s}
.laurels li:hover{transform:translateY(-4px); color:var(--pink)}
.laurels .lf{flex:none; align-self:stretch; width:clamp(30px,2.6vw,38px); background:currentColor; -webkit-mask:url(assets/laurel-left.svg) center/contain no-repeat; mask:url(assets/laurel-left.svg) center/contain no-repeat}
.laurels .lf.r{-webkit-mask-image:url(assets/laurel-right.svg); mask-image:url(assets/laurel-right.svg)}
.laurels .lt{display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; max-width:120px; min-width:0; flex:0 1 auto}
.laurels .lt span{overflow-wrap:anywhere; hyphens:auto}
.laurels .lt b{font-family:var(--mono); font-weight:500; font-size:9px; letter-spacing:.14em; text-transform:uppercase; line-height:1.25}
.laurels .lt span{font-weight:900; font-size:clamp(12px,1vw,14px); line-height:1.02; letter-spacing:-.02em; text-transform:uppercase; text-wrap:balance}
.laurels .lt i{font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.14em; opacity:.7}
.laurels li.img img{max-height:100%; max-width:100%; object-fit:contain}
.laurels li:nth-child(1), .laurels li:nth-child(2){color:var(--pink)}
.laurels li:nth-child(1):hover, .laurels li:nth-child(2):hover{color:var(--ink)}

/* ---------- press gallery ---------- */
.pr-top{display:grid; grid-template-columns:minmax(240px,.55fr) minmax(0,1.45fr); gap:clamp(36px,5vw,90px); align-items:start}
.pgal{list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(92px,9vw,138px); grid-auto-flow:dense; gap:clamp(6px,.7vw,10px)}
.pgal li{animation:tpIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--k) * 30ms)}
.pgal li.big{grid-column:span 2; grid-row:span 2}
.pgal li.wide{grid-column:span 2}
.pg{position:relative; display:block; width:100%; height:100%; overflow:hidden; background:var(--paper-2); text-decoration:none; color:var(--black); outline:none}
.pg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .5s, transform 1s cubic-bezier(.2,.7,.2,1)}
.pg:hover img, .pg:focus-visible img{filter:none; transform:scale(1.05)}
.pg-ph{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted)}
.pg-o{position:absolute; left:8px; bottom:8px; background:var(--black); color:var(--cream); font-size:9px; padding:3px 6px; transition:opacity .25s}
.pg-ov{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:clamp(10px,1.1vw,16px); background:var(--pink); opacity:0; transition:opacity .3s}
.pgal li:nth-child(3n+2) .pg-ov{background:var(--yellow)}
.pgal li:nth-child(3n) .pg-ov{background:var(--cyan)}
.pg:hover .pg-ov, .pg:focus-visible .pg-ov{opacity:1}
.pg:hover .pg-o, .pg:focus-visible .pg-o{opacity:0}
.pg-ov > *{transform:translateY(10px); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pg:hover .pg-ov > *, .pg:focus-visible .pg-ov > *{transform:none}
.pg-m{font-size:9px; letter-spacing:.12em}
.pg-t{font-weight:900; text-transform:uppercase; letter-spacing:-.025em; line-height:.98; font-size:clamp(12px,1vw,15px); display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}
.pgal li.big .pg-t{font-size:clamp(16px,1.6vw,24px)}
.pg-go{font-size:9.5px; letter-spacing:.14em}
.pg.nolink .pg-go{opacity:.6}
@media (max-width:900px){ .pr-top{grid-template-columns:1fr} .pgal{grid-template-columns:repeat(2,1fr); grid-auto-rows:34vw} .pg-ov{opacity:1; background:linear-gradient(transparent 35%, rgba(10,10,10,.85)) !important; color:var(--cream)} .pg-o{display:none} .pg img{filter:none} }


/* background music button */
.sound-btn{all:unset; position:fixed; right:clamp(14px,2vw,28px); bottom:clamp(14px,2vw,28px); z-index:90; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  padding:13px 18px 13px 16px; background:var(--yellow); color:var(--black); border:2px solid var(--black); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 10px 30px -10px rgba(0,0,0,.6); transition:background .25s, color .25s}
.sound-btn:hover, .sound-btn:focus-visible{background:var(--pink); color:var(--black)}
.sound-btn:focus-visible{outline:2px solid var(--yellow); outline-offset:3px}
.sb-bars{display:inline-flex; align-items:flex-end; gap:2px; height:12px}
.sb-bars i{display:block; width:2px; height:3px; background:currentColor; transition:height .3s}
.sound-btn.on .sb-bars i{animation:sb 1s ease-in-out infinite}
.sound-btn.on .sb-bars i:nth-child(2){animation-delay:-.3s}
.sound-btn.on .sb-bars i:nth-child(3){animation-delay:-.6s}
.sound-btn.on .sb-bars i:nth-child(4){animation-delay:-.15s}
@keyframes sb{0%,100%{height:3px} 50%{height:12px}}
@media (prefers-reduced-motion: reduce){ .sound-btn.on .sb-bars i{animation:none; height:9px} }
@media (max-width:560px){ .sound-btn{padding:11px 14px; font-size:11px} }

.nav .ig a{display:inline-flex; align-items:center; padding-bottom:3px}
.nav .ig svg{display:block; transition:transform .25s}
.nav .ig a:hover svg{transform:scale(1.15)}
.nav .ig a::after{display:none}