/* =========================================================
   Prantik Mukherjee — multi-page ecosystem components
   Reuses tokens from styles.css. No change to type/color/motion.
   ========================================================= */

/* nav: tighten gap for 6 links */
.nav-links { gap: clamp(15px, 1.5vw, 26px); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { right: 0; }

/* ---------- Page hero (subpages) ---------- */
.page-hero { padding-top: 150px; padding-bottom: clamp(30px,5vw,60px); }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { font-family:var(--f-display); font-weight:600; font-size:clamp(40px,7.5vw,104px);
  line-height:1.0; letter-spacing:-.045em; margin:0; }
.page-hero h1 .serif { font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--accent); }
.page-hero .sub { font-size:clamp(16px,1.6vw,20px); color:var(--muted); max-width:62ch; margin:26px 0 0; line-height:1.6; }
.page-hero .sub strong { color:var(--text); font-weight:500; }

/* ---------- Homepage gateway previews ---------- */
.gw { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(18px,2vw,28px); }
.gw-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--surface-1); padding:clamp(22px,2.2vw,32px);
  display:flex; flex-direction:column; transition:transform .35s, border-color .35s, background .35s; }
.gw-card:hover { transform:translateY(-6px); border-color:var(--line-2); background:var(--surface-2); }
.gw-card.span-2 { grid-column:span 2; }
.gw-card .gw-k { font-family:var(--f-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); }
.gw-card h3 { font-family:var(--f-display); font-weight:600; font-size:clamp(20px,2.2vw,28px); letter-spacing:-.03em; line-height:1.1; margin:12px 0 8px; }
.gw-card p { font-size:15px; color:var(--muted); line-height:1.6; margin:0 0 16px; max-width:48ch; }
.gw-card .cta { margin-top:6px; padding:0; border:0; background:none; border-radius:0; text-align:left;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.5px; color:var(--text); display:inline-flex; gap:8px; align-items:center; }
.gw-card .cta .arrow { transition:transform .2s; } .gw-card:hover .cta .arrow { transform:translateX(5px); }
.gw-card .gw-glow { position:absolute; width:280px; height:280px; border-radius:50%; filter:blur(80px); opacity:0; background:var(--accent); right:-60px; top:-80px; transition:opacity .4s; }
.gw-card:hover .gw-glow { opacity:.14; }
@media (max-width:860px){ .gw{ grid-template-columns:1fr; } .gw-card.span-2{ grid-column:span 1; } }

/* ---------- Shop ---------- */
.gfilters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(28px,4vw,48px); }
.gf { font-family:var(--f-mono); font-size:12px; letter-spacing:.4px; color:var(--muted); border:1px solid var(--line);
  background:rgba(255,255,255,.02); border-radius:var(--r-pill); padding:8px 16px; cursor:pointer; transition:border-color .2s,color .2s,background .2s; }
.gf:hover { border-color:var(--line-2); color:var(--text); }
.gf.active { background:#fff; color:#0a0a0c; border-color:#fff; }
.products { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.product { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-1);
  display:flex; flex-direction:column; transition:transform .3s,border-color .3s; }
.product:hover { transform:translateY(-5px); border-color:var(--line-2); }
.product .thumb { aspect-ratio:16/10; background:linear-gradient(145deg,var(--surface-2),var(--surface-3)); position:relative; overflow:hidden; display:grid; place-items:center; }
.product .thumb img { width:100%; height:100%; object-fit:cover; }
.product .thumb .tg { font-family:var(--f-serif); font-size:34px; color:var(--muted-2); }
.product .thumb .badge { position:absolute; top:12px; left:12px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); background:rgba(10,10,12,.6); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 10px; }
.product .pbody { padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product .pbody h3 { font-family:var(--f-display); font-weight:600; font-size:18px; letter-spacing:-.01em; margin:0; line-height:1.25; }
.product .pbody p { font-size:13.5px; color:var(--muted); line-height:1.5; margin:0; flex:1; }
.product .prow { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; }
.product .price { font-family:var(--f-mono); font-size:13px; color:var(--text); white-space:nowrap; }
.product .price b { color:var(--accent); font-weight:500; }
.product .prow .btn { padding:9px 16px; min-height:38px; }
.product.hide { display:none; }
@media (max-width:980px){ .products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .products{ grid-template-columns:1fr; } }

/* ---------- Photography masonry gallery ---------- */
.pc-masonry { columns: 3; column-gap: clamp(14px,1.6vw,20px); }
.pc-item { break-inside:avoid; margin-bottom:clamp(14px,1.6vw,20px); position:relative; border-radius:var(--r-lg);
  overflow:hidden; border:1px solid var(--line); cursor:zoom-in; background:var(--surface-1); }
.pc-item img { width:100%; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.pc-item:hover img { transform:scale(1.04); }
.pc-item .pc-cap { position:absolute; inset:auto 0 0 0; padding:18px; background:linear-gradient(to top,rgba(8,8,10,.88),transparent);
  opacity:0; transform:translateY(10px); transition:opacity .3s,transform .3s; }
.pc-item:hover .pc-cap { opacity:1; transform:none; }
.pc-item .pc-cap .t { font-weight:500; font-size:15px; } .pc-item .pc-cap .m { font-family:var(--f-mono); font-size:11px; color:var(--muted); margin-top:4px; }
.pc-item.hide { display:none; }
@media (max-width:980px){ .pc-masonry{ columns:2; } }
@media (max-width:560px){ .pc-masonry{ columns:1; } }

/* lightbox */
.lb { position:fixed; inset:0; z-index:9998; background:rgba(5,5,7,.92); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:4vw; opacity:0; transition:opacity .3s; }
.lb.open { display:flex; opacity:1; }
.lb img { max-width:92vw; max-height:88vh; border-radius:var(--r-lg); box-shadow:0 40px 100px -40px #000; }
.lb-close, .lb-nav { position:fixed; background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:#fff;
  width:48px; height:48px; border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:background .2s; z-index:9999; }
.lb-close:hover, .lb-nav:hover { background:rgba(255,255,255,.16); }
.lb-close { top:24px; right:24px; } .lb-prev { left:24px; top:50%; transform:translateY(-50%); } .lb-next { right:24px; top:50%; transform:translateY(-50%); }

/* ---------- Blogs ---------- */
.blog-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.blog-card { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-1); padding:26px;
  display:flex; flex-direction:column; gap:12px; transition:transform .3s,border-color .3s,background .3s; }
.blog-card:hover { transform:translateY(-5px); border-color:var(--line-2); background:var(--surface-2); }
.blog-card .bcat { font-family:var(--f-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); }
.blog-card h3 { font-family:var(--f-display); font-weight:600; font-size:21px; letter-spacing:-.02em; line-height:1.2; margin:0; }
.blog-card p { font-size:14px; color:var(--muted); line-height:1.6; margin:0; flex:1; }
.blog-card .bmeta { font-family:var(--f-mono); font-size:11.5px; color:var(--muted-2); margin-top:6px; }
.blog-card.hide { display:none; }
@media (max-width:980px){ .blog-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .blog-cards{ grid-template-columns:1fr; } }

.search-bar { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:12px 20px; background:var(--surface-1); max-width:480px; }
.search-bar input { flex:1; background:none; border:0; outline:none; color:var(--text); font-family:var(--f-text); font-size:15px; }
.search-bar input::placeholder { color:var(--muted-2); }

.newsletter { border:1px solid var(--line); border-radius:var(--r-2xl); padding:clamp(36px,5vw,64px); background:var(--surface-1); text-align:center; }
.newsletter h2 { font-family:var(--f-display); font-weight:600; font-size:clamp(26px,4vw,46px); letter-spacing:-.03em; margin:0 0 12px; }
.newsletter h2 .serif { font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--accent); }
.newsletter p { color:var(--muted); margin:0 auto 26px; max-width:46ch; }
.newsletter form { display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; }
.newsletter input { flex:1; min-width:200px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 16px; color:var(--text); font-family:var(--f-text); font-size:15px; outline:none; }
.newsletter input:focus { border-color:var(--accent); }

/* ---------- Lanes / skills / tools / projects ---------- */
.lane-list { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px; }
.lane-list li { font-size:14px; color:var(--muted); display:flex; gap:10px; align-items:center; }
.lane-list li::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:0 0 auto; }

.skill-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.skill { border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; background:rgba(255,255,255,.02); transition:border-color .2s,background .2s; }
.skill:hover { border-color:var(--line-2); background:rgba(255,255,255,.045); }
.skill b { display:block; font-weight:600; font-size:16px; letter-spacing:-.01em; }
.skill span { font-size:13px; color:var(--muted); }
@media (max-width:640px){ .skill-grid{ grid-template-columns:1fr; } }

.tool-grid { display:flex; flex-wrap:wrap; gap:12px; }
.tool { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--r-md); padding:12px 18px; background:rgba(255,255,255,.02); font-weight:500; }
.tool .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }

.proj-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,22px); }
.proj { border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; background:var(--surface-1); transition:transform .3s,border-color .3s; }
.proj:hover { transform:translateY(-4px); border-color:var(--line-2); }
.proj .status { display:inline-block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--muted); margin-bottom:14px; }
.proj .status.active { color:#3ad07a; border-color:rgba(58,208,122,.4); }
.proj .status.progress { color:var(--accent); border-color:rgba(147,180,255,.4); }
.proj .status.soon { color:var(--muted-2); }
.proj h3 { font-family:var(--f-display); font-weight:600; font-size:22px; letter-spacing:-.02em; margin:0 0 8px; }
.proj p { font-size:14px; color:var(--muted); line-height:1.6; margin:0; }
@media (max-width:640px){ .proj-grid{ grid-template-columns:1fr; } }

/* ---------- Footer socials ---------- */
.socials { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.socials a { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r-md); color:var(--muted); transition:color .2s,border-color .2s,background .2s; }
.socials a:hover { color:#0a0a0c; background:var(--text); border-color:var(--text); }

/* story (about) */
.story { max-width:760px; }
.story p { font-size:clamp(16px,1.5vw,18px); color:var(--muted); line-height:1.75; margin:0 0 22px; }
.story p strong { color:var(--text); font-weight:600; }
.story h2 { font-family:var(--f-display); font-weight:600; font-size:clamp(24px,3vw,38px); letter-spacing:-.03em; margin:48px 0 18px; }
.story h2 .serif { font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--accent); }

/* generic section heading reused on subpages already via .section-head */
.subgrid-2 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
@media (max-width:900px){ .subgrid-2{ grid-template-columns:1fr; } }

/* Prantik's Creation logo on photography page */
.pc-logo { width:clamp(260px,46vw,540px); height:auto; display:block; margin:6px 0 0; }

/* Brand logo images (nav monogram + footer full lockup) */
.brand-mark { height:30px; width:auto; display:block; }
.footer .brand-full { width:clamp(150px,15vw,186px); height:auto; display:block; }
@media (max-width:768px){ .brand-mark { height:26px; } }

/* Name caption below the hero photo */
.pf-name { text-align:center; margin-top:26px; display:flex; flex-direction:column; gap:7px; align-items:center;
  font-family:var(--f-display); font-weight:600; font-size:clamp(20px,2.1vw,27px); letter-spacing:-.015em; color:var(--text); }
.pf-name span { font-family:var(--f-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted-2); font-weight:400; }

/* Hero cinematic film-dissolve between two portraits */
.pf-photo-wrap[data-hero-rotate] .pf-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pf-photo-2 { opacity:0; transition:opacity 1.3s ease-in-out; object-position:center 22%; will-change:opacity; }
.pf-photo-wrap.show-2 .pf-photo-2 { opacity:1; }
@media (prefers-reduced-motion: reduce){ .pf-photo-2 { display:none; } }

/* ---------- Let's Connect contact modal ---------- */
.lc-overlay { position:fixed; inset:0; z-index:10000; background:rgba(5,5,7,.62); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease; }
.lc-overlay.open { opacity:1; visibility:visible; }
.lc-modal { width:min(520px,100%); max-height:90vh; overflow-y:auto; position:relative;
  background:rgba(18,19,26,.82); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  border:1px solid var(--line-2); border-radius:var(--r-2xl); padding:clamp(26px,4vw,40px);
  box-shadow:0 40px 120px -40px #000, inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(18px) scale(.98); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.lc-overlay.open .lc-modal { transform:none; }
.lc-close { position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:background .2s,border-color .2s; }
.lc-close:hover { background:rgba(255,255,255,.12); border-color:var(--line-2); }
.lc-title { font-family:var(--f-display); font-weight:600; font-size:clamp(26px,3vw,34px); letter-spacing:-.03em; margin:14px 0 12px; }
.lc-sub { font-size:14px; color:var(--muted); line-height:1.6; margin:0 0 18px; max-width:44ch; }
.lc-row { border:1px solid var(--line); border-radius:var(--r-lg); padding:13px 16px; margin-bottom:9px; background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:8px; transition:border-color .25s,background .25s; }
.lc-row:hover { border-color:var(--line-2); background:rgba(255,255,255,.045); }
.lc-label { font-family:var(--f-mono); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); }
.lc-main { font-weight:600; font-size:15px; letter-spacing:-.01em; word-break:break-word; }
.lc-meta { font-size:12.5px; color:var(--muted); margin-top:-4px; }
.lc-emailline { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.lc-copy { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:11.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-md); padding:7px 11px; background:none; cursor:pointer; transition:color .2s,border-color .2s; white-space:nowrap; }
.lc-copy:hover { color:var(--text); border-color:var(--line-2); }
.lc-actions { display:flex; gap:8px; flex-wrap:wrap; }
.lc-row .btn { padding:9px 16px; min-height:38px; }
.lc-foot { color:var(--muted); line-height:1.55; margin:16px 2px 0; text-align:center; font-family:var(--f-serif); font-style:italic; font-size:14.5px; }
@media (max-width:480px){ .lc-emailline { align-items:flex-start; } }