.experience-book {width:100%;max-width:none;margin:0;padding:0;background:#faf4eb}
.experience-book .escape-hero {display:block;margin:0;padding:8rem 5.6vw 3rem;background:linear-gradient(90deg,#182436bf,transparent),url("../images/hero-1920.webp") center 56%/cover;color:white;border:0}
.escape-hero p:last-child {font:italic 1.4rem/1.35 var(--serif);max-width:32ch;color:inherit}
.escape-hero .eyebrow,.escape-benefits .eyebrow {color:#efd39a}
.escape-nav,.escape-benefits ul {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:1rem 5vw;text-align:center;border-bottom:1px solid var(--line)}
.escape-nav .escape-category {text-decoration:none;padding:.4rem;border-inline-end:1px solid var(--line)}
.escape-nav span {display:block;font:1.8rem var(--serif);color:var(--olive)}
.escape-collection {padding:2.4rem 4vw;text-align:center}
.experience-book h2 {font-size:clamp(2rem,3.3vw,3.8rem);margin:.4rem 0}
.escape-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin:1.6rem auto 0;max-width:1600px;text-align:left}
.escape-grid .experience-card {display:flex;flex-direction:column;background:#faf2e6;border:1px solid #e4d9c8;border-radius:.8rem;overflow:hidden;box-shadow:0 3px 10px #46352210}
.escape-grid .experience-photo {position:relative;width:100%;aspect-ratio:2/1;height:auto;min-height:0;overflow:hidden}
.escape-grid .card-copy {padding:1rem 1.25rem}
.escape-grid h3 {font-size:clamp(1.3rem,1.65vw,2rem);margin:0}
.escape-grid p {margin:.45rem 0 .8rem;line-height:1.55}
.escape-grid summary{display:inline-block;padding:.65rem 1rem;border-radius:.4rem;background:#253829;color:white;text-decoration:none;cursor:pointer}
.escape-benefits {background:#233526;color:white;padding:1.6rem 4vw;text-align:center}
.escape-benefits ul {grid-template-columns:repeat(4,1fr);list-style:none;border:0;margin:0}
.escape-benefits li {border-inline-start:1px solid #798674;padding:.6rem}
.escape-benefits li:first-child {border:0}
@media(min-width:801px){
.page-experiences .site-header {position:absolute;inset:0 0 auto;z-index:5;background:transparent;border:0}
.page-experiences .site-header :is(a,.brand p) {color:white}
}
@media(max-width:900px){.escape-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.experience-book .escape-hero {padding-top:3rem}.escape-nav {grid-template-columns:repeat(3,1fr)}}
@media(max-width:580px){.escape-grid {grid-template-columns:1fr}.escape-benefits ul {grid-template-columns:1fr 1fr}}

.escape-grid { grid-auto-rows:1fr; }
.escape-grid .card-copy { display:flex; flex-direction:column; flex:1; }
.escape-grid .experience-more {
  align-self:flex-start;
  margin-top:auto;
  padding:.65rem 1rem;
  border:0;
  border-radius:.4rem;
  background:#253829;
  color:white;
  cursor:pointer;
  font:inherit;
}
.experience-dialog {
  position:fixed;
  inset:0;
  width:min(32rem,calc(100% - 2rem));
  max-width:none;
  max-height:calc(100dvh - 2rem);
  box-sizing:border-box;
  margin:auto;
  padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid #d7c7ad;
  border-radius:.8rem;
  background:#faf4eb;
  color:#263126;
  box-shadow:0 1rem 4rem #111c2250;
  overflow:auto;
}
.experience-dialog::backdrop { background:#18231dcc; }
.experience-dialog h2 { font:clamp(1.6rem,4vw,2.2rem)/1.2 var(--serif); margin:.7rem 0 1rem; }
.experience-dialog p { line-height:1.65; }
.experience-dialog .eyebrow { padding-right:2rem; }
.experience-dialog .experience-dialog-close {
  position:absolute;
  top:.6rem;
  right:.6rem;
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  padding:0;
  border:1px solid #d7c7ad;
  border-radius:50%;
  background:transparent;
  color:inherit;
  font-size:0;
  line-height:1;
  min-height:0;
  box-sizing:border-box;
  cursor:pointer;
}
body:has(.experience-dialog[open]) { overflow:hidden; }

.experience-dialog-close::before,
.experience-dialog-close::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:1rem;
  height:1px;
  background:currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.experience-dialog-close::after {
  transform:translate(-50%,-50%) rotate(-45deg);
}
.experience-dialog .experience-dialog-close:focus-visible {
  outline:none;
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold);
}