@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* native cross-page view transitions (Chrome/Edge; ignored elsewhere) */
@view-transition { navigation: auto; }

:root{
  --paper:#0a0a0a; --paper2:#161616; --line:#2c2c2c;
  --ink:#f1f1ec; --ink-soft:#b5b5af;
  --blue:#6fa8dc; --orange:#e07a3f;
  --sans:'IBM Plex Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  line-height:1.65; font-size:17px;
  animation:page-in .5s ease both;
}
@keyframes page-in{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  body{animation:none}
}

/* view-transition animation (supporting browsers only) */
::view-transition-old(root){ animation: vt-out .35s ease both; }
::view-transition-new(root){ animation: vt-in .45s ease both; }
@keyframes vt-out{ to{ opacity:0; transform:scale(.985); } }
@keyframes vt-in{ from{ opacity:0; transform:scale(1.01); } to{ opacity:1; transform:scale(1); } }

a{color:inherit}
img,video{max-width:100%; display:block; background:#1a1a1a}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px}
.wrap-wide{max-width:1360px; margin:0 auto; padding:0 32px}

/* header */
header{position:sticky; top:0; z-index:10; background:rgba(10,10,10,.85); backdrop-filter:blur(8px); border-bottom:2px solid var(--ink)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1360px; margin:0 auto; flex-wrap:wrap; gap:14px}
.mark{display:flex; align-items:center; gap:14px; font-weight:600; text-decoration:none; font-size:1.2rem; transition:opacity .2s ease}
.mark:hover{opacity:.75}
.mark .logo-img{width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid var(--ink)}
.navbtns{display:flex; gap:12px}
.navbtns a{font-family:var(--mono); font-size:.9rem; border:2px solid var(--ink); padding:10px 18px; text-decoration:none; background:var(--paper); transition:background .18s ease, color .18s ease, transform .18s ease}
.navbtns a:hover{transform:translateY(-2px)}
.navbtns a:hover, .navbtns a.active{background:var(--ink); color:var(--paper)}

/* homepage hero overlay */
.hero-overlay{position:relative; width:100%; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; animation:hero-zoom 1.4s ease both; transition:transform .1s linear, opacity .1s linear; will-change:transform, opacity}
@keyframes hero-zoom{ from{transform:scale(1.08); opacity:0} to{transform:scale(1); opacity:1} }
.hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.92) 100%); z-index:1}
.hero-content{position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto; padding:60px 32px 64px; text-align:center; animation:fade-up .8s ease both .2s; transition:transform .1s linear, opacity .1s linear; will-change:transform, opacity}
.hero-content h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.hero-content .tblock{font-size:.85rem}

/* homepage bio text (kept for other layouts) */
.bio-sub{color:var(--ink-soft); margin:20px auto 28px; max-width:52ch; font-size:1.08rem}
.tblock{font-family:var(--mono); font-size:.8rem; color:var(--blue); margin-bottom:16px; letter-spacing:.02em}
h1{font-size:clamp(2rem,4vw,2.8rem); font-weight:700; text-align:center}
.roles{list-style:none; font-family:var(--mono); font-size:.95rem; display:inline-block; text-align:left}
.roles li{display:flex; gap:14px; padding:10px 0; border-top:1px solid var(--line); color:var(--ink-soft)}
.roles li:last-child{border-bottom:1px solid var(--line)}
.roles li::before{content:"—"; color:var(--orange)}
.cta-row{display:flex; gap:16px; justify-content:center; margin-top:32px}

@keyframes fade-in-left{ from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:translateX(0)} }
@keyframes fade-in-right{ from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:translateX(0)} }

/* horizontal project rail (homepage "Featured Work") */
.rail-section{padding:56px 0 96px}
.rail-head{max-width:1360px; margin:0 auto; padding:0 32px 34px; text-align:center}
.rail-head h2{font-size:2.2rem; font-weight:700; text-align:center; width:100%}
.rail{display:flex; gap:34px; overflow-x:auto; overflow-y:visible; padding:20px 32px 40px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.rail.centered{justify-content:center; flex-wrap:wrap; max-width:1360px; margin:0 auto}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--ink); }
.rail::-webkit-scrollbar-track{background:var(--paper2)}
.rail-card{position:relative; flex:0 0 360px; scroll-snap-align:start; border:2px solid var(--ink); text-decoration:none; background:var(--paper2); transition:transform .25s ease, box-shadow .25s ease; overflow:visible}
.rail-card:hover{transform:translateY(-6px); box-shadow:0 10px 24px rgba(0,0,0,.5); z-index:5}
.rail-card .thumb{position:relative; width:360px; height:360px; overflow:hidden; border-bottom:2px solid var(--ink); z-index:2; background:var(--paper2)}
.rail-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.rail-card:hover .thumb img{transform:scale(1.08)}
.rail-card .ctitle{font-family:var(--mono); font-size:.98rem; padding:18px 20px; display:flex; justify-content:center; align-items:center; gap:8px; text-align:center}

.status{font-size:.7rem; border:1px solid var(--ink); padding:3px 8px; white-space:nowrap; font-family:var(--mono)}
.status.built{background:var(--ink); color:var(--paper)}
.status.wip{color:var(--orange); border-color:var(--orange)}
.thumb-placeholder{width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--paper2); border-bottom:2px solid var(--ink); font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); letter-spacing:.05em}

/* projects.html - scattered "falling" masonry gallery */
.project-grid{column-count:2; column-gap:48px; padding:20px 0 90px}
.grid-card{display:block; break-inside:avoid; margin:0 0 48px; border:2px solid var(--ink); text-decoration:none; background:var(--paper2); transition:transform .3s ease, box-shadow .3s ease; position:relative}
.grid-card:hover{transform:rotate(0deg) translateY(-8px) scale(1.02) !important; box-shadow:0 18px 36px rgba(0,0,0,.55); z-index:6}
.grid-card .thumb{width:100%; overflow:hidden; border-bottom:2px solid var(--ink)}
.grid-card .thumb img{width:100%; height:auto; display:block; object-fit:cover; transition:transform .5s ease}
.grid-card .thumb-placeholder{aspect-ratio:4/3}
.grid-card:hover .thumb img{transform:scale(1.06)}
.grid-card .ctitle{font-family:var(--mono); font-size:1.05rem; padding:20px 22px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:center}
.grid-card .cdesc{color:var(--ink-soft); font-size:.95rem; line-height:1.5; padding:12px 22px 22px; margin:0; text-align:center}

/* slight scattered tilt per card, alternating so it reads as "fallen into place" but stays legible */
.grid-card.fall-1{transform:rotate(-2.5deg); top:6px}
.grid-card.fall-2{transform:rotate(2deg); top:40px}
.grid-card.fall-3{transform:rotate(1.5deg); top:-10px}
.grid-card.fall-4{transform:rotate(-3deg); top:20px}
.grid-card.fall-5{transform:rotate(2.5deg); top:0}
.grid-card.fall-6{transform:rotate(-1.5deg); top:30px}
.grid-card.fall-7{transform:rotate(3deg); top:-16px}
.grid-card.fall-8{transform:rotate(-2deg); top:10px}

@media(max-width:900px){ .project-grid{column-count:1} .grid-card{transform:rotate(0deg) !important; top:0 !important} }

/* falling scroll-reveal for the gallery cards */
.grid-card.reveal{opacity:0; transition:opacity .7s cubic-bezier(.22,.8,.28,1), transform .7s cubic-bezier(.22,.8,.28,1)}
.grid-card.fall-1.reveal{transform:translateY(-70px) rotate(-14deg) scale(.9)}
.grid-card.fall-2.reveal{transform:translateY(-70px) rotate(11deg) scale(.9)}
.grid-card.fall-3.reveal{transform:translateY(-70px) rotate(8deg) scale(.9)}
.grid-card.fall-4.reveal{transform:translateY(-70px) rotate(-16deg) scale(.9)}
.grid-card.fall-5.reveal{transform:translateY(-70px) rotate(13deg) scale(.9)}
.grid-card.fall-6.reveal{transform:translateY(-70px) rotate(-9deg) scale(.9)}
.grid-card.fall-7.reveal{transform:translateY(-70px) rotate(16deg) scale(.9)}
.grid-card.fall-8.reveal{transform:translateY(-70px) rotate(-11deg) scale(.9)}
.grid-card.fall-1.reveal.in-view{transform:rotate(-2.5deg)}
.grid-card.fall-2.reveal.in-view{transform:rotate(2deg)}
.grid-card.fall-3.reveal.in-view{transform:rotate(1.5deg)}
.grid-card.fall-4.reveal.in-view{transform:rotate(-3deg)}
.grid-card.fall-5.reveal.in-view{transform:rotate(2.5deg)}
.grid-card.fall-6.reveal.in-view{transform:rotate(-1.5deg)}
.grid-card.fall-7.reveal.in-view{transform:rotate(3deg)}
.grid-card.fall-8.reveal.in-view{transform:rotate(-2deg)}
.grid-card.reveal.in-view{opacity:1}

/* project detail page */
.pagehead{padding:56px 0 36px; border-bottom:2px solid var(--ink); text-align:center; animation:fade-up .6s ease both}
.pagehead h1{text-align:center}
.sub{color:var(--ink-soft); margin-top:16px; max-width:66ch; margin-left:auto; margin-right:auto; text-align:center; font-size:1.1rem}

main{padding:48px 0 70px}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:44px}
.media-block img, .media-block video{width:100%; border:1px solid var(--line)}
.text-block{color:var(--ink-soft)}
.text-block h3{color:var(--ink); font-size:1.2rem; margin-bottom:12px; text-align:center}
.text-block p{text-align:center}

.revlog{margin-top:24px}
.rev{display:grid; grid-template-columns:1fr 1fr; gap:36px; padding:32px 0; border-top:1px solid var(--line); align-items:center}
.rev:first-child{border-top:none}
.rev .rtitle{font-family:var(--mono); font-size:.95rem; font-weight:600; text-align:center; margin-bottom:12px}
.rev p{color:var(--ink-soft); text-align:center; font-size:1.05rem}
.rev .media img, .rev .media video{border:1px solid var(--line)}
.rev .media.multi{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.rev.reverse .media{order:2}
.rev.reverse .copy{order:1}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin:20px 0}
.gallery img{width:100%; height:130px; object-fit:cover; border:1px solid var(--line); transition:transform .3s ease}
.gallery img:hover{transform:scale(1.04)}

.feat{list-style:none; font-family:var(--mono); font-size:1rem; margin-top:16px; text-align:center}
.feat li{padding:8px 0; color:var(--ink-soft)}

.links{text-align:center; margin-top:12px}
.links a{font-family:var(--mono); font-size:.9rem; color:var(--blue); text-decoration:underline; margin:0 12px}
.btn{font-family:var(--mono); font-size:.92rem; border:2px solid var(--ink); padding:13px 22px; text-decoration:none; display:inline-block; background:var(--paper); transition:background .18s ease, color .18s ease, transform .18s ease}
.btn:hover{background:var(--ink); color:var(--paper); transform:translateY(-2px)}

.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; margin-top:26px; text-align:center}
.contact-item{font-family:var(--mono); display:flex; flex-direction:column; align-items:center; gap:12px}
.contact-item .label{font-size:.78rem; color:var(--blue)}
.contact-item .btn{width:100%; max-width:280px}
.resume-box{border:2px solid var(--ink); padding:30px; display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap; background:var(--paper2); text-align:center; font-size:1.05rem}

footer{padding:40px 0 32px; text-align:center; font-family:var(--mono); font-size:.82rem; color:var(--ink-soft); border-top:1px solid var(--line)}
.footer-contact{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.footer-contact a{color:var(--ink); text-decoration:none; border:1px solid var(--line); padding:8px 16px; transition:background .18s ease, color .18s ease, border-color .18s ease}
.footer-contact a:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.footer-contact .sep{color:var(--line)}
.footer-copy{font-size:.78rem}

/* scroll reveal (JS adds .in-view) */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in-view{opacity:1; transform:translateY(0)}

@keyframes fade-up{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }

@media(max-width:900px){
  .project-grid{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:760px){
  .two-col, .rev{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
  .rev.reverse .media, .rev.reverse .copy{order:0}
  .hero-overlay{min-height:70vh}
}

/* tablet (iPad) tuning */
@media(max-width:900px){
  .wrap, .wrap-wide{padding:0 24px}
  .rail-card{flex:0 0 300px}
  .rail-card .thumb{width:300px; height:300px}
  .contact-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}

/* phone (iPhone) tuning */
@media(max-width:600px){
  body{font-size:16px}
  .wrap, .wrap-wide{padding:0 18px}
  .nav{padding:14px 18px; gap:10px}
  .mark{font-size:1.05rem; gap:10px}
  .mark .logo-img{width:40px; height:40px}
  .navbtns{gap:8px}
  .navbtns a{padding:8px 12px; font-size:.82rem}
  .hero-overlay{min-height:auto}
  .hero-content{padding:36px 18px 44px}
  h1{font-size:clamp(1.7rem,7vw,2.2rem)}
  .roles{width:100%}
  .cta-row{flex-direction:column; align-items:stretch; gap:12px}
  .cta-row .btn{text-align:center}
  .rail{padding:16px 18px 32px; gap:20px}
  .rail-card{flex:0 0 78vw}
  .rail-card .thumb{width:100%; height:78vw; max-height:320px}
  .rail-head h2{font-size:1.6rem}
  .grid-card .ctitle{flex-direction:column; align-items:flex-start; gap:6px; text-align:left}
  .grid-card .cdesc{text-align:left}
  .pagehead{padding:40px 0 28px}
  .contact-grid{grid-template-columns:1fr}
  .contact-item .btn{max-width:100%}
  .resume-box{padding:20px; flex-direction:column}
  .footer-contact{flex-direction:column; gap:8px}
  main{padding:32px 0 48px}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .gallery img{height:100px}
}