/* =====================================================================
   CoPlanAI · case pages (portfolio/<slug>/) · 28 September 2026
   The case template Damiano chose from the case-page study ("Option C · Map"):
   the case on a dot map of its places, the engagement's record beside its own
   words, then pictures and "On the record". One template for every case, so
   its components live here rather than in 53 copies of a page <style>.
   Type and colour only from site.css tokens (FOUNDATION.md §1). Written by
   tools/case_pages.py.
   ===================================================================== */

/* 1 · head: the words on the left, the map on the right */
.cs-head{padding-top:clamp(28px,3.4vw,48px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 32px;align-items:center}
.cs-head__t{grid-column:1/7}
.cs-head--nomap .cs-head__t{grid-column:1/10}
.cs-head__t .crumb{margin-bottom:clamp(26px,3vw,40px)}
.cs-head .display{margin-top:18px;font-size:clamp(38px,3.9vw,60px);line-height:1.03}
.cs-tag{margin-top:16px;color:var(--ink-2)}
.cs-head .lede{margin-top:22px}
.cs-head__m{grid-column:7/13}

.crumb{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-ui);font-weight:var(--w-ui);font-size:15px;line-height:1.3;color:var(--ink-3);text-decoration:none;transition:color .2s}
.crumb::before{content:"\2190";transition:transform .2s}
.crumb:hover{color:var(--amber)}
.crumb:hover::before{transform:translateX(-3px)}

/* the dot map (the site's stipple, the case's countries tinted in its task ink) */
.cm{display:block;width:100%;height:auto;overflow:visible;--cm-ink:var(--ink-3);--cm-soft:var(--field-2)}
.cm--imagine{--cm-ink:var(--qi-imagine);--cm-soft:var(--qs-imagine);--cm-text:var(--qc-imagine)}
.cm--test{--cm-ink:var(--qi-test);--cm-soft:var(--qs-test);--cm-text:var(--qc-test)}
.cm--shape{--cm-ink:var(--qi-shape);--cm-soft:var(--qs-shape);--cm-text:var(--qc-shape)}
.cm--improve{--cm-ink:var(--qi-improve);--cm-soft:var(--qs-improve);--cm-text:var(--qc-improve)}
.cm-land{fill:none;stroke:var(--ink-4);stroke-opacity:.3;stroke-width:2.2;stroke-linecap:round}
.cm-in{fill:none;stroke:var(--cm-ink);stroke-opacity:.62;stroke-width:2.5;stroke-linecap:round}
.cm-lead{stroke:var(--cm-ink);stroke-width:1}
.cm-pt{fill:var(--cm-text,var(--ink))}
.cm-disc{fill:var(--cm-soft);stroke:var(--ground);stroke-width:3}
.cm-dn{font-family:var(--f-ui);font-weight:600;font-size:11.5px;fill:var(--cm-text,var(--ink));text-anchor:middle}
.cm-nm{font-family:var(--f-name);font-weight:var(--w-name);font-size:17px;fill:var(--ink)}
.cm-nm--s{font-size:13.5px}
.cm-lb{font-family:var(--f-label);font-weight:var(--w-label);font-size:10px;letter-spacing:.14em;fill:var(--ink-3)}
.cm-cty{font-family:var(--f-label);font-weight:var(--w-label);font-size:10.5px;letter-spacing:.2em;fill:var(--cm-text,var(--ink-3));text-anchor:middle}
.cm-nm,.cm-lb,.cm-cty{paint-order:stroke;stroke:var(--ground);stroke-width:5px;stroke-linejoin:round}

/* the street maps, drawn like the use-case cards' city maps (tools/case-pages/citymaps.py) */
.cs-maps{display:grid;gap:16px}
.cs-maps--2,.cs-maps--3,.cs-maps--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-maps--row{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(32px,3.6vw,52px)}
.cs-map__media{position:relative;aspect-ratio:3/2;border-radius:var(--r-img);overflow:hidden;background:var(--field);outline:1px solid var(--rule-soft);outline-offset:-1px}
.cs-maps--2 .cs-map__media,.cs-maps--3 .cs-map__media,.cs-maps--4 .cs-map__media,.cs-maps--row .cs-map__media{border-radius:var(--r-img-s)}
.cs-map__media img{width:100%;height:100%;object-fit:cover}
.cs-map__lab{position:absolute;left:10px;bottom:10px;font-family:var(--f-label);font-weight:var(--w-label);font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--ground);padding:5px 7px 4px;border-radius:4px}
.cs-map__n{position:absolute;left:12px;top:12px;z-index:1;box-shadow:0 0 0 3px var(--ground)}
.cs-credit{margin-top:10px;font-size:12.5px;line-height:1.4;color:var(--ink-4)}
.cs-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--rule)}

/* 2 · sessions (facts only) */
.cs-sess{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:16px}
.cs-sess__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:20px 0;border-top:1px solid var(--rule)}
.cs-sess__t{display:flex;flex-direction:column;gap:6px}

/* 3 · the hero picture */
.cs-hero{margin-top:clamp(36px,4vw,56px)}
.cs-hero .figure__media{display:block}

/* 4 · the engagement: its record beside its own words */
.cs-brief{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}
.cs-brief__l{grid-column:1/5;align-self:start;position:sticky;top:calc(var(--header-h) + 24px)}
.cs-brief__l .eyebrow{margin-bottom:12px}
.cs-brief__r{grid-column:6/13;min-width:0}
.cs-brief__r > * + *{margin-top:16px}
.cs-brief__r > .cs-h{margin-top:40px;margin-bottom:-4px}
.cs-brief__r > .cs-h:first-child{margin-top:0}
.cs-brief__r .lede{max-width:none}
.cs-brief__r .body{max-width:40em}
.cs-list{padding-left:1.2em;display:grid;gap:10px;max-width:40em;font-size:var(--fs-text);line-height:var(--lh-text);color:var(--c-text)}
.cs-list li::marker{color:var(--ink-4)}
.cs-list a,.cs-attr a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(20,23,28,.4)}
.cs-quote{padding-left:20px;border-left:2px solid var(--amber)}
.cs-video{position:relative;aspect-ratio:16/9;border-radius:var(--r-img);overflow:hidden;background:var(--field)}
.cs-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-brief__r > .cs-attr{margin-top:36px;padding-top:16px;border-top:1px solid var(--rule-soft)}

.rec{margin:0;display:grid}
.rec > div{display:grid;grid-template-columns:minmax(0,7.2em) minmax(0,1fr);gap:4px 18px;padding:13px 0 12px;border-top:1px solid var(--rule-soft)}
.rec > div:last-child{border-bottom:1px solid var(--rule-soft)}
.rec dt{font-family:var(--f-label);font-weight:var(--w-label);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-label);line-height:1.5;padding-top:3px}
.rec dd{margin:0;font-family:var(--f-ui);font-weight:var(--w-ui);font-size:15.5px;line-height:1.42;color:var(--ink)}
.rec__q{display:block;margin-top:6px;font-family:var(--f-q);font-weight:var(--w-q);font-style:italic;font-size:15px;color:var(--ink-3)}

/* 5 · pictures */
.cs-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:22px}
.cs-pic .figure__media{display:block;aspect-ratio:4/3}
.cs-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:32px}
.cs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cs-pair .figure__media{display:block}

/* 6 · on the record: reports · media · links */
.cs-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0 clamp(24px,2.6vw,40px);margin-top:var(--sp-head)}
.cs-col > .eyebrow{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.cs-col ol{list-style:none}
.cs-it{display:flex;flex-direction:column;gap:6px;padding:18px 0 20px;border-bottom:1px solid var(--rule-soft);text-decoration:none;color:inherit}
.cs-it__m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.cs-it__t{font-family:var(--f-name);font-weight:var(--w-name);font-size:18px;line-height:1.22;letter-spacing:var(--ls-name);color:var(--ink);transition:color .2s}
.cs-it:hover .cs-it__t{color:var(--amber)}

@media (max-width:980px){
  .cs-head__t,.cs-head--nomap .cs-head__t,.cs-head__m,.cs-brief__l,.cs-brief__r{grid-column:1/-1}
  .cs-brief__l{position:static}
  .cs-sess,.cs-cols,.cs-pairs{grid-template-columns:1fr}
  .cs-maps--row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-pics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .cs-pics,.cs-pair{grid-template-columns:1fr}
}