/* TK projects: one light palette (light mode only), three faces with distinct jobs:
   serif for titles and reading, sans for meta and UI, a squared face for the mark and labels. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #282828;
  --fg2: #504945;
  --muted: #676767;
  --faint: #969696;
  --rule: #ececea;
  --panel: #fafaf8;
  --blue: #e7f0fa; --blue-ink: #3d7cc9;
  --yellow: #fbf4d8; --yellow-ink: #b88a14;
  --green: #ecf5e2; --green-ink: #5f9a3a;
  --red-ink: #d0503c;
  --pad: 1.3rem;
  --read: 660px;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mark: "Chakra Petch", "Inter", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--fg) 25%, transparent); transition: text-decoration-color .3s ease-in-out, color .3s ease-in-out; }
a:hover { text-decoration-color: var(--fg); }

/* Header: the mark left, a quiet nav right. */
.site-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--pad) 14px; background: rgb(255 255 255 / .92); backdrop-filter: blur(8px); }
.mark { font: 500 14px/1 var(--mark); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.site-head nav { display: flex; gap: 22px; font-size: 13.5px; }
.site-head nav a { text-decoration: none; color: var(--fg); }
.site-head nav a:hover { color: var(--muted); }

main { max-width: calc(var(--read) + 2 * var(--pad)); margin: 0 auto; padding: 40px var(--pad) calc(96px + env(safe-area-inset-bottom, 0px)); }

/* Arrival: headings rise in, staggered (off for reduced motion). */
.rise { opacity: 0; animation: rise .8s var(--ease) forwards; }
.rise.d1 { animation-delay: .1s; } .rise.d2 { animation-delay: .2s; } .rise.d3 { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* Scroll reveal, set up by motion.js only when motion is welcome. */
.js-motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-motion .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; } }

/* Index */
.intro h1 { font: 400 clamp(34px, 6vw, 44px)/1.15 var(--serif); letter-spacing: -.01em; margin: 24px 0 16px; text-wrap: balance; }
.intro p { font: 400 18px/1.6 var(--serif); color: var(--fg); margin: 0; max-width: 60ch; text-wrap: pretty; }
.list-head { font: 400 clamp(26px, 4vw, 32px)/1.2 var(--serif); letter-spacing: -.01em; color: var(--fg); margin: 80px 0 8px; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; }
.row .yr { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.row h2 { font: 400 18px/1.4 var(--serif); margin: 0; text-wrap: balance; }
.row h2 a { text-decoration: none; }
.row h2 a:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.row p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); text-wrap: pretty; }
.about { margin-top: 80px; display: grid; gap: 28px; }
.about h3 { font: 500 12px/1 var(--mark); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; }
.about p { margin: 0; font: 400 16px/1.65 var(--serif); color: var(--fg2); max-width: 62ch; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } .row .yr { padding: 0; } }

/* Project page */
.post-head { text-align: center; margin: 28px auto 36px; max-width: 640px; }
.post-head h1 { font: 600 30px/1.35 var(--serif); margin: 0 0 14px; text-wrap: balance; }
.post-head .by { font-size: 14px; color: var(--fg); }
.post-head .when { font-size: 14px; color: var(--muted); margin-top: 2px; }
.lead { font: 400 19px/1.6 var(--serif); margin: 0 0 8px; text-wrap: pretty; }
.prose h2 { font: 600 22px/1.35 var(--serif); margin: 48px 0 12px; }
.prose p { font: 400 17px/1.7 var(--serif); margin: 0 0 18px; text-wrap: pretty; }
.prose ul { margin: 0 0 18px; padding-left: 1.1em; font: 400 17px/1.7 var(--serif); }
.prose li { margin: 4px 0; padding-left: 4px; }
.prose li::marker { content: "▪  "; color: var(--faint); font-size: .8em; }
.prose strong { font-weight: 600; }

/* Results strip */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin: 28px 0 8px; }
.facts div { background: var(--bg); padding: 16px 16px 14px; }
.facts b { display: block; font: 600 24px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.facts span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }

/* Figures: light panel, hand-built SVG, numbered caption. */
.fig { margin: 36px 0 30px; }
.fig .panel { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 14px; overflow-x: auto; }
.fig svg { display: block; width: 100%; min-width: 560px; height: auto; font-family: var(--sans); }
.fig figcaption { counter-increment: fig; font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 10px; }
.fig figcaption::before { content: "Figure " counter(fig) ": "; font-weight: 500; color: var(--fg2); }
.prose { counter-reset: fig sn; }
/* Drawn on arrival: stroke dash animation, staggered by --i. */
.js-motion .fig .draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset 1.1s var(--ease) calc(var(--i, 0) * 120ms); }
.js-motion .fig .pop { opacity: 0; transform: translateY(6px); transform-box: fill-box; transition: opacity .6s var(--ease) calc(var(--i, 0) * 120ms), transform .6s var(--ease) calc(var(--i, 0) * 120ms); }
.js-motion .fig.in .draw { stroke-dashoffset: 0; }
.js-motion .fig.in .pop { opacity: 1; transform: none; }

/* Where: company, roles, years, and the span on a 2005–now track. */
.where { margin: 22px auto 0; max-width: 420px; text-align: left; border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px 12px; }
.where-k { font: 500 11px/1 var(--mark); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.where-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; }
.where-org { font: 600 18px/1.3 var(--serif); }
.where-yrs { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.where-roles { font-size: 14px; color: var(--fg2); margin-top: 2px; }
.track { position: relative; height: 6px; border-radius: 3px; background: #f1f1ef; margin-top: 12px; }
.track span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--fg); }
.axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--faint); margin-top: 5px; font-variant-numeric: tabular-nums; }
.js-motion .track span { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .35s; }
.js-motion .in .track span, .js-motion .track.in span { transform: none; }
/* Where list on the index */
.wlist { list-style: none; margin: 8px 0 0; padding: 0; }
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 6px 28px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.wrow:first-child { border-top: 0; }
.wrow b { display: block; font: 600 16px/1.35 var(--serif); }
.wrow small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 1px; }
.wrow .track { margin-top: 0; }
.wrow .yrs { font-size: 12.5px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .wrow { grid-template-columns: 1fr; } }
/* Diagram motion */
.spin { transform-box: view-box; transform-origin: var(--cx) var(--cy); }
.js-motion .fig.in .spin { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.js-motion .fig .grow { transform: scaleX(0); transform-box: fill-box; transform-origin: left; transition: transform 1.1s var(--ease) calc(var(--i, 0) * 160ms); }
.js-motion .fig.in .grow { transform: none; }
.back { display: inline-block; margin-top: 56px; font-size: 13.5px; color: var(--muted); }
/* Previous / next project */
.pn { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 13.5px; }
.pn a { color: var(--muted); text-decoration: none; max-width: 46%; }
.pn a:hover { color: var(--fg); }
.pn a:last-child { text-align: right; margin-left: auto; }
/* Diagram loops: a glowing tumor, beam-shaping jaws (only once drawn, and never for reduced motion) */
.js-motion .fig.in .glowpulse { animation: glowpulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes glowpulse { 50% { opacity: .55; transform: scale(.85); } }
.js-motion .fig.in .jawL { animation: jawL 5s ease-in-out infinite 1.2s; }
.js-motion .fig.in .jawR { animation: jawR 5s ease-in-out infinite 1.2s; }
.js-motion .fig.in .beam { animation: beam 5s ease-in-out infinite 1.2s; }
@keyframes jawL { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(7deg); } }
@keyframes jawR { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } }
@keyframes beam { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(2.4); } }

/* ── Home: quiet, one column, with T.K.'s framing ─────────────────────── */
.intro h1 { font: 600 clamp(22px, 3.4vw, 27px)/1.3 var(--serif); letter-spacing: 0; margin: 28px 0 10px; }
.intro .who { font: 500 12.5px/1.4 var(--mark); letter-spacing: .18em; text-transform: uppercase; color: var(--fg2); margin: 0; max-width: none; }
.intro .lead-line { font: 400 clamp(22px, 3.4vw, 27px)/1.3 var(--serif); color: var(--fg); margin: 30px 0 18px; }
.intro p + p, .intro ul + p { margin-top: 20px; }
.intro strong { font-weight: 600; }
.looks { list-style: none; margin: 10px 0 0; padding: 0; font: 400 18px/1.55 var(--serif); }
.looks li { position: relative; padding-left: 22px; margin: 4px 0; text-wrap: balance; }
.looks li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 10px; height: 1px; background: var(--faint); }
.looks.toc a { text-decoration-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.made { padding: 34px 0 32px; border-top: 1px solid var(--rule); scroll-margin-top: 64px; }
.list-head + .made { border-top: 0; padding-top: 14px; }
.made-k { font: 500 11px/1.5 var(--mark); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.made h3 { font: 400 25px/1.25 var(--serif); letter-spacing: -.01em; margin: 8px 0 12px; text-wrap: balance; }
.made .what { font: 400 17px/1.65 var(--serif); margin: 0 0 18px; color: var(--fg); text-wrap: pretty; }
.zo { margin: 0; display: grid; gap: 10px; }
.zo div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; }
.zo dt { font: 500 12px/1.75 var(--mark); letter-spacing: .06em; color: var(--fg); white-space: nowrap; }
.zo dd { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--fg2); text-wrap: pretty; }
.zo strong { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.also { margin: 16px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.also ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.also span { display: block; font: 500 11px/1 var(--mark); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.also a { color: var(--fg2); }
.also.earlier { padding-top: 22px; border-top: 1px solid var(--rule); margin-top: 0; }
.waxis { padding: 0 0 6px; }
.waxis .axis { margin-top: 0; }
.wlist .waxis + .wrow { border-top: 1px solid var(--rule); }
@media (max-width: 560px) { .zo div { grid-template-columns: 1fr; gap: 2px; } .waxis { display: none; } }
.made .role { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: -2px 0 14px; font-size: 14px; }
.made .role b { font-weight: 600; color: var(--fg); }
.made .role span { color: var(--muted); }
.earlier { padding-top: 26px; border-top: 1px solid var(--rule); }
.earlier h3 { font: 500 11px/1.5 var(--mark); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }
.earlier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.earlier li { font-size: 14px; line-height: 1.6; color: var(--fg2); }
.earlier p { font: 400 16px/1.65 var(--serif); color: var(--fg2); margin: 0; }
.earlier p a { color: var(--fg); text-decoration-color: var(--rule); text-underline-offset: 3px; }
.earlier li b { display: block; font: 600 17px/1.35 var(--serif); color: var(--fg); }
.earlier .inst { color: var(--muted); }
.earlier a { color: var(--fg2); }
.earlier.edu { margin-top: 30px; }
.earlier a.out { margin-left: 6px; font: 400 13px/1 var(--sans); color: var(--muted); text-decoration: none; vertical-align: 2px; }
.earlier a.out:hover { color: var(--fg); }
/* A slightly wider home column on desktop, so each line of the opening fits on one row (T.K.). */
@media (min-width: 900px) { .home main { max-width: calc(760px + 2 * var(--pad)); } }
.oneline { white-space: normal; }
@media (min-width: 760px) { .oneline { white-space: nowrap; } }
/* Back to the project list, top of every project page */
.backtop { display: inline-block; margin: 8px 0 0; font-size: 13.5px; color: var(--muted); text-decoration: none; }
.backtop:hover { color: var(--fg); }
/* Diagrams that keep moving once drawn: travelling dots and a slow pulse (never for reduced motion) */
.js-motion .fig.in .pulse { animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .travel { display: none; } }
/* The collimator inset: the open field reshapes as the two pairs of jaws move */
.js-motion .fig.in .field { animation: field 6s ease-in-out infinite 1.2s; transform-box: fill-box; transform-origin: center; }
@keyframes field { 0%, 100% { transform: scale(1, 1); } 33% { transform: scale(1.9, .6); } 66% { transform: scale(.6, 1.9); } }
/* The opening's three steps, with the page's two phases set in the gaps between them (T.K.: "kind of implied"):
   0 → 1 between steps 1 and 2, 1 → many between steps 2 and 3. Same face as the labels further down. */
.phases { display: grid; grid-template-columns: 70px minmax(0, 1fr); grid-template-rows: auto 0 auto 0 auto; column-gap: 14px; margin-top: 8px; }
.phases .st { grid-column: 2; font: 400 17px/1.6 var(--serif); padding: 7px 0; text-wrap: balance; }
.phases .st1 { grid-row: 1; } .phases .st2 { grid-row: 3; } .phases .st3 { grid-row: 5; }
/* each label sits on the zero-height row between two steps, so it is centred on the gap at every width */
.phases .pl { grid-column: 1; height: 0; display: flex; align-items: center; justify-self: start; font: 500 12px/1.2 var(--mark); letter-spacing: .06em; white-space: nowrap; color: var(--muted); }
.phases .pl1 { grid-row: 2; } .phases .pl2 { grid-row: 4; }
.phases + p { margin-top: 22px; }

/* no lone word on a last line (T.K.) */
p, li, dd, figcaption, .st { text-wrap: pretty; }
.prose .aside { margin: 40px 0 8px; padding: 6px 22px 10px; background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; }
.prose .aside h2 { margin-top: 16px; font: 500 11px/1.5 var(--mark); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
h1, h2, h3 { text-wrap: balance; }

/* accomplishments, stated as facts, right after the lead */
.prose .acc { font: 400 16.5px/1.65 var(--serif); color: var(--fg); border-left: 2px solid var(--fg); padding: 2px 0 2px 16px; margin: 22px 0 6px; }
/* before/after comparison */
.cmp { overflow-x: auto; margin: 18px 0 8px; }
.cmp table { width: 100%; border-collapse: collapse; font: 400 14px/1.5 var(--sans); }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.cmp thead th { font: 500 11px/1.4 var(--mark); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--fg); }
.cmp tbody th { font-weight: 600; color: var(--fg); white-space: nowrap; width: 1%; }
.cmp td:last-child { color: var(--fg); }
.cmp td { color: var(--fg2); }
/* parts list */
.spec { margin: 16px 0 8px; padding: 6px 18px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; }
.spec div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.spec div:last-child { border-bottom: 0; }
.spec dt { font: 500 11.5px/1.6 var(--mark); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.spec dd { margin: 0; font: 400 14.5px/1.55 var(--sans); color: var(--fg); }
@media (max-width: 560px) { .spec div { grid-template-columns: 1fr; gap: 2px; } }
.prose .acc-list { padding: 4px 0 4px 16px; }
.prose .acc-list div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 7px 0; }
.prose .acc-list dt { font: 500 11.5px/1.75 var(--mark); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prose .acc-list dd { margin: 0; font: 400 16px/1.55 var(--serif); color: var(--fg); }
@media (max-width: 560px) { .prose .acc-list div { grid-template-columns: 1fr; gap: 2px; } }

/* treatment-planning figure: beams added one at a time (static view shows the 3-beam plan) */
.fig .dose.st1, .fig .dose.st2 { opacity: 0; }
.js-motion .fig.in .dose.st1 { animation: st1 10s linear infinite .8s; }
.js-motion .fig.in .dose.st2 { animation: st2 10s linear infinite .8s; }
.js-motion .fig.in .dose.st3 { animation: st3 10s linear infinite .8s; }
@keyframes st1 { 0%, 29% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes st2 { 0%, 29% { opacity: 0; } 32%, 62% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes st3 { 0%, 62% { opacity: 0; } 65%, 97% { opacity: 1; } 100% { opacity: 0; } }
.prose .aside .fig.mini { margin: 16px 0 6px; }
.prose .aside .fig.mini .panel { background: #fff; }