/* Same restrained typography and section rhythm as the approved case pages. */
html body .story { gap: 88px !important; padding-top: 68px !important; padding-bottom: 92px !important; }
html body .story h2 { margin: 14px 0 0 !important; max-width: 10.5em !important; font-size: clamp(34px, 3.25vw, 56px) !important; font-weight: 520 !important; line-height: 1.1 !important; letter-spacing: -.045em !important; }
html body .story h2 span { white-space: normal !important; text-wrap: balance; }
html body .story-copy p { margin: 0 0 1.06em !important; max-width: 39em !important; font-size: clamp(14px, 1vw, 17px) !important; line-height: 2 !important; color: #383933 !important; }
html body .copy { font-size: 13px !important; line-height: 1.95 !important; }
html body :is(.compare-foot h3, .interior-courtyard-title h3) { font-size: clamp(26px, 2.2vw, 34px) !important; font-weight: 520 !important; line-height: 1.22 !important; letter-spacing: -.03em !important; }
html body .interior-courtyard-title { max-width: none !important; }
html body .interior-courtyard-title h3 span { white-space: normal !important; }
html body .panel { height: min(54vh, 520px); height: min(54svh, 520px); }
@media (max-width: 980px) { html body .story { gap: 34px !important; } }
@media (max-width: 560px) {
  html body .story { padding-top: 30px !important; padding-bottom: 56px !important; }
  html body .story h2 { max-width: none !important; font-size: 28px !important; line-height: 1.25 !important; }
  html body .panel { height: 40vh; height: 40svh; }
  html body .frame-meta { font-size: 8px; letter-spacing: .08em; }
  html body .controls { gap: 6px; }
  html body .counter { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html body .panel img { transition: none; transform: none; } }