/* 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:not([data-page="home"]) .nav-brand {
  width: auto;
  opacity: 1;
  visibility: visible;
}
body:not([data-page="home"]) .nav-inner { min-height: 5rem; }
body:not([data-page="home"]) .nav-brand-mark { height: 3.2rem; }
body:not([data-page="home"]) .nav-brand-name { font-size: 1.5rem; }
body:not([data-page="home"]) .nav-brand-sub { font-size: 0.62rem; }

body:not([data-page="home"]) .site-nav.shrunk .nav-inner { min-height: 3.1rem; }
body:not([data-page="home"]) .site-nav.shrunk .nav-brand-mark { height: 2.5rem; }
body:not([data-page="home"]) .site-nav.shrunk .nav-brand-name { font-size: 1.22rem; }
body:not([data-page="home"]) .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); }

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; }
.footer-text p { margin: 0 0 0.45rem; }
.footer-tag {
  font-style: italic;
  color: var(--blue-ink);
}
.footer-reg { font-size: 0.92rem; color: var(--ink-muted); }
.footer-fine {
  margin-top: 1.1rem !important;
  font-size: 0.92rem;
  color: var(--ink-muted);
}
.footer-fine a { color: var(--ink-muted); }
.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:not([data-page="home"]) .nav-inner { min-height: 3.2rem; }
  body:not([data-page="home"]) .nav-brand-mark { height: 2.2rem; }
  body:not([data-page="home"]) .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; }
}