/* One fluid page grid, shared by the header, content and footer. */
:root {
  --page-gutter: clamp(36px, 4.5vw, 160px);
  --column-gap: clamp(36px, 5vw, 120px);
}

.wrapper,
.header-inner {
  width: calc(100% - var(--page-gutter) * 2);
}

.hero {
  width: 100%;
  padding-inline: var(--page-gutter);
  gap: var(--column-gap);
}

.hero > *,
.about > *,
.section-heading > *,
.values > *,
.participant-layout > *,
.process-grid > *,
.room-gallery > * {
  min-width: 0;
}

.about,
.values,
.participant-layout,
.room-gallery {
  column-gap: var(--column-gap);
}

.contact-copy {
  padding-inline: var(--page-gutter);
}

/* Large screens need proportional type and spacing as well as wider columns. */
@media (min-width: 1101px) {
  h2 { font-size: clamp(48px, 4.1vw, 88px); }
  .section { padding-block: clamp(92px, 7.5vw, 156px); }
  .eyebrow { font-size: clamp(10px, .7vw, 14px); }
  .button { font-size: clamp(13px, .85vw, 17px); padding: 1.1em 1.6em; }
  .button-small { font-size: clamp(12px, .8vw, 16px); padding: .85em 1.4em; }
  .text-link { font-size: clamp(13px, .85vw, 17px); }

  .header-inner { min-height: clamp(89px, 5.7vw, 126px); }
  .brand { gap: clamp(12px, .8vw, 18px); }
  .brand-symbol { width: clamp(47px, 3.2vw, 64px); height: auto; }
  .brand-name { width: clamp(118px, 8vw, 160px); height: auto; }
  .site-header nav { gap: clamp(24px, 2.1vw, 48px); }
  .site-header nav > a:not(.button) { font-size: clamp(12px, .8vw, 16px); }

  .hero { min-height: clamp(693px, 42vw, 960px); padding-block: clamp(32px, 2.3vw, 56px); }
  .hero h1 { font-size: clamp(60px, 5.2vw, 120px); }
  .hero .eyebrow { font-size: clamp(9px, .65vw, 13px); }
  .hero-description { font-size: clamp(15px, 1.05vw, 21px); max-width: 42ch; }
  .hero-secondary { font-size: clamp(11px, .78vw, 16px); }
  .hero-location { font-size: clamp(10px, .7vw, 14px); }
  .hero-visual { border-top-left-radius: clamp(130px, 10vw, 230px); }
  .photo-caption { left: clamp(34px, 2.6vw, 64px); right: clamp(34px, 2.6vw, 64px); }
  .photo-caption p { font-size: clamp(34px, 2.5vw, 52px); }
  .photo-caption > span,
  .photo-index { font-size: clamp(8px, .55vw, 11px); }
  .photo-index { left: clamp(34px, 2.6vw, 64px); }

  .facts { padding-block: clamp(35px, 2.8vw, 60px); }
  .facts-intro { font-size: clamp(20px, 1.45vw, 30px); }
  .fact { padding-left: clamp(24px, 2.5vw, 56px); gap: clamp(18px, 1.5vw, 32px); }
  .fact > span { font-size: clamp(53px, 3.8vw, 80px); }
  .fact p { font-size: clamp(11px, .8vw, 17px); }

  .about-image { height: clamp(620px, 43vw, 920px); }
  .about-copy .lead { font-size: clamp(17px, 1.2vw, 24px); max-width: 52ch; }
  .about-copy > p:not(.eyebrow):not(.lead),
  .about-principle p { font-size: clamp(13px, .95vw, 19px); max-width: 62ch; }
  .section-heading { gap: var(--column-gap); }
  .section-heading > p,
  .section-heading > div + div { max-width: 46%; flex-basis: 46%; font-size: clamp(13px, .95vw, 19px); }
  .section-heading > p,
  .section-heading > div + div > p { max-inline-size: 58ch; }
  .therapies { column-gap: var(--column-gap); }
  .therapy { min-height: clamp(99px, 7vw, 148px); }
  .therapy h3 { font-size: clamp(25px, 1.85vw, 38px); }
  .therapy > span { font-size: clamp(10px, .7vw, 14px); }
  .therapy-note p { max-width: 44ch; font-size: clamp(13px, .95vw, 19px); }

  .room-gallery .space-viewer { width: 100%; max-width: 780px; justify-self: center; }
  .room-gallery .space-option { padding-block: clamp(19px, 1.6vw, 34px); }
  .room-gallery .space-option strong { font-size: clamp(23px, 1.7vw, 36px); }
  .room-gallery .space-description { font-size: clamp(12px, .9vw, 18px); max-width: 58ch; }
  .space-number,
  .room-photo-count { font-size: clamp(10px, .7vw, 14px); }
  .support-strip > span { font-size: clamp(12px, .85vw, 17px); }
  .support-strip p { font-size: clamp(9px, .65vw, 13px); }

  .process-grid article { padding-inline: clamp(26px, 2.5vw, 56px); }
  .process-grid h3 { font-size: clamp(22px, 1.7vw, 36px); }
  .process-grid p { font-size: clamp(12px, .9vw, 18px); max-width: 44ch; }
  .partnership-note { font-size: clamp(11px, .8vw, 16px); }
  .values h2 { font-size: clamp(38px, 3.3vw, 72px); }
  .values-list > div { padding-block: clamp(20px, 1.6vw, 34px); }
  .values-list h3 { font-size: clamp(16px, 1.15vw, 23px); }
  .values-list p { font-size: clamp(12px, .9vw, 18px); }
  .values-list span { font-size: clamp(10px, .7vw, 14px); }
  .participant-layout > div > p:not(.eyebrow) { font-size: clamp(13px, .95vw, 19px); max-width: 52ch; }
  summary { font-size: clamp(15px, 1.05vw, 21px); padding-block: clamp(25px, 2.1vw, 44px); }
  details p { font-size: clamp(13px, .95vw, 19px); max-width: 64ch; }

  .contact-visual { position: relative; }
  .contact-visual img { position: absolute; inset: 0; }
  .contact-copy { padding-block: clamp(75px, 5vw, 124px); }
  .contact h2 { font-size: clamp(76px, 5.4vw, 116px); }
  .contact-copy > p:not(.eyebrow) { font-size: clamp(13px, .95vw, 19px); }
  .contact-copy > .button { font-size: clamp(12px, .85vw, 17px); }
  .contact-details dt { font-size: clamp(8px, .6vw, 12px); }
  .contact-details dd { font-size: clamp(12px, .85vw, 17px); }
  .contact-details dd > span { font-size: clamp(11px, .8vw, 16px); }

  .site-footer { padding-block: clamp(42px, 3vw, 68px) clamp(22px, 1.6vw, 36px); }
  .footer-top { gap: clamp(50px, 5vw, 120px); }
  .footer-top p { font-size: clamp(17px, 1.25vw, 26px); }
  .footer-top > .text-link { font-size: clamp(12px, .85vw, 17px); }
  .footer-bottom { font-size: clamp(9px, .65vw, 13px); }
}

@media (max-width: 700px) {
  :root { --page-gutter: 22px; --column-gap: 26px; }
  .contact-copy { padding-inline: var(--page-gutter); }
}

@media (min-width: 701px) and (max-width: 850px) {
  .room-gallery .space-option { grid-template-columns: 16px minmax(0, 1fr) 20px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: clamp(42px, 13vw, 49px); }
  .values h2 { font-size: 30px; }
  .participant-layout h2 { font-size: 37px; }
  .photo-caption { left: 20px; right: 20px; }
  .photo-caption p { font-size: 27px; }
  .photo-caption a { width: 36px; height: 36px; right: -4px; }
  .footer-top p { margin-left: 0; }
  .therapy { gap: 12px; }
  .therapy h3 { font-size: 20px; }
  .therapy svg { width: 24px; height: 24px; }
}