/* 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}
/* On a phone the wordmark plus five sections are wider than the screen, and the
   nav's overflow scroll clipped the last item ("Private") past the right edge
   with no affordance to reach it: a tap there hit nothing. Wrap instead of clip,
   so the wordmark takes one row and the sections their own full-width row. */
@media(max-width:620px){
  .sitebar{flex-wrap:wrap;padding:0 18px;gap:0;min-height:0}
  .sitebar .me{min-height:44px}
  .sitebar nav{margin-left:0;width:100%;overflow-x:visible;flex-wrap:wrap;gap:1px}
  .sitebar nav a{padding:0 8px;min-height:44px}
}
/* On the narrowest phones still in use the five sections wrap to a third row and
   the sticky bar starts eating the page. Tighten until they fit one row. */
@media(max-width:369px){
  .sitebar{padding:0 12px}
  .sitebar nav a{padding:0 6px;font-size:12.5px}
}