/* A Little Hill Farm — site styles
   Everything the goat pages need. The header and footer are the only
   "chrome"; add ?embed=1 to any URL to hide them (see site.js) so the
   same pages can be dropped into Shopify inside an iframe. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --paper:#F3EEE4; --card:#FBF8F2; --ink:#1E1B16; --body:#4A443A;
  --muted:#6B6353; --line:#E3DCCE; --line-soft:#EAE3D6;
  --moss:#46563C; --rust:#B0553A; --gold:#9C7B2E; --dark:#2A2A24;
  --serif:'Newsreader',Georgia,serif; --sans:'Hanken Grotesk',system-ui,sans-serif;
  --wrap:1180px;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; }
img { max-width:100%; display:block; }
/* The hidden attribute must win over any display rule (e.g. .store-grid). */
[hidden] { display:none !important; }
h1,h2,h3,h4,p,figure,dl,dd,ul { margin:0; }
ul { padding:0; list-style:none; }
a { color:var(--moss); }
a:hover { color:var(--rust); }
:focus-visible { outline:2px solid var(--rust); outline-offset:3px; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.serif { font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; }
.eyebrow { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--rust); }
.label { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.slot { color:var(--muted); border-bottom:1px dashed #C9BFA9; }
.lede { font-size:17px; line-height:1.65; color:var(--body); text-wrap:pretty; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:16px; z-index:99; background:var(--ink); color:var(--paper); padding:10px 16px; }

/* ---------- chrome ---------- */
.site-header { position:sticky; top:0; z-index:30; background:rgba(243,238,228,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.site-header .bar { display:flex; align-items:center; gap:28px; padding:12px 28px; max-width:var(--wrap); margin:0 auto; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:13px; margin-right:auto; text-decoration:none; color:inherit; }
.brand img { height:46px; width:auto; }
.brand .name { font-family:var(--serif); font-size:20px; line-height:1.1; }
.brand .sub { font-size:9.5px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); }
.site-nav { display:flex; gap:4px; flex-wrap:wrap; }
.site-nav a { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding:9px 14px; border-radius:2px; border:1px solid transparent; }
.site-nav a:hover { color:var(--ink); border-color:var(--line); }
.site-nav a[aria-current="page"] { background:var(--moss); border-color:var(--moss); color:var(--card); }

.site-footer { background:var(--dark); color:#D5CEBE; margin-top:96px; }
.site-footer .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; padding:56px 28px 44px; max-width:var(--wrap); margin:0 auto; }
.site-footer h4 { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:#9A9182; margin-bottom:16px; }
.site-footer a { color:#D5CEBE; text-decoration:none; font-size:14px; }
.site-footer a:hover { color:#E0B968; }
.site-footer li { padding:4px 0; }
.site-footer .mark { font-family:var(--serif); font-size:22px; color:var(--paper); margin-bottom:10px; }
.site-footer .fine { border-top:1px solid #45423A; padding:18px 28px 32px; max-width:var(--wrap); margin:0 auto; font-size:12px; color:#9A9182; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- shared pieces ---------- */
.page-head { padding:64px 0 48px; max-width:62ch; }
.page-head h1 { font-size:clamp(40px,5vw,62px); line-height:1.05; margin:18px 0 20px; }
.rule-head { display:flex; align-items:baseline; gap:16px; margin-bottom:28px; }
.rule-head h2 { font-size:34px; }
.rule-head .rule { flex:1; height:1px; background:var(--line); }
.rule-head a { font-size:12px; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; color:var(--rust); }
.badge { display:inline-block; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; background:var(--gold); color:#fff; padding:5px 10px; border-radius:2px; }
.badge.rust { background:var(--rust); }
.btn { display:inline-block; font-family:inherit; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; background:var(--moss); color:var(--card); border:none; padding:12px 22px; border-radius:2px; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--ink); color:var(--card); }
.btn.ghost { background:none; color:var(--moss); border:1px solid #C9BFA9; }
.btn.ghost:hover { background:var(--moss); color:var(--card); }
.link-u { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid #C9BFA9; padding-bottom:2px; }

/* Fixed counts rather than auto-fit. auto-fit packs in whatever fits, which
   on the way down gives an awkward 3 + 1 orphan; stepping 4 -> 2 -> 1 keeps it
   a tidy block at every width, and 2x2 reads better than three-and-a-stray. */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (max-width:820px) { .stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:430px) { .stats { grid-template-columns:1fr; } }
/* Baseline-aligned on one line rather than stacked. Keeps all four figures
   legible while giving back roughly half the vertical space, which is what
   lets the does appear without scrolling. */
/* Always stacked. The previous version put the label beside the number and
   let it wrap, which meant every cell decided for itself: at 560px three sat
   inline and "Kiddings due 2026" dropped below, and the whole thing flipped
   between inline and stacked several times on the way down. Stacking is
   predictable at every width - and tighter than the inline version ever was,
   because nothing has to reserve room for a label that might wrap. */
.stats > div { background:var(--paper); padding:14px 20px; }
.stats .n { font-family:var(--serif); font-size:28px; line-height:1; color:var(--moss); }
.stats .l { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; }

/* ---------- herd grid ---------- */
/* Flex rather than grid, specifically so a partial last row centres. With
   grid auto-fill the fifth doe hangs off the left edge; with wrapped flex and
   justify-content:center she sits in the middle - and so will the seventh.
   max-width stops a lone card in its own row from stretching the full width;
   below 640px it is lifted so cards fill a phone screen as before. */
.herd { display:flex; flex-wrap:wrap; justify-content:center; gap:26px 20px; align-items:flex-start; }
.herd > a { flex:1 1 200px; max-width:250px; }
@media (max-width:640px) { .herd > a { max-width:none; } }
.herd a { text-decoration:none; color:inherit; display:block; }
.herd .shot { background:var(--line-soft); overflow:hidden; margin-bottom:12px; }
.herd a:hover .shot img { transform:scale(1.03); }
.herd .shot img { transition:transform .5s ease; }
.herd .nm { font-family:var(--serif); font-size:22px; line-height:1.15; }
.herd .sub { font-size:12px; color:var(--muted); margin-top:4px; }

/* ---------- doe / buck index rows ---------- */
.roster { display:flex; flex-direction:column; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.roster article { background:var(--card); display:grid; grid-template-columns:minmax(200px,300px) minmax(0,1fr); }
.roster .shot { background:var(--line-soft); display:flex; align-items:center; justify-content:center; min-height:230px; overflow:hidden; }
.roster .shot img { width:100%; height:auto; max-height:100%; object-fit:contain; }
.roster .body { padding:32px 36px; display:flex; flex-direction:column; gap:18px; min-width:0; }
.roster h2 { font-size:32px; line-height:1.1; }
.roster .reg { font-size:13px; color:var(--muted); margin-top:6px; }
.roster .actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:auto; padding-top:4px; }

.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px 28px; }
.facts .v { font-size:14px; line-height:1.4; margin-top:5px; }

/* ---------- goat profile ---------- */
.goat-hero { background:var(--dark); color:var(--paper); }
.goat-hero .inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.goat-hero .txt { padding:72px 48px 72px 0; display:flex; flex-direction:column; justify-content:center; }
.goat-hero h1 { font-size:clamp(48px,6vw,80px); line-height:1; letter-spacing:-0.03em; margin:0 0 16px; }
.goat-hero .reg { font-family:var(--serif); font-style:italic; font-size:21px; line-height:1.4; color:#C9C0A9; }
.goat-hero .kind { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:#A8A08C; margin-bottom:14px; }
.goat-hero .blurb { font-size:16px; line-height:1.7; color:#D5CEBE; max-width:44ch; margin-top:26px; }
.goat-hero .shot { background:#222220; display:flex; align-items:center; justify-content:center; min-height:360px; overflow:hidden; }
.goat-hero .shot img { width:100%; height:auto; max-height:100%; object-fit:contain; }
.goat-hero .shot.empty { flex-direction:column; gap:10px; color:#C9C0A9; font-family:var(--serif); font-size:26px; padding:56px 24px; }
.goat-hero .shot.empty .label { color:#A8A08C; }

.fact-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.fact-strip div { background:var(--paper); padding:26px 22px; }
.fact-strip .label { min-height:26px; }
.fact-strip .v { font-size:16px; line-height:1.35; margin-top:8px; }

.section { padding:64px 0 0; }
.section > h2 { font-size:30px; margin-bottom:24px; }
.split { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:56px; }

.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; align-items:start; }
.gallery figcaption { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-top:7px; }
.gallery .shot { background:var(--line-soft); overflow:hidden; }

.elite { background:var(--dark); color:var(--paper); padding:28px 30px; }
.elite .top { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid #4A473C; padding-bottom:16px; margin-bottom:18px; }
.elite .top .t { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#D9B75A; }
.elite .top .y { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#A8A08C; }
.elite .pct { font-family:var(--serif); font-size:64px; line-height:.9; letter-spacing:-0.03em; }
.elite .pct span { font-size:32px; }
.elite .row { display:flex; align-items:baseline; gap:14px; margin-bottom:20px; }
.elite .row p { font-size:13px; line-height:1.5; color:#C9C0A9; }
.elite dl { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 20px; border-top:1px solid #4A473C; padding-top:18px; }
.elite dt { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#9A9182; margin-bottom:5px; }
.elite dd { font-size:15px; }
.elite dd.slot { color:#9A9182; border-bottom:1px dashed #5A5648; padding-bottom:3px; }

.panel { background:var(--card); border:1px solid var(--line); padding:24px 26px; }
.panel.dashed { border:1px dashed #C9BFA9; }
.panel h3 { font-family:var(--serif); font-weight:400; font-size:22px; margin-bottom:12px; }
.panel p { font-size:13.5px; line-height:1.7; color:var(--muted); }

.ped { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ped .col { display:grid; gap:10px; }
.ped .c1 { grid-template-rows:repeat(2,1fr); }
.ped .c2 { grid-template-rows:repeat(4,1fr); }
.ped .c3 { grid-template-rows:repeat(8,1fr); }
.ped .cell { background:var(--card); border:1px solid var(--line); padding:16px 18px; display:flex; flex-direction:column; justify-content:center; }
.ped .c1 .cell .n { font-family:var(--serif); font-size:19px; line-height:1.3; }
.ped .c2 .cell .n { font-size:14px; line-height:1.35; }
.ped .c3 .cell { background:#F7F3EA; border-color:var(--line-soft); padding:10px 16px; }
.ped .c3 .cell .n { font-size:12.5px; line-height:1.3; color:#5A5348; }
.ped .cell .label { font-size:9px; margin-bottom:5px; }
.ped .cell.empty .n { color:var(--muted); }

.parents { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.parents > div { background:var(--card); padding:32px 34px; }
.parents .who { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--rust); margin-bottom:16px; }
.parents .grid { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:24px; align-items:start; }
.parents h3 { font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.2; margin-bottom:14px; }
.parents .lines { font-size:13.5px; line-height:1.85; color:#5A5348; }
.parents .pc { font-size:10px; color:var(--muted); margin-top:6px; }
.parents .stack { display:flex; flex-direction:column; gap:8px; }

.notes { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }

.pager { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:64px; padding-top:24px; }
.pager a { text-decoration:none; color:inherit; max-width:46%; }
.pager .d { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.pager .n { font-family:var(--serif); font-size:22px; }
.pager .next { text-align:right; margin-left:auto; }

/* ---------- breeding schedule ---------- */
.sched { display:flex; flex-direction:column; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sched article { background:var(--card); display:grid; grid-template-columns:130px minmax(0,1fr) 150px; align-items:center; }
.sched .date { padding:26px 24px; border-right:1px solid var(--line); align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.sched .date .d { font-family:var(--serif); font-size:34px; line-height:1; color:var(--moss); }
.sched .date .m { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.sched .pair { padding:24px 30px; display:flex; align-items:center; gap:22px; min-width:0; }
.sched .pair .av { width:78px; height:78px; flex:none; border-radius:50%; overflow:hidden; background:var(--line-soft); }
.sched .pair .av img { width:100%; height:100%; object-fit:cover; }
.sched .pair .nm { font-family:var(--serif); font-size:23px; line-height:1.2; }
.sched .pair .to { font-size:14px; color:var(--muted); margin-top:7px; }
.sched .pair .to strong { color:var(--ink); font-weight:500; }
.sched .chip { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; background:var(--line-soft); color:var(--muted); padding:3px 8px; border-radius:2px; }
.sched .go { padding:24px; text-align:right; }

/* ---------- hero ---------- */
.hero { padding:32px 0 24px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,0.66fr); gap:40px; align-items:center; }
/* Sized so "Five does, two bucks," holds one line at the widest layout, with
   headroom for "Seven does, three bucks," as the herd grows. text-wrap:balance
   is deliberately off - it would even out the two lines and undo the break. */
/* Sized so "Five does, two bucks," holds one line at the widest layout, with
   headroom past "Twelve does, five bucks," as the herd grows. No nowrap: if it
   ever did outgrow the column it should wrap, not push the page sideways. And
   no text-wrap:balance either - balance evened out the two halves and undid
   the deliberate break before "one little hill." */
.hero h1 { font-size:clamp(38px,4.6vw,60px); line-height:1.06; letter-spacing:-0.022em; margin:0 0 20px; }
.hero em { color:var(--moss); }
/* The mark is already a circle with transparent corners, so it needs no
   frame - just room to breathe and a ceiling so it never outgrows the
   headline it is paired with. */
/* The logo's grid column is narrower than half the hero (the text column
   gets extra width so the headline holds two lines), so centering within the
   column alone lands the mark near the right edge rather than centered on
   the page's right half. Shift left by ~31% of the column's own width to
   land its center at the midpoint of that conceptual right half instead. */
.hero-mark { display:flex; justify-content:center; transform:translateX(-31%); }
.hero-mark img { width:100%; max-width:290px; height:auto; display:block; }

/* ---------- embed mode (Shopify iframe) ---------- */
body.embed [data-chrome] { display:none !important; }
body.embed .site-footer { margin-top:0; }

/* ---------- responsive ---------- */
@media (max-width:900px) {
  .split { grid-template-columns:minmax(0,1fr); gap:40px; }
  .hero { grid-template-columns:minmax(0,1fr); gap:36px; padding:48px 0 40px; }
  .hero-mark { transform:none; }
  .goat-hero .inner { grid-template-columns:minmax(0,1fr); }
  .goat-hero .txt { padding:48px 0 40px; }
  .goat-hero .shot { min-height:0; margin-bottom:0; }
  .ped { grid-template-columns:minmax(0,1fr); }
  .ped .col { grid-template-rows:none !important; }
  .parents .grid { grid-template-columns:minmax(0,1fr); }
  .parents .stack { flex-direction:row; max-width:320px; }
  .roster article { grid-template-columns:minmax(0,1fr); }
  .roster .shot { min-height:0; }
  .roster .body { padding:26px 24px; }
  .sched article { grid-template-columns:96px minmax(0,1fr); }
  .sched .go { grid-column:1 / -1; text-align:left; padding:0 24px 22px; }
}
@media (max-width:560px) {
  .wrap { padding:0 18px; }
  .site-header .bar { padding:12px 18px; gap:14px; }
  .brand .sub { display:none; }
  .rule-head { flex-wrap:wrap; }
  .rule-head .rule { display:none; }
  .elite dl { grid-template-columns:1fr; }
  .sched .pair { padding:20px; gap:16px; flex-wrap:wrap; }
}

/* Goat photos on the roster pages link through to the full profile.
   The anchor is purely a wrapper — it must not add underline or spacing. */
.shot-link { display:block; text-decoration:none; color:inherit; }
.shot-link:focus-visible { outline:2px solid var(--rust); outline-offset:3px; }