:root {
  --purple-950: #24102b;
  --purple-900: #34143e;
  --purple-800: #4b2059;
  --purple-700: #613170;
  --olive-800: #58613e;
  --olive-700: #6f7950;
  --olive-600: #7e895b;
  --paper: #f7ecd5;
  --paper-deep: #ead7b8;
  --wood: #9b6844;
  --ink: #271d1a;
  --muted: #685d55;
  --white: #fffdf8;
  --shadow-sm: 0 7px 22px rgba(42, 21, 20, .14);
  --shadow-lg: 0 20px 60px rgba(22, 8, 27, .30);
  --radius: 18px;
  --script: "Segoe Script", "Brush Script MT", "Bradley Hand", cursive;
  --display: Georgia, "Times New Roman", serif;
  --body: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--purple-950); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -18%, rgba(125, 89, 138, .7), transparent 36rem),
    var(--purple-950);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-social svg, .footer-social svg { fill: currentColor; stroke: none; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 9999;
  left: 1rem;
  top: -5rem;
  padding: .7rem 1rem;
  color: #fff;
  background: #111;
  border-radius: .5rem;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Mobile/tablet navigation. The supplied artwork contains the desktop navigation. */
.site-header {
  display: none;
  position: sticky;
  z-index: 1000;
  top: 0;
  color: var(--white);
  background: rgba(52, 20, 62, .98);
  border-bottom: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}
.site-header__inner {
  width: min(1120px, 100%);
  min-height: 64px;
  margin: 0 auto;
  padding: .45rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .01em;
}
.brand img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.75);
}
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-toggle {
  flex: 0 0 auto;
  width: 45px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 9px;
  cursor: pointer;
}
.menu-toggle svg { width: 24px; height: 24px; }
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: .7rem;
  background: rgba(52, 20, 62, .995);
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 30px rgba(0,0,0,.32);
}
.site-nav.is-open { display: grid; }
.site-nav > a {
  padding: .78rem .9rem;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.site-nav > a:hover,
.site-nav > a:focus-visible,
.site-nav > a[aria-current="page"] { background: var(--olive-700); outline: none; }
.nav-social { display: flex; gap: .65rem; padding: .8rem .5rem .25rem; }
.nav-social a, .footer-social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  text-decoration: none;
}

/* Exact supplied desktop compositions */
.desktop-art {
  width: min(1024px, 100%);
  margin: 0 auto;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}
.artwork-wrap { position: relative; width: 100%; line-height: 0; overflow: hidden; }
.page-artwork { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.hotspot {
  position: absolute;
  z-index: 10;
  display: block;
  border-radius: 5px;
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  background: transparent;
  outline: none;
  transition: background-color .16s ease, box-shadow .16s ease;
}
.hotspot:hover,
.hotspot:focus-visible {
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.75), 0 0 0 2px rgba(55,19,66,.65);
}
.desktop-anchor { position: absolute; display: block; width: 1px; height: 1px; }
.responsive-content { display: none; }

/* Responsive reconstructed pages */
.responsive-content {
  width: min(1120px, 100%);
  margin: 0 auto;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 12%, rgba(121, 86, 43, .06) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 25%, rgba(121, 86, 43, .05) 0 1px, transparent 2px),
    linear-gradient(100deg, rgba(255,255,255,.16), transparent 45%, rgba(121,86,43,.05)),
    var(--paper);
  background-size: 23px 23px, 31px 31px, auto, auto;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.responsive-content.always-visible { display: block; min-height: 70vh; }
h1, h2, h3 { line-height: 1.12; }
h1, h2 { color: var(--purple-800); font-family: var(--script); font-weight: 700; }
h1 { margin: .1em 0 .3em; font-size: clamp(2.55rem, 10vw, 5rem); letter-spacing: -.035em; }
h2 { margin: .1em 0 .55em; font-size: clamp(2rem, 7vw, 3.25rem); }
h3 { margin: 0 0 .35rem; color: var(--olive-800); font-size: 1.35rem; }
p { margin: 0 0 1rem; }
.eyebrow {
  margin: 0 0 .4rem;
  color: var(--olive-800);
  font-family: var(--script);
  font-size: clamp(1.25rem, 5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
}
.script-tagline { color: var(--purple-700); font-family: var(--script); font-size: 1.25rem; font-weight: 700; line-height: 1.4; }

.mobile-hero {
  position: relative;
  min-height: 620px;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff;
  background: #6f7950;
}
.mobile-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(27,14,28,.08) 15%, rgba(27,14,28,.25) 48%, rgba(29,13,34,.96) 100%);
  pointer-events: none;
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-brand { position: absolute; z-index: 2; top: 1rem; left: 1rem; width: min(46vw, 210px); filter: drop-shadow(0 7px 14px rgba(0,0,0,.28)); }
.hero-brand img { display: block; width: 100%; height: auto; }
.hero-copy { position: relative; z-index: 3; padding: 16rem 1.15rem 2rem; text-shadow: 0 2px 12px rgba(0,0,0,.75); }
.hero-copy h1, .hero-copy .eyebrow, .hero-copy .script-tagline { color: #fff; }
.hero-copy p:not(.eyebrow):not(.script-tagline) { max-width: 760px; font-size: 1.05rem; }

.inner-hero {
  display: grid;
  background: linear-gradient(145deg, #fff7e8, #ead9bd);
  border-bottom: 8px solid rgba(95,49,111,.14);
}
.inner-hero > img { width: 100%; height: min(56vw, 440px); min-height: 280px; object-fit: cover; }
.inner-hero > div { padding: 1.4rem 1.15rem 1.8rem; }
.inner-hero h1 { margin-top: 0; }
.inner-hero--programs > img { object-position: 58% center; }
.inner-hero--animals > img { object-position: 61% center; }

.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.15rem; }
.button {
  min-height: 48px;
  padding: .75rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #fff;
  background: linear-gradient(#6d397c, #4b2059);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 10px;
  box-shadow: 0 5px 0 #2b1233, 0 9px 18px rgba(31,14,36,.25);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.button:hover, .button:focus-visible { transform: translateY(-1px); filter: brightness(1.07); outline: 3px solid rgba(255,255,255,.75); outline-offset: 2px; }
.button--olive { background: linear-gradient(#859064, #5b6442); box-shadow: 0 5px 0 #434a30, 0 9px 18px rgba(31,14,36,.22); }
.button--light { color: var(--olive-800); background: #fffdf8; box-shadow: 0 5px 0 rgba(34,18,39,.4), 0 9px 18px rgba(31,14,36,.22); border-color: rgba(255,255,255,.7); }
.button svg { fill: currentColor; stroke: none; }

.feature-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(75,32,89,.16);
  border-top: 1px solid rgba(75,32,89,.2);
  border-bottom: 1px solid rgba(75,32,89,.2);
}
.feature-strip span { min-height: 76px; padding: .85rem .65rem; display: grid; place-items: center; text-align: center; font-weight: 700; background: rgba(255,253,248,.78); }
.feature-strip span:last-child { grid-column: 1 / -1; }
.paper-section { padding: 2.7rem 1rem; }
.paper-section + .paper-section { border-top: 1px solid rgba(101,70,48,.16); }
.section-heading { max-width: 760px; margin: 0 auto 1.4rem; text-align: center; }
.split-section { display: grid; gap: 1.6rem; align-items: center; }
.polaroid { max-width: 430px; margin: 0 auto; padding: .7rem .7rem 2rem; background: #fff; border: 1px solid rgba(88,61,45,.18); box-shadow: 0 10px 28px rgba(62,39,26,.22); transform: rotate(-1.2deg); }
.polaroid img { display: block; width: 100%; height: auto; }
.heart-list { margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; list-style: none; }
.heart-list li { position: relative; padding-left: 1.8rem; }
.heart-list li::before { content: "♥"; position: absolute; left: .1rem; color: var(--purple-700); }

.card-grid, .program-grid, .animal-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.image-card {
  display: grid;
  grid-template-columns: 125px 1fr;
  align-items: stretch;
  overflow: hidden;
  color: #fff;
  background: var(--purple-800);
  border: 1px solid rgba(56,30,24,.18);
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.image-card img { width: 125px; height: 100%; min-height: 110px; object-fit: cover; }
.image-card span { padding: .9rem; display: grid; place-items: center start; font-weight: 700; line-height: 1.25; }
.image-card:hover, .image-card:focus-visible { transform: translateY(-2px); outline: 3px solid var(--olive-600); outline-offset: 2px; }

.funding-banner {
  margin: 0 1rem 2rem;
  padding: 1.2rem;
  display: grid;
  gap: .3rem;
  color: #fff;
  background: linear-gradient(145deg, #747d55, #4f5739);
  border: 4px double rgba(255,255,255,.35);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.funding-banner strong { font-size: 1.3rem; }
.funding-banner a { margin-top: .55rem; font-weight: 700; }

.promise-grid, .details-grid, .program-options, .contact-grid { display: grid; gap: 1rem; padding: 1rem; }
.promise-grid article, .details-grid article, .program-options article, .contact-grid article, .notice {
  padding: 1.35rem;
  background: rgba(255,253,248,.78);
  border: 1px solid rgba(92,58,34,.2);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.promise-grid article:first-child { color: #fff; background: linear-gradient(145deg, #7b835c, #596140); }
.promise-grid article:first-child h2, .promise-grid article:first-child .heart-list li::before { color: #fff; }
.philosophy-grid { display: grid; gap: 1rem; }
.philosophy-grid article { padding: 1.25rem; position: relative; background: rgba(255,253,248,.78); border: 1px solid rgba(92,58,34,.18); border-radius: 13px; }
.philosophy-grid article > span { position: absolute; right: 1rem; top: .65rem; color: rgba(95,49,112,.22); font-size: 2.4rem; font-weight: 800; }
.simple-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.simple-grid article { min-height: 100px; padding: 1rem; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #6f7950, #596140); border-radius: 10px; box-shadow: var(--shadow-sm); text-align: center; font-weight: 700; }

.program-options { background: rgba(105,116,77,.10); }
.program-options article h2 { font-family: var(--display); font-size: 1.4rem; }
.program-card, .animal-card {
  overflow: hidden;
  background: rgba(255,253,248,.84);
  border: 1px solid rgba(92,58,34,.2);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 80px;
}
.program-card img, .animal-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.program-card > div, .animal-card > div { padding: 1rem; }
.program-card h2, .animal-card h2 { margin: 0 0 .35rem; font-size: 1.7rem; }
.program-card p, .animal-card p { margin: 0; }
.schedule { margin: 0; }
.schedule div { display: grid; grid-template-columns: 4.5rem 1fr; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed rgba(90,60,42,.28); }
.schedule dt { color: var(--purple-700); font-weight: 700; }
.schedule dd { margin: 0; }
.new-animals { padding: 2.4rem 1rem; color: #fff; background: linear-gradient(145deg, #5b6442, #3d452c); text-align: center; }
.new-animals h2 { color: #fff; }
.new-animals ul { margin: 1rem auto 0; padding: 0; max-width: 800px; display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; list-style: none; }
.new-animals li { padding: .45rem .7rem; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; }

.cta-band {
  padding: 1.5rem 1rem;
  display: grid;
  gap: 1rem;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(rgba(67,25,78,.93), rgba(67,25,78,.93)),
    url('../images/home-programs-strip.webp') center/cover;
  border-top: 7px solid rgba(82,50,33,.5);
  text-align: center;
}
.cta-band h2 { margin: 0 0 .25rem; color: #fff; }
.cta-band p { margin: 0; }
.cta-band .button { justify-self: center; }

.utility-hero { min-height: 390px; padding: 7rem 1.15rem 3rem; display: grid; align-content: center; color: #fff; background: linear-gradient(rgba(48,19,57,.75),rgba(48,19,57,.93)), url('../images/home-animals.webp') center/cover; text-align: center; }
.utility-hero h1, .utility-hero .eyebrow { color: #fff; }
.utility-hero p { max-width: 760px; margin-left: auto; margin-right: auto; }
.notice { max-width: 780px; margin: 0 auto; text-align: center; }
.contact-grid { padding: 1rem; background: rgba(105,116,77,.1); }
.contact-grid article { text-align: center; }
.contact-grid h2 { font-size: 1.8rem; }
.contact-grid a { color: var(--purple-700); font-weight: 700; overflow-wrap: anywhere; }

.site-footer {
  display: none;
  color: #fff;
  background: #42482f;
  border-top: 1px solid rgba(255,255,255,.16);
}
.site-footer__inner { width: min(1120px, 100%); margin: 0 auto; padding: 1.5rem 1rem; display: grid; gap: 1.2rem; }
.footer-brand { display: grid; }
.footer-brand strong { font-size: 1.2rem; }
.footer-brand span { font-family: var(--script); }
.footer-contact { display: grid; gap: .55rem; }
.footer-contact > a, .footer-contact > span { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.footer-contact svg { flex: 0 0 auto; }
.footer-social { display: flex; gap: .6rem; }
.copyright { margin: 0; padding: 1rem; border-top: 1px solid rgba(255,255,255,.14); text-align: center; font-size: .86rem; opacity: .8; }

.toast {
  position: fixed;
  z-index: 5000;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  width: min(92vw, 520px);
  padding: .85rem 1rem;
  color: #fff;
  background: rgba(30,14,35,.97);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: .65rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.34);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 899px) {
  body { background: var(--paper); font-size: 16px; }
  .site-header, .site-footer { display: block; }
  .desktop-art { display: none; }
  .responsive-content { display: block; box-shadow: none; }
  .page--programs:target .responsive-content { display: block; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .site-header__inner { min-height: 72px; }
  .brand img { width: 56px; height: 56px; }
  .inner-hero { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .inner-hero > img { height: 100%; min-height: 480px; }
  .inner-hero > div { padding: 3.3rem 2rem; align-self: center; }
  .split-section { grid-template-columns: .8fr 1.2fr; padding-left: 2rem; padding-right: 2rem; }
  .split-section--reverse { grid-template-columns: 1.2fr .8fr; }
  .promise-grid, .program-options, .contact-grid { grid-template-columns: repeat(2, 1fr); padding: 2rem; }
  .details-grid { grid-template-columns: repeat(2, 1fr); padding: 2rem; }
  .details-grid article:last-child { grid-column: 1 / -1; }
  .philosophy-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid--programs { grid-template-columns: repeat(2, 1fr); }
  .image-card { grid-template-columns: 130px 1fr; }
  .program-grid, .animal-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-strip { grid-template-columns: repeat(3, 1fr); }
  .feature-strip span:last-child { grid-column: auto; }
  .simple-grid { grid-template-columns: repeat(3, 1fr); }
  .cta-band { grid-template-columns: 1fr auto; padding: 2rem; text-align: left; }
  .site-footer__inner { grid-template-columns: 1fr 1.5fr auto; align-items: center; }
}

@media (min-width: 900px) {
  .site-footer { display: none; }
  .page:has(.always-visible) .site-header { display: block; }
  .page:has(.always-visible) .site-footer { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Pages without supplied full-page artwork stay live-text at every width. */
.page--funding .responsive-content,
.page--events .responsive-content,
.page--support .responsive-content,
.page--contact .responsive-content { display: block; }
.page--funding .site-header,
.page--events .site-header,
.page--support .site-header,
.page--contact .site-header,
.page--funding .site-footer,
.page--events .site-footer,
.page--support .site-footer,
.page--contact .site-footer { display: block; }

@media (min-width: 900px) {
  .page--funding .site-header__inner,
  .page--events .site-header__inner,
  .page--support .site-header__inner,
  .page--contact .site-header__inner,
  .page:has(.always-visible) .site-header__inner { min-height: 82px; }

  .page--funding .menu-toggle,
  .page--events .menu-toggle,
  .page--support .menu-toggle,
  .page--contact .menu-toggle,
  .page:has(.always-visible) .menu-toggle { display: none; }

  .page--funding .site-nav,
  .page--events .site-nav,
  .page--support .site-nav,
  .page--contact .site-nav,
  .page:has(.always-visible) .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: .15rem;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .page--funding .site-nav > a,
  .page--events .site-nav > a,
  .page--support .site-nav > a,
  .page--contact .site-nav > a,
  .page:has(.always-visible) .site-nav > a { padding: .6rem .55rem; font-size: .92rem; }

  .page--funding .nav-social,
  .page--events .nav-social,
  .page--support .nav-social,
  .page--contact .nav-social,
  .page:has(.always-visible) .nav-social { padding: 0 0 0 .5rem; }

  .page--funding .brand img,
  .page--events .brand img,
  .page--support .brand img,
  .page--contact .brand img,
  .page:has(.always-visible) .brand img { width: 60px; height: 60px; }

  .page--funding .site-footer__inner,
  .page--events .site-footer__inner,
  .page--support .site-footer__inner,
  .page--contact .site-footer__inner,
  .page:has(.always-visible) .site-footer__inner { grid-template-columns: 1fr 1.5fr auto; align-items: center; }

  .page--funding .promise-grid,
  .page--events .promise-grid,
  .page--support .promise-grid,
  .page--contact .contact-grid { grid-template-columns: repeat(4, 1fr); padding: 2rem; }
}

/* --------------------------------------------------------------------------
   2026-08 revision: unified live desktop navigation + Funding/Events/Schedule
   -------------------------------------------------------------------------- */
.desktop-nav-overlay {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 19.5%;
  right: 0;
  height: 4.15%;
  min-height: 48px;
  padding: 0 .7%;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(60,24,70,.98), rgba(42,14,50,.99)),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.025) 9px 10px);
  border-bottom: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  line-height: 1;
}
.desktop-nav-overlay > a {
  min-width: 0;
  padding: 0 .42vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  font-size: clamp(10px, 1.23vw, 13px);
  font-weight: 600;
  letter-spacing: -.02em;
}
.desktop-nav-overlay > a:hover,
.desktop-nav-overlay > a:focus-visible,
.desktop-nav-overlay > a[aria-current="page"] {
  background: rgba(111,121,80,.95);
  outline: none;
}
.desktop-nav-social {
  flex: 0 0 auto;
  padding-left: .25vw;
  display: flex;
  align-items: center;
  gap: .3vw;
}
.desktop-nav-social a {
  width: clamp(23px, 2.65vw, 28px);
  height: clamp(23px, 2.65vw, 28px);
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.96);
  border-radius: 50%;
  text-decoration: none;
}
.desktop-nav-social a:hover,
.desktop-nav-social a:focus-visible { outline: 2px solid #c6d19d; outline-offset: 2px; }
.desktop-nav-social svg { width: 58%; height: 58%; color: var(--purple-900); fill: currentColor; stroke: none; }
.desktop-nav-social svg rect,
.desktop-nav-social svg circle { fill: none; stroke: currentColor; stroke-width: 2; }

/* Mobile Funding & Pricing */
.funding-mobile-hero > img { object-position: center 44%; }
.funding-options-v3 { padding-bottom: 1.25rem; }
.funding-method-grid { display: grid; gap: 1rem; }
.funding-card {
  padding: 1.2rem;
  background: rgba(255,253,248,.84);
  border: 1px solid rgba(92,58,34,.2);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.funding-card h3 {
  margin: 0 0 .55rem;
  color: var(--purple-800);
  font-family: var(--display);
  font-size: 1.45rem;
  text-transform: uppercase;
  line-height: 1.08;
}
.funding-card--private h3 { color: var(--olive-800); }
.price-grid {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  overflow: hidden;
  border: 1px solid rgba(93,103,63,.3);
  border-radius: 10px;
  background: rgba(119,130,82,.08);
}
.price-grid div { padding: .75rem .35rem; display: grid; gap: .2rem; text-align: center; border-right: 1px solid rgba(93,103,63,.26); }
.price-grid div:last-child { border-right: 0; }
.price-grid strong { color: var(--olive-800); font-size: 1.55rem; line-height: 1; }
.price-grid span { font-size: .78rem; line-height: 1.25; }
.check-list { margin: .85rem 0 0; padding: 0; display: grid; gap: .45rem; list-style: none; }
.check-list li { position: relative; padding-left: 1.55rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: .02rem; width: 1.1rem; height: 1.1rem; display: grid; place-items: center; color: #fff; background: var(--olive-800); border-radius: 50%; font-size: .72rem; font-weight: 800; }
.info-box { margin: .9rem 0; padding: .9rem; background: rgba(95,49,112,.07); border: 1px solid rgba(95,49,112,.2); border-radius: 10px; }
.club-section { padding-top: 1.6rem; }
.club-list { display: grid; gap: .55rem; }
.club-list article { padding: .75rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(255,253,248,.76); border: 1px solid rgba(92,58,34,.16); border-radius: 9px; }
.club-list strong { color: var(--purple-800); }
.club-list span { flex: 0 0 auto; color: var(--olive-800); font-size: .9rem; font-weight: 700; }
.funding-formula { margin: 1.4rem auto .7rem; max-width: 670px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .45rem; }
.funding-formula > div { min-height: 120px; padding: .75rem .35rem; display: grid; place-items: center; align-content: center; text-align: center; background: rgba(255,253,248,.82); border: 1px solid rgba(92,58,34,.2); border-radius: 10px; }
.funding-formula strong { color: var(--olive-800); font-size: 2rem; line-height: 1; }
.funding-formula span { font-size: .78rem; line-height: 1.25; }
.funding-formula b { color: var(--purple-700); font-size: 1.5rem; }
.center-note { max-width: 650px; margin: .75rem auto 0; text-align: center; font-size: .92rem; }
.fee-support-grid { display: grid; gap: 1rem; }
.fee-support-grid > article { padding: 1.3rem; background: rgba(255,253,248,.8); border: 1px solid rgba(92,58,34,.2); border-radius: 14px; box-shadow: var(--shadow-sm); }
.support-callout { align-content: center; }

/* Mobile Events */
.events-mobile-hero > img { object-position: center; }
.events-grid-section { padding-top: 1.4rem; }
.event-card-grid { display: grid; gap: 1rem; }
.event-card { overflow: hidden; background: rgba(255,253,248,.84); border: 1px solid rgba(92,58,34,.2); border-radius: 14px; box-shadow: var(--shadow-sm); }
.event-card > img { width: 100%; height: 220px; display: block; object-fit: cover; }
.event-card > div { padding: 1.1rem; }
.event-card h2 { margin-top: .15rem; font-size: 2rem; }
.event-type { margin: -1.1rem -1.1rem 1rem; padding: .65rem 1rem; color: #fff; background: var(--purple-800); font-family: var(--display); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; text-align: center; letter-spacing: .03em; }
.event-type--olive { background: var(--olive-800); }
.event-status { margin: 1rem 0 0; padding: .55rem .75rem; color: #fff; background: var(--purple-800); border-radius: 8px; text-align: center; font-weight: 700; }
.event-status--olive { background: var(--olive-800); }
.cinnamon-layout { display: grid; gap: 1.6rem; align-items: center; }
.cinnamon-layout .polaroid { max-width: 320px; }
.small-link { margin: .8rem 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.small-link a { color: var(--purple-700); font-weight: 700; }

/* Mobile Sample Schedule */
.schedule-mobile-hero > img { object-position: center; }
.schedule-intro { padding-top: 1.4rem; padding-bottom: 1.4rem; text-align: center; font-size: 1.05rem; }
.weekly-schedule { display: grid; gap: .9rem; }
.weekly-schedule > article { overflow: hidden; background: rgba(255,253,248,.84); border: 1px solid rgba(92,58,34,.2); border-radius: 12px; box-shadow: var(--shadow-sm); }
.weekly-schedule > article > h3 { margin: 0; padding: .65rem .9rem; color: #fff; background: linear-gradient(145deg,#6e7651,#4e5638); font-family: var(--display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
.schedule-item { padding: .85rem .9rem; display: grid; gap: .45rem; border-top: 1px solid rgba(92,58,34,.16); }
.schedule-item:first-of-type { border-top: 0; }
.schedule-item > div { display: grid; }
.schedule-item strong { color: var(--purple-800); font-family: var(--script); font-size: 1.18rem; line-height: 1.2; }
.schedule-item span { font-size: .9rem; }
.schedule-item time { color: var(--olive-800); font-weight: 800; }
.growing-card { max-width: 780px; margin: 0 auto; padding: 1.4rem; color: #fff; background: linear-gradient(145deg,#5a2868,#35173e); border: 4px double rgba(255,255,255,.3); border-radius: 13px; box-shadow: var(--shadow-sm); text-align: center; }
.growing-card h2, .growing-card .eyebrow { color: #fff; }

@media (min-width: 600px) and (max-width: 899px) {
  .funding-method-grid { grid-template-columns: repeat(2,1fr); }
  .funding-method-grid article:last-child { grid-column: 1 / -1; }
  .club-list { grid-template-columns: repeat(2,1fr); }
  .event-card-grid { grid-template-columns: repeat(2,1fr); }
  .cinnamon-layout { grid-template-columns: .7fr 1.3fr; }
  .weekly-schedule { grid-template-columns: repeat(2,1fr); }
  .fee-support-grid { grid-template-columns: repeat(2,1fr); }
}

/* Funding and Events now have supplied desktop artwork, so they behave like the
   other poster-based pages above 900px. Support and Contact remain live HTML. */
@media (min-width: 900px) {
  .page--funding .site-header,
  .page--events .site-header,
  .page--schedule .site-header,
  .page--funding .site-footer,
  .page--events .site-footer,
  .page--schedule .site-footer { display: none; }

  .page--funding .responsive-content,
  .page--events .responsive-content,
  .page--schedule .responsive-content { display: none; }

  .page--funding .desktop-art,
  .page--events .desktop-art,
  .page--schedule .desktop-art { display: block; }

  /* Fit the expanded 9-item nav on utility pages that remain live HTML desktop. */
  .page--support .site-header__inner,
  .page--contact .site-header__inner,
  .page:has(.always-visible) .site-header__inner { width: min(1280px,100%); }
  .page--support .site-nav > a,
  .page--contact .site-nav > a,
  .page:has(.always-visible) .site-nav > a { padding: .55rem .38rem; font-size: .82rem; white-space: nowrap; }
}

@media (max-width: 520px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-grid div { border-right: 0; border-bottom: 1px solid rgba(93,103,63,.26); }
  .price-grid div:last-child { border-bottom: 0; }
  .funding-formula { grid-template-columns: 1fr; gap: .3rem; }
  .funding-formula > div { min-height: 96px; }
  .funding-formula b { transform: rotate(90deg); justify-self: center; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .page--support .menu-toggle,
  .page--contact .menu-toggle,
  .page:has(.always-visible) .menu-toggle { display: grid; }

  .page--support .site-nav,
  .page--contact .site-nav,
  .page:has(.always-visible) .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
    padding: .7rem;
    background: rgba(52,20,62,.995);
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 16px 30px rgba(0,0,0,.32);
  }
  .page--support .site-nav.is-open,
  .page--contact .site-nav.is-open,
  .page:has(.always-visible) .site-nav.is-open { display: grid; }

  .page--support .site-nav > a,
  .page--contact .site-nav > a,
  .page:has(.always-visible) .site-nav > a { padding: .78rem .9rem; font-size: 1rem; }

  .page--support .nav-social,
  .page--contact .nav-social,
  .page:has(.always-visible) .nav-social { padding: .8rem .5rem .25rem; }
}

/* --------------------------------------------------------------------------
   2026-08 revision V4: final Support + Contact artwork and responsive pages
   -------------------------------------------------------------------------- */

/* Contact form layered over the supplied desktop artwork so the visual form
   is actually usable instead of being a flat image. */
.desktop-contact-form {
  position: absolute;
  z-index: 22;
  left: 4.65%;
  top: 39.05%;
  width: 37.75%;
  height: 11.55%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 16% 16% 43% 18%;
  column-gap: 2.5%;
  row-gap: 3.2%;
  line-height: 1.2;
}
.desktop-contact-form input,
.desktop-contact-form textarea,
.desktop-contact-form button {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 3.2%;
  color: #2b211e;
  background: rgba(255,253,248,.72);
  border: 1px solid rgba(104,77,55,.34);
  border-radius: 5px;
  font: 600 clamp(10px, 1.1vw, 13px)/1.2 Arial, sans-serif;
  box-shadow: none;
}
.desktop-contact-form input:focus,
.desktop-contact-form textarea:focus {
  background: rgba(255,253,248,.94);
  outline: 2px solid rgba(95,49,112,.7);
  outline-offset: 1px;
}
.desktop-contact-form input[name="email"] { grid-column: 1 / -1; }
.desktop-contact-form textarea {
  grid-column: 1 / -1;
  padding-top: 2.5%;
  resize: none;
}
.desktop-contact-form button {
  grid-column: 1 / -1;
  color: #fff;
  background: rgba(75,32,89,.96);
  border-color: rgba(75,32,89,.98);
  font-family: Georgia, serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.desktop-contact-form button:hover,
.desktop-contact-form button:focus-visible { background: #6a3579; outline: 2px solid #fff; outline-offset: 1px; }

.contact-mobile-hero > img { object-position: center 54%; }
.support-mobile-hero > img { object-position: center 52%; }

.contact-info-grid { display: grid; gap: .85rem; }
.contact-info-grid article {
  padding: 1.15rem 1rem;
  text-align: center;
  background: rgba(255,253,248,.78);
  border: 1px solid rgba(87,57,38,.18);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.contact-info-grid h2 { margin: .25rem 0 .35rem; font-family: var(--display); font-size: 1.35rem; }
.contact-info-grid a { color: var(--purple-800); font-weight: 800; overflow-wrap: anywhere; }
.contact-info-grid p { margin-bottom: 0; }
.contact-icon {
  width: 48px; height: 48px; margin: 0 auto .5rem; display: grid; place-items: center;
  color: #fff; background: var(--olive-800); border-radius: 50%; font: 800 1.35rem/1 Arial, sans-serif;
}
.contact-info-grid article:nth-child(even) .contact-icon { background: var(--purple-800); }

.contact-message-layout { display: grid; gap: 1.3rem; align-items: start; }
.contact-form-card {
  padding: 1.2rem;
  background: rgba(255,253,248,.82);
  border: 1px solid rgba(84,48,94,.28);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.live-contact-form { display: grid; gap: .8rem; }
.live-contact-form .form-row { display: grid; gap: .8rem; }
.live-contact-form label { display: grid; gap: .3rem; color: var(--purple-900); font-weight: 800; }
.live-contact-form input,
.live-contact-form textarea {
  width: 100%;
  padding: .78rem .85rem;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(92,58,34,.35);
  border-radius: 8px;
  font: 500 1rem/1.35 Georgia, serif;
}
.live-contact-form textarea { min-height: 150px; resize: vertical; }
.live-contact-form input:focus,
.live-contact-form textarea:focus { outline: 3px solid rgba(95,49,112,.22); border-color: var(--purple-700); }
.form-note { margin: 0; color: var(--muted); font-size: .86rem; }
.contact-ranch-photo { margin: 0; padding: .65rem .65rem 1rem; background: #fff; border: 1px solid rgba(88,61,45,.18); box-shadow: var(--shadow-sm); transform: rotate(.7deg); }
.contact-ranch-photo img { display: block; width: 100%; height: auto; }
.contact-ranch-photo figcaption { padding: .75rem .3rem 0; color: var(--purple-800); font-family: var(--script); font-size: 1.2rem; font-weight: 700; text-align: center; }

.faq-grid { display: grid; gap: .7rem; }
.faq-grid details {
  padding: .95rem 1rem;
  background: rgba(255,253,248,.76);
  border: 1px solid rgba(85,53,35,.18);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(52,32,22,.08);
}
.faq-grid summary { color: var(--purple-800); font-family: var(--display); font-size: 1.08rem; font-weight: 800; cursor: pointer; }
.faq-grid details:nth-child(odd) summary { color: var(--olive-800); }
.faq-grid details p { margin: .7rem 0 0; }

.support-intro-layout { display: grid; gap: 1rem; align-items: center; }
.support-intro-layout img { width: 100%; max-width: 520px; margin: 0 auto; border: 8px solid #fff; box-shadow: var(--shadow-sm); transform: rotate(1.3deg); }
.support-way-grid { display: grid; gap: 1rem; }
.support-way-grid article {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  background: rgba(255,253,248,.82);
  border: 1px solid rgba(91,59,38,.19);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.support-way-grid h3 { color: var(--purple-800); font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; }
.support-way-grid article:nth-child(odd) h3 { color: var(--olive-800); }
.support-way-grid .button { margin-top: auto; }
.support-icon {
  width: 54px; height: 54px; margin-bottom: .7rem; display: grid; place-items: center;
  color: #fff; background: var(--purple-800); border-radius: 50%; font: 800 1.35rem/1 Arial, sans-serif;
}
.support-way-grid article:nth-child(odd) .support-icon { background: var(--olive-800); }
.together-support .notice { max-width: 850px; margin: 0 auto; text-align: center; }

@media (min-width: 600px) and (max-width: 899px) {
  .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-message-layout { grid-template-columns: 1.1fr .9fr; }
  .live-contact-form .form-row { grid-template-columns: 1fr 1fr; }
  .faq-grid { grid-template-columns: repeat(2, 1fr); }
  .support-intro-layout { grid-template-columns: 1.2fr .8fr; }
  .support-way-grid { grid-template-columns: repeat(2, 1fr); }
  .support-way-grid article:last-child { grid-column: 1 / -1; }
}

/* Support and Contact now have supplied desktop artwork, matching all other
   final art pages. Keep live HTML for phones/tablets, artwork for desktop. */
@media (min-width: 900px) {
  .page--support .site-header,
  .page--contact .site-header,
  .page--support .site-footer,
  .page--contact .site-footer { display: none; }
  .page--support .responsive-content,
  .page--contact .responsive-content { display: none; }
  .page--support .desktop-art,
  .page--contact .desktop-art { display: block; }
}
@media (min-width: 900px) {
  .page--contact .desktop-art { width: min(864px, 100%); }
}

/* --------------------------------------------------------------------------
   2026-08 navigation polish: desktop nav is now part of the supplied artwork.
   The older page art was updated to include the full 9-item menu; this layer is
   intentionally invisible and supplies only interaction/accessibility.
   -------------------------------------------------------------------------- */
.desktop-nav-hitbar {
  position: absolute;
  z-index: 30;
  top: 0;
  left: var(--desktop-nav-left, 20%);
  right: 0;
  height: var(--desktop-nav-height, 4.5%);
  min-height: 48px;
  display: flex;
  line-height: 1;
}
.desktop-nav-hitlinks {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--desktop-nav-columns, .66fr .79fr 1.22fr 1.25fr 1.20fr 1.12fr .60fr .64fr .68fr);
}
.desktop-nav-hitlinks > a,
.desktop-nav-social-hit > a {
  display: block;
  border-radius: 2px;
  text-decoration: none;
  outline: none;
  background: transparent;
  transition: background-color .14s ease, box-shadow .14s ease;
}
.desktop-nav-hitlinks > a:hover,
.desktop-nav-social-hit > a:hover { background: rgba(255,255,255,.055); }
.desktop-nav-hitlinks > a:focus-visible,
.desktop-nav-social-hit > a:focus-visible {
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.82);
}
.desktop-nav-social-hit {
  flex: 0 0 7.4%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* The previous painted-over HTML bar is retained nowhere in the markup. */
.desktop-nav-overlay { display: none !important; }

/* --------------------------------------------------------------------------
   V6: one standardized desktop navigation across every artwork page.
   This visible HTML bar completely masks the navigation baked into each
   supplied composition, so labels, spacing, colors and active states no
   longer change from page to page. The ranch sign remains part of the art.
   -------------------------------------------------------------------------- */
.artwork-wrap { container-type: inline-size; }

.desktop-site-nav {
  position: absolute;
  z-index: 40;
  top: 0;
  left: 20.15%;
  right: 0;
  height: auto;
  aspect-ratio: 10.2 / 1;
  display: flex;
  align-items: stretch;
  color: #fffaf1;
  line-height: 1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(91deg, transparent 0 78px, rgba(0,0,0,.08) 79px 81px, transparent 82px 158px),
    linear-gradient(180deg, #37163f 0%, #2e1237 52%, #25102d 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 2px solid rgba(26,8,30,.72);
  box-shadow: inset 0 -7px 13px rgba(0,0,0,.13), inset 0 1px rgba(255,255,255,.05);
  overflow: hidden;
}
.desktop-site-nav__links {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: .62fr .77fr 1.22fr 1.19fr 1.15fr 1.10fr .58fr 1.35fr .67fr .62fr;
  align-items: stretch;
}
.desktop-site-nav__links > a {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .18rem;
  color: #fffaf1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(10.8px, 1.13vw, 13px);
  font-weight: 700;
  letter-spacing: -.015em;
  text-shadow: 0 2px 2px rgba(0,0,0,.64);
  border-left: 1px solid rgba(255,255,255,.035);
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.desktop-site-nav__links > a:first-child { border-left: 0; }
.desktop-site-nav__links > a:hover,
.desktop-site-nav__links > a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.07);
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.52);
}
.desktop-site-nav__links > a[aria-current="page"] {
  color: #fffdf5;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #7d844d 0%, #687041 52%, #565d36 100%);
  box-shadow: inset 1px 0 rgba(255,255,255,.12), inset -1px 0 rgba(0,0,0,.25), inset 0 -5px 10px rgba(0,0,0,.12);
}
.desktop-site-nav__social {
  flex: 0 0 7.6%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7%;
  align-items: center;
  justify-items: center;
  padding: 0 4%;
}
.desktop-site-nav__social a {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #35143e;
  background: #fffdf8;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  outline: none;
}
.desktop-site-nav__social a:hover,
.desktop-site-nav__social a:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(89,99,56,.9); }
.desktop-site-nav__social svg { width: 68%; height: 68%; fill: currentColor; stroke: none; }
.desktop-site-nav__social a:last-child svg { fill: none; stroke: currentColor; stroke-width: 2; }

/* Contact used to render narrower than every other composition, which made the
   header visibly jump. All desktop artwork now uses the same 1024px canvas. */
@media (min-width: 900px) {
  .page--contact .desktop-art { width: min(1024px, 100%); }
}

/* Perfectly Imperfect responsive content */
.wide-feature-image {
  display: block;
  width: 100%;
  height: auto;
  border: 7px solid #fffaf1;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.creation-tags {
  margin: 1rem 0 .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
}
.creation-tags span {
  padding: .45rem .65rem;
  color: #fff;
  background: var(--purple-800);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.15;
}
.center-copy { max-width: 820px; margin: 1rem auto 0; text-align: center; }
.perfectly-grid { display: grid; gap: 1rem; }
.perfectly-grid .notice { height: 100%; }
.perfectly-mobile-hero > img { object-position: 58% center; }

@media (min-width: 600px) and (max-width: 899px) {
  .perfectly-grid { grid-template-columns: 1fr 1fr; }
}
/* The Home composition predates the hanging-sign header used by the inner
   pages, so its original painted menu begins farther left. Extend only the
   wood mask (not the link positions) to cover those legacy labels. */
.page--home .desktop-site-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px;
  right: 100%;
  bottom: -2px;
  width: 19.1%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(91deg, transparent 0 78px, rgba(0,0,0,.08) 79px 81px, transparent 82px 158px),
    linear-gradient(180deg, #37163f 0%, #2e1237 52%, #25102d 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 2px solid rgba(26,8,30,.72);
}
.desktop-site-nav { overflow: visible; }
.page--home .desktop-site-nav::before { z-index: 0; }
.desktop-site-nav__links, .desktop-site-nav__social { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   V7 navigation refinement — match the original artwork treatment more closely.
   Natural-width buttons with breathing room replace the compressed grid.
   The header height is proportional to the 1024px artwork canvas so it remains
   visually identical from page to page. The Home mask now starts after the
   original sunflower so the flower is fully visible instead of clipped.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .desktop-site-nav {
    left: 20.15%;
    right: 0;
    height: 5.72cqw;
    aspect-ratio: auto;
    padding: 0 .52cqw 0 .38cqw;
    align-items: stretch;
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), transparent 22%, rgba(0,0,0,.08) 78%, rgba(0,0,0,.15)),
      repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 10px),
      repeating-linear-gradient(92deg, transparent 0 108px, rgba(0,0,0,.055) 109px 111px, transparent 112px 218px),
      linear-gradient(180deg, #35143f 0%, #301239 53%, #291031 100%);
    border-top: 0;
    border-bottom: 1px solid rgba(26,8,30,.72);
    box-shadow: inset 0 -4px 8px rgba(0,0,0,.13), 0 1px 2px rgba(0,0,0,.16);
  }

  .desktop-site-nav__links {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(2px, .30cqw, 4px);
    padding: 0 .12cqw;
  }

  .desktop-site-nav__links > a {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 clamp(2px, .33cqw, 4px);
    border-left: 0;
    overflow: visible;
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(10.7px, 1.26cqw, 13px);
    font-weight: 400;
    letter-spacing: -.012em;
    text-shadow: 0 1px 2px rgba(0,0,0,.72);
  }

  .desktop-site-nav__links > a:hover,
  .desktop-site-nav__links > a:focus-visible {
    color: #fffdf7;
    background: rgba(111,121,80,.50);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  }

  .desktop-site-nav__links > a[aria-current="page"] {
    color: #fffdf5;
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), transparent 18%, rgba(0,0,0,.08) 100%),
      linear-gradient(180deg, #7e8550 0%, #707846 53%, #626a3e 100%);
    box-shadow:
      inset 1px 0 rgba(255,255,255,.09),
      inset -1px 0 rgba(0,0,0,.20),
      inset 0 -4px 8px rgba(0,0,0,.10);
  }

  .desktop-site-nav__social {
    flex: 0 0 6.9cqw;
    gap: .42cqw;
    padding: 0 .50cqw 0 .42cqw;
  }

  .desktop-site-nav__social a {
    width: clamp(20px, 2.18cqw, 23px);
    height: clamp(20px, 2.18cqw, 23px);
  }

  /* The Home artwork's original navigation starts after the sunflower at
     roughly x=75px. Mask only the obsolete nav labels, not the flower itself. */
  .page--home .desktop-site-nav::before {
    width: 12.75cqw;
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), transparent 22%, rgba(0,0,0,.08) 78%, rgba(0,0,0,.15)),
      repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 10px),
      linear-gradient(180deg, #35143f 0%, #301239 53%, #291031 100%);
    border-top: 0;
    border-bottom: 1px solid rgba(26,8,30,.72);
  }
}


/* --------------------------------------------------------------------------
   V8 navigation: faithfully follows the original CK Ranch header language.
   Colors come directly from the original site palette: deep purple #34143e,
   olive active state #6f7950, warm white type. Long labels use two lines so
   each destination reads as a distinct button instead of a compressed string.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .desktop-site-nav {
    left: 20.15%;
    right: 0;
    height: 6.45cqw;
    padding: .34cqw .48cqw .34cqw .42cqw;
    display: flex;
    align-items: stretch;
    color: #fffdf8;
    background:
      linear-gradient(180deg, rgba(255,255,255,.028), transparent 26%, rgba(0,0,0,.08) 79%, rgba(0,0,0,.14)),
      repeating-linear-gradient(0deg, rgba(255,255,255,.017) 0 1px, transparent 1px 11px),
      #34143e;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 2px 6px rgba(0,0,0,.24), inset 0 -3px 6px rgba(0,0,0,.12);
    overflow: visible;
  }

  .desktop-site-nav__links {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns:
      .69fr .80fr 1.08fr 1.08fr 1.08fr 1.00fr .68fr 1.12fr .78fr .76fr;
    gap: .38cqw;
    padding: 0 .08cqw;
    align-items: stretch;
  }

  .desktop-site-nav__links > a {
    min-width: 0;
    padding: .16cqw .18cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .03em;
    color: #fffdf8;
    background: rgba(255,255,255,.012);
    border: 1px solid transparent;
    border-radius: 2px;
    overflow: visible;
    white-space: normal;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(10.5px, 1.18cqw, 12.5px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.012em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.72);
    transition: background-color .14s ease, box-shadow .14s ease, color .14s ease;
  }

  .desktop-site-nav__links > a > span {
    display: block;
    width: 100%;
    white-space: nowrap;
  }

  .desktop-site-nav__links > a:hover,
  .desktop-site-nav__links > a:focus-visible {
    color: #fff;
    background: rgba(111,121,80,.52);
    border-color: rgba(255,255,255,.15);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    outline: none;
  }

  .desktop-site-nav__links > a[aria-current="page"] {
    color: #fffdf8;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), transparent 24%, rgba(0,0,0,.09)),
      #6f7950;
    border-color: rgba(255,255,255,.10);
    box-shadow:
      inset 1px 0 rgba(255,255,255,.10),
      inset -1px 0 rgba(0,0,0,.18),
      inset 0 -4px 8px rgba(0,0,0,.10),
      0 1px 2px rgba(0,0,0,.16);
  }

  .desktop-site-nav__social {
    flex: 0 0 6.7cqw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .42cqw;
    align-items: center;
    justify-items: center;
    padding: 0 .35cqw 0 .42cqw;
  }

  .desktop-site-nav__social a {
    width: clamp(20px, 2.12cqw, 22px);
    height: clamp(20px, 2.12cqw, 22px);
    color: #34143e;
    background: #fffdf8;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.42);
  }

  /* Home's original art had only a small sunflower before the nav. The old
     labels must be covered, but the hard purple rectangle looked artificial.
     Reuse and enlarge that original sunflower at the seam so the transition
     feels decorative instead of like a patch. */
  .page--home .desktop-site-nav::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 100%;
    bottom: 0;
    width: 12.8cqw;
    background:
      url('../images/home-nav-sunflower.webp') left center / auto 100% no-repeat,
      linear-gradient(180deg, rgba(255,255,255,.028), transparent 26%, rgba(0,0,0,.08) 79%, rgba(0,0,0,.14)),
      #34143e;
    border-bottom: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 2px 6px rgba(0,0,0,.14), inset 0 -3px 6px rgba(0,0,0,.10);
  }

  .page--home .desktop-site-nav::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: -13.1cqw;
    top: -.38cqw;
    width: 7.0cqw;
    height: 7.0cqw;
    background: url('../images/home-nav-sunflower.webp') left top / cover no-repeat;
    border-radius: 50%;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
    pointer-events: none;
  }

  .desktop-site-nav__links,
  .desktop-site-nav__social { position: relative; z-index: 3; }
}

/* --------------------------------------------------------------------------
   V9 desktop header refinements requested after V8 review.
   - Home: use one sunflower treatment and stretch it across the full legacy
     mask area; remove the duplicated flower overlay.
   - Funding: extend the nav 12px farther left and increase its height by 12px.
   - Schedule, Events, Perfectly Imperfect, Support and Contact: increase the
     desktop nav height by 12px so the original painted navigation is fully
     covered and the header proportions remain intentional.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* One continuous sunflower/wood transition on Home instead of two flowers. */
  .page--home .desktop-site-nav::before {
    width: 12.8cqw;
    background:
      url('../images/home-nav-sunflower.webp') left center / 100% 100% no-repeat,
      #34143e;
  }
  .page--home .desktop-site-nav::after {
    content: none;
    display: none;
  }

  /* Funding needs a little more coverage on the left as well as vertically. */
  .page--funding .desktop-site-nav {
    left: calc(20.15% - 12px);
    height: calc(6.45cqw + 12px);
  }

  /* These newer compositions have a taller painted header underneath. */
  .page--schedule .desktop-site-nav,
  .page--events .desktop-site-nav,
  .page--perfectly-imperfect .desktop-site-nav,
  .page--support .desktop-site-nav,
  .page--contact .desktop-site-nav {
    height: calc(6.45cqw + 12px);
  }
}

/* --------------------------------------------------------------------------
   V10 — original-site navigation master treatment.
   Use texture sampled directly from the original supplied navigation artwork
   rather than approximating the purple/olive surfaces with gradients.  The
   geometry from V9 is preserved, including the page-specific coverage fixes.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .desktop-site-nav {
    background:
      linear-gradient(180deg, rgba(255,255,255,.02), transparent 22%, rgba(0,0,0,.08) 82%, rgba(0,0,0,.12)),
      url('../images/nav-wood-original.webp') center / 100% 100% no-repeat,
      #34143e;
    border-bottom: 1px solid rgba(24,8,29,.82);
    box-shadow: 0 2px 5px rgba(0,0,0,.22), inset 0 -2px 4px rgba(0,0,0,.12);
  }

  .desktop-site-nav__links > a {
    color: #fffdf8;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(10.7px, 1.2cqw, 12.6px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.01em;
    text-shadow: 0 1px 2px rgba(0,0,0,.72);
  }

  .desktop-site-nav__links > a:hover,
  .desktop-site-nav__links > a:focus-visible {
    color: #fffdf8;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), transparent 24%, rgba(0,0,0,.08)),
      rgba(111,121,80,.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  }

  .desktop-site-nav__links > a[aria-current="page"] {
    color: #fffdf8;
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 25%, rgba(0,0,0,.08)),
      url('../images/nav-olive-original.webp') center / 100% 100% no-repeat,
      #6f7950;
    box-shadow:
      inset 1px 0 rgba(255,255,255,.10),
      inset -1px 0 rgba(0,0,0,.22),
      inset 0 -3px 7px rgba(0,0,0,.10);
  }

  /* Home already contains the original sunflower in the page artwork.
     Keep the navigation extension as wood only so a second flower is not
     introduced by the live navigation layer. */
  .page--home .desktop-site-nav::before {
    background:
      linear-gradient(180deg, rgba(255,255,255,.02), transparent 22%, rgba(0,0,0,.08) 82%, rgba(0,0,0,.12)),
      url('../images/nav-wood-original.webp') center / 100% 100% no-repeat,
      #34143e;
  }
}

/* --------------------------------------------------------------------------
   V12 Home header cleanup.
   Remove the home-only pseudo-element that extended a separate purple/wood
   rectangle to the left of the standardized navigation. The Home artwork's
   sunflower/header edge is now allowed to meet the navigation directly.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .page--home .desktop-site-nav::before {
    content: none !important;
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   V13 Home navigation alignment.
   Move the standardized Home navigation 18px farther left so it meets the
   enlarged sunflower/header treatment more naturally and removes excess gap.
   All other pages retain the standardized V12/V10 navigation position.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .page--home .desktop-site-nav {
    left: calc(20.15% - 18px);
  }
}

/* --------------------------------------------------------------------------
   V14 Home navigation alignment.
   Begin the live desktop navigation at the left edge of the purple header
   artwork, immediately after the sunflower, so no legacy nav strip is exposed.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .page--home .desktop-site-nav {
    left: 7.25%;
  }
}

/* --------------------------------------------------------------------------
   V15 Funding navigation alignment.
   Shift only the Funding & Pricing desktop navigation 20px to the right from
   its V14 position. All other page navigation geometry remains unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .page--funding .desktop-site-nav {
    left: calc(20.15% + 8px);
  }
}

/* --------------------------------------------------------------------------
   V16 Funding navigation alignment.
   Shift only the Funding & Pricing desktop navigation another 10px to the
   right from V15. All other page navigation geometry remains unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .page--funding .desktop-site-nav {
    left: calc(20.15% + 18px);
  }
}

/* --------------------------------------------------------------------------
   V18 — Contact desktop form alignment
   Match the live form controls to the exact field geometry painted into the
   864 × 1821 supplied Contact artwork.  Absolute child placement avoids the
   cumulative row-gap drift from the earlier percentage grid.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .page--contact .desktop-contact-form {
    left: 4.74537%;      /* 41 / 864 */
    top: 40.58210%;      /* 739 / 1821 */
    width: 39.35185%;    /* 340 / 864 */
    height: 11.69687%;   /* 213 / 1821 */
    display: block;
  }

  .page--contact .desktop-contact-form input,
  .page--contact .desktop-contact-form textarea,
  .page--contact .desktop-contact-form button {
    position: absolute;
    margin: 0;
    box-sizing: border-box;
    background-clip: padding-box;
  }

  .page--contact .desktop-contact-form input[name="name"] {
    left: .58824%;
    top: .46948%;
    width: 49.41176%;
    height: 15.49296%;
  }

  .page--contact .desktop-contact-form input[name="phone"] {
    left: 51.47059%;
    top: 0;
    width: 48.23529%;
    height: 15.96244%;
  }

  .page--contact .desktop-contact-form input[name="email"] {
    left: .58824%;
    top: 19.24883%;
    width: 99.11765%;
    height: 15.49296%;
  }

  .page--contact .desktop-contact-form textarea {
    left: 0;
    top: 38.96714%;
    width: 100%;
    height: 39.43662%;
  }

  .page--contact .desktop-contact-form button {
    left: 0;
    top: 83.09859%;
    width: 100%;
    height: 16.90141%;
  }

  /* Opaque enough to hide the flattened placeholder text beneath the live
     controls, while retaining the warm paper appearance from the design. */
  .page--contact .desktop-contact-form input,
  .page--contact .desktop-contact-form textarea {
    background: rgba(255,253,248,.96);
  }
}