:root{
  --bg:#0a0906; --surface:#111009; --border:#201e17;
  --ink:#f2ede4; --muted:#7a7468; --soft:#2a2820;
  --orange:#EF6B20; --amber:#FFC046; --coral:#e84040;
  --teal:#0B3A3A; --violet:#2A0B5B;
  --port-bg:#0a0906; --port-ink:#f2ede4; --port-muted:#7a7468; --port-border:#201e17;
  --sans:'Inter',sans-serif; --serif:'Playfair Display',serif;
  --ease:cubic-bezier(.16,1,.3,1); --eout:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:auto;}
body{font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.6;overflow-x:hidden; cursor:auto;background:#0a0906;color:var(--ink);transition:background .6s ease,color .6s ease;}
body::after{content:'';position:fixed;inset:0;z-index:9990;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");opacity:.55;}

/* ── INTRO LOADER ── */
#intro{
  position:fixed;inset:0;z-index:99999;
  background:#FFC046;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  /* the WHOLE intro slides up to reveal site */
  transition:transform .85s cubic-bezier(.77,0,.18,1);
}
#intro.slide-up{transform:translateY(-100%);}

/* intro video fills the black screen */
#intro-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:2;
}
/* stack kept for JS ref but empty */
#intro-stack{ display:none; }
#intro-curtain{display:none;}
@keyframes inFade{to{opacity:1;}}

/* ── CURSOR ── */
/*#cur-dot,#cur-ring{position:fixed;border-radius:50%;pointer-events:none;z-index:999999;transform:translate(-50%,-50%);top:0;left:0;}
#cur-dot{width:7px;height:7px;background:var(--amber);transition:width .15s,height .15s,background .3s;}*/
body.theme-about #cur-dot{background:#1a0e00;}
body.theme-about #cur-ring{border-color:rgba(26,14,0,.5);}
#cur-ring{width:32px;height:32px;border:1.5px solid rgba(255,192,70,.5);transition:width .25s var(--ease),height .25s var(--ease),border-color .3s;}
#cur-ring.hov{width:54px;height:54px;border-color:var(--amber);border-width:2px;}
/*#cur-dot.hov{width:9px;height:9px;}*/

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:600;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;padding:20px 52px;pointer-events:none;transition:background .5s;}
nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border) 20%,var(--border) 80%,transparent);opacity:0;transition:opacity .4s;}
nav.scrolled{background:#051b1b;backdrop-filter:blur(16px);}
/*nav.scrolled::after{opacity:1;}*/
.nav-logo{pointer-events:all;text-decoration:none;display:flex;align-items:center;line-height:1;}
.nav-logo img{height:36px;width:auto;display:block;filter:brightness(1);transition:opacity .2s;}
.nav-logo img:hover{opacity:.8;}

.nav-links{display:flex;gap:32px;list-style:none;justify-content:center;pointer-events:all;}
.nav-links a{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;color:var(--ink);text-decoration:none;transition:color .25s;}
.nav-links a:hover{color:var(--ink);}
.nav-avail{display:flex;align-items:center;gap:8px;pointer-events:all;}
.avail-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 7px #0B3A3A;animation:gpulse 2.8s ease-in-out infinite;}
@keyframes gpulse{0%,100%{opacity:1;box-shadow:0 0 7px #0B3A3A;}50%{opacity:.3;box-shadow:none;}}
.avail-label{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);}

/* ── REVEAL ── */
.r{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.r.in{opacity:1;transform:none;}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.3s}.d4{transition-delay:.44s}
.tw{display:inline-block;overflow:visible;vertical-align:bottom;line-height:1.05;position:relative;}
.tw:nth-child(1){z-index:1;}.tw:nth-child(2){z-index:2;}.tw:nth-child(3){z-index:3;}.tw:nth-child(4){z-index:4;}.tw:nth-child(5){z-index:5;}.tw:nth-child(6){z-index:6;}.tw:nth-child(7){z-index:7;}.tw:nth-child(8){z-index:8;}
.tw-inner{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .85s var(--ease),opacity .6s ease;position:relative;z-index:inherit;}
.title-anim.in .tw-inner{transform:translateY(0);opacity:1;}
.tw:nth-child(1) .tw-inner{transition-delay:.0s;}.tw:nth-child(2) .tw-inner{transition-delay:.09s;}.tw:nth-child(3) .tw-inner{transition-delay:.18s;}.tw:nth-child(4) .tw-inner{transition-delay:.27s;}.tw:nth-child(5) .tw-inner{transition-delay:.36s;}.tw:nth-child(6) .tw-inner{transition-delay:.45s;}.tw:nth-child(7) .tw-inner{transition-delay:.54s;}.tw:nth-child(8) .tw-inner{transition-delay:.63s;}

/* ── HERO ── */
#hero{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;}
#hero-bg-photo{position:absolute;inset:0;z-index:0;overflow:hidden;}
#hero-bg-photo video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
#hero-bg-photo::after{content:'';position:absolute;inset:0;background:rgba(10,9,6,0.3);}

#hero-geo{display:none;}
#hero-fade{position:absolute;bottom:0;left:0;right:0;z-index:2;height:36%;background:linear-gradient(to top,var(--bg) 0%,rgba(10,9,6,.8) 28%,transparent 100%);pointer-events:none;}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;}
.hero-center{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:visible;}
.hero-center.hero-return{animation:heroReturn .8s var(--ease) forwards;}
@keyframes heroReturn{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
.hero-tl{position:absolute;top:96px;left:52px;z-index:4;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color: var(--ink);opacity:0;animation:fadeUp .7s var(--eout) 3.2s forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes revName{from{opacity:0;transform:translateY(60px);}to{opacity:1;transform:none;}}
.htw{overflow:visible;line-height:1;}
.hero-line1{display:block;font-weight:300;font-size:clamp(42px,7.2vw,114px);letter-spacing:-.03em;color:var(--ink);line-height:.95;opacity:0;transform:translateY(40px);position:relative;z-index:2;}
.hero-line2{display:block;font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(42px,7.2vw,114px);letter-spacing:-.02em;color:var(--amber);line-height:.95;opacity:0;transform:translateY(40px);position:relative;z-index:3;}
.hero-sub{display:none;}
.hero-line-acc{display:none;}
@keyframes growLine{to{width:52px;}}
.hero-bottom-bar{position:absolute;bottom:0;left:0;right:0;z-index:4;height:110px;opacity:0;animation:fadeUp .7s var(--eout) 3.3s forwards;}
.hero-scroll{position:absolute;left:52px;bottom:36px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.scroll-track{width:1px;height:52px;background:rgba(242,237,228,.1);position:relative;overflow:hidden;}
.scroll-fill{position:absolute;top:0;left:0;right:0;height:40%;background:var(--amber);animation:sdrop 2.2s ease-in-out 2s infinite;}
@keyframes sdrop{0%{transform:translateY(-100%);opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{transform:translateY(250%);opacity:0;}}
.scroll-lbl{font-size:.52rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);writing-mode:vertical-rl;margin-top:4px;}
.hero-location{position:absolute;right:52px;bottom:36px;display:flex;align-items:center;gap:10px;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);}
.hero-location-line{width:24px;height:1px;background:rgba(242,237,228,.22);}

/* ── FIXED SOCIAL SIDEBAR ── */
#social-bar{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:700;display:flex;flex-direction:column;align-items:center;gap:6px;}
#social-bar::before{content:'';display:block;width:1px;height:40px;background:linear-gradient(to bottom,transparent,rgba(242,237,228,.2));margin-bottom:6px;}
#social-bar::after{content:'';display:block;width:1px;height:40px;background:linear-gradient(to top,transparent,rgba(242,237,228,.2));margin-top:6px;}
.soc-link{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:rgba(242,237,228,.32);text-decoration:none;border-radius:4px;transition:color .3s,transform .3s var(--ease);position:relative;}
.soc-link:hover{transform:translateX(4px);}
.soc-link::after{content:attr(data-label);position:absolute;left:calc(100% + 12px);font-size:.62rem;letter-spacing:.04em;font-weight:400;font-family:var(--sans);color:currentColor;white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .28s,transform .28s;pointer-events:none;}
.soc-link:hover::after{opacity:1;transform:none;}
.soc-link.spotify-link:hover{color:#1db954;}
.soc-link.behance-link:hover{color:#1769ff;}
.soc-link.instagram-link:hover{color:#e1306c;}
.soc-link.linkedin-link:hover{color:#0a66c2;}
.soc-link.github-link:hover{color:#c9d1d9;}
@media(max-width:900px){#social-bar{display:none;}}

/* ── PAGE BG OVERLAY (portfolio) ── */
#page-bg-overlay{position:fixed;inset:0;z-index:0;background:var(--port-bg);pointer-events:none;opacity:0;transition:opacity .7s ease;}

/* ── SECTION SHARED ── */
.sec-tag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);font-weight:400;margin-bottom:18px;}

/* ── ABOUT ── */
#about{border-top:1px solid rgba(0,0,0,.1);padding:140px 52px 80px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;transition:none;}
/*#about::before{content:'AC';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:700;font-size:clamp(180px,28vw,360px);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(26,14,0,.05);pointer-events:none;user-select:none;line-height:1;}*/
#about .sec-tag{color:var(--teal);}
.about-headline{font-weight:300;font-size:clamp(34px,4.5vw,62px);line-height:1.1;color:var(--ink);margin-bottom:36px;letter-spacing:-.025em;max-width:820px;}
.about-headline em{font-family:var(--serif);font-style:italic;color:var(--teal);font-weight:700;}
#about .about-headline em{color:var(--teal)}
.about-p{font-size:.92rem;line-height:1.9;color:var(--muted);margin-bottom:14px;font-weight:300;max-width:560px;}
.about-p strong{color:var(--ink);font-weight:400;}
#about .about-p{color:var(--teal);}
#about .about-p strong{color:var(--teal);}
.about-stats-row{display:flex;gap:0;margin:64px 0 52px;border:1px solid var(--border);width:100%;max-width:800px;}
.astat{flex:1;padding:30px 28px;border-right:1px solid var(--border);position:relative;overflow:hidden;transition:background .35s;}
.astat:last-child{border-right:none;}
.astat:hover{background:rgba(255,255,255,.03);}
.astat::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--orange);transition:width .5s var(--ease);}
.astat:hover::after{width:100%;}
.astat-n{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:600;color:var(--teal);line-height:1;margin-bottom:7px;display:block;}
.astat-n sup{font-size:.6em;color:var(--teal);}
.astat-l{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:300;}
#about .about-stats-row{border-color:rgba(0,0,0,.1);}
#about .astat{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1);}
#about .astat-n{color:var(--teal);}
#about .astat-n sup{color:var(--teal)}
#about .astat-l{color:var(--teal);}
#about .astat::after{background:var(--teal)}

/* role chips in about */
.about-roles{position:static !important;transform:none !important;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px;}
.hero-role{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;color:rgba(242,237,228,.4);padding:5px 14px;border:1px solid rgba(242,237,228,.1);transition:all .45s var(--ease);}
.hero-role.on{color:var(--bg);background:var(--orange);border-color:var(--orange);}
.hero-dot{color:rgba(242,237,228,.15);font-size:.4rem;}
#about .hero-role{color:var(--teal);border-color:var(--teal);}
#about .hero-role.on{color:#fff;background:var(--teal);border-color:var(--teal);}
#about .hero-dot{color:rgba(26,14,0,.3);}

/* ── FEATURED ── */
#featured{position:relative;height:100vh;min-height:600px;overflow:hidden;display:flex;align-items:stretch;}
#featured-video-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;}
#featured-video-wrap video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
#featured-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(to right,rgba(10,9,6,.92) 0%,rgba(10,9,6,.70) 28%,rgba(10,9,6,.30) 55%,rgba(10,9,6,.06) 80%,transparent 100%);pointer-events:none;}
#featured-band{position:absolute;left:0;top:0;bottom:0;width:4px;z-index:4;background:linear-gradient(to bottom,transparent,var(--orange) 30%,var(--amber) 70%,transparent);}
#featured-content{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:0 72px 80px;width:58%;}
#featured-meta{display:flex;align-items:center;gap:16px;margin-bottom:24px;opacity:0;transform:translateY(16px);transition:opacity .7s ease .1s,transform .7s var(--ease) .1s;}
#featured.visible #featured-meta{opacity:1;transform:none;}
#featured-num{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);font-weight:400;}
#featured-cat{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(242,237,228,.38);font-weight:400;}
#featured-title{font-weight:300;font-size:clamp(44px,6.5vw,100px);letter-spacing:-.035em;line-height:.92;color:var(--ink);margin-bottom:16px;}
#featured-title em{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--amber);}
#featured-tagline{font-size:clamp(.88rem,1.1vw,1rem);font-weight:300;color:rgba(242,237,228,.42);letter-spacing:.02em;max-width:400px;line-height:1.75;margin-bottom:44px;opacity:0;transform:translateY(12px);transition:opacity .7s ease .55s,transform .7s var(--ease) .55s;}
#featured.visible #featured-tagline{opacity:1;transform:none;}
#featured-cta-row{display:flex;align-items:center;gap:24px;opacity:0;transform:translateY(12px);transition:opacity .7s ease .7s,transform .7s var(--ease) .7s;}
#featured.visible #featured-cta-row{opacity:1;transform:none;}
#featured-cta{display:inline-flex;align-items:center;gap:12px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--bg);background:var(--amber);padding:14px 30px;text-decoration:none;border:1px solid var(--amber);border-radius: 8px;transition:background .3s,color .3s;}
#featured-cta:hover{background:transparent;color:var(--amber);}
#featured-cta svg{transition:transform .35s var(--ease);}
#featured-cta:hover svg{transform:translate(4px,-4px);}
#featured-secondary{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,237,228,.35);text-decoration:none;border-bottom:1px solid rgba(242,237,228,.12);padding-bottom:2px;transition:color .25s,border-color .25s;}
#featured-secondary:hover{color:var(--ink);border-color:var(--ink);}
#featured-aside{position:absolute;top:60px;right:72px;z-index:3;text-align:right;}
#featured-big-num{font-weight:700;font-size:clamp(80px,12vw,180px);letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,237,228,.07);user-select:none;}
#featured-line{position:absolute;bottom:80px;left:72px;height:1px;width:0;background:var(--amber);transition:width 1.1s var(--ease) .2s;z-index:3;}
#featured.visible #featured-line{width:160px;}

/* ── PORTFOLIO ── */
#portfolio-section{position:relative;z-index:1;margin-top:0;}
.portfolio-header{padding:52px 52px 36px;border-top:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;transition:border-color .6s;}
.ph-tag{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);font-weight:500;margin-bottom:4px;transition:color .4s;}
.ph-hint{display:flex;flex-direction:row;align-items:center;gap:12px;font-size:.66rem;letter-spacing:.08em;color:var(--muted);transition:color .6s;}
.ph-arrows{display:flex;gap:5px;}
.ph-arrows span{display:block;width:22px;height:1px;background:currentColor;animation:drift 1.8s ease-in-out infinite;}
.ph-arrows span:nth-child(2){animation-delay:.15s;}.ph-arrows span:nth-child(3){animation-delay:.3s;}
@keyframes drift{0%,100%{opacity:.25;transform:translateX(0);}50%{opacity:1;transform:translateX(8px);}}
#portfolio-track-wrap{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;padding-top:62px;}
#portfolio-track{display:flex;gap:20px;padding:0 52px;will-change:transform;}
.port-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--amber);width:0;z-index:20;transition:width .06s linear;}
.port-counter{display:none;}
.port-counter strong{color:var(--ink);font-weight:500;}
.pcard{flex-shrink:0;width:min(500px,78vw);height:80vh;position:relative;overflow:hidden;border:1px solid var(--border);border-radius: 12px;cursor:auto;transition:box-shadow .5s,transform .5s var(--ease);background:var(--surface);}
.pcard:hover{box-shadow:0 32px 80px rgba(0,0,0,.35);transform:translateY(-4px);}
.pc-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s var(--ease);}
.pcard:hover .pc-img{transform:scale(1.06);}
.pc-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.05) 100%);}
.pc-num{position:absolute;right:0;top:-4px;font-weight:700;font-size:7rem;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);line-height:1;pointer-events:none;user-select:none;}
.pc-idx{display:none;}
.pc-body{position:absolute;bottom:0;left:0;right:0;padding:32px 30px;}
.pc-cat{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:9px;}
.pc-title{font-weight:600;font-size:clamp(22px,2.4vw,36px);line-height:1.08;color:#fff;margin-bottom:9px;letter-spacing:-.02em;}
.pc-desc{font-size:.8rem;line-height:1.65;color:rgba(255,255,255,.55);max-width:290px;font-weight:300;}
.pc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px;}
.pc-tag{font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;padding:3px 9px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.45);}
.pc-link{position:absolute;right:24px;bottom:28px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .35s,border-color .35s,transform .5s var(--ease);}
.pcard:hover .pc-link{background:var(--amber);border-color:var(--amber);transform:rotate(45deg);}

/* ── MODAL ── */


/* ── SKILLS ── */
#skills{border-top:1px solid rgba(255,255,255,.06);padding:130px 52px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;}
.sk-title{font-weight:300;font-size:clamp(30px,3.8vw,52px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-bottom:64px;max-width:440px;}
.sk-title em{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--amber);}
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);width:100%;max-width:960px;}
.sk-col{background:rgba(255,255,255,.02);padding:44px 36px;text-align:left;transition:background .35s;position:relative;overflow:hidden;}
.sk-col::before{content:attr(data-n);position:absolute;right:-6px;bottom:-12px;font-weight:700;font-size:6rem;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(242,237,228,.022);pointer-events:none;line-height:1;user-select:none;}
.sk-col:hover{background:rgba(255,255,255,.04);}
.sk-col-num{font-size:.64rem;letter-spacing:.1em;color:var(--teal);margin-bottom:16px;font-weight:400;}
.sk-col-name{font-weight:500;font-size:1.25rem;color:var(--ink);margin-bottom:16px;line-height:1.2;letter-spacing:-.01em;}
.sk-col-desc{font-size:.84rem;line-height:1.8;color:rgba(224,248,244,.65);margin-bottom:24px;font-weight:300;}
.sk-tools{display:flex;flex-wrap:wrap;gap:6px;}
.sk-tools span{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:rgba(224,248,244,.4);padding:4px 9px;border:1px solid rgba(224,248,244,.15);transition:color .25s,border-color .25s;}
.sk-col:hover .sk-tools span{color:rgba(224,248,244,.7);border-color:rgba(224,248,244,.25);}

/* ── CONTACT ── */
#contact{border-top:1px solid rgba(255,255,255,.06);padding:120px 52px 100px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;z-index:1;}
#contact::before{content:'HELLO';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:700;font-size:clamp(90px,14vw,210px);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(42,11,91,.06);white-space:nowrap;pointer-events:none;user-select:none;}
.contact-title{font-weight:300;font-size:clamp(42px,7vw,104px);line-height:.92;letter-spacing:-.03em;color:var(--ink);margin-bottom:52px;margin-top:18px;}
.contact-title em{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--amber);}
.contact-email{display:inline-flex;align-items:center;gap:12px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--bg);background:var(--amber);border:1px solid var(--amber);border-radius: 8px;padding:14px 30px;text-decoration:none;transition:background .3s,color .3s,border-color .3s;}
.contact-email:hover{background:transparent;color:var(--amber);}
.contact-email svg{transition:transform .4s var(--ease);}
.contact-email:hover svg{transform:translate(4px,-4px);}

/* ── FOOTER ── */
footer{background-color:var(--amber);padding:26px 52px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;}
.f-name{font-size:.82rem;font-weight:400;color:var(--teal);}
.f-name strong{color:var(--teal);font-weight:500;}
.f-copy{font-size:.6rem;color:var(--teal);}
.f-loc{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);}

/* ── MOBILE ── */
@media(max-width:768px){
  /* NAV — logo left, right-side controls far right */
  nav{
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0;
  }
  nav>*{display:none;}
  .nav-name{display:flex;}
  .nav-right-mobile{display:flex !important;align-items:center;gap:12px;margin-left:auto;}
  #ham-btn{display:flex;}
  #ham-btn span{background:var(--amber);}
  .nav-links,.nav-avail{display:none !important;}

  .hero-tl{left:24px;}.hero-scroll{left:24px;}.hero-location{right:24px;}
  #about,#skills,#contact,footer{padding-left:24px;padding-right:24px;}
  .portfolio-header{padding:80px 24px 40px;}
  #portfolio-track{padding:0 24px;}
  .sk-grid{grid-template-columns:1fr;}
  .modal-inner{padding:28px 24px 36px;}
  .modal-details{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:28px;overflow:hidden;width:100%;}

  /* FEATURED mobile — full width, vertically centered */
  #featured{height:100vh;min-height:600px;flex-direction:column;align-items:center;justify-content:center;}
  #featured-content{width:100%;padding:80px 28px 60px;align-items:center;text-align:center;justify-content:center;}
  #featured-title{font-size:clamp(40px,10vw,64px);text-align:center;}
  #featured-tagline{max-width:100%;text-align:center;}
  #featured-cta-row{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:14px;}
  #featured-aside{display:none;}
  #featured-band{width:100%;height:3px;top:0;bottom:auto;left:0;right:0;background:linear-gradient(to right,transparent,var(--orange) 30%,var(--amber) 70%,transparent);}
  #featured-line{display:none;}

  /* PORTFOLIO cards slightly narrower on mobile */
  .pcard{width:min(420px,88vw);height:72vh;}
}

/* ── HAMBURGER MOBILE MENU ── */
#ham-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;pointer-events:all;padding:4px;position:fixed;top:14px;right:20px;z-index:9999;}
#ham-btn span{display:block;width:22px;height:2px;background:var(--amber);border-radius:1px;transition:transform .35s var(--ease),opacity .25s,width .35s var(--ease);}
#ham-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);background:var(--amber);}
#ham-btn.open span:nth-child(2){opacity:0;width:0;}
#ham-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);background:var(--amber);}

#mobile-menu{
  position:fixed;inset:0;z-index:650;
  background:rgba(10,9,6,.97);backdrop-filter:blur(24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
}
#mobile-menu.open{opacity:1;pointer-events:all;}
/* staggered links */
#mobile-menu a{
  display:block;
  font-size:clamp(32px,9vw,52px);font-weight:300;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  padding:14px 0;
  position:relative;
  opacity:0;transform:translateY(20px);
  transition:color .25s;
}
#mobile-menu a::after{
  content:'';position:absolute;left:0;bottom:10px;
  width:0;height:1px;background:var(--amber);
  transition:width .35s var(--ease);
}
#mobile-menu a:hover{color:var(--amber);}
#mobile-menu a:hover::after{width:100%;}
/* open: animate links in with stagger via JS class */
#mobile-menu.open a{opacity:1;transform:none;}
#mobile-menu.open a:nth-child(1){transition:opacity .45s ease .05s,transform .45s var(--ease) .05s,color .25s;}
#mobile-menu.open a:nth-child(2){transition:opacity .45s ease .12s,transform .45s var(--ease) .12s,color .25s;}
#mobile-menu.open a:nth-child(3){transition:opacity .45s ease .19s,transform .45s var(--ease) .19s,color .25s;}
#mobile-menu.open a:nth-child(4){transition:opacity .45s ease .26s,transform .45s var(--ease) .26s,color .25s;}
#mobile-menu.open a:nth-child(5){transition:opacity .45s ease .33s,transform .45s var(--ease) .33s,color .25s;}
#mobile-menu .mob-avail{
  display:flex;align-items:center;gap:8px;margin-top:36px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  opacity:0;transform:translateY(10px);
  transition:opacity .4s ease .4s,transform .4s var(--ease) .4s;
}
#mobile-menu.open .mob-avail{opacity:1;transform:none;}
/* accent line at top when open */
#mobile-menu::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(to right,transparent,var(--orange),transparent);
  opacity:0;transition:opacity .4s ease .1s;
}
#mobile-menu.open::before{opacity:1;}
@media(max-width:768px){
  #ham-btn{display:flex;}
  nav{grid-template-columns:auto auto;gap:16px;padding:18px 24px;}
  .nav-links,.nav-avail{display:none;}
  /* show avail dot + ham on right */
  nav .nav-right-mobile{display:flex;align-items:center;gap:14px;pointer-events:all;}
}
@media(min-width:769px){
  .nav-right-mobile{display:none !important;}
  /* mobile-menu hidden via opacity/pointer-events, NOT display:none */
}


/* intro loading bar */
#intro-loader{
  position:absolute;
  bottom:52px;
  left:50%;
  transform:translateX(-50%);
  width:160px;
  height:1px;
  background:rgba(242,237,228,.12);
  overflow:hidden;
  z-index:3;
  opacity:0;
  animation:inFade .4s ease .6s forwards;
}
#intro-loader-fill{
  position:absolute;inset:0;
  background:linear-gradient(to right, transparent, var(--amber), var(--orange), transparent);
  transform:translateX(-100%);
  animation:loaderSweep 1.4s ease .7s forwards;
}
@keyframes loaderSweep{
  0%  { transform:translateX(-100%); }
  60% { transform:translateX(0%); }
  100%{ transform:translateX(100%); }
}






/* mobile menu close button */
.mob-close{
  position:absolute;top:20px;right:20px;
  background:none;border:none;
  font-size:1.4rem;color:var(--amber);
  cursor:pointer;pointer-events:all;
  line-height:1;padding:8px;
  transition:transform .3s var(--ease),opacity .2s;
  z-index:10;
}
.mob-close:hover{transform:rotate(90deg);opacity:.7;}

/* ══════════════════════════════════
   MODAL — project page layout
══════════════════════════════════ */
#modal-overlay{
  position:fixed;inset:0;z-index:8000;
  background:rgba(10,9,6,.96);backdrop-filter:blur(24px);
  opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
  padding:60px 0 80px;
  display:flex;justify-content:center;align-items:flex-start;
}
#modal-overlay.open{opacity:1;pointer-events:all;}
#modal-box{
  position:relative;
  width:min(1000px,92vw);
  flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius: 12px;
  transform:translateY(40px) scale(.98);
  transition:transform .55s var(--ease),opacity .5s var(--ease);
  opacity:0;
  overflow:hidden;
}
#modal-overlay.open #modal-box{transform:none;opacity:1;}

/* close button */
.modal-close{
  position:absolute;top:16px;right:16px;z-index:10;
  width:38px;height:38px;
  border:1px solid var(--border);
  background:var(--bg);
  cursor:auto;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  transition:color .25s,border-color .25s;
}
.modal-close:hover{color:var(--ink);border-color:var(--muted);}

/* ── HERO (image or video) ── */
.modal-hero{
  width:100%;
  aspect-ratio:16/7;
  overflow:hidden;
  position:relative;
  background:var(--bg);
}
.modal-hero img,
.modal-hero video{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.modal-hero video{ cursor:default; }

/* ── PROJECT INFO ── */
.modal-info{
  padding:44px 52px 40px;
  border-bottom:1px solid var(--border);
  width:100%;
  box-sizing:border-box;
  display:block;
}
.modal-info>*{box-sizing:border-box;width:100%;}
.modal-meta{display:flex;align-items:center;gap:14px;margin-bottom:18px;width:auto;}
.modal-idx{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.modal-cat{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--orange);}
.modal-title{
  font-weight:300;font-size:clamp(28px,4vw,52px);
  line-height:1.05;letter-spacing:-.025em;
  color:var(--ink);margin-bottom:20px;
  width:100%;
}
.modal-title em{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--amber);}
.modal-desc{
  display:block;
  font-size:.92rem;line-height:1.9;
  color:var(--muted);font-weight:300;
  width:100%;max-width:none;
  margin-bottom:32px;
}
.modal-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  margin-bottom:28px;
  width:100%;
  overflow:hidden;
}
.modal-detail{background:var(--bg);padding:16px 20px;min-width:0;}
.modal-detail-label{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.modal-detail-val{font-size:.86rem;color:var(--ink);font-weight:400;}
.modal-tags{display:flex;flex-wrap:wrap;gap:7px;width:auto;}
.modal-tag{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border:1px solid var(--border);color:var(--muted);}

/* ── GALLERY (free grid) ── */
.modal-gallery-section{padding:40px 52px 52px;}
.modal-gallery-section h3{
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin-bottom:24px;font-weight:400;
}
.modal-gallery-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.modal-gallery-item{
  position:relative;overflow:hidden;
  background:var(--bg);
  cursor:auto;
}
.modal-gallery-item img{
  width:100%;display:block;
  object-fit:cover;
}
.modal-gallery-item .mgal-cap{
  padding:10px 14px;
  font-size:.65rem;letter-spacing:.08em;
  color:var(--muted);line-height:1.5;
}


/* ── Mobile ── */
@media(max-width:768px){
  .modal-info{padding:28px 20px 28px;}
  .modal-gallery-section{padding:24px 20px 40px;}
  .modal-details{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:28px;overflow:hidden;width:100%;}
  .modal-gallery-grid{grid-template-columns:1fr;}
  .modal-gallery-item.wide{grid-column:span 1;}
  #modal-box{margin-bottom:40px;}
}