/* ============================================================
   NOUB — shared stylesheet for every page.
   Colours, type sizes and spacing live in :root below, so one
   change here updates the whole site. Text is edited in the
   .html files, never here.
   ============================================================ */

:root{
  /* NOUB palette: warm white and navy. The wood in the photos is the third colour. */
  --bone:#DCD5CB;       /* warm white: page ground */
  --ink:#131C2B;        /* navy: type, lines, buttons */

  /* derived from the palette */
  --ink-soft:#4A5260;   /* captions, secondary text (readable on warm white) */
  --rule:#BDB5A9;       /* hairlines */
  --band:#D0C8BC;       /* slightly deeper warm white for section bands */
  --wash:#CFC7BB;       /* behind images while they load */

  --gut:clamp(20px,5vw,64px);   /* page side margin */
  --max:1180px;                 /* max content width */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{display:block;width:100%;height:auto;background:var(--wash);}
a{color:inherit;}
::selection{background:var(--ink);color:var(--bone);}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}

/* ---------- navigation ---------- */

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:24px 0 16px;
  border-bottom:1px solid var(--ink);
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand svg{width:26px;height:26px;flex:none;}

.brand-word{
  font-weight:600;
  font-size:17px;
  letter-spacing:0.32em;
  margin-right:-0.32em;     /* cancels trailing letter-space */
}

.nav-links{display:flex;gap:24px;}

.nav-links a{
  color:var(--ink-soft);
  text-decoration:none;
  font-size:14px;
}

.nav-links a:hover,
.nav-links a[aria-current="page"]{color:var(--ink);}

/* ---------- shared type ---------- */

.statement{
  font-family:"Newsreader",Georgia,serif;
  font-weight:300;
  font-size:clamp(28px,4.4vw,50px);
  line-height:1.2;
  letter-spacing:-0.012em;
  margin:clamp(52px,9vw,112px) 0 clamp(44px,7vw,84px);
  max-width:18em;
}

.section-label{
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 20px;
  padding-bottom:9px;
  border-bottom:1px solid var(--rule);
}

.about > .section-label,
.enquire > .section-label{align-self:start;}

.prose p{margin:0 0 18px;max-width:34em;}
.prose p:last-child{margin-bottom:0;}

.lede{
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(20px,2.2vw,24px);
  line-height:1.4;
  font-weight:300;
}

/* ---------- home: work ---------- */

.work{margin-bottom:clamp(64px,9vw,120px);}

.feature{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:var(--gut);
  align-items:end;
  text-decoration:none;
}

.feature img{aspect-ratio:3/4;object-fit:cover;}

.feature-text{padding-bottom:6px;}

.feature-number{
  font-family:"Newsreader",Georgia,serif;
  font-weight:300;
  font-size:clamp(72px,11vw,148px);
  line-height:0.9;
  letter-spacing:-0.03em;
  margin:0 0 14px;
}

.feature-kind{
  margin:0 0 18px;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.feature-text p{max-width:26em;}

.more{
  display:inline-block;
  margin-top:10px;
  padding-bottom:2px;
  border-bottom:1px solid var(--ink);
  font-size:14.5px;
}

.feature:hover .more{color:var(--ink-soft);border-color:var(--ink-soft);}

.feature.secondary{
  margin-top:clamp(56px,8vw,104px);
  padding-top:clamp(28px,4vw,44px);
  border-top:1px solid var(--rule);
}
.feature.secondary .feature-number{font-size:clamp(56px,7vw,96px);}

.project-word{font-size:clamp(64px,9vw,124px);}

.plates.three{grid-template-columns:repeat(3,1fr);}

.in-dev{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:var(--gut);
  margin-top:clamp(48px,7vw,88px);
  padding-top:18px;
  border-top:1px solid var(--rule);
}

.in-dev h3{
  font-family:"Newsreader",Georgia,serif;
  font-weight:400;
  font-size:clamp(24px,2.6vw,30px);
  margin:0;
}

.tag{
  display:inline-block;
  margin-top:8px;
  font-size:12.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.in-dev p{margin:0;max-width:30em;}

/* ---------- home: about + contact ---------- */

.about{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:var(--gut);
  margin-bottom:clamp(64px,9vw,120px);
}

.contact-lines{margin:0;padding:0;list-style:none;}
.contact-lines li{padding:12px 0;border-bottom:1px solid var(--rule);}
.contact-lines li:first-child{padding-top:0;}
.contact-lines a{text-decoration:none;}
.contact-lines a:hover{color:var(--ink-soft);}
.contact-lines .k{display:block;font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}

/* ---------- project page ---------- */

.project-head{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:var(--gut);
  align-items:end;
  margin:clamp(44px,7vw,88px) 0 clamp(32px,5vw,56px);
}

.project-number{
  font-family:"Newsreader",Georgia,serif;
  font-weight:300;
  font-size:clamp(84px,14vw,180px);
  line-height:0.85;
  letter-spacing:-0.035em;
  margin:0;
}

.project-kind{
  margin:12px 0 0;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.project-stand{
  font-family:"Newsreader",Georgia,serif;
  font-weight:300;
  font-size:clamp(21px,2.4vw,27px);
  line-height:1.38;
  margin:0;
  max-width:22em;
}

.hero{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
.hero img{aspect-ratio:4/5;object-fit:cover;max-height:88vh;}

.detail-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:var(--gut);
  padding:clamp(48px,7vw,88px) 0 0;
}

.spec{margin:0;font-size:14.5px;}
.spec div{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);}
.spec div:first-child{border-top:1px solid var(--ink);}
.spec dt{color:var(--ink-soft);}
.spec dd{margin:0;}

.plates{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gut);
  padding:clamp(48px,7vw,88px) 0 0;
}

.plate{margin:0;}
.plate img{aspect-ratio:3/4;object-fit:cover;}
.plate.wide{grid-column:1 / -1;}
.plate.wide img{aspect-ratio:auto;}

.plate figcaption{
  margin-top:10px;
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.45;
  max-width:36em;
}

/* stone band: versions */

.band{
  background:var(--band);
  margin-top:clamp(64px,9vw,120px);
  padding:clamp(48px,7vw,88px) 0;
}

.band .section-label{border-color:rgba(19,28,43,0.25);}

.versions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gut);
}

.version h3{
  font-family:"Newsreader",Georgia,serif;
  font-weight:400;
  font-size:24px;
  margin:14px 0 4px;
}

.version p{margin:0;font-size:14.5px;max-width:22em;}

.version .swatch{aspect-ratio:3/4;}
.version img.swatch{object-fit:cover;}
.swatch.empty{
  background:rgba(19,28,43,0.08);
  display:flex;
  align-items:flex-end;
  padding:14px;
  font-size:13px;
  color:var(--ink);
}

/* process */

.process{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gut);
}

.process .step-n{
  font-family:"Newsreader",Georgia,serif;
  font-size:15px;
  color:var(--ink-soft);
  margin:12px 0 2px;
}

.process h3{font-size:16px;font-weight:600;margin:0 0 6px;}
.process p{margin:0;font-size:14.5px;color:var(--ink-soft);}
.process img{aspect-ratio:3/4;object-fit:cover;}
.process img.render{object-fit:contain;background:#5E5E5E;}

.enquire{
  margin-top:clamp(64px,9vw,120px);
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:var(--gut);
}

.button{
  display:inline-block;
  margin-top:18px;
  padding:13px 22px;
  background:var(--ink);
  color:var(--bone);
  text-decoration:none;
  font-size:14.5px;
  letter-spacing:0.02em;
}

.button:hover{background:#26324A;}

.next{
  margin-top:clamp(64px,9vw,112px);
  padding-top:14px;
  border-top:1px solid var(--ink);
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.next a{
  font-family:"Newsreader",Georgia,serif;
  font-size:20px;
  text-decoration:none;
}

.next a:hover{color:var(--ink-soft);}

/* ---------- footer ---------- */

.footer{
  margin-top:clamp(64px,9vw,120px);
  padding:22px 0 56px;
  border-top:1px solid var(--ink);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 36px;
  color:var(--ink-soft);
  font-size:13.5px;
}

.footer a{text-decoration:none;}
.footer a:hover{color:var(--ink);}

/* ---------- small screens ---------- */

@media (max-width:760px){
  .feature,.in-dev,.about,.project-head,.detail-grid,.enquire{grid-template-columns:1fr;gap:26px;}
  .plates,.plates.three{grid-template-columns:1fr;gap:34px;}
  .versions,.process{grid-template-columns:1fr;gap:40px;}
  .hero{padding:0;}
  .hero img{max-height:none;}
  .nav-links{gap:18px;}
}

/* ============================================================
   SPREAD LAYOUT — project pages built like the portfolio spreads:
   a development column of drawings on the left, the story on the
   right, then a band of photographs.
   ============================================================ */

.spread{
  display:grid;
  grid-template-columns:200px 1fr;
  grid-template-areas:"dev head" "dev body";
  grid-template-rows:auto 1fr;
  gap:0 clamp(28px,4vw,56px);
  margin-top:clamp(36px,6vw,72px);
}
.spread-head{grid-area:head;}
.spread-body{grid-area:body;}

.dev{
  grid-area:dev;
  padding-right:clamp(20px,3vw,40px);
  border-right:1px solid var(--ink);
}

.dev .section-label{border:0;padding:0;margin-bottom:22px;}

.dev-item{margin:0 0 34px;}
.dev-item:last-child{margin-bottom:0;}
.dev-item img{background:none;max-width:170px;}
.dev-item figcaption{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--ink-soft);}
.dev-item .n{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:17px;
  color:var(--ink);margin-right:6px;
}
.dev-item .t{
  font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);
}
.dev-item .d{display:block;margin-top:3px;}

.spread-head .project-number{margin:0 0 clamp(20px,3vw,32px);}

.spread-head .project-stand{max-width:30em;margin-bottom:clamp(28px,4vw,40px);}

.cols{column-count:2;column-gap:clamp(24px,3vw,40px);max-width:56em;}
.cols p{margin:0 0 16px;break-inside:avoid-column;font-size:15px;}

.pair{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.4vw,28px);max-width:56em;
  margin-top:clamp(32px,5vw,52px);
}
.pair figure{margin:0;}
.pair img{aspect-ratio:4/3;object-fit:cover;}
.pair img.contain{object-fit:contain;background:#fff;}
.pair img.dark{object-fit:contain;background:#2B2B2B;}
.pair figcaption,.gallery figcaption{margin-top:8px;font-size:12.5px;color:var(--ink-soft);}
.pair figcaption .n,.gallery figcaption .n{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:15px;color:var(--ink);margin-right:5px;}

.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:56em;margin:clamp(32px,5vw,52px) 0 0;padding-top:12px;
  border-top:1px solid var(--ink);font-size:13.5px;
}
.facts dt{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px;}
.facts dd{margin:0;}

/* photo band — the right-hand page of the spread */
.gallery{
  background:var(--band);
  margin-top:clamp(56px,8vw,104px);
  padding:clamp(40px,6vw,72px) 0;
}
.gallery .section-label{border-color:rgba(19,28,43,0.25);}
.gallery-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);}
.gallery figure{margin:0;}
.gallery-row img{aspect-ratio:1/1;object-fit:cover;}
.gallery-hero{margin-top:clamp(18px,2.6vw,32px) !important;}
.gallery-hero img{aspect-ratio:5/4;object-fit:cover;object-position:center 48%;}
.gallery-hero.tall{max-width:760px;margin-left:auto;margin-right:auto;}
.gallery-hero.tall img{aspect-ratio:auto;}

.versions-plain{margin-top:clamp(56px,8vw,104px);}

@media (max-width:860px){
  .spread{grid-template-columns:1fr;grid-template-areas:"head" "dev" "body";}
  .dev{
    border-right:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
    padding:22px 0 30px;margin-bottom:32px;
  }
  .dev-list{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;}
  .dev-item{margin:0;}
  .cols{column-count:1;}
  .facts{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .pair{grid-template-columns:1fr;}
  .gallery-row{grid-template-columns:1fr;}
  .gallery-row img{aspect-ratio:4/3;}
}