/* ===== Abhishek Sivaraman — portfolio · "The System" ===== */
:root{
  --bg:#eef0ec;
  --panel:#e7e9e4;
  --ink:#15171a;
  --mut:#5a5f64;
  --faint:#8b9097;
  --line:#d3d7d1;
  --line-strong:#15171a;
  --accent:#ff4d23;
  --accent-ink:#c5350f;
  --maxw:1140px;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"Space Grotesk",system-ui,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:clamp(20px,5vw,48px); }

.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--bg); padding:10px 16px; z-index:50; }
.skip:focus{ left:8px; top:8px; }

/* ---------- top bar ---------- */
.topbar{ position:sticky; top:0; z-index:30; background:color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.bar{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.brand{ font-weight:700; letter-spacing:-.02em; font-size:15px; }
.brand::before{ content:"●"; color:var(--accent); font-size:10px; vertical-align:2px; margin-right:8px; }
.pillars{ display:flex; gap:clamp(10px,2vw,22px); }
.pillars a{ font-family:var(--mono); font-size:12px; color:var(--mut); letter-spacing:.02em; position:relative; padding:4px 0; }
.pillars a:hover{ color:var(--ink); }
.pillars a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--accent); transition:right .25s cubic-bezier(.2,.7,.3,1); }
.pillars a:hover::after{ right:0; }
.ghlink{ font-family:var(--mono); font-size:12px; color:var(--mut); }
.ghlink:hover{ color:var(--accent-ink); }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(56px,11vw,128px) clamp(40px,7vw,80px); }
.hero-meta{ display:flex; gap:18px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); padding-bottom:24px; }
.hero-meta span{ position:relative; padding-left:16px; }
.hero-meta span::before{ content:""; position:absolute; left:0; top:50%; width:8px; height:1px; background:var(--faint); }
.hero h1{
  font-weight:700; letter-spacing:-.035em; line-height:.98;
  font-size:clamp(40px,8.5vw,92px); max-width:14ch;
}
.hero h1 .o{ color:var(--accent); }
.lede{ font-family:var(--mono); font-size:clamp(13px,1.5vw,15px); line-height:1.65; color:var(--mut); max-width:60ch; margin-top:clamp(22px,3vw,32px); }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(36px,5vw,56px); border:1.5px solid var(--line-strong); }
.stats .cell{ padding:18px 18px 16px; border-right:1.5px solid var(--line-strong); }
.stats .cell:last-child{ border-right:none; }
.stats .k{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.stats .v{ font-weight:700; font-size:clamp(26px,4vw,40px); letter-spacing:-.03em; margin-top:8px; line-height:1; }
.stats .note{ font-size:12px; color:var(--mut); margin-top:6px; }

/* ---------- section scaffolding ---------- */
.sec{ padding-block:clamp(40px,6vw,72px); border-top:1px solid var(--line); }
.sechead{ display:flex; align-items:baseline; gap:14px; margin-bottom:clamp(22px,3vw,32px); }
.sechead .sn{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.1em; }
.sechead h2{ font-weight:700; font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; }
.sechead .scount{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-left:auto; }
.secnote{ font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--mut); max-width:64ch; margin-bottom:26px; }

/* ---------- skills grid ---------- */
.skillgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.skillcell{ padding:16px 18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s; }
.skillcell:hover{ background:var(--panel); }
.skillcell .top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.skillcell .nm{ font-weight:600; font-size:14.5px; letter-spacing:-.01em; }
.skillcell .cat{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
.skillcell .ds{ font-size:12.5px; color:var(--mut); margin-top:7px; line-height:1.4; }
.skillcell.more{ display:flex; align-items:center; justify-content:center; background:var(--ink); color:var(--bg); }
.skillcell.more a{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; }
.skillcell.more a:hover{ color:var(--accent); }

/* ---------- ledger (projects) ---------- */
.ledger{ border-top:1px solid var(--line-strong); }
.lrow{ display:grid; grid-template-columns:42px 36px 1fr; gap:0 14px; padding:18px 8px; border-bottom:1px solid var(--line); align-items:start; position:relative; transition:background .18s, padding-left .18s; }
.lrow .logo{ width:32px; height:32px; border-radius:7px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--panel); border:1px solid var(--line); flex-shrink:0; }
.lrow img.logo{ object-fit:cover; }
.lrow span.logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.lrow .logo.placeholder{ font-family:var(--mono); font-size:14px; font-weight:600; color:var(--faint); }
/* apps grid: small icon top-left of each card */
.appcell .applogo{ width:36px; height:36px; border-radius:8px; overflow:hidden; display:block; background:var(--panel); border:1px solid var(--line); margin-bottom:10px; object-fit:cover; }
.appcell span.applogo{ display:flex; align-items:center; justify-content:center; }
.appcell span.applogo img{ width:100%; height:100%; object-fit:cover; }
.appcell .applogo.placeholder{ font-family:var(--mono); font-size:14px; font-weight:600; color:var(--faint); display:flex; align-items:center; justify-content:center; }
.d-visual.logo-hero{ background:var(--panel); border:1px solid var(--line); padding:48px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.d-visual.logo-hero img{ width:180px; height:180px; border-radius:24px; box-shadow:0 4px 24px rgba(0,0,0,.08); }
.d-audio{ margin:24px 0; }
.d-audio audio{ width:100%; max-width:520px; margin-top:8px; }
.lrow:hover{ background:var(--panel); padding-left:16px; }
.lrow .nn{ font-family:var(--mono); font-size:12px; color:var(--faint); padding-top:3px; }
.lrow:hover .nn{ color:var(--accent); }
.lrow .body{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.lrow .nm{ font-weight:600; font-size:17px; letter-spacing:-.015em; }
.lrow .arrow{ color:var(--faint); transition:transform .18s, color .18s; }
.lrow:hover .arrow{ color:var(--accent); transform:translate(3px,-3px); }
.lrow .ds{ flex-basis:100%; font-size:13.5px; color:var(--mut); max-width:70ch; line-height:1.45; }
.lrow .tags{ display:flex; gap:6px; margin-left:auto; }
.lrow .tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); border:1px solid var(--line); padding:2px 7px; border-radius:100px; }

/* ---------- apps grid ---------- */
.appgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.appcell{ background:var(--bg); padding:20px; transition:background .2s; }
.appcell:hover{ background:var(--panel); }
.appcell .nm{ font-weight:600; font-size:15.5px; display:flex; justify-content:space-between; align-items:center; }
.appcell .nm .lbl{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line); padding:2px 6px; border-radius:3px; }
.appcell .ds{ font-size:13px; color:var(--mut); margin-top:9px; line-height:1.45; }

/* ---------- writing ---------- */
.writecard{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; border:1.5px solid var(--line-strong); padding:clamp(22px,3vw,32px); }
.writecard .big{ font-weight:700; font-size:clamp(40px,7vw,64px); letter-spacing:-.03em; line-height:.9; color:var(--accent); }
.writecard .big small{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-top:8px; font-weight:400; }
.writecard h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; }
.writecard p{ font-size:14px; color:var(--mut); margin-top:8px; line-height:1.5; max-width:60ch; }
.writecard .go{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--accent-ink); }
.writecard .go:hover{ text-decoration:underline; }

/* ---------- products panel ---------- */
.product-panel{ background:var(--ink); color:var(--bg); border-radius:4px; padding:clamp(26px,4vw,44px); }
.product-panel .soon{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.product-panel .ptitle{ font-weight:700; font-size:clamp(22px,3.4vw,32px); letter-spacing:-.02em; margin-top:14px; max-width:20ch; }
.product-panel .pblurb{ font-family:var(--mono); font-size:13px; line-height:1.65; color:#b9bdc2; margin-top:16px; max-width:62ch; }
.teasers{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.teasers .t{ border:1px solid #34383d; border-radius:100px; padding:7px 14px; font-size:12.5px; }
.teasers .t b{ font-weight:600; }
.teasers .t span{ color:var(--faint); margin-left:8px; font-family:var(--mono); font-size:11px; }
.signup{ display:flex; gap:10px; margin-top:28px; max-width:480px; flex-wrap:wrap; }
.signup input{ flex:1; min-width:200px; background:transparent; border:1px solid #3a3e44; color:var(--bg); font-family:var(--mono); font-size:13px; padding:13px 15px; border-radius:4px; }
.signup input::placeholder{ color:#6b7077; }
.signup input:focus{ outline:none; border-color:var(--accent); }
.signup button{ background:var(--accent); color:#1c1409; font-family:var(--sans); font-weight:700; font-size:13.5px; border:none; padding:13px 22px; border-radius:4px; cursor:pointer; transition:.18s; }
.signup button:hover{ background:#ff6643; transform:translateY(-1px); }
.signup .ok{ font-family:var(--mono); font-size:12.5px; color:var(--accent); flex-basis:100%; }
.pfoot{ margin-top:16px; font-family:var(--mono); font-size:11.5px; color:var(--faint); }
.pfoot a{ color:#b9bdc2; text-decoration:underline; }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); margin-top:clamp(30px,5vw,60px); }
.foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-block:32px; }
.foot-links{ display:flex; gap:18px; }
.foot-links a{ font-family:var(--mono); font-size:12px; color:var(--mut); }
.foot-links a:hover{ color:var(--accent-ink); }
.colophon{ font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.06em; }

/* ---------- reveal motion ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media(max-width:760px){
  .pillars{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stats .cell:nth-child(2){ border-right:none; }
  .stats .cell:nth-child(1),.stats .cell:nth-child(2){ border-bottom:1.5px solid var(--line-strong); }
  .lrow .tags{ margin-left:0; flex-basis:100%; margin-top:4px; }
  .writecard{ grid-template-columns:1fr; gap:14px; }
}
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===== meta-theme band ===== */
.metaband{ margin-block:clamp(28px,4vw,44px); padding:clamp(26px,4vw,40px); background:var(--panel); border-left:2px solid var(--accent); }
.mlabel{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); }
.mtitle{ font-weight:700; font-size:clamp(22px,3.4vw,34px); letter-spacing:-.025em; margin-top:12px; max-width:18ch; }
.mblurb{ font-family:var(--mono); font-size:13px; line-height:1.65; color:var(--mut); max-width:66ch; margin-top:14px; }
.mchips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.mchip{ font-family:var(--mono); font-size:12px; padding:6px 13px; border:1px solid var(--line-strong); border-radius:100px; transition:.16s; }
.mchip:hover{ background:var(--ink); color:var(--bg); transform:translateY(-1px); }
.metadot{ color:var(--accent); font-size:8px; vertical-align:3px; margin-left:7px; }

/* full-width skills entry cell */
.skillcell.more.wide{ grid-column:1/-1; justify-content:space-between; padding:20px 22px; }
.skillcell.more.wide .arrow{ color:var(--accent); transition:transform .18s; }
.skillcell.more.wide:hover .arrow{ transform:translateX(4px); }

/* ===== detail page (project.html) ===== */
.detail{ padding-block:clamp(32px,6vw,64px) clamp(48px,8vw,96px); max-width:840px; }
.d-back{ margin-bottom:clamp(28px,5vw,48px); }
.d-back a{ font-family:var(--mono); font-size:12.5px; color:var(--mut); }
.d-back a:hover{ color:var(--accent-ink); }
.d-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:12px; }
.d-meta-badge{ background:var(--accent); color:#1c1409; padding:3px 9px; border-radius:100px; font-size:9.5px; letter-spacing:.08em; }
.d-title{ font-weight:700; font-size:clamp(36px,7vw,68px); letter-spacing:-.035em; line-height:1; margin-top:16px; }
.d-lede{ font-family:var(--mono); font-size:clamp(13px,1.6vw,16px); line-height:1.6; color:var(--mut); margin-top:18px; max-width:60ch; }
.d-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.d-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); border:1px solid var(--line); padding:3px 9px; border-radius:100px; }
.d-about,.d-features{ margin-top:clamp(34px,5vw,52px); }
.d-label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); display:block; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.d-about p{ font-size:clamp(16px,2vw,19px); line-height:1.6; color:var(--ink); max-width:62ch; }
.d-flist{ list-style:none; display:grid; gap:2px; }
.d-flist li{ display:grid; grid-template-columns:38px 1fr; align-items:start; gap:8px; padding:14px 8px; border-bottom:1px solid var(--line); font-size:15px; }
.d-flist .fn{ font-family:var(--mono); font-size:12px; color:var(--accent); padding-top:2px; }
.d-foot{ margin-top:clamp(40px,6vw,64px); display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.d-cta{ display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--bg); font-weight:600; font-size:14px; padding:14px 22px; border-radius:5px; transition:.18s; }
.d-cta span{ transition:transform .18s; }
.d-cta:hover{ background:var(--accent); color:#1c1409; }
.d-cta:hover span{ transform:translate(2px,-2px); }
.d-cta.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
.d-cta.ghost:hover{ background:var(--ink); color:var(--bg); }
.d-note{ font-family:var(--mono); font-size:12.5px; color:var(--faint); }

/* ===== skills browser (skills.html) ===== */
.sk-hero{ padding-block:clamp(28px,5vw,48px) clamp(8px,2vw,16px); }
.sk-title{ font-weight:700; font-size:clamp(32px,6vw,60px); letter-spacing:-.035em; line-height:1; max-width:16ch; }
.sk-controls{ position:sticky; top:56px; z-index:20; background:color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter:blur(8px); padding-block:18px; border-bottom:1px solid var(--line); margin-bottom:8px; }
#sk-search{ width:100%; background:transparent; border:1.5px solid var(--line-strong); border-radius:6px; font-family:var(--mono); font-size:15px; padding:14px 16px; color:var(--ink); }
#sk-search::placeholder{ color:var(--faint); }
#sk-search:focus{ outline:none; border-color:var(--accent); }
.sk-cats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.sk-chip{ font-family:var(--mono); font-size:12px; padding:6px 12px; border:1px solid var(--line); background:transparent; color:var(--mut); border-radius:100px; cursor:pointer; transition:.15s; }
.sk-chip span{ color:var(--faint); margin-left:5px; }
.sk-chip:hover{ border-color:var(--line-strong); color:var(--ink); }
.sk-chip.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.sk-chip.on span{ color:var(--accent); }
.sk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:18px; }
.sk-card{ background:var(--bg); padding:18px 20px; cursor:pointer; transition:background .18s; }
.sk-card:hover{ background:var(--panel); }
.sk-card:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.sk-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sk-name{ font-weight:600; font-size:15.5px; letter-spacing:-.01em; }
.sk-cat{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); }
.sk-desc{ font-size:13px; color:var(--mut); margin-top:8px; line-height:1.45; }
.sk-toggle{ margin-top:12px; background:none; border:none; padding:0; font-family:var(--mono); font-size:11.5px; color:var(--faint); cursor:pointer; }
.sk-toggle span{ color:var(--accent); margin-left:4px; }
.sk-card:hover .sk-toggle{ color:var(--ink); }
.sk-body{ margin-top:14px; padding:14px; background:#e4e7e2; border-radius:5px; font-family:var(--mono); font-size:11.5px; line-height:1.55; color:#33373b; white-space:pre-wrap; word-break:break-word; max-height:340px; overflow:auto; }
.sk-empty{ font-family:var(--mono); color:var(--faint); padding:40px 0; text-align:center; }

@media(max-width:760px){
  .d-flist li{ grid-template-columns:30px 1fr; }
  .sk-controls{ top:56px; }
}

/* ===== detail visual hero (screenshot or generated cover) ===== */
.d-visual{ margin-top:clamp(26px,4vw,40px); border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; aspect-ratio:88/38; background:var(--panel); position:relative; }
.d-visual.shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.d-visual figcaption{ position:absolute; left:12px; bottom:12px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--bg); background:color-mix(in oklab, var(--ink) 82%, transparent); padding:4px 10px; border-radius:100px; backdrop-filter:blur(4px); }
.cover-svg{ display:block; width:100%; height:100%; }
.d-visual.cover{ box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 16%, transparent); }