/* ===================================================================== design system start ==
   Stallion Compare design system, revision 20 (app/docs/design-system; artifact 1793709068-3f7b; bundle.css sha256 98fc4271…).
   Do not edit here; change the source files and rebuild this block.
   1. tokens.css, verbatim: the CSS variables and the .t-* text styles.
   2. bundle.css, verbatim and global (no .ds scope since revision 3). Only its .demo helpers (for the system's own
      specimen page) are left out.
   ================================================================================================ */
/* Stallion Compare design system tokens (artifact version 1793624325-cdaf, Nov 2 2026; neutral backgrounds are eggshell and eggshell-60 only, surface-page/-soft/-sand/-cream and stone-tint retired). The only colours, sizes, spacing and radii allowed. The responsive type (--fs-*, --lh-*) and section-layout tokens (--section-py, --section-py-compact, --gutter, --block-gap, --content-max) are defined in bundle.css. */
:root{
  /* colour */
  --navy:#151934; --navy-700:#2A2F57; --navy-tint:#F2F3F8;
  --gold:#C09C6A; --gold-text:#826338;
  --wine:#813E45; --wine-tint:#F3E9EA; --wine-mid:#C09EA2;
  --ink:#464960; --ink-muted:#65677A;
  --on-dark:#FFFFFF; --on-dark-muted:#C3C5D6;
  --surface:#FFFFFF; --selection:#FFE19E;
  --line:#E9E7E5; --line-strong:#DEDBD8; --line-cream:#EADFCB;
  --live:#C2412D; --live-tint:#FBE3DD; --live-text:#9A2A15; --live-row:#FFF6F3;
  --warn-text:#5A3A0A; --warn-tint:#FBF0DC; --highlight:#F3E7CF;
  --stone:#B4AAA0; --stone-line:#DAD5D0; --eggshell:#F1F2EE; --eggshell-60:#F7F7F5; --tan:#C6B49C; --success:#4A6C2A; --success-tint:#EAF0E3;
  /* article topics: base + 8% tint */
  --cat-grasping-genetics:#8A6532; --cat-grasping-genetics-tint:#F6F3EF;
  --cat-press-release:#56706E; --cat-press-release-tint:#F1F4F3;
  --cat-stallion-spotlight:#693B91; --cat-stallion-spotlight-tint:#F3EFF6;
  --cat-show-statistics:#3B6991; --cat-show-statistics-tint:#EFF3F6; --cat-show-statistics-mid:#9DB4C8;
  --cat-breeder-spotlight:#813E45; --cat-breeder-spotlight-tint:#F5F0F0;
  --cat-lost-legends:#1A6E74; --cat-lost-legends-tint:#EDF3F4;
  --cat-feature-release:#1D72A0; --cat-feature-release-tint:#EDF4F7;
  --cat-mare-of-the-month:#A73C8B; --cat-mare-of-the-month-tint:#F8EFF6;
  --cat-trainer-spotlight:#3F6B52; --cat-trainer-spotlight-tint:#F0F3F1;
  --cat-tips-with-taft:#A4532B; --cat-tips-with-taft-tint:#F8F1EE;
  --cat-sales-results:#3A3566; --cat-sales-results-tint:#EFEFF3;
  --cat-heritage-horse:#626032; --cat-heritage-horse-tint:#F2F2EF;
  /* type */
  --font-sans:"Plus Jakarta Sans", system-ui, sans-serif;
  --font-serif:larken, Georgia, serif;
  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  /* radius: icon buttons and the feature block square; buttons, chips, the segmented control and content surfaces (photo cards, article images, stat tiles, notes, inputs, badges, tags, placeholders) radius-xs */
  --radius-none:0px; --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  /* shadow */
  --shadow-sm:0 1px 3px rgba(21,25,52,0.15); --shadow-md:0 8px 24px rgba(21,25,52,0.18);
}
/* Text styles: 5 serif (Larken) + 12 sans (Plus Jakarta Sans) */
.t-display-xl{font-family:var(--font-serif);font-size:var(--fs-display-xl);line-height:var(--lh-display-xl);font-weight:300}
.t-display{font-family:var(--font-serif);font-size:var(--fs-display);line-height:var(--lh-display);font-weight:300}
.t-title{font-family:var(--font-serif);font-size:var(--fs-title);line-height:var(--lh-title);font-weight:400}
.t-card-title{font-family:var(--font-serif);font-size:var(--fs-card-title);line-height:var(--lh-card-title);font-weight:400}
.t-numeral{font-family:var(--font-serif);font-size:var(--fs-numeral);line-height:var(--lh-numeral);font-weight:400}
.t-heading-l{font-size:var(--fs-heading-l);line-height:var(--lh-heading-l);font-weight:700;letter-spacing:-0.01em}
.t-heading-m{font-size:var(--fs-heading-m);line-height:var(--lh-heading-m);font-weight:700}
.t-heading-s{font-size:16px;line-height:20px;font-weight:700}
.t-body{font-size:16px;line-height:24px;font-weight:400}
.t-body-s{font-size:14px;line-height:21px;font-weight:400}
.t-caption{font-size:13px;line-height:15px;font-weight:400}
.t-mouse-type{font-size:10px;line-height:14px;font-weight:400}
.t-eyebrow{font-size:12px;line-height:18px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase}
.t-button{font-size:16px;line-height:24px;font-weight:400}
.t-button-s{font-size:14px;line-height:20px;font-weight:500}
.t-label{font-size:13px;line-height:18px;font-weight:600}
.t-micro{font-size:11px;line-height:14px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
.t-stat{font-size:var(--fs-stat);line-height:var(--lh-stat);font-weight:700}
/* Stallion Compare — component styles, matched to stallioncompare.com and the Figma library. Every value is a token. */
/* Responsive type scale: Desktop ≥1200 · Tablet 768–1199 · Mobile <768. Styles that don't change (body, caption, eyebrow, labels…) stay fixed. */
:root{--fs-display-xl:72px;--lh-display-xl:72px;--fs-display:52px;--lh-display:52px;--fs-title:32px;--lh-title:38px;--fs-card-title:24px;--lh-card-title:28px;--fs-numeral:22px;--lh-numeral:26px;--fs-heading-l:28px;--lh-heading-l:32px;--fs-heading-m:20px;--lh-heading-m:24px;--fs-stat:24px;--lh-stat:28px;}@media (max-width:1199px){:root{--fs-display-xl:64px;--lh-display-xl:64px;--fs-display:44px;--lh-display:48px;--fs-title:28px;--lh-title:34px;--fs-card-title:22px;--lh-card-title:26px;--fs-heading-l:26px;--lh-heading-l:30px;--fs-stat:22px;--lh-stat:26px;}}@media (max-width:767px){:root{--fs-display-xl:56px;--lh-display-xl:56px;--fs-display:36px;--lh-display:40px;--fs-title:26px;--lh-title:32px;--fs-card-title:20px;--lh-card-title:24px;--fs-numeral:20px;--lh-numeral:24px;--fs-heading-l:24px;--lh-heading-l:28px;--fs-heading-m:18px;--lh-heading-m:22px;--fs-stat:20px;--lh-stat:24px;}}
/* Responsive section layout. Desktop ≥1200 · Tablet 768–1199 · Mobile <768 */
:root{--section-py:96px;--section-py-compact:48px;--gutter:120px;--block-gap:32px;--content-max:1200px}
@media (max-width:1199px){:root{--section-py:72px;--section-py-compact:40px;--gutter:40px;--block-gap:28px}}
@media (max-width:767px){:root{--section-py:48px;--section-py-compact:32px;--gutter:20px;--block-gap:24px}}
.section{padding:var(--section-py) var(--gutter);overflow-x:clip}
.section.alt{background:var(--eggshell-60)}
.section.pt-compact{padding-top:var(--section-py-compact)}.section.pb-compact{padding-bottom:var(--section-py-compact)}
.section.pt-none{padding-top:0}.section.pb-none{padding-bottom:0}
.section.py-48{padding-top:var(--space-12);padding-bottom:var(--space-12)} /* fixed 48 at every size: Latest articles, How it works, Latest show results */
.section-inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--block-gap)}
body{margin:0;font-family:var(--font-sans);font-weight:400;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
.serif{font-family:var(--font-serif);font-weight:300}
.eyebrow{font-size:12px;line-height:18px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold-text);margin:0}
.on-navy .eyebrow,.card-feature .eyebrow{color:var(--gold)}
.muted{color:var(--ink-muted)}

/* Button — radius-xs corners. 4 styles × 3 sizes. Icon buttons stay square. */
.btn{min-height:48px;padding:0 var(--space-5);border-radius:var(--radius-xs);border:1px solid transparent;font-size:16px;line-height:24px;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);text-decoration:none;background:none}
.btn-primary{background:var(--navy);color:var(--on-dark)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-link{padding:0;min-height:48px;color:var(--navy)}
.btn-link .arrow{width:24px;height:24px;transition:transform .3s ease-in}
.btn-link:hover .arrow{transform:translateX(var(--space-2))}
.btn-sm{min-height:36px;padding:0 var(--space-3);font-size:14px;font-weight:500}
.btn-lg{min-height:56px;padding:0 var(--space-6)}
.btn-xs{min-height:28px;padding:var(--space-1) var(--space-2);font-size:13px;line-height:18px;font-weight:600;gap:var(--space-1)} /* matches .tag height and padding; inline with chips only */
.btn-link.btn-xs .arrow{width:16px;height:16px}
.btn-block{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.iconbtn{width:48px;height:48px;border-radius:var(--radius-none);border:1px solid var(--line);background:var(--surface);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.iconbtn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.iconbtn-navy{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.iconbtn-ghost{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}

/* Badge (status / category) and Tag (attribute) */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);white-space:nowrap}
.badge-live{background:var(--live-tint);color:var(--live-text)}
.badge-open{background:var(--success-tint);color:var(--success)}
.badge-neutral{background:var(--eggshell);color:var(--ink)}
.badge-series{background:var(--highlight);color:var(--warn-text)}
.badge-grasping-genetics{background:var(--cat-grasping-genetics);color:var(--on-dark)}
.badge-press-release{background:var(--cat-press-release);color:var(--on-dark)}
.badge-stallion-spotlight{background:var(--cat-stallion-spotlight);color:var(--on-dark)}
.badge-show-statistics{background:var(--cat-show-statistics);color:var(--on-dark)}
.badge-breeder-spotlight{background:var(--cat-breeder-spotlight);color:var(--on-dark)}
.badge-lost-legends{background:var(--cat-lost-legends);color:var(--on-dark)}
.badge-feature-release{background:var(--cat-feature-release);color:var(--on-dark)}
.badge-mare-of-the-month{background:var(--cat-mare-of-the-month);color:var(--on-dark)}
.badge-trainer-spotlight{background:var(--cat-trainer-spotlight);color:var(--on-dark)}
.badge-tips-with-taft{background:var(--cat-tips-with-taft);color:var(--on-dark)}
.badge-sales-results{background:var(--cat-sales-results);color:var(--on-dark)}
.badge-heritage-horse{background:var(--cat-heritage-horse);color:var(--on-dark)}
/* Topic shaded background: e.g. a topic page header band or selected filter */
.tint-grasping-genetics{background:var(--cat-grasping-genetics-tint);color:var(--cat-grasping-genetics)}
.tint-press-release{background:var(--cat-press-release-tint);color:var(--cat-press-release)}
.tint-stallion-spotlight{background:var(--cat-stallion-spotlight-tint);color:var(--cat-stallion-spotlight)}
.tint-show-statistics{background:var(--cat-show-statistics-tint);color:var(--cat-show-statistics)}
.tint-breeder-spotlight{background:var(--cat-breeder-spotlight-tint);color:var(--cat-breeder-spotlight)}
.tint-lost-legends{background:var(--cat-lost-legends-tint);color:var(--cat-lost-legends)}
.tint-feature-release{background:var(--cat-feature-release-tint);color:var(--cat-feature-release)}
.tint-mare-of-the-month{background:var(--cat-mare-of-the-month-tint);color:var(--cat-mare-of-the-month)}
.tint-trainer-spotlight{background:var(--cat-trainer-spotlight-tint);color:var(--cat-trainer-spotlight)}
.tint-tips-with-taft{background:var(--cat-tips-with-taft-tint);color:var(--cat-tips-with-taft)}
.tint-sales-results{background:var(--cat-sales-results-tint);color:var(--cat-sales-results)}
.tint-heritage-horse{background:var(--cat-heritage-horse-tint);color:var(--cat-heritage-horse)}
.dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--live);display:inline-block}
.tag{display:inline-flex;font-size:13px;line-height:18px;font-weight:600;color:var(--ink);background:var(--eggshell);border-radius:var(--radius-xs);padding:var(--space-1) var(--space-2)}
.tag-outline{background:transparent;border:1px solid var(--stone-line)}

/* Filter chip and segmented control — radius-xs */
.chip{min-height:36px;padding:0 var(--space-4);border-radius:var(--radius-xs);border:1px solid var(--stone-line);background:var(--surface);font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-1);background:var(--eggshell);border-radius:var(--radius-xs);padding:var(--space-1)}
.seg button{min-height:36px;border:none;border-radius:var(--radius-xs);background:transparent;font-size:13px;line-height:18px;font-weight:600;cursor:pointer;color:var(--ink-muted)}
.seg button[aria-pressed="true"]{background:var(--surface);box-shadow:var(--shadow-sm);font-weight:700;color:var(--navy)}

/* Fields (site .form-control) */
.field{display:flex;flex-direction:column;gap:var(--space-1);font-size:13px;font-weight:600;color:var(--navy)}
.input{border:1px solid var(--stone-line);border-radius:var(--radius-xs);padding:var(--space-3);min-height:48px;font-size:16px;line-height:24px;font-weight:400;background:var(--surface);width:100%;box-sizing:border-box;color:var(--ink)}
.input::placeholder{color:var(--ink-muted)}
.input:focus{outline:0;border-color:var(--ink-muted);box-shadow:0 0 0 4px rgba(180,170,160,.35)}
.input[aria-invalid="true"]{border-color:var(--wine)}
.field .error{color:var(--wine);font-weight:400}
textarea.input{resize:vertical;min-height:96px}
.search{display:flex;align-items:stretch;border:1px solid var(--stone-line);border-radius:var(--radius-sm);overflow:hidden;min-height:48px;background:var(--surface)}
.search input{flex:1;border:none;outline:none;font-size:16px;font-weight:400;background:transparent;min-width:0;padding:0 var(--space-4);color:var(--ink)}
.search input::placeholder{color:var(--ink-muted)}
.search button{width:56px;border:none;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer}

/* Notes (radius-xs) and toast (square) */
.note{border-radius:var(--radius-xs);padding:var(--space-3) var(--space-4);font-size:14px;line-height:21px;font-weight:400}
.note-info{background:var(--eggshell);color:var(--ink)}
.note-ok{background:var(--success-tint);color:var(--success)}
.note-warn{background:var(--warn-tint);color:var(--warn-text)}
.note-error{background:var(--live-tint);color:var(--live-text)}
.note-upsell{background:var(--wine);color:var(--on-dark);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4)}
.note-upsell .message{min-width:240px;flex:1 1 240px}
.note-upsell a{color:var(--on-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.note-upsell a:hover{text-decoration-thickness:2px}
.note-upsell a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.toast{background:var(--navy);color:var(--on-dark);padding:var(--space-3) var(--space-4);border-radius:var(--radius-none);font-size:13px;font-weight:600;box-shadow:var(--shadow-md);display:inline-flex;gap:var(--space-2);align-items:center}
.toast svg{color:var(--gold)}

/* Cards */
.card{border:1px solid var(--line);border-radius:var(--radius-none);background:var(--surface);padding:var(--space-4)}
.card-feature{border-radius:var(--radius-none);padding:var(--space-6);color:var(--on-dark);background:var(--navy);display:flex;flex-direction:column;gap:var(--space-3)}
.card-feature .title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title)}
.card-feature p{color:var(--on-dark-muted);margin:0}
.stallion-card{display:flex;flex-direction:column;gap:var(--space-4);color:var(--navy);text-decoration:none}
.stallion-card.sm{gap:var(--space-2)}
.stallion-card .photo{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-xs);background:var(--eggshell)}
.stallion-card .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.stallion-card .details{display:flex;flex-direction:column;gap:var(--space-3)}
.stallion-card.sm .details{gap:var(--space-1)}
.stallion-card .meta{display:flex;flex-direction:column;gap:0}
.stallion-card .name{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title)}
.stallion-card.sm .name{font-weight:400;font-size:var(--fs-card-title);line-height:var(--lh-card-title)}
.stallion-card .info{font-size:13px;line-height:15px;color:var(--ink)}
.stallion-card .pedigree{font-size:13px;line-height:15px;color:var(--ink-muted)}
.article-card{display:flex;flex-direction:column;gap:var(--space-3);text-decoration:none;color:var(--ink)}
.article-card img{width:100%;height:214px;object-fit:cover;border-radius:var(--radius-xs)}
.article-card h3{margin:0;font-family:var(--font-serif);font-size:var(--fs-card-title);line-height:var(--lh-card-title);font-weight:400;color:var(--navy)}
.article-card p{margin:0;font-size:14px;line-height:21px}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.kpi>div{background:var(--eggshell);border-radius:var(--radius-xs);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}
.kpi b{font-size:var(--fs-heading-m);line-height:var(--lh-heading-m);font-weight:700;color:var(--navy)}
.kpi span{font-size:13px;line-height:15px;color:var(--ink)}

/* Rows */
.item{display:flex;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--line);align-items:center;color:var(--ink);text-decoration:none}
.item:last-child{border-bottom:none}
.item-photo{width:64px;height:64px;flex-shrink:0;aspect-ratio:1/1;border-radius:var(--radius-xs);background:var(--eggshell);object-fit:cover;object-position:50% 50%}
.item-name{font-size:var(--fs-heading-m);line-height:var(--lh-heading-m);font-weight:700;color:var(--navy)}
.item-info{font-size:13px;line-height:15px;font-weight:400}
.datetile{width:56px;height:60px;flex-shrink:0;border-radius:var(--radius-xs);background:var(--eggshell);display:flex;flex-direction:column;align-items:center;justify-content:center}
.datetile .m{font-size:12px;line-height:18px;font-weight:600;letter-spacing:3.5px;color:var(--gold-text);text-transform:uppercase}
.datetile .d{font-family:var(--font-serif);font-size:var(--fs-numeral);line-height:var(--lh-numeral);color:var(--navy)}
.place{font-family:var(--font-serif);font-size:var(--fs-numeral);line-height:var(--lh-numeral);color:var(--gold-text);width:28px;text-align:center}

/* Progress, avatar */
.bar{height:6px;border-radius:var(--radius-pill);background:var(--eggshell);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--gold)}
.avatar{width:40px;height:40px;border-radius:var(--radius-pill);background:var(--navy);color:var(--on-dark);font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;object-fit:cover}
.avatar-lg{width:64px;height:64px;font-size:20px;font-weight:700;background:var(--navy);color:var(--on-dark)}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;background:var(--eggshell)}

/* Header, tab bar, dots */
.app-header{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 0 0 var(--space-5);background:var(--surface);border-bottom:1px solid var(--line)}
.app-header .logo{height:36px;width:auto}
.app-header .actions{display:flex;gap:0;align-self:stretch;align-items:center}
.app-header.over-photo{background:transparent;border-bottom:none;position:absolute;inset:0 0 auto 0}
.tabs{background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:0 0 var(--space-3)}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);min-height:60px;font-size:11px;font-weight:600;color:var(--ink-muted);text-decoration:none;border-top:2px solid transparent}
.tabs a[aria-current="page"]{color:var(--navy);font-weight:700;border-top-color:var(--gold)}
.dots{display:flex;gap:var(--space-3);align-items:center}
.dots i{width:6px;height:6px;border-radius:var(--radius-pill);border:1px solid var(--on-dark)}
.dots i.on{width:10px;height:10px;background:var(--on-dark)}

/* Sheet */
.sheet{background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-4) var(--space-5) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.sheet .grab{width:40px;height:4px;border-radius:var(--radius-pill);background:var(--stone-line);align-self:center}
.scrim{background:rgba(21,25,52,.5)}

/* Topic chip — article topic filter with post count (from stallioncompare.com) */
.topic-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--radius-xs);border:none;font:inherit;font-size:14px;line-height:20px;font-weight:600;text-decoration:none;cursor:pointer;background:var(--topic);color:var(--on-dark)}
.topic-chip .count{min-width:24px;height:22px;padding:0 var(--space-2);border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:16px;font-weight:700;background:var(--surface);color:var(--navy)}
.topic-chip.tint{background:var(--topic-tint);color:var(--topic)}
.topic-chip.tint .count{background:var(--topic);color:var(--on-dark)}
.topic-chip.all{--topic:var(--navy);--topic-tint:var(--surface);padding:var(--space-2) var(--space-4);min-height:38px;box-sizing:border-box}
.topic-chip.all.tint{color:var(--navy);box-shadow:inset 0 0 0 1px var(--line-strong)}
.topic-grasping-genetics{--topic:var(--cat-grasping-genetics);--topic-tint:var(--cat-grasping-genetics-tint)}
.topic-press-release{--topic:var(--cat-press-release);--topic-tint:var(--cat-press-release-tint)}
.topic-stallion-spotlight{--topic:var(--cat-stallion-spotlight);--topic-tint:var(--cat-stallion-spotlight-tint)}
.topic-show-statistics{--topic:var(--cat-show-statistics);--topic-tint:var(--cat-show-statistics-tint)}
.topic-breeder-spotlight{--topic:var(--cat-breeder-spotlight);--topic-tint:var(--cat-breeder-spotlight-tint)}
.topic-lost-legends{--topic:var(--cat-lost-legends);--topic-tint:var(--cat-lost-legends-tint)}
.topic-feature-release{--topic:var(--cat-feature-release);--topic-tint:var(--cat-feature-release-tint)}
.topic-mare-of-the-month{--topic:var(--cat-mare-of-the-month);--topic-tint:var(--cat-mare-of-the-month-tint)}
.topic-trainer-spotlight{--topic:var(--cat-trainer-spotlight);--topic-tint:var(--cat-trainer-spotlight-tint)}
.topic-tips-with-taft{--topic:var(--cat-tips-with-taft);--topic-tint:var(--cat-tips-with-taft-tint)}
.topic-sales-results{--topic:var(--cat-sales-results);--topic-tint:var(--cat-sales-results-tint)}
.topic-heritage-horse{--topic:var(--cat-heritage-horse);--topic-tint:var(--cat-heritage-horse-tint)}

/* Placeholder image — the one treatment for every image slot without an image yet (stallion photos, article images, heroes). Eggshell with the SC mark in stone at 25%, centred. */
.placeholder{position:relative;background:var(--eggshell);overflow:hidden;border-radius:var(--radius-xs)}
.placeholder::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:31%;min-width:24px;max-width:160px;aspect-ratio:94/61;background:var(--stone);opacity:.25;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22103%20119%2094%2061%22%3E%3Cpath%20d%3D%22M126.91%20180C123.125%20180%20119.607%20179.313%20116.355%20177.938C113.156%20176.563%20110.384%20174.659%20108.038%20172.226C105.746%20169.741%20104.066%20166.859%20103%20163.58L112.036%20159.693C113.476%20163.078%20115.555%20165.748%20118.274%20167.705C120.993%20169.609%20124.058%20170.56%20127.47%20170.56C129.389%20170.56%20131.042%20170.27%20132.428%20169.688C133.867%20169.053%20134.96%20168.207%20135.707%20167.15C136.506%20166.092%20136.906%20164.823%20136.906%20163.342C136.906%20161.597%20136.373%20160.169%20135.307%20159.059C134.294%20157.895%20132.748%20156.996%20130.669%20156.362L119.233%20152.713C114.595%20151.285%20111.103%20149.143%20108.758%20146.287C106.412%20143.432%20105.239%20140.074%20105.239%20136.213C105.239%20132.829%20106.065%20129.841%20107.718%20127.25C109.424%20124.658%20111.77%20122.649%20114.755%20121.221C117.794%20119.74%20121.259%20119%20125.151%20119C128.723%20119%20132.002%20119.635%20134.987%20120.904C137.972%20122.12%20140.531%20123.839%20142.664%20126.06C144.85%20128.228%20146.476%20130.793%20147.542%20133.754L138.586%20137.72C137.413%20134.759%20135.653%20132.485%20133.308%20130.899C130.962%20129.259%20128.243%20128.44%20125.151%20128.44C123.338%20128.44%20121.739%20128.757%20120.353%20129.391C118.967%20129.973%20117.874%20130.819%20117.074%20131.93C116.328%20132.987%20115.955%20134.257%20115.955%20135.737C115.955%20137.377%20116.488%20138.831%20117.554%20140.1C118.62%20141.316%20120.246%20142.268%20122.432%20142.956L133.388%20146.367C138.132%20147.9%20141.678%20150.016%20144.023%20152.713C146.422%20155.41%20147.622%20158.741%20147.622%20162.707C147.622%20166.092%20146.742%20169.08%20144.983%20171.671C143.224%20174.262%20140.798%20176.298%20137.706%20177.779C134.614%20179.26%20131.015%20180%20126.91%20180Z%22%20fill%3D%22%23B4AAA0%22%2F%3E%3Cpath%20d%3D%22M171.89%20180C167.625%20180%20163.68%20179.233%20160.055%20177.7C156.483%20176.166%20153.338%20174.024%20150.619%20171.274C147.953%20168.524%20145.874%20165.299%20144.381%20161.597C142.889%20157.895%20142.142%20153.85%20142.142%20149.46C142.142%20145.071%20142.862%20141.026%20144.301%20137.324C145.794%20133.569%20147.873%20130.343%20150.539%20127.646C153.258%20124.896%20156.43%20122.781%20160.055%20121.3C163.68%20119.767%20167.625%20119%20171.89%20119C176.155%20119%20179.967%20119.714%20183.326%20121.142C186.737%20122.57%20189.616%20124.473%20191.962%20126.853C194.308%20129.18%20195.987%20131.745%20197%20134.547L187.244%20139.069C186.124%20136.108%20184.232%20133.675%20181.566%20131.771C178.901%20129.814%20175.675%20128.836%20171.89%20128.836C168.158%20128.836%20164.853%20129.709%20161.974%20131.454C159.149%20133.199%20156.936%20135.605%20155.337%20138.672C153.791%20141.739%20153.018%20145.335%20153.018%20149.46C153.018%20153.585%20153.791%20157.208%20155.337%20160.328C156.936%20163.395%20159.149%20165.801%20161.974%20167.546C164.853%20169.291%20168.158%20170.164%20171.89%20170.164C175.675%20170.164%20178.901%20169.212%20181.566%20167.308C184.232%20165.352%20186.124%20162.893%20187.244%20159.931L197%20164.453C195.987%20167.255%20194.308%20169.847%20191.962%20172.226C189.616%20174.553%20186.737%20176.43%20183.326%20177.858C179.967%20179.286%20176.155%20180%20171.89%20180Z%22%20fill%3D%22%23B4AAA0%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22103%20119%2094%2061%22%3E%3Cpath%20d%3D%22M126.91%20180C123.125%20180%20119.607%20179.313%20116.355%20177.938C113.156%20176.563%20110.384%20174.659%20108.038%20172.226C105.746%20169.741%20104.066%20166.859%20103%20163.58L112.036%20159.693C113.476%20163.078%20115.555%20165.748%20118.274%20167.705C120.993%20169.609%20124.058%20170.56%20127.47%20170.56C129.389%20170.56%20131.042%20170.27%20132.428%20169.688C133.867%20169.053%20134.96%20168.207%20135.707%20167.15C136.506%20166.092%20136.906%20164.823%20136.906%20163.342C136.906%20161.597%20136.373%20160.169%20135.307%20159.059C134.294%20157.895%20132.748%20156.996%20130.669%20156.362L119.233%20152.713C114.595%20151.285%20111.103%20149.143%20108.758%20146.287C106.412%20143.432%20105.239%20140.074%20105.239%20136.213C105.239%20132.829%20106.065%20129.841%20107.718%20127.25C109.424%20124.658%20111.77%20122.649%20114.755%20121.221C117.794%20119.74%20121.259%20119%20125.151%20119C128.723%20119%20132.002%20119.635%20134.987%20120.904C137.972%20122.12%20140.531%20123.839%20142.664%20126.06C144.85%20128.228%20146.476%20130.793%20147.542%20133.754L138.586%20137.72C137.413%20134.759%20135.653%20132.485%20133.308%20130.899C130.962%20129.259%20128.243%20128.44%20125.151%20128.44C123.338%20128.44%20121.739%20128.757%20120.353%20129.391C118.967%20129.973%20117.874%20130.819%20117.074%20131.93C116.328%20132.987%20115.955%20134.257%20115.955%20135.737C115.955%20137.377%20116.488%20138.831%20117.554%20140.1C118.62%20141.316%20120.246%20142.268%20122.432%20142.956L133.388%20146.367C138.132%20147.9%20141.678%20150.016%20144.023%20152.713C146.422%20155.41%20147.622%20158.741%20147.622%20162.707C147.622%20166.092%20146.742%20169.08%20144.983%20171.671C143.224%20174.262%20140.798%20176.298%20137.706%20177.779C134.614%20179.26%20131.015%20180%20126.91%20180Z%22%20fill%3D%22%23B4AAA0%22%2F%3E%3Cpath%20d%3D%22M171.89%20180C167.625%20180%20163.68%20179.233%20160.055%20177.7C156.483%20176.166%20153.338%20174.024%20150.619%20171.274C147.953%20168.524%20145.874%20165.299%20144.381%20161.597C142.889%20157.895%20142.142%20153.85%20142.142%20149.46C142.142%20145.071%20142.862%20141.026%20144.301%20137.324C145.794%20133.569%20147.873%20130.343%20150.539%20127.646C153.258%20124.896%20156.43%20122.781%20160.055%20121.3C163.68%20119.767%20167.625%20119%20171.89%20119C176.155%20119%20179.967%20119.714%20183.326%20121.142C186.737%20122.57%20189.616%20124.473%20191.962%20126.853C194.308%20129.18%20195.987%20131.745%20197%20134.547L187.244%20139.069C186.124%20136.108%20184.232%20133.675%20181.566%20131.771C178.901%20129.814%20175.675%20128.836%20171.89%20128.836C168.158%20128.836%20164.853%20129.709%20161.974%20131.454C159.149%20133.199%20156.936%20135.605%20155.337%20138.672C153.791%20141.739%20153.018%20145.335%20153.018%20149.46C153.018%20153.585%20153.791%20157.208%20155.337%20160.328C156.936%20163.395%20159.149%20165.801%20161.974%20167.546C164.853%20169.291%20168.158%20170.164%20171.89%20170.164C175.675%20170.164%20178.901%20169.212%20181.566%20167.308C184.232%20165.352%20186.124%20162.893%20187.244%20159.931L197%20164.453C195.987%20167.255%20194.308%20169.847%20191.962%20172.226C189.616%20174.553%20186.737%20176.43%20183.326%20177.858C179.967%20179.286%20176.155%20180%20171.89%20180Z%22%20fill%3D%22%23B4AAA0%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.placeholder.flush{border-radius:0}
/* Dark placeholder — heroes and any slot with text or controls over it (keeps white/gold text and header icons at AA). */
.placeholder.dark{background:var(--navy)}
.placeholder.dark::before{background:var(--on-dark);opacity:.1}
/* CTA card */
.cta-card{background:var(--eggshell);border-radius:var(--radius-xs);padding:var(--space-12);display:flex;flex-direction:column;gap:var(--space-4)}
.cta-card .title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title);color:var(--navy);margin:0}
@media (max-width:767px){.cta-card{padding:var(--space-8) var(--space-6)}}

/* Programs & futurities panel */
.programs-panel{background:var(--navy);color:var(--on-dark);border-radius:var(--radius-xs);padding:var(--space-12);display:grid;grid-template-columns:1fr auto;gap:var(--space-16);align-items:center}
.programs-panel .title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title);margin:0}
.programs-panel p{color:var(--on-dark-muted);margin:0}
.programs-panel .intro{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.logo-grid{display:grid;grid-template-columns:repeat(4,126px);gap:var(--space-2)}
.logo-tile{aspect-ratio:1/1;background:var(--surface);border-radius:var(--radius-xs);padding:var(--space-4);overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.logo-tile img{width:100%;height:100%;object-fit:contain;object-position:center;filter:grayscale(1)} /* the logo always fits the inner square: never wider or taller than it */
@media (max-width:767px){.programs-panel{grid-template-columns:1fr;padding:var(--space-8) var(--space-6);gap:var(--space-8)}.logo-grid{grid-template-columns:repeat(3,1fr)}}

/* Link list — divided navigation rows */
.link-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.link-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--line);color:var(--navy);text-decoration:none;font-size:16px;line-height:24px}
.link-list a .arrow{width:24px;height:24px;flex-shrink:0;transition:transform .3s ease-in}
.link-list a:hover .arrow{transform:translateX(var(--space-1))}

/* Search group — Bootstrap-style input group: type select + field + gold search button */
.search-group{display:flex;align-items:stretch;min-height:56px;background:var(--surface);border:1px solid var(--stone-line);border-radius:var(--radius-sm);overflow:hidden}
.search-group select{appearance:none;border:none;border-right:1px solid var(--stone-line);background:var(--eggshell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151934' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right var(--space-4) center/24px;padding:0 calc(var(--space-4) + 32px) 0 var(--space-4);font-size:16px;line-height:24px;color:var(--navy);cursor:pointer}
.search-group input{flex:1;min-width:0;border:none;outline:none;padding:0 var(--space-4);font-size:16px;line-height:24px;color:var(--ink);background:transparent}
.search-group input::placeholder{color:var(--ink-muted)}
.search-group button{width:56px;flex-shrink:0;border:none;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer}
.search-group:focus-within{border-color:var(--ink-muted);box-shadow:0 0 0 4px rgba(180,170,160,.35)}
@media (max-width:767px){.search-group{flex-wrap:wrap}.search-group select{flex:1 0 100%;min-height:48px;border-right:none;border-bottom:1px solid var(--stone-line)}.search-group input{min-height:56px}}
/* Site search block */
.site-search{background:var(--navy);color:var(--on-dark);border-radius:var(--radius-xs);padding:var(--space-16) var(--space-12);display:flex;flex-direction:column;align-items:center;gap:var(--space-6);text-align:center}
.site-search .title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title);margin:0}
.site-search p{color:var(--on-dark-muted);margin:0}
.site-search .search-group{width:100%;max-width:800px}
@media (max-width:767px){.site-search{padding:var(--space-8) var(--space-6);align-items:stretch;text-align:left}}

/* Card slider — horizontal track. .bleed lets it run past the content column to the right screen edge (starts aligned to the column, no dead gap on the right). */
.slider{display:flex;gap:var(--space-6);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.slider>*{flex:0 0 auto;scroll-snap-align:start}
.slider.bleed{margin-right:calc(50% - 50vw);padding-right:var(--gutter);scroll-padding-left:0}
@media (max-width:767px){.slider{gap:var(--space-4)}}
@media (prefers-reduced-motion:reduce){.slider{scroll-behavior:auto}}

/* Memorial (obituary) card — text on a square photo over the navy gradient */
.memorial-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:var(--space-1);aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-xs);background:var(--navy);padding:0 var(--space-6) var(--space-8);text-align:center;color:var(--on-dark);text-decoration:none;box-sizing:border-box}
.memorial-card>img,.memorial-card>.placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.memorial-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,25,52,0) 35%,#151934 100%)}
.memorial-card .years,.memorial-card .name{position:relative;z-index:1}
.memorial-card .years{font-size:13px;line-height:15px;opacity:.85}
.memorial-card .name{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title)}

/* Stallion grid (home, below Site search) */
.stallion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8) var(--space-6)}
@media (max-width:1199px){.stallion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.stallion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-4)}}
.stallion-card.sm .meta{gap:0}

/* Large stallion cards: empty photo uses the dark placeholder */
.stallion-card:not(.sm) .photo.placeholder{background:var(--navy)}
.stallion-card:not(.sm) .photo.placeholder::before{background:var(--on-dark);opacity:.1}

/* Sale horse card (marketplace) */
.sale-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);overflow:hidden;color:var(--navy);text-decoration:none}
.sale-card .photo{position:relative;aspect-ratio:4/3;background:var(--eggshell)}
.sale-card .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sale-card .photo .tag{position:absolute;top:var(--space-3);left:var(--space-3);background:var(--surface)}
.sale-card .photo .badge{position:absolute;top:var(--space-3);right:var(--space-3)}
.sale-card .body{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4)}
.sale-card .price{font-size:var(--fs-stat);line-height:var(--lh-stat);font-weight:700}
.sale-card .title{font-size:16px;line-height:20px;font-weight:700}
.sale-card .pedigree,.sale-card .location{font-size:14px;line-height:21px;color:var(--ink-muted)}
.sale-card .location{display:flex;align-items:center;gap:var(--space-1);padding-top:var(--space-1)}
.sale-card .location svg{width:16px;height:16px}
/* Feature tile (How it works page) */
.feature-tile{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs)}
.feature-tile .icon{width:48px;height:48px;border-radius:var(--radius-xs);background:var(--eggshell);display:flex;align-items:center;justify-content:center;color:var(--navy);margin-bottom:var(--space-1)}
.feature-tile h3{margin:0;font-size:var(--fs-heading-m);line-height:var(--lh-heading-m);font-weight:700;color:var(--navy)}
.feature-tile p{margin:0;font-size:14px;line-height:21px;color:var(--ink)}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
@media (max-width:1199px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.feature-grid{grid-template-columns:1fr}}

/* ===== Site pages (directories, detail pages, forms). All corners radius-xs. ===== */
/* Page header: breadcrumbs → optional eyebrow → H1 (display) → intro (body, ink-muted, max 720) */
.page-header{display:flex;flex-direction:column;gap:var(--space-3)}
.page-header h1{font-family:var(--font-serif);font-weight:300;font-size:var(--fs-display);line-height:var(--lh-display);color:var(--navy);margin:0}
.page-header .intro{color:var(--ink-muted);max-width:720px;margin:0}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);font-size:13px;line-height:15px;color:var(--ink-muted)}
.crumbs a{color:inherit;text-decoration:none}.crumbs [aria-current]{color:var(--ink)}
/* Filter panel: eggshell-60 box. Desktop: fields in a row grid (3–4 cols); sidebar variant 288px. Mobile: stacked, full-width button. */
.filter-panel{background:var(--eggshell);border-radius:var(--radius-xs);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.filter-panel .row{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:var(--space-4)}
.filter-panel.sidebar{width:288px;flex-shrink:0;align-self:flex-start;position:sticky;top:var(--space-6)}
@media (max-width:767px){.filter-panel{padding:var(--space-5)}.filter-panel .row{grid-template-columns:1fr}.filter-panel .btn{width:100%}}
.results-bar{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink-muted)}
/* Data table: white, 1px line border, radius-xs, header row eggshell-60. Cells 16px (header 12/16). Numeric cells right-aligned. */
.data-table{width:100%;border:1px solid var(--line);border-radius:var(--radius-xs);border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--surface)}
.data-table th{background:var(--eggshell-60);font-size:13px;line-height:18px;font-weight:600;color:var(--ink-muted);text-align:left;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line)}
.data-table td{font-size:14px;line-height:21px;color:var(--ink);padding:var(--space-4);border-bottom:1px solid var(--line);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table td.strong,.data-table td.media{font-weight:600;color:var(--navy)}
.data-table td.media{display:flex;align-items:center;gap:var(--space-3)}
.data-table td.media img,.data-table td.media .placeholder{width:40px;height:40px;border-radius:var(--radius-xs);object-fit:cover;flex-shrink:0}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
/* Mobile: tables collapse to a stacked list (photo 48 · title heading-s · meta body-s ink-muted · value right) */
.stack-list{border-top:1px solid var(--line)}
.stack-list .row{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.stack-list .rank{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-numeral);line-height:var(--lh-numeral);color:var(--gold-text)}
.stack-list .title{font-weight:600;color:var(--navy)}.stack-list .meta{font-size:14px;color:var(--ink-muted)}
/* Pagination: 40×40 boxes, radius-xs; current = navy fill. Mobile: prev · "Page X of Y" · next */
.pagination{display:flex;justify-content:center;gap:var(--space-2);align-items:center}
.pagination a,.pagination span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--radius-xs);font-size:14px;font-weight:500;color:var(--navy);text-decoration:none;background:var(--surface)}
.pagination [aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.pagination .gap{border:none;background:none;color:var(--ink-muted)}
.pagination .status{display:none}
@media (max-width:767px){.pagination{justify-content:space-between}.pagination .num,.pagination .gap{display:none}.pagination .status{display:inline;border:none;font-weight:400;color:var(--ink)}}
/* Checkbox */
.checkbox{display:flex;gap:var(--space-3);align-items:flex-start;font-size:14px;line-height:21px;color:var(--ink);cursor:pointer}
.checkbox input{appearance:none;width:20px;height:20px;flex-shrink:0;margin:0;border:1px solid var(--line-strong);border-radius:var(--radius-xs);background:var(--surface);display:grid;place-content:center}
.checkbox input:checked{background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--navy)}
/* File upload: dashed line-strong box on eggshell-60, Outline small button + caption hint */
.file-upload{border:1px dashed var(--line-strong);border-radius:var(--radius-xs);background:var(--eggshell-60);padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);font-size:13px;color:var(--ink-muted)}
/* Form layouts */
.form-section{border-top:1px solid var(--line);padding-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.form-grid{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:var(--space-4)}
@media (max-width:767px){.form-grid{grid-template-columns:1fr}}
.auth-card{width:100%;max-width:480px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5)}
@media (max-width:767px){.auth-card{padding:var(--space-6)}}
/* Compare tray (stallion directory): sticky navy bar, count + Gold small button */
.compare-tray{position:sticky;bottom:0;background:var(--navy);color:var(--on-dark);padding:var(--space-4) var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);font-size:14px}
@media (max-width:767px){.compare-tray{bottom:72px}} /* sits above the tab bar */
/* Site menu (open state of the gold menu square): navy panel, serif card-title links, secondary sans links + search */
@media (max-width:767px){.site-menu{grid-template-columns:1fr;gap:var(--space-8);min-height:calc(100vh - 64px)}}
/* Stat tiles row (Super Sires profile) and standings card */
.standings-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
@media (max-width:767px){.standings-grid{grid-template-columns:1fr}}
.standings-card .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}

/* Sale listing main photo: 4:3 like the sale card */
.sale-listing .photo{aspect-ratio:4/3;border-radius:var(--radius-xs);overflow:hidden}
/* ===== Newsletter (Mailchimp) ===== */
.newsletter-form{display:flex;flex-direction:column;gap:var(--space-2);max-width:560px;width:100%}
.newsletter-form .row{display:flex;gap:var(--space-2);align-items:flex-end}
.newsletter-form .row .field{flex:1}
.newsletter-form .consent{font-size:13px;line-height:15px;color:var(--ink-muted);margin:0}
.newsletter-form .hp{position:absolute;left:-9999px} /* honeypot */
@media (max-width:767px){.newsletter-form .row{flex-direction:column;align-items:stretch;gap:var(--space-3)}}
.on-navy .newsletter-form .field{color:var(--on-dark)}.on-navy .newsletter-form .consent{color:var(--on-dark-muted)}
.footer-newsletter{background:var(--navy);color:var(--on-dark);border-radius:var(--radius-xs);padding:var(--space-12);display:flex;gap:var(--space-12);align-items:center} /* Style = Footer (option A, navy inset) */
.footer-newsletter .text{flex:1;display:flex;flex-direction:column;gap:var(--space-3)}
.footer-newsletter .eyebrow{color:var(--gold)}
.footer-newsletter h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title);margin:0;color:var(--on-dark)}
.footer-newsletter p{color:var(--on-dark-muted);margin:0}
.footer-newsletter .newsletter-form{flex:1}.footer-newsletter .field{color:var(--on-dark)}.footer-newsletter .consent{color:var(--on-dark-muted)}
@media (max-width:767px){.footer-newsletter{flex-direction:column;align-items:stretch;gap:var(--space-5);padding:var(--space-8) var(--space-5)}}
.newsletter-band{background:var(--navy);color:var(--on-dark);border-radius:var(--radius-xs);padding:var(--space-12);display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center}
.newsletter-band h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title);margin:0;max-width:720px}
.newsletter-band p{color:var(--on-dark-muted);margin:0;max-width:720px}
@media (max-width:767px){.newsletter-band{padding:var(--space-8) var(--space-5)}}
.newsletter-card{background:var(--eggshell-60);border-radius:var(--radius-xs);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.newsletter-card h3{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-card-title);line-height:var(--lh-card-title);color:var(--navy);margin:0}
@media (max-width:767px){.newsletter-card{padding:var(--space-5)}}
/* Interest picker: checkboxes styled as Filter chips */
.interest-picker{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-6)}
.interest-picker fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.interest-picker legend{font-size:13px;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;width:100%}
.interest-picker .chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip-check input{position:absolute;opacity:0}
.chip-check span{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-xs);background:var(--surface);color:var(--navy);font-size:14px;cursor:pointer}
.chip-check input:checked+span{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.chip-check input:focus-visible+span{outline:2px solid var(--gold-text);outline-offset:2px}
@media (max-width:767px){.interest-picker{padding:var(--space-5)}}

/* ===== Interaction states: buttons (all tokens; 150ms ease-out; no movement except the Link arrow) ===== */
.btn,.iconbtn{transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out}
@media (hover:hover){
.btn-primary:not([disabled]):not([aria-disabled="true"]):hover{background:var(--navy-700)}
.btn-gold:not([disabled]):not([aria-disabled="true"]):hover{background:var(--tan)}
.btn-outline:not([disabled]):not([aria-disabled="true"]):hover{background:var(--navy);color:var(--on-dark)}
.btn-link:not([disabled]):not([aria-disabled="true"]):hover{color:var(--gold-text)}
.btn-link:hover .arrow{transform:translateX(var(--space-2))}
.iconbtn:not([disabled]):not([aria-disabled="true"]):hover{background:var(--navy-tint)}
.iconbtn-gold:not([disabled]):not([aria-disabled="true"]):hover{background:var(--tan);border-color:var(--tan)}
.iconbtn-navy:not([disabled]):not([aria-disabled="true"]):hover{background:var(--navy-700);border-color:var(--navy-700)}
.iconbtn-ghost:not([disabled]):not([aria-disabled="true"]):hover{background:var(--on-dark);color:var(--navy)}
}
/* Keyboard focus: 2px white gap + 2px gold-text ring, same on every button */
.btn:focus-visible,.iconbtn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--gold-text)}
.btn[disabled],.btn[aria-disabled="true"]{pointer-events:none}
@media (prefers-reduced-motion:reduce){.btn,.iconbtn{transition:none}}
/* ===== Cookie consent (fixed bottom sheet, never a modal) ===== */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line-strong);border-radius:var(--radius-xs) var(--radius-xs) 0 0;padding:var(--space-4) var(--gutter) var(--space-5)}
.consent-in{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3)}
.consent-cats{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
@media (min-width:992px){.consent-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.consent-cat{border:1px solid var(--line);border-radius:var(--radius-xs);padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.consent-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
@media (min-width:992px){.consent-actions{grid-template-columns:repeat(3,minmax(0,200px));justify-content:start}}
@media (max-width:991px){.consent{bottom:calc(71px + env(safe-area-inset-bottom))}}
@media (max-width:479px){.consent-actions .btn{padding:0 var(--space-2)}}

/* ===== Interaction states: clickable areas (cards, rows, chips, links, fields) ===== */
.stallion-card,.article-card,.sale-card,.memorial-card,.feature-tile,.logo-tile,.stack-list .row,.data-table tbody tr,.link-list a,.chip,.topic-chip,.pagination a,.input,.checkbox input{transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out,filter .15s ease-out}
.stallion-card .photo img,.article-card .image img,.sale-card .photo img,.memorial-card img{transition:transform .3s ease-out} /* photo frames already clip: overflow hidden + radius-xs */
@media (hover:hover){
.stallion-card:hover .photo img,.article-card:hover .image img,.sale-card:hover .photo img,.memorial-card:hover img{transform:scale(1.04)}
.stallion-card:hover .name,.article-card:hover .title,.sale-card:hover .title{color:var(--gold-text)}
.article-card:hover .btn-link{color:var(--gold-text)}.article-card:hover .btn-link .arrow{transform:translateX(var(--space-2))}
.sale-card:hover{border-color:var(--line-strong)}
.feature-tile:hover{border-color:var(--navy)}.feature-tile:hover .icon-tile{background:var(--navy-tint)}.feature-tile:hover .btn-link .arrow{transform:translateX(var(--space-2))}
.programs-panel .logo-tile:hover{box-shadow:inset 0 0 0 2px var(--gold)}.logo-tile:hover img{filter:none}
.stack-list .row:hover,.data-table tbody tr:hover,.list-row:hover{background:var(--eggshell-60)}
.list-row:hover .arrow{transform:translateX(var(--space-2))}
.link-list a:hover{color:var(--gold-text)}.link-list a:hover .arrow{transform:translateX(var(--space-2))}
.chip:not([aria-pressed="true"]):not(:has(input:checked)):hover,.chip-check input:not(:checked)+span:hover{border-color:var(--navy);background:var(--navy-tint)}
.chip[aria-pressed="true"]:hover,.chip-check input:checked+span:hover{background:var(--navy-700);border-color:var(--navy-700)}
.topic-chip.tint:hover{background:var(--topic);color:var(--on-dark)} /* --topic = that chip's category colour */
.accordion-header:hover,.accordion-header:hover svg{color:var(--gold-text)}
.input:hover:not(:focus),.search-group:hover,.search:hover{border-color:var(--ink-muted)}
.checkbox:hover input:not(:checked){border-color:var(--navy)}
.pagination a:not([aria-current]):hover{background:var(--navy-tint);border-color:var(--navy)}
.prose a:hover,.consent a:hover{color:var(--gold-text)}
.crumbs a:hover,.site-footer a:hover{color:var(--navy);text-decoration:underline}
}
/* Whole-card / whole-row links: one <a> wraps the card (or use a stretched ::after link); focus-visible gets the same ring as buttons */
.stallion-card:focus-visible,.article-card:focus-visible,.sale-card:focus-visible,.memorial-card:focus-visible,.list-row:focus-visible,.logo-tile:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--gold-text)}
@media (prefers-reduced-motion:reduce){.stallion-card .photo img,.article-card .image img,.sale-card .photo img,.memorial-card img{transition:none}}

/* Stallions at Stud: directory rows + featured (paid) placements */
.dir-row{display:flex;gap:var(--space-6);align-items:flex-start;padding:var(--space-6) var(--space-6) var(--space-6) var(--space-3);border-bottom:1px solid var(--line);background:var(--surface)}
.dir-row.is-featured{} /* white row + FEATURED badge; no tint; same padding as regular rows so columns line up (Nov 2) */
.dir-featured{display:flex;flex-direction:column;gap:var(--space-2)}
.dir-row:has(+ .promo),.dir-featured:has(+ .promo) .dir-row:last-child{border-bottom:none} /* no divider or extra gap above the promo */
.promo{margin:var(--space-6) 0}
@media (hover:hover){.dir-row:hover{background:var(--eggshell-60)}}
.promo{background:var(--navy);color:var(--on-dark);border-radius:var(--radius-xs);padding:var(--space-8);display:flex;gap:var(--space-6);align-items:center}
.promo .promo-content{flex:1;display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.promo .promo-title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);line-height:var(--lh-title);margin:0}
.promo .promo-desc{color:var(--on-dark-muted);font-size:14px;margin:0}
.promo .promo-img img{width:260px;aspect-ratio:13/9;object-fit:cover;border-radius:var(--radius-xs);display:block}
@media (max-width:767px){.promo{flex-direction:column;align-items:stretch;padding:var(--space-6) var(--space-5)}.promo .promo-img img{width:100%}}
/* Text selection: richer butter ground, navy text (13.5:1, AAA). One rule site-wide, including navy sections. */
::selection{background:var(--selection);color:var(--navy)}
img::selection{background:transparent}

/* Filter disclosure (Genetics): wine card, white text, white chevron square */
.filter-disclosure{width:100%;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--wine);color:var(--on-dark);border:0;border-radius:var(--radius-xs);text-align:left;cursor:pointer}
.filter-disclosure .title{font-weight:600;font-size:16px;line-height:20px}.filter-disclosure .helper{font-size:13px;line-height:15px}
.filter-disclosure .chev{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;background:var(--surface);color:var(--navy);border:1px solid var(--stone-line);border-radius:var(--radius-xs);flex-shrink:0}
.filter-disclosure[aria-expanded="true"] .chev i{transform:rotate(180deg)}
@media (hover:hover){.filter-disclosure:hover .chev{background:var(--navy-tint)}}
.filter-disclosure:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--gold-text)}

/* XSmall select: matches .tag / .btn-xs (28px) for chip toolbars */
.select-xs{min-height:28px;padding:var(--space-1) var(--space-6) var(--space-1) var(--space-2);font-size:13px;line-height:18px;font-weight:600;background-size:16px;background-position:right var(--space-2) center}

/* Stallions at Stud desktop toolbar (option B) */
.dir-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.dir-toolbar .left{display:flex;align-items:center;gap:var(--space-4);font-size:14px;color:var(--ink-muted)}
.pagination.compact a,.pagination.compact span{min-width:28px;height:28px;font-size:13px;font-weight:600}
.pagination.compact{gap:var(--space-1)}
.compare-strip{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--eggshell-60);border-radius:var(--radius-xs)}
.compare-strip .chips{flex:1;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.compare-strip[hidden]{display:none}

/* Genetics: one gene per row, compact select; set values highlighted */
.gene-list{display:flex;flex-direction:column;gap:var(--space-2)}
.gene-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:14px;color:var(--ink)}
.gene-row select{width:120px}
.gene-row select.is-set{border-color:var(--navy);color:var(--navy)}

.gene-panel{border:1px solid var(--line-strong);border-radius:var(--radius-xs);overflow:hidden;background:var(--surface)}
.gene-panel .filter-disclosure{border-radius:0}
.gene-panel .gene-list{padding:var(--space-4) var(--space-3);border-left:3px solid var(--wine)}
.gene-row{font-size:13px}.gene-row .gene-label{flex:0 0 80px}.gene-row select{flex:1;width:auto}

/* Stallion page hero photo: the Large file, 5:4 (Nov 1) */
.stallion-hero-photo{width:100%;max-width:560px;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius-xs);background:var(--navy);display:block}

/* Page header band: the standard eggshell mini-hero (Figma Content blocks → Page header). Nov 1 */
.page-header-band{background:var(--eggshell-60);padding:var(--section-py-compact) var(--gutter)}
.page-header-band .page-header{max-width:var(--content-max);margin:0 auto;gap:var(--space-16)}
.page-header-band .page-header .heading{display:flex;flex-direction:column;gap:var(--space-5)}
@media (max-width:767px){.page-header-band .page-header{gap:var(--space-12)}}

/* Section heading (✅ Ready Nov 1): eyebrow over display title, optional View all link */
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6)}
.section-heading .heading{display:flex;flex-direction:column;gap:var(--space-4)}
.section-heading h2{font-family:var(--font-serif);font-weight:300;font-size:var(--fs-display);line-height:var(--lh-display);color:var(--navy);margin:0}
@media (max-width:767px){.section-heading{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.section-heading .heading{gap:var(--space-2)}}

/* Detail row (key/value list, e.g. sale listing Details) */
.detail-list{border-top:1px solid var(--line)}
.detail-row{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.detail-row dt{font-size:var(--fs-body-s,14px);line-height:21px;color:var(--ink-muted);margin:0}
.detail-row dd{font-weight:700;font-size:16px;line-height:20px;color:var(--navy);margin:0;text-align:right}

/* Mouse type: 10/14 fine print only (legal lines, disclaimers, credits) */
:root{--fs-mouse-type:10px;--lh-mouse-type:14px}
.mouse-type{font-size:var(--fs-mouse-type);line-height:var(--lh-mouse-type);font-weight:400;color:var(--ink-muted)}

/* Quiet text link: small underlined link (e.g. 'Join if you're new', 'Report this listing'); hover → wine */
.text-link{font-size:13px;line-height:15px;color:var(--ink-muted);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){.text-link:hover{color:var(--wine)}}
.text-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:2px}

/* Avatar tones (Nov 1): tonal pairs, colour on its own tint. All ≥ 4.5:1. Default/fallback: navy. */
.avatar,.avatar-lg{background:var(--navy-tint);color:var(--navy)}
.avatar[data-tone="wine"],.avatar-lg[data-tone="wine"]{background:var(--wine-tint);color:var(--wine)}
.avatar[data-tone="gold"],.avatar-lg[data-tone="gold"]{background:var(--highlight);color:var(--gold-text)}
.avatar[data-tone="pine"],.avatar-lg[data-tone="pine"]{background:var(--cat-trainer-spotlight-tint);color:var(--cat-trainer-spotlight)}
.avatar[data-tone="plum"],.avatar-lg[data-tone="plum"]{background:var(--cat-stallion-spotlight-tint);color:var(--cat-stallion-spotlight)}
.avatar[data-tone="teal"],.avatar-lg[data-tone="teal"]{background:var(--cat-lost-legends-tint);color:var(--cat-lost-legends)}
.avatar[data-tone="steel"],.avatar-lg[data-tone="steel"]{background:var(--cat-show-statistics-tint);color:var(--cat-show-statistics)}
.avatar[data-tone="indigo"],.avatar-lg[data-tone="indigo"]{background:var(--cat-sales-results-tint);color:var(--cat-sales-results)}
.avatar[data-tone="rust"],.avatar-lg[data-tone="rust"]{background:var(--cat-tips-with-taft-tint);color:var(--cat-tips-with-taft)}
.avatar[data-tone="olive"],.avatar-lg[data-tone="olive"]{background:var(--cat-heritage-horse-tint);color:var(--cat-heritage-horse)}

/* gaps.md fixes (Nov 2): link buttons keep the full button height (48 / 36 / 28) with no side padding */
.btn-link.btn-sm,.btn-link.btn-xs,.btn-link.btn-lg{padding:0}
/* Carousel controls (Figma Content blocks → Carousel controls) */
.carousel-controls{display:flex;align-items:center;gap:var(--space-2)}
.carousel-controls .counter{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;font-size:13px;line-height:18px;font-weight:600;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.carousel-controls.on-photo .counter{color:var(--on-dark)}
@media (max-width:767px){.carousel-controls .counter{display:none}}
/* Pagination on phones: "Page X of Y" is plain body-s text, not a 40px box */
@media (max-width:767px){.pagination .status{min-width:0;height:auto;padding:0;border:none;background:none;font-size:14px;line-height:21px;font-weight:400;color:var(--ink)}}
/* Sliders: draggable with the mouse on desktop */
.slider{cursor:grab}.slider.is-dragging{cursor:grabbing;user-select:none;scroll-snap-type:none}
@media (max-width:767px){.dir-row{padding:var(--space-6) var(--space-3)}}

/* Site search block (Figma 72:1177): heading lines 12px apart; the search group has no border on navy */
.site-search .heading{display:flex;flex-direction:column;gap:var(--space-3)}
.site-search .search-group{border:none}
/* Directory row internals (Figma Lists → Directory row) */
.dir-row .details{display:flex;flex-direction:column;gap:var(--space-3);flex:1;min-width:0}
.dir-row .name{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-card-title);line-height:var(--lh-card-title);color:var(--navy);margin:0}
.dir-row .info{font-size:16px;line-height:24px;color:var(--ink);margin:0}
.dir-row .pedigree,.dir-row .tests,.dir-row .standing{font-size:13px;line-height:15px;color:var(--ink-muted);margin:0}
.dir-row .tests b,.dir-row .tests strong{font-weight:400;color:inherit} /* test labels are plain (Figma) */
.dir-row.is-featured .details{gap:var(--space-4)}
.dir-row.is-featured .info{font-size:14px;line-height:21px}
@media (max-width:767px){.dir-row .info{font-size:14px;line-height:21px}}

/* Pedigree duplicate-ancestor dots (Nov 2): light fill + full-colour ring, 10px. Ring keeps ≥3:1 non-text contrast. */
.ped-dot{display:inline-block;width:10px;height:10px;border-radius:var(--radius-pill);border:1.5px solid;box-sizing:border-box;flex-shrink:0}
.ped-dot.a{background:var(--cat-show-statistics-mid);border-color:var(--cat-show-statistics)}
.ped-dot.b{background:var(--wine-mid);border-color:var(--wine)}
.ped-dot.c{background:var(--gold);border-color:var(--gold-text)}

/* Fact strip (option C, Nov 2): no boxes, pipes between items only */
.facts{display:flex;gap:var(--space-6)}
.facts>*{flex:1;min-width:0}
.facts>*+*{border-left:1px solid var(--line-strong);padding-left:var(--space-6)}
.fact{display:flex;flex-direction:column;gap:var(--space-2)}
.fact .label{font-size:11px;line-height:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted)}
@media (max-width:767px){.facts{flex-direction:column;gap:var(--space-4)}.facts>*+*{border-left:none;padding-left:0;border-top:1px solid var(--line-strong);padding-top:var(--space-4)}}
.text-row{padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-size:14px;line-height:21px;color:var(--ink)}
.similarity-chip{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);font-size:13px;line-height:15px;font-weight:400;background:var(--eggshell);color:var(--ink)}
.similarity-chip i{font-size:14px;color:var(--gold-text)}
.ped-dot.x{background:transparent;border-color:var(--ink-muted)}
.badge[data-tone=booked-full]{background:var(--wine-tint);color:var(--wine)}
.badge[data-tone=available]{background:var(--success-tint);color:var(--success)}
.booked-full-label{position:absolute;top:var(--space-3);right:var(--space-3);max-width:min(287px,60%);min-height:36px;display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);background:var(--wine);color:var(--on-dark);border-radius:var(--radius-xs);font-size:11px;line-height:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.stallion-card .booked-full-tag{position:absolute;top:var(--space-2);right:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--wine);color:var(--on-dark);border-radius:var(--radius-xs);font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.dir-row .booked-full{font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wine)}
.breeding-methods .row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.chip[aria-disabled="true"]{background:var(--eggshell-60);border-color:transparent;color:var(--ink-muted);cursor:not-allowed}
.chip[aria-disabled="true"]:hover{background:var(--eggshell-60);border-color:transparent}
a.booked-full-label{gap:var(--space-2);text-decoration:none;cursor:pointer}
a.booked-full-label:hover{filter:brightness(.9)}
a.booked-full-label:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
a.booked-full-label i{font-size:16px;line-height:16px}
.tooltip{position:absolute;right:0;top:calc(100% + 4px);max-width:280px;padding:var(--space-2) var(--space-3);background:var(--navy);color:var(--on-dark);border-radius:var(--radius-xs);font-size:13px;line-height:15px;font-weight:400;text-transform:none;letter-spacing:0;z-index:5;visibility:hidden;opacity:0;transition:opacity .15s ease-out}
.tooltip::before{content:"";position:absolute;right:13px;bottom:100%;border:7px solid transparent;border-top:0;border-bottom-color:var(--navy)}
@media (hover:hover){.has-tooltip:hover .tooltip,.has-tooltip:focus-within .tooltip{visibility:visible;opacity:1}}
#breeding{scroll-margin-top:96px}
.image-removal-link{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:8px;font-size:10px;line-height:14px;color:var(--ink-muted)}
.image-removal-link .caption{flex:1 1 240px;font-size:13px;line-height:15px}
.image-removal-link a{color:inherit;text-decoration:underline}
.image-removal-link a:hover{color:var(--navy)}
.modal-scrim{position:fixed;inset:0;background:rgb(21 25 52 / .6);display:flex;justify-content:center;align-items:flex-start;padding:64px 16px;z-index:50}
.modal{width:min(560px,100%);max-height:calc(100vh - 128px);display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-xs);box-shadow:0 12px 40px rgb(20 26 51 / .18)}
.modal header,.modal footer{padding:var(--space-6);flex:none}
.modal header{display:flex;gap:var(--space-4);align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:var(--space-4)}
.modal .body{padding:var(--space-6);overflow:auto;display:flex;flex-direction:column;gap:var(--space-6)}
.modal footer{display:flex;justify-content:flex-end;gap:var(--space-3);border-top:1px solid var(--line)}
@media (max-width:599px){.modal-scrim{align-items:flex-end;padding:0}.modal{width:100%;max-height:92vh;border-radius:var(--radius-xs) var(--radius-xs) 0 0}.modal header,.modal .body,.modal footer{padding-left:var(--space-4);padding-right:var(--space-4)}.modal footer{flex-direction:column-reverse}.modal footer .btn{width:100%}}
.radio{display:flex;gap:var(--space-3);align-items:flex-start;font-size:14px;line-height:21px;color:var(--ink)}
.radio input{appearance:none;width:20px;height:20px;margin:0;flex:none;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--surface)}
.radio input:checked{border:2px solid var(--navy);background:radial-gradient(circle,var(--navy) 0 5px,var(--surface) 5.5px)}
.radio input:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
.check-box{position:relative;display:inline-grid;flex:none}
.check-box i{position:absolute;inset:0;display:grid;place-items:center;color:var(--on-dark);font-size:14px;opacity:0;pointer-events:none}
.check-box input:checked{background-image:none}
.check-box input:checked+i{opacity:1}
.select-wrap{position:relative}
.select-wrap select{background-image:none;padding-right:44px}
.select-wrap::after{content:"\f078";font-family:"Font Awesome 7 Sharp";font-weight:300;font-size:16px;color:var(--navy);position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none}
.collection-dates{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.share-panel{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface)}
@media (max-width:599px){.share-panel{padding:var(--space-4)}}
figure .photo-credit{margin-top:8px;font-size:10px;line-height:14px;color:var(--ink-muted)}
.photo-credit a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.photo-credit .fa-badge-check{color:var(--gold-text);font-size:10px;margin-left:4px}
.photo-links{display:flex;flex-wrap:wrap;gap:2px 6px;margin-top:4px;font-size:10px;line-height:14px;color:var(--ink-muted)}
.photo-credit:empty + .photo-links,figure>img + .photo-links{margin-top:8px}
.photo-links a{color:inherit;text-decoration:underline}
.photo-links a.quiet{text-decoration:none}
.photo-links a.quiet:hover,.photo-links a.quiet:focus-visible{text-decoration:underline}
.photo-links .sep{color:var(--ink-muted)}
@media (max-width:599px){.photo-links{flex-direction:column;gap:2px}.photo-links .sep{display:none}}
.choice-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media (max-width:599px){.choice-cards{grid-template-columns:1fr}}
.choice-card{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-xs);background:var(--surface);cursor:pointer}
.choice-card:has(input:checked){border:2px solid var(--navy);padding:calc(var(--space-4) - 1px);background:var(--navy-tint)}
.choice-card:has(input:focus-visible){outline:2px solid var(--gold-text);outline-offset:2px}
.choice-card i{font-size:24px;color:var(--navy)}
.bulk-bar{position:sticky;bottom:24px;display:flex;align-items:center;gap:var(--space-4);padding:12px 24px;background:var(--navy);color:var(--on-dark);border-radius:var(--radius-xs);box-shadow:0 8px 24px rgb(20 26 51 / .2)}
.bulk-bar .count{flex:1}
.media-thumb .select{position:absolute;top:8px;left:8px;width:32px;height:32px;display:grid;place-items:center;background:var(--surface);border-radius:var(--radius-xs);opacity:0}
.media-thumb:hover .select,.media-thumb:focus-within .select,.media-grid.has-selection .select{opacity:1}
.media-thumb.is-selected img{outline:3px solid var(--navy);outline-offset:-3px}
.badge[data-tone=warning]{background:var(--warn-tint);color:var(--warn-text)}
.badge[data-tone=info]{background:var(--navy-tint);color:var(--navy)}
.btn-destructive{background:transparent;border:1px solid var(--wine);color:var(--wine)}
.btn-destructive:hover{background:var(--wine-tint)}
.btn-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.table-compact th,.table-compact td{padding:8px 16px;height:40px;font-size:14px}
.table-compact th{background:var(--eggshell-60);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-xs)}
.table-scroll .sticky{position:sticky;left:0;background:var(--surface);z-index:1}
.table-scroll.is-scrolled .sticky{box-shadow:4px 0 8px rgb(20 26 51 / .10)}
.disclosure{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface)}
.disclosure>summary{display:flex;gap:var(--space-3);align-items:center;padding:14px var(--space-4);cursor:pointer;list-style:none}
.disclosure[open]>summary{border-bottom:1px solid var(--line)}
.disclosure .content{padding:var(--space-4)}
.drop-zone.is-dragover{border:2px dashed var(--navy);background:var(--navy-tint)}
.progress{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-xs)}
.progress .track{height:8px;border-radius:4px;background:var(--eggshell);overflow:hidden}
.progress .fill{height:100%;background:var(--navy);border-radius:4px;transition:width .3s ease-out}
.progress.is-done .fill{background:var(--success)}.progress.has-errors .fill{background:var(--warn-text)}
.coat-swatch{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);position:relative;overflow:hidden;flex:none}
.gen-result{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-xs)}
.gen-result .bar{height:8px;border-radius:4px;background:var(--eggshell);overflow:hidden}.gen-result .bar span{display:block;height:100%;background:var(--navy);border-radius:4px}
.gen-result .pct{min-width:84px;text-align:right;font-weight:600;color:var(--navy)}
.gen-result.is-lethal{background:var(--wine-tint);border-color:var(--wine)}.gen-result.is-lethal .bar span{background:var(--wine)}.gen-result.is-lethal .pct{color:var(--wine)}
.health-meter .bar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden}
.health-meter .clear{background:var(--success)}.health-meter .carrier{background:var(--gold)}.health-meter .affected{background:var(--wine)}
.gen-results.is-loading{opacity:.55;transition:opacity .15s ease-out}
/* Pedigree chart (Nov 2, Michael's update): one bordered box, horizontal rules only, centred cells. */
.pedigree-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pedigree-chart{display:grid;grid-template-columns:repeat(4,minmax(242px,1fr));min-width:968px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);overflow:hidden}
.pedigree-chart .gen{display:flex;flex-direction:column}
.pedigree-chart .cell{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;padding:0 12px;border-bottom:1px solid var(--line);overflow:hidden;min-height:44px}
.pedigree-chart .cell:last-child{border-bottom:0}
.pedigree-chart .name{display:flex;align-items:center;gap:8px;color:var(--navy)}
.pedigree-chart .gen-1 .name,.pedigree-chart .gen-2 .name{font-size:16px;line-height:20px;font-weight:700}
.pedigree-chart .gen-3 .name,.pedigree-chart .gen-4 .name{font-size:14px;line-height:21px;font-weight:400}
.pedigree-chart .detail{font-size:13px;line-height:15px;color:var(--ink-muted)}
.pedigree-legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px}
@media (max-width:767px){.pedigree-legend{flex-direction:column;gap:6px}}
/* Button: Outline on dark (Nov 2) — for navy / navy-700 surfaces */
.btn-outline-dark{background:transparent;color:var(--on-dark);border-color:var(--on-dark)}
.btn-outline-dark:not([disabled]):not([aria-disabled="true"]):hover{background:var(--on-dark);color:var(--navy)}
.btn-outline-dark:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Stallion page contact card, option C (Nov 2, approved) */
.contact-card{background:var(--eggshell-60);border-radius:var(--radius-xs);padding:32px;display:flex;flex-direction:column;gap:20px}
.contact-row{display:flex;align-items:center;gap:20px}
.contact-row + .contact-row{border-top:1px solid var(--line);padding-top:20px}
.contact-row .who{display:flex;gap:16px;flex:1;min-width:0}
.contact-row .name{font-size:20px;line-height:24px;font-weight:700;color:var(--navy);margin:0}
.contact-row .roles{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.contact-row .roles .tag{background:var(--surface);border:1px solid var(--stone-line)}
.contact-row .meta{font-size:13px;line-height:15px;color:var(--ink-muted)}
.contact-row .actions{display:flex;gap:8px}
@media (max-width:767px){.contact-card{padding:24px 20px}.contact-row{flex-direction:column;align-items:stretch;gap:16px}.contact-row .name{font-size:16px;line-height:20px}.contact-row .actions > *{flex:1}}
/* Avatar Fill = Solid (Nov 2): reversed tones for eggshell surfaces. Set --tone and --tone-tint per tone. */
.avatar.solid{background:var(--tone,var(--navy));color:var(--tone-tint,var(--navy-tint))}
/* Stallion hero layout (Nov 2): mobile spacing updated by Michael */
.stallion-hero{background:var(--eggshell-60);padding:var(--space-12) var(--gutter)}
.stallion-hero .hero-inner{max-width:var(--content-max);margin:0 auto;display:flex;gap:var(--space-16)}
.stallion-hero .details{display:flex;flex-direction:column;gap:var(--space-12)}
.stallion-hero .name-group .lines{display:flex;flex-direction:column;gap:var(--space-3)}
.stallion-hero .name-group .info-pair{display:flex;flex-direction:column;gap:var(--space-1)}
.stallion-hero .key-facts{display:flex;gap:var(--space-6)}
.stallion-hero .actions{display:flex;gap:var(--space-2)}
@media (max-width:767px){
 .stallion-hero{padding:var(--space-6) var(--gutter) var(--space-8)}
 .stallion-hero .hero-inner{flex-direction:column;gap:var(--space-6)}
 .stallion-hero .key-facts{flex-direction:column;gap:var(--space-4)}
}
/* Site menu: intentionally not defined. Keep the live site's mega menu as it is (Michael, Nov 2). */
/* Block / Horse hero (Nov 2): matches the developer build. 1:1 photo. */
.horse-hero{background:var(--eggshell-60);padding:var(--space-12) var(--gutter) var(--space-8)}
.horse-hero .inner{max-width:var(--content-max);margin:0 auto;display:flex;gap:var(--space-8);align-items:center}
.horse-hero .photo-col{width:384px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--space-2)}
.horse-hero .photo{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-xs);display:block}
.horse-hero .crumbs{margin-bottom:var(--space-4)}
.horse-hero h1{font-family:var(--font-serif);font-weight:300;font-size:var(--fs-display);line-height:var(--lh-display);color:var(--navy);margin:0 0 var(--space-2)}
.horse-hero .info{font-size:16px;line-height:20px;font-weight:700;color:var(--navy);margin:0 0 var(--space-2)}
.horse-hero .pedigree{font-size:16px;line-height:24px;color:var(--ink);margin:0}
.horse-hero .lines{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3);font-size:14px;line-height:21px}
.horse-hero .memorial{color:var(--ink-muted);margin:0}.horse-hero .breeder{color:var(--ink);margin:0}
.horse-hero .lines a{color:var(--navy);text-decoration:underline}
.photo-credit.split{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.photo-credit .cam{font-size:10px;color:var(--ink-muted);margin-right:6px}
@media (max-width:767px){.horse-hero{padding:var(--space-8) var(--gutter) var(--space-6)}.horse-hero .inner{flex-direction:column-reverse;align-items:stretch;gap:var(--space-6)}.horse-hero .photo-col{width:100%}.photo-credit.split{display:block}}
/* Block / Page nav bar (Nov 2): horizontal sticky in-page nav at content width (Horse detail) */
.page-nav-bar{position:sticky;top:75px;z-index:20;background:var(--surface);padding:var(--space-4) var(--gutter) 0}
.page-nav-bar ul{max-width:var(--content-max);margin:0 auto;padding:0;list-style:none;display:flex;gap:var(--space-2);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.page-nav-bar ul::-webkit-scrollbar{display:none}
.page-nav-bar a{display:block;padding:var(--space-2) var(--space-3);font-size:14px;line-height:21px;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.page-nav-bar a[aria-current="true"]{color:var(--navy);font-weight:600;border-bottom-color:var(--gold)}
@media (max-width:767px){.page-nav-bar{top:64px;padding-top:var(--space-2)}.page-nav-bar ul{gap:var(--space-1)}}
/* Photo credit row (Nov 2): credit left, link pair far right on desktop; stacked on mobile */
figure .photo-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:8px}
figure .photo-meta .photo-credit,figure .photo-meta .photo-links{margin:0}
@media (max-width:767px){figure .photo-meta{display:block}figure .photo-meta .photo-links{margin-top:4px}}
/* Horse page results tables (Nov 2): Super Sires results + Show results */
.results-table{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);overflow:hidden}
.results-table .result-row{display:grid;gap:var(--space-6);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);font-size:14px;line-height:21px;color:var(--ink);align-items:start}
.results-table .result-row:last-child{border-bottom:0}
.results-table .result-row.head{font-size:11px;line-height:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-muted);align-items:center}
.results-table .num{text-align:right}
.results-table a{color:var(--navy);text-decoration:underline}
.results-table .ss-year{background:var(--eggshell);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);font-size:14px}
.results-table .ss-year strong{font-weight:600;color:var(--navy)}
.ss-rows .result-row{grid-template-columns:1fr 200px 200px 64px 104px 72px}
.show-rows .result-row{grid-template-columns:72px 1fr 240px 200px 200px 64px 96px}
@media (max-width:767px){.results-table .result-row.head{display:none}.ss-rows .result-row,.show-rows .result-row{grid-template-columns:1fr auto;gap:var(--space-3)}.show-rows .result-row{grid-template-columns:40px 1fr}}
/* Super Sires sponsor card (Nov 2): A header on a dark wrapper */
.ss-card{background:var(--navy);border-radius:var(--radius-xs);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-6)}
.ss-card .ss-head{display:flex;align-items:center;gap:var(--space-8);padding:0}
.ss-card .ss-head .wordmark{width:220px;height:auto;flex-shrink:0}
.ss-card .ss-head .eyebrow{color:var(--gold)}
.ss-card .ss-head .sponsor{font-size:13px;line-height:15px;color:var(--on-dark-muted);margin:4px 0 0}
.ss-card .ss-total{margin-left:auto;text-align:right;color:var(--on-dark)}
.ss-card .ss-total .label{font-size:13px;line-height:15px;color:var(--on-dark-muted)}
.ss-card .results-table{border:0}
@media (max-width:767px){.ss-card{padding:var(--space-4);gap:var(--space-4)}.ss-card .ss-head{flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-2) 0 0}.ss-card .ss-head .wordmark{width:160px}.ss-card .ss-total{margin-left:0;text-align:left}}
/* Article detail layout B (Nov 2): sticky left + right rails */
.article-layout{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:200px minmax(0,640px) 280px;justify-content:space-between;gap:40px;align-items:start}
.article-layout .rail{position:sticky;top:calc(75px + var(--space-6));display:flex;flex-direction:column;gap:40px}
.article-layout .rail h2{font-size:12px;line-height:18px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin:0 0 var(--space-3)}
.article-layout .topics{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.article-mini{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-4) 0;border-top:1px solid var(--line);text-decoration:none}
.article-mini img{width:72px;height:72px;object-fit:cover;border-radius:var(--radius-xs);flex-shrink:0}
.article-mini .title{font-size:14px;line-height:21px;font-weight:600;color:var(--navy);margin:0}
.article-mini .date{font-size:13px;line-height:15px;color:var(--ink-muted)}
@media (max-width:1100px){.article-layout{grid-template-columns:minmax(0,1fr) 280px}.article-layout .rail.left{display:none}}
@media (max-width:767px){.article-layout{grid-template-columns:1fr}.article-layout .rail{position:static}}

/* Article detail — meta in the Page header band; images capped at the article column (Nov 2) */
.page-header .article-meta{margin:0;font-size:var(--text-caption,13px);line-height:1.5;color:var(--text-muted)}
.page-header .heading > .badge:first-child{align-self:flex-start}
.article-layout .article-body img,.article-layout .article-body figure{display:block;max-width:100%;height:auto;margin-inline:0}
.article-layout .article-body .lead-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-xs)}

/* Article left rail "On this page" = the Stallion page sidebar nav (Michael, Nov 2) */
.rail-nav{list-style:none;margin:var(--space-2) 0 0;padding:0;border-left:1px solid var(--line)}
.rail-nav a{display:block;padding:var(--space-2) 0 var(--space-2) var(--space-4);margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:21px;color:var(--ink);text-decoration:none}
.rail-nav a[aria-current="true"]{border-left-color:var(--gold);color:var(--navy);font-weight:600}
/* Obituary: square photo, body width */
.obituary-photo{width:100%;max-width:720px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-xs)}
.obituary-body{max-width:720px}
/* Super Sires hero — navy band matching the Super Sires results card header (Nov 2) */
.ss-hero{background:var(--navy);padding:var(--section-py-compact,48px) var(--gutter)}
.ss-hero .inner{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-8)}
.ss-hero .crumbs,.ss-hero .crumbs a{font-size:13px;line-height:15px;color:var(--on-dark-muted)}
.ss-hero .crumbs [aria-current]{color:var(--on-dark)}
.ss-hero .partner{display:flex;align-items:center;gap:var(--space-8)}
.ss-hero .partner .wordmark{width:220px;height:auto;flex-shrink:0}
.ss-hero .eyebrow{color:var(--gold);margin:0}
.ss-hero .sponsor{font-size:13px;line-height:15px;color:var(--on-dark-muted);margin:var(--space-1) 0 0}
.ss-hero h1{color:var(--on-dark);margin:0}
.ss-hero .intro{color:var(--on-dark-muted);margin:var(--space-3) 0 0}
@media (max-width:767px){.ss-hero .inner{gap:var(--space-6)}.ss-hero .partner{flex-direction:column;align-items:flex-start;gap:var(--space-4)}.ss-hero .partner .wordmark{width:160px}}

/* Super Sires hero — hub variant: wordmark right, latest results box (Nov 2) */
.ss-hero.hub .top{display:flex;align-items:center;gap:var(--space-12)}
.ss-hero.hub .top .text{flex:1;display:flex;flex-direction:column;gap:var(--space-4)}
.ss-hero.hub .top .partner{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-3);text-align:right}
.ss-hero.hub .top .partner .wordmark{width:280px}
.ss-hero .latest{background:var(--surface);border-radius:var(--radius-xs);overflow:hidden}
.ss-hero .latest .rows{padding:0 var(--space-5) var(--space-2)}
@media (max-width:767px){.ss-hero.hub .top{flex-direction:column;align-items:flex-start;gap:var(--space-5)}.ss-hero.hub .top .partner{align-items:flex-start;text-align:left}.ss-hero.hub .top .partner .wordmark{width:160px}.ss-hero .latest .rows{padding:0 var(--space-4) var(--space-2)}.ss-hero.hub .btn{width:100%}}

/* Super Sires hero — all pages: heading left, partner block far right, bottom-aligned (Nov 2, 22:45) */
.ss-hero .top{display:flex;align-items:flex-end;gap:var(--space-12)}
.ss-hero .top .text{flex:1;display:flex;flex-direction:column;gap:var(--space-4)}
.ss-hero .top .partner{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-3);text-align:right}
.ss-hero .top .partner .wordmark{width:280px;height:auto}
@media (max-width:767px){.ss-hero .top{flex-direction:column;align-items:flex-start;gap:var(--space-5)}.ss-hero .top .partner{align-items:flex-start;text-align:left}.ss-hero .top .partner .wordmark{width:160px}}
.ss-hero .top .text .btn{align-self:flex-start;margin-top:var(--space-2)}
@media (max-width:767px){.ss-hero .top .text .btn{align-self:stretch}}

/* == design system end ================================================================================= */

/* ===================================================================== website layout start ==
   StallionCompare.com layout. Tokens and text-style values only; the look comes from the design system above.
   Breakpoints: 640px (two columns), 1024px (desktop: 1200px column, 96px sections), 1280px (inline header nav).
   Anything the system doesn't cover is listed in app/docs/design-system/gaps.md › Website.
   ================================================================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-size:16px;line-height:24px}
img{max-width:100%;height:auto}
a{color:var(--navy);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{color:var(--navy);margin:0 0 var(--space-3)}
/* gap 17: titles are navy; page titles Larken */
h1{font-family:var(--font-serif);font-size:var(--fs-title);line-height:var(--lh-title);font-weight:300}
h2{font-size:var(--fs-heading-m);line-height:var(--lh-heading-m);font-weight:700}
h3,h4{font-size:16px;line-height:20px;font-weight:700}
p{margin:0 0 var(--space-4)}
.eyebrow{margin:0 0 var(--space-2)}
.small{font-size:14px;line-height:21px}
.xs{font-size:13px;line-height:15px}
.sr,.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:var(--space-2);background:var(--navy);color:var(--on-dark);padding:var(--space-2) var(--space-3);z-index:50}
.skip:focus{left:var(--space-2)}
.btn{font-family:inherit}
.btn:hover{text-decoration:none}
/* Icons never take a link's underline (Figma). Icon-only and button-style links have no underline at all; an icon
   inside an underlined text link stays clean because it is its own inline box (decorations don't reach into
   inline-blocks), whichever way it's drawn (kit font, kit SVG or our fallback SVG). */
a.iconbtn,a.iconbtn:hover,a.btn,a.btn:hover{text-decoration:none}
a .ico-fa,a .ico-svg,a svg,a i[class*="fa-"]{display:inline-block;text-decoration:none}
.btn-link .arrow{flex-shrink:0}
.btn.disabled,.btn[aria-disabled="true"]{opacity:.4}
.iconbtn svg{display:block}
/* a link chip / segment shows its selected state with aria-current (gap 12) */
a.chip{display:inline-flex;align-items:center;text-decoration:none}
.chip[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.topic-chip:hover{text-decoration:none}
@media (prefers-reduced-motion:reduce){.btn-link .arrow{transition:none}.btn-link:hover .arrow{transform:none}}

/* (Revision 5: the bundle now sizes the feature-card title, article-card title, list-row names, KPI values, date-tile days
   and result places with the responsive type variables itself, so the website's overrides for them are gone.) */
/* Placeholder image (bundle .placeholder): slot sizing only. Each slot gives the placeholder the image's size and shape;
   the look (eggshell, stone mark at 25%, radius-xs or .flush) is the bundle's. */
.article-card .placeholder{width:100%;height:214px} /* the bundle sizes .article-card img 214px tall (rev 14); its placeholder matches */
.carousel-ctl [data-count][hidden]{display:none}

.stallion-card .details>.badge{align-self:flex-start}
/* layout helpers */
.wrap{max-width:calc(1200px + 2 * var(--space-5));margin:0 auto;padding-left:var(--space-5);padding-right:var(--space-5)}
.narrow{max-width:calc(760px + 2 * var(--space-5))}
.pad{padding-top:var(--space-12);padding-bottom:var(--space-12)}
.center{text-align:center;justify-content:center}
.row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.grid{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
.grid.sm,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.sm,.grid4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.grid{gap:var(--space-6);grid-template-columns:repeat(3,minmax(0,1fr))}.grid.sm,.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Page sections: the bundle's .section / .section-inner (section-py, gutter, block-gap, content-max; .alt, .pt-compact…).
   Inside a section-inner the block-gap spaces the parts, so their own outer margins are dropped. */
.section>.section-inner>*{margin-top:0;margin-bottom:0}
.dir-scroll{position:relative;overflow-x:auto} /* home tables (renamed from .table-scroll, which the system now defines as a bordered admin table box) */
@media (max-width:1023px){.dir-desktop{display:none}}
/* Section heading: gold eyebrow, Larken display title, optional "View all ⊙" (right on desktop, under the title on mobile) */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-6)}
.sec-head h2{margin:0}
.sec-head .eyebrow{margin:0}
.sec-title{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.sec-title h2{font-family:var(--font-serif);font-size:var(--fs-display);line-height:var(--lh-display);font-weight:300}
@media (min-width:1024px){
  .sec-head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:var(--space-6);margin-bottom:var(--space-8)}
}
/* page header band (gap: PageHeader) */
.band{background:var(--eggshell-60)}
.band .wrap{padding-top:var(--space-8);padding-bottom:var(--space-6)}
.band h1{margin:0}
@media (min-width:1024px){.band .wrap{padding-top:var(--space-12);padding-bottom:var(--space-8)}.band h1{font-size:var(--fs-display);line-height:var(--lh-display)}}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);padding:0;margin:0 0 var(--space-4);font-size:13px;line-height:15px;color:var(--ink-muted)}
.crumbs li+li:before{content:"/";margin-right:var(--space-2)}
.crumbs a{color:var(--ink-muted)}
.tags{display:flex;gap:var(--space-2);flex-wrap:wrap}
a.tag{text-decoration:none}
.count{font-size:14px;line-height:21px;color:var(--ink-muted)}
.list{list-style:none;padding:0;margin:0}
.list li{padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
/* profile: photo + facts (.dl-facts: the system's .facts is the fact strip since revision 15) */
.profile{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding-top:var(--space-6)}
@media (min-width:900px){.profile{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-8)}}
.photo{border-radius:var(--radius-xs);overflow:hidden;background:var(--eggshell)}
.photo img{display:block;width:100%;height:auto}
.dl-facts{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-4);margin:0}
.dl-facts dt{font-size:12px;line-height:18px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold-text)}
.dl-facts dd{margin:0;font-size:16px;line-height:20px;font-weight:700;color:var(--navy)}
.panel{border:1px solid var(--line);background:var(--surface);padding:var(--space-5)}
.panel.soft{background:var(--eggshell-60);border-color:transparent}
.panel h2{font-size:12px;line-height:18px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold-text);margin-bottom:var(--space-3)}
/* tables (gap: DataTable): micro/ink-muted header, body-s cells, hairline rules */
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface)}
/* Data table (system .data-table, rev 12): .table-wrap gives the 1px line border, radius-xs and the sideways scroll, so
   the table itself drops its own border; the header row is the system's (eggshell-60, 13px semibold ink-muted, no caps) */
.table-wrap>.data-table{border:0;border-radius:0}
.data-table th{text-transform:none;letter-spacing:0;white-space:nowrap}
table{border-collapse:collapse;width:100%;font-size:14px;line-height:21px}
th,td{text-align:left;padding:var(--space-3);border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);background:var(--surface);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap}
/* filter forms: system field and input values on native controls */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:end;margin:var(--space-4) 0}
.filters label{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:18px;font-weight:600;color:var(--navy)}
.filters input,.filters select{min-height:48px;border:1px solid var(--stone-line);border-radius:var(--radius-xs);padding:0 var(--space-3);font:inherit;font-size:16px;background:var(--surface);color:var(--ink);min-width:160px}
.filters input:focus,.filters select:focus{outline:0;border-color:var(--ink-muted);box-shadow:0 0 0 4px rgba(180,170,160,.35)}
/* pager (gap: Pager) */
/* Pagination: the system's .pagination (layout.ts pagination()); only its place in the page and the inert end arrows */
.pagination{margin:var(--space-8) 0 0}
.pagination.compact{margin:0}
.pagination .end{opacity:.4}
/* long text */
.prose{font-size:16px;line-height:24px;color:var(--ink)}
/* Bootstrap's .table-responsive (old CMS content; every content table is wrapped in it, embeds.ts responsiveTables):
   the table scrolls sideways inside its column instead of widening the page on phones */
.table-responsive{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--space-6) 0}
.table-responsive>table{margin:0;width:100%}
.prose,.prose-sm{min-width:0;max-width:100%;overflow-wrap:break-word}
.prose table td,.prose-sm table td{min-width:96px}
.prose img,.prose iframe{max-width:100%}
.prose img{border-radius:var(--radius-xs);height:auto}
.prose h2{font-size:var(--fs-heading-m);line-height:var(--lh-heading-m);margin-top:var(--space-8)}
.prose h3{margin-top:var(--space-6)}
.prose blockquote{margin:var(--space-6) 0;padding:0 0 0 var(--space-4);border-left:2px solid var(--gold);font-family:var(--font-serif);font-size:var(--fs-card-title);line-height:var(--lh-card-title);font-weight:400;color:var(--navy)}
/* == testimonials (FEATURE_TESTIMONIALS; src/web/pages/testimonials.ts) — not in the design system yet (design gap): a card built from Card + Avatar + the gold accent == */
.tm-head-right{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.tm-card{margin:0;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);width:360px;max-width:82vw;box-sizing:border-box}
.tm-grid{display:grid;gap:var(--space-6);grid-template-columns:minmax(0,1fr)}
.tm-grid .tm-card{width:auto;max-width:none}
@media (min-width:768px){.tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:992px){.tm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tm-stars{display:inline-flex;gap:2px;color:var(--gold);line-height:0}
.tm-stars .off{color:var(--stone-line)}
.tm-stars-lg svg{width:24px;height:24px}.tm-stars-lg .ico-fa{--ico-d:24px}
.tm-quote{margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.tm-title{margin:0;font-family:var(--font-serif);font-size:var(--fs-card-title);line-height:var(--lh-card-title);font-weight:400;color:var(--navy)}
.tm-body{margin:0;font-size:16px;line-height:24px;color:var(--ink)}
.tm-slider .tm-body{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.tm-person{display:flex;gap:var(--space-3);align-items:center;margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--line)}
.tm-avatar{width:48px;height:48px}
.tm-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.tm-by,.tm-about{color:var(--ink-muted);margin:0}
.tm-summary{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.tm-avg{color:var(--navy)}
.tm-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.tm-chips .chip{display:inline-flex;align-items:center;text-decoration:none}
.tm-chips .chip[aria-current]{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.tm-cta{margin-top:var(--space-10);display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.tm-form-wrap{display:flex;flex-direction:column;gap:var(--space-4)}
.tm-rate{display:flex;flex-direction:column;gap:var(--space-2)}
.tm-rate .f-choice{display:flex;align-items:center;gap:var(--space-2)}
.tm-actions{margin-top:var(--space-2)}
.tm-section-flat{padding-left:0;padding-right:0}
.hero-img{border-radius:var(--radius-xs);overflow:hidden;margin:var(--space-5) 0}
.hero-img img{width:100%;display:block}
.hero-img.placeholder{aspect-ratio:16/10}
.hero-img.obit-ph{aspect-ratio:4/3}
.whoops{display:block;margin:0 auto var(--space-4)}
/* horizontal slider rows: scroll on their own without JavaScript; site.js adds the carousel controls */
.rail{position:relative;display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 auto;scroll-snap-align:start;min-width:0}
@media (min-width:1024px){.rail{gap:var(--space-6)}}
.carousel-ctl{display:flex;align-items:center;gap:var(--space-2)}
.carousel-ctl[hidden]{display:none}
/* Carousel dots (WCAG 2.5.8): each dot is a 24px button with the system's 10 / 6px dot (.dots i) centred inside, so the
   targets sit edge to edge (gap 0) and the dot centres are 24px apart instead of the drawn 16-18px (owner-approved). */
.dots[hidden]{display:none}
.dots:has(>button){gap:0}
.dots>button{width:24px;height:24px;padding:0;margin:0;border:0;border-radius:var(--radius-pill);background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.dots>button i{display:block;flex-shrink:0}
/* page column for the member, marketplace and message pages (gap 2: Screen / Column) */
.ds-col{max-width:480px;margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-8)}
/* == website layout end == */

/* == shell start == */
/* Header (Figma "Home" 1440 / 375): fixed over the page. State B ("solid": white, line below) everywhere by default and
   without JavaScript; on a page with a hero, site.js keeps State A (transparent, white mark) while the hero is in view.
   Mobile (<992px): 64px, mark 55x36 left at 20px, 48px squares (ghost search over the hero). Desktop: State A 118px with
   the white mark 100x65 centred 48px from the top, State B 75px with the navy mark 60x39 centred; 75px squares flush
   top-right, gap 0, square corners, no borders. States fade over 200ms (none with reduced motion). */
:root{--site-head:64px}
@media (min-width:992px){:root{--site-head:75px}}
html{scroll-padding-top:var(--site-head)}
body{padding-top:var(--site-head)}
body.has-hero{padding-top:0}
.site-head{--head-h:var(--site-head);--sq:48px;position:fixed;top:0;left:0;right:0;z-index:30;height:var(--head-h);background:var(--surface);border-bottom:1px solid var(--line);transition:height .2s ease,background-color .2s ease,border-color .2s ease}
.site-head .logo-link{position:absolute;left:var(--space-5);top:calc((var(--head-h) - 36px) / 2);width:55px;height:36px;transition:top .2s ease,width .2s ease,height .2s ease}
.site-head .logo{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .2s ease}
.site-head .logo-white{opacity:0}
.site-head .actions{position:absolute;top:0;right:0;height:var(--head-h);display:flex;align-items:center;gap:0;transition:height .2s ease}
.head-sq{width:var(--sq);height:var(--sq);padding:0;border-radius:var(--radius-none);transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.head-sq svg{width:24px;height:24px}
/* State A: over the hero */
.js .has-hero .site-head:not(.solid){background:transparent;border-bottom-color:transparent}
.js .has-hero .site-head:not(.solid) .logo-white{opacity:1}
.js .has-hero .site-head:not(.solid) .logo-navy{opacity:0}
.js .has-hero .site-head:not(.solid) .sq-search{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}
@media (min-width:992px){
  .site-head{--sq:75px}
  .js .has-hero .site-head:not(.solid){--head-h:118px}
  .site-head .actions{align-items:flex-start}
  .site-head .logo-link{left:50%;transform:translateX(-50%);top:calc((var(--head-h) - 39px) / 2);width:60px;height:39px}
  .js .has-hero .site-head:not(.solid) .logo-link{top:48px;width:100px;height:65px}
  .head-sq{border:0}
  .head-sq svg{width:30px;height:30px}
  /* the 1px line runs under the white search square too (the gold square covers it), as in the Figma frame */
  .site-head{border-bottom-color:transparent}
  .site-head::after{content:"";position:absolute;left:0;right:var(--sq);bottom:-1px;height:1px;background:var(--line);z-index:1;transition:opacity .2s ease}
  .js .has-hero .site-head:not(.solid)::after{opacity:0}
  .js .has-hero .site-head:not(.solid) .sq-search{background:var(--surface);color:var(--navy)}
}
@media (prefers-reduced-motion:reduce){.site-head,.site-head *{transition:none!important}}
/* search: the white square opens the field (site.js); without JavaScript it submits /horses?horse_name= */
.head-search{display:flex;align-items:center}
.head-search .input{display:none}
.head-search.open .input{display:block;position:fixed;top:var(--head-h);left:0;right:0;width:auto;border-radius:var(--radius-none);border-width:0 0 1px;box-shadow:var(--shadow-md)}
.head-search.open .input:focus{box-shadow:var(--shadow-md);border-color:var(--line)}
@media (min-width:992px){
  .head-search.open .input{position:absolute;top:0;left:auto;right:calc(2 * var(--sq));width:360px;height:var(--sq);border-width:0;box-shadow:none}
  .head-search.open .input:focus{box-shadow:none}
}
/* Site menu: the live stallioncompare.com mega menu, kept as it is for launch (Michael, Nov 2; the design system no longer
   defines the menu). Values from the old site's css/custom.scss + Bootstrap 5: offcanvas-top, full height, navy
   (#151934), slides down over 1s cubic-bezier(.4,0,0,1). Left col-5 featured stallion from 768px (image, a navy fade 70vh
   tall, details at 3rem); right col-7 with the Discover / Connect lists (col-md-5 / col-lg-6, px-5 pt-5, ps-4; 0.9rem,
   links white 50% → white over 500ms, gold uppercase titles spaced 3.5px). The header (logo, search, gold square) stays on
   top as on the live site; the gold square toggles the menu. site.js: focus stays in the menu and the gold square, Escape
   closes. Without JavaScript the gold square links to #site-menu (:target) and "Close menu" (shown on focus) closes it. */
.mega{position:fixed;inset:0;z-index:31;display:flex;background:#151934;color:#fff;overflow:hidden;transform:translateY(-100%);visibility:hidden;transition:transform 1s cubic-bezier(.4,0,0,1),visibility 0s linear 1s}
.mega.open,.mega:target{transform:none;visibility:visible;transition:transform 1s cubic-bezier(.4,0,0,1),visibility 0s}
.mega:focus{outline:0}
@media (prefers-reduced-motion:reduce){.mega,.mega.open,.mega:target{transition:none}}
html.menu-open{overflow:hidden}
html.menu-open .site-head{z-index:32}
/* Phones: full-screen panel under a transparent header with the white logo (the live menu) */
@media (max-width:767px){
  html.menu-open .site-head{background:transparent;border-bottom-color:transparent}
  html.menu-open .site-head::after{opacity:0}
  html.menu-open .site-head .logo-white{opacity:1}
  html.menu-open .site-head .logo-navy{opacity:0}
}
/* Tablet and desktop (Michael, Nov 2): the same narrow lockup as on phones, as a full-height panel on the right; the
   navy and the dimmed page both reach the top of the viewport. The header turns transparent while the menu is open, so
   only its logo and the search / menu squares sit above (the squares stay usable); a click outside closes it (site.js). */
@media (min-width:768px){
  .mega{top:0;left:auto;width:min(420px,100%);box-shadow:-16px 0 40px rgba(21,25,52,.25)}
  html.menu-open body::before{content:"";position:fixed;inset:0;z-index:30;background:rgba(21,25,52,.35)}
  html.menu-open .site-head{background:transparent;border-bottom-color:transparent;box-shadow:none}
  html.menu-open .site-head::after{opacity:0}
  .mega-cols{padding:calc(var(--site-head) + 1rem) 1.5rem 1rem}
  .mega-col{width:50%;padding:1.5rem .75rem 0}
  .mega-main{justify-content:flex-start}
  .mega-acct{padding:0 2.25rem 2.5rem}
}
.mega-close{position:absolute;left:-9999px;top:var(--space-2);z-index:5;background:#fff;color:#151934;padding:var(--space-2) var(--space-3);font-size:14px}
.mega-close:focus{left:var(--space-2)}
.mega-main{flex:1 1 auto;min-width:0;height:100%;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;justify-content:safe center;font-family:'Plus Jakarta Sans',sans-serif}
.mega-cols{display:flex;flex-wrap:wrap;width:100%;max-width:1400px;margin:0 auto;box-sizing:border-box;padding:5rem 1rem 1rem}
.mega-col{flex:0 0 auto;width:50%;box-sizing:border-box;padding:1.5rem .5rem 0}
.mega-list{list-style:none;margin:0 0 35px;padding:0}
.mega-list li{padding:2px 0;font-size:.9rem;line-height:1.5;font-weight:300;color:#464960}
.mega-list .mega-title{margin-bottom:10px;color:#c09c6a;text-transform:uppercase;letter-spacing:3.5px}
.mega-list a{color:rgba(255,255,255,.5);text-decoration:none;transition:all .5s ease}
.mega-list a:hover{color:#fff}
.mega-list a:focus-visible{color:#fff;outline:2px solid #c09c6a;outline-offset:2px}
.mega-acct{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);width:100%;max-width:1400px;margin:0 auto;box-sizing:border-box;padding:0 2.5rem 3rem}
.mega-acct .btn-sign{color:#fff}
.btn-sign{display:inline-flex;align-items:center;gap:var(--space-1);font-size:14px;line-height:20px;font-weight:500;color:var(--navy);text-decoration:none;min-height:36px}
.btn-sign:hover{text-decoration:underline}
.btn-ai svg{color:var(--gold-text)}
.mega-acct .btn-ai{color:#fff;border-color:rgba(255,255,255,.5)}
/* unread messages next to the account link (gap 18: CountBadge) */
.mk-inbox{display:inline-flex;align-items:center;gap:var(--space-1)}
.mk-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--space-1);border-radius:var(--radius-pill);background:var(--gold);color:var(--navy);font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em}
/* mobile tab bar (system TabBar + gap 24 positioning): fixed at the bottom under 992px */
.site-tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.site-tabs a svg{display:block}
@media (max-width:991px){body{padding-bottom:calc(71px + env(safe-area-inset-bottom))}}
@media (min-width:992px){.site-tabs{display:none}}

/* Site footer (Content-blocks › Site footer; Figma Footer page, "Block / Site footer"). Eggshell band.
   Desktop/tablet (>=768): headline + large SC mark, five link columns (gold eyebrow over body-s links), stone-line hairline,
   maple leaf, version, PIPEDA note, copyright row. Mobile (<768, Concept A): mark, headline, search, Compare button, then
   each list as an Accordion header row (<details>; site.js closes them on mobile), then the legal block stacked. */
.site-foot{background:var(--eggshell);color:var(--ink);padding:var(--section-py) var(--gutter) var(--space-16)}
.foot-in{max-width:var(--content-max);margin:0 auto}
.site-foot a:not(.btn){color:var(--ink);text-decoration:none}
.site-foot a:not(.btn):hover{color:var(--navy);text-decoration:underline}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.foot-top h2{margin:0;color:var(--navy)}
.foot-logo{display:block;flex-shrink:0}
.foot-logo img{display:block;width:134px;height:auto}
.foot-cta{display:none}
.foot-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-16)}
.foot-list summary{display:block;list-style:none;pointer-events:none}
.foot-list summary::-webkit-details-marker{display:none}
.foot-list .chev{display:none}
.foot-h{margin:0;font-size:12px;line-height:18px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold-text)}
.foot-list ul{list-style:none;margin:0;padding:var(--space-5) 0 0;display:flex;flex-direction:column;gap:var(--space-2);font-size:14px;line-height:21px}
.foot-list li{overflow-wrap:anywhere}
.foot-mobile{display:none}
.foot-legal{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);margin-top:var(--space-16);padding-top:var(--space-16);border-top:1px solid var(--stone-line);font-size:14px;line-height:21px}
.foot-legal p{margin:0}
.foot-leaf{display:block;width:32px;height:32px;fill:var(--wine)}
.foot-note{max-width:760px}
.site-foot .foot-legal a{color:var(--navy)}
.foot-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-6);width:100%}
.foot-bottom ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
@media (max-width:1023px){.site-foot{margin-top:var(--space-12)}}
@media (max-width:1199px){.foot-bottom{flex-direction:column-reverse;align-items:flex-start;gap:var(--space-3)}}
@media (max-width:767px){
  .site-foot{padding-bottom:var(--section-py)}
  .foot-top{flex-direction:column;align-items:flex-start;gap:var(--space-6)}
  .foot-top h2{font-size:var(--fs-title);line-height:var(--lh-title)}
  .foot-logo{order:-1}
  .foot-logo img{width:55px}
  .foot-cta{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-6)}
  .foot-cols{display:block;margin-top:var(--space-6)}
  .foot-list{border-bottom:1px solid var(--line)}
  .foot-list summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:56px;cursor:pointer;pointer-events:auto}
  .foot-h{font-size:16px;line-height:20px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--navy)}
  .foot-list .chev{display:block;flex-shrink:0;color:var(--gold-text);transition:transform .2s ease}
  .foot-list[open] .chev{transform:rotate(180deg)}
  .foot-list ul{padding:var(--space-3) 0 var(--space-4)}
  .foot-split ul{display:block;columns:2;column-gap:var(--space-4)}
  .foot-split li{break-inside:avoid}
  .foot-split li:not(:last-child){margin-bottom:var(--space-2)}
  .foot-mobile{display:block}
  .foot-legal{gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-6);font-size:13px;line-height:15px}
  .foot-leaf{width:24px;height:24px}
  .foot-bottom{flex-direction:column-reverse;align-items:flex-start;gap:var(--space-3)}
  .foot-bottom ul{gap:var(--space-4);font-size:13px;line-height:18px;font-weight:600}
}
@media (prefers-reduced-motion:reduce){.foot-list .chev{transition:none}}
/* the last band before the footer already has its own padding */
main>:last-child.section{margin-bottom:0}

/* Ask AI drawer (gap 1: MessageBubble; gap 24: fixed positioning) */
.ai{position:fixed;inset:auto var(--space-4) var(--space-4) auto;width:min(420px,calc(100vw - 2 * var(--space-4)));max-height:min(640px,calc(100vh - 2 * var(--space-4)));background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);z-index:40;display:flex;flex-direction:column;overflow:hidden}
.ai[hidden]{display:none}
.ai header{background:var(--navy);color:var(--on-dark);padding:var(--space-3) var(--space-4);display:flex;align-items:center;justify-content:space-between}
.ai header b{font-size:16px;line-height:20px;font-weight:700}
.ai header button{background:none;border:0;color:var(--on-dark);cursor:pointer;display:inline-flex;padding:0}
.ai .log{flex:1;overflow:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);font-size:14px;line-height:21px}
.ai .msg{padding:var(--space-3) var(--space-4);max-width:90%}
.ai .me{align-self:flex-end;background:var(--navy);color:var(--on-dark)}
.ai .me a{color:var(--on-dark)}
.ai .bot{align-self:flex-start;background:var(--eggshell-60);border:1px solid var(--line)}
.ai form{display:flex;gap:var(--space-2);padding:var(--space-3);border-top:1px solid var(--line)}
.ai form .input{flex:1}
@media (max-width:991px){.ai{bottom:calc(71px + var(--space-4) + env(safe-area-inset-bottom));max-height:calc(100vh - 71px - var(--site-head) - 2 * var(--space-4))}}
/* == shell end == */

/* == stallion start == */
.sp-hero{align-items:center;padding-top:var(--space-2)}
.sp-horse{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.sp-horse{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
@media (max-width:899px){.sp-horse .sp-photo{max-width:360px}}
/* profile photo: square like every stallion photo except the home hero (design system revision 4) */
.sp-photo{position:relative;aspect-ratio:4/3;background:var(--eggshell)}
.sp-photo img,.sp-photo>.placeholder{width:100%;height:100%;object-fit:cover}
/* gap: status over a photo — the system's live badge, placed top-left */
.sp-intro h1{margin-bottom:var(--space-2)}
.sp-intro h1{font-size:var(--fs-display);line-height:var(--lh-display)}
.sp-line{font-size:16px;line-height:20px;font-weight:700;color:var(--navy);margin-bottom:var(--space-2)}
.sp-sub{font-size:13px;line-height:15px;color:var(--ink-muted);margin-bottom:var(--space-2)}
.sp-actions{display:flex;gap:0;margin-top:var(--space-4);flex-wrap:wrap}
/* round icon links are now the system's square iconbtn */
.sp-icon{width:48px;height:48px;border-radius:var(--radius-none);background:var(--surface);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--navy)}
.sp-icon+.sp-icon{border-left:0}
.sp-icon:hover{color:var(--gold-text)}
.sp-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);padding-top:var(--space-3)}
@media (min-width:900px){.sp-layout{grid-template-columns:200px minmax(0,1fr);gap:var(--space-8);padding-top:var(--space-6)}}
.sp-side{position:relative}
.sp-nav ul{list-style:none;margin:0;padding:0}
.sp-nav a{text-decoration:none;font-size:13px;line-height:18px;font-weight:600;color:var(--ink)}
.sp-nav a:hover,.sp-nav a[aria-current]{color:var(--gold-text)}
@media (min-width:900px){
  .sp-nav{position:sticky;top:calc(var(--site-head) + var(--space-5))}
  .sp-nav li{border-bottom:1px solid var(--line)}
  .sp-nav a{display:block;padding:var(--space-3) var(--space-1)}
}
@media (max-width:899px){
  .sp-nav ul{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);-webkit-overflow-scrolling:touch}
  .sp-nav li{flex:0 0 auto}
  /* system chip look on links */
  .sp-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--stone-line);background:var(--surface);white-space:nowrap}
}
.sp-main{min-width:0}
.sp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.sp-sec{padding-top:var(--space-8);scroll-margin-top:calc(var(--site-head) + var(--space-4))}
#overview{scroll-margin-top:calc(var(--site-head) + var(--space-4))}
.sp-h{font-size:12px;line-height:18px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold-text);margin-bottom:var(--space-3)}
.sp-big{font-size:var(--fs-heading-m);line-height:var(--lh-heading-m);font-weight:700;color:var(--navy);margin-bottom:var(--space-2)}
.sp-normal{font-weight:400}
.sp-strong{font-weight:700;color:var(--navy)}
.sp-rule{border-top:1px solid var(--line);margin-top:var(--space-3);padding-top:var(--space-3)}
.sp-addr{font-size:14px;line-height:21px}
.sp-flag{border-radius:var(--radius-pill);vertical-align:-3px;margin-left:var(--space-1)}
.sp-links{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:13px;line-height:15px;margin:0}
.sp-links a{display:inline-flex;align-items:center;gap:var(--space-1);text-decoration:none}
.sp-ship{list-style:none;padding:0;margin:0 0 var(--space-3)}
.sp-list li{color:var(--ink-muted)}
.sp-foot{padding-top:var(--space-8)}
/* Pedigree: the system's .pedigree-chart / .pedigree-scroll / .pedigree-legend (rev 17, Michael's Nov 2 update: one
   bordered white box, horizontal rules only, none under the last cell of a column, 12px side padding, centred cells).
   Only the parts the system leaves to the page: links, detail spacing, dot placement, legend list. */
.pedigree-chart .name a{color:inherit;text-decoration:none}
.pedigree-chart .name a:hover{text-decoration:underline}
.pedigree-chart .name em{font-style:normal;color:var(--ink-muted)}
.pedigree-chart .detail{margin:2px 0 0}
.pedigree-chart .cell{padding-top:var(--space-2);padding-bottom:var(--space-2)}
/* duplicate-ancestor colours come from the data (gap: pedigree duplicate markers) */
/* Similarity chip: sizes come from the system (rev 17); it sits at the start of the card's column (4px card gap). */
.similarity-chip{align-self:flex-start}
.similarity-chip i{display:inline-flex;line-height:0}
/* duplicate-ancestor dots: the system's .ped-dot, incl. .x for every 4th+ repeat (rev 16); placement only here */
.pedigree-legend{list-style:none;padding:0;font-size:14px;line-height:21px}
.pedigree-legend li{display:flex;align-items:center;gap:var(--space-2)}
.ped-pct{background:var(--dup);border-radius:var(--radius-xs);font-weight:700;padding:2px 6px;margin-right:var(--space-1);color:var(--navy)}
/* tables, lists */
.sp-table td{vertical-align:middle}
.sp-table .sp-year th{background:var(--eggshell);color:var(--navy);font-size:13px;line-height:18px;font-weight:600;letter-spacing:0;text-transform:none}
.sp-table .sp-colhead th{background:var(--surface)}
.sp-thumb{width:66px}
.sp-thumb img{border-radius:var(--radius-xs);object-fit:cover;display:block}
.sp-thumb .placeholder{width:50px;height:50px}
.sp-articles a{display:flex;gap:var(--space-3);align-items:center;text-decoration:none;color:var(--ink)}
.sp-articles img{border-radius:var(--radius-xs);object-fit:cover;flex:0 0 96px}
.sp-articles .placeholder{flex:0 0 96px;height:72px}
.sp-articles a>span{display:flex;flex-direction:column;gap:2px}
.sp-ss{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);align-items:start;border-top:1px solid var(--line);margin-top:var(--space-8)}
@media (min-width:640px){.sp-ss{grid-template-columns:120px minmax(0,1fr)}}
@media (max-width:639px){.sp-sslogo img{width:80px;height:auto}}
.sp-progs{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center}
.sp-progs img{filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s;object-fit:contain}
.sp-progs a:hover img,.sp-progs a:focus img{filter:none;opacity:1}
/* recently added: stallion photo cards in a rail */
.sp-recent{padding-top:var(--space-12)}
/* the stallion page's last section keeps the section gutter before the footer (Michael, Nov 2 20:05) */
.sp-similar{padding-bottom:var(--section-py)}
.sp-scroller>.stallion-card{width:260px}
/* Similar stallions: full bleed to the right screen edge like the other sliders (Michael, Nov 2); starts on the content column */
.sp-similar .rail{margin-right:calc(50% - 50vw);padding-right:var(--gutter);scroll-padding-left:0}
/* Similar stallions (stallion-similar.ts): the owner's Stallion Pro note above the heading; heading row as on Home */
.sp-similar>.note{margin:0 0 var(--space-6)}
.sp-similar>.dir-recent-head{margin-bottom:var(--space-6)}
/* compare */
.sp-compare select{min-width:220px}
.sp-cmp{min-width:640px}
.sp-cmp thead th{background:var(--surface);text-transform:none;letter-spacing:0;white-space:normal;color:var(--navy);vertical-align:top;width:25%;font-size:16px;line-height:20px}
.sp-cmp thead img,.sp-cmp thead .placeholder{display:block;width:100%;max-width:240px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-xs);margin-bottom:var(--space-3)}
.sp-cmp thead a{display:block;text-decoration:none}
.sp-cmp tbody th{white-space:normal}
.sp-cmp .sp-group th{background:var(--eggshell);color:var(--navy)}
.sp-fee{color:var(--wine)}
.sp-check{font-weight:700;color:var(--success)}
.sp-more summary{cursor:pointer;list-style-position:inside}
.sp-pop{margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);max-width:320px;font-size:13px;line-height:15px}
.sp-pop img{border-radius:var(--radius-xs);margin:6px 0}
/* Description and FAQ (bottom of stallion pages) */
.sp-desc .prose p{margin:0 0 var(--space-4)}
.sp-updated{font-size:13px;line-height:15px;color:var(--ink-muted);margin:var(--space-3) 0 0}
.sp-faq{margin:0;border-top:1px solid var(--line)}
.sp-faq dt{font-size:16px;line-height:20px;font-weight:700;color:var(--navy);padding-top:var(--space-4)}
.sp-faq dd{margin:var(--space-1) 0 0;padding-bottom:var(--space-4);border-bottom:1px solid var(--line);font-size:16px;line-height:24px}

/* ---- stallion page (Content-blocks: Stallion listing page, rev 11) ----
   /stallion/{slug} only (root .spl; the horse page keeps the .sp styles above). Hero band on eggshell-60 (48px, gutter
   sides): square photo (560 on desktop) and details 64px apart; body: 200px sticky page nav + content 32px to its right,
   sections 48px apart, each starting with a gold eyebrow. Every box, button, card and image uses radius-xs. Mobile: photo
   above the details, the page nav becomes a sticky sideways row with a gold underline. */
.spl-band{background:var(--eggshell-60);padding:var(--space-6) var(--gutter) var(--space-8)}
.spl-hero{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
@media (min-width:768px){.spl-band{padding:var(--space-12) var(--gutter)}.spl-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:center}}
@media (min-width:1200px){.spl-hero{grid-template-columns:560px minmax(0,1fr);gap:var(--space-16)}}
/* hero photo: the Large file at 5:4 (system .stallion-hero-photo, rev 12); no photo: the Dark placeholder at the same ratio */
.spl-photo{position:relative;aspect-ratio:5/4;width:100%;max-width:560px;overflow:hidden;border-radius:var(--radius-xs);background:var(--navy)}
.spl-photo>img,.spl-photo>.placeholder{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:50% 50%;border-radius:0}
.spl-intro .crumbs ol{margin:0 0 var(--space-6)}
.spl-intro .crumbs a{text-decoration:none}
.spl-intro .crumbs a:hover{text-decoration:underline}
.spl-intro .crumbs [aria-current]{color:var(--navy)}
.spl-intro h1{margin:0 0 var(--space-6);font-family:var(--font-serif);font-weight:300;font-size:var(--fs-display);line-height:var(--lh-display);color:var(--navy)}
.spl-line{color:var(--navy);margin:0 0 var(--space-3)}
.spl-ped{font-size:16px;line-height:24px;color:var(--ink);margin:0}
.spl-meta{margin-top:var(--space-8)}
.spl-meta:empty{display:none}
.spl .sp-sub{font-size:14px;line-height:21px;color:var(--ink);margin:0 0 var(--space-3)}
.spl .sp-sub:first-child:not(:last-child){color:var(--ink-muted)}
.spl-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8)}
.spl-actions .iconbtn{border-radius:var(--radius-xs)}
.spl-actions .iconbtn:hover{border-color:var(--navy)}
.spl-intro>p:not([class]){margin:var(--space-6) 0 0}
.spl-claim{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-8) 0 0;color:var(--ink)}
.spl-claim .btn-link{font-size:14px;line-height:20px;font-weight:500}
/* Stallion hero on phones (Michael's Figma update, Nov 2): band 24 top / 32 bottom, 20 sides; breadcrumbs → photo →
   details 24 apart; the detail groups (name group / key facts / action buttons) 48 apart. Desktop unchanged. */
.spl-crumbs-m{display:none}
@media (max-width:767px){
  .spl-band{padding:var(--space-6) 20px var(--space-8)}
  .spl-hero{gap:var(--space-6)}
  .spl-crumbs-m{display:block}.spl-crumbs-m .crumbs ol{margin:0}
  .spl-intro .crumbs{display:none}
  .spl-meta,.spl-actions{margin-top:var(--space-12)}
}

.spl-body{box-sizing:content-box;max-width:var(--content-max);margin:0 auto;padding:var(--space-12) var(--gutter) var(--section-py);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
@media (min-width:1024px){.spl-body{grid-template-columns:200px minmax(0,1fr);gap:var(--space-8)}}
.spl-main{min-width:0;display:flex;flex-direction:column;gap:var(--space-12)}
.spl-sec{scroll-margin-top:calc(var(--site-head) + var(--space-16))}
.spl-sec>.eyebrow{margin:0 0 var(--space-6)}
.spl-sub{color:var(--navy);margin:calc(-1 * var(--space-2)) 0 var(--space-4)}
/* page nav: desktop sticky column with a line on its left edge; the active item is navy label with a 2px gold rule */
.spl .sp-nav ul{list-style:none;margin:0;padding:0}
.spl .sp-nav a{display:block;text-decoration:none;font-size:14px;line-height:21px;font-weight:400;color:var(--ink);border:0;background:none;min-height:0;white-space:nowrap}
.spl .sp-nav a:hover{color:var(--navy)}
.spl .sp-nav a[aria-current]{color:var(--navy);font-size:14px;line-height:21px;font-weight:600}   /* Body S Strong, same size as the others (Nov 2, 19:37) */
@media (min-width:1024px){
  .spl .sp-nav{position:sticky;top:calc(var(--site-head) + var(--space-6))}
  .spl .sp-nav ul{border-left:1px solid var(--line)}
  .spl .sp-nav li{border:0}
  .spl .sp-nav a{padding:var(--space-2) var(--space-4);margin-left:-1px;border-left:2px solid transparent}
  .spl .sp-nav a[aria-current]{border-left-color:var(--gold)}
}
@media (max-width:1023px){
  .spl-side{position:sticky;top:var(--site-head);z-index:5;background:var(--surface);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .spl .sp-nav ul{display:flex;gap:var(--space-6);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);padding:0}
  .spl .sp-nav ul::-webkit-scrollbar{display:none}
  .spl .sp-nav li{flex:0 0 auto}
  .spl .sp-nav a{display:flex;align-items:center;min-height:48px;padding:0;margin-bottom:-1px;border-bottom:2px solid transparent}
  .spl .sp-nav a[aria-current]{border-bottom-color:var(--gold)}
}
/* cards (overview, contacts): white, 1px line, radius-xs, 20px padding */
/* Contact details card (design system .contact-card / .contact-row; src/web/pages/stallion.ts contactCard) */
.contact-card .eyebrow{margin:0 0 var(--space-2)}
.spl-contact-title{color:var(--navy);margin:0}
.contact-row .roles{list-style:none;padding:0}
.contact-row .name{overflow-wrap:anywhere}
.spl-label{color:var(--ink-muted)}
.spl-name{color:var(--navy)}
.spl-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1)}
.spl-notes{font-size:16px;line-height:24px;color:var(--ink)}
.spl .table-wrap{border-radius:var(--radius-xs)}
.ped-legend .ped-dot{margin:0}
.spl .ped-pct{background:none;padding:0;margin:0;font-size:13px;font-weight:700;color:var(--navy)}
/* Super Sires rankings and nominations (data the old page had; same row and tile treatment as the rest of the page) */
.spl-ss{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);align-items:start}
@media (min-width:768px){.spl-ss{grid-template-columns:120px minmax(0,1fr);gap:var(--space-6)}}
.spl-table{border:1px solid var(--line);border-radius:var(--radius-xs);overflow-x:auto;background:var(--surface)}
.spl-table td{padding:var(--space-4);vertical-align:middle;color:var(--ink)}
.spl-table tr:last-child td{border-bottom:0}
.spl-table a{color:var(--navy);text-decoration:none}
.spl-table a:hover{text-decoration:underline}
.spl-table .t-heading-s{color:var(--navy);width:48px}
.spl-progs{list-style:none;margin:0;padding:var(--space-4);display:grid;grid-template-columns:repeat(auto-fill,96px);gap:var(--space-2);background:var(--navy);border-radius:var(--radius-xs)}
.spl-progs .logo-tile{width:96px}
/* highlights: heading-m total, then a body-s list with line dividers */
.spl #highlights .sp-big{font-size:var(--fs-heading-m);line-height:var(--lh-heading-m);font-weight:700;color:var(--navy);margin:calc(-1 * var(--space-2)) 0 var(--space-4)}
.spl #highlights .sp-list{border-top:1px solid var(--line)}
.spl #highlights .sp-list li{font-size:14px;line-height:21px;color:var(--ink);padding:var(--space-3) 0}
.spl #highlights .sp-list li:last-child{border-bottom:1px solid var(--line)}
/* progeny and results tables: header micro gold-text; rows 16px; 40px square photo, name heading-s, the rest body-s */
.spl .sp-table th{color:var(--gold-text);padding:var(--space-3) var(--space-4);background:var(--surface)}
.spl .sp-table td{padding:var(--space-3) var(--space-4);vertical-align:middle;font-size:14px;line-height:21px;color:var(--ink)}
.spl .sp-table tbody tr:last-child td{border-bottom:0}
.spl .sp-table td.muted{color:var(--ink)}
.spl .sp-table a{color:var(--navy);text-decoration:none}
.spl .sp-table a:hover{text-decoration:underline}
.spl .sp-table .sp-strong{font-size:16px;line-height:20px;font-weight:700}
.spl .sp-thumb{width:40px;padding-right:0}
.spl .sp-thumb img,.spl .sp-thumb .placeholder{width:40px;height:40px;border-radius:var(--radius-xs)}
@media (max-width:767px){#progeny .sp-table th:nth-child(3),#progeny .sp-table th:nth-child(4),#progeny .sp-table td:nth-child(4),#progeny .sp-table td:nth-child(5){display:none}}
/* article mentions: 16:10 image, badge, card-title, body-s excerpt, Read more; stacks on mobile */
.spl-photo .booked-full-label{z-index:1}
.spl-photo .spl-claim{position:absolute;left:var(--space-3);bottom:var(--space-3);z-index:1}   /* claim overlay (#131): XSmall Primary, bottom left; accounts only */
/* Stallion hero key facts (DS rev 20, #131 option 1): STUD FEE | Genetics snapshot, 48px from the name group and the actions */
.spl-keyfacts{margin-top:var(--space-12)}
.spl-keyfacts>*{flex:0 1 auto}
.spl-keyfacts .fact>*,.spl-overview .fact>*{margin:0}
.spl-fee .sp-normal{font-weight:400}
.spl-fee-note{color:var(--ink)}
.spl-gsnap{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1)}
.spl-gchip{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
.spl-gchip.is-marker{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.spl-intro .spl-keyfacts~.spl-actions{margin-top:var(--space-12)}
/* Stallion overview (DS rev 20): option C facts, Genetics | Breeding, no boxes */
.spl-overview .fact{gap:var(--space-3)}
.spl-overview .fact .t-caption{color:var(--ink)}
.spl-overview .fact .t-caption a{color:var(--navy)}
/* Article mentions (DS rev 20): heading row + slider of at most 5 Article cards (290px), bleeding off the right edge */
.spl-mentions-head{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}
.spl-mentions-head .eyebrow{margin:0}
.spl-mentions-ctl{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
@media (min-width:768px){.spl-mentions-head{flex-direction:row;align-items:flex-end;justify-content:space-between}.spl-mentions-ctl{justify-content:flex-end;gap:var(--space-6)}}
.spl-art-rail.slider.bleed{margin-right:calc(-1 * max(var(--gutter), (100vw - var(--content-max)) / 2));padding-right:max(var(--gutter), (100vw - var(--content-max)) / 2)}
.spl-art-rail>.article-card{width:290px}
.spl-art-rail .spl-art-pic{aspect-ratio:auto;height:214px}
.spl-art-rail .article-card h3 a{color:inherit;text-decoration:none}
.spl-art-rail .article-card>.badge,.spl-art-rail .article-card>span{align-self:flex-start}
.spl-art-pic{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius-xs);background:var(--eggshell)}
.spl-art-pic>img,.spl-art-pic>.placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* description and FAQ (accordion rows, the first open) */
.spl .sp-desc .prose p{margin:0 0 var(--space-4)}
.spl .sp-updated{margin:var(--space-2) 0 0}
.spl-faq{border-top:1px solid var(--line)}
.spl-faq details{border-bottom:1px solid var(--line)}
.spl-faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;color:var(--navy);cursor:pointer;list-style:none}
.spl-faq summary::-webkit-details-marker{display:none}
.spl-faq summary .chev{flex-shrink:0;color:var(--gold-text);transition:transform .2s}
.spl-faq details[open] summary .chev{transform:rotate(180deg)}
.spl-faq details p{margin:0;padding:0 0 var(--space-4);font-size:16px;line-height:24px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.spl-faq summary .chev{transition:none}}
.spl-foot{display:flex;flex-direction:column;gap:var(--space-2)}
.spl-foot p{margin:0}
/* Breeding calendar in the Breeding card (FEATURE_BREEDING_CALENDAR; breeding-calendar-ui.ts publicCalendar) */
.spl-cal{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line)}
.spl-cal p{margin:0}
/* Booked full by method (booked-full.ts; no system spec yet: design gap): in the Breeding card, a method that's booked
   full reads "Frozen transported semen: booked full for the 2026–27 season" in live-text instead of "… available" */
.spl-full-line{color:var(--live-text);font-weight:600}
/* == stallion end == */

/* == directory start == */
/* shared: filters beside results (stacked on phones) */
.dir-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);padding-top:var(--space-6);padding-bottom:var(--space-5);align-items:start}
@media (min-width:900px){.dir-layout{grid-template-columns:280px minmax(0,1fr);gap:var(--space-8)}.dir-side{position:sticky;top:calc(var(--site-head) + var(--space-3))}}
.dir-filter-box>summary{display:none}
@media (max-width:899px){
  .dir-filter-box{border:1px solid var(--line);padding:0 var(--space-4)}
  .dir-filter-box>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:16px;line-height:20px;font-weight:700;color:var(--navy);cursor:pointer;list-style:none}
  .dir-filter-box>summary::-webkit-details-marker{display:none}
  .dir-filter-box>summary::after{content:"+";font-size:20px;line-height:24px}.dir-filter-box[open]>summary::after{content:"–"}
  .dir-filter-box[open]{padding-bottom:var(--space-4)}
}
.dir-form{display:flex;flex-direction:column;gap:var(--space-3)}
.dir-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:18px;font-weight:600;color:var(--navy)}
.dir-form input[type=text],.dir-form select{min-height:48px;border:1px solid var(--stone-line);border-radius:var(--radius-xs);padding:0 var(--space-3);font:inherit;font-size:16px;background:var(--surface);color:var(--ink);width:100%;min-width:0}
.dir-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.dir-tools{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between}
.dir-main .count{margin:var(--space-3) 0 0}
.dir-empty{padding:var(--space-8) 0}
/* == stallions at stud (/listing, directory-listing.ts; rev 12 Content-blocks "Stallions at Stud", Figma 138:340 / 138:710) ==
   System pieces: .page-header, .filter-panel.sidebar, .filter-disclosure + .gene-panel/.gene-row, .select-xs, .checkbox,
   .dir-toolbar, .pagination.compact, .compare-strip, .dir-row / .dir-featured, .promo, .pagination. Only their layout here. */
.sl-band .crumbs ol{margin:0}
.sl-layout{display:flex;flex-direction:row;align-items:flex-start;gap:var(--space-8)}
.sl-side{width:288px;flex-shrink:0}
.sl-side .filter-panel.sidebar{position:static;width:auto}
.sl-filters>summary{display:none}
.sl-filters .filter-panel h2.eyebrow{margin:0}
.sl-filters select.input,.sl-sort select.input{appearance:none;padding-right:calc(var(--space-3) + 28px);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151934' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--space-3) center/20px;cursor:pointer;min-width:0}
.sl-filters select.input.select-xs,.sl-sort select.input.select-xs{min-height:28px;padding:var(--space-1) var(--space-6) var(--space-1) var(--space-2);font-size:13px;line-height:18px;font-weight:600;background-size:16px;background-position:right var(--space-2) center}
.sl-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.sl-pair .btn{padding:0 var(--space-3)}
.sl-genes .filter-disclosure .title,.sl-genes .filter-disclosure .helper{color:var(--on-dark)}
.sl-genes .gene-row .gene-label{font-size:13px;line-height:15px;color:var(--ink);font-weight:400}
.sl-genes .gene-list[hidden]{display:none}
.sl-genes.closed{border:0;background:none}
.sl-genes.closed .filter-disclosure{border-radius:var(--radius-xs)}
.sl-genes .filter-disclosure .chev i{display:grid;place-items:center;transition:transform .15s ease-out}
.sl-genes .filter-disclosure[aria-expanded="false"] .chev i{transform:rotate(180deg)}
.sl-genes .filter-disclosure[aria-expanded="true"] .chev i{transform:none}
.sl-checks{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.sl-checks legend.eyebrow{margin:0 0 var(--space-2);padding:0}
.sl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.sl-toolbar{min-height:28px}
.sl-toolbar .pagination{margin:0}
.sl-count{font-size:14px;line-height:21px;color:var(--ink-muted);margin:0}
.sl-count-m,.sl-pager-m{display:none}
.sl-sort select.input{width:200px}
.sl-chip{border:1px solid var(--stone-line);cursor:pointer;font:inherit;font-size:13px;line-height:18px;font-weight:600;background:var(--surface)}
.compare-strip .btn.disabled{opacity:.4}
.sl-cmp-count{color:var(--navy);white-space:nowrap}
.sl-results>.dir-row:first-child,.sl-results>.dir-featured:first-child{margin-top:0}
.dir-featured{margin-bottom:var(--space-6)}
.sl-cmp{padding-top:var(--space-1);margin-left:var(--space-3)}
.sl-pic{flex:0 0 165px;display:block}
.sl-pic img,.sl-pic .placeholder{display:block;width:165px;height:165px;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;border-radius:var(--radius-xs)}
.sl-info{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-6);align-content:start}
.sl-info>*{grid-column:1;margin:0}
.sl-badge{margin:0 0 var(--space-2)!important}
.sl-name{font-family:var(--font-serif);font-weight:300;font-size:var(--fs-title);line-height:var(--lh-title);color:var(--navy)}
.sl-name a{color:inherit;text-decoration:none}
.sl-line{color:var(--ink)}
.sl-fee{grid-column:2!important;grid-row:1 / span 4;text-align:right;display:flex;flex-direction:column;align-items:flex-end;color:var(--navy);white-space:nowrap}
.sl-fee .t-micro{text-transform:uppercase}
.sl-tests{margin-top:var(--space-3)!important;color:var(--ink)}
.sl-tests p{margin:0}
.sl-results .promo{margin:var(--space-6) 0}
.sl-empty{padding:var(--space-8) 0}
.sl-empty h2{margin:0 0 var(--space-2)}
.sl-main>.pagination{margin-top:var(--space-4)}
@media (max-width:1023px){
  .sl-layout{flex-direction:column;align-items:stretch;gap:var(--space-6)}
  .sl-side{width:auto;position:static}
  .sl-filters>summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-xs);font-size:16px;line-height:20px;font-weight:600;color:var(--navy);cursor:pointer;list-style:none;background:var(--surface)}
  .sl-filters>summary::-webkit-details-marker{display:none}
  .sl-filters>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 var(--space-1) var(--space-1) 0}
  .sl-filters[open]>summary::after{transform:rotate(-135deg);margin-bottom:0}
  .sl-filters>summary:hover{color:var(--gold-text)}
  .sl-filters[open]>summary{margin-bottom:var(--space-6)}
}
@media (max-width:767px){
  .sl-toolbar{flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .sl-toolbar .left{display:none}
  .sl-sort,.sl-sort label,.sl-sort select.input{width:100%}
  .sl-count-m,.sl-pager-m{display:block}
  .sl-pager-m .pagination{margin:0}
  .compare-strip{flex-wrap:wrap}
  .dir-row{flex-wrap:wrap;gap:var(--space-4)}
  .sl-cmp{margin-left:0}
  .sl-pic{flex:1 1 calc(100% - 40px)}
  .sl-pic img,.sl-pic .placeholder{width:100%;height:auto}
  .sl-info{flex-basis:100%;display:flex;flex-direction:column}
  .sl-name{font-weight:400;font-size:var(--fs-card-title);line-height:var(--lh-card-title)}
  .sl-fee{flex-direction:row;align-items:baseline;gap:var(--space-1);text-align:left;margin-top:var(--space-1)!important}
}
/* == stallions at stud end == */
.promo.promo-v2{background:var(--eggshell);color:var(--navy);border-radius:var(--radius-xs)}
.promo.promo-v2 .promo-desc{color:var(--ink)}
/* Navy promo card (Stallions at Stud ad spot): the heading is white; the site-wide h2 colour made it navy on navy (Nov 3) */
.promo:not(.promo-v2) .promo-title{color:var(--on-dark)}
/* horses table */
.dir-horses td:first-child a{text-decoration:none}

/* ---- home (Content-blocks.md) ---- */
/* Hero (Figma "Home" v2, 1440x800 / 375x600): full-bleed from y=0 behind the fixed header. Gradient from 30% (25% on
   desktop) to navy. Bottom-left stack, 12px gaps: eyebrow "Feature stallion" (gold), name display-xl on one line where it
   fits, "Discover more" link (48px, arrow right after the text), then the 48px controls row: dots on the left, Carousel
   controls on the right (Outline 48px icon buttons Pause, Previous, the "1 / n" count from 768px, Next; 8px gaps).
   Column: 20px gutters and 24px from the bottom on mobile; the 1200px column (x=120 at 1440) and 72px on desktop. */
.dir-hero{--hero-x:var(--space-5);--hero-b:var(--space-6);position:relative;background:var(--navy);color:var(--on-dark)}
.dir-hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.dir-hero-track::-webkit-scrollbar{display:none}
.dir-hero-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;height:600px;overflow:hidden;background:var(--eggshell)}
.dir-hero-slide img,.dir-hero-slide>.placeholder{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.dir-hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,25,52,0) 30%,var(--navy) 100%)}
.dir-hero-cap{position:absolute;left:var(--hero-x);right:var(--hero-x);bottom:calc(var(--hero-b) + 48px + var(--space-3));z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.dir-hero.single .dir-hero-cap{bottom:var(--hero-b)}
.dir-hero-cap .eyebrow{color:var(--gold);margin:0}
.dir-hero-name{font-family:var(--font-serif);font-weight:300;font-size:var(--fs-display-xl);line-height:var(--lh-display-xl);color:var(--on-dark);margin:0;overflow-wrap:anywhere}
/* inline, so a wrapped label keeps the arrow right after its last word instead of at the far edge */
.dir-hero-cap .btn-link{display:block;color:var(--on-dark);padding:var(--space-3) 0;min-height:48px;line-height:24px;border:0}
.dir-hero-cap .btn-link .arrow{display:inline-block;vertical-align:top;margin:0 0 0 var(--space-3)}
.dir-hero-bar{position:absolute;left:var(--hero-x);right:var(--hero-x);bottom:var(--hero-b);z-index:2;height:48px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);pointer-events:none}
.dir-hero-bar>*{pointer-events:auto}
.dir-hero-ctl{gap:var(--space-2);margin-left:auto}
/* the first (10px) dot lines up with the text column: pull the row left by the 24px target's inset */
.dir-hero .dots{margin-left:calc((10px - 24px) / 2)}
.dir-hero-ctl .iconbtn[hidden]{display:none}
.dir-hero-count{white-space:nowrap} /* the system's .carousel-controls.on-photo .counter */
@media (min-width:992px){
  .dir-hero{--hero-x:max(120px,calc((100% - 1200px) / 2));--hero-b:calc(var(--space-16) + var(--space-2))}
  .dir-hero-slide{height:800px}
  .dir-hero-slide::after{background:linear-gradient(180deg,rgba(21,25,52,0) 25%,var(--navy) 100%)}
}
/* Ticker: white strip, hairline below; body/ink, 64px apart (body-s, 40px on mobile); pauses on hover */
.dir-ticker{display:flex;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);white-space:nowrap}
.dir-ticker-view{flex:1;min-width:0;overflow:hidden}
/* the pause / play control (gap: Pause control): the system iconbtn at the strip's right end, sharing the strip's hairline */
.dir-ticker .iconbtn{border-width:0 0 0 1px;align-self:center}
.dir-ticker .iconbtn[hidden]{display:none}
.dir-ticker-in{display:inline-flex;gap:calc(var(--space-8) + var(--space-2));padding:var(--space-5);font-size:14px;line-height:21px}
.dir-ticker-in a{text-decoration:none;color:var(--ink)}
.dir-ticker-in a:hover{color:var(--navy);text-decoration:underline}
@media (min-width:1024px){.dir-ticker-in{gap:var(--space-16);font-size:16px;line-height:24px}}
.dir-ticker-in.run{animation:dir-tick 90s linear infinite}
.dir-ticker-view:hover .dir-ticker-in.run,.dir-ticker-view:focus-within .dir-ticker-in.run,.dir-ticker.held .dir-ticker-in.run,.dir-ticker.paused .dir-ticker-in.run{animation-play-state:paused}
@keyframes dir-tick{to{transform:translateX(-50%)}}
.dir-ticker:not(:has(.run)) .dir-ticker-view,.dir-ticker.paused .dir-ticker-view{overflow-x:auto;scrollbar-width:none}
.dir-home .eyebrow{margin:0}
/* Site search (bundle .site-search + .search-group, SearchGroup preview markup: eyebrow, title, line and form 24px apart) */
.site-search .eyebrow{margin:0}
.site-search .title{color:inherit}
.search-group input[type=search]{-webkit-appearance:none;appearance:none}
.search-group input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.article-search{max-width:800px;margin:var(--space-6) 0}
.dir-search-results{gap:var(--space-8)}
.dir-search-group{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.dir-search-group h2,.dir-search-group p{margin:0}
.dir-search-group .link-list{align-self:stretch}
/* Latest articles: "Browse by topic" on its own line, then the chips, a 1px line divider and the Light carousel controls in
   one row; on phones the label and the controls share the first line and the chips scroll underneath. The cards are a
   .slider.bleed (Content-blocks › Card sliders bleed right): 360px cards (290 on phones), 3 + a peek. */
.dir-topics{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "rail ctl";align-items:center;column-gap:var(--space-4);row-gap:var(--space-3)}
.dir-topic-label{grid-area:label;margin:0}
.dir-topics .rail{grid-area:rail;gap:var(--space-2)}
.dir-topics .carousel-ctl{grid-area:ctl;border-left:1px solid var(--line);padding-left:var(--space-4)}
@media (max-width:767px){.dir-topics{grid-template-areas:"label ctl" "rail rail"}.dir-topics .carousel-ctl{border-left:0;padding-left:0}}
.dir-articles>.article-card{width:360px}
@media (max-width:767px){.dir-articles>.article-card{width:290px}}
.article-card .badge{align-self:flex-start}
.article-card h3 a{color:inherit;text-decoration:none}
.article-card .btn-link{align-self:flex-start}
.article-card>a:first-child{display:block}
.dir-art-panel[hidden]{display:none}
/* stallion cards (photo on top, text below) in the paid grid */
.stallion-grid .stallion-card .info{overflow-wrap:anywhere}
/* How it works: three Steps, 32px apart: 20px, the illustration, heading-m, body. The Step's 2px gold top rule is hidden
   in the frames (Figma Step stroke off), so there is none here (Content-blocks still describes one). */
.dir-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);list-style:none;margin:0;padding:0}
@media (min-width:1024px){.dir-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dir-step{display:flex;flex-direction:column;gap:var(--space-3)}
.dir-step img{display:block;width:100%;height:auto;aspect-ratio:411/220}
.dir-step h3{margin:0;font-size:var(--fs-heading-m);line-height:var(--lh-heading-m)}
.dir-step p{margin:0}
/* Featured stallion: eggshell panel (radius-xs), square photo left half (on top on phones), details 16px apart with
   48 / 64px padding (32 / 24 on phones). The slider's controls sit in the details, right of "View profile" (left-aligned
   after it on phones). */
.dir-feature-track{gap:var(--space-4)}
.dir-feature-track>.dir-feature{width:100%}
.dir-feature{display:grid;grid-template-columns:minmax(0,1fr);background:var(--eggshell);border-radius:var(--radius-xs);overflow:hidden}
.dir-feature-pic{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--eggshell)}
.dir-feature-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.dir-feature-body{padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);min-width:0}
.dir-feature-body h2,.dir-feature-body p{margin:0}
.dir-feature-actions{align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
@media (min-width:1024px){
  .dir-feature{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
  .dir-feature-body{padding:var(--space-12) var(--space-16);justify-content:center}
  .dir-feature-actions{justify-content:space-between}
}
/* Latest show results (Show result row): header micro in gold-text, 12px vertical padding; rows 16px with a 1px line rule
   on top; 24px gaps and side padding; data rows start 4px in, so the 72px logo tile sits near the edge (the SHOW header
   starts after the tile, at 120px). */
.dir-shows{width:100%;border-collapse:collapse}
.dir-shows th{padding:var(--space-3) 0;border-bottom:0;background:none;color:var(--gold-text)}
.dir-shows td{border-bottom:0;border-top:1px solid var(--line);padding:var(--space-4) 0;vertical-align:middle}
.dir-shows th+th,.dir-shows td+td{padding-left:var(--space-6)}
.dir-shows th:first-child{padding-left:calc(var(--space-6) + 72px + var(--space-6))}
.dir-shows td:first-child{padding-left:var(--space-1)}
.dir-shows th:last-child,.dir-shows td:last-child{padding-right:var(--space-6)}
.dir-shows{table-layout:auto}
/* border-box cells: each fixed width is the column plus the 24px gap before it (and the 24px side padding on the last) */
.dir-shows th.num,.dir-shows td.num{width:calc(120px + var(--space-6))}
.dir-shows th:last-child,.dir-shows td:last-child{width:calc(120px + 2 * var(--space-6))}
.dir-shows .dir-col-loc{width:calc(300px + var(--space-6))}
.dir-shows .dir-show-name{display:flex;align-items:center;gap:var(--space-6)}
.dir-shows .dir-show-name a{text-decoration:none;font-size:16px;line-height:20px;font-weight:700;color:var(--navy)}
.dir-shows .num{font-size:16px;line-height:20px;font-weight:700;color:var(--navy)}
.dir-shows th.num{font-size:11px;line-height:14px;color:var(--gold-text)}
.dir-shows td.dir-col-loc{color:var(--ink)}
.dir-logo{display:block;flex-shrink:0;width:72px;height:72px;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface) center/contain no-repeat;background-origin:content-box;padding:var(--space-2)}
.dir-show-loc{display:block}
@media (max-width:1023px){
  .dir-shows .dir-logo,.dir-shows .dir-col-loc{display:none}
  /* mobile: SHOW · HORSES · CLASSES, 64px count columns, 12px gaps and padding; the name over the location */
  .dir-shows th+th,.dir-shows td+td{padding-left:var(--space-3)}
  .dir-shows th:first-child,.dir-shows td:first-child{padding-left:var(--space-3)}
  .dir-shows th:last-child,.dir-shows td:last-child{padding-right:var(--space-3)}
  .dir-shows th.num,.dir-shows td.num{width:calc(64px + var(--space-3))}
  .dir-shows th:last-child,.dir-shows td:last-child{width:calc(64px + 2 * var(--space-3))}
  .dir-shows .dir-show-loc{margin-top:var(--space-1)}
}
@media (min-width:1024px){.dir-shows .dir-show-name .dir-show-loc{display:none}}
/* Super Sires dashboard: the 440px square logo tile, eyebrow, title and the Link list left (24px apart); 64px; the top 10
   standings (Result rows with 64px photos) right */
.dir-ss{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--block-gap)}
@media (min-width:1024px){.dir-ss{grid-template-columns:440px minmax(0,1fr);gap:var(--space-16);align-items:start}}
.dir-ss-intro{display:flex;flex-direction:column;gap:var(--space-6)}
.dir-ss-intro h2{margin:0}
.dir-ss-img{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--radius-xs)}
/* header micro / ink-muted with 12px below; rows 16px / 8px padding, 12px gap, 1px line bottom border */
.dir-standings-h{display:flex;justify-content:space-between;color:var(--ink-muted);margin:0;padding:0 0 var(--space-3)}
.dir-standings{list-style:none;margin:0;padding:0}
.dir-standings .item{padding:var(--space-4) var(--space-2);gap:var(--space-3);border-bottom:1px solid var(--line)}
.dir-standings .place{min-width:28px;width:auto}
.dir-standings-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.dir-standings .item-name{font-size:16px;line-height:20px}
.dir-standings .item-info{color:var(--ink)}
.dir-standings .item-photo.placeholder{display:block}
.dir-standings b{font-size:16px;line-height:20px;font-weight:700;color:var(--navy);white-space:nowrap}
@media (max-width:767px){.dir-standings .dir-ped{display:block}.dir-standings .dir-sep{display:none}}
/* In loving memory: heading, three Memorial cards (24px gaps) with 32px under them and a line-strong rule, then the intro
   (720px) and the reach-out line side by side. Phones: heading, intro, the cards as a .slider.bleed of 260px cards with
   24px above and below and the same rule, then the reach-out line stacked. */
.dir-memory-box{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "cards" "honour";gap:var(--block-gap)}
.dir-memory-intro{grid-area:intro;margin:0}
.dir-memory-row{grid-area:cards;min-width:0;padding:var(--space-6) 0;border-bottom:1px solid var(--line-strong)}
.dir-memory>.memorial-card{width:260px}
.dir-honour{grid-area:honour;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1)}
.dir-honour p{margin:0}
/* a Small Link button: .btn-sm comes after .btn-link in the bundle and puts its side padding back (gaps.md) */
.dir-honour .btn-link{padding:0}
@media (min-width:768px){
  .dir-memory-box{grid-template-columns:minmax(0,720px) minmax(0,1fr);grid-template-areas:"cards cards" "intro honour";align-items:start}
  .dir-memory-row{padding:0 0 var(--space-8)}
  /* three across, not a slider: the bleed's run to the screen edge is only for the phone slider */
  .dir-memory.slider.bleed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-right:0;padding-right:0;overflow:visible}
  .dir-memory>.memorial-card{width:auto}
  .dir-honour{flex-direction:row;align-items:center;justify-content:flex-end}
}
/* Programs and submit: the system's .programs-panel and .logo-grid / .logo-tile, then two CTA cards (24px apart) */
.programs-panel .title{color:inherit}
.logo-grid{list-style:none;margin:0;padding:0}
.logo-grid>li{display:block;min-width:0}
/* the frames' Program logo tiles are square-cornered on the radius-xs panel (Figma 44:600 / 44:1459) */
.logo-tile>.placeholder{width:100%;height:100%}
.dir-submit{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
@media (min-width:1024px){.dir-submit{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
.cta-card .eyebrow,.cta-card p{margin:0}
.cta-card .btn{align-self:flex-start}
/* Figma (Button Style=Outline, CTA card 30:411): the outline button has no fill, so it sits on the card's eggshell;
   CTA titles are Larken Regular (400). The system bundle still says surface / 300 (gaps.md). */
/* Recently added stallions: heading row (Section heading, then the controls 24px right, bottom-aligned; stacked 16px on
   phones); desktop a .slider.bleed of 270px small cards, phones a list of large cards, four at a time (site.js data-window) */
.dir-recent-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.dir-recent-head .sec-head{margin:0;align-self:stretch}
@media (min-width:768px){.dir-recent-head{flex-direction:row;align-items:flex-end;gap:var(--space-6)}.dir-recent-head .sec-head{flex:1;min-width:0}}
.dir-recent>.stallion-card{width:270px}
@media (min-width:768px){.dir-recent .pedigree{display:none}}
@media (max-width:767px){.dir-recent>.stallion-card{width:260px}}
.dir-recent-list{display:flex;flex-direction:column;gap:var(--space-4)}
.dir-recent-list>[hidden]{display:none}
@media (max-width:767px){.dir-wide{display:none!important}}
@media (min-width:768px){.dir-narrow{display:none!important}}
/* Latest horses added (Horse table row): five equal columns, 24px gaps and side padding, header micro gold-text 12px /
   rows 16px vertical padding, a 1px line under every row. Phones: no header; each row is the name over one body-s
   sentence, 4px apart, 16 / 12px padding. */
.dir-horse-table{width:100%;border-collapse:collapse;table-layout:fixed}
.dir-horse-table th{background:none;padding:var(--space-3) var(--space-6) var(--space-3) 0;border-bottom:1px solid var(--line);color:var(--gold-text)}
.dir-horse-table td{padding:var(--space-4) var(--space-6) var(--space-4) 0;vertical-align:middle;color:var(--ink);border-bottom:1px solid var(--line)}
.dir-horse-table th:first-child,.dir-horse-table td:first-child{padding-left:var(--space-6)}
/* five equal columns: each border-box cell is a fifth of what is left after the 24px gaps and side padding, plus its own padding */
.dir-horse-table th{width:calc((min(var(--content-max), 100vw - 2 * var(--gutter)) - 6 * var(--space-6)) / 5 + var(--space-6))}
.dir-horse-table th:first-child{width:calc((min(var(--content-max), 100vw - 2 * var(--gutter)) - 6 * var(--space-6)) / 5 + 2 * var(--space-6))}
/* (calc() mixing % and px is ignored on table cells, so the width comes from the column: min(content-max, 100vw - gutters)) */
.dir-horse-table tr:last-child td{border-bottom:1px solid var(--line)}
.dir-horse-table td:first-child a{font-size:16px;line-height:20px;font-weight:700;color:var(--navy);text-decoration:none}
.dir-horse-line{display:none}
@media (max-width:1023px){
  .dir-horse-table thead{display:none}
  .dir-horse-table td:not(:first-child){display:none}
  .dir-horse-table td,.dir-horse-table td:first-child{padding:var(--space-4) var(--space-3)}
  .dir-horse-line{display:block;margin-top:var(--space-1);color:var(--ink)}
}
/* /obituaries: the same Memorial cards in the grid */
.obits>.memorial-card{width:auto}
/* Horses for sale (market-promo.ts): heading row as Recently added stallions (.dir-recent-head), then the marketplace's
   Sale horse cards (bundle .sale-card) in a .slider.bleed: 270px (260 on phones, so the next card peeks in) */
.dir-promo>.sale-card{width:270px}
@media (max-width:767px){.dir-promo>.sale-card{width:260px}}
/* == directory end == */

/* == content start == */
/* articles, archive, obituaries, programs, legal pages */
.content{padding-top:var(--space-6)}
.break{overflow-wrap:anywhere}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:13px;line-height:15px;color:var(--ink-muted);margin-bottom:var(--space-1)}
.post-title{display:block;color:var(--navy);font-size:var(--fs-heading-m);line-height:var(--lh-heading-m);font-weight:700}
.post-title.lg{font-family:var(--font-serif);font-size:var(--fs-card-title);line-height:var(--lh-card-title);font-weight:400}
.post-summary{display:block;font-size:14px;line-height:21px;color:var(--ink-muted);margin-top:var(--space-1)}
.thumb{display:block;border-radius:var(--radius-xs);overflow:hidden;background:var(--eggshell);aspect-ratio:4/3}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lead-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:end}
@media (min-width:900px){.lead-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.lead-post{position:relative;display:block;border-radius:var(--radius-xs);overflow:hidden;background:var(--navy);text-decoration:none;aspect-ratio:4/3}
.lead-post img,.lead-post>.placeholder{width:100%;height:100%;object-fit:cover;display:block}
.lead-text{position:absolute;inset:auto 0 0 0;padding:var(--space-6);background:linear-gradient(180deg,rgba(21,25,52,0) 0%,var(--navy) 100%);color:var(--on-dark);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.lead-text .post-meta{color:var(--on-dark-muted)}
.lead-title{font-family:var(--font-serif);font-size:var(--fs-title);line-height:var(--lh-title);font-weight:300;color:var(--on-dark)}
.lead-more{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--on-dark)}
.post-mini{list-style:none;margin:0;padding:0}
.post-mini li{border-bottom:1px solid var(--line)}
.post-mini a{display:grid;grid-template-columns:110px 1fr;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;text-decoration:none}
.post-mini a:hover .post-title,.post-list a:hover .post-title,.side-posts a:hover .post-title{text-decoration:underline}
@media (max-width:519px){.hide-sm{display:none}}
/* topic chips with post counts (TopicChip) */
.cat-tiles{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-8) 0}
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-top:1px solid var(--line)}
.post-list.archive li{border-top:0;border-bottom:1px solid var(--line)}
.post-list a{display:grid;grid-template-columns:96px 1fr;gap:var(--space-3);align-items:center;padding:var(--space-4) 0;text-decoration:none}
@media (min-width:600px){.post-list a{grid-template-columns:160px 1fr;gap:var(--space-5);padding:var(--space-6) 0}}
.post-list.archive a{grid-template-columns:1fr;padding:var(--space-6) 0}
.author{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);border-top:1px solid var(--line);margin-top:var(--space-8);padding-top:var(--space-6)}
@media (min-width:520px){.author{grid-template-columns:120px 1fr}}
.author img,.author>.placeholder{border-radius:var(--radius-xs);width:120px;height:120px;object-fit:cover}
.author-name{font-size:16px;line-height:20px;font-weight:700;color:var(--navy);margin:0}
.article-side .eyebrow{margin-top:var(--space-6)}
.cat-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.side-posts{list-style:none;margin:0;padding:0}
.side-posts li{display:grid;grid-template-columns:90px 1fr;gap:var(--space-3);align-items:center;border-top:1px solid var(--line);padding:var(--space-3) 0}
.side-posts a{text-decoration:none}
.side-posts .post-title{font-size:14px;line-height:21px}
/* topic band on the article and archive pages (tint-<topic>) */
.band[class*="tint-"] .eyebrow{color:inherit}
.band .badge{vertical-align:middle;margin-left:var(--space-2)}
/* obituaries: stallion photo cards */
.obits .memorial-card .name{overflow-wrap:anywhere}
@media (min-width:640px){.grid.sm.obits{grid-template-columns:repeat(3,minmax(0,1fr))}}
.programs-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);padding-top:var(--space-6)}
@media (min-width:900px){.programs-layout{grid-template-columns:260px minmax(0,1fr);gap:var(--space-8)}.programs-side{position:sticky;top:calc(var(--site-head) + var(--space-6));align-self:start}}
.filter-box summary{cursor:pointer;list-style:none}
.filter-box summary::-webkit-details-marker{display:none}
.filters.stacked{flex-direction:column;align-items:stretch}
.filters.stacked input,.filters.stacked select{min-width:0;width:100%}
.programs-table td{vertical-align:middle}
.program-row[data-href]{cursor:pointer}
.program-row:hover{background:var(--eggshell-60)}
.program-name{font-weight:700;text-decoration:none}
.program-logo{display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:var(--space-2);border-radius:var(--radius-xs);background:var(--surface);border:1px solid var(--line)}
.program-logo img{max-width:100%;max-height:100%;object-fit:contain}
.program-logo.lg{width:100%;height:auto;aspect-ratio:1;padding:var(--space-6);margin-bottom:var(--space-4)}
.program-logo.placeholder{display:block;background:var(--eggshell);border-color:transparent}
.program .program-info hr{border:0;border-top:1px solid var(--line);margin:var(--space-4) 0}
.program .strong{font-weight:700;color:var(--navy);margin:0}
.profile.program{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.profile.program{grid-template-columns:minmax(220px,300px) minmax(0,1fr)}}
.enrolled{list-style:none;margin:0;padding:0}
.enrolled li{display:grid;grid-template-columns:48px 1fr;gap:var(--space-4);align-items:center;border-top:1px solid var(--line);padding:var(--space-4) 0}
.enrolled .enrolled-pic{width:48px;height:48px;object-fit:cover;border-radius:var(--radius-xs)}
.enrolled h3{margin:0 0 2px}
.enrolled h3 a{text-decoration:none}
.enrolled p{margin:0}
.enrolled-fee{font-weight:700;color:var(--navy);grid-column:2;text-align:left;white-space:nowrap}
@media (min-width:520px){.enrolled li{grid-template-columns:64px 1fr auto}.enrolled .enrolled-pic{width:64px;height:64px}.enrolled-fee{grid-column:auto;text-align:right}}
.fee-amt{color:var(--wine)}.fee-cur{font-weight:400;color:var(--ink-muted)}
.legal-h{font-size:var(--fs-heading-m);line-height:var(--lh-heading-m);margin:var(--space-8) 0 var(--space-2)}
/* == content end == */

/* == forms start == */
.f-form{padding-top:var(--space-6);padding-bottom:var(--space-6)}
.f-form [hidden]{display:none!important}
.f-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);padding:var(--space-5) 0;border-bottom:1px solid var(--line)}
.f-sec:last-child{border-bottom:0}
@media (min-width:800px){.f-sec{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-8)}}
.f-aside{background:var(--eggshell);border-radius:var(--radius-xs);padding:var(--space-5) var(--space-6);align-self:start}
.f-aside p{margin:0 0 6px}.f-aside p:last-child{margin:0}
.f-fields{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.f-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.f-field>label,.f-label,.f-group>legend{font-size:13px;line-height:18px;font-weight:600;color:var(--navy)}
.f-group{border:0;padding:0;margin:0}
.f-group>legend{padding:0;margin-bottom:var(--space-2)}
/* native inputs take the system .input values */
.f-form input[type=text],.f-form input[type=email],.f-form input[type=tel],.f-form input[type=url],.f-form input[type=number],.f-form input[type=search],.f-form select,.f-form textarea{
  width:100%;min-height:48px;border:1px solid var(--stone-line);border-radius:var(--radius-xs);padding:var(--space-3);font:inherit;font-size:16px;line-height:24px;color:var(--ink);background:var(--surface)}
.f-form select[multiple]{padding:6px}
.f-form textarea{min-height:120px;resize:vertical}
.f-form input:focus,.f-form select:focus,.f-form textarea:focus{outline:0;border-color:var(--ink-muted);box-shadow:0 0 0 4px rgba(180,170,160,.35)}
.f-form input[type=file]{font:inherit;font-size:14px;max-width:100%}
.f-group>input+input{margin-top:var(--space-2)}
.f-choices{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.f-choice{display:inline-flex;align-items:flex-start;gap:var(--space-2);font-size:16px;line-height:24px;font-weight:400;color:var(--ink);cursor:pointer}
.f-choice input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--navy);flex:none}
.f-sub{background:var(--eggshell);border-radius:var(--radius-xs);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-2)}
.f-subhead{font-size:12px;line-height:18px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold-text);margin:0}
.f-subbody{display:flex;flex-direction:column;gap:var(--space-3)}
.f-hint{font-size:13px;line-height:15px;color:var(--ink-muted);margin:0}
.f-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.f-row>label:first-child{font-size:13px;line-height:18px;font-weight:600;color:var(--navy)}
.f-inline{display:flex;gap:var(--space-2)}.f-inline>select{max-width:140px}
.f-cols2,.f-cols3,.f-cols4{display:grid;gap:var(--space-3);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.f-cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.f-cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.f-cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.f-cols4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.f-scroll{max-height:220px;overflow-y:auto;border:1px solid var(--stone-line);border-radius:var(--radius-xs);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.f-search{margin-bottom:6px}
.f-form hr{border:0;border-top:1px solid var(--line);margin:var(--space-1) 0;width:100%}
.req{color:var(--wine);padding-left:var(--space-1)}
/* alerts are the system notes */
.f-alert{border-radius:var(--radius-xs);padding:var(--space-3) var(--space-4);font-size:14px;line-height:21px;font-weight:400;margin:0 0 var(--space-1)}
.f-alert.err{background:var(--live-tint);color:var(--live-text)}
.f-alert.ok{background:var(--success-tint);color:var(--success)}
.f-submit{width:100%}
.f-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.f-js .f-nojs{display:none!important}
.f-js-only{display:none}.f-js .f-js-only{display:block}
.f-js label.f-js-only{display:inline-flex}
.f-thanks{padding:var(--space-16) 0}
.f-summary h2{margin-top:var(--space-4)}.f-summary h2:first-child{margin-top:0}
.f-summary pre{white-space:pre-wrap;font-family:inherit;margin:0 0 var(--space-2)}
/* == forms end == */

/* == results start == */
.results-list .filters label{flex:1 1 180px}
.results-list .filters input,.results-list .filters select{min-width:0;width:100%}
.results-table tr.program-row{cursor:pointer}
.results-table tr.program-row:hover td{background:var(--eggshell-60)}
.results-table a{text-decoration:none}
.sr-logo{width:64px}
.sr-logo img{display:block;width:48px;height:48px;object-fit:contain;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);padding:var(--space-1)}
@media (min-width:640px){.sr-logo{width:96px}.sr-logo img{width:72px;height:72px;padding:var(--space-2)}}
.sr-show{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding-top:var(--space-8);padding-bottom:var(--space-4)}
@media (min-width:900px){.sr-show{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--space-8)}}
.sr-show-logo{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);padding:var(--space-6);margin-bottom:var(--space-5);max-width:260px}
.sr-show-logo img{display:block;width:100%;height:auto;margin:0 auto}
.sr-aside .dl-facts{grid-template-columns:1fr;gap:var(--space-1)}
.sr-aside .dl-facts dd{margin-bottom:var(--space-3);font-size:14px;line-height:21px;font-weight:400;color:var(--ink)}
.sr-main caption{caption-side:top;text-align:left;padding:var(--space-3);font-size:16px;line-height:20px;font-weight:700;color:var(--navy);background:var(--eggshell);border-bottom:1px solid var(--line)}
.sr-main .sr-gap{margin-top:var(--space-6)}
.sr-class td p{margin:2px 0 0}
/* == results end == */

/* == supersires start == */
.ss{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding-top:var(--space-6);padding-bottom:var(--space-4)}
.ss-aside{display:flex;flex-direction:column;gap:var(--space-4)}
@media (min-width:900px){.ss{grid-template-columns:240px minmax(0,1fr);gap:var(--space-8)}.ss-aside{position:sticky;top:calc(var(--site-head) + var(--space-5));align-self:start}}
.ss-side ul{list-style:none;margin:0;padding:0}
.ss-side a{text-decoration:none;font-size:13px;line-height:18px;font-weight:600;color:var(--ink)}
.ss-side a:hover,.ss-side a[aria-current]{color:var(--gold-text)}
@media (min-width:900px){.ss-side li{border-bottom:1px solid var(--line)}.ss-side a{display:block;padding:var(--space-3) 2px}}
@media (max-width:899px){
  .ss-side ul{display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .ss-side a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--stone-line);background:var(--surface)}
}
.ss-years .tags{list-style:none;margin:0;padding:0}
.ss-years .chip{min-height:36px}
.ss-filter{flex-direction:column;align-items:stretch;margin:0}
.ss-filter input,.ss-filter select{min-width:0;width:100%}
.ss-sec{margin:0 0 var(--space-8)}
.ss-sec h2{margin-bottom:var(--space-2)}
.ss-more{margin:var(--space-3) 0 0}
.ss-name{font-weight:700;text-decoration:none;color:var(--navy)}
.ss-name:hover{text-decoration:underline}
.ss td{vertical-align:middle}
.ss-thumb{width:96px}
.ss-thumb .ss-pic{display:block;width:80px;height:80px;object-fit:cover;object-position:50% 30%;border-radius:var(--radius-xs);background:var(--eggshell)}
.ss-logo{width:96px}
.ss-logo img{display:block;width:80px;height:80px;object-fit:contain;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xs);padding:6px}
.ss-logos{display:flex;flex-direction:column;gap:var(--space-3);align-items:center}
.ss-logos img{max-height:140px;width:auto;object-fit:contain}
.ss-lead{font-size:16px;line-height:24px}
.ss-winners{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-6);margin:0 0 var(--space-8)}
.ss-winner{margin:0}
.ss-winner .ss-win-pic{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:var(--radius-xs);background:var(--eggshell)}
.ss-winner h3{margin:var(--space-3) 0 var(--space-1)}
.ss-winner p{margin:0 0 var(--space-1)}
.ss-head{display:flex;gap:var(--space-5);align-items:center;margin:0 0 var(--space-6);flex-wrap:wrap}
.ss-head .ss-pic{width:140px;height:140px;object-fit:cover;object-position:50% 30%;border-radius:var(--radius-xs);background:var(--eggshell)}
.ss-head h2{margin:0 0 var(--space-1)}
.ss-head p{margin:0 0 var(--space-1)}
.ss-year th{background:var(--eggshell);color:var(--navy);font-size:13px;line-height:18px;font-weight:600;letter-spacing:0;text-transform:none}
.ss-year th span{font-weight:400}
.ss-class{font-size:13px;line-height:15px}
.ss-class .ss-cls{background:var(--navy);color:var(--on-dark);text-transform:none;letter-spacing:0;font-size:14px;line-height:20px;font-weight:500}
.ss-entry td{background:var(--eggshell-60);border-bottom:0}
.ss-people td{font-size:13px;line-height:15px;color:var(--ink-muted)}
/* == supersires end == */

/* == market start == */
/* Marketplace and messages (src/web/pages/market*.ts). Page layout only, tokens only; the look comes from the
   design-system components. Gaps this works around are listed in app/docs/design-system/gaps.md › Website. */
.mk h1,.mk h2,.mk p,.mk blockquote{margin:0}
.mk fieldset{border:0;margin:0;padding:0;min-width:0}
.mk .mk-grow{flex:1;min-width:0}
.mk .mk-tight{gap:var(--space-1)}
.mk .mk-top{align-items:flex-start}
.mk .mk-flat{border-bottom:0;padding:0}
.mk .mk-center{align-self:center}
.mk .mk-pad{padding-top:var(--space-3)}
.mk .mk-pre{white-space:pre-wrap;overflow-wrap:anywhere}
.mk .mk-clip{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mk .mk-clip1{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk .mk-between{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.mk .mk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);align-items:end}
.mk .mk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.mk .mk-loc{display:inline-flex;gap:var(--space-1);align-items:center}
.mk .mk-price{color:var(--navy)}
.mk .mk-subject{color:var(--gold-text);text-decoration:none}
.mk label.item{cursor:pointer}

/* listing cards, 2-up (gap: MediaCard) */
.mk .mk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
@media (min-width:768px){.mk .mk-grid{gap:var(--space-4)}.mk .mk-grid.mk-grid4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.mk .mk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}.mk .mk-grid.mk-grid4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mk .mk-card{display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:var(--radius-xs);text-decoration:none;color:inherit;min-width:0}
.mk .mk-ph{position:relative;display:block;aspect-ratio:4/3;background:var(--eggshell)}
.mk .mk-ph>img,.mk .mk-ph>.placeholder{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:0}
.mk .mk-ph>.tag{position:absolute;left:var(--space-2);top:var(--space-2)}
.mk .mk-ph>.badge{position:absolute;right:var(--space-2);top:var(--space-2)}
.mk .mk-body{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3)}

/* category chips and inbox tabs as links (gap: chips/segments are buttons in the system) */
.mk .mk-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.mk .mk-chips .chip{display:inline-flex;align-items:center;text-decoration:none}
.mk .mk-chips .chip[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.mk .mk-seg a{min-height:36px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ink-muted);text-decoration:none}
.mk .mk-seg a[aria-current="page"]{background:var(--surface);box-shadow:var(--shadow-sm);font-weight:700;color:var(--navy)}

/* filters, pager */
.mk .mk-more>summary{list-style:none;cursor:pointer;align-self:flex-start}
.mk .mk-more>summary::-webkit-details-marker{display:none}

/* listing page */
.mk .mk-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--eggshell);aspect-ratio:4/3}
.mk .mk-gallery>img,.mk .mk-gallery>.placeholder{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:50% 30%;scroll-snap-align:start}
.mk .mk-facts{padding-top:0;padding-bottom:0}
.mk .mk-facts .item{justify-content:space-between;padding:var(--space-3) 0}
.mk .mk-facts .item>:last-child{text-align:right}
.mk .mk-link{display:flex;flex-direction:row;align-items:center;gap:var(--space-3);text-decoration:none;color:inherit}
.mk .mk-link>.stack{flex:1;gap:var(--space-1)}

/* selling: photos */
.mk .mk-photos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.mk .mk-photos>.card{padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-2)}
.mk .mk-photos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.mk .mk-thumbs{display:flex;gap:var(--space-2)}
.mk .mk-thumb.placeholder{background:var(--eggshell);border-color:transparent}
/* 60px square thumbnail (gap: the system's ListItem has no thumbnail slot in this revision) */
.mk .mk-thumb{display:block;width:60px;height:60px;flex-shrink:0;object-fit:cover;overflow:hidden;background:var(--eggshell-60);border:1px solid var(--line);border-radius:var(--radius-xs)}

/* conversation (gap: MessageBubble) */
.mk .mk-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.mk .mk-bubble{max-width:88%;align-self:flex-start;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-4);background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.mk .mk-bubble.mk-me{align-self:flex-end;background:var(--navy);border-color:var(--navy);color:var(--on-dark)}
.mk .mk-me a{color:var(--on-dark)}
.mk .mk-when{align-self:flex-end;color:var(--ink-muted)}
.mk .mk-me .mk-when{color:var(--on-dark-muted)}
.mk .mk-unread{background:var(--navy);margin-top:var(--space-2)}

/* page shell (market-ui.ts shell): the site header, footer and tab bar around the 1200 column with the responsive
   gutter (README › Desktop layout: 1200 centred, 120 / 40 / 20 side margins). Layouts: .mk-l-form (720 column),
   .mk-l-card (480 card), .mk-l-wide, .mk-l-cards (/account), .mk-l-plans (/membership); .mk-acct adds the account nav. */
.mk .mk-in{box-sizing:border-box;width:100%;max-width:calc(var(--content-max) + 2 * var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.mk .mk-page{padding-top:var(--space-6);padding-bottom:var(--section-py-compact)}
.mk .ds-col{max-width:none;margin:0;padding:0;min-width:0}
.mk .mk-head{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-8);padding-bottom:var(--space-8)}
.mk .mk-head .crumbs ol{margin:0}
@media (min-width:768px){.mk .mk-page{padding-top:var(--space-8)}.mk .mk-start{align-self:flex-start}.mk .mk-narrow{display:none}}
@media (max-width:767px){.mk .mk-wide{display:none}}
@media (min-width:1024px){.mk .mk-head{padding-top:var(--space-12)}}
.mk-l-form .ds-col{max-width:720px;margin:0 auto}
.mk-l-card .ds-col{max-width:480px;margin:0 auto}
@media (min-width:768px){
  .mk-l-card .ds-col{border:1px solid var(--line);background:var(--surface);padding:var(--space-8)}
  .mk-l-card .ds-col .card{border-width:1px 0 0;padding:var(--space-5) 0 0}
}
/* account nav: chips on tablet, a sidebar (as the stallion page's section nav) from 900px; phones use the list on /account */
.mk-acct .mk-nav{display:none}
@media (min-width:768px){.mk-acct .mk-nav{display:block;margin-bottom:var(--space-6)}}
@media (min-width:900px){
  .mk-acct .mk-page{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-8);align-items:start}
  .mk-acct .mk-nav{margin:0}
  .mk-l-form.mk-acct .ds-col{margin:0}
}
/* /account: the cards two-up on desktop */
@media (min-width:1200px){
  .mk-l-cards .ds-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);align-items:start}
  .mk-l-cards .ds-col>*{grid-column:1/-1}
  .mk-l-cards .ds-col>section.card{grid-column:auto}
}
/* /membership: plan cards side by side (2 / 3 / 5 across), the button at the foot of each */
@media (min-width:768px){
  .mk-l-plans .ds-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-6)}
  .mk-l-plans .ds-col>*{grid-column:1/-1}
  .mk-l-plans .ds-col>section.card:not(#add-ons){grid-column:auto;margin-top:var(--space-3)}
  .mk-l-plans .ds-col>section.card:not(#add-ons)>:last-child{margin-top:auto}
  .mk-l-plans .ds-col>#add-ons{margin-top:var(--space-6)}
  .mk-l-plans #add-ons .btn-block{width:auto;align-self:flex-start}
}
@media (min-width:1024px){.mk-l-plans .ds-col{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.mk-l-plans .ds-col{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* marketplace: heading band with the search group; filters beside the results from 900px (280px, as the stallion list) */
.mk .mk-search-row{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3)}
@media (min-width:768px){.mk .mk-search-row{flex-direction:row;align-items:center;gap:var(--space-4)}.mk .mk-search-row .search-group{flex:1;max-width:800px}.mk .mk-search-row .btn{flex-shrink:0}}
.mk .mk-browse{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);align-items:start;margin-top:var(--space-3)}
.mk .mk-results{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
@media (min-width:900px){
  .mk .mk-browse{grid-template-columns:280px minmax(0,1fr);gap:var(--space-8)}
  .mk .mk-side{position:sticky;top:calc(var(--site-head) + var(--space-4))}
  .js .mk .mk-side .mk-more>summary{display:none}
  .js .mk .mk-side .mk-pad{padding-top:0}
}

/* listing: photos left, the summary card right (sticky where the screen is tall enough), description and details below */
.mk .mk-detail{display:flex;flex-direction:column;gap:var(--space-6)}
.mk .mk-media{gap:var(--space-2)}
.mk .mk-about{gap:var(--space-8)}
.mk .mk-thumbs{flex-wrap:wrap}
.mk a.mk-thumb{padding:0}
.mk a.mk-thumb>img{display:block;width:100%;height:100%;object-fit:cover}
.mk a.mk-thumb[aria-current="true"]{border-color:var(--navy)}
.mk .mk-similar{margin-top:var(--space-8)}
.mk .mk-similar>.mk-between{flex-wrap:wrap}
.mk .mk-similar>.mk-between>.btn{white-space:nowrap}
@media (min-width:900px){
  .mk .mk-detail{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8);align-items:start}
  .mk .mk-media{grid-column:1;grid-row:1}
  .mk .mk-about{grid-column:1;grid-row:2}
  .mk .mk-summary{grid-column:2;grid-row:1 / span 2;border:1px solid var(--line);background:var(--surface);padding:var(--space-6)}
  .mk .mk-summary .mk-seller{border-width:1px 0 0;padding:var(--space-4) 0 0}
}
@media (min-width:900px) and (min-height:760px){.mk .mk-summary{position:sticky;top:calc(var(--site-head) + var(--space-6))}}
@media (min-width:1200px){.mk .mk-detail{gap:var(--space-8) var(--space-12)}}

/* messages: conversation list beside the open conversation from 1200px; smaller screens show the list, then the conversation */
.mk .mk-panes{display:flex;flex-direction:column;gap:var(--space-6)}
.mk .mk-convo{min-width:0}
.mk .mk-convo-empty,.mk .mk-open>.mk-threads{display:none}
.mk .mk-back{align-self:flex-start}
@media (min-width:1200px){
  .mk .mk-panes{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start}
  .mk .mk-open>.mk-threads{display:flex}
  .mk .mk-threads{position:sticky;top:calc(var(--site-head) + var(--space-5));max-height:calc(100vh - var(--site-head) - var(--space-8));overflow-y:auto}
  .mk .mk-threads .item{padding-left:var(--space-2);padding-right:var(--space-2)}
  .mk .mk-threads .item[aria-current="page"]{background:var(--eggshell)}
  .mk .mk-convo-empty{display:flex;align-items:center;justify-content:center;min-height:320px;border:1px solid var(--line);background:var(--eggshell-60)}
  .mk .mk-back{display:none}
}
/* Price modes (market/price.ts): the band's dollar span under the band name; the sell form's Fixed / Range / Private
   treaty choice drawn as the system SegmentedControl (radio labels in place of its buttons, so it works without JS);
   with :has only the chosen mode's fields show */
.sale-card .price-span{display:block;margin-top:calc(var(--space-1) * -1)}
.mk-price-wrap{display:flex;flex-direction:column;gap:0}
.mk-price-modes{border:0;padding:0;margin:0}
.mk-price-modes legend{padding:0;margin-bottom:var(--space-1)}
.seg .seg-opt{position:relative;min-height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);font-size:13px;line-height:18px;font-weight:600;cursor:pointer;color:var(--ink-muted);padding:0 var(--space-2);text-align:center}
.seg .seg-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg .seg-opt:has(input:checked){background:var(--surface);box-shadow:var(--shadow-sm);font-weight:700;color:var(--navy)}
.seg .seg-opt:has(input:focus-visible){outline:2px solid var(--gold-text);outline-offset:2px}
.mk-price-form:has(input[name="price_mode"][value="fixed"]:checked) .mk-pm:not(.mk-pm-fixed),
.mk-price-form:has(input[name="price_mode"][value="range"]:checked) .mk-pm:not(.mk-pm-range),
.mk-price-form:has(input[name="price_mode"][value="private"]:checked) .mk-pm:not(.mk-pm-private){display:none}
/* == market end == */

/* == consent start == Cookie consent (src/web/consent.ts, site.js). The design system's Cookie consent (.consent, .consent-in,
   .consent-cats, .consent-cat, .consent-actions; rev 12) with its Checkbox and Toast. Only what the bundle leaves to the
   page: hidden states, a scroll limit under the header, the title row with the close button, and the toast's place. */
.consent{max-height:calc(100vh - var(--site-head));overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom))}
.consent[hidden],.consent [hidden]{display:none}
@media (max-width:991px){.consent{max-height:calc(100vh - var(--site-head) - 71px)}}
.consent-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.consent h2,.consent h3,.consent p{margin:0}
.consent h2:focus{outline:none}
.consent h2:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
.consent-close{width:40px;height:40px}
.consent-cat-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:36px}
.consent-toggle{align-items:center}
.consent-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--space-5) + env(safe-area-inset-bottom));z-index:41;max-width:calc(100vw - 2 * var(--space-5))}
@media (max-width:991px){.consent-toast{bottom:calc(71px + var(--space-4) + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:no-preference){.consent:not([hidden]){animation:consent-in .2s ease-out}@keyframes consent-in{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}}
/* == consent end == */
/* == embeds start == click-to-load embeds (src/web/embeds.ts): the placeholder is a Note; once loaded, a 16:9 frame */
.embed{margin:0 0 var(--space-4)}
.embed-ph{display:flex;flex-direction:column;gap:var(--space-2)}
.embed-ph p{margin:0}
.embed-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.embed.embed-on{position:relative;aspect-ratio:16/9;background:var(--navy);border-radius:var(--radius-xs);overflow:hidden}
.embed-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
/* == embeds end == */

/* ---- rev 11: how it works, sale card, header search ---- */
/* /how-it-works (how-it-works.ts; Figma 98:2158 / 98:2477): intro band 16px between crumbs, eyebrow, title and intro */
.hiw-tiles{list-style:none;margin:0;padding:0}
.hiw-tiles .btn-link{align-self:flex-start;margin-top:var(--space-1);padding:0}   /* Small Link: no side padding (gaps.md) */
/* Sale horse card (bundle .sale-card) in the marketplace grids: the empty photo fills the square slot */
.sale-card{min-width:0}
.sale-card .photo>.placeholder{position:absolute;inset:0;width:100%;height:100%}
/* Header search, open state (README › Header search): the header becomes a white search bar, navy SC logo left
   (44×29, 20px in on phones; 60×39, 48px in on desktop), the field 20 / 48px after it with a navy caret, the search square as
   a plain navy submit, the gold menu square in place; 64 / 75px tall, over the hero too. Classes set by site.js. */
.js .site-head.search-open,.js .has-hero .site-head.search-open:not(.solid){--head-h:var(--site-head);background:var(--surface);border-bottom-color:var(--line)}
.js .site-head.search-open .logo-white,.js .has-hero .site-head.search-open:not(.solid) .logo-white{opacity:0}
.js .site-head.search-open .logo-navy,.js .has-hero .site-head.search-open:not(.solid) .logo-navy{opacity:1}
.js .site-head.search-open .logo-link,.js .has-hero .site-head.search-open:not(.solid) .logo-link{left:var(--space-5);top:calc((var(--head-h) - 29px) / 2);width:44px;height:29px;transform:none}
.site-head.search-open .actions{left:calc(var(--space-5) * 2 + 44px)}
.site-head.search-open .head-search{flex:1;min-width:0;align-self:stretch}
.site-head.search-open .head-search.open .input{display:block;position:static;flex:1;min-width:0;width:auto;height:100%;min-height:0;padding:0;border:0;border-radius:var(--radius-none);background:transparent;box-shadow:none;caret-color:var(--navy);color:var(--ink)}
.site-head.search-open .head-search.open .input:focus{box-shadow:none}
.js .site-head.search-open .sq-search,.js .has-hero .site-head.search-open:not(.solid) .sq-search{background:transparent;border-color:transparent;color:var(--navy)}
@media (min-width:992px){
  .js .site-head.search-open .logo-link,.js .has-hero .site-head.search-open:not(.solid) .logo-link{left:var(--space-12);top:calc((var(--head-h) - 39px) / 2);width:60px;height:39px}
  .site-head.search-open .actions{left:calc(var(--space-12) * 2 + 60px)}
  .js .site-head.search-open::after,.js .has-hero .site-head.search-open:not(.solid)::after{right:0;opacity:1}
}

/* == rev 12 shared (design system artifact 1793590282-0cec) ==
   File upload: the system .file-upload drop zone around the native file input (works without JavaScript); the browser's
   own "Choose file" button is drawn as the system's Outline Small button. */
.file-upload{margin-top:var(--space-1)}
.file-upload input[type=file]{font:inherit;font-size:14px;line-height:21px;color:var(--ink);max-width:100%}
.file-upload input[type=file]::file-selector-button{min-height:36px;padding:0 var(--space-3);margin-right:var(--space-3);border:1px solid var(--navy);border-radius:var(--radius-xs);background:var(--surface);color:var(--navy);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}
.file-upload input[type=file]::file-selector-button:hover{background:var(--navy);color:var(--on-dark)}
.file-upload input[type=file]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--gold-text);border-radius:var(--radius-xs)}
/* Checkbox: form option labels use the system .checkbox (20px box, line-strong, navy when checked) */
.f-choice.checkbox{font-size:14px;line-height:21px}
.f-choice.checkbox input{width:20px;height:20px;margin:0;accent-color:auto}
/* == rev 12 shared end == */

/* ---- sliders: mouse drag (site.js). Grab cursor on the track, grabbing while dragging; no snap, smooth scroll or text
   selection mid-drag (it snaps to the nearest card on release). Touch keeps native swipe. */
@media (hover:hover) and (pointer:fine){.draggable{cursor:grab}.draggable.dragging,.draggable.dragging *{cursor:grabbing}}
.draggable.dragging{scroll-snap-type:none;scroll-behavior:auto;user-select:none;-webkit-user-select:none}
.draggable img{-webkit-user-drag:none;user-select:none}
.draggable:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}

/* ==== rev 12 Figma audit (app/docs/design-system/audit-rev12.md): Figma wins on the approved pages (Home, /listing).
   Each rule is a place where the system bundle or our layout differed from the Figma file (gaps.md). ==== */
/* Text styles as Figma defines them: Serif/Title is Larken Regular (400); Sans/Caption is 13/15 */
/* (rev 14: Title is Larken 400, Outline buttons have no fill, Link buttons are 48px, the carousel counter, site search
   spacing, article images and the mobile pagination status are in the system now) */
/* (rev 13: Caption 13/15 is in the system now) */
/* Section heading: eyebrow 16px above the Display title; the "View all ⊙" link (and every Medium Link button on these pages) is 48px tall */
.sec-title{gap:var(--space-4)}
/* long placeholders end in an ellipsis, as in Figma */
.search-group input{text-overflow:ellipsis}
/* Section heading on phones (Figma Viewport=Mobile): eyebrow 8px above the title, the 48px link right under it */
@media (max-width:767px){.sec-title{gap:var(--space-2)}.sec-head{gap:var(--space-3)}} /* Section heading (✅ Ready, rev 13): link 12px under the title on phones */
/* /listing (Figma "Stallion list" 138:340 / 138:710) */
/* Page header: breadcrumbs (caption 13/15), 64px, then eyebrow 20px above the Display title; 48px top and bottom */
.crumbs,.crumbs ol{line-height:15px}
/* Page header band (system, rev 13): crumbs sit flush; the band's gaps come from .page-header / .heading */
.page-header-band .crumbs ol{margin:0}
.page-header-band .page-header h1{font-family:var(--font-serif);font-weight:300;font-size:var(--fs-display);line-height:var(--lh-display);color:var(--navy);margin:0}
.page-header-band .eyebrow,.page-header-band .intro{margin:0}
@media (min-width:768px){
  /* Directory row: card-title name (Figma 138:555; the system agrees since rev 15), the info line in body (16/24),
     pedigree caption; 12px to the tests block. Featured rows: the same padding as regular rows (bundle rev 14), body-s
     info and 16px between the parts */
  .sl-name{font-weight:400;font-size:var(--fs-card-title);line-height:var(--lh-card-title)}
  .sl-info>.sl-name{margin-bottom:var(--space-1)}
  .sl-line{font-size:16px;line-height:24px}
  .is-featured .sl-line{font-size:14px;line-height:21px}
  .sl-tests{margin-top:var(--space-3)!important}
  .is-featured .sl-tests{margin-top:var(--space-4)!important}
  .is-featured .sl-badge{margin-bottom:var(--space-4)!important}
}
/* tests, genetics and standing-at lines are plain caption text (no bold labels) */
.sl-tests b{font-weight:400}
/* Refine search fields (Figma Text field / Select): label 13/18, 4px, a 48px control; 16px between fields */
.sl-filters .field{line-height:18px}
.sl-filters .field .input,.sl-filters .field select{height:48px;min-height:48px;box-sizing:border-box}
.sl-filters .eyebrow+.checkbox{margin-top:var(--space-2)}
/* Filter disclosure (Figma 160:17542): helper is caption 13/15 (59px header); the chevron points down when closed and
   turns up when open (the <i> is a block so the turn applies) */
.filter-disclosure .helper{line-height:15px}
.filter-disclosure .chev i{display:grid;place-items:center;transition:transform .15s ease-out}
@media (prefers-reduced-motion:reduce){.filter-disclosure .chev i{transition:none}}
@media (max-width:767px){
  /* page header: 48px between the breadcrumbs and the heading on phones */
  /* the main column's parts 24px apart */
  .sl-main{gap:var(--space-6)}
  /* Directory row (Figma 138:822): 12px side padding; the compare box, then a column: square photo, 16px, the details
     12px apart: name, fee, info + pedigree, tests */
  .dir-row,.dir-row.is-featured{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:var(--space-4);row-gap:var(--space-4);padding:var(--space-6) var(--space-3)}
  .dir-row .sl-cmp{grid-row:1 / span 2}
  .dir-row .sl-pic{grid-column:2}
  .dir-row .sl-info{grid-column:2;display:flex;flex-direction:column;gap:var(--space-3)}
  .dir-row .sl-info>*{margin:0!important}
  .dir-row .sl-badge{order:0}.dir-row .sl-name{order:1}.dir-row .sl-fee{order:2}.dir-row .sl-line{order:3}
  .dir-row .sl-info>.t-caption{order:4;margin-top:calc(-1 * var(--space-3))!important}.dir-row .sl-tests{order:5}
}

/* ---- Font Awesome 7 Pro icons with the line-SVG fallback (src/web/icons.ts). Each icon is an <i class="ico-fa"> plus
   its SVG (.ico-svg); <html class="fa-ready"> (set once the kit's font really draws) swaps them. Same box both ways:
   1em square, font-size = the SVG's size (--ico-d), or --ico where a component resizes its icon. ---- */
html:not(.fa-ready) .ico-fa{display:none!important}
.ico-fa{display:inline-block;font-size:var(--ico,var(--ico-d,24px));width:1em;height:1em;line-height:1;text-align:center;flex-shrink:0;font-style:normal}
.ico-fa::before{line-height:1}
html.fa-ready .ico-svg{display:none!important}
.btn-link.btn-xs .arrow{--ico:16px}
.sale-card .location .ico-fa{--ico:16px}
.head-sq .ico-fa{--ico:24px}
.foot-leaf{color:var(--wine)}
@media (min-width:992px){.head-sq .ico-fa,.menu-top .head-sq .ico-fa{--ico:30px}}
@media (max-width:767px){.foot-leaf{--ico:24px}}
.similarity-chip .ico-fa{line-height:1}

/* ---- photographer image-removal requests (src/web/pages/image-removal.ts, public/assets/image-removal.js) ----
   The link: mouse-type (10/14) in ink-muted (5.56:1 on white, AA) under the photo. The modal: native <dialog> with the
   system scrim behind it and the Sheet's surface/radius; a bottom sheet on phones (gap: the system has no Modal). */
.spl-photo-col,.sp-photo-col{min-width:0}
/* Photo credit row under a photo (src/web/photo-credit.ts; design system rev 19, Michael Nov 2 16:58): the system's
   .photo-meta / .photo-credit / .photo-links. Desktop: credit (camera icon + name, 10/14) on the left, the link pair on
   the far right of the same line; with no credit the link pair alone sits on the right. Phones: stacked. The system
   scopes .photo-meta to <figure>; these rules also cover the <div> variant used outside a figure. */
figure.spl-photo-col,figure.sp-photo-col{margin:0}
.hero-fig{margin:var(--space-5) 0}
.hero-fig .hero-img{margin:0}
.img-credit.photo-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin:8px 0 0}
.img-credit.photo-meta:not(:has(.photo-credit)){justify-content:flex-end}
.img-credit .photo-credit,.img-credit .photo-links{margin:0}
.img-credit .photo-credit{display:inline-flex;align-items:center;font-size:10px;line-height:14px;color:var(--ink-muted);min-width:0}
.img-credit .photo-credit a{color:var(--ink-muted)}
.img-credit .photo-credit .cam{margin-right:6px;flex-shrink:0}
.img-credit .photo-credit .ico-fa.cam{--ico:10px;color:var(--ink-muted)}
.img-credit .photo-credit svg.cam{width:10px;height:10px;color:var(--ink-muted)}
.img-credit .photo-links{display:flex;flex-wrap:wrap;gap:2px 6px;font-size:10px;line-height:14px;color:var(--ink-muted)}
.img-credit .photo-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.img-credit .photo-links a.quiet{text-decoration:none}
.img-credit .photo-links a:hover{color:var(--navy)}
.img-credit .photo-links a.quiet:hover,.img-credit .photo-links a.quiet:focus-visible{text-decoration:underline}
@media (max-width:767px){.img-credit.photo-meta{display:block}.img-credit .photo-links{margin-top:4px}}
.ss-winner .img-credit{margin-top:var(--space-1)}
/* The request form: credit fields or removal fields, by the "What would you like?" choice (all shown without :has) */
.ir-form:has(input[name=type][value=removal]:checked) .ir-when-credit{display:none}
.ir-form:has(input[name=type]:not([value=removal]):checked) .ir-when-removal{display:none}
dialog.ir-dialog{border:0;padding:0;background:var(--surface);color:var(--ink);border-radius:var(--radius-lg);width:min(640px,calc(100vw - 2 * var(--space-5)));max-height:calc(100vh - 2 * var(--space-8));overflow:auto;box-shadow:var(--shadow-md)}
dialog.ir-dialog::backdrop{background:rgba(21,25,52,.5)}
.ir-dialog-in{position:relative;padding:var(--space-6)}
.ir-close{position:absolute;top:var(--space-3);right:var(--space-3)}
.ir{display:flex;flex-direction:column;gap:var(--space-3)}
.ir h1,.ir h2{margin:0;padding-right:var(--space-12)}
.ir .f-form{padding:0}
.ir-image{display:flex;gap:var(--space-3);align-items:center;background:var(--eggshell);border-radius:var(--radius-xs);padding:var(--space-3)}
.ir-image img{width:96px;height:96px;object-fit:cover;border-radius:var(--radius-xs);flex:none}
.ir-image p{margin:0}
.ir-path{overflow-wrap:anywhere;color:var(--ink-muted)}
.ir-choices{gap:var(--space-2)}
.ir .f-form textarea[rows="2"]{min-height:72px}
.ir-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
@media (max-width:767px){
  dialog.ir-dialog{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .ir-dialog-in{padding:var(--space-5)}
}

/* ---- services directory (src/web/pages/services.ts; FEATURE_SERVICES; app/docs/business-pro-directory.md) ----
   Reuses the directory listing (sl-*, dir-row) and the page header band. New: category tiles, the verified mark, profile
   head (logo + title), tag rows, gallery and the two-column profile (gap: the system has no business-profile block). */
.sv-group{margin:0 0 var(--space-6)}
.sv-group .eyebrow{margin:0 0 var(--space-2)}
.sv-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-2)}
.sv-cat{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600}
.sv-cat span:first-child{flex:1}
@media (hover:hover){.sv-cat:hover{background:var(--eggshell-60);color:var(--navy)}}
.sv-verified{display:inline-flex;vertical-align:middle;color:var(--navy)}
.sv-place{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap}
.sv-join{margin-top:var(--space-6)}
.sv-head{display:flex;gap:var(--space-6);align-items:flex-start;margin:0 0 var(--space-6)}
.sv-logo{flex:0 0 160px}
.sv-logo img,.sv-logo .placeholder{display:block;width:160px;height:160px;object-fit:cover;border-radius:var(--radius-xs)}
.sv-title{min-width:0}
.sv-title h1{margin:var(--space-1) 0 var(--space-2)}
.sv-links{display:flex;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-2) 0 0}
.sv-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-8);align-items:start}
.sv-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sv-gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-2)}
.sv-gallery img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-xs)}
/* Industry media listings (services directory): the publication facts and the side links */
.sv-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3) var(--space-5);margin:0}
.sv-media dd{margin:var(--space-1) 0 0}
.sv-media-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
/* A photo held by the blocklist inside article text (src/lib/blocklist.ts): the Placeholder at a photo's shape */
/* Held photo inside article/obituary text (Michael, Nov 2): compact strip, no reason, caption and credit removed */
.ph-held{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--eggshell-60);border-radius:var(--radius-xs);color:var(--ink-muted);font-size:14px;line-height:21px}
.prose .ph-held{margin:var(--space-4) 0}
.prose figure:has(> .ph-held){margin:0}
.ph-held .ico-fa,.ph-held svg{--ico:20px;width:20px;height:20px;flex:none}
.sv-side{position:sticky;top:calc(var(--site-head) + var(--space-4))}
.sv-msg textarea{min-height:120px}
@media (max-width:767px){
  .sv-head{flex-direction:column;gap:var(--space-4)}
  .sv-logo{flex-basis:auto}.sv-logo img,.sv-logo .placeholder{width:120px;height:120px}
  .sv-cols{grid-template-columns:1fr;gap:var(--space-6)}
  .sv-side{position:static}
  .sv-cats{grid-template-columns:1fr}
}

/* ===== Share bar (src/web/share.ts, public/assets/share.js): after the page body. Tokens only; design gaps in app/docs/og-share-images.md ===== */
.share{border-top:1px solid var(--line)}
.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
.share-label{font-size:12px;line-height:18px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold-text);margin:0}
.share-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.share-actions .iconbtn[hidden]{display:none}
html:not(.js) .share .js-only{display:none}
.share-ig-panel{flex-basis:100%;display:flex;gap:var(--space-4);align-items:flex-start}
.share-ig-panel[hidden]{display:none}
.share-ig-panel img{width:96px;height:96px;object-fit:cover;flex-shrink:0;border-radius:var(--radius-xs)}
.share-ig-text{display:flex;flex-direction:column;gap:var(--space-3)}
.share-ig-text p{margin:0}
.share-ig-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.share-toast[hidden]{display:none}
@media (max-width:639px){.share-ig-panel{flex-direction:column}}
/* Newsletter (FEATURE_NEWSLETTER; src/web/pages/newsletter.ts, layout.ts newsletterBand). Interim: design-system tokens only */
/* Newsletter (src/web/pages/newsletter*.ts; design system Content-blocks.md → Newsletter): one signup per page */
form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nl-short{display:none}
.site-foot .footer-newsletter{margin:var(--space-12) 0 0}
@media (max-width:767px){.nl-long{display:none}.nl-short{display:inline}.site-foot .footer-newsletter{margin:var(--space-8) 0 0}}
.footer-newsletter .newsletter-form .field{color:var(--on-dark)}
.nl-consent{font-size:13px;line-height:15px;color:var(--ink-muted);margin:0}   /* not .consent: that is the cookie sheet (fixed) */
.footer-newsletter .nl-consent{color:var(--on-dark-muted)}.footer-newsletter .nl-consent a{color:var(--on-dark)}
.newsletter-form .row .btn{flex-shrink:0}
.nl-article{margin:var(--space-12) 0 0}
.nl-article .chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.nl-article .nl-more{min-height:0;align-self:flex-start;font-weight:600}
.nl-article .nl-more .arrow{display:inline-block;transition:transform .15s ease-out}.nl-article .nl-more:hover .arrow{transform:translateX(var(--space-2))}
.nl-auth{background:var(--eggshell-60);padding:var(--section-py) var(--gutter)}
.nl-auth .auth-card .t-title{margin:0;color:var(--navy)}
.nl-auth .auth-card .eyebrow{margin:0}
.nl-auth .btn-link{align-self:center;min-height:40px}
.nl-prefs-in{max-width:640px;margin:0 auto}
.interest-picker.nl-flat{border:0;padding:0}
.interest-picker legend .nl-all{min-height:0;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:2px;background:none;border:0;cursor:pointer}
.nl-page{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter);display:grid;gap:var(--space-8);align-items:start}
.nl-tiles{display:grid;gap:var(--space-4)}
.nl-signup{gap:var(--space-5)}
@media (min-width:992px){.nl-page{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-12)}}

/* Blocklist polite reply (Michael, Nov 2): the system's confirmation modal (.modal-scrim + .modal; a bottom sheet under
   600px). Shown open over the page after a normal form post; inside the photo-credit dialog it's the same box, flat. */
.polite-reply{z-index:200}
.polite-reply .modal header .eyebrow,.polite-reply-in header .eyebrow{margin:0 0 var(--space-2)}
.polite-title{margin:0;color:var(--navy)}
.polite-reply .modal .body p,.polite-reply-in .body p{margin:0}
.ir-dialog .polite-reply-in{width:100%;max-height:none;box-shadow:none}

/* Smooth scrolling (Nov 2): CSS fallback for anchor jumps; Lenis (site.js) takes over the page scroll when it runs. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Contact us (approved Nov 2, 15:21): one-column form, max 800, no card or side column; sent = Success note + Outline
   "Send another message". The "Subscribe me…" checkbox is hidden until the newsletter switch is on. */
.contact-section{padding-top:var(--space-12)}
.contact-col{max-width:800px;margin:0 auto}
.contact-col .f-form{padding-top:0}
.contact-sent{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.contact-sent p{margin:0}

/* Article detail, layout B (approved Nov 2, 19:32; design system .article-layout / .rail-nav / .article-mini): sticky left
   rail (On this page + share) · 640 article · sticky right rail (topics with counts, latest articles, tagged horses).
   The rails use .art-rail, not the system's .rail, because .rail is the site's slider track (site.js sliders).
   Below 1100 the left rail's "On this page" hides and its share bar moves under the article; one column under 768. */
.article-section{padding-top:var(--space-12)}
.art-rail{position:sticky;top:calc(var(--site-head) + var(--space-6));display:flex;flex-direction:column;gap:40px;min-width:0}
.art-rail h2{font-size:12px;line-height:18px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin:0 0 var(--space-3)}
.art-rail .topics{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.art-share .share-bar{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.art-share .share-label{font-size:12px;line-height:18px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin:0}
.art-share .share-actions{flex-wrap:wrap}
.article-mini .mini-img{width:72px;height:72px;flex-shrink:0;border-radius:var(--radius-xs);overflow:hidden;display:block}
.article-mini .mini-img img{width:100%;height:100%;object-fit:cover;display:block}
.article-mini>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.article-mini .title{display:block}
.article-body .hero-fig{margin:0 0 var(--space-6)}
.article-body .hero-img{margin:0}
.article-body .hero-img.placeholder{aspect-ratio:16/9}
/* Articles stay inside the screen (Nov 2, 23:29): the system's one-column rule is 1fr, which a wide photo, table or
   embed in old CMS content (e.g. <img style="width:1600px">) stretched past the viewport. Columns may shrink, photos and
   embeds scale down, tables scroll inside their wrapper, long links wrap. (Flag for the design system: use minmax(0,1fr).) */
.article-layout>*{min-width:0}
@media (max-width:767px){.article-layout{grid-template-columns:minmax(0,1fr)}}
.article-body,.article-body .prose{min-width:0;overflow-wrap:break-word}
.article-body .prose a{overflow-wrap:anywhere}
.article-body .prose img,.article-body .prose video,.article-body .prose figure,.article-body .prose picture{max-width:100%!important;height:auto!important}
.article-body .prose iframe,.article-body .prose embed,.article-body .prose object{max-width:100%}
.article-body .prose iframe[src*="youtube"],.article-body .prose iframe[src*="youtu.be"],.article-body .prose iframe[src*="vimeo"],.article-body .prose iframe[src*="facebook.com/plugins/video"]{width:100%;height:auto;aspect-ratio:16/9}
.article-body .prose pre{max-width:100%;overflow-x:auto;white-space:pre-wrap}
/* Every article table scrolls sideways on its own (owner, Nov 3), including old CMS tables not wrapped in
   .table-responsive (e.g. inside a figure), which were clipped at the edge; cells never shrink to one letter. */
.article-body .prose :not(.table-responsive)>table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-body .prose figure:has(table){overflow-x:auto}
@media (max-width:767px){.article-body .prose td,.article-body .prose th{min-width:6.5em}}
/* Data tables in .table-wrap (show results pages) keep readable columns and scroll on phones */
@media (max-width:767px){.table-wrap>.data-table td,.table-wrap>.data-table th{min-width:7em;overflow-wrap:normal;word-break:normal}.table-wrap>.data-table td.num,.table-wrap>.data-table th.num{min-width:0}}
@media (max-width:1100px){
  .art-rail.left{position:static;grid-column:1;grid-row:2}
  .art-rail.left nav{display:none}
  .article-layout .art-rail.left{display:flex}
}
@media (max-width:767px){
  .art-rail{position:static}
  .art-rail.left{grid-row:auto;order:2}
  .article-body{order:1}
  .art-rail.right{order:3}
}

/* Obituary (approved Nov 2, 19:34): standard Page header band, square 1:1 photo 720 wide, 720 body (system .obituary-photo / .obituary-body) */
.obituary-wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-8)}
.obituary-fig{margin:0}
.obituary-fig .obituary-photo{display:block;width:auto;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain}   /* natural size, never cropped (owner, Nov 3) */
.obituary-wrap .placeholder.obituary-photo{width:100%}
.obituary-wrap>p{margin:0}

/* Horse page (approved Nov 2; system Block / Horse hero, Block / Page nav bar, Block / Super Sires results) */
.horse-hero figure.photo-col{margin:0}
.horse-hero .photo-col .placeholder.photo{width:100%;aspect-ratio:1/1}
.horse-hero .text{flex:1;min-width:0}
.horse-hero .text .crumbs ol{margin:0}
.horse-body{padding-top:var(--space-12)}
.horse-body .section-inner{gap:var(--space-12)}
.hp-sec{scroll-margin-top:calc(var(--site-head) + 72px);min-width:0}
.hp-sec>.sp-h{margin:0 0 var(--space-6)}
.ss-card .ss-wordmark-text{font-family:var(--font-serif);font-size:var(--fs-title);line-height:var(--lh-title);color:var(--on-dark);flex-shrink:0}
.ss-card .ss-head .eyebrow{margin:0}
.ss-card .ss-total .t-stat{margin:0;font-weight:700}
.ss-card .ss-total .label{margin:0}
.results-table .result-row>span{min-width:0;overflow-wrap:anywhere}
.results-table .muted{color:var(--ink-muted)}
.results-table a.muted{color:var(--ink-muted)}
@media (min-width:768px) and (max-width:1199px){.ss-rows .result-row{grid-template-columns:minmax(180px,1fr) 140px 140px 48px 96px 56px;gap:var(--space-4)}.show-rows .result-row{grid-template-columns:56px minmax(160px,1fr) minmax(140px,1fr) 140px 140px 56px 88px;gap:var(--space-4)}}
/* Phones (owner, Nov 3): the Super Sires and Show results tables keep their columns and scroll sideways instead of
   squeezing a column to one letter per line. */
@media (max-width:767px){
  .results-table.ss-rows,.results-table.show-rows{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .results-table .result-row.head{display:grid}
  .ss-rows .result-row{grid-template-columns:200px 140px 140px 48px 96px 56px;gap:var(--space-4);min-width:720px}
  .show-rows .result-row{grid-template-columns:40px 200px 180px 140px 140px 48px 88px;gap:var(--space-4);min-width:880px}
  .ss-rows .ss-year{min-width:720px;box-sizing:border-box}
  .results-table .result-row>span{overflow-wrap:break-word}
}
.ss-card .ss-head .wordmark.ss-badge{width:96px;height:96px;border-radius:var(--radius-xs)}
@media (max-width:767px){.ss-card .ss-head .wordmark.ss-badge{width:72px;height:72px}}
/* Horse page: room between Recently Added Stallions and the share bar, matching the share bar's own 48px (owner, Nov 3) */
.sp-recent:not(.sp-similar){padding-bottom:var(--space-12)}