@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* the site's palette, shared with the home page: a light slate
     with fog washing down from under the top of the page */
  --bg: #E6ECF7;
  --fg: #3A4657;
  --heading: #0C1524;
  --muted: #66748A;
  --accent: #2F6FE0;
  --tip: #B4521C;
  --border: rgba(20, 45, 90, .13);
  --code-bg: #DFE6F3;
  --page-art: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0));
  --page-art-size: 100% 520px;
  --page-art-repeat: no-repeat;
  --font-head: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --max-width: 720px;
}

/* Articles sit on a lighter field than the home page: long-form
   reading wants more contrast under the text. Falls back to the
   shared slate where :has() is unsupported. */
body:has(.post-layout) {
  --bg: #F2F5FC;
  --page-art: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  --page-art-size: 100% 420px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--page-art, none);
  background-size: var(--page-art-size, auto);
  background-repeat: var(--page-art-repeat, repeat);
  background-position: top center;
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.72;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
  margin-bottom: 40px;
}

.site-title {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
}

.site-title:hover {
  text-decoration: none;
  color: var(--accent);
}

.site-tagline {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Post list */
.section-heading {
  font-family: var(--font-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 16px;
}

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.post-item:first-child {
  padding-top: 0;
}

.post-link {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--heading);
}

.post-date {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 4px 0 8px;
}

.post-excerpt {
  margin: 0;
  color: var(--muted);
}

/* Single-post layout with sticky table of contents */
.post-layout {
  max-width: 1060px;
  margin: 0 auto;
  padding: 44px 20px 72px;
  display: grid;
  grid-template-columns: 210px minmax(0, 720px);
  gap: 48px;
  justify-content: center;
}

.post-main {
  min-width: 0;
}

.toc {
  position: sticky;
  top: 28px;
  align-self: start;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
}

.toc-title {
  font-family: var(--font-head);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 12px;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
}

.toc a {
  display: block;
  padding: 5px 0 5px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.toc a:hover {
  color: var(--accent);
  text-decoration: none;
}

.toc li.sub a {
  padding-left: 28px;
  font-size: 0.82rem;
}

.toc a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

@media (max-width: 900px) {
  .post-layout {
    grid-template-columns: minmax(0, 720px);
  }
  .toc {
    display: none;
  }
}

/* Back to the board the article was opened from. It sits inside
   .toc, whose own `a` rule would otherwise set its display, padding
   and colour, so it is scoped to .toc to outrank it. */
.toc .bk-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* .toc scrolls, so it clips: leave the arrow room to slide into */
  padding-left: 5px;
  margin: 0 0 26px;
  border-left: 0;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.toc .bk-ghost:hover { text-decoration: none; }
.toc .bk-ghost .arw { transition: transform .15s ease; }
.toc .bk-ghost:hover .arw { transform: translateX(-3px); }

/* the contents rail is hidden on narrow screens; keep just the link */
@media (max-width: 900px) {
  .post-layout > .toc { display: block; position: static; max-height: none; overflow: visible; }
  .toc > .toc-title, .toc > ul { display: none; }
}

/* Single post */
.post-eyebrow {
  font-family: var(--font-head);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 14px;
}

.post h2,
.post h3 {
  scroll-margin-top: 24px;
}

.post-title {
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--heading);
  margin: 0 0 6px;
}

.post h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--heading);
  margin-top: 2em;
}

.post h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  color: var(--heading);
  margin-top: 1.7em;
}

.post p strong {
  color: var(--heading);
  font-weight: 700;
}

.post code {
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Callouts — designed inserts with a tag label + icon */
.callout {
  border-left: 3px solid var(--c);
  padding: 4px 0 4px 22px;
  margin: 32px 0;
}

.call-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, var(--bg));
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.call-tag::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--c);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.callout p {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--fg);
}

.callout-example {
  --c: var(--accent);
  --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%203h6%27%2F%3E%3Cpath%20d%3D%27M10%203v5.5L5.2%2017a2%202%200%200%200%201.7%203h10.2a2%202%200%200%200%201.7-3L14%208.5V3%27%2F%3E%3Cpath%20d%3D%27M7.5%2014h9%27%2F%3E%3C%2Fsvg%3E");
}

.callout-tip {
  --c: var(--tip);
  --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2018h6%27%2F%3E%3Cpath%20d%3D%27M10%2021h4%27%2F%3E%3Cpath%20d%3D%27M12%203a6%206%200%200%200-3.6%2010.8c.5.4.9%201%201%201.7l.1.5h5l.1-.5c.1-.7.5-1.3%201-1.7A6%206%200%200%200%2012%203z%27%2F%3E%3C%2Fsvg%3E");
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 60px;
  padding: 24px 0;
}

.site-footer p {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}