/* Tokens: one accent (orange, with a darker text shade for small text), one type scale, one spacing scale */
:root {
  --bg:#f6eedf; --paper:#fbf6ec; --ink:#26375a; --body:#33415f; --mute:#5f6573; --acc:#d4532b; --acc-text:#ad3f1c; --rule:rgba(38,55,90,.2); --mark:rgba(212,83,43,.16); --ban-hi:#e9dcc3; --ban-lo:#26375a;
  --gh-l0:rgba(38,55,90,.08); --gh-l1:rgba(38,55,90,.28); --gh-l2:rgba(38,55,90,.5); --gh-l3:rgba(38,55,90,.75); --gh-l4:#d4532b;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1.0625rem; --fs-md:1.25rem; --fs-lg:1.5rem; --fs-xl:clamp(1.625rem, 3vw, 2rem); --fs-2xl:clamp(2.125rem, 4.4vw, 3rem);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --serif:"Newsreader", Georgia, serif; --sans:"Source Sans 3", -apple-system, "Segoe UI", sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace; --hand:"Caveat", cursive;
  --measure:66ch; --ease:160ms ease-out;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0b1a2f; --paper:#10223b; --ink:#d3dff4; --body:#bccae2; --mute:#8798b9; --acc:#e0663f; --acc-text:#f08a66; --rule:rgba(211,223,244,.18); --mark:rgba(224,102,63,.2); --ban-hi:#8aa1c9; --ban-lo:#13223b;
  --gh-l0:rgba(211,223,244,.08); --gh-l1:rgba(138,161,201,.35); --gh-l2:rgba(138,161,201,.6); --gh-l3:#8aa1c9; --gh-l4:#e0663f; color-scheme:dark; } }
:root[data-theme="dark"] {
  --bg:#0b1a2f; --paper:#10223b; --ink:#d3dff4; --body:#bccae2; --mute:#8798b9; --acc:#e0663f; --acc-text:#f08a66; --rule:rgba(211,223,244,.18); --mark:rgba(224,102,63,.2); --ban-hi:#8aa1c9; --ban-lo:#13223b;
  --gh-l0:rgba(211,223,244,.08); --gh-l1:rgba(138,161,201,.35); --gh-l2:rgba(138,161,201,.6); --gh-l3:#8aa1c9; --gh-l4:#e0663f; color-scheme:dark; }

* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body { margin:0; background:var(--bg); color:var(--body); font:400 var(--fs-base)/1.6 var(--sans); font-variant-numeric:lining-nums; }
strong, b { font-weight:600; }
p { margin:0 0 var(--s4); text-wrap:pretty; }
li { text-wrap:pretty; }
h1, h2, h3, h4 { font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.2; text-wrap:balance; margin:0; }
img { max-width:100%; height:auto; }

/* Links: underline in the accent; hover thickens and warms; focus gets a ring */
a { color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--acc); text-decoration-thickness:2px; text-underline-offset:3px; transition:color var(--ease), text-decoration-thickness var(--ease); }
a:hover { color:var(--acc-text); text-decoration-thickness:3px; }
:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
.skip { position:absolute; left:-9999px; top:var(--s2); background:var(--ink); color:var(--bg); padding:var(--s2) var(--s3); z-index:10; }
.skip:focus { left:var(--s4); }

/* One button style */
.btn { display:inline-flex; align-items:center; gap:var(--s2); font:600 var(--fs-sm)/1 var(--sans); color:var(--ink); text-decoration:none; border:1.5px solid var(--ink); background:transparent; padding:var(--s2) var(--s3); transition:background var(--ease), color var(--ease); }
.btn::after { content:"\2192"; font-weight:400; transition:transform var(--ease); }
.btn[target="_blank"]::after { content:"\2197"; }
.btn:hover { background:var(--ink); color:var(--bg); }
.btn:hover::after { transform:translateX(2px); }
.btn-row { display:flex; flex-wrap:wrap; gap:var(--s2); }

/* Layout: sticky garden sidebar + main column (+ eval board on Home) */
.page { max-width:1240px; margin:0 auto; padding:var(--s7) var(--s4) var(--s6); display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--s7); }
main { display:grid; grid-template-columns:minmax(0,1fr) 300px; column-gap:var(--s6); align-content:start; }
main.solo { grid-template-columns:minmax(0,1fr); }
.hero { grid-column:1; grid-row:1; }
.content { grid-column:1 / -1; grid-row:2; }
.board { grid-column:2; grid-row:1; }
@media (max-width:1100px) { main { grid-template-columns:minmax(0,1fr); } .hero, .content, .board { grid-column:1; grid-row:auto; } main .board { position:static; margin:var(--s5) 0 0; max-width:420px; } }
@media (max-width:760px) { .page { grid-template-columns:minmax(0,1fr); gap:var(--s5); padding-top:var(--s5); } }
main p, main li { max-width:var(--measure); }

/* Sidebar */
.side { position:sticky; top:0; align-self:start; max-height:100vh; overflow-y:auto; padding:var(--s1) var(--s1) var(--s5) 0; scrollbar-width:thin; }
.site { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.site a { white-space:nowrap; font:600 var(--fs-lg)/1.1 var(--serif); text-decoration:none; }
.icon { background:none; border:1.5px solid transparent; color:var(--ink); cursor:pointer; padding:var(--s1); line-height:0; transition:border-color var(--ease); }
.icon:hover { border-color:var(--ink); }
.icon svg { width:20px; height:20px; }
.icon .moon { display:none; }
:root[data-theme="dark"] .icon .sun { display:none; } :root[data-theme="dark"] .icon .moon { display:inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon .sun { display:none; } :root:not([data-theme="light"]) .icon .moon { display:inline; } }
.badge { display:inline-flex; align-items:center; gap:var(--s2); margin-top:var(--s3); font:500 var(--fs-xs)/1.4 var(--mono); color:var(--ink); border:1.5px solid var(--ink); padding:var(--s1) var(--s2); }
.badge::before { content:""; width:7px; height:7px; background:var(--acc); }
.side .nav-h { font:500 var(--fs-xs)/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:var(--s6) 0 var(--s2); }
.side ul { list-style:none; margin:0; padding:0; }
.side li { margin:var(--s1) 0; }
.side nav a { font-weight:400; text-decoration:none; }
.side nav a:hover { color:var(--acc-text); text-decoration:underline; text-decoration-color:var(--acc); }
.side .pages > li > a { font:600 var(--fs-md)/1.3 var(--serif); }
.side .pages a[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--acc); text-decoration-thickness:2px; }
.side .toc { margin:var(--s1) 0 var(--s2); padding-left:var(--s3); border-left:1.5px solid var(--rule); font-size:var(--fs-sm); }
.side .cta { margin-top:var(--s5); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2); }
@media (max-width:760px) {
  .side { position:static; max-height:none; overflow:visible; padding:0 0 var(--s4); border-bottom:2px solid var(--ink); }
  .side .nav-h { position:absolute; left:-9999px; }
  .side nav { margin-top:var(--s3); }
  .side .pages { display:flex; flex-wrap:wrap; gap:var(--s1) var(--s5); }
  .side .toc { display:none; }
  .side .cta { margin-top:var(--s3); flex-direction:row; flex-wrap:wrap; }
}

/* Page header / hero */
.banner { border:2px solid var(--ban-hi); outline:2px solid var(--ban-lo); outline-offset:-4px; display:block; width:100%; height:auto; aspect-ratio:32 / 9; image-rendering:pixelated; background:var(--ban-hi); }
.eyebrow, .welcome { font:500 var(--fs-lg)/1.1 var(--hand); color:var(--acc-text); margin:0 0 var(--s1); }
.welcome { font-size:1.75rem; color:var(--ink); margin-top:var(--s5); }
h1 { font-size:var(--fs-2xl); letter-spacing:-.012em; line-height:1.08; margin-bottom:var(--s3); }
.subline { font:600 var(--fs-md)/1.35 var(--serif); color:var(--body); margin:calc(-1 * var(--s1)) 0 var(--s2); }
.motto { font:500 var(--fs-sm)/1.4 var(--mono); color:var(--mute); letter-spacing:.06em; margin:0 0 var(--s5); }
.hero .btn-row { margin-top:var(--s5); }
.pagehead { margin-bottom:var(--s2); }
.pagehead .lede { font-size:var(--fs-md); }

/* Eval board */
.board { align-self:start; font:400 var(--fs-xs)/1.5 var(--mono); color:var(--ink); border:2px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); }
.board .bar { background:var(--ink); color:var(--bg); display:flex; justify-content:space-between; padding:var(--s1) var(--s3); letter-spacing:.06em; font-weight:500; }
.board .intro { font:400 var(--fs-xs)/1.45 var(--sans); color:var(--body); margin:0; padding:var(--s2) var(--s3); border-bottom:1px solid var(--ink); max-width:none; }
.board .grp { padding:var(--s2) var(--s3); border-top:1px solid var(--ink); }
.board .intro + .grp, .board .bar + .grp { border-top:none; }
.board .lab { color:var(--ink); font-weight:500; letter-spacing:.08em; display:flex; gap:6px; align-items:center; }
.board .lab span { color:var(--mute); font-weight:400; letter-spacing:0; order:2; }
.board .lab::after { content:""; flex:1; border-bottom:1px dotted var(--mute); }
.board dl { margin:0; }
.board .row { display:flex; gap:var(--s2); align-items:baseline; justify-content:space-between; padding:6px 0; border-bottom:1px dotted var(--rule); }
.board .row:last-child { border-bottom:0; padding-bottom:0; }
.board dt { font:600 var(--fs-sm)/1.3 var(--sans); color:var(--ink); }
.board dt small { display:block; font:400 var(--fs-xs)/1.4 var(--mono); color:var(--mute); margin-top:1px; }
.board dd { margin:0; color:var(--acc-text); white-space:nowrap; font:600 var(--fs-md)/1 var(--mono); }
.board .foot { border-top:1px solid var(--ink); padding:var(--s2) var(--s3); color:var(--mute); }
.board .foot a { font-weight:500; }

/* Sections: one rhythm */
.content > section, main.solo > section { padding-top:var(--s6); scroll-margin-top:var(--s4); }
main h2 { font-size:var(--fs-xl); margin-bottom:var(--s4); padding-bottom:var(--s2); border-bottom:2px solid var(--ink); }
main h3 { font-size:var(--fs-md); margin-bottom:var(--s1); }
main h4 { font-size:var(--fs-base); margin:var(--s4) 0 var(--s1); }
section:target > h2, section:target > h1 { background:linear-gradient(transparent 55%, var(--mark) 55%); }
.lede { color:var(--mute); }
ul.plain { padding-left:var(--s5); margin:var(--s2) 0 var(--s3); }
ul.plain li { margin:var(--s1) 0; }
ul.plain ul { padding-left:var(--s4); margin:var(--s1) 0 var(--s2); }
.meta { font:400 var(--fs-xs)/1.5 var(--mono); color:var(--mute); letter-spacing:.02em; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin:var(--s3) 0 0; padding:0; list-style:none; }
.tags li { font:400 var(--fs-xs)/1.5 var(--mono); color:var(--mute); border:1px solid var(--rule); padding:0 var(--s2); max-width:none; }
.inline-list { list-style:none; margin:var(--s1) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s1) 0; }
.inline-list li:not(:last-child)::after { content:"\00b7"; color:var(--acc); margin:0 var(--s2); font-weight:600; }

/* Stat strips: static final numbers, always mono */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); border:1.5px solid var(--ink); background:var(--paper); margin:var(--s3) 0 var(--s1); }
.stat { padding:var(--s2) var(--s3) var(--s3); border-right:1px dotted var(--mute); border-bottom:1px dotted var(--mute); margin:0 -1px -1px 0; }
.stat b { display:block; font:500 var(--fs-md)/1.3 var(--mono); color:var(--ink); }
.stat span { display:block; font-size:var(--fs-sm); line-height:1.35; }
.stat small { display:block; font:400 var(--fs-xs)/1.4 var(--mono); color:var(--mute); margin-top:2px; }

/* About + paper-framed photo */
.about { display:grid; grid-template-columns:minmax(0,1fr) 196px; gap:var(--s6); align-items:start; }
.profile { margin:var(--s1) 0 0; }
.profile .frame { background:var(--paper); border:1.5px solid var(--ink); padding:var(--s2) var(--s2) var(--s5); transform:rotate(-1.2deg); }
.profile img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; filter:saturate(.85) sepia(.06); }
.profile .frame span { display:block; text-align:center; font:500 1.125rem/1 var(--hand); color:var(--mute); margin-top:var(--s2); }
.profile figcaption { margin-top:var(--s4); font-size:var(--fs-sm); line-height:1.5; }
.profile .name { font:600 var(--fs-md)/1.3 var(--serif); color:var(--ink); display:block; }
.profile .links { display:flex; gap:var(--s3); margin-top:var(--s2); }
@media (max-width:600px) { .about { grid-template-columns:minmax(0,1fr); } .profile { max-width:196px; grid-row:1; margin-bottom:var(--s2); } }

/* Experience */
.role { padding-bottom:var(--s5); border-bottom:1px dotted var(--mute); margin-bottom:var(--s5); }
.role:last-of-type { border-bottom:0; margin-bottom:0; }
.role-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 var(--s4); align-items:baseline; }
.role .org { color:var(--ink); }
.impact-row + .impact-row { margin-top:var(--s5); }
.impact-row .meta { margin:0; }

/* Cards: one pattern for every project and product */
.cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s4); }
.cards:has(> .card:nth-child(2):last-child), .cards:has(> .card:nth-child(4):last-child) { grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:1100px) { .cards { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.cards > .card:nth-child(7):last-child { grid-column:1 / -1; }
@media (max-width:640px) { .cards, .cards:has(> .card:nth-child(2):last-child), .cards:has(> .card:nth-child(4):last-child) { grid-template-columns:minmax(0,1fr); } }
.card { border:1.5px solid var(--ink); background:var(--paper); padding:var(--s4); display:flex; flex-direction:column; transition:transform var(--ease), border-color var(--ease); scroll-margin-top:var(--s4); }
.card:hover, .card:focus-within { transform:translateY(-2px); border-color:var(--acc); }
.card:target { outline:3px solid var(--mark); outline-offset:3px; }
.card.wide { grid-column:1 / -1; }
.card .kicker { font:500 var(--fs-xs)/1.4 var(--mono); color:var(--mute); letter-spacing:.06em; margin:0 0 var(--s1); }
.card p { margin:var(--s1) 0 0; max-width:none; }
.card h3 { margin:0; }
.card .sub { font:400 var(--fs-xs)/1.4 var(--mono); color:var(--mute); letter-spacing:.02em; margin:2px 0 var(--s2); }
.card .tech { font-size:var(--fs-sm); color:var(--mute); }
.card .ml { display:block; font:500 var(--fs-xs)/1.4 var(--mono); color:var(--mute); letter-spacing:.08em; }
.card .metric { margin-top:var(--s3); padding-top:var(--s3); border-top:1px dotted var(--rule); font-size:var(--fs-sm); line-height:1.5; color:var(--body); }
.card .metric b { display:block; font:600 var(--fs-lg)/1.25 var(--serif); color:var(--acc-text); margin:2px 0 4px; }
.card .use { margin-top:var(--s2); font-size:var(--fs-sm); line-height:1.45; }
.card .evals { margin-top:var(--s3); padding-top:var(--s3); border-top:1px dotted var(--rule); font-size:var(--fs-sm); line-height:1.5; }
.card .evals div + div { margin-top:var(--s1); }
.card .evals b { font:500 var(--fs-xs)/1.4 var(--mono); color:var(--acc-text); letter-spacing:.06em; margin-right:6px; }
.card .btn-row { margin-top:auto; padding-top:var(--s4); }

/* GitHub activity */
.gh { border:1.5px solid var(--ink); background:var(--paper); padding:var(--s4); }
.gh-head { display:flex; justify-content:space-between; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s3); }
.gh-scroll { overflow-x:auto; }
.gh-cal { display:flex; flex-direction:column; gap:6px; min-width:640px; height:118px; }
.gh-months { display:grid; gap:3px; font:400 10px/1 var(--mono); color:var(--mute); height:12px; }
.gh-months span { overflow:visible; white-space:nowrap; }
.gh-grid { display:grid; grid-template-rows:repeat(7,auto); grid-auto-flow:column; gap:3px; }
.gh-cell { width:100%; aspect-ratio:1/1; background:var(--gh-l0); }
.gh-cell[data-l="1"] { background:var(--gh-l1); } .gh-cell[data-l="2"] { background:var(--gh-l2); }
.gh-cell[data-l="3"] { background:var(--gh-l3); } .gh-cell[data-l="4"] { background:var(--gh-l4); }
.gh-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px dotted var(--mute); margin-top:var(--s4); }
.gh-stats > div { padding:var(--s2) var(--s3); }
.gh-stats > div + div { border-left:1px dotted var(--mute); }
.gh-stats b { display:block; font:500 var(--fs-md)/1.3 var(--mono); color:var(--ink); }
.gh-stats span { font-size:var(--fs-sm); }
@media (max-width:600px) { .gh-stats { grid-template-columns:minmax(0,1fr); } .gh-stats > div + div { border-left:0; border-top:1px dotted var(--mute); } }

/* Lists: education, certs, skills */
.list2 { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:0 var(--s6); list-style:none; padding:0; margin:0; }
@media (max-width:640px) { .list2 { grid-template-columns:minmax(0,1fr); } }
.list2 li { padding:var(--s2) 0 var(--s3); border-bottom:1px dotted var(--mute); }
.list2 .t { color:var(--ink); font-weight:600; display:block; }
.skills { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s4) var(--s6); }
@media (max-width:640px) { .skills { grid-template-columns:minmax(0,1fr); } }
.skills h3 { font-size:var(--fs-base); margin-bottom:var(--s1); }
.skills p { margin:0; }
.sub-h { margin-top:var(--s6); }
.skilltable { margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--s4); }
.skilltable > div { border:1.5px solid var(--ink); background:var(--paper); padding:var(--s3) var(--s4) var(--s4); transition:border-color var(--ease), transform var(--ease); }
.skilltable > div:hover { border-color:var(--acc); transform:translateY(-2px); }
.skilltable > div.hl { border-color:var(--acc); box-shadow:3px 3px 0 var(--acc); }
.skilltable > div.wide { grid-column:1 / -1; }
.skilltable dt { display:flex; justify-content:space-between; align-items:baseline; font:500 var(--fs-xs)/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); padding-bottom:var(--s2); margin-bottom:var(--s3); border-bottom:1px dotted var(--mute); }
.skilltable dt span { color:var(--acc-text); }
.skilltable dd { margin:0; }
.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.chips li { font:400 var(--fs-sm)/1.5 var(--sans); color:var(--ink); background:var(--bg); border:1px solid var(--rule); padding:1px var(--s2); max-width:none; }
.hl .chips li { border-color:var(--acc); }
.nb { white-space:nowrap; }

/* Writing, contact, footer */
.entry { margin-bottom:var(--s4); }
.entry a { font:600 var(--fs-lg)/1.3 var(--serif); text-decoration-thickness:1.5px; }
.note { font:500 1.125rem/1.2 var(--hand); color:var(--mute); display:block; margin-top:var(--s1); }
footer { max-width:1240px; margin:0 auto; padding:0 var(--s4) var(--s7); }
.foot-grid { border-top:2px solid var(--ink); padding-top:var(--s5); display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5); }
@media (max-width:760px) { .foot-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .foot-grid .brand { grid-column:1 / -1; } }
footer .nav-h { font:500 var(--fs-xs)/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0 0 var(--s2); }
footer ul { list-style:none; margin:0; padding:0; font-size:var(--fs-sm); }
footer li { margin:var(--s1) 0; }
footer li a { font-weight:400; }
footer .brand .n { font:600 var(--fs-md)/1.3 var(--serif); color:var(--ink); }
footer .brand p { margin:var(--s1) 0 0; color:var(--mute); font-size:var(--fs-sm); }
footer .copy { margin-top:var(--s5); font:500 1.125rem/1 var(--hand); color:var(--mute); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } .card:hover, .card:focus-within { transform:none; } }

@media print {
  :root { --bg:#fff; --paper:#fff; --ink:#111; --body:#222; --mute:#555; }
  .side, .board, .banner, .skip, .icon, .btn-row, footer nav, .gh-scroll { display:none !important; }
  .page { display:block; padding:0; max-width:none; }
  main, main.solo { display:block; }
  .card, .stats { break-inside:avoid; }
  .card:hover { transform:none; }
  a { text-decoration:none; color:inherit; }
  body { font-size:11pt; }
}

/* Home: bio list, sign-off, fun arrivals board */
.visit { padding-left:var(--s5); margin:0 0 var(--s3); }
.visit li { margin:var(--s1) 0; }
.sign { font:500 1.6rem/1 var(--hand); color:var(--ink); margin:var(--s3) 0 0; }
.vh { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.board.fun { font:500 var(--fs-sm)/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.board.fun .bar { font-size:var(--fs-sm); }
.board.fun .row { border:0; padding:var(--s1) 0 0; display:flex; gap:6px; align-items:baseline; }
.board.fun .row .k { white-space:nowrap; display:flex; align-items:center; gap:6px; }
.board.fun .row .k::before { content:""; width:8px; height:8px; border:1.5px solid var(--mute); flex:none; }
.board.fun .row.hot .k { color:var(--acc-text); }
.board.fun .row.hot .k::before { background:var(--acc); border-color:var(--acc); }
.board.fun .row::after { content:""; order:1; flex:1; border-bottom:1px dotted var(--mute); transform:translateY(-4px); }
.board.fun .row .v { order:2; white-space:nowrap; color:var(--mute); }
.board.fun .row.hot .v { color:var(--acc-text); }
.board.fun .foot { display:flex; align-items:center; gap:6px; color:var(--ink); }
.board.fun .sq { width:8px; height:8px; background:var(--acc); }

/* Hover previews, like a digital garden */
.pop { position:absolute; z-index:20; width:min(440px, calc(100vw - 32px)); max-height:340px; overflow:hidden; background:var(--bg); border:1px solid var(--ink); padding:var(--s5) var(--s5) 0; box-shadow:0 12px 32px rgba(0,0,0,.18); opacity:0; transform:translateY(4px); transition:opacity var(--ease), transform var(--ease); pointer-events:none; font-size:var(--fs-sm); }
.pop.on { opacity:1; transform:none; }
.pop::after { content:""; position:absolute; left:0; right:0; bottom:0; height:56px; background:linear-gradient(transparent, var(--bg)); }
.pop .pt { font:600 var(--fs-xl)/1.15 var(--serif); color:var(--ink); margin:0; }
.pop .pn { font:500 1.15rem/1.2 var(--hand); color:var(--mute); margin:var(--s1) 0 var(--s3); }
.pop .ptag { display:inline-block; font:600 var(--fs-xs)/1 var(--sans); color:var(--acc-text); background:var(--mark); padding:6px var(--s2); margin-bottom:var(--s3); }
.pop .pb > * { max-width:none; }
.pop .pb h1, .pop .pb h2, .pop .pb .kicker, .pop .pb .eyebrow, .pop .pb .btn-row, .pop .pb canvas, .pop .pb .tags, .pop .pb .welcome, .pop .pb .stats { display:none; }
.pop .pb h3, .pop .pb .sub { display:none; }
.pop .pb p, .pop .pb li { font-size:var(--fs-sm); }
.pop .pb .card { border:0; padding:0; background:none; transform:none; }
@media (hover:none) { .pop { display:none; } }

/* Justified prose: body paragraphs and bullet lists line up on both edges */
main :is(p, li) { text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
main :is(.card, .board, .tags, .chips, .list2, .stats, .gh, .skilltable, .btn-row) :is(p, li), main :is(.motto, .subline, .sign, .meta, .welcome, .eyebrow, .note) { text-align:left; hyphens:manual; -webkit-hyphens:manual; }

/* One board style everywhere: definition-list boards (About, Projects) match the Home arrivals board */
.board.fun dl { margin:0; }
.board.fun dl .row { display:flex; align-items:baseline; gap:6px; border:0; padding:var(--s1) 0 0; }
.board.fun dl .row::after { content:""; order:1; flex:1; border-bottom:1px dotted var(--mute); transform:translateY(-4px); }
.board.fun dt { order:0; display:grid; grid-template-columns:8px auto; column-gap:6px; align-items:center; font:inherit; color:var(--ink); }
.board.fun dt::before { content:""; width:8px; height:8px; border:1.5px solid var(--mute); box-sizing:border-box; }
.board.fun dt small { grid-column:2; font:inherit; font-size:var(--fs-xs); color:var(--mute); letter-spacing:.04em; margin:0; }
.board.fun dd { order:2; font:inherit; color:var(--mute); white-space:nowrap; }
.board.fun .lab span { font:inherit; letter-spacing:inherit; color:var(--mute); }
.board.fun .intro, .board.fun .foot { font:500 var(--fs-xs)/1.5 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--mute); }
.board.fun .foot a { color:var(--ink); }

/* Important things in orange: key numbers in prose, board values, card headline metrics */
.hl { color:var(--acc-text); font-weight:600; }
.board.fun .row .v, .board.fun dd { color:var(--acc-text); }

/* Work: each role in two columns (title, dates, org and tags on the left; outcomes on the right) */
.role { display:grid; grid-template-columns:240px minmax(0,1fr); column-gap:var(--s6); }
.role-side { align-self:start; position:sticky; top:var(--s4); }
.role-side .role-head { display:block; }
.role-side .role-head h3 { margin-bottom:var(--s1); }
.role-side .org { margin-top:var(--s1); }
.role-side .tags { margin-top:var(--s3); }
.role-body > :first-child { margin-top:0; }
.role-body p, .role-body li { max-width:none; }
@media (max-width:900px) { .role { grid-template-columns:minmax(0,1fr); } .role-side { position:static; margin-bottom:var(--s3); } }

/* Projects: test results as a short horizontal strip under the heading, so the cards start higher.
   10 results: 5 columns on wide screens (mistakes row, then accuracy and real-use row), 2 columns below 1100px.
   Cell lines come from a 1px grid gap over the rule colour, so no nth-child border maths is needed. */
.board.strip { grid-column:1 / -1; grid-row:2; margin-top:var(--s5); max-width:none; }
main:has(.board.strip) .content { grid-row:3; }
.board.strip dl { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:1px; background:var(--rule); margin:0; }
.board.strip dl .row { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; padding:var(--s2) var(--s3); background:var(--paper); }
.board.strip dl .row::after, .board.strip dt::before { display:none; }
.board.strip dt { display:block; font-size:var(--fs-xs); line-height:1.3; letter-spacing:.04em; overflow-wrap:anywhere; }
.board.strip dt small { display:block; }
.board.strip dd { order:-1; color:var(--acc-text); font-size:var(--fs-md); line-height:1.1; }
.board.strip .foot { font-size:var(--fs-xs); }
@media (max-width:1100px) { .board.strip dl { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.board.strip .foot a { white-space:nowrap; }
.board.strip .foot { display:block; }

/* Projects: featured cards full width with the proof beside the pitch; the rest size to their content */
#projects .cards { align-items:start; }
.card.feature { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:var(--s6); align-items:start; }
.card.feature .fl { display:flex; flex-direction:column; }
.card.feature .fr > :first-child { margin-top:0; padding-top:0; border-top:0; }
.card.feature .btn-row { margin-top:var(--s3); padding-top:0; }
@media (max-width:760px) { .card.feature { grid-template-columns:minmax(0,1fr); } .card.feature .fr > :first-child { margin-top:var(--s3); padding-top:var(--s3); border-top:1px dotted var(--rule); } }