/* Jaivanth Melanaturu — Portfolio · shared styles (index + project pages) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg:#0A0A0B; --bg-2:#0E0E10; --panel:#141417; --panel-2:#1A1A1E;
  --line:rgba(255,255,255,0.09); --line-2:rgba(255,255,255,0.16);
  --text:#FAFAFA; --text-2:#C7C7CC; --muted:#84848C; --faint:#54545B;
  --acc:#F5D90A; --acc-2:#FCE35A; --acc-dim:rgba(245,217,10,0.14); --acc-line:rgba(245,217,10,0.40);
  --ok:#5CD08A;
  --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased; }
::selection { background:var(--acc); color:#000; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--acc); }
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-0.02em; line-height:1.05; }
p { margin:0; }
img { display:block; max-width:100%; }

.mono { font-family:var(--mono); font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted); }
.acc { color:var(--acc); }

.btn { display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:13px; letter-spacing:.04em; padding:.7em 1.1em; border:1px solid var(--line-2); color:var(--text); background:transparent; cursor:pointer; transition:border-color .18s,color .18s,background .18s,transform .12s; }
.btn:hover { border-color:var(--acc-line); color:var(--acc); }
.btn:active { transform:translateY(1px); }
.btn--solid { background:var(--acc); color:#000; border-color:var(--acc); font-weight:600; }
.btn--solid:hover { background:var(--acc-2); color:#000; border-color:var(--acc-2); }
.btn .arr { transition:transform .18s; }
.btn:hover .arr { transform:translate(2px,-2px); }

.ph { position:relative; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg,rgba(255,255,255,0.028) 0 10px,rgba(255,255,255,0.00) 10px 20px),var(--panel); border:1px solid var(--line); overflow:hidden; color:var(--muted); }
.ph__tag { font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--muted); padding:5px 9px; border:1px solid var(--line); background:var(--bg); text-transform:uppercase; }
.ph::before { content:""; position:absolute; inset:9px; border:1px dashed var(--line); pointer-events:none; }
.ticks::before,.ticks::after { content:""; position:absolute; width:7px; height:7px; border:1px solid var(--acc-line); }

/* ---- editor bar ---- */
.bar { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px; height:48px; padding:0 26px; background:rgba(10,10,11,0.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.bar .dots { display:flex; gap:7px; }
.bar .dots i { width:11px; height:11px; border-radius:50%; background:var(--line-2); display:block; }
.bar .dots i:first-child { background:var(--acc); }
.bar .path { font-family:var(--mono); font-size:12.5px; color:var(--muted); }
.bar .path b { color:var(--text-2); font-weight:500; }
.bar nav { margin-left:auto; display:flex; gap:4px; }
.bar nav a { font-family:var(--mono); font-size:12px; color:var(--muted); padding:6px 11px; transition:color .15s; }
.bar nav a:hover { color:var(--acc); }

/* ---- bash command line ---- */
.cmd { font-family:var(--mono); font-size:14px; letter-spacing:.01em; display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; color:var(--text-2); }
.cmd .p { color:var(--acc); }
.cmd .c { color:var(--text); }
.cmd .hash { color:var(--faint); }
.cur { display:inline-block; width:9px; height:16px; background:var(--acc); vertical-align:-2px; animation:bl 1.1s steps(1) infinite; }
@keyframes bl { 50% { opacity:0; } }

.wrap-page { width:100%; max-width:1020px; margin:0 auto; padding:0 32px; }
.chip { font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line); padding:4px 9px; letter-spacing:.03em; }

/* ============ PROJECT PAGE ============ */
.pj-hero { padding:66px 0 0; }
.pj-hero .kick { font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); margin:26px 0 14px; }
.pj-hero h1 { font-size:clamp(36px,5.6vw,68px); letter-spacing:-0.04em; line-height:0.98; max-width:18ch; }
.pj-hero .sub { font-size:clamp(18px,2vw,22px); color:var(--text-2); max-width:52ch; margin-top:18px; line-height:1.4; }
.pj-hero .sub b { color:var(--text); font-weight:600; }

/* overview box — the 7-second scan target */
.ov { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:36px; }
.ov > div { background:var(--bg-2); padding:16px 18px; }
.ov .k { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ov .v { font-size:15px; color:var(--text); margin-top:6px; line-height:1.4; }
.ov .v a { color:var(--acc); border-bottom:1px solid var(--acc-line); }

/* metric tiles */
.mx { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-top:0; }
.mx > div { background:var(--bg); padding:22px 20px; }
.mx .n { font-size:32px; font-weight:600; letter-spacing:-0.03em; }
.mx .n .y { color:var(--acc); }
.mx .l { font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:6px; letter-spacing:.04em; line-height:1.5; }

section.pj { padding:58px 0 0; }
.pj .sh { margin-bottom:24px; }
.pj h2 { font-size:clamp(24px,3vw,34px); letter-spacing:-0.03em; margin-bottom:16px; }
.pj .prose { font-size:17.5px; color:var(--text-2); max-width:62ch; }
.pj .prose b, .pj .prose .hi { color:var(--text); font-weight:600; }
.pj .prose .y { color:var(--acc); font-weight:600; }
.pj .prose p + p { margin-top:12px; }

/* approach steps */
.steps { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); max-width:760px; }
.steps > div { background:var(--bg); padding:16px 18px; display:flex; gap:16px; align-items:baseline; }
.steps .sn { font-family:var(--mono); font-size:12px; color:var(--acc); flex-shrink:0; }
.steps .st { font-size:16px; color:var(--text-2); }
.steps .st b { color:var(--text); font-weight:600; }

/* results split */
.res { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.res .ph { aspect-ratio:16/10; }
.res ul { list-style:none; margin:0; padding:0; }
.res li { padding:12px 0 12px 26px; border-bottom:1px solid var(--line); position:relative; font-size:16.5px; color:var(--text-2); }
.res li:last-child { border-bottom:0; }
.res li::before { content:"+"; position:absolute; left:0; color:var(--acc); font-family:var(--mono); }
.res li b { color:var(--text); font-weight:600; }
.figcap { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.05em; margin-top:8px; }

/* full-width paired figures (e.g. detection sample + structured output) */
.res2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; margin-top:36px; }

/* full-width results list (pages without a figure) */
.res-list { list-style:none; margin:0; padding:0; max-width:62ch; }
.res-list li { padding:12px 0 12px 26px; border-bottom:1px solid var(--line); position:relative; font-size:16.5px; color:var(--text-2); }
.res-list li:last-child { border-bottom:0; }
.res-list li::before { content:"+"; position:absolute; left:0; color:var(--acc); font-family:var(--mono); }
.res-list li b { color:var(--text); font-weight:600; }

/* skills demonstrated */
.sk { display:flex; flex-wrap:wrap; gap:8px; max-width:760px; }

/* footer nav */
.pj-foot { margin-top:72px; border-top:1px solid var(--line); }
.pj-next { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.pj-next a { background:var(--bg); padding:26px 26px; display:flex; flex-direction:column; gap:8px; transition:background .15s; }
.pj-next a:hover { background:var(--bg-2); color:inherit; }
.pj-next .k { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.pj-next .t { font-size:20px; font-weight:600; letter-spacing:-0.02em; }
.pj-next a:hover .t { color:var(--acc); }
.pj-cta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:30px 0 60px; }
.pj-cta .links { display:flex; flex-wrap:wrap; gap:10px; }

/* ---- left progress nav (project pages) ---- */
.layout { display:flex; align-items:flex-start; gap:8px; width:100%; }
.toc { flex:0 0 128px; position:sticky; top:88px; display:flex; flex-direction:column; gap:20px; padding:6px 0 6px 22px; margin-left:14px; }
.toc-line { position:absolute; left:22px; top:10px; bottom:10px; width:1px; background:var(--line); }
.toc-fill { position:absolute; top:0; left:0; width:100%; background:var(--acc-line); transition:height .1s linear; }
.toc-item { position:relative; padding-left:20px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); transition:color .18s; white-space:nowrap; }
.toc-item:hover { color:var(--text-2); }
.toc-item .d { position:absolute; left:0; top:50%; transform:translate(-50%,-50%); width:7px; height:7px; border-radius:50%; background:var(--bg); border:1px solid var(--line-2); transition:background .18s,border-color .18s; }
.toc-item.active { color:var(--acc); }
.toc-item.active .d { background:var(--acc); border-color:var(--acc); }
.layout .wrap-page { flex:1 1 auto; min-width:0; margin:0 auto; }

@media (max-width:900px) {
  .toc { display:none; }
}

@media (max-width:820px) {
  .ov { grid-template-columns:1fr 1fr; }
  .mx { grid-template-columns:1fr; }
  .res { grid-template-columns:1fr; }
  .res2 { grid-template-columns:1fr; }
  .pj-next { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { *{ transition:none !important; animation:none !important; } html{ scroll-behavior:auto; } }