/* The one stylesheet of andreaswneitzel.github.io.
   Layers: tokens (surfaces, type, meaning colours), base, layout (header, sections, footer), components,
   pages (home, research, about, talks, figures), utilities. Light and dark are tuned separately: eggshell
   paper and warm graphite felt, each with a baked grain tile (assets/img/heroes/grain-*.webp). Three colours
   carry meaning: graphite linework, blue for my own parts and real data, one warm accent (brass) for flow. */

@layer reset, tokens, base, layout, components, pages, utilities;

/* ---------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg, video, canvas { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}

/* ---------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    color-scheme: light dark;
    --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --serif: "Geist Serif", "Source Serif 4", Georgia, serif;

    /* surfaces, from the surface study of 2026-11-01 (L2 eggshell paper, D4 warm graphite felt) */
    --raised: light-dark(#fbfaf6, #221f1d);
    --base: light-dark(#f6f3ef, #131210);
    --alt: light-dark(#f0ede7, #1a1816);
    --deep: light-dark(#e9e5df, #0c0b0a);
    --g-base: light-dark(url("/assets/img/heroes/grain-l-base.webp"), url("/assets/img/heroes/grain-d-base.webp"));
    --bg: var(--base); --bg-raised: var(--raised); --surface: var(--raised); --surface-2: var(--alt);
    --line: light-dark(#d5d2cd, #32302d);
    --line-strong: light-dark(#bbb7b1, #4a4744);
    --ink: light-dark(#1c1a18, #e8e6e2);
    --ink-2: light-dark(#4a4743, #b4b0ab);
    --muted: light-dark(#66635e, #95928d);

    /* meaning colours: blue marks my own parts and real data; brass marks flow */
    --mark: light-dark(#1b5fd6, #7cb8ff);
    --flow: light-dark(#8a6a1f, #d8b768);
    --flow-text: light-dark(#6e5416, #d8b768);
    --fig: light-dark(#3f3d3a, #cdc9c3);
    --accent: var(--mark); --accent-2: var(--flow);
    --accent-soft: color-mix(in oklab, var(--mark) 13%, transparent);
    --grid: light-dark(rgb(40 38 34 / 0.065), rgb(205 201 195 / 0.05));
    --glow: light-dark(rgb(138 106 31 / 0.10), rgb(216 183 104 / 0.10));
    --shadow: none;
    --shadow-lg: light-dark(0 14px 34px -20px rgb(28 26 24 / 0.28), 0 18px 44px -22px rgb(0 0 0 / 0.75));

    /* maps: marine sea, stone land, ochre for the countries I worked in */
    --sea: light-dark(#27415f, #0f2036);
    --land: light-dark(#e8e3d5, #4a4439);
    --land-edge: light-dark(#c4bba5, #5e574b);
    --visit: light-dark(#b07a35, #d9a35a);
    --visit-fill: light-dark(#d6b78a, #7a6440);

    /* petroff10 categorical palette (Petroff 2021, arXiv:2107.02270) for charts */
    --cat-0: #3f90da; --cat-1: #ffa90e; --cat-2: light-dark(#bd1f01, #c4280d); --cat-3: #94a4a2;
    --cat-4: light-dark(#832db6, #923fc7); --cat-5: #a96b59; --cat-6: #e76300; --cat-7: #b9ac70;
    --cat-8: #717581; --cat-9: #92dadd; --context: light-dark(#b9c1cc, #3a4558);

    /* entry-type marks */
    --t-paper: light-dark(#2f6fb8, #7cb8ff);
    --t-talk: light-dark(#1f7f84, #6fd6d9);
    --t-poster: light-dark(#1f7f84, #6fd6d9);
    --t-grant: light-dark(#8a6a1f, #d8b768);
    --t-hpc: light-dark(#6d3fa6, #bb8cf0);
    --t-observing: light-dark(#b1421f, #ff8462);
    --t-software: light-dark(#2f7f52, #6fd59b);
    --t-award: light-dark(#8f6f0a, #f0cf62);
    --t-position: light-dark(#4b5fae, #9fb0ff);
    --t-service: light-dark(#8e5a48, #e3a690);
    --t-data: light-dark(#5f6b7d, #a9b4c4);

    --radius: 8px; --radius-sm: 6px; --u: 8px; --gap: 16px;
    --page-max: 1360px; --gutter: clamp(18px, 3.6vw, 56px);
    --ease: cubic-bezier(.16, 1, .3, 1);
    --head-h: 68px;
  }
  @media (min-width: 1600px) { :root { --page-max: 1500px; } }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

/* ---------------------------------------------------------------- base */
@layer base {
  html { scroll-padding-top: 84px; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    font: 400 1.0625rem/1.6 var(--sans); color: var(--ink);
    background: var(--base) var(--g-base) 0 0 / 128px;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    min-block-size: 100vh; display: flex; flex-direction: column;
  }
  @media (prefers-contrast: more), (forced-colors: active) { body, .tone-alt, .tone-deep { background-image: none; } }
  main { flex: 1; }
  ::selection { background: color-mix(in oklab, var(--flow) 34%, transparent); }
  a { color: var(--mark); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a:hover { text-decoration: underline; }
  :focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; border-radius: 6px; }
  h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; text-wrap: balance; }
  :is(h1, h2, h3) i { padding-inline-end: .06em; }
  h1 { font: 300 clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem)/1 var(--serif); letter-spacing: -0.022em; }
  h2 { font: 300 clamp(1.7rem, 1.3rem + 1.2vw, 2.6rem)/1.08 var(--serif); letter-spacing: -0.015em; }
  h3 { font: 500 1.08rem/1.3 var(--sans); letter-spacing: -0.012em; }
  h4 { font: 500 0.95rem var(--sans); }
  p { text-wrap: pretty; }
  strong, b { font-weight: 560; color: var(--ink); }
  i, em { font-style: italic; }
  code, kbd, samp, .mono { font-family: var(--mono); font-size: 0.92em; }
  hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
  table { border-collapse: collapse; }
  abbr[title] { text-decoration: none; border-bottom: 1px dotted var(--muted); }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  .wrap { inline-size: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
  .skip { position: absolute; inset-inline-start: 16px; inset-block-start: -80px; z-index: 100; padding: 10px 14px;
    background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .skip:focus { inset-block-start: 12px; }

  /* section tones: the page steps between tones of one paper or felt, each with its grain tile */
  .tone-alt { background: var(--alt) light-dark(url("/assets/img/heroes/grain-l-alt.webp"), url("/assets/img/heroes/grain-d-alt.webp")) 0 0 / 128px; }
  .tone-deep { background: var(--deep) light-dark(url("/assets/img/heroes/grain-l-deep.webp"), url("/assets/img/heroes/grain-d-deep.webp")) 0 0 / 128px; }

  /* header: sticky and solid on every page; on the home page it floats over the photograph until the page scrolls */
  .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--base) 96%, transparent); color: var(--ink);
    box-shadow: 0 1px 0 var(--line); transition: background-color .5s var(--ease), box-shadow .5s, color .5s, padding .3s var(--ease); }
  .site-header .wrap { display: flex; align-items: center; gap: 28px; min-block-size: var(--head-h); }
  .brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; font: 400 1.3rem var(--serif); white-space: nowrap; margin-inline-end: auto; }
  .brand:hover { text-decoration: none; }
  .brand-mark { inline-size: 24px; block-size: 24px; flex: none; border-radius: 5px; }
  .nav { display: flex; gap: clamp(16px, 1.6vw, 26px); }
  .nav a { position: relative; color: inherit; font-size: 0.98rem; font-weight: 450; padding-block: 6px; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
  .nav a:hover { text-decoration: none; } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .header-actions { display: flex; align-items: center; gap: 10px; }
  .home .site-header { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; color: #ecebe6; }
  .home .site-header[data-scrolled] { background: color-mix(in oklab, var(--base) 96%, transparent); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
  /* the header buttons over the photograph: unlayered, near the end of this file */
  @media (max-width: 860px) {
    .site-header .wrap { gap: 10px; }
    .nav { gap: 14px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
    .nav::-webkit-scrollbar { display: none; }
    .nav a { font-size: 0.92rem; white-space: nowrap; }
    .brand { font-size: 1.15rem; }
  }
  @media (max-width: 1000px) {
    .site-header .wrap { flex-wrap: wrap; }
    .header-actions { margin-inline-start: auto; }
    .nav { order: 3; flex: 1 0 100%; flex-wrap: wrap; overflow: visible; justify-content: space-between; gap: 0 12px; }
  }
  @media (max-width: 560px) {
    .nav { justify-content: center; gap: 0 16px; }
  }
  /* phones: the name, the theme, the CV and a menu button in one row; the menu opens as a sheet under the bar */
  .nav-scrim { display: none; }
  @media (max-width: 760px) {
    :root { --head-h: 60px; }
    html { scroll-padding-top: 72px; }
    .site-header .wrap { gap: 6px; }
    .brand { font-size: 1.14rem; gap: 9px; min-block-size: 44px; }
    .site-header :is(.icon-btn, .cv) { min-block-size: 44px; min-inline-size: 44px; }
    .site-header .cv { padding-inline: 14px; }
    .header-actions { gap: 6px; }
    html.js .site-header .wrap { flex-wrap: nowrap; }
    .menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { display: block; inline-size: 18px; block-size: 1.5px; border-radius: 1px; background: currentColor; transition: transform .3s var(--ease), background-color .2s; }
    .menu-btn .bars { position: relative; background: transparent; }
    .menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; inset-inline-start: 0; }
    .menu-btn .bars::before { transform: translateY(-3.5px); } .menu-btn .bars::after { transform: translateY(3.5px); }
    .site-header[data-menu] .menu-btn .bars::before { transform: rotate(45deg); } .site-header[data-menu] .menu-btn .bars::after { transform: rotate(-45deg); }
    html.js .nav { position: fixed; z-index: 2; inset: var(--head-h) 0 auto 0; max-block-size: calc(100dvh - var(--head-h)); overflow-y: auto; overscroll-behavior: contain;
      flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 0; padding: 6px var(--gutter) 22px;
      background: var(--base) var(--g-base) 0 0 / 128px; color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 24px 40px -24px rgb(0 0 0 / .5);
      visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .22s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
    html.js .site-header[data-menu] .nav { visibility: visible; opacity: 1; transform: none; transition: opacity .22s var(--ease), transform .35s var(--ease), visibility 0s; }
    html.js .nav a { display: flex; align-items: center; min-block-size: 58px; padding: 0; font: 300 1.7rem/1.1 var(--serif); letter-spacing: -0.012em; color: var(--ink); border-block-end: 1px solid var(--line); }
    html.js .nav a:last-child { border-block-end: 0; }
    html.js .nav a::after { left: 0; right: auto; bottom: 12px; inline-size: 28px; background: var(--flow); }
    html.js .site-header[data-menu] .nav-scrim { display: block; position: fixed; z-index: 1; inset: var(--head-h) 0 0 0; background: rgb(8 8 7 / .5); }
    html.menu-open { overflow: hidden; }
    .home .site-header[data-menu] { background: var(--base); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
  }
  @media (max-width: 374px) { .brand-mark { display: none; } }
  @media (prefers-reduced-motion: reduce) { html.js .nav, html.js .site-header[data-menu] .nav { transition: none; transform: none; } }

  /* sections */
  .section { padding-block: clamp(40px, 6vw, 88px); }
  .section--tight { padding-block: clamp(24px, 3vw, 44px); }
  .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-block-end: clamp(20px, 2.4vw, 32px); }
  .section-head p { color: var(--ink-2); max-inline-size: 66ch; font-size: 1rem; }
  .section-head .more { font: 500 0.92rem var(--sans); color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  .section-head .more:hover { color: var(--ink); text-decoration: none; }
  .section-head .more .i { width: 15px; height: 15px; }

  .page-head { padding-block: clamp(28px, 5vw, 64px) 8px; display: grid; gap: 14px; max-inline-size: 1100px; }
  .page-head .lede { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); color: var(--ink-2); line-height: 1.5; max-inline-size: 64ch; }
  .crumbs { font: 500 0.82rem var(--mono); color: var(--muted); letter-spacing: 0.02em; }
  .crumbs a { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; padding-block: 4px; }
  .crumbs a:hover { color: var(--ink); text-decoration: none; }

  /* footer */
  .site-footer { position: relative; margin-block-start: clamp(56px, 8vw, 120px); border-block-start: 1px solid var(--line); }
  .site-footer .rule { position: absolute; top: -1px; left: 0; height: 1px; width: 100%; background: var(--flow); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
  .site-footer.is-in .rule { transform: scaleX(1); }
  .ft { padding: clamp(40px, 5vw, 64px) 0 28px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
  .ft .me h2 { font: 300 2.4rem/1 var(--serif); letter-spacing: -0.015em; }
  .ft .me p { margin-block-start: 12px; font-size: 0.95rem; color: var(--ink-2); max-inline-size: 24em; }
  .ft .me .links { margin-block-start: 18px; }
  .ft h3 { font: 500 0.8125rem var(--mono); color: var(--muted); margin-block-end: 12px; letter-spacing: 0.02em; }
  .ft ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; }
  .ft ul a { color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
  .ft ul a:hover { text-decoration: none; background-size: 100% 1px; }
  .marks { padding: 24px 0; display: flex; align-items: center; gap: 36px; border-block-start: 1px solid var(--line); flex-wrap: wrap; }
  .marks span { font: 400 0.8125rem var(--mono); color: var(--ink-2); margin-inline-end: -14px; }
  .marks img { inline-size: auto; opacity: .9; }
  .marks .fct { block-size: 46px; } .marks .ehpc { block-size: 76px; }
  .marks-credit { margin-inline-start: auto; font: 400 0.8125rem var(--mono); color: var(--ink-2); }
  .rights { padding-block: 0 18px; font: 0.8125rem/1.5 var(--mono); color: var(--ink-2); }
  .rights a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .on-light { display: none; }
  :root[data-theme="light"] .on-light { display: inline; } :root[data-theme="light"] .on-dark { display: none; }
  @media (prefers-color-scheme: light) { :root:not([data-theme]) .on-light { display: inline; } :root:not([data-theme]) .on-dark { display: none; } }
  .colophon { padding: 18px 0 36px; display: flex; flex-wrap: wrap; gap: 8px 28px; font: 0.8125rem/1.5 var(--mono); color: var(--ink-2); border-block-start: 1px solid var(--line); }
  .colophon .top { margin-inline-start: auto; display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); }
  .colophon .top:hover { color: var(--ink); text-decoration: none; }
  @media (max-width: 860px) { .ft { grid-template-columns: 1fr 1fr; gap: 28px; } .ft .me { grid-column: 1 / -1; } }
  /* phones: each mark under its own label, link rows tall enough for a thumb */
  @media (max-width: 760px) {
    .ft { gap: 24px 20px; }
    .ft .me h2 { font-size: 2.1rem; }
    .ft ul { gap: 0; }
    .ft ul a { display: inline-block; padding-block: 10px; background-position: 0 calc(100% - 9px); }
    .ft h3 { margin-block-end: 2px; }
    .marks { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 18px 20px; }
    .marks span { margin: 0; }
    .marks .fct { block-size: 42px; } .marks .ehpc { block-size: 64px; }
    .marks-credit { grid-column: 1 / -1; margin: 0; }
    .rights a { display: inline-block; padding-block: 12px; }
    .colophon .top { min-block-size: 44px; }
  }
}

/* ---------------------------------------------------------------- components */
@layer components {
  .i { inline-size: 1em; block-size: 1em; flex: none; fill: currentColor; }
  .i-stroke { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-block-size: 40px; padding: 0 17px;
    border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink);
    font: 500 0.95rem/1 var(--sans); white-space: nowrap; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
  .btn:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--ink-2); }
  .btn:active { transform: translateY(0); }
  .btn--primary, .cv { background: var(--ink); color: var(--base); border-color: var(--ink); }
  .btn--primary:hover, .cv:hover { box-shadow: 0 10px 24px -12px rgb(0 0 0 / .55); border-color: var(--ink); }
  .btn--sm { min-block-size: 36px; padding: 0 14px; font-size: 0.9rem; }
  .btn .i { width: 16px; height: 16px; }
  .icon-btn { inline-size: 36px; block-size: 36px; display: inline-grid; place-items: center; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); transition: border-color .25s; }
  .icon-btn:hover { border-color: var(--ink-2); }
  .icon-btn .i { width: 16px; height: 16px; }
  .menu-btn { display: none; }
  @media (max-width: 760px) { html.js .menu-btn { display: inline-grid; } }
  .theme .i-moon { display: none; }
  :root[data-theme="light"] .theme .i-sun, :root:not([data-theme]) .theme .i-sun { display: none; }
  :root[data-theme="light"] .theme .i-moon, :root:not([data-theme]) .theme .i-moon { display: block; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme .i-sun { display: block; } :root:not([data-theme]) .theme .i-moon { display: none; } }
  :root[data-theme="dark"] .theme .i-sun { display: block; } :root[data-theme="dark"] .theme .i-moon { display: none; }

  /* contact links as boxes with their symbols */
  .links { display: flex; flex-wrap: wrap; gap: 8px; }
  .links a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 11px; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 500; color: var(--ink);
    background: var(--raised); border: 1px solid var(--line); transition: border-color .25s, transform .25s var(--ease); }
  .links a:hover { text-decoration: none; border-color: var(--line-strong); transform: translateY(-1px); }
  .links .i { width: 16px; height: 16px; }
  @media (max-width: 760px) { .links a { min-block-size: 44px; } .btn { min-block-size: 44px; } }

  /* type marks: a line pictogram in the type colour, then a plain label */
  .tag { --tag: var(--muted); --glyph: none; display: inline-flex; align-items: center; gap: 7px;
    font: 500 0.8125rem/1.25 var(--mono); color: var(--ink-2); white-space: nowrap; }
  .tag::before { content: ""; flex: none; inline-size: 15px; block-size: 15px; background: var(--tag);
    -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
  .tag--paper { --tag: var(--t-paper); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 1.75h5.25l3 3V14.25H4Z M9.25 1.75v3h3 M6 8h4.25 M6 10.25h4.25 M6 12.5h2.5'/%3E%3C/svg%3E"); }
  .tag--talk { --tag: var(--t-talk); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5a2 2 0 0 1 4 0v3.75a2 2 0 0 1-4 0Z M3.75 7.25a4.25 4.25 0 0 0 8.5 0 M8 11.5v2.75 M5.75 14.25h4.5'/%3E%3C/svg%3E"); }
  .tag--poster { --tag: var(--t-poster); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 2h11v8h-11Z M5 10l-1.25 4.25 M11 10l1.25 4.25 M5 4.75h6 M5 7h3.75'/%3E%3C/svg%3E"); }
  .tag--grant { --tag: var(--t-grant); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.75a4.25 4.25 0 1 1 0 8.5a4.25 4.25 0 1 1 0-8.5Z M8 4.25v3.5 M6.25 6h3.5 M5.5 9.5l-1 4.75 3.5-1.75 3.5 1.75-1-4.75'/%3E%3C/svg%3E"); }
  .tag--hpc { --tag: var(--t-hpc); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 1.75h10v12.5H3Z M3 5.9h10 M3 10.1h10 M5.25 3.8h1.5 M5.25 8h1.5 M5.25 12.2h1.5 M9.5 3.8h1.25 M9.5 8h1.25 M9.5 12.2h1.25'/%3E%3C/svg%3E"); }
  .tag--observing { --tag: var(--t-observing); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.75 14.25h12.5 M3 14.25v-4.5a5 5 0 0 1 10 0v4.5 M7 5v4.75 M9 5v4.75 M7 9.75h2'/%3E%3C/svg%3E"); }
  .tag--software { --tag: var(--t-software); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 4.25L2 8l3.5 3.75 M10.5 4.25L14 8l-3.5 3.75 M9 2.75l-2 10.5'/%3E%3C/svg%3E"); }
  .tag--award { --tag: var(--t-award); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 1.75l3 4.5 3-4.5 M8 7.25a3.5 3.5 0 1 1 0 7a3.5 3.5 0 1 1 0-7Z M8 9.25v3'/%3E%3C/svg%3E"); }
  .tag--position { --tag: var(--t-position); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.75 5.75L8 2l6.25 3.75 M2.75 5.75h10.5 M4.25 6.5v5.5 M8 6.5v5.5 M11.75 6.5v5.5 M2 14.25h12'/%3E%3C/svg%3E"); }
  .tag--abroad { --tag: var(--t-position); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.75a6.25 6.25 0 1 1 0 12.5a6.25 6.25 0 1 1 0-12.5Z M1.75 8h12.5 M8 1.75c-2.25 2.4-2.25 10.1 0 12.5 M8 1.75c2.25 2.4 2.25 10.1 0 12.5'/%3E%3C/svg%3E"); }
  .tag--degree { --tag: var(--t-position); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6L8 3l6.5 3L8 9Z M4.5 7.5v3.25c2 1.5 5 1.5 7 0V7.5 M14.5 6v4'/%3E%3C/svg%3E"); }
  .tag--service { --tag: var(--t-service); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.25h11v11h-11Z M2.5 6.25h11 M5 1.75v3 M11 1.75v3 M5 9h1 M7.5 9h1 M10 9h1 M5 11.5h1 M7.5 11.5h1'/%3E%3C/svg%3E"); }
  .tag--teaching { --tag: var(--t-service); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2.25h12v8H2Z M5.25 13.75L8 10.25l2.75 3.5 M4.25 4.75l2.5 2.25 M9 5h3 M9 7.5h2'/%3E%3C/svg%3E"); }
  .tag--membership { --tag: var(--t-position); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.75a1.75 1.75 0 1 1 0 3.5a1.75 1.75 0 1 1 0-3.5Z M3.25 10.75a1.75 1.75 0 1 1 0 3.5a1.75 1.75 0 1 1 0-3.5Z M12.75 10.75a1.75 1.75 0 1 1 0 3.5a1.75 1.75 0 1 1 0-3.5Z M7.1 5L4.1 10.9 M8.9 5l3 5.9 M5 12.5h6'/%3E%3C/svg%3E"); }
  .tag--proposal { --tag: var(--t-observing); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.75a6.25 6.25 0 1 1 0 12.5a6.25 6.25 0 1 1 0-12.5Z M8 4.5v3.5l2.5 1.5 M2.5 8h1.5 M12 8h1.5'/%3E%3C/svg%3E"); }
  .tag--data { --tag: var(--t-data); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c0-1.25 2.25-2.25 5-2.25S13 2.75 13 4s-2.25 2.25-5 2.25S3 5.25 3 4Z M3 4v8c0 1.25 2.25 2.25 5 2.25s5-1 5-2.25V4 M3 8c0 1.25 2.25 2.25 5 2.25s5-1 5-2.25'/%3E%3C/svg%3E"); }
  .tag--event { --tag: var(--t-data); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 14.5V1.75 M3.5 2.5h8.75l-1.75 3 1.75 3H3.5'/%3E%3C/svg%3E"); }
  .tag--now { --tag: var(--t-software); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 1 1 0-3Z M5 5a4.25 4.25 0 0 0 0 6 M11 5a4.25 4.25 0 0 1 0 6 M3 3a7 7 0 0 0 0 10 M13 3a7 7 0 0 1 0 10'/%3E%3C/svg%3E"); }
  .tag--guide { --tag: var(--t-data); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.75C6.5 2.5 4.25 2 1.75 2.25V12.5c2.5-.25 4.75.25 6.25 1.5 1.5-1.25 3.75-1.75 6.25-1.5V2.25C11.75 2 9.5 2.5 8 3.75Z M8 3.75V14'/%3E%3C/svg%3E"); }
  .tag--accepted { --tag: var(--t-paper); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.75a6.25 6.25 0 1 1 0 12.5a6.25 6.25 0 1 1 0-12.5Z M5.25 8.25l1.9 1.9 3.6-4'/%3E%3C/svg%3E"); }
  .story-hero .tag { color: rgb(255 255 255 / 0.9); }

  /* plain cards (guide, papers, demos, asides) */
  .card { position: relative; isolation: isolate; display: block; background: var(--raised); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; color: var(--ink); transition: border-color .3s var(--ease), transform .4s var(--ease); }
  a.card:hover, .card.is-link:hover { text-decoration: none; border-color: var(--line-strong); transform: translateY(-2px); }
  .card-body { position: relative; z-index: 2; padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start; justify-items: start; }
  .card-body > * { max-inline-size: 100%; }
  .card h3 { font-size: 1.12rem; }
  .card p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
  .card .go { font: 500 0.85rem var(--sans); color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
  .card .go::after { content: ""; inline-size: 16px; block-size: 1px; background: var(--flow); transition: inline-size .35s var(--ease); }
  .card:hover .go { color: var(--ink); } .card:hover .go::after { inline-size: 28px; }
  .card .media { position: absolute; inset: 0; z-index: 0; }
  .card .media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .9s var(--ease); }
  .card:hover .media img { transform: scale(1.03); }
  .card .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 22%, color-mix(in oklab, var(--raised) 94%, transparent) 70%); }
  .card .media.art { display: grid; place-items: center; color: var(--fig); padding: 18px 22px 104px;
    background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px; }
  .card .media.art svg { inline-size: 100%; block-size: 100%; max-block-size: 170px; overflow: visible; }
  .card .media.art .bp-sub { font: 500 11px var(--mono); fill: var(--muted); }
  .card .media.art::after { display: none; }
  .card .media.light { background: #fff; padding: 10px 10px 100px; }
  .card .media.light img { object-fit: contain; }
  .card .media.light::after { background: linear-gradient(180deg, transparent 50%, var(--raised) 82%); }
  .mosaic .card-body, .guide-grid .card-body { background: linear-gradient(180deg, transparent, var(--raised) 26%); }

  .panel { position: relative; background:
      linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, var(--raised);
    border: 1px solid var(--line); border-radius: var(--radius); }

  .prose { max-inline-size: 70ch; display: grid; gap: 16px; color: var(--ink-2); font-size: 1.08rem; line-height: 1.65; }
  .section > .prose { max-inline-size: none; }
  .prose h2 { margin-block-start: 22px; color: var(--ink); font-size: 1.9rem; }
  .prose h3 { margin-block-start: 10px; color: var(--ink); }
  .prose ul, .prose ol { padding-inline-start: 1.2em; display: grid; gap: 6px; }
  .article { color: var(--ink-2); }
  .lede { font-size: 1.15rem; color: var(--ink-2); }
  .muted { color: var(--muted); }
  .kicker { font: 500 0.8125rem var(--mono); color: var(--muted); letter-spacing: 0.02em; }
  .small { font-size: 0.9rem; color: var(--ink-2); }
  .zone-title { font: 500 0.8125rem var(--mono); color: var(--muted); margin-block-end: 8px; }

  .textlinks { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 0.88rem/1.4 var(--sans); }
  .textlinks a { display: inline-block; padding-block: 5px; color: var(--ink-2); background: linear-gradient(var(--flow), var(--flow)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease), color .2s; }
  .textlinks a:hover { text-decoration: none; color: var(--ink); background-size: 100% 1px; }
  @media (max-width: 760px) { .textlinks { gap: 0 20px; } .textlinks a { padding-block: 12px; background-position: 0 calc(100% - 8px); } }

  /* typed entry list (talks, publications, CV) */
  .entries { list-style: none; padding: 0; display: grid; gap: 10px; }
  /* kind marks: one brush drawing per kind of entry (scripts/kind_marks.py), in the kind's colour with its label */
  .mk { --mk: var(--muted); display: grid; justify-items: start; gap: 4px; font: 500 0.8125rem/1.25 var(--mono); color: var(--mk); }
  .mk svg { inline-size: 64px; block-size: 64px; overflow: visible; }
  .mk--row { grid-template-columns: 42px auto; align-items: center; gap: 12px; }
  .mk--row svg { inline-size: 42px; block-size: 42px; }
  .mk--talk, .mk--invited { --mk: light-dark(#1d4fd7, #7aa5ff); }
  .mk--seminar { --mk: light-dark(#04785a, #4fd8ae); }
  .mk--poster, .mk--pitch { --mk: light-dark(#a85a00, #f5b544); }
  .mk--article { --mk: light-dark(#4338ca, #9aa3ff); }
  .mk--lead { --mk: light-dark(#8f6a00, #f2cf52); }
  .mk--thesis { --mk: light-dark(#b0123c, #ff8096); }
  .mk--data { --mk: light-dark(#0e7490, #4fd6ee); }
  .mk--hpc { --mk: light-dark(#6d28d9, #b79dff); }
  .mk--grant, .mk--award { --mk: light-dark(#8f6a00, #f2cf52); }
  .mk--proposal { --mk: light-dark(#0f766e, #4ad9c8); }
  .mk--observing { --mk: light-dark(#b23a12, #ff9a70); }
  .mk--software { --mk: light-dark(#15803d, #5fdc8c); }
  .mk--position, .mk--degree { --mk: light-dark(#1e40af, #8db4ff); }
  .mk--service { --mk: light-dark(#a8360b, #ffa369); }
  .when > span:first-child { white-space: nowrap; }
  .when .flag { display: inline-block; vertical-align: -1px; margin-inline-start: 6px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
  .entry { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 4px 22px; padding: 18px 20px;
    background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); }
  .entry .when { grid-row: 1 / span 6; display: grid; gap: 8px; align-content: start; justify-items: start; font: 500 0.8125rem/1.4 var(--mono); color: var(--muted); }
  .entry .title { font-weight: 560; color: var(--ink); line-height: 1.35; font-size: 1.02rem; }
  .entry .meta { color: var(--muted); font-size: 0.92rem; }
  .entry .note { color: var(--ink-2); font-size: 0.95rem; }
  .entry ul.note { padding-inline-start: 1.1em; display: grid; gap: 4px; margin-block-start: 4px; }
  .entry .facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 0.82rem var(--mono); color: var(--muted); margin-block-start: 4px; }
  .entry .facts dt { color: var(--muted); } .entry .facts dd { margin: 0 0 0 6px; color: var(--ink-2); }
  .entry .facts div { display: flex; }
  .entry .contribution, .bib-entry .contribution { font-size: 0.92rem; color: var(--ink-2); border-inline-start: 2px solid var(--mark); padding-inline-start: 10px; }
  .entry .links, .bib-entry .links { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 0.82rem/1.4 var(--mono); }
  .entry .links a, .bib-entry .links a { display: inline-flex; align-items: center; min-block-size: 30px; padding: 0; border: 0; background: none; color: var(--mark); transform: none; }
  @media (max-width: 640px) { .entry { grid-template-columns: 1fr; } .entry .when { grid-row: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } }
  /* phones: the kind drawing shrinks to a row beside its label, so date, place and kind read as one line above the title */
  @media (max-width: 640px) {
    :is(.entry, .bib-entry) .when { gap: 6px 12px; margin-block-end: 4px; }
    :is(.entry, .bib-entry) .when .mk { grid-template-columns: 30px auto; align-items: center; gap: 8px; }
    :is(.entry, .bib-entry) .when .mk svg { inline-size: 30px; block-size: 30px; }
    :is(.entry, .bib-entry) .links a { min-block-size: 44px; }
  }

  /* bibliography (jekyll-scholar output) */
  .bib-list .bibliography { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  .bib-list .bibliography > li { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
  .bib-entry { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 4px 22px; }
  .bib-entry .when { grid-row: 1 / span 6; display: grid; gap: 8px; align-content: start; justify-items: start; font: 500 0.8125rem/1.4 var(--mono); color: var(--muted); }
  .bib-entry .title { font-weight: 560; color: var(--ink); line-height: 1.35; font-size: 1.05rem; }
  .bib-entry .meta { color: var(--muted); font-size: 0.92rem; }
  @media (max-width: 640px) { .bib-entry { grid-template-columns: 1fr; } .bib-entry .when { grid-row: auto; display: flex; flex-wrap: wrap; } }

  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
  .table-wrap table { inline-size: 100%; font: 0.86rem/1.4 var(--mono); }
  .table-wrap th, .table-wrap td { padding: 10px 12px; text-align: start; border-block-end: 1px solid var(--line); white-space: nowrap; }
  .table-wrap th { color: var(--muted); font-weight: 500; background: var(--alt); }
  .table-wrap tr:last-child td { border-block-end: 0; }

  .figure { display: grid; gap: 10px; }
  .figure img { inline-size: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: var(--raised); }
  .figure figcaption { color: var(--muted); font-size: 0.9rem; max-inline-size: 80ch; }
  .credit { font: 0.8125rem/1.4 var(--mono); color: var(--muted); }
  .paper-fig-img { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
  .paper-fig-img img { border: 0; }

  .grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
  .grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

  /* kinetic build: each block arrives once in its own way (site.js adds is-in); still under reduced motion or without JavaScript */
  html.js .k-up { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
  html.js .k-left { opacity: 0; transform: translateX(-36px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
  html.js .k-scale { opacity: 0; transform: scale(.97); transition: opacity 1s var(--ease), transform 1.4s var(--ease); }
  html.js .k-card { opacity: 0; transform: translateY(46px); transition: opacity 1s var(--ease), transform 1.2s var(--ease), box-shadow .5s var(--ease); }
  html.js .k-card .tri > div, html.js .k-card .media > img { opacity: 0; transition: opacity .7s var(--ease); }
  html.js .k-card.is-in .tri > div, html.js .k-card.is-in .media > img { opacity: 1; }
  html.js .k-card.is-in .tri > div:nth-child(2) { transition-delay: .1s; } html.js .k-card.is-in .tri > div:nth-child(3) { transition-delay: .2s; }
  html.js .is-in.k-up, html.js .is-in.k-left, html.js .is-in.k-scale, html.js .is-in.k-card { opacity: 1; transform: none; }
  html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
  html.js .reveal.is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html.js :is(.k-up, .k-left, .k-scale, .k-card, .reveal), html.js .k-card .tri > div, html.js .k-card .media > img { opacity: 1; transform: none; transition: none; }
  }
}

/* ---------------------------------------------------------------- pages */
@layer pages {
  /* ===== home: hero, a photograph with the name over it; always dark ===== */
  /* the hero leaves room for the four cards and their titles on the first screen */
  :root { --card-h: clamp(140px, 20dvh, 210px); }
  .hero { position: relative; block-size: clamp(430px, calc(100dvh - var(--card-h) - 62px), 860px); overflow: hidden; color: #ecebe6; background: #131210; }
  .hero .photo { position: absolute; inset: 0; overflow: hidden; }
  .hero .photo img { position: absolute; inset: -4% 0 0 0; inline-size: 100%; block-size: 108%; object-fit: cover; object-position: 50% 40%; }
  .hero .photo::before { content: ""; position: absolute; inset: 0; z-index: 2; background:
    radial-gradient(ellipse 75% 95% at 70% 42%, rgb(12 11 10 / 0) 40%, rgb(12 11 10 / .45) 72%, rgb(12 11 10 / .85) 100%),
    linear-gradient(180deg, rgb(19 18 16 / .78) 0%, rgb(19 18 16 / 0) 20%),
    linear-gradient(90deg, rgb(19 18 16 / .72) 0%, rgb(19 18 16 / .5) 30%, rgb(19 18 16 / 0) 52%); }
  .hero .photo::after { content: ""; position: absolute; inset: auto 0 0 0; block-size: 46%; z-index: 2; background: linear-gradient(0deg, var(--base) 0%, color-mix(in oklab, var(--base) 55%, transparent) 40%, transparent); }
  .hero .cap { position: absolute; z-index: 3; inset-inline-end: var(--gutter); inset-block-end: 40px; font-size: 0.82rem; color: color-mix(in oklab, var(--ink) 70%, transparent); }
  .hero .who { position: absolute; z-index: 3; inset-inline-start: var(--gutter); inset-block-end: 64px; max-inline-size: calc(100% - 2 * var(--gutter)); }
  .hero h1 { font: 300 clamp(3rem, 2rem + 4.2vw, 5.25rem)/0.93 var(--serif); letter-spacing: -0.025em; color: #ecebe6; text-shadow: 0 1px 30px rgb(0 0 0 / .25); }
  .hero .role { margin-block-start: 20px; font-size: 1.25rem; color: #d6d3cc; max-inline-size: 26em; }
  .hero .links { margin-block-start: 24px; }
  .hero .links a { color: #ecebe6; background: rgb(22 21 19 / .55); border-color: rgb(236 235 230 / .16); }
  .hero .links a:hover { border-color: rgb(236 235 230 / .45); }
  /* on the cream page the fade stays below the role line, which keeps the dark of the photograph behind it */
  :root[data-theme="light"] .hero .photo::after { block-size: 14%; }
  :root[data-theme="light"] .hero .cap { inset-block-end: calc(14% + 8px); color: #ecebe6; }
  @media (prefers-color-scheme: light) { :root:not([data-theme]) .hero .photo::after { block-size: 14%; } :root:not([data-theme]) .hero .cap { inset-block-end: calc(14% + 8px); color: #ecebe6; } }
  html.js .intro .hero .photo { opacity: 0; } .hero .photo { transition: opacity 1.2s var(--ease); }
  html.js .intro .hero .photo img { transform: scale(1.07); } .hero .photo img { transition: transform 2.2s var(--ease); }
  html.js .intro .hero .who > * { opacity: 0; transform: translateY(18px); } .hero .who > * { transition: opacity .8s var(--ease) .25s, transform 1s var(--ease) .25s; }
  .hero .who > :nth-child(2) { transition-delay: .33s; } .hero .who > :nth-child(3) { transition-delay: .41s; }
  html.js .intro .site-header, html.js .intro .hero .cap { opacity: 0; } .hero .cap { transition: opacity .8s var(--ease) .6s; }
  @media (prefers-reduced-motion: reduce) { html.js .intro :is(.hero .photo, .hero .who > *, .site-header, .hero .cap) { opacity: 1; transform: none; } }
  /* phones: the photograph framed on me, the name and links under it on the dark of the stage */
  @media (max-width: 760px) {
    .hero { block-size: auto; display: flex; flex-direction: column; }
    .hero .photo { position: relative; inset: auto; block-size: min(124vw, 60svh); flex: none; }
    .hero .photo img { object-position: 83% 30%; }
    .hero .photo::before { background: linear-gradient(180deg, rgb(19 18 16 / .72) 0%, rgb(19 18 16 / 0) 24%); }
    .hero .photo::after, :root[data-theme="light"] .hero .photo::after { block-size: 38%; background: linear-gradient(0deg, #131210 0%, rgb(19 18 16 / .6) 45%, transparent); }
    .hero .who { position: relative; inset: auto; order: 1; max-inline-size: none; margin-block-start: -84px; padding-inline: var(--gutter); }
    .hero h1 { font-size: clamp(2.7rem, 1.2rem + 7.4vw, 3.6rem); }
    .hero .role { margin-block-start: 14px; font-size: 1.15rem; }
    .hero .links { margin-block-start: 20px; }
    .hero .links a { min-block-size: 44px; }
    .hero .cap, :root[data-theme="light"] .hero .cap { position: static; order: 2; inset: auto; padding: 14px var(--gutter) 28px; color: #b4b0ab; }
  }
  @media (max-width: 760px) and (prefers-color-scheme: light) { :root:not([data-theme]) .hero .photo::after { block-size: 38%; } :root:not([data-theme]) .hero .cap { inset: auto; color: #b4b0ab; } }

  /* ===== home: concept cards, four equal loops ===== */
  .concepts { position: relative; z-index: 4; display: flex; gap: 18px; margin-block-start: -34px; }
  .concept { flex: 1 1 0; min-inline-size: 0; position: relative; display: block; color: var(--ink); transition: flex-grow .6s var(--ease), opacity .9s var(--ease), transform 1.1s var(--ease); }
  .concept:hover { text-decoration: none; }
  .concepts:hover .concept { flex-grow: .9; } .concepts .concept:hover { flex-grow: 1.3; }
  .concept .plate { position: relative; block-size: var(--card-h); border-radius: var(--radius-sm); overflow: hidden; background: #0d0c0b; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .4s var(--ease); }
  .concept .plate img, .concept .plate video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .concept .plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgb(255 236 206 / .09), transparent 70%); transition: opacity .3s; }
  .concept:hover .plate img, .concept:hover .plate video { transform: scale(1.02); }
  .concept:hover .plate { box-shadow: 0 0 0 1px var(--line-strong), 0 18px 40px -22px rgb(0 0 0 / .6); }
  .concept:hover .plate::after { opacity: 1; }
  .concept h2 { font: 400 1.55rem/1.15 var(--serif); margin-block-start: 14px; display: inline-block; background: linear-gradient(var(--flow), var(--flow)) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
  .concept:hover h2 { background-size: 100% 1px; }
  .concept p { font-size: 0.92rem; color: var(--ink-2); margin-block-start: 2px; }
  @media (max-width: 860px) {
    .concepts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; margin-block-start: 0; padding-block-start: 24px; }
    .concept .plate { block-size: 130px; } .concept h2 { font-size: 1.25rem; } .concept p { font-size: 0.84rem; }
  }

  /* ===== home: portals, one column of framed cards joined by a spine ===== */
  .portals { position: relative; }
  .flow { position: relative; display: grid; gap: 22px; }
  .spine { position: absolute; left: -30px; top: 0; bottom: 0; width: 1px; background: var(--line); overflow: hidden; }
  .spine::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: 0; background: repeating-linear-gradient(180deg, var(--flow) 0 6px, transparent 6px 14px); opacity: .55; will-change: transform; }
  @keyframes run { to { transform: translateY(14px); } }
  .portal { position: relative; display: block; block-size: 380px; border-radius: var(--radius); background: #0d0c0b; color: #ecebe6; isolation: isolate; box-shadow: 0 0 0 1px var(--line-strong); transition: box-shadow .5s var(--ease); }
  .portal:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--flow); }
  .portal::after { content: ""; position: absolute; left: -35px; top: 50%; width: 9px; height: 9px; margin-top: -4px; background: var(--base); border: 1px solid var(--flow); z-index: 1; }
  .portal .node { position: absolute; left: -26px; top: 50%; width: 26px; height: 1px; background: var(--flow); opacity: .6; }
  .portal .media { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
  .portal .media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .portal .tri { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #0d0c0b; }
  .portal .tri > div { position: relative; overflow: hidden; }
  .portal .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 9 8 / .88) 0%, rgb(10 9 8 / .14) 52%, rgb(10 9 8 / .14) 100%); }
  .portal .media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(10 9 8 / .3); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
  .portal:hover .media::before { opacity: 1; }
  .portal .t { position: absolute; z-index: 3; left: 36px; bottom: 30px; right: 36px; display: flex; align-items: center; gap: 22px; }
  .portal h2 { font: 300 clamp(2.2rem, 1.6rem + 2vw, 3.5rem)/1 var(--serif); letter-spacing: -0.015em; color: #ecebe6; }
  .portal .more { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 14px; font-size: 0.95rem; }
  .portal .more span { opacity: 0; transform: translateX(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
  .portal:hover .more span { opacity: 1; transform: none; }
  .portal .go { inline-size: 44px; block-size: 44px; border-radius: 50%; border: 1px solid rgb(236 235 230 / .5); display: grid; place-items: center; transition: background .3s, border-color .3s, transform .4s var(--ease); }
  .portal .go .i { width: 18px; height: 18px; }
  .portal:hover .go { background: rgb(236 235 230 / .14); border-color: #ecebe6; transform: translateX(3px); }
  .portal .glass { position: absolute; z-index: 3; left: 24px; bottom: 100px; max-inline-size: 520px; padding: 18px 20px; border-radius: var(--radius); font-size: 1rem; line-height: 1.5; color: #e9e7e2;
    background: rgb(16 15 14 / .5); border: 1px solid rgb(236 235 230 / .16); opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .6s var(--ease); pointer-events: none; }
  .portal:hover .glass, .portal:focus-visible .glass { opacity: 1; transform: none; }
  @media (max-width: 860px) {
    .spine, .portal::after, .portal .node { display: none; }
    .portal { block-size: 280px; } .portal .t { left: 18px; right: 18px; bottom: 18px; } .portal .glass { display: none; } .portal .more span { display: none; }
  }

  /* ===== home: missions and machines, nine equal cards with official marks ===== */
  .mi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; padding: 0; }
  .mi a { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto 1fr; column-gap: 16px; row-gap: 2px; padding: 18px; block-size: 100%; border-radius: var(--radius); color: var(--ink);
    background: var(--raised); border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease); }
  .mi a:hover { text-decoration: none; border-color: var(--line-strong); transform: translateY(-2px); }
  .mi-credit { margin-block-start: 14px; }
  .mi .logo { grid-row: 1 / 3; inline-size: 56px; block-size: 56px; border-radius: var(--radius-sm); background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
  .mi .logo img { inline-size: 48px; block-size: 48px; object-fit: contain; }
  .mi .logo.wide img { inline-size: 52px; block-size: 30px; }
  .mi .logo.glyph { background: none; color: var(--mark); }
  .mi .logo.glyph .i { width: 28px; height: 28px; }
  .mi .nm { font: 500 1.08rem/1.25 var(--sans); align-self: end; }
  .mi .who { font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-2); align-self: start; }
  .mi .tx { grid-column: 1 / -1; margin-block-start: 12px; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
  @media (max-width: 860px) { .mi { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .mi { grid-template-columns: 1fr; } }

  /* ===== home: the globe ===== */
  .globe-wrap { display: grid; grid-template-columns: 1fr 340px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--raised); }
  .stage { position: relative; min-block-size: 600px; background: radial-gradient(60% 75% at 50% 50%, color-mix(in oklab, var(--sea) 22%, var(--raised)), var(--raised) 80%); }
  .stage > svg, .stage > canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
  .stage > svg { cursor: grab; touch-action: none; } .stage > svg:active { cursor: grabbing; }
  .globe .dot { fill: var(--flow); stroke: var(--sea); stroke-width: 1.5; cursor: pointer; }
  .globe .dot.home { fill: var(--mark); }
  .globe .hit { fill: transparent; cursor: pointer; }
  .globe .lab { font: 560 12px var(--sans); fill: #f4f2ec; paint-order: stroke; stroke: rgb(14 27 45 / .9); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
  .ctrl { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; gap: 6px; }
  .ctrl button { inline-size: 36px; block-size: 36px; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--line); background: color-mix(in oklab, var(--raised) 85%, transparent); color: var(--ink); display: grid; place-items: center; font: 500 18px/1 var(--sans); transition: border-color .2s; }
  .ctrl button:hover { border-color: var(--line-strong); }
  .ctrl .i { width: 17px; height: 17px; display: block; margin: auto; }
  .tip { position: absolute; z-index: 3; inline-size: 280px; border-radius: var(--radius); overflow: hidden; background: color-mix(in oklab, var(--raised) 94%, transparent); border: 1px solid var(--line);
    box-shadow: 0 20px 40px -24px rgb(0 0 0 / .5); opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .35s var(--ease); pointer-events: none; }
  .tip.on { opacity: 1; transform: none; }
  .tip .ph { position: relative; aspect-ratio: 16 / 10; background: #111; } .tip img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .tip .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 8 8 / .82), rgb(8 8 8 / 0) 55%); }
  .tip .cap { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 9px; color: #f2f0eb; }
  .tip .cap b { font: 400 1.35rem/1 var(--serif); color: #f2f0eb; } .tip .cap span { margin-inline-start: auto; font: 400 0.8125rem var(--mono); opacity: .85; }
  .tip .ph small { position: absolute; z-index: 1; top: 6px; right: 8px; font-size: 0.8125rem; color: rgb(242 240 235 / .7); max-inline-size: 80%; text-align: right; }
  .tip p { font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); padding: 10px 14px 12px; }
  .flag { inline-size: 18px; block-size: 12px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
  .places { padding: 22px 18px; border-inline-start: 1px solid var(--line); background: var(--raised); display: grid; align-content: center; }
  .places h3 { display: flex; align-items: center; gap: 9px; font: 500 0.8125rem var(--mono); color: var(--ink-2); margin: 16px 10px 4px; }
  .places h3:first-child { margin-block-start: 2px; }
  .places button { all: unset; box-sizing: border-box; inline-size: 100%; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background-color .2s; }
  .places button:hover, .places button[aria-current="true"] { background: var(--alt); }
  .places .nm { font-size: 0.95rem; font-weight: 500; }
  .places .yr { font: 400 0.8125rem var(--mono); color: var(--ink-2); }
  @media (max-width: 760px) {
    .ctrl { top: 10px; right: 10px; } .ctrl button { inline-size: 44px; block-size: 44px; }
    .globe .lab { font-size: 13.5px; }
    .places { padding: 14px 10px 18px; }
    .places button { min-block-size: 44px; align-items: center; }
    .tip { inline-size: min(280px, calc(100% - 24px)); }
  }
  @media (max-width: 860px) { .globe-wrap { grid-template-columns: 1fr; } .stage { min-block-size: 420px; } .places { border-inline-start: 0; border-block-start: 1px solid var(--line); grid-template-columns: 1fr 1fr; } .places h3 { grid-column: 1 / -1; } }

  /* ===== plates: the picture that opens a page, title at its lower left; always dark ===== */
  .plate { position: relative; block-size: clamp(420px, 56vh, 620px); overflow: hidden; background: #0d0c0b; color: #ecebe6; }
  .plate-media { position: absolute; inset: 0; }
  .plate-media img, .plate-media video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .plate-media .tri { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #0d0c0b; }
  .plate-media .tri > div { position: relative; overflow: hidden; }
  .plate-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 9 8 / .9) 0%, rgb(10 9 8 / .35) 38%, rgb(10 9 8 / .1) 70%), linear-gradient(90deg, rgb(10 9 8 / .62) 0%, rgb(10 9 8 / .4) 32%, transparent 60%), linear-gradient(180deg, rgb(10 9 8 / .55), transparent 22%); }
  .plate-text { position: absolute; z-index: 2; inset-inline-start: var(--gutter); inset-block-end: clamp(28px, 4vw, 52px); max-inline-size: min(100% - 2 * var(--gutter), var(--plate-w, 60ch)); display: grid; gap: 14px; }
  .plate-text h1 { color: #ecebe6; text-shadow: 0 1px 24px rgb(0 0 0 / .3); }
  .plate-text .lede { color: #d6d3cc; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); }
  .plate-text .crumbs, .plate-text .crumbs a { color: #ecebe6; text-shadow: 0 1px 6px rgb(0 0 0 / .7); }
  @media (max-width: 860px) { .plate-text { max-inline-size: calc(100% - 2 * var(--gutter)); } }
  .plate + .wrap > .section:first-child, .plate + .section { padding-block-start: clamp(36px, 5vw, 72px); }
  .plate + .wrap > :is(.guide-wide, .paper-wide):first-child { margin-block-start: clamp(24px, 3vw, 44px); }
  .plate-credit { position: absolute; z-index: 2; inset-inline-end: var(--gutter); inset-block-end: 14px; font: 500 0.8125rem/1.3 var(--mono); color: #d6d3cc; text-shadow: 0 1px 4px rgb(0 0 0 / .8); max-inline-size: 40%; text-align: end; } .plate-credit:hover { color: #fff; }
  @media (max-width: 1100px) { .plate-credit { inset-block: 10px auto; max-inline-size: 72%; } }
  /* a 16:9 loop on black, shown whole beside the title */
  .plate--stage { background: #000; }
  .plate--stage .plate-media video, .plate--stage .plate-media img { inset: 0 0 0 auto; inline-size: auto; aspect-ratio: 16 / 9; object-fit: contain; mask-image: linear-gradient(90deg, transparent, #000 16%); }
  .plate--stage .plate-media::after { background: linear-gradient(0deg, rgb(0 0 0 / .55), transparent 22%); }
  /* the Software header film is drawn on the warm near-black of the site's renders; the plate takes that ground */
  .plate--stage:has(video[poster*="softhead"]) { background: #0c0b0a; }
  @media (max-width: 860px) {
    .plate--stage { block-size: auto; min-block-size: 420px; }
    .plate--stage .plate-media video, .plate--stage .plate-media img { inset: 0 0 auto 0; inline-size: 100%; block-size: auto; mask-image: none; }
    .plate--stage .plate-text { position: relative; inset-inline-start: 0; inset-block-end: 0; padding: calc(56.25vw + 12px) var(--gutter) 24px; max-inline-size: none; }
  }
  /* phones: the picture first, at full width and cropped on its subject (pos_m), the title under it on the dark of the plate */
  @media (max-width: 760px) {
    section.plate:not(.plate--stage) { block-size: auto; display: flex; flex-direction: column; }
    section.plate:not(.plate--stage) .plate-media { position: relative; inset: auto; flex: none; block-size: min(100vw, 54svh); }
    section.plate:not(.plate--stage) .plate-media::after { background: linear-gradient(0deg, #0d0c0b 0%, rgb(13 12 11 / .6) 20%, transparent 44%), linear-gradient(180deg, rgb(10 9 8 / .6), transparent 24%); }
    section.plate:not(.plate--stage) .plate-text { position: relative; inset: auto; margin-block-start: -58px; padding: 0 var(--gutter) 30px; max-inline-size: none; gap: 12px; }
    .plate--stage { display: flex; flex-direction: column; min-block-size: 0; }
    .plate--stage .plate-text { padding-block-end: 16px; }
    .plate--stage .plate-credit { position: static; order: 2; inset: auto; max-inline-size: none; text-align: start; padding: 0 var(--gutter) 22px; color: #b4b0ab; text-shadow: none; }
    .plate-text h1 { font-size: clamp(2.3rem, 1.3rem + 5vw, 3rem); }
    .plate-text .lede { font-size: 1.08rem; line-height: 1.5; }
  }
  @media (max-width: 760px) { :is(img, video)[style*="--pos-m"] { object-position: var(--pos-m) !important; } .tri > div[style*="--pos-m"] > :is(img, video) { object-position: var(--pos-m) !important; } }
  /* phones: a plate of three slices can show one of them alone (tri_m), full width and cropped by tri_m_pos */
  @media (max-width: 760px) {
    .plate-media .tri:is(.tri--m1, .tri--m2, .tri--m3) { grid-template-columns: 1fr; gap: 0; }
    .tri--m1 > div:not(:nth-child(1)), .tri--m2 > div:not(:nth-child(2)), .tri--m3 > div:not(:nth-child(3)) { display: none; }
    .tri[style*="--solo-pos"] > div > :is(img, video) { object-position: var(--solo-pos) !important; }
  }
  .plate--article { block-size: clamp(360px, 46vh, 520px); }
  .plate--article .plate-media img.contain { object-fit: contain; padding: 24px; background: #0d0c0b; }

  /* wide schematics on a phone scroll inside their panel: a word says so, the caption stays put, the edge fades until the end */
  @media (max-width: 760px) {
    :is(.guide-wide, .paper-wide, .sfb-figure, .paper-fig-svg, .se-fig):has(:is(.hpc-svg, .hy-svg, .hy-field-svg, .eso-svg, .nw-svg, .th-method, .th-results, .sfb-svg, .kiel-svg, .hr-svg)) { scrollbar-width: thin; }
    :is(.guide-wide, .paper-wide, .sfb-figure, .paper-fig-svg, .se-fig):has(:is(.hpc-svg, .hy-svg, .hy-field-svg, .eso-svg, .nw-svg, .th-method, .th-results, .sfb-svg, .kiel-svg, .hr-svg))::before { content: "Swipe"; display: block; position: sticky; inset-inline-start: 0; inline-size: max-content; margin-block-end: 6px; font: 500 0.8125rem/1.3 var(--mono); color: var(--muted); }
    :is(.guide-wide, .paper-wide, .sfb-figure, .paper-fig-svg, .se-fig):has(:is(.hpc-svg, .hy-svg, .hy-field-svg, .eso-svg, .nw-svg, .th-method, .th-results, .sfb-svg, .kiel-svg, .hr-svg)) > figcaption { position: sticky; inset-inline-start: 0; inline-size: calc(100vw - 2 * var(--gutter) - 34px); }
    @supports (animation-timeline: scroll()) {
      :is(.guide-wide, .paper-wide, .sfb-figure, .paper-fig-svg, .se-fig):has(:is(.hpc-svg, .hy-svg, .hy-field-svg, .eso-svg, .nw-svg, .th-method, .th-results, .sfb-svg, .kiel-svg, .hr-svg)) {
        mask: linear-gradient(90deg, #000 calc(100% - 32px), transparent) 0 0 / 100% 100% no-repeat;
        animation: fig-end linear both; animation-timeline: scroll(self inline);
      }
      @keyframes fig-end { 92% { mask-size: 100% 100%; } 100% { mask-size: calc(100% + 32px) 100%; } }
    }
  }

  /* ===== rows: image beside words, hairlines between, no boxes (guide, lines of work, codes) ===== */
  .rows { display: grid; }
  .row-item { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(28px, 4vw, 48px); border-block-start: 1px solid var(--line); }
  .row-item:last-child { border-block-end: 1px solid var(--line); }
  .row-item .pic { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: #0d0c0b; box-shadow: 0 0 0 1px var(--line); }
  .row-item .pic img, .row-item .pic video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
  .row-item:hover .pic img, .row-item:hover .pic video { transform: scale(1.03); }
  .row-item .pic svg { position: absolute; inset: 10%; inline-size: 80%; block-size: 80%; color: var(--fig); }
  .row-item .pic.art { background: var(--alt) linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px; }
  .row-item .words { display: grid; gap: 12px; align-content: center; }
  .row-item .kicker { color: var(--muted); }
  .row-item .by, .tool-by { font: 500 0.875rem/1.45 var(--mono); color: var(--ink-2); }
  .tool-by { padding-block-end: 14px; border-block-end: 1px solid var(--line); }
  .row-item h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.3rem); }
  .row-item h2 a { color: inherit; } .row-item h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .row-item h2 a:hover { text-decoration: none; }
  .row-item:hover h2 a { color: var(--ink); background: linear-gradient(var(--flow), var(--flow)) 0 100% / 100% 1px no-repeat; }
  .row-item p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; max-inline-size: 58ch; }
  .row-item .textlinks { position: relative; z-index: 2; }
  .row-item:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .row-item:nth-child(even) .pic { order: 2; }
  .rows--same .row-item:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .rows--same .row-item:nth-child(even) .pic { order: 0; }
  @media (max-width: 860px) { .row-item, .row-item:nth-child(even), .rows--same .row-item:nth-child(even) { grid-template-columns: 1fr; gap: 16px; } .row-item:nth-child(even) .pic { order: 0; } }

  /* ===== lists of the record (talks, publications, CV, packages): quiet rows, the date to the left ===== */
  .entries { gap: 0; border-block-start: 1px solid var(--line); }
  .entry { background: none; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; padding: 20px 4px; }
  .bib-list .bibliography { gap: 0; border-block-start: 1px solid var(--line); }
  .bib-list .bibliography > li { background: none; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; padding: 20px 4px; }

  /* explainer plates: one wide picture each, the short title on it, the sentence under */
  /* two across; an odd count closes on a row of three, so no row is left half empty */
  .explainers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .explainer { position: relative; display: grid; gap: 12px; align-content: start; color: var(--ink); }
  @media (min-width: 761px) {
    .explainers { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .explainer { grid-column: span 3; }
    .explainer:first-child:nth-last-child(3), .explainer:first-child:nth-last-child(3) ~ .explainer, .explainer:first-child:nth-last-child(5) ~ .explainer:nth-child(n+3) { grid-column: span 2; }
  }
  .explainer:hover { text-decoration: none; }
  .explainer .pic { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0d0c0b; box-shadow: 0 0 0 1px var(--line); }
  .explainer .pic img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
    .explainer .pic.art { background: var(--alt); } .explainer .pic.art svg { position: absolute; inset: 6%; inline-size: 88%; block-size: 88%; color: var(--fig); }
  .explainer:hover .pic img { transform: scale(1.03); }
  .explainer .pic:has(.tag)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(10 9 8 / .72), transparent 34%), linear-gradient(0deg, rgb(10 9 8 / .72), transparent 30%); }
  .explainer .tag { position: absolute; z-index: 2; top: 12px; left: 14px; color: #f0eee9; }
  .explainer .tag::before { background: #f0eee9; }
  .explainer h3 { font: 400 1.4rem/1.2 var(--serif); }
  .explainer p { color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
  .row-item .ccredit { inset: auto 0 0 auto; max-inline-size: 100%; padding: 2px 8px; border-start-start-radius: var(--radius-sm); background: rgb(0 0 0 / .62); color: #fff; text-shadow: none; }
  .explainer .ccredit { inset: auto auto 10px 14px; max-inline-size: calc(100% - 28px); text-align: start; color: #f0eee9; }

  /* ===== research: the lines of work ===== */
  .nn-nodes circle { fill: var(--raised); stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; }

  .lines { display: grid; gap: 22px; }
  .line { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .3s; }
  .line-pic { position: relative; z-index: 0; min-block-size: 300px; display: grid; place-items: center; padding: 18px; overflow: hidden; background: var(--alt);
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; }
  .line-pic img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
  .line:hover .line-pic img { transform: scale(1.03); }
  .line-pic svg { inline-size: min(100%, 380px); block-size: auto; max-block-size: 240px; color: var(--fig); overflow: visible; }
  .line .card-body { position: static; padding: clamp(22px, 3vw, 40px); gap: 12px; align-content: center; }
  .line h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
  .line-link { color: inherit; } .line-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
  .line-link:hover { text-decoration: none; }
  .line .textlinks { position: relative; z-index: 3; }
  .line:hover { border-color: var(--line-strong); }
  .line p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-inline-size: 60ch; }
  .line:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .line:nth-child(even) .line-pic { order: 2; }
  @media (max-width: 860px) { .line, .line:nth-child(even) { grid-template-columns: 1fr; } .line:nth-child(even) .line-pic { order: 0; } .line-pic { min-block-size: 220px; } }

  /* explore mosaics (papers, demos, playgrounds) */
  .mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .mosaic .card { grid-column: span 4; min-block-size: 270px; display: flex; flex-direction: column; justify-content: flex-end; }
  .mosaic .card.wide { grid-column: span 8; }
  .mosaic--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic--pairs > .card { grid-column: auto; min-block-size: 270px; display: flex; flex-direction: column; justify-content: flex-end; }
  .mosaic--pairs > .card.wide { grid-column: 1 / -1; }
  .card-wrap { position: relative; display: grid; }
  .card-wrap > .card { min-block-size: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
  .ccredit { position: absolute; inset-block-start: 6px; inset-inline-end: 8px; z-index: 3; max-inline-size: 80%; text-align: end; font: 500 0.8125rem/1.3 var(--mono); color: rgb(255 255 255 / .76); text-shadow: 0 1px 2px rgb(0 0 0 / .7); }
  .ccredit:hover { color: #fff; text-decoration: underline; }
  .mosaic--pairs .card-wrap.wide { grid-column: 1 / -1; }
  .mosaic--pairs .card-wrap.wide .card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-block-size: 0; }
  .mosaic--pairs .card-wrap.wide .card .media { position: relative; inset: auto; padding: 16px 20px; align-self: center; }
  .mosaic--pairs .card-wrap.wide .card .media.art svg { max-block-size: none; }
  .mosaic--pairs .card-wrap.wide .card .card-body { align-self: end; }
  @media (max-width: 1080px) { .mosaic .card { grid-column: span 6; } .mosaic .card.wide { grid-column: span 12; } }
  @media (max-width: 860px) { .mosaic--pairs .card-wrap.wide .card { grid-template-columns: 1fr; } }
  @media (max-width: 640px) { .mosaic .card, .mosaic .card.wide, .mosaic--pairs { grid-column: span 12; grid-template-columns: 1fr; } }
  .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
  .guide-grid .card { min-block-size: 280px; display: flex; flex-direction: column; justify-content: flex-end; }

  /* ===== about ===== */
  .id { padding-block: clamp(28px, 3.5vw, 48px) clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: end; }
  .id .ph { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line-strong); }
  .id .ph img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
  .id .role { margin-block-start: 12px; font-size: 1.25rem; color: var(--ink-2); }
  .id .bio { margin-block-start: 18px; max-inline-size: 34em; font-size: 1.1rem; line-height: 1.65; color: var(--ink); }
  .id-facts { align-self: start; padding-block-start: 6px; border-inline-start: 1px solid var(--line); padding-inline-start: clamp(20px, 2.4vw, 32px); }
  .id-facts dl { margin: 0; display: grid; gap: 14px; }
  .id-facts dt { font: 500 0.8125rem/1.35 var(--mono); color: var(--muted); }
  .id-facts dd { margin: 2px 0 0; font-size: 1rem; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
  @media (min-width: 1180px) { .id { grid-template-columns: clamp(280px, 24vw, 400px) minmax(0, 1fr) clamp(220px, 17vw, 270px); align-items: start; } .id .ph { max-block-size: calc(100dvh - var(--head-h) - 96px); } }
  @media (max-width: 1179px) { .id-facts { grid-column: 1 / -1; border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--line); padding-block-start: 20px; } .id-facts dl { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
  .id .facts { margin-block-start: 24px; display: flex; flex-wrap: wrap; gap: 8px 28px; font: 400 0.84rem var(--mono); color: var(--ink-2); }
  .id .facts b { font-weight: 500; color: var(--ink); }
  .id .links { margin-block-start: 20px; }
  .id .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 14px; }
  @media (max-width: 860px) { .id { grid-template-columns: 1fr; } .id .ph { max-inline-size: 360px; } }

  .strip { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 14px; }
  .strip figure { position: relative; border-radius: var(--radius); overflow: hidden; background: #0d0c0b; box-shadow: 0 0 0 1px var(--line); }
  .strip figure:first-child { grid-row: 1 / 3; }
  .strip img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
  .strip figure:hover img { transform: scale(1.03); }
  .strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font-size: 0.9rem; color: #f0eee9; background: linear-gradient(0deg, rgb(10 9 8 / .75), transparent); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
  .strip figure:hover figcaption { opacity: 1; transform: none; }
  @media (max-width: 860px) { .strip { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 180px 180px; } .strip figure:first-child { grid-column: 1 / 3; grid-row: auto; } }

  /* the record by year: filters, then each year with its entries */
  .filters { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: clamp(24px, 3vw, 40px); }
  .filters button { padding: 7px 12px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; border: 1px solid var(--line); background: var(--raised); color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; transition: border-color .2s, color .2s, background-color .2s; }
  .filters button::before { content: ""; flex: none; inline-size: 14px; block-size: 14px; background: var(--tag, var(--muted)); -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
  .filters button[data-filter="all"]::before { display: none; }
  .filters button .n { font: 400 0.8125rem var(--mono); color: var(--muted); }
  .filters button:hover { color: var(--ink); border-color: var(--line-strong); }
  .filters button[aria-pressed="true"] { background: var(--ink); color: var(--base); border-color: var(--ink); } .filters button[aria-pressed="true"] .n { color: color-mix(in oklab, var(--base) 70%, transparent); }
  @media (max-width: 760px) { .filters button { min-block-size: 44px; } .tl-links a { display: inline-flex; align-items: center; min-block-size: 44px; } }
  .year { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding: 28px 0; border-block-start: 1px solid var(--line); }
  .year > h3 { position: sticky; top: 90px; align-self: start; font: 300 4rem/1 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
  .year > h3 small { display: block; margin-block-start: 8px; font: 400 0.8125rem var(--mono); color: var(--muted); letter-spacing: 0; }
  .year ol { list-style: none; padding: 0; display: grid; }
  .tl-row { display: grid; grid-template-columns: 7.5rem 13.5rem minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 13px 10px; border-radius: var(--radius-sm); transition: background-color .2s; }
  .tl-row:hover { background: color-mix(in oklab, var(--raised) 70%, transparent); }
  .tl-date { font: 400 0.8125rem/1.45 var(--mono); color: var(--ink-2); } .tl-to { display: block; color: var(--muted); }
  .tl-row .tag { white-space: normal; align-items: flex-start; } .tl-row .tag::before { margin-block-start: 2px; }
  .tl-title { font-size: 1rem; color: var(--ink); line-height: 1.45; }
  .tl-title small { display: block; font-size: 0.88rem; color: var(--ink-2); margin-block-start: 2px; }
  .tl-links { font: 500 0.82rem var(--mono); display: flex; gap: 12px; white-space: nowrap; }
  html.js .k-row { opacity: 0; transform: translateX(-18px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
  html.js .year.is-in .k-row { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { html.js .k-row { opacity: 1; transform: none; } }
  @media (max-width: 860px) { .year { grid-template-columns: 1fr; gap: 6px; } .year > h3 { position: static; font-size: 2.8rem; } .tl-row { grid-template-columns: auto 1fr; gap: 4px 10px; } .tl-row > :nth-child(n+3) { grid-column: 1 / -1; } .tl-to { display: inline; margin-inline-start: .4em; } }

  /* ===== talks: the record beside the photographs ===== */
  .talks-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(24px, 3vw, 48px); align-items: start; }
  .talks-photos { position: sticky; inset-block-start: 90px; display: grid; gap: 14px; }
  .talks-photos figure { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); aspect-ratio: 4 / 3; background: #0d0c0b; }
  .talks-photos img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .talks-photos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px; font-size: 0.86rem; color: #f0eee9; background: linear-gradient(0deg, rgb(10 9 8 / .78), transparent); }
  @media (max-width: 980px) { .talks-layout { grid-template-columns: 1fr; } .talks-photos { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

  /* ===== articles (guide, papers) ===== */
  .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); column-gap: clamp(28px, 4vw, 64px); row-gap: 28px; align-items: start; }
  .article-layout .prose { max-inline-size: 72ch; }
  .paper-fig-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 34%); gap: 8px 28px; align-items: end; margin-block-end: 28px; }
  .paper-fig-top .paper-fig-img { grid-row: 1 / 3; } .paper-fig-top figcaption { align-self: end; }
  @media (max-width: 860px) { .paper-fig-top { grid-template-columns: 1fr; } .paper-fig-top .paper-fig-img { grid-row: auto; } }
  .article-aside { position: sticky; top: 90px; display: grid; gap: 22px; padding-inline-start: 24px; border-inline-start: 1px solid var(--line); }
  .article-aside .contribution { border-inline-start: 2px solid var(--mark); padding-inline-start: 10px; }
  @media (max-width: 980px) { .article-layout { grid-template-columns: 1fr; } .article-aside { position: static; } }
  .article-hero { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
  .article-hero img { inline-size: 100%; max-block-size: 380px; object-fit: cover; }
  .sources { font-size: 0.88rem; color: var(--muted); display: grid; gap: 4px; padding-inline-start: 1.1em; }
  .plain { list-style: none; padding: 0; }

  /* observing story */
  .story-hero { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-block-size: 480px; display: grid; align-content: end; color: #fff; }
  .story-hero img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .story-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(3 6 12 / 0.05) 30%, rgb(3 6 12 / 0.82)); }
  .story-hero .card-body { position: relative; z-index: 2; padding: clamp(18px, 3vw, 36px); }
  .story-hero h1, .story-hero p { color: #fff; }
  .story-hero p { color: rgb(255 255 255 / .86); max-inline-size: 70ch; }
  .story-crumbs { margin-block: 18px -12px; }
  .gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
  .gallery figure { grid-column: span 4; display: grid; gap: 6px; }
  .gallery figure.wide { grid-column: span 8; }
  .gallery img { inline-size: 100%; block-size: 260px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
  .gallery figure.half { grid-column: span 6; }
  .gallery figure.tall { grid-column: span 3; grid-row: span 2; align-content: start; }
  .gallery figure.tall img { block-size: 556px; }
  .gallery figcaption { font-size: 0.84rem; color: var(--muted); }
  @media (max-width: 760px) { .gallery figure, .gallery figure.wide, .gallery figure.half, .gallery figure.tall { grid-column: span 12; grid-row: auto; } .gallery figure.tall img { block-size: 460px; } }
  .blueprint { padding: 10px; color: var(--fig); }
  .blueprint.wide-fig { padding: 18px 22px 10px; }
  .blueprint.wide-fig svg { max-block-size: 520px; }
  .blueprint svg { inline-size: 100%; block-size: auto; }
  .facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
  .fact { padding: 14px; display: grid; gap: 4px; }
  .fact b { font: 300 1.7rem/1.1 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
  .fact span { font: 0.8125rem/1.4 var(--mono); color: var(--muted); }

  /* skills (About) */
  /* four over three, so seven cards fill both rows */
  .skills { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
  .skill { grid-column: span 3; padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
  .skill:first-child:nth-last-child(7) ~ .skill:nth-child(n+5) { grid-column: span 4; }
  @media (max-width: 1100px) { .skill, .skill:first-child:nth-last-child(7) ~ .skill:nth-child(n+5) { grid-column: span 6; } .skill:last-child:nth-child(odd) { grid-column: 1 / -1; } }
  @media (max-width: 640px) { .skill, .skill:first-child:nth-last-child(7) ~ .skill:nth-child(n+5) { grid-column: 1 / -1; } }
  .skill h3 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
  .skill h3 .i { color: var(--mark); width: 18px; height: 18px; }
  .skill p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.45; }

  /* cv page */
  .cv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .cv-grid > section { display: grid; gap: 10px; }
  .cv-grid .full { grid-column: 1 / -1; }
  @media (max-width: 900px) { .cv-grid { grid-template-columns: 1fr; } }
  .cv-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
  @media (max-width: 700px) { .cv-hero { grid-template-columns: 1fr; } }

  /* Tellurion landing, Stellar Explorer and the legacy demo blocks */
  .tl-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 28px; align-items: start; margin-block: 8px 32px; }
  .tl-hero { display: grid; gap: 8px; }
  .tl-hero img { inline-size: 100%; block-size: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #0b0d12; }
  .tl-about { display: grid; gap: 14px; align-content: start; max-inline-size: 62ch; }
  .tl-about p { color: var(--ink-2); }
  .tl-facts { display: grid; gap: 10px; margin: 0; border-block-start: 1px solid var(--line); padding-block-start: 12px; }
  .tl-facts div { display: grid; grid-template-columns: 10ch minmax(0, 1fr); gap: 12px; }
  .tl-facts dt { font: 500 0.8125rem/1.6 var(--mono); color: var(--muted); }
  .tl-facts dd { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
  .tl-cta { display: flex; flex-wrap: wrap; gap: 8px; }
  @media (max-width: 980px) { .tl-top { grid-template-columns: 1fr; } }
  .row { margin-block: 14px 26px; display: grid; gap: 12px; }
  .row > h2 { margin-block-start: 10px; }
  .row .prose, .row > .meta { max-inline-size: 80ch; }
  .list { padding-inline-start: 1.2em; display: grid; gap: 6px; }
  .meta { color: var(--muted); }
  .se-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; margin-block: 8px 24px; }
  .se-top h2 { margin-block-start: 8px; }
  .se-side { display: grid; gap: 16px; }
  .se-pic { inline-size: 100%; block-size: auto; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
  .se-fig { display: grid; gap: 8px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
  @media (max-width: 980px) { .se-top { grid-template-columns: 1fr; } }
  @media (max-width: 760px) { .se-fig { overflow-x: auto; } .se-fig .hr-svg { min-inline-size: 640px; } }

  /* ===== figures: blueprint grammar, isometric kit, HR diagram ===== */
  .bp-svg { inline-size: 100%; block-size: auto; color: var(--fig); }
  .bp-svg, .f1-svg, .iso-svg { --accent: var(--fig); }
  :is(.f1-t, .f1-apogee, .f1-fill, .hy-dot-acc, .hy-data circle, .hy-data-key, .hy-mark-h, .hy-psf-n, .hy-bar,
      .nw-dot, .nw-dot-o, .nw-me, .nw-box-me, .nw-line-me, .nw-box-part, .nw-hatch-line, .nw-key-part, .nw-band-me,
      .nw-key-me, .nw-dash-me, .nw-bar, .th-mark, .th-dot, .th-val, .hpc-sq.cpu-on) { --accent: var(--mark); }
  .bp-svg .ray { fill: none; stroke: var(--accent-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .9; }
  .bp-svg .warmray { stroke: var(--accent-2); }
  .bp-svg .mirror { stroke-width: 3; }
  .bp-svg .axis { fill: none; stroke: currentColor; stroke-width: .8; stroke-dasharray: 12 3 2 3; opacity: .7; vector-effect: non-scaling-stroke; }
  .bp-svg .order { fill: none; stroke: var(--accent-2); stroke-width: 1.2; opacity: .85; }
  .bp-svg .lab { fill: color-mix(in oklab, var(--accent) 4%, transparent); }
  .bp-svg .bp-label2 { font: 600 11px var(--mono); fill: var(--ink); letter-spacing: 0.04em; }
  .bp-svg .bp-tick { font: 500 10px var(--mono); fill: var(--muted); }
  @media (prefers-reduced-motion: no-preference) { .bp-svg .flowray { stroke-dasharray: 6 5; animation: flow-11 1.8s linear infinite; } }
  @keyframes flow-11 { to { stroke-dashoffset: -22; } }
  .bp { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .bp-thin { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.55; vector-effect: non-scaling-stroke; }
  .bp-fill { fill: currentColor; stroke: none; }
  .bp-soft { fill: currentColor; opacity: 0.14; stroke: none; }
  .bp-ink { fill: var(--ink); }
  .bp-label { font: 500 9px var(--mono); fill: var(--muted); letter-spacing: 0.04em; }
  .bp-warm { color: var(--accent-2); }
  @media (prefers-reduced-motion: no-preference) {
    .flow-dash { stroke-dasharray: 3 5; animation: flow 1.6s linear infinite; }
    @keyframes flow { to { stroke-dashoffset: -16; } }
    .pulse { animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
    @keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
    .nn-edge { stroke-dasharray: 2 6; animation: flow 1.2s linear infinite; }
  }
  .hr-svg { inline-size: 100%; block-size: auto; overflow: visible; }
  .hr-svg .hr-guide { fill: none; stroke: var(--muted); stroke-width: .6; opacity: .5; }
  .hr-svg .hr-axis { fill: none; stroke: var(--ink); stroke-width: 1.2; }
  .hr-svg .hr-tick { stroke: var(--ink); stroke-width: 1; }
  .hr-svg .hr-num, .hr-svg .hr-dim, .hr-svg .hr-lab { font: 500 9.5px var(--mono); fill: var(--muted); }
  .hr-svg .hr-track { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .5; stroke-linejoin: round; }
  .hr-svg .hr-pt { stroke: var(--raised); stroke-width: .5; }
  .hr-svg .hr-node { fill: var(--ink); }
  .hr-svg .hr-sun { fill: none; stroke: var(--ink); stroke-width: 1.2; }
  .hr-svg .hr-note { font: 500 10px var(--mono); fill: var(--ink); }
  .hr-svg .hr-dim-tex, .hr-svg .hr-lab-tex { fill: var(--muted); } .hr-svg .hr-note-tex { fill: var(--ink); }
  .card .media.art .hr-num, .card .media.art .hr-lab, .card .media.art .hr-note, .card .media.art .hr-dim, .card .media.art .hr-tick { display: none; }

  .iso-svg {
    --anatomy-paper: var(--raised); --anatomy-face: var(--alt);
    --anatomy-top: color-mix(in oklab, var(--alt) 88%, var(--ink) 12%);
    --anatomy-shade-0: color-mix(in oklab, var(--raised) 94%, var(--ink) 6%);
    --anatomy-shade-1: color-mix(in oklab, var(--raised) 90%, var(--ink) 10%);
    --anatomy-shade-2: color-mix(in oklab, var(--raised) 86%, var(--ink) 14%);
    --anatomy-shade-3: color-mix(in oklab, var(--raised) 82%, var(--ink) 18%);
    --anatomy-lit-top: color-mix(in oklab, var(--mark) 45%, var(--raised));
    --anatomy-lit-shade: color-mix(in oklab, var(--mark) 25%, var(--raised));
    --anatomy-hi: var(--ink); --anatomy-mid: var(--ink-2); --anatomy-lo: var(--muted); --anatomy-faint: var(--line-strong);
    --anatomy-lit: var(--mark); --anatomy-dot: var(--ink); --anatomy-blue: var(--accent-2); --anatomy-weight: .7px;
    display: block; inline-size: 100%; block-size: auto; overflow: hidden;
  }
  .iso-svg path, .iso-svg circle { vector-effect: non-scaling-stroke; }
  .iso-svg .iso-fill { fill: var(--anatomy-paper); stroke: none; }
  .iso-svg .iso-solid[data-lit] > .iso-fill { fill: var(--anatomy-face); }
  .iso-svg .iso-shade, .iso-svg .iso-top { stroke: none; }
  .iso-svg .iso-shade[data-shade="0"] { fill: var(--anatomy-shade-0); }
  .iso-svg .iso-shade[data-shade="1"] { fill: var(--anatomy-shade-1); }
  .iso-svg .iso-shade[data-shade="2"] { fill: var(--anatomy-shade-2); }
  .iso-svg .iso-shade[data-shade="3"] { fill: var(--anatomy-shade-3); }
  .iso-svg .iso-top { fill: var(--anatomy-top); }
  .iso-svg .iso-solid[data-lit] > .iso-top { fill: var(--anatomy-lit-top); }
  .iso-svg .iso-solid[data-lit] > .iso-shade { fill: var(--anatomy-lit-shade); }
  .iso-svg .iso-solid[data-lit] > .iso-edge { stroke: var(--anatomy-lit); }
  .iso-svg .iso-line { fill: none; stroke: var(--anatomy-lo); stroke-width: var(--anatomy-weight); stroke-linecap: round; stroke-linejoin: round; }
  .iso-svg .iso-line[data-tone="hi"] { stroke: var(--anatomy-hi); }
  .iso-svg .iso-line[data-tone="mid"] { stroke: var(--anatomy-mid); }
  .iso-svg .iso-line[data-tone="faint"] { stroke: var(--anatomy-faint); }
  .iso-svg .iso-line[data-tone="blue"] { stroke: var(--anatomy-blue); stroke-width: 1.3px; }
  .iso-svg .iso-line[data-dashed] { stroke-dasharray: 3 3; }
  .iso-svg .iso-line[data-flow] { stroke-dasharray: 2 6; animation: iso-flow 1.6s linear infinite; }
  .iso-svg .iso-dots circle { fill: var(--anatomy-dot); stroke: none; opacity: .32; }
  .iso-svg .iso-dots[data-tone="hi"] circle { opacity: .85; }
  .iso-svg .iso-dots[data-tone="mid"] circle { opacity: .45; }
  .iso-svg .iso-num { font: 500 11px var(--mono); fill: var(--muted); }
  .iso-svg .iso-line[data-tone="lit"] { stroke: var(--mark); stroke-width: 1px; }
  .iso-svg .dp-px { fill: none; stroke: var(--line-strong); stroke-width: .7; }
  .iso-svg .dp-mask { fill: color-mix(in oklab, var(--mark) 22%, transparent); stroke: var(--mark); stroke-width: .9; }
  .iso-svg .dp-frame { fill: none; stroke: var(--ink-2); stroke-width: 1; }
  .iso-svg .dp-target { fill: color-mix(in oklab, var(--ink) 10%, transparent); stroke: var(--ink); stroke-width: 1.4; }
  .iso-svg .dp-target-c { fill: var(--ink); }
  .iso-svg .dp-neigh { fill: none; stroke: var(--accent-2); stroke-width: 1.1; }
  .iso-svg .dp-neigh-c { fill: var(--accent-2); }
  .iso-svg .dp-bar-t { fill: var(--ink-2); }
  .iso-svg .dp-bar-n { fill: var(--accent-2); }
  .iso-svg .dp-spr { font: 650 12px var(--mono); fill: var(--ink); }
  .iso-svg .dp-dim { fill: none; stroke: var(--muted); stroke-width: .8; }
  .iso-svg .dp-lead { fill: none; stroke: var(--muted); stroke-width: .6; stroke-dasharray: 2 3; }
  @keyframes iso-flow { to { stroke-dashoffset: -32; } }
  @media (prefers-reduced-motion: reduce) { .iso-svg .iso-line[data-flow], .bp-svg .flowray, .spine::after { animation: none; } }

  @media print {
    .site-header, .site-footer, .no-print, .filters, .globe-wrap, .concepts, .mosaic { display: none !important; }
    body { background: #fff; color: #000; }
    .card, .entry { break-inside: avoid; box-shadow: none; }
  }
}

/* ---------------------------------------------------------------- utilities */
@layer utilities {
  .sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stack-s { display: grid; gap: 8px; } .stack-m { display: grid; gap: 16px; } .stack-l { display: grid; gap: 28px; }
  .row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
}
/* a page with no side column: a run of short paragraphs takes the full width in two columns */
@media (min-width: 1100px) {
  .wrap > .row > .prose:only-child:has(> p + p) { display: block; max-inline-size: none; columns: 2; column-gap: clamp(40px, 4vw, 64px); }
  .wrap > .row > .prose:only-child:has(> p + p) > p { break-inside: avoid; margin-block-start: 0; margin-block-end: 1em; }
}

/* hovering a card: an accent frame and "Learn more" with its arrow, as on the home portals */
.card-more { position: absolute; z-index: 3; inset: auto 0 0 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 34px 16px 14px; font: 400 0.95rem/1 var(--sans); color: #ecebe6; background: linear-gradient(0deg, rgb(10 9 8 / .72), transparent); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.card-more > span:first-child { transform: translateX(8px); transition: transform .5s var(--ease); }
.card-more .go { inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1px solid rgb(236 235 230 / .5); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; }
.card-more .go .i { position: static; inset: auto; inline-size: 16px; block-size: 16px; color: inherit; }
:is(.concept, .explainer, .row-item):is(:hover, :focus-within) .card-more { opacity: 1; }
:is(.concept, .explainer, .row-item):is(:hover, :focus-within) .card-more > span:first-child { transform: none; }
:is(.concept, .explainer, .row-item):is(:hover, :focus-within) .card-more .go { background: rgb(236 235 230 / .14); transform: translateX(3px); }
:is(.explainer, .row-item):is(:hover, :focus-within) .pic, .concept:is(:hover, :focus-within) .plate { box-shadow: 0 0 0 1px var(--flow); }
@media (hover: none) { .card-more { display: none; } }
/* the mission cards carry it in their upper corner, in the page's own ink */
.mi a { position: relative; }
.mi .card-more { inset: 14px 14px auto auto; padding: 0; background: none; color: var(--ink); }
.mi .card-more .go { border-color: var(--line-strong); }
.mi a:is(:hover, :focus-visible) { border-color: var(--flow); box-shadow: 0 0 0 1px var(--flow); text-decoration: none; }
.mi a:is(:hover, :focus-visible) .card-more { opacity: 1; }
.mi a:is(:hover, :focus-visible) .card-more > span:first-child { transform: none; }
.mi a:is(:hover, :focus-visible) .card-more .go { background: color-mix(in oklab, var(--ink) 12%, transparent); transform: translateX(3px); }
/* a title card's loop: fills its panel, and on the home page fades in over the still while hovered */
.tri video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.portal .tri video { opacity: 0; transition: opacity .4s var(--ease); } .portal .tri video.on { opacity: 1; }
/* over the photograph the CV button stays light in both themes, at every width; on phones the theme and menu
   buttons turn to the stage's dark glass too. Outside the layers, since the components layer's .cv and
   .icon-btn would otherwise win over the layout rules. */
.home .site-header:not([data-scrolled]):not([data-menu]) .cv { background: #ecebe6; color: #131210; border-color: #ecebe6; }
@media (max-width: 760px) {
  .home .site-header:not([data-scrolled]):not([data-menu]) :is(.theme, .menu-btn) { border-color: rgb(236 235 230 / .4); background: rgb(19 18 16 / .35); color: #ecebe6; }
}