/* KAHN.tools — Site Styles
 * 
 * Grid system: 12-column at ≥1120px, 6-column at 720–1119px, 1-column at <720px
 * Type hierarchy: display (H1), body serif (lede), mono (code/metadata)
 * Spacing: 8px base unit via --k-s-* custom properties
 * Motion: mechanical (cubic-bezier), no springs or bounces
 * Responsive: mobile-first, three breakpoints
 * Accessibility: focus rings (amber outline), skip-link, reduced-motion support
 */

/* ========== RESET & BASE ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-margin-top: 70px; /* Offset fixed masthead on anchor links */
}

body {
  background-color: var(--k-ink-00);
  color: var(--k-ink-80);
  font-family: var(--k-body);
  font-size: var(--k-t-base);
  line-height: var(--k-lh-body);
  letter-spacing: var(--k-track-body);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== ACCESSIBILITY: SKIP LINK ========== */
.skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 999;
  padding: var(--k-s-3);
  background-color: var(--k-amber);
  color: var(--k-amber-ink);
  text-decoration: none;
  border-radius: var(--k-r);
}

.skip-link:focus {
  top: 0;
  left: 0;
}

/* ========== MASTHEAD (§2.3) ========== */
.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  background-color: var(--k-ink-00);
  border-bottom: var(--k-border);
  backdrop-filter: none; /* Spec: transparent background, no blur */
}

.masthead-inner {
  max-width: var(--k-max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--k-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo & Wordmark */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--k-ink-80);
  transition: color var(--k-dur-1) linear;
}

.logo:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

.logo:hover {
  color: var(--k-amber);
}

.logo-mark {
  width: 24px;
  height: 24px;
  color: var(--k-amber);
  display: block; /* kill the inline-baseline gap when the mark is an <img> */
}

.wordmark {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-60);
  text-decoration: none;
  margin-left: var(--k-s-3);
  transition: color var(--k-dur-1) linear;
}

.wordmark:hover {
  color: var(--k-ink-80);
}

/* Navigation */
.nav-primary {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-primary ul {
  display: flex;
  gap: var(--k-s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-primary a {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-80);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--k-dur-1) linear;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nav-primary a:hover {
  color: var(--k-amber);
}

.nav-primary a:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--k-s-2);
  margin: calc(-1 * var(--k-s-2));
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  background-color: var(--k-ink-80);
  transition: all var(--k-dur-2) linear;
  border-radius: 1px;
}

.nav-toggle:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translateY(10px);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translateY(-10px);
}

/* ========== MAIN CONTENT AREA ========== */
main {
  margin-top: 56px; /* Offset fixed masthead */
}

/* Section styling */
section {
  scroll-margin-top: 70px; /* Additional offset for section anchors */
}

.section-inner {
  max-width: var(--k-max-width);
  margin: 0 auto;
  padding: 0 var(--k-gutter);
}

/* ========== SECTION PREFIX & HEADINGS (§2.4) ========== */
.section-prefix {
  font-family: var(--k-mono);
  font-size: var(--k-t-md);
  color: var(--k-ink-40);
  transition: color var(--k-dur-1) linear;
  display: block;
  margin-right: var(--k-s-6);
}

.section-heading {
  font-family: var(--k-display);
  font-size: var(--k-t-xl);
  font-weight: 700;
  color: var(--k-ink-95);
  letter-spacing: var(--k-track-display);
  line-height: var(--k-lh-display);
  margin: var(--k-s-12) 0 var(--k-s-8);
  display: flex;
  align-items: baseline;
  gap: 0;
}

.section-heading .section-prefix {
  flex-shrink: 0;
  margin-right: var(--k-s-6);
}

.section-heading span {
  flex: 1;
}

/* ========== /00 HERO ========== */
.hero {
  padding: 80px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--k-s-6);
  align-items: center;
}

.hero-left {
  grid-column: 1 / 8;
}

.hero-right {
  grid-column: 8 / 13;
  opacity: 0;
  animation: hero-enter var(--k-dur-4) var(--k-ease-out) 500ms both;
}

.eyebrow {
  font-family: var(--k-mono);
  font-size: var(--k-t-xs);
  color: var(--k-ink-40);
  letter-spacing: 0.1em;
  margin-bottom: var(--k-s-6);
  text-transform: uppercase;
  opacity: 0;
  animation: hero-enter var(--k-dur-4) var(--k-ease-out) 100ms both;
}

.h1 {
  font-family: var(--k-display);
  font-size: var(--k-t-2xl);
  font-weight: 700;
  color: var(--k-ink-95);
  letter-spacing: var(--k-track-display);
  line-height: var(--k-lh-display);
  margin-bottom: var(--k-s-8);
  position: relative;
  opacity: 0;
  animation: hero-enter var(--k-dur-4) var(--k-ease-out) 200ms both;
}

/* Cursor blink animation */
.cursor {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background-color: var(--k-amber);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: blink var(--k-heartbeat) steps(2, start) infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Hero entrance: CSS-only staggered reveal */
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lede {
  font-family: var(--k-body);
  font-size: var(--k-t-md);
  color: var(--k-ink-80);
  line-height: var(--k-lh-body);
  max-width: var(--k-ch-max);
  margin-bottom: var(--k-s-8);
  opacity: 0;
  animation: hero-enter var(--k-dur-4) var(--k-ease-out) 300ms both;
}

.lede code {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-95);
  background-color: var(--k-ink-05);
  padding: 2px 4px;
  border-radius: var(--k-r);
}

/* CTA Row */
.cta-row {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-6);
  opacity: 0;
  animation: hero-enter var(--k-dur-4) var(--k-ease-out) 400ms both;
}

/* ========== CODE BLOCKS ========== */
.code-block {
  position: relative;
  background-color: var(--k-ink-05);
  border: var(--k-border);
  border-radius: var(--k-r);
  padding: var(--k-s-6);
  box-shadow: var(--k-shadow-2);
}

.code-block pre {
  margin: 0;
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-80);
  line-height: var(--k-lh-mono);
  overflow-x: auto;
  white-space: pre;
}

.code-block code {
  display: block;
}

/* Clipboard button */
.clipboard-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: var(--k-t-sm);
  color: var(--k-ink-60);
  cursor: pointer;
  padding: var(--k-s-2);
  transition: color var(--k-dur-1) linear;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--k-r);
}

.clipboard-btn:hover {
  color: var(--k-amber);
  background-color: var(--k-ink-10);
}

.clipboard-btn:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
}

/* CTA secondary links row */
.cta-links {
  display: flex;
  gap: var(--k-s-6);
  align-items: center;
}

/* Links */
.link-secondary {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-60);
  text-decoration: none;
  border-bottom: 1px solid var(--k-ink-40);
  padding-bottom: 1px;
  transition: color var(--k-dur-1) linear, border-color var(--k-dur-1) linear;
}

.link-secondary:hover {
  color: var(--k-amber);
  border-color: var(--k-amber);
}

.link-secondary:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

/* DAG SVG in hero */
.dag-hero {
  width: 100%;
  height: auto;
  min-height: 400px;
  color: var(--k-ink-80);
}

/* ========== /01 PROBLEM ========== */
.problem {
  padding: var(--k-s-24) 0;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--k-s-8);
  align-items: start;
}

.problem-left {
  grid-column: 1 / 7;
}

.problem-right {
  grid-column: 7 / 13;
}

.failure-log {
  background-color: var(--k-ink-05);
  border: var(--k-border);
  border-radius: var(--k-r);
  padding: var(--k-s-6);
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-80);
  line-height: var(--k-lh-mono);
  white-space: pre;
  overflow-x: auto;
  /* Fade to transparent bottom */
  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}

.failure-log .amber {
  color: var(--k-amber);
}

.explanation {
  font-size: var(--k-t-md);
  color: var(--k-ink-80);
  line-height: var(--k-lh-body);
  max-width: var(--k-ch-narrow);
}

.explanation em {
  font-style: italic;
}

/* ========== /02 MECHANISM ========== */
.mechanism {
  padding: var(--k-s-24) 0;
}

.mechanism-card {
  background-color: var(--k-ink-05);
  border: var(--k-border);
  border-radius: var(--k-r);
  padding: var(--k-s-6);
  margin-bottom: var(--k-s-8);
  box-shadow: var(--k-shadow-2);
}

.card-label {
  font-family: var(--k-mono);
  font-size: var(--k-t-xs);
  color: var(--k-ink-40);
  margin-bottom: var(--k-s-4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--k-s-8);
  align-items: start;
}

.card-left {
  font-size: var(--k-t-base);
  line-height: var(--k-lh-body);
  max-width: var(--k-ch-narrow);
}

.card-left p {
  margin-bottom: var(--k-s-4);
}

.card-left code {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-95);
  background-color: var(--k-ink-10);
  padding: 2px 4px;
  border-radius: var(--k-r);
}

/* ---------- Mechanism animated diagrams (SCAN / SCHEDULE / VERIFY) ----------
   Replaces the prior `.mechanism-diagram` ruleset. The previous
   `font-size: inherit` declaration overrode the SVG <text> font-size
   attribute and inherited the body's 17px instead, blowing out every
   label and causing visible text overlap. New rules pin font sizes
   explicitly per element class so the in-SVG layout is deterministic
   and never affected by the document font-size cascade.
*/
.mechanism-svg {
  background-color: var(--k-ink-10);
  border: var(--k-border);
  border-radius: var(--k-r);
  padding: var(--k-s-4);
  width: 100%;
  height: auto;
  display: block;
  /* Don't inherit body font-size into the SVG. */
  font-family: var(--k-mono);
  color: var(--k-ink-80);
}

.mechanism-svg text {
  font-family: var(--k-mono);
  fill: var(--k-ink-80);
  font-size: 14px;
}

.mechanism-svg line,
.mechanism-svg path,
.mechanism-svg polygon,
.mechanism-svg polyline,
.mechanism-svg circle,
.mechanism-svg rect {
  stroke: var(--k-wire, #5fb3a1);
  stroke-width: 1.25;
  fill: none;
}

/* SCAN ------------------------------------------------------------- */
.mechanism-svg[data-mechanism="scan"] .m-files text {
  fill: var(--k-ink-60);
  font-size: 14px;
  transition: fill 240ms linear;
}
.mechanism-svg[data-mechanism="scan"] .m-files text.is-active {
  fill: var(--k-amber);
}
.mechanism-svg[data-mechanism="scan"] .m-beam {
  stroke: var(--k-amber);
  stroke-width: 1.5;
  opacity: 0.55;
}
.mechanism-svg[data-mechanism="scan"] .m-gutter-label {
  font-size: 12px;
  fill: var(--k-ink-60);
}
.mechanism-svg[data-mechanism="scan"] .m-gutter-arrow {
  stroke: var(--k-ink-40);
  stroke-width: 1;
}
.mechanism-svg[data-mechanism="scan"] .m-gutter-head {
  stroke: none;
  fill: var(--k-ink-40);
}
.mechanism-svg[data-mechanism="scan"] .m-node circle {
  stroke: var(--k-wire);
  stroke-width: 1.5;
  fill: var(--k-ink-10);
}
.mechanism-svg[data-mechanism="scan"] .m-node text {
  fill: var(--k-ink-95);
  font-size: 12px;
}
.mechanism-svg[data-mechanism="scan"] .m-edge {
  stroke: var(--k-ink-40);
  stroke-width: 1.25;
}

/* SCHEDULE --------------------------------------------------------- */
.mechanism-svg[data-mechanism="schedule"] .m-lane {
  stroke: var(--k-ink-20);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.mechanism-svg[data-mechanism="schedule"] .m-lane-label {
  font-size: 13px;
  fill: var(--k-ink-60);
}
.mechanism-svg[data-mechanism="schedule"] .m-node rect {
  stroke: var(--k-wire);
  stroke-width: 1.5;
  fill: var(--k-ink-10);
}
.mechanism-svg[data-mechanism="schedule"] .m-node text {
  fill: var(--k-ink-95);
  font-size: 13px;
}
.mechanism-svg[data-mechanism="schedule"] .m-touches {
  font-size: 11px;
  fill: var(--k-ink-60);
}
.mechanism-svg[data-mechanism="schedule"] .m-conflict {
  font-size: 11px;
  fill: var(--k-fail);
  opacity: 0;
}
.mechanism-svg[data-mechanism="schedule"] .m-defer {
  stroke: var(--k-fail);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.mechanism-svg[data-mechanism="schedule"] .m-defer-head {
  stroke: none;
  fill: var(--k-fail);
}

/* VERIFY ----------------------------------------------------------- */
.mechanism-svg[data-mechanism="verify"] .m-step rect,
.mechanism-svg[data-mechanism="verify"] .m-step polygon {
  stroke: var(--k-ink-60);
  stroke-width: 1.5;
  fill: var(--k-ink-10);
}
.mechanism-svg[data-mechanism="verify"] .m-step text {
  fill: var(--k-ink-80);
  font-size: 14px;
}
.mechanism-svg[data-mechanism="verify"] .m-arrow {
  stroke: var(--k-ink-60);
  stroke-width: 1.5;
}
.mechanism-svg[data-mechanism="verify"] .m-arrow-head {
  stroke: none;
  fill: var(--k-ink-60);
}
.mechanism-svg[data-mechanism="verify"] .m-fail {
  stroke: var(--k-fail);
}
.mechanism-svg[data-mechanism="verify"] .m-fail.m-arrow-head {
  stroke: none;
  fill: var(--k-fail);
}
.mechanism-svg[data-mechanism="verify"] .m-ralph {
  stroke-dasharray: 4 3;
}
.mechanism-svg[data-mechanism="verify"] .m-mark {
  font-size: 16px;
  font-weight: 600;
}
.mechanism-svg[data-mechanism="verify"] .m-mark-pass {
  fill: var(--k-wire);
}
.mechanism-svg[data-mechanism="verify"] .m-mark-fail {
  fill: var(--k-fail);
}
.mechanism-svg[data-mechanism="verify"] .m-ralph-label {
  font-size: 11px;
  fill: var(--k-fail);
}

/* Active-step highlight: any .m-step with .is-active glows briefly. */
.mechanism-svg[data-mechanism="verify"] .m-step.is-active rect,
.mechanism-svg[data-mechanism="verify"] .m-step.is-active polygon {
  stroke: var(--k-amber);
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.4));
}
.mechanism-svg[data-mechanism="verify"] .m-step.is-done rect {
  stroke: var(--k-wire);
}

/* prefers-reduced-motion: present the diagram in its terminal state
   (everything visible) and let the JS short-circuit the timeline. */
@media (prefers-reduced-motion: reduce) {
  .mechanism-svg .m-node,
  .mechanism-svg .m-edge,
  .mechanism-svg .m-arrow,
  .mechanism-svg .m-arrow-head,
  .mechanism-svg .m-defer,
  .mechanism-svg .m-defer-head,
  .mechanism-svg .m-mark,
  .mechanism-svg .m-conflict {
    opacity: 1 !important;
  }
}

/* ========== /03 SCOPE SECTION ========== */
.scope-section {
  padding: var(--k-s-24) 0;
}

.scope-intro {
  font-size: var(--k-t-base);
  color: var(--k-ink-80);
  margin-bottom: var(--k-s-8);
  max-width: var(--k-ch-narrow);
}

.scope-intro code {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-95);
  background-color: var(--k-ink-05);
  padding: 2px 4px;
  border-radius: var(--k-r);
}

/* (Removed duplicate .scope-mock / .scope-frame / .scope-annotations
   rules that predated the dashboard redesign — they stomped the
   authoritative ruleset further down with stale heights / shapes.) */

/* ========== /04 SELF-HOST ========== */
.self-host {
  padding: var(--k-s-24) 0;
}

.selfhost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--k-s-8);
  align-items: start;
}

.selfhost-left {
  grid-column: 1;
}

.selfhost-right {
  grid-column: 2;
}

.selfhost-right p {
  font-size: var(--k-t-base);
  color: var(--k-ink-80);
  line-height: var(--k-lh-body);
  margin-bottom: var(--k-s-6);
  max-width: var(--k-ch-narrow);
}

.badge-row {
  display: flex;
  gap: var(--k-s-4);
  margin-top: var(--k-s-6);
}

.badge {
  font-family: var(--k-mono);
  font-size: var(--k-t-xs);
  color: var(--k-ink-60);
  border: 1px solid var(--k-ink-20);
  padding: var(--k-s-2) var(--k-s-3);
  border-radius: var(--k-r);
}

/* ========== /05 BUILD LOG ========== */
.buildlog {
  padding: var(--k-s-24) 0;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-4);
  position: relative;
  padding-left: var(--k-s-8);
  margin: var(--k-s-8) 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--k-ink-20);
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--k-s-4);
  padding: var(--k-s-3) 0;
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-80);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -5.5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--k-ink-20);
}

.timeline-past::before {
  background-color: var(--k-ink-80);
}

.timeline-current::before {
  background-color: var(--k-amber);
  width: 12px;
  height: 12px;
  left: -6.5px;
}

.timeline-label {
  min-width: 40px;
}

.timeline-now {
  margin-left: auto;
  color: var(--k-amber);
}

.buildlog-subscribe {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-80);
  line-height: var(--k-lh-mono);
  margin-top: var(--k-s-8);
}

.buildlog-subscribe a {
  color: var(--k-ink-80);
  text-decoration: underline;
  transition: color var(--k-dur-1) linear;
}

.buildlog-subscribe a:hover {
  color: var(--k-amber);
}

.buildlog-subscribe a:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

/* ========== /06 COLOPHON ========== */
.colophon {
  padding: var(--k-s-24) 0 var(--k-s-16);
  border-top: var(--k-border);
  margin-top: var(--k-s-16);
}

.colophon .section-heading {
  margin-bottom: var(--k-s-12);
}

.colophon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--k-s-8);
}

.colophon-col {
  font-family: var(--k-mono);
  font-size: var(--k-t-sm);
  color: var(--k-ink-80);
  line-height: var(--k-lh-mono);
}

.colophon-col p {
  margin-bottom: var(--k-s-2);
}

.colophon-label {
  color: var(--k-ink-60);
  text-transform: uppercase;
  font-size: var(--k-t-xs);
  letter-spacing: 0.05em;
  margin-bottom: var(--k-s-4);
}

.colophon-col a {
  color: var(--k-ink-80);
  text-decoration: underline;
  transition: color var(--k-dur-1) linear;
}

.colophon-col a:hover {
  color: var(--k-amber);
}

.colophon-col a:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

.colophon-note {
  color: var(--k-ink-40);
  font-size: var(--k-t-xs);
}

.amber-mark {
  color: var(--k-amber);
}

/* ========== UTILITIES ========== */
.amber {
  color: var(--k-amber);
}

code {
  font-family: var(--k-mono);
  font-size: 0.9em;
  letter-spacing: var(--k-track-mono);
}

a {
  color: inherit;
}

/* ========== RESPONSIVE: TABLET (720–1119px) ========== */
@media (max-width: 1119px) {
  .hero-left {
    grid-column: 1 / 7;
  }

  .hero-right {
    grid-column: 7 / 13;
  }

  .problem-left {
    grid-column: 1 / 7;
  }

  .problem-right {
    grid-column: 7 / 13;
  }

  .selfhost-grid {
    grid-template-columns: 1fr;
  }

  .selfhost-left {
    grid-column: 1;
  }

  .selfhost-right {
    grid-column: 1;
  }

  .card-content {
    grid-template-columns: 1fr;
  }

  .colophon-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Section prefix inline on tablet */
  .section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-heading .section-prefix {
    display: inline;
    margin-right: 0;
    margin-bottom: var(--k-s-2);
  }
}

/* ========== RESPONSIVE: MOBILE (<720px) ========== */
@media (max-width: 719px) {
  body {
    font-size: 16px;
  }

  .masthead {
    height: 56px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-primary {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background-color: var(--k-ink-05);
    border-bottom: var(--k-border);
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--k-dur-2) linear;
    z-index: 99;
  }

  .nav-primary.open {
    max-height: 400px;
  }

  .nav-primary ul {
    flex-direction: column;
    padding: var(--k-s-6);
    gap: var(--k-s-4);
  }

  main {
    margin-top: 56px;
  }

  html {
    scroll-margin-top: 70px;
  }

  section {
    scroll-margin-top: 70px;
  }

  /* Hero: stack vertically */
  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-left {
    grid-column: 1;
  }

  .hero-right {
    grid-column: 1;
    margin-top: var(--k-s-8);
  }

  .h1 {
    font-size: var(--k-t-xl);
  }

  .lede {
    font-size: var(--k-t-base);
  }

  /* Problem: single column */
  .problem-grid {
    grid-template-columns: 1fr;
    gap: var(--k-s-6);
  }

  .problem-left {
    grid-column: 1;
  }

  .problem-right {
    grid-column: 1;
  }

  .problem-left .failure-log {
    font-size: 11px;
    padding: var(--k-s-4);
  }

  /* Mechanism: single column */
  .card-content {
    grid-template-columns: 1fr;
  }

  /* Section prefix inline */
  .section-heading {
    font-size: var(--k-t-lg);
    flex-direction: column;
    align-items: flex-start;
  }

  .section-heading .section-prefix {
    margin-right: 0;
    margin-bottom: var(--k-s-2);
  }

  /* Self-host: single column */
  .selfhost-grid {
    grid-template-columns: 1fr;
  }

  /* Colophon: single column */
  .colophon-grid {
    grid-template-columns: 1fr;
  }

  /* Reduce padding on sections */
  .hero,
  .problem,
  .mechanism,
  .scope-section,
  .self-host,
  .buildlog {
    padding: var(--k-s-12) 0;
  }

  .colophon {
    padding: var(--k-s-12) 0 var(--k-s-8);
  }

  /* Badge row: wrap */
  .badge-row {
    flex-wrap: wrap;
  }
}

/* ========== DESKTOP ONLY: /00 HERO ASPECT ========== */
@media (min-width: 1120px) {
  .hero-content {
    align-items: center;
    min-height: 60vh;
  }

  .dag-hero {
    min-height: 520px;
  }
}

/* ========== FOCUS RING PATTERN (A11Y) ========== */
button:focus,
a:focus {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-r);
}

/* Remove outline on mouse-based interactions (optional refinement) */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ========== REDUCED MOTION (A11Y-05) ========== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cursor {
    animation: none;
    opacity: 1;
  }

  .node-dot-running {
    animation: none;
  }

  /* Hero entrance: disable animations, show immediately */
  .eyebrow,
  .h1,
  .lede,
  .cta-row,
  .hero-right {
    animation: none;
    opacity: 1;
  }

  .nav-toggle span {
    transition: none;
  }

  .link-secondary,
  .logo,
  .wordmark,
  .nav-primary a,
  .clipboard-btn,
  .buildlog-subscribe a,
  .colophon-col a {
    transition: none;
  }
}

/* ========== SCOPE MOCK DASHBOARD (§2.4) ========== */
.scope-mock {
  width: 100%;
  max-width: 100%;
  margin: var(--k-s-8) 0;
}

.scope-frame {
  display: flex;
  flex-direction: column;
  background-color: var(--k-ink-05);
  border: var(--k-border);
  border-radius: var(--k-r);
  box-shadow: var(--k-shadow-2);
  aspect-ratio: 16 / 10;
  min-height: 520px;
  overflow: hidden;
  font-family: var(--k-mono);
  font-size: 12px;
  color: var(--k-ink-80);
}

/* Masthead bar */
.scope-bar {
  padding: var(--k-s-3) var(--k-s-4);
  border-bottom: var(--k-border);
  background-color: var(--k-ink-10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}

.scope-bar-left {
  display: flex;
  gap: var(--k-s-4);
  align-items: center;
}

.scope-title {
  font-weight: 600;
  color: var(--k-ink-95);
}

.scope-meta {
  color: var(--k-ink-60);
}

.scope-status {
  color: var(--k-amber);
  font-weight: 600;
}

.scope-time {
  color: var(--k-ink-40);
  margin-left: auto;
}

/* Content area. Left/right column widths sized to fit their longest
   labels: node-name "schedule-touch" ≈ 14ch and log-line ≈ 32ch in
   the chosen mono at 11px. Previous values (120 / 140) clipped both. */
.scope-content {
  display: grid;
  grid-template-columns: 168px 1fr 232px;
  gap: var(--k-s-2);
  flex: 1;
  overflow: hidden;
}

/* Left sidebar: node status */
.scope-sidebar-left {
  border-right: var(--k-border);
  overflow-y: auto;
  padding: var(--k-s-2);
  font-size: 11px;
}

.node-card {
  display: flex;
  align-items: center;
  gap: var(--k-s-2);
  padding: var(--k-s-2);
  margin-bottom: var(--k-s-1);
  border-radius: 1px;
  /* No more truncation. Column is wide enough to hold the canonical
     names; if the design ever adds a longer name, prefer breaking
     the layout loud than ellipsing silently. */
  white-space: nowrap;
}

.node-card-done {
  background-color: var(--k-ink-10);
  color: var(--k-ink-80);
}

.node-card-running {
  background-color: var(--k-ink-10);
  color: var(--k-amber);
}

.node-card-pending {
  background-color: transparent;
  color: var(--k-ink-60);
}

.node-dot {
  font-size: 8px;
  flex-shrink: 0;
}

.node-dot-done {
  color: var(--k-wire);
}

.node-dot-running {
  color: var(--k-amber);
  animation: pulse-node var(--k-heartbeat) var(--k-ease-in-out) infinite;
}

.node-dot-pending {
  color: var(--k-ink-40);
}

@keyframes pulse-node {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.node-name {
  flex: 1;
  min-width: 0;
}

/* Main pane: DAG */
.scope-main {
  padding: var(--k-s-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--k-ink-00);
}

.scope-dag {
  width: 100%;
  height: 100%;
  max-height: 100%;
}

/* DAG state styling. Three states: done (filled wire-teal), active
   (stroke-only amber + outer pulse ring), pending (dim outline). */
.scope-dag .m-edge {
  stroke: var(--k-ink-20);
  stroke-width: 1;
  fill: none;
  opacity: 0.55;
}
.scope-dag .m-edge-done {
  stroke: var(--k-wire);
  stroke-width: 1.2;
  opacity: 0.85;
}
.scope-dag .m-edge-active {
  stroke: var(--k-amber);
  stroke-width: 1.2;
  opacity: 0.7;
  stroke-dasharray: 3 3;
}
.scope-dag .m-dnode {
  stroke-width: 1.5;
}
.scope-dag .m-dnode-done {
  fill: var(--k-wire);
  stroke: var(--k-wire);
}
.scope-dag .m-dnode-active {
  fill: none;
  stroke: var(--k-amber);
  stroke-width: 1.5;
}
.scope-dag .m-dnode-pulse-outer {
  fill: var(--k-amber);
  fill-opacity: 0.32;
  stroke: var(--k-amber);
  stroke-opacity: 0.7;
  stroke-width: 1;
  /* GSAP transforms the cx/cy circle attribute via the SVG attribute
     plugin and uses the SVG bbox for transform-origin automatically,
     so we don't need transform-origin/transform-box hints here — the
     prior overrides ended up nudging the halo off-centre. */
}
.scope-dag .m-dnode-pending {
  fill: none;
  stroke: var(--k-ink-40);
  stroke-width: 1;
}

/* Right sidebar: log tail */
.scope-sidebar-right {
  border-left: var(--k-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  padding: var(--k-s-2);
}

.log-title {
  color: var(--k-ink-60);
  font-size: 10px;
  letter-spacing: 0.05em;
  margin-bottom: var(--k-s-2);
  text-transform: uppercase;
}

.log-lines {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--k-mono);
  line-height: 1.4;
  color: var(--k-ink-60);
}

.log-line {
  /* Allow long lines to wrap at word boundaries — column is wider now
     and a wrapped tail still reads like a tail. */
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 10.5px;
  color: var(--k-ink-60);
  opacity: 0.92;
  transition: opacity 220ms linear;
}

/* The most recent line (top of the tail) reads the brightest. JS
   re-applies these classes as new lines stream in. */
.log-line[data-fresh="1"] { color: var(--k-ink-95); opacity: 1; }
.log-line[data-fresh="2"] { color: var(--k-ink-80); opacity: 0.96; }
.log-line[data-fresh="3"] { color: var(--k-ink-60); opacity: 0.85; }
.log-line[data-fresh="4"] { color: var(--k-ink-40); opacity: 0.65; }

/* Footer: progress bar */
.scope-footer {
  border-top: var(--k-border);
  padding: var(--k-s-3) var(--k-s-4);
  background-color: var(--k-ink-10);
  height: 35px;
  display: flex;
  align-items: center;
  gap: var(--k-s-3);
}

.progress-label {
  font-size: 11px;
  color: var(--k-ink-60);
  white-space: nowrap;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background-color: var(--k-ink-20);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--k-amber);
  transition: width var(--k-dur-2) var(--k-ease-in-out);
}

/* Annotation system. Three pillars sit in a row beneath the dashboard
   and each one's caret is anchored under the feature it labels:
     - progress  → under the start of the progress bar (left third)
     - active    → under the live DAG region (centre)
     - log       → under the log column (right edge)

   Each pillar is a vertical line + chevron + dot; the label sits
   beneath the dot. Carets are CSS-positioned in % so they re-anchor
   correctly across viewport widths.
*/
.scope-annotations {
  position: relative;
  width: 100%;
  height: 116px;
  margin-top: var(--k-s-3);
}

.annotation {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--k-mono);
  color: var(--k-amber);
  /* Centre-align the pillar on its anchor point. */
  transform: translateX(-50%);
}

/* Anchor points calibrated to the dashboard column widths above:
   168px left rail / 1fr DAG / 232px log. Centres of those columns
   relative to the dashboard total ≈ 7%, 50%, 87%. The progress bar
   spans middle-left so we anchor its caret at ~22% (start of the bar). */
.annotation-progress { left: 22%; }
.annotation-active   { left: 50%; }
.annotation-log      { left: 86%; }

.annotation-line {
  width: 28px;
  height: 64px;
  flex-shrink: 0;
  color: var(--k-amber);
}
.annotation-line line,
.annotation-line polyline {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.annotation-label {
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  color: var(--k-ink-80);
  /* Each authored line stays whole; the <br> in the markup is the
     only break. Max-width via ch was unreliable here because the
     parent flex column collapses to its widest child and ch
     underestimates real mono glyph width at 11px. */
  white-space: nowrap;
}

/* ========== PRINT STYLES ========== */
@media print {
  .masthead,
  .nav-toggle,
  .clipboard-btn,
  .skip-link {
    display: none;
  }

  body {
    background-color: white;
    color: black;
  }

  a {
    color: inherit;
  }
}