/* 707 Milledge Road | rev r45 2026-10-05 */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces-Italic-var.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #1f1f1c;
  --ink-soft: #4d4f49;
  --pine: #2f4a3c;
  --sage: #8c9a7e;
  --mist: #f0f2ec;
  --line: #d9ddd3;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 34rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--pine); outline-offset: 3px;
}

.skip {
  position: absolute; left: -999px; top: 0.5rem; background: var(--paper); padding: .5rem .75rem; z-index: 100;
}
.skip:focus { left: 0.5rem; }

/* ---------- type ---------- */
h1, h2, .h-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 340;
  font-variation-settings: "opsz" 144;
  font-feature-settings: "ss01", "ss02", "swsh";
  letter-spacing: -0.005em;
  line-height: 1.02;
  margin: 0 0 .9rem;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 6.6vw, 5.6rem); white-space: nowrap; }
h2 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); }
.h-title { font-size: clamp(2.5rem, 5.5vw, 4.5rem); }

/* the brochure's headline rule: a thin line between headline and kicker */
.kicker {
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.label { font-weight: 400; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 1.8rem 0 .6rem; }
.fine { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin: 0; opacity: .85; }
.panel p:not(.kicker):not(.label) { max-width: var(--measure); margin: 0 0 1rem; }
.on-photo { color: #fff; }
.on-photo .kicker { color: #fff; border-top-color: rgba(255,255,255,.65); }
.on-photo p { text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem var(--gutter);
  color: #fff;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.topbar.solid { background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(6px); }
.brand { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.35rem; color: inherit; text-decoration: none; white-space: nowrap; }
.topbar nav { display: flex; gap: 1.4rem; align-items: center; }
.topbar nav a { color: inherit; text-decoration: none; font-weight: 400; font-size: .9rem; }
.topbar nav a:hover { text-decoration: underline; }
.topbar nav a.cta { border: 1px solid currentColor; padding: .4rem .9rem; border-radius: 999px; }
@media (max-width: 760px) { .topbar nav a:not(.cta) { display: none; } }

/* ---------- pages ---------- */
/* Every section is one brochure page: full viewport tall on desktop, snapping into place. */
.page { position: relative; min-height: 100svh; scroll-snap-align: start; overflow: hidden; }
html { scroll-snap-type: y proximity; }
@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } }

.photo { position: relative; min-height: 0; }
.photo picture { display: block; height: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.on-photo-cap { position: absolute; left: 1.25rem; bottom: 1rem; color: #fff; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.35); }

/* the fixed top bar is ~3.6rem tall; a text panel that is taller than the window starts at the top of
   its page, so its top padding must clear the bar or the heading lands behind it */
.panel { padding: clamp(2.5rem, 6vh, 5rem) var(--gutter); padding-top: max(clamp(2.5rem, 6vh, 5rem), 4.5rem); align-self: center; }
.panel.centered { text-align: center; }
.panel.centered .kicker { border-top: none; padding-top: 0; position: relative; }
.panel.centered h2::after { content: ""; display: block; width: min(100%, 18rem); height: 1px; background: var(--line); margin: 1rem auto 0; }
.panel.centered p:not(.kicker) { margin-left: auto; margin-right: auto; }

/* full-bleed photo pages: cover, p.2, p.10, p.11 */
.hero, .bleed { display: grid; }
.hero picture, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed-photo { position: absolute; inset: 0; margin: 0; }
.bleed-photo picture, .bleed-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bleed-photo .on-photo-cap { z-index: 2; }
.on-photo-cap.cap-right { left: auto; right: 1.25rem; }
.hero img { object-position: center 50%; }
@media (orientation: portrait) { .hero img { object-position: center 46%; } }
.hero::after, .bleed::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 55%, rgba(0,0,0,.58) 100%);
}
.overlay { position: relative; z-index: 1; padding: clamp(2rem, 7vh, 5rem) var(--gutter); max-width: 46rem; }
.hero .overlay { max-width: none; }
.overlay.bl { align-self: end; }
.overlay.tr { justify-self: end; align-self: start; padding-top: clamp(5rem, 12vh, 8rem); text-align: right; }
.overlay.tr .kicker { border-top-color: rgba(255,255,255,.65); }
.overlay p:not(.kicker):not(.fine) { margin: 0; }
.hero h1 { margin-bottom: .9rem; }
.hero .kicker { color: #fff; border-top-color: rgba(255,255,255,.65); margin-bottom: .8rem; }

/* split pages: text panel + photo (p.4, p.7, p.8) */
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.split.s36 { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); }
/* photos in split pages fill the row without driving its height: the row is the viewport, or the
   text panel if that is taller. Without this a wide window lets the image's natural height set the
   row and the page overflows the viewport. */
.split .photo { min-height: 100svh; position: relative; }
.split .photo picture { position: absolute; inset: 0; }

/* p.3 */
.history { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
.history-left { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100svh; }
.history-left .photo { min-height: 46svh; }
.history-left .panel { padding-top: clamp(2rem, 4vh, 3rem); padding-bottom: clamp(2rem, 4vh, 3rem); }
.history-right {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: start; gap: 1.25rem;
  background: #fff; min-height: 100svh;
  padding: clamp(4.5rem, 10vh, 6rem) var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
}
.clip-cap-top { display: none; }
/* the full page, sized from the viewport so page + excerpt always fit one screen */
.clip-page { min-height: 0; }
.clip-wrap { position: relative; width: min(100%, calc((100svh - 38svh - 9rem) * 0.7725)); aspect-ratio: 1328 / 1719; }
.clip-wrap > a:not(.clip-box) { display: block; height: 100%; }
.clip-wrap img { width: 100%; height: 100%; object-fit: fill; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
/* outline around the Augusta Activities column: percentages of the scanned page */
.clip-box { position: absolute; left: 3.3%; top: 68.5%; width: 15.6%; height: 23.3%; border: 1.5px solid var(--ink); pointer-events: none; display: block; }
.clip-tap { display: none; }
/* leader from the outline down to the enlarged excerpt below */
.clip-leader { position: absolute; left: -.9rem; top: 80.15%; width: 1px; height: calc(19.85% + 1.25rem); background: var(--ink); pointer-events: none; }
.clip-leader::before, .clip-leader::after { content: ""; position: absolute; left: 0; height: 1px; background: var(--ink); }
.clip-leader::before { top: 0; width: .9rem; }
.clip-leader::after { bottom: 0; width: .9rem; }
.clip-zoom { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; height: 38svh; }
.clip-zoom a { display: block; height: 38svh; }
.clip-zoom img { height: 38svh; width: auto; max-width: 100%; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.clip-zoom figcaption { font-size: .95rem; color: var(--ink); padding-top: .25rem; }
.clip-zoom figcaption strong { font-weight: 600; }
.link-hint { color: var(--pine); text-decoration: underline; text-underline-offset: 3px; }

/* p.5: two inset renderings with white margins, centered headline, great room full-bleed at right */
.gather { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); }
/* the two small renderings keep their proportion; on short screens the column grows past the viewport
   rather than squeezing them into strips */
.gather-left { display: grid; grid-template-rows: auto auto auto; gap: clamp(.9rem, 2vh, 1.4rem); min-height: 100svh; padding: clamp(4.5rem, 8vh, 5rem) var(--gutter) 0; }
.gather-left .photo { min-height: 0; aspect-ratio: 16 / 10; }
.gather-left .panel { padding: clamp(1.25rem, 3vh, 2rem) 0 clamp(1.5rem, 3.5vh, 2.5rem); }
/* the great room fills whatever height the text column needs, never driving the row height itself */
.gather .photo:last-child { min-height: 100svh; position: relative; }
.gather .photo:last-child picture { position: absolute; inset: 0; }
.panel.centered.text-left p:not(.kicker) { text-align: left; margin-left: 0; }

/* p.6 */
.retreat { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
/* the primary suite fills the row without driving its height (same treatment as the great room) */
.retreat > .photo { min-height: 100svh; position: relative; }
.retreat > .photo picture { position: absolute; inset: 0; }
.retreat-right { display: grid; grid-template-rows: auto auto; min-height: 100svh; }
.retreat-right .panel { padding-top: clamp(4.5rem, 9vh, 6rem); padding-bottom: 1.25rem; }
/* bath rendering: the box is exactly the rendered image (no letterboxing), so the caption sits on the
   image's own bottom-left; it uses as much of the column's remaining height and width as the aspect allows */
/* bath rendering: full column width, edges aligned with the text above it, whole image shown.
   On short windows the Retreat column grows past the viewport (no snap on such pages) rather than
   the rendering shrinking. */
.inset { padding: 0 var(--gutter) clamp(1.5rem, 4vh, 3rem); min-height: 0; }
.inset-wrap { position: relative; display: block; width: 100%; }
.inset picture { display: block; }
.inset img { display: block; width: 100%; height: auto; }

/* p.7 details */
/* keep the ANGC/ACC flag markers in frame and out from under the fixed bar */
#location .photo { padding-top: 3.6rem; background: #fff; }
#location .photo img { object-position: center top; }
@media (max-width: 900px) { #location .photo { padding-top: 0; aspect-ratio: 1751 / 2000; } } /* whole aerial on phones: lot outline at the bottom, flags at the top */
.highlights { list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: var(--measure); }
.highlights li { padding: .4rem 0 .4rem 1.1rem; border-top: 1px solid var(--line); position: relative; font-size: .98rem; }
.highlights li:last-child { border-bottom: 1px solid var(--line); }
.highlights li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: .28rem; height: .28rem; border-radius: 50%; background: var(--pine); }
/* height-aware: on short windows the map gives up height so the page still fits one viewport (r39, after the gym line) */
.map { max-width: clamp(15rem, calc((100svh - 45.5rem) * 1.575), 24rem); margin: 0 0 .8rem; }
.distances { display: flex; flex-direction: column; gap: .1rem; font-weight: 400; color: var(--pine); font-size: .95rem; }

/* p.9 */
.plan { display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fff; padding-bottom: clamp(2rem, 5vh, 4rem); }
.plan .panel { padding-top: clamp(4.5rem, 10vh, 6rem); padding-bottom: clamp(1rem, 2.5vh, 2rem); }
.plan .panel h2 { margin-bottom: 0; }
/* the plan's link box is the drawing itself (5:3), centred, as large as the row allows, so the zoom
   pill sits on the drawing's corner */
.plan-fig { position: relative; min-height: 0; container-type: size; }
.plan-fig .zoomable { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: min(100%, calc((100cqw - 2 * var(--gutter)) * 0.6)); width: min(calc(100cqw - 2 * var(--gutter)), calc(100cqh * 1.6667)); }
.plan-fig picture { display: block; height: 100%; }
.plan-fig img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }

.history-left, .gather-left, .retreat-right, .plan, .inquire-inner { grid-template-columns: minmax(0, 1fr); }

/* ---------- floor plans (r39; four-sheet grid r40; proportions r43) ----------
   Lower and Main side by side on the first row, the Pool House centred beneath them, the portrait Top
   Level on the right spanning the full height. One number, --h1 (the first row's height), drives
   every track and is the largest value for which the grid fits both the available width and height.
   Sheet aspects: Lower 1.3865, Main 1.5565, Pool 2.759, Top 0.6773.
   The Pool House is drawn at 1.5x the main-house sheets' scale (it is a much smaller building), so its
   width is 1.78*h1 and its height 0.646*h1, rather than spanning the whole row; that is what keeps
   Lower and Main large. Top column width = total height * 0.6773. */
.plans { display: grid; grid-template-rows: auto auto; align-content: center; background: #fff; }
.plans .panel { align-self: end; padding-bottom: clamp(1rem, 2.5vh, 1.75rem); }
.plans-note { font-size: .92rem; color: var(--ink-soft); }
.plans-row {
  --gap: clamp(.9rem, 1.6vw, 1.5rem); --cap: 1.85rem;
  --h1: min(calc((100svh - 20rem - 2 * var(--cap) - var(--gap)) / 1.646),
            calc((100vw - 2 * var(--gutter) - 2.677 * var(--gap) - 0.6773 * var(--cap)) / 4.058));
  display: grid;
  grid-template-columns: calc(var(--h1) * 1.3865) calc(var(--h1) * 1.5565) calc((1.646 * var(--h1) + var(--cap) + var(--gap)) * 0.6773);
  grid-template-rows: var(--h1) var(--cap) calc(0.646 * var(--h1) + var(--gap)) var(--cap);
  column-gap: var(--gap); row-gap: 0;
  padding: 0 var(--gutter) clamp(1.5rem, 4vh, 3rem);
}
.plan-card { display: contents; }
.plan-card .zoomable { background: #faf7f1; box-shadow: 0 6px 20px rgba(31,31,28,.10); min-width: 0; min-height: 0; }
.plan-card picture { display: block; height: 100%; }
.plan-card img { width: 100%; height: 100%; object-fit: contain; }
.plan-card figcaption { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding-top: .65rem; align-self: start; }
.plan-lower > .zoomable { grid-column: 1; grid-row: 1; }       .plan-lower > figcaption { grid-column: 1; grid-row: 2; }
.plan-main  > .zoomable { grid-column: 2; grid-row: 1; }       .plan-main  > figcaption { grid-column: 2; grid-row: 2; }
.plan-pool  > .zoomable { grid-column: 1 / 3; grid-row: 3; margin-top: var(--gap); width: calc(1.78 * var(--h1)); justify-self: center; }
.plan-pool  > figcaption { grid-column: 1 / 3; grid-row: 4; justify-self: center; width: calc(1.78 * var(--h1)); }
.plan-top   > .zoomable { grid-column: 3; grid-row: 1 / 4; }   .plan-top   > figcaption { grid-column: 3; grid-row: 4; }
.zoom-hint.sm { right: .5rem; bottom: .5rem; font-size: .7rem; padding: .35rem .6rem; gap: .3rem; }
.plans-note .m { display: none; }
/* wide, short windows (1600 px+ and at least 1.75:1): heading in a left column, grid beside it using
   the full height. 1440x900 (1.6:1) stays stacked. */
@media (min-width: 1600px) and (min-aspect-ratio: 7 / 4) {
  .plans { grid-template-columns: minmax(0, 22fr) minmax(0, 78fr); grid-template-rows: 1fr; align-items: center; }
  .plans .panel { align-self: center; padding-bottom: clamp(2.5rem, 6vh, 5rem); }
  .plans-row {
    --h1: min(calc((100svh - 9rem - 2 * var(--cap) - var(--gap)) / 1.646),
              calc((78vw - 2 * var(--gutter) - 2.677 * var(--gap) - 0.6773 * var(--cap)) / 4.058));
    padding: clamp(4.5rem, 8vh, 6rem) var(--gutter) clamp(1.5rem, 4vh, 3rem) 0;
    align-self: center;
  }
}
@media (max-width: 900px) {
  .plans { align-content: start; }
  .plans-row { display: block; }
  .plan-card { display: block; margin: 0 0 1.5rem; }
  .plan-card > .zoomable { display: block; aspect-ratio: var(--ar); margin: 0; width: auto; }
  .plan-top > .zoomable { width: min(100%, 22rem); }
  .plan-pool > figcaption { width: auto; }
  .plans-note .m { display: inline; } .plans-note .d { display: none; }
  .zoom-hint.sm { font-size: .78rem; padding: .45rem .75rem; }
}

/* ---------- zoomable images + lightbox ---------- */
.zoomable { position: relative; display: block; cursor: zoom-in; }
.zoom-hint {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(31,31,28,.86); color: #fff; font-size: .8rem; font-weight: 400; letter-spacing: .04em;
  padding: .5rem .85rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.zoom-hint .m { display: none; }
@media (max-width: 900px) { .zoom-hint .m { display: inline; } .zoom-hint .d { display: none; } .zoom-hint { font-size: .85rem; padding: .6rem 1rem; } }
.zoomable:hover .zoom-hint { background: var(--pine); }

.lightbox { position: fixed; inset: 0; z-index: 200; background: #141814; color: #fff; --lb-bar: calc(3.9rem + env(safe-area-inset-top)); }
.lightbox[hidden] { display: none; }
/* the controls own a strip across the top; the image is fitted into the space beneath it, so they never sit on the picture */
.lb-stage { position: absolute; inset: var(--lb-bar) 0 0 0; overflow: hidden; touch-action: none; cursor: grab; }
.lb-stage.dragging { cursor: grabbing; }
.lb-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; }
.lb-bar { position: absolute; top: 0; left: 0; right: 0; height: var(--lb-bar); padding: max(.65rem, env(safe-area-inset-top)) .75rem 0; display: flex; justify-content: flex-end; align-items: flex-start; gap: .4rem; z-index: 2; background: #141814; }
.lb-btn { font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink); background: #fff; border: 0; border-radius: 999px; min-width: 2.6rem; height: 2.6rem; padding: 0 .9rem; cursor: pointer; }
.lb-btn:hover { background: var(--mist); }
.lb-close { background: var(--pine); color: #fff; }
.lb-close:hover { background: #3b5c4a; }
.lb-tip { position: absolute; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; font-size: .82rem; opacity: .85; background: rgba(0,0,0,.45); padding: .4rem .8rem; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.lb-tip.gone { opacity: 0; transition: opacity .6s; }
body.lb-open { overflow: hidden; }

/* ---------- reveal transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal-img img { opacity: 0; transform: scale(1.03); transition: opacity .9s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
  .reveal-img.in img { opacity: 1; transform: none; }
  .hero .overlay { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both .2s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------- inquiries (p.12) ---------- */
.inquire { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); background: var(--pine); color: #f4f6f1; }
.inquire-photo { min-height: 100svh; position: relative; }
.inquire-photo picture { display: block; position: absolute; inset: 0; }
.inquire-photo img { width: 100%; height: 100%; object-fit: cover; }
.inquire-inner { padding: clamp(3rem, 8vh, 6rem) var(--gutter); padding-top: max(clamp(3rem, 8vh, 6rem), 4.5rem); display: grid; gap: 2rem; align-content: center; }
.inquire h2 { color: #fff; }
.inquire .inquire-text p { max-width: 34rem; margin: 0; }
.contact-lines { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; margin: 0 0 1rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.4); }
.contact-lines a { color: #fff; font-weight: 400; font-size: 1.05rem; text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
.contact-lines .sep { opacity: .5; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.field { display: grid; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 400; letter-spacing: .02em; }
.field .opt { opacity: .65; font-weight: 300; margin-left: .3rem; }
.field input, .field textarea {
  font: inherit; font-weight: 300; color: var(--ink);
  background: #fff; border: 1px solid transparent; border-radius: 4px; padding: .65rem .8rem; width: 100%;
}
.field input:focus, .field textarea:focus { outline: 2px solid #fff; outline-offset: 2px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #e8b4a3; box-shadow: inset 0 0 0 1px #e8b4a3; }
.field textarea { resize: vertical; min-height: 6.5rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.actions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; }
button[type="submit"] {
  font: inherit; font-weight: 400; color: var(--pine); background: #fff; border: 0; border-radius: 999px;
  padding: .85rem 1.6rem; cursor: pointer;
}
button[type="submit"]:hover { background: var(--mist); }
button[type="submit"][disabled] { opacity: .6; cursor: default; }
.form-status { margin: 0; font-size: .95rem; min-height: 1.4em; }
.form-status.ok { color: #fff; font-weight: 400; }
.form-status.err { color: #f6d3c7; }

/* ---------- footer ---------- */
.foot { padding: 1.25rem var(--gutter); font-size: .8rem; color: var(--ink-soft); scroll-snap-align: end; }
.foot p { margin: 0; }

/* ---------- small screens: pages stack, no snapping ---------- */
@media (max-width: 900px) {
  .page { min-height: 0; }
  .hero { min-height: 100svh; }
  /* landscape photo pages (p.2, p.10, p.11): whole photo, then the text on white beneath */
  .bleed { min-height: 0; grid-template-rows: auto auto; background: #fff; }
  .bleed-photo { position: relative; inset: auto; aspect-ratio: 3 / 2; }
  .on-photo-cap.cap-right { left: 1.25rem; right: auto; }
  .bleed::after { display: none; }
  .bleed .overlay { color: var(--ink); max-width: none; padding: clamp(1.5rem, 4vh, 2.5rem) var(--gutter) clamp(2rem, 5vh, 3rem); text-align: left; justify-self: stretch; }
  .bleed .overlay p { text-shadow: none; }
  .bleed .overlay .kicker { color: var(--ink-soft); border-top-color: var(--line); }
  /* p.10 and p.11 both carry the title in print; stacked on a phone that reads as a repeat, so the
     lawn page is photo only and the pool page keeps the closing title */
  #lawn .overlay { display: none; }
  #lawn { background: none; }
  html { scroll-padding-top: 3.6rem; }
  .split, .split.s36, .history, .gather, .retreat, .inquire { grid-template-columns: minmax(0, 1fr); }
  /* phones: all text left-aligned (desktop keeps the brochure's centered Gather / Retreat / Site Plan headings) */
  .panel.centered { text-align: left; }
  .panel.centered h2::after { margin-left: 0; width: 100%; }
  .panel.centered p:not(.kicker) { margin-left: 0; margin-right: 0; }
  .split .photo, .gather .photo:last-child, .retreat > .photo, .inquire-photo, .history-left .photo,
  .history-left, .history-right, .gather-left, .retreat-right { min-height: 0; height: auto; }
  .retreat-right .panel { padding-top: clamp(2.5rem, 6vh, 5rem); }
  .photo { aspect-ratio: 4 / 3; }
  .gather-left .photo { aspect-ratio: 16 / 10; }
  .gather .photo:last-child { aspect-ratio: 16 / 10; margin: clamp(.9rem, 2vh, 1.4rem) var(--gutter) clamp(2rem, 5vh, 3rem); }
  .gather-left { grid-template-rows: auto auto auto; padding-top: clamp(1.25rem, 3vh, 2rem); }
  .gather-left .panel { order: -1; padding-top: clamp(1.5rem, 4vh, 2.5rem); } /* text first on phones */
  .history-left { grid-template-rows: auto auto; }
  .history-right { padding-top: 0; gap: 1rem; }
  .clip-wrap { width: 100%; }
  .clip-leader { display: none; }
  /* phones: the outlined column is the tap target and opens the readable column in the zoom view;
     the enlarged excerpt below the page is hidden (it lives in the zoom view instead) */
  .clip-zoom { display: none; }
  .clip-box { pointer-events: auto; border: 2px solid var(--pine); box-shadow: 0 0 0 4px rgba(47,74,60,.18), 0 0 0 9999px rgba(255,255,255,.28); border-radius: 2px; }
  .clip-tap {
    display: inline-flex; align-items: center; gap: .35rem; position: absolute; left: calc(100% + .6rem); top: 50%; transform: translateY(-50%);
    background: var(--pine); color: #fff; font-family: var(--text); font-size: .8rem; font-weight: 400; letter-spacing: .04em; white-space: nowrap;
    padding: .5rem .8rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  }
  .clip-tap::before { content: ""; width: 0; height: 0; border: 6px solid transparent; border-right-color: var(--pine); position: absolute; left: -11px; top: 50%; transform: translateY(-50%); }
  .history-right figcaption { display: none; }
  .clip-cap-top { display: block; margin: 0 0 .9rem; font-size: .95rem; color: var(--ink); }
  .clip-cap-top strong { font-weight: 600; }
  .clip-cap-top em, .clip-zoom figcaption em { font-style: italic; }
  .history-right { grid-template-rows: auto auto auto; }
  .inquire-photo { aspect-ratio: 4 / 3; }
  .inset { aspect-ratio: auto; display: block; }
  /* p.6 on phones: text first, then the primary suite and bath renderings, both inset with margins */
  .retreat-right { display: contents; }
  .retreat-right .panel { order: -1; padding-bottom: 0; }
  .retreat > .photo { order: 0; margin: clamp(1.25rem, 3vh, 2rem) var(--gutter) 0; aspect-ratio: 4 / 3; }
  .inset { order: 1; padding-top: clamp(.9rem, 2vh, 1.4rem); padding-bottom: clamp(2rem, 5vh, 3rem); }
  /* p.12 on phones: the form is the page; the photo follows it, so the snap lands on Inquiries */
  .inquire-photo { order: 2; }
  .inquire-inner { padding-top: clamp(2.5rem, 6vh, 4rem); }
  .plan { grid-template-rows: auto auto; }
  .plan-fig { display: block; padding: 0 var(--gutter); container-type: normal; }
  .plan-fig .zoomable { position: relative; top: auto; left: auto; transform: none; width: 100%; height: auto; }
  .plan-fig picture { height: auto; }
  .plan-fig img { height: auto; }
  .split .photo picture, .inquire-photo picture { position: absolute; }
  .form { grid-template-columns: 1fr; }
  .actions { grid-template-columns: 1fr; }
}