/* philliphunter.net skin over the shared wireframe template (../../wireframes/wf.css).
   Only tokens and the few components the personal site adds. If this file grows large,
   the template is wrong, not the skin. */
:root{--accent:#1F4E79;--accent-hover:#163A5A}
.wordmark{font-weight:700;font-size:20px;text-decoration:none;letter-spacing:-.01em;min-height:44px;display:inline-flex;align-items:center}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--ink);padding-top:16px}
.timeline{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 32px;padding:22px 0;border-top:1px solid var(--line)}
.timeline .when{font:500 13px "IBM Plex Mono",monospace;color:var(--muted);padding-top:4px}
.timeline .what{display:flex;flex-direction:column;gap:6px}
@media (max-width:720px){.timeline li{grid-template-columns:1fr;gap:4px}}
.post-row{display:flex;flex-direction:column;gap:8px;padding:24px 0;border-top:1px solid var(--line);text-decoration:none}
.post-row:hover h3{color:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:600 14px "IBM Plex Sans",system-ui,sans-serif;color:var(--ink);text-decoration:none;cursor:pointer}
.tag[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.prose{max-width:680px}
.prose p{font-size:18px;line-height:1.65}
.prose h2{font-size:26px;margin-top:12px}

/* v2 (Phillip, 2026-10-14): oxblood. The home carries it as a full-height rail; inner pages carry it as the header. */
:root{--accent:#5E1F1B;--accent-hover:#3F1411}
.site-head{background:#5E1F1B;border-bottom:0}
.site-head a,.site-head .wordmark{color:#F7EEE8}
.site-head a:hover{color:#F2B8A6}
.site-head .nav a[aria-current="page"]{color:#F2B8A6}
.site-head .btn-p{background:#F2B8A6;color:#5E1F1B} .site-head .btn-p:hover{background:#F7EEE8;color:#5E1F1B}
.site-head .menu-btn{background:transparent;border-color:#E7C9BE;color:#F7EEE8}