/* Palette: Black russian / Alucard night / Palatinate blue / Grey placidity / Baby grey */
:root{--pad:clamp(12px,2.4vw,28px);--ink:#000029;--night:#000051;--blue:#173DED;--mist:#DCDEE2;--ash:#BABABA;
--disp:'Bricolage Grotesque',sans-serif;--body:'Inter Tight',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;--sb:0px;--W:calc(100vw - var(--sb))}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%;overflow:hidden}
#sc{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
#sc::-webkit-scrollbar,.gal::-webkit-scrollbar,.abs::-webkit-scrollbar{display:none}
body{background:var(--ink);color:var(--night);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{text-wrap:balance}p{text-wrap:pretty}img{display:block;max-width:100%}button{font:inherit}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* the one DR logo: fixed top-left on every screen, same size as the About tile logo; colour adapts to what is under it */
.brand{position:fixed;top:var(--pad);left:var(--pad);z-index:50;display:flex;align-items:center;gap:14px;color:var(--mist);transition:color .35s,opacity .3s}
.brand svg{width:min(67px,14.4vw);height:auto;fill:currentColor;flex:none;margin-left:calc(min(67px,14.4vw) * -.022)}
.brand .nm{white-space:nowrap;max-width:0;overflow:hidden;opacity:0;transition:max-width .6s cubic-bezier(.7,0,.2,1),opacity .4s}
.brand:hover .nm,.brand:focus-visible .nm{max-width:180px;opacity:1}

/* back button: loud, always top-right while a tile is open */
#back{position:fixed;top:20px;right:24px;z-index:90;display:flex;align-items:center;gap:12px;padding:14px 22px;border:0;border-radius:99px;background:var(--blue);color:#fff;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 30px -10px #000a;opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .4s,transform .5s cubic-bezier(.7,0,.2,1),background .3s,color .3s}
#back.on{opacity:1;pointer-events:auto;transform:none;transition-delay:.5s,.5s,0s,0s}
#back:hover{background:var(--ink);color:var(--mist)}

/* cursor + preloader + hint */
.cur{position:fixed;left:0;top:0;width:16px;height:16px;border-radius:99px;display:grid;place-items:center;overflow:hidden;white-space:nowrap;pointer-events:none;z-index:99;color:var(--ct,#fff);background:var(--cc,rgba(249,249,249,.22));transition:background-color .25s,color .25s;-webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);box-shadow:inset 0 0 0 1px var(--cr,rgba(255,255,255,.4)),0 10px 28px -12px rgba(0,0,0,.5);font-family:var(--mono);font-size:11px;letter-spacing:.12em}
@media (pointer:coarse){.cur{display:none}}
.pre{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--mist);color:var(--ink)}
.pre svg{width:120px;fill:currentColor}
.pre .ct{position:absolute;bottom:24px;right:24px}.pre .lb{position:absolute;bottom:24px;left:24px;opacity:.6}
.hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;background:var(--ink);color:var(--mist);padding:8px 14px;border-radius:99px;pointer-events:none}

/* the page: one fully-packed grid, rows computed in JS so there are never gaps */
#g{display:grid;grid-template-columns:repeat(120,minmax(0,1fr))}   /* minmax(0,..): a tile animating its own width can never push the other columns around */
.t{position:relative;overflow:hidden;container-type:size;background:var(--bg,var(--mist));color:var(--fg,var(--night));min-width:0;min-height:0}
.t[tabindex]{cursor:pointer}
.t.open{position:fixed;inset:0;z-index:45}
.t:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}

/* PROJECT tile: flat colour + name, top-left */
.p{--bg:var(--night);--fg:var(--mist)}
.p .pn{position:absolute;left:var(--pad);top:var(--pad);right:var(--pad);z-index:3;font-family:var(--disp);font-weight:700;font-size:clamp(22px,11cqw,56px);line-height:.92;letter-spacing:-.05em;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.p .ti{position:absolute;left:var(--pad);bottom:var(--pad);z-index:3;font-size:11px;opacity:.75}
.p.open .ti{opacity:0;transition:opacity .3s}
.p:not(.open):hover .pn{transform:translateX(8px)}
.p.open .pn{opacity:0;transition:opacity .3s}
.p.dim{filter:grayscale(1);opacity:.45}
/* PROJECT page (expanded) */
.p .ex{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:minmax(300px,31%) 1fr;background:var(--ink);color:var(--mist);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.p.open .ex{opacity:1;visibility:visible;transition:opacity .7s .5s,visibility 0s}
.inf{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(96px,9cqh,120px) var(--pad) var(--pad);background:var(--night)}
.inf .cn{opacity:.6}
.inf h2{font-family:var(--disp);font-weight:700;font-size:clamp(30px,min(5.4cqw,10cqh),92px);line-height:.92;letter-spacing:-.045em;margin-top:14px}
.inf .brief{font-size:clamp(13px,1.15cqw,16px);line-height:1.55;max-width:36ch;opacity:.8;margin-top:18px}
.inf .brief+.brief{margin-top:12px}
.inf dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin-top:26px;padding-top:18px;border-top:1px solid #dcdee233}
.inf dt{opacity:.55}.inf dd{font-size:14px}
.inf .act{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid currentColor;padding:12px 18px;border-radius:99px;background:none;color:inherit;cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.pill:hover{background:var(--mist);color:var(--ink);border-color:var(--mist)}
.pill.solid{background:var(--blue);border-color:var(--blue);color:#fff}
.pill.solid:hover{background:var(--mist);color:var(--ink)}
.gal{overflow-y:auto;overscroll-behavior:contain;background:var(--ink)}
.gal img{width:100%;height:auto;display:block}
.gal img+img{margin-top:6px}
.gal .only{padding:clamp(20px,3cqw,48px);display:grid;place-items:center;min-height:70cqh}
.gal .only img{max-height:70cqh;width:auto;max-width:100%;object-fit:contain}
.gal .note{padding:22px clamp(20px,2.4cqw,36px);opacity:.6}
.nxt{position:relative;display:block;margin-top:6px;min-height:60cqh;overflow:hidden;cursor:pointer}
.nxt{background:var(--bg);color:var(--fg)}
.nxt div{position:absolute;left:clamp(20px,2.4cqw,36px);bottom:clamp(20px,2.4cqw,36px);right:20px}
.nxt h3{font-family:var(--disp);font-weight:700;font-size:clamp(34px,6cqw,100px);line-height:.95;letter-spacing:-.045em;margin-top:8px}

/* TICKER */
.k-tick{--bg:var(--ink);--fg:var(--mist);display:flex;align-items:center}
.tk{display:flex;white-space:nowrap;font-family:var(--disp);font-weight:700;font-size:min(62cqh,9cqw);letter-spacing:-.04em}
.tk span{padding-right:1.1em}

/* SERVICES */
.k-svc{--bg:var(--ash);--fg:var(--ink);padding:var(--pad);display:flex;flex-direction:column;justify-content:space-between}
.k-svc ul{list-style:none;font-family:var(--disp);font-weight:500;font-size:min(5.2cqw,8.4cqh);letter-spacing:-.035em;line-height:1.08}
.k-svc li{border-top:1px solid #00002955}
.k-svc li button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;padding:5px 0;cursor:pointer;transition:padding .4s,background .3s,color .3s}
.k-svc li button:hover,.k-svc li button:focus-visible{padding-left:14px;padding-right:10px;background:var(--blue);color:#fff}
.k-svc li button.on{padding-left:14px;padding-right:10px;background:var(--ink);color:var(--mist)}
.k-svc li small{font:400 11px var(--mono);opacity:.7;align-self:center}
.k-svc .hnt{opacity:.55}
.p{transition:filter .6s}

/* ABOUT / DR tile */
.k-dr{--bg:var(--night);--fg:var(--mist);cursor:pointer}
.k-dr .dn{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;flex-direction:column;gap:10px;transition:opacity .3s}
.k-dr .dn .rl{opacity:.7}
.k-dr .dn b{font-family:var(--disp);font-weight:700;font-size:min(11.5cqw,24cqh);letter-spacing:-.045em;line-height:.95;overflow:hidden;padding-bottom:.08em;display:block}
.k-dr .dn b span{display:block}
.k-dr .dn p{font-size:clamp(10px,2.3cqw,16px);white-space:nowrap;opacity:.8;line-height:1.4}
.k-dr .dn .ab-l{opacity:.7}
.k-dr .dn .arr{position:absolute;right:0;bottom:0;font-size:clamp(22px,5cqw,48px);transition:transform .5s}
.k-dr:hover .dn .arr{transform:rotate(45deg)}
.k-dr.open .dn{opacity:0}
.ab{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:minmax(300px,42%) 1fr;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.k-dr.open .ab{opacity:1;visibility:visible;transition:opacity .7s .5s,visibility 0s}
.al{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(120px,14cqh,170px) var(--pad) var(--pad)}
.al h2{font-family:var(--disp);font-weight:700;font-size:min(5.6cqw,13cqh);line-height:.95;letter-spacing:-.05em;margin-top:auto}
.al h2 em{font-style:normal;color:#6d86ff}
.abs{overflow-y:auto;overscroll-behavior:contain;padding:clamp(120px,14cqh,170px) clamp(20px,3cqw,48px) 80px 0}
.abs p{font-size:clamp(14px,1.25cqw,19px);line-height:1.55;max-width:60ch;opacity:.88}
.abs p.lead{font-family:var(--disp);font-size:clamp(20px,2.2cqw,36px);line-height:1.15;letter-spacing:-.02em;opacity:1;margin-bottom:18px}
.abs .facts{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;border-top:1px solid #dcdee233;margin-top:36px;padding-top:20px}
.abs dt{opacity:.55}.abs dd{font-family:var(--body);font-size:clamp(14px,1.2cqw,17px);text-transform:none;letter-spacing:0}
.abs .sh{margin:56px 0 8px;opacity:.55}
.job{display:grid;grid-template-columns:minmax(150px,30%) 1fr;gap:20px;padding:22px 0;border-top:1px solid #dcdee233}
.job .jd{display:flex;flex-direction:column;gap:6px}.job .jd span:first-child{opacity:.6}
.job h4,.awards h4{font-family:var(--disp);font-weight:500;font-size:clamp(20px,1.8cqw,28px);letter-spacing:-.03em;line-height:1.1;margin-bottom:10px}
.job p{font-size:clamp(13px,1.05cqw,16px);opacity:.78}
.awards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px;border-top:1px solid #dcdee233;padding-top:22px}
.awards p{margin-top:6px;opacity:.7;max-width:none;font-size:11px}
.ab .act{display:flex;gap:10px;flex-wrap:wrap}

/* STATS */
.k-st{--bg:var(--blue);--fg:#fff;padding:var(--pad);display:flex;flex-direction:column;justify-content:space-between}
.k-st>b{font-family:var(--disp);font-weight:700;font-size:min(46cqw,58cqh);line-height:.8;letter-spacing:0;margin:-.02em 0 0 -.03em}
.k-st>span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;text-wrap:balance}

/* CONTACT */
.k-ct{--bg:var(--mist);--fg:var(--night)}
.k-ct .cc{position:absolute;inset:0;padding:var(--pad);display:flex;flex-direction:column;justify-content:space-between;transition:opacity .3s}
.k-ct h2{font-family:var(--disp);font-weight:700;font-size:min(15cqw,36cqh);line-height:.88;letter-spacing:-.05em}
.k-ct .cf{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.k-ct .arr{line-height:.8;font-size:clamp(24px,8cqw,60px);transition:transform .5s}
.k-ct:hover .arr{transform:rotate(45deg)}
.k-ct.open .cc{opacity:0;visibility:hidden}
.cx{position:absolute;inset:0;display:grid;grid-template-columns:7fr 5fr;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.k-ct.open .cx{opacity:1;visibility:visible;transition:opacity .7s .5s,visibility 0s}
.c1{background:var(--blue);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(96px,12cqh,130px) var(--pad) var(--pad)}
.c1 h2{font-size:min(15cqw,34cqh);margin-top:auto}
.c1 .cl{display:flex;justify-content:space-between;margin-top:28px;padding-top:16px;border-top:1px solid #ffffff55}
.c2{display:grid;grid-template-rows:1.4fr 1fr}
.c2>*{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.4cqw,36px);transition:background .5s,color .5s}
.c2 .cm{background:var(--mist);color:var(--night);padding-top:clamp(84px,10cqh,110px)}
.c2 .cp{background:var(--night);color:var(--mist)}
.c2 .cm:hover,.c2 .cp:hover{background:var(--blue);color:#fff}
.c2 .v{font-family:var(--disp);font-weight:500;font-size:clamp(22px,3.2cqw,64px);letter-spacing:-.04em;line-height:1}
.c2 .ca{display:flex;gap:10px}
.c2 .ca button,.c2 .ca a{border:1px solid currentColor;background:none;color:inherit;padding:10px 16px;border-radius:99px;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;transition:background .3s,color .3s}
.c2 .ca button:hover,.c2 .ca a:hover{background:#fff;color:var(--ink);border-color:#fff}

@media (max-width:899px){
 .hint{display:none}
 .p .ex{grid-template-columns:1fr;grid-template-rows:auto 1fr}
 .inf{padding-top:84px;gap:14px}.inf .brief,.inf dl,.inf .act{display:none}
 .gal::before{content:attr(data-brief);display:block;white-space:pre-line;padding:20px var(--pad) 24px;font-size:14px;line-height:1.55;opacity:.8;background:var(--night);margin-bottom:6px;text-wrap:pretty}.inf h2{font-size:clamp(28px,10cqw,48px)}
 .ab{grid-template-columns:1fr;grid-template-rows:auto 1fr}.al{padding-top:84px;gap:16px}.ab .al .me{flex:none;height:auto;width:min(46%,170px);aspect-ratio:1/1}.al h2{font-size:clamp(28px,9cqw,48px);margin-top:0}.abs{padding:0 20px 60px}.job{grid-template-columns:1fr;gap:8px}.awards{grid-template-columns:1fr}
 #back{top:14px;right:14px;padding:12px 16px}
 .cx{grid-template-columns:1fr;grid-template-rows:2fr 3fr;overflow:auto}.c1{padding-top:84px}.c1 h2{font-size:min(22cqw,20cqh)}.c2 .cm{padding-top:clamp(20px,2.4cqw,36px)}
}
@media (prefers-reduced-motion:reduce){.pre{display:none}}

/* pill scrollbar: invisible until you scroll (shadcn ScrollArea look: slim track, rounded-full thumb) */
.gal,.abs{scrollbar-width:none}
.sb{position:absolute;right:4px;top:8px;bottom:8px;width:10px;padding:1px;z-index:6;opacity:0;transition:opacity .35s;pointer-events:none}
.sb.win{position:fixed;z-index:60}
.sb.on{opacity:1}
.sb .th{width:100%;border-radius:99px;background:rgba(138,143,168,.9);will-change:transform}
.sb.on .th{pointer-events:auto;cursor:grab}.sb.drag .th{cursor:grabbing}

/* only our circle: hide the native cursor (pointer devices only) */
html.nocur,html.nocur *{cursor:none!important}

/* ---- seamless open/close ----
   Page content is laid out once at full-viewport size (its own size container) and the tile grows/shrinks around it, so nothing
   re-flows per frame. Everything overlaps in time: the tile's name leaves while the page content rises in, and the reverse on close. */
.p .ex,.k-dr .ab,.cx{inset:auto;left:0;top:0;width:var(--vw);height:var(--vh);container-type:size}
.p .ex,.k-dr .ab,.cx{transform:translateY(18px);transition:opacity .22s,transform .3s,visibility 0s .22s}
.p.open .ex,.k-dr.open .ab,.k-ct.open .cx{transform:none;transition:opacity .6s .26s cubic-bezier(.4,0,.2,1),transform .95s .2s cubic-bezier(.2,.7,.2,1),visibility 0s}
.p .pn,.p .ti{transition:opacity .45s .38s,transform .7s cubic-bezier(.2,.7,.2,1)}
.p.open .pn,.p.open .ti{transition:opacity .25s}
.k-dr .dn,.k-ct .cc{transition:opacity .45s .38s}
.k-dr.open .dn,.k-ct.open .cc{transition:opacity .25s}
.t.open{will-change:width,height}

/* ===== PALETTE (from palette test 2): brand-coloured project tiles; About, Let's talk and project pages in black / gray / white ===== */
/* TEST palette #2 (palette2.html only; main site untouched). Delete palette2.html + palette2.css to discard.
   Summer Yellow #FFEA00 · Nectarine Orange #FF9800 · Party Orange #FF5A00 · Day Break Light Blue #00E1F3 · Electric Blue #5151FC
   Open Sky Blue #5100C0 · Candy Pink #FFC0FF · Futuristic Pink #FF6FFF · Loud Red #FC032D · Kryptonite Green #ABFF5A
   Pine Green #00906C · Deep Green #085E55 · Off-white #F9F9F9 · Gray #8F9193 · Black #090909 */
:root{--ink:#090909;--night:#090909;--blue:#5151FC;--mist:#F9F9F9;--ash:#8F9193;
 --night2:#5100C0;--yellow:#FFEA00;--nectarine:#FF9800;--orange:#FF5A00;--cyan:#00E1F3;--candy:#FFC0FF;--pink:#FF6FFF;--red:#FC032D;--lime:#ABFF5A;--pine:#00906C}
body{background:#090909}
.pre{background:#F9F9F9;color:#090909}


/* neutrals only outside the projects: black / gray / white */
.k-svc{--bg:#F9F9F9;--fg:#090909}
.k-svc li{border-top-color:rgba(9,9,9,.35)}
.k-svc li button:hover,.k-svc li button:focus-visible{background:#090909;color:#F9F9F9}
.k-svc li button.on{background:#090909;color:#F9F9F9}
.k-st{--bg:#090909;--fg:#F9F9F9}
.k-ct{--bg:#F9F9F9;--fg:#090909}
.k-dr{--bg:#090909;--fg:#F9F9F9}
.k-tick{--bg:#F9F9F9;--fg:#090909}

/* About + Let's talk pages: black / gray / white */
.k-dr .ab{color:#F9F9F9}
.al h2 em{color:#8F9193}
.al .me{display:block;width:100%;flex:1 1 0;min-height:24cqh;height:0;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.06);margin-bottom:6px}
.c1{background:#090909;color:#F9F9F9}
.c2 .cm{background:#F9F9F9;color:#090909}
.c2 .cp{background:#8F9193;color:#090909}
.c2 .cm:hover{background:#090909;color:#F9F9F9}
.c2 .cp:hover{background:#F9F9F9;color:#090909}
.c2 .ca button:hover,.c2 .ca a:hover{background:#090909;color:#F9F9F9;border-color:#090909}
.c2 .cp .ca button:hover,.c2 .cp .ca a:hover{background:#090909;color:#F9F9F9}

/* project pages: all black (colour lives on the home-page tiles only) */
.gal{background:#090909}
.p.open .ex{background:#090909}
.p.open .inf{background:#090909;color:#F9F9F9}
.p .inf .cn{opacity:.6}
.p .inf dl{border-top-color:currentColor}
.p.open .pill{border-color:currentColor}
.p.open .inf .pill:hover{background:#F9F9F9;color:#090909;border-color:#F9F9F9}
.nxt{background:#090909;color:#F9F9F9;box-shadow:inset 0 1px 0 rgba(249,249,249,.2)}

/* chrome: neutral */
#back{background:#F9F9F9;color:#090909}
#back:hover{background:#090909;color:#F9F9F9}
.pill.solid{background:#F9F9F9;border-color:#F9F9F9;color:#090909}
.pill.solid:hover{background:#090909;color:#F9F9F9;border-color:#090909}
.hint{background:#090909}

/* short or small screens: the project info panel scrolls instead of overflowing */
.inf{overflow-y:auto;scrollbar-width:none}
.inf::-webkit-scrollbar{display:none}
@media (max-height:620px){.inf .brief,.inf dl{display:none}}


/* no Back button on pointer devices: the cursor says BACK. Touch devices keep it. */
@media (pointer:fine){#back{display:none}}

.k-ct .cf .mono{text-wrap:balance}
.k-st>b,.k-st>span{transition:opacity .4s .38s}
.k-st.open>b,.k-st.open>span{opacity:0;transition:opacity .2s}
.k-st{cursor:pointer}

/* mini games */
.k-game{--bg:#090909;--fg:#F9F9F9}               /* Pong: black */
.k-game.light{--bg:#090909;--fg:#F9F9F9}        /* Breakout: black */
.k-game.gray{--bg:#090909;--fg:#F9F9F9}         /* Hop: black */
.k-game canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
.k-game .gl{position:absolute;left:var(--pad);bottom:var(--pad);z-index:2;pointer-events:none;opacity:.7;font-size:11px;text-wrap:balance}
.k-game .gl{transition:opacity .3s}.k-game:hover .gl{opacity:0}

/* films inside project pages: click to play (nothing downloads until then) */
.vid{position:relative;background:#000;aspect-ratio:16/9;margin-top:6px}
.gal>.vid:first-child{margin-top:0}
.vid video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:99px;border:0;background:#F9F9F9;color:#090909;cursor:pointer;font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 20px 40px -16px #0009;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s}
.vplay:hover{transform:translate(-50%,-50%) scale(1.06)}
.vid.on .vplay{opacity:0;pointer-events:none}

/* the site hides the native cursor; inside a fullscreen film the player needs it back to be usable */
html.nocur :fullscreen,html.nocur :fullscreen *{cursor:auto!important}

/* film player controls (own player: quality sits in the settings menu) */
.vid:not(.on) .vc{display:none}
.vid video{cursor:pointer}
.vc{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);padding:44px clamp(12px,1.6vw,22px) clamp(10px,1.2vw,16px);background:linear-gradient(transparent,rgba(0,0,0,.74));color:#F9F9F9;transition:opacity .3s,transform .3s}
.vid.playing.idle .vc{opacity:0;transform:translateY(8px);pointer-events:none}
.vid.playing.idle{cursor:none}
.vc-b{all:unset;box-sizing:border-box;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;cursor:pointer;transition:background .25s,transform .25s}
.vc-b:hover{background:#f9f9f929}.vc-b:active{transform:scale(.92)}.vc-b svg{width:20px;height:20px;fill:currentColor}.vc-b:focus-visible{outline:2px solid #fff}
.vc-time{font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.9}
.vc-bar{position:relative;flex:1;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.vc-bar::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:#f9f9f93d;transition:height .2s}
.vc-bar i{position:absolute;left:0;height:3px;border-radius:2px;width:0;transition:height .2s}
.vc-buf{background:#f9f9f96b}.vc-pos{background:#F9F9F9}
.vc-bar:hover::before,.vc-bar:hover i{height:6px}
.vc-set{position:relative}
.vc-menu{position:absolute;right:0;bottom:calc(100% + 12px);min-width:160px;display:grid;gap:2px;padding:8px;border-radius:14px;background:#090909ee;border:1px solid #f9f9f933;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.vc-menu[hidden]{display:none}
.vc-mh{padding:6px 12px 8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.5}
.vc-menu button{border:0;background:none;color:#F9F9F9;text-align:left;padding:10px 12px;border-radius:9px;cursor:pointer;font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;gap:18px;transition:background .2s}
.vc-menu button:hover{background:#f9f9f91f}.vc-menu button.on::after{content:"✓"}
.vid.theater{position:fixed;inset:0;z-index:200;margin:0;width:100%;height:100%;aspect-ratio:auto}
.vid.theater video,.vid:fullscreen video{object-fit:contain}
.vid:fullscreen{background:#000;aspect-ratio:auto}
body.theater .brand{opacity:0;pointer-events:none}
html.nocur :fullscreen,html.nocur :fullscreen *{cursor:auto!important}
html.nocur .vid.theater,html.nocur .vid.theater *{cursor:auto!important}

.vid.yt>img,.vid.yt>iframe{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;border:0}
.vid.yt.on>.vplay{display:none}

.gh{padding:44px clamp(20px,2.4cqw,36px) 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#F9F9F9;opacity:.7}
.gal>.gh:first-child{padding-top:24px}
.gcap{padding:14px clamp(20px,2.4cqw,36px) 8px;font-size:11px;letter-spacing:.08em;color:#8F9193}
.igrow{display:grid;gap:6px;grid-template-columns:repeat(2,1fr)}
.igrow.n1{grid-template-columns:1fr}.igrow.n3{grid-template-columns:repeat(3,1fr)}.igrow.n4{grid-template-columns:repeat(2,1fr)}
.ig{position:relative;background:#111;aspect-ratio:1/1.5;overflow:hidden}
.ig>span{position:absolute;left:14px;top:12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8F9193}
.ig>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.ig.on>.vplay,.ig.on>span{display:none}
.igset+.igset{margin-top:10px}

.vrow{display:flex;gap:6px;margin-top:6px;align-items:stretch}.vrow .vid{margin-top:0;min-width:0;height:auto}
.gcap+.vrow{margin-top:0}

.vrow .vplay{white-space:nowrap;padding:12px 18px}

.gal .irow{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}.gal .irow img+img{margin-top:0}

.vimg{min-width:0;height:100%;overflow:hidden;background:#111}.vimg img{width:100%;height:100%;object-fit:cover;display:block;margin:0!important}
.vrow .vimg{margin:0}

.car{position:relative;overflow:hidden;background:#111}
.car-t{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.car-t::-webkit-scrollbar{display:none}
.car-t img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;margin:0!important;display:block}
.car-b{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;padding:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .25s,transform .25s;z-index:2;filter:drop-shadow(0 0 6px rgba(0,0,0,.45))}
.car:hover .car-b,.car:focus-within .car-b{opacity:.9}
@media(hover:none){.car-b{opacity:.85}}
.car-b[hidden]{display:none}
.car-b svg{width:22px;height:22px;stroke-width:1.5}
.car-b.prev{left:6px}.car-b.next{right:6px}
.car-b:hover{opacity:1!important}
.car-b.prev:hover{transform:translateY(-50%) translateX(-2px)}.car-b.next:hover{transform:translateY(-50%) translateX(2px)}
.car-n{position:absolute;right:12px;bottom:10px;color:#fff;font-size:10px;letter-spacing:.08em;z-index:2;pointer-events:none;opacity:.8;text-shadow:0 0 6px rgba(0,0,0,.55)}

.vid:has(video[data-single]) .vc-set{display:none}

/* page-turn book */
.bk{position:relative;background:#0d0d0d;display:grid;place-items:center;padding:clamp(18px,3cqw,48px) 0;min-height:200px}
.bk-stage{margin:0 auto;filter:drop-shadow(0 28px 34px rgba(0,0,0,.55))}
.bk-p{background:#fff;overflow:hidden}
.bk-p img{width:100%;height:100%;display:block;object-fit:cover;margin:0!important;user-select:none;-webkit-user-drag:none}
.bk-b{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;padding:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.5;transition:opacity .25s,transform .25s;z-index:3;filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}
.bk-b[hidden]{display:none}.bk-b svg{width:24px;height:24px}
.bk-b.prev{left:10px}.bk-b.next{right:10px}.bk-b:hover{opacity:1}
.bk-n{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);color:#8F9193;font-size:10px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
/* mockups: an open book at an angle on a warm surface */
.mocks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.mock{margin:0;position:relative;aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;perspective:1600px;background:radial-gradient(120% 90% at 50% 35%,#e3d9cc 0%,#cfc1b0 55%,#b7a690 100%)}
.mock-b{position:relative;width:88%;transform:rotateX(34deg) rotateZ(-7deg);transform-style:preserve-3d;filter:drop-shadow(0 38px 26px rgba(40,24,12,.38)) drop-shadow(0 8px 8px rgba(40,24,12,.25))}
.mock-b.t1{transform:rotateX(34deg) rotateZ(6deg)}
.mock-b img{width:100%;height:auto;display:block;margin:0!important;border-radius:2px}
.mock-b::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:2px;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 30%,rgba(0,0,0,.30) 49%,rgba(255,255,255,.14) 50%,rgba(0,0,0,.22) 51%,rgba(0,0,0,.05) 70%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.06))}
.mock-b::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:8px;background:repeating-linear-gradient(180deg,#f3ede4 0 1px,#d9d0c3 1px 2px);border-radius:0 0 2px 2px;transform:none}
@media(max-width:700px){.mocks{grid-template-columns:1fr}}

.mock.photo{background:none;perspective:none}.mock.photo .mock-b{width:100%;transform:none;filter:none}.mock.photo .mock-b::before,.mock.photo .mock-b::after{display:none}.mock.photo img{border-radius:0;width:100%;height:100%;object-fit:cover}

/* live book */
.bk{background:#0d0d0d}
.bk-stage{margin:0 auto}
.bk-stage,.car{cursor:none}

/* phones: films, posts and carousels that sit side by side on desktop stack full width so controls and slides stay a usable size */
@media(max-width:899px){
.vrow{flex-direction:column!important;aspect-ratio:auto!important;width:100%!important;gap:6px}
.vrow>*{aspect-ratio:var(--ar,16/9)!important;height:auto!important;flex:none!important;width:100%!important}
.irow{grid-template-columns:1fr!important}
.vid .vplay,.vrow .vplay{font-size:9px;letter-spacing:.08em;padding:8px 13px;gap:6px;max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 10px 24px -12px #0009}
}
@media (min-width:900px) and (max-height:850px){.al h2{font-size:min(4.1cqw,10.5cqh)}.al{padding-top:clamp(96px,12cqh,170px)}}