/* Case studies — same grammar as /run/: one line, stations, skim + go deeper.
   Extends run/run.css. Adds the facts strip, the before/after pair, the
   labeled results, the signals figure. Design provenance: tokens/type from
   style.css (Jerry Design System v1); figures are explicit decisions for
   this piece: every figure is a line doing what the work did. */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px 34px; margin:30px 0 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14px; line-height:1.5; }
.facts b{ display:block; font-family:'AvantGarde','CenturyGothic',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:5px; color:var(--ink-soft); }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:18px 0 6px; }
.pair > div{ padding:20px 22px; border:1px solid var(--line); }
.pair .was{ color:var(--ink-soft); }
.pair .was q, .pair .now q{ display:block; font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:17px; line-height:1.3; margin:8px 0 10px; quotes:none; }
.pair .was q{ text-decoration:line-through; text-decoration-color:rgba(101,87,255,.55); text-decoration-thickness:1.5px; }
.pair .now{ border-left:3px solid var(--accent); }
.pair b{ display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.pair p{ margin:0; font-size:14px; }
.results{ list-style:none; margin:0; padding:0; }
.results li{ display:grid; grid-template-columns:180px 1fr 190px; gap:22px; align-items:start; padding:14px 0; border-bottom:1px solid var(--line); }
.results li:last-child{ border-bottom:0; }
.results .num{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:26px; line-height:1; letter-spacing:-.01em; }
.results .what{ font-size:15px; line-height:1.5; }
.results .what small{ display:block; color:var(--ink-soft); font-size:12.5px; margin-top:4px; }
.results .src{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); line-height:1.5; }
.results .src.v{ color:var(--accent); }
.fig{ margin:14px 0 10px; }
.fig svg{ width:100%; max-width:640px; height:auto; overflow:visible; display:block; }
.fig svg path, .fig svg line{ fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.fig svg .acc{ stroke:var(--accent); stroke-width:1.8; }
.fig svg .soft{ stroke:var(--ink-soft); opacity:.55; }
.fig svg text{ font-family:'CenturyGothic',sans-serif; font-weight:700; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; fill:var(--ink-soft); }
.fig svg text.on{ fill:var(--accent); }
.fig svg circle{ fill:var(--paper); stroke:var(--ink); stroke-width:1.5; }
.fig svg circle.dot{ fill:var(--accent); stroke:var(--accent); }
.figcap{ margin:8px 0 0; font-size:12.5px; color:var(--ink-soft); max-width:60ch; }
.pull{ margin:18px 0 0; padding:20px 24px; border-left:3px solid var(--accent); background:var(--paper-deep); font-size:17px; line-height:1.55; max-width:64ch; }
.pull small{ display:block; margin-top:10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); }
.carry{ list-style:none; margin:0; padding:0; }
.carry li{ display:grid; grid-template-columns:200px 1fr; gap:22px; padding:12px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.5; }
.carry li b{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.carry li a{ color:var(--ink); }
.sheet{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:20px 22px; border:1px solid var(--line); margin-top:8px; }
.sheet b{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-size:15px; }
.sheet span{ display:block; color:var(--ink-soft); font-size:13.5px; margin-top:4px; }
.sheet a{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; }
.sheet a:hover{ color:var(--accent); }
.evnote{ margin-top:22px; font-size:13.5px; color:var(--ink-soft); max-width:66ch; line-height:1.55; }
.work-index{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.work-index li{ border-bottom:1px solid var(--line); }
.work-index a{ display:grid; grid-template-columns:150px 1fr auto; gap:24px; align-items:baseline; padding:26px 0; text-decoration:none; }
.work-index .yr{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); }
.work-index .ttl{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:clamp(20px,2.4vw,30px); line-height:1.15; }
.work-index .ttl small{ display:block; font-family:'CenturyGothic',sans-serif; font-weight:400; font-size:14.5px; color:var(--ink-soft); margin-top:6px; line-height:1.5; max-width:60ch; }
.work-index a:hover .ttl{ color:var(--accent); }
.work-index .go{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); }
@media (max-width:860px){
  .facts{ grid-template-columns:1fr; gap:14px; }
  .pair{ grid-template-columns:1fr; }
  .results li{ grid-template-columns:1fr; gap:6px; }
  .carry li{ grid-template-columns:1fr; gap:4px; }
  .sheet{ grid-template-columns:1fr; }
  .work-index a{ grid-template-columns:1fr; gap:8px; }
}
/* Photograph figure (added for /work/bament/ — a real place, shown once; hairline, no shadow, caption carries the source). */
.photo{ margin:22px 0 4px; }
.photo img{ display:block; width:100%; height:auto; border:1px solid var(--line); }
.photo figcaption{ margin:8px 0 0; font-size:12.5px; color:var(--ink-soft); max-width:70ch; }
.photo figcaption b{ font-family:'CenturyGothic',sans-serif; font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-right:8px; }