/* ============================================================
   DOBERMAN — blog (/blog/)
   Extends the landing's "K9 yard-sign" system (ADR 0070): the
   warm-cast black ground, signage type (Big Shoulders Display),
   hairline + stitched rules, the tan execution-path spine, and
   the strict chroma doctrine — verdict trio = the only semantic
   chroma; tan = the path/structure ink; everything else is ink.
   TOKENS MIRROR landing/index.html — edit values there first,
   then sync here. Two files, one system.
   ============================================================ */

:root {
  --ink-0:  oklch(13% 0.008 55);   /* page      */
  --ink-1:  oklch(16% 0.009 55);   /* raised    */
  --ink-2:  oklch(19.5% 0.010 55); /* surface   */
  --ink-3:  oklch(25% 0.012 55);   /* surface-2 */
  --rule:   oklch(34% 0.012 55);
  --rule-2: oklch(25% 0.010 55);

  --fg:   oklch(96% 0 0);
  --fg-2: oklch(78% 0 0);          /* body-muted — 4.5:1+ on every surface here */
  --fg-3: oklch(65% 0 0);          /* labels, metadata                          */

  --tan:    oklch(74% 0.140 58);
  --tan-hi: oklch(84% 0.150 64);
  /* Border-grade tan: spine, ticks, hover underlines. DECORATIVE ONLY. */
  --tan-line: oklch(52% 0.10 58);

  --pass:  oklch(76% 0.16 152);
  --auth:  oklch(82% 0.155 78);
  --block: oklch(66% 0.205 26);

  --r-sm: 3px; --r: 6px;

  --sp-lg: clamp(5.5rem, 3.5rem + 8vw, 9.5rem);
  --sp-md: clamp(3.75rem, 2.5rem + 5vw, 6.5rem);

  --d-fast: 140ms; --d: 300ms; --d-slow: 620ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Big Shoulders Display", "Big Shoulders", var(--font);

  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --spine-x: 18px;

  --z-base: 0; --z-rail: 1; --z-nav: 50; --z-menu: 60;
}

/* ============ RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--fg);
  background: var(--ink-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--tan); color: oklch(16% 0.02 50); }

:focus-visible { outline: 2px solid var(--tan-hi); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: var(--z-menu);
  padding: 0.7rem 1.1rem; border-radius: var(--r-sm);
  background: var(--tan); color: oklch(16% 0.02 50);
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  transition: top var(--d-fast) var(--ease);
}
.skip:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ TYPE ============ */
h1, h2, h3 { line-height: 1.06; text-wrap: balance; }
h1, h2 { font-family: var(--display); line-height: 1.04; }
h1 { font-weight: 800; letter-spacing: 0.004em; }
h2 { font-weight: 700; letter-spacing: 0.004em; }
h3 { font-family: var(--font); font-weight: 600; letter-spacing: -0.012em; }
p { text-wrap: pretty; }

code, .mono { font-family: var(--mono); font-size: 0.9em; }

.lede {
  margin-top: 1.1rem; max-width: 68ch;
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.14rem);
  color: var(--fg-2); line-height: 1.72;
}

/* ============ NAV (mirrors the landing nav) ============ */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--ink-0);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d) var(--ease);
}
.nav.scrolled { border-bottom-color: var(--rule-2); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 1rem; }

.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em;
}
.brand .logo { width: 34px; height: auto; transition: transform var(--d) var(--ease); }
/* The head-tilt: a dog hears something interesting. */
.brand:hover .logo, .brand:focus-visible .logo { transform: rotate(-8deg); }

.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.lnk { font-size: 0.92rem; color: var(--fg-2); transition: color var(--d-fast) var(--ease); }
.lnk:hover { color: var(--fg); }
.lnk[aria-current="page"] { color: var(--fg); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; padding-inline: 1.05rem;
  border-radius: var(--r-sm); border: 1px solid var(--rule);
  font-size: 0.92rem; font-weight: 600; color: var(--fg);
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
.btn:hover { border-color: var(--fg-3); background: oklch(100% 0 0 / 0.05); }
.btn .bico { width: 15px; height: 15px; flex: none; }
.btn.primary {
  border-color: transparent; background: var(--tan); color: oklch(15% 0.02 50);
  padding-inline: 1.3rem;
}
.btn.primary:hover { background: var(--tan-hi); }

.mnav { display: none; position: relative; }
.mnav-btn {
  display: inline-grid; place-items: center;
  min-width: 44px; min-height: 44px; padding: 0 0.5rem;
  background: none; border: 1px solid var(--rule); border-radius: var(--r-sm);
  color: var(--fg-2); font: inherit; font-size: 0.88rem; cursor: pointer;
}
.mnav-btn[aria-expanded="true"], .mnav-btn:hover { color: var(--fg); border-color: var(--fg-3); }
.mnav-menu {
  position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: var(--z-menu);
  min-width: 11rem; padding: 0.35rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--ink-1);
}
.mnav-menu[hidden] { display: none; }
.mnav-menu a {
  display: flex; align-items: center; min-height: 44px; padding-inline: 0.8rem;
  border-radius: var(--r-sm); color: var(--fg-2); font-size: 0.94rem;
}
.mnav-menu a:hover { color: var(--fg); background: var(--ink-3); }

/* ============ COPYBOX (article CTA band) ============ */
.copybox {
  display: inline-flex; align-items: center; gap: 0.9rem;
  min-height: 44px; padding: 0 0.4rem 0 0.95rem;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--ink-1);
  font-family: var(--mono); font-size: 0.88rem;
}
.copybox .prompt { color: var(--fg-3); margin-right: 0.45rem; }
.copybox button {
  min-height: 40px; padding-inline: 0.7rem;
  border: 0; border-radius: var(--r-sm);
  background: var(--ink-3); color: var(--fg-2);
  font: inherit; font-size: 0.78rem; font-weight: 500; cursor: pointer;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.copybox button:hover { background: var(--rule); color: var(--fg); }
.copybox button.copied { background: var(--pass); color: oklch(18% 0.03 152); }

/* ============ BLOG INDEX — the field-note ledger ============ */
.bwrap { max-width: 62rem; margin-inline: auto; padding-inline: var(--gutter); }

.bhead { padding-top: clamp(3rem, 2rem + 4vw, 5rem); position: relative; }
.bhead h1 { font-size: clamp(2.8rem, 2rem + 3.5vw, 4.6rem); }
.bhead::after {
  content: ""; display: block; height: 0; margin-top: 2rem;
  border-top: 1px dashed var(--rule);
}

/* Entries as a ruled ledger on the spine — never a card grid. */
.posts { list-style: none; position: relative; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.posts::before {
  content: ""; position: absolute; z-index: -1;
  top: 0.5rem; bottom: 0.5rem; width: 2px;
  left: calc(-1 * var(--spine-x));
  background: var(--tan-line);
}
.post-row {
  display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  gap: 0.4rem 2.5rem; padding-block: 1.9rem;
  border-bottom: 1px solid var(--rule-2);
  position: relative;
}
/* Node tick: this entry, stamped on the spine at the title's cap line. */
.post-row::before {
  content: ""; position: absolute;
  left: calc(-1 * var(--spine-x) - 3.5px);
  top: calc(1.9rem + 0.5em);
  width: 9px; height: 9px; background: var(--tan-line);
}
.post-row .when { font-family: var(--mono); font-size: 0.8rem; color: var(--fg-3); line-height: 2; }
.post-row .when time { display: block; }
.post-row h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); }
.post-row h2 a:hover, .post-row h2 a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--tan-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.post-row .sub { margin-top: 0.55rem; color: var(--fg-2); max-width: 62ch; }

.sub-row { padding-block: 1.6rem; color: var(--fg-2); font-size: 0.94rem; }
.sub-row a { color: var(--fg); border-bottom: 1px solid var(--rule); transition: border-color var(--d-fast) var(--ease); }
.sub-row a:hover { border-bottom-color: var(--fg); }

/* ============ ARTICLE ============ */
.awrap { max-width: 44rem; margin-inline: auto; padding-inline: var(--gutter); }

.post-head { padding-top: clamp(2.75rem, 2rem + 3vw, 4.25rem); position: relative; }
.pmeta { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--fg-3); }
.post-head h1 { margin-top: 0.9rem; font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.5rem); }
.post-head::after {
  content: ""; display: block; height: 0; margin-top: 2rem;
  border-top: 1px dashed var(--rule);
}

/* Long-form prose. Measure capped by .awrap (~70ch); extra leading for
   light-on-dark long reading. */
.prose { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); font-size: 1.0625rem; line-height: 1.78; color: var(--fg-2); }
.prose > * + * { margin-top: 1.35em; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose h2 {
  margin-top: 2.4em;
  font-size: clamp(1.55rem, 1.3rem + 1vw, 1.95rem);
  color: var(--fg);
}
.prose h3 { margin-top: 2em; font-size: 1.2rem; color: var(--fg); }
.prose h2 + *, .prose h3 + * { margin-top: 0.8em; }
.prose a { color: var(--fg); border-bottom: 1px solid var(--rule); transition: border-color var(--d-fast) var(--ease); }
.prose a:hover { border-bottom-color: var(--fg); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-top: 0.5em; }
.prose li::marker { color: var(--fg-3); }
.prose blockquote {
  padding-left: 1.3rem;
  border-left: 1px dashed var(--rule);   /* stitched, hairline — never a stripe */
  color: var(--fg-2);
}
.prose hr { border: 0; border-top: 1px dashed var(--rule); margin-block: 2.5em; }
.prose code {
  background: var(--ink-2); color: var(--fg);
  padding: 0.12em 0.4em; border-radius: var(--r-sm);
  font-size: 0.85em;
}
.prose pre {
  background: var(--ink-1); border: 1px solid var(--rule-2); border-radius: var(--r);
  padding: 1.1rem 1rem; overflow-x: auto;
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.8; color: var(--fg-2);
}
.prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.prose figure { margin-block: 2.1em; }
.prose figure img { border: 1px solid var(--rule-2); border-radius: var(--r-sm); }
.prose figcaption { margin-top: 0.65rem; font-family: var(--mono); font-size: 0.76rem; color: var(--fg-3); }
.prose .table-scroll { overflow-x: auto; border: 1px solid var(--rule-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 540px; }
.prose th, .prose td { padding: 0.75rem 0.9rem; text-align: left; border-bottom: 1px solid var(--rule-2); }
.prose th {
  background: var(--ink-2); font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3);
}
.prose tbody tr:last-child td { border-bottom: 0; }

.src-note { margin-top: 3rem; font-family: var(--mono); font-size: 0.78rem; color: var(--fg-3); }
.src-note a { color: var(--fg-2); border-bottom: 1px solid var(--rule); }
.src-note a:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* ============ ARTICLE CTA BAND ============ */
.cta-mini {
  margin-top: var(--sp-md);
  padding-block: 2rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.1rem 2rem;
}
.cta-mini p { max-width: 46ch; color: var(--fg-2); font-size: 0.95rem; }
.cta-mini p strong { color: var(--fg); }
.cta-mini .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }

/* ============ MORE NOTES ============ */
.more { padding-block: var(--sp-md) 0; }
.more h2 { font-size: 1.5rem; }
.more ul { list-style: none; margin-top: 1.25rem; border-top: 1px solid var(--rule); }
.more li {
  display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  gap: 0.3rem 2.5rem; padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule-2);
}
.more time { font-family: var(--mono); font-size: 0.78rem; color: var(--fg-3); line-height: 2; }
.more a { color: var(--fg-2); }
.more a:hover { color: var(--fg); }

/* ============ FOOTER (mirrors the landing footer) ============ */
footer { padding-block: var(--sp-md) 3.5rem; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; }
.duty { margin-right: auto; font-family: var(--mono); font-size: 0.76rem; color: var(--fg-3); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.9rem; color: var(--fg-2); }
.foot-links a:hover { color: var(--fg); }
.disclaimer {
  margin-top: 2rem; padding-top: 1.25rem; max-width: 74ch;
  border-top: 1px solid var(--rule-2);
  font-size: 0.86rem; color: var(--fg-2); line-height: 1.7;
}
.disclaimer strong { color: var(--auth); }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .nav-links { gap: 0.6rem; }
  .nav-links .lnk { display: none; }
  .mnav { display: block; }
  /* Margins too tight for a gutter line — drop the spine and its ticks. */
  .posts::before, .post-row::before { content: none; }
}
@media (max-width: 640px) {
  .post-row, .more li { grid-template-columns: 1fr; }
  .post-row .when time, .post-row .when span { display: inline; }
  .post-row .when time::after { content: " · "; }
}

@media (prefers-reduced-motion: reduce) {
  .skip { transition: none; }
  .brand .logo { transition: none; }
}