/* 2026.2 mock v3 — simple: last jobs + last projects on home, full lists on sub-pages. Placeholder content. */
:root{
  --bg:#0f172a; --panel:rgba(30,41,59,.5); --text:#94a3b8; --head:#e2e8f0; --muted:#64748b; --line:#334155; --accent:#5eead4;
  --ai:#8b35ff; --arch:#168cff; --infra:#00bfc0; --dev:#ff7434; --fund:#9fb2ca; --team:#f5b400; --prod:#f43f70;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --tint:28%;   /* area colours stay quiet: only a thin line, mostly see-through */
}
html[data-theme=light]{--bg:#eef2f5;--panel:rgba(40,70,100,.06);--text:#475569;--head:#0f172a;--muted:#64748b;--line:#cfd8e0;--accent:#0d9488;--tint:40%}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 Inter,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .3s}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:48px 24px}
@media(min-width:1024px){.wrap{display:flex;justify-content:space-between;gap:16px;padding:0 96px}}

/* left */
.left{display:flex;flex-direction:column}
@media(min-width:1024px){.left{position:sticky;top:0;height:100vh;width:46%;padding:96px 0 48px}}
.name{margin:0;font-size:clamp(36px,5vw,50px);line-height:1.05;font-weight:800;letter-spacing:-1.5px;color:var(--head)}
.name a:hover{color:var(--accent)}
.name a{display:inline-flex;align-items:center;gap:.32em}
.face{flex:none;width:1.5em;height:1.5em;display:block}.face img{width:100%;height:100%;object-fit:contain}
.face .d,html[data-theme=dark] .face .l{display:none}
html[data-theme=dark] .face .d,.face img.both{display:block}
.role{margin:12px 0 0;font-size:20px;font-weight:600;color:var(--head)}
.tagline{margin:16px 0 0;max-width:320px}
.nav{display:none;margin-top:56px}
@media(min-width:1024px){.nav{display:block}}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:flex;align-items:center;padding:10px 0;font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.nav a .ind{display:inline-block;height:1px;width:32px;margin-right:16px;background:var(--muted);transition:width .25s,background .25s}
.nav a:hover,.nav a.active{color:var(--head)}.nav a:hover .ind,.nav a.active .ind{width:64px;background:var(--head)}
.back{display:inline-flex;gap:8px;margin-top:40px;font-weight:600;color:var(--head)}.back:hover{color:var(--accent)}
.tools{display:flex;align-items:center;gap:10px;margin-top:28px}
@media(min-width:1024px){.tools{margin-top:auto}}
.pill-btn{font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.6px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 10px;cursor:pointer}
.pill-btn:hover{color:var(--head);border-color:var(--muted)}

/* quiet filter (sub-pages only) */
.filter{margin-top:24px}
.chips{display:flex;flex-wrap:wrap;gap:6px;max-width:340px;margin:0;padding:0;list-style:none}
.chip{font:500 11.5px/20px var(--mono);padding:1px 10px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text);cursor:pointer}
.chip:hover{color:var(--head);border-color:var(--muted)}
.chip[aria-pressed=true]{color:var(--head);border-color:var(--head)}
.chip i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px;background:color-mix(in srgb,var(--c,var(--muted)) 70%,transparent)}
.chip[aria-pressed=true] i{background:var(--c,var(--head))}

/* right */
.right{padding-top:24px}
@media(min-width:1024px){.right{width:54%;padding:96px 0}}
section{margin-bottom:104px;scroll-margin-top:96px}
.label{position:sticky;top:0;z-index:5;margin:0 -24px 20px;padding:18px 24px;font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--head);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media(min-width:1024px){.home .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0}}
.pagehead{margin:0 0 8px;color:var(--head);font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-1px}
.pagelead{margin:0 0 40px}
.about p{margin:0 0 16px}
.claim{color:var(--head);border-bottom:1px dotted color-mix(in srgb,var(--head) 40%,transparent);cursor:help;position:relative}
.claim .tip{position:absolute;left:0;bottom:calc(100% + 8px);width:max-content;max-width:260px;padding:7px 10px;border-radius:8px;font:12px/1.45 var(--mono);color:var(--head);
  background:color-mix(in srgb,var(--bg) 90%,var(--head));border:1px solid var(--line);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;pointer-events:none;z-index:6}
.claim .tip span{display:block;color:var(--muted)}
@media(hover:hover){.claim:hover .tip{opacity:1;transform:none}}

/* cards: one thin, quiet colour line on top; no tags */
.list{list-style:none;margin:0;padding:0}
.list>li{margin-bottom:22px}
.card{position:relative;display:grid;gap:6px;padding:20px 18px 16px;border-radius:10px;transition:background .25s,opacity .3s}
@media(min-width:640px){.card{grid-template-columns:2fr 6fr;gap:28px}}
.card:hover{background:var(--panel)}
.line{position:absolute;left:18px;right:18px;top:0;height:1px;display:flex;gap:2px}
.line i{display:block;height:1px;background:color-mix(in srgb,var(--c) var(--tint),transparent);transition:background .3s}
.card:hover .line i{background:color-mix(in srgb,var(--c) 70%,transparent)}
.meta{font:500 11.5px var(--mono);letter-spacing:.3px;color:var(--muted);padding-top:3px}
.card h3{margin:0;font-size:16px;font-weight:500;line-height:1.35;color:var(--head)}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:10px}
.card h3 .arrow{display:inline-block;font-size:14px;transition:transform .2s}
.card:hover h3{color:var(--accent)}.card:hover h3 .arrow{transform:translate(3px,-3px)}
.card h3 .sub{color:var(--muted);font-weight:400}
.card .prev{font:500 12px var(--mono);color:var(--muted);margin-top:2px}
.card p{margin:6px 0 0;font-size:14px;line-height:1.6;position:relative;z-index:1}
.stack{margin-top:8px;font:500 11.5px var(--mono);color:var(--muted)}
.more{display:inline-flex;gap:8px;margin-top:6px;font-weight:600;color:var(--head)}.more .a{transition:transform .2s}.more:hover{color:var(--accent)}.more:hover .a{transform:translateX(5px)}
.year{margin:34px 0 12px;font:600 12px var(--mono);letter-spacing:1px;color:var(--muted)}
.foot{font-size:13px;color:var(--muted);padding-bottom:56px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* lab link */
.labcard{display:grid;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:12px;position:relative;overflow:hidden;transition:border-color .25s,background .25s}
.labcard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.0;transition:opacity .4s;
  background:radial-gradient(60% 120% at 0% 0%,color-mix(in srgb,var(--ai) 18%,transparent),transparent 60%),radial-gradient(60% 120% at 100% 100%,color-mix(in srgb,var(--infra) 14%,transparent),transparent 60%)}
.labcard:hover{border-color:var(--muted);background:var(--panel)}.labcard:hover::before{opacity:1}
.labcard .lk{font:600 12px var(--mono);letter-spacing:.4px;color:var(--accent)}
.labcard .lt{color:var(--head);font-weight:500}
.labcard .ld{font-size:14px}
.nav a.ext{opacity:.8}
/* real highlights under the summary */
.card ul.hl{margin:8px 0 0;padding-left:18px;font-size:13.5px;line-height:1.55;position:relative;z-index:1}
.card ul.hl li{margin:3px 0}
.card ul.hl li::marker{color:var(--muted)}
.fnote{margin:-20px 0 28px;font:500 12.5px var(--mono);color:var(--muted)}.fnote b{color:var(--head)}.fnote a{color:var(--accent)}
.list>li[hidden],.year[hidden]{display:none}
.role-sub{margin:4px 0 0;font:500 13px var(--mono);letter-spacing:.3px;color:var(--muted)}

.langs b{color:var(--head)}.langs a{color:var(--muted)}.langs a:hover{color:var(--head)}
.pending{font-size:13px;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text)}
.about a{color:var(--head);font-weight:500;border-bottom:1px solid color-mix(in srgb,var(--head) 30%,transparent)}.about a:hover{color:var(--accent)}
.card h3 a{color:inherit}
.skip{position:absolute;left:-999px;top:12px;background:var(--accent);color:#0f172a;padding:8px 14px;border-radius:8px;z-index:50}.skip:focus{left:12px}

/* ================= 2026.2 build tweaks ================= */
/* Feature Smith: small grey line with a tooltip */
.smith{position:relative;display:inline-block;margin:10px 0 0;font:500 13px var(--mono);letter-spacing:.3px;color:var(--muted);cursor:help;outline:none;z-index:30;border-bottom:1px dotted color-mix(in srgb,var(--muted) 60%,transparent)}
.smith .tip{position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:max-content;max-width:260px;padding:8px 11px;border-radius:8px;
  font:12px/1.5 var(--mono);color:var(--head);background:color-mix(in srgb,var(--bg) 90%,var(--head));border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.18);
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .15s,transform .15s}
.smith:hover .tip,.smith:focus-visible .tip,.smith.on .tip{opacity:1;transform:none}
/* tool buttons: text on desktop, round icons on phones */
.tools .pill-btn{display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.tools .ico{display:none}
.tools .pill-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.langs .txt b{color:var(--head)}.langs:hover .txt{color:var(--head)}
@media(max-width:1023px){
  .left{position:relative}
  .tools{position:absolute;top:0;right:0;margin:0;gap:8px}
  .tools .pill-btn{width:34px;height:34px;padding:0;border-radius:50%;justify-content:center;font-size:11px;font-weight:700}
  .tools .txt{display:none}.tools .ico{display:inline-flex}
  .name{padding-right:124px}
  .face{width:1.9em;height:1.9em}
}
/* section header "all N →" button: phone only (the label is hidden on desktop) */
.label{display:flex;align-items:center;justify-content:space-between;gap:12px}
.label-btn{font:600 11px/1 var(--mono);letter-spacing:.4px;text-transform:none;color:var(--head);border:1px solid var(--line);border-radius:999px;padding:7px 11px}
.label-btn:hover{border-color:var(--muted);color:var(--accent)}
@media(max-width:1023px){ .home section > .more{display:none} }
/* company name can link to that role's projects (independent contractor → #/filter/contract) */
.card h3 .sub a{position:relative;z-index:1;color:inherit;border-bottom:1px dotted color-mix(in srgb,var(--muted) 60%,transparent)}.card h3 .sub a:hover{color:var(--accent)}
/* soft glow under the colour line: on hover (desktop) and on the card in the middle of the screen (phones, .focus set by site.js) */
.line{height:150px;overflow:hidden;align-items:flex-start;pointer-events:none}.line i{position:relative}
.line i::after{content:"";position:absolute;left:-25%;right:-25%;top:1px;height:150px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(ellipse 70% 100% at 50% 0%,color-mix(in srgb,var(--c) 18%,transparent),transparent 75%)}
.card:hover .line i::after,.card.focus .line i::after{opacity:1}
.card.focus{background:var(--panel)}
.card.focus .line i{background:color-mix(in srgb,var(--c) 70%,transparent)}
/* phones: experience shows the summary only; "more" (or a tap on the card) opens the bullets */
.hl-more{display:none}
@media(max-width:1023px){
  .card ul.hl{display:none}
  .card.open ul.hl{display:block}
  .hl-more{display:inline-block;position:relative;z-index:1;margin-top:6px;padding:0;border:0;background:none;font:500 11.5px var(--mono);color:var(--muted);cursor:pointer}
  .card.open .hl-more{display:none}
}
/* lab not live yet: the button shows "Coming soon" (site.json labSoon) */
.pill-btn.soon{position:relative;cursor:help}
.pill-btn.soon .tip{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:30;width:max-content;padding:6px 10px;border-radius:8px;font:500 11.5px/1.4 var(--mono);letter-spacing:.2px;text-transform:none;
  color:var(--head);background:color-mix(in srgb,var(--bg) 90%,var(--head));border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.18);
  opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity .15s,transform .15s}
.pill-btn.soon:hover .tip,.pill-btn.soon:focus-visible .tip,.pill-btn.soon.on .tip{opacity:1;transform:translate(-50%,0)}
.claim.soon .tip{width:max-content}
@media(max-width:1023px){ .pill-btn.soon .tip{left:auto;right:0;bottom:auto;top:calc(100% + 8px);transform:translateY(-4px)} .pill-btn.soon:hover .tip,.pill-btn.soon:focus-visible .tip,.pill-btn.soon.on .tip{transform:none} }
/* phones: once the header scrolls away, the name stays on the left edge as a faint vertical watermark */
.mark{display:none}
@media(max-width:1023px){
  .mark{display:block;position:fixed;left:-2px;bottom:24px;z-index:6;pointer-events:none;user-select:none;writing-mode:vertical-rl;transform:rotate(180deg);
    font-size:56px;font-weight:800;letter-spacing:-1px;line-height:1;white-space:nowrap;color:var(--head);opacity:0;transition:opacity .5s}
  body.scrolled .mark{opacity:.06}
}
/* one project page */
.project .pline{position:relative;height:1px;margin:0 0 32px}
.project .pline .line{left:0;right:0}
.project .pline .line i{background:color-mix(in srgb,var(--c) 70%,transparent)}
.project .pline .line i::after{opacity:.8}
.pmeta{margin:0 0 6px;font:500 12px var(--mono);color:var(--muted)}.pmeta a{color:inherit;border-bottom:1px dotted color-mix(in srgb,var(--muted) 60%,transparent)}.pmeta a:hover{color:var(--accent)}
.hero{margin:0 0 28px}
.pvideo{margin:8px 0 32px}.pvideo video{display:block;width:100%;max-width:540px;height:auto;border-radius:12px;border:1px solid var(--line);background:#eef2f5}
.pvideo figcaption{margin-top:12px;max-width:540px;font-size:15px;line-height:1.6;color:var(--text)}.pvideo figcaption strong{color:var(--head)}
.hero img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--panel)}
.project .plead{font-size:17px;color:var(--head);margin:0 0 18px}
.project p{max-width:62ch}
.project .stack{margin:24px 0 8px}
.project .pagehead{line-height:1.15}
/* job icons under the dates (desktop) */
.jicon{display:block;margin-top:14px;width:120px;max-width:100%}
.jicon img{display:block;width:100%;height:auto;opacity:.85;transition:opacity .25s}
.card:hover .jicon img,.card.focus .jicon img{opacity:1}
.jicon .d,html[data-theme=dark] .jicon .l{display:none}
html[data-theme=dark] .jicon .d,.jicon img.both{display:block}
/* phones: the icon becomes a faint watermark on the card's right side, behind the text */
@media(max-width:639px){
  .card{isolation:isolate}
  .jicon{position:absolute;top:34px;right:6px;z-index:-1;width:132px;margin:0;pointer-events:none}
  .jicon img{opacity:.13;-webkit-mask-image:linear-gradient(to left,#000 45%,transparent);mask-image:linear-gradient(to left,#000 45%,transparent)}
  .card:hover .jicon img,.card.focus .jicon img{opacity:.2}
}
code{font:500 .86em var(--mono);color:var(--head);background:color-mix(in srgb,var(--line) 45%,transparent);padding:1px 5px;border-radius:4px}
/* project page: theme-aware icon on top, the photo after the intro */
.hero.icon img{border:0;border-radius:0;background:none}
.hero.icon .d,html[data-theme=dark] .hero.icon .l{display:none}
html[data-theme=dark] .hero.icon .d,.hero.icon img.both{display:block}
.photo{margin:8px 0 28px}
.photo img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.photo figcaption{margin-top:8px;font:500 12px var(--mono);color:var(--muted)}
.card.linked{cursor:pointer}
/* structured project pages */
.psec{margin:44px 0 0;scroll-margin-top:24px}
.psec.intro{margin-top:8px}
.psec h2{margin:0 0 6px;font-size:19px;font-weight:700;color:var(--head);letter-spacing:-.2px}
.psum{margin:0 0 14px;color:var(--muted)}
.feat{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 18px;font:500 12.5px/1.45 var(--mono);color:var(--text)}
.feat li{position:relative;padding-left:14px}
.feat li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:#ff8a1f;opacity:.8}
.feat.named{grid-template-columns:1fr;gap:12px;font:inherit}
.feat.named li{padding:12px 14px 12px 28px;border:1px solid var(--line);border-radius:10px}
.feat.named li::before{left:12px;top:1.15em}
.feat.named b{display:block;color:var(--head);font-weight:600}
.feat.named span{display:block;font-size:14px;color:var(--text)}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:16px 0 0;font:500 12px var(--mono)}
.chain span{padding:4px 9px;border:1px solid var(--line);border-radius:999px;color:var(--head)}
.chain i{font-style:normal;color:#ff8a1f}
.pnote{margin-top:12px;padding:10px 12px;border-left:2px solid var(--line);font-size:13.5px;color:var(--muted)}
.diagram{margin:24px 0 0}
.diagram img{display:block;width:100%;height:auto}
.diagram .d,html[data-theme=dark] .diagram .l{display:none}
html[data-theme=dark] .diagram .d,.diagram img.both{display:block}
.diagram figcaption{margin-top:8px;font:500 12px var(--mono);color:var(--muted);text-align:center}
.pfacts{margin:48px 0 8px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font:500 12px/1.6 var(--mono);color:var(--muted)}
.pfacts dt{color:var(--head);font-weight:600}.pfacts dd{margin:0}
.toc{display:none}
@media(min-width:1024px){
  .toc{display:block;margin-top:40px;max-height:calc(100vh - 460px);overflow:auto}
  .toc p{margin:0 0 10px;font:600 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .toc ol{list-style:none;margin:0;padding:0}
  .toc a{display:block;padding:4px 0 4px 12px;border-left:1px solid var(--line);font-size:13.5px;color:var(--muted)}
  .toc a:hover{color:var(--head)}
  .toc a.active{color:var(--head);border-left-color:#ff8a1f}
}
/* project menu: thin, quiet scrollbar that shows on hover; soft fade at the bottom edge */
.toc{scrollbar-width:thin;scrollbar-color:transparent transparent;padding-right:6px;transition:scrollbar-color .3s}
.toc:hover{scrollbar-color:color-mix(in srgb,var(--muted) 55%,transparent) transparent}
.toc::-webkit-scrollbar{width:4px}
.toc::-webkit-scrollbar-track{background:transparent}
.toc::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
.toc:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 55%,transparent)}
.toc::-webkit-scrollbar-thumb:hover{background:#ff8a1f}
@media(min-width:1024px){.toc{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent);padding-bottom:24px}}
.toc{position:relative}
/* project page: legend under the colour line */
.mixleg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:26px 0 30px;font:500 11.5px var(--mono);color:var(--muted)}
.mixleg i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:0;background:color-mix(in srgb,var(--c) 80%,transparent)}
.project .demo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 18px}.project .demo>span:last-child{font:500 12px var(--mono);color:var(--muted)}
/* "Play the demo": dotted underline on the words so it reads as a link; arrow at normal size */
.project .demo a{text-decoration:none}
.project .demo a .u{text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,var(--head) 55%,transparent);text-decoration-thickness:1.5px;text-underline-offset:4px}

.project .demo a:hover .u{text-decoration-color:var(--accent)}
/* What I know */
.techleg{margin:-24px 0 32px;font:500 12px var(--mono);color:var(--muted)}
.techarea{margin:0 0 36px;scroll-margin-top:24px}
.techarea h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--head)}
.techarea h2 i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.tech{list-style:none;margin:0;padding:0}
.tech li{display:grid;grid-template-columns:minmax(150px,34%) 1fr;gap:4px 18px;padding:9px 0;border-top:1px solid var(--line)}
@media(max-width:639px){.tech li{grid-template-columns:1fr}}
.tech .tn{font-weight:600;color:var(--head);font-size:14.5px}
.tech .depth{display:block;margin-top:2px;font-size:9px;letter-spacing:2px;color:var(--accent);font-weight:400}
.techleg .depth{display:inline;font-size:9px;letter-spacing:2px;color:var(--accent)}
.tech .tu{font-size:13.5px;line-height:1.6}
.tech .tu a{color:var(--text);border-bottom:1px dotted color-mix(in srgb,var(--muted) 60%,transparent)}.tech .tu a:hover{color:var(--accent)}
.tech .when{font:500 11px var(--mono);color:var(--muted)}
.tech .sep{color:var(--muted)}
.tech li.extra .tn{font-weight:500;color:var(--text)}
.tech .muted{font:500 12px var(--mono);color:var(--muted)}
.tech .yrs{display:block;margin-top:2px;font:500 11.5px var(--mono);color:var(--accent)}
/* phones: page links under the tagline (the in-page menu is desktop only) */
.pages{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:18px;font:600 12.5px var(--mono);letter-spacing:.3px}
.pages a{color:var(--head);text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,var(--head) 45%,transparent);text-underline-offset:4px}
.pages span{color:var(--muted)}
@media(min-width:1024px){.pages{display:none}}
/* What I know: story, odd bits, where */
.tech .story{margin:0;font-size:14px;line-height:1.6;color:var(--text)}
.tech .oddh{margin:8px 0 2px;font:600 10.5px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.tech .odd{margin:0;padding-left:16px;font-size:13px;line-height:1.55;color:var(--text)}
.tech .odd li{margin:2px 0;padding:0;border:0;display:list-item}
.tech .odd li::marker{color:#ff8a1f}
.tech .at{margin:6px 0 0;font:500 11.5px var(--mono);color:var(--muted)}
.tech .at .when{opacity:.8}
/* What I know: name + years on one line, text full width below */
.tech li{display:block;padding:12px 0 10px}
.tech .tn{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px;font-size:15.5px}
.tech .yrs{display:inline;margin:0;white-space:nowrap}
.techarea{margin:0 0 26px}
.techarea h2{margin:0 0 4px}
.tech .oddh{margin:6px 0 2px}
.tech .at{margin:4px 0 0}
.tech li{padding:14px 0 22px}
/* Tools: Serious / Interesting toggle (state on <body data-tools>, set by site.js from #serious / #interesting) */
.modes{display:inline-flex;margin:28px 0 0;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.modes button{border:0;background:none;border-radius:999px;padding:5px 14px;font:600 12px var(--mono);color:var(--muted);cursor:pointer}
.modes button[aria-pressed=true]{background:var(--head);color:var(--bg)}
.toolspage[data-mode=serious] .oddh,.toolspage[data-mode=serious] .odd{display:none}
.toolspage[data-mode=interesting] .story,.toolspage[data-mode=interesting] .at,.toolspage[data-mode=interesting] .oddh{display:none}
.toolspage[data-mode=interesting] .tech>li:not(.has-odd),.toolspage[data-mode=interesting] .techarea:not(.has-odd){display:none}
body.tools-interesting .toc li:not(.has-odd){display:none}
.toolspage[data-mode=interesting] .odd{margin-top:2px}
.modes{display:flex;width:max-content}
.tech .at.clip{display:flex;align-items:baseline;gap:12px}
.tech .at.clip .short,.tech .at.clip .full{flex:1;min-width:0}
.tech .at.clip .full{display:none}
.tech .at.clip.open .short{display:none}.tech .at.clip.open .full{display:inline}
.tech .atmore{flex:none;border:0;background:none;padding:0;font:600 11.5px var(--mono);color:var(--head);cursor:pointer;white-space:nowrap}
.tech .atmore:hover{color:var(--accent)}
.tech .at.clip{cursor:pointer}
.tech .at.clip:hover .atmore{color:var(--accent)}
/* Tools: area icon next to the heading (replaces the colour dot when present) */
.techarea h2 .aico{display:inline-flex;width:34px;height:34px;flex:none}
.techarea h2 .aico img{width:34px;height:34px;object-fit:contain}
.aico .d,html[data-theme=dark] .aico .l{display:none}
html[data-theme=dark] .aico .d,.aico img.both{display:block}
.toolshero{margin:-16px 0 34px;max-width:440px}
/* sub pages: compact back row ("↑ back | filter") instead of the tagline + Go back */
.backrow{margin:14px 0 0;font:600 12.5px var(--mono);color:var(--muted);display:flex;gap:8px;align-items:baseline}
.backrow .back{margin:0;font:inherit;color:var(--head)}
.backrow .sep{opacity:.5}.backrow .flabel{color:var(--muted)}
.sub .filter{margin-top:8px}
.sub .modes{margin-top:18px}
/* Tools: two views of the same content */
.toolspage[data-mode=descriptive] .points{display:none}
.toolspage[data-mode=bulleted] .story{display:none}
.tech .points{margin:2px 0 0;padding-left:16px;font-size:13.5px;line-height:1.6;color:var(--text)}
.tech .points li{margin:2px 0;padding:0;border:0;display:list-item}
.tech .points li::marker{color:#ff8a1f}
/* "Feature Smith | click ↑ to go back" on one line (sub pages) */
.smithrow{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:10px}
.smithrow .smith{margin:0}
.smithrow .sep{font:500 13px var(--mono);color:var(--muted);opacity:.5}
.smithrow .back{margin:0;font:500 12.5px var(--mono);color:var(--muted)}
.smithrow .back b{color:var(--head)}.smithrow .back:hover,.smithrow .back:hover b{color:var(--accent)}
.flabel{margin:16px 0 0;font:600 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.sub .modes{margin-top:26px}
@media(min-width:1024px){.sub .modes+.toc{margin-top:26px}}
.tools .in{font:800 12px/1 var(--sans,system-ui);letter-spacing:-.3px}
/* LinkedIn button: same tooltip as the lab button */
.pill-btn.tipbtn .tip{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:30;width:max-content;padding:6px 10px;border-radius:8px;font:500 11.5px/1.4 var(--mono);letter-spacing:.2px;text-transform:none;
  color:var(--head);background:color-mix(in srgb,var(--bg) 90%,var(--head));border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.18);
  opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity .15s,transform .15s}
.pill-btn.tipbtn:hover .tip,.pill-btn.tipbtn:focus-visible .tip,.pill-btn.tipbtn.on .tip{opacity:1;transform:translate(-50%,0)}
@media(max-width:1023px){ .pill-btn.tipbtn .tip{left:auto;right:0;bottom:auto;top:calc(100% + 8px);transform:translateY(-4px)} .pill-btn.tipbtn:hover .tip,.pill-btn.tipbtn:focus-visible .tip,.pill-btn.tipbtn.on .tip{transform:none} }
.pill-btn.tipbtn{position:relative}
.tools .inbug{width:15px;height:15px;stroke:none!important;display:block}
.pill-btn.tipbtn .tip{left:0;transform:translateY(4px)}
.pill-btn.tipbtn:hover .tip,.pill-btn.tipbtn:focus-visible .tip{transform:none}
/* "On this page (?)": small help circle with a tooltip */
.qhelp{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;margin-left:4px;border:1px solid var(--muted);border-radius:50%;font:700 9.5px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--muted);cursor:help;vertical-align:1px;outline:none}
.qhelp:hover,.qhelp:focus{color:var(--head);border-color:var(--head)}
.qhelp .tip{position:absolute;left:-6px;top:calc(100% + 8px);z-index:30;width:max-content;max-width:240px;padding:7px 10px;border-radius:8px;font:500 11.5px/1.45 var(--mono);letter-spacing:.2px;color:var(--head);
  background:color-mix(in srgb,var(--bg) 90%,var(--head));border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.18);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .15s,transform .15s;white-space:normal}
.qhelp:hover .tip,.qhelp:focus-visible .tip,.qhelp.on .tip{opacity:1;transform:none}
.toc .tocsub{display:block;font:500 11px/1.35 var(--mono);color:var(--muted);opacity:.85}
.toc li a{scroll-margin-top:24px}
.list>li{scroll-margin-top:24px}
@media(min-width:1024px){.sub .backrow+.toc,.sub .smithrow~.toc{margin-top:28px}}
/* short screens (desktop layout): less space above the name and below the bottom buttons, more room for the menu */
@media(min-width:1024px) and (max-height:880px){
  .left{padding:56px 0 28px}
  .toc{max-height:calc(100vh - 360px)}
}
@media(min-width:1024px) and (max-height:720px){
  .left{padding:28px 0 16px}
  .name{font-size:clamp(30px,4vw,40px)}
  .toc{margin-top:22px;max-height:calc(100vh - 290px)}
  .sub .modes,.sub .modes+.toc{margin-top:18px}
}
/* desktop: the menu takes exactly the space left between the top block and the bottom buttons */
@media(min-width:1024px){
  .left{display:flex;flex-direction:column}
  .left>div:first-child{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .left .toc{flex:0 1 auto;min-height:60px;max-height:none!important}
  .left .tools{flex:none;padding-top:16px}
}
/* experience menu: two-line entries, kept tight so all roles fit on most screens */
@media(min-width:1024px){
  .toc li:has(.tocsub) a{padding:2px 0 3px 12px;font-size:13px;line-height:1.3}
  .toc .tocsub{font-size:10.5px;line-height:1.3}
}
@media(min-width:1024px) and (max-height:820px){ .toc .tocsub{display:inline;margin-left:6px} .toc li:has(.tocsub) a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} }
/* menu scrolls inside its column; entries never run past it */
@media(min-width:1024px){ .left .toc{overflow-y:auto;overflow-x:hidden;max-width:100%} .left .toc li a{overflow:hidden;text-overflow:ellipsis} }
/* home: compact job cards (summary only, smaller icon) */
.home #experience .jicon{width:72px;margin-top:10px}
@media(max-width:639px){.home #experience .jicon{width:96px}}
/* phones: the LinkedIn button is top right, so its tooltip opens to the left, below it */
@media(max-width:1023px){ .pill-btn.tipbtn .tip{left:auto;right:0;bottom:auto;top:calc(100% + 8px);transform:translateY(-4px)} .pill-btn.tipbtn:hover .tip,.pill-btn.tipbtn:focus-visible .tip{transform:none} }
/* never let a hidden tooltip widen the page */
html,body{overflow-x:clip}
/* phones: the vertical name fits inside the 24px side margin, so it never sits under the text */
@media(max-width:1023px){ .mark{font-size:19px;letter-spacing:1.5px;left:2px;bottom:18px;line-height:1} body.scrolled .mark{opacity:.12} }
/* the colour line and its glow run the full width of the card (rounded with the card's top corners) */
.card .line{left:0;right:0;border-radius:0}