/* Designed case-study pages (/work/<id>/ with a content/stories/<id>.mjs).
   A 12-column grid: headings sit in columns 1-3, reading text in 4-9, pictures run wide on a flat plate
   in one neutral grey. One family (Familjen Grotesk); size and weight do the work. */

.cs{--gap:28px;--tint:#e6e6e6;width:100%;max-width:1320px;margin:0 auto;padding:calc(var(--it) + 44px) clamp(40px,5vw,72px) calc(var(--ib) + 72px);font-size:19px;line-height:1.6}
.cs article{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.cs figure{margin:0}
.cs article > *{grid-column:1/-1;margin:0}
.cs article > * + *{margin-top:clamp(72px,8.5vw,128px)}
.cs article > .b-text + .b-text{margin-top:64px}
.cs article > .b-text.cont{margin-top:32px}
.cs article > .cs-head + *{margin-top:0}
.cs a{text-decoration-thickness:1px;text-underline-offset:3px}
.cs a:hover{text-decoration-thickness:2px}

/* ---------- opening ---------- */
.cs-head{display:grid;grid-template-columns:subgrid;align-items:end;padding-bottom:clamp(40px,4.5vw,64px)}
.cs-head h1{grid-column:1/-1;grid-row:1;margin:0;font-size:clamp(52px,7.4vw,116px);font-weight:500;letter-spacing:-.045em;line-height:.9;text-wrap:balance}
.cs-state{grid-column:1/9;grid-row:2;margin:26px 0 0;font-size:clamp(24px,2.45vw,34px);line-height:1.16;letter-spacing:-.02em;text-wrap:balance;max-width:30ch}
.cs-meta{grid-column:1/9;grid-row:3;display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:26px;font-size:15px;line-height:1.45;color:var(--muted)}
.cs-meta p{margin:0}
.cs-meta a{color:var(--ink)}

/* ---------- shared picture plate ---------- */
.cs .plate{background:var(--tint);border-radius:14px;padding:clamp(14px,3vw,44px)}
.cs .plate img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 0 0 1px rgba(30,32,36,.1)}
.cs figcaption{margin-top:14px;font-size:14px;line-height:1.45;color:var(--muted);max-width:44ch}

/* ---------- text ---------- */
.b-text,.b-aside,.b-facts,.b-fig,.b-mosaic,.b-tools{display:grid;grid-template-columns:subgrid}
.cs h2{margin:0;font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.b-text h2{grid-column:1/4;grid-row:1;padding-top:.12em}
.b-text .tx{grid-column:4/10;grid-row:1}
.b-lead .ld{grid-column:1/12;grid-row:1;margin:0;font-size:clamp(30px,3.4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.b-lead .tx{grid-row:2;margin-top:36px}
.tx p,.tx ul{margin:0 0 .9em}
.tx > :last-child{margin-bottom:0}
.tx ul{padding-left:1.1em}
.tx li{margin:0 0 .55em;padding-left:.2em}
.tx strong{font-weight:500}

/* ---------- pictures ---------- */
.b-fig.full .plate{grid-column:1/-1}
.b-fig.full figcaption{grid-column:1/8}
.b-fig.wide .plate{grid-column:4/13;grid-row:1}
.b-fig.wide figcaption{grid-column:1/4;grid-row:1;align-self:end;margin:0 0 4px}

.b-mosaic .plate{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px);align-items:start}
.m-b{display:grid;gap:clamp(12px,2vw,28px)}
.b-mosaic figcaption{grid-column:1/8}

/* text beside a tall picture (phones, wall cards) */
.b-aside{align-items:start}
.b-aside h2{grid-column:1/4;grid-row:1;padding-top:.12em}
.b-aside .tx{grid-column:4/9;grid-row:1}
.b-aside figure{grid-column:9/13;grid-row:1}
.b-aside.flip figure{grid-column:10/13}

/* ---------- edge to edge (Time Matters): the picture fills the page frame; the frame's corners crop it ---------- */
.cs{--bw:calc(100vw - var(--il) - var(--ir))}
.b-bleed,.b-film,.b-phones,.b-ads{display:grid;grid-template-columns:subgrid}
.b-bleed picture{grid-column:1/-1;display:block;width:var(--bw);margin-left:calc(50% - var(--bw)/2)}
.b-bleed picture img{display:block;width:100%;height:auto}
.b-bleed figcaption,.b-film figcaption,.b-phones figcaption{grid-column:4/10}
.b-bleed figcaption,.b-phones figcaption,.b-film figcaption{max-width:none}

/* a recording, shown at the width of the text grid */
.fl-stage{grid-column:1/-1;position:relative;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.fl-stage video{display:block;width:100%;height:auto}
.fl-still{display:none}
.fl-btn{position:absolute;right:14px;bottom:14px;padding:5px 13px 6px;border:0;border-radius:999px;background:rgba(30,32,36,.74);color:#fff;font-size:13px;line-height:1.2;cursor:pointer}
.fl-btn:hover{background:var(--ink)}
.fl-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* phone screens, no device drawing, offset so they don't read as a table */
.ph-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:start}
.ph-row img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 0 0 1px var(--line)}
.ph-row img:nth-child(even){margin-top:72px}

/* words beside the two ads */
.ad-text{grid-column:1/6;grid-row:1}
.ad-text .tx{margin-top:22px}
.ad-row{grid-column:7/13;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.ad-row img{display:block;width:100%;height:auto;border-radius:10px}
.ad-row figcaption{grid-column:1/-1;margin-top:0}

/* one view at most: a picture marked fit never runs taller than the page frame on a laptop or monitor */
@media (min-width:768px){
  .b-bleed.fit picture img{max-height:calc(100svh - var(--it) - var(--ib));object-fit:cover;object-position:50% 72%}
}

/* big monitors: the text grid grows with the picture instead of sitting small in the middle */
@media (min-width:1800px){
  .cs{max-width:1680px;font-size:21px}
  .cs h2{font-size:29px}
  .cs figcaption{font-size:15px}
}

/* tablets: phone screens scroll sideways at a readable size, the ads sit under their words */
@media (min-width:768px) and (max-width:1023px){
  .ph-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:260px;gap:18px;width:var(--bw);margin-left:calc(50% - var(--bw)/2);padding:0 clamp(40px,5vw,72px);box-sizing:border-box;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:clamp(40px,5vw,72px)}
  .ph-row img{scroll-snap-align:start}
  .ph-row img:nth-child(even){margin-top:0}
  .ad-text,.ad-row{grid-column:1/-1;grid-row:auto}
  .cs .ad-row{margin-top:32px}
  .ad-text .tx{max-width:34em}
}

/* ---------- statements and lists ---------- */
.cs article > .b-pull{grid-column:4/12;font-size:clamp(36px,4.5vw,66px);font-weight:500;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.cs article > .b-pull + .b-text.cont{margin-top:36px}

.b-tools ul{grid-column:4/13;grid-row:1;list-style:none;margin:0;padding:0;columns:2;column-gap:var(--gap);font-size:clamp(21px,2vw,28px);font-weight:500;letter-spacing:-.01em;line-height:1.25}
.b-tools li{break-inside:avoid;padding:12px 0 13px;border-top:1px solid var(--line)}
.b-tools figcaption{grid-column:1/4;grid-row:1;margin:14px 0 0}

.b-facts h2{grid-column:1/4;grid-row:1;padding-top:.6em}
.b-facts dl{grid-column:4/13;grid-row:1;margin:0}
.b-facts dl > div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr);column-gap:var(--gap);align-items:baseline;padding:18px 0 20px;border-top:1px solid var(--line)}
.b-facts dt{font-size:clamp(56px,6.4vw,96px);font-weight:500;letter-spacing:-.05em;line-height:.95}
.b-facts dd{margin:0;font-size:22px;line-height:1.35;letter-spacing:-.01em;max-width:30ch}

/* ---------- interaction: open the menu (CBHS) ---------- */
.hs-stage{position:relative;max-width:var(--hsw,none);margin-inline:auto}
.hs-open{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.b-hot.is-open .hs-open{opacity:1}
.hs-dot{position:absolute;left:var(--x);top:var(--y);width:56px;height:56px;margin:-28px 0 0 -28px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.b-hot.is-open .hs-dot{left:var(--cx);top:var(--cy)}
.hs-dot span{position:absolute;inset:9px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.2);animation:hs 2s ease-out 1s 4}
@keyframes hs{0%{transform:scale(.85);opacity:1}70%{transform:scale(1.3);opacity:.15}100%{transform:scale(.85);opacity:1}}
.hs-text{margin-left:6px;padding:5px 14px 6px;border:1px solid var(--ink);border-radius:999px;background:none;color:var(--ink);font-size:14px;line-height:1.2;cursor:pointer}
.hs-text:hover{background:var(--ink);color:var(--paper)}

/* ---------- interaction: light and dark (nvo.is) ---------- */
.wp{position:relative;touch-action:pan-y}
.wp .wp-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.wp-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(30,32,36,.18);pointer-events:none}
.wp-line span{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M18 16l-6 6 6 6M26 16l6 6-6 6' fill='none' stroke='%231e2024' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/44px no-repeat;box-shadow:0 1px 6px rgba(30,32,36,.28)}
.wp-tag{position:absolute;bottom:14px;padding:4px 11px 5px;border-radius:999px;background:rgba(30,32,36,.74);color:#fff;font-size:13px;line-height:1.2;pointer-events:none}
.wp-tag.l{left:14px}
.wp-tag.r{right:14px}
.wp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.wp input::-webkit-slider-runnable-track{height:100%}
.wp input::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.wp input::-moz-range-thumb{width:44px;height:100%;border:0}
.b-wipe:has(input:focus-visible) .wp-line span{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- more work ---------- */
.cs-more{margin-top:clamp(104px,11vw,168px);padding-top:26px;border-top:1px solid var(--line)}
.cs-more h2{margin:0 0 30px}
.cs-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.cs-more a{display:block;text-decoration:none}
.mw-name{display:block}
.mw-line{display:block}
.mw-name{font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.15}
.mw-line{margin-top:6px;font-size:15px;line-height:1.4;color:var(--muted)}
.cs-more a:hover .mw-name{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.cs .pn{margin-top:64px}

/* ---------- phones: one column ---------- */
@media (max-width:767px){
  .cs{--gap:20px;padding:calc(var(--it) + 28px) 22px calc(var(--ib) + 56px);font-size:17px}
  .cs article{grid-template-columns:minmax(0,1fr)}
  .cs article > * + *{margin-top:64px}
  .cs article > .b-text + .b-text{margin-top:48px}
  .b-text,.b-aside,.b-facts,.b-fig,.b-mosaic,.b-tools,.cs-head{grid-template-columns:minmax(0,1fr)}
  .cs-head h1,.cs-state,.cs-meta,.b-text h2,.b-text .tx,.b-fig.full .plate,.b-fig.full figcaption,.b-fig.wide .plate,.b-fig.wide figcaption,
  .b-aside h2,.b-aside .tx,.b-aside figure,.b-aside.flip figure,.b-mosaic .plate,.b-mosaic figcaption,.b-tools ul,.b-tools figcaption,.b-facts h2,.b-facts dl{grid-column:1/-1;grid-row:auto}
  .cs article > .b-pull{grid-column:1/-1;font-size:34px}
  .b-lead .ld{grid-column:1/-1;font-size:28px}
  .b-lead .tx{margin-top:22px}
  .cs-head{padding-bottom:36px}
  .cs-head h1{font-size:clamp(44px,13vw,64px)}
  .cs-state{margin-top:18px;font-size:23px}
  .cs-meta{margin-top:18px;gap:2px 20px}
  .b-text h2,.b-aside h2,.b-facts h2{margin-bottom:14px;font-size:23px;padding-top:0}
  .b-fig.wide figcaption{margin:12px 0 0}
  .b-aside figure{margin-top:28px;max-width:340px}
  .b-mosaic .plate{grid-template-columns:minmax(0,1fr)}
  .b-tools ul{columns:1;font-size:21px}
  .b-tools figcaption{grid-row:1;margin:0 0 14px}
  .b-facts dl > div{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .b-facts dt{font-size:60px}
  .b-facts dd{font-size:19px}
  .hs-dot{left:var(--xm,var(--x));top:var(--ym,var(--y));width:44px;height:44px;margin:-22px 0 0 -22px}
  .b-hot.is-open .hs-dot{left:var(--cxm,var(--cx));top:var(--cym,var(--cy))}
  .hs-dot span{inset:8px}
  .hs-text{display:inline-block;margin:10px 0 0}
  .wp-tag{bottom:8px;font-size:12px}
  .wp-tag.l{left:8px}
  .wp-tag.r{right:8px}
  .wp-line span{width:36px;height:36px;margin:-18px 0 0 -18px;background-size:36px}
  .cs .plate{border-radius:10px}
  .b-bleed,.b-film,.b-phones,.b-ads{grid-template-columns:minmax(0,1fr)}
  .b-bleed picture,.fl-stage,.ph-row,.ad-text,.ad-row,.b-bleed figcaption,.b-film figcaption,.b-phones figcaption{grid-column:1/-1;grid-row:auto}
  .fl-stage{display:none}
  .fl-still{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
  .ph-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68vw;gap:14px;width:var(--bw);margin-left:calc(50% - var(--bw)/2);padding:0 22px;box-sizing:border-box;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:22px}
  .ph-row img{scroll-snap-align:start;border-radius:18px}
  .ph-row img:nth-child(even){margin-top:0}
  .cs .ad-row{margin-top:28px;gap:14px}
  .cs-more ul{grid-template-columns:minmax(0,1fr);gap:22px}
}