/* ============================================================
   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 1px 2px rgba(18, 52, 25, .06), 0 8px 24px rgba(18, 52, 25, .06);

  --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, .14), transparent 70%),
    radial-gradient(ellipse 34rem 28rem at 92% 15%, rgba(202, 75, 47, .10), 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;
}
/* 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; }
.sp-wordmark {
  font-family: "Bricolage Grotesque", var(--sp-sans);
  font-size: 36px; line-height: 1; letter-spacing: -.03em; font-weight: 700;
  white-space: nowrap; color: var(--sp-mh-light);
}
.sp-wordmark-herbs { color: var(--sp-mh-herb); }
.sp-wordmark-and { color: var(--sp-mh-light); }
.sp-wordmark-spices { color: var(--sp-mh-spice); }
.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);
}

/* logo + wordmark, then the search 48px on, then the Spice Finder pushed right */
.sp-masthead-inner {
  min-height: 100px;
  display: flex; align-items: center; gap: 48px;
}
.sp-masthead .sp-search { flex: 1 1 auto; max-width: 340px; }
.sp-masthead-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.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-masthead .sp-finder-btn {
  background: var(--sp-mh-action); color: #fff; font-weight: 600;
  border: 0; border-radius: 4px; padding: 6px 12px; font-size: 15px; line-height: 1.4;
}
.sp-masthead .sp-finder-btn:hover, .sp-masthead .sp-finder-btn:focus-visible { background: #b8452a; color: #fff; }
/* the secondary tool beside it: same size, outlined, so Spice Finder stays the one red action */
.sp-masthead .sp-finder-btn--quiet {
  background: transparent; color: var(--sp-mh-light);
  box-shadow: inset 0 0 0 1px rgba(244, 238, 228, .45);
}
.sp-masthead .sp-finder-btn--quiet:hover, .sp-masthead .sp-finder-btn--quiet:focus-visible {
  background: rgba(244, 238, 228, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(244, 238, 228, .8);
}
.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 lg there is no room for three across: logo and button share a row and
   the search spans the full width beneath them. */
@media (max-width: 991.98px) {
  .sp-masthead-inner { flex-wrap: wrap; gap: 12px 16px; padding-block: 14px; min-height: 0; }
  .sp-masthead .sp-search { order: 3; flex: 1 0 100%; max-width: none; }
  .sp-masthead-actions { order: 2; }
}
@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 */
  /* the wordmark takes the whole first row; search and button share the second */
  .sp-masthead-inner { gap: 10px; }
  .sp-brand { flex: 1 0 100%; }
  .sp-masthead .sp-search { order: 2; flex: 1 0 100%; }
  .sp-masthead-actions { order: 3; margin-left: 0; flex: 1 0 100%; }
  .sp-masthead-actions .btn { flex: 1 1 0; padding: 8px 10px; font-size: 14px; }
}


/* ---------------------------------------------------------- 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. */

/* ---------------------------------------------------------- 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; }

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

.sp-article { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: .6rem; box-shadow: var(--sp-shadow); }
.sp-article-head { padding: 1.5rem 1.75rem .75rem; border-bottom: 1px solid var(--sp-border); }
.sp-article-body { padding: 1.5rem 1.75rem 2rem; }

.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-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;
}
.sp-prose table {
  width: 100%; margin: 1.25rem 0; border-collapse: collapse; font-size: .95rem;
  border: 1px solid var(--sp-border); border-radius: .4rem; overflow: hidden;
}
.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: 5px 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;
}
@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: 100%; height: auto; display: block; }
.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);
}
.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); }
.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 { border-bottom: 0; }
.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: 4px 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;
}
.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-color: rgba(169, 196, 127, .35); }
.sp-footer a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
.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-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-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; }
@media (max-width: 575.98px) { .sp-card-thumb { width: 64px; height: 64px; } }

/* ---------------------------------------------------------- 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: 4px 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: 4px 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; } }