/* Second block: one layout derived from the 1024 x 340 visual reference. */
.story {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1024 / 340;
  overflow: hidden;
  color: #22221c;
  background: var(--surface-home);
  border-top: max(2px, .29vw) solid #e4e3d8;
  font-family: 'Times New Roman', serif;
}
.story::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('assets/story-stone.png.webp') center / cover no-repeat;
  filter: saturate(.35) brightness(.92);
  opacity: .8;
}
.porch { position: absolute; inset: 0 auto 0 0; width: 48%; margin: 0; z-index: 0; }
.porch img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%;
  mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%);
}
.porch figcaption {
  position: absolute; z-index: 1; left: 1.1vw; bottom: .7vw;
  padding: .25vw .5vw; background: #f3f1e5d9;
  font: 400 max(10px, .85vw)/1.3 'Times New Roman', serif;
  color: #292820;
}
.porch figcaption a { text-underline-offset: 2px; }
.story-shade {
  position: absolute; inset: 0 0 0 auto; width: 13.5%; z-index: 1;
  background: linear-gradient(90deg, transparent, #1d1915 38%, #161411);
}
.story-ornament {
  position: absolute; z-index: 2;
  left: 69.5%; top: -15%; width: 26%; height: 124%;
  object-fit: contain;
  transform: none;
  filter: brightness(.8) contrast(1.06);
  pointer-events: none;
}
.story-copy {
  position: absolute; z-index: 3;
  left: 50.5%; top: 8.4%; bottom: 9.7%; width: 28.7%;
}
.story-copy h2 {
  margin: 0; font: 400 3.91vw/.97 'Times New Roman', serif;
  letter-spacing: -.11vw; white-space: nowrap;
}
.story-copy .line { width: 4.1vw; height: 1px; background: #55564b; margin: 1.85vw 0; }
.story-copy p { width: 100%; margin: 0; font: 400 max(13px, 1.37vw)/1.3 'Times New Roman', serif; }
.story-link {
  position: absolute; bottom: 0; left: 0;
  display: inline-flex; align-items: center; gap: 1.2vw;
  font: 400 max(13px, 1.37vw)/1.4 'Times New Roman', serif;
  text-decoration-thickness: 1px; text-underline-offset: .4vw;
}
.story-link span { font-size: 1.9vw; text-decoration: none; }
.story-link:focus-visible { outline: 2px solid #2a2a22; outline-offset: 6px; }
.story-detail {
  position: absolute; z-index: 4;
  right: 2.3%; top: 23%; width: 5.8%;
  display: flex; flex-direction: column; gap: 1.9vw;
  color: #edece2; font: 400 .99vw/1.1 'Times New Roman', serif;
  text-transform: uppercase;
}
.story-detail::after { content: ''; width: 1px; height: 8vw; margin: .2vw auto 0; background: #c8c4b9; }
@media (min-width: 851px) and (max-width: 1100px) {
  .story { aspect-ratio: auto; height: max(380px, 33.2vw); }
  .story-copy p { font-size: 15px; }
  .story-link { min-height: 44px; font-size: 15px; }
  .story-detail { right: 1%; width: 9.5%; font-size: 11px; }
}
@media (max-width: 850px) {
  .story { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; }
  .porch { position: relative; flex: none; width: 100%; height: auto; aspect-ratio: 1.5; }
  .porch img { mask-image: linear-gradient(#000 0%, #000 82%, transparent 100%); }
  .porch figcaption { left: 12px; bottom: 12px; padding: 4px 7px; font-size: 11px; }
  .story-shade, .story-detail { display: none; }
  .story-ornament { left: auto; right: -45px; top: auto; bottom: -30px; width: 190px; height: 310px; opacity: .22; }
  .story-copy { position: relative; inset: auto; width: auto; padding: 25px 6% 32px; }
  .story-copy h2 { font-size: clamp(30px, 7.7vw, 48px); letter-spacing: -1px; white-space: normal; }
  .story-copy .line { width: 42px; margin: 22px 0; }
  .story-copy p { font-size: 17px; line-height: 1.45; max-width: 33ch; }
  .story-link { position: static; margin-top: 26px; min-height: 44px; gap: 16px; font-size: 17px; text-underline-offset: 5px; }
  .story-link span { font-size: 24px; }
}