/* Short case study template. Koto sets the pace, the drawing system sets the look. */
.cs{--edge:clamp(16px,2vw,24px);padding-inline:var(--edge);max-width:1920px;margin-inline:auto}
.cs .fig-cap{border:var(--line)}
.cs .fig{margin:12px}

/* first screen: the work, then a title block with the facts */
.cs-first{display:flex;flex-direction:column;gap:12px}
.cs-hero .fig{margin:12px 12px 0}
.cs-hero .fig-box{aspect-ratio:auto;height:clamp(300px,calc(100svh - 92px - 192px - 92px),760px)}
.cs-block{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,9fr);margin:12px 12px 24px;border:var(--line);background:var(--board)}
.cs-title{padding:16px 24px;display:flex;flex-direction:column;justify-content:center;gap:8px;border-right:var(--line)}
.cs-h1{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:40px;line-height:1.05;letter-spacing:-.04em}
.cs-line{font-size:14px;line-height:1.5;color:var(--quiet)}
.cs-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-fact{padding:16px 24px;border-right:1px solid rgba(255,255,255,.45);display:flex;flex-direction:column;gap:8px}
.cs-fact:last-child{border-right:0}
.cs-n{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(40px,4.4vw,64px);line-height:1.06;letter-spacing:-.045em;white-space:nowrap;color:#fff}
.cs-l{font-size:14px;line-height:1.4;color:#fff}

/* the five steps, always on screen */
.cs-bar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr)) auto;margin:0 12px 48px;background:var(--board);border:var(--line)}
.cs-bar a{padding:12px 16px;text-align:center;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1;color:var(--ink);text-decoration:none;border-right:var(--line);white-space:nowrap;transition:background var(--t-press)}
.cs-bar a:last-child{border-right:0}
.cs-bar a:hover{background:var(--signal);color:var(--ink)}
.cs-bar a.done{background:var(--ink);color:var(--board)}
.cs-bar a[aria-current=true]{background:var(--cobalt);color:#fff}
.cs-bar-n{opacity:.7}

/* steps */
.cs-main{display:flex;flex-direction:column;gap:96px;padding-bottom:96px}
.cs-step{display:flex;flex-direction:column;gap:48px;scroll-margin-top:64px}
.cs-tag{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:inherit}
.cs-head{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(28px,3.2vw,40px);line-height:1.05;letter-spacing:-.04em}
.cs-body{font-size:18px;line-height:1.6;max-width:30rem}
.cs-text{margin:0 12px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 48px;align-items:start}
.cs-text .cs-tag{grid-column:1/-1}

/* one giant true number per step */
.cs-giant{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(72px,15vw,288px);line-height:.92;letter-spacing:-.06em;white-space:nowrap;color:var(--ink)}
.cs-giant-l{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--ink);margin-top:12px}
.cs-numrow{margin:0 12px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end}
.cs-numrow.is-flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cs-numrow.is-flip .cs-num{order:2;text-align:right}
.cs-numtext{display:flex;flex-direction:column;gap:12px}

/* rows */
.cs-row{display:grid;gap:48px}
.cs-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-lead{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);align-items:stretch}
.cs-lead .fig{display:flex;flex-direction:column}
.cs-lead .fig-box{flex:1;aspect-ratio:auto;min-height:0}
.cs-lead .fig:first-child .fig-box{aspect-ratio:var(--ar);flex:none}

/* two sizes, offset, so the row does not read as a grid */
.cs-stagger{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.cs-stagger .fig:last-child{margin-top:144px}

/* idea: the dimension line is the headline */
.cs-span-l{text-align:center;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--cobalt)}
.cs-span{position:relative;display:flex;flex-direction:column;gap:12px}
.cs-span-line{position:relative;margin-inline:25%;display:flex;align-items:center;gap:16px;border-inline:1.5px solid var(--cobalt);color:var(--cobalt);
  font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(40px,4.4vw,64px);letter-spacing:-.045em;line-height:1.06}
.cs-span .cs-span-line{font-size:clamp(56px,11vw,216px);line-height:.92;letter-spacing:-.06em;margin-inline:calc(25% - 12px);white-space:nowrap}
.cs-span-line::before,.cs-span-line::after{content:"";flex:1;height:1.5px;background:var(--cobalt)}

/* mark: the whole band changes colour */
.cs-band{background:var(--ground);transition:background var(--t-reveal) ease;margin-inline:calc(var(--edge) * -1);padding:48px var(--edge);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;color:var(--ink);border-block:var(--line)}
.cs-band-crest{display:flex;justify-content:center}
.cs-band-crest .fig{width:min(100%,calc((100svh - 120px) * 2 / 3))}
.cs-band-crest .fig-box{background:transparent}
.cs-band-crest .fig-box>img{object-fit:contain;mix-blend-mode:multiply}
.cs-band-text{display:flex;flex-direction:column;gap:16px}
.cs-ways-wrap{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.cs-hint{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3}
.cs-ways{display:flex;width:fit-content;border:var(--line)}
.cs-way{appearance:none;background:var(--board);border:0;border-right:var(--line);padding:16px 24px;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1;color:var(--ink);cursor:pointer;transition:background var(--t-press)}
.cs-way:last-child{border-right:0}
.cs-way:hover{background:var(--signal)}
.cs-way[aria-pressed=true]{background:var(--ink);color:var(--board)}
.cs-way-note{font-size:14px;line-height:1.5;min-height:21px}

/* build: section cut (T2) */
.cs-cut{display:flex;flex-direction:column;gap:12px}
.cs-cut-fig{margin-bottom:12px}
.cut{position:relative;aspect-ratio:2/1;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;background:var(--board)}
.cut>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cut-wire{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--cut)) 0 0);background-color:var(--cobalt);
  background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:96px 96px,96px 96px,12px 12px,12px 12px}
.wire{position:absolute;border:1.5px dashed #fff}
.wire span{position:absolute;left:6px;top:6px;font-family:var(--mono);font-stretch:75%;font-size:11px;line-height:1.2;color:#fff}
.wire b{position:absolute;left:6px;right:6px;bottom:6px;font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(11px,1.45vw,20px);line-height:1.15;letter-spacing:-.03em;color:#fff;text-align:center}
.wire-img{border:0}
.wire-img img{width:100%;height:100%;object-fit:contain;filter:invert(1);mix-blend-mode:screen}
.wire-note{position:absolute;font-family:var(--mono);font-stretch:75%;font-size:11px;line-height:1.2;color:#fff}
.cut-line{position:absolute;top:0;bottom:0;left:var(--cut);width:2px;margin-left:-1px;background:var(--signal)}
.cut-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--signal);border:var(--line);box-shadow:3px 3px 0 var(--ink);font-size:18px;color:var(--ink)}
.cs-cut .fig-tag,.cs-cut .fig-cap{z-index:2}
.cut-range{margin:0 12px;display:flex;align-items:center;gap:16px;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;flex-wrap:wrap}
.cut-range input{flex:1;min-width:200px;appearance:none;-webkit-appearance:none;height:24px;background:linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat;cursor:ew-resize}
.cut-range input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:var(--signal);border:var(--line);border-radius:0}
.cut-range input::-moz-range-thumb{width:21px;height:21px;background:var(--signal);border:var(--line);border-radius:0}

/* result: the biggest moment on the page */
.cs-win{margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;color:#fff;border-block:var(--line)}
.cs-win .cs-tag,.cs-win .cs-head{color:#fff}
.cs-win-n{display:flex;flex-direction:column;gap:12px}
.cs-giant-xl{font-size:clamp(160px,32vw,520px);line-height:.86;color:#fff}
.cs-win-l{font-size:18px;line-height:1.5;color:#fff;max-width:30rem}
.cs-win-r{display:flex;flex-direction:column;gap:16px}
.cs-ladder{list-style:none;margin:0;padding:0;border:1.5px solid #fff}
.cs-ladder li{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;border-top:1.5px solid #fff;font-family:var(--mono);font-stretch:75%;font-size:14px;line-height:1.3;color:#fff}
.cs-ladder li:first-child{border-top:0}
.cs-ladder span{padding:12px}
.cs-ladder span:first-child{border-right:1.5px solid #fff;font-stretch:112.5%;font-weight:300;font-size:24px;letter-spacing:-.03em}
.cs-said{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.cs-said-q{margin:12px;display:flex;flex-direction:column;gap:16px}
.cs-quote{margin:0;font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.04em}
.cs-who{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--quiet)}

/* end: one statement, then the next picture */
.cs-end{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}
.cs-end-l{margin:12px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.cs-statement{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(36px,4.4vw,64px);line-height:1.06;letter-spacing:-.045em;color:var(--ink)}
.cs-end-r{display:flex;flex-direction:column;gap:8px}
.cs-next-img{display:block;color:inherit;text-decoration:none}
.cs-end-r .br{align-self:flex-start;margin-left:12px}

@media(max-width:980px){
  .cs-block{grid-template-columns:1fr}
  .cs-title{border-right:0;border-bottom:var(--line)}
  .cs-main{gap:48px;padding-bottom:48px}
  .cs-step{gap:24px}
  .cs-text{grid-template-columns:1fr}
  .cs-row,.cs-said{gap:24px}
  .cs-said,.cs-win,.cs-numrow,.cs-numrow.is-flip{grid-template-columns:1fr}
  .cs-numrow.is-flip .cs-num{order:0;text-align:left}
  .cs-win{min-height:0;padding-block:24px;gap:24px}
  .cs-end{grid-template-columns:1fr;gap:24px}
  .cs-stagger{grid-template-columns:1fr}
  .cs-stagger .fig:last-child{margin-top:12px}
  .cs-band{grid-template-columns:1fr;gap:24px;padding-block:24px}
  .cs-band-crest .fig{width:min(100%,420px)}
  .cs-bar{margin-bottom:24px}
  .cs-bar-t,.cs-bar-live,.cs-bar-n{display:none}
  .cs-bar{grid-template-columns:repeat(5,minmax(0,1fr));margin-inline:calc(var(--edge) * -1)}
  .cs-bar a{padding:12px 2px;font-size:11px}
}
@media(max-width:767px){
  .cs-hero .fig-box{height:auto;aspect-ratio:16/9}
  .cs-first{gap:0}
  .cs-block{margin-bottom:16px}
  .cs-title{padding:12px 16px}
  .cs-h1{font-size:32px}
  .cs-facts{grid-template-columns:1fr}
  .cs-fact{flex-direction:row;align-items:center;gap:12px;padding:8px 16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.45)}
  .cs-fact:last-child{border-bottom:0}
  .cs-n{font-size:28px;flex:0 0 96px}
  .cs-l{font-size:11px}
  .cs-pair,.cs-lead{grid-template-columns:1fr}
  .cs-lead .fig-box{flex:none;aspect-ratio:var(--ar)}
  .cs-span .cs-span-line{margin-inline:12px;font-size:64px}
  .cut{aspect-ratio:4/5}
  .cut>img{object-position:center}
  .wire span{font-size:10px}
  .wire b{display:none}
  .wire-note{display:none}
}

/* ---------- rules changed by the owner: images bleed, tags and captions on hover ---------- */
.cs .fig-tag,.cs .fig-cap{opacity:0;transition:opacity var(--t-reveal) ease}
.cs .fig:hover .fig-tag,.cs .fig:hover .fig-cap,.cs .fig-ai .fig-tag{opacity:1}

/* bleed: edge to edge, crop marks move inside the image */
.cs-hero,.cs-full,.cs-pair,.cs-stagger,.cs-cut-wrap,.cs-said,.cs-next{margin-inline:calc(var(--edge) * -1)}
.cs-hero .fig,.cs-full .fig,.cs-pair .fig,.cs-stagger .fig,.cs-said .fig,.cs-cut .fig,.cs-next .fig{margin:0}
.cs-hero .crop,.cs-full .crop,.cs-pair .crop,.cs-stagger .crop,.cs-said .crop,.cs-cut .crop,.cs-next .crop{z-index:2;border-color:var(--board)}
.cs-hero .c-tl,.cs-full .c-tl,.cs-pair .c-tl,.cs-stagger .c-tl,.cs-said .c-tl,.cs-cut .c-tl,.cs-next .c-tl{left:12px;top:12px}
.cs-hero .c-tr,.cs-full .c-tr,.cs-pair .c-tr,.cs-stagger .c-tr,.cs-said .c-tr,.cs-cut .c-tr,.cs-next .c-tr{right:12px;top:12px}
.cs-hero .c-bl,.cs-full .c-bl,.cs-pair .c-bl,.cs-stagger .c-bl,.cs-said .c-bl,.cs-cut .c-bl,.cs-next .c-bl{left:12px;bottom:12px}
.cs-hero .c-br,.cs-full .c-br,.cs-pair .c-br,.cs-stagger .c-br,.cs-said .c-br,.cs-cut .c-br,.cs-next .c-br{right:12px;bottom:12px}
.cs-hero .kdim,.cs-full .kdim,.cs-pair .kdim,.cs-stagger .kdim,.cs-said .kdim,.cs-cut .kdim,.cs-next .kdim{display:none}
.cs .cs-hero .fig-tag,.cs .cs-full .fig-tag,.cs .cs-pair .fig-tag,.cs .cs-stagger .fig-tag,.cs .cs-cut .fig-tag,.cs .cs-said .fig-tag,.cs .cs-next .fig-tag{top:24px;right:24px}
.cs .cs-hero .fig-cap,.cs .cs-full .fig-cap,.cs .cs-pair .fig-cap,.cs .cs-stagger .fig-cap,.cs .cs-cut .fig-cap,.cs .cs-said .fig-cap,.cs .cs-next .fig-cap{bottom:24px;left:24px}

.cs .cs-cut .cs-cut-fig{margin:0 calc(var(--edge) * -1)}

/* first screen */
.cs-first{gap:0}
.cs-hero .fig{margin:0}
.cs-hero .fig-box{height:clamp(300px,calc(100svh - 92px - 176px - 44px),800px)}
.cs-block{margin:0 calc(var(--edge) * -1);border-inline:0}
.cs-fact{border-right:var(--line)}
.cs-bar{margin:0 calc(var(--edge) * -1) 48px;border-inline:0;border-top:0}

/* one long run of work: no gaps between the rows */
.cs-main{gap:96px;padding-bottom:0}
.cs-step-span{margin-bottom:-96px}
.cs-span{gap:12px}
.cs .cs-span .cs-span-line{font-size:clamp(40px,4.4vw,64px);line-height:1.06;letter-spacing:-.045em}
.cs-pair,.cs-stagger{gap:0}
.cs-pair .fig+.fig,.cs-stagger .fig+.fig{border-left:var(--line)}
.cs-step-span .cs-stagger{margin-top:-48px;border-top:var(--line)}
.cs-span .cs-pair{margin-top:12px}
.cs-stagger{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.cs-stagger .fig:last-child{margin-top:0}
.cs-stagger .fig{display:flex;flex-direction:column}
.cs-stagger .fig-box{flex:1;aspect-ratio:auto;min-height:min(84svh,760px)}
.cs-band{border-top:0}
.cs-step-band{gap:0}

/* build: the slider stays for the keyboard, the yellow grip is the one handle */
.cut-range{position:relative;display:block;margin:12px 12px 0;text-align:center}
.cut-range input{position:absolute;left:0;top:0;width:1px;height:1px;min-width:0;opacity:0;flex:none}
.cs-cut:has(input:focus-visible) .cut-grip{outline:2px solid var(--cobalt);outline-offset:4px}
.cs-step-plain .cs-cut+.cs-full{margin-top:-24px}
.cs-step-plain .cs-full .fig-box{aspect-ratio:2/1}

/* result */
.cs-step-result{gap:0}
.cs-win{padding-block:48px}
.cs-ladder li{font-size:14px}
.cs-ladder span:first-child{font-size:clamp(40px,4.4vw,64px);letter-spacing:-.045em;line-height:1.06}
.cs-ladder li{grid-template-columns:168px minmax(0,1fr)}
.cs-said{gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;background:var(--board);border-bottom:var(--line)}
.cs-said .fig{display:flex;flex-direction:column}
.cs-said .fig-box{flex:1}
.cs-said-q{margin:0;padding:48px;justify-content:center;border-left:var(--line)}
.cs-quote{font-family:var(--sans);font-stretch:normal;font-weight:400;font-size:clamp(24px,2.6vw,36px);line-height:1.25;letter-spacing:-.01em}

/* end: then the next picture, edge to edge */
.cs-end{display:flex;flex-direction:column;gap:48px;align-items:stretch}
.cs-end-l{margin:0 12px;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.cs-statement{max-width:18em}
.cs-next{position:relative;display:block;color:inherit;text-decoration:none}
.cs-next .fig-box{aspect-ratio:21/9}
.cs-next .fig-box>img{object-position:center 30%}
.cs-next-chip{position:absolute;left:24px;bottom:24px;z-index:3;background:var(--board);border:var(--line);padding:8px 12px}
.cs-next:hover .l{transform:translateX(-6px)}
.cs-next:hover .r{transform:translateX(6px)}

@media(max-width:980px){
  .cs-main{gap:48px}
  .cs-step-span{margin-bottom:-48px}
  .cs-step-span .cs-stagger{margin-top:-24px}
  .cs-said{grid-template-columns:1fr}
  .cs-said-q{padding:24px;border-left:0;border-top:var(--line)}
  .cs-bar{margin-bottom:24px}
  .cs-step-plain .cs-cut+.cs-full{margin-top:0}
}
@media(max-width:767px){
  .cs-hero .fig-box{height:auto;aspect-ratio:16/10}
  .cs-fact{border-right:0;border-bottom:var(--line)}
  .cs-pair,.cs-stagger{grid-template-columns:1fr}
  .cs-pair .fig+.fig,.cs-stagger .fig+.fig{border-left:0;border-top:var(--line)}
  .cs-stagger .fig-box{min-height:0;aspect-ratio:4/5;flex:none}
  .cs-stagger .fig:last-child .fig-box{aspect-ratio:3/2}
  .cs-ladder li{grid-template-columns:104px minmax(0,1fr)}
  .cs-next .fig-box{aspect-ratio:16/10}
  .cs-end-l{flex-direction:column;align-items:flex-start}
}

/* ---------- round 6: real numbers, drawn ---------- */
/* giant numbers: thin, with a dimension line, so they read as drawing */
.cs-giant{font-weight:200}
.cs-num{width:fit-content}
.cs-numrow.is-flip .cs-num{margin-left:auto}
.cs-num .cs-giant-l,.cs-scrollband .cs-giant-l,.cs-win-n .cs-giant-l{position:relative;padding-top:20px;margin-top:8px;width:fit-content;min-width:100%}
.cs-num .cs-giant-l::before,.cs-scrollband .cs-giant-l::before,.cs-win-n .cs-giant-l::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;border-inline:1.5px solid var(--cobalt);background:linear-gradient(var(--cobalt),var(--cobalt)) center/100% 1.5px no-repeat}
.s2 .cs-giant{color:#fff}
.s2 .cs-giant-l{color:#fff}
.cs-scrollband .cs-giant-l::before,.cs-win-n .cs-giant-l::before{border-color:#fff;background-image:linear-gradient(#fff,#fff)}
.cs-win-n{width:fit-content;max-width:100%}
.cs-giant-xl{font-size:clamp(88px,14.5vw,240px);line-height:.92}

/* 21 screens against 1 */
.cs-scrollband{margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);color:#fff;border-block:var(--line);display:flex;flex-direction:column;gap:12px}
.cs-scrollband>.cs-giant,.cs-scrollband>.cs-giant-l{width:fit-content}
.cs-screens{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.cs-screens-l{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:#fff}
.cs-screens ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(21,minmax(0,1fr));gap:6px}
.cs-screens li{aspect-ratio:9/16;border:1.5px dashed #fff;display:flex;align-items:center;justify-content:center;min-width:0}
.cs-screens .is-end{background:#fff;border-style:solid;border-color:#fff;color:var(--ink);font-family:var(--mono);font-stretch:75%;font-size:10px;line-height:1}

/* section cut: flat handle (only the primary button has a shadow) */
.cut-grip{box-shadow:none}
.wire b{font-size:clamp(11px,1.9vw,26px);text-align:left}


@media(max-width:767px){
  .cs-screens ol{grid-template-columns:repeat(11,minmax(0,1fr));gap:4px}
  .cs-screens .is-end{font-size:0}
  .cs-screens .is-after .is-end,.cs-screens.is-after .is-end{font-size:0}
  .cs-scrollband{padding-block:24px}
}

/* ---------- round 7 ---------- */
.cs-n{font-size:clamp(32px,3.6vw,64px)}
/* crop marks: ink on a small board tab, so they read on any image */
.cs-hero .crop,.cs-full .crop,.cs-pair .crop,.cs-stagger .crop,.cs-said .crop,.cs-cut .crop,.cs-next .crop,.cs-closer .crop{background:none;border-color:var(--ink);mix-blend-mode:normal;z-index:2;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)}
.cs-closer .c-tl{left:12px;top:12px}.cs-closer .c-tr{right:12px;top:12px}.cs-closer .c-bl{left:12px;bottom:12px}.cs-closer .c-br{right:12px;bottom:12px}
.cs-closer .kdim{display:none}

/* every giant number sits on the blueprint, with a dimension rule */
.cs-num.s2{padding:24px;color:#fff}
.cs-numrow{align-items:stretch}
.cs-numtext{justify-content:center}
.cs-enq .cs-giant-l,.cs-win-r .cs-giant-l{position:relative;padding-top:20px;margin-top:8px;min-width:100%;width:fit-content;color:#fff}
.cs-enq .cs-giant-l::before,.cs-win-r .cs-giant-l::before,.s2 .cs-num .cs-giant-l::before,.cs-num.s2 .cs-giant-l::before{border-color:#fff;background-image:linear-gradient(#fff,#fff);content:"";position:absolute;left:0;right:0;top:0;height:12px;border-inline:1.5px solid #fff;background-repeat:no-repeat;background-position:center;background-size:100% 1.5px}

/* build: number and words together on the blueprint */
.cs-step-build{gap:0}
.cs-scrollband{gap:0}
.cs-scrolltop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end;margin-bottom:12px}
.cs-scrollband .cs-numtext,.cs-scrollband .cs-head,.cs-scrollband .cs-body,.cs-scrollband .cs-tag{color:#fff}
.cs-scrollband .cs-giant{width:auto}
.cs-screens.is-after ol{grid-template-columns:repeat(21,minmax(0,1fr))}
.cs-step-build .cs-full .fig-box{aspect-ratio:2/1}
.cs-step-plain .cs-cut+.cs-full,.cs-step-build .cs-full{margin-top:0}
.cs-cut .fig{margin:0}
.cut{aspect-ratio:2/1}
.cut-grip{z-index:3}
/* the hint sits on the image, so site, stay and café run as one block */
.cut-range{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);margin:0;z-index:3;background:var(--board);border:var(--line);padding:4px 8px;white-space:nowrap}
.cut-range input{position:absolute}

/* result: two phones, the real photo lands at the measured time */
.cs-win{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
.cs-win-r{gap:16px;align-items:flex-start}
.cs-win-r .cs-giant{font-size:clamp(54px,8.6vw,150px);line-height:.92}
.cs-win-r .cs-win-l{font-size:14px}
.cs-phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:560px}
.cs-phone{display:flex;flex-direction:column;gap:8px;color:#fff}
.cs-phone-l{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:#fff}
.cs-phone-l output{font-variant-numeric:tabular-nums}
.cs-phone-box{aspect-ratio:9/16;border:1.5px solid #fff;background:var(--ink);overflow:hidden}
.cs-phone-box img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block;clip-path:inset(0);transition:clip-path var(--t-line) var(--ease-draw)}
.cs-phone.is-wait .cs-phone-box img{clip-path:inset(0 0 100% 0);transition:none}
.cs-win .p1[disabled]{background:var(--steel);cursor:default;transform:none}

/* result: enquiries on the blueprint, words on the board */
.cs-said-q{padding:0;gap:0;justify-content:stretch}
.cs-enq{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 32px;align-items:center;padding:24px 48px;border-bottom:var(--line);color:#fff}
.cs-enq .cs-body{color:#fff}
.cs-enq .cs-num{width:fit-content}
.cs-saidq{padding:48px;display:flex;flex-direction:column;gap:16px;justify-content:center;flex:1}
.cs-quote{font-size:clamp(24px,2.6vw,36px)}

/* end: one statement image, then the next project */
.cs-main{gap:96px}
.cs-end{gap:0}
.cs-closer{position:relative;margin-inline:calc(var(--edge) * -1)}
.cs-closer .fig{margin:0}
.cs-closer .fig-box{aspect-ratio:auto;height:min(82svh,760px)}
.cs-closer .fig-box>img{object-position:center 42%}
.cs-closer-panel{position:absolute;left:calc(var(--edge) + 12px);bottom:48px;right:calc(var(--edge) + 12px);max-width:760px;padding:24px;background:var(--board);border:var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:16px;z-index:3}
.cs-next{border-top:var(--line)}
.cs-next .fig-box>img{object-position:center top}
.cs-step-result{margin-bottom:-96px}

@media(max-width:980px){
  .cs-scrolltop,.cs-win{grid-template-columns:1fr}
  .cs-step-result{margin-bottom:-48px}
  .cs-closer-panel{bottom:24px}
  .cs-enq,.cs-saidq{padding:24px}
}
@media(max-width:767px){
  .cs-screens.is-after ol{grid-template-columns:repeat(11,minmax(0,1fr))}
  .cs-phones{gap:12px;max-width:none}
  .cs-closer .fig-box{height:78svh}
  .cs-closer-panel{left:16px;right:16px}
  .cut{aspect-ratio:4/5}
  .cut-range{white-space:normal;width:calc(100% - 32px);text-align:center;bottom:16px}
  .cs-step-build .cs-full .fig-box{aspect-ratio:3/2}
  .cs-enq{grid-template-columns:1fr}
}

/* ---------- Rufus: reels, channel tiles, calendar and radio toys ---------- */
.cs-hero .fig-box video{z-index:1}
.cs-hero .cs-play{z-index:2}
.fig-box video,.cs-reel-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.cs-cast{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-inline:calc(var(--edge) * -1)}
.cs-cast .fig{margin:0}
.cs-cast .fig+.fig{border-left:var(--line)}
.cs-cast .crop{display:none}
.cs-cast .kdim{display:none}
.cs .cs-cast .fig-tag{top:12px;right:12px}
.cs .cs-cast .fig-cap{bottom:12px;left:12px;opacity:1}
.cs-step-band .cs-band-crest .fig{width:100%}
.cs-step-band .cs-band-crest .fig-box>img{object-fit:contain;mix-blend-mode:multiply}

/* calendar */
.cs-mirror,.cs-radio{margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);color:#fff;border-block:var(--line);display:flex;flex-direction:column;gap:24px}
.cs-mirror .cs-tag,.cs-mirror .cs-head,.cs-radio .cs-tag,.cs-radio .cs-head,.cs-radio .cs-body{color:#fff}
.cs-mirror-top,.cs-radio-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end}
.cs-mirror-days{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border:1.5px solid #fff;background:var(--board);color:var(--ink);min-height:236px}
.cs-mday{padding:24px;display:flex;flex-direction:column;gap:12px}
.cs-mday .cs-tag{color:var(--quiet)}
.cs-mday.is-53{border-left:var(--line)}
.cs-mdate{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(20px,2vw,24px);line-height:1.2;letter-spacing:-.03em}
.cs-mglass{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--cobalt)}
.cs-mline{margin:0;font-size:clamp(20px,2.2vw,28px);line-height:1.3}
.cs-mrange{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:#fff}
.cs-mrange input{flex:1;min-width:220px;appearance:none;-webkit-appearance:none;height:32px;background:linear-gradient(#fff,#fff) center/100% 1.5px no-repeat;cursor:ew-resize}
.cs-mrange input::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;background:var(--signal);border:var(--line);border-radius:0}
.cs-mrange input::-moz-range-thumb{width:29px;height:29px;background:var(--signal);border:var(--line);border-radius:0}
.cs-mrange input:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* reels and channel tiles */
.cs-step-channels{gap:0}
.cs-step-channels .cs-text{margin-bottom:48px}
.cs-reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-inline:calc(var(--edge) * -1);border-block:var(--line)}
.cs-reel{margin:0;position:relative}
.cs-reel+.cs-reel{border-left:var(--line)}
.cs-reel-box{position:relative;aspect-ratio:9/16;background:var(--ink);overflow:hidden;max-height:min(92svh,860px);width:100%}
.cs-reel-box img{width:100%;height:100%;object-fit:cover;display:block}
.cs-reel .fig-tag{position:absolute;right:12px;top:12px;opacity:1;z-index:2}
.cs-reel figcaption{position:absolute;left:12px;bottom:12px;background:var(--board);border:var(--line);padding:2px 6px;font-size:11px;color:var(--ink);z-index:2}
.cs-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-inline:calc(var(--edge) * -1);border-bottom:var(--line);background:var(--board)}
.cs-tile{display:flex;flex-direction:column;color:var(--ink);text-decoration:none;padding:12px;gap:4px;transition:background var(--t-press)}
a.cs-tile:hover{background:var(--signal);color:var(--ink)}
.cs-tile+.cs-tile{border-left:var(--line)}
.cs-tile-img{display:block;aspect-ratio:1/1;overflow:hidden;margin-bottom:8px;border:var(--line)}
.cs-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.cs-tile-l{font-family:var(--mono);font-stretch:75%;font-size:11px;line-height:1.3;color:var(--quiet)}
a.cs-tile:hover .cs-tile-l{color:var(--ink)}
.cs-tile-n{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(16px,1.6vw,20px);line-height:1.2;letter-spacing:-.03em}

/* radio */
.cs-times{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0;border:1.5px solid #fff;width:fit-content}
.cs-times li{padding:8px 12px;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1;color:#fff}
.cs-times li+li{border-left:1.5px solid #fff}
.cs-set{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;background:var(--board);color:var(--ink);border:var(--line);padding:24px;align-items:stretch}
.cs-set-cover{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;border:var(--line)}
.cs-set-r{display:flex;flex-direction:column;gap:12px;min-width:0}
.cs-dial{position:relative;--at:0;border:var(--line);background:var(--concrete);padding-top:20px}
.cs-needle{position:absolute;top:0;bottom:0;left:calc((var(--at) + .5) * 100% / var(--stops));width:2px;margin-left:-1px;background:var(--signal);box-shadow:0 0 0 .5px var(--ink);transition:left var(--t-deal) var(--ease-draw);pointer-events:none;z-index:2}
.cs-stops{display:grid;grid-template-columns:repeat(var(--stops),minmax(0,1fr));border-top:var(--line);background-image:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 12px);background-size:100% 12px;background-repeat:no-repeat}
.cs-stop{appearance:none;background:var(--board);border:0;border-right:var(--line);padding:16px 4px;font-family:var(--mono);font-stretch:75%;font-size:14px;line-height:1;color:var(--ink);cursor:pointer;transition:background var(--t-press)}
.cs-stop:last-child{border-right:0}
.cs-stop:hover{background:var(--signal)}
.cs-stop[aria-pressed=true]{background:var(--ink);color:var(--board)}
.cs-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0}
.cs-now b{font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:clamp(24px,2.8vw,40px);line-height:1.05;letter-spacing:-.04em}
.cs-now span{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--cobalt)}
.cs-wave{position:relative;height:96px;background:var(--cobalt);cursor:pointer;overflow:hidden;--wave:none}
.cs-wave-a,.cs-wave-b{position:absolute;inset:0;background-image:var(--wave);background-size:100% 100%;background-repeat:no-repeat}
.cs-wave-a{opacity:.45}
.cs-wave-b{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cs-radio-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.cs-radio-go .cs-tag{color:var(--quiet);max-width:34rem}

@media(max-width:980px){
  .cs-mirror-top,.cs-radio-top,.cs-set{grid-template-columns:1fr}
  .cs-set-cover{max-width:220px}
  .cs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-tile:nth-child(3){border-left:0}
  .cs-tile:nth-child(n+3){border-top:var(--line)}
  .cs-cast{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-cast .fig:nth-child(3){border-left:0}
  .cs-cast .fig:nth-child(n+3){border-top:var(--line)}
  .cs-mirror,.cs-radio{padding-block:24px}
}
@media(max-width:767px){
  .cs-mirror-days{grid-template-columns:1fr}
  .cs-mday.is-53{border-left:0;border-top:var(--line)}
  .cs-reels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cs-reel .fig-tag{font-size:9px;right:4px;top:4px;padding:1px 3px}
  .cs-reel figcaption{left:4px;bottom:4px;font-size:9px;padding:1px 3px}
  .cs-reel .cs-play .p1-label{padding:8px;font-size:11px}
  .cs-reel .cs-play{grid-template-columns:auto 28px}
  .cs-set{padding:12px}
}

/* ---------- Rufus fixes ---------- */
.cs-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}
.cs-play:hover{transform:translate(calc(-50% - 3px),calc(-50% - 3px))}
.cs-play:active{transform:translate(-50%,-50%)}
.cs-mirror-top .cs-giant,.cs-radio-top .cs-giant{font-size:clamp(54px,8.6vw,150px)}
.cs-needle{bottom:auto;height:20px}
.cs-needle::after{content:"";position:absolute;left:50%;bottom:-1px;width:10px;height:10px;margin-left:-5px;background:var(--signal);border:1px solid var(--ink);transform:rotate(45deg) translate(2px,2px)}
.cs-needle{box-shadow:none;background:var(--ink)}
.cs[data-key=rufus] .cs-hero .fig-box>img{object-position:center 18%}
.cs[data-key=rufus] #idea .fig-box>img{object-position:center 8%}
.cs[data-key=rufus] .cs-closer .fig-box>img{object-position:center 12%}
.cs[data-key=rufus] .cs-next .fig-box>img{object-position:center 45%}
@media(min-width:768px){.cs-mirror-days{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
@media(max-width:767px){
  .cs-reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .cs-reel{flex:0 0 76%;scroll-snap-align:start}
  .cs-reel-box{max-height:none}
  .cs-reel .fig-tag{font-size:11px;right:12px;top:12px;padding:2px 6px}
  .cs-reel figcaption{left:12px;bottom:12px;font-size:11px;padding:2px 6px}
  .cs-reel .cs-play .p1-label{padding:12px 16px;font-size:14px}
  .cs-reel .cs-play{grid-template-columns:auto 48px}
}

/* ---------- Rufus round 2 ---------- */
/* one unbroken run: no concrete gaps between blocks */
.cs .cs-bar{margin-bottom:0}
.cs .cs-block{margin-bottom:0}
.cs .cs-main{gap:0}
.cs .cs-step{gap:0;margin:0}
.cs .cs-text{padding-block:48px;margin-block:0}
.cs .cs-mirror,.cs .cs-radio{border-top:0}
.cs-tag{letter-spacing:0}

/* calendar: a drawn barometer and a paper page */
.cs-mirror-top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
.cs-mirror .cs-body{color:#fff}
.cs-mirror-days{background:none;border:0;min-height:0;gap:24px;align-items:stretch}
@media(min-width:768px){.cs-mirror-days{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.cs-mbaro{display:flex;flex-direction:column;align-items:center;gap:8px}
.cs-baro{width:100%;max-width:340px;height:auto;display:block}
.cs-baro circle{fill:none;stroke:#fff;stroke-width:1.5}
.cs-baro-t line{stroke:#fff;stroke-width:1}
.cs-baro-w text{fill:#fff;font-family:var(--mono);font-stretch:75%;font-size:8px;text-anchor:middle;dominant-baseline:middle}
.cs-baro-n{transform-origin:100px 100px;transform:rotate(var(--a));transition:transform var(--t-deal) var(--ease-draw)}
.cs-baro-n line{stroke:var(--signal);stroke-width:2.5}
.cs-baro .cs-baro-c{fill:var(--signal);stroke:var(--ink)}
.cs-mreading{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:#fff}
.cs-paper{background:#F4EEDD;color:#2A2118;padding:32px 40px;border:var(--line);display:flex;flex-direction:column;gap:8px;min-height:340px;justify-content:center}
.cs-mnow{margin:0 0 8px;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--quiet);display:flex;gap:8px;flex-wrap:wrap;text-transform:uppercase}
.cs-mnow b{font-weight:400;color:var(--ink)}
.cs-mthen{font-family:"EB Garamond",Georgia,serif;font-size:clamp(24px,2.6vw,36px);line-height:1.15;font-style:italic}
.cs-mglass{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--cobalt);text-transform:uppercase}
.cs-mline{margin:8px 0 0;font-family:"EB Garamond",Georgia,serif;font-size:clamp(22px,2.4vw,32px);line-height:1.25}

/* clay title: type as image */
.cs .cs-band{grid-template-columns:1fr;gap:24px;padding-block:48px;border-block:var(--line)}
.cs .cs-band-crest{justify-content:stretch}
.cs .cs-band-crest .fig{width:100%;margin:0}
.cs .cs-band-text{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 48px;align-items:start;margin-inline:12px}
.cs .cs-band-text .cs-tag{grid-column:1/-1}

/* cast and reels follow the same marks as the other images */
.cs-cast .crop,.cs-reel .crop{display:block;z-index:2;background:none;border-color:var(--ink);filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)}
.cs-cast .c-tl,.cs-reel .c-tl{left:12px;top:12px}.cs-cast .c-tr,.cs-reel .c-tr{right:12px;top:12px}.cs-cast .c-bl,.cs-reel .c-bl{left:12px;bottom:12px}.cs-cast .c-br,.cs-reel .c-br{right:12px;bottom:12px}
.cs .cs-cast .fig-tag,.cs .cs-reel .fig-tag{top:24px;right:24px}
.cs .cs-cast .fig-cap{opacity:0;bottom:24px;left:24px}
.cs .cs-cast .fig:hover .fig-cap{opacity:1}
.cs .cs-reel .fig-cap{position:absolute;opacity:0;left:24px;bottom:24px;z-index:2}
.cs .cs-reel:hover .fig-cap{opacity:1}
.cs-reel .cs-play{left:auto;top:auto;right:24px;bottom:24px;transform:none}
.cs-reel .cs-play:hover{transform:translate(-3px,-3px)}
.cs-reel .cs-play:active{transform:none}

/* channel links: a compact row, so the reels stay the point */
.cs-tile{flex-direction:row;align-items:center;gap:12px;display:grid;grid-template-columns:64px minmax(0,1fr);padding:12px}
.cs-tile-img{grid-row:span 2;margin:0;width:64px;height:64px}
.cs-tile-l{align-self:end}
.cs-tile-n{align-self:start;font-size:16px}

/* radio: the number is the moment */
.cs-giant-full{font-size:clamp(60px,16.4vw,330px);line-height:.92;width:100%;letter-spacing:-.07em}
.cs-radio>.cs-giant-l{width:100%;position:relative;padding-top:20px;margin-top:0}
.cs-radio>.cs-giant-l::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;border-inline:1.5px solid #fff;background:linear-gradient(#fff,#fff) center/100% 1.5px no-repeat}
.cs-radio-top{align-items:start}
.cs-set .fig{margin:12px}
.cs-set .fig-box{aspect-ratio:1/1}
.cs-set .kdim{display:none}
.cs-radio-hint{font-size:14px;line-height:1.5;color:var(--quiet);max-width:34rem}

/* end */
.cs .cs-closer-panel .cs-body{color:var(--ink)}
.cs .cs-next .fig-box{aspect-ratio:4/1}
.cs .cs-next .crop{display:none}
.cs .cs-end{margin-top:0;border-top:0}

@media(max-width:980px){
  .cs-mirror-top,.cs .cs-band-text{grid-template-columns:1fr}
}
@media(max-width:767px){
  .cs-mirror-days{grid-template-columns:1fr}
  .cs-baro{max-width:220px}
  .cs-paper{padding:20px;min-height:280px}
  .cs .cs-next .fig-box{aspect-ratio:5/2}
  .cs .cs-text{padding-block:24px}
  .cs-reel .cs-play{right:12px;bottom:12px}
  .cs .cs-cast .fig-tag,.cs .cs-reel .fig-tag{top:12px;right:12px}
  .cs-tile{grid-template-columns:48px minmax(0,1fr);gap:8px;padding:8px}
  .cs-tile-img{width:48px;height:48px}
}
.cs .cs-band .kdim{display:none}

/* ---------- Sisters: brand, palette, stamp card ---------- */
.cs[data-key=sisters] .cs-next .fig-box>img{object-position:center 22%}
.cs[data-key=sisters] .cs-hero .fig-box>img{object-position:center 62%}
.cs[data-key=sisters] .cs-step-number .fig-box>img{object-position:center 40%}
.cs-brand,.cs-objects{background:var(--ground,#F4F4DB);margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);color:var(--ink);display:flex;flex-direction:column;gap:48px;border-block:var(--line)}
.cs-objects{background:#D5DEC2}
.cs-wordmark{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.cs-brand-text{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 48px;align-items:start}
.cs-brand-text .cs-tag{grid-column:1/-1}
.cs-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.5fr);gap:24px;align-items:stretch}
.cs-mark{margin:0;display:flex;flex-direction:column;gap:8px}
.cs-mark img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.cs-mark figcaption,.cs-face-n{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--quiet)}
.cs-mark b,.cs-face-n b{font-weight:400;color:var(--ink);display:block}
.cs-faces{display:grid;grid-template-rows:1fr 1fr;gap:24px}
.cs-face{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;border-top:var(--line);padding-top:12px}
.cs-face-s{color:#3B2416;line-height:1}
.cs-face-a .cs-face-s{font-family:"Cormorant SC",Georgia,serif;font-weight:300;font-size:clamp(56px,7.4vw,112px);letter-spacing:.01em}
.cs-face-b .cs-face-s{font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:clamp(24px,3vw,44px);letter-spacing:.14em}

/* palette: every colour full height, edge to edge */
.cs-stripes{list-style:none;margin:0 calc(var(--edge) * -1);padding:0;display:flex;height:min(70svh,560px);border-block:var(--line)}
.cs-stripe{flex:1 1 0;min-width:0;background:var(--c);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:16px 12px;transition:flex-grow var(--t-line) var(--ease-draw);overflow:hidden}
.cs-stripe.is-ink{color:var(--ink)}
.cs-stripe:hover{flex-grow:1.8}
.cs-stripe-n{font-family:"Cormorant SC",Georgia,serif;font-weight:300;font-size:clamp(20px,2vw,28px);line-height:1.05}
.cs-stripe-h,.cs-stripe-u{font-family:var(--mono);font-stretch:75%;font-size:11px;line-height:1.3}
.cs-stripe-u{opacity:.85}

/* the stamp card */
.cs-cards{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px;align-items:start}
.cs-card-back{position:relative;border:var(--line);line-height:0}
.cs-card-back>img{width:100%;height:auto;display:block}
.cs-slot{position:absolute;width:13.4%;aspect-ratio:1/1;transform:translate(-50%,-50%);appearance:none;background:none;border:0;border-radius:50%;padding:0;cursor:pointer}
.cs-slot img{width:100%;height:100%;display:block;opacity:0;transform:rotate(var(--r)) scale(1.4);transition:opacity var(--t-press),transform var(--t-press);mix-blend-mode:multiply;pointer-events:none}
.cs-slot[aria-pressed=true] img{opacity:.92;transform:rotate(var(--r)) scale(1)}
.cs-slot:hover{outline:2px solid var(--signal);outline-offset:0}
.cs-slot:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.cs-card-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cs-card-side>img{width:100%;height:auto;display:block;border:var(--line)}
.cs-objects .cs-ways{display:flex;flex-wrap:wrap;margin:0}
.cs-objects .cs-way{display:inline-flex;align-items:center;gap:6px;padding:12px;font-size:11px}
.cs-way i{display:inline-block;width:12px;height:12px;border:1px solid var(--ink)}
.cs-card-count{margin:0;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3}
.cs-card-count b{font-weight:400;font-stretch:112.5%;font-size:24px;letter-spacing:-.03em;display:block;margin-bottom:4px}
.cs-card-reset{font-size:12px;background:none;border:0;cursor:pointer;padding:4px 6px}
.cs-cups{display:flex;flex-direction:column;gap:8px;border-top:var(--line);padding-top:12px}
.cs-cups-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:720px}
.cs-cups-row img{width:100%;height:auto;display:block;mix-blend-mode:multiply}

@media(max-width:980px){
  .cs-brand-text,.cs-cards{grid-template-columns:1fr}
  .cs-marks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-faces{grid-column:1/-1}
  .cs-brand,.cs-objects{padding-block:24px;gap:24px}
}
@media(max-width:767px){
  .cs-stripes{flex-direction:column;height:auto}
  .cs-stripe{flex-direction:row;align-items:baseline;gap:12px;padding:16px;justify-content:flex-start}
  .cs-stripe-n{flex:1}
  .cs-slot{width:15%}
}

/* ---------- Sisters: kitchen book, spacing ---------- */
.cs-numrow{padding-block:48px;margin-block:0}
.cs-book{margin-inline:calc(var(--edge) * -1);padding:32px calc(var(--edge) + 12px);color:#fff;border-block:var(--line);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;align-items:start}
.cs-book-l{display:flex;flex-direction:column;gap:12px}
.cs-book .cs-head,.cs-book .cs-body{color:#fff}
.cs-book-stats{list-style:none;margin:0 0 8px;padding:0;display:flex;gap:24px;font-family:var(--mono);font-stretch:75%;font-size:11px;line-height:1.3}
.cs-book-stats b{display:block;font-stretch:112.5%;font-weight:300;font-size:clamp(32px,3.6vw,48px);line-height:1.06;letter-spacing:-.045em}
.cs-book-r{background:var(--board);color:var(--ink);border:var(--line);padding:16px;display:flex;flex-direction:column;gap:12px;min-height:232px}
.cs-book-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.cs-book-dishes,.cs-book-views{display:flex;flex-wrap:wrap;border:var(--line);width:fit-content}
.cs-book .cs-way{padding:8px 10px;font-size:11px}
.cs-parts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;flex:1;align-content:flex-start}
.cs-parts li{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--steel);padding:4px 8px;font-size:14px;line-height:1.4}
.cs-parts i{display:none;width:32px;height:10px;background:var(--ink)}
.is-office .cs-parts i{display:inline-block}
.cs-book-note{margin:0;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--cobalt)}
@media(max-width:980px){.cs-book{grid-template-columns:1fr;padding-block:24px}.cs-numrow{padding-block:24px}}

/* ---------- Sisters: direct booking, real cup stamps ---------- */
.cs-direct{margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px) 24px;color:#fff;border-top:var(--line);display:flex;flex-direction:column;gap:24px}
.cs-direct .cs-tag{color:#fff}
.cs-direct-big{margin:0;font-family:var(--mono);font-stretch:112.5%;font-weight:200;font-size:clamp(28px,8.2vw,150px);line-height:1.02;letter-spacing:-.06em;color:#fff}
.cs-direct-big span{display:block;white-space:nowrap}
.cs-direct-pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid #fff}
.cs-direct-pts li{padding:16px;font-size:18px;line-height:1.45;color:#fff}
.cs-direct-pts li+li{border-left:1.5px solid #fff}
.cs-direct-pts b{display:block;font-family:var(--mono);font-stretch:75%;font-weight:400;font-size:12px;line-height:1.3;margin-bottom:8px}
.cs-direct+.cs-win{border-top:0}
.cs-cups-row{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;gap:32px}
.cs-cup{margin:0;display:flex;flex-direction:column;gap:8px}
.cs-cup img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.cs-cup figcaption{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--ink)}
@media(max-width:767px){
  .cs-direct{padding-block:24px 16px;gap:16px}
  .cs-direct-pts{grid-template-columns:1fr}
  .cs-direct-pts li+li{border-left:0;border-top:1.5px solid #fff}
  .cs-cups-row{gap:16px}
}

/* ---------- Danny: poster, TV, cassette deck ---------- */
.cs[data-key=danny] .cs-hero .fig-box>img{object-position:center 30%}
.cs[data-key=danny] #brief .fig-box>img{object-position:center 45%}
.cs[data-key=danny] .cs-closer .fig-box>img{object-position:center 30%}
.cs[data-key=danny] .cs-next .fig-box>img{object-position:center 62%}
.cs[data-key=danny] .cs-stripe-n{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:700}
.cs-poster{background:var(--ground);margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);color:var(--ink);display:flex;flex-direction:column;gap:48px;border-block:var(--line)}
.cs-pname{display:flex;gap:2.4%;align-items:flex-end}
.cs-pname img{min-width:0;width:100%;height:auto;display:block}
.cs-pfaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:var(--line);padding-top:12px}
.cs-pface{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.cs-pface-s{margin:0;line-height:1.05;color:#221811}
.cs-pface-1 .cs-pface-s{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:700;font-size:clamp(28px,3.6vw,56px);letter-spacing:.1em;color:#AC4A1C}
.cs-pface-2 .cs-pface-s{font-family:Montserrat,system-ui,sans-serif;font-weight:500;font-size:clamp(20px,2.2vw,32px)}
.cs-pface-3 .cs-pface-s{font-family:"Courier Prime",Courier,monospace;font-size:clamp(20px,2.2vw,32px)}

/* the site's own diagonal cut closes each prop band */
.cs-prop{--cut-at:66%;margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);color:var(--ink);border-block:var(--line);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;align-items:start;background:linear-gradient(176deg,var(--ground) var(--cut-at),var(--cut) calc(var(--cut-at) + .1%))}
.cs-prop-text{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cs-prop-toy{min-width:0}
.cs-prop-link{font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cs-prop-link:hover{color:#AC4A1C}
.cs-prop-note{margin:0;font-size:14px;line-height:1.5;color:var(--quiet)}
.cs-prop .fig-tag{position:absolute;right:0;top:0;opacity:1;z-index:7}
.cs-chan{display:flex;flex-direction:column;border:var(--line);width:100%;max-width:420px;margin-top:12px}
.cs-chan .cs-way{border-right:0;border-bottom:var(--line);text-align:left;padding:12px;line-height:1.2}
.cs-chan .cs-way:last-child{border-bottom:0}
.cs-chan .cs-way b{font-weight:400;display:inline-block;width:20px}

/* TV. Screen and keys are measured from the real pixels of the image */
.cs-tv{position:relative;width:100%;max-width:720px;margin-inline:auto;aspect-ratio:1600/1536}
.cs-tvset{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.cs-tvscr{position:absolute;left:9.03%;top:23.69%;width:50.48%;height:48.64%;overflow:hidden;background:#1b1712;-webkit-mask:url(/assets/work/danny-solomon/tv-mask.png) 0 0/100% 100% no-repeat;mask:url(/assets/work/danny-solomon/tv-mask.png) 0 0/100% 100% no-repeat}
.cs-tvwarp{position:absolute;inset:0;transform-origin:0 0}
.cs-tvscr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;filter:sepia(.25) contrast(1.05)}
.cs-tvscr img.on{opacity:1}
.cs-tvscr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-tvident{position:absolute;left:8%;bottom:9%;max-width:84%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2;font-family:"Courier Prime",Courier,monospace;font-size:clamp(9px,1vw,12px);line-height:1.3;color:#fff;background:rgba(0,0,0,.5);padding:2px 6px;pointer-events:none}
.cs-tvscr:has(iframe) .cs-tvident{display:none}
.cs-tv.is-off .cs-tvscr{background:#050403}
.cs-tvkey{position:absolute;z-index:6;border:0;padding:0;background:transparent;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer}
.cs-tvkey::after{content:"";position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.95),transparent 68%);mix-blend-mode:screen;opacity:0;transition:opacity .15s}
.cs-tvkey:hover::after{opacity:.35}
.cs-tvkey[aria-pressed=true]::after{opacity:.7}
.cs-tvkey.is-power::after{background:radial-gradient(circle,rgba(255,90,60,.9),transparent 68%)}
.cs-tvkey:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

/* deck */
.cs-prop-deck{--cut-at:52%}
.cs-deck{position:relative;width:100%;max-width:640px;margin-inline:auto;aspect-ratio:787/700}
.cs-deckset{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.cs-deckwin{position:absolute;left:23.39%;top:29.33%;width:52.45%;height:36.01%;background:#0d0b09;overflow:hidden}
.cs-deckwin img{position:absolute;inset:4% 3%;width:94%;height:92%;object-fit:contain;transform:translateY(-130%);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.cs-deckwin img:not([src]){visibility:hidden}
.cs-deckwin img.in{transform:none}
.cs-deckwin.is-spin img{animation:cs-wob 1.6s linear infinite}
@keyframes cs-wob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6%)}}
.cs-deckkey{position:absolute;top:76.86%;height:11.43%;z-index:2;border:0;padding:0;background:transparent;border-radius:3px;cursor:pointer}
.cs-deckkey:hover{background:rgba(255,214,140,.18)}
.cs-deckkey:active{background:rgba(0,0,0,.18)}
.cs-deckkey:focus-visible{outline:2px solid var(--cobalt);outline-offset:1px}
.cs-deckstat{margin:12px 0 0;width:100%;max-width:420px;border:var(--line);background:var(--board);padding:12px;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;display:flex;justify-content:space-between;gap:12px}
.cs-deckstat b{font-weight:400}
.cs-deckstat span{font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-tapes{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:12px}
.cs-tape{appearance:none;background:none;border:1.5px solid #F0E9E0;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:center;color:#F0E9E0;cursor:pointer;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.2;text-align:center;transition:background var(--t-press),color var(--t-press)}
.cs-tape img{width:100%;height:auto;display:block}
.cs-tape:hover{background:rgba(240,233,224,.14)}
.cs-tape[aria-pressed=true]{background:#F0E9E0;color:var(--ink)}
.cs-tape:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* result */
.cs-sres{margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);color:#fff;border-block:var(--line);display:flex;flex-direction:column;gap:24px}
.cs-sres .cs-tag,.cs-sres .cs-head,.cs-sres .cs-body{color:#fff}
.cs-sres .cs-num{width:100%}
.cs-sres .cs-giant-long{font-size:clamp(28px,10.2vw,196px);letter-spacing:-.07em}
@media(max-width:767px){.cs-sres .cs-giant-long{font-size:9.2vw}}
.cs-step-sheetresult{margin-bottom:0}
.cs[data-key=danny] .cs-said .fig-box>img{object-position:center 22%}

@media(max-width:980px){
  .cs-prop{grid-template-columns:1fr;padding-block:24px;--cut-at:82%}
  .cs-prop-deck{--cut-at:62%}
  .cs-tapes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cs-poster{padding-block:24px;gap:24px}
  .cs-sres{padding-block:24px}
}
@media(max-width:767px){
  .cs-pfaces{grid-template-columns:1fr}
  .cs-tape{padding:8px;font-size:11px}
}

/* ---------- Vento Sul: sign, vane, booking ---------- */
.cs[data-key=vento] .cs-hero .fig-box>img{object-position:center 4%}
.cs[data-key=vento] #idea .fig-box>img{object-position:center 60%}
.cs[data-key=vento] .cs-closer .fig-box>img{object-position:center 55%}
.cs[data-key=vento] .cs-next .fig-box>img{object-position:center 22%}
.cs[data-key=vento] .cs-stripe-n{font-family:Gloock,Georgia,serif;font-weight:400}
.cs[data-key=vento] .cs-pname{gap:4%;align-items:center}
.cs[data-key=vento] .cs-pfaces{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs[data-key=vento] .cs-pface-1 .cs-pface-s{font-family:Gloock,Georgia,serif;font-style:normal;font-weight:400;letter-spacing:0;color:#2A201A;font-size:clamp(32px,4.4vw,64px)}
.cs[data-key=vento] .cs-pface-2 .cs-pface-s{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:clamp(24px,3vw,44px);color:#2A201A}

/* vane */
.cs-vane{background:var(--ground);color:#2A201A;margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);border-block:var(--line);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:24px 48px;align-items:center}
.cs-vane-l{display:flex;flex-direction:column;gap:16px;align-items:flex-start;min-width:0}
.cs-verdict{width:100%;border-top:1.5px solid #2A201A;padding-top:12px;min-height:112px}
.cs-v-from{margin:0;font-size:14px;line-height:1.5}
.cs-v-wine{margin:4px 0 0;font-family:Gloock,Georgia,serif;font-size:clamp(24px,2.6vw,36px);line-height:1.1}
.cs-v-where{margin:4px 0 0;font-size:14px;line-height:1.5}
.cs-v-flight{margin:0;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3}
.cs-glasses{display:flex;gap:12px;align-items:flex-start;min-height:72px}
.cs-glass{display:flex;flex-direction:column;align-items:center;gap:4px;width:56px;text-align:center;font-size:11px;line-height:1.2}
.cs-glass svg{width:26px;height:46px}
.cs-glass.is-empty{opacity:.35}
.cs-v-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.cs-compass{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;margin-inline:auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.cs-compass svg{width:100%;height:100%;display:block;overflow:visible}
.cs-compass-w text{font-family:Gloock,Georgia,serif;font-size:30px;fill:#2A201A;text-anchor:middle}
.cs-needle-v{transform-origin:200px 200px}
.cs-compass-hub{position:absolute;left:50%;top:50%;width:24%;height:auto;transform:translate(-50%,-62%);pointer-events:none}
.cs-compass:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}

/* booking */
.cs-booking{background:var(--ground);color:#F3EAD6;margin-inline:calc(var(--edge) * -1);padding:48px calc(var(--edge) + 12px);border-block:var(--line);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;align-items:start}
.cs-booking .cs-head,.cs-booking .cs-body,.cs-booking .cs-tag{color:#F3EAD6}
.cs-bookcard{background:#F3EAD6;color:#2A201A;padding:24px;min-height:488px;min-width:0}
.cs-bookstep[hidden]{display:none}
.cs-booktitle{margin:0 0 16px;font-family:Gloock,Georgia,serif;font-size:clamp(28px,3vw,40px);line-height:1.05}
.cs-bookcard fieldset{border:0;padding:0;margin:0 0 16px;min-width:0}
.cs-bookcard legend{padding:0;margin-bottom:8px;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3}
.cs-chips{display:flex;flex-wrap:wrap;gap:6px}
.cs-chip{appearance:none;background:transparent;color:#2A201A;border:1px solid rgba(42,32,26,.4);padding:8px 10px;min-width:44px;min-height:44px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:14px;line-height:1.1;cursor:pointer}
.cs-chip small{display:block;font-size:11px;color:#5E5044}
.cs-chip:hover{background:rgba(42,32,26,.08)}
.cs-chip[aria-pressed=true]{background:#2A201A;color:#F3EAD6;border-color:#2A201A}
.cs-chip[aria-pressed=true] small{color:#CDBFA8}
.cs-chip.is-full{text-decoration:line-through;border-style:dashed;color:#6E5E51}
.cs-chip:disabled{opacity:.45;cursor:not-allowed}
.cs-chip:focus-visible{outline:2px solid var(--cobalt);outline-offset:1px}
.cs-bookhint{margin:8px 0 0;min-height:21px;font-size:14px;line-height:1.5;color:#9E4F27}
.cs-bookwait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:440px;font-family:Gloock,Georgia,serif;font-size:24px}
.cs-bookwait img{width:96px;height:auto}
.cs-bookstep p{margin-block:0 8px}
.cs-booknote{font-size:14px;color:#5E5044;margin-bottom:16px!important}
.cs-bookcard .cs-way{border:var(--line);background:transparent}

/* result, short number */
.cs-sres .cs-giant-short{font-size:clamp(88px,20vw,380px);letter-spacing:-.07em}

@media(max-width:980px){
  .cs-vane,.cs-booking{grid-template-columns:1fr;padding-block:24px}
  /* on a phone the vane sits above the Spin button, so you can see it turn */
  .cs-vane{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .cs-vane-l{display:contents}
  .cs-vane .cs-prop-text{order:1}
  .cs-vane .cs-compass{order:2;max-width:300px}
  .cs-vane .cs-v-btns{order:3}
  .cs-vane .cs-verdict{order:4;min-height:96px}
  .cs-vane .cs-v-flight{order:5}
  .cs-vane .cs-glasses{order:6}
  .cs-compass{max-width:420px}
}
@media(max-width:767px){
  .cs[data-key=vento] .cs-pfaces{grid-template-columns:1fr}
  .cs-bookcard{padding:16px}
  .cs-glass{width:48px}
  .cs-glasses{gap:8px}
}

/* a plain summary, for readers in a hurry and for search and AI assistants */
.cs-short{padding:48px 12px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:12px 48px;border-top:var(--line)}
.cs-short-t{margin:0;font-size:clamp(18px,1.7vw,24px);line-height:1.5;max-width:46rem}
@media(max-width:767px){.cs-short{grid-template-columns:1fr;padding-block:24px}}

/* Sisters: the kitchen tool, explained in three steps with one toy */
.cs-book{display:flex;flex-direction:column;gap:24px;padding-block:48px}
.cs-book .cs-tag{color:#fff}
.cs-book-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end}
.cs-book-stats{margin:0;justify-content:flex-end}
.cs-book-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid #fff}
.cs-book-how li{padding:16px;font-size:16px;line-height:1.45;color:#fff;position:relative}
.cs-book-how li+li{border-left:1.5px solid #fff}
.cs-book-how b{display:block;font-family:var(--mono);font-stretch:75%;font-weight:400;font-size:12px;line-height:1.3;margin-bottom:8px}
.cs-book-n{display:block;font-family:var(--mono);font-stretch:112.5%;font-weight:300;font-size:32px;line-height:1;letter-spacing:-.04em;margin-bottom:12px}
.cs-book-r{min-height:0;padding:24px}
.cs-book-try{margin:0;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3;color:var(--cobalt)}
.cs-book-ings{display:flex;flex-wrap:wrap;width:fit-content;border:var(--line)}
.cs-book .cs-book-ings .cs-way{padding:12px 16px;font-size:12px}
.cs-book-res{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;font-family:var(--mono);font-stretch:75%;font-size:12px;line-height:1.3}
.cs-book-res b{font-stretch:112.5%;font-weight:300;font-size:clamp(32px,4vw,56px);line-height:1.05;letter-spacing:-.045em}
.cs-book .cs-parts li{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0}
.cs-book .cs-parts i{display:block;width:auto;height:auto;background:none;font-style:normal;font-size:11px;line-height:1.3;color:var(--quiet)}
.cs-book-note{margin:0;font-size:14px;line-height:1.5;color:var(--quiet)}
.cs-book-who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1.5px solid #fff}
.cs-book-who p{margin:0;padding:16px;font-size:16px;line-height:1.45;color:#fff}
.cs-book-who p+p{border-left:1.5px solid #fff}
.cs-book-who b{display:block;font-family:var(--mono);font-stretch:75%;font-weight:400;font-size:12px;line-height:1.3;margin-bottom:8px}
@media(max-width:980px){.cs-book{padding-block:24px}.cs-book-top{grid-template-columns:1fr}.cs-book-stats{justify-content:flex-start}}
@media(max-width:767px){
  .cs-book-how,.cs-book-who{grid-template-columns:1fr}
  .cs-book-how li+li{border-left:0;border-top:1.5px solid #fff}
  .cs-book-who p+p{border-left:0;border-top:1.5px solid #fff}
  .cs-book-r{padding:16px}
  .cs-book .cs-book-ings .cs-way{padding:12px 10px}
}
.cs-book-who,.cs-book-how,.cs-book-r{width:100%;box-sizing:border-box}