/* =============================================================
   Tarry There Farm — design styles
   Editorial transitional serif on warm-cream paper, dark warm ink,
   sage accent. Slow scroll-reveal animations.
   ============================================================= */

:root {
  --paper:       #efe9dd;
  --paper-warm:  #e8e0d0;
  --paper-deep:  #ddd2bc;
  --ink:         #1d1a14;
  --ink-soft:    #2a261d;
  --mid:         #685b46;
  --mid-soft:    #968874;
  --sage:        #6e7d56;
  --sage-deep:   #525e3f;
  --rule:        rgba(29, 26, 20, 0.14);
  --rule-strong: rgba(29, 26, 20, 0.32);
  --serif: "Instrument Serif", "Cormorant Garamond", "EB Garamond", Garamond, serif;
  --sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:  "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Stop Chrome-on-Android from auto-inflating ("boosting") body text,
     which makes real phones diverge from the design / desktop preview. */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

/* ── peel-reveal footer ───────────────────────────────────────
   The page content sits above the footer with an opaque background;
   the footer is sticky to the viewport bottom. As you scroll past
   the page, the page lifts off and the footer is revealed underneath. */
.page {
  position: relative;
  z-index: 2;
  background: var(--paper);
}
.footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── reveal animation ──────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Never leave content hidden for reduced-motion users or in print/PDF —
   show the end state immediately and skip the entrance animation. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── typography primitives ─────────────────────────────────── */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}
.display.center { text-align: center; }

.tag {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 0 0 28px;
}
.tag.light { color: rgba(239, 233, 221, 0.7); }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(239, 233, 221, 0.85);
  margin: 0 0 28px;
}

.caption {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 14px 0 0;
}

.prose {
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 56ch;
}
.prose.center { margin-left: auto; margin-right: auto; text-align: center; }
.prose p + p { margin-top: 1em; }

/* ── button ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 14px 22px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn .arrow { transition: transform .35s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  color: var(--paper);
  background: radial-gradient(120% 80% at 50% 20%, #2c2820 0%, #15120c 60%, #0a0805 100%);
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(0,0,0,.55) 0%, transparent 60%),
    radial-gradient(80% 60% at 50% 0%, rgba(0,0,0,.45) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35) 50%, rgba(0,0,0,.6));
}

/* placeholder texture when no video is loaded — subtle, cinematic */
.hero-video:not([src]):not(:has(source)) ~ .hero-veil,
.hero-video[src=""]:not(:has(source)) ~ .hero-veil {
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(0,0,0,.55) 0%, transparent 60%),
    radial-gradient(80% 60% at 50% 0%, rgba(0,0,0,.4) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #2a2620, #14110a 60%);
}

/* top nav */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px clamp(20px, 4vw, 60px);
  gap: 16px;
  color: var(--paper);
  pointer-events: none;
  transition:
    max-width .45s var(--ease),
    margin-top .45s var(--ease),
    padding .45s var(--ease),
    background-color .35s var(--ease),
    border-color .35s var(--ease),
    box-shadow .45s var(--ease),
    color .35s var(--ease),
    border-radius .45s var(--ease),
    backdrop-filter .35s var(--ease),
    transform .45s var(--ease);
  max-width: 100%;
  margin-inline: auto;
  border: 1px solid transparent;
  border-radius: 0;
}
.topnav > * { pointer-events: auto; }

/* scrolled state — detached, floating pill */
.topnav.is-scrolled {
  max-width: 900px;
  margin-top: 14px;
  padding: 10px clamp(16px, 2.4vw, 28px);
  background-color: rgba(239, 233, 221, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
          backdrop-filter: blur(14px) saturate(1.05);
  border-color: var(--rule);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(29, 26, 20, 0.10), 0 1px 0 rgba(29, 26, 20, 0.04);
  color: var(--ink);
}
.topnav.is-scrolled .wordmark-default { opacity: 0; }
.topnav.is-scrolled .wordmark-emblem { opacity: 1; }
.topnav.is-scrolled .wordmark img { height: 38px; }
.wordmark img { transition: height .35s var(--ease), opacity .25s var(--ease); }
.wordmark { position: relative; }
.wordmark-default { display: block; filter: brightness(0) invert(1); }
.wordmark-emblem {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 38px;
  aspect-ratio: 116.37 / 72.32;
  background-color: #17140E;
  -webkit-mask: url("tarry-there-farm-emblem.svg") center / contain no-repeat;
          mask: url("tarry-there-farm-emblem.svg") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}

/* hidden — slides up out of view once you scroll past the intro eyebrow */
.topnav.is-hidden {
  transform: translateY(calc(-100% - 24px));
}
.topnav-link {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  position: relative;
}
.topnav-link .arrow { transition: transform .25s var(--ease); display: inline-block; }
.topnav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 28px; bottom: -6px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform: scaleX(0.6);
  transform-origin: left;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.topnav-link:hover { opacity: 1; }
.topnav-link:hover::after { transform: scaleX(1); opacity: 0.9; }
.topnav-link:hover .arrow { transform: translate(2px, -2px); }
.topnav-link.right { justify-self: end; }
.topnav-link.right::after { left: 28px; right: 0; transform-origin: right; }

/* Instagram link in the top nav — uppercase wordmark matching the
   "Get Directions" treatment, with the IG glyph in front. */
.topnav-link--ig { gap: 9px; }
.topnav-link--ig::after { display: none; }
.topnav-link--ig svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

/* Map link in the top nav — small pin icon replaces the corner arrow,
   underline removed to match the IG treatment on the other side. */
.topnav-link--map { gap: 9px; }
.topnav-link--map::after { display: none; }
.topnav-link--map svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  justify-self: center;
}
.wordmark img {
  height: 36px;
  width: auto;
  display: block;
}

/* hero copy */
.hero-copy {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  width: min(1080px, 92%);
}
.intro-emblem {
  display: block;
  width: 75px;
  aspect-ratio: 140.41 / 191.49;
  margin: 0 auto 12px;
  background-color: #1D1A15;
  -webkit-mask: url("tarry-there-farm-oval-dark.svg") center / contain no-repeat;
          mask: url("tarry-there-farm-oval-dark.svg") center / contain no-repeat;
}
.hero-copy .display { color: var(--paper); }
.hero-copy .display em { color: rgba(239, 233, 221, 0.92); }

.hero-foot {
  position: absolute;
  left: 0; right: 0;
  bottom: 32px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(239, 233, 221, 0.7);
}
.hero-foot .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: blink 2.6s var(--ease) infinite;
}
@keyframes blink {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* ============================================================
   SECTIONS — common
   ============================================================ */
.section {
  padding: clamp(80px, 11vw, 160px) clamp(28px, 6vw, 96px);
  position: relative;
}
.section--intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  padding-bottom: clamp(60px, 8.25vw, 120px);
}
.section--animals {
  padding-top: clamp(60px, 8.25vw, 120px);
}

.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 980px; }
.section-head .display { margin-bottom: 22px; }

/* The Animals — eyebrow + title full-width, then prose + CTA share a row */
.animals-head { max-width: 1200px; margin-inline: auto; }
.animals-head-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.animals-head-row .prose { max-width: 56ch; margin: 0; }
.animals-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 16px;
}
.animals-cta-prompt {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 0;
}
@media (max-width: 820px) {
  .animals-head-row { grid-template-columns: 1fr; align-items: start; }
  .animals-head-right { align-items: flex-start; text-align: left; }

  /* 8 · Animals — center eyebrow, heading, prose, and CTA on mobile */
  .animals-head { text-align: center; }
  .animals-head-row { justify-items: center; }
  .animals-head-row .prose { margin-left: auto; margin-right: auto; text-align: center; }
  .animals-head-right { align-items: center; text-align: center; }
}

/* photo fan — three "polaroids" that fan out when scrolled into view */
.photo-fan { position: relative; }

/* circular gallery (intro) — full-bleed across the viewport */
.circular-gallery-wrap {
  position: relative;
  width: 100vw;
  margin-inline: calc((100% - 100vw) / 2);
  margin-top: clamp(-68px, -6.8vw, 0px);
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.55) 86%,
    rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.55) 86%,
    rgba(0, 0, 0, 0) 100%);
}
.circular-gallery {
  position: relative;
  width: 100%;
  height: clamp(380px, 50vw, 560px);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.circular-gallery:active { cursor: grabbing; }
.circular-gallery canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(29, 26, 20, 0.18)); }
.photo-fan-card {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(225px, 27.5vw, 300px);
  height: clamp(275px, 35vw, 375px);
  background: #efe9dd;
  padding: 14px 14px 38px;
  border-radius: 6px;
  box-shadow:
    0 24px 50px rgba(29, 26, 20, 0.28),
    0 2px 10px rgba(29, 26, 20, 0.18);
  transform: translate(-50%, -50%) rotate(0);
  transition: transform 0.95s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.photo-fan-card image-slot,
.photo-fan-card > img {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--paper-deep);
  border-radius: 4px;
  object-fit: cover;
}

.photo-fan-card--left   { z-index: 3; }
.photo-fan-card--middle { z-index: 2; }
.photo-fan-card--right  { z-index: 1; }

.photo-fan.is-in .photo-fan-card--left {
  transform: translate(calc(-50% - 188px), calc(-50% + 12px)) rotate(-8deg);
}
.photo-fan.is-in .photo-fan-card--middle {
  transform: translate(-50%, -50%) rotate(6deg);
}
.photo-fan.is-in .photo-fan-card--right {
  transform: translate(calc(-50% + 250px), calc(-50% + 25px)) rotate(-6deg);
}

/* lift slightly on hover */
.photo-fan.is-in .photo-fan-card--left:hover {
  transform: translate(calc(-50% - 200px), calc(-50% - 5px)) rotate(1deg);
}
.photo-fan.is-in .photo-fan-card--middle:hover {
  transform: translate(-50%, calc(-50% - 18px)) rotate(0deg);
}
.photo-fan.is-in .photo-fan-card--right:hover {
  transform: translate(calc(-50% + 250px), calc(-50% + 12px)) rotate(3deg);
}

@media (max-width: 720px) {
  .photo-fan { height: clamp(260px, 64vw, 380px); }
  .photo-fan-card { width: clamp(170px, 44vw, 230px); height: clamp(210px, 56vw, 290px); }
  .photo-fan.is-in .photo-fan-card--left {
    transform: translate(calc(-50% - 110px), calc(-50% + 8px)) rotate(-8deg);
  }
  .photo-fan.is-in .photo-fan-card--right {
    transform: translate(calc(-50% + 135px), calc(-50% + 14px)) rotate(-6deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .photo-fan-card { transition: none; }
}

.legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 0;
}
.legend-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.legend-sep { opacity: 0.5; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); display: inline-block; }
.dot--sage { background: var(--sage); }

/* ============================================================
   BENTO
   ============================================================ */
.bento-wrap { container-type: inline-size; max-width: 1200px; margin-inline: auto; }
.bento {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 14px;
}
.bento > .bento-cell {
  grid-column: span var(--cs, 1);
  grid-row: span var(--rs, 1);
  min-width: 0; min-height: 0;
}
@container (max-width: 760px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    gap: 10px;
  }
  .bento > .bento-cell {
    grid-column: span var(--mcs, 1);
    grid-row: span var(--mrs, 1);
  }
  /* mobile-only: shift chicken photo right to reveal the face */
  .bcard[data-id="chickens"] .bcard-photo {
    background-position: 22% 45% !important;
  }
  /* mobile-only: swap Turkeys and Donkeys (keep them ahead of the Geese banner) */
  .bento > .bento-cell:has(.bcard[data-id="donkeys"]) { order: 1; }
  .bento > .bento-cell:has(.bcard[data-id="turkeys"]) { order: 2; }
  .bento > .bento-cell:has(.bcard[data-id="geese"])   { order: 3; }
}

/* card */
.bcard {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-deep);
  cursor: pointer;
  isolation: isolate;
  transition: transform .5s var(--ease);
}
.bcard:hover { transform: translateY(-2px); }
a.bcard--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.bcard-photo, .bcard-video {
  position: absolute;
  inset: 0;
  transition: opacity .5s var(--ease), transform 1.2s var(--ease);
}
.bcard-photo {
  background-size: cover;
  background-position: center;
}
.has-video .bcard:hover .bcard-photo { opacity: 0; transform: scale(1.05); }

.bcard-video {
  opacity: 0;
  background: #0d0c08;
}
.bcard-video video {
  width: 100%; height: 100%; object-fit: cover;
}
.has-video .bcard:hover .bcard-video { opacity: 1; }

/* dark vignette + caption strip */
.bcard-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.65));
  pointer-events: none;
}

.bcard-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 20px;
  color: var(--paper);
  z-index: 2;
}
.bcard-name {
  font-family: var(--serif);
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.005em;
}
.bcard-name em { font-style: italic; }
.bcard-status {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239, 233, 221, 0.7);
  margin: 6px 0 0;
}

.bcard-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(239, 233, 221, 0.96);
  color: var(--ink);
  backdrop-filter: blur(4px);
  text-decoration: none;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
a.bcard-badge:hover { background: rgba(239, 233, 221, 1); transform: translateY(-1px); }
.bcard-badge .dot--sage {
  position: relative;
  background: var(--sage);
  box-shadow: 0 0 0 2px rgba(110,125,86,.2);
}
.bcard-badge .dot--sage::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.55;
  animation: dot-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes dot-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.6); opacity: 0;    }
  100% { transform: scale(2.6); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .bcard-badge .dot--sage::before { animation: none; opacity: 0; }
}

/* the wireframe-y photo fallback used until users drop real imagery in
   — a warm noise/gradient that hints at landscape without inventing a
   fake illustration. */
.bcard-photo[data-placeholder] {
  background:
    radial-gradient(120% 80% at 30% 30%, rgba(255,255,255,.08), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 6px),
    var(--photo-tone, linear-gradient(160deg, #8a7c64 0%, #5a4f3d 100%));
}

/* ============================================================
   STORY
   ============================================================ */
.section--story {
  background: #EEE9DE;
  padding-inline: 0;
  padding-block: clamp(40px, 6vw, 96px) clamp(40px, 6vw, 96px);
  border: none;
  --expand: 0;
}
.story-panel {
  position: relative;
  background:
    linear-gradient(to bottom,
      var(--paper-warm) 0%,
      var(--paper-warm) 68%,
      #EEE9DE 100%);
  margin-inline: calc((1 - var(--expand)) * clamp(80px, 14vw, 220px));
  border-radius: calc(48px - var(--expand) * 36px);
  padding: clamp(80px, 11vw, 160px) clamp(28px, 6vw, 96px) clamp(60px, 8vw, 120px);
  transition: margin-inline 0.05s linear, border-radius 0.05s linear;
}

.story-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.story-content .tag { margin: 0 0 24px; }
.story-content .display {
  margin: 0;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.02;
}
.story-content .display em {
  font-style: italic;
}

.story-prose {
  margin: clamp(32px, 4vw, 56px) auto 0;
  max-width: 680px;
}
.story-prose p + p { margin-top: 18px; }

/* Story section: 3-photo polaroid fan scaled to the original farmhouse-photo size */
.story-fan {
  max-width: none;
  width: 100%;
  height: clamp(400px, 42vw, 560px);
  margin: clamp(40px, 6vw, 88px) auto 0;
}
.story-fan .photo-fan-card {
  width: clamp(308px, 42vw, 550px);
  aspect-ratio: 4 / 3;  height: auto;
  background: #efe9dd;
  padding: 16px;
  border-radius: 6px;
  box-shadow:
    0 26px 56px rgba(29, 26, 20, 0.30),
    0 4px 12px rgba(29, 26, 20, 0.20);
}
.story-fan .photo-fan-card image-slot {
  background: var(--paper-deep);
}

.story-fan.is-in .photo-fan-card--left {
  transform: translate(calc(-50% - clamp(180px, 23vw, 360px)), calc(-50% + 14px)) rotate(-8deg);
}
.story-fan .photo-fan-card--left   { z-index: 2; }
.story-fan .photo-fan-card--middle { z-index: 3; }
.story-fan .photo-fan-card--right  { z-index: 1; }
.story-fan.is-in .photo-fan-card--middle {
  transform: translate(-50%, calc(-50% - 6px)) rotate(5deg);
}
.story-fan.is-in .photo-fan-card--right {
  transform: translate(calc(-50% + clamp(200px, 25vw, 390px)), calc(-50% + 22px)) rotate(-6deg);
}
.story-fan .photo-fan-card {
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease;
}
.story-fan .photo-fan-card:hover {
  z-index: 10;
  box-shadow:
    0 40px 80px rgba(29, 26, 20, 0.38),
    0 8px 24px rgba(29, 26, 20, 0.28);
}
.story-fan.is-in .photo-fan-card--left:hover {
  transform: translate(calc(-50% - clamp(200px, 24vw, 380px)), calc(-50% - 4px)) rotate(1deg) scale(1.04);
}
.story-fan.is-in .photo-fan-card--middle:hover {
  transform: translate(-50%, calc(-50% - 22px)) rotate(0deg) scale(1.04);
}
.story-fan.is-in .photo-fan-card--right:hover {
  transform: translate(calc(-50% + clamp(200px, 25vw, 390px)), calc(-50% + 6px)) rotate(3deg) scale(1.04);
}

@media (max-width: 820px) {
  .story-content .display { font-size: clamp(36px, 9vw, 56px); }
  .story-fan { height: clamp(280px, 56vw, 380px); }
  .story-fan .photo-fan-card { width: clamp(200px, 44vw, 280px); }
  .story-fan.is-in .photo-fan-card--left {
    transform: translate(calc(-50% - 110px), calc(-50% + 8px)) rotate(-8deg);
  }
  .story-fan.is-in .photo-fan-card--right {
    transform: translate(calc(-50% + 130px), calc(-50% + 14px)) rotate(-6deg);
  }
}

/* ─── Mobile: stretch story panel edge-to-edge & stack story photos ─── */
@media (max-width: 720px) {
  /* Let the scroll-tied expand animation run; just remove section gutter so
     the panel can actually reach the viewport edges when fully expanded.
     DO NOT override .story-panel margin-inline / border-radius — those carry
     the --expand animation. */
  .section--story { padding-left: 0; padding-right: 0; }
  .story-panel {
    /* Keep interior padding modest on narrow screens */
    padding-left: clamp(20px, 5vw, 32px);
    padding-right: clamp(20px, 5vw, 32px);
    /* Start at 90% browser width so text doesn't need to reflow much as the
       panel expands to 100%. Overrides the default desktop margin-inline. */
    margin-inline: calc((1 - var(--expand)) * 5vw);
  }
  /* Stack the three story photos vertically with a slight overlap & rotations */
  .story-fan {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: clamp(36px, 6vw, 60px);
  }
  .story-fan .photo-fan-card,
  .story-fan.is-in .photo-fan-card--left,
  .story-fan.is-in .photo-fan-card--middle,
  .story-fan.is-in .photo-fan-card--right,
  .story-fan.is-in .photo-fan-card--left:hover,
  .story-fan.is-in .photo-fan-card--middle:hover,
  .story-fan.is-in .photo-fan-card--right:hover {
    position: relative;
    top: auto;
    left: auto;
    width: min(86vw, 460px);
    padding: 8px; /* halve the polaroid border */
    box-shadow:
      0 14px 30px rgba(29, 26, 20, 0.22),
      0 2px 6px rgba(29, 26, 20, 0.16);
  }
  /* Stagger with overlap & subtle rotations so they read as overlapping polaroids.
     Mobile order (top→bottom): Middle, Bottom(right), Top(left). */
  .story-fan.is-in .photo-fan-card--middle { transform: rotate(3deg); }
  .story-fan.is-in .photo-fan-card--right  { transform: rotate(-2deg); margin-top: -28px; }
  .story-fan.is-in .photo-fan-card--left   { transform: rotate(-4deg); margin-top: -28px; }
  /* Mobile hover — just a tiny nudge up. Override the aggressive desktop
     translate(...) hover transforms that would otherwise still apply. */
  .story-fan.is-in .photo-fan-card--left:hover   { transform: rotate(-4deg) translateY(-4px); }
  .story-fan.is-in .photo-fan-card--middle:hover { transform: rotate(3deg)  translateY(-4px); }
  .story-fan.is-in .photo-fan-card--right:hover  { transform: rotate(-2deg) translateY(-4px); }
  /* Flex order + stacking so each card overlaps the one above */
  .story-fan .photo-fan-card--middle { order: 1; z-index: 1; }
  .story-fan .photo-fan-card--right  { order: 2; z-index: 2; }
  .story-fan .photo-fan-card--left   { order: 3; z-index: 3; }
}

/* ============================================================
   STATS — dark section
   ============================================================ */
.section--stats {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
.section--stats .tag.light { margin-bottom: 64px; }
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(239, 233, 221, .12);
}
.stat {
  position: relative;
  padding: clamp(40px, 5vw, 72px) 16px;
  border-right: 1px solid rgba(239, 233, 221, .12);
  border-bottom: 1px solid rgba(239, 233, 221, .12);
  cursor: default;
  overflow: hidden;
}
.stat:last-child { border-right: none; }

.stat-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.stat-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(72px, 9vw, 144px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-infinity {
  width: clamp(120px, 14vw, 200px);
  height: auto;
  display: block;
  color: var(--paper);
}
.stat-infinity-track {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.18;
}
.stat-infinity-draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* one dash + one gap = pathLength (100) → continuous, seamless loop */
  stroke-dasharray: 18 82;
  stroke-dashoffset: 0;
  animation: stat-infinity-loop 3.2s linear infinite;
}
@keyframes stat-infinity-loop {
  to { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-infinity-draw { animation: none; opacity: 0.9; stroke-dasharray: none; }
}

.stat-art {
  /* Legacy class — no longer rendered. Kept here as a no-op to avoid breaking
     any in-flight references. */
}

/* Full-panel background image swap on stat hover */
.section--stats { position: relative; overflow: hidden; isolation: isolate; }
.section--stats > .tag.light,
.section--stats > .stats { position: relative; z-index: 2; }

.stats-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.stats-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .55s var(--ease), transform 1.2s var(--ease);
}
.stats-bg-video { object-fit: cover; }
.stats-bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20,17,12,0.45), rgba(20,17,12,0.65));
  opacity: 0;
  transition: opacity .55s var(--ease);
  z-index: 2;
}

/* When any stat is hovered, show its matching bg image + the veil */
.section--stats:has(.stat[data-stat="acres"]:hover)  #stat-art-acres,
.section--stats:has(.stat[data-stat="barns"]:hover)  #stat-art-barns,
.section--stats:has(.stat[data-stat="coops"]:hover)  #stat-art-coops,
.section--stats:has(.stat[data-stat="pond"]:hover)   #stat-art-pond,
.section--stats:has(.stat[data-stat="chores"]:hover) #stat-art-chores {
  opacity: 1;
  transform: scale(1);
}
.section--stats:has(.stat:hover) .stats-bg-veil { opacity: 1; }

/* Highlight the active stat label slightly */
.stat[data-stat] { transition: background-color .35s var(--ease); }
.section--stats:has(.stat:hover) .stat:not(:hover) .stat-inner { opacity: 0.45; }
.stat .stat-inner { transition: opacity .35s var(--ease); }
.stat-lbl {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(239, 233, 221, 0.6);
  margin-top: 14px;
}
@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:last-child { grid-column: 1 / -1; }
}

/* ============================================================
   THE PROOF IS IN THE PRICING
   ============================================================ */
.section--pricing { background: var(--paper); }

.pricing-head {
  max-width: 1200px;
  margin: 0 auto clamp(36px, 4.5vw, 64px);
}
.pricing-head .tag { margin-bottom: clamp(28px, 3.4vw, 44px); }
.pricing-head-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.pricing-head .display { margin: 0; }
.pricing-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-bottom: 6px;
}
.pricing-head-aside .prose { margin: 0; max-width: 42ch; }

/* single editorial text-link CTA */
.text-link {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-strong);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.text-link .arrow { display: inline-block; transition: transform .3s var(--ease); }
.text-link:hover { color: var(--sage-deep); border-color: var(--sage); }
.text-link:hover .arrow { transform: translateX(5px); }

/* the table-like list */
.price-table {
  max-width: 1200px;
  margin: 0 auto;
}

.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 48px;
  align-items: center;
  column-gap: clamp(16px, 2.5vw, 40px);
  padding: clamp(20px, 2.4vw, 30px) clamp(14px, 1.8vw, 26px);
  border-bottom: 1px solid var(--rule);
  position: relative;
  isolation: isolate;
  color: var(--ink);
}

/* hairline header row — column labels */
.price-row--head {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.price-row--head span {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}
.price-row--head .price-ours,
.price-row--head .price-compare { text-align: right; }
.price-row--head .price-compare { text-decoration: none; }

/* subtle full-row tint fade on hover — lights up as a single unit */
.price-row:not(.price-row--head)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(110, 125, 86, 0.13);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.price-row:not(.price-row--head):hover::before,
.price-row:not(.price-row--head):focus-visible::before,
.price-row:not(.price-row--head):active::before { opacity: 1; }
.price-row:focus-visible { outline: none; }

/* product cell: optional thumbnail + name */
.price-product {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  min-width: 0;
}
.price-thumb {
  display: block;
  flex: 0 0 auto;
  width: 160px;
  height: 160px;
  background: #EEE9DE;
  border-radius: 14px;
  overflow: hidden;
}
.price-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  transition: transform .45s var(--ease);
  will-change: transform;
}

/* grow the illustration inside the fixed box on row or image hover */
.price-row:not(.price-row--head):hover .price-thumb-img,
.price-row:not(.price-row--head):focus-visible .price-thumb-img,
.price-row:not(.price-row--head):active .price-thumb-img,
.price-thumb:hover .price-thumb-img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .price-row:not(.price-row--head):hover .price-thumb-img,
  .price-row:not(.price-row--head):focus-visible .price-thumb-img,
  .price-thumb:hover .price-thumb-img { transform: none; }
}
.price-name {
  font-family: var(--serif);
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color .35s var(--ease);
}
.price-unit {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
  transition: color .35s var(--ease);
}

/* hidden rows (temporarily off) */
.price-row--off { display: none; }

/* product name + small qualifier (e.g. "Registered") stacked */
.price-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.price-sub {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  transition: color .35s var(--ease);
}

/* price + reserve link stacked in the Our Price column */
.price-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}

/* prices */
.price-ours {
  text-align: right;
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: color .35s var(--ease);
}
.price-compare {
  text-align: right;
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--mid-soft);
  text-decoration: line-through;
  text-decoration-color: var(--rule-strong);
  transition: color .35s var(--ease);
}

/* prices wrapper — transparent on desktop so ours + compare stay as their
   own grid columns; becomes a flex row on mobile (see media query). */
.price-figures { display: contents; }

/* coming-soon variant — status replaces the price, reserve link replaces the compare */
.price-ours--soon {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.price-soon {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: right;
}
.price-compare--soon { text-decoration: none; }
.price-reserve-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-strong);
  text-decoration: none;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.price-row:hover .price-reserve-link,
.price-row:focus-visible .price-reserve-link,
.price-row:active .price-reserve-link {
  color: var(--sage-deep);
  border-color: var(--sage);
}

/* arrow affordance — slides in from the left on hover */
.price-arrow {
  justify-self: end;
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1;
  color: var(--sage-deep);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

/* arrow reveal on hover */
.price-row:not(.price-row--head):hover .price-arrow,
.price-row:not(.price-row--head):focus-visible .price-arrow,
.price-row:not(.price-row--head):active .price-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 720px) {
  .pricing-head-row { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .pricing-head-aside { gap: 18px; }

  .price-row--head { display: none; }

  /* Thumbnail spans the full row height on the left; to its right the name
     stacks above the price line (our price + struck compare, inline) —
     matching the mobile reference. */
  .price-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "thumb name"
      "thumb figures";
    align-items: center;
    column-gap: clamp(18px, 5vw, 28px);
    row-gap: 8px;
    padding: clamp(20px, 5vw, 26px) 14px;
  }
  .price-product { display: contents; }
  .price-thumb {
    grid-area: thumb;
    align-self: center;
    width: clamp(108px, 30vw, 150px);
    height: clamp(108px, 30vw, 150px);
  }
  .price-name-wrap {
    grid-area: name;
    align-self: end;
  }
  .price-name {
    font-size: clamp(24px, 6.5vw, 30px);
  }
  .price-figures {
    grid-area: figures;
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 4px;
  }
  .price-ours,
  .price-compare { text-align: left; }
  .price-arrow { display: none; }
  .price-stack { align-items: flex-start; }

  /* coming-soon row keeps the same wrap: status + reserve link inline */
  .price-ours--soon { align-items: flex-start; }
  .price-soon { text-align: left; }
}

/* ============================================================
   INSTAGRAM
   ============================================================ */
.ig-head { text-align: center; margin: 0 auto clamp(40px, 5vw, 56px); max-width: 880px; }
.ig-head .display { margin-bottom: 18px; }
.ig-handle {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
  margin: 0;
  transition: color .25s var(--ease);
}
.ig-handle:hover { color: var(--ink); }
.ig-grid-wrap {
  max-width: 980px;
  margin: 0 auto;
}
behold-widget {
  display: block;
  width: 100%;
}

.ig-foot { text-align: center; margin-top: 40px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(220px, 26vw, 360px) clamp(28px, 6vw, 96px) 30px;
  overflow: hidden;
  isolation: isolate;
}
.footer-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.65;
}
.footer-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 0%,
      rgba(29, 26, 20, 0.65) 0%,
      rgba(29, 26, 20, 0.80) 50%,
      rgba(29, 26, 20, 0.95) 100%);
}
/* placeholder shown until a real video source is dropped in */
.footer-video:not([src]):not(:has(source[src*="."])),
.footer-video source[src=""] { display: none; }
.footer:has(.footer-video:not([src]):not(:has(source[src*="."]))) .footer-veil,
.footer:has(.footer-video source[src=""]) .footer-veil {
  background:
    radial-gradient(120% 80% at 50% 0%, #2c2820 0%, #15120c 60%, #0a0805 100%);
}
.footer-inner { position: relative; z-index: 1; }
.footer-head {
  max-width: 980px;
  margin: 0 auto clamp(40px, 4.5vw, 64px);
  text-align: center;
}
/* Desktop: the footer fills the viewport and the intro chunk (logo +
   "Come share our joy." + "Got questions…") is vertically centered in the
   space between the top of the browser and the 3-column contact row, and it
   scales fluidly with the viewport. */
@media (min-width: 981px) {
  .footer {
    min-height: 100svh;
    padding-top: clamp(32px, 4vh, 72px);
    display: flex;
    flex-direction: column;
  }
  .footer-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .footer-head {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
  }
  .footer-logo {
    width: clamp(72px, 7.4vh, 132px);
    margin-bottom: clamp(16px, 2.2vh, 36px);
  }
  .footer-display {
    font-size: clamp(48px, 8vh, 112px);
    margin-bottom: clamp(20px, 2.8vh, 44px);
  }
  .footer-sub {
    font-size: clamp(16px, 1.9vh, 24px);
    max-width: 60ch;
  }
  /* As flex children of the now-flex .footer-inner these rows would shrink
     to content width (collapsing the bottom row's space-between); keep them
     stretched to their max-width so the layout matches before. */
  .footer-grid,
  .footer-rule,
  .footer-bottom { width: 100%; }
}
.footer-display {
  color: var(--paper);
  margin-bottom: 28px;
}
.footer-logo {
  display: block;
  width: 80px;
  aspect-ratio: 122.36 / 78.32;
  margin: 0 auto 20px;
  background-color: #EEE9DE;
  -webkit-mask: url("tarry-there-farm-mark.svg") center / contain no-repeat;
          mask: url("tarry-there-farm-mark.svg") center / contain no-repeat;
}
.footer-display em { color: rgba(239, 233, 221, 0.85); }
.footer-sub {
  font-family: var(--body);
  font-size: clamp(16px, 1.15vw, 20px);
  color: rgba(239, 233, 221, 0.8);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  max-width: 1200px;
  margin: 0 auto clamp(28px, 3.2vw, 44px);
}
.footer-col { text-align: center; }
.footer-col:first-child { text-align: left; }
.footer-col:last-child { text-align: right; }
.footer-col a { display: inline; }
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-col,
  .footer-col:first-child,
  .footer-col:last-child { text-align: center; }
}

.footer-col p { margin: 0 0 12px; line-height: 1.55; }
.footer-col p:last-child { margin-bottom: 0; }
.footer-col a {
  position: relative;
  border-bottom: 1px solid rgba(239, 233, 221, .25);
  padding-bottom: 1px;
  transition: border-color .25s var(--ease);
}
.footer-col a:hover { border-color: rgba(239, 233, 221, .9); }
.footer-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239, 233, 221, 0.5);
  margin-bottom: 18px !important;
}
.dim { color: rgba(239, 233, 221, 0.5); font-size: 15px; }

.footer-rule {
  height: 1px;
  background: rgba(239, 233, 221, .14);
  max-width: 1200px;
  margin: 0 auto 20px;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-bottom-text { display: flex; flex-direction: column; gap: 4px; }
.footer-bottom .quote {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 26px);
  color: rgba(239, 233, 221, 0.85);
  margin: 0;
  letter-spacing: -0.005em;
}
.footer-bottom .quote em { font-style: italic; color: var(--paper); }
.footer-bottom .copyright {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239, 233, 221, 0.45);
  margin: 0;
}

/* Affiliations row — lives under the IG section, paper background */
.affiliations {
  max-width: 980px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  text-align: center;
}
.affiliations-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 0 0 22px;
}
.affiliations-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  flex-wrap: wrap;
}
.affiliation {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: opacity .25s var(--ease);
  opacity: 0.85;
}
.affiliation:hover { opacity: 1; }
.affiliation image-slot {
  display: block;
  width: 56px;
  height: 56px;
  background: var(--paper-deep);
  border-radius: 50%;
}
.affiliation span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.45;
  text-align: left;
}
@media (max-width: 720px) {
  .affiliations-row { gap: 22px; }
  .affiliation { flex-direction: column; text-align: center; gap: 8px; }
  .affiliation span { text-align: center; }
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(239, 233, 221, 0.55);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.footer-credit:hover { color: var(--paper); }
.footer-credit-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer-credit-mark {
  display: block;
  /* Height matches quote line + 4px gap + copyright line combined, scaled down 20% */
  height: calc((clamp(18px, 2vw, 26px) * 1.55 + 4px + 10px * 1.55) * 0.8);
  width: auto;
  opacity: 0.85;
  transition: opacity .25s var(--ease);
}
.footer-credit:hover .footer-credit-mark { opacity: 1; }
.footer-bottom { align-items: center; }

/* ── background-motion pause control ─────────────────────────── */
.motion-toggle {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 60;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(239, 233, 221, 0.45);
  background: rgba(29, 26, 20, 0.5);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--paper);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.motion-toggle:hover,
.motion-toggle:focus-visible { opacity: 1; }
.motion-toggle:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.motion-toggle svg { width: 16px; height: 16px; display: block; }
.motion-toggle .icon-play { display: none; }
.motion-toggle[data-paused="true"] .icon-pause { display: none; }
.motion-toggle[data-paused="true"] .icon-play { display: block; }
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { transition: none; }
}

/* ============================================================
   RESPONSIVE TIGHTENING
   ============================================================ */
@media (max-width: 720px) {
  .topnav { padding: 28px 18px 18px; gap: 8px; left: 20px; right: 20px; }
  .topnav.is-scrolled { left: 20px; right: 20px; }
  .topnav-link span:not(.arrow) { display: none; }
  .wordmark img { height: 32px; }

  /* ── mobile-only adjustments ──────────────────────────────── */
  /* 1 · header logo 2× */
  /* (handled on .wordmark img above) */

  /* 2 · header icons 32×32 */
  .topnav-link--ig svg,
  .topnav-link--map svg { width: 32px; height: 32px; }

  /* 3 · tighten gap between carousel and Animals section by 33%
     (compound selector so it beats the later `.section` shorthand) */
  .section.section--intro { padding-bottom: calc(80px * 0.67); }
  .section.section--animals { padding-top: calc(80px * 0.67); }

  /* 4 · all section headers +2pt */
  .display { font-size: calc(clamp(40px, 5.4vw, 88px) + 2.7px); }
  .story-content .display { font-size: calc(clamp(36px, 9vw, 56px) + 2.7px); }

  /* 6 · drop the forced line break in the footer intro */
  .footer-sub br { display: none; }

  /* footer quote "...and the joy we share…" — bumped +3pt over prior draft */
  .footer-bottom .quote { font-size: calc(clamp(18px, 2vw, 26px) + 6.7px); }

  /* 7 · more breathing room between Story text and the photo fan */
  .story-fan { margin-top: clamp(72px, 16vw, 120px); }

  /* Fit the banner to the *visible* viewport on mobile. 100dvh excludes the
     browser's address/tool bars (unlike 100vh), so the hero never hides its
     content or controls behind browser chrome. */
  .hero { height: 100dvh; min-height: 0; }
  .section { padding: 80px 28px; }
  /* Story must remain edge-to-edge so the --expand animation can reach the
     viewport sides on mobile. Re-assert AFTER .section's shorthand padding. */
  .section--story { padding-left: 0; padding-right: 0; }
  .section--intro { gap: 22px; }

  /* The desktop "page lifts off the sticky footer" reveal anchors the
     footer's bottom to the viewport. On mobile the footer is taller than
     the viewport, so that anchor hides the top (the "Come share our joy"
     headline) and you only see the bottom slice. Drop the sticky here so
     the footer scrolls in naturally — top of the footer first. */
  .footer { position: relative; bottom: auto; padding-top: calc(clamp(220px, 26vw, 360px) / 2); }

  /* Footer bottom: center everything, stack Created by above logo */
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: center;
  }
  .footer-bottom-text {
    align-items: center;
    text-align: center;
  }
  .footer-bottom .quote,
  .footer-bottom .copyright { text-align: center; }
  .footer-credit {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}

/* ============================================================
   MOBILE DRAFT — gentle type & icon scale-up (~10–20% on typical
   phones, eased back on small phones via clamp floors). Lives last
   so it overrides earlier mobile rules. Desktop (>720px) untouched.
   ============================================================ */
@media (max-width: 720px) {
  /* — universal eyebrow size: every eyebrow / small label matches "The Animals" — */
  .tag,
  .eyebrow,
  .btn,
  .animals-cta-prompt,
  .ig-handle,
  .stat-lbl,
  .footer-label,
  .footer-credit-label,
  .footer-bottom .copyright,
  .price-unit,
  .price-sub { font-size: clamp(11.5px, 3.1vw, 13.5px); }

  /* — fine print / secondary links (base 12px) — */
  .text-link,
  .price-reserve-link { font-size: clamp(12.5px, 3.4vw, 14.5px); }

  /* — body copy (base 16px) — */
  .prose { font-size: clamp(16.5px, 4.5vw, 19px); }
  .footer-sub { font-size: clamp(16.5px, 4.5vw, 20px); }
  .footer-col p,
  .footer-col a { font-size: clamp(16px, 4.3vw, 18.5px); }

  /* — animal grid: keep block sizes, enlarge the type inside — */
  .bcard-name { font-size: clamp(18.5px, 5.1vw, 22px); }
  .bcard-status { font-size: clamp(10.5px, 2.85vw, 12.5px); }

  /* — pricing rows — */
  .price-name { font-size: clamp(26px, 7.4vw, 33px); }
  .price-ours,
  .price-soon { font-size: clamp(23px, 6.3vw, 27px); }

  /* — hero scroll cue — */
  .hero-foot { font-size: clamp(11.5px, 3.1vw, 13.5px); }

  /* — header icons at 36px (visual). The desktop rule pins these with
     `flex: 0 0 15px`; for a flex item flex-basis governs the main-axis size,
     so setting `width` alone never widened them — THIS is why they looked
     unchanged in every version. We reset the flex-basis and scale to 36px via
     transform, so the icon's LAYOUT box stays 24px (≤ the 32px wordmark) and
     the header height does not change. — */
  .topnav-link--ig svg,
  .topnav-link--map svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    transform: scale(1.0833);
  }

  /* — logo +10% (mobile 32px → 35.2px) and sticky/scrolled emblem +10% (38px → 41.8px) — */
  .wordmark img { height: 35.2px; }
  .wordmark-emblem { height: 41.8px; }

  /* — slightly larger tap target on the pill buttons — */
  .btn { padding: 16px 26px; gap: 16px; }

  /* — emblem above the intro headline +20% (75px → 90px) — */
  .intro-emblem { width: 90px; }

  /* — +30% breathing room between the intro paragraph and the photo carousel — */
  .section--intro .circular-gallery-wrap { margin-top: clamp(7px, 2vw, 11px); }

  /* — larger carousel photos extend lower, so push the bottom fade down off the center image — */
  .circular-gallery-wrap {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 90%, rgba(0,0,0,0.45) 97%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 90%, rgba(0,0,0,0.45) 97%, rgba(0,0,0,0) 100%);
  }

  /* — scroll cue + pause control: original positions (no added margin) — */
  .hero-foot { bottom: 32px; }
  .motion-toggle { bottom: 18px; }

  /* — vertically center the hero headline in the band between the nav and the controls — */
  .hero-copy {
    top: 84px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    left: 0; right: 0;
    width: 100%;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-inline: clamp(20px, 6vw, 40px);
  }

  /* — footer eyebrows (Reach out / Visit / Proud member): beat `.footer-col p` so they match the universal eyebrow size — */
  .footer-col .footer-label { font-size: clamp(11.5px, 3.1vw, 13.5px); }

  /* — copyright + "Created by" eyebrows: 2pt smaller than the universal eyebrow size — */
  .footer-bottom .copyright { font-size: calc(clamp(11.5px, 3.1vw, 13.5px) - 2.7px); }
  .footer-credit-label { font-size: calc(clamp(11.5px, 3.1vw, 13.5px) - 2.7px); }

  /* — center the text above the pricing grid on mobile — */
  .pricing-head { text-align: center; }
  .pricing-head-aside { align-items: center; }
  .pricing-head-aside .prose { margin-inline: auto; }
}