/* Front page. Without the .motion class the frames stack as still scenes. */
*{box-sizing:border-box}
html{background:var(--pal-ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pal-ink);color:var(--pal-paper);font-family:var(--font-sans);font-size:var(--text-body);line-height:1.5;overflow-x:clip}
h1,h2,p{margin:0}
h1,h2{text-wrap:balance}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--pal-amber);outline-offset:4px}
.skip{position:absolute;left:var(--space-4);top:-5rem;z-index:60;padding:var(--space-3) var(--space-4);background:var(--pal-paper);color:var(--pal-ink);border-radius:var(--radius-control)}
.skip:focus{top:var(--space-4)}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target);min-width:var(--target);padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);border:1px solid transparent;font-weight:600;font-size:var(--text-caption);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
.button-solid{background:var(--pal-paper);color:var(--pal-ink)}
.button-ink{background:var(--pal-ink);color:var(--pal-paper)}
.button-line{border-color:currentColor;background:transparent;color:inherit}
.button-glass{border-color:#F2EDE380;background:#14120E33;color:var(--pal-paper);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (hover:hover) and (pointer:fine){.button-solid:hover{background:var(--pal-amber)}.button-ink:hover{background:var(--pal-terracotta);color:#fff}.button-glass:hover{background:var(--pal-paper);color:var(--pal-ink)}}
.button:active{transform:translateY(1px)}

/* floating navigation, the one glass surface */
.nav{position:fixed;z-index:40;top:max(var(--space-4),env(safe-area-inset-top));left:max(var(--space-4),env(safe-area-inset-left));right:max(var(--space-4),env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);pointer-events:none}
.nav>*{pointer-events:auto}
.nav .wordmark{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--space-4);border-radius:var(--radius-pill);font-weight:600;letter-spacing:-.03em;text-decoration:none;font-size:var(--text-title-3);color:var(--pal-paper);background:color-mix(in srgb,var(--pal-ink) 50%,transparent);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.cta-short{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav .wordmark{background:var(--pal-ink)}}
@media (prefers-reduced-transparency:reduce){.nav .wordmark{background:var(--pal-ink);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.nav .wordmark{background:var(--pal-ink)}}

/* loader */
.loader{position:fixed;inset:0;z-index:50;background:var(--pal-ink);pointer-events:none}
.loader canvas{width:100%;height:100%;display:block}

/* frames: still scenes by default */
.frame{position:relative;min-height:100svh;overflow:hidden;isolation:isolate}
.plate{position:absolute;inset:0;width:100%;height:100%}
.plate img{width:100%;height:100%;object-fit:cover}
.frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,#0d0b0899 0%,#0d0b0800 34%,#0d0b0800 70%,#0d0b0866 100%)}
.words{position:absolute;z-index:3;left:max(var(--space-6),env(safe-area-inset-left));right:max(var(--space-6),env(safe-area-inset-right));display:grid;gap:var(--space-5);justify-items:start;max-width:46rem}
.words.top{top:clamp(6rem,14vh,9rem)}
.words.low{bottom:max(var(--space-12),env(safe-area-inset-bottom))}
.words h2{display:grid;gap:var(--space-4);font-weight:400}
.words .title{font-size:clamp(3rem,7.5vw,6.5rem);line-height:.92;letter-spacing:-.045em;font-weight:600;padding-bottom:var(--space-4);border-bottom:1px solid #F2EDE366;text-shadow:0 2px 40px #0d0b0855}
.words .line{font-size:var(--text-title-3);line-height:1.45;letter-spacing:-.005em;max-width:24rem;color:#F2EDE3e6;text-shadow:0 1px 16px #0d0b08aa}

.hero{position:absolute;z-index:3;left:0;right:0;bottom:max(6vh,var(--space-8),env(safe-area-inset-bottom));display:grid;justify-items:center;gap:var(--space-3);padding:0 var(--space-6);text-align:center}
.hero h1{font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.1;letter-spacing:-.025em;font-weight:500;text-shadow:0 1px 20px #0d0b0899}
.hero p{font-size:var(--text-body);line-height:1.5;max-width:28rem;color:#F2EDE3d9;text-shadow:0 1px 14px #0d0b08aa}
.hero .button{margin-top:var(--space-3)}

/* the wordmark stands in the sky with its feet in the cloud: a copy of the sky sits in front, faded in from the cloud line */
.scene{position:absolute;inset:0}
.giant{position:absolute;z-index:1;left:0;right:0;top:calc(62% - .78em);display:flex;justify-content:center;font-size:31vw;line-height:1;font-weight:700;letter-spacing:-.055em;color:#F7EFE2;text-shadow:0 0 .12em #f6b46a55;pointer-events:none;user-select:none}
.giant span{display:inline-block;will-change:transform}
.plate.front{z-index:2;-webkit-mask-image:linear-gradient(to bottom,transparent 0 52%,#0008 60%,#000 71%);mask-image:linear-gradient(to bottom,transparent 0 52%,#0008 60%,#000 71%)}
.puff{display:none;position:absolute;z-index:2;width:62%;height:auto;pointer-events:none}
.puff-l{left:-14%;top:52%}
.puff-r{right:-16%;top:55%}
.mist{display:none}
.rig picture{position:absolute;inset:0}
.marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#E9FFF8;stroke-width:1.3;filter:drop-shadow(0 0 5px #3fd9c199)}
.marks-tall{display:none}
.mk-ring{stroke-width:2}
.mk-ring.thin{stroke-width:.8;opacity:.55}
.mk-ticks{stroke:#3FD9C1;stroke-width:7;stroke-dasharray:3 9;opacity:.45;filter:none}
.mk-lead{stroke-dasharray:.04 .06;opacity:.8}
.mk-icon{stroke:#F4FFFB;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.mk-icon.thin{stroke-width:1.4;opacity:.8}
.mk-link{stroke:#3FD9C1;stroke-width:1.6;opacity:.85}
.marks text{fill:#F4FFFB;stroke:none;filter:drop-shadow(0 1px 6px #0d0b0899)}
.mk-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;opacity:.85}
.mk-value{font-family:var(--font-sans);font-size:40px;font-weight:200;letter-spacing:-.02em}
.mk-tile{fill:#3FD9C11f;stroke:#3FD9C1;stroke-width:1}
.mk-tile-text{font-family:var(--font-sans);font-size:14px;opacity:.85}
.mk-tile-text.strong{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;opacity:1}
.mk-tile-text.code{font-family:var(--font-mono);font-size:12.5px;opacity:1}

/* the month in two numbers, frosted */
.readout{position:absolute;z-index:3;right:max(var(--space-6),6vw);top:50%;translate:0 -50%;width:20rem;padding:var(--space-6) var(--space-6) var(--space-5);display:grid;gap:var(--space-5);border-radius:var(--radius-card);background:#2a241d73;border:1px solid #F2EDE31f;-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);color:var(--pal-paper)}
.ro-row{display:grid;gap:var(--space-1);padding-bottom:var(--space-5);border-bottom:1px solid #F2EDE326}
.ro-label,.ro-foot{font-family:var(--font-mono);font-size:var(--text-footnote);letter-spacing:.1em;text-transform:uppercase;color:#F2EDE3cc}
.ro-label{display:flex;align-items:center;gap:var(--space-2)}
.ro-label::before{content:"";width:.4rem;height:.4rem;background:#E2553B}
.ro-figure{font-size:3.25rem;line-height:1.05;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ro-note{font-size:var(--text-caption);color:#F2EDE3b3}

.glow{display:none}
.f4 .storm{display:none}
.f5 canvas,.f8 canvas{display:none}
.pair{position:absolute;z-index:2;inset:auto 0 12% 0;display:flex;justify-content:center;gap:var(--space-12)}
.pair img{width:min(36vw,18rem);height:auto}
.bands .band:not(.sky){display:none}
.bands .band{position:absolute;inset:0}
.bands .band img{width:100%;height:100%;object-fit:cover}
.f8 .after{display:none}

.outcomes{list-style:none;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-16);position:relative;z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);max-width:56rem}
.outcome{position:relative;overflow:hidden;aspect-ratio:1;border-radius:.875rem;background:#0d1f14}
.outcome img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.outcome::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#0d0b0873 0%,#0d0b0800 32%,#0d0b0800 58%,#0d0b0899 100%)}
.o-title,.o-note,.o-mark{position:absolute;z-index:1;margin:0;color:#fff;text-shadow:0 1px 18px #0d0b08a6}
.o-title{font-size:clamp(1.625rem,2.6vw,2.375rem);line-height:1;letter-spacing:-.025em;font-weight:500}
.o-note{max-width:14rem;display:grid;gap:var(--space-2);font-size:.8125rem;line-height:1.4;font-weight:500;color:#fffffff0}
.o-data{font-weight:400;color:#ffffffbf}
.o-mark{font-size:var(--text-caption);font-weight:700;letter-spacing:-.03em}
/* each card places its words where its painting has room */
.c1 .o-title{left:6%;bottom:6%}.c1 .o-note{left:6%;bottom:calc(6% + 2.75rem);max-width:12rem}.c1 .o-mark{left:6%;top:6%}
.c2 .o-title{left:6%;top:6%}.c2 .o-note{left:6%;top:calc(6% + 3rem)}.c2 .o-mark{right:6%;bottom:6%}
.c3 .o-title{right:6%;bottom:6%}.c3 .o-note{left:6%;bottom:6%;max-width:12rem}.c3 .o-mark{left:6%;top:6%}
.c4 .o-title{left:6%;bottom:6%}.c4 .o-note{right:6%;top:6%;text-align:right;max-width:12rem}.c4 .o-mark{left:6%;top:6%}


.f9::after{background:linear-gradient(to bottom,#0d0b0880 0%,#0d0b0800 50%)}
.finale{position:absolute;z-index:3;left:0;right:0;top:clamp(5.5rem,10vh,8rem);display:grid;justify-items:center;gap:var(--space-6);padding:0 var(--space-6);text-align:center}
.finale h2{font-size:clamp(2.25rem,4.4vw,4.25rem);line-height:1.02;letter-spacing:-.04em;font-weight:500;max-width:14ch;color:#EEF4E6;text-shadow:0 2px 30px #0d0b0866}
.fly{display:none}

/* footer */
.footer{position:relative;z-index:5;background:var(--pal-ink);color:#F2EDE3cc;padding:var(--space-12) max(var(--space-6),env(safe-area-inset-right)) max(var(--space-12),env(safe-area-inset-bottom)) max(var(--space-6),env(safe-area-inset-left));display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:space-between;align-items:center;font-size:var(--text-caption)}
.footer .wordmark{font-size:var(--text-title-2);font-weight:600;letter-spacing:-.04em;color:var(--pal-paper);text-decoration:none}
.footer nav{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.text-button{min-height:var(--target);padding:0 var(--space-3);border:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:var(--text-caption)}
dialog{width:min(38rem,calc(100% - 2rem));max-height:80vh;overflow:auto;background:var(--pal-paper);color:var(--pal-ink);border:1px solid var(--pal-sand);border-radius:var(--radius-panel);box-shadow:var(--shadow-float);padding:var(--space-8)}
dialog::backdrop{background:#14120Eb3}
.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)}
.dialog-heading h2{font-size:var(--text-title-3)}
dialog p+p{margin-top:var(--space-3)}
dialog .muted{color:var(--secondary);font-size:var(--text-footnote);margin-bottom:var(--space-4)}

/* the journey: one fixed stage, scroll drives the camera */
.motion .journey{height:1100vh}
.motion .stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#0d1220}
.motion .frame{position:absolute;inset:0;min-height:0;opacity:0;visibility:hidden}
.motion .f1{opacity:1;visibility:visible}
.motion .plate{will-change:transform,opacity}
.motion .words,.motion .readout,.motion .marks .mk,.motion .marks .mk-link,.motion .finale{opacity:0}
.motion .glow{display:block;position:absolute;inset:0;z-index:2;opacity:0;background:radial-gradient(circle at var(--win-x) var(--win-y),#FFD79A 0%,#E3A33B 22%,#14120E 70%)}
.motion .f3{--win-x:61%;--win-y:58%}
.motion .f3 .plate{transform-origin:61% 58%}
.motion .f4 .plate{transform-origin:79% 37%}
.motion .f4 .storm{display:block;opacity:0}
.motion .f5 canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2}
.motion .pair{display:none}
.motion .bands{position:absolute;inset:0;perspective:1200px;transform-style:preserve-3d}
.motion .bands .band{display:block;will-change:transform}
.motion .band.sky{-webkit-mask-image:linear-gradient(to bottom,#000 0 40%,transparent 52%);mask-image:linear-gradient(to bottom,#000 0 40%,transparent 52%)}
.motion .band.ground{-webkit-mask-image:linear-gradient(to bottom,transparent 38%,#000 48% 70%,transparent 80%);mask-image:linear-gradient(to bottom,transparent 38%,#000 48% 70%,transparent 80%)}
.motion .band.crop{-webkit-mask-image:linear-gradient(to bottom,transparent 68%,#000 78%);mask-image:linear-gradient(to bottom,transparent 68%,#000 78%)}
.motion .f1 .scene{inset:-8%;transform-origin:50% 82%;will-change:transform}
.motion .puff{display:block;opacity:0}
.motion .mist{display:block;position:absolute;inset:0;z-index:19;pointer-events:none;opacity:0;--hole:0%;background:radial-gradient(ellipse at 50% 45%,#EFE3DA 0%,#CFC3CC 55%,#9D97AE 100%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,transparent var(--hole),#000 calc(var(--hole) + 30%));mask-image:radial-gradient(ellipse at 50% 50%,transparent var(--hole),#000 calc(var(--hole) + 30%))}
.motion .f7 .words{max-width:52rem;z-index:2}
/* the board keeps its staggered shape and fits the frame; one card at a time comes forward */
.motion .outcomes{--g:clamp(1rem,2vw,1.75rem);--c:min((100svh - 7rem - var(--g) * 1.5) / 2.5,(52vw - var(--g)) / 2);position:absolute;right:max(var(--space-6),6vw);top:50%;translate:0 -50%;width:calc(var(--c) * 2 + var(--g));margin:0;padding:0;grid-template-columns:var(--c) var(--c);grid-template-rows:repeat(5,calc((var(--c) - var(--g)) / 2));gap:var(--g)}
.motion .outcome{aspect-ratio:auto}
.motion .c1{grid-area:2/1/4/2}.motion .c2{grid-area:1/2/3/3}.motion .c3{grid-area:4/1/6/2}.motion .c4{grid-area:3/2/5/3}
.motion .c1{transform-origin:0 30%}.motion .c2{transform-origin:100% 0}.motion .c3{transform-origin:0 100%}.motion .c4{transform-origin:100% 70%}
.motion .o-note{opacity:0;font-size:.75rem;max-width:min(14rem,78%)}
.motion .outcome{box-shadow:0 18px 50px #0d0b0859}
.motion .f7 .words{max-width:min(28rem,40vw)}

.motion .f8 .after{display:block;-webkit-mask-image:linear-gradient(90deg,transparent 0 42%,#000 58% 100%);mask-image:linear-gradient(90deg,transparent 0 42%,#000 58% 100%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:20% 0;mask-position:20% 0}
.motion .f8 canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.motion .fly{display:block;position:absolute;inset:-10%;z-index:20;pointer-events:none;opacity:0;will-change:transform,opacity}
.motion .fly img{width:100%;height:100%;object-fit:cover}

/* phones */
@media (max-width:720px){
  .cta-long{display:none}.cta-short{display:inline}
  .nav .button{padding:var(--space-3) var(--space-4)}
  .giant{top:7rem}
  .words.top{top:6.5rem}
  .f4 .plate img{object-position:42% 50%}
  .motion .f3{--win-x:74%;--win-y:68%}
  .motion .f3 .plate{transform-origin:74% 68%}
  .motion .f4 .plate{transform-origin:100% 37%}
  .giant{top:calc(55% - .78em)}
  .plate.front{-webkit-mask-image:linear-gradient(to bottom,transparent 0 48%,#000 64%);mask-image:linear-gradient(to bottom,transparent 0 48%,#000 64%)}
  .puff{width:110%}
  .puff-l{left:-45%;top:47%}
  .puff-r{right:-50%;top:51%}
  .outcomes{grid-template-columns:1fr}
  .motion .outcomes{--g:.75rem;--c:calc((100vw - 2rem - var(--g)) / 2);left:var(--space-4);right:var(--space-4);top:18.5rem;translate:none;width:auto}
  .motion .f7 .words{max-width:none}
  .motion .o-note{font-size:.625rem;line-height:1.35}
  .motion .c1{transform-origin:0 0}.motion .c2{transform-origin:100% 0}.motion .c3{transform-origin:0 100%}.motion .c4{transform-origin:100% 100%}
  .o-title{font-size:1.125rem}
  .o-mark{font-size:.6875rem}  .marks-wide{display:none}.marks-tall{display:block}
  .mk-label{font-size:19px}.mk-value{font-size:58px}.mk-tile-text{font-size:21px}.mk-tile-text.strong{font-size:16px}.mk-tile-text.code{font-size:18px}
  .readout{left:var(--space-4);right:var(--space-4);top:auto;bottom:max(var(--space-4),env(safe-area-inset-bottom));translate:none;width:auto;grid-template-columns:1fr 1fr;gap:var(--space-4);padding:var(--space-4)}
  .ro-row{padding-bottom:0;border-bottom:0}
  .ro-figure{font-size:1.75rem}
  .ro-foot{grid-column:1/-1}
  .pair{gap:var(--space-6)}
}

/* still version of the outcomes frame: headline above the cards */
html:not(.motion) .f7 .words{position:relative;top:auto;left:auto;right:auto;padding:8rem var(--space-6) 0}

html:not(.motion) .scene{position:absolute;inset:0}