/* ============================================================
   SWEET SNOW — sweetsnow.org
   ------------------------------------------------------------
   This page is a menu first. Most visitors arrive by scanning the
   QR code on a business card while standing in the market, so the
   food is above everything else and the layout is designed at
   phone width first.

   The visual language is lifted from the in-store boards: cream
   paper, ink outlines, hard offset shadows rather than soft blur,
   highlighter-marker headings, amber order numbers. The one thing
   borrowed from print rather than the boards is the dot leader
   running from each item to its price — that is what makes a list
   of food read as a menu.
   ============================================================ */

/* ---------------------------------------------------------------
   1 · TOKENS
   --------------------------------------------------------------- */

:root {
  /* Clear sky blue and white complement the bunny and menu illustrations. */
  --paper:  #86C9F1;
  --ink:    #1E3A52;
  --yellow: #FFD84D;
  --amber:  #FFC117;
  --red:    #E8465A;
  --muted:  #4A6C87;
  --ing:    #3E617C;
  --cream:  #FFFFFF;
  --pink:   #F9AAB4;
  --sky-bg: #F2FAFF;
  --sky:    #A9DCF5;
  --sky-deep: #5FB8F2;
  --sky-mid:  #7EC9F6;
  --sky-pale: #BFE4FA;
  --card-blue: #7EC9F6;
  --cloud:  #FFFFFF;
  --line:   #BBDCED;
  --ghost:  #A8CFE8;
  --open:   #2E9E52;


  --display: 'Jua', 'Noto Sans KR', sans-serif;
  --body: 'Noto Sans KR', system-ui, -apple-system, sans-serif;

  --radius: 20px;
  --pop: 5px 5px 0 var(--ink);
  --wrap: 1120px;
  --index-h: 110px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--index-h) + 14px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sky); color: var(--ink); }

img, svg { max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0;
}

.ko {
  font-family: var(--body);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
  font-style: normal;
}

/* Marker stroke behind a heading — sits low so descenders stay legible. */
.hl {
  background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 95%, transparent 95%);
  padding: 0 0.12em;
  box-decoration-break: clone;
}
.hl.pink { background-image: linear-gradient(transparent 58%, var(--pink) 58%, var(--pink) 95%, transparent 95%); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.skip {
  position: absolute;
  left: 0.8rem; top: -4rem;
  z-index: 80;
  padding: 0.55rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  text-decoration: none;
  border-radius: 10px;
}
.skip:focus { top: 0.8rem; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------
   2 · CHROME  (sticky logo + section links)
   --------------------------------------------------------------- */

.chrome {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}

.chrome-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  height: var(--index-h);
  display: flex;
  align-items: center;
  gap: 0.75rem 1.1rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.chrome-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.chrome-logo img {
  width: 7.5rem;
  height: auto;
  display: block;
}

/* ---------------------------------------------------------------
   3 · HERO
   --------------------------------------------------------------- */

.mast {
  padding: clamp(1.8rem, 5vw, 3.4rem) clamp(1.1rem, 4vw, 2rem) 0;
}

.mast-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(1.8rem, 4vw, 2.8rem);
  border-bottom: 2px solid var(--ink);
}

.mast-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ing);
}

.mast h1 {
  margin: 0.45rem 0 0;
  font-size: clamp(2.05rem, 6.4vw, 3.45rem);
  max-width: 11ch;
  letter-spacing: -0.02em;
}

.mast-lede {
  margin: 0.7rem 0 0;
  font-size: clamp(1.02rem, 2.6vw, 1.15rem);
  font-weight: 700;
  color: var(--ink);
}

.mast-where {
  margin: 1rem 0 0;
  font-size: clamp(0.88rem, 2.4vw, 1rem);
  font-weight: 700;
  color: var(--ing);
  max-width: 28rem;
  line-height: 1.45;
}

/* Live open / closed. Worth the code: the most common question a
   phone-in-hand visitor has is whether we're serving right now. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.85rem 1.35rem;
  min-height: 58px;
  max-width: 100%;
  line-height: 1.35;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-size: clamp(1.05rem, 3.5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.status::before {
  content: "";
  width: 12px; height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ghost);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
.status.is-open::before   { background: var(--open); }
.status.is-closed::before { background: var(--red); }
.status:empty { display: none; }

/* Three bowls, overlapped and tilted — the brand's only flourish
   up here. Hidden on phones so the menu starts sooner. */
.mast-art { display: none; }

@media (min-width: 860px) {
  .mast-art {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
    padding-right: 0.5rem;
  }
  .mast-art .art-svg { width: 128px; height: auto; display: block; }
  .mast-art > span { display: block; }
  .mast-art > span + span { margin-left: -30px; }
  .mast-art > span:nth-child(1) { transform: rotate(-7deg); }
  .mast-art > span:nth-child(2) { transform: translateY(-10px); z-index: 2; }
  .mast-art > span:nth-child(3) { transform: rotate(7deg); }
}

/* ---------------------------------------------------------------
   4 · INDEX  (lives inside the sticky chrome)
   --------------------------------------------------------------- */

.index {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.index::-webkit-scrollbar { display: none; }

.index-track {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.index a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.index a:hover { color: var(--ink); background: var(--cream); }
.index a.is-here:not(.act) {
  color: var(--ink);
  background: var(--cream);
}

.index a.pri {
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0.38rem 0.72rem;
}
.index a.pri:hover,
.index a.pri.is-here {
  background: var(--cream);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}
.index a.pri:active { transform: none; box-shadow: none; }

.index a.act {
  margin-left: auto;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--pink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0.32rem 0.9rem 0.28rem;
}
.index a.act:hover {
  background: #F7B7BF;
  color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.index a.act:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---------------------------------------------------------------
   4 · COURSE  (a section of the menu)
   --------------------------------------------------------------- */

.course {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4.2rem) clamp(1.1rem, 4vw, 2rem);
}
.course { background: #fff; border-radius: 24px; margin-bottom: 1.25rem; }
.course.cups { padding-top: clamp(1.2rem, 3vw, 2rem); }

.course-head { margin-bottom: clamp(1.4rem, 3.2vw, 2.1rem); }

.course-head h2 {
  font-size: clamp(1.85rem, 6vw, 2.9rem);
  display: block;
}

.course-quality {
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ing);
  line-height: 1.4;
}

.course-price {
  margin: 0.85rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  line-height: 1;
  color: var(--ink);
}
.course-price i {
  font-family: var(--body);
  font-style: normal;
  font-size: 0.46em;
  font-weight: 700;
  color: var(--ing);
  margin-left: 0.5rem;
  line-height: 1.4;
}
#bingsuPrice:empty { display: none; }
.course-price:has(#bingsuPrice:empty) i {
  display: inline-block;
  margin-left: 0;
  padding: 0.45rem 0.95rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  font-style: normal;
}
.course-price:has(#bingsuPrice:empty):has(i:empty) { display: none; }

.course-head .fruit-note {
  margin: 0.45rem 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

.course-alt {
  margin: 0.75rem 0 0;
  display: inline-block;
  padding: 0.45rem 0.95rem;
  background: var(--cream);
  border: 1.5px dashed var(--ghost);
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--red);
  line-height: 1.35;
}

.course-quality:empty,
.course-alt:empty,
.course-foot:empty,
.fruit-note:empty { display: none; }

/* ---------------------------------------------------------------
   6 · MENU ITEMS
   --------------------------------------------------------------- */

.items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Filled circles express taste intensity; unrated items are explicitly labelled. */

/* Staff recommendations sit with the flavor they complement. */
.staff-picks { margin-top: .7rem; padding: .6rem .7rem; background: #FFF5D6; border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; }
.staff-picks-title { margin: 0 0 .35rem; font: 1rem var(--display); }
.staff-picks-title span { display: block; margin-top: .15rem; font: 600 .72rem var(--body); color: var(--ing); }
.staff-picks ul { display: flex; flex-wrap: wrap; gap: .25rem .65rem; margin: 0; padding: 0; list-style: none; font-size: .76rem; line-height: 1.5; }
.staff-picks li::before { content: "✦ "; color: #916200; }
.item-brand { display: inline-block; font: .65em var(--body); white-space: nowrap; }
#cups.is-coming-soon .cup-card { opacity: .65; }
#cupStatus { margin: .4rem 0 .6rem; }
#cupStatus[hidden] { display: none; }
@media (max-width: 560px) {
  #bingsuList .item-line { flex-wrap: wrap; }
  #bingsuList .item-nm { flex-basis: 100%; }
  #bingsuList .item-dots { display: none; }
}

/* Two true columns, filled top-to-bottom like a printed menu, rather
   than a grid that zigzags and leaves a hole beside an odd last item. */
@media (min-width: 880px) {
  .items.wide {
    columns: 2;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .items.wide .item { break-inside: avoid; }
}

#bingsu .items.wide { margin-top: 0.6rem; }

.bingsu-cols {
  display: grid;
  gap: 2rem 3rem;
}
@media (min-width: 880px) {
  .bingsu-cols { grid-template-columns: 1fr 1.12fr; align-items: start; }
}

.col-label {
  margin: 0 0 0.55rem;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.col-label.sub {
  margin: 1.4rem 0 0.45rem;
  font-size: 1rem;
  color: var(--ing);
}

.ice-block {
  margin-top: clamp(2.4rem, 5.5vw, 3.6rem);
}
.item.is-hint .item-nm {
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.item-no.is-hint {
  background: #fff;
  color: var(--muted);
}

.market-note {
  margin: 0 0 0.85rem;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ing);
}

.item {
  display: grid;
  grid-template-columns: 2rem auto 1fr;
  align-items: center;
  gap: 0 0.75rem;
  padding: 1.05rem 0.15rem;
  border-bottom: 1px solid var(--line);
}
.item:last-child { border-bottom: 0; }
.item.is-soon { opacity: 0.55; }
.item.is-soldout { opacity: 0.55; }

/* Amber order numbers, straight off the in-store boards — guests
   already order by number, so these earn their prominence. */
.item-no {
  width: 1.75rem; height: 1.75rem;
  display: grid;
  place-items: center;
  align-self: center;
  background: var(--amber);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ink);
}

/* The bowls are tall and the taiyaki is wide, so the art sits in a
   fixed box and the SVG letterboxes itself inside it — one slot,
   any silhouette, nothing overflowing into the next row. */
.item-art {
  position: relative;
  width: 86px; height: 90px;
  flex: 0 0 auto;
}
.item-art .art-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

/* Tinted disc behind the bowl, keyed to the flavor. Sits high so it
   haloes the snow rather than the tin. */
.item-art::before {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: 66px; height: 66px;
  margin: -33px 0 0 -33px;
  border-radius: 50%;
  background: var(--halo, #F5EFDC);
}

/* Taiyaki and cookies are much wider than they are tall. */
.items.wide .item-art { width: 116px; }
.items.wide .item-art::before { width: 74px; height: 74px; margin: -37px 0 0 -37px; top: 50%; }

.item-body { min-width: 0; }

.item-line {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  margin: 0;
}

.item-nm {
  font-family: var(--display);
  font-size: clamp(1.14rem, 4vw, 1.42rem);
  line-height: 1.14;
  flex: 0 1 auto;
}
/* Korean must never break mid-word — "두바이 붕어빵" splitting across
   two lines reads as a typo rather than a line break. */
.item-nm .ko {
  font-size: 0.7em;
  font-weight: 700;
  margin-left: 0.4rem;
  white-space: nowrap;
}

/* The dot leader. Round dots on a repeating background rather than
   a dotted border, which renders as squares in most browsers. */
.item-dots {
  flex: 1 1 auto;
  min-width: 1.4rem;
  height: 4px;
  margin-bottom: 0.42em;
  background-image: radial-gradient(circle, var(--ghost) 1.6px, transparent 1.7px);
  background-size: 9px 4px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.item-pr {
  font-family: var(--display);
  font-size: clamp(1.14rem, 4vw, 1.42rem);
  line-height: 1.14;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.item-pr.up { color: inherit; }

.item-ing {
  margin: 0.22rem 0 0;
  font-size: 0.845rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ing);
}
.item-upgrade {
  margin: 0.18rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--muted);
}

/* Rotated label, like a strip of tape stuck on the board. */
.tape {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.1rem 0.5rem;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 4px;
  transform: rotate(-2deg);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.tape.special { background: var(--pink); }
.tape.classic,
.tape.signature {
  background: var(--ink);
  color: #FFFDF6;
}
.tape.soon { background: var(--cream); }
.tape.soldout {
  background: var(--red);
  color: #FFFDF6;
}
.tape.few { background: var(--pink); }

/* Extra fruit sits after cups, still a bowl add-on. */
.extra-fruit {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2rem) clamp(1.6rem, 4vw, 2.4rem);
}
.extra-fruit .tier-items {
  display: grid;
  gap: 0 1.5rem;
}
@media (min-width: 640px) {
  .extra-fruit .tier-items { grid-template-columns: repeat(5, 1fr); }
  .extra-fruit .tier-items > li { border-bottom: 0; padding: 0.2rem 0; }
}

.cup-grid {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) {
  .cup-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
.cup-card,
.cup-card.item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  padding: 1.15rem 1rem 1.25rem;
}
.cup-card .item-no {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
}
.cup-art {
  position: relative;
  width: 132px;
  height: 148px;
}
.cup-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  background: var(--halo, #F5EFDC);
}
.cup-art .art-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}
.cup-nm {
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.15;
  margin: 0.15rem 0 0;
}
.cup-nm .ko {
  font-size: 0.72em;
  margin-left: 0.35rem;
  white-space: nowrap;
}
.cup-pr {
  font-family: var(--display);
  font-size: 1.15rem;
  margin: 0.15rem 0 0;
}
.cup-ing {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ing);
  margin: 0.4rem 0 0;
  max-width: 16rem;
}

/* ---------------------------------------------------------------
   7 · TOPPINGS
   --------------------------------------------------------------- */

.tiers {
  display: grid;
  gap: 1rem;
}
@media (min-width: 700px) {
  .tiers { grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 1.75rem); }
  /* Longer topping lists use two columns on wider screens. */
  .tier.is-long .tier-items { column-count: 2; column-gap: 2rem; }
}

.tier {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem 1.4rem;
  box-shadow: var(--pop);
}
.tier-label {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ing);
  margin: 0 0 0.45rem;
}
.tier-price {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.15rem 0.6rem;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
}
.tier-price small {
  font-family: var(--body);
  font-size: 0.44em;
  font-weight: 800;
  margin-left: 0.2rem;
}

.tier-items {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

/* A priced list, read top to bottom, with a dotted rule between rows. */
.tier-items > li {
  padding: 0.42rem 0;
  border-bottom: 2px dotted var(--ghost);
  break-inside: avoid;
}
.tier-items > li:last-child { border-bottom: 0; }

.t-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.t-nm {
  font-size: 0.95rem;
  font-weight: 800;
}
.t-pr {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--red);
  flex: none;
}
.tier-items .ko {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ing);
  text-align: right;
}

/* Flavor choices under an item. Red so it's obvious these are a pick,
   not part of the topping's name. */
.t-opts {
  list-style: none;
  margin: 0.2rem 0 0.1rem;
  padding: 0 0 0 0.15rem;
}
.t-opts li {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--red);
  line-height: 1.45;
}
.t-opts li::before {
  content: "–";
  margin-right: 0.35rem;
  opacity: 0.65;
}

.t-note {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ing);
  line-height: 1.35;
}

.fruit-note {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ing);
  line-height: 1.4;
}

/* ---------------------------------------------------------------
   8 · DEALS  (taiyaki multi-buy)
   --------------------------------------------------------------- */

.deals {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.deal {
  font-family: var(--display);
  font-size: 1.05rem;
  padding: 0.3rem 0.75rem;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
}
.deal-note {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ing);
}

/* ---------------------------------------------------------------
   10 · THE VOTE
   --------------------------------------------------------------- */

.vote {
  background: var(--ink);
  background-image: radial-gradient(circle at 18% 18%, rgba(255, 216, 77, 0.1) 0, transparent 46%);
  color: var(--paper);
  padding: clamp(3.2rem, 8vw, 5.5rem) clamp(1.1rem, 4vw, 2rem);
  margin-top: clamp(0.5rem, 2vw, 1.2rem);
}

.vote-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.4rem);
  align-items: start;
}

.vote-say h2 {
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  color: var(--yellow);
}
.vote-say p {
  margin: 0.85rem 0 0;
  font-size: clamp(0.98rem, 2.6vw, 1.08rem);
  line-height: 1.65;
  color: #E4DED2;
  max-width: 40rem;
}

.vote-pair {
  display: grid;
  gap: 1.15rem;
  align-items: start;
}
@media (min-width: 860px) {
  .vote-pair { grid-template-columns: 1.15fr 0.85fr; }
}
.vote.is-ideas-only .vote-pair {
  grid-template-columns: 1fr;
  max-width: 28rem;
}
/* The ballot. Perforated top edge sells the paper metaphor — the
   half-circles are punched in the ink background colour. */
.ballot {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  padding: clamp(1.6rem, 4vw, 2.3rem) clamp(1.2rem, 4vw, 2.2rem) clamp(1.5rem, 4vw, 2rem);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.25);
}
.ballot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 11px;
  background-image: radial-gradient(circle at 8px -1px, var(--ink) 6.5px, transparent 7px);
  background-size: 16px 11px;
  background-repeat: repeat-x;
}

.ballot-kicker {
  margin: 0.3rem 0 1.5rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ing);
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--line);
}

.q { margin: 0 0 1.5rem; padding: 0; border: 0; }
.q legend, .q-label {
  display: block;
  padding: 0;
  margin-bottom: 0.7rem;
  font-family: var(--display);
  font-size: clamp(1.02rem, 3vw, 1.15rem);
  line-height: 1.25;
}
.q-label i {
  font-family: var(--body);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ing);
  margin-left: 0.35rem;
}

.soon-picks {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.soon-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  background: #fff;
  border: 2.5px solid var(--ghost);
  border-radius: 14px;
  cursor: pointer;
}
.soon-pick input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.soon-nm {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  font-size: 0.95rem;
  font-weight: 800;
}
.soon-nm .ko {
  font-family: var(--body);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ing);
}
.soon-pick::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  border: 2.5px solid var(--ghost);
  border-radius: 50%;
  background: #fff;
}
.soon-pick:hover { border-color: var(--ink); }
.soon-pick:has(input:checked) {
  background: var(--yellow);
  border-color: var(--ink);
}
.soon-pick:has(input:checked)::before {
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: inset 0 0 0 3px var(--yellow);
}
.soon-pick:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Real checkboxes, visually hidden, so keyboard and screen readers
   behave normally and the form still works without JavaScript. */
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.42rem 0.8rem 0.42rem 0.6rem;
  background: #fff;
  border: 2.5px solid var(--ghost);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.chip span::before {
  content: "";
  width: 15px; height: 15px;
  flex: 0 0 auto;
  border: 2.5px solid var(--ghost);
  border-radius: 4px;
  background: #fff no-repeat center / 11px 11px;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked ~ span {
  background: var(--yellow);
  border-color: var(--ink);
}
.chip input:checked ~ span::before {
  border-color: var(--ink);
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.3' fill='none' stroke='%23FFFDF6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.chip input:focus-visible ~ span { outline: 3px solid var(--ink); outline-offset: 2px; }
.chip input:active ~ span { transform: translateY(1px); }

.ballot textarea,
.ballot input[type="text"],
.ballot input[type="email"],
.ask input, .ask textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: 2.5px solid var(--ghost);
  border-radius: 12px;
  resize: vertical;
}
.ballot textarea::placeholder, .ask ::placeholder { color: #B9AF9C; }
.ballot :is(textarea, input):focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--yellow);
}

.q-row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .q-row { grid-template-columns: 0.8fr 1.2fr; } }

.btn {
  font-family: var(--display);
  font-size: 1.05rem;
  padding: 0.7rem 1.5rem;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn[disabled] { opacity: 0.55; cursor: default; transform: none; box-shadow: 4px 4px 0 var(--ink); }

.btn-vote { width: 100%; margin-top: 0.3rem; }

.form-msg {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  font-weight: 800;
}
.form-msg.ok  { color: var(--open); }
.form-msg.err { color: var(--red); }

/* ---------------------------------------------------------------
   12 · VISIT
   --------------------------------------------------------------- */

.visit-grid {
  display: grid;
  gap: clamp(1.2rem, 3vw, 1.6rem);
}
@media (min-width: 820px) {
  .visit-grid { grid-template-columns: 1fr 1fr 1.25fr; align-items: start; }
}

.visit-col {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem 1.45rem;
  box-shadow: var(--pop);
}

.visit-col h3 {
  font-size: 0.72rem;
  font-family: var(--body);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ing);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.9rem;
}

.addr {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 600;
}
.addr b { font-family: var(--display); font-weight: 400; font-size: 1.1em; }

.visit-links { margin: 1rem 0 0; font-size: 0.92rem; font-weight: 700; line-height: 2; }
.visit-links a { text-decoration: none; border-bottom: 3px solid var(--yellow); }
.visit-links a:hover { border-bottom-color: var(--ink); }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.42rem 0;
  border-bottom: 2px solid var(--line);
  font-size: 0.95rem;
  font-weight: 700;
}
.hours li:last-child { border-bottom: 0; }
.hours .h-dots {
  flex: 1 1 auto;
  min-width: 0.9rem;
  height: 4px;
  margin-bottom: 0.3em;
  background-image: radial-gradient(circle, var(--ghost) 1.6px, transparent 1.7px);
  background-size: 9px 4px;
  background-repeat: repeat-x;
}
.hours .h-time { font-family: var(--display); font-size: 1.02rem; }
.hours li.is-today { color: var(--ink); }
.hours li.is-today .h-day::after {
  content: "today";
  margin-left: 0.45rem;
  font-family: var(--body);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--yellow);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
}
.status-inline { margin-top: 1rem; }

.ask { display: grid; gap: 0.7rem; }
.ask-note { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--ing); }
.ask p { margin: 0; }
.ask label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 800;
}
.ask input:focus, .ask textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--yellow);
}
.btn-ask { justify-self: start; background: var(--yellow); }

/* ---------------------------------------------------------------
   13 · FOOTER
   --------------------------------------------------------------- */

.foot {
  border-top: 2px solid var(--ink);
  background: var(--cream);
  padding: clamp(1.8rem, 4vw, 2.4rem) clamp(1.1rem, 4vw, 2rem);
}
.foot-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
}
.foot-inner > img:first-child { width: 8.5rem; }
.foot-fine {
  margin: 0;
  flex: 1 1 14rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ing);
}
.foot-fine a { color: var(--ink); }

/* ---------------------------------------------------------------
   14 · REVEAL
   --------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .chip span { transition: none; }
}

/* ---------------------------------------------------------------
   15 · PHONE REFINEMENTS
   --------------------------------------------------------------- */

@media (max-width: 560px) {
  .chrome-logo img { width: 6.4rem; }
  .mast-inner { border-bottom-width: 2px; flex-direction: column; align-items: flex-start; }
  .item { grid-template-columns: 1.6rem auto 1fr; gap: 0 0.5rem; }
  .item-art { width: 70px; height: 74px; }
  .item-art::before { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .item-no { width: 1.55rem; height: 1.55rem; font-size: 0.82rem; border-width: 2px; }
  .items.wide .item-art { width: 92px; }
  .items.wide .item-art::before { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .items.wide .item-nm,
  .items.wide .item-pr { font-size: 1.04rem; }
  .foot-inner { gap: 1rem 1.2rem; }
}

.thanks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.4rem;
}
.thanks img { width: 10.5rem; }
.thanks h1 { margin: 1.4rem 0 0.6rem; font-size: clamp(1.8rem, 6vw, 2.6rem); }
.thanks p {
  margin: 0;
  max-width: 28rem;
  font-weight: 700;
  color: var(--ing);
  line-height: 1.5;
}
.thanks .btn { margin-top: 1.6rem; display: inline-block; text-decoration: none; }

@media print {
  .index, .vote, .ask { display: none; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- sticky bar ---- */
.chrome {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 3px solid var(--ink);
}

/* Nav pills: border, hard shadow, real padding. */
.index-track { gap: 0.55rem; }
.index a,
.index a.pri {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}
.index a:hover,
.index a.pri:hover,
.index a.is-here:not(.act),
.index a.pri.is-here {
  background: var(--sky-pale);
  color: var(--ink);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.index a:active,
.index a.pri:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.index a.act {
  background: var(--pink);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0.5rem 1.15rem;
  font-size: 1.05rem;
}
.index a.act:hover { background: #FBBCC5; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.index a.act:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* A clear opening status with small, playful sky accents. */
.mast {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 1rem clamp(1rem, 4vw, 2rem) 1.2rem;
}
.mast::before {
  content: "";
  position: absolute;
  left: max(2%, calc(50% - 520px));
  bottom: 28px;
  width: 52px;
  height: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 16px -12px 0 1px #fff, 36px -4px 0 1px #fff;
  opacity: .7;
  pointer-events: none;
}
.mast::after {
  content: "❄";
  position: absolute;
  right: max(4%, calc(50% - 500px));
  top: 20px;
  font: 32px/1 sans-serif;
  color: #fff;
  text-shadow: -42px 45px 0 #fff;
  opacity: .85;
  pointer-events: none;
}
.mast-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: 0;
  border: 0;
  text-align: center;
}
.mast-kicker, .mast-where { color: var(--ink); }
.mast-kicker { letter-spacing: .11em; }
.mast-where { margin-top: .25rem; }
.status { margin-top: 0; }

/* MENU stays a heading — not a sky billboard. */
.menu-mast {
  width: min(var(--wrap), calc(100% - 2 * clamp(1.1rem, 4vw, 2rem)));
  margin: clamp(1.2rem, 3vw, 1.8rem) auto 0;
  padding: 0.2rem 0 0.4rem;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: left;
  overflow: visible;
}
.menu-mast::before, .menu-mast::after { content: none; }
.menu-mast-t {
  color: var(--ink);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing: -0.02em;
  text-shadow: none;
}

/* The bunny stays left; generous navigation sits in the center. */
.chrome {
  background: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.chrome-inner {
  min-height: 110px;
  height: auto;
  max-width: 1440px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  gap: 1rem;
  padding: .35rem clamp(.75rem, 3vw, 2rem);
}
.chrome-logo { display: block; text-decoration: none; }
.chrome-logo img {
  display: block;
  width: 150px;
  height: auto;
  mix-blend-mode: multiply;
}
.index { overflow: visible; }
.index-track { justify-content: center; gap: clamp(.35rem, 2vw, 1.5rem); }
.index a, .index a.pri, .index a.act {
  margin: 0;
  min-height: 48px;
  padding: .5rem clamp(.6rem, 2vw, 1.3rem);
  justify-content: center;
  border: 1.5px solid transparent;
  border-radius: 18px;
  box-shadow: none;
  background: transparent;
  color: var(--ink);
  font: 400 1.4rem/1.2 var(--display);
  transition: color .15s ease, background .15s ease;
}
.index a:hover, .index a.pri:hover, .index a.act:hover,
.index a.is-here:not(.act), .index a.pri.is-here,
.index a.act.is-here {
  transform: none;
  box-shadow: none;
  border-color: #90C9EC;
  background: #E6F4FD;
  color: var(--ink);
}
.index a:active, .index a.pri:active, .index a.act:active {
  transform: none;
  box-shadow: none;
}
.foot { background: #FFFFFF; color: var(--ink); border-top: 1px solid var(--line); }
.foot::before, .foot::after { content: none; }
.foot-inner > img:first-child { width: 5.8rem; height: auto; mix-blend-mode: multiply; }
.foot-fine, .foot-fine a { color: var(--ink); }
@media (max-width: 640px) {
  :root { --index-h: 88px; }
  .course { border-radius: 0; }
  .chrome-inner {
    min-height: 88px;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: .35rem;
    padding: .4rem .65rem;
  }
  .chrome-logo img { width: 96px; }
  .index-track { gap: .1rem; }
  .index a, .index a.pri, .index a.act {
    min-height: 44px;
    padding: .4rem .5rem;
    font-size: 1.1rem;
    border-radius: 14px;
  }
  .mast { padding-top: .8rem; padding-bottom: 1rem; }
  .mast-inner { align-items: center; border: 0; }
  .mast-kicker { font-size: .65rem; }
  .mast-where { font-size: .83rem; }
  .mast::before { left: -35px; bottom: 16px; opacity: .45; }
  .mast::after { right: -6px; top: 8px; font-size: 24px; opacity: .55; }
}

.deals.deals-inline { margin: 0.45rem 0 0; gap: 0.4rem 0.5rem; flex-wrap: wrap; }
.deals:empty { display: none; }

.vote-inner { position: relative; z-index: 1; }

/* Catering is visible in navigation while the service is being prepared. */
.index a { flex-direction: column; gap: .1rem; }
.nav-soon { font: 700 .6rem/1.2 var(--body); color: var(--ing); white-space: nowrap; }
.catering-soon { display: inline-block; margin: 0; padding: .65rem 1.1rem; background: #E6F4FD; border: 1px solid #90C9EC; border-radius: 999px; font: 1.3rem var(--display); }
@media (max-width: 640px) {
  .index a, .index a.pri, .index a.act { padding-inline: .35rem; font-size: 1.05rem; }
  .nav-soon { font-size: .54rem; }
}

.staff-picks { padding: 0; background: none; border: 0; border-radius: 0; }
.staff-picks-title { margin-bottom: .35rem; }
.staff-picks ul { padding: .6rem .7rem; background: #FFF5D6; border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; }