/* Type: Montserrat (free, geometric — closest legal match to Gotham).
   'Gotham' is kept first in the font stack only so that if a licensed
   Gotham web-font is ever installed it takes over automatically. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#ffffff;
  --ink:#000000;
  --muted:#5a5a5a;
  --line:#dcdcdc;
  /* consistent spacing rhythm across the whole site */
  --pad-x:clamp(24px,5vw,64px);
  --pad-top:clamp(22px,3.2vw,40px);
  --pad-bottom:56px;
  --gap:clamp(26px,3.6vw,46px);   /* header -> body */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Gotham','Montserrat','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- shared page frame ---------- */
.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:var(--pad-top) var(--pad-x) var(--pad-bottom);
  position:relative;
}
.brand{
  font-size:clamp(22px,2.4vw,30px);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:500;            /* Gotham Regular (Montserrat 500 approximates its weight) */
  color:var(--ink);
  white-space:nowrap;
}

/* ---------- HOME header ---------- */
.home-head{margin-bottom:clamp(26px,4vw,48px)}
.home-nav{
  margin-top:20px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(16px,2.4vw,34px);
}
.home-nav a{
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:300;            /* Gotham Light */
  color:var(--ink);
  opacity:.75;
  transition:opacity .25s ease;
}
.home-nav a:hover{opacity:1}

/* ---------- HOME collage (desktop) ---------- */
.stage{
  position:relative;
  width:100%;
  max-width:1520px;
  margin:0 auto;
  aspect-ratio:1280/720;
}
.stage figure{position:absolute;margin:0}
.stage img{
  width:100%;height:auto;
}

/* positions matched to the layout mockup — spread wider */
.s-bedroom {left:15%; top:2%;  width:16%;}
.s-beams   {left:45%; top:4%;  width:29%;}
.s-doorway {left:83%; top:8%;  width:15%;}
.s-land    {left:0%;  top:55%; width:28%;}
.s-back    {left:30%; top:60%; width:18%;}
.s-curve   {left:80%; top:64%; width:23%;}

/* ---------- HOME collage (mobile) ---------- */
.stage-mobile{display:none}

/* ---------- inner page header ---------- */
.inner-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.menu-btn{
  background:none;border:0;cursor:pointer;padding:6px;
  display:flex;flex-direction:column;gap:5px;margin-top:4px;
}
.menu-btn span{display:block;width:26px;height:1.5px;background:var(--ink)}
.section-label{
  margin-top:14px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- overlay menu ---------- */
.overlay{
  position:fixed;inset:0;
  background:#fff;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:26px;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  z-index:60;
}
.overlay.open{opacity:1;pointer-events:auto}
.overlay a{
  font-size:clamp(18px,3vw,26px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:300;
}
.overlay a:hover{color:var(--muted)}
.overlay .close{
  position:absolute;top:34px;right:44px;
  font-size:30px;font-weight:300;line-height:1;cursor:pointer;color:var(--ink);
}

/* ---------- interior gallery ---------- */
.gallery{
  max-width:1180px;margin:var(--gap) auto 0;
  columns:3;
  column-gap:clamp(14px,2vw,26px);
}
.gallery .item{
  break-inside:avoid;
  margin:0 0 clamp(14px,2vw,26px);
}
.gallery img{width:100%;height:auto;cursor:zoom-in;transition:opacity .5s ease}
.gallery video{width:100%;height:auto;display:block}

/* ---------- in-progress page ---------- */
.progress{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:26px;padding:var(--gap) 0;
}
.progress p{font-size:clamp(18px,2.4vw,24px);font-weight:300;letter-spacing:.02em;margin:0}
.progress img{width:min(430px,80vw);height:auto}

/* ---------- about ---------- */
.about-body{
  max-width:640px;margin:auto;   /* vertically + horizontally centred */
  font-size:15px;color:#2b2b2b;
}
.about-body p{margin:0 0 20px}

/* ---------- contact ---------- */
.contact-body{
  max-width:640px;margin:auto auto auto 0;   /* vertically centred, aligned left */
  font-size:15px;color:#2b2b2b;
}
.contact-body a{border-bottom:1px solid var(--line)}
.contact-body div{margin-bottom:8px}

/* ---------- instagram ---------- */
.ig{
  position:absolute;right:var(--pad-x);bottom:22px;
  color:var(--muted);transition:color .25s ease;
}
.ig:hover{color:var(--ink)}
.ig svg{width:20px;height:20px;display:block}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(255,255,255,.98);
  display:none;align-items:center;justify-content:center;padding:4vw;
  cursor:zoom-out;z-index:70;
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:92vh;width:auto;height:auto}

/* ---------- interior editorial layout (matches INTERIOR mockup) ---------- */
.int-stage{
  position:relative;width:100%;max-width:1620px;
  margin:var(--gap) auto 0;
  aspect-ratio:1000/3158;
}
.int-stage figure{position:absolute;margin:0}
.int-stage .imgbox{width:100%;overflow:hidden}
.int-stage .imgbox img,
.int-stage .imgbox video,
.int-stage .imgbox iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.int-stage .imgbox img{cursor:zoom-in}
.int-stage figcaption{
  margin-top:7px;font-size:10.5px;letter-spacing:.05em;color:var(--muted);
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .gallery{columns:2}
}
@media(max-width:820px){
  .int-stage{
    aspect-ratio:auto;max-width:460px;
    display:flex;flex-direction:column;gap:26px;
  }
  .int-stage figure{position:static !important;left:auto !important;top:auto !important;width:100% !important}
  .int-stage .imgbox{aspect-ratio:auto !important}
  .int-stage .imgbox img,.int-stage .imgbox video{height:auto}
}
@media(max-width:820px){
  .stage{display:none}
  .stage-mobile{
    display:flex;flex-direction:column;gap:22px;
    max-width:440px;margin:0 auto;
  }
  .stage-mobile img{width:100%;height:auto}
  .home-nav{gap:14px}
}
@media(max-width:560px){
  .gallery{columns:1;max-width:460px}
}

/* ==========================================================================
   HOME — header (name top-left + centred nav) like the other pages,
   then the photo collage placed by exact %s measured from the mockup.
   ========================================================================== */
.home-page{padding:var(--pad-top) clamp(16px,2vw,40px) var(--pad-bottom)}
.home-head{margin-bottom:0}
.home-head .brand{display:block}
.home-nav{
  margin-top:16px;display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(16px,2.4vw,34px);
}
.home-nav a{
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:300;color:var(--ink);opacity:.8;transition:opacity .25s ease;
}
.home-nav a:hover{opacity:1}

.home-collage{
  position:relative;width:100%;max-width:1720px;margin:var(--gap) auto 0;
  aspect-ratio:1000/382;
}
.home-collage figure{position:absolute;margin:0}
.home-collage .imgbox{width:100%;overflow:hidden}
.home-collage .imgbox img{width:100%;height:100%;object-fit:cover;display:block}

/* mobile home */
.home-m{display:none}
@media(max-width:820px){
  .home-head,.home-collage{display:none}
  .home-m{
    display:block;max-width:460px;margin:0 auto;padding-top:6px;
  }
  .home-m .h-name{
    font-size:clamp(22px,7vw,30px);font-weight:500;text-transform:uppercase;
    letter-spacing:.03em;color:var(--ink);text-align:center;margin:6px 0 14px;
  }
  .home-m .h-nav{
    display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;margin-bottom:26px;
  }
  .home-m .h-nav a{
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:300;color:var(--ink);opacity:.8;
  }
  .home-m figure{margin:0 0 22px}
  .home-m img{width:100%;height:auto;display:block}
}