/* Case studies (/work/*). Loaded after site.css, which supplies the tokens, type, topbar,
   buttons and footer. No JS: these pages are long reads and render the same everywhere.

   The one memorable device is the "replaced" ledger: what used to do the job, struck
   through in streetlight yellow, and what does it now. Everything else stays quiet. */

.case-head { padding: clamp(56px, 9vw, 120px) 0 clamp(32px, 5vw, 56px); }
.case-kicker { font-size: var(--step--1); font-weight: 700; color: var(--sodium); margin-bottom: 18px; }
.case-kicker a { text-decoration: none; }
.case-kicker a:hover { text-decoration: underline; }
.case-title { font-size: var(--step-4); font-stretch: 125%; font-weight: 850; line-height: 0.94; letter-spacing: -0.03em; }
.case-dek { margin-top: clamp(20px, 3vw, 32px); max-width: 40rem; font-size: var(--step-1); line-height: 1.5; color: #c6d3d7; }

.case-section { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.case-section h2 { font-size: var(--step-3); font-stretch: 112%; font-weight: 850; line-height: 0.98; letter-spacing: -0.02em; margin-bottom: clamp(20px, 3vw, 36px); max-width: 18ch; }
.case-section h3 { font-size: var(--step-1); font-stretch: 112%; line-height: 1.25; margin: 0 0 8px; }
.prose { max-width: 40rem; color: #c6d3d7; }
.prose p { max-width: none; }
.prose strong { color: var(--fog); }
.prose a, .case-section a:not(.btn) { color: var(--sodium); }
.note { font-size: var(--step--1); color: var(--mute); }

/* ---------- The ledger: old thing struck through, new thing beside it ---------- */
.ledger { list-style: none; padding: 0; margin: 0; }
.ledger li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 40px;
  padding: clamp(18px, 2.4vw, 28px) 0; border-top: 1px solid var(--line);
}
.ledger li:last-child { border-bottom: 1px solid var(--line); }
.ledger s, .ledger .now {
  font-size: var(--step-2); font-stretch: 118%; font-weight: 800; line-height: 1.1; text-decoration: none;
}
.ledger s {
  color: var(--mute); justify-self: start;
  text-decoration: line-through; text-decoration-color: var(--sodium); text-decoration-thickness: 4px;
}
.ledger .now { color: var(--fog); }
.ledger .why { margin: 4px 0 0; color: #b9c8cd; max-width: 46ch; }
@media (min-width: 900px) {
  .ledger li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; }
  .ledger .now-wrap { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- Numbers, set as a plain list ---------- */
.counts-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 32px; }
.counts-list li { padding: 16px 0; border-top: 1px solid var(--line); color: #b9c8cd; }
.counts-list b { display: block; font-size: var(--step-3); font-stretch: 125%; font-weight: 850; line-height: 1; color: var(--fog); font-variant-numeric: tabular-nums; margin-bottom: 6px; }

/* ---------- Parts: text beside a recreation ---------- */
.part { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; align-items: start; }
.part + .part { margin-top: clamp(48px, 7vw, 88px); }
@media (min-width: 900px) { .part { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.part figure { min-width: 0; }

/* The map: services, devices and vendors, with health dots. Labels are generic on purpose. */
.map { border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); padding: 12px; }
.map svg { display: block; width: 100%; height: auto; }
.map .edge { stroke: var(--line); stroke-width: 2; fill: none; }
.map .edge.dep { stroke: #2f5566; stroke-dasharray: 5 5; }
.map .node rect { fill: var(--ink-3); stroke: #2f5566; stroke-width: 1.5; }
.map .node.hub rect { fill: #183b4d; stroke: var(--sodium); }
.map .node text { fill: var(--fog); font: 600 13px var(--font); }
.map .node .kind { fill: var(--mute); font-weight: 400; font-size: 11px; }
.map .ok { fill: var(--teal); }
.map .warn { fill: var(--coral); }

/* A job card, the way a brief starts. */
.jobcard { border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); padding: 20px; }
.jobcard h3 { font-size: var(--step-1); }
.jobcard dl { margin: 14px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
.jobcard dt { font-weight: 700; color: var(--sodium); }
.jobcard dd { margin: 0; color: #c6d3d7; }
.flow { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.flow li { padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--teal); font-size: var(--step--1); font-weight: 700; }
.flow li:last-child { background: var(--teal); color: var(--ink); }

/* The Deck card, at rest. */
.deck-demo { display: grid; justify-items: center; gap: 12px; padding: 24px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); }
.deck-demo .dcard { width: min(100%, 320px); transform: rotate(-2deg); }
.deck-demo .dcard-stamp { opacity: 0; }
.swipes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 4px 24px; font-size: var(--step--1); color: var(--mute); }
.swipes b { color: var(--fog); }
.rules { padding-left: 1.2em; margin: 16px 0 0; color: #c6d3d7; }
.rules li { margin-bottom: 6px; }

/* ---------- Screenshots ---------- */
.shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: end; }
@media (min-width: 900px) { .shots { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.shot-phone img { max-width: 260px; margin: 0 auto; border-radius: 22px; }

.facts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.facts li { padding-left: 22px; position: relative; color: #c6d3d7; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--sodium); border-radius: 2px; }

.steps-plain { padding-left: 1.3em; margin: 0; color: #c6d3d7; display: grid; gap: 10px; max-width: 40rem; }
.steps-plain b { color: var(--fog); }

.case-next { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--ink), #0b2230); }
.case-next p { font-size: var(--step-1); max-width: 40rem; color: #c6d3d7; }
.case-next .btn { margin-top: 12px; }
.case-next .links { margin-top: 28px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: var(--step-0); }
.case-next .links a { color: var(--sodium); }