/* ==========================================================================
   spec-campaign.css · the campaign case studies (revised packet, 27 September 2026; v2.4, 28 September: a three-up film row; v2.5, 29 September: the Onebrief skin in its 28 September system)
   JasonWalker.design · work/case-cadence.html, case-onebrief.html, case-playlab.html,
   case-black-forest.html and its five product pages (case-black-forest-<product>.html)

   Generated pages (_preview/spec-cases-2026-09-27/build.py) share this sheet and
   assets/js/spec-campaign.js. The shell (navigation, closing, footer) stays the
   Walker system. Everything inside <main> wears its own brand: one set of layout
   mechanics, four skins, set by body[data-brand]. No common campaign skin.

     Black Forest   carbon and bone, Barlow Condensed set monumental and upper case,
                    one packaging colour per product (--accent), the standard cut
     Cadence        warm paper and cobalt fields, Instrument Serif headlines, Inter,
                    the care interval
     Onebrief       Command and Mineral, Big Shoulders Black statements, Archivo Variable,
                    Signal blue for information in register, Amber for a changed state,
                    DejaVu Sans Mono labels, the shared line (29 September 2026)
     Playlab        warm paper, cobalt, lime and forest fields, DM Sans set close,
                    violet acetate, monospaced labels

   A page: the key visual (16:9 on a desktop, the 4:5 composition on a phone), the
   title and one sentence, the move, paid social (each A/B pair side by side), the
   three emails live, the working page live (desktop and phone), the system (voice,
   motif, colour), what comes next, the earlier film where there is one, and the
   sources in one closed drawer.

   Onebrief and Playlab (the deep package, body.cs--deep) lead differently: the title
   with its premise and actions, the films (Onebrief) or the worked example (Playlab),
   the website concept introduced by its renders and opened in the prototype enclosure,
   the emails as previews that open in a viewer, the social concepts with a format
   switch, the system, and what I made.

   Embeds: each email and web page is a real page in an iframe drawn at its layout
   width and scaled to its column by the script (.is-fit). Without the script the
   frame keeps its layout width and scrolls sideways; nothing is a screenshot.

   Faces: the packet's own files, under the SIL Open Font License (licences beside
   each file in assets/fonts/spec/). Relative paths only.
   ========================================================================== */

@font-face{font-family:'CS Barlow Condensed';src:url('../fonts/spec/barlow-condensed/BarlowCondensed-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'CS Instrument Serif';src:url('../fonts/spec/instrument-serif/InstrumentSerif-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CS Instrument Serif';src:url('../fonts/spec/instrument-serif/InstrumentSerif-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'CS Space Grotesk';src:url('../fonts/spec/space-grotesk/SpaceGroteskAesthetic400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CS Space Grotesk';src:url('../fonts/spec/space-grotesk/SpaceGroteskAesthetic700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'CS Inter';src:url('../fonts/spec/inter/InterAesthetic400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CS Inter';src:url('../fonts/spec/inter/InterAesthetic700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'CS DM Sans';src:url('../fonts/spec/dm-sans/DMSansAesthetic400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CS DM Sans';src:url('../fonts/spec/dm-sans/DMSansAesthetic700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'CS Mono';src:url('../fonts/spec/dejavu-sans-mono/DejaVuSansMono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* ------------------------------------------------------------ the skins -- */
body.cs{
  --cs-edge:clamp(16px,4.4vw,84px);
  --cs-head:64px;
  --cs-max:1560px;
  --cs-gap:clamp(12px,1.6vw,24px);
  --cs-sec:clamp(64px,8vw,128px);
  /* Black Forest is the default skin */
  --bg:#11100E; --fg:#EDE5D7; --muted:rgba(237,229,215,.76); --rule:rgba(237,229,215,.22);
  --alt-bg:#EDE5D7; --alt-fg:#11100E; --alt-muted:rgba(17,16,14,.76); --alt-rule:rgba(17,16,14,.2);
  --accent:#C09B70; --mark:var(--accent); --alt-mark:#11100E; --link:var(--fg);
  --display:'CS Barlow Condensed','Arial Narrow',sans-serif; --d-weight:700; --d-case:uppercase; --d-track:0; --d-lead:.9;
  --body:'CS Space Grotesk',system-ui,sans-serif;
  --label:var(--body); --l-weight:700; --l-track:.14em;
  --btn-bg:var(--fg); --btn-fg:var(--bg);
  --frame:#000;
  background:#171717;
}
@media (max-width:780px){ body.cs{ --cs-head:58px; } }
body.cs[data-brand="cadence"]{
  --bg:#F5F4ED; --fg:#10294D; --muted:rgba(16,41,77,.78); --rule:rgba(16,41,77,.18);
  --alt-bg:#183BE8; --alt-fg:#FFFFFF; --alt-muted:rgba(255,255,255,.86); --alt-rule:rgba(255,255,255,.34);
  --accent:#183BE8; --mark:#183BE8; --alt-mark:#FFFFFF; --link:#10294D;
  --alt2-bg:#10294D; --alt2-fg:#F5F4ED; --alt2-muted:rgba(245,244,237,.8); --alt2-rule:rgba(245,244,237,.26); --alt2-mark:#A6C7ED;
  --display:'CS Instrument Serif',Georgia,serif; --d-weight:400; --d-case:none; --d-track:-.012em; --d-lead:.98;
  --body:'CS Inter',system-ui,sans-serif;
  --frame:#10294D;
}
/* Onebrief and Playlab: the deep package (27 September 2026). Their proposed extension palettes; labels in
   the monospaced face their systems use for time, sequence and source.
   Onebrief (v2.5, 29 September 2026): the 28 September system. Big Shoulders Black, Archivo Variable and DejaVu
   Sans Mono (assets/css/onebrief-type.css, loaded by the page), Command, Mineral, Signal, Slate and Amber; links on
   light grounds #006CB1. The page's own sheet is assets/css/onebrief-case.css. */
body.cs[data-brand="onebrief"]{
  --bg:#081218; --fg:#EDF1F3; --muted:rgba(237,241,243,.74); --rule:rgba(237,241,243,.16);
  --alt-bg:#EDF1F3; --alt-fg:#081218; --alt-muted:#526675; --alt-rule:rgba(8,18,24,.14);
  --alt2-bg:#0E1B24; --alt2-fg:#EDF1F3; --alt2-muted:rgba(237,241,243,.76); --alt2-rule:rgba(237,241,243,.16); --alt2-mark:#019EFF;
  --accent:#019EFF; --signal:#019EFF; --amber:#E6B66A; --steel:#526675; --mark:#019EFF; --alt-mark:#006CB1; --link:#EDF1F3;
  --btn-bg:#019EFF; --btn-fg:#081218; --alt-btn-bg:#081218; --alt-btn-fg:#EDF1F3; --alt2-btn-bg:#019EFF; --alt2-btn-fg:#081218;
  --display:'Big Shoulders','Arial Narrow',sans-serif; --d-weight:900; --d-case:uppercase; --d-track:.004em; --d-lead:.86;
  --body:'Archivo Variable',Archivo,system-ui,sans-serif;
  --label:'DejaVu Sans Mono',ui-monospace,Menlo,monospace; --l-weight:400; --l-track:.1em;
  --frame:#000;
}
body.cs[data-brand="playlab"]{
  --bg:#F6F3E9; --fg:#112D29; --muted:rgba(17,45,41,.78); --rule:rgba(17,45,41,.18);
  --alt-bg:#214BEE; --alt-fg:#FFFFFF; --alt-muted:rgba(255,255,255,.88); --alt-rule:rgba(255,255,255,.3); --alt-mark:#DCF263;
  --alt2-bg:#DCF263; --alt2-fg:#112D29; --alt2-muted:#112D29; --alt2-rule:rgba(17,45,41,.24); --alt2-mark:#214BEE;
  --alt3-bg:#112D29; --alt3-fg:#F6F3E9; --alt3-muted:rgba(246,243,233,.82); --alt3-rule:rgba(246,243,233,.24); --alt3-mark:#DCF263;
  --violet:#B89CFF; --orange:#F2711C; --signal:#DCF263;
  --accent:#214BEE; --mark:#214BEE; --link:#112D29;
  --btn-bg:#214BEE; --btn-fg:#FFFFFF; --alt-btn-bg:#DCF263; --alt-btn-fg:#112D29; --alt2-btn-bg:#112D29; --alt2-btn-fg:#F6F3E9; --alt3-btn-bg:#DCF263; --alt3-btn-fg:#112D29;
  --display:'CS DM Sans',system-ui,sans-serif; --d-weight:700; --d-case:none; --d-track:-.045em; --d-lead:1;
  --body:'CS DM Sans',system-ui,sans-serif;
  --label:'CS Mono',ui-monospace,Menlo,monospace; --l-weight:400; --l-track:.1em;
  --frame:#112D29;
}

body.cs main{background:var(--bg);color:var(--fg);font-family:var(--body);overflow-x:clip}
body.cs ::selection{background:var(--fg);color:var(--bg)}
.cs .cs-wrap{width:100%;max-width:var(--cs-max);margin:0 auto;padding:0 var(--cs-edge);box-sizing:border-box}
.cs main img{max-width:100%;height:auto;display:block}
.cs main :where(h1,h2,h3,h4,p,figure,ol,ul,dl,dd,blockquote){margin:0;padding:0}   /* outranks system.css p{margin}; a study sets its own spacing */
main :where(p,li,dt,dd,figcaption,td,th,summary){color:inherit;font-family:inherit}   /* ties system.css p{} and tokens.css figcaption{} and wins by order; any class here outranks it */
:where(.cs main) a{color:inherit}
:where(.cs main) ol,:where(.cs main) ul{list-style:none}
.cs main :focus-visible{outline:2px solid currentColor;outline-offset:3px}
.cs .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs .cs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.cs-skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:#111;padding:12px 16px;font-weight:500}
.cs-skip:focus{left:12px;top:12px}
.cs main [id]{scroll-margin-top:calc(var(--cs-head) + 16px)}

/* ------------------------------------------------------------ sections --- */
.cs-sec{padding:var(--cs-sec) 0;background:var(--bg);color:var(--fg)}
.cs-alt{background:var(--alt-bg);color:var(--alt-fg);--bg:var(--alt-bg);--fg:var(--alt-fg);--muted:var(--alt-muted);--rule:var(--alt-rule);--mark:var(--alt-mark);--link:var(--alt-fg);--btn-bg:var(--alt-btn-bg,var(--alt-fg));--btn-fg:var(--alt-btn-fg,var(--alt-bg))}
.cs-alt2{background:var(--alt2-bg);color:var(--alt2-fg);--bg:var(--alt2-bg);--fg:var(--alt2-fg);--muted:var(--alt2-muted);--rule:var(--alt2-rule);--mark:var(--alt2-mark);--link:var(--alt2-fg);--btn-bg:var(--alt2-btn-bg,var(--alt2-fg));--btn-fg:var(--alt2-btn-fg,var(--alt2-bg))}
.cs-alt3{background:var(--alt3-bg);color:var(--alt3-fg);--bg:var(--alt3-bg);--fg:var(--alt3-fg);--muted:var(--alt3-muted);--rule:var(--alt3-rule);--mark:var(--alt3-mark);--link:var(--alt3-fg);--btn-bg:var(--alt3-btn-bg,var(--alt3-fg));--btn-fg:var(--alt3-btn-fg,var(--alt3-bg))}
/* Black Forest's marks always take the product's own color */
body.cs[data-brand="black-forest"] .cs-motif{color:var(--accent)}
.cs-head{margin-bottom:clamp(28px,3.4vw,52px);display:grid;gap:clamp(10px,1.2vw,16px)}
.cs-kick{font:var(--l-weight) 12px/1.3 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--muted)}
.cs-kick a{text-decoration:none;border-bottom:1px solid var(--rule)}
.cs-kick a:hover{border-bottom-color:currentColor}
.cs-kick .cs-dot{padding:0 .5em;opacity:.6}
.cs-h2,.cs-title,.cs-chap__title,.cs-voice__line{font-family:var(--display);font-weight:var(--d-weight);text-transform:var(--d-case);letter-spacing:var(--d-track);line-height:var(--d-lead);text-wrap:balance}
.cs-h2{font-size:clamp(34px,4.6vw,72px);max-width:18ch}
.cs-label{font:var(--l-weight) 12.5px/1.35 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--fg)}
.cs-copy{font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--muted);max-width:44ch;text-wrap:pretty}
.cs-note{margin-top:clamp(20px,2.2vw,32px)!important;font-size:14px;line-height:1.55;color:var(--muted);max-width:68ch}
.cs-link{display:inline-flex;align-items:center;gap:8px;font:700 15px/1.2 var(--body);color:var(--link);text-decoration:none;border-bottom:2px solid var(--mark);padding-bottom:3px;transition:border-color .2s,color .2s}
.cs-link:hover{border-bottom-color:currentColor}
.cs-links{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(20px,2.2vw,32px)!important}

/* ------------------------------------------------------------ the key visual */
.cs-hero{background:var(--bg);line-height:0}
.cs-hero picture,.cs-hero img{display:block;width:100%;height:auto}
.cs-hero img{aspect-ratio:16/9;object-fit:cover}
@media (max-width:760px){ .cs-hero img{aspect-ratio:4/5} }

/* ------------------------------------------------------------ the title --- */
.cs-intro{background:var(--bg);color:var(--fg);padding:clamp(36px,4.6vw,72px) 0 clamp(56px,6.4vw,104px)}
.cs-intro__grid{display:grid;gap:clamp(18px,2.4vw,40px)}
.cs-intro__head{display:grid;gap:clamp(12px,1.4vw,20px);align-content:start}
.cs-title{font-size:clamp(40px,5.2vw,84px);max-width:14ch}
.cs-deck{font-size:clamp(19px,1.7vw,26px);line-height:1.42;color:var(--fg);max-width:34ch;text-wrap:pretty}
.cs-role{margin-top:clamp(16px,1.8vw,24px)!important;font-size:14px;line-height:1.5;color:var(--muted);max-width:52ch}
@media (min-width:1000px){
  .cs-intro__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end}
}

/* ------------------------------------------------------------ the move ---- */
.cs-move{display:grid;gap:clamp(24px,3vw,48px)}
.cs-move > div{display:grid;gap:12px;align-content:start;border-top:1px solid var(--rule);padding-top:18px}
.cs-move p{font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:var(--fg);max-width:32ch;text-wrap:pretty}
@media (min-width:900px){ .cs-move{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ------------------------------------------------------------ paid social - */
.cs-tests{display:grid;gap:clamp(36px,4vw,56px) var(--cs-gap)}
.cs-test{display:grid;gap:14px;align-content:start;min-width:0}
.cs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.cs-pair figure{min-width:0;position:relative}
.cs-pair img{width:100%;aspect-ratio:4/5;object-fit:cover;background:rgba(127,127,127,.12);outline:1px solid var(--rule);outline-offset:-1px}
.cs-pair figcaption{margin-top:8px;font:700 12px/1 var(--body);letter-spacing:.14em;color:var(--muted)}
.cs-var{display:grid;gap:4px;font-size:15px;line-height:1.45;color:var(--fg);max-width:44ch}
.cs-var b{font:700 12px/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (min-width:1000px){ .cs-tests{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ------------------------------------------------------------ embeds ------ */
/* A real page in a frame at its layout width (--w), scaled by the script to the column (--k). The box takes the
   page's full height (--h), so the frame never scrolls and the reader scrolls past it as part of this page. */
.cs-embed{position:relative;--w:var(--dw);--h:var(--dh);overflow:auto;background:var(--frame);max-width:100%}
.cs-embed iframe{display:block;border:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);background:#fff}
.cs-embed.is-fit{overflow:hidden;aspect-ratio:var(--w) / calc(var(--h) - 2 * var(--crop,0))}
.cs-embed.is-fit iframe{position:absolute;top:0;left:0;transform:scale(var(--k,1)) translateY(calc(var(--crop,0) * -1px));transform-origin:0 0}

/* email: each whole, three across; on a phone one at a time, sideways, at the email's own phone width */
.cs-mails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cs-gap);align-items:start}
.cs-mail{position:relative;min-width:0;display:grid;gap:14px}
.cs-mail .cs-embed{outline:1px solid var(--rule);outline-offset:-1px}
.cs-mail figcaption{display:grid;gap:6px}
.cs-mail__n{font:700 12px/1 var(--body);letter-spacing:.14em;color:var(--muted)}
.cs-mail__open{font:700 17px/1.3 var(--body);color:var(--fg);text-decoration:none;text-wrap:balance}
.cs-mail__open span[aria-hidden]{display:inline-block;margin-left:6px;transition:transform .2s}
.cs-mail__open::after{content:'';position:absolute;inset:0;z-index:1}   /* the whole email opens it */
.cs-mail:hover .cs-mail__open span[aria-hidden]{transform:translate(2px,-2px)}
.cs-mail:hover .cs-embed{outline-color:currentColor}
.cs-mail__files{position:relative;z-index:2;font-size:13.5px;line-height:1.5;color:var(--muted)}
.cs-mail__files a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.cs-mail__files a:hover{border-bottom-color:currentColor;color:var(--fg)}
.cs-mail__open:focus-visible{outline:none}
.cs-mail__open:focus-visible::after{outline:2px solid currentColor;outline-offset:4px}

/* the working page: the desktop layout beside the phone layout, at one height (the grid ratio comes from the page) */
.cs-site{display:grid;grid-template-columns:minmax(0,var(--r,3fr)) minmax(0,1fr);gap:var(--cs-gap);align-items:start}
.cs-site .cs-embed{outline:1px solid var(--rule);outline-offset:-1px}
.cs-site__label{margin-top:10px;font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------------------------ the system -- */
.cs-voice{display:grid;gap:clamp(28px,3vw,44px) var(--cs-gap)}
.cs-voice > div{display:grid;gap:10px;align-content:start;border-top:1px solid var(--rule);padding-top:18px}
.cs-voice__line{font-size:clamp(26px,2.5vw,40px);color:var(--fg)}
.cs-voice__rule{font-size:15px;line-height:1.45;color:var(--muted);max-width:32ch}
@media (min-width:1000px){ .cs-voice{grid-template-columns:repeat(4,minmax(0,1fr))} }
.cs-sys{display:grid;gap:clamp(40px,5vw,72px) var(--cs-gap);margin-top:clamp(48px,6vw,96px)}
@media (min-width:1000px){ .cs-sys{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)} }
.cs-sys > div{display:grid;gap:14px;align-content:start}
.cs-sys p{font-size:15.5px;line-height:1.5;color:var(--muted);max-width:44ch}

/* the colour relationships: intent first, then unity to variety; bar widths are the proposed area ratios */
.cs-tone{display:grid;gap:12px}
.cs-tone li{display:grid;grid-template-columns:minmax(92px,.34fr) minmax(0,1fr);gap:6px 16px;align-items:center}
.cs-tone__name{display:grid;gap:2px;font-size:14px;line-height:1.3}
.cs-tone__name b{font-weight:700;color:var(--fg)}
.cs-tone__name span{color:var(--muted);font-size:13px}
.cs-tone__bar{display:flex;height:44px;gap:2px}
.cs-tone__bar i{display:block;min-width:0}
.cs-tone__ratio{grid-column:2;font-size:12.5px;color:var(--muted);letter-spacing:.04em}

/* the motifs, drawn as the campaigns use them */
.cs-motif{min-height:64px;display:flex;align-items:center;color:var(--mark)}
.cs-cut{display:flex;gap:clamp(10px,1.2vw,18px);width:100%;max-width:560px}
.cs-cut i{display:block;height:4px;background:currentColor}
.cs-cut i:first-child{flex:5.4}.cs-cut i:last-child{flex:2}
.cs-interval{position:relative;display:flex;align-items:center;gap:14px;width:100%;max-width:640px;font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.cs-interval::before,.cs-interval::after{content:'';flex:1;height:2px;background:currentColor}
.cs-interval b{order:0}
.cs-interval .cs-end{position:absolute;top:50%;width:2px;height:16px;margin-top:-8px;background:currentColor}
.cs-interval .cs-end:first-of-type{left:0}.cs-interval .cs-end:last-of-type{right:0}

/* ------------------------------------------------------------ next -------- */
.cs-next{display:grid;gap:clamp(24px,3vw,48px)}
.cs-next > div{display:grid;gap:12px;align-content:start;border-top:1px solid var(--rule);padding-top:18px}
.cs-next p{font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--fg);max-width:40ch;text-wrap:pretty}
@media (min-width:900px){ .cs-next{grid-template-columns:repeat(2,minmax(0,1fr))} .cs-next.cs-next--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.cs-get{margin-top:clamp(28px,3vw,44px)!important;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:14px;line-height:1.5;color:var(--muted)}
.cs-get a{font-weight:700;color:var(--fg);text-decoration:none;border-bottom:2px solid var(--mark);padding-bottom:2px}
.cs-get a:hover{border-bottom-color:currentColor}
.cs-get span span{margin-left:8px}

/* ------------------------------------------------------------ Black Forest: the five chapters */
.cs-open{padding:clamp(44px,6vw,104px) 0 clamp(36px,4.4vw,72px);background:var(--bg);color:var(--fg)}
.cs-open .cs-title{font-size:clamp(54px,7.4vw,128px);max-width:16ch;margin-top:clamp(12px,1.4vw,20px)!important}
.cs-open .cs-deck{margin-top:clamp(20px,2.4vw,36px)!important}
.cs-open__grid{display:grid;gap:clamp(20px,2.4vw,40px)}
@media (min-width:1000px){ .cs-open__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end} }
.cs-index{margin-top:clamp(32px,3.6vw,56px)!important;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--cs-gap)}
.cs-index a{display:grid;gap:10px;text-decoration:none;color:var(--fg)}
.cs-index img{width:100%;aspect-ratio:4/5;object-fit:cover;border-bottom:4px solid var(--c)}
.cs-index b{font:700 12px/1 var(--body);letter-spacing:.14em;color:var(--c)}
.cs-index span{font:700 clamp(16px,1.4vw,22px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.cs-index a:hover span{color:var(--c)}
@media (max-width:760px){
  .cs main .cs-index{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(-1 * var(--cs-edge));margin-right:calc(-1 * var(--cs-edge));padding:0 var(--cs-edge) 6px;scroll-padding:0 var(--cs-edge)}
  .cs-index li{scroll-snap-align:start}
}
.cs-chap{background:var(--bg);color:var(--fg)}
.cs-chap > a{display:block;line-height:0}
.cs-chap picture,.cs-chap img{display:block;width:100%;height:auto}
.cs-chap__cap{padding:clamp(28px,3vw,48px) 0 clamp(64px,7vw,112px)}
.cs-chap__grid{display:grid;gap:clamp(16px,2vw,32px);align-items:start}
@media (min-width:1000px){ .cs-chap__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:end} }
.cs-chap__n{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cs-chap__title{margin-top:12px!important;font-size:clamp(32px,3.4vw,56px);max-width:14ch}
.cs-chap__cap p{font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--muted);max-width:42ch;text-wrap:pretty}
.cs-chap .cs-link{border-bottom-color:var(--accent);white-space:nowrap}
.cs-cut.cs-cut--chap{max-width:none;margin-bottom:clamp(22px,2.4vw,36px);color:var(--accent)}
.cs-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.cs-colors li{display:grid;gap:8px}
.cs-colors i{display:block;height:64px;background:var(--c)}
.cs-colors span{font-size:13px;line-height:1.35;color:var(--muted)}
.cs-colors b{display:block;color:var(--fg);font-weight:700}
@media (max-width:760px){ .cs-colors{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px} }
/* the product pages: back to the five, and on to the next */
.cs-more{display:grid;gap:14px;border-top:1px solid var(--rule);padding-top:18px}
.cs-more ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--cs-gap)}
.cs-more a{display:grid;gap:8px;text-decoration:none;color:var(--fg)}
.cs-more a img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cs-more a span{font:700 13px/1.25 var(--body)}
.cs-more a[aria-current] span{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.cs-more a[aria-current] img{outline:3px solid var(--accent);outline-offset:-3px}
@media (max-width:760px){ .cs-more ol{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px} }

/* ------------------------------------------------------------ films ------- */
/* One player: a silent preview (the hooks) or a poster, "Watch with sound" from the beginning (the earlier
   commercials), then the browser's own controls. The frame's shape follows the cut shown. */
.cs-film{min-width:0}
.cs-frame{position:relative;background:#000;aspect-ratio:16/9;width:100%;overflow:hidden}
.cs-film[data-fmt="phone"] .cs-frame{aspect-ratio:9/16;margin:0 auto;width:min(100%,calc((100vh - var(--cs-head) - 96px) * 9 / 16))}
@supports (height:100svh){ .cs-film[data-fmt="phone"] .cs-frame{width:min(100%,calc((100svh - var(--cs-head) - 96px) * 9 / 16))} }
.cs-frame video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#000}
.cs-frame noscript img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cs-play{position:absolute;left:clamp(12px,1.4vw,20px);bottom:clamp(12px,1.4vw,20px);z-index:2;display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:0 18px 0 15px;border:1px solid rgba(255,255,255,.5);background:rgba(10,10,10,.72);color:#fff;
  font:700 15px/1 var(--body);letter-spacing:.01em;cursor:pointer;transition:background-color .2s,border-color .2s}
.cs-play:hover{background:rgba(10,10,10,.9);border-color:#fff}
.cs-play svg{width:13px;height:13px;fill:currentColor}
.cs-play:focus-visible,.cs-hold:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cs-hold{position:absolute;right:clamp(12px,1.4vw,20px);bottom:clamp(12px,1.4vw,20px);z-index:2;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.4);background:rgba(10,10,10,.56);color:#fff;cursor:pointer;opacity:.86;transition:opacity .2s,background-color .2s}
.cs-hold:hover,.cs-hold:focus-visible{opacity:1;background:rgba(10,10,10,.8)}
.cs-hold svg{width:12px;height:12px;fill:currentColor}
.cs-hold .cs-ic-play{display:none}
.cs-hold[data-state="paused"] .cs-ic-pause{display:none}
.cs-hold[data-state="paused"] .cs-ic-play{display:block}
.cs-hold[hidden],.cs-play[hidden]{display:none}
.cs-film.is-sound .cs-play,.cs-film.is-sound .cs-hold{display:none}
.cs-noscript{margin-top:12px!important;font-size:14px}
.cs-hooks{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,1fr);gap:var(--cs-gap);align-items:start}
.cs-hooks .cs-film[data-fmt="phone"] .cs-frame{width:100%}
.cs-hooks figcaption{margin-top:10px;font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cs-earlier .cs-film{max-width:1200px}
.cs-earlier .cs-copy{margin-bottom:clamp(20px,2.4vw,32px)}

/* ------------------------------------------------------------ the drawer -- */
.cs-src{padding:clamp(40px,4.4vw,64px) 0}
.cs-details{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cs-details summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font:700 15px/1.3 var(--body);color:var(--fg)}
.cs-details summary::-webkit-details-marker{display:none}
.cs-details summary::after{content:'+';font:400 24px/1 var(--body);transition:transform .2s}
.cs-details[open] summary::after{transform:rotate(45deg)}
.cs-details__body{display:grid;gap:14px;padding:4px 0 28px;max-width:78ch;font-size:14.5px;line-height:1.6;color:var(--muted)}
.cs-details__body a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--rule)}
.cs-details__body a:hover{border-bottom-color:currentColor}
.cs-details__body h3{font:700 12px/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);margin-top:8px}
.cs-details__body ul{display:grid;gap:4px}

/* ------------------------------------------------------------ Onebrief and Playlab (the deep package) */
/* actions: one filled button (the website), the rest are links */
.cs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(24px,2.6vw,36px)!important}
.cs-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;background:var(--btn-bg);color:var(--btn-fg);
  font:700 15px/1 var(--body);letter-spacing:.01em;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.cs-btn span[aria-hidden]{transition:transform .2s}
.cs-btn:hover span[aria-hidden]{transform:translateX(3px)}
.cs .cs-btn:focus-visible{outline:2px solid var(--btn-bg);outline-offset:3px}
.cs-link[data-view]{cursor:pointer}

/* the title, the signature and the premise */
.cs-intro--deep{padding:clamp(40px,5vw,88px) 0 clamp(56px,6.4vw,104px)}
.cs-intro--deep .cs-title{font-size:clamp(48px,6.6vw,112px);max-width:12ch}
.cs-sig{display:grid;gap:8px;margin-top:clamp(18px,2vw,28px)!important}
.cs-sig span:last-child{font:700 clamp(18px,1.5vw,22px)/1.3 var(--body);color:var(--fg)}
.cs-premise{display:grid;gap:clamp(20px,2.4vw,40px);margin-top:clamp(44px,5vw,80px)!important}
.cs-premise > div{display:grid;gap:10px;align-content:start;border-top:1px solid var(--rule);padding-top:16px}
.cs-premise dt{color:var(--muted)}
.cs-premise dd{font-size:clamp(16px,1.2vw,18px);line-height:1.5;color:var(--fg);max-width:36ch;text-wrap:pretty}
@media (min-width:900px){ .cs-premise{grid-template-columns:repeat(3,minmax(0,1fr))} }
.cs-intro--deep .cs-role{margin-top:clamp(28px,3vw,44px)!important}

/* the films: the frame, its title and length, the composition switch */
.cs-films .cs-film--ob{max-width:1480px}
.cs-film__cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;margin-top:12px}
.cs-film__t{display:flex;align-items:baseline;gap:12px;font-size:15px;line-height:1.3}
.cs-film__t b{font-weight:700;color:var(--fg)}
.cs-film__t span{font:var(--l-weight) 12px/1 var(--label);letter-spacing:var(--l-track);color:var(--muted)}
.cs-film__about{display:grid;gap:8px var(--cs-gap);margin-top:clamp(18px,2vw,28px)}
.cs-film__about .cs-copy{color:var(--fg);max-width:52ch}
@media (min-width:900px){ .cs-film__about{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start} .cs-film__about .cs-note{margin-top:0!important} }
.cs-films__two{display:grid;gap:clamp(44px,4vw,64px) var(--cs-gap)}
@media (min-width:900px){ .cs-films__two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} .cs-films__three{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:900px) and (max-width:1199px){ .cs-films__three{grid-template-columns:repeat(2,minmax(0,1fr))} .cs-films__three .cs-films__one:first-child{grid-column:1/-1} }
.cs-films__one .cs-copy{margin-top:14px;color:var(--fg)}
/* the captions, in a line under the frame (the films set their own words in the picture) */
.cs-cc{min-height:2.7em;margin:12px auto 0!important;max-width:62ch;text-align:center;white-space:pre-line;font:500 clamp(15px,1.2vw,19px)/1.35 var(--body);color:var(--fg);text-wrap:balance}
.cs-cc[hidden]{display:none}
/* the Onebrief films carry their own typography low and left: the controls sit together, top right */
.cs-film--ob .cs-play{left:auto;bottom:auto;top:clamp(10px,1.2vw,18px);right:clamp(10px,1.2vw,18px)}
.cs-film--ob[data-preview] .cs-play{right:calc(clamp(10px,1.2vw,18px) + 52px)}
.cs-film--ob .cs-hold{bottom:auto;top:clamp(10px,1.2vw,18px);right:clamp(10px,1.2vw,18px)}
/* the vertical cuts keep their words left and high: there the controls sit bottom right */
.cs-film--ob[data-fmt="phone"] .cs-play,.cs-film--ob[data-fmt="phone"] .cs-hold{top:auto;bottom:12px}

/* a segmented switch: film compositions, ad formats */
.cs-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--rule);justify-self:start}
.cs-seg[hidden]{display:none}
.cs-seg button{appearance:none;-webkit-appearance:none;border:0;border-radius:0;margin:0;background:transparent;color:var(--muted);cursor:pointer;
  min-height:40px;padding:0 14px;font:var(--l-weight) 12px/1 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;transition:background-color .2s,color .2s}
.cs-seg button + button{border-left:1px solid var(--rule)}
.cs-seg button:hover{color:var(--fg)}
.cs-seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.cs .cs-seg button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* the website concept: its renders lead in; the page itself opens in the prototype enclosure */
.cs-launch{display:grid;grid-template-columns:minmax(0,3.46fr) minmax(0,1fr);gap:var(--cs-gap);align-items:start}
.cs-launch a{display:block;position:relative;line-height:0;text-decoration:none;outline:1px solid var(--rule);outline-offset:-1px;background:#0B1015}
.cs-launch img{width:100%;height:auto}
.cs-launch__cue{position:absolute;left:clamp(12px,1.4vw,20px);bottom:clamp(12px,1.4vw,20px);display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--btn-bg);color:var(--btn-fg);font:700 15px/1 var(--body);line-height:1;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.cs-launch__desk:hover .cs-launch__cue,.cs-launch__desk:focus-visible .cs-launch__cue{opacity:1;transform:none}
.cs .cs-launch a:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.cs-launch__text{display:grid;gap:10px var(--cs-gap);margin-top:clamp(24px,2.6vw,40px)}
.cs-launch__text .cs-copy{color:var(--fg);max-width:58ch}
.cs-launch__text .cs-actions{margin-top:6px!important}
@media (min-width:1000px){ .cs-launch__text{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start} .cs-launch__text .cs-actions{margin-top:0!important;grid-column:2;grid-row:1}
  .cs-launch__text .cs-note{grid-column:2;margin-top:0!important} }

/* the emails: a preview of each, whole in the viewer */
.cs-lede{margin-bottom:clamp(24px,2.6vw,40px)!important;max-width:56ch;color:var(--fg)}
.cs-mail--peek{gap:14px}
.cs-mail--peek figcaption{gap:4px}
.cs-mail__subj{font:700 17px/1.3 var(--body);color:var(--fg);text-wrap:balance}
.cs-mail__pre{font-size:14px;line-height:1.45;color:var(--muted)}
.cs-mail--peek .cs-mail__n{font:var(--l-weight) 12px/1.2 var(--label);letter-spacing:var(--l-track);text-transform:uppercase}
.cs-mail--peek .cs-mail__open{justify-self:start;margin-top:8px;font:700 14.5px/1.2 var(--body);color:var(--link);border-bottom:2px solid var(--mark);padding-bottom:3px}
.cs-mail--peek:hover .cs-mail__open{border-bottom-color:currentColor}

/* the social concepts: four at once, in the chosen format */
.cs-ads{display:grid;gap:clamp(16px,2vw,24px)}
.cs-ads__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cs-gap);align-items:start}
.cs-ads__grid figure{min-width:0}
.cs-ads__grid img{width:100%;height:auto;background:rgba(127,127,127,.12);outline:1px solid var(--rule);outline-offset:-1px;cursor:zoom-in}
.cs-ads__grid figcaption{margin-top:10px;font-size:14px;line-height:1.35;color:var(--muted)}
.cs-ads__grid figcaption b{font:var(--l-weight) 12px/1 var(--label);letter-spacing:var(--l-track);color:var(--fg);margin-right:6px}

/* the system: five voice principles, then the motif, the type, the palette and the continuum */
@media (min-width:1000px){ .cs-voice.cs-voice--5{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1280px){ .cs-voice.cs-voice--5{grid-template-columns:repeat(5,minmax(0,1fr))} }
.cs-voice--5 .cs-voice__line{font-size:clamp(22px,1.9vw,30px)}
@media (min-width:1000px){ .cs-sys.cs-sys--deep{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cs-type{display:grid;gap:16px}
.cs-type__row{display:grid;gap:6px;border-top:1px solid var(--rule);padding-top:14px}
.cs-sys .cs-type__spec{color:var(--fg);max-width:none}
.cs-sys .cs-type--display .cs-type__spec{font:var(--d-weight) clamp(30px,3vw,46px)/var(--d-lead) var(--display);text-transform:var(--d-case);letter-spacing:var(--d-track);text-wrap:balance}
.cs-sys .cs-type--body .cs-type__spec{font:400 clamp(17px,1.3vw,20px)/1.45 var(--body)}
.cs-sys .cs-type--label .cs-type__spec{font:400 13px/1.3 var(--label);letter-spacing:.1em;text-transform:uppercase}
.cs-sys .cs-type__meta{font-size:13.5px}
.cs-type__meta b{color:var(--fg);margin-right:4px}
.cs-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.cs-swatches li{display:grid;gap:8px;align-content:start}
.cs-swatches i{display:block;height:72px;background:var(--c);outline:1px solid var(--rule);outline-offset:-1px}
.cs-swatches span{font:400 12px/1.4 var(--label);letter-spacing:.04em;color:var(--muted)}
.cs-swatches b{display:block;font:700 13px/1.3 var(--body);letter-spacing:0;color:var(--fg)}
.cs-shared{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:560px;padding-top:36px;margin-bottom:6px;color:var(--mark)}
.cs-shared::before{content:'';position:absolute;left:0;right:0;top:15px;height:3px;background:currentColor}
.cs-shared span{position:relative;font:400 11px/1.2 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cs-shared span::before{content:'';position:absolute;top:-32px;left:0;width:3px;height:23px;background:var(--mark)}
.cs-shared span:nth-child(2){text-align:center}.cs-shared span:nth-child(2)::before{left:calc(50% - 1.5px)}
.cs-shared span:last-child{text-align:right}.cs-shared span:last-child::before{left:auto;right:0}
.cs-acetate{background:#FFFDF7;padding:clamp(20px,2vw,28px);box-shadow:8px 8px 0 #214BEE;max-width:440px;margin:4px 10px 16px 0}
.cs-sys .cs-acetate p{font:700 clamp(24px,2.2vw,34px)/1.14 var(--display);letter-spacing:-.03em;color:#112D29;max-width:none}
.cs-acetate mark{position:relative;z-index:0;background:none;color:inherit}
.cs-acetate mark::before{content:'';position:absolute;inset:-.08em -.22em;z-index:-1;background:#B89CFF;opacity:.7;transform:rotate(-2.5deg)}

/* what I made */
.cs-made{display:grid;gap:6px}
.cs-made li{position:relative;padding-left:18px;font-size:clamp(16px,1.2vw,18px);line-height:1.4;color:var(--fg)}
.cs-made li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--mark)}
.cs-next .cs-made__ai{margin-top:6px;font-size:14.5px;color:var(--muted)}

/* Playlab: the worked example, as teaching materials on the cobalt field */
.cs-flow{display:grid;gap:clamp(20px,2.2vw,32px);align-items:start}
@media (min-width:900px){ .cs-flow{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)} }
.cs-card{position:relative;isolation:isolate;background:#F6F3E9;color:#112D29;padding:clamp(18px,2vw,28px);box-shadow:8px 8px 0 rgba(17,45,41,.5)}
.cs-card .cs-label{color:#214BEE}
.cs-card--brief dl{display:grid;margin-top:14px}
.cs-card--brief dl > div{display:grid;gap:6px;padding:14px 0 12px;border-top:1px solid rgba(17,45,41,.16)}
.cs-card--brief dt{color:rgba(17,45,41,.8)}
.cs-card--brief dd{font:700 clamp(18px,1.5vw,22px)/1.3 var(--display);letter-spacing:-.02em}
.cs-talk{display:grid;gap:clamp(16px,1.6vw,22px)}
.cs-say{margin-top:10px!important;font:700 clamp(19px,1.6vw,26px)/1.25 var(--display);letter-spacing:-.025em;color:#112D29;max-width:34ch;text-wrap:pretty}
.cs-card--tool::after{content:'';position:absolute;z-index:-1;top:-10px;right:-12px;width:38%;height:calc(100% + 20px);background:#B89CFF;opacity:.62;transform:rotate(2deg);pointer-events:none}
.cs-card--review{background:#112D29;color:#F6F3E9}
.cs-card--review .cs-label{color:#DCF263}
.cs-card--review .cs-say{color:#F6F3E9}

/* the viewer: an email, or the website at phone width, live, on top of the page */
.cs-viewer{position:fixed;inset:0;margin:auto;padding:0;border:0;box-sizing:border-box;flex-direction:column;overflow:hidden;
  width:min(680px,calc(100vw - 32px));height:calc(100vh - 32px);max-width:none;max-height:none;background:#101214;color:#fff;box-shadow:0 24px 80px rgba(0,0,0,.55)}
@supports (height:100dvh){ .cs-viewer{height:min(980px,calc(100dvh - 32px))} }
.cs-viewer[open]{display:flex}
.cs-viewer[data-kind="phone"]{width:390px}
@supports (height:100dvh){ .cs-viewer[data-kind="phone"]{height:min(892px,calc(100dvh - 32px))} }
.cs-viewer::backdrop{background:rgba(6,8,10,.8)}
.cs-viewer__bar{flex:none;display:flex;align-items:center;gap:6px;min-height:52px;padding:0 6px 0 16px;border-bottom:1px solid rgba(255,255,255,.14);font:500 13.5px/1.25 system-ui,sans-serif}
.cs-viewer__title{flex:1;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.86)}
.cs-viewer__open,.cs-viewer__close{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;background:transparent;color:#fff;
  font:600 13.5px/1 system-ui,sans-serif;text-decoration:none;cursor:pointer}
.cs-viewer__close span{font-size:22px;line-height:1;font-weight:400}
.cs-viewer__open:hover,.cs-viewer__close:hover{background:rgba(255,255,255,.1)}
.cs-viewer__open:focus-visible,.cs-viewer__close:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.cs-viewer__stage{flex:1;min-height:0;background:#fff}
.cs-viewer__stage iframe{display:block;width:100%;height:100%;border:0}
html.cs-lock{overflow:hidden}

/* website concepts as tabs (Onebrief: Concept 1, Concept 2); without the script both panels show, labelled */
.cs-tabs__list{display:inline-flex;flex-wrap:wrap;border:1px solid var(--rule);margin-bottom:clamp(20px,2.4vw,32px)}
.cs-tabs__list[hidden]{display:none}
.cs-tabs__tab{appearance:none;-webkit-appearance:none;border:0;border-radius:0;margin:0;background:transparent;color:var(--muted);cursor:pointer;
  min-height:44px;padding:0 22px;font:var(--l-weight) 12px/1 var(--label);letter-spacing:var(--l-track);text-transform:uppercase;transition:background-color .2s,color .2s}
.cs-tabs__tab + .cs-tabs__tab{border-left:1px solid var(--rule)}
.cs-tabs__tab:hover{color:var(--fg)}
.cs-tabs__tab[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.cs .cs-tabs__tab:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.cs-tabs__panel[hidden]{display:none}
.cs-tabs__label{display:block;margin:0 0 14px!important}
.cs-tabs__panel + .cs-tabs__panel{margin-top:clamp(56px,6vw,96px)}
.cs-tabs[data-ready] .cs-tabs__label{display:none}
.cs-tabs[data-ready] .cs-tabs__panel + .cs-tabs__panel{margin-top:0}

@media (max-width:720px){
  .cs-desk-only{display:none!important}
  .cs-films .cs-frame{margin-left:calc(-1 * var(--cs-edge));margin-right:calc(-1 * var(--cs-edge))}
  .cs-films .cs-film[data-fmt="desk"] .cs-frame{width:auto}
  .cs-launch{grid-template-columns:minmax(0,1fr)}
  .cs-launch__desk{display:none!important}
  .cs-launch__phone{width:min(78%,300px);margin:0 auto}
  .cs-ads__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
  .cs-seg button{min-height:44px}
  .cs-swatches{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 6px}
  .cs-card--tool::after{right:-8px;width:32%}
  .cs-viewer,.cs-viewer[data-kind="phone"]{width:100vw;height:100vh;margin:0;box-shadow:none}
  @supports (height:100dvh){ .cs-viewer,.cs-viewer[data-kind="phone"]{height:100dvh} }
  .cs-viewer__bar{padding-top:env(safe-area-inset-top);padding-left:max(16px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
}
@media (prefers-reduced-motion:reduce){
  .cs-btn,.cs-btn span[aria-hidden],.cs-launch__cue,.cs-seg button,.cs-tabs__tab{transition:none}
}

/* ------------------------------------------------------------ phones ------ */
@media (max-width:720px){
  .cs-pair,.cs-mails,.cs-site,.cs-hooks,.cs-earlier .cs-frame{margin-left:calc(-1 * var(--cs-edge));margin-right:calc(-1 * var(--cs-edge))}
  .cs-pair{gap:6px}
  .cs-pair figcaption{padding:0 12px}
  .cs-var,.cs-test .cs-note{padding:0}
  /* the emails, one at a time, sideways, each at its phone layout */
  .cs-mails{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--cs-edge) 6px;scroll-padding:0 var(--cs-edge)}
  .cs-mail{scroll-snap-align:start}
  .cs-embed{--w:var(--pw,var(--dw));--h:var(--ph,var(--dh))}
  /* the working page: its phone layout, edge to edge, whole */
  .cs-site{grid-template-columns:minmax(0,1fr)}
  .cs-site__desk{display:none}
  .cs-site .cs-embed{outline:0}
  .cs-site__label{padding:0 var(--cs-edge)}
  .cs-hooks{grid-template-columns:minmax(0,1fr)}
  .cs-hooks .cs-film[data-fmt="desk"]{display:none}
  .cs-hooks figcaption{padding:0 var(--cs-edge)}
  .cs-film[data-fmt="phone"] .cs-frame{width:auto}
  .cs-film[data-fmt="phone"] .cs-play,.cs-film[data-fmt="phone"] .cs-hold{top:12px;bottom:auto}
  .cs-film--ob[data-fmt="phone"] .cs-play,.cs-film--ob[data-fmt="phone"] .cs-hold{top:auto;bottom:12px}
  .cs-tone li{grid-template-columns:minmax(0,1fr)}
  .cs-tone__ratio{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .cs-link,.cs-play,.cs-hold,.cs-mail__open span[aria-hidden],.cs-details summary::after{transition:none}
}

/* economy pass (27 Sep): the pictures lead; the explanation lives in the notes at the foot of each study */
.cs-intro--econ .cs-intro__grid{align-items:end}
.cs-intro--econ .cs-intro__body{display:flex;align-items:flex-end}
@media (min-width:900px){ .cs-intro--econ .cs-intro__body{justify-content:flex-end} }
.cs-launch__text--econ{display:flex!important;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px var(--cs-gap)}
.cs-launch__text--econ .cs-actions,.cs-launch__text--econ .cs-note{margin-top:0!important;grid-column:auto!important;grid-row:auto!important}
.cs-get--sys{margin-top:clamp(40px,5vw,72px)!important;padding-top:20px;border-top:1px solid var(--rule)}