/*
Theme Name: Vintage Lily Farms
Theme URI: https://vintagelilyfarms.com
Author: Vintage Lily Farms
Description: Boutique farmstead theme for Vintage Lily Farms. Editable hero, sections, farm menu, events and camp content from the WordPress admin.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: vintage-lily
*/

/* ------------------------------------------------------------------
   1. Design tokens
------------------------------------------------------------------ */
:root {
  --cream: oklch(0.988 0.005 85);
  --ink: oklch(0.22 0.006 145);
  --sage: oklch(0.49 0.031 145);
  --clay: oklch(0.615 0.09 45);

  /* Brand turquoise, straight off the logo (#2dcdd4). Bright enough to be a
     graphic colour and nothing else — it only carries 1.9:1 on cream, so any
     teal that has to be *read* uses --teal-deep instead. */
  --teal: oklch(0.774 0.124 199.5);
  --teal-deep: oklch(0.52 0.09 199.5);
  --teal-lit: oklch(0.83 0.11 199.5);
  --teal-30: oklch(0.774 0.124 199.5 / 30%);

  --ink-05: oklch(0.22 0.006 145 / 5%);
  --ink-08: oklch(0.22 0.006 145 / 8%);
  --ink-10: oklch(0.22 0.006 145 / 10%);
  --ink-30: oklch(0.22 0.006 145 / 30%);
  --ink-40: oklch(0.22 0.006 145 / 40%);
  --ink-60: oklch(0.22 0.006 145 / 60%);
  --cream-10: oklch(0.988 0.005 85 / 10%);
  --cream-40: oklch(0.988 0.005 85 / 40%);
  --cream-60: oklch(0.988 0.005 85 / 60%);
  --cream-90: oklch(0.988 0.005 85 / 90%);
  --clay-30: oklch(0.615 0.09 45 / 30%);
  --clay-40: oklch(0.615 0.09 45 / 40%);
  --clay-lit: oklch(0.735 0.085 52);
  --night: oklch(0.19 0.019 152);
  --night-deep: oklch(0.145 0.016 152);
  --linen: oklch(0.952 0.015 75);

  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --radius: 0.625rem;
  --wrap: 80rem;
}

/* ------------------------------------------------------------------
   2. Reset & base
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

::selection { background-color: color-mix(in oklab, var(--teal) 28%, transparent); }

:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 2px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: 0.75rem 1.25rem; font-size: 0.8125rem;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------
   3. Shared utilities
------------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.wrap--narrow { max-width: 42rem; }
.wrap--mid { max-width: 48rem; }
.wrap--wide { max-width: 72rem; }
.wrap--events { max-width: 56rem; }

.section { padding-block: 6rem; }

.rule { display: block; height: 1px; width: 3rem; background: var(--clay); }
.rule--center { margin-inline: auto; }

.eyebrow {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-60);
}

.serif { font-family: var(--font-serif); }
.italic { font-style: italic; }

.btn {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 1rem 2rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: background-color 0.3s, color 0.3s;
}
.btn--cream {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 20px 25px -5px oklch(0.22 0.006 145 / 30%), 0 8px 10px -6px oklch(0.22 0.006 145 / 30%);
}
.btn--cream:hover { background: var(--clay); color: var(--cream); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--clay); }
/* For a call to action that repeats down a page — five filled black
   pills read as five demands; five outlines read as a list. */
.btn--quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-30);
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.btn--quiet:hover {
  background: var(--ink);
  color: var(--cream);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.link-underline {
  display: inline-block;
  border-bottom: 1px solid var(--clay);
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: color 0.2s;
}
.link-underline:hover { color: var(--clay); }

/* ------------------------------------------------------------------
   4. Site navigation
------------------------------------------------------------------ */
.site-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--ink-05);
  padding: 1.5rem;
  position: relative;
  z-index: 40;
  background: var(--cream);
}

.site-nav__est {
  display: none;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sage);
}

.site-nav__brand {
  display: block;
  min-width: 0;
  justify-self: start;
}

.site-nav__logo {
  width: auto;
  height: 3rem;
}

.site-nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  justify-self: end;
  padding: 0.5rem;
}
.site-nav__toggle span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.2s;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.site-nav__menu {
  grid-column: 1 / -1;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 1.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.site-nav__menu.is-open { display: flex; }

.site-nav__menu li { position: relative; }
.site-nav__menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0;
  transition: color 0.2s;
}
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current-menu-ancestor > a { color: var(--teal-deep); }

.site-nav__menu .sub-menu {
  padding-left: 1rem;
  border-left: 1px solid var(--ink-08);
  margin-bottom: 0.5rem;
}
.site-nav__menu .sub-menu a { font-weight: 400; letter-spacing: 0.15em; }

@media (min-width: 768px) {
  .site-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 1rem 2rem;
  }
  .site-nav__est { display: block; }
  .site-nav__brand { justify-self: center; }
  .site-nav__logo { height: 4.25rem; }
  .site-nav__toggle { display: none; }

  .site-nav__menu {
    grid-column: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    padding-top: 0;
    letter-spacing: 0.08em;
  }
  .site-nav__menu a { display: block; min-height: 0; padding: 0; }

  .site-nav__menu .menu-item-has-children > a::after {
    content: "\25BC";
    font-size: 0.5rem;
    margin-left: 0.35rem;
    display: inline-block;
    vertical-align: middle;
  }

  .site-nav__menu .sub-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 30;
    min-width: 12rem;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--ink-05);
    border-left: 1px solid var(--ink-05);
    border-radius: 0.75rem;
    background: var(--cream);
    box-shadow: 0 20px 25px -5px oklch(0.22 0.006 145 / 10%);
    visibility: hidden;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  }
  .site-nav__menu li:hover > .sub-menu,
  .site-nav__menu li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0.75rem);
  }
  .site-nav__menu .sub-menu a {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: background-color 0.2s, color 0.2s;
  }
  .site-nav__menu .sub-menu a:hover { background: var(--ink-05); color: var(--teal-deep); }
}

/* ------------------------------------------------------------------
   5. Hero
------------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-inline: 1.5rem;
  min-height: 85vh;
}
.hero--short { min-height: 70vh; }

/* The home hero closes on a crisp edge under the welcome card. A dark wash
   under the headline grounds the type and gives the seam something to land
   on, without touching the top two thirds of the photograph. */
.hero--home { padding-block: 4rem 7rem; }
.hero--welcome { padding-bottom: 8.5rem; }
.hero--home::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    oklch(0.22 0.006 145 / 0%) 0%,
    oklch(0.22 0.006 145 / 18%) 45%,
    oklch(0.22 0.006 145 / 42%) 78%,
    oklch(0.22 0.006 145 / 62%) 100%);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { height: 100%; width: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%,
    rgba(34, 30, 28, 0.55) 0%,
    rgba(34, 30, 28, 0.22) 40%,
    rgba(255, 252, 245, 0.08) 100%);
}
.hero--short .hero__scrim {
  background: radial-gradient(circle at 50% 45%,
    rgba(34, 30, 28, 0.6) 0%,
    rgba(34, 30, 28, 0.28) 45%,
    rgba(255, 252, 245, 0.06) 100%);
}
/* Busy, bright photographs lose the centred title. A soft dark band through
   the middle of the hero sits behind the type and fades out toward the edges. */
.hero--fade .hero__scrim {
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%,
      rgba(34, 30, 28, 0.5) 0%,
      rgba(34, 30, 28, 0.2) 70%,
      rgba(34, 30, 28, 0) 100%),
    linear-gradient(to bottom,
      rgba(34, 30, 28, 0.2) 0%,
      rgba(34, 30, 28, 0.5) 50%,
      rgba(34, 30, 28, 0.2) 100%);
}

.hero__inner {
  position: relative;
  z-index: 10;
  max-width: 48rem;
  text-align: center;
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--cream-90);
  text-shadow: 0 4px 6px rgba(34, 30, 28, 0.35);
}

.hero__title {
  margin-bottom: 2rem;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--cream);
  text-shadow: 0 10px 15px rgba(34, 30, 28, 0.4);
}
.hero--short .hero__title { margin-bottom: 1.5rem; }

/* The plain opening sentence under a hero headline: what this is, in words a
   stranger (or a search engine) can lift without the rest of the page. */
.hero__lede {
  max-width: 54ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cream);
  /* Two shadows, not one: the tight dark halo keeps the text legible where the
     photo behind it goes bright, which a single soft drop shadow does not. */
  text-shadow: 0 1px 2px rgba(34, 30, 28, 0.85), 0 6px 16px rgba(34, 30, 28, 0.55);
}

@media (min-width: 640px) {
  .hero__eyebrow { font-size: 1.5rem; }
  .hero__title { font-size: 3rem; }
  .hero__lede { font-size: 1.1875rem; }
}
@media (min-width: 768px) {
  .hero__title { font-size: 4.5rem; }
  .hero--short .hero__title { font-size: 3.75rem; }
}

/* ------------------------------------------------------------------
   6. Page header (interior pages)
------------------------------------------------------------------ */
/* Interior pages open on a full-bleed band: the featured image behind the
   title when one is set, and a tinted wash when it is not, so the header
   always reads as a header rather than as the first paragraph. */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: 6rem;
  text-align: center;
  background:
    radial-gradient(50rem 22rem at 50% -10%, oklch(0.615 0.09 45 / 10%), transparent 70%),
    linear-gradient(to bottom, oklch(0.49 0.031 145 / 7%), transparent 60%);
  border-bottom: 1px solid var(--ink-05);
}

.page-head__media { position: absolute; inset: 0; z-index: 0; }
.page-head__media img { height: 100%; width: 100%; object-fit: cover; }
.page-head__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(34, 30, 28, 0.5) 0%,
    rgba(34, 30, 28, 0.32) 45%,
    rgba(34, 30, 28, 0.62) 100%);
}

.page-head__inner { position: relative; z-index: 10; }

.page-head__eyebrow {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--sage);
}
.page-head .rule { margin-bottom: 1.5rem; }
.page-head__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.25;
  text-wrap: balance;
}
.page-head__intro {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--sage);
}
.page-head--events .page-head__title { margin-bottom: 1.5rem; }
.page-head--events .page-head__intro { margin-inline: auto; max-width: 36rem; }

/* The Store banner is a berry close-up, bright red dead centre where the
   title sits. Same fix as .hero--fade: a soft dark band through the middle,
   behind the type, that lets the leaves at the edges keep their colour. And
   the Events scale, so the two section landings read as a pair. */
.page-head--store .page-head__scrim {
  background:
    radial-gradient(ellipse 55% 48% at 50% 52%,
      rgba(34, 30, 28, 0.66) 0%,
      rgba(34, 30, 28, 0.34) 65%,
      rgba(34, 30, 28, 0) 100%),
    linear-gradient(to bottom,
      rgba(34, 30, 28, 0.38) 0%,
      rgba(34, 30, 28, 0.5) 50%,
      rgba(34, 30, 28, 0.42) 100%);
}
.page-head--store .page-head__eyebrow { color: var(--cream); }
.page-head--store .page-head__title { line-height: 1.1; }
.page-head--store .page-head__intro {
  margin-inline: auto;
  max-width: 40rem;
  color: var(--cream);
  font-weight: 400;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(34, 30, 28, 0.5), 0 4px 14px rgba(34, 30, 28, 0.45);
}

/* Photographic variant. */
.page-head--banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22rem;
  padding-block: 5rem;
  background: var(--ink);
  border-bottom: 0;
}
.page-head--banner .rule { background: var(--cream-60); }
.page-head--banner .page-head__eyebrow {
  color: var(--cream-90);
  text-shadow: 0 4px 6px rgba(34, 30, 28, 0.35);
}
.page-head--banner .page-head__title {
  color: var(--cream);
  text-shadow: 0 10px 15px rgba(34, 30, 28, 0.4);
}
.page-head--banner .page-head__intro {
  color: var(--cream-90);
  text-shadow: 0 4px 10px rgba(34, 30, 28, 0.45);
}

@media (min-width: 768px) {
  .page-head__title { font-size: 3rem; }
  .page-head--events .page-head__title { font-size: 3.75rem; }
  .page-head--store .page-head__title { font-size: 3.75rem; }
  .page-head--banner { min-height: 26rem; }
}

/* ------------------------------------------------------------------
   7. Home page

   The front gate keeps its full-bleed photograph, then runs in the same
   hand as the interior pages: a welcome card over the seam (like the
   Events strip and the Contact card), the evening ahead as a tear-off
   ticket, the story, the store on the night band, and the calendar on
   ruled lines. Kickers are the shared .about-kicker.
------------------------------------------------------------------ */

/* --- Welcome card: the plain facts, straddling hero and event band -- */
/* No height of its own: the card hangs half over the photograph and half
   over the event band, whatever its height at this width. */
.home-welcome {
  position: relative;
  z-index: 20;
  height: 0;
}
.home-welcome__card {
  translate: 0 -50%;
  display: grid;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--cream);
  box-shadow:
    inset 0 0 0 1px var(--ink-08),
    0 30px 50px -28px oklch(0.22 0.006 145 / 35%);
}
.home-welcome__card::before {
  content: "";
  grid-column: 1 / -1;
  height: 3px;
  background: var(--teal);
}
/* Phones: one ruled line per fact, label left and value right. */
.home-welcome__card { grid-template-columns: minmax(0, 1fr); }
.home-welcome__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
}
.home-welcome__fact + .home-welcome__fact { border-top: 1px solid var(--ink-08); }
.home-welcome__fact dd { text-align: right; }
.home-welcome__fact dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-60);
}
.home-welcome__fact dd {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  font-variant-numeric: lining-nums;
}
.home-welcome__fact a {
  border-bottom: 1px solid var(--clay-40);
  transition: color 0.2s, border-color 0.2s;
}
.home-welcome__fact a:hover { color: var(--clay); border-color: var(--clay); }

/* --- Upcoming event: a cream ticket on the linen band ------------- */
.home-event {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 3.5rem 4.5rem;
  background: var(--linen);
}
.home-welcome + .home-event { padding-top: 8.5rem; }
.home-welcome + :not(.home-event) { margin-top: 5rem; }
.home-event::before,
.home-event::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.home-event::before {
  background:
    radial-gradient(70% 90% at 88% 0%, oklch(0.615 0.09 45 / 14%) 0%, transparent 70%),
    radial-gradient(60% 85% at 0% 100%, oklch(0.49 0.031 145 / 10%) 0%, transparent 70%);
}
.home-event::after {
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.home-event__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.home-ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 1rem;
  background: var(--cream);
  box-shadow:
    inset 0 0 0 1px var(--ink-08),
    0 30px 50px -30px oklch(0.22 0.006 145 / 30%);
}

.home-ticket__media { margin: 0; }
.home-ticket__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.home-ticket__stub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.875rem;
  padding: 1.5rem 1.5rem 1.375rem;
}
/* Punched notches either end of the perforation, cut to the linen. */
.home-ticket__stub::before,
.home-ticket__stub::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--linen);
  box-shadow: inset 0 0 0 1px var(--ink-08);
  bottom: -0.75rem;
}
.home-ticket__stub::before { left: -0.75rem; }
.home-ticket__stub::after { right: -0.75rem; }
.home-ticket__perf {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0;
  border-top: 1px dashed var(--ink-30);
}
.home-ticket__month {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--clay);
}
.home-ticket__day {
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 0.85;
  font-variant-numeric: lining-nums;
}
.home-ticket__time { font-size: 0.875rem; font-weight: 300; color: var(--ink-60); }

.home-ticket__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem 1.5rem 2.25rem;
}
.home-ticket__title {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 3vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.home-ticket__intro {
  max-width: 34rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sage);
  text-wrap: pretty;
}
.home-ticket__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  width: 100%;
  padding-block: 1.125rem;
  border-block: 1px solid var(--ink-10);
}
.home-ticket__label {
  margin-bottom: 0.375rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-60);
}
.home-ticket__value {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.15;
  font-variant-numeric: lining-nums;
}
.home-ticket__detail {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--ink-60);
}
.home-ticket__note {
  max-width: 34rem;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-60);
  text-wrap: pretty;
}
.home-ticket__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 0.25rem;
}
.home-ticket__actions .btn { transition: background-color 0.3s, color 0.3s, transform 0.3s; }
.home-ticket__actions .btn:hover { transform: translateY(-1px); }
.home-nowrap { white-space: nowrap; }

/* --- Our story --------------------------------------------------------- */
.home-story { padding-block: 5.5rem 6.5rem; overflow: clip; }
.home-story__grid { display: grid; gap: 4rem; align-items: center; }
.home-story__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 38rem;
}
.home-story__title {
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 4.4vw, 3.375rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.home-story__lead {
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--sage);
  text-wrap: pretty;
}
.home-story__body { line-height: 1.9; color: var(--ink-60); text-wrap: pretty; }

/* Label + ringed arrow, the same way out as the Our Story doors. */
.home-go {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.home-go__label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: color 0.25s;
}
.home-go__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ink-30);
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, translate 0.3s;
}
.home-go:hover .home-go__label { color: var(--clay); }
.home-go:hover .home-go__arrow {
  background: var(--ink);
  color: var(--cream);
  box-shadow: inset 0 0 0 1px var(--ink);
  translate: 0.25rem 0;
}

/* A print pinned slightly off its hairline frame. */
.home-story__media {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100% - 1.5rem, 30rem);
  margin: 0 1.5rem 1.5rem 0;
}
.home-story__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  translate: 1.25rem 1.25rem;
  border: 1px solid var(--clay-40);
  border-radius: 1rem;
}
.home-story__media img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 30px 50px -20px oklch(0.22 0.006 145 / 28%);
  outline: 1px solid var(--ink-10);
  outline-offset: -1px;
}
.home-story__badge {
  position: absolute;
  left: -1.25rem;
  bottom: -1.5rem;
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  padding: 1rem;
  border-radius: 50%;
  background: var(--clay);
  color: var(--cream);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.25;
  box-shadow: 0 16px 30px -12px oklch(0.615 0.09 45 / 60%);
}

/* --- The store, on the night band ---------------------------------- */
.home-shop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 5.5rem 6rem;
  color: var(--cream);
  background:
    radial-gradient(60rem 26rem at 88% -8%, oklch(0.615 0.09 45 / 18%), transparent 64%),
    radial-gradient(48rem 24rem at 0% 110%, oklch(0.49 0.031 145 / 30%), transparent 64%),
    linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
}
.home-shop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.home-shop__head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--cream-10);
}
.home-shop__title,
.home-days__title {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.home-shop__kicker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cream-60);
}

/* Phones get a swipeable strip, like Who lives here; wider screens a row. */
.home-shop__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 1.25rem;
  margin-inline: -1.5rem;
  padding: 0 1.5rem 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.5rem;
  scrollbar-width: none;
}
.home-shop__grid::-webkit-scrollbar { display: none; }

.home-crate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  scroll-snap-align: start;
}
.home-crate__media {
  width: 100%;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: 0.875rem;
  background: var(--cream-10);
}
.home-crate__media img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  transition: scale 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.home-crate:hover .home-crate__media img { scale: 1.05; }
.home-crate__num {
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--clay-lit);
}
.home-crate__title {
  margin-bottom: 0.625rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  text-wrap: balance;
}
.home-crate__copy {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--cream-60);
  text-wrap: pretty;
}
/* The link covers the whole crate, so the photograph is a way in too. */
.home-crate__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--clay-lit);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: color 0.2s;
}
.home-crate__link::after { content: ""; position: absolute; inset: 0; }
.home-crate__link svg { transition: translate 0.3s; }
.home-crate:hover .home-crate__link { color: var(--clay-lit); }
.home-crate:hover .home-crate__link svg { translate: 0.25rem 0; }

/* --- On the calendar ------------------------------------------------ */
.home-days { padding-block: 5.5rem 6.5rem; }
.home-days__head { display: grid; gap: 1.25rem; margin-bottom: 3rem; }
.home-days__intro { max-width: 28rem; line-height: 1.8; color: var(--ink-60); text-wrap: pretty; }

.home-days__grid { display: grid; gap: 3.5rem; }
.home-days__col { display: flex; flex-direction: column; align-items: flex-start; }
.home-days__col-title {
  margin-bottom: 1rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-60);
}
.home-days__list { width: 100%; margin-bottom: 2rem; border-top: 1px solid var(--ink-10); }

.home-day {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  grid-template-areas:
    "num name arrow"
    "num when arrow"
    "num status arrow";
  column-gap: 1rem;
  row-gap: 0.3rem;
  align-items: center;
  padding-block: 1.375rem;
  border-bottom: 1px solid var(--ink-10);
}
.home-day::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.home-day__num {
  grid-area: num;
  align-self: start;
  padding-top: 0.55rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-60);
}
.home-day__name {
  grid-area: name;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  transition: color 0.25s;
}
.home-day__when {
  grid-area: when;
  font-size: 0.9375rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--sage);
}
.home-day__status { grid-area: status; justify-self: start; margin-top: 0.35rem; }
.home-day__arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ink-30);
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, translate 0.3s;
}
.home-day--link:hover::before,
.home-day--link:focus-visible::before { transform: scaleX(1); }
.home-day--link:hover .home-day__name { color: var(--clay); }
.home-day--link:hover .home-day__arrow {
  background: var(--ink);
  color: var(--cream);
  box-shadow: inset 0 0 0 1px var(--ink);
  translate: 0.25rem 0;
}

@media (min-width: 640px) {
  .home-welcome__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-welcome__fact { display: block; padding: 1.125rem 1.5rem 1.25rem; }
  .home-welcome__fact + .home-welcome__fact { border-top: 0; }
  .home-welcome__fact:nth-child(n + 3) { border-top: 1px solid var(--ink-08); }
  .home-welcome__fact:nth-child(even) { border-left: 1px solid var(--ink-08); }
  .home-welcome__fact dt { margin-bottom: 0.35rem; }
  .home-welcome__fact dd { text-align: left; font-size: 1.1875rem; }
  .home-ticket__media img { max-height: 22rem; }

  .home-shop__grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2rem;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

@media (min-width: 900px) {
  .home-welcome__card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-welcome__fact:nth-child(n) { border-top: 0; border-left: 0; }
  .home-welcome__fact + .home-welcome__fact { border-left: 1px solid var(--ink-08); }
  .home-welcome__fact { padding: 1.25rem 1.5rem 1.375rem; }
  .home-welcome + .home-event { padding-top: 7rem; }

  .home-ticket { grid-template-columns: minmax(0, 5fr) 10rem minmax(0, 7fr); }
  .home-ticket--nomedia { grid-template-columns: 10rem minmax(0, 1fr); }
  .home-ticket--nostub { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .home-ticket--nomedia.home-ticket--nostub { grid-template-columns: minmax(0, 1fr); }
  /* The photograph fills whatever height the invitation needs, rather than
     its 4:5 shape setting the row (which stretched the ticket to ~1500px). */
  .home-ticket__media { position: relative; min-height: 26rem; }
  .home-ticket__media img { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }

  /* The stub stands upright between photograph and invitation. */
  .home-ticket__stub {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
  }
  .home-ticket__stub::before,
  .home-ticket__stub::after { left: auto; right: -0.75rem; }
  .home-ticket__stub::before { top: -0.75rem; bottom: auto; }
  .home-ticket__stub::after { bottom: -0.75rem; }
  .home-ticket__perf {
    left: auto;
    right: 0;
    top: 1.5rem;
    bottom: 1.5rem;
    border-top: 0;
    border-right: 1px dashed var(--ink-30);
  }
  .home-ticket__day { font-size: 5rem; }
  .home-ticket__body { padding: 3rem 3rem 3rem 3.25rem; }

  .home-story { padding-block: 7rem 8rem; }
  .home-story__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; }
  .home-story__media { margin: 0 1.25rem 1.25rem 0; }

  .home-shop__head,
  .home-days__head { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; column-gap: 4rem; }
  .home-shop__kicker { justify-self: end; padding-bottom: 0.75rem; }
  .home-days__head { margin-bottom: 3.5rem; }

  .home-days__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; }
  .home-days__grid--single { grid-template-columns: minmax(0, 1fr); }

  /* A calendar on its own has the width to read as a timetable. */
  .home-days__grid--single .home-day {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 15rem) 12rem auto;
    grid-template-areas: "num name when status arrow";
    column-gap: 1.5rem;
    padding-block: 1.625rem;
  }
  .home-days__grid--single .home-day__num { padding-top: 0; align-self: center; }
  .home-days__grid--single .home-day__name { font-size: 1.75rem; }
  .home-days__grid--single .home-day__status { margin-top: 0; }
}

@media (min-width: 1024px) {
  .home-shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-ticket,
    .home-story__media,
    .home-crate,
    .home-day {
      animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    .home-crate:nth-child(even),
    .home-days__list li:nth-child(even) .home-day { animation-range: entry 6% cover 30%; }
  }
}

/* ------------------------------------------------------------------
   10. Contact / join our table
------------------------------------------------------------------ */
.contact { padding-block: 6rem 5.5rem; text-align: center; }
.contact .contact__blocks { margin-bottom: 0; }
.contact__title {
  margin-bottom: 1rem;
  font-family: var(--font-serif);
  font-size: 1.875rem;
}
.contact__intro {
  font-weight: 300;
  font-style: italic;
  color: var(--sage);
}
.contact__blocks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-block: 3rem 4rem;
}
.contact__divider { display: none; width: 1px; height: 3rem; background: var(--ink-10); }
.contact__value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.35;
}
a.contact__value {
  border-bottom: 1px solid var(--clay-30);
  transition: border-color 0.2s;
}
a.contact__value:hover { border-color: var(--clay); }
.contact__value small { font-size: 1.125rem; }

.contact__social {
  display: flex;
  gap: 2rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-60);
}
.contact__social a { transition: color 0.2s; }
.contact__social a:hover { color: var(--clay); }

@media (min-width: 768px) {
  .contact__blocks { flex-direction: row; }
  .contact__divider { display: block; }
  .contact__title { font-size: 2.25rem; }
}

/* ------------------------------------------------------------------
   11. Farm menu page
------------------------------------------------------------------ */
.menu-sections { display: flex; flex-direction: column; gap: 5rem; }
.menu-section { display: grid; gap: 2.5rem; align-items: start; }
.menu-section__media img {
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: 0 20px 25px -5px var(--ink-05), 0 8px 10px -6px var(--ink-05);
}
/* Two or three lines beside a tall portrait leave a hole; go landscape. */
.menu-section--short .menu-section__media img { aspect-ratio: 4 / 3; }
.menu-section__title {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  line-height: 1.2;
}
.menu-section__intro {
  max-width: 34rem;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-60);
}

/* Price list: name, dotted leader, price — the way a farm-stand board reads. */
.farm-items { display: flex; flex-direction: column; }
.farm-item { padding-block: 1.25rem; border-bottom: 1px solid var(--ink-08); }
.farm-item:first-child { padding-top: 0.25rem; }
.farm-item:last-child { border-bottom: 0; padding-bottom: 0; }
.farm-item__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.farm-item__name {
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.3;
}
.farm-item__leader {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--ink-30);
  transform: translateY(-0.3em);
}
.farm-item__price {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: var(--clay);
}
.farm-item__detail {
  max-width: 36rem;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-60);
}
/* A figure is a price; words are a label. Set them apart so "$13.00 / lb"
   doesn't read with the same weight as "Small batch". */
.farm-item__price { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.farm-item__amount {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--clay);
}
.farm-item__unit { color: var(--ink-60); }

/* A section holding one thing — lamb by the pound — is a price board. */
.farm-items--solo .farm-item { padding-top: 0.5rem; }
.farm-items--solo .farm-item__row { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.farm-items--solo .farm-item__leader { display: none; }
.farm-items--solo .farm-item__name { font-size: 1.5rem; }
.farm-items--solo .farm-item__price { gap: 0.6rem; }
.farm-items--solo .farm-item__amount {
  font-size: 3.25rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}
.farm-items--solo .farm-item__unit { font-size: 0.75rem; }
.farm-items--solo .farm-item__detail { margin-top: 0.75rem; }

/* Every card closes the same way: a hairline, then the one thing to do. */
.menu-section__note {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-08);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-60);
}
.menu-section__call {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin-block: -0.75rem;
  transition: color 0.2s;
}
.menu-section__call-icon { flex: none; color: var(--clay); }
.menu-section__call-arrow {
  display: inline-block;
  font-size: 0.875rem;
  letter-spacing: 0;
  opacity: 0;
  transform: translateX(-0.35rem);
  transition: opacity 0.2s, transform 0.2s;
}
.menu-section__call:hover,
.menu-section__call:focus-visible { color: var(--ink); }
.menu-section__call:hover .menu-section__call-arrow,
.menu-section__call:focus-visible .menu-section__call-arrow { opacity: 1; transform: none; }
/* Under a pre-order ticket there's no list to close, so no rule. */
.preorder + .menu-section__note { border-top: 0; padding-top: 0; }

/* A time-limited item with a link out (a pre-order) is set as a tear-off
   ticket above the list, from the same family as the event stub. */
.preorder {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 2.5rem;
  border-radius: 1rem;
  background: var(--night);
  color: var(--cream);
  box-shadow: 0 30px 40px -24px oklch(0.19 0.019 152 / 55%);
}
.preorder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 90% at 0% 100%, oklch(0.735 0.085 52 / 22%), transparent 70%);
}
.preorder__body { padding: 2.25rem 1.75rem 2rem; }
.preorder__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clay-lit);
}
.preorder__badge::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px oklch(0.735 0.085 52 / 22%);
}
.preorder__name {
  margin-top: 0.875rem;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1.05;
}
.preorder__detail {
  max-width: 34rem;
  text-wrap: pretty;
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--cream-60);
}
.preorder__stub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 2rem 1.75rem 1.75rem;
}
.preorder__perf {
  position: absolute;
  left: 1.75rem;
  right: 1.75rem;
  top: 0;
  border-top: 1px dashed var(--cream-40);
}
/* Punched notches at either end of the tear line. */
.preorder__stub::before,
.preorder__stub::after {
  content: "";
  position: absolute;
  top: -0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--cream);
}
.preorder__stub::before { left: -0.75rem; }
.preorder__stub::after { right: -0.75rem; }
.preorder__price {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
}
.preorder__cta { gap: 0.625rem; }
.preorder__arrow {
  font-size: 0.9375rem;
  letter-spacing: 0;
  transition: transform 0.3s;
}
.preorder__cta:hover .preorder__arrow { transform: translate(2px, -2px); }

/* A store-wide pre-order, announced as a ticket over the foot of the Store
   banner: the pickup date on a cinnamon stub, torn from the offer and its
   button. Cream against the dark photo so it's the first thing read, and
   warm where the in-list pre-order ticket below is dark, so the two don't
   read as the same card twice. */
.page-head--announce { padding-bottom: 7.5rem; }
@media (min-width: 768px) { .page-head--announce { padding-bottom: 8.5rem; } }

.announce {
  --cinnamon: oklch(0.5 0.1 45);
  position: relative;
  z-index: 20;
  margin-top: -4.5rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .announce { padding-inline: 2.5rem; margin-top: -5rem; margin-bottom: 3.5rem; } }

.announce__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 1rem;
  background: oklch(0.975 0.009 80);
  box-shadow:
    0 0 0 1px var(--ink-08),
    0 32px 60px -28px oklch(0.22 0.006 145 / 45%),
    0 4px 10px oklch(0.22 0.006 145 / 6%);
}

.announce__stub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 1.5rem 1.5rem 1.375rem;
  color: var(--cream);
  background:
    radial-gradient(22rem 14rem at 0% 0%, oklch(0.735 0.085 52 / 45%), transparent 70%),
    var(--cinnamon);
}
.announce__when {
  flex-basis: 100%;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cream-90);
}
.announce__date {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.announce__day {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--cream-90);
}
/* Phones: the tear line runs across the foot of the stub. */
.announce__perf {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0;
  border-top: 1px dashed var(--cream-40);
}

.announce__body { padding: 1.75rem 1.5rem 0; }
.announce__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cinnamon);
}
.announce__badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 oklch(0.5 0.1 45 / 40%);
  animation: announce-pulse 2.4s ease-out infinite;
}
@keyframes announce-pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.5 0.1 45 / 45%); }
  70%, 100% { box-shadow: 0 0 0 0.6rem oklch(0.5 0.1 45 / 0%); }
}
@media (prefers-reduced-motion: reduce) {
  .announce__badge::before { animation: none; box-shadow: 0 0 0 4px oklch(0.5 0.1 45 / 18%); }
}
.announce__title {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.announce__copy {
  max-width: 34rem;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  text-wrap: pretty;
  color: var(--ink-60);
}

.announce__action { padding: 1.5rem 1.5rem 1.75rem; }
.announce__cta { gap: 0.625rem; box-shadow: none; }
.announce__arrow {
  font-size: 0.9375rem;
  letter-spacing: 0;
  transition: transform 0.3s;
}
.announce__cta:hover .announce__arrow { transform: translate(2px, -2px); }

@media (min-width: 768px) {
  .announce__card { grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: stretch; }
  .announce__card--nostub { grid-template-columns: minmax(0, 1fr) auto; }
  .announce__stub {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.75rem;
  }
  .announce__when { flex-basis: auto; }
  .announce__date { font-size: 3rem; }
  /* The tear line turns to run down the stub's right edge. */
  .announce__perf { left: auto; right: 0; top: 1.5rem; bottom: 1.5rem; border-top: 0; border-right: 1px dashed var(--cream-40); }
  .announce__body { align-self: center; padding: 2rem 1rem 2rem 2.25rem; }
  .announce__action { display: flex; align-items: center; padding: 2rem 2.25rem 2rem 1rem; }
}

/* Beef we sell but don't raise: a linen band at the foot of Meats, set
   apart from the price lists so the partnership reads as its own thing. */
.partnership {
  display: grid;
  margin-top: 5rem;
  border-radius: 1rem;
  background: var(--linen);
  overflow: hidden;
}
.partnership__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.partnership__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5rem 1.75rem;
}
.partnership__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sage);
}
.partnership__eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--clay);
}
.partnership__title {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.1;
  text-wrap: balance;
}
.partnership__copy {
  max-width: 38rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-60);
}
.partnership__list {
  display: grid;
  gap: 0.75rem 2rem;
  width: 100%;
  margin-top: 1.75rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--ink-10);
  list-style: none;
}
.partnership__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.partnership__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5rem;
  height: 1px;
  background: var(--clay);
}
.partnership__partner {
  margin-top: 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
}
.partnership__partner-label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-60);
}
.partnership__note {
  max-width: 38rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-60);
}
.partnership__cta { margin-top: 2rem; }

@media (min-width: 768px) {
  .partnership { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .partnership--nomedia { grid-template-columns: minmax(0, 1fr); }
  .partnership__media img { aspect-ratio: auto; min-height: 100%; }
  .partnership__body { padding: 3.5rem 3rem; }
  .partnership__title { font-size: 2.75rem; }
}
@media (min-width: 1024px) {
  .partnership__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.menu-cta {
  position: relative;
  /* The closing panel is dark, and so is the footer under it — this keeps
     a band of cream between the two. */
  margin-block: 5rem 6rem;
  border-radius: 1rem;
  background: var(--ink);
  color: var(--cream);
  padding: 4rem 2rem;
  text-align: center;
}
/* The same tear-off edge the event stub has, so the closing panel
   reads as part of the same family. */
.menu-cta__perf {
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 1.5rem;
  border-top: 1px dashed var(--cream-40);
}
.menu-cta__title { font-family: var(--font-serif); font-size: 1.875rem; }
.menu-cta__copy {
  margin: 1rem auto 0;
  max-width: 36rem;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--cream-60);
}
.menu-cta .btn { margin-top: 2rem; }

@media (min-width: 768px) {
  .menu-section { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
  .menu-section--flip .menu-section__media { order: 2; }
  /* Long price lists scroll past the photo instead of leaving it behind. */
  .menu-section__media { position: sticky; top: 6rem; }
  .menu-section--short { align-items: center; }

  .preorder { grid-template-columns: minmax(0, 1fr) auto; }
  .preorder__body { padding: 2.75rem 2.5rem; }
  .preorder__name { font-size: 3rem; }
  .preorder__stub {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 17rem;
    padding: 2.75rem 2.5rem;
  }
  .preorder__perf {
    left: 0;
    right: auto;
    top: 1.5rem;
    bottom: 1.5rem;
    border-top: 0;
    border-left: 1px dashed var(--cream-40);
  }
  .preorder__stub::after { top: auto; right: auto; bottom: -0.75rem; left: -0.75rem; }
}
@media (min-width: 1024px) { .menu-section { gap: 5rem; } }
@media (min-width: 768px) { .menu-page { padding-inline: 2.5rem; } }

/* ------------------------------------------------------------------
   12. Events index
   Set as a farm almanac: the seasons ahead in a strip across the foot of
   the banner, the next dated event as a ticket, then a chapter per season
   with each event on a ruled line and its "when" in a tear-off stub.
------------------------------------------------------------------ */

/* Room under the banner copy for the strip to sit over its edge. */
.page-head--almanac { padding-bottom: 7.5rem; }

/* --- The year strip ------------------------------------------------ */
.almanac { position: relative; z-index: 20; margin-top: -4.5rem; }
.almanac__year {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 1rem;
  /* The gap shows this through as the hairlines between seasons. Mixed
     solid, because a translucent line would pick up the photo behind. */
  background: color-mix(in oklab, var(--clay) 28%, var(--linen));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--clay) 28%, var(--linen)),
    0 32px 60px -28px oklch(0.22 0.006 145 / 38%);
}
.almanac__season:last-child:nth-child(odd) { grid-column: 1 / -1; }

.almanac__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  height: 100%;
  padding: 1.5rem 1.25rem 1.375rem;
  background: var(--linen);
  transition: background-color 0.3s;
}
a.almanac__link:hover { background: var(--cream); }

.almanac__glyph {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--clay);
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
a.almanac__link:hover .almanac__glyph { transform: rotate(-14deg) scale(1.12); }

.almanac__name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.1;
  transition: color 0.3s;
}
a.almanac__link:hover .almanac__name { color: var(--clay); }
.almanac__months {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-60);
}
.almanac__count {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sage);
}

.almanac__season--empty .almanac__link {
  background: color-mix(in oklab, var(--linen) 45%, var(--cream));
}
.almanac__season--empty .almanac__glyph { color: var(--ink-30); }
.almanac__season--empty .almanac__name { color: var(--ink-60); }
.almanac__season--empty .almanac__count { font-weight: 300; font-style: italic; color: var(--ink-60); }

/* The season we're in: cream ground, a turquoise edge and a "now" dot. */
.almanac__season--now .almanac__link { background: var(--cream); }
.almanac__season--now .almanac__link::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--teal);
}
.almanac__now,
.chapter__now {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--teal-deep);
}
.almanac__now { position: absolute; top: 1.625rem; right: 1.25rem; }
.almanac__now::before,
.chapter__now::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--teal);
}

/* --- Next on the farm ------------------------------------------------
   The one listing with a date still to come, as a ticket: date stub,
   perforation, the evening itself, then the photo. */
.next-up { padding-top: 4rem; }
.next-up__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 1rem;
  color: var(--cream);
  background:
    radial-gradient(38rem 22rem at 0% 0%, oklch(0.615 0.09 45 / 20%), transparent 70%),
    var(--night);
}

.next-up__media { order: -1; margin: 0; }
.next-up__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.next-up__stub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 1.75rem 1.5rem 1.5rem;
}
/* Punched notches either end of the perforation. */
.next-up__stub::before,
.next-up__stub::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--cream);
  bottom: -0.75rem;
}
.next-up__stub::before { left: -0.75rem; }
.next-up__stub::after { right: -0.75rem; }
.next-up__perf {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0;
  border-top: 1px dashed var(--cream-40);
}

.next-up__kicker {
  flex-basis: 100%;
  margin-bottom: 0.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--clay-lit);
}
.next-up__cal { display: flex; align-items: baseline; gap: 0.75rem; }
.next-up__month {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--cream-60);
}
.next-up__day {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  line-height: 0.85;
  font-variant-numeric: lining-nums;
}
.next-up__weekday { font-size: 0.875rem; font-weight: 300; color: var(--cream-60); }

.next-up__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem 1.5rem 2.25rem;
}
.next-up__title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.1;
  text-wrap: balance;
}
.next-up__copy {
  max-width: 30rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--cream-60);
}
.next-up__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  width: 100%;
  padding-block: 1.25rem;
  border-block: 1px solid var(--cream-10);
}
.next-up__label {
  margin-bottom: 0.375rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cream-60);
}
.next-up__value {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.next-up__detail { margin-top: 0.125rem; font-size: 0.8125rem; font-weight: 300; color: var(--cream-60); }
.next-up .btn { margin-top: 0.5rem; }

/* --- Chapters --------------------------------------------------------- */
.chapter {
  display: grid;
  gap: 2rem;
  padding-block: 4rem;
  scroll-margin-top: 1rem;
}
/* A rule inside the gutters, not across them. */
.chapter + .chapter {
  background: linear-gradient(var(--ink-10), var(--ink-10)) center top / calc(100% - 3rem) 1px no-repeat;
}

.chapter__sticky { display: flex; flex-direction: column; align-items: flex-start; }
.chapter__glyph { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; color: var(--clay); }
.chapter__title { font-family: var(--font-serif); font-size: 3rem; line-height: 1; }
.chapter--now .chapter__title { font-style: italic; }
.chapter__months {
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-60);
}
.chapter__now { margin-top: 1rem; }

/* --- Listings --------------------------------------------------------- */
.listing + .listing { border-top: 1px solid var(--ink-10); }
.listing__link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: 2rem; }
.listing:first-child .listing__link { padding-top: 0; }
.listing:last-child .listing__link { padding-bottom: 0; }
.listing__link:focus-visible { outline-offset: 8px; }

.listing__media { overflow: hidden; border-radius: 0.75rem; background: var(--linen); }
.listing__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.listing__link:hover .listing__media img { transform: scale(1.05); }
.listing__media--empty { display: grid; place-items: center; aspect-ratio: 3 / 2; }
.listing__placeholder { width: 3rem; height: 3rem; color: var(--clay-40); }

.listing__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.listing__title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.15;
  text-wrap: balance;
  transition: color 0.3s;
}
.listing__link:hover .listing__title { color: var(--clay); }
.listing__copy {
  max-width: 32rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-60);
}
.listing__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--clay-40);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: color 0.3s, border-color 0.3s;
}
.listing__more svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.listing__link:hover .listing__more { color: var(--clay); border-color: var(--clay); }
.listing__link:hover .listing__more svg { transform: translateX(4px); }

.listing__when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--ink-30);
}
.listing__label {
  flex-basis: 100%;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-60);
}
.listing__date {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.listing__time { font-size: 0.8125rem; font-weight: 300; color: var(--ink-60); }

@media (min-width: 768px) {
  .almanac { margin-top: -5rem; }
  .almanac__year {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .almanac__season:last-child:nth-child(odd) { grid-column: auto; }
  .almanac__link { padding: 1.75rem 1.5rem 1.5rem; }
  .almanac__name { font-size: 1.75rem; }
  .page-head--almanac { padding-bottom: 8.5rem; }

  .next-up { padding-top: 5rem; }
  .next-up__card { grid-template-columns: 10.5rem minmax(0, 1fr); }
  .next-up__media { grid-column: 1 / -1; }
  .next-up__media img { aspect-ratio: 21 / 9; }
  .next-up__stub {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 1.75rem;
  }
  .next-up__stub::before { left: auto; right: -0.75rem; top: -0.75rem; bottom: auto; }
  .next-up__stub::after { right: -0.75rem; bottom: -0.75rem; }
  .next-up__perf {
    left: auto;
    right: 0;
    top: 1.5rem;
    bottom: 1.5rem;
    border-top: 0;
    border-right: 1px dashed var(--cream-40);
  }
  .next-up__cal { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .next-up__day { font-size: 6rem; }
  .next-up__body { padding: 2.75rem 2.5rem; }
  .next-up__title { font-size: 2.75rem; }

  .listing__link { grid-template-columns: 13rem minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .listing__link { grid-template-rows: auto 1fr; }
  /* The photo spans both rows so the stub follows the copy, not the photo. */
  .listing__media { grid-row: 1 / span 2; }
  .listing__media img,
  .listing__media--empty { aspect-ratio: 4 / 3; }
  .listing__when { grid-column: 2; align-self: start; }
}

@media (min-width: 1024px) {
  /* With the photo on the right the stub has to clear it: the notches sit
     on the perforation, which is the stub's right edge. */
  .next-up__card { grid-template-columns: 11.5rem minmax(0, 1fr) minmax(0, 0.85fr); }
  .next-up__card--nomedia { grid-template-columns: 11.5rem minmax(0, 1fr); }
  .next-up__media { grid-column: auto; order: 0; }
  .next-up__media img { aspect-ratio: auto; min-height: 100%; }
  .next-up__body { padding: 3.5rem 3rem; }
  .next-up__title { font-size: 3.25rem; }

  .chapter { grid-template-columns: 13rem minmax(0, 1fr); gap: 3rem; padding-block: 5rem; }
  .chapter--flat { grid-template-columns: minmax(0, 1fr); }
  .chapter__sticky { position: sticky; top: 2rem; }
  .chapter__title { font-size: 3.25rem; }

  .listing__link {
    grid-template-columns: 14rem minmax(0, 1fr) 13rem;
    grid-template-rows: none;
    column-gap: 2.25rem;
    align-items: center;
    padding-block: 2.5rem;
  }
  .listing__media { grid-row: auto; }
  .listing__when {
    grid-column: auto;
    align-self: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0.375rem;
    padding: 0 0 0 1.75rem;
    border-top: 0;
    border-left: 1px dashed var(--ink-30);
  }
  .listing__label { flex-basis: auto; }
  .listing__when .listing__date ~ .pill { margin-top: 0.625rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .almanac__season { animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) both; }
  .almanac__season:nth-child(2) { animation-delay: 0.07s; }
  .almanac__season:nth-child(3) { animation-delay: 0.14s; }
  .almanac__season:nth-child(4) { animation-delay: 0.21s; }
  .almanac__season:nth-child(5) { animation-delay: 0.28s; }

  .almanac__now::before,
  .chapter__now::before { animation: almanac-pulse 2.4s ease-out infinite; }
}
@keyframes almanac-pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.774 0.124 199.5 / 55%); }
  70%, 100% { box-shadow: 0 0 0 7px oklch(0.774 0.124 199.5 / 0%); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .next-up__card,
    .listing {
      animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}

/* ------------------------------------------------------------------
   13. Activities list
------------------------------------------------------------------ */
/* The page itself is set as an event leaf — see section 19. The
   activities list below is still used by the Contact page. */

.activities-grid { display: grid; gap: 4rem; align-items: start; padding-block: 6rem; }
.activities__aside .rule { margin-bottom: 1.5rem; }
.activities__title {
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  line-height: 1.25;
  text-wrap: balance;
}
.activities__aside img {
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: 0 20px 25px -5px var(--ink-05), 0 8px 10px -6px var(--ink-05);
}
.activities__list {
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}
.activity { padding-block: 2rem; border-bottom: 1px solid var(--ink-10); }
.activity:last-child { border-bottom: 0; }
.activity__title { margin-bottom: 0.5rem; font-family: var(--font-serif); font-size: 1.25rem; }
.activity__copy {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-60);
}

@media (min-width: 768px) {
  .activities-grid { grid-template-columns: 1fr 1.2fr; padding-inline: 3rem; }
  .activities__aside { position: sticky; top: 3rem; }
  .activities__title { font-size: 2.25rem; }
}

/* ------------------------------------------------------------------
   14. Site footer

   Dusk on the farm. A deep sage-black ground with lamplight pooling in
   the top-left corner, a paper grain over all of it, one last invitation
   sitting in that light, and the wordmark set huge and half-sunk along
   the bottom edge as a closing signature.
------------------------------------------------------------------ */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night-deep);
  color: var(--cream);
  padding-top: 5rem;
}

/* The invitation band brings its own top padding. */
.site-footer:has(.footer-closing) { padding-top: 0; }

/* Lamplight, a whisper of the logo's turquoise on the right, and a
   two-tone hairline along the very top edge. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, transparent, oklch(0.615 0.09 45 / 80%) 22%, oklch(0.615 0.09 45 / 80%) 48%, oklch(0.774 0.124 199.5 / 55%) 72%, transparent) top / 100% 2px no-repeat,
    radial-gradient(64rem 26rem at 14% -6%, oklch(0.615 0.09 45 / 26%), transparent 66%),
    radial-gradient(44rem 22rem at 94% -4%, oklch(0.52 0.09 199.5 / 16%), transparent 64%),
    radial-gradient(70rem 30rem at 50% 2%, oklch(0.49 0.031 145 / 22%), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-deep) 58%);
}

/* Paper grain, so the dark reads as printed stock rather than a flat fill. */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* Cream at 40% falls under 4.5:1 on this ground, so the small type
   in here steps up to 60%. */
.site-footer .eyebrow { color: var(--cream-60); }

/* --- One last invitation -------------------------------------------- */
.footer-closing {
  padding-block: 4.5rem 3.25rem;
}
.footer-closing__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.footer-closing__copy { max-width: min(100%, 34rem); }
.footer-closing__eyebrow { margin-bottom: 1.125rem; }

.footer-closing__line {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 5.5vw, 3.125rem);
  max-width: 15ch;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-wrap: balance;
}
.footer-closing__accent {
  color: var(--clay-lit);
  font-style: italic;
}

.footer-closing__btn {
  flex-shrink: 0;
  box-shadow: 0 18px 40px -18px oklch(0.615 0.09 45 / 60%);
}

.footer-closing + .site-footer__inner {
  border-top: 1px solid var(--cream-10);
  padding-top: 3.5rem;
}

/* --- Identity ------------------------------------------------------- */
.site-footer__inner {
  display: grid;
  gap: 3rem;
  padding-bottom: 3.5rem;
}

.footer-brand__mark {
  display: block;
  transition: opacity 0.3s;
}
.footer-brand__mark:hover { opacity: 0.82; }

.footer-brand__logo {
  width: 100%;
  max-width: 16rem;
  height: auto;
}

.footer-brand__est {
  margin-top: 1.125rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--cream-60);
}

/* Social sits under the wordmark, where the brand column used to run out
   of things to say. Pills rather than bare words, so the block has weight. */
.footer-brand__social { margin-top: 1.75rem; }
.footer-brand__social .contact__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--cream-60);
}
.footer-brand__social .contact__social a {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cream-10);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cream-60);
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.footer-brand__social .contact__social a:hover,
.footer-brand__social .contact__social a:focus-visible {
  color: var(--cream);
  border-color: var(--clay-40);
  background-color: oklch(0.615 0.09 45 / 16%);
}

/* --- Sitemap -------------------------------------------------------- */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2.75rem 2rem;
}
.footer-nav__title {
  margin-bottom: 1.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--cream-10);
  font-weight: 400;
}
.footer-nav__title a { transition: color 0.25s; }
.footer-nav__title a:hover { color: var(--clay-lit); }

.footer-nav__list { display: grid; gap: 0.75rem; }

.footer-nav__link {
  display: inline;
  padding-bottom: 3px;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--cream-60);
  background-image: linear-gradient(var(--clay-lit), var(--clay-lit));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: color 0.25s, background-size 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.footer-nav__link:hover { color: var(--cream); background-size: 100% 1px; }

/* --- How to find the farm ------------------------------------------- */
/* auto-fit, so a farm with no hours saved doesn't leave a hole in the row. */
.footer-visit {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--cream-10);
}
.footer-visit__row { display: grid; gap: 0.55rem; align-content: start; flex: 0 1 auto; }
.footer-visit__row dd { margin: 0; }

.footer-visit__value {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--cream-90);
}
.footer-visit__value--link {
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.footer-visit__value--link:hover { color: var(--clay-lit); border-bottom-color: var(--clay-40); }
.footer-visit__city { font-size: 0.9375rem; color: var(--cream-60); }

.footer-visit__phone {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--clay-40);
  padding-bottom: 0.15rem;
  transition: color 0.25s, border-color 0.25s;
}
.footer-visit__phone:hover { color: var(--clay-lit); border-bottom-color: var(--clay-lit); }

/* --- Baseline row --------------------------------------------------- */
.site-footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 3rem;
  border-top: 1px solid var(--cream-10);
  padding-block: 1.75rem;
}
.site-footer__copyright {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--cream-60);
}

.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cream-60);
  transition: color 0.25s;
}
.site-footer__top span { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); }
.site-footer__top:hover { color: var(--cream); }
.site-footer__top:hover span { transform: translateY(-0.2rem); }

/* --- Closing signature ---------------------------------------------- */
/* Set as wide as the page allows, lit from above and faded out at both
   ends, so it reads as a painted sign catching the last of the light. */
/* The size lives on the container so the padding that makes room for the
   italic descenders can be expressed in the same em and scale with it. */
.site-footer__signature {
  overflow: hidden;
  font-size: min(11rem, calc((100vw - 7rem) / (var(--vl-name-len, 18) * 0.47)));
  padding-top: 0.14em;
  padding-bottom: 0.3em;
  text-align: center;
  line-height: 0;
}
.site-footer__watermark {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1em;
  line-height: 0.9;
  letter-spacing: -0.02em;
  white-space: nowrap;
  user-select: none;

  background-image: linear-gradient(175deg, oklch(0.988 0.005 85 / 9%) 10%, oklch(0.615 0.09 45 / 5%) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

@media (min-width: 640px) {
  .footer-visit { gap: 2.25rem 3rem; }
}

@media (min-width: 900px) {
  .footer-closing { padding-block: 6rem 4rem; }
  .footer-closing__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
  .footer-closing__btn { margin-bottom: 0.5rem; }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: 5rem;
    align-items: start;
    padding-bottom: 4.5rem;
  }
  .footer-visit { padding-top: 3rem; justify-content: space-between; }
  .footer-visit__row--phone { text-align: right; justify-items: end; }
  .site-footer__base { flex-direction: row; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer * { transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------------
   15. Generic page / post content
------------------------------------------------------------------ */
.entry { padding-block: 4rem 6rem; }
.entry__title {
  margin-bottom: 2rem;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.2;
  text-wrap: balance;
}
.entry__content > * + * { margin-top: 1.25rem; }
.entry__content p,
.entry__content li { font-weight: 300; line-height: 1.8; color: var(--ink-60); }
.entry__content h2 { font-family: var(--font-serif); font-size: 1.5rem; margin-top: 2.5rem; }
.entry__content h3 { font-family: var(--font-serif); font-size: 1.25rem; margin-top: 2rem; }
.entry__content a { border-bottom: 1px solid var(--clay-30); }
.entry__content a:hover { border-color: var(--clay); }
.entry__content ul { list-style: disc; padding-left: 1.25rem; }
.entry__content ol { list-style: decimal; padding-left: 1.25rem; }
.entry__content img { border-radius: 1rem; }
.entry__content blockquote {
  border-left: 2px solid var(--clay);
  padding-left: 1.25rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
}

.error-404 {
  display: flex;
  min-height: 60vh;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  text-align: center;
}
.error-404__code { font-family: var(--font-serif); font-size: 4.5rem; }
.error-404__title { margin-top: 1rem; font-family: var(--font-serif); font-size: 1.5rem; }
.error-404__copy { margin-top: 0.5rem; font-size: 0.875rem; color: var(--sage); }
.error-404 .btn { margin-top: 1.5rem; }

/* ------------------------------------------------------------------
   16. Motion
------------------------------------------------------------------ */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-rise { animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) both; }

/* Where the browser supports it, each class rises into view as it is
   scrolled to — the same treatment as the home page's featured band. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .class-card__media,
    .class-card__body {
      animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    .class-card__body { animation-range: entry 5% cover 28%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------
   17. Admin bar offset
------------------------------------------------------------------ */
body.admin-bar .site-nav { top: 0; }

/* ------------------------------------------------------------------
   18. Restructure: status, schedule, departments, classes, seasons

   Everything below is built from the tokens at the top of this file —
   no new hues. Clay carries "this is live", sage carries "not yet".
------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .site-nav__menu { gap: 1.75rem; letter-spacing: 0.1em; }
}

/* --- Status pill --------------------------------------------------
   The dates for most of the calendar aren't set, so a listing's status
   is the first thing it has to say. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  border-radius: 9999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: currentColor;
}
.pill--live { background: color-mix(in oklab, var(--clay) 14%, transparent); color: var(--clay); }
.pill--mute { background: var(--ink-08); color: var(--sage); }

/* On the ink band the tints need to come from the light side instead. */
.schedule .pill--live {
  background: color-mix(in oklab, var(--clay) 28%, transparent);
  color: var(--cream);
}
.schedule .pill--mute { background: var(--cream-10); color: var(--cream-60); }

/* --- Schedule block -----------------------------------------------
   A downscaled echo of the home page's tear-off ticket stub, so the
   event pages read as the same family. */
.schedule {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 1rem;
  background: var(--ink);
  color: var(--cream);
  padding: 2.25rem 1.75rem;
}
.schedule__perf {
  position: absolute;
  left: 1.75rem;
  right: 1.75rem;
  top: 0;
  border-top: 1px dashed var(--cream-40);
}
.schedule__status { display: flex; }
.schedule__block { display: flex; flex-direction: column; gap: 0.4rem; }
.schedule__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cream-60);
}
.schedule__value { display: flex; flex-direction: column; gap: 0.15rem; }
.schedule__date,
.schedule__price {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.schedule__time { font-size: 0.875rem; font-weight: 300; color: var(--cream-60); }
.schedule__tba {
  font-size: 0.9375rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: var(--cream-60);
}
.schedule__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.schedule__actions .link-underline { color: var(--cream-60); }
.schedule__actions .link-underline:hover { color: var(--cream); }

/* --- Breadcrumb ---------------------------------------------------
   The site is three levels deep now. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-block: 2rem 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-60);
}
.breadcrumb a { border-bottom: 1px solid var(--clay-30); padding-bottom: 0.15rem; transition: border-color 0.2s; }
.breadcrumb a:hover { border-color: var(--clay); }
.breadcrumb__sep { color: var(--ink-30); }

/* --- Event detail page --------------------------------------------- */
.event-lead { display: grid; gap: 3rem; padding-block: 4rem; align-items: start; }
.event-lead__copy { display: flex; flex-direction: column; gap: 1.5rem; }
.event-lead__intro {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--ink);
}
.event-lead__note {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
}
.event-more { padding-block: 2rem 6rem; text-align: center; }
.event-more__title { margin-top: 1.5rem; font-family: var(--font-serif); font-size: 1.875rem; }
.event-more__copy {
  margin-block: 0.75rem 2rem;
  font-weight: 300;
  font-style: italic;
  color: var(--sage);
}

/* The button and the phone line each stay on one line; when the ticket is
   too narrow for both, the phone drops underneath instead of breaking. */
.schedule__actions { flex-wrap: wrap; }
.schedule__actions > * { white-space: nowrap; }

/* --- Invitation layout ----------------------------------------------
   One linen card, centred, with a hairline frame set in from the edge like
   a printed invitation. The labels and figures match the home page's
   featured event, so the two read as the same card. */
.page-head--invite .page-head__intro { max-width: 44rem; }
.invite { padding-block: 3rem 5rem; }

.invite__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 54rem;
  margin-inline: auto;
  padding: 3.5rem 1.5rem 3rem;
  border-radius: 1rem;
  text-align: center;
  background: var(--linen);
}
/* The low sun and grain of the featured band, plus the inset frame. */
.invite__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 0%, oklch(0.615 0.09 45 / 12%) 0%, transparent 70%),
    radial-gradient(60% 70% at 0% 100%, oklch(0.49 0.031 145 / 8%) 0%, transparent 70%);
}
.invite__card::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid var(--clay-30);
  border-radius: 0.5rem;
  pointer-events: none;
}

.invite__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--clay);
}
.invite__intro {
  margin-top: 1.25rem;
  max-width: 38rem;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.invite__sprig {
  width: 10rem;
  height: 1.5rem;
  margin-block: 2.5rem;
  fill: var(--clay);
}
.invite__sprig-line { fill: none; stroke: var(--clay-40); stroke-width: 1; }

.invite__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 36rem;
}
.invite__label {
  margin-bottom: 0.625rem;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-60);
}
.invite__value {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.invite__value--sm { font-size: 1.375rem; }
.invite__detail {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-60);
}

.invite__evening {
  width: 100%;
  max-width: 40rem;
  margin-top: 2.75rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ink-10);
}
/* Stacked on a phone, one line with clay dots between once there's room. */
.invite__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
}
.invite__list li { white-space: nowrap; }
.invite__list li + li::before {
  content: "";
  display: none;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-inline: 1rem;
  border-radius: 50%;
  background: var(--clay);
  vertical-align: 0.3em;
}

.invite__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.75rem;
}
.invite__actions .btn { transition: background-color 0.3s, color 0.3s, transform 0.3s; }
.invite__actions .btn:hover { transform: translateY(-1px); }

.invite__note {
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
}

@media (min-width: 480px) {
  .invite__actions { flex-direction: row; gap: 1.75rem; }
}
@media (min-width: 640px) {
  .invite { padding-block: 4rem 6rem; }
  .invite__card { padding: 5rem 3rem 4rem; }
  .invite__card::after { inset: 1rem; }
  .invite__intro { font-size: 1.5rem; }
  .invite__facts { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; }
  .invite__fact + .invite__fact { border-left: 1px solid var(--ink-10); }
  .invite__list { flex-direction: row; font-size: 1.375rem; }
  .invite__list li + li::before { display: inline-block; }
}

/* --- Events index: seasons ---------------------------------------- */
.season { padding-block: 3rem; }
.season__head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; }
.season__title { font-family: var(--font-serif); font-size: 1.875rem; }
.event-cards { padding-bottom: 0; }
.season:last-of-type .event-cards { padding-bottom: 4rem; }
.event-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.event-card__head .event-card__title { margin-bottom: 0; }
.event-card__when {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--clay);
}

/* --- Store: departments -------------------------------------------
   One long page, so it needs a way to jump. */
.dept-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-bottom: 3.5rem;
  background: color-mix(in oklab, var(--cream) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-08);
  overflow-x: auto;
  scrollbar-width: none;
}
.dept-nav::-webkit-scrollbar { display: none; }
.dept-nav__list { display: flex; gap: 0.25rem; padding-block: 0.625rem; }
.dept-nav__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-inline: 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--ink-60);
  transition: background-color 0.25s, color 0.25s;
}
.dept-nav__num {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--clay);
  transition: color 0.25s;
}
.dept-nav__link--soon { color: var(--sage); }
.dept-nav__link:hover { background: var(--ink-05); color: var(--ink); }
.dept-nav__link[aria-current="true"] { background: var(--ink); color: var(--cream); }
.dept-nav__link[aria-current="true"] .dept-nav__num { color: var(--clay-lit); }

.depts { display: flex; flex-direction: column; gap: 5rem; }
.dept { scroll-margin-top: 5rem; }
/* Numbered like a seed catalogue: big italic figure, name, item count. */
.dept__head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 1rem;
  margin-bottom: 3rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink-10);
}
.dept__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 3rem;
  height: 1px;
  background: var(--clay);
}
.dept__num {
  font-family: var(--font-serif);
  font-size: 3.25rem;
  font-style: italic;
  line-height: 0.8;
  font-variant-numeric: lining-nums;
  color: var(--clay);
}
.dept__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.05;
}
.dept__meta { grid-column: -2; align-self: center; justify-self: end; }
.dept__title:first-child { grid-column: 1 / -2; }
.dept__count {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
  color: var(--ink-60);
}
.dept--soon .dept__title { color: var(--sage); }
.dept--soon .dept__num { color: var(--ink-30); }
/* The Meats page has no jump bar above the first department. */
.menu-page > .depts:first-child { margin-top: 4rem; }

/* On a phone the name, leader and price can't share a line: stack them,
   and drop the count under the title. */
@media (max-width: 767px) {
  .dept__head { grid-template-columns: auto minmax(0, 1fr); }
  .dept__meta { grid-column: 2; justify-self: start; margin-top: 0.625rem; }
  .farm-item__row { flex-direction: column; gap: 0.25rem; }
  .farm-item__leader { display: none; }
}

@media (min-width: 768px) {
  .dept__head { column-gap: 1.5rem; }
  .dept__num { font-size: 4.5rem; }
  .dept__title { font-size: 2.75rem; }
}

.menu-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* A section with nothing in it yet says so, rather than vanishing —
   a stitched shelf tag, not a greyed-out error box. */
.soon-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  max-width: 34rem;
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
  background: var(--linen);
  outline: 1px dashed var(--clay-40);
  outline-offset: -0.5rem;
}
.soon-note__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sage);
}
.soon-note__copy {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
}
.menu-section--empty .menu-section__media img { opacity: 0.65; }

/* --- Classes -------------------------------------------------------
   Five classes is more than fits on a screen and every one of them is
   still waiting on dates, so the page opens on an index — names,
   cadence, price — and only then sets each class out at length. The
   long form alternates side to side so the scroll has a rhythm, and
   leans on the same linen-and-grain surface as the home page's
   featured band rather than inventing a second one. */

/* --- The index board ----------------------------------------------- */
.class-index {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block: 3.5rem 4rem;
  border-radius: 1rem;
  background: var(--linen);
  box-shadow: inset 0 0 0 1px var(--ink-08);
  padding: 1.75rem 1.5rem 1.25rem;
}

.class-index__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink-10);
}
.class-index__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-60);
}
.class-index__kicker::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--clay);
}
.class-index__count {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--sage);
}

.class-index__row { border-top: 1px solid var(--ink-08); }
.class-index__row:first-child { border-top: 0; }

.class-index__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "num name    price"
    "num cadence cadence";
  align-items: baseline;
  gap: 0.3rem 1rem;
  padding-block: 0.9375rem;
  transition: color 0.2s;
}
.class-index__num {
  grid-area: num;
  align-self: start;
  padding-top: 0.15rem;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--clay);
  transition: color 0.2s;
}
.class-index__name {
  grid-area: name;
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.25;
  transition: color 0.2s;
}
.class-index__cadence {
  grid-area: cadence;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--ink-60);
}
.class-index__price {
  grid-area: price;
  justify-self: end;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sage);
}
.class-index__link:hover .class-index__name { color: var(--clay); }
.class-index__link:hover .class-index__num { color: var(--ink); }

/* --- The long form -------------------------------------------------- */
.class-list { display: flex; flex-direction: column; }

.class-card {
  display: grid;
  gap: 1.75rem;
  align-items: start;
  padding-block: 3.5rem;
  border-top: 1px solid var(--ink-08);
  scroll-margin-top: 1.5rem;
}
.class-card:first-child { border-top: 0; padding-top: 0.5rem; }
.class-card:last-child { padding-bottom: 1rem; }

.class-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 24px 40px -24px oklch(0.22 0.006 145 / 32%);
}
.class-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  box-shadow: inset 0 0 0 1px var(--ink-08);
  pointer-events: none;
}
.class-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
.class-card:hover .class-card__media img { transform: scale(1.04); }

/* A class whose photograph hasn't been taken yet gets a monogram plate
   rather than a hole in the row, so the alternation still reads. */
.class-card__media--plate {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--linen);
  box-shadow: inset 0 0 0 1px var(--ink-08);
}
.class-card__mark {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(4.5rem, 16vw, 7.5rem);
  line-height: 1;
  color: var(--clay);
  opacity: 0.3;
}

/* The linen surfaces share the home page's low sun and fine grain. */
.class-index::before,
.class-card__media--plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 88% 0%, oklch(0.615 0.09 45 / 14%) 0%, transparent 70%),
    radial-gradient(60% 85% at 0% 100%, oklch(0.49 0.031 145 / 10%) 0%, transparent 70%);
}
.class-index::after,
.class-card__media--plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.class-card__media--plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1rem;
}

.class-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.class-card__kicker {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
}
.class-card__num {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--clay);
}
.class-card__num:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin-left: 0.875rem;
  vertical-align: 0.3em;
  background: var(--clay-30);
}
.class-card__cadence {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clay);
}

.class-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1rem;
}
.class-card__title {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* The description is the one warm line on the card, so it takes the
   serif italic the rest of the site uses for an aside. */
.class-card__copy {
  max-width: 46ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--sage);
  text-wrap: pretty;
}

/* Facts read as a spec strip, ruled off top and bottom, the same shape
   the featured band uses for date / time / tickets. */
.class-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1.25rem 2rem;
  width: 100%;
  margin-block: 0.25rem;
  padding-block: 1.375rem;
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}
.class-fact { display: flex; flex-direction: column; }
.class-fact__label {
  margin-bottom: 0.5rem;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-60);
}
.class-fact__value {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.class-dates { display: flex; flex-direction: column; gap: 0.625rem; }
.class-dates__label {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-60);
}
.class-dates__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.class-date {
  border: 1px solid var(--clay-30);
  border-radius: 9999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.class-card__cta { margin-top: 0.5rem; }

/* --- How signing up works ------------------------------------------
   Shared with the Store page. Four short steps, ruled off from each
   other, numbered in the same clay serif figures as the classes. */
.order-steps {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--ink-10);
}
.order-steps__title {
  margin-bottom: 2.5rem;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  line-height: 1.2;
  text-wrap: balance;
}
.order-steps__list { display: grid; gap: 1.75rem; }
.order-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--ink-10);
}
.order-step__num {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--clay);
}
.order-step__title { font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.25; }
.order-step__copy {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-60);
  text-wrap: pretty;
}
.order-steps__note {
  margin-top: 2.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sage);
  text-wrap: pretty;
}

/* --- Our Story: values + questions --------------------------------- */
.values { display: grid; gap: 0; }
.value { padding-block: 1.75rem; border-bottom: 1px solid var(--cream-10); }
.value:last-child { border-bottom: 0; }
.value__title { margin-bottom: 0.4rem; font-family: var(--font-serif); font-size: 1.25rem; color: var(--cream); }
.value__copy { font-weight: 300; line-height: 1.8; color: var(--cream-60); }

.visit { padding-block: 4rem 5rem; text-align: center; }
.visit__call { font-family: var(--font-serif); font-size: 1.375rem; color: var(--ink-60); }
.visit__call .link-underline { color: var(--ink); }
.visit__hours { margin-top: 2rem; font-size: 0.9375rem; color: var(--ink-60); }
.visit__hours .eyebrow { margin-bottom: 0.4rem; }

/* --- Our Story page: field journal -----------------------------------
   The About page reads like a page from the farm's own ledger: an
   editorial opening with the facts in the margin, the animals and crops
   by name, what the farm holds to, and the ways in. */
.about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-60);
}
.about-kicker::before { content: ""; width: 2rem; height: 1px; background: var(--clay); }
.about-kicker--lit { color: var(--cream-60); }
.about-kicker--lit::before { background: var(--clay-lit); }

/* Hero headline: phones ignore the typed line breaks (see template). */
.about-hero__nowrap { white-space: nowrap; }
@media (max-width: 639px) {
  .about-hero__br { display: none; }
  /* Just small enough that "A boutique-size farm" holds one line on a phone. */
  .about-hero__title { font-size: clamp(1.75rem, 8.4vw, 2.25rem); }
}

/* Opening */
.about-open { padding-block: 5rem 6.5rem; overflow: clip; }
.about-open__grid { display: grid; gap: 4.5rem; align-items: center; }
.about-open__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; max-width: 38rem; }
.about-open__title {
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 4.4vw, 3.375rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.about-open__lead {
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--sage);
  text-wrap: pretty;
}
.about-open__lead::first-letter {
  float: left;
  margin: 0.1em 0.12em 0 -0.03em;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 4.25em;
  line-height: 0.8;
  color: var(--clay);
}
.about-open__body { line-height: 1.9; color: var(--ink-60); text-wrap: pretty; }

.about-facts { width: 100%; margin-top: 0.5rem; border-top: 1px solid var(--ink-10); }
.about-facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--ink-10);
}
.about-facts dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-60);
}
.about-facts dd {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.35;
  font-variant-numeric: lining-nums;
  text-align: right;
}

/* An arched window onto the field, with a hairline echo set behind it. */
.about-open__media {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100% - 1.5rem, 30rem);
  margin: 0 1.5rem 2rem 0;
}
.about-open__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  translate: 1.25rem 1.25rem;
  border: 1px solid var(--clay-40);
  border-radius: 50% 50% 1rem 1rem / 40% 40% 1rem 1rem;
}
.about-open__media img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: 50% 50% 1rem 1rem / 40% 40% 1rem 1rem;
  box-shadow: 0 30px 50px -20px oklch(0.22 0.006 145 / 28%);
  /* A pale sky would otherwise melt the arch into the page. */
  outline: 1px solid var(--ink-10);
  outline-offset: -1px;
}

.about-seal {
  position: absolute;
  left: -1.25rem;
  bottom: -1.75rem;
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--clay);
  color: var(--cream);
  box-shadow: 0 16px 30px -12px oklch(0.615 0.09 45 / 60%);
}
.about-seal > svg { grid-area: 1 / 1; }
.about-seal__ring { width: 100%; height: 100%; }
.about-seal__ring text {
  fill: currentColor;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.about-seal__lily { width: 2.25rem; height: 2.25rem; }

/* Who lives here */
.about-roster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 5.5rem 6rem;
  background: var(--linen);
}
.about-roster::before,
.about-roster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.about-roster::before {
  background:
    radial-gradient(60% 70% at 92% 0%, oklch(0.615 0.09 45 / 14%) 0%, transparent 70%),
    radial-gradient(50% 70% at 0% 100%, oklch(0.49 0.031 145 / 12%) 0%, transparent 70%);
}
.about-roster::after { opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }

.about-roster__head { display: grid; gap: 1.25rem; margin-bottom: 3rem; }
.about-roster__title,
.about-values__title,
.about-close__title {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.about-roster__intro { max-width: 28rem; line-height: 1.8; color: var(--ink-60); }

/* Phones get a swipeable strip; wider screens get the full spread. */
.about-roster__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: 0.875rem;
  margin-inline: -1.5rem;
  padding: 0 1.5rem 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.5rem;
  scrollbar-width: none;
}
.about-roster__grid::-webkit-scrollbar { display: none; }

.about-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 0.875rem;
  background: var(--ink-08);
  scroll-snap-align: start;
}
.about-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.about-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, oklch(0.145 0.016 152 / 78%) 0%, oklch(0.145 0.016 152 / 30%) 32%, transparent 58%);
}
.about-tile:hover img { scale: 1.05; }
.about-tile__cap {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.125rem;
  z-index: 1;
  display: grid;
  gap: 0.2rem;
  color: var(--cream);
  text-shadow: 0 2px 12px oklch(0.145 0.016 152 / 50%);
}
.about-tile__num {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--cream-90);
}
.about-tile__label { font-family: var(--font-serif); font-style: italic; font-size: 1.625rem; line-height: 1.1; }
.about-tile__note { font-size: 0.875rem; font-weight: 300; color: var(--cream-90); }

/* What we believe */
.about-values {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 6rem;
  color: var(--cream);
  background:
    radial-gradient(60rem 26rem at 88% -8%, oklch(0.615 0.09 45 / 18%), transparent 64%),
    radial-gradient(48rem 24rem at 0% 110%, oklch(0.49 0.031 145 / 30%), transparent 64%),
    linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
}
.about-values::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.about-values__head { margin-bottom: 3rem; }
.about-values__list { display: grid; border-top: 1px solid var(--cream-10); }
.about-value {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--cream-10);
}
.about-value__num {
  grid-row: span 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--clay-lit);
}
.about-value__title { margin-bottom: 0.5rem; font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.25; }
.about-value__copy { font-weight: 300; line-height: 1.8; color: var(--cream-60); text-wrap: pretty; }

/* Closing */
.about-close { padding-block: 6rem 6.5rem; }
.about-close__head { display: grid; justify-items: start; gap: 0.25rem; max-width: 40rem; margin-bottom: 3rem; }
.about-close__copy { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.8; color: var(--ink-60); }

.about-doors { display: grid; border-top: 1px solid var(--ink-10); }
.about-door {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas: "num title arrow" "num hint arrow";
  column-gap: 1rem;
  align-items: center;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--ink-10);
}
.about-door::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.about-door__num {
  grid-area: num;
  align-self: start;
  padding-top: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-60);
}
.about-door__title { grid-area: title; font-family: var(--font-serif); font-size: 1.625rem; line-height: 1.2; transition: color 0.25s; }
.about-door__hint { grid-area: hint; font-size: 0.875rem; color: var(--ink-60); }
.about-door__arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ink-30);
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, translate 0.3s;
}
.about-door:hover::before,
.about-door:focus-visible::before { transform: scaleX(1); }
.about-door:hover .about-door__title { color: var(--clay); }
.about-door:hover .about-door__arrow {
  background: var(--ink);
  color: var(--cream);
  box-shadow: inset 0 0 0 1px var(--ink);
  translate: 0.25rem 0;
}

.about-close__call {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-top: 3rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--ink-60);
}
.about-close__phone {
  font-size: 1.5rem;
  font-variant-numeric: lining-nums;
  color: var(--ink);
  border-bottom: 1px solid var(--clay-40);
  transition: color 0.2s, border-color 0.2s;
}
.about-close__phone:hover { color: var(--clay); border-color: var(--clay); }

@media (min-width: 640px) {
  .about-roster__grid {
    grid-auto-flow: row dense;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    grid-auto-rows: 15rem;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .about-tile { aspect-ratio: auto; }
  .about-tile:first-child { grid-column: span 2; grid-row: span 2; }
  .about-tile:first-child .about-tile__label { font-size: 2.25rem; }
  .about-tile:last-child:nth-child(even) { grid-column: span 2; }
  .about-values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .about-seal { width: 9.5rem; height: 9.5rem; left: -2.5rem; bottom: -2.5rem; }
  .about-seal__lily { width: 2.75rem; height: 2.75rem; }
}

@media (min-width: 900px) {
  .about-open { padding-block: 7rem 8rem; }
  .about-open__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; }
  .about-open__media { margin: 0 1.25rem 1.25rem 0; }
  /* Columns size to their contents, so the hours don't wrap next to a lone year. */
  .about-facts { display: flex; border-bottom: 1px solid var(--ink-10); }
  .about-facts__row { display: block; flex: 1 1 auto; padding: 1rem 1.25rem 1.125rem; border-bottom: 0; }
  .about-facts__row:last-child { padding-right: 0; }
  .about-facts__row:first-child { padding-left: 0; }
  .about-facts__row + .about-facts__row { border-left: 1px solid var(--ink-10); }
  .about-facts dt { margin-bottom: 0.35rem; }
  .about-facts dd { text-align: left; }
  .about-roster__head { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; column-gap: 4rem; margin-bottom: 3.5rem; }
  .about-doors { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; }
  .about-door {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "num" "title" "hint" "arrow";
    align-items: start;
    row-gap: 0.4rem;
    height: 100%;
    padding: 1.5rem 1.5rem 1.75rem;
    border-bottom: 0;
    border-top: 1px solid var(--ink-10);
  }
  .about-doors li:first-child .about-door { padding-left: 0; }
  .about-doors li + li .about-door { border-left: 1px solid var(--ink-10); }
  .about-door__num { padding-top: 0; margin-bottom: 1.25rem; }
  .about-door__arrow { margin-top: 1.5rem; }
}

@media (min-width: 1024px) {
  .about-roster__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 16.5rem; gap: 1rem; }
  .about-tile:last-child:nth-child(even) { grid-column: auto; }
  .about-values__head { margin-bottom: 3.5rem; }
  .about-values__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; padding-top: 2.75rem; }
  .about-value {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 2rem;
    border-bottom: 0;
  }
  .about-value:first-child { padding-left: 0; }
  .about-value + .about-value { border-left: 1px solid var(--cream-10); }
  .about-value__num { grid-row: auto; margin-bottom: 1.75rem; font-size: 3.75rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .about-seal__ring { animation: about-turn 40s linear infinite; }
}
@keyframes about-turn { to { rotate: 360deg; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .about-open__media,
    .about-tile,
    .about-value,
    .about-door {
      animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    .about-tile:nth-child(3n + 2),
    .about-value:nth-child(even),
    .about-doors li:nth-child(even) .about-door { animation-range: entry 6% cover 30%; }
  }
}

/* --- Contact page ---------------------------------------------------
   A calling card over the foot of the banner: the number on a dark stub,
   torn along a perforation from the address and hours. Then the reasons to
   ring, set like the Our Story ledger, and a photograph from the gate. */

/* Room under the banner copy for the card to sit over its edge. */
.page-head--calling { padding-bottom: 7.5rem; }

.calling {
  position: relative;
  z-index: 20;
  margin-top: -4.5rem;
  /* The shadow sits on the wrapper so it follows the punched notches. */
  filter: drop-shadow(0 24px 30px oklch(0.22 0.006 145 / 16%)) drop-shadow(0 4px 8px oklch(0.22 0.006 145 / 6%));
}

.calling__card {
  --stub: 26rem;
  --notch: 0.75rem;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 1rem;
  background: oklch(0.975 0.009 80);
}

.calling__stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.25rem 1.5rem 2.5rem;
  color: var(--cream);
  background:
    radial-gradient(30rem 20rem at 0% 0%, oklch(0.615 0.09 45 / 22%), transparent 70%),
    radial-gradient(24rem 16rem at 100% 100%, oklch(0.49 0.031 145 / 26%), transparent 70%),
    var(--night);
}
.calling__stub::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Punched notches either end of the perforation (phones: across the foot). */
.calling__perf {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0;
  border-top: 1px dashed var(--cream-40);
}
.calling__perf::before,
.calling__perf::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(var(--notch) * -1);
  width: calc(var(--notch) * 2);
  height: calc(var(--notch) * 2);
  border-radius: 50%;
  background: var(--cream);
}
.calling__perf::before { left: calc(-1.5rem - var(--notch)); }
.calling__perf::after { right: calc(-1.5rem - var(--notch)); }

.calling__kicker {
  margin-bottom: 0.75rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--clay-lit);
}
.calling__phone {
  font-family: var(--font-serif);
  font-size: clamp(2.125rem, 9.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  color: var(--cream);
  transition: color 0.25s;
}
.calling__phone:hover { color: var(--clay-lit); }
.calling__for {
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cream-60);
}
.calling__btn { gap: 0.6rem; margin-top: 2rem; box-shadow: none; }

.calling__facts { display: grid; padding: 0.5rem 1.5rem; }
.calling__row { padding-block: 1.25rem; }
.calling__row + .calling__row { border-top: 1px solid var(--ink-10); }
.calling__label {
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-60);
}
.calling__value {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.3;
  font-variant-numeric: lining-nums;
}
.calling__city { font-size: 1rem; color: var(--ink-60); }
.calling__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding-bottom: 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  border-bottom: 1px solid var(--clay-40);
  transition: color 0.2s, border-color 0.2s;
}
.calling__link:hover { color: var(--clay); border-color: var(--clay); }
.calling__link svg { transition: translate 0.25s; }
.calling__link:hover svg { translate: 0.1rem -0.1rem; }
.calling__social { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

/* Give us a call about */
.reasons { padding-block: 5rem 5.5rem; }
.reasons__head { display: grid; justify-items: start; margin-bottom: 2.5rem; }
.reasons__title,
.arrive__title {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.reasons__list { display: grid; column-gap: 3rem; }
.reason {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--ink-10);
}
.reason::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 2rem;
  height: 1px;
  background: var(--clay);
  transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.reason:hover::before { width: 100%; }
.reason__num {
  grid-row: span 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--clay);
}
.reason__title { margin-bottom: 0.5rem; font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.25; }
.reason__copy { line-height: 1.8; color: var(--ink-60); text-wrap: pretty; }

/* Finding the farm */
.arrive {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 5rem 5.5rem;
  background: var(--linen);
}
.arrive::before,
.arrive::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.arrive::before {
  background:
    radial-gradient(60% 70% at 100% 100%, oklch(0.615 0.09 45 / 14%) 0%, transparent 70%),
    radial-gradient(50% 70% at 0% 0%, oklch(0.49 0.031 145 / 12%) 0%, transparent 70%);
}
.arrive::after { opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }

.arrive__grid { display: grid; gap: 3.5rem; align-items: center; }
.arrive__media {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100% - 1.25rem, 26rem);
  margin: 0 0 1.25rem 1.25rem;
}
.arrive__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  translate: -1.25rem 1.25rem;
  border: 1px solid var(--clay-40);
  border-radius: 50% 50% 1rem 1rem / 40% 40% 1rem 1rem;
}
.arrive__media img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50% 50% 1rem 1rem / 40% 40% 1rem 1rem;
  box-shadow: 0 30px 50px -20px oklch(0.22 0.006 145 / 28%);
  outline: 1px solid var(--ink-10);
  outline-offset: -1px;
}
.arrive__copy { display: grid; justify-items: start; max-width: 36rem; }
.arrive__body { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.85; color: var(--ink-60); text-wrap: pretty; }
.arrive__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

@media (min-width: 640px) {
  .calling__stub { padding: 2.75rem 2.5rem 3rem; }
  .calling__perf { left: 2.5rem; right: 2.5rem; }
  .calling__perf::before { left: calc(-2.5rem - var(--notch)); }
  .calling__perf::after { right: calc(-2.5rem - var(--notch)); }
  .calling__facts { padding: 0.75rem 2.5rem; }
}

@media (min-width: 900px) {
  .page-head--calling { padding-bottom: 9rem; }
  .calling { margin-top: -5.5rem; }

  .calling__card { grid-template-columns: var(--stub) minmax(0, 1fr); }
  /* Real holes rather than painted dots: the top notch sits over the
     banner photograph, so it has to show the photograph through it. */
  .calling__card:not(.calling__card--no-phone) {
    -webkit-mask:
      radial-gradient(circle var(--notch) at var(--stub) 0, #0000 97%, #000 100%),
      radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 97%, #000 100%);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle var(--notch) at var(--stub) 0, #0000 97%, #000 100%),
      radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 97%, #000 100%);
    mask-composite: intersect;
  }
  .calling__card--no-phone { grid-template-columns: minmax(0, 1fr); }

  .calling__card { --notch: 0.875rem; }
  .calling__stub { justify-content: center; padding: 3rem; }
  .calling__perf {
    left: auto;
    right: 0;
    top: 1.5rem;
    bottom: 1.5rem;
    border-top: 0;
    border-right: 1px dashed var(--cream-40);
  }
  .calling__perf::before,
  .calling__perf::after { display: none; }

  /* The group centres against the stub; the columns keep a shared top line. */
  .calling__facts {
    display: flex;
    align-self: center;
    align-items: stretch;
    padding: 3rem;
  }
  .calling__row { flex: 1 1 auto; padding: 0 2rem; }
  .calling__row:first-child { padding-left: 0; }
  .calling__row:last-child { padding-right: 0; }
  .calling__row + .calling__row { border-top: 0; border-left: 1px solid var(--ink-10); }
  .calling__label { margin-bottom: 0.875rem; }
  .calling__value { font-size: 1.625rem; }
  .calling__city { font-size: 1.0625rem; }

  .reasons { padding-block: 6.5rem 7rem; }
  .reasons__head { margin-bottom: 3.5rem; }
  .reasons__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reasons__list--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reason { grid-template-columns: minmax(0, 1fr); padding-block: 2rem 1rem; }
  .reason__num { grid-row: auto; margin-bottom: 1.5rem; font-size: 3.5rem; }

  .arrive { padding-block: 7rem 7.5rem; }
  .arrive__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6rem; }
  .arrive__grid--text { grid-template-columns: minmax(0, 1fr); }
  .arrive__media { justify-self: end; margin: 0 0 1.25rem 1.25rem; }
}

@media (min-width: 1100px) {
  .calling__card { --stub: 28rem; }
  .calling__phone { font-size: 3rem; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reason,
    .arrive__media,
    .arrive__copy {
      animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    .reason:nth-child(3n + 2),
    .arrive__copy { animation-range: entry 6% cover 30%; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .calling { animation: rise 1s 0.15s cubic-bezier(0.19, 1, 0.22, 1) both; }
}

/* --- Wider viewports ------------------------------------------------ */
@media (min-width: 640px) {
  .schedule { padding: 2.5rem 2.25rem; }
  .schedule__perf { left: 2.25rem; right: 2.25rem; }
  .schedule__actions { flex-direction: row; align-items: center; }
  .class-dates__list { gap: 0.625rem; }
  .class-index { padding: 2rem 2rem 1.5rem; }
}

@media (min-width: 768px) {
  .agenda__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .agenda__grid--single { grid-template-columns: minmax(0, 30rem); justify-content: center; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; }
  .value { border-bottom: 1px solid var(--cream-10); }
  .class-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; padding-block: 4.5rem; }
  .class-card__title { font-size: 2rem; }
  /* Photograph left, then right, then left: the scroll gets a rhythm
     instead of five identical rows. The copy keeps the wide column
     either way — only the sides swap, not the proportions. */
  .class-card:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .class-card:nth-child(even) .class-card__media { order: 2; }
  .class-index__link {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "num name cadence price";
    align-items: baseline;
    gap: 1.5rem;
  }
  .class-index__num { align-self: baseline; padding-top: 0; }
  .class-index__cadence { justify-self: end; text-align: right; }
  .class-index__price { min-width: 7rem; text-align: right; }
  .order-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
  .event-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; padding-block: 5rem; }
  .breadcrumb { padding-block: 2.5rem 0; }
}

@media (min-width: 1024px) {
  .event-lead { gap: 5rem; }
  .depts { gap: 6rem; }
  .class-card { gap: 4rem; }
  .order-steps { padding-top: 3.5rem; }
  .order-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
}

/* --- Missing-photo states ------------------------------------------
   Photography arrives after copy does. Both of these keep the layout
   honest in the meantime rather than letting a gap read as a bug. */
.event-card__media--empty {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--ink-30);
  border-radius: 1rem;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--ink-05) 0 8px,
      transparent 8px 16px
    );
}

/* A section with no photo shouldn't leave half the row empty. */
.menu-section--nomedia { grid-template-columns: minmax(0, 1fr); }
.menu-section--nomedia .soon-note { max-width: 34rem; }
/* An empty, photo-less section sets its name beside the shelf tag on wide
   screens, instead of a narrow stack with half the row left bare. */
@media (min-width: 768px) {
  .menu-section--nomedia.menu-section--empty .menu-section__body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    column-gap: 4rem;
    align-items: start;
  }
  .menu-section--nomedia.menu-section--empty .menu-section__head { grid-column: 1; grid-row: 1; }
  .menu-section--nomedia.menu-section--empty .menu-section__intro { grid-column: 1; grid-row: 2; }
  .menu-section--nomedia.menu-section--empty .soon-note { grid-column: 2; grid-row: 1 / span 2; max-width: none; }
}

/* On a phone the jump bar scrolls sideways; fade the far edge so it looks it. */
@media (max-width: 767px) {
  .dept-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
  }
  .dept-nav__list { padding-inline-end: 1.75rem; }
  .farm-items--solo .farm-item__amount { font-size: 2.75rem; }
}

/* Classes handle this themselves — see .class-card__media--plate. */

/* ------------------------------------------------------------------
   19. Event pages: the almanac leaf

   One page per event, tinted by its season. The photograph carries the
   name; a farm-stand tag on a length of twine hangs over its lower edge
   with when, how much and the way to book; the detail list is a numbered
   programme on a season-coloured band. Season colours are set once on
   .ev and everything below reads them.
------------------------------------------------------------------ */
.ev {
  --ev-accent: var(--clay);
  --ev-accent-lit: var(--clay-lit);
  --ev-wash: var(--linen);
  --ev-glow: oklch(0.615 0.09 45 / 14%);
  --ev-twine: oklch(0.82 0.045 72);
}
.ev--summer {
  --ev-accent: oklch(0.6 0.105 62);
  --ev-accent-lit: oklch(0.84 0.1 82);
  --ev-wash: oklch(0.966 0.026 88);
  --ev-glow: oklch(0.9 0.1 88 / 55%);
}
.ev--spring {
  --ev-accent: var(--sage);
  --ev-accent-lit: oklch(0.8 0.06 140);
  --ev-wash: color-mix(in oklab, var(--sage) 9%, var(--cream));
  --ev-glow: oklch(0.49 0.031 145 / 14%);
}
.ev--winter {
  --ev-accent: var(--clay);
  --ev-accent-lit: oklch(0.86 0.07 78);
  --ev-wash: var(--night-deep);
  --ev-glow: oklch(0.86 0.07 78 / 10%);
}
.ev--year {
  --ev-accent: var(--teal-deep);
  --ev-accent-lit: var(--teal-lit);
  --ev-glow: oklch(0.774 0.124 199.5 / 12%);
}

/* --- Hero: the name set low across the photograph ------------------- */
.ev-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  overflow: hidden;
  min-height: min(44rem, 86svh);
  background:
    radial-gradient(60rem 30rem at 80% 0%, var(--ev-glow), transparent 70%),
    var(--night);
  color: var(--cream);
}
.ev-hero__media { position: absolute; inset: 0; z-index: -1; }
.ev-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ev-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      oklch(0.145 0.016 152 / 88%) 0%,
      oklch(0.145 0.016 152 / 55%) 32%,
      oklch(0.145 0.016 152 / 0%) 68%),
    linear-gradient(to bottom, oklch(0.145 0.016 152 / 45%) 0%, transparent 22%),
    linear-gradient(to right, oklch(0.145 0.016 152 / 35%) 0%, transparent 60%);
}

.ev-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding-block: 1.5rem 7.5rem;
}

.ev-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cream-90);
  text-shadow: 0 1px 8px oklch(0.145 0.016 152 / 50%);
}
.ev-crumb a { border-bottom: 1px solid var(--cream-40); padding-bottom: 0.1rem; transition: border-color 0.2s; }
.ev-crumb a:hover { border-color: var(--cream); }
.ev-crumb span[aria-hidden] { opacity: 0.5; }

.ev-hero__copy { max-width: 46rem; }
.ev-hero__season {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--cream-90);
}
.ev-hero__glyph { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--ev-accent-lit); }
.ev-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.875rem, 9vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  text-shadow: 0 10px 40px oklch(0.145 0.016 152 / 45%);
}
.ev-hero__standfirst {
  max-width: 32rem;
  margin-top: 1.5rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--cream-90);
  text-wrap: pretty;
}

.ev-hero__season,
.ev-hero__title,
.ev-hero__standfirst { animation: rise 1.1s cubic-bezier(0.19, 1, 0.22, 1) both; }
.ev-hero__title { animation-delay: 0.08s; }
.ev-hero__standfirst { animation-delay: 0.18s; }

.ev--nophoto .ev-hero { min-height: 30rem; }

/* --- Opening: the long description beside the tag ------------------- */
.ev-open {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3.5rem;
  padding-block: 0 5rem;
}
.ev-open__copy { display: flex; flex-direction: column; gap: 2.5rem; }

.ev-open__intro {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.ev-open__intro::first-letter {
  float: left;
  margin: 0.4rem 0.7rem 0 0;
  font-size: 4.25em;
  font-style: italic;
  line-height: 0.72;
  color: var(--ev-accent);
}

.ev-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block: 1px solid var(--ink-10);
}
.ev-facts__item { padding-block: 1.1rem; }
.ev-facts__item + .ev-facts__item { border-top: 1px solid var(--ink-10); }
.ev-facts dt {
  margin-bottom: 0.4rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-60);
}
.ev-facts dd { font-family: var(--font-serif); font-size: 1.125rem; }
.ev-facts dd a:not(.link-underline) { border-bottom: 1px solid var(--clay-30); transition: border-color 0.2s; }
.ev-facts dd a:not(.link-underline):hover { border-color: var(--clay); }
.ev-facts .ev-facts__sub {
  margin-top: 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--ink-60);
}

.ev-open__note {
  padding-left: 1.25rem;
  border-left: 2px solid var(--ev-accent);
  font-size: 0.9375rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.75;
  color: var(--ink-60);
}

/* --- The tag -------------------------------------------------------- */
.ev-tag {
  --eyelet-y: 2rem;
  position: relative;
  order: -1;
  width: 100%;
  max-width: 24rem;
  margin: -4.5rem auto 0;
  filter: drop-shadow(0 22px 28px oklch(0.145 0.016 152 / 24%)) drop-shadow(0 2px 3px oklch(0.145 0.016 152 / 12%));
}
.ev-tag__twine {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--eyelet-y));
  width: 2.5rem;
  height: 3.5rem;
  translate: -50% 0;
  overflow: visible;
}
.ev-tag__twine path {
  fill: none;
  stroke: var(--ev-twine);
  stroke-width: 2.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.ev-tag__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 4.25rem 1.75rem 1.25rem;
  color: var(--ink);
  background-color: oklch(0.935 0.028 76);
  background-image:
    radial-gradient(120% 60% at 50% 0%, oklch(0.988 0.005 85 / 55%), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  clip-path: polygon(3.25rem 0, calc(100% - 3.25rem) 0, 100% 3.25rem, 100% 100%, 0 100%, 0 3.25rem);
  -webkit-mask: radial-gradient(circle at 50% var(--eyelet-y), transparent 0.4rem, #000 0.44rem);
  mask: radial-gradient(circle at 50% var(--eyelet-y), transparent 0.4rem, #000 0.44rem);
}
/* A brass eyelet round the punched hole. */
.ev-tag__eyelet {
  position: absolute;
  top: calc(var(--eyelet-y) - 0.8rem);
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  translate: -50% 0;
  border-radius: 50%;
  border: 0.34rem solid oklch(0.76 0.075 78);
  box-shadow: inset 0 1px 1px oklch(0.988 0.005 85 / 60%), 0 1px 1px oklch(0.22 0.006 145 / 25%);
}

.ev-tag__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
}
.ev-tag__glyph { width: 1.75rem; height: 1.75rem; color: var(--ev-accent); }

.ev-tag__block {
  padding-block: 1.25rem;
  border-top: 1px dashed oklch(0.22 0.006 145 / 22%);
}
.ev-tag__label {
  margin-bottom: 0.45rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-60);
}
.ev-tag__date,
.ev-tag__price {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ev-tag__price { font-size: 1.5rem; }
.ev-tag__date--soon { font-style: italic; }
.ev-tag__sub { margin-top: 0.3rem; font-size: 0.875rem; font-weight: 300; color: var(--ink-60); }
.ev-tag__note {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.65;
  color: oklch(0.22 0.006 145 / 72%);
}

.ev-tag__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px dashed oklch(0.22 0.006 145 / 22%);
  text-align: center;
}
.ev-tag__btn { justify-content: center; transition: background-color 0.3s, color 0.3s, transform 0.3s; }
.ev-tag__btn:hover { transform: translateY(-1px); }
.ev-tag__call {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-60);
  transition: color 0.2s;
}
.ev-tag__call:hover { color: var(--ink); }

.ev-tag__stamp {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid oklch(0.22 0.006 145 / 12%);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-60);
}

/* --- Programme: the detail list on the season's band ---------------- */
.ev-programme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 5rem;
  background: var(--ev-wash);
}
.ev-programme::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50rem 28rem at 88% 0%, var(--ev-glow), transparent 70%),
    radial-gradient(40rem 30rem at 0% 100%, oklch(0.49 0.031 145 / 7%), transparent 70%);
}

.ev-programme__inner { display: grid; gap: 3rem; }
.ev-programme__head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.ev-programme__glyph { width: 2.5rem; height: 2.5rem; color: var(--ev-accent); }
.ev-programme__title {
  max-width: 14ch;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  text-wrap: balance;
}
.ev-programme__media { margin-top: 1rem; width: 100%; max-width: 20rem; }
.ev-programme__media img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: 9999px 9999px 1rem 1rem;
}

.ev-programme__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 3.5rem;
  counter-reset: ev;
}
.ev-item {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: baseline;
  padding-block: 1.75rem 2rem;
  border-top: 1px solid var(--ink-10);
}
.ev-item__num {
  grid-row: span 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.25rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--ev-accent);
}
.ev-item__title { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.3; }
.ev-item__copy {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-60);
}

/* Winter's band is the lane after dark, with lights strung across the top. */
.ev--winter .ev-programme { color: var(--cream); padding-top: 7rem; }
.ev--winter .ev-programme::before {
  background:
    radial-gradient(50rem 26rem at 50% 0%, oklch(0.86 0.07 78 / 10%), transparent 70%),
    radial-gradient(40rem 30rem at 100% 100%, oklch(0.49 0.031 145 / 18%), transparent 70%);
}
.ev--winter .ev-item { border-color: var(--cream-10); }
.ev--winter .ev-item__num { color: var(--ev-accent-lit); }
.ev--winter .ev-item__copy { color: oklch(0.988 0.005 85 / 68%); }
.ev--winter .ev-programme__glyph { color: var(--ev-accent-lit); }

.ev-programme__lights,
.ev-programme__lights::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3rem;
  background-repeat: repeat-x;
  background-size: 160px 48px;
  pointer-events: none;
}
.ev-programme__lights {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48'%3E%3Cpath d='M0 4Q40 34 80 4T160 4' fill='none' stroke='%23fdfaf3' stroke-opacity='.28' stroke-width='1'/%3E%3Cg fill='%23f6dca6'%3E%3Ccircle cx='20' cy='20' r='7' opacity='.16'/%3E%3Ccircle cx='20' cy='20' r='2.6'/%3E%3Ccircle cx='100' cy='20' r='7' opacity='.16'/%3E%3Ccircle cx='100' cy='20' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}
.ev-programme__lights::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48'%3E%3Cg fill='%23ffe9bd'%3E%3Ccircle cx='60' cy='20' r='8' opacity='.2'/%3E%3Ccircle cx='60' cy='20' r='2.6'/%3E%3Ccircle cx='40' cy='23' r='6' opacity='.12'/%3E%3Ccircle cx='40' cy='23' r='2.2'/%3E%3Ccircle cx='140' cy='20' r='8' opacity='.2'/%3E%3Ccircle cx='140' cy='20' r='2.6'/%3E%3Ccircle cx='120' cy='23' r='6' opacity='.12'/%3E%3Ccircle cx='120' cy='23' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Further on in the year ----------------------------------------- */
.ev-more { padding-block: 5rem 6rem; }
.ev-more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink-10);
}
.ev-more__title { font-family: var(--font-serif); font-size: clamp(1.875rem, 4vw, 2.5rem); }
.ev-more__all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-bottom: 1px solid var(--clay-40);
  padding-bottom: 0.2rem;
  transition: border-color 0.2s, gap 0.3s;
}
.ev-more__all svg { width: 0.9rem; height: 0.9rem; }
.ev-more__all:hover { border-color: var(--clay); gap: 0.8rem; }

.ev-more__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 2rem; }
.ev-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.ev-card__media {
  width: 100%;
  margin-bottom: 0.6rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--linen);
}
.ev-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.ev-card:hover .ev-card__media img { transform: scale(1.045); }
.ev-card__media--empty { display: grid; place-items: center; color: var(--clay); }
.ev-card__placeholder { width: 3rem; height: 3rem; }
.ev-card__season {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-60);
}
.ev-card__glyph { width: 1rem; height: 1rem; color: var(--clay); }
.ev-card__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  background: linear-gradient(var(--clay), var(--clay)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.ev-card:hover .ev-card__title { background-size: 100% 1px; }

/* --- Invitation layout under the new hero --------------------------- */
.ev--invitation .ev-hero__inner { padding-bottom: 9rem; }
.ev--invitation .invite { position: relative; z-index: 2; margin-top: -6rem; padding-top: 0; }
.ev--invitation .invite__card { box-shadow: 0 30px 60px -20px oklch(0.145 0.016 152 / 35%); }

/* --- Wider viewports ------------------------------------------------ */
@media (min-width: 640px) {
  .ev-hero__standfirst { font-size: 1.25rem; }
  .ev-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ev-facts__item { padding: 1.1rem 1.25rem; }
  .ev-facts__item:first-child { padding-left: 0; }
  .ev-facts__item + .ev-facts__item { border-top: 0; border-left: 1px solid var(--ink-10); }
  .ev-programme__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ev-hero { min-height: min(46rem, 82vh); }
  .ev-hero__inner { padding-block: 2rem 6rem; }
  .ev-hero__copy { max-width: calc(100% - 28rem); }

  .ev-open {
    grid-template-columns: minmax(0, 1fr) 22rem;
    column-gap: 6rem;
    padding-block: 5rem 6.5rem;
  }
  .ev-open__intro { font-size: 1.625rem; }

  /* Hung from the photograph: pulled up over its edge, twine running into it. */
  .ev-tag {
    order: 0;
    align-self: start;
    max-width: none;
    margin: -15rem 0 0;
    transform-origin: 50% -7rem;
    rotate: 2deg;
    transition: rotate 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .ev-tag:hover { rotate: 0.5deg; }
  .ev-tag__twine { height: 9rem; }

  .ev-programme { padding-block: 7rem; }
  .ev--winter .ev-programme { padding-top: 8.5rem; }
  .ev-programme__inner { grid-template-columns: 19rem minmax(0, 1fr); column-gap: 5rem; }
  .ev-item__num { font-size: 2.75rem; }
  .ev-item__title { font-size: 1.5rem; }

  .ev-more__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 1024px) {
    .ev-tag { animation: ev-sway 2.4s cubic-bezier(0.3, 0.7, 0.4, 1) 0.3s both; }
  }
  .ev-programme__lights::after { animation: ev-twinkle 2.8s ease-in-out infinite alternate; }
}
@keyframes ev-sway {
  0% { rotate: -7deg; }
  30% { rotate: 6deg; }
  55% { rotate: 0deg; }
  78% { rotate: 3.5deg; }
  100% { rotate: 2deg; }
}
@keyframes ev-twinkle {
  from { opacity: 1; }
  to { opacity: 0.25; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ev-item,
    .ev-card {
      animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    .ev-item:nth-child(even),
    .ev-more__list li:nth-child(3n + 2) .ev-card { animation-range: entry 6% cover 28%; }
  }
}

/* ------------------------------------------------------------------
   19a. Farm Camp: the event leaf, plus the weeks and the snapshots

   Everything else on the page is .ev-*. The tag lists the camp weeks
   where an event has dates, and past camps are pinned up below the
   programme as prints, each held on with a strip of the season's tape.
------------------------------------------------------------------ */
.camp-weeks { margin-top: 0.15rem; }
.camp-weeks__week {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.45rem;
}
.camp-weeks__week + .camp-weeks__week { border-top: 1px dotted oklch(0.22 0.006 145 / 20%); }
.camp-weeks__name { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.2; }
.camp-weeks__dates {
  font-size: 0.8125rem;
  font-weight: 300;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-60);
}
.camp-weeks__shared { margin-top: 0.75rem; font-style: italic; }
.ev--camp .ev-open__note strong { white-space: nowrap; font-weight: 500; }

/* The goat's face is low and just right of centre in the camp photo, so the
   hero keeps the bottom of the frame and shades the left, where the title
   sits, rather than darkening the whole foot of the picture. */
.ev--camp .ev-hero__media::after {
  background:
    linear-gradient(to right,
      oklch(0.145 0.016 152 / 72%) 0%,
      oklch(0.145 0.016 152 / 45%) 32%,
      oklch(0.145 0.016 152 / 0%) 58%),
    linear-gradient(to top, oklch(0.145 0.016 152 / 40%) 0%, oklch(0.145 0.016 152 / 0%) 30%),
    linear-gradient(to bottom, oklch(0.145 0.016 152 / 45%) 0%, transparent 22%);
}
.ev--camp .ev-hero__media picture { display: contents; }
/* On very wide screens the usual 46rem cap turns the hero into a letterbox
   that slices through the goat, so camp's hero grows with the width. */
@media (min-width: 1024px) {
  .ev--camp .ev-hero { min-height: min(max(46rem, 50vw), 82vh); }
  .ev--camp .ev-hero__media img { object-position: 50% 85%; }
}
/* Below the desktop layout the hero swaps to the narrow crop (see the
   template), which already has the goat's face in its top half. */
@media (max-width: 1023px) {
  .ev--camp .ev-hero__media img { object-position: 50% 20%; }
}
@media (max-width: 639px) {
  .ev--camp .ev-hero__media::after {
    background:
      linear-gradient(to top,
        oklch(0.145 0.016 152 / 85%) 0%,
        oklch(0.145 0.016 152 / 50%) 38%,
        oklch(0.145 0.016 152 / 0%) 62%),
      linear-gradient(to bottom, oklch(0.145 0.016 152 / 45%) 0%, transparent 22%);
  }
}

/* --- Snapshots ------------------------------------------------------ */
.camp-snaps { padding-block: 6rem 1rem; overflow: hidden; }
.camp-snaps__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink-10);
}
.camp-snaps__title { font-family: var(--font-serif); font-size: clamp(1.875rem, 4vw, 2.5rem); }
.camp-snaps__copy {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink-60);
}

/* A phone gets a swipeable strip of prints; wider screens pin them up. */
.camp-snaps__board {
  display: flex;
  gap: 1.5rem;
  padding-block: 2.75rem 2.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.camp-snaps__board::-webkit-scrollbar { display: none; }
.camp-snap { --tilt: -1.5deg; flex: 0 0 74%; scroll-snap-align: center; }
.camp-snap:nth-child(even) { --tilt: 1.25deg; }
.camp-snap:nth-child(3n) { --tilt: -0.5deg; }

.camp-snap__print {
  position: relative;
  padding: 0.7rem 0.7rem 0;
  background: oklch(0.993 0.004 85);
  box-shadow:
    0 1px 2px oklch(0.22 0.006 145 / 14%),
    0 22px 32px -16px oklch(0.145 0.016 152 / 32%);
  rotate: var(--tilt);
  transition: rotate 0.7s cubic-bezier(0.19, 1, 0.22, 1), translate 0.7s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.7s;
}
.camp-snap__print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Tape across the top edge, torn at both ends. */
.camp-snap__print::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 50%;
  z-index: 1;
  width: 6rem;
  height: 1.6rem;
  translate: -50% 0;
  rotate: calc(var(--tilt) * -2.5);
  background:
    linear-gradient(to bottom, oklch(0.988 0.005 85 / 35%), transparent 45%),
    color-mix(in oklab, var(--ev-accent-lit) 80%, transparent);
  box-shadow: 0 1px 1px oklch(0.22 0.006 145 / 8%);
  clip-path: polygon(3% 0, 97% 0, 100% 20%, 96% 42%, 100% 62%, 95% 82%, 98% 100%, 2% 100%, 0 78%, 4% 58%, 0 38%, 5% 18%);
}
.camp-snap__caption {
  padding: 0.85rem 0.25rem 1.1rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
.camp-snap:hover .camp-snap__print {
  rotate: 0deg;
  translate: 0 -0.35rem;
  box-shadow:
    0 1px 2px oklch(0.22 0.006 145 / 14%),
    0 30px 40px -18px oklch(0.145 0.016 152 / 38%);
}

/* The programme band sits right above; the sign-up panel closes the camp
   and the "further on" list follows it, so it drops its own foot margin. */
.camp-cta { margin-bottom: 0; }

@media (min-width: 768px) {
  .camp-snaps { padding-block: 7rem 2rem; }
  .camp-snaps__board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem 3rem;
    padding-block: 3.5rem 2rem;
    overflow: visible;
  }
  .camp-snap { --tilt: -2deg; }
  .camp-snap:nth-child(even) { --tilt: 1.75deg; }
  .camp-snap:nth-child(3n) { --tilt: -0.75deg; }
  .camp-snap:nth-child(3n + 2) { margin-top: 3rem; }
  .camp-snap:nth-child(3n) { margin-top: 1rem; }
}
@media (min-width: 1024px) {
  .camp-snaps__board { gap: 4rem 4.5rem; }
  .camp-snap__caption { font-size: 1.1875rem; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .camp-snap {
      animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    .camp-snap:nth-child(3n + 2) { animation-range: entry 6% cover 30%; }
  }
}


/* ------------------------------------------------------------------
   20. Gift Guide: Christmas as a gift finder

   The winter event leaf (hero, tag, night band with the string of
   lights) carrying a finder instead of a programme: pick a person, see
   what was made for them. Cards are cream on the night band so a gift
   reads like something taken down off the shelf.
------------------------------------------------------------------ */
.gifts-facts { border-top: 0; }
/* A sentence rather than an event name, so it runs a size down. */
.gifts .ev-hero__title { font-size: clamp(2.5rem, 7vw, 5.25rem); }

.finder {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 7rem 5.5rem;
  background: var(--night-deep);
  color: var(--cream);
}
.finder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50rem 26rem at 50% 0%, oklch(0.86 0.07 78 / 10%), transparent 70%),
    radial-gradient(40rem 30rem at 100% 100%, oklch(0.49 0.031 145 / 18%), transparent 70%);
}

.finder__head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; max-width: 40rem; }
.finder__glyph { width: 2.5rem; height: 2.5rem; color: var(--ev-accent-lit); }
.finder__title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  text-wrap: balance;
}
.finder__intro {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  color: oklch(0.988 0.005 85 / 72%);
  text-wrap: pretty;
}

/* The people, as a row of tags to pick from. */
.finder__people { margin-block: 2.75rem 3.5rem; }
.finder__chips { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.finder__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--cream-40);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cream-90);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.finder__chip:hover { box-shadow: inset 0 0 0 1px var(--cream); color: var(--cream); }
.finder__chip[aria-current="true"] {
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--cream);
  color: var(--ink);
}
.finder__chip:focus-visible { outline-color: var(--ev-accent-lit); }

.finder__panels { display: flex; flex-direction: column; gap: 4.5rem; }
.finder__panel { scroll-margin-top: 2rem; }
.finder__panel[hidden] { display: none; }
.finder__panel-head {
  position: relative;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cream-10);
}
.finder__panel-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 3rem;
  height: 1px;
  background: var(--ev-accent-lit);
}
.finder__panel-title { font-family: var(--font-serif); font-size: 2rem; line-height: 1.1; }
.finder__panel-copy {
  max-width: 36rem;
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: oklch(0.988 0.005 85 / 68%);
}

/* A gift: photo, status, name, what it is, price and the one thing to do. */
.gift-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.gift-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 30px 40px -28px oklch(0.145 0.016 152 / 80%);
}
.gift-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--linen); }
.gift-card__media img { width: 100%; height: 100%; object-fit: cover; }
.gift-card__media--empty { display: grid; place-items: center; color: var(--clay); }
.gift-card__placeholder { width: 3rem; height: 3rem; }
.gift-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.5rem 1.5rem 1.625rem;
}
.gift-card__name { margin-top: 0.25rem; font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; }
.gift-card__detail { font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: var(--ink-60); }
.gift-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--ink-10);
}
.gift-card__detail + .gift-card__foot { margin-top: 0.4rem; }
.gift-card__price { font-family: var(--font-serif); font-size: 1.375rem; font-style: italic; color: var(--clay); }
.gift-card__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--clay);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: color 0.2s;
}
.gift-card__cta:hover { color: var(--clay); }
.gift-card--gone .gift-card__media img { filter: grayscale(0.6); opacity: 0.7; }
.gift-card--gone .gift-card__name { color: var(--ink-60); }

/* Nobody has made anything for this person yet: a stitched tag saying so. */
.finder__soon {
  display: grid;
  gap: 1.75rem;
  max-width: 44rem;
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
  background: oklch(0.988 0.005 85 / 5%);
  outline: 1px dashed oklch(0.86 0.07 78 / 35%);
  outline-offset: -0.5rem;
}
.finder__soon-media img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 0.5rem; }
.finder__soon-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; }
.finder__soon-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ev-accent-lit);
}
.finder__soon-copy {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.6;
}
.finder__soon-call {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--cream-40);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: border-color 0.2s;
}
.finder__soon-call:hover { border-color: var(--cream); }

/* Before anything is made: one note for everyone, then the people as a
   short preview rather than six copies of the same "not yet". */
.finder__soon--all { margin-bottom: 3.5rem; }
.finder__panels--preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 3rem; }
.finder__panels--preview .finder__panel-head { margin-bottom: 0; }
.finder__panels--preview .finder__panel-title { font-size: 1.75rem; }
.finder__panel-media img { aspect-ratio: 4 / 3; width: 100%; margin-bottom: 1.25rem; object-fit: cover; border-radius: 0.75rem; }

.gifts-close .order-steps { border-top: 0; }

@media (min-width: 640px) {
  .gifts-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gift-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finder__panels--preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .finder__soon:has(.finder__soon-media) { grid-template-columns: 12rem minmax(0, 1fr); align-items: center; }
  .gifts-close { padding-inline: 2.5rem; }
}
@media (min-width: 1024px) {
  .finder { padding-block: 8.5rem 7rem; }
  .finder__panel-title { font-size: 2.5rem; }
  .finder__panels--preview .finder__panel-title { font-size: 2rem; }
  .gift-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .finder__panels--preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gift-card,
    .finder__soon {
      animation: rise 1s cubic-bezier(0.19, 1, 0.22, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}

/* --- Event: Good to know ---------------------------------------------
   The practical questions, set as a quiet two-column list after the
   programme. Questions in the serif, answers in the light body weight. */
.ev-faq { padding-block: 4.5rem 1rem; }
.ev-faq__inner { display: grid; gap: 2rem; }
.ev-faq__title {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1.1;
  text-wrap: balance;
}
.ev-faq__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 3.5rem;
  margin: 0;
}
.ev-faq__item {
  padding-block: 1.5rem 1.75rem;
  border-top: 1px solid var(--ink-10);
}
.ev-faq__q { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.35; }
.ev-faq__a {
  margin: 0.5rem 0 0;
  max-width: 60ch;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-60);
}
@media (min-width: 48rem) {
  .ev-faq__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
  .ev-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Footer privacy link, sized with the copyright line it sits in. */
.site-footer__copyright a { color: inherit; text-decoration: underline; text-underline-offset: 0.3em; }
.site-footer__copyright a:hover,
.site-footer__copyright a:focus-visible { color: var(--cream); }