.design-scene { position: relative; min-width: 0; isolation: isolate; }
.design-scene .hero-image { position: relative; z-index: 1; }
.scene-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.pencil-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.pencil-echo { opacity: .28; stroke-width: 1; }
.design-hero { isolation: isolate; gap: 8%; padding-block: 78px 94px; }
.design-hero .hero-copy { position: relative; z-index: 3; }
.variant-1 .scene-lines { color: #9a6758; }
.variant-1 .hero-image { box-shadow: 16px 19px 0 #ede4d5; }
.variant-2 .design-hero { position: relative; color: var(--paper); padding-block: 74px 92px; margin-bottom: 56px; }
.variant-2 .design-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #63302f; box-shadow: 0 0 0 100vmax #63302f; clip-path: inset(0 -100vmax); }
.variant-2 .design-hero .eyebrow { color: #e4cbb3; }
.variant-2 .design-hero .hero-copy p:not(.eyebrow) { color: #e8dbd0; }
.variant-2 .scene-lines { color: #f4ecda; }
.variant-2 .hero-image { box-shadow: 17px 18px 0 #522827; }
.variant-3 .design-hero { position: relative; }
.variant-3 .scene-lines { color: #967657; }
.variant-3 .design-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 38px; height: 1px; background: #ad8a68; }
.variant-3 .hero-copy h1 { padding-left: 22px; border-left: 2px solid #ad8a68; }
.variant-4 .design-scene { aspect-ratio: 4 / 5; }
.variant-4 .design-scene .hero-image { position: absolute; left: 16%; top: 17%; width: 78%; height: 77%; }
.variant-4 .scene-lines { z-index: 0; color: #9a8063; }
.variant-4 .scene-seam { z-index: 2; color: #f6f2e9; }
.variant-4 .design-hero { gap: 5%; }
@media (min-width: 651px) and (max-width: 1000px) {
  .design-hero { grid-template-columns: 1fr; gap: 62px; }
  .design-hero .hero-copy { max-width: 720px; }
  .design-scene { width: min(80%, 520px); margin-inline: auto; }
  .variant-4 .design-scene { width: min(88%, 580px); }
}
@media (max-width: 650px) {
  .design-hero { padding-block: 36px 68px; gap: 44px; }
  .design-scene { width: 86%; margin-inline: auto; }
  .variant-1 .hero-image { box-shadow: 9px 11px 0 #ede4d5; }
  .variant-2 .design-hero { padding-block: 36px 64px; margin-bottom: 32px; }
  .variant-2 .hero-image { box-shadow: 9px 11px 0 #522827; }
  .variant-3 .design-hero::after { bottom: 28px; }
  .variant-3 .hero-copy h1 { padding-left: 16px; }
  .variant-4 .design-scene { width: 96%; }
}
@media print {
  .variant-2 .design-hero { color: var(--ink); }
  .variant-2 .design-hero::before { display: none; }
  .variant-2 .design-hero .hero-copy p:not(.eyebrow) { color: var(--muted); }
}