#open-house {
  width: min(940px, calc(100vw - 40px));
  max-height: calc(100svh - 40px);
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 100px #08110c55;
}
#open-house::backdrop { background: #16251c9e; backdrop-filter: blur(5px); }
.open-house-layout { display: grid; grid-template-columns: .85fr 1.15fr; }
#open-house .open-house-photo { width: 100%; height: 100%; min-height: 580px; object-fit: cover; object-position: 48% center; }
.open-house-content { position: relative; padding: 50px 40px 36px; }
#open-house .open-house-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; color: var(--ink); font-size: 30px; line-height: 1; }
#open-house .open-house-close:hover { background: #293c2f0c; }
.open-house-eyebrow { margin: 0 0 18px; font-size: 12px; font-weight: 550; letter-spacing: .15em; color: var(--olive); }
#open-house h2 { font-size: clamp(36px, 4vw, 52px); }
#open-house h2:focus { outline: none; }
.open-house-intro { margin-top: 20px; font-size: 16px; line-height: 1.65; }
.open-house-intro span { color: var(--muted); }
.open-house-dates { margin: 28px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.open-house-dates li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.open-house-day { display: flex; flex-direction: column; gap: 2px; }
.open-house-day strong { font-size: 17px; font-weight: 550; }
.open-house-day time { font-size: 14px; color: var(--muted); }
.open-house-hours { white-space: nowrap; font-size: 21px; font-weight: 450; letter-spacing: -.035em; }
.open-house-actions { display: flex; flex-direction: column; gap: 10px; }
#open-house .button { width: 100%; font-size: 14px; min-height: 48px; }
#open-house .open-house-browse { border: 0; color: var(--muted); background: transparent; padding: 8px 12px; font-size: 14px; }
#open-house .open-house-browse:hover { color: var(--ink); text-decoration: underline; background: transparent; }
@media(max-width: 700px) {
  #open-house { width: min(440px, calc(100vw - 28px)); max-height: calc(100svh - 28px); }
  .open-house-layout { grid-template-columns: 1fr; }
  #open-house .open-house-photo { display: none; }
  .open-house-content { padding: 48px 26px 24px; }
  #open-house h2 { font-size: 40px; }
  .open-house-intro { margin-top: 16px; }
  .open-house-dates { margin: 24px 0; }
}
@media(max-width: 350px) {
  .open-house-content { padding-left: 20px; padding-right: 20px; }
  .open-house-hours { font-size: 18px; }
}
@media(min-width: 701px) and (max-height: 650px) {
  #open-house .open-house-photo { min-height: 0; }
  .open-house-content { padding-top: 42px; padding-bottom: 20px; }
  .open-house-dates { margin: 20px 0; }
}