/* ==========================================================================
   ALDER HOUSE OF COMFORT — "A Day Here"
   Scroll position maps to time of day. Loaded AFTER styles.css so it can
   layer on the existing tokens, fonts and header/footer rather than replace
   them.

   Contrast rule, non-negotiable: the SKY changes continuously, but text
   always sits on an opaque surface whose colours are set per phase. No
   interpolated text colour, so no scroll position can produce unreadable
   type. Audience is 50-70 on a phone; legibility beats atmosphere.
   ========================================================================== */

/* ---------------------------------------------------------------- sky ---- */

/* Layering is explicit rather than relying on negative z-index, which paints
   unpredictably once cards introduce their own stacking contexts (via
   backdrop-filter / opacity) and let leaves cross the text. */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top, #46597a) 0%, var(--sky-mid, #bcd0e0) 52%, var(--sky-bottom, #e9b68b) 100%);
  transition: none;
}

/* A soft sun/moon that rises and sets with the scroll. */
.sky__orb {
  position: absolute;
  left: var(--orb-x, 72%);
  top: var(--orb-y, 60%);
  width: clamp(5rem, 11vw, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
              var(--orb-core, #fff6e0) 0%,
              var(--orb-core, #fff6e0) 38%,
              transparent 72%);
  opacity: var(--orb-opacity, .85);
  filter: blur(2px);
}

.leaf-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* Everything readable sits above the weather. */
.site-header { position: sticky; z-index: 30; }
#main-content,
.site-footer { position: relative; z-index: 10; }

/* ------------------------------------------------------------ the rail --- */
/* A thin fixed clock on the left edge showing the time you have scrolled to. */

/* Bottom-right: the one corner that never collides with text being read. */
.day-rail {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.75rem);
  bottom: calc(clamp(.75rem, 2vw, 1.75rem) + var(--safe-bottom));
  z-index: 20;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: .6rem;
  pointer-events: none;
}
.day-rail__time {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rail-ink, #30271f);
  background: var(--rail-bg, rgba(255, 253, 248, .82));
  border: 1px solid var(--rail-line, rgba(72, 54, 40, .18));
  border-radius: 999px;
  padding: .4rem .7rem;

  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.day-rail__track {
  width: clamp(4rem, 12vw, 7rem);
  height: 3px;
  border-radius: 3px;
  background: var(--rail-line, rgba(72, 54, 40, .18));
  position: relative;
  overflow: hidden;
}
.day-rail__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--day-progress, 0) * 100%);
  background: var(--rail-ink, #30271f);
  border-radius: 3px;
}
/* On a phone the clock is a fixed chip that scrolls over body text, which
   matters more than the flourish. The light still changes without it. */
@media (max-width: 46rem) {
  .day-rail { display: none; }
}

/* ------------------------------------------------------------- phases ---- */
/* Each band owns its own surface + ink. Deterministic, never interpolated.  */

.day-band {
  /* Near-opaque on purpose. A translucent card over a shifting sky is how
     you end up with unreadable body text at some scroll positions. */
  --surface: rgba(255, 253, 248, .97);
  --surface-solid: #fffdf8;
  --on-surface: #30271f;
  --on-surface-soft: #685b4e;
  --band-line: rgba(72, 54, 40, .16);
  --accent: #9b5d43;

  position: relative;
  padding-block: clamp(4.5rem, 12vh, 9rem);
}

.day-band[data-phase="night"],
.day-band[data-phase="latenight"] {
  --surface: rgba(18, 26, 40, .95);
  --surface-solid: #141d2c;
  --on-surface: #eef3fa;
  --on-surface-soft: #b8c6d8;
  --band-line: rgba(230, 240, 255, .18);
  --accent: #e3b778;
}

.day-band[data-phase="evening"] {
  --accent: #b9683c;
}

/* ------------------------------------------------------------- content --- */

.band-mark {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.band-mark__time {
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  font-family: var(--display);
  color: var(--on-surface);
}

.day-card {
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--band-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
  /* No backdrop-filter. At 97% opacity the blur is invisible, and blurring
     the backdrop of 8 cards over an animating sky cost ~10ms every frame. */
  max-width: 46rem;
}
.day-card h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.08;
  color: var(--on-surface);
  margin: 0 0 .6em;
}
.day-card h3 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--on-surface);
  margin: 0 0 .35em;
}
.day-card p {
  color: var(--on-surface-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.12rem);
  line-height: 1.7;
  margin: 0 0 1rem;
  max-width: 60ch;
}
.day-card p:last-child { margin-bottom: 0; }
.day-card--wide { max-width: 64rem; }

.day-band--right .day-card { margin-left: auto; }

/* The hero band, first thing on the page. */
.day-hero { min-height: min(92vh, 56rem); display: grid; align-items: center; }
.day-hero__title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7.5vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 .4em;
  color: var(--on-surface);
}
.day-hero__title em { font-style: italic; color: var(--accent); }
.day-hero__lede {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.6;
  color: var(--on-surface-soft);
  max-width: 34ch;
}

/* Two-up detail rows inside a band. */
.day-pair {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: 2rem;
}
.day-point {
  border-top: 2px solid var(--accent);
  padding-top: 1rem;
}
.day-point p { font-size: 1rem; margin: 0; }

/* Photo slots that sit inside a band. */
.day-photo {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--band-line);
  background: var(--surface);
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 3);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.day-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.day-photo__placeholder {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-surface-soft);
  text-align: center;
  padding: 1rem;
  line-height: 1.6;
}
.day-photo__placeholder::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 auto .7rem;
  border: 2px dashed currentColor;
  border-radius: .4rem;
  opacity: .5;
}

.day-split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
}
@media (max-width: 58rem) { .day-split { grid-template-columns: 1fr; } }

/* The night band gets extra breathing room — it is the emotional beat. */
.day-band[data-phase="night"] { padding-block: clamp(6rem, 18vh, 12rem); }
.night-statement {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.1;
  color: #f3f7fc;
  max-width: 18ch;
  margin: 0 0 1.2rem;
}
.night-statement em { font-style: italic; color: #e3b778; }

/* A single lit window in the dark. */
.lit-window {
  width: clamp(4.5rem, 9vw, 7rem);
  aspect-ratio: 3 / 4;
  border-radius: .5rem .5rem .2rem .2rem;
  background: linear-gradient(180deg, #ffe4a8, #f0b96a);
  box-shadow: 0 0 2.5rem .6rem rgba(255, 206, 128, .38), 0 0 7rem 2rem rgba(255, 190, 110, .22);
  position: relative;
  margin-bottom: 2rem;
}
.lit-window::before,
.lit-window::after {
  content: "";
  position: absolute;
  background: rgba(70, 50, 25, .5);
}
.lit-window::before { inset: 0 48% 0 48%; }
.lit-window::after { inset: 46% 0 52% 0; }

/* ---------------------------------------------------------- transitions -- */

.rise {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.rise.is-in { opacity: 1; transform: none; }
.rise:nth-child(2) { transition-delay: .07s; }
.rise:nth-child(3) { transition-delay: .14s; }
.rise:nth-child(4) { transition-delay: .21s; }

/* The header needs to stay readable over a changing sky. */
/* header is solid, no blur needed */

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .leaf-canvas { display: none; }
  .sky { background: linear-gradient(180deg, #8fb3d9 0%, #cfe0ec 55%, #f6ecd9 100%); }
  .sky__orb { display: none; }
}

/* ==========================================================================
   CONSTANT UI THEME
   The sky rotates through peach, amber and navy, so the interface has to go
   quiet. Controls are ONE colour at every scroll position and on every page:
   a button that changes as you scroll is a button an older visitor has to
   re-learn. Colour lives in the sky and in text accents, never in controls.
   ========================================================================== */

:root {
  --ui-ink: #241d17;        /* deep warm near-black - primary control     */
  --ui-ink-hover: #3b3026;
  --ui-cream: #fffdf8;
  --ui-accent: #9b5d43;     /* copper - TEXT accents only, never controls */
}

.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.25rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, transform 260ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--ui-ink); color: var(--ui-cream); }
.btn--primary:hover { background: var(--ui-ink-hover); color: var(--ui-cream); }

.btn--secondary { background: var(--ui-cream); color: var(--ui-ink); border-color: rgba(36,29,23,.18); }
.btn--secondary:hover { background: #f4eee3; color: var(--ui-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ---------------------------------------------------------- the header -- */
/* Solid, not translucent. It sits over a sky that goes from peach to navy,
   and nav links have to stay legible through all of it. */

.site-header {
  background: var(--paper, #f7f1e7);
  border-bottom: 1px solid rgba(72, 54, 40, .12);
  backdrop-filter: none;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.75rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand__logo { width: 2.6rem; height: 2.6rem; flex: none; border-radius: .7rem; display: block; }
.brand__name { display: block; font-family: var(--display); font-size: 1.12rem; font-weight: 700; color: var(--ink); line-height: 1.15; }
.brand__kind { display: block; font-family: var(--sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

.topnav { display: flex; align-items: center; gap: .35rem; }
.topnav a {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: .55rem .8rem;
  border-radius: 999px;
}
.topnav a:hover { background: rgba(72,54,40,.08); }
.topnav a[aria-current="page"] { background: rgba(72,54,40,.1); }

.header-contact { display: flex; align-items: center; gap: .5rem; }
.header-contact .btn { min-height: 2.85rem; padding: .6rem 1.15rem; font-size: .95rem; }

@media (max-width: 68rem) { .topnav { display: none; } }
@media (max-width: 34rem) { .header-contact .btn-label { display: none; } .brand__kind { display: none; } }

/* ------------------------------------------------- the four questions --- */

.ask-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: 2rem;
}
.ask {
  background: var(--surface);
  border: 1px solid var(--band-line);
  border-left: 3px solid var(--ui-accent);
  border-radius: var(--radius-md);
  padding: 1.35rem;
}
.ask__n { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .18em; color: var(--ui-accent); }
.ask h3 { font-family: var(--display); font-size: 1.14rem; margin: .4rem 0 .45rem; color: var(--on-surface); }
.ask p { font-size: .98rem; line-height: 1.6; color: var(--on-surface-soft); margin: 0; }

/* ------------------------------------------------------------ gallery --- */

.gallery-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: 2rem;
}
.shot {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
  font: inherit;
  color: inherit;
}
.shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.shot:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot__label {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-surface-soft);
  text-align: center;
  padding: 1rem;
}
.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem .85rem .75rem;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(18,14,10,.82), transparent);
}

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 11, 8, .95);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(.75rem, 3vw, 1.75rem);
}
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lightbox__count { font-family: var(--sans); font-size: .85rem; letter-spacing: .1em; color: #cfc4b4; }
.lightbox__stage { display: grid; place-items: center; min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); }
.lightbox__empty { color: #cfc4b4; font-family: var(--sans); text-align: center; padding: 3rem 1rem; border: 2px dashed rgba(255,255,255,.22); border-radius: var(--radius-md); }
.lightbox__cap { text-align: center; color: #e8dfd2; margin: .75rem auto 0; max-width: 42rem; }
.lightbox__nav { display: flex; justify-content: center; gap: .6rem; padding-top: .75rem; }

/* ------------------------------------------------------------ contact --- */

.contact-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-top: 1.75rem;
}
.contact-item {
  background: var(--surface);
  border: 1px solid var(--band-line);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.contact-item__label {
  display: block;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ui-accent);
  margin-bottom: .45rem;
}
.contact-item a,
.contact-item strong {
  font-family: var(--display);
  font-size: 1.12rem;
  color: var(--on-surface);
  text-decoration: none;
  line-height: 1.35;
  display: inline-block;
  font-weight: 400;
}
.contact-item a:hover { color: var(--ui-accent); text-decoration: underline; }
.contact-item small { display: block; margin-top: .4rem; font-size: .88rem; color: var(--on-surface-soft); }

/* Footer needs the full name/address/phone block for local search. */
.footer-nap { display: grid; gap: .35rem; margin-bottom: 1rem; }
.footer-nap a { color: inherit; }

/* ==========================================================================
   HOVER LIFT
   Applied to anything that behaves like a card. Transform + shadow only,
   so it is GPU-composited and costs nothing on scroll. Disabled for touch
   (no hover state on a phone) and for reduced-motion.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .ask,
  .day-photo,
  .shot,
  .contact-item,
  .day-point,
  .card,
  .panel-photo,
  .photo-slot,
  .timeline li,
  .question-list li {
    transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
    will-change: transform;
  }
  .ask:hover,
  .day-photo:hover,
  .contact-item:hover,
  .card:hover,
  .photo-slot:hover,
  .timeline li:hover,
  .question-list li:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }
  .shot:hover { transform: translateY(-6px) scale(1.012); box-shadow: var(--shadow-lg); }
  .btn:hover { transform: translateY(-3px); }
  .topnav a { transition: transform 200ms var(--ease), background 200ms ease; }
  .topnav a:hover { transform: translateY(-2px); }
  .brand:hover .brand__logo { transform: translateY(-3px) rotate(-4deg); transition: transform 320ms var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  .ask, .day-photo, .shot, .contact-item, .card, .photo-slot { transition: none; }
  .ask:hover, .day-photo:hover, .shot:hover, .contact-item:hover,
  .card:hover, .photo-slot:hover { transform: none; }
}

/* ==========================================================================
   STATIC-PHASE PAGES
   Inner pages share the palette, the sky and the controls, but hold ONE
   light instead of running the whole day. Same world, calmer room.
   ========================================================================== */

body[data-phase-fixed] .day-rail { display: none; }

body[data-phase-fixed] .container > h1,
body[data-phase-fixed] .container > h2 { color: var(--ink); }

/* Inner pages keep their existing sections, but those sections now sit on
   the shared surface tokens so they read against the sky. */
body[data-phase-fixed] .section {
  position: relative;
  z-index: 10;
}
/* Containers that already carry their own background (CTA panel, feature
   band) are excluded - giving them the shared surface wiped their gradient
   and left white text on cream. */
body[data-phase-fixed] .section > .container:not(.cta-panel):not(.feature-band) {
  background: rgba(255, 253, 248, .97);
  border: 1px solid rgba(72, 54, 40, .14);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
}
body[data-phase-fixed] .section--dark > .container {
  background: rgba(18, 26, 40, .95);
  border-color: rgba(230, 240, 255, .18);
}

/* ==========================================================================
   DARK SECTIONS ON FIXED-PHASE PAGES
   The original translucent-light cards (46% white) only read correctly over
   the old dark gradient. On the shared surface they render near-white with
   near-white text. Inside a dark section, cards are now dark with light text
   - the same treatment as the night band on the homepage.
   ========================================================================== */

body[data-phase-fixed] .section--dark .details-stack details,
body[data-phase-fixed] .section--dark .card,
body[data-phase-fixed] .section--dark .panel-photo,
body[data-phase-fixed] .section--dark .timeline li {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(230, 240, 255, .2);
  color: #eef3fa;
}
body[data-phase-fixed] .section--dark .details-stack details:hover,
body[data-phase-fixed] .section--dark .details-stack details[open] {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(240, 196, 119, .5);
}
body[data-phase-fixed] .section--dark .details-stack summary { color: #ffffff; }
body[data-phase-fixed] .section--dark .details-stack details p,
body[data-phase-fixed] .section--dark .card p,
body[data-phase-fixed] .section--dark .timeline li p { color: #c6d6e4; }
body[data-phase-fixed] .section--dark .details-stack summary::after {
  border-color: rgba(230, 240, 255, .38);
  color: #eef3fa;
}
body[data-phase-fixed] .section--dark h1,
body[data-phase-fixed] .section--dark h2,
body[data-phase-fixed] .section--dark h3 { color: #ffffff; }

/* Light sections: make sure nothing inherited white text onto a pale card. */
body[data-phase-fixed] .section:not(.section--dark) .details-stack details,
body[data-phase-fixed] .section:not(.section--dark) .card {
  color: var(--ink);
}
body[data-phase-fixed] .section:not(.section--dark) .details-stack summary { color: var(--ink); }

/* Containers that already carry their own strong background (the CTA panel,
   feature bands) must NOT get the shared light surface - doing so wiped the
   panel's dark gradient and left white text on cream. */
/* (CTA panel / feature band are excluded at the source rule above, so they
   keep their own styling untouched.) */

/* Text sitting directly in a dark section (not inside a card). */
body[data-phase-fixed] .section--dark > .container > p,
body[data-phase-fixed] .section--dark > .container > .lede,
body[data-phase-fixed] .section--dark .split > p,
body[data-phase-fixed] .section--dark .split > div > p { color: #c6d6e4; }
body[data-phase-fixed] .section--dark .eyebrow { color: #efc07b; }

/* ==========================================================================
   DARK SECTION SURFACES — final word
   This must out-specify the generic .section > .container rule above and
   come last in source order, or dark sections inherit the light surface and
   render white text on cream. That regression is exactly what happened.
   ========================================================================== */

body[data-phase-fixed] .section.section--dark > .container:not(.cta-panel):not(.feature-band) {
  background: rgba(16, 26, 38, .95);
  border: 1px solid rgba(230, 240, 255, .18);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
  color: #eef3fa;
}

/* Anything textual inside a dark section defaults to light ink unless it is
   sitting on its own light card. */
body[data-phase-fixed] .section.section--dark :is(h1, h2, h3, h4, summary, strong) { color: #ffffff; }
body[data-phase-fixed] .section.section--dark :is(p, li, dd, span) { color: #c6d6e4; }
body[data-phase-fixed] .section.section--dark .eyebrow { color: #efc07b; }
body[data-phase-fixed] .section.section--dark a:not(.btn) { color: #ffd9a0; }

/* Light sections: force dark ink so nothing inherits white onto cream. */
body[data-phase-fixed] .section:not(.section--dark) > .container:not(.cta-panel):not(.feature-band) :is(h1,h2,h3,h4,summary,strong) { color: var(--ink); }
body[data-phase-fixed] .section:not(.section--dark) > .container:not(.cta-panel):not(.feature-band) :is(p,li,dd) { color: var(--ink-soft); }

/* ==========================================================================
   CTA PANEL — off the forest green
   The original panel is a forest-green gradient, which was the one hue that
   fought the rotating sky. Brought into the same warm ink family as every
   other control so the whole site reads as one theme.
   ========================================================================== */

.cta-panel {
  background: linear-gradient(135deg, #241d17 0%, #3b3026 55%, #4c3b2c 100%) !important;
  color: var(--ui-cream);
}
.cta-panel :is(h1, h2, h3, strong) { color: #ffffff; }
.cta-panel :is(p, li) { color: #e4d9c9; }
.cta-panel .eyebrow { color: #e0b082; }
.cta-panel .button,
.cta-panel .button--light,
.cta-panel .btn {
  background: var(--ui-cream);
  color: var(--ui-ink);
  border-color: transparent;
}
.cta-panel .button:hover,
.cta-panel .button--light:hover,
.cta-panel .btn:hover { background: #f1e9db; color: var(--ui-ink); }

/* ==========================================================================
   SCHEDULER — calendar, page turn, time slots
   Designed as a single quiet instrument: one surface, one accent, generous
   targets. Families using this are often older and often on a phone, so
   every control clears 44px and every state is legible without colour alone.
   ========================================================================== */

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

.scheduler {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #dee4de);
  border-radius: var(--radius-lg, 24px);
  padding: clamp(1.1rem, 3vw, 1.9rem);
  box-shadow: 0 1px 2px rgba(27,42,36,.05), 0 18px 44px -24px rgba(27,42,36,.3);
}

.scheduler__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.scheduler__month {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.calendar-controls { display: flex; gap: .4rem; }
.calendar-button {
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease),
              transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.calendar-button:hover:not(:disabled) {
  background: var(--brand-lt);
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(27,42,36,.4);
}
.calendar-button:active:not(:disabled) { transform: translateY(0) scale(.96); box-shadow: none; }
.calendar-button:disabled { opacity: .32; cursor: not-allowed; }
.calendar-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
  margin-bottom: .45rem;
}
.calendar-weekdays span {
  text-align: center;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: .35rem;
}

/* The stage owns the 3D context so the turning leaf has real depth. */
.calendar-stage {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 40%;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
/* The cloned outgoing month, stacked exactly over the new one. */
.calendar-grid--leaf {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--surface);
  border-radius: 10px;
  will-change: transform, filter, opacity;
}

.calendar-grid__blank { aspect-ratio: 1; }

.calendar-day {
  aspect-ratio: 1;
  min-height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease),
              transform 150ms var(--ease), box-shadow 150ms var(--ease),
              border-color 150ms var(--ease);
}
.calendar-day:hover:not(:disabled) {
  background: var(--brand-lt);
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -8px rgba(27,42,36,.5);
}
.calendar-day:active:not(:disabled) { transform: translateY(0) scale(.95); box-shadow: none; }
.calendar-day:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 2; }

.calendar-day:disabled {
  background: transparent;
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  cursor: default;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Today: ringed, not filled - so it never competes with the selection. */
.calendar-day.is-today:not([aria-pressed="true"]) {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* Selected: filled + a check mark, so it does not rely on colour alone. */
.calendar-day[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(27,42,36,.65);
}
[data-theme="dark"] .calendar-day[aria-pressed="true"] { color: #0e1714; }

/* -------------------------------------------------------- time slots --- */

.time-panel { margin-top: 1.6rem; }
.time-panel__title {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 .7rem;
}
.time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
  gap: .45rem;
}
.time-slot {
  min-height: 2.9rem;
  padding: .5rem .4rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms var(--ease), color 150ms var(--ease),
              transform 150ms var(--ease), box-shadow 150ms var(--ease),
              border-color 150ms var(--ease);
}
.time-slot:hover {
  border-color: var(--brand);
  background: var(--brand-lt);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -8px rgba(27,42,36,.5);
}
.time-slot:active { transform: translateY(0) scale(.97); box-shadow: none; }
.time-slot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.time-slot[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(27,42,36,.65);
}
[data-theme="dark"] .time-slot[aria-pressed="true"] { color: #0e1714; }

.selection-summary {
  margin: 1.4rem 0 0;
  padding: .9rem 1.1rem;
  border-radius: var(--radius-md, 14px);
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
  font-size: 1rem;
  color: var(--ink-soft);
}
.selection-summary strong { color: var(--ink); font-family: var(--display); }

.form-status:empty { display: none; }
.form-status {
  margin-top: 1rem;
  padding: .85rem 1.05rem;
  border-radius: var(--radius-md, 14px);
  background: #fdeceb;
  border-left: 3px solid #b3261e;
  color: #7a1a15;
  font-size: 1rem;
}
[data-theme="dark"] .form-status { background: #3a1513; color: #ffb4ab; }

@media (prefers-reduced-motion: reduce) {
  .calendar-day, .time-slot, .calendar-button { transition: none; }
  .calendar-day:hover, .time-slot:hover, .calendar-button:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   TOKEN BRIDGE for the scheduler.
   The scheduler rules above were authored against --brand / --surface /
   --muted / --focus, which this project does not define (its palette is
   --forest / --paper / --alder in styles.css). An undefined var() makes the
   whole declaration invalid, which is what produced a selected date with
   white text on a white cell. Map the names here, scoped to the scheduler,
   so the rest of the site is untouched.
   -------------------------------------------------------------------------- */

.scheduler,
.visit-form {
  --brand: var(--forest, #4c604b);
  --brand-lt: color-mix(in srgb, var(--forest, #4c604b) 12%, #ffffff);
  --surface: var(--white, #fffdf8);
  --surface-2: color-mix(in srgb, var(--paper-warm, #eadfce) 42%, #ffffff);
  --muted: #7d6f61;
  --focus: var(--alder, #9b5d43);
}

/* Softer treatment for past dates: strike-through plus reduced weight reads
   as unavailable without colour alone, but a full line over every day of a
   past month was visually noisy. */
.calendar-day:disabled {
  text-decoration: none;
  opacity: .38;
  font-weight: 500;
}
.calendar-day:disabled::after {
  content: "";
  display: block;
  position: absolute;
  width: 48%;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.calendar-day { position: relative; }

/* ---------------------------------------------------- request result ---- */
/* The page shown after a visit request is submitted (visit-request.php). */

.result-card {
  max-width: 44rem;
  margin: clamp(1rem, 5vw, 3rem) auto;
  background: var(--white, #fffdf8);
  border: 1px solid var(--line, rgba(72,54,40,.17));
  border-left: 4px solid var(--forest, #4c604b);
  border-radius: var(--radius-lg, 1.45rem);
  padding: clamp(1.5rem, 5vw, 3rem);
  box-shadow: 0 1px 2px rgba(27,42,36,.05), 0 20px 48px -28px rgba(27,42,36,.35);
}
.result-card h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  color: var(--ink, #30271f);
  margin: 0 0 .5em;
}
.result-card .lede { color: var(--ink-soft, #685b4e); }
.result-card__note {
  margin-top: 1.4rem;
  padding: .9rem 1.1rem;
  background: color-mix(in srgb, var(--paper-warm, #eadfce) 45%, #fff);
  border-radius: var(--radius-md, 1rem);
  font-size: .98rem;
  color: var(--ink-soft, #685b4e);
}

/* ==========================================================================
   UNIFIED HEADER  (every page, October 2026)
   Replaces two competing headers: the homepage used .topnav with no mobile
   navigation at all, inner pages used .desktop-nav + a drawer. One header
   now, drawer-based, so the homepage finally has nav on a phone.
   ========================================================================== */

.site-header__inner { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.4rem); }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.brand__logo { flex: none; border-radius: 12px; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.brand__kind {
  font-family: var(--sans); font-size: .64rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
}
.brand:hover .brand__logo { transform: translateY(-2px) rotate(-3deg); }
.brand__logo { transition: transform 280ms cubic-bezier(.16,1,.3,1); }

.header-contact { display: flex; align-items: center; gap: .45rem; }
.header-contact__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.75rem; padding: .55rem 1rem;
  border-radius: 999px;
  font-family: var(--sans); font-size: .92rem; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background 180ms var(--ease), color 180ms var(--ease),
              transform 180ms var(--ease), box-shadow 180ms var(--ease),
              border-color 180ms var(--ease);
}
.header-contact__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(27,42,36,.6); }
.header-contact__btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
.header-contact__btn:focus-visible { outline: 3px solid var(--alder, #9b5d43); outline-offset: 2px; }

.header-contact__btn--ghost { color: var(--ink); border-color: var(--line, rgba(72,54,40,.2)); background: transparent; }
.header-contact__btn--ghost:hover { background: rgba(72,54,40,.06); color: var(--ink); }
.header-contact__btn--solid { background: var(--forest-deep, #2f4032); color: #fffdf8; }
.header-contact__btn--solid:hover { background: var(--forest, #4c604b); color: #fffdf8; }
.header-contact__btn--visit { background: var(--alder, #9b5d43); color: #fffdf8; }
.header-contact__btn--visit:hover { background: #8a5139; color: #fffdf8; }

/* Below the desktop breakpoint the drawer takes over. Keep the phone
   button visible at all sizes - calling is the primary action. */
@media (max-width: 68rem) {
  .desktop-nav { display: none; }
  .header-contact__btn--visit { display: none; }
}
@media (max-width: 46rem) {
  .header-contact__btn--ghost { display: none; }
  .header-contact__btn .btn-label { display: none; }
  .header-contact__btn { padding: .55rem .7rem; }
  .brand__kind { display: none; }
}
@media (min-width: 68.01rem) { .menu-toggle { display: none !important; } }

.mobile-drawer__contact {
  margin-top: auto; padding-top: 1.25rem;
  border-top: 1px solid rgba(72,54,40,.18);
  display: flex; flex-direction: column; gap: .5rem;
  font-size: .95rem;
}
.mobile-drawer__contact a { color: var(--forest-deep, #2f4032); font-weight: 600; }
.mobile-drawer__contact span { color: var(--ink-soft); }

/* ==========================================================================
   SHARED MOTION
   The homepage used .rise (day.js) and inner pages used .reveal (site.js).
   Give both the same curve so pages feel like one product.
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.is-visible, .reveal.in, .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .brand:hover .brand__logo,
  .header-contact__btn:hover { transform: none; }
}

/* Inner pages: leaves sit behind content, same as the homepage. */
body[data-phase-fixed] .leaf-canvas { opacity: .55; }

/* ==========================================================================
   ONE DARK, ONE ACCENT  —  colour unification pass
   Three unrelated darks had crept in: a warm brown CTA panel (#241d17), a
   cold navy card (rgba(18,26,40)), and the original olive green sections.
   Brown slab on blue sky, navy card on green - they fought each other.
   Everything dark now derives from the project's own forest palette, and
   copper/amber is the single accent. Last block wins the cascade.
   ========================================================================== */

:root {
  /* the one dark family */
  --dark-1: #1b2a20;   /* deepest - gradient end, footer            */
  --dark-2: #243527;   /* standard dark surface - cards, panels     */
  --dark-3: #32462f;   /* lifted - gradient start, hover            */
  --on-dark: #eef3ea;
  --on-dark-soft: #c2d0bd;
  --accent-warm: #d7b36a;   /* amber, from styles.css                */
  --accent-copper: #b4714c; /* lifted alder, readable on dark        */

  /* controls were brown; bring them into the forest family */
  --ui-ink: #243527;
  --ui-ink-hover: #32462f;
}

/* ---- CTA panel: forest, not brown ---- */
.cta-panel {
  background: linear-gradient(140deg, var(--dark-1) 0%, var(--dark-2) 52%, var(--dark-3) 100%) !important;
  color: var(--on-dark);
}
.cta-panel :is(h1,h2,h3,strong) { color: #ffffff; }
.cta-panel :is(p,li) { color: var(--on-dark-soft); }
.cta-panel .eyebrow { color: var(--accent-warm); }

/* ---- dark sections: same family, not navy ---- */
body[data-phase-fixed] .section.section--dark > .container:not(.cta-panel):not(.feature-band) {
  background: rgba(36, 53, 39, .96);
  border-color: rgba(215, 179, 106, .22);
  color: var(--on-dark);
}
body[data-phase-fixed] .section.section--dark .details-stack details,
body[data-phase-fixed] .section.section--dark .card,
body[data-phase-fixed] .section.section--dark .timeline li {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(215, 179, 106, .2);
}
body[data-phase-fixed] .section.section--dark .details-stack details:hover,
body[data-phase-fixed] .section.section--dark .details-stack details[open] {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(215, 179, 106, .5);
}
body[data-phase-fixed] .section.section--dark :is(p,li,dd,span) { color: var(--on-dark-soft); }
body[data-phase-fixed] .section.section--dark .eyebrow { color: var(--accent-warm); }

/* the olive band behind those cards, warmed slightly to match */
.section--dark {
  background:
    radial-gradient(circle at 82% 12%, rgba(215,179,106,.14), transparent 26rem),
    linear-gradient(155deg, var(--dark-1) 0%, #2c3f2d 58%, #35492f 100%) !important;
}

/* ---- the night band on the homepage: forest at night, not navy ---- */
.day-band[data-phase="night"],
.day-band[data-phase="latenight"] {
  --surface: rgba(27, 42, 32, .95);
  --surface-solid: #1b2a20;
  --on-surface: var(--on-dark);
  --on-surface-soft: var(--on-dark-soft);
  --band-line: rgba(215, 179, 106, .22);
  --accent: var(--accent-warm);
}

/* ---- footer: the deepest tone, same family ---- */
.site-footer { background: var(--dark-1); color: var(--on-dark-soft); }
.site-footer a { color: #dce7d6; }
.site-footer h2, .site-footer h3, .site-footer .brand__name { color: #ffffff; }

/* ---- result page accent ---- */
.result-card { border-left-color: var(--forest, #4c604b); }

/* ---- buttons stay one colour, now forest ---- */
.btn--primary, .header-contact__btn--solid { background: var(--dark-2); color: #fffdf8; }
.btn--primary:hover, .header-contact__btn--solid:hover { background: var(--dark-3); color: #fffdf8; }
.header-contact__btn--visit { background: var(--accent-copper); color: #fffdf8; }
.header-contact__btn--visit:hover { background: #9e6141; color: #fffdf8; }

/* ---- "View the gallery" — a deliberate, prominent button ---- */
.btn--gallery {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.35rem; padding: .9rem 1.8rem;
  border-radius: 999px;
  background: var(--accent-copper, #b4714c);
  color: #fffdf8;
  font-family: var(--sans); font-size: 1.05rem; font-weight: 700;
  text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(27,42,36,.75);
  transition: background 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.btn--gallery:hover { background: #9e6141; color: #fffdf8; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(27,42,36,.85); }
.btn--gallery:active { transform: translateY(0) scale(.98); box-shadow: 0 6px 14px -8px rgba(27,42,36,.7); }
.btn--gallery:focus-visible { outline: 3px solid var(--accent-warm, #d7b36a); outline-offset: 3px; }
.btn--gallery svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .btn--gallery:hover { transform: none; } }

/* the gallery section is a scroll target, so clear the sticky header */
#gallery { scroll-margin-top: 6rem; }

/* ==========================================================================
   HOME HERO — photographs first
   Replaces the single small card floating in empty sky. The house and the
   kitchen are both visible before any scrolling, and the day-timeline framing
   is gone (we have no photographs documenting a day, so claiming one would be
   a story the pictures cannot support).
   ========================================================================== */

.home-hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem); }
.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 62rem) { .home-hero__grid { grid-template-columns: 1fr; } }

.home-hero__badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--forest-deep, #2f4032);
  background: rgba(76, 96, 75, .12);
  border: 1px solid rgba(76, 96, 75, .25);
  border-radius: 999px;
  padding: .45rem 1rem;
  margin-bottom: 1.3rem;
}
.home-hero__title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  color: var(--ink, #30271f);
  margin: 0 0 .55em;
}
.home-hero__title em { font-style: italic; color: var(--alder, #9b5d43); }
.home-hero__lede {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft, #685b4e);
  max-width: 34ch;
  margin: 0 0 1.9rem;
}
.home-hero__lede strong { color: var(--ink); font-weight: 700; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.home-hero__facts {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem;
  list-style: none; margin: 2.2rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid rgba(72, 54, 40, .16);
}
.home-hero__facts li {
  font-family: var(--sans); font-size: .95rem;
  color: var(--ink-soft, #685b4e); line-height: 1.35;
}
.home-hero__facts strong {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem; font-weight: 700;
  color: var(--forest-deep, #2f4032);
  line-height: 1;
  margin-bottom: .2rem;
}

/* --- the photo pair --- */
.home-hero__media { position: relative; padding-bottom: clamp(2.5rem, 7vw, 4.5rem); }
.home-hero__photo { margin: 0; position: relative; }
.home-hero__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-lg, 1.45rem);
}
.home-hero__photo figcaption {
  position: absolute; left: .9rem; bottom: .9rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .06em;
  color: #fffdf8;
  background: rgba(27, 42, 32, .72);
  backdrop-filter: blur(4px);
  padding: .35rem .75rem; border-radius: 999px;
}
.home-hero__photo--main img {
  aspect-ratio: 16 / 11;
  box-shadow: 0 2px 4px rgba(27,42,36,.08), 0 30px 60px -28px rgba(27,42,36,.6);
}
.home-hero__photo--inset {
  position: absolute;
  right: clamp(-.5rem, 1vw, 1rem);
  bottom: 0;
  width: clamp(9rem, 34%, 15rem);
}
.home-hero__photo--inset img {
  aspect-ratio: 4 / 3;
  border: 5px solid var(--paper, #f7f1e7);
  box-shadow: 0 2px 4px rgba(27,42,36,.1), 0 22px 44px -20px rgba(27,42,36,.65);
}
.home-hero__photo--inset figcaption { left: .7rem; bottom: .7rem; font-size: .7rem; }

@media (max-width: 34rem) {
  .home-hero__photo--inset { width: 42%; right: 0; }
  .home-hero__facts { gap: 1rem 1.6rem; }
  .home-hero__facts strong { font-size: 1.5rem; }
}

/* --- "a first look" row --- */
.firstlook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem; margin: 2rem 0 .5rem;
}
.firstlook {
  position: relative; display: block;
  border-radius: var(--radius-md, 1rem);
  overflow: hidden; text-decoration: none;
  box-shadow: 0 1px 2px rgba(27,42,36,.07), 0 12px 26px -18px rgba(27,42,36,.5);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.firstlook img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.firstlook span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.8rem .85rem .7rem;
  font-family: var(--sans); font-size: .9rem; font-weight: 700; color: #fff;
  background: linear-gradient(to top, rgba(20,30,22,.85), transparent);
}
.firstlook:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(27,42,36,.1), 0 20px 36px -18px rgba(27,42,36,.65); }
.firstlook:focus-visible { outline: 3px solid var(--alder, #9b5d43); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .firstlook:hover { transform: none; } }

/* ==========================================================================
   IMAGE SIZING — height:auto is mandatory
   Every <img> ships width/height attributes (good: they reserve space and
   stop layout shift). But those attributes become presentational hints, and
   an unset CSS height lets height="1050" beat `aspect-ratio`. That is what
   rendered the first-look tiles at 298x1050 instead of 4:3.
   Any image whose box is defined by CSS must therefore set height explicitly.
   ========================================================================== */

.firstlook img {
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-hero__photo img { height: auto; }
.home-hero__photo--main img { aspect-ratio: 16 / 11; object-fit: cover; }
.home-hero__photo--inset img { aspect-ratio: 4 / 3; object-fit: cover; }

.shot img { height: 100%; }          /* inside a fixed aspect-ratio button */
.day-photo img { height: 100%; }
.photo-slot__image { height: 100%; } /* slot owns the aspect ratio */

/* auto-fit was emitting a stray empty 0px track; auto-fill + explicit
   max keeps three even tiles and no phantom column */
.firstlook-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* Portrait slots need their own aspect ratio, or they stretch to the card
   height (measured 206x401, 0.52) and crop a 4:5 portrait to a sliver. */
.photo-slot--portrait { aspect-ratio: 4 / 5; }
.photo-slot--landscape { aspect-ratio: 4 / 3; }
.photo-slot[data-photo-slot$="-portrait"] { aspect-ratio: 4 / 5; }

/* The hero had a large dead zone under the facts row. */
.home-hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
.home-hero__facts { margin-top: 1.75rem; padding-top: 1.25rem; }

/* ==========================================================================
   UNIVERSAL PHOTO VIEWER
   ========================================================================== */
body.pv-open { overflow: hidden; }

.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 3px solid var(--accent-warm, #d7b36a); outline-offset: 3px; }

.pv[hidden] { display: none; }
.pv {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(16, 24, 18, .95);
  backdrop-filter: blur(6px);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(.75rem, 2.5vw, 1.5rem);
  animation: pvIn 200ms ease-out;
}
@keyframes pvIn { from { opacity: 0; } to { opacity: 1; } }

.pv__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pv__count { font-family: var(--sans); font-size: .9rem; letter-spacing: .08em; color: #c2d0bd; font-variant-numeric: tabular-nums; }
.pv__close {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3rem; padding: .6rem 1.15rem;
  border-radius: 999px; border: 1px solid rgba(238,243,234,.35);
  background: rgba(255,255,255,.08); color: #eef3ea;
  font: 700 1rem/1 var(--sans); cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.pv__close:hover { background: #eef3ea; color: #1b2a20; transform: translateY(-1px); }
.pv__close:focus-visible { outline: 3px solid var(--accent-warm, #d7b36a); outline-offset: 3px; }

.pv__stage { display: grid; place-items: center; min-height: 0; padding-block: .9rem; }
.pv__stage img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;          /* never let width/height attrs win */
  object-fit: contain;
  border-radius: var(--radius-md, 1rem);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.8);
}
.pv__in { animation: pvZoom 240ms cubic-bezier(.2,.8,.2,1); }
@keyframes pvZoom { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }

.pv__foot { text-align: center; }
.pv__cap { color: #dfe8da; margin: 0 auto .7rem; max-width: 44rem; font-size: 1rem; }
.pv__nav { display: flex; justify-content: center; gap: .6rem; }
.pv__nav[hidden] { display: none; }
.pv__btn {
  min-height: 3rem; padding: .6rem 1.4rem;
  border-radius: 999px; border: 0;
  background: rgba(255,255,255,.1); color: #eef3ea;
  font: 700 1rem/1 var(--sans); cursor: pointer;
  transition: background 160ms ease;
}
.pv__btn:hover { background: #eef3ea; color: #1b2a20; }
.pv__btn:focus-visible { outline: 3px solid var(--accent-warm, #d7b36a); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pv { animation: none; }
  .pv__close:hover { transform: none; }
}

/* Long unbroken strings (email addresses, URLs) were overflowing the contact
   cards. Allow them to wrap, and let the address scale down a touch. */
.contact-item { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.contact-item a,
.contact-item strong {
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: clamp(.98rem, 1.5vw, 1.12rem);
  line-height: 1.4;
}
.contact-grid { align-items: start; }

/* The night band carried a very large vertical padding from the original
   day-scroll concept, leaving a long empty stretch under the card. */
.day-band[data-phase="night"] { padding-block: clamp(3rem, 8vh, 5.5rem); }
.day-band { padding-block: clamp(2.75rem, 7vh, 5rem); }

/* ==========================================================================
   MOBILE DRAWER — rebuilt
   The inherited drawer used oversized serif links
   with ↗ arrows on cream. Replaced with a dark forest panel, compact sans
   navigation, a real primary action, and a contact block that is reachable
   with a thumb. Distinctly Alder, and faster to scan.
   ========================================================================== */

.menu-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(16, 24, 18, .55);
  backdrop-filter: blur(3px);
  border: 0; cursor: pointer;
}
.menu-backdrop[hidden] { display: none; }

.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(21rem, 88vw);
  display: flex; flex-direction: column;
  padding: 1.1rem clamp(1.1rem, 4vw, 1.6rem) calc(1.3rem + var(--safe-bottom, 0px));
  background:
    radial-gradient(60rem 30rem at 120% -10%, rgba(215,179,106,.14), transparent 60%),
    linear-gradient(170deg, #243527 0%, #1b2a20 65%, #16241b 100%);
  color: #eef3ea;
  box-shadow: -24px 0 60px -24px rgba(0,0,0,.65);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 340ms cubic-bezier(.22,1,.3,1);
}
.mobile-drawer[aria-hidden="false"] { transform: none; }

.mobile-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(215,179,106,.22);
}
.mobile-drawer__label {
  margin: 0;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: #b9cbb4;
}
.drawer-close {
  width: 2.9rem; height: 2.9rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(238,243,234,.3);
  background: rgba(255,255,255,.07);
  color: #eef3ea; font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.drawer-close:hover { background: #eef3ea; color: #1b2a20; transform: rotate(90deg); }
.drawer-close:focus-visible { outline: 3px solid var(--accent-warm, #d7b36a); outline-offset: 3px; }

/* --- the links: compact sans, numbered, no serif, no arrows --- */
.mobile-nav {
  display: flex; flex-direction: column;
  margin: 1.1rem 0 0; counter-reset: navitem;
}
.mobile-nav a {
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  min-height: 3.4rem;
  padding: .55rem .6rem .55rem .9rem;
  border-radius: .7rem;
  font-family: var(--sans);
  font-size: 1.06rem; font-weight: 600;
  color: #eef3ea; text-decoration: none;
  transition: background 170ms ease, padding-left 170ms ease, color 170ms ease;
}
.mobile-nav a::before {
  counter-increment: navitem;
  content: counter(navitem, decimal-leading-zero);
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent-warm, #d7b36a);
  opacity: .75;
  min-width: 1.5rem;
}
.mobile-nav a::after { content: none; }     /* kill the inherited ↗ */
.mobile-nav a:hover { background: rgba(255,255,255,.08); padding-left: 1.15rem; }
.mobile-nav a:focus-visible { outline: 3px solid var(--accent-warm, #d7b36a); outline-offset: 2px; }
.mobile-nav a[aria-current="page"] {
  background: rgba(215,179,106,.14);
  color: #ffffff;
}
.mobile-nav a[aria-current="page"]::before { opacity: 1; }
.mobile-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 3px; border-radius: 3px; background: var(--accent-warm, #d7b36a);
}

/* --- contact block, thumb-reachable at the bottom --- */
.mobile-drawer__contact {
  margin-top: auto; padding-top: 1.3rem;
  border-top: 1px solid rgba(215,179,106,.22);
  display: flex; flex-direction: column; gap: .6rem;
  font-family: var(--sans); font-size: .95rem;
}
.mobile-drawer__contact a {
  display: flex; align-items: center; gap: .6rem;
  min-height: 2.9rem;
  color: #eef3ea; font-weight: 600; text-decoration: none;
}
.mobile-drawer__contact a:first-child {
  justify-content: center;
  background: var(--accent-copper, #b4714c);
  border-radius: 999px;
  padding: .75rem 1rem;
  font-weight: 700; color: #fffdf8;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.8);
}
.mobile-drawer__contact a:first-child:hover { background: #9e6141; }
.mobile-drawer__contact a:not(:first-child):hover { color: var(--accent-warm, #d7b36a); text-decoration: underline; }
.mobile-drawer__contact span { color: #a9bca4; line-height: 1.5; font-size: .9rem; }

.mobile-drawer__footer { display: none; }   /* Alpha's tagline line */

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer { transition: none; }
  .drawer-close:hover { transform: none; }
  .mobile-nav a:hover { padding-left: .9rem; }
}

/* The inherited Alpha rule styles .mobile-nav a::after (the ↗). Reusing that
   pseudo-element for the active marker inherited its box and rendered as a
   copper blob over the "01" counter. Use a border on the link instead. */
.mobile-nav a::after,
.mobile-nav a[aria-current="page"]::after {
  content: none !important;
  display: none !important;
}
.mobile-nav a {
  border-left: 3px solid transparent;
  padding-left: .75rem;
}
.mobile-nav a[aria-current="page"] {
  border-left-color: var(--accent-warm, #d7b36a);
  background: rgba(215,179,106,.14);
}
.mobile-nav a:hover { padding-left: 1rem; }
@media (prefers-reduced-motion: reduce) { .mobile-nav a:hover { padding-left: .75rem; } }

/* ==========================================================================
   DRAWER — light. A full-height panel of forest green read as a slab.
   Same warm paper as the header, so the drawer feels like the header
   extending downward rather than a separate dark surface. Structure stays:
   compact sans, numbered, copper accents, real call button.
   ========================================================================== */

.mobile-drawer {
  background:
    radial-gradient(40rem 22rem at 110% -8%, rgba(155,93,67,.07), transparent 60%),
    linear-gradient(180deg, #faf6ef 0%, #f4ece0 100%);
  color: var(--ink, #30271f);
  box-shadow: -22px 0 54px -26px rgba(48, 39, 31, .45);
  border-left: 1px solid rgba(72,54,40,.12);
}

.mobile-drawer__top { border-bottom-color: rgba(72,54,40,.16); }
.mobile-drawer__label { color: var(--ink-soft, #685b4e); }

.drawer-close {
  border-color: rgba(72,54,40,.26);
  background: rgba(255,255,255,.7);
  color: var(--ink, #30271f);
}
.drawer-close:hover { background: var(--ink, #30271f); color: #fffdf8; }

.mobile-nav a { color: var(--ink, #30271f); }
.mobile-nav a::before { color: var(--alder, #9b5d43); opacity: .9; }
.mobile-nav a:hover { background: rgba(72,54,40,.07); }
.mobile-nav a[aria-current="page"] {
  background: rgba(155,93,67,.1);
  border-left-color: var(--alder, #9b5d43);
  color: var(--ink, #30271f);
}

.mobile-drawer__contact { border-top-color: rgba(72,54,40,.16); }
.mobile-drawer__contact a { color: var(--ink, #30271f); }
.mobile-drawer__contact a:first-child {
  background: var(--accent-copper, #b4714c);
  color: #fffdf8;
  box-shadow: 0 10px 22px -12px rgba(48,39,31,.55);
}
.mobile-drawer__contact a:not(:first-child):hover { color: var(--alder, #9b5d43); }
.mobile-drawer__contact span { color: var(--ink-soft, #685b4e); }

.menu-backdrop { background: rgba(48, 39, 31, .42); }

/* ==========================================================================
   NAVIGATION PERFORMANCE & FEEL
   The hover lag was not imaginary: nav links transitioned `padding-left`,
   which forces layout on every animation frame. Only `transform` and
   `opacity` are composited on the GPU, so every movement now uses transform.
   Backdrop-filter is also dropped from the hot paths (header, drawer,
   backdrop) - it repaints a blurred copy of everything beneath it.
   ========================================================================== */

/* --- never animate layout --- */
.mobile-nav a,
.desktop-nav__link,
.desktop-nav__cta {
  transition: background-color 160ms ease,
              color 160ms ease,
              transform 180ms cubic-bezier(.22,1,.3,1),
              box-shadow 180ms ease !important;
  will-change: transform;
}
.mobile-nav a:hover { padding-left: .75rem; transform: translateX(4px); }
.mobile-nav a { backface-visibility: hidden; }

/* --- desktop nav: a real, smooth lift --- */
.desktop-nav { display: flex; align-items: center; gap: .2rem; }
.desktop-nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  color: var(--ink, #30271f); text-decoration: none;
}
.desktop-nav__link:hover {
  background: rgba(72,54,40,.07);
  transform: translateY(-2px);
}
.desktop-nav__link:active { transform: translateY(0) scale(.98); }
.desktop-nav__link:focus-visible { outline: 3px solid var(--alder, #9b5d43); outline-offset: 2px; }

/* current page: a underline that does not shift anything */
.desktop-nav__link[aria-current="page"] { color: var(--alder, #9b5d43); }
.desktop-nav__link[aria-current="page"]::before {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem;
  height: 2px; border-radius: 2px; background: var(--alder, #9b5d43);
}

/* --- drop backdrop-filter from the hot paths --- */
.site-header,
.mobile-drawer,
.menu-backdrop,
.home-hero__photo figcaption { backdrop-filter: none !important; }

/* --- give every interactive surface the same smooth lift --- */
.header-contact__btn,
.btn, .btn--gallery, .firstlook, .shot,
.calendar-day, .time-slot, .calendar-button {
  transition: background-color 160ms ease, color 160ms ease,
              transform 180ms cubic-bezier(.22,1,.3,1),
              box-shadow 180ms ease;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav a:hover,
  .desktop-nav__link:hover,
  .header-contact__btn:hover,
  .btn:hover, .firstlook:hover, .shot:hover { transform: none !important; }
}

/* styles.css:749 replaces the active link's ::before with a gold dot, which
   wiped the "01" counter and stretched into a pill. Restore the counter. */
.mobile-nav a[aria-current="page"]::before {
  counter-increment: navitem;
  content: counter(navitem, decimal-leading-zero) !important;
  width: auto !important;
  height: auto !important;
  min-width: 1.5rem;
  border-radius: 0 !important;
  background: none !important;
  color: var(--alder, #9b5d43) !important;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  opacity: 1;
}
/* and the inherited rule also shifts padding on hover/current - block it */
.mobile-nav a:hover,
.mobile-nav a[aria-current="page"] { padding-left: .75rem; }

/* ==========================================================================
   HEADER RESPONSIVE — corrective
   A later `.desktop-nav { display:flex }` (added during the performance pass)
   overrode the media query that hides the nav below the desktop breakpoint,
   so the full nav rendered at 360px, crushing the brand onto four lines and
   doubling the header height. Re-assert the breakpoints LAST so they win,
   and stop the brand wrapping.
   ========================================================================== */

.site-header__inner { flex-wrap: nowrap; min-height: 4.6rem; }
.brand { min-width: 0; }
.brand__text { min-width: 0; }
.brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__kind { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* below the desktop breakpoint: drawer only */
@media (max-width: 68rem) {
  .desktop-nav { display: none !important; }
  .menu-toggle { display: inline-flex !important; }
  .header-contact__btn--visit { display: none !important; }
}
/* at desktop: nav only, no hamburger */
@media (min-width: 68.0625rem) {
  .desktop-nav { display: flex !important; }
  .menu-toggle { display: none !important; }
}
/* phones: keep the call button, drop the rest of the chrome */
@media (max-width: 34rem) {
  .header-contact__btn--ghost { display: none !important; }
  .header-contact__btn .btn-label { display: none; }
  .header-contact__btn { padding: .55rem .75rem; }
  .brand__kind { display: none; }
  .brand__name { font-size: 1rem; }
  .brand__logo { width: 2.2rem; height: 2.2rem; }
}

/* ==========================================================================
   POLISH PASS  —  2026-10-31
   Six reported faults, each fixed at its cause rather than patched over.
   This block is last in the last stylesheet, so it wins without !important
   except where an earlier !important has to be unseated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE PAGE SHAKE on the "Open directions" link.
   .text-link animated `gap`. Gap is a layout property: growing it on hover
   made the link wider, which re-flowed the contact strip, which changed the
   page height, which toggled the scrollbar, which moved the cursor off the
   link - so it shrank, the scrollbar left, and the cursor was back on it.
   That loop is the shaking. The arrow now moves with transform, which the
   compositor handles and which costs no layout at all.
   -------------------------------------------------------------------------- */
.text-link {
  gap: .55rem;
  transition: color 200ms ease;
}
.text-link::after {
  display: inline-block;
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
}
.text-link:hover { gap: .55rem; }
.text-link:hover::after { transform: translateX(.3rem); }

/* Same fault, drawer links: padding-left re-flows every frame of the hover. */
.mobile-nav a {
  transition: background-color 170ms ease, color 170ms ease;
}
.mobile-nav a::before { transition: transform 200ms cubic-bezier(.16, 1, .3, 1); }
.mobile-nav a:hover::before { transform: translateX(.22rem); }

/* --------------------------------------------------------------------------
   2. THE MENU BUTTON.
   The three bars sat off-centre for two reasons: the button resolved to
   `inline-flex` (from a later !important) while its centring came from
   `place-items`, which flex ignores on the inline axis; and the bars were
   spaced -0.35rem / 0 / +0.30rem, which is not symmetrical.
   Rebuilt: bars centred by transform from a single origin, evenly spaced,
   2px so they read as deliberate rather than hairline.
   -------------------------------------------------------------------------- */
.menu-toggle {
  position: relative;
  place-items: center;
  width: 2.95rem;
  height: 2.95rem;
  padding: 0;
  border: 1px solid rgba(72, 54, 40, .22);
  border-radius: 50%;
  background: #f6efe3;
  color: #2b302c;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1);
}
.menu-toggle:hover { background: #fffdf8; border-color: rgba(72, 54, 40, .38); transform: translateY(-1px); }
.menu-toggle:active { transform: translateY(0); }
.menu-toggle:focus-visible { outline: 2px solid var(--accent-warm, #d7b36a); outline-offset: 3px; }

/* one centred box; the bars are positioned off its exact centre */
.menu-toggle__lines {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 2px;
  margin: 0;
  transform: translate(-50%, -50%);
  background: currentColor;
  border-radius: 2px;
  transition: background-color 160ms ease 120ms;
}
.menu-toggle__lines::before,
.menu-toggle__lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  /* symmetrical: identical magnitude above and below */
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1);
}
.menu-toggle__lines::before { top: -.34rem; }
.menu-toggle__lines::after  { top:  .34rem; }

.menu-toggle[aria-expanded="true"] .menu-toggle__lines {
  background: transparent;
  transition: background-color 120ms ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { transform: translateY(.34rem) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::after  { transform: translateY(-.34rem) rotate(-45deg); }

/* --------------------------------------------------------------------------
   3. ONE HEADER BREAKPOINT.
   There were three (55rem in styles.css, 68rem and 68.01rem in day.css), so
   dragging the window edge crossed bands where both the nav and the button
   were shown, or neither. Everything below now hinges on 68rem exactly.
   -------------------------------------------------------------------------- */
@media (max-width: 68rem) {
  .desktop-nav { display: none !important; }
  .menu-toggle { display: grid !important; }
  .header-contact__btn--visit { display: none !important; }
}
@media (min-width: 68.0625rem) {
  .desktop-nav { display: flex !important; }
  .menu-toggle { display: none !important; }
  .header-contact__btn--visit { display: inline-flex !important; }
}

/* A resize must not animate. Without this the header transitions chase the
   pointer while the edge is being dragged, which is the "glitching" look. */
.is-resizing .menu-toggle,
.is-resizing .menu-toggle__lines,
.is-resizing .menu-toggle__lines::before,
.is-resizing .menu-toggle__lines::after,
.is-resizing .brand,
.is-resizing .brand__logo,
.is-resizing .desktop-nav__link,
.is-resizing .header-contact__btn,
.is-resizing .site-header,
.is-resizing .site-header * { transition: none !important; }

/* --------------------------------------------------------------------------
   4. THE MARK.
   It rotated on hover, which is what read as unserious. It now lifts a
   single pixel and its ring warms - the kind of movement you notice only
   if you look for it.
   -------------------------------------------------------------------------- */
.brand {
  position: relative;
  gap: .72rem;
  border-radius: .8rem;
  padding: .2rem .35rem .2rem .2rem;
  margin-left: -.2rem;
  transition: background-color 220ms ease;
}
.brand:hover { background: rgba(72, 54, 40, .045); }
.brand:focus-visible { outline: 2px solid var(--accent-warm, #d7b36a); outline-offset: 2px; }

.brand__logo {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 13px;
  transition: transform 300ms cubic-bezier(.16, 1, .3, 1);
}
.brand:hover .brand__logo,
.brand:focus-visible .brand__logo {
  transform: translateY(-1.5px);   /* no rotation */
}
.brand__logo .brand__ring {
  stroke-opacity: .42;
  transition: stroke-opacity 300ms ease;
}
.brand:hover .brand__logo .brand__ring { stroke-opacity: .9; }

.brand__name {
  font-size: 1.1rem;
  letter-spacing: -.012em;
  transition: color 220ms ease;
}
.brand__kind {
  font-size: .625rem;
  letter-spacing: .17em;
  opacity: .78;
}

/* --------------------------------------------------------------------------
   5. GREEN AS AN ACCENT, NOT THE SUBJECT.
   The dark bands were a saturated forest (#1b2a20). Pulled back to a warm
   charcoal that only leans green, so the colour reads as a thread running
   through the site rather than as the site's whole identity. Contrast
   against --on-dark stays above 7:1 everywhere.
   -------------------------------------------------------------------------- */
:root,
body,
body[data-phase-fixed] {
  --dark-1: #2b302c;   /* deepest  - footer, gradient end   11.8:1 */
  --dark-2: #363b36;   /* standard - cards, panels          10.0:1 */
  --dark-3: #454b43;   /* lifted   - gradient start, hover   7.9:1 */
  --ui-ink: #363b36;
  --ui-ink-hover: #454b43;
}

/* --------------------------------------------------------------------------
   6. ONE RHYTHM FOR EVERY SECTION.
   Sections were setting their own padding ad hoc, so the beat changed from
   one band to the next. Single scale, applied everywhere.
   -------------------------------------------------------------------------- */
.section,
.day-band {
  padding-block: clamp(3.75rem, 8vw, 6.5rem);
}
.section--compact { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }

.section > .container > .eyebrow,
.day-band .band-mark {
  margin-bottom: .85rem;
}
.section > .container > h2,
.section > .container > .split__copy > h2,
.day-band .day-card > h2 {
  margin-top: 0;
  margin-bottom: .9rem;
}
.section > .container > .lede,
.section > .container > p.lede {
  margin-top: 0;
  margin-bottom: 2.25rem;
  max-width: 54ch;
}

@media (prefers-reduced-motion: reduce) {
  .text-link::after,
  .menu-toggle,
  .menu-toggle__lines,
  .menu-toggle__lines::before,
  .menu-toggle__lines::after,
  .brand__logo { transition: none !important; }
  .brand:hover .brand__logo { transform: none !important; }
}

/* ==========================================================================
   MOBILE OVERFLOW + VIEWER PASS  —  2026-10-31
   ========================================================================== */

/* --------------------------------------------------------------------------
   7. THE GALLERY RAN OFF THE SCREEN.
   Two stylesheets described the same grid differently:

     styles.css : grid-template-columns: repeat(12, 1fr)
                  .gallery-item:nth-child(n) { grid-column: span 12 }
                  .gallery-item:nth-child(even) { width: 88% }
     day.css    : grid-template-columns: repeat(auto-fit, minmax(min(100%,15rem),1fr))

   The auto-fit template resolved to ONE 240px column plus eleven 0px
   columns. The zero-width columns are invisible, but their eleven 14.4px
   gaps are not: every tile spanning 12 came out at 240 + 158 = 398px inside
   a 304px container. The 88% rule then shrank alternate tiles to 350px and
   shifted them right, which is why the photos stepped off the screen edge
   in alternating directions.

   html has overflow-x: clip, so documentElement.scrollWidth kept reporting
   375 and the page looked fine to a scripted check - but iOS Safari still
   pans a clipped overflow, which is what put half of each photo off-screen.

   One definition. No spans, no percentage widths, no phantom columns.
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(.9rem, 2.5vw, 1.25rem);
  align-items: start;
}

/* specificity 0,3,0 - beats .gallery-item:nth-child(n) at 0,2,0 */
.gallery-grid > .gallery-item:nth-child(n),
.gallery-grid > .shot:nth-child(n) {
  grid-column: auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
}

/* Nothing inside a tile may be wider than the tile. */
.gallery-grid > * > *,
.gallery-grid img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   8. NOTHING MAY EXTEND THE PAGE SIDEWAYS.
   A clipped overflow still pans on iOS. These stop it being created at all.
   -------------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: clip; }

.container { min-width: 0; }
.gallery-grid, .firstlook-grid, .day-split, .split, .visit-layout, .form-grid,
.contact-strip, .footer-grid, .timeline, .profile-details { min-width: 0; }
.gallery-grid > *, .firstlook-grid > *, .day-split > *, .split > *,
.visit-layout > *, .form-grid > *, .contact-strip > *, .footer-grid > * { min-width: 0; }

img, svg, video, canvas { max-width: 100%; }

/* The drawer is parked off-screen to the right. It is visibility:hidden and
   transformed, but make it inert to layout too so no engine counts it. */
.mobile-drawer[aria-hidden="true"] { pointer-events: none; }

/* --------------------------------------------------------------------------
   9. THE VIEWER CROPPED LARGE PHOTOS ON DESKTOP.
   The stage is a 1fr grid row, and the image was sized with percentage
   max-* against it. Percentages inside a nested grid row resolve against a
   height the row has not finished computing, so a tall photo (the bathroom,
   1200x1500) overflowed its row instead of fitting. Sizing against the
   viewport is unambiguous and gives the whole photo at every window size.
   -------------------------------------------------------------------------- */
.lightbox__stage {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.lightbox__stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* 100dvh less the bar, caption, nav and padding */
  max-height: min(100%, calc(100dvh - 11rem));
  object-fit: contain;
  margin: 0 auto;
}
@supports not (height: 100dvh) {
  .lightbox__stage img { max-height: min(100%, calc(100vh - 11rem)); }
}
@media (max-width: 48rem) {
  .lightbox__stage img { max-height: min(100%, calc(100dvh - 9rem)); }
}

/* --------------------------------------------------------------------------
   10. TILE FRAMES.
   photo-slot absolutely positions its image, so the frame must carry the
   ratio. Landscape and portrait get their own, and neither may exceed the
   tile width on a phone.
   -------------------------------------------------------------------------- */
.photo-slot { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.photo-slot--landscape { aspect-ratio: 4 / 3; }
.photo-slot--portrait  { aspect-ratio: 4 / 5; }
.photo-slot > .photo-slot__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (max-width: 30rem) {
  /* on the narrowest phones a 4:5 frame eats the screen - square it up */
  .photo-slot--portrait { aspect-ratio: 1 / 1; }
}

/* --------------------------------------------------------------------------
   11. REVEALS MUST NOT BE ABLE TO HIDE CONTENT.
   .reveal / .rise start at opacity 0 and wait for an IntersectionObserver.
   If the observer is slow (iOS during fast momentum scrolling), or the
   script fails, or JS is off entirely, the photograph simply never appears
   - which is how half a gallery ends up invisible on a phone.

   The animation below reaches opacity 1 on its own after 2.5s whatever
   happens. When the observer does its job the class removes the animation
   and the normal transition takes over, so nothing changes visually in the
   ordinary case; this only ever fires when something has gone wrong.
   -------------------------------------------------------------------------- */
@keyframes alder-reveal-failsafe { to { opacity: 1; transform: none; } }

.reveal, .rise {
  animation: alder-reveal-failsafe 400ms ease 2.5s forwards;
}
.reveal.is-visible, .reveal.in, .reveal.is-in,
.rise.is-in, .rise.is-visible, .rise.in {
  animation: none;
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .rise { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   12. THE PHOTO VIEWER SHOWED ONLY PART OF EACH PHOTO ON DESKTOP.
   .pv is a fixed grid: auto (bar) / 1fr (stage) / auto (footer). The image
   was sized with max-height: 100%, and a percentage resolves against the
   PARENT'S height - but a 1fr grid row has no definite height at the time
   that percentage is computed, so the declaration resolved to none and the
   image took its natural size.

   Measured at 1440x900 before this fix: the bathroom photo (1500x2250)
   rendered 1322x1983 inside a 719px stage, with its bottom edge at y=2110
   in a 900px window - well over half the photo off screen.

   Sizing against the viewport instead of the parent gives a definite value
   that is correct on the first layout pass. 12rem is the bar plus the
   footer plus the viewer's own padding.
   -------------------------------------------------------------------------- */
.pv__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.pv__stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 12rem);
  object-fit: contain;
  margin: 0 auto;
}
@supports not (height: 100dvh) {
  .pv__stage img { max-height: calc(100vh - 12rem); }
}
@media (max-width: 48rem) {
  .pv__stage img { max-height: calc(100dvh - 9.5rem); }
  @supports not (height: 100dvh) {
    .pv__stage img { max-height: calc(100vh - 9.5rem); }
  }
}
/* Short landscape windows: the chrome is proportionally much larger. */
@media (max-height: 34rem) {
  .pv__stage img { max-height: calc(100dvh - 7rem); }
}

/* Decorative leaf field: clip it to the viewport so a drifting leaf can
   never be the thing that makes the page scrollable sideways. */
.leaf-field { overflow: hidden; pointer-events: none; }

/* --------------------------------------------------------------------------
   13. THE CALENDAR DID NOT FIT ON A PHONE.
   .calendar-day carries min-width: 2.75rem (44px, the iOS touch-target
   ideal) and aspect-ratio: 1. Seven of them plus six 0.3rem gaps need
   337px, but the scheduler's stage is only 252px wide at a 375px viewport
   - so the last two columns of every week sat off the right edge, and the
   whole booking page could be panned sideways.

   44px cannot be honoured on a 320px screen: seven columns plus gaps plus
   two sets of padding do not fit, and that is arithmetic, not styling.
   Below 30rem the cells shrink to whatever does fit, which lands near
   34-40px - comfortably above the 24px WCAG 2.5.8 minimum - and the
   padding and gaps tighten to buy those cells as much room as possible.
   -------------------------------------------------------------------------- */
.calendar-grid,
.calendar-weekdays {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
}
.calendar-stage, .scheduler { min-width: 0; max-width: 100%; }

@media (max-width: 30rem) {
  .scheduler { padding: .85rem; }
  .calendar-grid, .calendar-weekdays { gap: .2rem; }
  .calendar-day {
    min-width: 0;
    min-height: 0;
    border-radius: 9px;
    font-size: .9rem;
  }
  .calendar-weekdays span { font-size: .62rem; }
}
/* 360-430px: a little more room, but 44px still does not fit with gaps. */
@media (min-width: 30.0625rem) and (max-width: 34rem) {
  .scheduler { padding: 1rem; }
  .calendar-grid, .calendar-weekdays { gap: .25rem; }
  .calendar-day { min-width: 0; min-height: 2.2rem; }
}

/* --------------------------------------------------------------------------
   14. THE BOOKING PAGE BLED OFF THE LEFT EDGE ON A 320px SCREEN.
   .visit-layout used  minmax(0, .9fr) minmax(21rem, 1.1fr).
   21rem is 336px, so on a 320px screen the second column alone was wider
   than the display. The narrow-screen override switched to a single `1fr`,
   but an `fr` track's implicit minimum is `auto` - i.e. the max-content
   width of the scheduler - so it still inflated past the viewport and the
   whole card was pushed 8px off the left edge.

   min() lets the 21rem preference collapse when there is not 21rem to be
   had, and minmax(0, 1fr) stops the single-column case inflating.
   -------------------------------------------------------------------------- */
.visit-layout {
  grid-template-columns: minmax(0, .9fr) minmax(min(21rem, 100%), 1.1fr);
}
@media (max-width: 60rem) {
  .visit-layout { grid-template-columns: minmax(0, 1fr); }
}
.visit-layout > * { min-width: 0; max-width: 100%; }

/* Same implicit-minimum trap anywhere else a form sits in a grid. */
.form-grid { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.form-grid > .field--full { grid-column: 1 / -1; }
input, select, textarea, button { max-width: 100%; }

/* Tighten the gutter on the smallest phones so the content keeps its room. */
@media (max-width: 22.5rem) {
  .container { width: min(calc(100% - 1.25rem - var(--safe-left) - var(--safe-right)), var(--max)); }
}

/* An earlier rule made the scheduler full-bleed below 22.5rem using
   width:100vw with a negative margin. 100vw is the viewport INCLUDING any
   classic scrollbar, so the card ended up ~8px wider than the space it had
   and hung off the left edge. Now that the day cells shrink to fit, the
   calendar no longer needs to escape its container. */
@media (max-width: 22.5rem) {
  .visit-layout .scheduler {
    width: auto;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: .7rem;
    border-left-width: 1px;
    border-right-width: 1px;
    border-radius: var(--radius-lg, 24px);
    overflow-x: visible;
  }
}

/* --------------------------------------------------------------------------
   15. THE CONSENT CHECKBOX WAS BEING STYLED AS A TEXT FIELD.
   The consent control lives inside <div class="field">, so this matched it:

       .field input, .field select, .field textarea {
         min-height: 3.15rem; padding: .75rem .85rem; border: 1px solid ...;
       }

   min-height wins over the height: 1.1rem meant for it, so the checkbox was
   laid out as a 17.6 x 50.4px padded, bordered box. On iOS that renders as
   a large rounded square that collides with the label beside it.

   Checkboxes and radios are opted out of the text-field treatment, and the
   row is flex so the label can never wrap underneath the box.
   -------------------------------------------------------------------------- */
.field input[type="checkbox"],
.field input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border-radius: 3px;
  border-width: 1px;
  flex: 0 0 auto;
  accent-color: var(--forest, #4c604b);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}
.checkbox input {
  margin-top: .18rem;
}
.checkbox label {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;          /* the whole sentence is the tap target */
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   16. "98258Open directions"
   In the Location cell the address <span> and the "Open directions" link are
   both inline, so they ran together with no space between them. The cell is
   now a column: label, address, then the link on its own line.
   -------------------------------------------------------------------------- */
.contact-strip__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
}
.contact-strip__item > .contact-strip__label { margin-bottom: .25rem; }
.contact-strip__item > .text-link { margin-top: .45rem; }

/* --------------------------------------------------------------------------
   17. THE WELCOME SCREEN ON A SMALL PHONE.
   On an iPhone 13 mini the usable viewport is about 375x629 once Safari's
   bars are counted - not 812. Measured there, the hero ran 1119px tall and
   only the badge, headline and lede were above the fold; the buttons ended
   at y=686 and the facts at y=847, both off screen.

   Most of that height was the facts list: each stat put a 1.9rem number on
   its own line, so three stats cost 132px. On a short viewport they become
   three compact single lines instead, the headline and spacing tighten, and
   the whole introduction - including what matters most, the two RNs and the
   24/7 cover - lands above the fold with the buttons underneath it.

   Only short viewports are affected; roomy screens keep the large type.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) and (max-height: 50rem) {
  .home-hero { padding-block: 1.05rem 1.75rem; }

  .home-hero__badge {
    font-size: .66rem;
    padding: .32rem .7rem;
    margin-bottom: .85rem;
    letter-spacing: .1em;
  }

  .home-hero__title {
    font-size: clamp(1.95rem, 9.2vw, 2.5rem);
    margin-bottom: .4em;
  }

  .home-hero__lede {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: .9rem;
    max-width: none;
  }

  /* three short lines instead of three stacked number-blocks */
  .home-hero__facts {
    flex-direction: column;
    gap: .4rem;
    margin-top: 0;
    padding-top: .7rem;
    margin-bottom: .9rem;
  }
  .home-hero__facts li { font-size: .9rem; line-height: 1.3; }
  .home-hero__facts strong {
    display: inline;
    font-size: 1rem;
    margin: 0 .3rem 0 0;
  }

  .home-hero__actions { gap: .6rem; }
  .home-hero__actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: .8rem;
    font-size: .95rem;
    text-align: center;
    justify-content: center;
  }

  /* the photo pair belongs below the fold on a phone - it should not push
     the introduction off the screen */
  .home-hero__media { padding-bottom: 1.5rem; margin-top: 1.75rem; }
}

/* --------------------------------------------------------------------------
   18. THE ADDRESS ON THE WELCOME PAGE.
   Requested by the owner: the street address should be visible on arrival,
   not only down in the contact section. It sits under the two buttons and
   opens directions on tap.
   -------------------------------------------------------------------------- */
.home-hero__address {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.4;
}
.home-hero__address a {
  color: var(--ink-soft, #685b4e);
  text-decoration: none;
  border-bottom: 1px solid rgba(72, 54, 40, .28);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.home-hero__address a:hover,
.home-hero__address a:focus-visible {
  color: var(--alder, #9b5d43);
  border-bottom-color: currentColor;
}

/* Short phones: the address must not push the buttons off the screen, so
   the hero tightens a little further to pay for it. */
@media (max-width: 48rem) and (max-height: 50rem) {
  .home-hero { padding-block: .9rem 1.5rem; }
  .home-hero__badge { margin-bottom: .7rem; }
  .home-hero__lede { margin-bottom: .8rem; }
  .home-hero__facts { padding-top: .6rem; margin-bottom: .8rem; }
  .home-hero__address { margin-top: .7rem; font-size: .88rem; }
}