@font-face {
  font-family: Libre Caslon Display;
  src: url("/fonts/libre-caslon-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: IBM Plex Sans;
  src: url("/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: IBM Plex Mono;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Phonetic Coverage;
  src: url("/fonts/noto-sans-phonetic.woff2") format("woff2");
  unicode-range: U+2C8, U+26A;
  size-adjust: 96.27%;
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #e8ddc9;
  --paper-raised: #f3ecdb;
  --paper-warm: color-mix(in srgb, var(--paper) 33%, var(--paper-raised));
  --paper-bright: #fcf9f1;
  --row-on: color-mix(in srgb, var(--bottle) 7%, transparent);
  --ink: #1a1712;
  --ink-soft: #5f5949;
  --rule: #cec3aa;
  --rule-strong: #857d68;
  --frame: #b3a488;
  --bottle: #1d3b2c;
  --bottle-bright: #2c5b44;
  --amber: #8d5318;
  --danger: #8c2b1f;
  --display: "Libre Caslon Display", Georgia, serif;
  --body: "IBM Plex Sans", "Phonetic Coverage", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --type-label: .72rem;
  --type-small: .85rem;
  --type-body: 1rem;
  --type-sub: 1.25rem;
  --type-wordmark: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  --type-title: clamp(2.3rem, 1.6rem + 2.8vw, 3.4rem);
  --leading-read: 1.55;
  --leading-row: 1.3;
  --leading-display: 1.1;
  --leading-read-snapped: round(var(--leading-read) * 1em, 1px);
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-1: 1px;
  --radius-2: 2px;
  --shadow-pop: 0 2px 5px rgba(40, 30, 15, .2), 0 12px 28px rgba(40, 30, 15, .16);
  --shadow-plate: inset 0 1px 0 rgba(255, 248, 236, .6), 0 2px 5px rgba(40, 30, 15, .28),
    0 12px 28px rgba(40, 30, 15, .15);
  --duration-1: .12s;
  --z-popover: 10;
  --z-nav: 20;
  --measure: 34rem;
  --shell: 54rem;
  --recipe-col: 19rem;
  --mono-ch: .6rem;
  --amount-unit-chars: 7;
  --note-col: 4.25rem;
  --label-col: max(calc(3rem + var(--space-4) + var(--amount-unit-chars) * var(--mono-ch)), var(--note-col));
  --arrangement-height: 18rem;
  --plot-height: 10rem;
  --bar-thickness: .6em;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  font-family: var(--body);
  font-size: 17px;
  line-height: var(--leading-read);
  color: var(--ink);
  background: var(--paper);
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--paper);
  background-image: var(--grain),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 22rem);
  background-blend-mode: multiply, normal;
  background-repeat: repeat, no-repeat;
  background-size: 220px 220px, auto;
  background-attachment: fixed, fixed;
  margin: 0;
}

a, .auth-link {
  color: var(--bottle);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  -webkit-text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
  text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
}

@media (hover: hover) {
  a:hover, .auth-link:hover {
    color: var(--bottle-bright);
    text-decoration-color: currentColor;
  }
}

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

::placeholder {
  color: var(--ink-soft);
}

.visually-hidden {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.muted {
  color: var(--ink-soft);
}

.error {
  color: var(--danger);
}

.page-title, .prose h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--type-title);
  line-height: var(--leading-display);
  letter-spacing: -.005em;
  overflow-wrap: anywhere;
  margin: 0 0 var(--space-20);
}

.page-view {
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-20);
  font-weight: 600;
}

.page-title:has( + .page-view) {
  margin-bottom: var(--space-8);
}

.editor-label {
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-16);
  font-weight: 600;
}

.editor-label-row {
  align-items: baseline;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
  flex-wrap: wrap;
  display: flex;
}

.editor-label-row > .editor-label {
  margin-bottom: 0;
}

.web-address-trigger {
  align-items: center;
  gap: var(--space-8);
  font-family: var(--body);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: var(--leading-row);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-soft);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  position: relative;
}

.web-address-trigger:before {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

@media (hover: hover) {
  .web-address-trigger:hover {
    color: var(--bottle);
  }
}

.web-address-panel {
  flex: 0 0 100%;
  margin: 0;
}

.web-address-panel > * {
  max-width: 22rem;
}

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

.web-address-derive {
  margin: var(--space-16) 0 0;
}

.version-tray + .web-address-derive {
  margin: var(--space-4) 0 var(--space-16);
}

h2, h3.section-head {
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: var(--space-40) 0 var(--space-16);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}

.ingredients-head, .results-head, .similar-head, .used-in-head {
  align-items: center;
  gap: var(--space-8) var(--space-16);
  margin: var(--space-40) 0 var(--space-16);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  display: flex;
}

.head-controls {
  align-items: center;
  gap: var(--space-8) var(--space-16);
  flex-wrap: wrap;
  display: flex;
}

.ingredients-head h2, .ingredients-head h3.section-head, .similar-head h2, .used-in-head h2 {
  border: 0;
  flex: none;
  margin: 0;
  padding: 0;
}

.prose {
  max-width: var(--measure);
}

.prose {
  max-width: var(--measure);
  margin: 0 0 var(--space-40);
}

.prose p {
  margin: 0 0 var(--space-28);
}

.prose p.lede {
  margin-bottom: var(--space-24);
}

.prose p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

.link-out {
  vertical-align: .18em;
  margin-left: .15em;
  font-size: .72em;
  display: inline-block;
}

.site-head .nav-menu > summary:after, .facet > summary:after, .menu-pick > summary:after, .crash-stack > summary:after, .dated-drinks > summary:after, .web-address-trigger:after, .tip-trigger:after, .taste-toggle:after, .filter-toggle:after, .dropdown-trigger:after {
  content: "";
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  width: 8px;
  height: 5px;
  transition: transform var(--duration-1) ease;
  background: currentColor;
}

.site-head .nav-menu[open] > summary:after, .facet[open] > summary:after, .menu-pick[open] > summary:after, .crash-stack[open] > summary:after, .dated-drinks[open] > summary:after, .web-address-trigger[aria-expanded="true"]:after, .tip-trigger[aria-expanded="true"]:after, .taste-toggle[aria-expanded="true"]:after, .filter-toggle.open:after, .dropdown-trigger[aria-expanded="true"]:after {
  transform: rotate(180deg);
}

.ornament {
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  margin: var(--space-16) 0 0;
  color: var(--bottle);
  display: flex;
}

.ornament-rule {
  background: var(--rule);
  flex: 1;
  height: 1px;
}

.ornament-rule:first-child {
  background: linear-gradient(to left, var(--rule) 55%, transparent);
}

.ornament-rule:last-child {
  background: linear-gradient(to right, var(--rule) 55%, transparent);
}

.ornament-mark {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.ornament-mark span {
  background: currentColor;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

.ornament-mark span:nth-child(2) {
  width: 8px;
  height: 8px;
}

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

.name-index li, .admin-index li {
  font-size: var(--type-body);
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  padding: 0;
  display: flex;
}

.name-index li > a, .admin-index li > a {
  padding-block: var(--space-4);
  min-inline-size: 24px;
}

.name-index a, .admin-index a {
  text-decoration: none;
}

.name-index a:focus-visible {
  color: var(--bottle-bright);
  text-decoration: underline;
}

.admin-index a:focus-visible {
  color: var(--bottle-bright);
  text-decoration: underline;
}

@media (hover: hover) {
  .name-index a:hover, .admin-index a:hover {
    color: var(--bottle-bright);
    text-decoration: underline;
  }
}

.name-qualifier {
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.name-index a:focus-visible .name-qualifier {
  color: inherit;
}

@media (hover: hover) {
  .name-index a:hover .name-qualifier {
    color: inherit;
  }
}

.catalog-picker-results li.is-active .name-qualifier, .site-head nav .site-search-results a.is-active .name-qualifier {
  color: inherit;
}

.dropdown-menu button:focus-visible .name-qualifier {
  color: inherit;
}

@media (hover: hover) {
  .check:hover .name-qualifier, .bar-item:hover .name-qualifier, .shelf-line:hover .name-qualifier, .dropdown-menu button:hover .name-qualifier, .site-head nav .site-search-results a:hover .name-qualifier {
    color: inherit;
  }
}

.row-note {
  font-size: var(--type-small);
  color: var(--ink-soft);
  margin-inline-start: var(--space-8);
}

.name-index.columned {
  columns: 3 13rem;
  column-gap: var(--space-28);
}

.name-index.columned li {
  break-inside: avoid;
}

.results .name-index.annotated {
  max-width: var(--measure);
}

.name-index.annotated li {
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
}

.name-index.annotated li > a {
  padding-block: var(--space-8) 0;
}

.name-index.annotated li:not(:has(.diff)) > a {
  padding-block: var(--space-8);
}

.name-index.annotated .diff {
  padding-bottom: var(--space-8);
  font-size: var(--type-small);
  color: var(--ink-soft);
  flex-basis: 100%;
}

.admin-index {
  margin: var(--space-8) 0 var(--space-24);
  font-size: var(--type-body);
  padding: 0;
  list-style: none;
}

.admin-index.columned {
  columns: 3 13rem;
  column-gap: var(--space-28);
}

.admin-index li {
  break-inside: avoid;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--bottle);
  cursor: pointer;
  margin: 0;
}

.check, .bar-item, .shelf-line, .standing-toggle {
  align-items: start;
  gap: var(--space-8);
  padding: var(--space-4) 0;
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink);
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr);
  display: grid;
  position: relative;
}

.check > input[type="checkbox"] {
  font: inherit;
  line-height: var(--leading-read);
  margin-block-start: calc(.5lh - 9px);
}

.bar-item > input[type="checkbox"] {
  font: inherit;
  line-height: var(--leading-read);
  margin-block-start: calc(.5lh - 9px);
}

.shelf-line > input[type="checkbox"] {
  font: inherit;
  line-height: var(--leading-read);
  margin-block-start: calc(.5lh - 9px);
}

.standing-toggle > input[type="checkbox"] {
  font: inherit;
  line-height: var(--leading-read);
  margin-block-start: calc(.5lh - 9px);
}

@media (hover: hover) {
  .check:hover, .bar-item:hover, .shelf-line:hover, .standing-toggle:hover {
    color: var(--bottle);
  }
}

.shelf-line:not(:has( > input:disabled)):after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.standing-toggle:not(.standing-row *):not(:has( > input:disabled)):after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.facet-menu .check {
  padding-inline: var(--space-8);
  border-radius: var(--radius-2);
  flex: 1;
}

.facet-menu .check.marked {
  grid-template-columns: auto auto minmax(0, 1fr);
}

@media (hover: hover) {
  .facet-menu .check:hover {
    background: var(--row-on);
  }
}

.standing-toggle {
  width: fit-content;
  color: var(--ink-soft);
}

.standing-toggle:has( > input:checked) {
  color: var(--bottle);
}

.check:has( > input[type="checkbox"]:disabled) {
  cursor: default;
  color: var(--ink-soft);
}

.bar-item:has( > input[type="checkbox"]:disabled) {
  cursor: default;
  color: var(--ink-soft);
}

.shelf-line:has( > input[type="checkbox"]:disabled) {
  cursor: default;
  color: var(--ink-soft);
}

.standing-toggle:has( > input[type="checkbox"]:disabled) {
  cursor: default;
  color: var(--ink-soft);
}

.check > input[type="checkbox"]:disabled {
  cursor: default;
  opacity: .45;
}

.bar-item > input[type="checkbox"]:disabled {
  cursor: default;
  opacity: .45;
}

.shelf-line > input[type="checkbox"]:disabled {
  cursor: default;
  opacity: .45;
}

.standing-toggle > input[type="checkbox"]:disabled {
  cursor: default;
  opacity: .45;
}

.standing-row {
  align-items: start;
  gap: var(--space-8) var(--space-24);
  margin-top: var(--space-16);
  flex-wrap: wrap;
  display: flex;
}

.filter-hint {
  max-width: var(--measure);
  margin: var(--space-4) 0 0;
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.chips {
  gap: var(--space-8);
  margin-top: var(--space-16);
  flex-wrap: wrap;
  display: flex;
}

.chip {
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  cursor: pointer;
  align-items: center;
  display: inline-flex;
}

@media (hover: hover) {
  .chip:hover {
    border-color: var(--bottle);
  }

  .chip:hover .chip-x {
    color: var(--ink);
  }
}

.chip .chip-op {
  color: var(--ink-soft);
  margin-inline-end: var(--space-4);
}

.chip .chip-x {
  color: var(--ink-soft);
  font-size: var(--type-body);
  block-size: 1em;
  inline-size: 1em;
  margin-inline-start: var(--space-8);
  display: inline-block;
}

.chip.exclude .chip-name {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.chip.clear {
  color: var(--ink-soft);
  border-style: dashed;
}

.dropdown {
  max-width: 100%;
  display: inline-block;
  position: relative;
}

.dropdown-trigger {
  max-width: 100%;
  padding: 0 var(--space-24) 0 0;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  text-align: start;
  cursor: pointer;
  background: none;
  margin: 0;
  position: relative;
}

@media (hover: hover) {
  .dropdown-trigger:hover {
    border-bottom-color: var(--bottle);
  }
}

.dropdown-trigger:after {
  top: 50%;
  right: var(--space-4);
  background: var(--ink-soft);
  pointer-events: none;
  margin-top: -2.5px;
  position: absolute;
}

.dropdown-menu {
  top: calc(100% + var(--space-8));
  z-index: var(--z-popover);
  width: max-content;
  min-width: 100%;
  max-width: min(22rem, calc(100vw - var(--space-40)));
  padding: var(--space-4) 0;
  background: var(--paper-raised);
  border: 1px solid var(--frame);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
  position: absolute;
  left: 0;
}

.dropdown-list {
  overscroll-behavior: contain;
  max-height: 18rem;
  overflow-y: auto;
}

.dropdown-menu .popover-head {
  padding-inline: var(--space-16);
}

.dropdown-list .taxonomy-tree li > button {
  flex: 1;
}

.popover-head {
  padding: var(--space-4) var(--space-8) var(--space-8);
}

.popover-filter {
  margin: 0;
  display: flex;
}

.popover-head .popover-filter input[type="search"] {
  inline-size: 100%;
  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-28);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background-color: rgba(0, 0, 0, 0);
}

.popover-filter input:focus-visible {
  border-bottom-color: var(--amber);
  outline: none;
}

.facet-menu:has(.popover-head) {
  width: min(22rem, calc(100vw - var(--space-40)));
}

.dropdown-menu:has(.popover-head) {
  width: min(22rem, calc(100vw - var(--space-40)));
}

.facet-list .section-note {
  padding-inline: var(--space-8);
}

.dropdown-list .section-note {
  padding-inline: var(--space-16);
}

.dropdown-menu button {
  width: 100%;
  padding: var(--space-4) var(--space-16);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-small);
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  background: none;
  border: 0;
  display: block;
  overflow: hidden;
}

.dropdown-menu button:focus-visible {
  background: var(--row-on);
  color: var(--bottle);
}

@media (hover: hover) {
  .dropdown-menu button:hover {
    background: var(--row-on);
    color: var(--bottle);
  }
}

.dropdown-menu button.selected {
  color: var(--bottle);
  text-underline-offset: .18em;
  text-decoration: underline;
}

.dropdown-menu button.marked {
  align-items: center;
  gap: var(--space-8);
  padding-left: var(--space-12);
  display: flex;
}

.dropdown-mark {
  flex: 0 0 1.35rem;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.dropdown-mark > .glass-mark {
  block-size: 1.35em;
  inline-size: 1.35em;
  color: var(--ink);
}

.dropdown-trigger .dropdown-mark {
  margin-right: var(--space-8);
  vertical-align: -.2em;
  flex: none;
}

.facet-mark {
  flex: 0 0 1.35rem;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.facet-mark > .glass-mark {
  block-size: 1.35em;
  inline-size: 1.35em;
  color: var(--ink);
}

.editor textarea {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background: none;
  border-radius: 0;
  padding: 0;
}

.editor input[type="text"] {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background: none;
  border-radius: 0;
  padding: 0;
}

.editor input[type="search"] {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background: none;
  border-radius: 0;
  padding: 0;
}

.editor input[type="password"] {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background: none;
  border-radius: 0;
  padding: 0;
}

.editor input[type="email"] {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background: none;
  border-radius: 0;
  padding: 0;
}

.editor textarea {
  resize: vertical;
}

.editor textarea:focus {
  border-bottom-color: var(--amber);
  outline: none;
}

.editor input:not([type="checkbox"]):focus {
  border-bottom-color: var(--amber);
  outline: none;
}

.field {
  gap: var(--space-4);
  flex-direction: column;
  margin: 0;
  display: flex;
}

.field-label {
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.field-hint {
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.field-hint.flawed {
  color: var(--danger);
}

.auth input[type="text"] {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background: none;
  border-radius: 0;
  padding: 0;
}

.auth input[type="password"] {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background: none;
  border-radius: 0;
  padding: 0;
}

.auth input:not([type="checkbox"]):focus {
  border-bottom-color: var(--amber);
  outline: none;
}

input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
  background-color: var(--ink-soft);
  cursor: pointer;
  block-size: 24px;
  inline-size: 24px;
  margin: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (hover: hover) {
  input[type="search"]::-webkit-search-cancel-button:hover {
    background-color: var(--ink);
  }
}

.editor textarea.blank {
  border-bottom-style: dashed;
}

.editor input[type="text"].blank {
  border-bottom-style: dashed;
}

.editor input[type="search"].blank {
  border-bottom-style: dashed;
}

.editor input[type="password"].blank {
  border-bottom-style: dashed;
}

.auth input[type="text"].blank {
  border-bottom-style: dashed;
}

.auth input[type="password"].blank {
  border-bottom-style: dashed;
}

.dropdown-trigger.unset {
  color: var(--ink-soft);
  border-bottom-style: dashed;
}

.editor .picker-field:not(:has(.chip)):has(input.blank) {
  border-bottom-style: dashed;
}

.editor input.flawed, .editor textarea.flawed, .editor input.flawed:focus, .editor textarea.flawed:focus, .editor .dropdown-trigger.flawed, .editor .dropdown-trigger.flawed:focus {
  border-bottom: 2px solid var(--danger);
}

.editor h3.flawed, .editor .recipe-notes dt.flawed {
  color: var(--danger);
}

.flawed {
  scroll-margin-top: var(--space-64);
}

.catalog-picker {
  margin: var(--space-8) 0 var(--space-16);
  min-width: 0;
  max-width: 20rem;
  position: relative;
}

.catalog-picker input {
  width: 100%;
}

.catalog-picker-tokens {
  max-width: 30rem;
}

.picker-field {
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-28);
  border-bottom: 1px solid var(--rule-strong);
  cursor: text;
  scroll-margin-top: var(--space-12);
  flex-wrap: wrap;
  display: flex;
  position: relative;
}

.picker-field:before {
  content: "";
  left: var(--space-4);
  top: var(--space-12);
  block-size: 1.05em;
  inline-size: 1.05em;
  position: absolute;
}

.picker-field:focus-within {
  border-bottom-color: var(--amber);
}

.picker-field input::-webkit-search-cancel-button {
  display: none;
}

.catalog-picker .picker-field input {
  width: auto;
  min-width: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background: none;
  border: 0;
  flex: 9rem;
  padding: 0;
}

.picker-field input:focus {
  outline: none;
}

.picker-field .chip {
  font-size: var(--type-small);
  padding: var(--space-4) var(--space-8);
}

.catalog-picker-results {
  z-index: var(--z-popover);
  padding: var(--space-4) 0;
  background: var(--paper-raised);
  border: 1px solid var(--frame);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
  margin: 0;
  list-style: none;
  position: absolute;
  left: 0;
  right: 0;
}

.catalog-picker-results li {
  padding: var(--space-4) var(--space-12);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-small);
  cursor: pointer;
}

.catalog-picker-results li.is-active {
  background: var(--row-on);
  color: var(--bottle);
}

.catalog-picker-offer .catalog-picker-none {
  color: var(--ink-soft);
  line-height: var(--leading-read);
  display: block;
}

.catalog-picker-offer .personal-action {
  width: fit-content;
  padding-block: var(--space-4);
  display: block;
}

@media (hover: hover) {
  .catalog-picker-offer .personal-action:hover {
    color: var(--bottle);
    text-decoration: none;
  }
}

.recipe-notes .catalog-picker {
  max-width: none;
  margin: 0;
}

.recipe-notes .catalog-picker-tokens {
  max-width: none;
}

.recipe-notes .picker-field {
  padding: 0 var(--space-4) var(--space-4) 0;
  border-bottom-width: 1px;
}

.recipe-notes .picker-field:before {
  content: none;
}

.editor .recipe-notes .picker-field input {
  font-size: var(--type-body);
  flex: 7rem;
}

.status-line {
  min-height: round(up, var(--leading-read) * 1em, 1px);
  margin: var(--space-8) 0 0;
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.menu-hold-status {
  min-height: 0;
}

.status-line.error {
  color: var(--danger);
}

.save-row .status-line {
  flex: 1;
  min-height: 0;
  margin: 0;
}

@media screen and (width <= 34rem) {
  .save-row .status-line {
    min-height: round(up, var(--leading-read) * 1em, 1px);
    flex-basis: 100%;
  }
}

.personal-action, .personal-disclosure {
  font-family: var(--body);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: var(--leading-row);
  letter-spacing: normal;
  text-transform: none;
  color: var(--bottle);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: none;
  position: relative;
}

.personal-action:after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

@media (hover: hover) {
  .personal-action:hover, .personal-disclosure:hover {
    color: var(--bottle-bright);
    text-underline-offset: 3px;
    text-decoration: underline;
  }
}

.personal-disclosure {
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
}

.personal-disclosure::-webkit-details-marker {
  display: none;
}

.personal-disclosure:before {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.button-primary {
  appearance: none;
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--bottle);
  border-radius: var(--radius-2);
  background: var(--bottle);
  color: var(--paper-raised);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  cursor: pointer;
}

.button-primary:active {
  background: var(--bottle-bright);
  border-color: var(--bottle-bright);
}

@media (hover: hover) {
  .button-primary:hover {
    background: var(--bottle-bright);
    border-color: var(--bottle-bright);
  }
}

.button-primary:disabled {
  opacity: .6;
  cursor: default;
}

.button-destructive {
  appearance: none;
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  color: var(--danger);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  cursor: pointer;
  background: none;
}

.button-destructive:active, .button-destructive[aria-disabled="true"], .button-destructive.armed {
  border-color: var(--danger);
}

@media (hover: hover) {
  .button-destructive:hover {
    border-color: var(--danger);
  }
}

.button-destructive.armed {
  background: var(--danger);
  color: var(--paper-raised);
  transition: background-color var(--duration-1) ease,
    color var(--duration-1) ease;
}

.button-secondary {
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  cursor: pointer;
  background: none;
  text-decoration: none;
  display: inline-block;
}

.button-secondary:active {
  border-color: var(--bottle);
  color: var(--bottle);
}

@media (hover: hover) {
  .button-secondary:hover {
    border-color: var(--bottle);
    color: var(--bottle);
  }
}

.button-secondary:disabled {
  opacity: .35;
  cursor: default;
}

.auth-primary {
  appearance: none;
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--bottle);
  border-radius: var(--radius-2);
  background: var(--bottle);
  color: var(--paper-raised);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  cursor: pointer;
}

.auth-primary:active {
  background: var(--bottle-bright);
  border-color: var(--bottle-bright);
}

@media (hover: hover) {
  .auth-primary:hover {
    background: var(--bottle-bright);
    border-color: var(--bottle-bright);
  }
}

.auth-primary:disabled {
  opacity: .6;
  cursor: default;
}

.auth-link {
  font-family: var(--body);
  font-size: var(--type-small);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-decoration-line: underline;
  position: relative;
}

.auth-link:after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.icon-button {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  min-width: 28px;
  min-height: 28px;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  cursor: pointer;
  background: none;
}

.icon-button:active:not(:disabled) {
  border-color: var(--bottle);
  color: var(--bottle);
}

@media (hover: hover) {
  .icon-button:hover:not(:disabled) {
    border-color: var(--bottle);
    color: var(--bottle);
  }
}

.icon-button:disabled {
  opacity: .35;
  cursor: default;
}

.confirm-consequence {
  box-sizing: border-box;
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
  flex-basis: 100%;
  order: 10;
  grid-column: 1 / -1;
  margin: 0;
  padding-inline-end: max(0px, calc(100% - var(--measure)));
  display: block;
}

.confirm-consequence:not(.armed) {
  position: absolute;
}

.closing-zone > .confirm-consequence, .auth-rows li > .confirm-consequence, .admin-user-row > .confirm-consequence, .admin-unit-row > .confirm-consequence, .search-row > .confirm-consequence, .crash-head > .confirm-consequence {
  text-align: end;
  padding-inline: max(0px, calc(100% - var(--measure))) 0;
}

.file-row {
  align-items: center;
  column-gap: var(--space-12);
  row-gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.file-picker {
  position: relative;
}

.file-picker:has(input:focus-visible) {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}

.file-picker:after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.file-name {
  min-width: 0;
  font-size: var(--type-small);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  margin: 0;
}

.mount {
  --mat: .03;
  background: var(--paper-raised);
  border: 1px solid var(--frame);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-plate);
  margin: 0;
  padding: 0;
  display: flow-root;
}

.mount > * {
  margin: calc(var(--mat) * 100%);
}

.mount > img {
  width: calc(100% * (1 - 2 * var(--mat)));
  border-radius: var(--radius-1);
  height: auto;
  display: block;
}

.recipe-plate {
  margin: 0;
}

.recipe-photo {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.draft-near {
  border-left: 2px solid var(--rule);
  padding-left: var(--space-16);
  margin-top: var(--space-28);
  font-family: var(--body);
}

.draft-near-lede {
  font-size: var(--type-small);
  color: var(--ink-soft);
  margin: 0;
}

.draft-near-name {
  margin: var(--space-4) 0 0;
  font-family: var(--display);
  font-size: var(--type-sub);
  line-height: var(--leading-display);
  color: var(--ink);
}

.draft-near-name .diff {
  font-family: var(--body);
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.draft-near-acts {
  align-items: flex-start;
  gap: var(--space-28);
  margin: var(--space-20) 0 0;
  flex-direction: column;
  display: flex;
}

.auth-warning {
  border-left: 2px solid var(--ink-soft);
  padding-left: var(--space-16);
}

.restored-draft {
  border-left: 2px solid var(--ink-soft);
  padding-left: var(--space-16);
  margin-bottom: var(--space-20);
  font-family: var(--body);
  font-size: var(--type-small);
  color: var(--ink-soft);
  flex: 1 0 100%;
  display: block;
}

.restored-draft p {
  max-width: var(--measure);
  margin: 0;
}

.restored-draft:empty {
  clip-path: inset(50%);
  border-left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding-left: 0;
  position: absolute;
  overflow: hidden;
}

.auth-warning:empty {
  border-left: 0;
  margin: 0;
  padding-left: 0;
}

.empty {
  margin: var(--space-40) 0 0;
  padding-top: var(--space-16);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

.section-note {
  font-size: var(--type-small);
  color: var(--ink-soft);
  margin: 0;
}

.section-note:has( + ul) {
  margin-block-end: var(--space-16);
}

.glass-mark, .mark, .picker-field:before, .site-search:before, .site-search.is-expanded:after, .browse-search:before, .popover-filter:before {
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.picker-field:before {
  background-color: var(--ink-soft);
}

.glass-mark--champagne-flute {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 12 2 9.765 2.016 c 0 0 -0.76 5.509 -0.165 7.885 0.6 2.398 1.52 2.641 1.845 3.587 0.227 0.662 0.166 1.931 0.165 2.931 0 1.745 -0.075 4.006 -0.493 4.398 -0.418 0.393 -2.431 0.341 -2.431 0.821 0 0.381 3.298 0.363 3.298 0.363 0 0 0.005 0 0.016 0 0.011 0 0.016 0 0.016 0 0 0 3.298 0.018 3.298 -0.363 0 -0.48 -2.012 -0.428 -2.431 -0.821 -0.418 -0.392 -0.493 -2.653 -0.493 -4.398 -0.001 -1 -0.062 -2.269 0.165 -2.931 0.325 -0.945 1.245 -1.189 1.845 -3.587 C 14.995 7.524 14.235 2.016 14.235 2.016 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 12 2 9.765 2.016 c 0 0 -0.76 5.509 -0.165 7.885 0.6 2.398 1.52 2.641 1.845 3.587 0.227 0.662 0.166 1.931 0.165 2.931 0 1.745 -0.075 4.006 -0.493 4.398 -0.418 0.393 -2.431 0.341 -2.431 0.821 0 0.381 3.298 0.363 3.298 0.363 0 0 0.005 0 0.016 0 0.011 0 0.016 0 0.016 0 0 0 3.298 0.018 3.298 -0.363 0 -0.48 -2.012 -0.428 -2.431 -0.821 -0.418 -0.392 -0.493 -2.653 -0.493 -4.398 -0.001 -1 -0.062 -2.269 0.165 -2.931 0.325 -0.945 1.245 -1.189 1.845 -3.587 C 14.995 7.524 14.235 2.016 14.235 2.016 Z'/%3E %3C/svg%3E");
}

.glass-mark--collins-glass {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 12 2 c 0 0 -2.877 0.014 -3.845 0.348 -0.099 0.034 -0.097 0.166 -0.097 0.166 L 8.569 21.474 c 0.019 0.533 3.431 0.526 3.431 0.526 0 0 3.412 0.008 3.431 -0.526 L 15.941 2.514 c 0 0 0.002 -0.132 -0.097 -0.166 C 14.877 2.014 12 2 12 2 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 12 2 c 0 0 -2.877 0.014 -3.845 0.348 -0.099 0.034 -0.097 0.166 -0.097 0.166 L 8.569 21.474 c 0.019 0.533 3.431 0.526 3.431 0.526 0 0 3.412 0.008 3.431 -0.526 L 15.941 2.514 c 0 0 0.002 -0.132 -0.097 -0.166 C 14.877 2.014 12 2 12 2 Z'/%3E %3C/svg%3E");
}

.glass-mark--copper-mug {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 9.096 3.795 C 9.096 3.795 1.896 3.891 1.272 4.131 C 0.648 4.371 0.6 4.899 1.032 5.523 C 0.456 7.347 0 8.715 0 12.075 C 0 15.435 0.506 18.65 1.56 20.475 C 2.614 22.301 2.088 21.423 2.4 21.867 C 3.672 22.059 9.096 21.987 9.096 21.987 C 9.096 21.987 14.52 22.059 15.792 21.867 C 15.868 21.759 15.898 21.727 15.909 21.717 L 15.912 21.714 L 15.915 21.714 L 15.918 21.711 L 15.921 21.708 C 15.942 21.681 16.02 21.535 16.557 20.604 C 17.411 20.424 18.666 20.181 19.08 20.211 C 19.728 20.259 22.296 21.747 22.296 21.747 C 22.296 21.747 24 17.571 24 12.819 C 24 8.067 22.944 6.195 22.944 6.195 C 22.944 6.195 20.304 7.635 19.968 7.635 C 19.748 7.635 18.435 7.15 17.556 6.816 C 17.434 6.388 17.301 5.97 17.16 5.523 C 17.592 4.899 17.544 4.371 16.92 4.131 C 16.296 3.891 9.096 3.795 9.096 3.795 z M 21.87 8.448 C 21.979 8.446 22.068 8.467 22.128 8.523 C 22.512 8.883 22.632 11.139 22.608 13.731 C 22.585 16.283 21.629 19.624 21.462 19.773 L 21.462 19.776 L 21.459 19.776 L 21.459 19.779 L 21.456 19.779 C 21.285 19.808 19.296 18.651 19.296 18.651 L 18.672 19.131 L 17.367 18.717 C 17.923 16.903 18.192 14.528 18.192 12.075 C 18.192 10.964 18.142 10.07 18.054 9.306 C 18.351 9.144 18.664 8.999 18.864 8.979 C 19.344 8.931 20.136 9.195 20.136 9.195 C 20.136 9.195 21.282 8.462 21.87 8.448 z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 9.096 3.795 C 9.096 3.795 1.896 3.891 1.272 4.131 C 0.648 4.371 0.6 4.899 1.032 5.523 C 0.456 7.347 0 8.715 0 12.075 C 0 15.435 0.506 18.65 1.56 20.475 C 2.614 22.301 2.088 21.423 2.4 21.867 C 3.672 22.059 9.096 21.987 9.096 21.987 C 9.096 21.987 14.52 22.059 15.792 21.867 C 15.868 21.759 15.898 21.727 15.909 21.717 L 15.912 21.714 L 15.915 21.714 L 15.918 21.711 L 15.921 21.708 C 15.942 21.681 16.02 21.535 16.557 20.604 C 17.411 20.424 18.666 20.181 19.08 20.211 C 19.728 20.259 22.296 21.747 22.296 21.747 C 22.296 21.747 24 17.571 24 12.819 C 24 8.067 22.944 6.195 22.944 6.195 C 22.944 6.195 20.304 7.635 19.968 7.635 C 19.748 7.635 18.435 7.15 17.556 6.816 C 17.434 6.388 17.301 5.97 17.16 5.523 C 17.592 4.899 17.544 4.371 16.92 4.131 C 16.296 3.891 9.096 3.795 9.096 3.795 z M 21.87 8.448 C 21.979 8.446 22.068 8.467 22.128 8.523 C 22.512 8.883 22.632 11.139 22.608 13.731 C 22.585 16.283 21.629 19.624 21.462 19.773 L 21.462 19.776 L 21.459 19.776 L 21.459 19.779 L 21.456 19.779 C 21.285 19.808 19.296 18.651 19.296 18.651 L 18.672 19.131 L 17.367 18.717 C 17.923 16.903 18.192 14.528 18.192 12.075 C 18.192 10.964 18.142 10.07 18.054 9.306 C 18.351 9.144 18.664 8.999 18.864 8.979 C 19.344 8.931 20.136 9.195 20.136 9.195 C 20.136 9.195 21.282 8.462 21.87 8.448 z'/%3E %3C/svg%3E");
}

.glass-mark--coupe {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 6.113 1.999 c 0 0 -0.813 1.235 -0.849 2.412 C 5.206 6.294 6.716 7.131 9.26 9.111 12 11.243 11.189 18.077 11.141 19.244 c -0.063 1.524 -3.959 1.381 -3.956 2.045 0.001 0.316 0.307 0.764 4.815 0.704 4.51 0.06 4.815 -0.388 4.815 -0.704 0.003 -0.664 -3.895 -0.521 -3.956 -2.045 C 12.811 18.077 12 11.243 14.74 9.111 17.284 7.131 18.794 6.294 18.736 4.411 18.7 3.234 17.887 1.999 17.887 1.999 H 12 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 6.113 1.999 c 0 0 -0.813 1.235 -0.849 2.412 C 5.206 6.294 6.716 7.131 9.26 9.111 12 11.243 11.189 18.077 11.141 19.244 c -0.063 1.524 -3.959 1.381 -3.956 2.045 0.001 0.316 0.307 0.764 4.815 0.704 4.51 0.06 4.815 -0.388 4.815 -0.704 0.003 -0.664 -3.895 -0.521 -3.956 -2.045 C 12.811 18.077 12 11.243 14.74 9.111 17.284 7.131 18.794 6.294 18.736 4.411 18.7 3.234 17.887 1.999 17.887 1.999 H 12 Z'/%3E %3C/svg%3E");
}

.glass-mark--footed-pilsner {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 12 2 C 12 2 9.083 2.007 8.933 2.047 C 8.731 2.1 8.7 2.125 8.745 2.501 L 10.521 17.419 C 10.545 17.615 10.952 17.729 11.104 17.755 C 11.264 17.782 11.316 17.811 11.331 17.9 C 11.46 18.664 11.504 20.178 11.28 20.365 C 10.873 20.705 8.913 21.041 8.913 21.401 C 8.913 21.761 10.048 22 12 22 C 13.952 22 15.087 21.761 15.087 21.401 C 15.087 21.041 13.127 20.705 12.72 20.365 C 12.496 20.178 12.54 18.664 12.669 17.9 C 12.684 17.811 12.736 17.782 12.896 17.755 C 13.048 17.729 13.455 17.615 13.479 17.419 L 15.255 2.501 C 15.3 2.125 15.269 2.1 15.067 2.047 C 14.917 2.007 12 2 12 2 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 12 2 C 12 2 9.083 2.007 8.933 2.047 C 8.731 2.1 8.7 2.125 8.745 2.501 L 10.521 17.419 C 10.545 17.615 10.952 17.729 11.104 17.755 C 11.264 17.782 11.316 17.811 11.331 17.9 C 11.46 18.664 11.504 20.178 11.28 20.365 C 10.873 20.705 8.913 21.041 8.913 21.401 C 8.913 21.761 10.048 22 12 22 C 13.952 22 15.087 21.761 15.087 21.401 C 15.087 21.041 13.127 20.705 12.72 20.365 C 12.496 20.178 12.54 18.664 12.669 17.9 C 12.684 17.811 12.736 17.782 12.896 17.755 C 13.048 17.729 13.455 17.615 13.479 17.419 L 15.255 2.501 C 15.3 2.125 15.269 2.1 15.067 2.047 C 14.917 2.007 12 2 12 2 Z'/%3E %3C/svg%3E");
}

.glass-mark--highball-glass {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 12 2 C 12 2 8.423 2.014 7.22 2.348 C 7.097 2.382 7.1 2.514 7.1 2.514 L 7.734 21.474 C 7.758 22.008 12 22 12 22 C 12 22 16.242 22.008 16.266 21.474 L 16.9 2.514 C 16.9 2.514 16.903 2.382 16.78 2.348 C 15.577 2.014 12 2 12 2 z M 11.988 7.012 C 12.079 7.877 12.1 14.009 12.1 14.009 C 12.1 14.009 12.095 20.474 11.988 20.968 C 11.909 20.462 11.9 14.032 11.9 14.032 C 11.9 14.032 11.91 7.885 11.988 7.012 z M 9.407 7.531 C 9.497 8.355 9.496 14.222 9.496 14.222 C 9.496 14.222 9.514 20.339 9.407 20.81 C 9.327 20.328 9.357 14.222 9.357 14.222 C 9.357 14.222 9.329 8.362 9.407 7.531 z M 14.556 7.622 C 14.646 8.446 14.645 14.315 14.645 14.315 C 14.645 14.315 14.663 20.432 14.556 20.903 C 14.476 20.421 14.506 14.315 14.506 14.315 C 14.506 14.315 14.478 8.453 14.556 7.622 z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 12 2 C 12 2 8.423 2.014 7.22 2.348 C 7.097 2.382 7.1 2.514 7.1 2.514 L 7.734 21.474 C 7.758 22.008 12 22 12 22 C 12 22 16.242 22.008 16.266 21.474 L 16.9 2.514 C 16.9 2.514 16.903 2.382 16.78 2.348 C 15.577 2.014 12 2 12 2 z M 11.988 7.012 C 12.079 7.877 12.1 14.009 12.1 14.009 C 12.1 14.009 12.095 20.474 11.988 20.968 C 11.909 20.462 11.9 14.032 11.9 14.032 C 11.9 14.032 11.91 7.885 11.988 7.012 z M 9.407 7.531 C 9.497 8.355 9.496 14.222 9.496 14.222 C 9.496 14.222 9.514 20.339 9.407 20.81 C 9.327 20.328 9.357 14.222 9.357 14.222 C 9.357 14.222 9.329 8.362 9.407 7.531 z M 14.556 7.622 C 14.646 8.446 14.645 14.315 14.645 14.315 C 14.645 14.315 14.663 20.432 14.556 20.903 C 14.476 20.421 14.506 14.315 14.506 14.315 C 14.506 14.315 14.478 8.453 14.556 7.622 z'/%3E %3C/svg%3E");
}

.glass-mark--hurricane-glass {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 12 2 C 12 2 8.564 1.992 8.205 2.082 C 7.846 2.171 9.025 3.798 9.149 6.5 C 9.233 8.331 8.729 10.155 8.465 11.965 C 8.226 13.604 8.255 15.357 9.111 16.774 C 9.726 17.792 10.831 18.123 10.831 18.123 L 10.837 18.699 C 10.837 18.699 10.395 19.114 10.395 19.518 C 10.395 19.922 10.901 20.337 10.901 20.337 L 10.901 20.696 C 10.901 20.696 8.828 20.666 8.814 21.365 C 8.801 22.033 12 22 12 22 C 12 22 15.201 22.033 15.188 21.365 C 15.174 20.666 13.101 20.696 13.101 20.696 L 13.101 20.337 C 13.101 20.337 13.605 19.922 13.605 19.518 C 13.605 19.114 13.163 18.699 13.163 18.699 L 13.169 18.123 C 13.169 18.123 14.276 17.792 14.891 16.774 C 15.747 15.357 15.774 13.604 15.535 11.965 C 15.271 10.155 14.767 8.331 14.851 6.5 C 14.975 3.798 16.154 2.171 15.795 2.082 C 15.436 1.992 12 2 12 2 z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 12 2 C 12 2 8.564 1.992 8.205 2.082 C 7.846 2.171 9.025 3.798 9.149 6.5 C 9.233 8.331 8.729 10.155 8.465 11.965 C 8.226 13.604 8.255 15.357 9.111 16.774 C 9.726 17.792 10.831 18.123 10.831 18.123 L 10.837 18.699 C 10.837 18.699 10.395 19.114 10.395 19.518 C 10.395 19.922 10.901 20.337 10.901 20.337 L 10.901 20.696 C 10.901 20.696 8.828 20.666 8.814 21.365 C 8.801 22.033 12 22 12 22 C 12 22 15.201 22.033 15.188 21.365 C 15.174 20.666 13.101 20.696 13.101 20.696 L 13.101 20.337 C 13.101 20.337 13.605 19.922 13.605 19.518 C 13.605 19.114 13.163 18.699 13.163 18.699 L 13.169 18.123 C 13.169 18.123 14.276 17.792 14.891 16.774 C 15.747 15.357 15.774 13.604 15.535 11.965 C 15.271 10.155 14.767 8.331 14.851 6.5 C 14.975 3.798 16.154 2.171 15.795 2.082 C 15.436 1.992 12 2 12 2 z'/%3E %3C/svg%3E");
}

.glass-mark--margarita-glass {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 12 1.999 -7.074 0.045 c 0 0 0.065 1.753 0.952 2.506 0.887 0.754 2.04 1.24 2.04 1.24 0 0 0.2 1.421 0.71 2.218 0.51 0.798 1.504 1.634 1.936 1.913 0.53 0.342 0.859 0.835 0.837 4.849 -0.022 4.014 -0.083 4.415 -0.567 5.029 -0.571 0.726 -3.82 1.03 -3.82 1.562 0 0.621 4.984 0.637 4.984 0.637 0 0 4.984 -0.016 4.984 -0.637 0 -0.533 -3.249 -0.835 -3.82 -1.562 -0.482 -0.614 -0.544 -1.016 -0.567 -5.029 -0.022 -4.014 0.306 -4.507 0.837 -4.849 0.432 -0.279 1.426 -1.114 1.936 -1.913 0.51 -0.798 0.71 -2.218 0.71 -2.218 0 0 1.153 -0.487 2.04 -1.24 0.887 -0.754 0.952 -2.506 0.952 -2.506 z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 12 1.999 -7.074 0.045 c 0 0 0.065 1.753 0.952 2.506 0.887 0.754 2.04 1.24 2.04 1.24 0 0 0.2 1.421 0.71 2.218 0.51 0.798 1.504 1.634 1.936 1.913 0.53 0.342 0.859 0.835 0.837 4.849 -0.022 4.014 -0.083 4.415 -0.567 5.029 -0.571 0.726 -3.82 1.03 -3.82 1.562 0 0.621 4.984 0.637 4.984 0.637 0 0 4.984 -0.016 4.984 -0.637 0 -0.533 -3.249 -0.835 -3.82 -1.562 -0.482 -0.614 -0.544 -1.016 -0.567 -5.029 -0.022 -4.014 0.306 -4.507 0.837 -4.849 0.432 -0.279 1.426 -1.114 1.936 -1.913 0.51 -0.798 0.71 -2.218 0.71 -2.218 0 0 1.153 -0.487 2.04 -1.24 0.887 -0.754 0.952 -2.506 0.952 -2.506 z'/%3E %3C/svg%3E");
}

.glass-mark--martini-glass {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 12 2 c 0 0 -6.488 0.063 -6.709 0.157 C 5.071 2.252 5.164 2.385 5.236 2.457 5.364 2.583 7.288 4.758 8.258 5.949 9.309 7.239 11.324 9.712 11.354 10.114 c 0.03 0.402 0.195 2.103 0.195 4.459 0 2.356 -0.069 5.41 -0.715 5.834 -0.646 0.423 -3.272 0.458 -3.272 1.103 0 0.512 4.437 0.49 4.437 0.49 0 0 4.437 0.022 4.437 -0.49 0 -0.646 -2.626 -0.68 -3.272 -1.103 -0.646 -0.423 -0.715 -3.478 -0.715 -5.834 0 -2.356 0.165 -4.056 0.195 -4.459 0.03 -0.402 2.046 -2.875 3.096 -4.165 C 16.712 4.758 18.636 2.583 18.764 2.457 18.836 2.385 18.929 2.252 18.709 2.157 18.488 2.063 12 2 12 2 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 12 2 c 0 0 -6.488 0.063 -6.709 0.157 C 5.071 2.252 5.164 2.385 5.236 2.457 5.364 2.583 7.288 4.758 8.258 5.949 9.309 7.239 11.324 9.712 11.354 10.114 c 0.03 0.402 0.195 2.103 0.195 4.459 0 2.356 -0.069 5.41 -0.715 5.834 -0.646 0.423 -3.272 0.458 -3.272 1.103 0 0.512 4.437 0.49 4.437 0.49 0 0 4.437 0.022 4.437 -0.49 0 -0.646 -2.626 -0.68 -3.272 -1.103 -0.646 -0.423 -0.715 -3.478 -0.715 -5.834 0 -2.356 0.165 -4.056 0.195 -4.459 0.03 -0.402 2.046 -2.875 3.096 -4.165 C 16.712 4.758 18.636 2.583 18.764 2.457 18.836 2.385 18.929 2.252 18.709 2.157 18.488 2.063 12 2 12 2 Z'/%3E %3C/svg%3E");
}

.glass-mark--mason-jar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 6.975 2 6.99 3.099 17.021 2.37 17.025 2 Z m 10.042 0.603 -10.021 0.727 0.009 0.612 10.003 -0.725 z M 17.003 3.449 7.006 4.172 7.011 4.405 c 0 0 -0.37 0.026 -0.37 0.343 0 0.317 0.35 0.298 0.35 0.298 V 5.966 c 0 0 -0.574 0.376 -0.691 0.85 -0.14 0.565 0.011 10.114 0.011 13.669 0 0.884 1.387 1.514 2.775 1.514 l 5.778 0 c 1.299 0 2.826 -0.63 2.826 -1.514 0 -3.555 0.151 -13.104 0.011 -13.669 C 17.583 6.342 17.01 5.966 17.01 5.966 V 5.047 c 0 0 0.35 0.019 0.35 -0.298 C 17.359 4.431 16.989 4.405 16.989 4.405 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 6.975 2 6.99 3.099 17.021 2.37 17.025 2 Z m 10.042 0.603 -10.021 0.727 0.009 0.612 10.003 -0.725 z M 17.003 3.449 7.006 4.172 7.011 4.405 c 0 0 -0.37 0.026 -0.37 0.343 0 0.317 0.35 0.298 0.35 0.298 V 5.966 c 0 0 -0.574 0.376 -0.691 0.85 -0.14 0.565 0.011 10.114 0.011 13.669 0 0.884 1.387 1.514 2.775 1.514 l 5.778 0 c 1.299 0 2.826 -0.63 2.826 -1.514 0 -3.555 0.151 -13.104 0.011 -13.669 C 17.583 6.342 17.01 5.966 17.01 5.966 V 5.047 c 0 0 0.35 0.019 0.35 -0.298 C 17.359 4.431 16.989 4.405 16.989 4.405 Z'/%3E %3C/svg%3E");
}

.glass-mark--nick-and-nora {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 7.495 2 c 0 0 -0.348 0.88 -0.356 1.492 -0.035 2.618 3.79 5.618 4.026 6.397 0.333 1.097 0.455 4.655 0.455 5.618 0 1.006 0.04 2.381 -0.101 2.884 C 11.32 19.108 10.875 19.648 9.72 20.025 8.565 20.4 7.486 20.519 7.489 21.057 c 0.004 0.941 4.507 0.943 4.511 0.943 0 0 4.507 -0.003 4.511 -0.943 0.003 -0.538 -1.076 -0.657 -2.232 -1.032 -1.155 -0.377 -1.599 -0.916 -1.799 -1.632 -0.141 -0.503 -0.101 -1.877 -0.101 -2.884 0 -0.963 0.123 -4.523 0.455 -5.618 0.236 -0.779 4.061 -3.781 4.026 -6.397 -0.008 -0.613 -0.356 -1.492 -0.356 -1.492 h -4.505 z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 7.495 2 c 0 0 -0.348 0.88 -0.356 1.492 -0.035 2.618 3.79 5.618 4.026 6.397 0.333 1.097 0.455 4.655 0.455 5.618 0 1.006 0.04 2.381 -0.101 2.884 C 11.32 19.108 10.875 19.648 9.72 20.025 8.565 20.4 7.486 20.519 7.489 21.057 c 0.004 0.941 4.507 0.943 4.511 0.943 0 0 4.507 -0.003 4.511 -0.943 0.003 -0.538 -1.076 -0.657 -2.232 -1.032 -1.155 -0.377 -1.599 -0.916 -1.799 -1.632 -0.141 -0.503 -0.101 -1.877 -0.101 -2.884 0 -0.963 0.123 -4.523 0.455 -5.618 0.236 -0.779 4.061 -3.781 4.026 -6.397 -0.008 -0.613 -0.356 -1.492 -0.356 -1.492 h -4.505 z'/%3E %3C/svg%3E");
}

.glass-mark--rocks-glass {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 3.98 2.145 L 3.98 2.147 C 3.85 2.167 3.863 2.34 3.863 2.34 L 4.242 17.743 L 5.138 16.586 L 6.527 15.08 L 5.18 13.201 L 6.731 14.859 L 8.526 12.914 L 6.877 15.013 L 8.576 16.827 L 9.244 17.701 L 10.056 16.64 L 11.651 14.935 L 10.353 13.123 L 11.85 14.722 L 13.45 13.012 L 12.061 14.95 L 13.747 16.751 L 14.474 17.701 L 15.227 16.716 L 16.902 14.928 L 15.576 13.181 L 17.032 14.787 L 18.623 13.09 L 17.241 15.017 L 18.953 16.905 L 19.753 17.925 L 20.137 2.34 C 20.137 2.34 20.15 2.165 20.02 2.145 C 18.785 1.952 5.214 1.952 3.98 2.145 z M 17.11 15.202 L 15.706 17.159 L 14.786 18.112 L 17.069 21.098 L 18.286 19.281 L 19.508 18.153 L 18.614 17.181 L 17.11 15.202 z M 11.861 15.228 L 10.533 17.081 L 9.548 18.101 L 11.859 21.126 L 14.159 18.114 L 13.269 17.194 L 11.861 15.228 z M 6.668 15.28 L 5.464 16.814 L 4.253 18.172 L 4.255 18.227 L 5.516 19.392 L 6.655 21.091 L 8.921 18.125 L 8.096 17.27 L 6.668 15.28 z M 6.655 21.091 L 6.655 21.093 L 6.82 21.338 L 5.184 19.72 L 4.257 18.357 L 4.333 21.436 C 4.393 22.188 19.607 22.188 19.667 21.436 L 19.74 18.407 L 19.565 18.216 L 18.618 19.609 L 17.089 21.124 L 17.167 21.226 L 17.078 21.134 L 16.982 21.228 L 17.058 21.113 L 14.472 18.437 L 11.865 21.132 L 11.993 21.301 L 11.848 21.152 L 11.809 21.191 L 11.844 21.145 L 9.225 18.437 L 6.655 21.091 z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 3.98 2.145 L 3.98 2.147 C 3.85 2.167 3.863 2.34 3.863 2.34 L 4.242 17.743 L 5.138 16.586 L 6.527 15.08 L 5.18 13.201 L 6.731 14.859 L 8.526 12.914 L 6.877 15.013 L 8.576 16.827 L 9.244 17.701 L 10.056 16.64 L 11.651 14.935 L 10.353 13.123 L 11.85 14.722 L 13.45 13.012 L 12.061 14.95 L 13.747 16.751 L 14.474 17.701 L 15.227 16.716 L 16.902 14.928 L 15.576 13.181 L 17.032 14.787 L 18.623 13.09 L 17.241 15.017 L 18.953 16.905 L 19.753 17.925 L 20.137 2.34 C 20.137 2.34 20.15 2.165 20.02 2.145 C 18.785 1.952 5.214 1.952 3.98 2.145 z M 17.11 15.202 L 15.706 17.159 L 14.786 18.112 L 17.069 21.098 L 18.286 19.281 L 19.508 18.153 L 18.614 17.181 L 17.11 15.202 z M 11.861 15.228 L 10.533 17.081 L 9.548 18.101 L 11.859 21.126 L 14.159 18.114 L 13.269 17.194 L 11.861 15.228 z M 6.668 15.28 L 5.464 16.814 L 4.253 18.172 L 4.255 18.227 L 5.516 19.392 L 6.655 21.091 L 8.921 18.125 L 8.096 17.27 L 6.668 15.28 z M 6.655 21.091 L 6.655 21.093 L 6.82 21.338 L 5.184 19.72 L 4.257 18.357 L 4.333 21.436 C 4.393 22.188 19.607 22.188 19.667 21.436 L 19.74 18.407 L 19.565 18.216 L 18.618 19.609 L 17.089 21.124 L 17.167 21.226 L 17.078 21.134 L 16.982 21.228 L 17.058 21.113 L 14.472 18.437 L 11.865 21.132 L 11.993 21.301 L 11.848 21.152 L 11.809 21.191 L 11.844 21.145 L 9.225 18.437 L 6.655 21.091 z'/%3E %3C/svg%3E");
}

.glass-mark--shot-glass {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 5.919 2.049 C 5.653 2.07 5.66 2.186 5.703 2.417 5.747 2.648 6.186 4.131 6.328 6.182 6.684 11.32 6.75 13.672 6.949 21.132 c 0.024 0.881 5.051 0.868 5.051 0.868 0 0 5.027 0.013 5.051 -0.868 0.2 -7.46 0.265 -9.812 0.621 -14.95 0.142 -2.051 0.582 -3.534 0.625 -3.765 C 18.34 2.186 18.347 2.07 18.081 2.049 17.249 1.983 6.728 1.985 5.919 2.049 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 5.919 2.049 C 5.653 2.07 5.66 2.186 5.703 2.417 5.747 2.648 6.186 4.131 6.328 6.182 6.684 11.32 6.75 13.672 6.949 21.132 c 0.024 0.881 5.051 0.868 5.051 0.868 0 0 5.027 0.013 5.051 -0.868 0.2 -7.46 0.265 -9.812 0.621 -14.95 0.142 -2.051 0.582 -3.534 0.625 -3.765 C 18.34 2.186 18.347 2.07 18.081 2.049 17.249 1.983 6.728 1.985 5.919 2.049 Z'/%3E %3C/svg%3E");
}

.glass-mark--tiki-mug {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 5.8 2 C 5.8 2 5.55 2.56 5.85 3.16 C 6.15 3.76 6.91 4.13 7 4.47 C 7.1 4.82 6.96 5.39 6.96 5.39 C 6.96 5.39 6.64 5.94 6.61 6.14 C 6.56 6.55 6.94 7.34 6.94 7.34 L 6.98 12.45 C 6.98 12.45 6.31 13.25 6.31 15.49 C 6.31 17.73 7.09 18.14 7.09 18.14 L 7.1 20.57 C 7.96 22.48 16.04 22.48 16.9 20.57 L 16.91 18.14 C 16.91 18.14 17.69 17.73 17.69 15.49 C 17.69 13.25 17.02 12.45 17.02 12.45 L 17.06 7.34 C 17.06 7.34 17.44 6.55 17.39 6.14 C 17.36 5.94 17.04 5.39 17.04 5.39 C 17.04 5.39 16.9 4.82 17 4.47 C 17.09 4.13 17.85 3.76 18.15 3.16 C 18.45 2.56 18.2 2 18.2 2 Z M 8.76 6.95 C 9.47 6.95 10.74 8.39 10.74 8.39 C 10.74 8.39 9.91 9.63 8.89 9.63 C 7.87 9.63 7.41 8.91 7.41 8.35 C 7.41 7.78 8.06 6.95 8.76 6.95 Z M 15.24 6.95 C 15.94 6.95 16.59 7.78 16.59 8.35 C 16.59 8.91 16.13 9.63 15.11 9.63 C 14.09 9.63 13.26 8.39 13.26 8.39 C 13.26 8.39 14.53 6.95 15.24 6.95 Z M 7.6 13.74 C 8.12 13.85 8.53 14.29 8.94 14.62 L 8.94 16.1 C 8.04 15.9 7.45 15.66 7.21 15.55 C 7.21 14.78 7.13 13.78 7.6 13.74 Z M 16.35 13.74 C 16.96 13.71 16.79 15.62 16.78 15.77 C 16.57 15.85 16.07 16.02 15.27 16.16 L 15.27 14.46 C 15.57 14.12 15.99 13.95 16.35 13.74 Z M 15.04 14.55 L 15.04 16.2 C 14.31 16.32 13.49 16.41 12.28 16.42 L 12.28 15.71 C 13.6 15.61 14.37 15.05 15.04 14.55 Z M 9.12 14.69 C 10.61 15.74 11.86 15.73 12.13 15.72 L 12.13 16.42 C 11.26 16.42 10.23 16.35 9.12 16.12 Z M 7.22 15.78 C 7.52 15.91 8.1 16.13 8.94 16.31 L 8.94 18.07 C 7.62 18.35 7.23 15.85 7.22 15.78 Z M 16.74 16.01 C 16.63 16.61 16.11 18.15 15.27 18.11 L 15.27 16.38 C 15.77 16.3 16.26 16.15 16.74 16.01 Z M 9.12 16.33 C 10.43 16.61 11.54 16.64 12.13 16.64 L 12.13 17.07 C 10.65 16.95 10.19 17.76 9.12 18.05 Z M 15.04 16.41 L 15.04 18.11 C 13.8 17.93 13.78 17.06 12.28 17.07 L 12.28 16.63 C 13.48 16.62 15.04 16.41 15.04 16.41 Z M 8.63 8.31 A 0.25 0.25 0 1 0 9.13 8.31 A 0.25 0.25 0 1 0 8.63 8.31 Z M 14.99 8.36 A 0.25 0.25 0 1 0 15.49 8.36 A 0.25 0.25 0 1 0 14.99 8.36 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 5.8 2 C 5.8 2 5.55 2.56 5.85 3.16 C 6.15 3.76 6.91 4.13 7 4.47 C 7.1 4.82 6.96 5.39 6.96 5.39 C 6.96 5.39 6.64 5.94 6.61 6.14 C 6.56 6.55 6.94 7.34 6.94 7.34 L 6.98 12.45 C 6.98 12.45 6.31 13.25 6.31 15.49 C 6.31 17.73 7.09 18.14 7.09 18.14 L 7.1 20.57 C 7.96 22.48 16.04 22.48 16.9 20.57 L 16.91 18.14 C 16.91 18.14 17.69 17.73 17.69 15.49 C 17.69 13.25 17.02 12.45 17.02 12.45 L 17.06 7.34 C 17.06 7.34 17.44 6.55 17.39 6.14 C 17.36 5.94 17.04 5.39 17.04 5.39 C 17.04 5.39 16.9 4.82 17 4.47 C 17.09 4.13 17.85 3.76 18.15 3.16 C 18.45 2.56 18.2 2 18.2 2 Z M 8.76 6.95 C 9.47 6.95 10.74 8.39 10.74 8.39 C 10.74 8.39 9.91 9.63 8.89 9.63 C 7.87 9.63 7.41 8.91 7.41 8.35 C 7.41 7.78 8.06 6.95 8.76 6.95 Z M 15.24 6.95 C 15.94 6.95 16.59 7.78 16.59 8.35 C 16.59 8.91 16.13 9.63 15.11 9.63 C 14.09 9.63 13.26 8.39 13.26 8.39 C 13.26 8.39 14.53 6.95 15.24 6.95 Z M 7.6 13.74 C 8.12 13.85 8.53 14.29 8.94 14.62 L 8.94 16.1 C 8.04 15.9 7.45 15.66 7.21 15.55 C 7.21 14.78 7.13 13.78 7.6 13.74 Z M 16.35 13.74 C 16.96 13.71 16.79 15.62 16.78 15.77 C 16.57 15.85 16.07 16.02 15.27 16.16 L 15.27 14.46 C 15.57 14.12 15.99 13.95 16.35 13.74 Z M 15.04 14.55 L 15.04 16.2 C 14.31 16.32 13.49 16.41 12.28 16.42 L 12.28 15.71 C 13.6 15.61 14.37 15.05 15.04 14.55 Z M 9.12 14.69 C 10.61 15.74 11.86 15.73 12.13 15.72 L 12.13 16.42 C 11.26 16.42 10.23 16.35 9.12 16.12 Z M 7.22 15.78 C 7.52 15.91 8.1 16.13 8.94 16.31 L 8.94 18.07 C 7.62 18.35 7.23 15.85 7.22 15.78 Z M 16.74 16.01 C 16.63 16.61 16.11 18.15 15.27 18.11 L 15.27 16.38 C 15.77 16.3 16.26 16.15 16.74 16.01 Z M 9.12 16.33 C 10.43 16.61 11.54 16.64 12.13 16.64 L 12.13 17.07 C 10.65 16.95 10.19 17.76 9.12 18.05 Z M 15.04 16.41 L 15.04 18.11 C 13.8 17.93 13.78 17.06 12.28 17.07 L 12.28 16.63 C 13.48 16.62 15.04 16.41 15.04 16.41 Z M 8.63 8.31 A 0.25 0.25 0 1 0 9.13 8.31 A 0.25 0.25 0 1 0 8.63 8.31 Z M 14.99 8.36 A 0.25 0.25 0 1 0 15.49 8.36 A 0.25 0.25 0 1 0 14.99 8.36 Z'/%3E %3C/svg%3E");
}

.glass-mark--toddy-glass {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 12 2.001 C 12 2.001 6.535 1.946 6.717 2.757 C 7.037 4.168 7.612 6.87 7.612 9.561 C 7.612 12.252 6.823 13.365 7.743 14.584 C 8.423 15.487 10.128 15.632 10.128 15.632 C 10.128 15.632 10.364 18.361 10.112 19.187 C 9.852 20.039 7.336 20.119 7.321 20.807 C 7.296 22.037 12 22 12 22 C 12 22 16.705 22.037 16.679 20.807 C 16.665 20.119 14.149 20.039 13.889 19.187 C 13.636 18.361 13.873 15.632 13.873 15.632 C 13.873 15.632 15.579 15.487 16.259 14.584 C 17.179 13.365 16.389 12.252 16.389 9.561 C 16.389 6.87 16.964 4.168 17.283 2.757 C 17.467 1.946 12 2.001 12 2.001 z'/%3E %3Cpath fill='none' stroke='currentColor' stroke-width='1' d='m 15.869 8.009 c 0 0 1.071 -1.132 1.789 -1.147 0.719 -0.015 1.667 0.764 1.712 2.875 0.045 2.111 -0.869 3.255 -1.941 3.257 -1.196 0.003 -1.957 -0.504 -1.957 -0.504'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 12 2.001 C 12 2.001 6.535 1.946 6.717 2.757 C 7.037 4.168 7.612 6.87 7.612 9.561 C 7.612 12.252 6.823 13.365 7.743 14.584 C 8.423 15.487 10.128 15.632 10.128 15.632 C 10.128 15.632 10.364 18.361 10.112 19.187 C 9.852 20.039 7.336 20.119 7.321 20.807 C 7.296 22.037 12 22 12 22 C 12 22 16.705 22.037 16.679 20.807 C 16.665 20.119 14.149 20.039 13.889 19.187 C 13.636 18.361 13.873 15.632 13.873 15.632 C 13.873 15.632 15.579 15.487 16.259 14.584 C 17.179 13.365 16.389 12.252 16.389 9.561 C 16.389 6.87 16.964 4.168 17.283 2.757 C 17.467 1.946 12 2.001 12 2.001 z'/%3E %3Cpath fill='none' stroke='currentColor' stroke-width='1' d='m 15.869 8.009 c 0 0 1.071 -1.132 1.789 -1.147 0.719 -0.015 1.667 0.764 1.712 2.875 0.045 2.111 -0.869 3.255 -1.941 3.257 -1.196 0.003 -1.957 -0.504 -1.957 -0.504'/%3E %3C/svg%3E");
}

.glass-mark--wine-glass {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 12 2 -3.044 0.023 c 0 0 -0.709 2.212 -0.709 4.058 0 1.846 1.031 3.316 1.6 4.175 0.569 0.859 1.424 1.348 1.577 1.791 0.229 0.664 0.277 3.063 0.266 4.437 -0.011 1.374 -0.001 3.465 -0.136 3.751 -0.179 0.378 -2.687 0.505 -2.696 0.968 -0.015 0.783 2.992 0.797 3.142 0.797 0.15 0 3.157 -0.014 3.142 -0.797 -0.009 -0.462 -2.517 -0.59 -2.696 -0.968 -0.136 -0.287 -0.125 -2.377 -0.136 -3.751 -0.011 -1.374 0.038 -3.773 0.266 -4.437 0.153 -0.443 1.008 -0.933 1.577 -1.791 0.569 -0.859 1.6 -2.329 1.6 -4.175 0 -1.846 -0.709 -4.058 -0.709 -4.058 z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 12 2 -3.044 0.023 c 0 0 -0.709 2.212 -0.709 4.058 0 1.846 1.031 3.316 1.6 4.175 0.569 0.859 1.424 1.348 1.577 1.791 0.229 0.664 0.277 3.063 0.266 4.437 -0.011 1.374 -0.001 3.465 -0.136 3.751 -0.179 0.378 -2.687 0.505 -2.696 0.968 -0.015 0.783 2.992 0.797 3.142 0.797 0.15 0 3.157 -0.014 3.142 -0.797 -0.009 -0.462 -2.517 -0.59 -2.696 -0.968 -0.136 -0.287 -0.125 -2.377 -0.136 -3.751 -0.011 -1.374 0.038 -3.773 0.266 -4.437 0.153 -0.443 1.008 -0.933 1.577 -1.791 0.569 -0.859 1.6 -2.329 1.6 -4.175 0 -1.846 -0.709 -4.058 -0.709 -4.058 z'/%3E %3C/svg%3E");
}

.browse-search:before, .popover-filter:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z'/%3E %3C/svg%3E");
}

.mark--move-up, .mark--move-down {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M12 20V4'/%3E %3Cpath d='m5 11 7-7 7 7'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M12 20V4'/%3E %3Cpath d='m5 11 7-7 7 7'/%3E %3C/svg%3E");
}

.mark--remove {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' aria-hidden='true'%3E %3Cline x1='6' y1='6' x2='18' y2='18'/%3E %3Cline x1='18' y1='6' x2='6' y2='18'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' aria-hidden='true'%3E %3Cline x1='6' y1='6' x2='18' y2='18'/%3E %3Cline x1='18' y1='6' x2='6' y2='18'/%3E %3C/svg%3E");
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' aria-hidden='true'%3E %3Cline x1='6' y1='6' x2='18' y2='18'/%3E %3Cline x1='18' y1='6' x2='6' y2='18'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' aria-hidden='true'%3E %3Cline x1='6' y1='6' x2='18' y2='18'/%3E %3Cline x1='18' y1='6' x2='6' y2='18'/%3E %3C/svg%3E");
}

.mark--search, .picker-field:before, .site-search:before, .site-search.is-expanded:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' aria-hidden='true'%3E %3Ccircle cx='10' cy='10' r='6.5'/%3E %3Cline x1='15' y1='15' x2='21' y2='21'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' aria-hidden='true'%3E %3Ccircle cx='10' cy='10' r='6.5'/%3E %3Cline x1='15' y1='15' x2='21' y2='21'/%3E %3C/svg%3E");
}

.site-search:focus-within:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' aria-hidden='true'%3E %3Ccircle cx='10' cy='10' r='6.5'/%3E %3Cline x1='15' y1='15' x2='21' y2='21'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' aria-hidden='true'%3E %3Ccircle cx='10' cy='10' r='6.5'/%3E %3Cline x1='15' y1='15' x2='21' y2='21'/%3E %3C/svg%3E");
}

.rating-cell.is-amazing:before, .rating-cell.is-amazing:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 7.9 10 L 8.8 4.5 L 9.8 10 A 2.3 2.3 0 0 0 11.9 12 L 17.3 13 L 11.9 14 A 2.3 2.3 0 0 0 9.8 16 L 8.8 21.4 L 7.9 16 A 2.3 2.3 0 0 0 5.8 14 L 0.4 13 L 5.8 12 A 2.3 2.3 0 0 0 7.9 10 Z M 17.8 4.4 L 18.5 1.1 L 19.1 4.4 A 1.4 1.4 0 0 0 20.3 5.6 L 23.6 6.2 L 20.3 6.8 A 1.4 1.4 0 0 0 19.1 8 L 18.5 11.3 L 17.8 8 A 1.4 1.4 0 0 0 16.6 6.8 L 13.3 6.2 L 16.6 5.6 A 1.4 1.4 0 0 0 17.8 4.4 Z M 14.1 18.5 L 14.5 16.3 L 14.9 18.5 A 0.9 0.9 0 0 0 15.7 19.3 L 17.8 19.6 L 15.7 20 A 0.9 0.9 0 0 0 14.9 20.8 L 14.5 22.9 L 14.1 20.8 A 0.9 0.9 0 0 0 13.3 20 L 11.2 19.6 L 13.3 19.3 A 0.9 0.9 0 0 0 14.1 18.5 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='M 7.9 10 L 8.8 4.5 L 9.8 10 A 2.3 2.3 0 0 0 11.9 12 L 17.3 13 L 11.9 14 A 2.3 2.3 0 0 0 9.8 16 L 8.8 21.4 L 7.9 16 A 2.3 2.3 0 0 0 5.8 14 L 0.4 13 L 5.8 12 A 2.3 2.3 0 0 0 7.9 10 Z M 17.8 4.4 L 18.5 1.1 L 19.1 4.4 A 1.4 1.4 0 0 0 20.3 5.6 L 23.6 6.2 L 20.3 6.8 A 1.4 1.4 0 0 0 19.1 8 L 18.5 11.3 L 17.8 8 A 1.4 1.4 0 0 0 16.6 6.8 L 13.3 6.2 L 16.6 5.6 A 1.4 1.4 0 0 0 17.8 4.4 Z M 14.1 18.5 L 14.5 16.3 L 14.9 18.5 A 0.9 0.9 0 0 0 15.7 19.3 L 17.8 19.6 L 15.7 20 A 0.9 0.9 0 0 0 14.9 20.8 L 14.5 22.9 L 14.1 20.8 A 0.9 0.9 0 0 0 13.3 20 L 11.2 19.6 L 13.3 19.3 A 0.9 0.9 0 0 0 14.1 18.5 Z'/%3E %3C/svg%3E");
}

.mark--pen {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E %3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E %3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E %3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E %3C/svg%3E");
}

.mark--account {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.49996 6C7.49996 3.51472 9.51468 1.5 12 1.5C14.4852 1.5 16.5 3.51472 16.5 6C16.5 8.48528 14.4852 10.5 12 10.5C9.51468 10.5 7.49996 8.48528 7.49996 6Z'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.75121 20.1053C3.82855 15.6156 7.49195 12 12 12C16.5081 12 20.1716 15.6157 20.2487 20.1056C20.2538 20.4034 20.0823 20.676 19.8116 20.8002C17.4327 21.8918 14.7865 22.5 12.0003 22.5C9.21382 22.5 6.5674 21.8917 4.18829 20.7999C3.91762 20.6757 3.74608 20.4031 3.75121 20.1053Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.49996 6C7.49996 3.51472 9.51468 1.5 12 1.5C14.4852 1.5 16.5 3.51472 16.5 6C16.5 8.48528 14.4852 10.5 12 10.5C9.51468 10.5 7.49996 8.48528 7.49996 6Z'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.75121 20.1053C3.82855 15.6156 7.49195 12 12 12C16.5081 12 20.1716 15.6157 20.2487 20.1056C20.2538 20.4034 20.0823 20.676 19.8116 20.8002C17.4327 21.8918 14.7865 22.5 12.0003 22.5C9.21382 22.5 6.5674 21.8917 4.18829 20.7999C3.91762 20.6757 3.74608 20.4031 3.75121 20.1053Z'/%3E %3C/svg%3E");
}

.mark--vegan {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 11.44989,21.55405 c 1.27576,-5.505533 3.406165,-9.363733 7.31415,-13.2460452 1.216352,-1.2083612 1.114694,-1.1725447 -0.50032,0.1762742 -2.707378,2.261135 -5.293525,5.543605 -6.614408,8.395349 -0.44861,0.968534 -0.43094,0.961087 -0.695933,0.293314 -0.833876,-2.101334 -0.563283,-4.032369 -0.288096,-4.823429 1.204633,-3.4628848 5.302926,-6.489256 11.349692,-8.3811443 1.554194,-0.4862702 1.705845,-0.5078441 1.642251,-0.2336279 -0.109071,0.4703154 -0.30515,2.0497063 -0.504684,4.0651615 -0.390774,3.9471307 -0.768549,5.2879377 -2.091318,7.4225447 -1.543793,2.491278 -4.802689,4.414868 -7.479557,4.414868 -0.412223,0 -0.39227,-0.05024 -0.513636,1.293483 l -0.103849,1.149826 H 12.146024 11.32787 Z M 8.566773,15.088496 C 4.692936,14.312394 2.2506431,11.322573 1.2020742,6.0727352 1.012339,5.1227934 0.72286643,3.8024489 0.55880184,3.1386365 0.1976749,1.6775005 0.05309609,1.7927565 1.8040869,2.1459154 6.7683482,3.1471618 10.483264,5.1490872 12.163973,7.7287376 l 0.347596,0.5335099 -0.477392,0.5156401 C 11.771612,9.0614897 11.366325,9.5451202 11.13354,9.8526217 10.612126,10.541393 10.739177,10.569004 9.8293529,9.5691953 8.3244005,7.7692142 6.015338,6.0538107 4.1877365,4.9968993 6.473196,6.7669148 7.9902484,8.2484073 9.2580147,9.9483296 9.7245529,10.5739 10.130492,11.128154 10.160103,11.180001 c 0.02961,0.05185 -0.05587,0.394886 -0.1899651,0.762305 -0.3062028,0.839017 -0.463011,1.889018 -0.4021955,2.693139 0.054542,0.721168 0.1412535,0.681929 -1.0011694,0.453051 z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'%3E %3Cpath d='m 11.44989,21.55405 c 1.27576,-5.505533 3.406165,-9.363733 7.31415,-13.2460452 1.216352,-1.2083612 1.114694,-1.1725447 -0.50032,0.1762742 -2.707378,2.261135 -5.293525,5.543605 -6.614408,8.395349 -0.44861,0.968534 -0.43094,0.961087 -0.695933,0.293314 -0.833876,-2.101334 -0.563283,-4.032369 -0.288096,-4.823429 1.204633,-3.4628848 5.302926,-6.489256 11.349692,-8.3811443 1.554194,-0.4862702 1.705845,-0.5078441 1.642251,-0.2336279 -0.109071,0.4703154 -0.30515,2.0497063 -0.504684,4.0651615 -0.390774,3.9471307 -0.768549,5.2879377 -2.091318,7.4225447 -1.543793,2.491278 -4.802689,4.414868 -7.479557,4.414868 -0.412223,0 -0.39227,-0.05024 -0.513636,1.293483 l -0.103849,1.149826 H 12.146024 11.32787 Z M 8.566773,15.088496 C 4.692936,14.312394 2.2506431,11.322573 1.2020742,6.0727352 1.012339,5.1227934 0.72286643,3.8024489 0.55880184,3.1386365 0.1976749,1.6775005 0.05309609,1.7927565 1.8040869,2.1459154 6.7683482,3.1471618 10.483264,5.1490872 12.163973,7.7287376 l 0.347596,0.5335099 -0.477392,0.5156401 C 11.771612,9.0614897 11.366325,9.5451202 11.13354,9.8526217 10.612126,10.541393 10.739177,10.569004 9.8293529,9.5691953 8.3244005,7.7692142 6.015338,6.0538107 4.1877365,4.9968993 6.473196,6.7669148 7.9902484,8.2484073 9.2580147,9.9483296 9.7245529,10.5739 10.130492,11.128154 10.160103,11.180001 c 0.02961,0.05185 -0.05587,0.394886 -0.1899651,0.762305 -0.3062028,0.839017 -0.463011,1.889018 -0.4021955,2.693139 0.054542,0.721168 0.1412535,0.681929 -1.0011694,0.453051 z'/%3E %3C/svg%3E");
}

.occasion-list > li.is-amazing:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M 7.9 10 L 8.8 4.5 L 9.8 10 A 2.3 2.3 0 0 0 11.9 12 L 17.3 13 L 11.9 14 A 2.3 2.3 0 0 0 9.8 16 L 8.8 21.4 L 7.9 16 A 2.3 2.3 0 0 0 5.8 14 L 0.4 13 L 5.8 12 A 2.3 2.3 0 0 0 7.9 10 Z M 17.8 4.4 L 18.5 1.1 L 19.1 4.4 A 1.4 1.4 0 0 0 20.3 5.6 L 23.6 6.2 L 20.3 6.8 A 1.4 1.4 0 0 0 19.1 8 L 18.5 11.3 L 17.8 8 A 1.4 1.4 0 0 0 16.6 6.8 L 13.3 6.2 L 16.6 5.6 A 1.4 1.4 0 0 0 17.8 4.4 Z M 14.1 18.5 L 14.5 16.3 L 14.9 18.5 A 0.9 0.9 0 0 0 15.7 19.3 L 17.8 19.6 L 15.7 20 A 0.9 0.9 0 0 0 14.9 20.8 L 14.5 22.9 L 14.1 20.8 A 0.9 0.9 0 0 0 13.3 20 L 11.2 19.6 L 13.3 19.3 A 0.9 0.9 0 0 0 14.1 18.5 Z'/%3E%3Cg transform='rotate(180 12 24)'%3E%3Cpath d='M 7.9 10 L 8.8 4.5 L 9.8 10 A 2.3 2.3 0 0 0 11.9 12 L 17.3 13 L 11.9 14 A 2.3 2.3 0 0 0 9.8 16 L 8.8 21.4 L 7.9 16 A 2.3 2.3 0 0 0 5.8 14 L 0.4 13 L 5.8 12 A 2.3 2.3 0 0 0 7.9 10 Z M 17.8 4.4 L 18.5 1.1 L 19.1 4.4 A 1.4 1.4 0 0 0 20.3 5.6 L 23.6 6.2 L 20.3 6.8 A 1.4 1.4 0 0 0 19.1 8 L 18.5 11.3 L 17.8 8 A 1.4 1.4 0 0 0 16.6 6.8 L 13.3 6.2 L 16.6 5.6 A 1.4 1.4 0 0 0 17.8 4.4 Z M 14.1 18.5 L 14.5 16.3 L 14.9 18.5 A 0.9 0.9 0 0 0 15.7 19.3 L 17.8 19.6 L 15.7 20 A 0.9 0.9 0 0 0 14.9 20.8 L 14.5 22.9 L 14.1 20.8 A 0.9 0.9 0 0 0 13.3 20 L 11.2 19.6 L 13.3 19.3 A 0.9 0.9 0 0 0 14.1 18.5 Z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M 7.9 10 L 8.8 4.5 L 9.8 10 A 2.3 2.3 0 0 0 11.9 12 L 17.3 13 L 11.9 14 A 2.3 2.3 0 0 0 9.8 16 L 8.8 21.4 L 7.9 16 A 2.3 2.3 0 0 0 5.8 14 L 0.4 13 L 5.8 12 A 2.3 2.3 0 0 0 7.9 10 Z M 17.8 4.4 L 18.5 1.1 L 19.1 4.4 A 1.4 1.4 0 0 0 20.3 5.6 L 23.6 6.2 L 20.3 6.8 A 1.4 1.4 0 0 0 19.1 8 L 18.5 11.3 L 17.8 8 A 1.4 1.4 0 0 0 16.6 6.8 L 13.3 6.2 L 16.6 5.6 A 1.4 1.4 0 0 0 17.8 4.4 Z M 14.1 18.5 L 14.5 16.3 L 14.9 18.5 A 0.9 0.9 0 0 0 15.7 19.3 L 17.8 19.6 L 15.7 20 A 0.9 0.9 0 0 0 14.9 20.8 L 14.5 22.9 L 14.1 20.8 A 0.9 0.9 0 0 0 13.3 20 L 11.2 19.6 L 13.3 19.3 A 0.9 0.9 0 0 0 14.1 18.5 Z'/%3E%3Cg transform='rotate(180 12 24)'%3E%3Cpath d='M 7.9 10 L 8.8 4.5 L 9.8 10 A 2.3 2.3 0 0 0 11.9 12 L 17.3 13 L 11.9 14 A 2.3 2.3 0 0 0 9.8 16 L 8.8 21.4 L 7.9 16 A 2.3 2.3 0 0 0 5.8 14 L 0.4 13 L 5.8 12 A 2.3 2.3 0 0 0 7.9 10 Z M 17.8 4.4 L 18.5 1.1 L 19.1 4.4 A 1.4 1.4 0 0 0 20.3 5.6 L 23.6 6.2 L 20.3 6.8 A 1.4 1.4 0 0 0 19.1 8 L 18.5 11.3 L 17.8 8 A 1.4 1.4 0 0 0 16.6 6.8 L 13.3 6.2 L 16.6 5.6 A 1.4 1.4 0 0 0 17.8 4.4 Z M 14.1 18.5 L 14.5 16.3 L 14.9 18.5 A 0.9 0.9 0 0 0 15.7 19.3 L 17.8 19.6 L 15.7 20 A 0.9 0.9 0 0 0 14.9 20.8 L 14.5 22.9 L 14.1 20.8 A 0.9 0.9 0 0 0 13.3 20 L 11.2 19.6 L 13.3 19.3 A 0.9 0.9 0 0 0 14.1 18.5 Z'/%3E%3C/g%3E%3C/svg%3E");
}

.lede {
  max-width: var(--measure);
  margin: 0 0 var(--space-24);
}

.owner-description {
  max-width: var(--measure);
  margin: 0 0 var(--space-24);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  color: var(--ink);
}

.site-head {
  max-width: var(--shell);
  padding: var(--space-40) var(--space-20) 0;
  margin: 0 auto;
}

.site-head-top {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-16);
  display: flex;
}

.site-head .wordmark {
  font-family: var(--display);
  font-size: var(--type-wordmark);
  letter-spacing: .01em;
  font-weight: 400;
  line-height: var(--leading-display);
  margin: 0;
}

.site-head .wordmark a {
  color: var(--ink);
  text-decoration-line: none;
}

.site-head .wordmark a:focus-visible {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  .site-head .wordmark a:hover {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
  }
}

.site-head-links {
  align-items: baseline;
  gap: var(--space-24);
  flex-shrink: 0;
  display: flex;
}

.site-head-account {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-shrink: 0;
  font-weight: 500;
  text-decoration-line: none;
}

.site-head-account:focus-visible {
  color: var(--bottle);
  text-decoration-line: underline;
}

@media (hover: hover) {
  .site-head-account:hover {
    color: var(--bottle);
    text-decoration-line: underline;
  }
}

.site-head nav {
  gap: var(--space-24);
  margin-top: var(--space-16);
  flex-wrap: wrap;
  display: flex;
  position: relative;
}

.site-search {
  flex: 0 20rem;
  align-items: center;
  min-inline-size: 16rem;
  margin-inline-start: auto;
  display: flex;
  position: relative;
}

.site-search-input {
  inline-size: 100%;
  padding: 0 var(--space-4) 0 var(--space-28);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background-color: rgba(0, 0, 0, 0);
}

.browse-search, .site-search, .popover-filter {
  position: relative;
}

.browse-search {
  width: 100%;
  max-width: 30rem;
  display: flex;
}

.browse-search:before, .popover-filter:before, .site-search:before, .site-search.is-expanded:after {
  left: var(--space-4);
  pointer-events: none;
  background-color: var(--ink-soft);
  block-size: 1.05em;
  inline-size: 1.05em;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

.site-search:focus-within:after {
  left: var(--space-4);
  pointer-events: none;
  background-color: var(--ink-soft);
  block-size: 1.05em;
  inline-size: 1.05em;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

.browse-search:before, .popover-filter:before, .site-search:before {
  content: "";
}

.site-search-input::-webkit-search-cancel-button {
  display: none;
}

.site-search-input:focus {
  border-bottom-color: var(--amber);
  outline: none;
}

@media (hover: none) {
  .site-search-input {
    padding-block: var(--space-8);
  }
}

.site-search-open {
  color: var(--ink-soft);
  cursor: pointer;
  display: none;
  position: relative;
}

@media (hover: hover) {
  .site-search-open:hover {
    color: var(--bottle);
  }
}

.site-search-open .mark {
  width: 24px;
  height: 24px;
  display: block;
}

.site-search-open:after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.site-search-results, .site-search-empty {
  top: calc(100% + var(--space-8));
  z-index: var(--z-nav);
  padding: var(--space-4) 0;
  background: var(--paper-raised);
  border: 1px solid var(--frame);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
  margin: 0;
  list-style: none;
  position: absolute;
  inset-inline: 0;
}

.site-head nav .site-search-results a {
  padding: var(--space-4) var(--space-16);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  letter-spacing: 0;
  font-weight: 400;
  line-height: var(--leading-read);
  text-transform: none;
  text-decoration: none;
  display: block;
}

.site-head nav .site-search-results a.is-active {
  background: var(--row-on);
  color: var(--bottle);
}

@media (hover: hover) {
  .site-head nav .site-search-results a:hover {
    background: var(--row-on);
    color: var(--bottle);
  }
}

.site-search-empty {
  padding: var(--space-8) var(--space-16);
  color: var(--ink-soft);
  font-size: var(--type-small);
  line-height: var(--leading-read);
}

.site-search-empty:not(.has-words) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.site-search-empty .personal-action {
  width: fit-content;
  padding-block: var(--space-4);
  display: block;
}

.site-head nav a {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration-line: none;
}

.site-head nav a:focus-visible {
  color: var(--bottle);
  text-decoration-line: underline;
}

@media (hover: hover) {
  .site-head nav a:hover {
    color: var(--bottle);
    text-decoration-line: underline;
  }
}

.nav-menu {
  position: relative;
}

.site-head nav .nav-menu {
  display: none;
}

.site-head .nav-menu > summary {
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  list-style: none;
  display: flex;
  position: relative;
}

.site-head .nav-menu > summary::-webkit-details-marker {
  display: none;
}

.site-head .nav-menu > summary:before {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.site-head .nav-menu[open] > summary {
  color: var(--bottle);
}

@media (hover: hover) {
  .site-head .nav-menu > summary:hover {
    color: var(--bottle);
  }
}

.nav-menu-items {
  top: calc(100% + var(--space-8));
  z-index: var(--z-nav);
  min-width: 9rem;
  padding: var(--space-4) 0;
  background: var(--paper-raised);
  border: 1px solid var(--frame);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
  flex-direction: column;
  display: flex;
  position: absolute;
  left: 0;
}

.nav-menu-items a, .nav-menu-items button {
  font: inherit;
  padding: var(--space-4) var(--space-16);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration-line: none;
}

.nav-menu-items button {
  appearance: none;
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
}

.nav-menu-items a:focus-visible {
  color: var(--bottle);
  text-decoration-line: underline;
}

.nav-menu-items button:focus-visible {
  color: var(--bottle);
  text-decoration-line: underline;
}

@media (hover: hover) {
  .nav-menu-items a:hover, .nav-menu-items button:hover {
    color: var(--bottle);
    text-decoration-line: underline;
  }
}

.site-head-links .nav-menu-items {
  left: auto;
  inset-inline-end: 0;
}

.site-head-links > .nav-menu > summary {
  position: relative;
}

.site-head-links > .nav-menu > summary .mark {
  width: 24px;
  height: 24px;
  display: block;
}

.site-head-links > .nav-menu > summary:before {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

main {
  max-width: var(--shell);
  padding: var(--space-16) var(--space-20) var(--space-64);
  margin: 0 auto;
}

.site-foot {
  justify-content: center;
  gap: var(--space-24);
  max-width: var(--shell);
  padding: 0 var(--space-20) var(--space-24);
  flex-wrap: wrap;
  margin: 0 auto;
  display: flex;
}

.site-foot a {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration-line: none;
}

.site-foot a:focus-visible {
  color: var(--bottle);
  text-decoration-line: underline;
}

@media (hover: hover) {
  .site-foot a:hover {
    color: var(--bottle);
    text-decoration-line: underline;
  }
}

.back-link {
  margin: 0 0 var(--space-24);
}

.back-link a {
  min-inline-size: 24px;
  display: inline-block;
  position: relative;
}

.back-link a:after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.breadcrumb {
  font-size: var(--type-small);
  color: var(--ink-soft);
  margin: 0 0 var(--space-24);
}

.breadcrumb a {
  padding-block: var(--space-4);
  min-inline-size: 24px;
  display: inline-block;
}

.entity-layout {
  --photo-ar: .8;
  grid-template-columns: minmax(0, var(--recipe-col)) minmax(0, 1fr);
  column-gap: var(--space-40);
  row-gap: var(--space-12);
  align-items: start;
  display: grid;
}

.entity-layout > .cocktail-masthead {
  grid-column: 1 / -1;
}

.entity-main {
  grid-area: 1 / 2;
}

.entity-layout:has( > .cocktail-masthead) > .entity-main {
  grid-row: 2;
}

.entity-layout:has( > .cocktail-masthead) > .entity-aside {
  grid-row: 2;
}

.entity-layout > .entity-masthead {
  grid-column: 1 / -1;
  margin: 0;
}

.entity-layout:has( > .entity-masthead) > .entity-main {
  grid-row: 2;
}

.entity-layout:has( > .entity-masthead) > .entity-aside {
  grid-row: 2;
}

.entity-layout:not(:has( > .entity-aside)) > .entity-main {
  max-width: calc(100% - var(--recipe-col) - var(--space-40));
  grid-column: 1 / -1;
}

.entity-layout:not(:has( > .entity-aside)) {
  row-gap: var(--space-40);
}

.fact-block {
  margin: var(--space-20) 0 0;
  align-items: baseline;
  column-gap: var(--space-16);
  font-size: var(--type-body);
  grid-template-columns: max-content minmax(0, 1fr);
  display: grid;
}

.fact-block .fact {
  display: contents;
}

.fact-block dt, .fact-block dd {
  padding: var(--space-4) 0;
}

.fact-block dt {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  font-weight: 600;
  transform: translateY(-.05em);
}

.fact-block dd {
  margin: 0;
}

.fact-block dd.is-figure {
  font-family: var(--mono);
  font-weight: 500;
}

.fact-block dd.is-quantity {
  color: var(--amber);
}

.taste-rows {
  grid-template-columns: max-content minmax(0, calc(4em + 4 * var(--space-4))) max-content minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-8);
  row-gap: var(--space-4);
  display: grid;
}

.taste-toggle {
  grid-column: 1 / 4;
  grid-template-columns: subgrid;
  font: inherit;
  line-height: var(--leading-read);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center start;
  padding: 0;
  display: grid;
}

.taste-toggle:after {
  background: var(--ink-soft);
}

@media (hover: hover) {
  .taste-toggle:hover {
    color: var(--bottle);
  }
}

.taste-axis {
  color: inherit;
}

.taste-varies {
  font-family: var(--body);
  color: var(--ink-soft);
  font-weight: 400;
}

.taste-aid .taste-value.taste-varies {
  width: auto;
  font-family: var(--body);
  color: var(--ink-soft);
  font-weight: 400;
}

.taste-inherited.taste-varies {
  font-family: var(--body);
  font-weight: 400;
}

.taste-marker {
  font-size: var(--type-small);
  grid-column: 4;
}

.taste-marker .marker {
  margin-left: 0;
}

.taste-details {
  gap: var(--space-8);
  margin: var(--space-4) 0 var(--space-12);
  padding-left: var(--space-20);
  border-left: 1px solid var(--rule-strong);
  max-width: var(--measure);
  flex-direction: column;
  grid-column: 1 / -1;
  display: flex;
}

.taste-details[hidden] {
  display: none;
}

.taste-value-line {
  align-items: baseline;
  column-gap: var(--space-8);
  grid-template-columns: max-content minmax(0, 1fr);
  display: grid;
}

.taste-value-words {
  align-items: baseline;
  column-gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.taste-value-line .taste-pen {
  align-self: center;
}

.taste-value-line .taste-pen[hidden] {
  display: none;
}

.taste-rows .taste-details .taste-value, .taste-aid .taste-value {
  box-sizing: content-box;
  width: calc(var(--chars, 4) * 1ch);
  font-family: var(--mono);
  font-size: var(--type-body);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: var(--leading-read);
  letter-spacing: normal;
  color: var(--amber);
  text-align: center;
  padding: 0;
}

.taste-rows .taste-details span.taste-value {
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  display: inline-block;
}

.level-cells {
  gap: var(--space-4);
  min-width: 0;
  display: flex;
}

.level-cell {
  width: .8em;
  min-width: 0;
  height: var(--bar-thickness);
  box-sizing: border-box;
  border: 1px solid var(--rule-strong);
  flex: 0 .8em;
}

.level-cell.is-reached {
  border-color: var(--ink-soft);
  background: var(--ink-soft);
}

.flavor-island {
  gap: var(--space-16);
  flex-direction: column;
  display: flex;
}

fieldset.taste-block {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

fieldset.taste-block > legend {
  margin-bottom: var(--space-8);
  padding: 0;
}

.taste-block {
  gap: var(--space-8);
  max-width: var(--measure);
  flex-direction: column;
  display: flex;
}

.flavor-island > .field {
  max-width: var(--measure);
}

.taste-block > .personal-action {
  align-self: flex-start;
}

.bitter-helper {
  align-items: flex-start;
  gap: var(--space-8);
  flex-direction: column;
  display: flex;
}

.bitter-helper[hidden] {
  display: none;
}

.taste-pen {
  width: 24px;
  height: 24px;
  color: var(--ink-soft);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  position: relative;
}

.pen-mark.mark {
  width: 24px;
  height: 24px;
}

@media (hover: hover) {
  .taste-pen:hover {
    color: var(--bottle);
  }
}

.taste-entry-words {
  flex: 1 1 0;
  min-width: 0;
}

.taste-entry {
  align-items: baseline;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.editor input.quantity-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  text-align: right;
  font-weight: 500;
}

.editor input.taste-value {
  width: 6ch;
}

.editor input.taste-parts {
  text-align: right;
  width: 4ch;
}

.taste-unit, .taste-from {
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.taste-edit-actions {
  align-items: baseline;
  gap: var(--space-16);
  flex-wrap: wrap;
  display: flex;
}

.taste-gauge {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto var(--space-16) auto auto;
  column-gap: var(--space-4);
  margin-top: var(--space-8);
  font-size: var(--type-small);
  display: grid;
  position: relative;
}

.gauge-cell {
  grid-row: 1;
  width: auto;
}

.gauge-leader {
  grid-row: 2;
}

.gauge-label {
  hyphens: none;
  text-align: center;
  color: var(--ink-soft);
  line-height: var(--leading-read);
  grid-row: 3;
  justify-self: center;
}

.gauge-figure {
  font-family: var(--mono);
  font-weight: 500;
  display: block;
}

.gauge-lines {
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

.gauge-reference {
  stroke: var(--ink-soft);
}

.gauge-gap {
  stroke: var(--paper);
  stroke-linecap: butt;
}

.gauge-connector {
  stroke: var(--ink);
}

.gauge-connector.is-inheriting {
  stroke: var(--ink-soft);
}

@media screen and (width <= 34rem) {
  .fact-block .fact:has(.taste-rows) > dt {
    grid-column: 1 / -1;
  }

  .fact-block .fact:has(.taste-rows) > dd {
    grid-column: 1 / -1;
  }

  .taste-marker {
    grid-column: 2 / -1;
  }

  .gauge-label {
    overflow-wrap: break-word;
    hyphens: auto;
    width: max-content;
    max-width: 200%;
  }

  .gauge-label.is-even {
    grid-row: 4;
  }

  .gauge-label.is-first {
    justify-self: start;
    max-width: 150%;
  }

  .gauge-label.is-last {
    justify-self: end;
    max-width: 150%;
  }
}

.entity-aside {
  grid-area: 1 / 1;
  align-self: start;
}

.entity-main > :first-child, .entity-main > :first-child > h2:first-child, .entity-main > :first-child > .ingredients-head:first-child {
  margin-top: 0;
}

.entity-main {
  container: recipe / inline-size;
}

.cocktail-masthead {
  margin: 0;
}

.masthead-name {
  align-items: baseline;
  gap: var(--space-4) var(--space-24);
  flex-wrap: wrap;
  display: flex;
}

.masthead-name > h1 {
  margin: 0;
}

.cocktail-masthead > .variant-subname, .cocktail-masthead > .provenance {
  margin: var(--space-8) 0 0;
}

.variant-subname {
  font-family: var(--display);
  font-size: var(--type-sub);
  line-height: var(--leading-display);
  color: var(--ink);
}

.provenance {
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.provenance a {
  color: var(--ink-soft);
}

@media (hover: hover) {
  .provenance a:hover {
    color: var(--bottle);
  }
}

.variations {
  align-items: baseline;
  gap: var(--space-4) var(--space-16);
  margin: 0 0 var(--space-28);
  flex-wrap: wrap;
  display: flex;
}

.variations-label {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.variant-tabs {
  align-items: baseline;
  gap: var(--space-4) var(--space-16);
  flex-wrap: wrap;
  display: flex;
}

.variant-tab {
  font-size: var(--type-body);
  color: var(--ink-soft);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  text-decoration: none;
}

@media (hover: hover) {
  .variant-tab:hover {
    color: var(--bottle);
  }
}

.variant-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 500;
}

.ingredients-basis {
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.scaler {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  align-items: stretch;
  height: 28px;
  display: flex;
}

.scaler-step {
  width: 28px;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-row);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 0;
}

.scaler-step:first-child {
  border-right: 1px solid var(--rule-strong);
}

.scaler-step:last-child {
  border-left: 1px solid var(--rule-strong);
}

@media (hover: hover) {
  .scaler-step:hover:not(:disabled) {
    background: var(--paper-raised);
    color: var(--bottle);
  }
}

.scaler-step:disabled {
  opacity: .35;
  cursor: default;
}

.scaler-count, .scaler-input {
  box-sizing: border-box;
  width: 5.3rem;
  font-family: var(--body);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  padding: 0;
}

.scaler-count {
  color: var(--ink-soft);
  cursor: pointer;
  background: none;
  border: 0;
}

@media (hover: hover) {
  .scaler-count:hover {
    color: var(--ink);
    text-underline-offset: 3px;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
}

.scaler-input {
  border: 0;
  border-bottom: 1px solid var(--bottle);
  color: var(--ink);
  background: none;
}

.unit-switch {
  appearance: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  align-items: stretch;
  height: 28px;
  padding: 0;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.unit-switch:after {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.unit-side {
  padding: 0 var(--space-12);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-small);
  line-height: var(--leading-row);
  color: var(--ink-soft);
  border-bottom: 4px solid rgba(0, 0, 0, 0);
  align-items: center;
  display: flex;
}

.unit-side + .unit-side {
  border-left: 1px solid var(--rule-strong);
}

@media (hover: hover) {
  .unit-switch:hover .unit-side:not(.on) {
    color: var(--bottle);
  }
}

.unit-side.on {
  color: var(--bottle);
  border-bottom-color: var(--bottle);
}

@container recipe (width <= 390px) {
  .ingredients-head, .ingredients-head .head-controls {
    column-gap: var(--space-8);
  }

  .unit-side {
    padding: 0 var(--space-4);
  }
}

@container recipe (width <= 347px) {
  .scaler-word {
    display: none;
  }

  .scaler-count {
    width: 2.8rem;
  }
}

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

.entity-layout, .adopt-version {
  --label-col: max(calc(3rem + var(--space-4) + var(--amount-unit-chars) * var(--mono-ch)), var(--note-col));
}

.ingredients li {
  gap: var(--space-16);
  padding: var(--space-4) 0;
  font-size: var(--type-body);
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0;
  display: flex;
  position: relative;
}

.ingredients .line-name {
  flex: 1 1 0;
  min-width: 0;
}

.tip-trigger {
  height: calc(var(--type-body) * var(--leading-read));
  vertical-align: top;
  align-items: center;
  gap: var(--space-4);
  margin-left: var(--space-8);
  font-family: var(--body);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: var(--leading-row);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-soft);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
}

@media (hover: hover) {
  .tip-trigger:hover {
    color: var(--bottle);
  }
}

.ingredients .tip {
  margin: var(--space-4) 0 0;
  padding-left: calc(var(--label-col) + var(--space-16));
  max-width: calc(var(--measure) + var(--label-col) + var(--space-16));
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink);
  flex: 0 0 100%;
}

.ingredients .tip[hidden] {
  display: none;
}

.ingredients .amount {
  gap: 0 var(--space-4);
  flex: 0 0 var(--label-col);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-body);
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  grid-template-columns: 3rem minmax(0, 1fr);
  display: grid;
}

.ingredients .amount-value {
  text-align: right;
}

.ingredients li .lacking-mark {
  left: var(--label-col);
  width: 1rem;
  top: var(--space-4);
  height: calc(var(--type-body) * var(--leading-read));
  font-family: var(--body);
  font-size: var(--type-body);
  color: var(--ink-soft);
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
  position: absolute;
}

.lacking-legend {
  margin: var(--space-8) 0 0;
  font-family: var(--body);
  font-size: var(--type-small);
  color: var(--ink-soft);
  display: block;
}

.lacking-x {
  block-size: 1em;
  inline-size: 1em;
  display: inline-block;
}

.lacking-legend .lacking-x {
  margin-right: var(--space-4);
  color: var(--ink-soft);
}

.recipe-notes {
  margin: var(--space-28) 0 0;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-16);
  font-size: var(--type-body);
  display: grid;
}

.recipe-notes .note {
  display: contents;
}

.recipe-notes dt, .recipe-notes dd {
  padding: var(--space-4) 0;
}

.recipe-notes dt {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: end;
  font-weight: 600;
  transform: translateY(-.05em);
}

.recipe-notes dd {
  margin: 0;
}

.entity-aside > .prose {
  margin: var(--space-20) 0 0;
}

#recipe {
  scroll-margin-top: var(--space-12);
}

.recipe-notes .amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  font-weight: 500;
}

.recipe-notes .amount-unit {
  margin-left: var(--space-4);
}

.glass-icon {
  vertical-align: -.34em;
  block-size: 1.15em;
  inline-size: 1.15em;
  margin-left: var(--space-4);
  color: var(--ink);
  display: inline-block;
}

@container recipe (width <= 15.5rem) {
  .ingredients li {
    display: block;
  }

  .ingredients .tip {
    max-width: var(--measure);
    padding-left: 0;
  }

  .ingredients .amount {
    grid-template-columns: max-content max-content;
    justify-content: start;
  }

  .ingredients .amount-value {
    text-align: left;
  }

  .ingredients li .lacking-mark {
    width: auto;
    height: auto;
    margin-inline-start: var(--space-4);
    display: inline-flex;
    position: static;
  }

  .recipe-notes {
    display: block;
  }

  .recipe-notes dt {
    padding-block: var(--space-4) 0;
    text-align: start;
  }

  .recipe-notes dd {
    padding-block: 0 var(--space-12);
  }
}

.cocktail-description {
  margin: var(--space-20) 0 0;
  font-size: var(--type-body);
  line-height: var(--leading-read);
  color: var(--ink);
  max-width: var(--measure);
}

.entity-layout:not(:has( > .entity-aside)) > .cocktail-description {
  max-width: calc(100% - var(--recipe-col) - var(--space-40));
  margin-top: calc(var(--space-8) - var(--space-40));
  grid-area: 2 / 1 / auto / -1;
}

.entity-layout:not(:has( > .entity-aside)):has( > .cocktail-description) > .entity-main {
  grid-row: 3;
}

.arrangement {
  max-height: var(--arrangement-height);
  width: auto;
  max-width: 100%;
  height: auto;
  margin: var(--space-40) auto 0;
  display: block;
}

.entity-aside:not(:has( > .recipe-plate)) > .arrangement {
  max-height: calc(var(--recipe-col) * 1.25);
  margin-top: 0;
}

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

.instructions li {
  padding: 0 0 var(--space-16) var(--space-24);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  line-height: var(--leading-read-snapped);
  position: relative;
}

.instructions li:before {
  content: "";
  background: var(--amber);
  width: 5px;
  height: 5px;
  position: absolute;
  top: .62em;
  left: 0;
  transform: rotate(45deg);
}

.vegan-instructions-note {
  border-left: 2px solid var(--rule);
  padding-left: var(--space-16);
  margin: 0 0 var(--space-24);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.alcohol-foot {
  margin: var(--space-28) 0 0;
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.alcohol-amount, .row-note .row-figure {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}

.reader-note-text {
  width: 100%;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  line-height: var(--leading-read-snapped);
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
  background: none;
  border: 0;
  padding: 0;
  display: block;
}

@media (hover: hover) {
  .reader-note-text:hover {
    text-underline-offset: 3px;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    -webkit-text-decoration-color: var(--rule);
    text-decoration-color: var(--rule);
  }
}

.reader-note-input {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  width: 100%;
  min-height: 4.5rem;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  line-height: var(--leading-read-snapped);
  resize: vertical;
  background: none;
  border-radius: 0;
  padding: 0;
  display: block;
}

.reader-note-input:focus {
  border-bottom-color: var(--amber);
  outline: none;
}

.marker {
  margin-left: var(--space-8);
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  vertical-align: .06em;
  white-space: nowrap;
  font-weight: 600;
  display: inline-block;
}

.recipe-mine {
  align-items: baseline;
  column-gap: var(--space-24);
  row-gap: var(--space-28);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.recipe-standing {
  margin: var(--space-8) 0 0;
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.record-list {
  margin: var(--space-16) 0 0;
  max-width: var(--measure);
  padding: 0;
  list-style: none;
}

.record-list > li {
  padding-block: var(--space-12);
  border-block-start: 1px solid var(--rule);
}

.occasion-list > li {
  padding-inline-start: var(--space-24);
  position: relative;
}

.occasion-list > li:before {
  content: "";
  inset-block: var(--space-12);
  inline-size: var(--space-12);
  background: none;
  position: absolute;
  inset-inline-start: 0;
}

.occasion-list > li.is-amazing:after {
  content: "";
  inset-block: var(--space-12);
  inline-size: var(--space-12);
  background-color: color-mix(in srgb, var(--paper) 70%, transparent);
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  -webkit-mask-size: var(--space-12) var(--space-24);
  mask-size: var(--space-12) var(--space-24);
  position: absolute;
  inset-inline-start: 0;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.occasion-list > li.is-bad:before {
  background: color-mix(in srgb, var(--danger) 25%, var(--paper));
}

.occasion-list > li.is-so_so:before {
  background: color-mix(in srgb, var(--amber) 60%, var(--paper));
}

.occasion-list > li.is-good:before {
  background: color-mix(in srgb, var(--bottle-bright) 75%, var(--paper));
}

.occasion-list > li.is-amazing:before {
  background: var(--bottle-bright);
}

.record-line a, .occasion-open {
  padding-block: var(--space-4);
  display: inline-block;
}

.record-list > li:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.occasion-list > li:first-child:before, .occasion-list > li:first-child:after {
  inset-block-start: 0;
}

.occasion-list > li:has(.occasion-edit):before {
  content: none;
}

.occasion-list > li:has(.occasion-edit):after {
  content: none;
}

.record-line {
  align-items: baseline;
  column-gap: var(--space-8);
  row-gap: var(--space-4);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.occasion-day, .occasion-rating {
  font-family: var(--body);
  color: var(--ink-soft);
}

.record-words {
  margin: var(--space-4) 0 0;
  max-width: var(--measure);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.occasion-open {
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--bottle);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding-inline: 0;
}

.occasion-open .occasion-day {
  color: inherit;
}

.occasion-open:focus-visible {
  color: var(--bottle-bright);
  text-decoration: underline;
}

@media (hover: hover) {
  .occasion-open:hover {
    color: var(--bottle-bright);
    text-decoration: underline;
  }
}

.occasion-offer {
  margin: var(--space-16) 0 0;
}

.occasion-form, .occasion-edit {
  row-gap: var(--space-16);
  margin: var(--space-16) 0 0;
  max-width: var(--measure);
  flex-direction: column;
  display: flex;
}

.occasion-note-field {
  border: 0;
  border-block-end: 1px solid var(--rule-strong);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  color: var(--ink);
  min-height: calc(4 * var(--type-body) * var(--leading-read));
  resize: vertical;
  background: none;
  padding: 0;
}

.occasion-note-field:focus {
  border-block-end-color: var(--amber);
  outline: none;
}

.occasion-day-cells {
  align-items: flex-start;
  gap: var(--space-8);
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.occasion-day-box {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  display: flex;
}

.occasion-day-box > input, .occasion-day-box .dropdown-trigger {
  box-sizing: border-box;
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.occasion-day-box > input, .occasion-day-box > .scaler-step {
  flex: none;
}

.occasion-day-box > input {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.occasion-day-box .dropdown, .occasion-day-box .year-input {
  border-inline-start: 1px solid var(--rule-strong);
}

.occasion-day-box > .occasion-day-number {
  width: 2.2rem;
}

.occasion-day-box .dropdown {
  flex: 0 auto;
  width: 7.3rem;
  min-width: 0;
  display: flex;
}

.occasion-day-box .dropdown-trigger {
  width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  padding-inline-end: var(--space-24);
}

.occasion-day-box > .year-input {
  width: 3.2rem;
}

@media (hover: hover) {
  .occasion-day-box .dropdown-trigger:hover {
    text-underline-offset: 3px;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
}

.occasion-day-cells .field-hint {
  margin-top: 0;
}

.occasion-version, .occasion-day-line {
  gap: var(--space-8);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-row);
  color: var(--ink);
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  display: flex;
}

.rating-scale {
  display: block;
}

.rating-run {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.rating-cell:first-child {
  border-start-start-radius: var(--radius-2);
  border-end-start-radius: var(--radius-2);
}

.rating-cell:last-child {
  border-start-end-radius: var(--radius-2);
  border-end-end-radius: var(--radius-2);
}

.rating-cell {
  min-height: 44px;
  padding-inline: var(--space-4);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-row);
  color: var(--ink);
  overflow-wrap: anywhere;
  cursor: pointer;
  border: 0;
  border-block-end: 4px solid rgba(0, 0, 0, 0);
  border-inline-start: 1px solid var(--rule-strong);
  background: none;
}

.rating-cell:first-child {
  border-inline-start: 0;
}

.rating-cell.is-bad {
  background: color-mix(in srgb, var(--danger) 30%, var(--paper));
}

.rating-cell.is-so_so {
  background: color-mix(in srgb, var(--amber) 30%, var(--paper));
}

.rating-cell.is-good {
  background: color-mix(in srgb, var(--bottle-bright) 42%, var(--paper));
}

.rating-cell.is-amazing {
  background: var(--bottle-bright);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.rating-cell.is-amazing:before, .rating-cell.is-amazing:after {
  content: "";
  background-color: color-mix(in srgb, var(--paper) 45%, transparent);
  block-size: 24px;
  inline-size: 24px;
  position: absolute;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.rating-cell.is-amazing:before {
  inset-block-start: 0;
  inset-inline-start: 0;
}

.rating-cell.is-amazing:after {
  inset-block-end: 0;
  inset-inline-end: 0;
  transform: rotate(180deg);
}

.rating-cell.chosen {
  border-block-end-color: var(--ink);
  font-weight: 500;
}

.rating-cell.is-amazing.chosen {
  border-block-end-color: var(--paper);
}

@media (hover: hover) {
  .rating-cell:hover {
    border-block-end-color: var(--ink-soft);
  }

  .rating-cell.is-amazing:hover {
    border-block-end-color: color-mix(in srgb, var(--paper) 55%, transparent);
  }
}

.rating-meaning {
  min-height: 2lh;
  margin-block: var(--space-4) 0;
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  color: var(--ink-soft);
}

.recipe-mine {
  position: relative;
}

.menu-pick-panel {
  top: calc(100% + var(--space-8));
  z-index: var(--z-popover);
  width: max-content;
  min-width: min(20rem, 100%);
  max-width: min(24rem, calc(100vw - var(--space-40)));
  max-height: 26rem;
  padding: var(--space-8) 0 var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--frame);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
  flex-direction: column;
  display: flex;
  position: absolute;
  left: 0;
}

.menu-pick-group, .menu-pick-acts, .menu-pick-list .section-note {
  padding-inline: var(--space-8);
}

.menu-pick-panel .popover-head {
  padding-block-start: 0;
}

.menu-pick-new {
  align-items: baseline;
  gap: var(--space-8);
  flex-wrap: wrap;
  flex-basis: 100%;
  margin: 0;
  display: flex;
}

.menu-pick-new input {
  inline-size: 0;
  min-inline-size: 0;
  padding: var(--space-8) 0;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background-color: rgba(0, 0, 0, 0);
  flex: 1 1 0;
}

.menu-pick-new input:focus-visible {
  border-bottom-color: var(--amber);
  outline: none;
}

.menu-pick .check {
  padding-inline: var(--space-8);
  border-radius: var(--radius-2);
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

@media (hover: hover) {
  .menu-pick .check:hover {
    background: var(--row-on);
  }
}

.menu-pick-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.menu-pick .row-note {
  margin-inline-start: 0;
}

.menu-pick-list {
  overscroll-behavior: contain;
  flex: auto;
  min-height: 0;
  overflow-y: auto;
}

.menu-pick-group {
  margin: var(--space-8) 0 var(--space-4);
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.menu-pick-acts {
  align-items: baseline;
  gap: var(--space-16);
  padding-block: var(--space-8) var(--space-4);
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.menu-pick-acts .personal-action {
  margin-inline-start: auto;
}

.menu-pick-list > :first-child {
  margin-block-start: 0;
}

.menu-derived {
  align-items: baseline;
  column-gap: var(--space-24);
  row-gap: var(--space-28);
  margin: var(--space-40) 0 0;
  flex-wrap: wrap;
  display: flex;
}

.mine-head {
  margin-block-start: var(--space-40);
}

.vegan-switch {
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
  position: relative;
}

.vegan-switch[aria-pressed="true"] {
  color: var(--bottle);
}

.vegan-switch[aria-pressed="true"]:before {
  content: "";
  background: var(--bottle);
  border-radius: 0 0 var(--radius-2) var(--radius-2);
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@media (hover: hover) {
  .vegan-switch:hover > .vegan-switch-mark {
    color: var(--bottle);
  }
}

.vegan-switch-mark.mark, .move-mark.mark, .remove-mark.mark {
  block-size: 18px;
  inline-size: 18px;
  display: block;
}

.mark--move-down {
  transform: rotate(180deg);
}

.key-mark.mark {
  vertical-align: -.14em;
  block-size: 1em;
  inline-size: 1em;
  display: inline-block;
}

.vegan-mark {
  margin-left: var(--space-8);
  font-family: var(--body);
  cursor: help;
  text-decoration: none;
}

.vegan-glyph {
  font-size: var(--type-small);
  vertical-align: -.15em;
  background-color: currentColor;
  block-size: 1em;
  inline-size: 1em;
  display: inline-block;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.vegan-glyph.is-swap {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M16.5 4.5 21 9l-4.5 4.5'/%3E%3Cpath d='M21 15H3'/%3E%3Cpath d='M7.5 10.5 3 15l4.5 4.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M16.5 4.5 21 9l-4.5 4.5'/%3E%3Cpath d='M21 15H3'/%3E%3Cpath d='M7.5 10.5 3 15l4.5 4.5'/%3E%3C/svg%3E");
}

.vegan-glyph.is-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8.5 8.75a3.5 3.5 0 1 1 4.9 3.21c-1.17.55-1.9 1.47-1.9 2.79v.75'/%3E%3Ccircle cx='11.5' cy='19' r='1.15' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8.5 8.75a3.5 3.5 0 1 1 4.9 3.21c-1.17.55-1.9 1.47-1.9 2.79v.75'/%3E%3Ccircle cx='11.5' cy='19' r='1.15' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
}

.vegan-glyph.is-blocked {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7.7'/%3E%3Cpath d='M6.55 17.45 17.45 6.55'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7.7'/%3E%3Cpath d='M6.55 17.45 17.45 6.55'/%3E%3C/svg%3E");
}

.vegan-swap-words {
  margin-left: var(--space-4);
  font-size: var(--type-small);
  color: var(--ink-soft);
  display: inline;
}

.vegan-mark.is-swap, .vegan-mark.is-check {
  color: var(--ink-soft);
}

.vegan-mark.is-blocked {
  color: var(--ink);
}

.vegan-legend {
  gap: 0 var(--space-16);
  margin: var(--space-8) 0 0;
  font-family: var(--body);
  font-size: var(--type-small);
  color: var(--ink-soft);
  flex-wrap: wrap;
  display: flex;
}

.vegan-legend-item {
  white-space: nowrap;
}

.similar {
  margin-inline-start: calc(var(--recipe-col) + var(--space-40));
}

.entity-layout:not(:has( > .entity-aside)) ~ .similar {
  max-width: calc(100% - var(--recipe-col) - var(--space-40));
  margin-inline-start: 0;
}

.facet-note {
  margin: var(--space-8) 0 0;
  padding-inline: var(--space-8);
  font-size: var(--type-small);
}

.browse-head-row {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8) var(--space-16);
  flex-wrap: wrap;
  display: flex;
}

.browse-head-row:has( > .personal-action) {
  margin-bottom: var(--space-20);
}

.page-title:has( + .personal-action) {
  margin-bottom: 0;
}

.browse-head-row .personal-action {
  white-space: nowrap;
}

.browse-bar {
  margin: 0 0 var(--space-8);
}

.browse-search > .browse-search-input[type="search"] {
  width: 100%;
  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-28);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  scroll-margin-top: var(--space-12);
  background-color: rgba(0, 0, 0, 0);
}

.browse-search-input:focus {
  border-bottom-color: var(--amber);
  outline: none;
}

.filter-toggle {
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-16);
  cursor: pointer;
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
  display: none;
  position: relative;
}

.filter-toggle:before {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.filter-toggle.open {
  color: var(--ink);
}

.facets {
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-16);
  flex-wrap: wrap;
  display: flex;
}

.facet {
  position: relative;
}

.facet > summary {
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  list-style: none;
  display: inline-flex;
  position: relative;
}

.facet > summary::-webkit-details-marker {
  display: none;
}

.facet > summary:before {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

@media (hover: hover) {
  .facet > summary:hover {
    color: var(--bottle);
  }
}

.facet[open] > summary {
  color: var(--ink);
}

.facet-count {
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.facet-menu {
  top: calc(100% + var(--space-8));
  z-index: var(--z-popover);
  width: max-content;
  min-width: 13rem;
  max-width: min(22rem, calc(100vw - var(--space-40)));
  padding: var(--space-4) 0;
  background: var(--paper-raised);
  border: 1px solid var(--frame);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
  position: absolute;
  left: 0;
}

.facet-list {
  overscroll-behavior: contain;
  max-height: 18rem;
  overflow-y: auto;
}

.menu-add {
  max-width: var(--measure);
  margin: 0;
  position: relative;
}

.menu-add-input {
  inline-size: 100%;
  padding: var(--space-8) var(--space-4) var(--space-8) 0;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  background-color: rgba(0, 0, 0, 0);
}

.menu-add-input:focus-visible {
  border-bottom-color: var(--amber);
  outline: none;
}

.menu-add-results {
  top: calc(100% + var(--space-8));
  z-index: var(--z-popover);
  padding: var(--space-4) 0;
  background: var(--paper-raised);
  border: 1px solid var(--frame);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
  overscroll-behavior: contain;
  max-height: 18rem;
  margin: 0;
  list-style: none;
  position: absolute;
  inset-inline: 0;
  overflow-y: auto;
}

.menu-add-results button {
  inline-size: 100%;
  padding: var(--space-4) var(--space-16);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-read);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  display: block;
}

.menu-add-results button.is-active {
  background: var(--row-on);
  color: var(--bottle);
}

@media (hover: hover) {
  .menu-add-results button:hover {
    background: var(--row-on);
    color: var(--bottle);
  }
}

.menu-said {
  margin-block: var(--space-8) var(--space-24);
}

.range-menu {
  min-width: 20.5rem;
}

.range-row {
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  font-size: var(--type-small);
  white-space: nowrap;
  flex-wrap: wrap;
  align-items: baseline;
  display: flex;
}

.range-row input {
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  width: 3.3rem;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  text-align: right;
  font-variant-numeric: tabular-nums;
  appearance: none;
  background: none;
  border-radius: 0;
  padding: 0;
}

.range-row input:disabled {
  opacity: .5;
}

.admin .results-head {
  margin-top: var(--space-28);
}

.result-count {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 600;
}

.results-report > p {
  margin: 0;
}

.results-report > .empty {
  border-top: 0;
  padding-top: 0;
}

.cocktail-grid, .similar-grid {
  gap: var(--space-40) var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.cocktail-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
}

.similar-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
}

.cocktail-grid > li, .similar-grid > li {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.cocktail-cell {
  color: var(--ink);
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  display: flex;
}

.cocktail-cell-frame {
  --mat: .03;
}

.cocktail-cell-photo, .cocktail-cell-drawing {
  aspect-ratio: 4 / 5;
  display: block;
}

.cocktail-cell-photo {
  object-fit: cover;
}

.cocktail-cell-drawing {
  color: var(--ink-soft);
}

.cocktail-cell-name {
  padding-top: var(--space-8);
  font-size: var(--type-body);
  line-height: var(--leading-read);
}

a.cocktail-cell:focus-visible .cocktail-cell-frame {
  border-color: var(--rule-strong);
}

@media (hover: hover) {
  a.cocktail-cell:hover .cocktail-cell-frame {
    border-color: var(--rule-strong);
  }
}

a.cocktail-cell:focus-visible .cocktail-cell-name {
  color: var(--bottle-bright);
  text-underline-offset: .18em;
  text-decoration: underline;
}

a.cocktail-cell:focus-visible .name-qualifier {
  color: inherit;
}

@media (hover: hover) {
  a.cocktail-cell:hover .cocktail-cell-name {
    color: var(--bottle-bright);
    text-underline-offset: .18em;
    text-decoration: underline;
  }

  a.cocktail-cell:hover .name-qualifier {
    color: inherit;
  }
}

.cocktail-grid .marker, .similar-grid .marker {
  margin-inline-start: 0;
}

.cocktail-cell-note {
  margin: var(--space-4) 0 0;
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.mix-form {
  margin-top: var(--space-20);
}

.browse-search ~ .name-index, .standing-row ~ .name-index {
  margin-top: var(--space-40);
}

.taxonomy-tree ul {
  border-inline-start: 1px solid var(--rule);
  flex-basis: 100%;
  margin: 0;
  padding-inline-start: var(--space-20);
  list-style: none;
}

.taxonomy-tree li:has( > .taxonomy-category) > ul {
  border-inline-start-color: var(--rule-strong);
}

.taxonomy-category {
  font-family: var(--display);
  font-size: var(--type-sub);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  border: 0;
  margin-block: 0;
  padding: 0;
  display: flex;
}

.taxonomy-tree > li:has( > ul) {
  margin-block-end: var(--space-40);
}

.taxonomy-tree > li:last-child {
  margin-block-end: 0;
}

.taxonomy-tree ul .taxonomy-category {
  margin-block-start: var(--space-24);
}

.taxonomy-tree ul > li:first-child > .taxonomy-category {
  margin-block-start: 0;
}

.taxonomy-tree ul > li:has( > ul) + li:not(:has( > .taxonomy-category)) {
  margin-block-start: var(--space-24);
}

.facet-menu .taxonomy-tree ul > li:has( > ul) + li {
  margin-block-start: 0;
}

.dropdown-menu .taxonomy-tree ul > li:has( > ul) + li {
  margin-block-start: 0;
}

.taxonomy-category > a {
  padding-block: var(--space-4);
  color: inherit;
}

.taxonomy-category:not(:has( > a)) {
  padding-block: var(--space-4);
}

.glass-grid {
  gap: var(--space-24);
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.glass-grid > li {
  display: flex;
}

.glass-cell {
  color: var(--ink);
  flex-direction: column;
  flex: 1;
  align-items: stretch;
  text-decoration: none;
  display: flex;
}

.glass-cell-frame {
  --mat: .08;
}

.glass-cell-drawing {
  aspect-ratio: 1;
  color: var(--ink-soft);
  --glass-rank: 1;
  transform: scale(var(--glass-rank));
  transform-origin: 50% 91.667%;
  display: block;
}

.glass-cell-name {
  padding-top: var(--space-12);
  font-size: var(--type-body);
  line-height: var(--leading-read);
}

.glass-cell-count {
  padding-top: var(--space-4);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.glass-cell:focus-visible .glass-cell-frame {
  border-color: var(--rule-strong);
}

@media (hover: hover) {
  .glass-cell:hover .glass-cell-frame {
    border-color: var(--rule-strong);
  }
}

.glass-cell:focus-visible .glass-cell-name {
  color: var(--bottle-bright);
  text-underline-offset: .18em;
  text-decoration: underline;
}

@media (hover: hover) {
  .glass-cell:hover .glass-cell-name {
    color: var(--bottle-bright);
    text-underline-offset: .18em;
    text-decoration: underline;
  }
}

.glass-drawing {
  aspect-ratio: 1;
  width: 100%;
  color: var(--ink-soft);
  margin: 0 0 var(--space-40);
  display: block;
}

.glass-plate {
  --mat: .08;
  --mount-ar: calc(var(--photo-ar) / (1 - 2 * var(--mat) + 2 * var(--mat) * var(--photo-ar)));
  width: min(100%, calc(125% * var(--mount-ar)));
  margin: 0 0 var(--space-40);
}

.entity-plate {
  aspect-ratio: var(--photo-ar);
  width: min(100%, calc(125% * var(--photo-ar)));
  margin: 0 0 var(--space-40);
}

.entity-plate .ref-photo {
  width: 100%;
  height: auto;
  display: block;
}

.purchase + .purchase {
  margin-top: var(--space-40);
}

.purchase-buy {
  font-family: var(--display);
  font-size: var(--type-sub);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  border: 0;
  flex: 0 auto;
  margin: 0;
  padding: 0;
}

.drawing-line {
  margin: 0 0 var(--space-24);
}

.used-in-count {
  margin-left: var(--space-8);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-small);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.ref-photo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.vegan-account {
  font-family: var(--body);
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.vegan-account-status {
  font-size: var(--type-body);
  color: var(--ink);
}

.bar-count {
  font-family: var(--body);
  font-size: var(--type-small);
  color: var(--ink-soft);
  margin: 0;
}

.bar-count.is-counted {
  margin-bottom: var(--space-24);
}

.bar-count.error {
  color: var(--danger);
}

.within-reach-link {
  margin: 0 0 var(--space-24);
  min-height: round(up, calc(var(--type-small) * var(--leading-row) + 2 * var(--space-4) + 2px), 1px);
}

.bar-item {
  font-size: var(--type-body);
}

.shelf-line {
  width: fit-content;
}

.shelf-slot {
  min-height: round(up, calc(var(--type-small) * var(--leading-read) + 2 * var(--space-4)), 1px);
  justify-items: start;
  row-gap: var(--space-24);
  margin-block-start: var(--space-20);
  display: grid;
}

.chart-opening {
  max-width: var(--measure);
  margin: 0 0 var(--space-16);
}

.count-bars {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}

.count-bars th, .count-bars td {
  padding: var(--space-4) 0;
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}

.count-bars .count-name {
  width: 1%;
  padding-right: var(--space-16);
  font-size: var(--type-body);
  white-space: nowrap;
}

.count-bars .count-track {
  width: 100%;
}

@media screen and (width <= 34rem) {
  .count-bars:not(.columns) {
    display: block;
  }

  .count-bars:not(.columns) tbody {
    grid-template-columns: max-content 1fr;
    display: grid;
  }

  .count-bars:not(.columns) tr {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    padding: var(--space-8) 0;
    grid-template-areas: "name name"
                         "count track";
    display: grid;
  }

  .count-bars:not(.columns) .count-bar, .count-bars:not(.columns) .count-figure {
    block-size: 1em;
  }

  .count-bars:not(.columns) th, .count-bars:not(.columns) td {
    padding: 0;
  }

  .count-bars:not(.columns) .count-name {
    white-space: normal;
    grid-area: name;
    width: auto;
  }

  .count-bars:not(.columns) .count-track {
    grid-area: track;
    width: auto;
  }

  .count-bars:not(.columns) .count {
    width: auto;
    padding-right: var(--space-8);
    grid-area: count;
  }
}

.count-bars.columns, .count-bars.columns tbody {
  column-gap: var(--space-8);
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  display: grid;
}

.count-bars.columns tbody {
  border-bottom: 1px solid var(--rule);
  grid-column: 1 / -1;
}

.count-bars.columns tr {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: calc(var(--leading-read) * 1em) var(--plot-height) max-content;
  grid-template-areas: "count"
                       "track"
                       "name";
  display: grid;
}

.count-bars.columns th, .count-bars.columns td {
  text-align: center;
  width: auto;
  padding: 0;
}

.count-bars.columns .count-name {
  padding-top: var(--space-4);
  white-space: nowrap;
  grid-area: name;
  grid-template-columns: max-content;
  justify-content: center;
  display: grid;
}

.count-bars.columns .count-track {
  justify-content: center;
  align-items: end;
  gap: var(--space-4);
  grid-area: track;
  display: flex;
}

.count-bars.columns .count-bar {
  flex: 1 1 0;
  block-size: 100%;
  max-inline-size: 1.4em;
}

.count-bars.columns .count-bar:before {
  inline-size: auto;
  block-size: calc(var(--share, 0) * 100%);
  inset: auto 0 0;
}

.count-bars.columns .count {
  justify-content: center;
  align-items: end;
  gap: var(--space-4);
  grid-area: track;
  display: flex;
}

.count-bars.columns .count-figure {
  bottom: calc(var(--share, 0) * var(--plot-height));
  max-inline-size: calc(1.4 * var(--type-body));
  white-space: nowrap;
  flex: 1 1 0;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.chart-axis {
  margin: var(--space-4) 0 0;
  font-size: var(--type-small);
  line-height: var(--leading-read);
  text-align: center;
  color: var(--ink-soft);
}

.count-bar {
  block-size: calc(var(--leading-read) * 1em);
  display: block;
  position: relative;
}

.count-bar:before {
  content: "";
  inset-block: calc((100% - var(--bar-thickness)) / 2);
  box-sizing: border-box;
  inline-size: calc(var(--share, 0) * 100%);
  background: var(--ink-soft);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  position: absolute;
  inset-inline-start: 0;
}

.count-bars:not(.columns) tr:has(.count-bar.own) .count-bar {
  block-size: calc(var(--bar-thickness) + var(--space-4));
}

.count-bars:not(.columns) tr:has(.count-bar.own) .count-figure {
  block-size: 1em;
}

.count-bars:not(.columns) tr:has(.count-bar.own) > .count {
  vertical-align: middle;
}

.count-bars:not(.columns):has(.count-bar.own) th {
  padding-block: var(--space-8);
}

.count-bars:not(.columns):has(.count-bar.own) td {
  padding-block: var(--space-8);
}

.count-bars:not(.columns):has(.count-bar.own) .count-figure:only-child {
  block-size: 2em;
}

.count-bars:not(.columns) tr:has(.count-bar.own) > .count-name {
  vertical-align: middle;
}

.count-bars:not(.columns) tr:has(.count-bar.own) > .count-track {
  vertical-align: middle;
}

.count-bar.own:before {
  border: 1px solid var(--ink-soft);
  background: none;
}

.count-bar.nothing:before {
  visibility: hidden;
}

.count-bars .count {
  width: 1%;
  padding-right: var(--space-16);
  text-align: right;
  white-space: nowrap;
}

.count-figure {
  block-size: calc(var(--leading-read) * var(--type-body));
  font-family: var(--mono);
  font-size: var(--type-small);
  font-weight: 500;
  line-height: var(--leading-read);
  color: var(--ink-soft);
  justify-content: end;
  align-items: center;
  display: flex;
}

.year-plot {
  border-bottom: 1px solid var(--rule);
  touch-action: pan-y;
  cursor: crosshair;
  position: relative;
}

.year-plot-svg {
  width: 100%;
  height: var(--plot-height);
  display: block;
  overflow: visible;
}

.year-rug {
  width: 100%;
  height: 8px;
  display: block;
}

.year-line {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.year-line.own {
  stroke-dasharray: 6 4;
}

.year-cursor {
  stroke: var(--ink);
  stroke-width: 1px;
}

.tick {
  stroke: var(--ink-soft);
  stroke-width: 1px;
}

.year-labels {
  height: calc(var(--leading-read) * 1em);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
  position: relative;
}

.year-labels > span {
  white-space: nowrap;
  position: absolute;
  transform: translateX(-50%);
}

.strength-chart {
  column-gap: var(--space-8);
  grid-template-columns: max-content 1fr;
  grid-template-areas: "up plot"
                       ". across"
                       ". axis";
  display: grid;
}

.strength-axis {
  grid-area: axis;
}

.strength-labels-up {
  inline-size: var(--space-40);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
  text-align: right;
  grid-area: up;
  position: relative;
}

.strength-labels-up > span {
  position: absolute;
  right: 0;
  transform: translateY(50%);
}

.strength-plot {
  block-size: var(--plot-height);
  border-bottom: 1px solid var(--rule);
  touch-action: pan-y;
  cursor: crosshair;
  grid-area: plot;
  position: relative;
}

.strength-labels-across {
  grid-area: across;
}

.strength-labels-across > span:first-child {
  transform: none;
}

.strength-labels-across > span:last-child {
  transform: translateX(-100%);
}

.dot {
  box-sizing: border-box;
  background: var(--ink-soft);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  border-radius: 50%;
  block-size: 8px;
  inline-size: 8px;
  position: absolute;
  transform: translate(-50%, 50%);
}

.dot.own {
  border: 1px solid var(--ink-soft);
  background: none;
}

.dot.current {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.key-dot {
  box-sizing: border-box;
  block-size: 8px;
  inline-size: 8px;
  margin-right: var(--space-4);
  background: var(--ink-soft);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  border-radius: 50%;
  display: inline-block;
}

.key-dot.own {
  border: 1px solid var(--ink-soft);
  background: none;
}

.readout {
  min-height: round(up, var(--leading-read) * 1em, 1px);
  margin: var(--space-8) 0 0;
  line-height: var(--leading-read);
}

.readout.names {
  min-height: round(up, var(--leading-read) * 2em, 1px);
}

.chart-key {
  gap: 0 var(--space-16);
  margin: var(--space-8) 0 0;
  font-family: var(--body);
  font-size: var(--type-small);
  color: var(--ink-soft);
  flex-wrap: wrap;
  display: flex;
}

.chart-key-item {
  white-space: normal;
}

.key-bar, .key-tick, .key-line {
  vertical-align: baseline;
  margin-right: var(--space-4);
  display: inline-block;
}

.key-bar {
  inline-size: 1.4em;
  block-size: var(--bar-thickness);
  background: var(--ink-soft);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.key-bar.own {
  box-sizing: border-box;
  border: 1px solid var(--ink-soft);
  background: none;
}

.key-tick {
  background: var(--ink-soft);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  block-size: 6px;
  inline-size: 1px;
}

.key-tick.half {
  block-size: 3px;
}

.key-line {
  border-top: 2px solid var(--ink-soft);
  vertical-align: middle;
  inline-size: 1.4em;
}

.key-line.own {
  border-top-style: dashed;
}

.dated-drinks {
  margin-top: var(--space-16);
}

.dated-drinks > summary {
  align-items: center;
  gap: var(--space-8);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  display: flex;
  position: relative;
}

.dated-drinks > summary::-webkit-details-marker {
  display: none;
}

.dated-drinks > summary:before {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

@media (hover: hover) {
  .dated-drinks > summary:hover {
    color: var(--bottle);
  }
}

.dated-drinks table {
  margin-top: var(--space-8);
  border-collapse: collapse;
}

.dated-drinks td {
  padding: 0 var(--space-16) 0 0;
  vertical-align: baseline;
}

.dated-drinks td:last-child {
  overflow-wrap: anywhere;
}

.dated-year {
  font-size: var(--type-small);
  color: var(--ink-soft);
  white-space: nowrap;
}

.auth {
  max-width: 30rem;
}

.auth form {
  align-items: flex-start;
  gap: var(--space-16);
  margin-top: var(--space-24);
  flex-direction: column;
  display: flex;
}

.auth form .auth-field, .auth form .field {
  width: 100%;
  max-width: 22rem;
}

.auth form .field:has( > textarea) {
  max-width: none;
}

.auth-alt {
  gap: var(--space-28) var(--space-20);
  font-size: var(--type-small);
  color: var(--ink-soft);
  margin: var(--space-16) 0 0;
  flex-wrap: wrap;
  display: flex;
}

.auth-actions {
  align-items: center;
  gap: var(--space-16);
  margin: var(--space-16) 0 0;
  flex-wrap: wrap;
  display: flex;
}

.auth form > .auth-actions {
  margin-block-start: 0;
}

.auth-said {
  margin-block: 0 var(--space-8);
}

.recovery-codes {
  margin: var(--space-12) 0;
  columns: 2;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-body);
  padding: 0;
  list-style: none;
}

.recovery-codes li {
  padding: var(--space-4) 0;
}

.auth-rows {
  margin: var(--space-8) 0 var(--space-16);
  padding: 0;
  list-style: none;
}

.auth-rows li {
  align-items: baseline;
  gap: var(--space-16);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  display: flex;
}

.auth-rows li > :last-child {
  margin-left: auto;
}

.auth-rows li > :has( + .confirm-consequence) {
  margin-left: auto;
}

.auth-row-meta {
  font-size: var(--type-small);
}

@media screen and (width <= 34rem) {
  .auth-row-meta {
    flex: 1 0 100%;
    order: 3;
    margin-left: 0;
  }
}

.auth-passkey-name {
  width: 9rem;
}

.auth-inline-form {
  align-items: flex-end;
  gap: var(--space-16);
  margin-top: var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

.auth-inline-form input {
  min-width: 11rem;
}

.auth-qr {
  aspect-ratio: 1;
  background: var(--paper-bright);
  inline-size: min(11rem, 100%);
  padding: var(--space-8);
  image-rendering: pixelated;
  display: block;
}

.auth-secret {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-small);
  overflow-wrap: anywhere;
  color: var(--ink-soft);
}

.auth-signout {
  margin-top: var(--space-40);
}

.miss-onward a {
  display: inline-block;
  position: relative;
}

.miss-onward a:after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.skip-link {
  top: calc(-1 * var(--space-40));
  left: var(--space-20);
  z-index: var(--z-popover);
  padding: var(--space-4) var(--space-16);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-2);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  text-decoration: none;
  position: fixed;
}

.skip-link:focus {
  top: var(--space-8);
}

.admin-bar {
  max-width: var(--shell);
  margin: 0 auto var(--space-24);
  padding: var(--space-16) var(--space-20) var(--space-8);
  border-bottom: 1px solid var(--rule);
}

.admin-bar + main {
  padding-top: 0;
}

.admin-bar-top {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-16);
  display: flex;
}

.admin-tag {
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-raised);
  background: var(--bottle);
  padding: 0 var(--space-8);
  border-radius: var(--radius-2);
  font-weight: 600;
}

.admin-nav {
  gap: var(--space-24) var(--space-16);
  margin-top: var(--space-28);
  font-size: var(--type-small);
  flex-wrap: wrap;
  display: flex;
}

.admin-nav a {
  position: relative;
}

.admin-nav a:after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

.admin-logout {
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  position: relative;
}

.admin-bar-top .admin-logout:after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

@media (hover: hover) {
  .admin-logout:hover {
    color: var(--bottle);
    text-decoration: underline;
  }
}

.admin-login {
  max-width: 24rem;
}

.admin-login form {
  gap: var(--space-12);
  align-items: flex-end;
  display: flex;
}

.admin-token {
  flex: 1;
}

.version-zone {
  margin: var(--space-40) 0;
}

.version-zone > .entity-layout, .provenance-block + .entity-layout, .description-block + .entity-layout {
  margin-top: var(--space-40);
}

.version-zone .variations {
  margin: 0 0 var(--space-8);
}

.no-editor {
  margin: var(--space-40) 0 0;
}

.version-tray {
  gap: var(--space-12) var(--space-20);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-12) 0 var(--space-16);
  flex-wrap: wrap;
  align-items: flex-end;
  display: flex;
}

.version-tray > .field {
  flex: 8.25rem;
  min-width: 0;
  max-width: 11.25rem;
}

.version-tray .field-hint.flawed {
  flex: 0 0 100%;
}

.version-tray .status-line {
  margin: 0 0 var(--space-4);
  min-width: 8rem;
  min-height: 0;
}

.default-marker {
  margin-bottom: var(--space-8);
  margin-left: 0;
}

.admin-create {
  margin: var(--space-28) 0;
}

.adopt {
  max-width: var(--recipe-col);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  padding: var(--space-28);
  margin-bottom: var(--space-40);
}

.adopt > h2 {
  margin-top: 0;
}

.adopt-claim + .adopt-claim {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-28);
  padding-top: var(--space-28);
}

.adopt-claim-head {
  align-items: baseline;
  gap: 0 var(--space-12);
  flex-wrap: wrap;
  display: flex;
}

.adopt-claim-head h3 {
  font-family: var(--display);
  font-size: var(--type-sub);
  font-weight: 400;
  line-height: var(--leading-display);
  margin: 0;
}

.adopt-owner {
  font-family: var(--body);
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.adopt-version {
  margin-top: var(--space-12);
}

.adopt-version-head {
  align-items: baseline;
  gap: 0 var(--space-12);
  flex-wrap: wrap;
  display: flex;
}

.adopt-label {
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.adopt-drops {
  font-family: var(--body);
  font-size: var(--type-small);
  color: var(--danger);
}

.adopt-version .ingredients, .adopt-version .instructions {
  margin: var(--space-4) 0 var(--space-8);
}

.adopt-take {
  margin-top: var(--space-4);
}

.adopt-acts {
  margin: var(--space-24) 0 0;
}

.editor input.name-input {
  width: 100%;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--type-title);
  line-height: var(--leading-display);
  letter-spacing: -.005em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  margin: 0 0 var(--space-28);
  padding: 0;
}

.provenance-block {
  max-width: var(--measure);
}

.provenance-block .recipe-notes {
  margin-top: 0;
}

.year-input {
  width: 5rem;
}

.year-row {
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.year-row .field-hint {
  flex-basis: 100%;
  margin-top: 0;
}

.editor .entity-layout, .editor .recipe-island, .editor .provenance-block {
  --label-col: max(calc(3rem + var(--space-4) + var(--amount-unit-chars) * var(--mono-ch) + var(--space-24)), var(--note-col));
}

.ingredient-lines li {
  align-items: baseline;
  gap: var(--space-16);
  flex-wrap: wrap;
  row-gap: 0;
  display: flex;
}

.ingredient-lines li .field-hint.flawed {
  flex: 0 0 100%;
  order: 20;
}

.ingredient-lines li .tip-panel {
  margin: var(--space-4) 0 0;
  padding-left: calc(var(--label-col) + var(--space-16));
  flex: 0 0 100%;
}

.ingredient-lines li .tip-panel[hidden] {
  display: none;
}

.ingredient-lines li .tip-input {
  width: 100%;
  max-width: var(--measure);
  resize: vertical;
  font-size: var(--type-small);
  line-height: var(--leading-read);
  display: block;
}

.ingredient-lines .amount {
  flex: 0 0 var(--label-col);
  gap: var(--space-4);
  align-items: baseline;
  display: flex;
}

.recipe-island {
  container: recipe / inline-size;
}

.editor .recipe-notes .amount {
  gap: var(--space-4);
  align-items: baseline;
  display: inline-flex;
}

.editor input.quantity-input {
  width: 3rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-body);
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  text-align: right;
  flex: 0 0 3rem;
}

.unit-picker {
  flex: 0 auto;
  min-width: 0;
}

.unit-picker .dropdown-trigger {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.ingredient-lines .line-name {
  flex: 1;
  min-width: 0;
}

.editor-block {
  max-width: 22rem;
  flex-direction: column;
  align-self: stretch;
  gap: 0;
  margin-block-start: calc(var(--space-40) - var(--space-16));
  display: flex;
}

.editor-block > h2 {
  margin-block-start: 0;
}

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

.editor-line {
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule);
  display: flex;
}

.editor-line-name {
  min-width: 0;
  font-size: var(--type-body);
  line-height: var(--leading-read);
  flex: auto;
}

.editor-line-tools {
  gap: var(--space-4);
  flex: none;
  display: inline-flex;
}

.editor-lines-key {
  margin-block: var(--space-8) 0;
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.editor-lines-said {
  min-height: round(up, var(--leading-read) * 2em, 1px);
  margin-block: var(--space-8) var(--space-24);
}

.add-ingredient.in-column {
  margin-left: calc(var(--label-col) + var(--space-16));
}

.add-ingredient .catalog-picker {
  max-width: none;
}

@container recipe (width <= calc(16.2rem + 132px)) {
  .ingredient-lines li {
    column-gap: var(--space-16);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-block-end: var(--space-12);
    display: grid;
  }

  .ingredient-lines .line-name {
    grid-area: 1 / 1;
  }

  .ingredient-lines .amount {
    grid-area: 2 / 1;
  }

  .ingredient-lines .unit-picker {
    flex: 0 auto;
  }

  .ingredient-lines li .editor-line-tools {
    grid-area: 1 / 2 / 3;
  }

  .ingredient-lines li .field-hint.flawed {
    grid-area: 3 / 1 / auto / -1;
  }

  .ingredient-lines li .tip-panel {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .add-ingredient.in-column {
    margin-left: 0;
  }
}

.chip-run {
  gap: var(--space-8);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.recipe-visibility {
  margin-top: var(--space-28);
}

.description-block {
  max-width: var(--measure);
  margin-top: var(--space-40);
}

.name-input + .description-block {
  margin-top: 0;
}

.description-input {
  resize: vertical;
  width: 100%;
  line-height: var(--leading-read);
  display: block;
}

.section-hint {
  margin: var(--space-12) 0 0;
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.section-hint code {
  font-family: var(--mono);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  font-size: .92em;
  font-weight: 500;
}

.cap-count {
  margin: var(--space-8) 0 0;
  min-height: round(up, var(--leading-read) * 1em, 1px);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.save-row {
  gap: var(--space-12);
  margin-top: var(--space-20);
  flex-wrap: wrap;
  align-items: baseline;
  display: flex;
}

.draft-steer {
  margin: calc(var(--space-24) * -1) 0 var(--space-28);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.draft-steer-pick {
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--bottle);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 500;
}

.draft-steer-pick:first-of-type {
  margin-left: var(--space-4);
}

@media (hover: hover) {
  .draft-steer-pick:hover {
    color: var(--bottle-bright);
    text-underline-offset: 3px;
    text-decoration: underline;
  }
}

.draft-steer-out {
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.draft-aimed {
  margin: calc(var(--space-12) * -1) 0 var(--space-28);
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.steps-field {
  max-width: var(--measure);
  position: relative;
}

.steps-field .steps-input, .steps-mirror {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-4) 0 var(--space-4) var(--space-24);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-read);
  line-height: var(--leading-read-snapped);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  border: 0;
  margin: 0;
}

.steps-field .steps-input {
  border-bottom: 1px solid var(--rule-strong);
  resize: vertical;
  background: none;
  border-radius: 0;
  display: block;
  position: relative;
}

.steps-field .steps-input:focus {
  border-bottom-color: var(--amber);
  outline: none;
}

.steps-mirror {
  color: rgba(0, 0, 0, 0);
  pointer-events: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.step-row {
  display: block;
  position: relative;
}

.step-row:before {
  content: "";
  left: calc(var(--space-24) * -1);
  background: var(--amber);
  width: 5px;
  height: 5px;
  position: absolute;
  top: .62em;
  transform: rotate(45deg);
}

.step-row.is-blank:before {
  content: none;
}

.picture-block {
  margin-bottom: var(--space-28);
}

.picture-body {
  gap: var(--space-16) var(--space-28);
  flex-wrap: wrap;
  align-items: flex-start;
  display: flex;
}

.picture-plate {
  flex: 0 16rem;
  min-width: 0;
}

.picture-controls {
  flex: 16rem;
  min-width: 0;
}

.picture-plate .field {
  margin-top: var(--space-4);
  max-width: 16rem;
}

.picture-empty {
  margin: 0 0 var(--space-8);
}

.picture-preview {
  width: fit-content;
  max-width: 14rem;
  margin: 0 0 var(--space-12);
}

.picture-preview > img {
  width: auto;
  max-width: calc(100% * (1 - 2 * var(--mat)));
  max-height: 18rem;
}

.picture-preview-photo > img {
  width: calc(100% * (1 - 2 * var(--mat)));
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: none;
}

.picture-note {
  margin: var(--space-16) 0 0;
  font-size: var(--type-small);
}

.entity-editor-grid {
  gap: var(--space-16) var(--space-28);
  margin: var(--space-12) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  max-width: 40rem;
  display: grid;
}

.entity-editor-grid > .pair-note {
  grid-column: 1 / -1;
}

.entity-editor > section + section {
  margin-top: var(--space-40);
  padding-top: var(--space-40);
  position: relative;
}

.entity-editor > section + section:before {
  content: "";
  background: linear-gradient(to right,
    transparent 0%,
    var(--rule) 16%,
    var(--rule) calc(50% - 10px),
    transparent calc(50% - 10px),
    transparent calc(50% + 10px),
    var(--rule) calc(50% + 10px),
    var(--rule) 84%,
    transparent 100%);
  height: 1px;
  position: absolute;
  inset: 0 0 auto;
}

.entity-editor > section + section:after {
  content: "";
  background: var(--frame);
  width: 5px;
  height: 5px;
  position: absolute;
  top: -2px;
  left: calc(50% - 2.5px);
  transform: rotate(45deg);
}

.island-label, .picture-block h2, .vegan-field h2 {
  margin: 0 0 var(--space-8);
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.entity-editor > section > h2, .entity-editor .vegan-field > h2 {
  margin: 0 0 var(--space-12);
  font-family: var(--display);
  font-size: var(--type-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 400;
}

.substitutes-editor h3 {
  margin: var(--space-20) 0 var(--space-8);
  font-family: var(--body);
  font-size: var(--type-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  font-weight: 600;
}

.optional-tag {
  text-transform: none;
  color: var(--ink-soft);
  margin-left: .4em;
  font-size: .85em;
  font-weight: 400;
}

.closing-zone {
  gap: var(--space-12) var(--space-20);
  margin-top: var(--space-48);
  padding-top: var(--space-28);
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
  align-items: flex-start;
  display: flex;
}

.closing-zone .save-row {
  margin-top: 0;
}

.closing-zone > .button-destructive {
  margin-left: auto;
}

.closing-zone > .status-line {
  flex-basis: 100%;
  order: 20;
  margin: 0;
}

.admin-user-row {
  gap: var(--space-12);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  align-items: baseline;
  display: flex;
}

.admin-user-row > span:first-child {
  width: 8rem;
}

.admin-user-row > span:nth-child(2) {
  width: 10rem;
}

.admin-user-row > span:nth-child(3) {
  width: 15rem;
}

.admin-user-row > span:nth-child(4) {
  width: 10rem;
}

.admin-user-row > span:nth-child(5) {
  flex: 1;
  min-width: 12rem;
}

.admin-user-row > .check + * {
  margin-left: auto;
}

@media screen and (width <= 34rem) {
  .admin-user-row > .check {
    flex: 1 0 100%;
  }
}

.admin-user-head > span {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.admin-user-row .status-line {
  flex-basis: 100%;
  order: 20;
  margin: 0;
}

.admin-unit-row {
  gap: var(--space-12);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  align-items: baseline;
  display: flex;
}

.admin-unit-row .status-line {
  min-height: 0;
  margin: 0;
}

.admin-unit-row input[type="text"] {
  width: 4.2rem;
}

.admin-unit-row input.admin-list-name, .admin-unit-row .admin-dimension {
  width: 6rem;
}

.admin-dimension .dropdown-trigger {
  text-align: left;
  width: 100%;
}

.admin-unit-row input.quantity-input {
  width: 4rem;
}

.admin-unit-row .admin-si, .admin-unit-head .admin-si-head {
  box-sizing: border-box;
  width: 4rem;
}

.admin-unit-head > span {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.admin-unit-head > span:nth-child(-n+3) {
  width: 4.2rem;
}

.admin-unit-head > span:nth-child(4), .admin-unit-head > span:nth-child(5) {
  width: 6rem;
}

.admin-unit-head > span:nth-child(6) {
  width: 4rem;
}

.tune-tracks {
  column-gap: var(--space-16);
  margin: var(--space-8) 0 var(--space-24);
  grid-template-columns: fit-content(15rem) max-content minmax(min(10rem, 100%), 1fr);
  display: grid;
}

.tune-head, .tune-board, .tune-row {
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  display: grid;
}

.tune-head, .tune-row {
  align-items: center;
}

.tune-head {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.tune-scale {
  font-family: var(--body);
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  display: grid;
}

.tune-scale > :first-child {
  text-align: left;
}

.tune-scale > :last-child {
  text-align: right;
}

.tune-scale-mid {
  text-align: center;
  color: var(--ink-soft);
}

.tune-head-weight {
  text-align: right;
}

.tune-sort:after {
  inset: calc((44px - 100%) / -2 - var(--space-4)) 0 calc((44px - 100%) / -2 + var(--space-4));
}

.tune-name-cell {
  min-width: 0;
}

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

.tune-row {
  min-height: 28px;
}

.tune-flaw {
  grid-column: 1 / -1;
}

.tune-name > span, .vegan-entry {
  padding-inline-start: calc(var(--depth, 0) * var(--space-12));
}

.tune-name {
  font-size: var(--type-body);
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.tune-spine {
  align-self: stretch;
  position: relative;
}

.tune-spine:before {
  background: var(--rule);
  content: "";
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
}

.tune-bar {
  height: var(--bar-thickness);
  background: var(--ink-soft);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateY(-50%);
}

.tune-bar.is-louder {
  left: 50%;
  right: auto;
}

.editor input.tune-value {
  width: auto;
  color: var(--amber);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-body);
  text-align: right;
}

.text-toggle {
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  letter-spacing: 0;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  padding: 0;
  font-weight: 400;
  position: relative;
}

.text-toggle:after {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

@media (hover: hover) {
  .text-toggle:hover {
    color: var(--bottle);
  }
}

.text-toggle[aria-pressed="true"] {
  border-bottom-color: var(--bottle);
  color: var(--bottle);
}

@media screen and (width <= 34rem) {
  .tune-tracks {
    column-gap: var(--space-12);
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .tune-spine, .tune-tracks .tune-scale {
    display: none;
  }
}

.vegan-field, .substitutes-editor {
  margin: 0;
}

.vegan-field-note {
  max-width: var(--measure);
  min-height: round(up, var(--leading-read) * 2em, 1px);
  margin: var(--space-8) 0 0;
  font-size: var(--type-small);
  line-height: var(--leading-read);
  color: var(--ink-soft);
}

.substitutes-editor > p {
  max-width: var(--measure);
  margin: var(--space-8) 0 0;
  font-size: var(--type-small);
}

.sub-rows {
  margin: var(--space-8) 0 var(--space-12);
  padding: 0;
  list-style: none;
}

.sub-row {
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  display: flex;
}

.sub-name {
  min-width: 8rem;
  font-family: var(--body);
  font-size: var(--type-body);
}

.sub-conversion {
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--type-small);
  color: var(--ink-soft);
  display: flex;
}

.sub-conversion .quantity-input {
  width: 3.5rem;
}

.sub-note {
  flex: 8rem;
  min-width: 6rem;
}

.sub-row .editor-line-tools {
  margin-left: auto;
}

.vegan-lenses {
  gap: var(--space-24) var(--space-16);
  margin: var(--space-20) 0 var(--space-12);
  flex-wrap: wrap;
  display: flex;
}

.vegan-lens-count {
  margin-left: var(--space-4);
}

.vegan-lens-lede {
  max-width: var(--measure);
  margin: 0 0 var(--space-16);
  font-size: var(--type-small);
}

.vegan-board {
  font-size: var(--type-small);
  column-gap: var(--space-12);
  grid-template-columns: minmax(0, 2fr) max-content max-content max-content minmax(0, 3fr);
  display: grid;
}

.vegan-row {
  grid-template-columns: subgrid;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  grid-column: 1 / -1;
  align-items: baseline;
  display: grid;
}

.vegan-head {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.vegan-entry a {
  color: var(--bottle);
  text-decoration: none;
}

@media (hover: hover) {
  .vegan-entry a:hover {
    text-decoration: underline;
  }
}

.vegan-kind, .vegan-subs {
  margin-left: var(--space-8);
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.vegan-own, .vegan-source {
  color: var(--ink-soft);
}

.vegan-resolved.is-vegan, .vegan-resolved.is-not-vegan {
  font-weight: 600;
}

.vegan-why {
  color: var(--ink-soft);
  font-size: var(--type-small);
}

.vegan-empty {
  margin: var(--space-20) 0;
  grid-column: 1 / -1;
}

.taste-board-controls {
  margin-bottom: var(--space-28);
}

.taste-board {
  font-size: var(--type-small);
  column-gap: var(--space-16);
  grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
  display: grid;
  position: relative;
}

.taste-row {
  grid-template-columns: subgrid;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  grid-column: 1 / -1;
  align-items: center;
  display: grid;
}

@media screen and (width <= 34rem) {
  .taste-board {
    display: block;
  }

  .taste-row {
    justify-content: flex-end;
    column-gap: var(--space-16);
    flex-wrap: wrap;
    display: flex;
  }

  .taste-entry-name, .taste-head > :first-child {
    flex: 0 0 100%;
  }

  .taste-head {
    row-gap: var(--space-24);
  }

  .taste-cell, .taste-head > :not(:first-child) {
    width: calc(7 * var(--mono-ch) + 1em + var(--space-4));
    flex: none;
  }
}

.taste-head > :not(:first-child) {
  text-align: right;
}

.taste-sort:after {
  inset: calc((44px - 100%) / -2 - var(--space-4)) 0 calc((44px - 100%) / -2 + var(--space-4));
}

.sort-mark.mark {
  width: 1em;
  height: 1em;
  margin-left: var(--space-4);
  vertical-align: -.15em;
  display: inline-block;
}

.taste-entry-name {
  padding-left: calc(var(--depth) * var(--space-16));
}

.taste-entry-name a {
  color: var(--bottle);
  text-decoration: none;
}

.taste-cell {
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  display: inline-flex;
}

.taste-field {
  display: inline-block;
  position: relative;
}

.editor .taste-board input.taste-value {
  width: 7ch;
}

.taste-inherited {
  font-size: var(--type-body);
  line-height: var(--leading-read);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  pointer-events: none;
  font-weight: 500;
  position: absolute;
  top: 0;
  right: 0;
}

.taste-landmark .taste-entry-name {
  color: var(--ink-soft);
}

.taste-landmark-figure {
  width: 7ch;
  font-size: var(--type-body);
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  font-weight: 500;
}

.taste-aid {
  z-index: var(--z-popover);
  top: calc(var(--aid-top) + var(--space-4));
  left: clamp(0px, calc(var(--aid-end) - min(28rem, 100%)), calc(100% - min(28rem, 100%)));
  box-sizing: border-box;
  gap: var(--space-8);
  width: min(28rem, 100%);
  padding: var(--space-8) var(--space-12);
  background: var(--paper-raised);
  border: 1px solid var(--frame);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  flex-direction: column;
  display: flex;
  position: absolute;
}

.taste-aid span.taste-value {
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  display: inline-block;
}

.taste-aid .taste-value.is-inheriting {
  color: var(--ink-soft);
}

.volume-board {
  font-size: var(--type-small);
  column-gap: var(--space-12);
  grid-template-columns: minmax(0, 1fr) max-content max-content max-content;
  display: grid;
}

.volume-board-row {
  grid-template-columns: subgrid;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  grid-column: 1 / -1;
  align-items: baseline;
  display: grid;
}

.volume-figure {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  font-weight: 500;
}

.volume-blank, .volume-tally {
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.volume-board-flaw {
  grid-column: 1 / -1;
  margin-top: 0;
}

.volume-entry a {
  color: var(--bottle);
  text-decoration: none;
}

@media (hover: hover) {
  .volume-entry a:hover {
    text-decoration: underline;
  }
}

.volume-head {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.volume-row {
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  display: flex;
}

.volume-sentence {
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--body);
  font-size: var(--type-body);
  display: flex;
}

.volume-island > .field-hint {
  max-width: var(--measure);
  margin-bottom: var(--space-8);
}

.volume-row .field-hint.flawed {
  flex: 0 0 100%;
  order: 20;
}

@media screen and (width <= 44rem) {
  .vegan-row {
    padding: var(--space-8) 0;
    grid-template-columns: 1fr 1fr;
  }

  .vegan-entry, .vegan-why {
    grid-column: 1 / -1;
  }

  .vegan-head {
    display: none;
  }
}

.crash-list, .feedback-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crash-row, .feedback-row {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
}

.crash-head, .feedback-head {
  gap: var(--space-12);
  flex-wrap: wrap;
  align-items: flex-start;
  display: flex;
}

.crash-message, .feedback-body {
  min-width: 0;
  max-width: var(--measure);
  overflow-wrap: anywhere;
  flex: 1;
  margin: 0;
}

.feedback-body {
  white-space: pre-wrap;
}

.crash-locator, .feedback-line {
  margin: var(--space-4) 0 0;
  font-size: var(--type-small);
  color: var(--ink-soft);
}

.crash-mono, .feedback-mono {
  font-family: var(--mono);
  overflow-wrap: anywhere;
  font-weight: 500;
}

.crash-count {
  font-family: var(--mono);
  color: var(--ink);
  font-weight: 500;
}

.crash-facts dd.crash-reference {
  color: var(--ink);
}

.crash-facts, .feedback-facts {
  gap: var(--space-4) var(--space-16);
  margin: var(--space-4) 0 0;
  font-size: var(--type-small);
  flex-wrap: wrap;
  display: flex;
}

.crash-facts > div, .feedback-facts > div {
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.crash-facts dt, .feedback-facts dt {
  font-size: var(--type-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

.crash-facts dd, .feedback-facts dd {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  margin: 0;
}

.crash-stack {
  margin-bottom: var(--space-12);
}

.crash-stack > summary {
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-16);
  font-size: var(--type-small);
  line-height: var(--leading-row);
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 400;
  list-style: none;
  display: flex;
  position: relative;
}

.crash-stack > summary::-webkit-details-marker {
  display: none;
}

.crash-stack > summary:before {
  content: "";
  position: absolute;
  inset: calc(-22px + 50%) 0;
}

@media (hover: hover) {
  .crash-stack > summary:hover {
    color: var(--bottle);
  }
}

.crash-stack pre {
  margin: var(--space-16) 0 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-small);
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.search-list {
  column-gap: var(--space-16);
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.search-row {
  grid-template-columns: subgrid;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  grid-column: 1 / -1;
  align-items: baseline;
  display: grid;
}

.search-term {
  min-width: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-body);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.search-count {
  font-family: var(--mono);
  color: var(--ink);
  text-align: right;
  font-weight: 500;
}

.search-report {
  margin: 0 0 var(--space-16);
}

.search-row .error {
  margin: var(--space-4) 0 0;
  order: 20;
  grid-column: 1 / -1;
}

.search-row .confirm-consequence {
  margin-block-start: var(--space-4);
}

.search-when {
  margin: var(--space-4) 0 0;
  font-size: var(--type-small);
  color: var(--ink-soft);
  grid-column: 1 / -1;
}

.share-token {
  font-family: var(--mono);
  font-weight: 500;
}

.auth-retired {
  color: var(--ink-soft);
}

.link-fields {
  gap: var(--space-16);
  margin: var(--space-20) 0 0;
  display: grid;
}

.sheet-owner {
  max-width: var(--measure);
  margin: var(--space-40) auto 0;
  text-align: left;
}

.share-hint {
  font-size: var(--type-small);
}

.editor input.share-field-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--type-title);
  line-height: var(--leading-display);
  letter-spacing: -.005em;
  color: var(--ink);
}

.share-sheet {
  max-width: var(--measure);
  margin-inline: auto;
}

.share-title, .share-blurb, .share-url {
  text-align: center;
}

.share-blurb {
  margin: var(--space-20) auto 0;
  max-width: var(--measure);
}

.share-qr {
  aspect-ratio: 1;
  inline-size: min(24rem, 100%);
  margin: var(--space-28) auto 0;
  color: var(--ink);
  display: block;
}

.share-qr svg {
  width: 100%;
  height: 100%;
  display: block;
}

.share-url {
  margin: var(--space-20) 0 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-body);
  overflow-wrap: anywhere;
}

.share-controls {
  margin-top: var(--space-40);
}

@page {
  size: portrait;
  margin: 0;
}

@media print {
  :root {
    --type-wordmark: 1.75rem;
    --type-title: 3.4rem;
  }

  :root, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    box-sizing: border-box;
    background-attachment: scroll;
    min-block-size: 100vh;
    padding: 8mm;
  }

  .site-head, main, .site-foot {
    padding-inline: 0;
  }

  :root {
    --recipe-col: 16rem;
  }

  .entity-layout {
    column-gap: var(--space-24);
  }

  .site-head {
    padding-block-start: 0;
  }

  main {
    padding-block-end: 0;
  }

  .site-head nav, .site-head-links, .site-foot, button, .personal-action, .auth-link, .unit-switch, .icon-button, .scaler-step, .share-controls, input, select, textarea {
    display: none;
  }

  .scaler {
    border: 0;
    border-radius: 0;
    height: auto;
  }

  .scaler-count {
    color: var(--ink);
    border: 0;
    padding: 0;
    display: inline;
  }

  .similar, .reader-note, .site-search, .drawing-line, .menu-derived, .menu-add, .menu-said, .recipe-mine, .mine-head, .menu-hold-status, .shelf-line + .status-line, .facets, .filter-toggle, .chips, .standing-row, .browse-search, .back-link, .dated-drinks {
    display: none;
  }

  .cocktail-grid > li, .name-index li {
    break-inside: avoid;
  }

  a {
    color: var(--ink);
    text-decoration: none;
  }

  a:after {
    content: none;
  }

  h1, h2, h3, .page-title {
    break-after: avoid;
  }

  .cocktail-masthead, .entity-masthead, .ingredients-head {
    break-inside: avoid;
    break-after: avoid;
  }

  .ingredients, .recipe-notes, .ingredients li {
    break-inside: avoid;
  }

  .ingredients .tip[hidden] {
    display: block;
  }

  .recipe-notes {
    break-before: avoid;
  }

  .instructions li {
    break-inside: avoid;
  }

  .instructions, .alcohol-foot {
    break-before: avoid;
  }

  .share-qr {
    break-inside: avoid;
    inline-size: min(100mm, 100%);
  }

  .share-blurb {
    font-size: var(--type-sub);
  }

  .share-url {
    font-size: var(--type-small);
  }
}

@media screen and (width <= 52rem) {
  .site-search {
    flex: none;
    min-inline-size: 0;
  }

  .site-search-open {
    display: block;
  }

  .site-search-input {
    opacity: 0;
    inline-size: 0;
    padding-inline: 0;
    position: absolute;
  }

  .site-search.is-expanded .site-search-input {
    inline-size: 100%;
    padding-inline: var(--space-28) var(--space-4);
    opacity: 1;
  }

  .site-search:focus-within .site-search-input {
    inline-size: 100%;
    padding-inline: var(--space-28) var(--space-4);
    opacity: 1;
  }

  .site-search:before {
    content: none;
  }

  .site-search.is-expanded:after {
    content: "";
    inset-inline-start: var(--space-4);
  }

  .site-search:focus-within:after {
    content: "";
    inset-inline-start: var(--space-4);
  }

  .site-search.is-expanded {
    position: static;
  }

  .site-search:focus-within {
    position: static;
  }

  .site-search.is-expanded .site-search-input, .site-search.is-expanded .site-search-results, .site-search.is-expanded .site-search-empty {
    position: absolute;
    inset-inline: 0;
  }

  .site-search:focus-within .site-search-input {
    position: absolute;
    inset-inline: 0;
  }

  .site-search.is-expanded .site-search-input {
    background-color: var(--paper);
    top: 50%;
    transform: translateY(-50%);
  }

  .site-search:focus-within .site-search-input {
    background-color: var(--paper);
    top: 50%;
    transform: translateY(-50%);
  }

  .site-search.is-expanded .site-search-results, .site-search.is-expanded .site-search-empty {
    top: calc(100% + var(--space-8));
  }

  .site-search.is-expanded .site-search-open {
    visibility: hidden;
  }

  .site-search:focus-within .site-search-open {
    visibility: hidden;
  }
}

@media screen and (width >= 44rem) and (width <= 52rem) {
  :root {
    --recipe-col: 16rem;
  }

  .entity-layout {
    column-gap: var(--space-24);
  }

  .similar {
    margin-inline-start: calc(var(--recipe-col) + var(--space-24));
  }

  .entity-layout:not(:has( > .entity-aside)) ~ .similar {
    max-width: calc(100% - var(--recipe-col) - var(--space-24));
    margin-inline-start: 0;
  }

  .entity-layout:not(:has( > .entity-aside)) > .entity-main {
    max-width: calc(100% - var(--recipe-col) - var(--space-24));
  }

  .entity-layout:not(:has( > .entity-aside)) > .cocktail-description {
    max-width: calc(100% - var(--recipe-col) - var(--space-24));
  }
}

@media screen and (width <= 44rem) {
  .menu-pick-panel {
    width: 100%;
    max-width: 100%;
    max-height: 30rem;
  }

  .entity-layout {
    gap: var(--space-20);
    grid-template-columns: minmax(0, 1fr);
  }

  .entity-main {
    grid-area: auto / 1;
  }

  .entity-layout:has( > .entity-masthead) > .entity-main {
    grid-area: auto / 1;
  }

  .entity-layout:has( > .entity-masthead) > .entity-aside {
    grid-area: auto / 1;
  }

  .entity-layout:not(:has( > .entity-aside)) > .entity-main {
    max-width: none;
  }

  .entity-layout:not(:has( > .entity-aside)) {
    row-gap: var(--space-20);
  }

  .entity-layout:not(:has( > .entity-aside)) > .cocktail-description {
    max-width: none;
  }

  .entity-layout:has( > .entity-masthead):has( > .entity-aside) {
    grid-template-columns: min(40%, calc(50% * var(--photo-ar))) minmax(0, 1fr);
  }

  .entity-layout:has( > .entity-masthead):has( > .entity-aside) > .entity-masthead {
    grid-area: 1 / 2;
  }

  .entity-layout:has( > .entity-masthead):has( > .entity-aside) .glass-plate {
    grid-area: 1 / 1;
  }

  .entity-layout:has( > .entity-masthead):has( > .entity-aside) .entity-plate {
    grid-area: 1 / 1;
  }

  .entity-layout:has( > .entity-masthead):has( > .entity-aside) > .entity-main {
    grid-area: 2 / 1 / auto / -1;
  }

  .entity-layout:has( > .entity-masthead):has( > .entity-aside) > .entity-aside > .prose {
    grid-area: 2 / 1 / auto / -1;
    margin: 0;
  }

  .entity-layout:has( > .entity-masthead):has( > .entity-aside > .prose) > .entity-main {
    grid-row: 3;
  }

  .entity-layout:has( > .entity-masthead) .glass-plate {
    width: 100%;
    margin-block-end: 0;
  }

  .entity-layout:has( > .entity-masthead) .entity-plate {
    width: 100%;
    margin-block-end: 0;
  }

  .entity-layout:has( > .cocktail-masthead):has(.recipe-plate) {
    grid-template-columns: 40% minmax(0, 1fr);
  }

  .entity-layout:has( > .cocktail-masthead):has(.recipe-plate) > .cocktail-masthead {
    grid-area: 1 / 2;
  }

  .entity-layout > .cocktail-masthead {
    margin-block-end: var(--space-20);
  }

  .entity-layout:has( > .cocktail-masthead):has(.recipe-plate) > .entity-main {
    grid-area: 2 / 1 / auto / -1;
  }

  .similar {
    margin-inline-start: 0;
  }

  .entity-layout:not(:has( > .entity-aside)) ~ .similar {
    max-width: none;
  }

  .entity-aside:not(:has( > .recipe-plate)) > .arrangement {
    max-height: var(--arrangement-height);
    margin-top: var(--space-40);
  }

  .entity-aside {
    display: contents;
  }

  .entity-layout:has( > .cocktail-masthead):has(.recipe-plate) .recipe-plate {
    grid-area: 1 / 1;
  }

  .entity-layout:has( > .cocktail-masthead):has(.recipe-plate) .arrangement {
    grid-area: 3 / 1 / auto / -1;
  }

  .entity-layout:has( > .cocktail-masthead) .cocktail-description {
    margin: calc(var(--space-8) - var(--space-20) - var(--space-20)) 0
      var(--space-20);
  }

  .entity-layout:has( > .cocktail-masthead):has(.recipe-plate):has(.cocktail-description) {
    grid-template-rows: min-content 1fr;
  }

  .entity-layout:has( > .cocktail-masthead):has(.recipe-plate):has(.cocktail-description) .recipe-plate {
    grid-row: 1 / span 2;
  }

  .entity-layout:has( > .cocktail-masthead):has(.recipe-plate):has(.cocktail-description) .cocktail-description {
    grid-area: 2 / 2;
  }

  .entity-layout:has( > .cocktail-masthead):has(.recipe-plate):has(.cocktail-description) > .entity-main {
    grid-row: 3;
  }

  .entity-layout:has( > .cocktail-masthead):has(.recipe-plate):has(.cocktail-description) .arrangement {
    grid-row: 4;
  }

  .entity-layout:has( > .cocktail-masthead):not(:has(.recipe-plate)):has(.cocktail-description) .cocktail-description {
    grid-row: 2;
  }

  .entity-layout:has( > .cocktail-masthead):not(:has(.recipe-plate)):has(.cocktail-description) > .entity-main {
    grid-row: 3;
  }

  .entity-layout:has( > .cocktail-masthead):not(:has(.recipe-plate)):has(.cocktail-description) .arrangement {
    grid-row: 4;
  }

  .back-link.repeated {
    display: none;
  }

  .site-head {
    padding-top: var(--space-20);
  }

  .site-head nav {
    gap: var(--space-16);
    margin-top: var(--space-12);
  }

  .site-head nav .nav-menu > summary:before {
    inset: calc((44px - 100%) / -2 + var(--space-4)) 0
      calc((44px - 100%) / -2 - var(--space-4));
  }

  .site-head nav a, .site-head nav .nav-menu > summary {
    letter-spacing: .09em;
    font-size: .7rem;
  }

  .site-head nav a.nav-index {
    display: none;
  }

  .site-head nav .nav-menu {
    display: block;
  }

  .filter-toggle {
    display: inline-flex;
  }

  .facets:not(.open) {
    display: none;
  }

  .results {
    margin-top: var(--space-16);
  }

  .facets {
    margin-top: var(--space-28);
    position: relative;
  }

  .facet {
    position: static;
  }

  .facets .facet-menu {
    width: auto;
    min-width: 0;
    margin-block-start: var(--space-8);
    top: auto;
    left: 0;
    right: 0;
  }
}

@media screen and (width <= 34rem) {
  :root {
    font-size: 16px;
  }
}

@media screen and (width <= 23rem) {
  :root {
    --type-wordmark: 1.75rem;
  }

  .site-head, main, .site-foot {
    padding-inline: var(--space-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}