/* NAV */
nav{
  position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 5vw; font-size:13px; letter-spacing:.05em;
  mix-blend-mode:difference;
}
nav .links{display:flex; gap:28px;}
nav a{color:var(--ink); text-decoration:none; opacity:.75; transition:opacity .2s;}
nav a:hover{opacity:1;}

/* HERO */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:0 5vw; position:relative; overflow:hidden;
}
.hero .eyebrow{color:var(--ink-dim); font-size:13px; letter-spacing:.15em; text-transform:uppercase; margin-bottom:18px;}
.hero h1{
  font-size:clamp(2.6rem,8vw,6.5rem); line-height:.98; font-weight:600; letter-spacing:-0.02em;
}
.hero h1 .split{color:var(--ink-dim); font-weight:400; font-style:italic;}
.hero .sub{max-width:520px; margin-top:26px; color:var(--ink-dim); font-size:clamp(15px,2vw,18px); line-height:1.5;}
.hero .scroll-cue{position:absolute; bottom:34px; left:5vw; font-size:12px; color:var(--ink-dim); letter-spacing:.1em;}
.hero .scroll-cue span{display:inline-block; animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.hero .accent-dot{position:absolute; width:10px; height:10px; border-radius:50%; background:var(--accent);}

/* SECTION shell (home-specific padding — case studies use their own) */
section{padding:min(14vh,120px) 5vw;}
.sec-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:56px; flex-wrap:wrap; gap:10px;}
.sec-head .num{color:var(--ink-dim); font-size:13px; letter-spacing:.1em;}
.sec-head h2{font-size:clamp(1.8rem,4vw,3rem); font-weight:600; letter-spacing:-0.01em;}
.reveal{transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}

/* ABOUT */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
@media (max-width:820px){.about-grid{grid-template-columns:1fr;}}
.about-grid p{font-size:clamp(17px,2.2vw,22px); line-height:1.6; color:var(--ink);}
.about-grid p + p{margin-top:20px; color:var(--ink-dim);}
.about-grid .tag-row{margin-top:30px;}
/* Polaroid-style print frame for the About photo — off-white "paper"
   mat (reuses --ink so it stays in-palette), slight tilt, small pin. */
.polaroid-stack{position:relative; width:100%; max-width:320px; margin:0 auto; display:flex; justify-content:center;}
.polaroid{
  background:var(--ink); padding:14px 14px 0; border-radius:3px;
  box-shadow:0 20px 44px rgba(0,0,0,.5);
}
.polaroid--portrait{position:relative; width:100%; max-width:260px; transform:rotate(-3deg); z-index:1;}
.polaroid-pin{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:13px; height:13px; border-radius:50%; background:var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,.4); z-index:2;
}
.about-photo{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:1px; display:block;}
.polaroid-caption{
  display:block; padding:14px 4px 20px; font-style:italic; font-size:13px;
  color:var(--bg2); text-align:center; letter-spacing:.02em;
}

/* WORK */
.work-list{display:flex; flex-direction:column;}
.work-item{
  display:grid; grid-template-columns:80px 1.2fr 1fr; gap:24px; align-items:center;
  padding:30px 0; border-top:1px solid var(--line); cursor:default;
  transition:padding-left .25s ease, background .25s ease;
  transform-style:preserve-3d; text-decoration:none; color:inherit;
}
.work-item:hover{padding-left:14px; background:linear-gradient(90deg, rgba(215,255,63,0.05), transparent);}
.work-item:first-child{border-top:none;}
@media (max-width:760px){.work-item{grid-template-columns:1fr; gap:8px;}}
.work-item .idx{color:var(--ink-dim); font-size:13px;}
.work-item h3{font-size:clamp(1.2rem,2.4vw,1.7rem); font-weight:600;}
.work-item p{color:var(--ink-dim); font-size:14px; margin-top:6px; line-height:1.5;}
.work-item .meta{font-size:12px; letter-spacing:.08em; color:var(--ink-dim); text-transform:uppercase; text-align:right;}
@media (max-width:760px){.work-item .meta{text-align:left;}}
.work-item .go{color:var(--accent); font-size:13px; opacity:0; transform:translateX(-6px); transition:opacity .25s,transform .25s;}
.work-item:hover .go{opacity:1; transform:translateX(0);}

/* PHOTOGRAPHY */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.gallery figure{
  position:relative; overflow:hidden; border-radius:6px; aspect-ratio:1/1;
  display:flex; align-items:flex-end; padding:14px; cursor:pointer; transition:transform .3s;
  background:linear-gradient(160deg,#1a1a1d,#2a2a2e);
}
.gallery figure:hover{transform:scale(.97);}
.gallery figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.gallery figure figcaption, .gallery figure .count{position:relative; z-index:1;}
.gallery figure:has(img)::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%); z-index:0;}
.gallery figure:nth-child(1){grid-column:span 3; grid-row:span 2; aspect-ratio:auto;}
.gallery figure:nth-child(2){grid-column:span 3;}
.gallery figure:nth-child(3){grid-column:span 2;}
.gallery figure:nth-child(4){grid-column:span 2;}
.gallery figure:nth-child(5){grid-column:span 2;}
@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr);}
  .gallery figure, .gallery figure:nth-child(n){grid-column:span 1; grid-row:auto; aspect-ratio:1/1;}
}
.gallery figcaption{font-size:12px; color:var(--ink-dim); letter-spacing:.05em;}
.gallery figure .count{font-size:11px; color:var(--ink-dim); margin-top:4px;}
.gallery .placeholder-note{position:absolute; top:12px; right:12px; font-size:10px; color:var(--ink-dim); opacity:.6;}

/* CONTACT / FOOTER */
footer{padding:min(14vh,110px) 5vw 60px;}
footer h2{font-size:clamp(2.2rem,7vw,5rem); font-weight:600; letter-spacing:-0.02em; margin-bottom:30px;}
footer a.email{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent);}
.foot-row{display:flex; justify-content:space-between; margin-top:70px; color:var(--ink-dim); font-size:13px; flex-wrap:wrap; gap:14px;}
.foot-row a{color:var(--ink-dim); text-decoration:none; margin-right:18px;}
.foot-row a:hover{color:var(--ink);}

/* CURSOR */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--accent); pointer-events:none; z-index:999; mix-blend-mode:difference;
  transform:translate(-50%,-50%); transition:width .2s,height .2s,background .2s;
}
.cursor-dot.big{width:46px; height:46px; background:var(--accent2);}
@media (hover:none){.cursor-dot{display:none;}}

/* RESUME BUTTON — home-specific bits on top of the shared base in base.css */
.resume-btn{letter-spacing:.03em;}
.resume-btn .arrow{transition:transform .3s;}
.resume-btn:hover .arrow{transform:translate(3px,3px);}

/* TIMELINE */
.timeline{position:relative; padding-left:34px;}
.timeline::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line);
}
.timeline .fill{
  position:absolute; left:5px; top:6px; width:2px; height:0%; background:var(--accent);
  transition:height .1s linear;
}
.t-item{position:relative; padding-bottom:52px;}
.t-item:last-child{padding-bottom:0;}
.t-dot{
  position:absolute; left:-34px; top:2px; width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--ink-dim); transition:background .3s,border-color .3s,transform .3s;
}
.t-item.in .t-dot{background:var(--accent); border-color:var(--accent); transform:scale(1.15);}
.t-year{color:var(--ink-dim); font-size:13px; letter-spacing:.08em; margin-bottom:6px;}
.t-item h3{font-size:clamp(1.1rem,2.2vw,1.5rem); font-weight:600;}
.t-item p{color:var(--ink-dim); font-size:14px; margin-top:6px; max-width:560px; line-height:1.5;}
.t-item.in h3{color:var(--accent2);}
.t-item a{color:var(--accent2);}

/* LIGHTBOX / ALBUM SCREEN */
.lightbox{
  position:fixed; inset:0; background:var(--bg); z-index:200;
  display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 24px) 5vw 40px;
  transform:translateY(100%); transition:transform .45s cubic-bezier(.65,0,.35,1);
  overflow-y:auto;
}
.lightbox.open{transform:translateY(0);}
.lb-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:40px;}
.lb-head h2{font-size:clamp(1.6rem,4vw,2.6rem); font-weight:600;}
.lb-close{
  position:fixed; top:calc(env(safe-area-inset-top,0px) + 24px); right:5vw; z-index:210;
  background:var(--bg); border:1px solid var(--line); color:var(--ink); width:40px; height:40px;
  border-radius:50%; font-size:16px; cursor:pointer;
}
.lb-close:focus-visible, .gallery figure:focus-visible, .work-item:focus-visible, .resume-btn:focus-visible, nav a:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
/* Masonry: columns flow by width, each shot keeps its native aspect
   ratio (no cropping) so portrait and landscape shots display as shot. */
.lb-grid{columns:3; column-gap:14px;}
@media (max-width:900px){.lb-grid{columns:2;}}
@media (max-width:520px){.lb-grid{columns:1;}}
.lb-shot{break-inside:avoid; margin:0 0 14px; border-radius:6px; background:linear-gradient(160deg,#1c1c1f,#2c2c30); overflow:hidden;}
.lb-shot img{display:block; width:100%; height:auto;}