/* Le Noctambule — 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 */
.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 img{object-position:50% 50%}

/* CONCEPT BAND */
/* Concept band: same composition as Street Bangkok (statement left, brand block centre, copy right).
   Only the statement is fitted to its column: "ARCHITECTURAL" (7.82em wide) fills the column width. */
.project-intro .intro-head{grid-column:1 / span 4;container-type:inline-size}
.project-intro .intro-head h2{font-size:12.4cqw;line-height:.88}
.project-intro .intro-logos{grid-column:5 / span 2;grid-row:2;align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,1.8vw,28px)}
.project-intro .intro-copy p{margin:0 0 .9em}
.project-intro .intro-copy p:last-child{margin-bottom:0}
.project-intro .intro-logos img{display:block;height:auto;object-fit:contain}
.project-intro .intro-logos img[alt="Sofitel"]{width:clamp(140px,16vw,236px);filter:brightness(0) invert(.95)}
.project-intro .intro-logos img[alt="Accor"]{width:min(100%,clamp(70px,7vw,104px))}

/* BLACK GROUND: the drawings sit on a fine neutral-black grain (~#0f0f0f, σ≈5). The page uses a real 256px background patch
   cut from the drawings themselves, so their frames melt into the sections. No borders or fills between sections. */
.project-intro,.noct-dark,.noct-statement{background:#0f0f0f url("../../assets/noctambule/images/grain.png") 0 0 / 102px 102px repeat;border-bottom:0}

/* CHAPTERS: serif phrase, serif copy */
.noct-dark .noct-chapter .flow-phrase,.noct-dark .flow-phrase{margin-top:0}
.noct-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}
.noct-copy p{margin:0 0 .9em}
.noct-copy p:last-child{margin-bottom:0}
.noct-dark .noct-copy{color:#d9d5ce}
.noct-dark .flow-phrase{margin-bottom:clamp(40px,5vw,72px)}
.noct-dark 
/* IMAGE GRIDS: technical drawings keep their native ratio (no-crop) */
.noct-fig{margin:0}
.noct-grid{display:grid;gap:var(--gap);align-items:start}
.noct-grid + .noct-grid{margin-top:clamp(40px,5vw,80px)}
.noct-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.noct-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.noct-grid.one{grid-template-columns:minmax(0,1fr)}
.noct-atmosphere{grid-template-columns:5fr 7fr}
.noct-atmosphere .portrait-item{max-width:none}
.noct-atmosphere .landscape-item{padding-top:10vw}
.noct-entrance .media-frame.no-crop img{width:100%}

/* ACOUSTIC SCORE: one inline SVG (key left, small; score right, dominant) with a transparent background,
   so it sits directly on the textured black. Vector: stays sharp at any zoom in the lightbox. */
.noct-doc{margin:0;display:block;cursor:zoom-in}
.noct-doc:focus-visible{outline:1px solid currentColor;outline-offset:8px}
.noct-doc-svg{display:block;width:100%;height:auto;overflow:visible;text-rendering:geometricPrecision}

/* Lightbox (plain dialog, no library) */
.noct-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0f0f0f url("../../assets/noctambule/images/grain.png") 0 0 / 102px 102px repeat;color:#f0eee9;overflow:auto}
.noct-lightbox::backdrop{background:#0f0f0f}
.noct-lightbox-stage{min-width:100%;min-height:100%;display:flex;padding:clamp(28px,4vw,56px) clamp(14px,2vw,30px)}
.noct-lightbox .noct-doc{cursor:zoom-in;flex:none;margin:auto}
.noct-lightbox .noct-doc.is-full{cursor:zoom-out}
.noct-lightbox-close{position:fixed;top:14px;right:18px;z-index:2;width:40px;height:40px;border:0;padding:0;background:transparent;color:inherit;font:inherit;font-size:28px;line-height:1;cursor:pointer;opacity:.7;transition:opacity .2s ease}
.noct-lightbox-close:hover,.noct-lightbox-close:focus-visible{opacity:1}
html.noct-lightbox-open{overflow:hidden}

/* STATEMENT */
.noct-statement{min-height:82svh;display:flex;align-items:center;padding:0 var(--pad);background:#080808;color:#f0eee9;border-bottom:1px solid #252525}
.noct-statement p{margin:0;font-size:clamp(44px,8vw,138px);line-height:.87;letter-spacing:-.067em;font-weight:650;text-transform:uppercase}
.noct-statement span{color:#d64033}

/* The concert and restaurant renders carry white presentation margins (top/bottom) in the source files.
   The files are untouched; only the empty margins are trimmed from the displayed frame. */
.noct-trim{position:relative;overflow:hidden}
.noct-trim img{position:absolute;left:0;width:100%;height:auto}
.noct-trim-restaurant{aspect-ratio:2048 / 1079}
.noct-trim-restaurant img{top:-15.01%}
/* Rhino screenshot: keep only the lit part of the ceiling down to the floor (rows 400-1390 of 1528), dropping the viewport UI (icons, axis gizmo). */
.noct-trim-screen{aspect-ratio:1668 / 990}
.noct-trim-screen img{top:-40.404%}

/* CONCERT ROOM: day → night crossfade driven by scroll (js/noctambule.js) */
.noct-concert{position:relative;height:180svh;background:#000}
.noct-concert-stage{position:sticky;top:56px;height:calc(100svh - 56px);overflow:hidden}
.noct-concert-img{position:absolute;inset:0;container-type:size}
.noct-concert-img img{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * 1.7794));height:auto;max-width:none;transform:translate(-50%,-50%)}
.noct-concert-night{opacity:0}

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

@media(max-width:900px){
  .hero-title{max-width:none;margin:60px 0 48px}
  .project-intro .intro-head{grid-column:auto}
  .project-intro .intro-logos{margin:34px 0}
  .noct-grid.three{grid-template-columns:1fr}
  .noct-atmosphere .landscape-item{padding-top:6vw}
  .noct-concert{height:auto}
  .noct-concert-stage{position:relative;top:auto;height:auto;overflow:visible}
  .noct-concert-img{position:relative;inset:auto;container-type:normal;aspect-ratio:2048 / 1152;overflow:hidden}
  .noct-concert-img img{left:0;top:-10.94%;width:100%;transform:none}
  .noct-concert-night{opacity:1!important}
  }
@media(max-width:640px){
  .noct-grid.two,.noct-atmosphere{grid-template-columns:1fr}
  .noct-atmosphere .landscape-item{padding-top:0}
  .noct-grid{gap:34px}
  .noct-statement{min-height:65svh}
  .noct-statement p{font-size:11.6vw}
  .noct-copy{margin-bottom:56px}
}
@media(min-width:641px) and (max-width:900px){
  html[lang="es"] .project-intro .intro-head h2{hyphens:auto;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
  .noct-concert{height:auto}
  .noct-concert-stage{position:relative;top:auto;height:auto;overflow:visible}
  .noct-concert-img{position:relative;inset:auto;container-type:normal;aspect-ratio:2048 / 1152;overflow:hidden}
  .noct-concert-img img{left:0;top:-10.94%;width:100%;transform:none}
  .noct-concert-night{opacity:1!important}
  }