/* Layout: hanging section labels in a left margin beside a 640px reading column, stacked on phones. Light by default; dark only when chosen in the footer. */
:root {
  --bg: #ffffff; --fg: #222222; --muted: #666666; --faint: #9a9a9a; --rule: #e8e8e8; --accent: #1764c0; --wash: #f4f4f4; --uline: #c9dbf1;
  color-scheme: light;
  --tint: color-mix(in srgb, var(--accent) 9%, transparent);
  --mark: color-mix(in srgb, var(--accent) 16%, transparent);
  --serif: "Literata", Georgia, serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
:root[data-theme="dark"] {
  --bg: #151515; --fg: #e4e4e4; --muted: #a0a0a0; --faint: #6c6c6c; --rule: #2a2a2a; --accent: #80b3f0; --wash: #1d1d1d; --uline: #2f4767; color-scheme: dark }

* { box-sizing: border-box }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .25s, color .25s }
a { color: var(--accent); text-decoration-line: underline; text-decoration-color: var(--uline); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s, color .15s, background .15s }
a:hover { text-decoration-color: currentColor }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px }
ul { list-style: none; margin: 0; padding: 0 }
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; animation: none !important } }

/* Page */
body { margin: 0 }
img { max-width: 100% }
.page { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 72px 88px }
.wrap { max-width: 860px; margin: 0 auto }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: end; padding-bottom: 40px; border-bottom: 1px solid var(--rule) }
.hero h1 { font: 500 clamp(36px, 6.4vw, 52px)/1.04 var(--serif); letter-spacing: -.022em; margin: 0 0 14px; text-wrap: balance }
.role { font-size: 15px; color: var(--muted); margin: 0 }
.role b { color: var(--fg); font-weight: 500 }
.icons { display: flex; gap: 6px; margin-top: 22px; margin-left: -9px }
.icons a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; text-decoration: none }
.icons a:hover { background: var(--wash) }
.gh { fill: #181717 }
:root[data-theme="dark"] .gh { fill: #ffffff }
.icons svg { width: 19px; height: 19px; display: block }
.toast { font: 12px var(--mono); color: var(--accent); margin-top: 6px; min-height: 1.2em }


/* Sections with hanging labels */
.sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 44px }
@media (min-width: 880px) { .sec { grid-template-columns: 10rem minmax(0, 640px); gap: 0 3rem } }
.sec > h2 { font: 500 11.5px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0; padding-top: 6px; display: flex; gap: 8px; align-items: baseline }
.sec > h2::before { content: ""; width: 14px; height: 1px; background: var(--accent); transform: translateY(-3px); flex: none }
.body { font: 400 17px/1.62 var(--serif); min-width: 0 }
.body p { margin: 0 0 14px }

.now { background: var(--tint); border-radius: 10px; padding: 16px 18px; margin-top: 6px; font-family: var(--sans); font-size: 14.5px; display: grid; gap: 2px }
.now .k { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 7px; margin-bottom: 6px }
.now .k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--mark) }
.now b { font-weight: 500 }
.now span { color: var(--muted) }

.pub { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0 14px; padding: 10px 0 }
.pub + .pub { border-top: 1px solid var(--rule) }
.yr { font: 400 12.5px/1 var(--mono); color: var(--faint); padding-top: 7px; font-variant-numeric: tabular-nums }
.pub .t { display: block; font-weight: 500; text-wrap: pretty }
.pub .t a { color: var(--fg); text-decoration-color: var(--uline) }
.pub .t a:hover { color: var(--accent) }
.pub .v { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 5px; font: 400 13px/1.4 var(--sans); color: var(--muted) }
.chip { font: 500 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--tint); border-radius: 4px; padding: 4px 6px }
.pl a { font: 400 12px var(--mono); }
.pl a::before { content: "↗ "; color: var(--faint) }

.oss { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 12px; padding: 9px 0 }
.oss svg { width: 15px; height: 15px; margin-top: 6px; color: var(--accent) }
.oss .t { font-weight: 500 }
.oss .repo { font: 400 12px/1.5 var(--mono); color: var(--faint); display: block; overflow-wrap: anywhere }
.oss .d { color: var(--muted); font-size: 15.5px }

.tl { position: relative; padding-left: 22px }
.tl::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--rule) }
.job { position: relative; padding: 6px 0 16px }
.job::before { content: ""; position: absolute; left: -22px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--faint) }
.job.cur::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--mark) }
.job .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; align-items: baseline }
.job .org { font-weight: 600 }
.job .ti { font-style: italic; color: var(--muted) }
.job .when { font: 400 12.5px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums }
.job .d { color: var(--muted); font-size: 15.5px; margin-top: 2px }
.parts { margin-top: 8px; display: grid; gap: 8px; font-size: 15.5px }
.parts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding-left: 12px; border-left: 2px solid var(--rule) }
.parts .pt { font-weight: 500 }
.parts .pd { grid-column: 1 / -1; color: var(--muted); font-size: 15px }

.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; padding: 6px 0; font-size: 16px }
.row .d { color: var(--muted); font-size: 15px; grid-column: 1 / -1 }
.row .m { font: 400 12.5px var(--mono); color: var(--faint); padding-top: 4px; white-space: nowrap }

.foot { margin-top: 72px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font: 12.5px var(--mono); color: var(--faint) }
.foot i { font: italic 13px var(--serif) }
.theme { font: inherit; color: var(--faint); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px }
.theme:hover { color: var(--fg) }