:root{
  --bg:#f7f5f0;
  --ink:#181712;
  --olive:#4b5320;
  --muted:#8a8578;
  --line:#e2ded3;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Layout */
.wrap{
  display:flex;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  width:300px;
  flex-shrink:0;
  padding:56px 40px;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--line);
  overflow-y:auto;
}
.sidebar-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}
.name{
  font-size:34px;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.01em;
}
.name a{
  color:inherit;
  text-decoration:none;
}
.name a:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:4px;
}
.nav-section{
  margin-top:56px;
}
.nav-label{
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.08em;
  margin-bottom:18px;
}
.nav-list{
  list-style:none;
}
.nav-list li{
  margin-bottom:12px;
}
.nav-list a{
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  line-height:1.4;
  opacity:0.72;
  transition:opacity .15s ease, color .15s ease;
}
.nav-list a:hover,
.nav-list a:focus-visible,
.nav-list a[aria-current="page"]{
  opacity:1;
  color:var(--olive);
}
.nav-list a[aria-current="page"]{
  font-weight:700;
}
.sidebar-footer{
  font-size:15px;
  padding-top:32px;
}
.sidebar-footer a{
  color:var(--ink);
  text-decoration:none;
  opacity:0.72;
}
.sidebar-footer a:hover,
.sidebar-footer a:focus-visible{ opacity:1; color:var(--olive); }

.menu-toggle{
  display:none;
}

/* Main */
.main{
  flex:1;
  min-width:0;
  padding:56px 56px 120px;
}
.intro{
  max-width:520px;
  margin-bottom:64px;
}
.intro p{
  font-size:20px;
  line-height:1.5;
  color:#3c3a33;
}

/* Home grid */
.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
.tile{
  position:relative;
  display:block;
  text-decoration:none;
  color:var(--ink);
  border-radius:2px;
  overflow:hidden;
  aspect-ratio:1/1;
  border:1px solid var(--line);
}
/* Featured project: spans both columns, same height as the square tiles */
.tile.featured{
  grid-column:span 2;
  aspect-ratio:2/1;
}

.tile-media{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  text-align:center;
}
.tile-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.tile-media span.year{
  position:absolute;
  top:20px;
  left:20px;
  font-size:13px;
  color:rgba(255,255,255,0.85);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .2s ease, transform .2s ease;
  z-index:2;
}
.tile-title{
  position:relative;
  z-index:2;
  font-size:28px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
}
.tile.featured .tile-title{ font-size:36px; }

.tile-overlay{
  position:absolute;
  inset:0;
  background:rgba(24,23,18,0);
  transition:background .2s ease;
  z-index:1;
}
.tile:hover .tile-overlay,
.tile:focus-visible .tile-overlay{
  background:rgba(24,23,18,0.68);
}
.tile:hover .tile-title,
.tile:hover .tile-media span.year,
.tile:focus-visible .tile-title,
.tile:focus-visible .tile-media span.year{
  opacity:1;
  transform:translateY(0);
}
.tile:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:3px;
}

/* Project page */
.project{
  max-width:980px;
}
.back-link{
  display:inline-block;
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  margin-bottom:40px;
  transition:color .15s ease;
}
.back-link:hover,
.back-link:focus-visible{ color:var(--olive); }
.project-year{
  font-size:16px;
  color:var(--muted);
  margin-bottom:12px;
}
.project-title{
  font-size:56px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin-bottom:28px;
}
.project-text{
  max-width:560px;
  font-size:18px;
  line-height:1.6;
  color:#3c3a33;
  margin-bottom:56px;
}
.media-video{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  margin-bottom:24px;
}
.media-video iframe,
.media-video video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
.media-video > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.media-link img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-link::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(24,23,18,0);
  transition:background .2s ease;
}
.media-link:hover::after,
.media-link:focus-visible::after{ background:rgba(24,23,18,0.12); }
.media-link:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:3px;
}
.video-item{ margin:0; }
.video-item.featured{ grid-column:span 2; }
.video-note{ display:flex; align-items:center; }
.video-note p{ margin:0; max-width:34em; color:var(--muted); font-size:15px; line-height:1.6; }
.video-grid .media-video{ margin-bottom:0; }
.video-item figcaption{
  margin-top:12px;
  font-size:15px;
  line-height:1.4;
}
.video-item .cap-title{ display:block; color:var(--ink); }
.video-item .cap-by{ display:block; color:var(--muted); margin-top:2px; }
.gallery{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
.gallery-item{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
}
.gallery-item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.project-nav{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-top:72px;
  padding-top:32px;
  border-top:1px solid var(--line);
  font-size:16px;
}
.project-nav a{
  color:var(--ink);
  text-decoration:none;
  opacity:0.72;
  transition:opacity .15s ease, color .15s ease;
}
.project-nav a:hover,
.project-nav a:focus-visible{ opacity:1; color:var(--olive); }
.project-nav .next{ margin-left:auto; text-align:right; }
.project-nav small{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:4px;
}

/* Placeholder color rotation (remove when real images are added) */
.c1{ background:#ece7da; }
.c2{ background:#dfe2d0; }
.c3{ background:#e7ded2; }
.c4{ background:#d9dccb; }
.c5{ background:#efe9dd; }
.c6{ background:#dde0d3; }
.c7{ background:#e4ddd0; }
.c8{ background:#d6d9c8; }
.c9{ background:#e9e3d6; }
.c10{ background:#dbdfcf; }
.c11{ background:#e2dacd; }

footer.section-footer{
  margin-top:80px;
  padding-top:32px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:15px;
}
footer.section-footer a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--line);
  transition:color .15s ease, text-decoration-color .15s ease;
}
footer.section-footer a:hover,
footer.section-footer a:focus-visible{
  color:var(--olive);
  text-decoration-color:var(--olive);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .tile-title, .tile-media span.year, .tile-overlay{ transition:none; }
}

/* Mobile */
@media (max-width: 860px){
  .wrap{ flex-direction:column; }
  .sidebar{
    position:relative;
    height:auto;
    width:100%;
    padding:24px 24px;
    border-right:none;
    border-bottom:1px solid var(--line);
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    overflow:visible;
  }
  .sidebar > div:first-child{ width:100%; }
  .name{ font-size:22px; }
  .nav-section{ display:none; margin-top:0; }
  .nav-section.open{ display:block; position:absolute; top:64px; left:0; right:0; background:var(--bg); padding:24px; border-bottom:1px solid var(--line); z-index:10; }
  .sidebar-footer{ display:none; }
  .menu-toggle{
    display:block;
    background:none;
    border:1px solid var(--line);
    padding:8px 14px;
    font-size:14px;
    border-radius:2px;
    cursor:pointer;
    color:var(--ink);
  }
  .main{ padding:32px 20px 80px; }
  .grid, .gallery{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .video-grid{ grid-template-columns:1fr; gap:28px; }
  .video-item.featured{ grid-column:auto; }
  .tile-title{ font-size:18px; }
  .tile.featured .tile-title{ font-size:26px; }
  .intro p{ font-size:18px; }
  .project-title{ font-size:36px; }
  .project-text{ font-size:17px; margin-bottom:40px; }
  .project-nav{ margin-top:48px; }
}

/* Sidebar footer links (About Me, Contact) */
.sidebar-footer a{ display:block; }
.sidebar-footer a + a{ margin-top:10px; }
.sidebar-footer a[aria-current="page"]{ opacity:1; color:var(--olive); font-weight:700; }

/* About Me page */
.about{ max-width:980px; }
.about .project-title{ margin-bottom:36px; }
.about-text{ max-width:640px; }
.about-text p{
  font-size:18px;
  line-height:1.65;
  color:#3c3a33;
  margin-bottom:1.2em;
}

/* Mobile menu: About Me and Contact live inside the opened menu (the desktop footer links are hidden) */
.nav-extra{ display:none; }
@media (max-width: 860px){
  .nav-extra{
    display:block;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--line);
  }
  .about-text p{ font-size:17px; }
}

/* About Me: text on the left, portrait on the right */
.about-layout{
  display:grid;
  grid-template-columns:minmax(0, 620px) 320px;
  grid-template-areas:
    "title photo"
    "text  photo";
  grid-template-rows:auto 1fr;
  column-gap:64px;
  align-items:start;
}
.about-title{ grid-area:title; }
.about-text{ grid-area:text; }
.about-photo{
  grid-area:photo;
  margin:0;
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  aspect-ratio:1/1;
  position:sticky;
  top:56px;
}
.about-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (max-width: 1180px){
  .about-layout{
    grid-template-columns:minmax(0, 640px);
    grid-template-areas:
      "title"
      "photo"
      "text";
    grid-template-rows:auto;
  }
  .about-photo{ position:static; width:240px; margin-bottom:36px; }
}