/* ===== ZITO Equine — design tokens =====
   Pulled from the master logo + TRJ print ads (Rooster / Dirty Fling).
   Gold: sampled from logo files. Black/cream: matches the ad backgrounds. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,800&family=La+Belle+Aurore&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --color-bg: #faf7f1;        /* warm cream page background */
  --color-bg-alt: #efe8db;    /* deeper cream for alternating sections */
  --color-surface: #ffffff;   /* cards */
  --color-text: #1c1917;      /* near-black body text */
  --color-muted: #6b6259;
  --color-black: #000000;     /* true black, matches logo wordmark */
  --color-gold: #b8862e;      /* primary brand gold, from ZITO master logo */
  --color-gold-light: #d4a043;/* lighter gold, from stallion wordmarks */
  --color-gold-dark: #8f6a22;
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script: "La Belle Aurore", cursive;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --radius: 2px;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; letter-spacing: .01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .6em; }
h3 { font-size: 1.25rem; }
img { max-width: 100%; display: block; }
a { color: var(--color-gold-dark); }
a:hover { color: var(--color-gold); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 760px; }
.section { padding: 72px 0; }
.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 32px;
}
.section-alt { background: var(--color-bg-alt); }

.eyebrow {
  display: block;
  font-family: var(--font-script);
  font-size: 1.6rem;
  color: var(--color-gold-light);
  margin-bottom: -.25em;
}

.divider {
  width: 64px;
  height: 3px;
  background: var(--color-gold);
  border: 0;
  margin: 20px 0;
}
.divider.center { margin: 20px auto; }

.section-label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: 10px;
}

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 18px; }
.pill {
  display: inline-block;
  border: 1px solid var(--color-gold);
  color: var(--color-gold-dark);
  padding: 5px 14px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
}
.stallion-hero .pill-row { justify-content: center; }
.stallion-hero .pill { color: var(--color-gold-light); border-color: var(--color-gold-light); }

/* Fact ticker — quick-scan highlights under a hero */
.ticker {
  background: var(--color-black);
  color: var(--color-gold-light);
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--color-gold-dark);
  border-bottom: 1px solid var(--color-gold-dark);
}
.ticker-track {
  display: inline-block;
  padding: 12px 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: ticker 28s linear infinite;
}
.ticker-track span { margin: 0 28px; }
.ticker-track span::after { content: "\2726"; margin-left: 28px; color: var(--color-gold-dark); }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; overflow-x: auto; }
}

/* Achievement list — accent bar per line */
.achv-list { list-style: disc; margin: 16px 0 24px; padding-left: 22px; }
.achv-list li { margin-bottom: 8px; padding-left: 4px; font-weight: 600; }
.achv-list li::marker { color: var(--color-gold); }

/* Key facts grid */
.key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  border-top: 1px solid #e3d9c6;
  border-bottom: 1px solid #e3d9c6;
  padding: 20px 0;
  margin: 24px 0;
}
.key-facts dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}
.key-facts dd { margin: 0; font-weight: 700; }

/* Snapshot — a fun, tilted photo accent, not a formal card */
/* Pedigree chart — 3 generations: parents | grandparents | great-grandparents.
   Sire's side on top (white), dam's side below (cream). */
.pedigree {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, auto);
  gap: 3px;
  margin: 20px 0 28px;
  font-size: .85rem;
}
.ped {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border-left: 3px solid var(--color-gold);
  line-height: 1.3;
}
.ped-sire { background: var(--color-surface); }
.ped-dam { background: var(--color-bg-alt); border-left-color: var(--color-gold-dark); }
.ped strong { text-transform: uppercase; letter-spacing: .03em; font-size: .8rem; color: var(--color-black); }
.ped span { color: var(--color-muted); font-size: .75rem; }
.ped.p-1, .ped.p-2 { padding: 12px; }
.ped.p-1 strong, .ped.p-2 strong { font-size: .95rem; }
.p-1 { grid-column: 1; grid-row: 1 / 5; }
.p-2 { grid-column: 1; grid-row: 5 / 9; }
.g-1 { grid-column: 2; grid-row: 1 / 3; }
.g-2 { grid-column: 2; grid-row: 3 / 5; }
.g-3 { grid-column: 2; grid-row: 5 / 7; }
.g-4 { grid-column: 2; grid-row: 7 / 9; }
.gg-1 { grid-column: 3; grid-row: 1; }
.gg-2 { grid-column: 3; grid-row: 2; }
.gg-3 { grid-column: 3; grid-row: 3; }
.gg-4 { grid-column: 3; grid-row: 4; }
.gg-5 { grid-column: 3; grid-row: 5; }
.gg-6 { grid-column: 3; grid-row: 6; }
.gg-7 { grid-column: 3; grid-row: 7; }
.gg-8 { grid-column: 3; grid-row: 8; }
.section-alt .ped-dam { background: #e6dccb; }
@media (max-width: 480px) {
  .ped { padding: 6px 7px; }
  .ped strong { font-size: .7rem; letter-spacing: 0; }
  .ped span { font-size: .68rem; }
  .ped.p-1 strong, .ped.p-2 strong { font-size: .8rem; }
}

/* Full-width pedigree row — last block for each horse */
.pedigree-wide { margin-top: 48px; padding-top: 32px; border-top: 1px solid #e3d9c6; }
.pedigree-wide .pedigree { margin-bottom: 0; }
@media (min-width: 769px) {
  .pedigree-wide .ped { padding: 10px 14px; }
  .pedigree-wide .ped strong { font-size: .9rem; }
  .pedigree-wide .ped span { font-size: .8rem; }
  .pedigree-wide .ped.p-1 strong, .pedigree-wide .ped.p-2 strong { font-size: 1.1rem; }
}

/* Quote hero — full-width dark band: big photo + big pull quote */
.quote-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  background: var(--color-black);
  color: #fff;
}
.quote-hero-img { min-height: 520px; }
.quote-hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.quote-hero-text { padding: 64px clamp(24px, 5vw, 72px); align-self: center; }
.quote-hero-text .section-label { color: var(--color-gold-light); }
.quote-hero blockquote { margin: 0 0 24px; }
.quote-hero blockquote p {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1.15;
  margin: 0;
}
.quote-hero cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--color-gold-light);
}
.quote-hero cite::before { content: "\2014\00a0"; }
.quote-hero-stat { color: #d8d0c4; margin: 0 0 28px; }
@media (max-width: 768px) {
  .quote-hero { grid-template-columns: 1fr; }
  .quote-hero-img { min-height: 0; aspect-ratio: 3/2; }
  .quote-hero-text { padding: 40px 20px 48px; }
}

/* Photo band — full-width image strip, edge to edge */
.photo-band { height: clamp(240px, 38vw, 520px); overflow: hidden; }
.photo-band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

.press-card {
  border: 1px solid var(--color-gold);
  background: var(--color-surface);
  padding: 20px 24px;
  text-align: left;
}
.press-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1000px;
  margin: 32px auto 0;
}
.press-card .stat-line { display: block; }
.press-img { display: block; margin: -20px -24px 16px; }
.press-img img { display: block; width: 100%; aspect-ratio: 1.9; height: auto; object-fit: cover; }
.press-card h3 { margin: 4px 0; }
.press-card h3 a { color: var(--color-black); }
.press-card h3 a:hover { color: var(--color-gold-dark); }

.photo-caption {
  font-size: .85rem;
  font-style: italic;
  color: var(--color-muted);
  text-align: center;
  margin-top: 10px;
}

/* Announcement bar — single homepage statement under the hero */
.announce {
  text-align: center;
  padding: 48px 0;
  border-top: 1px solid #e3d9c6;
  border-bottom: 1px solid #e3d9c6;
}
.announce p { margin: 0; }
.announce-lead {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.announce .announce-big {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--color-gold-dark);
  margin: 6px 0 24px;
}

/* Header */
.site-header {
  background: var(--color-surface);
  border-bottom: 3px solid var(--color-gold);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 84px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 56px; width: auto; }
.site-nav { display: flex; align-items: center; }
.site-nav a {
  color: var(--color-black);
  text-decoration: none;
  margin-left: 32px;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-nav a:hover { color: var(--color-gold); }
.nav-toggle { display: none; background: none; border: 0; color: var(--color-black); font-size: 1.8rem; cursor: pointer; line-height: 1; }

/* Hero */
.hero {
  background:
    linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,.7) 55%, rgba(10,9,8,.92) 100%),
    url("/images/hero-dirty-fling.jpg") center 30%/cover no-repeat;
  color: #fff;
  padding: 130px 0;
  text-align: center;
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(212,160,67,.10), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero .eyebrow { color: var(--color-gold-light); }
.hero-mark { height: 48px; width: auto; margin: 0 auto 20px; filter: brightness(0) invert(1); opacity: .92; }
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin: 8px 0 16px;
  color: #fff;
}
.tagline { font-size: 1.2rem; margin: 0 0 32px; color: #e8e2d8; }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--color-gold);
  color: #fff;
  padding: 14px 32px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 0;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--color-gold-dark); color: #fff; }
.btn-outline {
  display: inline-block;
  background: transparent;
  color: #fff;
  padding: 13px 32px;
  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.btn-outline:hover { border-color: #fff; color: #fff; }
.stallion-hero .btn { margin-top: 24px; }
.horse-sub {
  display: block;
  margin: 4px 0 18px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.stallion-hero .horse-sub { color: var(--color-gold-light); margin: 8px 0 0; }
h2 + .horse-sub { margin-top: -8px; }
.ped strong a { color: inherit; }
.registered-name {
  margin: 18px 0 0;
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stallion-panel .registered-name { margin-top: 14px; font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.stallion-panel .registered-name + .eyebrow { margin-top: 6px; }

/* Cards */
.card-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  border-top: 3px solid var(--color-gold);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.card h3 { padding: 20px 20px 0; margin: 0 0 4px; color: var(--color-black); }
.card p { padding: 0 20px 20px; margin: 0; color: var(--color-muted); }
.card:has(.card-btn) { display: flex; flex-direction: column; }
.card:has(.card-btn) > * { flex-shrink: 0; }
.card-btn { align-self: flex-start; margin: auto 20px 24px; }
.card:hover .card-btn { background: var(--color-gold-dark); }
.card-img.photo-pending { display: flex; align-items: center; justify-content: center; }
.card-img.photo-pending span { color: var(--color-gold-light); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.card-img { aspect-ratio: 4/3; min-height: 0; overflow: hidden; background: linear-gradient(135deg, #2a231b, #14110e); }
.card-img.photo-frame,
.stallion-photo.photo-frame {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.card-img.photo-frame img,
.stallion-photo.photo-frame img { width: 100%; height: 100%; object-fit: contain; }
.card-img.photo-fill { background: none; padding: 0; }
.card-img.photo-fill img { width: 100%; height: 100%; object-fit: cover; }

/* Stat box — echoes the boxed stats in the print ads */
.stat-box {
  border: 1px solid var(--color-gold);
  padding: 20px 24px;
  background: var(--color-surface);
  margin: 24px 0;
}
.stat-box .stat-line { display: block; font-weight: 600; }
.stat-box .stat-note { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e3d9c6; font-size: .85rem; color: var(--color-muted); }
.stat-box .stat-big {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  margin: 2px 0;
}

/* Stallion hero — dark banner carrying the stallion's own wordmark, echoes the print ads */
.stallion-hero {
  background: linear-gradient(160deg, #0c0b0a 0%, #1c1815 60%, #262019 100%);
  padding: 56px 0;
  text-align: center;
}
.stallion-hero img { max-height: 130px; width: auto; margin: 0 auto; }
.stallion-hero .eyebrow { color: var(--color-gold-light); margin-bottom: 8px; }
.stallion-hero p { color: #e8e2d8; margin: 16px 0 0; font-size: 1.05rem; }

/* Stallions page — dark intro band + two bold stallion panels */
.stallions-intro { padding: 72px 0 64px; }
.stallions-intro .section-title { color: #fff; margin: 0; }
.stallion-panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.stallion-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(160deg, #0c0b0a 0%, #1c1815 60%, #262019 100%);
  color: #e8e2d8;
  border-top: 4px solid var(--color-gold);
  padding: 36px 32px 40px;
}
.stallion-panel-logo img { max-height: 110px; width: auto; display: block; margin: 0 auto; }
.stallion-panel .eyebrow { color: var(--color-gold-light); margin: 14px 0 24px; }
.stallion-panel .card-img { width: 100%; }
.panel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  margin: 28px 0 0;
  padding: 0 0 24px;
  border-bottom: 1px solid #3a322a;
}
.panel-stats dt {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--color-gold-light);
  line-height: 1.1;
}
.panel-stats dd {
  margin: 6px 0 0;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #cfc6b8;
}
.panel-line { margin: 22px 0 0; font-size: .95rem; }
.panel-line strong { color: #fff; font-size: 1.05rem; }
.panel-status {
  display: inline-block;
  margin: 22px 0 22px;
  padding: 6px 14px;
  border: 1px solid var(--color-gold-light);
  color: var(--color-gold-light);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.stallion-panel .btn { margin-top: auto; }

/* Jump links — anchor buttons to sections further down a page */
.jump-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.jump-links .btn-outline:hover { background: var(--color-gold); border-color: var(--color-gold); }
section[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Generic two-column split — reused by the About section on the homepage */
.split { display: grid; gap: 48px; grid-template-columns: 1fr 1.1fr; align-items: start; }

/* Stallion page */
.stallion { display: grid; gap: 48px; grid-template-columns: 1fr 1.1fr; align-items: start; }
.stallion-photo.card-img { aspect-ratio: 3/4; }
.stallion-photo.card-img.photo-frame { aspect-ratio: 4/3; }
.stallion-wordmark { max-width: 260px; margin-bottom: 8px; }
.meta { color: var(--color-muted); font-size: 1.05rem; }
.pull-quote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-style: italic;
}
.pull-quote cite { display: block; margin-top: 8px; font-family: inherit; font-size: .9rem; font-style: normal; font-weight: 700; color: var(--color-muted); }
.station {
  border-left: 3px solid var(--color-gold);
  padding: 4px 0 4px 16px;
  margin: 0 0 28px;
}
.station h3 { margin: 0; font-size: 1.5rem; }
.station p { margin: 2px 0 0; font-weight: 600; }
.station .meta { font-weight: 400; font-size: .95rem; margin-top: 6px; }
.standing-at {
  font-family: var(--font-script);
  font-size: 1.3rem;
  color: var(--color-gold-dark);
  display: block;
  margin-top: 24px;
}

/* Forms */
.form label { display: block; margin-bottom: 18px; font-weight: 600; }
.form input, .form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid #d8d0c2;
  border-radius: var(--radius);
  font: inherit;
  background: var(--color-surface);
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--color-gold-light); border-color: var(--color-gold); }

/* Footer */
.site-footer { background: var(--color-black); color: #a99; color: #b8ada0; padding: 40px 0; text-align: center; font-size: .9rem; }
.site-footer a { color: var(--color-gold-light); }

/* Mobile */
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 3px solid var(--color-gold);
    padding: 8px 20px 20px;
  }
  .site-nav.open { display: block; }
  .site-nav a { display: block; margin: 14px 0; }
  .stallion, .split, .press-grid, .card-grid-2, .stallion-panels { grid-template-columns: 1fr; }
  .stallion-panel { padding: 28px 20px 32px; }
  .hero { padding: 90px 0; }
}