/* Madhu Nagaraj — site styles. Tokens from the Modernist system, white ground, ink-only accent. */
:root {
  --color-bg: #ffffff;
  --color-text: #201e1d;
  --color-accent: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-accent-600: #3b3836;
  --color-accent-700: #000000;
  --color-tint: #2e6e68;       /* the one quiet color: small details only */
  --color-tint-dark: #1f4f4a;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
  --gutter: clamp(16px, 4vw, 40px);
  --cell-x: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-tint); text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-tint) 22%, transparent); }
.muted { color: var(--color-neutral-700); font-size: 14px; }
.grayscale { filter: grayscale(1) contrast(1.08); }
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--color-bg); padding: 8px 12px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; border-radius: 0; padding: 10px 14px; min-height: 44px; text-decoration: none; }
.btn-wide { min-width: 170px; justify-content: space-between; text-align: left; }
.btn-primary { background: var(--color-tint); color: #ffffff; }
.btn-primary:hover { background: var(--color-tint-dark); color: #ffffff; }
.btn-primary:active { background: var(--color-tint-dark); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--color-bg); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 18px; padding-bottom: 18px; }
.nav-brand { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin-right: auto; }
.nav-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.nav-links a { font-weight: 600; font-size: 15px; padding: 4px 0; display: inline-flex; align-items: center; gap: 4px; }
.nav-ext { color: var(--color-accent); }
.nav-ext:hover { color: var(--color-accent-700); }
.site-header::after { content: ""; display: block; max-width: calc(1240px - 2 * var(--gutter)); margin: -2px auto 0; height: 2px; background: var(--color-divider); width: calc(100% - 2 * var(--gutter)); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 2px solid var(--color-divider); }
.hero.has-pile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero-intro { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(40px, 7vw, 96px) clamp(0px, 3vw, 40px) 48px 0; }
.hero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 0.98; letter-spacing: -0.035em; max-width: 13ch; text-wrap: balance; }
.lede { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; max-width: 36ch; text-wrap: pretty; }
.lede a { color: var(--color-tint); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lede a:hover { color: var(--color-tint-dark); }
.hero-pile { display: flex; flex-direction: column; min-width: 0; border-left: 2px solid var(--color-divider); }
.pile { position: relative; height: clamp(380px, 60vw, 560px); overflow: hidden; }
.cover { --x: 0px; --y: 0px; --r: 0deg; position: absolute; left: 50%; top: 50%; width: min(56%, 300px); display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 14px; background: #ffffff; box-shadow: var(--shadow-lg); color: var(--color-text); transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); transition: transform 650ms cubic-bezier(.2, 1.3, .4, 1); }
.cover:hover { color: var(--color-text); }
.cover:hover .cover-title { color: var(--color-tint); }
.cover-img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: var(--color-neutral-200); }
.cover-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cover-title { font-weight: 800; font-size: 14px; line-height: 1.2; }
.cover-date { font-size: 12px; color: var(--color-neutral-700); white-space: nowrap; }
.pile.gather .cover { transition-duration: 220ms; transition-timing-function: ease-in; }
.pile-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 12px 20px; border-top: 2px solid var(--color-divider); }

/* sections */
.section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); border-bottom: 2px solid var(--color-divider); }
.section-head { padding: 28px 24px 28px 0; }
.section-head h2 { font-size: 32px; margin-top: 4px; }
.num { font-size: 13px; font-weight: 600; color: var(--color-tint); }
.section-body { min-width: 0; border-left: 2px solid var(--color-divider); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { border-bottom: 1px solid var(--color-divider); }
.cell { padding: 20px var(--cell-x); }

/* prompts */
.prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prompt { display: flex; flex-direction: column; gap: 14px; padding: 28px var(--cell-x); border-bottom: 1px solid var(--color-divider); }
.prompt:nth-child(2n) { border-left: 2px solid var(--color-divider); }
.prompt:nth-last-child(1), .prompt:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.prompt h3 { font-size: 28px; letter-spacing: -0.025em; }
.prompt-when { font-size: 16px; max-width: 40ch; text-wrap: pretty; }
.prompt .actions { margin-top: auto; padding-top: 8px; }
.prompt-post { align-self: flex-start; min-height: 0; padding: 0; margin-top: -6px; }
.prompt-note { font-size: 14px; font-style: italic; color: var(--color-neutral-700); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: var(--color-tint); min-height: 44px; padding: 0 4px; }
.link:hover { color: var(--color-tint-dark); }

/* repos */
.repo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 6px 24px; padding: 24px var(--cell-x); align-items: baseline; }
.repo-name { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 6px; }
.repo-name .i { color: var(--color-tint); }
.repo-desc { color: var(--color-neutral-800); }
.repo-side { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.repo-side .link { min-height: 32px; padding: 0; }

/* posts */
.post a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 16px var(--cell-x); align-items: baseline; }
.post a:hover { background: color-mix(in srgb, var(--color-tint) 7%, #fff); }
.post a:hover span { color: var(--color-tint-dark); }
.post time { font-size: 14px; font-weight: 600; color: var(--color-tint); font-variant-numeric: tabular-nums; }
.post span { font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }

/* pull quote */
.quote { background: var(--color-tint); color: #ffffff; padding: clamp(40px, 7vw, 88px) 0; }
.quote blockquote { margin: 0; max-width: 1100px; }
.quote p { font-weight: 800; font-size: clamp(34px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 28px; text-wrap: balance; }
.quote footer { font-size: 15px; max-width: 520px; padding-top: 12px; border-top: 2px solid rgba(255, 255, 255, 0.6); }
.quote a { color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.quote a:hover { color: #ffffff; text-decoration-thickness: 2px; }
.quote :focus-visible { outline-color: #ffffff; }

/* footer */
.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); padding-bottom: 48px; }
.site-footer h2 { font-size: 16px; padding: 28px 24px 12px 0; }
.site-footer p { padding: 28px var(--cell-x); font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); max-width: 66ch; text-wrap: pretty; }
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  :root { --cell-x: 0px; }
  .hero.has-pile { grid-template-columns: minmax(0, 1fr); }
  .hero-pile { border-left: 0; border-top: 2px solid var(--color-divider); }
  .pile-bar { padding-left: 0; }
  .section, .site-footer { grid-template-columns: minmax(0, 1fr); }
  .section-head { padding: 28px 0 16px; }
  .section-body { border-left: 0; border-top: 2px solid var(--color-divider); }
  .prompt-grid { grid-template-columns: minmax(0, 1fr); }
  .prompt:nth-child(2n) { border-left: 0; }
  .prompt, .prompt:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--color-divider); }
  .prompt:last-child { border-bottom: 0; }
  .repo { grid-template-columns: minmax(0, 1fr); }
  .post a { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
  .post a:hover { background: transparent; }
  .site-footer h2 { padding: 28px 0 0; }
  .site-footer p { padding: 12px 0 0; }
}

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

/* One muted color per area, all at the same strength. Each section scopes its own tint. */
#prompts  { --color-tint: #2e6e68; --color-tint-dark: #1f4f4a; } /* teal  */
#projects { --color-tint: #9a5b13; --color-tint-dark: #74430c; } /* amber */
#writing  { --color-tint: #2f5a9e; --color-tint-dark: #234478; } /* blue  */
#projects .repo:hover .repo-name { color: var(--color-tint); }
/* Subscribe band (replaces the pull quote) */
.subscribe p { margin-bottom: 24px; }
.subscribe-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 20px; border-top: 2px solid rgba(255, 255, 255, 0.6); }
.subscribe-note { font-size: clamp(16px, 1.6vw, 19px); max-width: 46ch; }
.subscribe .btn-invert { background: #ffffff; color: var(--color-tint); font-weight: 700; text-decoration: none; }
.subscribe .btn-invert:hover { background: var(--color-neutral-100); color: var(--color-tint-dark); text-decoration: none; }

/* Phones: outline buttons, so the subscribe band is the only solid block of color. */
@media (max-width: 720px) {
  .btn-primary { background: transparent; color: var(--color-tint); border-color: var(--color-tint); }
  .btn-primary:hover, .btn-primary:active { background: color-mix(in srgb, var(--color-tint) 8%, #fff); color: var(--color-tint-dark); }
}

/* Projects: screenshot, what it is, the experiment */
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project { display: flex; flex-direction: column; gap: 12px; padding: 28px var(--cell-x); border-bottom: 1px solid var(--color-divider); }
.project:nth-child(2n) { border-left: 2px solid var(--color-divider); }
.project:nth-last-child(1), .project:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.project-shot { display: block; border: 1px solid var(--color-divider); overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-neutral-100); }
.project-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
.project-shot:hover img { transform: scale(1.03); }
.project h3 { font-size: 26px; letter-spacing: -0.02em; margin-top: 6px; }
.project h3 .repo-name { display: inline-flex; align-items: center; gap: 6px; }
.project-what { font-size: 16px; max-width: 48ch; }
.project-exp { font-size: 15px; color: var(--color-neutral-700); max-width: 52ch; }
.project-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-tint); margin-bottom: 4px; }
@media (max-width: 860px) {
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .project:nth-child(2n) { border-left: 0; }
  .project, .project:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--color-divider); }
  .project:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .project-shot img { transition: none; } }