@charset "UTF-8";
@import "/static/css/open-props.min.css";
@import "/static/css/normalize.min.css";
@import "/static/css/buttons.min.css";
/* the props */
[data-theme=light] {
  color-scheme: only light;
}

[data-theme=dark] {
  color-scheme: only dark;
}

:root {
  --main-color: black;
  --main-background-color-light: var(--surface-1);
  --main-background-color-dark: black;
  --main-background-color: var(--main-background-color-light);
  background-color: var(--main-background-color);
  --font-size-05: .85rem;
  --dark-mode-color: #eee;
  --fluid-table-font-size: clamp(.65rem, 1.5vw, 1rem);
  --table-font-size: var(--font-size-fluid-0);
  --flow-spacing: var(--size-2);
  --section-spacing: var(--size-3);
  --panel-padding: var(--size-4);
  --panel-margin-bottom: var(--size-3);
  --inline-gap: var(--size-1);
  --button-row-spacing: var(--size-3);
  --link-color: var(--indigo-8);
  --link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  --link-border-color: var(--indigo-9);
  --link-background: var(--indigo-12);
  --link-background-hover-color: color-mix(in srgb, white 20%, var(--link-background));
  --link-background-label: var(--indigo-2);
  --deemphasis-color: var(--gray-6);
  --admin-color: var(--orange-6);
  --label-color-light: var(--gray-7);
  --label-color-dark: var(--gray-5);
  --label-color: var(--label-color-light);
  --form-background-color-light: var(--gray-2);
  --form-background-color-dark: var(--gray-9);
  --form-background-color: var(--form-background-color-light);
  --input-background-color-light: var(--indigo-0);
  --input-background-color-dark: var(--indigo-12);
  --input-background-color: var(--input-background-color-light);
  --accordion-border-color-closed-light: var(--gray-3);
  --accordion-border-color-closed-dark: var(--gray-9);
  --accordion-border-color-closed: var(--accordion-border-color-closed-light);
  --hicon-mono-foreground: white;
  --hicon-mono-background: black;
  --curatorial-panel-background-color-light: var(--gray-1);
  --curatorial-panel-background-color-dark: var(--gray-9);
  --curatorial-panel-background-color: var(--curatorial-panel-background-color-light);
  --annotation-background-color-light: var(--gray-2);
  --annotation-background-color-dark: var(--gray-9);
  --annotation-background: var(--annotation-background-color-light);
  --tabular-rule-color: var(--annotation-background);
  --inner-shadow-8: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  --button-glow-box-shadow: rgba(50, 50, 93, 0.25) 0px 7.5px 15px -3px inset, rgba(0, 0, 0, 0.3) 0px 4.5px 9px -4.5px inset;
  --inventoryGreen: green;
  --inventoryYellow: orange;
  --inventoryRed: red;
  --inventoryGray: gray;
  --recipePanelBorder: 1px solid var(--deemphasis-color);
  --myrecipe-bkgd: linear-gradient(60deg, rgba(244,244,244,1) 0%, rgba(252,252,252,1) 35%, rgba(245,241,241,1) 150%);
  --hairball-bkgd-1860s: linear-gradient(70deg, rgba(201,120,39,1) 0%, rgba(201,128,41,1) 35%, rgba(195,123,37,1) 200%);
  --hairball-bkgd-1870s: linear-gradient(70deg, rgba(204,142,64,1) 0%, rgba(208,141,57,1) 35%, rgba(227,145,43,1) 200%);
  --hairball-bkgd-1880s: linear-gradient(70deg, rgba(231,168,84,1) 0%, rgba(189,140,76,1) 35%, rgba(222,164,87,1) 200%);
  --hairball-bkgd-1890s: linear-gradient(70deg, rgba(237,192,120,1) 0%, rgba(236,195,131,1) 35%, rgba(236,187,109,1) 200%);
  --hairball-bkgd-1900s: linear-gradient(70deg, rgba(249,214,152,1) 0%, rgba(240,202,136,1) 35%, rgba(250,223,176,1) 200%);
  --hairball-bkgd-1910s: linear-gradient(70deg, rgba(231,208,161,1) 0%, rgba(255,229,177,1) 35%, rgba(255,232,187,1) 200%);
  --hairball-bkgd-1920s: linear-gradient(70deg, rgba(255,238,199,1) 0%, rgba(250,237,208,1) 35%, rgba(255,229,177,1) 200%);
  --hairball-bkgd-1930s: linear-gradient(70deg, rgba(251,237,204,1) 0%, rgba(233,225,205,1) 35%, rgba(255,244,218,1) 200%);
  --hairball-bkgd-1940s: linear-gradient(70deg, rgba(254,250,243,1) 0%, rgba(255,247,234,1) 35%, rgba(255,250,242,1) 200%);
  --hairball-bkgd-1950s: linear-gradient(70deg, rgba(241,239,234,1) 0%, rgba(255,250,240,1) 35%, rgba(241,237,229,1) 200%);
  --_presentation-bkgd: var(--myrecipe-bkgd);
  --serif-font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  --_presentation-font-family: initial;
  --_presentation-link-hover-color: var(--link-color);
  --primary-font-family: system-ui, sans-serif;
  font-family: var(--primary-font-family);
  font-weight: normal;
  --kwicon-diameter: 80px;
  --gallery-thumb-height: 270px;
  --help-bkgd-A: lch(89.89% 55.88 98.14);
  --help-bkgd-B: lch(94.12% 25.03 121.34);
  --timelinePrimaryStrokeColor: black;
  --timelineHighlightStrokeColor: green;
  --timelineAnnotationColor: var(--gray-5);
  --timelineGridStrokeColor: var(--gray-5);
  --scrollbar-foreground: var(--gray-4);
  --scrollbar-background: var(--gray-7);
  --flav-herbal: yellowgreen;
  --flav-floral: violet;
  --flav-fruit: red;
  --flav-cream: lightblue;
  --flav-essences: darkgray;
  --flav-spice: saddlebrown;
  --flav-nutty: tan;
  --flav-spirits: lightgray;
  --flav-grain: orange;
  --flav-vegetal: green;
  --flav-other: gray;
  --flav-herbal-light: hsl(from var(--flav-herbal) h s 85%);
  --flav-floral-light: hsl(from var(--flav-floral) h s 85%);
  --flav-fruit-light: hsl(from var(--flav-fruit) h s 85%);
  --flav-cream-light: hsl(from var(--flav-cream) h s 85%);
  --flav-essences-light: hsl(from var(--flav-essences) h s 85%);
  --flav-spice-light: hsl(from var(--flav-spice) h s 85%);
  --flav-nutty-light: hsl(from var(--flav-nutty) h s 85%);
  --flav-spirits-light: hsl(from var(--flav-spirits) h s 85%);
  --flav-grain-light: hsl(from var(--flav-grain) h s 85%);
  --flav-vegetal-light: hsl(from var(--flav-vegetal) h s 85%);
  --flav-other-light: hsl(from var(--flav-other) h s 85%);
  --flav-herbal-medium: hsl(from var(--flav-herbal) h s 40%);
  --flav-floral-medium: hsl(from var(--flav-floral) h s 40%);
  --flav-fruit-medium: hsl(from var(--flav-fruit) h s 40%);
  --flav-cream-medium: hsl(from var(--flav-cream) h s 40%);
  --flav-essences-medium: hsl(from var(--flav-essences) h s 40%);
  --flav-spice-medium: hsl(from var(--flav-spice) h s 40%);
  --flav-nutty-medium: hsl(from var(--flav-nutty) h s 40%);
  --flav-spirits-medium: hsl(from var(--flav-spirits) h s 40%);
  --flav-grain-medium: hsl(from var(--flav-grain) h s 40%);
  --flav-vegetal-medium: hsl(from var(--flav-vegetal) h s 40%);
  --flav-other-medium: hsl(from var(--flav-other) h s 40%);
  --flav-herbal-dark: hsl(from var(--flav-herbal) h s 20%);
  --flav-floral-dark: hsl(from var(--flav-floral) h s 20%);
  --flav-fruit-dark: hsl(from var(--flav-fruit) h s 20%);
  --flav-cream-dark: hsl(from var(--flav-cream) h s 20%);
  --flav-essences-dark: hsl(from var(--flav-essences) h s 20%);
  --flav-spice-dark: hsl(from var(--flav-spice) h s 20%);
  --flav-nutty-dark: hsl(from var(--flav-nutty) h s 20%);
  --flav-spirits-dark: hsl(from var(--flav-spirits) h s 20%);
  --flav-grain-dark: hsl(from var(--flav-grain) h s 20%);
  --flav-vegetal-dark: hsl(from var(--flav-vegetal) h s 20%);
  --flav-other-dark: hsl(from var(--flav-other) h s 20%);
}

:root.tiki4 {
  --link-color: var(--lime-10);
  --link-border-color: var(--lime-9);
  --link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  --link-background: var(--lime-12);
  --link-background-hover-color: color-mix(in srgb, white 20%, var(--link-background));
  --link-background-label: var(--lime-2);
  --input-background-color-light: var(--lime-0);
  --input-background-color-dark: var(--lime-12);
  background: url("/static/gfx/tiki4_bg_pattern.jpg");
}
:root.tiki4 #flag {
  color: var(--lime-9);
}

[data-theme=dark] {
  background-color: var(--gray-10);
  --main-color: rgb(238,238,238);
  --text-1: var(--dark-mode-color);
  --link-color: var(--indigo-3);
  --link-hover-color: color-mix(in srgb, white 25%, var(--link-color));
  --link-background: var(--indigo-12);
  --link-background-label: var(--indigo-3);
  --annotation-background: var(--annotation-background-color-dark);
  --curatorial-panel-background-color: var(--curatorial-panel-background-color-dark);
  --form-background-color: var(--form-background-color-dark);
  --hicon-mono-foreground: black;
  --hicon-mono-background: white;
  --label-color: var(--label-color-dark);
  --main-background-color: var(--main-background-color-dark);
  --input-background-color: var(--input-background-color-dark);
  --help-bkgd-A: lch(37.24% 36.36 82.79);
  --help-bkgd-B: lch(40.21% 29 102.02);
  --timelinePrimaryStrokeColor: white;
  --timelineAnnotationColor: var(--gray-7);
  --timelineGridStrokeColor: var(--gray-7);
  --scrollbar-foreground: var(--gray-8);
  --scrollbar-background: var(--gray-5);
}

[data-theme=dark].tiki4 {
  background-color: black;
  --link-color: var(--lime-5);
  --link-border-color: var(--lime-9);
  --link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  --link-background: var(--lime-12);
  --link-background-hover-color: color-mix(in srgb, white 20%, var(--link-background));
  --link-background-label: var(--lime-3);
  background: url("/static/gfx/tiki4_bg_pattern-dark.jpg");
}
[data-theme=dark].tiki4 #flag {
  color: var(--lime-9);
}

@media (max-width: 480px) {
  :root {
    --gallery-thumb-height: 180px;
  }
}
:where(section) {
  margin-block: var(--section-spacing);
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.flow > * + *, .panel > * + * {
  margin-top: var(--flow-spacing, 1em);
}

body {
  /* may want to implement a better wrapper rather than sticking this stuff on body */
  max-width: min(100% - 1rem, 960px);
  margin-inline: auto;
  position: relative;
}

.text, figcaption, .adminAlertContainer, .curatorial__annotation, .story__panel, section, .help__container {
  margin-trim: block;
}

p > img {
  display: inline-block;
}

footer {
  border-top: 6px solid var(--deemphasis-color);
  margin-top: 4ch;
  padding: var(--panel-padding);
}
footer svg {
  max-width: 320px;
  width: 100%;
  height: auto;
}

[data-theme=dark] footer {
  padding: var(--panel-padding);
}
[data-theme=dark] svg {
  fill: white;
}

:root.tiki4 footer {
  border-top: none;
}

section {
  margin-block: var(--flow-spacing);
}

dialog {
  max-width: 63ch;
  width: auto;
  padding: var(--section-spacing);
}

ul {
  padding: 0;
  list-style: none;
}

li {
  max-inline-size: none; /* boilerplate override */
}

figure {
  display: block;
  gap: 0;
}

.minimal main {
  max-width: 60ch;
  margin-inline: auto;
}

.msginfo, #grammarErrors.info {
  padding: var(--size-2);
  background: rgb(139, 228, 230);
  background: linear-gradient(50deg, rgb(139, 228, 230) 0%, rgb(123, 230, 184) 100%);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
}

.msgerror, #grammarErrors.warning, p.warning {
  padding: var(--size-2);
  background: rgb(230, 139, 139);
  background: linear-gradient(50deg, rgb(230, 139, 139) 0%, rgb(230, 162, 123) 100%);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
}

[data-theme=dark] .msginfo, [data-theme=dark] #grammarErrors.info {
  background: rgb(16, 149, 152);
  background: linear-gradient(50deg, rgb(16, 149, 152) 0%, rgb(13, 144, 88) 100%);
}
[data-theme=dark] .msgerror, [data-theme=dark] #grammarErrors.warning, [data-theme=dark] p.warning {
  background: rgb(172, 11, 11);
  background: linear-gradient(50deg, rgb(172, 11, 11) 0%, rgb(159, 65, 10) 100%);
}

.admin, .admin a, .admin i {
  color: var(--admin-color);
}

#flagminimal {
  max-width: 320px;
  text-align: center;
  margin-block: var(--size-4);
  margin-inline: auto;
}
#flagminimal svg {
  width: 100%;
  height: auto;
}

.button__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: baseline;
  gap: var(--button-row-spacing);
  padding-block: var(--flow-spacing);
}
@media screen and (max-width: 480px) {
  .button__row {
    justify-content: space-around;
  }
}

* + .button__row {
  margin-block-start: 1lh;
}

.button__row:first-child {
  margin-block-start: 0;
}

.button__row:last-child {
  margin-block-end: 0;
}

.button__row.space--evenly {
  justify-content: space-evenly;
}

@keyframes filter-outline-pulsate {
  0% {
    outline-color: var(--label-color);
  }
  50% {
    outline-color: var(--form-background-color);
  }
  100% {
    outline-color: var(--label-color);
  }
}
.button__row.active__filter {
  background-color: var(--form-background-color);
  padding: var(--flow-spacing);
  outline: 2px solid var(--link-background);
  outline-offset: 1px;
  border-radius: var(--radius-3);
  margin-block: var(--flow-spacing);
  animation: filter-outline-pulsate 2s infinite;
}
@media screen and (max-width: 480px) {
  .button__row.active__filter {
    justify-content: start;
    gap: var(--flow-spacing);
  }
}

.dismiss__button.upper--right {
  position: absolute;
  padding-inline: var(--flow-spacing);
  right: 0;
  top: 0;
  margin: 0;
}

.dismissable__panel__heading {
  padding-right: var(--size-5);
}

.panel {
  margin-bottom: var(--panel-margin-bottom);
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--flow-spacing);
}

.extraitems {
  display: flex;
  align-items: center;
  width: 40%;
  justify-content: space-around;
}

.quicksearch__wrapper {
  display: flex;
  flex-wrap: 0;
  width: fit-content;
  align-items: center;
  gap: var(--inline-gap);
}

.recipe__filter__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--size-2);
  scrollbar-width: thin;
  scrollbar-color: var(--cyan-5);
  margin-block-end: var(--flow-spacing);
  flex-wrap: wrap;
}

.recipe__filter__bar.header--filter--bar {
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: visible;
  padding: 4px;
}

#home__grid {
  margin-block: var(--size-3);
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--flow-spacing);
}

.main__menu__section {
  margin-block-end: var(--panel-margin-bottom);
}

.news__bulletin {
  font-size: var(--font-size-1);
  padding: var(--flow-spacing);
  background-color: var(--gray-4);
  margin-block-end: var(--panel-margin-bottom);
  border-radius: var(--radius-2);
}

[data-theme=dark] .news__bulletin {
  background-color: var(--gray-8);
}

.newsPics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--flow-spacing);
  justify-items: center;
  align-items: center;
}

.mobile--only {
  display: none;
}

@media screen and (max-width: 480px) {
  .nomobile {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  #home__grid {
    display: block;
  }
  #home__menu {
    display: none;
  }
  #flag {
    display: none;
  }
  .extraitems {
    display: none;
  }
  .mobile--only {
    display: block;
  }
  :root {
    --table-font-size: var(--font-size-fluid-00);
    --panel-padding: var(--size-1);
  }
}
#home__menu ul, #hamburger__menu ul {
  list-style: none;
  padding-inline: 0;
}
#home__menu ul li, #hamburger__menu ul li {
  padding-left: 0;
}
#home__menu ul a, #hamburger__menu ul a {
  padding-left: 0;
  margin-left: 0;
}

.journal__entry small, .news__feed__entry small {
  display: block;
  color: var(--deemphasis-color);
  text-align: right;
}

.news__feed__entry {
  padding: var(--panel-padding);
  box-shadow: var(--shadow-4);
  background-color: var(--surface-4);
  margin-block-end: var(--panel-margin-bottom);
  border-radius: var(--radius-2);
  max-width: 60ch;
}
.news__feed__entry figure {
  display: grid;
  grid-template-columns: 1fr;
  margin-block: var(--flow-spacing);
}
.news__feed__entry figure figcaption {
  margin-top: var(--panel-padding);
}
.news__feed__entry figure img {
  box-shadow: var(--shadow-4);
  border-radius: var(--radius-2);
}
.news__feed__entry p {
  margin-block-end: var(--flow-spacing);
}

[data-theme=dark] .news__feed__entry {
  padding: var(--size-fluid-2);
  box-shadow: var(--shadow-4);
  background-color: var(--gray-8);
  color: white;
}

figure.full {
  display: grid;
  height: 100%;
  margin-block: var(--flow-spacing);
}
figure.full img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  margin: auto;
}

figcaption {
  text-align: center;
  max-inline-size: 100%; /* boilerplate override */
}
figcaption p {
  max-width: 60ch; /* boilerplate override */
  line-height: 1.2;
  margin-inline: auto;
}

.news__rec__listing {
  margin: var(--panel-padding);
}

.custom__rule {
  background-color: var(--gray-6);
  height: 1px;
  margin-block-end: var(--flow-spacing);
  display: block;
}

body.tiki4 .custom__rule {
  background: repeat-x url("/static/gfx/bbb-border-tile.png");
  background-repeat: repeat-x;
  background-size: contain;
  height: 1.25ch;
}

.custom__rule.footer {
  margin-top: 4ch;
  margin-bottom: -4ch;
}

.tab__row {
  display: flex;
  margin: var(--button-row-spacing) 0;
  align-items: flex-end;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: scroll;
}
.tab__row a, .tab__row span {
  text-align: center;
  padding: 0.25em 1em 0.5em 1em;
  font-size: var(--font-size-0);
  font-weight: 600;
  line-height: 1.2;
  border-bottom: 4px solid var(--link-color);
  margin: 0;
  cursor: pointer;
  color: var(--link-color);
  text-decoration: none;
}
@media only screen and (min-width: 480px) {
  .tab__row a, .tab__row span {
    padding: 0.25em 2em 0.5em 2em;
    font-size: var(--font-size-05);
  }
}
.tab__row a.active, .tab__row span.active {
  border-bottom: 8px solid black;
  color: black;
  cursor: default;
}
.tab__row a.disabled, .tab__row span.disabled {
  color: var(--deemphasis-color);
  border-color: var(--deemphasis-color);
  cursor: default;
}

[data-theme=dark] .tab__row a.active, [data-theme=dark] .tab__row span.active {
  color: white;
  border-bottom: 8px solid white;
}

.keywords__grid, .general__grid, .affinity__grid {
  margin-top: var(--flow-spacing);
}
.keywords__grid .kw__group, .keywords__grid .flavor__kw__group, .general__grid .kw__group, .general__grid .flavor__kw__group, .affinity__grid .kw__group, .affinity__grid .flavor__kw__group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.keywords__grid .flavor__kw__group, .general__grid .flavor__kw__group, .affinity__grid .flavor__kw__group {
  margin-bottom: 1em;
}
.keywords__grid h3, .general__grid h3, .affinity__grid h3 {
  margin-top: 1em;
  margin-bottom: var(--flow-spacing);
}
.keywords__grid .faux__button, .general__grid .faux__button, .affinity__grid .faux__button {
  padding: 0 var(--flow-spacing);
  margin-right: var(--flow-spacing);
}
.affinity__grid .kw__group {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.keywords__entry:first-of-type {
  margin-top: 0;
}

.keyword__milieu {
  margin-bottom: var(--button-row-spacing);
  break-inside: avoid;
  margin-top: 0;
  break-inside: avoid;
  /* atlas */
}
.keyword__milieu h3 {
  margin-top: 0;
  margin-bottom: var(--flow-spacing);
}
.keyword__milieu li {
  display: flex;
}

.persons__places__grid {
  column-width: 24ch;
  column-gap: var(--flow-spacing);
}

.keywords__entry {
  display: flex;
  align-items: center;
}
.keywords__entry a {
  padding-block: 0;
}

.ingredient__grid {
  margin-block: var(--flow-spacing);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--flow-spacing);
}

.ingredient__grid__entry {
  border-bottom: 2px solid var(--tabular-rule-color);
  padding-bottom: var(--flow-spacing);
}
.ingredient__grid__entry .context {
  display: block;
  font-size: var(--font-size-0);
  color: var(--deemphasis-color);
}

.general__grid.wider {
  column-width: 36ch;
}

.list__membership__table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--flow-spacing);
  align-items: center;
  justify-items: start;
}

.list__membership__table div:nth-child(2n) {
  justify-self: end;
}

.journal__entry__concise {
  background: var(--annotation-background);
  margin-bottom: var(--flow-spacing);
  padding: var(--flow-spacing);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0 var(--flow-spacing);
}
.journal__entry__concise .text {
  width: 100%;
}
.journal__entry__concise .dateline {
  font-size: var(--font-size-0);
  text-align: right;
  white-space: nowrap;
  line-height: 1;
}

.journal__entry {
  background: var(--annotation-background);
  margin-bottom: var(--flow-spacing);
  padding: var(--flow-spacing);
  max-width: 60ch;
  padding: var(--panel-padding);
}
.journal__entry .journal__entry__text {
  display: grid;
  grid-template-columns: min-content auto;
  align-items: start;
  gap: 0 var(--flow-spacing);
}
.journal__entry .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#journalTextInput {
  min-width: 20ch;
  max-width: 60ch;
  min-height: 16ch;
}

.version__history {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--flow-spacing);
  font-size: var(--font-size-0);
}

.table__adjusters {
  display: flex;
  gap: var(--button-row-spacing);
  margin-block: var(--button-row-spacing);
  flex-wrap: wrap;
}

.gallery__container {
  display: flex;
  overflow: scroll;
  margin-top: var(--flow-spacing);
  gap: 0 var(--flow-spacing);
}
.gallery__container a {
  margin: 0;
  padding: 0;
}
.gallery__container img {
  height: var(--gallery-thumb-height);
  width: auto;
  max-inline-size: none; /* this is necessary because of some boilerplate, somewhere */
  cursor: pointer;
  border-radius: var(--radius-2);
}

#map {
  margin-top: 0.5em;
  width: 100%;
  height: var(--gallery-thumb-height);
}

@media only screen and (max-width: 480px) {
  #map {
    width: 100%;
    height: 50vw;
  }
}
.primary__ingredient_thumbnail, .primary__bibliographic__thumbnail {
  margin-left: var(--flow-spacing);
  margin-bottom: var(--flow-spacing);
  display: grid;
  background-color: white;
  outline: 1px solid var(--deemphasis-color);
}
.primary__ingredient_thumbnail .ingredient_thumbnail, .primary__ingredient_thumbnail .primary__bibliographic__thumbnail, .primary__bibliographic__thumbnail .ingredient_thumbnail, .primary__bibliographic__thumbnail .primary__bibliographic__thumbnail {
  height: 275px;
  width: auto;
}
.primary__ingredient_thumbnail .ingredient_thumbnail.wide, .primary__ingredient_thumbnail .primary__bibliographic__thumbnail.wide, .primary__bibliographic__thumbnail .ingredient_thumbnail.wide, .primary__bibliographic__thumbnail .primary__bibliographic__thumbnail.wide {
  width: 275px;
  height: auto;
}
.primary__ingredient_thumbnail .attribution, .primary__bibliographic__thumbnail .attribution {
  width: 100%;
  text-align: right;
}
@media only screen and (max-width: 480px) {
  .primary__ingredient_thumbnail, .primary__bibliographic__thumbnail {
    float: none;
    margin-bottom: var(--flow-spacing);
    width: fit-content;
    margin-inline: auto;
  }
}

.bibliography__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: var(--flow-spacing);
  align-items: end;
  font-size: var(--font-size-0);
  padding: 0;
  margin: 0;
}
.bibliography__tiles li {
  text-align: center;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: subgrid;
  grid-row-start: span 2;
  padding: 0;
  margin: 0;
}
.bibliography__tiles figure {
  width: 75%;
  margin-inline: auto;
  padding: 0;
}
.bibliography__tiles img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 480px) {
  .bibliography__tiles {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.bibliographicPlaceholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deemphasis-color);
  text-align: center;
  font-size: 50pt;
}

.bibliographicPlaceholder:hover {
  color: var(--link-color);
}

.brand__products__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: var(--flow-spacing);
  align-items: end;
  background-color: white;
  font-size: var(--font-size-0);
  padding: 0;
  margin: 0;
}
.brand__products__grid li {
  text-align: center;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: subgrid;
  grid-row-start: span 2;
  padding: 0;
  margin: 0;
}
.brand__products__grid figure {
  width: 75%;
  margin-inline: auto;
  padding: 0;
}
.brand__products__grid img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: 275px;
}

@media only screen and (max-width: 480px) {
  .brand__products__grid, .bibliographyTiles {
    grid-template-columns: 1fr 1fr;
  }
}
.inventory__table {
  display: grid;
  grid-template-columns: auto min-content min-content;
  justify-items: start;
  align-items: center;
  gap: var(--flow-spacing);
}
.inventory__table .section {
  grid-column: 1/-1;
  width: 100%;
  font-weight: var(--font-weight-7);
  border-bottom: 1px solid var(--deemphasis-color);
  max-inline-size: none; /* override boilerplate */
}
.inventory__table .remove__faux__button {
  padding-inline: var(--flow-spacing);
}
.inventory__table .percentage, .inventory__table .subtotal {
  white-space: nowrap;
}
.inventory__table .button__row {
  flex-wrap: nowrap;
}

.inventory__table.former {
  grid-template-columns: auto min-content min-content min-content min-content;
}

.inventory__table.recipe-list, .inventory__table.calc {
  grid-template-columns: auto min-content min-content min-content min-content;
}

@media only screen and (max-width: 480px) {
  .inventory__table {
    font-size: var(--font-size-0);
  }
  .costing,
  .remove,
  .shopping,
  .percentage {
    display: none;
  }
  .quick__search__results .compound__button__label {
    padding-inline: 4px;
  }
  .inventory__table.former {
    grid-template-columns: auto min-content min-content;
  }
  .inventory__table.recipe-list {
    grid-template-columns: auto min-content min-content;
  }
  .inventory__table.calc {
    grid-template-columns: auto min-content min-content min-content;
  }
}
.inventory__setup {
  display: grid;
  grid-template-columns: min-content auto;
  justify-items: start;
  align-items: center;
  gap: var(--flow-spacing);
}
.inventory__setup .button__row {
  flex-wrap: nowrap;
}

table, th, tr, td {
  border-collapse: collapse;
  background: none;
  border: 0;
  padding-block: var(--size-1);
  padding-left: 0;
  padding-right: 0;
  margin-block: var(--flow-spacing);
  margin-inline: 0;
  text-align: left;
  align: left;
}

thead {
  border-bottom: 2px solid var(--tabular-rule-color);
}

tfoot {
  border-top: 2px solid var(--tabular-rule-color);
}

tr {
  border-bottom: 2px solid var(--tabular-rule-color);
}

tbody > tr:last-child {
  border-bottom: none;
}

tr td:not(:last-child) {
  padding-right: var(--flow-spacing);
}

th {
  padding-inline-end: var(--flow-spacing);
}

.calc__grid {
  display: grid;
  grid-template-columns: 4em auto;
  gap: var(--flow-spacing);
  align-items: center;
}
.calc__grid .rec__cell {
  grid-template-columns: auto;
}

.ingredientReportRow {
  display: grid;
  grid-template-columns: 1fr;
}
.ingredientReportRow svg.sampleAggregate {
  display: none;
}
@media only screen and (min-width: 900px) {
  .ingredientReportRow {
    grid-template-columns: auto 640px;
  }
  .ingredientReportRow svg.sampleAggregate {
    display: block;
    border-top: none;
    flex: none;
  }
}

@media only screen and (min-width: 720px) {
  .recipe__detail__grid {
    display: grid;
    grid-template-columns: [main-content-start] 2fr [main-content-end supplemental-content-start] 1fr [supplemental-content-end];
    grid-template-rows: [content-top] auto [content-split] 1fr [content-bottom];
    grid-template-areas: "main supplemental" "meta supplemental";
    gap: 0 var(--section-spacing);
  }
  .recipe__detail__grid :first-child {
    margin-top: 0;
  }
  .recipe__detail__main {
    grid-area: main;
  }
  .recipe__detail__user {
    grid-area: supplemental;
  }
  .recipe__detail__metadata {
    grid-area: meta;
  }
}
@media only screen and (min-width: 720px) {
  .ingredient__main__grid {
    display: grid;
    grid-template-columns: [main-content-start] 3fr [main-content-end supplemental-content-start] 1fr [supplemental-content-end];
    grid-template-areas: "main supplemental";
    gap: 0 var(--section-spacing);
  }
  .ingredient__main__grid :first-child {
    margin-top: 0;
  }
}
@media only screen and (min-width: 720px) {
  .bibliographyentry__main__grid {
    display: grid;
    grid-template-columns: [main-content-start] 3fr [main-content-end supplemental-content-start] 1fr [supplemental-content-end];
    grid-template-areas: "main supplemental";
    gap: 0 var(--section-spacing);
  }
  .bibliographyentry__main__grid :first-child {
    margin-top: 0;
  }
}
.citation__quick__search__results {
  padding-block: var(--panel-padding);
}
.citation__quick__search__results .insertCitationChoice {
  padding-block: var(--flow-spacing);
  border-bottom: 1px solid var(--deemphasis-color);
  cursor: pointer;
}
.citation__quick__search__results .insertCitationChoice:hover {
  color: var(--hicon-mono-foreground);
  background: var(--hicon-mono-background);
}

.recent__recipes {
  margin-bottom: var(--panel-margin-bottom);
}
.recent__recipes .rec__cell:first-child .listing {
  padding-top: 0;
}
.recent__recipes .rec__cell:last-child .listing {
  padding-bottom: 0;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.skiplink:focus-visible {
  text-align: center;
  position: absolute;
  padding: 0.5em;
  top: 1em;
  left: 1em;
  width: auto;
  height: auto;
  margin: 0;
  background-color: white;
  box-shadow: var(--shadow-2);
  z-index: 999;
  clip: auto;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger__menu__outer {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: var(--main-background-color);
}
.hamburger__menu__outer .hamburger__menu {
  position: relative;
  top: 0;
  left: 0;
  max-width: min(100%, 960px);
  margin-inline: auto;
  z-index: 2;
  padding-top: 4em;
  padding-inline: var(--flow-spacing);
}

@media screen and (max-width: 480px) {
  .hamburger__menu h2, .hamburger__menu li {
    margin-block: var(--size-2);
  }
}
nav {
  position: relative;
}

.hamburger__toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  cursor: pointer;
  width: 48px;
  height: 48px;
  opacity: 0;
  flex: none;
}
.hamburger__toggle:checked + .hamburger > div {
  transform: rotate(135deg);
}
.hamburger__toggle:checked + .hamburger > div:before, .hamburger__toggle:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
.hamburger__toggle:checked + .hamburger > div:after {
  opacity: 0;
}
.hamburger__toggle:checked ~ .hamburger__menu {
  pointer-events: auto;
  visibility: visible;
}
.hamburger__toggle:checked ~ .hamburger__menu > div {
  transform: scale(1);
  transition-duration: 0.75s;
}
.hamburger__toggle:checked ~ .hamburger__menu > div > div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}
.hamburger__toggle:hover + .hamburger {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.hamburger__toggle:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}

.hamburger {
  position: static;
  top: 0;
  left: 0;
  z-index: 1005;
  width: 48px;
  height: 48px;
  padding: 0.5em 1em;
  background-color: var(--input-background-color);
  border-radius: 0 0.12em 0.12em 0;
  cursor: pointer;
  transition: box-shadow 0.4s ease;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: var(--link-color);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hamburger > div:before, .hamburger > div:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  transition: all 0.4s ease;
}
.hamburger > div:after {
  top: 8px;
}

.hamburger__toggle:focus ~ .hamburger {
  /* Not all browsers support outline: auto, so set a sensible fallback outline. */
  outline: 2px solid red;
  outline: auto;
  outline-offset: 4px;
}

.quick__search__results {
  display: grid;
  grid-template-columns: auto min-content min-content;
  justify-items: start;
  align-items: center;
  gap: 0;
  /* this should probably be generalized, if possible, as a wrapper for these things */
}
.quick__search__results .context {
  display: block;
  font-size: var(--font-size-0);
  color: var(--deemphasis-color);
}
.quick__search__results .recipe {
  grid-column: 1/-1;
  width: 100%;
}
.quick__search__results .filterctrl {
  display: flex;
}
.quick__search__results .popular a {
  font-weight: 700;
}
.quick__search__results .grid__rule {
  grid-column: 1/-1;
  background-color: var(--tabular-rule-color);
  height: 2px;
  width: 100%;
  margin-block: calc(var(--flow-spacing) / 2);
}

@media only screen and (max-width: 480px) {
  .quick__search__results {
    font-size: var(--font-size-0);
  }
  .recipe__link {
    font-size: var(--font-size-1);
  }
  .quick__search__results .compound__button__label {
    padding-inline: 4px;
  }
  .quick__search__results .filterctrl {
    display: none;
  }
  .ingredient {
    grid-column: 1/3;
  }
  .quick__search__results .curator__icon img {
    max-inline-size: none; /* boilerplate override */
  }
}
/*
Accordion (adapted from https://codepen.io/markcaron/pen/RVvmaz)
*/
.accordion {
  position: relative;
  box-shadow: var(--shadow-2);
}

.accordion > input[type=checkbox] {
  position: absolute;
  left: -100vw;
}

.accordion__handle {
  padding: var(--flow-spacing);
  border-top: 1px solid var(--accordion-border-color-closed);
  border-left: 1px solid var(--accordion-border-color-closed);
}

.accordion .accordion__handle label:before {
  font-family: "fontawesome";
  content: "\f054";
}

.accordion label {
  display: flex;
  gap: 0 var(--flow-spacing);
  margin: 0;
  color: var(--link-color);
  cursor: pointer;
}

.accordion.admin label {
  color: var(--admin-color);
}

.accordion label:hover,
.accordion label:focus-visible {
  color: var(--link-hover-color);
}

.accordion .accordion__content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
  border-left: 1px solid var(--form-background-color);
  margin-bottom: var(--flow-spacing);
}

.accordion > input[type=checkbox]:checked ~ .accordion__content {
  height: auto;
  overflow: visible;
  padding: var(--panel-padding);
  margin-bottom: 0;
  border-bottom: 1px solid var(--deemphasis-color);
  border-color: var(--deemphasis-color);
}
.accordion > input[type=checkbox]:checked ~ .accordion__content label {
  margin-bottom: 0;
}

.accordion > input[type=checkbox]:checked ~ .accordion__handle {
  margin-bottom: 0;
  border-color: var(--deemphasis-color);
}

.accordion > input[type=checkbox]:checked ~ .accordion__handle label:before {
  content: "\f078";
}

@media screen and (min-width: 720px) {
  .accordion.desktop--force--open {
    box-shadow: none;
  }
  .accordion.desktop--force--open .accordion__handle {
    display: none;
  }
  .accordion.desktop--force--open .accordion__content {
    height: auto;
    overflow: visible;
    border: none;
  }
  .accordion.desktop--force--open .accordion__content label {
    margin-bottom: 0;
    color: var(--deemphasis-color);
    cursor: default;
  }
  .accordion.desktop--force--open .accordion__content label:hover, .accordion.desktop--force--open .accordion__content label:focus-visible {
    color: var(--deemphasis-color);
  }
}
.accordion.rescaled {
  border: 1px solid var(--deemphasis-color);
  box-shadow: var(--shadow-2);
  padding-bottom: 0;
}
.accordion.rescaled .accordion__handle {
  display: none;
}
.accordion.rescaled .accordion__content {
  padding: var(--panel-padding);
  height: auto;
  overflow: visible;
}
.accordion.rescaled .accordion__content label {
  margin-bottom: 0;
}

.faux__button {
  --_text: var(--_accent,var(--link-color));
  --_accent: initial;
  --_size: initial;
  --_bg-light: #fff;
  --_bg-dark: var(--link-background);
  --_bg: var(--_bg-light);
  --_border: var(--surface-3);
  --_highlight-size: 0;
  --_highlight-light: hsl(var(--gray-5-hsl)/25%);
  --_highlight-dark: hsl(var(--gray-12-hsl)/25%);
  --_highlight: var(--_highlight-light);
  --_ink-shadow-light: 0 1px 0 var(--gray-3);
  --_ink-shadow-dark: 0 1px 0 var(--surface-1);
  --_ink-shadow: var(--_ink-shadow-light);
  --_icon-size: var(--size-relative-7);
  --_icon-color: var(--_accent,var(--link));
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  align-items: center;
  background: var(--_bg);
  border: var(--border-size-2) solid var(--_border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2), 0 1px var(--surface-3), 0 0 0 var(--_highlight-size) var(--_highlight);
  color: var(--_text);
  display: inline-flex;
  /* font-size: var(--_size); */
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-7);
  gap: var(--size-2);
  justify-content: center;
  padding-block: 0.75ch;
  padding-inline: var(--size-relative-6);
  text-align: center;
  text-shadow: var(--_ink-shadow);
  text-decoration: none;
  cursor: pointer;
}

.faux__button i {
  padding-block: 4px;
}

.faux__button:hover {
  --_text: var(currentColor);
  --_border: currentColor;
}

.faux__button.inverse {
  background: yellow;
  box-shadow: var(--button-glow-box-shadow);
}

[data-theme=dark] .faux__button.inverse {
  background-image: var(--gradient-25);
  color: black;
}

.compound__button {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
}
.compound__button .faux__button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.state__lamp {
  --_lamp-dim: calc( var(--size-relative-5) * 2);
  display: block;
  height: var(--_lamp-dim);
  width: auto;
  line-height: var(--_lamp-dim);
  background: none;
  aspect-ratio: 1/1;
  border-radius: var(--radius-2);
  margin-left: 4px;
  box-shadow: var(--button-glow-box-shadow);
  padding-right: 0 !important; /* this is to override boilerplate--may not be necessary once I ditch <table> in search results */
  outline: 2px solid var(--_border);
}

.compound__button__label {
  padding-block: 0.75ch;
  padding-inline: var(--size-relative-6);
}

.compound__button__label::before {
  content: "Inv";
}

@media screen and (min-width: 480px) {
  .compound__button__label::before {
    content: "Inventory";
  }
}
.state--in-inventory {
  background-color: lightgreen;
  color: var(--inventoryGreen);
  box-shadow: var(--button-glow-box-shadow);
}

.state--in-inventory:before {
  content: "✔︎";
}

.state--not-in-inventory {
  background: none;
  color: var(--inventoryGray);
  box-shadow: none;
}

.state--not-in-inventory:before {
  content: "✘";
}

.state--sub {
  background-color: lightyellow;
  color: var(--inventoryYellow);
}

.state--sub:before {
  content: "sub";
}

[data-theme=dark] .faux__button {
  --_bg: var(--gray-9);
  --_border: var(--gray-7);
  --_highlight: var(--_highlight-dark);
  --_ink-shadow: var(--_ink-shadow-dark);
}

@media (prefers-reduced-motion: no-preference) {
  .faux__button {
    transition: border-color 0.5s var(--ease-3), box-shadow 145ms var(--ease-4), outline-offset 145ms var(--ease-4);
  }
  .faux__button:hover {
    --_highlight-size: var(--size-2);
    transition-duration: 0.25s;
    --_border: currentColor;
  }
  button:hover {
    --_highlight-size: var(--size-1);
    --_border: currentColor;
  }
}
a.remove__faux__button, a.remove__faux__button:visited, span.remove__faux__button {
  display: inline;
  color: red;
  font-size: var(--font-size-1);
  font-weight: bold;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
a.remove__faux__button:hover, a.remove__faux__button:visited:hover, span.remove__faux__button:hover {
  text-decoration: none;
  color: hsl(from red h s calc(l * 0.85));
}

.remove__faux__button.superscript {
  position: absolute;
  top: -8px;
  right: -9px;
}

form, .filter__options {
  margin-block-end: var(--panel-margin-bottom);
}
form:hover, .filter__options:hover {
  /* box-shadow: var(--shadow-3); */
}
form label, .filter__options label {
  margin-bottom: 0;
  margin-bottom: var(--flow-spacing);
}
form * + label, .filter__options * + label {
  margin-top: var(--flow-spacing);
  margin-top: 1lh;
}
form p, .filter__options p {
  margin-top: var(--flow-spacing);
}
form p:first-of-type, .filter__options p:first-of-type {
  margin-top: 0;
}

form:last-child {
  margin-block-end: 0;
}

fieldset {
  margin-block: var(--flow-spacing);
}

.form--panel, .filter__options {
  padding: var(--panel-padding);
  border-radius: var(--radius-2);
}

.filter__options {
  padding-top: var(--flow-spacing);
}

.form--panel {
  background-color: var(--form-background-color);
}

.form--panel.admin {
  background-color: color-mix(in lab, var(--orange-6) 20%, var(--main-background-color));
}

form.single__row__form {
  display: flex;
  gap: var(--flow-spacing);
  margin-block: var(--panel-margin-bottom);
  align-items: center;
  max-width: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
}
form.single__row__form input {
  min-width: 12ch;
}

.filter__options {
  max-inline-size: 70ch;
}

.options {
  display: grid;
  gap: var(--flow-spacing);
  margin-block-end: var(--panel-margin-bottom);
}

.login--form {
  width: min-content;
  margin-inline: auto;
}

.form__row {
  display: flex;
  gap: var(--flow-spacing);
  align-items: center;
  margin-block: var(--flow-spacing);
}
.form__row label {
  margin: 0;
}

label, legend {
  display: block;
  margin-bottom: var(--flow-spacing);
  /* margin-bottom: 0; */
  color: var(--label-color);
  max-width: 100%;
}

form p.warning {
  margin-block: var(--flow-spacing);
}

legend {
  padding-inline: var(--flow-spacing);
}

input:not([type=button]):not([type=reset]):not([type=submit]):not([type=image]), select, textarea, #procRecInsert table {
  background-color: var(--input-background-color);
  border: var(--border-size-1) solid var(--gray-6);
  max-width: 100%;
}

[data-theme=dark] input, [data-theme=dark] select, [data-theme=dark] textarea, [data-theme=dark] #procRecInsert table {
  background-color: var(--input-background-color-dark);
  border: var(--border-size-1) solid var(--link-border-color);
  --_ink-shadow: var(--_ink-shadow-dark);
}
[data-theme=dark] input::placeholder {
  color: currentColor;
}
[data-theme=dark] input[type=button], [data-theme=dark] input[type=submit] {
  background-color: var(--surface-1);
}

textarea {
  width: 100%;
  max-width: 100%;
}

.login__form {
  display: grid;
  gap: var(--flow-spacing);
  width: fit-content;
  margin-inline: auto;
}

/* recipe edit */
#BibSearchOverlay {
  display: none;
  width: 100%;
  padding: 0.5em;
}
#BibSearchOverlay td {
  line-height: 2em;
}

#procRecFieldset {
  padding-right: var(--panel-padding);
  padding-left: var(--panel-padding);
  padding-block-end: var(--panel-padding);
}

#recipeeditgridcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content minmax(0, 1fr);
  gap: var(--flow-spacing);
  margin: 0.5em 0;
  max-width: none;
}
@media only screen and (max-width: 480px) {
  #recipeeditgridcontainer {
    grid-template-columns: 1fr;
  }
}

#proceduralrecipe {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: span 2;
  padding: 0;
  margin: 0;
}
@media only screen and (max-width: 480px) {
  #proceduralrecipe {
    padding-right: 0;
  }
}

#helperTabs {
  grid-column: 2/3;
  grid-row: 1/2;
  margin-top: 0;
  margin-bottom: 0;
}

#procRecInsertComponentOverlay {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row: 2/3;
}
#procRecInsertComponentOverlay .tab__row {
  margin-top: 0;
}
#procRecInsertComponentOverlay label {
  margin-top: 0;
}
#procRecInsertComponentOverlay #procRecInsert, #procRecInsertComponentOverlay #procIngInsert {
  overflow-y: scroll;
  height: 408px;
  background-color: var(--form-background-color);
}
#procRecInsertComponentOverlay #procIngInsert {
  height: 366px;
}
#procRecInsertComponentOverlay .syntax {
  font-size: var(--font-size-05);
  padding: var(--inline-gap);
}
#procRecInsertComponentOverlay .syntax small {
  color: var(--deemphasis-color);
}
#procRecInsertComponentOverlay .syntax:hover {
  color: var(--hicon-mono-foreground);
  background-color: var(--hicon-mono-background);
  cursor: pointer;
}
#procRecInsertComponentOverlay #procIngFindCorral {
  background: white;
  border: 1px solid #666;
  border-radius: var(--radius-round);
  padding: 0;
  margin: 2rem 0 0 0;
  display: flex;
  align-items: center;
  display: none;
}
#procRecInsertComponentOverlay #procIngFindCorral #procIngFindWrap .clearsearch {
  color: black;
}
#procRecInsertComponentOverlay #procIngFindCorral #procRecIngSearch {
  margin-top: 0;
  margin-bottom: 0;
  width: 260px;
}
#procRecInsertComponentOverlay .insert--ingredient--tab {
  display: none;
  margin-bottom: var(--flow-spacing);
}
@media only screen and (max-width: 480px) {
  #procRecInsertComponentOverlay {
    display: none;
  }
}

.draggable-sortable {
  border: 1px solid lightgrey;
  cursor: pointer;
  padding: var(--size-1);
  margin-block: var(--flow-spacing);
  background-color: white;
  border-radius: var(--border-size-2);
}
.draggable-sortable.unordered {
  background-color: lightyellow;
}
.draggable-sortable i {
  margin-inline: var(--flow-spacing);
}

.misenplace {
  position: relative;
  padding: var(--panel-padding);
  border: var(--recipePanelBorder);
  background-color: var(--curatorial-panel-background-color);
}
.misenplace.cached {
  background-color: lightyellow;
}
.misenplace div.caption {
  margin-block: var(--flow-spacing);
}
.misenplace .dismiss__button {
  position: absolute;
  top: 1em;
  right: 1em;
}
@media only screen and (min-width: 480px) {
  .misenplace {
    width: fit-content;
  }
}

small, .small {
  font-size: var(--font-size-0);
  max-inline-size: none; /* boilerplate override */
  line-height: 1.2;
}

small {
  display: block;
}

p {
  margin-block: 1lh;
}

a {
  color: var(--link-color);
  text-decoration-color: color-mix(in srgb, currentColor, transparent 70%);
  text-underline-offset: 0.1em;
}

a:hover:not(.faux__button) {
  color: var(--link-hover-color);
  border-color: var(--link-hover-color);
}

h1 {
  font-size: var(--font-size-5);
  max-inline-size: 100%; /* undo boilerplate */
  text-wrap: wrap; /* default was text-wrap: balance, but this caused weirdness on Safari with the max-inline-size: 100% */
}

h2 {
  font-size: var(--font-size-3);
  font-stretch: expanded;
  font-weight: 600;
  max-inline-size: 100%; /* undo boilerplate */
}

h3 {
  font-size: var(--font-size-2);
  font-weight: 600;
  max-inline-size: 100%; /* undo boilerplate */
}

.bullets {
  list-style: disc;
  margin-left: 4ch;
}

.analytics, .ingredientTable {
  font-size: var(--fluid-table-font-size);
  font-stretch: condensed;
}
.analytics th, .analytics td, .ingredientTable th, .ingredientTable td {
  padding-inline: var(--flow-spacing);
}

.count, .attribution {
  font-size: var(--font-size-0);
  font-style: italic;
}

.recipeType {
  font-size: var(--font-size-0);
}

#flag {
  cursor: pointer;
  transition: color 30s linear;
}
#flag svg {
  width: 100%;
  height: auto;
}

[data-theme=dark] #flag svg {
  fill: white;
}

.quicksearch__wrapper i {
  color: var(--gray-6);
}

#treeSearchField {
  font-size: var(--font-size-1);
  width: 13ch;
}

.breadcrumbs ol {
  list-style: none;
  padding-inline: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--inline-gap);
  margin-bottom: var(--flow-spacing);
}

.breadcrumbs li {
  padding: 0;
  margin: 0;
  line-height: 1.2;
}

.breadcrumbs li a, .breadcrumbs li i {
  font-size: var(--font-size-0);
  padding: 0;
  margin: 0;
}

.breadcrumbs li i {
  margin-left: var(--inline-gap);
}

.keywords__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: center;
  gap: var(--flow-spacing);
  padding-block: var(--flow-spacing);
}

.flavor__cloud {
  row-gap: 0;
  line-height: 1;
}
.flavor__cloud a.flav--herbal {
  color: var(--flav-herbal-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-herbal), 0 0 0.2em var(--flav-herbal);
}
.flavor__cloud a.flav--floral {
  color: var(--flav-floral-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-floral), 0 0 0.2em var(--flav-floral);
}
.flavor__cloud a.flav--fruit {
  color: var(--flav-fruit-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-fruit), 0 0 0.2em var(--flav-fruit);
}
.flavor__cloud a.flav--cream {
  color: var(--flav-cream-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-cream), 0 0 0.2em var(--flav-cream);
}
.flavor__cloud a.flav--essences {
  color: var(--flav-essences-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-essences), 0 0 0.2em var(--flav-essences);
}
.flavor__cloud a.flav--spice {
  color: var(--flav-spice-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-spice), 0 0 0.2em var(--flav-spice);
}
.flavor__cloud a.flav--nutty {
  color: var(--flav-nutty-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-nutty), 0 0 0.2em var(--flav-nutty);
}
.flavor__cloud a.flav--spirits {
  color: var(--flav-spirits-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-spirits), 0 0 0.2em var(--flav-spirits);
}
.flavor__cloud a.flav--grain {
  color: var(--flav-grain-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-grain), 0 0 0.2em var(--flav-grain);
}
.flavor__cloud a.flav--vegetal {
  color: var(--flav-vegetal-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-vegetal), 0 0 0.2em var(--flav-vegetal);
}
.flavor__cloud a.flav--other {
  color: var(--flav-other-medium);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-other), 0 0 0.2em var(--flav-other);
}

[data-theme=dark] .flavor__cloud {
  row-gap: 0;
  line-height: 1;
}
[data-theme=dark] .flavor__cloud a.flav--herbal {
  color: var(--flav-herbal);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-herbal), 0 0 0.2em var(--flav-herbal);
}
[data-theme=dark] .flavor__cloud a.flav--floral {
  color: var(--flav-floral);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-floral), 0 0 0.2em var(--flav-floral);
}
[data-theme=dark] .flavor__cloud a.flav--fruit {
  color: var(--flav-fruit);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-fruit), 0 0 0.2em var(--flav-fruit);
}
[data-theme=dark] .flavor__cloud a.flav--cream {
  color: var(--flav-cream);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-cream), 0 0 0.2em var(--flav-cream);
}
[data-theme=dark] .flavor__cloud a.flav--essences {
  color: var(--flav-essences);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-essences), 0 0 0.2em var(--flav-essences);
}
[data-theme=dark] .flavor__cloud a.flav--spice {
  color: var(--flav-spice);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-spice), 0 0 0.2em var(--flav-spice);
}
[data-theme=dark] .flavor__cloud a.flav--nutty {
  color: var(--flav-nutty);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-nutty), 0 0 0.2em var(--flav-nutty);
}
[data-theme=dark] .flavor__cloud a.flav--spirits {
  color: var(--flav-spirits);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-spirits), 0 0 0.2em var(--flav-spirits);
}
[data-theme=dark] .flavor__cloud a.flav--grain {
  color: var(--flav-grain);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-grain), 0 0 0.2em var(--flav-grain);
}
[data-theme=dark] .flavor__cloud a.flav--vegetal {
  color: var(--flav-vegetal);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-vegetal), 0 0 0.2em var(--flav-vegetal);
}
[data-theme=dark] .flavor__cloud a.flav--other {
  color: var(--flav-other);
  text-shadow: 1px 1px 2px var(--hicon-mono-foreground), 0 0 1em var(--flav-other), 0 0 0.2em var(--flav-other);
}

.flavorcloud-0 {
  font-size: 60%;
  opacity: 5.5;
}

.flavorcloud-1 {
  font-size: 80%;
  opacity: 0.6;
}

.flavorcloud-2 {
  font-size: 100%;
  opacity: 0.65;
}

.flavorcloud-3 {
  font-size: 110%;
  opacity: 0.7;
}

.flavorcloud-4 {
  font-size: 120%;
  opacity: 0.75;
}

.flavorcloud-5 {
  font-size: 140%;
  opacity: 0.8;
}

.flavorcloud-6 {
  font-size: 160%;
  opacity: 0.85;
}

.flavorcloud-7 {
  font-size: 180%;
  opacity: 0.9;
}

.flavorcloud-8 {
  font-size: 200%;
  opacity: 0.95;
}

.flavorcloud-9 {
  font-size: 220%;
  opacity: 1;
}

.help__link {
  color: var(--link-color);
  cursor: pointer;
}

.help__container {
  position: relative;
  display: none;
  align-items: flex-start;
  gap: var(--flow-spacing);
  margin-bottom: var(--flow-spacing);
  background: var(--help-bkgd-A); /* fallback for old browsers */
  background: linear-gradient(45deg, var(--help-bkgd-A), var(--help-bkgd-B));
  border-radius: var(--radius-2);
  padding: var(--panel-padding);
}
.help__container p {
  font-size: var(--font-size-1);
}

[data-theme=dark] .help__container {
  background: var(--help-bkgd-A); /* fallback for old browsers */
  background: linear-gradient(45deg, var(--help-bkgd-A), var(--help-bkgd-B));
}

.demo, .msgdemo {
  max-width: 60ch;
  margin-inline: auto;
  margin-block: var(--flow-spacing);
  text-align: center;
  padding: var(--panel-padding);
  border-radius: var(--radius-2);
  background: repeating-linear-gradient(45deg, var(--help-bkgd-A), var(--help-bkgd-A) 15px, var(--help-bkgd-B) 15px, var(--help-bkgd-B) 30px);
  box-shadow: var(--shadow-4);
}

.citation {
  font-size: var(--font-size-0);
  font-style: italic;
}

.mediaType {
  color: var(--deemphasis-color);
}

.affinity__grid {
  background-color: var(--flav-other-light);
}

[data-theme=dark] .affinity__grid {
  background-color: var(--flav-other-dark);
}

.flavor__kw__group, .affinity__grid {
  padding-inline: var(--flow-spacing);
  border-radius: var(--radius-3);
  border-top-left-radius: 0;
}
.flavor__kw__group.flav--herbal, .affinity__grid.flav--herbal {
  background-color: var(--flav-herbal-light);
}
.flavor__kw__group.flav--floral, .affinity__grid.flav--floral {
  background-color: var(--flav-floral-light);
}
.flavor__kw__group.flav--fruit, .affinity__grid.flav--fruit {
  background-color: var(--flav-fruit-light);
}
.flavor__kw__group.flav--cream, .affinity__grid.flav--cream {
  background-color: var(--flav-cream-light);
}
.flavor__kw__group.flav--essences, .affinity__grid.flav--essences {
  background-color: var(--flav-essences-light);
}
.flavor__kw__group.flav--spice, .affinity__grid.flav--spice {
  background-color: var(--flav-spice-light);
}
.flavor__kw__group.flav--nutty, .affinity__grid.flav--nutty {
  background-color: var(--flav-nutty-light);
}
.flavor__kw__group.flav--spirits, .affinity__grid.flav--spirits {
  background-color: var(--flav-spirits-light);
}
.flavor__kw__group.flav--grain, .affinity__grid.flav--grain {
  background-color: var(--flav-grain-light);
}
.flavor__kw__group.flav--vegetal, .affinity__grid.flav--vegetal {
  background-color: var(--flav-vegetal-light);
}
.flavor__kw__group.flav--other, .affinity__grid.flav--other {
  background-color: var(--flav-other-light);
}

[data-theme=dark] .flavor__kw__group {
  padding-inline: var(--flow-spacing);
  padding-block: var(--flow-spacing);
  border-radius: var(--radius-3);
}
[data-theme=dark] .flavor__kw__group.flav--herbal {
  background-color: var(--flav-herbal-dark);
}
[data-theme=dark] .flavor__kw__group.flav--floral {
  background-color: var(--flav-floral-dark);
}
[data-theme=dark] .flavor__kw__group.flav--fruit {
  background-color: var(--flav-fruit-dark);
}
[data-theme=dark] .flavor__kw__group.flav--cream {
  background-color: var(--flav-cream-dark);
}
[data-theme=dark] .flavor__kw__group.flav--essences {
  background-color: var(--flav-essences-dark);
}
[data-theme=dark] .flavor__kw__group.flav--spice {
  background-color: var(--flav-spice-dark);
}
[data-theme=dark] .flavor__kw__group.flav--nutty {
  background-color: var(--flav-nutty-dark);
}
[data-theme=dark] .flavor__kw__group.flav--spirits {
  background-color: var(--flav-spirits-dark);
}
[data-theme=dark] .flavor__kw__group.flav--grain {
  background-color: var(--flav-grain-dark);
}
[data-theme=dark] .flavor__kw__group.flav--vegetal {
  background-color: var(--flav-vegetal-dark);
}
[data-theme=dark] .flavor__kw__group.flav--other {
  background-color: var(--flav-other-dark);
}

@keyframes outline-pulsate {
  0% {
    outline-color: var(--link-color);
  }
  50% {
    outline-color: var(--main-background-color);
  }
  100% {
    outline-color: var(--link-color);
  }
}
.filter__set, .keywordlozenge {
  display: block;
  flex-wrap: nowrap;
  font-size: var(--font-size-0);
  padding-block: var(--size-1);
  padding-inline: var(--size-2);
  border-radius: var(--radius-round);
  background-color: var(--link-background);
  color: white;
  margin: 0;
  display: flex;
  gap: 0 var(--flow-spacing);
  align-items: center;
  /* only applies to large lozenges with icons */
}
.filter__set span.label, .keywordlozenge span.label {
  color: var(--link-background-label);
}
.filter__set .count, .keywordlozenge .count {
  color: var(--link-background-label);
}
.filter__set img, .keywordlozenge img {
  width: var(--kwicon-diameter);
  outline: 2px solid var(--main-background-color);
  border-top-left-radius: var(--radius-round);
  border-bottom-left-radius: var(--radius-round);
  border-top-right-radius: var(--radius-round);
  border-bottom-right-radius: var(--radius-round);
}
.filter__set .shrink, .keywordlozenge .shrink {
  flex-shrink: 2;
}
.filter__set .shrink span.label, .keywordlozenge .shrink span.label {
  display: block;
}

.filter__set.kwicon {
  padding-block: var(--size-2);
}

.filter__set:hover {
  color: white !important;
  background-color: var(--link-background-hover-color);
  text-decoration: none;
}

.filter__set.currentRecipeFilter {
  /* this is (at least temporarily) necessary for the filter history */
  flex: none;
}
.filter__set.currentRecipeFilter.active {
  outline: 2px solid var(--link-background);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  .filter__set.currentRecipeFilter.active {
    animation: outline-pulsate 2s infinite;
  }
}
.filter__wrapper {
  position: relative;
}

.filter__element {
  display: inline-block;
  font-size: var(--font-size-0);
  padding-block: var(--size-1);
  padding-inline: var(--size-2);
  border-radius: var(--radius-round);
  background-color: var(--link-background);
  color: white;
  border-radius: var(--radius-round);
  /* .label:not(:first-of-type) {
  	margin-left: 1em;
  } */
}
.filter__element span.label {
  color: var(--link-background-label);
  font-size: inherit;
}
.filter__element:hover {
  background-color: color-mix(in srgb, white 20%, var(--link-background));
  cursor: pointer;
  text-decoration: none;
}

.addFilterFauxButton, .addNegFilterFauxButton {
  /* line-height: 1; */
  color: var(--link-color);
  cursor: pointer;
  margin-right: var(--flow-spacing);
  font-size: 150%;
  display: inline-block;
}

.keywordlozenge {
  position: relative;
}
.keywordlozenge .remove__faux__button.superscript {
  right: -2px;
}

.rescaled__recipe__panel {
  padding: var(--panel-padding);
  position: relative;
  margin-bottom: var(--flow-spacing);
  border: var(--recipePanelBorder);
  background: var(--_presentation-bkgd);
  background-size: cover;
}

.recipe__panel {
  padding: var(--panel-padding);
  position: relative;
  margin-bottom: var(--flow-spacing);
  /* generic presentation (used for myrecipe) */
  border: var(--recipePanelBorder);
  color: black;
  background: var(--_presentation-bkgd);
  background-size: cover;
  font-family: var(--_presentation-font-family);
}
.recipe__panel p {
  margin-block: 0.2lh;
}
.recipe__panel h1 {
  font-family: var(--_presentation-font-family);
  font-stretch: expanded;
  margin-top: 0;
  line-height: 1.1;
}
.recipe__panel a {
  color: currentColor;
  text-decoration: underline;
}
.recipe__panel .citation {
  clear: both;
}
.recipe__panel .originalVerbiage {
  margin-block: 1lh;
}
.recipe__panel a:hover {
  color: var(--_presentation-link-hover-color);
}
.recipe__panel .primaryRecipeThumbnail {
  float: right;
  max-width: 275px;
  margin-left: var(--flow-spacing);
  margin-bottom: var(--flow-spacing);
  display: grid;
}
.recipe__panel .primaryRecipeThumbnail a {
  margin: 0;
  padding: 0;
}
.recipe__panel .primaryRecipeThumbnail .recipeThumbnail {
  height: 275px;
  width: auto;
}
.recipe__panel .primaryRecipeThumbnail .recipeThumbnail.wide {
  width: 275px;
  height: auto;
}
.recipe__panel .primaryRecipeThumbnail .attribution {
  width: 100%;
  text-align: right;
}
@media only screen and (max-width: 480px) {
  .recipe__panel .primaryRecipeThumbnail {
    float: none;
    margin-bottom: var(--flow-spacing);
    width: fit-content;
    margin-inline: auto;
  }
}
.recipe__panel figure.placeholder, .recipe__panel figure.upload {
  background-color: #ddd;
}
.recipe__panel p.ingredient {
  margin-left: 1em;
}

.curatorial__badges {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 var(--flow-spacing) 0;
}
.curatorial__badges .badge a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0 var(--flow-spacing);
  font-weight: bold;
  text-decoration: none;
  color: black;
  cursor: pointer;
}
.curatorial__badges .badge a img {
  margin-right: var(--flow-spacing);
}

.curatorial__annotation {
  padding: var(--panel-padding);
  border: var(--recipePanelBorder);
  background-color: var(--curatorial-panel-background-color);
}

.popularity__summary {
  display: flex;
  gap: var(--flow-spacing);
  align-items: center;
  justify-content: space-around;
  margin-block: var(--flow-spacing);
  color: currentColor;
}

.popularity__summary span.disabled {
  color: var(--deemphasis-color);
}

.recipeTable__dateline {
  color: var(--deemphasis-color);
  font-size: var(--font-size-0);
  margin-top: 0;
  line-height: 1.2;
}

@media only screen and (max-width: 480px) {
  .recipe__panel {
    padding: var(--flow-spacing);
  }
  .originalVerbiage p {
    font-size: var(--font-size-1);
  }
}
.thumb {
  float: right;
  margin-left: var(--flow-spacing);
  margin-bottom: var(--flow-spacing);
}

.barware__matches {
  display: grid;
  align-items: start;
  justify-items: start;
  grid-auto-flow: row;
  gap: var(--flow-spacing);
}

.barware__match {
  display: flex;
  place-items: start;
  align-items: center;
  gap: var(--flow-spacing);
}
.barware__match figure {
  height: 99px;
  width: auto;
  aspect-ratio: 1/1;
}
.barware__match div {
  font-size: var(--font-size-0);
  text-align: left;
}

.barwareThumbnail {
  height: 99px;
  width: auto;
  border: 1px solid var(--deemphasis-color);
}

.barwareThumbnail.wide {
  height: auto;
  width: 99px;
}

.hairballPresentation1860 {
  --_presentation-bkgd: var(--hairball-bkgd-1860s);
  --_presentation-font-family: var(--serif-font-family);
  font-stretch: normal;
}

.hairballPresentation1870 {
  --_presentation-bkgd: var(--hairball-bkgd-1870s);
  --_presentation-font-family: var(--serif-font-family);
  font-stretch: normal;
}

.hairballPresentation1880 {
  --_presentation-bkgd: var(--hairball-bkgd-1880s);
  --_presentation-font-family: var(--serif-font-family);
  font-stretch: normal;
}

.hairballPresentation1890 {
  --_presentation-bkgd: var(--hairball-bkgd-1890s);
  --_presentation-font-family: var(--serif-font-family);
  font-stretch: normal;
}

.hairballPresentation1900 {
  --_presentation-bkgd: var(--hairball-bkgd-1900s);
  --_presentation-font-family: var(--serif-font-family);
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  font-stretch: normal;
}

.hairballPresentation1910 {
  --_presentation-bkgd: var(--hairball-bkgd-1910s);
  --_presentation-font-family: var(--serif-font-family);
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  font-stretch: normal;
}

.hairballPresentation1920 {
  --_presentation-bkgd: var(--hairball-bkgd-1920s);
  --_presentation-font-family: var(--serif-font-family);
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  font-stretch: normal;
}

.hairballPresentation1930 {
  --_presentation-bkgd: var(--hairball-bkgd-1930s);
  --_presentation-font-family: var(--serif-font-family);
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  font-stretch: normal;
}

.hairballPresentation1940 {
  --_presentation-bkgd: var(--hairball-bkgd-1940s);
  --_presentation-font-family: var(--serif-font-family);
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  font-stretch: normal;
}

.hairballPresentation1950 {
  --_presentation-bkgd: var(--hairball-bkgd-1950s);
  --_presentation-font-family: var(--serif-font-family);
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  font-stretch: normal;
}

.contemporaryPresentation {
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  background: linear-gradient(60deg, rgb(234, 234, 234) 0%, rgb(252, 252, 252) 35%, rgb(231, 231, 231) 150%);
  box-shadow: inset 0 0 6px #999;
}

.totalTikiPresentation {
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  background: url("/static/gfx/bkgd.tiki@2x.png");
}

.totalTikiPresentation_berry {
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  background: url("/static/gfx/bkgd.tikiBum@2x.png");
}

.totalTikiPresentation_dtb {
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  color: var(--dark-mode-color);
  background: url("/static/gfx/bkgd.tikiDtB@2x.png");
  border: none;
}

.totalTikiPresentation_tv {
  --_presentation-link-hover-color: color-mix(in srgb, white 15%, var(--link-color));
  color: var(--dark-mode-color);
  background: url("/static/gfx/bkgd.tikiTV@2x.png");
  border: none;
}

.totalTikiPresentation_dtb .badge a img, .totalTikiPresentation_tv .badge a img {
  filter: drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 5px #fff);
}

.procedural__recipe .context, .procedural__recipe .component {
  font-size: var(--font-size-0);
  background-color: var(--gray-3);
  padding: 1px 3px;
  margin-bottom: 2px;
}
.procedural__recipe .component {
  text-indent: 4ch;
}

[data-theme=dark] .procedural__recipe .context, [data-theme=dark] .procedural__recipe .component {
  background-color: var(--gray-8);
}

.rec__cell {
  margin: 0;
  position: relative;
  /* mobile sizes we don’t include the balance graph and alc graph */
  /* deprecating this */
  /* // deprecating this */
}
@media only screen and (min-width: 729px) {
  .rec__cell {
    display: grid;
    grid-template-columns: auto 307px 112px;
    gap: 0 var(--flow-spacing);
  }
}
@media screen and (max-width: 730px) {
  .rec__cell .balanceGraphWrapper, .rec__cell .alcGraphWrapper {
    display: none;
  }
}
.rec__cell .listing {
  padding-block: var(--flow-spacing);
  margin: 0;
  /* not sure we want to keep doing this here--is this appropriate semantics? */
}
.rec__cell .listing small {
  display: block;
  margin: 0;
}
.rec__cell .rowOptions {
  display: flex;
  justify-content: right;
  align-items: center;
  /* this is probably not what we want */
}
@media only screen and (max-width: 480px) {
  .rec__cell .rowOptions {
    display: none;
  }
}
.rec__cell .icon {
  float: right;
  margin-right: 0.25em;
  height: 16px;
  width: auto;
  display: inline-block;
}
.rec__cell .icon.shared, .rec__cell .icon.mine {
  font-weight: normal;
  color: white;
  background-color: green;
  font-size: var(--font-size-00);
  padding: 1px 0.5em;
}
.rec__cell .icon.mine {
  background-color: #ddd;
}
.rec__cell .icon.shared.red {
  background-color: red;
}
.rec__cell .badge {
  flex-shrink: 0;
  margin-right: 0.25em;
  display: grid;
  place-items: center;
}
.rec__cell .badge img {
  object-fit: contain;
  width: 30px;
  height: 30px;
}
.rec__cell .servings {
  float: right;
}
.rec__cell .popularity__summary {
  justify-content: start;
  color: var(--deemphasis-color);
  font-size: var(--font-size-0);
  margin-top: 0;
}

.rec__cell.optionsColumn {
  /* mobile sizes we don’t include the balance graph and alc graph */
}
@media only screen and (min-width: 480px) {
  .rec__cell.optionsColumn {
    display: grid;
    grid-template-columns: auto 307px 112px min-content;
    gap: 0 var(--flow-spacing);
  }
}

/* this no--graphs case is currently just for the recent additions list on the home page */
.rec__cell.no--graphs {
  display: grid;
  grid-template-columns: auto;
  gap: 0 var(--flow-spacing);
}
.rec__cell.no--graphs .balanceGraphWrapper, .rec__cell.no--graphs .alcGraphWrapper {
  display: none;
}

.rec__cell__heading {
  display: flex;
  align-items: center;
  gap: var(--flow-spacing);
}

.recipe__link {
  font-stretch: expanded;
  font-weight: 600;
  font-size: var(--font-size-2);
}

.rec__summary {
  display: flex;
  margin-bottom: 0;
  margin-top: 0;
  font-size: var(--font-size-0);
  color: var(--deemphasis-color);
  align-items: center;
  line-height: 1.2;
}
.rec__summary .curator__icon {
  margin-right: var(--flow-spacing);
  height: 28px;
}
[data-theme=dark] .rec__summary img {
  filter: invert(60%);
}

.balanceGraphWrapper {
  background: url("/static/gfx/balanceGraphWrapper-bkgd.png");
  background-size: 100% 100%;
}
@media only screen and (max-width: 480px) {
  .balanceGraphWrapper {
    display: none;
  }
}

.balanceGraph {
  width: 307px;
  flex: none;
}

.alcGraphWrapper {
  background: url("/static/gfx/alcGraphWrapper-bkgd.png");
  background-size: 100% 100%;
}
@media only screen and (max-width: 480px) {
  .alcGraphWrapper {
    display: none;
  }
}

.alcGraph {
  width: 112px;
  flex: none;
}

[data-theme=dark] .balanceGraphWrapper {
  background: url("/static/gfx/balanceGraphWrapper-bkgd-dark.png");
  background-size: 100% 100%;
}
[data-theme=dark] .alcGraphWrapper {
  background: url("/static/gfx/alcGraphWrapper-bkgd-dark.png");
  background-size: 100% 100%;
}

/* this is the "all" option on table views */
.recipeInventoryStateAll {
  display: inline-block;
  background-color: none;
  height: 16px;
  width: 16px;
  text-align: center;
  font-family: var(--primary-font-family);
  font-weight: 700;
  font-size: 15px;
  line-height: 15px;
}

.recipeInventoryStateGreen,
.recipeInventoryStateYellow,
.recipeInventoryStateRed,
.recipeInventoryStateGray {
  display: inline-block;
  background-color: var(--inventoryGreen);
  border-radius: var(--radius-round);
  height: 16px;
  width: 16px;
  text-align: center;
  font-weight: 700;
  font-family: var(--primary-font-family);
  font-size: 15px;
  line-height: 15px;
  color: white;
}

[data-theme=dark] .recipeInventoryStateGreen,
[data-theme=dark] .recipeInventoryStateYellow,
[data-theme=dark] .recipeInventoryStateRed,
[data-theme=dark] .recipeInventoryStateGray {
  color: black;
}

.recipeInventoryStateYellow {
  background-color: var(--inventoryYellow);
}

.recipeInventoryStateRed {
  background-color: var(--inventoryRed);
}

.recipeInventoryStateGray {
  background-color: var(--inventoryGray);
}

.ingredientInventoryStateGreen {
  color: var(--inventoryGreen);
}

.ingredientInventoryStateRed {
  color: var(--inventoryRed);
}

.ingredientInventoryStateGray {
  color: var(--inventoryGray);
}

.alcohol__estimates {
  display: flex;
  gap: var(--flow-spacing);
  justify-content: space-around;
  margin-block: var(--flow-spacing);
}
.alcohol__estimates span {
  text-align: center;
  font-size: var(--font-size-0);
}
.alcohol__estimates strong {
  display: block;
  font-size: var(--font-size-4);
}
@media screen and (max-width: 480px) {
  .alcohol__estimates {
    font-size: var(--font-size-0);
  }
  .alcohol__estimates strong {
    font-size: var(--font-size-3);
  }
}

.socialCard {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: 624px;
  clear: both;
  margin-top: var(--panel-margin-bottom);
}
.socialCard h3 {
  margin-top: 0;
}
.socialCard .socialCardImage {
  display: flex;
  justify-content: center;
}
.socialCard .socialCardImage img {
  object-fit: contain;
  object-position: top center;
  width: 225px;
  height: auto;
  padding-right: var(--flow-spacing);
}
@media only screen and (max-width: 480px) {
  .socialCard .socialCardImage img {
    width: 150px;
  }
}
.socialCard .socialCardInfo p, .socialCard h3 {
  font-size: var(--font-size-05);
}

.thumbnailCorral {
  display: flex;
  gap: var(--flow-spacing);
  flex-wrap: wrap;
  justify-content: space-around;
}
.thumbnailCorral img {
  max-width: 240px;
}

span.private--recipe {
  font-size: var(--font-size-0);
  font-weight: 500;
  border-radius: var(--radius-1);
  padding-inline: 0.25ch;
  background: var(--main-color);
  color: var(--main-background-color);
}

.tme--status--published {
  font-weight: 500;
  border-radius: var(--radius-1);
  padding-inline: 0.25ch;
  padding-block: 0.1ch;
  background: green;
  color: white;
}

.tme--status--draft, .tme--status--unpublished {
  font-weight: 500;
  border-radius: var(--radius-1);
  padding-inline: 0.25ch;
  padding-block: 0.1ch;
  background: gray;
  color: white;
}

.rec__cell__heading .tme--status--published, .rec__cell__heading .tme--status--draft, .rec__cell__heading .tme--status--unpublished {
  font-size: var(--font-size-0);
}

.stories__grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-items: start;
  margin-bottom: var(--section-spacing);
  row-gap: 0.25rlh;
}
.stories__grid .story__title {
  padding: 0.25rlh;
  width: 100%;
  justify-self: stretch;
  align-self: stretch;
}
.stories__grid .story__subtitle {
  font-size: var(--font-size-0);
}
.stories__grid .count {
  display: none;
}
@media (width < 880px) {
  .stories__grid {
    display: block;
  }
  .stories__grid div {
    padding: 0;
  }
  .stories__grid .story__title {
    padding-bottom: 0.5lh;
  }
  .stories__grid .story__navigator {
    height: 1.5lh;
    padding-inline: 0.5lh;
    padding-bottom: 1lh;
  }
  .stories__grid .story__title.feature {
    border: 1px solid var(--label-color);
    border-bottom: none;
  }
  .stories__grid .story__navigator.feature {
    border: 1px solid var(--label-color);
    border-top: none;
    margin-bottom: 0.25lh;
  }
}
@media (width < 550px) {
  .stories__grid .story__navigator {
    display: none;
  }
  .stories__grid .count {
    display: inline;
    margin-left: 0.5ch;
  }
  .stories__grid .story__title.feature {
    border: 1px solid var(--label-color);
    margin-bottom: 0.25lh;
    padding-bottom: 0.25lh;
  }
}

.story__navigator {
  display: flex;
  flex: none;
  align-items: center;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  padding: 0.25rlh;
  white-space: nowrap;
  font-size: var(--font-size-0);
}
.story__navigator a {
  margin: 0;
  padding: 0;
}
.story__navigator a span {
  background-color: var(--link-background);
  color: white;
}
.story__navigator a:hover {
  text-decoration: none;
}
.story__navigator a:hover span {
  background-color: var(--link-background-hover-color);
}
.story__navigator span {
  background-color: var(--hicon-mono-background);
  color: var(--hicon-mono-foreground);
  padding: 0.25em 0.5em;
  border-radius: var(--radius-2);
}

.story__title.feature {
  background-color: var(--curatorial-panel-background-color);
  border: 1px solid var(--label-color);
  border-right: none;
}

.story__navigator.feature {
  border: 1px solid var(--label-color);
  border-left: none;
  background-color: var(--curatorial-panel-background-color);
}

.story__list {
  margin-block: var(--flow-spacing);
}

.story__listing {
  margin-block: var(--flow-spacing);
}

.story__listing .story__navigator {
  margin-top: var(--flow-spacing);
}

.story__flow h1, .story__flow div.subtitle, .story__flow div.attribution {
  text-align: center;
  margin-inline: auto;
}
.story__flow p, .story__flow figure {
  margin-inline: auto;
}
.story__flow:first-of-type {
  padding-top: 2em;
}
.story__flow:last-of-type {
  padding-bottom: 2em;
}

.comparison__container__container {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  margin-inline: auto;
}

.comparison__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 290px [comparison-column]);
  grid-auto-columns: 290px;
  grid-template-rows: auto [recipe-year] auto [recipe-annotation] auto [recipe-title] auto [recipe-body] auto [recipe-citation];
  grid-auto-flow: column;
  /* NOTE: cannot use gap here because of my tricky rules connecting the years */
  padding: 1em;
  margin-inline: auto;
}
.comparison__container .curatorial__annotation {
  margin-top: var(--flow-spacing);
}
.comparison__container .recipe__panel, .comparison__container .rec__cell__heading {
  margin-right: var(--flow-spacing);
}
.comparison__container .rec__cell__heading {
  line-height: 1.2;
}
.comparison__container p {
  font-size: var(--font-size-0);
}
.comparison__container p.attribution, .comparison__container p.recipeType, .comparison__container div.attribution, .comparison__container div.recipeType {
  margin-bottom: var(--flow-spacing);
}
.comparison__container .recTitle {
  margin-bottom: var(--flow-spacing);
  margin-right: var(--flow-spacing);
  place-self: end start;
}
.comparison__container .citation {
  margin-right: var(--flow-spacing);
  font-size: var(--font-size-0);
  line-height: 1.2;
}
.comparison__container .annotation {
  margin-block: var(--flow-spacing);
  margin-right: var(--flow-spacing);
}

.comparison__container::-webkit-scrollbar {
  height: 1ch;
}

.comparison__container::-webkit-scrollbar-track {
  background-color: var(--scrollbar-background);
  border-radius: 100vw;
}

.comparison__container::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-foreground);
  border-radius: 100vw;
}

.comparison__year {
  display: flex;
  align-items: center;
}
.comparison__year .year {
  background-color: var(--hicon-mono-background);
  color: var(--hicon-mono-foreground);
  font-size: var(--font-size-0);
  padding-block: var(--size-1);
  padding-inline: var(--size-2);
  border-radius: var(--radius-2);
}
.comparison__year .rule {
  background-color: var(--hicon-mono-background);
  height: 2px;
  width: 100%;
}

.image__corral {
  display: flex;
}
.image__corral figure {
  display: grid;
  width: 240px;
}

.storyPanel {
  display: grid;
  grid-template-columns: 100%;
  container-type: inline-size;
}
.storyPanel figure {
  max-inline-size: var(--size-content-3);
  margin-block-start: 2em;
}
.storyPanel figure .image__wrapper {
  width: fit-content;
  margin-inline: auto;
  margin-inline: auto;
}
.storyPanel figure img {
  max-width: min(100%, var(--size-content-3));
  max-height: 400px;
  width: auto;
  height: auto;
}
.storyPanel figure div.attribution {
  text-align: right;
}
.storyPanel figcaption {
  margin-block-start: 0.5em;
  margin-block-end: 1em;
  font-style: italic;
  line-height: 1.2;
}

:where([data-theme=light], .light, .light-theme) {
  --link:var(--indigo-7);
  --link-visited:var(--purple-7);
  --text-1:var(--gray-12);
  --text-2:var(--gray-7);
  --surface-1:var(--gray-0);
  --surface-2:var(--gray-2);
  --surface-3:var(--gray-3);
  --surface-4:var(--gray-4);
  --scrollthumb-color:var(--gray-7);
  --shadow-color:220 3% 15%;
  --shadow-strength:1%;
  --inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);
  color-scheme: light;
}

@media (dynamic-range: high) or (color-gamut: p3) {
  @supports (color: color(display-p3 0 0 0)) {
    :where([data-theme=light], .light, .light-theme) {
      --link:color(display-p3 .1 .4 1);
      --link-visited:color(display-p3 .6 .2 1);
    }
  }
}
:where([data-theme=light], .light, .light-theme) :where(dialog) {
  background-color: var(--surface-1);
}

:where([data-theme=light], .light, .light-theme) :where(button, .btn) {
  --_highlight:var(--_highlight-light);
  --_bg:var(--_bg-light);
  --_ink-shadow:var(--_ink-shadow-light);
}

:where([data-theme=light], .light, .light-theme) :where(button, .btn):where([type=reset]) {
  --_text:var(--red-6);
  --_border:var(--red-3);
}

:where([data-theme=light], .light, .light-theme) :where(button, .btn, input:is([type=button], [type=submit], [type=reset]))[disabled] {
  --_text:var(--gray-6);
}

:where([data-theme=light], .light, .light-theme) :where(textarea, select, input:not([type=button], [type=submit], [type=reset])) {
  background-color: var(--surface-2);
}

:where([data-theme=dark], .dark, .dark-theme) {
  --link:var(--indigo-3);
  --link-visited:var(--purple-3);
  --text-1:var(--gray-0);
  --text-2:var(--gray-4);
  --surface-1:var(--gray-9);
  --surface-2:var(--gray-8);
  --surface-3:var(--gray-7);
  --surface-4:var(--gray-6);
  --scrollthumb-color:var(--gray-6);
  --shadow-strength:10%;
  --shadow-color:220 40% 2%;
  --inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467);
  color-scheme: dark;
}

:where([data-theme=dark], .dark, .dark-theme) :where(dialog) {
  background-color: var(--surface-2);
}

:where([data-theme=dark], .dark, .dark-theme) :where(button, .btn) {
  --_highlight:var(--_highlight-dark);
  --_bg:var(--_bg-dark);
  --_ink-shadow:var(--_ink-shadow-dark);
}

:where([data-theme=dark], .dark, .dark-theme) :where(button, .btn):where([type=reset]) {
  --_text:var(--red-2);
  --_border:var(--surface-3);
}

:where([data-theme=dark], .dark, .dark-theme) :where(button, .btn, input:is([type=button], [type=submit], [type=reset]))[disabled] {
  --_text:var(--gray-5);
}

:where([data-theme=dark], .dark, .dark-theme) :where(textarea, select, input:not([type=button], [type=submit], [type=reset])) {
  background-color: #171a1c;
}

:where([data-theme=dark], .dark, .dark-theme) :where([disabled]), :where([data-theme=dark], .dark, .dark-theme) :where([type=reset]), :where([data-theme=dark], .dark, .dark-theme) :where([type=submit]), :where([data-theme=dark], .dark, .dark-theme) :where(form button:not([type=button])) {
  --_bg:var(--surface-1);
}

.sampleAggregate {
  border-top: 1px solid #ddd;
}