/* About: the note, then the colophon. The case study joins them here later. */
.hero.short { height: clamp(440px, 40vw, 540px); }
/* Capped like the home hero, so the heading wraps inside the wall's left veil instead of
   running onto covers at full strength. */
.hero.short h1 { max-width: 11ch; font-size: clamp(52px, 6.4vw, 96px); line-height: 0.95; }
#why { padding-top: 24px; }
.note { max-width: 44rem; }
.note blockquote { font-weight: 500; letter-spacing: -0.01em; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.55; }
#colophon { padding-top: clamp(80px, 9vw, 120px); }
@media (max-width: 560px) { .hero.short { height: 500px; } }