/* Layout: story on the left, one phone pinned on the right. Scrolling swaps the phone's screen and fades the page to that app's color. Phones go inline on small screens. */
:root{
  --fog:#EDEFEC; --ink:#1A1E1C; --muted:#5C6660; --line:rgba(26,30,28,.13);
  --pine:#2E5B4E; --bezel:#191B1A; --glass:rgba(255,255,255,.6);
  --t-home:#EDEFEC; --t-snappy:#F4E4D7; --t-punch:#E7E3EF; --t-crew:#DFE9E3; --t-curb:#F1E9CC;
  --display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --sans:"Geist", "Helvetica Neue", system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --fog:#101211; --ink:#E8ECE9; --muted:#97A29C; --line:rgba(232,236,233,.13);
  --pine:#8DC1AF; --bezel:#2B2E2D; --glass:rgba(30,34,32,.6);
  --t-home:#101211; --t-snappy:#1E1610; --t-punch:#16141E; --t-crew:#0F1814; --t-curb:#1B180D;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --fog:#101211; --ink:#E8ECE9; --muted:#97A29C; --line:rgba(232,236,233,.13);
  --pine:#8DC1AF; --bezel:#2B2E2D; --glass:rgba(30,34,32,.6);
  --t-home:#101211; --t-snappy:#1E1610; --t-punch:#16141E; --t-crew:#0F1814; --t-curb:#1B180D;
  color-scheme:dark}

html{scroll-behavior:smooth}
body{--page:var(--t-home);background:var(--page);color:var(--ink);font:400 17px/1.6 var(--sans);transition:background-color 1.1s var(--ease);-webkit-font-smoothing:antialiased}
body[data-scene="snappy"]{--page:var(--t-snappy)}
body[data-scene="punch"]{--page:var(--t-punch)}
body[data-scene="crew"]{--page:var(--t-crew)}
body[data-scene="curb"]{--page:var(--t-curb)}

.wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:72px;max-width:1120px;margin:0 auto;padding-inline:28px}
.story{min-width:0}
.story section{min-height:88vh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding-block:72px;max-width:34rem}
.story section.hero{min-height:84vh}

.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.tag{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.tag.live{border-color:transparent;background:var(--pine);color:var(--fog)}
h1,h2{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.02;text-wrap:balance;margin:0}
h1{font-size:clamp(48px,7.4vw,92px);font-variation-settings:"opsz" 96}
h1 em{font-style:normal;color:var(--pine)}
h2{font-size:clamp(38px,5vw,60px);font-variation-settings:"opsz" 72}
p{margin:0;max-width:62ch;text-wrap:pretty}
.lede{font-size:20px;color:var(--muted)}
.for{font:500 13px/1.5 var(--mono);color:var(--muted)}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.facts li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.meta{font:400 12.5px/1.5 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.hint{font:500 13px var(--mono);color:var(--muted);display:inline-flex;gap:8px;align-items:center;margin-top:12px}
.hint i{display:inline-block;width:1px;height:28px;background:var(--muted);transform-origin:top;animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.steps{display:grid;gap:22px;margin-top:4px}
.steps div{display:grid;gap:4px}
.steps b{font:600 19px/1.3 var(--display)}
.steps span{color:var(--muted);font-size:16px}

.mail{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.mail code{font:500 17px var(--mono);padding:14px 18px;border-radius:14px;background:var(--glass);border:1px solid var(--line);user-select:all;overflow-wrap:anywhere}
.btn{font:600 15px var(--sans);padding:14px 20px;border-radius:14px;border:0;background:var(--ink);color:var(--page);cursor:pointer;transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
footer{padding-block:40px 64px;font:400 13px var(--mono);color:var(--muted);border-top:1px solid var(--line);margin-top:24px}

/* The phone */
.stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 6vh);height:88vh;display:grid;place-items:center}
.phone{width:min(330px,calc(84vh * 9 / 19.5));aspect-ratio:9/19.5;border-radius:16%/7.4%;background:var(--bezel);padding:3.4%;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 40px 80px -30px rgba(0,0,0,.35),0 12px 24px -12px rgba(0,0,0,.25);position:relative;max-width:100%}
.screen{position:relative;height:100%;border-radius:13.5%/6.2%;overflow:hidden;background:#000;container-type:inline-size}
.island{position:absolute;top:2.2%;left:50%;width:31%;height:3.6%;transform:translateX(-50%);background:#000;border-radius:99px;z-index:5}
.scr{position:absolute;inset:0;font-size:4.4cqw;line-height:1.35;opacity:0;transform:translateY(3%) scale(.985);transition:opacity .7s var(--ease),transform .9s var(--ease);pointer-events:none;display:flex;flex-direction:column;overflow:hidden}
.scr.on{opacity:1;transform:none;pointer-events:auto}
.sb{display:flex;justify-content:space-between;align-items:center;padding:4.6% 9% 0;height:11%;font:600 1em/1 var(--sans);flex:none}
.sb .ic{display:flex;gap:.35em;align-items:center}
.sb .bars{display:flex;gap:.12em;align-items:flex-end;height:.75em}
.sb .bars i{width:.2em;background:currentColor;border-radius:1px}
.sb .bars i:nth-child(1){height:35%}.sb .bars i:nth-child(2){height:60%}.sb .bars i:nth-child(3){height:80%}.sb .bars i:nth-child(4){height:100%}
.sb .bat{width:1.6em;height:.75em;border:1.5px solid currentColor;border-radius:.25em;opacity:.9;position:relative}
.sb .bat::after{content:"";position:absolute;inset:1.5px;right:25%;background:currentColor;border-radius:1px}
.body{flex:1;padding:2% 6.5% 8%;display:flex;flex-direction:column;gap:.9em;min-height:0}

/* Home screen */
.s-home{background:radial-gradient(120% 70% at 20% 10%,#BFD6CB 0%,transparent 60%),radial-gradient(90% 60% at 90% 80%,#E9C9B5 0%,transparent 65%),radial-gradient(80% 50% at 60% 45%,#CFC8E3 0%,transparent 70%),#E3E6E1;color:#1B1F1D}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4em .6em;padding:6% 7% 0}
.app{display:grid;justify-items:center;gap:.4em;text-decoration:none;color:inherit;font:500 .78em/1 var(--sans)}
.ico{width:100%;aspect-ratio:1;border-radius:23%;display:grid;place-items:center;overflow:hidden;box-shadow:0 .3em .8em -.3em rgba(0,0,0,.3);transition:transform .3s var(--ease)}
.app:hover .ico{transform:scale(1.06)}
.ico img{width:100%;height:100%;object-fit:cover}
.ico.punch{background:#241A16}
.ico.punch i{width:58%;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12%}
.ico.punch b{border-radius:50%;background:#D98A4B}
.ico.punch b.o{background:none;box-shadow:inset 0 0 0 1.5px #D98A4B}
.ico.crew{background:#E8692C}
.ico.crew i{width:52%;display:grid;gap:.22em}
.ico.crew b{height:.28em;border-radius:99px;background:#fff}
.ico.crew b:nth-child(2){width:72%}.ico.crew b:nth-child(3){width:86%}
.ico.curb{background:#F6E7B4}
.ico.curb i{width:62%;height:36%;background:#D6452B;border-radius:.3em .5em .2em .2em;position:relative}
.ico.curb i::before,.ico.curb i::after{content:"";position:absolute;bottom:-28%;width:30%;aspect-ratio:1;border-radius:50%;background:#2B2412;box-shadow:0 0 0 .12em #F6E7B4}
.ico.curb i::before{left:10%}.ico.curb i::after{right:10%}
.ghost{width:100%;aspect-ratio:1;border-radius:23%;background:rgba(255,255,255,.42)}
.dock{margin:auto 5% 4.5%;padding:4.5%;border-radius:2em;background:rgba(255,255,255,.38);backdrop-filter:blur(10px);display:grid;grid-template-columns:repeat(4,1fr);gap:.8em}
.widget{margin:2% 7% 0;padding:1em 1.1em;border-radius:1.4em;background:rgba(255,255,255,.5);backdrop-filter:blur(10px);display:grid;gap:.15em}
.widget small{font:500 .7em/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.widget strong{font:600 1.35em/1.15 var(--display);letter-spacing:-.02em}

/* SnappyMoo screen */
.s-snappy{background:#F7F1E7;color:#2A1D14;font-family:"Figtree",var(--sans)}
.s-snappy .wm{font:500 1.75em/1 "Fraunces",Georgia,serif;letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center}
.s-snappy .wm em{color:#C04821}
.s-snappy .wm img{width:2.4em;height:auto}
.s-snappy .eb{font:600 .68em/1 "Figtree",var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7A6958}
.s-snappy .card{background:#FFFCF7;border:1px solid rgba(42,29,20,.09);border-radius:1.2em;padding:1em 1.05em;display:grid;gap:.55em}
.s-snappy .card.met{border-color:#C04821}
.s-snappy .card h4{margin:0;font:500 1.3em/1.1 "Fraunces",Georgia,serif;letter-spacing:-.01em}
.s-snappy .when{font-size:.82em;color:#7A6958}
.s-snappy .row{display:flex;justify-content:space-between;align-items:center;gap:.5em}
.seats{display:flex;gap:.3em;flex-wrap:wrap}
.seat{width:1.55em;height:1.55em;border-radius:50%;display:grid;place-items:center;font:500 .72em/1 "Fraunces",Georgia,serif;border:1px dashed rgba(42,29,20,.22);color:#C04821}
.seat.on{border:0;background:#F5DFD2}
.met .seat.on{background:#DAEADD;color:#3C7350}
.met .seat.you{background:#3C7350;color:#fff}
.chip{font:600 .7em/1 "Figtree",var(--sans);padding:.5em .75em;border-radius:99px;white-space:nowrap}
.chip.on{background:#DAEADD;color:#3C7350}
.chip.wait{background:#F1E4CF;color:#94642A}
.s-snappy .cta{margin-top:auto;background:#C04821;color:#FFF8F1;border-radius:1em;text-align:center;padding:.95em;font:700 .95em/1 "Figtree",var(--sans)}

/* Punch screen */
.s-punch{background:#1E1613;color:#F4E9DD}
.s-punch .shop{font:500 .72em/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#B9A797}
.s-punch h4{margin:0;font:600 1.75em/1.05 var(--display);letter-spacing:-.02em}
.pcard{background:linear-gradient(160deg,#3A2A22,#2A1E19);border-radius:1.3em;padding:1.15em;display:grid;gap:.9em;border:1px solid rgba(244,233,221,.08)}
.pcard .top{display:flex;justify-content:space-between;align-items:baseline}
.pcard .n{font:500 .85em var(--mono);color:#D98A4B}
.holes{display:grid;grid-template-columns:repeat(5,1fr);gap:.55em}
.holes b{aspect-ratio:1;border-radius:50%;background:#D98A4B;display:grid;place-items:center;color:#1E1613;font:700 .8em var(--sans)}
.holes b.o{background:none;box-shadow:inset 0 0 0 1.5px rgba(217,138,75,.55)}
.holes b.gift{box-shadow:inset 0 0 0 1.5px #D98A4B;color:#D98A4B;background:none}
.s-punch .note{font-size:.88em;color:#D7C7B7}
.s-punch .next{display:grid;gap:.2em;padding:.95em 1.05em;border-radius:1.1em;background:rgba(244,233,221,.06)}
.s-punch .next small{font:500 .66em var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#B9A797}
.s-punch .cta{margin-top:auto;background:#D98A4B;color:#1E1613;border-radius:1em;text-align:center;padding:.95em;font:700 .95em/1 var(--sans)}

/* Crew screen */
.s-crew{background:#F8FAF8;color:#16322A}
.s-crew h4{margin:0;font:700 1.9em/1 var(--display);letter-spacing:-.03em}
.s-crew .sub{font-size:.82em;color:#5E7169;margin-top:-.5em}
.jobs{display:grid;gap:0;border-top:1px solid #E1E8E4}
.job{display:grid;grid-template-columns:3.2em 1fr auto;gap:.6em;align-items:center;padding:.7em 0;border-bottom:1px solid #E1E8E4}
.job time{font:500 .78em var(--mono);color:#5E7169;font-variant-numeric:tabular-nums}
.job b{display:block;font:600 .9em/1.2 var(--sans)}
.job span{font-size:.72em;color:#5E7169}
.pill{font:600 .64em/1 var(--sans);padding:.45em .6em;border-radius:99px;white-space:nowrap}
.pill.done{background:#DCEFE3;color:#1F7A47}
.pill.go{background:#FCE3D6;color:#B4471A}
.pill.later{background:#EEF1EF;color:#5E7169}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.photos div{aspect-ratio:1;border-radius:.9em;display:flex;align-items:flex-end;padding:.5em;font:600 .66em var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.photos .b4{background:linear-gradient(135deg,#8C9A92,#5D6B64)}
.photos .af{background:linear-gradient(135deg,#7FB59A,#3F7A5E)}
.s-crew .cta{margin-top:auto;background:#E8692C;color:#fff;border-radius:1em;text-align:center;padding:.95em;font:700 .95em/1 var(--sans)}

/* Curbside screen */
.s-curb{background:#FBF3DC;color:#2B2412}
.s-curb h4{margin:0;font:700 1.7em/1.05 var(--display);letter-spacing:-.025em}
.s-curb .sub{font:500 .7em var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8A7A52}
.map{position:relative;height:9.5em;border-radius:1.2em;overflow:hidden;background:
  linear-gradient(90deg,transparent 46%,#fff 46%,#fff 51%,transparent 51%),
  linear-gradient(0deg,transparent 56%,#fff 56%,#fff 61%,transparent 61%),
  linear-gradient(90deg,transparent 14%,rgba(255,255,255,.6) 14%,rgba(255,255,255,.6) 16%,transparent 16%,transparent 80%,rgba(255,255,255,.6) 80%,rgba(255,255,255,.6) 82%,transparent 82%),
  #EADFB9}
.map .park{position:absolute;right:8%;top:10%;width:26%;height:30%;border-radius:.6em;background:#CFDDB0}
.map .pin{position:absolute;left:48.5%;top:58.5%;width:1.1em;height:1.1em;margin:-.55em;border-radius:50%;background:#D6452B;box-shadow:0 0 0 .3em rgba(214,69,43,.25),0 0 0 .14em #fff}
.map .lbl{position:absolute;left:6%;bottom:8%;background:#fff;border-radius:.7em;padding:.45em .65em;font:600 .72em/1.2 var(--sans);box-shadow:0 .3em .8em -.4em rgba(0,0,0,.3)}
.map .lbl span{display:block;font-weight:400;color:#8A7A52}
.menu{display:grid}
.item{display:flex;justify-content:space-between;align-items:center;padding:.6em 0;border-bottom:1px solid rgba(43,36,18,.1);font-size:.9em}
.item span{color:#8A7A52;font-variant-numeric:tabular-nums;margin-left:auto;margin-right:.7em;font-family:var(--mono);font-size:.9em}
.item i{font-style:normal;width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:#2B2412;color:#FBF3DC;font-weight:600}
.item i.q{background:#D6452B;font-size:.8em}
.s-curb .bar{margin-top:auto;display:flex;justify-content:space-between;align-items:center;background:#2B2412;color:#FBF3DC;border-radius:1em;padding:.7em .7em .7em 1em;font-size:.82em}
.s-curb .bar b{background:#D6452B;color:#fff;padding:.65em .9em;border-radius:.7em;font:700 1em/1 var(--sans)}

.inline{display:none}

@media (max-width:880px){
  .wrap{grid-template-columns:minmax(0,1fr);gap:0;padding-inline:20px}
  .stage{display:none}
  .story section,.story section.hero{min-height:auto;padding-block:56px}
  .inline{display:grid;place-items:center;padding-block:12px 4px}
  .inline .phone{width:min(300px,76vw)}
  .inline .scr{position:absolute}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}