@font-face{font-family:"Yellowtail";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/yellowtail-wordmark.woff2) format("woff2")} /* SIL OFL, subset to the wordmark */
/* Lukas Dean's: after-hours corner booth. One token set; contrast checked against --ink on --bg. */
:root{
  --bg:#0b1117; --bg2:#121b25; --panel:#16212d; --line:#2a3a4b;
  --ink:#f4ead5; --dim:#b9b3a3; --cream:#f4ead5; --paper:#fbf4e4; --paper-ink:#2a2118;
  --cherry:#c9362c; --cherry-d:#a82a21; --neon:#6ff0d2; --neon-d:#2fb59a; --gold:#ffc65c;
  --radius:16px; --shadow:0 18px 40px rgba(0,0,0,.45);
  --serif:Georgia,"Times New Roman",serif; --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --gutter:20px; --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--neon);text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#000;padding:10px 14px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
h1,h2,h3{font-family:var(--serif);line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,6vw,4rem)} h2{font-size:clamp(1.6rem,3.6vw,2.4rem)} h3{font-size:1.25rem}
p{margin:0 0 1em} ul{padding-left:1.2em}
.in,.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:clamp(48px,8vw,96px) 0}
.lede{font-size:1.15rem;color:var(--dim);max-width:62ch}
.eyebrow{font:700 .78rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}

/* neon wordmark: Yellowtail is self-hosted and subset to this one phrase */
.neon{font-family:"Yellowtail","Segoe Script","Brush Script MT",cursive;font-weight:400;color:#eafff9;
  text-shadow:0 0 6px #b8fff0,0 0 16px var(--neon),0 0 34px var(--neon-d),0 0 64px var(--neon-d);letter-spacing:.01em}
.neon.small{font-size:1.9rem;margin:0 0 .3em}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
  padding:10px var(--gutter);background:rgba(11,17,23,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{text-decoration:none;font-size:2rem;line-height:1}
.top ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 6px;margin:0;padding:0}
.top nav a{display:inline-block;padding:10px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.top nav a:hover{background:var(--panel)}
.top nav a[aria-current]{background:var(--cherry);color:#fff}

/* checker strip */
.checker{height:22px;background:repeating-conic-gradient(var(--cream) 0 25%,#1b1b1b 0 50%) 0 0/22px 22px}

/* hero */
.hero{position:relative;padding:clamp(56px,10vw,128px) 0 clamp(48px,8vw,96px);text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(111,240,210,.14),transparent 60%),radial-gradient(ellipse at 20% 100%,rgba(224,69,58,.18),transparent 55%)}
.hero .neon{display:block;font-size:clamp(3.6rem,15vw,9rem);line-height:1;margin:0 0 .15em}
.hero h1{font-size:clamp(1.15rem,2.6vw,1.6rem);font-family:var(--sans);font-weight:500;color:var(--dim);letter-spacing:.02em;margin:0 auto 1.4em;max-width:34ch}
.hero .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 24px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;min-height:48px}
.btn.primary{background:var(--cherry);color:#fff} .btn.primary:hover{background:var(--cherry-d);color:#fff}
.btn.ghost{border-color:var(--neon);color:var(--neon)} .btn.ghost:hover{background:var(--neon);color:#04221c}
@media (prefers-reduced-motion:no-preference){
  .hero .neon{animation:flick 2.4s ease-out 1}
  @keyframes flick{0%,18%,22%,60%{opacity:.35}20%,24%,64%,100%{opacity:1}62%{opacity:.5}}
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
  .reveal.on{opacity:1;transform:none}
}
html:not(.js) .reveal{opacity:1;transform:none}

/* order tickets */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:28px}
.ticket{position:relative;background:var(--paper);color:var(--paper-ink);padding:22px 22px 24px;border-radius:6px;box-shadow:var(--shadow);
  background-image:linear-gradient(transparent 31px,rgba(0,0,0,.06) 32px);background-size:100% 32px}
.ticket::before,.ticket::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 8px 0,transparent 6px,var(--paper) 7px) 0 0/16px 10px repeat-x}
.ticket::before{top:-9px;transform:rotate(180deg)} .ticket::after{bottom:-9px}
.ticket h3{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;border-bottom:2px dashed rgba(0,0,0,.35);padding-bottom:8px}
.ticket a{color:var(--cherry-d)} .ticket a:hover{color:#000}
.ticket .meta{font:600 .8rem var(--mono);color:#5a4b3a;margin-bottom:10px}
a.ticket-link{display:block;text-decoration:none;color:inherit}
a.ticket-link:hover .ticket,a.ticket-link:focus-visible .ticket{transform:translateY(-4px) rotate(-.4deg)}
.ticket{transition:transform .2s}
@media (prefers-reduced-motion:reduce){.ticket{transition:none}a.ticket-link:hover .ticket{transform:none}}

/* chalkboard / chips */
.board{background:#1c2a24;border:10px solid #6b4a2b;border-radius:10px;padding:clamp(20px,4vw,40px);box-shadow:var(--shadow),inset 0 0 40px rgba(0,0,0,.5)}
.chip{display:inline-block;font:700 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1.5px solid currentColor}
.chip.open{color:var(--neon)} .chip.stocking{color:var(--gold)} .chip.writing{color:#ff9d92}
.shelf{display:grid;grid-template-columns:1fr;gap:6px;padding:20px 0;border-bottom:2px dashed rgba(244,234,213,.25)}
.shelf:last-child{border-bottom:0}
.shelf h3{font-size:1.4rem;margin:0}
.shelf .opens{color:var(--dim);font-size:.95rem;margin:0}

/* steps */
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:14px 0 14px 56px;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);position:absolute;left:0;top:12px;width:38px;height:38px;border-radius:50%;background:var(--cherry);color:#fff;display:grid;place-items:center;font:700 1rem var(--mono)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;align-items:start}

/* recipe pages */
.rmeta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 20px;padding:0;list-style:none;color:var(--dim)}
.rmeta b{color:var(--ink)}
.answer{border-left:4px solid var(--neon);background:var(--panel);padding:16px 18px;border-radius:0 12px 12px 0;margin:0 0 24px}
.tools{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.tools button{font:600 .95rem var(--sans);min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.tools button[aria-pressed=true]{border-color:var(--neon);color:var(--neon)}
.ings .grp{font:700 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:18px 0 6px}
.ings ul{list-style:none;padding:0;margin:0}
.ings li{padding:8px 0;border-bottom:1px solid var(--line)}
.ings li em{color:var(--dim);font-style:normal}
.note{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:.95rem;color:var(--dim)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.rcard{display:block;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:transform .2s,border-color .2s}
.rcard:hover,.rcard:focus-visible{transform:translateY(-4px);border-color:var(--neon)}
.rcard h3{color:var(--cream)} .rcard p{color:var(--dim);margin:0 0 10px}
@media (prefers-reduced-motion:reduce){.rcard{transition:none}.rcard:hover{transform:none}}

/* forms */
form.booth{display:grid;gap:16px;max-width:640px}
label{font-weight:600;display:grid;gap:6px}
input,textarea,select{font:inherit;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:12px 14px;min-height:48px;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--neon);outline:none}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.05rem;min-height:44px;display:flex;align-items:center}

/* footer + family */
.foot{margin-top:40px;background:var(--bg2)}
.foot .in{padding-top:40px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.foot .cols{display:grid;grid-template-columns:1.2fr .8fr 1.4fr;gap:28px}
.foot ul{list-style:none;padding:0;margin:0}
.foot nav a{display:inline-block;padding:8px 0;color:var(--ink)}
.fine{font-size:.85rem;color:var(--dim)}
.apx-eco{border-top:1px solid var(--line);margin-top:34px;padding-top:34px;font-size:15px}
.apx-eco h2{font:700 13px var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:0 0 6px}
.apx-eco .lede{font-size:15px;margin-bottom:20px}
.apx-eco ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.apx-eco a.site{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:14px;color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.apx-eco a.site:hover,.apx-eco a.site:focus-visible{border-color:var(--neon);transform:translateY(-2px)}
.apx-eco a.site b{display:block;font-size:14px} .apx-eco a.site span{display:block;margin-top:2px;font-size:12.5px;color:var(--dim)}
.apx-eco .pass{margin-top:18px;font-size:14px;color:var(--dim)} .apx-eco .pass a{color:inherit;display:inline-block;padding:10px 4px}
@media (prefers-reduced-motion:reduce){.apx-eco a.site{transition:none}.apx-eco a.site:hover{transform:none}}

@media (max-width:760px){
  body{font-size:16px}
  .foot .cols{grid-template-columns:1fr}
  .top{padding:8px var(--gutter)} .brand{font-size:1.7rem}
  .top nav a{padding:10px 9px;font-size:.85rem}
  .top ul{gap:0}
  /* Arcade launcher becomes a round icon on phones (family standard; label stays for screen readers) */
  body .apxl-btn{width:48px;height:48px;min-height:48px;padding:0;justify-content:center;gap:0;opacity:.94}
  body .apxl-btn i{width:36px;height:36px}
  body .apxl-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media print{
  :root{--bg:#fff;--ink:#000;--dim:#333;--panel:#fff;--line:#bbb}
  body{background:#fff;color:#000;font-size:12pt}
  .top,.foot,.tools,.skip,.checker,.btn{display:none!important}
  .answer,.note{border-color:#999;background:#fff}
  a{color:#000;text-decoration:none}
}