/* SDS Engineering Broadsheet — paper, ink and rules.
   Loaded last. Re-tokens the existing design and restyles shared components.
   Palette values: "graphite" (default) = Paper, "silver" = Ink (dark). */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root[data-design="reveal"][data-palette] {
  color-scheme: light;
  --paper: #f3f0ea; --white: #f3f0ea; --night: #f3f0ea; --dark: #f3f0ea;
  --ink: #111111; --muted: #55524d; --line: #111111; --rule-soft: #cfc8bd;
  --accent: #111111; --accent-hover: #2b2b2b; --on-accent: #f3f0ea;
  --coral: #e8553a; --marker: #ffc2ae;
  --green: #2f5d3a; --test: #a8391f; --investigate: #1d4e89; --engineer: #2f5d3a; --retest: #5c3a92;
  --surface-hover: #ebe6dc; --field: #fbf9f5; --footer-surface: #111111;
  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
:root[data-design="reveal"][data-palette="silver"] {
  color-scheme: dark;
  --paper: #121212; --white: #121212; --night: #121212; --dark: #121212;
  --ink: #f3f0ea; --muted: #bcb6ac; --line: #f3f0ea; --rule-soft: #3b3936;
  --accent: #f3f0ea; --accent-hover: #ffffff; --on-accent: #121212;
  --coral: #ff7a5c; --marker: #6e2c1d;
  --surface-hover: #1c1c1c; --field: #1a1a1a; --footer-surface: #000000;
}

/* ---------- Base ---------- */
html[data-design="reveal"] body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  font-feature-settings: "ss01", "ss04";
}
html[data-design="reveal"] :is(h1, h2, h3, h4) { font-family: var(--sans); color: var(--ink); text-wrap: balance; }
html[data-design="reveal"] h1 {
  font-size: clamp(3rem, 8.2vw, 8.25rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 0 0 32px;
}
html[data-design="reveal"] h2 {
  font-size: clamp(2rem, 4.4vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
}
html[data-design="reveal"] h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
}
html[data-design="reveal"] h4 {
  font: 500 0.75rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
html[data-design="reveal"] p { max-width: 68ch; }
html[data-design="reveal"] ::selection { background: var(--marker); color: var(--ink); }
html[data-design="reveal"] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

/* Mono labels */
html[data-design="reveal"] :is(.kicker, .bs-label, .bs-dateline, .bs-meta, h4, .platform-strip strong) {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Square, flat components: depth from rules only */
html[data-design="reveal"] :is(.button, .nav-cta, input, select, textarea, .proof-panel, .work-sample,
  .buyer-grid article, .team-grid article, .contact-form, .platform-strip, .service-card, details, .career-credentials) {
  border-radius: 0;
  box-shadow: none;
}

/* Buttons and links */
html[data-design="reveal"] :is(.button, .home-hero .button, .page-hero .button, .site-nav .nav-cta, .button-coral) {
  background: var(--ink);
  border: 2px solid var(--ink);
  color: var(--paper);
  font: 500 1rem/1 var(--sans);
  letter-spacing: -0.005em;
  padding: 17px 22px;
  min-height: 0;
  text-decoration: none;
}
html[data-design="reveal"] :is(.button, .site-nav .nav-cta, .button-coral):hover {
  background: var(--coral);
  border-color: var(--coral);
  color: #111111;
}
html[data-design="reveal"] .text-link,
html[data-design="reveal"] .bs-link {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
html[data-design="reveal"] .text-link:hover,
html[data-design="reveal"] .bs-link:hover { background: var(--marker); }
html[data-design="reveal"] .prose a,
html[data-design="reveal"] .bs-body a { text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
html[data-design="reveal"] mark { background: var(--marker); color: inherit; padding: 0 0.1em; }

/* ---------- Header ---------- */
html[data-design="reveal"] .site-header {
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
html[data-design="reveal"] .site-nav { background: var(--paper); }
html[data-design="reveal"] .site-header,
html[data-design="reveal"] .site-header .site-nav { background: var(--paper); color: var(--ink); border-bottom-color: var(--ink); }
html[data-design="reveal"] .site-header .site-nav { border: 0; }
html[data-design="reveal"] .site-header .nav-cta { background: var(--ink); border-color: var(--ink); color: var(--paper); }
html[data-design="reveal"] .site-header .nav-cta:hover { background: var(--coral); border-color: var(--coral); color: #111111; }
html[data-design="reveal"] .site-header .menu-button { color: var(--ink); border-color: var(--ink); border-radius: 0; }
html[data-design="reveal"] .site-header :is(a, button):focus-visible { outline-color: var(--coral); }
/* The logo artwork has an opaque white field: print it onto the paper. */
html[data-design="reveal"] .brand img { mix-blend-mode: multiply; }
html[data-design="reveal"] .site-nav a { font: 500 0.9375rem/1 var(--sans); letter-spacing: 0; }
html[data-design="reveal"] .site-nav a[aria-current]:not(.nav-cta) {
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
html[data-design="reveal"][data-palette="silver"] .brand img { mix-blend-mode: normal; background: #ffffff; padding: 4px 6px; }

/* ---------- Sections ---------- */
html[data-design="reveal"] .section { padding-block: 96px; background: var(--paper); }
html[data-design="reveal"] .bs-section { border-top: 2px solid var(--ink); padding-block: 40px 96px; }
html[data-design="reveal"] .bs-head {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px;
  align-items: start;
  margin-bottom: 56px;
}
html[data-design="reveal"] .bs-head .bs-label { margin: 10px 0 0; }
html[data-design="reveal"] .bs-head h2 { margin: 0; }
html[data-design="reveal"] .bs-head p:not(.bs-label) { color: var(--muted); font-size: 1.1875rem; margin: 20px 0 0; }
html[data-design="reveal"] .section-head { border-top: 2px solid var(--ink); padding-top: 24px; margin-bottom: 40px; }
html[data-design="reveal"] .section-head > p { color: var(--muted); font-size: 1.125rem; }

/* ---------- Home masthead ---------- */
html[data-design="reveal"] .bs-masthead { padding: 28px 0 88px; background: var(--paper); }
html[data-design="reveal"] .bs-dateline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
  margin: 0 0 56px;
  max-width: none;
  color: var(--ink);
}
html[data-design="reveal"] .bs-dateline > span {
  padding: 5px 10px;
  border-left: 3px solid var(--coral);
  background: color-mix(in srgb, var(--marker) 45%, var(--paper));
  line-height: 1.5;
}
html[data-design="reveal"] .bs-masthead h1 { max-width: 12.5ch; margin-bottom: 48px; }
html[data-design="reveal"] .bs-lede {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  border-top: 1px solid var(--ink);
  padding-top: 28px;
}
html[data-design="reveal"] .bs-lede .hero-lede { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.45; margin: 0; max-width: 36ch; }
html[data-design="reveal"] .bs-lede .bs-meta { margin: 24px 0 0; line-height: 1.8; }
html[data-design="reveal"] .bs-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }

/* Numbered statement list ("Give us the difficult one") */
html[data-design="reveal"] .bs-numbered { list-style: none; margin: 0; padding: 0; counter-reset: bs; }
html[data-design="reveal"] .bs-numbered li {
  counter-increment: bs;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 7fr) minmax(0, 4fr);
  gap: 32px;
  border-top: 1px solid var(--ink);
  padding: 26px 0;
  align-items: baseline;
}
html[data-design="reveal"] .bs-numbered li::before {
  content: counter(bs, decimal-leading-zero);
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
}
html[data-design="reveal"] .bs-numbered h3 { font-size: clamp(1.5rem, 2.6vw, 2.375rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0; }
html[data-design="reveal"] .bs-numbered p { margin: 0; color: var(--muted); }
html[data-design="reveal"] .bs-coda { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.45; border-top: 2px solid var(--ink); padding-top: 28px; margin: 0 0 0 auto; max-width: 40ch; }

/* 2×2 capability grid with hairlines */
html[data-design="reveal"] .bs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
html[data-design="reveal"] .bs-grid > article { padding: 36px 40px 40px 0; border-bottom: 1px solid var(--ink); }
html[data-design="reveal"] .bs-grid > article:nth-child(odd) { border-right: 1px solid var(--ink); }
html[data-design="reveal"] .bs-grid > article:nth-child(even) { padding-left: 40px; padding-right: 0; }
html[data-design="reveal"] .bs-grid h3 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.08; letter-spacing: -0.03em; margin: 12px 0 16px; }
html[data-design="reveal"] .bs-grid h3 a { text-decoration: none; }
html[data-design="reveal"] .bs-grid h3 a:hover { background: var(--marker); }
html[data-design="reveal"] .bs-grid ul { list-style: none; margin: 20px 0; padding: 0; }
html[data-design="reveal"] .bs-grid li { border-top: 1px solid var(--rule-soft); padding: 8px 0; }
html[data-design="reveal"] .bs-grid .bs-meta { margin: 0 0 20px; color: var(--ink); }
html[data-design="reveal"] .bs-also { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 32px; }

/* Case index */
html[data-design="reveal"] .bs-index { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ink); }
html[data-design="reveal"] .bs-index > li {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 6fr) minmax(0, 4.8fr);
  gap: 32px;
  border-top: 1px solid var(--ink);
  padding: 32px 0;
}
html[data-design="reveal"] .bs-index .bs-num { font: 500 clamp(2.5rem, 4.6vw, 4.25rem)/0.9 var(--sans); letter-spacing: -0.05em; }
html[data-design="reveal"] .bs-index h3 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.1; letter-spacing: -0.03em; margin: 8px 0 12px; }
html[data-design="reveal"] .bs-index h3 a { text-decoration: none; }
html[data-design="reveal"] .bs-index h3 a:hover { background: var(--marker); }
html[data-design="reveal"] .bs-index p { margin: 0; color: var(--muted); }
html[data-design="reveal"] .bs-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; align-content: start; }
html[data-design="reveal"] .bs-figs div { border-top: 2px solid var(--ink); padding-top: 10px; }
html[data-design="reveal"] .bs-figs dt { font: 500 clamp(1.125rem, 1.7vw, 1.75rem)/1.05 var(--sans); letter-spacing: -0.03em; overflow-wrap: anywhere; }
html[data-design="reveal"] .bs-figs dd { margin: 6px 0 0; font: 400 0.75rem/1.35 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* Client wall */
html[data-design="reveal"] .bs-wall { margin: 0; padding: 32px; background: #f3f0ea; border: 1px solid var(--ink); }
html[data-design="reveal"] .bs-wall img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
html[data-design="reveal"] .bs-names {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  font: 400 0.8125rem/1.9 var(--mono);
  color: var(--muted);
}
html[data-design="reveal"] .bs-note { font: 400 0.8125rem/1.6 var(--mono); color: var(--muted); margin-top: 20px; }

/* Method steps */
html[data-design="reveal"] .bs-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  border-top: 1px solid var(--ink);
}
html[data-design="reveal"] .bs-steps li { counter-increment: step; padding: 24px 28px 8px 0; }
html[data-design="reveal"] .bs-steps li + li { border-left: 1px solid var(--ink); padding-left: 24px; }
html[data-design="reveal"] .bs-steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font: 500 clamp(2.25rem, 3.6vw, 3.25rem)/1 var(--sans);
  letter-spacing: -0.05em;
  margin-bottom: 20px;
}
html[data-design="reveal"] .bs-steps h3 { margin: 0 0 10px; }
html[data-design="reveal"] .bs-steps p { margin: 0; color: var(--muted); font-size: 1rem; }

/* Firm statement */
html[data-design="reveal"] .bs-statement { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; }
html[data-design="reveal"] .bs-statement blockquote { margin: 0; font: 500 clamp(1.75rem, 3.2vw, 2.75rem)/1.12 var(--sans); letter-spacing: -0.03em; }
html[data-design="reveal"] .bs-statement blockquote p { max-width: 30ch; margin: 0 0 24px; }

/* ---------- Network exercise: an inverted ink band ---------- */
html[data-design="reveal"] .bs-game {
  background: #141414;
  color: #f1efe9;
  padding: 72px 0 80px;
  border-top: 2px solid var(--ink);
  color-scheme: dark;
  --paper: #141414; --white: #141414; --night: #141414; --dark: #141414;
  --ink: #f1efe9; --muted: #bcb6ac; --line: #4a4844;
  --accent: #8bd5ff; --accent-hover: #b7e5ff; --on-accent: #172e3c; --coral: #ffab91; --green: #b7e5b1;
  --test: #ffab91; --investigate: #8bd5ff; --engineer: #b7e5b1; --retest: #c7b5ff;
  --surface-hover: #22262a; --field: #1c1f22;
  --scene-background: #141414; --scene-wire: #b2c3d1; --scene-route: #66d9ff; --scene-node: #edf9ff;
  --scene-light: #507f91; --scene-revealed-wire: #bcf0ff; --scene-label: #bec4c9;
  --scene-exposure: #ffab91; --scene-alarm: #f5cd8b; --scene-contained: #b7e5b1;
}
html[data-design="reveal"] .bs-game .bs-head { margin-bottom: 32px; }
html[data-design="reveal"] .bs-game :is(h2, h3, .bs-label) { color: #f1efe9; }
html[data-design="reveal"] .bs-game .bs-head p:not(.bs-label) { color: #bcb6ac; }
html[data-design="reveal"] .bs-game .network-experience { max-width: 1100px; margin: 0 auto; }
html[data-design="reveal"] .bs-game .network-experience .map { height: var(--game-map-height, 440px); margin-block: 16px; }
html[data-design="reveal"] .bs-game h2.network-scenario { font-size: clamp(1.125rem, 1.8vw, 1.4375rem); }
html[data-design="reveal"] .bs-game .button { background: #f1efe9; border-color: #f1efe9; color: #141414; }

/* ---------- Inner pages ---------- */
html[data-design="reveal"] .page-hero { background: var(--paper); padding: 72px 0 72px; border-bottom: 2px solid var(--ink); }
html[data-design="reveal"] .page-hero h1 { font-size: clamp(2.75rem, 6.6vw, 6.5rem); max-width: 15ch; }
html[data-design="reveal"] .page-hero .intro,
html[data-design="reveal"] .intro { font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.5; color: var(--ink); max-width: 46ch; }
html[data-design="reveal"] .page-hero .kicker a { text-decoration: none; }
html[data-design="reveal"] .page-hero .kicker a:hover { color: var(--ink); background: var(--marker); }
html[data-design="reveal"] .platform-band {
  border-block: 1px solid var(--ink);
}
html[data-design="reveal"] .platform-strip {
  background: transparent;
  padding-block: 24px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 8px 32px;
  align-items: baseline;
}
html[data-design="reveal"] .platform-strip > strong { grid-column: 1; grid-row: 1 / 3; }
html[data-design="reveal"] .platform-strip p { grid-column: 2; margin: 0; font: 400 0.875rem/1.5 var(--mono); color: var(--ink); }
html[data-design="reveal"] .topic-band { border-block: 1px solid var(--ink); }
html[data-design="reveal"] .topic-band .problem-links { border: 0; }
html[data-design="reveal"] .topic-section .section-head { border-top: 0; padding-top: 0; }
html[data-design="reveal"] .topic-band .problem-links a { border-block: 0; }
html[data-design="reveal"] .topic-band .problem-links a:first-child { border-left: 0; }
html[data-design="reveal"] .topic-band .problem-links a:last-child { border-right: 0; }
html[data-design="reveal"] .bs-org-band { border-top: 1px solid var(--ink); }
html[data-design="reveal"] .bs-hero-line { margin: 20px 0 0; }
html[data-design="reveal"] .bs-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; }
html[data-design="reveal"] .bs-faq article { border-top: 1px solid var(--ink); padding-block: 24px; }
html[data-design="reveal"] .bs-faq h3 { margin: 0 0 16px; }
html[data-design="reveal"] .bs-faq p { margin: 0; }
html[data-design="reveal"] .proof-panel + .proof-panel { margin-top: 32px; }
@media (max-width: 820px) {
  html[data-design="reveal"] .platform-strip { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html[data-design="reveal"] .platform-strip > strong { grid-column: auto; grid-row: auto; }
  html[data-design="reveal"] .platform-strip p { grid-column: auto; }
  html[data-design="reveal"] .topic-band .problem-links a { border: 0; padding-inline: 0; }
  html[data-design="reveal"] .bs-faq { grid-template-columns: minmax(0, 1fr); }
}

html[data-design="reveal"] .buyer-grid { gap: 0; border-top: 1px solid var(--ink); }
html[data-design="reveal"] .buyer-grid article { background: transparent; border: 0; border-right: 1px solid var(--ink); padding: 28px 28px 28px 0; }
html[data-design="reveal"] .buyer-grid article + article { padding-left: 28px; }
html[data-design="reveal"] .buyer-grid article:last-child { border-right: 0; }
html[data-design="reveal"] .proof-panel,
html[data-design="reveal"] .work-sample {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 24px 0 28px;
}
html[data-design="reveal"] .proof-panel h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
html[data-design="reveal"] .deliverables { background: transparent; border: 0; border-top: 2px solid var(--ink); padding: 24px 0 0; }
html[data-design="reveal"] .case-stage { border-top: 1px solid var(--rule-soft); padding-top: 12px; }
html[data-design="reveal"] .deliverable-list { padding-left: 1.4em; }
html[data-design="reveal"] .deliverable-list li::marker { font-family: var(--mono); color: var(--muted); }
html[data-design="reveal"] .problem-links { gap: 0; border-top: 1px solid var(--ink); }
html[data-design="reveal"] .problem-links a {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 20px 0;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
html[data-design="reveal"] .problem-links a:hover { background: var(--marker); }

html[data-design="reveal"] .scope-details details { border: 0; border-top: 1px solid var(--ink); background: transparent; padding: 0; }
html[data-design="reveal"] .scope-details details:last-child { border-bottom: 1px solid var(--ink); }
html[data-design="reveal"] .scope-details summary {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 20px 0;
}
html[data-design="reveal"] .scope-details details[open] summary { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 8px; }
html[data-design="reveal"] .scope-details details > :not(summary) { max-width: 70ch; }

html[data-design="reveal"] .related-links { border-top: 2px solid var(--ink); background: transparent; padding: 24px 0; }
html[data-design="reveal"] .related-links strong { font: 500 0.75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

html[data-design="reveal"] .team-grid { gap: 0; border-top: 1px solid var(--ink); }
html[data-design="reveal"] .team-grid article { background: transparent; border: 0; border-right: 1px solid var(--ink); padding: 28px 28px 28px 0; }
html[data-design="reveal"] .team-grid article + article { padding-left: 28px; }
html[data-design="reveal"] .team-grid article:last-child { border-right: 0; }
html[data-design="reveal"] .career-credentials { border: 0; border-top: 1px solid var(--rule-soft); background: transparent; }

/* Contact form */
html[data-design="reveal"] .contact-form { background: transparent; border: 2px solid var(--ink); padding: 32px; }
html[data-design="reveal"] :is(.contact-form input, .contact-form select, .contact-form textarea) {
  background: var(--field);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--sans);
}

/* Closing call to action */
html[data-design="reveal"] .closing { background: var(--paper); border-top: 2px solid var(--ink); padding-block: 88px; }
html[data-design="reveal"] .closing h2 { font-size: clamp(2.25rem, 5.4vw, 5rem); max-width: 16ch; }
html[data-design="reveal"] .closing p { color: var(--muted); font-size: 1.1875rem; }

/* Case-study pages */
html[data-design="reveal"] .bs-factline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 40px 0 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
html[data-design="reveal"] .bs-factline div { padding: 14px 20px 14px 0; }
html[data-design="reveal"] .bs-factline div + div { border-left: 1px solid var(--ink); padding-left: 20px; }
html[data-design="reveal"] .bs-factline dt { font: 500 0.6875rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
html[data-design="reveal"] .bs-factline dd { margin: 4px 0 0; font-size: 1rem; line-height: 1.4; }
html[data-design="reveal"] .bs-spread { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
html[data-design="reveal"] .bs-figures { position: sticky; top: 120px; margin: 0; }
html[data-design="reveal"] .bs-figures div { border-top: 2px solid var(--ink); padding: 14px 0 28px; }
html[data-design="reveal"] .bs-figures dt { font: 500 clamp(3rem, 6vw, 5.5rem)/0.92 var(--sans); letter-spacing: -0.055em; }
html[data-design="reveal"] .bs-figures dd { margin: 10px 0 0; font: 400 0.8125rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
html[data-design="reveal"] .bs-body { columns: 2 300px; column-gap: 48px; }
html[data-design="reveal"] .bs-body section { break-inside: avoid; margin-bottom: 32px; }
html[data-design="reveal"] .bs-body h2 { font: 500 0.75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border-top: 1px solid var(--ink); padding-top: 12px; margin: 0 0 12px; }
html[data-design="reveal"] .bs-body p { margin: 0 0 16px; }
html[data-design="reveal"] .bs-body ul { padding-left: 1.1em; margin: 0 0 16px; }
html[data-design="reveal"] .bs-pull { column-span: all; font: 500 clamp(1.5rem, 2.6vw, 2.25rem)/1.15 var(--sans); letter-spacing: -0.03em; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 24px 0; margin: 8px 0 32px; max-width: none; }
html[data-design="reveal"] .bs-record { font: 400 0.8125rem/1.6 var(--mono); color: var(--muted); border-top: 1px solid var(--rule-soft); padding-top: 16px; margin-top: 8px; column-span: all; max-width: none; }

/* ---------- Footer: the one inverted block ---------- */
html[data-design="reveal"] .site-footer {
  background: #111111; color: #f3f0ea; border-top: 0;
  --ink: #f3f0ea; --muted: #bcb6ac; --accent: #f3f0ea; --line: #3b3936; --footer-surface: #111111;
}
html[data-design="reveal"] .site-footer::before { display: none; }
html[data-design="reveal"] .site-footer .footer-contact { color: #f3f0ea; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 6px; }
html[data-design="reveal"] .site-footer :is(a, p, nav a) { color: #e9e5dd; }
html[data-design="reveal"] .site-footer .kicker { color: #a9a39a; }
html[data-design="reveal"] .site-footer .footer-name { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.03em; font-weight: 500; }
html[data-design="reveal"] .site-footer .accent { color: var(--coral); }
html[data-design="reveal"] .site-footer .footer-bottom { border-top: 1px solid #3b3936; }
html[data-design="reveal"] .design-options { background: var(--paper); }
html[data-design="reveal"] .swatch-graphite { background: #f3f0ea; border: 1px solid #111; }
html[data-design="reveal"] .swatch-silver { background: #121212; border: 1px solid #f3f0ea; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  html[data-design="reveal"] .bs-index > li { grid-template-columns: minmax(0, 1fr) minmax(0, 5fr); }
  html[data-design="reveal"] .bs-index .bs-figs { grid-column: 2; }
  html[data-design="reveal"] .bs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-design="reveal"] .bs-steps li:nth-child(3) { border-left: 0; padding-left: 0; }
  html[data-design="reveal"] .bs-factline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-design="reveal"] .bs-factline div:nth-child(3) { border-left: 0; padding-left: 0; }
  html[data-design="reveal"] .bs-factline div:nth-child(n+3) { border-top: 1px solid var(--ink); }
}
@media (max-width: 820px) {
  html[data-design="reveal"] body { font-size: 1.0625rem; }
  html[data-design="reveal"] h1 { font-size: clamp(2.75rem, 12vw, 4rem); }
  html[data-design="reveal"] .section { padding-block: 64px; }
  html[data-design="reveal"] .bs-section { padding-block: 28px 64px; }
  html[data-design="reveal"] :is(.bs-head, .bs-lede, .bs-statement, .bs-spread) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html[data-design="reveal"] .bs-head { margin-bottom: 32px; }
  html[data-design="reveal"] .bs-masthead { padding-bottom: 56px; }
  html[data-design="reveal"] .bs-dateline { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
  html[data-design="reveal"] .bs-numbered li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html[data-design="reveal"] .bs-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-design="reveal"] .bs-grid > article,
  html[data-design="reveal"] .bs-grid > article:nth-child(even) { padding: 28px 0; border-right: 0; }
  html[data-design="reveal"] .bs-index > li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html[data-design="reveal"] .bs-index .bs-figs { grid-column: auto; }
  html[data-design="reveal"] .bs-steps { grid-template-columns: minmax(0, 1fr); }
  html[data-design="reveal"] .bs-steps li,
  html[data-design="reveal"] .bs-steps li + li { border-left: 0; padding: 20px 0; border-top: 1px solid var(--rule-soft); }
  html[data-design="reveal"] .bs-figures { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  html[data-design="reveal"] .bs-figures dt { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  html[data-design="reveal"] .bs-wall { padding: 12px; }
  html[data-design="reveal"] :is(.buyer-grid article, .team-grid article),
  html[data-design="reveal"] :is(.buyer-grid article, .team-grid article) + article { border-right: 0; padding: 24px 0; border-bottom: 1px solid var(--rule-soft); }
  html[data-design="reveal"] .page-hero { padding: 48px 0; }
  html[data-design="reveal"] .page-hero h1 { font-size: clamp(2.25rem, 9.5vw, 3.25rem); }
  html[data-design="reveal"] .contact-form { padding: 20px; }
}
/* The exercise is desktop-only (the game hides itself on phones and touch screens), so hide its band too. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html[data-design="reveal"] .bs-game { display: none; }
}

/* Phase 1 hero: shorter headline block, secondary route and early proof */
html[data-design="reveal"] .bs-masthead h1 { font-size: clamp(2.75rem, 5.6vw, 5.75rem); line-height: 1.02; max-width: 17ch; margin-bottom: 36px; }
html[data-design="reveal"] .bs-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
html[data-design="reveal"] .bs-hero-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
html[data-design="reveal"] .bs-hero-link:hover { text-decoration-thickness: 2px; }
html[data-design="reveal"] .bs-proof { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ink); font-size: 1rem; line-height: 1.5; max-width: 40ch; }
@media (max-width: 820px) {
  html[data-design="reveal"] .bs-masthead h1 { font-size: clamp(2.25rem, 10vw, 3.25rem); margin-bottom: 24px; }
  html[data-design="reveal"] .bs-masthead { padding-bottom: 40px; }
}

/* Phase 2: three practices, starting points, representative organizations */
@media (min-width: 821px) {
  html[data-design="reveal"] .bs-grid.bs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-design="reveal"] .bs-grid.bs-grid-3 > article,
  html[data-design="reveal"] .bs-grid.bs-grid-3 > article:nth-child(even) { padding: 36px 32px 40px; border-right: 1px solid var(--ink); }
  html[data-design="reveal"] .bs-grid.bs-grid-3 > article:first-child { padding-left: 0; }
  html[data-design="reveal"] .bs-grid.bs-grid-3 > article:last-child { padding-right: 0; border-right: 0; }
  html[data-design="reveal"] .bs-grid.bs-grid-3 h3 { font-size: clamp(1.5rem, 2.1vw, 1.875rem); }
}
html[data-design="reveal"] .bs-start { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
html[data-design="reveal"] .bs-start > li { padding: 28px 32px 32px; border-right: 1px solid var(--ink); }
html[data-design="reveal"] .bs-start > li:first-child { padding-left: 0; }
html[data-design="reveal"] .bs-start > li:last-child { padding-right: 0; border-right: 0; }
html[data-design="reveal"] .bs-start h3 { font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.12; letter-spacing: -0.025em; margin: 10px 0 14px; }
html[data-design="reveal"] .bs-start p { margin: 0 0 10px; line-height: 1.55; }
html[data-design="reveal"] .bs-orgs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; border: 0; }
html[data-design="reveal"] .bs-orgs li { font-family: var(--sans); font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; padding: 20px 0; border-bottom: 1px solid var(--rule-soft); }
@media (max-width: 820px) {
  html[data-design="reveal"] .bs-start { grid-template-columns: minmax(0, 1fr); }
  html[data-design="reveal"] .bs-start > li { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--ink); }
  html[data-design="reveal"] .bs-orgs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  html[data-design="reveal"] .bs-orgs li { padding: 14px 0; }
}

/* Phase 3: ransomware timeline */
html[data-design="reveal"] .bs-timeline { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: bs-tl; }
html[data-design="reveal"] .bs-timeline li { counter-increment: bs-tl; position: relative; padding: 0 0 18px 44px; border-left: 1px solid var(--ink); margin-left: 12px; }
html[data-design="reveal"] .bs-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
html[data-design="reveal"] .bs-timeline li::before { content: counter(bs-tl); position: absolute; left: -13px; top: 0; width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper, #fff); display: grid; place-items: center; font-size: .8rem; font-weight: 600; }
html[data-design="reveal"] .bs-timeline h3 { margin: 2px 0 6px; font-size: 1.05rem; }
html[data-design="reveal"] .bs-timeline p { margin: 0; }

html[data-design="reveal"] .bs-names li { padding: 16px 0; }
@media (max-width: 820px) {
  html[data-design="reveal"] .bs-names { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}