:root { --ink:#0a0d0f; --panel:#111619; --line:#293136; --paper:#f2f0e9; --muted:#9ba6aa; --signal:#ef4931; --gold:#f3b718; }
* { box-sizing:border-box; }
body { background:var(--ink); color:var(--paper); font-family:Inter,Arial,sans-serif; }
.site-header { background:rgba(10,13,15,.96); position:sticky; top:0; z-index:10; }
.wordmark { color:var(--paper); font-family:'Archivo Black',Impact,sans-serif; font-size:1.04rem; letter-spacing:0; line-height:1; text-decoration:none; }
.wordmark span { color:var(--signal); }
.navbar .nav-link { color:#c8d0d2; font-size:.88rem; font-weight:700; text-transform:uppercase; }
.navbar .nav-link:hover,.navbar .nav-link:focus { color:var(--paper); }
.nav-youtube { align-items:center; border:1px solid var(--signal); border-radius:4px; color:var(--paper)!important; display:inline-flex; gap:.45rem; padding-inline:.8rem!important; }
.youtube-logo { display:block; flex:0 0 auto; height:1.1rem; width:1.1rem; }
.hero-section { min-height:680px; position:relative; display:flex; align-items:end; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-image { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,10,11,.96) 0%,rgba(8,10,11,.56) 44%,rgba(8,10,11,.15) 100%),url('/assets/images/breeds/golden-retriever.webp') center/cover; }
.hero-content { position:relative; z-index:1; padding-bottom:6.2rem; }
.eyebrow,.breed-group { color:var(--gold); font-family:'Barlow Condensed',Arial,sans-serif; font-size:.88rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3 { font-family:'Archivo Black',Impact,sans-serif; letter-spacing:0; line-height:.96; text-transform:uppercase; }
.hero-content h1 { font-size:clamp(3.5rem,8vw,7.8rem); max-width:850px; margin:0 0 1rem; }
.hero-content h1 span { color:var(--signal); }
.hero-copy { color:#d6dcdd; font-size:1.06rem; line-height:1.65; max-width:570px; }
.btn { border-radius:4px; font-size:.85rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; padding:.78rem 1rem; }
.btn-brand { background:var(--signal); border-color:var(--signal); color:white; }
.btn-brand:hover,.btn-brand:focus { background:#ff624c; border-color:#ff624c; color:white; }
.content-band { background:var(--ink); }
.py-lg-6 { padding-top:5.5rem!important; padding-bottom:5.5rem!important; }
.section-heading h2,.statement-band h2,.page-title { font-size:clamp(2rem,4.2vw,4rem); margin:0; }
.text-link { color:var(--paper); font-weight:700; text-decoration-color:var(--signal); text-decoration-thickness:2px; text-underline-offset:5px; }
.text-link:hover { color:var(--gold); }
.breed-card { background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:transform .18s ease,border-color .18s ease; }
.breed-card:hover { border-color:#627077; transform:translateY(-3px); }
.breed-card img { aspect-ratio:16/10; display:block; height:auto; object-fit:cover; width:100%; }
.breed-card-body { padding:1.1rem; }
.breed-card-body h2,.breed-card-body h3 { font-size:1.45rem; margin:0 0 .6rem; }
.breed-card-body p:last-child { color:#b7c0c3; font-size:.9rem; line-height:1.55; margin:0; }
.video-library { background:#0d1113; border-top:1px solid var(--line); }
.video-card { background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:transform .18s ease,border-color .18s ease; }
.video-card:hover { border-color:#627077; transform:translateY(-3px); }
.video-card-media { aspect-ratio:16/9; background:#050607; overflow:hidden; position:relative; }
.video-card-media img { display:block; height:100%; object-fit:cover; width:100%; }
.play-mark { background:var(--signal); border-radius:50%; box-shadow:0 6px 24px rgba(0,0,0,.36); height:50px; left:50%; position:absolute; top:50%; transform:translate(-50%,-50%); width:50px; }
.play-mark::after { border-bottom:8px solid transparent; border-left:13px solid white; border-top:8px solid transparent; content:''; left:20px; position:absolute; top:17px; }
.video-card-body { padding:1.05rem 1.1rem 1.2rem; }
.video-card-body h3 { font-size:1.18rem; line-height:1.08; margin:0; }
.related-videos { border-top:1px solid var(--line); padding-top:2rem; }
.statement-band { background:#161b1e; border-block:1px solid var(--line); }
.statement-band p { color:#c7ced0; line-height:1.65; }
.filter-bar { background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:.7rem; }
.form-control,.form-select { background:#0d1214; border-color:#394247; color:var(--paper); border-radius:4px; min-height:44px; }
.form-control::placeholder { color:#849095; }.form-control:focus,.form-select:focus { background:#0d1214; color:var(--paper); border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(243,183,24,.14); }
.result-count { color:var(--muted); font-size:.88rem; }
.breadcrumb-wrap { background:#080a0b; border-bottom:1px solid var(--line); }
.breadcrumb { margin:0; padding:.7rem 0; font-size:.78rem; text-transform:uppercase; }
.breadcrumb-item a { color:#b8c1c4; text-underline-offset:3px; }
.breadcrumb-item.active { color:var(--gold); }
.breadcrumb-item+.breadcrumb-item::before { color:#657177; }
.breed-hero { min-height:530px; position:relative; overflow:hidden; display:flex; align-items:end; }
.breed-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.breed-hero-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,10,11,.98),rgba(8,10,11,.12) 80%); }
.breed-hero-content { position:relative; padding-bottom:4.2rem; }.breed-hero h1 { font-size:clamp(3rem,7vw,6.8rem); margin:0; }.breed-hero-content>p:last-child { max-width:620px; color:#e1e5e5; font-size:1.1rem; margin:.75rem 0 0; }
.profile-copy { color:#d0d7d8; font-size:1.22rem; line-height:1.75; max-width:690px; }
.fact-panel,.episode-pending { background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--signal); border-radius:6px; padding:1.5rem; }.fact-panel h2,.episode-pending h2 { font-size:1.55rem; }.fact-panel dl { margin:1.2rem 0 0; }.fact-panel dl>div+div { border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem; }.fact-panel dt { color:var(--gold); font-size:.78rem; font-weight:800; text-transform:uppercase; }.fact-panel dd { color:#d4dadb; line-height:1.55; margin:.35rem 0 0; }
.video-module h2 { font-size:1.8rem; margin-bottom:1rem; }.video-module iframe { border:0; }.episode-pending p { color:#c0c8ca; line-height:1.6; }.site-footer { background:#080a0b; }.site-footer p { max-width:500px; }
@media (max-width: 991.98px) { .hero-section { min-height:600px; }.hero-content { padding-bottom:4rem; } }
@media (max-width: 575.98px) { .hero-section { min-height:530px; }.hero-image { background-position:61% center; }.hero-content { padding-bottom:2.8rem; }.hero-content h1 { font-size:2.75rem; }.py-lg-6 { padding-top:3.75rem!important; padding-bottom:3.75rem!important; }.breed-hero { min-height:440px; }.breed-hero-content { padding-bottom:2.5rem; } }
.breed-article {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.article-toc {
  position: sticky;
  top: 2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--brand-accent, #f4512c);
}

.article-toc-title {
  margin-bottom: 0.75rem;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.article-toc ol {
  margin: 0;
  padding-left: 1.2rem;
}

.article-toc li + li {
  margin-top: 0.55rem;
}

.article-toc a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  line-height: 1.35;
  text-decoration: none;
}

.article-toc a:hover,
.article-toc a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.article-copy {
  max-width: 860px;
}

.article-header {
  margin-bottom: 3rem;
}

.article-header h2,
.article-section > h2 {
  text-wrap: balance;
}

.article-lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.08rem;
  line-height: 1.75;
}

.article-section {
  margin-top: 3rem;
  scroll-margin-top: 2rem;
}

.article-section p,
.faq-item p {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.75;
}

.faq-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.faq-item h3 {
  margin-bottom: 0.55rem;
  font-size: 1.1rem;
}

.article-sources {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.article-sources h2 {
  font-size: 1.15rem;
}

.article-sources a {
  color: rgba(255, 255, 255, 0.76);
}

.article-related {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.article-related > h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.article-related .breed-card-body h3 {
  font-size: 1.05rem;
  line-height: 1.05;
}

.footer-legal {
  max-width: 560px;
}

.footer-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.footer-legal a,
.footer-legal button {
  border: 0;
  background: transparent;
  color: #c4ccce;
  font-size: 0.8rem;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal a:hover,
.footer-legal button:hover {
  color: var(--gold);
}

.policy-page {
  max-width: 900px;
}

.policy-page > section {
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.policy-page h2 {
  font-size: 1.45rem;
}

.policy-page p {
  color: #c4ccce;
  line-height: 1.75;
}

.policy-page code {
  color: var(--gold);
}

.breed-scorecard {
  padding-top: 2.6rem;
  border-top: 1px solid var(--line);
}

.scorecard-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
}

.scorecard-note {
  max-width: 790px;
  margin: 1rem 0 1.6rem;
  color: #aeb8ba;
  line-height: 1.6;
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}

.score-item {
  min-width: 0;
  padding: 1rem;
  background: #0d1214;
}

.score-label,
.score-scale {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.score-label > span {
  font-weight: 700;
}

.score-label strong,
.comparison-score > strong {
  color: var(--gold);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
  line-height: 1;
}

.score-label small,
.comparison-score strong small {
  color: #9ea9ac;
  font-size: 0.68rem;
  margin-left: 2px;
}

.score-track {
  height: 8px;
  margin: 0.7rem 0 0.45rem;
  overflow: hidden;
  background: #30393d;
}

.score-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--signal));
}

.score-scale {
  color: #7f8c90;
  font-size: 0.68rem;
}

.compare-picker {
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.compare-picker .form-label {
  color: #cbd2d4;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.comparison-board {
  border: 1px solid var(--line);
}

.comparison-head,
.comparison-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) repeat(2, minmax(0, 1fr));
}

.comparison-head {
  background: #0a0d0e;
}

.comparison-corner,
.comparison-breed,
.comparison-metric,
.comparison-score {
  min-width: 0;
  padding: 1rem;
}

.comparison-corner {
  align-self: end;
}

.comparison-corner span,
.comparison-breed span {
  display: block;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.comparison-corner strong {
  display: block;
  max-width: 180px;
  margin-top: 0.25rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
}

.comparison-breed {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  border-left: 1px solid var(--line);
}

.comparison-breed img {
  width: 92px;
  aspect-ratio: 1;
  object-fit: cover;
}

.comparison-breed h2 {
  margin: 0.2rem 0 0.35rem;
  font-size: 1.45rem;
  line-height: 1;
}

.comparison-breed a {
  color: #cbd2d4;
  font-size: 0.76rem;
  text-underline-offset: 3px;
}

.comparison-row {
  border-top: 1px solid var(--line);
  background: #111719;
}

.comparison-row:nth-child(even) {
  background: #0d1214;
}

.comparison-metric strong,
.comparison-metric span,
.comparison-metric small {
  display: block;
}

.comparison-metric span {
  margin-top: 0.25rem;
  color: #9da8ab;
  font-size: 0.78rem;
  line-height: 1.35;
}

.comparison-metric small {
  margin-top: 0.5rem;
  color: #6f7c80;
  font-size: 0.68rem;
}

.comparison-score {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--line);
}

.comparison-score > strong {
  font-size: 1.8rem;
}

.comparison-disclaimer {
  margin-top: 2rem;
  padding: 1.5rem;
  border-left: 4px solid var(--signal);
  background: var(--panel);
}

.comparison-disclaimer h2 {
  font-size: 1.45rem;
}

.comparison-disclaimer p {
  max-width: 900px;
  margin: 0;
  color: #b9c2c4;
  line-height: 1.65;
}

@media (max-width: 991.98px) {
  .article-toc {
    position: static;
  }

  .article-copy {
    max-width: none;
  }

  .score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparison-head,
  .comparison-row {
    grid-template-columns: minmax(180px, 0.75fr) repeat(2, minmax(0, 1fr));
  }

  .comparison-breed {
    display: block;
  }

  .comparison-breed img {
    width: 100%;
    margin-bottom: 0.7rem;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 575.98px) {
  .score-grid {
    grid-template-columns: 1fr;
  }

  .comparison-board {
    overflow-x: auto;
  }

  .comparison-head,
  .comparison-row {
    min-width: 720px;
  }

  .comparison-head,
  .comparison-row {
    grid-template-columns: 190px repeat(2, 265px);
  }
}