/* Global */
html{scroll-behavior:smooth; scroll-padding-top:clamp(72px,10vw,92px)}
:root{
  --bg-color:#0a0a0a; --text-color:#eaeaea; --accent:#7E735F;
  --header-bg:transparent; --transition:.3s ease;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font-title:'Newsreader',serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  --line:rgba(255,255,255,.16); --card:rgba(255,255,255,.05);
  --panel-bg: rgba(20,20,20,.70);
  --gutter:8vw;

  --ring:#b6aa93;
  --muted:rgba(255,255,255,.72);
}
[data-theme='light']{
  --bg-color:#fbfbfa; --text-color:#0a0a0a; --header-bg:transparent;
  --line:rgba(0,0,0,.14); --card:rgba(0,0,0,.035);
  --panel-bg: rgba(255,255,255,.88);
  --muted:rgba(0,0,0,.64);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg-color); color:var(--text-color);
  font-family:var(--font-body); font-weight:300; overflow-x:hidden;
  transition:background var(--transition),color var(--transition);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px}

/* Background gradient canvas */
#bg-canvas{position:fixed;inset:0;z-index:-2;will-change:transform}

/* Splash */
.preload main{opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s ease}
.splash{
  position:fixed; inset:0; display:grid; place-items:center; background:var(--bg-color);
  z-index:50; transition:visibility .6s ease;
  clip-path: inset(0 0 0 0);
  will-change:clip-path;
}
.splash.hidden{opacity:0; visibility:hidden}
.splash.wipe-out{ animation:splashCurtain 1200ms cubic-bezier(.4,0,.2,1) forwards }
@keyframes splashCurtain{
  from{ clip-path: inset(0 0 0 0) }
  to{ clip-path: inset(0 0 0 100%) }
}
.splash-brand{display:flex; align-items:center; gap:clamp(10px,2vw,16px)}
.splash-logo{height:clamp(42px,5vw,56px);width:auto;border-radius:12px; filter:grayscale(100%) contrast(105%)}
.splash-title{font-size:clamp(1.2rem,2.6vw,1.8rem); font-family:var(--font-body); font-weight:500; letter-spacing:0; overflow:hidden}
.splash-title .letters .char{display:inline-block; opacity:0; transform:translateY(.7em); transition:opacity .42s ease, transform .42s ease}

/* Frame */
.frame{position:fixed;inset:0 0 auto 0;height:clamp(72px,10vw,92px);display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:10}
.frame-left,.frame-right{padding:clamp(12px,2.4vw,24px) var(--gutter);display:flex;align-items:center;gap:clamp(12px,1.6vw,18px);pointer-events:auto}
.frame-left.hidden{opacity:0}
.logo{height:clamp(32px,4.6vw,42px);width:auto;border-radius:10px;filter:grayscale(100%) contrast(105%)}
.brand-line{font-weight:500;letter-spacing:.12px;font-size:clamp(1.05rem,2.2vw,1.42rem)}

/* Buttons */
.btn-ghost,.btn-solid{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:999px; border:1px solid var(--line);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
  will-change:transform, box-shadow;
}
.btn-ghost{padding:.72rem 1.1rem; background:var(--card); color:var(--text-color); font-size:clamp(.92rem,1.3vw,1.02rem)}
.btn-ghost:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.14)}
.btn-solid{padding:.92rem 1.35rem; background:var(--text-color); color:var(--bg-color); font-weight:500}
.btn-solid.big{padding:1.05rem 1.45rem}
.btn-solid:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.18)}
.theme-top,.m-close{
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text-color);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out), border-color .18s var(--ease-out);
}
.theme-top:hover,.m-close:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.14)}
.menu-top{display:none; width:42px;height:42px;place-items:center;cursor:pointer;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text-color);transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out)}
.menu-top:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.14)}

/* Text link underline */
a:not(.btn-solid):not(.btn-ghost):not(.theme-top):not(.menu-top):not(.m-close):not(.modal-close):not(.p-card){
  background-image:linear-gradient(currentColor,currentColor);
  background-position:0 100%; background-repeat:no-repeat; background-size:0 1px;
  transition:background-size .22s var(--ease), opacity .2s var(--ease);
}
.footer .social a,
.side-menu a{ background-image:none !important }
a:hover:not(.btn-solid):not(.btn-ghost):not(.theme-top):not(.menu-top):not(.m-close):not(.modal-close):not(.p-card){
  background-size:100% 1px; opacity:1;
}

/* Vertical menu */
.side-menu.left{
  position:fixed; left:calc(var(--gutter) - 6px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:24px; z-index:5;
  position:fixed;
}
.side-menu{ position:fixed; }
.side-menu .tracker{
  position:absolute;
  width:18px; height:18px; border-radius:999px;
  background:currentColor; opacity:.14;
  filter:saturate(1.1);
  transform:translate(0,0); transition:transform 420ms var(--ease-out);
  pointer-events:none;
}
.side-menu a{
  position:relative;
  display:flex; align-items:center; gap:.9rem; color:var(--text-color);
  opacity:.78;
  transition:opacity .35s var(--ease-out), color .35s var(--ease-out);
  font-size:clamp(1rem,1.5vw,1.12rem);
  will-change:opacity;
}
.side-menu a:hover{opacity:1}
.side-menu a.active{opacity:1}
.side-menu .dot{
  width:12px; height:12px; border-radius:50%; border:1px solid var(--line); background:transparent;
  transition:background .35s var(--ease-out), transform .35s var(--ease-out), border-color .35s var(--ease-out)
}
.side-menu a:hover .dot{transform:scale(1.04)}
.side-menu a.active .dot{background:var(--text-color); transform:scale(1.12); border-color:transparent}

/* NEW: subtle hover animation on label */
.side-menu a .label{
  position:relative; display:inline-block;
  transform:translateY(0);
  transition:transform .28s var(--ease-out), opacity .28s var(--ease-out);
}
.side-menu a .label::after{
  content:""; position:absolute; left:0; bottom:-2px;
  height:1px; width:0; background:currentColor; opacity:.5;
  transition:width .35s var(--ease-out), opacity .35s var(--ease-out);
}
.side-menu a:hover .label{ transform:translateY(-1px) }
.side-menu a:hover .label::after{ width:100%; opacity:.85 }

/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.projects .container{max-width:1460px}

/* Ensure anchored sections land cleanly under the fixed frame */
.section, .hero { scroll-margin-top:clamp(72px,10vw,92px) }

/* HERO */
.hero{min-height:100vh; min-height:100svh; min-height:100dvh; display:grid;place-items:center;position:relative}
.hero-art{padding-top:clamp(72px,11vw,116px)}
.orb-bg{position:absolute; inset:auto 0 12vh 0; display:grid; place-items:center; pointer-events:none; z-index:-1}
.orb-svg{filter:blur(16px) saturate(1.02); opacity:.24; will-change:filter, transform}
.orb-svg .guide{fill:none; stroke:var(--line); stroke-width:1.1}
.orb-svg .node{fill:none; stroke:var(--text-color); stroke-width:1.5}
.orb-svg .node.solid{fill:var(--text-color)}
.orb-svg .nodes{transform-origin:110px 110px; animation:slowspin 40s linear infinite; will-change:transform}
@keyframes slowspin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.hero-center{display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(18px,2.8vw,24px)}
.meta-pill{
  display:inline-block; padding:.66rem 1.24rem; border-radius:999px;
  border:1px solid var(--line); background:var(--card);
  font-size:clamp(.84rem,1.2vw,1rem); opacity:.94; letter-spacing:.12px;
}
.hero-headline{font-family:var(--font-title); font-weight:400; font-size:clamp(2.2rem,6.6vw,4.4rem); letter-spacing:.08px; line-height:1.06; max-width:22ch}
.hero-headline .yt{
  display:inline-block; font-size:1.12em; line-height:1.03;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-size:0 1px; background-position:0 100%;
  transition:background-size .25s ease;
}
.hero-headline .yt:hover{ background-size:100% 1px; }
.hero-sub{font-size:clamp(1.02rem,1.8vw,1.2rem);max-width:62ch; opacity:.92}

/* Sections */
.section{padding:clamp(6.6rem,11vw,10.6rem) 0}
.section-title{
  font-family:var(--font-title);
  font-size:clamp(2rem,4vw,2.9rem);
  font-weight:400;
  margin:0 0 clamp(1.8rem,3vw,2.6rem);
  text-align:left;
  letter-spacing:.06px;
}
.sub-title{
  font-family:var(--font-title);
  font-size:clamp(1.4rem,2.4vw,1.8rem);
  font-weight:400;
  margin:clamp(1.6rem,2.6vw,2.2rem) 0 .6rem 0;
}

/* ---------- PROSE ---------- */
.prose .prose-wrap{max-width:820px; margin:0}
.prose .prose-wrap p{
  line-height:1.72;
  font-size:clamp(1.04rem,1.8vw,1.2rem);
  color:var(--muted);
  margin:0 0 1.35rem 0;
}
.prose .prose-wrap p:last-child{margin-bottom:0}

/* ---------- PROJECTS GRID ---------- */
.collage-grid{
  display:grid;
  grid-auto-flow:dense;
  gap:clamp(22px,3.2vw,30px);
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
}
@media (min-width: 1500px){
  .collage-grid{grid-template-columns:repeat(auto-fit, minmax(330px, 1fr))}
}
.p-card{
  position:relative; overflow:hidden; border-radius:22px; background:var(--card); border:1px solid var(--line); cursor:pointer; transform:translateZ(0);
  perspective:800px; transform-style:preserve-3d; transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
  aspect-ratio: 16 / 11; will-change:transform;
}
.p-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.14); border-color:rgba(255,255,255,.18) }
.p-card.wide{grid-column:span 2; aspect-ratio: 21 / 9}
.p-card.tall{aspect-ratio: 3 / 4}
@media (max-width: 980px){
  .p-card.wide{grid-column:span 1; aspect-ratio: 16 / 10}
  .p-card.tall{aspect-ratio: 4 / 5}
}
.p-img{display:block; width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.03); transition:transform .6s var(--ease); will-change:transform}
.p-card:hover .p-img{transform:scale(1.015)}

/* NEW Hover Overlay: blurred veil with large copy */
.p-hover{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(14px,3vw,24px);
  opacity:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.38));
  backdrop-filter:blur(6px);
  transition:opacity .34s var(--ease-out), transform .34s var(--ease-out);
  transform:scale(.985);
}
.p-card:hover .p-hover{opacity:1; transform:scale(1)}
.p-line{
  font-size:clamp(1.05rem,2.4vw,1.6rem);
  color:#fff; opacity:.98; letter-spacing:.2px; line-height:1.25;
  max-width:22ch;
}
/* Remove the old sheen sweep */
.p-card::after{ content:none; }

/* ---------- CONTACT ---------- */
.contact-cta{position:relative}
.contact-wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  align-items:center;
  gap:clamp(32px,7vw,80px);
}
.contact-title{
  font-family:var(--font-title);
  font-weight:400;
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.06;
  letter-spacing:.06px;
}
.contact-title .muted{color:var(--muted)}
.contact-sub{
  margin-top:.9rem;
  max-width:60ch;
  color:var(--muted);
  font-size:clamp(1.02rem,1.7vw,1.18rem);
}
.contact-actions{justify-self:end}
@media (max-width: 900px){
  .contact-wrap{grid-template-columns:1fr; text-align:left}
  .contact-actions{justify-self:start}
}

/* Reduce spacing below the contact section only */
#contact.section{
  padding-bottom: clamp(3.6rem, 8vw, 6rem);
}

/* Modal — subtler, nonlinear pop-in; larger panel; refined layout */
.modal{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.5); backdrop-filter:saturate(110%) blur(4px);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease-out), visibility .28s var(--ease-out);
  z-index:60; padding:16px;
}
.modal.open{opacity:1; visibility:visible}
.modal-panel{
  width:min(1080px,96vw);
  background:var(--panel-bg);
  border:1px solid var(--line);
  border-radius:22px;
  color:var(--text-color);
  box-shadow:0 16px 48px rgba(0,0,0,.38);
  padding:clamp(18px,2vw,26px);
  will-change:transform, opacity, filter;
  animation:modalPopIn 520ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes modalPopIn{
  0%   { opacity:0; transform:translateY(10px) scale(.985); filter:blur(6px); }
  60%  { opacity:1; transform:translateY(0) scale(1.008); filter:blur(0.5px); }
  100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.modal-title{
  font-family:var(--font-title);
  font-weight:400;
  font-size:clamp(1.2rem,2.6vw,1.7rem);
  margin:0 0 clamp(10px,1.6vw,14px);
}
.modal-body{
  display:grid; gap:clamp(14px,2vw,22px);
  grid-template-columns: 1.15fr .85fr;
  align-items:start;
}
.modal-copy{display:flex; flex-direction:column; gap:clamp(12px,1.6vw,16px)}
.modal-desc{
  opacity:.94; font-size:clamp(1.02rem,1.7vw,1.18rem); line-height:1.6;
}
.modal-btn{align-self:flex-start}

/* Gallery */
.scroller-wrap{
  position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--line); background:var(--card);
  min-height:clamp(220px,26vw,320px);
}
.scroller{display:flex; gap:0; animation:scrollx 30s linear infinite; will-change:transform}
.scroller img{height:clamp(220px,26vw,320px); width:auto; object-fit:cover; display:block}
@keyframes scrollx { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Footer */
.site-footer.footer{
  background:transparent;
  color:var(--text-color);
  padding:clamp(2rem,5vw,4.6rem) 0 0;
  min-height:clamp(360px, 55vh, 90vh);
  display:flex;
}
.site-footer .inner.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--gutter);
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.footer .row{
  display:grid;
  grid-template-columns:repeat(5, max-content);
  column-gap:clamp(32px, 5vw, 96px);
  align-items:flex-start;
  width:max-content;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:clamp(72px, 3vw, 96px);
  justify-items:start;
}
.footer .widget h3{font-family:var(--font-title); font-size:clamp(1rem,1.6vw,1.08rem);margin-bottom:.7rem;font-weight:400}
.footer .widget ul{list-style:none;padding:0;margin:0}
.footer .widget ul li{margin:.52rem 0}
.footer .widget ul li a{color:var(--text-color);opacity:.9}
.footer .widget ul li a:hover{opacity:1}
.footer .social{display:flex;gap:1rem;margin-top:.8rem}
.footer .social a{
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--card);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out), border-color .18s var(--ease-out);
}
.footer .social a:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.16)}
.footer .social a i{font-size:1.16rem; color:var(--text-color); opacity:.95}
.footer .widget h2{
  font-family:var(--font-title);
  font-weight:400;
  line-height:1.22;
  letter-spacing:.2px;
  word-spacing:2px;
  margin-top:.8rem;
}
.footer .footer-bottom{
  text-align:center;
  margin-top:0;
  padding:clamp(12px, 2vw, 18px);
  opacity:.8;
  font-size:clamp(.92rem,1.6vw,1.02rem)
}
.footer .footer-logo{height:78px;border-radius:16px}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(10px) scale(.995);transition:opacity .5s var(--ease), transform .5s var(--ease); will-change:opacity, transform}
[data-reveal].is-in{opacity:1;transform:none}

/* Mobile menu */
.m-menu{
  position:fixed; inset:0; display:grid; place-items:end;
  background:rgba(0,0,0,.28);
  z-index:70;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease-out);
}
.m-menu.open{opacity:1; visibility:visible; pointer-events:auto}
.m-menu.closing{opacity:0; pointer-events:none}
.m-panel{
  width:100%; max-width:520px; margin-left:auto; background:rgba(30,30,30,.5);
  backdrop-filter:blur(14px) saturate(110%); border-left:1px solid var(--line);
  color:var(--text-color); height:100dvh; padding:18px 24px 24px; display:flex; flex-direction:column; gap:14px;
  transform:translateX(30px); opacity:0; transition:transform .36s var(--ease-out), opacity .36s var(--ease-out);
}
.m-menu.open .m-panel{transform:translateX(0); opacity:1}
.m-menu.closing .m-panel{transform:translateX(30px); opacity:0}
.m-head{display:flex; align-items:center; justify-content:flex-end}
.m-links{list-style:none; padding:18px 0; margin:auto 0; display:flex; flex-direction:column; align-items:flex-start; gap:24px}
.m-links a{font-size:clamp(1.6rem,6vw,2rem); line-height:1.18; opacity:.96}
.m-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start}

/* Utilities */
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Responsive controls */
@media (max-width: 900px){
  .side-menu.left{display:none}
  .contact-btn,.theme-top{display:none}
  .menu-top{display:grid}
  .m-actions .theme-top{display:grid}
  .footer .row{
    width:100%;
    grid-template-columns:1fr 1fr;
    column-gap:clamp(18px,5vw,32px);
    row-gap:32px;
    padding:0 clamp(18px,6vw,26px);
    justify-content:start;
    margin-left:auto;
    margin-right:auto;
  }
  .modal-body{ grid-template-columns:1fr; }
  .scroller-wrap{ min-height:clamp(200px,48vw,280px) }
  .scroller img{ height:clamp(200px,48vw,280px) }
}
@media (max-width: 560px){
  .footer .row{grid-template-columns:1fr; text-align:left}
  .site-footer.footer{min-height:auto; padding-top:clamp(28px,6.4vw,36px)}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .orb-svg .nodes,
  .scroller,
  .splash.wipe-out{animation:none}
  .m-menu{transition:none}
  .m-panel{transition:none; transform:none !important; opacity:1 !important}
  .side-menu a{transition:none}
  .side-menu .tracker{transition:none}
  .side-menu a .label{transition:none}
  .side-menu a .label::after{transition:none}
  .modal-panel{animation:none}
}