/* Rob's Personal Projects — style sheet v1.0 (2026-10-11).
   Modernist structure (Archivo, 2px rules, square corners, flush-left labels)
   with one blue accent. Every value lives in the tokens below; see README.md.
   Fonts: self-host fonts/archivo.woff2 next to this file (SIL OFL), so pages
   make no third-party requests. Class prefix rp- avoids collisions. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/archivo.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/archivo-italic.woff2) format("woff2")}

:root{
  /* ground and ink */
  --rp-bg:#f3f2f2;            /* page */
  --rp-surface:#eae9e9;       /* prompt boxes, tinted cells */
  --rp-ink:#201e1d;           /* text, 2px rules, ink panels */
  --rp-muted:#605d5d;         /* secondary text, 5.8:1 on bg */
  --rp-rule:#201e1d;          /* structural rules are ink, 2px */
  --rp-rule-soft:#9b9797;     /* row rules inside a table or cell */
  /* the one accent */
  --rp-accent:#205bb6;        /* marks, numbers, bands, button fill; white on it 6.5:1 */
  --rp-accent-text:#174a94;   /* links and small accent text, 7.7:1 on bg */
  --rp-accent-deep:#172441;   /* hover and pressed */
  --rp-on-accent:#ffffff;
  /* chart series: fixed order, never cycled. Validated with the dataviz
     checker on #f3f2f2: CVD worst 9.1, normal-vision worst 22.9. Three sit
     under 3:1 on the ground, so every mark gets a 1px ink outline plus a
     legend and direct labels. */
  --rp-series-1:#2a78d6;      /* blue */
  --rp-series-2:#eb6834;      /* orange */
  --rp-series-3:#1baf7a;      /* aqua */
  --rp-series-4:#eda100;      /* yellow */
  --rp-series-outline:#201e1d;
  /* type */
  --rp-font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rp-w-body:400;--rp-w-label:600;--rp-w-head:800;
  /* space (4px base) and shape */
  --rp-s1:4px;--rp-s2:8px;--rp-s3:12px;--rp-s4:16px;--rp-s5:20px;--rp-s6:24px;--rp-s8:32px;--rp-s10:40px;--rp-s12:48px;--rp-s14:56px;
  --rp-radius:0;              /* never round a corner */
  --rp-max:1200px;
  --rp-gutter:24px;
}
/* Dark theme: opt in with data-theme="dark" on <html>; tokens re-stepped and checked */
:root[data-theme="dark"]{
  --rp-bg:#171615;--rp-surface:#222120;--rp-ink:#f3f2f2;--rp-muted:#b8b4b4;--rp-rule:#f3f2f2;--rp-rule-soft:#5d5a59;
  --rp-accent:#2a64c4;--rp-accent-text:#7fa8ec;--rp-accent-deep:#5b8fe0;--rp-on-accent:#ffffff;
  --rp-series-1:#3987e5;--rp-series-2:#d95926;--rp-series-3:#199e70;--rp-series-4:#c98500;--rp-series-outline:#f3f2f2;
}

/* — base — */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--rp-bg);color:var(--rp-ink);font:var(--rp-w-body) 16px/1.6 var(--rp-font);text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--rp-font);font-weight:var(--rp-w-head);line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:var(--rp-accent-text);text-underline-offset:3px}
a:hover{color:var(--rp-accent-deep)}
:focus-visible{outline:2px solid var(--rp-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--rp-accent) 25%,transparent)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.rp-skip{position:absolute;left:12px;top:-100px;background:var(--rp-bg);padding:12px;z-index:2}
.rp-skip:focus{top:12px}
.rp-page{max-width:var(--rp-max);margin:0 auto;padding:0 var(--rp-gutter)}

/* — chrome — */
.rp-backlink{background:var(--rp-ink);padding:var(--rp-s2) max(var(--rp-gutter),calc((100% - var(--rp-max))/2 + var(--rp-gutter)));font-size:13px}
.rp-backlink a{color:var(--rp-bg);text-decoration:none}
.rp-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rp-s2) var(--rp-s6);padding:14px max(var(--rp-gutter),calc((100% - var(--rp-max))/2 + var(--rp-gutter)));border-bottom:2px solid var(--rp-rule)}
.rp-nav a{color:var(--rp-ink);text-decoration:none;font-size:15px;white-space:nowrap}
.rp-nav a:hover{color:var(--rp-accent-text);text-decoration:underline}
.rp-nav a[aria-current=page]{color:var(--rp-accent-text);font-weight:var(--rp-w-label)}
.rp-nav .rp-brand{margin-right:auto;font-size:18px;font-weight:var(--rp-w-head);color:var(--rp-ink)}
.rp-footer{width:calc(100% - 2*var(--rp-gutter));max-width:calc(var(--rp-max) - 2*var(--rp-gutter));margin:var(--rp-s12) auto 0;padding:var(--rp-s4) 0 28px;border-top:2px solid var(--rp-rule);font-size:13px;color:var(--rp-muted)}

/* — hero — */
.rp-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:var(--rp-s6) var(--rp-s8);padding:var(--rp-s12) 0 var(--rp-s8);align-items:end}
.rp-hero-title{display:flex;flex-direction:column;gap:14px}
.rp-display{font-size:clamp(44px,6.5vw,88px);line-height:.98;letter-spacing:-.03em}
.rp-display .rp-line{display:block}
.rp-dot{color:var(--rp-accent)}  /* the accent period that ends a display title */
.rp-kicker{font-size:13px;font-weight:var(--rp-w-label);letter-spacing:.08em;text-transform:uppercase;color:var(--rp-accent-text)}
.rp-label{font-size:12px;font-weight:var(--rp-w-label);letter-spacing:.08em;text-transform:uppercase;color:var(--rp-muted)}
.rp-lede{font-size:20px;line-height:1.5;max-width:540px}

/* — sections — */
.rp-section{padding-top:var(--rp-s14);display:flex;flex-direction:column;gap:var(--rp-s4)}
.rp-section-head{display:flex;align-items:baseline;gap:var(--rp-s6);padding-bottom:var(--rp-s4);border-bottom:2px solid var(--rp-rule)}
.rp-num{font-size:72px;font-weight:var(--rp-w-head);line-height:.9;letter-spacing:-.04em;color:var(--rp-accent);font-variant-numeric:tabular-nums}
.rp-section-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.05;letter-spacing:-.025em}
.rp-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--rp-s2);border-top:2px solid var(--rp-rule);padding:10px 0;font-size:13px;font-weight:var(--rp-w-label);letter-spacing:.08em;text-transform:uppercase}

/* — the visible grid: equal cells divided by 2px rules — */
.rp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--rp-cell,260px),1fr));border-top:2px solid var(--rp-rule);border-bottom:2px solid var(--rp-rule)}
.rp-grid>*{padding:var(--rp-s6);border-left:2px solid var(--rp-rule);min-width:0}
.rp-grid>*:first-child{border-left:0;padding-left:0}
.rp-grid>*:last-child{padding-right:0}
.rp-grid.rp-boxed{border:2px solid var(--rp-rule)}
.rp-grid.rp-boxed>*{padding:var(--rp-s4)}
.rp-grid.rp-boxed>*:first-child{padding-left:var(--rp-s4)}
.rp-grid.rp-boxed>*:last-child{padding-right:var(--rp-s4)}
@media (max-width:700px){.rp-grid>*{border-left:0;padding-left:0;padding-right:0;border-top:2px solid var(--rp-rule)}.rp-grid>*:first-child{border-top:0}}
.rp-tinted{background:var(--rp-surface)}

/* — fields: the accent band and the ink panel. Only large text on a band — */
.rp-band{background:var(--rp-accent);color:var(--rp-on-accent)}
.rp-band-inner{max-width:var(--rp-max);margin:0 auto;padding:36px var(--rp-gutter);display:flex;flex-wrap:wrap;gap:var(--rp-s2) var(--rp-s8);align-items:baseline}
.rp-band-big{font-size:clamp(40px,5.5vw,76px);font-weight:var(--rp-w-head);line-height:1;letter-spacing:-.03em}
.rp-panel{background:var(--rp-ink);color:var(--rp-bg);padding:var(--rp-s6)}
.rp-panel a{color:var(--rp-bg)}

/* — buttons: square, label flush left, trailing glyph at the far right — */
.rp-btn{display:inline-flex;justify-content:space-between;align-items:center;gap:var(--rp-s6);min-width:220px;min-height:48px;padding:12px 16px;border:0;border-radius:var(--rp-radius);font:var(--rp-w-head) 15px/1.25 var(--rp-font);text-align:left;text-decoration:none;cursor:pointer}
.rp-btn-primary{background:var(--rp-accent);color:var(--rp-on-accent)}
.rp-btn-primary:hover{background:var(--rp-accent-deep);color:var(--rp-on-accent)}
.rp-btn-secondary{background:transparent;color:var(--rp-ink);box-shadow:inset 0 0 0 2px var(--rp-ink)}
.rp-btn-secondary:hover{background:var(--rp-ink);color:var(--rp-bg)}
.rp-btn-on-band{background:var(--rp-bg);color:var(--rp-ink)}
.rp-btn-block{display:flex;width:100%}
.rp-link{font-size:15px;font-weight:var(--rp-w-label)}

/* — content pieces — */
.rp-note{display:flex;gap:var(--rp-s3);font-size:15px;line-height:1.5}
.rp-note::before{content:"";flex:0 0 10px;height:10px;margin-top:6px;background:var(--rp-accent)}
.rp-steps{margin:0;padding:0;list-style:none;counter-reset:rp;display:flex;flex-direction:column;gap:6px}
.rp-steps>li{counter-increment:rp;display:flex;gap:14px;align-items:baseline}
.rp-steps>li::before{content:counter(rp,decimal-leading-zero);flex:0 0 24px;font-weight:var(--rp-w-head);color:var(--rp-accent-text);font-variant-numeric:tabular-nums}
.rp-tag{display:inline-block;font-size:11px;font-weight:var(--rp-w-head);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:2px solid var(--rp-accent-text);color:var(--rp-accent-text)}
.rp-table-wrap{overflow-x:auto}
.rp-table{border-collapse:collapse;width:100%;font-size:15px}
.rp-table th,.rp-table td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--rp-rule-soft)}
.rp-table th:first-child,.rp-table td:first-child{padding-left:0}
.rp-table thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-top:2px solid var(--rp-rule);border-bottom:2px solid var(--rp-rule)}
.rp-table tbody th{font-weight:var(--rp-w-head)}
.rp-prompt{border:2px solid var(--rp-rule)}
.rp-prompt>header{display:flex;justify-content:space-between;align-items:center;gap:var(--rp-s4);padding-left:var(--rp-s4);border-bottom:2px solid var(--rp-rule);font-weight:var(--rp-w-head)}
.rp-prompt>pre,.rp-prompt>p{margin:0;padding:14px var(--rp-s4);background:var(--rp-surface);font:15px/1.55 var(--rp-font);white-space:pre-wrap;max-height:220px;overflow:auto}
.rp-check{display:flex;gap:14px;align-items:flex-start;min-height:48px;padding:14px 0;border-bottom:2px solid var(--rp-rule);font-weight:var(--rp-w-label);cursor:pointer}
.rp-check input{width:20px;height:20px;margin:2px 0 0;flex-shrink:0;accent-color:var(--rp-accent)}

/* — charts: series marks outlined so light hues stay findable — */
.rp-mark-1{fill:var(--rp-series-1)}.rp-mark-2{fill:var(--rp-series-2)}.rp-mark-3{fill:var(--rp-series-3)}.rp-mark-4{fill:var(--rp-series-4)}
.rp-mark-1,.rp-mark-2,.rp-mark-3,.rp-mark-4{stroke:var(--rp-series-outline);stroke-width:1}

@media (max-width:650px){:root{--rp-gutter:16px}.rp-num{font-size:52px}.rp-nav{gap:var(--rp-s2) var(--rp-s4)}}
@media print{body{background:#fff}.rp-skip,.rp-nav,.rp-backlink{display:none}.rp-band{print-color-adjust:exact;-webkit-print-color-adjust:exact}}