/* avithehero.com — one stylesheet. Colours are tokens so light and dark stay in step. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #fcfcfb;
  --surface: #ffffff;
  --text: #161616;      /* names, headings */
  --body: #45433f;      /* paragraphs, the "why" line */
  --muted: #8b8882;     /* the "outcome" line, captions, labels */
  --faint: #b9b6b0;
  --line: #ebe9e5;
  --hover: #f4f3f0;
  --avatar-bg: #efeae0;
  --col: 620px;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101010; --surface: #181818; --text: #f2f1ee; --body: #bdbab4; --muted: #807d77;
    --faint: #55534f; --line: #262625; --hover: #191919; --avatar-bg: #262420;
  }
}
:root[data-theme="dark"] {
  --bg: #101010; --surface: #181818; --text: #f2f1ee; --body: #bdbab4; --muted: #807d77;
  --faint: #55534f; --line: #262625; --hover: #191919; --avatar-bg: #262420;
}

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 32px; }
body {
  background: var(--bg); color: var(--body);
  font-family: var(--sans); font-size: 15px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--col); margin: 0 auto; padding: 96px 20px 72px; }

/* ── Avatar (the eyes follow the cursor) ── */
.avatar { width: 52px; height: 52px; display: block; border-radius: 50%; overflow: hidden; background: var(--avatar-bg); }
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar.sm { width: 30px; height: 30px; }

/* ── Home intro ── */
.intro h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); margin-top: 22px; }
.intro .role { color: var(--muted); margin-top: 3px; }
.intro p.bio { margin-top: 18px; color: var(--body); }
.intro p.bio:first-of-type { margin-top: 26px; }

.links { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.links a { color: var(--muted); display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.links a:hover { color: var(--text); }
.links a svg { width: 17px; height: 17px; flex: none; }

/* ── Project list ── */
.section { margin-top: 64px; }
.section > h2 { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.rows { list-style: none; margin: 0 -14px; }
.row { display: flex; align-items: flex-start; gap: 16px; padding: 14px; border-radius: 14px; }
.row:hover { background: var(--hover); }
.icon { flex: none; overflow: hidden; border-radius: 23%; position: relative; }
.icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(127,127,127,.22); pointer-events: none; }
.icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row .icon { width: 44px; height: 44px; margin-top: 1px; }
.row .body { min-width: 0; flex: 1; }
.row .name { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.row .name i { font-style: normal; color: var(--faint); font-weight: 400; }
.row:hover .name i { color: var(--text); }
.row .desc { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.row .desc .why { color: var(--body); display: block; margin-bottom: 1px; }

/* ── Footer ── */
footer { margin-top: 80px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
footer a:hover { color: var(--text); }

/* ── Project pages ── */
.top { display: flex; align-items: center; gap: 12px; }
.crumbs { color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.crumbs a:hover { color: var(--text); }
.crumbs i { color: var(--faint); font-style: normal; }

.phead { margin-top: 40px; display: flex; gap: 16px; align-items: center; }
.phead .icon { width: 54px; height: 54px; }
.phead h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
.phead p { color: var(--muted); margin-top: 3px; }

.cta { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); }
.btn:hover { border-color: var(--text); }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.primary:hover { opacity: .88; }

.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 30px; }
.meta dt { color: var(--muted); font-size: 13px; }
.meta dd { font-weight: 500; color: var(--text); font-size: 14.5px; }
.meta dd a { border-bottom: 1px solid var(--line); }
.meta dd a:hover { border-color: var(--text); }

.prose { margin-top: 12px; }
.prose h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin-top: 52px; margin-bottom: 10px; }
.prose h2 a.anchor { color: var(--faint); margin-left: 6px; opacity: 0; font-weight: 400; }
.prose h2:hover a.anchor { opacity: 1; }
.prose h3 { font-size: 14.5px; font-weight: 600; margin-top: 30px; color: var(--text); }
.prose h3 + p { margin-top: 6px; }
.prose p { margin-top: 12px; }
.prose strong { color: var(--text); font-weight: 500; }
.prose p a, .prose li a { color: var(--text); border-bottom: 1px solid var(--line); }
.prose p a:hover, .prose li a:hover { border-color: var(--text); }
.prose ul { margin-top: 12px; list-style: none; }
.prose ul li { padding-left: 18px; position: relative; margin-top: 7px; }
.prose ul li::before { content: ""; position: absolute; left: 3px; top: .74em; width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--hover); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--text); }

.prose ol.steps { list-style: none; counter-reset: s; margin-top: 14px; }
.prose ol.steps li { counter-increment: s; position: relative; padding-left: 36px; margin-top: 12px; }
.prose ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 500; display: grid; place-items: center; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 22px; }
.stats div { border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 12px; }
.stats b { display: block; font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
.stats span { color: var(--muted); font-size: 13px; line-height: 1.4; display: block; margin-top: 4px; }

.tablewrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th { text-align: left; font-weight: 500; color: var(--muted); font-size: 13px; }
.prose th, .prose td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.prose thead th { border-top: 0; }
.prose td:first-child { color: var(--text); }
.prose blockquote { margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--line); color: var(--text); }
.prose pre { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; font-size: 13px; line-height: 1.7; }

figure { margin: 28px -50px 0; }
figure.hero { margin-top: 34px; }
figure .frame { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); cursor: zoom-in; }
figure.bare .frame { border: 0; background: none; border-radius: 0; }
figure img { width: 100%; height: auto; }
figcaption { color: var(--muted); font-size: 13px; margin-top: 10px; text-align: center; padding: 0 50px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px -50px 0; }
.pair figure { margin: 0; }
.pair figcaption { padding: 0 8px; }
.pair.trio { grid-template-columns: repeat(3, 1fr); }
.pair.phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pair.phones figure { flex: 0 1 172px; min-width: 130px; }
.pair.phones .frame { border-radius: 18px; }
@media (max-width: 800px) {
  figure, .pair { margin-left: 0; margin-right: 0; }
  figcaption { padding: 0; }
  .pair, .pair.trio { grid-template-columns: 1fr; }
}

.note { margin-top: 24px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 14px; }

.pager { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pager a { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.pager a:hover { border-color: var(--faint); background: var(--hover); }
.pager small { color: var(--muted); display: block; font-size: 12px; }
.pager .next { text-align: right; }
.pager span { font-weight: 500; color: var(--text); }

/* Section index beside the column on wide screens */
.toc { display: none; }
@media (min-width: 1180px) {
  .toc { display: block; position: fixed; top: 140px; left: calc(50% - var(--col) / 2 - 50px - 210px); width: 170px; font-size: 13px; }
  .toc a { display: block; color: var(--faint); padding: 3px 0 3px 12px; border-left: 1px solid var(--line); }
  .toc a:hover { color: var(--text); }
  .toc a.on { color: var(--text); border-color: var(--text); }
}

/* Lightbox */
.lb { position: fixed; inset: 0; background: rgba(10,10,10,.88); display: none; align-items: center; justify-content: center; padding: 28px; z-index: 50; cursor: zoom-out; }
.lb.open { display: flex; }
.lb img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* Theme switch */
.theme { position: fixed; top: 20px; right: 20px; z-index: 20; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; border-radius: 8px; }
.theme:hover { color: var(--text); background: var(--hover); }
.theme svg { width: 17px; height: 17px; }
.theme .sun { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}

@media (max-width: 560px) {
  .wrap { padding-top: 64px; }
  .row { gap: 13px; }
  .row .icon { width: 40px; height: 40px; }
}
footer .clock { display: inline-flex; align-items: baseline; gap: 3px; }
footer .tower { position: relative; width: 20px; height: 1em; }
footer .tower img { position: absolute; left: 0; bottom: -3px; width: 20px; height: auto; }