/* =========================================================
   Prantik Mukherjee — Photography Portfolio
   Dark editorial · cinematic motion (Pulsenova-style)
   ========================================================= */

:root {
  --bg: #0a0a0c;
  --bg-2: #0d0d10;
  --surface-1: #131318;
  --surface-2: #181820;
  --surface-3: #1f1f29;

  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);

  --text: #f5f3ef;
  --muted: rgba(245,243,239,0.62);
  --muted-2: rgba(245,243,239,0.42);

  --accent: #93b4ff;          /* icy blue, used sparingly */
  --accent-2: #b9a7ff;        /* soft violet for rare glows */
  --accent-glow: rgba(147,180,255,0.5);

  --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 9999px;
  --container: 1360px;

  --f-display: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
  --f-text: "Inter", -apple-system, system-ui, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: auto; } /* Lenis handles smoothing */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--f-text); font-size: 16px; line-height: 1.5; letter-spacing: -0.05px;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #07080b; }

/* scroll progress */
.scroll-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:300; background:transparent; pointer-events:none; }
.scroll-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent), #fff); box-shadow:0 0 12px var(--accent-glow); }

/* hero aurora */
.hero-aurora { position:absolute; z-index:0; pointer-events:none; width:60vw; max-width:760px; aspect-ratio:1; left:-8vw; top:6vh;
  background: radial-gradient(circle at center, rgba(147,180,255,.16), rgba(185,167,255,.07) 40%, transparent 70%);
  filter: blur(20px); border-radius:50%; animation: aurora 14s ease-in-out infinite alternate; }
@keyframes aurora { 0%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6%,4%) scale(1.12); } 100%{ transform:translate(-4%,-3%) scale(.96); } }

/* word highlight scrub */
.statement .hl-word { color: var(--muted-2); transition: none; }

/* clip image reveal initial handled in JS to keep no-JS safe */

.grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(22px,4.5vw,64px); }
section { position: relative; z-index: 1; }
.section-pad { padding-block: clamp(80px,13vw,168px); }

/* ---------- WebGL + cursor ---------- */
#webgl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.nav,.hero,.band,section,.footer { position: relative; z-index: 1; }

.cursor-dot,.cursor-ring { position: fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; }
.cursor-dot { width:6px; height:6px; margin:-3px 0 0 -3px; background:#fff; }
.cursor-ring { width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid rgba(255,255,255,.45);
  mix-blend-mode: difference; transition: width .25s, height .25s, margin .25s, background .25s, border-color .25s; }
.cursor-ring.grow { width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.7); }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- Preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: grid; place-items: center;
  transition: opacity .9s ease, visibility .9s ease; }
.preloader.done { opacity: 0; visibility: hidden; }
.pl-name { font-family: var(--f-serif); font-size: clamp(34px,7vw,76px); letter-spacing:-1px; line-height:1; text-align:center; }
.pl-name em { color: var(--accent); }
.pl-count { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-top: 16px; letter-spacing: 3px; text-align:center; }
.pl-bar { width: min(300px,62vw); height:1px; background: var(--line); margin:20px auto 0; overflow:hidden; }
.pl-bar i { display:block; height:100%; width:0; background: linear-gradient(90deg,var(--accent),#fff); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--f-text);
  font-size:14px; font-weight:500; line-height:1.2; padding:13px 22px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; min-height:46px; white-space:nowrap;
  transition: background .22s, border-color .22s, color .22s, transform .15s, box-shadow .22s; }
.btn-primary { background:#fff; color:#0a0a0c; }
.btn-primary:hover { box-shadow: 0 0 0 1px #fff, 0 14px 40px -12px rgba(255,255,255,.5); transform: translateY(-2px); }
.btn-ghost { background:rgba(255,255,255,.02); color:var(--text); border-color:var(--line-2); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(5px); }

.eyebrow { font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:12px; margin:0 0 26px; }
.eyebrow::before { content:""; width:28px; height:1px; background:var(--accent); opacity:.8; }

/* ---------- Nav ---------- */
.nav { position:fixed; top:0; left:0; right:0; z-index:200; height:78px; display:flex; align-items:center;
  transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease; border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(10,10,12,.6); backdrop-filter: saturate(160%) blur(16px); border-bottom-color:var(--line); }
.nav-inner { width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wordmark { display:flex; align-items:center; gap:12px; font-weight:600; font-size:15px; letter-spacing:-.2px; }
.wordmark .mark { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-family:var(--f-serif);
  font-size:20px; color:#0a0a0c; background:#fff; }
.nav-links { display:flex; align-items:center; gap:30px; font-size:14px; color:var(--muted); }
.nav-links a { position:relative; transition:color .2s; }
.nav-links a::after { content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:currentColor; transition: right .3s ease; }
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after { right:0; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.nav-toggle { display:none; background:none; border:0; color:var(--text); cursor:pointer; padding:8px; }

.mobile-menu { display:none; position:fixed; inset:78px 0 auto 0; z-index:199; background:var(--bg);
  border-bottom:1px solid var(--line); padding:24px; }
.mobile-menu.open { display:block; }
.mobile-menu a { display:block; padding:14px 4px; color:var(--muted); border-bottom:1px solid var(--line); }
.mobile-menu .btn { width:100%; margin-top:18px; }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; display:flex; align-items:center; padding-top:120px; padding-bottom:60px; }

/* Hero entrance — CSS driven (reliable regardless of JS animation timing).
   Headline uses transform-only (opacity stays 1) so it can never be left hidden. */
.hero [data-fade] { opacity:0; transform:translateY(24px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.loaded .hero [data-fade] { opacity:1; transform:none; }
.hero h1 { transform:translateY(20px); transition: transform 1s cubic-bezier(.2,.7,.2,1) .12s; }
.loaded .hero h1 { transform:none; }
.loaded .hero .hero-kicker { transition-delay:.05s; }
.loaded .hero .lead { transition-delay:.30s; }
.loaded .hero .hero-actions { transition-delay:.42s; }
.loaded .hero .hero-scroll { transition-delay:.54s; }
.loaded .hero .hero-portrait { transition-delay:.24s; }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px,5vw,80px); align-items:center; width:100%; }
.hero-kicker { display:flex; gap:14px; align-items:center; margin-bottom:30px; flex-wrap:wrap; }
.hero-kicker .tag { font-family:var(--f-mono); font-size:11.5px; color:var(--muted); letter-spacing:1px; text-transform:uppercase;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 15px; background:rgba(255,255,255,.02); }
.hero-kicker .tag b { color:var(--text); font-weight:500; }

.hero h1 { font-family:var(--f-display); font-weight:600; font-size:clamp(38px,6.6vw,92px);
  line-height:1.0; letter-spacing:-.045em; margin:0; }
.hero h1 .serif { font-family:var(--f-serif); font-weight:400; font-style:italic; color:var(--accent); letter-spacing:-.01em; }
.hero h1 .outline { color:transparent; -webkit-text-stroke:1.3px var(--muted); }
.hero .lead { font-size:clamp(16px,1.5vw,19px); color:var(--muted); line-height:1.6; max-width:52ch; margin:32px 0 36px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-scroll { display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted-2); margin-top:48px; }
.hero-scroll i { display:block; width:30px; height:1px; background:var(--muted-2); position:relative; overflow:hidden; }
.hero-scroll i::after { content:""; position:absolute; inset:0; width:10px; background:var(--accent); animation: scrollline 2s ease-in-out infinite; }
@keyframes scrollline { 0%{transform:translateX(-12px)} 100%{transform:translateX(32px)} }

/* frame */
.frame { position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--surface-1); border:1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 50px 100px -50px rgba(0,0,0,.9);
  transform-style:preserve-3d; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.frame img { width:100%; display:block; }
.hero-portrait .frame img { aspect-ratio:4/5; object-fit:cover; object-position:center 18%; }
.frame .corner { position:absolute; width:18px; height:18px; border:1px solid rgba(255,255,255,.4); z-index:3; }
.frame .corner.tl{top:14px;left:14px;border-right:0;border-bottom:0} .frame .corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.frame .corner.bl{bottom:14px;left:14px;border-right:0;border-top:0} .frame .corner.br{bottom:14px;right:14px;border-left:0;border-top:0}
.hero-portrait .badge { position:absolute; left:18px; bottom:18px; z-index:4; display:flex; align-items:center; gap:8px;
  background:rgba(10,10,12,.6); backdrop-filter:blur(10px); border:1px solid var(--line); color:var(--muted);
  font-size:11.5px; font-family:var(--f-mono); letter-spacing:.5px; padding:8px 13px; border-radius:var(--r-pill); }
.dot-green { width:7px; height:7px; border-radius:50%; background:#3ad07a; box-shadow:0 0 8px #3ad07a; }

/* ---------- Hero photo: arch + floating cards + rail ---------- */
.pf-stage { position:relative; transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.7,.2,1); padding:0 6%; }
.pf-arch { position:absolute; z-index:0; left:50%; top:2%; transform:translateX(-50%); width:104%; height:98%;
  background: radial-gradient(110% 90% at 50% 28%, rgba(147,180,255,.30), rgba(94,106,210,.16) 46%, transparent 72%);
  border-radius:50% 50% 22px 22px / 46% 46% 22px 22px; filter:blur(10px); pointer-events:none; }
.pf-photo-wrap { position:relative; z-index:1; border-radius:230px 230px 22px 22px; overflow:hidden;
  border:1px solid var(--line-2); aspect-ratio:3/4; background:var(--surface-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 50px 100px -50px rgba(0,0,0,.9); }
.pf-photo { width:100%; height:100%; object-fit:cover; object-position:center top; }

.pf-card { position:absolute; z-index:3; display:flex; align-items:center; gap:12px;
  background:rgba(18,19,26,.66); backdrop-filter:blur(16px); border:1px solid var(--line-2);
  border-radius:16px; padding:12px 16px; box-shadow:0 24px 60px -24px rgba(0,0,0,.85); white-space:nowrap; }
.pf-card b { display:block; font-weight:600; font-size:15px; letter-spacing:-.01em; }
.pf-card span:not(.dot-green) { font-size:12px; color:var(--muted); }
.pf-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:#0a0a0c; }
.pf-ic.green { background:linear-gradient(150deg,#34d27a,#1f9e57); }
.pf-card-a { top:16%; left:-4%; animation:floaty 5.5s ease-in-out infinite; }
.pf-card-b { top:5%; right:-3%; animation:floaty 6.5s ease-in-out infinite .6s; }
.pf-card-c { bottom:13%; right:-2%; font-size:12.5px; color:var(--muted); animation:floaty 6s ease-in-out infinite .3s; }
@keyframes floaty { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

.pf-rail { position:absolute; z-index:3; left:-3%; bottom:20%; display:flex; flex-direction:column; gap:4px;
  background:rgba(18,19,26,.66); backdrop-filter:blur(16px); border:1px solid var(--line-2); border-radius:14px; padding:6px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85); }
.pf-rail a { width:44px; height:44px; display:grid; place-items:center; border-radius:10px; color:var(--text); transition:background .2s, color .2s, transform .2s; }
.pf-rail a:hover { background:var(--accent); color:#0a0a0c; transform:translateX(2px); }

@media (max-width:1024px){
  .pf-stage { padding:0 10%; max-width:480px; margin:0 auto; }
}
@media (max-width:480px){
  .pf-card-a { left:0; top:12%; } .pf-card-b { right:0; } .pf-card span:not(.dot-green){ font-size:11px; }
  .pf-rail { left:0; }
}

/* ---------- Intro statement band ---------- */
.band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); }
.statement { font-family:var(--f-display); font-weight:500; font-size:clamp(26px,4.4vw,60px); line-height:1.16;
  letter-spacing:-.03em; max-width:24ch; }
.statement .dim { color:var(--muted-2); }
.statement .serif { font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--accent); }

/* ---------- Section heads ---------- */
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:clamp(44px,6vw,72px); flex-wrap:wrap; }
.section-head .lhs { max-width:720px; }
.section-head h2 { font-family:var(--f-display); font-weight:600; font-size:clamp(34px,5.2vw,72px); line-height:1.02; letter-spacing:-.035em; margin:0; }
.section-head h2 .serif { font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--accent); }
.section-head p { font-size:17px; color:var(--muted); margin:20px 0 0; line-height:1.6; max-width:54ch; }
.section-index { font-family:var(--f-mono); font-size:12.5px; color:var(--muted-2); letter-spacing:2px; white-space:nowrap; }

/* ---------- Featured ---------- */
.featured { position:relative; border-radius:var(--r-2xl); overflow:hidden; border:1px solid var(--line); }
.featured img { width:100%; height:clamp(360px,56vw,680px); object-fit:cover; object-position:center 40%; will-change:transform; }
.featured .ovl { position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.25) 48%, transparent 100%); }
.featured .ovl-b { position:absolute; inset:auto 0 0 0; height:60%; background:linear-gradient(to top, rgba(8,8,10,.92), transparent); }
.featured .cap { position:absolute; left:clamp(24px,4vw,60px); bottom:clamp(26px,4vw,52px); right:24px; z-index:2; }
.featured .cap .k { font-family:var(--f-mono); font-size:12px; letter-spacing:2px; color:var(--accent); text-transform:uppercase; }
.featured .cap h3 { font-family:var(--f-display); font-weight:600; font-size:clamp(28px,4.4vw,52px); letter-spacing:-.035em; margin:14px 0 0; max-width:17ch; line-height:1.03; }
.featured .cap .exif { font-family:var(--f-mono); font-size:12px; color:var(--muted); margin-top:18px; display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- Gallery ---------- */
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,1.8vw,24px); }
.shot { position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--surface-1); border:1px solid var(--line);
  transform-style:preserve-3d; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.shot:hover { border-color:var(--line-2); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.shot img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.shot:hover img { transform:scale(1.05); }
.shot .num { position:absolute; top:16px; left:16px; z-index:2; font-family:var(--f-mono); font-size:11.5px; letter-spacing:1px;
  color:var(--text); background:rgba(10,10,12,.5); backdrop-filter:blur(6px); border:1px solid var(--line); padding:5px 11px; border-radius:var(--r-pill); }
.shot .cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px;
  background:linear-gradient(to top, rgba(8,8,10,.9), transparent); opacity:0; transform:translateY(12px); transition:opacity .35s, transform .35s; }
.shot:hover .cap { opacity:1; transform:none; }
.shot .cap .t { font-weight:500; font-size:16px; }
.shot .cap .m { font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-top:5px; letter-spacing:.5px; }
.span-7{grid-column:span 7} .span-5{grid-column:span 5} .span-6{grid-column:span 6} .span-4{grid-column:span 4} .span-8{grid-column:span 8}
.shot.tall{min-height:clamp(440px,48vw,580px)} .shot.mid{min-height:clamp(320px,34vw,400px)}

/* ---------- Horizontal pinned gallery ---------- */
.h-gallery { position:relative; padding-block:clamp(60px,8vw,100px); }
.h-pin { min-height:100vh; display:flex; flex-direction:column; justify-content:center; gap:clamp(18px,2.6vw,34px); overflow:hidden; }
.h-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.h-head .lhs { max-width:680px; }
.h-track { display:flex; gap:clamp(16px,2vw,28px); padding:0 clamp(22px,4.5vw,64px); will-change:transform; }
.h-item { position:relative; flex:0 0 auto; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line);
  background:var(--surface-1); height:clamp(320px,52vh,520px); }
.h-item.portrait { width:clamp(320px,30vw,440px); }
.h-item.wide { width:clamp(520px,52vw,780px); }
.h-item img { width:100%; height:100%; object-fit:cover; }
.h-item .num { position:absolute; top:18px; left:18px; z-index:2; font-family:var(--f-mono); font-size:11.5px; letter-spacing:1px;
  color:var(--text); background:rgba(10,10,12,.5); backdrop-filter:blur(6px); border:1px solid var(--line); padding:5px 11px; border-radius:var(--r-pill); }
.h-item .cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; background:linear-gradient(to top, rgba(8,8,10,.92), transparent); }
.h-item .cap .t { font-weight:500; font-size:17px; }
.h-item .cap .m { font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-top:5px; letter-spacing:.5px; }
.h-hint { font-family:var(--f-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted-2); display:flex; align-items:center; gap:10px; }
.h-hint svg { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(6px);} }

/* fallback: no horizontal scroll (mobile / reduced / no-JS) */
.no-motion .h-pin, .nohscroll .h-pin { min-height:0; }
.no-motion .h-track, .nohscroll .h-track { flex-wrap:wrap; padding:0; gap:clamp(16px,2vw,24px); }
.no-motion .h-item, .nohscroll .h-item { width:100% !important; height:clamp(300px,72vw,460px); }
@media (min-width:760px){
  .nohscroll .h-item, .no-motion .h-item { width:calc(50% - 12px) !important; }
}

/* ---------- Approach steps ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.step { background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,3vw,38px);
  backdrop-filter: blur(12px); position:relative; overflow:hidden; transition: transform .3s, border-color .3s, background .3s; }
.step:hover { transform: translateY(-6px); border-color:var(--line-2); background:rgba(255,255,255,.045); }
.step .si { font-family:var(--f-mono); font-size:12px; color:var(--accent); letter-spacing:2px; }
.step h3 { font-family:var(--f-display); font-weight:600; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; margin:18px 0 12px; }
.step p { font-size:15px; color:var(--muted); line-height:1.6; margin:0; }

/* ---------- What I shoot — bento ---------- */
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:clamp(14px,1.6vw,20px); }
.tile { border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(22px,2.4vw,32px); position:relative; overflow:hidden;
  background:rgba(255,255,255,.022); transition: transform .3s, border-color .3s, background .3s; display:flex; flex-direction:column; justify-content:space-between; }
.tile:hover { transform: translateY(-5px); border-color:var(--line-2); background:rgba(255,255,255,.05); }
.tile .tnum { font-family:var(--f-mono); font-size:12px; color:var(--muted-2); letter-spacing:1px; }
.tile h3 { font-family:var(--f-display); font-weight:600; font-size:clamp(20px,2vw,28px); letter-spacing:-.02em; margin:auto 0 6px; }
.tile p { font-size:14px; color:var(--muted); margin:0; line-height:1.5; }
.tile.big { grid-column:span 2; grid-row:span 2; }
.tile.wide { grid-column:span 2; }
.tile .glow { position:absolute; width:200px; height:200px; border-radius:50%; filter:blur(60px); opacity:.0; transition:opacity .4s;
  background:var(--accent); right:-40px; bottom:-40px; }
.tile:hover .glow { opacity:.18; }

/* ---------- Pillars (What I do) ---------- */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.pillar { background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(28px,3vw,40px); backdrop-filter:blur(12px); position:relative; overflow:hidden;
  display:flex; flex-direction:column; min-height:clamp(280px,30vw,360px);
  transition:transform .35s, border-color .35s, background .35s; }
.pillar:hover { transform:translateY(-6px); border-color:var(--line-2); background:rgba(255,255,255,.05); }
.pillar .pnum { font-family:var(--f-mono); font-size:12px; color:var(--accent); letter-spacing:2px; }
.pillar h3 { font-family:var(--f-display); font-weight:600; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.025em; line-height:1.1; margin:28px 0 12px; }
.pillar p { font-size:15px; color:var(--muted); line-height:1.6; margin:0 0 22px; }
.pillar .plink { font-family:var(--f-mono); font-size:12.5px; letter-spacing:.5px; color:var(--text); display:inline-flex; align-items:center; gap:8px; margin-top:auto; }
.pillar .plink .arrow { transition:transform .2s; }
.pillar:hover .plink .arrow { transform:translateX(5px); }
.pillar .pglow { position:absolute; width:240px; height:240px; border-radius:50%; filter:blur(70px); opacity:0;
  background:var(--accent); right:-60px; top:-60px; transition:opacity .4s; }
.pillar:hover .pglow { opacity:.16; }

/* ---------- Blog / Writing list ---------- */
.posts { border-top:1px solid var(--line); }
.post { display:grid; grid-template-columns:64px 1fr auto; gap:clamp(16px,3vw,40px); align-items:center;
  padding:clamp(24px,3vw,38px) 8px; border-bottom:1px solid var(--line); position:relative; transition:padding .3s; }
.post::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.04),transparent);
  opacity:0; transition:opacity .3s; pointer-events:none; }
.post:hover::before { opacity:1; }
.post:hover { padding-left:20px; }
.post .pidx { font-family:var(--f-mono); font-size:13px; color:var(--muted-2); }
.post .pmain { min-width:0; }
.post .pcat { font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent); }
.post .ptitle { font-family:var(--f-display); font-weight:600; font-size:clamp(20px,2.6vw,32px); letter-spacing:-.025em;
  line-height:1.12; margin:8px 0 0; transition:color .25s; }
.post:hover .ptitle { color:var(--accent); }
.post .pexcerpt { font-size:14.5px; color:var(--muted); margin:10px 0 0; max-width:60ch; line-height:1.55; }
.post .pmeta { font-family:var(--f-mono); font-size:12px; color:var(--muted-2); text-align:right; white-space:nowrap; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.post .pmeta .parrow { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; transition:background .25s, border-color .25s, transform .25s; }
.post:hover .pmeta .parrow { background:var(--text); border-color:var(--text); color:#0a0a0c; transform:rotate(-45deg); }
.post .tagsoon { display:inline-block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:1px; color:var(--muted-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 9px; margin-left:10px; vertical-align:middle; text-transform:uppercase; }

/* ---------- Experience panel ---------- */
.exp { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.exp-card { background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:var(--r-2xl);
  padding:clamp(28px,3.5vw,48px); backdrop-filter:blur(12px); }
.exp-card .role { display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.exp-card .role .logo { width:54px; height:54px; border-radius:14px; background:#fff; color:#0a0a0c; display:grid; place-items:center;
  font-family:var(--f-serif); font-size:30px; }
.exp-card .role .rt { font-family:var(--f-display); font-weight:600; font-size:20px; letter-spacing:-.01em; }
.exp-card .role .rs { font-size:13px; color:var(--muted); margin-top:2px; }
.exp-list { list-style:none; padding:0; margin:0; display:grid; gap:0; }
.exp-list li { display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line); }
.exp-list li:first-child { border-top:0; }
.exp-list li .k { font-family:var(--f-mono); font-size:12px; color:var(--accent); white-space:nowrap; padding-top:3px; min-width:34px; }
.exp-list li .v b { display:block; font-weight:600; font-size:16px; letter-spacing:-.01em; margin-bottom:4px; }
.exp-list li .v span { font-size:14px; color:var(--muted); line-height:1.55; }
.exp-copy h2 { font-family:var(--f-display); font-weight:600; font-size:clamp(30px,4.5vw,56px); line-height:1.05; letter-spacing:-.035em; margin:0 0 22px; }
.exp-copy h2 .serif { font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--accent); }
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:24px; }
.chip-label { width:100%; font-family:var(--f-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted-2); margin-bottom:2px; }
.chip { font-family:var(--f-mono); font-size:12px; letter-spacing:.3px; color:var(--muted); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 13px; background:rgba(255,255,255,.02); transition:border-color .2s, color .2s; }
.chip:hover { border-color:var(--line-2); color:var(--text); }
.exp-copy p { font-size:17px; color:var(--muted); line-height:1.65; margin:0 0 18px; }

@media (max-width:1024px){
  .pillars{ grid-template-columns:1fr; }
  .exp{ grid-template-columns:1fr; }
  .post{ grid-template-columns:40px 1fr auto; }
}
@media (max-width:560px){
  .post{ grid-template-columns:1fr; gap:10px; }
  .post .pmeta{ flex-direction:row; align-items:center; text-align:left; }
}

/* ---------- CTA ---------- */
.cta { text-align:center; border:1px solid var(--line); border-radius:var(--r-2xl); padding:clamp(44px,8vw,104px);
  background:radial-gradient(120% 140% at 50% 0%, rgba(147,180,255,.08), transparent 60%), var(--surface-1); position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; inset:-1px -1px auto -1px; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.cta h2 { font-family:var(--f-display); font-weight:600; font-size:clamp(34px,5.6vw,76px); letter-spacing:-.04em; line-height:1.02; margin:0 0 22px; }
.cta h2 .serif { font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--accent); }
.cta p { color:var(--muted); font-size:18px; max-width:50ch; margin:0 auto 36px; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--line); padding:80px 0 48px; }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px; }
.footer .blurb { color:var(--muted); font-size:14px; max-width:38ch; margin-top:18px; line-height:1.6; }
.footer h4 { font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted-2); margin:0 0 18px; }
.footer ul { list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.footer ul a { font-size:14px; color:var(--muted); transition:color .2s; }
.footer ul a:hover { color:var(--text); }
.footer-bottom { margin-top:64px; padding-top:26px; border-top:1px solid var(--line); display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; color:var(--muted-2); font-size:12.5px; font-family:var(--f-mono); letter-spacing:.5px; }

/* ---------- Reveal fallback (no-JS / reduced motion) ---------- */
.reveal { opacity:0; }
.no-motion .reveal { opacity:1 !important; transform:none !important; filter:none !important; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; } .hero-portrait{ max-width:440px; }
  .gallery{ grid-template-columns:repeat(6,1fr); } .span-7,.span-5,.span-6,.span-4,.span-8{ grid-column:span 6; }
  .steps{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:repeat(2,1fr); } .tile.big{ grid-column:span 2; grid-row:span 1; } .tile.wide{ grid-column:span 2; }
}
@media (max-width:768px){
  .nav-links{ display:none; } .nav-actions .btn-ghost{ display:none; } .nav-toggle{ display:inline-flex; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero h1 .outline{ -webkit-text-stroke:1px var(--muted); }
}
@media (max-width:480px){
  .footer-grid{ grid-template-columns:1fr; } .bento{ grid-template-columns:1fr; } .tile.big,.tile.wide{ grid-column:span 1; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}