/* ==========================================================================
   main.css — mobile-first styles for shroombiosis.com
   Components consume the SEMANTIC tokens from tokens.css only (--bg, --fg,
   --brand, --accent, --rule, …). Because those tokens are re-mapped by the
   .ground-paper / .ground-spore contexts, each component is written once and
   renders correctly on both the light "paper" and dark "spore" grounds.
   Strategy: base styles target the smallest screen; min-width media queries
   add complexity as the screen grows.
   ========================================================================== */

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------- Branded text selection + non-selectable chrome ----------
   Selecting text stays fully ENABLED (good for sharing, in-page translation, and
   screen readers) — we just paint the highlight in honey, per-ground, instead of
   the browser's default blue. Decorative chrome only (the mono lab eyebrows, the
   card index numerals, the FAQ +/- toggle, the breadcrumb "/" separators) is kept
   out of a drag-copy, so a stray selection grabs real, readable content only. */
::selection {
  background: var(--selection-bg);
  color: var(--fg);
  text-shadow: none;
}
::-moz-selection {
  background: var(--selection-bg);
  color: var(--fg);
  text-shadow: none;
}
.eyebrow,
.feature-cards > .card::before,
.faq summary::after,
.breadcrumbs li + li::before {
  -webkit-user-select: none;
  user-select: none;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: 700;
  margin: 0 0 var(--space-s);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p,
ul,
ol {
  margin: 0 0 var(--space-s);
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition);
}
a:hover {
  color: var(--brand-strong);
}

strong {
  font-weight: 600;
}

/* Visible focus for keyboard users (accessibility — do not remove) */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: var(--space-2xs) var(--space-s);
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-s);
}

.section {
  padding-block: var(--space-xl);
}
.section--tight {
  padding-block: var(--space-l);
}

.prose {
  max-width: var(--measure);
}
.prose > * + * {
  margin-top: var(--space-s);
}

.stack > * + * {
  margin-top: var(--flow-space, var(--space-s));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.center {
  text-align: center;
  margin-inline: auto;
}
.measure {
  max-width: var(--measure);
}
.measure-wide {
  max-width: 52rem;
}

/* Mono lab-label "eyebrow" — ties the page typography to the spec strips */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg-muted);
  margin-bottom: var(--space-2xs);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-soft);
}

.muted {
  color: var(--fg-muted);
}
.meta {
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: var(--space-l);
}

/* ---------- Header / nav (mobile first: menu collapses) ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-s);
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  color: var(--brand-strong);
  text-decoration: none;
}
.brand-mark {
  height: 1.9em;
  width: auto;
  display: block;
  flex: none;
}

.nav-toggle {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--brand-strong);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none; /* hidden on mobile until toggled */
  position: absolute;
  top: 100%;
  right: var(--space-s);
  left: var(--space-s);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-2xs);
  z-index: 50;
}
.nav-menu.is-open {
  display: block;
}
.nav-menu li + li {
  border-top: 1px solid var(--rule);
}
.nav-menu a {
  display: block;
  padding: var(--space-xs) var(--space-s);
  text-decoration: none;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 500;
}
.nav-menu a:hover {
  color: var(--brand-strong);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: transform var(--transition), background var(--transition),
    border-color var(--transition), color var(--transition);
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
}
.btn-ghost {
  background: transparent;
  color: var(--btn-ghost-fg);
  border-color: var(--rule);
}
.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}
.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}

/* ---------- Hero (flat ground band — no gradient) ---------- */
.hero {
  padding-block: var(--space-xl);
}
.hero__grid {
  display: grid;
  gap: var(--space-l);
}
.hero__title {
  font-size: var(--step-4);
}

/* ---------- Card grid (value props, products, posts) ---------- */
.grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-m);
}
.card h3 {
  margin-bottom: var(--space-2xs);
  font-size: var(--step-1);
}
.card p {
  color: var(--fg-soft);
  margin-bottom: 0;
}
.card .card__num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent-text);
  letter-spacing: var(--tracking-label);
}

/* Feature cards (homepage "Why Shroombiosis") — a "lab entry" treatment so the
   text-only value props read as intentional next to the image card grids:
   a faint leading-zero index number + a short honey accent rule under the eyebrow. */
.feature-cards { counter-reset: feat; }
.feature-cards > .card { position: relative; }
.feature-cards > .card::before {
  counter-increment: feat;
  content: counter(feat, decimal-leading-zero);
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-m);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--accent);
  opacity: 0.18;
  pointer-events: none;
}
.feature-cards > .card .card__num {
  position: relative;
  display: inline-block;
  padding-bottom: 0.7rem;
}
.feature-cards > .card .card__num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* ---------- Callout / note ---------- */
.callout {
  background: var(--callout-bg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--callout-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-m);
}
.callout > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SPEC STRIP — the signature. A label-grade data block: mono type, tabular
   figures, hairline rules carrying the structure. Renders correctly on both
   grounds via the semantic tokens. Doses unknown today render as "on label".
   ========================================================================== */
.spec-strip {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-strip);
  background: var(--card-bg);
  overflow: hidden;
}
.spec-strip table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.spec-strip caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--step--1);
  color: var(--fg-muted);
  padding: var(--space-s) var(--space-s) var(--space-2xs);
}
.spec-group th {
  text-align: left;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: 0.72rem;
  color: var(--fg-muted);
  padding: var(--space-s) var(--space-s) var(--space-2xs);
  border-top: 1px solid var(--rule);
}
.spec-strip tbody tr:first-child.spec-group th {
  border-top: 0;
}
.spec-row {
  border-top: 1px solid var(--rule);
}
.spec-row > * {
  padding: var(--space-2xs) var(--space-s);
  vertical-align: baseline;
}
.spec-name {
  text-align: left;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}
.spec-latin {
  display: block;
  font-style: italic;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--fg-muted);
  white-space: normal;
}
.spec-role {
  display: none; /* roles column hidden on small screens */
  color: var(--fg-soft);
  font-family: var(--font-body);
  line-height: 1.4;
}
.spec-dose {
  text-align: right;
  white-space: nowrap;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
/* On the dark hero ground, doses lift in honey (AA-safe on spore). */
.ground-spore .spec-dose {
  color: var(--accent);
}
.spec-dose .spec-unit {
  color: var(--fg-muted);
  font-weight: 400;
  margin-left: 0.15em;
}
.spec-dose.is-tbd {
  color: var(--fg-muted);
  font-style: italic;
  font-weight: 400;
}
.spec-dose.is-tbd::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--accent-text);
  vertical-align: 0.08em;
}
.spec-tag {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0 0.35em;
  margin-left: 0.4em;
  vertical-align: 0.1em;
}
.spec-disclosure {
  margin: 0;
  padding: var(--space-xs) var(--space-s) var(--space-s);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Compact variant: drop the roles column emphasis, tighten rows */
.spec-strip--compact .spec-row > * {
  padding-block: 0.3rem;
}

@media (min-width: 48rem) {
  .spec-strip--full .spec-role {
    display: table-cell;
  }
}

/* ---------- Feature / value-prop row ---------- */
.feature .feature__k {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  color: var(--accent-text);
}

/* ---------- Ingredient detail (science page) ---------- */
.ingredient {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-l);
}
.ingredient:first-of-type {
  border-top: 0;
}
.ingredient__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
}
.ingredient__latin {
  font-style: italic;
  color: var(--fg-muted);
}
.ingredient__role {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent-text);
}

/* ---------- Team ---------- */
.team-member {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-l);
}
.team-member:first-of-type {
  border-top: 0;
}
.person-role {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--accent-text);
  margin-bottom: var(--space-3xs);
}
.person-cred {
  color: var(--fg-muted);
  font-size: var(--step--1);
}

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--rule);
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-m) 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent-text);
  flex: none;
}
.faq details[open] summary::after {
  content: "–";
}
.faq details > *:not(summary) {
  margin-bottom: var(--space-m);
  color: var(--fg-soft);
  max-width: var(--measure);
}

/* ---------- Author box (blog E-E-A-T) ---------- */
.author-box {
  margin-top: var(--space-l);
  padding: var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.author-box .person-role {
  margin-bottom: var(--space-2xs);
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-muted);
  padding-block: var(--space-s) 0;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0;
  padding: 0;
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.4em;
  color: var(--rule);
}
.breadcrumbs a {
  color: var(--fg-muted);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--brand);
}
.breadcrumbs [aria-current="page"] {
  color: var(--fg-soft);
}

/* ---------- Blog list ---------- */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-l);
}
.post-list li {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-m);
}
.post-list :is(h2, h3) {
  font-size: var(--step-2);
  margin-bottom: var(--space-2xs);
}
.post-list :is(h2, h3) a {
  text-decoration: none;
}

/* Homepage "From the journal" teaser: a COMPACT card — a small thumbnail beside
   the text — distinct from the full-width image-cards on the /blog/ archive. The
   <picture>/WebP wrap + lazy-load are applied globally; these images sit below
   the fold, so they never compete for LCP, and the fixed box = zero layout shift.
   Mobile-first: a small thumb at 360px, larger from 40em up. */
.post-list--teaser li {
  display: grid;
  grid-template-columns: 92px 1fr;
  column-gap: var(--space-m);
  align-items: start;
}
.post-list--teaser .post-list__media {
  display: block;
  grid-column: 1;
}
.post-list--teaser .post-list__body {
  grid-column: 2;
  min-width: 0; /* let long titles wrap instead of blowing out the grid track */
}
.post-list--teaser .post-thumb {
  width: 100%;
  aspect-ratio: 4 / 3; /* a gentle crop from the 16:9 source */
  margin-bottom: 0; /* override the base .post-thumb */
}
@media (min-width: 40em) {
  .post-list--teaser li {
    grid-template-columns: 150px 1fr;
    column-gap: var(--space-l);
  }
}

/* ---------- Article body ---------- */
.post {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: var(--space-l);
}
.post-header .byline {
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.post-body {
  font-size: var(--step-0);
}
.post-body > * + * {
  margin-top: var(--space-s);
}
.post-body h2 {
  font-size: var(--step-2);
  margin-top: var(--space-l);
}
.post-body h3 {
  font-size: var(--step-1);
  margin-top: var(--space-m);
}
.post-body blockquote {
  margin: var(--space-m) 0;
  padding-left: var(--space-m);
  border-left: 3px solid var(--callout-rule);
  color: var(--fg-soft);
  font-style: italic;
}
.post-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.post-footer {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  color: var(--fg-muted);
}

/* Optional blog imagery (text-first: these only appear when a post sets `image`) */
.post-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  margin-bottom: var(--space-l);
}
.post-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  margin-bottom: var(--space-2xs);
}

/* ---------- Forms (contact) ---------- */
.field {
  display: block;
  margin-bottom: var(--space-m);
}
.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  margin-bottom: var(--space-3xs);
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-family: var(--font-body);
  padding: var(--space-xs);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.embed-slot {
  border: 1px dashed var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-m);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-align: center;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 0;
  border-top: 1px solid var(--rule);
  padding: var(--space-xl) var(--space-s) var(--space-l);
  text-align: center;
}
/* Footer = solid deeper base, no texture. Prevents the cover-crop seam where a
   textured .ground-spore CTA band meets the footer (each would crop the texture
   independently, so the mycelium never lines up across the boundary). The deeper
   tone reads as an intentional base the page rests on. */
.site-footer.ground-spore {
  background-image: none;
  background-color: var(--spore-deep);
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  color: inherit;
  text-decoration: none;
  margin-bottom: var(--space-m);
}
.footer-brand img {
  height: 1.9em;
  width: auto;
  display: block;
  flex: none;
}

/* Social icons */
.footer-social {
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--fg-soft);
  border: 1px solid var(--rule);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}
.footer-social svg { display: block; }

/* Die Tryin Co. logo in the fulfillment band */
.dtc-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dtc-logo img {
  width: 100%;
  max-width: 220px;
  height: auto;
}
.dtc-logo a {
  display: inline-block;
  transition: opacity 0.15s ease;
}
.dtc-logo a:hover,
.dtc-logo a:focus-visible { opacity: 0.82; }

/* Coming-soon launch waitlist (Klaviyo embedded form, products page) */
.notify-embed { margin-top: var(--space-s); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-m);
  margin-bottom: var(--space-m);
}
.footer-links a {
  color: var(--fg-soft);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.footer-links a:hover {
  color: var(--accent);
}
.fda-disclaimer {
  max-width: var(--measure);
  margin-inline: auto;
  color: var(--fg-muted);
}
.copyright {
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

/* ---------- Legal pages ---------- */
.legal-head {
  max-width: 46rem;
}
.legal-head h1 {
  font-size: var(--step-3);
}
.legal-body {
  max-width: 46rem;
}
.legal-body h2 {
  font-size: var(--step-2);
  margin-top: var(--space-xl);
}
.legal-body h3 {
  font-size: var(--step-1);
  margin-top: var(--space-l);
}
.legal-body p,
.legal-body ul,
.legal-body ol {
  margin-bottom: var(--space-s);
}
.legal-body ul,
.legal-body ol {
  padding-left: 1.25rem;
}
.legal-body li {
  margin-bottom: var(--space-2xs);
}
.legal-body a {
  word-break: break-word;
}
.legal-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: var(--space-l);
}
.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-m);
  font-size: var(--step--1);
}
.legal-body th,
.legal-body td {
  border: 1px solid var(--rule);
  padding: var(--space-2xs) var(--space-xs);
  text-align: left;
  vertical-align: top;
}
.legal-body th {
  background: var(--bg-inset);
  font-weight: 600;
}

/* ---------- Imagery: portraits, team, ingredients, media bands ---------- */
.author-portrait {
  width: 220px;
  max-width: 60%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  margin-bottom: var(--space-m);
}
.team-photo {
  width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  margin-bottom: var(--space-s);
  display: block;
}
.ingredient__grid {
  display: grid;
  gap: var(--space-m);
}
.ingredient__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}
.card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  margin-bottom: var(--space-s);
}
.media-split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
.media-split__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}
.figure-note {
  margin-top: var(--space-2xs);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

@media (min-width: 48rem) {
  .ingredient__grid {
    grid-template-columns: 240px 1fr;
    align-items: start;
  }
  .media-split {
    grid-template-columns: 1fr 1fr;
  }
  .media-split--reverse .media-split__text {
    order: 2;
  }
}

/* ==========================================================================
   MOTION — restrained scroll-reveal. Hidden state is scoped to .js so no-JS
   users always see content (it ships in the HTML). One orchestrated moment:
   the hero spec strip's rows settle in sequence.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Animate the CELLS, not the <tr> (transform on a table-row is unreliable across
   engines). Cells inherit the row's --i through the cascade, so the stagger holds
   and tabular alignment stays rock-steady. */
.js .spec-strip--hero .spec-row > * {
  opacity: 0;
  transform: translateY(6px);
}
.js .spec-strip--hero.is-in .spec-row > * {
  animation: specRowIn var(--reveal-dur) var(--reveal-ease) forwards;
  animation-delay: calc(var(--i, 0) * var(--stagger-step));
}
@keyframes specRowIn {
  to {
    opacity: 1;
    transform: none;
  }
}

/* The payoff: each dose "inks" from muted to honey a half-beat after its row
   lands (paint-only, keyed to the same --i). The hero strip lives on the spore
   ground, so honey = --accent (honey-on-spore). */
.js .spec-strip--hero .spec-dose:not(.is-tbd) {
  color: var(--fg-muted);
}
.js .spec-strip--hero.is-in .spec-dose:not(.is-tbd) {
  /* The dose cell IS a .spec-row > * too, and this selector outranks the
     row-reveal rule above — so it must carry BOTH animations, or the cell's
     `animation` gets replaced by doseInk alone and its opacity is never
     restored from 0 (the mg numbers would vanish). specRowIn fades it in with
     its row; doseInk inks the colour a half-beat later. */
  animation:
    specRowIn var(--reveal-dur) var(--reveal-ease) forwards,
    doseInk var(--reveal-dur) var(--micro-ease) forwards;
  animation-delay: calc(var(--i, 0) * var(--stagger-step)),
                   calc(var(--i, 0) * var(--stagger-step) + 110ms);
}
@keyframes doseInk {
  from { color: var(--fg-muted); }
  to {
    color: var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .spec-strip--hero .spec-row > *,
  .js .spec-strip--hero .spec-dose {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  /* Land doses on their final honey immediately (the doseInk end-state). */
  .js .ground-spore .spec-strip--hero .spec-dose:not(.is-tbd) { color: var(--accent); }
  .js .ground-paper .spec-strip--hero .spec-dose:not(.is-tbd) { color: var(--accent-text); }
}

/* ==========================================================================
   PREMIUM PASS: micro-interactions, layered depth, dose typography.
   GPU-only (transform / opacity / box-shadow / color) => zero layout shift.
   Hover gated behind @media (hover:hover); reduced motion handled below.
   ========================================================================== */

/* (1) Micro-interactions + strengthened focus */
.card {
  box-shadow: var(--elev-1);
  transition:
    transform var(--micro-dur) var(--micro-ease),
    box-shadow var(--micro-dur) var(--micro-ease),
    border-color var(--micro-dur) var(--micro-ease);
  will-change: transform;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(var(--lift));
    box-shadow: var(--elev-2);
    border-color: var(--accent);
  }
  .feature-cards > .card:hover h3 { color: var(--brand-strong); }
}
.card:focus-within { border-color: var(--brand); }

.btn {
  transition:
    transform var(--micro-dur) var(--micro-ease),
    background var(--micro-dur) var(--micro-ease),
    border-color var(--micro-dur) var(--micro-ease),
    box-shadow var(--micro-dur) var(--micro-ease),
    color var(--micro-dur) var(--micro-ease);
}
.btn-primary { box-shadow: var(--elev-1); }
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(var(--lift)); box-shadow: var(--elev-2); }
  .btn-ghost:hover { transform: translateY(var(--lift)); }
}
.btn:active { box-shadow: var(--elev-1); }

a {
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  transition:
    color var(--micro-dur) var(--micro-ease),
    text-decoration-color var(--micro-dur) var(--micro-ease);
}
a:hover { text-decoration-color: currentColor; }

/* Strengthened visible focus (never weakened): a bg-gap ring + the focus stroke,
   crisp on any ground and over a hover shadow. The base outline stays as the
   hard fallback so the indicator can never disappear. */
.btn:focus-visible,
.card:focus-within {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
}
.btn-primary:focus-visible:hover {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring), var(--elev-2);
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .btn-primary:hover, .btn-ghost:hover { transform: none !important; }
}

/* (2) Layered depth: resting elevation on real surfaces only (reading rules stay flat) */
.author-box, .guide-toc, .toc { box-shadow: var(--elev-1); }
.spec-strip { box-shadow: var(--elev-2), var(--edge-hi); }

/* (3) Dose typography: the numbers are the point */
.spec-dose {
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.01em;
}
.ground-paper .spec-dose:not(.is-tbd) { color: var(--accent-text); }

/* ==========================================================================
   RESPONSIVE — add layout complexity as the screen grows (mobile-up)
   ========================================================================== */
@media (min-width: 48rem) {
  .nav-toggle {
    display: none;
  }
  .nav-menu {
    display: flex;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    gap: var(--space-xs);
  }
  .nav-menu li + li {
    border-top: 0;
  }
  .nav-menu a {
    padding: var(--space-2xs) var(--space-xs);
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__grid--split {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
  }
  .ingredient__body--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
  }
}

@media (min-width: 64rem) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero {
    padding-block: var(--space-2xl);
  }
}

/* ==========================================================================
   SEO content mechanisms — Short Answer callout, reviewer line, guide/pillar.
   Added for the blog/pillar E-E-A-T + featured-snippet system.
   ========================================================================== */

/* ---------- Short answer (featured-snippet / AI-overview callout) ---------- */
.short-answer {
  margin: var(--space-m) 0 var(--space-l);
  padding: var(--space-m);
  border-left: 3px solid var(--accent);
  background: var(--callout-bg);
  border-radius: var(--radius-sm);
}
.short-answer__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--step--1);
  color: var(--accent-text);
  margin-bottom: var(--space-2xs);
}
.short-answer p:last-child {
  margin-bottom: 0;
  max-width: var(--measure);
}

/* ---------- Reviewer line (E-E-A-T independent review signal) ---------- */
.reviewed-by {
  margin-top: var(--space-2xs);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-style: italic;
}
.reviewed-by a {
  color: var(--fg-soft);
}

/* ---------- Post FAQ block spacing ---------- */
.post-faq {
  margin-top: var(--space-xl);
}

/* ---------- Guide / pillar page ---------- */
.guide {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: var(--space-l);
}
.guide-toc {
  margin: var(--space-l) 0;
  padding: var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.guide-toc p {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--step--1);
  color: var(--fg-muted);
  margin-bottom: var(--space-2xs);
}
.guide-toc ol {
  margin: 0;
  padding-left: 1.25em;
}
.guide-toc li + li {
  margin-top: var(--space-3xs);
}
.guide-toc a {
  text-decoration: none;
}
.guide-toc a:hover {
  text-decoration: underline;
}

/* ---------- Comparison table (honest competitor comparisons) ---------- */
.table-wrap {
  overflow-x: auto;
  margin: var(--space-m) 0;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.comparison-table th,
.comparison-table td {
  border: 1px solid var(--rule);
  padding: var(--space-2xs) var(--space-xs);
  text-align: left;
  vertical-align: top;
}
.comparison-table thead th {
  background: var(--bg-inset);
  font-family: var(--font-display);
  font-weight: 500;
}
.comparison-table tbody th {
  font-family: var(--font-body);
  font-weight: 600;
}
.comparison-table .is-win {
  color: var(--brand-strong);
  font-weight: 600;
}

/* Post tags + share row (below the article body) + tag-page list */
.post-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-m);
  margin: var(--space-l) 0;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}
.post-tags__label,
.post-share__label {
  display: block;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 0.45rem;
}
.tag-chip {
  display: inline-block;
  margin: 0 0.4rem 0.4rem 0;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--step--1);
  text-decoration: none;
  color: inherit;
}
.tag-chip:hover {
  border-color: var(--brand-strong);
  color: var(--brand-strong);
}
.post-share a {
  display: inline-block;
  margin-right: 0.7rem;
  font-size: var(--step--1);
}
.tag-post-list { list-style: none; padding: 0; }
.tag-post-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
.tag-post-list time { opacity: 0.65; font-size: var(--step--1); white-space: nowrap; }

/* "Read next" related posts */
.related-posts { margin: var(--space-l) 0; padding-top: var(--space-m); border-top: 1px solid var(--rule); }
.related-grid { list-style: none; padding: 0; margin: var(--space-m) 0 0; display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 600px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
.related-grid a { display: block; text-decoration: none; color: inherit; }
.related-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rule); margin-bottom: 0.5rem; }
.related-title { font-weight: 600; }
.related-grid a:hover .related-title { color: var(--brand-strong); }

/* Journal pagination */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--rule); }
.pagination__status { opacity: 0.7; font-size: var(--step--1); }

/* Screen-reader-only text (e.g. the "(opens in new tab)" cue on external links) */
.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;
}

/* "Updated" stamp in the post byline */
.post-updated { color: var(--fg-soft); }

/* "On this page" table of contents */
.toc {
  margin: var(--space-l) 0;
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.toc__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin: 0 0 var(--space-2xs);
}
.toc ol {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 0.3rem;
}
.toc a { text-decoration: none; color: inherit; }
.toc a:hover { color: var(--brand-strong); }