/* btraceio org page. Modernist tokens (modernist.css), inverted to a dark ground. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important}}
body{margin:0;background:var(--color-text);color:var(--color-bg);font-family:'Archivo',var(--font-body);text-wrap:pretty}
a{color:var(--color-accent-400)}
a:hover{color:var(--color-bg)}
::selection{background:var(--color-accent);color:var(--color-bg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes bt-ticker{to{transform:translateX(-50%)}}
@keyframes bt-scan{0%{transform:translateY(-10vh)}100%{transform:translateY(110vh)}}
@keyframes bt-flicker{0%,92%,94%,97%,100%{opacity:1}93%{opacity:.4}96%{opacity:.6}}
@keyframes bt-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes bt-glitch{0%,86%,100%{clip-path:inset(0 0 100% 0);transform:none}87%{clip-path:inset(12% 0 64% 0);transform:translate(-5px,0)}89%{clip-path:inset(58% 0 18% 0);transform:translate(4px,0)}91%{clip-path:inset(0 0 100% 0)}}

.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.display{font-family:'Oxanium',sans-serif;font-weight:700;text-transform:uppercase}

/* — CRT texture — */
.crt-lines{position:fixed;inset:0;pointer-events:none;z-index:60;background:repeating-linear-gradient(to bottom,color-mix(in srgb,black 22%,transparent) 0 1px,transparent 1px 3px);opacity:.55}
.crt-sweep{position:fixed;left:0;right:0;top:0;height:14vh;pointer-events:none;z-index:61;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--color-accent) 6%,transparent),transparent);animation:bt-scan 9s linear infinite}

/* — ticker — */
.ticker{background:var(--color-accent);color:var(--color-bg);overflow:hidden;border-bottom:2px solid var(--color-accent-700)}
.ticker-track{display:flex;width:max-content;gap:28px;padding:9px 0;margin:0;list-style:none;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;animation:bt-ticker 60s linear infinite}
.ticker-track li{display:flex;align-items:center;gap:28px}
.ticker-track li::after{content:"";width:6px;height:6px;background:var(--color-bg)}

/* — nav — */
.gutter{padding-left:max(clamp(20px,5vw,72px), calc((100% - 1240px) / 2 + clamp(20px,5vw,72px)));padding-right:max(clamp(20px,5vw,72px), calc((100% - 1240px) / 2 + clamp(20px,5vw,72px)))}
.site-nav{padding-top:14px;padding-bottom:14px;gap:24px;border-bottom:2px solid var(--color-neutral-800);background:var(--color-text)}
.site-nav .nav-brand{font-family:'Oxanium',sans-serif;font-weight:800;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--color-bg);display:flex;align-items:center;gap:10px;margin-right:auto}
.site-nav .nav-brand img{outline:1px solid var(--color-neutral-700)}
.site-nav .nav-link{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-neutral-300)}
.site-nav .nav-link:hover{color:var(--color-accent-400)}
.site-nav .nav-cta{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-bg);border:1px solid var(--color-neutral-600);padding:8px 12px}
.site-nav .nav-cta:hover{border-color:var(--color-accent);color:var(--color-accent-400)}
.site-nav .nav-cta{white-space:nowrap}
@media (max-width:520px){.site-nav{gap:16px}.site-nav .nav-link{display:none}}

/* — main — */
main{background-image:linear-gradient(color-mix(in srgb,var(--color-bg) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-bg) 4%,transparent) 1px,transparent 1px);background-size:64px 64px}
.section{max-width:1240px;margin:0 auto;padding-left:clamp(20px,5vw,72px);padding-right:clamp(20px,5vw,72px)}
#projects{padding-top:64px;padding-bottom:32px}
#contact{padding-top:40px;padding-bottom:64px}

.hero{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 40px;margin-bottom:36px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-400);margin-bottom:18px}
.hero-meta .hot{color:var(--color-accent-400)}
.hero-meta .flicker{animation:bt-flicker 3s infinite}
.hero h1{position:relative;font-size:clamp(34px,5vw,68px);line-height:.95;letter-spacing:-0.01em;margin:0}
.neon{color:var(--color-accent);text-shadow:0 0 28px color-mix(in srgb,var(--color-accent) 60%,transparent)}
.glitch{position:absolute;inset:0;color:var(--color-accent);mix-blend-mode:screen;animation:bt-glitch 5s steps(1) infinite;pointer-events:none}
.lede{font-size:17px;line-height:27px;max-width:44ch;margin:0;color:var(--color-neutral-300)}

/* — project cards — */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:16px}
.card-p{position:relative;display:flex;flex-direction:column;border:2px solid var(--color-neutral-700);background:color-mix(in srgb,var(--color-text) 78%,transparent);animation:bt-in .7s cubic-bezier(.2,.7,.2,1) both}
.card-p:nth-child(2){animation-delay:110ms}
.card-p:nth-child(3){animation-delay:220ms}
.card-p:nth-child(4){animation-delay:330ms}
.card-p:hover{border-color:var(--color-accent);box-shadow:0 0 48px color-mix(in srgb,var(--color-accent) 18%,transparent)}
.hud{position:absolute;width:18px;height:18px;border:0 solid var(--color-accent)}
.hud.tl{top:-2px;left:-2px;border-top-width:2px;border-left-width:2px}
.hud.tr{top:-2px;right:-2px;border-top-width:2px;border-right-width:2px}
.hud.bl{bottom:-2px;left:-2px;border-bottom-width:2px;border-left-width:2px}
.hud.br{bottom:-2px;right:-2px;border-bottom-width:2px;border-right-width:2px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--color-neutral-800);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.card-head .kicker{color:var(--color-accent-400);white-space:nowrap}
.card-head .lang{color:var(--color-neutral-400);white-space:nowrap}
.card-main{padding:28px 24px 20px;display:flex;flex-direction:column;gap:14px;flex:1}
.card-main h2{margin:0;font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-0.005em}
.card-main h2 a{color:var(--color-bg);text-decoration:none}
.card-main h2 a:hover{color:var(--color-accent-400)}
.card-main p{font-size:17px;line-height:27px;margin:0;max-width:52ch;color:var(--color-neutral-300)}
.activity{padding:0 24px 18px}
.activity-head{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-500);margin-bottom:8px}
.bars{display:flex;align-items:flex-end;gap:2px;height:44px;border-bottom:1px solid var(--color-neutral-700)}
.bars span{flex:1;min-width:1px;height:4%;background:var(--color-neutral-800)}
.bars span.on{background:var(--color-neutral-400)}
.bars span.recent{background:var(--color-accent);box-shadow:0 0 8px var(--color-accent)}
.card-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--color-neutral-800)}
.stat{padding:14px 20px;border-right:1px solid var(--color-neutral-800);min-width:0}
.stat-label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-500);margin-bottom:4px}
.stat-stars{font-family:'Oxanium',sans-serif;font-weight:700;font-size:24px;color:var(--color-bg)}
.stat-release{font-weight:600;font-size:16px;line-height:34px;color:var(--color-accent-400);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.stat-release.none{color:var(--color-neutral-500)}
.open-repo{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-bg);text-decoration:none}
.open-repo:hover{background:var(--color-accent);color:var(--color-bg)}

.data-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:20px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-500)}
.data-row a{font-size:13px;font-weight:600}

/* — contact — */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px 48px;align-items:start;border-top:2px solid var(--color-neutral-800);padding-top:28px}
.contact-kicker{margin:0;font-weight:400;line-height:1.55;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-400)}
.contact-kicker::before{content:"";width:8px;height:8px;background:var(--color-accent);box-shadow:0 0 10px var(--color-accent)}
.contact-item{border-top:1px solid var(--color-neutral-800)}
.contact-item a{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--color-neutral-800);color:var(--color-bg);text-decoration:none}
.contact-item a:hover{color:var(--color-accent-400)}
.contact-item strong{display:block;font-size:16px}
.contact-item .desc{font-size:14px;color:var(--color-neutral-400)}

/* — footer — */
footer{max-width:1240px;margin:0 auto;padding:24px clamp(20px,5vw,72px);border-top:2px solid var(--color-neutral-800);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12px;line-height:22px;letter-spacing:.04em;color:var(--color-neutral-400)}
footer .brand{display:flex;align-items:center;gap:8px;color:var(--color-bg);font-weight:600}
footer .end{margin-left:auto}