/* Layout: white portfolio sheet. Home grid of four identical cards, then the case study as a calm 640px reading
   column with figures stepping out to 1040px. Review notes are a separate dashed layer that can be switched off. */
:root {
  --paper: #ffffff;
  --ink: #111112;
  --ink-2: #5f5f63;      /* secondary text */
  --ink-3: #8d8d91;      /* tiny meta, arrows */
  --rule: #e4e4e1;
  --plate: #f3f3f1;      /* image ground */
  --note: #8a4b00;       /* review-note ink (amber, never used in the public layer) */
  --note-bg: #fff8ec;
  --display: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --read: 640px;
  --wide: 1040px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--display);
  -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 96px;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.mono { font: 400 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* Shared column system */
.read { max-width: var(--read); margin-inline: auto; }
.wide { max-width: var(--wide); margin-inline: auto; }
.stage-label { max-width: var(--wide); margin: 72px auto 28px; display: flex; gap: 12px; align-items: baseline; color: var(--ink-3); }
.stage-label::after { content: ""; flex: 1; border-top: 1px solid var(--rule); transform: translateY(-3px); }

/* Case study */
.crumb { color: var(--ink-3); margin-bottom: 20px; display: flex; gap: 10px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ink); }
h1.case-title {
  margin: 0; font: 500 clamp(34px, 5.6vw, 60px)/1.02 var(--display); letter-spacing: -0.035em; text-wrap: balance;
}
.standfirst { margin: 22px 0 0; font-size: clamp(19px, 2vw, 22px); line-height: 1.45; letter-spacing: -0.01em; color: #2b2b2d; }
.meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 36px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
@media (min-width: 720px) { .meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.meta dt { color: var(--ink-3); }
.meta dd { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }

.metrics { display: grid; grid-template-columns: 1fr; gap: 20px 32px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); }
@media (min-width: 620px) { .metrics { grid-template-columns: 1fr 1fr; } }
.metric .n { font: 500 32px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.metric .l { margin-top: 8px; font-size: 14px; font-weight: 500; }
.metric .def { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.metrics-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

.chapter { margin-top: 96px; }
.chapter .num { color: var(--ink-3); }
.chapter h2 { margin: 10px 0 0; font: 500 clamp(26px, 3.2vw, 34px)/1.12 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.chapter p { margin: 18px 0 0; }
.chapter p.lead-in { color: #2b2b2d; }

figure { margin: 40px auto 0; }
figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: var(--read); }
figcaption b { color: var(--ink); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font: 400 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); }
.chip.status { border-style: dashed; }

/* phone strips */
.phones { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.phones > .ph { flex: 0 0 min(64vw, 240px); scroll-snap-align: start; min-width: 0; }
@media (min-width: 900px) { .phones { overflow: visible; } .phones > .ph { flex: 1 1 0; } }
.ph .shot { border-radius: 10px; overflow: hidden; background: var(--plate); }
.ph .shot img { width: 100%; height: auto; }
.ph .cap { margin-top: 10px; display: grid; gap: 2px; }
.ph .cap .k { font: 400 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ph .cap .v { font-size: 14px; line-height: 1.4; }

.pair { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) { .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); align-items: start; } }
.pair > .side { min-width: 0; }
.own, figure, .phones { min-width: 0; max-width: 100%; }
.pair .side .k { font: 400 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.pair.even { }
@media (min-width: 760px) { .pair.even { grid-template-columns: 1fr 1fr; } }
.pair.even .side { max-width: 300px; }

.decision { color: var(--ink); max-width: var(--read); margin-top: 18px; padding: 14px 0 0; border-top: 1px solid var(--ink); font-size: 15px; line-height: 1.5; }
.decision .mono { color: var(--ink-3); display: block; margin-bottom: 6px; }

.wideshot { border-radius: 10px; overflow: hidden; background: #141218; }

/* Ownership diagram */
.own { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); }
@media (min-width: 760px) { .own { grid-template-columns: 1.25fr 1fr 1fr; } }
.lane { padding: 16px 20px 20px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
@media (min-width: 760px) { .lane { border-bottom: 0; } .lane + .lane { border-left: 1px solid var(--rule); padding-left: 20px; } }
.lane .who { display: flex; align-items: center; gap: 8px; }
.lane .who .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.lane.ai .who .dot { background: transparent; border: 1.5px solid var(--ink); }
.lane.users .who .dot { background: var(--ink-3); }
.lane h3 { margin: 0; font: 500 16px/1.3 var(--display); }
.lane ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lane li { font-size: 14px; line-height: 1.45; color: #2b2b2d; padding-left: 14px; position: relative; }
.lane li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }
.loop { list-style: none; margin: 24px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 0; counter-reset: l; }
.loop li { counter-increment: l; display: flex; align-items: baseline; font-size: 14px; }
.loop li::before { content: counter(l, decimal-leading-zero); font: 400 10.5px/1 var(--mono); color: var(--ink-3); margin-right: 6px; }
.loop li:not(:last-child)::after { content: "→"; margin: 0 12px; color: var(--ink-3); }
.loop li.back::after { content: "↺"; margin: 0 0 0 10px; color: var(--ink-3); }

.limits { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.limits li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.5; }

.next { margin-top: 96px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.next .mono { color: var(--ink-3); }
.next a { text-decoration: none; font-size: 15px; }
.next a .arr { color: var(--ink-3); font-size: 13px; margin-left: 4px; }
.next a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.top-rv { margin-top: 20px; }

body{padding:0;background:#fff}#case{padding:68px 24px 80px}#case .case-title{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,4.8vw,52px);font-weight:400;line-height:1.08;letter-spacing:-.035em}#case .chapter h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.025em}#case .chapter{padding:0;border:0;margin-bottom:0}#case .read>p{color:#515155}#case .standfirst{font-size:19px;line-height:1.55}#case .meta{max-width:none}#case .meta dd{font-size:13px}#case .chapter>figure{max-width:1040px}#case .chapter p{max-width:none}#case .wide>figcaption{margin-inline:auto}#case .decision{border-color:#ddd}#case .overview-visual{margin-top:56px}#case .overview-frame{border-radius:12px;overflow:hidden;background:#17171b;max-height:640px}#case .overview-frame img{width:100%;height:auto;object-fit:contain}#case .pair.even{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px;margin:auto}#case .pair.even .side{max-width:none}#case .wideshot{border-radius:10px}#case .next a{font-size:16px;text-decoration:none}#case .next a:hover{color:#666}#case .next .arr{font-size:13px;color:#888}#case .case-toc{display:flex;gap:10px 20px;flex-wrap:wrap;margin-block:48px 0;font-size:12px;color:#727276}#case .case-toc a{text-decoration:none}#case .case-toc a:hover{color:#111}#case .num{font-size:11px}#case .phones{overscroll-behavior-x:contain}#case .phone-link{display:block;text-decoration:none}#case .phone-link:focus-visible{outline-offset:4px}@media(max-width:600px){#case{padding:44px 20px 56px}#case .pair.even{grid-template-columns:1fr 1fr;gap:14px}#case .chapter{margin-top:64px}#case .case-toc{margin-top:30px}#case .metrics{gap:24px}#case .overview-frame{max-height:none}}

#case .exploration-note{font-size:12px;color:#85858b;line-height:1.5;margin-top:10px}#case .evidence-boundary{font-size:14px;color:#777}

/* Original product component captures; each image retains its provenance stamp. */
#case .source-note{margin-top:24px;font-size:12px;line-height:1.6;color:#7b7b80}#case .source-note .mono{font-size:10px;text-transform:none}
#case .source-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start;max-width:900px;margin:auto}#case .source-phone{min-width:0}#case .source-phones:has(>.source-phone:only-child){grid-template-columns:minmax(0,300px);justify-content:center}#case .source-phones:has(>.source-phone:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,300px));justify-content:center}
#case .source-frame{border-radius:10px;overflow:hidden;background:#f3f3f1;border:1px solid #ececeb}#case .source-frame img{width:100%;height:auto}#case .source-cap{font-size:12px;line-height:1.5;color:#727276;margin-top:10px}#case .source-desktop{max-width:860px;margin:auto;border:1px solid #ececeb;border-radius:10px;overflow:hidden}#case .source-desktop img{width:100%;height:auto}#case .voice-desktop{max-width:760px}
@media(max-width:650px){#case .source-phones{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;overscroll-behavior-x:contain}#case .source-phone{flex:0 0 min(78vw,290px);scroll-snap-align:start}#case .source-phones:has(>.source-phone:only-child){display:block;max-width:290px}#case .source-note{font-size:12px}}