/* saimadhav.com — shared design system.
   Monochrome editorial: black, white and greys for every piece of interface.
   The only colour on the site is the fluid hero canvas (hero-fluid.js).
   Two radii only: 0 (everything) and a full pill (buttons, tags).
   No shadows anywhere. Used by index.html and writing.html. */

:root {
  /* Colour */
  --obsidian: #000000;
  --paper: #ffffff;
  --inkstone: #181818;
  --felt: #6d6d6d;
  --ash: #9a9a9a;
  --line-dark: rgba(255, 255, 255, 0.3);
  --line-light: rgba(0, 0, 0, 0.16);

  /* Type. Roobert is the reference face and is licensed; Inter is the stand-in.
     If Roobert is ever bought, add its @font-face and put it first here. */
  --font-sans: "Roobert", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Raleway", "Inter", ui-sans-serif, system-ui, sans-serif;

  --text-caption: 12px;
  --text-label: 11px;
  --text-body-sm: 16px;
  --text-body: 18px;
  --text-subheading: clamp(24px, 3.1vw, 39px);
  --text-subheading-lg: clamp(27px, 3.6vw, 45px);
  --text-heading-sm: clamp(30px, 4.4vw, 54px);
  --text-heading: clamp(38px, 6.2vw, 78px);
  --text-heading-lg: clamp(46px, 8vw, 94px);
  --text-display: clamp(60px, 15.6vw, 225px);

  /* Layout */
  --page-max: 1078px;
  --gutter: clamp(20px, 4vw, 48px);
  --band-pad: clamp(84px, 12vw, 152px);
  --section-gap: 46px;
  --element-gap: 14px;

  /* Motion: slow camera moves, never snaps. */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --glide: 1.25s;
  --glide-short: 0.8s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--paper);
  color: var(--obsidian);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--obsidian); color: var(--paper); }
.band--dark ::selection { background: var(--paper); color: var(--obsidian); }

:focus { outline: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.skip-link {
  position: fixed; left: var(--gutter); top: 0; z-index: 200;
  background: var(--obsidian); color: var(--paper);
  padding: 11px 33px; border-radius: 75px; font-size: var(--text-caption);
  transform: translateY(-140%); transition: transform var(--glide-short) var(--ease);
}
.skip-link:focus-visible { transform: translateY(14px); }

/* ───────── Layout ───────── */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: var(--band-pad) 0; position: relative; }
.band--dark { background: var(--obsidian); color: var(--paper); color-scheme: dark; }
.band--tight-top { padding-top: 0; }
/* Anchor jumps land below the fixed nav, not under it. */
section[id] { scroll-margin-top: 84px; }

.label {
  font-size: var(--text-label); line-height: 1.36; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--felt);
}
.band--dark .label { color: var(--ash); }

.rule { height: 1px; background: var(--obsidian); border: 0; }
.band--dark .rule { background: var(--line-dark); }

/* ───────── Type ───────── */
.t-display {
  font-size: var(--text-display); font-weight: 400; line-height: 0.88;
  letter-spacing: -0.04em;
}
.t-anchor {
  font-size: var(--text-heading-lg); font-weight: 400; line-height: 0.82;
  letter-spacing: -0.035em;
}
.t-whisper {
  font-size: var(--text-heading); font-weight: 300; line-height: 1.1;
  letter-spacing: -0.03em; text-wrap: balance;
}
.t-accent {
  font-family: var(--font-accent); font-size: var(--text-heading-sm);
  font-weight: 400; line-height: 1.2; letter-spacing: -0.01em;
}
.t-sub { font-size: var(--text-subheading-lg); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
.t-muted { color: var(--felt); }
.band--dark .t-muted { color: var(--ash); }

.prose p + p { margin-top: 1.1em; }
.prose { max-width: 56ch; }

/* ───────── Nav ─────────
   Clear over the hero so the colour shows through. Everywhere else it takes
   the solid colour of the band beneath it (white or black), so page content
   scrolling past never shows through the nav text. page.js sets both states. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 84px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
  color: var(--obsidian); background: var(--paper); border-bottom: 1px solid var(--line-light);
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}
.nav[data-surface="dark"] { color: var(--paper); background: var(--obsidian); border-bottom-color: rgba(255, 255, 255, 0.16); }
.nav[data-clear] { background: transparent; border-bottom-color: transparent; }
.nav-logo { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; justify-self: start; }
.nav-note { font-size: 19px; line-height: 1.15; justify-self: center; }
.nav-menu { display: flex; gap: 30px; justify-self: end; }
.nav-menu a { font-size: 14px; line-height: 1.15; opacity: 1; transition: opacity 0.4s ease; }
.nav-menu:hover a { opacity: 0.45; }
.nav-menu a:hover { opacity: 1; }
@media (max-width: 1080px) { .nav-note { display: none; } .nav { grid-template-columns: 1fr auto; } }
@media (max-width: 560px) { .nav { height: 68px; } .nav-logo { font-size: 23px; } .nav-menu { gap: 18px; } .nav-menu .nav-optional { display: none; } }

/* ───────── Pills ───────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 33px; border-radius: 75px;
  border: 1px solid var(--obsidian); background: transparent; color: var(--obsidian);
  font-size: var(--text-body-sm); line-height: 1.15; letter-spacing: 0;
  transition: letter-spacing var(--glide-short) var(--ease), border-color var(--glide-short) var(--ease), opacity 0.4s ease;
}
.pill:hover { letter-spacing: 0.04em; border-color: rgba(0, 0, 0, 0.4); }
.band--dark .pill { border-color: var(--line-dark); color: var(--paper); }
.band--dark .pill:hover { border-color: var(--paper); }
.pill[disabled] { opacity: 0.5; cursor: default; }

.tag {
  display: inline-block; padding: 5px 14px; border-radius: 75px;
  border: 1px solid var(--line-light); font-size: var(--text-caption); line-height: 1.19;
  white-space: nowrap;
}
.band--dark .tag { border-color: var(--line-dark); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ───────── Reveal motion ─────────
   Scoped to .js so the page is fully readable with scripts off. */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--glide) var(--ease), transform var(--glide) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Headline lines rise out of a mask. The padding/negative margin pair keeps
   descenders from being clipped by the tight line-heights above. */
.line { display: block; overflow: hidden; padding: 0.1em 0.05em 0.16em; margin: -0.1em -0.05em -0.16em; }
.line > span { display: block; }
.js .line > span { transform: translateY(115%); transition: transform var(--glide) var(--ease); }
.js .in .line > span, .js .line.in > span { transform: none; }
.line:nth-child(2) > span { transition-delay: 0.12s; }
.line:nth-child(3) > span { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .line > span { opacity: 1; transform: none; transition: none; }
  .pill { transition: none; }
}

/* ───────── Hero ───────── */
.hero {
  min-height: 100vh; min-height: 100svh; padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* Static stand-in for the canvas: shown before WebGL starts or if it cannot. */
  background:
    radial-gradient(60% 70% at 22% 30%, rgba(160, 224, 171, 0.5), transparent 70%),
    radial-gradient(55% 60% at 62% 58%, rgba(255, 172, 46, 0.55), transparent 72%),
    radial-gradient(70% 80% at 86% 24%, rgba(165, 45, 37, 0.9), transparent 75%),
    #0a0304;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-title { position: relative; text-align: center; padding: 0 var(--gutter); }
.hero-foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.hero-caption { font-size: var(--text-caption); line-height: 1.36; text-align: right; max-width: 34ch; }

.scroll-badge { width: 104px; height: 104px; display: block; position: relative; }
.scroll-badge svg { width: 100%; height: 100%; animation: spin 22s linear infinite; }
.scroll-badge text { font-size: 10.4px; letter-spacing: 0.14em; fill: currentColor; text-transform: uppercase; }
.scroll-badge::after {
  content: "↓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scroll-badge svg { animation: none; } }
@media (max-width: 560px) { .scroll-badge { width: 84px; height: 84px; } }

/* ───────── Manifesto / split layouts ───────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--section-gap); align-items: start; }
.split--offset { grid-template-columns: 5fr 7fr; }
.stack-gap { margin-top: var(--section-gap); }
.stack-gap-lg { margin-top: clamp(56px, 8vw, 110px); }
@media (max-width: 800px) { .split, .split--offset { grid-template-columns: 1fr; } }

/* ───────── Work list ───────── */
.work-list { border-top: 1px solid var(--obsidian); }
.work-row {
  display: grid; grid-template-columns: 56px 1fr 220px; gap: 28px;
  padding: 34px 0; border-bottom: 1px solid var(--line-light); align-items: start;
}
.work-no, .work-when { font-size: var(--text-caption); line-height: 1.19; color: var(--felt); padding-top: 12px; }
.work-row h3 { font-size: var(--text-subheading-lg); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; }
.work-row p { margin-top: var(--element-gap); max-width: 52ch; color: var(--inkstone); }
.work-flow { font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--felt) !important; }
.work-side { display: flex; flex-direction: column; gap: var(--element-gap); }
@media (max-width: 800px) {
  .work-row { grid-template-columns: 1fr; gap: 12px; }
  .work-no, .work-when { padding-top: 0; }
}

/* ───────── Capability list (dark band) ───────── */
.cap-list > li { padding: 28px 0; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: 5fr 7fr; gap: 28px; }
.cap-list > li:last-child { border-bottom: 1px solid var(--line-dark); }
.cap-list h3 { font-size: var(--text-subheading); font-weight: 400; line-height: 1.19; letter-spacing: -0.02em; }
.cap-list p { color: var(--ash); max-width: 48ch; }
@media (max-width: 800px) { .cap-list > li { grid-template-columns: 1fr; gap: 10px; } }

/* ───────── Platform ───────── */
.platform-link { display: inline-block; white-space: nowrap; font-size: clamp(26px, 3.9vw, 48px); transition: letter-spacing var(--glide) var(--ease); }
.platform-link:hover { letter-spacing: 0.02em; }
.fact-list li { padding: 12px 0; border-top: 1px solid var(--line-light); font-size: var(--text-body-sm); line-height: 1.4; }
.fact-list li:last-child { border-bottom: 1px solid var(--line-light); }

/* ───────── Writing rows (markup is produced by api-client.js) ───────── */
.writing-list { border-top: 1px solid var(--obsidian); }
.writing-row {
  display: grid; grid-template-columns: 170px 1fr auto auto; gap: 28px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--line-light);
}
.writing-row .cat, .writing-row .date, .writing-row .read-time {
  font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--felt); white-space: nowrap;
}
.writing-row .title { font-size: var(--text-subheading); line-height: 1.19; letter-spacing: -0.02em; transition: transform var(--glide-short) var(--ease); }
.writing-row .desc { display: block; margin-top: 8px; font-size: var(--text-body-sm); line-height: 1.4; letter-spacing: 0; color: var(--felt); }
a.writing-row:hover .title { transform: translateX(14px); }
.writing-empty { padding: 34px 0; display: grid; grid-template-columns: 5fr 7fr; gap: 28px; }
@media (max-width: 800px) {
  .writing-row { grid-template-columns: 1fr; gap: 8px; }
  .writing-empty { grid-template-columns: 1fr; }
}

/* ───────── Forms ───────── */
.field label { display: block; font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.field input, .field select, .field textarea, .nl-form input {
  width: 100%; font: inherit; font-size: var(--text-body); line-height: 1.3; color: inherit;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-light);
  border-radius: 0; padding: 10px 0 12px; appearance: none; -webkit-appearance: none;
  transition: border-color 0.4s ease;
}
.band--dark .field input, .band--dark .field select, .band--dark .field textarea { border-bottom-color: var(--line-dark); }
.field input:focus, .field select:focus, .field textarea:focus, .nl-form input:focus { outline: none; border-bottom-color: currentColor; }
.field textarea { min-height: 132px; resize: vertical; }
.field select {
  cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.field select option { background: var(--obsidian); color: var(--paper); }
::placeholder { color: var(--ash); opacity: 1; }
.band--dark ::placeholder { color: var(--felt); }
.field .err { min-height: 18px; margin-top: 6px; font-size: var(--text-caption); line-height: 1.19; }
.field .err:not(:empty)::before { content: "— "; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 46px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-foot { margin-top: 40px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.form-note { font-size: var(--text-caption); color: var(--ash); }
.form-status { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: var(--text-body-sm); }
.form-status a { border-bottom: 1px solid currentColor; }
@media (max-width: 800px) { .form-grid { grid-template-columns: 1fr; } }

/* Honeypot: off-screen for people, still a real field to a bot. */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.nl-form { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; margin-top: 28px; }
.nl-form input { flex: 1 1 240px; }
.nl-status { min-height: 20px; margin-top: 12px; font-size: var(--text-caption); color: var(--felt); }

/* ───────── Timeline ───────── */
.timeline { border-top: 1px solid var(--obsidian); }
.timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--line-light); }
.timeline .yr { font-size: var(--text-caption); color: var(--felt); padding-top: 5px; }
.timeline .what { font-size: var(--text-body-sm); line-height: 1.4; }
.timeline .what span { display: block; color: var(--felt); margin-top: 4px; }

/* ───────── Footer ───────── */
.footer { padding: 68px 0 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--section-gap); }
.footer-col { font-size: var(--text-label); line-height: 1.36; color: var(--felt); }
.footer-col > * { display: block; margin-top: 8px; }
.footer-col > :first-child { margin-top: 0; color: var(--inkstone); }
.footer-col a { transition: color 0.4s ease; }
.footer-col a:hover { color: var(--obsidian); }
.footer-base { margin-top: 68px; font-size: var(--text-label); color: var(--felt); }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }