/* Coming-soon page. Tokens, .btn, .fmark come from site.css. */
.soon{margin:0}
:root{--serif:"Fraunces",Georgia,"Times New Roman",serif;--plate-dark:#0E110A}
.soon h2{font-family:var(--serif);font-style:normal;font-weight:400;font-stretch:normal;letter-spacing:-.025em;font-variation-settings:"opsz" 144;font-size:clamp(40px,6vw,88px);line-height:.98}
.cs-sub{margin-top:16px;max-width:52ch;font-size:clamp(16px,1.3vw,19px);color:var(--ink-2)}

/* ---------- hero: the grill plate ---------- */
.cs-hero{position:relative;min-height:max(100svh,640px);display:flex;flex-direction:column;background:var(--plate-dark);color:#F1F2E9;overflow:hidden;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  --logo-fresh:#6DB35F;--logo-leaf:#4E9443;--logo-ember:#F0782F;--ink-3:#8A927C}
.cs-grill{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;
  background:repeating-linear-gradient(#1a1b16 0 14px,#0b0c09 14px 26px) bottom/100% 60% no-repeat,linear-gradient(#0E110A,#1B2414 40%,#3a1a0a)}
.cs-hero::after{content:"";position:absolute;inset:auto 0 0;height:46%;z-index:-1;pointer-events:none;background:linear-gradient(transparent,rgba(8,9,5,.72))}
.cs-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:clamp(18px,3vw,32px)}
.cs-logo{width:clamp(78px,8vw,112px);height:auto;color:#F1F2E9}
.cs-where{font:500 14px/1.3 var(--body);color:#BCC2AE;text-decoration:none;text-align:right;max-width:24ch}
.cs-where:hover{color:#F1F2E9;text-decoration:underline}
.cs-copy{flex:1;display:flex;flex-direction:column;padding-top:clamp(20px,5vh,64px)}
.cs-title{font-size:clamp(54px,10.5vw,190px);line-height:.86;text-wrap:nowrap;color:#F1F2E9}
.cs-l{display:block}
.cs-title [class*="-mask"]{padding-bottom:.14em;margin-bottom:-.14em}
.cs-when{font:italic 300 1em/.95 var(--serif);letter-spacing:-.035em;font-variation-settings:"opsz" 144;color:#FFD9A8;text-shadow:0 0 .35em rgba(240,120,47,.55),0 0 1.2em rgba(221,99,28,.35)}
.cs-lede{margin-top:auto;max-width:46ch;font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:#DADFCC}
.cs-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin:22px 0 clamp(16px,3vh,28px)}
.cs-clock{display:flex;gap:clamp(14px,2.6vw,40px)}
.cs-clock div{display:flex;flex-direction:column}
.cs-clock b{font:italic 850 clamp(40px,5.4vw,92px)/.9 var(--display);font-stretch:70%;font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:inline-block}
.cs-clock span{margin-top:6px;font-size:14px;color:#BCC2AE}
.cs-hero .btn{box-shadow:0 10px 40px -8px rgba(240,120,47,.7)}
.cs-gauge{display:flex;justify-content:space-between;gap:16px;padding-bottom:clamp(14px,2.4vh,24px);font-size:13px;color:#BCC2AE}
.cs-gr{display:flex;align-items:center;gap:16px}
.cs-temp b{font:600 13px var(--mono);color:#FFD9A8}
.cs-sound{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;color:inherit;font-size:13px}
.cs-sound::before{content:"";width:22px;height:12px;border-radius:9px;box-shadow:inset 0 0 0 1.5px currentColor;background:radial-gradient(circle at 6px 50%,currentColor 3px,transparent 3.5px);transition:background-position .2s}
.cs-sound[aria-pressed="true"]{color:#FFD9A8}
.cs-sound[aria-pressed="true"]::before{background:radial-gradient(circle at 16px 50%,currentColor 3px,transparent 3.5px)}
.cs-hint::before{content:"";display:inline-block;width:18px;height:2px;margin:0 10px 4px 0;background:currentColor;vertical-align:middle;animation:cs-sweep 2.4s ease-in-out infinite}
@keyframes cs-sweep{50%{transform:translateX(10px);width:28px}}
@media (hover:none){.cs-hint{visibility:hidden}}

/* ---------- statement, filled by scroll ---------- */
.cs-say-band{padding-block:clamp(90px,14vw,200px)}
.cs-say{max-width:24ch;margin:0 auto;text-align:center;text-wrap:balance;font:400 clamp(30px,4.4vw,68px)/1.08 var(--serif);letter-spacing:-.025em;font-variation-settings:"opsz" 144;color:var(--ink)}
.gg-gsap .cs-say .w{color:color-mix(in srgb,var(--ink) 16%,transparent)}

/* ---------- prep: the fuse ---------- */
.cs-prep{padding-block:clamp(70px,9vw,130px);background:var(--sunk)}
.cs-fuse{position:relative;height:56px;margin:clamp(40px,6vw,72px) 0 clamp(28px,4vw,48px);border-bottom:2px dashed var(--line)}
.cs-fuse span{position:absolute;bottom:-28px;left:calc(var(--x)*100%);transform:translateX(-50%);font:500 12px var(--mono);color:var(--ink-3)}
.cs-fuse span::before{content:"";position:absolute;left:50%;bottom:24px;width:2px;height:10px;background:var(--line)}
.cs-fuse-burn{position:absolute;left:0;bottom:-2px;height:2px;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,#3a2a1f,var(--ember-ink) 85%,var(--ember))}
.cs-fuse-tip{position:absolute;bottom:-9px;left:calc(var(--p,0)*100%);width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle,#FFF1C2 0 20%,var(--ember) 45%,transparent 72%);filter:blur(.3px);animation:cs-spark .18s steps(2) infinite}
@keyframes cs-spark{50%{transform:scale(1.35) rotate(40deg)}}
.cs-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px;border-radius:var(--r);overflow:hidden}
.cs-steps li{display:grid;gap:6px;align-content:start;padding:22px 22px 26px;background:var(--surface);min-height:150px}
.cs-dn{font:italic 800 22px/1.1 var(--display);font-stretch:85%}
.cs-dd{font:500 13px var(--mono);color:var(--ink-3)}
.cs-dw{margin-top:6px;color:var(--ink-2)}
.cs-steps li.done .cs-dw{text-decoration:line-through;text-decoration-color:var(--ember);text-decoration-thickness:2px;color:var(--ink-3)}
.cs-steps li.done .cs-dn::after{content:" ✓";color:var(--fresh)}
.cs-steps li.now{background:var(--char);color:var(--on-char)}
.cs-steps li.now .cs-dw,.cs-steps li.now .cs-dd{color:color-mix(in srgb,var(--on-char) 78%,transparent)}
.cs-steps li.now .cs-dn::after{content:" · today";color:var(--ember)}

/* ---------- vote ---------- */
.cs-vote{padding-block:clamp(70px,9vw,130px)}
.cs-dishes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(32px,4vw,52px)}
.cs-dish{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 16px 20px;border:0;border-radius:var(--r);background:transparent;text-align:center;transition:background .2s}
.cs-dish:hover{background:var(--sunk)}
.cs-plate{width:min(100%,190px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cs-plate img,.cs-plate svg{width:100%;height:100%;object-fit:contain}
.cs-dish:hover .cs-plate{transform:rotate(-14deg) scale(1.04)}
.cs-dname{font:italic 800 20px/1.1 var(--display);font-stretch:85%;text-wrap:balance}
.cs-bar{width:100%;height:6px;border-radius:9px;background:var(--line);overflow:hidden;opacity:0}
.cs-bar i{display:block;height:100%;width:0;background:var(--fresh);border-radius:inherit}
.cs-pct{font:600 14px var(--mono);color:var(--ink-3);min-height:1.2em}
.cs-vote.voted .cs-bar{opacity:1}
.cs-dish[aria-pressed="true"]{background:var(--fresh-wash)}
.cs-dish[aria-pressed="true"] .cs-bar i{background:var(--ember)}
.cs-dish[aria-pressed="true"] .cs-pct{color:var(--ember-ink)}

/* ---------- token: the receipt printer ---------- */
.cs-token{padding-block:clamp(80px,10vw,150px);background:var(--char);color:var(--on-char)}
.cs-token .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,96px);align-items:start}
.cs-token .cs-sub{color:color-mix(in srgb,var(--on-char) 78%,transparent)}
.cs-form{display:grid;gap:16px;margin-top:clamp(28px,3vw,40px);max-width:460px}
.cs-form label{display:grid;gap:8px;font-weight:600;font-size:14px}
.cs-form input{font:500 17px var(--body);color:var(--ink);background:var(--ground);border:2px solid transparent;border-radius:var(--r-sm);padding:14px 16px;outline:0}
.cs-form input:focus{border-color:var(--ember)}
.cs-form input[aria-invalid="true"]{border-color:#E5484D}
.cs-form .btn{justify-self:start;margin-top:6px}
.cs-hp{position:absolute;left:-9999px}
.cs-err{min-height:1.4em;color:#FFB3A0;font-weight:600}
.cs-printer{position:relative;justify-self:center;width:min(100%,320px);padding-top:16px}
.cs-slot{height:22px;border-radius:11px;background:#0B0D07;box-shadow:inset 0 3px 6px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.08);position:relative;z-index:2}
.cs-ticket{margin:-11px 14px 0;overflow:hidden;padding-bottom:6px}
.cs-tk{padding:30px 22px 34px;background:#FBFBF6;color:#16190A;font:500 13px/1.45 var(--mono);text-align:center;
  --logo-fresh:#16190A;--logo-leaf:#16190A;--logo-ember:#16190A;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 6px 100%,transparent 5px,#000 5.5px) bottom/12px 8px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 6px 100%,transparent 5px,#000 5.5px) bottom/12px 8px repeat-x}
.cs-tk svg{width:90px;height:auto;color:#16190A}
.cs-tk-h{margin-top:14px;padding-bottom:12px;border-bottom:1.5px dashed #9AA08C;letter-spacing:.08em}
.cs-tk-n{margin-top:14px;font-size:15px}
.cs-tk-n b{display:block;font:italic 850 76px/.95 var(--display);font-stretch:68%;letter-spacing:-.01em}
.cs-tk-name{font-size:16px;font-weight:600;padding-bottom:14px;border-bottom:1.5px dashed #9AA08C;overflow-wrap:anywhere}
.cs-tk dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:14px 0;text-align:left}
.cs-tk dt{color:#747B69}.cs-tk dd{margin:0;text-align:right}
.cs-tk-f{padding-top:12px;border-top:1.5px dashed #9AA08C}
@media (max-width:820px){.cs-token .wrap{grid-template-columns:1fr}.cs-printer{justify-self:start}}

/* ---------- footer ---------- */
.cs-foot{padding-block:clamp(40px,6vw,80px) clamp(28px,4vw,48px);overflow:hidden}
.cs-foot .fmark{font-family:var(--serif);font-style:normal;font-weight:350;color:var(--char)}
:root[data-theme="dark"] .cs-foot .fmark{color:var(--fresh)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cs-foot .fmark{color:var(--fresh)}}
.cs-fine{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-size:14px;color:var(--ink-3)}

/* intro: hidden until GSAP starts it (gg-intro is removed after 3 s at the latest) */
.gg-intro .cs-title,.gg-intro .cs-lede,.gg-intro .cs-row,.gg-intro .cs-gauge{visibility:hidden}

@media (max-width:640px){
  .cs-title{text-wrap:balance;font-size:clamp(46px,15vw,80px)}
  .cs-row{flex-direction:column;align-items:stretch}
  .cs-row .btn{width:100%}
  .cs-where{font-size:13px}
  .cs-hint{display:none}
  .cs-gauge{justify-content:flex-end}
  .cs-fuse span:nth-child(odd):not(:last-child){display:none}
}