/*
 * Apartments for Rent in Huntley Illinois - Woodcreek Apartments site styles;
 * see docs/build-brief.md. Colours, type sizes, and spacing come from the old
 * woodcreekhuntley.com's Elementor Default Kit, as J. Arthur's October 17, 2026
 * export has it: Woodcreek green, a deep forest green, Caprasimo for the home
 * headline, Montserrat for headings (the kit's own font for h1 and h3, and a
 * stand-in for its custom Gotham, weights 300, 400, 600, 700, and 900, on the
 * rest), and Archivo for text. Breakpoints are the old site's: tablet up to
 * 1024px, mobile up to 767px.
 */

:root {
  /* The kit's global colors: Primary and Accent, Secondary (also the link
     hover), Text, Grey, and White. */
  --green: #007940;
  --green-dark: #003614;
  --ink: #1f1f21;
  --line: #d2d2d2;
  --paper: #ffffff;
  /* Not in the kit: a secondary text grey, form lines, a soft wash, and errors. */
  --muted: #55575b;
  --field-line: #6b6e72;
  --paper-soft: #f3f6f4;
  --danger: #b3261e;
  --danger-soft: #fdf3f2;
  /* Not in the kit either: a warm cream that sets announcements apart from the greens. */
  --cream: #f6f0e4;

  --font-text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Caprasimo", Georgia, serif;

  /* The kit's heading sizes (h3 matches h2). Tablets and phones step down. */
  --h1: 3rem;
  --h2: 2.5rem;
  --h4: 2rem;
  --h5: 1.75rem;
  --h6: 1.5rem;

  /* A section pads its sides and ends 5em, inside a 1440px box (so 1280px of
     content). Tablets take 3em and phones 2em. */
  --space: 5rem;
  --gutter: var(--space);
  --content: 1280px;
  --radius: 0.25rem;
  --radius-lg: 0.75rem;

  /* The sticky top bar, and the logo row that scrolls away under it. */
  --bar-height: 72px;
  --logo-width: 260px;
  --brand-height: calc(var(--logo-width) * 0.502 + 36px);
  /* The curved edge under each hero. */
  --curve: 50px;

  /* A strong ease-out, for things arriving. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* The focus ring's colour. It turns white on green and dark backgrounds. */
  --focus: var(--green-dark);

  color-scheme: light;
}

/* The preview banner is sticky too, so the bar sticks just under it. */
body:has(.preview-banner) {
  --preview-offset: 44px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--bar-height) + var(--preview-offset, 0px) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  overflow-wrap: break-word;
}

p {
  margin: 0;
}

a {
  color: var(--green);
}

/* Links in text go deep green on hover, as in the kit. Buttons and the rest of the chrome have their own. */
p a:hover,
li a:hover,
address a:hover,
dd a:hover {
  color: var(--green-dark);
}

/* On the dark panels, links stay white, bold in the welcome text as the old site had them. */
.hero__band a:not(.button),
.welcome a:not(.button),
.cta a:not(.button),
.video-band a:not(.button),
.collage a:not(.button),
.join__card a:not(.button) {
  color: var(--paper);
}

.welcome a:not(.button) {
  font-weight: 700;
}

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

.hero__band,
.welcome,
.split--green,
.collage,
.cta,
.video-band,
.join__card,
.lightbox,
.carousel__button,
.carousel__toggle {
  --focus: var(--paper);
}

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

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--green-dark);
  color: var(--paper);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 12px;
}

/* The sticky warning bar over a preview of a draft. */

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 6px 1rem;
  border-bottom: 1px solid #b58b00;
  background: #ffe8a3;
  color: #3d2f00;
  font: 600 0.9375rem/1.3 var(--font-heading);
  text-align: center;
}

/* The sash announcement: a cream band with stitched edges, like a fabric sash,
   across the top right corner of every page just under the top bar. The
   corner clips its ends; only the band takes clicks. It scrolls away under
   the bar. */

.sash {
  --sash: 240px;
  position: absolute;
  top: calc(var(--bar-height) + var(--preview-offset, 0px));
  right: 0;
  z-index: 40;
  width: var(--sash);
  height: var(--sash);
  overflow: hidden;
  pointer-events: none;
}

.sash__band {
  --focus: var(--green-dark);
  position: absolute;
  top: calc(var(--sash) * 0.42);
  left: calc(var(--sash) * 0.58 - 200px);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.1875rem;
  width: 400px;
  min-height: 44px;
  margin: 0;
  padding: 0.625rem 0;
  background: var(--cream);
  box-shadow: 0 8px 16px -8px rgb(0 0 0 / 0.55);
  color: var(--green-dark);
  text-decoration: none;
  translate: 0 -50%;
  transform: rotate(45deg);
  pointer-events: auto;
  transition: background-color 150ms ease;
}

/* Stitching just inside each edge. */
.sash__band::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  border-block: 1px dashed rgb(0 121 64 / 0.55);
  pointer-events: none;
}

a.sash__band:hover {
  background: var(--paper);
}

.sash__band:focus-visible {
  outline-offset: -8px;
}

.sash__line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sash__tag {
  color: var(--green);
  font: 400 1.0625rem/1 var(--font-display);
}

.sash__text {
  font: 700 0.6875rem/1 var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The link text, under the message. */
.sash__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--green);
  font: 600 0.75rem/1 var(--font-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Buttons: the kit's button is green with white text and a quarter-em corner,
   and goes deep green on hover. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.875rem 3rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--paper);
  font: 400 1rem/1.5 var(--font-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.button:hover {
  background: var(--green-dark);
}

/* White, on the green panels. */
.button--light {
  background: var(--paper);
  color: var(--green);
}

.button--light:hover {
  background: var(--green-dark);
  color: var(--paper);
}

/* Deep green, for Apply Now and the join card; it lightens to the main green
   on hover. */
.button--dark {
  background: var(--green-dark);
}

.button--dark:hover {
  background: var(--green);
}

/* Resident Portal: green inside a double white border. */
.button--portal {
  border: 6px double var(--paper);
  border-radius: var(--radius-lg);
}

.button--block {
  display: flex;
  width: 100%;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Header: a sticky top bar, then the logo row, which scrolls away. The header
   itself takes no box, so the bar can stay stuck all the way down the page while
   the logo row beside it in the markup scrolls off. */

.site-header {
  display: contents;
}

.site-bar {
  position: sticky;
  top: var(--preview-offset, 0px);
  z-index: 50;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}

.site-bar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--bar-height);
  padding: 0 1rem;
}

.site-bar__icons {
  display: flex;
  gap: 1rem;
}

.icon-link {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper);
  transition: background-color 150ms ease;
}

.icon-link:hover {
  background: var(--green-dark);
}

.site-nav {
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  font: 400 1rem/1.5 var(--font-text);
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease;
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  border-bottom-color: var(--green);
  color: var(--green);
}

.site-bar__buttons {
  display: flex;
  gap: 1rem;
}

.site-bar__buttons .button {
  padding: 0.5rem 1rem;
}

/* Apply Now is as tall as the green inside the portal's double border, 6px in
   from the top and bottom of the row. An invisible layer reaches back out over
   those 6px, so it still takes clicks and taps across the full 52px. */
.site-bar__buttons .button--dark {
  position: relative;
  min-height: 0;
  margin-block: 6px;
  /* The curve of the portal's inner green: its radius less its 6px border. */
  border-radius: calc(var(--radius-lg) - 6px);
}

.site-bar__buttons .button--dark::before {
  content: "";
  position: absolute;
  inset: -6px 0;
}

/* The menu for tablets and phones. A disclosure that works without JavaScript. */

.site-menu {
  display: none;
}

.site-menu__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--green);
  list-style: none;
  cursor: pointer;
}

.site-menu__toggle:hover {
  color: var(--green-dark);
}

.site-menu__toggle::-webkit-details-marker {
  display: none;
}

.site-menu__toggle > * {
  grid-area: 1 / 1;
}

.site-menu__close,
.site-menu[open] .site-menu__open {
  display: none;
}

.site-menu[open] .site-menu__close {
  display: block;
}

.site-menu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  display: grid;
  gap: 20px;
  width: min(100%, 420px);
  max-height: calc(100vh - var(--bar-height) - var(--preview-offset, 0px));
  padding: 24px var(--gutter) 32px;
  overflow-y: auto;
  background: var(--paper);
  box-shadow: 0 16px 32px rgb(0 0 0 / 0.18);
  animation: menu-in 300ms ease both;
}

@supports (height: 100dvh) {
  .site-menu__panel {
    max-height: calc(100dvh - var(--bar-height) - var(--preview-offset, 0px));
  }
}

.site-menu__logo img {
  width: 160px;
}

.site-menu__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu__list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font: 400 1.25rem/1.5 var(--font-text);
  text-decoration: none;
}

.site-menu__list a:hover {
  background: var(--green);
  color: var(--paper);
}

.site-menu__list a[aria-current="page"] {
  background: var(--green-dark);
  color: var(--paper);
}

.site-menu__buttons {
  display: grid;
  gap: 12px;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The logo row. A hero that opens the page slides up behind it. */

.site-brand {
  position: relative;
  z-index: 3;
  height: var(--brand-height);
  padding: 1rem;
}

/* The logo has a white rim, as the old site's did, so it stands out on photos. */
.site-logo {
  display: block;
  width: fit-content;
  padding: 2px;
  border-radius: 1.75em;
  background: var(--paper);
}

/* The logo sits over photos, so its ring is white with a dark halo. */
.site-logo:focus-visible {
  --focus: var(--paper);
  box-shadow: 0 0 0 9px rgb(0 0 0 / 0.55);
}

.site-logo img {
  width: var(--logo-width);
  height: auto;
}

main > .hero:first-child {
  margin-top: calc(var(--brand-height) * -1);
}

/* Hero: a photo with a curved green edge, then the title band or headline. The
   old heroes were 480px tall (640px on the home page) with the top 186px
   behind the header, so each is that less the logo row's own height. */

.hero {
  position: relative;
}

.hero__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: var(--brand-height);
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  background: var(--green-dark) linear-gradient(135deg, var(--green-dark), var(--green));
}

.hero--band .hero__media {
  min-height: calc(var(--brand-height) + 294px);
}

.hero--headline {
  --curve: 84px;
}

.hero--headline .hero__media {
  min-height: calc(var(--brand-height) + 454px);
}

/* Darkens the lower part of the photo, behind the headline. */
.hero--headline .hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 33%, #000 83%);
  opacity: 0.69;
}

/* The dome is wider than the hero, so the sides run off the edge and flatten it. */
.hero__curve {
  position: absolute;
  left: -5%;
  bottom: -1px;
  display: block;
  width: 110%;
  height: var(--curve);
  fill: var(--green);
  transform: rotate(180deg);
  pointer-events: none;
}

.hero--headline .hero__curve {
  left: -2%;
  width: 104%;
}

.hero__content {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 3rem 3rem 9rem;
}

.hero__title {
  max-width: 60%;
  color: var(--paper);
  font: 400 5rem/0.9 var(--font-display);
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgb(0 0 0 / 0.35);
}

.hero__band {
  padding: 1rem var(--gutter) var(--space);
  background: linear-gradient(to bottom, var(--green), var(--green-dark));
  color: var(--paper);
  text-align: center;
}

.hero__band-inner {
  display: grid;
  justify-items: center;
  gap: 2rem;
  max-width: var(--content);
  margin: 0 auto;
}

/* The title shrinks on a small phone, so a long word like "COMMUNITY" still fits. */
.hero__band h1 {
  font: 400 clamp(1.75rem, 9vw, var(--h1))/1.25 var(--font-heading);
  text-transform: uppercase;
}

.hero__band p {
  max-width: 1024px;
  font-size: 1.125rem;
}

.hero__subtitle {
  display: block;
  margin-top: 2rem;
  font: 400 1.5rem/1.5 var(--font-heading);
  letter-spacing: -0.5px;
  text-transform: none;
}

/* Backdrops: the photo behind a hero, call to action, or video band, under
   its tint and content (blocks/woodcreek/_backdrop). Where the browser can
   tie an animation to scrolling, the photo drifts a little slower than the
   page as the section scrolls by, as the old site's did, and the video band's
   video drifts with its still. An opening hero starts in view, so its photo
   starts in place and drifts as the hero scrolls away. The drift is all
   movement, so visitors who prefer less motion get none. */

.backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.backdrop__photo {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
}

.backdrop--bottom .backdrop__photo {
  background-position: center bottom;
}

.backdrop--lower .backdrop__photo {
  background-position: center 70%;
}

.backdrop--upper .backdrop__photo {
  background-position: center 30%;
}

.backdrop--top .backdrop__photo {
  background-position: center top;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media,
    .cta,
    .video-band {
      view-timeline: --backdrop;
    }

    .backdrop__photo,
    .video-band__video {
      --drift: clamp(4rem, 22vh, 13rem);
      animation: backdrop-drift linear both;
      animation-timeline: --backdrop;
    }

    .backdrop__photo {
      top: calc(-1 * var(--drift));
      bottom: calc(-1 * var(--drift));
    }

    .backdrop--leading .backdrop__photo {
      bottom: 0;
      animation-name: backdrop-drift-away;
      animation-range: exit;
    }

    /* Photos further down the page fade in and rise into place as they
       scroll into view, as the old site's did. Both follow the scrolling, so
       nothing waits on a script. The rise is slow: it lasts until a photo's
       middle reaches the middle of the screen. The fade ends while the photo is
       still coming in, so one already showing when the page opens is never
       washed out. The welcome portrait, which shows when the home page opens,
       stays put. */
    .split__media,
    .collage__photo {
      animation: photo-rise linear both, photo-fade linear both;
      animation-timeline: view(), view();
      animation-range: entry 0% cover 50%, entry 0% entry 70%;
    }
  }
}

@keyframes backdrop-drift {
  from {
    transform: translateY(calc(-1 * var(--drift)));
  }

  to {
    transform: translateY(var(--drift));
  }
}

@keyframes backdrop-drift-away {
  to {
    transform: translateY(var(--drift));
  }
}

@keyframes photo-rise {
  from {
    transform: translateY(3rem);
  }
}

@keyframes photo-fade {
  from {
    opacity: 0;
  }
}

/* Welcome band: the green panel that follows a headline hero. The portrait
   hangs 3em below the panel, and a white rule divides it from the text. */

.welcome {
  position: relative;
  z-index: 1;
  padding: 0 3rem;
  background: linear-gradient(to bottom, var(--green), var(--green-dark));
  color: var(--paper);
}

.welcome__inner {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  column-gap: 3rem;
  align-items: start;
  max-width: 1344px;
  margin: 0 auto;
}

.welcome__inner--text-only {
  grid-template-columns: minmax(0, 1fr);
}

.welcome__photo {
  width: 380px;
  height: 480px;
  margin-bottom: -3rem;
  object-fit: cover;
}

.welcome__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  gap: 1.25rem;
  padding: 0 0 5rem 3rem;
  border-left: 1px solid var(--paper);
  font: 300 1.3rem/1.5 var(--font-text);
  letter-spacing: 0.25px;
}

.welcome__inner--text-only .welcome__text {
  max-width: 760px;
  padding: 3rem 0 5rem;
  border-left: 0;
}

.welcome__kicker {
  font: 400 var(--h4)/1.25 var(--font-heading);
  letter-spacing: normal;
}

.welcome__title {
  margin-bottom: 2rem;
  font: 600 var(--h2)/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

.welcome__text .button-row {
  margin-top: 2rem;
}

/* The old site's button here is white with dark text, and goes dark on hover. */
.welcome .button--light {
  color: var(--ink);
}

.welcome .button--light:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Photo and text, on white or green */

.split {
  padding: var(--space);
}

.split--green {
  background: linear-gradient(to bottom, var(--green), var(--green-dark));
  color: var(--paper);
}

.split__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space);
  align-items: center;
  max-width: var(--content);
  margin: 0 auto;
}

.split--text-only .split__inner {
  grid-template-columns: minmax(0, 1fr);
}

.split--text-only .split__text {
  max-width: 760px;
}

/* A photo on the left stays above the text on a tablet, as on the old site. */
.split--photo-left .split__media {
  order: -1;
}

.split__text {
  display: grid;
  gap: 2rem;
  align-content: start;
}

.split__text h1,
.split__text h2 {
  font: 600 var(--h2)/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

.split__subheading {
  color: var(--green);
  font: 600 var(--h5)/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

.split--green a:not(.button),
.split--green .split__subheading {
  color: var(--paper);
}

.button-row--pair .button {
  flex: 1 1 200px;
}

.split__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1rem;
}

.split__text ul,
.columns__body ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.split__text li,
.columns__body li {
  position: relative;
  padding-left: 28px;
}

.split__text li::before,
.columns__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 12px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.columns__body li::before {
  color: var(--green);
}

/* Text beside a photo carousel */

.feature {
  padding: var(--space);
}

.feature__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space);
  align-items: center;
  max-width: var(--content);
  margin: 0 auto;
}

.feature--text-only .feature__inner {
  grid-template-columns: minmax(0, 1fr);
}

.feature--text-only .feature__text {
  max-width: 760px;
}

.feature__text {
  display: grid;
  gap: 2rem;
  align-content: start;
}

.feature__text h1,
.feature__text h2 {
  font: 600 2rem/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

.feature__media {
  min-width: 0;
}

/* The showcase, the old home page's photo section (blocks/woodcreek/_carousel
   with a wide photo, panel photos, or a statement). On the left, the text over
   one large carousel photo; on the right, a wide photo over a dark green panel
   set in from the column's edge, with the two panel photos reaching back out
   to line up with the wide photo, and the statement under them. The carousel's
   arrows sit on the panel's edge. */

.feature--showcase {
  padding-inline: clamp(1rem, 3vw, 3rem);
}

.feature--showcase .feature__inner {
  --inset: 1.5rem;
  grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
  grid-template-areas:
    "text collage"
    "media collage";
  grid-template-rows: auto 1fr;
  gap: 3rem 1.5rem;
  align-items: start;
  max-width: 1440px;
}

.feature--showcase .feature__text {
  grid-area: text;
  justify-self: end;
  max-width: 30rem;
  padding: 1rem 2rem 0 0;
}

.feature--showcase .feature__media {
  grid-area: media;
}

.feature__collage {
  grid-area: collage;
  display: grid;
  grid-template-rows: auto 1fr;
  align-self: stretch;
}

.feature__wide {
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

/* The panel runs down to the foot of the carousel photo, and the statement
   sits at its foot, beside the arrows. */
.feature__panel {
  display: flex;
  flex-direction: column;
  margin-left: var(--inset);
  padding: 1.5rem 1.5rem 2.5rem 0;
  background: var(--green-dark);
  color: var(--paper);
}

.feature__pair {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 1.5rem;
  margin-left: calc(-1 * var(--inset));
}

.feature__pair-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.feature__statement {
  margin: auto 0 0 3.5rem;
  padding-top: 3.5rem;
  font: 400 clamp(2rem, 3.2vw, 3rem)/1 var(--font-heading);
  text-transform: uppercase;
}

.carousel--feature .carousel__slide {
  flex-basis: 100%;
}

.carousel--feature .carousel__link {
  aspect-ratio: 5 / 4;
}

/* The slide labels say where a visitor is, so the showcase drops the count. */
.feature--showcase .carousel__count {
  display: none;
}

/* On a wide screen the arrows stack on the panel's edge, next over previous,
   near the foot of the photo. */
@media (min-width: 1025px) {
  .carousel--feature .carousel__button {
    top: auto;
    right: calc(-1.5rem - var(--inset) - 22px);
    left: auto;
    background: var(--green);
  }

  .carousel--feature .carousel__button:hover {
    background: var(--green-dark);
    box-shadow: 0 0 0 2px var(--paper);
  }

  .carousel--feature .carousel__button--next {
    bottom: calc(1.5rem + 54px);
  }

  .carousel--feature .carousel__button--previous {
    bottom: 1.5rem;
  }
}

/* The scrolling strip of photos. It works without JavaScript; the buttons
   and count are added when it runs. */

.carousel {
  position: relative;
}

.carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--green) var(--paper-soft);
  overscroll-behavior-x: contain;
}

.carousel__slide {
  flex: 0 0 calc((100% - 16px) / 2);
  scroll-snap-align: start;
}

.carousel--single .carousel__slide,
.carousel__slide:only-child {
  flex-basis: 100%;
}

.carousel__link {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-soft);
}

/* A floor plan's photos show one at a time, 480px tall (240px on a phone). */
.carousel--single .carousel__link {
  aspect-ratio: auto;
  height: 480px;
}

.carousel__link:focus-visible,
.photo-grid__link:focus-visible {
  --focus: var(--paper);
  outline-offset: -7px;
  box-shadow: inset 0 0 0 4px var(--green-dark);
}

.carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel__button {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease;
}

.carousel__button:hover {
  background: rgb(0 0 0 / 0.75);
}

.carousel__button:focus-visible,
.carousel__toggle:focus-visible {
  outline-offset: 2px;
  box-shadow: 0 0 0 7px rgb(0 0 0 / 0.5);
}

.carousel__button[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

/* A rotating carousel's pause button: a quiet round icon at the photo's lower
   left, clear of the arrows. Its label is for screen readers. */
.carousel__toggle {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.3);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.carousel__toggle:hover {
  background: rgb(0 0 0 / 0.55);
}

.carousel__toggle .icon--play,
.carousel__toggle[data-paused] .icon--pause {
  display: none;
}

.carousel__toggle[data-paused] .icon--play {
  display: block;
}

.carousel__button--previous {
  left: 8px;
}

.carousel__button--next {
  right: 8px;
}

.carousel__count {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}

/* Photo collage and statement: the old home page's dark green panel */

.collage {
  padding: var(--space);
  background: var(--green-dark);
  color: var(--paper);
}

.collage__inner {
  display: grid;
  gap: 1rem;
  max-width: var(--content);
  margin: 0 auto;
}

.collage__photo {
  width: 100%;
  object-fit: cover;
}

.collage__photo--wide {
  aspect-ratio: 16 / 9;
  max-height: 560px;
}

/* Beneath the wide photo, two at the same size, and the statement closing the
   panel at the left, as on the old site's design. */
.collage__row {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 1rem;
}

.collage__row .collage__photo {
  height: auto;
  aspect-ratio: 3 / 2;
}

.collage__statement {
  padding: 1.5rem 0 0;
  font: 400 clamp(2.25rem, 5vw, 4.5rem)/1 var(--font-heading);
  text-transform: uppercase;
}

/* Columns of lists */

.columns {
  padding: var(--space);
}

/* Both are white, so after the showcase the space between them is the
   showcase's own, not twice that. */
.feature--showcase + .columns {
  padding-top: 0;
}

.columns__inner {
  max-width: var(--content);
  margin: 0 auto;
}

.columns__heading,
.tiles__heading,
.gallery__heading,
.plans__heading,
.link-groups__heading {
  margin-bottom: 2rem;
  font: 600 var(--h2)/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

.tiles__heading,
.link-groups__heading {
  color: var(--green);
}

.columns__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 2rem 3rem;
}

.columns__column {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.columns__title,
.columns__body h3,
.link-groups__title {
  font: 700 var(--h6)/1.5 var(--font-heading);
  letter-spacing: -0.5px;
}

.columns__title,
.columns__body h3 {
  color: var(--green);
}

.columns__body {
  display: grid;
  gap: 1rem;
}

.columns__column .button {
  justify-self: start;
}

/* Icon tiles: the old site's amenity icons were muted, 90px tall. */

.tiles {
  padding: var(--space);
}

.tiles__inner {
  max-width: var(--content);
  margin: 0 auto;
}

.tiles__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1rem;
  text-align: center;
}

.tile__icon {
  width: 100%;
  height: 90px;
  object-fit: contain;
  opacity: 0.35;
}

/* The mark for a tile that has no icon yet. */
.tile__icon--check {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper);
  opacity: 1;
}

.tile__label {
  color: var(--green-dark);
  font: 700 1.125rem/1.5 var(--font-heading);
  letter-spacing: -0.5px;
}

.tiles__action {
  margin-top: 2rem;
}

/* Video band */

.video-band {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 480px;
  padding: var(--space);
  overflow: hidden;
  isolation: isolate;
  background: var(--green-dark) linear-gradient(to bottom, var(--green), var(--green-dark)) center / cover no-repeat;
  color: var(--paper);
  text-align: center;
}

.video-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 30 10 / 0.6);
}

.video-band__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The video drifts with the still under it (Backdrops), so it reaches past the band's edges. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .video-band__video {
      top: calc(-1 * var(--drift));
      height: calc(100% + 2 * var(--drift));
    }
  }
}

.video-band__inner {
  display: grid;
  gap: 2rem;
  max-width: 1024px;
  margin: 0 auto;
  font-size: 1.5rem;
}

.video-band__inner h1,
.video-band__inner h2 {
  font: 600 var(--h2)/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

.video-band__toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: var(--radius);
  background: rgb(0 0 0 / 0.45);
  color: var(--paper);
  font: 600 0.875rem/1 var(--font-text);
  cursor: pointer;
}

.video-band__toggle:hover {
  background: rgb(0 0 0 / 0.65);
}

.video-band__toggle .icon--play,
.video-band__toggle[data-paused] .icon--pause {
  display: none;
}

.video-band__toggle[data-paused] .icon--play {
  display: block;
}

/* Photo gallery and its viewer */

.gallery {
  padding: var(--space);
}

.gallery__inner {
  max-width: var(--content);
  margin: 0 auto;
}

.gallery--strip {
  padding: 0;
}

.gallery--strip .gallery__inner {
  max-width: none;
}

.gallery--strip .gallery__heading {
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space) var(--gutter) 1.5rem;
}

.gallery__empty {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 520px;
  margin: 0 auto;
  padding: 56px 24px;
  border: 1px dashed var(--field-line);
  border-radius: var(--radius-lg);
  background: var(--paper-soft);
  color: var(--green);
  text-align: center;
}

.gallery__empty p {
  color: var(--ink);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.gallery--strip .photo-grid {
  gap: 0;
}

.photo-grid__link {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-soft);
}

.photo-grid__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 54 20 / 0.4);
  opacity: 0;
  transition: opacity 200ms ease;
}

.photo-grid__link:hover::after,
.photo-grid__link:focus-visible::after {
  opacity: 1;
}

.photo-grid__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery motion (blocks/woodcreek/_photo_grid, lively). Tiles arrive in a
   wave: those showing when the page opens rise in one after another, and the
   rest rise in row by row, left to right, as they scroll into view. Each
   photo fades in as its file arrives (woodcreek-gallery), and the magnifier
   says a tile opens larger. Under a mouse the photo zooms and drifts against
   the pointer; keyboard focus gets the zoom. Visitors who prefer less motion
   get the fades only. */

.photo-grid--lively .photo-grid__link::after {
  background: linear-gradient(to top, rgb(0 54 20 / 0.6), rgb(0 54 20 / 0.1) 70%);
}

.photo-grid--lively .photo-grid__image {
  transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-out);
}

.photo-grid--lively .photo-grid__image[data-waiting] {
  opacity: 0;
}

.photo-grid__zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  background: var(--paper);
  color: var(--green);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  pointer-events: none;
}

.photo-grid__link:focus-visible .photo-grid__zoom {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .photo-grid__link:hover .photo-grid__zoom {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .photo-grid--lively .photo-grid__item {
    animation: tile-arrive 700ms var(--ease-out) both;
    animation-delay: calc(min(var(--i), 8) * 70ms);
  }

  .photo-grid--lively .photo-grid__link:focus-visible .photo-grid__image {
    transform: scale(1.06);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Without JavaScript the photo still zooms; the controller adds the drift. */
  .photo-grid--lively .photo-grid__link:hover .photo-grid__image {
    transform: scale(1.06);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .photo-grid--lively .photo-grid__link {
      animation: tile-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }

  /* Each row sweeps in left to right where the grid has its full columns. */
  @media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    .photo-grid--lively.photo-grid--4 .photo-grid__item:nth-child(4n + 2) .photo-grid__link,
    .photo-grid--lively.photo-grid--3 .photo-grid__item:nth-child(3n + 2) .photo-grid__link,
    .photo-grid--lively.photo-grid--2 .photo-grid__item:nth-child(2n) .photo-grid__link {
      animation-range: entry 10% entry 80%;
    }

    .photo-grid--lively.photo-grid--4 .photo-grid__item:nth-child(4n + 3) .photo-grid__link,
    .photo-grid--lively.photo-grid--3 .photo-grid__item:nth-child(3n) .photo-grid__link {
      animation-range: entry 20% entry 90%;
    }

    .photo-grid--lively.photo-grid--4 .photo-grid__item:nth-child(4n) .photo-grid__link {
      animation-range: entry 30% entry 100%;
    }
  }
}

@keyframes tile-arrive {
  from {
    opacity: 0;
    transform: translateY(2rem) scale(0.97);
  }
}

@keyframes tile-rise {
  from {
    opacity: 0;
    transform: translateY(3rem);
  }
}

.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
}

.lightbox::backdrop {
  background: rgb(0 0 0 / 0.9);
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 100%;
  margin: 0;
  padding: 64px 76px;
}

.lightbox__image {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  object-fit: contain;
}

.lightbox__caption {
  max-width: 70ch;
  font-size: 0.9375rem;
  text-align: center;
}

.lightbox__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  font-size: 0.875rem;
  text-align: center;
}

.lightbox__button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
  color: var(--paper);
  cursor: pointer;
}

.lightbox__button:hover {
  background: rgb(255 255 255 / 0.3);
}

.lightbox__button--close {
  top: 16px;
  right: 16px;
}

.lightbox__button--previous,
.lightbox__button--next {
  top: calc(50% - 24px);
}

.lightbox__button--previous {
  left: 16px;
}

.lightbox__button--next {
  right: 16px;
}

/* The badge announcement: a round seal on a page's opening photo, made like
   the logo, green inside a white rim with a fine inner rule. Its message runs
   around the edge and its heading sits in the middle in the headline's face.
   The ring settles into place as the page opens and turns while it's pointed
   at; it never moves on its own for longer than that. */

.seal {
  --focus: var(--paper);
  position: absolute;
  right: clamp(1rem, 6vw, 7rem);
  bottom: calc(var(--curve) + 1.5rem);
  --seal: 184px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: var(--seal);
  aspect-ratio: 1;
  border: 4px solid var(--paper);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--green), var(--green-dark) 75%);
  box-shadow: 0 16px 32px -12px rgb(0 0 0 / 0.55);
  color: var(--paper);
  text-align: center;
  text-decoration: none;
  transform: rotate(-6deg);
  transition: transform 250ms ease;
}

a.seal:hover {
  transform: rotate(0deg) scale(1.05);
}

/* The inner pages' photos are shorter, so there it drops to straddle the
   curve, well clear of the sash above. */
.hero--band .seal {
  bottom: calc(var(--seal) * -0.3);
}

.seal__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.seal__ring circle {
  fill: none;
  stroke: rgb(255 255 255 / 0.6);
  stroke-width: 1;
}

.seal__ring text {
  fill: var(--paper);
  font: 700 11px var(--font-heading);
}

.seal__words {
  transform-box: view-box;
  transform-origin: 100px 100px;
  animation: seal-settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both, seal-turn 24s linear 2.4s infinite paused;
}

a.seal:hover .seal__words,
a.seal:focus-visible .seal__words {
  animation-play-state: running;
}

@keyframes seal-settle {
  from {
    transform: rotate(-150deg);
  }
}

@keyframes seal-turn {
  to {
    transform: rotate(1turn);
  }
}

.seal__center {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  max-width: 56%;
}

.seal__title {
  font: 400 1.375rem/0.92 var(--font-display);
  text-transform: uppercase;
}

.seal__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font: 600 0.6875rem/1.2 var(--font-text);
}

/* Call to action */

.cta {
  position: relative;
  padding: var(--space);
  isolation: isolate;
  background: var(--green-dark) linear-gradient(to bottom, var(--green), var(--green-dark)) center / cover no-repeat;
  color: var(--paper);
  text-align: center;
}

/* The old site laid 50% black over this photo; this is a little darker, for the text. */
.cta--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 30 10 / 0.6);
}

.cta__inner {
  display: grid;
  justify-items: center;
  gap: 2rem;
  max-width: 1024px;
  margin: 0 auto;
  font-size: 1.5rem;
}

.cta__inner h1,
.cta__inner h2 {
  font: 600 var(--h2)/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

/* Floor plan cards and figures. The old Floor Plans page lists them in a column
   640px wide. */

.plans {
  padding: var(--space);
}

.plans__inner {
  max-width: var(--content);
  margin: 0 auto;
}

.plans__list {
  display: grid;
  gap: 2rem;
  max-width: 640px;
  margin: 0 auto;
}

.plans__empty {
  max-width: 60ch;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
}

.plan-card {
  display: flex;
  border: 1px solid var(--line);
}

.plan-card__diagram {
  display: grid;
  flex: 0 0 320px;
  place-items: center;
  padding: 16px;
}

.plan-card__details {
  display: grid;
  flex: 1 1 0;
  gap: 1rem;
  align-content: start;
  min-width: 0;
  padding: 1rem;
  border-left: 1px solid var(--line);
}

.plan-card--no-diagram .plan-card__details {
  border-left: 0;
}

.plan-card__name {
  color: var(--green);
  font: 700 var(--h6)/1.5 var(--font-heading);
  letter-spacing: -0.5px;
}

.plan-card__subtitle {
  margin-top: -1rem;
  color: var(--green);
  font: 400 1rem/1.5 var(--font-text);
}

.plan-card__button {
  margin-top: 1rem;
  border-radius: 0;
}

/* The figures: a bold value under each label. The old card ruled between them. */

.plan-stats {
  display: grid;
  margin: 0;
}

.plan-stats__row {
  margin: 0;
}

.plan-stats dt,
.plan-stats dd {
  display: block;
  margin: 0;
}

.plan-stats dd {
  font-weight: 700;
}

.plan-stats--card .plan-stats__row {
  padding: 0 0 1em 1em;
  border-bottom: 1px solid var(--line);
}

.plan-stats--card .plan-stats__row + .plan-stats__row {
  padding-top: 1em;
}

.plan-stats--card .plan-stats__row:last-child {
  padding-bottom: 0.5em;
  border-bottom: 0;
}

.plan-stats--grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px 24px;
}

.plan-stats--grid .plan-stats__row {
  padding-left: 1em;
  border-left: 3px solid var(--green);
}

.plan-stats--detail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  text-align: center;
}

/* A floor plan's page: two equal columns, the details on the left and a
   sidebar that follows the page down on the right. */

.plan-detail {
  padding: var(--space);
}

.plan-detail__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space);
  align-items: start;
  max-width: var(--content);
  margin: 0 auto;
}

.plan-detail__main {
  display: grid;
  gap: 2rem;
  min-width: 0;
}

.plan-detail__main h2 {
  color: var(--green);
  font: 600 var(--h5)/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

.plan-detail__stats {
  display: grid;
  gap: 2rem;
}

.plan-detail__features {
  display: grid;
  gap: 1rem;
}

.plan-detail__features h3 {
  font: 700 var(--h6)/1.5 var(--font-heading);
  letter-spacing: -0.5px;
}

/* A line that ends in a colon heads the lines after it. */
.plan-detail__features h4 {
  margin-top: 1rem;
  font: 700 1rem/1.5 var(--font-text);
}

.plan-detail__features ul {
  column-count: 2;
  column-gap: 3em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-detail__features li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 0.5em;
  break-inside: avoid;
}

.plan-detail__features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.plan-detail__photos {
  display: grid;
  gap: 2rem;
}

.plan-detail__aside {
  position: sticky;
  top: calc(var(--bar-height) + var(--preview-offset, 0px) + 24px);
  display: grid;
  gap: 2rem;
  padding-bottom: var(--space);
}

.plan-detail__diagram img {
  width: 100%;
}

.plan-detail__disclaimer {
  font-size: 0.875rem;
  font-style: italic;
}

/* Link groups */

.link-groups {
  padding: var(--space);
}

.link-groups__inner {
  max-width: var(--content);
  margin: 0 auto;
}

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

.link-groups__group {
  display: grid;
  gap: 1rem;
  align-content: start;
}

/* Text */

.text-section {
  padding: var(--space);
}

.text-section__inner {
  display: grid;
  gap: 1rem;
  max-width: var(--content);
  margin: 0 auto;
}

.text-section__inner > * {
  max-width: 760px;
}

.text-section h1,
.text-section h2 {
  font: 600 var(--h2)/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

.text-section h3 {
  color: var(--green);
  font: 700 var(--h6)/1.5 var(--font-heading);
  letter-spacing: -0.5px;
}

.text-section ul,
.text-section ol {
  margin: 0;
  padding-left: 1.5rem;
}

/* Notices: a page that's gone, not found, or an application that was received */

.notice-page {
  padding: 88px var(--gutter) 104px;
}

.notice-page__inner {
  display: grid;
  gap: 16px;
  justify-items: start;
  max-width: var(--content);
  margin: 0 auto;
  font-size: 1.0625rem;
}

.notice-page__inner > * {
  max-width: 760px;
}

.notice-page h1 {
  font: 600 clamp(1.75rem, 4vw, 2.5rem)/1.15 var(--font-heading);
}

.notice-page .button {
  margin-top: 8px;
}

/* Footer */

.site-footer__strip {
  height: 10px;
  background: var(--green-dark);
}

.join {
  padding: 3rem;
}

.join__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1344px;
  margin: 0 auto;
  padding: 3rem;
  border-radius: 2rem;
  background: var(--green);
  color: var(--paper);
}

.join__text {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-footer .join__title {
  font: 400 2rem/1 var(--font-heading);
  text-transform: uppercase;
}

/* With a photo, the words stack on the left, on the hero band's green, and the
   photo fills the right, bowing into the green as the heroes' curves do. */
.join__card.join__card--photo {
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--green), var(--green-dark));
  box-shadow: 0 24px 48px -28px rgb(0 54 20 / 0.6);
}

.join__card--photo .join__text {
  flex: 0 0 45%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.75rem;
  padding: 3.5rem;
}

.site-footer .join__card--photo .join__title {
  font-size: var(--h2);
  line-height: 1.05;
}

.join__photo {
  flex: 1;
  width: 55%;
  min-height: 20rem;
  object-fit: cover;
  clip-path: ellipse(100% 140% at 100% 50%);
}

.site-footer__info {
  display: grid;
  gap: 2rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 3rem 2rem;
}

.site-footer__main {
  display: flex;
  align-items: flex-start;
  gap: 2rem 3rem;
}

.site-footer__columns {
  display: flex;
  flex: none;
  gap: 2rem 3rem;
}

.site-footer__columns section {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.site-footer h2 {
  font: 700 1rem/1.5 var(--font-text);
}

.site-footer address {
  font-style: normal;
}

.hours {
  display: grid;
  gap: 2px;
  margin: 0;
}

.hours div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.hours dt::after {
  content: ":";
}

.hours dd {
  margin: 0;
}

.site-footer__disclaimer {
  flex: 1 1 0;
  font-size: 0.875rem;
  font-style: italic;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer__legal ul {
  display: flex;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Contact: the office beside the message form */

.form-section-block {
  padding: var(--space);
}

.form-section-block__inner {
  max-width: 720px;
  margin: 0 auto;
}

.form-section-block__inner--office {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space);
  align-items: start;
  max-width: var(--content);
}

.form-section-block h1,
.form-section-block__form > h2 {
  margin-bottom: 1.25rem;
  font: 600 var(--h5)/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

.office {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.office__title {
  font: 600 var(--h5)/1.2 var(--font-heading);
  letter-spacing: -0.5px;
}

.office__address {
  font-size: 1.0625rem;
  font-style: normal;
}

.office__note {
  font-size: 1.125rem;
  font-weight: 700;
}

.office__subtitle {
  margin-top: 8px;
  color: var(--green);
  font: 700 var(--h6)/1.5 var(--font-heading);
  letter-spacing: -0.5px;
}

.office__map iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper-soft);
}

.office__directions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.office__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Forms: the contact form and the rental application */

.application-block {
  padding: var(--space);
}

.application-block__inner {
  display: grid;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.application-block h1,
.application-block h2 {
  font: 600 clamp(1.75rem, 3vw, 2rem)/1.15 var(--font-heading);
}

.contact-form,
.application-form {
  display: grid;
  gap: 20px;
}

.contact-form .form-row,
.application-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form-field {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}

.form-field label,
.form-field legend {
  font: 600 1rem/1.3 var(--font-heading);
}

.form-field fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-field legend {
  padding: 0;
  margin-bottom: 6px;
}

.form-field input:not([type="radio"], [type="checkbox"], [type="file"]),
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-text);
}

.form-field textarea {
  min-height: 7rem;
  resize: vertical;
}

.form-field input[type="file"] {
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  font: 400 0.9375rem/1.4 var(--font-text);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--green);
  outline: 3px solid var(--green);
  outline-offset: 1px;
}

.form-required {
  color: var(--danger);
}

.form-hint {
  color: var(--muted);
  font-size: 0.875rem;
}

.form-note {
  color: var(--muted);
  font-size: 0.9375rem;
}

.form-error {
  color: var(--danger);
  font-size: 0.9375rem;
  font-weight: 600;
}

.form-field--error input:not([type="radio"], [type="checkbox"], [type="file"]),
.form-field--error select,
.form-field--error textarea {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
}

.form-errors {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-soft);
}

.form-errors h2 {
  font: 600 1.125rem/1.3 var(--font-heading);
}

.form-errors ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 1.25rem;
}

.form-errors a {
  color: var(--danger);
}

.form-errors:focus {
  outline: 3px solid var(--danger);
  outline-offset: 2px;
}

.form-success {
  padding: 16px 20px;
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  background: #e8f4ed;
  color: var(--green-dark);
  font-weight: 600;
}

.form-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 16px 6px 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  font-weight: 400;
  cursor: pointer;
}

.form-choice input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--green);
}

.form-choice:has(input:checked) {
  border-color: var(--green);
  background: #e8f4ed;
}

.form-money {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-money span {
  font-weight: 600;
}

.form-signature {
  font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive;
  font-size: 1.5rem;
}

.form-actions {
  display: grid;
}

.form-submit {
  width: 100%;
}

.application-form .form-actions {
  justify-items: start;
}

.application-form .form-submit {
  width: auto;
  min-width: 220px;
}

/* The application's sections */

.form-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  min-width: 0;
  margin: 0;
  padding: 0 0 32px;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.form-section > legend,
.form-section > .form-section__intro,
.form-section > .form-hint,
.form-section > .form-field--textarea,
.form-section > .form-field--address,
.form-section > .form-field--radio,
.form-section > .form-field--signature {
  grid-column: 1 / -1;
}

.form-section__title {
  float: left;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  font: 600 1.375rem/1.2 var(--font-heading);
}

.form-section__title + * {
  clear: both;
}

.form-section__intro {
  max-width: 70ch;
}

.form-consent {
  padding: 20px 24px;
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  background: var(--paper-soft);
  font-size: 0.9375rem;
}

/* Spam trap: out of sight, and never offered to anyone. */

.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Tablet and down */

@media (max-width: 1024px) {
  :root {
    --space: 3rem;
    --h1: 2.75rem;
    --h2: 2.25rem;
    --h4: 1.75rem;
    --h5: 1.5rem;
    --h6: 1.25rem;
  }

  .site-bar__icons {
    margin-left: auto;
  }

  .site-nav {
    display: none;
  }

  .site-menu {
    display: block;
  }

  .hero--headline {
    --curve: 60px;
  }

  .hero--headline .hero__media {
    min-height: calc(var(--brand-height) + 294px);
  }

  .hero__content {
    padding-bottom: 11rem;
  }

  .hero__title {
    max-width: none;
    font-size: 4rem;
  }

  .tiles__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

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

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

  .photo-grid--thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gallery--strip .photo-grid {
    gap: 10px;
  }

  .feature__inner,
  .welcome__inner,
  .split__inner,
  .form-section-block__inner--office,
  .plan-detail__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The text comes first, then the portrait, as on the old site. */
  .welcome {
    padding: 2rem 3rem 5rem;
  }

  .welcome__text {
    order: -1;
    padding: 0 0 3rem;
    border-left: 0;
  }

  .welcome__photo {
    width: 100%;
    height: 580px;
    margin-bottom: 0;
    object-position: center bottom;
  }

  .collage__statement {
    font-size: clamp(1.75rem, 6vw, 3rem);
  }

  /* The showcase stacks: the text, the carousel, then the wide photo and panel. */
  .feature--showcase .feature__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "text"
      "media"
      "collage";
    grid-template-rows: none;
  }

  .feature--showcase .feature__text {
    justify-self: stretch;
    max-width: none;
    padding: 0;
  }

  .feature__panel {
    margin-left: 0;
    padding: 1.5rem 1.5rem 3rem;
  }

  .feature__pair {
    margin-left: 0;
  }

  .feature__statement {
    margin: 0;
    padding-top: 2.5rem;
    font-size: clamp(1.75rem, 6vw, 3rem);
  }

  .plan-detail__aside {
    position: static;
    padding-bottom: 0;
  }

  /* Beside the home page's headline there's no room once the screen narrows,
     so the badge drops to straddle the curve below the words. On the inner
     pages the band's heading widens, so there it rises above the curve. */
  .hero--headline .seal {
    bottom: calc(var(--seal) * -0.36);
  }

  .hero--band .seal {
    bottom: calc(var(--curve) + 1rem);
  }

  .join {
    padding: 3rem;
  }

  .join__card {
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
  }

  .join__text {
    flex-direction: column;
    align-items: flex-start;
  }

  .join__card--photo .join__text {
    flex-basis: auto;
    padding: 2rem;
  }

  .site-footer .join__card--photo .join__title {
    font-size: var(--h4);
  }

  /* On top, the photo bows down into the green instead. */
  .join__photo {
    order: -1;
    width: 100%;
    min-height: 0;
    height: 15rem;
    clip-path: ellipse(140% 100% at 50% 0%);
  }

  .site-footer__main {
    flex-direction: column;
  }
}

/* Phones */

@media (max-width: 767px) {
  :root {
    --space: 2rem;
    --logo-width: 200px;
  }

  /* The tag, message, and link run on as one line of text, wrapping as words do. */
  .sash {
    --sash: 168px;
  }

  .sash__band {
    top: calc(var(--sash) * 0.46);
    left: calc(var(--sash) * 0.54 - 200px);
    padding-block: 0.5rem;
  }

  .sash__line {
    gap: 0.375rem;
  }

  .sash__tag {
    font-size: 0.9375rem;
  }

  .sash__text {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }

  .sash__cta {
    font-size: 0.6875rem;
  }

  .seal {
    --seal: 156px;
    bottom: calc(var(--curve) + 0.75rem);
    border-width: 3px;
  }

  .seal__title {
    font-size: 1.125rem;
  }

  .seal__cta {
    display: none;
  }

  .site-bar__buttons {
    display: none;
  }

  .hero--headline {
    --curve: 40px;
  }

  .hero--headline .hero__media {
    min-height: calc(var(--brand-height) + 314px);
    justify-content: center;
  }

  .hero__content {
    padding: 2rem;
  }

  .hero__title {
    font-size: 2rem;
    text-align: center;
  }

  .welcome {
    padding: 2rem;
  }

  .welcome__photo {
    height: 320px;
  }

  .carousel__slide {
    flex-basis: 100%;
  }

  .carousel--single .carousel__link {
    height: 240px;
  }

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

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

  .tiles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }

  .link-groups__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The two photos stack, and the statement reads as one line. */
  .collage__row {
    grid-auto-flow: row;
  }

  .collage__statement {
    font-size: clamp(1.25rem, 6vw, 3rem);
    text-wrap: balance;
  }

  .collage__statement br,
  .feature__statement br {
    display: none;
  }

  .feature__statement {
    font-size: clamp(1.25rem, 6vw, 3rem);
    text-wrap: balance;
  }

  .plan-card {
    flex-direction: column;
  }

  .plan-card__diagram {
    flex-basis: auto;
  }

  .plan-card__diagram img {
    max-height: 420px;
    width: auto;
  }

  .plan-stats--detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
  }

  .plan-detail__features ul {
    column-count: 1;
  }

  .plan-card__details,
  .plan-card--no-diagram .plan-card__details {
    padding: 1rem;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .plan-card--no-diagram .plan-card__details {
    border-top: 0;
  }

  .contact-form .form-row,
  .application-form .form-row,
  .form-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .lightbox__figure {
    padding: 64px 12px 72px;
  }

  .lightbox__button--previous,
  .lightbox__button--next {
    top: auto;
    bottom: 12px;
  }

  .lightbox__button--previous {
    left: 12px;
  }

  .lightbox__button--next {
    right: 12px;
  }

  .join {
    padding: 1rem;
  }

  .site-footer__info {
    padding-inline: 2rem;
  }

  .site-footer__columns {
    flex-direction: column;
    gap: 2rem;
  }

  .site-footer__legal {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .site-menu__panel {
    width: 100%;
  }
}

/* A button has no border of its own, so give it an edge when the browser drops its colours. */
@media (forced-colors: active) {
  .button {
    border: 2px solid ButtonText;
  }
}

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

  .button,
  .icon-link,
  .site-nav__list a,
  .carousel__button,
  .photo-grid__link::after {
    transition: none;
  }

  .site-menu__panel,
  .seal__words {
    animation: none;
  }

  .sash__band,
  .seal {
    transition: none;
  }

  /* The magnifier fades in without growing. */
  .photo-grid__zoom {
    transform: none;
  }
}