:root{
  --bg:#0e0f12;
  --ink:#eeece8;
  --mute:rgba(238,236,232,.56);
  --faint:rgba(238,236,232,.1);
  --ease:cubic-bezier(.2,.7,.15,1);
  --pad:clamp(16px,2.2vw,32px);
  --font:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font:300 16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(238,236,232,.85);color:var(--bg)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px;border-radius:2px}

/* ── film grain on the photos: mid-grey noise pushed to light and dark specks, overlaid ── */
.grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px;
  mix-blend-mode:overlay;opacity:.26;
}

/* ── nav ── */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  padding:var(--pad);
  opacity:0;animation:fade 1.6s var(--ease) .5s forwards;
}
.nav-links{display:flex;flex-direction:column;gap:4px;font-size:15px}
.nav-links a,.socials a,.foot a{position:relative;width:fit-content;color:rgba(238,236,232,.82);transition:color .4s}
.nav-links a::after,.socials a::after,.foot a::after,.mail::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease);
}
.nav-links a:hover,.socials a:hover,.foot a:hover{color:var(--ink)}
.nav-links a:hover::after,.socials a:hover::after,.foot a:hover::after,.mail:hover::after{transform:scaleX(1);transform-origin:left}

.wordmark{font-weight:500;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.01em;padding-top:2px}
.wordmark span{color:var(--mute)}

.cta{
  justify-self:end;display:inline-flex;align-items:center;gap:12px;
  background:#f4f2ee;color:#121316;border-radius:8px;
  padding:5px 5px 5px 15px;font-size:15px;font-weight:400;
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 8px 30px rgba(0,0,0,.18);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.cta i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:5px;background:#121316;
  transition:width .5s var(--ease);
}
.cta svg{width:14px;height:14px;fill:none;stroke:#f4f2ee;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.cta:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 14px 40px rgba(0,0,0,.25)}
.cta:hover i{width:42px}
.cta:hover svg{transform:translateX(3px)}

/* ── hero ── */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;
  background:linear-gradient(#56707c,#9a8c80 55%,#26272b 80%,var(--bg))}
.hero-media{position:absolute;inset:-8% 0 0;will-change:transform}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 78%;display:block;
  filter:saturate(.85) brightness(.86) contrast(1.02);
  opacity:0;transform:scale(1.14);
  transition:opacity 2.4s var(--ease),transform 5s var(--ease);
}
.hero-media img.loaded{opacity:1;transform:scale(1.02)}
.hero-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,16,22,.45) 0%,rgba(14,16,22,.12) 28%,rgba(14,16,22,.12) 58%,rgba(14,15,18,.7) 86%,var(--bg) 100%);
}

.hero-copy{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--pad) 6vh;will-change:transform,opacity;
}
.headline{
  font-weight:300;font-size:clamp(40px,6.4vw,92px);line-height:1.08;letter-spacing:-.025em;
  text-shadow:0 2px 40px rgba(10,12,18,.25);
}
.headline .w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.35em);
  transition:opacity 1.6s var(--ease),filter 1.6s var(--ease),transform 1.6s var(--ease);
  transition-delay:calc(.35s + var(--i) * .09s)}
.ready .headline .w{opacity:1;filter:blur(0);transform:none}
.hero-sub{margin-top:22px;font-size:clamp(15px,1.2vw,18px);color:rgba(238,236,232,.75);letter-spacing:.01em}

.fade{opacity:0;transform:translateY(10px);transition:opacity 1.6s var(--ease),transform 1.6s var(--ease);transition-delay:var(--d,0s)}
.ready .fade{opacity:1;transform:none}

/* birds: soft side-on silhouettes that flap a few beats, then glide */
.birds{position:absolute;inset:0;pointer-events:none}
.bird{position:absolute;left:0;overflow:visible;opacity:.7;filter:blur(.45px);
  animation:drift var(--t) linear infinite;animation-delay:calc(var(--t) * var(--k))}
.bird path{fill:#181c24}
.bird .bob{animation:bob var(--b) ease-in-out infinite}
.bird .wing{transform-box:fill-box;transform-origin:100% 55%;
  animation:flap var(--f) ease-in-out infinite;animation-delay:var(--p)}
.bird .far .wing{animation-delay:calc(var(--p) + .06s)}
@keyframes drift{
  0%{transform:translate(-5vw,0)} 25%{transform:translate(22vw,-1.2vh)}
  50%{transform:translate(50vw,.6vh)} 75%{transform:translate(78vw,-.8vh)} 100%{transform:translate(106vw,0)}
}
@keyframes flap{
  0%,58%,100%{transform:rotate(8deg)}
  10%,34%{transform:rotate(46deg)}
  22%,46%{transform:rotate(-34deg)}
}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)}}

.scroll-cue{
  position:absolute;left:50%;bottom:0;width:1px;height:clamp(60px,11vh,120px);
  background:rgba(238,236,232,.14);overflow:hidden;
  opacity:0;animation:fade 2s var(--ease) 1.8s forwards;
}
.scroll-cue::before{content:"";position:absolute;inset:-20px;}
.scroll-cue span{position:absolute;left:0;top:-40%;width:1px;height:40%;
  background:linear-gradient(transparent,rgba(238,236,232,.85));animation:fall 2.6s var(--ease) infinite}
@keyframes fall{to{top:110%}}
@keyframes fade{to{opacity:1}}

/* ── sections ── */
.label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:48px}
.work,.about{max-width:1160px;margin:0 auto;padding:clamp(110px,16vh,180px) var(--pad) 0}

.projects{list-style:none;border-bottom:1px solid var(--faint)}
.project{
  position:relative;display:grid;grid-template-columns:72px 1fr 230px;gap:24px;align-items:baseline;
  padding:38px 0;border-top:1px solid var(--faint);
}
.project::before{
  content:"";position:absolute;inset:0 calc(var(--pad) * -1);z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(238,236,232,.035),transparent);
  opacity:0;transition:opacity .8s var(--ease);
}
.project:hover::before{opacity:1}
.num{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums}
.project h2{font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.015em;margin-bottom:12px;
  transition:transform .8s var(--ease)}
.project:hover h2{transform:translateX(8px)}
.project p{color:var(--mute);max-width:58ch;font-size:16.5px}
.project code{font:400 .86em/1 ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;color:var(--ink);
  background:rgba(238,236,232,.07);padding:.18em .42em;border-radius:4px;white-space:nowrap}
.p-meta{display:flex;flex-direction:column;gap:4px;text-align:right;font-size:14px;color:var(--mute)}
.p-meta span:first-child{color:var(--ink)}
.p-link{position:absolute;inset:0;z-index:1}
.ext{width:.6em;height:.6em;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;vertical-align:.12em;margin-left:4px;
  opacity:.5;transition:opacity .5s,transform .6s var(--ease)}
.project:hover .ext{opacity:1;transform:translate(2px,-2px)}

.about{padding-bottom:clamp(120px,18vh,200px)}
.lede{font-size:clamp(30px,3.6vw,52px);line-height:1.18;letter-spacing:-.02em;max-width:20ch;margin-bottom:36px}
.about .body{font-size:clamp(17px,1.35vw,20px);color:var(--mute);max-width:58ch;margin-left:auto;margin-right:8%}

/* ── contact ── */
.contact{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.contact-media{position:absolute;inset:-10% 0 0;will-change:transform}
.contact-media img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;display:block;
  filter:saturate(.85) brightness(.72)}
.contact::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(14,15,18,.35) 30%,rgba(14,15,18,.2) 60%,rgba(14,15,18,.85) 100%)}
.contact-copy{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px var(--pad) 40px}
.contact h2{font-weight:300;font-size:clamp(38px,5.6vw,80px);line-height:1.08;letter-spacing:-.025em;margin-bottom:28px}
.mail{position:relative;font-size:clamp(18px,1.7vw,24px);color:var(--ink)}
.mail::after{transform:scaleX(1);opacity:.35;transition:transform .6s var(--ease),opacity .4s}
.mail:hover::after{opacity:1;animation:redraw .9s var(--ease)}
@keyframes redraw{0%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.socials{display:flex;gap:28px;margin-top:28px;font-size:15px}
.foot{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:24px var(--pad);font-size:13px;color:var(--mute)}
.foot a{color:var(--mute)}

/* ── scroll reveal ── */
.js .reveal{opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity 1.4s var(--ease),transform 1.4s var(--ease),filter 1.4s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none;filter:blur(0)}

/* ── small screens ── */
@media (max-width:760px){
  .nav{grid-template-columns:1fr auto;row-gap:18px}
  .wordmark{grid-row:1;grid-column:1;justify-self:start}
  .cta{grid-row:1;grid-column:2;font-size:14px;padding-left:12px;gap:10px}
  .cta i{width:30px;height:30px}
  .nav-links{grid-row:2;grid-column:1 / -1;flex-direction:row;gap:22px;font-size:14px}
  .project{grid-template-columns:1fr;gap:6px;padding:30px 0}
  .p-meta{text-align:left;flex-direction:row;flex-wrap:wrap;gap:4px 14px;margin-top:10px;order:3}
  .num{order:0}
  .about .body{margin:0}
  .foot{flex-direction:column;gap:6px}
  .bird{--t:60s!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .nav,.scroll-cue{opacity:1}
  .hero-media img{opacity:1;transform:none}
  .headline .w,.fade,.js .reveal{opacity:1;transform:none;filter:none}
  .birds{display:none}
}