*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    :root{--w:#fff;--b:#0e0e0e;--g:#888;--d:#ccc;
      --serif:"EB Garamond",Georgia,serif;
      --sans:"Inter",sans-serif}
    html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
    body{background:var(--w);color:var(--b);font-family:var(--sans);font-weight:300;overflow-x:hidden}

    /* ── NAV ── */
    nav{
      position:fixed;top:0;left:0;right:0;z-index:500;
      display:flex;justify-content:space-between;align-items:center;
      padding:1rem 1.8rem;
      background:#fff;
      border-bottom:1px solid var(--d);
    }
    .nav-logo{
      font-family:var(--serif);font-size:0.92rem;font-weight:400;
      letter-spacing:0.02em;color:var(--b);
      background:none;border:none;cursor:pointer;
    }
    .nav-r{display:flex;gap:1.8rem;align-items:center}
    .nav-r button,.nav-r a{
      font-family:var(--sans);font-size:0.67rem;font-weight:400;
      letter-spacing:0.07em;color:var(--g);
      background:none;border:none;cursor:pointer;
      text-decoration:none;text-transform:lowercase;
      transition:color .2s;padding:0;
    }
    .nav-r button:hover,.nav-r a:hover,
    .nav-r button.active{color:var(--b)}
    .nav-ig{display:flex;align-items:center;color:var(--g);transition:color .2s;}
    .nav-ig:hover{color:var(--b);}
    .nav-ig svg{display:block;}

    /* ── VIEWS ── */
    .view{display:none}
    .view.on{display:block}
    #v-home{position:relative;}
    /* ── HOME HERO ── */
    .home-hero{
      height:100vh;
      width:100vw;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
      box-sizing:border-box;
      background:#000;
      overflow:hidden;
    }
    .home-video-wrap{
      width:100%;
      height:100%;
      cursor:pointer;
    }
    .home-video-wrap video{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    /* ── SCROLL HINT ── */
    .scroll-hint{
      position:fixed;
      bottom:0;
      left:0;
      right:0;
      height:48px;
      background:#fff;
      border-top:1px solid var(--d);
      color:var(--b);
      transition:opacity .4s;
      z-index:400;
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:center;
      gap:8px;
      pointer-events:none;
    }
    .scroll-hint svg{
      animation:bounce 1.6s ease-in-out infinite;
    }
    .scroll-hint span{
      font-size:0.55rem;
      letter-spacing:0.18em;
      text-transform:uppercase;
      font-family:var(--sans);
      font-weight:400;
    }
    .scroll-hint.hidden{opacity:0;}
    @keyframes bounce{
      0%,100%{transform:translateY(0);}
      50%{transform:translateY(5px);}
    }

    /* ── HOME NAV BUTTONS ── */
    .home-nav-btns{
      display:flex;
      gap:1.5rem;
      padding:4rem 5vw 5rem;
    }
    .home-nav-btns button{
      background:none;
      border:1px solid var(--b);
      padding:.55rem 1.4rem;
      font-family:var(--sans);
      font-size:0.7rem;
      font-weight:300;
      letter-spacing:0.1em;
      text-transform:lowercase;
      cursor:pointer;
      color:var(--b);
      transition:background .2s, color .2s;
    }
    .home-nav-btns button:hover{background:var(--b);color:var(--w);}

    /* ── FEATURED PROJECTS GRID ── */
    .home-carousel{
      position:relative;
      padding:3rem 5vw 0;
    }
    .home-featured{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:calc((100% - 48px) / 4);
      gap:16px;
      overflow-x:auto;
      scroll-behavior:smooth;
      scrollbar-width:none;
      -ms-overflow-style:none;
      align-items:start;
    }
    .home-featured::-webkit-scrollbar{display:none;}
    .carousel-arrow{
      position:absolute;
      top:calc(50% - 1.5rem);
      transform:translateY(-50%);
      width:44px;height:44px;
      border-radius:50%;
      background:rgba(255,255,255,0.95);
      border:1px solid var(--d);
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;
      color:var(--b);
      z-index:5;
      transition:background .2s, transform .2s;
      box-shadow:0 2px 12px rgba(0,0,0,0.1);
    }
    .carousel-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
    .carousel-next{right:calc(5vw - 22px);}
    .carousel-prev{left:calc(5vw - 22px);}
    .hf-card{
      cursor:pointer;
      position:relative;
      background:none;
    }
    .hf-card img{
      width:100%;
      height:auto;
      display:block;
      image-orientation:from-image;
      transition:opacity .3s;
    }
    .hf-card:hover img{opacity:0.7;}
    .hf-card-meta{
      display:flex;
      justify-content:space-between;
      align-items:baseline;
      padding:0.55rem 0 0;
    }
    .hf-card-title{
      font-size:0.6rem;
      letter-spacing:0.08em;
      text-transform:uppercase;
      color:var(--b);
      font-family:var(--sans);
      font-weight:400;
    }
    .hf-card-num{
      font-family:var(--serif);
      font-size:0.72rem;
      color:var(--g);
    }

    /* ── ARCHIVE MASONRY ── */
    .archive-section-head{
      font-size:0.62rem;
      letter-spacing:0.2em;
      text-transform:uppercase;
      color:var(--b);
      font-weight:500;
      padding:0 0 1rem 2px;
      border-bottom:1px solid var(--d);
      margin-bottom:1.2rem;
    }
    .archive-wrap{
      padding:calc(56px + 2rem) 1rem 4rem;
      min-height:100vh;
    }
    .archive-masonry{
      display:flex;
      align-items:flex-start;
      gap:8px;
    }
    .am-item{
      position:relative;
      cursor:pointer;
      overflow:hidden;
      background:#eee;
      display:block;
    }
    .am-item img, .am-item video{
      width:100%;
      height:auto;
      display:block;
      image-orientation:from-image;
      transition:transform .5s cubic-bezier(.25,.46,.45,.94), opacity .3s;
    }
    .am-item:hover img, .am-item:hover video{transform:scale(1.04);opacity:.92;}
    .am-play{
      position:absolute;
      top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:48px;height:48px;
      background:rgba(0,0,0,0.5);
      border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      pointer-events:none;
      transition:background .3s, transform .3s;
      backdrop-filter:blur(2px);
    }
    .am-item:hover .am-play{background:rgba(0,0,0,0.72);transform:translate(-50%,-50%) scale(1.1);}
    /* persistent VIDEO tag on video tiles */
    .am-video::after{
      content:'VIDEO';
      position:absolute;
      top:8px; left:8px;
      font-family:var(--sans);
      font-size:0.5rem;
      font-weight:500;
      letter-spacing:0.14em;
      color:#fff;
      background:rgba(0,0,0,0.55);
      padding:3px 7px;
      border-radius:2px;
      pointer-events:none;
      z-index:2;
      backdrop-filter:blur(2px);
    }
    /* meta on hover (photos + videos) */
    .am-meta{
      position:absolute;
      bottom:0;left:0;right:0;
      padding:2.5rem 0.9rem 0.9rem;
      background:linear-gradient(transparent, rgba(0,0,0,0.78));
      opacity:0;
      transition:opacity .3s;
      pointer-events:none;
    }
    .am-item:hover .am-meta{opacity:1;}
    .am-title{
      font-family:var(--sans);
      font-size:0.68rem;
      letter-spacing:0.06em;
      text-transform:uppercase;
      color:#fff;
      font-weight:400;
      line-height:1.3;
    }
    .am-sub{
      font-size:0.54rem;
      letter-spacing:0.08em;
      text-transform:uppercase;
      color:rgba(255,255,255,0.65);
      margin-top:0.25rem;
    }



        .proj-view{display:none}.proj-view.on{display:block}
    .proj-header{
      padding:4.8rem 1.8rem 2.2rem;
      display:flex;justify-content:space-between;align-items:flex-end;
      border-bottom:1px solid var(--d);
    }
    .proj-title{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.8rem);font-weight:400;color:var(--b)}
    .proj-meta-right{text-align:right;font-size:0.62rem;color:var(--g);line-height:2;letter-spacing:0.05em}
    .proj-images{
      padding:4px 1.8rem 1.8rem;
      display:block;
      line-height:0;
    }
    .pj-video-area{display:block;}
    .pj-video-area:not(:empty){margin-bottom:4px;}
    .pj-photo-grid{display:flex;gap:4px;align-items:flex-start;}
    .proj-img-wrap{
      overflow:hidden;
      background:#f0f0f0;
      cursor:zoom-in;
    }
    .proj-img-wrap img{width:100%;height:auto;display:block;image-orientation:from-image;transition:opacity .4s}
    .proj-img-wrap img.loading{opacity:0}
    .proj-video-wrap{width:100%;margin-bottom:4px}
    .proj-footer-row{
      display:flex;justify-content:space-between;align-items:center;
      padding:2rem 1.8rem 3rem;border-top:1px solid var(--d);margin-top:0;
    }
    .proj-back{background:none;border:none;cursor:pointer;
      font-size:0.65rem;color:var(--g);letter-spacing:0.1em;text-transform:lowercase;transition:color .2s}
    .proj-back:hover{color:var(--b)}
    .proj-nav-btns{display:flex;gap:2rem}
    .proj-nav-btns button{background:none;border:none;cursor:pointer;
      font-family:var(--serif);font-size:0.9rem;color:var(--g);transition:color .2s}
    .proj-nav-btns button:hover{color:var(--b)}

    /* ── INFO + CONTACT (combined about page) ── */
    .about-wrap{
      min-height:calc(100vh - 56px);
      display:grid;
      grid-template-columns:440px 1fr;
      gap:0;
      align-items:start;
    }
    .about-photo{
      position:sticky;top:3.6rem;
      padding:5rem 1.8rem 0 1.8rem;
    }
    .about-photo img{
      width:100%;height:auto;
      display:block;
      image-orientation:from-image;
    }
    .about-content{
      padding:5rem 1.8rem;
      display:flex;flex-direction:column;gap:4rem;
      overflow-y:auto;
    }
    .info-lbl,.cont-lbl{font-size:0.58rem;letter-spacing:0.14em;color:var(--g);text-transform:lowercase;margin-bottom:2rem}
    .info-name{font-family:var(--serif);font-size:clamp(2.4rem,4vw,4rem);font-weight:400;line-height:1.02;margin-bottom:1rem;color:var(--b)}
    .info-role{font-size:0.8rem;color:var(--g);margin-bottom:0.5rem;letter-spacing:0.04em}
    .info-loc{font-size:0.78rem;color:var(--g);margin-bottom:2rem;letter-spacing:0.02em;opacity:0.85}
    .info-links{border-top:1px solid var(--d)}
    .info-link{
      display:flex;justify-content:space-between;align-items:center;
      padding:.75rem 0;border-bottom:1px solid var(--d);
      font-size:0.7rem;color:var(--b);text-decoration:none;
      letter-spacing:0.04em;transition:opacity .2s;cursor:pointer;
      background:none;border-left:none;border-right:none;width:100%;text-align:left;
    }
    .info-link:hover{opacity:.5}
    .info-link span{color:var(--g);font-size:0.62rem}
    .info-bio{font-size:0.86rem;font-weight:300;line-height:1.9;color:#444;margin-top:2rem}
    .info-bio p+p{margin-top:1.1rem}
    .cont-head{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:400;line-height:1.05;color:var(--b);margin-bottom:1.5rem}
    .cf{display:flex;flex-direction:column;border-bottom:1px solid var(--d);padding:.85rem 0}
    .cf label{font-size:0.56rem;letter-spacing:0.14em;color:var(--g);text-transform:lowercase;margin-bottom:.3rem}
    .cf input,.cf textarea{background:none;border:none;outline:none;
      font-family:var(--sans);font-size:0.84rem;font-weight:300;color:var(--b);resize:none}
    .cf-btn{
      margin-top:1.8rem;align-self:flex-start;
      background:none;border:1px solid var(--b);padding:.6rem 1.5rem;
      font-family:var(--sans);font-size:0.6rem;font-weight:400;
      letter-spacing:0.1em;color:var(--b);cursor:pointer;text-transform:lowercase;
      transition:background .2s,color .2s;
    }
    .cf-btn:hover{background:var(--b);color:var(--w)}

    /* ── LIGHTBOX ── */

    @media(max-width:640px){
      .home-featured{grid-auto-columns:calc((100% - 10px) / 2);gap:10px;}
    }
    .lb{position:fixed;inset:0;z-index:600;background:rgba(255,255,255,.97);
      display:none;align-items:center;justify-content:center;cursor:zoom-out}
    .lb.on{display:flex}
    .lb img{max-width:88vw;max-height:88vh;object-fit:contain;cursor:default}
    .lb-close{position:absolute;top:1.2rem;right:1.8rem;background:none;border:none;
      font-size:0.65rem;color:var(--g);cursor:pointer;letter-spacing:.1em;text-transform:lowercase;transition:color .2s}
    .lb-close:hover{color:var(--b)}
    .lb-arr{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;
      font-size:2.2rem;color:var(--d);cursor:pointer;padding:2rem;transition:color .2s;user-select:none}
    .lb-arr:hover{color:var(--g)}
    .lb-prev{left:0}.lb-next{right:0}
    .lb-cap{position:absolute;bottom:1.3rem;left:0;right:0;text-align:center;
      font-size:0.58rem;color:var(--g);letter-spacing:.1em;text-transform:lowercase}

    /* ── FOOTER ── */
    footer{padding:1.6rem 1.8rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--d)}
    .f-c{font-size:0.6rem;color:var(--g);letter-spacing:.04em}
    .f-l{display:flex;gap:1.6rem;list-style:none}
    .f-l a{font-size:0.6rem;color:var(--g);text-decoration:none;letter-spacing:.06em;text-transform:lowercase;transition:color .2s}
    .f-l a:hover{color:var(--b)}

    @media(max-width:760px){
      nav{padding:.8rem 1.1rem}.nav-r{gap:1.1rem}
      .collage{width:90vw}
      .home-featured{width:90vw;padding-bottom:3rem}
      .list-wrap{padding:4.5rem 1.1rem 4rem}
      .list-head{grid-template-columns:2.5rem 1fr 5rem}
      .list-head span:last-child,.l-yr{display:none}
      .l-row{grid-template-columns:2rem 1fr 4.5rem}
      .list-head{grid-template-columns:2rem 1fr 4.5rem}
      .proj-header{flex-direction:column;gap:.8rem;padding:4.5rem 1.1rem 1.5rem}
      .proj-meta-right{text-align:left}
      .proj-images{padding:3px 1.1rem 1.1rem;gap:3px}
      .proj-footer-row{padding:1.5rem 1.1rem 2.5rem}
      .about-wrap{grid-template-columns:1fr;display:block}
      .home-video-wrap video{object-fit:contain;}
      .home-hero{background:#fff;}
      .about-photo{position:relative;top:0;padding:4.5rem 1.1rem 0;height:auto;min-height:0}
      .about-photo img{width:100%;height:auto;max-height:70vh;object-fit:cover}
      .about-content{padding:2rem 1.1rem 3rem}
      footer{flex-direction:column;gap:.7rem;padding:1.3rem 1.1rem;text-align:center}
    }
  
    /* ── VIDEO SUPPORT ── */
    .proj-video-wrap{width:100%;background:#000;line-height:0}
    .proj-video-wrap video{width:100%;height:auto;display:block}
    .hp-card video{width:100%;height:auto;display:block}
    .reel-wrap{padding:3.6rem 0 0;background:#000}
    .reel-wrap video{width:100%;height:auto;display:block;max-height:88vh;object-fit:cover;margin:0 auto}