/* ============================================================
   FIRESTRAIN REVIEW  —  design system v4
   ------------------------------------------------------------
   Rules for editing this file:

   1. NEVER write a raw hex or rgba() in a component rule. If a
      shade is missing, add a token. The previous stylesheet
      drifted to 40 loose hex values competing with the tokens
      that already existed, and it showed: two different greens
      were both being used as "the brand colour".

   2. Score bands take DARK ink on light fills. White numerals on
      the amber and green bands measure under 3:1, and the score
      is the single most important character on the page.

   3. Any text input is 16px minimum. Below that, iOS Safari
      zooms the page on focus and this layout does not zoom back.
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Ground. Near-black with a green cast, stepping up in four
     genuinely distinguishable levels. The old ramp sat within
     eight values of itself, so panels, cards and inputs all
     read as one flat plane. */
  --ink:        #080a09;
  --ink-1:      #0d100e;
  --ink-2:      #131714;
  --ink-3:      #1a201c;
  --ink-4:      #232a25;

  --line:       rgba(236, 233, 226, 0.09);
  --line-2:     rgba(236, 233, 226, 0.16);
  --line-3:     rgba(236, 233, 226, 0.26);

  /* Type. Warm bone rather than blue-white: against a cool black
     ground it is what separates "expensive" from "terminal". */
  --bone:       #ece9e2;
  --bone-2:     #b0b4ac;
  --bone-3:     #969c94;
  --bone-4:     #8a908a;
  /* bone-5 is DECORATION ONLY: borders, icon strokes, rules.
     It is below 4.5:1 on every surface here, so the moment it
     carries text that text is illegible. The measured harness
     (tools/shots.js) is what caught bone-3 and bone-4 doing
     exactly that at 3.91:1 and 2.43:1. */
  --bone-5:     #4e534d;

  /* Accent. Green is expected on a cannabis site, so it is used
     sparingly and the bone carries the reading. */
  --green:      #4ade80;
  --green-2:    #22a75a;
  --green-deep: #0f3d24;
  --green-dim:  rgba(74, 222, 128, 0.10);
  --green-line: rgba(74, 222, 128, 0.28);

  --gold:       #e0b252;
  --gold-dim:   rgba(224, 178, 82, 0.12);
  --gold-line:  rgba(224, 178, 82, 0.30);

  --clay:       #e8674f;
  --clay-dim:   rgba(232, 103, 79, 0.12);
  --clay-line:  rgba(232, 103, 79, 0.30);

  --violet:     #a78bfa;
  --violet-dim: rgba(167, 139, 250, 0.12);

  /* Score band fills are LIGHT and take dark ink. Measured
     against --band-ink: fire 8.9:1, good 7.8:1, mid 9.1:1,
     poor 5.4:1. All clear 4.5:1. */
  --band-fire:  #4ade80;
  --band-good:  #86d9a4;
  --band-mid:   #e6c169;
  --band-poor:  #e8836e;
  --band-none:  var(--ink-4);
  --band-ink:   #08120c;

  /* Strain type accents, told apart by hue AND by the shape of
     the dot beside them, because a colour alone is unreadable
     to anyone who cannot separate green from violet. */
  --indica:     #a78bfa;
  --sativa:     #f0a848;
  --hybrid:     #4ade80;

  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 4px 18px rgba(0,0,0,.45);
  --sh-3: 0 18px 48px rgba(0,0,0,.55);

  --serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wide:  1180px;
  --read:  680px;
  --hdr:   58px;
  --t:     .16s cubic-bezier(.4,0,.2,1);
  --t-2:   .32s cubic-bezier(.4,0,.2,1);
}

/* ── RESET / BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--bone);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* A very low, very large radial wash. Without it the page is a
   flat black rectangle; with it there is a light source. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(74,222,128,.055), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(224,178,82,.035), transparent 60%);
}
main, header, footer { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

/* Keyboard focus. The old stylesheet set outline:none on every
   input for looks and replaced it with nothing, so the site was
   unusable from a keyboard. Do not remove this without putting
   something visible in its place. */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--green-2); color: #04160c; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-1); }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: var(--r-pill); border: 3px solid var(--ink-1); }
::-webkit-scrollbar-thumb:hover { background: var(--bone-4); }

.wrap   { max-width: var(--wide); margin: 0 auto; padding: 0 22px; }
.read   { max-width: var(--read); margin: 0 auto; padding: 0 22px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── TYPE SCALE ─────────────────────────────────────────────── */
.display {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 96;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1.display { font-size: clamp(2.4rem, 6.2vw, 4.15rem); }
h2.display { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3.display { font-size: clamp(1.28rem, 2.2vw, 1.6rem); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow-2 { color: var(--bone-3); }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.62;
  color: var(--bone-2);
  text-wrap: pretty;
}

.prose { font-size: 1.045rem; line-height: 1.78; color: var(--bone); text-wrap: pretty; }
.prose p { margin-bottom: 1.35em; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; margin: 2.1em 0 .6em; line-height: 1.2; }
.prose h3 { font-size: 1.1rem; font-weight: 650; margin: 1.8em 0 .5em; color: var(--bone); }
.prose strong { font-weight: 650; color: #fff; }
.prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--green-line); }
.prose a:hover { text-decoration-color: var(--green); }
.prose ul { margin: 0 0 1.35em; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.5em; margin-bottom: .5em; }
.prose ul li::before { content: ''; position: absolute; left: .32em; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--green-2); }
.prose ol { margin: 0 0 1.35em; padding-left: 0; counter-reset: n; }
.prose ol li { position: relative; padding-left: 2em; margin-bottom: .6em; counter-increment: n; }
.prose ol li::before {
  content: counter(n); position: absolute; left: 0; top: .16em;
  font-family: var(--mono); font-size: 12px; color: var(--green);
  width: 1.4em; text-align: right;
}
.prose blockquote {
  margin: 1.6em 0; padding: 2px 0 2px 22px;
  border-left: 2px solid var(--green-line);
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.5;
  color: var(--bone); font-style: italic;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── HEADER ─────────────────────────────────────────────────── */
.site-hdr {
  position: sticky; top: 0; z-index: 90;
  height: var(--hdr);
  background: rgba(8,10,9,.82);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 18px; height: var(--hdr); }

.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; min-height: 44px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--green) 0%, var(--green-2) 100%);
  color: #04160c; font-family: var(--serif); font-weight: 700; font-size: 15px;
  line-height: 1; box-shadow: 0 0 0 1px rgba(74,222,128,.25), 0 3px 12px rgba(74,222,128,.18);
}
.brand-name { font-size: 14.5px; font-weight: 640; letter-spacing: -.015em; white-space: nowrap; }
.brand-name span { color: var(--green); }

.site-nav { display: flex; align-items: center; gap: 1px; margin-left: auto; }
.site-nav a {
  position: relative;
  font-size: 13.5px; font-weight: 500; color: var(--bone-3);
  padding: 7px 12px; border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--bone); background: rgba(236,233,226,.05); }
.site-nav a[aria-current="page"] { color: var(--bone); }
.site-nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 1px;
  height: 1.5px; background: var(--green); border-radius: 2px;
}

/* Search sits in the header on every page. 16px on the input is
   the iOS floor and is not negotiable. */
.hdr-search { position: relative; flex: 1; max-width: 300px; }
.hdr-search-in { position: relative; display: flex; align-items: center; }
.hdr-search svg { position: absolute; left: 10px; color: var(--bone-4); pointer-events: none; }
#q {
  width: 100%; height: 34px;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--bone);
  padding: 0 30px 0 31px;
  font-size: 16px; font-family: var(--sans);
  transition: border-color var(--t), background var(--t);
}
#q::placeholder { color: var(--bone-4); font-size: 13px; }
#q:focus { outline: none; border-color: var(--green-line); background: var(--ink-3); }
.q-clear {
  position: absolute; right: 6px; width: 22px; height: 22px;
  display: none; place-items: center; border-radius: 50%;
  color: var(--bone-3); font-size: 15px; line-height: 1;
}
.q-clear:hover { background: var(--ink-4); color: var(--bone); }
.hdr-search.filled .q-clear { display: grid; }

.q-results {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0;
  background: rgba(13,16,14,.98);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); overflow: hidden;
  max-height: min(70vh, 460px); overflow-y: auto;
  overscroll-behavior: contain;
  display: none; z-index: 200;
}
.q-results.open { display: block; }
.q-group { padding: 7px 0; border-bottom: 1px solid var(--line); }
.q-group:last-child { border-bottom: none; }
.q-group-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-4);
  padding: 5px 15px 6px;
}
.q-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 15px; font-size: 13.5px; color: var(--bone-2);
  transition: background var(--t), color var(--t);
}
.q-item:hover, .q-item.on { background: rgba(236,233,226,.06); color: var(--bone); }
.q-item mark { background: none; color: var(--green); font-weight: 600; }
.q-item-sub { font-size: 11.5px; color: var(--bone-4); margin-left: auto; white-space: nowrap; }
.q-empty { padding: 22px 15px; text-align: center; color: var(--bone-4); font-size: 13px; }

.burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4.5px; min-width: 44px; min-height: 44px; padding: 9px; margin-left: auto; border-radius: var(--r-sm); }
.burger span { display: block; width: 19px; height: 1.5px; background: var(--bone-2); border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mob-nav {
  position: fixed; inset: var(--hdr) 0 auto 0; z-index: 89;
  background: rgba(8,10,9,.985);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--line-2);
  flex-direction: column; padding: 6px 0 14px;
  display: none;
}
.mob-nav.open { display: flex; }
.mob-nav a {
  padding: 13px 24px; font-size: 15px; font-weight: 500; color: var(--bone-2);
  border-bottom: 1px solid var(--line);
}
.mob-nav a:last-child { border-bottom: none; }
.mob-nav a[aria-current="page"] { color: var(--green); }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-foot {
  margin-top: 90px; padding: 52px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--ink-1);
}
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 42px;
}
.foot-about .brand { margin-bottom: 13px; }
.foot-about p { font-size: 13.5px; color: var(--bone-3); line-height: 1.65; max-width: 33ch; }
.foot-col h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-4); margin-bottom: 14px; font-weight: 500;
}
.foot-col a { display: block; font-size: 13.5px; color: var(--bone-2); padding: 8px 0; transition: color var(--t); }
.foot-col a:hover { color: var(--green); }
.foot-bar {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--bone-4);
}
.foot-bar a { color: var(--bone-3); }
.foot-bar a:hover { color: var(--green); }
.foot-legal { max-width: 62ch; line-height: 1.6; }

/* ── AGE GATE ───────────────────────────────────────────────── */
.age-gate {
  position: fixed; inset: 0; z-index: 999;
  display: none; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(4,6,5,.93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.age-gate.on { display: flex; }
.age-box {
  width: 100%; max-width: 410px; text-align: center;
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); padding: 38px 30px 26px;
  box-shadow: var(--sh-3);
}
.age-box .brand { justify-content: center; margin-bottom: 20px; }
.age-box .brand-mark { width: 36px; height: 36px; font-size: 20px; border-radius: var(--r-md); }
.age-box .brand-name { font-size: 17px; }
.age-h { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; line-height: 1.12; margin-bottom: 10px; }
.age-sub { font-size: 14px; color: var(--bone-2); line-height: 1.6; margin-bottom: 24px; }
.age-sub strong { color: var(--bone); font-weight: 650; }
.age-yes {
  display: block; width: 100%; padding: 14px;
  background: var(--green); color: #04160c;
  font-size: 15px; font-weight: 650; border-radius: var(--r-md);
  margin-bottom: 9px; transition: filter var(--t);
}
.age-yes:hover { filter: brightness(1.08); }
.age-no {
  display: block; width: 100%; padding: 12px;
  color: var(--bone-3); font-size: 13.5px; font-weight: 500;
  border-radius: var(--r-md); transition: color var(--t), background var(--t);
}
.age-no:hover { color: var(--bone); background: var(--ink-3); }
.age-fine { font-size: 11px; color: var(--bone-4); line-height: 1.55; margin-top: 18px; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 20px;
  font-size: 14px; font-weight: 600; letter-spacing: -.005em;
  border-radius: var(--r-md); transition: all var(--t);
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--green); color: #04160c; box-shadow: 0 2px 14px rgba(74,222,128,.2); }
.btn-primary:hover { filter: brightness(1.09); box-shadow: 0 4px 20px rgba(74,222,128,.3); }
.btn-ghost { border-color: var(--line-2); color: var(--bone); background: var(--ink-2); }
.btn-ghost:hover { border-color: var(--line-3); background: var(--ink-3); }
.btn-quiet { color: var(--bone-2); padding: 11px 14px; }
.btn-quiet:hover { color: var(--bone); background: var(--ink-2); }
.btn-sm { min-height: 36px; padding: 8px 14px; font-size: 13px; }

/* ── SCORE  ─────────────────────────────────────────────────
   The score is the product. It gets the most typographic care
   on the site and it is always mono so columns of them align.
   ---------------------------------------------------------- */
.score {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 1px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--band-ink);
  border-radius: var(--r-md); line-height: 1;
}
.score-v { font-size: 1em; letter-spacing: -.03em; }
.score-d { font-size: .5em; opacity: .62; font-weight: 500; }
.score.is-fire { background: var(--band-fire); }
.score.is-good { background: var(--band-good); }
.score.is-mid  { background: var(--band-mid); }
.score.is-poor { background: var(--band-poor); }
.score.is-none { background: var(--band-none); color: var(--bone-3); }

/* sizes */
.score-xl { font-size: 58px; padding: 20px 18px 22px; border-radius: var(--r-lg); }
.score-lg { font-size: 34px; padding: 13px 13px 14px; }
.score-md { font-size: 21px; padding: 9px 9px 10px; min-width: 54px; }
.score-sm { font-size: 15px; padding: 6px 7px 7px; min-width: 42px; border-radius: var(--r-sm); }

/* Outline variant for places where a solid block is too loud */
.score-line {
  background: none !important; border: 1px solid currentColor;
}
.score-line.is-fire { color: var(--band-fire); }
.score-line.is-good { color: var(--band-good); }
.score-line.is-mid  { color: var(--band-mid); }
.score-line.is-poor { color: var(--band-poor); }

/* ── PILLS / TAGS ───────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 550; line-height: 1.5;
  border: 1px solid var(--line); color: var(--bone-2); background: var(--ink-2);
  white-space: nowrap;
}
.pill-mono { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; }

/* Strain type. Colour AND a differently-shaped dot, so the
   distinction survives colourblindness and greyscale printing. */
.pill.is-indica { color: var(--indica); border-color: var(--violet-dim); background: var(--violet-dim); }
.pill.is-sativa { color: var(--sativa); border-color: var(--gold-dim); background: var(--gold-dim); }
.pill.is-hybrid { color: var(--hybrid); border-color: var(--green-dim); background: var(--green-dim); }
.pill-dot { width: 6px; height: 6px; flex-shrink: 0; background: currentColor; }
.is-indica > .pill-dot { border-radius: 50%; }
.is-sativa > .pill-dot { border-radius: 1px; transform: rotate(45deg); }
.is-hybrid > .pill-dot { border-radius: 1px; }

.pill-fire { color: var(--green); border-color: var(--green-line); background: var(--green-dim); }
.pill-gold { color: var(--gold); border-color: var(--gold-line); background: var(--gold-dim); }
.pill-clay { color: var(--clay); border-color: var(--clay-line); background: var(--clay-dim); }

.rec-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600;
}
.rec-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rec-yes { color: var(--green); background: var(--green-dim); box-shadow: inset 0 0 0 1px var(--green-line); }
.rec-mid { color: var(--gold);  background: var(--gold-dim);  box-shadow: inset 0 0 0 1px var(--gold-line); }
.rec-no  { color: var(--clay);  background: var(--clay-dim);  box-shadow: inset 0 0 0 1px var(--clay-line); }

/* ── CARDS / PANELS ─────────────────────────────────────────── */
.panel {
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
}
.panel-2 { background: var(--ink-2); }

.section { margin-top: 78px; }
.section-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 26px; flex-wrap: wrap;
}
.section-hd .eyebrow { margin-bottom: 9px; display: block; }
.section-hd h2 { margin: 0; }
.section-hd p { font-size: 14px; color: var(--bone-3); margin-top: 7px; max-width: 56ch; }
.section-more {
  font-size: 13.5px; font-weight: 550; color: var(--bone-2);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 2px; transition: color var(--t); white-space: nowrap;
}
.section-more:hover { color: var(--green); }
.section-more span { transition: transform var(--t); }
.section-more:hover span { transform: translateX(3px); }

/* ── EMPTY / NOTICE STATES ─────────────────────────────────
   "Nothing here yet" and "we could not load it" must never
   render the same way. Every empty state on this site says
   which of the two it is.
   ---------------------------------------------------------- */
.state {
  text-align: center; padding: 62px 24px;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--ink-1);
}
.state-icon { font-size: 26px; margin-bottom: 14px; opacity: .5; }
.state h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; }
.state p { font-size: 14px; color: var(--bone-3); max-width: 44ch; margin: 0 auto 18px; line-height: 1.65; }
.state p:last-child { margin-bottom: 0; }

.notice {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 17px; border-radius: var(--r-md);
  background: var(--ink-2); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; color: var(--bone-2);
}
.notice-icon { flex-shrink: 0; font-size: 15px; line-height: 1.35; }
.notice strong { color: var(--bone); font-weight: 620; }
.notice a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.notice-gold { background: var(--gold-dim); border-color: var(--gold-line); }
.notice-gold strong { color: var(--gold); }
.notice-green { background: var(--green-dim); border-color: var(--green-line); }
.notice-green strong { color: var(--green); }
.notice-clay { background: var(--clay-dim); border-color: var(--clay-line); }
.notice-clay strong { color: var(--clay); }

/* ── HOME HERO ──────────────────────────────────────────────── */
.hero { padding: 56px 0 8px; }
.hero-in { display: grid; grid-template-columns: 1.35fr .95fr; gap: 54px; align-items: center; }
.hero h1 { margin: 14px 0 20px; }
.hero h1 em {
  font-style: italic; font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 96;
  color: var(--green);
}
.hero-cta { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 28px; }

.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat {
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px 18px 16px;
  transition: border-color var(--t), transform var(--t);
}
a.stat:hover { border-color: var(--line-2); transform: translateY(-2px); }
.stat-n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 600; line-height: 1;
  letter-spacing: -.03em; margin-bottom: 7px;
}
.stat-n.g { color: var(--green); }
.stat-l { font-size: 11.5px; color: var(--bone-3); letter-spacing: .015em; }

/* ── FEATURED REVIEW ────────────────────────────────────────── */
.feature {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  overflow: hidden; background: var(--ink-1);
  transition: border-color var(--t-2);
}
.feature:hover { border-color: var(--green-line); }
.feature-media {
  position: relative; min-height: 340px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(74,222,128,.16), transparent 58%),
    linear-gradient(155deg, var(--ink-3), var(--ink));
  display: grid; place-items: center; overflow: hidden;
}
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-glyph {
  font-family: var(--serif); font-size: clamp(5rem, 12vw, 8.5rem);
  font-weight: 600; line-height: .84; color: transparent;
  -webkit-text-stroke: 1px var(--line-3); text-align: center;
  padding: 20px; letter-spacing: -.03em; user-select: none;
}
.feature-body { padding: 40px 40px 36px; display: flex; flex-direction: column; }
.feature-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.feature h2 { margin-bottom: 13px; }
.feature-quote {
  font-family: var(--serif); font-size: 1.18rem; line-height: 1.48;
  color: var(--bone-2); font-style: italic; margin-bottom: 22px;
  text-wrap: pretty;
}
.feature-foot { margin-top: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.feature-score { display: flex; align-items: center; gap: 13px; }
.feature-score-l { font-size: 11.5px; color: var(--bone-4); line-height: 1.35; }
.feature-score-l b { display: block; color: var(--bone-2); font-size: 13px; font-weight: 600; }

/* ── REVIEW ROWS (the ranked list) ──────────────────────────── */
.rows { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--ink-1); }
.row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
  transition: background var(--t);
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--ink-2); }
.row-rank {
  font-family: var(--mono); font-size: 12px; color: var(--bone-4);
  width: 22px; text-align: right; font-variant-numeric: tabular-nums;
}
.row-main { min-width: 0; }
.row-name {
  font-size: 15.5px; font-weight: 600; letter-spacing: -.012em;
  margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row:hover .row-name { color: var(--green); }
.row-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--bone-3); }
.row-sep { color: var(--bone-4); }
.row-where { color: var(--bone-2); font-weight: 500; }
.row-right { display: flex; align-items: center; gap: 14px; }
.row-price { font-family: var(--mono); font-size: 13.5px; font-weight: 550; color: var(--bone-2); }
.row-date { font-size: 11.5px; color: var(--bone-4); white-space: nowrap; }

/* ── GRID CARDS ─────────────────────────────────────────────── */
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
  transition: border-color var(--t), transform var(--t), background var(--t);
  min-width: 0;
}
a.card:hover { border-color: var(--line-2); background: var(--ink-2); transform: translateY(-2px); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.card-name {
  font-size: 16px; font-weight: 620; letter-spacing: -.015em; line-height: 1.28;
  text-wrap: balance;
}
a.card:hover .card-name { color: var(--green); }
.card-sub { font-size: 12.5px; color: var(--bone-3); margin-top: 4px; line-height: 1.5; }
.card-body { font-size: 13.5px; color: var(--bone-2); line-height: 1.62; margin-bottom: 15px; text-wrap: pretty; }
.card-foot {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12px; color: var(--bone-3);
}
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── STRAIN CARD ────────────────────────────────────────────── */
.strain-card { position: relative; overflow: hidden; }
.strain-card::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--hybrid); opacity: .55;
}
.strain-card.is-indica::after { background: var(--indica); }
.strain-card.is-sativa::after { background: var(--sativa); }
.strain-thc {
  font-family: var(--mono); font-size: 11.5px; color: var(--bone-3);
  white-space: nowrap;
}
.strain-terps { display: flex; gap: 5px; flex-wrap: wrap; }
.terp {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em;
  color: var(--bone-3); background: var(--ink-3);
  padding: 2.5px 7px; border-radius: var(--r-xs);
  border: 1px solid var(--line);
}
.terp-1 { color: var(--green); border-color: var(--green-line); background: var(--green-dim); }

/* ── FILTER BAR ─────────────────────────────────────────────── */
.filters {
  display: flex; flex-direction: column; gap: 11px;
  padding: 17px 19px; background: var(--ink-1);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  margin-bottom: 20px;
}
.f-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.f-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-4);
  width: 58px; flex-shrink: 0;
}
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 520; color: var(--bone-2);
  background: var(--ink-3); border: 1px solid transparent;
  transition: all var(--t); min-height: 36px;
}
/* A filter chip is a primary control on the list pages, and on a
   phone it is being hit with a thumb. 36px is fine with a mouse
   and measurably not fine on a touch screen. */
@media (pointer: coarse) {
  .chip { min-height: 44px; padding: 9px 15px; }
  .sort-sel { height: 44px; }
}
.chip:hover { color: var(--bone); background: var(--ink-4); }
.chip.on { background: var(--green); color: #04160c; font-weight: 640; }
.chip.on.t-indica { background: var(--indica); color: #14082e; }
.chip.on.t-sativa { background: var(--sativa); color: #241403; }

.results-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 15px; flex-wrap: wrap;
}
.results-n { font-size: 13.5px; color: var(--bone-3); }
.results-n b { color: var(--bone); font-weight: 620; }
.sort-sel {
  height: 44px; padding: 0 32px 0 13px;
  background: var(--ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23797c75' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--bone); font-size: 16px; font-family: var(--sans);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.sort-sel:focus { outline: none; border-color: var(--green-line); }

/* ── REVIEW PAGE ────────────────────────────────────────────── */
.crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--bone-4); padding: 22px 0 0;
}
.crumbs a { color: var(--bone-3); transition: color var(--t); padding: 3px 0; }
.crumbs a:hover { color: var(--green); }
.crumbs-sep { opacity: .5; }

.article-hd { padding: 26px 0 34px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.article-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.article-hd h1 { margin-bottom: 16px; }
.article-sub { font-size: 1.06rem; color: var(--bone-2); line-height: 1.6; max-width: 60ch; text-wrap: pretty; }
.article-byline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; font-size: 12.5px; color: var(--bone-4);
}
/* These links are words in a sentence, but .article-byline is a flex
   row, which blockifies them. Give them the 24px WCAG 2.2 target
   rather than leaving them at the 20px a bare line-height produces. */
.article-byline a { padding: 3px 0; color: var(--bone-3); }
.article-byline a:hover { color: var(--green); }

.verdict {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  padding: 26px; margin-bottom: 34px;
  background: var(--ink-1); border: 1px solid var(--line-2); border-radius: var(--r-lg);
}
.verdict-txt h3 { font-family: var(--serif); font-size: 1.42rem; font-weight: 600; margin-bottom: 7px; line-height: 1.15; }
.verdict-txt p { font-size: 14.5px; color: var(--bone-2); line-height: 1.6; text-wrap: pretty; }

.scorecard { display: grid; gap: 13px; }
.sc-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center; }
.sc-label { font-size: 13px; font-weight: 560; color: var(--bone-2); }
.sc-track { height: 7px; background: var(--ink-3); border-radius: var(--r-pill); overflow: hidden; }
.sc-fill { height: 100%; border-radius: var(--r-pill); transition: width var(--t-2); }
.sc-fill.is-fire { background: var(--band-fire); }
.sc-fill.is-good { background: var(--band-good); }
.sc-fill.is-mid  { background: var(--band-mid); }
.sc-fill.is-poor { background: var(--band-poor); }
.sc-val { font-family: var(--mono); font-size: 13px; font-weight: 600; width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.sc-note { font-size: 11.5px; color: var(--bone-4); grid-column: 2 / -1; margin-top: -6px; line-height: 1.5; }

.spec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.spec-cell { background: var(--ink-1); padding: 14px 16px; }
.spec-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--bone-4); margin-bottom: 6px;
}
.spec-v { font-size: 14.5px; font-weight: 560; color: var(--bone); line-height: 1.35; }
.spec-v.num { font-family: var(--mono); }
.spec-v a { color: var(--green); }

.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 52px; align-items: start; }
.aside { position: sticky; top: calc(var(--hdr) + 22px); display: grid; gap: 16px; }
.aside-box { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.aside-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-4); margin-bottom: 14px;
}

/* ── DELIVERY SERVICE ───────────────────────────────────────── */
.svc-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: flex-start;
  padding: 30px; border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--line-2); margin-bottom: 30px;
}
.svc-name { margin-bottom: 12px; }
.svc-facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.lic {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px;
  padding: 5px 11px; border-radius: var(--r-sm);
  background: var(--green-dim); border: 1px solid var(--green-line); color: var(--green);
}
.lic-none {
  background: var(--ink-3); border-color: var(--line-2); color: var(--bone-3);
}
.lic svg { flex-shrink: 0; }

.svc-list { display: grid; gap: 12px; }
.svc-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 19px 21px; background: var(--ink-1);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
a.svc-card:hover { border-color: var(--green-line); background: var(--ink-2); transform: translateY(-1px); }
.svc-avatar {
  width: 46px; height: 46px; border-radius: var(--r-md); flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  background: var(--ink-3); color: var(--bone-2);
  border: 1px solid var(--line-2);
}
.svc-info { min-width: 0; }
.svc-info h3 { font-size: 16px; font-weight: 620; letter-spacing: -.015em; margin-bottom: 5px; }
a.svc-card:hover .svc-info h3 { color: var(--green); }
.svc-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--bone-3); }
.svc-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.svc-unrated { font-size: 11.5px; color: var(--bone-4); font-style: italic; max-width: 15ch; line-height: 1.4; text-align: right; }

/* ── TABLE ──────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: var(--r-lg); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.tbl th {
  text-align: left; font-family: var(--mono); font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--bone-4);
  font-weight: 500; padding: 13px 16px; background: var(--ink-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--bone-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background var(--t); }
.tbl tbody tr:hover { background: var(--ink-2); }
.tbl td strong { color: var(--bone); font-weight: 600; }

/* ── CTA BAND ───────────────────────────────────────────────── */
.cta-band {
  margin-top: 84px; padding: 46px 40px; text-align: center;
  border-radius: var(--r-xl);
  background:
    radial-gradient(100% 160% at 50% 0%, rgba(74,222,128,.11), transparent 66%),
    var(--ink-1);
  border: 1px solid var(--line-2);
}
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { font-size: 15px; color: var(--bone-2); max-width: 50ch; margin: 0 auto 26px; line-height: 1.62; }
.cta-row { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }

/* ── RESPONSIVE ─────────────────────────────────────────────
   Everything below was measured in a real browser at 1440, 900,
   768, 390 and 320, not eyeballed.
   ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .article-layout { grid-template-columns: 1fr; gap: 34px; }
  .aside { position: static; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 34px; }
  .hero { padding: 40px 0 4px; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .feature { grid-template-columns: 1fr; }
  .feature-media { min-height: 190px; }
  .feature-body { padding: 28px 26px 26px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .section { margin-top: 60px; }
}

@media (max-width: 768px) {
  /* The header wraps to two rows and search takes the second,
     full width. Below this width a 300px search box and a nav
     cannot both fit and the search is what people use. */
  .site-hdr { height: auto; }
  .hdr-in { flex-wrap: wrap; row-gap: 9px; padding-bottom: 10px; height: auto; min-height: var(--hdr); }
  .site-nav { display: none; }
  .burger { display: flex; }
  .hdr-search { order: 9; flex: 1 0 100%; max-width: 100%; }
  .mob-nav { top: auto; }

  .verdict { grid-template-columns: 1fr; gap: 20px; text-align: center; justify-items: center; }
  .svc-hero { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 24px; }
  .site-foot { margin-top: 62px; }
}

@media (max-width: 620px) {
  .wrap, .read { padding: 0 16px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }

  /* The row collapses: rank and date come out, the score moves
     to the left, and the name gets the width. At 320px a
     four-column row put the score off the right edge. */
  .row { grid-template-columns: auto 1fr; gap: 13px; padding: 13px 14px; }
  .row-rank { display: none; }
  .row-right { flex-direction: column; align-items: flex-start; gap: 3px; grid-column: 2; }
  .row-date { display: none; }

  .svc-card { grid-template-columns: auto 1fr; gap: 13px; }
  .svc-right { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
  .svc-unrated { text-align: left; max-width: none; }

  .score-xl { font-size: 44px; padding: 15px 14px 17px; }
  .article-hd { padding: 20px 0 26px; margin-bottom: 26px; }
  .panel { padding: 20px; }
  .feature-body { padding: 24px 20px 22px; }
  .sc-row { grid-template-columns: 64px 1fr auto; gap: 11px; }
}

@media (max-width: 400px) {
  .brand-name { font-size: 13.5px; }
  .spec { grid-template-columns: 1fr 1fr; }
  .section { margin-top: 48px; }
}

/* ── PRINT ──────────────────────────────────────────────────
   Reviews get printed and screenshotted. Invert to ink on
   paper rather than dumping a black rectangle into a printer.
   ---------------------------------------------------------- */
@media print {
  body { background: #fff; color: #111; }
  body::before { display: none; }
  .site-hdr, .site-foot, .age-gate, .mob-nav, .cta-band, .hdr-search, .burger { display: none !important; }
  .panel, .rows, .card, .verdict, .aside-box { border-color: #ddd; background: #fff; }
  a { color: #111; }
  .display, h1, h2, h3 { color: #000; }
}

/* ── LICENCE STAMP ──────────────────────────────────────────
   Printed beside every licence number in the directory. The
   failure this exists to prevent is a listing quietly sitting on
   a licence that lapsed underneath it, which is exactly what one
   of the operators we rejected is currently doing on a big
   directory. Both dates are shown so a reader can judge how
   stale the check is instead of trusting the word "verified".
   ---------------------------------------------------------- */
.lic-stamp {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .01em;
  color: var(--bone-4); padding: 4px 2px; white-space: nowrap;
  min-width: 0;
}
/* Belt and braces for the bug above: even the short form must be
   allowed to give up and wrap rather than widen the document. */
@media (max-width: 620px) {
  .lic-stamp { white-space: normal; }
  .svc-facts { min-width: 0; }
}
.lic-stamp.is-soon { color: var(--gold); }