:root{
  --accent:#1b1b1b;
  --ink:#1b1b1b;
  --muted:#666;
  --bg:#d6d4d4;
  --footer:#565656;
  --container:1100px;
  --scrollbar-thumb: rgba(0,0,0,.42);
  --scrollbar-track: rgba(0,0,0,.12);
}

*{box-sizing:border-box;}
html,body{height:100%;}
html{scrollbar-width:thin; scrollbar-color:var(--scrollbar-thumb) transparent;}
body{overflow-y:scroll;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

::-webkit-scrollbar{width:1px; height:1px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb); border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.52);}

@supports (overflow: clip){
  html{overflow-x:clip;}
  body{overflow-x:clip;}
}

img{max-width:100%; height:auto;}

main{flex:1;}

.container{
  width:min(var(--container), calc(100% - clamp(24px, 5vw, 64px)));
  margin:0 auto;
}

.site-header{
  padding:18px 0;
  background:transparent;
  border-bottom:1px solid rgba(0,0,0,.08);
}

 .site-header .container{
   width:min(calc(var(--container) + 260px), calc(100% - clamp(24px, 5vw, 64px)));
   margin:0 auto;
 }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{display:inline-flex; text-decoration:none;}
.brand-mark{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  font-family:"Playfair Display", serif;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--accent);
}

 .brand-mark img{
   width:70%;
   height:70%;
   object-fit:contain;
 }

.nav{display:flex; gap:28px; flex-wrap:wrap; justify-content:flex-end;}
.nav-item{display:inline-flex; flex-direction:column; align-items:center;}
.nav-link{
  text-decoration:none;
  color:var(--ink);
  font-weight:400;
}
.nav-link.active{color:var(--accent);}

 .nav-toggle{
  display:none;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:var(--bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:12px;
  width:44px;
  height:44px;
   padding:0;
   align-items:center;
   justify-content:center;
   cursor:pointer;
 }

 .nav-toggle:focus-visible{
   outline:2px solid rgba(0,0,0,.35);
   outline-offset:3px;
 }

 .nav-toggle-lines{
   width:18px;
   height:12px;
   position:relative;
   display:block;
 }

 .nav-toggle-lines::before,
 .nav-toggle-lines::after{
   content:"";
   position:absolute;
   left:0;
   right:0;
   height:2px;
   background:var(--ink);
   border-radius:999px;
 }

 .nav-toggle-lines::before{top:0; box-shadow:0 5px 0 var(--ink);}
 .nav-toggle-lines::after{bottom:0;}

 .nav-link.active + .nav-gear{opacity:1;}

 .nav-gear{
   width:12px;
   height:12px;
   margin-top:8px;
   display:inline-block;
   opacity:0;
   transition:opacity 220ms ease;
   border-radius:999px;
   position:relative;
   background:var(--accent);
 }

 .nav-gear.is-invite{opacity:1;}

 .nav-gear::before{
   content:"";
   position:absolute;
   inset:-28%;
   border-radius:999px;
   background:
     repeating-conic-gradient(
       from 0deg,
       var(--accent) 0deg 24deg,
       var(--bg) 24deg 36deg
     );
   -webkit-mask:radial-gradient(circle, rgba(0,0,0,0) 0 48%, #000 49%);
   mask:radial-gradient(circle, rgba(0,0,0,0) 0 48%, #000 49%);
 }

 .nav-gear::after{
   content:"";
   position:absolute;
   inset:30%;
   border-radius:999px;
   background:var(--bg);
 }

.hero{padding:clamp(44px, 7vw, 70px) 0 26px;}
.hero-title{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.hero-hi{
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:clamp(56px, 9vw, 96px);
  line-height:1;
  color:var(--accent);
}
.hero-welcome{
  font-style:italic;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink);
  font-size:clamp(18px, 2.1vw, 22px);
}
.hero-sub{
  margin:10px 0 0;
  color:var(--ink);
  font-weight:400;
}
.hero-lede{
  margin:38px 0 0;
  max-width:760px;
  color:#7a7a7a;
  font-weight:600;
  line-height:1.55;
  letter-spacing:.01em;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

 .square{
   width:18px;
   height:18px;
   border-radius:6px;
   background:var(--accent);
   margin:18px auto 0;
 }

.intro-dots{
  position:fixed;
  inset:0;
  background:var(--bg);
  display:grid;
  place-items:center;
  z-index:9999;
}

.intro-dots-grid{
  display:grid;
  grid-template-columns:repeat(13, 12px);
  grid-auto-rows:12px;
  gap:10px;
}

.intro-dots .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(0,0,0,.16);
}

 .play-widget{
   position:fixed;
   right:18px;
   bottom:18px;
   top:auto;
   margin-bottom:0;
   width:86px;
   max-width:calc(100% - 24px);
   padding:10px 10px 8px;
   border-radius:16px;
   border:1px solid rgba(0,0,0,.10);
   background:var(--bg);
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
   z-index:85;
   user-select:none;
   transition:opacity 260ms ease, transform 260ms ease;
   overflow:visible;
 }

 .play-widget.is-hidden{
   opacity:0;
   transform:translateY(10px);
   pointer-events:none;
 }

 .play-widget.is-dragging{
   cursor:grabbing;
 }

 .play-shape{
   width:44px;
   height:44px;
   margin:0 auto;
   border:1px solid rgba(0,0,0,.12);
   background-color:var(--accent);
   box-shadow:0 10px 22px rgba(0,0,0,.12);
   cursor:grab;
   touch-action:none;
   position:relative;
   overflow:hidden;
   transition:background-color 900ms cubic-bezier(.65, 0, .35, 1);
 }

 .play-shape::after{
   content:"";
   position:absolute;
   inset:-20%;
   background:radial-gradient(circle, var(--bg) 0%, var(--cycle-color, transparent) 98%);
   border-radius:999px;
   transform:scale(0);
   opacity:.95;
   pointer-events:none;
 }

 .play-shape.is-color-cycling{background-color:var(--bg); filter:saturate(.8);}
 .play-shape.is-color-cycling.cycle-pulse::after{animation:playCyclePulse 1500ms ease-out forwards;}

 @keyframes playCyclePulse{
   0%{transform:scale(0); opacity:.75;}
   100%{transform:scale(1); opacity:.12;}
 }

 .play-shape:active{cursor:grabbing;}

 .shape-circle{border-radius:999px;}
 .shape-square{border-radius:6px;}
 .shape-rounded{border-radius:16px;}
 .shape-diamond{border-radius:10px; transform:rotate(45deg);}

 .shape-gear{
   border-radius:999px;
   position:relative;
   background:var(--accent);
 }

 .shape-gear::before{
   content:"";
   position:absolute;
   inset:-18%;
   border-radius:999px;
   background:
     repeating-conic-gradient(
       from 0deg,
       var(--accent) 0deg 24deg,
       var(--bg) 24deg 36deg
     );
   -webkit-mask:radial-gradient(circle, rgba(0,0,0,0) 0 48%, #000 49%);
   mask:radial-gradient(circle, rgba(0,0,0,0) 0 48%, #000 49%);
   pointer-events:none;
 }

 .shape-gear::after{
   content:"";
   position:absolute;
   inset:28%;
   border-radius:999px;
   background:var(--bg);
   box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
   pointer-events:none;
 }

 .play-hint{
   margin-top:8px;
   font-size:11px;
   letter-spacing:.08em;
   text-transform:uppercase;
   color:var(--muted);
   text-align:center;
 }

 .facts-popover{
   display:none;
   position:absolute;
   right:0;
   bottom:calc(100% + 10px);
   margin-top:0;
   width:min(260px, calc(100vw - 24px));
   background:var(--bg);
   border-radius:14px;
   border:1px solid rgba(0,0,0,.12);
   padding:12px 12px 10px;
   box-shadow:0 16px 44px rgba(0,0,0,.14);
   z-index:90;
 }

 @supports (width: 100dvw){
  .facts-popover{width:min(260px, calc(100dvw - 24px));}
 }

 .facts-popover.is-open{display:block;}

 .facts-popover-title{
   font-family:"Playfair Display", serif;
   font-weight:700;
   color:var(--accent);
   margin-bottom:8px;
   font-size:14px;
 }

 .facts-popover-body{
   color:var(--ink);
   line-height:1.6;
   font-size:13px;
 }

 .theme-picker{
   position:fixed;
   left:18px;
   bottom:18px;
   width:min(320px, calc(100% - 36px));
   background:var(--bg);
   border:1px solid rgba(0,0,0,.12);
   border-radius:16px;
   padding:12px 12px 10px;
   box-shadow:0 22px 60px rgba(0,0,0,.14);
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
   z-index:80;
 }

 .theme-picker-title{
   font-family:"Playfair Display", serif;
   font-weight:700;
   color:var(--ink);
   margin-bottom:4px;
 }

 .theme-picker-hint{
   color:var(--muted);
   font-size:13px;
   line-height:1.4;
 }

 .theme-picker-row{
   display:flex;
   gap:10px;
   align-items:center;
   margin-top:10px;
   flex-wrap:wrap;
 }

 .theme-swatch{
   width:22px;
   height:22px;
   border-radius:999px;
   border:1px solid rgba(0,0,0,.18);
   cursor:pointer;
 }

 .theme-picker-custom{
   display:flex;
   align-items:center;
   gap:10px;
   margin-top:10px;
 }

 .theme-picker-custom-label{font-size:13px; color:var(--muted);}
 .theme-picker-input{width:38px; height:28px; padding:0; border:none; background:transparent;}

 .theme-picker-dismiss{
   margin-top:10px;
   background:transparent;
   border:none;
   color:var(--muted);
   text-decoration:underline;
   cursor:pointer;
   padding:0;
 }

 .facts-popover .theme-picker-inline{
   position:static;
   left:auto;
   bottom:auto;
   width:auto;
   background:transparent;
   border:none;
   border-radius:0;
   padding:0;
   box-shadow:none;
   backdrop-filter:none;
   -webkit-backdrop-filter:none;
 }

.section-divider{
  width:min(var(--container), calc(100% - clamp(24px, 5vw, 64px)));
  margin:0 auto;
  height:1px;
  background:rgba(0,0,0,.08);
}

.blog-post{padding-bottom:22px;}

.blog-post-image{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  object-fit:cover;
  margin:0 0 14px;
  cursor:zoom-in;
}

.blog-post-title{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size:22px;
  line-height:1.2;
  color:var(--accent);
}

.blog-post-meta{
  margin-top:6px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(0,0,0,.62);
}

.blog-post-body{margin-top:12px;}

.blog-post-images{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.blog-post-image-small{
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  object-fit:cover;
  cursor:zoom-in;
}

.two-col{padding:clamp(26px, 4vw, 34px) 0 clamp(44px, 6vw, 60px);}
.two-col-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(34px, 6vw, 90px);
  align-items:start;
}
.info-card{
  background:transparent;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:18px 18px 20px;
}
.section-title{
  margin:0 0 14px;
  font-family:"Playfair Display", serif;
  font-size:20px;
  font-weight:700;
  color:var(--accent);
}
.section-title-right{text-align:right;}

.body-text{
  margin:0;
  color:var(--ink);
  line-height:1.8;
  font-size:clamp(14px, 1.6vw, 15px);
  overflow-wrap:anywhere;
}
.body-text-center{text-align:center;}

.two-col-right{padding-top:2px;}

.resume-wrap{display:flex; justify-content:center; padding-top:clamp(26px, 4vw, 40px);}
 .btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   padding:12px 44px;
   background:var(--bg);
   color:var(--accent);
   text-decoration:none;
   font-weight:600;
   border:1px solid rgba(0,0,0,.10);
   border-radius:12px;
   transition:transform .15s ease, background-color .15s ease;
 }
 @supports (color: color-mix(in srgb, white, black)){
  .btn{background:color-mix(in srgb, var(--bg) 83%, #fff 17%);}
 }
 .btn:hover{
   background:rgba(255,255,255,.23);
   transform:translateY(-1px);
 }
 @supports (color: color-mix(in srgb, white, black)){
  .btn:hover{background:color-mix(in srgb, var(--bg) 81%, #fff 19%);}
 }

.page-title{
  margin:0;
  font-family:"Playfair Display", serif;
  font-weight:700;
  font-size:clamp(54px, 7vw, 86px);
  line-height:1;
  color:var(--accent);
}

.hero-project{padding:clamp(52px, 7vw, 78px) 0 22px;}

 .portfolio{padding:clamp(38px, 6vw, 64px) 0 clamp(44px, 6vw, 72px);}

 .portfolio-list{
   display:flex;
   flex-direction:column;
   gap:clamp(44px, 7vw, 78px);
   margin-top:clamp(28px, 5vw, 56px);
 }

 .portfolio-item{
   display:grid;
   grid-template-columns:minmax(220px, 320px) 1fr;
   gap:clamp(24px, 5vw, 64px);
   align-items:center;
 }

 .portfolio-item.is-open{
   position:relative;
   z-index:110;
   align-items:start;
   width:100%;
   margin-left:calc(-1 * clamp(24px, 5vw, 64px));
   margin-right:calc(-1 * clamp(24px, 5vw, 64px));
   padding-left:clamp(24px, 5vw, 64px);
   padding-right:clamp(24px, 5vw, 64px);
   grid-template-columns:minmax(220px, 320px) 1fr;
   grid-template-rows:auto auto auto;
 }

 .portfolio-item.is-open .portfolio-meta{grid-column:1; grid-row:1 / span 3;}
 .portfolio-item.is-open .portfolio-link{grid-column:2; grid-row:1;}
 .portfolio-item.is-open .portfolio-open-thumbs{grid-column:2; grid-row:3;}

 .portfolio-meta{
   text-align:center;
 }

 .portfolio-badge{
   width:52px;
   height:52px;
   margin:0 auto 18px;
   border-radius:12px;
   background:rgba(0,0,0,.04);
   border:1px solid rgba(0,0,0,.10);
   display:grid;
   place-items:center;
   overflow:hidden;
 }

 .portfolio-badge img{width:100%; height:100%; object-fit:cover; display:block;}

 .portfolio-title{
   margin:0;
   font-family:"Playfair Display", serif;
   font-weight:700;
   font-size:clamp(18px, 2.1vw, 24px);
   line-height:1.12;
   color:var(--accent);
 }

 .portfolio-loc{
   margin:10px 0 0;
   color:rgba(0,0,0,.55);
   font-size:12px;
   letter-spacing:.12em;
   text-transform:uppercase;
 }

 .portfolio-item.is-open .portfolio-loc{margin-bottom:24px;}

 .portfolio-item.is-open .portfolio-open-desc{margin-top:14px;}

 .portfolio-media{
   width:100%;
   aspect-ratio: 16 / 9;
   border-radius:6px;
   overflow:hidden;
   border:1px solid rgba(0,0,0,.10);
   background:rgba(0,0,0,.04);
   position:relative;
 }

 .portfolio-media::after{
  content:"∨";
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  font-weight:800;
  font-size:39px;
  line-height:1;
  color:rgba(255,255,255,.95);
  text-shadow:0 10px 22px rgba(0,0,0,.35);
  opacity:.95;
  transition:opacity 160ms ease, transform 160ms ease;
  pointer-events:none;
  animation:lnChevronPulseBottom 1.6s ease-in-out infinite;
 }
 
 @keyframes lnChevronPulseBottom{
  0%, 100%{transform:translateX(-50%) scale(1); opacity:.80;}
  50%{transform:translateX(-50%) scale(1.18); opacity:1;}
 }

 @keyframes lnChevronPulseSide{
  0%, 100%{transform:translateY(-50%) scale(1); opacity:.80;}
  50%{transform:translateY(-50%) scale(1.18); opacity:1;}
 }

 @media (max-width: 720px){
  .portfolio-media::after{
   content:"...";
   left:auto;
   bottom:auto;
   right:12px;
   top:50%;
   transform:translateY(-50%);
   font-size:26px;
   letter-spacing:.18em;
   color:rgba(0,0,0,.72);
   text-shadow:0 10px 22px rgba(255,255,255,.22);
   opacity:1;
   animation:lnChevronPulseSide 1.6s ease-in-out infinite;
  }
 }

 @media (prefers-reduced-motion: reduce){
  .portfolio-media::after{animation:none;}
 }

 .portfolio-link .portfolio-media{
   transform:scale(.96);
 }

 .portfolio-media .ln-slider{
  width:100%;
  height:100%;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
 }

 .portfolio-media .ln-slider::-webkit-scrollbar{width:0;height:0;}

 .portfolio-media .ln-slider img{
  width:100%;
  height:100%;
  flex:0 0 100%;
  object-fit:cover;
  display:block;
  scroll-snap-align:start;
 }

 .portfolio-media img{width:100%; height:100%; object-fit:cover; display:block;}

 .portfolio-item.is-open .portfolio-media img{
   object-fit:cover;
 }

 .portfolio-link{
   display:block;
   text-decoration:none;
   color:inherit;
 }

 .portfolio-link:focus-visible{
   outline:2px solid rgba(0,0,0,.35);
   outline-offset:4px;
   border-radius:8px;
 }

 .portfolio-link .portfolio-media{
   transition:transform 180ms ease, box-shadow 180ms ease;
 }

 .portfolio-link:hover .portfolio-media{
   transform:translateY(-2px);
   box-shadow:0 18px 44px rgba(0,0,0,.10);
 }

 .portfolio-link:hover .portfolio-media::after,
 .portfolio-link:focus-visible .portfolio-media::after{opacity:1;}

 .portfolio-media.is-opening{
   transition-duration:2200ms;
   transition-timing-function:cubic-bezier(.75, 0, .18, 1);
   transform:translateY(-2px) scale(1);
   box-shadow:0 26px 70px rgba(0,0,0,.16);
 }

 .portfolio-backdrop{
   position:fixed;
   inset:0;
   z-index:60;
   background:rgba(0,0,0,.18);
   opacity:0;
   pointer-events:none;
   transition:opacity 2200ms cubic-bezier(.75, 0, .18, 1);
 }

 .portfolio-backdrop.is-open{
   opacity:1;
   pointer-events:none;
 }

 .portfolio-item.is-open .portfolio-link{position:relative; z-index:100;}
 .portfolio-item.is-open .portfolio-meta{position:relative; z-index:100;}

 .portfolio-item.is-open .portfolio-open-desc{position:relative; z-index:100;}
 .portfolio-item.is-open .portfolio-open-thumbs{position:relative; z-index:100;}

 .portfolio-open-thumbs,
 .portfolio-open-thumb{pointer-events:auto;}

 .portfolio-open-body{
   margin-top:0;
   font-size:13.5px;
   line-height:1.8;
   color:rgba(0,0,0,.72);
   max-width:260px;
 }

 .portfolio-item.is-open .portfolio-open-body{max-width:420px;}

 .portfolio-open-skills{
  margin-top:18px;
  font-size:13.5px;
  line-height:1.8;
  color:rgba(0,0,0,.72);
 }

 .portfolio-open-desc{
  display:none;
  text-align:center;
 }
 
 .portfolio-item.is-open .portfolio-open-desc{display:block;}

 @media (max-width: 720px){
  .portfolio-meta{ text-align:left; }

  .portfolio-open-desc{
   display:none;
   text-align:left;
  }

  .portfolio-item.is-open .portfolio-open-desc{display:block;}

  .portfolio-item:not(.is-open) .portfolio-open-body{
   display:-webkit-box;
   -webkit-box-orient:vertical;
   line-clamp:3;
   -webkit-line-clamp:3;
   overflow:hidden;
   position:relative;
   padding-bottom:14px;
  }

  .portfolio-item:not(.is-open) .portfolio-open-body::after{content:none;}

  .portfolio-item.is-open .portfolio-open-body{
   display:block;
   line-clamp:unset;
   -webkit-line-clamp:unset;
   overflow:visible;
   padding-bottom:0;
  }

  .portfolio-item.is-open .portfolio-open-body::after{content:none;}

  .portfolio-item.is-open .portfolio-open-desc::after{
   content:"‹";
   position:absolute;
   right:0;
   top:0;
   font-weight:800;
   font-size:22px;
   line-height:1;
   color:rgba(0,0,0,.78);
   pointer-events:none;
  }

  .portfolio-item.is-open .portfolio-media::after{content:none;}
 }

 .portfolio-open-thumbs{
   display:grid;
   grid-template-columns:repeat(2, minmax(0, 1fr));
   gap:14px;
   grid-column:2;
   margin-top:12px;
   max-width:100%;
   overflow:visible;
   display:none;
 }

 .portfolio-item.is-open .portfolio-open-thumbs{display:grid;}

 @media (max-width: 720px){
  .portfolio-item.is-open .portfolio-open-thumbs{display:none;}
 }

 .portfolio-open-thumb{
   width:100%;
   aspect-ratio:16 / 9;
   border-radius:6px;
   overflow:hidden;
   border:1px solid rgba(0,0,0,.14);
   background:rgba(0,0,0,.04);
   cursor:pointer;
   padding:0;
   position:relative;
   transform:translateY(0) scale(1);
   transform-origin:center;
   transition:transform 420ms cubic-bezier(.2, .8, .2, 1), box-shadow 420ms cubic-bezier(.2, .8, .2, 1);
 }

 .portfolio-open-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

 .portfolio-open-thumb:hover,
 .portfolio-open-thumb:focus-visible{
   z-index:5;
   transform:translateY(-10px) scale(1.18);
   box-shadow:0 32px 86px rgba(0,0,0,.22);
 }

 .portfolio-open-thumb-label{
   position:absolute;
   left:10px;
   top:10px;
   background:var(--bg);
   border:1px solid rgba(0,0,0,.10);
   border-radius:10px;
   padding:6px 10px;
   font-size:10px;
   letter-spacing:.08em;
   text-transform:uppercase;
   color:rgba(0,0,0,.75);
   line-height:1.2;
 }

 .thumb-lightbox{
   position:fixed;
   inset:0;
   z-index:200;
   display:flex;
   align-items:center;
   justify-content:center;
   padding:clamp(18px, 4vw, 56px);
   background:rgba(0,0,0,.42);
   opacity:0;
   pointer-events:none;
   overflow:hidden;
   transition:opacity 420ms cubic-bezier(.2, .8, .2, 1);
 }

 .thumb-lightbox.is-open{
   opacity:1;
   pointer-events:auto;
 }

 .thumb-lightbox-frame{
   width:min(980px, 92vw);
   max-height:86vh;
   border-radius:10px;
   overflow:hidden;
   background:rgba(255,255,255,.02);
   box-shadow:0 40px 120px rgba(0,0,0,.35);
   transform:translateY(12px) scale(.92);
   transition:transform 520ms cubic-bezier(.75, 0, .18, 1);
   display:flex;
   align-items:center;
   justify-content:center;
 }

 .thumb-lightbox.is-open .thumb-lightbox-frame{
   transform:translateY(0) scale(1);
 }

 .thumb-lightbox-img{
   max-width:100%;
   max-height:86vh;
   width:auto;
   height:auto;
   object-fit:contain;
   display:block;
   background:rgba(0,0,0,.12);
 }

 html.thumb-lightbox-open,
 body.thumb-lightbox-open{
   overflow:hidden !important;
 }

 body.thumb-lightbox-open{
   position:fixed;
   width:100%;
 }

 .portfolio-overlay{
   position:absolute;
   inset:0;
   display:flex;
   align-items:stretch;
   opacity:0;
   transform:scale(.985);
   transition:opacity 2200ms cubic-bezier(.2, .8, .2, 1), transform 2200ms cubic-bezier(.2, .8, .2, 1);
 }

 .portfolio-overlay.is-open{
   opacity:1;
   transform:scale(1);
 }

 .portfolio-overlay-shade{
   position:absolute;
   inset:0;
   background:linear-gradient(90deg, rgba(214,212,212,.92) 0 28%, rgba(214,212,212,0) 58%);
 }

 .portfolio-overlay-meta{
   position:relative;
   z-index:2;
   width:min(320px, 36%);
   padding:18px 18px 18px 18px;
   display:flex;
   flex-direction:column;
   justify-content:flex-start;
   gap:10px;
 }

 .portfolio-overlay-title{
   margin:0;
   font-family:"Playfair Display", serif;
   font-weight:700;
   font-size:clamp(20px, 2.2vw, 26px);
   line-height:1.12;
   color:var(--accent);
 }

 .portfolio-overlay-loc{
   margin:0;
   color:rgba(0,0,0,.55);
   font-size:12px;
   letter-spacing:.12em;
   text-transform:uppercase;
 }

 .portfolio-overlay-body{
   margin-top:6px;
   font-size:13px;
   line-height:1.7;
   color:rgba(0,0,0,.78);
 }

 .portfolio-overlay-thumbs{
   position:absolute;
   right:16px;
   bottom:16px;
   z-index:3;
   display:flex;
   gap:14px;
   align-items:flex-end;
 }

 .portfolio-overlay-thumb{
   width:min(220px, 42vw);
   aspect-ratio:16 / 9;
   border-radius:6px;
   overflow:hidden;
   border:1px solid rgba(0,0,0,.14);
   background:var(--bg);
   box-shadow:0 20px 60px rgba(0,0,0,.18);
   cursor:pointer;
   padding:0;
   position:relative;
 }

 .portfolio-overlay-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

 .portfolio-overlay-thumb-label{
   position:absolute;
   left:10px;
   top:10px;
   background:var(--bg);
   border:1px solid rgba(0,0,0,.10);
   border-radius:10px;
   padding:6px 10px;
   font-size:10px;
   letter-spacing:.08em;
   text-transform:uppercase;
   color:rgba(0,0,0,.75);
   line-height:1.2;
 }

 .portfolio-item.is-open .portfolio-link:focus-visible{
   outline-color:rgba(0,0,0,.45);
 }

 @media (max-width: 900px){
  .portfolio-item.is-open{
    width:auto;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
    grid-template-columns:1fr;
  }
  .portfolio-item{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .portfolio-meta{order:0;}
  .portfolio-link{order:1;}
  .portfolio-open-desc{order:2;}
  .portfolio-open-thumbs{order:3;}
  .portfolio-link .portfolio-media{transform:none;}
  .portfolio-open-desc{display:block;}
  .portfolio-open-thumbs{display:flex; grid-column:auto; justify-content:flex-end;}
 .portfolio-overlay-thumbs{position:static; padding:14px 0 0; justify-content:center;}
 }

 .project-modal{
   position:fixed;
   inset:0;
   z-index:120;
   display:none;
 }

 .project-modal.is-open{display:block;}

 .project-modal-backdrop{
   position:absolute;
   inset:0;
   background:rgba(0,0,0,.32);
   opacity:0;
   transition:opacity 780ms cubic-bezier(.2, .8, .2, 1);
 }

 .project-modal.is-open .project-modal-backdrop{opacity:1;}

 .project-modal-panel{
   position:absolute;
   left:50%;
   top:50%;
   transform:translate(-50%, -50%) scale(.96);
   width:min(1100px, calc(100% - 36px));
   max-height:calc(100% - 48px);
   overflow:auto;
   background:var(--bg);
   border-radius:14px;
   border:1px solid rgba(0,0,0,.12);
   box-shadow:0 34px 120px rgba(0,0,0,.24);
   opacity:0;
   transition:transform 780ms cubic-bezier(.2, .8, .2, 1), opacity 780ms cubic-bezier(.2, .8, .2, 1);
 }

 .project-modal.is-open .project-modal-panel{
   transform:translate(-50%, -50%) scale(1);
   opacity:1;
 }

 .project-modal-close{
   position:absolute;
   right:14px;
   top:14px;
   width:38px;
   height:38px;
   border-radius:999px;
   border:1px solid rgba(0,0,0,.12);
   background:var(--bg);
   cursor:pointer;
   display:grid;
   place-items:center;
 }

 .project-modal-close:focus-visible{outline:2px solid rgba(0,0,0,.35); outline-offset:3px;}

 .project-modal-content{padding:clamp(18px, 3vw, 30px);}

 .portfolio-media.is-placeholder{
   background:linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
 }

.experiences{padding:10px 0 clamp(44px, 6vw, 60px);}
.exp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 64px) clamp(34px, 7vw, 120px);
}
.exp-card{min-height:160px;}
.exp-media{
  width:100%;
  aspect-ratio: 16 / 9;
  background:transparent;
  border:1px solid rgba(0,0,0,.12);
  margin:10px 0 14px;
}
.exp-card-right .exp-media{margin-left:auto;}
.exp-card-center .exp-media{max-width:680px; margin-left:auto; margin-right:auto;}
.exp-title{
  margin:0 0 14px;
  font-family:"Playfair Display", serif;
  font-size:18px;
  font-weight:700;
  color:var(--accent);
}
.exp-title-right{text-align:right;}
.exp-title-center{text-align:center;}
.exp-card-right .body-text{max-width:520px; margin-left:auto;}
.exp-card-center{grid-column:1 / -1; max-width:680px; margin:0 auto; text-align:center;}

 .site-footer{
   background:var(--footer);
   color:#fff;
   padding:22px 0 26px;
   position:relative;
   z-index:95;
   overflow-y:visible;
   overflow-x:hidden;
 }

 @supports (overflow: clip){
  .site-footer{overflow-x:clip;}
 }
 .footer-inner{
   text-align:center;
   display:flex;
   flex-direction:column;
   gap:6px;
   position:relative;
   z-index:2;
   max-width:100%;
   overflow:visible;
 }
.footer-name{
  font-family:"Playfair Display", serif;
  font-weight:700;
  letter-spacing:.03em;
}
 .site-footer .footer-email,
 .site-footer .footer-email:link,
 .site-footer .footer-email:visited,
 .site-footer .footer-email:hover,
 .site-footer .footer-email:active{
   opacity:.95;
   font-size:14px;
   color:#fff;
   text-decoration:none;
   max-width:100%;
   overflow-wrap:anywhere;
 }
.site-footer .footer-email:hover{text-decoration:underline;}
.site-footer .footer-email:focus-visible{outline:2px solid rgba(255,255,255,.75); outline-offset:3px; border-radius:6px;}
 .footer-location{
   opacity:.95;
   font-size:14px;
   color:#fff;
   text-decoration:none;
   display:inline-flex;
   align-items:center;
   gap:8px;
   justify-content:center;
   flex-wrap:wrap;
   max-width:100%;
   overflow-wrap:anywhere;
 }
 .footer-location-pin{flex:0 0 auto;}
 .footer-location span{min-width:0;}
.footer-location-pin{color:#ff4d4d; display:inline-flex;}
.footer-location:hover{text-decoration:underline;}
 .footer-links{margin-top:4px; font-size:11px; letter-spacing:.12em;}
 .footer-link{
  color:#fff;
  text-decoration:none;
  display:inline;
 }
 .footer-link:hover{text-decoration:underline;}
 .footer-link:focus-visible{outline:2px solid rgba(255,255,255,.75); outline-offset:3px; border-radius:6px;}
 .footer-sep{opacity:.85; padding:0 6px; color:transparent;}
 .footer-sep::before{content:"|"; color:#fff;}

 .footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  position:relative;
  z-index:3;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  min-height:1px;
  max-width:100%;
  overflow:visible;
 }

 .site-footer .footer-link{display:inline-block;}

@media (max-width: 900px){
  .header-inner{align-items:flex-start;}
  .nav{justify-content:flex-start;}
  .two-col-grid{grid-template-columns:1fr; gap:34px;}
  .section-title-right{text-align:left;}
  .body-text-center{text-align:left;}
  .portfolio-item{grid-template-columns:1fr;}
  .exp-grid{grid-template-columns:1fr; gap:34px;}
  .exp-card-right .body-text{margin-left:0;}
  .exp-title-right{text-align:left;}
}

 .project-detail{padding:clamp(28px, 5vw, 54px) 0 clamp(44px, 6vw, 72px);}

 .project-detail-grid{
   display:grid;
   grid-template-columns:minmax(170px, 230px) minmax(620px, 1fr);
   gap:clamp(16px, 2.6vw, 28px) clamp(12px, 2.2vw, 24px);
   align-items:start;
 }

 .project-detail-meta{
   text-align:center;
 }

 .project-detail-badge{
   width:52px;
   height:52px;
   border-radius:12px;
   background:rgba(0,0,0,.04);
   border:1px solid rgba(0,0,0,.10);
   display:grid;
   place-items:center;
   overflow:hidden;
 }

 .project-detail-badge img{width:100%; height:100%; object-fit:cover; display:block;}

 .project-detail-title{
   margin:18px 0 0;
   font-family:"Playfair Display", serif;
   font-weight:700;
   font-size:clamp(20px, 2.3vw, 26px);
   line-height:1.15;
   color:var(--accent);
 }

 .project-detail-loc{
   margin:10px 0 0;
   color:rgba(0,0,0,.55);
   font-size:12px;
   letter-spacing:.12em;
   text-transform:uppercase;
 }

 .project-detail-hero{
   width:100%;
   aspect-ratio: 4 / 3;
   border-radius:6px;
   overflow:hidden;
   border:1px solid rgba(0,0,0,.10);
   background:rgba(0,0,0,.04);
   position:relative;
   grid-column:2;
 }
 
 .project-detail-hero::after{content:none;}

 .project-detail-hero .ln-slider{
  width:100%;
  height:100%;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
 }

 .project-detail-hero .ln-slider::-webkit-scrollbar{width:0;height:0;}

 .project-detail-hero .ln-slider img{
  width:100%;
  height:100%;
  flex:0 0 100%;
  object-fit:cover;
  display:block;
  scroll-snap-align:start;
 }

 .project-detail-hero.is-placeholder{
   background:linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
 }

 .project-detail-body{
   grid-column:2;
 }

 .project-detail-text{
   max-width:360px;
   color:var(--ink);
   line-height:1.8;
   font-size:13px;
 }

 .project-detail-thumbs{
  display:none;
 }

 @media (max-width: 900px){
  .project-detail-grid{grid-template-columns:1fr;}
  .project-detail-meta{text-align:left;}
  .project-detail-hero{grid-column:auto;}
  .project-detail-body{grid-column:auto;}
 }

 .project-detail-thumb{
   width:220px;
   max-width:calc((100% - 18px) / 2);
   aspect-ratio: 16 / 9;
   border-radius:6px;
   overflow:hidden;
   border:1px solid rgba(0,0,0,.10);
   background:rgba(0,0,0,.04);
   padding:0;
   cursor:pointer;
   position:relative;
 }

 .project-detail-thumb-label{
   position:absolute;
   left:10px;
   top:10px;
   max-width:calc(100% - 20px);
   background:var(--bg);
   border:1px solid rgba(0,0,0,.10);
   border-radius:10px;
   padding:6px 10px;
   font-size:10px;
   letter-spacing:.08em;
   text-transform:uppercase;
   color:rgba(0,0,0,.75);
   line-height:1.2;
 }

 .project-detail-thumb-note{
   width:220px;
   max-width:calc((100% - 18px) / 2);
   min-height:calc(220px * 9 / 16);
   border-radius:6px;
   border:1px solid rgba(0,0,0,.10);
   background:var(--bg);
   display:flex;
   align-items:center;
   justify-content:center;
   padding:14px;
   text-align:center;
   color:rgba(0,0,0,.70);
   font-size:12px;
   line-height:1.4;
 }

 .project-detail-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

 .project-detail-thumb:focus-visible{
   outline:2px solid rgba(0,0,0,.35);
   outline-offset:4px;
 }

 @media (max-width: 900px){
   .project-detail-grid{grid-template-columns:1fr;}
   .project-detail-body{grid-column:auto;}
   .project-detail-thumbs{grid-column:auto;}
   .project-detail-meta{text-align:center;}
   .project-detail-badge{margin-left:auto; margin-right:auto;}
   .project-detail-text{max-width:none;}
   .project-detail-thumbs{margin-top:14px;}
 }

 @media (max-width: 520px){
  .site-header{padding:14px 0;}
  .header-inner{gap:14px;}
  .nav-link{font-size:14px;}
  .nav-gear{margin-top:6px;}

  .page-title{font-size:clamp(38px, 10vw, 54px);}
  .hero-project{padding:clamp(34px, 10vw, 56px) 0 18px;}
  .portfolio{padding:clamp(28px, 8vw, 44px) 0 clamp(34px, 9vw, 56px);}

  .blog-post-images{grid-template-columns:1fr;}

  .footer-links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
  .footer-sep{display:none;}
  .footer-links{margin-top:10px; font-size:12px; letter-spacing:.10em; gap:12px;}

  .play-widget{right:12px; bottom:12px; width:78px;}
  .play-hint{font-size:10px;}

  .project-detail-thumbs{justify-content:center;}
  .project-detail-thumb,
  .project-detail-thumb-note{width:100%; max-width:100%;}
 }

 @media (max-width: 720px){
  .header-inner{position:relative;}
  .nav-toggle{display:inline-flex;}
  .nav{display:none;}
  .nav.is-open{
   display:flex;
   position:absolute;
   top:calc(100% + 12px);
   right:0;
   left:auto;
   flex-direction:column;
   align-items:flex-start;
   gap:0;
   padding:14px 14px 12px;
   border-radius:14px;
   border:1px solid rgba(0,0,0,.10);
   background:var(--bg);
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
   box-shadow:0 24px 70px rgba(0,0,0,.18);
   z-index:600;
   min-width:190px;
  }
  .nav.is-open .nav-item{
   align-items:flex-start;
   width:100%;
   padding:10px 2px;
   border-bottom:1px solid rgba(0,0,0,.08);
  }
  .nav.is-open .nav-item:last-child{border-bottom:none;}
  .nav.is-open .nav-gear{display:none;}
 }