/* ==========================================================================
   Case study pages (work/*.html)
   One project, its evidence, and the reasoning behind each decision.
   Loaded after styles.css — reuses its tokens, .ba slider, .band and .reveal.
   ========================================================================== */

/* ---------- Case bar: back link + bookmarks + "what changed & why" ----------
   Sticks BELOW the sticky site header, not at top:0 — both used to claim the
   same spot and the header (z-index 50) buried the bar the moment you scrolled.
   --header-h is measured by main.js; the fallback covers no-JS. */

.casebar {
  position: sticky;
  top: var(--header-h, 3.95rem);
  z-index: 40;
  background: var(--ink);
  color: var(--paper);
}
.casebar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.25rem;
  padding-block: 0.5rem;
}
.casebar__back {
  color: var(--paper);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  margin-left: -0.75rem; /* pill padding must not shift the glyph off the container edge */
  border-radius: var(--radius-pill);
  transition: opacity 0.18s ease, background-color 0.18s ease;
}
.casebar__back:hover { opacity: 1; background: rgba(250, 246, 240, 0.12); }
/* The page's bookmarks. Same pill grammar as the homepage nav: soft text in a
   quiet pill, a translucent-paper fill on hover (the tint of an ink surface),
   and the section you're in gets the short clay bar. The row scrolls sideways
   when it runs out of room rather than wrapping the bar taller. */
.casebar__nav {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.casebar__nav::-webkit-scrollbar { display: none; }
/* centre via auto margins, not justify-content: a centred flex row that
   overflows clips its left links beyond reach; auto margins degrade to
   flex-start scrolling instead */
.casebar__nav > a:first-child { margin-left: auto; }
.casebar__nav > a:last-child { margin-right: auto; }
.casebar__nav a {
  position: relative;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(250, 246, 240, 0.75);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  transition: color 0.18s ease, background-color 0.18s ease;
}
.casebar__nav a:hover {
  color: var(--paper);
  background: rgba(250, 246, 240, 0.12);
}
.casebar__nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.18rem;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--clay); /* 3.6:1 on ink — clears the 3:1 graphical-marker bar */
  transition: width 0.22s ease;
}
.casebar__nav a[aria-current="true"] { color: var(--paper); }
.casebar__nav a[aria-current="true"]::after { width: calc(100% - 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  .casebar__back,
  .casebar__nav a,
  .casebar__nav a::after { transition: none; }
}
/* clay-deep on ink is a 2.55:1 ring — flip it to paper, as the saturated bands do */
.casebar :focus-visible { outline-color: var(--paper); }
/* On a phone the bookmarks take their own row under the back link, left-aligned,
   with a fade telling the thumb the row scrolls. The header goes static here
   (main.js adds .has-casebar) so the sticky stack stays two short rows. */
@media (max-width: 46rem) {
  .casebar { top: 0; }
  .casebar__inner { flex-wrap: wrap; justify-content: space-between; row-gap: 0; }
  .casebar__nav {
    order: 3;
    flex-basis: 100%;
    padding-bottom: 0.6rem;
    /* fades both ways: the wide right ramp says "more this way"; the narrow
       12px left ramp stops scrolled-past labels hard-clipping at the edge.
       The ramp lives entirely in a padding strip pulled out of the margin
       (padding 12 / margin -12), so at rest the first label sits at the
       container edge as before, at full opacity — only scrolled-past glyphs
       enter the fade. The margin also swallows the pill padding — it's the
       pill's TEXT that sits at the container edge, not its cushion — while
       the padding strip stays 12px, so the first pill's cap lands exactly
       where the ramp reaches full opacity. */
    padding-left: 12px;
    margin-left: calc(-12px - 0.75rem);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 2.5rem), transparent);
  }
  /* left-aligned on the phone row — cancel the centring margins */
  .casebar__nav > a:first-child { margin-left: 0; }
  .casebar__nav > a:last-child { margin-right: 0; }
  body.has-casebar .site-header,
  body:has(.casebar) .site-header { position: static; }
}
/* A bookmark jump has two sticky bars to clear, not one */
body.has-casebar main > section { scroll-margin-top: 8.25rem; }
@media (max-width: 46rem) {
  body.has-casebar main > section { scroll-margin-top: 6.5rem; }
}

/* ---------- Hosting page: mobile art refusal (R4) ----------
   Below 62rem the aside spots became a procession of orphan icons down a
   one-column page. Refusal, not shrinkage: the section asides go entirely;
   the hero art (plain .explain__art) stays at every width (recorded family
   ruling). From 62rem the asides come back IN FLOW after their prose — the
   homepage facebook-aside grammar — and styles.css hangs them absolute in
   the margin from 72rem up. Scoped to hosting's body class — index's
   facebook aside and the case pages never see this. */
body.hosting-page .explain__art--aside { display: none; }
@media (min-width: 62rem) {
  body.hosting-page .explain__art--aside { display: block; }
}
/* #words: the glossary rows start ~131px below the head container's top, and
   a 156px aside crossed the first right-column row's hairline ("Deploy") by
   24-29px at EVERY width >=72rem (measured live, r3). At the R4 floor (120px)
   and level with the head's top edge it clears the hairline by ~11px at the
   tightest width (1152) without leaving the eyebrow line. */
@media (min-width: 72rem) {
  body.hosting-page #words .explain__art--aside { width: 120px; top: 0; }
}

/* ---------- Case hero ---------- */

.chero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.chero__title {
  font-size: var(--size-hero);
  margin-bottom: 0.35em;
  text-wrap: balance; /* stops "it." / "lives," orphaning on a display-size line */
}
.chero__title em { font-style: italic; color: var(--clay); } /* matches the index hero em — same echo, same ink */
.chero__sub {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 40rem;
}

/* ---------- What got better, and for whom ---------- */

/* Sits between two sections that both carry their own padding. Without this it
   has none of its own — .band used to supply it, before this section stopped
   being tinted. */
.gains {
  padding-block: var(--space-section);
  scroll-margin-top: 5rem;
}
/* Both hero-less case pages hand their H1 to the first section (get2gether
   #gains, salisbury #more). It's sized like the H2s it sits among — the tag is
   there for the document outline, not to make the heading bigger, and without
   this it falls back to the UA's 2em. */
.gains .section-head h1,
.more .section-head h1 { font-size: var(--size-h2); }

.gains__grid {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
/* Three across only once there's room. At 48rem a third column drops these
   lines to about 25 characters, which defeats the point of writing them short. */
@media (min-width: 62rem) {
  .gains__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.gain__viz {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  /* The clips are drawn on cream, so the card behind them has to be the same
     cream or the frame shows as a rectangle. --paper-tint is what the reference
     illustrations were keyed to in art-process.py. */
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin-bottom: 1.4rem;
}

/* Etched spot in the clip's old slot — same grammar as the homepage .trio__art:
   the art floats on the card, no tinted box (R4/T10). */
.gain__art {
  display: block;
  width: 140px;
  height: auto;
  margin-bottom: 1.4rem;
}

/* An H2, not an H3: with the case hero gone the section heading is the page's H1,
   so these sit one level under it and the outline doesn't skip a level. */
.gain h2 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
/* The one line that has to land in three seconds. Display face, not body. */
.gain__lead {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1vw + 1.1rem, 1.75rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  text-wrap: balance; /* stops "…before they fund / you." orphaning (r3) */
}
.gain__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.gain__list li {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.45;
  padding-left: 1.1rem;
  position: relative;
}
.gain__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--clay);
}

/* ---------- Findings: prose + infographic, alternating (Salisbury) ---------- */

.broke__list {
  display: grid;
  gap: clamp(2rem, 3.5vw, 2.5rem); /* R8: sibling gap ≤ half section padding */
}
.finding {
  display: grid;
  gap: 2rem;
  align-items: center;
  scroll-margin-top: 5rem;
}
@media (min-width: 56rem) {
  .finding { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  /* mirror the columns too, so the infographic keeps one width down the page */
  .finding--flip { grid-template-columns: 0.95fr 1.05fr; }
  .finding--flip .finding__body { order: 2; }
}
.finding__body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  line-height: 1.15;
  margin-bottom: 0.7em;
}
.finding__body p { color: var(--ink-soft); }
.finding__plain { font-size: 1.05rem; }
.finding__punch {
  margin: 0 0 1.4rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--clay);
  color: var(--ink) !important;
  font-weight: 500;
}
/* The answer, right under the problem — nobody should have to scroll for it.
   Floats on the band (argument 5 / T10 ruling, r3): the clay NOW chip and a
   hairline top rule carry the separation; no white plate. */
.finding__fix {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.7rem;
  border-top: 1px solid var(--line);
  padding: 1rem 0 0;
  color: var(--ink) !important;
  font-weight: 500;
}
.finding__fix-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--clay-deep);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.65rem;
}
.finding__viz {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.6rem 1.5rem 1.2rem;
  box-shadow: var(--shadow-card);
}
.finding__viz svg { width: 100%; height: auto; display: block; }
/* the charts scale with their box, so on a phone the padding is coming
   straight out of the label size — give the drawing the room instead */
@media (max-width: 30rem) {
  .finding__viz { padding: 1.15rem 0.85rem 1rem; }
}
.finding__viz figcaption {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
/* Illustration variant: the picture is the card, so it gets no inner padding. */
.finding__viz--art { padding: 0; overflow: hidden; }
.finding__viz--art img { width: 100%; }
@media (max-width: 30rem) {
  .finding__viz--art { padding: 0; }
}
/* Spot variant: an etched spot floats in its column — no white card at all
   (R5/T10). Body spots stay under the hero's size at every width (Icon DNA
   delivery amendment: 200px hard ceiling, hero >= body): the hero runs
   clamp(140px, 18vw, 200px), these run under it. In the one-column stack the
   spot left-aligns with the prose like every other in-flow art on the family;
   the desktop side-column keeps its centring. */
.finding__viz--spot {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.finding__viz--spot img {
  display: block;
  width: clamp(132px, 15vw, 176px);
  height: auto;
  margin-inline: 0;
}
@media (min-width: 62rem) {
  .finding__viz--spot img { margin-inline: auto; }
}

/* ---------- Before/after tags on the case pages ----------
   styles.css puts .shot__tag at 0.9rem/0.9rem, which lands it on the mocks'
   own top-bar text (salisbury after: the "Concept prototype" disclaimer at
   1280 and "See what's new & why" at 500; before: the nav links). 2.6rem
   drops it into the mocks' empty header cream — measured clean against every
   text/button region of both mocks at 375, 500 and 1280; the only thing it
   may touch is the client logo drawing (imagery, sanctioned). Case pages
   only: this file doesn't load on the homepage, whose showcase tags stay. */
.shot__tag { top: 2.6rem; }
/* Under 30rem the mock scales down but the tag doesn't, so its 526-source-px
   footprint can't dodge the header text by offset alone — shrink the type. */
@media (max-width: 30rem) {
  .shot__tag { font-size: 0.58rem; padding: 0.26rem 0.6rem; }
}

/* ---------- Annotated screenshot ---------- */

.did {
  padding-block: var(--space-section);
  scroll-margin-top: 5rem;
}
.annot { display: grid; gap: 2rem; }
@media (min-width: 62rem) {
  .annot { grid-template-columns: 1.35fr 1fr; gap: 2.5rem; align-items: start; }
}
/* The frame lives on the image, not the stage, so a pin sitting near an edge
   overhangs it instead of being clipped in half. */
.annot__stage {
  position: relative;
  align-self: start;
}
/* The five note cards run about twice the screenshot's height, so notes 3–5
   used to sit half a screen below the markers they explain. The screenshot
   follows the reader down the notes instead — the pin you tapped stays visible
   while its card is read. */
@media (min-width: 62rem) {
  .annot__stage {
    position: sticky;
    top: calc(var(--header-h, 3.95rem) + 4.25rem);
  }
}
.annot__stage img {
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.annot__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--clay-deep);
  color: var(--white);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 10px rgba(34, 29, 24, 0.35);
  transition: transform 0.18s ease, background 0.18s ease;
}
.annot__pin:hover { transform: translate(-50%, -50%) scale(1.15); }
/* 44px thumb targets below tablet — the page most likely to be poked by the
   audience the homepage promises "buttons a thumb can hit" to. At this size a
   pin covers ~150px of the mock, so the desktop anchors sat ON the evidence
   (nav labels, headline, the button pin 4 praises). Each pin moves to the
   mock's edge nearest its subject instead — touching or half-over the border,
   pointing inward, over imagery only (r3). left/top beat the inline --x/--y. */
@media (max-width: 48rem) {
  .annot__pin { width: 2.75rem; height: 2.75rem; }
  .annot__pin[data-pin="1"] { left: 45%; top: 0; }      /* top edge, in the gap between logo and nav links */
  .annot__pin[data-pin="2"] { left: 97%; top: 10.5%; }  /* right edge, just under the Donate corner */
  .annot__pin[data-pin="3"] { left: 1%; top: 34%; }     /* left edge, level with the headline */
  .annot__pin[data-pin="4"] { left: 1%; top: 85%; }     /* left edge, level with the two buttons */
  .annot__pin[data-pin="5"] { left: 60%; top: 100%; }   /* bottom edge, on the crowd photograph */
}
.annot__pin.is-active {
  background: var(--ink);
  transform: translate(-50%, -50%) scale(1.15);
}
/* the halo exists only to say "these are tappable" — it stops once one is picked */
@media (prefers-reduced-motion: no-preference) {
  .annot__pin::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--clay);
    opacity: 0;
    animation: pin-halo 2.8s ease-out infinite;
  }
  .annot__pin:nth-of-type(2)::after { animation-delay: 0.35s; }
  .annot__pin:nth-of-type(3)::after { animation-delay: 0.7s; }
  .annot__pin:nth-of-type(4)::after { animation-delay: 1.05s; }
  .annot__pin:nth-of-type(5)::after { animation-delay: 1.4s; }
  .annot.is-picked .annot__pin::after { animation: none; opacity: 0; }
}
@keyframes pin-halo {
  0%   { opacity: 0.9; transform: scale(0.85); }
  70%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}
/* The border-adjacent mobile pins sit at the mock's edges, where the halo's
   scale(1.5) swept past the viewport on pin 2 and opened a 5-9px horizontal
   scroll (Chrome counts transformed pseudo-boxes as scrollable overflow,
   measured live, r3). On phones the pulse fades without growing. */
@media (max-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .annot__pin::after { animation-name: pin-halo-still; }
}
@keyframes pin-halo-still {
  0%   { opacity: 0.9; transform: scale(0.85); }
  70%  { opacity: 0;   transform: scale(1); }
  100% { opacity: 0;   transform: scale(1); }
}
.annot__notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.annot__note {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  scroll-margin-top: 5rem;
  transition: border-left-color 0.2s ease, background 0.2s ease;
}
.annot__note.is-active {
  border-left-color: var(--clay);
  background: var(--paper-tint);
}
.annot__note h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1rem;
  margin-bottom: 0.4em;
}
.annot__n {
  flex: none;
  width: 1.55rem; height: 1.55rem;
  border-radius: 50%;
  background: var(--clay-deep);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.annot__note p {
  margin: 0;
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- Accessibility section ---------- */

.access { scroll-margin-top: 5rem; }
.access__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56rem) {
  .access__grid { grid-template-columns: 1fr 22rem; gap: 3.5rem; }
}
/* The panel follows the reader down the copy, the same way the annotated
   screenshot does in "What I did". It only has room to travel because the left
   column now holds the section head as well as the body — beside the body alone
   the panel is the taller of the two and sticky would never move. */
@media (min-width: 56rem) {
  .access__panel {
    position: sticky;
    top: calc(var(--header-h, 3.95rem) + 4.25rem);
  }
}
.access__body p { color: var(--ink-soft); }
.access__punch {
  margin: 0 0 1.5rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--clay);
  color: var(--ink) !important;
  font-weight: 500;
  font-size: 1.05rem;
}
.access__note {
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--line);
  padding-left: 1.1rem;
  max-width: 44rem;
}

/* A still of the real accessibility panel. Presented as an image, so none of
   these look-alike controls are focusable or announced to a screen reader. */
.access__panel { margin: 0; }
.panelmock {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.4rem 1.4rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.panelmock__title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35em;
}
.panelmock__intro {
  margin: 0 0 1.3rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.panelmock__label {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.panelmock__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.3rem;
}
.panelmock__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
}
.panelmock__btn.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.panelmock__a { font-weight: 700; line-height: 1; }
.panelmock__a--sm { font-size: 0.72rem; }
.panelmock__a--md { font-size: 0.92rem; }
.panelmock__a--lg { font-size: 1.12rem; }
.panelmock__sw {
  width: 2.6rem; height: 2.1rem;
  border-radius: 9px;
  border: 1.5px solid var(--line);
  background: var(--sw);
}
.panelmock__sw.is-on { border-color: var(--ink); border-width: 2.5px; }
.panelmock__reset {
  display: block;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.access__panel figcaption {
  margin-top: 0.95rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Backstage: screenshots + the two routes ---------- */

.backstage {
  padding-block: var(--space-section);
  scroll-margin-top: 5rem;
}
/* The before/after pair comes from styles.css with no bottom margin — on the
   homepage it ends its block. Here it's the first of three stacked figures, so
   it takes the same 2.5rem the .shot-figs below it use, or it butts straight
   into the next one. */
.did .cmp__pair { margin-bottom: 2.5rem; }

.shot-fig {
  margin: 0 0 2.5rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 62rem) {
  .shot-fig { grid-template-columns: 1.55fr 1fr; gap: 2.25rem; align-items: center; }
}
.shot-fig img {
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.shot-fig figcaption {
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.shot-fig figcaption strong { color: var(--ink); display: block; margin-bottom: 0.35em; }

.routes {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 48rem) {
  .routes { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
.route {
  border-radius: var(--radius-card);
  padding: 1.6rem 1.7rem;
  border: 1px solid var(--line);
}
.route--before { background: var(--paper-tint); }
/* Same hairline as its neighbour (no saturated border on the homepage's cards);
   the clay stays in the head, the markers and the chip — accents, not a frame. */
.route--after { background: var(--white); }
.route__head {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.route--after .route__head { color: var(--clay-deep); }
.route__steps {
  margin: 0;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.975rem;
}
.route--after .route__steps { color: var(--ink); font-weight: 500; }
.route__steps li::marker { color: var(--clay-deep); font-weight: 700; }
.route__punch {
  margin: 1.3rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- Where the money goes ---------- */

.money { scroll-margin-top: 5rem; }
/* The illustration carries the idea; the bars underneath carry the figures. */
/* Etched spot, not a scene, and paired with the section head — the hosting
   hero/aside grammar: copy left, art hanging right of it at desktop, art
   dropping into the flow below the copy on narrow screens (R5/T10). The bars
   figure below stays full-width. */
.money__head { margin-bottom: 2rem; }
.money__art { margin: 0; }
/* 200px hard ceiling (Icon DNA delivery amendment) and never above the hero
   bell, which runs clamp(140px, 18vw, 200px) — the tin tracks just under it */
.money__art img {
  display: block;
  width: clamp(140px, 16vw, 200px);
  height: auto;
}
@media (min-width: 62rem) {
  .money__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
    align-items: center;
  }
  .money__head .section-head { margin-bottom: 0; }
}
.money__viz {
  margin: 0 0 2.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.8rem 1.8rem 1.4rem;
  box-shadow: var(--shadow-card);
}
.mbar + .mbar {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.mbar__head {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  font-weight: 700;
}
.mbar__sub {
  margin: 0 0 0.7rem;
  font-size: 0.925rem;
  color: var(--ink-soft);
}
.mbar__sub strong { color: var(--ink); }
.mbar__track {
  display: flex;
  gap: 3px;
  height: 3.4rem;
}
.mbar__seg {
  flex: 0 0 var(--pct);
  border-radius: 12px; /* on the 18/12/pill token ladder (r3) */
  display: flex;
  align-items: center;
  min-width: 0;
}
.mbar__seg--keep {
  background: var(--clay-deep);
  padding-inline: 1rem;
}
.mbar__seg--keep span {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  white-space: nowrap;
}
.mbar__seg--cut { background: var(--ink); min-width: 0.75rem; /* the 2% sliver must survive a 335px track */ }
.mbar__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.7rem 0 0;
  font-size: 0.925rem;
  color: var(--ink-soft);
}
.mbar__foot strong { color: var(--ink); }
.mbar__key {
  flex: none;
  width: 0.85rem; height: 0.85rem;
  border-radius: 12px; /* token ladder; at 13.6px square this renders as the
                          same fully-rounded end the segments' 12px gives them */
  background: var(--ink);
}
.money__viz figcaption {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 30rem) {
  .money__viz { padding: 1.1rem 0.9rem 1rem; }
}
/* The punch and the honesty box share a row at desktop — stacked at 44rem they
   left a page-wide empty right margin and four different text widths in a run. */
.money__pair { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62rem) {
  .money__pair { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  .money__pair .money__take { margin-bottom: 0; }
  .money__pair .caveat { max-width: none; }
}

.money__take { max-width: 44rem; margin-bottom: 2rem; }
.money__big {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  margin-bottom: 0.5em;
}
.money__big strong { color: var(--clay-deep); font-weight: 400; }
.money__take p { color: var(--ink-soft); }
.money__take p strong { color: var(--ink); }

.caveat {
  max-width: 44rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
}
.caveat__head {
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--clay-deep);
}
.caveat p:last-child { margin-bottom: 0; }
.caveat p { color: var(--ink-soft); font-size: 0.975rem; }

/* ---------- The platform-fee risk ---------- */

.risk {
  padding-block: var(--space-section);
  scroll-margin-top: 5rem;
}
.risk .prose { color: var(--ink-soft); font-size: 1.05rem; }
.risk .prose strong { color: var(--ink); }
.risk__src {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Next / CTA ---------- */

.casenext {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}
/* The ask goes dark — the same ink-band grammar as the homepage's form section
   (DNA R3: every page ends on the INK moment), carded rather than full-bleed so
   the case page keeps its paper footer rhythm. */
.casenext__inner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  background: url("../assets/art/wash-dark.webp") center / cover no-repeat var(--ink);
  color: var(--paper);
  border-radius: var(--radius-card);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
@media (min-width: 52rem) {
  .casenext__inner { grid-template-columns: 1fr auto; gap: 2.5rem; }
}
.casenext__title { margin-bottom: 0.25em; color: var(--paper); }
.casenext__sub { margin: 0; color: color-mix(in srgb, var(--paper) 78%, transparent); }
.casenext__inner .btn { justify-self: start; }
.casenext__back { margin: 1.75rem 0 0; }

/* ---------- Clay band, case-page scope (DNA R2: one clay moment per page) ----------
   The generic band lives in styles.css (bg, h2, eyebrow); these carry the case
   components that can sit on it. All text values are composited-contrast checked:
   88% paper on clay = 5.09:1 body, 85% = 4.86:1 small (AA passes; the margin is
   thin — do not dim below 85%), full paper for emphasis. */

.band--clay .section-head__intro,
.band--clay .prose,
.band--clay .access__body p {
  color: color-mix(in srgb, var(--paper) 88%, transparent);
}
.band--clay .prose strong,
.band--clay .access__body strong,
.band--clay h3 {
  color: var(--paper);
}
.band--clay .access__punch {
  color: var(--paper) !important;
  border-left-color: var(--paper);
}
.band--clay .access__note {
  color: color-mix(in srgb, var(--paper) 85%, transparent);
  border-left-color: color-mix(in srgb, var(--paper) 35%, transparent);
}
.band--clay .link-arrow {
  color: var(--paper);
  border-bottom-color: color-mix(in srgb, var(--paper) 45%, transparent);
}
.band--clay .link-arrow:hover { color: var(--paper); border-bottom-color: var(--paper); }
.band--clay .prose a:not([class]) {
  color: var(--paper);
  border-bottom-color: color-mix(in srgb, var(--paper) 45%, transparent);
}
.band--clay .prose a:not([class]):hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}
.band--clay .risk__src {
  color: color-mix(in srgb, var(--paper) 85%, transparent);
  border-top-color: color-mix(in srgb, var(--paper) 30%, transparent);
}
.band--clay .risk__src a {
  color: var(--paper);
  border-bottom-color: color-mix(in srgb, var(--paper) 45%, transparent);
}
.band--clay .risk__src a:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}
.band--clay .access__panel figcaption {
  color: color-mix(in srgb, var(--paper) 85%, transparent);
}
/* the white panel mock and its contents keep their own ink — it is a picture of
   the real UI and must stay faithful to it */
.band--clay .panelmock { color: var(--ink); }