/* Private events page. Sections top to bottom: green hero band, white intro with the
   event video, cream "event room highlights" band (tabbed 281 & Bitters rooms plus the
   I-10 & Wurzbach room), yellow queso-fountain band, event menu panel, and the
   "know before you book" block with the photo gallery.

   Like the catering page this one uses the larger 25px eyebrow, so .pe-eyebrow
   re-scales the shared .eyebrow across the same breakpoints. */

.pe-eyebrow { font-size: 25px; }
.pe-copy { margin: 0; font: 300 var(--fs-body) / var(--lh-body) var(--font-serif); }
.pe-divider { width: 100%; height: 10px; padding: 0; object-fit: contain; object-position: left center; }
.pe-divider-sm { width: 304px; max-width: 100%; padding: 0; object-fit: contain; object-position: left center; }

/* Red triangle bullets, used by every feature list on the page. */
.pe-list { color: var(--navy); font: 500 20px / 31px var(--font-serif); }
.pe-list li { position: relative; padding-left: 23.75px; }
.pe-list li::before {
  content: ""; position: absolute; left: 0; top: 15.5px; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 6px solid var(--red); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.pe-features { margin: 0; font: 800 22px / 31px var(--font-serif); color: var(--navy); }

/* ---------- hero ---------- */
/* The two columns are 93% and 95% wide on live and shrink against each other, which
   lands them on a constant 93:95 split of the viewport. */
.pe-hero {
  display: flex; align-items: stretch;
  background: var(--white) url(/assets/img/LimeGreen-Background.png) repeat-x top left;
}
.pe-hero-text {
  flex: 0 0 49.468%; max-width: 49.468%; margin-top: -50px;
  padding: 0 0 0 5%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.pe-hero-title { margin-top: 5px; font-size: var(--fs-hero); line-height: var(--lh-hero); color: var(--white); }
.pe-hero-photo { flex: 0 0 50.532%; max-width: 50.532%; display: flex; align-items: flex-start; }
.pe-hero-photo img { width: 100%; height: auto; }


/* Above 1900 live switches to its desktop hero: a fixed-height band, the heading indented 13%,
   and above 1920 the columns stay 1920 wide and centred. */
@media (min-width: 1901px) {
  .pe-hero { height: 440px; padding-inline: max(0px, calc((100% - 1920px) / 2)); }
  .pe-hero-text { flex-basis: 51.67%; max-width: 51.67%; padding-left: 13%; }
  .pe-hero-photo { flex-basis: 48.33%; max-width: 48.33%; }
}

/* ---------- intro + video ---------- */
.pe-intro {
  background: var(--white); min-height: 850px; padding: 10px;
  display: flex; justify-content: flex-end; align-items: center;
}
.pe-intro-grid {
  width: 87%; padding-right: 74px;
  display: flex; justify-content: space-between; align-items: center; gap: 83px;
}
.pe-intro-text {
  flex: 0 1 690px; min-width: 0; min-height: 680px; padding-top: 35px;
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-start;
}
.pe-intro-text .h2 { width: 100%; margin-top: 10px; }
.pe-intro-text .pe-divider { width: 642px; margin: 41.55px 0 35.45px; }
.pe-intro-text .pe-copy { width: 100%; margin-bottom: 14.4px; }
.pe-subhead { margin: 12px 0 10px; font: 400 var(--fs-h4) / 1 var(--font-display); color: var(--navy); }
.pe-intro-cta { margin: 0; }
.pe-intro-video { flex: 0 1 700px; min-width: 0; }
.pe-intro-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- event rooms ---------- */
.pe-rooms {
  background: url(/assets/img/Background.jpg) top left repeat;
  min-height: 1700px; padding: 120px 140px 0 255px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.pe-rooms-head { width: 31%; padding-top: 15px; }
.pe-rooms-head .h2 { margin-top: 10px; }
.pe-rooms-head .pe-divider-sm { width: calc(100% - 15px); height: 6.81px; margin: 35.15px 0 29.04px; }

/* Live's tab block sits a pixel left of its widget box. */
.pe-tabs { position: relative; left: -1px; width: 100%; display: flex; padding-bottom: 75px; }
.pe-tablist { flex: 0 0 30%; padding: 5px 0 25px; }
.pe-tab {
  display: block; width: 100%; padding: 15px; margin-bottom: 34px;
  background: var(--navy); color: var(--white);
  font: 400 var(--fs-h4) / 34.05px var(--font-display); text-align: center;
  transition: background-color .2s;
}
/* Live centres the label over an (invisible) icon plus the space after it. */
.pe-tab::before { content: ""; display: inline-block; width: 11px; }
.pe-tab:last-child { margin-bottom: 0; }
.pe-tab:hover, .pe-tab[aria-selected="true"] { background: var(--red); }
.pe-panels { flex: 1 1 auto; min-width: 0; padding-left: 70px; }
.pe-panel[hidden] { display: none; }

.pe-room { position: relative; max-width: 1300px; margin: 0 auto 40px; padding: 0 16px 8px; }
.pe-room > img { display: block; width: 100%; height: auto; }
.pe-room-card {
  position: absolute; left: 16px; top: 110px; width: 400px; max-width: calc(100% - 32px);
  background: var(--white); padding: 28px 34px; z-index: 2;
}
.pe-room-wide .pe-room-card { width: 460px; }
.pe-room-card h3 { margin: 0 0 6px; font-size: 40px; line-height: 1.1; letter-spacing: .5px; color: var(--red); }
/* live's room cards are hand-written HTML with a fixed 25px h4, untouched by the type scale */
.pe-room-card h4 { margin: 0 0 2px; font-size: 25px; line-height: 1.1; letter-spacing: 1px; color: var(--navy); }
.pe-panel .pe-features { margin: 8px 0 10px; font: 700 26px / 1.2 var(--font-serif); }
.pe-panel .pe-list { font: 500 22px / 1.45 var(--font-serif); }
.pe-panel .pe-list li { padding-left: 18px; margin: 1px 0; }
.pe-panel .pe-list li::before { left: 0; top: 20px; }

.pe-i10 { width: 100%; min-height: 685px; display: flex; justify-content: space-between; gap: 20px; }
.pe-i10-text { flex: 0 1 500px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.pe-i10-text .h2 { width: 550px; max-width: 100%; margin-top: 10px; }
.pe-i10-text .pe-divider-sm { width: 414px; max-width: 90%; height: 6.44px; margin: 25.33px 0 19.23px; }
.pe-i10-photo { flex: 0 1 979px; min-width: 0; margin-top: 10px; }
.pe-i10-photo img { display: block; width: 100%; height: auto; }

.pe-bonham {
  position: static; align-self: center; width: 450px; max-width: none;
  padding: 35px 20px 20px 40px;
  display: flex; flex-direction: column; gap: 20px;
}
.pe-bonham h3 { margin: 0; font-size: var(--fs-h3); line-height: 1; letter-spacing: normal; }
.pe-bonham h4 { margin: -15px 0 0; font-size: 23px; line-height: 23px; letter-spacing: normal; }
.pe-bonham .pe-features { margin: 0 0 -14px; font-size: 22px; font-weight: 800; line-height: 31px; }
.pe-bonham .pe-list { margin: 0; }

/* ---------- queso fountain ---------- */
.pe-queso {
  min-height: 706px; background: #FEC95C;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch;
}
.pe-queso-photo { background: url(/assets/img/queso.jpg) center top / cover no-repeat; }
.pe-queso-text {
  justify-self: center; align-self: center;
  width: 700px; min-width: 0; max-width: 100%; min-height: 580px; margin-left: 40px; padding: 0 10px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.pe-queso-text .pe-eyebrow { padding-bottom: 12px; }
.pe-queso-text .h2 { line-height: var(--lh-h2); }
.pe-queso-text .pe-divider { width: 642px; margin: 33.55px 0 27.45px; }
.pe-queso-copy { width: 95%; padding-bottom: 25px; }
.pe-note { width: 95%; margin: 0; padding-bottom: 25px; text-align: center; font: 300 17px / 30px var(--font-serif); }

/* ---------- event menu ---------- */
.pe-menu {
  min-height: 1600px; padding: 30px 0 0;
  background: url(/assets/img/Background_yellowWhiteStatic1.jpg) top left repeat;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
}
.pe-menu .pe-eyebrow { text-align: center; line-height: 1; }
.pe-divider-wide { width: 642px; max-width: 100%; height: 10px; padding: 0; margin: 13.55px 0 72.45px; }
.pe-menu-panel {
  width: 71%; background: var(--white); padding: 70px 63px 63px;
  display: grid; grid-template-columns: 600px 600px; gap: 20px; align-items: start;
}
/* Live nudges the buffet column right with a transform effect, and caps its height so
   the buffet photo (122% of the column) spills out of the white panel. */
.pe-menu-panel .pe-menu-col:nth-child(2) { transform: translateX(55px); height: 1060px; }
.pe-menu-title { margin: 0; font-size: var(--fs-h3); line-height: 1; color: var(--red); }
.pe-menu-sub { margin: 5px 0 30px; font: 400 var(--fs-h4) / 1 var(--font-display); color: var(--navy); }
.pe-dish { padding: 10px; }
.pe-dish h4 { width: 460px; max-width: 100%; margin: 0 0 8px; font: 600 30px / 31px var(--font-serif); color: var(--navy); }
/* Only the very first dish is set a heavier weight on live. */
.pe-menu-col:first-child .pe-dish:first-of-type h4 { font-weight: 700; }
.pe-dish p { width: 500px; max-width: 100%; margin: 0 0 14.4px; font: 300 var(--fs-body) / var(--lh-body) var(--font-serif); }
.pe-buffet-photo { display: block; width: calc((100% - 20px) * 1.22); max-width: none; height: auto; margin: 33px 0 10px 10px; }

/* ---------- know before you book ---------- */
.pe-book {
  min-height: 905px; background: var(--white); padding: 0 0 30px 100px;
  display: flex; justify-content: center;
}
.pe-book-text {
  flex: 0 0 961px; min-height: 465px; padding: 35px 10px 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px;
}
.pe-book-text .h2 { line-height: var(--lh-h2); }
.pe-divider-book { width: 600px; max-width: 100%; height: 9.34px; padding: 0; margin: 38.87px 0 35.79px; }
.pe-list-wide { width: 550px; max-width: 100%; padding-bottom: 45px; }
/* this list is an Elementor icon list, whose caret is centred on a wrapped item */
.pe-list-wide li::before { top: 50%; }
.pe-book-text .pe-copy { margin: 0; }
.pe-book-head-2 { margin: 0 0 25px; }
.pe-book-lead { margin: 0 0 14.4px; font: 400 16px / var(--lh-body) var(--font-display); color: var(--red); text-transform: uppercase; }
.pe-book-buttons { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 12px; }
.pe-btn-sm { gap: 10px; width: 265px; padding: 15px; font-size: 15px; line-height: 20px; }
.pe-btn-sm .icon { width: 16px; height: 16px; }

.pe-gallery { flex: 0 0 29%; padding: 10px; display: flex; align-items: center; }
/* Elementor's masonry leaves the gallery box taller than its tallest column, and that
   taller box is what gets centred in the column - hence the aspect ratio. */
.pe-gallery-cols { display: flex; align-items: flex-start; gap: 10px; width: 100%; aspect-ratio: 489.23 / 484.48; }
.pe-gallery-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pe-gallery img { display: block; width: 100%; height: auto; }
/* live's fourth gallery slot holds a photo the page never finishes loading, so it
   renders as an empty band; the masonry box is sized for it either way */

/* ---------- 1366 ---------- */
/* Live's laptop rules (max-width 1366). The room tabs, room cards and menu columns keep their
   desktop sizes; what changes is the padding around them, the widths Elementor pins at this
   breakpoint (bonham card 350, queso text 500, book text 952, gallery 624) and the "know
   before you book" block, which stops sitting beside its gallery and stacks above it. */
@media (max-width: 1366px) {
  .pe-eyebrow { font-size: 18px; }
  .pe-hero { background-image: url(/assets/img/green-250px.png); }

  /* the intro row loses its right padding and fills the band; the two columns shrink
     against each other from their 690/700 bases across the unchanged 83px gap */
  .pe-intro-grid { width: 100%; padding-right: 0; }

  /* rooms: 20px padding all round; the tab labels lose their wrapper padding and 34px
     spacing (11px between labels), and the panel loses its 70px inset */
  .pe-rooms { padding: 20px; }
  .pe-tablist { padding: 0; }
  .pe-tab { margin-bottom: 11px; }
  .pe-panels { padding-left: 0; }

  /* the I-10 row centres both its columns vertically; the photo widget has a -1px margin */
  .pe-i10 { align-items: center; }
  .pe-i10-photo { margin: -1px; }
  .pe-bonham { width: 350px; }
  .pe-bonham h4 { font-size: 22px; }

  /* queso: no grid gap, and the 500px text column (35px top padding, 40px left margin)
     is centred in its half */
  .pe-queso { gap: 0; }
  .pe-queso-text { width: 500px; margin-left: 40px; padding: 35px 0 0; }
  .pe-queso-text .pe-divider { width: 490px; }
  .pe-queso-copy { width: 400px; max-width: 100%; }
  .pe-note { width: 100%; }

  /* event menu: a 1100px panel with 12px padding and two gapless grid tracks; each column
     is pinned to 460px, and the buffet column keeps its 55px nudge and 1060px cap */
  .pe-menu-panel { width: 1100px; max-width: 100%; padding: 12px; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: start; }
  .pe-menu-col { width: 460px; max-width: 100%; }
  /* live's custom menu CSS pins every div in the panel to the column width, so the dish
     text runs across the dish's own 10px padding */
  .pe-dish h4, .pe-dish p { width: calc(100% + 20px); max-width: none; }
  /* the buffet photo is capped at 294px and centred in its padded widget, plus 10px */
  .pe-buffet-photo { width: 294px; margin-left: calc((100% - 294px) / 2 + 10px); }

  /* know before you book: text (952px, 35px top padding) stacked over the gallery (624px,
     25px margin all round), both centred */
  .pe-book { flex-direction: column; align-items: center; min-height: 0; padding: 0; }
  .pe-book-text { flex: 0 0 auto; width: 952px; max-width: 100%; padding: 35px 0 0; }
  .pe-divider-book { width: 490px; }
  .pe-book-lead { font-size: 22px; }
  .pe-gallery { flex: 0 0 auto; width: 624px; max-width: 100%; margin: 25px; }
}

/* ---------- 1200 ---------- */
@media (max-width: 1200px) {
  .pe-eyebrow { font-size: 17px; }
  .pe-intro { min-height: 0; padding: 40px 10px; }
  .pe-intro-grid { flex-direction: column; align-items: center; gap: 60px; padding-right: 0; }
  .pe-intro-text { flex: 0 0 auto; width: 690px; max-width: 100%; min-height: 0; gap: 22px; }
  .pe-intro-video { flex: 0 0 auto; width: 700px; max-width: 100%; }
  .pe-book-text { width: 835px; }
  .pe-gallery { width: 497px; }
  .pe-book-lead { font-size: 21px; }
}

/* ---------- 1024 ---------- */
@media (max-width: 1024px) {
  .pe-eyebrow { font-size: 16px; }
  .pe-hero-text { margin-top: -30px; flex-basis: 50%; }

  .pe-rooms { padding: 20px; gap: 20px; }
  .pe-rooms-head { width: 100%; }
  .pe-rooms-head .pe-divider-sm, .pe-i10-text .pe-divider-sm { width: 642px; max-width: 100%; }

  /* The tabs turn into an accordion: each label sits directly above its own panel.
     display:contents lets the labels and panels interleave without changing the DOM. */
  .pe-tabs { flex-direction: column; padding-bottom: 30px; }
  .pe-tablist, .pe-panels { display: contents; }
  .pe-tab { margin-bottom: 11px; text-align: left; }
  .pe-tab:last-child { margin-bottom: 11px; }
  .pe-panels { padding-left: 0; }
  .pe-panel { margin-bottom: 11px; }
  .pe-room { padding: 0 16px 0 0; margin-bottom: 0; }
  .pe-tab:nth-child(1) { order: 1; }  .pe-panel:nth-child(1) { order: 2; }
  .pe-tab:nth-child(2) { order: 3; }  .pe-panel:nth-child(2) { order: 4; }
  .pe-tab:nth-child(3) { order: 5; }  .pe-panel:nth-child(3) { order: 6; }
  .pe-tab:nth-child(4) { order: 7; }  .pe-panel:nth-child(4) { order: 8; }
  .pe-tab:nth-child(5) { order: 9; }  .pe-panel:nth-child(5) { order: 10; }
  .pe-tab:nth-child(6) { order: 11; } .pe-panel:nth-child(6) { order: 12; }

  .pe-i10-text { flex-basis: 400px; }
  .pe-i10-photo { flex: 0 1 auto; min-width: 0; }
  .pe-i10-photo img { width: 100%; }
  .pe-bonham { width: 350px; }

  .pe-queso { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .pe-queso-photo { min-height: 400px; }
  .pe-queso-text {
    width: 100%; min-height: 0; margin: 0; padding: 40px 20px;
    align-items: center; text-align: center;
  }
  .pe-queso-text .pe-divider { width: 100%; }
  .pe-queso-copy, .pe-note { width: 60%; }

  .pe-menu { min-height: 0; padding: 40px 10px; }
  .pe-menu-panel { width: 88.195%; max-width: none; padding: 30px 40px 40px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pe-buffet-photo { width: 100%; max-width: 500px; margin-left: 0; }

  .pe-book { flex-direction: column; align-items: center; min-height: 0; padding: 0; }
  .pe-book-text { flex: 0 0 auto; width: 100%; }
  .pe-gallery { flex: 0 0 auto; width: 100%; max-width: 500px; align-self: center; }

  /* --- measured off live at 1024: hero 222-541, intro 541-1718, rooms
     1717-3786, queso 3787-4947, event menu 4947-7217, book 7217-8386 --- */
  .pe-hero-text { flex: 0 0 353px; max-width: 353px; margin-top: -50px; }
  .pe-hero-photo { flex: 0 0 671px; max-width: 671px; }

  .pe-intro { padding: 10px; }
  .pe-intro-grid { gap: 83px; }
  .pe-intro-text { gap: 0; padding: 35px 0 7px; }
  .pe-intro-text .eyebrow { margin-top: 6px; }
  .pe-intro-text .h2 { margin-top: 17px; }
  .pe-intro-text .pe-divider { width: 642px; height: auto; margin: 48px 0 42px; }
  .pe-intro-text .pe-copy { margin: 0 0 14.4px; }
  .pe-subhead { margin: 18.6px 0 17px; }
  .pe-intro-cta { margin-top: 6.6px; }

  .pe-rooms-head .pe-divider-sm { width: 642px; height: auto; margin: 34px 0 27px; }
  .pe-tabs { padding-bottom: 75px; }
  .pe-tab { line-height: 31px; margin-bottom: 11px; }
  .pe-tab[aria-selected="true"], .pe-tab:last-child { margin-bottom: 0; }
  .pe-panel { margin-bottom: 0; }
  .pe-room { padding: 0 16px 8px; margin: 0 0 40px; }
  .pe-room-card { top: 110px; width: 400px; padding: 28px 34px; }
  .pe-room-wide .pe-room-card { width: 460px; }
  .pe-room-card h3 { font-size: 40px; }
  .pe-room-card h4 { font-size: 25px; }

  .pe-i10 { align-items: center; }
  .pe-i10-text { flex-basis: 326px; }
  .pe-i10-text .pe-divider-sm { width: 294px; height: auto; max-width: 100%; margin: 27px 0 19px; }
  .pe-i10-photo { margin-top: 0; }
  .pe-i10-photo img { width: 640px; max-width: none; }
  .pe-bonham { width: 350px; padding: 35px 20px 20px 40px; gap: 0; }
  .pe-bonham h3 { margin: 0; font-size: 26px; line-height: 26px; }
  .pe-bonham h4 { margin: 11px 0 0; font-size: 20px; line-height: 20px; }
  .pe-bonham .pe-features { margin: 20px 0 0; }
  .pe-bonham .pe-list { margin: 6px 0 0; }

  .pe-queso-photo { min-height: 580px; }
  .pe-queso-text { padding: 57px 20px 22px; justify-content: flex-start; }
  .pe-queso-text .pe-divider { width: 490px; height: auto; margin: 20px 0 13px; }
  .pe-queso-copy { width: 400px; max-width: 100%; padding-bottom: 25px; }
  .pe-queso-text .pe-features, .pe-queso-text .pe-list { margin: 0; }
  .pe-note { width: 510px; max-width: 100%; }

  .pe-menu { padding: 30px 0 0; gap: 0; }
  .pe-menu > .h2 { margin-top: 20px; }
  .pe-divider-wide { width: 642px; height: auto; margin: 33px 0 93px; }
  .pe-menu-panel { width: 800px; max-width: 100%; padding: 12px; justify-items: start; }
  .pe-menu-col { width: 750px; max-width: 100%; }
  .pe-menu-panel .pe-menu-col:nth-child(2) { transform: none; margin-left: 5px; height: 1060px; }
  .pe-buffet-photo { width: 294px; max-width: none; margin: 33px 0 10px 238px; }

  .pe-book-text { width: 100%; padding: 35px 0 0; align-items: center; gap: 6px; }
  .pe-divider-book { width: 490px; height: auto; margin: 20px 0 0; }
  .pe-list-wide { width: 550px; margin: 13px 0 0; }
  .pe-book-lead { font-size: 20px; }
  .pe-book-buttons { justify-content: center; }
  .pe-gallery { width: 497px; max-width: 100%; margin: 25px; }
}

/* ---------- 880 ---------- */
@media (max-width: 880px) {
  .pe-eyebrow { font-size: 15px; }
  .pe-room { padding: 0; }
  .pe-room-card { position: static; width: 100%; max-width: 100%; margin-top: 16px; }
  .pe-i10 { flex-direction: column; min-height: 0; gap: 30px; }
  .pe-i10-text { flex: 0 0 auto; width: 100%; }
  .pe-i10-photo { align-self: center; }
  .pe-bonham { align-self: flex-start; width: 450px; }
  .pe-queso-copy, .pe-note { width: 85%; }
}

/* ---------- 767 ---------- */
/* Measured off the live page at 390px. Section boundaries there: hero 139-413,
   intro 413-1435, rooms 1435-3433, queso 3432-4636, event menu 4636-7437 and
   "know before you book" 7438-9438. Elementor stacks fixed gaps rather than a
   rhythm, so the offsets are spelled out block by block; the flex columns are
   centred so that shrink-to-fit widgets land where live puts them. */
@media (max-width: 767px) {
  .pe-eyebrow { font-size: 14px; }
  .pe-divider, .pe-divider-sm, .pe-divider-wide, .pe-divider-book { height: auto; }
  /* live keeps the 20px list on mobile; only the room panels step up to 22px */
  .pe-list { font-size: 20px; line-height: 31px; }

  /* hero: live's title block carries a 19.5px left padding, so its centred text
     sits ~10px right of the viewport centre */
  .pe-hero { flex-direction: column; align-items: stretch; padding-bottom: 1px; }
  .pe-hero-text {
    flex: 0 0 auto; width: 100%; max-width: 100%; margin: 50px 0 0;
    padding: 0 0 0 19.5px; align-items: center;
  }
  .pe-hero-text .pe-eyebrow { margin: 0; text-align: center; }
  .pe-hero-title { margin: 5px 0 0; line-height: 39.6px; text-align: center; }
  .pe-hero-photo { flex: 0 0 auto; width: 100%; max-width: 100%; margin: -1px 0 0; justify-content: center; }
  .pe-i10-photo img { width: 100%; max-width: 100%; }
  .pe-hero-photo img { width: 312px; }

  /* intro + video */
  .pe-intro { min-height: 0; padding: 10px 10px 11px; }
  .pe-intro-grid { flex-direction: column; align-items: stretch; width: 100%; padding: 0; gap: 83px; }
  .pe-intro-text { flex: 0 0 auto; width: 100%; padding: 35px 0 0; gap: 0; align-items: center; text-align: left; }
  .pe-intro-text .eyebrow { margin-top: 0; }
  .pe-intro-text .h2 { width: 100%; margin: 10px 0 0; }
  .pe-intro-text .pe-divider { width: 360px; margin: 21px 0 14.4px; }
  .pe-intro-text .pe-copy { width: 100%; margin: 0 0 14.4px; }
  .pe-subhead { width: 100%; margin: 11.6px 0 10px; }
  .pe-intro-cta { margin: 0; }
  .pe-intro-video { flex: 0 0 auto; width: 100%; }

  /* event rooms */
  .pe-rooms { min-height: 0; padding: 20px 20px 21px; gap: 20px; align-items: stretch; }
  .pe-rooms-head { width: 100%; padding-top: 15px; display: flex; flex-direction: column; align-items: center; }
  .pe-rooms-head .h2 { width: 100%; margin: 10px 0 0; }
  .pe-rooms-head .pe-divider-sm { width: 340px; height: auto; align-self: flex-start; margin: 21px 0 14.7px 5px; }

  /* the accordion: a label, then its open panel, then the remaining labels */
  .pe-tabs { padding-bottom: 75px; }
  .pe-tab { margin-bottom: 11px; line-height: 33px; }
  /* live's (empty) label icon is narrower here than on desktop */
  .pe-tab::before { width: 10.4px; }
  .pe-tab[aria-selected="true"], .pe-tab:last-child { margin-bottom: 0; }
  .pe-panel { margin-bottom: 0; }
  .pe-room { padding: 0 16px; margin: 0 0 39px; }
  .pe-room-card { width: auto; max-width: none; margin: 24px 19px 0; padding: 28px 34px; }
  .pe-room-card h3 { font-size: 30px; }
  .pe-room-card h4 { font-size: 20px; }

  .pe-i10 { gap: 36px; }
  .pe-i10-text { width: 100%; align-items: center; }
  .pe-i10-text .h2 { width: 100%; margin: 10px 0 0; }
  .pe-i10-text .pe-divider-sm { width: 306px; height: auto; max-width: 100%; align-self: flex-start; margin: 22px 0 14.2px 5px; }
  .pe-i10-photo { width: 100%; margin: 0; }

  .pe-bonham { align-self: stretch; width: 100%; max-width: none; margin: 0; padding: 35px 20px 20px 40px; gap: 0; }
  .pe-bonham h3 { margin: 0; font-size: 22px; line-height: 22px; }
  .pe-bonham h4 { margin: 5px 0 0; font-size: 16px; line-height: 16px; }
  .pe-bonham .pe-features { margin: 20px 0 0; }
  .pe-bonham .pe-list { margin: 6px 0 0; }

  /* queso fountain */
  .pe-queso { gap: 0; }
  .pe-queso-photo { min-height: 602px; }
  .pe-queso-text { width: 100%; margin: 0; padding: 114px 11px 103px; }
  .pe-queso-text .pe-divider { width: 100%; margin: 21px 0 14px; }
  .pe-queso-copy { width: 100%; margin: 0; padding: 0 7px 0 14px; text-align: left; }
  .pe-queso-text .pe-features, .pe-queso-text .pe-list { margin: 0; }
  .pe-queso-text .pe-list { text-align: left; }
  .pe-note { width: 100%; margin: 0; padding: 0; }

  /* event menu */
  .pe-menu { padding: 30px 0 0; gap: 0; }
  .pe-menu > .h2 { margin-top: 20px; }
  .pe-divider-wide { width: 100%; margin: 36px 0 94px; }
  .pe-menu-panel { width: 340px; max-width: 100%; padding: 12px; justify-items: start; }
  .pe-menu-col { width: 300px; max-width: 100%; }
  .pe-menu-panel .pe-menu-col:nth-child(2) { margin-left: 5px; height: auto; padding-bottom: 45px; }
  .pe-menu-title { font-size: 22px; }
  .pe-dish h4 { width: 300px; max-width: none; font-size: 30px; }
  .pe-dish p { width: 300px; max-width: none; }
  .pe-buffet-photo { width: 294px; max-width: none; align-self: flex-start; margin: 34px 0 10px 13px; }

  /* know before you book */
  .pe-book { padding: 11px 4px 11px 21px; align-items: flex-start; }
  .pe-queso-text { justify-content: center; }
  .pe-book-text { width: 339px; max-width: 100%; padding: 0; gap: 6px; align-items: center; }
  .pe-divider-book { width: 100%; margin: 21px 0 0; }
  /* live's caret column is wider in this list than in the cards, which is what
     decides where each line breaks */
  .pe-list-wide { width: 100%; margin: 15px 0 0; }
  .pe-list-wide li { padding-left: 28.8px; }
  .pe-book-head-2 { width: 100%; text-align: center; }
  .pe-book-text .pe-copy, .pe-book-lead { width: 100%; }
  .pe-book-lead { font-size: 16px; }
  .pe-book-buttons { flex-direction: column; align-items: center; width: 100%; }

  /* live's gallery is a single masonry column of four slots; the fourth never
     loads its photo there, so it renders as an empty 181px band */
  .pe-gallery { flex: 0 0 auto; align-self: flex-start; width: 292px; max-width: 100%; margin: 10px 0 0 22px; padding: 10px; }
  .pe-gallery-cols { flex-direction: column; aspect-ratio: auto; gap: 10px; }
  .pe-gallery-col { display: contents; }
  .pe-gallery-col:first-child img:first-child { order: 1; }
  .pe-gallery-col:last-child img { order: 2; }
  .pe-gallery-col:first-child img:last-child { order: 3; }
  .pe-gallery-col:last-child > img:last-child { order: 4; }
}