/* ============================================================
   herbsandspices.food — theme layer over Bootstrap 5.3
   Light theme only. Palette from the garden and the spice
   rack: rosemary and basil greens, chilli reds, a thread of
   saffron gold, on a pale parchment ground.
   ============================================================ */

:root {
  --sp-green-950: #10271d;
  --sp-green-900: #173a28;
  --sp-green-800: #1f5235;
  --sp-green-700: #2c6842;
  --sp-green-600: #397c4c;
  --sp-basil:     #4f9860;
  --sp-basil-300: #9bc49c;
  --sp-basil-200: #c6ddc3;
  --sp-basil-100: #e3efe0;

  --sp-chilli-700: #852b1d;
  --sp-chilli-600: #a83a25;
  --sp-chilli-500: #ca4b2f;
  --sp-chilli-400: #e36a43;
  --sp-chilli-200: #f3c5b2;
  --sp-saffron:    #d09a36;
  --sp-saffron-200: #f0d49a;

  --sp-cream-100: #f7f9f4;
  --sp-cream-200: #e9f0e3;
  --sp-cream-300: #d3dfc9;
  --sp-line: #d4dccb;

  --sp-bg: var(--sp-cream-100);
  --sp-surface: #ffffff;
  --sp-surface-2: var(--sp-cream-200);
  --sp-text: #1c2317;
  --sp-muted: #5b6450;
  --sp-link: #a43b27;
  --sp-link-hover: #ca4b2f;
  --sp-border: var(--sp-line);
  --sp-shadow: 0 10px 11px -1px rgba(0, 0, 0, 0.15);

  --sp-serif: "Bitter", Georgia, "Times New Roman", serif;
  --sp-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bs-link-color-rgb: 164, 59, 39;
  --bs-link-hover-color-rgb: 202, 75, 47;
}


/* ---------------------------------------------------------- base */

body {
  background-color: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--sp-sans);
  font-size: 1rem;
  line-height: 1.65;
  background-image:
    url("../img/page-pattern.svg"),
    radial-gradient(ellipse 42rem 30rem at 8% 8%, rgba(79, 152, 96, 0.5), transparent 70%),
    radial-gradient(ellipse 34rem 28rem at 92% 15%, rgba(202, 75, 47, .20), transparent 72%),
    radial-gradient(ellipse 38rem 26rem at 52% 82%, rgba(208, 154, 54, .09), transparent 72%);
  background-size: 520px 360px, auto, auto, auto;
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, .font-serif { font-family: var(--sp-serif); letter-spacing: -0.01em; }

a { color: var(--sp-link); text-decoration-color: color-mix(in srgb, var(--sp-link) 35%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--sp-link-hover); }

::selection { background: var(--sp-saffron-200); color: var(--sp-green-900); }

.sp-shell { max-width: 1440px; margin: 0 auto; }

/* ---------------------------------------------------------- masthead */

/* Warm near-black with a faint scatter of thyme sprigs, closed by a band of
   spice-rack colours. Design handoff: background 2a, wordmark 3e. */
.sp-masthead, .sp-footer {
  --sp-mh-bg: #26221e;
  --sp-mh-herb: #a9c47f;
  --sp-mh-spice: #ee8a4f;
  --sp-mh-action: #c9502c;
  --sp-mh-light: #f4eee4;
  --sp-mh-muted: #cfc7bb;
  --sp-mh-dim: #8f877b;
  --sp-mh-input: #faf7f1;
}
.sp-masthead {
  position: sticky; top: 0; z-index: 1030;
  background-color: var(--sp-mh-bg);
  background-image: url("../img/thyme-pattern.svg");
  background-size: 200px 120px;
  background-repeat: repeat;
  /* dropped by the band's depth, so the shadow starts under the spice band */
  box-shadow: 0 6px 16px rgb(0 0 0 / 62%), 0 6px 4px -2px rgb(0 0 0 / 39%);
}
/* the spice band: eight equal segments, 6px deep, directly under the header */
.sp-masthead::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px;
  background: linear-gradient(90deg,
    #d9a52b 0 12.5%, #c9502c 12.5% 25%, #7f9a5b 25% 37.5%, #8a4a2b 37.5% 50%,
    #e07b2e 50% 62.5%, #6e7a3c 62.5% 75%, #b8452a 75% 87.5%, #c99a5b 87.5% 100%);
}
/* the band hangs below the header box, so leave room for it before the page */
.sp-masthead + * { margin-top: 6px; }

/* header content lines up with the page container below it: same .sp-shell
   width and gutters, while the dark background runs edge to edge */

.sp-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.sp-brand-mark { width: 60px; height: 60px; flex: none; display: block; object-fit: contain; }
.sp-brand-text { display: flex; flex-direction: column; gap: 4px; }
/* A band of light sweeps once across the masthead logo as each page loads: over the
   bowl, then along the wordmark. Each .sp-shine is a copy clipped to its shape (the
   bowl's outline by mask, the letters by background-clip), so only the logo lights up
   and never the dark ground around it. */
.sp-brand-mark-wrap { position: relative; flex: none; display: block; }
.sp-wordmark { position: relative; }
.sp-shine {
  position: absolute; inset: 0; pointer-events: none; user-select: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .9) 50%, transparent 58%) no-repeat;
  background-size: 250% 100%; background-position: 100% 0;
  animation: sp-shine .9s ease-in-out both;
}
.sp-shine-mark {
  -webkit-mask: url("../img/bowl.png") center / contain no-repeat;
  mask: url("../img/bowl.png") center / contain no-repeat;
  animation-delay: .3s; animation-duration: .6s;
}
.sp-shine-word {
  white-space: nowrap; text-shadow: none;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation-delay: .6s;
}
.sp-shine-word span { color: transparent; }
/* 100% to 0% walks the band from just off the left edge to just off the right */
@keyframes sp-shine { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .sp-shine { display: none; } }
.sp-wordmark {
  font-family: var(--sp-serif);
  font-size: 36px; line-height: 1; letter-spacing: -.01em; font-weight: 400;
  white-space: nowrap; color: var(--sp-mh-light);
  text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}
.sp-wordmark-herbs { color: var(--sp-mh-herb); font-weight: 700; }
.sp-wordmark-and { color: var(--sp-mh-light); }
.sp-wordmark-spices { color: var(--sp-mh-spice); font-weight: 700; }
.sp-wordmark-food { color: var(--sp-mh-dim); font-weight: 400; }

.sp-tagline {
  font-family: var(--sp-sans); font-style: normal;
  font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sp-mh-muted);
  text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

/* logo + wordmark on the left, the main links in the middle, search on the right */
.sp-masthead-inner {
  min-height: 100px;
  display: flex; align-items: center; gap: 32px;
}
.sp-masthead .sp-search { flex: 1 1 auto; width: 300px; max-width: 300px; }
.sp-masthead-actions { display: flex; align-items: center; gap: .5rem; }

.sp-mainnav { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: 4px; }
.sp-mainnav-link {
  display: inline-block; border: 0; background: none; border-radius: 4px;
  padding: 6px 12px; font-size: 16px; font-weight: 500; line-height: 1.4;
  color: var(--sp-mh-light); white-space: nowrap;
}
.sp-mainnav-link:hover, .sp-mainnav-link:focus-visible, .sp-mainnav-link[aria-expanded=true] {
  background: rgba(244, 238, 228, .1); color: #fff;
}
.sp-mainnav-link.is-active { color: var(--sp-mh-herb); box-shadow: inset 0 -2px 0 var(--sp-mh-spice); border-radius: 4px 4px 0 0; }
.sp-mainnav-link.dropdown-toggle::after { vertical-align: .15em; margin-left: .4em; }
.sp-tools-menu {
  --bs-dropdown-bg: var(--sp-mh-bg);
  --bs-dropdown-color: var(--sp-mh-light);
  --bs-dropdown-border-color: rgba(244, 238, 228, .18);
  --bs-dropdown-link-color: var(--sp-mh-light);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: rgba(244, 238, 228, .1);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--sp-mh-action);
  --bs-dropdown-item-padding-y: .45rem;
  margin-top: 10px !important;
  box-shadow: 0 10px 28px rgb(0 0 0 / 45%);
}
.sp-tools-menu .dropdown-item span { display: inline-block; width: 1.5em; }

.sp-masthead a { text-decoration: none; }

.sp-search .input-group { flex-wrap: nowrap; }
.sp-search .form-control {
  background: var(--sp-mh-input); color: var(--sp-text);
  border: 0; border-radius: 4px 0 0 4px; padding: 8px 12px; font-size: 16px;
}
.sp-search .form-control::placeholder { color: #8a8275; }
.sp-search .form-control:focus { background: #fff; box-shadow: 0 0 0 .2rem rgba(238, 138, 79, .45); }
.sp-search .btn {
  background: var(--sp-mh-action); color: #fff; font-weight: 600;
  border: 0; border-radius: 0 4px 4px 0; padding: 8px 14px; font-size: 16px;
}
.sp-search .btn:hover, .sp-search .btn:focus-visible { background: #b8452a; color: #fff; }

.sp-search-toggle {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; margin-left: auto; padding: 0;
  border: 1px solid rgba(244, 238, 228, .35); border-radius: 6px;
  background: none; color: var(--sp-mh-light);
}
.sp-search-toggle:hover, .sp-search-toggle:focus-visible, .sp-search-toggle[aria-expanded=true] {
  background: rgba(244, 238, 228, .1); color: #fff;
}
.sp-search-toggle[aria-expanded=true] { border-color: var(--sp-mh-action); }

.sp-masthead .btn-outline-light { color: var(--sp-mh-light); border-color: rgba(244, 238, 228, .5); }
.sp-masthead .btn-outline-light:hover { color: var(--sp-mh-bg); background: var(--sp-mh-light); }

/* Below xl the three do not fit across: logo and search share the first row
   and the links run underneath. */
@media (max-width: 1199.98px) {
  .sp-masthead-inner { flex-wrap: wrap; gap: 10px 16px; padding-block: 14px; min-height: 0; }
  .sp-masthead-actions { order: 2; margin-left: auto; }
  .sp-mainnav { order: 3; flex: 1 0 100%; justify-content: flex-start; margin-left: -12px; }
}
@media (max-width: 767.98px) {
  .sp-masthead-actions { flex: 1 0 100%; }
  .sp-masthead .sp-search { width: auto; max-width: none; }
}
@media (max-width: 575.98px) {
  .sp-brand { gap: 10px; }
  .sp-brand-mark { width: 44px; height: 44px; }
  .sp-wordmark { font-size: 24px; }
  .sp-tagline { display: none; }   /* no room beside the logo on a phone */
  /* wordmark and the search button, then the links; the search row between them
     only once the button opens it */
  .sp-masthead-inner { gap: 10px; }
  .sp-brand { flex: 1 1 auto; }
  .sp-search-toggle { display: inline-flex; order: 1; }
  .sp-masthead-actions { display: none; }
  .sp-search-open .sp-masthead-actions { display: flex; }
  .sp-mainnav-link { padding: 6px 10px; font-size: 15px; }
}


/* ---------------------------------------------------------- sidebar */

.sp-sidebar { font-size: .9rem; }
.sp-sidebar .sp-panel { margin-bottom: 1rem; }
/* narrower gutters than a content panel: the column is only a sixth of the page */
.sp-sidebar .sp-panel-pad { padding: 1rem .8rem; }
.sp-sidebar h6 {
  font-family: var(--sp-sans);
  text-transform: uppercase; letter-spacing: .09em; font-size: .7rem;
  color: var(--sp-muted); margin: 0 0 .5rem;
}
/* Tighter than body text: a label that wraps ("Buying, storing & kit") should
   read as one item, not two lines of prose. The icon keeps a fixed column so
   wrapped text lines up under the first line. */
.sp-sidebar .nav-link {
  color: var(--sp-link); padding: .28rem .45rem; border-radius: .35rem;
  display: flex; align-items: flex-start; gap: .45rem; line-height: 1.3;
}
/* Emoji come from the emoji font, whose ascent and descent differ from Inter's;
   left as plain inline text, some of them (🧺, ℹ️) stretch their line and open
   a gap around that one item. A fixed-height box keeps every row the same. */
.sp-sidebar .nav-link > span:first-child {
  flex: none; width: 1.25rem; height: 1.3em;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
/* Plain block lists, not Bootstrap's flex column. As a flex column, the list
   sized each item from a measurement taken before its width was final; labels
   that nearly fill the row ("Buying, storing & kit") wrapped in that
   measurement and were given a two-line box they never used, leaving an 18px
   gap under them. Block layout sizes each item from its real line count. */
.sp-sidebar .nav.flex-column { display: block; }
.sp-sidebar .nav > li { display: block; }
.sp-sidebar .nav-link > .sp-nav-badge { margin-left: auto; align-self: center; }
.sp-sidebar .nav-link:hover { background: var(--sp-surface-2); color: var(--sp-link-hover); }
.sp-sidebar .nav-link.active { background: var(--sp-basil-100); color: var(--sp-green-900); font-weight: 600; }

/* No height cap and no sticky positioning here on purpose: the sidebar is as
   tall as its contents. With eleven sections it can exceed a laptop window, and
   a stuck element taller than the viewport hides its own bottom for good. */

/* The one exception: an article's contents, last in the sidebar, sticks just under the
   masthead once scrolled to, level with the pinned article header, and is capped to the window so it scrolls itself
   rather than hiding its end. The section being read is lit by spicypedia.js. */
.sp-side-toc {
  --sp-side-toc-top: calc(var(--sp-masthead-h, 0px) + 1rem);
  position: sticky; top: var(--sp-side-toc-top);
  max-height: calc(100vh - var(--sp-side-toc-top) - 1rem); overflow-y: auto;
  overscroll-behavior: contain;
}
.sp-side-toc ol { list-style: none; padding-left: 0; margin: 0; counter-reset: toc; }
.sp-side-toc ol ol { padding-left: 1rem; }
.sp-side-toc li { counter-increment: toc; }
.sp-side-toc a {
  display: flex; gap: .35rem; padding: .22rem .45rem; border-radius: .35rem;
  line-height: 1.3; text-decoration: none;
}
.sp-side-toc a::before { content: counters(toc, "."); color: var(--sp-muted); flex: none; }
.sp-side-toc a:hover { background: var(--sp-surface-2); color: var(--sp-link-hover); }
.sp-side-toc a.active { background: var(--sp-basil-100); color: var(--sp-green-900); font-weight: 600; }

/* ---------------------------------------------------------- panels & cards */

.sp-panel {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: .6rem;
  box-shadow: var(--sp-shadow);
}
.sp-panel-pad { padding: 1.15rem 1.35rem; }
.sp-panel-head {
  font-family: var(--sp-serif); font-size: 1.05rem; font-weight: 600;
  padding: .6rem 1.1rem; margin: 0;
  background: var(--sp-surface-2);
  border-bottom: 1px solid var(--sp-border);
  border-radius: .55rem .55rem 0 0;
  display: flex; align-items: center; gap: .5rem; justify-content: space-between;
}

.sp-card-link {
  display: block; text-decoration: none; color: inherit; height: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sp-card-link:hover {
  transform: translateY(-2px);
  border-color: var(--sp-chilli-400);
  box-shadow: 0 6px 22px rgba(18, 52, 25, .14);
  color: inherit;
}
.sp-card-icon { font-size: 1.7rem; line-height: 1; }

/* Link tiles laid edge to edge inside a panel, sharing their borders. The grid runs 1px past
   the clipping wrapper so the outermost right and bottom borders fall under the panel's own. */
.sp-tiles { overflow: hidden; border-radius: 0 0 .55rem .55rem; }
.sp-tiles-grid {
  display: grid; grid-template-columns: 1fr;
  margin: 0 -1px -1px 0;
}
@media (min-width: 576px) { .sp-tiles-grid { grid-template-columns: 1fr 1fr; } }
.sp-tile {
  display: block; padding: 1.1rem 1.35rem;
  text-decoration: none; color: inherit;
  border-right: 1px solid var(--sp-border); border-bottom: 1px solid var(--sp-border);
  transition: background-color .15s ease;
}
.sp-tile:hover, .sp-tile:focus-visible { background: #f2f3f1; color: inherit; }

/* ---------------------------------------------------------- article */

.sp-article { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: .6rem; box-shadow: var(--sp-shadow); }

/* Decoration only, on every page: a sprig of basil at the far right, just under the
   masthead, over whatever it reaches (the top-right corner of the first panel on
   most screens).
   Drawn by design/basil-corner.py, shown at 80% size. */
.sp-basil { display: none; }
@media (min-width: 992px) {
  .sp-basil { display: block; position: relative; height: 0; pointer-events: none; }
  .sp-basil::before {
    content: ""; position: absolute; top: -6px; right: 0; z-index: 1015;   /* over the sticky article header */
    width: 266px; height: 240px;
    background: url("../img/basil-corner.svg") no-repeat top right / contain;
  }
}
/* Until the page is wide enough for the basil to hang in the margin, keep the top
   panel's title, buttons and filters clear of the shoot down its right edge. */
@media (min-width: 992px) and (max-width: 1599.98px) {
  .sp-article > .sp-article-head, .sp-article > .sp-article-intro, .sp-panel > .sp-family-head,
  main > .sp-panel:first-child:not(:has(> .sp-family-head)), main > .sp-hero:first-child { padding-right: 6.5rem; }
  main > .alert-dismissible:first-child .btn-close { right: 5rem; }
  /* a control right at the top, where the basil's leaves spread widest */
  .sp-basil-clear { margin-right: 6rem; }
}
.sp-article-head { padding: 1.5rem 1.75rem .75rem; border-bottom: 1px solid var(--sp-border); }
/* On an article the breadcrumb, tags and title stay pinned under the masthead
   (--sp-masthead-h is set by spicypedia.js) so the page's name is always in view; the
   subtitle and "From herbsandspices.food" line under them scroll away. */
.sp-article-head.sp-article-pin {
  padding-bottom: .4rem; border-bottom: 0;
  position: sticky; top: var(--sp-masthead-h, 0); z-index: 1010;
  background: var(--sp-surface); border-radius: .6rem .6rem 0 0;
  transition: box-shadow .15s ease;
}
.sp-article-pin.is-stuck { border-radius: 0; box-shadow: 0 1px 0 var(--sp-border), 0 6px 14px -6px rgba(0, 0, 0, .18); }
/* the page's photo, faded in at the far right once pinned; it sits over the header's
   padding, kept wide for it (the same room the basil takes), so showing it moves nothing */
.sp-article-pin.has-thumb { padding-right: 6.5rem; }
.sp-pin-thumb {
  position: absolute; right: 1.75rem; top: 50%; width: 72px; height: 72px;
  object-fit: cover; border-radius: .5rem; border: 1px solid var(--sp-border);
  opacity: 0; visibility: hidden; transform: translateY(-50%) scale(.9);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.sp-article-pin.is-stuck .sp-pin-thumb {
  opacity: 1; visibility: visible; transform: translateY(-50%);
  transition: opacity .15s ease, transform .15s ease;
}
@media (max-width: 575.98px) {
  .sp-article-pin.has-thumb { padding-right: 5rem; }
  .sp-pin-thumb { width: 56px; height: 56px; right: 1rem; }
}
.sp-article-intro { padding: 0 1.75rem .75rem; border-bottom: 1px solid var(--sp-border); }
.sp-article-intro > :first-child { margin-top: 0; }
.sp-article-intro .sp-article-tags-intro { justify-content: flex-start; margin: 0 0 .5rem; }
.sp-article-editbar { padding: 1rem 1.75rem 0; }
/* a jump to a heading lands below the pinned header, not under it */
.sp-article-body [id] { scroll-margin-top: calc(var(--sp-article-head-h, 0px) + var(--sp-masthead-h, 0px) + 1rem); }
.sp-article-body { padding: 1.5rem 1.75rem 2rem; }

/* breadcrumb on the left, the page's tags on the right */
.sp-article-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; }
.sp-article-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; margin-left: auto; }
.sp-title { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); margin: 0; font-weight: 700; }
.sp-subtitle { color: var(--sp-muted); font-style: italic; margin-top: .2rem; }
.sp-redirected { font-size: .84rem; color: var(--sp-muted); margin-top: .15rem; }
.sp-meanings li { margin-bottom: .45rem; }
.sp-from { font-size: .84rem; color: var(--sp-muted); margin-top: .35rem; }

.sp-prose { font-size: 1.02rem; }
.sp-prose > p:first-of-type { font-size: 1.1rem; }
.sp-prose h2 {
  font-size: 1.6rem; margin: 2rem 0 .75rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--sp-border);
}
.sp-prose h3 { font-size: 1.22rem; margin: 1.5rem 0 .5rem; }
.sp-prose h4 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; color: var(--sp-muted); }
.sp-prose ul, .sp-prose ol { padding-left: 1.4rem; }
.sp-prose li { margin-bottom: .3rem; }
.sp-prose blockquote {
  border-left: 4px solid var(--sp-basil-300); padding: .35rem 0 .35rem 1rem;
  margin: 1.2rem 0; color: var(--sp-muted); font-style: italic;
}
/* The wrapper is its own formatting context, so it sits beside the floated
   infobox (narrowing to the space left) instead of dropping below it. */
.sp-table-wrap {
  overflow-x: auto; margin: 1.25rem 0;
  border: 1px solid var(--sp-border); border-radius: .4rem;
}
.sp-prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: .95rem; }
.sp-prose th {
  background: var(--sp-surface-2); text-align: left; font-family: var(--sp-serif);
  font-weight: 600;
}
.sp-prose th, .sp-prose td { padding: .5rem .7rem; border-bottom: 1px solid var(--sp-border); }
.sp-prose tbody tr:last-child td { border-bottom: 0; }
.sp-prose code {
  background: var(--sp-surface-2); padding: .1rem .35rem; border-radius: .25rem;
  font-size: .9em; color: var(--sp-green-700);
}
.sp-prose hr { border-color: var(--sp-border); opacity: 1; margin: 2rem 0; }

/* glossary definition lists */
.sp-prose dl { margin: 1rem 0 1.5rem; }
.sp-prose dt {
  font-family: var(--sp-serif);
  font-weight: 600;
  color: var(--sp-green-700);
  margin-top: .9rem;
}
.sp-prose dt + dt { margin-top: 0; }          /* terms sharing one definition */
.sp-prose dd {
  margin: .15rem 0 0;
  padding: 0 0 .6rem 1.1rem;
  border-left: 2px solid var(--sp-border);
  margin-left: .25rem;
}
.sp-prose dd > p { margin-bottom: .4rem; }

.sp-prose .headerlink {
  opacity: 0; margin-left: .4rem; text-decoration: none; font-size: .7em; color: var(--sp-chilli-500);
}
.sp-prose h2:hover .headerlink, .sp-prose h3:hover .headerlink { opacity: 1; }

.wikilink-missing { color: #b03a2e !important; text-decoration-style: dotted; }

.wiki-figure {
  margin: 1.4rem 0; background: var(--sp-surface-2); border: 1px solid var(--sp-border);
  border-radius: .5rem; padding: .5rem; text-align: center;
}
.wiki-figure img { max-width: 100%; height: auto; border-radius: .35rem; }
.wiki-figure figcaption { font-size: .85rem; color: var(--sp-muted); padding: .5rem .4rem 0; }

/* ---------------------------------------------------------- callouts */

.callout {
  border: 1px solid var(--sp-border); border-left: 10px solid var(--sp-saffron);
  background: var(--sp-surface-2); border-radius: .5rem;
  padding: .9rem 1.1rem; margin: 1.35rem 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout-title {
  font-family: var(--sp-serif); font-weight: 600; margin: 0 0 .4rem; font-size: 1rem;
}
.callout-warning { border-left-color: #c9512b; }
.callout-fix { border-left-color: #2f7d8c; }
.callout-science { border-left-color: #5a5fb8; }
.callout-history { border-left-color: #8a6a3a; }
.callout-swap { border-left-color: var(--sp-basil); }

/* ---------------------------------------------------------- infobox & toc */

.sp-infobox {
  width: 100%; font-size: .88rem;
  background: var(--sp-surface-2); border: 1px solid var(--sp-border); border-radius: .5rem;
  overflow: hidden; margin-bottom: 1.25rem; box-shadow: var(--sp-shadow);
}
@media (min-width: 992px) {
  .sp-infobox { float: right; width: 310px; margin: 0 0 1.25rem 1.5rem; }
}
.sp-infobox-title {
  background: linear-gradient(180deg, var(--sp-green-700), var(--sp-green-800));
  color: var(--sp-cream-200); font-family: var(--sp-serif); font-weight: 600;
  padding: .55rem .85rem; text-align: center;
}
.sp-infobox img { width: 108%; height: auto; display: block; margin-left: -10px; }
.sp-infobox-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sp-infobox-zoom:focus-visible { outline: 3px solid var(--sp-saffron); outline-offset: -3px; }

/* The enlarged infobox photo. The shade starts below the sticky masthead
   (--sp-lightbox-top is set by spicypedia.js) and sits under it in z-order. */
.sp-lightbox {
  position: fixed; inset: var(--sp-lightbox-top, 0) 0 0 0; z-index: 1020;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.5rem 16px; background: rgba(28, 35, 23, .55); cursor: zoom-out;
  animation: sp-lightbox-in .15s ease-out;
}
.sp-lightbox[hidden] { display: none; }
.sp-lightbox img {
  max-width: min(100%, 1100px); max-height: calc(100% - 3rem); object-fit: contain;
  border-radius: .5rem; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); background: var(--sp-surface);
}
.sp-lightbox-cap { color: #fff; font-size: .9rem; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); max-width: 60ch; }
.sp-lightbox-close {
  position: absolute; top: .75rem; right: .75rem; width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}
.sp-lightbox-close:hover { background: rgba(0, 0, 0, .75); }
body.sp-lightbox-open { overflow: hidden; }

/* Hover enlargement of a description card's thumbnail (spicypedia.js places it). */
.sp-thumb-preview {
  position: fixed; top: 0; left: 0; z-index: 1025; width: 260px; height: 260px;
  padding: 4px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: .6rem;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .25); pointer-events: none;
  opacity: 0; visibility: hidden; transform: scale(.96);
  transition: opacity .12s ease-out, transform .12s ease-out, visibility 0s linear .12s;
}
.sp-thumb-preview.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sp-thumb-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: .4rem; display: block; }
.sp-card-thumb[data-sp-preview] { cursor: zoom-in; }

/* Hover card for links to other pages, like Wikipedia's page previews (spicypedia.js). */
.sp-link-preview {
  position: fixed; top: 0; left: 0; z-index: 1025; width: 380px; max-width: calc(100vw - 16px);
  display: flex; align-items: flex-start; gap: .85rem; padding: .85rem;
  background: var(--sp-surface); color: var(--sp-text); text-decoration: none;
  border: 1px solid var(--sp-border); border-radius: .6rem; box-shadow: 0 14px 32px rgba(0, 0, 0, .2);
  font-size: .86rem; line-height: 1.45;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s ease-out, transform .12s ease-out, visibility 0s linear .12s;
}
.sp-link-preview.is-above { transform: translateY(-4px); }
.sp-link-preview.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sp-link-preview:hover { color: var(--sp-text); }
.sp-link-preview-text { flex: 1 1 auto; min-width: 0; }
.sp-link-preview strong { display: block; font-family: var(--sp-serif); font-size: 1.05rem; font-weight: 600; margin-bottom: .1rem; }
.sp-link-preview em { display: block; color: var(--sp-muted); margin-bottom: .35rem; }
.sp-link-preview-text > span {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-link-preview img { display: none; flex: 0 0 110px; width: 110px; height: 110px; object-fit: cover; border-radius: .4rem; }
.sp-link-preview.has-thumb img { display: block; }
@media (prefers-reduced-motion: reduce) { .sp-link-preview { transition: none; } }
@media (prefers-reduced-motion: reduce) { .sp-thumb-preview { transition: none; } }
@keyframes sp-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sp-lightbox { animation: none; } }

.sp-infobox .cap { padding: .45rem .7rem; font-size: .8rem; color: var(--sp-muted); text-align: center; }
.sp-infobox table { width: 100%; }
.sp-infobox th {
  text-align: left; padding: .4rem .7rem; width: 42%; vertical-align: top;
  color: var(--sp-muted); font-weight: 600; border-top: 1px solid var(--sp-border);
}
.sp-infobox td { padding: .4rem .7rem; border-top: 1px solid var(--sp-border); }

.sp-toc {
  background: var(--sp-surface-2); border: 1px solid var(--sp-border); border-radius: .5rem;
  padding: .85rem 1rem; font-size: .9rem; margin-bottom: 1.5rem; display: inline-block; min-width: 260px;
}
.sp-toc-title { font-family: var(--sp-serif); font-weight: 600; margin-bottom: .35rem; }
.sp-toc ol { list-style: none; padding-left: 0; margin: 0; counter-reset: toc; }
.sp-toc ol ol { padding-left: 1.1rem; }
.sp-toc li { counter-increment: toc; margin: .15rem 0; }
.sp-toc li::before { content: counters(toc, ".") "\00a0 "; color: var(--sp-muted); }

/* ---------------------------------------------------------- bits & pieces */

.sp-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--sp-surface-2); border: 1px solid var(--sp-border);
  color: var(--sp-muted); border-radius: 999px; padding: .12rem .6rem;
  font-size: .76rem; text-decoration: none;
}
a.sp-badge:hover { border-color: var(--sp-chilli-400); color: var(--sp-link-hover); }

.sp-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 88% 30%, rgba(214, 48, 29, .45), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(156, 207, 124, .25), transparent 55%),
    linear-gradient(135deg, var(--sp-green-800), var(--sp-green-950));
  color: var(--sp-cream-200);
  border-radius: .75rem; padding: 2rem 2.25rem; border: 1px solid var(--sp-green-700);
  box-shadow: 0 10px 11px -1px rgba(0, 0, 0, 0.35);
}
.sp-hero-mark { max-height: 180px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .4)); object-fit: contain; }
.sp-hero h1 { color: #fff; font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.7rem); text-shadow: 0 0 5px rgba(0, 0, 0, .4); }
.sp-hero .lead { text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
.sp-hero .btn-spice { box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }

.btn-spice {
  background: linear-gradient(180deg, var(--sp-chilli-400), var(--sp-chilli-600));
  border: 1px solid var(--sp-chilli-700); color: #fff; font-weight: 600;
}
.btn-spice:hover, .btn-spice:focus-visible { background: linear-gradient(180deg, #f27450, var(--sp-chilli-500)); color: #fff; border-color: var(--sp-chilli-700); }
.btn-outline-spice { border: 1px solid var(--sp-chilli-500); color: var(--sp-link); font-weight: 600; }
.btn-outline-spice:hover { background: var(--sp-chilli-500); border-color: var(--sp-chilli-500); color: #fff; }

.sp-letter-nav a {
  display: inline-block; min-width: 2rem; text-align: center; padding: .15rem .35rem;
  border: 1px solid var(--sp-border); border-radius: .35rem; margin: .12rem; text-decoration: none;
  background: var(--sp-surface);
}
.sp-letter-nav a.active { background: var(--sp-chilli-500); color: #fff; border-color: var(--sp-chilli-600); font-weight: 700; }

.sp-result { border-bottom: 1px solid var(--sp-border); padding: .9rem 0; }
.sp-result:last-child, .sp-result.is-last { border-bottom: 0; }
/* each result has its page's photo on the left, the text beside it; a page with
   no photo gets a faint site logo instead, so the text still lines up */
.sp-result-thumbed { display: grid; grid-template-columns: 96px 1fr; column-gap: 1.1rem; }
.sp-result-thumbed > :not(a:first-child) { grid-column: 2; }
.sp-result-thumbed > a:first-child { grid-row: 1 / span 4; }
.sp-result-thumb {
  display: block; width: 96px; height: 96px; object-fit: cover; border-radius: .5rem;
  border: 1px solid var(--sp-border); background: var(--sp-surface-2);
}
.sp-result-thumb--none { display: grid; place-items: center; }
.sp-result-thumb--none img { opacity: .18; filter: grayscale(1); }
@media (max-width: 575.98px) {
  .sp-result-thumbed { grid-template-columns: 72px 1fr; column-gap: .85rem; }
  .sp-result-thumb { width: 72px; height: 72px; }
  .sp-result-thumb--none img { width: 48px; height: 48px; }
}
/* page buttons under the search results, in the site's chilli colours */
.sp-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 1rem; }
.sp-page {
  min-width: 2.4rem; padding: .35rem .75rem; border-radius: .45rem; font-weight: 600;
  border: 1px solid var(--sp-border); background: var(--sp-surface); color: var(--sp-link);
}
.sp-page:hover:not(:disabled):not(.is-current) { border-color: var(--sp-chilli-400); color: var(--sp-link-hover); }
.sp-page.is-current { background: var(--sp-chilli-500); border-color: var(--sp-chilli-600); color: #fff; }
.sp-page:disabled { opacity: .45; cursor: default; }
.sp-result mark { background: var(--sp-saffron-200); color: inherit; padding: 0 .1rem; }

/* ---------------------------------------------------------- finder */

.sp-chip { position: relative; }
.sp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sp-chip span {
  display: inline-block; cursor: pointer; user-select: none;
  border: 1px solid var(--sp-border); background: var(--sp-surface);
  border-radius: 999px; padding: .3rem .85rem; font-size: .88rem;
  transition: all .12s ease;
}
.sp-chip span:hover { border-color: var(--sp-chilli-400); }
.sp-chip input:checked + span {
  background: linear-gradient(180deg, var(--sp-basil), var(--sp-green-600));
  border-color: var(--sp-green-700); color: #fff; font-weight: 600;
}
.sp-chip input:focus-visible + span { outline: 2px solid var(--sp-chilli-500); outline-offset: 2px; }

/* Relevance is shown with a real top rule and a keyed dot, not an inset shadow. */
.sp-match {
  --sp-relevance: #8b927b;
  border-top: 10px solid var(--sp-relevance);
}
.sp-match.ready { --sp-relevance: var(--sp-basil); }
.sp-match.nearly { --sp-relevance: var(--sp-saffron); }
.sp-match.stretch { --sp-relevance: #8b927b; }
.sp-relevance-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--sp-border); border-radius: 999px;
  background: var(--sp-surface-2); color: var(--sp-text);
  padding: .18rem .55rem; font-size: .75rem; font-weight: 600;
  line-height: 1.2; white-space: nowrap;
}
.sp-relevance-badge::before {
  content: ""; width: .55rem; height: .55rem; flex: none;
  border-radius: 50%; background: var(--sp-relevance);
}

/* ---------------------------------------------------------- polls */

.sp-poll-question {
  font-family: var(--sp-serif);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: .75rem;
}

.sp-poll-choice { display: block; margin-bottom: .3rem; cursor: pointer; }
.sp-poll-choice input { margin-right: .5rem; accent-color: var(--sp-chilli-500); }
.sp-poll-choice span { font-size: .93rem; }
.sp-poll-choice:hover span { color: var(--sp-link-hover); }

.sp-poll-result {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .3rem .55rem;
  margin-bottom: .3rem;
  border: 1px solid var(--sp-border);
  border-radius: .3rem;
  background: var(--sp-surface);
  overflow: hidden;
  font-size: .9rem;
}
.sp-poll-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--sp-basil-200), var(--sp-basil-300));
  transition: width .5s ease;
}
.sp-poll-result.is-mine { border-color: var(--sp-green-600); font-weight: 600; }
.sp-poll-label, .sp-poll-pct { position: relative; }
.sp-poll-pct { color: var(--sp-muted); font-variant-numeric: tabular-nums; }
.sp-poll-result.is-mine .sp-poll-pct { color: var(--sp-green-800); }

.sp-poll-peek summary { cursor: pointer; color: var(--sp-link); }
.sp-poll-peek summary:hover { color: var(--sp-link-hover); }

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

/* The header's warm near-black and thyme sprigs, with the same spice band
   along the top edge, so the page is bracketed by a matching pair. */
.sp-footer {
  margin-top: calc(3rem + 6px); padding: 2rem 0; color: var(--sp-mh-muted); font-size: .88rem;
  position: relative;
  background-color: var(--sp-mh-bg);
  background-image: url("../img/thyme-pattern.svg");
  background-size: 200px 120px;
  background-repeat: repeat;
  /* the header's shadow turned upwards, lifted clear of the spice band */
  box-shadow: 0 -6px 16px rgb(0 0 0 / 62%), 0 -6px 4px -2px rgb(0 0 0 / 39%);
}
.sp-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6px;
  background: linear-gradient(90deg,
    #d9a52b 0 12.5%, #c9502c 12.5% 25%, #7f9a5b 25% 37.5%, #8a4a2b 37.5% 50%,
    #e07b2e 50% 62.5%, #6e7a3c 62.5% 75%, #b8452a 75% 87.5%, #c99a5b 87.5% 100%);
}
.sp-footer a { color: var(--sp-mh-herb); text-decoration: none; }
.sp-footer a:hover { color: #fff; }
/* The Browse and Sections link lists, a step up from the footer's small body text. */
.sp-footer .list-unstyled { font-size: 1rem; }
.sp-footer .list-unstyled li + li { margin-top: .15rem; }
.sp-footer h6 { color: var(--sp-mh-dim) !important; }
.sp-footer hr { border-color: rgba(244, 238, 228, .18) !important; }

.sp-footer-brand { display: inline-flex; margin-bottom: 1rem; }
.sp-footer-brand .sp-brand-mark { width: 54px; height: 54px; }
.sp-footer-brand .sp-wordmark { font-size: 28px; }

/* ---------------------------------------------------------- admin */

.sp-admin-bar {
  background: var(--sp-green-700); color: var(--sp-cream-200);
  border-bottom: 1px solid var(--sp-saffron); font-size: .88rem;
}
.sp-admin-bar a { color: var(--sp-saffron-200); text-decoration: none; }
.sp-admin-bar a:hover { color: #fff; }
.sp-stat { text-align: center; padding: 1rem .5rem; }
.sp-stat .n { font-family: var(--sp-serif); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--sp-green-700); }
.sp-stat .l { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-muted); }

.sp-editor {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9rem; line-height: 1.6; tab-size: 2;
  /* Fills the window below the masthead and the form's own header. The editor
     script then grows it past this to fit the whole article, so the only
     scrollbar is the page's rather than one inside a small box. */
  min-height: calc(100vh - 15rem);
  resize: vertical;
}
.sp-preview { min-height: calc(100vh - 15rem); }

/* The cheatsheet sits in a narrow sidebar, and its examples are long enough to
   push it out of shape otherwise. */
.sp-cheatsheet code { overflow-wrap: anywhere; }
.sp-cheatsheet p { line-height: 1.45; }

/* ---------------------------------------------------------- christmas mode */

/* A string of lights hung across the very top of the window. Fixed rather than
   in the flow so it stays put while the sticky masthead scrolls beneath it, and
   pointer-events: none so it can never swallow a click on the header. */
.sp-fairylights {
  --sp-span: 58px;                 /* one swag of wire, and one bulb */
  --sp-bulb: 11px;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1035;                   /* over the masthead (1030), under a modal */
  height: 40px;
  display: flex;
  overflow: hidden;
  pointer-events: none;
  /* The wire is the bottom of a large circle, tiled: it dips between bulbs. */
  background-image: radial-gradient(circle at 50% -40px,
                    transparent 0 51px, rgba(0, 0, 0, .55) 51px 53px, transparent 53px);
  background-size: var(--sp-span) 22px;
  background-repeat: repeat-x;
}

.sp-fairylights i { flex: 0 0 var(--sp-span); position: relative; }

.sp-fairylights i::before {        /* the socket it hangs from */
  content: "";
  position: absolute; top: 12px; left: 50%;
  width: 4px; height: 6px; margin-left: -2px;
  border-radius: 0 0 1px 1px;
  background: rgba(0, 0, 0, .6);
}

.sp-fairylights i::after {         /* the bulb */
  content: "";
  position: absolute; top: 17px; left: 50%;
  width: var(--sp-bulb); height: calc(var(--sp-bulb) + 4px);
  margin-left: calc(var(--sp-bulb) / -2);
  border-radius: 48% 48% 52% 52% / 38% 38% 62% 62%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .9), transparent 42%),
    var(--c);
  box-shadow: 0 0 7px 1px var(--c), 0 0 18px 5px var(--glow);
  animation: sp-twinkle 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* Five colours on repeat, each starting its cycle at a different point so the
   string breathes rather than blinking in unison. */
.sp-fairylights i:nth-child(5n+1) { --c: #e2403b; --glow: rgba(226, 64, 59, .45);  --d: 0s; }
.sp-fairylights i:nth-child(5n+2) { --c: #f0b429; --glow: rgba(240, 180, 41, .45); --d: -.7s; }
.sp-fairylights i:nth-child(5n+3) { --c: #43a047; --glow: rgba(67, 160, 71, .45);  --d: -1.4s; }
.sp-fairylights i:nth-child(5n+4) { --c: #3d7fd6; --glow: rgba(61, 127, 214, .45); --d: -2.1s; }
.sp-fairylights i:nth-child(5n+5) { --c: #c451b5; --glow: rgba(196, 81, 181, .45); --d: -2.8s; }
.sp-fairylights i:nth-child(2n)::after { animation-duration: 4.1s; }

@keyframes sp-twinkle {
  0%, 100% { opacity: 1; }
  45%      { opacity: .5; }
}

/* A slow fade is gentle, but honour the preference all the same: the lights
   stay lit, they just stop pulsing. */
@media (prefers-reduced-motion: reduce) {
  .sp-fairylights i::after { animation: none; }
}

/* ---------------------------------------------------------- submissions */

/* Submitted text is shown as typed and never rendered as markup: it is a
   stranger's words, and the admin area is not the place to start running them
   through a renderer. */
.sp-submission-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--sp-surface-2);
  border-radius: .4rem;
  padding: .75rem .9rem;
  font-size: .94rem;
}

/* The honeypot field: out of sight without display:none, which some bots skip. */
.sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media print {
  .sp-basil { display: none !important; }
  .sp-masthead, .sp-sidebar, .sp-footer, .sp-no-print, .sp-fairylights { display: none !important; }
  .sp-article { border: 0; box-shadow: none; }
}

/* ---------------------------------------------------------- heat ladder */

.sp-ladder { list-style: none; margin: 0; padding: .6rem .75rem .4rem; }
.sp-rung { margin: 0; }
.sp-rung-btn {
  display: grid; grid-template-columns: 7.2rem 1fr; align-items: center; gap: .6rem;
  width: 100%; padding: .22rem .35rem; border: 0; border-radius: .35rem;
  background: none; text-align: left; font-size: .84rem; color: var(--sp-text);
  cursor: pointer; transition: background .15s ease;
}
.sp-rung-btn:hover { background: var(--sp-surface-2); }
.sp-rung-btn:focus-visible { outline: 2px solid var(--sp-saffron); outline-offset: 1px; }
.sp-rung-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-rung-track { height: .72rem; border-radius: 999px; background: var(--sp-cream-200); overflow: hidden; }
.sp-rung-bar {
  display: block; height: 100%; border-radius: 999px;
  width: var(--w); background: linear-gradient(90deg, hsl(105 55% 45%), hsl(var(--h) 78% 46%));
  transform-origin: left center;
}
.sp-rung.is-active .sp-rung-btn { background: var(--sp-basil-100); font-weight: 600; }
.sp-rung.is-active .sp-rung-bar { box-shadow: 0 0 10px hsl(var(--h) 90% 55% / .7); }

/* bars grow in once, when the ladder scrolls into view */
.sp-ladder.is-armed .sp-rung-bar { transform: scaleX(0); }
.sp-ladder.is-lit .sp-rung-bar {
  transform: scaleX(1);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 55ms);
}

.sp-heat-readout {
  margin: 0 .75rem .75rem; padding: .65rem .85rem; border-radius: .5rem;
  background: linear-gradient(135deg, var(--sp-green-800), var(--sp-green-900));
  color: var(--sp-cream-200); min-height: 5.6rem;
}
.sp-heat-readout .n { font-family: var(--sp-serif); font-weight: 700; color: #fff; font-size: 1.05rem; }
.sp-heat-readout .shu { color: var(--sp-saffron-200); font-variant-numeric: tabular-nums; font-size: .85rem; }
.sp-heat-readout .v { font-size: .82rem; color: var(--sp-chilli-200); }
.sp-heat-readout p { margin: .2rem 0 0; font-size: .82rem; }
.sp-heat-readout a { color: var(--sp-basil-200); }

@media (prefers-reduced-motion: reduce) {
  .sp-ladder.is-armed .sp-rung-bar { transform: none; }
  .sp-ladder.is-lit .sp-rung-bar { transition: none; }
}

/* ---------------------------------------------------------- heat meters */

/* The same scale and colour ramp as the Heat Ladder. The solid fill runs to
   the bottom of a range and a paler band carries on to the top. Faint ticks
   mark each tenfold step in Scoville units. */
.sp-heat { padding: .55rem .75rem .6rem; border-bottom: 1px solid var(--sp-border); background: var(--sp-surface); }
/* under the photo and caption in an infobox: rule above, and the fact table's
   own top border closes it below */
.sp-infobox .sp-heat { border-bottom: 0; border-top: 1px solid var(--sp-border); }
.sp-infobox-title + .sp-heat { border-top: 0; }
.sp-heat-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .3rem; }
.sp-heat-k { font-weight: 600; color: var(--sp-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.sp-heat-v { font-weight: 600; font-size: .84rem; font-variant-numeric: tabular-nums; text-align: right; }
.sp-heat-track {
  position: relative; display: block; height: .7rem; border-radius: 999px; overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(22.5% - 1px), rgba(0,0,0,.08) 22.5%, transparent calc(22.5% + 1px)),
    linear-gradient(90deg, transparent calc(40.9% - 1px), rgba(0,0,0,.08) 40.9%, transparent calc(40.9% + 1px)),
    linear-gradient(90deg, transparent calc(59.4% - 1px), rgba(0,0,0,.08) 59.4%, transparent calc(59.4% + 1px)),
    linear-gradient(90deg, transparent calc(77.8% - 1px), rgba(0,0,0,.08) 77.8%, transparent calc(77.8% + 1px)),
    var(--sp-cream-200);
}
.sp-heat-fill, .sp-heat-range { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; }
.sp-heat-fill {
  width: var(--lo); z-index: 2;
  background: linear-gradient(90deg, hsl(105 55% 45%), hsl(var(--hl) 78% 46%));
}
.sp-heat-range {
  width: var(--hi); z-index: 1;
  background: linear-gradient(90deg, hsl(105 55% 45% / .35), hsl(var(--h) 78% 46% / .55));
}
.sp-heat.is-none .sp-heat-fill { background: var(--sp-basil-300); }
.sp-heat-foot { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; font-size: .75rem; color: var(--sp-muted); }
.sp-heat-foot a { white-space: nowrap; }

.sp-heat--compact { padding: .55rem 0 0; border: 0; background: none; }
.sp-heat--compact .sp-heat-head { margin-bottom: .2rem; }
.sp-heat--compact .sp-heat-k { font-size: .7rem; }
.sp-heat--compact .sp-heat-v { font-size: .76rem; }
.sp-heat--compact .sp-heat-track { height: .5rem; }

/* ---------------------------------------------------------- chilli compare */

.cmp-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; vertical-align: -.05em; }

.cmp-band-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; flex-wrap: wrap; }
.cmp-band-name { font-weight: 600; font-size: .9rem; }
.cmp-band-range { font-size: .78rem; color: var(--sp-muted); }
.cmp-band-all {
  margin-left: auto; border: 0; background: none; padding: 0;
  font-size: .78rem; color: var(--sp-link); text-decoration: underline; text-underline-offset: 2px;
}
.cmp-band-all:hover { color: var(--sp-link-hover); }

.cmp-toggle { display: inline-flex; border: 1px solid var(--sp-border); border-radius: .4rem; overflow: hidden; }
.cmp-toggle button {
  border: 0; background: var(--sp-surface); padding: .2rem .6rem;
  font-family: var(--sp-sans); font-size: .78rem; color: var(--sp-muted);
}
.cmp-toggle button + button { border-left: 1px solid var(--sp-border); }
.cmp-toggle button.is-on { background: var(--sp-green-700); color: #fff; font-weight: 600; }

.cmp-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .78rem; color: var(--sp-muted); margin-bottom: .75rem; }
.cmp-legend i { display: inline-block; width: .8rem; height: .5rem; border-radius: 2px; margin-right: .35rem; vertical-align: .05em; }
.cmp-legend i.cmp-legend-jal { width: 0; height: .75rem; border-left: 2px dotted var(--sp-green-700); border-radius: 0; vertical-align: -.1em; }

/* the range chart: name | track | value, one row per chilli */
/* each row is its own grid on the same fixed columns, so rows line up and each
   one is a real box that can take hover and focus */
.cmp-grid { --cmp-cols: 10.5rem 1fr 5.5rem; }
.cmp-row { display: grid; grid-template-columns: var(--cmp-cols); column-gap: .75rem; border-radius: .35rem; }
.cmp-group {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--sp-muted); padding: .6rem 0 .2rem;
}
.cmp-group:first-child { padding-top: 0; }
.cmp-row > * { padding: .28rem 0; }
.cmp-name { font-size: .86rem; line-height: 1.25; align-self: center; }
.cmp-row:not(.cmp-axis) > .cmp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-track { position: relative; min-height: 1.4rem; }
.cmp-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--sp-cream-300); }
.cmp-ref { position: absolute; top: 0; bottom: 0; border-left: 2px dotted var(--sp-green-700); opacity: .55; }
.cmp-bar {
  position: absolute; top: 50%; height: 12px; margin-top: -6px; min-width: 8px;
  border-radius: 4px; transition: left .35s ease, width .35s ease;
}
.cmp-val { font-size: .8rem; color: var(--sp-muted); font-variant-numeric: tabular-nums; text-align: right; align-self: center; white-space: nowrap; }
.cmp-row.is-hot > .cmp-name, .cmp-row:focus-visible > .cmp-name { color: var(--sp-link-hover); text-decoration: underline; }
.cmp-row.is-hot .cmp-bar { filter: brightness(1.12); box-shadow: 0 0 0 2px var(--sp-surface), 0 0 0 3px currentColor; }
.cmp-row:focus { outline: none; }
.cmp-row:focus-visible { outline: 2px solid var(--sp-saffron); outline-offset: 1px; }
.cmp-row.is-hot { background: var(--sp-basil-100); }
.cmp-axis > * { padding-top: .35rem; border-top: 1px solid var(--sp-cream-300); }
.cmp-axis .cmp-name { font-size: .72rem; color: var(--sp-muted); }
.cmp-axis .cmp-track { min-height: 1.1rem; }
.cmp-tick {
  position: absolute; top: .35rem; transform: translateX(-50%);
  font-size: .72rem; color: var(--sp-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cmp-tick:first-child { transform: none; }
.cmp-tick:last-child { transform: translateX(-100%); }
@media (max-width: 575.98px) {
  .cmp-grid { --cmp-cols: 6.5rem 1fr 4.2rem; }
  .cmp-row { column-gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .cmp-bar { transition: none; } }

/* heat-group columns */
.cmp-cols { display: flex; align-items: flex-end; gap: .5rem; height: 12rem; }
.cmp-col {
  flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  border: 0; background: none; padding: 0; min-width: 0; cursor: pointer;
}
.cmp-col-val { font-size: .74rem; color: var(--sp-muted); font-variant-numeric: tabular-nums; text-align: center; margin-bottom: .2rem; }
.cmp-col-stack { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 24px; margin: 0 auto; min-height: 4px; }
.cmp-col-rest { opacity: .28; border-radius: 4px 4px 0 0; min-height: 0; }
.cmp-col-on { min-height: 0; }
.cmp-col-stack > :first-child { border-radius: 4px 4px 0 0; }
.cmp-col-name { font-size: .72rem; line-height: 1.15; color: var(--sp-text); text-align: center; margin-top: .3rem; min-height: 2.3em; }
.cmp-col:hover .cmp-col-stack, .cmp-col:focus-visible .cmp-col-stack { filter: brightness(1.1); }
.cmp-col:focus-visible { outline: 2px solid var(--sp-saffron); outline-offset: 2px; border-radius: 4px; }

.cmp-bandtable th { font-weight: 600; width: 45%; }
.cmp-bandtable th, .cmp-bandtable td { background: transparent; }

.cmp-table-wrap { overflow-x: auto; }
.cmp-table { font-size: .88rem; }
.cmp-table th { font-family: var(--sp-serif); font-weight: 600; background: var(--sp-surface-2); white-space: nowrap; }
.cmp-table td, .cmp-table th { padding: .5rem .75rem; }
.cmp-table td { vertical-align: middle; }
.cmp-name { display: inline-flex; align-items: center; gap: .6rem; min-width: 10rem; }
.cmp-thumb { width: 60px; height: 60px; flex: none; object-fit: cover; border-radius: .35rem; border: 1px solid var(--sp-border); background: var(--sp-surface-2); }
.cmp-num { font-variant-numeric: tabular-nums; }

.cmp-tip {
  position: absolute; z-index: 1040; pointer-events: none; max-width: 18rem;
  background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: .45rem;
  box-shadow: 0 6px 20px rgba(18, 52, 25, .16); padding: .45rem .65rem;
  display: flex; flex-direction: column; gap: .1rem; font-size: .8rem;
}
.cmp-tip-v { font-size: .95rem; color: var(--sp-text); font-variant-numeric: tabular-nums; }
.cmp-tip-n { color: var(--sp-text); }
.cmp-tip-m { color: var(--sp-muted); }

/* ---------------------------------------------------------- card thumbnails */

/* A small square photo on a category card, floated so the title and summary
   wrap beside it and the heat meter runs full width underneath. */
.sp-card-thumb {
  float: right; width: 80px; height: 80px; object-fit: cover;
  margin: 0 0 .4rem .85rem; border-radius: .45rem;
  border: 1px solid var(--sp-border); background: var(--sp-surface-2);
}
.sp-card-thumbed .sp-heat { clear: both; }

/* "Similar to" cards under an article: photo, kind, name and why, with a heat
   meter underneath when the page has one, on the same scale as everywhere else. */
.sp-similar-card {
  display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; align-items: start;
  padding: .75rem .85rem;
}
.sp-similar-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: .4rem;
  border: 1px solid var(--sp-border); background: var(--sp-surface-2);
}
.sp-similar-text { grid-column: 2; min-width: 0; }
.sp-similar-card:not(:has(.sp-similar-thumb)) .sp-similar-text { grid-column: 1 / -1; }
.sp-similar-heat { grid-column: 1 / -1; }

/* ---------------------------------------------------------- plant families */

/* The index reads as a tree: each wider group is a panel, each order a branch
   (a line down its left) with its families hanging off it as tiles. */
.sp-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem 1.25rem; }
.sp-tree-order { border-left: 2px solid var(--sp-basil-200); padding-left: .8rem; }
.sp-tree-label { margin-bottom: .45rem; line-height: 1.3; }
.sp-tree-families { display: grid; gap: .5rem; }
.sp-family-tile {
  display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem;
  background: var(--sp-surface-2); border: 1px solid var(--sp-border); border-radius: .5rem;
  color: var(--sp-text); text-decoration: none;
}
.sp-family-tile:hover { color: var(--sp-text); border-color: var(--sp-basil-300); }
.sp-family-photos { display: flex; margin-bottom: .35rem; min-height: 40px; }
.sp-family-photos img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sp-surface); }
.sp-family-photos img + img { margin-left: -10px; }
.sp-family-name { font-weight: 600; font-size: 1.02rem; }
.sp-family-head { border-bottom: 1px solid var(--sp-border); }
/* ---------------------------------------------------------- the Facts page's mosaic

   Ten cards, each in its section's colour (--acc). The lead card is dark with its photo
   fading in from the right; the seventh has its photo down the left; the rest are
   numbered cards with a small photo by the link. Laid out by the width of the content
   column: one column, then two, then a twelve-track mosaic. */
.sp-facts-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.sp-fact-grid-wrap { container-type: inline-size; }
.sp-fact-grid {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@container (min-width: 520px) {
  .sp-fact-grid { grid-template-columns: 1fr 1fr; }
  .sp-fact--photo, .sp-fact:nth-child(6), .sp-fact:nth-child(10) { grid-column: span 2; }
}
@container (min-width: 820px) {
  .sp-fact-grid { grid-template-columns: repeat(12, 1fr); }
  .sp-fact, .sp-fact:nth-child(6), .sp-fact:nth-child(10) { grid-column: span 4; }
  .sp-fact:nth-child(1) { grid-column: span 7; }
  .sp-fact:nth-child(2) { grid-column: span 5; }
  .sp-fact:nth-child(6) { grid-column: span 5; }
  .sp-fact:nth-child(7) { grid-column: span 7; }
}

.sp-fact {
  --acc: var(--sp-green-600);
  position: relative; overflow: hidden; display: flex;
  background: var(--sp-surface); border: 1px solid var(--sp-border); border-top: 4px solid var(--acc);
  border-radius: .7rem; box-shadow: var(--sp-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: sp-fact-in .5s ease-out both; animation-delay: calc(var(--i, 0) * 70ms);
}
.sp-fact:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -8px rgba(18, 52, 25, .28); }
.sp-fact[data-cat="herbs"] { --acc: var(--sp-basil); }
.sp-fact[data-cat="chillies"] { --acc: var(--sp-chilli-500); }
.sp-fact[data-cat="spices"] { --acc: #b07a1e; }
.sp-fact[data-cat="blends"] { --acc: var(--sp-chilli-700); }
.sp-fact[data-cat="pastes-and-sauces"] { --acc: var(--sp-green-800); }
.sp-fact[data-cat="history"], .sp-fact[data-cat="records"] { --acc: #8a5a2b; }
.sp-fact[data-cat="science"], .sp-fact[data-cat="safety"] { --acc: #3d6f8f; }
.sp-fact[data-cat="world-cuisines"] { --acc: #b0572a; }

.sp-fact-body { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.25rem 1.2rem; flex: 1; }
.sp-fact-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sp-fact-num {
  font-family: var(--sp-serif); font-weight: 700; font-size: 2.3rem; line-height: 1;
  color: var(--acc); font-variant-numeric: lining-nums;
}
.sp-fact-cat {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent);
  border-radius: 999px; padding: .2rem .6rem; white-space: nowrap;
}
.sp-fact-text { margin: 0; line-height: 1.55; }
.sp-fact-link {
  margin-top: auto; display: flex; align-items: center; gap: .5rem;
  font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--acc);
}
.sp-fact-link img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--sp-border); }
/* the whole card is the link: the overlay runs past the body and the card clips it */
.sp-fact-link::after { content: ""; position: absolute; inset: -100vmax; }
.sp-fact-link:hover span, .sp-fact-link:focus-visible span { text-decoration: underline; }

/* photo cards: the photo on top in one column, beside the text once there is room */
.sp-fact--photo { flex-direction: column; }
.sp-fact-photo { display: block; width: 100%; height: 190px; object-fit: cover; }
@container (min-width: 520px) {
  .sp-fact--photo { flex-direction: row; }
  .sp-fact-photo { position: absolute; top: 0; bottom: 0; width: 42%; height: 100%; }
  .sp-fact--photo:not(.sp-fact--lead) .sp-fact-photo { left: 0; }
  .sp-fact--photo:not(.sp-fact--lead) .sp-fact-body { margin-left: 42%; }
  .sp-fact--lead .sp-fact-photo {
    right: 0; width: 48%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%);
  }
  .sp-fact--lead .sp-fact-body { margin-right: 40%; }
}
.sp-fact--photo:not(.sp-fact--lead) { background: color-mix(in srgb, var(--acc) 6%, var(--sp-surface)); }
.sp-fact--lead { background: var(--sp-green-900); border-color: var(--sp-green-900); border-top-color: var(--sp-saffron); color: #f4eee4; }
.sp-fact--lead .sp-fact-num { color: var(--sp-saffron); font-size: 3.2rem; }
.sp-fact--lead .sp-fact-cat { color: var(--sp-saffron-200); background: rgba(244, 238, 228, .1); }
.sp-fact--lead .sp-fact-text { font-family: var(--sp-serif); font-size: 1.25rem; line-height: 1.5; }
.sp-fact--lead .sp-fact-link { color: var(--sp-saffron-200); }

/* translate, not transform, so the finished animation leaves the hover lift alone */
@keyframes sp-fact-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) { .sp-fact { animation: none; transition: none; } }
.sp-badge-strong { border-color: var(--sp-basil-300); background: var(--sp-basil-100); }
/* the article form's similar-page rows; a seeded draft is flagged until touched */
.sim-row .sim-draft-flag { display: none; color: var(--sp-muted); }
.sim-row.sim-draft { border-color: var(--sp-saffron) !important; background: color-mix(in srgb, var(--sp-saffron) 7%, transparent); }
.sim-row.sim-draft .sim-draft-flag { display: block; }
@media (max-width: 575.98px) { .sp-card-thumb { width: 64px; height: 64px; } }

/* the "show as" switch on the herbs, chillies and spices pages */
.sp-view-toggle { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.sp-view-toggle a {
  padding: .1rem .55rem; border: 1px solid var(--sp-border); border-radius: .35rem;
  text-decoration: none; background: var(--sp-surface);
}
.sp-view-toggle a.active { background: var(--sp-chilli-500); color: #fff; border-color: var(--sp-chilli-600); font-weight: 700; }

/* the image-gallery view: a big square photo, the name, and the heat meter */
.sp-gallery-card { display: flex; flex-direction: column; overflow: hidden; }
.sp-gallery-img {
  display: block; aspect-ratio: 1; overflow: hidden;
  border-bottom: 1px solid var(--sp-border); background: var(--sp-surface-2);
}
/* grown 10px past each edge and clipped, to trim the frame some photos carry */
.sp-gallery-img img {
  display: block; width: calc(100% + 20px); height: calc(100% + 20px);
  margin: -10px; max-width: none; object-fit: cover;
}
.sp-gallery-img--none { display: grid; place-items: center; font-size: 3rem; }
.sp-gallery-body { padding: .65rem .8rem .75rem; }

/* ---------------------------------------------------------- spice-routes map */

.sp-map { margin: 1.5rem 0 2rem; }
.sp-map-routes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.sp-map-route-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--sp-border); background: var(--sp-surface); color: var(--sp-text);
  border-radius: 999px; padding: .28rem .75rem; font-size: .82rem; line-height: 1.2;
}
.sp-map-route-btn i { width: 1.1rem; height: 3px; border-radius: 2px; flex: none; }
.sp-map-route-btn small { color: var(--sp-muted); font-size: .72rem; }
.sp-map-route-btn:hover { border-color: var(--sp-green-600); }
.sp-map-route-btn.is-on { background: var(--sp-green-700); border-color: var(--sp-green-700); color: #fff; }
.sp-map-route-btn.is-on small { color: rgba(255, 255, 255, .75); }
.sp-map-route-btn:focus-visible { outline: 2px solid var(--sp-saffron); outline-offset: 2px; }

/* narrow screens scroll the map sideways rather than shrink its labels to dust */
.sp-map-scroll { overflow-x: auto; border: 1px solid var(--sp-border); border-radius: .5rem; }
.sp-map-stage { position: relative; min-width: 720px; }
.sp-map-stage svg { display: block; width: 100%; height: auto; }

.sp-map-sea { fill: #e9f0f3; }
.sp-map-equator { stroke: #c9d6db; stroke-width: 1; stroke-dasharray: 2 4; }
.sp-map-equator-label { font: 600 9px var(--sp-sans); fill: #9aabb2; letter-spacing: .08em; text-transform: uppercase; }

.sp-map-route { transition: opacity .25s ease; }
.sp-map-casing { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.sp-map-line { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sp-map-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
.sp-map.has-selection .sp-map-route:not(.is-on) { opacity: .15; }
.sp-map-route.is-on .sp-map-line { stroke-width: 3.5; stroke-dasharray: 10 6; animation: sp-map-flow 1.6s linear infinite; }
.sp-map-route.is-on .sp-map-casing { stroke-width: 7; }
.sp-map-route.is-hot .sp-map-line { stroke-width: 3.5; }
@keyframes sp-map-flow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) {
  .sp-map-route.is-on .sp-map-line { animation: none; stroke-dasharray: none; }
}

.sp-map-place { cursor: pointer; outline: none; }
.sp-map-place .sp-map-hit { fill: transparent; stroke: none; pointer-events: all; }
.sp-map-dot { stroke: #fff; stroke-width: 2; }
.sp-map-place--source .sp-map-dot { fill: #c9502c; }
.sp-map-place--port .sp-map-dot { fill: #26221e; }
.sp-map-place.is-hot .sp-map-dot, .sp-map-place:focus-visible .sp-map-dot { stroke: #eda100; stroke-width: 3; }
.sp-map-label {
  font: 600 11px var(--sp-sans); fill: #26221e; pointer-events: none;
  paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; stroke-linejoin: round;
}
.sp-map-place--source .sp-map-label { fill: #8f2f14; }

.sp-map-tip {
  position: absolute; z-index: 3; pointer-events: none; max-width: 16rem;
  background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: .45rem;
  box-shadow: 0 6px 20px rgba(18, 52, 25, .16); padding: .4rem .6rem;
  display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; line-height: 1.35;
}
.sp-map-tip-v { font-weight: 600; color: var(--sp-text); }
.sp-map-tip-s { color: #8f2f14; font-weight: 600; }
.sp-map-tip-m { color: var(--sp-muted); }

.sp-map-key { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .78rem; color: var(--sp-muted); margin: .55rem 0 .6rem; }
.sp-map-key i { display: inline-block; border-radius: 50%; margin-right: .35rem; vertical-align: -.1em; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sp-border); }
.sp-map-key-source { width: .8rem; height: .8rem; background: #c9502c; }
.sp-map-key-port { width: .6rem; height: .6rem; background: #26221e; }

.sp-map-panel {
  background: var(--sp-surface-2); border: 1px solid var(--sp-border); border-radius: .5rem;
  padding: .7rem .9rem; font-size: .92rem; min-height: 4.2rem;
}
.sp-map-panel-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.sp-map-panel-head i { width: 1.3rem; height: 4px; border-radius: 2px; }
.sp-map-panel-head i.is-source { width: .8rem; height: .8rem; border-radius: 50%; background: #c9502c; }
.sp-map-panel-head i.is-port { width: .6rem; height: .6rem; border-radius: 50%; background: #26221e; }
.sp-map-panel-period { color: var(--sp-muted); font-size: .82rem; }

.sp-map-list { margin-top: .75rem; font-size: .9rem; }
.sp-map-list summary { cursor: pointer; color: var(--sp-link); font-size: .85rem; }
.sp-map-list ul { padding-left: 1.2rem; }
.sp-map figcaption { font-size: .78rem; color: var(--sp-muted); margin-top: .5rem; }

/* ---------------------------------------------------------- trade routes page */

/* clear the sticky header (100px + 6px band) when scrolled to */
#spice-routes-map { scroll-margin-top: 120px; }
.sp-panel-pad > .sp-map { margin: 0; }

.tr-card { border-top: 10px solid var(--c); }
.tr-card .sp-badge { margin-bottom: .2rem; }
.tr-source-dot {
  width: .8rem; height: .8rem; border-radius: 50%; flex: none;
  background: #c9502c; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sp-border);
}
.tr-reading { columns: 2 16rem; column-gap: 2rem; }
.tr-reading li { break-inside: avoid; margin-bottom: .3rem; }

/* ---------------------------------------------------------- herb finder */

.hf-results { scroll-margin-top: 120px; }
/* Keep the same relevance language in both finders. */
.hf-herb {
  --hf-relevance: #8b927b;
  border-top: 10px solid var(--hf-relevance);
}
.hf-herb--classic { --hf-relevance: var(--sp-basil); }
.hf-herb--good { --hf-relevance: var(--sp-saffron); }
.hf-herb--try { --hf-relevance: #8b927b; }
.hf-band {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .12rem .5rem; border: 1px solid var(--sp-border); border-radius: 999px; white-space: nowrap;
  background: var(--sp-surface-2); color: var(--sp-muted);
}
.hf-band::before {
  content: ""; width: .5rem; height: .5rem; flex: none;
  border-radius: 50%; background: var(--hf-relevance);
}
.hf-herb--classic .hf-band { color: var(--sp-green-800); }
.hf-herb--good .hf-band { color: #7a5a0c; }
.hf-thumb {
  float: right; width: 64px; height: 64px; object-fit: cover; margin: 0 0 .5rem .75rem;
  border-radius: .45rem; border: 1px solid var(--sp-border); background: var(--sp-surface-2);
}
.hf-have { background: var(--sp-basil-100); border-color: var(--sp-basil-300); color: var(--sp-green-800); }
.hf-have-text { color: var(--sp-green-700); font-weight: 600; }
.hf-how { display: grid; grid-template-columns: 7.5rem 1fr; gap: .25rem .75rem; clear: both; }
.hf-how dt { color: var(--sp-muted); font-weight: 600; }
.hf-how dd { margin: 0; }
.hf-how dd.hf-caution { color: #8a4b0f; }
.hf-combo + .hf-combo { border-top: 1px solid var(--sp-border); }
@media (max-width: 575.98px) { .hf-how { grid-template-columns: 1fr; gap: 0; } .hf-how dd { margin-bottom: .35rem; } }

/* ---------------------------------------------------------- fresh or dried */

.sp-form {
  display: inline-block; vertical-align: .15em; margin-left: .3rem;
  border-radius: 999px; padding: .05rem .5rem;
  font-family: var(--sp-sans); font-size: .7rem; font-weight: 600; letter-spacing: 0;
  border: 1px solid transparent; white-space: nowrap;
}
.sp-form-fresh { background: var(--sp-basil-100); border-color: var(--sp-basil-300); color: var(--sp-green-800); }
.sp-form-dried { background: #f6ead0; border-color: var(--sp-saffron-200); color: #6e4d12; }
.sp-form-either { background: var(--sp-surface-2); border-color: var(--sp-border); color: var(--sp-muted); }
.sp-herb-form {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .6rem;
  padding: .5rem .7rem; border-top: 1px solid var(--sp-border); background: var(--sp-surface);
  font-size: .82rem;
}
.sp-herb-form .sp-form { margin-left: 0; font-size: .76rem; }
.sp-infobox-title + .sp-herb-form { border-top: 0; }

/* ---------------------------------------------------------- herb garden */

/* The 3D bed fills the panel; the date, zoom, herb card and timeline sit over it. */
.hg-stage {
  position: relative; height: clamp(440px, 68vh, 720px); overflow: hidden;
  background: linear-gradient(180deg, #cfe3ee, #eef3e6);
  border-bottom: 1px solid var(--sp-border);
  touch-action: pan-y;
}
.hg-stage canvas { display: block; width: 100%; height: 100%; outline: none; }
.hg-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem;
  text-align: center; color: var(--sp-muted);
}
.hg-stage.is-ready .hg-fallback { display: none; }

.hg-labels { position: absolute; inset: 0; pointer-events: none; }
.hg-label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  pointer-events: auto; cursor: pointer; white-space: nowrap;
  font-size: .72rem; line-height: 1.2; padding: .15rem .45rem; border-radius: 999px;
  background: rgb(255 255 255 / 86%); color: var(--sp-green-900, #1d3b22);
  border: 1px solid rgb(0 0 0 / 10%); box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
  transition: opacity .15s ease;
}
.hg-label b { font-weight: 600; }
.hg-label i { font-style: normal; color: var(--sp-muted); margin-left: .3rem; }
.hg-label.is-selected { background: var(--sp-saffron); border-color: #a87a22; color: #1f1a12; z-index: 2; }
.hg-label.is-selected i { color: #3d3020; }
.hg-labels.is-off .hg-label:not(.is-selected) { opacity: 0; pointer-events: none; }

.hg-when {
  position: absolute; left: 1rem; top: .9rem; pointer-events: none;
  background: rgb(38 34 30 / 82%); color: #f4eee4; border-radius: .6rem;
  padding: .45rem .8rem; box-shadow: 0 4px 14px rgb(0 0 0 / 20%);
}
.hg-when-date { display: block; font-family: var(--sp-serif); font-weight: 600; font-size: 1.05rem; }
.hg-when-sub { display: block; font-size: .78rem; color: #cfc7bb; }

.hg-zoom { position: absolute; left: 1rem; top: 5rem; display: flex; flex-direction: column; gap: .3rem; }
.hg-zoom button {
  width: 2rem; height: 2rem; border-radius: .45rem; border: 1px solid rgb(0 0 0 / 15%);
  background: rgb(255 255 255 / 88%); font-size: 1.1rem; line-height: 1; color: #26221e;
}
.hg-zoom button:hover { background: #fff; }

.hg-card {
  position: absolute; right: 1rem; top: .9rem; width: min(300px, calc(100% - 2rem));
  background: rgb(255 255 255 / 94%); border: 1px solid var(--sp-border); border-radius: .6rem;
  padding: .75rem .9rem; box-shadow: 0 6px 20px rgb(0 0 0 / 16%); font-size: .85rem; z-index: 3;
  max-height: calc(100% - 7rem); overflow: auto;
}
.hg-card h3 { font-family: var(--sp-serif); font-size: 1.1rem; margin: 0; }
.hg-card-close {
  position: absolute; right: .45rem; top: .35rem; border: 0; background: none;
  font-size: 1.2rem; line-height: 1; color: var(--sp-muted);
}
.hg-card-stage { display: inline-block; margin: .35rem 0 .5rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--sp-basil-100); color: var(--sp-green-900, #1d3b22); font-weight: 600; font-size: .78rem; }
.hg-card-stage.is-off { background: var(--sp-cream-200); color: var(--sp-muted); }
.hg-card dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; margin: 0 0 .5rem; }
.hg-card dt { font-weight: 400; color: var(--sp-muted); }
.hg-card dd { margin: 0; font-weight: 600; }
.hg-spark { display: block; width: 100%; height: 56px; margin: .2rem 0 .45rem; }
.hg-spark path { fill: none; stroke: var(--sp-basil, #4f8a3a); stroke-width: 1.6; }
.hg-spark .fill { fill: color-mix(in srgb, var(--sp-basil, #4f8a3a) 16%, transparent); stroke: none; }
.hg-spark line { stroke: var(--sp-chilli-500, #c9502c); stroke-width: 1.4; }
.hg-spark text { font-size: 9px; fill: var(--sp-muted); }

/* the timeline: a bar across the foot of the bed */
.hg-timeline {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  display: flex; align-items: center; gap: .75rem;
  background: rgb(38 34 30 / 86%); border-radius: .75rem; padding: .6rem .9rem 1.55rem;
  box-shadow: 0 6px 20px rgb(0 0 0 / 25%);
}
.hg-play {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0;
  background: var(--sp-chilli-500); color: #fff; margin-top: .9rem;
  display: grid; place-items: center;
}
.hg-play svg { width: .95rem; height: .95rem; fill: currentColor; }
.hg-play .pause, .hg-play.is-playing .play { display: none; }
.hg-play.is-playing .pause { display: block; }
.hg-play:hover { background: #b8452a; }
.hg-track { position: relative; flex: 1; padding-top: .9rem; }
.hg-seasons {
  position: absolute; left: 0; right: 0; top: .35rem; height: .35rem; border-radius: 999px; overflow: hidden;
  display: flex; opacity: .9;
}
.hg-seasons span { height: 100%; }
.hg-track input[type=range] { width: 100%; accent-color: var(--sp-saffron); cursor: pointer; margin: 0; }
.hg-marks { position: absolute; left: 0; right: 0; top: 100%; height: 1.2rem; margin-top: .1rem; }
.hg-marks button {
  position: absolute; transform: translateX(-50%); border: 0; background: none; padding: 0 .15rem;
  font-size: .7rem; color: #cfc7bb; white-space: nowrap;
}
.hg-marks button:first-child { transform: none; }
.hg-marks button:last-child { transform: translateX(-100%); }
.hg-marks button:hover, .hg-marks button.is-on { color: #fff; }

.hg-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.hg-pick {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  border: 1px solid var(--sp-border); background: var(--sp-surface);
  border-radius: 999px; padding: .2rem .7rem .2rem .25rem; font-size: .85rem;
}
.hg-pick img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.hg-pick:hover { border-color: var(--sp-chilli-400); }
.hg-pick[aria-pressed=true] {
  background: linear-gradient(180deg, var(--sp-basil), var(--sp-green-600));
  border-color: var(--sp-green-700); color: #fff; font-weight: 600;
}
.hg-table td { vertical-align: middle; }

@media (max-width: 575.98px) {
  .hg-stage { height: 560px; }
  /* over the sky, clear of the bed: right of the zoom buttons, under the date */
  .hg-card { top: 4.6rem; left: 3.6rem; right: .75rem; width: auto; max-height: 32%; font-size: .8rem; padding: .55rem .7rem; }
  .hg-card .hg-spark, .hg-card .hg-start { display: none; }
  .hg-marks button:nth-child(2), .hg-marks button:nth-child(3), .hg-marks button:nth-child(5), .hg-marks button:nth-child(7) { display: none; }
  .hg-timeline { gap: .5rem; padding-inline: .6rem; }
}

/* ---------------------------------------------------------- pepper anatomy */

/* The cut chilli fills the panel; leader lines are an SVG over the canvas and
   the labels HTML over that, so they stay sharp and can be clicked. */
.pa-stage {
  position: relative; height: clamp(420px, 64vh, 640px); overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #fffaf2, #efe6d8 75%);
  border-bottom: 1px solid var(--sp-border);
  touch-action: pan-y;
}
.pa-stage canvas { display: block; width: 100%; height: 100%; outline: none; }
.pa-stage.is-ready .pa-fallback { display: none; }
.pa-zoom { top: 1rem; }

.pa-lines, .pa-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pa-lines line { stroke: #3a2f26; stroke-width: 1.1; stroke-opacity: .7; }
.pa-lines circle { fill: #fff; stroke: #3a2f26; stroke-width: 1.3; }
.pa-lines .is-behind { stroke-dasharray: 3 3; stroke-opacity: .35; }
.pa-lines circle.is-behind { fill-opacity: .4; }
.pa-lines line.is-selected { stroke: #a87a22; stroke-width: 1.8; stroke-opacity: 1; stroke-dasharray: none; }
.pa-lines circle.is-selected { fill: var(--sp-saffron); stroke: #a87a22; }
.pa-label {
  position: absolute; left: 0; top: 0; pointer-events: auto; white-space: nowrap;
  font-size: .76rem; font-weight: 600; line-height: 1.2; padding: .2rem .55rem; border-radius: 999px;
  background: rgb(255 255 255 / 92%); color: var(--sp-green-900);
  border: 1px solid rgb(0 0 0 / 12%); box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
  transition: opacity .15s ease, background-color .15s ease;
}
.pa-label:hover { background: #fff; border-color: var(--sp-chilli-400); }
.pa-label.is-selected { background: var(--sp-saffron); border-color: #a87a22; color: #1f1a12; z-index: 2; }
.pa-stage.labels-off .pa-label:not(.is-selected),
.pa-stage.labels-off .pa-lines :not(.is-selected) { opacity: 0; pointer-events: none; }

.pa-card {
  position: absolute; right: 1rem; top: 1rem; width: min(300px, calc(100% - 2rem));
  background: rgb(255 255 255 / 95%); border: 1px solid var(--sp-border); border-radius: .6rem;
  padding: .75rem .9rem; box-shadow: 0 6px 20px rgb(0 0 0 / 16%); font-size: .85rem; z-index: 3;
  max-height: calc(100% - 2rem); overflow: auto;
}
.pa-card h3 { font-family: var(--sp-serif); font-size: 1.1rem; margin: 0 1.2rem 0 0; }
.pa-card .pa-aka { display: block; margin: 0 0 .4rem; }
.pa-card p { margin: .35rem 0 0; }

/* the notes under the model, which double as its key */
.pa-parts { list-style: none; padding-left: 0; display: grid; gap: .4rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pa-part { padding: .55rem .7rem; border-radius: .5rem; border: 1px solid transparent; margin-left: 10px; }
.pa-part.is-selected { border-color: var(--sp-saffron); background: color-mix(in srgb, var(--sp-saffron) 9%, transparent); }
.pa-part-name {
  border: 0; background: none; padding: 0; font-family: var(--sp-serif); font-weight: 600; font-size: 1.02rem;
  color: var(--sp-link); display: inline-flex; align-items: center; gap: .45rem; text-align: left;
}
.pa-part-name:hover { color: var(--sp-link-hover); text-decoration: underline; }
.pa-swatch { width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid rgb(0 0 0 / 25%); flex: none; }
.pa-aka { font-size: .8rem; color: var(--sp-muted); font-style: italic; margin-left: .3rem; }
.pa-part-body { font-size: .9rem; }
.pa-part-body p { margin: .3rem 0 0; }

@media (max-width: 575.98px) {
  .pa-label { font-size: .68rem; padding: .12rem .4rem; }
  .pa-card { top: auto; bottom: .75rem; right: .75rem; left: .75rem; width: auto; max-height: 45%; font-size: .8rem; }
}

/* ---------------------------------------------------------- admin analytics */

.an-ranges { display: flex; gap: .3rem; flex-wrap: wrap; }
.an-range {
  padding: .3rem .7rem; border-radius: .45rem; border: 1px solid var(--sp-border);
  background: var(--sp-surface); text-decoration: none; font-size: .85rem; font-weight: 600;
}
.an-range.is-current { background: var(--sp-chilli-500); border-color: var(--sp-chilli-600); color: #fff; }
.an-stat .an-change { font-size: .74rem; color: var(--sp-muted); margin-top: .3rem; }
.an-stat .an-note { font-size: .7rem; color: var(--sp-muted); font-style: italic; }

/* bars in basil, the line in deep chilli: checked for colour-blind separation */
.an-chart { display: block; width: 100%; height: auto; overflow: visible; }
.an-grid { stroke: var(--sp-border); stroke-width: 1; }
.an-axis { stroke: #b9b2a3; stroke-width: 1; }
.an-tick { font-size: 10px; fill: var(--sp-muted); font-family: var(--sp-sans); }
.an-hit { fill: transparent; }
.an-fill { fill: #4f9860; }
.an-bar.is-hover .an-fill { fill: #2c6842; }
.an-bar.is-hover .an-hit { fill: rgb(0 0 0 / 4%); }
.an-line { fill: none; stroke: #a83a25; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.an-legend { display: flex; gap: 1.2rem; font-size: .8rem; color: var(--sp-muted); margin-top: .4rem; }
.an-key { display: inline-block; width: .8rem; margin-right: .35rem; vertical-align: middle; }
.an-key-bar { height: .7rem; background: #4f9860; border-radius: 2px; }
.an-key-line { height: 2px; background: #a83a25; }
.an-tooltip {
  position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; white-space: nowrap;
  background: #26221e; color: #f4eee4; font-size: .78rem; padding: .3rem .55rem; border-radius: .35rem;
  box-shadow: 0 4px 14px rgb(0 0 0 / 20%);
}
.an-table-toggle summary { font-size: .8rem; color: var(--sp-link); cursor: pointer; margin-top: .5rem; }
.an-table td { vertical-align: middle; }

.an-shares { list-style: none; padding: 0; margin: 0; }
.an-shares li { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr 3.2rem; gap: .6rem; align-items: center; font-size: .86rem; padding: .18rem 0; }
.an-share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-share-bar { height: .55rem; background: var(--sp-surface-2); border-radius: 999px; overflow: hidden; }
.an-share-bar span { display: block; height: 100%; background: #4f9860; border-radius: 999px; }
.an-share-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--sp-muted); }
.an-sub { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-muted); margin: 1rem 0 .4rem; font-family: var(--sp-sans); }
.an-links { list-style: none; padding-left: 0; margin: 0; font-size: .86rem; }
.an-links.sp-panel-pad { padding: 1.15rem 1.35rem; }   /* keep the panel padding the line above removes */
.an-links li { display: flex; justify-content: space-between; gap: .75rem; padding: .2rem 0; border-bottom: 1px dashed var(--sp-border); }
.an-links li:last-child { border-bottom: 0; }
.an-links li > span:last-child { color: var(--sp-muted); font-variant-numeric: tabular-nums; }
.an-links a, .an-links code { overflow-wrap: anywhere; }

/* ---------------------------------------------------------- editor sign-in */

.sp-login { min-height: 60vh; align-items: center; }
.sp-login-warning {
  border: 1px solid var(--sp-chilli-500); border-left-width: 5px; border-radius: .4rem;
  background: #fbeee9; color: var(--sp-chilli-700); padding: .75rem .9rem; font-size: .88rem;
}
.sp-login-warning-title { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; margin-bottom: .35rem; }
.sp-login-warning p { margin-bottom: .35rem; }