/* ═══════════════════════════════════════════════════════════════════════════
   tarikalhadethi.com

   Two failures got us here and both are worth keeping written down.

   V1 was NOISY: ten different container treatments (pills, stat cells, glance
   cards, surface cells, project cards, spec rails, tag chips, note cards,
   capability columns, buttons), with the same facts repeated in four places.

   V2 over-corrected into a 780px single column and read as an ARTICLE — calm,
   but boring, and it wasted the whole width of the screen.

   V3, this one: WIDE and spatial, but built on exactly ONE structural idea —
   a RAIL and a CONTENT column, repeated at every level of the page. The rail
   holds labels, names and metadata; the content holds everything you read.
   Horizontal by construction, consistent by construction. Interest comes from
   SCALE CONTRAST (very large type against very small mono) rather than from
   adding more kinds of box.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: oklch(0.132 0.008 255);
  --raise: oklch(1 0 0 / 0.024);
  --line: oklch(1 0 0 / 0.10);
  --line-soft: oklch(1 0 0 / 0.055);

  --text: oklch(0.968 0.003 255);
  --muted: oklch(0.765 0.010 255);
  --dim: oklch(0.575 0.012 255);

  --acc: oklch(0.855 0.095 232);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 1400px;
  --gut: 46px;
  --rail: 210px;
  --span: 76px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  text-wrap: pretty;
}

::selection {
  background: var(--acc);
  color: oklch(0.16 0.03 232);
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ── THE grid: rail + content. Used at every level, nothing else exists. ─── */
.row {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--span);
  align-items: start;
}

/* ── type ────────────────────────────────────────────────────────────────── */
h1,
h2,
h3 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(46px, 6.6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.042em;
}

h3 {
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.034em;
}

/* the rail label: small, tracked, mono — organises without competing */
.label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
  padding-top: 9px;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-feature-settings: "zero" 1;
}

code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85em;
  color: var(--text);
  background: oklch(1 0 0 / 0.07);
  border-radius: 4px;
  padding: 0.1em 0.36em;
  white-space: nowrap;
}

strong {
  color: var(--text);
  font-weight: 600;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.top {
  padding: 34px 0;
  border-bottom: 1px solid var(--line-soft);
}

.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.name {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.022em;
}

.top-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14.5px;
  color: var(--dim);
}

.top-links a {
  transition: color 0.18s var(--ease);
}

.top-links a:hover {
  color: var(--text);
}

.top-links .now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
  flex: none;
}

/* ── hero: full width, big, then split ───────────────────────────────────── */
.hero {
  padding: clamp(64px, 8vw, 108px) 0 clamp(48px, 5vw, 72px);
}

.hero h1 {
  max-width: 19ch;
  margin-bottom: clamp(38px, 4vw, 56px);
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--span);
  align-items: start;
}

.hero-split p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 18px;
}

.hero-split p:last-child {
  margin-bottom: 0;
}

.hero-aside {
  border-left: 1px solid var(--line-soft);
  padding-left: var(--span);
}

.fact {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
  color: var(--muted);
}

.fact:first-child {
  padding-top: 0;
}

.fact b {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 5px;
}

a.fact {
  transition: color 0.18s var(--ease);
}

a.fact:hover {
  color: var(--acc);
}

/* ── the numbers band: four across, the full width ───────────────────────── */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--raise);
}

.fig {
  padding: 32px 30px 34px;
}

.fig + .fig {
  border-left: 1px solid var(--line-soft);
}

.fig b {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.fig span {
  display: block;
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--dim);
}

/* ── sections ────────────────────────────────────────────────────────────── */
section {
  padding: clamp(58px, 6vw, 92px) 0;
  border-top: 1px solid var(--line-soft);
}

section:first-of-type {
  border-top: 0;
}

/* ── entry: rail holds the name and metadata, content holds the reading ──── */
.entry + .entry {
  margin-top: clamp(44px, 4.5vw, 68px);
  padding-top: clamp(44px, 4.5vw, 68px);
  border-top: 1px solid var(--line-soft);
}

.entry-rail h3 {
  margin-bottom: 10px;
}

.entry-rail .meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--dim);
  display: block;
  line-height: 1.7;
}

.entry-body p {
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 68ch;
}

.entry-body p:last-of-type {
  margin-bottom: 0;
}

.stack {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--dim);
  margin: 20px 0 0;
  max-width: 78ch;
}

.go {
  display: inline-block;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.go:hover {
  border-bottom-color: var(--acc);
  color: var(--acc);
}

/* ── approach: four across, the full width ───────────────────────────────── */
.four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.pri {
  background: var(--ink);
  padding: 30px 28px 34px;
}

.pri .n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--acc);
  display: block;
  margin-bottom: 16px;
}

.pri h3 {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.022em;
  margin-bottom: 13px;
}

.pri p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--muted);
}

.pri p + p {
  margin-top: 11px;
}

/* ── skills: wide rows on the same rail grid ─────────────────────────────── */
.skill {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--span);
  padding: 17px 0;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}

.skill:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.skill dt {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.skill dd {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--muted);
}

/* ── contact ─────────────────────────────────────────────────────────────── */
.contact h3 {
  font-size: clamp(28px, 3vw, 42px);
  max-width: 20ch;
  margin-bottom: 22px;
}

.contact p {
  color: var(--muted);
  margin: 0;
  max-width: 60ch;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 34px;
  font-size: 15.5px;
}

.links a {
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.links a:hover {
  border-bottom-color: var(--acc);
  color: var(--acc);
}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line-soft);
  padding: 26px 0 44px;
  color: var(--dim);
  font-size: 13.5px;
}

.foot-in {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  :root {
    --gut: 34px;
    --rail: 168px;
    --span: 48px;
  }
  .four {
    grid-template-columns: repeat(2, 1fr);
  }
  .figures {
    grid-template-columns: repeat(2, 1fr);
  }
  .fig:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 860px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hero-aside {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-left: 0;
    padding-top: 20px;
  }
}

@media (max-width: 680px) {
  :root {
    --gut: 22px;
  }
  .row,
  .skill {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .four,
  .figures {
    grid-template-columns: 1fr;
  }
  .fig + .fig {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .top-in {
    flex-wrap: wrap;
    gap: 14px;
  }
  .top-links {
    gap: 20px;
  }
  h1 {
    letter-spacing: -0.03em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.001ms !important;
  }
}

/* moved out of the markup: nothing on the page sets its own spacing or colour */
.label-flush {
  padding-top: 0;
  margin-bottom: 18px;
}

.row-intro {
  margin-bottom: clamp(30px, 3vw, 38px);
}

.row-intro .intro {
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

.skills {
  margin: 0;
}