/* Theme layer for Aditya's site. Loaded AFTER the design-system CSS, and it only does two
   things: retune the palette away from mint/cyan toward a dusk amber-violet, and give read
   mode an editorial voice (serif display, mono labels, static hairlines) instead of the
   kicker-plus-bold-sans pattern. Structure, spacing and components stay as the system has them. */
:root {
  --font-ui: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, monospace;
  --font-prose: "Newsreader", Georgia, serif;

  --ink-1000: #0a090b; --ink-900: #0f0d10; --ink-800: #141216; --ink-700: #1b181d;
  --ink-600: #231f26; --ink-500: #2d282f; --ink-400: #3a343d; --ink-300: #4b444e;
  --fg-1: #efeaee; --fg-2: #b3a9b3; --fg-3: #847a86; --fg-4: #5d545f;

  --mint-100: #f1e8f8; --mint-300: #dcc6ee; --mint-400: #cbb0e6; --mint-500: #b795d8;
  --mint-600: #9b7fb8; --mint-700: #6a5480; --mint-900: #241c2c;
  --amber-300: #e6cdb0; --amber-400: #d9b48c; --amber-600: #9d7c58; --amber-900: #2a2015;
  --violet-300: #d9c8ea; --violet-400: #bb9fd8; --violet-600: #8467a4; --violet-900: #221a2e;
  --rose-300: #f0b6bc; --rose-400: #e0808c; --rose-600: #a8535f; --rose-900: #2d151a;
  --cyan-300: #cfc2e8; --cyan-400: #a894d4; --cyan-600: #6f5d94; --cyan-900: #1e1a2a;

  --line-hairline: #1e1a20; --line: #2a252c; --line-strong: #3a343d;
  --accent: #cbb0e6; --accent-ink: #120f14; --accent-dim: #9b7fb8;
  --accent-wash: color-mix(in oklab, #cbb0e6 12%, transparent);
  --focus-ring: #cbb0e6;
  --link: #cbb0e6; --link-hover: #e3d2f2; --link-visited: #bb9fd8;
  --status-exact: #cbb0e6; --success: #cbb0e6;
  --hud-xp: #cbb0e6; --hud-mana: #a894d4;
}

/* ---- read mode: section headers as file headings, not hero banners ---- */
.ag-sechead { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-10); }
.ag-sechead__kick { font: var(--type-label); letter-spacing: var(--ls-caps); color: var(--text-muted); gap: var(--sp-4); }
.ag-sechead__kick::after { background: var(--line); height: 1px; opacity: 1; }
.ag-sechead h2 {
  font-family: var(--font-ui); font-weight: 600; font-size: clamp(23px, 2.8vw, 32px);
  line-height: 1.18; letter-spacing: -0.022em; color: var(--text-strong); text-wrap: pretty;
}
.ag-sechead p { font-size: var(--fs-body); line-height: 1.65; color: var(--text-muted); max-width: 62ch; }
.ag-sechead { gap: var(--sp-3); margin-bottom: var(--sp-8); }

/* the research question on a project card reads as a line of prose, not a headline */
.ag-proj__q { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.32; letter-spacing: -0.006em; }
.ag-proj { background: var(--surface-panel); }
.ag-proj:hover { border-color: var(--accent-dim); }

/* citations: violet rule stays, but the title sets in the reading serif at reading size */
.ag-cite__title { font-size: var(--fs-body-l); line-height: 1.4; }

/* timeline: role in the reading serif so the record looks typeset */
.ag-tl__role { font-family: var(--font-prose); font-weight: 400; font-size: var(--fs-h5); letter-spacing: 0; }
.ag-tl__org { color: var(--accent-dim); }

/* stat blocks: warm figure, quieter caption */
.ag-stat__v { letter-spacing: -0.01em; }
.ag-stat { background: var(--ink-800); }

/* buttons: keep the physical press, lose the neon */
.ag-btn[data-variant="primary"] { background: var(--amber-400); color: var(--accent-ink); }
.ag-btn[data-variant="primary"]:hover { background: var(--amber-300); }
.ag-btn[data-variant="ghost"]:hover { background: var(--ink-700); }

/* the world's checklist should never grow a horizontal scrollbar */
.wk__questbody { overflow-x: hidden; }

/* ---- quiet chrome: lowercase labels, no uppercase-amber shouting, no gradient rules ---- */
.ag-sechead { gap: var(--sp-3); margin-bottom: var(--sp-8); }
.ag-sechead__kick { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; text-transform: lowercase; color: var(--fg-4); }
.ag-sechead__kick::after { display: none; }
.ag-sechead h2 { font-family: var(--font-ui); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.03em; }
.ag-sechead p { font-size: 15px; line-height: 1.7; color: var(--text-muted); max-width: 64ch; }
.ag-tag { background: transparent; border-color: var(--line-hairline); color: var(--fg-3); font-size: 11px; text-transform: lowercase; }
.ag-tag:hover { color: var(--text-body); }
.ag-badge { text-transform: lowercase; letter-spacing: 0.02em; }
.ag-btn { text-transform: lowercase; letter-spacing: 0.02em; }
.ag-proj__q { font-family: var(--font-ui); font-weight: 500; font-size: clamp(18px, 2vw, 21px); letter-spacing: -0.02em; }
.ag-stat__v { color: var(--text-strong); font-size: 24px; }
.ag-stat { background: transparent; border-color: var(--line-hairline); }
.ag-tl__org { color: var(--fg-3); text-transform: none; letter-spacing: 0.02em; }
.ag-cite__meta, .u-label, .u-hud { text-transform: lowercase; letter-spacing: 0.02em; }

/* ---- paper figures: light diagrams inset into the dark page ----
   Both figures colour-code meaning (blue vs orange pipelines; purple vs teal vs orange
   series), so inverting them for a dark background would wreck the coding. They are
   instead toned to --fig-paper by vendor/prep-figures.py, and the plate behind them uses
   that same value — so the figure's own background disappears into the card rather than
   sitting there as a glaring white rectangle. */
:root { --fig-paper: #ece7de; }
.ag-fig { margin: 0; display: grid; gap: 0; }
.ag-fig__plate {
  display: block; background: var(--fig-paper); padding: clamp(12px, 1.8vw, 20px);
  clip-path: var(--clip-notch-8); box-shadow: var(--shadow-2); overflow-x: auto;
}
.ag-fig__plate img { display: block; width: 100%; height: auto; }
/* wide diagrams stay legible on a phone by scrolling inside the plate, never squashing */
.ag-fig[data-wide="true"] .ag-fig__plate img { min-width: 720px; }
.ag-fig figcaption {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.65; letter-spacing: 0.02em;
  color: var(--fg-4); padding-top: 12px; max-width: 78ch;
}

/* ---- phones ----
   The page is built as two flex columns that already wrap on their own: below about 880px
   the 232px aside and the 520px-basis content column stop fitting on one line and the aside
   drops above the content. Two things were never adjusted for that.

   First, the aside is position:sticky, which is what keeps the sidebar beside you while the
   long content column scrolls. Once the columns stack, the same rule pins it to the top of
   the viewport and the entire page scrolls underneath it — and since it has no background,
   the sidebar and the prose interleave. That is the mess on a phone, and it is invisible on
   any desktop width. Sticky only ever made sense as a two-column behaviour, so it is scoped
   to two columns.

   Second, the nav's section links sit in a horizontally scrolling strip, and cv and explore
   are inside that strip after a flex spacer. On a phone they are pushed a few hundred pixels
   past the right edge, reachable only by swiping a strip that gives no hint it scrolls. The
   strip is dissolved with display:contents so those two can leave it and stay on the top
   line, and the section links wrap onto a line of their own underneath.

   The canvas writes its layout as inline style attributes rather than classes, so the
   properties being overridden here need !important to win — an ordinary rule loses to the
   element's own style attribute. Only the handful that actually collide are marked. */
@media (max-width: 880px) {
  main > aside { position: static !important; }

  nav > div {
    flex-wrap: wrap; row-gap: 12px;
    height: auto !important;
    padding-top: 12px !important; padding-bottom: 12px !important;
  }
  nav > div > div { display: contents !important; }
  nav > div > div > span { order: 1; }          /* the spacer, now pushing the actions right */
  nav > div > div > a.ag-btn { order: 2; }      /* cv, explore — always on the top line */
  nav > div::after { content: ""; flex-basis: 100%; height: 0; order: 3; }
  nav > div > div > a:not(.ag-btn) { order: 4; }
}

/* A grid item defaults to min-width:auto, which lets it refuse to shrink below its own
   min-content width. The capability lists on the project pages are grids of
   repeat(auto-fit, minmax(280px, 1fr)), so their min-content is one 280px track per item —
   three items, 868px, wider than any phone, and the page grows a horizontal scrollbar.
   auto-fit is meant to drop to a single column here; it only can once the list is allowed
   to shrink. Not scoped to a breakpoint because the overflow starts well above phone width,
   and at desktop sizes this changes nothing: the tracks still fill the space they are given. */
main ul { min-width: 0; }

/* build: an <image-slot> with no image is a canvas-only drop target — hide its whole figure block rather than ship a dashed placeholder */
:has(> image-slot:not([src])) { display: none !important; }