/* ============================================================
   Nish Budhraja — personal site
   Understated, typographic, no dependencies.
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */

:root {
  --bg:        #fdfbf4;
  --text:      #1e1c18;
  --muted:     #6e6a5e;
  --rule:      #e2ddd0;
  --link:      #3a5a78;
  --link-hover:#22394d;

  /* Paper. --grain is the opacity of a fine noise tile; --mottle is a set of
     very soft blooms that keep the sheet from reading as a flat fill. Both are
     redefined per theme below. */
  --grain: 0.36;
  --grain-blend: multiply;   /* darkens the sheet; keeps the warm hue */
  --mottle:
    radial-gradient(ellipse 80% 60% at 18% 12%, rgba(150, 130,  92, 0.07), transparent 62%),
    radial-gradient(ellipse 70% 55% at 88% 42%, rgba(140, 122,  88, 0.055), transparent 66%),
    radial-gradient(ellipse 95% 70% at 42% 92%, rgba(146, 126,  90, 0.06), transparent 60%);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --measure: 40rem;   /* content column */
  --gap:     2.75rem; /* space between sections */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #1a1917;
    --text:      #e8e4da;
    --muted:     #979285;
    --rule:      #34322c;
    --link:      #9ab8d2;
    --link-hover:#c2d6e8;

    /* Light-on-dark noise reads stronger, so the grain comes down and the
       blooms warm rather than darken. */
    --grain: 0.14;
    --grain-blend: screen;   /* fiber catching light, rather than mud */
    --mottle:
      radial-gradient(ellipse 80% 60% at 18% 12%, rgba(214, 194, 150, 0.045), transparent 62%),
      radial-gradient(ellipse 70% 55% at 88% 42%, rgba(200, 182, 142, 0.035), transparent 66%),
      radial-gradient(ellipse 95% 70% at 42% 92%, rgba(208, 188, 146, 0.04), transparent 60%);
  }
}

/* ---- Base ------------------------------------------------- */

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

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

body {
  margin: 0;
  padding: 0 1.5rem;
  background-color: var(--bg);
  background-image: var(--mottle);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fine paper tooth. An inline SVG turbulence tile, so there is nothing to
   download and no external request. Fixed to the viewport and behind the
   content, so the page reads as ink sitting on a sheet rather than as text
   over a pattern that scrolls with it. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 5.5rem 0 0;
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent);
  transition: color 120ms ease, border-color 120ms ease;
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
  border-bottom-color: color-mix(in srgb, var(--link-hover) 70%, transparent);
}

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

/* ---- Intro ------------------------------------------------ */

.intro {
  margin-bottom: calc(var(--gap) + 1rem);
}

h1 {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.35rem;
}

.tagline {
  color: var(--muted);
  font-size: 1.0625rem;
  margin-bottom: 2rem;
}

/* Back link on subpages. Sits above the h1 as a quiet eyebrow, so it
   reads as orientation rather than as the first thing on the page. */

.backlink {
  font-size: 0.875rem;
  color: var(--muted);
  border-bottom: none;
}

.backlink:hover,
.backlink:focus-visible {
  color: var(--text);
  border-bottom: none;
}

/* ---- Sections --------------------------------------------- */

section {
  margin-bottom: var(--gap);
}

h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

/* ---- Roles ------------------------------------------------ */

.role {
  margin-bottom: 2.1rem;
}

.role:last-child {
  margin-bottom: 0;
}

.role h3 {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 0.2rem;
}

.role h3 .at {
  color: var(--muted);
  padding: 0 0.15em;
}

.role .company {
  font-style: italic;
}

.meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 0.7rem;
  font-variant-numeric: tabular-nums;
}

.meta .sep {
  padding: 0 0.35em;
  opacity: 0.6;
}

/* Selected-work entries reuse .role markup, but run several paragraphs
   long — so they need more air between them and a slightly larger
   title to keep the grouping legible. Styled by ancestor, not by an
   extra class, so a copied .role block just works. */

.projects .role {
  margin-bottom: 3.25rem;
}

.projects .role h3 {
  font-size: 1.3125rem;
}

/* A quiet row of hard numbers under an entry. The figure takes the serif and
   the body colour so it carries; the label stays muted, so the line reads as
   evidence rather than as a dashboard. Entries with no publishable figure
   simply omit it. */

.stats {
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.stats b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stats .dot {
  padding: 0 0.55em;
  opacity: 0.45;
}

/* ---- Facts list (education & other) ------------------------ */

.facts {
  margin: 0;
}

.facts dt {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.35;
  margin-bottom: 0.15rem;
}

.facts dd {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.facts dd:last-child {
  margin-bottom: 0;
}

/* ---- Links list ------------------------------------------- */

.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

/* ---- Footer ----------------------------------------------- */

footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem 0 4rem;
  border-top: 1px solid var(--rule);
  margin-top: 1.5rem;
}

footer p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---- Small screens ---------------------------------------- */

@media (max-width: 34rem) {
  body {
    padding: 0 1.25rem;
    font-size: 1rem;
  }

  main {
    padding-top: 3.5rem;
  }

  h1 {
    font-size: 1.875rem;
  }

  :root {
    --gap: 2.25rem;
  }
}

/* ---- Print ------------------------------------------------ */

@media print {
  :root {
    --bg: #fff;
    --text: #000;
    --muted: #444;
    --rule: #ccc;
    --link: #000;
    --mottle: none;
  }

  body::before { display: none; }   /* no grain on paper that is already paper */
  body { font-size: 11pt; }
  main { padding-top: 0; max-width: none; }
  a { border-bottom: none; }
  .role { break-inside: avoid; }
}