/* Case studies: shared summaries, editorial content, and reusable components.
   Public site chrome and outer gutters live in site.css.
   UI accents inherit the shared brand tokens from site.css; artwork keeps its own colors.
   Case-specific components are scoped to body[data-page].
   :where() keeps their selector specificity unchanged. */

/* ── TL;DR Strip (shared across case studies) — plain columns ── */
.tldr-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.tldr-item { padding: 1.4rem 0 0; }
.tldr-label {
  font-family: var(--font-mono);
  font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem;
}
.tldr-text { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

/* ── Deep Dive expandable (shared across case studies) — plain ruled disclosure ── */
.deep-dive {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.deep-dive summary {
  padding: 1rem 0;
  font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: var(--text);
  cursor: pointer; list-style: none; user-select: none;
  position: relative;
  transition: color 0.15s;
}
.deep-dive summary::-webkit-details-marker { display: none; }
.deep-dive summary::after {
  content: "+";
  position: absolute; right: 0;
  font-size: 1rem; color: var(--faint);
}
.deep-dive[open] summary::after { content: "−"; }
.deep-dive summary:hover { color: var(--site-accent); }
.deep-dive-body { padding: 0 0 1.5rem; }

/* ── Text links: a quiet underline; .button-link in site.css marks one primary action ── */
.text-link {
  display: inline-block;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
  transition: color 0.2s, text-decoration-color 0.2s;
}

.text-link:hover { text-decoration-color: currentColor; }

/* ── Hero: one column, type does the work ── */
.hero {
  margin-block: 0;
  padding-block: calc(var(--site-nav-height) + clamp(56px, 9vw, 112px)) 0;
}

.hero-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 1.75rem;
}

.hero-copy h1 {
  font-size: clamp(3rem, 8vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
}

.hero-copy h1 em {
  color: var(--accent);
  font-style: normal;
}

.hero-desc {
  max-width: 38rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--text-muted);
}

.hero-note {
  max-width: 38rem;
  margin-top: 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.hero-tools {
  font-family: var(--font-mono);
  margin-top: 1.5rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

.hero-visual {
  margin: var(--case-intro-space) 0 0;
}

.hero-visual img {
  width: 100%;
  box-shadow: var(--shadow);
}

.shot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.shot-grid img {
  width: 100%;
  box-shadow: var(--shadow);
}

/* ── Section dividers ── */
.page-divider {
  border: 0;
  border-top: 1px solid var(--border);
  width: calc(100% - 2 * var(--site-gutter));
  max-width: calc(var(--site-max-width) - 2 * var(--site-gutter));
  margin-inline: auto;
}

.page-divider { margin-top: var(--case-intro-space); }

.top-block { margin-top: var(--case-intro-space); }

/* ── Section layout: marginal label + reading column ── */
body {
  --case-reading-width: 44rem;
  --case-intro-space: clamp(48px, 7vw, 80px);
  --case-section-space: clamp(72px, 10vw, 120px);
}

.layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(22px, 4vw, 48px);
}

.layout > * { min-width: 0; }

/* Text, rules, tables, and media share one measure within the site frame.
   Constrain the column itself, so a paragraph cannot be narrower than its table. */
.section-body {
  width: 100%;
  max-width: var(--case-reading-width);
  min-width: 0;
  overflow-wrap: anywhere;
}

.section-gap { margin-block: var(--case-section-space); }

.section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 0.5rem;
}

.section-body h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  max-width: 24em;
}

.section-body p + p,
.section-body p + .phase-list,
.section-body p + .decision-grid,
.section-body p + .bullet-list,
.section-body p + .shot-grid,
.section-body .decision-grid + p,
.section-body ol + p,
.section-body ul + p,
.section-body figure + p,
.section-body .deep-dive {
  margin-top: 1rem;
}

.section-body .case-note + p,
.section-body .case-note + h3 {
  margin-top: 2rem;
}

.section-body h3.diagram-title {
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin: 2.5rem 0 1rem;
}

.section-body h3.diagram-title:first-of-type { margin-top: 1.75rem; }

.section-body p,
.tldr-text,
.bullet-list li,
.decision-card p,
.phase-content p {
  color: var(--text-muted);
}

.section-body code {
  font-size: 0.85em;
  padding: 0.05em 0.3em;
  border: 1px solid var(--border);
  background: var(--ph-bg);
}

/* ── Pull quotes: larger type, no rule ── */
.quote-block { margin-top: 2rem; }
.quote-block p { font-size: 1.15rem; line-height: 1.6; color: var(--text); }

/* ── Decisions: two columns of type, ruled like a broadsheet ── */
.decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  align-items: start;
}

.decision-card,
:where(body[data-page="coffeemaker-ui-case-study"]) .ba-card,
:where(body[data-page="icc-case-study"]) .interview-card {
  border-top: 1px solid var(--text);
  padding-top: 1rem;
}

.decision-card h4,
.phase-content h4 {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.55rem;
}

.decision-card p { font-size: 0.92rem; }

/* ── Phase list: bare numerals, hairline rows ── */
.phase-list { list-style: none; }

.phase-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}

.phase-item:last-child { border-bottom: 1px solid var(--border); }

.phase-num {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.bullet-list { padding-left: 1.15rem; }
.bullet-list li + li { margin-top: 0.65rem; }
.bullet-list li::marker { color: var(--faint); }

/* ── CTA: an ending, not a banner ── */
.cta-section {
  margin-block: 0 clamp(64px, 9vw, 96px);
}

.cta-inner {
  border-top: 1px solid var(--border);
  padding-top: clamp(28px, 4vw, 40px);
}

.cta-inner h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
}

.cta-inner p {
  color: var(--text-muted);
  margin-top: 0.6rem;
  max-width: 40rem;
}

.cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1.6rem;
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr); }

  .section-label { padding-top: 0; }
}

@media (max-width: 680px) {
  .shot-grid { grid-template-columns: 1fr; }

  .phase-item { grid-template-columns: 40px 1fr; }
}

@media (max-width: 767px) {
  .tldr-strip,
    .decision-grid { grid-template-columns: 1fr; }

  .hero-copy h1,
    .section-body h2,
    .cta-inner h2 { overflow-wrap: anywhere; }
}

/* ── Inline links ── */
.inline-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: currentColor;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.inline-link:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ── Supplementary notes: plain text with a small brand label ── */
.case-note {
  margin-top: 2rem;
}

.case-note .case-note-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.case-note p { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); }
.case-note p:not(.case-note-title) + p { margin-top: 1rem; }

/* ── Case tables: shared desktop base ── */
.case-table,
.research-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 1.5rem 0;
}

.case-table th,
.case-table td,
.research-table th,
.research-table td {
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.case-table th:last-child,
.case-table td:last-child,
.research-table th:last-child,
.research-table td:last-child { padding-right: 0; }

.case-table thead th,
.research-table thead th {
  border-top: 1px solid var(--text);
  color: var(--text);
  font-weight: 600;
}

.case-table tbody th {
  color: var(--text);
  font-weight: 600;
}

.section-body .case-table + p { margin-top: 1rem; }
.case-table-field { font-family: var(--font-mono); font-weight: 400; display: none; }

/* ── Video embeds: shared frame, page-specific spacing ── */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ph-bg);
  box-shadow: var(--shadow);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Pipeline: shared by Kickoff Buddy, Sky to Porch, and Yimu ── */
.pipeline {
  border-top: 1px solid var(--text);
}

.section-body .pipeline + p { margin-top: 1rem; }

.section-body .pipeline + .case-note { margin-top: 2rem; }

.pipe-stage {
  display: grid;
  grid-template-columns: minmax(170px, 240px) 1fr;
  column-gap: 2rem;
  row-gap: 0.45rem;
  align-items: start;
  padding: 1.1rem 0;
}

.pipe-arrow {
  display: flex;
  justify-content: center;
  color: var(--accent);
}

.pipe-arrow svg { width: 15px; height: 15px; }

.pipe-head {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.pipe-kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.pipe-stage h4 {
  font-size: 0.95rem;
  line-height: 1.25;
}

.pipe-stage p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.pipe-tech {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .pipe-stage { grid-template-columns: 1fr; }
}

/* Shared layout guards, section markers, and media spacing. */

:where(body[data-page="kickoff-buddy-case-study"]) .case-table tbody th,
:where(body[data-page="openhall-case-study"]) .case-table tbody th,
:where(body[data-page="signal-delay-case-study"]) .case-table tbody th { width: 30%; }

:where(body[data-page="kickoff-buddy-case-study"]) .video-frame,
:where(body[data-page="sky-to-porch-case-study"]) .video-frame { width: 100%; }

:where(body[data-page="kickoff-buddy-case-study"]) .section-body p + .video-frame,
:where(body[data-page="kickoff-buddy-case-study"]) .section-body .video-frame + p,
:where(body[data-page="sky-to-porch-case-study"]) .section-body p + .video-frame,
:where(body[data-page="sky-to-porch-case-study"]) .section-body .video-frame + p { margin-top: 1rem; }

/* Case: coffeemaker-ui */
/* ── Original machine and manual photos ── */
:where(body[data-page="coffeemaker-ui-case-study"]) .evidence-figure { margin: 1.75rem 0; }

:where(body[data-page="coffeemaker-ui-case-study"]) .evidence-figure--machine {
  max-width: 28rem;
  margin-inline: auto;
}

:where(body[data-page="coffeemaker-ui-case-study"]) .evidence-figure > a { display: block; }

:where(body[data-page="coffeemaker-ui-case-study"]) .evidence-figure img {
  width: 100%;
  height: auto;
}

:where(body[data-page="coffeemaker-ui-case-study"]) .evidence-figure figcaption {
  margin-top: 0.75rem;
  color: var(--faint);
  font-size: 0.82rem;
  line-height: 1.6;
}

:where(body[data-page="coffeemaker-ui-case-study"]) .evidence-hint { display: block; }

/* ── Norman quote: a pull quote with a small-caps source line ── */
:where(body[data-page="coffeemaker-ui-case-study"]) .quote-block p {
  font-style: italic;
  color: var(--text);
}

:where(body[data-page="coffeemaker-ui-case-study"]) .quote-source {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── Principle table: ruled rows, read top to bottom ── */
:where(body[data-page="coffeemaker-ui-case-study"]) .principle-compact {
  margin-top: 1.5rem;
  border-top: 1px solid var(--text);
}

:where(body[data-page="coffeemaker-ui-case-study"]) .principle-compact + p { margin-top: 1.5rem; }

:where(body[data-page="coffeemaker-ui-case-study"]) .pc-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

:where(body[data-page="coffeemaker-ui-case-study"]) .pc-row:last-child { border-bottom: 1px solid var(--border); }

:where(body[data-page="coffeemaker-ui-case-study"]) .pc-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

:where(body[data-page="coffeemaker-ui-case-study"]) .pc-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Before / after: two ruled columns, like the decision grid ── */
:where(body[data-page="coffeemaker-ui-case-study"]) .before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 1.5rem;
  align-items: start;
}

:where(body[data-page="coffeemaker-ui-case-study"]) .ba-label {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--faint);
  margin-bottom: 0.8rem;
}

:where(body[data-page="coffeemaker-ui-case-study"]) .ba-label.after { color: var(--accent); }

:where(body[data-page="coffeemaker-ui-case-study"]) .ba-body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

:where(body[data-page="coffeemaker-ui-case-study"]) .ba-body li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

:where(body[data-page="coffeemaker-ui-case-study"]) .ba-body li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--faint);
}

:where(body[data-page="coffeemaker-ui-case-study"]) .section-body .before-after + p { margin-top: 1.5rem; }

/* ── Responsive ── */
@media (max-width: 680px) {
  :where(body[data-page="coffeemaker-ui-case-study"]) .before-after { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  :where(body[data-page="coffeemaker-ui-case-study"]) .pc-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

@media (max-width: 359px) {
  :where(body[data-page="coffeemaker-ui-case-study"]) .hero-copy h1 { font-size: 2.75rem; }
}

/* Case: dragon-map */
/* ── Featured traditions: one editorial line instead of pills ── */
:where(body[data-page="dragon-map-case-study"]) .section-body .tradition-line {
  font-size: 1.05rem;
  line-height: 2.1;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* Case: icc */
/* ── Lead paragraph: the opening line, set larger with no rule ── */
:where(body[data-page="icc-case-study"]) .lead {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--text);
}

/* ── Content images: screenshots carry the only shadows on the page ── */
:where(body[data-page="icc-case-study"]) .hero-visual img,
:where(body[data-page="icc-case-study"]) .section-body img { height: auto; }

:where(body[data-page="icc-case-study"]) .section-body img { box-shadow: var(--shadow); }

:where(body[data-page="icc-case-study"]) .section-body p + img,
:where(body[data-page="icc-case-study"]) .section-body img + p { margin-top: 1rem; }

/* ── Captions ── */
:where(body[data-page="icc-case-study"]) .caption {
  font-size: 0.78rem;
  color: var(--faint);
  margin-top: 0.75rem;
}

/* ── Before / after: two labeled figures, no chrome ── */
:where(body[data-page="icc-case-study"]) .before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2rem;
}

:where(body[data-page="icc-case-study"]) .ba-item figcaption {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--faint);
  margin-bottom: 0.6rem;
}

/* ── Interviews: three columns of type under black top rules ── */
:where(body[data-page="icc-case-study"]) .interview-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

/* keep role / name / quote tight despite the editorial p + p rhythm */
:where(body[data-page="icc-case-study"]) .interview-card p + p { margin-top: 0; }

:where(body[data-page="icc-case-study"]) .section-body .interview-cards + p { margin-top: 1.75rem; }

:where(body[data-page="icc-case-study"]) .decision-card h3 {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.55rem;
}

:where(body[data-page="icc-case-study"]) .interview-role {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.2rem;
}

:where(body[data-page="icc-case-study"]) .interview-quote {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ── Figma embeds: hairline frame, link fallback on mobile (see page JS) ── */
:where(body[data-page="icc-case-study"]) .figma-embed {
  display: block;
  width: 100%;
  height: 520px;
  border: 1px solid var(--border);
  margin-top: 1.5rem;
}

:where(body[data-page="icc-case-study"]) .figma-embed--tall { height: 600px; }

:where(body[data-page="icc-case-study"]) .figma-fallback {
  display: none;
  margin-top: 1.5rem;
}

:where(body[data-page="icc-case-study"]) .section-body .figma-embed + .shot-grid,
:where(body[data-page="icc-case-study"]) .section-body .figma-fallback + .shot-grid { margin-top: 1.5rem; }

/* ── Decision blocks: numbered essays under black top rules ── */
:where(body[data-page="icc-case-study"]) .decision-block {
  border-top: 1px solid var(--text);
  padding-top: 1.25rem;
  margin-top: 2.5rem;
}

:where(body[data-page="icc-case-study"]) .decision-num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.5rem;
}

:where(body[data-page="icc-case-study"]) .decision-block h3 {
  font-size: 1.05rem;
  line-height: 1.25;
  margin-bottom: 0.55rem;
}

:where(body[data-page="icc-case-study"]) .decision-block p {
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* Keep label colors independent of the body paragraph styles. */
:where(body[data-page="icc-case-study"]) .section-body .interview-role,
:where(body[data-page="icc-case-study"]) .section-body .decision-num {
  color: var(--accent);
}

:where(body[data-page="icc-case-study"]) .decision-block .bullet-list { font-size: 0.92rem; }

:where(body[data-page="icc-case-study"]) .decision-block .caption {
  font-size: 0.78rem;
  color: var(--faint);
}

/* ── Testimonial: a pull quote with a source line ── */
:where(body[data-page="icc-case-study"]) .testimonial-block p { font-style: italic; }

:where(body[data-page="icc-case-study"]) .testimonial-source {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  :where(body[data-page="icc-case-study"]) .interview-cards { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :where(body[data-page="icc-case-study"]) .before-after { grid-template-columns: 1fr; }

  :where(body[data-page="icc-case-study"]) .figma-embed { height: 420px; }
}

/* Case: kickoff-buddy */

/* ── Architecture: ruled layers under one top rule, plain type ── */
:where(body[data-page="kickoff-buddy-case-study"]) .arch {
  border-top: 1px solid var(--text);
}

:where(body[data-page="kickoff-buddy-case-study"]) .arch-layer { padding: 1.1rem 0 1.5rem; }

:where(body[data-page="kickoff-buddy-case-study"]) .arch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

:where(body[data-page="kickoff-buddy-case-study"]) .arch-head h4 {
  font-size: 0.95rem;
}

:where(body[data-page="kickoff-buddy-case-study"]) .arch-head span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--faint);
}

:where(body[data-page="kickoff-buddy-case-study"]) .arch-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem 1.5rem;
}

:where(body[data-page="kickoff-buddy-case-study"]) .arch-item {
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

:where(body[data-page="kickoff-buddy-case-study"]) .arch-item strong {
  display: block;
  font-size: 0.78rem;
}

:where(body[data-page="kickoff-buddy-case-study"]) .arch-item small {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 0.15rem;
}

:where(body[data-page="kickoff-buddy-case-study"]) .arch-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

:where(body[data-page="kickoff-buddy-case-study"]) .arch-flow::before { content: "↓"; }

/* Case: openhall */
:where(body[data-page="openhall-case-study"]) .section-body h3:not(.diagram-title) {
  margin: 2rem 0 1rem;
  font-size: 1.2rem;
  line-height: 1.35;
}

:where(body[data-page="openhall-case-study"]) .section-body .flow + p { margin-top: 2rem; }

/* ── Hero / figure captions ── */
:where(body[data-page="openhall-case-study"]) .visual-caption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--faint);
}

:where(body[data-page="openhall-case-study"]) .figure-block { margin-top: 2rem; }
:where(body[data-page="openhall-case-study"]) .figure-block img { width: 100%; box-shadow: var(--shadow); }

/* ── Video embed ── */
:where(body[data-page="openhall-case-study"]) .video-frame { margin-top: 1.5rem; }

:where(body[data-page="openhall-case-study"]) .section-body .video-frame + p { margin-top: 1.5rem; }
:where(body[data-page="openhall-case-study"]) .section-body .figure-block + p { margin-top: 1.5rem; }

/* ── Pipeline flow: six stations + the validation gate ── */
:where(body[data-page="openhall-case-study"]) .flow {
  list-style: none;
  border-top: 1px solid var(--border);
}

:where(body[data-page="openhall-case-study"]) .flow-step {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
}

:where(body[data-page="openhall-case-study"]) .flow-head h4 {
  font-size: 0.98rem;
  line-height: 1.3;
}

:where(body[data-page="openhall-case-study"]) .flow-who {
  font-family: var(--font-mono);
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.3rem;
}

:where(body[data-page="openhall-case-study"]) .flow-step--ai   .flow-who { color: var(--accent); }
:where(body[data-page="openhall-case-study"]) .flow-step--code .flow-who { color: var(--faint); }

:where(body[data-page="openhall-case-study"]) .flow-step--ai { border-left: 2px solid var(--accent); padding-left: 1.25rem; }
:where(body[data-page="openhall-case-study"]) .flow-step--code { border-left: 2px solid var(--border); padding-left: 1.25rem; }

:where(body[data-page="openhall-case-study"]) .flow-step p {
  font-size: 0.92rem;
  color: var(--text-muted);
}

:where(body[data-page="openhall-case-study"]) .flow-gate {
  padding: 0.85rem 0 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  border-left: 2px dashed var(--accent);
  background: var(--accent-dim);
}

:where(body[data-page="openhall-case-study"]) .flow-gate span {
  display: block;
  font-size: 0.82rem;
  color: var(--text);
}

/* ── Restoration notes: numbered fix stories ── */
:where(body[data-page="openhall-case-study"]) .fix-list {
  list-style: none;
  counter-reset: fix;
  margin-top: 1.5rem;
}

:where(body[data-page="openhall-case-study"]) .fix-item {
  counter-increment: fix;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 1.25rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--border);
}

:where(body[data-page="openhall-case-study"]) .fix-item:last-child { border-bottom: 1px solid var(--border); }

:where(body[data-page="openhall-case-study"]) .fix-item::before {
  content: counter(fix, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1.4;
}

:where(body[data-page="openhall-case-study"]) .fix-item h4 {
  grid-column: 2;
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

:where(body[data-page="openhall-case-study"]) .fix-item p {
  grid-column: 2;
  font-size: 0.92rem;
  color: var(--text-muted);
}

:where(body[data-page="openhall-case-study"]) .fix-item strong { color: var(--text); }

/* ── Responsive ── */
@media (max-width: 680px) {
  :where(body[data-page="openhall-case-study"]) .flow-step { grid-template-columns: 1fr; gap: 0.4rem; }

  :where(body[data-page="openhall-case-study"]) .fix-item { grid-template-columns: 36px 1fr; gap: 0.9rem; }
}

/* Case: re-hello */
/* ── Hero visual: a transparent phone-mockup PNG, so no rectangular shadow ── */
:where(body[data-page="re-hello-case-study"]) .hero-visual img {
  width: min(100%, 360px);
  height: auto;
  margin-inline: auto;
  box-shadow: none;
}

/* ── Product Hunt "Featured" badge: swaps with the site theme ── */
:where(body[data-page="re-hello-case-study"]) .ph-badge {
  margin-top: 1.5rem;
}

:where(body[data-page="re-hello-case-study"]) .ph-badge img {
  display: block;
  width: 250px;
  height: 54px;
  box-shadow: none;
}

:where(body[data-page="re-hello-case-study"]) .ph-badge .ph-badge-dark { display: none; }
[data-theme="dark"] :where(body[data-page="re-hello-case-study"]) .ph-badge .ph-badge-light { display: none; }
[data-theme="dark"] :where(body[data-page="re-hello-case-study"]) .ph-badge .ph-badge-dark { display: block; }

/* Capture options retain table headers when presented as mobile rows. */
:where(body[data-page="re-hello-case-study"]) .case-table { table-layout: fixed; }

:where(body[data-page="re-hello-case-study"]) .case-table th:first-child { width: 28%; }
:where(body[data-page="re-hello-case-study"]) .case-table th:nth-child(2) { width: 44%; }

/* Case: signal-delay */
:where(body[data-page="signal-delay-case-study"]) .hero-desc + .hero-desc { margin-top: 1rem; }

:where(body[data-page="signal-delay-case-study"]) .hero-frame {
  padding: clamp(0.55rem, 1.5vw, 0.9rem);
  background: #202020;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

:where(body[data-page="signal-delay-case-study"]) .hero-frame img { display: block; height: auto; }

:where(body[data-page="signal-delay-case-study"]) .visual-caption {
  margin-top: 0.7rem;
  max-width: 72ch;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--faint);
}

:where(body[data-page="signal-delay-case-study"]) .visual-caption strong { color: var(--text); }

/* ── Mission stills ── */
:where(body[data-page="signal-delay-case-study"]) .mission-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  margin-top: 2rem;
}

:where(body[data-page="signal-delay-case-study"]) .mission-shot {
  min-width: 0;
  margin: 0;
}

:where(body[data-page="signal-delay-case-study"]) .mission-shot--wide { grid-column: 1 / -1; }

:where(body[data-page="signal-delay-case-study"]) .mission-shot img,
:where(body[data-page="signal-delay-case-study"]) .compare-grid img {
  width: 100%;
  height: auto;
  display: block;
  background: #202020;
  box-shadow: var(--shadow);
}

/* ── Evidence and collaboration tables ── */

:where(body[data-page="signal-delay-case-study"]) .case-table--evidence { table-layout: fixed; }
:where(body[data-page="signal-delay-case-study"]) .case-table--evidence th:first-child { width: 28%; }
:where(body[data-page="signal-delay-case-study"]) .case-table--evidence th:nth-child(2) { width: 38%; }

:where(body[data-page="signal-delay-case-study"]) .compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

:where(body[data-page="signal-delay-case-study"]) .compare-grid figure { min-width: 0; }

/* ── AI boundary flow ── */
:where(body[data-page="signal-delay-case-study"]) .boundary-flow {
  list-style: none;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
}

:where(body[data-page="signal-delay-case-study"]) .boundary-flow li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 1.1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--border);
}

:where(body[data-page="signal-delay-case-study"]) .boundary-num {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 400;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

:where(body[data-page="signal-delay-case-study"]) .boundary-flow p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-muted);
}

:where(body[data-page="signal-delay-case-study"]) .section-body .boundary-flow + p { margin-top: 1.5rem; }
:where(body[data-page="signal-delay-case-study"]) .compare-grid--debrief { margin-top: 2.5rem; }

/* ── Responsive ── */
@media (max-width: 820px) {
  :where(body[data-page="signal-delay-case-study"]) .compare-grid { grid-template-columns: 1fr; }

  :where(body[data-page="signal-delay-case-study"]) .mission-gallery { grid-template-columns: 1fr; }

  :where(body[data-page="signal-delay-case-study"]) .mission-shot--wide { grid-column: auto; }
}

@media (max-width: 680px) {
  :where(body[data-page="signal-delay-case-study"]) .boundary-flow li { grid-template-columns: 38px 1fr; gap: 0.8rem; }
}

/* Case: sky-to-porch */
/* ── Screenshot captions under shot-grid figures ── */
:where(body[data-page="sky-to-porch-case-study"]) .shot-grid figure { margin: 0; }

:where(body[data-page="sky-to-porch-case-study"]) .shot-grid figcaption {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Case: ways-of-healing */
/* ── Hero caption ── */
:where(body[data-page="ways-of-healing-case-study"]) .hero-caption {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--faint);
}

/* ── Inline links inside body copy ── */
:where(body[data-page="ways-of-healing-case-study"]) .inline-link { transition: color 0.2s, text-decoration-color 0.2s; }

/* ── Sub-headings inside sections ── */
:where(body[data-page="ways-of-healing-case-study"]) .section-body h3 {
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin: 2.5rem 0 1rem;
}

:where(body[data-page="ways-of-healing-case-study"]) .section-body h3:first-of-type { margin-top: 1.75rem; }

/* ── Diagrams: ruled figures, scrollable on small screens ── */
:where(body[data-page="ways-of-healing-case-study"]) .diagram-frame { border-top: 1px solid var(--text); padding-top: 1.25rem; }

:where(body[data-page="ways-of-healing-case-study"]) .section-body p + .diagram-frame { margin-top: 2rem; }

:where(body[data-page="ways-of-healing-case-study"]) .section-body .diagram-frame + .decision-grid,
:where(body[data-page="ways-of-healing-case-study"]) .section-body .diagram-frame + p { margin-top: 2rem; }

:where(body[data-page="ways-of-healing-case-study"]) .diagram-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(body[data-page="ways-of-healing-case-study"]) .diagram-frame svg {
  width: 100%;
  height: auto;
  display: block;
  min-width: 560px;
}

:where(body[data-page="ways-of-healing-case-study"]) .diagram-frame figcaption {
  font-size: 0.78rem;
  color: var(--faint);
  margin-top: 0.6rem;
}

/* ── Sketch gallery ── */
:where(body[data-page="ways-of-healing-case-study"]) .sketch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem 1.25rem;
  margin-top: 1.5rem;
}

:where(body[data-page="ways-of-healing-case-study"]) .sketch-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  box-shadow: var(--shadow);
}

:where(body[data-page="ways-of-healing-case-study"]) .sketch-grid figcaption {
  font-size: 0.78rem;
  color: var(--faint);
  line-height: 1.45;
  margin-top: 0.6rem;
}

/* ── Illustration strip ── */
:where(body[data-page="ways-of-healing-case-study"]) .illo-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
  margin-top: 1.5rem;
}

:where(body[data-page="ways-of-healing-case-study"]) .illo-strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: var(--shadow);
}

:where(body[data-page="ways-of-healing-case-study"]) .section-body .illo-strip + p { margin-top: 2rem; }

/* ── Bookmark strip ── */
:where(body[data-page="ways-of-healing-case-study"]) .bookmark-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
  margin-top: 1.5rem;
}

:where(body[data-page="ways-of-healing-case-study"]) .bookmark-row img {
  width: 110px;
  box-shadow: var(--shadow);
}

/* ── Research tables ── */
:where(body[data-page="ways-of-healing-case-study"]) .research-table tbody th { font-weight: 400; }

:where(body[data-page="ways-of-healing-case-study"]) .survey-table th:last-child,
:where(body[data-page="ways-of-healing-case-study"]) .survey-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

:where(body[data-page="ways-of-healing-case-study"]) .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin-top: 1.5rem;
}

:where(body[data-page="ways-of-healing-case-study"]) .table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

:where(body[data-page="ways-of-healing-case-study"]) .table-scroll .research-table { margin-top: 0; }
:where(body[data-page="ways-of-healing-case-study"]) .decisions-table { min-width: 36rem; }
:where(body[data-page="ways-of-healing-case-study"]) .decisions-table th:first-child { width: 44%; }
:where(body[data-page="ways-of-healing-case-study"]) .decisions-table th:last-child { width: 17%; }

:where(body[data-page="ways-of-healing-case-study"]) .section-body .research-table + p,
:where(body[data-page="ways-of-healing-case-study"]) .section-body .table-scroll + p { margin-top: 1rem; }

:where(body[data-page="ways-of-healing-case-study"]) .section-body .table-hint {
  font-size: 0.78rem;
  color: var(--faint);
}

/* ── Responsive ── */
@media (max-width: 680px) {
  :where(body[data-page="ways-of-healing-case-study"]) .sketch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }

  :where(body[data-page="ways-of-healing-case-study"]) .illo-strip { grid-template-columns: repeat(3, 1fr); }

  :where(body[data-page="ways-of-healing-case-study"]) .diagram-frame svg { min-width: 480px; }

  :where(body[data-page="ways-of-healing-case-study"]) .diagram-frame figcaption::after {
    content: " (swipe sideways to see the full diagram)";
    opacity: 0.75;
  }
}

/* Case: yimu */
/* ── Demo video: editorial media treatment ── */
:where(body[data-page="yimu-case-study"]) .demo-video {
  display: block;
  width: 100%;
  margin-top: 1rem;
  box-shadow: var(--shadow);
  background: #202020;
}

:where(body[data-page="yimu-case-study"]) .video-note {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: var(--faint);
}

/* ── "In use" screenshots: wide app states + a tall, narrower settings shot ──
   The settings dialog now runs six stacked sections, too tall to sit
   in an even two-column grid without one image dwarfing the other —
   so it gets its own constrained-width column instead. ── */
:where(body[data-page="yimu-case-study"]) .shot-wide {
  display: block;
  width: 100%;
  margin-top: 1rem;
  box-shadow: var(--shadow);
}

:where(body[data-page="yimu-case-study"]) .shot-narrow {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 1.5rem auto 0;
  box-shadow: var(--shadow);
}

/* Shared stacked tables retain column headers for assistive technology. */
@media (max-width: 680px) {
  .case-table { display: block; }

  .case-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .case-table tbody {
    display: block;
    border-top: 1px solid var(--text);
  }

  .case-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border);
  }

  .case-table tbody th,
    .case-table tbody th:first-child,
    .case-table tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    overflow-wrap: normal;
  }

  .case-table tbody th { font-size: 1rem; }

  .case-table-field {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text);
    font-size: 0.82rem;
  }
}