/* billsimmons.net — plain, link-based personal site. Zero build, zero webfonts, zero tracking.
   Redesigned 2026-07-17 (karpathy.ai archetype): white page, system type, blue links, dense lists. */

:root{
  --bg:#ffffff;
  --ink:#16181c;
  --muted:#565e68;
  --faint:#8a929c;
  --link:#0645ad;
  --link-hover:#0b3d91;
  --line:#e3e6ea;
  --dots:#d9dde1;
  --panel:#f6f7f8;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
img{max-width:100%}
.page{max-width:780px;margin:0 auto;padding:0 20px}

/* masthead */
.masthead{padding-top:44px}
.masthead h1{font-size:1.85rem;font-weight:700;letter-spacing:-.01em;margin:0}
.masthead h1 a{color:var(--ink)}
.masthead h1 a:hover{text-decoration:none}
.idline{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.7}
nav.top{font-family:var(--mono);font-size:.8rem;margin-top:16px;color:var(--faint)}
nav.top a{margin-right:4px}
nav.top span.sep{margin-right:4px;color:var(--dots)}

/* headshot */
.photo,.photo-ph{float:right;width:104px;height:104px;margin:0 0 12px 20px;border:1px solid var(--line);border-radius:3px}
.photo{object-fit:cover}
.photo-ph{display:grid;place-items:center;background:var(--panel);font-family:var(--mono);font-size:.62rem;color:var(--faint);text-align:center;line-height:1.5}
@media(max-width:560px){.photo,.photo-ph{width:84px;height:84px;margin-left:14px}}

/* sections */
section{margin-top:46px}
section h2{font-size:1.02rem;font-weight:700;letter-spacing:.01em;border-bottom:1px solid var(--line);padding-bottom:7px;margin:0 0 16px}
p{margin:.95em 0}
.intro{margin-top:26px}
.intro p{margin:.8em 0}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* mono meta bits */
.note{font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.tag{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);
  border:1px solid var(--line);border-radius:3px;padding:1px 6px;white-space:nowrap}

/* writing list */
.postlist{margin:0;padding:0;list-style:none}
.postlist li{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px dotted var(--dots)}
.postlist .pdate{font-family:var(--mono);font-size:.76rem;color:var(--faint);flex:0 0 92px;white-space:nowrap}
.postlist .ptitle{flex:1 1 auto}
.postlist .psum{display:block;color:var(--muted);font-size:.88rem;margin-top:2px}
@media(max-width:560px){
  .postlist li{flex-wrap:wrap;gap:4px 10px}
  .postlist .pdate{flex-basis:auto}
}

/* link-based project list */
.plist{margin:0;padding-left:0;list-style:none}
.plist li{margin:0 0 14px;padding-left:0}
.plist strong{font-weight:700}

/* book */
.bookrow{display:flex;gap:20px;align-items:flex-start}
.cover-ph{flex:0 0 92px;height:138px;border:1px solid var(--line);border-radius:3px;background:var(--panel);
  display:grid;place-items:center;font-family:var(--mono);font-size:.6rem;color:var(--faint);text-align:center;line-height:1.5;padding:6px}
img.cover{flex:0 0 92px;width:92px;border:1px solid var(--line);border-radius:3px}
@media(max-width:560px){.bookrow{gap:14px}}

/* forms */
form.inline{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
form.inline input[type=email]{flex:1 1 220px;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink)}
form.inline input:focus{outline:1px solid var(--link);outline-offset:0}
form.inline button{font:inherit;font-size:.92rem;padding:8px 14px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink);cursor:pointer}
form.inline button:hover{border-color:var(--muted)}

/* stacked inquiry form */
form.stack{display:flex;flex-direction:column;gap:8px;max-width:520px;margin:10px 0 4px}
form.stack input,form.stack textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink);width:100%}
form.stack textarea{min-height:88px;resize:vertical}
form.stack input:focus,form.stack textarea:focus{outline:1px solid var(--link);outline-offset:0}
form.stack button{align-self:flex-start;font:inherit;font-size:.92rem;padding:8px 14px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink);cursor:pointer}
form.stack button:hover{border-color:var(--muted)}

/* honeypot: display:none — reliable browser/password-manager autofill skips it, so real users
   don't trip it; naive bots still fill it and get dropped server-side. */
.hp-field{display:none!important}
/* form confirmation / error line (mono, matches .note) */
.form-note{font-family:var(--mono);font-size:.82rem;margin:10px 0 4px}
.form-note.ok{color:var(--muted)}
.form-note.error{color:#a1301c}

/* article pages */
.back{font-family:var(--mono);font-size:.78rem;display:inline-block;margin:26px 0 6px}
.prose{margin-top:10px}
.prose h1{font-size:1.5rem;line-height:1.25;letter-spacing:-.01em;margin:.4em 0 .3em}
.prose h2{font-size:1.15rem;border:none;padding:0;margin:1.6em 0 .4em}
.prose h3{font-size:1rem;margin:1.4em 0 .3em}
.prose p,.prose li{font-size:1.02rem;line-height:1.7}
.prose ul,.prose ol{padding-left:1.4em}
.prose blockquote{border-left:3px solid var(--line);margin:1.2em 0;padding:.1em 0 .1em 16px;color:var(--muted)}
.prose code{font-family:var(--mono);font-size:.85em;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:1px 5px}
.postmeta{font-family:var(--mono);font-size:.78rem;color:var(--faint);margin-bottom:26px}
.related{margin-top:34px;padding-top:14px;border-top:1px solid var(--line)}
.related .note{margin-bottom:6px}

/* footer */
footer{margin:70px 0 44px;border-top:1px solid var(--line);padding-top:16px;
  font-family:var(--mono);font-size:.76rem;color:var(--faint)}
footer a{color:var(--faint);text-decoration:underline}
footer a:hover{color:var(--muted)}