/* Case layout and evidence components. Uses the same foundation as the homepage. */
.expressive-opening{max-width:var(--frame);padding:0 var(--gutter) 64px;margin:auto}.expressive-intro{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);gap:80px;align-items:center;padding:64px 0}.expressive-intro .eyebrow{margin-bottom:16px}.identity-skill{color:var(--accent);font-size:16px;font-weight:500;margin-bottom:20px}.expressive-intro h1{font-size:clamp(48px,5.5vw,78px);line-height:1.04;letter-spacing:-.045em;margin-bottom:28px}.intro-deck{font-size:23px;line-height:1.5;max-width:640px;margin-bottom:32px}.case-meta{padding:32px;background:var(--study-panel);border-radius:var(--radius-panel)}.case-meta>div+div{margin-top:24px}.case-meta dt{font-size:13px;color:var(--color-muted);margin-bottom:8px}.case-meta dd{font-size:16px;line-height:1.5}.expressive-cover .process-cover{aspect-ratio:1.9;border-radius:var(--radius-art);background:var(--case-surface)}.expressive-cover .process-cover__paper{width:22%;left:20%;top:13%;padding:2%}.expressive-cover .process-cover__screen{width:20%;left:58%;top:8%}.expressive-cover .process-cover__arrow{left:46%;width:8%}.expressive-cover .process-cover__labels{bottom:5%;left:20%;right:20%;font-size:14px}.expressive-cover figcaption{font-size:14px;color:var(--color-muted);margin-top:16px;text-align:center}
.case-layout{--case-anchor-offset:36px;max-width:var(--frame);margin:auto;padding:0 var(--gutter);display:grid;grid-template-columns:184px minmax(0,1fr);gap:64px}.case-body{min-width:0}.case-body>section[id]{scroll-margin-top:var(--case-anchor-offset)}.case-contents{position:sticky;top:32px;align-self:start;padding-top:32px;z-index:20;background:var(--study-canvas)}.case-contents-label{font-size:12px;color:var(--color-muted);padding-left:14px;margin-bottom:16px}.case-section-links{display:grid;gap:4px;max-height:calc(100dvh - 200px);overflow-y:auto;overscroll-behavior:contain;padding:5px;margin:0 -5px 24px;scrollbar-width:thin}.case-section-links a{display:flex;align-items:center;min-height:48px;padding:12px 14px;border:0;border-radius:var(--radius-control);font-size:14px;line-height:1.4;color:var(--color-muted);text-decoration:none}.case-section-links a:hover{background:var(--study-panel);color:var(--accent)}.case-section-links a[aria-current=location]{background:var(--case-surface);color:var(--accent);font-weight:600}.case-overview{display:inline-flex;align-items:center;min-height:44px;padding-inline:14px;font-size:13px;color:var(--color-muted);text-decoration:none}.case-contents-toggle{display:none}
.story-section{padding:32px 0 64px}.story-section+.story-section{padding-top:56px}.story-lead{max-width:780px}.story-lead .eyebrow{color:var(--accent);margin-bottom:16px}.story-lead h2{font-size:clamp(34px,3.5vw,48px);line-height:1.12;margin-bottom:28px;max-width:760px}.story-prose{max-width:750px;font-size:19px;line-height:1.75}.story-prose p+p{margin-top:24px}.story-prose strong{font-weight:600}.finding-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}.finding-grid article{background:var(--case-surface);padding:28px;border-radius:var(--radius-panel)}.finding-grid .eyebrow{color:var(--accent)}.finding-grid h3{font-size:27px;margin-top:16px}.finding-grid p{font-size:16px;line-height:1.6;margin-top:12px}
.diagram{padding:32px;background:var(--study-panel);border-radius:var(--radius-panel);margin-top:40px}.flow-diagram{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;padding:0}.flow-step .eyebrow{color:var(--accent)}.flow-step h3{font-size:27px;margin:16px 0 12px}.flow-step p{font-size:16px;line-height:1.6}.diagram figcaption{margin-top:28px;font-size:14px;color:var(--color-muted)}
.editorial-figure{margin-top:36px;min-width:0}.editorial-figure>a{display:block;position:relative;background:var(--study-panel);padding:16px;border-radius:var(--radius-panel);cursor:zoom-in;text-decoration:none}.editorial-figure>a::after{content:'Enlarge ↗';display:block;width:fit-content;margin:12px 0 0 auto;font-size:12px;color:var(--color-muted);padding:4px 10px;border-radius:var(--radius-pill);background:var(--study-canvas)}.editorial-figure>a:hover{outline:2px solid var(--accent);outline-offset:4px}.editorial-figure img{width:100%}.editorial-figure .crop img{max-width:none}.editorial-figure figcaption,.figure-caption{font-size:14px;line-height:1.6;color:var(--color-muted);margin-top:16px;max-width:800px}.sketch-panel{border-radius:var(--radius-panel);background:var(--study-panel);padding:36px 12%}.visual-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.screen-comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}.screen-comparison>figure{border-radius:var(--radius-panel);overflow:hidden;background:var(--study-panel);display:flex;flex-direction:column}.screen-comparison>figure:last-child{background:var(--case-surface)}.screen-label{padding:28px;min-height:130px}.screen-label span{display:block;font-size:13px;color:var(--color-muted);margin-bottom:10px}.screen-label strong{font:600 25px/1.2 var(--study-heading);letter-spacing:-.02em}.screen-mount{padding:0 24px 32px;margin-top:auto}.screen-mount .crop{max-width:244px;margin:auto;border-radius:var(--radius-control)}
.table-wrap{margin-top:40px}.story-table{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;line-height:1.6}.story-table caption{text-align:left;font-size:14px;color:var(--color-muted);padding-bottom:16px}.story-table :is(th,td){text-align:left;vertical-align:top;padding:20px 24px}.story-table thead th{font-weight:600;background:var(--case-surface);color:var(--accent);font-size:15px}.story-table thead th:first-child{border-radius:var(--radius-control) 0 0 0}.story-table thead th:last-child{border-radius:0 var(--radius-control) 0 0}.story-table tbody th{width:42%;font-weight:500}.story-table tbody :is(th,td){border-bottom:1px solid var(--color-rule)}.reflection-label{font-size:24px;color:var(--accent);margin:32px 0 12px}.reflection-label:first-child{margin-top:0}.final-flow{background:var(--case-surface);padding:32px;border-radius:var(--radius-panel)}
.optional-source{padding:32px;background:var(--study-panel);border-radius:var(--radius-panel);margin-top:32px}.optional-source>p+p{font-size:16px;margin:12px 0 24px}.case-next{max-width:var(--frame);padding:0 var(--gutter);margin:112px auto 64px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}.case-next>a:first-child{justify-self:start}.next-project{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px;border-radius:var(--radius-panel);background:var(--study-panel);text-decoration:none;min-height:144px}.next-project small{display:block;color:var(--color-muted);font-size:13px;margin-bottom:12px}.next-project strong{font:600 32px/1.15 var(--study-heading);letter-spacing:-.03em}.next-project:hover{background:var(--color-paper)}
@media(max-width:1100px){.expressive-intro{gap:40px}.case-layout{grid-template-columns:164px minmax(0,1fr);gap:36px}.finding-grid{grid-template-columns:1fr}.finding-grid article{padding:24px}.finding-grid h3{margin-top:10px}.flow-diagram{grid-template-columns:1fr;gap:28px}.story-prose{font-size:18px}.screen-label{padding:24px;min-height:128px}.screen-label strong{font-size:22px}}
@media(min-width:640px) and (max-width:839px){.expressive-intro{grid-template-columns:1fr;padding-top:40px}.case-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.case-meta:has(> div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}.case-meta>div+div{margin:0}.case-meta dd{font-size:14px}.case-layout{grid-template-columns:150px minmax(0,1fr);gap:24px}.case-section-links a{font-size:13px;padding:12px}.visual-pair{grid-template-columns:1fr;gap:0}.screen-label{padding:18px 14px;min-height:130px}.screen-label strong{font-size:19px}.screen-mount{padding:0 12px 24px}.story-table :is(th,td){padding:14px 10px;font-size:14px}.case-next{gap:24px}.next-project{padding:24px}.next-project strong{font-size:26px}}
@media(max-width:639px){.expressive-opening{padding-bottom:36px}.expressive-intro{grid-template-columns:1fr;gap:32px;padding:32px 0 40px}.expressive-intro h1{font-size:46px}.expressive-intro .eyebrow{font-size:12px}.identity-skill{font-size:14px}.intro-deck{font-size:19px}.case-meta{padding:24px}.case-meta>div{display:grid;grid-template-columns:64px 1fr;gap:16px}.case-meta dd{font-size:14px}.case-meta dt{font-size:12px;margin:0}.case-meta>div+div{margin-top:20px}.expressive-cover .process-cover{aspect-ratio:1.22}.expressive-cover .process-cover__paper{width:31%;left:9%;top:17%;padding:3%}.expressive-cover .process-cover__screen{width:31%;left:57%;top:7%}.expressive-cover .process-cover__arrow{left:43%;width:9%}.expressive-cover .process-cover__labels{left:9%;right:9%;bottom:7%;font-size:11px}.expressive-cover figcaption{font-size:12px;text-align:left}.case-layout{display:block;padding:0;--case-anchor-offset:104px}.case-body{padding-inline:var(--gutter)}.case-contents{top:0;padding:12px var(--gutter);background:var(--study-canvas)}.case-contents-inner{position:relative}.case-contents-label{padding:0}.case-contents[data-enhanced] .case-contents-label{display:none}.case-contents[data-enhanced] .case-contents-toggle{display:grid;grid-template-columns:1fr auto;gap:2px 16px;width:100%;min-height:64px;text-align:left;padding:12px 16px;border:0;border-radius:var(--radius-control);background:var(--study-panel);color:var(--color-ink)}.case-contents-toggle>span:first-child{font-size:11px;color:var(--color-muted)}.case-contents-toggle strong{grid-row:2;font-size:14px;color:var(--accent);font-weight:600}.case-contents-icon{grid-column:2;grid-row:1/3;align-self:center;font-size:24px}.case-contents[data-enhanced] .case-section-links{display:none}.case-contents[data-enhanced][data-open] .case-section-links{display:grid;position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:65dvh;overflow-y:auto;margin:0;padding:12px;background:var(--study-canvas);box-shadow:var(--study-shadow);border:1px solid var(--color-rule);border-radius:var(--radius-panel)}.case-overview{display:none}.story-section{padding:24px 0 36px}.story-section+.story-section{padding-top:36px}.story-lead h2{font-size:34px;margin-bottom:24px}.story-lead .eyebrow{font-size:12px}.story-prose{font-size:17px;line-height:1.7}.finding-grid{gap:16px;margin-top:28px}.finding-grid h3{font-size:25px}.diagram{padding:24px;margin-top:28px}.flow-step h3{font-size:25px}.visual-pair{grid-template-columns:1fr;gap:0}.editorial-figure>a{padding:12px}.editorial-figure figcaption,.figure-caption,.diagram figcaption{font-size:12px}.sketch-panel{padding:24px 6%}.screen-comparison{gap:12px;margin-top:28px}.screen-label{padding:18px 14px;min-height:122px}.screen-label strong{font-size:20px}.screen-label span{font-size:12px}.screen-mount{padding:0 12px 24px}.story-table :is(th,td){padding:16px 12px;font-size:14px}.story-table caption{font-size:12px}.final-flow{padding:20px}.optional-source{padding:24px}.optional-source>p+p{font-size:15px}.case-next{grid-template-columns:1fr;margin-block:72px 32px;gap:32px}.next-project{padding:28px}.next-project strong{font-size:30px}}
@media print{.case-contents{display:none}.case-layout{display:block;padding:0}.story-prose{max-width:none}.story-section{break-inside:auto}.case-next{display:none}}

/* Palette roles remain stable through light, dark, and nested light evidence. */
.case-identity {
  --case-accent: var(--color-rust);
  --case-on-ink: var(--color-rust-on-ink);
  --case-surface: var(--color-sheet);
}
.case-identity { --accent: var(--case-accent); }
.case-identity[data-project=jeeb] { --case-accent: var(--case-jeeb-accent); --case-on-ink: var(--case-jeeb-on-ink); --case-surface: var(--case-jeeb-surface); }
.case-identity[data-project=venmo] { --case-accent: var(--case-venmo-accent); --case-on-ink: var(--case-venmo-on-ink); --case-surface: var(--case-venmo-surface); }
.case-identity[data-project=snackme] { --case-accent: var(--case-snackme-accent); --case-on-ink: var(--case-snackme-on-ink); --case-surface: var(--case-snackme-surface); }
.case-identity[data-project=neuriva] { --case-accent: var(--case-neuriva-accent); --case-on-ink: var(--case-neuriva-on-ink); --case-surface: var(--case-neuriva-surface); }
.case-identity[data-project=wipes] { --case-accent: var(--case-wipes-accent); --case-on-ink: var(--case-wipes-on-ink); --case-surface: var(--case-wipes-surface); }
.case-identity[data-project=table] { --case-accent: var(--case-table-accent); --case-on-ink: var(--case-table-on-ink); --case-surface: var(--case-table-surface); }
.case-identity[data-project=digestive] { --case-accent: var(--case-digestive-accent); --case-on-ink: var(--case-digestive-on-ink); --case-surface: var(--case-digestive-surface); }
.ds-emphasis, .ds-decision > em { color: var(--accent); }
.ds-decision { color: inherit; }
.case-tint { background: var(--case-surface); }
.story-lead > div { min-width: 0; }
.story-lead > div > p:not(.eyebrow) { font-size: 19px; line-height: 1.75; }
.story-lead > div > p + p { margin-top: 24px; }

/* Original opening artifacts: no new covers, fabricated screens or crop changes. */
.expressive-opening > .case-artband { padding: 40px; border-radius: var(--radius-art); background: var(--case-surface); }
.case-artband .editorial-figure, .case-artband .case-hero-art { margin: 0; }
.case-artband .editorial-figure > img { width: 100%; border-radius: var(--radius-control); }
.case-artband .figure-caption { max-width: 100%; }
.expressive-opening > .identity-art { margin: 0; }
.identity-stage { position: relative; min-height: 520px; padding: 40px 32px 70px; display: flex; align-items: center; justify-content: center; background: var(--case-surface); border-radius: var(--radius-art); overflow: hidden; }
.venmo-original { width: 413px; max-width: 100%; height: auto; padding: 12px; border-radius: var(--radius-control); background: var(--illustration-white); box-shadow: var(--study-shadow); }
.stage-caption { position: absolute; bottom: 24px; left: 32px; right: 32px; display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--color-muted); }
.identity-art > figcaption { font-size: 14px; line-height: 1.6; color: var(--color-muted); margin-top: 16px; max-width: 900px; }

/* Evidence and decision patterns absent from the first SnackMe page. */
.priority-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.priority-strip > div { min-width: 0; padding: 28px; border-radius: var(--radius-panel); background: var(--case-surface); }
.priority-strip > div > span { display: block; color: var(--accent); font-size: 15px; font-weight: 500; }
.priority-strip h3 { font-size: 27px; margin-top: 16px; }
.priority-strip p { font-size: 16px; line-height: 1.6; margin-top: 12px; }
.decision-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.diagram > .decision-pair { margin-top: 0; }
.decision-pair > div { min-width: 0; padding: 24px; background: var(--study-canvas); border-radius: var(--radius-control); }
.decision-pair h3 { font-size: 27px; margin: 16px 0 12px; }
.decision-pair p { font-size: 17px; line-height: 1.65; }
.secondary-decision { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px 32px; margin-top: 40px; padding: 32px; border-radius: var(--radius-panel); background: var(--study-panel); }
.secondary-decision > .eyebrow { grid-column: 1 / -1; color: var(--accent); }
.secondary-decision h3 { font-size: 32px; line-height: 1.15; }
.secondary-decision p { font-size: 18px; line-height: 1.65; }
.secondary-decision > a { grid-column: 2; font-size: 15px; }
.flow-diagram:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figure-label { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--color-muted); margin-bottom: 16px; }
.benefit-pair .crop { border: 12px solid var(--illustration-white); }
.wide-art { margin-bottom: 44px; }
.ds-evidence-mount { max-width: 850px; }
.ds-evidence-mount .crop { border-radius: var(--radius-control); }
.note { font-size: 16px; line-height: 1.65; margin-top: 28px; padding: 24px; background: var(--study-panel); color: var(--color-muted); border-radius: var(--radius-control); }

/* Charcoal moments keep reading and interactive accents legible. A light inset
   restores its own roles instead of inheriting a light accent on a light surface. */
.ds-dark { --accent: var(--case-on-ink); margin-block: 40px 64px; padding: 40px; border-radius: var(--radius-art); background: var(--color-ink); color: var(--color-inverse-text); }
.ds-dark > .story-section { padding: 0; }
.ds-dark :is(.figure-caption, figcaption) { color: var(--color-inverse-muted); }
.ds-dark .eyebrow { color: var(--accent); }
.ds-dark .finding-grid article { background: color-mix(in srgb, var(--color-inverse-text) 8%, var(--color-ink)); color: var(--color-inverse-text); }
.ds-dark .finding-grid p { color: var(--color-inverse-muted); }
.ds-light-inset { --accent: var(--case-accent); padding: 32px; border-radius: var(--radius-panel); background: var(--study-canvas); color: var(--color-ink); }
.ds-dark .ds-light-inset :is(.figure-caption, figcaption) { color: var(--color-muted); }
.ds-dark .ds-light-inset .eyebrow { color: var(--case-accent); }
.reflection-band { margin-top: 40px; padding: 40px; border-radius: var(--radius-panel); background: var(--study-panel); }
.reflection-band .story-lead { max-width: 780px; }

/* Wipes uses the original source crops plus a labeled zero-baseline bar chart. */
.wipes-comparison { max-width: 900px; margin-inline: auto; gap: 32px; }
.wipes-comparison .crop { background: var(--illustration-white); }
.wipes-comparison .wipes-variant-art { background: var(--illustration-white); }
.result-figure { margin-top: 40px; padding: 32px; border-radius: var(--radius-panel); background: var(--case-surface); }
.result-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 30px; margin-bottom: 30px; font-size: 15px; }
.result-heading > strong { font: 650 48px/1.1 var(--study-heading); letter-spacing: -.035em; white-space: nowrap; }
.result-heading small { font: 400 14px/1.5 var(--font-ui); letter-spacing: 0; }
.result-row { display: grid; grid-template-columns: 115px minmax(0, 1fr) 75px; gap: 20px; align-items: center; margin-top: 20px; font-size: 15px; }
.result-row strong { font-weight: 600; text-align: right; }
.result-track { height: 30px; }
.result-track i { display: block; height: 100%; background: var(--accent); }
.result-row--secondary .result-track i { background: var(--color-data-secondary); }
.result-figure figcaption { font-size: 14px; line-height: 1.6; margin-top: 28px; color: var(--color-muted); }
.evidence-detail { margin-top: 32px; }
.evidence-detail > summary { padding: 20px 24px; border-radius: var(--radius-control); background: var(--study-panel); color: var(--color-ink); font-size: 16px; cursor: pointer; }
.evidence-detail > summary:hover { color: var(--accent); }
.evidence-detail[open] { padding-bottom: 24px; }

/* Optional process archive and the shorter Audiliv case. */
.case-depth { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 32px; margin-top: 40px; padding: 32px; border-radius: var(--radius-panel); background: var(--study-panel); }
.case-depth h2 { font-size: 36px; margin-top: 16px; }
.case-depth p { font-size: 17px; line-height: 1.65; margin-top: 20px; }
.document-link { display: grid; gap: 16px; padding: 24px; border-radius: var(--radius-control); background: var(--study-canvas); text-decoration: none; }
.document-link strong { font: 600 26px/1.2 var(--study-heading); letter-spacing: -.025em; }
.document-link span { color: var(--color-muted); font-size: 14px; line-height: 1.5; }
.document-link:hover strong { text-decoration: underline; }
.case-short { max-width: var(--frame); margin-inline: auto; padding-inline: var(--gutter); }
.case-short > .story-section { max-width: 1100px; margin-inline: auto; }
.case-short .story-lead { max-width: 780px; }

/* The retained More work URL is a collection, not a long case with empty navigation. */
.expressive-intro--solo { grid-template-columns: minmax(0, 1fr); gap: 0; }
.expressive-intro--solo .intro-deck { max-width: 780px; }
.archive-list { max-width: var(--frame); margin-inline: auto; padding: 0 var(--gutter) 40px; }
.archive-entry { display: grid; grid-template-columns: .65fr 1.4fr .7fr; gap: 32px; align-items: start; padding: 32px; background: var(--study-panel); border-radius: var(--radius-panel); }
.archive-entry + .archive-entry { margin-top: 24px; }
.archive-entry h2 { font-size: 34px; }
.archive-entry p { font-size: 17px; line-height: 1.65; color: var(--color-muted); margin-top: 16px; max-width: 600px; }
.archive-entry > a { display: inline-flex; align-items: center; min-height: 44px; justify-self: end; max-width: 180px; font-size: 15px; }

/* These follow all base case media rules; no ordering before them is required. */
@media (max-width: 1100px) {
  .story-lead > div > p:not(.eyebrow) { font-size: 18px; }
  .priority-strip { grid-template-columns: minmax(0, 1fr); }
  .priority-strip > div { padding: 24px; }
  .priority-strip h3 { margin-top: 10px; }
  .flow-diagram:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
  .decision-pair { grid-template-columns: minmax(0, 1fr); }
  .secondary-decision { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .secondary-decision > a { grid-column: 1; }
  .result-heading { flex-direction: column; align-items: start; }
  .case-depth { grid-template-columns: minmax(0, 1fr); }
  .archive-entry { grid-template-columns: .65fr 1.5fr; gap: 24px; }
  .archive-entry > a { grid-column: 2; justify-self: start; max-width: none; }
}
@media (min-width: 640px) and (max-width: 839px) {
  .ds-dark, .reflection-band, .secondary-decision, .case-depth { padding: 28px; }
  .wipes-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .wipes-comparison .figure-label { font-size: 12px; }
  .result-figure { padding: 24px 20px; }
  .result-row { grid-template-columns: 80px minmax(0, 1fr) 59px; gap: 10px; font-size: 13px; }
  .ds-light-inset { padding: 24px; }
}
@media (max-width: 639px) {
  .story-lead > div > p:not(.eyebrow) { font-size: 17px; line-height: 1.7; }
  .expressive-opening > .case-artband { padding: 24px; }
  .identity-stage { min-height: 0; padding: 28px 24px 66px; }
  .venmo-original { padding: 8px; }
  .stage-caption { bottom: 20px; left: 24px; right: 24px; gap: 16px; font-size: 11px; }
  .identity-art > figcaption { font-size: 12px; }
  .priority-strip { margin-top: 28px; gap: 16px; }
  .priority-strip h3 { font-size: 25px; }
  .decision-pair { margin-top: 28px; gap: 20px; }
  .decision-pair > div { padding: 20px; }
  .decision-pair h3 { font-size: 25px; }
  .decision-pair p { font-size: 16px; }
  .secondary-decision { margin-top: 28px; padding: 24px; }
  .secondary-decision h3 { font-size: 29px; }
  .secondary-decision p { font-size: 17px; }
  .figure-label { font-size: 13px; }
  .benefit-pair .crop { border-width: 8px; }
  .note { font-size: 15px; padding: 20px; }
  .ds-dark { margin-block: 28px 40px; padding: 24px; }
  .ds-light-inset { padding: 20px; }
  .reflection-band { margin-top: 28px; padding: 24px; }
  .wipes-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .wipes-comparison .figure-label { font-size: 12px; min-height: 36px; }
  .wipes-comparison figcaption { font-size: 12px; }
  .result-figure { margin-top: 28px; padding: 24px 18px; }
  .result-heading { font-size: 14px; }
  .result-heading > strong { font-size: 40px; }
  .result-heading small { font-size: 12px; }
  .result-row { grid-template-columns: 77px minmax(0, 1fr) 58px; gap: 10px; font-size: 13px; }
  .result-track { height: 24px; }
  .result-figure figcaption { font-size: 12px; }
  .evidence-detail > summary { font-size: 15px; padding: 18px 20px; }
  .case-depth { padding: 24px; gap: 24px; }
  .case-depth h2 { font-size: 32px; }
  .case-depth p { font-size: 16px; }
  .document-link { padding: 20px; }
  .document-link strong { font-size: 23px; }
  .document-link span { font-size: 12px; }
  .archive-entry { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px; }
  .archive-entry h2 { font-size: 30px; }
  .archive-entry p { font-size: 16px; }
  .archive-entry > a { grid-column: 1; }
}
@media print {
  .ds-dark { background: white; color: black; --accent: var(--case-accent); }
  .ds-dark :is(.figure-caption, figcaption, .finding-grid p) { color: var(--color-muted); }
  .ds-dark .finding-grid article { background: var(--study-panel); color: var(--color-ink); }
  .evidence-detail { break-inside: avoid; }
}

/* Contextual covers pair original screens with explanatory artwork. */
:is(.identity-stage--venmo-context, .identity-stage--jeeb-context) { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;min-height:0;padding:32px 32px 70px; }
.identity-stage--venmo-context .venmo-original {
  width: 100%;
  max-width: 440px;
  justify-self: center;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 8px 11px rgb(29 43 54 / 14%));
}
.venmo-context-illustration { width:100%;height:auto;display:block; }
@media(max-width:839px) and (min-width:640px) { :is(.identity-stage--venmo-context, .identity-stage--jeeb-context) {gap:16px;padding-inline:24px;} }
@media(max-width:639px) { :is(.identity-stage--venmo-context, .identity-stage--jeeb-context) {grid-template-columns:minmax(0,1fr);gap:28px;padding:24px 20px 64px;} .identity-stage--venmo-context .venmo-original {max-width:300px;} }

.jeeb-context-illustration { display: block; width: 100%; height: auto; }
.jeeb-cover-phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(8px, 2vw, 20px);
  width: min(100%, 418px);
  justify-self: center;
}
.jeeb-cover-phones img {
  display: block;
  width: 100%;
  height: auto;
  border: clamp(3px, .5vw, 6px) solid var(--color-ink);
  border-radius: clamp(14px, 2.2vw, 25px);
  background: var(--illustration-white);
  box-shadow: var(--study-shadow);
}
@media (max-width: 639px) {
  .jeeb-cover-phones { max-width: 312px; }
}

/* Supporting payment-note examples sit within the case prose. */
.payment-note-example {
  max-width: 640px;
  margin-block: 20px 24px;
}

.payment-note-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}

.payment-note-pair img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-control);
}

.profile-comparison {
  max-width: 520px;
  margin-top: 24px;
}

.profile-comparison > a {
  padding: 0;
  background: transparent;
}

.profile-comparison img { display: block; }

.case-hypothesis {
  margin-block: 24px 0;
  padding: 20px clamp(16px, 3vw, 28px);
  border-radius: var(--radius-control);
  background: var(--case-surface);
}

.case-hypothesis h3 {
  margin-bottom: 8px;
  color: var(--case-accent);
  font-size: 22px;
}

/* Original prototype crops with annotations that remain readable at page size. */
.prototype-example {
  display: grid;
  grid-template-columns: minmax(0, 245px) minmax(0, 546px);
  align-items: start;
  gap: clamp(20px, 4vw, 52px);
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--color-rule);
}

.prototype-example-intro h3 {
  max-width: 20ch;
  font-size: clamp(22px, 2.3vw, 30px);
}

.prototype-source-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--case-accent);
  font-size: 14px;
}

.prototype-screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 26px);
}

figcaption.titled-caption {
  margin-top: 12px;
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.5;
}

.titled-caption strong {
  display: block;
  margin-bottom: 3px;
  color: var(--case-accent);
  font-size: 16px;
}

@media (max-width: 999px) {
  .prototype-example {
    grid-template-columns: minmax(0, 546px);
    gap: 18px;
  }
  .prototype-example-intro h3 { max-width: none; }
}

/* Research evidence sits next to the measure it answers. */
.story-section .study-subhead {
  margin: 36px 0 16px;
  font: 650 clamp(22px, 2.5vw, 30px)/1.2 var(--study-heading);
}

.study-measures,
.study-quotes {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.study-measures > div,
.study-quotes > figure {
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius-panel);
  background: var(--study-panel);
}

.study-measures h4 {
  color: var(--case-accent);
  font-size: 16px;
  line-height: 1.4;
}

.study-measures dl { margin: 16px 0 0; }
.study-measures dt { font-size: 16px; font-weight: 600; }
.study-measures dt:not(:first-child) { margin-top: 12px; }
.study-measures dd { margin: 3px 0 0; font-size: 15px; line-height: 1.55; color: var(--color-muted); }
.discovery-result { max-width: 590px; }
.discovery-result > h3,
.rating-figure > h3 { font: 650 clamp(20px, 2.5vw, 26px)/1.2 var(--study-heading); }
.discovery-result .result-row { grid-template-columns: 66px minmax(0, 1fr) 49px; gap: 10px; }
.discovery-result .result-row small { display: block; font-size: 12px; color: var(--color-muted); font-weight: 400; }
.discovery-result .result-track { height: 12px; border-radius: var(--radius-pill); background: var(--study-canvas); }
.discovery-result .result-track i { border-radius: inherit; }
.discovery-result figcaption { margin-top: 16px; }
.study-note { margin-top: 16px; }
.study-subsection { margin-top: 48px; }
.study-subsection + .editorial-figure { margin-top: 22px; }

.rating-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-rule);
}
.rating-figure > h3 { margin-bottom: 12px; }
.rating-comparison h4 { font-size: 16px; line-height: 1.4; }
.rating-scale {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--color-muted);
}
.rating-line {
  position: relative;
  height: 2px;
  background: var(--color-rule);
}
.rating-line i {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.rating-line i:first-child {
  border: 2px solid var(--color-data-secondary);
  background: var(--study-canvas);
}
.rating-line i:last-child {
  background: var(--case-accent);
}
.rating-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(74px, 1fr));
  gap: 16px;
  margin: 0;
}
.rating-values dt { font-size: 12px; color: var(--color-muted); }
.rating-values dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rating-values div:last-child dd { color: var(--case-accent); }
.rating-values small { display: block; font-size: 12px; color: var(--color-muted); font-weight: 400; }
.study-quotes figcaption { margin: 0 0 10px; font-weight: 650; color: var(--case-accent); line-height: 1.4; }
.study-quotes blockquote { margin: 0; font-size: 16px; line-height: 1.55; }

@media (min-width: 960px) {
  .study-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 799px) {
  .rating-comparison { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Compare the same screen regions in each test variant. */
.test-comparison { max-width: 780px; }
.test-comparison > h3 { scroll-margin-top: var(--case-anchor-offset); }
.test-comparison > .figure-caption { margin-top: 0; }
.test-comparison > h4 {
  margin: 24px 0 10px;
  font: 650 20px/1.25 var(--study-heading);
}

.test-variant {
  min-width: 0;
  padding: clamp(10px, 2.5vw, 22px);
  border-radius: var(--radius-panel);
  background: var(--study-panel);
}
.test-variant:nth-child(2) { background: var(--case-surface); }
.test-variant figcaption.titled-caption { margin: 0 0 10px; }
.test-variant .crop { border-radius: var(--radius-control); }
.test-variant > p {
  margin-top: 10px;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.45;
}
.test-comparison-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

/* Give proposed tests equal visual weight and a shared reading order. */
.experiment-pair {
  display: grid;
  gap: clamp(16px, 3vw, 24px);
  margin-top: 32px;
}
.proposed-experiment {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--radius-panel);
  background: var(--study-panel);
}
.proposed-experiment > .eyebrow { margin-bottom: 8px; color: var(--case-accent); }
.proposed-experiment h3 { font: 650 clamp(22px, 2.3vw, 30px)/1.2 var(--study-heading); }
.proposed-experiment dl { margin: 16px 0 0; font-size: 15px; line-height: 1.5; }
.proposed-experiment dt { font-weight: 650; }
.proposed-experiment dt + dd { margin: 2px 0 12px; }
.proposed-experiment .editorial-figure { margin-top: auto; padding-top: 12px; }
.proposed-experiment .editorial-figure > a { background: var(--case-surface); }
.proposed-experiment .editorial-figure img {
  width: auto;
  height: clamp(250px, 30vw, 380px);
  object-fit: contain;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .experiment-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Focus before-and-after figures on the changed control. */
.screen-comparison--detail .screen-mount .crop { max-width: 340px; }

.screen-detail-marker { position: absolute; border: 2px solid var(--case-snackme-on-ink); border-radius: 4px; pointer-events: none; }

.expressive-intro > div > .figure-caption { max-width: 62ch; margin-bottom: 18px; font-size: 15px; }

.study-synthesis .finding-grid h3 { margin-top: 0; font-size: clamp(22px, 2.2vw, 27px); }
.study-synthesis ul { margin-top: 12px; padding-inline-start: 1.25em; }
.study-synthesis .finding-grid ul { font-size: 16px; line-height: 1.6; }
.study-synthesis li + li { margin-top: 8px; }

.case-project-name {
  margin-bottom: 16px;
  font: 650 clamp(26px, 3vw, 40px)/1.12 var(--study-heading);
  letter-spacing: -.035em;
}

.case-body .case-chapter-part { scroll-margin-top: var(--case-anchor-offset); }

.snackme-prototype { margin-top: 20px; }
.snackme-prototype iframe {
  display: block;
  width: 100%;
  height: clamp(480px, 72vh, 680px);
  margin: 16px 0 8px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-panel);
}

/* Original e-commerce artwork and optional campaign media. */
.case-project-banner { overflow: hidden; border-radius: var(--radius-art); }
.case-project-banner img { width: 100%; }
.case-video > .case-video-play {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-ink);
}
.case-video > .case-video-play::after { content: none; }
.case-video-play img { width: 100%; }
.case-video-play .action-button {
  position: absolute;
  inset: auto auto clamp(12px, 3vw, 28px) clamp(12px, 3vw, 28px);
}
.case-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-panel);
  background: var(--color-ink);
}
.case-video figcaption a { text-decoration: underline; }
.ultra-campaign-opening .expressive-intro { padding-bottom: 36px; }
.ultra-campaign-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.846fr);
  gap: 24px;
}
.ultra-amazon-comparison > a {
  padding: 0;
  overflow: hidden;
  background: var(--case-surface);
}
.ultra-amazon-comparison > a::after { content: none; }
.ultra-campaign-pair .case-video-play {
  overflow: visible;
  background: transparent;
}
.ultra-campaign-pair .case-video-play img { border-radius: var(--radius-panel); }
.ultra-campaign-pair .case-video-play .action-button {
  position: static;
  margin-top: 16px;
}
.ultra-campaign-pair .case-video iframe { aspect-ratio: 1294 / 701; }
.ultra-watch-again { margin-top: 24px; }
#campaign-video { scroll-margin-top: 24px; }
@media (max-width: 639px) {
  .ultra-campaign-pair { grid-template-columns: minmax(0, 1fr); }
}

.priority-strip.case-copy-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wipes-design-details .crop { margin-top: 16px; border-radius: 6px; }
@media (max-width: 639px) {
  .priority-strip.case-copy-pair { grid-template-columns: 1fr; }
}

/* Both Audiliv product mockups fit side by side at tablet widths. */
@media (min-width: 640px) {
  .visual-pair.audiliv-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* Jeeb explains the group workflow and the two allocation states. */
.jeeb-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.jeeb-process, .jeeb-share { background: var(--case-surface); }
.jeeb-process h3, .jeeb-share h3 { font-size: clamp(23px, 2.6vw, 32px); line-height: 1.18; }
.jeeb-process ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.jeeb-process li { position: relative; padding: 18px; border-radius: var(--radius-control); background: var(--study-canvas); }
.jeeb-process svg { display: block; margin-bottom: 12px; color: var(--case-accent); }
.jeeb-step-index { position: absolute; top: 18px; right: 18px; font-size: 13px; color: var(--case-accent); }
.jeeb-process li strong { display: block; line-height: 1.25; }
.jeeb-process li p { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.jeeb-share-item { display: flex; justify-content: space-between; gap: 12px; margin-block: 20px 12px; padding-block: 0 12px; border-bottom: 1px solid var(--color-rule); }
.jeeb-share .decision-pair { gap: 12px; }
.jeeb-share .eyebrow { color: var(--case-accent); font-weight: 600; }
.jeeb-diners { display: flex; gap: 8px; margin-block: 12px 16px; }
.jeeb-diners span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--case-jeeb-on-ink); color: var(--color-ink); font-size: 15px; font-weight: 600; }
.jeeb-cost { margin: 0; font-size: 15px; }
.jeeb-cost div { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; }
.jeeb-cost dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.jeeb-cost div:first-child { color: var(--case-accent); font-weight: 600; }
.jeeb-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jeeb-screen-frame { display: grid; justify-items: center; padding: 12px; border-radius: var(--radius-control); background: var(--case-surface); }
.jeeb-screen-frame img { display: block; width: min(100%, 248px); height: auto; border-radius: var(--radius-control); }
.jeeb-screens figcaption strong { display: block; color: var(--case-accent); margin-bottom: 4px; }
@media (min-width: 960px) {
  .jeeb-process ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .jeeb-share .decision-pair, .jeeb-screens { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .jeeb-process ol { grid-template-columns: 1fr; }
}

/* Original table renders carry the opening and the design outcomes. */
.table-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 53%;
  border-radius: var(--radius-art);
}
.table-design-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-panel);
}
.table-design-feature { grid-column: 1 / -1; }
.table-model {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  margin-top: clamp(40px, 7vw, 88px);
}
.table-model img {
  display: block;
  width: 100%;
  border-radius: var(--radius-panel);
}
.table-cover figcaption strong,
.table-design-pair figcaption strong,
.table-model figcaption strong { color: var(--color-ink); }
.table-design-pair figcaption strong,
.table-model figcaption strong {
  display: block;
  margin-bottom: 6px;
  font: 650 clamp(19px, 2vw, 25px)/1.15 var(--study-heading);
}
.table-model figcaption { margin: 0; }
.table-model figcaption p { margin-bottom: 12px; }
.table-model figcaption a { text-decoration: underline; }
@media (min-width: 800px) {
  .visual-pair.table-design-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .table-design-feature img { aspect-ratio: 16 / 10; }
}
@media (max-width: 799px) {
  .visual-pair.table-design-pair,
  .table-model { grid-template-columns: minmax(0, 1fr); }
  .table-model { gap: 16px; }
}

/* Audiliv frames the original studio mockups around the garment. */
.audiliv-cover img,
.audiliv-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
}
.audiliv-cover img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-art);
}
@media (max-width: 639px) {
  .audiliv-cover img { aspect-ratio: 4 / 3; }
}
.audiliv-studio-pair img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
}