/* ── Cases page ────────────────────────────────────────────────────
   Field Card content display style, per reference:
     - warm oat card (#E7DFCB) on paler oat page (#F5F0E8)
     - deep forest green primary + rust accent
     - dashed inner border (matte-print frame)
     - condensed uppercase display headings; serif body, justified
     - filled numbered dots (green=done, rust=current); simple
     - rust-bubble callouts for annotations
   ================================================================ */

* { box-sizing: border-box; }
/* Page background matches the homepage hero area exactly (paper
   #F7F6F3 with dotted pattern from journey.css .bj-paper style). */
body {
  background-color: #F7F6F3;
  background-image: radial-gradient(circle, #ccc8c0 1px, transparent 1px);
  background-size: 20px 20px;
}

:root {
  --paper: #F7F6F3;
  /* Case study cards use the same warm gold as the homepage's
     post-hero band (#EDCF5F) so the case reads as a physical card
     lifted from the homepage's yellow surface. */
  --card: #EDCF5F;
  --card-line: rgba(44, 65, 50, 0.22);
  --card-line-solid: rgba(44, 65, 50, 0.12);
  --forest: #2C4132;
  --forest-soft: #4A6753;
  --forest-mute: #7A8C7F;
  --rust: #B85C3D;
  --rust-soft: #D67D5D;
  --olive: #8B7E60;
  --paper-input: #FBF6EA;

  --font-display: "Impact", "Haettenschweiler", "Arial Narrow Bold", "Oswald",
    system-ui, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Palatino",
    "Book Antiqua", "Georgia", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
    sans-serif;
}

.cases-page { padding: 32px 20px 96px; color: var(--forest); }
.cases-inner { max-width: 900px; margin: 0 auto; }

.cases-back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 800; color: var(--forest);
  text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none; margin-bottom: 24px;
  padding: 4px 0; border-bottom: 1.5px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.cases-back:hover { color: var(--rust); border-bottom-color: var(--rust); }

.cases-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 800;
  color: var(--rust);
  text-transform: uppercase; letter-spacing: .22em;
  margin-bottom: 20px;
  padding: 6px 16px;
  border: 1.5px solid var(--rust); border-radius: 999px;
}

/* ── Cover card: Field Card title-screen aesthetic ───────── */
.case-cover {
  background: var(--card);
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 32px;
  position: relative;
  text-align: center;
}
.case-cover::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1.5px dashed var(--card-line);
  border-radius: 3px;
  pointer-events: none;
}
.cover-figure {
  margin: 22px 22px 24px;
  padding: 0;
}
.cover-img {
  display: block; width: 100%; height: auto;
  background: transparent; border: 0;
  mix-blend-mode: multiply;
  /* Soft-fade edges into the card so the illustration reads as being
     drawn onto the paper rather than pasted on top of it. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 6%, black 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0%, black 6%, black 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Photo/screenshot figure (e.g. semifinal result on Card 05). No
   blend or mask -- these are color images, not line drawings, and
   should read as themselves. Just a subtle frame + rounded corners. */
.case-result-figure {
  margin: 8px 0 24px;
  padding: 0;
}
.case-result-img {
  display: block; width: 100%; height: auto;
  border-radius: 4px;
  border: 1.5px solid var(--card-line);
  background: var(--paper-input);
}

/* Flip card (Card 05 About Su): Tokyo 2020 front, London 2012 back.
   Click to rotate. 3D transform preserves depth; images use
   object-fit cover so mismatched aspect ratios still fill the face. */
.case-flip-figure {
  margin: 8px 0 24px;
  padding: 0;
  text-align: center;
}
.case-flip-card {
  display: block; width: 100%;
  padding: 0; border: 0; background: transparent;
  cursor: pointer;
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
}
.case-flip-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
  border-radius: 4px;
}
.case-flip-card.flipped .case-flip-inner {
  transform: rotateY(180deg);
}
.case-flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 4px;
  overflow: hidden;
  border: 1.5px solid var(--card-line);
  background: var(--paper-input);
}
.case-flip-face img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.case-flip-back { transform: rotateY(180deg); }
/* Caption bar attached to the top of the flip card. Full-width so both
   edges are flush with the photo, and both era tags render at the same
   length regardless of content. Only the top corners are rounded; the
   bottom edge butts up against the photo. */
.case-flip-label-row {
  margin-bottom: 0;
  padding: 0;
  min-height: 24px;
}
.case-flip-label {
  display: block; width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 800;
  color: var(--paper);
  text-transform: uppercase; letter-spacing: .18em;
  padding: 6px 14px 7px;
  border-radius: 3px 3px 0 0;
  transition: background 0.3s ease;
}
/* Tag color signals the era: Tokyo 2020 is rust (the breakthrough
   moment); London 2012 is forest (the starting point, before the
   script was rewritten). */
.case-flip-label-front { background: var(--rust); }
.case-flip-label-back  { background: var(--forest); }
.case-flip-card .case-flip-label-back { display: none; }
.case-flip-card.flipped .case-flip-label-front { display: none; }
.case-flip-card.flipped .case-flip-label-back { display: inline-block; }
.case-flip-hint {
  font-family: var(--font-body); font-style: italic;
  font-size: .72rem; color: var(--forest-soft);
  margin-top: 10px; letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
  .case-flip-inner { transition: none; }
}

/* Case-body figure (inline, e.g. on the Challenge card). Same img
   treatment as the cover but the vertical mask is aggressive on the
   top (sky) and bottom (track lanes) so only the mid-band with the
   athletes reads. The stadium behind them dissolves via the multiply
   blend and the softer horizontal edges. */
.case-figure {
  margin: 8px 0 24px;
  padding: 0;
}
.case-figure-img {
  display: block; width: 100%; height: auto;
  background: transparent; border: 0;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to bottom,
      transparent 0%, transparent 12%,
      black 30%, black 78%,
      transparent 92%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0%, black 8%, black 92%, transparent 100%),
    linear-gradient(to bottom,
      transparent 0%, transparent 12%,
      black 30%, black 78%,
      transparent 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.cover-eyebrow {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 800;
  color: var(--rust);
  text-transform: uppercase; letter-spacing: .22em;
  margin: 44px 0 14px;
}
.cover-eyebrow::before, .cover-eyebrow::after {
  content: "\2014"; margin: 0 10px;
  color: var(--rust); font-weight: 400;
}
.cover-numeral {
  font-family: var(--font-display);
  font-size: clamp(6rem, 12vw, 9rem);
  font-weight: 900; color: var(--forest);
  line-height: 1; letter-spacing: -0.04em;
  margin: 8px 0 20px;
  font-variant-numeric: tabular-nums;
}
.cover-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 900; color: var(--forest);
  line-height: 1.05; letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0 auto 14px;
  text-wrap: balance;
  max-width: 26ch;
}
.cover-subtitle {
  font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT",
    "Segoe Script", cursive;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  color: var(--rust); font-weight: 400;
  margin: 0 auto 24px;
  line-height: 1.2;
}
.cover-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem; color: var(--forest-soft); line-height: 1.65;
  max-width: 52ch; margin: 0 auto 26px;
}
.cover-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 0 auto 18px;
  max-width: 200px;
}
.cover-divider-line {
  flex: 1; height: 1px; background: var(--card-line);
}
.cover-divider-dots {
  font-size: .7rem; color: var(--forest-soft);
  letter-spacing: .1em;
}
.cover-meta {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 800;
  color: var(--forest-soft);
  text-transform: uppercase; letter-spacing: .18em;
  margin-bottom: 30px;
}
.cover-actions {
  padding-bottom: 44px;
}
.cover-cta {
  padding: 15px 32px;
  font-size: .82rem;
}

/* ── Step nav (numbered dots above the card) ────────────── */
.step-nav-wrap {
  text-align: center;
  margin: 0 0 20px;
  position: relative;
}
/* Elegant header row: subtle underlined 'Cover' link on the left,
   'Card N of 5' position on the right, hairline rule below. No
   pill/button chrome; type carries the affordance. */
.case-header-row {
  display: flex; justify-content: flex-start; align-items: center;
  padding: 0 2px 14px;
  border-bottom: 1px solid var(--card-line-solid);
  margin-bottom: 22px;
}
.case-header-link {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 700;
  color: var(--forest); background: transparent; border: 0; padding: 2px 0;
  text-transform: uppercase; letter-spacing: .14em;
  cursor: pointer;
  border-bottom: 1px solid var(--card-line);
  transition: color .12s ease, border-color .12s ease;
}
.case-header-link:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}
.step-nav-label {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--forest-soft); margin-bottom: 14px;
}
.step-nav {
  display: inline-flex; align-items: center; gap: 12px;
}
.step-dot {
  width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 800;
  border: 1.5px dashed var(--card-line);
  background: var(--paper);
  color: var(--forest-mute);
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.step-dot:hover { transform: translateY(-1px); }
.step-dot.done {
  background: var(--forest); color: var(--paper);
  border: 1.5px solid var(--forest);
}
.step-dot.active {
  background: var(--rust); color: var(--paper);
  border: 1.5px solid var(--rust);
  box-shadow: 0 2px 8px rgba(184, 92, 61, .3);
}
.step-dot.locked, .step-dot:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.step-dot.locked:hover { transform: none; }

/* ── Card shell ─────────────────────────────────────────── */
.case-card {
  background: var(--card);
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 24px;
  position: relative;
}
.case-card::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1.5px dashed var(--card-line);
  border-radius: 3px;
  pointer-events: none;
  z-index: 5;
}

/* ── Steps: only current shown ──────────────────────────── */
.case-step[hidden] { display: none; }
.case-step {
  padding: 30px 40px 24px;
}
.case-step-head { margin-bottom: 22px; }
/* Italic serif rhetorical hook that sits above the heading -- used
   on Card 01 to prime the reader before the challenge. */
.case-lead-question {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--forest-mute);
  margin: 0 0 22px;
  text-align: justify;
  text-align-last: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
.case-step-eyebrow {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 800;
  color: var(--forest-soft);
  text-transform: uppercase; letter-spacing: .2em;
  margin-bottom: 14px;
}
.case-step-eyebrow::before, .case-step-eyebrow::after {
  content: "\2014"; margin: 0 8px;
  color: var(--forest-soft); font-weight: 400;
}
.case-step-heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 900; color: var(--forest);
  line-height: 1.05; letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0; text-wrap: balance;
}
.case-step-body p {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--forest);
  margin: 0 0 18px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  text-align-last: left;
}
.case-block-subhead {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 900;
  color: var(--forest);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 32px 0 12px;
}
.case-step-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed var(--card-line);
}

/* ── Bubble callout (rust rounded rectangle with italic serif) ── */
.case-bubble {
  background: var(--rust);
  color: var(--paper);
  padding: 14px 18px;
  border-radius: 12px 12px 12px 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  box-shadow: 0 2px 10px rgba(184, 92, 61, 0.2);
  margin: 24px 0;
  max-width: 42ch;
}
.case-bubble.right { margin-left: auto; border-radius: 12px 12px 4px 12px; }
.case-bubble::before {
  content: attr(data-label);
  display: block;
  font-family: var(--font-body);
  font-style: normal; font-weight: 800;
  font-size: .62rem; text-transform: uppercase;
  letter-spacing: .18em; opacity: 0.75;
  margin-bottom: 4px;
}

/* ── Tables ─────────────────────────────────────────────── */
.case-table-wrap {
  overflow-x: auto;
  margin: 14px 0 16px;
  border: 1px solid var(--card-line-solid);
  border-radius: 3px;
  background: var(--paper-input);
}
.case-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-body);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
}
.case-table th, .case-table td {
  padding: 10px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--card-line-solid);
  line-height: 1.45;
}
.case-table thead th {
  background: rgba(44, 65, 50, 0.07);
  font-weight: 800; color: var(--forest);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1.5px solid var(--card-line-solid);
  white-space: nowrap;
}
.case-table tbody tr:last-child td,
.case-table tbody tr:last-child th { border-bottom: 0; }
.case-table th[scope="row"] {
  font-weight: 800; color: var(--forest); white-space: nowrap;
  font-size: 1rem;
}
.case-table .num { text-align: right; }
.case-table .th-note {
  font-weight: 500; color: var(--forest-soft); letter-spacing: 0;
  text-transform: none;
}
.case-table-compact th, .case-table-compact td { padding: 8px 12px; }
.case-table-times td { padding: 14px 16px; font-size: 1.1rem; }
.case-table-times .num { font-weight: 900; color: var(--forest); font-size: 1.15rem; }

.case-fact-line {
  font-family: var(--font-serif);
  font-size: .98rem; color: var(--forest);
  padding: 12px 16px; background: rgba(184, 92, 61, 0.06);
  border-left: 3px solid var(--rust);
  margin: 12px 0 8px;
}
.case-source {
  font-family: var(--font-body);
  font-size: .72rem; color: var(--forest-mute); font-style: italic;
  margin: 6px 0 0;
}

/* ── Ranking exercise (stacked list with up/down buttons) ── */
.rank-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 12px;
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--paper-input);
  border: 1.5px solid var(--card-line);
  border-radius: 4px;
  color: var(--forest);
}
.rank-position {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--rust);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 900; font-size: .88rem;
  box-shadow: 0 2px 6px rgba(184, 92, 61, .35);
}
.rank-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 900; color: var(--forest);
  line-height: 1; letter-spacing: .04em;
  text-transform: uppercase;
}
.rank-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 4px;
  background: transparent;
  border: 1.5px solid var(--card-line);
  color: var(--forest);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.rank-btn:hover:not(:disabled) {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
}
.rank-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Brief rust flash on the row that was just moved via up/down. Fades
   back to the normal cream fill over 0.7s. Combined with the FLIP
   transform-transition on all rows, the swap reads clearly as a
   deliberate action. */
.rank-row.rank-row-just-moved {
  animation: rank-row-flash 0.75s ease-out;
}
@keyframes rank-row-flash {
  0%   { background: rgba(184, 92, 61, 0.28); border-color: var(--rust); }
  100% { background: var(--paper-input); border-color: var(--card-line); }
}

/* ── Factor list ───────────────────────────────────────── */
.factor-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px 14px;
  margin: 14px 0 20px;
}
.factor-list label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif);
  font-size: .98rem; color: var(--forest); cursor: pointer;
  padding: 6px 8px; border-radius: 3px;
}
.factor-list label:hover { background: rgba(44, 65, 50, 0.05); }
.factor-list input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--rust);
  cursor: pointer; flex-shrink: 0;
}

/* ── Section break inside a card ───────────────────────── */
/* Horizontal dashed rule with a centered rust eyebrow, used to  */
/* separate a passive block (setup/stats/tables) from an active  */
/* block (prediction/reflection) inside the same card body.      */
.case-section-break {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 42px 0 20px;
  text-align: center;
}
.case-section-break::before,
.case-section-break::after {
  content: ""; flex: 1;
  border-top: 1.5px dashed var(--card-line);
}
.case-section-break-eyebrow {
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 800;
  color: var(--rust);
  text-transform: uppercase; letter-spacing: .22em;
  padding: 0 6px;
  white-space: nowrap;
}

/* ── Fields: ruled-paper style ─────────────────────────── */
/* Textarea appears as horizontal writing lines (no fill, no box).   */
/* Text sits on the lines; placeholder is italic serif; the whole    */
/* prompt block can sit in a .case-prompt dashed frame with a rust   */
/* eyebrow + cursive question + status line below.                   */
.case-prompt {
  border: 1.5px dashed var(--card-line);
  border-radius: 4px;
  padding: 22px 26px 20px;
  margin: 24px 0;
}
.case-field-eyebrow {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 800;
  color: var(--rust);
  text-transform: uppercase; letter-spacing: .22em;
  margin: 0 0 10px;
}
/* Doubled class: beats .case-step-body p (0,0,1,1) so the question
   styles actually apply. Regular serif in bold weight, forest color
   -- matches the body typography but heavier so numbered questions
   stand out. No text-wrap: balance -- lets each line stretch across
   the available width instead of wrapping early into short lines. */
.case-question.case-question {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--forest);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px;
  text-align: left;
  hyphens: manual;
}
.case-field {
  width: 100%;
  padding: 6px 14px;
  border: 1.5px solid var(--card-line);
  border-radius: 4px;
  background-color: var(--paper-input);
  color: var(--forest);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 2rem;
  outline: none;
  resize: vertical;
  /* Repeating horizontal rules at each line's baseline (1px thick,   */
  /* sitting on the cream bg so the field reads as lined paper).      */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2rem - 1px),
    var(--card-line-solid) calc(2rem - 1px),
    var(--card-line-solid) 2rem
  );
  background-position: 0 0;
  background-attachment: local;
}
.case-field::placeholder {
  color: var(--forest-mute); font-style: italic;
}
.case-field:focus {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2rem - 1px),
    var(--rust) calc(2rem - 1px),
    var(--rust) 2rem
  );
}
.case-textarea { min-height: 8rem; }
/* Doubled class for specificity: beats the `.case-step-body p` rule
   above (which set 1.02rem / line-height 1.8 and was silently
   winning). The status stays a small right-aligned footnote. */
.case-field-status.case-field-status {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--forest-mute);
  opacity: 0.9;
  text-align: right;
  margin: 6px 0 0;
  letter-spacing: 0.01em;
}
/* Top placement: one line per section instead of one per question. */
.case-field-status.case-field-status-top {
  text-align: left;
  margin: 0 0 14px;
}
/* Legacy small-caps label kept for one-line inline prompts where a */
/* full .case-prompt block would be overkill.                       */
.case-field-label {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 800; color: var(--forest);
  text-transform: uppercase; letter-spacing: .1em;
  margin: 16px 0 6px;
}

/* ── Buttons: small-caps + tracked ─────────────────────── */
.case-btn {
  font-family: var(--font-body);
  padding: 13px 26px; font-size: .78rem; font-weight: 800;
  background: var(--forest); color: var(--paper);
  border: 1.5px solid var(--forest); border-radius: 3px;
  cursor: pointer; text-decoration: none;
  text-transform: uppercase; letter-spacing: .14em;
  transition: background .12s ease, color .12s ease;
  display: inline-block; line-height: 1.2;
}
.case-btn:hover { background: var(--rust); border-color: var(--rust); color: var(--paper); }
.case-btn:disabled { opacity: .38; cursor: not-allowed; }
.case-btn:disabled:hover { background: var(--forest); color: var(--paper); }
.case-step-gate-hint {
  font-family: var(--font-serif); font-style: italic;
  font-size: .88rem; color: var(--rust); opacity: 0.85;
}
.case-step-gate-hint[hidden] { display: none; }
.case-step-gate-hint.flash {
  animation: gate-pulse .9s ease-in-out;
}
@keyframes gate-pulse {
  0% { opacity: 0.85; }
  40% { opacity: 1; color: var(--rust); text-shadow: 0 0 8px rgba(184, 92, 61, .3); }
  100% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .case-step-gate-hint.flash { animation: none; }
}
.case-btn-ghost {
  background: transparent; color: var(--forest);
}
.case-btn-ghost:hover { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.case-btn-primary {
  background: var(--rust); color: var(--paper); border-color: var(--rust);
}
.case-btn-primary:hover { background: var(--paper); color: var(--rust); }
.case-btn-ghost-light {
  background: transparent; color: var(--paper); border-color: var(--paper);
}
.case-btn-ghost-light:hover { background: var(--paper); color: var(--forest); border-color: var(--paper); }
.case-btn-sm { padding: 9px 18px; font-size: .7rem; }

/* Submit-ranking button transient "just submitted" flash (~1.6s).
   Button stays clickable so the user can re-submit after changing
   their order. */
#rankSubmit.is-submitted {
  background: var(--forest);
  color: var(--paper);
  border-color: var(--forest);
}

/* ── Reveal: no special background needed, card is the frame ── */
.case-debrief {
  font-family: var(--font-serif);
  font-size: 1rem; color: var(--forest); line-height: 1.7;
}

/* ── Story: editorial typography, JUSTIFIED per reference ─ */
.case-narrative {
  /* No max-width -- text fills the card interior. The .case-step 40px
     side padding already gives comfortable margins around the text. */
}
.case-narrative p {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  line-height: 1.85;
  color: var(--forest);
  margin: 0 0 20px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
/* Inline photo figure inside the narrative. Clean rounded image
   with a small italic caption underneath. Used for stadium shots
   and other supporting photos in the story cards. */
.case-photo {
  margin: 22px 0 28px;
}
.case-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(44, 65, 50, 0.16);
}
.case-photo figcaption {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--forest-mute);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
  font-style: italic;
}
.case-photo figcaption a { color: var(--rust); text-decoration: none; border-bottom: 1px solid rgba(184, 92, 61, 0.35); }
.case-photo figcaption a:hover { border-bottom-color: var(--rust); }

/* ── Data-viz chart (London 2012 position over time) ────
   Framed lined-paper card matching the .case-field style. Two
   animated paths (Su rust, Bolt forest) draw on left-to-right via
   stroke-dashoffset. Annotations fade in mid-animation. */
.case-viz {
  background: var(--paper-input);
  border: 1.5px solid var(--card-line);
  border-radius: 6px;
  padding: 24px 22px 18px;
  margin: 22px 0 28px;
}
.case-viz-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}
.case-viz-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--forest);
}
.case-viz-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.case-viz-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
}
.case-viz-swatch-su   { background: var(--rust); }
.case-viz-swatch-bolt { background: var(--forest); }
.case-viz-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
}
.viz-grid line { stroke: rgba(44, 65, 50, 0.14); stroke-width: 1; }
.viz-axis-label text {
  font-family: var(--font-body);
  font-size: 10px;
  fill: var(--forest-mute);
  font-weight: 700;
}
.viz-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viz-line-su   { stroke: var(--rust); }
.viz-line-bolt { stroke: var(--forest); }
.viz-annotation {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.viz-annotation.is-visible { opacity: 1; }
.viz-annotation text {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  fill: var(--forest);
}
.viz-annotation circle { stroke: #fff; stroke-width: 1.5; }
#vizAnnLead circle { fill: var(--rust); }
#vizAnnPass circle { fill: var(--forest); }
.case-viz-controls {
  margin-top: 8px;
  text-align: right;
}

/* Video modal overlay: full-viewport dark backdrop with a 16:9 iframe
   centered on top. Populated by JS when a .case-video-link is clicked;
   iframe src cleared on close to stop playback. */
.case-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.case-video-modal[hidden] { display: none; }
.case-video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.82);
  cursor: pointer;
}
.case-video-modal-inner {
  position: relative;
  width: 100%;
  max-width: 960px;
}
.case-video-modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 40px;
  height: 40px;
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.case-video-modal-close:hover { color: var(--rust); }
.case-video-modal-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.case-video-modal-frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* External-link video card: used when YouTube embedding is blocked
   (Olympic content triggers error 153). Opens the video on YouTube
   in a new tab at the clip's start timestamp. Dark card mimics a
   player, rust play-circle draws the eye. */
.case-video-link {
  margin: 22px 0 28px;
}
.case-video-link a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  background: linear-gradient(135deg, #1a1e2e, var(--forest));
  color: var(--paper);
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(44, 65, 50, 0.20);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.case-video-link a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(44, 65, 50, 0.28);
}
.case-video-play {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--rust);
  color: #fff;
  font-size: 1.2rem;
  padding-left: 4px;
  box-shadow: 0 4px 10px rgba(184, 92, 61, 0.4);
}
.case-video-label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.case-video-eyebrow {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.case-video-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--paper);
  line-height: 1.3;
}
.case-video-time {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}
.case-video-link figcaption {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--forest-mute);
  text-align: right;
  margin-top: 8px;
  letter-spacing: 0.02em;
  font-style: italic;
}

.case-pullquote {
  border-left: 3px solid var(--rust);
  margin: 30px 0;
  padding: 14px 0 14px 22px;
  font-family: var(--font-serif);
  font-size: 1.1rem; font-weight: 500;
  color: var(--forest); line-height: 1.6;
  font-style: italic;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
.case-pullquote p { margin: 0; }
.case-pullquote p + p { margin-top: 14px; }

/* Cited direct quote: attributed pullquote with source link.
   Used for real quotations from named people (unlike .case-pullquote
   which is authorial commentary, or .case-callout-hero which is
   narrative punctuation). Serif italic body, small sans-serif
   attribution below. */
.case-blockquote-cited {
  position: relative;
  margin: 48px auto;
  max-width: 640px;
  padding: 44px 32px 28px;
  text-align: center;
}
.case-blockquote-cited::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 7rem;
  line-height: 1;
  color: var(--rust);
  opacity: 0.85;
  pointer-events: none;
}
.case-blockquote-cited::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 22px auto 0;
  background: var(--rust);
  opacity: 0.6;
}
.case-blockquote-cited-text {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--forest);
  line-height: 1.4;
  font-style: italic;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  hyphens: none;
}
.case-blockquote-cited-text::before,
.case-blockquote-cited-text::after { content: none; }
.case-blockquote-cited-attr {
  display: block;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--forest-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.case-blockquote-cited-attr a {
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 92, 61, 0.35);
}
.case-blockquote-cited-attr a:hover { border-bottom-color: var(--rust); }

@media (max-width: 640px) {
  .case-blockquote-cited { padding: 36px 16px 24px; margin: 36px auto; }
  .case-blockquote-cited::before { font-size: 5.5rem; top: -12px; }
  .case-blockquote-cited-text { font-size: 1.25rem; }
}

/* Hero narrative callout: dark forest card with cream text and a
   thick rust left rail. Used to punch out an emotional beat in the
   middle of a story card. Not a quotation -- no quote glyph. */
.case-callout-hero {
  background: var(--forest);
  color: var(--paper);
  padding: 28px 34px 26px;
  margin: 36px 0;
  border-radius: 6px;
  border-left: 6px solid var(--rust);
}
/* Selectors are scoped through .case-callout-hero (parent class) so
   they beat .case-narrative p (color: forest) on specificity. Without
   this the paper-colored text renders forest-on-forest and vanishes. */
.case-callout-hero .case-callout-text {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  color: var(--paper);
}
.case-callout-hero .case-callout-sub {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(245, 240, 232, 0.78);
  font-style: italic;
  margin: 0;
}

/* Stat progression: horizontal row of "year → time" cards showing
   the arc of an athlete's improvement in numbers. Wraps to two rows
   on narrow screens. */
.case-stat-progression {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 32px 0 8px;
  padding: 24px 22px;
  background: var(--paper-input);
  border: 1.5px solid var(--card-line);
  border-radius: 6px;
}
.case-stat {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  text-align: center;
  min-width: 120px;
}
.case-stat-year {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--rust);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.case-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--forest);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.case-stat-unit {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--forest-mute);
  margin-left: 1px;
}
.case-stat-note {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--forest-mute);
  line-height: 1.3;
  max-width: 130px;
}
.case-stat-peak .case-stat-num { color: var(--rust); }
.case-stat-arrow {
  align-self: center;
  color: var(--forest-mute);
  font-size: 1.2rem;
  font-weight: 700;
}
@media (max-width: 640px) {
  .case-stat-arrow { display: none; }
  .case-stat { flex: 1 1 40%; min-width: 40%; }
}

/* ── Reflection ────────────────────────────────────────── */
.reflect-list {
  list-style: none; counter-reset: reflect;
  padding: 0; margin: 24px 0 0;
  display: grid; gap: 36px;
}
.reflect-item {
  counter-increment: reflect;
  position: relative;
  padding-left: 54px;
}
.reflect-item::before {
  content: "0" counter(reflect);
  position: absolute;
  left: 0; top: 0;
  width: 38px; height: 38px;
  background: var(--rust);
  color: var(--paper);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: 800; font-size: .8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.reflect-q {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 900; color: var(--forest);
  line-height: 1.25; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .02em;
}
.reflect-hint {
  font-family: var(--font-serif);
  font-size: .95rem; color: var(--forest-soft); line-height: 1.6;
  margin: 0 0 10px; font-style: italic;
}
.reflect-hint em {
  color: var(--forest); font-style: normal;
  font-weight: 700; font-family: var(--font-body);
  font-size: .88rem;
}
.reflect-sub {
  padding-left: 22px; margin: 8px 0 14px;
  color: var(--forest);
  font-family: var(--font-serif);
}
.reflect-sub li {
  font-size: .98rem; line-height: 1.6; margin-bottom: 4px;
}

/* Script-carry table: editable cells */
.script-table td { padding: 6px 8px; vertical-align: top; }
.script-row-example td {
  background: rgba(184, 92, 61, 0.05);
  color: var(--forest-soft); font-style: italic;
  font-family: var(--font-serif);
}
.script-cell {
  display: block; min-height: 22px;
  padding: 6px 8px; border-radius: 2px;
  outline: none;
  font-family: var(--font-serif);
  font-size: .95rem;
  transition: background .12s ease;
}
.script-cell:focus { background: rgba(184, 92, 61, 0.1); }
.script-cell.empty::before {
  content: attr(data-placeholder);
  color: var(--forest-mute); font-style: italic;
}

/* ── Card 05 (CTA) — swap to dark background ─────────── */
.case-step-cta { background: transparent; }
.case-step-cta .case-step-body {
  background: var(--forest);
  color: var(--paper);
  border-radius: 4px;
  padding: 26px 28px;
  margin-top: 8px;
}
.case-step-cta .case-step-body p {
  color: rgba(245, 240, 232, 0.85);
  font-family: var(--font-serif);
}
.case-cta-buttons {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px;
}

/* ── Card 04 (The Race) closing photo ────────────────────── */
/* Coach + athlete line-drawing sits at the end of The Race. The source
   image is on a warm cream (~#F5EFE2) that's LIGHTER than the card's
   oat (#EEE7D2), so `mix-blend-mode: darken` drops the cream background
   completely (card color wins wherever the photo is lighter) and keeps
   the dark ink lines. The mask fades all four edges as a belt-and-
   suspenders polish in case of subtle edge artifacts in the source. */
/* ── Card 04 "Your Prediction | Result" reveal ─────────────── */
/* Two-panel comparison inserted mid-narrative after the race reveal.
   Left: reader's Card-01 ranking rendered from state.rank, with hits
   marked green and misses left neutral. Right: the actual Tokyo 2020
   semifinal photo. Stacks to one column on narrow screens. */
.case-reveal {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.35fr);
  gap: 20px;
  margin: 26px 0 30px;
  align-items: stretch;
}
.case-reveal-panel {
  background: rgba(245, 240, 232, 0.55);
  border: 1.5px dashed rgba(44, 65, 50, 0.22);
  border-radius: 4px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}
.case-reveal-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 14px;
}
.case-reveal-result img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  display: block;
}
.case-reveal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-reveal-empty {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--forest-mute);
  font-style: italic;
}
.case-reveal-item {
  display: grid;
  grid-template-columns: 44px 28px 1fr 20px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 3px;
  border-left: 3px solid transparent;
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--forest);
}
.case-reveal-item.is-hit {
  border-left-color: #4B8B4F;
  background: #E8F1E4;
}
.case-reveal-item.is-miss {
  border-left-color: rgba(184, 92, 61, 0.45);
}
.case-reveal-pos {
  font-weight: 700;
  color: var(--forest-mute);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.case-reveal-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--rust);
  text-align: center;
}
.case-reveal-country { font-weight: 600; }
.case-reveal-badge {
  color: #4B8B4F;
  font-weight: 800;
  text-align: center;
}
@media (max-width: 720px) {
  .case-reveal { grid-template-columns: 1fr; }
}

.case-race-figure {
  margin: 34px 0 0;
}
.case-race-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  border: 0;
  mix-blend-mode: darken;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black 6%, black 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0%, black 6%, black 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ── Sticky note pad (Card 06, Q1) ────────────────────────
   Multi-note pad where the reader names societal rules and tags where
   each came from. Yellow tilted stickies, chip picker under the text.
   Tilt is alternating via nth-child and clears on focus-within so a
   sticky "stands up" while being edited. */
.sticky-board {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 22px;
  padding: 26px 4px 18px;
  margin-bottom: 8px;
}
.sticky-note {
  --tilt: 0deg;
  position: relative;
  width: 210px;
  padding: 18px 14px 12px;
  border-radius: 2px;
  transform: rotate(var(--tilt));
  transform-origin: center center;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.10),
    0 2px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Tilt + color rotate together by position. Note that .sticky-add is
   always the last child of the board, so :nth-child math on
   .sticky-note counts only among the real stickies (1-4). */
/* Yellow removed from the rotation: the case cards themselves are
   now yellow (--card: #EDCF5F), so a yellow sticky would blend into
   the background. Coral takes the lead slot. */
.sticky-note:nth-child(4n+1) { --tilt: -2deg; background: #F4A889; } /* coral   */
.sticky-note:nth-child(4n+2) { --tilt: 1.5deg; background: #C0CE93; } /* sage    */
.sticky-note:nth-child(4n+3) { --tilt: -1deg; background: #B4CDD3; } /* powder  */
.sticky-note:nth-child(4n+4) { --tilt: 2deg; background: #E1BEE7; }  /* lavender */
.sticky-note:focus-within {
  --tilt: 0deg;
  transform: rotate(0) translateY(-3px);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.14),
    0 3px 5px rgba(0, 0, 0, 0.10);
}
.sticky-del {
  position: absolute;
  top: 3px;
  right: 5px;
  background: transparent;
  border: 0;
  color: rgba(44, 65, 50, 0.35);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.sticky-del:hover {
  color: var(--forest);
  background: rgba(44, 65, 50, 0.08);
}
.sticky-text {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  resize: none;
  padding: 0;
  margin: 0 0 12px;
  font-family: "Marker Felt", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--forest);
  outline: none;
}
.sticky-text::placeholder {
  color: rgba(44, 65, 50, 0.42);
  font-style: italic;
}
.sticky-source {
  padding-top: 10px;
  border-top: 1px dashed rgba(44, 65, 50, 0.22);
}
.sticky-source[hidden] { display: none; }
.sticky-source-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(44, 65, 50, 0.62);
  margin-bottom: 6px;
}
.sticky-source-input {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted rgba(44, 65, 50, 0.40);
  padding: 4px 0 3px;
  font-family: "Marker Felt", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--forest);
  outline: none;
}
.sticky-source-input::placeholder {
  color: rgba(44, 65, 50, 0.42);
  font-style: italic;
}
/* Dashed placeholder tile that adds a new sticky when clicked. Sized
   to match a real sticky so it reads as "another one goes here". */
.sticky-add {
  width: 210px;
  min-height: 180px;
  background: transparent;
  border: 2px dashed rgba(44, 65, 50, 0.28);
  border-radius: 4px;
  color: rgba(44, 65, 50, 0.62);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sticky-add:hover {
  background: rgba(44, 65, 50, 0.05);
  color: var(--forest);
  border-color: rgba(44, 65, 50, 0.55);
}
.sticky-add[hidden] { display: none; }
.sticky-add-plus {
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 400;
}
.sticky-add-text {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .sticky-board { gap: 24px 16px; }
  .sticky-note,
  .sticky-add { width: calc(50% - 8px); }
}
@media (max-width: 400px) {
  .sticky-note,
  .sticky-add { width: 100%; }
}

/* ── Madlib input (Card 06, Q5) ──────────────────────────
   Framed "define the action" card with a dashed border, inline blanks
   sized by their placeholders. Selectors are #caseCard-scoped so they
   beat the base.css global input rule (0,0,4,1). All base properties
   (display, width, padding, background, border, border-radius, box-
   shadow) are explicitly reset. */
.case-madlib {
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--forest);
  margin: 18px 0 0;
  padding: 24px 28px 26px;
  background: rgba(245, 240, 232, 0.55);
  border: 1.5px dashed rgba(44, 65, 50, 0.28);
  border-radius: 4px;
  text-align: left;
}
.case-madlib-lead {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--forest);
  margin-top: 20px;
  line-height: 1.4;
}
.case-madlib-lead:first-child { margin-top: 0; }
/* Full-width block inputs on their own row. #caseCard-scoped so this
   beats the base.css global input rule (0,0,4,1). All base properties
   explicitly reset. */
#caseCard .case-madlib-input,
#caseCard .case-madlib-input:focus {
  display: block;
  width: 100%;
  padding: 6px 2px 7px;
  margin: 6px 0 0;
  background: transparent;
  border: 0;
  border-bottom: 1.5px dashed rgba(44, 65, 50, 0.32);
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 800;
  color: var(--forest);
  letter-spacing: 0.01em;
  outline: none;
  transition: border-bottom-color 0.15s ease, background 0.15s ease;
}
#caseCard .case-madlib-input:focus {
  border-bottom-color: var(--forest);
  background: rgba(44, 65, 50, 0.05);
}
#caseCard .case-madlib-input::placeholder {
  color: rgba(44, 65, 50, 0.38);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.05em;
}
@media (max-width: 640px) {
  .case-madlib { padding: 20px 18px; font-size: 0.98rem; }
  .case-madlib-lead { margin-top: 16px; }
}

/* ── Card 05 Q1 challenge → principles reveal ─────────────── */
/* "Challenge" tag sits inline before the Q1 question copy so the
   reader reads the beat as a puzzle: name your principle, then
   compare with the authored top three. */
.case-question-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--rust);
  padding: 3px 10px 4px;
  border-radius: 999px;
  margin-right: 10px;
  vertical-align: 2px;
}
.case-principle-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
}
.case-principle-hint {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--forest-mute);
  font-style: italic;
  margin: 0;
  flex: 1 1 200px;
  min-width: 0;
}
#s1PrincipleSubmit.is-locked {
  background: rgba(44, 65, 50, 0.75);
  color: var(--paper);
  cursor: default;
  opacity: 0.85;
}
.case-principle-reveal {
  margin: 22px 0 0;
  padding: 22px 24px 20px;
  background: #FBF5E4;
  border: 1.5px solid rgba(184, 92, 61, 0.35);
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(44, 65, 50, 0.05);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.case-principle-reveal.is-open {
  opacity: 1;
  transform: translateY(0);
}
.case-principle-reveal[hidden] { display: none; }
.case-principle-reveal-header { margin: 0 0 18px; }
.case-principle-reveal-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 8px;
}
.case-principle-reveal-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--forest-mute);
  margin: 0;
  line-height: 1.5;
}
.case-principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case-principle-item {
  padding: 16px 18px 14px;
  background: #FFF;
  border-left: 3px solid var(--rust);
  border-radius: 3px;
}
.case-principle-headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--forest);
  line-height: 1.3;
  margin: 0 0 8px;
}
.case-principle-item p {
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--forest);
  margin: 0 0 10px;
}
.case-principle-item p:last-child { margin-bottom: 0; }
.case-principle-why-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 6px 0 4px !important;
}
@media (prefers-reduced-motion: reduce) {
  .case-principle-reveal { transition: none; transform: none; }
}
@media (max-width: 640px) {
  .case-principle-reveal { padding: 18px 16px 16px; }
  .case-principle-item { padding: 14px 14px 12px; }
}

/* ── Card 06 full-card underwater treatment ───────────────── */
/* Whole card gets the dashboard's underwater backdrop: sky-to-deep
   teal gradient, animated wavy surface line at top, drifting fish
   and rising bubbles. Content sits above as translucent cream cards
   (parable, narrative, reflection list, nav) so the water shows
   through while type stays legible. Palette borrowed from the
   dashboard: --air-bottom #B5DBE8 above, --sea-top #7CC6C4, deep
   teal at bottom. */
.case-step-water {
  position: relative;
  overflow: hidden;
  /* Break out of .case-card's 18px padding on all four sides so the
     water fills the whole card edge-to-edge. The dashed frame
     (case-card::before) stays visible on top thanks to its z-index. */
  margin: -18px;
  padding: 36px 58px 34px;
  background: linear-gradient(180deg,
    #B5DBE8 0px,
    #B5DBE8 130px,
    #7CC6C4 210px,
    #3E7A87 330px,
    #1F4A55 100%);
  border-radius: 6px;
  isolation: isolate;
}
.case-step-water-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Direct-child stacking order inside .case-step-water:
   - .case-step-water-surface  (wave, needs no z-index so mix-blend
     can reach the water gradient background above it in paint order)
   - .case-step-water-scene    (fish + bubbles)
   - .case-step-head / body / nav  (content, must sit above scene) */
.case-step-water > .case-step-head,
.case-step-water > .case-step-body,
.case-step-water > .case-step-nav {
  position: relative;
  z-index: 2;
}

/* Wavy surface line: mirrors the logged-in dashboard's setup exactly
   -- 130px tall SVG container, mix-blend-mode: screen so the light
   wave gradient renders brighter against the darker teal water below
   it. NO z-index so it stays inside the same stacking context as the
   water card's background gradient; mix-blend can then blend with
   that gradient (nested stacking contexts block the blend). */
.case-step-water-surface {
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
  height: 130px;
  mix-blend-mode: screen;
  pointer-events: none;
}
.case-step-water-surface svg { display: block; width: 100%; height: 100%; }

/* Head + nav stay with default alignment / colors so this card's
   title reads the same as every other card. The head sits above the
   wave in the sky portion, so forest text stays legible. */
/* Primary Continue button: swap forest -> rust so it pops on the
   dark teal water. Disabled state goes to a light cream chip with
   muted forest text so it stays visible while still reading as
   inactive (the default 0.38 opacity vanishes into the water). */
.case-step-water .case-step-nav .case-btn:not(.case-btn-ghost) {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--paper);
  box-shadow: 0 4px 14px rgba(12, 42, 52, 0.35);
}
.case-step-water .case-step-nav .case-btn:not(.case-btn-ghost):hover {
  background: var(--forest);
  border-color: var(--forest);
}
.case-step-water .case-step-nav .case-btn:disabled:not(.case-btn-ghost),
.case-step-water .case-step-nav .case-btn:disabled:not(.case-btn-ghost):hover {
  background: rgba(245, 240, 232, 0.92);
  color: rgba(44, 65, 50, 0.55);
  border-color: rgba(245, 240, 232, 0.92);
  opacity: 1;
  cursor: not-allowed;
}
.case-step-water .case-step-nav .case-btn-ghost {
  color: #F5F0E8;
  border-color: rgba(245, 240, 232, 0.6);
}

/* The body block becomes the primary translucent card holding
   parable text + narrative + reflection list. Extra top margin so
   the card lands BELOW the wave surface: reader "dives in" from
   the head above water to the content underwater. */
.case-step-water .case-step-body {
  margin-top: 110px;
  background: rgba(245, 240, 232, 0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 6px;
  padding: 28px 28px 24px;
  box-shadow: 0 10px 28px rgba(12, 42, 52, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

/* Parable stays as an italic-serif quote at the top of the body,
   with a slight extra tint so it reads as the moment. */
.case-parable-text {
  margin: 0 0 22px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.55);
  border-left: 3px solid var(--rust);
  border-radius: 3px;
}
.case-parable-text p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--forest);
  margin: 0;
}
.case-parable-text p + p { margin-top: 12px; }
.case-parable-attr {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-mute);
  text-align: right;
}
.case-parable-attr-source {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--rust);
}

/* Fish: same clip-path polygon the logged-in dashboard uses (rounded
   head on the right, forked V-tail on the left), lit with a radial
   gradient that keeps the head brighter than the tail. Two young
   fish swim right; one older, larger fish flips via scaleX(-1) so
   it swims the other way. */
.case-parable-fish {
  position: absolute;
  /* More polygon points around the right side to approximate a
     rounded head (the dashboard's 3-point head is more pointed). */
  clip-path: polygon(
    100% 50%,
    97% 34%,  91% 22%,  80% 14%,  62% 14%,  30% 24%,
    0%   8%,  16% 50%,  0% 92%,
    30% 76%,  62% 86%,  80% 86%,  91% 78%,  97% 66%
  );
  will-change: transform, left;
  opacity: 0.9;
}
/* Small dark eye in the head area. Fixed 3px dot so it reads as a
   pinprick regardless of fish size (percentage-based was too big
   on the larger old fish). scaleX(-1) on the older fish mirrors
   the pseudo so the eye still lands on the head visually. */
.case-parable-fish::after {
  content: "";
  position: absolute;
  top: 42%;
  right: 10%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(28, 42, 32, 0.9);
}
/* Fish depths are FIXED pixel offsets from the top of the water
   card, always landing below the wave (which sits at ~175-219px).
   Percentage-based tops previously placed them in the sky. */
.case-parable-fish-a {
  top: 250px;
  width: 44px; height: 20px;
  background: radial-gradient(ellipse at 72% 42%,
    rgba(245, 240, 232, 0.95),
    rgba(215, 235, 240, 0.6) 55%,
    rgba(175, 210, 220, 0.3) 100%);
  filter: drop-shadow(0 0 5px rgba(200, 235, 245, 0.4));
  animation: swim-right 22s linear infinite, fish-bob 4s ease-in-out infinite;
}
.case-parable-fish-b {
  top: 340px;
  width: 36px; height: 17px;
  background: radial-gradient(ellipse at 72% 42%,
    rgba(245, 240, 232, 0.9),
    rgba(210, 230, 220, 0.55) 55%,
    rgba(170, 200, 195, 0.28) 100%);
  filter: drop-shadow(0 0 5px rgba(200, 235, 245, 0.35));
  animation: swim-right 26s linear infinite -8s, fish-bob 5s ease-in-out infinite -1.2s;
}
.case-parable-fish-old {
  top: 430px;
  width: 58px; height: 26px;
  background: radial-gradient(ellipse at 72% 42%,
    rgba(234, 224, 196, 0.95),
    rgba(210, 195, 155, 0.65) 55%,
    rgba(180, 165, 120, 0.35) 100%);
  filter: drop-shadow(0 0 6px rgba(234, 224, 196, 0.35));
  transform: scaleX(-1);
  animation: swim-left 34s linear infinite -4s, fish-bob 6s ease-in-out infinite -2s;
}
@keyframes swim-right {
  from { left: -80px; }
  to   { left: calc(100% + 80px); }
}
@keyframes swim-left {
  from { left: calc(100% + 80px); }
  to   { left: -80px; }
}
@keyframes fish-bob {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -6px; }
}

/* Bubbles rise from the bottom, fade out near the top. */
.case-parable-bubble {
  position: absolute;
  bottom: -20px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.9);
  animation: bubble-rise 9s linear infinite;
  will-change: bottom, opacity, transform;
}
/* Durations are longer now because the bubbles travel the full card
   height (bottom to just under the wave) rather than a fixed ~500px. */
.case-parable-bubble-1  { left:  6%; width:  8px; height:  8px; animation-duration: 28s; animation-delay:  -3s; }
.case-parable-bubble-2  { left: 14%; width:  6px; height:  6px; animation-duration: 22s; animation-delay:  -9s; }
.case-parable-bubble-3  { left: 22%; width: 12px; height: 12px; animation-duration: 34s; animation-delay: -12s; }
.case-parable-bubble-4  { left: 30%; width:  5px; height:  5px; animation-duration: 24s; animation-delay: -18s; }
.case-parable-bubble-5  { left: 38%; width:  9px; height:  9px; animation-duration: 30s; animation-delay:  -6s; }
.case-parable-bubble-6  { left: 46%; width:  6px; height:  6px; animation-duration: 20s; animation-delay: -14s; }
.case-parable-bubble-7  { left: 54%; width: 11px; height: 11px; animation-duration: 32s; animation-delay: -21s; }
.case-parable-bubble-8  { left: 62%; width:  7px; height:  7px; animation-duration: 26s; animation-delay:  -4s; }
.case-parable-bubble-9  { left: 70%; width:  8px; height:  8px; animation-duration: 28s; animation-delay: -11s; }
.case-parable-bubble-10 { left: 78%; width: 10px; height: 10px; animation-duration: 30s; animation-delay: -17s; }
.case-parable-bubble-11 { left: 84%; width:  5px; height:  5px; animation-duration: 22s; animation-delay:  -7s; }
.case-parable-bubble-12 { left: 90%; width: 11px; height: 11px; animation-duration: 36s; animation-delay: -24s; }
.case-parable-bubble-13 { left: 96%; width:  6px; height:  6px; animation-duration: 24s; animation-delay: -10s; }
.case-parable-bubble-14 { left: 42%; width:  4px; height:  4px; animation-duration: 18s; animation-delay: -15s; }
/* Rise from card bottom up to just under the wave surface with a
   gentle S-curve sideways wobble and a subtle grow, then fade.
   Animating `bottom` with calc(100% - 240px) makes the end position
   scale with the card height, so bubbles always stop near the wave
   (wave zone is top: 90-220px; 240 leaves a small gap below it). */
@keyframes bubble-rise {
  0%   { bottom: -20px;              transform: translateX(0)     scale(0.55); opacity: 0; }
  10%  {                             transform: translateX(4px)   scale(0.7);  opacity: 0.85; }
  25%  {                             transform: translateX(-6px)  scale(0.8); }
  42%  {                             transform: translateX(7px)   scale(0.9); }
  60%  {                             transform: translateX(-5px)  scale(0.96); opacity: 0.8; }
  78%  {                             transform: translateX(3px)   scale(1);    opacity: 0.7; }
  92%  {                             transform: translateX(-2px)  scale(1.02); opacity: 0.35; }
  100% { bottom: calc(100% - 240px); transform: translateX(0)     scale(1.05); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .case-parable-water::before,
  .case-parable-water::after,
  .case-parable-fish,
  .case-parable-bubble { animation: none; }
  .case-parable-fish-a { left: 15%; }
  .case-parable-fish-b { left: 55%; }
  .case-parable-fish-old { left: 78%; }
}
@media (max-width: 640px) {
  .case-parable { padding: 32px 18px 28px; }
  .case-parable-text { padding: 18px 18px; }
  .case-parable-text p { font-size: 0.96rem; }
}

/* ── Card 07 completion badge ─────────────────────────────── */
/* Sits at the top of the closing card so the user gets a beat of
   acknowledgement before the summation essay. Centered composition:
   rust seal on top of a forked ribbon, forest inner disk carrying the
   case number, arc labels reading "CASE STUDY" and "SU BINGTIAN". */
.case-completion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 16px 32px;
  margin: 0 0 28px;
  border-bottom: 1px solid rgba(245, 240, 232, 0.15);
  overflow: visible;
}
.case-completion-fireworks {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 200ms linear;
}
.case-completion-fireworks.is-firing { opacity: 1; }

.case-step-cta .case-completion-line,
.case-completion-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.05;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.case-completion-line-top { margin-bottom: 14px; }
.case-completion-line-bot { margin-top: 14px; }

.case-completion-badge {
  width: 156px;
  margin: 4px 0 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
  animation: caseBadgeIn 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  position: relative;
  z-index: 2;
}
.case-completion-badge svg { display: block; width: 100%; height: auto; }

@keyframes caseBadgeIn {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .case-completion-badge { animation: none; }
  .case-completion-fireworks { display: none; }
}
@media (max-width: 640px) {
  .case-completion-badge { width: 124px; }
  .case-completion-line,
  .case-step-cta .case-completion-line { font-size: 1.7rem; }
}

/* ── Card 07 email capture + collaboration contact ────────── */
/* Hairline divider between closing essay and the email capture form
   so the form doesn't feel abrupt on top of the essay. Rust hairline
   with a centered ◆ mark echoes the cover and footer treatments. */
.case-notify-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 26px;
}
.case-notify-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(184, 92, 61, 0.35);
}
.case-notify-divider-mark {
  color: var(--rust);
  font-size: .68rem;
  letter-spacing: .2em;
  line-height: 1;
  opacity: 0.9;
}
.case-notify-form { margin: 22px 0 8px; }
.case-notify-label {
  display: block;
  font-family: var(--font-serif);
  font-size: .92rem; font-style: italic;
  color: rgba(245, 240, 232, 0.72);
  margin-bottom: 10px;
  line-height: 1.5;
}
.case-notify-row {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
}
.case-notify-row input[type="email"] {
  flex: 1 1 260px; min-width: 0;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: .92rem;
  border: 1.5px solid rgba(245, 240, 232, 0.28);
  border-radius: 3px;
  background: rgba(245, 240, 232, 0.06);
  color: var(--paper);
  outline: none;
  transition: border-color .12s ease, background .12s ease;
}
.case-notify-row input[type="email"]::placeholder {
  color: rgba(245, 240, 232, 0.36);
}
.case-notify-row input[type="email"]:focus {
  border-color: var(--paper);
  background: rgba(245, 240, 232, 0.12);
}
.case-notify-status {
  padding: 12px 14px;
  border-radius: 3px;
  background: rgba(245, 240, 232, 0.12);
  color: var(--paper);
  font-family: var(--font-serif);
  font-size: .95rem;
  margin: 18px 0 4px;
  border-left: 3px solid var(--rust);
}
.case-notify-status p { margin: 0; }
.case-notify-alt {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px dashed rgba(245, 240, 232, 0.2);
  display: flex; flex-wrap: wrap; gap: 10px;
}
.case-step-cta .case-step-nav {
  border-top-color: var(--card-line);
}

/* ── Footer under card ─────────────────────────────────── */
.cases-footer {
  margin-top: 26px; text-align: center;
  font-family: var(--font-body);
  font-size: .78rem; color: var(--forest-mute);
  font-style: italic;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.cases-footer-dot { color: var(--rust); font-size: .7rem; }

@media (max-width: 640px) {
  .cover-figure, .cover-body { padding-left: 22px; padding-right: 22px; }
  .case-step { padding-left: 22px; padding-right: 22px; }
  .cover-title { font-size: 1.7rem; }
  .case-step-heading { font-size: 1.4rem; }
  .case-cta-buttons { flex-direction: column; }
  .case-cta-buttons .case-btn { width: 100%; text-align: center; }
  .reflect-item { padding-left: 48px; }
  .reflect-item::before { width: 32px; height: 32px; font-size: .74rem; }
  .step-dot { width: 34px; height: 34px; font-size: .72rem; }
  .step-nav { gap: 8px; }
  .case-narrative p,
  .case-step-body p { text-align: left; hyphens: none; }
  .case-step-nav { flex-wrap: wrap; }
}