/* Blog theme for percolationlabs.ai.
 *
 * The type system and layout discipline are taken from the design-note
 * artifacts: Spectral for display, Source Sans 3 for body, JetBrains Mono for
 * labels and code, on a paper/ink token set with a real dark mode. What is
 * kept from the brand is the accent -- the site's purple stands where those
 * artifacts use marine, and the gold survives as the second accent.
 *
 * Two rules from that system are worth stating because they are what make it
 * read as designed rather than styled:
 *   1. Spacing comes from flex/grid `gap`, never from per-element margins.
 *      Collapsing and doubled margins are the reason most long-form CSS drifts.
 *   2. Every colour is a token declared in the bare :root. Nothing gets its
 *      only definition inside a media query, or it never applies in the
 *      un-stamped "system" theme, which is what most readers actually get.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:       #F4F2F7;
  --card:        #FFFFFF;
  --ink:         #17092B;
  --body:        #453860;
  --muted:       #7A6E90;
  --rule:        #DCD5E4;
  --hair:        #EAE5F0;

  --accent:      #5B2A87;   /* the brand purple, desaturated to sit on paper */
  --accent-soft: #EDE6F4;
  --amber:       #8A6410;   /* the brand gold, taken to a legible weight */
  --amber-soft:  #F6EFDD;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #0E0A16;
    --card:        #171022;
    --ink:         #EEEAF4;
    --body:        #BFB5CE;
    --muted:       #8B7FA0;
    --rule:        #2C2338;
    --hair:        #211A2C;
    --accent:      #B98BE0;
    --accent-soft: #1E1430;
    --amber:       #D8AE5A;
    --amber-soft:  #2A2113;
  }
}
:root[data-theme="dark"] {
  --paper:       #0E0A16;
  --card:        #171022;
  --ink:         #EEEAF4;
  --body:        #BFB5CE;
  --muted:       #8B7FA0;
  --rule:        #2C2338;
  --hair:        #211A2C;
  --accent:      #B98BE0;
  --accent-soft: #1E1430;
  --amber:       #D8AE5A;
  --amber-soft:  #2A2113;
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ── Nav ────────────────────────────────────────────────────
   A rule and a row of labels. The old glass bar fought the page for
   attention, which is the opposite of what a reading surface wants. */
nav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  max-width: 44rem; margin: 0 auto; padding: .95rem 2rem;
  display: flex; align-items: center; gap: 1.4rem;
}
.nav-logo { display: flex; align-items: center; gap: .5em; text-decoration: none; }
.nav-logo img { height: 22px; width: auto; opacity: .9; }
.nav-wordmark {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.nav-wordmark span { color: var(--accent); }
nav ul { margin-left: auto; display: flex; gap: 1rem; list-style: none; align-items: center; }
nav a {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; color: var(--muted);
  transition: color .15s;
}
nav a:hover, nav a[aria-current] { color: var(--accent); }
:where(a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* The nav bar gets a wider measure than the text column. Six labels do not fit
   44rem and wrap mid-label ("WHAT WE / BUILD"), which is worse than the small
   misalignment between the logo and the first line of prose. The footer and the
   draft banner keep the text measure, so only the bar is wider. */
nav .nav-inner { max-width: 60rem; }
nav a { white-space: nowrap; }
@media (max-width: 1000px) { nav ul li:nth-child(-n+2) { display: none; } }
@media (max-width: 620px)  { nav ul li:nth-child(-n+3) { display: none; } .nav-inner { gap: .9rem; } }

/* ── The page column ────────────────────────────────────────
   One measure for everything, and gaps rather than margins throughout. */
.page {
  max-width: 44rem; margin: 0 auto;
  padding: 4rem 2rem 7rem;
  display: flex; flex-direction: column; gap: 3rem;
}
@media (max-width: 640px) { .page { padding: 2.25rem 1.2rem 4rem; gap: 2.25rem; } }

header.post-head {
  display: flex; flex-direction: column; gap: 1rem;
  border-bottom: 1px solid var(--ink); padding-bottom: 2rem;
}
.kicker {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); font-weight: 500;
}
h1 {
  color: var(--ink); font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.25rem, 6.5vw, 3.35rem); line-height: 1.04;
  letter-spacing: -.018em; text-wrap: balance;
}
.lede {
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.55;
  color: var(--ink); text-wrap: pretty;
}
.meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .05em;
  color: var(--muted); text-transform: uppercase;
}
.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); opacity: .6; }
.chip {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .25em .6em; border-radius: 2px;
}
.chip-draft { background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber); }
.chip-tag   { background: var(--accent-soft); color: var(--accent); }

/* ── Index listing ──────────────────────────────────────────
   A list of rules and titles. No cards: a card says "separate object",
   and these are entries in one index. */
.posts { display: flex; flex-direction: column; }
.post-card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 2.1rem 0; border-top: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
/* The header already closes with a rule, so the first entry must not draw a
   second one 3rem under it -- stacked rules read as a mistake. */
.post-card:first-child { border-top: 0; padding-top: .25rem; }
.post-card:last-child { border-bottom: 1px solid var(--rule); }
.post-card h2 {
  font-family: var(--serif); font-weight: 500; font-size: 1.5rem;
  line-height: 1.2; color: var(--ink); letter-spacing: -.012em;
  text-wrap: balance; border: 0; padding: 0; margin: 0;
}
.post-card:hover h2 { color: var(--accent); }
.post-card p { color: var(--body); font-size: .98rem; line-height: 1.55; }
.read-on { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* ── Article body ───────────────────────────────────────────
   Markdown output is a flat run of h2/p/ul, so the section rule the
   artifacts draw with a wrapper is drawn here on the heading itself. */
article { display: flex; flex-direction: column; gap: 1.5rem; }
article h2 {
  color: var(--ink); font-family: var(--serif); font-weight: 500;
  font-size: 1.6rem; line-height: 1.22; letter-spacing: -.015em;
  text-wrap: balance;
  border-top: 1px solid var(--rule); padding-top: 1.9rem; margin-top: 1.6rem;
}
/* The heading owns the space above it; the paragraph under it stays close, so
   a heading reads as attached to its section rather than floating between two. */
article h2 + p, article h2 + ul, article h2 + ol { margin-top: -.2rem; }
article h3 {
  color: var(--ink); font-family: var(--sans); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -.003em; margin-top: 1rem;
}
article h3 + p { margin-top: -.35rem; }
article p { text-wrap: pretty; }
article strong { color: var(--ink); font-weight: 600; }
article em { font-style: italic; }
article a {
  color: var(--accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
article ul, article ol {
  display: flex; flex-direction: column; gap: .65rem; padding-left: 1.2rem;
}
article li::marker { color: var(--accent); }
article li > ul, article li > ol { margin-top: .5rem; }

article blockquote {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--amber); border-radius: 3px;
  padding: 1.2rem 1.4rem;
  display: flex; flex-direction: column; gap: .8rem;
  font-size: .95rem; line-height: 1.65; color: var(--body);
}

article code {
  font-family: var(--mono); font-size: .86em;
  background: var(--hair); color: var(--ink);
  padding: .08em .3em; border-radius: 2px;
}
article pre {
  font-family: var(--mono); font-size: .8rem; line-height: 1.7;
  background: var(--card); border: 1px solid var(--rule); border-radius: 3px;
  padding: 1.1rem 1.25rem; overflow-x: auto; color: var(--body);
}
article pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

.scroll, article table { overflow-x: auto; }
article table {
  display: block; border-collapse: collapse; width: 100%; font-size: .87rem;
}
article th, article td {
  padding: .48rem .65rem; border-bottom: 1px solid var(--hair);
  vertical-align: top; text-align: left;
}
article thead th {
  color: var(--muted); font-family: var(--mono); font-weight: 500;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--rule);
}
article tbody tr:last-child td { border-bottom: none; }

/* Pygments. Two accents only, so code never out-shouts the prose. */
.codehilite .k, .codehilite .kd, .codehilite .kn, .codehilite .kt { color: var(--accent); font-weight: 500; }
.codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sb { color: var(--amber); }
.codehilite .c, .codehilite .c1, .codehilite .cm { color: var(--muted); font-style: italic; }
.codehilite .nf, .codehilite .nb { color: var(--ink); }
.codehilite .mi, .codehilite .mf { color: var(--amber); }

/* ── Draft banner ───────────────────────────────────────────
   The one place on the page allowed to interrupt. */
.draftbar {
  border-bottom: 1px solid var(--amber);
  background: var(--amber-soft); color: var(--amber);
}
.draftbar .nav-inner { padding-top: .6rem; padding-bottom: .6rem; display: block; }
.draftbar strong {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
}
.draftbar span { font-size: .82rem; line-height: 1.5; }
.draftbar code { font-family: var(--mono); font-size: .92em; }

/* ── Syndication panel ──────────────────────────────────────
   A panel with a left accent, the same object the artifacts use for a
   callout, because that is what this is. */
.port {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent); border-radius: 3px;
  padding: 1.35rem 1.5rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.port h4 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.port p { font-size: .87rem; line-height: 1.55; color: var(--body); }
.port-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.port button, .port a.port-btn {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .07em;
  text-transform: uppercase; padding: .55em 1em; border-radius: 2px;
  cursor: pointer; text-decoration: none;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  transition: border-color .15s, color .15s;
}
.port button:hover, .port a.port-btn:hover { border-color: var(--accent); color: var(--accent); }
.port button.done { border-color: var(--amber); color: var(--amber); }

/* ── Footer ─────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule); color: var(--muted);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .05em;
}
footer .nav-inner { padding-top: 1.4rem; padding-bottom: 3rem; flex-wrap: wrap; gap: .6rem 1.4rem; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--accent); }
footer .spacer { margin-left: auto; }

.backlink {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.backlink:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}