/* Blue Marshal: the drawing set, in the hound's colours (2026-11-12).
   Night-city black, chrome line work, electric blue glow for links and focus, threat red for warnings only.
   Colours sampled from the hound art (art/hound-icon-original.png).
   B612 (cockpit display face) for headings and the title block, Literata for reading, B612 Mono for code. */

@font-face { font-family: "B612"; src: url("/assets/fonts/b612-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "B612"; src: url("/assets/fonts/b612-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "B612 Mono"; src: url("/assets/fonts/b612-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-wght.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  --ground: #030a12;      /* night city */
  --sheet: #0b1726;       /* panels: code, tables */
  --deep: #010307;        /* header, footer: the black outside the ring */
  --line: #e4e9ee;        /* chrome white: text */
  --pencil: #9aa7b4;      /* steel: secondary text */
  --rule: #19344e;        /* hairlines */
  --chrome: #c9d1d9;      /* frame lines */
  --grid: rgba(77, 183, 232, 0.06);
  --flag: #4db7e8;        /* electric blue: links, focus */
  --glow: rgba(77, 183, 232, 0.35);
  --threat: #d73337;      /* warning marks only */
  --threat-text: #ff5a5f; /* red text that passes contrast */

  --display: "B612", "DejaVu Sans", "Segoe UI", sans-serif;
  --text: "Literata", Georgia, "Times New Roman", serif;
  --mono: "B612 Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --measure: 68ch;
  --wide: 76rem;
  --step--1: 0.875rem;
  --step-0: 1.125rem;
  --step-1: 1.35rem;
  --step-2: 1.7rem;
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
  --step-4: clamp(2.4rem, 1.5rem + 4vw, 4.2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--line);
  font: 400 var(--step-0)/1.72 var(--text);
  font-optical-sizing: auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--line); text-decoration-color: var(--flag); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--flag); text-shadow: 0 0 10px var(--glow); }
:focus-visible { outline: 2px solid var(--flag); outline-offset: 3px; }
::selection { background: var(--flag); color: var(--deep); }

.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }

.skip { position: absolute; left: 1rem; top: -4rem; padding: 0.5rem 0.9rem; background: var(--flag); color: var(--deep); font-family: var(--display); z-index: 10; }
.skip:focus { top: 1rem; }

/* The faint drafting grid sits behind header bands only. */
.grid-band {
  background-color: var(--deep);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--rule);
}

/* ---------- site header and footer ---------- */
.site-head { background: linear-gradient(90deg, transparent, rgba(201, 209, 217, 0.55), transparent) bottom / 100% 1px no-repeat, var(--deep); }
.site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; font: 700 1.05rem/1 var(--display); letter-spacing: 0.01em; text-decoration: none; }
.wordmark__mark { width: 1.6rem; height: 1.6rem; color: var(--flag); }
.site-nav ul { display: flex; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.site-nav a { font: 400 0.95rem/1 var(--display); text-decoration: none; color: var(--pencil); padding-block: 0.4rem; }
.site-nav a:hover { color: var(--line); }
.page-posts .nav-posts, .page-about .nav-about { color: var(--line); border-bottom: 2px solid var(--flag); }

.site-foot { margin-top: 6rem; background: linear-gradient(90deg, transparent, rgba(201, 209, 217, 0.4), transparent) top / 100% 1px no-repeat, var(--deep); color: var(--pencil); font-family: var(--display); font-size: var(--step--1); }
.site-foot__inner { padding-block: 2.5rem 3rem; display: grid; gap: 1rem; }
.site-foot__name { margin: 0; color: var(--line); font-weight: 700; }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.site-foot__links a { color: var(--pencil); }
.site-foot__links a:hover { color: var(--flag); }
.site-foot__note { margin: 0; max-width: 60ch; line-height: 1.6; }

/* ---------- the title block (the one bold element) ---------- */
.titleblock {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, auto));
  margin: 2.2rem 0 0;
  border: 1px solid var(--chrome);
  background: rgba(3, 10, 18, 0.78);
  box-shadow: 0 0 0 1px rgba(77, 183, 232, 0.25), 0 0 28px rgba(77, 183, 232, 0.18), inset 0 0 22px rgba(77, 183, 232, 0.07);
  font-family: var(--display);
  width: fit-content;
  max-width: 100%;
}
.titleblock > div { padding: 0.7rem 1.1rem 0.8rem; border-left: 1px solid rgba(201, 209, 217, 0.4); min-width: 0; }
.titleblock > div:first-child { border-left: 0; }
.titleblock dt { font-size: 0.72rem; line-height: 1.2; color: var(--pencil); margin-bottom: 0.35rem; }
.titleblock dd { margin: 0; font-size: 0.95rem; line-height: 1.3; font-weight: 700; }
.titleblock > div:last-child dd { color: var(--flag); text-shadow: 0 0 10px var(--glow); }

/* Home: the cover title block for the whole set, over the faded hound art (cyanotype duotone). */
.cover {
  padding-block: 4.5rem 4rem;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--deep) 0%, var(--deep) 34%, rgba(1, 3, 7, 0.62) 60%, rgba(1, 3, 7, 0.28) 100%),
    url("/assets/img/cover-hound.jpg");
  background-size: 24px 24px, 24px 24px, 100% 100%, auto 96%;
  background-position: 0 0, 0 0, 0 0, right 0 center;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
}
.cover__lede { margin: 0; max-width: 24ch; font: 700 var(--step-4)/1.06 var(--display); letter-spacing: -0.02em; }
.cover__intro { margin: 1.6rem 0 0; max-width: 58ch; color: var(--pencil); font-size: 1.2rem; }
.cover .titleblock { grid-template-columns: 2fr 1.2fr 1.6fr 0.8fr 1.2fr; width: 100%; margin-top: 3rem; }
.cover .titleblock dd { font-size: 1.05rem; }

/* ---------- sections ---------- */
.section { padding-block: 4rem 0; }
.section__title { margin: 0 0 1.6rem; font: 700 var(--step-2)/1.2 var(--display); }
.section__more { margin: 1.8rem 0 0; font-family: var(--display); font-size: 0.95rem; }

/* Post index: a numbered series, newest first. */
.index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.index__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 11rem; gap: 1.4rem; padding-block: 1.6rem; border-bottom: 1px solid var(--rule); align-items: baseline; }
.index__num { font: 400 0.9rem/1.3 var(--display); color: var(--flag); text-shadow: 0 0 10px var(--glow); }
.index__main h3 { margin: 0; font: 700 var(--step-1)/1.3 var(--display); }
.index__main h3 a { text-decoration: none; }
.index__main h3 a:hover { text-decoration: underline; text-decoration-color: var(--flag); }
.index__main p { margin: 0.5rem 0 0; color: var(--pencil); max-width: 64ch; font-size: 1.02rem; line-height: 1.6; }
.index__date { font: 400 0.9rem/1.3 var(--display); color: var(--pencil); text-align: right; }
.index__empty { color: var(--pencil); }

.badge { display: inline-block; margin-left: 0.6rem; padding: 0.1rem 0.5rem; border: 1px solid var(--threat); color: var(--threat-text); font: 400 0.75rem/1.4 var(--display); vertical-align: middle; }

/* ---------- posts ---------- */
.post__head { padding-block: 3.5rem 3rem; }
.post__head h1 { margin: 0; max-width: 26ch; font: 700 var(--step-3)/1.12 var(--display); letter-spacing: -0.015em; }
.post__summary { margin: 1.2rem 0 0; max-width: 60ch; color: var(--pencil); font-size: 1.2rem; }

.post__layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4rem; padding-top: 3.5rem; }
.post__layout > .prose:only-child { grid-column: 2; }

.toc { position: sticky; top: 1.5rem; align-self: start; font-family: var(--display); font-size: 0.85rem; line-height: 1.45; }
.toc__label { margin: 0 0 0.8rem; color: var(--pencil); }
.toc ol { margin: 0; padding: 0 0 0 1.3rem; border-left: 1px solid var(--rule); }
.toc li { margin: 0 0 0.55rem; padding-left: 0.2rem; color: var(--pencil); }
.toc a { color: var(--pencil); text-decoration: none; }
.toc a:hover { color: var(--line); }

.prose { min-width: 0; }
.prose > * { max-width: var(--measure); }
.prose > .table, .prose > pre, .prose > figure { max-width: min(100%, 56rem); }
.prose p { margin: 0 0 1.3rem; }
.prose h2 { margin: 3.4rem 0 1.1rem; font: 700 var(--step-2)/1.22 var(--display); scroll-margin-top: 1.5rem; }
.prose h3 { margin: 2.4rem 0 0.8rem; font: 700 var(--step-1)/1.3 var(--display); scroll-margin-top: 1.5rem; }
.prose h4 { margin: 2rem 0 0.6rem; font: 700 1.05rem/1.35 var(--display); color: var(--pencil); }
.prose > h2:first-child, .prose > p:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
.prose li { margin-bottom: 0.45rem; }
.prose li::marker { color: var(--pencil); }
.prose strong { font-weight: 650; }
.prose blockquote { margin: 2rem 0; padding: 0.2rem 0 0.2rem 1.4rem; border-left: 3px solid var(--flag); color: var(--line); font-style: italic; }
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

.prose code { font-family: var(--mono); font-size: 0.84em; padding: 0.08em 0.32em; background: var(--sheet); border: 1px solid var(--rule); }
.prose pre { margin: 1.6rem 0 2rem; padding: 1.1rem 1.25rem; background: var(--deep); border: 1px solid var(--rule); border-left: 3px solid var(--flag); overflow-x: auto; font-size: 0.85rem; line-height: 1.6; }
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: var(--line); }
.prose pre[data-lang]::before { content: attr(data-lang); display: block; margin-bottom: 0.7rem; color: var(--pencil); font: 400 0.75rem/1 var(--display); }

.prose .table { margin: 1.6rem 0 2.2rem; overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-family: var(--display); font-size: 0.86rem; line-height: 1.45; }
.prose th, .prose td { padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; border: 1px solid var(--rule); }
.prose th { background: var(--sheet); font-weight: 700; color: var(--line); }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; }
.prose td code, .prose th code { font-size: 0.92em; }

.prose figure { margin: 2.2rem 0 2.4rem; }
.prose figure img { max-height: 44rem; width: auto; }
.prose figure img { border: 1px solid var(--rule); background: var(--deep); }
.prose figcaption { margin-top: 0.7rem; color: var(--pencil); font: 400 0.85rem/1.5 var(--display); max-width: 60ch; }

.callout { margin: 2.4rem 0; padding: 1.2rem 1.4rem; border: 1px solid var(--rule); border-left: 3px solid var(--threat); background: var(--sheet); }

/* ---------- about and plain pages ---------- */
.page-head { padding-block: 3.5rem 3rem; }
.page-head h1 { margin: 0; font: 700 var(--step-3)/1.12 var(--display); }
.page-head p { margin: 1.2rem 0 0; max-width: 60ch; color: var(--pencil); font-size: 1.2rem; }
.page-body { padding-top: 3.5rem; }

.links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 1.6rem 0 2.4rem; padding: 0; list-style: none; border: 1px solid var(--chrome); box-shadow: 0 0 0 1px rgba(77, 183, 232, 0.25), 0 0 24px rgba(77, 183, 232, 0.15); max-width: 44rem; font-family: var(--display); }
.links li { border-left: 1px solid rgba(201, 209, 217, 0.4); }
.links li:first-child { border-left: 0; }
.links a { display: block; padding: 0.9rem 1.1rem; text-decoration: none; }
.links a:hover { background: var(--sheet); color: var(--line); }
.links span { display: block; color: var(--pencil); font-size: 0.72rem; margin-bottom: 0.3rem; }
.links strong { font-size: 1rem; }

/* ---------- the hound's finish: chrome headlines, city glow ---------- */
.cover__lede, .post__head h1, .page-head h1 {
  background: linear-gradient(180deg, #f6f8fa 0%, #dde3e8 52%, #8c97a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.post__head, .page-head {
  background-image:
    radial-gradient(60rem 22rem at 92% -20%, rgba(39, 78, 117, 0.55), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
}
@media (forced-colors: active) {
  .cover__lede, .post__head h1, .page-head h1 { background: none; color: CanvasText; }
}

/* ---------- responsive ---------- */
@media (max-width: 64rem) {
  .post__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .post__layout > .prose:only-child { grid-column: 1; }
  .toc { position: static; margin-bottom: 2.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--rule); }
  .cover .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover .titleblock > div { border-left: 0; border-top: 1px solid rgba(201, 209, 217, 0.4); }
  .cover .titleblock > div:nth-child(-n+2) { border-top: 0; }
  .cover .titleblock > div:nth-child(even) { border-left: 1px solid rgba(201, 209, 217, 0.4); }
  .cover .titleblock > div:last-child { grid-column: 1 / -1; border-left: 0; }
}
@media (max-width: 46rem) {
  body { font-size: 1.06rem; }
  .cover {
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px),
      linear-gradient(rgba(1, 3, 7, 0.8), rgba(1, 3, 7, 0.8)),
      url("/assets/img/cover-hound.jpg");
    background-size: 24px 24px, 24px 24px, 100% 100%, cover;
    background-position: 0 0, 0 0, 0 0, center top;
  }
  .index__row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .index__date { text-align: left; order: -1; }
  .index__num { order: -2; }
  .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .titleblock > div { border-left: 0; border-top: 1px solid rgba(201, 209, 217, 0.4); }
  .titleblock > div:nth-child(-n+2) { border-top: 0; }
  .titleblock > div:nth-child(even) { border-left: 1px solid rgba(201, 209, 217, 0.4); }
  .titleblock > div:last-child { grid-column: 1 / -1; border-left: 0; }
  .links { grid-template-columns: minmax(0, 1fr); }
  .links li { border-left: 0; border-top: 1px solid rgba(201, 209, 217, 0.4); }
  .links li:first-child { border-top: 0; }
  .site-nav ul { gap: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-head, .site-foot, .toc, .skip { display: none; }
  .grid-band { background: none; border: 0; }
  a { color: #000; }
  .titleblock, .titleblock > div { border-color: #000; box-shadow: none; }
  .cover__lede, .post__head h1, .page-head h1 { background: none; color: #000; }
}