/* A case study's own layer. The shell, the panel and the titled block come from page.css.

   Reading text sits in the two middle columns, the way a note does, because a measure wide enough
   to span the sheet is a measure nobody finishes a paragraph in. Cards, diagrams and figures take
   the whole sheet, which is what the sheet is for: the words are something you read and the
   structures are something you look at, and they do not want the same width. */
.case-column{width:50%;margin-left:25%;display:flex;flex-direction:column;gap:14px}
@media(max-width:900px){.case-column{width:100%;margin-left:0}}

.case-co{margin:0;color:var(--line)}
.case-standfirst{margin:0;color:var(--text);max-width:34ch}
.case-h{margin:14px 0 0;color:var(--ink)}
.case-column > .case-h:first-child{margin-top:0}
.case-p{margin:0;color:var(--text);max-width:62ch}
.case-list{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px;color:var(--text)}
.case-list li::marker{color:var(--line)}

/* A pull quote: her line, set large, ruled in the band's colour. */
.case-quote{margin:10px 0;padding-left:18px;border-left:2px solid var(--line)}
.case-quote blockquote{margin:0;color:var(--ink);max-width:30ch;text-wrap:balance}
.case-quote figcaption{margin-top:8px;color:var(--text);opacity:.75}

/* The facts, under the title: four columns on the sheet, which is the grid's own quarter. */
.case-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--hairline)}
.case-fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.case-fact dt{color:var(--text);opacity:.65;margin-bottom:3px}
.case-fact dd{margin:0;color:var(--ink)}
@media(max-width:700px){.case-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

.case-hero{margin:0;display:flex;flex-direction:column;gap:8px}
.case-hero .shot{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border:1px solid var(--hairline);border-radius:var(--radius);background:#e8effc}

.case-block{gap:18px;scroll-margin-top:24px}
.case-figure{margin:0;display:flex;flex-direction:column;gap:8px}
.case-img{display:block;width:100%;height:auto;background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:var(--radius)}
.case-caption{margin:0;color:var(--text);opacity:.75;max-width:62ch}

/* Cards: numbered points, a pair, outcomes. White on bone, with the hairline every surface has. */
.case-card{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius)}
.case-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.case-num{color:var(--line)}
.case-tag{color:var(--text);opacity:.7}
.case-card-title{margin:0;color:var(--ink)}
.case-card-text{margin:0;color:var(--text)}

.case-points{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.case-points.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.case-points.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1000px){.case-points.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.case-points,.case-points.is-four,.case-points.is-two{grid-template-columns:100%}}

.case-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.case-pair.is-vs{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.case-vs{align-self:center;color:var(--line)}
.case-pair .case-card{padding:20px}
.case-pair .case-tag{align-self:flex-start}
.case-card.is-chosen{border-color:var(--line);box-shadow:inset 0 0 0 1px var(--line)}
.case-card.is-chosen .case-tag{color:var(--line);opacity:1}
@media(max-width:700px){.case-pair,.case-pair.is-vs{grid-template-columns:100%}.case-vs{justify-self:center}}

/* Rows: a decision per line, label to the left on the sheet's first quarter. */
.case-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.case-row{display:grid;grid-template-columns:25% minmax(0,1fr);column-gap:16px;row-gap:4px;padding:14px 0;border-bottom:1px solid var(--hairline)}
.case-row-tag{grid-column:1;color:var(--line);padding-top:4px}
.case-row-title{grid-column:2;color:var(--ink)}
.case-row-text{grid-column:2;color:var(--text);max-width:62ch}
.case-row:not(:has(.case-row-tag)) .case-row-title{grid-column:1}
.case-row:not(:has(.case-row-tag)) .case-row-text{grid-column:2;grid-row:1}
.case-row.is-off .case-row-title{text-decoration:line-through;text-decoration-thickness:1px;color:var(--text)}
@media(max-width:700px){.case-row{grid-template-columns:100%}.case-row > *{grid-column:1!important;grid-row:auto!important}}

.case-outcomes{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.case-outcomes.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-outcome{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--line);border-radius:var(--radius)}
.case-outcome .case-outcome-title{margin:0;color:#fff}
.case-outcome .case-card-text{color:#fff;opacity:.86}
@media(max-width:700px){.case-outcomes,.case-outcomes.is-two{grid-template-columns:100%}}

/* The way on: the next study, set large enough to be the obvious thing to do at the bottom. */
.case-next{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:20px;padding-top:24px;border-top:1px solid var(--rule)}
.case-next-link{display:flex;flex-direction:column;gap:6px;width:100%;padding:22px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);color:var(--text);transition:border-color .18s,transform .18s}
.case-next-link .t-eyebrow{color:var(--line)}
.case-next-title{color:var(--ink)}
.case-next-link:hover,.case-next-link:focus-visible{border-color:var(--line);transform:translateY(-2px)}

/* ---------------------------------------------------------------- diagrams */
.dg{position:relative;display:flex;align-items:stretch;gap:0;padding:28px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius)}
.dg-node{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 16px;background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:var(--radius)}
.dg-sub{color:var(--text);opacity:.7}
.dg-title{color:var(--ink)}
.dg-text{color:var(--text)}
.dg-node.is-muted{background:transparent;border-style:dashed;border-color:var(--rule)}
.dg-node.is-hub{background:var(--line);border-color:var(--line)}
.dg-node.is-hub .dg-sub,.dg-node.is-hub .dg-title,.dg-node.is-hub .dg-text{color:#fff;opacity:1}
.dg-node.is-hub .dg-sub{opacity:.75}
/* A stack reads as many: two offset edges behind the card. */
.dg-node.is-stack{box-shadow:5px 5px 0 -1px var(--surface-sunk),5px 5px 0 0 var(--rule),10px 10px 0 -1px var(--surface-sunk),10px 10px 0 0 var(--rule)}

/* A wire between two nodes, with its label riding on it. */
.dg-link{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 112px;min-height:28px}
.dg-wire{position:absolute;left:6px;right:6px;top:50%;height:0;border-top:1.5px solid var(--line)}
.dg-wire::after{content:"";position:absolute;right:-1px;top:-5px;border:4.5px solid transparent;border-left:7px solid var(--line);border-right:0}
.dg-link.is-both .dg-wire::before{content:"";position:absolute;left:-1px;top:-5px;border:4.5px solid transparent;border-right:7px solid var(--line);border-left:0}
.dg-label{position:relative;z-index:1;max-width:104px;padding:2px 6px;text-align:center;background:var(--surface);color:var(--line)}
.dg-foot{position:absolute;left:28px;bottom:10px;margin:0;color:var(--text);opacity:.7}

.dg-manual{align-items:center;padding-bottom:44px}
.dg-manual > .dg-node{flex:0 0 auto;max-width:200px}
.dg-sites{display:grid;grid-template-columns:repeat(3,auto);gap:6px;flex:1;justify-content:start}
.dg-site{display:grid;place-items:center;width:64px;height:40px;border:1px dashed var(--rule);border-radius:var(--radius);color:var(--text);
  animation:dg-arrive 6s linear infinite;animation-delay:calc(var(--i) * .8s)}
@keyframes dg-arrive{0%,4%{opacity:.25;border-style:dashed}9%,90%{opacity:1;border-style:solid;border-color:var(--line);color:var(--line)}100%{opacity:.25}}

.dg-currents{align-items:center}
.dg-from{display:flex;flex-direction:column;gap:8px;flex:1}
.dg-currents > .dg-node.is-hub{flex:0 0 32%}
.dg-link.is-merge{flex-basis:72px}

.dg-surfaces{flex-wrap:wrap;align-items:center;row-gap:18px}
.dg-surfaces > .dg-node{flex:1 1 0}
.dg-return{display:flex;justify-content:space-between;gap:12px;width:100%;padding-top:12px;border-top:1.5px dashed var(--rule)}
.dg-return .dg-label{max-width:none;padding:0;background:none}
.dg-return .dg-label:first-child::before{content:"← "}

.dg-downstream{flex-direction:column;gap:14px;padding-bottom:52px}
.dg-inputs{display:flex;flex-wrap:wrap;gap:6px}
.dg-chip{padding:5px 9px;border:1px solid var(--rule);border-radius:999px;color:var(--text)}
.dg-chain{display:flex;align-items:stretch}
.dg-chain > .dg-node{flex:1 1 0}
.dg-chain > .dg-link{flex-basis:64px}
.dg-downstream .dg-foot{color:var(--ink);opacity:1}

/* The design's own frames, composed where the design places them. */
.dg-shot{position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden;background:#f6f7f9;border:1px solid var(--hairline);border-radius:var(--radius)}
.dg-shot img{position:absolute;display:block}
.dg-shot img.is-drawer{box-shadow:-18px 0 40px -18px rgba(0,0,0,.28)}

@media(max-width:820px){
  .dg{flex-direction:column;align-items:stretch;padding:18px}
  .dg-link{flex-basis:44px;min-height:44px}
  .dg-wire{left:50%;right:auto;top:4px;bottom:4px;height:auto;border-top:0;border-left:1.5px solid var(--line)}
  .dg-wire::after{right:auto;top:auto;bottom:-1px;left:-5px;border:4.5px solid transparent;border-top:7px solid var(--line);border-bottom:0}
  .dg-link.is-both .dg-wire::before{left:-5px;top:-1px;border:4.5px solid transparent;border-bottom:7px solid var(--line);border-top:0}
  .dg-label{max-width:none}
  .dg-manual > .dg-node,.dg-currents > .dg-node.is-hub{max-width:none;flex-basis:auto}
  .dg-sites{grid-template-columns:repeat(3,1fr)}
  .dg-site{width:auto}
  .dg-chain{flex-direction:column}
  .dg-chain > .dg-link{flex-basis:36px}
  .dg-foot{position:static;margin-top:10px}
  .dg-manual,.dg-downstream{padding-bottom:18px}
}
@media(prefers-reduced-motion:reduce){.dg-site{animation:none;opacity:1}}

/* ---------------------------------------------------------------- media, from her earlier work */
.case-lead{color:var(--text)}
.case-note{margin:4px 0 0;color:var(--text);opacity:.7;max-width:62ch}
video.case-img{background:#111}
.case-hero .case-img{border-radius:var(--radius)}

/* A gallery takes the sheet and splits it into as many columns as the block asks for. A lead
   gallery gives its first picture the whole row, the way a brand book opens on its cover. */
.case-gallery{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:10px;align-items:start}
.case-gallery.has-lead > :first-child{grid-column:1 / -1}
@media(max-width:820px){.case-gallery{grid-template-columns:repeat(min(var(--cols,2),2),minmax(0,1fr))}}
@media(max-width:520px){.case-gallery{grid-template-columns:100%}}
.case-gallery[style*="--cols: 6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:820px){.case-gallery[style*="--cols: 6"]{grid-template-columns:repeat(3,minmax(0,1fr))}}

.case-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.case-stat{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius)}
.case-stat-value{color:var(--line)}
.case-stat dd{margin:0;color:var(--text)}
@media(max-width:700px){.case-stats{grid-template-columns:100%}}

.case-voices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.case-voice{justify-content:space-between}
@media(max-width:900px){.case-voices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.case-voices{grid-template-columns:100%}}

/* The ask at the end of a pictures-only study. */
.case-reach{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding:28px 0 8px;border-top:1px solid var(--rule)}
.case-reach h2{margin:0;color:var(--ink)}
.case-reach p{margin:0;color:var(--text)}
.case-reach-link{color:var(--line);border-bottom:1px solid currentColor}

/* The headline is the outcome, so it gets the room a title would. */
.case-impact{max-width:28ch;text-wrap:balance}
.case-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0}
.case-summary-cell{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--hairline)}
.case-summary-cell dt{color:var(--line)}
.case-summary-cell dd{margin:0;color:var(--text)}
@media(max-width:820px){.case-summary{grid-template-columns:100%;gap:16px}}