/* HS Motion: static layouts (header bands, text-page cards, About page). Animations live in motion.css. */
:root{--hm-bg:#0b0e14;--hm-bg2:#11151f;--hm-card:#151a26;--hm-line:#232a3a;--hm-text:#e6e8ee;--hm-mute:#9aa3b5;--hm-acc:#7cf2b0;--hm-acc2:#8b7bff;--hm-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
html{scroll-padding-top:84px}
/* header band */
.hm-band{position:relative;overflow:hidden;box-sizing:border-box;max-width:100%!important;min-width:0;width:auto;margin:0 auto 34px!important;padding:26px 24px 30px;border:1px solid var(--hm-line);border-radius:18px;background:radial-gradient(600px 260px at 90% 0%,rgba(139,123,255,.20),transparent 65%),radial-gradient(500px 240px at 0% 100%,rgba(124,242,176,.12),transparent 65%),var(--hm-bg2)}
.hm-band:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)}
.hm-band>*{position:relative}
.hm-band-path{max-width:100%;min-width:0;font-family:var(--hm-mono);font-size:13px;color:var(--hm-mute);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-prompt{color:var(--hm-acc)}.hm-dir{color:var(--hm-acc2)}
.hm-caret{display:inline-block;width:.6em;height:1.05em;vertical-align:-.15em;background:var(--hm-acc);opacity:.85}
.hm-band h1{margin:0!important;color:#fff;letter-spacing:-.03em;line-height:1.08}
.hm-band-meta{margin:10px 0 0;color:var(--hm-mute);font-size:14px;font-family:var(--hm-mono)}
.hm-band-line{position:absolute!important;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--hm-acc),var(--hm-acc2),transparent)}
/* text pages as cards */
.hm-doc{min-width:0;max-width:100%;display:flex;flex-direction:column;gap:16px}
.hm-doc>.hm-card,.hm-doc>.hm-toc{margin:0!important;max-width:none!important}
.hm-card{box-sizing:border-box;background:var(--hm-card);border:1px solid var(--hm-line);border-radius:16px;padding:22px 22px 18px}
.hm-card>:first-child{margin-top:0}.hm-card>:last-child{margin-bottom:0}
.hm-sec h2{position:relative;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.015em;margin:0 0 12px;padding-left:16px;color:#fff}
.hm-sec h2:before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:4px;background:linear-gradient(var(--hm-acc),var(--hm-acc2))}
.hm-card p,.hm-card li{color:#c9cedb}
.hm-card ul{padding-left:1.2em}.hm-card li{margin:.35em 0}.hm-card li::marker{color:var(--hm-acc)}
.hm-card a{color:var(--hm-acc)}
.hm-intro{background:linear-gradient(135deg,rgba(124,242,176,.07),rgba(139,123,255,.07)),var(--hm-card)}
.hm-toc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 0}
.hm-toc-t{font-family:var(--hm-mono);font-size:12.5px;color:var(--hm-mute);margin-right:4px}
.hm-toc-t:before{content:"# ";color:var(--hm-acc)}
.hm-chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid var(--hm-line);background:rgba(21,26,38,.85);color:var(--hm-text)!important;font-size:13.5px;line-height:1.2;text-decoration:none!important;transition:border-color .2s,color .2s,background .2s}
.hm-chip:hover{border-color:var(--hm-acc);color:var(--hm-acc)!important}
/* ---------- About ---------- */
.hm-about{color:var(--hm-text);font-size:16px;line-height:1.6;max-width:1100px!important;margin-left:auto!important;margin-right:auto!important}
.hm-about *{box-sizing:border-box}
.hm-about a{color:var(--hm-acc)}
.hm-ahero{position:relative;overflow:hidden;display:grid;gap:22px;align-items:center;padding:30px 22px;border:1px solid var(--hm-line);border-radius:22px;background:radial-gradient(700px 320px at 85% 0%,rgba(139,123,255,.22),transparent 62%),radial-gradient(600px 300px at 0% 100%,rgba(124,242,176,.13),transparent 62%),var(--hm-bg2)}
.hm-ahero:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(circle at 70% 30%,#000,transparent 75%);mask-image:radial-gradient(circle at 70% 30%,#000,transparent 75%)}
.hm-ahero>*{position:relative}
@media(min-width:820px){.hm-ahero{grid-template-columns:1fr auto;padding:44px 40px}}
.hm-eyebrow{font-family:var(--hm-mono);font-size:13px;color:var(--hm-acc);margin:0 0 6px}
.hm-eyebrow:before{content:"$ ";color:var(--hm-mute)}
.hm-ahero h1{font-size:clamp(38px,6.6vw,66px);line-height:1.02;letter-spacing:-.035em;margin:6px 0 14px;color:#fff;font-weight:800}
.hm-grad{background:linear-gradient(90deg,var(--hm-acc),var(--hm-acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-lead{font-size:clamp(17px,2vw,19px);color:#c9cedb;margin:0 0 18px;max-width:640px}
.hm-term{font-family:var(--hm-mono);font-size:13.5px;line-height:1.7;background:#070a10;border:1px solid var(--hm-line);border-radius:12px;padding:0 0 12px;max-width:560px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hm-term-bar{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--hm-line);margin-bottom:8px}
.hm-term-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.hm-term-bar i:nth-child(2){background:#febc2e}.hm-term-bar i:nth-child(3){background:#28c840}
.hm-term p{margin:0;padding:0 14px;white-space:normal;overflow-wrap:anywhere}
.hm-term .c{color:var(--hm-text)}.hm-term .c:before{content:"charles@hartmann:~$ ";color:var(--hm-acc)}
.hm-term .o{color:#c9cedb}.hm-term .o b{color:#fff}
.hm-photo-wrap{position:relative;justify-self:center;width:180px;height:260px;display:flex;align-items:flex-end;justify-content:center}
.hm-photo-wrap:before{content:"";position:absolute;left:50%;bottom:6px;width:190px;height:190px;transform:translateX(-50%);border-radius:50%;background:conic-gradient(from 0deg,var(--hm-acc),var(--hm-acc2),var(--hm-acc));opacity:.35;-webkit-mask:radial-gradient(circle,transparent 61%,#000 62%);mask:radial-gradient(circle,transparent 61%,#000 62%)}
.hm-photo{position:relative;height:250px;width:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
@media(min-width:820px){.hm-photo-wrap{width:240px;height:380px}.hm-photo-wrap:before{width:250px;height:250px}.hm-photo{height:370px}}
.hm-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.hm-btn{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:11px;border:1px solid var(--hm-line);background:var(--hm-card);color:var(--hm-text)!important;font-weight:600;font-size:15px;text-decoration:none!important;transition:border-color .2s,transform .2s,box-shadow .2s}
.hm-btn:hover{border-color:var(--hm-acc)}
.hm-btn.hm-primary{background:linear-gradient(90deg,var(--hm-acc),#5fd9c7);color:#07110c!important;border-color:transparent}
.hm-stats{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:820px){.hm-stats{grid-template-columns:repeat(4,1fr)}}
.hm-stat{background:var(--hm-card);border:1px solid var(--hm-line);border-radius:14px;padding:14px 16px;margin:0!important}
.hm-stat b{display:block;font-size:28px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums;font-family:var(--hm-mono)}
.hm-stat span{font-size:13.5px;color:var(--hm-mute)}
.hm-asec{margin-top:46px}
.hm-asec>h2{font-size:clamp(24px,3.2vw,34px);letter-spacing:-.02em;margin:4px 0 16px;color:#fff;line-height:1.15}
.hm-grid{display:grid;gap:14px}
@media(min-width:700px){.hm-grid-2{grid-template-columns:repeat(2,1fr)}.hm-grid-3{grid-template-columns:repeat(3,1fr)}}
.hm-ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;margin-bottom:10px;background:rgba(124,242,176,.1);border:1px solid rgba(124,242,176,.25);color:var(--hm-acc)}
.hm-ic svg{width:22px;height:22px}
.hm-card h3{font-size:18px;margin:0 0 6px;color:#fff;line-height:1.3}
.hm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.hm-chips li{margin:0!important}
.hm-chips .hm-chip{font-family:var(--hm-mono);font-size:13px}
.hm-proj{display:flex;flex-direction:column;text-decoration:none!important;color:inherit!important}
.hm-proj h3{display:flex;align-items:center;gap:8px}
.hm-proj h3:after{content:"\2197";font-size:15px;color:var(--hm-mute);transition:transform .2s,color .2s}
.hm-proj:hover h3:after{color:var(--hm-acc);transform:translate(2px,-2px)}
.hm-proj p{margin:0;color:var(--hm-mute)!important;font-size:14.5px}
.hm-badge{display:inline-block;margin-top:10px;font-family:var(--hm-mono);font-size:12.5px;color:#febc2e;border:1px solid rgba(254,188,46,.35);border-radius:999px;padding:3px 10px;align-self:flex-start}
.hm-flow{list-style:none;margin:0;padding:0;counter-reset:hm;position:relative}
.hm-flow li{position:relative;margin:0 0 14px!important;padding-left:56px;counter-increment:hm}
.hm-flow li:before{content:counter(hm,decimal-leading-zero);position:absolute;left:0;top:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--hm-mono);font-size:13px;color:#07110c;background:linear-gradient(135deg,var(--hm-acc),var(--hm-acc2));z-index:1}
.hm-flow:before{content:"";position:absolute;left:19px;top:20px;bottom:30px;width:2px;background:linear-gradient(var(--hm-acc),var(--hm-acc2),transparent)}
.hm-flow .hm-card{margin:0}
.hm-k{font-family:var(--hm-mono);font-size:12.5px;color:var(--hm-acc);display:block;margin-bottom:2px}
.hm-cta{text-align:center;padding:30px 22px;background:radial-gradient(500px 200px at 50% 0%,rgba(139,123,255,.18),transparent 70%),var(--hm-card)}
.hm-cta .hm-row{justify-content:center}
.hm-band h1{overflow-wrap:anywhere}
.hm-about,.hm-doc,.hm-card{min-width:0}

/* fixall 2026-10-25: phone overflow guards (header band path wraps instead of being cut; ad slot and page never wider than the screen) */
html,body{overflow-x:clip;max-width:100%}
.aads-slot,.hs-ad{max-width:100%!important;box-sizing:border-box;overflow:hidden}
.aads-slot iframe,.hs-ad iframe,.hs-ad img{max-width:100%!important}
@media (max-width:600px){
 .hm-band{padding:22px 18px 24px}
 .hm-band-path{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word;line-height:1.45}
}