
:root {
  /* Palette sampled from the ShowCattle Community cover graphic:
     banner/ribbon blue #3D46A3, chestnut hide #9E5431. */
  --bg:#F3F1ED; --surface:#FFFFFF; --surface-2:#FAF8F4;
  --ink:#1D2033; --ink-2:#454A61; --muted:#767A8C;
  --line:#DCD9D2; --line-soft:#E9E6E0;
  --accent:#3D46A3; --accent-ink:#FFFFFF; --accent-soft:#E4E6F4;
  --warm:#8A4526; --warm-soft:#F7E9E0; --warm-line:#E0BFAA;
  --band:#3D46A3; --band-ink:#FFFFFF; --band-dim:rgba(255,255,255,.76);
  --shadow:0 1px 2px rgba(29,32,51,.07), 0 8px 24px rgba(29,32,51,.06);
  --display:"Oswald","Haettenschweiler","Arial Narrow",sans-serif;
  --brandface:"Montserrat","Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14161F; --surface:#1C1F2B; --surface-2:#232634;
    --ink:#ECEBF2; --ink-2:#BFC1CE; --muted:#8B8E9E;
    --line:#2E3242; --line-soft:#262A38;
    --accent:#8B95E8; --accent-ink:#14161F; --accent-soft:#262B45;
    --warm:#D18A5F; --warm-soft:#33221A; --warm-line:#5C3A26;
  --band:#232B57; --band-ink:#ECEBF2; --band-dim:rgba(236,235,242,.72);
    --band:#232B57; --band-ink:#ECEBF2; --band-dim:rgba(236,235,242,.72);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg:#14161F; --surface:#1C1F2B; --surface-2:#232634;
  --ink:#ECEBF2; --ink-2:#BFC1CE; --muted:#8B8E9E;
  --line:#2E3242; --line-soft:#262A38;
  --accent:#8B95E8; --accent-ink:#14161F; --accent-soft:#262B45;
  --warm:#D18A5F; --warm-soft:#33221A; --warm-line:#5C3A26;
  --band:#232B57; --band-ink:#ECEBF2; --band-dim:rgba(236,235,242,.72);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
}
* { box-sizing:border-box; }
html { color-scheme: light dark; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; }
[hidden] { display:none !important; }
.wrap { max-width:1080px; margin:0 auto; padding-inline:20px; }
.narrow { max-width:760px; }

/* ---------- site nav ---------- */
.bandwrap { background:var(--band); }
.sitenav {
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:baseline;
  max-width:1080px; margin:0 auto; padding:15px 20px 14px;
}
.brand {
  font-family:var(--brandface); font-weight:800; font-size:19px; letter-spacing:-.005em;
  color:var(--band-ink); text-decoration:none; margin-right:auto;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}
.brand span { font-weight:700; color:var(--band-dim); }
.navlinks { display:flex; flex-wrap:wrap; gap:6px 18px; }
.navlinks a {
  font-family:var(--display); font-weight:500; font-size:13.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--band-dim); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.navlinks a:hover { color:var(--band-ink); }
.navlinks a[aria-current="page"] { color:var(--band-ink); border-bottom-color:var(--band-ink); }
.bandwrap a:focus-visible { outline:2px solid var(--band-ink); outline-offset:2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- masthead ---------- */
header.mast { border-bottom:3px solid var(--accent); padding-block:32px 20px; }
.eyebrow {
  font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 10px;
}
h1 {
  font-family:var(--display); font-weight:700; font-size:clamp(32px,6.4vw,56px);
  line-height:1; letter-spacing:-.01em; margin:0; text-wrap:balance; text-transform:uppercase;
}
h1 .thin { font-weight:400; color:var(--ink-2); display:block; font-size:.74em; line-height:1.06; }
.dek { margin:14px 0 0; max-width:60ch; color:var(--ink-2); font-size:17px; }
.note { margin:10px 0 0; max-width:62ch; color:var(--muted); font-size:14px;
        border-left:2px solid var(--line); padding-left:12px; }

h2 { font-family:var(--display); font-weight:600; font-size:26px; text-transform:uppercase;
     letter-spacing:.01em; margin:40px 0 12px; text-wrap:balance; }
h3 { font-family:var(--display); font-weight:600; font-size:19px; margin:28px 0 6px; }
p { max-width:68ch; }

.facts { display:flex; flex-wrap:wrap; gap:0; margin-top:22px; border-top:1px solid var(--line); }
.fact { padding:12px 24px 12px 0; margin-right:24px; border-right:1px solid var(--line); }
.fact:last-child { border-right:0; margin-right:0; }
.fact b { display:block; font-family:var(--display); font-weight:600; font-size:26px;
          line-height:1.1; font-variant-numeric:tabular-nums; }
.fact span { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* ---------- featured ---------- */
.featured { margin-top:26px; border:1px solid var(--warm-line); background:var(--warm-soft);
            border-radius:8px; padding:18px 20px; }
.featured h2 { font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.14em;
               text-transform:uppercase; color:var(--warm); margin:0 0 12px; }
.featured ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.featured a { display:block; text-decoration:none; color:var(--ink); }
.featured a:hover .fn { text-decoration:underline; }
.featured .fn { font-family:var(--display); font-weight:600; font-size:19px; line-height:1.2; }
.featured .fm { font-size:14px; color:var(--ink-2); }

/* ---------- controls ---------- */
.controls { position:sticky; top:0; z-index:20; background:var(--bg);
            padding-block:14px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.ctl-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
input[type="search"], input[type="email"], input[type="text"], select {
  font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:9px 12px; min-height:42px;
}
input[type="search"] { flex:1 1 240px; min-width:0; }
select { flex:0 0 auto; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip { font-family:var(--body); font-size:13px; font-weight:600;
        background:transparent; color:var(--ink-2); cursor:pointer;
        border:1px solid var(--line); border-radius:999px; padding:6px 13px; }
.chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.count { font-size:13px; color:var(--muted); margin-top:10px; font-variant-numeric:tabular-nums; }

/* ---------- day groups ---------- */
.day { margin-top:26px; }
.day-head { display:flex; align-items:baseline; gap:12px; padding-bottom:7px;
            border-bottom:2px solid var(--ink); margin-bottom:2px; }
.day-head .dow { font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.14em;
                 text-transform:uppercase; color:var(--muted); }
.day-head .dnum { font-family:var(--display); font-weight:700; font-size:22px; text-transform:uppercase; }
.day-head .dcount { margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.day.is-today .day-head { border-bottom-color:var(--accent); }
.day.is-today .dnum { color:var(--accent); }
.today-flag { font-family:var(--display); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
              background:var(--accent); color:var(--accent-ink); padding:2px 8px; border-radius:3px; }

ul.sales { list-style:none; margin:0; padding:0; }
li.sale { border-bottom:1px solid var(--line-soft); }
li.sale a { display:grid; grid-template-columns:1fr auto auto; gap:10px 14px; align-items:center;
            padding:11px 2px; text-decoration:none; color:inherit; }
li.sale a:hover .nm { text-decoration:underline; text-decoration-color:var(--accent); }
li.sale .nm { font-weight:600; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
li.sale .tg { font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
              background:var(--surface-2); border:1px solid var(--line-soft); border-radius:4px;
              padding:3px 8px; white-space:nowrap; }
li.sale .st { font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.06em;
              color:var(--muted); min-width:3.2em; text-align:right; }
li.sale.tag-genetics .tg { background:var(--warm-soft); border-color:transparent; color:var(--warm); }
li.sale.tag-view .tg { background:transparent; color:var(--muted); font-style:italic; }
li.sale.is-featured { background:var(--warm-soft); border-bottom-color:var(--warm-line); }
li.sale.is-featured .nm::after {
  content:"Featured"; font-family:var(--display); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--warm); border:1px solid var(--warm-line);
  border-radius:3px; padding:1px 6px; margin-left:8px; white-space:nowrap; }
.day.is-past { opacity:.5; }
.empty { padding:48px 0; text-align:center; color:var(--muted); }

/* ---------- cta / buttons ---------- */
.cta { margin-top:44px; background:var(--surface); border:1px solid var(--line);
       border-left:4px solid var(--accent); border-radius:8px; padding:26px 24px; box-shadow:var(--shadow); }
.cta h2 { font-size:24px; margin:0 0 8px; }
.cta p { margin:0 0 16px; color:var(--ink-2); max-width:58ch; }
.btn { display:inline-block; background:var(--accent); color:var(--accent-ink);
       font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.06em;
       text-transform:uppercase; text-decoration:none; padding:12px 22px; border-radius:6px;
       border:1px solid var(--accent); cursor:pointer; }
.btn:hover { filter:brightness(1.1); }
.btn.ghost { background:transparent; color:var(--accent); }

/* ---------- pricing ---------- */
.tiers { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(208px,1fr)); margin-top:22px; }
.tier { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px 20px 22px;
        display:flex; flex-direction:column; }
.tier.best { border-color:var(--accent); box-shadow:var(--shadow); }
.tier .tname { font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.12em;
               text-transform:uppercase; color:var(--accent); }
.tier .tprice { font-family:var(--display); font-weight:700; font-size:40px; line-height:1.05;
                margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.tier .tcap { font-size:12.5px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase;
              margin-bottom:14px; }
.tier ul { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:8px; font-size:15px; }
.tier li { padding-left:20px; position:relative; color:var(--ink-2); }
.tier li::before { content:"\2713"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.tier .btn { margin-top:auto; text-align:center; }

.qa { margin-top:14px; border-top:1px solid var(--line); }
.qa > div { border-bottom:1px solid var(--line); padding:16px 0; }
.qa h3 { margin:0 0 6px; font-size:17px; }
.qa p { margin:0; color:var(--ink-2); }

.lead { font-size:19px; color:var(--ink-2); max-width:60ch; }
.embedbox { background:var(--surface); border:1px solid var(--line); border-radius:8px;
            padding:22px; margin-top:22px; box-shadow:var(--shadow); }

/* ---------- footer ---------- */
.sitefoot { margin-top:56px; padding:24px 0 48px; border-top:1px solid var(--line);
            font-size:13.5px; color:var(--muted); }
.sitefoot p { margin:0 0 8px; max-width:74ch; }
.sitefoot strong { color:var(--ink-2); }
.sitefoot a { color:var(--ink-2); }

@media (max-width:520px) {
  li.sale a { grid-template-columns:1fr auto; }
  li.sale .tg { grid-column:1; justify-self:start; }
  .fact { padding-right:16px; margin-right:16px; }
  .brand { margin-right:0; width:100%; }
  .sitenav { padding-bottom:12px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* ---------- cover graphic ---------- */
.cover { display:block; width:100%; max-width:720px; margin:26px auto 0;
         border-radius:10px; box-shadow:var(--shadow); }
.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
