/*
Theme Name: PoultraIQ
Theme URI: https://poultraiq.com/
Author: PoultraIQ
Description: Custom theme for PoultraIQ, a trade name of MINA FARMS LLC. Built from the
             original hand-authored markup so the typographic system, colour tokens and
             layout compositions are preserved exactly. No page builder, no framework.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: poultraiq
*/

/* PoultraIQ — a trade name of MINA FARMS LLC
   Static stylesheet. No build step. */

:root {
  --bg: #F6F3EA;
  --panel: #FFFDF7;
  --panel-alt: #EFEBDD;
  --border: #D9D3C0;
  --text: #16180F;
  --text-muted: #555B45;
  --text-faint: #7E8369;
  --accent: #7A5C1E;
  --accent-dim: #B4913F;
  --alert-high: #A3341C;
  --alert-high-bg: #F7E4DE;
  --alert-med: #7A5C1E;
  --alert-med-bg: #F6EDD6;
  --good: #446B33;

  --maxw: 1200px;
  --prose: 68ch;
  --pad-y: clamp(80px, 8vw, 140px);
  --gut: clamp(20px, 4vw, 48px);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* introduced by the light palette */
  --scrim: 246, 243, 234;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--text); text-decoration-color: var(--accent-dim); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--accent-dim); color: var(--text); }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.002em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 5.2vw, 40px); }
h2 { font-size: clamp(28px, 4vw, 38px); }
h3 { font-size: clamp(21px, 2.4vw, 26px); font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }

p { margin: 0 0 1.05em; max-width: var(--prose); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  display: block;
}
.eyebrow--muted { color: var(--text-muted); }

.standfirst {
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--text);
  max-width: 60ch;
  margin-bottom: 0;
}

.lede { color: var(--text-muted); }
.muted { color: var(--text-muted); }
.mono { font-family: var(--mono); }

.small {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

section { padding-top: var(--pad-y); padding-bottom: var(--pad-y); }
section.tight { padding-top: clamp(52px, 5vw, 84px); padding-bottom: clamp(52px, 5vw, 84px); }

.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }
.panel-bg { background: var(--panel); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.split--even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.split--wide-right { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.55fr); }

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.stack-lg > * + * { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(17, 19, 14, 0.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand svg { display: block; color: var(--text); }
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}
.wordmark i { font-style: normal; color: var(--accent); }

.nav { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px); }
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.nav a.btn {
  padding: 11px 18px;
  color: #16180F;
  border: 1px solid var(--accent);
  font-weight: 600;
}
.nav a.btn:hover { color: #16180F; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 20px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #16180F;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 150ms ease, color 150ms ease;
}
.btn:hover { background: #DDAC49; border-color: #DDAC49; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--panel-alt); border-color: var(--accent-dim); color: var(--text); }

.btn--sm { padding: 10px 16px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 3px;
}
.link-arrow:hover { border-bottom-color: var(--accent); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 9px 10px;
  cursor: pointer;
  color: var(--text);
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle span + span { margin-top: 4px; }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 8px var(--gut) 22px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
  .nav a[aria-current="page"] { border-bottom-color: var(--border); color: var(--accent); }
  .nav .btn { margin-top: 16px; justify-content: center; }
  .site-header .wrap { position: relative; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #16180F;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- hero (homepage only) ---------- */

.hero {
  position: relative;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding-top: clamp(64px, 8vw, 116px);
  padding-bottom: clamp(56px, 7vw, 104px);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  opacity: 0.5;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17,19,14,0.96) 0%, rgba(17,19,14,0.86) 42%, rgba(17,19,14,0.42) 100%),
    linear-gradient(0deg, rgba(17,19,14,0.92) 0%, rgba(17,19,14,0.2) 62%);
}
.hero .wrap { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(38px, 6.1vw, 78px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: 0.004em;
  max-width: 19ch;
  margin-bottom: 26px;
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
}
.hero-sub {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 58ch;
  margin-bottom: 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.cred-strip {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border);
}
.cred-strip span {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 16px 26px 0 0;
  margin-right: 26px;
  border-right: 1px solid var(--border);
  padding-bottom: 4px;
}
.cred-strip span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

/* ---------- page head (interior) ---------- */

.page-head {
  padding-top: clamp(54px, 6vw, 92px);
  padding-bottom: clamp(44px, 5vw, 72px);
  border-bottom: 1px solid var(--border);
}
.page-head h1 { max-width: 22ch; margin-bottom: 22px; }

/* ---------- stats ---------- */

.statblock { border-top: 1px solid var(--border); }
.stat {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.stat b {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--accent);
  line-height: 1;
  flex: 0 0 auto;
  min-width: 3.6em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 14px; color: var(--text-muted); line-height: 1.45; }

.footnote {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-top: 16px;
}
.footnote a { color: var(--text-muted); }
.footnote a:hover { color: var(--accent); }

/* ---------- cards ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: clamp(22px, 2.4vw, 30px);
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--text-muted); }

.featurerow {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.featurerow:last-of-type { border-bottom: 1px solid var(--border); }
.featurerow dt {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 3px;
}
.featurerow dd { margin: 0; font-size: 15.5px; color: var(--text-muted); }

.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 2px;
}
.callout p { font-size: 15.5px; color: var(--text); max-width: 74ch; }

.pullquote {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 26px;
  margin: 0 0 28px;
}
.pullquote p {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(23px, 2.9vw, 32px);
  line-height: 1.2;
  color: var(--text);
  max-width: 30ch;
  margin: 0;
}

.checklist { list-style: none; margin: 0; padding: 0; max-width: var(--prose); }
.checklist li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  color: var(--text-muted);
}
.checklist li:first-child { border-top: 1px solid var(--border); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 24px;
  width: 12px;
  height: 1px;
  background: var(--accent-dim);
}

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li {
  counter-increment: s;
  position: relative;
  padding: 26px 0 26px 66px;
  border-top: 1px solid var(--border);
}
.steps li:last-child { border-bottom: 1px solid var(--border); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 26px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.steps strong { display: block; font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: 0.01em; margin-bottom: 4px; }
.steps p { font-size: 15.5px; color: var(--text-muted); margin: 0; }

.engagement {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(30px, 3.5vw, 44px) 0;
  border-top: 1px solid var(--border);
}
.engagement:last-of-type { border-bottom: 1px solid var(--border); }
.engagement h3 { margin-bottom: 12px; }
.engagement .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 2px;
}
.engagement .num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}
.engagement .deliverable {
  font-size: 14px;
  color: var(--text-muted);
  border-left: 2px solid var(--accent-dim);
  padding-left: 14px;
  margin-top: 18px;
  font-style: italic;
}

/* roadmap timeline */
.stage {
  position: relative;
  padding: clamp(28px, 3vw, 40px) 0 clamp(28px, 3vw, 40px) clamp(24px, 3vw, 44px);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.stage:last-of-type { border-bottom: 1px solid var(--border); }
.stage::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: clamp(34px, 3.4vw, 48px);
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.stage .label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}
.stage .gate {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 14px;
  max-width: 64ch;
}
.stage p { font-size: 15.5px; color: var(--text-muted); }

.factstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.factstrip span {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 16px 24px 16px 0;
  border-right: 1px solid var(--border);
  margin-right: 24px;
}
.factstrip span:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.factstrip b { color: var(--text); font-weight: 600; }

/* ---------- product mock (HTML/CSS, not an image) ---------- */

.mock {
  max-width: 940px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mock-bar .live { color: var(--good); display: inline-flex; align-items: center; gap: 7px; }
.mock-bar .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--accent-dim) var(--panel-alt);
}
.tablewrap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

table.log {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
table.log caption {
  text-align: left;
  padding: 12px 16px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
table.log th {
  text-align: right;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--panel);
}
table.log th:first-child, table.log td:first-child { text-align: left; padding-left: 16px; }
table.log th:last-child, table.log td:last-child { text-align: left; padding-right: 16px; }
table.log td {
  text-align: right;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(44, 50, 35, 0.55);
  color: var(--text);
  white-space: nowrap;
}
table.log tbody tr:last-child td { border-bottom: 0; }
table.log tr.flagged td { background: var(--alert-high-bg); color: #F3DFD8; }
table.log tr.flagged td:first-child { box-shadow: inset 3px 0 0 var(--alert-high); }
.flagpill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #DC7358;
  border: 1px solid var(--alert-high);
  padding: 2px 7px;
  border-radius: 2px;
  display: inline-block;
}
.dash { color: var(--text-muted); }

.alerts { padding: 16px; display: grid; gap: 12px; border-top: 1px solid var(--border); }
.alert {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--alert-med-bg);
  padding: 14px 16px;
  border-radius: 2px;
}
.alert--high { border-left-color: var(--alert-high); background: var(--alert-high-bg); }
.alert .sev {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.alert--high .sev { color: #DC7358; }
.alert p { font-size: 14px; margin: 0; color: var(--text); max-width: none; }
.notes-line {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0 16px 16px;
  margin: 0;
  max-width: none;
}
.scroll-hint {
  display: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 16px 0;
  margin: 0;
}
@media (max-width: 760px) {
  .scroll-hint { display: block; }
  table.log caption { position: sticky; left: 0; width: max-content; }
  table.log th:first-child, table.log td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--border);
  }
  table.log tr.flagged td:first-child { background: #2E1B15; box-shadow: inset 3px 0 0 var(--alert-high), 1px 0 0 var(--border); }
}

/* ---------- image blocks ---------- */

.figure {
  /* Share the page measure with .wrap so the image and its caption sit on the
     same left edge as the surrounding text. Without this the figure is a
     direct child of main and runs the full window width, which reads as a
     broken layout rather than a deliberate full-bleed. */
  width: 100%;
  max-width: var(--maxw);
  margin: 1em auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.figure img { width: 100%; height: clamp(220px, 34vw, 440px); object-fit: cover; }
.figure figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  /* The gutter now lives on .figure, so the caption only needs its own
     vertical spacing; keeping the horizontal value here would inset it twice. */
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.texture-section { position: relative; overflow: hidden; }
.texture-section > .texture-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.texture-section > .texture-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.4; }
.texture-section > .texture-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(17,19,14,0.94) 0%, rgba(17,19,14,0.72) 55%, rgba(17,19,14,0.5) 100%);
}
.texture-section > .wrap { position: relative; z-index: 1; }

/* ---------- form ---------- */

.form { max-width: 620px; display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field select, .field textarea {
  font-family: var(--body);
  font-size: 15px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 11px 13px;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}
.field select { appearance: none; background-image: none; }

.contact-block {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.contact-block a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); }

/* ---------- legal prose ---------- */

.prose { max-width: var(--prose); }
.prose h2 { font-size: clamp(22px, 2.6vw, 27px); margin-top: 44px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; margin-top: 30px; }
.prose p, .prose li { font-size: 15.5px; color: var(--text-muted); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 600; }

/* ---------- CTA band ---------- */

.cta-band {
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.cta-band h2 { max-width: 18ch; }
.cta-band p { color: var(--text-muted); max-width: 56ch; margin-bottom: 30px; }

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

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding-top: clamp(48px, 5vw, 72px);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 56px);
}
.footer-brand .wordmark { font-size: 23px; }
.footer-brand p { font-size: 14px; margin: 14px 0 8px; color: var(--text-muted); max-width: 34ch; }
.footer-brand .legalline { font-size: 12.5px; color: var(--text-muted); }
.site-footer h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer li a { font-size: 14px; color: var(--text-muted); text-decoration: none; }
.site-footer li a:hover { color: var(--text); }

.footer-contact {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.footer-contact a { color: var(--text-muted); text-decoration: none; }
.footer-contact a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 0 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ---------- 404 ---------- */
.err { padding: clamp(80px, 12vw, 170px) 0; }
.err .code {
  font-family: var(--mono);
  font-size: clamp(48px, 9vw, 92px);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 22px;
}

/* ---------- motion ---------- */

/* Reveal animation only applies when JS is available; without it, content is visible. */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .split, .split--even, .split--wide-right { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cols-3 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .engagement { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero h1 { font-size: clamp(31px, 8.4vw, 44px); line-height: 1.06; max-width: 20ch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .cred-strip { flex-direction: column; }
  .cred-strip span { border-right: 0; margin-right: 0; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .cred-strip span:last-child { border-bottom: 0; }
  .featurerow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stat { flex-direction: column; gap: 6px; }
  .stat b { min-width: 0; }
  .factstrip { flex-direction: column; }
  .factstrip span { border-right: 0; border-bottom: 1px solid var(--border); padding: 13px 0; }
  .factstrip span:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: minmax(0,1fr); }
  .steps li { padding-left: 0; padding-top: 44px; }
  .steps li::before { top: 22px; }
  .pullquote { padding-left: 18px; }
}

/* ---------- research pages: data tables, references, notes ---------- */

.dtable-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 2px;
  margin: 26px 0;
  -webkit-overflow-scrolling: touch;
}
.dtable-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dtable {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}
.dtable caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.dtable th, .dtable td {
  text-align: left;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-muted);
}
.dtable thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  background: var(--panel);
}
.dtable tbody tr:last-child th, .dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody th { color: var(--text); font-weight: 600; }
.dtable .num { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.dtable .na { color: var(--text-muted); opacity: 0.65; font-family: var(--mono); font-size: 12.5px; }
.dtable a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.dtable a:hover { color: var(--accent); }

.reflist { list-style: none; margin: 0; padding: 0; max-width: var(--prose); counter-reset: ref; }
.reflist li {
  position: relative;
  counter-increment: ref;
  padding: 14px 0 14px 40px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
}
.reflist li:first-child { border-top: 1px solid var(--border); }
.reflist li::before {
  content: counter(ref);
  position: absolute;
  left: 0;
  top: 15px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
}
.reflist a { color: var(--text-muted); }
.reflist a:hover { color: var(--accent); }

.notemeta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.notemeta span { margin-right: 18px; }

.notelist { display: grid; gap: 0; }
.notelist a.noteitem {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.notelist a.noteitem:last-child { border-bottom: 1px solid var(--border); }
.notelist a.noteitem:hover { border-top-color: var(--accent); }
.notelist a.noteitem:hover h3 { color: var(--accent); }
.notelist .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 4px;
}
.notelist h3 { margin-bottom: 10px; transition: color 0.2s ease; }
.notelist p { font-size: 15px; color: var(--text-muted); max-width: 62ch; margin: 0; }

.callout--flag { border-left-color: var(--text-muted); }
.callout h3 { font-size: 17px; margin-bottom: 10px; }
.callout + .callout { margin-top: 18px; }

@media (max-width: 720px) {
  .notelist a.noteitem { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dtable { min-width: 540px; }
}

/* Note-page tables may extend slightly beyond the prose measure */
.prose .dtable-wrap--wide { width: min(860px, 100%); }
@media (min-width: 900px) {
  .prose .dtable-wrap--wide { width: 860px; margin-left: 0; }
}
.dtable--lead col.c1 { width: 27%; }
.dtable--lead col.c2 { width: 16%; }
.dtable--lead col.c3 { width: 25%; }
.dtable--lead col.c4 { width: 32%; }

/* ============================================================
   CHARTS
   Inline SVG figures. All colour is drawn from the theme tokens
   so a single chart renders correctly in both themes.
   ============================================================ */

.chart {
  /* Same measure as .wrap and .figure: the plotted area then lines up with
     the body text instead of starting 40px further left. */
  width: 100%;
  max-width: var(--maxw);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  margin: 0 auto;
}
.chart .cw {
  display: block;
  width: 100%;
  /* Every chart is authored on a 760px viewBox. Letting it stretch to the full
     page measure scales the whole drawing up by about 1.45x, so its labels end
     up larger than the body text they sit next to. Capping the drawing at its
     natural width keeps the type at the size it was designed for. */
  max-width: calc(760px + 2 * var(--gut));
  height: auto;
  padding: 22px var(--gut) 6px;
  box-sizing: border-box;
  overflow: visible;
}
.chart figcaption {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  padding: 14px var(--gut);
  border-top: 1px solid var(--border);
  max-width: 78ch;
}
.chart figcaption a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* bars */
.chart .bar { fill: var(--accent-dim); }
.chart .bar.hi { fill: var(--accent); }
.chart .ax { stroke: var(--border); stroke-width: 1; }
.chart .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }

/* text inside charts */
.chart text { font-family: var(--mono); }
.chart .cat {
  font-size: 12px;
  fill: var(--text);
  letter-spacing: 0.02em;
}
.chart .val {
  font-size: 12px;
  fill: var(--text-muted);
  letter-spacing: 0.04em;
}
.chart .tick { font-size: 11px; fill: var(--text-faint); }
.chart .axlab {
  font-size: 11px;
  fill: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chart .note {
  font-size: 11px;
  fill: var(--text-faint);
  letter-spacing: 0.06em;
}
.chart .pt { font-size: 11.5px; fill: var(--text); letter-spacing: 0.02em; }

/* scatter */
.chart .dot { fill: var(--text-faint); }
.chart .dot.hi { fill: var(--accent); }

/* lines */
.chart .ln { fill: none; stroke-width: 2; }
.chart .ln.s1 { stroke: var(--alert-high); }
.chart .ln.s2 { stroke: var(--accent); }
.chart .ln.s3 { stroke: var(--text-faint); stroke-dasharray: 5 4; }
.chart .ld.s1 { fill: var(--alert-high); }
.chart .ld.s2 { fill: var(--accent); }
.chart .ld.s3 { fill: var(--text-faint); }
.chart .pt.s1 { fill: var(--alert-high); }
.chart .pt.s2 { fill: var(--accent); }
.chart .pt.s3 { fill: var(--text-faint); }
.chart .ser { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.chart .ser.s1 { fill: var(--alert-high); }
.chart .ser.s2 { fill: var(--accent); }
.chart .mark { stroke: var(--alert-high); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; }
.chart .markl {
  font-size: 10px;
  fill: var(--alert-high);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .chart .cw { padding: 16px 0 4px; }
  .chart .cat, .chart .val, .chart .pt { font-size: 15px; }
  .chart .note, .chart .tick { font-size: 14px; }
  .chart .axlab, .chart .ser, .chart .markl { font-size: 14px; }
}

/* Value label placed inside a long bar, where an outside label would overflow. */
.chart .val.inside { fill: var(--bg); }
.chart .srcnote { color: var(--text-faint); font-style: italic; }
.chart .tick.s1 { fill: var(--alert-high); }
.chart .tick.s2 { fill: var(--accent); }

/* A 4:3 frame cropped into the standard wide band loses too much of the
   subject. Give those a taller window. */
.figure--tall img { height: clamp(300px, 44vw, 600px); object-position: center 45%; }

/* Team cards: the person's name should read at the weight of a section
   heading without competing with the page h2. */
.person {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* ==========================================================================
   Light palette override. Loaded after the base rules, matching the order
   of the original two-stylesheet build.
   ========================================================================== */

/* PoultraIQ — light theme override.
   Loaded AFTER styles.css. Overrides tokens + the rules that hardcode dark values.
   Palette intent: field notebook / agricultural research paper. Warm paper ground,
   ink text, restrained gold reserved for emphasis, not decoration. */

:root {
  /* --- surfaces: warm paper, not clinical white --- */
  --bg: #F6F3EA;
  --panel: #FFFDF7;
  --panel-alt: #EFEBDD;
  --border: #D9D3C0;

  /* --- ink --- */
  --text: #16180F;
  --text-muted: #555B45;   /* 7.1:1 on --bg */
  --text-faint: #7E8369;   /* decorative only */

  /* --- accent: darkened gold so it passes as text on paper --- */
  --accent: #7A5C1E;       /* 5.9:1 on --bg */
  --accent-dim: #B4913F;   /* fills, rules, borders */

  /* --- status --- */
  --alert-high: #A3341C;
  --alert-high-bg: #F7E4DE;
  --alert-med: #7A5C1E;
  --alert-med-bg: #F6EDD6;
  --good: #446B33;

  /* scrim base for translucent bars */
  --scrim: 246, 243, 234;
}

/* --- solid-fill buttons: dark gold fill, paper-colored label --- */
.nav a.btn,
.btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFDF7;
}
.nav a.btn:hover,
.btn:hover {
  background: #5F4715;
  border-color: #5F4715;
  color: #FFFDF7;
}

/* Secondary button must stay outlined. The .btn override above loads after
   styles.css and would otherwise flatten the primary/secondary hierarchy. */
.btn.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: #BBB4A0;
}
.btn.btn--ghost:hover {
  background: var(--panel-alt);
  border-color: var(--accent);
  color: var(--text);
}

/* --- translucent header/overlay scrims (were rgba(17,19,14,x)) --- */
.nav,
.nav-wrap,
header.site,
.site-header,
.sticky,
.backdrop {
  background: rgba(var(--scrim), 0.92) !important;
}

/* --- alert + log table text that was hardcoded for dark --- */
table.log tr.flagged td {
  background: var(--alert-high-bg);
  color: #5A1B0D;
}
table.log tr.flagged td:first-child {
  background: var(--alert-high-bg);
  box-shadow: inset 3px 0 0 var(--alert-high), 1px 0 0 var(--border);
}
.alert--high .sev,
.sev {
  color: var(--alert-high);
}

/* --- IMAGE SCRIMS -------------------------------------------------------
   The source photography is dark. In the dark theme the scrims were dark and
   the text on top was light. On paper the text is dark ink, so those scrims
   have to invert to paper or the copy sits dark-on-dark. Opacity on the photo
   itself is also reduced so it reads as a texture behind the text rather than
   a competing image. */

.hero-media img {
  opacity: 0.72;
}
/* Sharp horizontal falloff: hold near-opaque paper across the text column
   (roughly the left 55%), then release quickly so the right side of the
   photograph reads at close to full strength. */
.hero-media::after {
  background:
    linear-gradient(90deg,
      rgba(var(--scrim), 0.96) 0%,
      rgba(var(--scrim), 0.93) 38%,
      rgba(var(--scrim), 0.78) 55%,
      rgba(var(--scrim), 0.34) 78%,
      rgba(var(--scrim), 0.10) 100%),
    linear-gradient(0deg,
      rgba(var(--scrim), 0.86) 0%,
      rgba(var(--scrim), 0.18) 58%);
}

.texture-section > .texture-img img {
  opacity: 0.52;
}
.texture-section > .texture-img::after {
  background: linear-gradient(0deg,
    rgba(var(--scrim), 0.94) 0%,
    rgba(var(--scrim), 0.84) 55%,
    rgba(var(--scrim), 0.66) 100%);
}

/* Standalone figures are not text-bearing, so they keep full image fidelity. */
.figure img {
  opacity: 1;
}

/* --- hairlines read heavier on light; soften them --- */
hr,
.rule {
  border-color: var(--border);
  opacity: 0.9;
}

/* --- selection --- */
::selection {
  background: var(--accent-dim);
  color: #16180F;
}


/* ==========================================================================
   Content utilities.

   Generated from the inline style attributes in the static build. The class
   is repeated in each selector to raise specificity above the compound
   selectors defined earlier in this file, matching the precedence the
   original inline styles had.
   ========================================================================== */

.pq-mb-30.pq-mb-30 { margin-bottom:30px; }
.pq-s2.pq-s2 { display:block; margin-bottom:18px; }
.pq-s3.pq-s3 { background:var(--panel-alt); padding:clamp(26px,3vw,40px); margin-bottom:18px; }
.pq-mb-14.pq-mb-14 { margin-bottom:14px; }
.pq-s5.pq-s5 { color:var(--text-muted); max-width:74ch; margin-bottom:16px; }
.pq-s6.pq-s6 { color:var(--text-muted); max-width:74ch; }
.pq-pt-0.pq-pt-0 { padding-top:0; }
.pq-mb-34.pq-mb-34 { margin-bottom:34px; }
.pq-measure.pq-measure { max-width:74ch; }
.pq-mb-36.pq-mb-36 { margin-bottom:36px; }
.pq-s11.pq-s11 { font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.pq-mt-4.pq-mt-4 { margin-top:4px; }
.pq-s13.pq-s13 { margin:28px 0; }
.pq-mb-32.pq-mb-32 { margin-bottom:32px; }
.pq-block.pq-block { display:block; }
.pq-s16.pq-s16 { margin:34px 0 30px; }
.pq-mt-22.pq-mt-22 { margin-top:22px; }
.pq-mt-14.pq-mt-14 { margin-top:14px; }


/* ==========================================================================
   WordPress block normalisation.

   The original build was authored against browser defaults. WordPress wraps
   the same markup in core block classes and ships stylesheets that reset some
   of those defaults, so the affected values are restated explicitly here.
   ========================================================================== */

/* The core image block sets "margin: 0 0 1em", which would override the
   centring that gives a figure its page measure. The width and gutter come
   from the shared stylesheet; only the horizontal centring needs restating
   here at a specificity that beats the block stylesheet. */
.figure.wp-block-image {
  margin-left: auto;
  margin-right: auto;
}

/* Core's caption class adds "margin: 5.5px 0 11px", which the design does not
   allow for: the caption's own padding already sets its distance from the
   image and the rule beneath it. */
.figure > figcaption,
figcaption.wp-element-caption {
  margin: 0;
}

/* Core adds its own box model to group wrappers; the design lays these out
   itself and expects no additional constraint. */
.wp-block-group {
  box-sizing: border-box;
}

/* Contact form: honeypot and submission feedback. */
.pq-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formnote {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    background: var(--panel-alt);
    font-size: 15px;
    line-height: 1.5;
}

.formnote--ok {
    border-left-color: var(--good);
}

.formnote--bad {
    border-left-color: var(--alert-high);
    background: var(--alert-high-bg);
}