/* ==========================================================================
   Glen Feeds & Food Stores Ltd - main stylesheet
   Brand green #149531 and gold #AF843C, sampled from the logo.

   0. Webfonts
   1. Tokens
   2. Reset & base
   3. Typography
   4. Layout helpers
   5. Header & navigation
   6. Hero
   7. Stock board (raw materials)
   8. Feed products
   9. Buyers, numbers, testimonials, order band
   10. Content pages, archive, comments
   11. Footer
   12. Motion & accessibility
   13. Responsive
   14. Print
   ========================================================================== */

/* 0. Webfonts -----------------------------------------------------------
   Self-hosted so no render-blocking request leaves the server. Archivo and
   Public Sans are variable faces: one file each covers the whole weight
   range. latin-ext only downloads if the page actually uses those glyphs. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/publicsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/publicsans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Tokens -------------------------------------------------------------
   Two families of brand colour. The plain --green and --gold are the logo
   values and are used for fills, rules, dots and other non-text marks.
   The --*-text variants are darkened until they clear WCAG AA (4.5:1) on
   both --surface and --paper, and every piece of type uses those. */
:root {
  --green: #149531;
  --green-mid: #1e9132;
  --green-deep: #0c5f20;
  --green-dark: #0a3d16;
  --gold: #af843c;
  --gold-mid: #c79c50;
  --gold-pale: #e8d9b8;

  /* Accessible text colours. green-text 7.9:1 on white, gold-text 6.2:1. */
  --green-text: #0c5f20;
  --gold-text: #7d5c24;

  --ink: #17251b;
  --ink-soft: #4a5a4e;
  --ink-faint: #55635a;
  --paper: #f5f4ed;
  --surface: #ffffff;

  --stock-in: #149531;
  --stock-low: #c79c50;
  --stock-out: #9a5b3a;

  --rule: rgba(23, 37, 27, 0.14);
  --rule-strong: rgba(23, 37, 27, 0.34);
  --rule-light: rgba(245, 244, 237, 0.22);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.45vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.95vw, 2.05rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.9vw, 3rem);
  --step-4: clamp(2.4rem, 1.65rem + 3.6vw, 4.9rem);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 66ch;
  --shell: 1320px;

  /* Height of the sticky masthead. Anchor targets clear it by this much. */
  --header-h: 78px;

  /* Corners. Two tokens: panels curve a little more than the controls that
     sit inside them, which is what keeps a nested button from looking loose. */
  --radius-card: 14px;
  --radius-control: 10px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Without this every in-page anchor lands underneath the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

:target { scroll-margin-top: calc(var(--header-h) + 1rem); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* 3. Typography --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

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

p { margin: 0 0 1.15em; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 500;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 48ch;
}

/* The green/gold split from the wordmark, reused in headlines. */
.pivot { color: var(--gold); }
.section--dark .pivot { color: var(--gold-mid); }

/* 4. Layout helpers ----------------------------------------------------- */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.section { padding-block: clamp(2.25rem, 4.5vw, 4rem); }
.section--tight { padding-block: clamp(1.25rem, 2vw, 1.75rem); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--green-dark); color: var(--paper); }
.section--dark .lede { color: rgba(245, 244, 237, 0.88); }
.section--dark .eyebrow { color: var(--gold-mid); }
.section--dark .eyebrow::after { background: linear-gradient(90deg, var(--gold-mid), transparent); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

/* The banded rule lifted from the letterhead: gold third, green remainder. */
.band-rule {
  height: 6px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--gold) 0 26%, var(--green) 26% 100%);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green-dark);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Buttons --------------------------------------------------------------- */
.btn {
  --btn-bg: var(--green-text);
  --btn-fg: #ffffff;
  --btn-br: var(--green-text);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--btn-br);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn:hover,
.btn:focus-visible { --btn-bg: var(--green-dark); --btn-br: var(--green-dark); transform: translateY(-2px); }

.btn--gold { --btn-bg: var(--gold-text); --btn-br: var(--gold-text); }
.btn--gold:hover,
.btn--gold:focus-visible { --btn-bg: #5f461b; --btn-br: #5f461b; }

.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; --btn-br: var(--rule-strong); }
.btn--ghost:hover,
.btn--ghost:focus-visible { --btn-bg: var(--green-text); --btn-fg: #ffffff; --btn-br: var(--green-text); }

.section--dark .btn--ghost { --btn-br: var(--rule-light); }

.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link {
  text-decoration: none;
  color: var(--green-text);
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s var(--ease);
  padding-bottom: 2px;
}
.link:hover,
.link:focus-visible { background-size: 100% 1px; }

/* 5. Header & navigation ------------------------------------------------ */
.order-strip {
  background: var(--green-dark);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.order-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.55rem;
}

.order-strip a { text-decoration: none; }
.order-strip a:hover { color: var(--gold-mid); }
.order-strip__set { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.order-strip a { display: inline-flex; align-items: center; }
.order-strip__inner > span { display: inline-flex; align-items: center; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img,
.custom-logo { max-height: 52px; width: auto; }

.brand--text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green);
}

.brand__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 400;
  margin-top: 3px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}

.nav__list a:hover,
.nav__list a:focus-visible,
.nav__list .current-menu-item > a { color: var(--green-text); }

.nav__list li { position: relative; }

.nav__list .sub-menu {
  position: absolute;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--green);
  padding: 0.4rem 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s var(--ease);
}
.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__list .sub-menu a { display: block; padding: 0.55rem 1.1rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--green-text);
  color: var(--green-text);
  border-radius: var(--radius-control);
  padding: 0.5rem 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* 6. Hero --------------------------------------------------------------- */
.hero {
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4.5rem);
  background: linear-gradient(180deg, rgba(20, 149, 49, 0.05), transparent 60%), var(--paper);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.hero__title { margin: 0 0 1.5rem; font-size: var(--step-4); letter-spacing: -0.035em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

/* Trade card: what a buyer needs before picking up the phone */
.trade-card {
  border: 1px solid var(--rule-strong);
  border-top: 5px solid var(--green);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.trade-card__title {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
}

.trade-card__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.55rem 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  border-bottom: 1px dotted var(--rule);
}
.trade-card__row:last-child { border-bottom: 0; padding-bottom: 0; }
.trade-card__key { color: var(--ink-faint); }
.trade-card__val a { text-decoration: none; color: var(--green-text); font-weight: 600; }
.trade-card__val a:hover { color: var(--gold-text); }

/* Collapsible range, in the hero panel. Native <details>, so the browser
   supplies the behaviour and the marker is replaced rather than scripted. */
.range { border-bottom: 1px solid var(--rule); }
.range:last-of-type { border-bottom: 0; }

.range__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.range__head::-webkit-details-marker { display: none; }
.range__head:hover { color: var(--green-text); }

.range__name { flex: 1; }

.range__count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-faint);
}

/* The chevron, drawn from a rotated square so it needs no extra markup. */
.range__head::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--ease);
}
.range[open] .range__head::after { transform: rotate(-135deg) translate(-2px, -2px); }

.range__list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.range__list a {
  display: block;
  padding: 0.32rem 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-decoration: none;
}
.range__list a:hover,
.range__list a:focus-visible { color: var(--green-text); }

.range__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--green-text);
  text-decoration: none;
}
.range__all:hover .btn__arrow { transform: translateX(4px); }

/* 7. Stock board -------------------------------------------------------- */
.board { border-top: 2px solid var(--green); }

.board__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.9rem 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
}

.board__item { border-bottom: 1px solid var(--rule); }

.board__toggle {
  display: grid;
  /* Packaging needs the room - "10 kg . 20 kg . 70 kg bag" was wrapping. */
  grid-template-columns: 3.5rem minmax(0, 1.25fr) 9rem 13rem 2.5rem;
  gap: clamp(0.75rem, 2vw, 2rem);
  align-items: center;
  width: 100%;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: padding-inline 0.3s var(--ease), background 0.3s var(--ease);
}

.board__toggle:hover { padding-inline: 0.9rem; background: rgba(20, 149, 49, 0.045); }

/* No specification on this line, so the name takes the column back rather
   than leaving a gap in the middle of the row. */
.board__toggle[data-no-spec] { grid-template-columns: 3.5rem minmax(0, 1fr) 13rem 2.5rem; }

.board__num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--gold-text);
  font-weight: 500;
}

.board__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.board__spec,
.board__pack {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.4;
}

.board__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  white-space: nowrap;
}

.board__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--stock-in);
  box-shadow: 0 0 0 3px rgba(20, 149, 49, 0.16);
}
.board__status[data-status="low"] .board__dot { background: var(--stock-low); box-shadow: 0 0 0 3px rgba(199, 156, 80, 0.2); }
.board__status[data-status="out"] .board__dot { background: var(--stock-out); box-shadow: 0 0 0 3px rgba(154, 91, 58, 0.18); }
.board__status[data-status="seasonal"] .board__dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(175, 132, 60, 0.2); }

.board__sign {
  justify-self: end;
  width: 20px;
  height: 20px;
  position: relative;
  flex: none;
  color: var(--green-text);
}
.board__sign::before,
.board__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.board__sign::after { transform: rotate(90deg); }
.board__toggle[aria-expanded="true"] .board__sign::after { transform: rotate(0deg); }

.board__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.board__panel[data-open="true"] { grid-template-rows: 1fr; }
.board__panel > div { overflow: hidden; }

.board__body {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.board__text { grid-column: 2; max-width: var(--measure); }
.board__text > :last-child { margin-bottom: 0; }

.board__uses {
  grid-column: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
}

.board__uses li {
  padding: 0.5rem 0 0.5rem 1.4rem;
  border-bottom: 1px dotted var(--rule);
  position: relative;
}
.board__uses li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 1px;
}

.board__order { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }

/* 9. Buyers, numbers, testimonials, order band -------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.buyers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-top: 2rem;
}

.buyer {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 1.25rem;
}

.buyer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  margin: 0 0 0.35rem;
}

.buyer__note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin: 0;
  line-height: 1.5;
}

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.quote { border-top: 3px solid var(--gold); padding-top: 1.4rem; }
.quote__text { font-size: var(--step-1); line-height: 1.45; margin: 0 0 1.25rem; }

.quote__who {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  font-style: normal;
}
.quote__who strong { color: inherit; font-weight: 500; display: block; }
.section--dark .quote__who { color: rgba(245, 244, 237, 0.78); }

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* 8. Feed products & trade pages ---------------------------------------- */
.section__more { margin: 2rem 0 0; }

/* Breadcrumbs. Small, quiet, and the same trail the schema publishes. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: 1.25rem;
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover,
.crumbs a:focus-visible { color: var(--green-text); }
.crumbs__sep { margin-left: 0.5rem; opacity: 0.5; }

/* Icons ------------------------------------------------------------------
   Sized in em so they scale with whatever text they sit beside, and coloured
   by currentColor so they never need a variant per context. */
.icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -0.16em;
}

/* Beside a label, an icon needs a gap; inside a flex row it gets one free. */
.order-strip a .icon,
.order-strip span .icon { margin-right: 0.4em; }

.channel__label .icon { width: 1.15em; height: 1.15em; color: var(--gold-text); }

.channel__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.channel__note .icon { color: var(--ink-faint); margin-right: 0.35em; }

.channel__action .icon { width: 1.15em; height: 1.15em; }

/* The button is already a flex row with a gap, so the icon only needs
   sizing - and nudging up, because the label is uppercase mono and sits
   optically higher than the icon's centre. */
.btn .icon {
  width: 1.15em;
  height: 1.15em;
  margin-top: -0.05em;
}

/* The floating order button carries one too. */
.wa-float .icon { width: 1.15em; height: 1.15em; }

/* Search and filter above a trade listing. */
.trade-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.trade-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Pushed right, and sized to its content rather than filling the row. */
  margin-left: auto;
  flex: 0 1 24rem;
}

.trade-search__field {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  font: inherit;
  font-size: var(--step--1);
  font-family: var(--font-mono);
  color: var(--ink);
}
.trade-search__field::placeholder { color: var(--ink-faint); }

.trade-search__submit { padding-block: 0.7rem; }

/* Type-ahead results. Anchored to the field, above everything below it. */
.trade-search { position: relative; }

.trade-search__results {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 22rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--green);
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(10, 61, 22, 0.14);
}

.trade-search__result a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
}

.trade-search__result[aria-selected="true"] a,
.trade-search__result a:hover,
.trade-search__result a:focus-visible { background: rgba(20, 149, 49, 0.08); }

.trade-search__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.trade-search__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.trade-tools .trade-filter { margin-bottom: 0; }
.trade-tools__reset { margin: 0; font-size: var(--step--1); }

/* Category chips above a board. */
.trade-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.trade-filter__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.trade-filter__item:hover,
.trade-filter__item:focus-visible { border-color: var(--green-text); color: var(--green-text); }

.trade-filter__item[aria-current="page"] {
  background: var(--green-text);
  border-color: var(--green-text);
  color: #fff;
}

.trade-filter__count { opacity: 0.6; font-size: 0.85em; }

/* The feed range on the front page. */
/* Four to a row, standing apart rather than butted together. Separated
   cards also mean a short last row leaves nothing behind it. */
.feed-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
}

.feed-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--green);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.feed-card:hover,
.feed-card:focus-visible {
  border-color: var(--green-text);
  border-top-color: var(--green);
  transform: translateY(-3px);
}

.feed-card__body { padding: 1.1rem 1.15rem 1.25rem; display: block; }

.feed-card__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

/* The grade a material is bought on. Given the weight the packaging line
   does not get, because this is the number a miller compares. */
.feed-card__spec {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--green-text);
  margin-bottom: 0.25rem;
}

.feed-card__pack {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

/* Thumbnail, or a monogram when there is no photograph yet. */
.trade-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
  position: relative;
}

/* Contain, not cover. A portrait sack in a landscape card must sit whole
   inside it rather than be cropped to its middle third. */
.trade-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
}

/* Illustration standing in for a photograph. Contained rather than cropped,
   so the sack or the heap is never cut in half by the card's aspect ratio. */
.trade-thumb__art { object-fit: contain; background: var(--paper); }

/* The sack is drawn inline, so it is an <svg> rather than an <img>. */
svg.trade-thumb__art { width: 100%; height: 100%; display: block; }

.trade-thumb__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -0.04em;
  color: var(--green);
  background:
    linear-gradient(135deg, rgba(20, 149, 49, 0.1), rgba(175, 132, 60, 0.12)),
    var(--paper);
  opacity: 0.85;
}

/* Contact page ----------------------------------------------------------
   Ordered by what a buyer does, not by what is easiest to lay out. The ways
   to reach us come first and carry the real numbers, because most arrivals
   are on a phone and want a price. The form and the directions follow. */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
  margin-top: clamp(1rem, 1.8vw, 1.4rem);
  align-items: stretch;
}

.channel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  height: 100%;
  padding: 1.4rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  /* Same green rule the trade cards carry, so the two read as one family. */
  border-top: 5px solid var(--green);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

a.channel:hover,
a.channel:focus-visible {
  border-color: var(--green-text);
  border-top-color: var(--green);
  transform: translateY(-2px);
}

.channel__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 500;
}

.channel__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* An address is not a headline - set it in mono and let it wrap. */
.channel__value--email {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
  color: var(--green-text);
  text-decoration: none;
}
a.channel__value--email:hover,
a.channel__value--email:focus-visible { color: var(--gold-text); }

/* WhatsApp sits inside this card now rather than owning one. Pushed to the
   bottom so it lands on the same baseline as the other cards' actions. */
.channel__action {
  margin-top: auto;
  padding-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-text);
  text-decoration: none;
  font-weight: 500;
}
.channel__action:hover,
.channel__action:focus-visible { color: var(--gold-text); }
.channel__action:hover .btn__arrow { transform: translateX(4px); }

/* The action is followed by its own note, so that note must not take the
   auto margin that pins the action to the bottom. */
.channel__action + .channel__note { margin-top: 0.4rem; }

.channel__address {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-style: normal;
  line-height: 1.55;
  color: var(--ink);
  margin: 0.15rem 0 0;
}
.channel__address span { display: block; }
.channel__address .contact__postal { color: var(--ink-faint); font-size: var(--step--1); }

.channel__note {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-faint);
  margin-top: 0.35rem;
}

/* Pushed to the bottom so the call-to-action sits on the card's baseline
   however many address lines are above it. */
.channel__note--action {
  margin-top: auto;
  padding-top: 0.6rem;
  color: var(--green-text);
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
a.channel:hover .channel__note--action .btn__arrow { transform: translateX(4px); }

/* Every number visible and dialable, rather than one button and a lookup. */
.channel__numbers { list-style: none; margin: 0.15rem 0 0; padding: 0; }

.channel__numbers a {
  display: block;
  padding: 0.12rem 0;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--green-text);
  text-decoration: none;
}
.channel__numbers a:hover,
.channel__numbers a:focus-visible { color: var(--gold-text); }

/* Filled in by script, not by PHP: a cached page would freeze the answer. */
.channel__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 40px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  background: rgba(23, 37, 27, 0.08);
  color: var(--ink-soft);
}
.channel__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.channel__status[data-state="open"] { background: rgba(20, 149, 49, 0.14); color: var(--green-text); }

.contact { padding-block: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 2.5vw, 2rem); }

/* Scoped so it outranks the .entry padding set further down. Without this an
   empty contact page - one waiting on its form shortcode - padded out to a
   screenful of nothing above the footer. */
.contact .contact__entry { padding-block: 0; }
.contact__entry > :first-child { margin-top: 0; }
.contact__entry > :last-child { margin-bottom: 0; }

.contact__address {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-style: normal;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.contact__address span { display: block; }
.contact__postal { color: var(--ink-faint); }

.contact__directions { margin-top: 1.1rem; }

.contact__hint {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  line-height: 1.55;
  margin: 1rem 0 0;
}
.contact__hint a { color: var(--green-text); }

/* Whatever form plugin gets used, give its fields the theme's shape. */
.contact__entry input[type="text"],
.contact__entry input[type="email"],
.contact__entry input[type="tel"],
.contact__entry input[type="number"],
.contact__entry select,
.contact__entry textarea {
  width: 100%;
  max-width: 32rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
}

.contact__entry label { font-family: var(--font-mono); font-size: var(--step--1); display: block; margin-bottom: 0.3rem; }

/* A single material or feed --------------------------------------------
   The picture leads on the left. Beside it the column reads in the order a
   buyer thinks: what the thing is, then its trading facts, then the enquiry,
   because a price is what the visit is for. */
.trade-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
}

.trade-hero__media .trade-thumb {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.trade-hero__media .trade-thumb__fallback { font-size: clamp(2.5rem, 6vw, 4rem); }

/* The description sits above the table, so it takes the column's full width
   rather than the article measure, and carries no padding of its own. Scoped
   to the hero so it outranks the .entry padding set further down. */
.trade-hero .trade-hero__copy {
  padding-block: 0;
  max-width: none;
  margin-bottom: 1.4rem;
}
.trade-hero__copy > :last-child { margin-bottom: 0; }

/* Specification table. Mono keys, mono values - these are figures. */
.spec { margin: 0; border-top: 2px solid var(--green); }

.spec__row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
}

.spec dt { color: var(--ink-faint); margin: 0; }
.spec dd { margin: 0; color: var(--ink); }

/* The enquiry. No price to publish, so the ask is the thing. */
.trade-ask {
  margin-top: 1.75rem;
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-top: 5px solid var(--green);
  border-radius: var(--radius-card);
}

.trade-ask__lead {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.trade-ask__note {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}

.trade-ask__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.trade-body { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.trade-body__back { margin: 2rem 0 0; font-size: var(--step--1); }

/* Typical uses, as a set rather than a bulleted afterthought. Runs the full
   shell: these are short labels in a grid, not prose, so the reading measure
   only stranded them in the left half of the page. */
.uses { margin: 2.5rem 0 0; }

/* The hero already pads below itself; whatever opens the body adds nothing. */
.trade-body > :first-child { margin-top: 0; }

.uses__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  /* The cells carry the rules, so the curve has to be clipped at the group. */
  border-radius: var(--radius-card);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.uses__grid li {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0;
  padding: 0.9rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.45;
}

.trade-terms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }

.trade-terms__item {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--gold-text);
  border-bottom: 1px solid currentColor;
}

/* Other lines on the same shelf. */
.related { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); }

/* auto-fit, not auto-fill: with four items in a six-track grid, auto-fill
   leaves two empty tracks behind. The rules live on the items rather than
   showing a container background through a 1px gap, so a cell with nothing
   in it is nothing, not a grey block. */
.related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.related__item {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 1.15rem;
  text-decoration: none;
  transition: background 0.25s var(--ease);
}
.related__item:hover,
.related__item:focus-visible { background: rgba(20, 149, 49, 0.05); }

.related__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.related__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: 0.3rem;
}

/* Search form. */
.searchform { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: 1.5rem; }

.searchform__field {
  flex: 1 1 16rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
}
.searchform__field::placeholder { color: var(--ink-faint); }

/* Admin-only hints sit apart from real navigation. */
.nav__hint { opacity: 0.75; font-style: italic; }

/* 10. Content pages, archive, comments ---------------------------------- */
.page-head {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

/* The heading carries its own generous margin from the type scale, which is
   right in a hero and far too loose stacked under an eyebrow. Tighten the
   whole group so the head reads as one block rather than four spaced lines. */
.page-head .crumbs { margin-bottom: 0.9rem; }
.page-head .eyebrow { margin-bottom: 0.8rem; }
.page-head h1 { margin-bottom: 0.25em; font-size: var(--step-3); }
/* The 48ch measure suits a lede sitting beside something in a two-column
   hero. A page head has the full width to itself, so it can run longer. */
.page-head .lede { margin-bottom: 0; max-width: 78ch; }
.page-head > .shell > :last-child { margin-bottom: 0; }

/* Centred, not left-hugging. A 66ch column inside a 1320px shell was
   stranding the copy against one edge with half the page empty beside it. */
.entry {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}
.entry--wide { max-width: none; }

.entry h2, .entry h3, .entry h4 { margin-top: 1.9em; }
.entry img { border-radius: 3px; margin-block: 2rem; }
.entry ul, .entry ol { padding-left: 1.25rem; margin-bottom: 1.5em; }
.entry li { margin-bottom: 0.4em; }

.entry blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--gold);
  font-size: var(--step-1);
  line-height: 1.5;
}

.entry a { color: var(--green-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.entry table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; font-size: var(--step--1); }
.entry th, .entry td { border: 1px solid var(--rule); padding: 0.65rem 0.85rem; text-align: left; }
.entry th { background: rgba(20, 149, 49, 0.07); font-family: var(--font-mono); font-weight: 500; }

.entry code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(23, 37, 27, 0.07);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

.entry pre { background: var(--green-dark); color: var(--paper); padding: 1.25rem; border-radius: 3px; overflow-x: auto; }
.entry pre code { background: none; padding: 0; }

/* About page ------------------------------------------------------------
   The copy lives in the page body as blocks so it stays editable, so the
   structure has to come from the element styles rather than from markup. */
/* The article fills the shell so the tab row has room to sit on one line;
   the reading column inside it is widened but still bounded, because a
   paragraph set the full 1320px would run past where the eye can track. */
.entry--about { max-width: none; }

/* The opening paragraph carries the whole proposition - set it up. */
.entry--about__intro > p:first-of-type {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* One centred column holding the intro, the tab row and the panels, so all
   three share the same left and right edges rather than the text sitting
   centred inside a full-width article with the tabs adrift beside it. */
.entry--about__intro,
.entry--about .tabs {
  max-width: 90ch;
  margin-inline: auto;
}

.entry--about__intro > :last-child { margin-bottom: 0; }

.entry--about .tabs__panel { max-width: none; }
.entry--about .tabs__panel h2 { font-size: var(--step-2); margin-top: 0; }

.entry--about h3 {
  margin-top: 2.4em;
  font-size: var(--step-1);
  color: var(--ink-soft);
}

/* "How we trade" is four parallel points, not a sequence - set them side by
   side so they read as a set rather than a list to be worked through. */
.entry--about ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.entry--about ul li {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0;
  padding: 1.15rem 1.25rem;
  font-size: var(--step--1);
  line-height: 1.6;
}

.entry--about ul li strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.4rem;
}

.entry--about .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 3rem 0;
}

/* The owner's note about their own story, until they replace it. */
.entry--about h3 + p em { color: var(--ink-faint); }

/* Tabs ------------------------------------------------------------------
   Until the script marks the group ready every panel is shown, so the page
   degrades to a plain document rather than to one section and dead buttons.
   The duplicated heading inside each panel is for that state; once tabs are
   live the tab itself is the heading, so it is hidden. */
.tabs { margin-top: clamp(2rem, 4vw, 3rem); }

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 0;
  margin-bottom: 2rem;
}

.tabs__tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 0.65rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.tabs__tab:hover { color: var(--green-text); }

.tabs__tab[aria-selected="true"] {
  color: var(--green-text);
  border-bottom-color: var(--green);
  font-weight: 500;
}

.tabs__panel:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.tabs__panel > :first-child { margin-top: 0; }

/* Script has run: the tab row carries the headings, so drop the duplicates. */
.tabs[data-ready="true"] .tabs__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* No script: the panels run on as one document, so keep them apart. */
.tabs:not([data-ready="true"]) .tabs__list { display: none; }
.tabs:not([data-ready="true"]) .tabs__panel + .tabs__panel { margin-top: 2.5rem; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--green); }

.card__thumb { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card__body { padding: 1.35rem; }

.card__meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}

.card__title { font-size: var(--step-1); margin-bottom: 0.5rem; }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--green-text); }

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding-block: 2rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.pagination .screen-reader-text { display: none; }
.pagination .page-numbers { padding: 0.5rem 0.85rem; border: 1px solid var(--rule); text-decoration: none; }
.pagination .current { background: var(--green-text); color: #fff; border-color: var(--green-text); }

.comments { max-width: var(--measure); padding-bottom: 4rem; }
.comments ol { list-style: none; padding: 0; }
.comments .comment-body { border-bottom: 1px solid var(--rule); padding: 1.25rem 0; }
.comments input[type="text"],
.comments input[type="email"],
.comments input[type="url"],
.comments textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  font: inherit;
}

/* 11. Footer ------------------------------------------------------------ */
.colophon {
  background: var(--green-dark);
  color: var(--paper);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.colophon a { text-decoration: none; }
.colophon a:hover { color: var(--gold-mid); }

/* The wordmark is green and gold on a transparent ground, which only reads
   at about 3:1 against the dark footer. Setting it on a light plate keeps the
   brand split intact instead of flattening the logo to one colour, and works
   for whatever logo gets uploaded later. */
.colophon__logo {
  display: inline-block;
  max-width: 230px;
  margin-bottom: 1.25rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border-radius: var(--radius-control);
  line-height: 0;
  transition: background 0.25s var(--ease);
}
.colophon__logo:hover,
.colophon__logo:focus-visible { background: #fff; }
.colophon__logo img { width: 100%; height: auto; }

.colophon__blurb { max-width: 38ch; }

/* Block widgets print their own <h2> and ignore the before_title argument
   passed to register_sidebar(), so a stray Archives widget rendered at full
   display size. Pull anything in this area back to the footer's own scale. */
.colophon__widgets { margin-top: 1.75rem; }

.colophon__widgets h1,
.colophon__widgets h2,
.colophon__widgets h3,
.colophon__widgets h4,
.colophon__widgets h5,
.colophon__widgets h6,
.colophon__widgets .wp-block-heading,
.colophon__widgets .widget-title {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.colophon__widgets .widget + .widget { margin-top: 1.5rem; }

.colophon__widgets ul,
.colophon__widgets ol { list-style: none; margin: 0; padding: 0; line-height: 2; }

.colophon__widgets li { font-size: var(--step--1); }

.colophon__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule-light);
}

.colophon__heading {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin-bottom: 1rem;
}

.colophon__list { list-style: none; margin: 0; padding: 0; line-height: 1.85; }

/* Icon and label on one line, so a wrapping address stays hung off the pin
   rather than sliding back under it. */
.colophon__list li { display: flex; align-items: flex-start; gap: 0.5rem; }
.colophon__list li > a { display: inline-flex; align-items: flex-start; gap: 0.5rem; }

.colophon__list .icon {
  color: var(--gold-mid);
  margin-top: 0.42em;
  width: 0.95em;
  height: 0.95em;
}

/* Lines that continue the one above and carry no icon of their own. */
.colophon__cont { padding-left: calc(0.95em + 0.5rem); }

.colophon__list a:hover .icon,
.colophon__list a:focus-visible .icon { color: var(--gold-pale); }

.colophon__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: rgba(245, 244, 237, 0.72);
}

/* Floating order button */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem;
  background: var(--green-text);
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  box-shadow: 0 8px 24px rgba(10, 61, 22, 0.28);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); background: var(--green-dark); }

/* 12. Motion & accessibility -------------------------------------------- */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* 13. Responsive -------------------------------------------------------- */
@media (max-width: 1040px) {
  .feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .board__toggle,
  .board__toggle[data-no-spec] { grid-template-columns: 3rem minmax(0, 1fr) 11rem 2.2rem; row-gap: 0.4rem; }
  .board__spec { grid-column: 2; }
  .board__toggle[data-no-spec] .board__pack { grid-column: 3; }
}

@media (max-width: 980px) {
  .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero__grid,
  .split,
  .cta-band,
  .trade-hero,
  .section__head { grid-template-columns: minmax(0, 1fr); }

  .section__head { align-items: start; }
  .colophon__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .board__body { grid-template-columns: minmax(0, 1fr); }
  .board__text, .board__uses { grid-column: 1; }
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  .order-strip__set { gap: 0.9rem; }

  .site-nav {
    position: fixed;
    inset: auto 0 0 0;
    top: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: 1.25rem var(--gutter) 2rem;
    display: none;
    overflow-y: auto;
  }
  .site-nav[data-open="true"] { display: block; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--rule); }
  .nav__list a { display: block; padding: 0.9rem 0; font-size: var(--step-0); }
  .nav__list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    padding: 0 0 0.5rem 1rem;
  }

  .board__toggle,
  .board__toggle[data-no-spec] { grid-template-columns: 2.5rem minmax(0, 1fr) 2rem; }
  .board__spec { grid-column: 2 / -1; }
  .board__pack { grid-column: 2 / -1; }
  .board__status { grid-column: 2 / -1; }

  .colophon__grid { grid-template-columns: minmax(0, 1fr); }
  .trade-card__row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .wa-float { padding: 0.75rem 1rem; }

  .channels { grid-template-columns: minmax(0, 1fr); }
  .feed-card__name { font-size: var(--step-0); }
  .trade-thumb__fallback { font-size: 1.7rem; }
}

/* 14. Print --------------------------------------------------------------
   A buyer who prints the board is taking it to someone who authorises the
   purchase. Keep the facts, drop the furniture. */
@media print {
  .order-strip,
  .masthead,
  .nav-toggle,
  .site-nav,
  .wa-float,
  .band-rule,
  .trade-filter,
  .related,
  .comments,
  .hero__actions,
  .trade-ask__actions,
  .channel__status,
  .contact__directions,
  .searchform { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }

  .section,
  .section--surface,
  .section--dark { background: #fff !important; color: #000 !important; padding-block: 0.75rem; }

  .section--dark .lede,
  .section--dark .eyebrow { color: #000 !important; }

  .shell { width: 100%; }

  /* Every row open, so the printed sheet carries the specifications. */
  .board__panel { grid-template-rows: 1fr !important; }
  .board__panel > div { overflow: visible !important; }
  .board__item { break-inside: avoid; }
  .board__sign { display: none; }

  .trade-hero { grid-template-columns: minmax(0, 1fr); }

  a { text-decoration: none; color: #000; }

  /* Spell links out - a printed page has nothing to click. */
  .entry a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }

  .colophon { background: #fff !important; color: #000 !important; }
  .colophon a { color: #000; }
}