/* ─────────────────────────────────────────────────────────────
   drink.shoephone — Fern Street 110

   The printed menu is pure black and white: a heavy rule under a
   letterspaced cap, italic ingredient lines, and the shorthand set
   small and grey in the margin. This is that page after dark.

   Dark is the default because a menu gets read in a dim room. Light
   mode is not an inversion — it is the printed page, near enough to
   put the two side by side.

   One accent only. Brass carries every earned state: a filter that is
   on, a drink you can actually make, the count that goes up when you
   buy a bottle. Nothing else is allowed to be gold.
   ───────────────────────────────────────────────────────────── */

:root {
  --ground:  #121211;
  --sunk:    #232320;
  --bone:    #FBF8F1;
  --muted:   #ADA79C;
  --faint:   #837D72;
  --rule:    #403E39;
  --hair:    #2C2B27;
  --brass:   #E0B86B;
  --on-brass: #121211;
  --mark-bg: #FBF8F1;
  --mark-fg: #121211;

  --display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: 20px;
  --topbar-h: 52px;
  --tabbar-h: 58px;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground:  #FFFFFF;
    --sunk:    #FAF8F3;
    --bone:    #111110;
    --muted:   #73706A;
    --faint:   #A29E96;
    --rule:    #111110;
    --hair:    #E9E6E0;
    --brass:   #946200;
    --on-brass: #FFFFFF;
    --mark-bg: #121211;
    --mark-fg: #FFFFFF;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* An app shell, not a long page. The top rule and the tab bar are flex
   items in a viewport-tall column and #main is the only thing that
   scrolls. Fixed positioning is what let the tab bar drift: a fixed bar
   is anchored to a viewport the browser resizes out from under it every
   time the URL bar collapses, the keyboard opens, or a scroll-to-top
   jolts the chrome back in. In flow inside a dvh-tall shell there is
   nothing left for it to drift against. */
body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ground);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

#main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* Hold the scrollbar track open. A short view and a long one otherwise
     differ by a scrollbar's width, and everything centred — the tabs
     included — slides sideways as you move between them. */
  scrollbar-gutter: stable;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Top bar ──────────────────────────────────────────────── */

.topbar {
  flex: none;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--pad) 0;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}

.topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.topbar__mark { width: 22px; height: 22px; flex: none; }
.topbar__mark rect { fill: var(--mark-bg); }
.topbar__mark path { fill: var(--mark-fg); }

.topbar__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .07em;
  text-transform: lowercase;
  white-space: nowrap;
}

/* Back to the rest of shoephone. Sits quiet — it is a way out, not a
   destination the menu is competing with. */
.topbar__home {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.topbar__home:hover { color: var(--bone); }
.topbar__out { width: 9px; height: 9px; flex: none; }

/* ── Layout ───────────────────────────────────────────────── */

.view { max-width: 660px; margin: 0 auto; padding: 0 var(--pad) 40px; }

.loading {
  padding: 70px var(--pad);
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

noscript.fallback {
  padding: 24px var(--pad) 70px;
  max-width: 36em;
  color: var(--muted);
}
noscript.fallback a { color: var(--brass); }

/* ── Filters ──────────────────────────────────────────────── */

.filters {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  margin: 0 calc(var(--pad) * -1);
  padding: 12px var(--pad) 11px;
}

.seg {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}

.seg__b {
  flex: 1;
  appearance: none;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: 9px 4px;
  cursor: pointer;
}
.seg__b:last-child { border-right: 0; }
.seg__b.is-on { background: var(--bone); color: var(--ground); }

/* Four segments (All / Stirred / Shaken / Families) on a phone.
   Tracking drops a little so FAMILIES still sits on one line. */
.seg--wide .seg__b {
  letter-spacing: .11em;
  font-size: 10px;
  padding: 9px 2px;
}

.search {
  display: block;
  width: 100%;
  margin-top: 9px;
  appearance: none;
  background: var(--sunk);
  border: 1px solid var(--hair);
  border-radius: 2px;
  color: var(--bone);
  font-family: var(--body);
  font-size: 15px;
  padding: 9px 11px;
}
.search::placeholder { color: var(--faint); font-style: italic; }

.chips {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1px;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 6px 11px;
  white-space: nowrap;
  cursor: pointer;
}
.chip.is-on { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
.chip--pour.is-on { background: transparent; color: var(--brass); border-color: var(--brass); }

.filters__note {
  margin: 9px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--faint);
  text-transform: uppercase;
}
.filters__note b { color: var(--brass); font-weight: 500; }

/* ── Method + family headings ─────────────────────────────── */

.method { padding-top: 30px; }

.method__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

.method__rule {
  width: 96px;
  height: 7px;
  background: var(--bone);
  margin: 13px 0 11px;
}

.method__blurb {
  margin: 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--muted);
  max-width: 46ch;
}

.family {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 30px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.method > .family:first-of-type { border-top: 0; padding-top: 0; margin-top: 22px; }

/* Families view: drinks sit directly under the blurb, no spirit heading. */
.method__blurb + .drink { margin-top: 16px; }

/* ── A drink ──────────────────────────────────────────────── */

.drink {
  border-bottom: 1px solid var(--hair);
}

.drink__head {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* Full height of the row, left of the name. Decorative — the code
   already says which glass. */
.drink__glass {
  flex: 0 0 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  color: var(--bone);
  pointer-events: none;
}
.drink__glass svg {
  display: block;
  width: 100%;
  height: auto;
  color: inherit;
  overflow: visible;
}
/* A rocks glass is a short tumbler. Keep it in proportion to the
   Nick & Nora rather than stretching both to the same row height. */
.drink__glass--rocks svg {
  width: 75%;
}

.drink__text {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 13px 0;
}

.drink__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* The code is the thing this project is preserving, so it reads at full
   strength in the margin rather than sitting back as a grey note. */
.drink__code {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--bone);
  white-space: nowrap;
  align-self: start;
  padding-top: 2px;
}

.drink__line {
  grid-column: 1 / -1;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

/* A drink the bar can actually pour, once the shelf is filled in. */
.drink.is-pourable .drink__name { color: var(--brass); }
.drink.is-short .drink__name,
.drink.is-short .drink__line,
.drink.is-short .drink__glass { opacity: .42; }

.drink__missing {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--faint);
  text-transform: uppercase;
  padding-top: 3px;
}

/* ── Expanded recipe ──────────────────────────────────────── */

.recipe {
  padding: 3px 0 18px;
  border-top: 1px dashed var(--hair);
  margin-top: -1px;
}

/* Sub-tabs live inside the expanded drink, not in the app tab bar.
   Brass is the selected tab: a filter that is on. Taste and history
   copy stay in body ink. */
.recipe-tabs {
  display: flex;
  gap: 0;
  margin: 8px 0 10px;
  border-bottom: 1px solid var(--hair);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.recipe-tabs::-webkit-scrollbar { display: none; }

.recipe-tab {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 11px;
  cursor: pointer;
}
.recipe-tab.is-on {
  background: var(--brass);
  color: var(--on-brass);
}
.recipe-tab:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 2px;
}

.recipe-panel[hidden] { display: none; }

.recipe-copy {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bone);
  margin: 8px 0 0;
}

.kin__k {
  font-family: var(--display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 4px 0 0;
}

.kin__blurb {
  margin: 6px 0 12px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--muted);
  max-width: 46ch;
}

.kin-list { margin: 0; }

.kin-item {
  display: grid;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hair);
  color: inherit;
  text-align: left;
  padding: 10px 0;
  cursor: pointer;
  font: inherit;
}
.kin-item:last-of-type { border-bottom: 1px solid var(--hair); }
.kin-item:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 2px;
}

.kin-item__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
}

.kin-item__why {
  display: block;
  margin-top: 2px;
  font-style: italic;
  font-size: 13.5px;
  color: var(--muted);
}

.kin-more {
  display: block;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--brass);
  font-family: var(--display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 0 4px;
  cursor: pointer;
}
.kin-more:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 2px;
}

.recipe-refs {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.recipe-refs li + li { margin-top: 6px; }
.recipe-refs a {
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
}
.recipe-refs a:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

.pour {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 0 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.pour:last-of-type { border-bottom: 0; }

.pour__amt {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--bone);
  white-space: nowrap;
}
.pour__amt--none { color: var(--faint); }

.pour__ing { font-size: 14.5px; }
.pour__ing.is-out { color: var(--faint); text-decoration: line-through; }

.pour__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brass);
  margin-left: 7px;
}

.serve {
  margin-top: 13px;
  padding: 11px 13px;
  background: var(--sunk);
  border-left: 2px solid var(--brass);
}

.serve__row {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.serve__row + .serve__row { margin-top: 3px; }

/* A garnish you are short of reads like a pour you are short of. */
.serve__g.is-out { color: var(--faint); text-decoration: line-through; }

.serve__k {
  font-family: var(--display);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
  width: 62px;
  padding-top: 4px;
}

.empty {
  padding: 46px 0;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

/* Not "nothing here" but "your filters disagree" — it gets a way out. */
.empty--clash { padding: 38px 0; }
.empty--clash p { margin: 0 auto 15px; max-width: 34ch; }
.empty--clash b { color: var(--brass); font-style: normal; }

/* ── The generated menu ───────────────────────────────────── */

.tonight {
  padding: 26px 0 4px;
  border-bottom: 1px solid var(--rule);
}

.tonight__k {
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
}

.tonight__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -.02em;
  margin-top: 8px;
}

.tonight__of {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 7px;
}

.tonight__note {
  margin: 11px 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  max-width: 46ch;
}

.tonight__acts { display: flex; gap: 8px; margin: 15px 0 20px; flex-wrap: wrap; }

/* ── Bar ──────────────────────────────────────────────────── */

/* The count is the only reason to tick anything, so it does not scroll
   away. It rides the top of the shelf and goes up under your thumb as
   you stock bottles, which is the whole feeling this tab is selling. */
.tally {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
}

.tally__hit,
.tally__fig {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 62px;
  padding: 11px 0;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}
.tally__hit { cursor: pointer; }

.tally__n {
  flex: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.tally__of {
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

.tally__cta {
  flex: none;
  margin-left: auto;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
}

.tally__body { padding: 17px 0 2px; }

.tally__note {
  margin: 0;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  max-width: 48ch;
}

.tally__acts { display: flex; gap: 8px; margin-top: 15px; }

.btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 8px 13px;
  cursor: pointer;
}
.btn:hover { color: var(--bone); border-color: var(--muted); }

.shelf { margin-top: 26px; }

.shelf__h {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin: 0;
}

.shelf__blurb {
  margin: 3px 0 9px;
  font-size: 13px;
  font-style: italic;
  color: var(--faint);
}

.shelf__copy {
  margin: 0 0 14px;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.55;
}

.bottle { border-bottom: 1px solid var(--hair); }

.bottle__row {
  display: flex;
  align-items: stretch;
}

/* The box is the only stock control. Padding after it is the old gap
   between box and name, and also makes the tap target bigger than 17px. */
.bottle__stock {
  flex: none;
  display: flex;
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 11px 12px 11px 0;
  cursor: pointer;
  color: inherit;
}

.bottle__hit {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 11px 0;
  cursor: pointer;
}
.bottle:not(.has-note) .bottle__hit { padding-right: 44px; cursor: default; }

.bottle__box {
  flex: none;
  width: 17px;
  height: 17px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  position: relative;
}
.bottle.is-on > .bottle__row .bottle__box,
.brand.is-on .bottle__box { background: var(--brass); border-color: var(--brass); }
.bottle.is-on > .bottle__row .bottle__box::after,
.brand.is-on .bottle__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--on-brass);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.bottle__name { flex: 1; font-size: 15px; }
.bottle.is-on .bottle__name { font-weight: 700; }

.bottle__gain {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--brass);
  white-space: nowrap;
}
.bottle__gain--flat { color: var(--faint); }

.bottle__in {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.bottle__more {
  flex: none;
  width: 44px;
  align-self: stretch;
  position: relative;
  color: var(--faint);
}
.bottle.is-open .bottle__more { color: var(--brass); }
.bottle__more::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -5px 0 0 -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.bottle.is-open .bottle__more::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

.bottle__note {
  padding: 2px 0 16px 29px;
}

.bottle__copy {
  margin: 10px 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.55;
}

.brands { padding-bottom: 6px; }

.brands__tier {
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 12px 0 2px;
}
.brands__tier:first-child { margin-top: 2px; }

.brand { border-bottom: 1px solid var(--hair); }
.brand:last-child { border-bottom: 0; }

.brand__hit {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 8px 0;
  cursor: pointer;
}

.brand__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
}

.brand__meta {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

/* ── Key: the notation, named ─────────────────────────────── */

.sys { padding: 30px 0 4px; }

.sys__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0;
}

.sys__tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 11px;
}

.sys__lead {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}

.rules {
  list-style: none;
  counter-reset: rule;
  margin: 10px 0 0;
  padding: 0;
}

.rule {
  counter-increment: rule;
  position: relative;
  padding: 13px 0 13px 34px;
  border-bottom: 1px solid var(--hair);
}
.rule:last-child { border-bottom: 0; }

.rule::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--brass);
}

.rule__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rule__t {
  margin: 5px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
}

.lit {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--bone);
  background: var(--sunk);
  padding: 1px 4px;
  border-radius: 2px;
}

.sys__foot {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--sunk);
  border-left: 2px solid var(--brass);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Key ──────────────────────────────────────────────────── */

.key__lead {
  padding: 24px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}
.key__lead em { color: var(--bone); font-style: italic; }

.key__lead--tight { padding-top: 6px; font-size: 14.5px; }

.key__h {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin: 32px 0 2px;
  padding-top: 15px;
  border-top: 1px solid var(--rule);
}

.key__sub {
  margin: 0 0 8px;
  font-size: 13px;
  font-style: italic;
  color: var(--faint);
}

.def {
  display: grid;
  grid-template-columns: 52px 108px 1fr;
  gap: 0 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}

.def__c {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--brass);
}
.def__l { font-size: 14px; }
.def__g { font-size: 13px; font-style: italic; color: var(--faint); grid-column: 3; }

@media (max-width: 460px) {
  .def { grid-template-columns: 46px 1fr; }
  .def__g { grid-column: 2; padding-top: 2px; }
}

.example {
  margin-top: 16px;
  padding: 14px;
  background: var(--sunk);
  border-left: 2px solid var(--brass);
}

.example__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.example__c {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--brass);
  margin: 5px 0 10px;
}

.example__l {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.85;
  color: var(--muted);
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}

.colophon {
  margin-top: 36px;
  padding-top: 15px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  font-style: italic;
  color: var(--faint);
  line-height: 1.6;
}

.sign {
  margin: 14px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}
.sign a { color: var(--muted); border-bottom: 1px solid var(--hair); }
.sign a:hover { color: var(--brass); border-bottom-color: var(--brass); }

/* ── Tab bar ──────────────────────────────────────────────── */

.tabbar {
  flex: none;
  z-index: 40;
  display: flex;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ground);
  border-top: 1px solid var(--rule);
}

.tab {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--faint);
}
.tab.is-active { color: var(--bone); }

.tab__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tab__glyph { width: 17px; height: 17px; border: 1.5px solid currentColor; }
/* The three glyphs are drawn at different heights on purpose, so each
   reserves the same 17px box — otherwise the labels under them sit at
   three slightly different heights. */
.tab__glyph--menu { border-width: 1.5px 0; height: 13px; margin: 2px 0; }
.tab__glyph--bar {
  border: 0;
  border-bottom: 1.5px solid currentColor;
  box-shadow: inset 0 0 0 1.5px transparent;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 1.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 7.75px 0 / 1.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1.5px 100% no-repeat;
}
.tab__glyph--key {
  border-radius: 50% 50% 0 0;
  border-bottom-width: 0;
  height: 14px;
  margin: 1.5px 0;
}

.tab__count {
  position: absolute;
  top: 7px;
  left: 50%;
  margin-left: 6px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brass);
  color: var(--on-brass);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 17px;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .recipe, .bottle__note { animation: unfold .16s ease-out; }
  @keyframes unfold { from { opacity: 0; transform: translateY(-3px); } }

  /* Only when the number actually went up. A tick on every repaint is
     noise; a tick when a bottle just bought you three drinks is the
     point of the tab. */
  .tally__n.is-up { animation: tick .3s ease-out; }
  @keyframes tick { from { opacity: .3; transform: translateY(5px) scale(.82); } }
}

/* ── Print ────────────────────────────────────────────────────
   The point of the shelf filter is a menu you can hand someone, so it
   has to survive contact with paper. Force the light palette — a phone
   theme must never decide how much toner this costs — drop every piece
   of app chrome, and let the card layout carry it. */

@media print {
  :root {
    --ground: #FFFFFF;
    --sunk: #FFFFFF;
    --bone: #000000;
    --muted: #333333;
    --faint: #666666;
    --rule: #000000;
    --hair: #CCCCCC;
    --brass: #000000;
    --on-brass: #FFFFFF;
  }

  .topbar, .tabbar, .filters, .tonight__acts, .tally__acts,
  .drink__missing, .loading, .bottle__more, .shelf__copy,
  .recipe-tabs, .recipe-panel--taste, .recipe-panel--history, .recipe-panel--kin,
  .recipe-copy, .recipe-refs, .drink__glass { display: none !important; }

  /* Taste may be selected on screen; paper is still the pour list. */
  .recipe-panel--recipe { display: block !important; }

  /* The app shell is a viewport-tall box with one internal scroller.
     On paper there is no viewport, so unwind it back to normal flow or
     the printer gets one screenful and nothing after it. */
  body {
    display: block;
    height: auto;
    overflow: visible;
    padding: 0;
    font-size: 11pt;
  }
  #main {
    overflow: visible;
    min-height: 0;
    scrollbar-gutter: auto;
  }
  .tally { position: static; }
  .view { max-width: none; padding: 0; }

  .tonight { border-bottom: 3px solid #000; padding-top: 0; }
  .tonight__n { font-size: 34pt; }

  /* Never split a drink across a page break. */
  .drink, .method, .tonight { break-inside: avoid; }
  .family, .method__title { break-after: avoid; }
  .method { padding-top: 20pt; }

  .drink.is-pourable .drink__name { color: #000; }
  .drink__text { padding: 7pt 0; }

  /* On screen the code reads at full strength. On paper it goes back to
     the printed card, where the shorthand sits small and grey in the
     margin beside the drink rather than competing with it. */
  .drink__code { color: var(--faint); }

  a[href]::after { content: ""; }
}