body.case-page { background: var(--paper); }
.case-page .header { position: relative; }
.case-page main { overflow: hidden; }
.case-intro { padding: 58rem 0 52rem; text-align: center; }
.case-back { display: block; text-align: left; color: var(--muted); font-size: 15rem; }
.case-intro h1 { margin-top: -2rem; font: 500 100rem/.9 var(--serif); letter-spacing: -.045em; }
.case-intro h1 em, .case-heading h2 em { color: var(--burgundy); font-style: normal; }
.case-subtitle { margin-top: 12rem; font: 500 28rem/1.1 var(--serif); }
.case-meta { display: flex; justify-content: center; align-items: center; gap: 14rem; margin-top: 22rem; font-size: 16rem; }
.case-meta i { width: 3rem; height: 3rem; border-radius: 50%; background: currentColor; }
.case-cover { width: 100%; height: 510rem; position: relative; overflow: hidden; }
.case-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.case-cover > p { position: absolute; left: max(calc((100vw - var(--container)) / 2), 38rem); top: 50%; color: #fff; font-size: 13rem; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; transform: translateY(-50%); text-shadow: 0 2rem 15rem rgba(0,0,0,.45); }
.case-cover > p::after, .case-note i { content: ""; display: block; width: 70rem; height: 1rem; margin-top: 20rem; background: currentColor; opacity: .7; }
.case-story { min-height: 410rem; padding-block: 90rem; display: grid; grid-template-columns: 1fr 260rem 110rem; grid-template-rows: auto 1fr; gap: 36rem 38rem; }
.case-heading { display: flex; align-items: flex-start; gap: 28rem; }
.case-heading h2 { font: 500 72rem/.92 var(--serif); letter-spacing: -.04em; white-space: nowrap; }
.case-heading > span { width: 72rem; height: 1rem; margin-top: 35rem; background: var(--muted); opacity: .65; }
.case-story > .case-heading { grid-column: 1; }
.case-story__copy { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 44rem; align-self: start; max-width: 760rem; font-size: 17rem; line-height: 1.6; }
.case-story__image { grid-column: 2; grid-row: 1/3; width: 260rem; height: 325rem; overflow: hidden; }
.case-story__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(1); }
.case-note { grid-column: 3; grid-row: 1/3; align-self: center; font-size: 11rem; line-height: 1.8; letter-spacing: .22em; text-transform: uppercase; }
.case-note i { width: 45rem; margin-top: 14rem; }
.case-gallery { padding-block: 70rem 90rem; }
.case-gallery > header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36rem; }
.case-gallery > header > p, .case-kicker { font-size: 11rem; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; }
.case-gallery__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; grid-auto-rows: 350rem; gap: 14rem; }
.case-gallery__item { overflow: hidden; }
.case-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.case-gallery__item--wide { grid-column: 1/3; }
.case-gallery__item--large { grid-column: 2/4; }
.case-gallery__item--small { min-width: 0; }
.couple-quote { margin-top: 0; padding: 90rem 0; background: var(--chocolate); color: #f7eee8; }
.couple-quote__inner { display: grid; grid-template-columns: 2fr 1fr; gap: 58rem; align-items: center; }
.couple-quote__image { height: 390rem; overflow: hidden; }
.couple-quote__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.couple-quote blockquote > p:nth-child(2) { margin-top: 35rem; font: 400 43rem/1.06 var(--serif); letter-spacing: -.02em; }
.couple-quote blockquote footer { display: flex; align-items: center; gap: 18rem; margin-top: 25rem; font-size: 15rem; }
.couple-quote blockquote footer i { width: 54rem; height: 1rem; background: currentColor; opacity: .65; }
.case-next { padding-block: 90rem; }
.case-next > .case-heading { margin-bottom: 36rem; }
.case-next__grid { display: grid; grid-template-columns: 3fr 1fr; gap: 54rem; align-items: center; }
a.case-next__grid:hover .case-next__image img { transform: scale(1.02); }
.case-next__image { height: 270rem; overflow: hidden; }
.case-next__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case-next__copy h3 { margin-top: 34rem; font: 500 50rem/1 var(--serif); }
.case-next__copy > p:not(.case-kicker) { margin-top: 10rem; font-size: 17rem; }
.case-text-link { display: inline-block; margin-top: 30rem; padding-bottom: 4rem; border-bottom: 1rem solid currentColor; font-size: 15rem; }
.case-page .booking { padding-block: 80rem 60rem; }

@container design (max-width: 1199px) {
  .case-intro h1 { font-size: 90rem; }
  .case-cover { height: 470rem; }
  .case-story { grid-template-columns: 1fr 230rem 86rem; }
  .case-story__copy { gap: 24rem; }
  .case-story__image { width: 230rem; height: 300rem; }
  .case-gallery__grid { grid-auto-rows: 285rem; }
  .couple-quote__inner { gap: 38rem; }
  .couple-quote blockquote > p:nth-child(2) { font-size: 40rem; }
}

@container design (min-width: 601px) and (max-width: 1199px) {
  .case-back { font-size: 12px; }
  .case-intro h1 { font-size: 58px; }
  .case-subtitle { font-size: 19px; }
  .case-meta { font-size: 12px; }
  .case-cover > p { font-size: 10px; }
  .case-heading h2 { font-size: 46px; }
  .case-heading > span { margin-top: 23px; }
  .case-story { min-height: 330px; padding-block: 64px; }
  .case-story__copy { font-size: 14px; }
  .case-note,
  .case-gallery > header > p,
  .case-kicker { font-size: 9px; }
  .couple-quote blockquote > p:nth-child(2) { font-size: 34px; }
  .couple-quote blockquote footer { font-size: 12px; }
  .case-next__copy h3 { font-size: 36px; }
  .case-next__copy > p:not(.case-kicker) { font-size: 14px; }
  .case-text-link { font-size: 12px; }
}

@container design (max-width: 600px) {
  .case-page .header { height: 80rem; }
  .case-intro { width: 328rem; padding: 55rem 0 48rem; }
  .case-back { font-size: 13rem; }
  .case-intro h1 { margin-top: 38rem; font-size: 58rem; line-height: .9; }
  .case-subtitle { margin-top: 14rem; font-size: 24rem; }
  .case-meta { gap: 10rem; margin-top: 20rem; font-size: 13rem; }
  .case-cover { height: 340rem; }
  .case-cover img { object-position: center; }
  .case-cover > p { left: 31rem; top: auto; bottom: 28rem; font-size: 11rem; }
  .case-story { min-height: 0; padding-block: 70rem; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap: 36rem; }
  .case-heading { gap: 16rem; }
  .case-heading h2 { font-size: 55rem; white-space: normal; }
  .case-heading > span { flex: 1; margin-top: 28rem; }
  .case-story > .case-heading, .case-story__copy, .case-story__image, .case-note { grid-column: 1; grid-row: auto; }
  .case-story__copy { grid-template-columns: 1fr; gap: 20rem; font-size: 16rem; line-height: 1.6; }
  .case-story__image { width: 78%; height: 390rem; margin: 10rem 0 0 auto; }
  .case-note { margin-left: auto; }
  .case-gallery { padding-block: 70rem; }
  .case-gallery > header { align-items: flex-start; }
  .case-gallery > header > p { display: none; }
  .case-gallery__grid { display: block; }
  .case-gallery__item { width: 100%; height: auto; margin-bottom: 18rem; }
  .case-gallery__item img { width: 100%; height: auto; aspect-ratio: auto; }
  .couple-quote { padding-block: 70rem; }
  .couple-quote__inner { display: grid; grid-template-columns: 1fr; gap: 36rem; }
  .couple-quote__image { height: 350rem; }
  .couple-quote blockquote > p:nth-child(2) { margin-top: 28rem; font-size: 40rem; }
  .case-next { padding-block: 70rem; }
  .case-next__grid { grid-template-columns: 1fr; gap: 28rem; }
  .case-next__image { height: 220rem; }
  .case-next__copy h3 { margin-top: 20rem; font-size: 42rem; }
  .case-next__copy > p:not(.case-kicker) { font-size: 16rem; }
  .case-text-link { font-size: 14rem; }
  .case-text-link { margin-top: 22rem; }
  .case-page .booking { padding-block: 70rem 55rem; }
}