@font-face{font-family:"Big Shoulders";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/big-shoulders-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Big Shoulders";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/big-shoulders-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/public-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/public-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --ink:#2c1524; --blush:#edccbe; --blush-2:#e8c2b2; --muted:#6c4857; --signal:#ff4a22;
  --m:clamp(16px,2.2vw,32px);
  --dial:52px;
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.5rem,1.15rem + 1.1vw,2.25rem);
  --step-head:clamp(2.375rem,1.1rem + 4.2vw,4.75rem);
  --name:min(18vw,31svh);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--blush);font-family:"Public Sans",system-ui,sans-serif;font-size:var(--step-body);line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,canvas,svg{display:block}
a{color:inherit}
h1,h2,h3,.name,.end__name,.say__line{font-family:"Big Shoulders","Arial Narrow",Impact,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
h2,h3{font-size:var(--step-head);text-wrap:balance;line-height:.96}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
::selection{background:var(--signal);color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:0 24px;border-radius:999px;background:var(--blush);color:var(--ink);font-weight:600;font-size:var(--step-small);text-decoration:none;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color 180ms ease,color 180ms ease;pointer-events:auto}
.btn:active{transform:scale(.97)}
.btn--line{background:var(--blush-2);background:#4a2a3c;color:var(--blush)}
.btn--ink{background:var(--ink);color:var(--blush)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--signal);color:var(--ink)}}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 var(--m);color:var(--blush);transition:color 200ms ease,transform 240ms var(--ease-out)}
.nav.is-away{transform:translateY(-100%)}
.nav:focus-within{transform:none}
.nav.is-light{color:var(--ink)}
.nav a{text-decoration:none;font-weight:600;font-size:var(--step-small)}
.nav nav{display:flex;gap:clamp(14px,2.2vw,32px)}
.nav nav a{position:relative;padding:12px 0}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav nav a:hover::after{transform:scaleX(1)}}
.nav__home{font-family:"Big Shoulders",sans-serif;font-weight:800;font-size:1.5rem!important;line-height:1;padding:10px 10px 10px 0}

/* frames */
.frame{position:relative;overflow:hidden;background:var(--ink);border-radius:30px;isolation:isolate}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1) contrast(1.1)}
.frame img.on{opacity:1}
.frame canvas{position:absolute;inset:0;width:100%;height:100%}

/* one canvas travels between these on phones */
.frame--step{display:none}

/* run A */
.run{position:relative}
.run--a{background:var(--ink)}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;z-index:1}
.stage .frame{position:absolute;right:var(--m);top:calc(50% - 8px);height:min(78svh,62vw);aspect-ratio:4/5;transform:translate3d(var(--fx,0px),-50%,0);will-change:transform}
.name{position:absolute;inset:0;pointer-events:none;font-size:var(--name);line-height:.86;z-index:2}
.name>span{position:absolute;display:block;overflow:hidden;padding:.03em .02em 0;will-change:transform}
.name__a{left:var(--m);top:56px;transform-origin:0 0;transform:scale(var(--ns,1))}
.name__b{right:var(--m);bottom:calc(var(--dial) + 10px);transform-origin:100% 100%;transform:scale(var(--ns,1))}
.name>span>span{display:block}
.js .name>span>span{animation:rise 1100ms var(--ease-out) both}
.js .name__b>span{animation-delay:120ms!important}
@keyframes rise{from{transform:translateY(102%)}to{transform:none}}
.steps{position:relative;z-index:3}
.run--a .steps{margin-top:-100svh;pointer-events:none}
.step{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:0 var(--m)}
.run--a .step{min-height:96svh;width:min(52vw,780px);padding-top:120px;padding-bottom:110px}
.run--a .step>*{pointer-events:auto}
.step p{max-width:34em}
.tags{font-size:var(--step-small);color:inherit;opacity:.82}
.run--a .step--hero{min-height:100svh;width:auto;flex-direction:row;justify-content:space-between;align-items:center;padding-top:0;padding-bottom:0;gap:0}
.lead{font-size:var(--step-lead);line-height:1.2;font-weight:600;width:calc(50vw - min(39svh,31vw)*.8 - var(--m) - 28px);max-width:15em;margin-top:6svh}
.hero-side{display:flex;flex-direction:column;gap:10px;width:calc(50vw - min(39svh,31vw)*.8 - var(--m) - 28px);margin-top:-6svh}
.role{font-size:var(--step-small);font-weight:600}

/* statement */
.say{background:var(--blush);color:var(--ink);padding:clamp(96px,13svh,168px) var(--m) clamp(96px,12svh,150px);display:flex;flex-direction:column;gap:clamp(36px,6svh,64px)}
.say__line{font-size:min(20.6vw,38svh);line-height:.86;white-space:nowrap;font-variant-numeric:tabular-nums}
.say__sub{font-size:var(--step-lead);line-height:1.14;font-weight:600}
.say__sub .w{opacity:.22;transition:opacity 220ms ease}
.say__sub .w.on{opacity:1}
.wave{width:100%;height:clamp(120px,24svh,240px)}
.say__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--m)}
.say__row p:first-child{font-weight:600}
.say__row p:last-child{max-width:32em}

/* run B */
.run--b{background:var(--blush);color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--m);padding:0 var(--m)}
.stick{position:sticky;top:64px;height:calc(100svh - 64px - var(--dial) - 12px);min-width:0}
.stick .frame{height:100%;background:var(--blush)}
.run--b .steps{padding:calc(16svh) 0 12svh;min-width:0}
.steps__title{font-size:clamp(2rem,1rem + 3vw,3.5rem);padding-bottom:6svh;color:var(--muted)}
.run--b .step{min-height:66svh;padding:0;gap:10px;justify-content:flex-start}
.run--b h3{font-size:clamp(3.25rem,1.2rem + 7.4vw,8.5rem);line-height:.88}
.role2{font-size:var(--step-lead);line-height:1.14;font-weight:600}
.run--b .step>p:not(.role2):not(.tags){margin-top:10px}

/* line-up */
.bill{background:var(--ink);padding:clamp(88px,12svh,144px) 0 clamp(72px,10svh,120px);overflow:hidden}
.bill__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);grid-template-areas:'h side' 'names side';grid-template-rows:auto 1fr;gap:0 clamp(24px,4vw,64px);padding:0 var(--m);align-items:start}
.bill__grid h2{grid-area:h}.bill__names{grid-area:names}.bill__side{grid-area:side}
.bill__grid h2{font-size:clamp(2rem,1rem + 3vw,3.5rem);color:var(--signal);margin-bottom:clamp(24px,4svh,44px)}
.tier{display:flex;flex-wrap:wrap;gap:0 .34em;align-items:baseline;margin-bottom:.14em;font-family:"Big Shoulders",sans-serif;font-weight:800;text-transform:uppercase;line-height:.98}
.tier--1{font-size:clamp(2.75rem,6.1vw,8rem)}
.tier--2{font-size:clamp(2.125rem,3.9vw,5rem)}
.tier--3{font-size:clamp(1.75rem,2.8vw,3.5rem)}
.tier--4{font-size:clamp(1.375rem,2vw,2.5rem)}
.tier button{all:unset;cursor:pointer;color:var(--blush);opacity:.82;transition:opacity 180ms ease,color 180ms ease;border-radius:4px}
.tier button[aria-pressed=true]{opacity:1;color:var(--signal)}
.tier button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.tier button:hover{opacity:1}}
.bill__side{position:sticky;top:72px}
.bill__side .frame{aspect-ratio:4/5}
.bill__cap{margin-top:12px;font-weight:600;font-size:var(--step-small);min-height:1.5em}
.ticker{margin-top:clamp(56px,9svh,96px);overflow:hidden}
.ticker__row{display:flex;gap:10px;width:max-content;animation:tick 90s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker figure{position:relative;height:clamp(170px,27svh,260px);flex:none;background:var(--blush);border-radius:18px;overflow:hidden}
.ticker img{height:100%;width:auto;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply}

/* end */
.end{position:relative;background:var(--signal);color:var(--ink);padding:clamp(80px,12svh,132px) var(--m) 0;overflow:hidden;display:flex;flex-direction:column;gap:clamp(36px,6svh,64px)}
.end__top{display:grid;grid-template-columns:1fr 1fr;gap:var(--m);align-items:end}
.end__top h2{font-size:clamp(4rem,1rem + 11vw,12rem);line-height:.86}
.end__top p{font-size:var(--step-lead);line-height:1.14;font-weight:600;max-width:17em}
.mail{position:relative;display:flex;justify-content:space-between;align-items:center;gap:.3em;padding:.1em .28em .06em;margin:0 -.1em;border-radius:30px;font-family:"Big Shoulders",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(3rem,10.8vw,14rem);line-height:1;text-decoration:none;overflow:hidden;background:var(--ink);color:var(--blush);isolation:isolate;transition:color 200ms ease}
.mail::before{content:"";position:absolute;inset:0;background:var(--blush);transform:scaleY(0);transform-origin:bottom;transition:transform 300ms var(--ease-out);z-index:-1}
@media (hover:hover) and (pointer:fine){.mail:hover{color:var(--ink)}.mail:hover::before{transform:scaleY(1)}}
.mail:active span{transform:scale(.99)}
.end__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--m);font-size:var(--step-small);font-weight:600}
.end__legal a{display:inline-block;margin-right:16px;padding:6px 0}
.end__name{font-size:20.6vw;line-height:.8;white-space:nowrap;padding-bottom:var(--dial);margin-bottom:-.04em}

/* dial: the page is one tuner */
.dial{position:fixed;inset:auto 0 0 0;z-index:40;display:grid;grid-template-columns:minmax(220px,22vw) minmax(0,1fr);align-items:center;height:var(--dial);padding:0 var(--m);gap:var(--m);background:var(--ink);color:var(--blush)}
.dial__read{display:flex;align-items:baseline;gap:12px;font-size:var(--step-small);font-weight:600;white-space:nowrap;overflow:hidden}
.dial__mhz{font-variant-numeric:tabular-nums;color:var(--signal);min-width:2.6em}
.dial__scale{position:relative;height:100%;touch-action:none}
.dial__ticks{position:absolute;inset:14px 0;width:100%;height:calc(100% - 28px);color:var(--blush);opacity:.55}
.dial__marks{position:absolute;inset:0}
.dial__marks i{position:absolute;top:calc(50% - 3px);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--blush)}
.dial__needle{position:absolute;top:7px;bottom:7px;left:0;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--signal);will-change:transform}
.dial__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:none}
.dial__scale:focus-within .dial__needle{outline:2px solid var(--blush);outline-offset:2px}

/* entrances: only hidden when script is running */
.js .rise{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 800ms var(--ease-out);transition-delay:var(--d,0ms)}
.js .rise.in{opacity:1;transform:none}
.js .end .rise{opacity:1}

/* phone */
@media (max-width:860px){
  :root{--name:20vw;--dial:56px}
  .nav{height:48px}
  .stage{position:relative;top:auto;height:62svh;z-index:1}
  .name{pointer-events:auto}
  .stage .frame img{opacity:0}.stage .frame img:first-of-type{opacity:1}
  .stage .frame{left:var(--m);right:var(--m);top:48px;height:calc(62svh - 56px);aspect-ratio:auto;transform:none;border-radius:22px}
  .name__a{top:calc(48px + 10px);left:calc(var(--m) + 10px)}
  .name__b{bottom:18px;right:calc(var(--m) + 10px)}
  .run--a .steps{margin-top:0}
  .run--a .step,.run--a .step--hero{width:auto;min-height:0;padding:20px var(--m) 56px;justify-content:flex-start}
  .run--a .step--hero{flex-direction:column;align-items:flex-start;gap:14px;padding-top:16px}
  .frame--step{display:block;width:100%;aspect-ratio:4/5;border-radius:22px;margin-bottom:6px}
  .lead,.hero-side{width:auto;margin:0;max-width:none}
  .say__row,.end__top{grid-template-columns:1fr}
  .run--b{display:block;padding:0}
  .stick{display:none}
  .run--b .steps{padding:72px var(--m) 72px}
  .steps__title{padding-bottom:28px}
  .run--b .step{min-height:0;padding-bottom:52px}
  .bill__grid{display:flex;flex-direction:column;gap:0}
  .bill__side{margin-bottom:22px;order:1}
  .bill__cap{position:absolute;width:1px;height:1px;min-height:0;margin:0;overflow:hidden;clip-path:inset(50%)}
  .bill__names{order:2}
  .bill__side{position:static;width:100%}
  .bill__side .frame{aspect-ratio:auto;height:36svh;border-radius:22px}
  .end__row{grid-template-columns:1fr 1fr}
  .mail{font-size:11.4vw;border-radius:20px;padding:.14em .3em .1em}
  .mail span:last-child{display:none}
  .dial{grid-template-columns:minmax(0,1fr);grid-template-rows:20px 30px;gap:0;padding:4px var(--m) 2px}
  .dial__ticks{inset:7px 0}
  .dial__needle{top:3px;bottom:3px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .name>span>span{animation:none}
  .ticker{overflow-x:auto}.ticker__row{animation:none}
  .js .rise{transform:none;transition:opacity 200ms ease}
  .say__sub .w{opacity:1}
}

/* legal pages */
.legal{background:var(--blush);color:var(--ink);min-height:100svh;padding:112px var(--m) 96px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--m)}
.legal h1{font-size:clamp(3.25rem,8vw,8rem);line-height:.9;position:sticky;top:80px;align-self:start}
.legal section{margin-bottom:32px;max-width:40em}
.legal h2{font-family:"Public Sans",sans-serif;font-weight:600;text-transform:none;letter-spacing:0;font-size:var(--step-lead);line-height:1.2;margin-bottom:8px}
.legal p{margin-bottom:8px;overflow-wrap:anywhere}
@media (max-width:860px){.legal{display:block}.legal h1{position:static;margin-bottom:32px}}

/* 404 */
.lost{min-height:100svh;padding:112px var(--m) 96px;display:flex;flex-direction:column;justify-content:flex-end;gap:24px}
.lost h1{font-size:min(30vw,52svh)}
.lost p{font-size:var(--step-lead);line-height:1.2}