/* === 0. FONTS (self-hosted — no third-party font requests) ===
   Connemara Old Style Pro Bold: MyFonts webfont kit, converted OTF -> WOFF2.
   Its internal usWeightClass is 400 despite being the Bold, so the 700 below is
   load-bearing — without it the browser would synthesise a fake bold over it.
   Source Sans 3: SIL Open Font Licence, latin subset, the four weights the site uses. */
@font-face {
  font-family: 'Connemara Old Style Pro';
  src: url('../fonts/ConnemaraOldStylePro-Bold.woff2') format('woff2'),
       url('../fonts/ConnemaraOldStylePro-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   OUTLANDER SCOTTISH HIGHLAND CATTLE — styles.css
   ============================================================ */

/* === 1. CSS CUSTOM PROPERTIES === */
:root {
  /* Palette — Papaya / Hunter Green / Evergreen / Dark Coffee / Pitch Black (all AAA) */
  --green:               #3A5132;  /* Hunter Green — single source for the 3 green roles */
  --color-primary:       var(--green);  /* primary buttons, links, interactive */
  --color-primary-light: #2E4228;  /* deeper Hunter — button hover (keeps light text AAA) */
  --color-secondary:     #271E0A;  /* Dark Coffee — secondary accent */
  --color-accent:        var(--green);  /* accents/labels on LIGHT bg */
  --color-accent-light:  #FFEBCD;  /* Papaya — "accent"/labels on DARK bg */
  --color-bg:            #FFEBCD;  /* Papaya Whip — light ground + light text on dark */
  --color-surface:       #F9E6C6;  /* deeper cream — card/section layering */
  --color-text:          #140901;  /* Pitch Black — body text on light */
  --color-heading:       #271E0A;  /* Dark Coffee — headings/subtitles on light */
  --color-text-light:    var(--green);  /* muted text (AAA on light) */
  --color-border:        #D8C39F;  /* warm tan — borders on cream */
  /* Line weights — 1px containers, 1.5px controls. No other values. */
  --line-control: 1.5px;

  /* Width of a photo once its component stacks — one value, so stacked photos
     across the site line up instead of each choosing its own. */
  --photo-stacked: clamp(320px, 72%, 660px);

  /* Photo columns — one width for every image column that sits beside text.
     Stacked caps live with their components; they differ on purpose. */
  --photo-col: 340px;

  --color-border-light:  #ECD9B6;  /* lighter warm tan */
  --color-neutral:       #A8A090;  /* medium gray-tan (greige) — inactive/disabled surfaces */
  --color-disabled:      var(--color-neutral);  /* disabled control / sold fill */
  --color-disabled-text: #140901;  /* Pitch Black label — AAA (7.6:1) on the greige */
  --color-overlay:       #093224;  /* Evergreen — hero / nav / footer dark bg */
  /* Semantic + focus */
  --color-error:         #8F2015;  /* form errors — AAA on light */
  --color-success:       var(--green);
  --color-focus:         var(--green);              /* focus ring on light bg */
  --color-focus-light:   var(--color-accent-light); /* focus ring on dark bg */

  --font-display: 'Connemara Old Style Pro', 'Iowan Old Style', Palatino, Georgia, serif;  /* Connemara Old Style — h1/h2, wordmark, cattle term cards */
  --font-body:    'Source Sans 3', system-ui, -apple-system, sans-serif;  /* the sans — single source */
  --font-heading: var(--font-body);   /* smaller headings & heading-like components */
  --font-ui:      var(--font-body);   /* UI: labels, buttons, meta */

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-xxl: 6rem;

  --container-max:  1200px;
  --measure:        42rem;   /* ~672px readable line length (≤~75ch) for body copy */
  --radius:         4px;
  --radius-btn:     8px;
  --radius-lg:      10px;

  /* Type scale */
  --text-xs:   0.78rem;
  --text-sm:   var(--text-ui);   /* deliberately identical — 0.85 and 0.9rem were 0.8px apart */
  --text-ui:   0.9rem;
  --text-base: 1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.3rem;
  --text-2xl:  1.4rem;
  --text-3xl:  2rem;
  --text-4xl:  2.4rem;
  --text-5xl:  2.5rem;
  /* Fluid heading sizes */
  --text-h1:   clamp(2rem, 5vw, 3.5rem);
  --text-h2:   clamp(1.6rem, 3vw, 2.4rem);
  --text-h3:   clamp(1.2rem, 2.5vw, 1.65rem);

  --shadow-sm: 0 2px 10px color-mix(in srgb, var(--color-text) 10%, transparent);
  --shadow-md: 0 4px 24px color-mix(in srgb, var(--color-text) 15%, transparent);
  --shadow-lg: 0 8px 48px color-mix(in srgb, var(--color-text) 22%, transparent);

  --transition: 0.25s ease;
  /* Tartan sett for dark surfaces (hero, page headers, footer): a broad dark band, a
     bright twin stripe and a pale hairline, crossed on both axes over Evergreen.
     Alpha only — no new colours enter the palette. Stops are fractions of --sett, so a
     surface can rescale the weave by overriding that one value. */
  --sett: 120px;
  --texture:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) calc(var(--sett) * 0.1667),
      transparent calc(var(--sett) * 0.1667), transparent calc(var(--sett) * 0.2500),
      rgba(255,255,255,0.05) calc(var(--sett) * 0.2500), rgba(255,255,255,0.05) calc(var(--sett) * 0.2917),
      transparent calc(var(--sett) * 0.2917), transparent calc(var(--sett) * 0.3250),
      rgba(255,255,255,0.05) calc(var(--sett) * 0.3250), rgba(255,255,255,0.05) calc(var(--sett) * 0.3667),
      transparent calc(var(--sett) * 0.3667), transparent calc(var(--sett) * 0.5167),
      rgba(0,0,0,0.05) calc(var(--sett) * 0.5167), rgba(0,0,0,0.05) calc(var(--sett) * 0.6000),
      transparent calc(var(--sett) * 0.6000), transparent calc(var(--sett) * 0.7833),
      rgba(255,255,255,0.07) calc(var(--sett) * 0.7833), rgba(255,255,255,0.07) calc(var(--sett) * 0.8000),
      transparent calc(var(--sett) * 0.8000), transparent var(--sett)),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) calc(var(--sett) * 0.1667),
      transparent calc(var(--sett) * 0.1667), transparent calc(var(--sett) * 0.2500),
      rgba(255,255,255,0.05) calc(var(--sett) * 0.2500), rgba(255,255,255,0.05) calc(var(--sett) * 0.2917),
      transparent calc(var(--sett) * 0.2917), transparent calc(var(--sett) * 0.3250),
      rgba(255,255,255,0.05) calc(var(--sett) * 0.3250), rgba(255,255,255,0.05) calc(var(--sett) * 0.3667),
      transparent calc(var(--sett) * 0.3667), transparent calc(var(--sett) * 0.5167),
      rgba(0,0,0,0.05) calc(var(--sett) * 0.5167), rgba(0,0,0,0.05) calc(var(--sett) * 0.6000),
      transparent calc(var(--sett) * 0.6000), transparent calc(var(--sett) * 0.7833),
      rgba(255,255,255,0.07) calc(var(--sett) * 0.7833), rgba(255,255,255,0.07) calc(var(--sett) * 0.8000),
      transparent calc(var(--sett) * 0.8000), transparent var(--sett));
  --icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 4 H7 A3 3 0 0 0 4 7 V17 A3 3 0 0 0 7 20 H17 A3 3 0 0 0 20 17 V11' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 14 C 11 8.5 14.5 7 18 6.7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M16.5 2.5 L23 6.5 L16.5 10.5 Z' fill='black'/%3E%3C/svg%3E");
  --icon-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3Cline x1='10' y1='17' x2='14' y2='17'/%3E%3C/svg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  --icon-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");
  --icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16'/%3E%3Cpath d='M4 8l3-4 3 4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='M14 16l3 4 3-4'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M15 8.5h-1.4a1.8 1.8 0 0 0-1.8 1.8V18'/%3E%3Cpath d='M9.7 12.6h4.3'/%3E%3C/svg%3E");
  --icon-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E");
  --icon-tiktok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5'/%3E%3C/svg%3E");
}

/* === 2. RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Form controls inherit nothing typographic from the page: a bare <button> falls back to
   the browser's UI font (Arial 13.333px in Chrome). `font: inherit` resets family, size,
   weight and line-height in one go; component rules still override it as normal. */
button, input, select, textarea { font: inherit; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }

ul { list-style: none; }

/* Keyboard focus — visible on light and dark grounds */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.nav :focus-visible,
.hero :focus-visible,
.page-header :focus-visible,
.cta-banner :focus-visible,
.section--hunter :focus-visible,
.footer :focus-visible {
  outline-color: var(--color-focus-light);
}
.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
  /* Faded / washed-out so it reads as inactive — distinct from the solid greige "Sold" badge */
  background: color-mix(in srgb, var(--color-neutral) 45%, transparent);
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* === 3. TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.3;
  text-wrap: balance;   /* even heading lines; no single-word last line */
  /* em, not rem: the gap scales with the heading, so an h2 gets more air than an h4.
     Components override this only where the following text is bound to the heading. */
  margin-bottom: 0.6em;
}
/* Main headings use the blackletter display face; smaller headings stay sans */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;      /* connemara-old-style ships 300 & 700 — use a real weight (no faux) */
  line-height: 1.15;
  letter-spacing: 0.01em;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); letter-spacing: 0.02em; }
p { color: var(--color-text); margin-bottom: 1rem; text-wrap: pretty; }  /* avoid orphaned last-line words */
p:last-child { margin-bottom: 0; }
/* Short, centered intro/CTA copy reads better balanced than merely orphan-safe */
.hero p, .page-header p, .section__header p, .cta-banner p { text-wrap: balance; }

/* === 4. LAYOUT === */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.section { padding: var(--space-xxl) 0; }

/* Hunter-green section (dark ground). Direct text goes light; cards keep their own colors. */
.section--hunter { background-color: var(--color-primary); }
.section--hunter .section__header h2,
.section--hunter .section__header p,
.section--hunter .animal-section__header h2,
.section--hunter .animal-section__header p,
.section--hunter .u-narrow p,
.section--hunter .breed-story__text p {
  color: var(--color-bg);
}

/* Centered prose block on the dark ground (About: The Outlander Motto).
   Inverted for the green field. */
.section--hunter .event-share { color: var(--color-accent-light); }
.section--hunter .u-narrow-center h2 { color: var(--color-bg); margin-bottom: 0.75rem; }
.section--hunter .u-narrow-center p {
  color: var(--color-bg);
  max-width: 640px;
  margin: 0 auto 1.5rem;
}
.section--hunter .u-narrow-center .btn { margin: 0.3rem 0.35rem 0; }
/* The only thing that separates this from .btn--primary: on hunter-green ground a
   Hunter fill would be green-on-green, so it inverts to Papaya. Reach for it whenever
   a filled CTA might land on a dark section. */
.section--hunter .btn--primary-on-dark {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}

/* Papaya section (light ground, centered CTA). Dark text; Hunter buttons pop. */

.section__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.section__header h2 { margin-bottom: 0.5rem; }
.section__header p { max-width: 620px; margin: 0 auto; }

/* Grids */
.grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }

/* === 5. BUTTONS === */
.btn {
  /* inline-flex, not inline-block: min-height grows the box, and only a flex container
     redistributes that extra space around the label instead of leaving it at the top. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.75rem;
  min-height: 44px;   /* SC 2.5.5 Target Size (Enhanced) — every variant, not just the default */
  border-radius: var(--radius-btn);   /* rounded rectangle for all CTAs */
  border: var(--line-control) solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.2;
}
/* PRIMARY CTA — Hunter Green fill + Papaya text, one style everywhere.
   The Papaya border defines the button on dark grounds (blends on light).
   Hover inverts: Papaya fill + Hunter text. */
.btn--primary,
.btn--primary-on-dark {
  background-color: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}
/* Hover on LIGHT grounds (default): darken to Evergreen fill + Papaya text */

/* SECONDARY CTA — outline. Hunter on light grounds … */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* … Papaya on dark grounds. */
.btn--outline-light {
  background-color: transparent;
  color: var(--color-bg);
  border-color: var(--color-bg);
}

/* Hover on DARK grounds: Papaya fill + Hunter text pops instead */

.btn--sm { padding: 0.5rem 1.1rem; font-size: var(--text-sm); }   /* narrower, not shorter — min-height still applies */

/* Skip link — the bypass mechanism for the 7 repeated nav links (SC 2.4.1).
   Off-screen until focused; :focus, not :focus-visible, so it always appears. */
.skip-link {
  position: absolute;
  top: -4rem;
  left: 0.75rem;
  z-index: 2000;
  padding: 0.65rem 1.15rem;
  background: var(--color-bg);
  color: var(--color-primary);      /* 7.50:1 */
  border-radius: var(--radius-btn);
  border: var(--line-control) solid var(--color-primary);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: 0.75rem; }
/* The 404 is the one page with too little content to push the footer to the bottom
   of a tall viewport -- it was leaving ~276px of dead ground below it at 900px.
   Standard sticky footer, scoped to this page so no other layout is touched. main
   is grid rather than flex so its section still stretches to full width. */
.page-404 { min-height: 100vh; display: flex; flex-direction: column; }
.page-404 main { flex: 1; display: grid; align-content: center; }

/* main is only focusable as a skip target — never ring it */
main:focus { outline: none; }

/* === 6. NAVIGATION === */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-overlay);
  border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 20%, transparent);
  box-shadow: var(--shadow-md);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;                     /* keep the wordmark clear of the links */
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  height: 70px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--color-bg);
}
.nav__brand-icon { display: flex; align-items: center; flex-shrink: 0; }
/* The mark is masked, not drawn: the artwork's alpha carries the linework and the fill
   comes from the palette, so it is Papaya on the Evergreen bar with no recoloured file. */
.nav__brand-mark {
  display: block;
  width: 40px;
  height: 39px;
  background-color: var(--color-bg);
  -webkit-mask: url("../images/logo-mark.png") center / contain no-repeat;
  mask: url("../images/logo-mark.png") center / contain no-repeat;
}
.nav__brand-text { display: flex; flex-direction: column; }
.nav__brand-name {
  font-family: var(--font-display);   /* Connemara Old Style wordmark */
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-bg);
  line-height: 1.2;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
.nav__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  /* Inactive links sit back at 75% Papaya (7.43:1, still AAA) so the current
     page can be the brightest, heaviest item without any extra chrome. */
  color: color-mix(in srgb, var(--color-bg) 75%, transparent);
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}

/* Current page — underline indicator */
.nav__link.active {
  /* "You are here" is full-strength Papaya (12.06:1) at weight 700 — no pill, no
     underline. Nav items are navigation, not controls, so they carry no chrome. */
  color: var(--color-bg);
  font-weight: 700;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-bg);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav__mobile {
  display: none;
  flex-direction: column;
  background-color: var(--color-overlay);
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 15%, transparent);
  padding: 0.75rem 0 1.25rem;
}
.nav__mobile.open { display: flex; }
.nav__mobile .nav__link {
  padding: 0.7rem 1.5rem;
  border-radius: 0;
  font-size: var(--text-base);
}
.nav__mobile .btn { margin: 0.75rem 1.5rem 0; text-align: center; }

/* === 7. PAGE HEADER === */
.page-header {
  background-color: var(--color-overlay);
  min-height: 300px;              /* uniform header height across all secondary pages */
  display: flex;
  align-items: center;
  padding: var(--space-xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture);
}
.page-header__content { position: relative; z-index: 1; width: 100%; }

/* Photo page header. The scrim is Evergreen at 80%, which is the level that
   keeps Papaya text at 7.45:1 over the brightest pixel in the photo (AAA at
   normal size). Lower it and the subtitle stops clearing 7:1. Falls back to
   the flat Evergreen background-color if the image fails to load. */
.page-header--photo {
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-overlay) 80%, transparent),
                    color-mix(in srgb, var(--color-overlay) 80%, transparent)),
    url('../images/Extra%20Images/pumpkins.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* The photo is the texture here -- drop the tartan the base header lays over
   it, which otherwise breaks the image up. Contrast is unaffected: the 7.45:1
   figure above was computed on scrim-over-photo alone, without the weave. */
.page-header--photo::before { content: none; }
.page-header h1 { color: var(--color-bg); margin-bottom: 0.5rem; }
.page-header p {
  color: var(--color-bg);
  max-width: 600px;
  margin: 0 auto;
  font-size: var(--text-base);
}

/* === 8. HERO (Home) === */
.hero {
  min-height: 93vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: var(--color-overlay);
  /* ↓ Replace with your hero photo:
     background-image: url('../images/hero-highland.jpg');
     background-size: cover;
     background-position: center; */
}
.hero__bg {
  position: absolute;
  inset: 0;
  --sett: 240px;   /* coarser weave — the hero is ~3x the height of a page header */
  background-color: var(--color-overlay);
  background-image: var(--texture);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Subtle depth only — hero base matches the Evergreen header/footer.
     Increase this % if a hero photo is added, for text legibility. */
  background: color-mix(in srgb, var(--color-text) 14%, transparent);
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 2rem;
}
.hero h1 {
  color: var(--color-surface);
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
.hero__tagline {
  font-size: var(--text-lg);
  color: var(--color-bg);
  margin-bottom: 2.5rem;
  line-height: 1.6;
  max-width: var(--measure);   /* keep the line length readable */
  margin-inline: auto;
}
.hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
/* === 9. FEATURE CARDS (Home) === */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}
/* Five short terms read as one strip; a tighter gap buys the photos more width */
.features--terms {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}
.terms-hint--stacked { display: none; }
/* --- Cattle term cards ---
   Front is the photo with the term over it; the card flips to the definition.
   Below 480px the flip is dropped and the two faces simply stack. --- */
.term-card {
  position: relative;
  aspect-ratio: 4 / 5;   /* matches the trimmed artwork exactly — fills, never crops */
  perspective: 1200px;
}
.term-card__face {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.55s ease;
}
.term-card__back {
  transform: rotateY(180deg);
  /* Hunter — the cream surface sat at 1.05:1 against the Papaya page, so the flip read
     as flat. Hunter gives 7.50:1 against the page and carries Papaya text at 7.50:1 (AAA). */
  background: var(--color-primary);
  color: var(--color-bg);
  border: 0;   /* the light hairline read as a cream outline against the green */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  overflow: auto;
  cursor: pointer;
}
.term-card.is-flipped .term-card__front { transform: rotateY(-180deg); }
.term-card.is-flipped .term-card__back { transform: rotateY(0deg); }
.term-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The whole front face is the control. The illustrations letter the term themselves,
   so there is no scrim and no overlaid word — the button is invisible, named for
   assistive tech by its .u-sr-only label, and shows a wash only on hover. */
.term-card__toggle {
  position: absolute;
  inset: 0;
  padding: 0;
  background: transparent;
  border: 0;                       /* borderless control — exempt from --line-control */
  cursor: pointer;
  transition: background var(--transition);
}
@media (hover: hover) {
  .term-card__toggle:hover { background: color-mix(in srgb, var(--color-overlay) 14%, transparent); }
}
.term-card__term {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
  color: var(--color-bg);   /* Papaya on Evergreen — 12.06:1 */
}
.term-card__def { font-size: var(--text-sm); line-height: 1.6; }
/* Ring the whole card, so it stays visible while the front face is rotated away */
@supports selector(:has(*)) {
  .term-card:has(.term-card__toggle:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-lg);
  }
  .term-card__toggle:focus-visible { outline: none; }
}
@media (prefers-reduced-motion: reduce) {
  .term-card__face { transition: none; }
}
@media (max-width: 900px) {
  .features--terms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .features--terms { grid-template-columns: 1fr; }
  /* Cards don't flip at this size, so the instruction shouldn't say they do */
  .terms-hint--flip { display: none; }
  .terms-hint--stacked { display: inline; }
  /* No flip: term, then photo, then definition, in one stacked card */
  .term-card {
    aspect-ratio: auto;
    perspective: none;
    padding: var(--space-md) var(--space-sm);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .term-card .term-card__face,
  .term-card.is-flipped .term-card__face {
    position: static;
    transform: none;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
    overflow: visible;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
  .term-card__front { display: flex; flex-direction: column-reverse; gap: 0.75rem; }
  .term-card__photo { height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius); }
  .term-card .term-card__toggle { display: none; }   /* stacked: nothing to toggle */
  .term-card__back {
    margin-top: 0.75rem;
    cursor: auto;
    background: none;          /* stacked: no dark panel, so restore the page's ink */
    color: var(--color-text);
  }
  .term-card__term { display: none; }   /* the illustration already letters the term */
}

/* === 9. FARM ANIMAL GROUPS (Farm Animals) ===
   One short line of copy each, so they sit two-up rather than as full-width
   alternating rows. The photo stays portrait and capped: both sources are tall,
   and a full-bleed landscape crop cuts the donkey's ears and muzzle. */
.animal-group { text-align: center; }
.animal-group__media {
  width: 100%;
  max-width: var(--photo-stacked);
  margin: 0 auto 1rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.animal-group__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.animal-group h3 { margin-bottom: 0.5rem; }
.animal-group p { max-width: var(--measure); margin: 0 auto; }

/* === 10. GALLERY (Home) === */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
.gallery__item { overflow: hidden; border-radius: var(--radius); position: relative; }
.gallery__img {
  width: 100%;
  height: 100%;
  min-height: 340px;   /* four across: a portrait cell suits the portrait sources */
  object-fit: cover;
  display: block;
}

/* === Search / filter bar === */
.filter-bar {
  position: relative;
  margin-bottom: var(--space-lg);
}
.filter-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.filter-toggle,
.sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 700;
  line-height: 1.2;   /* `font: inherit` hands controls the body's 1.6 — too tall for a chip */
  color: var(--color-primary);
  background: var(--color-bg);
  border: var(--line-control) solid var(--color-primary);
  border-radius: var(--radius-btn);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-toggle::before,
.sort-toggle::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  background-color: currentColor;
}
.filter-toggle::before { -webkit-mask: var(--icon-filter) center / contain no-repeat; mask: var(--icon-filter) center / contain no-repeat; }
.sort-toggle::before { -webkit-mask: var(--icon-sort) center / contain no-repeat; mask: var(--icon-sort) center / contain no-repeat; }
.filter-toggle:focus-visible,
.filter-toggle.is-active,
.filter-bar.is-open .filter-toggle,
.sort-toggle:focus-visible,
.sort-toggle.is-active,
.sort-control.is-open .sort-toggle {
  background: var(--color-primary);
  color: var(--color-bg);
}
.sort-control { position: relative; }
.sort-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  min-width: 12.5rem;
  padding: 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.sort-menu[hidden] { display: none; }
.sort-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  color: var(--color-text);
  background: none;
  border: none;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.sort-menu__item:focus-visible { background: var(--color-accent-light); }
.sort-menu__item.is-active { font-weight: 700; color: var(--color-primary); }
.sort-menu__item.is-active::after { content: "\2713"; float: right; }
.filter-toggle__count[hidden] { display: none; }
.filter-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--color-accent-light);
  color: var(--color-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
}
/* Clear-all control — rides on the filter chip while filters are on */
.filter-chip { position: relative; display: inline-flex; }
.filter-toggle.is-active { padding-right: 2.5rem; }   /* room for the x */
.filter-clear {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--color-bg);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition);
}
.filter-clear[hidden] { display: none; }
.filter-clear:focus-visible { background: color-mix(in srgb, var(--color-bg) 28%, transparent); }
@media (hover: hover) {
  .filter-clear:hover { background: color-mix(in srgb, var(--color-bg) 28%, transparent); }
}
.filter-count {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-text-light);
}
.filter-popover {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 40;
  width: min(32rem, calc(100vw - 2rem));
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.filter-popover[hidden] { display: none; }
.filter-popover__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.9rem 1rem;
}
.filter-popover__grid .filter-bar__search { grid-column: 1 / -1; }
.filter-popover__footer {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-light);
}
.filter-bar__field { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-bar__field label {
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 700;
  color: var(--color-accent);
}
.filter-bar select,
.filter-bar input[type="search"] {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 0.5rem 0.65rem;
  border: var(--line-control) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  width: 100%;
  min-width: 0;
}
.filter-noresults {
  text-align: center;
  color: var(--color-text-light);
  font-family: var(--font-ui);
  margin: var(--space-lg) 0;
}

/* === Photo carousel (animal cards) === */
.carousel { position: relative; overflow: hidden; }
.carousel__track { display: flex; transition: transform 0.35s ease; }
.carousel__slide { min-width: 100%; }
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-btn);   /* rounded square like the CTAs */
  background: color-mix(in srgb, var(--color-overlay) 45%, transparent);  /* same as the dots */
  -webkit-backdrop-filter: blur(3px);  /* frost the photo behind — lifts the glyph, degrades gracefully */
  backdrop-filter: blur(3px);
  color: var(--color-bg);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
/* Invisible hit-area expansion → 44px touch target while the button stays 32px */
.carousel__arrow::before {
  content: "";
  position: absolute;
  inset: -6px;
}
  /* darker on hover */
.carousel__arrow--prev { left: 0.4rem; }
.carousel__arrow--next { right: 0.4rem; }
.carousel__dots {
  position: absolute;
  bottom: 0.6rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}
.carousel__dot {
  position: relative;   /* anchors the hit area below */
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-overlay) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-bg) 40%, transparent);
  transition: background var(--transition);
}
.carousel__dot.is-active { background: var(--color-overlay); }
/* Invisible hit-area expansion → 24.8px target while the dot stays 8.8px (SC 2.5.8) */
.carousel__dot::before {
  content: "";
  position: absolute;
  inset: -8px;
}
.carousel__expand {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 2rem;
  height: 2rem;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--color-overlay) 45%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.carousel__expand::after {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  background-color: currentColor;
  -webkit-mask: var(--icon-expand) center / contain no-repeat;
  mask: var(--icon-expand) center / contain no-repeat;
}
/* Invisible hit-area expansion → 44px touch target while the button stays 32px */
.carousel__expand::before {
  content: "";
  position: absolute;
  inset: -6px;
}

/* === 11. ANIMAL CARDS === */
.animal-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* --color-border, not --color-border-light: on the Papaya ground the lighter edge read
     1.13:1 and the shadow was doing all the separating. 1.40:1 makes the card an object.
     Still a container, not a control, so 1.4.11's 3:1 does not apply. */
  border: 1px solid var(--color-border);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

.animal-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--color-bg);
  flex-shrink: 0;
}
/* Card with no photo yet: the tartan again, but on the palette's inactive greige so it
   reads as "not filled in" rather than as content. Lightened toward Papaya because pure
   greige under the weave's darkest crossing drops the label to 5.96:1 — AA, not AAA. */
.animal-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-sm);
  --sett: 90px;
  background-color: color-mix(in srgb, var(--color-neutral) 70%, var(--color-bg));
  background-image: var(--texture);
  /* Evergreen measures 5.46:1 at the weave's darkest crossing — under the 7:1 AAA wants
     for normal text, but this is large text (>=18.66px bold), where AAA asks 4.5:1. At
     h3 the clamp floor is 19.20px, so it still counts as large by 0.54px. That margin is
     now the whole accessibility case: do not drop this below --text-h3, lower the clamp
     floor, or unbold it without darkening the colour first. */
  color: var(--color-overlay);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-wrap: balance;
}
.animal-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.animal-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: 0.6rem;
}
.animal-card__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.85rem;
  margin-bottom: 1.1rem;
  font-size: var(--text-sm);
}
.animal-card__facts dt {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-heading);   /* Dark Coffee — reserve the green accent for interactive elements */
}
.animal-card__facts dt::after { content: ":"; }
.animal-card__facts dd { color: var(--color-text); }
.animal-card__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: auto; }
/* Card buttons share one width so neighbouring cards line up — "…This Calf" and
   "…This Heifer" otherwise render 14px apart. A min-width, not flex:1: they match each
   other without stretching to the full card. 205px clears the longest label (199px). */
.animal-card__actions .btn { min-width: 205px; }

/* Status + price badges */
.status-badge {
  display: inline-block;
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-btn);   /* matches CTA radius */
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.status-badge--available {
  background: var(--color-overlay);   /* solid Evergreen — differentiated from Hunter CTAs */
  color: var(--color-bg);
}
.status-badge--sold {
  background: var(--color-disabled);   /* greige — reads as inactive */
  color: var(--color-disabled-text);   /* Pitch Black — AAA */
}
/* Sold card — dim + desaturate the photo to signal it's gone */
.animal-card--sold .carousel { opacity: 0.55; filter: grayscale(0.6); }

/* === 12. COWS & BULLS SECTION ANCHORS === */
.animal-section {
  scroll-margin-top: 90px; /* offset for sticky nav */
}
.animal-section__header {
  display: flex;
  align-items: center;
  justify-content: center;   /* same framing role as .section__header — see §5 Alignment */
  text-align: center;
  gap: 1rem;
  margin-bottom: var(--space-lg);
}
.animal-section__header p { max-width: 620px; margin: 0 auto; }

/* === 13. ABOUT PAGE === */
.about-owner {
  display: grid;
  grid-template-columns: var(--photo-col) 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.about-owner p { max-width: var(--measure); }   /* readable line length in the bio column */
.about-owner__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 90px;
}
.about-owner__image img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
/* Breed story: prose broken up by an alternating photo column */
.breed-story {
  display: grid;
  grid-template-columns: var(--photo-col) 1fr;
  gap: var(--space-lg);
  align-items: start;
  max-width: 1000px;
  margin: 0 auto var(--space-lg);
}
.breed-story:last-child { margin-bottom: 0; }
.breed-story--reverse { grid-template-columns: 1fr var(--photo-col); }
.breed-story--reverse .breed-story__media { order: 2; }
.breed-story--reverse .breed-story__text { order: 1; }
.breed-story__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.breed-story__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.breed-story__text p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .breed-story,
  .breed-story--reverse { grid-template-columns: 1fr; gap: var(--space-sm); }
  /* Uncapped these ran the full container, dwarfing every other stacked photo */
  .breed-story .breed-story__media,
  .breed-story--reverse .breed-story__media {
    width: 100%;
    max-width: var(--photo-stacked);
    margin-inline: auto;
  }
  /* On About these sit under the stacked farm photo, so they take its landscape frame
     and match it exactly. Scoped to the page: Farm Animals uses the same component with
     tall portrait sources that a 4/3 crop would decapitate. */
  .page-about .breed-story__media img { aspect-ratio: 4 / 3; }
  .breed-story__media,
  .breed-story--reverse .breed-story__media { order: 1; }
  .breed-story__text,
  .breed-story--reverse .breed-story__text { order: 2; }
}
/* === 14. EVENTS PAGE === */

.events-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.event-item {
  display: grid;
  grid-template-columns: 78px 160px 1fr;
  grid-template-areas: "date flyer body";
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* Matches .animal-card, and for the same reason: --color-border-light read 1.13:1
     against the Papaya ground and left the shadow doing all the separating. */
  border: 1px solid var(--color-border);
  transition: all var(--transition);
}

/* A lone event has nothing to be scanned against, so the flyer earns more room.
   :only-child means this reverts on its own the moment a second event is added.
   Guarded by min-width so it can't override the single-column stack at <=768px,
   where its higher specificity would otherwise win inside that media query. */
@media (min-width: 769px) {
  .events-list .event-item:only-child { grid-template-columns: 78px 300px 1fr; }
  /* height:auto lets the 3/4 aspect ratio set the height instead of cropping to the text */
  .events-list .event-item:only-child .event-item__flyer-img { height: auto; }
}

.event-item__flyer {
  grid-area: flyer;
  position: relative;
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.event-item__flyer-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}
.event-item__flyer:focus-visible .event-item__flyer-img { transform: scale(1.04); }
.event-item__flyer::after {
  content: "\2922";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--color-overlay) 78%, transparent);
  color: var(--color-bg);
  opacity: 0;
  transition: opacity var(--transition);
}
.event-item__flyer:focus-visible::after { opacity: 1; }
/* Holds the detail CTA and the share control on one baseline; wraps rather than
   crushing the button when the body column narrows. */
.event-item__actions {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.event-item__title a {
  color: inherit;
  text-decoration: none;
}
.event-item__title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Share button + event detail page */
.event-share {
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 700;
  color: var(--color-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.event-share::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: var(--icon-share) center / contain no-repeat;
  mask: var(--icon-share) center / contain no-repeat;
}
.event-share:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.event-detail {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--photo-col));
  gap: var(--space-lg);
  align-items: start;
}
.event-detail__info { grid-column: 1; grid-row: 1; }
.event-detail__flyer {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}
.event-detail__flyer .event-item__flyer-img { aspect-ratio: 3 / 4; }
.event-detail__eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-accent-light);
  margin-bottom: 0.4rem;
}
.event-detail__back {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  margin-bottom: var(--space-md);
}
.event-detail__back:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.event-detail__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: var(--text-ui);
}
.event-detail__facts dt {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-accent);
}
.event-detail__facts dd { color: var(--color-text); }
/* Flyer standing on its own rather than in the 340px facts column. Capped at
   640px: the art is square, so full container width would make it a wall. */
.event-detail__flyer--solo { max-width: 640px; margin-inline: auto; }

.event-detail__actions--center { justify-content: center; }

/* FAQ accordion. Native <details>/<summary>: keyboard-operable, announced as a
   disclosure, and open/closed without a line of JS, so it still works if the
   script fails to load. The <h3> inside <summary> keeps the questions in the
   heading outline for screen-reader navigation; it inherits its type from the
   summary so it does not render at heading size. */
.faq { width: 100%; }
.faq__item { border-bottom: 1px solid var(--faq-rule); }
.faq__item:first-child { border-top: 1px solid var(--faq-rule); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;                /* Firefox marker */
  padding: 0.85rem 0;
  min-height: 44px;                /* SC 2.5.5 target size */
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
}
.faq__q::-webkit-details-marker { display: none; }   /* Safari marker */
.faq__q h3 {
  font: inherit;
  margin: 0;
  color: inherit;
}
/* Chevron drawn from two borders -- no icon asset, and it inherits the text colour
   so it stays legible on either ground. */
.faq__q::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--transition);
}
.faq__item[open] .faq__q::after { transform: translateY(0.1em) rotate(-135deg); }
.faq__a { padding: 0 0 1.1rem; }
.faq__a p { margin: 0 0 0.6rem; }
.faq__a p:last-child { margin-bottom: 0; }

/* On hunter green: Papaya is the palette's light-on-dark ink and measures 7.50:1,
   clearing AAA. The rule sits at 55% Papaya = 3.51:1, over the 3:1 SC 1.4.11 asks
   of a control boundary. Links are underlined because they match the surrounding
   text colour, so colour alone cannot mark them (SC 1.4.1). */
.section--hunter .faq {
  --faq-rule: color-mix(in srgb, var(--color-bg) 55%, transparent);
  color: var(--color-bg);
}
/* The answer paragraphs need naming outright. Setting colour on .faq only reaches
   elements that inherit, and `p { color: var(--color-text) }` sets its own -- an
   explicit declaration always beats an inherited one, so answers rendered Pitch
   Black on hunter at 2.25:1, failing even AA. Papaya restores 7.50:1. */
.section--hunter .faq__a p { color: var(--color-bg); }
.section--hunter .faq__a a {
  color: var(--color-accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq { --faq-rule: var(--color-border); }
@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}
.event-detail__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: color-mix(in srgb, var(--color-overlay) 92%, transparent);
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.lightbox__actions {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}
.lightbox__btn {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--color-bg) 15%, transparent);
  color: var(--color-bg);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition);
}
.lightbox__btn:focus-visible { background: color-mix(in srgb, var(--color-bg) 30%, transparent); }
.lightbox__close { font-size: 1.75rem; line-height: 1; }
.lightbox__download::before {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  background-color: currentColor;
  -webkit-mask: var(--icon-download) center / contain no-repeat;
  mask: var(--icon-download) center / contain no-repeat;
}
.event-item__date {
  grid-area: date;
  background: var(--color-primary);
  color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem;
  text-align: center;
  flex-shrink: 0;
}
.event-item__day {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-surface);
  font-weight: 700;
}
/* Multi-day events show a start and end date in the same badge, so the
   numerals step down a size to keep the block from growing. */
.event-item__date--range .event-item__day { font-size: var(--text-xl); white-space: nowrap; }
.event-item__range-sep {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin: 0.15rem 0;
}
.event-item__body { grid-area: body; padding: 1.1rem 1.25rem; }
.event-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  margin-bottom: 0.3rem;
  color: var(--color-text);
}
.event-item__meta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: 0.6rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.event-item__desc { font-size: var(--text-ui); margin-bottom: 0; }
/* Admission sits under the description rather than in the meta row */
.event-item__admission {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin: 0.5rem 0 0;
}

/* === 15. CONTACT PAGE === */
/* Photo beside the form wherever there's room for two columns */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-xl);
  align-items: start;
  max-width: 1040px;
  margin-inline: auto;
}
/* Photo beside the form; see the stacked override further down */
.contact-photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.contact-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;   /* matches the source, and reserves the box before it loads */
  display: block;
}
.contact-form {
  /* No card — the form content sits directly on the page */
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}
.form-group { margin-bottom: 1.4rem; }
.form-group label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.45rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.72rem 1rem;
  border: var(--line-control) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group input[type="checkbox"] {
  appearance: auto;            /* undo the generic input's appearance:none so the check renders */
  -webkit-appearance: auto;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  flex-shrink: 0;
  padding: 0;
  border: none;               /* clear the text-input border/background it inherited */
  background: none;
  accent-color: var(--color-primary);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-top: 0.5rem;
}
.form-success {
  display: none;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-family: var(--font-ui);
  color: var(--color-primary);
  font-weight: 600;
}

/* Error counterpart to .form-success, shown if a submission can't go through */
.form-error {
  display: none;
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-family: var(--font-ui);
  color: var(--color-error);
  font-weight: 600;
}

/* === 16. CTA BANNER === */
.cta-banner {
  background-color: var(--color-primary);   /* Hunter Green ground */
  text-align: center;
  padding: var(--space-xl) 0;
}
.cta-banner h2 { color: var(--color-bg); margin-bottom: 0.75rem; }
.cta-banner p { color: var(--color-bg); margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-banner .btn { margin: 0 0.4rem; }
/* Primary CTA flips to Papaya fill here so it doesn't vanish into the Hunter bg */
.cta-banner .btn--primary,
.cta-banner .btn--primary-on-dark {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}

/* === 17. TESTIMONIALS & PAST CLIENTS (Home) ===
   Social proof for the events side of the business: what venues and organizations
   say about hosting the herd, plus the roster of places we've brought it to.
   The cards sit on --color-surface rather than the section taking --section--hunter:
   a green band here would butt straight into the Evergreen footer and read as a
   seam between two greens. Card layering separates it from the Papaya section above. */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.testimonial {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.testimonial__quote p {
  font-size: var(--text-lg);
  line-height: 1.7;
}
/* margin-top:auto pins the attribution to the card's bottom edge, so the names line
   up across a row whose quotes run to different lengths */
.testimonial__cite {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 700;
  font-style: normal;   /* attribution is a label, not an aside — no italic */
  color: var(--color-heading);
}
.testimonial__org {
  display: block;
  font-weight: 400;
  color: var(--color-text-light);
}

/* Past-client roster. Names only, no logos — deliberately plain text rather than
   bordered chips, so nothing in the row reads as a control asking to be clicked. */
.clients { margin-top: var(--space-xl); }
.clients__title {
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: var(--space-md);
}
/* auto-fit, not a fixed count: the roster grows as they book more venues, and the
   row rebalances itself instead of needing a new breakpoint each time */
.clients__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm) var(--space-md);
  text-align: center;
}
.clients__item {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-heading);
}
.clients__place {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-light);
}

/* === 18. FOOTER === */
.footer {
  background-color: var(--color-overlay);
  padding: var(--space-xl) 0 0;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--texture);
  pointer-events: none;
}
.footer > .container { position: relative; z-index: 1; }
.footer__grid {
  padding-bottom: var(--space-lg);
}
.footer__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
}
.footer__social { display: flex; gap: 0.6rem; flex-shrink: 0; }
.footer__icon {   /* masked icon inside a social-link button (e.g. the Contact envelope) */
  width: 1.15rem;
  height: 1.15rem;
  background-color: currentColor;
  -webkit-mask: var(--icon-mail) center / contain no-repeat;
  mask: var(--icon-mail) center / contain no-repeat;
}
.footer__icon--facebook { -webkit-mask-image: var(--icon-facebook); mask-image: var(--icon-facebook); }
.footer__icon--instagram { -webkit-mask-image: var(--icon-instagram); mask-image: var(--icon-instagram); }
.footer__icon--tiktok { -webkit-mask-image: var(--icon-tiktok); mask-image: var(--icon-tiktok); }
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-btn);   /* square icon buttons, matching the CTAs */
  border: var(--line-control) solid color-mix(in srgb, var(--color-bg) 55%, transparent);   /* 3.74:1 — 25% was 1.89:1 and failed 1.4.11 */
  color: var(--color-bg);
  font-size: var(--text-sm);
  transition: all var(--transition);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 700;
}

.footer__link {
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  transition: color var(--transition);
}
.footer__copyright {
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  color: var(--color-bg);
  margin-bottom: 0;
}

/* === 21. RESPONSIVE === */
@media (max-width: 1024px) {
  .grid--3    { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .about-owner { grid-template-columns: 1fr; }
  /* Stacked, the photo would otherwise run the full container width and, at 4/5,
     stand taller than the viewport — cap it near its desktop column width. */
  .about-owner__image {
    position: static;
    width: 100%;          /* auto margins drop the grid stretch, so state it */
    max-width: var(--photo-stacked);
    margin-inline: auto;
  }
  /* Stacked it is no longer a column beside text, so it takes the landscape frame:
     wider than the portrait crop at the same width, and considerably shorter. */
  .about-owner__image img {
    aspect-ratio: 4 / 3;
    object-position: 50% 65%;   /* keeps the banner text and the whole muzzle in frame */
  }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* Collapse to the hamburger only once the 6 links would crowd the wordmark (~880px) */
@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}
/* Between 769-819px the two-column grid squeezes .u-actions narrow enough that
   its buttons wrap onto separate lines. Match the stacked treatment below so
   they line up at one width instead of two. */
@media (max-width: 819px) {
  .u-actions { flex-direction: column; align-items: center; }
  .u-actions .btn { width: 100%; max-width: 320px; text-align: center; }
}
@media (max-width: 768px) {
  :root { --space-xl: 3rem; --space-xxl: 4rem; }
  /* Stacked: cap the photo so it doesn't push the form off the screen */
  .contact-layout { grid-template-columns: 1fr; }
  .contact-photo { width: 100%; max-width: var(--photo-col); margin: 0 auto var(--space-lg); }
  /* Center the wrapped wordmark against the logo */
  .nav__brand-text { align-items: center; }
  .nav__brand-name { text-align: center; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  /* Stacked CTA buttons share one width so they line up */
  .hero__actions,
  .u-actions { flex-direction: column; align-items: center; }
  .hero__actions .btn,
  .u-actions .btn { width: 100%; max-width: 320px; text-align: center; }
  .section--hunter .u-narrow-center .btn { display: block; width: 100%; max-width: 320px; margin: 0.6rem auto 0; }
  .cta-banner .btn { display: block; width: 100%; max-width: 320px; margin: 0.6rem auto 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .events-list { gap: 2.25rem; }
  .event-item {
    grid-template-columns: 1fr;
    grid-template-areas: "date" "body" "flyer";
  }
  .event-item__flyer-img { aspect-ratio: 16 / 9; }
  .event-item__date {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem 0.55rem;
  }
  .event-item__day {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.1;
  }
  .event-detail { grid-template-columns: 1fr; }
  .event-detail__info { grid-column: 1; grid-row: 1; }
  .event-detail__flyer { grid-column: 1; grid-row: 2; max-width: 100%; }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; }
}

/* === 21. UTILITIES (extracted from former inline styles) === */
.req { color:var(--color-error); }
.u-actions { margin-top:1.75rem;display:flex;gap:1rem;flex-wrap:wrap; }
.u-actions--center { justify-content:center; }
.u-note-sm { margin-bottom:0;font-size:var(--text-base); }
.u-prose-lg { font-size:var(--text-base);line-height:1.9; }
.u-chiprow { display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.6rem;align-items:center; }
.u-checkbox { width:auto;min-width:18px;height:18px;flex-shrink:0;accent-color:var(--color-primary); }
.btn--block { width:100%;padding:0.75rem 1.75rem; }   /* full width; height matches every other CTA */
.u-center { text-align:center; }
.u-footnote { text-align:center;margin-top:2.5rem;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-light); }
.u-center-mt { text-align:center;margin-top:0.75rem; }
.u-narrow-center { max-width:860px;margin:0 auto;text-align:center; }
.u-narrow { max-width:var(--measure);margin:0 auto; }
/* Fact rows kept in the markup only so the filter/sort JS can read them
   (it builds its dropdowns from .animal-card__facts dt/dd), but not shown
   on the card. Deleting the row instead would delete the filter with it. */
.animal-card__facts .is-filter-only { display: none; }
/* Screen-reader-only text: visible to assistive tech, not on screen */
.u-sr-only {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.u-mt-lg { margin-top:1.75rem; }
.u-mt { margin-top:1.5rem; }
.u-mt-xs { margin-top:0.5rem; }
.u-push-right { margin-left:auto;flex-shrink:0; }
.u-checklabel { margin-bottom:0;font-weight:400;font-size:var(--text-sm);cursor:pointer; }
.u-icon-lg { font-size:var(--text-5xl); }
.u-lead-sm { font-size:var(--text-ui);margin-bottom:1.75rem; }
.u-fs-88 { font-size:var(--text-sm); }
.u-metarow { display:flex;gap:2rem;flex-wrap:wrap;align-items:center;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-light); }
.u-inline-mb0 { display:flex;align-items:center;gap:0.75rem;margin-bottom:0; }
.u-inline-mb0 label { margin-bottom:0; }   /* drop the block-label bottom margin so the row truly centers */
.u-muted-normal { color:var(--color-text-light);font-weight:400; }
.u-muted-base { color:var(--color-text-light);font-size:var(--text-base); }
.u-ink { color:var(--color-text); }
.u-link-strong { color:var(--color-primary);font-weight:600; }
.u-photo {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  aspect-ratio: 4 / 5;          /* same portrait frame as .about-owner__image */
  object-fit: cover;
  object-position: 50% 25%;
  display: block;
}
/* Square framing for sources that shouldn't be forced into a portrait frame
   (event flyers, archival photos). The second selector only exists to outrank
   .event-detail__flyer .event-item__flyer-img, which is more specific. */
img.u-square,
.event-detail__flyer img.u-square {
  aspect-ratio: 1 / 1;
  height: auto;
}
.u-subbar { background:var(--color-surface);border-bottom:1px solid var(--color-border-light);padding:1rem 0; }
.u-grid-center { align-items:center;gap:4rem; }
.u-mb-xs { margin-bottom:0.35rem; }
.u-mt-2xl { margin-top: var(--space-xl); }

/* === SCROLL REVEAL === */
/* Elements fade/slide in as they enter the viewport. Motion is disabled for
   users who prefer reduced motion (they see everything in its final state). */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* === TOUCH-SAFE INTERACTIONS === */
/* Hover effects apply only where a hover-capable pointer exists (prevents sticky hover on touch) */
@media (hover: hover) {
  a:hover { color: var(--color-accent); }
  .btn--primary:hover,
  .btn--primary-on-dark:hover {
  background-color: var(--color-overlay);
  color: var(--color-bg);
  border-color: var(--color-overlay);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
  .btn--outline:hover {
  background-color: var(--color-overlay);
  color: var(--color-bg);
  border-color: var(--color-overlay);
}
  .btn--outline-light:hover {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}
  .hero .btn--primary:hover,
  .hero .btn--primary-on-dark:hover {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}
  .nav__link:hover {
  color: var(--color-bg);
  background-color: color-mix(in srgb, var(--color-bg) 12%, transparent);
}
  .filter-toggle:hover,
  .sort-toggle:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}
  .sort-menu__item:hover { background: var(--color-accent-light); }
  .carousel__arrow:hover,
  .carousel__expand:hover { background: var(--color-overlay); }
  .animal-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}
  .event-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .event-item__flyer:hover .event-item__flyer-img { transform: scale(1.04); }
  .event-item__flyer:hover::after { opacity: 1; }
  .event-item__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
  .event-share:hover { text-decoration: underline; text-underline-offset: 3px; }
  .event-detail__back:hover { text-decoration: underline; text-underline-offset: 3px; }
  .lightbox__btn:hover { background: color-mix(in srgb, var(--color-bg) 30%, transparent); }
  .cta-banner .btn--primary:hover,
  .cta-banner .btn--primary-on-dark:hover {
  background-color: var(--color-primary-light);
  color: var(--color-bg);
  border-color: var(--color-bg);
}
  .footer__social-link:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
  color: var(--color-overlay);
}
  .footer__link:hover { color: var(--color-accent-light); }
}

/* Pressed states: tap feedback on touch, click feedback on desktop */
a:active { color: var(--color-accent); }
.btn--primary:active,
.btn--primary-on-dark:active {
  background-color: var(--color-overlay);
  color: var(--color-bg);
  border-color: var(--color-overlay);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--outline:active {
  background-color: var(--color-overlay);
  color: var(--color-bg);
  border-color: var(--color-overlay);
}
.btn--outline-light:active {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}
.hero .btn--primary:active,
.hero .btn--primary-on-dark:active {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}

.nav__link:active {
  color: var(--color-bg);
  background-color: color-mix(in srgb, var(--color-bg) 12%, transparent);
}
.filter-toggle:active,
.sort-toggle:active {
  background: var(--color-primary);
  color: var(--color-bg);
}
.sort-menu__item:active { background: var(--color-accent-light); }
.carousel__arrow:active,
.carousel__expand:active { background: var(--color-overlay); }
.animal-card:active {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}
.event-item:active { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.event-item__flyer:active .event-item__flyer-img { transform: scale(1.04); }
.event-item__flyer:active::after { opacity: 1; }
.event-item__title a:active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.event-share:active { text-decoration: underline; text-underline-offset: 3px; }
.event-detail__back:active { text-decoration: underline; text-underline-offset: 3px; }
.lightbox__btn:active { background: color-mix(in srgb, var(--color-bg) 30%, transparent); }
.cta-banner .btn--primary:active,
.cta-banner .btn--primary-on-dark:active {
  background-color: var(--color-primary-light);
  color: var(--color-bg);
  border-color: var(--color-bg);
}
.footer__social-link:active {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
  color: var(--color-overlay);
}
.footer__link:active { color: var(--color-accent-light); }