/* ===== TOKENS ===== */
:root {
  --wall: #E8ECF1;
  --wall-dark: #090B10;
  --ink: #10131A;
  --paper: #F4F7FA;
  --ink-60: rgba(16,19,26,0.6);
  --line: rgba(16,19,26,0.12);
  --signal: #FF4A1C;
  --flicker: #2B6CFF;
  /* ghost: dedicated, hand-picked de-accent token — not a computed midpoint.
     Wordmark suffix only — never general muted text (use ink-60 for that). */
  --ghost: #C4CAD2;
  --ghost-dark: #45484F;
  --ghost-active: var(--ghost);

  --face-display: 'Space Grotesk', sans-serif;
  --face-body: 'Inter', sans-serif;
  --face-mono: 'JetBrains Mono', monospace;

  --gutter: 24px;
  --margin: 80px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --margin: 24px; }
}

html { scroll-behavior: smooth; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

* { box-sizing: border-box; }

/* anchor targets land clear of the sticky nav */
.section, .hero-block { scroll-margin-top: 96px; }
@media (max-width: 640px) {
  .section, .hero-block { scroll-margin-top: 64px; }
}

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--face-body);
  -webkit-font-smoothing: antialiased;
}

/* square corners system-wide, no exceptions */
* { border-radius: 0 !important; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
button { font-family: inherit; cursor: pointer; }

/* ===== TYPE SCALE TOKENS ===== */
.display {
  font-family: var(--face-display);
  font-weight: 700;
  line-height: 1.07;
  font-size: clamp(48px, calc(48px + 48 * ((100vw - 400px) / 1040)), 96px);
  margin: 0;
}
.h2 {
  font-family: var(--face-display);
  font-weight: 600;
  line-height: 1.07;
  font-size: clamp(28px, calc(28px + 12 * ((100vw - 400px) / 1040)), 40px);
  margin: 0;
  text-align: left;
}
.h3 {
  font-family: var(--face-display);
  font-weight: 600;
  line-height: 1.4;
  font-size: clamp(20px, calc(20px + 4 * ((100vw - 400px) / 1040)), 24px);
  margin: 0;
}
.body-lg {
  font-family: var(--face-body);
  font-weight: 400;
  line-height: 1.6;
  font-size: clamp(18px, calc(18px + 2 * ((100vw - 400px) / 1040)), 20px);
  margin: 0;
}
.body {
  font-family: var(--face-body);
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  margin: 0;
}
.caption {
  font-family: var(--face-mono);
  font-weight: 500;
  line-height: 1.4;
  font-size: 13px;
  margin: 0;
}
.micro {
  font-family: var(--face-mono);
  font-weight: 500;
  line-height: 1.4;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

/* ===== NAV ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 80px;
  background: var(--wall);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--margin);
}
@media (max-width: 720px) {
  .nav { height: 56px; padding: 0 var(--gutter); }
}
.nav-logo {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: 24px;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item { position: relative; }
/* left padding reserves a fixed slot for the coordinate indicator, sized to
   the rendered "[NN]" text plus one character of gap so it never overflows
   into the neighboring nav item, at any viewport width */
.nav-link {
  font-family: var(--face-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  padding-left: 35px;
  transition: color 180ms var(--ease-out);
  position: relative;
  display: inline-block;
}
/* underline lives on the label span only, sized to its own text — never the
   number's reserved slot to its left */
.nav-label {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease-out);
}
.nav-link.active .nav-label { border-bottom-color: var(--signal); }
/* number shares the label's font-size/line-height and starts at the same
   top offset as the label text, so both sit on one shared baseline instead
   of being independently vertically centered */
.nav-link::before {
  content: "[" attr(data-coord) "]";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  opacity: 0;
  color: var(--signal);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out);
}
.nav-link:hover::before { opacity: 1; }
.nav-link:hover { color: var(--signal); }

/* narrow viewports: nav-links scroll horizontally rather than wrap or overflow
   the page. Declared after the base .nav-link rule above so the font-size
   override here actually takes effect (equal specificity, source order). */
@media (max-width: 640px) {
  .nav-logo { font-size: 18px; }
  .nav-links {
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    margin-left: 16px;
    justify-content: flex-end;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { font-size: 10px; white-space: nowrap; padding-left: 32px; }
}

/* ===== WORDMARK ===== */
/* "neel.sh" in full ink weight immediately followed by "ivdasani" in ghost —
   same face/size/weight, no gap, so it reads as "neel.sh" at a glance and
   "neel.shivdasani" on closer reading. Used once on the page (nav). */
.wordmark { white-space: nowrap; }
.wordmark-ink { color: inherit; }
.wordmark-ghost { color: var(--ghost-active); }

/* ===== ABOUT (hero) ===== */
.hero-block {
  padding: 128px var(--margin) 96px;
  max-width: 1280px;
}
@media (max-width: 640px) {
  .hero-block { padding: 64px var(--margin) 48px; }
}
/* shared small-treatment header used by every top-level section: numbered label + title, one size, one weight */
.section-header {
  font-family: var(--face-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-60);
  margin: 0 0 24px;
}
.section-header-num {
  color: var(--signal);
  margin-right: 8px;
}
.intro-copy {
  max-width: 600px;
  margin-top: 24px;
  color: var(--ink-60);
}
/* signal is the sole interactive-element accent — used only on actionable links */
.signal-link { color: var(--signal); }
.signal-link:hover { opacity: 0.8; }

/* ===== SECTIONS ===== */
.section {
  padding: 96px var(--margin);
  max-width: 1280px;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  .section { padding: 64px var(--margin); }
}
/* ===== PROJECT TILES ===== */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 640px) {
  .tile-grid { grid-template-columns: 1fr; }
}
.tile {
  display: block;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform 180ms var(--ease-out);
}
.tile:hover { transform: scale(1.02); }

/* media block — real artwork when a project has one; placeholder pattern otherwise */
.tile-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--line);
  background-color: var(--wall);
  background-image: repeating-linear-gradient(
    135deg,
    var(--line),
    var(--line) 1px,
    transparent 1px,
    transparent 12px
  );
  overflow: hidden;
}
@media (max-width: 640px) {
  .tile-media { aspect-ratio: 1 / 1; }
}
.tile-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile-meta { padding: 16px 16px 0; color: var(--ink-60); }
.tile-title { padding: 8px 16px 8px; }
.tile-description { padding: 0 16px 20px; color: var(--ink-60); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}