@import url('fonts.css');
/* The draft reproduces source relationships and reading order; no shared layout is changed. */
.spread.case-layout { height:100svh; min-height:0; padding:clamp(28px,3vw,56px) clamp(28px,4vw,76px); gap:clamp(16px,1.5vw,28px); background:var(--r-field); color:var(--r-ink); }
.case-layout h1 { margin:0; font:500 clamp(30px,3vw,56px)/1.16 var(--font-serif); letter-spacing:-.015em; color:var(--r-head); }
.case-layout h1 em { color:var(--r-accent); }
.case-layout h2,.case-layout h3 { margin:0; font:500 clamp(18px,1.6vw,30px)/1.2 var(--font-serif); color:inherit; }
.case-layout p,.case-layout li { margin:0; font:300 clamp(16px,1.18vw,23px)/1.4 var(--font-sans); }
.case-layout .label { font:400 clamp(12px,.88vw,17px)/1.3 var(--font-mono); letter-spacing:.04em; color:inherit; }
.case-layout .sample-note { margin-top:auto; padding-top:12px; font:400 11px/1.5 var(--font-mono); color:var(--r-ink); }
.case-layout .mono { font-family:var(--font-mono); }
.case-layout .generative { display:block; padding-top:8px; font:400 11px/1.4 var(--font-mono); letter-spacing:.08em; color:var(--r-ink); }
.case-layout ul { margin:0; padding-left:1.1em; display:grid; gap:clamp(10px,1vw,20px); }
.case-layout .plate { background:var(--r-card); color:var(--r-card-ink); }
.case-layout .band { background:var(--r-band); color:var(--r-band-ink); }

/* Four stages remain parallel columns; merged bands show which content spans two stages. */
[data-case-kind="audience-journey"] header { text-align:center; display:grid; gap:16px; }
[data-case-kind="audience-journey"] header p { max-width:80ch; margin:auto; }
[data-case-kind="audience-journey"] .journey { flex:1; min-height:0; display:grid; grid-template-columns:.6fr repeat(4,1fr); grid-template-rows:auto 1fr auto 1.35fr; gap:clamp(12px,1.2vw,24px); }
[data-case-kind="audience-journey"] .stage { padding:12px; text-align:center; font:400 clamp(14px,1.1vw,21px)/1.2 var(--font-mono); letter-spacing:.03em; }
[data-case-kind="audience-journey"] .axis { align-self:center; font:400 clamp(12px,.88vw,17px)/1.3 var(--font-mono); text-transform:uppercase; }
[data-case-kind="audience-journey"] .mindset { padding:12px 8px; align-self:center; text-align:center; position:relative; }
[data-case-kind="audience-journey"] .mindset:not(.last)::after { content:""; position:absolute; top:50%; right:-18px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:9px solid var(--r-accent); }
[data-case-kind="audience-journey"] .content-band { grid-column:span 2; padding:16px 24px; text-align:center; }
/* Shared paragraph inheritance must not replace the ink owned by a contrasting band. */
[data-case-kind="audience-journey"] p.content-band { color:var(--r-band-ink)!important; }
[data-case-kind="audience-journey"] .tactic { padding:20px 22px; display:grid; align-content:start; gap:16px; }
[data-case-kind="audience-journey"] .tactic p { line-height:1.5; }
[data-case-kind="audience-journey"] .mobile-stage { display:none; }

/* The story matrix preserves three angle columns and the common outlet row below them. */
[data-case-kind="story-planning"] h1 { text-align:center; }
[data-case-kind="story-planning"] .stories { flex:1; min-height:0; display:grid; grid-template-columns:.62fr repeat(3,1fr); grid-template-rows:auto auto 1.5fr .9fr auto; gap:2px; }
[data-case-kind="story-planning"] .row-name { padding:15px; font:400 clamp(13px,.95vw,18px)/1.3 var(--font-mono); }
[data-case-kind="story-planning"] .theme { grid-column:span 3; padding:14px 18px; text-align:center; font:500 clamp(18px,1.65vw,30px)/1.2 var(--font-serif); }
[data-case-kind="story-planning"] .angle { padding:12px 20px; text-align:center; font:500 clamp(17px,1.3vw,25px)/1.2 var(--font-serif); }
[data-case-kind="story-planning"] .story-cell { padding:clamp(16px,1.7vw,32px); }
[data-case-kind="story-planning"] .outlets { grid-column:span 3; padding:16px 24px; }
[data-case-kind="story-planning"] .mobile-angle { display:none; }

/* Two stacked scenes preserve the source's explanation-to-illustration split. */
[data-case-kind="activation-detail"] .activation { flex:1; min-height:0; display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(28px,4vw,76px); }
[data-case-kind="activation-detail"] .explanation { display:flex; flex-direction:column; gap:clamp(18px,1.8vw,34px); }
[data-case-kind="activation-detail"] h1 { font-size:clamp(30px,2.8vw,52px); }
[data-case-kind="activation-detail"] .lead { font:500 clamp(17px,1.35vw,25px)/1.4 var(--font-serif); }
[data-case-kind="activation-detail"] .beat { display:grid; gap:10px; }
[data-case-kind="activation-detail"] .beat .label { text-transform:uppercase; }
[data-case-kind="activation-detail"] .scenes { display:grid; grid-template-rows:1fr 1fr; min-height:0; gap:16px; padding:20px; background:var(--r-band); }
[data-case-kind="activation-detail"] .scene { min-height:0; display:flex; flex-direction:column; }
[data-case-kind="activation-detail"] .scene img { width:100%; min-height:0; flex:1; object-fit:cover; }
[data-case-kind="activation-detail"] .scene figcaption { padding-top:8px; font:400 11px/1.5 var(--font-mono); color:var(--r-band-ink); }

/* Both alternatives use the same content and region counts, so art direction is the comparison. */
[data-case-kind="treatment-comparison"] .treatments { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,76px); }
[data-case-kind="treatment-comparison"] .treatment { min-height:0; display:flex; flex-direction:column; gap:16px; }
[data-case-kind="treatment-comparison"] .treatment-header { display:flex; align-items:baseline; gap:18px; }
[data-case-kind="treatment-comparison"] .website { flex:1; min-height:0; padding:clamp(16px,1.5vw,28px); display:grid; grid-template-rows:auto 1fr auto 1fr; gap:14px; border:1px solid var(--r-rule); }
[data-case-kind="treatment-comparison"] .website.lively { background:var(--r-plate); color:var(--r-plate-ink); }
[data-case-kind="treatment-comparison"] .website.calm { background:var(--r-card); color:var(--r-card-ink); }
[data-case-kind="treatment-comparison"] .web-top { display:flex; align-items:center; justify-content:space-between; font:400 clamp(11px,.8vw,15px)/1.3 var(--font-mono); }
[data-case-kind="treatment-comparison"] .web-hero { min-height:0; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:16px; }
[data-case-kind="treatment-comparison"] .hero-copy { display:flex; flex-direction:column; justify-content:center; gap:12px; }
[data-case-kind="treatment-comparison"] .web-hero img { width:100%; height:100%; min-height:0; object-fit:cover; }
[data-case-kind="treatment-comparison"] .web-cta { padding:10px 12px; font:400 12px/1.2 var(--font-mono); background:var(--r-band); color:var(--r-band-ink); align-self:flex-start; }
[data-case-kind="treatment-comparison"] .web-title { font:500 clamp(19px,1.85vw,35px)/1.12 var(--font-serif); }
[data-case-kind="treatment-comparison"] .web-lines { font:300 clamp(13px,1vw,18px)/1.35 var(--font-sans); }
[data-case-kind="treatment-comparison"] .web-lower { min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
[data-case-kind="treatment-comparison"] .web-lower figure { min-height:0; display:flex; flex-direction:column; gap:8px; }
[data-case-kind="treatment-comparison"] .web-lower img { min-height:0; flex:1; width:100%; object-fit:cover; }
[data-case-kind="treatment-comparison"] .web-lower figcaption { font:400 11px/1.4 var(--font-mono); color:inherit; }
[data-case-kind="treatment-comparison"] .calm .web-hero { grid-template-columns:1fr 1fr; }
[data-case-kind="treatment-comparison"] .calm .website { gap:20px; }

/* Dense matrices gain page height on tablet rather than hiding copy to keep a slide ratio. */
@media(min-width:761px) and (max-width:1100px) {
 [data-case-kind="audience-journey"].case-layout,[data-case-kind="story-planning"].case-layout { height:auto; min-height:100svh; }
 [data-case-kind="audience-journey"] .journey { grid-template-rows:repeat(4,auto); }
 [data-case-kind="story-planning"] .stories { grid-template-rows:repeat(5,auto); }
}
/* Mobile retains every semantic unit; matrices become labelled groups rather than tiny tables. */
@media(max-width:760px) {
 .spread.case-layout { height:auto; min-height:100svh; padding:28px 20px; gap:24px; }
 .case-layout h1 { font-size:30px; }
 .case-layout p,.case-layout li { font-size:16px; }
 [data-case-kind="audience-journey"] .journey { display:flex; flex-direction:column; gap:12px; }
 [data-case-kind="audience-journey"] .stage { font-size:17px; }
 [data-case-kind="audience-journey"] .mindset::after { display:none; }
 [data-case-kind="audience-journey"] .mobile-stage { display:block; margin-bottom:8px; font-family:var(--font-mono); font-size:13px; }
 [data-case-kind="audience-journey"] .axis { align-self:start; padding-top:10px; }
 [data-case-kind="story-planning"] .stories { display:flex; flex-direction:column; gap:2px; }
 [data-case-kind="story-planning"] .row-name { padding:14px 16px; }
 [data-case-kind="story-planning"] .angle { text-align:left; }
 [data-case-kind="story-planning"] .mobile-angle { display:block; margin-bottom:12px; font-family:var(--font-mono); font-size:13px; }
 [data-case-kind="story-planning"] .story-cell { padding:20px; }
 [data-case-kind="activation-detail"] .activation { grid-template-columns:1fr; }
 [data-case-kind="activation-detail"] .scenes { min-height:600px; }
 [data-case-kind="treatment-comparison"] .treatments { grid-template-columns:1fr; }
 [data-case-kind="treatment-comparison"] .website { min-height:600px; }
 [data-case-kind="treatment-comparison"] .web-title { font-size:24px; }
 [data-case-kind="treatment-comparison"] .web-lines { font-size:16px; }
}
@media print { .spread.case-layout { height:7.5in; width:13.333in; break-after:page; print-color-adjust:exact; } }

/* A fourth complete story angle extends every mapped row, preserving common theme and outlet bands. */
[data-case-kind="story-planning"][data-item-count="4"] .stories {grid-template-columns:.62fr repeat(4,1fr)}
[data-case-kind="story-planning"][data-item-count="4"] .theme,[data-case-kind="story-planning"][data-item-count="4"] .outlets {grid-column:span 4}
@media(max-width:760px){[data-case-kind="story-planning"][data-item-count="4"] .stories{display:flex}}