/* ── Shared theme ─────────────────────────────────────────────────────
   Brings the case studies, experiments and writing onto the same
   foundation as the homepage: one typeface, one palette, one accent.
   Loaded last, so it remaps each page's own tokens rather than fighting
   its rules. Page-specific layout is left alone.                      */

body.has-rail{
  /* experiment pages (AI*.html) */
  --bg:#FBFAF7; --surface:#FFFFFF;
  --border:#E9E6DF; --border-strong:#DAD6CC;
  --text:#12120F; --text-muted:#6C6A63; --text-soft:#A3A099;
  --accent:#2F6F5E; --accent-strong:#255A4C; --accent-soft:#EEF4F1;
  /* case-study pages (work/*.html, chiblu.html) */
  --ink:#12120F; --soft:#6C6A63; --faint:#A3A099;
  --rule:#E9E6DF; --card:#FFFFFF;
  /* writing pages */
  --paper:#FBFAF7; --line:#E9E6DF;

  background:#FBFAF7;
  color:#12120F;
  font-family:'Space Grotesk','Inter',system-ui,-apple-system,sans-serif;
}

/* one typeface, except where the content is code */
body.has-rail h1, body.has-rail h2, body.has-rail h3,
body.has-rail h4, body.has-rail p, body.has-rail li,
body.has-rail span, body.has-rail a, body.has-rail div,
body.has-rail blockquote, body.has-rail figcaption,
body.has-rail button, body.has-rail em, body.has-rail strong,
body.has-rail td, body.has-rail th{
  font-family:'Space Grotesk','Inter',system-ui,-apple-system,sans-serif;
}
body.has-rail pre, body.has-rail code, body.has-rail kbd,
body.has-rail samp, body.has-rail .ascii-sketch,
body.has-rail .sm-input, body.has-rail [class*="mono"]{
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Space Grotesk stops at 700; heavier weights would silently synthesise */
body.has-rail h1, body.has-rail h2, body.has-rail h3, body.has-rail h4{
  font-weight:600; letter-spacing:-.03em;
}

/* the surfaces a page draws on */
body.has-rail main{ background:transparent; }
body.has-rail footer{ background:transparent; color:#6C6A63; }

/* anything still pinned to an old accent */
body.has-rail a:not(.r-menu a):not(.r-name a):not(.r-foot a):hover{ color:#2F6F5E; }

/* the rail keeps its own type scale regardless of the host page */
.ps-rail .r-name{ font-weight:600; }

/* ── Top alignment ────────────────────────────────────────────────────
   main already carries the offset that lines content up with the rail,
   so the first block inside it should not add its own on top.        */
body.has-rail > main > .post-wrap,
body.has-rail > main > article:first-child,
body.has-rail > main > header:first-child,
body.has-rail > main > section:first-child,
body.has-rail > main > .hero{ padding-top:0; margin-top:0; }
body.has-rail > main > *:first-child > header:first-child{ margin-top:0; }

/* ── Wide embeds ──────────────────────────────────────────────────────
   The live prototypes are fixed-width demos that used to bleed past a
   full-width column. With the rail taking the left third they no longer
   fit, so the showcase scrolls rather than the page.                  */
body.has-rail .showcase,
body.has-rail .showcase-wide{ max-width:100%; margin-left:0; margin-right:0;
  overflow-x:auto; scrollbar-width:thin; }
body.has-rail .showcase iframe{ max-width:100%; }
body.has-rail .phones3, body.has-rail .cols{ max-width:100%; }
/* a couple of article screenshots carry their intrinsic pixel width */
body.has-rail .post-body img,
body.has-rail .shipped-stack img,
body.has-rail figure img{ max-width:100%; height:auto; }

/* ── No left-edge accents ─────────────────────────────────────────────
   The 3px coloured stripe is retired sitewide. Cards and quotes are
   separated by their own border or by space, not by a bar.           */
body.has-rail .meta-item,
body.has-rail .post-body blockquote,
body.has-rail .callout,
body.has-rail .note,
body.has-rail [class*="accent-box"]{ border-left:0 !important; }
body.has-rail .post-body blockquote{ padding-left:0; border-top:1px solid #E9E6DF;
  border-bottom:1px solid #E9E6DF; padding-top:16px; padding-bottom:16px; }

/* ── One highlight family ─────────────────────────────────────────────
   Four swatches so the TL;DR keys still map to their definitions, but
   drawn from the site's own neutrals instead of four saturated hues. */
body.has-rail .tldr .hl-green,  body.has-rail .post-body .hl-g{ background:#DCE8E1; }
body.has-rail .tldr .hl-yellow, body.has-rail .post-body .hl-y{ background:#EDE6CF; }
body.has-rail .tldr .hl-pink,   body.has-rail .post-body .hl-p{ background:#ECDCD6; }
body.has-rail .tldr .hl-blue,   body.has-rail .post-body .hl-b{ background:#DCE3E8; }
body.has-rail .tldr .key{ color:#12120F; }

/* pure green was the one colour outside the palette */
body.has-rail .post-body .decision-box .yes .db-label,
body.has-rail .list-pros .sym{ color:#2F6F5E; }
body.has-rail .post-body .decision-box .no .db-label,
body.has-rail .list-cons .sym{ color:#8B3A2A; }

/* ── Section labels ───────────────────────────────────────────────────
   They were the same grey as body copy and read as a caption.        */
body.has-rail .k, body.has-rail .sec-k, body.has-rail .eye,
body.has-rail .sub, body.has-rail .bl{ color:#2F6F5E; }