.house-rules-page .site-header {
  position: relative;
}

.rules-hero {
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 7vw, 7rem);
  color: #fff;
  background:
    radial-gradient(circle at 86% 16%, rgba(201, 153, 82, .2), transparent 25rem),
    linear-gradient(135deg, #0d2d23, #173f31);
}

.rules-hero-inner,
.rules-content {
  width: min(100%, 1100px);
  margin: 0 auto;
}

.rules-hero h1 {
  max-width: 850px;
  font-size: clamp(3.7rem, 7.2vw, 7rem);
}

.rules-hero .hero-intro {
  max-width: 720px;
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, .82);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.5;
}

.rules-content {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}

.rules-times {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--forest);
  border-bottom: 1px solid var(--forest);
}

.rules-time {
  padding: 1.6rem;
  text-align: center;
}

.rules-time + .rules-time {
  border-left: 1px solid var(--line);
}

.rules-time span {
  display: block;
  margin-bottom: .45rem;
  color: #6a756f;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rules-time strong {
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400;
}

.rules-welcome {
  max-width: 780px;
  margin: clamp(3.5rem, 7vw, 6rem) auto;
  text-align: center;
}

.rules-welcome h2 {
  margin-bottom: 1.25rem;
}

.rules-welcome p {
  color: #35463d;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.75;
}

.rules-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: house-rule;
}

.rule-card {
  position: relative;
  min-height: 210px;
  padding: 2rem;
  background: var(--cream);
  border-top: 2px solid var(--forest);
  counter-increment: house-rule;
}

.rule-card::before {
  content: counter(house-rule, decimal-leading-zero);
  display: block;
  margin-bottom: 1.2rem;
  color: var(--gold);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.rule-card h3 {
  margin: 0 0 .75rem;
  color: var(--forest);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
}

.rule-card p {
  margin: 0;
  color: #35463d;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.65;
}

.arrival-policy {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding: clamp(2rem, 5vw, 4rem);
  color: #fff;
  background: var(--forest-deep);
}

.arrival-policy h2 {
  max-width: 700px;
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2rem;
  background: rgba(255, 255, 255, .18);
}

.policy-item {
  padding: 1.7rem;
  background: var(--forest-deep);
}

.policy-item h3 {
  margin: 0 0 .7rem;
  color: #f4d8ad;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
}

.policy-item p {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  line-height: 1.65;
}

.rules-contact {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 3rem;
  align-items: end;
  padding: clamp(3.5rem, 7vw, 6rem) 0 0;
}

.rules-contact p {
  max-width: 700px;
  color: #35463d;
  line-height: 1.7;
}

.rules-signoff {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  text-align: right;
}

@media (max-width: 720px) {
  .rules-times,
  .rules-list,
  .policy-grid,
  .rules-contact {
    grid-template-columns: 1fr;
  }

  .rules-time + .rules-time {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .rule-card {
    min-height: 0;
  }

  .rules-signoff {
    text-align: left;
  }
}