*{margin:0;padding:0;box-sizing:border-box;}

/* Monochrome tokens — dark / light via data-theme on <html> (:root = dark fallback) */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --c0:#080808;
  --c1:#0c0c0c;
  --c2:#121212;
  --c3:#181818;
  --c4:#262626;
  --tx:#f2f2f2;
  --tx2:#a3a3a3;
  --tx3:#737373;
  --accent:#f5f5f5;
  --on-accent:#0a0a0a;
  /* Secondary accent — draws the eye without replacing primary chrome */
  --highlight:#38bdf8;
  --a1:var(--accent);
  --a2:#b5b5b5;
  --a3:#8a8a8a;
  --a4:#6e6e6e;
  --a1s:rgba(255,255,255,0.09);
  --a2s:rgba(255,255,255,0.06);
  --a3s:rgba(255,255,255,0.06);
  --bd:rgba(255,255,255,0.09);
  --bd2:rgba(255,255,255,0.16);
  --nav-bg:rgba(8,8,8,0.92);
  --grid-line:rgba(255,255,255,0.055);
  --shadow-glow:rgba(0,0,0,0.55);
  --orb-a:rgba(255,255,255,0.055);
  --orb-b:rgba(255,255,255,0.04);
  --orb-c:rgba(255,255,255,0.045);
  --travel-watermark:rgba(255,255,255,0.035);
  --madd-bg:rgba(0,0,0,0.55);
  --overlay-tint:rgba(255,255,255,0.14);
  --hero-drop:rgba(255,255,255,0.08);
  --nav-pill-bg:rgba(22,22,22,0.72);
  --nav-pill-border:rgba(255,255,255,0.12);
  --nav-pill-shadow:0 12px 40px rgba(0,0,0,0.45),0 2px 12px rgba(0,0,0,0.35);
  --nav-contact-bg:#fafafa;
  --nav-contact-fg:#0a0a0a;
}
[data-theme="light"]{
  color-scheme:light;
  --c0:#f4f4f4;
  --c1:#fafafa;
  --c2:#ececec;
  --c3:#e4e4e4;
  --c4:#d6d6d6;
  --tx:#0a0a0a;
  --tx2:#525252;
  --tx3:#737373;
  --accent:#0a0a0a;
  --on-accent:#fafafa;
  --highlight:#0284c7;
  --a1:var(--accent);
  --a2:#3d3d3d;
  --a3:#525252;
  --a4:#737373;
  --a1s:rgba(0,0,0,0.06);
  --a2s:rgba(0,0,0,0.05);
  --a3s:rgba(0,0,0,0.05);
  --bd:rgba(0,0,0,0.09);
  --bd2:rgba(0,0,0,0.14);
  --nav-bg:rgba(250,250,250,0.96);
  --grid-line:rgba(0,0,0,0.07);
  --shadow-glow:rgba(0,0,0,0.12);
  --orb-a:rgba(0,0,0,0.045);
  --orb-b:rgba(0,0,0,0.035);
  --orb-c:rgba(0,0,0,0.04);
  --travel-watermark:rgba(0,0,0,0.04);
  --madd-bg:rgba(255,255,255,0.92);
  --overlay-tint:rgba(0,0,0,0.08);
  --hero-drop:rgba(0,0,0,0.1);
  --nav-pill-bg:rgba(255,255,255,0.78);
  --nav-pill-border:rgba(0,0,0,0.08);
  --nav-pill-shadow:0 10px 40px rgba(0,0,0,0.1),0 2px 12px rgba(0,0,0,0.06);
  --nav-contact-bg:#ffffff;
  --nav-contact-fg:#0a0a0a;
}

:root{
  --sans:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

html{background:var(--c0);}
body{
  background:var(--c0);color:var(--tx);font-family:var(--body);overflow-x:hidden;
  font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color 0.35s ease,color 0.35s ease;
}

/* ── NOISE OVERLAY ── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:0.35;
}

/* ── NAV ── */
.site-nav{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 2.5rem;height:58px;position:sticky;top:0;z-index:5000;
  background:var(--nav-bg);
  border-bottom:0.5px solid var(--bd);
  transition:background-color 0.35s ease,border-color 0.35s ease;
  isolation:isolate;
}

.nav-menu{
  flex:1;display:flex;justify-content:center;align-items:center;min-width:0;
}
.nav-menu-panel{display:flex;justify-content:center;width:100%;}

.nav-end{display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0;}

@media (min-width:901px){
  .nav-float-pill{display:contents;}
  .nav-avatar{display:none!important;}
  .nav-cta-mobile{display:none!important;}
  .nav-cta-desktop{display:inline!important;}
}

.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}

.nav-float-pill{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.nav-avatar{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--c4),var(--c2));
  border:0.5px solid var(--bd2);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 4px var(--shadow-glow);
}
.nav-avatar-inner{
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:-0.03em;
  color:var(--tx);
}

.nav-micons{
  display:none;
  align-items:center;
  justify-content:center;
  gap:2px;
  flex:1;
  min-width:0;
}
.nav-sec-icon{
  flex-shrink:0;
  width:44px;
  height:44px;
  padding:0;
  border-radius:999px;
  border:0.5px solid var(--bd2);
  background:var(--c3);
  color:var(--tx2);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s,border-color 0.2s,color 0.2s,transform 0.15s;
}
.nav-sec-icon:hover{color:var(--tx);}
.nav-sec-icon.on{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
  box-shadow:0 2px 14px var(--shadow-glow);
}
.nav-sec-icon:active{transform:scale(0.96);}

.nav-cta-mobile{display:none;}
.nav-cta-desktop{display:inline;}

.theme-toggle{
  width:38px;height:38px;border-radius:999px;
  border:0.5px solid var(--bd2);background:var(--c3);color:var(--tx);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background 0.2s,border-color 0.2s,transform 0.15s;
}
.theme-toggle:hover{background:var(--c2);border-color:var(--bd2);}
.theme-toggle:active{transform:scale(0.96);}
[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
[data-theme="light"] .theme-toggle .icon-sun{display:none;}
[data-theme="light"] .theme-toggle .icon-moon{display:block;}
.logo{
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-0.02em;
  display:flex;align-items:center;gap:8px;
}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--highlight);box-shadow:0 0 0 1px var(--bd2);}
.nav-pills{display:flex;background:var(--c2);border-radius:100px;padding:4px;border:0.5px solid var(--bd);}
.npill{
  padding:6px 18px;border-radius:100px;font-size:12px;font-weight:500;
  cursor:pointer;border:none;background:none;color:var(--tx2);
  font-family:var(--body);transition:all 0.25s cubic-bezier(.4,0,.2,1);letter-spacing:0.2px;
  display:inline-flex;align-items:center;justify-content:center;
}
.npill:hover{color:var(--tx);}
.npill.on{background:var(--accent);color:var(--on-accent);box-shadow:0 2px 14px var(--shadow-glow);}
.nav-cta{
  padding:8px 20px;background:var(--c3);border:0.5px solid var(--bd2);
  border-radius:100px;font-size:12px;font-weight:500;color:var(--tx);
  cursor:pointer;font-family:var(--body);transition:all 0.2s;
}
.nav-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 2px 18px var(--shadow-glow);}
a.nav-cta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}

/* Desktop: one centered column for the whole UI (nav + each tab panel share the same width) */
@media (min-width:901px){
  :root{
    --page-max:960px;
  }
  .site-nav,
  .page{
    max-width:var(--page-max);
    margin-left:auto;
    margin-right:auto;
    width:100%;
    box-sizing:border-box;
  }
}

/* ── PAGE SYSTEM ── */
.page{
  display:none;
  animation:pageIn 0.5s cubic-bezier(.4,0,.2,1);
  background:var(--c0);
  position:relative;
}
.page.on{display:block;}
/* Checker grid only inside the page column (not viewport side gutters) */
.page::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:60px 60px;
  animation:gridDrift 20s linear infinite;
}
.page > *{
  position:relative;
  z-index:1;
}
@keyframes pageIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

/* ═══════════ PAGE 1 — PORTFOLIO ═══════════ */

/* HERO */
.hero{
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(3.25rem,7vh,5rem) 2.5rem clamp(2.25rem,5vh,3rem);
  position:relative;overflow:hidden;
}
.hero-inner{
  display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;
  width:100%;max-width:1180px;margin:0 auto;position:relative;z-index:2;
  flex:0 1 auto;
}

@keyframes gridDrift{from{transform:translateY(0);}to{transform:translateY(60px);}}

/* Orbs */
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:orbFloat 8s ease-in-out infinite;}
.orb1{width:400px;height:400px;background:var(--orb-a);top:-100px;right:-80px;animation-delay:0s;}
.orb2{width:300px;height:300px;background:var(--orb-b);bottom:-50px;left:100px;animation-delay:-3s;}
.orb3{width:200px;height:200px;background:var(--orb-c);top:40%;right:20%;animation-delay:-5s;}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-30px) scale(1.05);}}

.hero-content{
  position:relative;z-index:2;
  flex:1 1 min(100%,520px);max-width:720px;min-width:min(100%,280px);
}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--a1s);border:0.5px solid var(--bd2);
  padding:7px 16px;border-radius:100px;margin-bottom:2rem;
  animation:fadeSlideUp 0.6s 0.1s both;
}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--highlight);opacity:0.95;animation:pulse 2s infinite;}
.eyebrow-text{font-size:11px;font-weight:500;color:var(--tx2);letter-spacing:0.5px;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

.hero-h1{
  font-family:var(--sans);font-size:clamp(44px,7vw,80px);
  font-weight:700;line-height:0.95;letter-spacing:-0.03em;
  margin-bottom:1.5rem;
  animation:fadeSlideUp 0.6s 0.2s both;
  font-optical-sizing:auto;
}
.hero-h1 .word1{display:block;color:var(--tx);font-size:clamp(36px,6vw,64px);letter-spacing:-2px;}
.hero-h1 .word2{
  display:block;
  min-height:1.05em;
  animation:fadeSlideUp 0.6s 0.2s both;
}
.hero-h1 .word2 .rotating-text{
  display:inline-block;
  background:linear-gradient(135deg,var(--highlight) 0%,var(--tx) 42%,var(--tx2) 58%,var(--highlight) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:200% 200%;
  animation:gradShift 4s ease infinite;
  transition:opacity 0.42s cubic-bezier(.4,0,.2,1),transform 0.42s cubic-bezier(.4,0,.2,1);
  will-change:opacity,transform;
}
.hero-h1 .rotating-text.rotating-text--out{
  opacity:0;
  transform:translateY(-0.3em);
}
.hero-h1 .rotating-text.rotating-text--in{
  animation:rotatingTextIn 0.52s cubic-bezier(.4,0,.2,1) forwards,gradShift 4s ease infinite;
}
@keyframes rotatingTextIn{
  from{opacity:0;transform:translateY(0.35em);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .page::before{animation:none;}
  .hero-h1 .word2 .rotating-text{
    animation:none;
    transition:none;
  }
  .hero-h1 .rotating-text.rotating-text--in{animation:none;}
}
@keyframes gradShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

.hero-sub{
  font-size:16px;color:var(--tx2);font-weight:300;line-height:1.75;
  max-width:480px;margin-bottom:2.5rem;
  animation:fadeSlideUp 0.6s 0.3s both;
}

.hero-actions{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  animation:fadeSlideUp 0.6s 0.4s both;
}
.hero-actions-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.hero-actions-row .hero-social{margin-left:0;}
.hero-social{display:flex;align-items:center;gap:8px;margin-left:4px;}
.btn-icon{
  width:44px;height:44px;border-radius:999px;
  border:0.5px solid var(--bd2);background:var(--c3);color:var(--tx);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;transition:border-color 0.2s,background 0.2s,color 0.2s,transform 0.15s;
}
.btn-icon:hover{border-color:var(--accent);background:var(--a1s);color:var(--accent);}
.btn-icon:active{transform:scale(0.96);}
.btn-icon svg{display:block;flex-shrink:0;}
a.btn-glow{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--on-accent);}
.btn-glow{
  padding:13px 28px;background:var(--accent);color:var(--on-accent);border:none;
  border-radius:100px;font-size:13px;font-weight:500;cursor:pointer;
  font-family:var(--body);position:relative;overflow:hidden;
  transition:transform 0.2s,box-shadow 0.2s,background 0.2s,color 0.2s;
  box-shadow:0 4px 22px var(--shadow-glow);
}
.btn-glow::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
  opacity:0;transition:opacity 0.2s;
}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--shadow-glow);}
.btn-glow:hover::after{opacity:1;}
.btn-line{
  padding:13px 28px;background:transparent;color:var(--tx);
  border:0.5px solid var(--bd2);border-radius:100px;font-size:13px;
  font-weight:500;cursor:pointer;font-family:var(--body);
  transition:all 0.2s;
}
.btn-line:hover{border-color:var(--accent);color:var(--accent);background:var(--a1s);}
a.btn-line{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}

/* Scrolling tech strip */
.tech-strip{
  margin-top:4rem;position:relative;overflow:hidden;
  border-top:0.5px solid var(--bd);padding-top:1.5rem;
  animation:fadeSlideUp 0.6s 0.5s both;
}
.strip-label{font-size:10px;letter-spacing:0.12em;color:var(--highlight);margin-bottom:1rem;font-family:var(--mono);text-transform:uppercase;}
.strip-label.strip-label--plain{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:-0.01em;
  text-transform:none;
  color:var(--tx2);
}
.strip-track{display:flex;gap:0;width:max-content;animation:stripScroll 18s linear infinite;}
.strip-track:hover{animation-play-state:paused;}
.strip-item{
  display:flex;align-items:center;gap:8px;padding:6px 20px;
  border-right:0.5px solid var(--bd);font-size:12px;color:var(--tx2);white-space:nowrap;
}
.strip-icon{font-size:14px;}
@keyframes stripScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.s-label{font-size:10px;letter-spacing:0.12em;color:var(--highlight);margin-bottom:0.5rem;font-family:var(--mono);text-transform:uppercase;}
.s-heading{font-family:var(--sans);font-size:28px;font-weight:700;letter-spacing:-1px;margin-bottom:1.5rem;line-height:1.1;}

/* Projects (portfolio page) */
.projects-section{
  background:var(--c0);
}
.projects-section::before{
  content:"";
  display:block;
  height:0;
  border-top:0.5px solid var(--bd);
  margin:0 clamp(1rem,4vw,2rem);
}
.projects-section .exp-heading{margin-bottom:0;}
.projects-section .proj-top{
  padding:1.5rem clamp(1rem,4vw,2rem) 1.5rem;
}
.projects-section .proj-grid{
  padding:0 clamp(1rem,4vw,2rem) 2rem;
}

.proj-top{
  padding:3rem 2.5rem 2rem;
  display:flex;justify-content:space-between;align-items:flex-end;
  background:var(--c0);
}
.proj-count{font-family:var(--mono);font-size:11px;color:var(--tx3);margin-top:4px;letter-spacing:0.02em;}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  padding:6px 16px;border-radius:100px;font-size:11px;font-weight:500;
  border:0.5px solid var(--bd2);background:none;color:var(--tx2);
  cursor:pointer;font-family:var(--body);transition:all 0.2s;
}
.chip:hover{border-color:var(--accent);color:var(--accent);}
.chip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:0 2px 12px var(--shadow-glow);}

.proj-grid{
  padding:2rem 2.5rem;
  background:var(--c0);
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.proj-grid:not(.show-all) .pcard-extra{display:none !important;}
.proj-more-wrap{
  display:flex;justify-content:center;
  padding:0 clamp(1rem,4vw,2rem) 3rem;
  background:var(--c0);
}
.proj-more-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:0.01em;
  padding:10px 22px;border-radius:100px;
  background:var(--c1);color:var(--tx);
  border:0.5px solid var(--bd2);cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.proj-more-btn:hover{
  background:var(--a1s);border-color:var(--accent);color:var(--accent);transform:translateY(-1px);
}
.proj-more-icon{transition:transform .25s ease;}
.proj-more-btn[aria-expanded="true"] .proj-more-icon{transform:rotate(180deg);}
.pcard{
  background:var(--c1);border:0.5px solid var(--bd);border-radius:20px;
  padding:1.5rem;cursor:pointer;position:relative;overflow:hidden;
  transition:all 0.3s cubic-bezier(.4,0,.2,1);
}
.pcard::before{
  content:'';position:absolute;inset:0;border-radius:20px;opacity:0;
  transition:opacity 0.3s;
}
.pcard:hover{transform:translateY(-4px);border-color:var(--bd2);}
.pcard:hover::before{opacity:1;}
.pcard.featured{grid-column:span 2;background:var(--c1);}
.pcard.featured::before{background:radial-gradient(ellipse at 80% 20%,var(--a1s),transparent 60%);}
.pcard:not(.featured)::before{background:radial-gradient(ellipse at 100% 0%,var(--a2s),transparent 60%);}

.pbadge{
  display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;
  padding:4px 11px;border-radius:100px;margin-bottom:1rem;letter-spacing:0.3px;
}
.pb-ai,.pb-web,.pb-mob,.pb-tool{background:var(--a1s);color:var(--tx2);}

.pname{font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:-0.5px;margin-bottom:6px;}
.pdesc{font-size:12px;color:var(--tx2);line-height:1.65;margin-bottom:1rem;font-weight:300;}
.ptags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:1rem;}
.ptag{
  font-size:10px;padding:3px 9px;border-radius:4px;
  background:var(--c3);color:var(--tx3);border:0.5px solid var(--bd);
}
.pfoot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:1rem;border-top:0.5px solid var(--bd);
}
.pstatus{font-size:11px;color:var(--tx3);}
.pdots{display:flex;gap:3px;}
.pdot{width:6px;height:6px;border-radius:50%;}
.parr{font-size:18px;color:var(--tx3);transition:all 0.2s;}
.pcard:hover .parr{color:var(--accent);transform:translate(3px,-3px);}

/* ═══════════ PAGE 3 — TRAVEL ═══════════ */
.travel-hero{
  padding:3rem 2.5rem 2rem;position:relative;overflow:hidden;
  border-bottom:0.5px solid var(--bd);
  background:var(--c0);
}
.travel-bg-text{
  position:absolute;right:-20px;bottom:-40px;
  font-family:var(--sans);font-size:140px;font-weight:800;
  color:var(--travel-watermark);letter-spacing:-6px;line-height:1;
  pointer-events:none;user-select:none;
}
.travel-h{font-family:var(--sans);font-size:32px;font-weight:700;letter-spacing:-1px;margin-bottom:4px;}
.travel-sub{font-size:13px;color:var(--tx2);margin-bottom:1.5rem;}
.t-counters{display:flex;gap:2.5rem;}
.t-cnt-num{font-family:var(--sans);font-size:36px;font-weight:800;line-height:1;}
.t-cnt-label{font-size:11px;color:var(--tx3);margin-top:2px;}
.t-tabs{display:flex;gap:0;margin-top:2rem;border-bottom:0.5px solid var(--bd);}
.ttab{
  padding:8px 20px;font-size:12px;font-weight:500;cursor:pointer;
  border:none;background:none;color:var(--tx2);font-family:var(--body);
  border-bottom:2px solid transparent;margin-bottom:-0.5px;transition:all 0.2s;
}
.ttab.on{color:var(--tx);border-bottom-color:var(--accent);}
.ttab:hover:not(.on){color:var(--tx);}

.tpanel{display:none;padding:2rem 2.5rem;background:var(--c0);}
.tpanel.on{display:block;animation:pageIn 0.35s ease;}

/* Photo mosaic */
.mosaic{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:180px 180px;
  gap:6px;border-radius:16px;overflow:hidden;
}
.mphoto{
  background:var(--c2);position:relative;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.3s,filter 0.3s;
}
.mphoto:hover{filter:brightness(1.15);z-index:2;}
.mphoto:hover .moverlay{opacity:1;}
.mphoto:nth-child(1){grid-column:span 3;grid-row:span 2;}
.mphoto:nth-child(2){grid-column:span 2;}
.mphoto:nth-child(3){grid-column:span 1;}
.mphoto:nth-child(4){grid-column:span 1;}
.mphoto:nth-child(5){grid-column:span 2;}
.mphoto:nth-child(6){grid-column:span 3;}
.mphoto-inner{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;}
.mphoto-emoji{font-size:36px;}
.mphoto:nth-child(1) .mphoto-emoji{font-size:56px;}
.mphoto-name{font-size:11px;color:var(--tx2);font-weight:500;}
.moverlay{
  position:absolute;inset:0;background:var(--overlay-tint);
  opacity:0;transition:opacity 0.2s;display:flex;align-items:center;justify-content:center;
  font-size:24px;
}
.madd-btn{
  position:absolute;bottom:8px;right:8px;font-size:9px;
  background:var(--madd-bg);color:var(--tx2);padding:3px 8px;
  border-radius:3px;border:0.5px solid var(--bd);backdrop-filter:blur(4px);
}

/* Itinerary */
.itin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.icard{
  background:var(--c1);border:0.5px solid var(--bd);border-radius:18px;
  padding:1.25rem;cursor:pointer;transition:all 0.25s;
  position:relative;overflow:hidden;
}
.icard::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--tx3);transform:scaleX(0);
  transform-origin:left;transition:transform 0.3s;border-radius:0 0 18px 18px;
}
.icard:hover{border-color:var(--bd2);transform:translateY(-3px);}
.icard:hover::after{transform:scaleX(1);}
.icard-flag{font-size:28px;margin-bottom:8px;}
.icard-name{font-family:var(--sans);font-size:15px;font-weight:700;margin-bottom:4px;}
.icard-dur{font-size:10px;color:var(--tx2);background:var(--a1s);padding:2px 9px;border-radius:100px;display:inline-block;margin-bottom:10px;}
.icard-steps{display:flex;flex-direction:column;gap:6px;}
.istep{display:flex;gap:8px;font-size:11px;color:var(--tx2);}
.istep-dot{width:5px;height:5px;border-radius:50%;background:var(--tx3);flex-shrink:0;margin-top:4px;}

/* Dream */
.dream-masonry{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;
}
.dcard{
  background:var(--c1);border:0.5px solid var(--bd);border-radius:16px;
  padding:1.25rem;text-align:center;cursor:pointer;
  transition:all 0.3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;
}
.dcard::before{
  content:'';position:absolute;inset:0;border-radius:16px;
  background:radial-gradient(circle at 50% 0%,var(--a1s),transparent 70%);
  opacity:0;transition:opacity 0.3s;
}
.dcard:hover{transform:translateY(-5px) scale(1.02);border-color:var(--bd2);}
.dcard:hover::before{opacity:1;}
.d-emoji{font-size:36px;display:block;margin-bottom:8px;}
.d-name{font-size:13px;font-weight:600;font-family:var(--sans);margin-bottom:2px;}
.d-sub{font-size:10px;color:var(--tx3);}
.d-tag{
  display:inline-block;margin-top:8px;font-size:9px;font-weight:600;
  padding:2px 8px;border-radius:100px;
  background:var(--a1s);color:var(--tx2);letter-spacing:0.3px;
}

/* ═══════════ PAGE 4 — TECH NEWS ═══════════ */
.news-top{
  padding:2.5rem 2.5rem 1.5rem;
  display:flex;align-items:flex-end;justify-content:space-between;
  border-bottom:0.5px solid var(--bd);
  background:var(--c0);
}
.news-h{font-family:var(--sans);font-size:32px;font-weight:700;letter-spacing:-1px;}
.live-pill{
  display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;
  color:var(--tx2);background:var(--a1s);padding:5px 12px;border-radius:100px;
  border:0.5px solid var(--bd);margin-bottom:4px;
}
.live-dot2{width:5px;height:5px;border-radius:50%;background:var(--highlight);animation:pulse 1.2s infinite;}

.news-body{display:grid;grid-template-columns:1fr 270px;gap:0;padding:0 2.5rem 3rem;background:var(--c0);}
.news-main-col{padding-right:2rem;border-right:0.5px solid var(--bd);}
.news-side-col{padding-left:1.75rem;padding-top:1.5rem;}

.nbig{
  padding:1.75rem 0;border-bottom:0.5px solid var(--bd);
  cursor:pointer;position:relative;transition:all 0.2s;
}
.nbig:hover .nbig-hl{color:var(--highlight);}
.nbig::before{
  content:'';position:absolute;left:-2.5rem;top:0;bottom:0;width:3px;
  background:var(--highlight);transform:scaleY(0);transform-origin:top;transition:transform 0.25s;
  border-radius:0 2px 2px 0;
}
.nbig:hover::before{transform:scaleY(1);}
.nkicker{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;color:var(--tx3);margin-bottom:8px;font-weight:500;}
.nbig-hl{
  font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:-0.5px;
  line-height:1.25;margin-bottom:8px;transition:color 0.2s;
}
.nsum{font-size:12px;color:var(--tx2);line-height:1.7;margin-bottom:10px;font-weight:300;}
.nfoot{display:flex;gap:14px;font-size:10px;color:var(--tx3);}
.nsrc{color:var(--tx2);font-weight:500;}

.ntopic{
  display:inline-block;font-size:9px;font-weight:700;letter-spacing:1px;
  padding:3px 9px;border-radius:100px;margin-bottom:8px;
}
.t-ai,.t-hw,.t-st,.t-sc{background:var(--a1s);color:var(--tx2);}

.trend-head{
  font-size:10px;letter-spacing:0.12em;color:var(--highlight);font-family:var(--mono);text-transform:uppercase;
  padding:1.5rem 0 0.75rem;border-bottom:0.5px solid var(--bd);margin-bottom:0;
}
.trow{
  display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:0.5px solid var(--bd);cursor:pointer;transition:all 0.2s;
}
.trow:hover{padding-left:6px;}
.trow:hover .trow-label{color:var(--highlight);}
.trow-n{font-family:var(--sans);font-size:20px;font-weight:800;color:var(--bd2);width:26px;flex-shrink:0;}
.trow-label{font-size:12px;font-weight:500;transition:color 0.2s;}
.trow-count{font-size:10px;color:var(--tx3);margin-left:auto;}

.digest-cta{
  margin-top:1.5rem;padding:1.25rem;
  border:0.5px solid var(--bd2);border-radius:16px;
  background:var(--c2);
  position:relative;overflow:hidden;
}
.digest-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 100% 100%,var(--a1s),transparent 60%);
}
.dc-icon{font-size:22px;margin-bottom:6px;}
.dc-title{font-size:13px;font-weight:600;font-family:var(--sans);margin-bottom:4px;position:relative;}
.dc-desc{font-size:11px;color:var(--tx2);margin-bottom:1rem;line-height:1.6;position:relative;}

/* Utilities (extracted layout) */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap;
}
.news-top-actions{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.btn-glow--block{width:100%;font-size:11px;padding:9px 0;}

/* Resume — experience, education, publication */
.experience-section{
  padding:3rem clamp(1rem,4vw,2rem);border-top:0.5px solid var(--bd);
  background:var(--c0);
}
.exp-section-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:12px 20px;
}
.experience-section .exp-heading{margin-bottom:0;flex:1 1 auto;min-width:min(100%,12rem);}
.exp-carousel-nav{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-shrink:0;}
.exp-carousel-shell{margin-top:1.5rem;}
.exp-arrow{
  flex-shrink:0;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;border:0.5px solid var(--bd2);background:var(--c3);color:var(--tx);
  cursor:pointer;transition:background 0.2s,border-color 0.2s,color 0.2s,opacity 0.2s;
}
.exp-arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--a1s);}
.exp-arrow:disabled{opacity:0.35;cursor:not-allowed;}
.exp-carousel{
  min-width:0;display:flex;gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:2px 0 6px;
  outline:none;
}
.exp-carousel:focus-visible{box-shadow:0 0 0 2px var(--highlight);}
@media (prefers-reduced-motion:reduce){
  .exp-carousel{scroll-behavior:auto;}
}
.exp-card{
  flex:0 0 min(440px,calc(100% - 24px));
  width:min(440px,calc(100% - 24px));
  max-width:440px;
  scroll-snap-align:start;
  background:var(--c1);border:0.5px solid var(--bd);border-radius:18px;padding:1.35rem;
  transition:border-color 0.25s;
  display:flex;flex-direction:column;min-height:0;
}
.exp-card:hover{border-color:var(--bd2);}
.exp-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:0.75rem;flex-shrink:0;}
.exp-role{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-0.3px;color:var(--highlight);}
.exp-co{font-size:12px;font-weight:600;color:var(--tx2);}
.exp-when{font-size:11px;color:var(--tx3);white-space:nowrap;}
.exp-loc{font-size:11px;color:var(--tx2);margin-bottom:0.65rem;flex-shrink:0;}
.exp-body{
  flex:1;min-height:0;max-height:min(380px,48vh);
  overflow-y:auto;overflow-x:hidden;
  padding-right:6px;margin-right:-4px;
  -webkit-overflow-scrolling:touch;
}
.exp-subsec{margin-bottom:1.1rem;}
.exp-subsec:last-child{margin-bottom:0;}
.exp-subsec-title{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--highlight);
  margin-bottom:0.45rem;
}
.exp-bullets{margin:0;padding-left:1.1rem;font-size:12px;color:var(--tx2);line-height:1.65;font-weight:300;}
.exp-bullets li{margin-bottom:0.45rem;}
.exp-bullets strong{font-weight:600;color:var(--tx);}
@media (max-width:900px){
  .experience-section .exp-card{
    flex:0 0 100%;
    width:100%;
    max-width:none;
    min-width:0;
  }
}

.edu-resume-block{
  margin-top:2.5rem;
  padding-top:2.5rem;
  border-top:0.5px solid var(--bd);
}
.exp-section-head--title-only{
  justify-content:flex-start;
}
.edu-resume-block .exp-carousel--edu{
  overflow-x:visible;
  overscroll-behavior-x:auto;
  scroll-snap-type:none;
  flex-wrap:wrap;
}
.edu-resume-block .exp-carousel--edu .exp-card{
  flex:1 1 min(440px,calc(50% - 7px));
  width:auto;
  max-width:440px;
  min-width:0;
}
@media (max-width:900px){
  .edu-resume-block .exp-carousel--edu{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:14px;
  }
  .edu-resume-block .exp-carousel--edu .exp-card{
    flex:0 0 auto;
    width:100%;
    max-width:none;
  }
}

.pub-resume-block{
  margin-top:2.5rem;
  padding-top:2.5rem;
  border-top:0.5px solid var(--bd);
}
.pub-resume-block .pub-banner{margin-top:14px;}
.pub-resume-block .exp-section-head + .pub-banner{margin-top:1.5rem;}
.pub-banner{
  padding:1.25rem 1.35rem;border-radius:16px;
  border:0.5px solid var(--bd2);
  background:var(--c1);
}
.pub-title{font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.35;color:var(--tx);margin-bottom:0.5rem;}
.pub-meta{font-size:11px;color:var(--tx2);margin-bottom:0.65rem;}
.pub-link{font-size:12px;font-weight:500;color:var(--tx);text-decoration:none;border-bottom:0.5px solid transparent;}
.pub-link:hover{border-bottom-color:var(--highlight);}

/* Recommendations */
.reco-section{
  border-top:0.5px solid var(--bd);
  background:var(--c0);
  padding:3.25rem clamp(1rem,4vw,2rem) 4rem;
}
.reco-inner{max-width:1200px;margin:0 auto;}
.reco-section .s-heading{margin-bottom:0;}
.reco-sub{color:var(--tx2);font-size:14px;line-height:1.6;}
/* Recommendations live in the same horizontal carousel pattern as Experience
   so every card has the same width/height regardless of quote length. Long
   quotes scroll internally inside `.reco-quote`. */
.reco-card{
  flex:0 0 min(420px,calc(100% - 24px));
  width:min(420px,calc(100% - 24px));
  max-width:420px;
  scroll-snap-align:start;
  position:relative;
  background:var(--c1);
  border:none;
  border-radius:18px;
  padding:1.6rem 1.6rem 1.4rem;
  display:flex;flex-direction:column;gap:1.15rem;
  height:420px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.reco-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 100% 0%,var(--a1s),transparent 60%);
  opacity:.7;
}
.reco-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px var(--shadow-glow);
}
.reco-quote-mark{
  font-family:Georgia,'Times New Roman',serif;
  font-size:88px;line-height:0.6;font-weight:700;
  color:var(--tx);opacity:.14;
  position:absolute;top:1rem;right:1.1rem;
  pointer-events:none;
  user-select:none;
}
.reco-quote{
  font-size:14.5px;line-height:1.7;color:var(--tx);
  margin:0;position:relative;z-index:1;
  font-weight:400;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-right:0.5rem;
  scrollbar-width:thin;
  scrollbar-color:var(--bd2) transparent;
}
.reco-quote::-webkit-scrollbar{width:6px;}
.reco-quote::-webkit-scrollbar-track{background:transparent;}
.reco-quote::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:8px;}
.reco-quote::-webkit-scrollbar-thumb:hover{background:var(--tx3);}
.reco-author{
  display:flex;align-items:center;gap:.95rem;
  padding-top:1.1rem;
  border-top:0.5px dashed var(--bd2);
  position:relative;z-index:1;
  flex-shrink:0;
}
.reco-avatar{
  width:52px;height:52px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  border:0.5px solid var(--bd2);
  background:var(--c2);
}
.reco-meta{display:flex;flex-direction:column;min-width:0;}
.reco-name{
  font-family:var(--sans);font-weight:700;font-size:14px;color:var(--tx);line-height:1.25;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  width:fit-content;
  transition:color .2s ease;
}
.reco-name:hover{color:var(--highlight);}
.reco-link-icon{opacity:0.55;transition:opacity .2s ease, transform .2s ease;}
.reco-name:hover .reco-link-icon{opacity:1;transform:translate(1px,-1px);}
.reco-role{font-size:12px;color:var(--tx2);margin-top:2px;line-height:1.35;}
.reco-rel{
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;
  color:var(--tx3);margin-top:6px;text-transform:uppercase;
}
@media (max-width:680px){
  .reco-section{padding:2.5rem 1rem 3rem;}
  /* Same fixed height across all cards on mobile too — long quotes scroll
     inside `.reco-quote` so each carousel card is visually consistent. */
  .reco-card{padding:1.35rem 1.25rem 1.2rem;height:420px;}
  .reco-quote{font-size:13.5px;line-height:1.65;overflow-y:auto;padding-right:0.5rem;}
  .reco-quote-mark{font-size:72px;}
}

/* ──────────────────────────────────────────────────────────────────────
   MOBILE OVERRIDES
   These two @media blocks are intentionally placed at the very end of the
   stylesheet so they win the source-order cascade against later desktop
   rules (e.g. `.proj-grid`, `.tpanel`, `.news-body`, `.mosaic`) that share
   the same specificity. Do not move them above the desktop defaults.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width:900px){
  /* Mobile/tablet: the top nav has no remaining content (logo, avatar, section
     icons, theme toggle, and the Get in touch CTA are all hidden). Hide the
     nav element entirely and let the hero claim the top of the viewport.
     The hero still exposes its own "Get in touch" btn-glow, so the contact
     path is preserved. */
  .site-nav{display:none!important;}
  .page{
    padding-top:env(safe-area-inset-top,0px);
  }
  .logo{display:none;}
  #navMenu{display:none;}
  .nav-avatar{display:none!important;}
  .nav-micons{display:none!important;}
  .theme-toggle.theme-toggle--pill{display:none!important;}
  .nav-cta.nav-cta--floating{display:none!important;}

  .hero{
    padding:2.25rem max(1rem,env(safe-area-inset-left)) 2rem max(1rem,env(safe-area-inset-right));
    min-height:auto;
  }
  .hero-inner{align-items:flex-start;}
  .hero-sub{max-width:none;font-size:15px;}
  .hero-eyebrow{margin-bottom:1.5rem;}

  .tech-strip{
    padding-left:max(1rem,env(safe-area-inset-left));
    padding-right:max(1rem,env(safe-area-inset-right));
    margin-top:2.25rem;
  }
  /* Section headings — tighter on small screens so they don't compete with the hero */
  .s-heading{font-size:24px;letter-spacing:-0.6px;margin-bottom:1.25rem;}

  .proj-top{
    flex-direction:column;
    align-items:flex-start;
    gap:1.25rem;
    padding:1rem max(1rem,env(safe-area-inset-left)) 1rem max(1rem,env(safe-area-inset-right));
  }
  .proj-grid{
    grid-template-columns:1fr;
    padding:1.5rem max(1rem,env(safe-area-inset-left)) 2rem max(1rem,env(safe-area-inset-right));
  }
  .projects-section .proj-grid{
    padding:1.5rem max(1rem,env(safe-area-inset-left)) 2rem max(1rem,env(safe-area-inset-right));
  }
  .projects-section .proj-top{
    padding:1rem max(1rem,env(safe-area-inset-left)) 1rem max(1rem,env(safe-area-inset-right));
  }
  .pcard.featured{grid-column:span 1;}
  .pcard{padding:1.25rem;}
  .pname{font-size:17px;}

  .travel-hero{
    padding:2rem max(1rem,env(safe-area-inset-left)) 1.5rem max(1rem,env(safe-area-inset-right));
  }
  .travel-h{font-size:26px;}
  .travel-bg-text{
    font-size:clamp(52px,22vw,120px);
    right:-12px;
    bottom:-28px;
    opacity:0.5;
  }
  .t-counters{flex-wrap:wrap;gap:1.5rem;}
  .t-cnt-num{font-size:30px;}
  .t-tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    width:100%;
    gap:0;
  }
  .ttab{
    flex-shrink:0;
    padding:10px 18px;
    min-height:44px;
  }
  .tpanel{padding:1.5rem max(1rem,env(safe-area-inset-left)) 2rem max(1rem,env(safe-area-inset-right));}

  .news-top{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
    padding:2rem max(1rem,env(safe-area-inset-left)) 1.25rem max(1rem,env(safe-area-inset-right));
  }
  .news-h{font-size:26px;}
  .news-top-actions{align-items:flex-start;width:100%;}
  .news-body{
    grid-template-columns:1fr;
    padding:0 max(1rem,env(safe-area-inset-left)) 2.5rem max(1rem,env(safe-area-inset-right));
  }
  .news-main-col{
    padding-right:0;
    border-right:none;
    padding-bottom:1.5rem;
    margin-bottom:0.5rem;
    border-bottom:0.5px solid var(--bd);
  }
  .news-side-col{padding-left:0;padding-top:1rem;}

  .experience-section{
    padding:2rem max(1rem,env(safe-area-inset-left)) 2.5rem max(1rem,env(safe-area-inset-right));
  }
  .exp-section-head{align-items:center;}
  .exp-arrow{width:40px;height:40px;border-radius:12px;}
}

@media (max-width:600px){
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .hero-actions-row{
    flex-wrap:nowrap;
    gap:10px;
    width:100%;
    min-width:0;
  }
  .hero-actions-row .btn-line{
    flex:1 1 auto;
    min-width:0;
    width:auto;
    justify-content:center;
    min-height:48px;
    box-sizing:border-box;
    background:var(--c3);
    border-color:var(--bd2);
  }
  .hero-social{
    margin-left:0;
    justify-content:flex-start;
    flex-wrap:nowrap;
    flex-shrink:0;
    gap:10px;
    padding-top:0;
  }
  .hero-actions > .btn-glow{
    width:100%;
    justify-content:center;
    min-height:48px;
    box-sizing:border-box;
  }
  .btn-icon{
    width:48px;
    height:48px;
  }

  .mosaic{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    grid-auto-rows:minmax(104px,auto);
    gap:8px;
  }
  .mphoto:nth-child(1){
    grid-column:1/-1!important;
    grid-row:auto!important;
    min-height:132px;
  }
  .mphoto:nth-child(2),
  .mphoto:nth-child(3),
  .mphoto:nth-child(4),
  .mphoto:nth-child(5),
  .mphoto:nth-child(6){
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .mphoto:nth-child(1) .mphoto-emoji{font-size:42px;}

  .itin-grid{grid-template-columns:1fr;}

  .filter-chips{gap:8px;}
  .chip{
    min-height:40px;
    padding:8px 14px;
  }

  .nbig{padding-left:max(0px,env(safe-area-inset-left));}
  .nbig::before{left:0;width:3px;}
  .nbig-hl{font-size:17px;}

  /* Hero typography tightens further on phones */
  .hero-h1{font-size:clamp(40px,11vw,56px);margin-bottom:1.25rem;}
  .hero-h1 .word1{font-size:clamp(32px,9vw,44px);letter-spacing:-1.2px;}

  @media (hover:none) and (pointer:coarse){
    button,.npill,.nav-sec-icon,.btn-icon,.chip,.btn-glow,.btn-line,.nav-cta,.ttab,.theme-toggle,.pcard,.icard,.dcard,.nbig,.trow{
      touch-action:manipulation;
    }
  }
}