/* THE WORKSHOP'S PROJECTS (Workshop tab, js/ws-cards.js): a card per big project, its own clip looping inside; one at a
   time plays as a little tour, a hover plays one, and a click opens it in a window with its clips, its story and links */
.wsc{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:-6px calc(50% - min(50vw - 20px,560px)) 38px;text-align:left}
.wsc-card{position:relative;display:block;border:0;padding:0;margin:0;border-radius:14px;overflow:hidden;cursor:pointer;background:#0b2a28;color:#fff;
  aspect-ratio:16/9;box-shadow:0 1px 2px rgba(15,77,71,.2),0 16px 30px -16px rgba(15,77,71,.6);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;font:inherit;text-align:left}
.wsc-card.wide{grid-column:1/-1;aspect-ratio:21/9}
.wsc-card img,.wsc-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wsc-card video{opacity:0;transition:opacity .9s ease-in-out}
.wsc-card.on video{opacity:1}
.wsc-card img{transform:scale(1.02);transition:transform 6s ease-out}
.wsc-card.on img{transform:scale(1.04)}
.wsc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,22,21,0) 45%,rgba(6,22,21,.82));pointer-events:none}
.wsc-t{position:absolute;left:16px;right:16px;bottom:13px;z-index:1;display:flex;flex-direction:column;gap:2px}
.wsc-t b{font-family:var(--font-display);font-size:clamp(17px,2vw,22px);line-height:1.15;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.wsc-t span{font-size:13px;line-height:1.35;color:rgba(255,255,255,.86)}
.wsc-more{position:absolute;top:12px;right:12px;z-index:1;padding:4px 10px;border-radius:999px;font:700 11px/1.4 var(--font-display);
  background:rgba(255,255,255,.88);color:#0f4d47;opacity:0;transform:translateY(-4px);transition:opacity .5s ease,transform .5s ease}
.wsc-card:hover,.wsc-card:focus-visible{transform:translateY(-6px);box-shadow:0 2px 4px rgba(15,77,71,.2),0 24px 40px -18px rgba(15,77,71,.7)}
.wsc-card:hover .wsc-more,.wsc-card:focus-visible .wsc-more{opacity:1;transform:none}
.wsc-card:focus-visible{outline:3px solid rgb(var(--accent));outline-offset:3px}
/* the window: its case study as a magazine feature (css/feature.css): the cover edge to edge, then a reading column */
.wsm{border:0;padding:0;width:min(860px,calc(100vw - 24px));max-height:calc(100vh - 32px);border-radius:16px;background:#fbfaf7;color:#22343c;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:auto;overscroll-behavior:contain}
.wsm::backdrop{background:rgba(8,24,30,.62);backdrop-filter:blur(3px)}
/* it fades in and out (motion.js softDialog), and the next feature fades in over the last */
.wsm[open]{animation:wsmIn .5s cubic-bezier(.2,.8,.3,1) both}.wsm[open]::backdrop{animation:wsmFade .5s ease both}
.wsm.shut{animation:wsmOut .45s ease both}.wsm.shut::backdrop{animation:wsmFade .45s ease reverse both}
.wsm .wsf{transition:opacity .4s ease}.wsm.swap .wsf{opacity:0}
@keyframes wsmIn{from{opacity:0;transform:scale(.97)}}@keyframes wsmOut{to{opacity:0;transform:scale(.98)}}@keyframes wsmFade{from{opacity:0}}
.wsm-bar{position:sticky;top:0;z-index:3;height:0}
.wsm-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.94);color:#0f4d47;
  font:700 20px/1 system-ui;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:background .4s ease}
.wsm-x:hover{background:#fff}
.wsf{padding:0 clamp(18px,6vw,64px) 40px}
.wsf .wsf-cover{margin:0 calc(-1 * clamp(18px,6vw,64px));border-radius:0;aspect-ratio:16/8}
.wsf .wsf-cover video,.wsf .wsf-cover img{object-fit:cover}
.wsf-mast{font:900 clamp(26px,5.6vw,52px)/.95 var(--mg-serif);letter-spacing:.02em;text-transform:uppercase;color:var(--mg-gold);text-shadow:0 2px 14px rgba(0,0,0,.35)}
.wsf .mag-cap{text-align:left;font-style:italic;font-family:var(--mg-text)}
.wsf .mag-head h1{font-size:clamp(34px,6vw,58px)}
.wsf .post>p{font-size:18px;margin:0 0 1.05em}
.wsf-fig{margin:1.6em 0}
.wsf-pic{border-radius:6px;overflow:hidden;background:#0b2a28}   /* each picture keeps its own shape: a square-ish lake clip, a wide screenshot */
.wsf-pic video,.wsf-pic img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain}
.wsf-fig figcaption{margin:8px 0 0;padding-left:10px;border-left:3px solid var(--mg-red);font:italic 15px/1.45 var(--mg-text);color:var(--mg-ink2)}
@media (min-width:760px){.wsf-fig{margin-left:-40px;margin-right:-40px}.wsf .pull{margin-left:-40px;margin-right:-40px}}
.wsf-nums{margin:34px 0 26px;padding:18px 0 4px;border-top:3px solid var(--mg-ink);border-bottom:1px solid var(--mg-ink)}
.wsf-nums h2{margin:0 0 14px;font:800 13px/1.2 var(--mg-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mg-red)}
.wsf-nums ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wsf-nums li{margin:0 0 14px}
.wsf-nums b{display:block;font:900 clamp(30px,4.6vw,44px)/1 var(--mg-serif);color:var(--mg-ink)}
.wsf-nums span{display:block;margin-top:6px;font:15px/1.4 var(--mg-text);color:var(--mg-ink2)}
.wsf .wsm-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.wsf-next{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;margin:0;padding:16px 0 0;border:0;border-top:1px solid var(--mg-rule);background:none;
  cursor:pointer;text-align:left;font:900 clamp(20px,3vw,26px)/1.2 var(--mg-serif);color:var(--mg-ink)}
.wsf-next span{font:800 11px/1.2 var(--mg-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mg-red)}
.wsf-next b{font:inherit}
.wsf-next i{display:inline-block;font-style:normal;transition:transform .4s ease}
.wsf-next:hover i{transform:translateX(6px)}
html.night-page .wsm{background:#0e1823;color:var(--night-text)}
@media (max-width:640px){.wsf-nums ul{grid-template-columns:1fr;gap:4px}.wsf .wsf-cover{aspect-ratio:4/3}.wsf .mag-top{top:5%}}
@media (max-width:640px){.wsc{grid-template-columns:1fr;gap:14px;margin-left:0;margin-right:0}.wsc-card.wide{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.wsc-card,.wsc-card img,.wsc-card video,.wsm .wsf{transition:none}.wsc-card.on img{transform:scale(1.02)}.wsm[open],.wsm[open]::backdrop,.wsm.shut,.wsm.shut::backdrop{animation:none}}