:root{
  --bg:#e9e9e7;
  --ink:#312e2e;
  --footer:#342e2e;
  --max:1760px;
  --side:42px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.page-shell{width:min(calc(100% - (var(--side) * 2)),var(--max));margin-inline:auto}

/* header */
.site-header{
  height:88px;
  background:var(--bg);
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
}
.brand{font-size:31px;line-height:1;letter-spacing:-1.4px}
.main-nav{display:flex;gap:39px;align-items:center;font-size:16px}
.main-nav a{padding:4px 0;border-bottom:1px solid transparent}
.main-nav a.active{border-bottom-color:currentColor}
.menu-button{display:none;border:0;background:transparent;width:44px;padding:8px 0;cursor:pointer}
.menu-button span{display:block;width:34px;height:1px;background:currentColor;margin:8px 0 8px auto}

/* intro */
.portfolio-intro{
  background:var(--bg);
  padding:74px 0 62px;
}
.intro-inner{
  display:grid;
  grid-template-columns:49.5% 50.5%;
  align-items:start;
}
.intro-copy{padding-top:6px}
.intro-copy h1{
  margin:0 0 48px;
  font-size:57px;
  line-height:1;
  letter-spacing:-2.6px;
  font-weight:400;
}
.intro-copy p{
  margin:0 0 23px;
  font-size:21px;
  line-height:1.35;
}
.intro-image{
  display:block;
  width:100%;
  aspect-ratio:1.31/1;
  object-fit:cover;
}

/* grid */
.portfolio-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:78px;
  row-gap:78px;
  padding-top:126px;
  padding-bottom:148px;
}
.project-card{display:block;min-width:0}
.project-card img{
  display:block;
  width:100%;
  aspect-ratio:1.33/1;
  object-fit:cover;
  background:#eee;
  transition:filter .15s ease;
}
.project-card:hover img{filter:brightness(.98)}
.project-card span{
  display:block;
  margin-top:24px;
  font-size:27px;
  line-height:1.2;
  letter-spacing:-.7px;
}
.project-card.last{grid-column:1}

/* footer — intentionally kept as the current working version */
.site-footer{background:var(--footer);color:#fff}
.footer-inner{
  width:calc(100% - 152px);
  margin:0 auto;
  min-height:374px;
  padding:96px 0 73px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "brand links"
    ". ."
    "copyright privacy";
}
.footer-brand{grid-area:brand}
.footer-brand img{display:block;width:166px;height:auto}
.footer-brand p{margin:34px 0 0;font-size:14px;font-weight:600}
.footer-links{
  grid-area:links;
  justify-self:end;
  display:flex;
  flex-direction:column;
  gap:31px;
  align-items:flex-end;
  font-size:16px;
}
.footer-links a,.privacy{text-decoration:underline;text-underline-offset:3px}
.footer-inner small{grid-area:copyright;align-self:end;font-size:14px}
.privacy{grid-area:privacy;justify-self:end;align-self:end;font-size:14px}

/* mobile baseline — final mobile pass comes after desktop approval */
@media (max-width:900px){
  :root{--side:22px}
  .site-header{height:92px}
  .brand{font-size:27px}
  .main-nav{
    display:none;
    position:absolute;
    z-index:10;
    top:78px;left:22px;right:22px;
    background:var(--bg);
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:24px 0;
    font-size:18px;
  }
  .main-nav.is-open{display:flex}
  .menu-button{display:block}
  .portfolio-intro{padding:44px 0 38px}
  .intro-inner{display:block}
  .intro-copy h1{font-size:45px;margin-bottom:30px}
  .intro-copy p{font-size:18px;margin-bottom:14px}
  .intro-image{margin-top:36px}
  .portfolio-grid{display:block;padding-top:58px;padding-bottom:80px}
  .project-card{margin-bottom:56px}
  .project-card span{margin-top:14px;font-size:21px}
  .footer-inner{
    width:calc(100% - 44px);
    min-height:auto;
    padding:54px 0 34px;
    display:block;
  }
  .footer-brand img{width:160px}
  .footer-links{margin-top:52px;align-items:flex-start;gap:20px}
  .privacy{display:block;margin-top:52px}
  .footer-inner small{display:block;margin-top:30px}
}