@font-face{font-family:"NHGD";src:url(../fonts/nhg55.otf);font-weight:400;font-display:swap}
@font-face{font-family:"NHGD";src:url(../fonts/nhg75.otf);font-weight:700;font-display:swap}
@font-face{font-family:"NHGD";src:url(../fonts/nhg95.otf);font-weight:900;font-display:block}
@font-face{font-family:"Marker";src:url(../fonts/marker.ttf);font-display:block}
:root{--red:#E5140C;--blk:#0C0C0C;--paper:#EDEBE6;--dim:#2a0706}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--blk)}
body{font-family:"NHGD",Helvetica,Arial,sans-serif;color:var(--paper);background:var(--blk);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block}

/* type */
.big{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.8;white-space:nowrap}
.ln{display:block;width:max-content;margin-top:.1em}
.ln:first-child{margin-top:0}
/* optical alignment of the big letters with the small labels: set per line in site.js (fit) */
.lab{font-weight:700;font-size:clamp(10px,.8vw,15px);letter-spacing:.03em;text-transform:uppercase;line-height:1.2}
.mk{font-family:"Marker";text-transform:uppercase;line-height:.9;white-space:nowrap;font-weight:400;letter-spacing:0}
.sw{position:relative;display:inline-block}
.ov{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%) rotate(-5deg);font-family:"Marker";letter-spacing:0;line-height:1;white-space:nowrap;z-index:5;font-weight:400}
.bw{filter:grayscale(1) contrast(1.35) brightness(1.02)}

/* film layer */
#grain{position:fixed;inset:-100px;z-index:90;pointer-events:none;background:url(../media/grain.png);opacity:.16;mix-blend-mode:overlay;animation:gr .5s steps(5) infinite}
@keyframes gr{0%{transform:translate(0,0)}20%{transform:translate(-37px,23px)}40%{transform:translate(29px,-41px)}60%{transform:translate(-53px,-17px)}80%{transform:translate(41px,47px)}100%{transform:translate(0,0)}}
#vig{position:fixed;inset:0;z-index:89;pointer-events:none;background:radial-gradient(120% 120% at 50% 50%,rgba(0,0,0,0) 62%,rgba(0,0,0,.28))}

/* hud */
#hud{position:fixed;left:3.3vw;top:2.6vh;z-index:80;color:var(--red);mix-blend-mode:normal;transition:color .4s}
#hud b{font-weight:700}
#bar{position:fixed;left:0;bottom:0;height:3px;background:var(--red);z-index:80;width:0}
body.light #hud{color:var(--blk)}
body.pale #hud{color:var(--paper)}

/* stops */
.stop{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* hero */
#start .stage{background:#050505}
#start .ph{position:absolute;right:-9vw;top:-14vh;height:122vh;aspect-ratio:4/3}
#start .ph img{width:100%;height:100%;object-fit:cover}
#start .fade{position:absolute;left:0;top:0;width:47vw;height:100%;background:linear-gradient(90deg,#050505 76%,rgba(5,5,5,0))}
#start .patch{display:none}
/* solid cover over the caption that is baked into the photo; it moves and scales with the photo */
#start .ph:after{content:"";position:absolute;left:3%;top:19%;width:20%;height:15%;background:#050505;box-shadow:0 0 2.5vh 2.5vh #050505}
#start .name{position:absolute;left:3.3vw;top:17vh;color:var(--red);opacity:.94}
#start .role{position:absolute;right:15vw;bottom:11vh;text-align:right;color:#fff;font-size:6.4vw;line-height:.84}
#start .role span.l{display:block}
/* the handwritten word ends on the same right line as the two printed words */
#start .role .ov{color:var(--red);font-size:1.3em;left:auto;right:-.04em;transform:translateY(-58%) rotate(-6deg)}
#start .labs{position:absolute;left:3.3vw;right:3.3vw;top:2.6vh;display:flex;justify-content:space-between;color:var(--red)}
#start .labs span:first-child{visibility:hidden}
#start .labs span:last-child{text-align:right}
#start .go{position:absolute;left:3.3vw;bottom:4vh;color:#fff}

/* works */
.work{position:absolute;inset:0;opacity:0;visibility:hidden;background:#000;transform:translateY(calc(var(--d,0)*100%))}
.work.on{opacity:1;visibility:visible;transform:none;transition:transform .6s cubic-bezier(.7,0,.2,1);z-index:2}
.work.was{opacity:1;visibility:visible;transform:none;z-index:1}
.work.rest{opacity:1;visibility:visible;transform:none}
.work .back{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:grayscale(1) brightness(.2) blur(18px);transition:filter .5s}
.work .title{position:absolute;left:3.3vw;top:50%;transform:translateY(-50%);color:var(--red);transition:color .5s,opacity .5s}
.work .vid{position:absolute;top:0;left:50%;height:100%;width:min(100vw,56.25vh);width:min(100vw,56.25svh);transform:translateX(-50%);object-fit:cover;cursor:pointer;background:#000}
.work.wide .vid{left:0;width:100%;transform:none;object-fit:contain}
.work.wide .title{top:auto;bottom:9vh;transform:none;color:#fff;z-index:3}
.work.wide .title .r{color:var(--red)}
.work.wide .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0) 45%),linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0) 34%);pointer-events:none;transition:opacity .5s}
.work .hint{position:absolute;right:3.3vw;top:2.6vh;color:#fff;text-align:right;z-index:4;cursor:pointer}
.work .notes{position:absolute;left:3.3vw;bottom:4vh;width:min(30vw,520px);color:#fff;font-size:clamp(12px,1vw,19px);line-height:1.2;z-index:4}
.work .notes .lab{color:var(--red)}
.work .notes p{margin-top:.35em;display:grid;grid-template-columns:3.4em 1fr;align-items:baseline}
.work .notes p .lab{display:block}
.work .notes .lab.fig{display:block;margin-bottom:.8em}
.work.wide .notes{bottom:auto;top:7vh}
.work .joke{position:absolute;left:3.6vw;bottom:25vh;width:27vw;white-space:normal;line-height:1;font-size:2.7vw;color:#fff;transform:rotate(-3deg);z-index:4;transition:opacity .4s}
.work .col{position:absolute;right:11vw;top:-1vh;color:var(--red);font-weight:900;font-size:2.6vw;letter-spacing:-.045em;line-height:.88;text-transform:uppercase;z-index:3;transition:opacity .5s;filter:url(#ink2)}
body.playing .work .title{color:var(--dim)}
body.playing .work .back{filter:grayscale(1) brightness(.05) blur(18px)}
body.playing .work.wide .title,body.playing .work .joke,body.playing .work .col,body.playing .work.wide .shade{opacity:0}

/* type interlude */
#kubrick{background:var(--red);color:var(--blk);position:relative;overflow:hidden;min-height:100vh}
#kubrick .ph{height:44vh;overflow:hidden;background:#000;position:relative}
/* the photo is smaller and higher, so the whole face is in the band; its left edge fades into the black */
#kubrick .ph img{position:absolute;right:-5vw;top:0;width:54vw;height:113%;object-fit:cover;object-position:50% 6%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
#kubrick .ph:before{content:"";position:absolute;right:0;bottom:0;width:7vw;height:9vh;background:#000;box-shadow:0 0 2vh 2vh #000,-10vw 6.5vh 0 0 #000;z-index:1}
#kubrick .ph:after{content:"";position:absolute;left:0;top:0;bottom:0;width:46vw;background:linear-gradient(90deg,#000 55%,rgba(0,0,0,0))}
/* style frame: each line fills the same width, so a short line is larger than a long line */
#kubrick .a{position:absolute;left:3.3vw;top:5vh;color:var(--red);z-index:2}
#kubrick .a .ln,#kubrick .b .ln{line-height:.84;display:block}
#kubrick .b{display:flex;flex-direction:column;align-items:flex-end;padding:3vh 3.3vw 4vh;text-align:right}
/* "generated" is written on top of "filmed" */
#kubrick .ov{color:var(--paper);font-size:.66em;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-5deg)}
#kubrick .side{position:absolute;left:3.3vw;top:calc(44vh + 4vh)}
#kubrick .ph img.bw{filter:grayscale(1) contrast(1.02) brightness(1.3)}
#kubrick .side p{margin-bottom:4.5vh}

/* built */
#built{background:var(--paper);color:var(--blk);position:relative;overflow:hidden;padding:8vh 3.3vw 9vh;min-height:100vh}
#built .ov{color:var(--red);font-size:.78em}
#built .row{display:flex;gap:3vw;margin-top:7vh;align-items:flex-start;flex-wrap:wrap}
#built .screen{width:42vw;aspect-ratio:16/9;transform:rotate(-1deg);background:#000;overflow:hidden;flex:none}
#built .screen video,#built .screen img{width:100%;height:100%;object-fit:cover}
#built .tool{width:18vw;min-width:230px}
#built .tool h3{font-size:2.4vw}
#built .tool p{font-size:clamp(14px,1.05vw,20px);line-height:1.2;margin-top:.9em;font-weight:400}
#built .tool+.tool h3{margin-top:0}
/* what is inside the playbook */
#built .pbl{list-style:none;margin-top:1.4em;font-size:clamp(12px,.9vw,17px);line-height:1.2;font-weight:400}
#built .pbl li{border-top:1px solid rgba(12,12,12,.25);padding:.55em 0}
#built .pbl b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
#built .scrw{position:relative;width:50vw;flex:none}
#built .touch{color:var(--red);font-size:2.6vw;position:absolute;right:-1.2vw;bottom:-3vw;transform:rotate(-5deg);pointer-events:none;z-index:3}
/* working Review Board demo */
.demo{width:100%;aspect-ratio:16/9;background:#0b0b0b;color:#d8d8d8;display:flex;flex-direction:column;font-size:max(9px,.86vw);font-weight:400;line-height:1.3;overflow:hidden;text-transform:none;letter-spacing:0}
.demo button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.demo .dt{display:flex;align-items:center;gap:1.4em;padding:.75em 1.2em;border-bottom:1px solid #222;flex:none}
.demo .dt b{color:#fff;font-weight:700}
.demo .vs{display:flex;gap:.9em}
.demo .vs button{color:#777;font-weight:700}
.demo .vs button.on{color:#fff;border-bottom:1px solid #fff}
.demo .ds{margin-left:auto;color:#777}
.demo .dm{flex:1;display:flex;min-height:0}
.demo .dv{flex:1;background:#000;display:flex;align-items:center;justify-content:center;min-width:0;padding:.8em 0}
.demo .df{position:relative;height:100%;aspect-ratio:9/16}
.demo .df video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.demo .df canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.demo .dp{width:40%;border-left:1px solid #222;display:flex;flex-direction:column;min-height:0}
.demo form{display:flex;gap:.8em;padding:1em 1.2em;border-bottom:1px solid #222}
.demo input{flex:1;min-width:0;font:inherit;color:#fff;background:none;border:0;border-bottom:1px solid #444;padding:.35em 0;outline:0}
.demo input:focus{border-color:#fff}
.demo form button{background:#fff;color:#000;font-weight:700;padding:.35em .9em}
.demo .dh{display:flex;justify-content:space-between;padding:.7em 1.2em;color:#777}
.demo ul{list-style:none;overflow-y:auto;flex:1;padding:0 1.2em 1em}
.demo li{border-left:2px solid var(--red);padding:.1em 0 .1em .8em;margin-top:.9em;cursor:pointer}
.demo li:hover{background:#151515}
.demo li .h{color:#888;display:flex;gap:.8em}
.demo li .h b{color:#fff;font-weight:700}
.demo li .h i{font-style:normal;margin-left:auto}
.demo li p{color:#d8d8d8;overflow-wrap:anywhere}
.demo .db{display:flex;align-items:center;gap:1.2em;padding:.7em 1.2em;border-top:1px solid #222;flex:none}
.demo .db .pl{color:#fff;font-weight:700;width:3.4em;text-align:left}
.demo .tm{color:#888;font-variant-numeric:tabular-nums}
.demo .tl{flex:1;height:1.4em;position:relative;cursor:pointer}
.demo .tl:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#444}
.demo .tl i{position:absolute;top:50%;width:.6em;height:.6em;margin:-.3em 0 0 -.3em;border-radius:50%;background:#fff}
.demo .tl u{position:absolute;top:50%;width:.4em;height:.4em;margin:-.2em 0 0 -.2em;border-radius:50%;background:var(--red)}
.demo .cl{color:#888}
.demo .cl:hover{color:#fff}
#built .labc{position:absolute;right:3.3vw;top:2.6vh;color:var(--red);text-align:right}

/* archive */
#archive{background:var(--blk);padding:8vh 3.3vw 12vh;position:relative}
#archive .head{color:var(--paper)}
#archive .head .ov{color:var(--red);font-size:.7em}
#archive ul{list-style:none;margin-top:8vh}
#archive li a{display:flex;align-items:center;gap:2vw;padding:1.2vh 0;border-top:1px solid #2a2a2a;color:var(--paper);transition:color .2s}
#archive li a:hover{color:var(--red)}
#archive li img{height:6.2vw;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) contrast(1.2);transition:filter .2s;flex:none}
#archive li a:hover img{filter:none}
#archive li .t{font-size:6.2vw}
#archive li .lab{margin-left:auto;text-align:right;color:var(--red);flex:none}
#archive h4{color:var(--red);margin-top:9vh}
#archive .more{display:block;width:max-content;margin:3vh 0 0 auto;text-align:right;color:var(--paper);border-top:1px solid #2a2a2a;padding-top:1.2vh}
#archive .more:hover{color:var(--red)}

/* end */
#end{background:var(--red);color:var(--blk);min-height:100vh;position:relative;overflow:hidden;padding:8vh 3.3vw 16vh}
#end .ov{color:var(--paper);font-size:.82em}
#end .hello{font-size:2.6vw;transform:rotate(-3deg);display:inline-block;margin-top:5vh;color:var(--blk)}
#end .links{position:absolute;left:3.3vw;right:3.3vw;bottom:4vh;display:flex;justify-content:space-between;flex-wrap:wrap;gap:2vh 4vw}
#end .links a{font-weight:900;font-size:clamp(18px,2.2vw,44px);letter-spacing:-.03em;text-transform:uppercase}
#end .links a:hover{color:var(--paper)}

/* one vertical film: on the right third, so the big title stays in view */
@media (min-width:761px){.work:not(.wide):not(.quad) .vid{left:68%}}

/* four presenters in one frame */
.work.quad .row4{position:absolute;left:50%;top:50.5%;transform:translate(-50%,-50%);display:flex;gap:1.2vw;z-index:2}
.work.quad .cell{position:relative;width:min(19vw,33vh);aspect-ratio:9/16;background:#000;cursor:pointer;transition:opacity .4s;flex:none}
.work.quad.duo .cell{width:min(22vw,36vh)}
.work.quad.duo .row4{gap:3vw}
.work.quad .cell video{width:100%;height:100%;object-fit:cover}
.work.quad .cell .lab{position:absolute;left:.8em;top:.8em;color:#fff;mix-blend-mode:difference}
.work.quad .title{top:auto;bottom:2.2vh;transform:none;z-index:3;pointer-events:none}
.work.quad .notes{bottom:auto;top:6.5vh;width:min(46vw,760px)}
body.playing .work.quad .cell:not(.live){opacity:.1}
body.playing .work.quad .title{opacity:.25}

/* 4:3 film */
.work.wide.r43 .vid{left:50%;width:min(100vw,133.34vh);transform:translateX(-50%)}

/* carousels */
#car{background:var(--blk);padding:8vh 3.3vw 12vh;position:relative}
#car .labc{position:absolute;right:3.3vw;top:2.6vh;color:var(--red);text-align:right}
#cars{display:flex;gap:1vw;margin-top:7vh}
#cars .c{flex:1;aspect-ratio:4/5;background:#151515;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s}
#cars .c:hover{transform:translateY(-1.2vh)}
#cars .c video{width:100%;height:100%;object-fit:cover}
#cars .c .lab{position:absolute;left:0;top:100%}
#car .foot{color:var(--red);margin-top:3vh}

/* Instagram pages: the same list look as the old work */
#pages{background:var(--blk);padding:8vh 3.3vw 14vh;position:relative}
#pages .labc{position:absolute;right:3.3vw;top:2.6vh;color:var(--red);text-align:right}
#pages .head{color:var(--paper)}
#pages .head .ov{color:var(--red);font-size:.4em;left:62%}
#pages ul{list-style:none;margin-top:8vh}
#pages li a{display:flex;align-items:center;gap:2vw;padding:1.2vh 0;border-top:1px solid #2a2a2a;color:var(--paper);transition:color .2s}
#pages li a:hover{color:var(--red)}
#pages li img{height:8vw;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.2);transition:filter .2s;flex:none}
#pages li a:hover img{filter:none}
#pages li .t{font-size:8vw}
#pages li .lab{margin-left:auto;text-align:right;color:var(--red);flex:none}

/* Review Board stills */
#built .screen{position:relative}
#built .screen img{position:absolute;inset:0;opacity:0;animation:rb 16s infinite}
#built .screen img:nth-child(2){animation-delay:4s}
#built .screen img:nth-child(3){animation-delay:8s}
#built .screen img:nth-child(4){animation-delay:12s}
@keyframes rb{0%{opacity:0}3%{opacity:1}25%{opacity:1}28%{opacity:0}100%{opacity:0}}

/* in-page player */
#lb{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.96);display:none;align-items:center;justify-content:center}
#lb.on{display:flex}
#lb .fr{width:min(84vw,138vh);aspect-ratio:16/9;background:#000}
#lb.v .fr{width:auto;height:84vh;aspect-ratio:9/16}
#lb.s .fr{width:100vw;aspect-ratio:auto;background:none}
#lb iframe,#lb .fr>video{width:100%;height:100%;border:0;display:block}
#lb .strip{display:flex;gap:1.5vw;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 8vw}
#lb .strip video{height:76vh;aspect-ratio:4/5;flex:none;scroll-snap-align:center;background:#111}
#lb .x{position:absolute;right:3.3vw;top:2.6vh;color:#fff;cursor:pointer;padding:1em 0 1em 2em}
#lb .cap{position:absolute;left:3.3vw;bottom:4vh;color:#fff;line-height:1.5}
#lb .cap a{color:var(--red)}

@media (max-width:760px){
 .lab{font-size:10px}
 .work.quad .row4{flex-wrap:wrap;width:86vw;gap:2vw;top:46%}
 .work.quad .cell,.work.quad.duo .cell{width:42vw}
 .work.quad .notes{display:none}
 .work.quad .title{bottom:3vh}
 .work.wide.r43 .vid{left:0;width:100%;transform:none;aspect-ratio:4/3}
 #pages li img{display:none}
 #pages li a{flex-wrap:wrap}
 #pages li .t{font-size:11vw}
 #pages li .lab{margin-left:0;text-align:left;flex-basis:100%}
 #cars{flex-wrap:wrap;gap:3vw}
 #cars .c{flex:0 0 45.5vw}
 #lb .fr{width:94vw}
 #lb.v .fr{height:74vh}
 #lb .strip video{height:auto;width:80vw}
 .work.wide .title{bottom:auto;top:calc(22vh + 56.25vw + 3vh)}
 .work .title,.work.wide .title{z-index:3;top:auto;bottom:19vh;transform:none;color:var(--red)}
 .work:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0) 55%);pointer-events:none;z-index:2;transition:opacity .5s}
 .work.wide .vid{top:22vh;height:auto;aspect-ratio:16/9}
 .work.wide .notes{top:auto;bottom:4vh}
 .work .col{display:none}
 .work .notes{width:80vw;font-size:12px}
 .work .joke{font-size:6.2vw;width:70vw;left:5vw;bottom:auto;top:9vh}
 body.playing .work .title,body.playing .work .notes,body.playing .work:after{opacity:0}
 .work .notes{transition:opacity .5s}
 #start .ph{right:-62vw}
 #start .fade{width:30vw}
 #start .patch{display:none}
 #start .name{top:20vh}
 #start .role{font-size:13vw;right:22vw;bottom:14vh}
 #built .scrw{width:94vw}
 .demo{aspect-ratio:auto;font-size:12px}
 .demo .dm{flex-direction:column}
 .demo .dv{height:62vh;flex:none}
 .demo .dp{width:100%;border-left:0;max-height:34vh}
 .demo .ds{display:none}
 #built .tool{width:94vw}
 #built .tool h3{font-size:10vw}
 #built .touch{font-size:8vw}
 #archive li .t{font-size:8.4vw}
 #archive li img{display:none}
 #end .hello{font-size:7vw}
 #end .links a{font-size:22px}
 #kubrick .side{position:static;padding:3vh 3.3vw 0}
 #kubrick .b{align-items:flex-start;text-align:left}
 #kubrick .ph img{width:130vw;right:-30vw}
 #kubrick .ov{left:50%}
}
@media (prefers-reduced-motion:reduce){#grain{animation:none}.work{transition:none}}

/* Review Board demo: the real front end in an iframe, scaled by js/board.js */
#built .bd{position:relative;width:100%;overflow:hidden;background:#0b0b0b;border:1px solid #1c1c1c;box-shadow:0 3vh 6vh rgba(0,0,0,.28)}
#built .bd iframe{display:block;width:1200px;height:675px;border:0;transform-origin:0 0}
#built .bdl{display:block;width:max-content;margin-top:1.4vh;color:inherit;text-decoration:none}
#built .bdl:hover{color:var(--red)}

/* Colour part: log / grade frames with a moving split (js/colour.js) */
#colour{background:var(--blk);padding:8vh 3.3vw 12vh;position:relative}
#colour .labc{position:absolute;right:3.3vw;top:2.6vh;color:var(--red);text-align:right}
#colour .head{color:var(--paper)}
#colour .head .ov{color:var(--red);font-size:.8em}
#colour .grid{display:flex;flex-wrap:wrap;gap:1.2vw;margin-top:8vh}
#colour figure{margin:0;position:relative}
#colour .v{width:23.5%}
#colour .h1{width:calc(76.5% - 1.2vw)}
#colour .h2{width:calc(50% - .6vw)}
#colour .v .cmp{aspect-ratio:9/16}
#colour .h1 .cmp{aspect-ratio:1.8}
#colour .h2 .cmp{aspect-ratio:16/9}
#colour .cmp{position:relative;overflow:hidden;cursor:ew-resize;touch-action:pan-y;--p:50%;background:#000}
#colour .cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
#colour .cmp .a{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
#colour .cmp i{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--paper)}
#colour .cmp .lab{position:absolute;top:.9em;color:#fff;mix-blend-mode:difference;pointer-events:none}
#colour .cmp .l{left:.9em}
#colour .cmp .r{right:.9em}
#colour figcaption{color:var(--paper);margin-top:1.2vh}
#colour .foot{color:var(--red);margin-top:3vh}
@media (max-width:760px){
 #colour .v,#colour .h1,#colour .h2{width:100%}
 #colour .h1 .cmp{height:auto;aspect-ratio:16/9}
}

/* phone pass, 12 Nov */
@media (max-width:760px){
 #start .role .ov{font-size:1.05em;right:-.02em}
}
@media (max-width:760px){
 #built .touch{display:none}
 #colour .head .ov{font-size:.62em}
}