/* ==========================================================================
   case-study.css — shared layout for /work/<slug>/ pages.
   Page-specific visuals go in /assets/css/cs/<slug>.css (owned by that page).
   ========================================================================== */

/* ---------- Hero ---------- */
.cs-hero { padding-top: calc(72px + clamp(48px, 8vw, 112px)); padding-bottom: clamp(48px, 7vw, 96px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: clamp(28px, 4vw, 48px); }
.crumbs a { color: var(--muted); transition: color .3s; }
.crumbs a:hover { color: var(--signal-ink); }
.crumbs .sep { color: var(--line-strong); }

.cs-hero__grid { display: grid; gap: clamp(40px, 6vw, 80px); }
@media (min-width: 1000px) { .cs-hero__grid { grid-template-columns: 1.45fr 1fr; align-items: end; } }
.cs-hero__title { font-size: var(--fs-h1); }
.cs-hero__dek { margin-top: 1.5rem; }
.cs-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; align-items: center; }

/* the hero metric panel */
.cs-kpi {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow);
}
.cs-kpi__value { font: 400 clamp(4.5rem, 11vw, 8.5rem)/.85 var(--font-serif); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-kpi__value .unit { font-size: .5em; letter-spacing: -.02em; }
.cs-kpi__value .accent { color: var(--signal); }
.cs-kpi__label { margin-top: .75rem; color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
.cs-kpi__def { margin-top: .35rem; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.cs-kpi .compare { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px dashed var(--line-strong); }

/* meta strip under hero */
.cs-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--gutter);
  margin-top: clamp(48px, 7vw, 88px); padding-top: 1.5rem; border-top: 1px solid var(--line);
}
@media (min-width: 800px) { .cs-meta { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cs-meta dt { font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cs-meta dd { margin-top: .4rem; color: var(--ink); font-size: .95rem; line-height: 1.4; }

/* TL;DR toggle */
.tldr-toggle {
  display: inline-flex; align-items: center; gap: .7rem; height: 52px; padding: 0 1.1rem 0 .55rem;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 500 .9rem/1 var(--font-sans); color: var(--ink); transition: background-color .3s;
}
.tldr-toggle:hover { background: var(--paper-2); }
.tldr-toggle__switch {
  position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong);
  transition: background-color .35s var(--ease-out);
}
.tldr-toggle__switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .45s var(--ease-out);
}
.tldr-toggle[aria-pressed="true"] .tldr-toggle__switch { background: var(--signal); }
.tldr-toggle[aria-pressed="true"] .tldr-toggle__switch::after { transform: translateX(16px); }
.tldr-toggle .mono { margin-left: .1rem; }

/* ---------- At a glance (always visible, this IS the TL;DR) ---------- */
.glance { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
@media (min-width: 760px) { .glance { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .glance { grid-template-columns: repeat(4, 1fr); } }
.glance__cell { padding: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--line); display: grid; gap: .8rem; align-content: start; }
@media (min-width: 760px) { .glance__cell { border-right: 1px solid var(--line); } }
.glance__cell:last-child { border-right: 0; }
.glance__cell p { color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.glance__cell--result { background: var(--signal-soft); }
.glance__cell--result p { color: var(--ink); }
.tldr-banner { display: none; }
.tldr-mode .tldr-banner {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong);
}

/* ---------- Body: sticky TOC + chapters ---------- */
.cs-body { display: grid; gap: var(--gutter); padding-top: clamp(64px, 9vw, 120px); }
@media (min-width: 1100px) { .cs-body { grid-template-columns: 200px minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); } }
.toc { display: none; }
@media (min-width: 1100px) {
  .toc { display: block; position: sticky; top: 112px; align-self: start; }
  .toc ol { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .15rem; counter-reset: toc; }
  .toc a {
    display: flex; gap: .8rem; padding: .45rem 0; color: var(--muted); font-size: .9rem; counter-increment: toc;
    transition: color .3s, transform .4s var(--ease-out);
  }
  .toc a::before { content: counter(toc, decimal-leading-zero); font: 500 .72rem/1.9 var(--font-mono); color: var(--line-strong); transition: color .3s; }
  .toc a:hover { color: var(--ink); }
  .toc a[aria-current] { color: var(--ink); transform: translateX(4px); }
  .toc a[aria-current]::before { color: var(--signal); }
  .tldr-mode .toc [data-detail-link] { opacity: .3; pointer-events: none; }
}

.chapter { padding-bottom: clamp(64px, 9vw, 120px); scroll-margin-top: 96px; }
.chapter + .chapter { padding-top: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); }
.chapter__head { display: grid; gap: 1rem; margin-bottom: clamp(28px, 4vw, 44px); max-width: 860px; }
.chapter__head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.tldr-mode [data-detail] { display: none !important; }

/* two-column: prose + margin notes */
.with-notes { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .with-notes { grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(32px, 4vw, 64px); align-items: start; } }
.with-notes aside { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) { .with-notes aside { position: sticky; top: 120px; } }

/* pull quote — the user insight */
.pullquote { position: relative; margin: clamp(32px, 5vw, 56px) 0; padding-left: clamp(20px, 3vw, 40px); border-left: 2px solid var(--signal); max-width: 860px; }
.pullquote blockquote { font: italic 400 clamp(1.6rem, 3vw, 2.4rem)/1.2 var(--font-serif); color: var(--ink); letter-spacing: -.015em; }
.pullquote figcaption { margin-top: 1rem; }

/* numbered list of problems / moves */
.points { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; counter-reset: pt; }
@media (min-width: 760px) { .points--3 { grid-template-columns: repeat(3, 1fr); } .points--2 { grid-template-columns: repeat(2, 1fr); } }
.point { background: var(--surface); padding: clamp(20px, 2.4vw, 30px); counter-increment: pt; display: grid; gap: .6rem; align-content: start; }
.point::before { content: counter(pt, decimal-leading-zero); font: 500 var(--fs-mono)/1 var(--font-mono); color: var(--signal-ink); letter-spacing: .08em; }
.point h3 { font-size: 1.1rem; }
.point p { font-size: .96rem; color: var(--ink-2); line-height: 1.55; }

/* bespoke figure frame — each page drops its interactive visual in here */
.figure { margin-top: clamp(32px, 5vw, 56px); }
.figure__frame {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--paper-2);
  padding: clamp(20px, 4vw, 48px); overflow: hidden;
}
.figure__frame--plain { background: var(--surface); }
.figure figcaption { display: flex; gap: .75rem; margin-top: .9rem; font-size: .88rem; color: var(--muted); }
.figure figcaption .mono { color: var(--signal-ink); flex: none; }

/* metric definition card — Urmi's signature: how the number was measured */
.metric-def { border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.metric-def__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: center; padding: 1rem clamp(20px, 2.4vw, 28px); background: var(--ink); color: var(--paper); }
.metric-def__head .mono { color: color-mix(in srgb, var(--paper) 65%, transparent); }
.metric-def__head strong { font: 400 1.35rem/1.2 var(--font-serif); letter-spacing: -.01em; }
.metric-def dl { display: grid; margin: 0; }
@media (min-width: 760px) { .metric-def dl { grid-template-columns: repeat(2, 1fr); } }
.metric-def dl > div { padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--line); display: grid; gap: .45rem; align-content: start; }
@media (min-width: 760px) { .metric-def dl > div:nth-child(odd) { border-right: 1px solid var(--line); } }
.metric-def dt { font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.metric-def dd { color: var(--ink); font-size: .98rem; line-height: 1.5; }
.metric-def__why { padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--line); background: var(--signal-soft); color: var(--ink); font-size: .98rem; line-height: 1.55; }
.metric-def__why .mono { display: block; margin-bottom: .4rem; color: var(--signal-ink); }

/* results row */
.results { display: grid; gap: var(--gutter); }
@media (min-width: 760px) { .results { grid-template-columns: repeat(3, 1fr); } }
.results .metric { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }

/* guardrails — counter-metrics */
.guardrails { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 760px) { .guardrails { grid-template-columns: repeat(3, 1fr); } }
.guardrail { background: var(--surface); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: .6rem; align-content: start; }
.guardrail__status { display: inline-flex; align-items: center; gap: .45rem; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.guardrail__status::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.guardrail h3 { font-size: 1.05rem; }
.guardrail p { font-size: .95rem; color: var(--ink-2); line-height: 1.55; }

/* reflection */
.reflection { font: 400 clamp(1.5rem, 2.8vw, 2.2rem)/1.25 var(--font-serif); color: var(--ink); letter-spacing: -.015em; max-width: 30ch; }

/* ---------- Next case study ---------- */
.next-cs { display: block; border-top: 1px solid var(--line); padding-block: clamp(64px, 10vw, 140px); }
.next-cs__inner { display: grid; gap: 1.25rem; }
.next-cs__title { font: 400 var(--fs-h1)/1 var(--font-serif); color: var(--ink); letter-spacing: -.035em; transition: color .4s; }
.next-cs__title .arrow-lg { display: inline-block; width: .7em; height: .7em; vertical-align: middle; transition: transform .6s var(--ease-out); }
.next-cs:hover .next-cs__title { color: var(--signal-ink); }
.next-cs:hover .arrow-lg { transform: translateX(.15em) rotate(-45deg); }
.next-cs__meta { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Reusable UI-mock primitives (phones, panels) ---------- */
.phone {
  position: relative; width: min(100%, 300px); aspect-ratio: 9 / 19; margin-inline: auto;
  border-radius: 40px; padding: 10px; background: #111; box-shadow: 0 30px 60px -24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone__screen { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: #fbf9f4; color: #15140f; font-size: 13px; line-height: 1.4; }
.phone__screen--dark { background: #121210; color: #efebe2; }
.phone__notch { position: absolute; top: 8px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%); border-radius: 999px; background: #111; z-index: 2; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }

/* segmented control used by interactive figures */
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.seg button { height: 34px; padding: 0 .95rem; border-radius: 999px; font: 500 .82rem/1 var(--font-sans); color: var(--muted); transition: color .3s, background-color .3s; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.seg button:hover:not([aria-pressed="true"]):not([aria-selected="true"]) { color: var(--ink); }