/* Paper Glow — page-specific layout only. Foundation, header, menu, cursor, footer, lightbox and the editorial
   components (project-hero, project-intro, project-flow, flow-phrase, flow-night, split-58, credits, next projects)
   come from the shared site styles loaded before this file. */

/* HERO: fills the black frame edge to edge, same behaviour as Street Bangkok (foundation default cover crop
   + the shared flush-right rule). Steidl's title/meta are short, so the copy column can be narrower and the
   image wider than the site default, with less crop. */
.hero-copy{container-type:inline-size;min-width:0}
.hero-title{font-size:clamp(48px,9.2cqw,132px);line-height:.82;max-width:none}
.hero-image img{object-position:50% 42%}
@media(min-width:901px){
  .hero-copy{grid-column:1 / span 4}
  .hero-image{grid-column:5 / -1}
}

/* CONCEPT BAND: statement left, copy right — same composition as the other projects. */
.intro-copy{font-family:var(--serif)}

/* LIGHT AS SIGNAL: façade + exploded axonometric, paired on the page's own background (not a second black
   block stacked under the concept band). Same 7/5 mechanics as Baccarat's night-grid, renamed since this
   section is no longer dark, with the copy line set back to ink instead of the dark-mode cream. */
.signal-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.signal-back{grid-column:1 / span 7}
.signal-detail{grid-column:8 / -1}
.signal-detail .media-frame{aspect-ratio:16/10}
.signal-detail .media-frame img{object-fit:cover}
.signal-detail .media-frame.no-crop img{mix-blend-mode:multiply}
.signal-copy{grid-column:8 / -1;font-family:var(--serif);font-size:clamp(20px,1.7vw,29px);line-height:1.14;max-width:19ch;margin:28px 0 0;color:#3e3b37}
@media(max-width:640px){.signal-grid{display:block}.signal-detail,.signal-copy{margin-top:34px}}

/* Counter photo + furniture family, paired as one composition (existing flow-pair, reused). */
.pg-counter-pair .media-frame{aspect-ratio:3/4}
.pg-counter-pair .drawings-composition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.pg-counter-pair .drawings-composition figure{margin:0;min-width:0}
.pg-counter-pair .drawings-composition img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}

/* Drawings on a white ground melt into the page the same way Baan Thai's axonometries do. */
.pg-plate img{mix-blend-mode:multiply}
.pg-zoom{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:zoom-in}
.pg-zoom:focus-visible{outline:1px solid currentColor;outline-offset:6px}

/* Single large drawing, centred with generous white space. The floor plan (now the only plate in its
   section) is enlarged, and sits closer to the closing photo below it. */
.pg-plate{margin:0 auto;width:82%}
#spatial .pg-plate{margin-top:0}
@media(min-width:641px){#drawings .pg-plan{width:93%}}

/* Small centred detail image after the material/model pair. */
.pg-detail{width:min(44%,440px);margin:clamp(48px,6vw,90px) auto 0}
.pg-detail .media-frame{aspect-ratio:3/4}

/* Closing image: a tight beat after the plan rather than a long pause. */
.pg-final{padding-top:clamp(32px,4vw,56px)}

@media(max-width:900px){.pg-counter-pair .drawings-composition{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
  .pg-plate{width:100%}
  .pg-detail{width:70%}
  .pg-counter-pair .drawings-composition{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Three-line concept title needs to fit the shared concept-band height (css/concept-band.css) like Baccarat's does. */
.intro-head h2{font-size:clamp(40px,4.6vw,96px);line-height:.94}