/* ==========================================================
   Thoroughbred Intelligence: shared stylesheet
   Lives at the repo root, always. Root pages link to it as
   styles.css, pages in insights/ link to it as ../styles.css,
   and 404.html links to it as /styles.css.
   ========================================================== */

/* ---------- Fonts (self-hosted) ----------
   Served from assets/fonts/ so no visitor data goes to Google.
   Both families are SIL Open Font License; licenses sit beside the files.
   Paths are relative to this stylesheet, so they work from every page. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-standard-normal.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: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-ext-standard-normal.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: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/newsreader-latin-standard-normal.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: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/newsreader-latin-ext-standard-normal.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: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/newsreader-latin-standard-italic.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: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/newsreader-latin-ext-standard-italic.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;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #FFFFFF;       /* page background */
  --ink: #16211B;         /* headings and primary text */
  --slate: #4A5650;       /* secondary text */
  --muted: #6B766F;       /* small print on white only */
  --green: #1A7A5A;       /* brand green, sampled from the logo: buttons, accents */
  --green-deep: #135E45;  /* hover states, green text on light backgrounds */
  --mist: #EDF5F1;        /* light green panels */
  --rule: #D5E1DB;        /* borders and dividers */
  --field: #BDCCC5;       /* form field borders */
  --gold: #D6A935;        /* sparingly: the short mark above Request an introduction */
  --error: #B3261E;

  --font-text: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.1875rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }

[hidden] { display: none !important; }

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

a {
  color: var(--green-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--green); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--font-text);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }

.wrap {
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  padding: 10px 14px;
  border: 2px solid var(--green);
  border-radius: 4px;
}
.skip-link:focus { left: 12px; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 24px;
  border: 1.5px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:disabled { opacity: 0.6; cursor: default; }

.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); color: #fff; }

.btn-outline { background: transparent; color: var(--green-deep); border-color: var(--green); }
.btn-outline:hover { background: var(--mist); color: var(--green-deep); }

.text-link {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 78px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }


.site-nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: 6px 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--green-deep); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--green); }

.brand .brand-logo { width: auto; height: 50px; }

/* Posts keep the header in view while reading (<body class="post-page">) */
.post-page .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.btn-login { padding: 10px 16px; font-size: 14px; white-space: nowrap; }

/* ---------- Homepage ---------- */
.home-main {
  display: flex;
  align-items: center;
  padding: 88px 0 104px;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 96px;
  align-items: start;
}

.home-copy h1 {
  font-size: clamp(2.5rem, 1.4rem + 3vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 20ch;
  margin-bottom: 24px;
}

.lede {
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--slate);
  max-width: 30em;
  margin-bottom: 36px;
}
.home-copy .lede { margin-bottom: 18px; }

.founder {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 36em;
  margin-bottom: 36px;
}
.founder a { color: var(--ink); font-weight: 600; }
.founder a:hover { color: var(--green-deep); }

/* Introduction block: a rule with a short gold mark */
.invite {
  position: relative;
  max-width: 30em;
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.invite::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 36px;
  height: 3px;
  background: var(--gold);
}

.intro summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--green-deep);
}
.intro summary::-webkit-details-marker { display: none; }
.intro summary:hover { color: var(--green); }
.intro summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.intro[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.intro form { margin-top: 22px; }

/* ---------- Client portal card ---------- */
.portal {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--green);
  border-radius: 6px;
  padding: 32px 32px 24px;
  box-shadow: 0 22px 44px -28px rgba(22, 33, 27, 0.4);
  scroll-margin-top: 24px;
  margin-top: 12px;
}
.portal h2 { font-size: 1.6rem; margin-bottom: 22px; }


.portal .btn { width: 100%; margin-top: 4px; }

.portal-status {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  background: var(--mist);
  color: var(--ink);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 16px 0 0;
}

.portal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin: 22px 0 0;
}

/* Pulse when a Client login link brings the card forward */
@keyframes portal-call {
  0%   { box-shadow: 0 0 0 0 rgba(26, 122, 90, 0.45), 0 22px 44px -28px rgba(22, 33, 27, 0.4); }
  100% { box-shadow: 0 0 0 16px rgba(26, 122, 90, 0), 0 22px 44px -28px rgba(22, 33, 27, 0.4); }
}
.portal.is-called { animation: portal-call 0.9s ease-out 2; }

/* ---------- Form fields ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.field label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.field .optional { font-weight: 400; color: var(--muted); }

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--field);
  border-radius: 4px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(26, 122, 90, 0.18);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

/* Honeypot: hidden from people, visible to bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-message {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  border-radius: 4px;
  padding: 14px 16px;
  margin: 16px 0 0;
}
.form-message.success { background: var(--mist); color: var(--green-deep); border: 1px solid var(--rule); }
.form-message.error { background: #FCEEEE; color: var(--error); border: 1px solid #F1C9C6; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 28px 0;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--slate);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}
.footer-legal { margin: 0; line-height: 1.55; }
.footer-credit {
  display: block;
  margin-top: 4px;
}
.footer-credit a { color: inherit; }
.footer-credit a:hover { color: var(--green-deep); }
.footer-nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav a { color: var(--ink); text-decoration: none; }
.footer-nav a:hover { color: var(--green-deep); text-decoration: underline; }

.footer-social {
  display: flex;
  gap: 16px;
  margin: 0;
}
.footer-social a {
  display: inline-flex;
  color: var(--slate);
  line-height: 0;
}
.footer-social a:hover { color: var(--green-deep); }

/* ---------- Insights index ---------- */
.page-head { padding: 80px 0 44px; }
.page-head.data-head { padding-bottom: 54px; }
.page-head h1 {
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  letter-spacing: -0.02em;
}
.page-head p {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--slate);
  max-width: 56ch;
  margin: 0;
}
.page-body { padding: 0 0 104px; }

/* A page head that carries more than one line of deck. The lead paragraph keeps
   the deck's weight. The paragraphs after it sit below a hairline in two columns,
   which reads as a standfirst instead of a column of body copy. */
.page-head .page-intro {
  margin-top: 1.6rem; padding-top: 1.5rem; max-width: 68rem;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 3rem;
}
.page-head .page-intro p {
  font-size: 1.02rem; line-height: 1.68; color: var(--slate); margin: 0;
}

@media (max-width: 860px) {
  .page-head .page-intro { grid-template-columns: 1fr; gap: 1.05rem; }
}


.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.post-item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 6px 40px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.post-item time {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--slate);
  padding-top: 7px;
}
.post-item h2 { font-size: 1.5rem; margin: 0; }
.post-item h2 a { color: var(--ink); text-decoration: none; }
.post-item h2 a:hover { color: var(--green-deep); text-decoration: underline; }
.post-item p {
  grid-column: 2;
  font-size: 1.0625rem;
  color: var(--slate);
  max-width: 62ch;
  margin: 0;
}

/* ---------- Profile links (About page) ---------- */
.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}
.profile-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 16px 8px 14px;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.profile-links a:hover {
  color: var(--green-deep);
  border-color: var(--green);
  background: var(--mist);
}
.profile-links svg { flex: none; }

/* ---------- Privacy page ---------- */
.policy .prose { font-size: 1.125rem; }
.policy .prose h2 { font-size: 1.5rem; }

/* ---------- Subscribe block (Substack) ---------- */
.subscribe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  background: var(--mist);
  border-radius: 6px;
  padding: 26px 30px;
  margin: 0 0 8px;
}

/* On the Insights index the block sits above the post list, so it needs
   room to read as its own thing rather than the first list item. */
.page-body .subscribe { margin-bottom: 56px; }

@media (max-width: 760px) {
  .page-body .subscribe { margin-bottom: 40px; }
}
.subscribe h2 {
  font-size: 1.35rem;
  margin: 0 0 4px;
}
.subscribe p {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate);
  margin: 0;
  max-width: 44ch;
}
.subscribe-copy { flex: 1 1 260px; }

.subscribe-form {
  display: flex;
  gap: 10px;
  flex: 1 1 320px;
  max-width: 420px;
}
.subscribe-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--field);
  border-radius: 4px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.subscribe-form input[type="email"]:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(26, 122, 90, 0.18);
}
.subscribe-form .btn { flex: none; }

/* Visible to screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.article-foot .subscribe { margin: 0 0 28px; }

@media (max-width: 560px) {
  .subscribe { padding: 22px; }
  .subscribe-form { flex-wrap: wrap; max-width: none; }
  .subscribe-form input[type="email"] { flex: 1 1 100%; }
  .subscribe-form .btn { width: 100%; }
}

/* ---------- 404 ---------- */
.notfound { padding: 104px 0 128px; }
.notfound h1 {
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.notfound-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.notfound-copy h1 { max-width: 14ch; }
.notfound-note {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-left: 3px solid var(--gold);
  padding-left: 12px;
  margin: 0 0 32px;
}

/* A sale-ring hip number sticker, withdrawn */
.hip-tag-wrap {
  position: relative;
  justify-self: center;
  width: 300px;
}
.hip-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.4;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 22px 44px -26px rgba(22, 33, 27, 0.5);
  font-family: var(--font-ui);
  color: var(--ink);
  transform: rotate(-8deg);
  animation: hip-tag-settle 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
.hip-tag-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 2px 0.3em;
}
.hip-tag-number {
  font-size: 112px;
  font-weight: 800;
  font-stretch: 90%;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hip-stamp {
  position: absolute;
  right: -34px;
  bottom: -16px;
  padding: 4px 16px 6px;
  border: 4px solid var(--green);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--green);
  font-family: var(--font-ui);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(12deg);
  animation: hip-stamp-in 0.35s ease-out 0.75s both;
}
@keyframes hip-tag-settle {
  from { transform: rotate(4deg) translateY(-14px); opacity: 0; }
  to   { transform: rotate(-8deg) translateY(0); opacity: 1; }
}
@keyframes hip-stamp-in {
  from { transform: rotate(12deg) scale(1.8); opacity: 0; }
  to   { transform: rotate(12deg) scale(1); opacity: 1; }
}

/* ---------- Posts ---------- */
.article { padding: 72px 0 104px; }

.article-col {
  width: min(100% - 48px, 720px);
  margin-inline: auto;
}

.article-meta {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
}

.article h1 {
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin-bottom: 20px;
}

.dek {
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--slate);
  margin-bottom: 28px;
}

.byline {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--slate);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  margin-bottom: 40px;
}

.prose { font-size: 1.25rem; line-height: 1.7; }
.prose p { margin-bottom: 1.1em; }
.prose h2 { font-size: 1.75rem; margin: 1.8em 0 0.5em; }
.prose h3 { font-size: 1.35rem; margin: 1.6em 0 0.4em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.4em; }

.pull-quote {
  margin: 2em 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--green);
  font-size: 1.6rem;
  line-height: 1.35;
  font-style: italic;
  color: var(--ink);
}
.pull-quote p { margin: 0; }

.sale-box {
  background: var(--mist);
  border-radius: 6px;
  padding: 24px 28px;
  margin: 2em 0;
  font-family: var(--font-ui);
}
.sale-box h2 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 14px;
}
.sale-box dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 28px;
  margin: 0;
  font-size: 15px;
}
.sale-box dt { color: var(--slate); }
.sale-box dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; margin: 2em 0; }

/* Wide tables reach past the reading column so columns don't wrap */
.article-col .table-wrap {
  width: min(100vw - 48px, 980px);
  margin-left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 760px) {
  .article-col .table-wrap { width: 100%; margin-left: 0; transform: none; }
}

table.data .nowrap { white-space: nowrap; }

/* Head-to-head comparison tables: the leading figure in each row is green */
table.data.compare th[scope="row"] {
  font-family: var(--font-ui);
  font-size: 0.93em;
  font-weight: 600;
  color: var(--slate);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
  padding: 10px 14px 10px 0;
}
table.data.compare td.lead {
  color: var(--green-deep);
  font-weight: 700;
}
table.data.compare thead th { font-size: 0.95em; }

/* Row labels in any data table (year, segment, sire) */
table.data tbody th[scope="row"] {
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  padding: 10px 14px 10px 0;
}

/* The current year, set apart as a band */
table.data tr.hl-row th,
table.data tr.hl-row td {
  background: var(--mist);
  font-weight: 700;
  color: var(--ink);
}
table.data tr.hl-row th { padding-left: 10px; border-radius: 4px 0 0 4px; }
table.data tr.hl-row td:last-child { padding-right: 10px; border-radius: 0 4px 4px 0; }

/* A single highlighted column */
table.data th.hl-col,
table.data td.hl-col {
  background: var(--mist);
  font-weight: 700;
  padding-left: 12px;
  padding-right: 12px;
}

/* Columns that drop on narrow screens, where the same text appears in the body */
@media (max-width: 680px) {
  table.data .angle-col,
  table.data .hide-narrow { display: none; }
  table.data.sires tbody th[scope="row"] { white-space: nowrap; }
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
table.data caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  margin-bottom: 10px;
}
table.data th {
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--ink);
  padding: 8px 14px 8px 0;
  white-space: nowrap;
}
table.data td {
  border-bottom: 1px solid var(--rule);
  padding: 10px 14px 10px 0;
  vertical-align: top;
}
table.data .num { text-align: right; }

.prose .source-cite {
  font-family: var(--font-ui);
  font-size: 0.78em;
  color: var(--muted);
  white-space: nowrap;
}
.prose .source-cite a { color: inherit; }
.prose .source-cite a:hover { color: var(--green-deep); }

.prose .report-link {
  font-family: var(--font-ui);
  font-size: 15px;
  background: var(--mist);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 1.8em 0 2.4em;
}
.prose .report-link a { font-weight: 600; }

.prose .sleeper-angle {
  border-left: 3px solid var(--gold);
  padding-left: 16px;
  margin: 1.6em 0 2.4em;
}

.prose .scope-note {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
  background: var(--mist);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 2em 0;
}

.source-note {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 8px;
}

.article-foot {
  margin-top: 56px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  font-family: var(--font-ui);
  font-size: 15px;
}
.article-foot p { margin-bottom: 18px; }

/* Lead photo, score strips, video embeds, table links */
.lead-figure { margin: 0 0 44px; }
.lead-figure img { width: 100%; border-radius: 4px; }

.prose .photo { margin: 2.2em 0; }
.prose .photo img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  border-radius: 4px;
}
.lead-figure figcaption,
.prose figcaption {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 10px;
}

.prose .score-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.3;
}
.prose .score-strip li {
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink);
}
.prose .score-strip li:first-child {
  background: var(--green);
  color: #fff;
  font-weight: 600;
}

.prose .video { margin: 0 0 30px; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mist);
  border-radius: 4px;
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.prose h2[id] { scroll-margin-top: 24px; }
.post-page .prose h2[id] { scroll-margin-top: 104px; }
.prose h2 .hip-sub {
  display: block;
  font-size: 0.78em;
  font-weight: 400;
  color: var(--slate);
  margin-top: 4px;
}
table.data a { font-weight: 600; }

.article-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .home-grid { grid-template-columns: 1fr; gap: 56px; }
  .home-main { padding: 64px 0 80px; }
  .notfound-grid { grid-template-columns: 1fr; gap: 40px; }
  .hip-tag-wrap { order: -1; justify-self: start; width: 220px; margin-left: 8px; }
  .hip-tag-number { font-size: 80px; }
  .hip-stamp { font-size: 26px; right: -30px; bottom: -12px; }
}

@media (max-width: 760px) {
  .header-inner { gap: 12px; min-height: 66px; }
  .brand .brand-logo { height: 30px; }
  .post-page .prose h2[id] { scroll-margin-top: 88px; }
  .brand { gap: 10px; }
  .btn-login { padding: 9px 12px; font-size: 13px; }
  /* Every page links to Insights elsewhere (hero, breadcrumb, footer), so the
     header keeps only the login button on phones. */
  .site-nav { display: none; }
  .home-main { padding: 48px 0 64px; }
  .invite { margin-top: 48px; }
  .form-row { grid-template-columns: 1fr; }
  .post-item { grid-template-columns: 1fr; }
  .post-item p { grid-column: 1; }
  .post-item time { padding-top: 0; }
  .page-head { padding: 56px 0 32px; }

  /* Reading sizes for a narrow column: 20px type in a 342px column runs
     about 34 characters a line, which stretches every article. */
  .article { padding: 40px 0 64px; }
  .article-col { width: min(100% - 40px, 720px); }
  .article h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.4rem); }
  .dek { font-size: 1.15rem; line-height: 1.4; margin-bottom: 22px; }
  .byline { padding: 12px 0; margin-bottom: 30px; }
  .lead-figure { margin-bottom: 32px; }

  .prose { font-size: 1.125rem; line-height: 1.62; }
  .prose p { margin-bottom: 0.9em; }
  .prose h2 { font-size: 1.5rem; margin: 1.5em 0 0.45em; }
  .prose h3 { font-size: 1.2rem; margin: 1.4em 0 0.35em; }
  .prose .photo, .prose .video { margin: 1.6em 0; }
  .prose .photo img { max-height: 420px; }
  .pull-quote { font-size: 1.3rem; padding-left: 18px; margin: 1.6em 0; }
  .sale-box { padding: 20px 22px; margin: 1.6em 0; }
  .table-wrap { margin: 1.6em 0; }
  /* Let column headings wrap so data tables fit a narrow screen */
  table.data { font-size: 13.5px; }
  table.data th { white-space: normal; }
  table.data th,
  table.data td { padding-right: 8px; }
  table.data th:last-child,
  table.data td:last-child { padding-right: 0; }
  .prose .scope-note,
  .prose .report-link { padding: 14px 16px; margin: 1.6em 0; }
  .prose .score-strip { margin-bottom: 18px; }
  .article-foot { margin-top: 40px; padding-top: 24px; }
  .portal { padding: 26px 22px 20px; }
}

@media (max-width: 380px) {
  .brand .brand-logo { height: 27px; }
  .btn-login svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .portal.is-called { animation: none; outline: 3px solid var(--green); outline-offset: 4px; }
  .hip-tag, .hip-stamp { animation: none; }
}


/* =======================================================================
   INSIGHT FIGURES
   Lifted out of a single post so every post can draw charts. Inline SVG
   keeps the numbers as text: crawlable, scalable, zero extra requests,
   and readable by machines that do not run JavaScript.
   ======================================================================= */

:root {
  --chart-green: #07855E;
  --chart-clay:  #C44D16;
  --chart-grid:  #E4EDE8;
  --chart-deemph:#9AA5A0;
}

.figure-data { margin: 0 0 44px; }
.figure-data figcaption {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 12px;
  max-width: 62ch;
}
.figure-data .fig-head {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.figure-data .fig-title {
  font-family: var(--font-text);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: balance;
}

.tif { width: 100%; height: auto; display: block; overflow: visible; }
.tif text { font-family: var(--font-ui); fill: var(--slate); }

.tif-axis  { stroke: var(--rule); stroke-width: 1; }
.tif-grid  { stroke: var(--chart-grid); stroke-width: 1; }
.tif-ref   { stroke: var(--rule); stroke-width: 1; }
.tif-quad  { fill: var(--mist); }

.tif-tick  { font-size: 12px; fill: var(--muted); text-anchor: middle;
             font-variant-numeric: tabular-nums; }
.tif-y     { text-anchor: end; }
.tif-val   { font-size: 13px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.tif-panel { font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
             text-transform: uppercase; fill: var(--muted); }
.tif-lab   { font-size: 13px; fill: var(--slate); font-variant-numeric: tabular-nums; }
.tif-strong{ font-weight: 700; fill: var(--ink); }
.tif-ser   { font-size: 12px; fill: var(--muted); }
.tif-row   { font-size: 13px; fill: var(--ink); }
.tif-delta { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tif-ptlab { font-size: 12px; fill: var(--slate); }
.tif-axlab { font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
             text-transform: uppercase; fill: var(--muted); text-anchor: middle; }
.tif-quadlab { font-size: 11px; fill: var(--muted); font-style: italic; }

.tif-bar   { fill: var(--chart-deemph); }
.tif-bar.tif-emph { fill: var(--chart-green); }

.tif-slope { stroke-width: 2; stroke-linecap: round; fill: none; }
.tif-conn  { stroke-width: 2; stroke-linecap: round; }
.tif-track { stroke: var(--chart-deemph); stroke-width: 2; fill: none;
             stroke-linecap: round; stroke-linejoin: round; }
.tif-track.tif-down { stroke: var(--chart-clay); }
.tif-dot, .tif-new, .tif-pt { stroke: var(--paper); stroke-width: 2; }
.tif-old   { fill: var(--chart-deemph); stroke: var(--paper); stroke-width: 2; }

.tif-up   { stroke: var(--chart-green); }
.tif-down { stroke: var(--chart-clay); }
.tif-flat { stroke: var(--chart-deemph); }
circle.tif-up   { fill: var(--chart-green); }
circle.tif-down { fill: var(--chart-clay); }
circle.tif-flat { fill: var(--chart-deemph); }
text.tif-up   { fill: var(--chart-green); stroke: none; }
text.tif-down { fill: var(--chart-clay); stroke: none; }

.tif-pt    { fill: var(--chart-deemph); }
.tif-pt.tif-hot { fill: var(--chart-green); }

/* Table twin: every figure's numbers reachable without reading the picture. */
.fig-table { margin-top: 14px; }
.fig-table summary {
  font-family: var(--font-ui); font-size: 12px; color: var(--green-deep);
  cursor: pointer; padding: 4px 0;
}
.fig-table summary:hover { color: var(--green); }
.fig-table table {
  width: 100%; border-collapse: collapse; margin-top: 10px;
  font-family: var(--font-ui); font-size: 13px;
}
.fig-table th, .fig-table td {
  text-align: left; padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--hairline, var(--rule));
}
.fig-table th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
                color: var(--muted); font-weight: 600; }
.fig-table th.num,
.fig-table td.num { text-align: right; }
.fig-table td.num { font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .figure-data .fig-title { font-size: 1.15rem; }
  .tif text { font-size: 11px; }
}

/* Second series. Clay against green is the pair validated for colour-vision
   deficiency separation on this paper; do not swap in the brand green. */
.tif-bar.tif-alt { fill: var(--chart-clay); }
.tif-swatch { stroke: none; }
.tif-swatch.tif-a { fill: var(--chart-green); }
.tif-swatch.tif-b { fill: var(--chart-clay); }
.tif-swatch.tif-c { fill: var(--chart-deemph); }
.tif-key { font-size: 12px; fill: var(--slate); }
.tif-hbar { fill: var(--chart-deemph); }
.tif-hbar.tif-emph { fill: var(--chart-green); }
.tif-hbar.tif-alt { fill: var(--chart-clay); }
.tif-name { font-size: 13px; fill: var(--ink); text-anchor: end; }
.tif-hval { font-size: 12px; font-weight: 600; fill: var(--ink);
            font-variant-numeric: tabular-nums; }

/* =======================================================================
   RELATED ANALYSIS + HUB PAGES
   Cross-links between posts and the sire and sale hubs. Plain markup so
   the links ship in the HTML rather than being built at runtime.
   ======================================================================= */
.related {
  margin: 48px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
}
.related h2 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.related ul { list-style: none; margin: 0; padding: 0; }
.related li {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
}
.related li:last-child { border-bottom: 0; }
.related li a {
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  text-decoration-color: var(--rule);
}
.related li a:hover { color: var(--green-deep); text-decoration: underline; }
.related-meta {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.related-hubs {
  font-family: var(--font-ui);
  font-size: 13px;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.related-hubs span { color: var(--muted); }
.related-hubs a {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--green-deep);
  background: var(--mist);
  text-decoration: none;
}
.related-hubs a:hover { border-color: var(--green); color: var(--green); }

/* Hub pages: post and sire lists */
.hub-list { list-style: none; margin: 0; padding: 0; }
.hub-list .post-item { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.hub-list .post-item:last-child { border-bottom: 0; }
.hub-list h3 {
  font-family: var(--font-text);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 4px 0 6px;
}
.hub-list h3 a { color: var(--ink); text-decoration: none; }
.hub-list h3 a:hover { color: var(--green-deep); text-decoration: underline; }
.hub-list time {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.hub-list p { margin: 0; color: var(--slate); }

@media (max-width: 620px) {
  .related li { flex-direction: column; gap: 3px; }
  .related-meta { white-space: normal; }
}

/* =======================================================================
   INSIGHTS FILTER
   Two dropdowns, sale and sire. The posts all ship in the HTML; the script
   only shows and hides them. The control is hidden until the script reveals
   it, so with scripting off the full list renders and no dead control shows.
   ======================================================================= */
.post-filter {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}
.post-filter[hidden] { display: none; }
.filter-field { display: flex; flex-direction: column; gap: 5px; }
.filter-field label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter-field select {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field);
  border-radius: 5px;
  padding: 7px 30px 7px 10px;
  min-width: 190px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B766F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.filter-field select:hover { border-color: var(--green); }
.filter-field select:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.filter-status {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 8px auto;
}
.filter-empty {
  font-family: var(--font-text);
  font-size: 1.05rem;
  color: var(--slate);
  padding: 28px 0;
  margin: 0;
}
.post-list .post-item[hidden] { display: none; }

@media (max-width: 620px) {
  .post-filter { gap: 12px; }
  .filter-field { flex: 1 1 100%; }
  .filter-field select { width: 100%; min-width: 0; }
  .filter-status { margin: 0; flex: 1 1 100%; }
}

/* ==========================================================================
   Data dashboards
   Used by /data and /data/<slug>. Tokens come from :root at the top of this
   file; nothing here introduces a new colour.
   ========================================================================== */

.dash-head { border-bottom: 1px solid var(--rule); padding-bottom: 1.9rem; margin-bottom: 2.4rem; }
.dash-head h1 { margin-bottom: .4rem; }

.dash-cut {
  font-family: var(--font-ui); font-size: .82rem; line-height: 1.5;
  color: var(--slate); margin: 1rem 0 0;
}
.dash-badge {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: var(--green);
  padding: .2rem .5rem; border-radius: 3px; flex: none; position: relative; top: -1px;
}
.dash-badge.is-final { background: var(--slate); }
.dash-cut-note { color: var(--muted); }
.dash-scope {
  font-size: .98rem; line-height: 1.6; color: var(--slate);
  margin: 1rem 0 0; max-width: 62ch;
}

.dash-kpis {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 2.6rem;
}
.kpi { background: var(--paper); padding: 1.1rem 1.1rem 1rem; }
.kpi-lead { background: var(--mist); }
.kpi-v {
  font-family: var(--font-ui); font-size: 1.85rem; font-weight: 700;
  line-height: 1.05; color: var(--ink); margin: 0 0 .3rem;
  font-variant-numeric: tabular-nums;
}
.kpi-lead .kpi-v { color: var(--green-deep); }
.kpi-k {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
  letter-spacing: .02em; color: var(--ink); margin: 0 0 .2rem;
}
.kpi-n { font-family: var(--font-ui); font-size: .72rem; color: var(--muted); margin: 0; line-height: 1.4; }

.dash-panel { margin-bottom: 2.8rem; }
.dash-panel h2, .dash-table-sec h2, .dash-method h2 { margin-bottom: .7rem; }
.dash-lead { max-width: 68ch; margin-bottom: 1.2rem; }
.dash-note {
  font-size: .88rem; line-height: 1.6; color: var(--slate);
  max-width: 68ch; margin-top: 1.2rem;
}
.data-note { font-size: .88rem; line-height: 1.6; color: var(--slate); max-width: 68ch; }

.cap-bar {
  display: flex; height: 26px; border-radius: 3px; overflow: hidden;
  background: var(--rule); margin: 1.2rem 0 .9rem;
}
.cap-seg { display: block; height: 100%; }
.cap-ret { background: var(--chart-green); }
.cap-rna { background: var(--chart-clay); }
.cap-out { background: var(--chart-deemph); }
.cap-up  { background: var(--field); }
.cap-key {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.4rem;
  font-family: var(--font-ui); font-size: .78rem; color: var(--slate);
}
.cap-key li { display: flex; align-items: center; gap: .45rem; }
.cap-sw { width: 11px; height: 11px; border-radius: 2px; flex: none; }

.dash-filter { align-items: end; }
.filter-search input[type="search"] {
  font-family: var(--font-ui); font-size: .86rem; padding: .42rem .6rem;
  border: 1px solid var(--field); border-radius: 3px; background: var(--paper);
  color: var(--ink); min-width: 190px; width: 100%;
}
.filter-search input[type="search"]:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

.dash-table-sec { margin-bottom: 2.8rem; }
.pin-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-ui); font-size: .84rem;
}
.pin-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--mist); color: var(--ink);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  text-align: left; padding: .55rem .6rem; white-space: nowrap;
  border-bottom: 1px solid var(--rule); cursor: pointer; user-select: none;
}
.pin-table thead th[data-sort]::after { content: ''; display: inline-block; width: .8em; }
.pin-table thead th[aria-sort="ascending"]::after  { content: '\2191'; }
.pin-table thead th[aria-sort="descending"]::after { content: '\2193'; }
.pin-table thead th:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.pin-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.pin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pin-row:hover td { background: #FAFCFB; }
.c-horse { color: var(--ink); min-width: 16ch; }
.c-hip { white-space: nowrap; }

.pin-more {
  font: inherit; font-variant-numeric: tabular-nums; color: var(--green-deep);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.pin-more:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pin-more[aria-expanded="true"] { font-weight: 700; }

.pill {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .16rem .42rem; border-radius: 3px; white-space: nowrap;
}
.pill.st-sold      { background: #E2F0EA; color: var(--green-deep); }
.pill.st-post-sale { background: #E8F0F4; color: #2C5468; }
.pill.st-rna       { background: #FAE8DD; color: #8A3810; }
.pill.st-out       { background: #EFF1F0; color: var(--muted); }
.pill.st-upcoming  { background: #FBF3DF; color: #7A5E12; }

.v-rna  { color: #8A3810; }
.v-out, .v-up { color: var(--muted); }
.m-up   { color: var(--green-deep); font-weight: 700; }
.m-down { color: var(--chart-clay); }

.pin-detail td { background: var(--mist); padding: .85rem 1rem 1rem; }
.pin-dl {
  display: grid; gap: .5rem 1.6rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.pin-dl div { min-width: 0; }
.pin-dl dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .1rem;
}
.pin-dl dd { margin: 0; font-size: .84rem; color: var(--ink); overflow-wrap: anywhere; }

.dash-method { border-top: 1px solid var(--rule); padding-top: 1.8rem; margin-bottom: 2.4rem; }
.dash-method p { font-size: .88rem; line-height: 1.65; color: var(--slate); max-width: 72ch; }
.dash-updated { font-family: var(--font-ui); font-size: .8rem; color: var(--muted); }

.hub-data { font-family: var(--font-ui); font-size: .92rem; margin: 0 0 1.4rem; }

.data-list { list-style: none; padding: 0; margin: 0 0 2.6rem; }
.data-item {
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.1rem 1.2rem; margin-bottom: .9rem;
}
.data-item.is-live { border-color: var(--green); background: var(--mist); }
.data-item h2 { font-size: 1.22rem; margin: .3rem 0 .35rem; }
.data-item h2 a { text-decoration: none; }
.data-item h2 a:hover { text-decoration: underline; }
.data-meta {
  font-family: var(--font-ui); font-size: .76rem; color: var(--muted);
  margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center;
}
.data-focus { font-size: .92rem; color: var(--slate); margin: .35rem 0 0; }
.data-band { font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .8rem; }
/* a second band on the page is a new section, so it gets a rule above it */
.data-list + .data-band { border-top: 1px solid var(--rule); padding-top: 1.9rem; }

@media (max-width: 760px) {
  .pin-table, .pin-table tbody, .pin-table tr, .pin-table td { display: block; width: 100%; }
  .pin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pin-row {
    border: 1px solid var(--rule); border-radius: 4px;
    margin-bottom: .7rem; padding: .3rem .1rem;
  }
  .pin-row:hover td { background: transparent; }
  .pin-table td {
    border: 0; padding: .28rem .8rem;
    display: flex; justify-content: space-between; gap: 1rem; text-align: right;
  }
  .pin-table td::before {
    content: attr(data-label); font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); text-align: left; flex: none;
  }
  .pin-table td.c-horse { font-weight: 600; }
  .pin-detail { border: 0; margin: -.5rem 0 .7rem; }
  .pin-detail td { display: block; text-align: left; border-radius: 0 0 4px 4px; }
  .pin-detail td::before { content: none; }
  .dash-filter { display: grid; grid-template-columns: 1fr; gap: .7rem; }
  .kpi-v { font-size: 1.6rem; }
}

/* --- dashboard: source column, collapsible method --- */
.c-src { color: var(--slate); white-space: nowrap; font-size: .8rem; }

.method-quick {
  display: grid; gap: .55rem 1.8rem; margin: 0 0 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 78ch;
}
.method-quick div { min-width: 0; }
.method-quick dt {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin: 0 0 .1rem;
}
.method-quick dd { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--slate); }

.method-full > summary {
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  color: var(--green-deep); cursor: pointer; padding: .3rem 0;
  list-style: none; display: inline-flex; align-items: center; gap: .35rem;
}
.method-full > summary::-webkit-details-marker { display: none; }
.method-full > summary::before { content: '\25B8'; font-size: .8em; transition: transform .12s; }
.method-full[open] > summary::before { transform: rotate(90deg); }
.method-full > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.method-full[open] { margin-bottom: .8rem; }

/* ==========================================================================
   Print. Browsers drop background colours when exporting to PDF, which turns
   the capital bar into an empty strip and the status pills into bare text.
   Force them, and stop the layout fragmenting across pages.
   ========================================================================== */
@media print {
  .site-header, .site-footer, .skip-link,
  .dash-filter, .article-foot, .filter-empty { display: none !important; }

  .cap-seg, .cap-sw, .pill, .kpi-lead, .pin-detail td, .pin-table thead th {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .cap-bar { border: 1px solid var(--rule); }

  .dash-kpis { grid-template-columns: repeat(5, 1fr); break-inside: avoid; }
  .kpi { padding: .7rem .6rem; }
  .kpi-v { font-size: 1.15rem; }
  .kpi-k { font-size: .62rem; }
  .kpi-n { font-size: .56rem; }

  .dash-panel, .dash-head, .method-quick { break-inside: avoid; }
  .dash-table-sec h2, .dash-method h2 { break-after: avoid; }

  .method-full > summary { display: none; }
  .method-full { display: block !important; }

  .pin-table { font-size: .68rem; }
  .pin-table thead { display: table-header-group; }
  .pin-table tr { break-inside: avoid; }
  .pin-table thead th { position: static; }
  .pin-table td { padding: .22rem .35rem; }
  .c-src { font-size: .64rem; }

  a[href]::after { content: none !important; }
  body { background: #fff; }
}
.dash-cut-note { display: block; margin-top: .2rem; color: var(--muted); }

/* --- dashboard: jump nav, figure panels, matrix cells --- */
.dash-jump {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: .2rem 1.4rem;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: .6rem 0; margin: 0 0 2.2rem;
  font-family: var(--font-ui); font-size: .78rem;
}
.dash-jump a {
  color: var(--slate); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: .15rem;
}
.dash-jump a:hover { color: var(--green-deep); border-bottom-color: var(--green); }
.dash-jump a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.fig-panel { margin: 1.4rem 0 0; padding: 0; overflow-x: auto; }
.fig-panel .tif { width: 100%; height: auto; min-width: 560px; }

/* Caption under a figure. Says what the picture is showing, in the same
   register as .dash-note, so a reader who skips the chart still gets it. */
.fig-cap {
  margin: .9rem 0 0; max-width: 46rem;
  font-family: var(--font-ui); font-size: .82rem; line-height: 1.55;
  color: var(--muted);
}

.fig-grid {
  width: 100%; border-collapse: collapse; margin-top: 1rem;
  font-family: var(--font-ui); font-size: .8rem;
}
.fig-grid th, .fig-grid td { padding: .38rem .6rem; border-bottom: 1px solid var(--rule); }
.fig-grid thead th {
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); text-align: right; border-bottom: 1px solid var(--rule);
}
.fig-grid thead th:first-child { text-align: left; }
.fig-grid tbody th { text-align: left; font-weight: 600; color: var(--ink); }
.fig-grid .num { text-align: right; font-variant-numeric: tabular-nums; }

.cell-v { font-family: var(--font-ui); font-size: .82rem; font-weight: 700; }
.cell-n { font-family: var(--font-ui); font-size: .62rem; }

@media (max-width: 760px) {
  .dash-jump { gap: .2rem .9rem; font-size: .72rem; }
}
@media print {
  .dash-jump { display: none !important; }
  .fig-panel { overflow: visible; break-inside: avoid; }
  .fig-panel .tif { min-width: 0; }
  .cell-v, .cell-n, .tif-bar, .tif-emph, .tif-alt {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }
}
/* the sticky jump nav must not sit on top of the heading it scrolls to */
.dash-panel h2, .dash-table-sec h2, .dash-method h2 { scroll-margin-top: 3.6rem; }
.dash-badge.is-prov  { background: var(--gold); color: #3A2D08; }
.dash-badge.is-final { background: var(--slate); }
.dash-dl { font-family: var(--font-ui); font-size: .84rem; margin: -.4rem 0 1.4rem; }
.dash-dl a { font-weight: 600; }
.dash-dl span { color: var(--muted); margin-left: .5rem; }
.pin-row.is-linked td { background: var(--mist); box-shadow: inset 3px 0 0 var(--green); }
@media print { .dash-dl { display: none !important; } }
.pin-row { scroll-margin-top: 4.5rem; }

/* ==========================================================================
   Dashboard vertical rhythm. The top of the page has to feel composed, not
   stacked, so the spacing is set explicitly rather than inherited.
   ========================================================================== */
.dash-head { padding-bottom: 2.75rem; margin-bottom: 0; border-bottom: 0; }
.dash-head .article-meta { margin-bottom: 1.1rem; }
.dash-head h1 { margin-bottom: .875rem; }          /* title -> deck, 14px */
.dash-head .dek { margin-bottom: 0; max-width: 50rem; }
.dash-head .dash-cut {
  margin-top: 1.375rem; max-width: 50rem;
  display: flex; align-items: baseline; gap: .6rem;
}
.dash-cut-body { display: block; }
.dash-cut-when { display: block; color: var(--slate); }                 /* deck -> live line, 22px */
.dash-head .dash-scope { margin-top: 1.375rem; max-width: 50rem; line-height: 1.65; }

.dash-head .dash-find { margin: 1.75rem 0 0; font-family: var(--font-ui); font-size: .92rem; }
.dash-find a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--green-deep); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 4px;
  padding: .6rem 1.05rem; background: var(--mist);
}
.dash-find a:hover { border-color: var(--green); }
.dash-find a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.dash-kpis { margin-top: 2.5rem; margin-bottom: 0; }   /* intro -> KPIs, 40px */

.dash-jump {
  margin: 3.75rem 0 0;                                  /* KPIs -> nav, 60px */
  border-top: 1px solid var(--rule);
  padding: .75rem 0; gap: .35rem 1.35rem; align-items: baseline;
}
.dash-jump-lab {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.dash-jump a.is-key { color: var(--green-deep); font-weight: 700; }

.dash-panel, .dash-table-sec { margin-top: 4rem; margin-bottom: 0; }  /* 64px before a section */
.dash-panel h2, .dash-table-sec h2, .dash-method h2 { margin-bottom: 1.375rem; }
.dash-panel .dash-lead, .dash-table-sec .dash-lead {
  max-width: 50rem; line-height: 1.65; margin-bottom: 0;
}
.fig-panel { margin-top: 1.75rem; }
.cap-bar { margin: 1.75rem 0 1rem; }
.dash-note { margin-top: 1.75rem; max-width: 50rem; line-height: 1.65; }
.dash-dl { margin: 1.25rem 0 1.75rem; }
.dash-method { margin-top: 4rem; padding-top: 2.25rem; }
.dash-method p { max-width: 50rem; line-height: 1.65; margin-bottom: 1.25rem; }
.dash-method .method-quick { margin-top: 1.375rem; }

@media (max-width: 760px) {
  .dash-head { padding-bottom: 2rem; }
  .dash-kpis { margin-top: 2rem; }
  .dash-jump { margin-top: 2.5rem; }
  .dash-panel, .dash-table-sec, .dash-method { margin-top: 2.5rem; }  /* never below 40px */
  .dash-find a { width: 100%; justify-content: center; }
}

/* --- gross caveat + net cost calculator --- */
.dash-head .dash-gross {
  margin-top: 0; font-family: var(--font-ui); font-size: .82rem;
  line-height: 1.55; color: var(--muted); max-width: 50rem;
}
.tif-note { font-size: 11px; fill: var(--muted); text-transform: none;
  letter-spacing: 0; font-weight: 400; }

.cost-calc {
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.15rem 1.25rem 1.25rem; margin: 0 0 1.5rem; background: var(--paper);
}
.cost-head h3 {
  font-family: var(--font-ui); font-size: .94rem; font-weight: 700;
  color: var(--ink); margin: 0 0 .3rem;
}
.cost-head p {
  font-family: var(--font-ui); font-size: .82rem; line-height: 1.55;
  color: var(--slate); margin: 0 0 1rem; max-width: 62ch;
}
.cost-fields { display: flex; flex-wrap: wrap; gap: .85rem 1.1rem; align-items: end; }
.cost-f { display: flex; flex-direction: column; gap: .3rem; }
.cost-f label {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.cost-f input {
  font-family: var(--font-ui); font-size: .9rem; padding: .42rem .55rem; width: 8.5rem;
  border: 1px solid var(--field); border-radius: 3px; background: var(--paper); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cost-f input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.cost-reset {
  font-family: var(--font-ui); font-size: .8rem; color: var(--slate);
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  padding: .45rem .8rem; cursor: pointer;
}
.cost-reset:hover { border-color: var(--field); color: var(--ink); }
.cost-out {
  font-family: var(--font-ui); font-size: .88rem; line-height: 1.5;
  color: var(--ink); margin: 1rem 0 0; padding-top: .85rem;
  border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums;
}

/* the net column only exists once the reader has supplied costs */
.pin-table th.c-net, .pin-table td.c-net { display: none; }
.pin-table.show-net th.c-net, .pin-table.show-net td.c-net { display: table-cell; }
.pin-table th.c-net { color: var(--green-deep); }

@media (max-width: 760px) {
  .cost-f, .cost-f input { width: 100%; }
  .cost-fields { display: grid; grid-template-columns: 1fr 1fr; }
  .cost-reset { grid-column: 1 / -1; }
  .pin-table.show-net td.c-net { display: flex; }
}
@media print { .cost-calc { display: none !important; } }

/* ==========================================================================
   Dashboard subscribe bar
   Sits between the jump nav and the first chart panel. Deliberately lighter
   than the .subscribe block in the article footer: this one interrupts a
   reader who has not been paid yet, so it stays one line tall and quiet.
   ========================================================================== */
.sub-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .8rem 2rem;
  background: var(--mist);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--green);
  border-radius: 4px;
  padding: .85rem 1.1rem;
  margin: 1rem 0 2.6rem;
}
.sub-bar-copy { flex: 1 1 300px; min-width: 0; }
.sub-bar-lede {
  font-family: var(--font-ui); font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--green-deep); margin: 0 0 .15rem;
}
.sub-bar-note {
  font-family: var(--font-ui); font-size: .88rem; line-height: 1.45;
  color: var(--slate); margin: 0; max-width: 56ch;
}
.sub-bar-form { display: flex; gap: .5rem; flex: 0 1 380px; min-width: 260px; }
.sub-bar-form input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-ui); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--field); border-radius: 4px;
  padding: .55rem .7rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sub-bar-form input[type="email"]:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(26, 122, 90, .18);
}
.sub-bar-form .btn { flex: none; padding: .55rem 1.1rem; font-size: .9rem; }

@media (max-width: 620px) {
  .sub-bar { display: block; }
  .sub-bar-copy { margin-bottom: .7rem; }
  .sub-bar-form { max-width: none; }
}

@media print { .sub-bar { display: none !important; } }

/* =======================================================================
   DATA INDEX
   A data publication, not a directory. The head is editorial: the thesis
   is the headline, a real chart from the published records sits beside it,
   and the categories below say where this is going. Datasets are weighted,
   with the live one given the page's centre of gravity.
   ======================================================================= */
.page-head.data-head { padding: 64px 0 48px; }

.data-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr);
  gap: 2.4rem 3.6rem; align-items: end;
}
.data-eyebrow {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green);
  margin: 0 0 1.4rem;
}
.data-hero h1 {
  font-size: clamp(2rem, 1.2rem + 2.3vw, 3.05rem);
  line-height: 1.09; letter-spacing: -0.024em; margin: 0 0 1.25rem;
  max-width: 16ch; text-wrap: balance;
}
.data-head .dek {
  font-size: 1.08rem; line-height: 1.6; color: var(--slate);
  max-width: 44ch; margin: 0;
}
.dek-domains {
  display: block; color: var(--ink); font-weight: 600;
  letter-spacing: -0.004em; margin-bottom: .35rem;
}

/* The chart is the page's one piece of visual argument, so it is real data
   rather than decoration: every completed resale, ranked by what it returned. */
.data-hero-fig { margin: 0; }
.hero-strip { width: 100%; height: auto; display: block; overflow: visible; }
.hs-up { fill: var(--chart-green); }
.hs-dn { fill: var(--chart-clay); }
.hs-ref { stroke: var(--ink); stroke-width: 1; opacity: .45; }
.hs-clip { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.hero-strip text { font-family: var(--font-ui); }
.hs-ref-lab { font-size: 14px; font-weight: 700; fill: var(--ink); letter-spacing: .03em; }
.hs-end { font-size: 12.5px; font-weight: 700; fill: var(--slate); letter-spacing: .07em;
          text-transform: uppercase; }
.hs-dn-lab { fill: var(--chart-clay); }
.data-hero-fig figcaption {
  font-family: var(--font-ui); font-size: .82rem; line-height: 1.55;
  color: var(--slate); margin-top: 1rem; max-width: 56ch;
}

/* The manifesto runs as one column at reading width. */
.page-head .page-intro {
  margin: 3.4rem 0 0; padding-top: 2rem; max-width: 50rem;
  border-top: 1px solid var(--rule);
  display: block;
}
.page-head .page-intro p {
  font-size: 1.05rem; line-height: 1.7; color: var(--slate); margin: 0 0 1.15rem;
}
.page-head .page-intro p:last-child { margin-bottom: 0; }
.intro-open { color: var(--ink); font-weight: 600; }

/* Where this is going. Categories with nothing published yet stay unlinked
   rather than being hidden, so the scope of the section is visible. */
.data-taxonomy {
  display: flex; flex-wrap: wrap; gap: .4rem 1.7rem; margin-top: 2.4rem;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.data-taxonomy a,
.data-taxonomy .tax-static { color: var(--green-deep); text-decoration: none;
  border-bottom: 2px solid var(--green); padding-bottom: .2rem; }
.data-taxonomy a:hover { color: var(--green); }
.data-taxonomy span { color: var(--chart-deemph); }
.data-taxonomy .tax-static { color: var(--green-deep); }

/* the interactive version of the same row, once script is running */
.tax-btn {
  font: inherit; color: var(--chart-deemph); background: none; border: 0;
  border-bottom: 2px solid transparent; padding: 0 0 .2rem; cursor: pointer;
  letter-spacing: inherit; text-transform: inherit;
}
.tax-btn:hover { color: var(--green-deep); }
.tax-btn.is-on { color: var(--green-deep); border-bottom-color: var(--green); }
.tax-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.data-band {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 1.4rem;
}

/* The live dataset carries the page. No border box: a green rule, big type
   and one figure at scale. */
.data-feature {
  border-top: 3px solid var(--green); padding: 1.9rem 0 0; margin: 0 0 4.5rem;
}
.data-feature.is-past { border-top-color: var(--rule); }
.data-feature.is-past .feat-v { color: var(--slate); }
.feat-meta {
  font-family: var(--font-ui); font-size: .78rem; color: var(--muted);
  margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: center;
}
.data-feature h2 {
  font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.9rem); line-height: 1.08;
  letter-spacing: -0.022em; margin: 0 0 .9rem;
}
.data-feature h2 a { color: var(--ink); text-decoration: none; }
.data-feature h2 a:hover { color: var(--green-deep); }
.feat-lede { font-size: 1.05rem; line-height: 1.65; color: var(--slate);
  max-width: 54ch; margin: 0 0 2.2rem; }

.feat-figs {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  gap: 2rem 4rem; align-items: start;
  border-top: 1px solid var(--rule); padding-top: 1.8rem;
}
.feat-v {
  font-family: var(--font-ui); font-size: clamp(3.2rem, 2rem + 3.6vw, 5rem);
  font-weight: 700; line-height: .9; letter-spacing: -0.03em;
  color: var(--green-deep); margin: 0 0 .5rem; font-variant-numeric: tabular-nums;
}
.feat-k {
  font-family: var(--font-ui); font-size: .82rem; line-height: 1.45;
  color: var(--slate); margin: 0; max-width: 16ch;
}
.feat-rest {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 2.5rem; margin: 0;
}
.feat-rest div { margin: 0; }
.feat-rest dt {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .35rem;
}
.feat-rest dd {
  font-family: var(--font-ui); font-size: 1.85rem; font-weight: 700;
  line-height: 1; color: var(--ink); margin: 0; font-variant-numeric: tabular-nums;
}
.feat-go { font-family: var(--font-ui); font-size: .92rem; margin: 2.2rem 0 0; }
.feat-go a {
  font-weight: 700; color: var(--green-deep); text-decoration: none;
  border-bottom: 2px solid var(--green); padding-bottom: .2rem;
}
.feat-go a:hover { color: var(--green); }

/* Finished work sits quieter than the live dataset. */
.data-past { list-style: none; margin: 0 0 4rem; padding: 0; }
.data-past li { border-top: 1px solid var(--rule); padding: 1.5rem 0 0; }
.past-meta {
  font-family: var(--font-ui); font-size: .76rem; color: var(--muted);
  margin: 0 0 .55rem; display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: center;
}
.data-past h2 { font-size: 1.32rem; line-height: 1.25; margin: 0 0 .45rem; }
.data-past h2 a { color: var(--ink); text-decoration: none; }
.data-past h2 a:hover { color: var(--green-deep); }
.past-lede { font-size: .97rem; line-height: 1.6; color: var(--slate); max-width: 62ch; margin: 0; }

/* Quiet sign-up. It should not compete with the datasets. */
.data-sub {
  border-top: 1px solid var(--rule); padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .9rem 2rem;
}
.data-sub-lede {
  font-family: var(--font-ui); font-size: .92rem; color: var(--ink); margin: 0;
}
.data-sub-form { display: flex; gap: .5rem; flex: 0 1 26rem; }
.data-sub-form input[type="email"] {
  flex: 1 1 auto; min-width: 0; font-family: var(--font-ui); font-size: .88rem;
  padding: .55rem .7rem; border: 1px solid var(--field); border-radius: 3px;
  background: var(--paper); color: var(--ink);
}
.data-sub-form .btn { flex: none; }

@media (max-width: 960px) {
  .data-hero { grid-template-columns: 1fr; gap: 2.2rem; align-items: start; }
  .data-hero h1 { max-width: none; }
  .data-head .dek { max-width: none; }
  .feat-figs { grid-template-columns: 1fr; gap: 1.8rem; }
  .feat-k { max-width: none; }
}
@media (max-width: 760px) {
  .page-head.data-head { padding: 44px 0 36px; }
  .data-taxonomy { gap: .4rem 1.1rem; font-size: .72rem; }
  .data-sub { flex-direction: column; align-items: stretch; }
  .data-sub-form { flex: 1 1 auto; }
}

/* =======================================================================
   WAGER PAGES
   A model line published before a race. The line itself is the artifact,
   so it gets the weight; the prose around it is read second.
   ======================================================================= */
.odds-table {
  width: 100%; border-collapse: collapse; margin: 1.6rem 0 0;
  font-family: var(--font-ui); font-size: .88rem;
}
.odds-table th, .odds-table td {
  padding: .6rem .7rem; border-bottom: 1px solid var(--rule); text-align: left;
}
.odds-table thead th {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--rule);
}
.odds-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.odds-table tbody tr:first-child { background: var(--mist); }
.odds-table tbody tr:last-child td { border-bottom: 0; }

.tier-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem 1.8rem; margin: 1.9rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.tier-list div { margin: 0; }
.tier-list dt {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem;
}
.tier-list dd { margin: 0; font-size: 1rem; line-height: 1.4; }
.tier-list dd strong { display: block; color: var(--ink); }
.tier-list dd span { display: block; font-family: var(--font-ui); font-size: .78rem; color: var(--slate); margin-top: .15rem; }

.horse-grid { display: grid; gap: 2.6rem; margin-top: 1.6rem; }
.horse { border-top: 2px solid var(--rule); padding-top: 1.3rem; position: relative; }
.horse:first-child, .horse:nth-child(2) { border-top-color: var(--green); }
.horse-head { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; }
.silk {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 3px;
  background: var(--chart-deemph); color: #fff;
  font-family: var(--font-ui); font-weight: 700; font-size: 1.1rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.horse:first-child .silk, .horse:nth-child(2) .silk { background: var(--green); }
.horse-name {
  font-family: var(--font-ui); font-size: 1.28rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; color: var(--ink);
}
.horse h3 { font-size: 1.55rem; line-height: 1.15; margin: 0 0 .7rem; letter-spacing: -.015em; }
.horse-verdict {
  font-family: var(--font-ui); font-size: .88rem; line-height: 1.55; color: var(--ink);
  background: var(--mist); border-radius: 4px; padding: .7rem .9rem; margin: 0 0 1.1rem;
  max-width: 54rem;
}
.horse-verdict span {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .2rem;
}
.horse p { max-width: 54rem; }

/* A prose comparison table. Distinct from .fig-grid, which right-aligns its
   headers because it exists to carry numbers under a chart. Everything here is
   text, so everything is left-aligned and the columns are given real widths
   instead of splitting the full page evenly. */
.compare-table {
  width: 100%; max-width: 62rem; border-collapse: collapse; margin: 1.5rem 0 0;
  font-family: var(--font-ui); font-size: .88rem; line-height: 1.5;
}
.compare-table th, .compare-table td {
  text-align: left; vertical-align: top; padding: .8rem 1.4rem .8rem 0;
  border-bottom: 1px solid var(--rule);
}
.compare-table thead th {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); padding-bottom: .55rem;
}
.compare-table th[scope="row"] { font-weight: 700; color: var(--ink); width: 27%; }
.compare-table td { color: var(--slate); width: 38%; }
.compare-table td.c-read { width: 35%; color: var(--ink); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 720px) {
  /* three text columns do not survive a phone, so each row becomes a block */
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td, .compare-table th { display: block; width: auto; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table tbody tr { border-bottom: 1px solid var(--rule); padding: .9rem 0; }
  .compare-table tbody tr:last-child { border-bottom: 0; }
  .compare-table th[scope="row"] { width: auto; border: 0; padding: 0 0 .3rem; }
  .compare-table td,
  .compare-table td.c-read { width: auto; border: 0; padding: 0 0 .25rem; }
  .compare-table td.c-read::before {
    content: "Read: "; font-weight: 700; color: var(--muted);
    font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  }
}
.wager-list { margin: 1.3rem 0 0; padding-left: 1.1rem; max-width: 54rem; }
.wager-list li { margin-bottom: .85rem; line-height: 1.6; }
.sub-h {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 2.4rem 0 1rem;
}
@media (max-width: 620px) {
  .odds-table { font-size: .84rem; }
}

/* ---- Wager page: live-source links, the read, horse case, tickets ---- */
.dash-voids {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: .6rem; margin: 2.4rem 0 2rem; padding: 1.1rem 1.2rem 1.2rem; max-width: 46rem;
  background: var(--mist); border-radius: 5px;
}
.void-lab {
  grid-column: 1 / -1; margin-bottom: .15rem;
  font-family: var(--font-ui); font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.void-link {
  display: block; font-family: var(--font-ui); text-decoration: none;
  background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--green);
  border-radius: 4px; padding: .55rem .75rem;
}
.void-link:hover { border-color: var(--green); }
.void-k {
  display: flex; align-items: center; gap: .4rem;
  font-size: .92rem; font-weight: 700; line-height: 1.3; color: var(--green-deep);
}
.void-k i { font-style: normal; font-size: .9em; transition: transform .12s ease; }
.void-link:hover .void-k i { transform: translateX(3px); }
.void-s {
  display: block; font-size: .72rem; font-weight: 500; color: var(--slate); margin-top: .12rem;
}

.fact-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .9rem 1.8rem; margin: 1.5rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.fact-row.is-wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fact-row div { margin: 0; }
.fact-row dt {
  font-family: var(--font-ui); font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .25rem;
}
.fact-row dd {
  margin: 0; font-family: var(--font-ui); font-size: .88rem; line-height: 1.45; color: var(--ink);
}

.horse-sub {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--green); margin: -.45rem 0 1rem;
}
.horse-case {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0; margin: 1.2rem 0 1.1rem; border-top: 1px solid var(--rule);
}
.horse-case div { margin: 0; padding: .9rem 1rem .9rem 0; }
.horse-case .case-up { border-top: 2px solid var(--green); }
.horse-case .case-down { border-top: 2px solid var(--field); }
.horse-case dt {
  font-family: var(--font-ui); font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem;
}
.horse-case dd {
  margin: 0; font-family: var(--font-ui); font-size: .95rem; font-weight: 600;
  line-height: 1.45; color: var(--ink);
}
.horse-case .case-down dd { font-variant-numeric: tabular-nums; }
.horse .horse-verdict { margin: 0; }

.work-list { display: grid; gap: .55rem; margin: 1rem 0 0; }
.work-list div { display: grid; grid-template-columns: 11rem 1fr; gap: .8rem; margin: 0; }
.work-list dt { font-family: var(--font-ui); font-size: .86rem; font-weight: 700; color: var(--ink); }
.work-list dd { margin: 0; font-family: var(--font-ui); font-size: .86rem; color: var(--slate); }

.wager-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1rem; margin: 1.3rem 0 1.1rem;
}
.wager-card {
  border: 1px solid var(--rule); border-top: 3px solid var(--field);
  border-radius: 4px; padding: .95rem 1.05rem;
}
.wager-card.is-lead { border-top-color: var(--chart-green); background: var(--mist); }
.wager-card.is-out { border-top-color: var(--chart-clay); }
.wager-k {
  font-family: var(--font-ui); font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem;
}
.wager-v {
  font-family: var(--font-ui); font-size: 1.02rem; font-weight: 700; line-height: 1.25;
  color: var(--ink); margin: 0 0 .5rem;
}
.wager-n { font-family: var(--font-ui); font-size: .84rem; line-height: 1.55; color: var(--slate); margin: 0; }

.ticket-list { display: grid; gap: 1rem; margin: 1.1rem 0 0; }
.ticket-list div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; margin: 0; align-items: start; }
.ticket-list dt {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); padding-top: .3rem;
}
.ticket-list dd { margin: 0; }
.ticket-list .tkt {
  display: block; font-family: var(--font-ui); font-size: 1rem; font-weight: 700;
  color: var(--green-deep); letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.ticket-list dd span {
  display: block; font-family: var(--font-ui); font-size: .84rem; line-height: 1.55;
  color: var(--slate); margin-top: .25rem;
}

@media (max-width: 620px) {
  .work-list div, .ticket-list div { grid-template-columns: 1fr; gap: .2rem; }
  .ticket-list dt { padding-top: 0; }
  .horse-case div { padding-right: 0; }
}

/* Below tablet the line drops to PP, horse, win, fair, action price.
   Jockey, trainer, early and late all appear again further down the page. */
@media (max-width: 900px) {
  .odds-table th:nth-child(3), .odds-table td:nth-child(3),
  .odds-table th:nth-child(4), .odds-table td:nth-child(4),
  .odds-table th:nth-child(5), .odds-table td:nth-child(5),
  .odds-table th:nth-child(6), .odds-table td:nth-child(6) { display: none; }
  .odds-table td:nth-child(7) { font-size: 1.02em; }
}

.compare-table.is-fig td.num, .compare-table.is-fig th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.compare-table.is-fig td.c-read { width: auto; }


/* ---- Wagering tickets as objects ---- */
.tkt-board {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .9rem; margin: 1.2rem 0 1.1rem; align-items: start;
}
.tkt-board.is-abc { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tkt-group {
  border: 1px solid var(--rule); border-top: 3px solid var(--field);
  border-radius: 4px; padding: .8rem .9rem .9rem;
}
.tkt-group.is-lead { border-top-color: var(--chart-green); background: var(--mist); }
.tkt-group.is-out { border-top-color: var(--chart-clay); }
.tkt-lab {
  font-family: var(--font-ui); font-size: .64rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .55rem;
}
.tkt-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
  margin: 0 0 .4rem; font-family: var(--font-ui); font-variant-numeric: tabular-nums;
}
.tkt-line:last-child { margin-bottom: 0; }
.tkt-line b { font-size: 1.05rem; font-weight: 700; color: var(--green-deep); letter-spacing: .01em; }
.tkt-line i { font-style: normal; font-size: 1rem; color: var(--slate); font-weight: 700; opacity: .75; }
.tkt-line.is-tri b { font-size: .98rem; }
.tkt-why {
  font-family: var(--font-ui); font-size: .8rem; line-height: 1.5; color: var(--slate);
  margin: .6rem 0 0; padding-top: .55rem; border-top: 1px solid var(--rule);
}

/* ---- Adversarial read, the dissenting view ---- */
.dash-dissent {
  background: var(--mist); border: 1px solid var(--rule); border-left: 4px solid var(--chart-clay);
  border-radius: 5px; padding: 1.5rem 1.7rem 1.7rem;
}
.dissent-tag {
  font-family: var(--font-ui); font-size: .64rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--chart-clay); margin: 0 0 .35rem;
}
.dash-dissent > h2 { margin-top: 0; }
.dash-dissent .dash-note {
  background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: .85rem 1rem;
}

/* ---- Method collapsed ---- */
.method-shell > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate);
  padding: .9rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.method-shell > summary::-webkit-details-marker { display: none; }
.method-shell > summary::after {
  content: "+"; margin-left: auto; font-size: 1.1rem; font-weight: 700; color: var(--green);
}
.method-shell[open] > summary::after { content: "\2212"; }
.method-shell > summary:hover { color: var(--green-deep); }
.method-shell > p { font-size: .92rem; line-height: 1.65; color: var(--slate); }
.method-shell .method-quick { margin-top: 1.4rem; }

@media (max-width: 620px) {
  .dash-dissent { padding: 1.2rem 1.1rem 1.3rem; }
}

/* ---- Race meta bar: badge plus aligned label/value rows ---- */
.race-bar {
  display: flex; align-items: flex-start; gap: 1rem;
  margin: 1.5rem 0 0; padding: 1rem 1.2rem; max-width: 40rem;
  border: 1px solid var(--rule); border-left: 4px solid var(--green); border-radius: 5px;
}
.race-rows { display: grid; gap: .4rem; margin: 0; min-width: 0; }
.race-rows div {
  display: grid; grid-template-columns: 8.6rem 1fr; gap: .9rem; margin: 0; align-items: baseline;
}
.race-rows dt {
  font-family: var(--font-ui); font-size: .64rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}
.race-rows dd {
  margin: 0; font-family: var(--font-ui); font-size: .95rem; line-height: 1.4; color: var(--ink);
}
.race-rows .nowrap { white-space: nowrap; }
.race-bar .dash-badge { flex: 0 0 auto; margin-top: .05rem; }

@media (max-width: 620px) {
  .race-bar { flex-direction: column; gap: .8rem; }
  .race-rows div { grid-template-columns: 1fr; gap: 0; }
  .race-rows { gap: .7rem; }
}

/* ---------- Inline tracker call to action ---------- */
.prose .tracker-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  background: var(--mist);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--green);
  border-radius: 6px;
  padding: 24px 26px;
  margin: 2.2em 0 2.6em;
}
.prose .tracker-cta-copy { flex: 1 1 320px; min-width: 0; }
.prose .tracker-cta-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 7px;
}
.prose .tracker-cta-title {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 7px;
}
.prose .tracker-cta-note {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate);
  margin: 0;
}
.prose .tracker-cta .btn { flex: 0 0 auto; }

@media (max-width: 620px) {
  .prose .tracker-cta { padding: 22px 20px; }
  .prose .tracker-cta .btn { width: 100%; }
}

/* ---------- Top-20 pinhook table ---------- */
table.data.top20 { font-size: 0.92rem; }
table.data.top20 th[scope="row"] { white-space: nowrap; }
table.data .cell-sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78em;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 3px;
}
@media (max-width: 760px) {
  table.data.top20 { font-size: 0.86rem; }
}