/* ==========================================================================
   Homegrown Golden Retrievers — base layer: reset, tokens, typography, controls.
   Design language: warm editorial broadsheet. Hairline rules and ruled labels
   instead of pill badges and shadowed cards.
   Every colour below is declared as a surface/text PAIR, and every pair clears
   WCAG AA at its intended size. Do not use a text token on a surface it is not
   paired with here.
   ========================================================================== */

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Surfaces and the text that is allowed on them.
     paper      + ink        -> 14.7:1
     paper      + ink-soft   ->  7.2:1
     wheat      + ink        -> 13.2:1
     ink        + cream      -> 13.6:1
     ink        + honey-lit  ->  7.9:1
     paper      + gold-deep  ->  5.5:1   (links, small text)
     gold-deep  + cream      ->  5.9:1   (primary button) */
  --paper:      #FBF7F0;
  --wheat:      #F3EADB;
  --card:       #FFFFFF;
  --ink:        #241E17;
  --ink-soft:   #5C5145;
  --cream:      #FFFDF8;
  --gold:       #B8791C;   /* decorative only: rules, marks, large display */
  --gold-deep:  #8C5A11;   /* any gold that carries text */
  --honey-lit:  #E0A94A;   /* gold on the dark footer only */
  --moss:       #4A5B3C;
  --rule:       #DCCFB8;
  --rule-soft:  #EBE1CE;

  --wrap:       1180px;
  --wrap-narrow: 760px;

  /* Soft, not square. Hard corners and hairlines read as a report; a breeder site
     should feel tactile and warm. Radius and warm shadow do most of that work. */
  --r:          16px;      /* cards, images, panels */
  --r-sm:       10px;      /* buttons, inputs, tags */
  --r-lg:       24px;      /* large feature panels */

  /* Shadows are warm-tinted, never neutral grey: grey shadow on cream looks dirty. */
  --shadow-sm:  0 1px 2px rgba(92,81,69,.06), 0 3px 8px rgba(92,81,69,.05);
  --shadow:     0 2px 4px rgba(92,81,69,.05), 0 10px 26px rgba(92,81,69,.08);
  --shadow-lg:  0 4px 8px rgba(92,81,69,.06), 0 22px 48px rgba(92,81,69,.12);

  --ease: cubic-bezier(.22,.61,.36,1);

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Karla", "Helvetica Neue", Arial, sans-serif;

  --step: clamp(1.6rem, 1.1rem + 2.2vw, 3.2rem);   /* section rhythm */
}

/* ---- Page --------------------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.grp-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.grp-wrap--narrow { max-width: var(--wrap-narrow); }

.grp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 12px 18px; text-decoration: none;
}
.grp-skip:focus { left: 12px; top: 12px; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}

h1 { font-size: clamp(2.15rem, 1.5rem + 2.6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); }

p a, .grp-flow a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p a:hover, .grp-flow a:hover { color: var(--ink); }

/* Long-form column. Everything editorial flows through this. */
.grp-flow { max-width: 68ch; }
.grp-flow > * + * { margin-top: 1.15em; }
.grp-flow h2 { margin-top: 1.9em; }
.grp-flow h3 { margin-top: 1.6em; }
.grp-flow ul { list-style: none; padding: 0; }
.grp-flow ul li { position: relative; padding-left: 1.4em; margin-top: 0.5em; }
.grp-flow ul li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 14px; height: 1px; background: var(--gold);
}
.grp-flow ol { padding-left: 1.3em; }
.grp-flow ol li { margin-top: 0.5em; }

/* Drop cap opens the longest editorial pages. */
.grp-flow--lede > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 3.6em;
  line-height: 0.82;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--gold-deep);
}

/* Pull quote: warm tinted panel rather than a bare rule. */
.grp-quote {
  border-left: 3px solid var(--gold);
  background: var(--wheat);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.1em 1.4em 1.1em 1.5em;
  margin: 2em 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink);
}
.grp-quote cite { display: block; margin-top: 0.7em; font: 400 0.62em/1.5 var(--sans); font-style: normal; color: var(--ink-soft); }

/* Image with an editorial caption under a hairline. */
.grp-figure { margin: 2.2em 0; }
.grp-figure img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow); }
.grp-figure figcaption {
  border-top: 1px solid var(--rule);
  margin-top: 10px; padding-top: 8px;
  font-family: var(--serif); font-style: italic; font-size: 0.92rem; color: var(--ink-soft);
}

/* ---- Section head: ruled italic label, deliberately not a mono eyebrow --- */
.grp-sechead { margin-bottom: calc(var(--step) * 0.7); max-width: 62ch; }
.grp-sechead__label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--gold-deep); margin-bottom: 10px;
}
.grp-sechead__label::before {
  content: ""; width: 34px; height: 1px; background: var(--gold); flex: none;
}
.grp-sechead__title { margin: 0; }
.grp-sechead__lead { margin-top: 0.8em; color: var(--ink-soft); font-size: 1.06rem; }

/* ---- Divider ------------------------------------------------------------ */
.grp-divider { display: flex; align-items: center; gap: 14px; margin: var(--step) 0; }
.grp-divider__rule { flex: 1; height: 1px; background: var(--rule); }
.grp-divider__paw { width: 18px; height: 18px; fill: var(--gold); opacity: 0.85; flex: none; }

/* ---- Buttons ------------------------------------------------------------ */
.grp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 15px 30px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: var(--sans); font-weight: 600; font-size: 1rem; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.grp-btn:hover { transform: translateY(-2px); }
.grp-btn:active { transform: translateY(0); }
.grp-btn--primary {
  background: var(--gold-deep); color: var(--cream); box-shadow: var(--shadow-sm);
}
.grp-btn--primary:hover { background: #7A4E0E; box-shadow: var(--shadow); }
.grp-btn--quiet { background: var(--card); color: var(--ink); border-color: var(--rule); box-shadow: var(--shadow-sm); }
.grp-btn--quiet:hover { border-color: var(--gold); background: var(--card); box-shadow: var(--shadow); }
.grp-btn--ghost { background: rgba(255,253,248,.06); color: var(--cream); border-color: rgba(255,253,248,.42); }
.grp-btn--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ---- Forms -------------------------------------------------------------- */
.grp-form label {
  display: block; margin-bottom: 6px;
  font-family: var(--serif); font-size: 0.98rem; color: var(--ink);
}
.grp-form__opt { color: var(--ink-soft); font-style: italic; font-size: 0.88em; }
.grp-form input, .grp-form textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.grp-form textarea { min-height: 130px; resize: vertical; }
.grp-form input:focus, .grp-form textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 4px rgba(184,121,28,.12); outline: none;
}
.grp-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.grp-form__fine { margin-top: 14px; font-size: 0.9rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}