@font-face{font-family:Lora;src:url(fonts/Lora.woff) format("woff");font-weight:400 700;font-display:swap}
@font-face{font-family:Lora;src:url(fonts/Lora-Italic.woff) format("woff");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:Carlito;src:url(fonts/Carlito.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Carlito;src:url(fonts/Carlito-Bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-Bold.woff) format("woff");font-weight:700;font-display:swap}

/* palette taken from the posters: ultramarine, neon yellow, rose, peach, lavender grey, periwinkle */
:root{
  --paper:#ECE6E8; --ink:#1B1B2B; --mute:#5A5461; --blue:#203E91; --navy:#16286b; --yellow:#FFED00;
  --peach:#DAA789; --pink:#EF8C9F; --peri:#A29ECE; --line:#CFC7CC;
  --pad:clamp(1.25rem,5vw,4rem);
  --serif:Lora,Georgia,"Times New Roman",serif;
  --sans:Carlito,Calibri,"Segoe UI",Helvetica,Arial,sans-serif;
  --disp:Poppins,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4rem}
body{margin:0;background:var(--paper);color:var(--ink);font:1.125rem/1.65 var(--serif)}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue);text-underline-offset:.2em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3{font:700 1rem/1 var(--disp);text-transform:uppercase;letter-spacing:-.02em;color:var(--blue);margin:0}
.wrap{padding:clamp(3.5rem,9vw,7rem) var(--pad)}

.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:.9rem var(--pad);font:700 1rem var(--sans);background:linear-gradient(var(--paper),rgba(236,230,232,.85));backdrop-filter:blur(6px)}
.top a{color:var(--ink);text-decoration:none}
.brand{font:700 .95rem var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.top nav a{margin-left:1.5rem}
.top a:hover{color:var(--blue);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.3em;text-underline-offset:-.05em}

/* landing */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;background:#1a1236;overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,12,40,.2),rgba(20,12,40,.05) 40%,rgba(20,12,40,.8))}
.hero-t{position:relative;z-index:1;padding:7rem var(--pad) clamp(2rem,6vw,4rem);max-width:64rem}
.stripe{display:block;width:clamp(3.5rem,8vw,5.5rem);height:clamp(4.5rem,11vw,8rem);margin-bottom:1.25rem;background:repeating-linear-gradient(-20deg,var(--yellow) 0 .62rem,transparent .62rem 1.3rem)}
.hero h1{color:#fff;font-size:clamp(3rem,10.5vw,9rem);line-height:.92;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.lead{font:1.4rem/1.45 var(--sans);max-width:28ch;margin:1.5rem 0 2rem}
.soc{display:flex;align-items:center;gap:.9rem;margin:0;flex-wrap:wrap}
.btn{font:700 1rem var(--sans);text-decoration:none;color:#fff;border:1.5px solid #fff;padding:.55rem 1.3rem;border-radius:99px}
.btn:hover{background:var(--yellow);border-color:var(--yellow);color:var(--blue)}
.ico{width:2.4rem;height:2.4rem;display:grid;place-items:center;color:#fff}
.ico:hover{color:var(--yellow)}
.ico svg{width:1.6rem;height:1.6rem}
@keyframes rise{from{opacity:0;transform:translateY(1.2rem)}}

h2{font-size:clamp(2rem,5.5vw,4rem);line-height:1}
.sub{font:1.15rem var(--sans);color:var(--mute);margin:.8rem 0 3rem}
.grp{font:700 1rem var(--sans);text-transform:none;letter-spacing:0;color:var(--mute);margin:3rem 0 .5rem}
.row{display:grid;grid-template-columns:5.5rem 1fr 11rem 4.5rem;gap:1rem;align-items:center;padding:1rem 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.row:last-child{border-bottom:1px solid var(--line)}
.row .y{font:700 1rem var(--sans);color:var(--mute)}
.row .t{font:700 clamp(1.1rem,2.3vw,1.7rem)/1.15 var(--disp);text-transform:uppercase;letter-spacing:-.02em;color:var(--blue);justify-self:start}
.row .p{font:1rem/1.3 var(--sans);color:var(--mute)}
.row img{width:4.5rem;height:4.5rem;object-fit:cover}
.row:hover .t{background:linear-gradient(transparent 58%,var(--yellow) 58%)}

/* project sections; each can take a colour world from its poster */
.proj{--bg:transparent;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,4.5rem);padding:clamp(3rem,8vw,6rem) var(--pad);background:var(--bg);color:var(--ink);border-top:1px solid var(--line)}
.proj a{color:var(--lk,var(--blue))}
.proj h3{color:var(--hd,var(--blue))}
.t-kds{--bg:var(--peach);--mute:#4b3a2e;--line:rgba(32,62,145,.35);--lk:var(--navy)}
.t-aop{--bg:var(--pink);--mute:#4a2a35;--line:rgba(32,62,145,.3);--lk:var(--navy)}
.t-mmo{--bg:var(--blue);--ink:#F3EEF0;--mute:#C5C9E6;--line:rgba(255,255,255,.28);--hd:var(--yellow);--lk:var(--yellow)}
.t-is{--bg:var(--peri);--ink:#14122B;--mute:#38355e;--line:rgba(20,18,43,.3);--hd:var(--navy);--lk:var(--navy)}
.proj-t{position:sticky;top:5rem;align-self:start}
.proj h3{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.02;overflow-wrap:anywhere}
.meta{font:1.05rem/1.4 var(--sans);color:var(--mute);margin:.9rem 0 1.5rem}
.proj p{margin:0 0 1rem}
.stops{list-style:none;padding:0;margin:1.5rem 0;font:1.05rem/1.4 var(--sans)}
.stops li{padding:.55rem 0;border-top:1px solid var(--line)}
.stops li span{display:block;color:var(--mute)}
.cr{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.25rem;font:1rem/1.45 var(--sans);margin:1.5rem 0}
.cr dt{font-weight:700}.cr dd{margin:0}
.note{font:.95rem/1.5 var(--sans);color:var(--mute)}
.links{font:1.05rem var(--sans);display:flex;flex-direction:column;gap:.3rem;margin-top:1rem}

.gal{columns:2;column-gap:.75rem;margin-top:.75rem}.gal+.gal{margin-top:0}
.gal figure{margin:0 0 .75rem;break-inside:avoid}
.gal1{margin-top:.75rem}.gal1 figure{margin:0}.gal1 img{width:100%;cursor:zoom-in;display:block}
.gal img{display:block;width:100%;cursor:zoom-in;background:rgba(0,0,0,.06)}
.vids{display:grid;gap:.75rem}
.reel{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:.5rem}
.reel .vid{flex:0 0 88%;scroll-snap-align:start}
.rnav{display:flex;gap:.5rem;justify-content:flex-end;margin:.25rem 0 0}
.rnav button{font:700 1rem var(--sans);border:1.5px solid currentColor;background:none;color:inherit;width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer}
.rnav button:hover{background:var(--yellow);border-color:var(--yellow);color:var(--blue)}
.vid{aspect-ratio:16/9;background:#14224f;position:relative}
.vid button{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;padding:1.1rem;color:#fff;font:700 1.1rem var(--sans);background:radial-gradient(circle at 70% 30%,#3a55b5 0,#14224f 75%)}
.vid button::before{content:"";position:absolute;top:50%;left:50%;width:4rem;height:4rem;margin:-2rem 0 0 -2rem;border:2px solid var(--yellow);border-radius:50%}
.vid button::after{content:"";position:absolute;top:50%;left:50%;margin:-.65rem 0 0 -.3rem;border-style:solid;border-width:.65rem 0 .65rem 1.1rem;border-color:transparent transparent transparent var(--yellow)}
.vid small{font-weight:400;font-size:.9rem;opacity:.8}
.vid button:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* supporters */
.supporters{background:#fff}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem 2.5rem;margin:2rem 0 1.5rem}
.logos img{height:3.2rem;width:auto;max-width:14rem;object-fit:contain}
.logos img.tall{height:5.2rem}

/* teaching */
.teach{border-top:1px solid var(--line)}
.teach .big{max-width:34ch}
.tg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,4rem) clamp(1.5rem,4vw,4.5rem);margin-top:3rem}
.tc{border-top:6px solid var(--yellow);padding-top:1.25rem}
.tc h3{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.05}
.tc p{margin:0 0 1rem}
.tc img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;margin:0 0 1rem}
.tc img+img{margin-top:-.25rem}
.wl{margin-top:.75rem}

.bio{border-top:1px solid var(--line)}
.bio-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,4.5rem);margin-top:2.5rem}
.big{font-size:clamp(1.4rem,2.5vw,2.05rem);line-height:1.3;margin:0 0 1.25rem}
.bio .cr{margin:0}

.contact{background:var(--blue);color:#fff}
.contact .wrap{padding-block:clamp(4rem,10vw,8rem)}
.contact p{margin:0;font:1.25rem var(--sans);opacity:.85}
.mail{display:inline-block;margin:.75rem 0 1.5rem;font:700 clamp(1.3rem,4.6vw,3.4rem)/1.1 var(--disp);color:var(--yellow);text-decoration-thickness:2px;overflow-wrap:anywhere}
.mail:hover{color:#fff}
.soc2 a{color:#fff;margin-right:1.25rem;font:1.1rem var(--sans)}
.soc2 a:hover{color:var(--yellow)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:1.25rem var(--pad);font:1rem var(--sans);background:var(--navy);color:#cfd5f2}
footer a{color:#cfd5f2;margin-left:1.25rem}

dialog{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;overflow:visible}
dialog::backdrop{background:rgba(14,18,48,.92)}
dialog img{max-width:96vw;max-height:88vh;object-fit:contain}
dialog button{display:block;margin:.6rem auto 0;font:700 1rem var(--sans);padding:.45rem 1.4rem;border-radius:99px;border:0;background:var(--yellow);color:var(--blue);cursor:pointer}

@media(max-width:860px){
  .proj,.bio-g,.tg{grid-template-columns:1fr}
  .proj-t{position:static}
  .row{grid-template-columns:3.5rem 1fr 3.5rem}
  .row .p{display:none}
  .row img{width:3.5rem;height:3.5rem}
}
@media(max-width:520px){.gal{columns:1}.top nav a{margin-left:.9rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero h1{animation:none}}

.vids video{display:block;width:auto;max-width:100%;max-height:80svh;margin:0 auto;background:#000}
.vl{list-style:none;padding:0;margin:1rem 0 0;columns:3 15rem;column-gap:2rem;font:1.05rem/1.5 var(--sans)}
.vl li{break-inside:avoid;padding:.2rem 0}
.vsum{max-width:46rem;margin:.5rem 0 0}

/* landing */
#landing{position:fixed;inset:0;z-index:100;background:#1a1236;display:grid;place-items:center;transition:opacity .7s}
#landing.out{opacity:0;pointer-events:none}
#landing .lbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
#landing::after{content:"";position:absolute;inset:0;background:rgba(10,6,24,.5);pointer-events:none}
#enter{all:unset;cursor:pointer;position:relative;z-index:2;display:grid;place-items:center;text-align:center;padding:2rem;max-width:min(54rem,92vw)}
#enter .l1{grid-area:1/1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.65),0 0 3px rgba(0,0,0,.5);font:400 clamp(1.7rem,4.4vw,3.5rem)/1.2 var(--serif);transition:opacity .35s}
#enter .l2{grid-area:1/1;color:var(--yellow);text-shadow:0 2px 24px rgba(0,0,0,.55);font:700 clamp(5rem,20vw,14rem)/1 var(--disp);opacity:0;transition:opacity .35s}
#enter:hover .l1,#enter:focus-visible .l1{opacity:0}
#enter:hover .l2,#enter:focus-visible .l2{opacity:1}
#enter:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}
@media(prefers-reduced-motion:reduce){#landing{transition:none}}
.rh{font:700 clamp(1.1rem,2vw,1.4rem) var(--disp);text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);margin:3rem 0 1rem}
.hero .pc{position:absolute;z-index:1;right:var(--pad);bottom:1rem;font:.8rem var(--sans);color:rgba(255,255,255,.75)}
.portrait{margin:2rem 0 0;max-width:26rem}.portrait img{width:100%;display:block}.portrait figcaption{margin-top:.5rem}