/* rysych.com case pages — one project dug on its own page.
   Title band → facts → the borehole (0 Surface → −1 Why? → −2 Why? → −3 Core → = Proof),
   then the long read as a ruled log: every chapter, figure and table is a stratum whose label
   sits in the depth column, then the next project's row, closed, as on the homepage index.
   Loaded after home.css, which owns the tokens, header, footer, buttons and the shared strata:
   .stratum .depth .body .t-0/.t-1/.t-2/.t-core/.t-proof, .why-1 .why-2 .core-line .src .mine,
   .surface .shot .shot__stage, .figs .ctx, .legend, .p__btn and its .p__* cells. */

.case-page {
  /* a wider depth column than the homepage: it carries chapter labels like "The proposition" */
  --ruler: clamp(112px, 10.5vw, 168px);
  --row-y: clamp(28px, 3.6vw, 56px);
}

/* ---------- Title: the open row ---------- */

.case-title {
  display: grid;
  grid-template-columns: var(--ruler) minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.case-title__yrs {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 10px 8px 10px var(--gut);
  border-right: 1px solid currentColor;
}
.case-title__name {
  padding: clamp(14px, 1.6vw, 24px) 16px clamp(10px, 1.3vw, 20px) var(--inset);
  overflow-wrap: anywhere;
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 850;
  font-stretch: 62%;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.case-title__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-right: var(--gut);
  padding: 0 14px;
  border: 1.5px solid currentColor;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.case-title__back:hover,
.case-title__back:focus-visible { background: var(--paper); color: var(--ink); }
.case-title :focus-visible { outline-color: var(--signal); }

/* ---------- Facts: the log header ---------- */

/* hairlines come from the 1px gaps over an ink ground, so they never double */
.case-facts {
  display: grid;
  grid-template-columns: calc(var(--ruler) - 1px) repeat(3, minmax(0, 1fr)) minmax(0, 2fr);
  gap: 1px;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
}
.case-facts::before { content: ""; background: var(--paper); }
.case-facts > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 12px 16px 14px var(--inset);
  background: var(--paper);
}
.case-facts dt { font-family: var(--mono); font-size: 12px; line-height: 1.2; text-transform: uppercase; color: var(--mute); }
.case-facts dd { font-size: 16px; font-weight: 500; line-height: 1.35; text-wrap: pretty; }

/* ---------- The borehole ---------- */

/* 0 · Surface: the case's own hero film or screen, as large as the column allows */
.case-surface { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); }
.case-surface.surface--compact { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
.case-logo { width: auto; height: clamp(20px, 1.6vw, 24px); margin-bottom: clamp(14px, 1.6vw, 22px); }
/* a two-line lockup (Mechanism: "mechanism" over a tracked "VENTURES") needs the height to keep its small line legible */
.case-logo--lockup { height: clamp(30px, 2.6vw, 38px); }
.case-deck { font-size: clamp(18px, 1.5vw, 23px); font-weight: 500; line-height: 1.32; text-wrap: pretty; }
.case-page .text-link { min-height: 44px; }
.surface__copy .text-link { margin-top: 12px; }
/* a still screen sits in the frame at its own proportions; a film fills a .shot__stage */
.shot > img,
.shot > picture,
.shot > picture > img { display: block; width: 100%; height: auto; }

/* = Proof: every Key outcome of the case, set for its count */
.proof-title {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.ctx strong { color: var(--paper); font-weight: 600; }
/* outcomes that are words ("Renewal calendar"), not figures: they may wrap */
.figs dd.n--text { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -0.02em; white-space: normal; }

/* ---------- The long read: a ruled log ---------- */

/* one vertical rule runs the whole read at the edge of the depth column */
.case-main {
  counter-reset: fig 1;
  background: linear-gradient(90deg, transparent calc(var(--ruler) - 1px), var(--ink) calc(var(--ruler) - 1px), var(--ink) var(--ruler), transparent var(--ruler));
}
/* every direct child is a stratum: words start where the borehole's words start */
.case-main > * {
  position: relative;
  margin: 0;
  padding: var(--row-y) var(--gut) var(--row-y) calc(var(--ruler) + var(--inset));
  border-bottom: 1px solid var(--ink);
}

/* labels in the depth column: chapter names and figure numbers */
.case-section__aside,
.case-label,
.eyebrow,
.case-main > figure::before,
.case-main > .case-social-comparison::before,
.case-main > .fundraise-motion-grid::before {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}
.case-main > figure,
.case-main > .case-social-comparison,
.case-main > .fundraise-motion-grid { counter-increment: fig; }
.case-main > figure::before,
.case-main > .case-social-comparison::before,
.case-main > .fundraise-motion-grid::before {
  content: "fig. " counter(fig);
  content: "fig. " counter(fig) / "";
  color: var(--mute);
}
/* a label for any other stratum: <p class="case-label"> as its first child */
.case-label,
.case-main > figure::before,
.case-main > .case-social-comparison::before,
.case-main > .fundraise-motion-grid::before,
.case-main > * > .eyebrow:first-child,
.mechanism-products__heading > .eyebrow {
  position: absolute;
  top: var(--row-y);
  left: var(--gut);
  width: calc(var(--ruler) - var(--gut) - 8px);
  margin: 0;
  overflow-wrap: break-word;
}
.section-index { display: none; }

/* a chapter: label | heading | text */
.case-section,
.case-audiences__intro {
  display: grid;
  grid-template-columns: var(--ruler) minmax(0, 1fr);
  padding: 0;
}
.case-section__aside {
  position: sticky;
  top: 12px;
  align-self: start;
  margin-top: var(--row-y);
  padding: 0 8px 0 var(--gut);
  overflow-wrap: break-word;
}
.case-section > div,
.case-audiences__intro > div {
  grid-column: 2;
  min-width: 0;
  padding: var(--row-y) var(--gut) var(--row-y) var(--inset);
}

.case-main h2 {
  margin-bottom: 0.45em;
  font-size: clamp(30px, 3.1vw, 50px);
  font-weight: 760;
  font-stretch: 78%;
  line-height: 1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
/* the opening statement of the read */
.case-section--lead h2 {
  max-width: 40ch;
  margin: 0;
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 560;
  font-stretch: 92%;
  line-height: 1.2;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

.case-section > div > p,
.case-audiences__intro > div > p {
  max-width: 64ch;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}
.case-section > div > p + p { margin-top: 0.8em; }
.case-section strong,
.case-figure strong { font-weight: 700; }
.case-section .text-link {
  display: flex;
  width: fit-content;
  min-height: 44px;
  margin-top: 14px;
  font-size: clamp(17px, 1.2vw, 19px);
}
/* small icons inside running text stay on the line */
.case-main p svg,
.case-main figcaption svg { display: inline-block; width: 13px; height: 13px; margin-left: 3px; vertical-align: -1px; }
.case-section .text-link svg { margin: 0; }

/* the shift from volume to value: the old measure on paper, the new one on the core's red */
.case-value-shift {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  max-width: 44rem;
  margin-top: 28px;
  border: 1px solid var(--ink);
}
.case-value-shift span { padding: 12px 14px 14px; }
.case-value-shift small {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--mute);
}
.case-value-shift strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 760;
  font-stretch: 80%;
  line-height: 1.05;
}
.case-value-shift b { display: grid; place-items: center; padding: 0 10px; border-inline: 1px solid var(--ink); }
.case-value-shift span:last-child { background: var(--signal); }
.case-value-shift span:last-child small { color: var(--ink); }

/* ---------- Plates: films, screens, tables ---------- */

.case-figure > img,
.case-figure > video,
.case-art > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink);
  background: var(--stage);
}
/* a film's crop (aspect-ratio + object-position, below) must measure the picture, not the 1px frame:
   on a border-box the frame eats the few source pixels the crop is meant to trim */
.case-figure > video { box-sizing: content-box; width: calc(100% - 2px); }
.case-figure > figcaption,
.case-art > figcaption {
  padding: 8px 10px;
  border: 1px solid var(--ink);
  border-top: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  text-wrap: pretty;
}
.case-art > figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 24px; }
.case-art__idea { flex-shrink: 0; font-weight: 600; text-transform: uppercase; }
/* the Admirals recordings carry a 2px capture edge on the right: crop 4 source pixels off that side */
#admirals-account-film .case-film__video { aspect-ratio: 1436 / 912; object-fit: cover; object-position: 0 50%; }
#admirals-signup-film .case-film__video { aspect-ratio: 1436 / 950; object-fit: cover; object-position: 0 50%; }

/* before and after, flush left at a readable phone-screen width */
.case-social-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 26rem));
  gap: clamp(12px, 2.4vw, 40px);
}
.case-social-comparison__item { min-width: 0; margin: 0; }
.case-social-comparison__item figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
}
.case-social-comparison__label { padding: 2px 7px; border: 1px solid var(--ink); font-weight: 600; text-transform: uppercase; }
.case-social-comparison__item--after .case-social-comparison__label { border-color: var(--signal); background: var(--signal); }
.case-social-comparison__item a { display: block; border: 1px solid var(--ink); }
.case-social-comparison__item a:hover { outline: 3px solid var(--ink); outline-offset: 2px; }
.case-social-comparison__item img { width: 100%; }

/* the audience table: hard rules, a black head row */
.case-audiences { padding: 0; }
.case-audiences__intro > div { padding-bottom: 24px; }
.case-table-wrap { margin: 0 var(--gut) var(--row-y) calc(var(--ruler) + var(--inset)); }
.case-table-wrap:focus-visible { outline-offset: 4px; }
.case-audience-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.case-audience-table caption { padding-bottom: 10px; text-align: left; font-family: var(--mono); font-size: 13px; line-height: 1.35; color: var(--mute); }
.case-audience-table th,
.case-audience-table td { padding: 14px 16px 16px; border: 1px solid var(--ink); vertical-align: top; text-align: left; font-size: 16px; line-height: 1.45; }
.case-audience-table thead th {
  padding-block: 10px;
  border-right-color: var(--rule-dark);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.case-audience-table thead th:last-child { border-right-color: var(--ink); }
.case-audience-table thead th:first-child { width: 26%; }
.case-audience-table tbody th { font-size: clamp(19px, 1.6vw, 24px); font-weight: 760; font-stretch: 82%; line-height: 1.05; }
.case-audience-table tbody th span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--mute);
}

/* customer quotes, ruled like the homepage's */
.case-quotes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--ink); background: var(--ink); }
.case-quotes__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-quote { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: clamp(16px, 2vw, 26px); background: var(--paper); }
.case-quote blockquote p { font-size: clamp(18px, 1.45vw, 23px); font-weight: 450; line-height: 1.32; text-wrap: pretty; }
.case-quote__translation { font-size: 15px; line-height: 1.45; color: var(--mute); }
.case-quote figcaption { margin-top: auto; font-family: var(--mono); font-size: 13px; line-height: 1.35; }
.case-quote figcaption span { display: block; color: var(--mute); }
.case-quotes__source { max-width: 80ch; margin-top: 12px; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--mute); }

/* Mechanism: four ventures in one ruled grid, each film under its white logo */
.mechanism-products__heading { margin-bottom: clamp(18px, 2vw, 28px); }
.mechanism-products__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--ink); background: var(--ink); }
.mechanism-product { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-bottom: 16px; background: var(--paper); }
.mechanism-product > * { order: 5; margin-inline: clamp(14px, 1.6vw, 22px); }
.mechanism-product > .venture-card { order: 1; margin: 0 0 16px; }
.mechanism-product h3 { order: 2; font-size: clamp(24px, 2.2vw, 34px); font-weight: 760; font-stretch: 78%; line-height: 1; }
.mechanism-product__number { order: 3; margin-top: 6px; font-family: var(--mono); font-size: 12px; line-height: 1.2; text-transform: uppercase; color: var(--mute); }
.mechanism-product p { flex-grow: 1; max-width: 46ch; margin-top: 10px; font-size: 16px; line-height: 1.5; }
.mechanism-product .text-link { min-height: 44px; margin-top: 8px; }
.venture-card { position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; border-bottom: 1px solid var(--ink); background: #161616; }
.venture-card__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.venture-card::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.venture-card__logo { position: absolute; z-index: 1; top: 50%; left: 50%; width: min(54%, 260px); height: auto; transform: translate(-50%, -50%); }
.venture-card__logo--primeputt { width: min(46%, 220px); }

/* Fundraise Up (assets/fundraise-case.css loads before this file) */
.fundraise-gamification { background: none; }
.fundraise-motion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: none;
  align-items: start;
  gap: clamp(12px, 1.6vw, 24px);
}
.fundraise-motion-col { display: grid; gap: clamp(12px, 1.6vw, 24px); min-width: 0; }
.fundraise-motion-card { grid-area: auto; margin: 0; padding: clamp(10px, 1.4vw, 18px); border: 1px solid var(--ink); border-radius: 0; background: var(--stage); }
.fundraise-motion-card img,
.fundraise-motion-card video { display: block; width: 100%; height: auto; border: 1px solid var(--ink); border-radius: 0; background: #fff; }
.fundraise-motion-card video { box-sizing: content-box; width: calc(100% - 2px); }   /* see .case-figure > video */
/* the screen recordings carry capture edges: crop them off (measured on the posters) */
.fundraise-motion-card--donate video { aspect-ratio: 667 / 182; object-fit: cover; object-position: 20% 50%; }
.fundraise-motion-card--monthly video { aspect-ratio: 929 / 830; object-fit: cover; object-position: 0 50%; }
.fundraise-motion-card--costs video { aspect-ratio: 1427 / 830; object-fit: cover; object-position: 20% 50%; }
.fundraise-motion-card figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--ink); }
.fundraise-form-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  align-items: start;
  gap: clamp(24px, 4vw, 64px);
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--ink);
  border-radius: 0;
  background: none;
}
/* fundraise-case.css sets this label to 10px at equal specificity: bring it back to the 12px label size */
.fundraise-form-comparison__copy > .eyebrow { position: static; margin-bottom: 14px; color: var(--mute); font-size: 12px; }
.fundraise-form-comparison p:not(.eyebrow) { max-width: 60ch; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.55; color: var(--ink); }
.fundraise-form-comparison p.fundraise-form-comparison__note { margin-top: 20px; padding-top: 0; border-top: 0; font-family: var(--mono); font-size: 13px; color: var(--mute); }
.fundraise-longform { border: 1px solid var(--ink); border-radius: 0; box-shadow: none; color: #2b2b2b; font-family: var(--sans); }
.fundraise-longform__header > span { font-size: 22px; color: #1f1f1f; }
.fundraise-longform__header small { font-size: 12px; color: #5c5c5c; }
.fundraise-longform__title { font-size: 13px; color: #1f1f1f; }
.fundraise-longform__field > span { font-size: 12px; color: #595959; }
.fundraise-longform__field > i { min-height: 36px; padding: 8px 10px; border-color: #c9c9c9; border-radius: 0; background: #fff; color: #595959; font-size: 13px; }
.fundraise-longform__check { font-size: 12px; color: #595959; }
.fundraise-longform__check b { width: 14px; height: 14px; border-color: #9a9a9a; border-radius: 0; }
.fundraise-longform__submit { padding: 14px 16px; border-radius: 0; font-size: 14px; }
@media (min-width: 861px) {
  /* the argument stays in view while the long form scrolls past it */
  .fundraise-form-comparison__copy { position: sticky; top: 12px; }
}

/* a film that waits for its viewer: one square play control, then native controls */
.case-player { position: relative; }
.case-player__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 88px);
  aspect-ratio: 1;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}
.case-player__play:hover,
.case-player__play:focus-visible { background: var(--signal); color: var(--ink); outline-color: var(--ink); }
.case-player__play[hidden] { display: none; }
.case-player__play:disabled { cursor: progress; }
.case-player__play svg { width: 34%; height: 34%; margin-left: 4%; }

/* ---------- Next project: its homepage row, closed ---------- */

.case-next__more { display: flex; flex-wrap: wrap; grid-column: 3; gap: 8px; padding: 8px var(--gut) 8px 0; }
.case-next__more .btn { min-height: 40px; padding: 0 14px; }
.case-next__more .btn:focus-visible { outline-color: var(--ink); }
.case-next__row { border-bottom: 1px solid var(--ink); text-decoration: none; }
/* the homepage hides its row toggles without script; this cell is a plain label and always shows */
html:not(.js) .case-next__row .p__why { display: inline-flex; }
.case-next__row:hover .p__why,
.case-next__row:focus-visible .p__why { border-color: var(--signal); background: var(--signal); color: var(--ink); }

/* ---------- Narrower screens ---------- */

@media (min-width: 761px) {
  .figs--2,
  .figs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figs--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figs--5 > :first-child { grid-column: 1 / -1; }
}

@media (min-width: 861px) {
  /* Surface with a portrait or near-square film (Mechanism 640×1000, Fundraise Up 930×830): instead of
     the homepage's fixed 24rem / 34rem, the film grows with the first screen, as large as it can be
     with its caption still above the fold; the copy beside it keeps a deck's measure */
  .case-page .surface--tall,
  .case-page .surface--square { display: flex; align-items: flex-start; }
  .case-page .surface--tall { --fit: clamp(24rem, (100svh - 330px) * 640 / 1000, 36rem); }
  .case-page .surface--square { --fit: clamp(30rem, (100svh - 320px) * 930 / 830, 56rem); }
  .case-page .surface--tall > .shot,
  .case-page .surface--square > .shot { flex: 0 1 var(--fit); min-width: 0; }
  .case-page .surface--tall > .surface__copy,
  .case-page .surface--square > .surface__copy { flex: 1 0 15rem; }
  .case-page .surface--tall > .surface__copy { max-width: 36rem; }
  .case-page .surface--square > .surface__copy { max-width: 22rem; }
}

@media (min-width: 1101px) {
  /* the phone keeps running off the bottom of its stage as the Surface grows past 1440
     (home.css caps it at 300px for the homepage row) */
  .case-surface .phone { width: min(80%, 24rem); }

  /* five outcomes: three over two, so even the widest figure keeps its size */
  .figs--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .figs--5 > *,
  .figs--5 > :first-child { grid-column: span 2; }
  .figs--5 > :nth-child(n + 4) { grid-column: span 3; }

  /* wide screens: the heading holds the left of the chapter, the text runs beside it */
  .case-section:not(.case-section--lead) > div,
  .case-audiences__intro > div { display: flow-root; }
  .case-section:not(.case-section--lead) > div > h2,
  .case-audiences__intro > div > h2 { float: left; width: 40%; margin: 0; padding-right: clamp(24px, 3vw, 56px); }
  .case-section:not(.case-section--lead) > div > :not(h2),
  .case-audiences__intro > div > :not(h2) { margin-left: 40%; }
}

@media (max-width: 860px) {
  .case-surface,
  .case-surface.surface--compact { grid-template-columns: minmax(0, 1fr); }
  .case-surface.surface--compact .shot { max-width: 34rem; }
  .case-facts { grid-template-columns: calc(var(--ruler) - 1px) repeat(2, minmax(0, 1fr)); }
  .case-facts::before { grid-row: span 2; }
  .case-quotes__grid,
  .case-quotes__grid--two,
  .fundraise-form-comparison,
  .fundraise-motion-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* the audience table becomes one ruled block per audience */
  .case-audience-table,
  .case-audience-table caption,
  .case-audience-table tbody,
  .case-audience-table tr,
  .case-audience-table th,
  .case-audience-table td { display: block; }
  .case-audience-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .case-audience-table tbody tr { margin-top: -1px; padding: 14px 14px 16px; border: 1px solid var(--ink); }
  .case-audience-table tbody th,
  .case-audience-table tbody td { padding: 0; border: 0; }
  .case-audience-table tbody td { margin-top: 14px; }
  .case-audience-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.25;
    color: var(--mute);
  }
}

@media (max-width: 640px) {
  .case-page { --ruler: 0px; --row-y: 26px; }

  .case-title { grid-template-columns: minmax(0, 1fr) auto; }
  .case-title__yrs { align-self: center; padding: 12px var(--gut) 0; border-right: 0; }
  .case-title__back { grid-column: 2; grid-row: 1; margin: 10px var(--gut) 0 0; }
  .case-title__name { grid-column: 1 / -1; grid-row: 2; padding: 8px var(--gut) 16px; font-size: clamp(44px, 14vw, 64px); }

  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-facts::before { display: none; }
  .case-facts > div { padding: 10px var(--gut) 12px; }

  .case-main > * { padding: var(--row-y) var(--gut); }
  .case-main > .case-section,
  .case-main > .case-audiences { padding: 0; }
  .case-section,
  .case-audiences__intro { grid-template-columns: minmax(0, 1fr); }
  .case-section__aside { position: static; margin: 0; padding: var(--row-y) var(--gut) 0; }
  .case-section > div,
  .case-audiences__intro > div { grid-column: 1; padding: 10px var(--gut) var(--row-y); }
  .case-audiences__intro > div { padding-bottom: 18px; }
  .case-table-wrap { margin: 0 var(--gut) var(--row-y); }
  /* labels leave the (now empty) depth column and sit above their stratum */
  .case-label,
  .case-main > figure::before,
  .case-main > .case-social-comparison::before,
  .case-main > .fundraise-motion-grid::before,
  .case-main > * > .eyebrow:first-child,
  .mechanism-products__heading > .eyebrow { position: static; display: block; grid-column: 1 / -1; width: auto; margin-bottom: 10px; }

  .case-value-shift { grid-template-columns: minmax(0, 1fr); }
  .case-value-shift b { justify-items: start; padding: 6px 14px; border-inline: 0; border-block: 1px solid var(--ink); }
  .case-value-shift b svg { transform: rotate(90deg); }

  .mechanism-products__grid { grid-template-columns: minmax(0, 1fr); }
  .case-art > figcaption { display: block; }
  .case-art__idea { display: block; margin-bottom: 4px; }

  .case-next__more { grid-column: 1 / -1; grid-row: 2; padding: 0; }
}