/*
 * shwetalmehta.com — shared design tokens and components.
 *
 * Loaded by the front page, /in-progress, /roadmap and every rendered case
 * study. Previously each page carried its own copy of these tokens; at four
 * page types that duplication is how a site starts looking like two sites.
 */

:root {
  --paper: #f4f3ef;
  --ink: #1c1f24;
  --ink-2: #4a4f58;
  --ink-3: #646972;
  --rule: #d9d6cd;
  --panel: #ebe9e2;
  --brass: #7d6220;
  --brass-soft: #b8952f;
  --ok: #2f7d4a;
  --warn: #9b630d;
  --queued: #686f7d;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15181d;
    --ink: #ece9e1;
    --ink-2: #b9b5aa;
    --ink-3: #8b8880;
    --rule: #2a2e35;
    --panel: #1c2026;
    --brass: #c9a24a;
    --brass-soft: #8a6f2f;
    --ok: #6cc48b;
    --warn: #e0a83c;
    --queued: #8b919c;
  }
}

:root[data-theme="dark"] {
  --paper: #15181d;
  --ink: #ece9e1;
  --ink-2: #b9b5aa;
  --ink-3: #8b8880;
  --rule: #2a2e35;
  --panel: #1c2026;
  --brass: #c9a24a;
  --brass-soft: #8a6f2f;
  --ok: #6cc48b;
  --warn: #e0a83c;
  --queued: #8b919c;
}

* { box-sizing: border-box; }
html { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  padding-inline: clamp(16px, 4vw, 40px);
  padding-block: 0 64px;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--brass-soft);
  transition: border-color .15s;
}
a:hover { border-bottom-color: var(--brass); }
a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.wrap { max-width: 74ch; margin-inline: auto; }

/* ------------------------------------------------------------------ masthead */

header.mast { padding-block: 48px 26px; border-bottom: 1px solid var(--rule); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 60px);
  line-height: 1;
  margin: 8px 0 14px;
  letter-spacing: -.01em;
}

.lede {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 0 18px;
  text-wrap: balance;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--mono);
  font-size: 13px;
}
/* A row of standalone links, not prose, so WCAG 2.5.8's inline exception does
   not apply: they measured 21px tall. Padding lifts the hit area to 24px. */
.links a {
  border-bottom-color: transparent;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.links a:hover { border-bottom-color: var(--brass); }

/* Back link on inner pages */
.backlink {
  display: inline-block;
  padding-block: 40px 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  border-bottom: 0;
}
.backlink:hover { color: var(--ink); }

/* -------------------------------------------------------------------- section */

section { padding-block: 34px; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: 0; }

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  margin: 0 0 6px;
  letter-spacing: -.005em;
}

h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 4px; }

.sub { color: var(--ink-3); margin: 0 0 22px; max-width: 62ch; }

/* --------------------------------------------------------------------- ledger */

.ledger { display: grid; gap: 0; }

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row .name { font-weight: 600; }
.row .what { color: var(--ink-2); margin-top: 2px; }
.row .meta {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 6px;
}

.status {
  grid-column: 2;
  grid-row: 1 / span 3;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 3px;
  align-self: start;
  margin-top: 3px;
}
.status.live { color: var(--ok); }
.status.build { color: var(--warn); }
.status.queued { color: var(--queued); }
.status.private { color: var(--ink-3); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Measured figures under a private system */
.figures {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.figures b { color: var(--ink-2); font-weight: 500; }

/* ---------------------------------------------------------------------- rules */

.rules { display: grid; gap: 18px; }
.rule p { margin: 0; color: var(--ink-2); max-width: 62ch; }

/* ---------------------------------------------------------------------- board */

.board {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px 16px;
  font-size: 15px;
  align-items: baseline;
}
.board .wk { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.board .st { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.board .st.live { color: var(--ok); }
.board .st.build { color: var(--warn); }
.board .st.queued { color: var(--queued); }
.board .it b { font-weight: 600; }
.board .it span { color: var(--ink-2); }

/* ------------------------------------------------------------------- nav cards */

.onward {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.onward a {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--panel);
  transition: border-color .15s;
}
.onward a:hover { border-color: var(--brass); }
.onward strong { display: block; font-size: 15px; }
.onward span { display: block; color: var(--ink-3); font-size: 13px; margin-top: 3px; }

/* --------------------------------------------------------------------- article */

article { padding-block: 20px; }
article h1 {
  font-size: clamp(34px, 5.5vw, 50px);
  line-height: 1.08;
  margin: 18px 0 18px;
  text-wrap: balance;
}
article h2 { font-size: 29px; margin: 44px 0 10px; padding-top: 18px; border-top: 1px solid var(--rule); }
article h3 { font-size: 22px; margin: 30px 0 6px; }
article p { margin: 0 0 15px; color: var(--ink-2); }
article > p:first-of-type strong { color: var(--ink); }
strong { color: var(--ink); font-weight: 600; }
article ul, article ol { color: var(--ink-2); padding-left: 22px; margin: 0 0 15px; }
article li { margin-bottom: 6px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 36px 0; }
blockquote { margin: 0 0 15px; padding-left: 16px; border-left: 2px solid var(--brass-soft); color: var(--ink-2); }

code { font-family: var(--mono); font-size: .88em; background: var(--panel); padding: 1px 5px; border-radius: 3px; }
pre {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 18px;
}
pre code { background: none; padding: 0; font-size: 13px; line-height: 1.5; }

.table-scroll { overflow-x: auto; margin: 0 0 20px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }

/* Diagrams break out of the reading column, like the gallery on the front page.
   A 74ch measure is right for prose and wrong for an architecture diagram: at
   that width the earlier version forced ~500px of horizontal scrolling to read
   one flow. Given the wider frame the diagram can then scale to fit, so it is
   legible without being dragged sideways. Genuinely oversized diagrams still
   scroll, inside their own box rather than the page. */
pre.mermaid {
  width: min(1080px, calc(100vw - 2 * clamp(16px, 4vw, 40px)));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px;
  overflow-x: auto;
  line-height: 1.3;
  margin: 0 0 22px;
}
pre.mermaid svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}

/* --------------------------------------------------------------------- footer */

footer {
  padding-top: 26px;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 520px) {
  .row { grid-template-columns: 1fr; }
  .status { grid-column: 1; grid-row: auto; justify-self: start; }
  .board { grid-template-columns: auto 1fr; }
  .board .st { grid-column: 2; }
}

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


/* ==========================================================================
   Selected work — image-led cards.

   The previous front page listed thirteen items as visual peers, each with a
   status badge and a same-length paragraph. That gives a reader no signal about
   what matters and nothing to look at. These cards carry a real screenshot and
   are deliberately larger than everything below them; the rest of the page is
   compact lists. Weight is the hierarchy.
   ========================================================================== */

/* The gallery breaks out of the 74ch reading column. Varying the measure
   between prose and images is the point: a single column width applied to
   everything is what makes a page feel machine-set. */
.work-grid {
  width: min(1080px, calc(100vw - 2 * clamp(16px, 4vw, 40px)));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  /* min() keeps the track floor from exceeding a narrow viewport, which is
     what makes a fixed minmax() floor overflow on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 30px 24px;
}

.work {
  display: flex;
  flex-direction: column;
  border-bottom: 0;
}

.work .shot {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 7px;
  overflow: hidden;
  background: var(--panel);
  line-height: 0;
  transition: border-color .15s;
  /* Two of the four screenshots are light-on-light against paper and lose their
     edge without this. An inset hairline gives them definition without a drop
     shadow, which would read as a card and fight the flat treatment elsewhere. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%);
}
.work a.shot:hover { border-color: var(--brass); }

.work .shot img {
  width: 100%;
  height: auto;
  display: block;
}

.work h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  margin: 13px 0 0;
  letter-spacing: 0;
}
.work h3 a { border-bottom-color: var(--brass-soft); }

.work p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 15px;
}

.work .tail {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.work .tail a { border-bottom-color: transparent; color: var(--ink-3); }
.work .tail a:hover { color: var(--ink); border-bottom-color: var(--brass); }

/* ==========================================================================
   Compact list — for things that need naming, not selling.
   ========================================================================== */

.compact { display: grid; gap: 0; }

.compact li {
  list-style: none;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
}
.compact li:last-child { border-bottom: 1px solid var(--rule); }
.compact .t { font-weight: 600; }
.compact .d { color: var(--ink-2); font-size: 15px; }
.compact ul { margin: 0; padding: 0; }

@media (max-width: 560px) {
  .compact li { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Production systems — a figure-led grid, not another row list.

   These are the only items on the page a reader cannot click, so they are
   deliberately given a different shape: the numbers lead, the prose follows.
   ========================================================================== */

.sys { border-top: 1px solid var(--rule); padding: 16px 0; }
.sys:last-of-type { border-bottom: 1px solid var(--rule); }

.sys h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 3px;
}

.sys .figs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  margin: 0 0 7px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.sys .figs b { color: var(--brass); font-weight: 500; }

.sys p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 64ch; }

.private-note {
  margin: 0 0 20px;
  padding: 11px 14px;
  border-left: 2px solid var(--rule);
  color: var(--ink-3);
  font-size: 14.5px;
  max-width: 62ch;
}

/* ==========================================================================
   Rules — set as pull quotes so a third list does not appear.
   ========================================================================== */

.pull { display: grid; gap: 22px; }
.pull blockquote {
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--brass-soft);
}
.pull q {
  display: block;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.28;
  quotes: none;
  margin-bottom: 5px;
}
.pull cite { font-style: normal; color: var(--ink-2); font-size: 15px; }


/* Collapsed sections in a case study: interview prep, STAR. Present for anyone
   who wants them, but not in the way of the evidence. */
details.fold {
  border-top: 1px solid var(--rule);
  margin-top: 30px;
  padding-top: 16px;
}
details.fold > summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
  list-style: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "+ "; color: var(--brass); }
details.fold[open] > summary::before { content: "‘2 "; }
details.fold > summary:hover { color: var(--ink); }
details.fold[open] > summary { margin-bottom: 14px; }


/* Three outcomes — the first thing a hiring reader should see. Set larger than
   the lists below it, because the ordering of this page is the argument. */
.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px 26px; }
.oc b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
  margin-bottom: 6px;
}
.oc span { color: var(--ink-2); font-size: 15px; }

/* The roles line, set apart from the biography above it. */
.lede.seeking {
  font-size: 16px;
  padding-top: 2px;
  border-top: 1px solid var(--rule);
  margin-top: 16px;
  padding-block-start: 14px;
}


/* ==========================================================================
   Site navigation.

   Added because the site had none: every page was a dead end reachable only
   from the front page, and a visitor had to read the whole homepage to find
   out what was on it. The bar is deliberately quiet - a mark, a name, six
   destinations - so it orients without competing with the work.
   ========================================================================== */

.sitenav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
  margin-inline: calc(-1 * clamp(16px, 4vw, 40px));
  padding-inline: clamp(16px, 4vw, 40px);
}

.navwrap {
  max-width: 74ch;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-block: 11px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-bottom: 0;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -.005em;
}
.brand img { border-radius: 5px; display: block; }
.brand:hover { border-bottom: 0; color: var(--brass); }

.navlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
}
.navlinks a { border-bottom-color: transparent; color: var(--ink-2); }
.navlinks a:hover { color: var(--ink); border-bottom-color: var(--brass); }
.navlinks a.here { color: var(--brass); }

/* The masthead sits directly under the bar, so it needs less air above. */
.sitenav + .wrap header.mast { padding-block-start: 34px; }

@media (max-width: 560px) {
  .sitenav { position: static; }
  .navwrap { padding-block: 10px; }
  .navlinks { font-size: 12px; gap: 2px 10px; }
  /* Touch targets: the links rendered 20px tall, below the 24px minimum.
     Padding grows the hit area without disturbing the type scale. */
  .navlinks a { padding: 4px 2px; display: inline-block; min-height: 24px; }
}

/* ---- /resume ---------------------------------------------------------- */
/* Two tracks, two documents each. A reader who knows which job they are
   filling should not have to guess which file to open. */
.rgrid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  margin: 30px 0 8px;
}
.rcard {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 22px 22px 18px;
  background: #fbfaf7;
}
.rcard h2 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 400;
  margin: 0 0 2px;
}
.rcard .for {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 12px;
  /* One label wraps to two lines and the other does not, which knocked the two
     cards' body copy out of alignment. Reserve the second line in both. */
  min-height: 2.5em;
}
.rcard p { margin: 0 0 16px; font-size: 15px; }
.dl { display: flex; flex-wrap: wrap; gap: 10px; }
.dl a {
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 8px 13px;
  font-size: 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.dl a:hover { border-color: var(--brass); color: var(--brass); }
.dl a span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* ---- reading measure --------------------------------------------------- */
/* Case-study prose ran the full 710px column, which at 16px is about 89
   characters per line. Comfortable measure is 45-75; past roughly 80 the eye
   loses its place on the return sweep.
   Constraining paragraphs alone left prose at one width and tables at another,
   so the whole text column narrows together and only the figures break out.
   36em, not 72ch: the ch unit is the width of "0", wider than the average
   glyph in this face, so a 72ch rule still measured 86 characters. */
article > h1,
article > h2,
article > h3,
article > h4,
article > p,
article > ul,
article > ol,
article > blockquote,
article > details,
article > hr,
article > .table-scroll {
  max-width: 36em;
}

/* Diagrams are scanned, not read, and need the room. */
article > pre.mermaid {
  max-width: none;
}