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

/* HERO: full-bleed photo. Cover crop keeping the BAAN sign, the menu screens and the green counter in frame. */
.hero-copy{container-type:inline-size;min-width:0}
.hero-title{max-width:none;white-space:nowrap;font-size:clamp(28px,15.4cqw,120px);line-height:.84}
.hero-image{background:#0b0b0b}
.hero-image img{object-fit:cover;object-position:56% 45%}

/* CONCEPT BAND: same composition as the other projects (statement left, copy right). "ARCHITECTURE." (~7.9em) fills the column. */
.project-intro .intro-head{grid-column:1 / span 6;container-type:inline-size}
.project-intro .intro-head h2{font-size:12.2cqw;line-height:.88}
.baan-tiger{display:block;width:62%;height:auto;margin:clamp(44px,5vw,80px) auto 0}
.project-intro .intro-copy{grid-column:8 / -1}
.project-intro .intro-copy p{margin:0 0 .9em}
.project-intro .intro-copy p:last-child{margin-bottom:0}

/* IMAGE ROWS: 12-column rows; images keep their native ratio (no-crop), widths vary from row to row. */
.baan-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.baan-row + .baan-row{margin-top:clamp(36px,4.6vw,76px)}
.baan-row figure{margin:0;min-width:0}
.baan-row img{display:block;width:100%;height:auto}
.c-1-12{grid-column:1 / -1}
.c-2-11{grid-column:2 / 12}
.c-1-5{grid-column:1 / span 5}.c-6-12{grid-column:6 / -1}
.c-1-6{grid-column:1 / span 6}.c-7-12{grid-column:7 / -1}
.c-1-7{grid-column:1 / span 7}.c-8-12{grid-column:8 / -1}
.c-1-8{grid-column:1 / span 8}.c-9-12{grid-column:9 / -1}
.c-4-12{grid-column:4 / -1}
.c-3-6{grid-column:3 / span 4}.c-7-10{grid-column:7 / span 4}.c-4-9{grid-column:4 / span 6}
.baan-row .off{margin-top:clamp(36px,7vw,120px)}
/* Drawings with a white ground */
.baan-axo img{mix-blend-mode:multiply}
.baan-zoom{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:zoom-in}
.baan-zoom:focus-visible{outline:1px solid currentColor;outline-offset:6px}
.baan-section .flow-phrase{margin-top:0}
.flow-night.baan-section{border-bottom:0}

/* Construction text */
.baan-copy{max-width:640px;margin:0 auto clamp(48px,6vw,96px);font-family:var(--serif);font-size:clamp(18px,1.4vw,23px);line-height:1.22;color:#d9d5ce}
.baan-copy p{margin:0}

/* Closing phrase */
.baan-end{min-height:60svh;display:flex;align-items:center;justify-content:center;padding:clamp(80px,10vw,160px) var(--pad);border-bottom:1px solid var(--line)}
.baan-end .flow-phrase{margin:0;max-width:1100px}
.baan-end .flow-phrase p{font-size:clamp(30px,4vw,64px)}

@media(max-width:900px){
  .hero-image img{object-position:62% 45%}
  .hero-title{max-width:none;margin:60px 0 48px}
  .project-intro .intro-head{grid-column:auto}
  .baan-row .off{margin-top:clamp(20px,5vw,40px)}
}
@media(max-width:640px){
  .baan-row{display:block}
  .baan-row figure + figure{margin-top:34px}
  .baan-row .off{margin-top:34px}
  .baan-row + .baan-row{margin-top:34px}
}

/* No hairline dividers on this page: sections, hero metadata and credits are separated by spacing only. */
.project-hero,.hero-image,.project-flow,.baan-end{border:0}
.hero-meta{border-top:0}

/* Photo/drawing pairs: equal columns, aligned top and bottom edges, same gap as the grid. */
.baan-pair{align-items:stretch}
.baan-pair figure .media-frame,.baan-pair figure .baan-zoom{height:100%}
@media(max-width:900px){
  .baan-detail .c-3-6{grid-column:1 / span 6}.baan-detail .c-7-10{grid-column:7 / span 6}
  .baan-row .c-4-9{grid-column:2 / span 10}.baan-row .c-9-12{grid-column:7 / span 6}
}

/* Two spacing intentions. Photo sequence: one tight value for every gap (horizontal inside pairs = vertical between blocks). Axonometry pair: generous white space above (below the concept band) and below (before the photos). */
#project{--baan-gap:clamp(36px,4.6vw,76px);--baan-photo-gap:clamp(16px,1.9vw,32px)}
.baan-row{gap:var(--baan-photo-gap)}
.baan-row + .baan-row{margin-top:var(--baan-photo-gap)}
.baan-row figure + figure{margin-top:0}
.baan-section{padding-top:0;padding-bottom:0}
.baan-section + .baan-section{margin-top:var(--baan-photo-gap)}
#axonometry{padding-top:calc(var(--baan-gap) * 3)}
#axonometry + .baan-section{margin-top:calc(var(--baan-gap) * 3)}
.baan-last{padding-bottom:0}
@media(max-width:640px){.baan-row figure + figure{margin-top:var(--baan-photo-gap)}}
/* Floor plan: a centred, slightly smaller pause with generous white space above and below. */
.baan-row .baan-plan-fig{grid-column:1 / -1;width:74%;margin-left:auto;margin-right:auto}
#plan{margin-top:calc(var(--baan-gap) * 3)}
#plan + .baan-section{margin-top:calc(var(--baan-gap) * 3)}
@media(max-width:640px){.baan-row .baan-plan-fig{width:100%}}