.hero-foot { z-index: 3; }
.hero-portrait { position: absolute; z-index: 1; right: 5vw; top: 9%; width: clamp(220px, 27vw, 390px); margin: 0; }
.hero-portrait img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }
.hero-portrait figcaption,
.story-image figcaption { margin-top: 8px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.story-image { margin: 0 0 28px; }
.story-image img { display: block; width: 100%; height: clamp(240px, 32vw, 470px); object-fit: cover; }
.story-image figcaption { color: inherit; }

.concept-literary .hero-portrait { top: 13%; right: 7vw; width: 25vw; padding: 10px; border: 1px solid var(--ink); background: var(--paper); }
.concept-literary .hero-portrait img { filter: grayscale(1) contrast(.9); }
.concept-arts-journal .hero-portrait { top: 7%; right: 4vw; transform: rotate(4deg); box-shadow: 18px 18px 0 #f5dc52; }
.concept-arts-journal .hero-portrait img { filter: none; }
.concept-arts-journal .story-image img { filter: saturate(1.25) contrast(1.06); }
.concept-new-wave .hero-portrait { top: 8%; right: 3vw; transform: rotate(7deg); border: 8px solid #0b0b0b; box-shadow: -18px 18px 0 #16c9ff; }
.concept-new-wave .hero-portrait img { filter: grayscale(1) contrast(1.3); }
.concept-new-wave .story-image img { filter: grayscale(1) contrast(1.25); }
.concept-field-notes .hero-portrait { top: 9%; right: 6vw; width: min(29vw, 380px); padding: 12px 12px 38px; background: #f1eadc; transform: rotate(2deg); box-shadow: 0 10px 35px rgba(38,66,50,.2); }
.concept-field-notes .hero-portrait img { filter: sepia(.18) saturate(.8); }
.concept-field-notes .story-image img { border-radius: 50% 50% 8px 8px; filter: sepia(.12); }
.concept-studio .hero-portrait { top: 7%; right: 4vw; width: min(28vw, 420px); border-radius: 220px 220px 14px 14px; overflow: hidden; }
.concept-studio .hero-portrait img { filter: none; }
.concept-studio .hero-portrait figcaption { padding: 9px; margin: 0; background: #121317; color: #fff; }
.concept-studio .story-image img { border-radius: 4px; }

@media (max-width: 760px) {
  .hero-portrait { position: relative; top: auto !important; right: auto !important; width: min(74vw, 330px) !important; margin: 45px 0 0 auto; }
  .story-image img { height: min(105vw, 480px); }
}