:root {
  --bg:#f3f2ed;
  --ink:#0a0a0a;
  --line:#bbb7ae;
  --muted:#77736c;
  --pad:clamp(20px,3.2vw,52px);
  --gap:clamp(16px,1.65vw,28px);
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}

.site-header{
  position:fixed;z-index:50;top:0;left:0;right:0;height:70px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--pad);background:rgba(243,242,237,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.15);
}
.brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;letter-spacing:-.02em}
.brand-mark{width:26px;height:26px;display:block;flex:0 0 26px}
.main-nav{display:flex;gap:28px;text-transform:uppercase;font-size:10px;letter-spacing:.1em}
.main-nav a:hover{opacity:.5}
.project-crumb{justify-self:end;font-size:10px;letter-spacing:.11em;text-transform:uppercase;opacity:0;transform:translateY(-4px);transition:.35s ease}
body.scrolled .project-crumb{opacity:1;transform:none}
main{padding-top:70px}

/* HERO — same project-page system as Street Bangkok / IGNA */
.project-hero{min-height:calc(100vh - 70px);border-bottom:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:0 var(--pad)}
.hero-copy{grid-column:1 / span 5;padding:clamp(34px,5vw,72px) 0 42px;display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100vh - 70px)}
.hero-image{grid-column:6 / -1;min-height:calc(100vh - 70px);overflow:hidden;border-left:1px solid var(--line);background:#090807}
.hero-image img{height:100%;object-fit:cover;object-position:50% 50%;transition:transform 1.4s cubic-bezier(.2,.65,.25,1);transform:scale(1.015)}
.loaded .hero-image img{transform:scale(1)}
.kicker{font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.hero-title{margin:0;font-size:clamp(58px,6.6vw,112px);line-height:.82;letter-spacing:-.067em;font-weight:650;text-transform:uppercase;max-width:7.35ch;text-indent:-.045em}
.hero-meta{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:15px;gap:14px}
.meta-cell span{display:block}
.meta-label{color:var(--muted);font-size:8px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.meta-value{font-size:11px;letter-spacing:.07em;text-transform:uppercase;line-height:1.45}

/* INTRO */
.project-intro{background:#050505;color:#f3f0e8;padding:48px var(--pad) 44px;min-height:78vh;display:flex;align-items:center}
.intro-grid{width:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:0;align-items:start}
.intro-index{grid-column:1 / span 2;grid-row:1;color:#8a857d;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:62px}
.intro-head{grid-column:1 / span 5;grid-row:2;align-self:center}
.intro-head h2{margin:0;font-size:clamp(58px,5.7vw,122px);line-height:.88;letter-spacing:-.055em;font-weight:650;text-transform:uppercase}
.intro-copy{grid-column:8 / -1;grid-row:2;align-self:center;font-family:var(--serif);font-size:clamp(19px,1.45vw,27px);line-height:1.13;max-width:820px}
.intro-copy p{margin:0 0 .9em}.intro-copy p:last-child{margin-bottom:0}
.intro-note{grid-column:8 / -1;grid-row:3;margin-top:38px;padding-top:18px;border-top:1px solid rgba(243,240,232,.18);font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:#8a857d}

/* EDITORIAL PROJECT FLOW */
.project-flow{padding:72px var(--pad) 82px;border-bottom:1px solid var(--line)}
.flow-wide{width:100%;margin:0 auto}.flow-wide .media-frame{width:100%;aspect-ratio:16/10}.flow-wide .media-frame img{object-position:center}
.media-frame{overflow:hidden;background:#ddd}.media-frame img{height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.65,.25,1)}.media-frame:hover img{transform:scale(1.012)}
.media-frame.no-crop{aspect-ratio:auto!important;overflow:visible;background:transparent}.media-frame.no-crop img{display:block;width:100%;height:auto;object-fit:contain}.media-frame.no-crop:hover img{transform:none}
.flow-phrase{margin:54px auto 58px;max-width:1200px;text-align:center}.flow-phrase p{margin:0;font-family:var(--serif);font-size:clamp(30px,3.1vw,52px);line-height:1.08;letter-spacing:-.025em}
.flow-pair{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap);align-items:start}.flow-pair .portrait-item{max-width:570px}.flow-pair .landscape-item{padding-top:10vw}
.flow-architecture{margin-top:var(--gap)}.flow-architecture .media-frame{aspect-ratio:16/9}
.flow-materials{display:grid;grid-template-columns:7fr 5fr;gap:var(--gap);align-items:end;margin-top:var(--gap)}
.flow-materials .material-copy{font-family:var(--serif);font-size:clamp(21px,1.8vw,31px);line-height:1.16;max-width:21ch;margin:0 0 2vw auto}
.flow-materials .material-copy p{margin:0}
.flow-caption{margin-top:9px;font-size:8px;line-height:1.4;text-transform:uppercase;letter-spacing:.12em;color:#77726b}

/* DARK IMAGE SEQUENCE */
.flow-night{background:#080808;color:#f0eee9;padding:78px var(--pad) 86px;border-bottom:1px solid #252525}
.flow-night .flow-phrase{margin-top:0}.flow-night .flow-phrase p{color:#f0eee9}
.night-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.night-back{grid-column:1 / span 7}.night-detail{grid-column:8 / -1;margin-top:12vw}
.night-detail .media-frame{aspect-ratio:16/10}.night-detail .media-frame img{object-fit:cover}
.night-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:#d9d5ce}

/* CREDITS */
.credits{padding:58px var(--pad) 68px;background:var(--bg)}
.credits-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:11px;border-top:1px solid var(--line);padding-top:18px}
.credits-title{grid-column:1 / span 3;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.credit-row{grid-column:5 / -1;display:grid;grid-template-columns:3fr 5fr;gap:var(--gap);padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.1);font-size:10px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase}
.credit-row .label{color:var(--muted)}

/* FOOTER */
#eb-footer.eb-footer{width:100%;padding:30px var(--pad) 14px;background:var(--bg);font-family:var(--sans);text-transform:uppercase;letter-spacing:.105em;border-top:1px solid var(--line)}
#eb-footer .eb-footer-top{width:min(100%,1380px);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(70px,8vw,160px);align-items:start}
#eb-footer .eb-footer-col{display:flex;flex-direction:column;align-items:center;text-align:center}
#eb-footer .eb-footer-label{margin:0 0 17px;color:#8f8a83;font-size:9px;line-height:1;letter-spacing:.16em}
#eb-footer .eb-footer-col a,#eb-footer .eb-footer-col span{display:block;margin:0 0 7px;font-size:11px;line-height:1.42;font-weight:600;letter-spacing:.105em;text-align:center}
#eb-footer .eb-footer-col a{width:max-content;max-width:100%;border-bottom:1px solid transparent}
#eb-footer .eb-footer-col a:hover{border-bottom-color:currentColor;opacity:.58}
#eb-footer .eb-footer-bottom{margin:29px auto 0;text-align:center;color:#85817a}
#eb-footer .eb-footer-copy,#eb-footer .eb-footer-rights{display:block;margin:0;color:#85817a;font-size:10px;line-height:1.55;font-weight:400;letter-spacing:.12em}
#eb-footer .eb-footer-legal{display:flex;justify-content:center;gap:31px;margin:22px 0 0}
#eb-footer .eb-footer-legal a{color:#77736d;font-size:10px;letter-spacing:.12em;border-bottom:1px solid transparent}
#eb-footer .eb-footer-legal a:hover{border-bottom-color:currentColor}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.on{opacity:1;transform:none}

@media(max-width:1200px){.intro-head h2{font-size:clamp(52px,5.4vw,104px)}.intro-copy{font-size:clamp(18px,1.55vw,25px)}}
@media(max-width:900px){
  .site-header{grid-template-columns:1fr auto}.main-nav{display:none}.project-crumb{display:none}
  .project-hero{display:block;padding:0}.hero-copy{min-height:auto;padding:42px var(--pad)}.hero-title{font-size:clamp(58px,15vw,96px);max-width:8ch;margin:90px 0 70px}.hero-image{min-height:72vh;border-left:0;border-top:1px solid var(--line)}
  .project-intro{min-height:auto;padding-top:56px;padding-bottom:56px}.intro-grid{display:block}.intro-index{margin-bottom:32px}.intro-head{margin-bottom:28px}.intro-head h2{font-size:clamp(52px,16vw,92px)}.intro-copy{max-width:none;font-size:clamp(22px,6vw,30px);line-height:1.15}.intro-note{margin-top:22px}
  .section-label{display:block}.section-label .num{margin-bottom:16px}
  .flow-pair{grid-template-columns:1fr 1fr}.flow-materials{grid-template-columns:1fr 1fr}
  .night-back{grid-column:1 / span 7}.night-detail{grid-column:8 / -1}
  .drawing-exploded{grid-column:1 / span 7}.drawing-elevations{grid-column:8 / -1}
  #eb-footer .eb-footer-top{column-gap:30px}
}
@media(max-width:640px){
  .project-section,.project-intro{padding-top:70px;padding-bottom:74px}.hero-meta{grid-template-columns:1fr}.section-label h2{font-size:56px}
  .project-flow,.flow-night{padding-top:54px;padding-bottom:60px}.flow-pair,.flow-materials{grid-template-columns:1fr}.flow-pair .landscape-item{padding-top:0}.flow-materials .material-copy{max-width:none;margin:20px 0 0}
  .night-grid,.drawings-grid{display:block}.night-detail,.night-copy,.drawing-elevations,.drawing-config{margin-top:34px}
  .flow-phrase{margin:38px 0 42px}.flow-phrase p{font-size:34px}
  .credit-row{grid-column:1 / -1;grid-template-columns:1fr;gap:4px}.credits-title{grid-column:1 / -1;margin-bottom:20px}
  #eb-footer .eb-footer-top{grid-template-columns:1fr;row-gap:30px}#eb-footer .eb-footer-legal{gap:20px;flex-wrap:wrap}
}

/* BACCARAT / REVISION 03
   The project-page language remains unchanged. These rules only refine
   the hero, concept band and technical drawings requested for Baccarat. */
:root{--baccarat-red:#c10b25}

/* Hero: keep the full composition visible and keep the title entirely on the copy field */
@media(min-width:901px){
  .project-hero{overflow:hidden}
  .hero-copy{position:relative;z-index:2;min-width:0}
  .hero-title{
    font-size:clamp(50px,4.65vw,88px);
    line-height:.84;
    letter-spacing:-.062em;
    max-width:none;
    white-space:nowrap;
    position:relative;
    z-index:2;
  }
  .hero-image{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(24px,2.6vw,46px) clamp(18px,2.2vw,38px);
    background:#070605;
  }
  .hero-image img{
    width:100%;
    height:auto;
    max-height:calc(100vh - 118px);
    object-fit:contain;
    object-position:center;
    transform:none!important;
  }
}

/* Concept: title / close-up / text, all inside the existing black band */
.project-intro{min-height:76vh}
.intro-head{grid-column:1 / span 4}
.intro-media{
  grid-column:5 / span 3;
  grid-row:2 / span 2;
  align-self:center;
  justify-self:center;
  width:100%;
  max-width:390px;
}
.intro-media-frame{
  width:100%;
  overflow:hidden;
  background:#11090a;
}
.intro-media-frame img{
  display:block;
  width:100%;
  height:auto;
  max-height:58vh;
  object-fit:contain;
}
.intro-media-caption{
  margin-top:10px;
  color:#8a857d;
  font-size:8px;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.intro-copy{grid-column:9 / -1}
.intro-note{grid-column:9 / -1}

/* responsive refinements for the revised sections */
@media(max-width:900px){
  .hero-title{white-space:normal}
  .hero-image{
    min-height:0;
    height:auto;
    padding:28px var(--pad) 34px;
    background:#070605;
  }
  .hero-image img{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    transform:none!important;
  }
  .intro-media{max-width:360px;margin:30px 0 34px}
  .intro-media-frame img{max-height:none}
}
@media(max-width:640px){
  .hero-title{font-size:clamp(52px,14.5vw,82px);line-height:.86}
  .hero-image{padding:20px 0 26px}
  .project-intro .intro-media{max-width:72vw}
}


/* Alignment with the existing project pages; Baccarat content is retained. */
.brand img{width:26px;height:26px;object-fit:contain;flex:0 0 26px}
.hero-copy{container-type:inline-size;min-width:0}
.hero-title{font-size:clamp(24px,10.5cqw,88px);max-width:100%;white-space:normal;line-height:.92;overflow-wrap:normal;text-indent:0}
.hero-image{min-width:0;display:flex;align-items:center;justify-content:center}
.hero-image img{object-fit:contain;transform:none!important}
.intro-grid > *{min-width:0}
.intro-head h2{font-size:clamp(42px,5.4vw,104px)}
.intro-media{margin:0;width:100%;max-width:390px}
.intro-copy{font-family:var(--serif);line-height:1.2}
.flow-architecture{margin-top:clamp(48px,6vw,96px)}
.flow-materials{margin-top:clamp(48px,6vw,96px)}
.project-drawings{padding:82px var(--pad);border-bottom:1px solid var(--line)}
.project-drawings h2{margin:0;font-size:clamp(32px,4vw,64px);font-weight:600;line-height:1;letter-spacing:-.045em}
.drawings-composition:empty{display:none}
@media(min-width:901px){
 .hero-image{margin-right:calc(-1 * var(--pad));border-left:0}
 .project-crumb{max-width:22ch;text-align:right}
}
@media(max-width:1100px) and (min-width:901px){
 .project-crumb{display:none}
 .site-header{grid-template-columns:1fr auto}
 .intro-head{grid-column:1 / span 4}
 .intro-media{grid-column:5 / span 3}
 .intro-copy,.intro-note{grid-column:8 / -1}
}
@media(max-width:900px){
 .site-header{height:106px;grid-template-columns:1fr;grid-template-rows:54px 40px;align-content:start}
 .main-nav{display:flex;gap:clamp(16px,4vw,28px);align-items:center}
 main{padding-top:106px}
 .hero-copy{padding:38px var(--pad);gap:32px}
 .hero-title{font-size:clamp(24px,10.5cqw,82px);max-width:100%;margin:24px 0}
 .hero-image{min-height:0;padding:24px var(--pad);border:0}
 .hero-image img{max-height:none;width:100%;height:auto}
 .intro-media{margin:32px 0;max-width:360px}
 .intro-copy{font-size:clamp(20px,3vw,27px)}
 .flow-materials .material-copy{margin-top:24px}
}
@media(max-width:640px){
 .flow-pair{gap:34px}
 .intro-head h2{font-size:clamp(42px,12vw,72px)}
 .project-intro .intro-media{max-width:78vw}
 .project-drawings{padding:60px var(--pad)}
}

/* Baccarat: full-frame hero and compact, edge-to-edge concept detail. */
.hero-image{position:relative;padding:0;background:#000}
.hero-image img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center}
.project-intro{min-height:0;padding:0 var(--pad)}
.intro-grid{align-items:center;min-height:clamp(460px,58vh,680px)}
.intro-head,.intro-copy,.intro-media{grid-row:1}
.intro-head,.intro-copy{padding:48px 0}
.intro-media{grid-column:5 / span 4;align-self:stretch;max-width:none;margin:0}
.intro-media-frame{height:100%;position:relative;background:#050505}
.intro-media-frame img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}
.intro-copy{grid-column:9 / -1}
@media(max-width:900px){
 .hero-image{height:70vh;min-height:460px;padding:0}
 .hero-image img{height:100%;object-fit:contain}
 .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap);min-height:0}
 .intro-head{grid-column:1;grid-row:1;margin:0;padding:40px 0 20px}
 .intro-head h2{font-size:clamp(30px,5.5vw,50px)}
 .intro-copy{grid-column:1;grid-row:2;padding:0 0 40px;font-size:clamp(16px,2.4vw,22px)}
 .project-intro .intro-media{grid-column:2;grid-row:1 / span 2;max-width:none;margin:0}
}

/* Keep the remaining detail on its existing right-hand grid columns. */
.flow-single .landscape-item{grid-column:2;padding-top:0}
@media(max-width:640px){.flow-single .landscape-item{grid-column:1}}

.hero-image img{transform:scale(1.15)!important;transform-origin:center}