/* Wild Rooster Anatolians — site styles (Phase 1 skeleton) */

@font-face {
  font-family: "Playfair Display";
  src: url("/static/fonts/PlayfairDisplay.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/Montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Brand (from BRAND_SHEET) */
  --cream: #FAECD3;
  --ink: #1A1611;
  --sepia: #6B5236;
  /* Photo palette (brief §3) */
  --paper: #FBF3E4;      /* lighter cream for long reading surfaces */
  --wheat: #B08A4E;      /* wheat-gold accent */
  --wheat-soft: #D9C199;
  --sky: #8FA6B4;        /* muted sky-blue */
  --leather: #7A4E2D;    /* leather / earth */
  --charcoal: #24201B;
  --muted: #8A745A;
  --line: rgba(26, 22, 17, 0.12);

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 450;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; max-width: 64ch; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sepia);
  margin: 0 0 1rem;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 10vw, 128px) 0; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--charcoal); color: var(--cream); }
.section--dark .eyebrow { color: var(--wheat-soft); }
.center { text-align: center; }
.center p { margin-left: auto; margin-right: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 236, 211, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 92px; max-width: 1400px;
}
.brand { display: block; flex: none; }
.brand img { height: 74px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 24px); }
.nav a {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"], .nav .is-branch > a { border-bottom-color: var(--wheat); }
.nav .btn { padding: 10px 18px; border-bottom: 0; }
.nav-toggle {
  display: none; background: none; border: 0; padding: 10px; cursor: pointer;
  font: 500 0.72rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}
/* Dropdown (The Breed → comparison pages) */
.has-sub { position: relative; display: flex; align-items: center; }
.has-sub > a { display: inline-block; }
.has-sub > a::after { content: "▾"; font-size: 0.55em; color: var(--sepia); margin-left: 5px; vertical-align: 0.2em; }
.has-sub .sub {
  display: none; position: absolute; top: 100%; left: -18px; z-index: 30;
  flex-direction: column; min-width: 250px;
  background: var(--cream); border: 1px solid var(--line); padding: 6px 18px 10px;
  box-shadow: 0 12px 30px rgba(26,22,17,.08);
}
.has-sub:hover .sub, .has-sub:focus-within .sub { display: flex; }
.has-sub .sub a { padding: 11px 0; border-bottom: 1px solid var(--line); }
.has-sub .sub a:last-child { border-bottom: 0; }
.has-sub .sub a[aria-current="page"] { color: var(--sepia); }

@media (max-width: 1220px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 92px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { color: var(--sepia); border-bottom-color: var(--line); }
  .nav .btn { margin-top: 16px; text-align: center; padding: 14px; }
  .has-sub > a::after { content: ""; }
  .has-sub { flex-direction: column; align-items: stretch; }
  .has-sub .sub { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 0 20px; background: none; }
  .has-sub .sub a { font-size: 0.64rem; }
}
@media (max-width: 480px) {
  .brand img { height: 58px; }
  .site-header .wrap { height: 76px; }
  .nav { top: 76px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--ink); color: var(--cream);
  font: 500 0.75rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; padding: 16px 28px; border: 1px solid var(--ink);
  transition: background .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--light:hover { background: transparent; color: var(--cream); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

/* ---------- Placeholders (swapped for real photos in Phase 2) ---------- */
.ph {
  position: relative;
  background:
    linear-gradient(160deg, rgba(143,166,180,.55) 0%, rgba(217,193,153,.55) 55%, rgba(176,138,78,.6) 100%),
    var(--wheat-soft);
  display: flex; align-items: flex-end;
  min-height: 260px; overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  font: 500 0.68rem/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(26,22,17,.6); padding: 16px 18px;
}
.ph--tall { aspect-ratio: 4 / 5; min-height: 0; }
.ph--wide { aspect-ratio: 16 / 9; min-height: 0; }
.ph--square { aspect-ratio: 1; min-height: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(88vh, 820px); display: flex; align-items: flex-end; color: var(--cream); }
.hero .ph { position: absolute; inset: 0; min-height: 0; background:
    linear-gradient(180deg, rgba(26,22,17,0) 35%, rgba(26,22,17,.55) 100%),
    linear-gradient(160deg, #8FA6B4 0%, #C7AE85 50%, #8E6C3E 100%); }
.hero .ph::after { position: absolute; top: 0; right: 0; color: rgba(250,236,211,.7); }
.hero .wrap { position: relative; padding-bottom: clamp(48px, 8vw, 96px); width: 100%; }
.hero h1 { max-width: 16ch; }
.hero .eyebrow { color: var(--cream); }
.hero p { font-size: 1.1rem; max-width: 46ch; }

.page-head { padding: clamp(64px, 9vw, 120px) 0 clamp(32px, 5vw, 56px); }
.page-head p { font-size: 1.1rem; color: #3a3128; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

.card { text-decoration: none; display: block; }
.card h3 { margin: 18px 0 4px; }
.card .meta { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

.pillars { list-style: none; padding: 0; margin: 0; }
.pillars li { border-top: 1px solid var(--line); padding: 22px 0; }
.pillars strong { font-family: var(--serif); font-weight: 450; font-size: 1.25rem; display: block; }

.quote { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; margin: 0 auto 1rem; max-width: 26ch; }
.attrib { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--line); padding-top: 32px; }
@media (max-width: 820px) { .cols3 { grid-template-columns: 1fr; } }
.cols3 dl { margin: 0; }
.cols3 dt { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.cols3 dd { margin: 2px 0 0; }

.note { border-left: 2px solid var(--wheat); padding: 4px 0 4px 18px; color: #3a3128; }

details { border-top: 1px solid var(--line); padding: 18px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-family: var(--serif); font-size: 1.2rem; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; font-family: var(--sans); color: var(--sepia); }
details[open] summary::after { content: "–"; }
details p { margin-top: 12px; }

.map-ph { aspect-ratio: 16 / 9; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; background: var(--paper); }

/* ---------- Form ---------- */
.form { display: grid; gap: 18px; max-width: 640px; }
.form label { display: grid; gap: 6px; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sepia); }
.form input, .form textarea, .form select {
  font: 400 1rem/1.5 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); padding: 12px 14px; width: 100%;
}
.form textarea { min-height: 140px; }

/* ---------- CTA band + footer ---------- */
.cta-band { background: var(--sepia); color: var(--cream); text-align: center; }
.cta-band .eyebrow { color: var(--wheat-soft); }

.site-footer { background: var(--charcoal); color: var(--cream); padding: 72px 0 40px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: start; }
.site-footer img { width: 220px; height: auto; }
.site-footer h4 { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--wheat-soft); margin: 8px 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; font-size: 0.9rem; }
.site-footer a { text-decoration: none; opacity: .85; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid rgba(250,236,211,.15); padding-top: 24px; font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
@media (max-width: 820px) { .site-footer .wrap { grid-template-columns: 1fr; } }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--cream); padding: 10px 14px; z-index: 50; }

/* ---------- Content pages: byline, prose, questions ---------- */
.lead { font-size: 1.15rem; color: #3a3128; max-width: 60ch; }
.byline {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.byline__who { color: var(--sepia); }
.byline__trust { text-transform: none; letter-spacing: 0; font-size: 0.85rem; flex-basis: 100%; color: #5c4d3c; }

.prose { padding-bottom: clamp(48px, 7vw, 96px); }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.prose p, .prose li { max-width: 64ch; }
.prose table { border-collapse: collapse; width: 100%; margin: 24px 0 32px; font-size: 0.92rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font: 500 0.7rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sepia); }
.prose td:first-child { font-weight: 500; }
.prose .ph { margin: 32px 0; }
@media (max-width: 720px) { .prose table { display: block; overflow-x: auto; } }

.qlist { list-style: none; margin: 24px 0 32px; padding: 0; }
.qlist li { border-top: 1px solid var(--line); padding: 20px 0; }
.qlist li:last-child { border-bottom: 1px solid var(--line); }
.qlist a { font-family: var(--serif); font-size: 1.25rem; text-decoration: none; display: block; margin-bottom: 6px; }
.qlist a:hover { color: var(--sepia); }
.qlist p { margin: 0; color: #3a3128; max-width: 64ch; }

.qhub { padding-bottom: clamp(48px, 7vw, 96px); display: grid; gap: 40px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .qhub { grid-template-columns: 1fr; } }
.qgroup h2 { font-size: 1.5rem; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.qgroup h2 a { text-decoration: none; }
.qgroup ul { list-style: none; padding: 0; margin: 0; }
.qgroup li { padding: 8px 0; }
.qgroup li a { text-decoration: none; }
.qgroup li a:hover { text-decoration: underline; }

.qa { border-top: 1px solid var(--line); padding: 32px 0; }
.qa h2 { margin-top: 0; }
.qa .more { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--sepia); }

.related { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { padding: 6px 0; }

.draft-band {
  background: #F2C94C; color: var(--ink); text-align: center;
  font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 10px var(--gutter);
}
.qa .draft-band { margin-bottom: 16px; }

/* ---------- Hero video ---------- */
.hero--video { min-height: min(92vh, 860px); color: var(--cream); background: var(--charcoal); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 35% 50%;
}
.hero__poster { z-index: 0; }
.hero__video { z-index: 1; }
.hero__fade { z-index: 2; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.hero--faded .hero__fade { opacity: 1; }
.hero__shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(26,22,17,0) 38%, rgba(26,22,17,.42) 72%, rgba(26,22,17,.58) 100%),
    linear-gradient(180deg, rgba(26,22,17,.08) 0%, rgba(26,22,17,0) 30%, rgba(26,22,17,.55) 100%);
}
.hero--video .wrap { position: relative; z-index: 4; display: flex; justify-content: flex-end; }
.hero__content { max-width: 540px; }
.hero__content h1 { max-width: 14ch; }
.hero__sound, .hero__play {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 10px;
  font: 500 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream); background: rgba(26,22,17,.45); border: 1px solid rgba(250,236,211,.7);
  padding: 12px 18px 12px 14px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(4px);
  transition: background .2s, border-color .2s;
}
.hero__sound:hover, .hero__play:hover { background: rgba(26,22,17,.7); border-color: var(--cream); }
.hero__sound { left: var(--gutter); bottom: clamp(24px, 4vw, 48px); }
.hero__sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero__sound[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.hero__sound[aria-pressed="true"] .hero__sound-on { display: none; }
.hero__sound[aria-pressed="false"] .hero__sound-off { display: none; }
.hero__play { left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 18px 26px 18px 20px; font-size: .8rem; }
.hero__play svg { width: 20px; height: 20px; fill: currentColor; }
.hero--static .hero__video, .hero--static .hero__sound { display: none; }
.hero:not(.hero--static) .hero__play { display: none; }
@media (max-width: 720px) {
  .hero--video { min-height: 78vh; }
  .hero__media img, .hero__media video { object-position: 28% 50%; }
  .hero__shade { background: linear-gradient(180deg, rgba(26,22,17,.1) 0%, rgba(26,22,17,.15) 35%, rgba(26,22,17,.7) 100%); }
  .hero--video .wrap { justify-content: flex-start; }
  .hero__sound { left: auto; right: var(--gutter); }
}

.clip { position: relative; }
.clip video { width: 100%; height: auto; display: block; background: var(--charcoal); }
.clip figcaption { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }

/* ---------- Good Dog rating line ---------- */
.rating-line { margin-top: 28px; }
.rating {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 0.72rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; border: 1px solid rgba(250,236,211,.35); padding: 12px 18px;
}
a.rating:hover { border-color: var(--wheat-soft); }
.attrib a { color: inherit; }
.rating__stars { color: var(--wheat-soft); letter-spacing: 0.1em; font-size: 0.9rem; }

/* ---------------------------------------------------------------- Our Dogs
   One template for every dog: lead photo, name block with a portrait beside the
   story, facts, pedigree, video, photo grid. One spacing value between blocks. */
.dog { --dog-gap: clamp(32px, 5vw, 56px); }
.dog .wrap > * { margin-top: 0; margin-bottom: 0; }
.dog .wrap > * + * { margin-top: var(--dog-gap); }
.dog-group { padding-bottom: 0; }

/* Tiles at the top of the page */
.tiles { --tile-gap: clamp(14px, 2vw, 28px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tile-gap); }
.tiles .card { flex: 0 0 calc((100% - 4 * var(--tile-gap)) / 5); min-width: 0; }
.tiles .card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.tiles .card h3 { font-size: clamp(1rem, 1.5vw, 1.3rem); white-space: nowrap; margin: 14px 0 4px; }
.tiles .card .meta { white-space: nowrap; letter-spacing: 0.14em; }
.tiles .card .reg { display: block; font-size: 0.82rem; line-height: 1.3; margin: 0 0 4px; }
@media (max-width: 1100px) { .tiles .card .reg { min-height: 2.6em; } }
@media (max-width: 900px) { .tiles .card { flex-basis: calc((100% - 2 * var(--tile-gap)) / 3); } }
@media (max-width: 640px) { .tiles .card { flex-basis: calc((100% - var(--tile-gap)) / 2); } }

/* Lead photo: the same wide shape for every dog, never taller than two thirds of the screen */
.dog-lead { margin: 0; }
.dog-lead img { width: 100%; height: auto; aspect-ratio: 2 / 1; max-height: 66vh; object-fit: cover; display: block; }

/* Portrait on the left, name block and story on the right. The portrait is as
   tall as the name and story together, so both columns end on the same line.

   On desktop the whole block scales as one piece: every size inside it is a
   fraction of the block's width (cqw), so the text wraps the same way at every
   window width and the portrait keeps one fixed shape. That is what lets the
   watermark be put on the finished portrait, in its true corners, and never be
   cropped. Below 1000px the block stacks: name, portrait, story. */
.dog-intro { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
  grid-template-areas: "portrait id" "portrait story"; column-gap: 8.696%; row-gap: 0; }
.dog-portrait { grid-area: portrait; position: relative; margin: 0; }
.dog-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--mark-corner, right top); display: block; }
.dog-id { grid-area: id; padding-bottom: 1.812cqw; }
.dog-id .eyebrow { font-size: 1.087cqw; margin: 0 0 1.333em; }
.dog-id h2 { font-size: 3.768cqw; margin: 0 0 0.144em; }
.dog-id h3 { font-size: 3.478cqw; margin: 0 0 0.156em; }
.dog-id .meta { font-size: 1.54cqw; letter-spacing: normal; text-transform: none; margin: 0; }
.dog-story { grid-area: story; }
.dog-story p { font-size: 1.54cqw; margin: 0 0 1em; max-width: none; }
.dog-story > p:last-child { margin-bottom: 0; }
@media (max-width: 999px) {
  .dog-intro { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "id" "portrait" "story"; row-gap: 24px; }
  .dog-portrait img { position: static; height: auto; }
  .dog-id { padding-bottom: 0; }
  .dog-id .eyebrow { font-size: 0.75rem; }
  .dog-id h2 { font-size: clamp(2rem, 6vw, 2.6rem); }
  .dog-id h3 { font-size: clamp(1.8rem, 5.4vw, 2.4rem); }
  .dog-id .meta, .dog-story p { font-size: 1.0625rem; }
}
.cols3 h3 + dd { margin-top: 12px; }

/* Photo grid: every thumbnail 4:3, three across, full photo opens on click */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 20px); }
.gallery a { display: block; cursor: zoom-in; }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

/* Full photo viewer */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(26, 22, 17, 0.9); }
.lightbox img { display: block; max-width: 96vw; max-height: 94vh; width: auto; height: auto; cursor: zoom-out; }
.lightbox button { position: fixed; top: 16px; right: 20px; font: 500 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream); background: rgba(26,22,17,.45); border: 1px solid rgba(250,236,211,.7); padding: 12px 18px; border-radius: 999px; cursor: pointer; }

/* Video inside a section: same player as the home page (muted start, our own sound button) */
.clip--player { margin: 0; position: relative; }
.clip--player video { aspect-ratio: 16 / 9; object-fit: cover; }
.clip__sound, .clip__play {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px;
  font: 500 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream); background: rgba(26,22,17,.45); border: 1px solid rgba(250,236,211,.7);
  padding: 12px 18px 12px 14px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(4px);
  transition: background .2s, border-color .2s;
}
.clip__sound:hover, .clip__play:hover { background: rgba(26,22,17,.7); border-color: var(--cream); }
.clip__sound { left: clamp(14px, 2vw, 28px); top: clamp(14px, 2vw, 28px); }
.clip__sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.clip__sound[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.clip__sound[aria-pressed="true"] .clip__sound-on { display: none; }
.clip__sound[aria-pressed="false"] .clip__sound-off { display: none; }
.clip__play { left: 50%; top: calc(50% - 16px); transform: translate(-50%, -50%); padding: 18px 20px; }
.clip__play svg { width: 22px; height: 22px; fill: currentColor; }
.clip--player:not(.is-waiting) .clip__play { display: none; }

/* Reviews, quoted in full */
.reviews { columns: 2; column-gap: clamp(24px, 4vw, 56px); }
.review { break-inside: avoid; margin: 0 0 40px; padding-top: 24px; border-top: 1px solid rgba(26,22,17,.18); }
.review p { margin: 0 0 0.9em; }
@media (max-width: 800px) { .reviews { columns: 1; } }

/* Five-generation pedigree chart */
.pedigree { margin-top: 40px; border-top: 1px solid rgba(26,22,17,.18); padding-top: 20px; }
.pedigree summary { cursor: pointer; font-family: var(--serif); font-size: 1.35rem; }
.pedigree-key { font-size: 0.85rem; color: var(--muted); max-width: 70ch; margin: 14px 0 18px; }
.pedigree-scroll { overflow-x: auto; }
.pedigree table { border-collapse: collapse; width: 100%; min-width: 900px; font-size: 0.78rem; line-height: 1.3; }
.pedigree th { text-align: left; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; }
.pedigree td { border: 1px solid rgba(26,22,17,.16); padding: 5px 10px; vertical-align: middle; width: 20%; }
.pedigree td.ch { font-weight: 700; background: rgba(26,22,17,.05); }
.pedigree td abbr { text-decoration: none; letter-spacing: 0.04em; }
.pedigree td small { display: block; font-weight: 400; color: var(--muted); font-size: 0.7rem; }

.pedigree--g3 table { min-width: 560px; }
.pedigree--g3 td { width: 33.33%; }
.pedigree--g4 table { min-width: 760px; }
.pedigree--g4 td { width: 25%; }

/* Long application form, grouped the way the paper questionnaire is */
.form--long { max-width: 760px; }
.form--long fieldset { border: 0; border-top: 1px solid var(--line); margin: 0 0 8px; padding: 28px 0 8px; }
.form--long legend { font-family: var(--serif); font-size: 1.35rem; padding: 0 12px 0 0; }
.form--long label { display: block; margin: 0 0 20px; line-height: 1.45; }
.form--long input, .form--long textarea { display: block; width: 100%; margin-top: 8px; }
.form--long .req { color: var(--muted); font-size: 0.8em; }

/* Home page photos (the approved Our Dogs photos, reused) */
.photo-stack { display: grid; gap: clamp(10px, 1.6vw, 20px); }
.photo-stack img, .photo-one img, .card > img { width: 100%; height: auto; display: block; }

/* Site notice: small plain text at the foot of information pages */
.site-notice { font-size: 0.8rem; line-height: 1.5; color: #5c4d3c; max-width: 68ch; margin: 48px 0 24px; }

/* Past litters and the photo review page */
.litter { margin-top: 56px; }
.litter .meta { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 4px 0 20px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; padding-bottom: 80px; }
.review-photo img { width: 100%; height: auto; display: block; }
.review-photo p { font-size: 0.85rem; line-height: 1.5; margin: 10px 0 0; overflow-wrap: anywhere; }

/* Placement map: one pin per region; the list underneath says the same thing in text */
.pmap { margin-top: 32px; }
.pmap__art { position: relative; max-width: 960px; margin: 0 auto; }
.pmap__art > img { width: 100%; height: auto; display: block; }
.pin { position: absolute; width: 0; height: 0; }
.pin button { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 12px; height: 12px; padding: 0;
  border-radius: 50%; border: 2px solid var(--cream, #faecd3); background: #7a2e1d; cursor: pointer; box-shadow: 0 1px 3px rgba(26,22,17,.35); }
.pin--s2 button { width: 17px; height: 17px; }
.pin--s3 button { width: 23px; height: 23px; }
.pin button::after { content: ""; position: absolute; inset: -12px; }   /* a bigger target for fingers */
.pin__card { display: none; position: absolute; z-index: 5; bottom: 16px; left: 0; transform: translateX(-50%); min-width: 150px;
  background: #fffaf0; border: 1px solid #b9a583; border-radius: 6px; padding: 10px 14px; box-shadow: 0 6px 18px rgba(26,22,17,.2);
  font: 400 0.82rem/1.45 var(--sans); color: #2b241b; text-align: left; white-space: nowrap; }
.pin__card strong { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.pin__card ul { list-style: none; margin: 0; padding: 0; }
.pin--card-below .pin__card { bottom: auto; top: 16px; }
.pin--card-left .pin__card { left: auto; right: -10px; transform: none; }
.pin--card-right .pin__card { left: -10px; transform: none; }
.pin:hover, .pin:focus-within { z-index: 6; }
.pin:hover .pin__card, .pin:focus-within .pin__card { display: block; }
.pmap__list { list-style: none; margin: 28px auto 0; padding: 0; max-width: 960px; columns: 2; column-gap: 40px; font-size: 0.92rem; line-height: 1.5; }
.pmap__list li { break-inside: avoid; margin: 0 0 6px; }
.pmap--compact .pmap__list { columns: 1; }
.gallery--captioned figure { margin: 0; }
.gallery--captioned figcaption { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 10px; }

@media (max-width: 760px) { .pmap__list { columns: 1; } }

/* Pedigree trees: parents and grandparents always open, with photos in the boxes */
.pedigree-top { margin-top: 40px; border-top: 1px solid rgba(26,22,17,.18); padding-top: 24px; }
.pedigree-top h3 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; margin: 0 0 16px; }
.pedigree-top table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.86rem; line-height: 1.35; }
.pedigree-top th { text-align: left; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 6px 12px; }
.pedigree-top td { border: 1px solid rgba(26,22,17,.16); padding: 12px; vertical-align: middle; width: 50%; }
.pedigree-top td.ch { font-weight: 700; background: rgba(26,22,17,.05); }
.pedigree-top td abbr { text-decoration: none; letter-spacing: 0.04em; }
.pedigree-top td small { display: block; font-weight: 400; color: var(--muted); font-size: 0.78rem; }
.pedigree-top + .pedigree { margin-top: 20px; border-top: 0; padding-top: 0; }
.ped-photo { display: block; }
.ped-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ped-photo--ref { cursor: zoom-in; }
.ped-photo--lg { max-width: 300px; }
.ped-photo--sm { max-width: 150px; }
.ped-credit { display: block; font-size: 0.68rem; font-weight: 400; line-height: 1.3; color: var(--muted); margin: 4px 0 8px; }
.ped-photo--lg + .ped-name, .ped-photo--sm + .ped-name { margin-top: 8px; }
.ped-name { display: block; }
.pedigree td .ped-photo--sm { max-width: 110px; }
.lightbox figure { margin: 0; }
.lightbox figcaption { background: rgba(26,22,17,.92); color: var(--cream); font: 400 0.9rem/1.4 var(--sans); padding: 12px 16px; text-align: center; }
.lightbox figcaption strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.1rem; }
.lightbox figcaption a { color: var(--cream); }
.lightbox figure img { max-height: 82vh; }

/* A parent or grandparent with no photo, registered only in Turkey's stud book */
.ped-nophoto { display: block; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* ---------- Audit fix pass 1 (2026-11-13) ---------- */
/* Home hero on phones: the Hear Tucker button moves to the top corner, clear of Join the Waitlist,
   and the picture is framed on Tucker's head. */
@media (max-width: 480px) {
  .hero__media img, .hero__media video { object-position: 48% 50%; }
  .hero__sound { top: 16px; bottom: auto; right: var(--gutter); left: auto; }
}
/* Pedigree trees keep their sideways scroll on narrow screens; a fading right edge and a short line say so. */
.pedigree-hint { display: none; }
@media (max-width: 760px) {
  .pedigree-scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .pedigree-hint { display: block; margin: 8px 0 0; font-size: 0.8rem; color: var(--muted); }
  .pedigree-hint::after { content: " \2192"; }
}
/* Long web addresses in article text wrap instead of pushing the page wider than the phone. */
main a { overflow-wrap: anywhere; }
/* No text under 12px on phones: navigation, footer, captions, credits and the other small labels.
   Only selectors measured below 12px at 390 wide are listed, so nothing larger is made smaller. */
@media (max-width: 480px) {
  .nav-toggle, .draft-band, .hero__sound-label, .clip__sound span, .card .meta, .litter .meta,
  .attrib, .attrib a, a.rating, .legal, dl dt, .pedigree th, .pedigree-top th,
  .ped-name small, .ped-credit, .ped-credit a, .ped-nophoto, .byline__who, .byline__date,
  fieldset label, label .req { font-size: 12px; }
  .form fieldset label, .form fieldset label .req, .site-footer h4, .site-footer .legal, main table th, table th,
  .gallery figure figcaption, figure.clip figcaption, .cols3 dl dt, main td .ped-name small, .qa p a.more { font-size: 12px; }
}

/* Puppies page: the current-litter photo, shown whole */
.current-litter-photo img { display: block; width: 100%; height: auto; }

/* ---------- Audit fix pass 2 (2026-11-13) ----------
   A picture whose dog does not fit the standard tile shape whole keeps its own shape (its width and height
   are set on the image itself), so rows line up along their tops and nothing is cut to fit the grid. */
.gallery { align-items: start; }
.tiles { align-items: flex-start; }

/* ---------- Audit fix pass 3 (2026-11-13) ----------
   Photo grids are packed into columns: each photo keeps its own shape and sits directly under the one
   above it, with even spacing. 3 columns on a desktop, 2 on a tablet, 1 on a phone. The script in
   site.js fills the columns; without it the plain grid below shows instead. */
@media (min-width: 641px) and (max-width: 1000px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery--packed { display: flex; align-items: flex-start; }
.gallery__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.6vw, 20px); }

/* ---------- Layout fixes 2026-11-14 ----------
   Puppies page, "Before you apply": a short section, so half the usual space above and below and no extra
   space over its heading. */
#before-you-apply { padding: clamp(32px, 5vw, 64px) 0; }
#before-you-apply h2 { margin-top: 0; }
#before-you-apply .prose { padding-bottom: 0; }      /* the space below the text matches the space above the heading */
#before-you-apply .prose > :last-child { margin-bottom: 0; }
/* Questions hub: the notice sits under the question lists, full width, not in the right-hand column. */
.qhub .site-notice { grid-column: 1 / -1; max-width: none; }
/* Application form labels: never under 12px. */
.form label { font-size: 0.75rem; }

/* ---------- Pedigrees, one collapsed section per dog (2026-11-14) ----------
   One chart per dog. The parents column carries a 300 x 225 photo above the name and the grandparents column
   a 150 x 113 photo, all 4:3; a dog with no photo shows its name only. Later generations are text. */
.pedigree td.ped-col--lg { width: 324px; min-width: 324px; vertical-align: top; }
.pedigree td.ped-col--sm { width: 174px; min-width: 174px; vertical-align: top; }
.pedigree td.ped-col--lg:not(.has-photo), .pedigree td.ped-col--sm:not(.has-photo) { vertical-align: middle; }
.pedigree td .ped-photo--lg { width: 300px; max-width: none; }
.pedigree td .ped-photo--sm { width: 150px; max-width: none; }
.pedigree td.has-photo { padding: 12px; }
.pedigree td.ped-col--lg .ped-name { font-size: 0.86rem; }
.pedigree table { min-width: 1040px; }
.pedigree--g4 table { min-width: 900px; }
.pedigree--g3 table { min-width: 720px; }
.pedigree td { width: auto; }

/* ---------- Application form, live (2026-11-14) ---------- */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__error { color: #8a1f11; font-weight: 500; margin: 0 0 16px; }
.form__thanks { font-family: var(--serif); font-size: 1.35rem; line-height: 1.4; max-width: 40ch; margin: 24px 0; }
.form__thanks:focus { outline: none; }
.form[hidden], .form__error[hidden], .form__thanks[hidden] { display: none; }

/* A photo grid marked hidden stays out of the page (Litters: weekly boxes until there are photos). */
.grid[hidden] { display: none; }

/* ---------- Puppies page, "How we raise our puppies" (2026-11-14) ----------
   Heading on top; under it an upright 4:5 photo on the left and the text on the right. The photo's top lines
   up with the first line of the text and it is never taller than the text: it takes the height of the text
   beside it, up to the full width of its column. On a phone it sits between the heading and the text. */
.raise { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 96px); align-items: stretch; }
.raise__head { grid-column: 1 / -1; }
.raise__photo { margin: 0; position: relative; height: 0; min-height: 100%; }
.raise__photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: left top; }
.raise__text > :first-child { margin-top: 0; }
.raise__text > :last-child { margin-bottom: 0; }
@media (max-width: 820px) {
  .raise { grid-template-columns: 1fr; }
  .raise__photo { height: auto; min-height: 0; margin: 0 0 24px; }
  .raise__photo img { position: static; width: 100%; height: auto; }
}

/* Home hero label: when it needs two lines, break them evenly, never one word alone on the second line. */
.hero .eyebrow { text-wrap: balance; }

/* ---------- Our Farm: the two people photos (2026-11-14) ----------
   Side by side at every width, the same size, 4:5, never shown larger than the smaller file's real size
   (693 px wide). No caption. */
.people-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.2vw, 16px); max-width: 1402px; }
.people-pair img { display: block; width: 100%; max-width: 693px; height: auto; aspect-ratio: 4 / 5 !important; object-fit: cover; }