.story {
  position: relative;
  isolation: isolate;
  min-height: 900px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: clamp(70px, 8vw, 120px);
  padding-bottom: clamp(70px, 8vw, 120px);
  overflow: hidden;
  background: #8b2e08;
}

.story-backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("classy-chili-story.jpeg");
  background-size: cover;
  background-position: center right;
}

.story::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(91,25,4,.25), rgba(100,27,3,.08) 45%, rgba(42,10,2,.12));
}

.story-card {
  width: min(650px, 58vw);
  padding: clamp(42px, 5vw, 72px);
  background: rgba(255,249,238,.96);
  border: 1px solid rgba(205,139,34,.9);
  outline: 1px solid rgba(205,139,34,.55);
  outline-offset: -10px;
  text-align: center;
  box-shadow: 0 28px 70px rgba(49,10,0,.32);
}

.story-card .eyebrow { color: #a75a18; margin-bottom: 12px; }
.story-card h2 { font-size: clamp(3rem, 5.4vw, 5.6rem); color: #9c260f; }
.story-rule { display: flex; align-items: center; gap: 10px; margin: 24px auto; color: #c68b28; }
.story-rule::before, .story-rule::after { content: ""; height: 1px; background: currentColor; flex: 1; }
.story-rule span { font-size: .58rem; }
.story .story-body { font: 400 clamp(1rem, 1.3vw, 1.16rem)/1.65 "Fraunces", serif; }
.story-body p { margin: 0 0 21px; }
.story-promise { margin: 30px 0 24px; color: #9c391b; font: 600 clamp(1.15rem, 1.8vw, 1.5rem)/1.35 "Fraunces", serif; }
.story-signoff { margin: 0; font-family: "Fraunces", serif; }
.story-signoff strong { display: block; margin-top: 6px; color: #a13117; font-size: 1.55rem; font-style: italic; font-weight: 600; }
.story-origin { margin-top: 32px; padding-top: 19px; border-top: 1px solid rgba(198,139,40,.55); color: #9c5a19; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

@media (max-width: 800px) {
  .story { min-height: auto; display: flex; padding: 70px 18px; background: #9a350b; }
  .story-backdrop { background-position: 72% center; opacity: .85; }
  .story::after { background: rgba(92,25,4,.34); }
  .story-card { width: 100%; padding: 46px 28px; }
  .story .story-body { font-size: 1rem; }
}