/* Cascadia Web Design. One theme per page, one brand across all of them.
home = the cart at night · prices = the chalkboard menu · work = neon on brick
how-it-works = the kitchen pass · about = postcards · start = the order pad
One deliberate night look. No light theme: the brand is the scene. */
:root{
--night:#110E20; --dusk:#1B1730; --pitch:#0B0916; --slate:#0D0B17;
--red:#E4452E; --butter:#FFD66B; --chalk:#F6F0E4; --mint:#BFE3D0;
--pink:#FF4F8B; --aqua:#3DF5E0; --amber:#FFB23E;
--paper:#FBF4E2; --linen:#F2E4C6; --sky:#3FA7D6; --sun:#F2672E; --fir:#1F5B4A; --postal:#C8352B; --ink:#22303C;
--f-sign:"Bungee","Arial Black",Impact,sans-serif;
--f-script:"Yellowtail","Brush Script MT",cursive;
--f-body:"Karla","Segoe UI",Arial,sans-serif;
--f-mono:"DM Mono",Consolas,"Courier New",monospace;
--f-tube:"Tilt Neon","Trebuchet MS",sans-serif;
--f-neonscript:"Neonderthaw","Brush Script MT",cursive;
--f-card:"Bowlby One","Arial Black",Impact,sans-serif;
--f-hand:"Homemade Apple","Segoe Script",cursive;
--pad-y:clamp(3.5rem,8vw,6.5rem);
--corrugated:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 2px,transparent 2px 28px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--chalk);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
/* film grain over everything, so flat colour reads as a surface and not as a screen */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.055;background:url("data:image/svg+xml;utf8,") 0 0/240px 240px}
img,svg{max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset,blockquote{margin:0}
h1,h2,h3{text-wrap:balance}
a{color:var(--butter)}
:focus-visible{outline:3px solid var(--butter);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
[id]{scroll-margin-top:76px}
.skip{position:absolute;left:-9999px;top:0;background:var(--butter);color:var(--dusk);padding:.6rem 1rem;z-index:100;font-family:var(--f-mono)}
.skip:focus{left:8px;top:8px}
/* ---------- shared lettering and parts ---------- */
.script{font-family:var(--f-script);color:var(--mint);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1;transform:rotate(-4deg);transform-origin:left bottom}
.sec-head h1,.sec-head h2,.board-head h1,.board-head h2,.band-head h2,.hello-bio h2,.how-faq h2,.prep-not h2{font-family:var(--f-sign);font-weight:400;text-transform:uppercase;color:var(--butter);text-shadow:.05em .05em 0 var(--red),.1em .1em 0 rgba(0,0,0,.3);font-size:clamp(2rem,5vw,3.4rem);line-height:1}
.sec-head,.board-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem 1.4rem}
.sec-head{margin-bottom:clamp(2rem,4vw,3rem)}
.fine{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.02em;opacity:.75}
.lede{display:grid;gap:.75rem;font-size:clamp(1.08rem,1.6vw,1.25rem);line-height:1.55;max-width:41em;margin-top:1.2rem;color:rgba(246,240,228,.9)}
.page-head{padding-block:clamp(2.6rem,6vw,4.4rem) clamp(1.4rem,3vw,2.2rem)}
.page-head .sec-head{margin-bottom:0}
.page-head h1{font-size:clamp(2.3rem,6vw,4.4rem)}
.more{display:inline-block;font-family:var(--f-mono);font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--butter);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.15rem}
.more::after{content:" →"}
.more:hover{color:var(--chalk)}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem 1rem}
.page-cta,.chalk-cta{display:grid;justify-items:center;gap:1.3rem;text-align:center}
.page-cta{margin-top:var(--pad-y)}
.page-cta .cta-row,.chalk-cta .cta-row{justify-content:center}
.btn{display:inline-block;font-family:var(--f-sign);font-size:1rem;font-weight:400;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;text-align:center;padding:.9rem 1.4rem .85rem;border-radius:999px;border:0;cursor:pointer;line-height:1;transition:transform .12s,box-shadow .12s,background .12s,color .12s}
.btn-main{background:var(--butter);color:var(--dusk);box-shadow:4px 4px 0 var(--red)}
.btn-main:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--red)}
.btn-main:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--red)}
.btn-main[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:4px 4px 0 var(--red)}
.btn-ghost{color:var(--chalk);box-shadow:inset 0 0 0 2px var(--chalk)}
.btn-ghost:hover{background:var(--chalk);color:var(--dusk)}
.btn-neon{color:#fff;box-shadow:inset 0 0 0 2px #fff,0 0 14px var(--g),inset 0 0 10px var(--g);text-shadow:0 0 8px var(--g)}
.btn-neon:hover{background:#fff;color:var(--pitch);text-shadow:none}
.lights-off .btn-neon{box-shadow:inset 0 0 0 2px #6d657c;color:#9d96ad;text-shadow:none}
/* neon tubes (lights-off on turns every tube to cold glass) */
.tube{color:#FFF6FB;text-shadow:0 0 3px #fff,0 0 9px var(--g),0 0 20px var(--g),0 0 44px var(--g);transition:color .25s,text-shadow .25s}
.lights-off .tube{color:#4B4553;text-shadow:none}
/* paper tickets */
.ticket{--tk:var(--mint);position:relative;display:grid;gap:.12rem;background:var(--tk);color:#1B1730;font-family:var(--f-mono);font-size:.8rem;line-height:1.5;padding:1rem 1rem .9rem;text-decoration:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.42))}
.ticket::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:6px;background:radial-gradient(circle 5px at 6px 0,transparent 96%,var(--tk)) 0 0/12px 6px repeat-x}
.tk-h{display:flex;justify-content:space-between;gap:1rem;font-weight:500;font-size:.95rem;border-bottom:1px dashed currentColor;padding-bottom:.3rem;margin-bottom:.3rem}
.tk-f{border-top:1px dashed currentColor;margin-top:.45rem;padding-top:.35rem;text-align:center;opacity:.75}
/* questions (prices + how it works) */
.faqs{margin-top:1.2rem;border-top:1px dotted rgba(246,240,228,.28)}
.faq{border-bottom:1px dotted rgba(246,240,228,.28)}
.faq summary{position:relative;cursor:pointer;list-style:none;padding:.95rem 2.4rem .95rem 0;font-weight:700;font-size:1.12rem;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:.62rem;font-family:var(--f-sign);font-size:1.35rem;color:var(--butter)}
.faq[open] summary::after{content:"–"}
.faq summary:hover{color:var(--butter)}
.faq p{padding:0 0 1.15rem;max-width:44em;color:rgba(246,240,228,.86)}
/* ---------- header and footer (assets/chrome.js writes them) ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(13,11,26,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.07)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:.4rem 1.2rem;padding-block:.3rem}
.brand{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.brand img{display:block;width:auto;max-width:none}
.brand-top img{height:60px}
.brand-foot img{height:104px}
.brand:hover img{transform:rotate(-1.5deg);transition:transform .15s}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem)}
.nav a{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--chalk);text-decoration:none;padding:.45rem 0;white-space:nowrap}
.nav a:hover{color:var(--butter)}
.nav a[aria-current="page"]:not(.nav-cta){color:var(--butter);box-shadow:0 2px 0 var(--butter)}
.nav .nav-cta{background:var(--butter);color:var(--dusk);padding:.5rem .85rem;border-radius:999px;font-weight:500}
.nav .nav-cta:hover{background:var(--chalk);color:var(--dusk)}
.foot{position:relative;background:var(--pitch);border-top:4px solid var(--butter);padding-block:2.6rem 3.2rem}
.foot-in{display:grid;gap:1rem;justify-items:start}
.foot-line{color:rgba(246,240,228,.8)}
.foot-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.foot-nav a{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--chalk);text-decoration:none}
.foot-nav a[href^="mailto"]{text-transform:none;letter-spacing:.02em;color:var(--butter)}
.foot-nav a:hover{color:var(--butter);text-decoration:underline}
/* =====================================================================
HOME · the cart at night
===================================================================== */
.cart{position:relative;background:linear-gradient(180deg,#0A0816 0,#15112A 150px)}
.lights{display:block;width:100%;height:80px}
.lights circle{filter:drop-shadow(0 0 6px currentColor);fill:currentColor;transition:opacity .3s}
.lights .b1{color:var(--butter)}.lights .b2{color:var(--red)}.lights .b3{color:var(--mint)}
.awning{height:40px;margin-top:-16px;position:relative;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 45%),repeating-linear-gradient(90deg,var(--red) 0 40px,var(--chalk) 40px 80px)}
.awning::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px;background:radial-gradient(circle at 20px 0,var(--red) 19.5px,transparent 20.5px) 0 0/80px 20px repeat-x,radial-gradient(circle at 60px 0,var(--chalk) 19.5px,transparent 20.5px) 0 0/80px 20px repeat-x;filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}
.cart-face{position:relative;overflow:hidden;background:var(--corrugated),linear-gradient(180deg,#261F46 0%,var(--dusk) 55%,#151128 100%)}
.cart-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(3.4rem,7vw,5.2rem) clamp(3rem,6vw,4.4rem)}
.pitch .script{margin:0 0 .15em .15em}
.pitch h1{font-family:var(--f-sign);font-weight:400;font-size:clamp(2.5rem,6.2vw,5rem);line-height:.98;color:var(--butter);text-shadow:.045em .045em 0 var(--red),.09em .09em 0 rgba(0,0,0,.35);text-transform:uppercase;letter-spacing:.005em}
.sub{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;max-width:33em;margin-top:1.4rem}
.pitch .cta-row{margin-top:1.8rem}
.hint{margin-top:1.5rem;font-family:var(--f-mono);font-size:.84rem;line-height:1.9;letter-spacing:.03em;color:var(--mint)}
.hint span{color:var(--red);margin-inline:.35rem}
.hint a{color:var(--butter)}
.counter{position:relative;display:grid;justify-items:center;width:100%;max-width:480px;justify-self:center}
.open-sign{position:relative;margin-bottom:1.5rem;padding:.3em .8em .24em;border:4px solid #DDFFFB;border-radius:18px;box-shadow:0 0 8px var(--aqua),0 0 28px rgba(61,245,224,.55),inset 0 0 10px rgba(61,245,224,.55);font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1;white-space:nowrap;transition:border-color .25s,box-shadow .25s}
.open-word{--g:#FF3B5C;font-family:var(--f-tube);letter-spacing:.12em;padding-left:.12em}
.late-word{--g:var(--amber);font-family:var(--f-tube);letter-spacing:.12em;margin-left:.42em}
.chain{position:absolute;bottom:100%;width:2px;height:280px;background:repeating-linear-gradient(180deg,#8d89a6 0 4px,transparent 4px 7px)}
.chain:nth-child(1){left:16%}.chain:nth-child(2){right:16%}
.open-sign.is-closed .tube{color:#574F66;text-shadow:none}
.open-sign.is-closed,.lights-off .open-sign{border-color:#4B4553;box-shadow:none}
/* the laptop on the counter, showing real sites */
.laptop{position:relative;width:100%;margin:0}
.lid{position:relative;background:#0C0A14;border:2px solid #3B3752;border-bottom:0;border-radius:14px 14px 0 0;padding:14px 12px 12px;box-shadow:0 0 70px rgba(255,178,62,.14)}
.lid::before{content:"";position:absolute;left:50%;top:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#2c2840}
.screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#000;container-type:size}
.screen img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;opacity:0;transition:opacity .9s ease}
.screen img.on{opacity:1}
.screen img.pan{transform:translateY(calc(-100% + 100cqh));transition:opacity .9s ease,transform var(--pan,12s) ease-in-out}
.deck{position:relative;z-index:1;height:11px;margin-inline:-5%;border-radius:1px 1px 10px 10px;background:linear-gradient(180deg,#4A4563 0,#2B2740 30%,#17142A 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 10px rgba(0,0,0,.55)}
.deck::before{content:"";position:absolute;left:50%;top:0;width:14%;height:4px;transform:translateX(-50%);border-radius:0 0 6px 6px;background:#0F0D1C}
.deck::after{content:"";position:absolute;left:3%;right:3%;top:100%;height:22px;background:radial-gradient(50% 100% at 50% 0,rgba(0,0,0,.6),transparent 72%);pointer-events:none}
.laptop figcaption{position:absolute;left:22px;bottom:30px;z-index:2;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;background:rgba(8,6,16,.82);color:#d8cfe8;padding:.3rem .55rem;border-radius:3px}
.laptop figcaption a{color:var(--butter);text-decoration:none;margin-left:.3em}
.laptop figcaption a:hover{text-decoration:underline}
.under-ledge{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;width:100%;margin-top:1.9rem}
.hero-ticket{flex:none;width:min(214px,52%);margin:-62px -14px 0 0;transform:rotate(4deg);transition:transform .15s;z-index:3}
.hero-ticket:hover{transform:rotate(1deg) translateY(-4px)}
.status{flex:1;display:flex;gap:.6rem;align-items:baseline;font-family:var(--f-mono);font-size:.82rem;line-height:1.5;color:var(--chalk)}
.dot{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:#8DFFB9;box-shadow:0 0 10px #8DFFB9;transform:translateY(.05em)}
.status.is-asleep .dot{background:#6b6480;box-shadow:none}
.skirt{display:flex;justify-content:center;flex-wrap:wrap;gap:.2rem 2.6rem;border-top:4px solid var(--butter);background:#0F0C1D;padding:.7rem 1rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,240,228,.55)}
.lights-off .lights circle{opacity:.16;filter:none;animation:none}
/* home bands: a short look at every page. A strand of lights hangs across each seam. */
.strand{position:relative;z-index:3;height:70px;margin-block:-35px;pointer-events:none;transition:opacity .3s;background:url("data:image/svg+xml;utf8,") center top/240px 70px repeat-x}
.strand::before{content:"";position:absolute;left:0;right:0;top:34px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,214,107,.22) 20%,rgba(255,214,107,.22) 80%,transparent)}
.lights-off .strand{opacity:.25}
.band{position:relative;padding-block:var(--pad-y)}
.band-menu{background:radial-gradient(60% 40% at 50% 0%,rgba(255,214,107,.08),transparent 70%),var(--night)}
.band-work,.band-hello{background:var(--corrugated),linear-gradient(180deg,#1E1836,var(--dusk))}
.band-how{background:linear-gradient(180deg,#17131F,var(--night))}
.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem;margin-bottom:clamp(1.8rem,3.6vw,2.8rem)}
.band-head .script{margin-top:.5rem}
.band-sub{display:grid;gap:.7rem;max-width:40em;margin-top:1rem;color:rgba(246,240,228,.86)}
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:3px;background:var(--pitch);outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}
.tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease}
.tile span{position:absolute;left:0;right:0;bottom:0;padding:1.8rem .7rem .55rem;background:linear-gradient(transparent,rgba(8,6,16,.94));font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.tile:hover img,.tile:focus-visible img{transform:scale(1.045)}
.tile:hover span,.tile:focus-visible span{opacity:1;transform:none}
.tile:hover,.tile:focus-visible{outline:2px solid var(--g,var(--butter));outline-offset:-2px}
@media (hover:none){.tile span{opacity:1;transform:none}}
.hello{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:center}
.hello blockquote p{font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.38;font-weight:500}
.hello .sig{display:inline-block;margin-top:.8rem;font-family:var(--f-script);font-size:2.4rem;line-height:1;color:var(--mint);transform:rotate(-4deg)}
.hello-bio{display:grid;gap:1rem;justify-items:start}
.hello-bio h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
/* the ticket rail (home, in brief) */
.rail{position:relative;list-style:none;margin:0;padding:36px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.7rem)}
.rail::before{content:"";position:absolute;left:-10px;right:-10px;top:0;height:14px;border-radius:3px;background:linear-gradient(180deg,#D5D2E0,#8A869E 55%,#55516B);box-shadow:0 6px 12px rgba(0,0,0,.5)}
.step{padding:1.5rem 1.15rem 1.35rem;gap:.35rem;transform:rotate(var(--r,0deg));transform-origin:top center}
.step:nth-child(1){--r:-1.2deg}.step:nth-child(2){--r:.8deg;--tk:var(--paper)}.step:nth-child(3){--r:-.5deg;--tk:#FFE7A3}.step:nth-child(4){--r:1.4deg}
.step::after{content:"";position:absolute;left:50%;top:-34px;width:36px;height:34px;transform:translateX(-50%);border-radius:4px 4px 9px 9px;background:linear-gradient(180deg,#34303f,#0f0d18);box-shadow:0 3px 4px rgba(0,0,0,.45)}
.step h3{font-family:var(--f-body);font-weight:700;font-size:1.22rem;line-height:1.15;margin-top:.2rem}
.step p{font-family:var(--f-body);font-size:.98rem;line-height:1.45}
/* =====================================================================
The chalkboard (home teaser + the whole PRICES page)
===================================================================== */
.board{position:relative;max-width:1000px;margin-inline:auto;padding:clamp(1.3rem,4vw,3.2rem);background:radial-gradient(120% 80% at 18% 8%,rgba(255,255,255,.04),transparent 60%),radial-gradient(90% 70% at 88% 92%,rgba(255,255,255,.03),transparent 60%),var(--slate);border:14px solid #3B2A22;border-image:repeating-linear-gradient(93deg,#4B362A 0 7px,#3B2A22 7px 15px,#453126 15px 24px) 14;box-shadow:inset 0 0 70px rgba(0,0,0,.65),0 30px 60px rgba(0,0,0,.55)}
.board-head h1,.board-head h2,.chalk-h2,.price{filter:url(#rough)}
.board-intro{margin-top:1.1rem;max-width:38em;color:rgba(246,240,228,.82)}
.dishes{list-style:none;padding:0;margin-top:clamp(1.6rem,3.4vw,2.4rem);display:grid;gap:clamp(1.2rem,2.6vw,1.9rem)}
.dish{position:relative}
.dish-line{display:flex;align-items:baseline;gap:.7rem}
.dish h3{font-family:var(--f-body);font-weight:700;font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:1.15}
.dish h4{font-family:var(--f-body);font-weight:700;font-size:1.14rem;line-height:1.2}
.dots{flex:1;min-width:1.2rem;border-bottom:3px dotted rgba(246,240,228,.33);transform:translateY(-.32em)}
.price{font-family:var(--f-sign);font-weight:400;font-size:clamp(1.45rem,2.9vw,2.05rem);line-height:1;color:var(--mint);white-space:nowrap}
.price small{font-family:var(--f-mono);font-size:.46em;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.dish p{margin-top:.35rem;max-width:44em;color:rgba(246,240,228,.8);font-size:1rem;line-height:1.5}
.dish-top{padding:1.05rem 1.2rem 1.15rem;margin-inline:-1.2rem;border:3px solid rgba(255,214,107,.9);border-radius:255px 18px 225px 18px/18px 225px 18px 255px}
.fave{position:absolute;right:1.4rem;top:-.62em;background:var(--slate);padding:0 .55rem;color:var(--butter);font-size:1.55rem;transform:rotate(-3deg);transform-origin:center}
.board-foot{list-style:none;padding:clamp(1.3rem,2.6vw,1.8rem) 0 0;margin:clamp(1.6rem,3.4vw,2.4rem) 0 0;border-top:2px dashed rgba(246,240,228,.2);display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;color:rgba(246,240,228,.85)}
.board-foot b{color:var(--mint);font-weight:700}
.after-board{text-align:center;margin-top:2.6rem}
.chalk-h{font-family:var(--f-sign);font-weight:400;font-size:1.02rem;letter-spacing:.09em;text-transform:uppercase;color:var(--butter);margin-bottom:1rem}
.dishes-sm{margin-top:0;gap:1.2rem}
.dishes-sm .price{font-size:1.3rem}
.dishes-sm .price small{font-size:.56em}
.comes-with{list-style:none;padding:0;display:grid;gap:.6rem}
.comes-with li{position:relative;padding-left:1.7rem;line-height:1.4}
.comes-with li::before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.comes-with.two-up{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.6rem,4vw,3.4rem);margin-top:1.5rem;font-size:1.05rem}
.comes-with.two-up+.chalk-note{margin-top:1.6rem}
.comes-with.plain li::before{content:"◆";font-size:.6em;top:.5em;color:var(--butter)}
.taped{position:relative;display:grid;gap:.3rem;max-width:26rem;margin:clamp(2rem,4vw,2.8rem) 0 0 auto;padding:1.1rem 1.25rem 1.2rem;background:var(--paper);color:var(--ink);line-height:1.45;transform:rotate(1.6deg);box-shadow:0 12px 22px rgba(0,0,0,.5)}
.taped b{font-family:var(--f-sign);font-weight:400;text-transform:uppercase;font-size:1.2rem;color:var(--postal)}
.taped::before,.taped::after{content:"";position:absolute;top:-11px;width:74px;height:22px;background:rgba(255,236,170,.55);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.taped::before{left:-24px;transform:rotate(-32deg)}.taped::after{right:-24px;transform:rotate(28deg)}
.p-prices{background:var(--slate)}
.chalkwall{display:block;background:radial-gradient(70% 500px at 15% 0,rgba(255,255,255,.05),transparent 70%),radial-gradient(60% 600px at 90% 40%,rgba(255,255,255,.035),transparent 70%),radial-gradient(60% 600px at 20% 85%,rgba(255,255,255,.03),transparent 70%),var(--slate)}
.wood{height:16px;background:repeating-linear-gradient(93deg,#4B362A 0 7px,#3B2A22 7px 15px,#453126 15px 24px);box-shadow:0 2px 0 #1d130e,0 10px 20px rgba(0,0,0,.5)}
.wrap-board{max-width:1080px;padding-bottom:var(--pad-y)}
.jump{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-top:1.7rem}
.jump a{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk);text-decoration:none;border:1.5px dashed rgba(246,240,228,.4);border-radius:999px;padding:.38rem .85rem}
.jump a:hover{border-color:var(--butter);color:var(--butter)}
.chalk-sec{padding-block:clamp(2.2rem,4.6vw,3.4rem);border-top:2px dashed rgba(246,240,228,.2)}
.chalk-h2{font-family:var(--f-sign);font-weight:400;text-transform:uppercase;color:var(--butter);text-shadow:.05em .05em 0 var(--red);font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.05}
.chalk-note{margin-top:.7rem;max-width:40em;color:rgba(246,240,228,.8)}
.chalk-big{font-size:clamp(1.1rem,1.9vw,1.3rem);line-height:1.45;color:var(--chalk)}
.dishes-big{gap:clamp(2rem,4vw,3rem)}
.dish-big{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.8rem);align-items:start}
.dish-big.dish-top{padding-block:1.5rem 1.6rem}
.dish .dish-desc{font-size:1.06rem;color:rgba(246,240,228,.88)}
.dish .dish-desc+.dish-desc{margin-top:.6rem}
.dish .good-for,.dish .wild{margin-top:1rem;font-size:.96rem}
.good-for span,.wild>span{display:block;margin-bottom:.25rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.wild{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem}
.wild>span{width:100%;margin-bottom:0}
.wild a{display:inline-flex;align-items:center;gap:.55rem;padding:.25rem .65rem .25rem .25rem;border:1px solid rgba(246,240,228,.25);border-radius:3px;background:rgba(255,255,255,.03);color:var(--chalk);font-size:.85rem;text-decoration:none}
.wild a:hover{border-color:var(--butter);color:var(--butter)}
.wild img{display:block;width:54px;height:36px;object-fit:cover;object-position:top;border-radius:2px}
.in-it{border-left:2px dashed rgba(246,240,228,.2);padding-left:clamp(1rem,2.4vw,2rem)}
.in-it h4{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--butter);margin-bottom:.8rem}
.in-it ul{list-style:none;padding:0;display:grid;gap:.55rem}
.in-it li{position:relative;padding-left:1.6rem;font-size:.98rem;line-height:1.4}
.in-it li::before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.two-col{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.6rem,4vw,3.4rem);margin-top:1.6rem}
.dish-line-h .price{font-size:clamp(1.5rem,3vw,2.1rem)}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,4vw,3.2rem);margin-top:1.6rem}
.fix-intro{display:grid;gap:.6rem}
.fix-label{margin-top:1.6rem;margin-bottom:0}
.fixlist{list-style:none;padding:0;margin-top:.6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.6rem;font-size:1.06rem}
.fixlist li{padding:.7rem 0;border-bottom:1px dotted rgba(246,240,228,.26)}
.fixlist small{margin-left:.4rem;font-family:var(--f-mono);font-size:.78rem;color:var(--mint)}
.paysteps{list-style:none;counter-reset:pay;padding:0;margin-top:1.6rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.paysteps li{counter-increment:pay;position:relative;padding-top:3.3rem;font-size:.98rem;line-height:1.45;color:rgba(246,240,228,.85)}
.paysteps li::before{content:counter(pay);position:absolute;left:0;top:0;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:2.5px solid var(--butter);border-radius:50% 46% 52% 48%;font-family:var(--f-sign);font-size:1.1rem;color:var(--butter);filter:url(#rough)}
.paysteps b{display:block;margin-bottom:.2rem;color:var(--chalk)}
.chalk-cta .script{transform-origin:center}
/* =====================================================================
WORK · neon on brick
===================================================================== */
.p-work{background:#130E16}
.street{position:relative;display:block;padding-top:clamp(2.6rem,6vw,4.6rem);background:#130E16 url("data:image/svg+xml;utf8,")}
.street::before{content:"";position:absolute;inset:0;background:radial-gradient(46% 420px at 20% 170px,rgba(255,79,139,.2),transparent 70%),radial-gradient(40% 380px at 82% 420px,rgba(61,245,224,.09),transparent 70%);pointer-events:none;transition:opacity .3s}
.lights-off .street::before{opacity:0}
.street>*{position:relative}
.street-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.4rem 2rem}
.neon-script{--g:var(--pink);display:inline-block;font-family:var(--f-neonscript);font-weight:400;font-size:clamp(3.7rem,10.5vw,7.6rem);line-height:.85;padding:.12em .12em 0 .05em;transform:rotate(-4deg);transform-origin:left bottom}
.neon-block{--g:var(--aqua);font-family:var(--f-tube);font-size:clamp(.98rem,2.3vw,1.55rem);letter-spacing:.3em;text-transform:uppercase;margin:1rem 0 0 .5rem}
.street-intro{display:grid;gap:.8rem;max-width:44em;margin-top:clamp(1.8rem,3.4vw,2.6rem);font-size:1.12rem;color:#F5ECF1}
.switch{display:flex;align-items:center;gap:.6rem;background:#EDE3CF;color:#2A2630;border:0;border-radius:6px;padding:.5rem .75rem;font-family:var(--f-mono);font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 2px 0 #b9ae98,0 8px 18px rgba(0,0,0,.45)}
.switch i{position:relative;display:block;width:16px;height:28px;border-radius:3px;background:#2A2630}
.switch i::after{content:"";position:absolute;left:3px;right:3px;top:3px;height:11px;background:#EDE3CF;border-radius:2px;transition:transform .15s}
.switch[aria-pressed="false"] i::after{transform:translateY(11px)}
.signs{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.5rem;margin-top:clamp(1.8rem,3.4vw,2.4rem);padding-block:1.15rem;border-block:1px solid rgba(255,255,255,.09)}
.sign{background:none;border:0;padding:.2rem .1rem;cursor:pointer;font-family:var(--f-tube);font-size:clamp(.92rem,1.6vw,1.15rem);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.sign-box{border:2px solid #FFF6FB;border-radius:9px;padding:.18rem .6rem;box-shadow:0 0 8px var(--g),inset 0 0 7px var(--g);transition:border-color .25s,box-shadow .25s}
.lights-off .sign-box{border-color:#4B4553;box-shadow:none}
.sign-unlit{font-family:var(--f-tube);font-size:clamp(.92rem,1.6vw,1.15rem);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:#6d657c;border:2px dashed #4a4456;border-radius:9px;padding:.18rem .6rem}
.sign-unlit:hover{color:var(--butter);border-color:var(--butter)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr));gap:clamp(1.1rem,2.2vw,1.7rem);margin-top:clamp(2rem,4vw,3rem)}
.card{position:relative;display:block;width:100%;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--pitch);color:var(--chalk);font:inherit;text-align:left;cursor:pointer;outline:1px solid rgba(255,255,255,.12);outline-offset:-1px;box-shadow:0 14px 28px rgba(0,0,0,.5);transition:transform .18s ease,box-shadow .18s ease}
.card:hover,.card:focus-visible{transform:translateY(-6px);outline:2px solid var(--g);outline-offset:-2px;box-shadow:0 0 28px -6px var(--g),0 24px 40px rgba(0,0,0,.6)}
.lights-off .card:hover,.lights-off .card:focus-visible{outline-color:#6d657c;box-shadow:0 24px 40px rgba(0,0,0,.6)}
.card-img{display:block;aspect-ratio:3/2;overflow:hidden}
.card-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.card-cap{display:grid;gap:.2rem;padding:.75rem .85rem .9rem;border-top:2px solid var(--g)}
.card-cap b{font-family:var(--f-tube);font-weight:400;font-size:1.02rem;line-height:1.2;letter-spacing:.07em;text-transform:uppercase}
.card-cap i{font-family:var(--f-mono);font-style:normal;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:#a9a1b8}
.plain-work{columns:2;margin-top:2rem}
/* every site gets its own stretch of wall */
.sites{margin-top:clamp(3rem,7vw,5.5rem)}
.site{position:relative;padding-block:0 clamp(3.4rem,7vw,5.8rem)}
.site-rule{position:relative;display:flex;align-items:center;gap:1.1rem;padding-bottom:clamp(3rem,6.5vw,5.2rem)}
.site-rule span{flex:none;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:#c9c1d8}
.site-rule i{flex:1;height:3px;border-radius:3px;background:#FFF6FB;box-shadow:0 0 5px var(--g),0 0 16px var(--g),0 0 38px var(--g);transition:background .25s,box-shadow .25s}
.site-rule i::before,.site-rule i::after{content:"";position:absolute;top:-4px;width:7px;height:11px;border-radius:2px;background:#3A3448}
.site-rule i{position:relative}
.site-rule i::before{left:-2px}.site-rule i::after{right:-2px}
.lights-off .site-rule i{background:#4B4553;box-shadow:none}
.rule-unlit i{background:none;box-shadow:none;height:0;border-top:3px dashed #4A4456;border-radius:0}
.rule-unlit i::before,.rule-unlit i::after{display:none}
.site::before{content:"";position:absolute;inset:0;background:radial-gradient(52% 70% at var(--gx,16%) 34%,var(--g),transparent 72%);opacity:.13;pointer-events:none;transition:opacity .3s}
.lights-off .site::before{opacity:0}
.site:nth-child(even){--gx:84%}
.site-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.6rem);align-items:start}
.site-side{position:sticky;top:92px;align-self:start;display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
.site:nth-child(even) .site-side{order:2}
.site-media{position:relative;padding-bottom:10%;cursor:pointer}
.site-quote{margin:0;padding:.3rem 0 .3rem 1.3rem;border-left:3px solid #FFF6FB;box-shadow:-7px 0 16px -7px var(--g);transition:border-color .25s,box-shadow .25s}
.site-quote p{font-size:clamp(1.25rem,2.1vw,1.65rem);line-height:1.3;font-weight:500;color:#fff;text-wrap:balance}
.lights-off .site-quote{border-left-color:#4B4553;box-shadow:none}
.browser{border-radius:8px;overflow:hidden;background:var(--pitch);outline:1px solid rgba(255,255,255,.16);box-shadow:0 0 46px -14px var(--g),0 26px 50px rgba(0,0,0,.6);transition:box-shadow .3s}
.lights-off .browser{box-shadow:0 26px 50px rgba(0,0,0,.6)}
.bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#1C1826;font-family:var(--f-mono);font-size:.68rem;color:#9D96AD}
.bar i{width:9px;height:9px;border-radius:50%;background:#3A3448}
.bar span{margin-left:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewport{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000;container-type:size}
.viewport img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;display:block;transition:transform 1.4s ease}
.site-media:hover .viewport img,.site-media.is-panning .viewport img{transform:translateY(calc(-100% + 100cqh));transition:transform 11s ease-in-out}
.phone{position:absolute;right:-1.5%;bottom:0;width:23%;min-width:112px;padding:6px;border-radius:18px;background:var(--pitch);outline:1.5px solid rgba(255,255,255,.24);box-shadow:0 18px 36px rgba(0,0,0,.7)}
.phone .viewport{aspect-ratio:9/18.5;border-radius:12px}
.pan-hint{position:absolute;left:0;bottom:calc(10% - 1.9rem);font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#8d86a0}
.site-label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#c9c1d8}
.site-label b{font-weight:500;color:var(--g)}
.site-name{font-family:var(--f-tube);font-weight:400;font-size:clamp(1.9rem,4.1vw,3.05rem);line-height:1.08;letter-spacing:.06em;text-transform:uppercase;margin:.55rem 0 .35rem}
.site-kind{font-size:1.1rem;color:rgba(246,240,228,.72)}
.site-job{display:grid;gap:.9rem;margin-top:1.3rem;font-size:1.08rem;line-height:1.6}
.site-job b{color:#fff}
.site-behind{display:grid;gap:.9rem;line-height:1.6;color:rgba(246,240,228,.9)}
.site-text h3,.peek-text h3{font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g);margin:1.9rem 0 .9rem}
.lights-off .site-text h3,.lights-off .site-label b{color:#9d96ad}
.site-works,.peek-text ul{list-style:none;padding:0;display:grid;gap:1rem}
.site-works li,.peek-text li{position:relative;padding-left:1.5rem;line-height:1.5}
.site-works li::before,.peek-text li::before{content:"";position:absolute;left:.1rem;top:.55em;width:.5rem;height:.5rem;background:var(--g);transform:rotate(45deg);box-shadow:0 0 8px var(--g)}
.lights-off .site-works li::before{background:#6d657c;box-shadow:none}
.site-works b{display:block;color:#fff;font-size:1.05rem}
.site-more{margin-top:1.4rem;display:grid;gap:.9rem}
.site-built{margin-top:1.7rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);font-size:.94rem;color:rgba(246,240,228,.75)}
.site-built span{display:block;margin-bottom:.15rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#a9a1b8}
.site-text .cta-row{margin-top:1.6rem}
.next-sign{display:block;text-align:center;padding-bottom:var(--pad-y)}
.next-sign .next-in{display:grid;justify-items:center;gap:1.4rem}
.unlit-big{font-family:var(--f-tube);font-size:clamp(1.9rem,7vw,4.6rem);line-height:1.1;letter-spacing:.12em;text-transform:uppercase;color:#4D4659;border:3px dashed #4A4456;border-radius:18px;padding:.3em .7em}
.next-line{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:500;color:#F5ECF1;text-wrap:balance}
.next-note{max-width:36em;color:rgba(246,240,228,.82)}
/* the quick look */
.peek{--g:var(--pink);border:0;padding:0;background:transparent;color:var(--chalk);width:min(1020px,94vw);max-width:none;max-height:92vh;max-height:92dvh;overflow:auto}
.peek::backdrop{background:rgba(8,6,16,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.peek-in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:#16111B;border-radius:8px;overflow:hidden;outline:1px solid rgba(255,255,255,.16);outline-offset:-1px;box-shadow:0 0 70px -14px var(--g)}
.peek-shot{background:#000}
.peek-shot img{display:block;width:100%;height:100%;min-height:260px;object-fit:cover;object-position:top}
.peek-text{display:grid;align-content:start;padding:clamp(1.3rem,3vw,2.3rem);padding-top:clamp(2.6rem,4vw,3rem)}
.peek-text .site-name{font-size:clamp(1.5rem,3vw,2.2rem)}
.peek-note{margin-top:.6rem;font-size:1.12rem;line-height:1.45;font-style:italic;color:rgba(246,240,228,.9)}
.peek-text h3{margin-top:1.4rem}
.peek-text ul{gap:.55rem;font-size:.98rem}
.peek-text .cta-row{margin-top:1.6rem}
.peek-text .btn{font-size:.85rem;padding:.75rem 1.1rem .7rem}
.peek-close{position:absolute;right:.7rem;top:.7rem}
.peek-close button{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(8,6,16,.7);border:1.5px solid rgba(255,255,255,.5);color:var(--chalk);border-radius:999px;padding:.4rem .8rem;cursor:pointer}
.peek-close button:hover{background:var(--chalk);color:var(--dusk)}
/* =====================================================================
HOW IT WORKS · tickets on the pass
===================================================================== */
.p-how{background:#15121F}
.pass{display:block;padding-bottom:var(--pad-y);background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),radial-gradient(70% 480px at 50% 0,rgba(255,178,62,.1),transparent 70%),linear-gradient(180deg,#1A1626,var(--night))}
.passline{position:relative;list-style:none;padding:0;margin:clamp(1.6rem,4vw,2.6rem) 0 0;display:grid;gap:clamp(2.2rem,4.4vw,3.2rem)}
.passline::before{content:"";position:absolute;left:14px;top:-14px;bottom:-14px;width:13px;border-radius:3px;background:linear-gradient(90deg,#D5D2E0,#8A869E 55%,#55516B);box-shadow:6px 0 12px rgba(0,0,0,.45)}
.bigstep{margin-left:64px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(1.1rem,3vw,2.6rem);padding:1.6rem clamp(1.1rem,3vw,2.1rem) 1.6rem;font-family:var(--f-body);font-size:1rem;transform:rotate(var(--r,0deg));transform-origin:left center}
.bigstep:nth-child(1){--r:-.5deg}.bigstep:nth-child(2){--r:.4deg;--tk:var(--paper)}.bigstep:nth-child(3){--r:-.3deg;--tk:#FFE7A3}.bigstep:nth-child(4){--r:.5deg}
.bigstep::after{content:"";position:absolute;left:-56px;top:24px;width:64px;height:32px;border-radius:4px 10px 10px 4px;background:linear-gradient(180deg,#34303f,#0f0d18);box-shadow:0 3px 5px rgba(0,0,0,.45)}
.bigstep .tk-h{font-family:var(--f-mono);font-size:.82rem}
.bigstep h2{font-family:var(--f-body);font-weight:700;font-size:clamp(1.45rem,2.9vw,2rem);line-height:1.1;margin:.3rem 0 .6rem}
.bigstep p{font-size:1.04rem;line-height:1.55}
.bs-main p+p,.bs-main p+ul,.bs-main ul+p{margin-top:.7rem}
.said{list-style:none;padding:0 0 0 .9rem;display:grid;gap:.15rem;border-left:2px solid rgba(27,23,48,.35);font-style:italic;font-size:1.02rem}
.bs-meta{display:grid;align-content:start;gap:.8rem;margin:0;padding-left:clamp(1rem,2.4vw,1.9rem);border-left:1px dashed #1B1730}
.bs-meta dt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.bs-meta dd{font-size:.97rem;line-height:1.4}
.prep{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:var(--pad-y)}
.prepsheet{position:relative;padding:clamp(2rem,3.6vw,2.7rem) clamp(1.2rem,3vw,2.3rem) clamp(1.4rem,3vw,2.2rem);background:var(--paper);color:var(--ink);border-radius:4px;transform:rotate(-1deg);box-shadow:0 24px 50px rgba(0,0,0,.5)}
.prepsheet::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-radius:4px 4px 0 0;background:repeating-linear-gradient(90deg,var(--postal) 0 22px,#a82a22 22px 24px)}
.prepsheet h2{font-family:var(--f-sign);font-weight:400;text-transform:uppercase;font-size:1.7rem;line-height:1}
.prep-sub{margin-top:.4rem;font-family:var(--f-mono);font-size:.78rem;color:#4c5a66}
.checks{list-style:none;padding:0;margin-top:1.3rem;display:grid;gap:.75rem}
.checks li{position:relative;padding:0 0 .7rem 2.1rem;line-height:1.35;border-bottom:1px solid rgba(34,48,60,.18)}
.checks li::before{content:"";position:absolute;left:0;top:.1rem;width:1.15rem;height:1.15rem;border:2px solid var(--ink);border-radius:2px}
.prep-not{display:grid;gap:1.1rem}
.prep-not h2,.how-faq h2{font-size:clamp(1.5rem,3.2vw,2.2rem)}
.nots{list-style:none;padding:0;display:grid;gap:.5rem;font-size:1.18rem;font-weight:500}
.nots li{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px;color:rgba(246,240,228,.8)}
.how-faq{margin-top:var(--pad-y);max-width:880px}
/* =====================================================================
ABOUT · postcards
===================================================================== */
.p-about{background:var(--dusk)}
.mailroom{display:block;padding-block:clamp(2.8rem,6vw,4.8rem) var(--pad-y);background:var(--corrugated),linear-gradient(180deg,var(--night),#221C3D)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2.2rem,5vw,4.8rem);align-items:center}
.pcard{position:relative;overflow:hidden;aspect-ratio:3/2;border-radius:4px;box-shadow:0 18px 34px rgba(0,0,0,.5)}
.pcard-front{width:86%;border:10px solid var(--paper);transform:rotate(-2.5deg);display:grid;place-items:center;z-index:1;container-type:inline-size}
.pcard-front svg{position:absolute;inset:0;width:100%;height:100%}
.greet{position:absolute;left:6%;top:6%;font-family:var(--f-script);font-size:clamp(1.4rem,3vw,2.3rem);font-size:8cqw;line-height:1;color:var(--postal);transform:rotate(-7deg);text-shadow:2px 2px 0 var(--paper),-1px -1px 0 var(--paper),2px -1px 0 var(--paper),-1px 2px 0 var(--paper)}
.bigl{position:relative;margin-top:.35em;font-family:var(--f-card);font-weight:400;font-size:clamp(1.9rem,4.6vw,3.9rem);font-size:15cqw;line-height:1;letter-spacing:.01em;background:linear-gradient(180deg,#FFE08A 0%,#F2672E 58%,#C8352B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px var(--ink);filter:drop-shadow(4px 4px 0 var(--ink))}
.ribbon{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);white-space:nowrap;background:var(--postal);color:var(--paper);font-family:var(--f-body);font-weight:700;font-size:clamp(.58rem,1.2vw,.84rem);font-size:max(.56rem,2.7cqw);letter-spacing:.18em;text-transform:uppercase;padding:.32rem .9rem;box-shadow:0 2px 0 var(--ink)}
.pcard-back{width:86%;aspect-ratio:auto;overflow:visible;margin:-9% 0 0 14%;display:grid;grid-template-columns:1.35fr 1fr;padding:calc(9% + 1.5rem) 5% 5%;color:var(--ink);background:var(--paper) repeating-linear-gradient(0deg,rgba(34,48,60,.03) 0 1px,transparent 1px 4px);transform:rotate(2deg)}
.msg{padding-right:7%;border-right:1px solid #B9A97F;font-family:var(--f-hand);font-size:clamp(.74rem,1.22vw,.95rem);line-height:1.95;color:#1D3A6E}
.msg .sig{margin-top:.3em;text-align:right;font-size:1.25em}
.addr{position:relative;display:grid;align-content:end;gap:.25rem;padding-left:10%;min-height:11rem;font-family:var(--f-mono);font-size:clamp(.6rem,1.05vw,.78rem)}
.addr p{border-bottom:1px solid #B9A97F;padding-bottom:.15rem}
.stamp{position:absolute;right:0;top:0;width:32%;max-width:74px;aspect-ratio:4/5;border:4px dotted var(--paper);box-shadow:0 0 0 1px #D8C9A4;overflow:hidden;background:var(--sky)}
.stamp svg{display:block;width:100%;height:100%}
.postmark{position:absolute;right:22%;top:.4rem;width:56%;max-width:130px;opacity:.7;transform:rotate(-12deg)}
.bio{display:grid;gap:1rem}
.bio h1,.beliefs h2,.postmarks h2{font-family:var(--f-card);font-weight:400;line-height:1.04;color:var(--paper);text-shadow:3px 3px 0 var(--postal)}
.bio h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:.4rem}
.bio p{max-width:36em}
.bio-more{display:grid;gap:1rem;max-width:44em;margin:clamp(2.6rem,5.5vw,4rem) auto 0;font-size:1.12rem;line-height:1.6}
.bio-big{margin-block:.5rem .2rem;font-family:var(--f-card);font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.1;color:var(--paper);text-shadow:3px 3px 0 var(--postal)}
.beliefs,.postmarks{margin-top:var(--pad-y)}
.beliefs h2,.postmarks h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.belief-list{list-style:none;padding:0;margin-top:1.9rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3rem}
.belief-list li{display:grid;align-content:start;gap:.5rem;padding:1.3rem 1.15rem 1.4rem;color:var(--ink);background:var(--paper) repeating-linear-gradient(0deg,rgba(34,48,60,.03) 0 1px,transparent 1px 4px);box-shadow:0 14px 26px rgba(0,0,0,.45);transform:rotate(var(--r,-1deg));line-height:1.45}
.belief-list li:nth-child(2){--r:.8deg}.belief-list li:nth-child(3){--r:-.4deg}.belief-list li:nth-child(4){--r:1.2deg}
.belief-list h3{font-family:var(--f-card);font-weight:400;font-size:1.3rem;line-height:1.1;color:var(--postal)}
.belief-list a{color:var(--postal)}
.marks{list-style:none;padding:0;margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:1.1rem 1.3rem}
.marks li{display:grid;place-content:center;gap:.15rem;width:116px;height:116px;padding:14px;border-radius:50%;border:2px solid rgba(251,244,226,.78);outline:2px solid rgba(251,244,226,.78);outline-offset:-10px;text-align:center;color:var(--paper);transform:rotate(var(--r,-8deg))}
.marks li:nth-child(even){--r:7deg}
.marks span{font-family:var(--f-mono);font-weight:500;font-size:.72rem;line-height:1.15;letter-spacing:.07em;text-transform:uppercase}
.marks small{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.facts{display:grid;margin-top:2.4rem;max-width:42rem;border-top:1px solid rgba(246,240,228,.2)}
.facts div{display:grid;grid-template-columns:7.2rem 1fr;gap:.8rem;padding:.6rem 0;border-bottom:1px solid rgba(246,240,228,.2)}
.facts dt{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);padding-top:.25rem}
/* =====================================================================
The window: the short form (home) and the full order pad (START)
===================================================================== */
.window{background:radial-gradient(70% 520px at 50% 0,rgba(255,178,62,.24),transparent 70%),linear-gradient(180deg,#211A33,#130F21)}
.p-start{background:#130F21}
.window-page{display:block;padding-bottom:var(--pad-y)}
.window-page .lede a{color:var(--butter)}
.order-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
.pad{position:relative;background:var(--paper);color:var(--ink);padding:clamp(2rem,3.4vw,2.6rem) clamp(1.1rem,3vw,2.3rem) clamp(1.3rem,3vw,2.2rem);border-radius:4px;box-shadow:0 24px 50px rgba(0,0,0,.5)}
.pad::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-radius:4px 4px 0 0;background:repeating-linear-gradient(90deg,var(--postal) 0 22px,#a82a22 22px 24px)}
.hp{position:absolute;left:-9999px}
.chips{border:0;padding:0;margin:0 0 1.6rem;display:flex;flex-wrap:wrap;gap:.55rem;min-width:0}
.chips legend{float:left;width:100%;padding:0;margin-bottom:.85rem;font-family:var(--f-sign);font-size:1.2rem;text-transform:uppercase;color:var(--ink)}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:.5rem .9rem;border:2px solid var(--ink);border-radius:999px;font-weight:500;font-size:.98rem;line-height:1.2;transition:background .12s,color .12s}
.chips label:hover span{background:rgba(34,48,60,.08)}
.chips input:checked+span{background:var(--ink);color:var(--butter)}
.chips input:focus-visible+span,.main-opt input:focus-visible+span{outline:3px solid var(--postal);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.3rem}
.f{display:grid;gap:.3rem;align-content:start}
.f span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#4c5a66}
.f input,.f textarea,.f select{width:100%;font:inherit;font-size:1.05rem;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:.45rem .1rem}
.f select{-webkit-appearance:none;appearance:none;padding-right:1.6rem;background:url("data:image/svg+xml;utf8,") right .3rem center/12px 8px no-repeat}
.f textarea{border:2px solid var(--ink);padding:.6rem .7rem;min-height:5rem;resize:vertical;background:rgba(255,255,255,.55)}
.f input::placeholder{color:#8a949c}
.f input:focus-visible,.f textarea:focus-visible,.f select:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.f-wide{grid-column:1/-1}
.f small{font-size:.86rem;line-height:1.35;color:#4c5a66}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.3rem;margin-top:1.6rem}
.send-row .fine{flex:1;min-width:14rem;color:#4c5a66;opacity:1}
.form-msg{margin-top:1.2rem;padding:.9rem 1rem;border:2px solid var(--ink);background:#fff;font-weight:500;line-height:1.45}
.form-msg a{color:var(--postal)}
.ticket-col{position:sticky;top:96px;display:grid;gap:1.1rem;padding-top:.6rem}
.live-ticket{font-size:.9rem;padding:1.3rem 1.2rem 1.1rem;margin-bottom:.5rem;transform:rotate(2deg)}
.live-ticket.printing{animation:print .35s steps(5)}
.tk-brand{text-align:center;letter-spacing:.14em;font-weight:500;margin-bottom:.4rem}
.tk-lines{display:grid;gap:.12rem}
.tk-items>span{display:flex;justify-content:space-between;gap:1rem}
.tk-items>span>span:last-child{white-space:nowrap}
.tk-total{display:flex;justify-content:space-between;gap:1rem;border-top:1px dashed currentColor;margin-top:.5rem;padding-top:.45rem;font-size:1rem}
.tk-total b{font-weight:500}
.tk-small{font-size:.74rem;opacity:.75}
.tk-small:empty{display:none}
.stamped{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-14deg);font-family:var(--f-sign);font-size:1.9rem;line-height:1;white-space:nowrap;color:var(--postal);border:4px solid var(--postal);border-radius:8px;padding:.35rem .7rem .3rem;opacity:.88;mix-blend-mode:multiply}
.or-write{font-family:var(--f-mono);font-size:.84rem;text-align:center}
.pad-long{display:grid;gap:2rem}
.pad-long .send-row{margin-top:0}
.pad-long .send-row .fine{display:grid;gap:.3rem}
.step-box{border:0;padding:0;margin:0;min-width:0}
.step-box legend{float:left;display:flex;align-items:center;gap:.65rem;width:100%;padding:0 0 .45rem;margin-bottom:1.1rem;border-bottom:2px solid var(--ink);font-family:var(--f-sign);font-size:1.15rem;line-height:1.1;text-transform:uppercase;color:var(--ink)}
.step-box legend b{display:inline-grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--ink);color:var(--butter);font-size:.85rem;font-weight:400}
.step-box legend+*{clear:both}
.step-box .chips{margin-bottom:0}
.mains{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.7rem}
.main-opt{display:block;cursor:pointer}
.main-opt input{position:absolute;opacity:0;width:1px;height:1px}
.main-opt>span{display:grid;align-content:start;gap:.15rem;height:100%;padding:.85rem .95rem;border:2px solid var(--ink);border-radius:6px;transition:background .12s,color .12s}
.main-opt b{font-size:1.06rem;line-height:1.2}
.main-opt i{font-family:var(--f-sign);font-style:normal;font-size:1.02rem;color:var(--postal)}
.main-opt small{font-size:.86rem;line-height:1.3;color:#4c5a66}
.main-opt:hover>span{background:rgba(34,48,60,.07)}
.main-opt input:checked+span{background:var(--ink);color:var(--paper)}
.main-opt input:checked+span i{color:var(--butter)}
.main-opt input:checked+span small{color:#c9d2d8}
.box-note{margin-top:.9rem;font-size:.93rem}
.box-note a{color:var(--postal)}
.sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.6rem}
.sides label{display:flex;align-items:flex-start;gap:.65rem;padding:.55rem 0;border-bottom:1px dotted rgba(34,48,60,.4);cursor:pointer;line-height:1.3}
.sides input{flex:none;width:1.1rem;height:1.1rem;margin:.12rem 0 0;accent-color:var(--ink)}
.sides span{flex:1;display:flex;justify-content:space-between;gap:.8rem}
.sides i{font-family:var(--f-mono);font-style:normal;font-size:.84rem;text-align:right;color:var(--postal)}
.when-date{margin-top:1.1rem}
.chips-radio{margin-bottom:0}
/* ---------- smaller screens ---------- */
@media (max-width:960px){
.cart-grid,.about-grid,.order-grid,.hello,.site-in,.prep,.dish-big{grid-template-columns:1fr}
.counter{justify-self:start}
.chain{display:none}
.open-sign{margin-top:.4rem}
.ticket-col{position:static}
.site-side{position:static}
.site:nth-child(even) .site-side{order:0}
.site-media{max-width:640px}
.in-it{border-left:0;padding-left:0;border-top:2px dashed rgba(246,240,228,.2);padding-top:1.1rem}
.mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
.rail{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.6rem;padding-top:12px}
.rail::before{display:none}
.step::after{top:-9px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff9a8a,var(--red) 58%,#8f2418);box-shadow:0 3px 4px rgba(0,0,0,.45)}
.belief-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.paysteps{grid-template-columns:repeat(2,minmax(0,1fr))}
.peek-in{grid-template-columns:1fr}
.peek-shot img{height:auto;min-height:0;aspect-ratio:3/2}
.peek-text{padding-top:1.4rem}
}
@media (max-width:760px){
.top{position:static}
.top-in{flex-wrap:wrap;padding-bottom:0}
.brand-top img{height:50px}
.nav{width:100%;overflow-x:auto;gap:1.2rem;padding-bottom:.55rem;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
[id]{scroll-margin-top:12px}
.board{border-width:10px}
.dish-top{margin-inline:-.7rem;padding-inline:.7rem}
.fave{right:.8rem}
.taped{margin-inline:auto}
.two-col,.cols-2,.fixlist,.sides,.comes-with.two-up{grid-template-columns:1fr}
.signs{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*clamp(16px,4vw,40px));padding-inline:clamp(16px,4vw,40px);scrollbar-width:none}
.signs::-webkit-scrollbar{display:none}
.fields{grid-template-columns:1fr}
.bigstep{grid-template-columns:1fr;margin-left:44px}
.bigstep::after{left:-40px;width:48px}
.passline::before{left:6px}
.bs-meta{border-left:0;padding-left:0;border-top:1px dashed #1B1730;padding-top:1rem}
.pcard-front,.pcard-back{width:94%}
.pcard-back{grid-template-columns:1fr;margin:-7% 0 0 6%;padding:calc(7% + 1.4rem) 6% 6%;gap:1.2rem}
.msg{border-right:0;padding-right:0;padding-top:5.6rem;font-size:.92rem}
.pcard-back::before{content:"POST CARD";position:absolute;left:6%;top:4.1rem;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.32em;color:var(--ink);opacity:.65}
.addr{padding-left:0;font-size:.78rem;position:static;min-height:0}
.stamp{right:6%;top:2.9rem;width:17%}
.postmark{right:22%;top:2.7rem;width:30%}
}
@media (max-width:560px){
.rail,.belief-list,.paysteps{grid-template-columns:1fr}
.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.facts div{grid-template-columns:1fr;gap:.1rem}
.skirt span:nth-child(n+2){display:none}
.under-ledge{gap:.6rem}
.status{font-size:.76rem}
.marks li{width:100px;height:100px}
}
/* ---------- motion ---------- */
@keyframes tw{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes flick{0%,4%,6%,9%,52%,54%,100%{opacity:1}5%,8%,53%{opacity:.35}}
@keyframes buzz{0%{opacity:1}50%{opacity:.55}100%{opacity:1}}
@keyframes print{from{clip-path:inset(0 0 40% 0);transform:rotate(2deg) translateY(-10px)}to{clip-path:inset(0 0 0 0);transform:rotate(2deg) translateY(0)}}
@media (prefers-reduced-motion:no-preference){
.lights circle{animation:tw 3.4s ease-in-out infinite}
.lights .b2{animation-delay:-1.1s}.lights .b3{animation-delay:-2.3s}
.open-sign:not(.is-closed) .open-word{animation:flick 9s linear infinite}
.sign:hover,.sign:focus-visible{animation:buzz .16s linear 3}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}