/* ── tokens.css ── */
/* tokens · every colour, family, size and space on pracha.me comes from here.
   Paper #fefdfa. Three pigments only: ink (black, thinned to greys), indigo, maroon. Never mixed.
   Type: Fraunces for titles, Figtree to read, JetBrains Mono for labels and code; Tamil in Catamaran and Noto Serif Tamil. All OFL, self-hosted. */
@layer tokens, base, layout, components, art;

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/fraunces-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/fraunces-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/figtree-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/figtree-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/figtree-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/figtree-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/jetbrains-mono-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/catamaran-tamil-300-800.woff2) format('woff2'); unicode-range: U+0B80-0BFF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Serif Tamil'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/noto-serif-tamil-tamil-400-700.woff2) format('woff2'); unicode-range: U+0B80-0BFF, U+200C-200D, U+25CC; }

@layer tokens {
  @media (min-width: 600px) { :root { --edge: 40px; } }
  :root {
    /* colour · day (日) */
    --paper: #fefdfa; --ink: #141416; --ink-2: #3a3a40; --muted: #6b6b72; --rule: #e6e4df; --field: #f4f3ef; --dot: #9a99a1;
    --maroon: #7a1f2e; --indigo: #2a3a7c; --indigo-soft: rgba(42, 58, 124, .35); --wash: rgba(42, 58, 124, .12);
    --accent: var(--maroon); --accent-text: var(--maroon); --on-accent: var(--paper);
    /* type */
    --display: 'Fraunces', 'Noto Serif Tamil', Georgia, serif;
    --sans: 'Figtree', 'Catamaran', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --serif: 'Fraunces', 'Noto Serif Tamil', Georgia, serif;          /* poems and quotes */
    --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --tamil: 'Catamaran', 'Tamil Sangam MN', 'Latha', sans-serif;
    --tamil-serif: 'Noto Serif Tamil', 'Tamil Sangam MN', serif;
    --cjk: 'Hiragino Mincho ProN', 'Songti SC', 'Noto Serif CJK JP', 'Yu Mincho', serif;
    --t-meta: .78rem; --t-small: .9rem; --t-body: 1.125rem; --t-lede: 1.28rem;
    --t-h3: 1.2rem; --t-h2: 1.6rem; --t-h1: 2.6rem; --t-name: 3.1rem;
    --w-display: 420;                                                   /* Fraunces reads best light-to-regular at size */
    /* space and measure */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
    --main: 42rem; --wide: 42rem; --aside: 15rem; --gutter: 2.5rem; --edge: 24px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --paper: #0f1019; --ink: #f1efe9; --ink-2: #c9c7c2; --muted: #9a99a3; --rule: #2a2c38; --field: #171925; --dot: #5d5f6c;
    --maroon: #e07f8c; --indigo: #9aa8f0; --indigo-soft: rgba(154, 168, 240, .4); --wash: rgba(154, 168, 240, .14);
    --on-accent: #0f1019; color-scheme: dark; } }
  :root[data-theme="dark"] {
    --paper: #0f1019; --ink: #f1efe9; --ink-2: #c9c7c2; --muted: #9a99a3; --rule: #2a2c38; --field: #171925; --dot: #5d5f6c;
    --maroon: #e07f8c; --indigo: #9aa8f0; --indigo-soft: rgba(154, 168, 240, .4); --wash: rgba(154, 168, 240, .14);
    --on-accent: #0f1019; color-scheme: dark; }
}

/* ── base.css ── */
/* base · elements before any component */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-body)/1.62 var(--sans); font-kerning: normal; -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; text-wrap: balance; }
  h1, h2 { font-family: var(--display); font-weight: var(--w-display); letter-spacing: -.01em; }
  p { margin: 0 0 1em; text-wrap: pretty; }
  a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--indigo-soft);
      text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
  a:hover { color: var(--indigo); text-decoration-color: var(--indigo); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
  time { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .02em; color: var(--muted); }
  code { font: .85em var(--mono); background: var(--field); padding: 0 .25em; }
  svg, img { max-width: 100%; }
  .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 6px 10px; z-index: 10; }
  .skip:focus { left: 8px; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
}

/* ── layout.css ── */
/* layout · one column, one margin. Header, text, pictures, figures and footer all share the same left and right edges,
   centred on the page with equal space on both sides. Nothing hangs outside the column. */
@layer layout {
  .grid, .wide { max-width: var(--main); margin: 0 auto; padding: 0 var(--edge); box-sizing: content-box; }
  .grid > *, .wide > * { min-width: 0; }
}

/* ── components/art.css ── */
/* art · an open-access work, credited. A cover fills the column at one shape (3:2), centred on the work;
   the whole work is one click away through the credit. Inline works keep their own proportions, full width. */
@layer components {
  .art { margin: var(--s5) 0 var(--s6); }
  .art img { display: block; width: 100%; height: auto; background: var(--field); }
  .art.cover img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
  .art figcaption { margin: var(--s3) 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
  .art figcaption a { color: var(--ink-2); text-decoration-color: var(--rule); }
}

/* ── components/bento.css ── */
/* bento · ten readings on one topic, as one box of compartments (L6), then each reading in full.
   Hairline walls like a real bento; the first compartment is where to start, under an indigo wash. */
@layer components {
  .bento { display: grid; gap: 0; margin: var(--s6) 0 var(--s7); border: 1.5px solid var(--ink); grid-template-columns: 1fr 1fr;
           grid-template-areas: "a a" "a a" "b c" "d e" "f g" "h i" "j j"; }
  @media (min-width: 640px) {
    .bento { grid-template-columns: repeat(6, 1fr);
             grid-template-areas: "a a a a b b" "a a a a c c" "d d e e f f" "g g g h h h" "i i j j j j"; }
  }
  .bx { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; padding: var(--s3) var(--s3) var(--s4);
        border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); margin: 0 -1px -1px 0;
        text-decoration: none; color: var(--ink); background: var(--paper); transition: background .2s; }
  .bx:hover { background: var(--field); }
  .bx-a { grid-area: a; } .bx-b { grid-area: b; } .bx-c { grid-area: c; } .bx-d { grid-area: d; } .bx-e { grid-area: e; }
  .bx-f { grid-area: f; } .bx-g { grid-area: g; } .bx-h { grid-area: h; } .bx-i { grid-area: i; } .bx-j { grid-area: j; }
  .bx.start { background: var(--wash); padding: var(--s5); }
  .bx.start:hover { background: color-mix(in srgb, var(--indigo) 18%, var(--paper)); }
  .bn { font: var(--w-display) 1.5rem/1 var(--display); color: var(--muted); }
  .bx.start .bn { font-size: 2.4rem; color: var(--maroon); }
  .bt { font: var(--w-display) 1.02rem/1.25 var(--display); overflow-wrap: anywhere; }
  .bx.start .bt { font-size: 1.55rem; line-height: 1.2; }
  .bb { font-size: .82rem; color: var(--ink-2); }
  .bw { margin-top: var(--s2); font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
  .bk { margin-top: auto; padding-top: var(--s2); font: var(--t-meta)/1.3 var(--mono); color: var(--muted); }
  /* each reading in full */
  .reading { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--rule); scroll-margin-top: var(--s5); }
  .reading .rn { margin: 0; font: var(--w-display) 2rem/1 var(--display); color: var(--muted); }
  .reading:target .rn, .reading:first-of-type .rn { color: var(--maroon); }
  .body .reading h3 { margin: .3rem 0 0; font: var(--w-display) 1.25rem/1.3 var(--display); }   /* level with its numeral */
  .reading .rb { margin: var(--s1) 0 0; font-size: var(--t-small); color: var(--ink-2); }
  .reading .rm { margin: var(--s1) 0 0; font: var(--t-meta)/1.4 var(--mono); color: var(--muted); }
  .reading dl { margin: var(--s3) 0 0; }
  .reading dl div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s3); padding: var(--s1) 0; }
  .reading dt { font: var(--t-meta)/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .reading dd { margin: 0; }
  @media (max-width: 520px) { .reading dl div { grid-template-columns: 1fr; gap: 0; } .reading { grid-template-columns: 2.2rem minmax(0, 1fr); } }
}

/* ── components/cards.css ── */
/* the home page's plate and cards (press/home.py), inside the one column. Every card is the same shape. */
@layer components {
  .band { margin-top: var(--s8); }
  .plate .painting { margin: 0; }
  .plate-cap { margin: var(--s3) 0 0; text-align: center; font-size: var(--t-small); color: var(--muted); }
  .plate-cap a { color: var(--ink-2); text-decoration-color: var(--rule); }
  .cards { display: grid; gap: var(--s6) var(--s5); margin-top: var(--s5); grid-template-columns: 1fr; }
  @media (min-width: 560px) { .cards { grid-template-columns: 1fr 1fr; } }
  .card { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: var(--s2); text-decoration: none; color: var(--ink); }
  .card .img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--field); }
  .card .img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
  .card:hover .img img { transform: scale(1.03); }
  .card .ct { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
              margin-top: var(--s2); font: var(--w-display) 1.18rem/1.28 var(--display); text-wrap: pretty; }
  .card:hover .ct { color: var(--indigo); }
  .card .cs { font: var(--t-meta)/1.4 var(--mono); color: var(--muted); }
  /* now: two notes side by side, ruled like the sections */
  .now { display: grid; gap: 0 var(--s6); margin-top: var(--s8); }
  @media (min-width: 640px) { .now { grid-template-columns: 1fr 1fr; } }
  .card-now { padding: var(--s4) 0; border-top: 1px solid var(--ink); }
  .card-now h2 { font: var(--t-meta)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .card-now .q { display: block; margin-top: var(--s2); font: var(--w-display) 1.2rem/1.3 var(--display); color: var(--ink); text-decoration: none; }
  .card-now .q:hover { color: var(--indigo); }
  .card-now p { margin: var(--s2) 0 0; font-size: var(--t-small); color: var(--ink-2); }
  .card-now .go { display: flex; gap: var(--s4); }
  .card-now .go a { color: var(--ink-2); text-decoration-color: var(--rule); }
  .home .home-head { text-align: left; }
}

/* ── components/code.css ── */
/* code · a code block with build-time highlighting (Pygments, class prefix t-) in ink, indigo and maroon only.
   Markup from press/body.py: figure.codeblock > figcaption (language, copy) + pre > code. */
@layer components {
  .codeblock { margin: 1.6rem 0; border: 1px solid var(--rule); background: var(--field); }
  .codeblock figcaption { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--rule);
                          font: 400 .78rem/1.4 var(--mono); color: var(--muted); }
  .codeblock .copy { display: inline-flex; align-items: center; font: inherit; color: var(--indigo); background: none; border: 0; padding: 0; cursor: pointer; }
  .codeblock .copy:hover { text-decoration: underline; text-underline-offset: 3px; }
  .codeblock pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 400 .86rem/1.65 var(--mono); color: var(--ink); tab-size: 4;
                    font-variant-ligatures: none; font-feature-settings: 'calt' 0, 'liga' 0; }   /* -> stays two characters */
  .codeblock code { font: inherit; background: none; padding: 0; }
  .t-k, .t-kn, .t-kd, .t-kr, .t-ow, .t-kc, .t-kt { color: var(--indigo); font-weight: 500; }   /* keywords */
  .t-s, .t-s1, .t-s2, .t-sd, .t-sa, .t-sb, .t-se, .t-si, .t-sr, .t-ss { color: var(--maroon); }  /* strings */
  .t-c, .t-c1, .t-cm, .t-ch, .t-cs, .t-cp, .t-cpf { color: var(--muted); font-style: italic; }   /* comments */
  .t-mi, .t-mf, .t-m, .t-mh, .t-il, .t-mo, .t-mb { color: var(--maroon); }                      /* numbers */
  .t-nf, .t-fm, .t-nc { color: var(--ink); font-weight: 600; }                                  /* definitions */
  .t-nb, .t-bp { color: var(--indigo); }                                                        /* builtins */
  .t-nd { color: var(--indigo); }                                                               /* decorators */
  .t-o, .t-p { color: var(--ink-2); }
  .t-err { color: inherit; }
}

/* ── components/design-page.css ── */
/* design-page · pracha.me design system */
@layer components {
  .ds-rules { padding-left: 1.2rem; margin: var(--s3) 0 0; } .ds-rules li { margin: 0 0 var(--s2); }
  .ds-sws { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
  .ds-sw { display: grid; gap: 2px; font-size: var(--t-small); }
  .ds-sw .chip { display: block; height: 56px; border: 1px solid var(--rule); }
  .ds-sw code { background: none; padding: 0; font-weight: 500; } .ds-sw small { color: var(--muted); }
  .ds-type { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s4); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
  .ds-tl { display: grid; } .ds-tl code { background: none; padding: 0; } .ds-tl small { font: var(--t-meta) var(--mono); color: var(--muted); }
  .ds-sps { display: grid; gap: var(--s2); margin-top: var(--s4); }
  .ds-sp { display: grid; grid-template-columns: 4rem 1fr; align-items: center; } .ds-sp code { background: none; padding: 0; font-size: var(--t-meta); }
  .ds-sp span { display: block; height: 10px; background: var(--indigo); }
  .ds-grid { display: grid; grid-template-columns: 1fr; margin-top: var(--s4); font: var(--t-meta) var(--mono); color: var(--muted); }
  .ds-grid span { padding: var(--s6) var(--s3); border: 1px dashed var(--dot); } .ds-grid span + span { grid-column: 3; }
  .ds-comp { padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
  .ds-h { margin: 0 0 var(--s3); } .ds-code { font: 500 var(--t-meta) var(--mono); color: var(--accent-text); }
  .ds-job { color: var(--muted); font-size: var(--t-small); margin-left: var(--s2); }
  @media (max-width: 640px) { .ds-type { grid-template-columns: 1fr; gap: var(--s2); } }
  .ds-lede { color: var(--ink-2); margin: var(--s3) 0 0; }
  .ds-files code { background: none; padding: 0; font-size: var(--t-meta); }
  .ds-files .row { grid-template-columns: 14rem minmax(0, 1fr); }
  @media (max-width: 640px) { .ds-files .row { grid-template-columns: 1fr; } }
  .vl-item { padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
  .vl-item .ds-h code { background: none; padding: 0; color: var(--accent-text); font-size: var(--t-meta); }
  .ds-icons { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); margin: 0; color: var(--ink-2); }
  .ds-icons span { display: inline-flex; align-items: center; gap: 8px; }
  .ds-icons .i { width: 18px; height: 18px; margin: 0; }
  .ds-icons code { font-size: .74rem; color: var(--muted); }
}

/* ── components/figure.css ── */
/* figure · numbered, captioned figures, drawn in the order of making:
   pencil (construction, notes) · ink (what is true) · one indigo wash (what matters) · one maroon point (the result).
   press/figures.py inlines each SVG with the house colours as tokens, so figures follow day and night;
   press/figures.py svg_defs() puts the #pencil and #wash filters on the page once. Rules: figures/FIGURES.md. */
@layer components {
  .figure { margin: 2.25rem 0; container-type: inline-size; }
  .figure .fig { display: block; width: 100%; height: auto; margin-inline: auto; overflow: visible; color: var(--ink); }

  /* a figure drawn twice: the narrow drawing replaces the wide one when the column is narrow.
     fig-wide/fig-narrow: two files (name.svg, name.narrow.svg); wide/narrow: two <svg> in one hand-drawn file */
  .figure .fig-narrow, .figure .fig.narrow { display: none; }
  @container (max-width: 520px) {
    .figure .fig-wide:has(+ .fig-narrow), .figure .fig.wide:has(+ .fig.narrow) { display: none; }
    .figure .fig-narrow, .figure .fig.narrow { display: block; }
  }

  .figure figcaption { margin-top: .85rem; font: 400 .9rem/1.55 var(--sans); color: var(--ink-2); text-wrap: pretty; }
  .figure figcaption b { margin-right: .55rem; font: 500 .74rem/1 var(--mono); letter-spacing: .03em; color: var(--muted); }
  .figure .placeholder { display: grid; place-items: center; min-height: 12rem; padding: 1.5rem; border: 1px dashed var(--muted);
                         color: var(--muted); font: italic .9rem/1.5 var(--sans); text-align: center; }

  /* words in a figure: the page's own type, upright, never on a line (a paper halo clears whatever is under them) */
  .fig text { paint-order: stroke fill; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; font-kerning: normal; }
  .fig text.lab, .fig text.note, .fig text.acc { font-family: var(--sans); font-style: normal; }
  .fig text.mono { font-family: var(--mono); }
  .fig text.boxed, .fig .plain text { stroke: none; }          /* inside a box, or on the wash: no halo to cut a hole */

  /* the four marks. Sources that set their own paint (matplotlib, TikZ) keep it; these give hand-drawn SVG its paint */
  :where(.fig) :where(.pencil:not(g)) { fill: none; stroke: var(--muted); stroke-width: .75px; }
  :where(.fig) :where(.ink:not(g)) { fill: none; stroke: var(--ink); stroke-width: 1.2px; }
  :where(.fig) :where(.wash:not(g)) { fill: var(--indigo); stroke: none; }
  :where(.fig) :where(.accent:not(g)) { fill: var(--maroon); stroke: none; }
  :where(.fig) :where(text.lab) { fill: var(--ink-2); font-size: 13px; }
  :where(.fig) :where(text.note) { fill: var(--muted); font-size: 12px; }
  :where(.fig) :where(text.acc) { fill: var(--maroon); font-size: 13px; }

  .fig .pencil { filter: url(#pencil); }
  .fig .wash { filter: url(#wash); fill-opacity: .15; }
}

/* night: the same wash reads lighter on dark paper, so it is laid a little stronger */
@layer components {
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fig .wash { fill-opacity: .28; } }
  :root[data-theme="dark"] .fig .wash { fill-opacity: .28; }
}

/* ── components/foot.css ── */
/* foot · pracha.me design system */
@layer components {
  /* F1 reply · F2 pager · F3 related · F4 letter line : the page foot */
  .foot { margin-top: var(--s8); border-top: 1px solid var(--ink); padding-top: var(--s5); }
  .reply { margin: 0 0 var(--s6); font-size: 1.02rem; }
  .reply .addr { display: block; margin-top: var(--s1); font: var(--t-meta)/1.5 var(--mono); color: var(--muted); }
  .pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: 0 0 var(--s6); font-size: var(--t-small); }
  .pager a { display: block; text-decoration: none; color: var(--ink); }
  .pager a:hover .t { color: var(--accent-text); }
  .pager .k { display: block; font: var(--t-meta)/1.4 var(--mono); color: var(--muted); }
  .pager .next { text-align: right; }
  @media (max-width: 520px) { .pager { grid-template-columns: 1fr; } .pager .next { text-align: left; order: -1; } }
  .letter-line { margin: 0; }
  :is(section, .pager) + .letter-line { margin-top: var(--s6); }
  .letter-line label { display: block; font-size: var(--t-small); color: var(--ink-2); margin-bottom: var(--s2); }
  .letter-line .row-in { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-end; }
  .letter-line input { flex: 1 1 14rem; max-width: 20rem; min-width: 0; padding: 4px 0; border: 0; border-bottom: 1px solid var(--dot);
                       background: transparent; color: var(--ink); font: 1rem var(--sans); border-radius: 0; }
  .letter-line button { padding: 4px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); font: 1rem var(--sans); cursor: pointer; }
  .letter-line button:hover { color: var(--accent-text); border-color: var(--accent); }
  .letter-line .hush { margin: var(--s2) 0 0; font-size: .82rem; font-style: italic; color: var(--muted); }
}

/* ── components/footer.css ── */
/* footer · pracha.me design system */
@layer components {
  /* G2 · footer */
  .footer { margin-top: var(--s9); padding: var(--s5) 0 var(--s7); border-top: 1px solid var(--rule); font-size: var(--t-small); color: var(--ink-2); }
  .footer .ways { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0 0 var(--s3); }
  .footer .ways a { color: var(--ink-2); text-decoration-color: var(--dot); white-space: nowrap; }
  .footer .ways a > .i { color: var(--muted); }
  .footer .ways a:hover > .i { color: var(--indigo); }
  .footer .elsewhere { align-items: center; gap: var(--s1) var(--s3); }
  .footer .elsewhere a { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--ink-2); }
  .footer .elsewhere a:hover { color: var(--indigo); }
  .footer .elsewhere .i { width: 17px; height: 17px; margin: 0; vertical-align: 0; }
  .footer .elsewhere .k { margin-right: var(--s1); }
  .footer .elsewhere .k { font: var(--t-meta)/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .footer .name-line { font-style: italic; color: var(--muted); margin: 0; }
  .footer .name-line span { font: normal 1em var(--cjk); }
  .footer .tools { margin-top: var(--s3); font: var(--t-meta)/1.5 var(--mono); color: var(--muted); }
  .footer .tools button { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px dotted var(--dot); padding: 0; cursor: pointer; }
}

/* ── components/frame.css ── */
/* frame · pracha.me design system */
@layer components {
  /* E1 · frame: the kind's structured summary */
  .frame { margin: 0 0 var(--s6); border-top: 1px solid var(--ink); }
  .frame div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s1) var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
  .frame dt { font: var(--t-meta)/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .frame dd { margin: 0; }
  .frame dd ul { margin: 0; padding-left: 1.1rem; }
  .frame .strong dd { font-weight: 600; }
  @media (max-width: 520px) { .frame div { grid-template-columns: 1fr; } }
}

/* ── components/header.css ── */
/* header · pracha.me design system */
@layer components {
  /* G1 · header */
  .header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding-top: var(--s5); }
  .wordmark { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink);
              font: 560 1.25rem/1 var(--display); letter-spacing: -.01em; }
  .wordmark svg { width: 22px; height: 22px; } .wordmark .k-line { stroke-width: 2.8; }
  .nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0; padding: 0; list-style: none; flex: 1 1 auto; }
  .nav a { display: inline-block; padding: var(--s1) 0; font-size: .95rem; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
  .nav a:hover { color: var(--indigo); }
  .nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
  .seal { display: inline-flex; padding: 6px; margin: -6px; border: 0; background: none; cursor: pointer; transform: rotate(-2deg); margin-left: auto; }
  .seal span { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border: 1px solid var(--ink);
               font: .78rem/1 var(--cjk); }
  .seal span + span { border-left: 0; }
  .seal .sun { background: var(--sun-bg); color: var(--sun-fg); } .seal .moon { background: var(--moon-bg); color: var(--moon-fg); }
  @media (max-width: 640px) {
    .header > nav { order: 3; flex-basis: 100%; }          /* wordmark and seal on row one, the places on row two */
    .nav { gap: 0 var(--s4); }
  }
  @media (max-width: 400px) { .nav { gap: 0 12px; } .nav a { font-size: .9rem; } }
}

/* ── components/home.css ── */
/* home · pracha.me design system */
@layer components {
  /* H1 · kolam door (home only) */
  .door { margin: var(--s7) 0 0; }
  .door svg { display: block; width: 100%; height: auto; }
  .door figcaption { margin-top: var(--s2); font-size: .84rem; font-style: italic; color: var(--muted); }
  .door figcaption button { font: inherit; font-style: normal; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer;
                            text-decoration: underline; text-decoration-color: var(--dot); text-underline-offset: 4px; }
  .k-line { fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .k-dot { fill: var(--dot); }
  .home-head h1 { font: var(--w-display) var(--t-name)/1.04 var(--display); letter-spacing: -.02em; margin-top: var(--s6); }
  .home-head .tamil { margin: var(--s2) 0 0; font: .98rem var(--tamil); color: var(--ink-2); }
  .home-head .tamil .from { font-family: var(--sans); color: var(--muted); }
  .home-head .dek { font-size: var(--t-lede); line-height: 1.45; margin: var(--s5) 0 0; }
  .welcome { margin-top: var(--s6); } .welcome .come { font-style: italic; color: var(--ink-2); }
  /* H2 · now (home aside) */
  .now .card { padding: var(--s4) 0; border-top: 1px solid var(--ink); margin-bottom: var(--s5); }
  .now h2 { font: var(--t-meta)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .now .q { display: block; margin-top: var(--s2); font: 500 1.2rem/1.3 var(--display); text-decoration: none; color: var(--ink); }
  .now .q:hover { color: var(--accent-text); }
  .now .t { display: block; margin-top: var(--s2); font-weight: 600; line-height: 1.35; }
  .now p { margin: var(--s2) 0 0; font-size: var(--t-small); color: var(--ink-2); }
  .now .go { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t-small); }
  .now .go a { color: var(--ink-2); text-decoration-color: var(--dot); }
}

/* ── components/icons.css ── */
/* icons · small marks on the things you click. Markup from press/icons.py: <svg class="i i-line|i-mark"><use href="#i-name"/></svg>
   Line icons are one stroke in the text colour; marks are the services' own glyphs, filled. Both sit on the text's baseline. */
@layer components {
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .i { display: inline-block; flex: none; width: 1.05em; height: 1.05em; vertical-align: -.18em; }
  .i-line { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .i-mark { fill: currentColor; width: .92em; height: .92em; vertical-align: -.12em; }
  :is(a, button, label, .bk) > .i:first-child { margin-right: .42em; }
  a > .i.ext { width: .72em; height: .72em; margin-left: .22em; vertical-align: .02em; stroke-width: 2.2; opacity: .55; }
  a:hover > .i.ext { opacity: 1; }
  .done > .i { color: var(--maroon); }
}

/* ── components/lists.css ── */
/* lists · pracha.me design system */
@layer components {
  /* L4 · section head (home) and L2 · row group heading */
  .section { margin-top: var(--s8); }
  .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4);
                  padding-bottom: var(--s2); border-bottom: 1px solid var(--ink); }
  .section-head h2 { font: var(--w-display) var(--t-h2)/1.2 var(--display); }
  .section-head a { font-size: var(--t-small); color: var(--ink-2); text-decoration-color: var(--dot); }
  .section-head + .about { margin: var(--s3) 0 0; color: var(--ink-2); font-size: .98rem; }
  .group-h { margin: var(--s6) 0 0; font: var(--t-meta)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
             padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }
  /* L1 · row: date · title · kind and modes */
  .rows { list-style: none; margin: 0; padding: 0; }
  .row { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: var(--s1) var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
  .row > time, .row > .when { padding-top: .25rem; font: var(--t-meta)/1.4 var(--mono); color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
  .row .title { font-size: 1.05rem; line-height: 1.4; color: var(--ink); text-decoration-color: var(--rule); }
  .row .title:hover { color: var(--indigo); text-decoration-color: var(--indigo); }
  .row .sub { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--muted); }
  .row .sub > * + *::before { content: "·"; margin: 0 .45em; font-style: normal; color: var(--dot); }
  .row .note { display: block; margin-top: 2px; font-size: .95rem; color: var(--ink-2); }
  .row.away .title::after { content: " ↗"; font-size: .8em; color: var(--muted); }
  @media (max-width: 520px) { .row { grid-template-columns: 1fr; } .row > time { padding-top: 0; } }
  /* L3 · filters */
  .filters { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0 0 var(--s2); font: var(--t-meta)/1.6 var(--mono); }
  .filters a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .filters a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
  .filters.search { position: relative; }
  .filters.search > .i { position: absolute; left: 0; top: .5em; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
  .filters.search input { padding-left: 24px; }
  .filters input { font: var(--t-small)/1.4 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--dot);
                   padding: 2px 0; min-width: 14rem; }
  /* L1 variant · rows without dates (inside entries) */
  .rows-plain { margin: var(--s3) 0 var(--s5); }
  .rows-plain .row { grid-template-columns: minmax(0, 1fr); padding: var(--s2) 0; }
  .row > * { min-width: 0; }
  .row .sub, .row .note { overflow-wrap: anywhere; }   /* a long address never widens the row */
}

/* ── components/mail.css ── */
/* mail · Correspondence holds both directions: write to me (F5), receive the letters (F4) */
@layer components {
  .mail { margin: var(--s6) 0 var(--s7); }
  .mail section { padding: var(--s5) 0; border-top: 1px solid var(--ink); }
  .mail h2 { font: var(--w-display) var(--t-h2)/1.2 var(--display); margin: 0 0 var(--s3); }
  .mail ul { margin: var(--s3) 0; padding-left: 1.2rem; color: var(--ink-2); }
  .mail li { margin: 0 0 var(--s1); }
  .addr-big { margin: var(--s3) 0; font: var(--w-display) 1.5rem/1.3 var(--display); overflow-wrap: anywhere; }
  .addr-big a { text-decoration-color: var(--indigo-soft); }
  .mail .hush, .letter-line .hush { font-size: .84rem; font-style: italic; color: var(--muted); }
  .letter-line .hush a { color: var(--ink-2); }
}

/* ── components/marks.css ── */
/* marks · pracha.me design system */
@layer components {
  .seal canvas { display: block; width: 26px; height: 26px; transform: rotate(-1.5deg); }
  .seal { transform: none; }
  .qrow { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s1) var(--s4); align-items: center;
          padding: var(--s3) 0; border-bottom: 1px solid var(--rule); list-style: none; }
  .qrow .title { font-size: 1.05rem; line-height: 1.4; color: var(--ink); text-decoration-color: var(--indigo-soft); }
  .qrow .title:hover { color: var(--indigo); }
  .qrow .sub { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--muted); }
  .qrow .sub > * + *::before { content: "·"; margin: 0 .45em; color: var(--dot); }
  canvas.enso { display: block; }
  main canvas.enso:not(.qrow canvas) { margin: var(--s7) 0 var(--s4); }
  .stamp { display: flex; align-items: center; gap: var(--s3); margin: var(--s7) 0 0; font: var(--t-meta)/1.4 var(--mono); color: var(--muted); }
  .stamp-seal { width: 64px; height: 64px; transform: rotate(-3deg); }
}

/* ── components/math.css ── */
/* math · maths typeset at build time by KaTeX (press/math.py); this file sizes it to Figtree and paints the terms.
   \htmlClass{wash}{...}    an indigo watercolour wash behind the term: what matters
   \htmlClass{accent}{...}  the term in maroon: the one term
   KaTeX's own classes include .accent (for \hat), so ours are always matched with .enclosing, which only
   \htmlClass produces. The wash uses the #wash filter from press/figures.py svg_defs().
   Load KaTeX's own stylesheet into a low layer, or its unlayered rules beat every rule here:
       @import url("/assets/vendor/katex/katex.min.css") layer(base);                                        */
@layer components {
  .katex { font-size: 1.16em; text-rendering: auto; }   /* KaTeX's x-height to Figtree's */
  .math-inline { white-space: nowrap; }
  .math-display { display: block; margin: 1.4rem 0; padding: .35rem 0; overflow-x: auto; overflow-y: hidden; text-align: center;
                  scrollbar-width: thin; }
  .math-display .katex-display { margin: 0; }
  .math-display .katex-display > .katex { white-space: nowrap; }

  .katex .enclosing.accent { color: var(--maroon); }
  .katex .enclosing.wash { position: relative; z-index: 0; }
  .katex .enclosing.wash::before {
    content: ""; position: absolute; z-index: -1; inset: -.2em -.24em -.16em -.2em;
    background: color-mix(in srgb, var(--indigo) 17%, transparent);
    border-radius: .32em .18em .36em .22em / .3em .38em .26em .34em;
    filter: url(#wash);
  }

  /* the annotated equation: the formula, its number, and a short legend of pencilled notes */
  .equation { margin: 2.25rem 0; container-type: inline-size; }
  @container (max-width: 30rem) {                              /* a phone's column: the formula a size smaller, so it fits */
    .equation .eq-row .katex { font-size: .9em; }
    .equation .eq-row { column-gap: .35rem; }
    .equation .eq-notes ul { column-gap: .8rem; }
  }
  .equation .eq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; }
  .equation .eq-row .math-display { margin: 0; }
  .equation .eq-n { font: 400 .78rem/1 var(--mono); color: var(--muted); }
  .equation .eq-notes { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule); }
  .equation .eq-notes ul { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.1rem; margin: 0; padding: 0; list-style: none; }
  .equation .eq-notes li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
  .equation .eq-term { justify-self: end; padding: 0 .2em; color: var(--ink); }
  .equation .eq-term .katex { font-size: 1.05em; }
  .equation .eq-note { font: 400 .92rem/1.5 var(--sans); color: var(--ink-2); text-wrap: pretty; }
}

@layer components {
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .katex .enclosing.wash::before {
    background: color-mix(in srgb, var(--indigo) 28%, transparent); } }
  :root[data-theme="dark"] .katex .enclosing.wash::before { background: color-mix(in srgb, var(--indigo) 28%, transparent); }
}

/* ── components/notebook.css ── */
/* notebook · a Jupyter notebook published as itself (press/notebook.py): code, then its outputs, quietly */
@layer components {
  .nb-note { font: var(--t-meta)/1.6 var(--mono); color: var(--muted); }
  .nb-out { margin: -.6rem 0 var(--s5); border-left: 2px solid var(--rule); }
  .nb-out pre { margin: 0; padding: var(--s2) var(--s4); overflow-x: auto; font: .82rem/1.55 var(--mono); color: var(--ink-2); white-space: pre; }
  .nb-err { border-left-color: var(--maroon); } .nb-err pre { color: var(--maroon); }
  .nb-fig { margin: var(--s3) 0 var(--s5); } .nb-fig img, .nb-fig svg { display: block; max-width: 100%; height: auto; }
  .nb-html { margin: var(--s3) 0 var(--s5); overflow-x: auto; font-size: var(--t-small); }
  .nb-html table { border-collapse: collapse; } .nb-html th, .nb-html td { padding: 4px 10px; border-bottom: 1px solid var(--rule); text-align: right; }
  .nb-html th { font: var(--t-meta)/1.4 var(--mono); color: var(--muted); }
}

/* ── components/notes.css ── */
/* notes · pracha.me design system */
@layer components {
  /* E3 · margin note: floats into the aside column on wide screens */
  .note { font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
  .note::before { content: attr(data-n); font: var(--t-meta)/1 var(--mono); color: var(--accent-text); margin-right: var(--s2); }
  sup.ref { font: var(--t-meta)/0 var(--mono); color: var(--accent-text); margin-left: 1px; }
  .note { display: block; margin: -.4rem 0 var(--s4); padding-left: var(--s4); border-left: 1px solid var(--rule); }
  /* E4 · contents (aside) */
  .contents { font-size: var(--t-small); }
  .contents h2 { font: var(--t-meta)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
  .contents { margin: 0 0 var(--s6); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
  .contents ol { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: 0; padding: 0; list-style: none; counter-reset: c; }
  .contents li { counter-increment: c; }
  .contents li::before { content: counter(c); font: var(--t-meta)/1 var(--mono); color: var(--muted); margin-right: var(--s2); }
  .contents a { color: var(--ink-2); text-decoration-color: var(--rule); }
  .aside-block { margin-bottom: var(--s6); font-size: var(--t-small); color: var(--ink-2); }
  .aside-block h2 { font: var(--t-meta)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
}

/* ── components/page-head.css ── */
/* page-head · pracha.me design system */
@layer components {
  /* P1 · breadcrumb */
  .crumb { margin: var(--s8) 0 var(--s3); font: var(--t-meta)/1.5 var(--mono); letter-spacing: .02em; color: var(--muted); }
  .crumb a { color: var(--ink-2); text-decoration-color: var(--dot); }
  .crumb span + span::before { content: "›"; margin: 0 .5em; color: var(--dot); }
  /* P2 · page head */
  .head { margin: 0 0 var(--s6); }
  .head h1 { font: var(--w-display) var(--t-h1)/1.1 var(--display); letter-spacing: -.015em; text-wrap: pretty; }
  .head .dek { margin: var(--s3) 0 0; font-size: var(--t-lede); line-height: 1.45; color: var(--ink-2); }
  /* P3 · meta line */
  .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s4) 0 0;
          font: var(--t-meta)/1.4 var(--mono); color: var(--muted); }
  .meta > * + *::before { content: "·"; margin-right: var(--s3); color: var(--dot); }
  /* X1 kind · X2 stage · X3 modes */
  .kind { font: var(--t-meta)/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
  .stage { font: var(--t-meta)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
  .stage.settled, .stage.planned { color: var(--muted); }
  .modes { font-family: var(--sans); font-style: italic; font-size: .88rem; letter-spacing: 0; }
}

/* ── components/painting.css ── */
/* painting · a scene from the visual system (press/visuals.py): one canvas per layer, each layer one engine.
   A single canvas paints its own ground in the page's paper. Layers paint a neutral ground (white by day, black by night)
   and blend onto the paper (multiply by day, screen by night), so stacked layers never show an edge. */
@layer components {
  .painting { position: relative; width: 100%; margin: var(--s5) 0 var(--s7); background: var(--paper); isolation: isolate; }
  .painting canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .painting canvas[data-layer] { mix-blend-mode: multiply; }
  :root[data-theme="dark"] .painting canvas[data-layer] { mix-blend-mode: screen; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .painting canvas[data-layer] { mix-blend-mode: screen; } }
  .painting figcaption { position: absolute; left: 0; bottom: calc(-1 * var(--s5)); font-size: var(--t-small); color: var(--muted); }
  /* collection: a curated strip of open-access works, each credited */
  .collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s5) var(--s4); margin: var(--s5) 0; }
  .collection figure { margin: 0; }
  .collection img { display: block; width: 100%; height: 9rem; object-fit: cover; background: var(--field); }
  .collection figcaption { margin-top: var(--s2); font-size: .78rem; line-height: 1.45; color: var(--muted); }
}

/* ── components/plot.css ── */
/* plot · pracha.me design system */
@layer components {
  /* plot vocabulary, shared by every data figure */
  .p-ax { fill: none; stroke: var(--muted); stroke-width: .8; } .p-guide { stroke: var(--rule); stroke-width: .8; }
  .p-tick { font: 9.5px var(--mono); fill: var(--muted); } .p-lab, .p-val { font: 9.5px var(--mono); fill: var(--ink-2); }
  .p-lab.r, .p-val.r { fill: var(--accent); } .p-axlabel { font: 400 12px var(--sans); fill: var(--muted); }
  .p-open { fill: var(--paper); stroke: var(--dot); stroke-width: 1.4; } .p-ink { fill: var(--ink); } .p-hi { fill: var(--accent); }
  .p-chg { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; } .p-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
  .p-stem { stroke: var(--rule); stroke-width: 1.2; } .p-stem.r { stroke: var(--accent); stroke-width: 1.4; }
  .p-chance { stroke: var(--dot); stroke-width: .9; stroke-dasharray: 3 3; }
  /* labels never sit on a line: a paper-coloured halo keeps grid lines and leaders clear of every number */
  .p-tick, .p-lab, .p-val, .p-axlabel { paint-order: stroke fill; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
}

/* ── components/prose.css ── */
/* prose · pracha.me design system */
@layer components {
  /* the body of an entry */
  .body h2 { margin: var(--s7) 0 var(--s3); font: var(--w-display) var(--t-h2)/1.25 var(--display); }
  .body h3 { margin: var(--s6) 0 var(--s2); font-size: var(--t-h3); }
  .body ul, .body ol { padding-left: 1.2rem; } .body li { margin: 0 0 .35em; }
  .body blockquote { margin: var(--s5) 0; padding-left: var(--s4); border-left: 2px solid var(--accent); color: var(--ink-2); font-family: var(--serif); font-size: 1.06rem; }
  .body blockquote p:last-child { margin: 0; }
  .body .source { display: block; margin-top: var(--s2); font: var(--t-meta)/1.4 var(--mono); color: var(--muted); }
  .body hr { border: 0; height: 6px; margin: var(--s7) auto; width: 54px;
             background: radial-gradient(circle, var(--dot) 2px, transparent 2.6px) 0 0/18px 6px repeat-x; }
  /* E6 · outcome: a labelled result line in the Lab */
  .outcome { padding: var(--s2) 0 var(--s2) 0; border-bottom: 1px solid var(--rule); margin: 0; }
  .outcome .stage { margin-right: var(--s2); }
  .outcome + :not(.outcome) { margin-top: var(--s5); }
  @media (min-width: 640px) { .body > p, .body li, .welcome p, .note, .head .dek, .section-head + .about { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } }
  .body { overflow-wrap: break-word; }
  .body a, .body code { overflow-wrap: anywhere; }
  .table-wrap { margin: var(--s5) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { border-collapse: collapse; min-width: 100%; font-size: var(--t-small); line-height: 1.5; }
  .table-wrap th, .table-wrap td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
  .table-wrap th { font: var(--t-meta)/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink); }
  .body pre { overflow-x: auto; }
}

/* ── components/resume.css ── */
/* resume · the résumé page (content/pages/resume), its markup kept word for word from the old site.
   Company with its descriptor and place, stacked roles with periods, a scope line, bullets led by a competency label. */
@layer components {
  /* the page keeps its description for search and sharing; on the page itself the contact line comes first, as before */
  article:has(.body .resume) .head .dek { display: none; }
  .resume .page-description { margin: 0 0 var(--s5); font: 400 .92rem/1.7 var(--sans); color: var(--ink-2); }
  .resume .resume-tagline { margin: 0 0 var(--s5); padding: var(--s3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
                            font: 500 .875rem/1.7 var(--sans); color: var(--ink-2); }

  /* sections: the new page's rhythm, not the home page's */
  .resume .resume-section { margin: 0 0 var(--s6); }
  .resume .section-title { margin: var(--s6) 0 var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--ink);
                           font: 420 1.45rem/1.25 var(--display); color: var(--ink); }
  .resume .resume-summary { margin: 0; font: 400 1rem/1.8 var(--sans); color: var(--ink-2); }

  /* an employer: name, descriptor, place */
  .resume .resume-entry { padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--rule); }
  .resume .resume-entry:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .resume .resume-company { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin-bottom: var(--s1);
                            font-family: var(--display); color: var(--ink); }
  .resume .resume-company-name { font-size: 1.2rem; font-weight: 600; }
  .resume .resume-company-desc { font-family: var(--sans); font-style: italic; color: var(--ink-2); }
  .resume .resume-place { margin-left: auto; font: 400 .75rem/1.4 var(--mono); letter-spacing: .02em; color: var(--muted); white-space: nowrap; }

  /* a role and its period */
  .resume .resume-role-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4);
                             margin-bottom: var(--s1); }
  .resume .resume-role { flex: 1 1 auto; min-width: 0; font: 600 1.05rem/1.35 var(--sans); color: var(--ink); }
  .resume .resume-bullets + .resume-role-row { margin-top: var(--s4); }
  .resume .resume-bullets + .resume-role-row .resume-role,
  .resume .resume-scope + .resume-role-row .resume-role { font-style: italic; font-size: 1rem; }
  .resume .resume-alt { font-weight: 400; color: var(--ink-2); }
  .resume .resume-period { margin-left: auto; font: 400 .75rem/1.4 var(--mono); letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
  .resume .resume-scope { margin: var(--s1) 0 var(--s2); font: 400 1rem/1.7 var(--sans); color: var(--ink-2); }

  /* the bullets: a short pencil rule, not a glyph */
  .resume .resume-bullets { list-style: none; margin: 0; padding: 0; font: 400 1rem/1.75 var(--sans); color: var(--ink-2); }
  .resume .resume-bullets li { position: relative; margin: 0; padding: var(--s1) 0 var(--s1) var(--s4); text-align: left; hyphens: manual; -webkit-hyphens: manual; }
  .resume .resume-bullets li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: var(--s2); border-top: 1px solid var(--muted); }
  .resume .resume-label { font-style: italic; font-weight: 600; color: var(--ink); }

  /* skills */
  .resume .resume-skills-grid { display: flex; flex-direction: column; gap: var(--s3); }
  .resume .resume-skill-row { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: var(--s2) var(--s3); align-items: start;
                              font: 400 1rem/1.6 var(--sans); color: var(--ink-2); }
  .resume .resume-skill-label { padding-top: var(--s1); font: 400 .7rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

  /* education */
  .resume .resume-entry--edu .resume-role { font: 600 1.15rem/1.35 var(--display); }
  .resume .resume-org { margin-bottom: var(--s2); font: italic 400 1rem/1.5 var(--sans); color: var(--ink-2); }
  .resume .resume-range { margin: var(--s2) 0 0; font: 400 .9rem/1.7 var(--sans); color: var(--muted); }
  .resume .resume-range-label { margin-right: var(--s2); font: 400 .7rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
                                color: var(--muted); white-space: nowrap; }

  @media (max-width: 520px) {
    .resume .resume-skill-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .resume .resume-place { margin-left: 0; }
  }
}

/* ── components/rubric.css ── */
/* rubric · how a long piece keeps its rhythm, after the rubricators of manuscripts: sections are opened, not painted.
   Each section begins with a hairline and a small maroon number (matching "On this page"), then the heading in ink;
   more space before a section than after its heading; its first paragraph a touch larger. One maroon initial opens a
   piece of writing. Indigo stays for links. */
@layer components {
  .piece .body { counter-reset: sec; }
  .piece .body h2 { counter-increment: sec; margin: var(--s8) 0 var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule); }
  .piece .body h2::before { content: counter(sec, decimal-leading-zero); display: block; margin-bottom: var(--s2);
                            font: 500 var(--t-meta)/1 var(--mono); letter-spacing: .1em; color: var(--maroon); }
  .piece .body h2 + p { font-size: 1.2rem; line-height: 1.6; color: var(--ink); }
  .piece .body h3 { margin: var(--s6) 0 var(--s2); font: 600 var(--t-meta)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
  .piece .contents li::before { content: counter(c, decimal-leading-zero); color: var(--maroon); }
  /* one initial, in maroon, at the start of a piece of writing */
  .place-writing .body > p:first-of-type::first-letter,
  .place-correspondence .body > p:first-of-type::first-letter {
    float: left; margin: .06em .1em 0 0; font: var(--w-display) 3.4em/.82 var(--display); color: var(--maroon); }
}

/* ── components/series.css ── */
/* series · part n of N, the whole series listed at the top of each part */
@layer components {
  .series { margin: 0 0 var(--s6); padding: var(--s3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: var(--t-small); }
  .series .k { margin: 0 0 var(--s2); font: var(--t-meta)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .series ol { margin: 0; padding-left: 1.4rem; color: var(--muted); }
  .series li { margin: 0 0 2px; }
  .series a { color: var(--ink-2); text-decoration-color: var(--rule); }
  .series li[aria-current] a { color: var(--ink); font-weight: 600; text-decoration: none; }
}

/* ── components/share.css ── */
/* share · F6: a small Share by the date; Copy link, Email, LinkedIn, X and WhatsApp at the foot */
@layer components {
  .meta > .share-mini::before { content: none; }
  .share-mini { margin-left: auto; display: inline-flex; align-items: center; padding: 3px 10px 3px 8px; border: 1px solid var(--rule); border-radius: 2px;
                background: none; font: var(--t-meta)/1.4 var(--mono); color: var(--ink-2); cursor: pointer; }
  .share-mini > .i { margin-right: .5em; }
  .share-mini:hover { border-color: var(--indigo); color: var(--indigo); }
  .share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s5); font-size: var(--t-small); }
  .share .k { margin-right: var(--s1); }
  .share button[data-share] { display: inline-flex; align-items: center; margin-right: var(--s2); }
  .share .ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: 50%; text-decoration: none; }
  .share .ic:hover { border-color: var(--indigo); }
  .share .ic .i { width: 15px; height: 15px; margin: 0; vertical-align: 0; }
  .share .ic .i-line { width: 17px; height: 17px; }
  .share .k { font: var(--t-meta)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .share a, .share button { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
  .share button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
  .share a:hover, .share button:hover { color: var(--indigo); }
  [data-share].done { color: var(--maroon); border-color: var(--maroon); }
}

/* ── components/standin.css ── */
/* standin · pracha.me design system */
@layer components {
  /* X4 · draft and stand-in markers (prototype only) */
  .draft-mark { font: var(--t-meta)/1 var(--mono); color: var(--muted); border: 1px dashed var(--dot); padding: 1px 4px; margin-left: 4px; white-space: nowrap; vertical-align: .1em; }
  .standin { font: var(--t-meta)/1.5 var(--mono); color: var(--muted); }
}