/*
  Portfolio / Alex Rudnicki
  Design system, visual design, and front-end code by Alex Rudnicki.
  © 2026 Alex Rudnicki. All rights reserved.
*/

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
  opacity: var(--progress-opacity);
  transition: transform var(--duration-instant) linear;
}

.case-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding:
    calc(var(--nav-height) + env(safe-area-inset-top) + var(--page-top-y))
    var(--side)
    var(--case-section-y);
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: var(--action-arrow-gap);
  width: fit-content;
  margin-bottom: var(--stack-lg);
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  text-transform: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.case-back::before {
  content: '';
  width: var(--action-line-w);
  height: 1px;
  background: currentColor;
  opacity: var(--case-impact-label-rule-opacity);
  transition: width var(--duration-fast) var(--ease-standard);
}
.case-back:hover { color: var(--accent); }
.case-back:hover::before { width: var(--action-line-w-hover); }

.case-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--content-gap);
  align-items: end;
}
.case-hero-text,
.case-hero-visual { min-width: 0; }
.case-hero-text { align-self: start; }

.case-title {
  margin-bottom: var(--stack-lg);
  color: var(--text);
  font-size: var(--type-page-title);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-title);
}
.case-lede {
  max-width: var(--measure-lede);
  margin-bottom: var(--stack-lg);
  color: var(--muted);
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

.case-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tag-gap);
}
.case-pills li {
  color: var(--tag-text);
  font-size: var(--type-tag);
  font-weight: var(--tag-weight);
  letter-spacing: 0;
  text-transform: none;
  line-height: var(--leading-label);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  border: 1px solid var(--tag-border);
  background: var(--tag-bg);
  border-radius: var(--radius-chip);
  padding: var(--tag-pad);
}
.visual-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-surface);
  border: 1px solid var(--border-surface);
  background: var(--panel-bg);
  aspect-ratio: var(--case-visual-ratio);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--panel-text) 14%, transparent),
    var(--shadow-visual-drop);
}
.visual-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--navy) 4%, transparent), color-mix(in srgb, var(--navy) 22%, transparent)),
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--blue-pale) 18%, transparent), transparent 44%);
  mix-blend-mode: multiply;
}
.visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.92);
}

.case-figure {
  margin-top: var(--stack-lg);
}
.case-figure--sm {
  max-width: min(var(--figure-sm-w), var(--figure-sm-vw));
  margin-inline: auto;
}
.case-figure img {
  width: 100%;
  border-radius: var(--radius-surface);
  border: 1px solid var(--border-surface);
  display: block;
}
.case-figure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.case-figure figcaption {
  margin-top: var(--space-sm);
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: var(--leading-caption);
}
.case-figure figcaption strong {
  color: var(--text);
  font-weight: var(--weight-strong);
}

.case-matrix {
  margin-top: var(--stack-xl);
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-surface);
  overflow: hidden;
}
.case-matrix-head {
  display: grid;
  grid-template-columns: var(--case-matrix-col) 1fr;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border-surface);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
}
.case-matrix-row {
  display: grid;
  grid-template-columns: var(--case-matrix-col) 1fr;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--rule-faint);
  align-items: baseline;
}
.case-matrix-row:last-child {
  border-bottom: none;
}
.case-matrix-type {
  font-size: var(--type-body-sm);
  font-weight: var(--weight-strong);
  color: var(--accent);
}
.case-matrix-action {
  font-size: var(--type-body-sm);
  color: var(--muted);
  line-height: var(--leading-body);
}

.behavior-compare {
  padding: var(--viz-panel-pad);
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-surface);
  background: var(--off-white);
}
.behavior-compare-head {
  max-width: var(--measure-viz-head);
}
.viz-kicker {
  margin-bottom: var(--space-sm);
  color: var(--accent-label);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
}
.behavior-compare h3 {
  margin-bottom: var(--space-sm);
  color: var(--text);
  font-size: var(--type-impact-title);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}
.behavior-compare-head p {
  color: var(--muted);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.behavior-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(var(--space-12), 5.2vw, var(--space-14)) minmax(0, 1fr);
  gap: var(--viz-gap);
  align-items: stretch;
  margin-top: var(--stack-lg);
}
.behavior-card {
  min-width: 0;
  padding: var(--viz-card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-surface);
  background: var(--cream);
}
.behavior-card-baseline {
  background: var(--cream);
}
.behavior-card-ar {
  border-color: var(--border-dark);
  background: var(--off-white);
}
.behavior-label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--muted);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
}
.behavior-card-ar .behavior-label {
  color: var(--accent-label);
}
.behavior-card strong {
  display: block;
  margin-bottom: var(--stack-md);
  color: var(--text);
  font-size: var(--type-metric-primary);
  font-weight: var(--weight-heading);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
}
.behavior-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.behavior-card dl div {
  min-width: 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule-faint);
}
.behavior-card dt {
  color: var(--text);
  font-size: var(--type-metric-secondary);
  font-weight: var(--weight-heading);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-heading);
  font-variant-numeric: tabular-nums;
}
.behavior-card dd {
  margin-top: var(--space-xs);
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: var(--weight-strong);
  line-height: var(--leading-data);
}
.behavior-transfer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--viz-transfer-pad);
  color: var(--accent-label);
  font-weight: var(--weight-heading);
}
.behavior-transfer span {
  width: var(--space-12);
  height: var(--space-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-chip);
  background: var(--off-white);
}
.behavior-transfer svg {
  width: var(--space-5);
  height: var(--space-5);
  display: block;
}
.behavior-decision {
  margin-top: var(--stack-lg);
  max-width: var(--measure-viz-decision);
  padding-top: var(--stack-md);
  border-top: 1px solid var(--rule-faint);
  color: var(--text);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.behavior-decision strong {
  color: var(--accent-label);
  font-weight: var(--weight-label);
}

.case-brief {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--side);
}
.brief-inner {
  position: relative;
  padding: 0 0 var(--case-section-y);
}
.brief-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.brief-cell {
  position: relative;
  min-width: 0;
  padding: 0 var(--stack-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.brief-cell + .brief-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.1rem;
  width: 1px;
  background: linear-gradient(
    180deg,
    var(--rule-faint),
    var(--border) 22%,
    var(--border) 78%,
    var(--rule-faint)
  );
}
.brief-cell dt {
  color: var(--accent-label);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  text-transform: none;
}
.brief-cell dd {
  color: var(--text);
  font-size: var(--type-body);
  font-weight: var(--weight-strong);
  line-height: var(--leading-brief);
  letter-spacing: 0;
}

.case-body-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--case-section-y) var(--side);
  display: grid;
  grid-template-columns: var(--case-toc-w) minmax(0, 1fr);
  gap: var(--content-gap);
  align-items: start;
}

.case-toc {
  position: sticky;
  top: calc(var(--nav-height) + env(safe-area-inset-top) + var(--toc-scroll-offset));
  align-self: start;
}
.toc-label {
  margin-bottom: var(--stack-md);
  color: var(--accent-label);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  text-transform: none;
}
.case-toc ol {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.case-toc a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--menu-control-size);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: var(--weight-strong);
  line-height: var(--leading-label-tall);
  transition: color var(--duration-fast) var(--ease-standard);
}
.case-toc a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: var(--space-3);
  background: var(--border);
  opacity: var(--toc-rule-opacity);
  transform: translateY(-50%);
  transition:
    height var(--duration-medium) var(--ease-standard),
    width var(--duration-medium) var(--ease-standard),
    background var(--duration-medium) var(--ease-standard),
    opacity var(--duration-medium) var(--ease-standard);
}
.toc-num {
  color: var(--subtle);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.case-toc a:hover,
.case-toc a.toc-active { color: var(--accent); }
.case-toc a:hover::before,
.case-toc a.toc-active::before {
  height: var(--space-5);
  width: 2px;
  background: var(--accent);
  opacity: 1;
}

.case-article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--case-section-gap);
}

.case-section {
  scroll-margin-top: calc(var(--nav-height) + env(safe-area-inset-top) + var(--toc-scroll-offset));
}

.case-section .sec-head {
  margin-bottom: var(--stack-lg);
}
.case-section .sec-head-bare { margin-bottom: 0; }
.case-section .sec-head + .case-reflect { margin-top: var(--stack-xl); }

.case-section-title {
  max-width: var(--measure-heading);
  color: var(--text);
  font-size: var(--type-subsection-title);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-title);
}

.case-section-lede {
  max-width: var(--measure-lede);
  margin-bottom: var(--stack-xl);
  color: var(--text);
  font-size: var(--type-body-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

.case-prose {
  display: flex;
  flex-direction: column;
  gap: var(--stack-md);
  max-width: var(--measure-body);
}
.case-prose p {
  color: var(--muted);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.case-prose p strong {
  color: var(--text);
  font-weight: var(--weight-strong);
}

.case-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--stack-lg);
}
.case-split > div {
  min-width: 0;
  padding: var(--card-pad);
}
.case-split > div + div {
  border-left: 1px solid var(--rule-faint);
}
.split-label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--accent-label);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  text-transform: none;
}
.case-split p {
  color: var(--text);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

.case-numbered {
  display: grid;
  grid-template-columns: 1fr;
}
.case-numbered li {
  display: grid;
  grid-template-columns: var(--case-num-col) minmax(0, 1fr);
  column-gap: var(--stack-md);
  align-items: start;
  padding: var(--card-pad) 0;
}
.case-numbered li + li {
  border-top: 1px solid var(--rule-faint);
}
.case-num {
  color: var(--accent-label);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  padding-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.case-numbered h3 {
  margin-bottom: var(--space-2xs);
  color: var(--text);
  font-size: var(--type-item-title);
  font-weight: var(--weight-label);
  line-height: var(--leading-item);
  letter-spacing: 0;
}
.case-numbered p {
  max-width: 58ch;
  color: var(--muted);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.case-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--stack-lg);
}
.case-stats > div {
  padding: var(--stack-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.case-stats > div + div {
  border-left: 1px solid var(--rule-faint);
}
.case-stats dt {
  color: var(--accent-label);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  text-transform: none;
}
.case-stats dd {
  color: var(--text);
  font-size: var(--type-body);
  font-weight: var(--weight-strong);
  line-height: var(--leading-brief);
  letter-spacing: 0;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-grid li {
  min-width: 0;
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.case-grid li:nth-child(even) {
  border-left: 1px solid var(--rule-faint);
}
.case-grid li:nth-child(n+3) {
  border-top: 1px solid var(--rule-faint);
}
.case-grid .case-num {
  margin-bottom: var(--space-2xs);
  padding-top: 0;
}
.case-grid h3 {
  color: var(--text);
  font-size: var(--type-item-title);
  font-weight: var(--weight-label);
  line-height: var(--leading-item);
  letter-spacing: 0;
}
.case-grid p {
  color: var(--muted);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.case-section-impact { padding-top: 0; }

.case-impact {
  position: relative;
  z-index: var(--z-section);
  padding: var(--panel-pad);
  background: var(--panel-bg);
  color: var(--panel-text);
  border-radius: var(--radius-surface);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--panel-text) 10%, transparent),
    var(--shadow-panel-drop);
}
.case-impact-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--stack-md);
  color: var(--panel-soft);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  text-transform: none;
}
.case-impact-label::before {
  content: '';
  width: var(--case-impact-label-rule-w);
  height: var(--case-impact-label-rule-h);
  background: currentColor;
  opacity: var(--case-impact-label-rule-opacity);
}
.case-impact h2,
.case-impact h3 {
  max-width: 32ch;
  margin-bottom: var(--stack-md);
  color: var(--panel-text);
  font-size: var(--type-subsection-title);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading-panel);
}
.case-impact p {
  max-width: 56ch;
  color: var(--panel-muted);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.case-impact .case-impact-label {
  color: var(--panel-soft);
}
.case-impact .case-stats > div + div {
  border-left-color: var(--panel-line-soft);
}
.case-impact .case-stats dt {
  color: var(--panel-soft);
}
.case-impact .case-stats dd {
  color: var(--panel-text);
}

.case-reflect {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-reflect > div {
  min-width: 0;
  padding: var(--card-pad);
}
.case-reflect > div:nth-child(even) {
  border-left: 1px solid var(--rule-faint);
}
.case-reflect > div:nth-child(3) {
  grid-column: 1 / -1;
  border-left: 0;
  border-top: 1px solid var(--rule-faint);
  padding-top: var(--card-pad);
}
.case-reflect > div:nth-child(3) p {
  max-width: var(--measure-body);
}
.case-reflect h3 {
  margin-bottom: var(--space-xs);
  color: var(--text);
  font-size: var(--type-item-title);
  font-weight: var(--weight-label);
  line-height: var(--leading-item);
  letter-spacing: 0;
}
.case-reflect p {
  max-width: 52ch;
  color: var(--muted);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.case-next {
  position: relative;
  z-index: var(--z-section);
  overflow: hidden;
  background: var(--panel-bg);
  color: var(--panel-text);
}
.case-next-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--case-section-y) var(--side);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--content-gap);
  align-items: center;
}
.case-next-eyebrow {
  margin-bottom: var(--space-sm);
  color: var(--panel-soft);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  text-transform: none;
}
.case-next-title {
  display: inline;
  color: var(--panel-text);
  font-size: var(--type-case-next-title);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-solid);
  text-wrap: balance;
  transition: color var(--duration-fast) var(--ease-standard);
}
.case-impact .title-hi,
.case-next-title .title-hi { color: var(--panel-soft); }
.case-next-title::after {
  content: '→';
  display: inline-block;
  margin-left: var(--action-arrow-gap);
  color: var(--panel-text);
  font-size: var(--type-inline-arrow);
  font-weight: var(--weight-body);
  vertical-align: 0.08em;
  transition: transform var(--duration-medium) var(--ease-standard);
}
.case-next-title:hover { color: var(--panel-text); }
.case-next-title:hover::after { transform: translateX(var(--action-arrow-shift)); }

.case-next-links {
  display: grid;
}
.case-next-links a {
  min-height: var(--space-14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
  color: var(--panel-muted);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  text-transform: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    padding var(--duration-fast) var(--ease-standard);
}
.case-next-links a + a { border-top: 1px solid var(--panel-line-soft); }
.case-next-links a:hover {
  color: var(--panel-text);
  background: color-mix(in srgb, var(--tone-white) 4.5%, transparent);
  padding-left: var(--space-1);
}
.case-next-links a.case-prev-link { justify-content: flex-start; }
.case-next-links a.case-prev-link:hover { padding-left: 0; }
.case-next-links svg { width: var(--icon-size-sm); height: var(--icon-size-sm); flex-shrink: 0; }

.case-top-link svg { transition: transform var(--duration-fast) var(--ease-standard); }
.case-next-links a.case-top-link:hover { padding-left: 0; }
.case-next-links a.case-top-link:hover svg { transform: translateY(-2px); }

@media (max-width: 960px) {
  .case-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--content-gap);
    align-items: start;
  }
  .case-hero-visual {
    width: min(100%, var(--case-visual-stack-max));
    justify-self: center;
  }
  .visual-frame {
    aspect-ratio: var(--case-visual-stack-ratio);
  }

  .brief-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
  }
  .brief-cell {
    padding: var(--stack-md) var(--stack-md);
  }
  .brief-cell:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid var(--border);
  }
  .brief-cell:nth-child(even) {
    padding-right: 0;
  }
  .brief-cell:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }
  .brief-cell + .brief-cell::before,
  .brief-cell:nth-child(even)::before { content: none; display: none; }
  .brief-cell:nth-child(n+3)::after { content: none; display: none; }
  .brief-cell:nth-child(n+3) { padding-top: var(--stack-md); }

  .behavior-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .behavior-transfer {
    min-height: var(--space-14);
    padding-top: 0;
    align-items: center;
    justify-self: stretch;
  }
  .behavior-transfer span {
    width: var(--control-min);
    height: var(--control-min);
  }
  .behavior-transfer svg {
    transform: rotate(90deg);
  }
  .behavior-card dl {
    grid-template-columns: 1fr;
  }
  .behavior-card dl div {
    display: grid;
    grid-template-columns: minmax(var(--space-14), 0.2fr) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: baseline;
  }

  .case-next-inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--stack-lg);
    padding-top: var(--case-section-y);
    padding-bottom: var(--case-section-y);
  }
  .case-next-title {
    line-height: var(--leading-title);
  }
}

@media (max-width: 820px) {
  .case-hero {
    padding-top: calc(var(--nav-height) + env(safe-area-inset-top) + var(--page-top-y));
    padding-bottom: var(--case-section-y);
  }
  .case-back { margin-bottom: var(--stack-md); }
  .case-title {
    font-size: var(--type-page-title);
    line-height: var(--leading-title);
    margin-bottom: var(--stack-md);
  }
  .case-lede {
    max-width: 38ch;
    font-size: var(--type-body-lg);
    line-height: var(--leading-body);
    margin-bottom: var(--stack-lg);
  }
  .case-pills {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--tag-gap-tight);
  }
  .case-pills li {
    max-width: 100%;
    white-space: normal;
  }
  .visual-frame { aspect-ratio: var(--case-visual-stack-ratio); }

  .case-brief { padding-top: 0; }
  .brief-inner {
    padding: 0 0 var(--case-section-y);
  }
  .brief-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .brief-cell,
  .brief-cell:nth-child(odd),
  .brief-cell:nth-child(even) {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.4fr) minmax(0, 1fr);
    gap: var(--stack-md);
    align-items: baseline;
    padding: var(--stack-lg) 0;
    border: 0;
    border-bottom: 1px solid var(--rule-faint);
  }
  .brief-cell:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .brief-cell::before,
  .brief-cell::after,
  .brief-cell:nth-child(even)::before,
  .brief-cell:nth-child(n+3)::after {
    display: none !important;
    content: none !important;
  }
  .brief-cell dt { font-size: var(--type-meta); margin: 0; }
  .brief-cell dd { font-size: var(--type-body-sm); line-height: var(--leading-copy-compact); }

  .case-body-wrap {
    grid-template-columns: 1fr;
    gap: var(--content-gap);
    padding-top: var(--case-section-y);
  }

  .case-toc { position: static; }
  .toc-label { margin-bottom: var(--space-sm); }
  .case-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .case-toc a {
    justify-content: center;
    min-height: var(--control-min);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-chip);
    background: color-mix(in srgb, var(--off-white) 56%, transparent);
    text-align: center;
    font-size: var(--type-meta);
    font-weight: var(--weight-strong);
    line-height: var(--leading-ui);
  }
  .case-toc a::before,
  .toc-num { display: none; }
  .case-toc a.toc-active {
    background: var(--panel-bg);
    border-color: var(--panel-bg);
    color: var(--panel-text);
  }

  .case-article { gap: var(--case-section-gap); }
  .case-section .sec-head { margin-bottom: var(--stack-md); }
  .case-section-title {
    font-size: var(--type-subsection-title);
    line-height: var(--leading-title);
  }
  .case-section-lede {
    font-size: var(--type-body-lg);
    line-height: var(--leading-body);
    margin-bottom: var(--stack-lg);
  }
  .case-prose { gap: var(--stack-md); }
  .case-prose p { font-size: var(--type-body); line-height: var(--leading-body); }
  .case-figure-grid { grid-template-columns: 1fr; }
  .behavior-compare {
    padding: var(--card-pad);
  }

  .case-split,
  .case-reflect {
    grid-template-columns: 1fr;
  }
  .case-split > div,
  .case-reflect > div {
    padding: var(--card-pad) 0;
    border-left: 0;
  }
  .case-split > div + div,
  .case-reflect > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule-faint);
  }
  .case-reflect > div:nth-child(3) { grid-column: auto; }

  .case-numbered li {
    grid-template-columns: var(--space-10) minmax(0, 1fr);
    column-gap: var(--space-sm);
    padding: var(--card-pad) 0;
  }
  .case-numbered p { max-width: none; line-height: var(--leading-body); }

  .case-stats {
    grid-template-columns: 1fr;
    margin-bottom: var(--stack-lg);
  }
  .case-stats > div {
    padding: var(--stack-md) 0;
    border-left: 0;
  }
  .case-stats > div + div {
    border-left: 0;
    border-top: 1px solid var(--rule-faint);
  }

  .case-grid {
    grid-template-columns: 1fr;
  }
  .case-grid li,
  .case-grid li:nth-child(even) {
    padding: var(--card-pad) 0;
    border-left: 0;
  }
  .case-grid li + li {
    border-top: 1px solid var(--rule-faint);
  }
  .case-grid li:nth-child(n+3) { border-top: 1px solid var(--rule-faint); }

  .case-impact {
    padding: var(--panel-pad);
  }
  .case-impact h2,
  .case-impact h3 {
    line-height: var(--leading-tight);
  }
  .case-impact p { line-height: var(--leading-body); }

  .case-next-title {
    font-size: var(--type-case-next-title);
  }
  .case-next-links a {
    min-height: var(--contact-control-min);
    padding: 0 var(--space-1);
    font-size: var(--type-meta);
  }
  .case-next-links a:hover { padding-left: var(--space-1); }
}

@media (max-width: 480px) {
  .case-title { font-size: var(--type-page-title); }
  .case-toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .case-toc a {
    min-width: 0;
    padding-inline: var(--space-2);
    font-size: var(--type-meta);
  }
  .brief-cell,
  .brief-cell:nth-child(odd),
  .brief-cell:nth-child(even) {
    grid-template-columns: minmax(6.6rem, 0.4fr) minmax(0, 1fr);
  }
  .case-numbered li {
    grid-template-columns: var(--space-8) minmax(0, 1fr);
    column-gap: var(--space-sm);
  }
  .case-next-title { font-size: var(--type-case-next-title); }
}

[data-theme="night"] .visual-frame {
  box-shadow: var(--shadow-visual-drop);
}
[data-theme="night"] .visual-frame::after {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cream-nav) 6%, transparent), color-mix(in srgb, var(--cream-nav) 28%, transparent)),
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 44%);
  mix-blend-mode: normal;
}
[data-theme="night"] .visual-frame img {
  filter: contrast(1.03) saturate(0.92) brightness(0.9);
}

[data-theme="night"] .case-impact {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-label) 16%, transparent),
    var(--shadow-panel-drop);
}

@media (max-width: 820px) {
  [data-theme="night"] .case-toc a {
    background: var(--btn-bg);
    color: var(--muted);
  }
  [data-theme="night"] .case-toc a:hover,
  [data-theme="night"] .case-toc a.toc-active {
    background: var(--panel-text);
    border-color: var(--panel-text);
    color: var(--panel-bg);
  }
}