/* =====================================================
   The Local Lab — components
   Drawn like the paper that comes off the bench: a hairline rule for an edge, a
   monospaced label for a header, an acid block for the one thing you are meant to
   look at, vermilion for the one thing you are meant to press. Nothing floats on a
   drop shadow and nothing is round. Anything deliberately paper-light or
   deliberately dark re-declares its own roles, so the night swap cannot leak in.
   ===================================================== */

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--body); font-weight: 700; font-size: var(--step--1);
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  padding: .8rem 1.3rem; border-radius: var(--r-sm); border: 1px solid var(--edge);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease), transform .12s var(--ease);
  cursor: pointer; line-height: 1.1;
}
.btn:hover { box-shadow: var(--shadow-lift) }
.btn:active { transform: translateY(1px) }
.btn .ico { width: 18px; height: 18px }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent) }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); border-color: var(--accent-hover) }
.btn-ghost { background: transparent; color: var(--text) }
.btn-ghost:hover { background: var(--signal); color: var(--on-signal); border-color: var(--signal-dim) }
/* the light variant lives on an ink island, whose roles already give cream —
   the only thing it has to add is a hairline that clears dark paper */
.btn-ghost.light { color: #E8EAEF; border-color: rgba(232, 234, 239, .42) }
.btn-ghost.light:hover { background: var(--signal); color: var(--on-signal); border-color: var(--signal) }
.btn-sm { padding: .55rem .9rem; font-size: var(--step--2) }

/* ---------- header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: var(--z-head);
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--head-h); padding: .5rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-head.stuck { border-bottom-color: var(--line-strong); box-shadow: 0 14px 26px -24px rgba(20, 22, 26, .8) }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text) }
.brand-mark {
  width: 44px; height: 44px; border-radius: var(--r-sm); padding: 3px; flex: none;
  border: 1px solid var(--edge); background: var(--card);
  transition: transform .45s var(--ease-back);
}
.brand:hover .brand-mark { transform: rotate(-8deg) }
.brand-txt { display: grid; gap: 2px }
.brand-txt b { font-family: var(--display); font-size: 1.06rem; font-weight: 800; line-height: 1; letter-spacing: -.02em }
.brand-txt i {
  font-style: normal; font-family: var(--mono); font-size: .58rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

.site-nav { display: flex; gap: .1rem; margin-left: auto; align-items: center }
.site-nav a {
  position: relative; text-decoration: none; color: var(--text);
  font-size: var(--step--1); font-weight: 600; padding: .5rem .62rem; border-radius: var(--r-sm);
}
.site-nav a::after {
  content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .3rem; height: 3px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.site-nav a:hover { color: var(--accent) }
.site-nav a:hover::after, .site-nav a[aria-current="true"]::after { transform: scaleX(1) }
.site-nav a[aria-current="true"] { color: var(--accent) }

.head-act { display: flex; align-items: center; gap: .55rem }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-content: center;
  border: 1px solid var(--edge); background: var(--surface); color: var(--gold-ink);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.icon-btn:hover { background: var(--signal); color: var(--on-signal); border-color: var(--signal-dim) }
.icon-btn .ico { width: 20px; height: 20px }
.burger { display: none; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--edge); place-content: center; gap: 5px }
.burger span { display: block; width: 18px; height: 2px; background: var(--text); transition: transform .3s var(--ease), opacity .2s }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

@media (max-width: 1040px) {
  .burger { display: grid }
  .head-act .btn-primary { display: none }
  .site-nav {
    position: fixed; inset: var(--head-h) 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--bg); border-bottom: 1px solid var(--line-strong);
    padding: .6rem var(--gutter) 1.2rem; margin: 0;
    clip-path: inset(0 0 100% 0); transition: clip-path .4s var(--ease);
  }
  .site-nav.open { clip-path: none }
  .site-nav a { font-size: 1.05rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line) }
  .site-nav a::after { display: none }
}

/* ---------- the readout strip ---------- */
.ticker {
  background: #12161C; color: #E8EAEF; border-block: 1px solid var(--signal-dim);
  overflow: hidden; padding: .6rem 0; position: relative; z-index: 2;
}
[data-theme="night"] .ticker { background: #06080C; border-block-color: var(--vermilion-on-dark) }
.ticker-track { display: flex; gap: 2.2rem; width: max-content; animation: slide 42s linear infinite }
.ticker:hover .ticker-track { animation-play-state: paused }
.ticker-track span {
  font-weight: 700; font-size: var(--step--1); letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 2.2rem;
}
/* the slash, not a star: this is a list of specimens, not a banner */
.ticker-track span::after { content: "/"; color: var(--signal); font-weight: 400 }
@keyframes slide { to { transform: translateX(-50%) } }

/* ---------- origin steps ---------- */
.steps { display: grid; gap: 0; counter-reset: st; border-top: 1px solid var(--line) }
.step {
  display: grid; grid-template-columns: 54px 1fr; gap: 1rem; align-items: start;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 1.05rem .6rem;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.step.hot { background: color-mix(in srgb, var(--signal) 22%, transparent); border-bottom-color: var(--line-strong) }
.step-n {
  counter-increment: st; display: grid; place-content: center; width: 54px; height: 40px;
  border: 1px solid var(--edge); background: var(--surface); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 1rem; color: var(--text);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.step-n::before { content: counter(st, decimal-leading-zero) }
.step.hot .step-n { background: var(--graphite); color: var(--signal); border-color: var(--graphite) }
.step .vi { font-family: var(--display); font-weight: 800; font-size: var(--step-0); color: var(--accent); letter-spacing: -.02em }
.step h3 {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin: .2rem 0 .45rem;
}
.step p { font-size: .93rem; color: var(--muted) }
.step > div > p:last-child { margin-top: .2rem }

.origin-figure { position: sticky; top: calc(var(--head-h) + 22px) }
.origin-figure img {
  border-radius: var(--r-sm); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  width: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform .6s var(--ease);
}
/* a specimen label stuck to the side of the jar: white stock, one acid edge */
.origin-badge {
  position: absolute; left: -1px; bottom: 24px; display: flex; align-items: center; gap: .6rem;
  background: var(--card); color: var(--graphite);
  border: 1px solid var(--graphite); border-left: 4px solid var(--signal);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .55rem .9rem .55rem .7rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.3;
}
.origin-badge .ico { width: 24px; height: 24px; color: var(--vermilion) }

/* ---------- flavour lab ---------- */
.lab { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start }
@media (max-width: 1000px) { .lab { grid-template-columns: 1fr } }
.lab-board { display: grid; gap: 1.5rem }
.lab-row > h3 {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .7rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
.opt-grid { display: flex; flex-wrap: wrap; gap: .5rem }
.opt {
  display: grid; gap: .12rem; justify-items: start; text-align: left;
  border: 1px solid var(--edge); border-radius: var(--r-sm); padding: .5rem .75rem;
  background: var(--surface); color: var(--text); font-weight: 700; font-size: .9rem;
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
}
.opt small {
  font-family: var(--mono); font-weight: 400; font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift) }
/* the acid marker is a fixed pair — dark ink on it in either theme, so a pressed
   chip can never become cream-on-cream on a band that swapped its own text role */
.opt[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal-dim) }
.opt[aria-pressed="true"] small { color: rgba(26, 32, 0, .72) }
.opt[aria-pressed="true"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c, var(--vermilion));
}

/* the tasting note: a printed specimen slip, paper-white in both themes, so its
   roles are pinned rather than inherited from the bench band behind it */
.lab-card {
  --text: var(--graphite); --text-soft: #3A3E46; --muted: var(--steel);
  --accent: var(--vermilion); --accent-hover: var(--vermilion-deep); --on-accent: #FFF6F2;
  --surface: var(--card); --line: rgba(20, 22, 26, .14); --line-strong: rgba(20, 22, 26, .38);
  --edge: var(--line-strong); --gold-ink: #7A4E06;
  /* the pass green is pinned dark too, or the night value — a pale mint — would sit
     under the cream ink of the "already on the menu" tag */
  --pass: #17694F;
  align-self: start; position: sticky; top: calc(var(--head-h) + 22px);
  background: var(--card); color: var(--text); border-radius: var(--r-sm);
  border: 1px solid var(--graphite); box-shadow: 4px 4px 0 rgba(20, 22, 26, .12);
  padding: 1.4rem 1.4rem 1.2rem; overflow: hidden;
}
.lab-card.flash > * { animation: card-in .45s var(--ease) both }
.lab-card.flash > *:nth-child(2) { animation-delay: .04s }
.lab-card.flash > *:nth-child(3) { animation-delay: .08s }
.lab-card.flash > *:nth-child(4) { animation-delay: .12s }
.lab-card.flash > *:nth-child(5) { animation-delay: .16s }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.lab-card h3 { font-size: var(--step-1); line-height: 1.05; margin: .5rem 0 .1rem }
.lab-card h4 {
  font-family: var(--mono); font-size: .78rem; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .85rem
}
.lab-card .tag {
  display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: var(--r-sm); border: 1px solid var(--graphite);
}
.lab-card .tag.on { background: var(--pass); color: #FFF6F2; border-color: var(--pass) }
.lab-card .tag.concept { background: var(--signal); color: var(--on-signal); border-color: var(--signal-dim) }
.lab-card .build { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem }
.lab-card .build i {
  font-style: normal; font-size: .72rem; font-weight: 600; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .18rem .45rem; color: var(--text-soft)
}
.lab-card .notes { font-size: .9rem; color: var(--text-soft); border-top: 1px solid var(--line); padding-top: .85rem }
.lab-card .price { font-family: var(--mono); font-weight: 700; font-size: 1.3rem; color: var(--vermilion); margin-top: .6rem }
.lab-card .fine { color: var(--muted) }
.lab-card .acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem }
.lab-empty { font-size: .92rem; color: var(--text-soft) }

/* ---------- pantry ---------- */
/* the rules belong to the cells, not the container: a container background shows
   through the empty slots at the end of a short last row as a grey hole */
.pantry { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
.grain {
  position: relative; text-align: left; display: grid; gap: .15rem; align-content: start;
  background: var(--surface); border: 0; border-radius: 0;
  padding: .9rem .9rem 1.45rem; color: var(--text); cursor: pointer; overflow: hidden;
  box-shadow: inset -1px -1px 0 var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.grain::after {
  content: ""; position: absolute; inset: auto 0 0; height: 4px;
  background: var(--c, var(--vermilion)); transform: scaleX(.28); transform-origin: left;
  transition: transform .35s var(--ease);
}
.grain:hover { transform: translateY(-3px); box-shadow: inset -1px -1px 0 var(--line), var(--shadow-lift); z-index: 1 }
.grain:hover::after, .grain[aria-pressed="true"]::after { transform: scaleX(1) }
.grain[aria-pressed="true"] { background: color-mix(in srgb, var(--signal) 30%, var(--surface)) }
.grain b { font-family: var(--display); font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em }
.grain > span { font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; color: var(--muted) }
.grain em {
  font-style: normal; font-family: var(--mono); font-size: .66rem; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: .4rem;
}
.grain .dot {
  width: 12px; height: 12px; border-radius: 1px; background: var(--c, var(--vermilion));
  border: 1px solid var(--edge); margin-bottom: .35rem; transition: transform .3s var(--ease-back);
}
.grain:hover .dot { transform: scale(1.4) rotate(45deg) }

/* ---------- menu tools ---------- */
.menu-tools { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem }
.tools-right { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center }
.chips { display: flex; flex-wrap: wrap; gap: .4rem }
.chip {
  border: 1px solid var(--edge); border-radius: var(--r-sm); padding: .42rem .8rem;
  font-size: .8rem; font-weight: 600; background: var(--surface); color: var(--text);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.chip:hover { transform: translateY(-2px) }
.chip[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal-dim) }
.field input, .cur select, .cur input, .form-card input, .form-card select, .form-card textarea {
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-sm);
  padding: .55rem .75rem; color: var(--text); font-size: .9rem; min-width: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .cur select:focus, .cur input:focus, .form-card :is(input, select, textarea):focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent)
}
.field input[type="search"] { min-width: min(320px, 70vw) }
.switch { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--text-soft) }
.switch input { position: absolute; opacity: 0; width: 1px }
.switch span { width: 38px; height: 20px; border-radius: var(--r-sm); border: 1px solid var(--edge); background: var(--surface); position: relative; transition: background .25s var(--ease), border-color .25s var(--ease) }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 1px; background: var(--edge); transition: transform .25s var(--ease-back), background .25s var(--ease) }
.switch input:checked + span { background: var(--signal); border-color: var(--signal-dim) }
.switch input:checked + span::after { transform: translateX(18px); background: var(--on-signal) }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px }
.menu-count { font-size: var(--step--1); color: var(--muted); margin-bottom: 1rem; letter-spacing: .04em }
.empty { padding: 2rem 0; color: var(--muted) }

/* ---------- menu grid ---------- */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
.dish {
  position: relative; display: grid; gap: .2rem; align-content: start; cursor: pointer;
  background: var(--surface); border: 0; border-radius: 0;
  padding: 1rem 1.05rem .95rem;
  box-shadow: inset -1px -1px 0 var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.dish::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.dish:hover { transform: translateY(-4px); box-shadow: inset -1px -1px 0 var(--line), var(--shadow-lift); z-index: 1 }
.dish:hover::before { transform: scaleX(1) }
.dish .cat { font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.dish .name { font-family: var(--display); font-size: 1.06rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--text); margin-top: .15rem }
.dish .en { font-size: .82rem; font-weight: 600; color: var(--accent) }
.dish .desc { font-size: .8rem; color: var(--muted); font-style: italic; margin-top: .35rem }
.dish .foot { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; flex-wrap: wrap }
.dish .price { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; color: var(--accent); margin-left: auto }
.dish .price .alt { display: block; font-family: var(--mono); font-size: .64rem; font-weight: 400; color: var(--muted) }
.dish .star { color: var(--gold-ink) }
.dish.in-order { background: color-mix(in srgb, var(--pass) 11%, var(--surface)); box-shadow: inset 0 0 0 1px var(--pass) }
.badge { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .45rem; border-radius: var(--r-sm); border: 1px solid var(--edge) }
.badge.new { background: var(--signal); color: var(--on-signal); border-color: var(--signal-dim) }
.badge.veg { background: var(--pass); color: var(--on-accent); border-color: var(--pass) }
/* a fixed red fill needs a fixed light ink — --on-accent goes dark at night, which
   would put dark on dark */
.badge.spicy { background: var(--vermilion); color: #FFF6F2; border-color: var(--vermilion) }
.plus {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--edge); flex: none;
  background: var(--surface); color: var(--text); font-weight: 800; font-size: 1.05rem; line-height: 1;
  display: grid; place-content: center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .25s var(--ease-back);
}
.dish.in-order .plus { background: var(--pass); color: var(--on-accent); border-color: var(--pass) }
.plus:hover { transform: rotate(90deg) }
.legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.6rem; font-size: .78rem; color: var(--muted) }
.legend b { color: var(--gold-ink) }

/* ---------- the room band ---------- */
.bleed-img {
  position: absolute; inset: -8% 0;
  background-size: cover; background-position: center;
  will-change: transform;
}

/* ---------- b2b ---------- */
/* the hairlines belong to the cells: a container background shows through while the
   cards are still fading in, which reads as a grey slab above the grid */
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-bottom: 2.2rem }
.track {
  --c-ui: var(--c, var(--vermilion));
  position: relative; overflow: hidden; display: grid; gap: .5rem; align-content: start;
  background: var(--surface); border-radius: 0; padding: 1.45rem;
  box-shadow: inset -1px -1px 0 var(--line);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
[data-theme="night"] .track { --c-ui: color-mix(in srgb, var(--c, var(--vermilion)) 45%, var(--text)) }
.track::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c-ui); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease) }
.track.in::before { transform: scaleX(1) }
.track:hover { background: color-mix(in srgb, var(--c-ui) 7%, var(--surface)); box-shadow: inset -1px -1px 0 var(--line), var(--shadow-lift); z-index: 1 }
.track .t-ico {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-content: center;
  background: color-mix(in srgb, var(--c-ui) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-ui) 40%, transparent); color: var(--c-ui);
}
.track h3 { font-size: var(--step-0); color: var(--text) }
.track p { font-size: .88rem; color: var(--muted) }
.track ul { display: grid; gap: .45rem; margin-top: .5rem; list-style: none }
.track li { position: relative; padding-left: 1.4rem; font-size: .88rem; color: var(--text-soft) }
.track li::before { content: "✓"; position: absolute; left: 0; color: var(--c-ui); font-weight: 800 }

.kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .95fr); gap: clamp(18px, 3vw, 40px); align-items: start }
@media (max-width: 960px) { .kit { grid-template-columns: 1fr } }

/* the development spec sheet, printed like the one that goes in the box */
.spec { display: grid; gap: 1.1rem; align-content: start }
.h3 { font-family: var(--display); font-size: var(--step-1); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--text) }
.spec-table { width: 100%; border-collapse: collapse; font-size: .9rem }
.spec-table th, .spec-table td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top }
.spec-table thead th {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line-strong)
}
.spec-table tbody th { font-family: var(--mono); font-weight: 400; color: var(--text); white-space: nowrap }
.spec-table td { color: var(--text-soft) }
/* the stage column is three short words wide — without extra air the uppercase
   header runs straight into the next one */
.spec-table :is(th, td):first-child { padding-left: 0; padding-right: 1.15rem }
.spec-table :is(th, td):last-child { padding-right: 0 }
.spec-table td:last-child, .spec-table th:last-child { white-space: nowrap; color: var(--muted); font-family: var(--mono); font-size: var(--step--1) }
.ticks { list-style: none; display: grid; gap: .5rem }
.ticks li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--text-soft) }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--pass); font-weight: 800 }

/* the requisition form: a fixed dark island, roles pinned, in both themes */
.form-card {
  --text: #E8EAEF; --muted: #99A1AE; --text-soft: #C3C9D3;
  --accent: var(--vermilion-on-dark); --accent-hover: #FF9470; --on-accent: #1A0C06;
  --line: rgba(232, 234, 239, .16); --line-strong: rgba(232, 234, 239, .38);
  --edge: rgba(232, 234, 239, .38); --gold-ink: #F0C24B;
  position: relative; background: #12161C; color: var(--text);
  border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 1.6rem;
}
.form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--signal) }
.form-card h3 { font-size: var(--step-1); margin-bottom: .3rem }
.form-card .fine { color: var(--muted); margin-bottom: 1.1rem }
.form-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr } }
.form-grid label {
  display: grid; gap: .3rem; font-family: var(--mono); font-size: .68rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft);
}
.form-grid label:has(textarea), .form-grid .channel-tags, .form-grid .form-act, .form-grid .form-note { grid-column: 1 / -1 }
.form-card input, .form-card select, .form-card textarea { background: rgba(255, 255, 255, .06); color: var(--text); border-color: var(--edge); width: 100% }
.form-card textarea { min-height: 96px; resize: vertical }
.err { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) }
.channel-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem }
.channel-tags button { border: 1px solid var(--edge); border-radius: var(--r-sm); padding: .35rem .7rem; font-size: .76rem; font-weight: 600; color: var(--text-soft); transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease) }
.channel-tags button:hover { transform: translateY(-2px); color: var(--text) }
.channel-tags button[aria-pressed="true"] { background: var(--signal); color: var(--on-signal); border-color: var(--signal) }
.form-act { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem }
.form-note { margin-top: .5rem; font-size: .88rem; color: var(--text-soft); border-top: 1px solid var(--line); padding-top: .9rem }
.form-note a { color: var(--signal) }
#formNote { margin-top: .5rem; font-size: .88rem; color: var(--text-soft); border-top: 1px solid var(--line); padding-top: .9rem }
#formNote a { color: var(--signal) }

/* ---------- gallery ---------- */
.shot {
  position: relative; display: block; padding: 0; border: 1px solid var(--edge); border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface); cursor: zoom-in;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease) }
.shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line-strong) }
.shot:hover img { transform: scale(1.05) }
.shot .cap {
  position: absolute; inset: auto 0 0; padding: 1.6rem .7rem .6rem; text-align: left;
  font-size: .78rem; color: #E8EAEF; background: linear-gradient(180deg, transparent, rgba(8, 10, 14, .92));
  opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.shot:hover .cap, .shot:focus-visible .cap { opacity: 1; transform: none }

/* ---------- visit ---------- */
/* the address card and the perk note share the left column; the two photographs run
   the full height beside them, so the perk sits under the card instead of dropping
   below the taller image stack */
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto; gap: clamp(18px, 3vw, 36px); align-items: start }
@media (max-width: 900px) { .visit-grid { grid-template-columns: 1fr; grid-template-rows: none } }
.visit-card { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 1.5rem }
.visit-card h3 { font-family: var(--mono); font-size: .7rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--accent) }
.visit-card address { font-style: normal; display: grid; gap: .4rem; margin: 1rem 0 }
.visit-card address strong { font-family: var(--display); font-size: 1.2rem; letter-spacing: -.02em }
.visit-card address a { text-decoration: none; font-weight: 600 }
.visit-card address a:hover { text-decoration: underline }
/* the hours table reads like a column of measured values */
.hours { display: grid; gap: .2rem; margin-bottom: 1.2rem; border-top: 1px solid var(--line); padding-top: .9rem }
.hours li { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: var(--step--1); padding: .25rem 0; border-bottom: 1px dotted var(--line) }
.hours li.now { color: var(--accent); font-weight: 700 }
.visit-cta { display: flex; flex-wrap: wrap; gap: .7rem }
.visit-art { display: grid; gap: 14px; grid-row: 1 / -1 }
@media (max-width: 900px) { .visit-art { grid-row: auto } }
.visit-art img { border-radius: var(--r-sm); border: 1px solid var(--line-strong); box-shadow: var(--shadow); object-fit: cover; width: 100% }
.visit-art img:first-child { aspect-ratio: 16 / 10 }
.visit-art img:last-child { aspect-ratio: 16 / 9 }
/* a marker note on the sheet: the acid slip is a fixed pair in both themes, and the
   poster red only works on it — not the night coral */
.visit-perk {
  --text: var(--on-signal); --accent: var(--vermilion-deep);
  margin-top: 14px; background: var(--signal); color: var(--text);
  border: 1px dashed var(--vermilion); border-radius: var(--r-sm); padding: 1.4rem 1.5rem;
}
/* Pacifico's descenders drop below the line box and the global margin reset leaves no
   air between the two paragraphs, so the script line needs its own bottom room. */
.visit-perk .script { line-height: 1.1; padding-bottom: .3rem; margin-bottom: .6rem }
.visit-perk p:last-child { font-size: .9rem; max-width: 54ch; color: var(--text) }
.visit-perk:hover .script { animation: perk-pop .6s var(--ease-back) }
@keyframes perk-pop { 40% { transform: rotate(-2deg) scale(1.03) } }
@media (max-width: 900px) { .visit-perk { grid-column: 1 / -1 } }

/* ---------- slide-in panel ---------- */
.panel-root { position: fixed; inset: 0; z-index: var(--z-panel) }
.panel-scrim { position: absolute; inset: 0; background: rgba(8, 10, 14, .62); backdrop-filter: blur(2px); opacity: 0; transition: opacity .35s var(--ease) }
.panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(520px, 100%);
  background: var(--bg); border-left: 1px solid var(--line-strong);
  display: grid; grid-template-rows: auto 1fr auto; transform: translateX(100%);
  transition: transform .42s var(--ease);
}
.panel-root.open .panel-scrim { opacity: 1 }
.panel-root.open .panel { transform: none }
.panel-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line-strong) }
.panel-head h2 { font-size: var(--step-1); flex: 1 }
.panel-body { overflow-y: auto; padding: 1.2rem; display: grid; gap: .8rem; align-content: start }
.panel-body img { border-radius: var(--r-sm); border: 1px solid var(--edge); width: 100% }
.panel-body .display.xs { margin-top: .3rem }
.panel-foot { padding: 1rem 1.2rem; border-top: 1px solid var(--line-strong); background: var(--bg-alt); display: grid; gap: .6rem }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin-top: .6rem; font-size: .88rem }
.kv dt {
  color: var(--muted); font-family: var(--mono); font-size: var(--step--2); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
}
.kv dd { color: var(--text) }
.line-item { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem .8rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line) }
.line-item b { font-family: var(--display); letter-spacing: -.02em }
.line-item .alt { grid-column: 1; font-size: .78rem; color: var(--muted) }
.line-item .rm { color: var(--muted); font-size: .95rem; width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--edge) }
.line-item .rm:hover { background: var(--vermilion); color: #FFF6F2; border-color: var(--vermilion) }
.total { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 800; color: var(--accent); letter-spacing: -.02em }

/* ---------- tasting plan fab ---------- */
.order-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-fab);
  display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: var(--r-sm);
  background: var(--graphite); color: var(--paper); border: 1px solid rgba(232, 234, 239, .3);
  box-shadow: var(--shadow-lift); font-weight: 700; font-size: var(--step--2);
  letter-spacing: .12em; text-transform: uppercase;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
/* the graphite would vanish against the night bench, so the tag turns paper-white */
[data-theme="night"] .order-fab { background: #E8EAEF; color: #12161C; border-color: #E8EAEF }
.order-fab:hover { transform: translateY(-3px) }
.order-fab .ico { width: 20px; height: 20px; color: var(--signal) }
[data-theme="night"] .order-fab .ico { color: var(--vermilion) }
.order-fab span { font-family: var(--mono); background: var(--signal); color: var(--on-signal); border-radius: var(--r-sm); min-width: 24px; text-align: center; padding: .1rem .35rem }

/* ---------- footer ---------- */
.site-foot {
  --text: #E8EAEF; --muted: #99A1AE; --text-soft: #C3C9D3;
  --accent: var(--vermilion-on-dark); --line: rgba(232, 234, 239, .14); --gold-ink: #F0C24B;
  background: #12161C; color: var(--text);
  padding: clamp(40px, 6vw, 80px) var(--gutter) 24px; border-top: 2px solid var(--vermilion);
}
[data-theme="night"] .site-foot { background: #08090C; border-top-color: var(--signal-dim) }
.foot-grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: auto 1fr minmax(240px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr } }
/* the navy logo mark on graphite stock needs its own paper behind it or it disappears */
.foot-brand img { width: 92px; border-radius: var(--r-sm); padding: 6px; background: var(--paper); margin-bottom: .9rem; border: 1px solid rgba(232, 234, 239, .26) }
.tagline { font-family: var(--mono); font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--signal); font-size: .9rem }
.foot-brand .fine { color: var(--muted); margin-top: .4rem; max-width: 26ch }
.foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem }
@media (max-width: 560px) { .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.foot-links h3 { font-family: var(--mono); font-size: .66rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--signal); margin-bottom: .6rem }
.foot-links a { display: block; color: var(--text); text-decoration: none; font-size: .88rem; padding: .18rem 0 }
.foot-links a:hover { color: var(--signal); text-decoration: underline }
.foot-quote p { font-family: var(--script); font-size: 1.3rem; line-height: 1.5; color: var(--text) }
.foot-quote cite { display: block; font-style: normal; font-size: .8rem; color: var(--muted); margin-top: .7rem }
.foot-bottom { max-width: var(--maxw); margin: 2.4rem auto 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); text-align: center }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 160%); z-index: var(--z-toast);
  background: var(--graphite); color: var(--paper); border: 1px solid var(--signal-dim); border-radius: var(--r-sm);
  padding: .65rem 1.2rem; font-weight: 600; font-size: var(--step--1); box-shadow: var(--shadow-lift);
  transition: transform .4s var(--ease); max-width: min(90vw, 480px); text-align: center;
}
[data-theme="night"] .toast { background: #E8EAEF; color: #12161C; border-color: #E8EAEF }
.toast.show { transform: translate(-50%, 0) }