:root {
  --cream: #f7f1e7;
  --paper: #fffaf2;
  --truffle: #3d261c;
  --cocoa: #6b4433;
  --olive: #66713a;
  --olive-soft: #e6e6cf;
  --line: #e4d8c5;
  --muted: #7d6a5c;
  --radius: 18px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Karla", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--truffle);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(247, 241, 231, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--truffle); }
.brand__mark { width: 48px; height: auto; }
.brand__name { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--muted); transition: color .15s; }
.nav a:hover { color: var(--truffle); }

.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--paper); }
.lang button {
  font: 700 13px/1 var(--sans); letter-spacing: .06em;
  border: 0; background: transparent; color: var(--muted);
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--truffle); color: var(--paper); }

/* ---------- shared ---------- */
.eyebrow {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--olive);
}
.eyebrow--light { color: #c9cf9f; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section__head { margin-bottom: 40px; }
.section__head--center { text-align: center; max-width: 720px; margin-inline: auto; }
.section__intro { color: var(--muted); margin: 14px 0 0; font-size: 18px; }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 13px 24px; border-radius: 999px; transition: transform .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--solid { background: var(--truffle); color: var(--paper); }
.btn--solid:hover { background: var(--cocoa); }
.btn--ghost { border: 1.5px solid var(--truffle); }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 80px); }
.hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
h1 { font-size: clamp(42px, 6.2vw, 76px); }
.h1-sub { display: block; font-style: italic; font-weight: 400; color: var(--cocoa); }
.lead { font-size: clamp(18px, 1.8vw, 21px); margin: 24px 0 14px; max-width: 34em; }
.notice {
  display: inline-block; margin: 0 0 30px;
  font-size: 14px; color: var(--olive);
  background: var(--olive-soft); border-radius: 999px; padding: 5px 14px;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__photo { margin: 0; position: relative; }
.hero__photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 999px 999px var(--radius) var(--radius);
  box-shadow: 0 30px 60px -30px rgba(61, 38, 28, .45);
}
.hero__photo::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1;
  border: 1.5px solid var(--cocoa); opacity: .35;
  border-radius: 999px 999px var(--radius) var(--radius);
}

/* ---------- facts ---------- */
.facts { background: var(--paper); border-block: 1px solid var(--line); }
.facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding: 28px 20px; text-align: center; display: grid; gap: 2px; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact strong { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--cocoa); }
.fact span { font-size: 14px; color: var(--muted); }

/* ---------- about ---------- */
.about__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.about .section__head { position: sticky; top: 100px; }
.prose p { margin: 0 0 1.2em; }
.prose p:first-child::first-letter {
  font-family: var(--serif); float: left; font-size: 3.6em; line-height: .85;
  padding: 6px 10px 0 0; color: var(--cocoa);
}

/* ---------- dogs ---------- */
.dogs { background: var(--paper); border-top: 1px solid var(--line); }
.dogs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dog {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.dog__photo { margin: 0; padding: 20px 20px 0; }
.dog__photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  border-radius: 999px 999px 12px 12px;
}
.dog__body { padding: 24px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.dog__tag {
  align-self: flex-start; margin: 0 0 10px;
  font-size: 13px; font-weight: 700; color: var(--paper); background: var(--olive);
  padding: 4px 12px; border-radius: 999px;
}
.dog__tag--young { background: var(--cocoa); }
.dog h3 { font-size: 28px; margin-bottom: 18px; }
.dog__facts { margin: 0 0 20px; display: grid; gap: 0; }
.dog__facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.dog__facts dt { color: var(--muted); font-size: 15px; }
.dog__facts dd { margin: 0; font-weight: 500; }
.dog__win { margin-top: auto; background: var(--paper); border-radius: 12px; padding: 16px 18px; border-left: 3px solid var(--olive); }
.dog__win p { margin: 0; font-size: 15.5px; }
.dog__win .dog__win-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--olive); margin-bottom: 4px; }

.dog__photo--koralina img { object-position: center 20%; }
.dog__photo--nixie img { object-position: center 0%; }

/* ---------- litters ---------- */
.litters { background: var(--truffle); color: var(--paper); text-align: center; }
.litters__date { font-family: var(--serif); font-size: clamp(28px, 4vw, 46px); margin: 0; font-style: italic; }

/* ---------- contact ---------- */
.contact__inner { text-align: center; }
.contact .section__head { margin-bottom: 28px; }
.contact__logo { width: 96px; height: auto; margin: 0 auto 20px; }
.contact__mail {
  display: inline-block; font-family: var(--serif); font-size: clamp(20px, 3vw, 30px);
  text-decoration: none; border-bottom: 2px solid var(--olive); padding-bottom: 4px;
  word-break: break-all;
}
.contact__mail:hover { color: var(--cocoa); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 24px 0; font-size: 14px; color: var(--muted); }
.footer__inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .nav { display: none; }
  .lang { margin-left: auto; }
  .hero__inner, .about__grid, .dogs__grid { grid-template-columns: 1fr; }
  .hero__photo { max-width: 380px; margin-inline: auto; width: 100%; order: -1; }
  .hero__photo::before { inset: 12px -12px -12px 12px; }
  .about .section__head { position: static; }
  .facts__grid { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .dog__body { padding: 20px; }
  .dog__facts div { grid-template-columns: 90px 1fr; }
  .fact { padding: 22px 12px; }
  .fact strong { font-size: 20px; }
}