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

:root{
  color-scheme:light;
  --paper:#ffffff; --paper2:#f6f6f4; --line:#e7e6e2;
  --ink:#1f1f1f; --ink-soft:#6f6e6a;
  --blue:#3a6f9f; --orange:#c4632c;
  --head:"Jost","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif;
  --sans:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:var(--head);
  --shadow:0 2px 6px rgba(20,20,20,.12),0 10px 26px rgba(20,20,20,.14);
  --shadow-up:0 6px 14px rgba(20,20,20,.14),0 24px 50px rgba(20,20,20,.24);
  --gutter:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*{-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  line-height:1.7; font-size:16px; font-weight:400;
  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} *{transition:none!important; animation:none!important} }

::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:var(--paper2)}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.wrap{max-width:1180px; margin:0 auto; padding:0 var(--gutter)}
.wrap-wide{max-width:1680px; margin:0 auto; padding:0 var(--gutter)}

/* header */
header{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px var(--gutter); max-width:1680px; margin:0 auto; flex-wrap:wrap; gap:12px 32px}
.mark{display:flex; align-items:center; gap:14px; text-decoration:none; font-family:var(--head); font-weight:400; font-size:clamp(18px,2vw,24px); letter-spacing:.22em; text-transform:uppercase; transition:opacity .2s ease; line-height:1.2}
.mark:hover{opacity:.7}
.mark .logo-img{width:40px; height:40px; border-radius:50%; object-fit:cover; box-shadow:0 1px 4px rgba(0,0,0,.15)}
.navbtns{display:flex; gap:clamp(18px,3vw,36px); align-items:center}
.navbtns a{font-family:var(--head); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; transition:color .18s ease, border-color .18s ease}
.navbtns a:hover, .navbtns a.active{color:var(--ink); border-bottom-color:var(--ink)}

/* homepage hero overlay */
.hero-overlay{position:relative; width:100%; min-height:86vh; display:flex; align-items:flex-end; overflow:hidden; color:#fff}
.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,.05) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.78) 100%); z-index:1}
.hero-content{position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto; padding:60px var(--gutter) 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.6rem); color:#fff}
.hero-content .tblock{color:rgba(255,255,255,.85)}
.hero-content .bio-sub{color:rgba(255,255,255,.88)}
.hero-content .roles li{color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.28)}
.hero-content .roles li::before{color:rgba(255,255,255,.6)}
.hero-content .btn{background:transparent; color:#fff; border-color:rgba(255,255,255,.85)}
.hero-content .btn:hover{background:#fff; color:var(--ink); border-color:#fff}

.bio-sub{color:var(--ink-soft); margin:20px auto 28px; max-width:56ch; font-size:1.08rem; font-weight:300}
.tblock{font-family:var(--head); font-size:12px; color:var(--ink-soft); margin-bottom:16px; letter-spacing:.2em; text-transform:uppercase}
h1{font-family:var(--head); font-size:clamp(1.9rem,4vw,2.8rem); font-weight:400; letter-spacing:.02em; line-height:1.2; text-align:center; text-wrap:balance}
h2,h3{font-family:var(--head); font-weight:400}
.roles{list-style:none; font-family:var(--sans); font-size:.98rem; display:inline-block; text-align:left; font-weight:300}
.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(--ink-soft)}
.cta-row{display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap}

@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:64px 0 96px}
.rail-head{max-width:1680px; margin:0 auto; padding:0 var(--gutter) 24px; text-align:center}
.rail-head h2{font-size:clamp(18px,2.2vw,24px); letter-spacing:.2em; text-transform:uppercase; text-align:center; width:100%}
.rail{display:flex; gap:clamp(16px,2.4vw,32px); overflow-x:auto; overflow-y:visible; padding:20px var(--gutter) 44px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail.centered{justify-content:center; flex-wrap:wrap; max-width:1680px; margin:0 auto}
.rail-card{position:relative; flex:0 0 340px; scroll-snap-align:start; text-decoration:none; background:var(--paper); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; isolation:isolate}
.rail-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-up); z-index:5}
.rail-card .thumb{position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--paper2)}
.rail-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.rail-card:hover .thumb img{transform:scale(1.06)}
.rail-card .ctitle{font-family:var(--head); font-size:13px; letter-spacing:.14em; text-transform:uppercase; padding:16px 18px; display:flex; justify-content:center; align-items:center; gap:8px; text-align:center}

.status{font-family:var(--head); font-size:10px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--ink); padding:2px 9px; border-radius:999px; white-space:nowrap; line-height:1.6}
.status.built{background:var(--ink); color:#fff}
.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); font-family:var(--head); font-size:.85rem; color:var(--ink-soft); letter-spacing:.1em}

/* projects.html - scattered "falling" masonry gallery */
.project-grid{display:flex; align-items:flex-start; gap:clamp(14px,2vw,30px); padding:24px 0 90px}
.pcol{flex:1 1 0; min-width:0; display:flex; flex-direction:column}
.grid-card{display:block; margin:0 0 clamp(26px,3vw,40px); text-decoration:none; background:var(--paper); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease; position:relative; isolation:isolate}
.grid-card:hover{transform:rotate(0deg) translateY(-8px) scale(1.02) !important; box-shadow:var(--shadow-up); z-index:6}
.grid-card .thumb{width:100%; overflow:hidden; background:var(--paper2)}
.grid-card .thumb img{width:100%; height:auto; display:block; object-fit:cover; transition:transform .6s ease}
.grid-card .thumb-placeholder{aspect-ratio:4/3}
.grid-card:hover .thumb img{transform:scale(1.05)}
.grid-card .ctitle{font-family:var(--head); font-size:13px; letter-spacing:.1em; text-transform:uppercase; line-height:1.4; padding:14px 14px 16px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.grid-card .cdesc{color:var(--ink-soft); font-size:.92rem; line-height:1.5; padding:0 16px 18px; margin:0; text-align:center}

.grid-card.fall-1{transform:rotate(-2.5deg); top:6px}
.grid-card.fall-2{transform:rotate(2deg); top:30px}
.grid-card.fall-3{transform:rotate(1.5deg); top:-6px}
.grid-card.fall-4{transform:rotate(-3deg); top:16px}
.grid-card.fall-5{transform:rotate(2.5deg); top:0}
.grid-card.fall-6{transform:rotate(-1.5deg); top:22px}
.grid-card.fall-7{transform:rotate(3deg); top:-10px}
.grid-card.fall-8{transform:rotate(-2deg); top:10px}

/* 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), box-shadow .3s ease}
.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:clamp(36px,6vw,64px) 0 clamp(24px,4vw,40px); border-bottom:1px solid var(--line); 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.08rem; font-weight:300}

main{padding:48px 0 72px}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:44px}
.media-block img, .media-block video{width:100%; border-radius:12px; box-shadow:var(--shadow)}
.text-block{color:var(--ink-soft)}
.text-block h3{color:var(--ink); font-size:14px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px; text-align:center}
.text-block p{text-align:center}

/* detail-page blocks (overrides each page's inline styles) */
main .block h3, .rev .rtitle{font-family:var(--head); font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink)}
main .block p, .rev p{font-weight:300; color:#55544f}
main .block img, main .block video, main .pair img, main .pair video, .rev .media img, .rev .media video{border:0; border-radius:12px; box-shadow:var(--shadow)}
main .yt-embed{border:0; border-radius:12px; box-shadow:var(--shadow)}

.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{text-align:center; margin-bottom:12px}
.rev p{text-align:center; font-size:1.05rem}
.rev .media.multi{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.rev.reverse .media{order:2}
.rev.reverse .copy{order:1}

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

.feat{list-style:none; font-family:var(--sans); 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(--head); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); text-decoration:underline; text-underline-offset:3px; margin:0 12px}
.btn{font-family:var(--head); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--ink); border-radius:2px; padding:13px 22px; text-decoration:none; display:inline-block; background:var(--paper); color:var(--ink); transition:background .18s ease, color .18s ease, transform .18s ease}
.btn:hover{background:var(--ink); color:#fff; 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{display:flex; flex-direction:column; align-items:center; gap:12px}
.contact-item .label{font-family:var(--head); font-size:12px; letter-spacing:.2em; color:var(--ink-soft)}
.contact-item .btn{width:100%; max-width:300px; text-transform:none; letter-spacing:.04em; font-size:14px}
.resume-box{border-radius:14px; padding:32px; display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap; background:var(--paper2); text-align:center; font-size:1.05rem; font-weight:300}

footer{padding:40px var(--gutter) 36px; text-align:center; font-family:var(--head); font-size:12px; letter-spacing:.12em; color:var(--ink-soft); border-top:1px solid var(--line); margin-top:24px}
.footer-contact{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px 18px; margin-bottom:14px}
.footer-contact a{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .18s ease}
.footer-contact a:hover{border-bottom-color:var(--ink)}
.footer-contact .sep{color:var(--line)}
.footer-copy{text-transform:uppercase; letter-spacing:.16em; font-size:11px}
.footer-copy a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line)}
.footer-copy a:hover{color:var(--ink); border-bottom-color:var(--ink)}

/* 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)} }


/* story layout: text beside a media grid, alternating sides (project pages) */
.story{display:grid; gap:clamp(48px,7vw,96px)}
.sec{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px,4vw,56px); align-items:center}
.sec.flip{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.sec-text{min-width:0}
.sec-text h3, .sec-wide h3{font-family:var(--head); font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px}
.sec-text p, .sec-wide p{font-weight:300; color:#55544f; font-size:1.02rem; margin:0 0 22px; max-width:62ch}
.sec-text p:last-child, .sec-wide p:last-child{margin-bottom:0}
.sec-wide{max-width:780px; margin:0 auto; text-align:center}
.sec-wide p{margin-left:auto; margin-right:auto}
.sec-media{display:grid; gap:12px; min-width:0}
.sec-media.n1{grid-template-columns:1fr}
.sec-media.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sec-media.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sec-media img, .sec-media video{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:12px; box-shadow:var(--shadow); background:var(--paper2)}
.sec-media img.sq{aspect-ratio:1/1}
.sec-media .wide{grid-column:1 / -1; aspect-ratio:16/9}
@media(max-width:860px){
  .sec, .sec.flip{grid-template-columns:1fr}
  .sec.flip .sec-text{order:2}
  .sec-text{text-align:center}
  .sec-text p{margin-left:auto; margin-right:auto}
}
@media(max-width:600px){
  .sec-media{gap:8px}
  .sec-media.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sec-media img, .sec-media video{border-radius:8px}
}

/* ---------- responsive ---------- */

/* laptops / small desktops */
@media(max-width:1199px){
}
/* tablets (iPad portrait and landscape) */
@media(max-width:1024px){
  .nav{flex-direction:column; align-items:flex-start; gap:12px}
  .navbtns{overflow-x:auto; max-width:100%; scrollbar-width:none; gap:28px; padding-bottom:2px}
  .navbtns::-webkit-scrollbar{display:none}
  .navbtns a{white-space:nowrap}
  .rail-card{flex:0 0 300px}
  .contact-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
@media(max-width:760px){
  .two-col, .rev{grid-template-columns:1fr}
  .rev.reverse .media, .rev.reverse .copy{order:0}
  .hero-overlay{min-height:72vh}
}
/* phones */
@media(max-width:600px){
  body{font-size:15.5px}
  .nav{padding:14px var(--gutter)}
  .mark{gap:10px}
  .mark .logo-img{width:34px; height:34px}
  .navbtns{gap:16px}
  .navbtns a{font-size:11.5px; letter-spacing:.1em}
  .hero-overlay{min-height:auto}
  .hero-content{padding:120px var(--gutter) 44px}
  .roles{width:100%}
  .cta-row{flex-direction:column; align-items:stretch; gap:12px}
  .cta-row .btn{text-align:center}
  .rail-card{flex:0 0 72vw}
  .project-grid{gap:12px; padding-top:16px}
  .grid-card{margin-bottom:16px; border-radius:10px; top:0 !important}
  .grid-card .ctitle{font-size:11px; letter-spacing:.08em; padding:10px 8px 12px; gap:6px}
  .grid-card .status{font-size:9px; padding:1px 7px}
  .grid-card.fall-1,.grid-card.fall-1.reveal.in-view{transform:rotate(-1.5deg)}
  .grid-card.fall-2,.grid-card.fall-2.reveal.in-view{transform:rotate(1.2deg)}
  .grid-card.fall-3,.grid-card.fall-3.reveal.in-view{transform:rotate(1deg)}
  .grid-card.fall-4,.grid-card.fall-4.reveal.in-view{transform:rotate(-1.8deg)}
  .grid-card.fall-5,.grid-card.fall-5.reveal.in-view{transform:rotate(1.5deg)}
  .grid-card.fall-6,.grid-card.fall-6.reveal.in-view{transform:rotate(-1deg)}
  .grid-card.fall-7,.grid-card.fall-7.reveal.in-view{transform:rotate(1.8deg)}
  .grid-card.fall-8,.grid-card.fall-8.reveal.in-view{transform:rotate(-1.2deg)}
  .pagehead{padding:36px 0 26px}
  .contact-grid{grid-template-columns:1fr}
  .contact-item .btn{max-width:100%}
  .resume-box{padding:22px; flex-direction:column}
  .footer-contact{flex-direction:column; gap:8px}
  .footer-contact .sep{display:none}
  main{padding:32px 0 48px}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .gallery img{height:100px}
}
@media (pointer:coarse){
  .navbtns a{padding:10px 0; font-size:14px}
}

/* coming-soon placeholders */
.soon-thumb{aspect-ratio:4/3; display:grid; place-items:center; background:linear-gradient(135deg,#f3f2ef,#e6e4df); color:#8a8882; font-family:var(--head); font-size:12px; letter-spacing:.24em; text-transform:uppercase}
.soon-thumb svg{width:34px; height:34px; stroke:currentColor; fill:none; stroke-width:1.2; display:block; margin:0 auto 10px}
.soon-panel{max-width:760px; margin:0 auto; aspect-ratio:16/9; border-radius:14px; box-shadow:var(--shadow); display:grid; place-items:center; text-align:center; background:linear-gradient(135deg,#f3f2ef,#e6e4df); color:#8a8882; font-family:var(--head); letter-spacing:.24em; text-transform:uppercase; font-size:13px}
.soon-panel svg{width:44px; height:44px; stroke:currentColor; fill:none; stroke-width:1.1; display:block; margin:0 auto 14px}
.status.soon{color:var(--ink-soft); border-color:var(--ink-soft)}

/* keep every project-page photo and video within one screen height */
main .block img, main .block video, main .pair img, main .pair video, .media-block img, .media-block video, .rev .media img, .rev .media video{
  width:auto !important; max-width:100%; height:auto; max-height:72vh; margin-left:auto; margin-right:auto; display:block}
main .pair{align-items:start; justify-items:center}
.sec-media img, .sec-media video{max-height:72vh}

/* ===== story layout v2: bigger media, no cropping, justified rows ===== */
.wrap:has(.story){max-width:1440px}
.story{--rowh:76vh}
.sec{grid-template-columns:minmax(0,9fr) minmax(0,4fr); gap:clamp(28px,4vw,64px)}
.sec.flip{grid-template-columns:minmax(0,4fr) minmax(0,9fr)}
.sec-media{display:flex; flex-direction:column; gap:12px; min-width:0}
.jrow{display:flex; gap:12px; width:100%; margin:0 auto}
.jrow > img, .jrow > video, .jrow > .yt{min-width:0; width:auto !important; height:auto; max-height:none !important; margin:0 !important; display:block; object-fit:cover; border-radius:12px; box-shadow:var(--shadow); background:var(--paper2)}
.yt{position:relative; overflow:hidden}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.sec-solo{max-width:980px; margin:0 auto; width:100%}
.build-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.build-gallery img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; box-shadow:0 1px 4px rgba(20,20,20,.12); transition:transform .3s ease, box-shadow .3s ease}
@media (hover:hover){ .build-gallery img:hover{transform:translateY(-3px) scale(1.02); box-shadow:var(--shadow)} }
/* tablets in portrait and phones: stack text under media */
@media(max-width:900px){
  .sec, .sec.flip{grid-template-columns:1fr}
  .sec.flip .sec-text{order:2}
  .sec-text{text-align:center}
  .sec-text p{margin-left:auto; margin-right:auto}
  .story{--rowh:62vh}
}
@media(max-width:600px){
  .sec-media, .jrow{gap:8px}
  .jrow > img, .jrow > video, .jrow > .yt{border-radius:8px}
  .story{--rowh:58vh}
  .build-gallery{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
}

/* ===== consistent page width and margins on every page ===== */
:root{--page:1440px}
.wrap, .wrap-wide, .wrap:has(.story){max-width:var(--page)}
.nav{max-width:var(--page)}
.rail-head, .rail.centered{max-width:var(--page)}
.sec-solo{max-width:1200px}
.pagehead{max-width:none}
.sec-wide h3:only-child{margin-bottom:0}

/* resume-style highlights box at the top of project pages */
.highlights{max-width:880px; margin:0 auto; width:100%; background:var(--paper2); border-radius:14px; padding:clamp(22px,3.5vw,36px) clamp(20px,4vw,44px)}
.highlights h3{font-family:var(--head); font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin:0 0 12px; text-align:center}
.highlights p{font-size:1.06rem; font-weight:400; color:var(--ink); margin:0 0 14px; line-height:1.6}
.highlights ul{margin:0; padding-left:1.2em; display:grid; gap:10px}
.highlights li{font-weight:300; color:#55544f; line-height:1.6}
.highlights li::marker{color:var(--ink-soft)}

/* blurred "coming soon" previews (image file itself is pre-blurred) */
.soon-img{position:relative; width:100%; height:100%; overflow:hidden; background:var(--paper2)}
.soon-img img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04)}
.soon-tag{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--head); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:8px 14px; border-radius:999px; white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.08)}
.grid-card .soon-img{aspect-ratio:4/3}
.soon-panel-img{display:block; overflow:hidden; background:none}
.soon-panel-img .soon-img{aspect-ratio:16/9}
.soon-panel-img .soon-tag{font-size:13px; padding:10px 18px}
.soon-section{padding-top:0}
.rail-card .soon-thumb{aspect-ratio:auto; height:100%}

/* ===== keep text right beside its media (no big empty gaps) ===== */
.sec, .sec.flip{display:flex; align-items:center; justify-content:center; gap:clamp(28px,4vw,56px)}
.sec > .sec-media{flex:1 1 auto; min-width:0; width:100%}
.sec > .sec-text{flex:0 1 420px; min-width:0}
.sec-solo > .sec-media{margin:0 auto}
@media(max-width:900px){
  .sec, .sec.flip{flex-direction:column; align-items:center; gap:22px}
  .sec > .sec-text{flex:none; width:100%; max-width:62ch}
  .sec.flip > .sec-text{order:2}
}

.solo-title{font-family:var(--head); font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; text-align:center; margin:0 0 16px}