/* ============================================================
   site.css: shared chrome for ianhargreaves.*
   Carries the design tokens, reset, grid, top bar, index strip
   and footer used by every page. Page-specific rules stay inline
   in each page's own <style>.

   THEME: light is the default (the neutral base). A page goes dark only
   when it IS an interactive tool, by overriding the five base tokens in
   its own :root, e.g. ab-testing.html:
       :root{--bg:#111111;--fg:#f9f3ee;--fg-2:#9a9a9a;--rule:#f9f3ee;--rule-2:#333333;}
   The --paper/--ink/--hair aliases below mean a page's existing
   page-specific rules (which may use either vocabulary) keep working
   without edits.
   ============================================================ */
:root{
  --red:#e8271e;--green:#39b87f;--blue:#5a9fd6;
  /* base role tokens (light default) */
  --bg:#f9f3ee;--fg:#111111;--fg-2:#6b6b6b;--rule:#111111;--rule-2:#cfc7bd;--fg-body:#262626;
  /* light-vocabulary aliases: resolve to whatever the base tokens are */
  --paper:var(--bg);--ink:var(--fg);--ink-2:var(--fg-2);--hair:var(--rule-2);
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --exp:'Archivo Expanded','Archivo',sans-serif;
  --mono:'Space Mono',monospace;
  --cols:12;--gutter:24px;--margin:40px;
}
/* THEME OVERRIDE. Light is the default in :root above; tool pages set their own
   dark :root. A remembered choice puts data-theme on <html>, and because an
   attribute selector outranks :root (and a tool page's own :root), it reskins the
   whole page. No choice set means each page keeps its designed default. */
html[data-theme="light"]{--bg:#f9f3ee;--fg:#111111;--fg-2:#6b6b6b;--rule:#111111;--rule-2:#cfc7bd;--fg-body:#262626;}
html[data-theme="dark"]{--bg:#111111;--fg:#f9f3ee;--fg-2:#9a9a9a;--rule:#f9f3ee;--rule-2:#333333;--fg-body:#e9e3db;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--red);color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--gutter);padding-left:var(--margin);padding-right:var(--margin);max-width:1440px;margin:0 auto}
a{color:inherit;text-decoration:none}

.topbar{position:relative;border-bottom:1.5px solid var(--rule)}
.topbar .id{grid-column:span 6;padding:18px 0;font-family:var(--exp);font-weight:800;font-size:18px;letter-spacing:-.01em;text-transform:uppercase;display:flex;align-items:center}
.topbar .id b{color:var(--red);margin-left:2px}
.topbar .id a{color:inherit;text-decoration:none;transition:color .15s}
.topbar .id a:hover{color:var(--red)}
.topbar nav{grid-column:span 6;display:flex;justify-content:flex-end;align-items:center}
.topbar nav a{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:0 18px;align-self:stretch;display:flex;align-items:center;border-left:1px solid var(--rule-2);transition:background .15s,color .15s}
.topbar nav a:last-child{border-right:1px solid var(--rule-2)}
.topbar nav a:hover{background:var(--red);color:var(--fg)}
.topbar nav a.active{color:var(--red)}
.themetoggle{font-family:var(--mono);font-size:11px;background:none;border:none;border-left:1px solid var(--rule-2);border-right:1px solid var(--rule-2);color:inherit;cursor:pointer;padding:0 14px;align-self:stretch;display:flex;align-items:center;transition:background .15s,color .15s}
.themetoggle:hover{background:var(--red);color:var(--fg)}
.themetoggle svg{display:block;width:15px;height:15px}

.indexstrip{border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--fg-2)}
.indexstrip .l{grid-column:span 6;padding:8px 0;text-transform:uppercase}
.indexstrip .r{grid-column:span 6;padding:8px 0;text-align:right;text-transform:uppercase}

footer{padding-top:48px;padding-bottom:56px}
footer .fid{grid-column:span 6;font-family:var(--exp);font-weight:800;font-size:28px;text-transform:uppercase;letter-spacing:-.015em}
footer .fid b{color:var(--red)}
footer .fid a{color:inherit;text-decoration:none;transition:color .15s}
footer .fid a:hover{color:var(--red)}
footer .flinks{grid-column:span 6;display:flex;justify-content:flex-end;align-items:flex-start;flex-wrap:wrap}
footer .flinks a{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:0 16px;border-left:1px solid var(--rule-2)}
footer .flinks a:hover{color:var(--red)}
footer .ffine{grid-column:span 12;margin-top:48px;font-family:var(--mono);font-size:10.5px;color:var(--fg-2);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between;border-top:1px solid var(--rule-2);padding-top:14px;gap:14px;flex-wrap:wrap}

/* follow ask: shared CTA band, placed just before the footer; adapts to light/dark via tokens.
   LinkedIn is the primary action (button); Substack is the quieter secondary link. */
.followband{border-top:1.5px solid var(--rule)}
.followband .grid{padding-top:0}
.follow{grid-column:span 12;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding:40px 0 44px}
.follow .fmain{max-width:54ch}
.follow .fk{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.follow .ftxt{font-family:var(--sans);font-weight:500;font-size:clamp(16px,1.7vw,19px);line-height:1.4;color:var(--fg-2)}
.follow .ftxt b{color:var(--fg);font-weight:600}
.follow .facts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.follow .fbtn{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:14px 24px;border:1.5px solid var(--fg);color:var(--fg);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.follow .fbtn:hover{background:var(--red);border-color:var(--red);color:#f9f3ee}
.follow .flnk{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap;transition:color .15s}
.follow .flnk:hover{color:var(--red)}

/* stack the follow band before the row gets tight enough to half-wrap (squished-left) */
@media(max-width:1000px){
  .follow{flex-direction:column;align-items:flex-start;gap:22px}
  .follow .facts{gap:14px}
}

@media(max-width:900px){
  :root{--margin:18px;--gutter:12px}
  body{font-size:15px}
  .topbar .grid{padding-top:0;padding-bottom:0}
  .topbar .id{grid-column:span 12;font-size:16px;padding:14px 0;border-bottom:1px solid var(--rule-2)}
  .topbar nav{grid-column:span 12;justify-content:stretch}
  .topbar nav a{flex:1;padding:14px 4px;font-size:11px;justify-content:center;text-align:center;letter-spacing:.03em}
  .topbar .themetoggle{position:absolute;top:7px;right:var(--margin);z-index:10;border:1px solid var(--rule-2);background:var(--bg);color:var(--fg);padding:8px}
  .indexstrip .l,.indexstrip .r{font-size:9.5px}
  footer .fid,footer .flinks{grid-column:span 12}
  footer .flinks{justify-content:flex-start;margin-top:16px}
  footer .flinks a:first-child{padding-left:0;border-left:none}
  footer .ffine{flex-direction:column;gap:6px}
  .follow{flex-direction:column;align-items:flex-start;gap:20px;padding:32px 0 36px}
  .follow .facts{gap:14px}
  .follow .fbtn{width:100%;text-align:center;box-sizing:border-box}
}
