/* No, Pero Why? case pages (/cases/<slug>/), the case directory (/cases/) and the list of all cases (/cases/archive/).
   Markup: case_page.py and season_one.hub()/archive(). Spec: production/case-page-spec.md §9.1.
   Linked last on every page (build.py EXTRA_CSS), after release.css.

   The case page keeps the site's own look: a bold two-column opening (hook headline and the hero with a white sticker
   outline), the royal-blue bar of four steps, big Clash Display heads with a conversational kicker, the pink group
   chat, the blue and pink two-person panel, the scene viewer, yellow companion cards, navy outlines with offset
   shadows and the closing yellow band.
   Calm rules:
   - One or two strong colored elements per screen. Key terms, sources and optional material stay quiet.
   - Text is ink or white on ink/blue only. No gray, no opacity on text. Labels may use the brand pink.
   - Text uses the width of its column. Grids stack on phones. Nothing scrolls sideways.
   - The step bar is sticky but short, and every anchor target leaves room for it (scroll-margin), so it never covers what you jumped to.
   - Separators and arrows are drawn by CSS shapes or the site's SVG icons, never by text glyphs.
   Every rule starts with #main so it wins over the older, long selectors in genz.css and friends. */

:root{
  --cs-ink:var(--r-ink,#142b46); --cs-blue:var(--r-blue,#124dec); --cs-blue-dark:var(--r-blue-dark,#0b37b0);
  --cs-gold:var(--r-gold,#ffdc52); --cs-pink:var(--r-pink,#c2185b); --cs-line:var(--r-line,#c9d4ea);
  --cs-quiet:var(--r-tint-quiet,#f4f7ff); --cs-warm:var(--r-tint-warm,#fff6d6);
  --cs-blue-tint:#eaf0ff; --cs-pink-tint:#ffeef5; --cs-yellow:#ffd84a; --cs-shadow-blue:#bccbf7; --cs-shadow-pink:#f3a9c8;
  --cs-radius:20px; --cs-radius-sm:14px; --cs-gap:clamp(40px,5vw,72px);
  --cs-lift:4px 5px 0 var(--cs-ink);
  --cs-bar-h:72px;
  --cs-display:var(--display,'Clash Display','Satoshi',system-ui,sans-serif);
}
@media (max-width:1099px){:root{--cs-bar-h:60px}}

/* ---------- 1. Page frame: lines up with the site header at every width ---------- */
#main .cs-page{box-sizing:border-box;width:min(1240px,calc(100% - 96px));margin:0 auto;padding:clamp(20px,2.4vw,32px) 0 56px;
  color:var(--cs-ink);display:block;background:none;border:0;box-shadow:none}
@media (max-width:1100px){#main .cs-page{width:calc(100% - 64px)}}
@media (max-width:760px){#main .cs-page{width:calc(100% - 32px);padding-top:16px}}
#main .cs-page *{box-sizing:border-box}
#main .cs-main{min-width:0}
#main .cs-page :is(.cs-sec,.cs-step,.cs-head,[id]){scroll-margin-top:calc(var(--cs-bar-h) + 20px)}

/* ---------- 1a. The step bar: royal blue, the current step is a white tab. Sticky, short, never over an anchor target. ---------- */
#main .cs-bar{position:sticky;top:10px;z-index:25;margin:0 0 clamp(28px,3vw,40px);padding:8px;border-radius:22px;background:var(--cs-blue);
  box-shadow:0 0 0 6px #fff}
#main .cs-bar ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#main .cs-bar li{margin:0!important;padding:0!important;min-width:0}
#main .cs-bar li::marker{content:none}
#main .cs-bar a{display:flex;align-items:center;gap:.35em;height:100%;min-height:48px;padding:10px 16px;border-radius:15px;color:#fff!important;
  text-decoration:none!important;font:750 1rem/1.25 var(--body,'Satoshi',sans-serif);white-space:normal}
#main .cs-bar a:hover{background:var(--cs-blue-dark)}
#main .cs-bar a[aria-current]{background:#fff;color:var(--cs-blue)!important}
#main .cs-bar a:focus-visible{outline:3px solid var(--cs-gold);outline-offset:2px}
#main .cs-bar .cs-bar-short{display:none}
@media (max-width:1099px){
  #main .cs-bar{top:6px;padding:5px;border-radius:16px;margin-inline:-4px}
  #main .cs-bar ol{gap:4px}
  #main .cs-bar a{min-height:44px;padding:6px 10px;border-radius:12px;font-size:.9375rem;justify-content:center;text-align:center}
}
@media (max-width:640px){
  #main .cs-bar .cs-bar-long{position:absolute;width:1px;height:1px;overflow:clip;clip-path:inset(50%);white-space:nowrap}
  #main .cs-bar .cs-bar-short{display:inline}
  #main .cs-bar a{padding:6px 4px;font-size:.9375rem;gap:.25em}
}

/* ---------- 2. Type ---------- */
#main .cs-page :is(p,li,dd,dt,blockquote,figcaption,summary,label,td,th){color:var(--cs-ink);max-width:none}
#main .cs-page :is(p,li,dd){font-size:1.125rem;line-height:1.6}
#main .cs-page p{margin:0}
#main .cs-page :is(p,ol,ul,dl,blockquote,div,details,figure,aside) + :is(p,ol,ul,dl,blockquote,div,details,figure,aside){margin-top:16px}
#main .cs-page :is(h1,h2,h3,h4){font-family:var(--cs-display)!important;color:var(--cs-ink)!important;max-width:none!important;
  letter-spacing:-.005em!important;word-spacing:.04em!important;text-wrap:pretty;overflow-wrap:break-word;display:block!important;
  text-transform:none!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;transform:none!important}
#main .cs-page :is(h1,h2,h3,h4)::before,#main .cs-page :is(h1,h2,h3,h4)::after{content:none!important;display:none!important}
#main .cs-page h1{font-size:clamp(2rem,4.2vw,3.25rem)!important;line-height:1.06!important;font-weight:700!important;margin:12px 0 0!important}
#main .cs-page h2{font-size:clamp(1.6rem,2.8vw,2.2rem)!important;line-height:1.12!important;font-weight:650!important;margin:0 0 16px!important}
#main .cs-page h3{font-size:clamp(1.15rem,1.6vw,1.3rem)!important;line-height:1.25!important;font-weight:650!important;margin:0 0 8px!important}
#main .cs-page :is(p,ul,ol,dl,div,blockquote,details,figure) + h3{margin-top:32px!important}
#main .cs-page strong{font-weight:800}
#main .cs-page cite{font-style:italic}
#main .cs-page ol,#main .cs-page ul{margin-block:0;padding-left:1.6em}
#main .cs-page li + li{margin-top:8px}
#main .cs-page ol > li::marker{font-weight:800;color:var(--cs-ink)}
#main .cs-page :is(ol,ul) li{padding-left:.2em}

/* Links: blue and underlined inside text; icon links keep the icon beside the words. */
#main .cs-page a{color:var(--cs-blue);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:650}
#main .cs-page a:hover{color:var(--cs-blue-dark);text-decoration-thickness:2.5px}
#main .cs-page a:focus-visible,#main .cs-page button:focus-visible,#main .cs-page summary:focus-visible,#main .cs-page input:focus-visible{
  outline:3px solid var(--cs-blue);outline-offset:2px;border-radius:6px}
#main .cs-page .cs-ext,#main .cs-page .cs-arrow{width:1.05em;height:1.05em;margin-left:.3em;vertical-align:-.15em}
#main .cs-page .cs-sr{position:absolute!important;width:1px;height:1px;overflow:clip;clip-path:inset(50%);white-space:nowrap}

/* Labels ("Fictional document", "Evidence A", "Real source" ...): one line, dots drawn as CSS circles. */
#main .cs-page .cs-label{display:block;margin:0 0 8px;font-size:.9375rem;line-height:1.45;font-weight:750;color:var(--cs-pink)}
#main .cs-page .cs-label > span{display:inline;color:inherit;font-size:inherit}
#main .cs-page .cs-label > span:not(:last-child)::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin:0 .6em;vertical-align:.2em}
#main .cs-page .cs-label cite{font-style:italic}

/* ---------- 3. Header ---------- */
#main .cs-head{padding-bottom:clamp(28px,3.4vw,44px)}
#main .cs-open{display:flex;flex-direction:column;gap:20px;margin-top:20px}
#main .cs-open > *{margin:0!important}
#main .cs-page .cs-hook{font:700 clamp(2.6rem,6.2vw,4.75rem)/.98 var(--cs-display)!important;letter-spacing:-.02em;color:var(--cs-ink);text-wrap:balance}
#main .cs-open-text > :first-child{margin-top:0!important}
#main .cs-page .cs-open-text h1{font-size:clamp(1.5rem,2.5vw,2.05rem)!important;line-height:1.15!important;font-weight:650!important;color:var(--cs-blue)!important;margin:0!important}
@media (min-width:900px){
  #main .cs-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,56px);row-gap:22px;margin-top:28px}
  #main .cs-open .cs-hook{grid-column:1;grid-row:1;align-self:end}
  #main .cs-open .cs-hero{grid-column:2;grid-row:1 / span 2;align-self:start}
  #main .cs-open .cs-open-text{grid-column:1;grid-row:2}
}
#main .cs-meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;font-size:1rem!important;font-weight:650;margin:0}
#main .cs-meta > :is(a,span):not(:last-child)::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cs-ink);margin:0 .7em;vertical-align:.2em}
#main .cs-meta a{font-weight:750}
#main .cs-topic{margin-top:14px!important;display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.4em;padding:6px 14px;border-radius:999px;background:var(--cs-quiet);
  font-size:1rem!important;line-height:1.4!important;font-weight:650}
#main .cs-topic b{font-weight:800}
#main .cs-summary{margin-top:16px!important;font-size:clamp(1.2rem,1.7vw,1.375rem)!important;line-height:1.5!important}
#main .cs-objective{margin-top:18px!important;padding:14px 18px;border-radius:var(--cs-radius-sm);background:var(--cs-warm);border:2px solid var(--cs-ink);font-size:1.125rem!important}
#main .cs-fiction{margin-top:16px!important;font-size:1rem!important;line-height:1.55!important}
#main .cs-hero{margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;transform:none!important}
#main .cs-page figure > img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;margin:0!important;
  border:6px solid #fff!important;border-radius:20px!important;box-shadow:0 0 0 2px var(--cs-ink)!important;background:#fff;transform:none!important}
/* The hero is a sticker: thick white outline, a navy ring and a blue offset shadow. */
#main .cs-page .cs-hero > img{border-width:10px!important;border-radius:28px!important;box-shadow:0 0 0 2.5px var(--cs-ink),9px 10px 0 2.5px var(--cs-blue)!important}
@media (max-width:760px){#main .cs-page .cs-hero > img{border-width:7px!important;border-radius:22px!important;box-shadow:0 0 0 2px var(--cs-ink),6px 7px 0 2px var(--cs-blue)!important}}
#main .cs-hero figcaption{margin-top:18px!important}
#main .cs-page figcaption{margin-top:12px;font-size:1rem!important;line-height:1.5!important;opacity:1!important;text-align:left}

/* ---------- 4. Steps and sections ---------- */
#main .cs-step + .cs-step{margin-top:clamp(24px,3vw,40px)}
#main .cs-page .cs-step-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;font:700 clamp(1.5rem,2.6vw,2.1rem)/1.1 var(--cs-display)!important;color:var(--cs-blue)}
#main .cs-page .cs-step-label span{font:800 .9375rem/1 var(--body,'Satoshi',sans-serif);color:#fff;background:var(--cs-blue);border-radius:999px;padding:8px 14px}
#main .cs-step > .cs-step-label + .cs-sec{border-top:0;padding-top:clamp(24px,3vw,36px)}
#main .cs-sec{padding-block:var(--cs-gap);border-top:1.5px solid var(--cs-line);margin:0;background:none;box-shadow:none}
#main .cs-sec-head{margin:0 0 20px}
#main .cs-page .cs-sec-head h2{margin:0!important;font-size:clamp(1.9rem,3.4vw,2.75rem)!important;line-height:1.05!important;font-weight:700!important}
#main .cs-page .cs-kicker{margin:10px 0 0!important;font:600 clamp(1.15rem,1.7vw,1.4rem)/1.2 var(--cs-display)!important;color:var(--cs-blue)}
#main .cs-sec-body{min-width:0;container-type:inline-size;container-name:cs}
#main .cs-sec-body > :first-child{margin-top:0!important}
/* Wide screens: the head sits in its own column beside the section, like the old "Okay, here's what happened." */
@media (min-width:1100px){
  #main .cs-sec{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);column-gap:clamp(40px,4vw,64px);align-items:start}
  #main .cs-sec-head{margin:0;position:sticky;top:calc(var(--cs-bar-h) + 28px)}
}
/* Grids follow the width of the section body (a container query), not the window.
   Two or four cards: two columns once the column is 600px wide. Three short key terms: three columns from 760px.
   Three documents or code cards: one full-width card per row, because three columns of quoted text get too narrow. */
#main .cs-grid{display:grid;gap:20px;margin-top:20px;grid-template-columns:minmax(0,1fr)}
#main .cs-sec-body > .cs-grid:first-child{margin-top:0}
#main .cs-grid > *{margin:0!important;min-width:0}
@container cs (min-width:600px){
  #main .cs-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container cs (min-width:760px){
  #main .cs-terms.cs-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Cards: navy outline and a soft blue offset shadow. Key terms stay quiet (pale fill, no shadow). */
#main .cs-page :is(.cs-doc,.cs-news,.cs-code){background:#fff;border:2px solid var(--cs-ink);border-radius:var(--cs-radius);
  padding:22px 24px;box-shadow:6px 7px 0 var(--cs-shadow-blue);transform:none}
#main .cs-page .cs-terms > div{background:var(--cs-quiet);border:0;border-radius:var(--cs-radius-sm);padding:18px 20px;box-shadow:none}
#main .cs-page :is(.cs-doc,.cs-news,.cs-code) > :last-child{margin-bottom:0}

/* Quiet panels: optional material. */
#main .cs-page details{border:0;background:var(--cs-quiet);border-radius:var(--cs-radius-sm);padding:0;box-shadow:none}
#main .cs-page details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 16px;font-weight:750;
  font-size:1.0625rem;line-height:1.4;border-radius:var(--cs-radius-sm);color:var(--cs-ink)}
#main .cs-page details > summary::-webkit-details-marker{display:none}
#main .cs-page details > summary::before{content:"";flex:none;width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform .15s}
#main .cs-page details[open] > summary::before{transform:rotate(45deg) translate(-2px,-2px)}
#main .cs-page details > summary:hover{text-decoration:underline;text-underline-offset:3px}
#main .cs-page details > :not(summary){margin-inline:16px}
#main .cs-page details > :not(summary):last-child{margin-bottom:16px}
#main .cs-page details > summary + *{margin-top:4px}

/* ---------- 5. What happened ---------- */
/* The group chat: a pink strip with white bubbles; the first speaker on the left, replies on the right. */
#main .cs-chat{background:var(--cs-pink-tint);border:2px solid var(--cs-ink);border-radius:var(--cs-radius);padding:18px clamp(14px,2vw,22px) 22px;margin:0 0 28px;
  box-shadow:6px 7px 0 var(--cs-shadow-pink)}
#main .cs-chat .cs-label{margin-bottom:14px}
#main .cs-chat-list{list-style:none!important;margin:0;padding:0!important;display:grid;gap:12px}
#main .cs-msg{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:end;margin:0!important;padding:0!important;max-width:min(640px,88%)}
#main .cs-msg--me{grid-template-columns:minmax(0,1fr) 40px;justify-self:end}
#main .cs-msg--me > .cs-avatar{order:2}
#main .cs-msg--me .cs-bubble{border-radius:18px 18px 4px 18px;background:var(--cs-blue-tint)}
#main .cs-msg::marker{content:none}
@media (max-width:480px){#main .cs-msg{max-width:100%}}
#main .cs-story-text{margin-top:0}
#main .cs-page .cs-avatar{width:40px!important;height:40px!important;border-radius:50%!important;object-fit:cover;object-position:top;background:#fff;
  border:1.5px solid var(--cs-ink)!important;box-shadow:none!important;margin:0!important;padding:0!important;transform:none!important}
#main .cs-page .cs-avatar--initials{display:grid;place-items:center;font:800 .8125rem/1 var(--body,'Satoshi',sans-serif);color:#fff;background:var(--cs-ink)}
#main .cs-bubble{background:#fff;border:1.5px solid var(--cs-ink);border-radius:18px 18px 18px 4px;padding:10px 14px;min-width:0}
#main .cs-bubble .cs-who{font-size:.9375rem!important;font-weight:800;line-height:1.3;margin:0 0 2px;color:var(--cs-pink)}
#main .cs-msg--me .cs-bubble .cs-who{color:var(--cs-blue)}
#main .cs-bubble p{font-size:1.0625rem;line-height:1.5}
#main .cs-bubble p + p{margin-top:4px}
#main .cs-attach{display:inline-flex!important;align-items:center;gap:8px;margin-top:8px!important;padding:6px 10px;border-radius:10px;background:var(--cs-quiet);font-size:.9375rem!important;font-weight:650}
#main .cs-your-question{margin-top:20px!important;padding-left:16px;border-left:5px solid var(--cs-blue);font-size:1.1875rem!important}

/* "Scenes from the story": a large picture and a numbered list; the current scene is filled blue. Without the script,
   every scene shows, one under another, and the list stays hidden. */
#main .cs-sec-body > .cs-viewer{margin-top:14px}
#main .cs-viewer{border:2px solid var(--cs-ink);border-radius:var(--cs-radius);overflow:hidden;background:#fff;box-shadow:7px 8px 0 var(--cs-shadow-blue)}
#main .cs-viewer-stage{min-width:0}
#main .cs-scene{margin:0!important}
#main .cs-scene + .cs-scene{border-top:2px solid var(--cs-ink)}
#main .cs-page .cs-scene > img{border:0!important;border-radius:0!important;box-shadow:none!important}
#main .cs-scene figcaption{margin:0!important;padding:14px 20px 18px}
#main .cs-scene figcaption b{display:block;font:650 1.2rem/1.3 var(--cs-display);margin-bottom:4px}
#main .cs-viewer.is-live .cs-scene[data-off]{display:none}
#main .cs-viewer.is-live .cs-scene + .cs-scene{border-top:0}
#main .cs-viewer-list{list-style:none!important;margin:0!important;padding:12px!important;background:var(--cs-blue-tint);display:grid;gap:6px;align-content:start}
#main .cs-viewer:not(.is-live) .cs-viewer-list{display:none}
#main .cs-viewer-list li{margin:0!important;padding:0!important}
#main .cs-viewer-list li::marker{content:none}
#main .cs-page .cs-viewer-list button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:10px 14px;border:0;border-radius:12px;background:none;
  color:var(--cs-ink);font:650 1.0625rem/1.3 var(--body,'Satoshi',sans-serif);text-align:left;cursor:pointer;box-shadow:none}
#main .cs-page .cs-viewer-list button:hover{background:#fff}
#main .cs-page .cs-viewer-list button[aria-pressed=true]{background:var(--cs-blue);color:#fff}
#main .cs-viewer-n{flex:none;width:1.4em;font-weight:800;text-align:center}
@container cs (min-width:700px){
  #main .cs-viewer.is-live{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(220px,1fr)}
}

/* Popover buttons: key terms (first use in the story) and heritage words (chat and dialogue). */
#main .cs-def-wrap{position:relative;display:inline}
#main .cs-page .cs-def{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline;text-align:inherit;
  text-decoration:underline dotted;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--cs-blue);box-shadow:none;min-height:0;border-radius:3px}
#main .cs-page .cs-def--term{font-weight:800}
#main .cs-page .cs-def:hover,#main .cs-page .cs-def[aria-expanded=true]{background:var(--cs-quiet);text-decoration-style:solid}
#main .cs-def-panel{position:absolute;z-index:30;left:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 24px));display:block;
  background:#fff;color:var(--cs-ink);border:1.5px solid var(--cs-ink);border-radius:12px;padding:12px 14px;box-shadow:var(--cs-lift);
  font:500 1rem/1.5 var(--body,'Satoshi',sans-serif);text-align:left;white-space:normal}
#main .cs-def-panel[hidden]{display:none}
#main .cs-def-panel b{display:block;font-weight:800;margin-bottom:2px}
#main .cs-def-panel span{display:block}

/* ---------- 6. Key terms ---------- */
#main .cs-terms{margin:0}
#main .cs-terms dt{font:650 1.25rem/1.25 var(--cs-display)!important;margin:0 0 6px}
#main .cs-terms dd{margin:0;font-size:1.0625rem!important}
#main .cs-terms .cs-es{display:block;margin-top:10px;font-size:1rem;color:var(--cs-ink)}
#main .cs-terms .cs-es em{font-style:normal;font-weight:750;color:var(--cs-ink)!important}
#main .cs-terms .cs-es [lang]{color:var(--cs-ink)}

/* ---------- 7. Who is involved ---------- */
/* The lead line with the yellow companion card beside it. */
#main .cs-people-lead{display:grid;gap:18px;margin-bottom:24px}
@container cs (min-width:700px){#main .cs-people-lead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:28px}}
#main .cs-page .cs-buddy{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;margin:0!important;padding:14px 18px;
  background:var(--cs-yellow);border:2px solid var(--cs-ink);border-radius:var(--cs-radius);box-shadow:6px 7px 0 var(--cs-pink)}
#main .cs-page .cs-buddy img{width:72px!important;height:72px!important;object-fit:contain;border-radius:50%;background:#fff;border:2px solid var(--cs-ink)!important;
  box-shadow:none!important;margin:0!important;padding:4px}
#main .cs-page .cs-buddy > div{min-width:0}
#main .cs-page .cs-buddy-name{font-weight:800;font-size:1rem!important;margin:0!important}
#main .cs-page .cs-buddy-line{font-size:1.0625rem!important;line-height:1.45!important;margin:2px 0 0!important;font-weight:600}

/* Two people, one panel: blue on the left, pink on the right, "Ask" rows in the tinted lower half. */
#main .cs-duo{display:grid;grid-template-columns:minmax(0,1fr);border:2px solid var(--cs-ink);border-radius:24px;overflow:hidden;background:#fff;
  box-shadow:7px 8px 0 var(--cs-yellow)}
@container cs (min-width:640px){
  #main .cs-duo{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto}
  #main .cs-duo > .cs-person{grid-row:span 2;display:grid;grid-template-rows:subgrid}
  #main .cs-duo > .cs-person + .cs-person{border-left:1.5px solid var(--cs-line)}
}
#main .cs-duo > .cs-person + .cs-person{border-top:2px solid var(--cs-ink)}
@container cs (min-width:640px){#main .cs-duo > .cs-person + .cs-person{border-top:0}}
#main .cs-person{margin:0!important;min-width:0}
#main .cs-person-top{padding:22px 24px 20px;display:flex;flex-direction:column;gap:16px}
#main .cs-person-top > *{margin:0!important}
#main .cs-person-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1.5px solid var(--cs-line)}
#main .cs-person-head h3{margin:0!important;font-size:clamp(1.5rem,2.2vw,1.85rem)!important;color:var(--cs-blue)!important}
#main .cs-person + .cs-person .cs-person-head h3{color:var(--cs-pink)!important}
#main .cs-ask{padding:16px 24px 20px;background:var(--cs-blue-tint);border-top:1.5px solid var(--cs-line)}
#main .cs-person + .cs-person .cs-ask{background:var(--cs-pink-tint)}
#main .cs-page .cs-ask-title{font-weight:800;font-size:1rem!important;margin:0 0 8px!important}
#main .cs-page .cs-ask details{background:none;border-radius:0;border-top:1.5px solid var(--cs-line)}
#main .cs-page .cs-ask details:last-child{border-bottom:1.5px solid var(--cs-line)}
#main .cs-page .cs-ask details + details{margin-top:0}
#main .cs-page .cs-ask details > summary{padding:12px 4px;border-radius:0}
#main .cs-page .cs-ask details > summary::before{color:var(--cs-blue)}
#main .cs-page .cs-ask details > p{margin:0 4px 14px 30px!important}
#main .cs-page .cs-person blockquote{border-left:0;padding:0}
#main .cs-page .cs-person blockquote p{font-size:1.1875rem;line-height:1.55}
/* The yellow "Put their perspectives together" bar under the panel. */
#main .cs-compare-bar{margin:0 clamp(8px,2vw,20px)!important;padding:18px 22px 14px;background:var(--cs-yellow);border-radius:0 0 var(--cs-radius) var(--cs-radius);
  border:2px solid var(--cs-ink);border-top:0}
#main .cs-sec-body > .cs-duo + .cs-compare-bar{margin-top:0!important;position:relative;top:0}
#main .cs-page .cs-compare-bar > p{font-size:1.0625rem!important;margin:0!important}
#main .cs-page .cs-compare-bar .cs-compare{margin-top:6px!important;background:none}
#main .cs-page .cs-compare-bar .cs-compare > summary{padding:8px 0}
#main .cs-page .cs-compare-bar .cs-compare > p{margin:0 0 10px 25px!important}
#main .cs-page .cs-face{flex:none;width:64px!important;height:64px!important;border-radius:50%!important;object-fit:cover;object-position:top;background:#fff;
  border:1.5px solid var(--cs-ink)!important;box-shadow:none!important;margin:0!important;padding:0!important;transform:none!important}
#main .cs-page .cs-face--initials{display:grid;place-items:center;font:800 1.1rem/1 var(--body,'Satoshi',sans-serif);color:#fff;background:var(--cs-ink)}
#main .cs-role{font-size:1rem!important;line-height:1.4!important;margin-top:2px!important}
#main .cs-page blockquote{margin:0;padding:0 0 0 16px;border-left:4px solid var(--cs-gold);background:none;box-shadow:none;font-style:normal}
#main .cs-page blockquote p{font-size:1.125rem}

/* ---------- 8. Evidence, news, professional standards ---------- */
#main .cs-doc h3,#main .cs-news h3,#main .cs-code h3{margin-bottom:10px!important}
#main .cs-page .cs-label + h3{margin-top:4px!important}
#main .cs-doc > p,#main .cs-code > p,#main .cs-news > p{font-size:1.0625rem}
#main .cs-doc > * + *,#main .cs-code > * + *,#main .cs-news > * + *{margin-top:10px}
#main .cs-doc-note{font-size:1rem!important}
#main .cs-code-q{font-weight:750}
#main .cs-doc-steps li{font-size:1.0625rem}
#main .cs-doc-steps li + li{margin-top:4px}
#main .cs-news{display:flex;flex-direction:column}
#main .cs-news > a{margin-top:auto!important;padding-top:12px;align-self:flex-start}
#main .cs-more{margin-top:20px!important}
#main .cs-more > .cs-grid{margin-top:4px}
#main .cs-checked{margin-top:16px!important;font-size:1rem!important}
#main .cs-legal{margin-top:8px!important;font-size:1rem!important;color:var(--muted,inherit)}

/* ---------- 9. Key idea: widget, Spanish and the guest ---------- */
#main .cs-es-more{margin-top:24px!important}
#main .cs-page .cs-widget{display:block!important;margin-top:24px!important;background:#fff!important;border:1.5px solid var(--cs-ink)!important;
  border-radius:var(--cs-radius)!important;padding:20px 22px!important;box-shadow:none!important;transform:none!important;grid-template-columns:none!important}
#main .cs-page .cs-widget > *{max-width:none!important;width:auto!important}
#main .cs-widget-title{font-size:1.25rem!important;margin-top:4px!important}
#main .cs-page .cs-pay{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:20px!important;margin-top:16px!important;align-items:start}
#main .cs-pay-in{display:grid;gap:12px}
#main .cs-page .cs-pay-in label + label{margin-top:0}
#main .cs-pay label{display:grid;gap:6px;font-weight:750;font-size:1rem}
#main .cs-pay input{width:100%;font:600 1.125rem var(--body,'Satoshi',sans-serif);color:var(--cs-ink);padding:10px 12px;border:1.5px solid var(--cs-ink);border-radius:10px;background:#fff}
#main .cs-page .pay-result{background:var(--cs-quiet);border-radius:var(--cs-radius-sm);padding:16px 18px;margin:0;border:0;box-shadow:none}
#main .cs-page .pay-result > span{font-weight:750;font-size:1rem;color:var(--cs-ink)}
#main .cs-page .pay-result output{display:block;font:700 2rem/1.2 var(--cs-display);color:var(--cs-ink);margin:4px 0}
#main .cs-page .pay-result p{font-size:1rem}
#main .cs-page .deduction-bars{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:10px 0;border:1.5px solid var(--cs-ink);background:#fff}
#main .cs-page .deduction-bars span{display:block;height:100%}
#main .cs-page #net-bar{background:var(--cs-blue)}#main .cs-page #tax-bar{background:var(--cs-gold)}#main .cs-page #other-bar{background:var(--cs-pink)}
#main .cs-page .access-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#main .cs-page .access-options button{font:700 1rem/1.3 var(--body,'Satoshi',sans-serif);color:var(--cs-ink);background:#fff;border:1.5px solid var(--cs-ink);
  border-radius:999px;padding:10px 16px;cursor:pointer;box-shadow:none;min-height:44px;text-align:left}
#main .cs-page .access-options button[aria-pressed=true]{background:var(--cs-ink);color:#fff}
#main .cs-page .access-answer{margin-top:16px;background:var(--cs-quiet);border-radius:var(--cs-radius-sm);padding:16px 18px;border:0;box-shadow:none}
#main .cs-page .access-answer #access-label{font-weight:750;color:var(--cs-pink);font-size:.9375rem}
@media (max-width:760px){#main .cs-page .cs-pay{grid-template-columns:minmax(0,1fr)!important}}
#main .cs-page .access-answer .cs-widget-title{font-weight:750}

#main .cs-page .guest-visit--case{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;margin-top:28px!important;
  background:var(--cs-quiet);border:0;border-radius:var(--cs-radius);padding:20px 22px;box-shadow:none;transform:none;width:auto;max-width:none}
#main .cs-page .guest-visit--case > div{min-width:0;margin:0!important}
#main .cs-page .guest-face{width:96px;height:96px;border-radius:50%;background:#fff;border:1.5px solid var(--cs-ink);overflow:hidden;display:grid;place-items:end center}
#main .cs-page .guest-face img{width:100%!important;height:100%!important;object-fit:cover;object-position:top;border:0!important;box-shadow:none!important;margin:0!important;position:static!important;transform:none!important;max-width:none}
#main .cs-page .guest-initials{align-self:center;font:800 1.6rem/1 var(--body,'Satoshi',sans-serif);color:#fff;background:var(--cs-ink);width:100%;height:100%;display:grid;place-items:center}
#main .cs-page .guest-kicker{margin:0 0 4px!important;font-weight:800;font-size:.9375rem;color:var(--cs-pink);text-transform:none;letter-spacing:0}
#main .cs-page .guest-visit--case h3{margin:0 0 4px!important}
#main .cs-page .guest-role{margin:0 0 10px!important;font-size:.9375rem;color:var(--cs-ink)}
#main .cs-page .guest-line{font-size:1.125rem;font-weight:600;margin:0!important}
@media (max-width:480px){#main .cs-page .guest-visit--case{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px}#main .cs-page .guest-face{width:64px;height:64px}#main .cs-page .guest-initials{font-size:1.2rem}}

/* ---------- 10. Film connection: the clip loads only on request ---------- */
#main .cs-clip .clip-player,#main .cs-clip .cs-wistia{margin:8px 16px 0!important;padding:0;background:none;border:0}
#main .cs-clip iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;background:var(--cs-ink)}
#main .cs-page :is(.load-clip,[data-wistia-id],.cs-btn){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;
  font:750 1.0625rem/1.25 var(--body,'Satoshi',sans-serif);color:#fff!important;background:var(--cs-blue);border:2px solid var(--cs-ink);border-radius:999px;
  box-shadow:var(--cs-lift);cursor:pointer;text-decoration:none!important;text-align:center;white-space:normal}
#main .cs-page :is(.load-clip,[data-wistia-id],.cs-btn):hover{background:var(--cs-blue-dark);transform:translate(-1px,-1px);box-shadow:5px 6px 0 var(--cs-ink)}
#main .cs-page :is(.load-clip,[data-wistia-id],.cs-btn) .npw-icon{width:1.2em;height:1.2em;color:#fff}
#main .cs-clip > .cs-label{margin-top:20px!important}

/* ---------- 11. Practice ---------- */
#main .cs-practice{margin-top:24px!important;background:none;border:0;padding:0;box-shadow:none}
#main .cs-practice + .cs-practice{margin-top:40px!important}
#main .cs-q{font-weight:750;font-size:1.1875rem!important;line-height:1.45!important}
#main .cs-answers{display:grid;gap:10px;margin-top:14px!important}
#main .cs-page .cs-answers .answer{display:block!important;width:100%!important;text-align:left!important;font:600 1.0625rem/1.45 var(--body,'Satoshi',sans-serif)!important;
  color:var(--cs-ink)!important;background:#fff!important;border:1.5px solid var(--cs-ink)!important;border-radius:var(--cs-radius-sm)!important;padding:14px 18px!important;
  cursor:pointer;box-shadow:none!important;transform:none!important;min-height:48px;white-space:normal!important;margin:0!important;letter-spacing:0!important;text-transform:none!important}
#main .cs-page .cs-answers .answer:hover{background:var(--cs-quiet)!important}
#main .cs-page .cs-answers .answer[aria-pressed=true]{background:var(--cs-ink)!important;color:#fff!important;border-color:var(--cs-ink)!important}
#main .cs-page .answer-feedback{margin-top:12px!important;padding:14px 18px;border-radius:var(--cs-radius-sm);background:var(--cs-quiet);font-size:1.0625rem!important;min-height:0}

/* ---------- 12. Your task, checks, discussion ---------- */
#main .cs-steps{margin-top:16px!important}
#main .cs-steps li{padding-left:.35em}
#main .cs-checks{list-style:none!important;padding:0!important;display:grid;gap:10px}
#main .cs-checks li{position:relative;padding-left:34px!important;margin:0!important}
#main .cs-checks li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:20px;border:2px solid var(--cs-ink);border-radius:5px;background:#fff}
#main .cs-discuss{margin-top:16px!important}

/* The workspace in case mode: one quiet panel, no second heading, no offset shadow. */
#main .cs-page .ws--case{margin:28px 0 0!important;padding:clamp(16px,2.4vw,28px)!important;background:var(--cs-quiet)!important;border:0!important;
  border-radius:var(--cs-radius)!important;box-shadow:none!important;transform:none!important}
#main .cs-page .ws--case :is(.ws-brief,.ws-evidence){box-shadow:none!important;border-width:1.5px!important}
#main .cs-page .ws--case :is(h3,h4,legend){font-family:var(--cs-display)!important}
#main .cs-page .ws--case :is(textarea,input[type=text],select){max-width:100%}
#main .cs-page .ws--case .ws-body{min-width:0}
/* Side-by-side fields: labels at the top, boxes on one line even when one label has a hint and the other wraps. */
#main .cs-page .ws--case .ws-grid > .ws-field{grid-template-rows:1fr auto;align-content:stretch;margin:0!important}
#main .cs-page .ws--case .ws-field label{align-content:start}
#main .cs-page .ws--case .ws-field label b{text-wrap:pretty}
#main .cs-page .ws-hand--case{margin-top:20px!important;background:#fff;border:1.5px solid var(--cs-ink)}
#main .cs-page .ws-hand--case > summary{padding:14px 18px}
#main .cs-page .ws-hand--case .ws-hand-row{margin:4px 18px 18px!important}
/* Export buttons: the name and the badge share a row only when both fit, so "Open in Google Docs" never breaks letter by letter. */
#main .cs-page .ws--case .ws-app-btn{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:4px 10px;box-shadow:none}
#main .cs-page .ws--case .ws-app-btn:hover{box-shadow:none;transform:none;background:var(--cs-quiet)}
#main .cs-page .ws--case a.ws-app-btn{color:var(--cs-ink)!important;text-decoration:none!important;font-weight:inherit}
#main .cs-page .ws--case a.ws-app-btn b{color:var(--cs-blue);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
#main .cs-page .ws--case .ws-app-btn b{flex:1 1 auto;order:0}
#main .cs-page .ws--case .ws-app-btn .ws-kind{flex:0 1 auto;order:1;white-space:normal;color:var(--cs-ink);background:var(--cs-quiet)}
#main .cs-page .ws--case .ws-app-btn span{flex:1 1 100%;order:2;color:var(--cs-ink)}
#main .cs-page .ws--case :is(.ws-app-btn,.ws-btn,.ws-dl){min-width:0;max-width:100%;white-space:normal;overflow-wrap:break-word;word-break:normal}
#main .cs-page .ws--case :is(.ws-app-btn,.ws-btn,.ws-dl) > *{min-width:0}
#main .cs-page .ws--case :is(.ws-app-head,.ws-btn-head,.ws-dl-head){display:flex;flex-wrap:wrap;gap:4px 10px;min-width:0}
@container (max-width:700px){#main .cs-page .ws--case .ws-body{grid-template-columns:1fr}}
@media (max-width:760px){#main .cs-page .ws--case .ws-body{grid-template-columns:1fr!important}}

/* ---------- 13. Going further: one column of rows, so opening one only moves the rows below it ---------- */
#main .cs-further{display:flex;flex-direction:column;gap:12px;margin-top:20px}
#main .cs-further > details{margin:0!important;background:#fff;border:1.5px solid var(--cs-ink);border-radius:var(--cs-radius)}
#main .cs-further summary{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:14px 18px!important}
#main .cs-further summary::before{align-self:center}
#main .cs-further-label{font-weight:800;font-size:1.125rem;flex:1 1 auto;min-width:0}
#main .cs-further summary small{font-size:.9375rem;font-weight:650;color:var(--cs-ink)}
#main .cs-further details > p{margin:0 18px 14px!important}
#main .cs-further details > p:first-of-type{margin-top:0!important}
#main .cs-based-on{font-size:1rem!important}
@media (max-width:560px){#main .cs-further summary small{flex-basis:100%;padding-left:23px}}

/* ---------- 13a. Explore more (case_page.explore_more): outside videos, games and tools for students.
   A video is a local poster (blue panel, companion sticker, yellow play button) until the reader presses play; then
   case-page.js puts the youtube-nocookie player in the same 16:9 frame. Link cards: navy outline, offset blue, yellow
   and pink shadows, a kind chip and an external-link sticker. The whole card is the link (a stretched ::after). ---------- */
#main .cs-explore{margin-top:clamp(32px,4vw,44px)!important;padding-top:clamp(24px,3vw,32px);border-top:2px solid var(--cs-ink)}
#main .cs-explore > h3{font:650 clamp(1.5rem,2.4vw,1.875rem)/1.15 var(--cs-display)!important;margin:0 0 8px!important;color:var(--cs-ink)}
#main .cs-explore-lead{margin:0!important;font-size:1.0625rem}
#main .cs-xres-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0!important;font-size:.9375rem;line-height:1.35}
#main .cs-xres-kind{display:inline-block;padding:3px 11px;border:1.5px solid var(--cs-ink);border-radius:999px;background:var(--cs-blue-tint);
  font-weight:800;font-size:.8125rem;line-height:1.3;color:var(--cs-ink)}
#main .cs-xres--try .cs-xres-kind{background:var(--cs-yellow)}
#main :is(.cs-xres--watch,.cs-xvid) .cs-xres-kind{background:var(--cs-pink-tint)}
#main .cs-xres-pub{font-weight:750;color:var(--cs-pink)}
#main .cs-page h4.cs-xres-title{font:650 1.25rem/1.25 var(--cs-display)!important;margin:12px 0 6px!important;color:var(--cs-ink);letter-spacing:0}
#main .cs-xres-do{margin:0!important;font-size:1.0625rem;line-height:1.5}

/* The video: poster and player share one 16:9 frame. Side by side with its caption when the column is wide. */
#main .cs-page .cs-xvid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 28px;align-items:center;margin:24px 0 0!important;padding:0;border:0;background:none}
@container cs (min-width:720px){#main .cs-page .cs-xvid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
#main .cs-xvid-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border:2px solid var(--cs-ink);border-radius:var(--cs-radius);
  background:var(--cs-blue);box-shadow:6px 7px 0 var(--cs-yellow);container-type:inline-size}
#main .cs-xvid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--cs-ink)}
#main .cs-page .cs-xvid-play{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;cursor:pointer;
  color:#fff!important;text-decoration:none!important;text-align:left;font:inherit;box-shadow:none;
  background:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.18) 1.5px,transparent 0) 0 0/22px 22px,var(--cs-blue)}
#main .cs-page .cs-xvid-play:focus-visible{outline:3px solid #fff;outline-offset:-9px}
#main .cs-xvid-chip{position:absolute;top:clamp(10px,4cqw,16px);left:clamp(10px,4cqw,16px);padding:3px 12px;border:2px solid var(--cs-ink);border-radius:999px;
  background:var(--cs-yellow);color:var(--cs-ink);font-weight:800;font-size:.875rem;line-height:1.3}
#main .cs-page img.cs-xvid-sticker{position:absolute;right:3%;bottom:-8%;width:auto!important;height:96%!important;max-width:none;margin:0;border:0;border-radius:0;
  box-shadow:none;transform:rotate(7deg);transform-origin:bottom center;transition:transform .2s}
#main .cs-xvid-btn{position:absolute;left:34%;top:48%;display:grid;place-items:center;width:clamp(58px,17cqw,88px);aspect-ratio:1;border-radius:50%;
  background:var(--cs-yellow);border:2.5px solid var(--cs-ink);box-shadow:4px 5px 0 var(--cs-ink);transform:translate(-50%,-50%);transition:transform .15s,box-shadow .15s}
#main .cs-xvid-btn svg{width:44%;height:44%;margin-left:8%;fill:var(--cs-ink)}
#main .cs-xvid-cta{position:absolute;left:clamp(10px,4cqw,18px);bottom:clamp(10px,4cqw,16px);max-width:52%;font:650 clamp(1rem,4.2cqw,1.25rem)/1.2 var(--cs-display);color:#fff}
#main .cs-xvid-cta small{display:block;margin-top:3px;font:650 clamp(.75rem,3cqw,.875rem)/1.3 var(--body,'Satoshi',sans-serif);color:#fff}
#main .cs-xvid-play:hover .cs-xvid-btn{transform:translate(-50%,-50%) translate(-2px,-2px);box-shadow:6px 7px 0 var(--cs-ink)}
#main .cs-xvid-play:hover img.cs-xvid-sticker{transform:rotate(3deg)}
#main .cs-xvid figcaption{min-width:0;margin:0;padding:0;font-size:1rem;text-align:left}
#main .cs-xvid-alt{margin:12px 0 0!important;font-size:1rem}

/* Link cards: 1 or 2 columns; three cards sit in one row when the column is wide enough. */
#main .cs-page .cs-xres-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:22px 20px;margin:28px 0 0!important;padding:0}
@container cs (min-width:600px){#main .cs-page .cs-xres-list:is(.cs-xres-list--2,.cs-xres-list--4){grid-template-columns:repeat(2,minmax(0,1fr))}}
@container cs (min-width:820px){#main .cs-page .cs-xres-list--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
#main .cs-page .cs-xres{position:relative;margin:0!important;padding:18px 20px 20px;background:#fff;border:2px solid var(--cs-ink);border-radius:var(--cs-radius);
  box-shadow:6px 7px 0 var(--cs-shadow-blue);transition:transform .15s,box-shadow .15s}
#main .cs-page .cs-xres::marker{content:none}
#main .cs-page .cs-xres:nth-child(3n+2){box-shadow:6px 7px 0 var(--cs-yellow)}
#main .cs-page .cs-xres:nth-child(3n+3){box-shadow:6px 7px 0 var(--cs-shadow-pink)}
#main .cs-page .cs-xres:hover{transform:translate(-2px,-2px)}
#main .cs-page .cs-xres:focus-within{outline:3px solid var(--cs-blue);outline-offset:3px}
#main .cs-page .cs-xres-link{color:var(--cs-ink)!important;text-decoration:none!important;font:inherit!important;letter-spacing:inherit}
#main .cs-page .cs-xres-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
#main .cs-page .cs-xres-link:focus-visible{outline:0}
#main .cs-page .cs-xres:hover .cs-xres-link{text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:4px}
#main .cs-page .cs-xres-ext{position:absolute;top:-14px;right:-10px;width:40px;height:40px;padding:8px;border:2px solid var(--cs-ink);border-radius:50%;
  background:#fff;color:var(--cs-ink);box-shadow:2px 3px 0 var(--cs-ink);transform:rotate(10deg);filter:none;pointer-events:none}
#main .cs-page .cs-xres--try .cs-xres-ext{background:var(--cs-yellow)}
#main .cs-page .cs-xres-meta{padding-right:28px}

#main .cs-page .cs-explore-kit{display:flex;align-items:center;gap:14px;margin:30px 0 0!important;padding:14px 18px;border-radius:var(--cs-radius-sm);
  background:var(--cs-quiet);font-size:1.0625rem}
#main .cs-page .cs-explore-kit .npw-icon{width:40px;height:40px;flex:none}
#main .cs-page .cs-explore-kit a{font-weight:750}
@media (prefers-reduced-motion:reduce){#main .cs-page :is(.cs-xres,.cs-xvid-btn,img.cs-xvid-sticker){transition:none}#main .cs-page .cs-xres:hover{transform:none}}
@media print{#main .cs-xvid-frame,#main .cs-xres-ext,#main .cs-explore-kit{display:none!important}#main .cs-page .cs-xres{box-shadow:none;break-inside:avoid}}

/* ---------- 14. Sources and the last two lines ---------- */
#main .cs-sources li{font-size:1.0625rem;overflow-wrap:anywhere}
#main .cs-sources li a{overflow-wrap:anywhere}
/* The step pager: back link, where you are, and the blue next-step button. */
#main .cs-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:0!important;
  padding:24px clamp(16px,2.4vw,28px);border:2px solid var(--cs-ink);border-radius:var(--cs-radius);background:var(--cs-blue-tint)}
#main .cs-page .cs-pager-where{margin:0!important;font-weight:750;font-size:1.0625rem!important;flex:1 1 auto;text-align:center}
#main .cs-page .cs-pager-back{font-weight:750}
#main .cs-page .cs-pager .cs-btn{min-width:min(100%,260px)}
@media (max-width:640px){
  #main .cs-pager{flex-direction:column;align-items:stretch;text-align:center}
  #main .cs-page .cs-pager-where{order:-1}
  #main .cs-page .cs-pager .cs-btn{order:0;width:100%}
  #main .cs-page .cs-pager-back{order:1;align-self:center}
}
#main .cs-teachers{margin-top:clamp(28px,3vw,40px)!important;padding:16px 20px;border-radius:var(--cs-radius-sm);background:var(--cs-quiet)}
#main .cs-teachers a{color:var(--cs-ink)!important;font-weight:600}
#main .cs-teachers a strong{font-weight:800}

/* The closing yellow band ("Okay, what would you ask?") with the companions. It replaces the footer invitation here. */
body:has(#main .cs-page) .footer-invitation{display:none!important}
#main .cs-band{box-sizing:border-box;width:min(1240px,calc(100% - 96px));margin:0 auto clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  background:var(--cs-yellow);border:2px solid var(--cs-ink);border-radius:28px;overflow:hidden;box-shadow:8px 9px 0 var(--cs-blue);color:var(--cs-ink)}
@media (max-width:1100px){#main .cs-band{width:calc(100% - 64px)}}
@media (max-width:760px){#main .cs-band{width:calc(100% - 32px);grid-template-columns:minmax(0,1fr)}}
#main .cs-band figure{margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;min-height:100%}
#main .cs-band figure > img{display:block;width:100%!important;height:100%!important;aspect-ratio:16/10;object-fit:cover;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
#main .cs-band-text{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0}
#main .cs-band-text > *{margin:0!important;max-width:none!important}
#main .cs-band h2{font:700 clamp(2.1rem,4.4vw,3.4rem)/1.02 var(--cs-display)!important;color:var(--cs-ink)!important;letter-spacing:-.015em;
  background:none!important;border:0!important;padding:0!important;box-shadow:none!important;text-transform:none!important}
#main .cs-band h2::before,#main .cs-band h2::after{content:none!important}
#main .cs-band h2 em{font-style:normal;color:var(--cs-blue)}
#main .cs-band p{font-size:1.125rem;line-height:1.55;color:var(--cs-ink)}
#main .cs-band-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
#main .cs-band a{color:var(--cs-ink);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
#main .cs-band .cs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;font:800 1.0625rem/1.25 var(--body,'Satoshi',sans-serif);
  color:#fff!important;background:var(--cs-blue);border:2px solid var(--cs-ink);border-radius:999px;box-shadow:var(--cs-lift);text-decoration:none!important}
#main .cs-band .cs-btn:hover{background:var(--cs-blue-dark)}

/* ---------- 15. The case directory (/cases/) and the list of all cases (/cases/archive/) ---------- */
#main .cs-hub{box-sizing:border-box;width:min(1240px,calc(100% - 96px));margin:0 auto;padding:clamp(28px,4vw,48px) 0 72px;color:var(--cs-ink)}
@media (max-width:1100px){#main .cs-hub{width:calc(100% - 64px)}}
@media (max-width:760px){#main .cs-hub{width:calc(100% - 32px)}}
#main .cs-hub *{box-sizing:border-box}
#main .cs-hub :is(p,li){color:var(--cs-ink);max-width:none;margin:0}
#main .cs-hub :is(h1,h2,h3){font-family:var(--cs-display)!important;color:var(--cs-ink)!important;max-width:none!important;letter-spacing:-.005em!important;
  word-spacing:.04em!important;text-wrap:pretty;overflow-wrap:break-word;display:block!important;background:none!important;border:0!important;padding:0!important;transform:none!important}
#main .cs-hub :is(h1,h2,h3)::before,#main .cs-hub :is(h1,h2,h3)::after{content:none!important;display:none!important}
#main .cs-hub h1{font-size:clamp(2.2rem,5vw,3.6rem)!important;line-height:1.05!important;font-weight:700!important;margin:8px 0 0!important}
#main .cs-hub h2{font-size:clamp(1.6rem,2.8vw,2.2rem)!important;line-height:1.12!important;font-weight:650!important;margin:0!important}
#main .cs-hub a{color:var(--cs-blue);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:700}
#main .cs-hub .cs-meta{margin:0 0 4px}
#main .cs-hub-lead{font-size:clamp(1.15rem,1.6vw,1.3rem)!important;line-height:1.55;margin-top:16px!important}
#main .cs-hub-note{font-size:1.0625rem;line-height:1.55;margin-top:12px!important}
#main .cs-hub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px!important}
#main .cs-hub .cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;font:750 1.0625rem/1.25 var(--body,'Satoshi',sans-serif);
  color:#fff!important;background:var(--cs-blue);border:2px solid var(--cs-ink);border-radius:999px;box-shadow:var(--cs-lift);text-decoration:none!important;text-align:center}
#main .cs-hub .cs-btn:hover{background:var(--cs-blue-dark)}
#main .cs-hub .cs-btn .npw-icon{width:1.15em;height:1.15em;color:#fff}
#main .cs-hub-group{margin-top:var(--cs-gap);padding-top:var(--cs-gap);border-top:1px solid var(--cs-line)}
#main .cs-hub-group > p{margin-top:12px!important;font-size:1.125rem;line-height:1.55}
#main .cs-cards{list-style:none!important;margin:24px 0 0!important;padding:0!important;display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){#main .cs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){#main .cs-cards{grid-template-columns:1fr}}
#main .cs-card{display:flex;flex-direction:column;margin:0!important;padding:14px 14px 18px;background:#fff;border:1.5px solid var(--cs-ink);border-radius:var(--cs-radius);min-width:0}
#main .cs-card::marker{content:none}
#main .cs-card > * + *{margin-top:8px!important}
#main .cs-card-art{margin:0 0 6px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
#main .cs-card-art > img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;margin:0!important;
  border:4px solid #fff!important;border-radius:14px!important;box-shadow:0 0 0 1.5px var(--cs-ink)!important;transform:none!important}
#main .cs-card-no{font-weight:800;font-size:.9375rem;color:var(--cs-pink)!important;padding-inline:4px}
#main .cs-card .cs-card-q{font-size:1.25rem!important;line-height:1.25!important;font-weight:650!important;margin:4px 0 0!important;padding-inline:4px!important}
#main .cs-card-topic,#main .cs-card-time{font-size:1rem!important;line-height:1.45;padding-inline:4px}
#main .cs-card-topic b{font-weight:750}
#main .cs-card-time{display:flex;align-items:center;gap:6px}
#main .cs-card-time .npw-icon{width:1.1em;height:1.1em}
#main .cs-card-go{margin-top:auto!important;padding-top:14px;padding-inline:4px}
#main .cs-card-go .cs-btn{width:100%;min-height:44px;padding:10px 16px;font-size:1rem;box-shadow:none}

/* /cases/archive/: the same cards without pictures, in one run from Case 1 to Case 20. */
#main .cs-hub--list .cs-cards{margin-top:var(--cs-gap)!important}
#main .cs-hub--list .cs-card{padding:18px 18px 20px}

/* ---------- 16. Print: every section, no rail, no buttons ---------- */
@media print{
  #main .cs-page{display:block;width:100%;padding:0}
  #main .cs-bar,#main .cs-pager,#main .cs-band,#main .cs-viewer-list,#main .cs-clip,#main .ws--case,#main .cs-answers{display:none!important}
  #main .cs-viewer .cs-scene[data-off]{display:block!important}
  #main .cs-sec{display:block}
  #main .cs-page details{background:none}
  #main .cs-page details:not([open]) > :not(summary){display:block}
  #main .cs-sec{padding-block:24px;break-inside:auto}
  #main .cs-page :is(.cs-doc,.cs-person,.cs-news,.cs-code){break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){#main .cs-page details > summary::before{transition:none}}
#main .cs-page :is(.cs-ask,.cs-sec-body,.cs-viewer-list,.cs-hero,.cs-open-text){margin-top:0!important}
#main .cs-page .cs-viewer-list button{justify-content:flex-start!important;text-align:left!important}
#main .cs-page .cs-buddy img{border-radius:50%!important}
#main .cs-page .cs-pager{margin-top:clamp(8px,1.5vw,16px)!important}
#main .cs-bar::before{content:"";position:absolute;left:-10px;right:-10px;bottom:100%;height:14px;background:#fff;pointer-events:none}
@media (max-width:640px){#main .cs-bar a{padding:6px 2px;font-size:.8125rem;white-space:nowrap;gap:.2em;letter-spacing:-.01em}#main .cs-bar ol{gap:3px}}
@media (max-width:1099px){#main .cs-bar a{display:block;text-align:center;padding-top:12px;padding-bottom:12px}}@media (max-width:640px){#main .cs-bar a{padding-top:13px;padding-bottom:13px}}

/* ---------- 17. Skill ladder (production/progression.json): "Skills in this case" under the opening, and the
   "Key terms from earlier cases" note. Navy outline, pale blue panel, Clash Display label; chips link to earlier cases. ---------- */
#main .cs-page .cs-skills{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 28px;margin:0 0 clamp(24px,3vw,36px)!important;padding:18px 22px 20px;
  background:var(--cs-blue-tint);border:2px solid var(--cs-ink);border-radius:var(--cs-radius);box-shadow:4px 5px 0 var(--cs-ink)}
@media (min-width:900px){#main .cs-page .cs-skills{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  #main .cs-page .cs-skills-h,#main .cs-page .cs-skills-role{grid-column:1 / -1}}
#main .cs-page .cs-skills > *{margin:0!important}
#main .cs-page .cs-skills-h{font:700 clamp(1.25rem,1.8vw,1.5rem)/1.15 var(--cs-display)!important;color:var(--cs-ink)}
#main .cs-page .cs-skills-k{font-size:.875rem!important;line-height:1.3!important;font-weight:800;color:var(--cs-pink)!important;margin:0 0 6px!important}
#main .cs-page .cs-skills-skill{display:inline-block;padding:6px 14px;border-radius:12px;background:var(--cs-yellow);border:2px solid var(--cs-ink);
  font:650 clamp(1.1rem,1.5vw,1.25rem)/1.25 var(--cs-display)!important}
#main .cs-page .cs-skills-detail,#main .cs-page .cs-skills-first{margin-top:10px!important;font-size:1.0625rem!important;line-height:1.5!important}
#main .cs-page .cs-skills-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#main .cs-page .cs-skills-chips li{margin:0!important;padding:5px 12px!important;background:#fff;border:1.5px solid var(--cs-ink);border-radius:14px;
  font-size:1rem!important;line-height:1.35!important}
#main .cs-page .cs-skills-chips li::marker{content:none}
#main .cs-page .cs-skills-chips a{font-weight:750}
#main .cs-page .cs-skills-chips span{font-weight:600}
#main .cs-page .cs-skills-role{padding-top:12px;border-top:1.5px solid var(--cs-line);font-size:1.0625rem!important}
#main .cs-page .cs-term-from{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:var(--cs-yellow);border:1.5px solid var(--cs-ink);
  font:750 .8125rem/1.3 var(--body,'Satoshi',sans-serif);vertical-align:.2em;white-space:nowrap}
#main .cs-page .cs-terms-back{margin-top:20px!important;padding:14px 18px;border:1.5px solid var(--cs-ink);border-radius:var(--cs-radius-sm);background:#fff}
#main .cs-page .cs-terms-back-h{font:650 1.125rem/1.25 var(--cs-display)!important;margin:0 0 8px!important}
#main .cs-page .cs-terms-back ul{list-style:none;padding:0}
#main .cs-page .cs-terms-back li{font-size:1rem!important;line-height:1.5!important;padding:0!important}
#main .cs-page .cs-terms-back li::marker{content:none}
@media print{#main .cs-page .cs-skills{box-shadow:none;background:#fff}}