/* Refinement layer from the type, alignment and empty-space study.
   Loaded after finish.css: one type scale, one vertical rhythm, one column spine,
   figures on the reading edge, and the two column holes closed. Colours, copy and
   the white drawing backgrounds are untouched. */

/* 1 · Type scale: ten sizes, one job each (desktop values at 1440px in comments). */
:root{
  --type-title:clamp(2rem,3.4vw,3.35rem);          /* 48  section titles */
  --type-number:clamp(2.75rem,5vw,4.5rem);         /* 72  bed counts */
  --type-number-small:clamp(1.7rem,2.5vw,2.25rem); /* 36  project facts, dimensions */
  --type-caption:.9375rem;                         /* 15  nav, legend, captions, roles */
  --type-body:clamp(1rem,.92rem+.25vw,1.125rem);   /* 18  body, 16 on phones */
}
h1{line-height:1.3}
h2,.concept-heading h2{line-height:1.4}
h3{line-height:1.45}
.contact-intro h2{font-size:clamp(1.7rem,2.5vw,2.25rem)}                       /* 36 */
.shared-copy h3{font-size:clamp(1.4rem,1.95vw,1.75rem);line-height:1.5}       /* 28 */
.hero-subtitle,.lede{line-height:1.8}
.architect-quote{font-size:calc(var(--type-subtitle)*var(--font-scale));line-height:1.8} /* 23, with the ledes */
.project-copy p,.concept-text p,.shared-copy p,.plan-description>p{font-size:calc(var(--type-body)*var(--font-scale));line-height:1.9} /* 18 body everywhere */
.location-panel-header h3,.contact-details h3{font-size:1.125rem;line-height:1.5} /* 18 small headings */
.capacity-value strong,.project-fact strong{line-height:1.2}
.dimension dd{font-size:calc(var(--type-number-small)*var(--font-scale))}      /* 36, with the project facts */
.capacity-value .unit{font-size:1rem}
.plan-library-entry p,.contact-links a,.contact-links>a{font-size:1rem}       /* 16 small body */
.main-nav a,.menu-toggle,.explore,.plan-legend li,.gallery-thumbnails span,.facade-detail figcaption,.image-caption,.image-zoom-hint,
.location-map .text-link,.text-link,.canvas-action,.location-label,.location-dimensions dt,.dimension dt,.site-footer p,
.contact-role,.contact-office p,.contact-office-links a,.architect-quote cite,.plan-library-links,.plan-library-links>a:last-child{font-size:var(--type-caption)} /* 15 captions */
@media(max-width:950px){.main-nav a{font-size:1.0625rem}}
@media(max-width:650px){.gallery-thumbnails span,.plan-library-links>a:last-child,.menu-toggle{font-size:.875rem}}
@media(max-width:480px){.capacity-value strong{font-size:2.75rem}}

/* 2 · Rhythm: one section value (88 desktop, 56 phone) and one divider (64 / 48). */
:root{--section:clamp(3.5rem,6.1vw,5.5rem)}
.concept-section{padding-block:var(--section)}
.project-credits{margin-top:2.5rem;padding-top:1.5rem}
.massing-figure{margin-top:4rem}
.central-block{margin-top:2.5rem;padding-top:1.5rem}
.facade-detail{margin-top:2.5rem;padding-top:1.5rem}
@media(max-width:650px){.project-credits,.central-block,.facade-detail{margin-top:2rem;padding-top:1rem}.massing-figure{margin-top:2.5rem}}

/* 3 · Spine: every two-column story splits the same way, so the gutter lands on one line. */
@media(min-width:1051px){
  .project-intro,.concept-story,.shared-intro,.shared-body,.section-intro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
}
@media(min-width:951px){
  .section-intro{align-items:start}
  .section-intro>p{margin-top:2.65rem}                    /* first line on the title, as in the project intro */
  .concept-copy{align-self:stretch;display:flex;flex-direction:column}
  .architect-quote{margin-top:auto;padding-top:1.5rem}    /* the quote closes the row where the map does */
}
.gallery-caption,.plan-library-entry,.location-panel-header{align-items:baseline}

/* 4 · Figures on the reading edge. Renders crop to their frame (never more than a tenth);
       drawings never crop and sit on the start edge, leftover falling on the end side. */
.massing-image{max-height:800px;object-fit:cover;object-position:center 45%}
.gallery-frame .drawing-button img{height:clamp(360px,50vw,720px);object-fit:cover;object-position:center}
.gallery-frame .drawing-button img.is-drawing{object-fit:contain}              /* the site plan stays whole */
.shared-drawing img{object-position:right top}
.central-image img{object-position:right top}
.facade-detail figure img{height:300px;object-fit:contain;object-position:right bottom} /* equal boxes, shared ground line */
@media(max-width:650px){.facade-detail figure img{height:auto;aspect-ratio:2/1}.gallery-frame .drawing-button img{height:auto;aspect-ratio:5/3}}

/* 5 · The two column holes. */
@media(min-width:651px){
  .shared-body{align-items:start;margin-top:2.5rem}
  .shared-drawing img{max-height:680px}
}
@media(min-width:951px){
  .central-block{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:2rem clamp(2rem,4vw,4rem);align-items:center} /* short caption text beside a tall drawing */
  .central-image img{max-height:none}
  .plan-panel{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}
  .plan-legend{grid-template-columns:1fr 1fr;gap:.6rem 1.25rem}
}
.plan-description .canvas-action{display:inline-block;margin-top:1.5rem;color:var(--copper);border-bottom:1px solid var(--line);padding:.45rem 0;background:none}