/* Botanical conservatory — lush layered greens on soft cream, delicate serif
   display type, thin botanical rules, plant-label cards, calm pacing,
   gentle fade reveals only. */

:root {
  --cream: #f4efe1;
  --paper: #fbf8ec;
  --sage: #e5ebd6;
  --ink: #20402d;
  --ink-soft: #51695a;
  --green: #3d7050;
  --green-deep: #29523a;
  --green-dark: #14291c;
  --gold: #c9a961;
  --gold-soft: #e2d3a8;
  --line: #cfd5c2;
  --white-line: rgba(244, 239, 225, 0.32);
  --container: 1248px;
  --gutter: 48px;
  --radius: 4px;
  --header-height: 76px;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Outfit", "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--cream);
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--gold-soft);
  color: var(--ink);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 30;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 248, 236, 0.92);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: grid;
  min-height: var(--header-height);
  grid-template-columns: minmax(200px, 1fr) auto auto;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  max-width: 250px;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.12;
  text-decoration: none;
}

.brand-mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 0 999px 0 999px;
  background: var(--green);
  transform: rotate(-8deg);
  transition: transform 300ms ease;
}

.brand:hover .brand-mark {
  transform: rotate(6deg);
}

.brand span {
  max-width: 180px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.desktop-nav a,
.menu-link {
  text-decoration: none;
}

.desktop-nav a {
  padding-block: 8px;
  color: var(--ink-soft);
  transition: color 180ms ease;
}

.desktop-nav a:hover {
  color: var(--ink);
}

.desktop-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
}

.desktop-nav a:hover,
.footer a:hover,
.text-link:hover {
  text-decoration-thickness: 0.12em;
}

.header-action,
.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--green-deep);
  border-radius: 999px;
  padding: 11px 22px;
  background: var(--green-deep);
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.header-action {
  border-color: rgba(32, 64, 45, 0.4);
  background: transparent;
  color: var(--ink);
}

.header-action:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--cream);
  transform: translateY(-1px);
}

.button:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-1px);
}

.button--light {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

.button--light:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--ink);
}

.button--outline {
  background: transparent;
  border-color: rgba(32, 64, 45, 0.5);
  color: var(--ink);
}

.button--outline:hover {
  background: rgba(61, 112, 80, 0.1);
  border-color: var(--green-deep);
  color: var(--green-deep);
}

.hero .button--outline,
.page-intro .button--outline,
.garden-band .button--outline,
.section--green .button--outline,
.callout .button--outline,
.info-card--green .button--outline {
  border-color: rgba(244, 239, 225, 0.7);
  color: var(--cream);
}

.hero .button--outline:hover,
.page-intro .button--outline:hover,
.garden-band .button--outline:hover,
.section--green .button--outline:hover,
.callout .button--outline:hover,
.info-card--green .button--outline:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

.menu-toggle {
  display: none;
  min-height: 44px;
  border: 1px solid rgba(32, 64, 45, 0.4);
  border-radius: 999px;
  padding: 9px 14px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  padding: 18px 0 22px;
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}

.mobile-menu a {
  display: block;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.mobile-menu .menu-note {
  grid-column: 1 / -1;
  border: 0;
  padding-top: 18px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* --- Photo heroes ----------------------------------------------------- */

.hero,
.page-intro {
  position: relative;
  overflow: hidden;
  background: var(--green-dark);
  color: var(--cream);
}

.hero-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Faces and subjects sit high in the source frames; nudge the crop to keep them. */
.media-top {
  object-position: 50% 20%;
}

.hero::after,
.page-intro::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(97deg, rgba(16, 33, 22, 0.92) 6%, rgba(16, 33, 22, 0.74) 40%, rgba(16, 33, 22, 0.3) 74%, rgba(16, 33, 22, 0.45) 100%),
    linear-gradient(to top, rgba(16, 33, 22, 0.62), rgba(16, 33, 22, 0) 46%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: clamp(600px, 86vh, 800px);
  align-items: center;
  padding-block: 90px;
}

.hero-copy {
  max-width: 780px;
}

.eyebrow,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before,
.kicker::before {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M15%201C7%201%201%207%201%2015c8%200%2014-6%2014-14z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M15%201C7%201%201%207%201%2015c8%200%2014-6%2014-14z'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
}

.hero .eyebrow,
.page-intro .eyebrow,
.section--green .kicker,
.callout .kicker,
.split-panel--green .kicker,
.info-card--green .kicker {
  color: var(--gold-soft);
}

.hero h1,
.page-intro h1 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.6rem, 7.2vw, 7.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
}

.hero-lede {
  max-width: 46ch;
  margin: 26px 0 0;
  color: var(--cream);
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 300;
  line-height: 1.55;
}

.hero-actions,
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-note {
  display: flex;
  max-width: 460px;
  align-items: flex-start;
  gap: 12px;
  margin-top: 38px;
  color: rgba(244, 239, 225, 0.75);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

.hero-note::before {
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  margin-top: 0.7em;
  background: var(--gold);
  content: "";
}

.hero-credit {
  position: absolute;
  z-index: 2;
  right: max(20px, calc((100% - var(--container)) / 2));
  bottom: 14px;
  max-width: min(520px, 72%);
  margin: 0;
  color: rgba(244, 239, 225, 0.66);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: right;
}

.page-intro {
  background: var(--green-deep);
}

.page-intro--photo {
  background: var(--green-dark);
}

.page-intro-inner {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: clamp(440px, 58vh, 560px);
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  align-items: end;
  align-content: center;
  gap: 60px;
  padding-block: 76px;
}

.breadcrumb {
  margin: 0 0 22px;
  color: rgba(244, 239, 225, 0.72);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.breadcrumb a {
  text-decoration-color: rgba(244, 239, 225, 0.5);
}

.page-intro h1 {
  max-width: 12ch;
  font-size: clamp(3.2rem, 6.2vw, 6rem);
  line-height: 1.03;
}

.page-intro-copy {
  max-width: 48ch;
  margin: 0;
  color: rgba(244, 239, 225, 0.86);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.58;
}

.page-intro .action-row {
  margin-top: 26px;
}

/* --- Sections ---------------------------------------------------------- */

.section {
  padding-block: 96px;
}

.section--tight {
  padding-block: 64px;
}

.section--green {
  background: var(--green-deep);
  color: var(--cream);
}

.section--pale {
  background: var(--sage);
}

.section--paper {
  background: var(--paper);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 0.95fr);
  align-items: end;
  gap: 42px;
  margin-bottom: 50px;
}

.section-heading h2,
.panel h2,
.split-copy h2,
.page-section h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3.9vw, 4.1rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.section-heading p,
.panel > p,
.split-copy > p,
.page-section > p {
  max-width: 55ch;
  margin: 0;
  color: var(--ink-soft);
}

.section--green .section-heading p,
.section--green .panel > p,
.section--green .split-copy > p,
.section--green .page-section > p,
.section--green .page-section-heading > div > p {
  color: rgba(244, 239, 225, 0.82);
}

/* --- Home guide --------------------------------------------------------- */

.guide-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 54px;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.guide-shell::after {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(32, 64, 45, 0.12);
  content: "";
  pointer-events: none;
}

.guide-marker {
  position: sticky;
  top: calc(var(--header-height) + 30px);
  display: grid;
  min-height: 270px;
  place-items: center;
  align-content: center;
  gap: 20px;
  background: var(--sage);
}

.guide-marker img {
  width: min(200px, 80%);
  transform: rotate(-8deg);
  transition: transform 300ms ease;
}

.guide-marker[data-guide-state="insect-world"] img {
  transform: rotate(6deg) scale(0.92);
}

.guide-marker[data-guide-state="visit"] img {
  transform: rotate(0deg) scale(0.86);
}

.guide-marker p {
  max-width: 18ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}

.guide-list {
  border-top: 1px solid var(--line);
}

.guide-list details {
  border-bottom: 1px solid var(--line);
}

.guide-list summary {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

.guide-list summary::-webkit-details-marker {
  display: none;
}

.guide-list summary::after {
  flex: 0 0 auto;
  color: var(--green);
  content: "+";
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.guide-list details[open] summary::after {
  content: "−";
}

.guide-title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
}

.guide-number {
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.guide-body {
  max-width: 62ch;
  padding: 0 50px 26px 42px;
  color: var(--ink-soft);
  font-size: 16px;
}

.guide-body p {
  margin: 0;
}

.guide-body .text-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* --- Plant-label cards -------------------------------------------------- */

.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.split-panel,
.panel,
.info-card,
.link-panel {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper);
}

.split-panel::after,
.info-card::after,
.link-panel::after {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(32, 64, 45, 0.1);
  content: "";
  pointer-events: none;
}

.split-panel {
  display: flex;
  min-height: 440px;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  color: var(--ink);
}

.split-panel--green,
.info-card--green {
  border-color: rgba(244, 239, 225, 0.25);
  background: var(--green-deep);
  color: var(--cream);
}

.split-panel--green::after,
.info-card--green::after {
  border-color: rgba(244, 239, 225, 0.16);
}

.split-panel-media {
  margin: 0 0 24px;
  border: 1px solid var(--line);
}

.split-panel--green .split-panel-media {
  border-color: rgba(244, 239, 225, 0.28);
}

.split-panel-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.split-panel > div {
  padding: 0 8px;
}

.panel-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.split-panel--green .panel-label {
  color: var(--gold-soft);
}

.split-panel h3 {
  max-width: 10ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3.4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

.split-panel--green h3 {
  color: var(--cream);
}

.split-panel p {
  max-width: 40ch;
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
}

.split-panel--green p {
  color: rgba(244, 239, 225, 0.82);
}

.split-panel .text-link {
  display: inline-block;
  margin: 24px 8px 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.split-panel .text-link:hover,
.split-panel .text-link:focus-visible {
  color: var(--green-deep);
}

.split-panel--green .text-link,
.split-panel--green .text-link:hover,
.split-panel--green .text-link:focus-visible {
  color: var(--cream);
}

.split-panel--green .text-link:focus-visible {
  outline-color: var(--cream);
}

/* --- Numbered editorial columns ----------------------------------------- */

.numbered-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.numbered-item {
  min-height: 220px;
  padding: 26px 28px 32px 0;
  border-right: 1px solid var(--line);
}

.numbered-item + .numbered-item {
  padding-left: 28px;
}

.numbered-item:last-child {
  border-right: 0;
}

.numbered-item span {
  display: block;
  margin-bottom: 42px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.numbered-item h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.12;
}

.numbered-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.section--green .numbered-item span {
  color: var(--gold-soft);
}

.section--green .numbered-item p {
  color: rgba(244, 239, 225, 0.82);
}

.event-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 0.9fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.event-band > * {
  padding: 34px;
  background: var(--paper);
}

.event-band h2 {
  max-width: 8ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.6vw, 3.7rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.04;
}

.event-band h3 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0;
}

.event-band p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.text-link {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* --- Essentials ---------------------------------------------------------- */

.essentials {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 70px;
}

.essentials h2 {
  max-width: 8ch;
}

.essentials-copy p {
  max-width: 46ch;
  margin: 20px 0 0;
  color: var(--ink-soft);
}

.essentials-list {
  border-top: 1px solid var(--line);
}

.essentials-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.essentials-row dt {
  color: var(--green);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.essentials-row dd {
  margin: 0;
  font-size: 16px;
}

/* --- Inner-page sections -------------------------------------------------- */

.page-section {
  padding-block: 84px;
}

.page-section + .page-section {
  border-top: 1px solid var(--line);
}

.page-section-heading {
  display: grid;
  grid-template-columns: minmax(230px, 0.65fr) minmax(0, 1.35fr);
  align-items: start;
  gap: 56px;
  margin-bottom: 46px;
}

.page-section-heading h2 {
  max-width: 11ch;
}

.page-section-heading > div > p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-soft);
}

.page-section-heading > div > p + p {
  margin-top: 16px;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.fact-card {
  position: relative;
  min-height: 170px;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.fact-card::after {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(32, 64, 45, 0.1);
  content: "";
  pointer-events: none;
}

.fact-card small,
.field-card small {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fact-card small::before,
.field-card small::before {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M15%201C7%201%201%207%201%2015c8%200%2014-6%2014-14z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M15%201C7%201%201%207%201%2015c8%200%2014-6%2014-14z'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
}

.fact-card h3 {
  max-width: 22ch;
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.12;
}

.fact-card p {
  max-width: 52ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

/* --- Field notes: macro portrait crops framed like plant labels -------------- */

.field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.field-card {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.field-card::after {
  position: absolute;
  inset: 7px;
  z-index: 1;
  border: 1px solid rgba(32, 64, 45, 0.14);
  content: "";
  pointer-events: none;
}

.field-media {
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
}

.field-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Crop windows center each subject, checked against the source frames. */
.field-card:nth-child(1) .field-media img {
  object-position: 30% 50%;
}

.field-card:nth-child(2) .field-media img {
  object-position: 22% 45%;
}

.field-card:nth-child(3) .field-media img {
  object-position: 50% 45%;
}

.field-body {
  padding: 24px 24px 28px;
}

.field-body small {
  margin-bottom: 14px;
}

.field-card h3 {
  max-width: 20ch;
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.12;
}

.field-card p {
  max-width: 40ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.info-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 22px;
}

.info-card {
  padding: 32px;
  color: var(--ink);
}

.info-card h3 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
}

.info-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
}

.info-card--green p {
  color: rgba(244, 239, 225, 0.82);
}

.info-card--green .text-link,
.info-card--green .text-link:hover,
.info-card--green .text-link:focus-visible {
  color: var(--cream);
}

.info-card--green .text-link:focus-visible {
  outline-color: var(--cream);
}

.info-card--green .button:focus-visible {
  outline-color: var(--cream);
}

.info-card address {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: 23px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.28;
}

.info-card .action-row {
  margin-top: 24px;
}

.rule-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rule-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}

.info-card--green .rule-list li {
  border-color: rgba(244, 239, 225, 0.24);
  color: rgba(244, 239, 225, 0.82);
}

.rule-list li::before {
  width: 11px;
  height: 11px;
  margin-top: 0.34em;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M15%201C7%201%201%207%201%2015c8%200%2014-6%2014-14z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M15%201C7%201%201%207%201%2015c8%200%2014-6%2014-14z'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
}

.info-card--green .rule-list li::before {
  background: var(--cream);
}

/* --- Learning process ------------------------------------------------------ */

.process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid var(--line);
}

.process::before {
  position: absolute;
  top: 77px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--green);
  content: "";
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 700ms ease;
}

.js .process::before {
  transform: scaleX(0);
}

.js .process.is-visible::before {
  transform: scaleX(1);
}

.process-item {
  position: relative;
  z-index: 1;
  min-height: 310px;
  padding: 28px 28px 30px 0;
}

.process-item + .process-item {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.process-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--sage);
  color: var(--green-deep);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}

.process-item h3 {
  max-width: 14ch;
  margin: 70px 0 12px;
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
}

.process-item p {
  max-width: 32ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

/* --- Link grid and callout -------------------------------------------------- */

.link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.link-panel {
  display: flex;
  min-height: 178px;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  color: var(--ink);
}

.link-panel--yellow {
  border-color: var(--green);
  background: var(--sage);
}

.link-panel h3 {
  max-width: 16ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
}

.link-panel p {
  max-width: 44ch;
  margin: 12px 0 20px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.link-panel .text-link,
.link-panel .text-link:hover,
.link-panel .text-link:focus-visible {
  color: var(--ink);
}

.callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  padding: 42px;
  border: 1px solid rgba(244, 239, 225, 0.2);
  background: var(--green-deep);
  color: var(--cream);
}

.callout h2 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.6vw, 3.7rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.callout p {
  max-width: 55ch;
  margin: 12px 0 0;
  color: rgba(244, 239, 225, 0.8);
  font-size: 15px;
  line-height: 1.6;
}

.callout .button {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

.callout .button:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--ink);
}

.source-note {
  display: inline-block;
  margin-top: 20px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}

/* --- Footer ------------------------------------------------------------------ */

.footer {
  padding-block: 62px 34px;
  background: var(--green-dark);
  color: var(--cream);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.2fr) repeat(3, minmax(120px, 0.8fr));
  gap: 38px;
}

.footer h2 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 4.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 0.98;
}

.footer h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 15px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer h3::before {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M15%201C7%201%201%207%201%2015c8%200%2014-6%2014-14z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M15%201C7%201%201%207%201%2015c8%200%2014-6%2014-14z'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
}

.footer p,
.footer address {
  max-width: 30ch;
  margin: 18px 0 0;
  color: rgba(244, 239, 225, 0.74);
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer li + li {
  margin-top: 8px;
}

.footer .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 18px;
}

.footer .footer-social li + li {
  margin-top: 0;
}

.footer .footer-social a {
  display: inline-block;
  padding: 8px 0;
}

.footer a {
  color: var(--cream);
  font-size: 14px;
  text-decoration-color: rgba(244, 239, 225, 0.4);
}

.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-top: 54px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 239, 225, 0.25);
}

.footer-bottom p {
  max-width: 70ch;
  margin: 0;
  font-size: 12px;
}

.footer-bottom .footer-flag {
  color: var(--gold);
  font-weight: 600;
}

/* --- Gentle fade reveals ------------------------------------------------------- */

.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 650ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  :root {
    --gutter: 32px;
  }

  .desktop-nav {
    gap: 14px;
  }

  .header-inner {
    grid-template-columns: minmax(190px, 1fr) auto auto;
    gap: 16px;
  }

  .hero-inner {
    min-height: 600px;
  }

  .page-intro-inner {
    gap: 36px;
  }
}

@media (max-width: 880px) {
  .site-header {
    position: relative;
  }

  .header-inner {
    grid-template-columns: 1fr auto auto;
  }

  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-action {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 13px;
  }

  .hero-inner {
    min-height: 0;
    padding-block: 68px 76px;
  }

  .hero-credit {
    max-width: 60%;
  }

  .page-intro-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 30px;
    padding-block: 58px 62px;
  }

  .page-intro-copy {
    max-width: 60ch;
  }

  .essentials,
  .info-layout {
    grid-template-columns: 1fr;
  }

  .essentials {
    gap: 38px;
  }

  .event-band {
    grid-template-columns: 1fr;
  }

  .event-band > * {
    min-height: 0;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --header-height: auto;
  }

  body {
    font-size: 17px;
  }

  .header-inner {
    min-height: 70px;
    gap: 8px;
  }

  .brand {
    font-size: 13px;
  }

  .brand-mark {
    width: 24px;
    height: 24px;
  }

  .brand span {
    max-width: 150px;
  }

  .header-action {
    padding-inline: 12px;
  }

  .mobile-menu-grid {
    grid-template-columns: 1fr;
  }

  .mobile-menu .menu-note {
    grid-column: auto;
  }

  /* Flatten the scrim so type stays legible over the photo at reading size. */
  .hero::after,
  .page-intro::after {
    background: linear-gradient(to bottom, rgba(16, 33, 22, 0.86), rgba(16, 33, 22, 0.76) 52%, rgba(16, 33, 22, 0.84));
  }

  .hero-inner {
    min-height: 560px;
    padding-block: 64px 72px;
  }

  .hero-credit {
    max-width: 66%;
    font-size: 10px;
  }

  .hero h1,
  .page-intro h1 {
    max-width: 9ch;
    font-size: clamp(3.4rem, 14vw, 5.2rem);
  }

  .hero-lede {
    margin-top: 22px;
    font-size: 18px;
  }

  .hero-actions,
  .action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button,
  .action-row .button,
  .hero-actions .header-action,
  .action-row .header-action {
    width: 100%;
  }

  .hero-note {
    margin-top: 28px;
  }

  .section,
  .page-section {
    padding-block: 60px;
  }

  .section--tight {
    padding-block: 44px;
  }

  .section-heading,
  .page-section-heading {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 32px;
  }

  .section-heading h2,
  .panel h2,
  .split-copy h2,
  .page-section h2 {
    font-size: clamp(2.3rem, 11vw, 3.3rem);
  }

  .guide-shell {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 16px;
  }

  .guide-marker {
    position: relative;
    top: auto;
    min-height: 170px;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 16px;
  }

  .guide-marker img {
    width: 108px;
  }

  .guide-marker p {
    max-width: 19ch;
    text-align: left;
  }

  .guide-list summary {
    min-height: 72px;
    padding-block: 17px;
  }

  .guide-title {
    gap: 10px;
    font-size: 23px;
  }

  .guide-body {
    padding: 0 28px 23px 28px;
    font-size: 15px;
  }

  .split-grid,
  .numbered-grid,
  .fact-grid,
  .field-grid,
  .link-grid,
  .process {
    grid-template-columns: 1fr;
  }

  .split-panel {
    min-height: 330px;
  }

  .split-panel h3 {
    font-size: 2.9rem;
  }

  .numbered-item,
  .numbered-item + .numbered-item {
    min-height: 0;
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .numbered-item:last-child {
    border-bottom: 0;
  }

  .numbered-item span {
    margin-bottom: 24px;
  }

  .essentials-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .info-card,
  .link-panel {
    padding: 23px;
  }

  .callout {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px 23px;
  }

  .callout .button {
    width: 100%;
  }

  .process::before {
    top: 42px;
    bottom: 42px;
    left: 20px;
    right: auto;
    width: 1px;
    height: auto;
    transform: scaleY(1);
    transform-origin: top;
  }

  .js .process::before {
    transform: scaleY(0);
  }

  .js .process.is-visible::before {
    transform: scaleY(1);
  }

  .process-item,
  .process-item + .process-item {
    min-height: 0;
    padding: 20px 0 28px 62px;
    border-left: 0;
  }

  .process-item h3 {
    margin-top: 28px;
    font-size: 26px;
  }

  .footer {
    padding-block: 50px 26px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    margin-top: 38px;
  }
}

@media (max-width: 360px) {
  :root {
    --gutter: 16px;
  }

  .header-inner {
    gap: 5px;
  }

  .brand span {
    max-width: 125px;
  }

  .menu-toggle,
  .header-action {
    padding-inline: 10px;
    font-size: 12px;
  }

  .hero h1,
  .page-intro h1 {
    font-size: 3.2rem;
  }

  .hero-inner {
    min-height: 500px;
  }

  .guide-marker {
    grid-template-columns: 92px 1fr;
  }

  .guide-marker img {
    width: 88px;
  }
}

/* --- Reduced motion: static twins ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
  }

  .process::before {
    transform: none;
  }

  html.js .process::before {
    transform: none;
  }

  .brand:hover .brand-mark,
  .guide-marker img {
    transform: rotate(-8deg);
  }
}

/* --- Self-hosted fonts ------------------------------------------------------
   Cormorant Garamond (delicate serif display), Outfit (sans body/UI) and
   IBM Plex Mono (plant-label/small caps). font-display:swap keeps text visible
   while each face loads; system fallbacks stay in the --serif/--sans/--mono
   stacks. Files live in assets/fonts/, so url() is relative to this sheet. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond/cormorant-garamond-400.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond/cormorant-garamond-500.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond/cormorant-garamond-600.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/outfit/outfit-300.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/outfit/outfit-400.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/outfit/outfit-500.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/outfit/outfit-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono/ibm-plex-mono-500.woff2") format("woff2");
}

/* ---- Up close: magnifying lens over the feeding station ---- */
.lens-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.lens-copy h2 { margin: 0 0 20px; font-family: var(--serif); font-size: clamp(2.4rem, 4.2vw, 4.2rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; max-width: 15ch; }
.lens-copy > p { max-width: 42ch; color: var(--ink-soft); }
.lens-spots { display: none; flex-wrap: wrap; gap: 8px; margin: 26px 0 18px; }
html.js .lens-spots { display: flex; }
.lens-spot { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 15px/1.2 var(--sans); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.lens-spot span { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--green); }
.lens-spot[aria-pressed="true"] { background: var(--green-deep); border-color: var(--green-deep); color: var(--cream); }
.lens-spot[aria-pressed="true"] span { color: var(--gold-soft); }
.lens-spot:focus-visible, .lens-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lens-copy .lens-readout { min-height: 3.2em; margin: 0; padding-left: 14px; border-left: 2px solid var(--gold); color: var(--ink); font-family: var(--serif); font-size: 21px; line-height: 1.35; }
.lens-stage { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); touch-action: none; cursor: crosshair; background: var(--green-dark); }
.lens-stage img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.lens { position: absolute; left: 0; top: 0; width: 200px; height: 200px; border-radius: 50%; border: 3px solid var(--cream); box-shadow: 0 0 0 1px rgba(20, 41, 28, .5), 0 18px 40px rgba(10, 22, 14, .45), inset 0 0 22px rgba(0, 0, 0, .25); background-repeat: no-repeat; pointer-events: none; display: none; transition: transform 260ms cubic-bezier(.2, .7, .1, 1); }
html.js .lens { display: block; }
.lens-stage figcaption { position: absolute; left: 14px; bottom: 12px; padding: 6px 10px; background: rgba(20, 41, 28, .78); color: var(--cream); font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.guide-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 64px; }
.guide-links a { display: grid; align-content: start; gap: 6px; padding: 20px 0 6px; border-top: 2px solid var(--ink); color: var(--ink); text-decoration: none; }
.guide-links span { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--green); }
.guide-links strong { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.05; }
.guide-links em { font-style: normal; color: var(--ink-soft); font-size: 15px; }
.guide-links a:hover strong, .guide-links a:focus-visible strong { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }

/* ---- Garden and Insect World: open photo panels instead of double-bordered cards ---- */
.split-panel { border: 0; background: transparent; padding: 0; min-height: 0; gap: 18px; }
.split-panel::after { display: none; }
.split-panel--green { background: transparent; }
.split-panel-media { margin: 0 0 22px; border: 0; }
.split-panel-media img { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.split-panel > div { padding: 0; }
.panel-label { margin-bottom: 14px; }
.panel-label span[aria-hidden="true"] { display: none; }
.section--green .split-panel h3 { color: var(--cream); }
.section--green .split-panel p { color: rgba(244, 239, 225, .84); }
.section--green .split-panel .panel-label { color: var(--gold-soft); }

/* ---- Events: two plain columns under a rule ---- */
.event-band { gap: 40px; border: 0; background: transparent; }
.event-band > * { padding: 0; background: transparent; }
.event-band > article { padding-top: 18px; border-top: 2px solid var(--ink); }

/* ---- Hero: let the photo keep its color on the right ---- */
.hero::after { background: linear-gradient(97deg, rgba(16, 33, 22, .88) 4%, rgba(16, 33, 22, .6) 36%, rgba(16, 33, 22, .08) 70%, rgba(16, 33, 22, 0) 100%), linear-gradient(to top, rgba(16, 33, 22, .5), rgba(16, 33, 22, 0) 40%); }

/* ---- About: readable card headings and buttons in the green band ---- */
.info-card--green h3 { color: var(--cream); }
.section--green .info-card:not(.info-card--green) .button--outline { color: var(--ink); border-color: var(--ink); background: transparent; }
.section--green .info-card:not(.info-card--green) .button--outline:hover { color: var(--cream); background: var(--green-deep); }

/* ---- Phone bar ---- */
.mobile-call { display: none; }
@media (max-width: 880px) {
  .hero::after { background: linear-gradient(to top, rgba(16, 33, 22, .92) 12%, rgba(16, 33, 22, .62) 58%, rgba(16, 33, 22, .34) 100%); }
  .lens-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lens { width: 136px; height: 136px; }
  .guide-links { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .event-band > article { padding-top: 16px; }
  body { padding-bottom: 84px; }
  .mobile-call { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 8px; background: rgba(20, 41, 28, .95); border: 1px solid var(--white-line); border-radius: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); transition: transform 320ms ease, opacity 240ms ease; }
  .mobile-call a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 4px; font: 600 15px/1 var(--sans); text-decoration: none; }
  .mobile-call-phone { background: var(--cream); color: var(--green-dark); }
  .mobile-call-tickets { border: 1px solid var(--gold); color: var(--cream); }
  html.callbar-managed .mobile-call { opacity: 0; transform: translateY(140%); pointer-events: none; }
  html.callbar-managed .mobile-call.is-shown { opacity: 1; transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .lens, .mobile-call { transition: none; } }

/* ---- Round-1 fixes (build 2026-09-27) ---- */
.section--green .split-panel .text-link,
.section--green .split-panel .text-link:hover,
.section--green .split-panel .text-link:focus-visible { color: var(--cream); }
.section--green .split-panel .text-link:focus-visible { outline-color: var(--cream); }
.split-panel .text-link { margin: 18px 0 0; }
.essentials h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.4rem, 3.9vw, 4.1rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; max-width: 12ch; }
.event-band h2 { max-width: 9ch; }

.hero h1 { max-width: 14ch; font-size: clamp(3.4rem, 6.6vw, 6.8rem); }
@media (max-width: 640px) { .hero h1 { max-width: 11ch; font-size: clamp(2.9rem, 12.5vw, 4.4rem); } }

/* Proof strip: facts the attraction states about itself */
.proof-strip { background: var(--green-dark); color: var(--cream); border-bottom: 1px solid rgba(244, 239, 225, .12); }
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; padding-block: 34px; }
.proof-grid > div { padding: 4px 28px; border-left: 1px solid rgba(244, 239, 225, .18); }
.proof-grid > div:first-child { padding-left: 0; border-left: 0; }
.proof-grid dt { font-family: var(--serif); font-size: clamp(2rem, 3vw, 2.9rem); font-weight: 500; line-height: 1; color: var(--cream); }
.proof-grid dt small { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.proof-grid dd { margin: 10px 0 0; color: rgba(244, 239, 225, .78); font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* Full-bleed encounter band */
.encounter-band { position: relative; isolation: isolate; overflow: hidden; background: var(--green-dark); color: var(--cream); }
.encounter-band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.encounter-band::before { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, rgba(16, 33, 22, .95) 0%, rgba(16, 33, 22, .8) 34%, rgba(16, 33, 22, .1) 64%, rgba(16, 33, 22, 0) 100%); }
.encounter-inner { display: flex; min-height: 660px; align-items: center; padding-block: 96px; }
.encounter-copy { max-width: 470px; }
.encounter-copy h2 { margin: 0 0 20px; font-family: var(--serif); font-size: clamp(2.6rem, 4.4vw, 4.6rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; }
.encounter-copy p { color: rgba(244, 239, 225, .86); }
.encounter-band .kicker { color: var(--gold-soft); }
.encounter-band .button--outline { border-color: rgba(244, 239, 225, .6); color: var(--cream); background: transparent; }
.encounter-band .button--outline:hover { background: rgba(244, 239, 225, .12); }

/* Fact cards: open ruled entries instead of double-bordered boxes */
.fact-grid { gap: 44px 48px; }
.fact-card { min-height: 0; padding: 20px 0 0; border: 0; border-top: 2px solid var(--ink); background: transparent; }
.fact-card::after { display: none; }
.fact-card small { margin-bottom: 14px; }
.fact-card h3 { font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 500; line-height: 1.08; }
.section--green .fact-card { border-top-color: rgba(244, 239, 225, .7); color: var(--cream); }
.section--green .fact-card h3 { color: var(--cream); }
.section--green .fact-card p { color: rgba(244, 239, 225, .84); }
.section--green .fact-card small { color: var(--gold-soft); }

/* Garden photo in the events band */
.event-photo { margin: 28px 0 0; }
.event-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 35%; border-radius: var(--radius); }
.event-photo figcaption { margin-top: 10px; color: var(--ink-soft); font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 880px) {
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; padding-block: 28px; }
  .proof-grid > div { padding-right: 10px; }
  .proof-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .proof-grid > div:nth-child(even) { padding-left: 18px; }
  .encounter-band { display: flex; flex-direction: column; }
  .encounter-band > img { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 4 / 3; object-position: 60% 30%; }
  .encounter-band::before { display: none; }
  .encounter-inner { min-height: 0; padding-block: 40px 56px; }
}

/* ==== Forest pass (2026-09-30): deep-forest ground, photo-first bands, hairlines, one amber accent ==== */
:root {
  --forest: #14291c;
  --forest-deep: #0c1912;
  --accent: #f0b23e;
  --accent-hover: #f6c766;
  --header-h: 77px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
}
html { scroll-behavior: auto; }

/* Header: dark glass that floats over the hero photograph */
.site-header {
  --ink: #f4efe1;
  --ink-soft: rgba(244, 239, 225, 0.82);
  --line: rgba(244, 239, 225, 0.16);
  --green: var(--accent);
  border-bottom-color: var(--line);
  background: rgba(12, 25, 18, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--ink);
}
.desktop-nav a[aria-current="page"] { text-decoration-color: var(--accent); }
.menu-toggle { border-color: rgba(244, 239, 225, 0.4); border-radius: 4px; }
.mobile-menu { background: var(--forest-deep); }
.header-action, .button { border-radius: 4px; }
.header-action, .button--light, .callout .button, .section--green .button:not(.button--outline) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--forest-deep);
}
.header-action:hover, .button--light:hover, .callout .button:hover, .section--green .button:not(.button--outline):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--forest-deep);
}
.button:active, .header-action:active { transform: translateY(0) scale(0.98); }

/* "More" menu: real routes that do not fit the bar */
.nav-more { position: relative; }
.nav-more-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 0;
  border: 0; background: transparent; color: var(--ink-soft);
  font: inherit; letter-spacing: inherit; cursor: pointer; transition: color 180ms ease;
}
.nav-more-button span { font-size: 10px; transition: transform 220ms var(--ease-out); }
.nav-more-button:hover, .nav-more.is-open .nav-more-button { color: var(--ink); }
.nav-more.is-open .nav-more-button span { transform: rotate(180deg); }
.nav-more-panel {
  position: absolute; z-index: 5; top: calc(100% + 14px); right: -18px;
  display: grid; width: 300px; padding: 10px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--forest-deep);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 220ms var(--ease-out), visibility 0s linear 220ms;
}
.nav-more-panel::before { position: absolute; inset: -16px 0 auto; height: 16px; content: ""; }
.nav-more.is-open .nav-more-panel, html:not(.js) .nav-more:focus-within .nav-more-panel {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-more:hover .nav-more-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.nav-more-panel img { width: 100%; height: auto; aspect-ratio: 5 / 2; margin-bottom: 6px; border-radius: 3px; object-fit: cover; object-position: 50% 60%; }
.desktop-nav .nav-more-panel a { display: grid; gap: 2px; padding: 11px 12px; border-radius: 4px; color: var(--ink); transition: background-color 160ms ease; }
.desktop-nav .nav-more-panel a:hover, .desktop-nav .nav-more-panel a:focus-visible { background: rgba(244, 239, 225, 0.08); }
.nav-more-panel strong { font-size: 14.5px; font-weight: 500; }
.nav-more-panel a span { color: var(--ink-soft); font-size: 12.5px; letter-spacing: 0; }

/* Heroes run under the header; the headline sits low on the photograph */
.hero, .page-intro { margin-top: calc(-1 * var(--header-h)); }
.hero h1, .page-intro h1 { letter-spacing: -0.025em; }
.hero h1 { line-height: 0.96; }
@media (min-width: 881px) {
  .hero-inner { min-height: clamp(660px, 100svh, 920px); align-items: end; padding-block: calc(var(--header-h) + 80px) 96px; }
  .page-intro-inner { padding-top: calc(var(--header-h) + 84px); }
  .hero::after { background: linear-gradient(90deg, rgba(12, 25, 18, .8) 0%, rgba(12, 25, 18, .5) 38%, rgba(12, 25, 18, 0) 72%), linear-gradient(to top, rgba(12, 25, 18, .78) 0%, rgba(12, 25, 18, 0) 56%), linear-gradient(to bottom, rgba(12, 25, 18, .5), rgba(12, 25, 18, 0) 22%); }
}

/* Dark bands: one scope flips ink, rules and label colour for everything inside */
.section--green {
  --ink: #f4efe1;
  --ink-soft: rgba(244, 239, 225, 0.82);
  --line: rgba(244, 239, 225, 0.2);
  --green: var(--gold-soft);
  --paper: transparent;
  --sage: rgba(244, 239, 225, 0.07);
  background: var(--forest);
}
.section--green :focus-visible { outline-color: var(--accent); }
.proof-strip, .encounter-band { background: var(--forest); }
.footer { background: var(--forest-deep); }
.footer h3, .footer-bottom .footer-flag { color: var(--accent); }

/* Hairlines instead of boxes */
.info-card:not(.info-card--green), .link-panel:not(.link-panel--yellow) { padding: 24px 0 0; border: 0; border-top: 1px solid var(--ink); background: transparent; }
.info-card::after, .link-panel::after { display: none; }
.info-card--green, .link-panel--yellow { border: 0; border-radius: var(--radius); }
.info-card--green { background: var(--forest); }
.section--green .info-card--green { background: rgba(244, 239, 225, 0.07); }
.link-panel { min-height: 0; }
.link-grid { gap: 40px 48px; }
@supports selector(:has(a)) {
  .page-section:has(> .container > .callout) { border-top: 0; background: var(--forest); }
  .callout { padding: 0; border: 0; background: transparent; }
}

/* Garden / Insect World: macro photograph with the room it was taken in */
.split-grid { gap: 40px; }
.split-panel-media { position: relative; margin: 0 0 64px; }
.split-panel-media .split-inset { position: absolute; right: 20px; bottom: -40px; width: 38%; height: auto; aspect-ratio: 3 / 2; border: 5px solid var(--forest); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.split-panel-media figcaption { position: absolute; left: 0; bottom: -30px; color: var(--ink-soft); font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.split-panel h3 { max-width: 14ch; font-size: clamp(2.1rem, 3vw, 3.2rem); }

/* Shared day: copy left, two real photographs right */
.shared { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.shared h2 { margin: 0 0 36px; font-family: var(--serif); font-size: clamp(2.4rem, 3.9vw, 4.1rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.02; }
.shared-list article { padding: 22px 0 24px; border-top: 1px solid var(--ink); }
.shared-list h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.1; }
.shared-list p { max-width: 44ch; margin: 0 0 12px; color: var(--ink-soft); font-size: 16px; }
.shared-photos { position: relative; padding: 0 0 72px 12%; }
.shared-photo { margin: 0; }
.shared-photo img { width: 100%; height: auto; border-radius: var(--radius); object-fit: cover; }
.shared-photo--main img { aspect-ratio: 5 / 4; object-position: 50% 28%; }
.shared-photo--inset { position: absolute; left: 0; bottom: 0; width: 44%; }
.shared-photo--inset img { aspect-ratio: 3 / 2; border: 6px solid var(--sage); box-shadow: 0 18px 40px rgba(20, 41, 28, 0.25); }
.shared-photo figcaption, .photo-pair figcaption, .people-photo figcaption { margin-top: 10px; color: var(--ink-soft); font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.shared-photo--main figcaption { text-align: right; }

/* Inner pages: small place photographs at their native size, staggered */
.photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 500px)); justify-content: end; gap: 28px; margin: 0 0 64px; }
.photo-pair figure { margin: 0; }
.photo-pair figure + figure { margin-top: 56px; }
.photo-pair img { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--radius); object-fit: cover; }

/* About: the people, beside the learning */
.people { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; align-items: center; }
.people-photo { margin: 0; }
.people-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius); object-fit: cover; object-position: 60% 30%; }
.people-copy > p:not(.kicker) { max-width: 46ch; margin: 18px 0 26px; color: var(--ink-soft); }
.people-copy .kicker { margin-bottom: 16px; }

/* Phone bar: tickets lead, the bar steps aside while reading down */
@media (max-width: 880px) {
  .mobile-call { grid-template-columns: 1fr 1.25fr; }
  .mobile-call-phone { border: 1px solid rgba(244, 239, 225, 0.45); background: transparent; color: var(--cream); }
  .mobile-call-tickets { border: 0; background: var(--accent); color: var(--forest-deep); }
}

@media (max-width: 880px) {
  :root { --header-h: 77px; }
  .hero::after { background: linear-gradient(to top, rgba(12, 25, 18, .95) 0%, rgba(12, 25, 18, .86) 34%, rgba(12, 25, 18, .38) 66%, rgba(12, 25, 18, .08) 84%, rgba(12, 25, 18, .3) 100%); }
  .hero-inner { padding-block: calc(var(--header-h) + 128px) 64px; }

  /* Inner heroes: the photograph keeps its own clear block, the type sits on forest below it */
  .page-intro { margin-top: 0; }
  .page-intro--photo { --photo-h: min(74vw, 400px); background: var(--forest); }
  .page-intro--photo .hero-media { inset: 0 0 auto; height: var(--photo-h); }
  .page-intro--photo .hero-media[src*="orange-butterfly"] { object-position: 20% 50%; }
  .page-intro--photo::after { background: linear-gradient(to bottom, rgba(20, 41, 28, 0) 0, rgba(20, 41, 28, 0) calc(var(--photo-h) - 130px), var(--forest) var(--photo-h)); }
  .page-intro--photo .page-intro-inner { padding-top: calc(var(--photo-h) - 44px); }
  .page-intro--photo .hero-credit { top: calc(var(--photo-h) - 84px); bottom: auto; }
  .page-intro h1 { max-width: 13ch; font-size: clamp(2.5rem, 11vw, 3.9rem); }

  .split-panel-media { margin-bottom: 58px; }
  .split-panel-media .split-inset { right: 12px; width: 44%; }
  .shared, .people { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .shared-photos { padding-left: 8%; }
  .photo-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 44px; }
  .photo-pair figure + figure { margin-top: 32px; }
  .link-grid { gap: 28px; }
}
@media (max-width: 640px) {
  :root { --header-h: 71px; }
  .hero h1 { line-height: 1; }
}
@media (prefers-reduced-motion: reduce) { .nav-more-panel, .nav-more-button span { transition: none; } }

/* Round-2 fixes from the rendered frames */
.site-header { background: rgba(12, 25, 18, 0.84); }
.nav-more-button span { width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; font-size: 0; transform: rotate(45deg); }
.nav-more.is-open .nav-more-button span { margin-top: 3px; transform: rotate(225deg); }
.info-card--green { --ink: #f4efe1; --ink-soft: rgba(244, 239, 225, 0.82); --line: rgba(244, 239, 225, 0.2); --green: var(--gold-soft); color: var(--ink); }
.split-panel { justify-content: flex-start; }
.split-panel-media figcaption { top: calc(100% + 10px); bottom: auto; max-width: 54%; }
.shared-photo--main figcaption { margin-left: 48%; }
@media (max-width: 880px) {
  .page-intro--photo .hero-credit { display: none; }
}

/* ==== Bar pass (2026-10-01): native-resolution photographs, monumental hero, open photo bands, full-page menus ==== */
html { background: var(--forest-deep); }

/* Header, closed: brand, five routes, Explore, phone, one amber action */
.site-header { position: sticky; top: 0; z-index: 40; }
.header-inner { grid-template-columns: minmax(180px, 1fr); grid-auto-flow: column; grid-auto-columns: auto; gap: 26px; }
.header-call { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); font: 500 13px/1 var(--sans); letter-spacing: 0.03em; text-decoration: none; white-space: nowrap; }
.header-call::before { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); content: ""; }
.header-call:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.header-call-short { display: none; }
.desktop-nav a { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .desktop-nav > a::after { position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--accent); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); }
  .desktop-nav > a:hover::after { transform: scaleX(1); }
}
@media (min-width: 881px) and (max-width: 1180px) { .header-call { display: none; } }

/* Explore: a full-width panel listing every page, with the business's own photo beside it */
.nav-more { position: static; }
.nav-more-panel {
  top: 100%; right: 0; left: 0; width: auto; padding: 44px 0 52px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: var(--forest-deep);
  box-shadow: 0 0 0 100vmax rgba(5, 12, 8, 0.55);
  clip-path: inset(0 -100vmax -100vmax -100vmax);
}
.nav-more-panel::before { inset: -22px 0 auto; height: 22px; }
.nav-panel-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.75fr) minmax(0, 0.85fr); gap: 56px; align-items: start; }
.nav-panel-label { margin: 0 0 18px; color: rgba(244, 239, 225, 0.58); font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.nav-panel-pages, .nav-panel-side { margin: 0; padding: 0; list-style: none; }
.nav-panel-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 36px; }
.desktop-nav .nav-panel-pages a { display: grid; gap: 3px; padding: 9px 0 11px; border-radius: 0; background: none; color: var(--ink); }
.desktop-nav .nav-panel-pages a:hover, .desktop-nav .nav-panel-pages a:focus-visible { background: none; }
.nav-panel-pages strong { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; transition: color 180ms ease; }
.nav-panel-pages a:hover strong, .nav-panel-pages a:focus-visible strong, .nav-panel-pages a[aria-current="page"] strong { color: var(--accent); }
.nav-panel-pages a span { color: var(--ink-soft); font-size: 13px; letter-spacing: 0; line-height: 1.4; }
.desktop-nav .nav-panel-side a { display: block; padding: 7px 0; color: var(--ink); font-size: 14px; }
.desktop-nav .nav-panel-side a:hover { background: none; text-decoration: underline; text-decoration-color: var(--accent); }
.nav-panel-photo { margin: 0; }
.nav-panel-img { width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; background: var(--forest) center / cover no-repeat; transition: background-image 200ms ease; }
.nav-panel-photo figcaption { margin-top: 12px; color: var(--ink-soft); font: 500 10.5px/1.45 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* Phone: full-screen drawer outside the header, every page, Call and Tickets pinned */
.mobile-menu { display: none; }
.menu-toggle { gap: 10px; color: var(--cream); text-decoration: none; }
.menu-toggle-lines { position: relative; width: 16px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
@media (max-width: 880px) {
  .header-call { min-height: 44px; padding: 0 14px; border: 1px solid rgba(244, 239, 225, 0.45); border-radius: 4px; }
  .header-call::before { display: none; }
  .header-call-long { display: none; }
  .header-call-short { display: inline; }
  .header-inner { gap: 8px; }
  .mobile-menu { position: fixed; inset: 0; z-index: 90; flex-direction: column; padding: 0; border: 0; background: var(--forest-deep); color: var(--cream); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-menu.is-open, .mobile-menu:target { display: flex; }
  html.menu-open { overflow: hidden; }
  .drawer-top { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(244, 239, 225, 0.14); }
  .drawer-top .brand { color: var(--cream); }
  .drawer-close { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--cream); font-size: 30px; font-weight: 300; line-height: 1; text-decoration: none; }
  .drawer-nav { flex: 1 0 auto; padding-block: 14px 24px; }
  .drawer-nav ul { margin: 0; padding: 0; list-style: none; }
  .drawer-pages a { display: grid; gap: 2px; padding: 10px 0; border: 0; color: var(--cream); text-decoration: none; }
  .drawer-pages strong { font-family: var(--serif); font-size: 31px; font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; }
  .drawer-pages span { color: rgba(244, 239, 225, 0.66); font-size: 13.5px; line-height: 1.35; }
  .drawer-pages a[aria-current="page"] strong { color: var(--accent); }
  .drawer-small { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid rgba(244, 239, 225, 0.14); }
  .drawer-small a { display: inline-block; padding: 8px 0; border: 0; color: rgba(244, 239, 225, 0.8); font-size: 14px; font-weight: 400; }
  .drawer-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(244, 239, 225, 0.14); background: var(--forest-deep); }
  .drawer-actions a { display: flex; min-height: 50px; align-items: center; justify-content: center; border-radius: 4px; font: 600 15px/1 var(--sans); text-decoration: none; }
  .drawer-call { border: 1px solid rgba(244, 239, 225, 0.5); color: var(--cream); }
  .drawer-tickets { background: var(--accent); color: var(--forest-deep); }
}
@media (max-width: 420px) {
  .site-header .header-action { display: none; }
}

/* Home hero: lighter scrim so the wing pattern reads; headline about 1.4x, anchored bottom-left */
.hero-media--home { object-position: 30% 42%; }
.hero .hero-copy { max-width: none; }
.hero h1 { max-width: 15ch; font-size: clamp(4.4rem, 9.4vw, 9.6rem); line-height: 0.9; letter-spacing: -0.032em; }
.hero-foot { display: grid; grid-template-columns: minmax(0, 46ch) auto; gap: 18px 56px; align-items: end; justify-content: space-between; margin-top: 30px; }
.hero-foot .hero-lede { margin: 0; }
.hero-foot .hero-actions { margin: 0; }
.hero .hero-note { margin-top: 26px; }
@media (min-width: 881px) {
  .hero .hero-inner { min-height: clamp(700px, 100svh, 980px); padding-block: calc(var(--header-h) + 72px) 64px; }
  .hero::after { background: linear-gradient(to top, rgba(12, 25, 18, 0.88) 0%, rgba(12, 25, 18, 0.5) 30%, rgba(12, 25, 18, 0) 56%), linear-gradient(90deg, rgba(12, 25, 18, 0.32) 0%, rgba(12, 25, 18, 0) 50%), linear-gradient(to bottom, rgba(12, 25, 18, 0.45), rgba(12, 25, 18, 0) 16%); }
}
@media (max-width: 880px) {
  .hero .hero-inner { min-height: 100svh; align-items: end; padding-block: calc(var(--header-h) + 40px) 36px; }
  .hero-media--home { object-position: 16% 30%; }
  .hero::after { background: linear-gradient(to top, rgba(12, 25, 18, 0.95) 0%, rgba(12, 25, 18, 0.82) 36%, rgba(12, 25, 18, 0.2) 62%, rgba(12, 25, 18, 0) 76%, rgba(12, 25, 18, 0.4) 100%); }
  .hero h1 { max-width: 10ch; font-size: clamp(3rem, 14.5vw, 4.6rem); line-height: 0.94; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
  .hero .hero-credit { display: none; }
  .hero .hero-note { margin-top: 20px; }
}

/* Proof strip: published facts with their source */
.proof-grid dt.proof-award { font-size: clamp(1.45rem, 2vw, 1.95rem); line-height: 1.05; }
.proof-source { margin: 0 auto; padding: 0 0 24px; color: rgba(244, 239, 225, 0.58); font: 500 10px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* Full-bleed photographic band between colour panels */
.photo-band { position: relative; isolation: isolate; margin: 0; overflow: hidden; background: var(--forest-deep); color: var(--cream); }
.photo-band > img { display: block; width: 100%; height: clamp(440px, 56vw, 780px); object-fit: cover; object-position: 50% 42%; }
.photo-band::after { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(12, 25, 18, 0.84) 0%, rgba(12, 25, 18, 0.3) 34%, rgba(12, 25, 18, 0) 56%); content: ""; pointer-events: none; }
.photo-band figcaption { position: absolute; z-index: 1; right: 0; bottom: 40px; left: 0; }
.photo-band-line { max-width: 17ch; margin: 0; font-family: var(--serif); font-size: clamp(2.3rem, 4.8vw, 5rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; }
.photo-band-note { margin: 16px 0 0; color: rgba(244, 239, 225, 0.74); font: 500 10.5px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }

/* Garden band: one photograph to the right edge, the headline set against it */
.garden-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 800px); align-items: stretch; background: var(--forest); color: var(--cream); }
.garden-band-copy { display: flex; flex-direction: column; justify-content: center; padding: 72px 64px 72px max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.garden-band-copy .kicker { color: var(--gold-soft); }
.garden-band-copy h2 { max-width: 11ch; margin: 0; font-family: var(--serif); font-size: clamp(2.8rem, 5vw, 5.4rem); font-weight: 500; line-height: 0.96; letter-spacing: -0.025em; }
.garden-band-copy p:not(.kicker) { max-width: 42ch; margin: 22px 0 0; color: rgba(244, 239, 225, 0.84); }
.garden-band-photo { position: relative; margin: 0; }
.garden-band-photo img { display: block; width: 100%; height: 100%; min-height: 100%; aspect-ratio: 800 / 534; object-fit: cover; }
.garden-band-photo figcaption { position: absolute; right: 16px; bottom: 14px; padding: 6px 10px; background: rgba(12, 25, 18, 0.72); color: var(--cream); font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.photo-pair--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 16px; margin: 0 0 64px; }
.photo-pair--tight figure + figure { margin-top: 0; }
@media (min-width: 881px) { .photo-pair--tight { max-width: 1016px; } }
@media (max-width: 880px) {
  .garden-band { grid-template-columns: minmax(0, 1fr); }
  .garden-band-photo { order: -1; }
  .garden-band-photo img { height: auto; }
  .garden-band-copy { padding: 36px var(--gutter) 52px; }
}

/* Field notes: open photographs, hairline and mono caption, no box */
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.note { margin: 0; }
.note img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.note figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ink); }
.note-label { display: block; margin-bottom: 10px; color: var(--green); font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.note strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.1; }
.note p { max-width: 36ch; margin: 0; color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 880px) {
  .notes { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .note img { aspect-ratio: 4 / 3; }
}

/* Product rail: scroll-snap slider with real controls */
.rail-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.rail-head h2 { max-width: 16ch; margin: 0; font-family: var(--serif); font-size: clamp(2.4rem, 4.2vw, 4.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.015em; }
.rail-controls { display: flex; gap: 8px; }
.rail-controls button { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease; }
.rail-controls button:hover { background: var(--ink); color: var(--paper); }
.rail-controls button[disabled] { opacity: 0.3; cursor: default; }
.rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px); gap: 20px; margin: 0; padding: 0 0 18px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail-track > li { scroll-snap-align: start; }
.rail-track a { display: block; color: var(--ink); text-decoration: none; }
.rail-track img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.rail-track strong { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ink); font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.12; }
.rail-track small { display: block; margin-top: 6px; color: var(--ink-soft); font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.rail-track a:hover strong, .rail-track a:focus-visible strong { text-decoration: underline; text-underline-offset: 4px; }
html:not(.js) .rail-controls { display: none; }

/* Gallery: captioned columns grouped by place */
.gallery-group + .gallery-group { margin-top: 72px; }
.gallery-group h2 { margin: 0 0 24px; padding-top: 16px; border-top: 1px solid var(--ink); font-family: var(--serif); font-size: clamp(2rem, 3.2vw, 3.2rem); font-weight: 500; line-height: 1; }
.gallery-cols { columns: 3 300px; column-gap: 20px; }
.gallery-cols figure { margin: 0 0 24px; break-inside: avoid; }
.gallery-cols img { display: block; width: 100%; height: auto; }
.gallery-cols figcaption { margin-top: 10px; color: var(--ink-soft); font: 500 10.5px/1.45 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.gallery-cols img.is-small { max-width: 608px; }

/* Weddings: the photograph beside the questions */
.moment { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.moment-photo { position: sticky; top: calc(var(--header-h) + 24px); margin: 0; }
.moment-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
.moment-photo figcaption { margin-top: 10px; color: var(--ink-soft); font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.moment .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .moment { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .moment-photo { position: static; }
  .moment .fact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Source-review fixes: JS owns the open state, narrow headers fit at 320 */
@media (hover: hover) and (pointer: fine) {
  html.js .nav-more:not(.is-open):hover .nav-more-panel { opacity: 0; visibility: hidden; transform: translateY(-8px); transition-delay: 0s; }
}
@media (max-width: 1100px) { .header-inner { gap: 16px; } }
@media (min-width: 881px) { .mobile-menu, .mobile-menu.is-open, .mobile-menu:target { display: none; } }
@media (min-width: 881px) and (max-width: 1240px) { .garden-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
@media (max-width: 880px) {
  .header-inner { grid-template-columns: minmax(0, 1fr); }
  .mobile-menu .drawer-top .brand { display: inline-flex; padding: 0; border: 0; font-size: 13px; }
  .mobile-menu .drawer-close { display: inline-flex; padding: 0; border: 0; font-size: 30px; }
  .mobile-menu .drawer-actions a { display: flex; padding: 0 12px; border: 0; font-size: 15px; }
  .mobile-menu .drawer-actions .drawer-call { border: 1px solid rgba(244, 239, 225, 0.5); }
}
@media (max-width: 360px) {
  .menu-toggle { width: 46px; padding: 0; font-size: 0; }
  .header-call { padding: 0 10px; font-size: 12px; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Phone: the page ends on the footer, the call bar's room lives inside it */
@media (max-width: 880px) {
  body { padding-bottom: 0; }
  .footer { padding-bottom: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-nav > a::after, .nav-panel-pages strong, .rail-controls button { transition: none; }
  .rail-track { scroll-behavior: auto; }
}