/* Noodles Now styles. Colors live in the :root block at the top. */
:root{
  color-scheme: dark;
  --black:#000;
  --panel:#0a0f12;
  --line:#16262a;
  --teal:#3fd6c6;
  --pink:#ff4fa3;
  --ice:#e6fbff;
  --text:#e9f1f2;
  --muted:#9eb0b5;
  --warn:#ffd166; /* form hints */
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --black:#000; --panel:#0a0f12; --text:#e9f1f2; } }
:root[data-theme="dark"]{ --black:#000; --panel:#0a0f12; --text:#e9f1f2; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{
  margin:0;background:var(--black);color:var(--text);
  font:400 1.0625rem/1.6 "Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  background-image:
    radial-gradient(60% 40rem at 50% -8rem, rgba(63,214,198,.16), transparent 70%),
    linear-gradient(rgba(63,214,198,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,214,198,.05) 1px, transparent 1px);
  background-size:100% 100%, 44px 44px, 44px 44px;
  padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;line-height:.95;margin:0}
h2{font-size:clamp(2.4rem,9vw,3.6rem);font-weight:900;color:var(--ice)}
h3{font-size:1.5rem;font-weight:700;color:var(--ice)}
p{margin:.6em 0}
.lede{color:var(--muted);max-width:60ch}
section.wrap{padding:72px 20px 8px}

/* brand device: corner brackets, teal on top, pink on bottom */
.frame{
  position:relative;padding:14px;
  background:
    linear-gradient(var(--teal),var(--teal)) top left/22px 2px no-repeat,
    linear-gradient(var(--teal),var(--teal)) top left/2px 22px no-repeat,
    linear-gradient(var(--teal),var(--teal)) top right/22px 2px no-repeat,
    linear-gradient(var(--teal),var(--teal)) top right/2px 22px no-repeat,
    linear-gradient(var(--pink),var(--pink)) bottom left/22px 2px no-repeat,
    linear-gradient(var(--pink),var(--pink)) bottom left/2px 22px no-repeat,
    linear-gradient(var(--pink),var(--pink)) bottom right/22px 2px no-repeat,
    linear-gradient(var(--pink),var(--pink)) bottom right/2px 22px no-repeat;
}

/* hero */
.hero{padding:28px 0 8px;text-align:center}
.hero .logo{width:min(440px,88%);margin:0 auto}
.chrome span{display:block;background:inherit;-webkit-background-clip:text;background-clip:text}
.chrome{
  font-size:clamp(3.4rem,15vw,6.2rem);font-weight:900;letter-spacing:.01em;text-transform:uppercase;
  margin:18px 0 8px;
  background:linear-gradient(180deg,#f4feff 0%,#9eeaf4 44%,#2b6f86 50%,#ff4fa3 51%,#ffc4e1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.hero .lede{margin:0 auto 22px;font-size:1.12rem}
.next{
  display:flex;gap:16px;align-items:center;text-align:left;
  border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:14px 16px;margin:0 auto 22px;max-width:520px;
}
.next .date{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:2.4rem;line-height:.85;color:var(--teal);text-align:center;min-width:64px}
.next .date small{display:block;font-size:.95rem;color:var(--pink);font-weight:700}
.next strong{color:var(--ice)}
.next p{margin:0;font-size:.98rem}

/* steps */
.steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:4px 14px;padding:16px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);grid-row:span 2;font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:3.2rem;line-height:.9;color:var(--teal)}
.steps li:last-child::before{color:var(--pink)}
.steps p{margin:0;color:var(--muted)}

/* builder: the one signature moment */
.builder{margin-top:22px;border:1px solid #1d3a3e;border-radius:14px;background:linear-gradient(180deg,rgba(63,214,198,.07),rgba(255,79,163,.05));padding:18px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{font:inherit;font-size:.92rem;color:var(--text);background:transparent;border:1px solid #2a3f44;border-radius:999px;padding:7px 14px;cursor:pointer;min-height:40px}
.chip[aria-pressed="true"]{border-color:var(--teal);background:rgba(63,214,198,.14);color:var(--ice)}
.flavors{display:grid;gap:6px;max-height:340px;overflow:auto;padding-right:4px;margin-bottom:16px}
.flavor{font:inherit;text-align:left;color:var(--text);background:rgba(0,0,0,.45);border:1px solid #1b2c30;border-radius:8px;padding:10px 12px;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
.flavor[aria-pressed="true"]{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink) inset}
.flavor .nm{font-weight:700}
.flavor .pr{color:var(--teal);font-weight:700}
.flavor:disabled{opacity:.45;cursor:not-allowed}
.tops{display:flex;flex-wrap:wrap;gap:8px}
.summary{margin-top:18px;border-top:1px dashed #2a3f44;padding-top:16px;display:grid;gap:10px}
.summary .order{font-size:1.15rem;color:var(--ice)}
.count{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:clamp(2.6rem,12vw,3.8rem);line-height:.9;color:var(--teal);text-shadow:0 0 18px rgba(63,214,198,.45)}
.count-label{color:var(--muted);font-size:.95rem;margin-top:-4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;text-decoration:none;border-radius:8px;padding:12px 18px;min-height:46px;cursor:pointer;border:0}
.btn-pink{background:var(--pink);color:#12030b}
.btn-ghost{background:transparent;color:var(--ice);border:1px solid #2f4a50}
.btn:disabled{opacity:.45;cursor:not-allowed}

.how-grid{display:grid;gap:18px}
@media (min-width:680px){ .how-grid{grid-template-columns:1.1fr 1fr;align-items:start} }
.vidfig{margin:0}
.vidfig video{width:100%;display:block;border-radius:10px;border:1px solid var(--line);background:#000}
.vidfig video.tall{max-height:520px;object-fit:cover}
.vidfig figcaption{font-size:.85rem;color:var(--muted);margin-top:6px}
.chili{display:inline-flex;gap:1px;align-items:center;color:var(--teal);font-size:.8rem}
.chili svg{width:9px;height:14px}
.chili span{margin-left:5px;color:var(--muted)}
.num{font-family:"Big Shoulders Display",sans-serif;font-weight:900;color:var(--teal);margin-right:8px}
.board summary{cursor:pointer;color:var(--ice);font-weight:700;padding:10px 0}
.board img{border-radius:8px;margin:8px auto 0;max-width:460px;width:100%}
a.fb{display:inline-block;margin-top:6px;font-size:.9rem}
/* cook block */
.cook{display:grid;gap:14px;margin-top:22px}
@media (min-width:640px){ .cook{grid-template-columns:1fr 1fr} }
.cook figure{margin:0}
.cook figcaption{font-size:.85rem;color:var(--muted);margin-top:6px}

/* menu */
.menu-group{margin-top:28px}
.menu-group h3{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--line);padding-bottom:6px}
.menu-group h3 span{font-family:"Atkinson Hyperlegible",sans-serif;font-size:1rem;color:var(--teal)}
.item{padding:12px 0;border-bottom:1px solid var(--line)}
.item{display:flex;gap:12px;align-items:flex-start}
.item .body{flex:1;min-width:0}
.item .row{display:flex;justify-content:space-between;gap:12px}
.thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;background:#0b1214;flex:none}
.item.out{opacity:.5}
.item .nm{font-weight:700;color:var(--ice)}
.item p{margin:2px 0 4px;color:var(--muted);font-size:.96rem}
.badge{font-size:.72rem;font-weight:700;border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:2px}
.b-pc{background:var(--pink);color:#12030b}
.b-gf{border:1px solid var(--teal);color:var(--teal)}

/* schedule */
.stops{list-style:none;padding:0;margin:18px 0 0}
.stops li{display:grid;grid-template-columns:86px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.stops .d{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:1.45rem;line-height:1;color:var(--teal)}
.stops .t{color:var(--muted);font-size:.95rem}
.stops strong{color:var(--ice)}
details.past{margin-top:22px;border:1px solid var(--line);border-radius:10px;padding:4px 16px}
details.past summary{cursor:pointer;padding:12px 0;font-weight:700;color:var(--ice)}
.past .stops .d{color:var(--muted);font-size:1.2rem}

/* catering */
.terms{border:1px dashed #3b4f55;border-radius:10px;padding:14px 16px;margin:18px 0;background:var(--panel)}
form{display:grid;gap:12px}
.two{display:grid;gap:12px}
@media (min-width:560px){ .two{grid-template-columns:1fr 1fr} }
label{display:grid;gap:5px;font-size:.93rem;color:var(--muted)}
input,textarea{font:inherit;color:var(--text);background:#050a0c;border:1px solid #28393d;border-radius:8px;padding:11px 12px;min-height:46px;width:100%}
textarea{min-height:96px;resize:vertical}
.hint{font-size:.88rem;color:var(--warn);min-height:1.2em}
.sent{border:1px solid var(--teal);border-radius:10px;padding:14px;color:var(--ice);display:none}

/* social */
.follow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

footer{margin-top:56px;padding:32px 0 24px;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem;background:radial-gradient(50% 18rem at 50% 120%,rgba(255,79,163,.16),transparent 70%)}
footer .logo{width:180px;margin-bottom:10px}
footer a{color:var(--ice)}

/* sticky action bar */
.actions{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.88);backdrop-filter:blur(8px);border-top:1px solid #1d3034}
.actions .btn{padding:10px 8px;font-size:.98rem}

/* show-at-window overlay */
.window{position:fixed;inset:0;z-index:40;background:#000;display:none;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px))}
.window.open{display:flex}
.window .big{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:clamp(2.6rem,12vw,4.4rem);line-height:.95;color:var(--ice);margin:10px 0}
.window ul{list-style:none;padding:0;margin:8px 0 26px;font-size:1.3rem;color:var(--teal)}

/* small helpers */
.terms strong{color:var(--ice)}
.fine{font-size:.88rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frame-gap{margin-bottom:22px}
.cook-gap{margin-bottom:18px}
.crew{margin:18px 0 0;max-width:420px}
.crew img{border-radius:10px;border:1px solid var(--line)}
.cal-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.win-title{color:var(--muted);margin:0}
footer strong{color:var(--ice)}