/* Suyash Mulik — portfolio. One committed dark theme: ink ground, amber wire. */

:root {
  --ink: #0B0F14;
  --surface: #111820;
  --line: #1E2A36;
  --line-2: #2A3947;
  --text: #E6EBF0;
  --muted: #8B98A8;
  --wire: #F5B14A;
  --wire-hot: #FFD98A;
  --teal: #4FD1C5;
  --display: 'Syne', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --gutter: clamp(16px, 5vw, 72px);
  --py: 0px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--wire); text-decoration: none; }
a:hover { color: var(--wire-hot); }
:focus-visible { outline: 2px solid var(--wire); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- atmosphere layers ---------- */
.bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--ink);
  background-image: radial-gradient(rgba(139, 152, 168, 0.17) 1px, transparent 1.2px);
  background-size: 28px 28px;
  background-position: 0 var(--py);
}
.bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% 0%, rgba(11, 15, 20, 0) 40%, rgba(11, 15, 20, 0.9) 100%);
}
.glow {
  position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 177, 74, 0.16) 0%, rgba(245, 177, 74, 0.05) 35%, rgba(245, 177, 74, 0) 70%);
  will-change: transform;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.glow.ready { opacity: 1; }

/* the wire: full-document SVG behind the content */
.wire {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
  opacity: 0; transition: opacity 0.5s ease;
}
.wire.ready { opacity: 1; }
.wire-base { fill: none; stroke: var(--line); stroke-width: 2; }
.wire-lit { fill: none; stroke: var(--wire); stroke-width: 2.5; stroke-linecap: round; }
.head-core { fill: var(--wire-hot); }
.packet { fill: var(--wire); }

/* ---------- top bar ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--muted);
  background: linear-gradient(rgba(11, 15, 20, 0.85), rgba(11, 15, 20, 0.6));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30, 42, 54, 0.6);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wire); box-shadow: 0 0 12px rgba(245, 177, 74, 0.7); }
.nav { display: flex; gap: 32px; }
.nav a { color: var(--muted); position: relative; padding: 4px 0; }
.nav a:hover, .nav a.active { color: var(--text); }
.nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--wire); border-radius: 2px; }
.top-meta { white-space: nowrap; }
.menu-btn {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--text); cursor: pointer;
}

/* ---------- layout ---------- */
.page { position: relative; z-index: 1; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(96px, 14vh, 168px); }
.section-head {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 0; row-gap: 14px;
  align-items: start; max-width: 860px; margin-bottom: clamp(48px, 7vh, 88px);
}
.section-head .node { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; }
.section-head .eyebrow, .section-head .h2 { grid-column: 2; }
.section-head.right { grid-template-columns: minmax(0, 1fr) 56px; max-width: none; margin-left: auto; }
.section-head.right .node { grid-column: 2; justify-self: end; }
.section-head.right .eyebrow, .section-head.right .h2 { grid-column: 1; text-align: right; }
.section-head.right .h2 { margin-left: auto; max-width: 820px; }

.eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wire); display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.eyebrow .dim { color: var(--muted); }
.display { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 7.4vw, 104px); line-height: 0.98; letter-spacing: -0.022em; }
.display-2 { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 6vw, 84px); line-height: 1; letter-spacing: -0.02em; }
.h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.9vw, 54px); line-height: 1.04; letter-spacing: -0.015em; }
.h3 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.06; letter-spacing: -0.015em; }
.h4 { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.25; margin-top: 12px; }
.lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--muted); max-width: 620px; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }

/* the nodes the wire threads through */
.node {
  position: relative; display: inline-block; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line-2); background: var(--ink);
  transition: border-color 0.4s ease, box-shadow 0.6s ease;
}
.node::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--line-2); transition: background 0.4s ease, transform 0.4s ease;
}
.node.lit { border-color: var(--wire); box-shadow: 0 0 0 4px rgba(245, 177, 74, 0.12), 0 0 28px rgba(245, 177, 74, 0.45); }
.node.lit::after { background: var(--wire); transform: scale(1.15); }
.node.lit { animation: nodePop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* project nodes sit on the article's top rule, in the gap between copy and diagram */
.node-mid { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: block; line-height: 0; }
.node-mid .node { width: 22px; height: 22px; }
.node-mid .node::after { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
@keyframes nodePop { 0% { transform: scale(0.85); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------- hero ---------- */
.hero { padding-top: clamp(140px, 22vh, 220px); padding-bottom: clamp(48px, 8vh, 96px); min-height: 82vh; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.hero-grid { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; }
.hero-grid .node { margin-top: clamp(14px, 2.4vw, 38px); }
.hero-copy { display: flex; flex-direction: column; gap: 28px; max-width: 1000px; }
.hero-copy .lede { max-width: 640px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  padding-left: 56px;
}
.scroll-hint { display: inline-flex; align-items: center; gap: 10px; }
.scroll-hint svg { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.hero-tags { text-align: right; line-height: 1.8; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font-family: var(--body); font-weight: 500; font-size: 15px; cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-fill { background: var(--wire); color: var(--ink); border: 1px solid var(--wire); }
.btn-fill:hover { background: var(--wire-hot); border-color: var(--wire-hot); color: var(--ink); }
.btn-line { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn-line:hover { border-color: var(--wire); color: var(--text); }

/* ---------- principles ---------- */
.principles { border-bottom: 1px solid var(--line); }
.principles li {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px 48px;
  padding: 26px 0; border-top: 1px solid var(--line);
  transition: border-color 0.4s ease;
}
.principles h3 { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; }
.principles p { color: var(--muted); max-width: 62ch; }

/* ---------- projects ---------- */
.project {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
  align-items: center; padding-block: clamp(40px, 6vh, 72px);
  border-top: 1px solid var(--line);
  position: relative;
}
.project:last-of-type { border-bottom: 0; }
.project.flip .project-copy { order: 2; }
.project.flip .project-fig { order: 1; }
.project-copy { display: flex; flex-direction: column; gap: 20px; }
.project-copy p:not(.eyebrow) { color: var(--muted); max-width: 60ch; }
.project-fig { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text); padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; }
.link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; width: max-content; }
.link svg { transition: transform 0.2s ease; }
.link:hover svg { transform: translate(2px, -2px); }

.more { margin-top: clamp(48px, 7vh, 96px); display: flex; flex-direction: column; gap: 20px; }
.more-list { border-bottom: 1px solid var(--line); }
.more-list li { border-top: 1px solid var(--line); }
.more-list a { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 8px 48px; padding: 20px 0; color: var(--text); }
.more-list a:hover .more-name { color: var(--wire-hot); }
.more-name { font-family: var(--mono); font-size: 14px; color: var(--wire); transition: color 0.2s ease; }
.more-desc { color: var(--muted); font-size: 16px; max-width: 64ch; }

/* ---------- diagrams (shared SVG vocabulary) ---------- */
.diagram { width: 100%; height: auto; display: block; }
.d-panel { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.d-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.5px; fill: var(--muted); }
.d-label.hot { fill: var(--wire); }
.d-label.teal { fill: var(--teal); }
.d-title { font-family: var(--display); font-weight: 700; font-size: 13px; fill: var(--text); }
.d-sub { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.d-sub .hot { fill: var(--wire); }
.d-sub .teal { fill: var(--teal); }
.d-box rect { fill: var(--ink); stroke: var(--wire); stroke-width: 1.4; }
.d-box.strong rect { stroke: var(--wire-hot); stroke-width: 2; }
.d-edge { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.d-edge-hot { fill: none; stroke: var(--wire); stroke-width: 2; stroke-dasharray: 6 6; animation: march 1.2s linear infinite; }
.d-edge-teal { fill: none; stroke: var(--teal); stroke-width: 1.5; }
@keyframes march { to { stroke-dashoffset: -12; } }
.d-dashed { fill: none; stroke: var(--line-2); stroke-dasharray: 4 4; }
.d-boundary { fill: rgba(245, 177, 74, 0.04); stroke: var(--wire); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: 0.85; }
.d-packet { fill: var(--wire-hot); filter: drop-shadow(0 0 6px rgba(255, 217, 138, 0.9)); }
.d-packet.teal { fill: var(--teal); filter: drop-shadow(0 0 6px rgba(79, 209, 197, 0.9)); }
.d-tools rect { fill: var(--ink); stroke: var(--line-2); }
.d-tools text { font-family: var(--mono); font-size: 11px; fill: var(--text); }
.d-tools rect.lit { stroke: var(--wire); fill: rgba(245, 177, 74, 0.12); }
.d-tools text.lit { fill: var(--wire); }
.d-graph line { stroke: var(--wire); stroke-width: 1.2; opacity: 0.6; }
.d-graph circle { fill: var(--ink); stroke: var(--wire); stroke-width: 1.5; }
.d-graph .d-ring { fill: none; stroke: var(--wire); stroke-width: 1; }
.d-cells rect { fill: var(--line); }
.d-cells rect.on { fill: var(--teal); animation: blink 2.4s ease-in-out infinite; }
.d-cells rect.on:nth-of-type(odd) { animation-delay: 0.6s; }
.d-cells rect.on:nth-of-type(3n) { animation-delay: 1.2s; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.d-card { fill: var(--ink); stroke: var(--line-2); }
.d-textline { stroke: var(--line-2); stroke-width: 6; stroke-linecap: round; }
.d-chip { fill: rgba(79, 209, 197, 0.14); stroke: var(--teal); stroke-width: 1; }
.d-chiptext { font-family: var(--mono); font-size: 10px; fill: var(--teal); }
.d-chip-bad rect { fill: none; stroke: var(--wire); stroke-width: 1; }
.d-chip-bad text { font-family: var(--mono); font-size: 10px; fill: var(--wire); }
.d-chip-bad line { stroke: var(--wire); stroke-width: 1.5; }

/* ---------- now ---------- */
.now-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.now-copy { display: flex; flex-direction: column; gap: 22px; }
.now-copy > p { color: var(--muted); max-width: 62ch; }
.now-list { margin: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.now-list div { padding: 18px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.now-list dt { font-family: var(--display); font-weight: 700; font-size: 19px; }
.now-list dd { margin: 0; color: var(--muted); max-width: 62ch; }
.rules { display: flex; flex-direction: column; gap: 10px; }
.rules li { color: var(--muted); padding-left: 22px; position: relative; max-width: 62ch; }
.rules li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--wire); }
.rules strong { color: var(--text); font-weight: 500; }
.now-fig { margin: 0; position: sticky; top: 104px; }

/* ---------- stack ---------- */
.stack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.stack-group { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.stack-group h3, .certs h3, .timeline h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.path-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; margin-top: clamp(48px, 7vh, 88px); }
.certs, .timeline { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.cert-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cert-list li:last-child { border-bottom: 0; }
.time-list li { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.time-list li:last-child { border-bottom: 0; }
.time-list .mono { color: var(--wire); }

/* ---------- contact ---------- */
.contact { padding-bottom: clamp(48px, 8vh, 96px); }
.contact-inner { display: flex; flex-direction: column; gap: 28px; max-width: 900px; padding-left: 56px; }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-left: -56px; }
.contact-row .node { margin-right: 14px; }
.social { display: flex; flex-wrap: wrap; gap: 12px 32px; font-family: var(--mono); font-size: 13px; }
.social a { color: var(--muted); }
.social a:hover { color: var(--wire-hot); }

.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}

/* ---------- reveal + toast ---------- */
html.js [data-reveal] { opacity: 0.001; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.js [data-reveal].in { opacity: 1; transform: none; }
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 13px; color: var(--text);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .project, .project.flip { grid-template-columns: minmax(0, 1fr); }
  .project.flip .project-copy { order: 1; }
  .project.flip .project-fig { order: 2; }
  .now-grid { grid-template-columns: minmax(0, 1fr); }
  .now-fig { position: static; }
  .path-grid { grid-template-columns: minmax(0, 1fr); }
  .section-head.right { grid-template-columns: 56px minmax(0, 1fr); margin-left: 0; max-width: 860px; }
  .section-head.right .node { grid-column: 1; justify-self: start; }
  .section-head.right .eyebrow, .section-head.right .h2 { grid-column: 2; text-align: left; margin-left: 0; }
  .node-mid { left: 14px; }
  /* keep content out of the wire lane once columns stack */
  .project, .more, .now-grid, .stack-grid, .path-grid { padding-left: 56px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav { display: none; }
  .top-meta { display: none; }
  .menu-btn { display: inline-flex; }
  .top.open .nav {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; left: 0; right: 0; top: 0; padding: calc(84px + env(safe-area-inset-top, 0px)) var(--gutter) 32px;
    background: rgba(11, 15, 20, 0.97); border-bottom: 1px solid var(--line); z-index: -1;
  }
  .top.open .nav a { font-size: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
  .top.open .nav a.active::after { display: none; }
  .hero { padding-top: 128px; min-height: 0; gap: 40px; }
  .hero-grid, .section-head, .section-head.right { grid-template-columns: 40px minmax(0, 1fr); }
  .node { width: 24px; height: 24px; }
  .node::after { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
  .node-mid { left: 12px; }
  .project, .more, .now-grid, .stack-grid, .path-grid { padding-left: 40px; }
  .hero-foot { padding-left: 40px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero-tags { text-align: left; }
  .principles li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .more-list a { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .stack-grid { grid-template-columns: minmax(0, 1fr); }
  .time-list li { grid-template-columns: minmax(0, 1fr); }
  .contact-inner { padding-left: 40px; }
  .contact-row { margin-left: -40px; }
  .contact-row .node { margin-right: 4px; }
  .contact-row .btn { height: 46px; padding: 0 18px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint svg, .node.lit, .d-edge-hot, .d-cells rect.on { animation: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .link svg { transition: none; }
}