/* Independent cover composition: paper, a framed architectural photograph, a signed panel. */
.reference-version .dark-top { background: #edeeeb; color: #101e28; }
.reference-hero.hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 65px; width: calc(100% - 112px); max-width: 1328px; margin: 0 auto; padding: 62px 0 72px; min-height: 650px; }
.reference-hero .hero-copy { grid-column: 1; grid-row: 1; width: auto; max-width: 650px; margin: 0; padding: 10px 0; }
.reference-hero .intro-label { color: #526876; margin-bottom: 32px; font-size: 15px; }
.reference-hero h1 { font-size: clamp(42px,4.05vw,61px); line-height: 1.12; letter-spacing: -1.6px; margin-bottom: 28px; }
.reference-hero .hero-summary { color: #4b606b; font-size: 18px; max-width: 535px; }
.reference-hero .hero-actions { gap: 28px; flex-wrap: wrap; }
.reference-hero .hero-actions .button { background: #101e28; color: #ededed; }
.reference-hero .hero-actions .button:hover { background: #294655; }
.reference-hero .text-link { color: #101e28; }
.reference-hero .hero-note { color: #617581; font-size: 13px; margin-top: 30px; }
.hero-portrait { grid-column: 2; grid-row: 1; position: relative; margin: 0 0 22px 0; isolation: isolate; }
.hero-portrait::before { content: ''; position: absolute; inset: 26px -22px -22px 26px; border: 1px solid #a5b4bc; z-index: -1; }
.hero-image-window { height: 440px; overflow: hidden; background: #bcd5e3; }
.reference-hero .hero-photo { position: static; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.hero-portrait figcaption { display: flex; align-items: center; gap: 22px; padding: 26px 30px; background: #101e28; color: #ededed; }
.hero-portrait figcaption > img { width: 40px; height: 40px; background: #c4bfb3; padding: 5px; }
.hero-portrait figcaption span { display: block; color: #b7c3c9; font-size: 12px; margin-bottom: 10px; }
.hero-portrait figcaption strong { font: 400 25px/1.3 Lora,serif; }
.hero-portrait figcaption strong br { display: none; }
.dark-top > .r2-plan { width: 100%; color: #58798b; opacity: .07; z-index: 0; }
.dark-top > .r2-plan svg { right: auto; left: -30%; width: 100%; }
@media(min-width:1700px) { .reference-hero.hero { min-height: 700px; } }
@media(max-width:1100px) { .reference-hero.hero { gap: 36px; } .reference-hero h1 { font-size: 44px; } .hero-image-window { height: 390px; } .hero-portrait figcaption { padding: 24px; } .hero-portrait figcaption strong { font-size: 22px; } }
@media(max-width:800px) {
 .reference-hero.hero { width: calc(100% - 40px); display: flex; flex-direction: column; align-items: stretch; gap: 35px; padding: 38px 0 48px; min-height: 0; }
 .reference-hero .hero-copy { order: 0; padding: 0; }
 .reference-hero h1 { font-size: clamp(35px,7vw,48px); letter-spacing: -1px; }
 .reference-hero .intro-label { margin-bottom: 22px; }
 .reference-hero .hero-summary { font-size: 17px; }
 .hero-portrait { order: 1; margin: 0 12px 12px 0; }
 .hero-portrait::before { inset: 12px -12px -12px 12px; }
 .hero-image-window { height: 290px; }
 .hero-portrait figcaption { padding: 22px; gap: 16px; }
 .hero-portrait figcaption strong { font-size: 21px; }
 .reference-hero .hero-note { font-size: 12px; }
}
.hero-portrait figcaption > img { background: transparent; padding: 0; }
.hero-portrait figcaption strong br { display: initial; }
.reference-hero.hero { background: transparent; }
/* Visible architectural contours, drawn in a staggered sequence around the cover. */
.dark-top > .r2-plan.hero-contours { top: 132px; width:100%; color:#58798b; opacity:.21; }
.dark-top > .r2-plan.hero-contours svg { left:0; right:0; width:100%; height:100%; }
.hero-contours path { stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
@media(prefers-reduced-motion:no-preference) {
 .dark-top.r2-drawn > .hero-contours path { animation: r2-draw 4s cubic-bezier(.35,.05,.35,1) calc(var(--line-order) * .32s + .25s) both; }
}
@media(max-width:800px) { .dark-top > .r2-plan.hero-contours { top:88px; opacity:.14; } }