:root{
  --cream:#F6EEDC;
  --ink:#12100E;
  --orange:#CE5B22;
  --teal:#1B6E68;
  --mustard:#E2A32C;
  --red:var(--orange);
  --blue:var(--teal);
  --yellow:var(--mustard);
  --accent:var(--red);
  --gutter:clamp(1.5rem,5vw,5rem);
  --maxw:1440px;
  --display:"Chillax","Century Gothic","Futura",system-ui,sans-serif;
  --text:"Switzer","Inter",system-ui,sans-serif;
  --ball-dy:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--text);overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative}
.wrap--split{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(2rem,6vw,6rem)}

.marker{font-size:.68rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;display:block;margin-bottom:1.4rem}

.deco{position:absolute;pointer-events:none;z-index:0;
  right:-2%;top:50%;transform:translateY(-50%);
  width:clamp(230px,32vw,430px);height:min(88vh,660px)}

.wordmark{font-family:var(--display);font-weight:600;
  font-size:clamp(3rem,11vw,10.5rem);line-height:.84;letter-spacing:-.035em;position:relative;z-index:1}
.line{display:block;width:max-content;max-width:100%}
.rule{width:clamp(110px,16vw,240px);height:6px;background:var(--accent);margin:clamp(1.4rem,2.6vw,2.2rem) 0 1rem;position:relative;z-index:1}
.tagline{font-size:clamp(.72rem,1.05vw,.86rem);font-weight:500;letter-spacing:.2em;text-transform:uppercase;position:relative;z-index:1}

.more{display:flex;align-items:center;gap:2rem;margin-top:2.2rem;position:relative;z-index:1}
.disc{display:inline-flex;align-items:center;gap:.7rem;
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.disc .lbl--open{display:none}
.disc[aria-expanded="true"] .lbl--closed{display:none}
.disc[aria-expanded="true"] .lbl--open{display:inline}
.disc__glyph{position:relative;width:26px;height:26px;border-radius:50%;background:var(--accent);flex:none;
  transition:transform .45s cubic-bezier(.34,1.4,.64,1)}
.disc__glyph::before,.disc__glyph::after{content:"";position:absolute;inset:50% 7px auto;height:2px;background:var(--cream);transform:translateY(-1px)}
.disc__glyph::after{transform:translateY(-1px) rotate(90deg);transition:opacity .3s}
.disc[aria-expanded="true"] .disc__glyph{transform:rotate(135deg)}
.out{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:inherit;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}

.island{max-height:0;opacity:0;overflow:hidden;position:relative;z-index:1;
  transition:max-height .55s cubic-bezier(.4,0,.2,1),opacity .35s ease,margin .55s}
.island.open{max-height:32rem;opacity:1;margin-top:1.5rem}
.island p{background:var(--ink);color:var(--cream);padding:1.4rem 1.6rem;max-width:34rem;
  font-size:clamp(.82rem,1vw,.93rem);line-height:1.62}
.island--accent p{background:var(--accent)}
.island__links{padding-top:0;display:flex;gap:1.6rem;flex-wrap:wrap}
.island__links a{color:inherit;text-decoration:none;font-size:.64rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid rgba(246,238,220,.55);padding-bottom:2px}

.cue{position:absolute;left:var(--gutter);bottom:var(--gutter);
  font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;opacity:.45}

.ball{position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;
  background:var(--red);will-change:transform;transform-origin:50% 100%;z-index:3}

.two__type{max-width:32rem}
.chapter{font-family:var(--display);font-weight:600;
  font-size:clamp(2.1rem,4.6vw,4rem);line-height:.94;letter-spacing:-.025em}
.lede{margin-top:1.4rem;font-size:clamp(.88rem,1.1vw,1rem);line-height:1.62;max-width:30rem}
.subtitle{margin-top:1.6rem;font-size:.68rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}
.two__type .disc{margin-top:1.8rem}
.micro{margin-top:1.8rem;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;opacity:.5}

.two__field{position:relative}
#grid{height:min(70vh,520px);width:auto;display:block;overflow:visible}
#grid circle{transform:scale(0);transform-origin:center;transform-box:fill-box;opacity:0;
  transition:transform .55s cubic-bezier(.34,1.5,.64,1),opacity .3s ease}
#grid circle.on{transform:scale(1);opacity:1}
.fieldnote{position:absolute;bottom:-2.4rem;left:0;font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--red);opacity:0;transition:opacity .4s ease}
.fieldnote.on{opacity:1}


.scaffold__note{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;opacity:.4}
.scaffold__links{margin-top:1.2rem;display:flex;gap:1.8rem}
.scaffold__links a{color:inherit;text-decoration:none;font-size:.64rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--red);padding-bottom:2px}

@media (max-width:860px){
  .wrap--split{grid-template-columns:1fr;gap:2.5rem}
  #grid{height:auto;width:min(62vw,290px)}
  .deco{opacity:.35;right:-14%;width:60vw}
  .more{gap:1.4rem;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .act{height:auto}
  .stage{position:static;height:auto;overflow:visible}
  .panel{position:static;min-height:100vh;opacity:1!important;transform:none!important}
  .ball{display:none}
  #grid circle{transform:scale(1);opacity:1;transition:none}
  .fieldnote{opacity:1}
}


/* ---- deck ---- */
html,body{height:100%}
body{overflow:hidden}
.deck{position:fixed;inset:0;will-change:transform}
.slide{position:relative;height:100vh;display:flex;align-items:center;overflow:hidden;--accent:var(--red)}
.slide--hero{overflow:visible}
.deco,.mech{opacity:1}
.wrap--split{display:grid;grid-template-columns:minmax(0,.85fr) 1.15fr;
  align-items:center;gap:clamp(2rem,5vw,5rem)}
.col-type{max-width:34rem}
.col-mech{position:relative;display:flex;align-items:center;justify-content:center}
.mech{width:auto;height:min(70vh,660px);display:block;overflow:visible}
.mech--wide{width:min(84vw,980px);height:auto}
.controls{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;margin-top:2rem}
.col-type>.disc{margin-top:2rem}
.subtitle+.disc,.subtitle+.controls{margin-top:1.9rem}

.nav{position:fixed;right:clamp(.9rem,2.2vw,2rem);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.85rem;z-index:20}
.nav button{width:11px;height:11px;border-radius:50%;background:var(--ink);opacity:.22;
  transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.4,.64,1);padding:0}
.nav button[aria-current="true"]{opacity:1;transform:scale(1.55);background:var(--red)}

.cue{position:absolute;left:var(--gutter);bottom:var(--gutter);
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;opacity:.42}
.ball{position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;
  background:var(--orange);will-change:transform;transform-origin:50% 50%;z-index:5}
.ball i{position:absolute;left:16%;top:38%;width:24%;height:24%;border-radius:50%;background:var(--cream)}

.peek{display:inline-flex;align-items:center;gap:.7rem;
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.peek__glyph{width:26px;height:26px;flex:none;border:3px solid var(--ink);border-radius:50%;
  transition:background .35s ease,transform .45s cubic-bezier(.34,1.4,.64,1)}
.peek[aria-expanded="true"] .peek__glyph{background:var(--ink);transform:scale(.7)}
.peek[hidden]{display:none}
.plate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none;opacity:0;transform:scale(.94);
  transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.3,.64,1)}
.plate.open{opacity:1;transform:scale(1)}
.plate img{height:min(64vh,600px);width:auto;max-width:100%;aspect-ratio:4/5;
  object-fit:cover;display:block;background:var(--ink)}
.plate figcaption{margin-top:.9rem;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;opacity:.6}

.field{flex-direction:column}
#grid{height:min(70vh,640px);width:auto;display:block;overflow:visible}
.fieldnote{position:static;margin-top:1.1rem;font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--red);opacity:0;transition:opacity .4s ease}
.fieldnote.on{opacity:1}
.field .micro{margin-top:.5rem}

.slide--out .wrap{text-align:center}
.outro{margin-top:2rem}
.outro__lede{font-family:var(--display);font-weight:600;
  font-size:clamp(1.7rem,3.8vw,3.2rem);letter-spacing:-.02em}
.outro__links{margin-top:2.2rem;display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}
.outro__links a{color:inherit;text-decoration:none;font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--red);padding-bottom:3px}

@media (max-width:900px){
  .wrap--split{grid-template-columns:1fr;gap:1.6rem}
  .mech{height:min(38vh,320px)}
  .plate img{height:min(38vh,320px)}
  #grid{height:min(44vh,380px)}
  .nav{right:.6rem;gap:.6rem}
}
@media (prefers-reduced-motion:reduce){
  body{overflow:auto}
  .deck{position:static;transform:none!important}
  .slide{height:auto;min-height:100vh;padding-block:5rem}
  .nav{display:none}
  .ball{display:none}
  #grid circle{transform:scale(1);opacity:1;transition:none}
  .fieldnote{opacity:1}
}

.outro__note{margin-top:1.1rem;font-size:clamp(.82rem,1vw,.95rem);line-height:1.6;opacity:.72}

#stair rect{transform-box:fill-box;transform-origin:50% 100%;
  transition:transform .3s cubic-bezier(.34,1.55,.64,1)}
#stair{position:absolute;pointer-events:none;z-index:0;overflow:visible}
.slide--hero .col-type{position:relative;z-index:2}
.outro__note{max-width:34rem;margin-inline:auto}

.lede,.island p,.tagline,.subtitle,.micro{text-wrap:pretty}
.chapter,.wordmark,.outro__lede,.outro__note{text-wrap:balance}
.slide--out .wrap{position:static}
.slide--out .marker{position:absolute;top:var(--gutter);left:var(--gutter);margin:0;z-index:2}
.outro__dots,.outro__now{opacity:0}
.slide.played .outro__dots{opacity:1;transition:opacity .45s ease .75s}
.slide.played .outro__now{opacity:1;transition:opacity .6s ease 1.6s}