:root{
  --outer:18px;
  --pad:16px;
  --font: 12px;
  --fontSmall: 10.5px;
  --line: 1.35;
  --panelW: min(500px, calc(100vw - (var(--outer) * 2)));
  --titleW: min(500px, calc(100vw - (var(--outer) * 2)));
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:#000;
  background:#fff;
  font-size:var(--font);
  line-height:var(--line);
  text-transform:uppercase;
  letter-spacing:0.01em;
}

/* Shared nav */
a{color:inherit; text-decoration:none}
a:hover{ text-decoration:underline; text-underline-offset:3px; }
.navLogo{
  font-size:var(--fontSmall);
  font-weight:400;
  line-height:1.4;
}
.navMenu a{
  display:block;
  margin:2px 0;
  font-size:var(--fontSmall);
  font-weight:400;
  line-height:1.4;
}
.navMenu a.active{ text-decoration:underline; text-underline-offset:3px; }

/* HOME */
.homeBg{
  position:fixed;
  inset:0;
  background:#cfcfcf;
  background-image: url('../img/home.jpg');
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}

.homePanels{
  position:fixed;
  left:var(--outer);
  top:var(--outer);
  width:var(--panelW);
  z-index:10;
}

.homeTopPanel{
  background:#fff;
  padding:var(--pad);
  width:100%;
  display:grid;
  grid-template-columns: 170px auto;
  column-gap: 56px; /* tighter like reference */
  align-items:start;
}

.homeTopPanel .navLogo{line-height:1.4;}
.homeTopPanel .navMenu{justify-self:start;}

.homeTitlePanel{
  margin-top:14px; /* separation like reference */
  background:#fff;
  padding:var(--pad);
  width:var(--titleW);
  font-size:var(--fontSmall);
  font-weight:400;
  line-height:1.4;
}

.homeContactPanel{
  position:fixed;
  left:var(--outer);
  bottom:var(--outer);
  background:#fff;
  padding:var(--pad);
  width:240px;
  font-size:var(--fontSmall);
  line-height:1.4;
}

/* PAGES (non-home) */
.pageNav{
  position:fixed;
  left:var(--outer);
  top:var(--outer);
  display:grid;
  grid-template-columns: 170px auto;
  column-gap: 56px;
  z-index:10;
}

.pageWrap{
  min-height:100vh;
  padding: 0 var(--outer);
}

.centerCol{
  width: min(520px, calc(100vw - (var(--outer) * 2)));
  margin: 14px auto 0;
  padding-top: 0;
  font-size:11px;
  line-height:1.35;
}

.filters{
  display:flex;
  gap:14px;
  justify-content:flex-start;
  margin: 4px 0 10px;
  font-weight:700;
}
.filters a.active{ text-decoration:underline; text-underline-offset:3px; }

.workList a{ display:block; padding:1px 0; }

.searchRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  border-bottom:1px solid rgba(0,0,0,0.35);
  padding-bottom:6px;
  margin-bottom:12px;
}
.searchRow input{
  width:min(220px, 45vw);
  border:none;
  outline:none;
  font: inherit;
  text-transform:uppercase;
}
.searchRow button{
  border:none;
  background:none;
  font: inherit;
  font-weight:700;
  cursor:pointer;
  padding:0;
}

@media (max-width:520px){
  :root{ --outer:14px; --pad:14px; }
  .homeTopPanel, .pageNav{ grid-template-columns: 150px auto; column-gap: 42px; }
}


/* HOME SCROLL PROJECTS */
body.homePage{background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.homeOverlay{position:fixed; inset:0; pointer-events:none; z-index:20;}
.homeOverlay .homePanels,
.homeOverlay .homeContactPanel{pointer-events:auto;}
.homeProjects{position:relative; z-index:1;}
.projectSection{position:relative; height:100vh; min-height:680px; overflow:hidden; background:#dcdcdc; margin:0; padding:0;}
.projectImage{position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center center; transform:none; border:0;}
.projectSection::after{content:""; position:absolute; inset:0; background:rgba(255,255,255,0.02);}
.homeTitlePanel{transition:opacity .22s ease; white-space:normal;}

@media (max-width: 800px){
  .projectSection{min-height:100svh;}
  .projectImage{object-fit:cover; transform:none;}
}

.homeOverlay{background:transparent;}
@supports (-webkit-touch-callout: none) {
  .projectSection{height:100svh; min-height:100svh;}
}

/* WORK UPGRADE */
.workCenterCol{width:min(700px, calc(100vw - (var(--outer) * 2)));}
.workFilters{flex-wrap:wrap; gap:18px; margin-bottom:12px;}
.workMeta{margin:0 0 10px; font-size:10px; letter-spacing:0.04em; opacity:0.68;}
.upgradedWorkList{display:flex; flex-direction:column; gap:3px;}
.upgradedWorkList a{display:block; width:fit-content; padding:1px 0;}
.upgradedWorkList a.is-hidden{display:none;}

@media (max-width:520px){
  .workCenterCol{width:min(100%, calc(100vw - (var(--outer) * 2)));}
  .workFilters{gap:12px;}
}


.projectLink{position:absolute; inset:0; z-index:3;}
.projectSection{cursor:pointer;}
.projectSection::after{z-index:1;}
.projectImage{z-index:0;}

/* PROJECT DETAIL PAGES */
.projectPageBody{background:#fff;}
.projectPage{display:grid; grid-template-columns:minmax(220px, 240px) minmax(0, 1fr); gap:32px; padding:18px 18px 140px 18px; min-height:100vh;}
.projectInfoCard{position:sticky; top:18px; align-self:start; background:var(--panelBg); padding:var(--pad); margin-left:calc(170px + 56px + var(--outer)); width:min(240px, 100%);}
.projectInfoEyebrow{font-size:10px; letter-spacing:0.06em; opacity:.65; margin-bottom:10px;}
.projectInfoTitle{font-size:12px; line-height:1.45; margin:0 0 12px; font-weight:400;}
.projectInfoMeta{font-size:10px; letter-spacing:0.04em; opacity:.75; margin-bottom:18px;}
.projectBackLink{display:inline-block; text-decoration:underline; text-underline-offset:3px;}
.projectGallery{display:grid; gap:18px; margin-left:calc(170px + 56px + var(--outer) + 240px + 32px); padding-right:18px;}
.projectFigure{margin:0; background:#f3f3f3;}
.projectFigure img{display:block; width:100%; height:auto;}
.projectFigureCaption figcaption{padding:10px 12px 12px; font-size:10px; letter-spacing:0.04em; opacity:.68;}
.projectFigureLarge img{min-height:72vh; object-fit:cover;}

@media (max-width: 980px){
  .projectPage{display:block; padding-top:18px;}
  .projectInfoCard{position:relative; top:auto; margin:0 18px 18px calc(var(--outer)); width:min(420px, calc(100% - 36px));}
  .projectGallery{margin:0 calc(var(--outer)) 0 calc(var(--outer)); padding-right:0;}
}


/* HOME UPGRADE */
.projectSection{transition:opacity .45s ease, transform .8s ease;}
.projectSection .projectImage{transition:transform 1.2s ease, filter .6s ease, opacity .6s ease;}
.projectSection:hover .projectImage{transform:scale(1.02);}
.projectSection.is-active .projectImage{filter:none;}
.projectSection:not(.is-active) .projectImage{filter:saturate(0.98) contrast(0.98);}
.homeTitlePanel{transition:opacity .28s ease, transform .4s ease;}

/* PROJECT PAGE GALLERY */
.projectGallery{display:grid; gap:18px;}
.projectTwoUp{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.projectFigure img{width:100%; height:auto; display:block;}
.projectTwoUp .projectFigure img{height:48vw; max-height:700px; object-fit:cover;}
.projectFigureLarge img{width:100%; min-height:82vh; object-fit:cover;}
.projectFadeIn{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .8s ease;}
.projectFadeIn.is-visible{opacity:1; transform:translateY(0);}

@media (max-width: 980px){
  .projectTwoUp{grid-template-columns:1fr;}
  .projectTwoUp .projectFigure img{height:auto; max-height:none;}
}

.projectVideo{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center center; z-index:0; background:#111;}
.videoSection::after{background:rgba(0,0,0,0.04);}
.videoSection:hover .projectVideo{transform:none;}


/* VIDEO FULL-BLEED STABILIZATION */
.homeProjects{width:100%;}
.projectSection,
.videoSection{width:100vw; max-width:100%;}
.videoSection{background:#111;}
.projectVideo{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  min-width:100%;
  min-height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  background:#111;
  pointer-events:none;
}
@supports (-webkit-touch-callout: none) {
  .projectVideo{height:100svh;}
}