/* KF/\mos brand, shared with the sspwest portal (self-hosted fonts; no CDNs, ever) */
@font-face{font-family:'Shadows Into Light';src:url('fonts/shadows-into-light.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Black';src:url('fonts/archivo-black.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
:root{
  --bg:#0e1117; --card:#161b22; --line:#2a3140; --text:#e6edf3;
  --muted:#8b97a7; --brand:#3b82f6; --brand2:#2563eb; --ok:#22c55e;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#1b2230,#0e1117);color:var(--text);
  min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:960px;margin:0 auto;padding:24px 24px 48px;flex:1}

/* Top nav */
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.mark{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:24px;letter-spacing:0;color:var(--text);text-decoration:none}
.mark:hover{color:#60a5fa}
.navlinks{display:flex;gap:20px}
.navlinks a{color:var(--muted);text-decoration:none;font-size:14px;padding:6px 2px;border-bottom:2px solid transparent}
.navlinks a:hover{color:var(--text)}
.navlinks a.here{color:var(--text);border-bottom-color:var(--brand)}

/* Script headings (handwritten, blue gradient text-clip) */
.script{margin:0;font-family:'Shadows Into Light','Segoe Script','Bradley Hand',cursive;
  font-weight:400;line-height:1.05;
  background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Hero */
.hero{text-align:center;padding:24px 0 8px}
.hero .script{font-size:64px}
.hero .name{margin:14px 0 4px;font-size:22px;font-weight:700}
.hero .tag{color:var(--text);font-size:17px;max-width:640px;margin:6px auto 0;line-height:1.5;text-wrap:balance}
.headshot{width:148px;height:148px;border-radius:50%;object-fit:cover;object-position:50% 30%;
  border:3px solid var(--brand);box-shadow:0 12px 40px rgba(0,0,0,.5);margin-bottom:18px}
.chip{display:inline-block;margin-top:18px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;
  background:rgba(22,27,34,.7);color:var(--muted);font-size:13.5px}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.prose{color:var(--text);font-size:15.5px;line-height:1.7;margin:0}
.prose+.prose{margin-top:14px}

/* Sections */
.sec{margin-top:44px}
.sec h2{font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 16px}

/* "How I build" doctrine grid */
.doctrine{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.doc{background:#0d1117;border:1px solid var(--line);border-radius:14px;padding:18px}
.doc .ico{font-size:24px}
.doc .nm{font-weight:600;font-size:15px;margin:8px 0 6px}
.doc .ds{color:var(--muted);font-size:13px;line-height:1.5}

/* CTA row */
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.btn{display:inline-block;padding:13px 22px;border-radius:10px;text-decoration:none;font-size:15px;font-weight:600;
  background:var(--brand);color:#fff;transition:.15s}
.btn:hover{background:var(--brand2)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn.ghost:hover{background:#0d1117;color:var(--text)}

/* App tile grid (same tiles as the portal) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.app{position:relative;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--text);
  background:#0d1117;border:1px solid var(--line);border-radius:14px;padding:18px;transition:.15s}
a.app:hover{border-color:var(--brand);transform:translateY(-2px)}
.app .ico{font-size:26px}
.app .nm{font-weight:600;font-size:16px}
.app .ds{color:var(--muted);font-size:13px;line-height:1.4}
.app .host{color:#6b7585;font-size:11.5px;margin-top:auto;padding-top:6px;font-variant-numeric:tabular-nums}
.app .lock{position:absolute;top:14px;right:14px;font-size:13px;opacity:.8}
.app.nolink{cursor:default}
.app.nolink .host{font-style:italic}

/* Footer */
footer{text-align:center;color:var(--muted);font-size:12px;padding:24px 16px 16px}
footer a{color:inherit;text-decoration:none;font-family:'Archivo Black',sans-serif;font-weight:400}
footer a:hover{color:#60a5fa}
.foot-meta{margin-top:6px;color:#6b7585;font-size:11px;line-height:1.5}

@media(max-width:560px){
  .hero .script{font-size:46px}
  .wrap{padding:18px 16px 36px}
}