/* johnrrhowie.com — one system, used by every page.
   Tokens first, then primitives, then the few components the site actually has. */

:root{
  /* light is the base; dark redefines only these */
  --paper:#FCFBF9; --raised:#F5F3EF; --sunk:#EFEDE7;
  --line:#E3DFD7; --line-soft:#EDEAE3;
  --ink:#14171A; --ink-2:#4C525A; --ink-3:#858B93;
  --sea:#1B5068; --gold:#8A6A2B;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* one scale, used everywhere */
  --t-hero:clamp(38px,5.4vw,52px);
  --t-h1:clamp(32px,4.4vw,42px);
  --t-body:18.5px;
  --t-small:15.5px;
  --t-label:10.5px;

  --sp-1:6px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:52px; --sp-6:80px;
  --r-sm:7px; --r-md:10px; --r-lg:14px;
  --measure:660px; --wide:1080px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1012; --raised:#16191C; --sunk:#121417;
  --line:#272B30; --line-soft:#1D2024;
  --ink:#EAECEF; --ink-2:#A5ACB4; --ink-3:#757C85;
  --sea:#82B9CE; --gold:#C9A24B;
}}
:root[data-theme="dark"]{
  --paper:#0E1012; --raised:#16191C; --sunk:#121417;
  --line:#272B30; --line-soft:#1D2024;
  --ink:#EAECEF; --ink-2:#A5ACB4; --ink-3:#757C85;
  --sea:#82B9CE; --gold:#C9A24B;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:var(--t-body); line-height:1.6;
  margin:0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
p{margin:0}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{color:var(--sea);border-bottom-color:var(--sea)}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:3px}
::selection{background:color-mix(in srgb,var(--sea) 26%,transparent)}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 30px}
.wrap--wide{max-width:var(--wide)}

/* ---- page furniture, identical everywhere ---- */
.back{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:13.5px;color:var(--ink-3);
  border:0;margin-bottom:var(--sp-3);min-height:44px;
}
.back:hover{color:var(--sea)}
.page-head{padding:72px 0 0}
.page-head h1{margin:0;font-weight:400;font-size:var(--t-h1);letter-spacing:-.025em;
  line-height:1.06}
.lede{color:var(--ink-2);margin-top:var(--sp-2);max-width:56ch}

.label{font-family:var(--sans);font-size:var(--t-label);font-weight:650;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---- rows: used by investing and anywhere else with year + thing ---- */
.rows{list-style:none;padding:0;margin:0}
.rows li{display:grid;grid-template-columns:62px 1fr;gap:var(--sp-3);
  padding:12px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.rows li:last-child{border-bottom:0}
.rows .yr{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.rows b{font-weight:400}
.rows .sub{display:block;color:var(--ink-2);font-size:var(--t-small);margin-top:1px}

/* ---- pills ---- */
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pills button,.pills a{
  font-family:var(--sans);font-size:13px;font-weight:600;
  padding:0 15px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;
}
.pills button:hover,.pills a:hover{border-color:var(--sea);color:var(--sea)}
.pills button[aria-pressed="true"]{background:var(--ink);color:var(--paper);
  border-color:var(--ink)}
.pills button[aria-pressed="true"]:hover{color:var(--paper)}

/* ---- footer, identical everywhere ---- */
.site-foot{margin-top:var(--sp-6);padding:var(--sp-4) 0 var(--sp-6);
  border-top:1px solid var(--line-soft);font-family:var(--sans)}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.fname{font-family:var(--serif);font-size:19px;color:var(--ink)}
.fnote{font-size:13.5px;color:var(--ink-3);line-height:1.6;margin-top:8px;max-width:34ch}
.fmail{margin-top:14px;font-size:13.5px}
.fmail a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.fsoc{display:flex;gap:9px;margin-top:16px}
.fsoc a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--ink-3)}
.fsoc a:hover{color:var(--sea);border-color:var(--sea)}
.fh{font-size:var(--t-label);font-weight:650;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.site-foot nav a{display:flex;align-items:center;font-size:14px;color:var(--ink-2);
  min-height:44px;border:0}
.site-foot nav a:hover{color:var(--sea)}
.frule{margin-top:var(--sp-4);padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}

@media (max-width:620px){
  :root{--t-body:17.5px}
  .page-head{padding-top:52px}
  .fcols{grid-template-columns:1fr 1fr;gap:26px}
  .fcols>div{grid-column:1/-1}
  .rows li{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ---- universal header ---------------------------------------------------
   One bar on every page: the name goes home, the sections are always reachable.
   Sticky, translucent, and it collapses to a scrolling row on a phone. */
.sitebar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;
  padding:0 30px;min-height:58px;background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid var(--line-soft);font-family:var(--sans)}
.sitebar .me{font-family:var(--serif);font-size:17px;color:var(--ink);border:0;
  white-space:nowrap;display:flex;align-items:center;min-height:44px}
.sitebar .me:hover{color:var(--sea)}
.sitebar nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.sitebar nav::-webkit-scrollbar{display:none}
.sitebar nav a{display:flex;align-items:center;min-height:44px;padding:0 11px;font-size:13.5px;
  color:var(--ink-3);border:0;white-space:nowrap;border-radius:7px}
.sitebar nav a:hover{color:var(--ink);background:var(--raised)}
.sitebar nav a[aria-current="page"]{color:var(--ink);font-weight:600}
@media(max-width:620px){.sitebar{padding:0 18px;gap:12px}.sitebar nav a{padding:0 9px}}