/*
  Mandar Joglekar — personal site
  Structure: Direction A (variation-7-merged.html) — sidebar, scroll-spy nav.
  Visual language: Direction B (Portfolio - Glass Theme Gallery.dc.html) —
  glass cards over a radial-gradient mesh, dual-accent color themes.
  See CLAUDE_CODE_BRIEF.md for the structural brief this deviates from on
  visual treatment (that brief specified a flat, zero-shadow sage palette;
  the approved plan chose the glass hybrid instead — documented here per
  the brief's own "where you deviate, say why" instruction).
*/

:root{
  /* Structural tokens — theme-independent */
  --sidebar-w: 240px;
  --page-pad: 44px;
  --section-gap: 56px;
  --radius-card: 16px;
  --radius-sm: 12px;
  --radius-pill: 100px;
  --dur-fast: 200ms;
  --dur-med: 300ms;
  --font: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Theme tokens — default is 4f Light glass (chosen palette); overridden per data-theme */
  --bg: #eef2f6;
  --glow1: #93c5fd66;
  --glow2: #a7f3d055;
  --glow3: #fde68a44;
  --text: #1e293b;
  --text-sec: #475569;
  --accent: #1d4ed8;
  --accent2: #047857;
  --card-bg: rgba(255,255,255,.6);
  --card-border: rgba(255,255,255,.8);
  --inner-bg: rgba(255,255,255,.55);
  --inner-border: rgba(255,255,255,.8);
  --shadow: 0 6px 20px rgba(30,41,59,.08);
}

/* ---- 8 themes — 4f (Light glass) is the only one a visitor sees
   (:root above). The other 7 stay defined here as inert reference
   palettes, not wired to any UI — see sidebar-bottom comment in
   index.html for how to reactivate one by hand ---- */
[data-theme="4a"]{ --bg:#0a0e14; --glow1:#1e6fae66; --glow2:#0891b255; --glow3:#38bdf833; --text:#e8ecf5; --text-sec:#8b93ab; --accent:#67e8f9; --accent2:#7dd3fc; --card-bg:rgba(255,255,255,.06); --card-border:rgba(255,255,255,.12); --inner-bg:rgba(255,255,255,.05); --inner-border:rgba(255,255,255,.1); --shadow:none; }
[data-theme="4b"]{ --bg:#12100c; --glow1:#b4530933; --glow2:#57534e4d; --glow3:#f59e0b26; --text:#ede8de; --text-sec:#a39c8c; --accent:#fbbf24; --accent2:#fdba74; --card-bg:rgba(255,255,255,.06); --card-border:rgba(255,255,255,.12); --inner-bg:rgba(255,255,255,.05); --inner-border:rgba(255,255,255,.1); --shadow:none; }
[data-theme="4c"]{ --bg:#0a1210; --glow1:#05966933; --glow2:#0369714d; --glow3:#22c55e26; --text:#e6f2ec; --text-sec:#8fa89c; --accent:#6ee7b7; --accent2:#5eead4; --card-bg:rgba(255,255,255,.06); --card-border:rgba(255,255,255,.12); --inner-bg:rgba(255,255,255,.05); --inner-border:rgba(255,255,255,.1); --shadow:none; }
[data-theme="4d"]{ --bg:#0b0c0e; --glow1:#3f465433; --glow2:#2a2f384d; --glow3:#ffffff14; --text:#e8e9ec; --text-sec:#8b8d94; --accent:#e8e9ec; --accent2:#c6c7cc; --card-bg:rgba(255,255,255,.06); --card-border:rgba(255,255,255,.12); --inner-bg:rgba(255,255,255,.05); --inner-border:rgba(255,255,255,.1); --shadow:none; }
[data-theme="4e"]{ --bg:#140b0c; --glow1:#e11d4833; --glow2:#78716c4d; --glow3:#fb718526; --text:#f3e8e9; --text-sec:#ab9294; --accent:#fda4af; --accent2:#fecdd3; --card-bg:rgba(255,255,255,.06); --card-border:rgba(255,255,255,.12); --inner-bg:rgba(255,255,255,.05); --inner-border:rgba(255,255,255,.1); --shadow:none; }
[data-theme="4f"]{ --bg:#eef2f6; --glow1:#93c5fd66; --glow2:#a7f3d055; --glow3:#fde68a44; --text:#1e293b; --text-sec:#475569; --accent:#1d4ed8; --accent2:#047857; --card-bg:rgba(255,255,255,.6); --card-border:rgba(255,255,255,.8); --inner-bg:rgba(255,255,255,.55); --inner-border:rgba(255,255,255,.8); --shadow:0 6px 20px rgba(30,41,59,.08); }
[data-theme="4g"]{ --bg:#101208; --glow1:#65790733; --glow2:#4d453a4d; --glow3:#a3a53a26; --text:#e7e6d9; --text-sec:#9a9a86; --accent:#d9f99d; --accent2:#bef264; --card-bg:rgba(255,255,255,.06); --card-border:rgba(255,255,255,.12); --inner-bg:rgba(255,255,255,.05); --inner-border:rgba(255,255,255,.1); --shadow:none; }
[data-theme="4h"]{ --bg:#0c0a0a; --glow1:#b91c1c40; --glow2:#44403c4d; --glow3:#dc262620; --text:#f2ecec; --text-sec:#a89a9a; --accent:#fca5a5; --accent2:#f87171; --card-bg:rgba(255,255,255,.06); --card-border:rgba(255,255,255,.12); --inner-bg:rgba(255,255,255,.05); --inner-border:rgba(255,255,255,.1); --shadow:none; }

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

.skip-link{position:absolute; left:-999px; top:0; background:var(--accent); color:var(--bg); padding:10px 16px; border-radius:0 0 8px 0; z-index:100}
.skip-link:focus{left:0}

html{background:var(--bg)}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background var(--dur-med) ease, color var(--dur-med) ease;
}
a{color:inherit; text-decoration:none}
ul{list-style:none}
img{max-width:100%; display:block}

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

/* Background gradient mesh — fixed, behind everything */
.app{position:relative; display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh}
.app::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 15% 8%, var(--glow1), transparent 55%),
    radial-gradient(circle at 88% 70%, var(--glow2), transparent 50%),
    radial-gradient(circle at 55% 5%, var(--glow3), transparent 45%);
}

/* ---- Glass card primitive ---- */
.glass-card{
  position:relative; z-index:1;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:var(--inner-bg); border:1px solid var(--inner-border);
  border-radius:var(--radius-card); box-shadow:var(--shadow);
}

/* ---- Sidebar ---- */
.sidebar{
  position:sticky; top:0; height:100vh; z-index:2;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:32px 20px; gap:24px;
  border-right:1px solid var(--inner-border);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  background:var(--card-bg);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; margin-bottom:28px}
.logo{flex:0 0 auto; border-radius:8px}
.nav{display:flex; flex-direction:column; gap:4px}
.navlink{
  font-size:14px; color:var(--text-sec); padding:10px 12px; border-radius:var(--radius-sm);
  transition:background var(--dur-fast), color var(--dur-fast);
}
.navlink:hover{background:var(--inner-bg); color:var(--text)}
.navlink.is-active{background:var(--inner-bg); color:var(--accent); font-weight:600}

.sidebar-bottom{display:flex; flex-direction:column; gap:18px}

.status{font-size:13px; color:var(--text-sec); line-height:1.7}
.status b{color:var(--accent)}

/* ---- Main / hero ---- */
main{position:relative; z-index:1; padding:0 var(--page-pad) 32px; min-width:0}

.hero-grid{
  display:grid; grid-template-columns:1.3fr 0.9fr; gap:40px; align-items:start;
  padding-top:50px; margin-bottom:40px;
}
.eyebrow{font-size:13px; letter-spacing:.02em; color:var(--text-sec); margin-bottom:18px}
h1{font-weight:700; font-size:44px; line-height:1.12; letter-spacing:-.5px; margin-bottom:20px; max-width:720px}
.hero-sub{font-size:17px; line-height:1.65; color:var(--text-sec); max-width:560px; margin-bottom:26px}
.ctas{display:flex; gap:14px}
.btn{padding:13px 24px; border-radius:12px; font-size:13.5px; font-weight:600; transition:transform var(--dur-fast), background var(--dur-fast)}
.btn-primary{backdrop-filter:blur(16px); background:var(--card-bg); border:1px solid var(--card-border); color:var(--text)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline{border:1px solid var(--card-border); color:var(--text-sec)}
.btn-outline:hover{color:var(--text); border-color:var(--accent)}

.headshot-card{overflow:hidden; padding:0}
[data-image-slot="headshot"] img{object-position:center 0%}
.headshot-caption{padding:10px 14px; font-size:13px; color:var(--text-sec); display:flex; justify-content:space-between}
.headshot-caption b{color:var(--accent)}

/* ---- Image slots (real, working placeholders — never invented photography) ---- */
.image-slot{
  aspect-ratio:var(--ar, 16/9); width:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--text-sec); font-size:12px; line-height:1.5;
  background:
    repeating-linear-gradient(135deg, var(--inner-bg), var(--inner-bg) 10px, transparent 10px, transparent 20px),
    var(--inner-border);
  border-radius:inherit;
}
.image-slot[data-aspect="4/5"]{ --ar: 4/5 }
.image-slot[data-aspect="16/9"]{ --ar: 16/9 }
.image-slot[data-aspect="16/10"]{ --ar: 16/10 }
.image-slot img{width:100%; height:100%; object-fit:cover; border-radius:inherit}
.image-slot-sm{border-radius:var(--radius-sm) var(--radius-sm) 0 0}

/* ---- Client-logo strip ---- */
.client-strip{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding:20px 0; margin-bottom:32px; border-top:1px solid var(--inner-border); border-bottom:1px solid var(--inner-border);
}
.client-strip-label{font-size:11px; letter-spacing:.08em; color:var(--text-sec); text-transform:uppercase}
.client-strip-logos{display:flex; gap:32px; flex-wrap:wrap; font-size:14px; font-weight:600; color:var(--text)}

/* ---- Stat strip ---- */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:var(--section-gap)}
.stat{padding:22px}
.stat .num{font-size:26px; font-weight:700; color:var(--accent)}
.stat:nth-child(2n) .num{color:var(--accent2)}
.stat .lbl{font-size:12px; color:var(--text-sec); margin-top:6px}

/* ---- Sections ---- */
.section{padding:var(--section-gap) 0; border-top:1px solid var(--inner-border)}
.section-label{font-size:13px; letter-spacing:.06em; color:var(--accent); text-transform:uppercase; font-weight:600; margin-bottom:28px}

/* ---- Work explorer: list + detail (structural pattern only — see index.html comment) ---- */
.work-explorer{display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start}

.work-list{display:flex; flex-direction:column; gap:8px}
.work-list-item{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:12px; border-radius:var(--radius-sm); border:1px solid transparent;
  background:transparent; cursor:pointer; transition:background var(--dur-fast), border-color var(--dur-fast);
}
.work-list-item:hover{background:var(--inner-bg)}
.work-list-item[aria-current="true"]{background:var(--inner-bg); border-color:var(--accent)}
.work-list-icon{width:40px; height:40px; flex:0 0 auto; border-radius:8px}
.work-list-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.work-list-title{font-size:14.5px; font-weight:600}
.work-list-teaser{font-size:12px; color:var(--text-sec); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.work-list-arrow{margin-left:auto; color:var(--text-sec); flex:0 0 auto}
.work-list-item[aria-current="true"] .work-list-arrow{color:var(--accent)}

.work-detail{padding:32px; min-width:0}
.work-detail-image{margin:18px 0; border-radius:var(--radius-sm)}
.work-detail-top{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.work-detail-badge{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); background:var(--inner-bg); border:1px solid var(--inner-border); padding:5px 10px; border-radius:var(--radius-pill)}
.work-detail-case{font-size:12px; color:var(--text-sec)}
.work-detail-mark{margin-left:auto; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--text-sec)}
.work-detail-title{font-size:22px; font-weight:600; line-height:1.3; margin-bottom:14px}
.work-detail-desc{font-size:14px; color:var(--text-sec); line-height:1.6}
.work-detail-desc a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.work-detail-divider{border-top:1px solid var(--inner-border); margin:22px 0}
.work-detail-eyebrow{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:10px}
.work-detail-how p{font-size:13.5px; color:var(--text-sec); line-height:1.65}
.work-detail-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.work-detail-tags{display:flex; gap:8px; flex-wrap:wrap}
.work-detail-tag{font-size:11.5px; color:var(--text); background:var(--inner-bg); border:1px solid var(--inner-border); padding:5px 12px; border-radius:var(--radius-pill)}
.work-metric{display:flex; align-items:baseline; gap:8px}
.work-metric-num{font-size:20px; font-weight:700; color:var(--accent)}
.work-metric-lbl{font-size:12.5px; color:var(--text-sec)}

/* ---- Track record ---- */
.track-list{display:flex; flex-direction:column; gap:12px}
.track-item{padding:22px; display:grid; grid-template-columns:130px 1fr; gap:20px}
.track-when{font-size:12.5px; color:var(--accent); font-weight:600}
.track-role{font-weight:600; font-size:16px; margin-bottom:8px}
.track-org{color:var(--accent)}
.track-item p{font-size:13.5px; color:var(--text-sec); line-height:1.6}
.track-item ul{display:flex; flex-direction:column; gap:6px}
.track-item li{font-size:13.5px; color:var(--text-sec); line-height:1.6; padding-left:14px; position:relative}
.track-item li::before{content:"–"; position:absolute; left:0; color:var(--text-sec)}

/* ---- Why work with me ---- */
.why-card{padding:32px}
.why-lede{font-size:16px; line-height:1.7; color:var(--text); max-width:820px; margin-bottom:28px}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.why-item h3{font-size:14.5px; font-weight:600; margin-bottom:8px; color:var(--accent)}
.why-item p{font-size:13px; color:var(--text-sec); line-height:1.6}

/* ---- AI builds ---- */
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.build-card{overflow:hidden; transition:transform var(--dur-fast)}
.build-card:hover, .build-card:focus-within{transform:translateY(-3px)}
.build-body{padding:16px}
.build-body .tt{font-weight:600; font-size:15px; margin-bottom:6px}
.build-body .tt a{text-decoration:underline; text-underline-offset:2px}
.build-body .ts{font-size:12.5px; color:var(--text-sec)}
.build-status{font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text-sec); background:var(--inner-bg); border:1px solid var(--inner-border); padding:3px 8px; border-radius:var(--radius-pill); margin-left:6px; vertical-align:middle}
.build-status-live{color:var(--accent); border-color:var(--accent)}

/* ---- Footer / contact ---- */
footer{text-align:center; padding:64px 0 20px}
/* .section's own padding (higher specificity — class beats type) was
   silently overriding footer's padding-bottom above, adding 56px of
   dead space after .legal-strip that broke the sidebar-row alignment
   below. footer.section (0,0,1,1) beats .section alone (0,0,1,0). */
footer.section{padding-bottom:0}
footer h2{font-size:30px; font-weight:700; margin-bottom:16px}
.contact-lede{font-size:14px; color:var(--text-sec); max-width:440px; margin:0 auto 32px}
.contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; text-align:left}
.contact-tile{padding:20px; display:flex; flex-direction:column; gap:7px; transition:transform var(--dur-fast), border-color var(--dur-fast)}
a.contact-tile:hover, a.contact-tile:focus-visible{transform:translateY(-3px); border-color:var(--accent)}
.contact-tile-icon{color:var(--accent)}
.contact-tile:nth-child(2n) .contact-tile-icon{color:var(--accent2)}
.contact-tile-label{font-size:13.5px; font-weight:600; color:var(--text)}
.contact-tile-sub{font-size:12px; color:var(--text-sec); line-height:1.4; word-break:break-word}
.contact-tile-card{position:relative; padding-right:64px}
.contact-tile-qr{position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:6px}
/* Legal fine print — a distinct bottom strip, deliberately smaller than
   the 12px body-text floor used elsewhere: this is conventional legal/
   copyright fine print, not primary reading content, and a wide
   max-width keeps it from wrapping into a tight, crowded block. */
/* Last item in <main>'s column, deliberately. For the sidebar's status
   text (bottom, inside 32px of sidebar padding) to land in the same
   row as this text, .app's true bottom edge needs that same 32px of
   space below THIS block too — that's what main's padding-bottom (32px,
   matching .sidebar's) now provides; .legal-strip's own padding-bottom
   below is purely cosmetic spacing on top of that, not load-bearing. */
.legal-strip{margin-top:40px; padding:22px 0 0; border-top:1px solid var(--inner-border); text-align:left}
/* line-height set in px, not a ratio, to match .status's actual
   22.1px/line (13px * 1.7) — bottoms are already pixel-aligned (see
   main/.legal-strip padding above), so matching per-line height too
   makes the tops align as well, as long as both blocks keep the same
   3-line count they render at now. */
.legal-disclaimer{font-size:11px; line-height:22.1px; letter-spacing:.01em; color:var(--text-sec); max-width:820px; margin:0; opacity:.7}

/* ---- Motion ---- */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity var(--dur-med) ease, transform var(--dur-med) ease}
[data-reveal].is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{transition:none; opacity:1; transform:none}
  .btn-primary:hover, .build-card:hover, .build-card:focus-within{transform:none}
}

/* ---- Responsive ---- */
@media (max-width: 900px){
  .app{grid-template-columns:1fr; min-width:0}
  .sidebar{position:relative; height:auto; flex-direction:row; align-items:center; padding:16px 20px; min-width:0}
  .sidebar-top{display:flex; align-items:center; gap:16px; min-width:0; flex:1 1 auto}
  .brand{flex:0 0 auto; margin-bottom:0}
  .brand span{display:none} /* keep just the mark at mobile widths so nav gets room to scroll */
  .nav{flex-direction:row; overflow-x:auto; min-width:0; flex:1 1 auto}
  .navlink{flex:0 0 auto; white-space:nowrap}
  /* Status block is a desktop-only element — hidden on mobile rather
     than competing with nav for a ~390px-wide top bar. */
  .sidebar-bottom{display:none}
  .hero-grid{grid-template-columns:1fr}
  h1{font-size:32px}
  .stat-strip{grid-template-columns:1fr 1fr}
  .work-explorer{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .card-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .track-item{grid-template-columns:1fr}
}
@media (max-width: 480px){
  main{padding:0 20px 60px}
  .stat-strip, .why-grid, .card-grid, .contact-grid{grid-template-columns:1fr}
}