.food-surface { background: #f9f9ee; padding-bottom: clamp(60px, 8vw, 150px); }
.food-hero { position: relative; display: grid; grid-template-columns: 32% 68%; height: 42vw; max-height: 810px; }
.food-hero h1 { align-self: center; justify-self: center; margin: 35px 0 0; writing-mode: vertical-rl; color: var(--color-accent); font-size: clamp(24px, 2.5vw, 48px); font-weight: 500; letter-spacing: .25em; }
.food-hero__photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.food-hero__illustration { position: absolute; width: 20%; left: 22%; bottom: 0; }
.food-section { margin-top: clamp(56px, 8vw, 150px); }
.food-section h2 { margin: 0 0 5vw; text-align: center; font-size: clamp(18px, 1.6vw, 30px); line-height: 1.8; letter-spacing: .25em; }
.food-section h2 > span { display: inline-block; text-wrap: balance; padding-bottom: .25em; border-bottom: 4px solid var(--color-yellow); }
.food-prose { font-size: clamp(14px, 1.1vw, 21px); line-height: 2; }
.food-prose p { margin: 0 0 1.8em; }
.food-prose p:last-child { margin-bottom: 0; }
.food-prose--intro { width: 82%; margin-left: auto; }
.food-prose--narrow { width: 76%; margin-inline: auto; }
.food-split { display: grid; grid-template-columns: 46% 48%; gap: 6%; align-items: center; }
.food-split > img { width: 100%; }
.food-kitchen { width: 66%; margin: 0 auto 3vw; }
.food-split--kitchen { width: 90%; margin-left: auto; grid-template-columns: 40% 55%; gap: 5%; }
@media (max-width: 767px) {
  .food-hero { grid-template-columns: 28% 72%; height: 78vw; min-height: 300px; max-height: 420px; }
  .food-hero h1 { font-size: 20px; letter-spacing: .15em; margin-top: 32px; }
  .food-hero__photo { object-position: 45% center; }
  .food-hero__illustration { width: 30%; left: 20%; }
  .food-section { margin-top: 48px; }
  .food-section h2 { margin-bottom: 26px; font-size: 15px; letter-spacing: .1em; }
  .food-heading-part { display: block; white-space: nowrap; }
  .food-prose { font-size: 14px; }
  .food-prose--intro, .food-prose--narrow { width: 100%; }
  .food-split { grid-template-columns: 1fr; gap: 24px; }
  .food-kitchen { width: 100%; margin-bottom: 24px; }
  .food-split--kitchen { width: 100%; }
}