/* =========================================================================
   Ivanhoe Kennels — site stylesheet
   Single stylesheet, no build step, no frameworks.

   Contents
   01. Design tokens
   02. Reset and base
   03. Typography
   04. Layout helpers
   05. Buttons and links
   06. Header and navigation
   07. Hero
   08. Sections and section furniture
   09. Photo placeholders and media
   10. Cards (dog, news, result, value)
   11. Tables and data
   12. Filters and controls
   13. Forms
   14. Accordion / FAQ
   15. Footer
   16. Utilities and empty states
   17. Motion and reduced motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --green:        #102F26;   /* deep racing green   */
  --green-dark:   #0A1F19;
  --green-mid:    #1B463A;
  --ivory:        #F5F0E5;   /* warm ivory          */
  --ivory-dark:   #EAE3D4;
  --gold:         #C49A4A;   /* muted gold          */
  --gold-deep:    #7A5A22;   /* AA-safe gold on light backgrounds  */
  --gold-light:   #E0BC78;   /* AA-safe gold for small text on dark */
  --charcoal:     #1D2320;
  --white:        #FFFFFF;
  --burgundy:     #6B2233;   /* restrained accent   */

  /* Semantic colour */
  --bg:           var(--ivory);
  --surface:      var(--white);
  --text:         var(--charcoal);
  --text-muted:   #4A524D;
  --text-on-dark: #EDE7DA;
  --muted-on-dark:#B9BFB6;
  --rule:         #D8D0BE;
  --field-border: #8E8574;   /* meets 3:1 non-text contrast */
  --rule-dark:    rgba(245, 240, 229, 0.18);
  --focus:        #C49A4A;

  /* Typography */
  --font-display: "Fraunces", "Hoefler Text", "Baskerville", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.19rem, 1.12rem + 0.33vw, 1.4rem);
  --step-2:  clamp(1.41rem, 1.29rem + 0.58vw, 1.8rem);
  --step-3:  clamp(1.67rem, 1.48rem + 0.95vw, 2.31rem);
  --step-4:  clamp(1.98rem, 1.68rem + 1.5vw, 2.97rem);
  --step-5:  clamp(2.35rem, 1.88rem + 2.33vw, 3.82rem);
  --step-6:  clamp(2.8rem, 2.06rem + 3.65vw, 4.9rem);

  /* Spacing */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7rem;

  /* Structure */
  --measure: 66ch;
  --container: 76rem;
  --container-narrow: 48rem;
  --radius: 2px;
  --radius-lg: 4px;
  --header-h: 4.5rem;

  --shadow-sm: 0 1px 2px rgba(29, 35, 32, 0.06), 0 4px 14px rgba(29, 35, 32, 0.05);
  --shadow-md: 0 2px 6px rgba(29, 35, 32, 0.07), 0 14px 40px rgba(29, 35, 32, 0.09);

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

@media (min-width: 60em) {
  :root { --header-h: 5.5rem; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-l) 0;
}

::selection { background: var(--gold); color: var(--green-dark); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.on-dark :focus-visible { outline-color: var(--gold); }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: var(--space-s); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   03. Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-s);
  color: var(--green);
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }

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

p { margin: 0 0 var(--space-s); max-width: var(--measure); }
.on-dark p { color: var(--text-on-dark); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
}
.on-dark .lede { color: var(--text-on-dark); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--space-xs);
}
.eyebrow::before {
  content: "";
  width: 2rem; height: 1px;
  background: currentColor;
  flex: none;
}
.on-dark .eyebrow { color: var(--gold); }

.small { font-size: var(--step--1); }
.muted { color: var(--text-muted); }
.on-dark .muted { color: var(--muted-on-dark); }

blockquote {
  margin: var(--space-l) 0;
  padding-left: var(--space-m);
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--green);
}

.prose > * + * { margin-top: var(--space-s); }
.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-l); }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.25rem; }
.prose li { margin-bottom: 0.45rem; }
.prose a { color: var(--burgundy); }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(16, 47, 38, 0.08);
  padding: 0.12em 0.38em;
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.on-dark code { background: rgba(245, 240, 229, 0.14); color: var(--gold-light); }

/* -------------------------------------------------------------------------
   04. Layout helpers
   ------------------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
@media (min-width: 48em) {
  .container { width: min(100% - 4rem, var(--container)); }
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--large { padding-block: var(--space-3xl); }

.section--green   { background: var(--green); color: var(--text-on-dark); }
.section--green-d { background: var(--green-dark); color: var(--text-on-dark); }
.section--white   { background: var(--white); }
.section--ivory-d { background: var(--ivory-dark); }

.grid { display: grid; gap: var(--space-m); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 40em) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 60em) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .split--media-first > :first-child { order: -1; }
  .split--wide-text { grid-template-columns: 1.15fr 1fr; }
}

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-l); }

/* Section head */
.section-head { margin-bottom: var(--space-l); max-width: var(--measure); }
.section-head--between {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
}
.section-head--between .section-head__text { max-width: var(--measure); }

/* Decorative racing rule (subtle track lines) */
.rule-track {
  height: 6px;
  border: 0;
  margin: 0 0 var(--space-l);
  background:
    linear-gradient(to right, var(--gold) 0 3.5rem, transparent 3.5rem),
    linear-gradient(to right, var(--rule) 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 2px, 100% 1px;
  background-position: 0 0, 0 0;
}
.on-dark .rule-track {
  background:
    linear-gradient(to right, var(--gold) 0 3.5rem, transparent 3.5rem),
    linear-gradient(to right, var(--rule-dark) 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 2px, 100% 1px;
}

/* -------------------------------------------------------------------------
   05. Buttons and links
   ------------------------------------------------------------------------- */
/* :where() keeps these at zero specificity, so any component class below
   (buttons, the wordmark, footer lists) reliably wins over them. */
:where(a) { color: var(--burgundy); }
:where(.on-dark) :where(a) { color: var(--gold); }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  min-height: 3rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--gold); color: var(--green-dark); border-color: var(--gold); }
.btn--primary:hover { background: #D6AC5E; border-color: #D6AC5E; }

.btn--dark { background: var(--green); color: var(--white); border-color: var(--green); }
.btn--dark:hover { background: var(--green-mid); border-color: var(--green-mid); }

.btn--ghost { background: transparent; color: var(--green); border-color: var(--green); }
.btn--ghost:hover { background: var(--green); color: var(--white); }

.on-dark .btn--ghost, .btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(245,240,229,0.55); }
.on-dark .btn--ghost:hover, .btn--ghost-light:hover { background: var(--white); color: var(--green-dark); border-color: var(--white); }

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--burgundy);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.on-dark .link-arrow { color: var(--gold); }
.link-arrow svg { width: 1em; height: 1em; transition: transform 180ms var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   06. Header and navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--green);
  color: var(--text-on-dark);
  border-bottom: 1px solid rgba(196, 154, 74, 0.35);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

/* Wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--white);
  padding-block: 0.5rem;
}
.brand__mark { width: 2.25rem; height: 2.25rem; flex: none; color: var(--gold); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand__tag {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.28rem;
}

/* Nav toggle (mobile) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(245,240,229,0.4);
  color: var(--white);
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 1.1rem; height: 0.7rem; }
.nav-toggle__bars span {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor;
  transition: transform 200ms var(--ease), opacity 160ms var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bars span:nth-child(3) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(0.34rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-0.34rem) rotate(-45deg); }

@media (min-width: 64em) { .nav-toggle { display: none; } }

/* Primary navigation */
.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-m);
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  list-style: none;
  margin: 0; padding: 0;
}
.site-nav__link {
  display: inline-block;
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.site-nav__link:hover { color: var(--white); border-bottom-color: var(--gold); }
.site-nav__link[aria-current="page"] { color: var(--white); border-bottom-color: var(--gold); }

@media (min-width: 64em) {
  .site-nav { display: flex; }
}

/* Mobile panel */
.nav-panel {
  display: none;
  background: var(--green-dark);
  border-top: 1px solid rgba(245,240,229,0.14);
}
.nav-panel.is-open { display: block; }
@media (min-width: 64em) { .nav-panel { display: none !important; } }

.nav-panel__list { list-style: none; margin: 0; padding: var(--space-s) 0 var(--space-m); }
.nav-panel__list a {
  display: block;
  padding: 0.9rem 0;
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: var(--step-1);
  font-family: var(--font-display);
  border-bottom: 1px solid rgba(245,240,229,0.1);
}
.nav-panel__list a[aria-current="page"] { color: var(--gold); }
.nav-panel .btn { margin-top: var(--space-m); }

/* -------------------------------------------------------------------------
   07. Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--green-dark);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media .photo-slot { height: 100%; border: 0; border-radius: 0; }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(10,31,25,0.94) 0%, rgba(10,31,25,0.86) 45%, rgba(10,31,25,0.62) 100%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
  max-width: 42rem;
}
.hero h1 {
  font-size: var(--step-6);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-m);
}
.hero .lede { max-width: 36rem; }
.hero__meta {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(245,240,229,0.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m) var(--space-xl);
}
.hero__meta div { min-width: 8rem; }
.hero__meta dt {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.3rem;
}
.hero__meta dd { margin: 0; font-family: var(--font-display); font-size: var(--step-1); color: var(--white); }

/* Temporary note showing where the hero photograph belongs.
   DELETE this element from index.html once the real photograph is in place. */
.hero__photo-note {
  position: absolute;
  right: var(--space-m);
  bottom: var(--space-m);
  z-index: 1;
  max-width: 18rem;
  padding: 0.7rem 0.9rem;
  border: 1px dashed rgba(196, 154, 74, 0.7);
  border-radius: var(--radius);
  background: rgba(10, 31, 25, 0.82);
  font-size: 0.72rem;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.hero__photo-note strong { display: block; color: var(--gold-light); letter-spacing: 0.14em; }
@media (max-width: 47.99em) { .hero__photo-note { position: static; margin-top: var(--space-l); max-width: none; } }

/* Page hero (interior pages) */
.page-hero {
  background: var(--green);
  color: var(--text-on-dark);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-bottom: 1px solid rgba(196,154,74,0.3);
  position: relative;
  overflow: hidden;
}
.page-hero__inner { position: relative; max-width: 46rem; }
.page-hero h1 { margin-bottom: var(--space-s); }
.page-hero .lede { margin-bottom: 0; }
.page-hero__lines {
  position: absolute;
  inset-block: 0;
  right: -6rem;
  width: 26rem;
  opacity: 0.16;
  color: var(--gold);
  pointer-events: none;
}

/* Breadcrumbs */
.breadcrumbs { font-size: var(--step--1); margin-bottom: var(--space-s); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.breadcrumbs a { color: var(--gold); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--muted-on-dark); }

/* -------------------------------------------------------------------------
   08. Photo placeholders and media
   ------------------------------------------------------------------------- */
/*
   .photo-slot marks a position where a real Ivanhoe Kennels photograph goes.
   It keeps the layout stable before photographs arrive (aspect-ratio box)
   and states plainly what should be placed there. Replace the whole element
   with an <img> when the photograph is supplied.
*/
.photo-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
  background-color: var(--green-mid);
  background-image:
    repeating-linear-gradient(115deg, rgba(245,240,229,0.05) 0 1px, transparent 1px 26px);
  border: 1px solid rgba(245,240,229,0.16);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text-on-dark);
}
.photo-slot--light {
  background-color: var(--ivory-dark);
  background-image:
    repeating-linear-gradient(115deg, rgba(16,47,38,0.05) 0 1px, transparent 1px 26px);
  border-color: var(--rule);
  color: var(--text-muted);
}
.photo-slot__label {
  position: relative;
  padding: var(--space-s);
  font-size: 0.76rem;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(to top, rgba(10,31,25,0.72), rgba(10,31,25,0));
}
.photo-slot--light .photo-slot__label {
  background: linear-gradient(to top, rgba(234,227,212,0.9), rgba(234,227,212,0));
}
.photo-slot__label strong { display: block; color: var(--gold-light); letter-spacing: 0.14em; }
.photo-slot--light .photo-slot__label strong { color: var(--gold-deep); }
.photo-slot__glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: min(42%, 9rem);
  opacity: 0.22;
  color: currentColor;
}
.photo-slot--portrait { aspect-ratio: 3 / 4; }
.photo-slot--square   { aspect-ratio: 1 / 1; }
.photo-slot--wide     { aspect-ratio: 16 / 9; }
.photo-slot--pano     { aspect-ratio: 21 / 9; }

figure { margin: 0; }
figcaption { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-2xs); }

/* -------------------------------------------------------------------------
   09. Cards
   ------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease), border-color 220ms var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--gold); }
.card__body { padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.card__title { font-size: var(--step-2); margin: 0; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; } /* whole-card link */
.card { position: relative; }
.card__meta {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.card__foot { margin-top: auto; padding-top: var(--space-s); }

/* Dog card specifics */
.dog-card__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem var(--space-s);
  margin: var(--space-s) 0 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
}
.dog-card__specs dt { color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.68rem; }
.dog-card__specs dd { margin: 0.1rem 0 0; font-weight: 600; }

/* Status pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  align-self: flex-start;
}
.pill--racing     { color: #12503C; background: #E4F0E8; }
.pill--training   { color: #6B4A00; background: #F7EDD6; }
.pill--resting    { color: #3D4C6B; background: #E6EAF3; }
.pill--retired    { color: var(--burgundy); background: #F5E6E9; }
.pill--sample     { color: #55524B; background: #EDE9DF; }

/* Sample / placeholder flag */
.sample-flag {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: #FBF3DF;
  border: 1px dashed var(--gold-deep);
  border-radius: var(--radius);
  color: #5C4715;
  font-size: var(--step--1);
  line-height: 1.45;
}
.sample-flag svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.15rem; }

/* Value / feature blocks */
.feature {
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  height: 100%;
}
.on-dark .feature {
  background: rgba(245,240,229,0.05);
  border-color: rgba(245,240,229,0.16);
  border-top-color: var(--gold);
}
.feature h3 { font-size: var(--step-1); }
.feature p:last-child { margin-bottom: 0; }

.feature__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--gold-deep);
  display: block;
  margin-bottom: var(--space-2xs);
}
.on-dark .feature__num { color: var(--gold); }

/* -------------------------------------------------------------------------
   10. Tables and data
   ------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--step--1);
  background: var(--surface);
}
table.data caption {
  text-align: left;
  font-size: var(--step--1);
  color: var(--text-muted);
  padding-bottom: var(--space-xs);
}
table.data th, table.data td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.data thead th {
  background: var(--green);
  color: var(--white);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 0;
}
table.data tbody tr:hover { background: #FAF7F0; }
table.data td strong { font-family: var(--font-display); font-size: 1.05rem; }

/* Runner list (mobile friendly, no table) */
.runner-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.runner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}
.runner__date {
  grid-row: span 2;
  align-self: center;
  text-align: center;
  font-family: var(--font-display);
  line-height: 1.05;
  color: var(--green);
  min-width: 3.25rem;
}
.runner__date .d { display: block; font-size: var(--step-2); }
.runner__date .m { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.runner__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--green); }
.runner__detail { font-size: var(--step--1); color: var(--text-muted); }
.runner__result {
  font-weight: 700;
  color: var(--burgundy);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-m); border-left: 2px solid var(--rule); }
.timeline li { position: relative; padding: 0 0 var(--space-l) var(--space-m); }
.timeline li::before {
  content: ""; position: absolute; left: calc(-0.4rem - 1px); top: 0.45rem;
  width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg);
}
.timeline__year { font-family: var(--font-display); font-size: var(--step-1); color: var(--green); display: block; }

/* -------------------------------------------------------------------------
   11. Filters and controls
   ------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: flex-end;
  padding: var(--space-m);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-l);
}
.filters__group { display: flex; flex-direction: column; gap: 0.35rem; min-width: 10rem; flex: 1 1 12rem; }
.filters__group label {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
.filters select, .filters input[type="search"] {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--white);
  min-height: 2.9rem;
}
.filters__status { flex: 1 1 100%; font-size: var(--step--1); color: var(--text-muted); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 var(--space-l); padding: 0; }
.chip {
  padding: 0.5rem 1rem;
  border: 1px solid var(--field-border);
  background: var(--white);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.chip:hover { border-color: var(--gold-deep); }
.chip[aria-pressed="true"] { background: var(--green); color: var(--white); border-color: var(--green); }

/* -------------------------------------------------------------------------
   12. Forms
   ------------------------------------------------------------------------- */
.form { max-width: 40rem; }
.form__grid { display: grid; gap: var(--space-m); }
@media (min-width: 40em) { .form__grid--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field > label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
}
.field .hint { font-size: var(--step--1); color: var(--text-muted); }
.req { color: var(--burgundy); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 3rem;
  background: var(--white);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gold-deep); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 1px var(--burgundy);
}
.field__error { font-size: var(--step--1); color: var(--burgundy); font-weight: 600; min-height: 0; }
.field__error:empty { display: none; }

.checkbox { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.checkbox input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: 0.25rem; accent-color: var(--green); }
.checkbox label { font-size: var(--step--1); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); }

/* Honeypot — hidden from people, visible to naive bots */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-left: 3px solid var(--gold);
  background: var(--ivory-dark);
  font-size: var(--step--1);
}

.form-message {
  margin-top: var(--space-m);
  padding: var(--space-m);
  border-radius: var(--radius);
  border: 1px solid;
  font-size: var(--step--1);
}
.form-message[hidden] { display: none; }
.form-message--success { background: #E4F0E8; border-color: #2E7C5A; color: #12503C; }
.form-message--error   { background: #F7E9EC; border-color: var(--burgundy); color: var(--burgundy); }
.form-message strong { display: block; font-size: var(--step-0); margin-bottom: 0.25rem; }

/* -------------------------------------------------------------------------
   13. Accordion / FAQ
   ------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--green);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 0.7rem; height: 0.7rem;
  border-right: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  transform: rotate(45deg);
  transition: transform 200ms var(--ease);
  margin-right: 0.35rem;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding-bottom: var(--space-m); }
.faq details > div > p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--green-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-xl) var(--space-m);
  border-top: 3px solid var(--gold);
}
.site-footer h2, .site-footer h3 { color: var(--white); }
.footer-grid { display: grid; gap: var(--space-l); }
@media (min-width: 48em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); } }

.footer-heading {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-s);
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-list a { color: var(--text-on-dark); text-decoration: none; font-size: var(--step--1); }
.footer-list a:hover { color: var(--gold); text-decoration: underline; }

.social-list { display: flex; gap: 0.75rem; list-style: none; margin: var(--space-s) 0 0; padding: 0; flex-wrap: wrap; }
.social-list a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--green);
}
.on-dark .social-list a { border-color: rgba(245,240,229,0.3); color: var(--text-on-dark); }
.social-list a:hover { background: var(--gold); color: var(--green-dark); border-color: var(--gold); }
.social-list svg { width: 1.1rem; height: 1.1rem; }

.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(245,240,229,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--muted-on-dark);
}
.footer-bottom a { color: var(--muted-on-dark); }

/* -------------------------------------------------------------------------
   15. Utilities and empty states
   ------------------------------------------------------------------------- */
.empty-state {
  padding: var(--space-xl) var(--space-m);
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.on-dark .empty-state { background: rgba(245,240,229,0.04); border-color: rgba(245,240,229,0.25); }
.grid > .empty-state { grid-column: 1 / -1; }
.empty-state svg { width: 3rem; height: 3rem; color: var(--gold-deep); margin: 0 auto var(--space-s); opacity: 0.7; }
.on-dark .empty-state svg { color: var(--gold); }
.empty-state h3 { font-size: var(--step-2); }
.empty-state p { margin-inline: auto; max-width: 34ch; }

.cta-band {
  background: var(--burgundy);
  color: var(--white);
  padding-block: var(--space-xl);
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.9); }
.cta-band a:not(.btn) { color: var(--white); }
.cta-band .placeholder { color: rgba(255,255,255,0.88); border-bottom-color: rgba(255,255,255,0.5); }

.callout {
  padding: var(--space-m);
  background: var(--white);
  border-left: 3px solid var(--burgundy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.callout p:last-child { margin-bottom: 0; }
.callout h3 { font-size: var(--step-1); }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.tag {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 0.25rem 0.6rem; border-radius: var(--radius);
  background: var(--ivory-dark); color: var(--text-muted);
}

/* A detail Ivanhoe Kennels has not yet supplied. Deliberately looks
   unfinished so it is never mistaken for a fact. */
.placeholder {
  color: var(--text-muted);
  font-style: italic;
  border-bottom: 1px dashed var(--gold-deep);
  padding-bottom: 1px;
}
.on-dark .placeholder { color: var(--muted-on-dark); border-bottom-color: var(--gold); }

.dog-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
[hidden] { display: none !important; }

/* -------------------------------------------------------------------------
   16. Motion
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

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

/* -------------------------------------------------------------------------
   17. Print
   ------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-panel, .cta-band, .filters { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}