:root{
  /* palette — six values, per guidelines */
  --ink:#151515;
  --muted:#3E3E3E;
  --surface:#F0F0F0;
  --rule:#EAEAEA;
  --white:#FFFFFF;
  --accent:#EC0037;

  /* core spacing values */
  --s-4:4px; --s-10:10px; --s-15:15px; --s-20:20px;
  --s-50:50px; --s-72:72px; --s-120:120px;

  /* container */
  --shell:1800px;      /* primary container — shared by header and content */
  --gutter:60px;
}
/* Scoped to .mp so the parent theme's header and footer are untouched
   on these pages (the original standalone build styled body/img globally). */
.mp *{box-sizing:border-box}
.mp{
  background:var(--white);color:var(--ink);
  font-family:Inter,system-ui,sans-serif;
  font-size:16px;font-weight:400;line-height:1.59;
  -webkit-font-smoothing:antialiased;
}
.mp img{display:block;width:100%;height:auto}
.shell{max-width:none;margin:0 auto;padding-left:max(var(--gutter),3.4vw);padding-right:max(var(--gutter),3.4vw)}

/* ---- type roles ---- */
/* ---------------------------------------------------------------
   TYPE ROLES — each class defines its own treatment outright.
   No contextual overrides: a class means the same thing anywhere.
   ---------------------------------------------------------------
   Display L   project title            64 / 50 / 26
   Tier A      standalone treatment     26 / 24 / 20
   Tier B      body copy                16 at every breakpoint
   --------------------------------------------------------------- */
.t-display-l{font-size:64px;font-weight:300;line-height:1.1;letter-spacing:-2px;margin:0}

/* Tier A — subtitle, metadata field names, captions, credit, footer links */
.t-standalone,.header__meta,figcaption,.pfoot__credit,.link{
  font-size:26px;font-weight:300;line-height:1.3;letter-spacing:-1px;
  text-transform:none;color:var(--ink);margin:0;
}

/* Tier B — opening statement, narrative copy, closing statement, metadata values.
   Matches the site's global "text" role exactly, and does not scale. */
.t-body{
  font-family:Inter,sans-serif;
  font-size:16px;font-weight:400;line-height:1.59em;
  letter-spacing:normal;font-style:normal;margin:0;
}

/* ---- 01 header ---- */
.header{padding-top:var(--s-120);padding-bottom:var(--s-50)}
.header__meta{margin-top:var(--s-10)}   /* heading → supporting text */


/* ---- 02 hero ---- */
.hero{margin-bottom:var(--s-50)}
.hero img{aspect-ratio:8/5;object-fit:cover}

/* ---- 03 project information ---- */
.info{padding-bottom:var(--s-50);border-bottom:1px solid var(--rule)}
.info__grid{display:block}
.info__cell{margin-bottom:var(--s-20)}
.info__cell:last-child{margin-bottom:0}

.info__v{margin-top:var(--s-4)}          /* label → value */

/* ---- 04 lead ---- */
.lead{padding-top:var(--s-50);padding-bottom:var(--s-50)}

/* ---- 05/07 narrative spreads ---- */
.spread{display:block;padding-bottom:var(--s-50)}
/* Narrative body paragraphs — verified against the site's global "text" role:
   Inter / 16px / 400 / 1.59em / normal tracking. Selector specificity (0,1,1)
   beats the .t-body rules (0,1,0), so this holds at every breakpoint. */
.spread__text p{max-width:none}
.spread__text p + p{margin-top:var(--s-20)}   /* paragraph → paragraph */
.spread figure{margin-top:var(--s-50);max-width:600px}

figure{margin:0}
figcaption{margin-top:var(--s-10)}

/* ---- 06 full-width moment ---- */
.bleed{margin-bottom:var(--s-50)}
.bleed{display:flex;justify-content:center}
.bleed img{max-width:900px;width:100%;height:auto;aspect-ratio:auto}

/* ---- 08 sequence ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-20);padding-bottom:var(--s-50)}
.gallery img{aspect-ratio:3/2;object-fit:cover}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---- 09 closing ---- */
.closing{padding-top:var(--s-120);padding-bottom:var(--s-72)}

/* ---- 10 project footer ---- */
.pfoot{padding-top:var(--s-50);padding-bottom:var(--s-120)}
.pfoot__credit{font-size:12px;margin-bottom:var(--s-20)}
.pfoot__nav{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-50)}
.link{
  display:inline-block;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink);
}
.link:hover,.link:focus-visible{border-bottom-color:var(--muted);color:var(--muted)}

a:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* ---- tablet ---- */
@media(max-width:1279px){
  :root{--gutter:24px}
  .t-display-l{font-size:50px;letter-spacing:-1.4px}
  .t-standalone,.header__meta,figcaption,.pfoot__credit,.link{font-size:24px;letter-spacing:-.9px}
  .pfoot__credit{font-size:12px}
  .header{padding-top:var(--s-72)}
}

/* ---- mobile ---- */
@media(max-width:720px){
  :root{--gutter:20px}
  .t-display-l{font-size:26px;letter-spacing:-.4px}
  .t-standalone,.header__meta,figcaption,.pfoot__credit,.link{font-size:20px;letter-spacing:-.5px}
  .pfoot__credit{font-size:12px}
  .pfoot__nav{display:flex;gap:var(--s-20)}

  .header{padding-top:48px;padding-bottom:20px}
  .hero,.bleed{margin-bottom:48px}
  .info{padding-bottom:48px}
  /* Location + Status pair; Project, Type and Services run full width.
     Visual order only — document order is unchanged for screen readers. */
  .info__grid{grid-template-columns:repeat(2,1fr);gap:var(--s-20)}
  .info__cell{grid-column:span 2}
  .info__cell:nth-child(1){grid-column:span 1;order:1}   /* Location */
  .info__cell:nth-child(3){grid-column:span 1;order:2}   /* Status   */
  .info__cell:nth-child(2){order:3}                      /* Project  */
  .info__cell--wide{grid-column:span 2}
  .info__cell:nth-child(4){order:4}                      /* Type     */
  .info__cell:nth-child(5){order:5}                      /* Services */
  .lead{padding-top:48px;padding-bottom:48px}
  .spread{padding-bottom:48px}
  .spread figure{margin-top:var(--s-20);max-width:none}
  .gallery{grid-template-columns:1fr;gap:var(--s-20);padding-bottom:48px}
  .closing{padding-top:48px;padding-bottom:48px}
  .pfoot{padding-top:48px;padding-bottom:48px}
  .pfoot__credit{font-size:12px;margin-bottom:var(--s-20)}
}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:var(--ink);
  display:none;flex-direction:column;}
.lb[data-open="true"]{display:flex}
.lb__bar{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-20) max(var(--gutter),3.4vw);flex:0 0 auto}
.lb__count,.lb__close{
  font-family:Inter,sans-serif;font-size:13px;font-weight:400;line-height:1.33;
  text-transform:uppercase;color:var(--white);background:none;border:0;padding:0;
  font-variant-numeric:tabular-nums;}
.lb__close{cursor:pointer;border-bottom:1px solid transparent}
.lb__close:hover,.lb__close:focus-visible{border-bottom-color:var(--white)}
.lb__stage{flex:1 1 auto;position:relative;display:flex;align-items:center;
  justify-content:center;padding:0 max(var(--gutter),3.4vw);min-height:0}
.lb__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  display:block}
.lb__cap{flex:0 0 auto;padding:var(--s-20) max(var(--gutter),3.4vw) var(--s-50);
  font-family:Inter,sans-serif;font-size:13px;line-height:1.33;color:var(--white);
  opacity:.75;min-height:1.33em}
.lb__nav{position:absolute;top:0;bottom:0;width:22%;background:none;border:0;
  cursor:pointer;padding:0;color:var(--white);opacity:0}
.lb__nav:hover,.lb__nav:focus-visible{opacity:1}
.lb__nav--prev{left:0}
.lb__nav--next{right:0}
.lb__nav span{font-size:28px;line-height:1;display:block}
.lb__nav:focus-visible{outline:1px solid var(--white);outline-offset:-4px}
.gallery figure,.hero,.bleed,.spread figure{cursor:zoom-in}
@media(max-width:720px){
  .lb__nav{width:34%;opacity:1}
  .lb__cap{padding-bottom:var(--s-20)}
}

/* ---------- motion off ----------
   No animations or transitions anywhere on this page, by instruction.
   Scoped to `body` rather than `.mp` so it also covers the Archzilla /
   Elementor header and footer while these pages are being viewed. It is
   loaded only on the Projects pages, so the rest of the site is untouched.
   Remove this block to restore the parent theme's own hover transitions. */
*,*::before,*::after{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}