/* Max Estates x Warwick Gala: pitch deck. 1920x1080 stage, scaled to fit. */
:root{
  --paper:#F3EFE7; --paper-2:#E9E3D7; --ink:#1B211E; --ink-2:#4A524D; --mute:#8A8F88;
  --forest:#1F3B31; --forest-2:#2E5546; --brass:#B08D57; --brass-2:#D9BE8C; --night:#121614; --night-2:#1B221F;
  --serif:"Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans:"Inter", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#0d100f;overflow:hidden;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:50% 50%;overflow:hidden;background:var(--paper)}
.slide{position:absolute;inset:0;visibility:hidden;opacity:0;overflow:hidden;background:var(--paper)}
.slide.on{visibility:visible}
.slide.dark{background:var(--night);color:#EDE8DE}
.slide.forest{background:var(--forest);color:#EDE8DE}
.pad{position:absolute;inset:110px 140px}

/* type */
.kicker{font:500 20px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.dark .kicker,.forest .kicker{color:var(--brass-2)}
.h-xxl{font:400 196px/.92 var(--serif);letter-spacing:-.02em}
.h-xl{font:400 132px/.98 var(--serif);letter-spacing:-.015em}
.h-l{font:400 92px/1.02 var(--serif);letter-spacing:-.01em}
.h-m{font:400 64px/1.08 var(--serif)}
.h-s{font:400 44px/1.15 var(--serif)}
em{font-style:italic}
.body{font:300 30px/1.45 var(--sans);color:var(--ink-2);max-width:980px}
.dark .body,.forest .body{color:#C9C4B8}
.small{font:400 22px/1.5 var(--sans);color:var(--mute)}
.dark .small,.forest .small{color:#9DA39B}
.brass{color:var(--brass)} .dark .brass,.forest .brass{color:var(--brass-2)}
.rule{height:2px;background:currentColor;opacity:.35;transform-origin:left center}

/* split-text masks */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block;will-change:transform}

/* images */
.bleed{position:absolute;inset:0;overflow:hidden}
.bleed img,.bleed .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.scrim-l{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,13,12,.86) 0%,rgba(10,13,12,.55) 42%,rgba(10,13,12,0) 72%)}
.scrim-b{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,13,12,.88) 0%,rgba(10,13,12,.35) 45%,rgba(10,13,12,0) 70%)}
.scrim-all{position:absolute;inset:0;background:rgba(10,13,12,.45)}
.ph{background:linear-gradient(135deg,#2a332f,#1a201d)}
.frame{position:relative;overflow:hidden;border-radius:6px;background:#222}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.cap{font:400 19px/1.4 var(--sans);color:var(--mute);margin-top:14px}
.dark .cap,.forest .cap{color:#9DA39B}

/* chrome */
#ui{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:50% 50%;pointer-events:none;z-index:50}
#num{position:absolute;right:64px;bottom:44px;font:500 18px/1 var(--sans);letter-spacing:.18em;color:var(--mute);mix-blend-mode:difference}
#brand{position:absolute;left:64px;bottom:44px;font:500 18px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);mix-blend-mode:difference}
#prog{position:absolute;left:0;bottom:0;height:3px;background:var(--brass);width:0}
body.rec #ui,body.still #ui{display:none}
#turn{display:none;position:fixed;left:16px;right:16px;bottom:24px;text-align:center;font:400 14px/1.4 var(--sans);letter-spacing:.06em;color:#9DA39B}
@media (orientation:portrait) and (max-width:900px){#turn{display:block}}
body.rec #turn,body.still #turn{display:none!important}

/* 3D bits */
canvas.gl{position:absolute;inset:0;width:1920px;height:1080px;display:block}
.p3{perspective:2200px}
.prism{display:inline-block;position:relative;transform-style:preserve-3d;vertical-align:top}
.prism .f{display:block;backface-visibility:hidden}
.prism .b{position:absolute;left:0;top:0;backface-visibility:hidden;white-space:nowrap}

/* grids */
.row{display:flex;gap:56px}
.col{flex:1;min-width:0}
.card{background:rgba(255,255,255,.55);border:1px solid rgba(27,33,30,.08);border-radius:8px;padding:34px 34px 30px}
.dark .card,.forest .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.tag{display:inline-block;font:500 16px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border:1px solid currentColor;border-radius:40px;opacity:.75}
.num-big{font:400 120px/1 var(--serif);color:var(--brass)}