/* ─── RESET & BASE ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}

:root{
  --bg:#f5f5f7;
  --surface:#ffffff;
  --black:#1d1d1f;
  --mid:#6e6e73;
  --light:#adadb8;
  --border:rgba(0,0,0,0.08);
  --blue:#0071e3;
  --blue-light:#e8f1fc;
  --radius:18px;
  --shadow-md:0 8px 40px rgba(0,0,0,0.1);
}

body{
  background:var(--bg);
  color:var(--black);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:400;
  overflow-x:hidden;
}

/* ─── LIGHTBOX ─── */
.lb-overlay{
  display:none;
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.92);
  align-items:center;justify-content:center;
  padding:24px;
}
.lb-overlay.open{ display:flex; }
.lb-overlay img{ max-width:90vw; max-height:90vh; object-fit:contain; border-radius:12px; }
.lb-close{
  position:absolute;top:20px;right:24px;
  background:rgba(255,255,255,0.12);
  border:none;color:#fff; font-size:1rem;
  width:36px;height:36px;border-radius:50%;
  cursor:pointer; display:flex;align-items:center;justify-content:center;
  transition:background 0.2s;
}
.lb-close:hover{background:rgba(255,255,255,0.22);}
.lb-trigger{cursor:zoom-in;}

/* ─── NAV ─── */
.nav-wrap{
  position:fixed;top:0;left:0;right:0;z-index:500;
  background:rgba(245,245,247,0.82);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
}
nav{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  padding:0 32px;height:52px;
}
.nav-links{display:flex;gap:32px;list-style:none;}
.nav-links a{
  font-size:0.78rem;font-weight:400;
  color:var(--mid);text-decoration:none;
  transition:color 0.2s;
}
.nav-links a:hover{color:var(--black);}

/* ─── SECTION ─── */
.section{ max-width:1200px;margin:0 auto; padding:72px 32px; }
#about .section{padding-top:96px;}
.sec-eyebrow{ font-size:0.68rem;font-weight:500; letter-spacing:1px;text-transform:uppercase; color:var(--blue);margin-bottom:10px; }
.sec-h2{ font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:600;letter-spacing:-1px;line-height:1.1; color:var(--black);margin-bottom:0; }

/* ─── ABOUT ─── */
#about{background:var(--surface);}
.about-card{ display:grid; grid-template-columns:240px 1fr; gap:52px; align-items:start; margin-top:40px; }
.about-photo{ aspect-ratio:1/1;border-radius:16px; overflow:hidden;position:relative;background:#e8e4de; }
.about-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.about-chip{ position:absolute;bottom:12px;left:12px; background:rgba(0,0,0,0.65);backdrop-filter:blur(8px); color:#fff;font-size:0.58rem;font-weight:500;letter-spacing:1px; padding:4px 10px;border-radius:100px; }
.about-text p{ font-size:0.91rem;line-height:1.8;color:var(--mid);margin-bottom:14px; }

/* ─── WORK ─── */
#work{background:var(--bg);}
.seg-wrap{ display:flex; background:rgba(0,0,0,0.05); border-radius:100px;padding:4px;gap:2px; width:fit-content;margin-top:28px; }
.seg-btn{ background:none;border:none;font-family:inherit; font-size:0.78rem;font-weight:500;color:var(--mid); padding:8px 20px;border-radius:100px;cursor:pointer; transition:background 0.2s,color 0.2s; white-space:nowrap; }
.seg-btn.active{ background:var(--surface);color:var(--black); box-shadow:0 1px 6px rgba(0,0,0,0.12); }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.g-card{ background:var(--surface); border-radius:var(--radius);overflow:hidden; border:1px solid var(--border); text-decoration:none; display:block; transition:transform 0.2s,box-shadow 0.2s; }
.g-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.g-thumb{ aspect-ratio:16/10; position:relative;overflow:hidden; }
.g-thumb video, .g-thumb img{ width:100%;height:100%; object-fit:cover;display:block; }
.g-info{padding:14px 16px 16px;}
.g-cat-tag{ display:inline-flex;align-items:center; font-size:0.62rem;font-weight:500; background:var(--blue-light);color:var(--blue); border-radius:100px;padding:3px 10px; margin-bottom:8px; }
.g-cat-tag.personal{background:#f0faf0;color:#1a7f37;}
.g-cat-tag.design{background:#fdf0f8;color:#a0186a;}
.g-title{ font-size:0.88rem;font-weight:500; color:var(--black);line-height:1.35; }
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ─── REEL ─── */
#reel{background:var(--surface);}
.reel-card{ margin-top:32px;aspect-ratio:16/9; background:#141414;border-radius:var(--radius); overflow:hidden;position:relative; border:1px solid rgba(255,255,255,0.06); }
.reel-card video{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;z-index:2; }
.reel-noise{ position:absolute;inset:0;z-index:1; background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.03) 3px,rgba(0,0,0,0.03) 4px); pointer-events:none; }
.reel-deco{ position:absolute;z-index:1; top:50%;left:50%;transform:translate(-50%,-50%); font-size:clamp(70px,13vw,160px); font-weight:600;letter-spacing:-4px; color:rgba(255,255,255,0.06); user-select:none;pointer-events:none; font-style:italic;white-space:nowrap; }

/* ─── CONTACT ─── */
#contact{background:var(--bg);}
.contact-card{ margin-top:32px;background:var(--surface); border-radius:var(--radius);padding:48px; border:1px solid var(--border); max-width:600px; }
.contact-lead{ font-size:1.1rem; font-weight:500; color:var(--black);margin-bottom:24px; }
.social-grid{display:flex;flex-direction:column;}
.social-row{ display:flex;align-items:center;justify-content:space-between; padding:16px 0;border-bottom:1px solid var(--border); text-decoration:none;color:var(--black);transition:color 0.2s; }
.social-row:hover{color:var(--blue);}
.social-row:last-child{border-bottom:none;}
.social-name{font-size:0.82rem;font-weight:500;}
.social-arr{ font-size:1rem;opacity:0.3; transition:opacity 0.2s,transform 0.2s; }
.social-row:hover .social-arr{opacity:1;transform:translate(2px,-2px);}

/* ─── FOOTER ─── */
footer{ background:var(--surface); border-top:1px solid var(--border); padding:24px 32px; display:flex;align-items:center;justify-content:space-between; }
.foot-l{font-size:0.82rem;font-weight:500;color:var(--black);}
.foot-r{font-size:0.72rem;color:var(--light);}

/* RESPONSIVE */
@media(max-width:960px){ .about-card{grid-template-columns:1fr;} .gallery{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .nav-links{display:none;} .gallery{grid-template-columns:1fr;} }