/* =========================================================
   fortytwelve.com — standalone rebuild
   Brand system carried over from the Cargo site:
     SharpEarth typography, 3-column layout, gallery hover.
   SharpEarth is a licensed font; until the font files are
   added it falls back to Helvetica (as on the live site).
   ========================================================= */

@font-face{
  font-family:"SharpEarthLight";
  src:url("fonts/SharpEarth-Light.woff2") format("woff2"),
      url("fonts/SharpEarth-Light.woff") format("woff");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"SharpEarthBold";
  src:url("fonts/SharpEarth-Bold.woff2") format("woff2"),
      url("fonts/SharpEarth-Bold.woff") format("woff");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --cover-ratio: 4 / 5;   /* home-page cover crop — change to 1/1, 3/2, 3/4, etc. */
  --fg:#000;
  --bg:#fff;
  --body: 13.2106px;
  --title: 45px;
  --light:"SharpEarthLight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --bold:"SharpEarthBold","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ font-size:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--light);
  font-size:var(--body);
  line-height:1.5;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

h1{
  font-family:var(--bold);
  font-size:var(--title);
  font-weight:normal;
  line-height:1.1;
  letter-spacing:0;
  margin:0 0 2vh 0;
}

small{ font-family:var(--light); font-size:var(--body); }
b,strong{ font-family:var(--bold); font-weight:normal; }

/* ---------------------------------------------------------
   COLUMN 1 — logo, fixed bottom-left
   --------------------------------------------------------- */
.logo{
  position:fixed;
  left:1.5vw;   /* halved from the logo side */
  bottom:2vh;   /* halved from the logo side */
  width:22vw;
  max-width:240px;
  z-index:9999;
  display:block;
}
.logo img{ width:100%; height:auto; display:block; }

/* ---------------------------------------------------------
   COLUMN 2 — menu, fixed middle
   --------------------------------------------------------- */
.menu{
  position:fixed;
  left:1.5vw;
  top:1.5vh;
  display:flex;
  gap:1.8vw;
  max-height:96vh;
  overflow-y:auto;
  z-index:9990;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.menu::-webkit-scrollbar{ display:none; }

.nav-main,
.nav-list{ display:flex; flex-direction:column; flex:none; }
/* fixed width so bolding a nav item can't widen the column and shove
   the project list sideways */
.nav-main{ width:10.5em; }

/* project list inside the menu is desktop-hidden — it only appears
   in the mobile menu overlay (old two-column format) */
.menu .menu-projects{ display:none; }

.menu a{
  font-family:var(--light);
  font-size:var(--body);
  line-height:1.5;
  white-space:nowrap;
}
.menu a.active,
.menu a:hover{ font-family:var(--bold); }

/* home page project list (middle column) */
.project-index a{
  font-family:var(--light);
  font-size:var(--body);
  line-height:1.5;
  white-space:nowrap;
}
.project-index a:hover{ font-family:var(--bold); }

/* ---------------------------------------------------------
   COLUMN 3 — content, right
   --------------------------------------------------------- */
.content{
  margin-left:60vw;
  margin-right:1.5vw;
  padding:1.5vh 0 6vh;
  min-height:100vh;
}

/* ---- home: images stacked one on top of the other ---- */
/* custom fortytwelve cursor over the whole gallery column, incl. the
   image links (which otherwise force their own pointer cursor) */
.thumbnails,
.thumbnails .thumb,
.thumbnails .thumb img,
.thumbnails .thumb::after{
  cursor:url("ft-cursor.png") 24 24, pointer;
}

.thumb{
  display:block;
  position:relative;
  margin:0 0 1.4vh;
  overflow:hidden;
  background:#fff;
}
.thumb img{
  width:100%;
  aspect-ratio:var(--cover-ratio);
  object-fit:cover;         /* uniform crop, centered */
  display:block;
  transition:opacity .22s ease;
}
/* white wash on hover so the black project name reads over it */
.thumb:hover img{ opacity:.18; }

.thumb::after{
  content:attr(data-title);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 8%;
  font-family:var(--bold);
  font-size:14px;
  line-height:1.25;
  letter-spacing:.02em;
  color:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.thumb:hover::after{ opacity:1; }

/* placeholder tile (no cover yet) */
.thumb.is-placeholder{
  background:#ececec;
  aspect-ratio:var(--cover-ratio);
}
.thumb.is-placeholder .placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 10%;
  font-family:var(--bold);
  font-size:18px;
  color:#000;
}
.thumb.is-placeholder::after{ display:none; }

/* ---- project page ---- */
.project-media img{ width:100%; height:auto; display:block; cursor:zoom-in; }
.project-media img + img{ margin-top:1.4vh; }

/* =========================================================
   LIGHTBOX — full-screen image viewer for project galleries
   ========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:100000;
  background:#fff;
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox.open{ display:flex; }
.lightbox > img{
  max-width:86vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
  cursor:pointer;
}
.lightbox button{
  position:fixed;
  background:none;
  border:0;
  padding:0;
  margin:0;
  color:#000;
  font-family:var(--light);
  line-height:1;
  cursor:pointer;
}
.lb-close{ top:3vh; right:3vw; font-size:38px; }
.lb-prev,
.lb-next{ top:50%; transform:translateY(-50%); font-size:60px; padding:0 1vw; }
.lb-prev{ left:2vw; }
.lb-next{ right:2vw; }
.lb-count{
  position:fixed;
  left:0; right:0; bottom:3vh;
  text-align:center;
  font-family:var(--light);
  font-size:var(--body);
  color:#000;
  pointer-events:none;
}
@media(max-width:768px){
  .lightbox > img{ max-width:94vw; max-height:80vh; }
  .lb-prev, .lb-next{ font-size:42px; }
  .lb-close{ font-size:32px; top:2vh; right:5vw; }
}
.placeholder-media{
  aspect-ratio:4/5;
  background:#ececec;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6em;
  color:#000;
}
.placeholder-media span{ font-family:var(--bold); font-size:22px; }
.placeholder-media small{ color:#000; }

/* =========================================================
   PROJECT PAGE LAYOUT
     top-left    : main nav (.menu)
     bottom-left : logo
     middle      : title + info + description (.project-meta)
     right       : image gallery (.project-gallery)
   ========================================================= */
.project-meta{
  position:fixed;
  left:31vw;
  top:1.5vh;
  width:27vw;
  max-height:97vh;
  overflow-y:auto;
  z-index:9985;
  scrollbar-width:none;
}
.project-meta::-webkit-scrollbar{ display:none; }

.project-title{
  font-family:var(--bold);
  font-size:74px;              /* ~65% larger than the 45px title */
  line-height:1.02;
  letter-spacing:0;
  margin:0 0 3.5vh;
}

/* two-column info / spec block */
.project-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1em 1.4em;
  margin:0 0 3.5vh;
}
.info-item small{
  display:block;
  font-family:var(--light);
  color:#000;
  line-height:1.35;
}
.info-item h2{
  font-family:var(--bold);
  font-size:var(--body);
  font-weight:normal;
  line-height:1.35;
  margin:0;
  min-height:1em;             /* keeps rows aligned while values are blank */
}

.project-desc{ max-width:30em; }
.project-desc p{ margin:0 0 1.3vh; line-height:1.55; }

/* contact details: stacked label / value rows */
.contact-list{ display:flex; flex-direction:column; gap:1.4em; }
.contact-list .info-item h2{ line-height:1.4; }

/* press list: bold publication over light article title */
.press-list{ display:flex; flex-direction:column; gap:1.5em; }
.press-item{ display:flex; flex-direction:column; line-height:1.45; }
.press-pub{ font-family:var(--bold); }
.press-title{ font-family:var(--light); }

.project-gallery{
  margin-left:60vw;
  margin-right:1.5vw;
  padding:1.5vh 0 6vh;
  min-height:100vh;
}
.project-gallery .project-media + .project-media{ margin-top:1.4vh; }

/* ---- text pages ---- */
.textpage{ max-width:46ch; }
.copy p{ margin:0 0 1.5vh; line-height:1.55; }
.copy[data-empty="true"] small{ color:#000; }

/* ---------------------------------------------------------
   Mobile burger (hidden on desktop)
   --------------------------------------------------------- */
.menu-toggle{
  display:none;
  position:fixed;
  top:3vw;
  right:4vw;
  z-index:10000;
  border:0;
  background:transparent;
  font-family:var(--light);
  font-size:36px;
  line-height:1;
  cursor:pointer;
  padding:0;
}

/* ---------------------------------------------------------
   MOBILE — single column under 768px
   --------------------------------------------------------- */
@media(max-width:768px){
  .logo{
    position:fixed;
    left:5vw;
    bottom:5vw;
    width:42vw;
    max-width:170px;
    margin:0;
    z-index:9999;
  }
  .menu-toggle{ display:block; z-index:10002; }

  /* full-screen menu overlay: covers the whole page (incl. logo),
     laid out in the same two columns as desktop */
  .menu{
    position:fixed;
    inset:0;
    width:auto;
    max-height:none;
    overflow-y:auto;
    background:#fff;
    padding:20vw 6vw 10vw;
    display:none;
    z-index:10001;
    gap:6vw;
  }
  .menu.open{ display:flex; }
  .menu a{ font-size:15px; line-height:1.9; }
  .nav-main{ width:7.5em; }
  /* show the project list inside the mobile menu (two columns) */
  .menu .menu-projects{ display:flex; }

  /* hide the home page's middle project list on mobile */
  .home-index{ display:none; }

  .content{
    margin:0;
    padding:2vh 5vw 30vw;
  }
  .thumbnails{ column-count:1; }
  .thumb{ margin-bottom:5vw; }

  h1{ font-size:32px; line-height:1.15; }

  /* --- project page: stack meta then gallery --- */
  .project-meta{
    position:static;
    width:100%;
    max-height:none;
    overflow:visible;
    padding:2vh 5vw 0;
  }
  .project-title{ font-size:62px; line-height:1.0; }

  .project-gallery{
    margin:0;
    padding:3vh 5vw 32vw;
  }
}