:root {
  --paper: #f8f6ef;
  --white: #fffef9;
  --ink: #183e30;
  --forest: #294b3a;
  --muted: #5a6157;
  --line: #dddcd0;
  --line-strong: #b9beaf;
  --soft: #efeee4;
  --clay: #a54d32;
  --sage: #e3e8d8;
  --warning: #f6ecdc;
  --warning-line: #ded3bd;
  --hover: #f1f2e8;
  --hover-line: #9da98f;
  --fill: #183e30;
  --fill-hover: #2c5142;
  --on-fill: #f8f6ef;
  --band: #183e30;
  --on-band: #f8f6ef;
  --on-band-muted: #c9d3c6;
  --on-band-accent: #f0c6a8;
  --risk: #8a4a1f;
  --danger: #8f2f16;
  --star: #c08a1e;
  --map-sea: #dde5dd;
  --map-land: #f3f0e6;
  --surface-glass: rgb(255 254 249 / 95%);
  --backdrop: #15271dcc;
  --shadow-rgb: 24 62 48;
  /* Illustrations sit on paper; multiply drops their white into it. */
  --art-blend: multiply;
  color-scheme: light;
  --header-h: 69px;
  /* The header search opening and the menu groups shrinking share one curve. */
  --header-motion: 0.42s cubic-bezier(0.22, 0.8, 0.24, 1);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
/* Dark theme: follows the system unless the reader picked a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131915;
    --white: #1a211c;
    --ink: #e8e5d9;
    --forest: #a8c9a2;
    --muted: #a6ad9e;
    --line: #2c352e;
    --line-strong: #45514a;
    --soft: #212922;
    --clay: #e6a083;
    --sage: #25302a;
    --warning: #352b1f;
    --warning-line: #5a4a33;
    --hover: #1f2721;
    --hover-line: #5b6b5d;
    --fill: #a8c9a2;
    --fill-hover: #bbd7b5;
    --on-fill: #11201a;
    --band: #1e2a23;
    --on-band: #e8e5d9;
    --on-band-muted: #aeb8aa;
    --on-band-accent: #edb497;
    --risk: #e8b07a;
    --danger: #f09a85;
    --star: #e5b85c;
    --map-sea: #17211d;
    --map-land: #2a342d;
    --surface-glass: rgb(26 33 28 / 95%);
    --backdrop: #000000b3;
    --shadow-rgb: 0 0 0;
    /* On a dark page multiply would turn an illustration's paper into a black box. */
    --art-blend: normal;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131915;
  --white: #1a211c;
  --ink: #e8e5d9;
  --forest: #a8c9a2;
  --muted: #a6ad9e;
  --line: #2c352e;
  --line-strong: #45514a;
  --soft: #212922;
  --clay: #e6a083;
  --sage: #25302a;
  --warning: #352b1f;
  --warning-line: #5a4a33;
  --hover: #1f2721;
  --hover-line: #5b6b5d;
  --fill: #a8c9a2;
  --fill-hover: #bbd7b5;
  --on-fill: #11201a;
  --band: #1e2a23;
  --on-band: #e8e5d9;
  --on-band-muted: #aeb8aa;
  --on-band-accent: #edb497;
  --risk: #e8b07a;
  --danger: #f09a85;
  --star: #e5b85c;
  --map-sea: #17211d;
  --map-land: #2a342d;
  --surface-glass: rgb(26 33 28 / 95%);
  --backdrop: #000000b3;
  --shadow-rgb: 0 0 0;
  /* On a dark page multiply would turn an illustration's paper into a black box. */
  --art-blend: normal;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  color: var(--ink);
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 4px;
}
h1,
h2,
h3,
.brand,
.wordmark {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.035em;
}
h1 {
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.05;
  margin: 0 0 12px;
}
h2 {
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 20px;
}
h3 {
  font-size: 22px;
  line-height: 1.18;
  margin: 0 0 10px;
}
p {
  line-height: 1.65;
  margin: 0 0 16px;
}
small,
.small {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.muted {
  color: var(--muted);
}

/* ------------------------------------------------------------- site chrome */

.site-header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--paper);
  padding: 12px max(48px, calc((100vw - 1344px) / 2 + 48px));
  display: flex;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.site-header > * {
  max-width: 1440px;
}
.brand {
  font-size: 30px;
  display: flex;
  /* Only the logo and name are the link: on a stacked header the row's empty
     space must not hover or click as the logo. */
  width: fit-content;
  flex: none;
  align-items: center;
  gap: 12px;
  line-height: 1;
  transition: opacity var(--header-motion);
}
.brand img {
  border-radius: 11px;
}
.site-header nav {
  display: flex;
  flex: none;
  margin: 0;
}
.site-header .header-tools {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.nav-link {
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 7px;
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
}
.nav-link.active {
  background: var(--fill);
  color: var(--on-fill);
}
.nav-link svg {
  width: 17px;
  height: 17px;
}

/* The header menu: four groups and a Map link on the brand's row. Each group
   opens a green panel across the full width: the featured recipe on the left,
   the same in every panel, and the group's own layout beside it. */
.menu-bar {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-trigger {
  border: 1px solid transparent;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  white-space: nowrap;
  gap: 0;
  text-decoration: none;
  transition: padding var(--header-motion), border-color var(--header-motion), border-radius var(--header-motion), background-color 0.15s;
}
.menu-trigger svg {
  flex: none;
}
.menu-trigger > svg:first-child {
  margin-right: 8px;
  transition: margin var(--header-motion);
}
/* The label and caret sit in a track that closes to nothing, so the group
   shrinks smoothly to its icon while the header search is open. */
.menu-text {
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns var(--header-motion), opacity var(--header-motion);
}
.menu-text > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.menu-trigger:hover {
  background: var(--soft);
  text-decoration: none;
}
.menu-trigger.active {
  background: var(--sage);
  color: var(--ink);
}
.menu-group.open .menu-trigger {
  background: var(--forest);
  color: var(--paper);
}
.menu-caret {
  width: 12px;
  height: 12px;
  transition: transform 0.15s;
}
.menu-group.open .menu-caret {
  transform: rotate(180deg);
}
.menu-label-short {
  display: none;
}
.menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - var(--header-h) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--band);
  color: var(--on-band);
  border-bottom: 4px solid var(--clay);
  box-shadow: 0 18px 40px rgb(var(--shadow-rgb) / 28%), 0 0 0 100vmax rgb(var(--shadow-rgb) / 14%);
  clip-path: inset(0 0 -100vmax 0);
}
.menu-panel[hidden] {
  display: none;
}
.menu-panel-inner {
  max-width: 1344px;
  margin: auto;
  padding: 30px 48px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.menu-panel-inner.has-feature {
  grid-template-columns: 260px minmax(0, 1fr);
}
.menu-panel-inner.feature-right {
  grid-template-columns: minmax(0, 1fr) 260px;
}
.feature-right .menu-feature {
  order: 2;
}
.menu-body {
  display: grid;
  gap: 28px 40px;
  align-content: start;
}
.menu-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-body h2 {
  font-size: 22px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(255 254 249 / 22%);
}
.menu-body h2 a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.menu-column h3 {
  margin: 0 0 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-band-accent);
}
.menu-column li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.35;
}
.menu-panel a:hover {
  background: rgb(255 254 249 / 10%);
  text-decoration: none;
}
.menu-body h2 a:hover,
.menu-column h3 a:hover {
  background: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.menu-panel a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 1px;
}
.menu-count {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  opacity: 0.62;
  flex: none;
}
.menu-more a {
  font-weight: 700;
}
.menu-eyebrow {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-band-accent);
}
.menu-summary {
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-band-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-picture-empty {
  display: block;
  background: rgb(255 254 249 / 8%);
}
/* A short row of other ways in, under a section. */
.menu-panel .menu-ways {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
}
.menu-ways a {
  display: inline-block;
  padding: 4px 0;
  border-radius: 4px;
}
.menu-panel .menu-ways a:hover {
  background: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Recipes: a picture for each food, then every preparation style. */
.menu-layout-recipes .menu-body {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
.menu-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.menu-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgb(255 254 249 / 8%);
}
.menu-tile img,
.menu-tile .menu-picture-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.menu-tile:hover img {
  transform: scale(1.06);
}
.menu-tile-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 28px 9px 8px;
  background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 72%));
  color: #fffef9;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.menu-tile-text .menu-count {
  opacity: 0.85;
  font-weight: 400;
}
.menu-style-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}
.menu-styles .menu-column li a {
  padding-block: 5px;
}

/* Articles: a large story and the next five beside it. */
.menu-layout-articles .menu-body {
  grid-template-columns: minmax(0, 2.8fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}
.menu-front {
  grid-row: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.menu-panel .menu-lead {
  display: grid;
  gap: 8px;
  border-radius: 10px;
}
.menu-panel .menu-lead:hover,
.menu-panel .menu-door:hover,
.menu-panel .menu-stories a:hover {
  background: none;
}
.menu-lead img,
.menu-lead .menu-picture-empty {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 6px;
}
.menu-lead strong,
.menu-door strong {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.menu-lead:hover strong,
.menu-door:hover strong,
.menu-stories a:hover > span {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.menu-stories {
  display: grid;
  gap: 14px;
}
.menu-stories a {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  font-size: 14px;
  line-height: 1.3;
}
.menu-stories img,
.menu-stories .menu-picture-empty {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}
.menu-stories .menu-eyebrow {
  margin-bottom: 4px;
}
.menu-panel .menu-about {
  margin-top: 0;
  align-self: end;
  font-weight: 400;
}

/* Ingredients and equipment: the two lists side by side. */
.menu-layout-kitchen .menu-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
}

/* Make: three picture doors. */
.menu-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.menu-door {
  display: grid;
  gap: 12px;
  align-content: start;
  border-radius: 10px;
}
.menu-door img,
.menu-door .menu-picture-empty {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: rgb(255 254 249 / 8%);
}
.menu-door-text {
  display: grid;
  gap: 6px;
}
.menu-door strong {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* The panel's card: one style in every panel, on its left or its right. */
.menu-feature a {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  overflow: hidden;
}
.menu-panel .menu-feature a:hover {
  background: var(--white);
}
.menu-feature img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--soft);
}
.menu-feature-text {
  display: grid;
  gap: 6px;
  padding: 14px 16px 18px;
}
.menu-feature-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay);
}
.menu-feature strong {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.menu-feature-place {
  font-size: 12px;
  color: var(--muted);
}
.menu-feature-summary {
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* When the row is too narrow for the groups, site-menu.js measures it and
   gives up room in steps: the long label for the short one, then the icons,
   then the labels. It measures, rather than reading the width, so a longer
   label in another language steps down sooner. The search, opening, still
   shrinks the groups to their icons. */
.menu-fit-short .menu-label-long,
.menu-fit-text .menu-label-long,
.menu-fit-icons .menu-label-long {
  display: none;
}
.menu-fit-short .menu-label-short,
.menu-fit-text .menu-label-short,
.menu-fit-icons .menu-label-short {
  display: inline;
}
.site-header:not(.search-open) .menu-fit-text .menu-trigger > svg:first-child {
  display: none;
}
.menu-fit-icons .menu-trigger {
  padding-inline: 12.5px;
  border-color: var(--line-strong);
  border-radius: 22px;
}
.menu-fit-icons .menu-trigger > svg:first-child {
  margin-right: 0;
}
.menu-fit-icons .menu-text {
  grid-template-columns: 0fr;
  opacity: 0;
}
/* Measuring a step reads its final size, not a frame of the animation. */
.menu-measuring .menu-trigger,
.menu-measuring .menu-trigger * {
  transition: none !important;
}
@media (max-width: 1240px) {
  .menu-panel-inner {
    padding: 26px 28px 30px;
    gap: 28px;
  }
  .menu-panel-inner.has-feature {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .menu-panel-inner.feature-right {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  .menu-body {
    gap: 24px 28px;
  }
  .menu-front {
    grid-template-columns: minmax(0, 1fr);
  }
  .menu-stories {
    display: none;
  }
}
@media (max-width: 1000px) {
  .menu-layout-recipes .menu-body,
  .menu-layout-articles .menu-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .menu-front {
    grid-row: auto;
  }
  .menu-panel .menu-lead {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    align-content: start;
    column-gap: 18px;
  }
  .menu-lead img,
  .menu-lead .menu-picture-empty {
    grid-row: span 3;
    margin: 0;
  }
}
@media (max-width: 767px) {
  .site-header .mobile-navigation {
    margin-top: 8px;
  }
}
@media (max-width: 760px) {
  /* On a phone the four groups share the row under the brand, each an icon
     over its short name; a panel opens under them and scrolls on its own. */
  .menu-bar {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .menu-trigger {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    font-size: 12px;
  }
  .menu-trigger > svg:first-child {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
  }
  .menu-text > span {
    gap: 0;
  }
  .menu-caret {
    display: none;
  }
  /* The phone row starts from the short labels. */
  .menu-label-long {
    display: none;
  }
  .menu-label-short {
    display: inline;
  }
  .menu-fit-icons .menu-text {
    display: none;
  }
  .menu-panel {
    max-height: calc(100dvh - 110px);
  }
  .menu-panel-inner,
  .menu-panel-inner.has-feature,
  .menu-panel-inner.feature-right {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px 24px;
    gap: 22px;
  }
  /* The group's own links come first on a phone; the card follows them. */
  .menu-feature {
    order: 2;
  }
  .menu-panel .menu-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .menu-body h2 {
    font-size: 19px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .menu-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .menu-tile-text {
    padding: 22px 7px 6px;
    font-size: 12px;
  }
  .menu-tile-text .menu-count {
    display: none;
  }
  .menu-style-lists {
    gap: 0 20px;
  }
  .menu-column ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
  .menu-style-lists .menu-column ul {
    grid-template-columns: minmax(0, 1fr);
  }
  .menu-column li a {
    min-height: 40px;
    align-items: center;
  }
  .menu-panel .menu-lead {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .menu-lead strong,
  .menu-door strong {
    font-size: 18px;
  }
  .menu-doors {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .menu-door {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }
  .menu-feature a {
    flex-direction: row;
  }
  .menu-feature img {
    width: 112px;
    flex: none;
    aspect-ratio: 1;
  }
  .menu-feature-text {
    padding: 12px 14px;
    align-content: center;
  }
  .menu-feature strong {
    font-size: 18px;
  }
  .menu-feature-summary {
    -webkit-line-clamp: 2;
  }
}
main {
  max-width: 1344px;
  margin: auto;
  padding: 36px 48px 80px;
  min-height: 70vh;
}
main:focus {
  outline: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 20;
  background: var(--fill);
  color: var(--on-fill);
  padding: 14px;
}
.skip:focus {
  top: 8px;
}

.brand-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brand-line {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--muted);
}

/* -------------------------------------------------------------- home page */

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
  padding: 8px 0 56px;
  border-bottom: 1px solid var(--line);
}
.home-hero-copy {
  max-width: 600px;
}
.home-hero h1 {
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.95;
  letter-spacing: 0;
  margin: 0 0 22px;
}
.home-lede {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.3;
  margin: 0 0 4px;
}
.home-hero-copy > p:not(.home-lede) {
  color: var(--muted);
  font-size: 15px;
  max-width: 56ch;
  margin: 26px 0 0;
}
.home-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.home-hero-art {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  mix-blend-mode: var(--art-blend);
}
.home-entries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 40px 0 8px;
}
.home-entry {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.home-entry-text {
  display: block;
  padding: 22px;
}
.home-entry:hover {
  background: var(--hover);
  border-color: var(--hover-line);
  text-decoration: none;
}
.home-entry h3 {
  margin-bottom: 8px;
  font-size: 22px;
}
.home-entry p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.home-entry-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  background: var(--soft);
}
.home-rail {
  padding-top: 18px;
}
.home-rail .section-heading {
  margin-top: 34px;
}
.home-latest-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, calc((100% - 36px) / 4));
  gap: 12px;
  overflow-x: auto;
  padding: 2px 0 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.home-latest-track > div { min-width: 0; scroll-snap-align: start; }
.home-latest-track .card {
  height: 100%;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 0 18px;
}
.home-latest-track .product-image-slot { display: block; }
.home-latest-track .product-media--card,
.home-latest-track .card-art { width: 100%; height: 170px; flex: none; object-fit: cover; }
.home-latest-track .product-media--card img { width: 100%; height: 170px; object-fit: cover; }
.home-latest-track .card-body { padding: 18px 18px 0; }
@media (max-width: 800px) {
  .home-latest-track { grid-auto-columns: minmax(260px, 42vw); }
}
@media (max-width: 600px) {
  .home-latest-track { grid-auto-columns: minmax(260px, 80vw); }
}
.home-feature-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.home-feature-card.no-art {
  grid-template-columns: minmax(0, 1fr);
}
.home-feature-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--sage);
}
.home-feature-art img {
  width: 100%;
  max-width: 440px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: var(--art-blend);
}
.home-feature-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 36px 40px 34px;
}
.home-feature-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--clay);
}
.home-feature-kicker .risk {
  color: var(--risk);
}
.home-feature-body h3 {
  margin: -6px 0 0;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.home-feature-names {
  margin: -10px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.home-feature-lede {
  margin: 0;
  max-width: 62ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.5;
}
.home-feature-level {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 14px 16px;
  background: var(--soft);
  border-radius: 8px;
  font-size: 14px;
}
.home-feature-level .level-meter {
  width: 52px;
  height: 21px;
}
.home-feature-level .level-row {
  gap: 10px;
}
.home-feature-level strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: normal;
}
.home-feature-level p {
  flex: 1 1 280px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.home-feature-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px 28px;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.home-feature-facts div {
  min-width: 0;
}
.home-feature-facts dt {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.home-feature-facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.home-feature-block h4 {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}
.home-feature-block p,
.home-feature-block li {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
.home-feature-block ol {
  margin: 0;
  padding-left: 20px;
}
.home-feature-block li + li {
  margin-top: 6px;
}
.home-feature-block .small {
  margin-top: 6px;
  color: var(--muted);
}
.home-feature-body .detail-actions {
  margin-top: 4px;
}
.home-start-level {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.home-tiles,
.home-places {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.home-tiles {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.home-tiles a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  height: 100%;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.home-tiles a:hover,
.home-places a:hover {
  background: var(--hover);
  border-color: var(--hover-line);
  text-decoration: none;
}
.home-tiles img {
  width: 100%;
  height: 72px;
  object-fit: contain;
  mix-blend-mode: var(--art-blend);
}
.home-tile-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.2;
}
.home-places {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-places a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 14px;
}
.home-places .small {
  margin-left: auto;
  white-space: nowrap;
}
/* Filter sections. Each shape suits its content: definitions get a bar, the long
   list of food families is a ruled index, the short ones sit side by side. */
.home-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.home-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.home-list a:hover {
  text-decoration: none;
}
.home-list a:hover .home-entry-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.home-entry-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.25;
  min-width: 0;
}
.home-count {
  flex: none;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.home-cards .home-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-cards .home-list a {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.home-cards .home-list a:hover {
  background: var(--hover);
  border-color: var(--hover-line);
}
.home-style-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.home-cards .home-entry-name {
  font-size: 24px;
}
.home-cards .home-count {
  font-size: 15px;
  color: var(--ink);
}
.home-style-note {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.home-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}
.home-pair .home-list {
  gap: 0;
}
.home-pair .home-list a {
  align-items: center;
  min-height: 52px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.home-pair .home-count {
  font-size: 15px;
  color: var(--ink);
}
.home-pair:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------------ pieces */

.intro {
  margin-bottom: 20px;
  max-width: 760px;
}
.intro p {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: var(--muted);
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: var(--clay);
}
.browse-link {
  margin-left: 4px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 13px 20px;
  background: var(--fill);
  border: 1px solid var(--ink);
  border-radius: 6px;
  color: var(--on-fill);
  font-size: 13px;
  min-height: 44px;
  text-decoration: none;
}
.button:hover {
  background: var(--fill-hover);
  text-decoration: none;
}
.button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.search {
  position: relative;
  flex: 1;
  min-width: 100%;
}
.search svg {
  position: absolute;
  width: 18px;
  height: 18px;
  left: 15px;
  top: 15px;
  color: var(--muted);
}
input,
select,
textarea {
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink);
  border-radius: 6px;
  padding: 13px 14px;
  max-width: 100%;
}
.search input {
  padding-left: 44px;
  width: 100%;
  height: 48px;
}

/* ------------------------------------------------------------------- chips */

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: transparent;
  padding: 9px 16px;
  font-size: 13px;
  min-height: 44px;
}
.chip[disabled] {
  color: var(--muted);
  background: var(--hover);
  cursor: not-allowed;
}
.chip.active {
  background: var(--fill);
  border-color: var(--fill);
  color: var(--on-fill);
}
.chip-count {
  font-size: 11px;
  color: var(--muted);
}
.chip.active .chip-count {
  color: var(--on-band-muted);
}
.category-chips {
  margin-top: 4px;
}
.group-chips,
.family-chips {
  border-left: 2px solid var(--line);
  padding-left: 12px;
  margin-left: 2px;
}
.family-chips .chip {
  font-size: 12px;
  padding: 8px 13px;
}

/* ----------------------------------------------------------- more filters */

.more-filters {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  margin: 14px 0;
  background: var(--white);
}
.more-filters-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 13px 18px;
  font-size: 13px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.more-filters-toggle:after {
  content: "▾";
  color: var(--muted);
}
.more-filters.open .more-filters-toggle:after {
  content: "▴";
}
.more-filters-body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--line);
}
.more-filters-body[hidden] {
  display: none;
}
.more-filters .filter-field {
  border: 0;
  padding: 16px 0 0;
  margin: 0;
}
.more-filters legend {
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  margin-bottom: 10px;
}
.more-filters .clear-all {
  margin-top: 18px;
}

/* ------------------------------------------------------- difficulty rows */

.difficulty-grid {
  display: grid;
  gap: 6px;
  max-width: 460px;
}
.difficulty-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  text-align: left;
  min-height: 46px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
}
.difficulty-row:hover:not([disabled]):not(.active) {
  background: var(--hover);
}
.difficulty-row.active {
  background: var(--fill);
  border-color: var(--fill);
  color: var(--on-fill);
}
.difficulty-row.active .level-meter .on {
  fill: var(--paper);
}
.difficulty-row.active .level-meter .off {
  stroke: var(--on-band-muted);
}
.difficulty-row[disabled] {
  color: var(--muted);
  background: var(--hover);
  cursor: not-allowed;
}
.difficulty-count {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.difficulty-row.active .difficulty-count {
  color: var(--on-band-muted);
}

.more-filters .shop-location-picker {
  margin: 0;
}
.difficulty-chips .chip-text {
  font-size: 12px;
}
.filter-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0;
  font-size: 13px;
}
.filter-summary > span {
  color: var(--muted);
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: 22px;
  background: var(--sage);
  font-size: 13px;
}

/* ------------------------------------------------------------------- cards */

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin: 26px 0 16px;
}
.section-heading h2 {
  font-size: 23px;
  margin: 0;
}
.section-heading span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.cards > div {
  min-width: 0;
}
.card {
  display: flex;
  gap: 16px;
  align-items: center;
  position: relative;
  padding: 17px 60px 17px 17px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 9px;
  min-height: 132px;
  min-width: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.card:hover {
  background: var(--hover);
  border-color: var(--hover-line);
}
.card-art {
  width: 92px;
  height: 100px;
  object-fit: contain;
  mix-blend-mode: var(--art-blend);
  flex-shrink: 0;
}
.card-body {
  min-width: 0;
}
.card h3 {
  font-size: 20px;
  line-height: 1.2;
  margin: 5px 0 8px;
  overflow-wrap: anywhere;
}
/* The card is one link, but the right strip is left to the save button. */
.card h3 a:after {
  content: "";
  position: absolute;
  inset: 0 56px 0 0;
}
.card .meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9;
}
.badge {
  font-size: 9px;
  color: var(--clay);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-right: 10px;
}
.badge.risk {
  color: var(--risk);
}
/* Only reviewers see this: the public catalogue has no unpublished items. */
.draft-badge {
  display: inline-block;
  border: 1px solid var(--clay);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.09em;
  vertical-align: middle;
}
h1 > .draft-badge,
h2 > .draft-badge,
h3 > .draft-badge {
  margin: 0 0 0 12px;
  font-size: 11px;
  position: relative;
  top: -0.2em;
}
.save {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 1;
  border: 0;
  background: transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}
.save svg {
  width: 19px;
  height: 19px;
}
.save[aria-pressed="true"] svg {
  fill: var(--ink);
}
.show-more {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 22px 0;
}
.match-context {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  padding: 0 8px;
  overflow-wrap: anywhere;
}
.article-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.article-card {
  display: block;
  min-height: 260px;
  padding: 24px 60px 24px 24px;
}
.article-card .card-art {
  width: 100%;
  height: 124px;
}
.article-card p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 0;
}

/* --------------------------------------------------- difficulty level meter */

/* Five bars rising left to right, filled to the level. A meter reads as "how
   much work", which is what difficulty is. Stars are a community rating only. */
.level-meter {
  width: 35px;
  height: 14px;
  flex: none;
  vertical-align: -2px;
}
.level-meter .on {
  fill: var(--forest);
  stroke: none;
}
.level-meter .off {
  fill: none;
  stroke: var(--forest);
  stroke-width: 1;
  opacity: 0.5;
}
/* The tier word and its meter stay on one line and never break apart. */
.level-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* ----------------------------------------------------------- reader counts */

.rating-star {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 5px;
}
.rating-star .on {
  fill: var(--forest);
  stroke: none;
}
.rating-star .off {
  fill: none;
  stroke: var(--forest);
  stroke-width: 1.3;
  opacity: 0.55;
}
/* Quiet by design: three counts, not a verdict. The average is the one part
   drawn in full ink, because it is the only number with a value in it. */
.side-note .community-counts {
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 10px;
}
.community-counts strong {
  font-size: 15px;
  color: var(--ink);
  margin-right: 2px;
}
.counts-note .small {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ detail */

/* Hero picture on the left with the source references beneath it, the
   record's text beside it. A part with nothing in it leaves the grid, so
   there is never an empty frame. */
.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "hero copy";
  gap: 44px;
  align-items: center;
  margin: 10px 0 28px;
}
.detail-head:not(:has(.detail-hero img)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy";
}
.detail-head:not(:has(.detail-hero img)) .detail-hero {
  display: none;
}
.detail-hero {
  grid-area: hero;
  min-width: 0;
}
.detail-copy {
  grid-area: copy;
  min-width: 0;
}
.detail-hero img.detail-art,
.detail-hero .product-media img {
  height: auto;
  max-height: 400px;
  width: 100%;
  object-fit: contain;
}
.detail-hero .product-media--article {
  max-width: none;
  margin: 0;
}
.detail-head h1 {
  font-size: clamp(34px, 4vw, 52px);
}
.detail-copy > p {
  font-size: 15px;
  color: var(--muted);
  max-width: 62ch;
}
.variant-label {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px;
}
.original-name {
  font-family: Georgia, serif;
  font-size: 19px;
  color: var(--muted);
  margin: -4px 0 12px;
}
/* Related records: a grid of cards on a wide screen, a sideways row on a phone. */
.related-group + .related-group {
  margin-top: 8px;
}
.related-group h3 {
  margin: 18px 0 12px;
}
.related-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.related-cards > li {
  min-width: 0;
}
.related-card {
  height: 100%;
  padding-right: 17px;
}
.related-card h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 6px;
}
.related-card .card-art {
  width: 84px;
  height: 84px;
}
.related-card h4 a::after { content: ""; position: absolute; inset: 0; border-radius: 9px; }
.related-card:focus-within { outline: 3px solid var(--clay); outline-offset: 3px; }

/* References and housekeeping at the foot of a record, in smaller type. */
.record-foot {
  max-width: 900px;
  border-bottom: 0;
}
.record-foot + .record-foot {
  padding-top: 0;
}
.article-section.record-foot h2 {
  font-size: 22px;
  margin-bottom: 6px;
}
.record-foot .source {
  padding: 12px 0;
}
.record-foot .source-title {
  font-size: 14px;
}
.article-section.record-foot .source-fact {
  font-size: 12px;
}
.article-section.record-foot li {
  font-size: 13px;
  line-height: 1.6;
}
.article-section .research-status {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 14px 0 0;
}
.article-section .research-status + .research-status {
  margin-top: 2px;
}
.detail-art {
  height: 290px;
  width: 100%;
  object-fit: contain;
  mix-blend-mode: var(--art-blend);
}
.detail-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.detail-actions .save {
  position: static;
  border: 1px solid var(--line-strong);
}
.share-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.share-links > span { color: var(--muted); margin-right: 4px; }
.share-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); text-decoration: none; }
.share-links a:hover, .share-links a:focus-visible { background: var(--soft); }
.share-links svg { width: 17px; height: 17px; flex: none; }
.magazine-head .share-links { justify-content: center; }
@media (max-width: 700px) { .magazine-head .share-links { justify-content: flex-start; } }
.comments-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: 6px; }
.comments-link svg { width: 19px; height: 19px; }
.comments-link:hover { background: var(--soft); }
.magazine-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.project-share { margin: 12px 0; }
.share-control { position: relative; display: inline-flex; flex-shrink: 0; }
.share-trigger { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 1px solid #b9beaf; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.share-trigger svg { width: 19px; height: 19px; }
.share-trigger:hover, .share-trigger[aria-expanded="true"] { background: var(--soft); }
.share-trigger:focus-visible, .share-popover :focus-visible { outline: 3px solid #ddae67; outline-offset: 2px; }
.share-popover { position: absolute; z-index: 100; top: calc(100% + 11px); left: 0; box-sizing: border-box; width: min(360px, calc(100vw - 32px)); padding: 20px; border-radius: 14px; background: #171c1b; color: #fff; box-shadow: 0 16px 40px #0005; }
.share-popover::before { content: ""; position: absolute; top: -6px; left: var(--share-arrow-left, 24px); width: 12px; height: 12px; transform: rotate(45deg); background: #171c1b; }
.share-popover--detached::before { display: none; }
.share-heading { margin-bottom: 17px; font-weight: 700; font-size: 16px; }
.share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 7px; }
.share-grid--regional { margin-top: 18px; padding-top: 18px; border-top: 1px solid #ffffff30; }
.share-grid[hidden] { display: none; }
.share-service, .share-wechat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; min-width: 0; padding: 0; border: 0; background: transparent; color: #f5f6f3; font: inherit; font-size: 11px; text-align: center; text-decoration: none; cursor: pointer; }
.share-service:hover, .share-wechat:hover { color: #fff; text-decoration: underline; }
.share-brand, .share-wechat img { display: grid; place-items: center; width: 42px; height: 42px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: #fff; }
.share-brand img { width: 100%; height: 100%; }
.share-brand--linkedin { background: #0a66c2; color: white; font: 800 23px Arial, sans-serif; letter-spacing: -2px; padding: 0 3px 3px 0; }
.share-wechat { grid-column: span 2; flex-direction: row; justify-content: center; text-align: left; font-size: 12px; }
.share-wechat img { flex-shrink: 0; }
.share-more { margin-top: 17px; padding: 0; border: 0; background: none; color: #b9d9c0; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.share-actions { display: flex; gap: 9px; margin-top: 17px; }
.share-option { display: inline-flex; align-items: center; min-height: 39px; padding: 7px 12px; border: 1px solid #f5f6f366; border-radius: 6px; background: #ffffff16; color: #fff; font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.share-option:hover { background: #ffffff2a; }
.share-status { min-height: 1em; margin: 9px 0 0; color: #c4e4ca; font-size: 12px; }
/* The source-linked picture column. Each thumbnail leaves the site, so the
   line under it carries the site's icon, its name and the outward arrow. */
.detail-gallery {
  grid-area: gallery;
  min-width: 0;
}
.detail-gallery h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0 0 10px;
}
.detail-gallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.detail-gallery li {
  min-width: 0;
}
.detail-gallery a {
  display: block;
  min-width: 0;
}
.detail-gallery a:hover {
  text-decoration: none;
}
.gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--soft);
}
.detail-gallery a:hover .gallery-thumb {
  border-color: var(--ink);
}
.gallery-site {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 12px;
  min-width: 0;
}
.gallery-site-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
.detail-gallery a:hover .gallery-site-name {
  text-decoration-color: currentColor;
}
.gallery-out {
  flex: none;
  color: var(--clay);
}

/* Source references sit beneath the hero and open an attributed preview. */
.detail-media { grid-area: hero; min-width: 0; }
.recipe-detail-head { align-items: start; }
.recipe-detail-head:not(:has(.detail-hero img)):has(.reference-strip) { grid-template-areas: "copy" "hero"; }
.reference-strip { margin-top: 12px; }
.reference-strip ul { display: flex; gap: 10px; overflow-x: auto; padding: 3px 3px 8px; scroll-snap-type: x proximity; }
.reference-strip li { flex: 0 0 64px; scroll-snap-align: start; }
.reference-thumbnail { display: block; width: 64px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.reference-thumbnail .gallery-thumb { width: 64px; height: 52px; object-fit: cover; }
.reference-thumbnail:hover .gallery-thumb { border-color: var(--ink); }
.reference-thumbnail:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.reference-dialog, .comment-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 20px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); overflow: auto; }
.reference-dialog::backdrop, .comment-dialog::backdrop { background: var(--backdrop); }
.reference-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.reference-dialog-heading h2 { font-size: 24px; margin: 0; overflow-wrap: anywhere; }
.reference-dialog-heading button { flex: none; }
.reference-preview { display: block; width: 100%; max-height: 65dvh; object-fit: contain; }
.reference-dialog p { margin-bottom: 0; font-size: 14px; overflow-wrap: anywhere; }
html:has(.reference-dialog[open], .comment-dialog[open]) { overflow: hidden; }
.community-section .form-actions svg { width: 19px; height: 19px; flex-shrink: 0; }
.push-mute-status:not(:empty) { display: block; margin-top: 4px; }
.comment-dialog .community { border: 0; padding: 0; }

/* A site's favicon, or its first letter when the icon does not load. */
.site-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
}
.site-mark img {
  display: block;
  width: 16px;
  height: 16px;
}
.site-mark--letter {
  background: var(--forest);
  color: var(--paper);
  font: 700 10px/1 Arial, Helvetica, sans-serif;
}

/* The record's sections, pinned under the header while reading. */
.section-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  background: var(--paper);
}
.section-strip {
  margin: 0;
  border-top: 1px solid var(--line);
}
.section-strip .tab {
  color: var(--muted);
  font-size: 13px;
  min-height: 46px;
}
.section-strip .tab:hover {
  text-decoration: none;
  color: var(--ink);
}
.section-strip .tab.active {
  color: var(--ink);
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
}
.article-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 60px);
}
.article-section h2 {
  font-size: 29px;
}
.article-section h3 {
  margin-top: 26px;
}
.article-section p,
.article-section li {
  font-size: 14px;
  line-height: 1.75;
}
.recipe-editorial p {
  max-width: 74ch;
  margin-top: 1em;
  font-size: 16px;
  line-height: 1.7;
}
.section-sources {
  margin-top: 18px;
  font-size: 13px;
}
.section-sources summary {
  cursor: pointer;
}
.notice {
  border: 1px solid var(--warning-line);
  border-left: 3px solid var(--clay);
  padding: 17px 20px;
  background: var(--warning);
  border-radius: 5px;
  margin: 18px 0;
  font-size: 13px;
  line-height: 1.6;
}
.notice strong {
  display: block;
  margin-bottom: 6px;
}
.notice.hazards {
  margin: 18px 0;
}
details.hazards > summary { cursor: pointer; font-weight: 700; }
details.hazards[open] > summary { margin-bottom: 16px; }
.ingredient-row {
  display: grid;
  grid-template-columns: 1fr minmax(96px, 28%);
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.ingredient-name small {
  display: block;
  margin-top: 5px;
}
.ingredient-row .quantity {
  text-align: right;
  font-size: 13px;
}
.ingredient-row .quantity small {
  display: block;
  margin-top: 3px;
}
/* A line's note sits under its amount; on a phone it takes the row's full width. */
.ingredient-row.has-note {
  grid-template-areas: "name amount" "name note";
  grid-template-rows: auto 1fr;
  row-gap: 3px;
}
.ingredient-row.has-note .ingredient-name {
  grid-area: name;
}
.ingredient-row.has-note .quantity {
  grid-area: amount;
}
.ingredient-row .amount-note {
  grid-area: note;
  align-self: start;
  text-align: right;
  overflow-wrap: anywhere;
}
/* A no-quantity line's long wording sits under the name instead. */
.ingredient-row.wording-note {
  grid-template-areas: "name amount" "note amount";
  grid-template-rows: auto 1fr;
}
.ingredient-row.wording-note .amount-note {
  text-align: left;
}
@media (max-width: 760px) {
  .ingredient-row.has-note {
    grid-template-areas: "name amount" "note note";
    grid-template-rows: auto auto;
  }
}
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li {
  position: relative;
  padding: 0 0 22px 42px;
}
.steps li:before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
  color: var(--clay);
  font-family: Georgia, serif;
  font-size: 15px;
}
.hazard {
  padding: 12px 0;
  border-bottom: 1px solid var(--warning-line);
}
.hazard:last-of-type {
  border: 0;
}
.hazard p {
  font-size: 13px;
  margin: 5px 0;
}
.hazard a {
  font-size: 12px;
  text-decoration: underline;
}
.data-rows div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.data-rows strong {
  font-weight: 400;
}
/* One source: icon, publisher, the page title as the link, then what this
   record takes from it. */
.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.source {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.source .site-mark {
  margin-top: 1px;
}
.source-body {
  min-width: 0;
}
.source.has-preview { grid-template-columns: 64px 16px minmax(0, 1fr); }
.source-preview { width: 64px; height: 64px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); }
.article-section .source-publisher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  margin: 0 0 4px;
}
.source-roles {
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 6px;
}
.source-title {
  font-size: 15px;
  line-height: 1.45;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.article-section .source-fact {
  font-size: 13px;
  line-height: 1.55;
  margin: 6px 0 0;
}
.article-section .source-meta {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0;
}
.geography-card {
  padding: 16px;
  background: var(--soft);
  border-radius: 5px;
  margin: 14px 0;
}
.geography-card h3 {
  font-size: 20px;
  margin-top: 0;
}
.geography-card p {
  font-size: 13px;
  margin-bottom: 8px;
}
.geography-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
}
.side-note {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
  margin-top: 24px;
}
.side-note p {
  font-size: 12px;
  color: var(--muted);
}
.difficulty-overall {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
}
.difficulty-rows div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.difficulty-rows .peak span {
  font-weight: 700;
}
.related-list {
  margin: 0;
  padding-left: 18px;
}
.related-list li {
  font-size: 13px;
  padding: 7px 0;
}

/* ------------------------------------------------------------------ browse */

.browse-category {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.browse-group {
  margin: 0 0 18px;
}
.browse-group h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.browse-group h3 .small {
  font-family: Arial, sans-serif;
}
.browse-families {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 20px;
}
.browse-families li {
  font-size: 13px;
  padding: 7px 0;
}

/* -------------------------------------------------------------------- map */
.map-tabs {
  grid-area: tabs;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.map-tabs a {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 5px;
  text-decoration: none;
  color: var(--forest);
}
.map-tabs a:hover { background: var(--soft); }
.map-tabs a[aria-current="page"] { background: var(--fill); color: var(--on-fill); }
.map-site-pin {
  fill: #a54d32;
  stroke: #fff;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.12s;
}
.map-site-pin:focus-visible { fill: #183e30; outline: none; stroke-width: 4px; }
.map-site-pin.hover { fill: var(--ink); stroke-width: 3px; transform: scale(1.6); }
.map-google-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #a54d32;
  box-shadow: 0 1px 5px #0005;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.12s;
}
.map-google-pin:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.map-google-pin.hover { z-index: 2; background: var(--ink); transform: translate(-50%, -50%) scale(1.45); }

/* On a wide screen the map is a sticky column beside the list: it stays in
   view, at the height of the window, while the reader scrolls the results.
   Narrower screens stack the tabs, a compact map and the list in the normal
   page flow (see "map layout" below). */

.map-page {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr);
  grid-template-areas: "map tabs" "map panel";
  grid-template-rows: auto 1fr;
  gap: 18px 28px;
  align-items: start;
}
.map-shell {
  grid-area: map;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--soft);
}
.map-stage {
  position: relative;
  height: clamp(420px, calc(100vh - var(--header-h) - 48px), 700px);
  /* The map handles its own touches, so a two-finger pinch zooms the map
     instead of the browser zooming the page. */
  touch-action: none;
}
.map-stage svg,
.map-stage .gm-style {
  touch-action: none;
}
.map-stage:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: -3px;
}
.map-canvas,
.map-google {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-google {
  opacity: 0;
  pointer-events: none;
}
.map-stage.live .map-google {
  opacity: 1;
  pointer-events: auto;
}
.map-stage.live .map-canvas {
  display: none;
}
.map-canvas {
  background: var(--map-sea);
  cursor: pointer;
}
.map-canvas path {
  fill: var(--map-land);
  stroke: var(--line-strong);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.map-canvas path.has-records {
  fill: var(--forest);
  stroke: var(--forest);
  stroke-opacity: 0.5;
}
.map-canvas path.selected {
  fill-opacity: 0.38;
  stroke: var(--clay);
  stroke-width: 2;
  stroke-opacity: 1;
}
/* A region's member with no records of its own still shows as part of it. */
.map-canvas path.plain.selected {
  fill: var(--forest);
  fill-opacity: 0.2;
}
/* What the reader points at in the list, or on the map. */
.map-canvas path.hover {
  fill: var(--clay);
  fill-opacity: 0.45;
  stroke: var(--clay);
  stroke-width: 2;
  stroke-opacity: 1;
}
.map-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.map-control {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-glass);
  font-size: 13px;
  box-shadow: 0 1px 3px #1c261c26;
}
.map-control:hover {
  background: var(--sage);
}
.map-legend {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--surface-glass);
  font-size: 11px;
  pointer-events: none;
  z-index: 2;
}
.map-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
/* Google's logo and terms run along the bottom edge. */
.map-stage.live .map-legend {
  bottom: 36px;
}
.map-legend i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.map-legend-unit {
  color: var(--muted);
}
.map-note {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 88px;
  max-width: 560px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--surface-glass);
  border: 1px solid var(--line);
  font-size: 12px;
  z-index: 2;
  display: none;
}
.map-note.show {
  display: block;
}
.map-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: var(--paper);
}
.map-dialog .map-shell,
.map-shell:fullscreen {
  position: relative;
  top: auto;
  border: 0;
  border-radius: 0;
  height: 100%;
}
.map-dialog .map-stage,
.map-shell:fullscreen .map-stage {
  height: 100%;
}
.map-panel {
  grid-area: panel;
  min-width: 0;
}
#map-picker {
  width: 100%;
  margin: 0 0 18px;
}

/* The lists inside the panel. Countries, regions and cards each light their
   countries on the map; `.map-hover` is the way back, set while the pointer
   rests on a country or pin the row belongs to. */
.place-group {
  margin-top: 22px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.place-group .section-heading {
  margin: 0 0 8px;
}
.place-group .section-heading h2 {
  font-size: 19px;
}
.place-group .section-heading .text-link {
  font-size: 13px;
  min-height: 0;
}
.place-group > .small {
  margin: 0 0 10px;
}
.place-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.place-list--single {
  grid-template-columns: 1fr;
}
.place {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--line);
  padding: 11px 13px;
  background: var(--white);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  gap: 12px;
  min-height: 48px;
  overflow-wrap: anywhere;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.place:hover {
  background: var(--soft);
  text-decoration: none;
}
.place-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.place-count,
.place > span:last-child {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.place.active {
  background: var(--sage);
  border-color: var(--hover-line);
}
.place.active > span:last-child {
  color: var(--ink);
}
.region-list {
  display: grid;
  gap: 8px;
}
.region-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.region-row:hover {
  background: var(--soft);
  text-decoration: none;
}
.region-row.active {
  background: var(--sage);
  border-color: var(--hover-line);
}
.region-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.region-name {
  font-size: 14px;
  font-weight: 700;
}
.region-kind,
.map-place-kind {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.region-members {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 12px;
}
.region-members--none,
.region-more {
  color: var(--muted);
}
.region-member {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.region-members--full {
  gap: 6px;
  margin: 8px 0 14px;
}
.region-members--full .region-member {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12px;
}
.region-members--full .region-member:not(.region-member--link) {
  color: var(--muted);
  background: transparent;
}
.region-member--link {
  min-height: 32px;
  border-color: var(--line-strong);
  color: var(--ink);
  cursor: pointer;
}
.region-member--link:hover {
  background: var(--soft);
}
.region-member--link .chip-count {
  margin-left: 2px;
}
.map-results .map-place-kind {
  margin: 4px 0 0;
}
.map-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}
.map-jump a {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 13px;
}
.map-jump a:hover {
  background: var(--soft);
  text-decoration: none;
}
.map-results [data-map-countries]:hover,
.map-results [data-map-site]:hover,
.map-results .map-hover {
  border-color: var(--clay);
  box-shadow: 0 0 0 1px var(--clay);
}
.map-results .section-heading[data-map-countries]:hover,
.map-results .section-heading.map-hover {
  border-color: transparent;
  box-shadow: none;
}
.map-results .section-heading.map-hover h2 {
  color: var(--clay);
}
.map-results .map-chips-label {
  margin: 14px 0 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.map-results [data-fold] {
  display: none;
}
.map-results .unfolded [data-fold] {
  display: inline-flex;
}
.map-link-button {
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--clay);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.map-results {
  margin-bottom: 4px;
}
.map-results .list-bar {
  margin: 14px 0 16px;
}
.map-results .pager-bar {
  margin-top: 28px;
}
.map-results .cards {
  grid-template-columns: 1fr;
}
.map-results h2 {
  font-size: 26px;
  margin: 10px 0 4px;
}
.map-results h2 .country-flag {
  margin-right: 10px;
}
.map-results p {
  font-size: 13px;
  color: var(--muted);
}
.map-summary h2 {
  margin-top: 0;
}
.map-summary p {
  margin: 0;
}
.map-empty {
  margin: 0;
}
.map-caption {
  font-size: 11px;
  color: var(--muted);
  margin: 24px 2px 0;
}

/* ------------------------------------------------------------------ forms */

.form-layout {
  max-width: 680px;
}
.field {
  display: block;
  margin: 22px 0;
  font-size: 13px;
}
.field input,
.field textarea,
.field select {
  display: block;
  width: 100%;
  margin-top: 10px;
}
.field textarea {
  min-height: 150px;
  resize: vertical;
}
.required {
  color: var(--muted);
}
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--danger);
}
[aria-invalid="true"] {
  border-color: var(--danger);
}
.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.draft-result {
  margin: 20px 0;
  padding: 20px;
  background: var(--sage);
  border-radius: 6px;
  font-size: 13px;
}
.prose {
  max-width: 780px;
}
.prose h2 {
  margin-top: 34px;
  font-size: 28px;
}
.prose p {
  font-size: 15px;
}
.empty {
  border: 1px dashed var(--line-strong);
  padding: 36px;
  text-align: center;
  border-radius: 8px;
  margin: 20px 0;
}
.empty h2 {
  font-size: 28px;
}
.empty p {
  font-size: 14px;
  max-width: 560px;
  margin: 0 auto 20px;
}
.empty svg {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
}
.breadcrumb {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.breadcrumb button {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fill);
  color: var(--on-fill);
  border-radius: 8px;
  padding: 13px 20px;
  box-shadow: 0 4px 25px #183e3020;
  font-size: 13px;
  z-index: 20;
  max-width: 90vw;
  display: none;
}
#toast.show {
  display: block;
}
/* The one loading indicator (apps/web/loading.js): a ring in the site's ink
   on its pale line colour, for a page, a status line, or over a list while
   its next page loads. */
.loading { margin: 0; color: var(--muted); }
.loading-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 220px; padding: 80px 24px; font-size: 14px; text-align: center; }
.loading-inline { display: inline-flex; align-items: center; gap: 8px; padding: 0; vertical-align: middle; text-align: start; }
.loading-spinner { display: inline-block; flex: none; width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: loading-turn 0.8s linear infinite; }
.loading-inline .loading-spinner { width: 1em; height: 1em; border-width: 2px; }
button > .loading-spinner { width: 1em; height: 1em; margin-right: 6px; border-width: 2px; vertical-align: -0.15em; }
.loading-overlay { position: absolute; inset: 0; z-index: 5; display: flex; justify-content: center; align-items: flex-start; padding-top: min(120px, 18vh); pointer-events: none; }
.loading-overlay .loading-spinner { position: sticky; top: calc(var(--header-h) + 48px); width: 40px; height: 40px; background: var(--white); box-shadow: 0 0 0 8px var(--white), 0 4px 18px 8px rgb(var(--shadow-rgb) / 12%); }
.is-loading { position: relative; }
.is-loading > :not(.loading-overlay) { opacity: 0.45; transition: opacity 0.2s; pointer-events: none; }
@keyframes loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading-spinner { animation: none; border-top-color: var(--ink); border-right-color: var(--ink); }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- place combobox */

@font-face {
  font-family: "Fermentea Flags";
  src: url("assets/fonts/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}
.country-flag {
  font-family: "Fermentea Flags", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 21px;
  flex: 0 0 28px;
}
.shop-location-picker {
  position: relative;
  width: min(100%, 600px);
  margin: 20px 0 26px;
}
.shop-location-picker > label,
.inline-picker > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 9px;
}
.place-input {
  display: flex;
  border: 1px solid var(--line-strong);
  background: var(--white);
  border-radius: 8px;
}
.place-input:focus-within {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
.place-input input {
  border: 0;
  background: transparent;
  width: 100%;
  min-width: 0;
  padding: 15px;
  font: inherit;
  color: var(--ink);
  outline: 0;
}
.place-clear {
  border: 0;
  background: transparent;
  color: var(--forest);
  font-size: 24px;
  padding: 8px 16px;
  cursor: pointer;
  min-width: 48px;
}
.place-trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 14px 15px;
  min-height: 48px;
  font-size: 14px;
  text-align: left;
}
.place-trigger-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.place-trigger-arrow {
  color: var(--muted);
}
.place-search {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--white);
}
.place-search input {
  width: 100%;
  padding: 11px 13px;
}
.place-popup {
  position: absolute;
  top: 79px;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 12px 28px #163d2c22;
  max-height: min(360px, 45dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.place-popup[hidden] {
  display: none;
}
.place-option {
  padding: 11px 13px 11px calc(13px + var(--depth) * 13px);
  min-height: 44px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.place-option-name {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
}
.place-option.region {
  color: var(--ink);
  font-weight: 600;
}
.place-option-meta {
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
.place-option[aria-disabled="true"] {
  color: var(--muted);
  background: var(--soft);
  cursor: not-allowed;
}
.place-option[aria-disabled="true"] .country-flag {
  opacity: 0.55;
}
.place-option.active {
  outline: 2px solid var(--forest);
  outline-offset: -2px;
  background: var(--sage);
}
.place-no-match {
  padding: 8px 16px;
}
#shop-place-help,
#region-place-help,
#map-place-help {
  margin-top: 9px;
}

/* --------------------------------------------------------------- tab strip */

/* The primary category selector. One row, scrollable, and the panel under it
   keeps its width whichever tab is active. */
.tab-strip {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 6px 0 14px;
  border-bottom: 1px solid var(--line);
}
.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 12px 16px;
  font-size: 14px;
  min-height: 48px;
  white-space: nowrap;
}
.tab:hover {
  background: var(--soft);
}
.tab.active {
  border-bottom-color: var(--ink);
  font-weight: 700;
}
.tab-count {
  font-size: 11px;
  color: var(--muted);
}
.tab-scroll {
  flex: 0 0 34px;
  border: 0;
  background: var(--paper);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.tab-strip.at-start .tab-scroll[data-tab-scroll="-1"],
.tab-strip.at-end .tab-scroll[data-tab-scroll="1"] {
  visibility: hidden;
}
.tab-strip:not(.at-start):before,
.tab-strip:not(.at-end):after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 28px;
  pointer-events: none;
  z-index: 1;
}
.tab-strip:not(.at-start):before {
  left: 34px;
  background: linear-gradient(to right, var(--paper), transparent);
}
.tab-strip:not(.at-end):after {
  right: 34px;
  background: linear-gradient(to left, var(--paper), transparent);
}
/* Reserve the panel so switching tabs never reflows what is underneath. */
.results-panel {
  min-height: 70vh;
  width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------------- inline pickers */

.inline-picker {
  position: relative;
  width: min(100%, 420px);
  margin: 0;
}
.inline-picker > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 7px;
}
.inline-picker .place-input input {
  padding: 11px 13px;
}
.inline-picker .place-trigger {
  padding: 11px 13px;
  min-height: 44px;
  font-size: 13px;
}
.inline-picker .place-popup {
  top: 68px;
}
.inline-picker .small {
  margin-top: 7px;
}
.inline-picker .option-text {
  margin-left: 8px;
}
.section-heading .inline-picker {
  width: 190px;
  flex: 0 0 190px;
}
.section-heading .inline-picker > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.section-heading .inline-picker .place-popup {
  top: 52px;
  left: auto;
  width: 220px;
}
.section-heading .inline-picker .small:empty {
  display: none;
}
#shop-location-picker {
  width: min(100%, 600px);
  margin: 18px 0 24px;
}

/* ---------------------------------------------------------------- units */

.unit-toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  overflow: hidden;
  flex: 0 0 auto;
}
.unit-toggle button {
  border: 0;
  background: transparent;
  padding: 10px 16px;
  font-size: 13px;
  min-height: 44px;
}
.unit-toggle button.active {
  background: var(--fill);
  color: var(--on-fill);
}
/* ----------------------------------------------------------- load more */



/* Width reserved for the account control, so the header does not jump when it mounts. */
.account-slot {
  margin-left: auto;
  min-width: 96px;
  min-height: 44px;
}
.filter-pickers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  padding-top: 16px;
}
.filter-pickers .inline-picker {
  width: 100%;
}


/* ------------------------------------------------------------ breakpoints */

@media (max-width: 1240px) {
  .brand-line {
    display: none;
  }
}
@media (max-width: 1100px) {
  :root {
    --header-h: 69px;
  }
  .site-header {
    padding: 12px 28px;
  }
  main {
    padding: 28px 28px 70px;
  }
  .detail-grid {
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) 240px;
  }
  .article-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .notice.hazards {
    float: none;
    width: auto;
    margin: 18px 0;
  }
}
@media (max-width: 1100px) {
  .home-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-hero {
    gap: 36px;
  }
  .home-feature-card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  .home-feature-art {
    padding: 20px;
  }
  .home-feature-body {
    padding: 28px;
  }
}
@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 32px;
  }
  .home-hero-art {
    max-width: 640px;
    margin: 0 auto;
    order: -1;
  }
  .home-hero h1 {
    font-size: clamp(56px, 13vw, 96px);
    margin-bottom: 14px;
  }
  .home-entries {
    padding-top: 24px;
    gap: 12px;
  }
  .home-entry-text {
    padding: 16px;
  }
  .home-feature-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-feature-art img {
    max-width: 300px;
  }
  .home-cards .home-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .article-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .detail-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .detail-grid > aside {
    order: -1;
  }
  /* One column: the picture, the text, then the source pictures as a row. */
  .detail-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }
  .detail-hero img.detail-art,
  .detail-hero .product-media img {
    max-height: 280px;
  }
  .detail-gallery ul {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 40%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .detail-gallery li {
    scroll-snap-align: start;
    min-width: 0;
  }
}
@media (max-width: 760px) {
  :root {
    --header-h: 0px;
  }
  .site-header {
    padding: 10px 20px 6px;
    display: block;
  }
  .brand {
    font-size: 22px;
    gap: 9px;
  }
  .brand img {
    width: 26px;
    height: 26px;
  }
  .brand-line {
    display: none;
  }
  .home-places {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-entries {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-entry.has-art {
    flex-direction: row;
  }
  .home-entry.has-art .home-entry-art {
    width: 42%;
    flex: none;
    aspect-ratio: auto;
    height: auto;
    min-height: 120px;
  }
  .home-entry.has-art .home-entry-text {
    align-self: center;
  }
  .home-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-cards .home-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-cards .home-list {
    gap: 10px;
  }
  .home-feature-body {
    padding: 22px 18px 22px;
    gap: 16px;
  }
  .home-feature-art {
    padding: 14px;
  }
  .home-feature-lede {
    font-size: 17px;
  }
  .home-feature-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }
  .home-hero {
    padding-top: 0;
  }
  .home-hero-art {
    margin: 0 -8px;
    width: calc(100% + 16px);
    max-width: none;
    max-height: 200px;
    object-fit: contain;
  }
  .home-rail .section-heading {
    margin-top: 26px;
  }
  .difficulty-row {
    grid-template-columns: 40px minmax(0, 1fr) 86px;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12px;
  }
  /* "None with these filters" wraps inside its column instead of running
     under the tier name. */
  .difficulty-count {
    white-space: normal;
    text-align: right;
  }
  main {
    padding: 20px 20px 45px;
  }
  h1 {
    font-size: 36px;
  }
  .intro p {
    font-size: 13px;
  }
  .toolbar {
    margin: 14px 0;
  }
  /* A thumb swipes the strip, so the arrows only cost width here. */
  .tab-scroll {
    display: none;
  }
  .tab-strip:not(.at-start):before {
    left: 0;
  }
  .tab-strip:not(.at-end):after {
    right: 0;
  }
  .chip {
    font-size: 12px;
    padding: 8px 13px;
  }
  .group-chips,
  .family-chips {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
  }
  .section-heading {
    margin-top: 20px;
  }
  .section-heading h2 {
    font-size: 21px;
  }
  .card {
    min-height: 120px;
    padding: 15px 56px 15px 15px;
    gap: 16px;
  }
  .card-art {
    width: 82px;
    height: 88px;
  }
  .card h3 {
    font-size: 21px;
  }
  .article-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .article-card {
    padding: 16px 52px 16px 16px;
    min-height: 240px;
  }
  .article-card .card-art {
    height: 96px;
  }
  .article-card h3 {
    font-size: 20px;
  }
  .article-card p {
    font-size: 11px;
  }
  /* On a phone the strip scrolls sideways by touch, so the arrows give their
     room to the entries. */
  .section-strip .tab-scroll {
    display: none;
  }
  .section-strip:not(.at-start):before {
    left: 0;
  }
  .section-strip:not(.at-end):after {
    right: 0;
  }
  .section-strip .tab {
    padding: 10px 11px;
  }
  .related-cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .related-cards > li {
    scroll-snap-align: start;
  }
  .detail-head h1 {
    font-size: 34px;
  }
  .detail-hero img.detail-art,
  .detail-hero .product-media img {
    max-height: 240px;
  }
  .difficulty-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
  .notice {
    padding: 15px 16px;
    font-size: 12px;
  }
  .article-section {
    padding: 24px 0;
  }
  .article-section h2 {
    font-size: 26px;
  }
  .place-list {
    grid-template-columns: 1fr;
  }
  .empty {
    padding: 28px 18px;
  }
  .empty h2 {
    font-size: 26px;
  }
  .prose p {
    font-size: 14px;
  }
  .browse-families {
    grid-template-columns: 1fr;
  }
  #toast {
    bottom: 18px;
    font-size: 12px;
    width: max-content;
  }
}
@media (max-width: 600px) {
  .place-option {
    gap: 6px;
    padding-left: calc(10px + var(--depth) * 9px);
    font-size: 13px;
  }
  .place-option-meta {
    font-size: 10px;
  }
}
/* ------------------------------------------------------------- map layout */

/* Below two comfortable columns the map stops being sticky: the tabs, then a
   compact map, then the list, all in the page's own scroll. */
@media (max-width: 900px) {
  .map-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tabs" "map" "panel";
    grid-template-rows: none;
    gap: 14px;
  }
  .map-shell {
    position: relative;
    top: auto;
  }
  .map-stage {
    height: clamp(260px, 52vh, 460px);
  }
  .map-legend {
    font-size: 10px;
    gap: 9px;
    padding: 7px 10px;
  }
}

/* On a phone the map takes a bit under half the screen and scrolls away with
   the page. One finger moving up or down scrolls the page; a sideways drag
   pans the map and two fingers zoom it. Expand gives the whole screen to the
   map, where every gesture is the map's. */
@media (max-width: 760px) {
  main:has(.map-page) > .intro {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .map-stage {
    height: clamp(240px, 46vh, 380px);
  }
  .map-stage,
  .map-stage svg,
  .map-stage .gm-style {
    touch-action: pan-y;
  }
  .map-dialog .map-stage,
  .map-dialog .map-stage svg,
  .map-dialog .map-stage .gm-style,
  .map-shell:fullscreen .map-stage,
  .map-shell:fullscreen .map-stage svg,
  .map-shell:fullscreen .map-stage .gm-style {
    touch-action: none;
  }
  .map-legend {
    left: 10px;
    bottom: 10px;
  }
  .map-note {
    top: 10px;
    left: 10px;
    right: 92px;
  }
  .map-controls {
    top: 10px;
    right: 10px;
    gap: 6px;
  }
  .map-tabs a {
    padding: 9px 6px;
  }
  .map-results h2 {
    font-size: 23px;
  }
  .map-results .place-list:not(.place-list--single) {
    grid-template-columns: 1fr 1fr;
  }
  .map-results .place {
    padding: 10px 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Community contributions share the public reading layout. */
.account-slot { display: flex; align-items: center; }
.account-link { white-space: nowrap; font-size: 0.92rem; padding: 9px 16px; }
.community-post { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.contribution-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.creation-photo {
  max-width: 100%;
  width: 32rem;
  max-height: 32rem;
  object-fit: contain;
  border-radius: 0.75rem;
}
.photo-permission { display: flex; align-items: flex-start; gap: 0.65rem; line-height: 1.5; margin: 1rem 0; }
.photo-permission input { width: auto; margin-top: 0.35rem; flex-shrink: 0; }
[data-result], [data-sync-status] { margin-top: 1rem; }
/* Published photos as a gallery, with comments and the ways to contribute beside it. */
.community-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.community-layout.has-gallery { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.community-gallery h3 { margin-top: 0; }
.community-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.community-photo { margin: 0; min-width: 0; }
.community-photo .creation-photo { display: block; width: 100%; max-height: none; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--soft); }
.community-photo figcaption { display: grid; gap: 3px; margin-top: 8px; font-size: 13px; line-height: 1.45; }
.community-photo figcaption .small { margin: 0; }
.community-photo .contribution-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.community-thread > [data-posts] > :first-child { margin-top: 0; padding-top: 0; }
@media (max-width: 760px) {
  .community-layout.has-gallery { grid-template-columns: minmax(0, 1fr); }
  .community-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
button:disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 800px) {
  .account-link { margin-left: auto; }
}
/* Consent stays outside the reading flow and uses equal choice buttons. */
.analytics-banner { position: fixed; z-index: 1000; inset: auto 20px 20px; margin-inline: auto; max-width: 920px; padding: 20px 24px; background: var(--white); color: var(--ink); border: 1px solid #9ea797; border-radius: 12px; box-shadow: 0 4px 28px #173e3026; display: flex; gap: 24px; align-items: center; }
.analytics-banner h2 { font-size: 1.25rem; margin: 0 0 6px; }
.analytics-banner p { font-size: .94rem; line-height: 1.45; margin: 0 0 8px; }
.analytics-actions { display: flex; gap: 10px; flex-shrink: 0; }
.analytics-actions .button { min-width: 140px; }
@media (max-width: 700px) { .analytics-banner { inset: auto 10px 10px; padding: 16px; display: block; max-height: 55dvh; overflow-y: auto; } .analytics-actions { margin-top: 14px; } .analytics-actions .button { flex: 1; min-width: 0; } }

/* The one-line description of what the food is. Without it a card says where a
   record is from and how hard it is, but never what it actually is. */
.card-lede {
  margin: 0 0 10px;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Public research articles keep the evidence and its limits together. */
.library-article { overflow-wrap: anywhere; }
.library-body { max-width: 800px; }
.library-article .detail-copy > p.library-summary { font-size: 19px; color: var(--ink); }
.library-gaps li { margin-bottom: 14px; line-height: 1.65; }

/* Articles list: the title with search and collection beside it, a slim bar
   for the count, sort and page size, the cards, then the pager. */
.library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 20px; }
.library-head .intro { margin: 0; min-width: 0; }
.library-head h1 { margin-bottom: 6px; }
.library-controls { display: flex; align-items: center; gap: 10px; flex: 0 1 500px; min-width: 0; padding-bottom: 4px; }
.library-search { position: relative; flex: 1 1 auto; min-width: 0; }
.library-search .icon { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.library-search input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
.library-search input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgb(var(--shadow-rgb) / 12%); }
.library-collection { flex: 0 1 auto; min-width: 0; }
.library-collection > .dropdown-toggle { height: 40px; max-width: 230px; padding: 0 14px; border-radius: 999px; font-size: 14px; }

/* A dropdown of links: <details> opens it, every option is an address. */
.dropdown { position: relative; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; list-style: none; }
.dropdown-toggle::-webkit-details-marker { display: none; }
.dropdown-toggle::marker { content: ""; }
.dropdown-toggle:hover { border-color: var(--line-strong); }
.dropdown[open] > .dropdown-toggle { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(var(--shadow-rgb) / 10%); }
.dropdown-toggle .icon { width: 15px; height: 15px; flex: none; color: var(--muted); }
.dropdown-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dropdown-value > span { display: inline; }
.dropdown-chevron { width: 14px; height: 14px; flex: none; color: var(--muted); transition: transform 0.15s; }
.dropdown[open] .dropdown-chevron { transform: rotate(180deg); }
.dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 100%; width: max-content; max-width: min(320px, calc(100vw - 32px)); max-height: min(420px, 60vh); overflow: auto; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgb(var(--shadow-rgb) / 14%), 0 2px 6px rgb(var(--shadow-rgb) / 8%); text-align: left; }
.dropdown--up .dropdown-menu { top: auto; bottom: calc(100% + 6px); }
.dropdown-heading { margin: 4px 10px 6px; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dropdown-menu ul { margin: 0; padding: 0; list-style: none; }
.dropdown-menu a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: 7px; color: var(--ink); font-size: 14px; line-height: 1.3; text-decoration: none; }
.dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: var(--soft); outline: none; text-decoration: none; }
.dropdown-check { width: 14px; height: 14px; flex: none; color: var(--clay); visibility: hidden; }
.dropdown-menu a[aria-current] { font-weight: 700; }
.dropdown-menu a[aria-current] .dropdown-check { visibility: visible; }
.dropdown-option { flex: 1; }
.dropdown-count { margin-left: 18px; font-size: 12px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

.list-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 8px 0; margin-bottom: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.list-count { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.list-count strong { color: var(--ink); }
.list-bar .text-link { min-height: 0; }
.list-bar-controls { display: flex; gap: 8px; margin-left: auto; }

/* Three columns, two, then one. A card with a hero is a feature: two columns
   wide, and two rows tall beside two plain cards when there are three. */
/* Masonry: rows of one height, and each card takes the cells its size names
   (see cardSizes in library.js), packed densely. A phone has one column of
   cards at their own height. */
.library-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 280px; grid-auto-flow: row dense; gap: 22px; }
.library-results > .library-card { overflow: hidden; }
.library-results > .library-card--wide { grid-column: span 2; }
.library-results > .library-card--tall { grid-row: span 2; }
.library-results > .library-card--feature { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1100px) { .library-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A tablet held upright keeps two columns however wide it is; on its side it has three. */
@media (orientation: portrait) and (min-width: 701px) { .library-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .library-results { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .library-results > .library-card { grid-column: auto; grid-row: auto; }
  .library-results > .library-card--compact { aspect-ratio: 4 / 3; }
  .library-results > .library-card--feature { aspect-ratio: 4 / 5; }
  .library-results > .library-card--tall .library-card-media { flex: none; aspect-ratio: 16 / 9; }
}
.library-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 22px 22px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow-wrap: anywhere; transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s; }
.library-card:hover { border-color: var(--hover-line); box-shadow: 0 12px 30px rgb(var(--shadow-rgb) / 10%); transform: translateY(-2px); }
.library-card:has(h2 a:focus-visible) { outline: 3px solid var(--clay); outline-offset: 3px; }
.library-card h2 a:focus-visible { outline: 0; }
.library-pill { display: inline-flex; align-items: center; height: 24px; margin-bottom: 14px; padding: 0 10px; border-radius: 999px; background: var(--sage); color: var(--forest); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.library-card h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.18; }
.library-card h2 a { color: inherit; text-decoration: none; }
/* The whole card is the link of its title. */
.library-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.library-card-summary { display: -webkit-box; margin: 0 0 16px; overflow: hidden; font-size: 14.5px; line-height: 1.55; color: var(--muted); -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.library-card .match-context { margin: -6px 0 14px; font-size: 13px; }
.library-card-date { margin: auto 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.library-card.has-editorial-controls { padding-right: 60px; }
.library-card .editorial-card-controls { top: 8px; }

/* With its own 16:9 hero, the picture tops the card and, blurred and darkened,
   runs behind the text, so the card reads as one piece of the image. */
.library-card--hero { padding: 0; border: 0; background: var(--band); color: #fff; overflow: hidden; isolation: isolate; }
.library-card--hero.has-editorial-controls { padding-right: 0; }
.library-card--hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 24 18 / 6%) 0%, rgb(8 24 18 / 22%) 38%, rgb(8 24 18 / 62%) 58%, rgb(8 24 18 / 78%) 100%); }
.library-card-backdrop { position: absolute; inset: -48px; z-index: -2; width: calc(100% + 96px); height: calc(100% + 96px); max-width: none; object-fit: cover; filter: blur(32px) saturate(1.25); }
.library-card-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.library-card-media .product-media { position: absolute; inset: 0; }
.library-card-media .product-media img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); transition: transform 0.5s ease; }
.library-card-media figcaption, .library-card-media .product-image-error { display: none; }
.library-card--hero:hover .library-card-media .product-media img { transform: scale(1.03); }
.library-card-media .library-pill { position: absolute; top: 18px; left: 18px; margin: 0; background: rgb(255 254 249 / 92%); color: var(--ink); box-shadow: 0 1px 4px rgb(0 0 0 / 18%); }
.library-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; width: 100%; max-width: 760px; margin-top: -24px; padding: 0 22px 20px; text-shadow: 0 1px 3px rgb(0 0 0 / 30%); }
.library-card--hero.has-editorial-controls .library-card-copy { padding-right: 60px; }
.library-card--hero h2 { color: #fff; }
.library-card--tall .library-card-summary { -webkit-line-clamp: 5; }
/* In its two rows the picture grows to fill what the text leaves, so the card has no empty band. */
.library-results > .library-card--tall .library-card-media { flex: 1 1 auto; aspect-ratio: auto; min-height: 180px; }
.library-results > .library-card--tall .library-card-copy { flex: 0 0 auto; }
.library-results > .library-card--tall .library-card-date { margin-top: 4px; }

/* A feature or picture card is the picture itself, cropped to the card, with
   the title over its darkened foot. */
.library-card--picture { justify-content: flex-end; }
.library-card-picture { position: absolute; inset: 0; z-index: -2; }
.library-card-picture .product-media { position: absolute; inset: 0; }
.library-card-picture .product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.library-card-picture figcaption, .library-card-picture .product-image-error { display: none; }
.library-card--picture:hover .library-card-picture .product-media img { transform: scale(1.03); }
.library-card--picture::before { background: linear-gradient(180deg, rgb(8 24 18 / 0%) 30%, rgb(8 24 18 / 55%) 62%, rgb(8 24 18 / 82%) 100%); }
.library-card--picture > .library-pill { position: absolute; top: 18px; left: 18px; margin: 0; background: rgb(255 254 249 / 92%); color: var(--ink); box-shadow: 0 1px 4px rgb(0 0 0 / 18%); }
.library-card--picture .library-card-copy { flex: 0 0 auto; margin: 0; padding: 0 22px 20px; }
.library-card--compact .library-card-summary { display: none; }
.library-card--compact h2 { -webkit-line-clamp: 3; }
.library-card--feature .library-card-copy { padding: 0 30px 26px; }
.library-card--feature h2 { font-size: clamp(26px, 2.6vw, 38px); }
.library-card--feature .library-card-summary { max-width: 640px; font-size: 16px; -webkit-line-clamp: 3; }
/* Plain cards keep to their cell: the title and summary give way first. */
.library-card h2 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; flex: none; }
.library-card:not(.library-card--hero) .library-card-summary { -webkit-line-clamp: 3; }
.library-card--wide h2 { font-size: 30px; -webkit-line-clamp: 2; }
.library-card--wide .library-card-summary { max-width: 720px; font-size: 15.5px; }
.library-card--hero .library-card-summary { color: rgb(255 255 255 / 84%); }
.library-card--hero .library-card-date, .library-card--hero .match-context { color: rgb(255 255 255 / 72%); }
.library-card--hero .editorial-card-controls { background: rgb(255 254 249 / 90%); border-radius: 8px; }
/* A picture that fails or is withdrawn leaves the dark card and its text. */
.library-card--hero:not(:has(.product-media)) .library-card-backdrop { display: none; }
.library-card--picture:not(:has(.product-media)) > .library-pill { position: static; margin: 22px 22px auto; }
.library-card--hero:not(:has(.product-media)) .library-card-media { aspect-ratio: auto; padding: 22px 22px 32px; }
.library-card--hero:not(:has(.product-media)) .library-card-media .library-pill { position: static; }

/* Large pictures or a grid, two icon links side by side. */
.view-switch { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.view-switch-option { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border-radius: 6px; color: var(--muted); }
.view-switch-option:hover { color: var(--ink); background: var(--soft); text-decoration: none; }
.view-switch-option[aria-current] { background: var(--fill); color: var(--on-fill); }
.view-switch-option .icon { width: 16px; height: 16px; }

/* The grid view: recipe cards, with the hero cropped to a square. */
.library-grid-card { padding-right: 17px; }
.library-grid-card.has-editorial-controls { padding-right: 60px; }
.library-grid-card h3 a:after { inset: 0; }
.library-grid-card .badge { color: var(--clay); }
.library-grid-card .match-context { margin: 0 0 6px; font-size: 13px; }
.product-media--library-grid { width: 112px; flex: 0 0 112px; align-self: center; }
.library-grid-card .product-media--library-grid img { aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 6px; }
.product-media--library-grid figcaption { display: none; }
@media (max-width: 760px) { .product-media--library-grid { width: 92px; flex-basis: 92px; } }

.pager-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); }
.pager-bar .pager-status { flex: 1 1 0; margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pager-pages { display: flex; align-items: center; gap: 4px; }
.pager-number, .pager-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; text-decoration: none; }
a.pager-number:hover, a.pager-arrow:hover { background: var(--soft); text-decoration: none; }
.pager-number[aria-current] { background: var(--fill); color: var(--on-fill); font-weight: 700; }
.pager-arrow { border: 1px solid var(--line); background: var(--white); }
.pager-arrow + .pager-number, .pager-number + .pager-arrow, .pager-gap + .pager-arrow { margin-left: 4px; }
.pager-arrow[aria-disabled] { opacity: 0.4; }
.pager-arrow .icon { width: 16px; height: 16px; }
.pager-gap { min-width: 22px; color: var(--muted); text-align: center; }
.pager-bar > .dropdown { flex: 1 1 0; text-align: right; }

@media (max-width: 860px) {
  .library-head { flex-direction: column; align-items: stretch; }
  .library-controls { flex: none; padding: 0; }
}
@media (max-width: 600px) {
  .library-controls { display: flex; }
  .library-collection > .dropdown-toggle { width: 100%; max-width: none; }
  .library-collection .dropdown-value { flex: 1; }
  .dropdown-value[data-short] > span { display: none; }
  .dropdown-value[data-short]::before { content: attr(data-short); }
  .library-card h2 { font-size: 22px; }
  .pager-pages { order: 3; width: 100%; justify-content: center; }
}

/* Reviewed product art is separate from the public text records. */
.product-image-slot { display: contents; }
.product-media { margin: 0; min-width: 0; }
.product-media[hidden] { display: none; }
.product-media img { display: block; width: 100%; height: auto; object-fit: contain; mix-blend-mode: normal; }
.product-media figcaption { font-size: 10px; line-height: 1.4; color: var(--muted); margin-top: 6px; }
.product-media--card { width: 112px; flex: 0 0 112px; }
.product-media--detail { height: auto; }
.product-media--detail img { max-height: 340px; }
.recipe-detail-head .product-media--detail img,
.recipe-detail-head img.detail-art { max-height: none; }
.product-media--feature { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: var(--sage); }
.product-media--feature img { max-width: 440px; max-height: 440px; }
.product-media--feature figcaption { text-align: center; }
.product-media--article { max-width: 440px; margin: 0 auto 28px; }
.product-image-error { display: block; font-size: 12px; color: var(--muted); }
.product-image-retry { border: 0; background: transparent; color: var(--clay); text-decoration: underline; min-height: 44px; padding: 6px 0; font-size: 12px; text-align: left; }
@media (max-width: 760px) {
  .product-media--card { width: 92px; flex-basis: 92px; }
  .product-media--detail img { max-height: 260px; }
  .recipe-detail-head .product-media--detail img,
  .recipe-detail-head img.detail-art { max-height: none; }
  .product-media--feature { padding: 14px; }
  .product-media--feature img { max-width: 300px; }
}
.product-image-scope { display: block; margin-top: 3px; }
.recipes-intro:has(.product-media--family:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; align-items: center; margin-bottom: 20px; }
.recipes-intro .intro { margin-bottom: 20px; }
.product-media--family { width: 180px; }
@media (max-width: 760px) {
  .recipes-intro:has(.product-media--family:not([hidden])) { grid-template-columns: minmax(0, 1fr) 112px; gap: 16px; }
  .product-media--family { width: 112px; }
}
.product-image-retry { position: relative; z-index: 2; }
.product-image-slot[data-product-state="error"] { display: block; min-width: 0; }
.product-image-slot[data-product-placement="card"][data-product-state="error"] { width: 112px; flex: 0 0 112px; }
@media (max-width: 760px) {
  .product-image-slot[data-product-placement="card"][data-product-state="error"] { width: 92px; flex-basis: 92px; }
}

/* Preparation style rows carry a picture of the process, so the section reads
   like the illustrated ones above it rather than a list of words. */
.home-cards li.has-art > a {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 14px;
}
.home-style-art {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
}
.home-style-text {
  display: block;
  min-width: 0;
}
@media (min-width: 760px) {
  .home-cards li.has-art > a {
    grid-template-columns: 96px 1fr;
  }
  .home-style-art {
    width: 96px;
    height: 96px;
  }
}

.home-show-all {
  display: inline-block;
  margin-top: 14px;
}
.browse-dimension li a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
}
.browse-dimension .home-style-note {
  grid-column: 1 / -1;
}

/* Admin triage follows the same fields and buttons as community forms. */
.editorial-flags { margin: 0 0 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; }
.editorial-flags summary { cursor: pointer; font-weight: 600; }
.editorial-flags form { max-width: 40rem; margin-top: 1rem; }
.editorial-flags textarea, .editorial-flags select { width: 100%; box-sizing: border-box; }
.editorial-flags [data-flag-status] { margin-bottom: 0; }
/* ------------------------------------------------------------------ equipment

   The Equipment section holds two kinds in one list — something you get and
   something you build — so the card leads with the kind, then the type, then
   where it comes from. The cards share the recipe card's shape; only the badge
   row and the meta line differ, so the two sections read as one site.
*/
.equipment-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.equipment-card {
  min-height: 150px;
}
.equipment-card .card-body {
  min-width: 0;
}
.badge.equipment-kind {
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--muted);
}
.equipment-card .meta {
  margin-top: 8px;
}
/* The attestation range under the period bucket, in the aside. */
.equipment-span {
  margin: 6px 0 0;
}
.equipment-span strong {
  font-weight: 500;
}
/* Materials, and a build's bill of stock: a plain list, no bullets, each line
   its own row so a long note wraps under its name instead of beside it. */
.plain-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.plain-list li {
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.plain-list li:last-child {
  border-bottom: 0;
}
/* A fact row with no value, only its note (Care, or a capacity the source
   describes in words), keeps the note on the right rather than leaving a gap. */
.data-rows strong .small {
  color: var(--muted);
}

@media (max-width: 1100px) {
  .equipment-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .equipment-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .data-rows div {
    flex-direction: column;
    gap: 4px;
  }
}

.editorial-review { position: relative; }
.editorial-review summary { min-height: 44px; padding: 9px 148px 9px 0; box-sizing: border-box; }
.editorial-heading-controls { position: absolute; top: 16px; right: 16px; display: flex; gap: 4px; }
.editorial-card-controls { position: absolute; top: 52px; right: 8px; z-index: 2; display: flex; flex-direction: column; }
.editorial-card-controls[hidden] { display: none; }
.editorial-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0; }
.editorial-toggle svg { width: 18px; height: 18px; flex: none; fill: currentColor; stroke: none; display: block; }
.editorial-toggle:hover { background: var(--hover); color: var(--ink); }
.editorial-toggle[aria-pressed="true"] { --editorial-icon-cutout: var(--fill); background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.editorial-toggle:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.editorial-toggle[aria-disabled="true"] { opacity: .45; cursor: wait; }
.card.has-editorial-controls:not(.article-card):not(.related-card) { min-height: 192px; }
.related-card.has-editorial-controls { padding-right: 60px; min-height: 148px; }
.related-card .editorial-card-controls { top: 8px; }
.home-feature-card .editorial-card-controls { position: relative; top: auto; right: auto; flex-direction: row; }
.editorial-tooltip { position: fixed; z-index: 2000; width: max-content; max-width: min(240px, calc(100vw - 16px)); padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--fill); color: var(--on-fill); font: 12px/1.4 Arial, Helvetica, sans-serif; box-shadow: 0 2px 8px #0002; }
.editorial-tooltip[hidden] { display: none; }
.editorial-error { position: absolute; top: 100%; right: 0; width: 180px; padding: 8px; background: var(--white); color: var(--clay); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; line-height: 1.4; z-index: 3; }
.home-feature-card .editorial-error { left: 0; right: auto; top: auto; bottom: 100%; }

/* Long articles keep section anchors and read as one continuous story. */
.library-article > .library-body { margin-inline: auto; }
.library-article .library-section { border-bottom: 0; padding: 26px 0 4px; }
.library-article .library-section h2 { max-width: 680px; margin: 0 auto 22px; font-size: clamp(27px, 3vw, 38px); line-height: 1.2; }
.library-article .library-section p { max-width: 680px; margin: 0 auto 24px; font-size: 18px; line-height: 1.85; }
.library-article .library-section:first-child > p:first-of-type { font-size: 21px; line-height: 1.7; }
.article-editorial-image { margin: 38px 0 44px; }
.article-editorial-image img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; border-radius: 8px; }
.article-editorial-image img[hidden] { display: none; }
@media (max-width: 640px) {
  .library-article .library-section p { font-size: 17px; line-height: 1.75; }
  .library-article .library-section:first-child > p:first-of-type { font-size: 19px; }
  .article-editorial-image { margin: 28px 0 32px; }
}

/* Articles read as magazine stories: the headline block, a 16:9 hero, one
   reading column, and the pictures on source sites in a column beside it.
   Generated figures placed in the text are 4:3 and carry their caption. */
.magazine-article { max-width: 1180px; margin: 0 auto; }
.magazine-head { max-width: 840px; margin: 22px auto 34px; text-align: center; }
.magazine-head .eyebrow { color: var(--clay); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; }
.magazine-head h1 { font-size: clamp(36px, 5.4vw, 66px); line-height: 1.05; margin: 0 0 20px; text-wrap: balance; }
.magazine-dek { font-family: Georgia, "Times New Roman", serif; font-size: clamp(19px, 2.1vw, 24px); line-height: 1.5; color: var(--forest); max-width: 700px; margin: 0 auto 20px; text-wrap: pretty; }
.magazine-byline { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.magazine-byline span + span::before { content: "·"; margin-right: 14px; }
.magazine-hero { margin: 0 0 44px; }
.magazine-hero .product-media--article-hero { margin: 0; }
.magazine-hero .product-media--article-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--soft); }
.magazine-caption { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.magazine-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.magazine-layout.has-references { grid-template-columns: minmax(0, 1fr) 210px; gap: 48px; align-items: start; }
.magazine-layout .detail-gallery { grid-area: auto; position: sticky; top: calc(var(--header-h) + 24px); padding-top: 30px; }
.magazine-layout > .magazine-body { max-width: none; margin: 0; }
.magazine-body > .library-section:first-child > p:first-of-type::first-letter { float: left; font-family: Georgia, "Times New Roman", serif; font-size: 4.5em; line-height: 0.8; padding: 8px 10px 0 0; color: var(--clay); }
.article-figure { max-width: 760px; margin-inline: auto; }
.article-figure img { aspect-ratio: 4 / 3; object-fit: cover; max-height: none; background: var(--soft); }
.article-figure-caption { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.library-section.has-recipe-cards { display: flow-root; }
.has-recipe-cards .article-editorial-image { clear: both; }
.article-recipe-card { clear: both; width: min(300px, 42%); margin-block: 4px 24px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--soft); }
.article-recipe-card--left { float: left; margin-right: 28px; }
.article-recipe-card--right { float: right; margin-left: 28px; }
.article-recipe-card-link { display: block; color: inherit; text-decoration: none; }
.article-recipe-card-link:focus-visible { outline: 3px solid var(--clay); outline-offset: -3px; }
.article-recipe-card-link:hover h3 { text-decoration: underline; }
.article-recipe-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article-recipe-card img[hidden] { display: none; }
.article-recipe-card-copy { padding: 18px; }
.article-recipe-card-label { display: block; color: var(--clay); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.article-recipe-card h3 { margin: 0 0 10px; font-size: 22px; overflow-wrap: anywhere; }
.library-body .article-recipe-card p { font-family: inherit; font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.article-recipe-card-action { font-size: 13px; font-weight: 700; color: var(--forest); }
@media (max-width: 600px) {
  .article-recipe-card { float: none; width: 100%; margin: 24px 0; }
}
.temperature { white-space: nowrap; }
@media (max-width: 1000px) {
  .magazine-layout.has-references { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .magazine-layout .detail-gallery { position: static; padding-top: 0; }
}
@media (max-width: 760px) {
  .magazine-head { margin: 12px 0 24px; text-align: left; }
  .magazine-byline { justify-content: flex-start; }
  .magazine-hero { margin: 0 -20px 30px; }
  .magazine-hero .product-media--article-hero img { border-radius: 0; }
  .magazine-caption { padding: 0 20px; }
}

/* ------------------------------------------------------- home page, 2026-10 */

.home-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay);
}
.home-hero.has-article {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
}
.home-hero.has-article h1 {
  font-size: clamp(52px, 6.2vw, 96px);
}
.home-article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.home-article-media,
.home-article-media .product-image-slot,
.home-article-media .product-media {
  display: block;
  margin: 0;
}
.home-article-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--soft);
}
.home-article-copy {
  padding: 24px 28px 22px;
}
.home-article-copy .home-kicker {
  margin-bottom: 10px;
}
.home-article h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
}
.home-article-summary {
  margin: 0;
  max-width: 62ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.5;
}
.home-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.home-read,
.home-see-all {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.home-read:hover,
.home-see-all:hover {
  background: var(--sage);
  border-color: var(--hover-line);
  text-decoration: none;
}
.home-read {
  margin-left: auto;
}
.home-heading {
  align-items: flex-end;
}
.home-heading-text {
  min-width: 0;
}
.home-project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.home-project-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}
.home-project-card:hover {
  text-decoration: none;
  border-color: var(--hover-line);
}
.home-project-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #e2e1dd;
}
.home-project-dots {
  display: none;
}
.home-project-all {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
@media (max-width: 600px) {
  .home-project-list {
    display: flex;
    gap: 12px;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    scroll-padding-inline: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .home-project-list::-webkit-scrollbar { display: none; }
  .home-project-card {
    flex: 0 0 calc(100vw - 40px);
    scroll-snap-align: start;
  }
  .home-project-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
  }
  .home-project-dots button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
  }
  .home-project-dots button::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid var(--forest);
    border-radius: 50%;
  }
  .home-project-dots button[aria-current="true"]::before { background: var(--forest); }
}
.home-sub {
  margin: 6px 0 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.home-feature-body .detail-actions .button {
  padding: 13px 26px;
  font-size: 14px;
}
/* Preparation styles and food families: the same picture card. */
.home-cards .home-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-cards .home-list a {
  justify-content: center;
}
.home-section-families .home-style-art {
  mix-blend-mode: var(--art-blend);
  object-fit: contain;
  background: var(--soft);
}
.home-section-families .home-entry-name {
  font-size: 19px;
}
.home-status {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 32px 56px;
  align-items: center;
  margin-top: 64px;
  padding: 40px 44px;
  background: var(--band);
  color: var(--on-band);
  border-radius: 14px;
}
.home-status h2 {
  margin: 0 0 10px;
  font-size: 26px;
  color: var(--on-band);
}
.home-status p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-band-muted);
}
.home-status .text-link {
  margin-top: 8px;
  color: var(--on-band-accent);
}
.home-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}
.home-stats div {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid color-mix(in srgb, var(--on-band) 25%, transparent);
}
.home-stats dt {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-band-muted);
}
.home-stats dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .home-status {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .home-hero.has-article {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .home-cards .home-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .home-heading {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }
  .home-cards .home-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-article-copy {
    padding: 18px 18px 16px;
  }
  .home-status {
    margin-top: 44px;
    padding: 28px 22px;
  }
  .home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  margin-top: 40px;
  background: var(--soft);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.footer-inner {
  max-width: 1344px;
  margin: auto;
  padding: 48px 48px 28px;
}
.footer-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
  align-items: center;
  gap: 24px 48px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.site-footer .footer-newsletter h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font: 400 clamp(24px, 2.4vw, 32px)/1.15 Georgia, "Times New Roman", serif;
  letter-spacing: -0.035em;
  text-transform: none;
}
.footer-newsletter-copy p {
  max-width: 52ch;
  margin: 0;
  font-size: 14px;
}
.footer-newsletter-form { position: relative; }
.footer-newsletter-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.footer-newsletter-controls {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.footer-newsletter-field { flex: 1; min-width: 0; }
.footer-newsletter-field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}
.footer-newsletter-field input.nessie_inline_error { border-color: #a23c2e; }
.footer-newsletter-field div.nessie_inline_error {
  margin-top: 6px;
  color: #a23c2e;
  font-size: 13px;
}
.footer-newsletter-controls button {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  white-space: nowrap;
}
.footer-newsletter-controls button:hover { background: var(--forest); }
.footer-newsletter-controls button:disabled { opacity: .65; cursor: wait; }
.footer-newsletter-note { margin: 8px 0 0; font-size: 12px; }
.footer-newsletter-response {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.footer-newsletter-error { background: #f8e9e4; color: #803124; }
.footer-newsletter-success { background: #e3e8d8; color: var(--ink); }
.footer-newsletter-honeypot { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
body:has(main .home-hero) .footer-newsletter {
  gap: 32px 60px;
  padding: 48px;
  border: 0;
  border-radius: 20px;
  background: var(--ink);
  color: var(--white);
}
body:has(main .home-hero) .site-footer .footer-newsletter h2 {
  max-width: 15ch;
  color: var(--white);
  font-size: clamp(30px, 3.6vw, 46px);
}
body:has(main .home-hero) .footer-newsletter-copy p,
body:has(main .home-hero) .footer-newsletter-note { color: #dbe6d9; }
body:has(main .home-hero) .footer-newsletter-form label { color: var(--white); }
body:has(main .home-hero) .footer-newsletter-controls button { background: var(--white); color: var(--ink); }
body:has(main .home-hero) .footer-newsletter-controls button:hover { background: var(--sage); }
body:has(main .home-hero) .footer-newsletter-field div.nessie_inline_error { color: #ffd6c9; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 40px 56px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  color: var(--ink);
}
.footer-logo:hover {
  text-decoration: none;
}
.footer-brand p,
.footer-maker p {
  margin: 14px 0 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.6;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.site-footer h2 {
  margin: 0 0 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-nav div {
  display: flex;
  flex-direction: column;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 14px;
  color: var(--ink);
}
.footer-maker p {
  margin-top: 0;
}
.footer-maker a {
  color: var(--clay);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin: 40px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
@media (max-width: 900px) {
  .footer-newsletter { grid-template-columns: minmax(0, 1fr); }
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}
@media (max-width: 760px) {
  .footer-inner {
    padding: 32px 20px 24px;
  }
  .footer-newsletter { gap: 20px; margin-bottom: 28px; padding-bottom: 28px; }
  body:has(main .home-hero) .footer-newsletter { padding: 28px 22px; border-radius: 14px; }
  .footer-newsletter-controls button { padding: 0 16px; }
  .footer-nav a {
    min-height: 40px;
  }
}

/* --------------------------------------------------------------- account */

.account-slot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* The alerts bell, beside the account button. It wiggles once on hover. */
.alert-bell {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid #b9beaf;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
}
.alert-bell svg { width: 20px; height: 20px; transform-origin: 50% 15%; }
.alert-bell:hover, .alert-bell[aria-current] { border-color: var(--ink); }
.alert-bell:hover svg, .alert-bell:focus-visible svg { animation: bell-wiggle 0.6s ease-in-out; }
.alert-bell .account-badge { position: absolute; top: -5px; right: -5px; box-shadow: 0 0 0 2px var(--paper); }
.alert-wrap { position: relative; }
/* Below wide desktop the signed-in header has no room for the word: the
   avatar alone is the account button. */
@media (max-width: 1100px) {
  .account-slot .account-button { padding: 5px; }
  .account-slot .account-button-label { display: none; }
}
/* The alerts dropdown hangs from the bell, right-aligned to it. */
.alert-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -60px;
  z-index: 30;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 18px 40px rgb(23 62 48 / 0.18);
}
.alert-menu-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 6px 10px; font-size: 14px; }
.alert-menu-head a { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.alert-menu-list { display: grid; gap: 8px; }
.alert-menu .account-alert { padding: 12px 14px; font-size: 14px; }
.alert-menu .account-alert p { margin: 0 0 4px; line-height: 1.45; }
.alert-menu-note { margin: 4px 6px 8px; }
@keyframes bell-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-11deg); }
  60% { transform: rotate(7deg); }
  80% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .alert-bell:hover svg, .alert-bell:focus-visible svg { animation: none; }
}
.account-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 16px 5px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
  font-size: 13px;
}
.account-button:hover, .account-button[aria-current] { border-color: var(--ink); }
.account-avatar {
  display: inline-block;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--soft);
  box-shadow: 0 0 0 1px var(--line);
}
.account-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-avatar.large { width: 64px; height: 64px; }
.account-avatar.huge { width: 128px; height: 128px; }
.account-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--clay);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.account-button .account-badge { position: absolute; top: -5px; right: -5px; box-shadow: 0 0 0 2px var(--paper); }
.account-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.account-nav .account-badge { margin-left: auto; }

/* The sign-in page: the painted larder beside a short reason to sign in. */
.login-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
}
.login-art { background: var(--soft); display: flex; align-items: center; justify-content: center; }
.login-art img { display: block; width: 100%; height: 100%; max-height: 780px; object-fit: cover; }
.login-panel { padding: 56px 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.login-panel .eyebrow { color: var(--clay); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; }
.login-panel h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 40px; line-height: 1.1; margin: 0 0 14px; }
.login-lede { font-size: 17px; line-height: 1.5; color: var(--forest); margin: 0 0 22px; }
.login-message { background: var(--warning); border-radius: 8px; padding: 10px 14px; margin: 0 0 18px; }
.login-benefits { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.login-benefits li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; }
.login-benefits svg { width: 22px; height: 22px; flex: none; color: var(--clay); }
.login-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.login-actions .button { flex: 1 1 160px; font-size: 15px; min-height: 50px; }
.login-uoa { color: var(--muted); margin-top: 18px; line-height: 1.5; }

/* The signed-in account: sections on the left, the chosen one on the right. */
.account-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}
.account-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; }
.account-identity { display: flex; gap: 14px; align-items: center; }
.account-identity > div { display: grid; gap: 3px; min-width: 0; }
.account-identity strong { font-size: 17px; }
.account-identity .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.account-nav { display: grid; gap: 2px; }
.account-nav a, .account-signout {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.account-nav a:hover, .account-signout:hover { background: var(--soft); }
.account-nav a.active { background: var(--sage); font-weight: 700; }
.account-nav svg, .account-signout svg { width: 20px; height: 20px; flex: none; }
.account-signout { border: 0; background: none; color: var(--muted); cursor: pointer; border-top: 1px solid var(--line); border-radius: 0; padding-top: 16px; }
.account-main { min-width: 0; }
.account-heading h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 34px; margin: 0 0 8px; }
.account-heading p { color: var(--forest); margin: 0 0 26px; line-height: 1.5; max-width: 62ch; }
.account-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
.account-tile { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.account-tile:hover { border-color: var(--ink); }
.account-tile svg { width: 22px; height: 22px; color: var(--clay); }
.account-tile strong { font-size: 28px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.account-tile span { font-size: 13px; color: var(--muted); }
.account-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.account-columns h2 { font-size: 18px; margin: 0 0 12px; }
.account-list { display: grid; gap: 12px; }
.account-item, .account-alert, .account-card { border: 1px solid var(--line); border-radius: 12px; background: var(--white); padding: 18px 20px; }
.account-columns .account-item, .account-columns .account-alert { margin-bottom: 10px; }
.account-item h3 { font-size: 16px; margin: 8px 0 4px; }
.account-item h3 a, .account-alert a, .account-item .small a { text-decoration: underline; text-underline-offset: 3px; }
a.account-alert { display: flex; color: inherit; text-decoration: none; transition: border-color 0.15s, background 0.15s; }
a.account-alert:hover, a.account-alert:focus-visible { border-color: var(--ink); background: var(--soft); }
.account-item .small, .account-alert .small { color: var(--muted); margin: 6px 0 0; }
.account-item-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.account-kind { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clay); font-weight: 700; }
.account-kind svg { width: 16px; height: 16px; }
.account-status { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--warning); }
.account-status.status-published { background: var(--sage); }
.account-excerpt { margin: 8px 0 0; line-height: 1.5; color: var(--forest); }
.account-stars { color: var(--star); letter-spacing: 2px; }
.account-stars span { color: var(--line); }
.account-photo { display: block; width: 160px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-top: 10px; }
.account-alert { display: flex; gap: 14px; align-items: flex-start; }
.account-alert > svg { width: 22px; height: 22px; flex: none; color: var(--muted); margin-top: 2px; }
.account-alert p { margin: 0; line-height: 1.45; }
.account-alert.unread { border-color: var(--clay); box-shadow: inset 4px 0 0 var(--clay); }
.account-alert.unread > svg { color: var(--clay); }
.account-empty { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 28px; text-align: center; color: var(--forest); }
.account-empty p { margin: 0 0 16px; }
.account-card { margin-bottom: 20px; }
.push-choice { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 8px; cursor: pointer; }
.push-choice input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--forest); }
.push-choice span { font-size: 15px; line-height: 1.35; }
.account-card h2 { font-size: 18px; margin: 0 0 6px; }
.account-card h3 { font-size: 15px; margin: 24px 0 12px; }
.account-profile { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.account-profile dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.account-profile dt { color: var(--muted); font-size: 13px; }
.account-profile dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.account-card label.button { cursor: pointer; }
.food-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.food-avatar { padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--soft); cursor: pointer; aspect-ratio: 1; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.food-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.food-avatar:hover { border-color: var(--line-strong); }
.food-avatar.chosen { border-color: var(--clay); box-shadow: 0 0 0 2px var(--clay); }
.account-saved { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.account-saved a { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.account-saved a:hover { border-color: var(--ink); }
.account-saved svg { width: 18px; height: 18px; flex: none; color: var(--clay); }

@media (max-width: 900px) {
  .login-page { grid-template-columns: minmax(0, 1fr); }
  .login-art img { max-height: 320px; object-position: center 30%; }
  .login-panel { padding: 32px 24px; }
  .login-panel h1 { font-size: 32px; }
  .account-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .account-side { position: static; }
  .account-nav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .account-nav a { flex: none; border: 1px solid var(--line); border-radius: 999px; min-height: 40px; padding: 8px 14px; }
  .account-columns { grid-template-columns: minmax(0, 1fr); }
  .account-signout { border-top: 0; padding: 8px 12px; }
}
@media (max-width: 760px) {
  /* On a phone the account control sits on the brand line, top right. */
  .site-header .account-slot { display: flex; position: absolute; top: 8px; right: 16px; min-width: 0; min-height: 0; }
  .account-slot .account-link { min-height: 36px; padding: 8px 14px; }
  .account-slot .account-button { padding: 3px; }
  .account-slot .alert-bell { width: 40px; height: 40px; }
  .alert-menu { position: fixed; top: 58px; left: 16px; right: 16px; width: auto; }
  .account-slot .account-button-label { display: none; }
  .login-art img { max-height: 220px; }
}

/* ------------------------------------------------------- reader rating bar */
/* Half stars come from Raty (vendor/raty), which swaps star-on, star-half and
   star-off classes on <i> elements. Each is the sprite's star as a mask, so
   the colour is the element's own. The reader's own rating is drawn in clay,
   everyone's score in forest, and the line beside it says which. */
.reader-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 10px 0 16px;
}
.magazine-head .reader-rating { justify-content: center; margin: 18px 0 0; }
.cv-head .reader-rating { margin: 12px 0 0; }
.rating-stars {
  --star: var(--forest);
  display: inline-flex;
  padding: 4px;
  margin: -4px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--star);
}
.rating-stars.is-mine { --star: var(--clay); }
.rating-stars-host { display: inline-flex; gap: 3px; }
.rating-stars-host i {
  display: block;
  width: 26px;
  height: 26px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6 10 6l4.7.5-3.5 3.2 1 4.7L8 12l-4.2 2.4 1-4.7L1.3 6.5 6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6 10 6l4.7.5-3.5 3.2 1 4.7L8 12l-4.2 2.4 1-4.7L1.3 6.5 6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
  background: var(--line);
  transition: transform 0.1s ease;
}
.rating-stars-host i.star-on { background: var(--star); }
.rating-stars-host i.star-half { background: linear-gradient(90deg, var(--star) 50%, var(--line) 50%); }
.rating-stars:hover i:hover { transform: scale(1.12); }
.rating-summary { margin: 0; font-size: 14px; color: var(--muted); }
.rating-summary strong { color: var(--ink); font-size: 16px; }
.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reader-votes { display: inline-flex; gap: 6px; }
.vote-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.vote-button svg { width: 17px; height: 17px; }
.vote-button .thumb-down { transform: scaleY(-1); }
.vote-button:hover { background: var(--soft); }
.vote-button[aria-pressed="true"] { background: var(--sage); border-color: var(--forest); color: var(--forest); }
.vote-button[aria-pressed="true"] svg { fill: currentColor; fill-opacity: 0.18; }

/* ---------------------------------------------------------- sign-in dialog */
.signin-dialog {
  width: min(440px, calc(100% - 32px));
  padding: 32px 28px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--paper);
  text-align: center;
  box-shadow: 0 24px 60px #15271d40;
}
.signin-dialog::backdrop { background: var(--backdrop); }
html:has(.signin-dialog[open]) { overflow: hidden; }
.signin-dialog h2 { margin: 12px 0 8px; font-size: 26px; }
.signin-dialog p { margin: 0 0 14px; line-height: 1.55; }
.signin-dialog .signin-reason { font-weight: 700; }
.signin-dialog .form-actions { justify-content: center; flex-wrap: wrap; margin: 20px 0 14px; }
.signin-dialog .small { margin: 0; color: var(--muted); }
.signin-mark { border-radius: 10px; }
.signin-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 24px;
  line-height: 1;
}
.signin-close:hover { background: var(--soft); }

/* --------------------------------------------------- explore next (home) */
.explore-next {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 16px 56px;
  align-items: center;
  margin: 28px 0 0;
  padding: 28px 32px;
  border-radius: 12px;
  background: var(--sage);
}
.explore-next h2 { margin: 0 0 8px; font-size: 26px; }
.explore-next-copy p:last-child { margin: 0; line-height: 1.5; }
.explore-next .home-kicker { margin-bottom: 8px; }
.explore-next-form { display: flex; flex-wrap: wrap; gap: 10px; }
.explore-next-form input {
  flex: 1 1 240px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--white);
}
.explore-next-status { flex-basis: 100%; margin: 0; }
.explore-next-status:empty { display: none; }
.explore-next-thanks { margin: 0; line-height: 1.5; }
@media (max-width: 760px) {
  .explore-next { grid-template-columns: 1fr; padding: 22px 18px; margin-top: 20px; }
  .explore-next-form .button { flex: 1 1 auto; }
  .rating-stars-host i { width: 30px; height: 30px; }
}
.account-subhead { font-size: 16px; margin: 28px 0 12px; }
.account-rows { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.account-rows li { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line); }
.account-rows li:first-child { border-top: 0; }
.account-rows li > a { flex: 1 1 200px; text-decoration: underline; text-underline-offset: 3px; }
.account-rows .small { color: var(--muted); }
.account-vote { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--sage); }
.account-vote.down { background: var(--warning); }

/* Search controls share one workspace on every collection and viewport. */
.search-entry { margin-bottom: 20px; }
.search-workspace { max-width: 900px; margin: 0 auto; padding-block: 16px 40px; }
.search-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; }
.search-controls .search { min-width: 0; }
.search-controls .search input { padding-right: 48px; }
.search-clear { position: absolute; right: 3px; top: 3px; width: 42px; height: 42px; border: 0; background: transparent; color: var(--ink); font-size: 24px; cursor: pointer; }
.search-cancel { padding: 12px 4px; }
.search-scope { display: flex; gap: 12px; align-items: center; grid-column: 1 / -1; font-size: 14px; }
.search-scope select { min-width: 180px; }
.search-state { min-height: min(50dvh, 420px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 32px 12px; gap: 12px; }
.search-state > .icon { width: 36px; height: 36px; color: var(--muted); }
.search-state h1 { font-size: clamp(25px,4vw,34px); margin: 0; }
.search-state p { max-width: 420px; margin: 0; color: var(--muted); }
.search-count { margin: 24px 0 8px; color: var(--muted); }
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results li { border-bottom: 1px solid var(--line); }
.search-results a { display: flex; align-items: center; gap: 18px; padding: 20px 8px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.search-results a:hover { background: rgb(24 62 48 / 5%); }
.search-results h3 { margin: 5px 0; font-size: 23px; }
.search-results p { margin: 0; color: var(--muted); }
.library-search.search input { height: 48px; border-radius: 6px; padding-left: 44px; font-size: inherit; }
.library-search.search .icon { width: 18px; height: 18px; left: 15px; }
.search-workspace :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }


.search-pages [aria-disabled="true"] { opacity:.45; }
.search-pages { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; }

.search-controls input::-webkit-search-cancel-button { -webkit-appearance: none; }
body.search-mode .site-footer { display:none; }
body.search-mode main { min-height:calc(100dvh - var(--header-h,150px)); }

body.search-mode .analytics-banner { display:none; }

@media (min-width: 761px) and (max-width: 1240px) {
  .menu-bar { gap:2px; }
  .menu-bar > li > .nav-link { padding-inline:10px; }
}

/* ------------------------------------------------------------ theme toggle */

.header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.header-tools .account-slot {
  margin-left: 0;
  min-width: 0;
}
.header-tools .theme-toggle,
.header-tools .account-slot {
  flex: none;
}
/* With the menu on the brand's row, a narrow tablet keeps the logo only. */
@media (min-width: 761px) and (max-width: 900px) {
  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------ header search */

/* A circle like the theme toggle. Open, it grows across the free row and the
   menu groups shrink to their icons in round outlines. */
.header-search {
  display: flex;
  align-items: center;
  flex: 0 1 44px;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  overflow: hidden;
  background: transparent;
  transition: flex-grow var(--header-motion), background-color 0.2s, border-color 0.2s;
}
.header-search:hover {
  background: var(--hover);
  border-color: var(--hover-line);
}
.header-search-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.header-search-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.header-search input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 100%;
  padding: 0 18px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  opacity: 0;
  transition: opacity 0.18s;
}
.header-search input::placeholder {
  color: var(--muted);
}
.header-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.header-search :focus-visible {
  outline: 0;
}
.header-search:has(.header-search-toggle:focus-visible) {
  outline: 3px solid var(--clay);
  outline-offset: 2px;
}
.site-header.search-open .header-search {
  flex-grow: 1;
  background: var(--white);
  border-color: var(--forest);
}
.site-header.search-open .header-search input {
  opacity: 1;
  transition: opacity 0.26s 0.12s;
}
/* The suggestions under the open field, as wide as the field and right-aligned
   with it; on a phone they span the header row. */
.header-tools {
  position: relative;
}
.header-typeahead {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--typeahead-right, 0px);
  z-index: 40;
  box-sizing: border-box;
  width: max(var(--typeahead-width, 420px), 380px);
  max-width: calc(100vw - 32px);
  max-height: min(520px, calc(100dvh - 120px));
  overflow: auto;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgb(var(--shadow-rgb) / 14%), 0 2px 6px rgb(var(--shadow-rgb) / 8%);
  text-align: left;
}
.header-typeahead[hidden] {
  display: none;
}
.header-typeahead-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-typeahead-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}
.header-typeahead-item:hover,
.header-typeahead-item[aria-selected="true"] {
  background: var(--hover);
}
.header-typeahead-item[aria-selected="true"] {
  outline: 2px solid var(--forest);
  outline-offset: -2px;
}
.header-typeahead-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--line);
}
.header-typeahead-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header-typeahead-copy {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}
.header-typeahead-title {
  overflow: hidden;
  font-weight: 600;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-typeahead-summary {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-typeahead-kind {
  flex: none;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}
.header-typeahead-state {
  margin: 0;
  padding: 12px 10px 6px;
  color: var(--muted);
  font-size: 14px;
}
.header-typeahead-all {
  display: block;
  margin-top: 4px;
  padding: 10px;
  border-top: 1px solid var(--line);
  color: var(--forest);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.header-typeahead-all:hover {
  text-decoration: underline;
}
@media (max-width: 760px) {
  .header-typeahead {
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 72px);
  }
  .header-typeahead-item {
    gap: 10px;
  }
  .header-typeahead-kind {
    padding: 2px 6px;
    font-size: 11px;
  }
}
@media (min-width: 761px) {
  .site-header.search-open .menu-trigger {
    padding-inline: 12.5px;
    border-color: var(--line-strong);
    border-radius: 22px;
  }
  .site-header.search-open .menu-trigger > svg:first-child {
    margin-right: 0;
  }
  .site-header.search-open .menu-text {
    grid-template-columns: 0fr;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header * {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
}
.theme-toggle:hover {
  background: var(--hover);
  border-color: var(--hover-line);
}
.theme-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The icon shows the mode a click switches to. */
.theme-icon--sun {
  display: none;
}
:root[data-theme="dark"] .theme-icon--sun {
  display: block;
}
:root[data-theme="dark"] .theme-icon--moon {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon--sun {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-icon--moon {
    display: none;
  }
}
@media (max-width: 760px) {
  /* On a phone the tools span the brand row so the search can open across
     it; the empty part of the row lets clicks through to the brand. */
  .site-header .header-tools {
    position: absolute;
    top: 8px;
    right: 16px;
    left: 16px;
    gap: 8px;
    pointer-events: none;
  }
  .site-header .header-tools > * {
    pointer-events: auto;
  }
  .header-search {
    flex-basis: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 18px;
  }
  .header-search-toggle {
    width: 34px;
    height: 34px;
  }
  .site-header.search-open .brand {
    opacity: 0;
    pointer-events: none;
  }
  .site-header .header-tools .account-slot {
    position: static;
  }
  .theme-toggle {
    width: 36px;
    height: 36px;
  }
}

.search-response { position: relative; }
.search-response[aria-busy="true"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--forest, #284b3b); opacity: .5; }
.search-result-image { width: 88px; height: 88px; flex: 0 0 88px; object-fit: cover; border-radius: 12px; background: var(--paper); }
.search-result-copy { min-width: 0; }
.search-result-kind { color: var(--muted); font-size: 12px; }
@media (max-width: 600px) { .search-result-image { width: 64px; height: 64px; flex-basis: 64px; } .search-results a { gap: 12px; } .search-results h3 { font-size: 20px; } }
.language-picker { position: relative; max-width: 420px; }
.language-picker-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.language-picker details { position: relative; }
.language-picker-trigger { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; list-style: none; }
.language-picker-trigger::-webkit-details-marker { display: none; }
.language-picker-trigger:focus-visible, .language-picker-options button:focus-visible, .language-picker-panel input:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.language-picker-chevron { margin-left: auto; font-size: 20px; line-height: 1; }
.language-picker-panel { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; width: min(440px, 90vw); max-height: min(420px, 65vh); overflow: hidden; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.language-picker-panel input { width: 100%; margin-bottom: 8px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); }
.language-picker-options { max-height: min(340px, 50vh); overflow-y: auto; }
.language-picker-options button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.language-picker-options button:hover { background: var(--hover); }
.language-picker-options button[aria-selected="true"] { background: var(--soft); font-weight: 700; }
.language-picker-tick { visibility: hidden; margin-left: 8px; color: var(--forest); font-size: 15px; }
.language-picker-options button[aria-selected="true"] .language-picker-tick { visibility: visible; }
.language-picker-options code { flex: none; }
.language-picker-options small { display: block; color: var(--muted); }
.language-picker-options code { margin-left: auto; color: var(--muted); font-size: 11px; }
.language-picker-flag { font-size: 24px; line-height: 1; }
.language-picker-empty { padding: 12px; color: var(--muted); }
.coming-date { color: var(--clay); font-weight: 700; }
.supporter-paywall { max-width: 660px; margin: 42px auto 64px; padding: clamp(22px, 5vw, 40px); border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 12px 36px rgba(24,62,48,.08); }
.supporter-paywall h2 { margin-top: 0; font-size: clamp(22px, 3vw, 30px); }
.supporter-paywall p { line-height: 1.6; }
.supporter-paywall .button { display: inline-flex; margin: 12px 16px 0 0; }
.supporter-paywall .text-link { display: inline-block; margin-top: 14px; }
.support-page { max-width: 760px; margin: clamp(28px, 6vw, 72px) auto; }
.support-page h1 { max-width: 12ch; }
.support-intro { max-width: 62ch; font-size: clamp(18px, 2.3vw, 22px); line-height: 1.55; }
.support-plan { margin: 36px 0 26px; padding: clamp(22px, 5vw, 42px); border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 12px 36px rgba(24,62,48,.08); }
.support-plan h2 { margin: 0; }
.support-price { margin: 16px 0 12px; color: var(--forest); font-size: clamp(36px, 5vw, 54px); font-weight: 700; line-height: 1.1; }
.support-price span { color: var(--muted); font-size: 17px; font-weight: 500; }
.support-plan ul { padding-left: 24px; line-height: 1.7; }
.support-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 25px; }
.support-actions .button { min-height: 46px; }
.support-action-status { flex-basis: 100%; margin: 0; color: var(--muted); }

/* ------------------------------------------------------ ingredient shelves */

/* The pantry: the shelves as tiles before any filter is chosen. */
.pantry { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 6px 0 28px; }
.pantry-tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--white); overflow: hidden; }
.pantry-main { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.pantry-main:hover .pantry-name { text-decoration: underline; }
.pantry-short { display: none; }
.pantry-image { display: block; aspect-ratio: 4 / 3; background: var(--soft); overflow: hidden; }
.pantry-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.pantry-main:hover .pantry-image img { transform: scale(1.03); }
.pantry-name { margin: 12px 14px 0; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.25; }
.pantry-count { margin: 2px 14px 0; font-size: 12px; color: var(--muted); }
.pantry-groups { margin: 8px 14px 14px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.pantry-groups a { color: var(--forest); text-decoration: none; }
.pantry-groups a:hover { text-decoration: underline; }

/* The shelf strip once a shelf, role or search is chosen. */
.shelf-browser { position: relative; margin: 6px 0 14px; }
.shelf-browser .tab-strip { margin: 0; }
.shelf-tab { color: var(--ink); text-decoration: none; gap: 8px; padding: 8px 12px; }
.shelf-tab:hover { text-decoration: none; }
.shelf-tab.active, .shelf-tab[aria-current] { border-bottom-color: var(--ink); font-weight: 700; }
.shelf-tab--all { padding: 8px 14px; }
.shelf-thumb, .group-thumb, .chip-thumb { flex: none; display: inline-block; border-radius: 50%; overflow: hidden; background: var(--soft); }
.shelf-thumb { width: 34px; height: 34px; }
.group-thumb { width: 36px; height: 36px; border-radius: 9px; }
.chip-thumb { width: 26px; height: 26px; margin: -4px 0 -4px -8px; }
.shelf-thumb img, .group-thumb img, .chip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-panels { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; }
.shelf-panel { padding: 16px 18px 18px; background: var(--white); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 14px 36px rgb(var(--shadow-rgb) / 14%), 0 2px 6px rgb(var(--shadow-rgb) / 8%); }
.shelf-panel-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px; }
.shelf-panel-head a { font-family: Georgia, "Times New Roman", serif; font-size: 20px; color: var(--ink); }
.shelf-panel-head span { font-size: 13px; color: var(--muted); }
.shelf-panel-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px; margin: 0; padding: 0; list-style: none; }
.shelf-panel-groups a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: 9px; color: var(--ink); font-size: 14px; text-decoration: none; }
.shelf-panel-groups a:hover, .shelf-panel-groups a:focus-visible { background: var(--soft); outline: none; }
.shelf-panel-name { flex: 1; min-width: 0; }
.shelf-groups { border-left: 0; padding-left: 0; margin-left: 0; }
a.chip { color: var(--ink); text-decoration: none; }
a.chip:hover { border-color: var(--hover-line); background: var(--hover); }
a.chip.active, a.chip.active:hover { color: var(--on-fill); background: var(--fill); border-color: var(--fill); }
@media (max-width: 640px) {
  .pantry { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
  .pantry-image { aspect-ratio: 1; }
  .pantry-name { margin: 7px 8px 0; font-size: 15px; }
  .pantry-full { display: none; }
  .pantry-short { display: inline; }
  .pantry-count { margin: 0 8px; font-size: 11px; }
  .pantry-groups { display: none; }
  .pantry-tile { padding-bottom: 8px; border-radius: 12px; }
  .shelf-tab { flex-direction: column; gap: 4px; padding: 8px 8px 6px; font-size: 12px; }
  .shelf-tab .tab-count { display: none; }
  .shelf-thumb { width: 40px; height: 40px; }
  .shelf-groups { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .shelf-groups::-webkit-scrollbar { display: none; }
  .shelf-groups .chip { flex: none; }
}

/* Reading stays available while the reader decides whether to translate. The
   offered language is the dialog's voice; the language on screen glosses it
   underneath, small, for a reader who does not speak what is being offered. */
.language-offer { position: fixed; z-index: 1100; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(30rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px 24px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 28px 64px rgb(var(--shadow-rgb) / 24%), 0 2px 8px rgb(var(--shadow-rgb) / 10%); animation: language-offer-in 0.28s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.language-offer:focus { outline: none; }
.language-offer :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@keyframes language-offer-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(0.985); } }

.language-offer-primary h2 { margin: 0 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1.25; font-weight: 400; }
.language-offer-primary p { margin: 8px 0; font-size: 15px; line-height: 1.5; }
.language-offer-primary p:last-child { color: var(--muted); }
.language-offer-primary a { color: var(--muted); font-size: 12px; }

.language-offer-secondary { margin: 16px 0 0; padding-inline-start: 12px; border-inline-start: 2px solid var(--line); color: var(--muted); }
.language-offer-secondary p { margin: 4px 0; font-size: 12.5px; line-height: 1.45; }
.language-offer-secondary p:empty { display: none; }

.language-offer .form-actions { gap: 10px; margin-top: 20px; }
.language-offer .button { flex: 1 1 11rem; flex-direction: column; align-items: center; gap: 2px; padding: 11px 16px; white-space: normal; text-align: center; font-size: 14px; }
.language-offer .button > span { display: flex; align-items: center; justify-content: center; gap: 7px; line-height: 1.3; }
.language-offer-action-flag { flex: none; font-size: 17px; font-style: normal; line-height: 1; }
.language-offer .button > span em { font-style: normal; }
.language-offer .button > small { display: block; margin-top: 3px; color: inherit; font-size: 12px; font-weight: 400; line-height: 1.3; opacity: 0.82; }
.language-offer .button > small[hidden] { display: none; }
.language-offer .button:disabled { opacity: 0.6; cursor: progress; }

.language-offer-close { position: absolute; inset: 10px 10px auto auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.language-offer-close:hover { background: var(--hover); color: var(--ink); }

.language-offer-status { margin: 12px 0 0; color: var(--muted); }
.language-offer-status > span { display: block; font-size: 13px; }
.language-offer-status > small { display: block; font-size: 11.5px; }
.language-offer-status:has(span:empty) { display: none; }

@media (prefers-reduced-motion: reduce) { .language-offer { animation: none; } }
@media (max-width: 480px) {
  .language-offer { inset: auto 0 0 0; transform: none; width: auto; max-height: 88dvh; border-width: 1px 0 0; border-radius: 18px 18px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); animation-name: language-offer-rise; }
  .language-offer-primary h2 { font-size: 20px; }
  .language-offer .button { flex-basis: 100%; }
}
@keyframes language-offer-rise { from { opacity: 0; transform: translateY(16px); } }

/* A pending presentation contains no source body or accessible source labels. */
html[data-presentation-pending] body > :not(main):not(script):not(svg):not(.page-presentation-status):not(.language-offer) { visibility:hidden!important; pointer-events:none!important; }
main[hidden], [data-presentation-shell][hidden] { display:none!important; }
/* Waiting for a translation: say what is happening, then hold the shape of the
   page that is coming, so the wait reads as the page arriving, not as a fault. */
.page-presentation-status { width: min(100% - 3rem, 90rem); margin: 3rem auto; }
.translation-placeholder { position: relative; padding: 8px 0 32px; }
.translation-placeholder-body { margin: 2rem auto; width: min(100%, 72rem); }
.translation-placeholder-compact { padding: 4px 0 8px; }

.translation-placeholder-status { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.translation-placeholder-status .loading-spinner { width: 18px; height: 18px; border-width: 2px; }
.translation-placeholder-compact .translation-placeholder-status { margin-bottom: 14px; font-size: 13px; }
.translation-placeholder.is-error .translation-placeholder-status { color: var(--clay); }
.translation-placeholder.is-error .translation-skeleton { opacity: 0.35; }
.translation-placeholder-compact [data-presentation-retry] { margin-top: 20px; }

/* The wait itself sits over the shape of the page, so the reader has one place
   to look: the mark, what is happening, how far it has got, and the way out.
   One grid cell holds both, so the card needs no offset to find the middle and
   stays there however tall the page under it turns out to be. */
.translation-placeholder:not(.translation-placeholder-compact) { display: grid; }
.translation-placeholder > .translation-skeleton,
.translation-placeholder > .translation-wait { grid-area: 1 / 1; }
.translation-wait {
  position: sticky;
  top: calc(var(--header-h) + 14vh);
  align-self: start;
  justify-self: center;
  /* Clear of the heading and its line of detail, so the shape of the page is
     still readable around the card rather than hidden under it. */
  margin-block-start: 96px;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 26rem);
  padding: 28px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 10px 40px -12px rgb(var(--shadow-rgb) / 22%);
  text-align: center;
}
.translation-wait-mark { border-radius: 16px; animation: translation-mark-pop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes translation-mark-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.translation-wait .translation-placeholder-status { justify-content: center; margin: 0; }
.translation-wait .translation-progress { margin: 0; }
.translation-wait .translation-placeholder-note { margin: 0; text-align: center; }
/* The count is the only number the reader is given, so it never guesses: it is
   absent until the page knows how many passages it is waiting for. */
.translation-wait-count { margin: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.translation-wait-count[hidden] { display: none; }
.translation-wait-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.translation-wait-actions:empty { display: none; }

/* Which of the three stages is running, as a shape rather than a word. */
.translation-stages { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.translation-stages li { width: 26px; height: 4px; border-radius: 2px; background: var(--soft); transition: background-color 0.3s ease; }
.translation-stages li.is-done { background: var(--forest); }
.translation-stages li.is-current { background: var(--forest); animation: translation-stage-pulse 1.3s ease-in-out infinite; }
@keyframes translation-stage-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.translation-placeholder-note { max-width: 46ch; margin: -14px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.translation-placeholder-note[hidden] { display: none; }
.translation-progress { width: min(100%, 22rem); height: 4px; margin: 0 0 24px; border-radius: 2px; background: var(--soft); overflow: hidden; }
.translation-progress[hidden] { display: none; }
.translation-progress > span { display: block; block-size: 100%; inline-size: 3%; border-radius: 2px; background: var(--forest); transition: inline-size 0.5s ease; }
@media (prefers-reduced-motion: reduce) { .translation-progress > span { transition: none; } }
.translation-placeholder-compact .translation-placeholder-note,
.translation-placeholder-compact .translation-progress { display: none; }

.translation-skeleton { display: grid; gap: 13px; }
.translation-skeleton span { display: block; height: 13px; border-radius: 4px; background-color: var(--line); background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--white) 75%, transparent), transparent); background-size: 280px 100%; background-repeat: no-repeat; animation: translation-shimmer 1.4s ease-in-out infinite; }
/* The shape of the page that is coming: a heading, a line of detail, a picture
   and the prose. A stack of identical bars reads as a fault; this reads as the
   page the reader asked for, arriving. */
.translation-skeleton .translation-skeleton-title { height: 38px; width: 62%; margin-bottom: 4px; border-radius: 7px; }
.translation-skeleton .translation-skeleton-meta { height: 11px; width: 28%; margin-bottom: 14px; }
.translation-skeleton .translation-skeleton-media { height: clamp(180px, 34vh, 320px); width: 100%; margin-bottom: 18px; border-radius: 12px; }
.translation-skeleton .translation-skeleton-line:nth-of-type(4n + 1) { width: 78%; margin-bottom: 20px; }
.translation-skeleton .translation-skeleton-line:nth-of-type(4n + 3) { width: 92%; }
.translation-skeleton .translation-skeleton-line:last-child { width: 56%; margin-bottom: 0; }
.translation-placeholder-compact .translation-skeleton { gap: 10px; }
.translation-placeholder-compact .translation-skeleton span:first-child { height: 15px; width: 64%; margin-bottom: 0; }
.translation-placeholder-compact .translation-skeleton span:nth-child(2) { height: 11px; width: 88%; margin-bottom: 0; }
.translation-placeholder-compact .translation-skeleton span:nth-child(3) { height: 11px; width: 52%; margin-bottom: 0; }
@keyframes translation-shimmer { from { background-position: -320px 0; } to { background-position: calc(100% + 320px) 0; } }
@media (prefers-reduced-motion: reduce) {
  .translation-skeleton span { animation: none; background-image: none; }
  .translation-wait-mark,
  .translation-stages li.is-current { animation: none; }
  .translation-stages li { transition: none; }
}

/* A phone has no room to float the wait over a full-height picture. */
@media (max-width: 640px) {
  .translation-wait { top: calc(var(--header-h) + 16px); width: 100%; margin-block-start: 84px; padding: 22px 16px 20px; }
  .translation-skeleton-media { height: clamp(150px, 26vh, 240px); }
}
.language-offer-primary p:empty,
.language-offer-primary p[hidden] { display: none; }