/* Heron's Nest Sanctuary: stationery system from Beverly's approved business card.
   Ground Linen Cream, ink heron black, borders Lunenburg with a Malibu Peach inner line. */

@font-face {
  font-family: "Cardo";
  src: url("fonts/Cardo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cardo";
  src: url("fonts/Cardo-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cardo";
  src: url("fonts/Cardo-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --cream: #F7F3ED;
  --cream-deep: #EFE9DE;
  --ink: #231F20;
  --ink-muted: #4F4A49;
  --blue: #9BB0BC;
  --blue-ink: #3E5768;
  --peach: #FDC8B6;
  --peach-deep: #E3ADA0;
  --measure: 44rem;
  --page: 68rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Cardo", "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

/* Links and focus */

a { color: var(--blue-ink); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue-ink);
  outline-offset: 3px;
}

/* Skip link */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 1rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; color: var(--cream); }

/* Masthead */

.masthead {
  text-align: center;
  padding: 1.75rem 1.25rem 0.75rem;
}

.wordmark {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.wordmark a { color: var(--ink); text-decoration: none; }
.wordmark .tm { font-size: 0.35em; vertical-align: super; letter-spacing: 0; }

.wordmark-sub {
  display: block;
  margin-top: 0.45rem;
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
  letter-spacing: 0.62em;
  text-indent: 0.62em; /* recentres the tracked word */
  text-transform: uppercase;
  color: var(--ink);
}

.tagline {
  margin: 0.75rem 0 0;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--blue-ink);
}

/* Sticky nav row */

.site-nav {
  position: -webkit-sticky;
  position: sticky;
  overflow-anchor: none;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 237, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid var(--blue);
  border-bottom: 1px solid var(--blue);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
/* Where the blur is not supported the bar simply stays solid. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-nav { background: var(--cream); }
}

.nav-inner {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 3.4rem;
  transition: min-height 0.25s ease;
}

.site-nav.shrunk {
  background: rgba(247, 243, 237, 0.8);
  box-shadow: 0 1px 0 rgba(35, 31, 32, 0.08);
}
.site-nav.shrunk .nav-inner { min-height: 3.1rem; }

/* The wordmark is not in the bar at the top of the page, where the masthead
   above it is already carrying the name. It slides in once the bar sticks, so
   the name travels down the page with the reader. */
.nav-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  transition: width 0.4s ease, opacity 0.35s ease, visibility 0.35s;
}
.site-nav.shrunk .nav-brand {
  width: 13rem;
  opacity: 1;
  visibility: visible;
}
.nav-brand-mark { display: block; width: auto; height: 2.5rem; flex: none; transition: height 0.25s ease; }
.nav-brand-name {
  display: block;
  font-size: 1.22rem;
  line-height: 1.1;
  letter-spacing: 0.015em;
  transition: font-size 0.25s ease;
}
.nav-brand-name .tm { font-size: 0.35em; vertical-align: super; letter-spacing: 0; }
/* TM sits after SANCTUARY, as on Beverly's business card. The negative margin
   takes back the tracking the last letter carries. [Beverly, 2026-09-25] */
.wordmark-sub .tm,
.nav-brand-sub .tm { font-size: 0.6em; letter-spacing: 0; vertical-align: 0.6em; margin-left: -0.75em; }
.nav-brand-sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.56rem;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
}

/* Only the home page carries the tall wordmark block. Everywhere else the bar
   itself is the header: it opens a little taller with the wordmark already in
   place, then settles to the standard height as the reader scrolls, so the
   name travels down the page with them. [Levi, 2026-09-19] */
body:not([data-page="home"]) .masthead { display: none; }
body .nav-brand {
  width: auto;
  opacity: 1;
  visibility: visible;
}
body .nav-inner { min-height: 5rem; }
body .nav-brand-mark { height: 3.2rem; }
body .nav-brand-name { font-size: 1.5rem; }
body .nav-brand-sub { font-size: 0.62rem; }

body .site-nav.shrunk .nav-inner { min-height: 3.1rem; }
body .site-nav.shrunk .nav-brand-mark { height: 2.5rem; }
body .site-nav.shrunk .nav-brand-name { font-size: 1.22rem; }
body .site-nav.shrunk .nav-brand-sub { font-size: 0.56rem; }

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.4rem 1.3rem;
}

.nav-links a {
  display: inline-block;
  padding: 0.55rem 0.1rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.02rem;
}
.nav-links a:hover { color: var(--blue-ink); }
.nav-links a[aria-current="page"] {
  color: var(--blue-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

.nav-book { flex: none; }

/* Mobile menu (details/summary works without JavaScript) */

.nav-toggle { display: none; }

/* Buttons */

.btn {
  display: inline-block;
  padding: 0.62rem 1.5rem;
  background: var(--blue);
  color: var(--ink);
  border: 1px solid var(--blue-ink);
  border-radius: 2px;
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn:hover { background: #8AA2B0; color: var(--ink); }

.btn--peach { background: var(--peach); }
.btn--peach:hover { background: #F3B39D; }

.btn--small { padding: 0.4rem 1rem; font-size: 0.98rem; }

/* Page structure */

.page-main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
}

.page-main--narrow { max-width: 50rem; }

.page-title {
  margin: 0 0 0.4rem;
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  text-align: center;
}

.section-title {
  margin: 3.25rem 0 1.1rem;
  font-weight: 400;
  font-style: italic;
  font-size: 1.55rem;
  text-align: center;
}
.section-title:first-child { margin-top: 0; }

.lead { font-size: 1.22rem; }

.measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }

.centre, .centre p { text-align: center; }

/* Long body copy stays left aligned, which is what reads. Short intro blocks
   carry .centre so the paragraph lines up with the centred heading, rule and
   button above and below it. A button on its own line is always centred. */
.btn-row { text-align: center; margin-top: 1.5rem; }

/* Peach rule with centre dot, from the card */

.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.4rem auto;
}
.rule::before,
.rule::after {
  content: "";
  width: 2.4rem;
  border-top: 2px solid var(--peach-deep);
}
.rule span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--peach-deep);
}

/* Double border frame, from the card */

.frame {
  border: 2px solid var(--blue);
  padding: 6px;
  background: transparent;
}
.frame-inner {
  border: 1px solid var(--peach-deep);
  padding: clamp(0.85rem, 2vw, 1.45rem);
}

/* Hero */

/* The hero sits in the page column, the way it was first built. Round 6 broke it
   out to near the full viewport for a bigger photograph; Levi looked at that
   beside the original and preferred the original, so it is back: heron and
   photograph side by side, the picture the smaller of the two moves.
   [Levi, 2026-09-19] */
.hero {
  margin-top: 0.25rem;
  margin-bottom: 2.75rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1.25rem, 3.5vw, 2.75rem);
  align-items: center;
}

.hero-heron {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 15rem;
}

.hero-heron .heron-stack {
  position: relative;
  height: clamp(13rem, 25vw, 21rem);
  aspect-ratio: 74.05 / 152.53;
}

.heron-draw,
.heron-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-photo { margin: 0; }
/* Back to the 3:2 crop that suits the garden, now that the photograph is no
   longer running the width of the screen and does not need flattening to fit. */
.hero-photo .photo { aspect-ratio: 3 / 2; object-position: center 58%; }

/* Hero animation states. Initial hidden states exist only when JS is on
   and the hero has opted into animating, so no-JS and reduced motion
   render the finished scene. */

/* With JS on, the photo and the filled heron start hidden from the first
   paint (no flash before the script runs) and the script reveals them in
   order: outline draws, heron fills, then the photo fades in. Reduced motion,
   a missing path or any failure adds both classes at once. */

/* The photograph simply fades in beside the heron, which never leaves its own
   side of the frame. The slide from the right and the trip to the middle both
   went with round 6's wide hero. [Levi, 2026-09-19] */
.hero .frame-inner { overflow: hidden; }
html.js .hero:not(.is-photo-in) .hero-photo { opacity: 0; }
html.js .hero:not(.is-filled) .heron-fill { opacity: 0; }
.hero-photo { transition: opacity 0.9s ease; }
.heron-fill { transition: opacity 1.2s ease; }

/* The outline stroke is animation-only: hidden by default so the no-JS
   and reduced-motion states show the finished filled heron alone. */

.heron-draw { opacity: 0; }

html.js .hero.is-animating .heron-draw {
  opacity: 1;
  transition: opacity 0.35s ease;
}
html.js .hero.is-animating.is-filled .heron-draw { opacity: 0; transition: opacity 0.9s ease; }

@media (prefers-reduced-motion: reduce) {
  html.js .hero .hero-photo,
  html.js .hero .heron-fill { opacity: 1; transform: none; transition: none; }
  html.js .hero .heron-draw { opacity: 0; transition: none; }
  html.js .hero .heron-stack { transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}


/* Photos are cropped to their final aspect in the asset pipeline. */

.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 3 / 2);
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--blue);
  background: var(--cream-deep);
}
.tile .photo { transition: border-color 0.2s ease; }
.tile:hover .photo { border-color: var(--blue-ink); }

/* Photo placeholders */

.ph {
  border: 1px solid var(--blue);
  background: var(--cream-deep);
  aspect-ratio: var(--ar, 3 / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.1rem;
  margin: 0;
}

.ph-label {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}

.ph-note {
  display: block;
  margin-top: 0.45rem;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* Loose tile grid */

.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  align-items: start;
  margin-top: 2rem;
}

.tile { display: block; text-decoration: none; color: var(--ink); text-align: center; }
.tile--wide { grid-column: span 3; }
.tile--third { grid-column: span 2; }
/* The tiles line up straight. The staggered drop borrowed from the reference
   site was dropped 2026-09-19: the Explore block read as busy with it. */

.tile .ph { transition: border-color 0.2s ease; }
.tile:hover .ph { border-color: var(--blue-ink); }

.tile-caption {
  display: block;
  margin: 0.7rem 0 0.6rem;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink);
}

.tile-link { display: inline-block; }
.tile:hover .tile-link { background: #8AA2B0; }

/* Figures and photo grids on inner pages */

.photo-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: start;
  margin: 1.75rem 0;
}
.photo-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.page-main--narrow .photo-row {
  --row: min(var(--page) - 2.5rem, 100vw - 2.5rem);
  width: var(--row);
  margin-left: calc(50% - var(--row) / 2);
  gap: 2rem;
}

figure { margin: 0; }
figcaption {
  margin-top: 0.55rem;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-muted);
  text-align: center;
}

/* Guest review */

.review {
  margin: 0;
  padding: 1.5rem 1.75rem;
  border: 2px solid var(--blue);
  outline: 1px solid var(--peach-deep);
  outline-offset: -8px;
}
.review p { margin: 0 0 0.8rem; font-style: italic; font-size: 1.12rem; }
.review footer { font-size: 0.98rem; color: var(--ink-muted); }

/* Lists */

.plain-list { padding-left: 1.2rem; }
.plain-list li { margin-bottom: 0.4rem; }

.two-col-list {
  columns: 2;
  column-gap: 2.5rem;
  padding-left: 1.2rem;
}
.two-col-list li { margin-bottom: 0.4rem; break-inside: avoid; }

/* Breakfast menu list (breakfast.html) */

/* The section headings below zero their own top margin (.section-title:first-child),
   so the photo and the menu list carry the gap instead. */
.figure-block { margin: 2.5rem 0; }

.menu-list {
  padding-left: 1.4rem;
  margin: 1.5rem 0 2.5rem;
}
.menu-list > li { margin-bottom: 1.15rem; }
.menu-list > li:last-child { margin-bottom: 0; }
.menu-list > li::marker { color: var(--blue-ink); }
.menu-item {
  display: block;
  font-style: italic;
  font-size: 1.12rem;
  color: var(--ink);
}
.menu-note { display: block; margin-top: 0.15rem; }

/* Content placeholder (for copy still to come) */

.note-box {
  border: 1px dashed var(--blue);
  background: transparent;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 1rem;
  color: var(--ink-muted);
}
.note-box strong { color: var(--ink); font-weight: 700; }

/* Contact block and form */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.75rem;
}

.contact-details p { margin: 0 0 0.9rem; }
.contact-details .who { font-size: 1.2rem; }

.social-note { font-size: 0.98rem; color: var(--ink-muted); }

/* Round 26: Facebook and Instagram links on Contact */
.social-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.social-links a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; min-height: 44px; }
.social-links a:hover span { text-decoration: underline; }
.social-icon { width: 1.4rem; height: 1.4rem; fill: currentColor; flex: none; }

form .field { margin-bottom: 1.15rem; }
form label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1rem;
}
form input[type="text"],
form input[type="email"],
form textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--blue);
  border-radius: 2px;
}
form textarea { min-height: 8.5rem; resize: vertical; }

.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Footer: logo on the left, the words beside it */

.site-footer {
  border-top: 2px solid var(--blue);
  margin-top: 2rem;
  padding: 2.75rem 1.25rem 6.5rem;
}
.footer-frame {
  border-top: 1px solid var(--peach-deep);
  max-width: var(--page);
  margin: 0 auto;
  padding-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.footer-logo { height: 15rem; width: auto; flex: none; }
.footer-text { text-align: left; line-height: 1.2; }
/* Round 25: sizes and spacing follow Bev's "Page 1 Credits" Word file (Word pt x 4/3 = px):
   tagline 13.5pt, address 12pt, registration 11pt, credit and copyright 12pt,
   single-spaced, one blank line between groups, no gap between credit and copyright. */
.footer-text p { margin: 0 0 1rem; }
.footer-tag {
  font-size: 1.125rem;
  font-style: italic;
  color: var(--blue-ink);
}
.footer-contact { font-size: 1rem; }
.footer-reg { font-size: 0.92rem; color: var(--ink-muted); }
.footer-fine {
  margin-top: 0 !important;
  font-size: 1rem;
  color: var(--ink-muted);
}
.footer-fine a { color: var(--ink-muted); }
/* Round 24: Bev wants the drone credit in italics, sitting right above the copyright line. */
.footer-credit { font-style: italic; font-size: 1rem; }
.footer-text .footer-credit { margin-bottom: 0; }
.footer-credit + .footer-fine { margin-top: 0 !important; }
.footer-fine a:hover { color: var(--ink); }

/* Mobile call bar */

.call-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: var(--cream);
  border-top: 1px solid var(--blue);
  padding: 0.55rem 0.75rem;
  gap: 0.6rem;
}
.call-bar .btn { flex: 1; text-align: center; padding: 0.7rem 0.5rem; min-height: 44px; }

/* Reveal on scroll: hidden states only exist with JS on */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Small screens */

/* The links row needs room for the wordmark once the bar sticks, so it gives
   way to the menu button a little earlier than the rest of the layout. */
@media (max-width: 64rem) {
  .nav-links { display: none; }
  /* One Book on Airbnb button on a phone, the one pinned to the bottom bar. */
  .nav-book { display: none; }
  .btn-row--book { display: none; }

  .nav-inner {
    display: grid;
    grid-template-columns: 2.75rem 1fr 2.75rem;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.2rem;
  }
  /* Both sit on row 1 explicitly. The wordmark is first in the markup, so
     without this the bars get auto-placed onto a second row underneath it. */
  .nav-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
  .nav-brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: auto;
  }
  .site-nav.shrunk .nav-brand { width: auto; }
  .nav-brand-sub { display: none; }
  .nav-brand-mark { height: 2.2rem; }
  .nav-brand-name { font-size: 1.1rem; }

  /* The taller opening state is a desktop idea: on a phone the bar is already
     compact, so inner pages just use the standard height. */
  body .nav-inner { min-height: 3.2rem; }
  body .nav-brand-mark { height: 2.2rem; }
  body .nav-brand-name { font-size: 1.1rem; }

  /* Three lines that become a cross, and a menu that takes the whole screen. */
  .nav-toggle { display: block; flex: none; }
  .nav-toggle summary {
    position: relative;
    z-index: 210;
    list-style: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .nav-toggle summary::-webkit-details-marker { display: none; }
  .nav-toggle summary::marker { content: ""; }
  .nav-toggle summary .bar {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.25s ease, opacity 0.18s ease;
  }
  .nav-toggle[open] summary .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[open] summary .bar:nth-child(2) { opacity: 0; }
  .nav-toggle[open] summary .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav-toggle ul {
    position: fixed;
    inset: 0;
    z-index: 200;
    margin: 0;
    padding: 6rem 1.5rem 4rem;
    list-style: none;
    background: var(--cream);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    overflow-y: auto;
  }
  .nav-toggle ul a {
    display: block;
    padding: 0.7rem 0.5rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.6rem;
    text-align: center;
  }
  .nav-toggle ul a[aria-current="page"] {
    color: var(--blue-ink);
    text-decoration: underline;
    text-underline-offset: 0.4em;
  }

  /* The bar makes its own stacking context, so it has to outrank the call bar
     while the full-screen menu is open. */
  html.nav-open .site-nav {
    z-index: 300;
    background: var(--cream);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.nav-open body { overflow: hidden; }
}

@media (max-width: 27rem) {
  .nav-brand-name { font-size: 1.02rem; }
  .nav-brand-mark { height: 1.95rem; }
}

@media (max-width: 52rem) {
  .hero { --hero-w: 100%; width: auto; margin-left: 0; }
  .hero-photo .photo { aspect-ratio: 3 / 2; object-position: center; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-heron .heron-stack { height: clamp(13rem, 52vw, 17rem); }

  .tiles { grid-template-columns: 1fr; gap: 2.25rem; }
  .tile--wide, .tile--third { grid-column: auto; }

  .photo-row, .photo-row--two { grid-template-columns: 1fr; }

  .two-col-list { columns: 1; }

  .contact-grid { grid-template-columns: 1fr; }

  .call-bar { display: flex; }
  .site-footer { padding-bottom: 2.5rem; }
  .footer-frame { flex-direction: column; gap: 1.25rem; text-align: center; }
  .footer-text { text-align: center; }
  .footer-logo { height: 10rem; }
  body { padding-bottom: 3.6rem; }
}

/* Galleries. Same pattern as the Symmetrics Health gallery: a plain grid, no
   magnifier cursor, the photograph grows a little under the cursor, and a click
   opens it full size. */

/* Two columns that pack tight, so every gap between photographs is the same
   and a portrait shot never leaves a hole beside it. */
.gal-grid {
  columns: 2;
  column-gap: 1.5rem;
  margin: 2rem 0 0;
}

.gal-tile {
  display: block;
  line-height: 0;
  overflow: hidden;
  border: 1px solid var(--blue);
  background: var(--cream-deep);
  aspect-ratio: var(--ar, 3 / 2);
  transition: border-color 0.2s ease;
}
.gal-grid > .gal-tile {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 1.5rem;
}
.gal-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}
.gal-tile:hover { border-color: var(--blue-ink); }
.gal-tile:hover img,
.gal-tile:focus-visible img { transform: scale(1.04); }

/* A portrait tile, so the gallery reads as a collage rather than a line of
   identical rectangles. */
.gal-tile--tall { aspect-ratio: 2 / 3; }

.page-main--narrow .gal-grid,
.page-main--narrow .photo-strip {
  --row: min(var(--page) - 2.5rem, 100vw - 2.5rem);
  width: var(--row);
  margin-left: calc(50% - var(--row) / 2);
}

.gallery-note {
  margin: 0.9rem 0 0;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--ink-muted);
  text-align: center;
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26, 24, 24, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 82vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  cursor: pointer;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: none;
  border: none;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  padding: 12px 18px;
  opacity: 0.85;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { opacity: 1; }
.lb-close { top: 12px; right: 18px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); font-size: 58px; }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); font-size: 58px; }

.lb-count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

@media (max-width: 40rem) {
  .gal-grid { columns: 1; }
  .gal-grid > .gal-tile { margin-bottom: 1.1rem; }
  .lightbox img { max-width: 92vw; max-height: 78vh; }
  .lb-prev, .lb-next { font-size: 44px; padding: 10px 10px; }
  .lb-close { top: 8px; right: 8px; }
}


/* Photo carousel: two photographs at a time, moving on their own, with the
   arrows, a swipe or a click to take over. Same pattern as the Symmetrics
   Health strip, running a fifth quicker. */

.photo-strip { margin-top: 2rem; }

.ps-viewport {
  overflow: hidden;
  margin: 0 -0.75rem;
  touch-action: pan-y;
}
.ps-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.ps-slide {
  flex: 0 0 50%;
  padding: 0 0.75rem;
  box-sizing: border-box;
}
.ps-open {
  display: block;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  border: 1px solid var(--blue);
  background: var(--cream-deep);
  transition: border-color 0.2s ease;
}
.ps-open img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ps-open:hover { border-color: var(--blue-ink); }
.ps-open:hover img,
.ps-open:focus-visible img { transform: scale(1.04); }

.ps-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.2rem;
}
.ps-btn {
  font-family: inherit;
  font-size: 1.35rem;
  line-height: 1;
  min-width: 2.8rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--blue);
  background: var(--cream);
  color: var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ps-btn:hover { border-color: var(--blue-ink); color: var(--blue-ink); }

@media (max-width: 40rem) {
  .ps-slide { flex: 0 0 100%; padding: 0 0.55rem; }
  .ps-viewport { margin: 0 -0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-track { transition: none; }
}

/* Driftwood page (round 16): Beverly's three sets. A plain two-across grid of
   3:2 tiles so every row ends level; an odd last photo sits centred. */
.dw-set { margin-top: 3.5rem; }
.dw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0 0;
}
.dw-grid > .gal-tile { aspect-ratio: 3 / 2; }
.dw-grid > .gal-tile:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 0.75rem);
}
@media (max-width: 40rem) {
  .dw-set { margin-top: 2.75rem; }
  .dw-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .dw-grid > .gal-tile:last-child:nth-child(odd) { width: 100%; }
}

/* Video hero (rounds 17 to 21, 2026-09-28). Every time the footage comes around, the
   white heron draws itself in (outline, then the fill), holds, then "Heron's Nest
   Sanctuary" fades in underneath, and the whole lockup stays until the last 2s of the
   clip, fades, and redraws on the next pass [Levi]. White because the black mark does
   not stand out against the footage [Levi]. Timeline in js/hero-video.js, driven off
   the video's own clock. Reduced motion, no JS or a refused autoplay show the poster
   frame with the finished lockup. */
.vhero { position: relative; width: 100vw; margin: 0 0 2.75rem calc(50% - 50vw); }
.vhero-stage {
  position: relative; overflow: hidden; background: var(--cream);
  /* the masthead and nav sit above, so the stage takes the rest of the first screen and
     the whole lockup, words included, is visible without scrolling */
  height: min(calc(100svh - 15rem), 58rem); min-height: 26rem; /* superseded in round 28 */
}
.vhero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity 2.5s ease;
}
.vhero.is-video-in .vhero-video { opacity: 1; }
.vhero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 64% at 50% 50%, rgba(20,18,18,.44) 0%, rgba(20,18,18,.2) 55%, rgba(20,18,18,0) 100%);
  opacity: 0; transition: opacity 1.4s ease;
}
.vhero-heron {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.1rem; pointer-events: none;
  color: #F7F3ED;
}
.vhero-heron .heron-stack { position: relative; aspect-ratio: 74.05 / 152.53; height: clamp(11rem, 36svh, 20rem); }
.vhero-heron .heron-draw, .vhero-heron .heron-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.vhero-heron .heron-draw { opacity: 0; transition: opacity 0.4s ease; }
.vhero-heron .heron-draw path { stroke: #F7F3ED; stroke-width: 0.75; }
.vhero-heron .heron-fill { opacity: 0; transition: opacity 1.2s ease; filter: invert(96%) sepia(6%) saturate(180%) brightness(103%); }
.vhero-words {
  margin: 0; text-align: center; line-height: 1.15;
  opacity: 0; transform: translateY(0.4rem);
  transition: opacity 1.4s ease, transform 1.4s ease;
  text-shadow: 0 1px 14px rgba(20,18,18,.45);
}
.vhero-words-name { display: block; font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: 0.02em; }
.vhero-words-sub {
  display: block; margin-top: 0.4rem;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem); letter-spacing: 0.62em; text-indent: 0.62em; text-transform: uppercase;
}
.vhero-words .tm { font-size: 0.7em; vertical-align: super; letter-spacing: 0; }
.vhero.is-drawing .vhero-veil { opacity: 1; }
.vhero.is-drawing .heron-draw { opacity: 1; }
.vhero.is-filled .heron-draw { opacity: 0; transition-duration: 0.9s; }
.vhero.is-filled .heron-fill { opacity: 1; }
.vhero.is-words .vhero-words { opacity: 1; transform: none; }
.vhero .vhero-heron { transition: opacity 2s ease; }
.vhero.is-heron-out .vhero-veil, .vhero.is-heron-out .vhero-heron { opacity: 0; transition: opacity 2s ease; }
/* between passes everything snaps back hidden without a visible rewind */
.vhero.is-resetting .vhero-heron, .vhero.is-resetting .vhero-heron *, .vhero.is-resetting .vhero-veil { transition: none !important; }
html:not(.js) .vhero-video, .vhero.is-static .vhero-video { opacity: 1; transition: none; }
html:not(.js) .vhero-veil, .vhero.is-static .vhero-veil,
html:not(.js) .vhero-heron .heron-fill, .vhero.is-static .heron-fill,
html:not(.js) .vhero-words, .vhero.is-static .vhero-words { opacity: 1; transform: none; transition: none; }
@media (max-width: 52rem) {
  .vhero-stage { height: max(24rem, calc(100svh - 15.5rem)); }
  .vhero-heron { gap: 0.8rem; }
  .vhero-heron .heron-stack { height: clamp(10rem, 32svh, 16rem); }
}

/* Round 27 (Version 3): drone photos */
.contact-aerial { margin: 2.75rem 0 0; }
.contact-aerial .photo { width: 100%; height: auto; display: block; aspect-ratio: 2 / 1; object-fit: cover; }

/* Round 29 (2026-09-30): liquid glass taken back out [Levi]. The bar runs the full
   width again in the same cream, now solid, with the blue rules above and below. The
   name stays in the bar from the start on every page, and on the home page the
   wordmark and tagline stay under the video. */
.site-nav, .site-nav.shrunk {
  background: var(--cream);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Home: the bar sits above the video, and the video takes the rest of the first screen. */
body[data-page="home"] .page-main { padding-top: 0; }
body[data-page="home"] .vhero-stage { height: calc(100svh - 5rem - 2px); min-height: 26rem; }
body[data-page="home"] .vhero + .masthead { padding: 0 1.25rem 2rem; margin-top: -0.25rem; }
.tagline { text-wrap: balance; }
@media (max-width: 64rem) {
  body[data-page="home"] .vhero-stage { height: calc(100svh - 3.2rem - 2px); }
}
@media (max-width: 52rem) {
  body[data-page="home"] .vhero-stage { height: max(24rem, 72svh); }
}

/* Gardens: Bev's straight-down aerial opens the gallery across both columns. */
.gal-grid > .gal-tile--feature { column-span: all; -webkit-column-span: all; --ar: 16 / 9; }