/* ═══════════════════════════════════════════════════════════════════════
   designeroguz.com · case pages (/work/<slug>/), loaded only there.
   Story order: hero → film (through the O window) → 01 brief · 02 idea · 03 craft
   → the line, on paper → films → chapters → next project.
   Each page carries its brand on <main>: --tone (brand colour), --hi (the same
   idea, legible on ink), --on (text on the tone). Ink and paper stay the system.
   ═══════════════════════════════════════════════════════════════════════ */

.cs{--tone:var(--accent);--hi:var(--accent-hi);--on:#fff;--g:clamp(10px,1.1vw,18px);--sp:clamp(96px,15vh,190px);--rule:clamp(48px,7vw,112px)}
.cs ::selection{background:var(--tone);color:var(--on)}
.cs :focus-visible{outline-color:var(--hi)}

/* ═══ HERO ═══ */
.cs-hero{container-type:inline-size;padding:calc(var(--nav-h) + clamp(16px,3.4vh,44px)) var(--pad) clamp(44px,7vh,88px)}
.cs-hero__top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:clamp(22px,4.4vh,56px)}
.cs-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:620;font-stretch:108%;color:var(--fog-2);transition:color .3s}
.cs-back .ico{transition:transform .45s var(--ease-out)}
.cs-back:hover{color:var(--fog)}
.cs-back:hover .ico{transform:translateX(-4px)}
.cs-idx{color:var(--fog-2)}
.cs-kind{display:inline-flex;align-items:center;gap:10px;height:30px;padding:0 12px 0 10px;margin-bottom:clamp(16px,2.6vh,30px);
  background:var(--tone);color:var(--on);font-family:var(--mono);font-size:12px;font-weight:560;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.cs-kind__o{width:11px;height:11px;flex:none;border:calc(11px * var(--ring)) solid currentColor}

/* the wordmark: sized from Mona's advance widths (build_cases: --tl the whole title, --tw its widest word) */
.cs-title{--max:min(19vw,31svh);font-size:min(var(--max),calc(100cqw / var(--tl,3) * .99));font-weight:900;font-stretch:125%;text-transform:uppercase;
  line-height:.8;letter-spacing:-.03em;white-space:nowrap;padding-top:.05em;margin-left:-.035em}
.cs-title__w{display:inline-block;white-space:nowrap}
html.js:not(.is-reduced) .cs-title{visibility:hidden;animation:cs-show 0s 2.6s forwards}
@keyframes cs-show{to{visibility:visible}}
.cs-hero__row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px clamp(28px,5vw,96px);align-items:end;margin-top:clamp(26px,4.6vh,52px)}
.cs-tag{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(32px,3.7vw,64px);line-height:1;letter-spacing:-.012em;max-width:15em;text-wrap:balance}
.cs-lede{font-size:clamp(16px,1.2vw,19px);line-height:1.5;color:var(--fog-2);max-width:44ch;text-wrap:pretty}
.cs-meta{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:24px clamp(20px,3vw,48px);
  margin-top:clamp(30px,5.4vh,60px);padding-top:clamp(18px,2.6vh,26px);border-top:1px solid var(--fog-3)}
.cs-meta::before{content:'';position:absolute;left:0;top:-1px;width:var(--rule);height:2px;background:var(--hi);transform-origin:0 50%;transform:scaleX(var(--rs,1))}
.cs-meta dt{color:var(--fog-2);margin-bottom:10px}
.cs-meta dd{margin:0;font-size:15px;line-height:1.45;font-weight:540;font-stretch:102%}
.cs-meta li + li{margin-top:3px}
@media (max-width:860px){
  /* by width, and by height too: on a landscape phone the name alone would fill the screen */
  .cs-title{--max:min(46vw,30svh);font-size:min(var(--max),calc(100cqw / var(--tw,3) * .99));white-space:normal}
  .cs-hero__row{grid-template-columns:1fr;align-items:start}
  .cs-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══ THE FILM · it opens through the O window ═══ */
.cs-film__frame{position:relative;overflow:hidden;background:#000;cursor:pointer}
.cs-film__box{position:relative;width:100%;aspect-ratio:var(--ar);max-height:100svh;overflow:hidden}
.cs-film__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the paper ring around the opening window (work.js sizes it; only with motion) */
.cs-film__ring{position:absolute;left:0;top:0;z-index:1;box-sizing:border-box;border:0 solid var(--paper);pointer-events:none;will-change:transform}
.cs-film--p .cs-film__frame{display:grid;place-items:center;padding:clamp(32px,7vh,84px) var(--pad);background:var(--tone)}
.cs-film--p .cs-film__box{width:auto;height:min(80svh,900px);max-height:none;box-shadow:0 44px 90px -28px rgba(0,0,0,.42)}
.cs-play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;display:inline-flex;align-items:center;height:68px;padding:0 26px 0 0;
  background:var(--fog);color:var(--ink);white-space:nowrap;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.cs-play__ico{display:grid;place-items:center;width:68px;height:68px;margin-right:20px;background:var(--tone);color:var(--on);font-size:18px}
.cs-play__t{font-size:17px;font-weight:720;font-stretch:110%;letter-spacing:.005em}
.cs-play__m{margin-left:18px;color:var(--ink-soft)}
.cs-film__frame:hover .cs-play{transform:scale(1.04)}
.cs-play:focus-visible{outline:2px solid var(--hi);outline-offset:4px}
.cs-film__cap{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(14px,2.4vh,24px);z-index:2;color:var(--fog);text-shadow:0 1px 12px rgba(0,0,0,.55);pointer-events:none}
.cs-film--p .cs-film__cap{color:var(--on);text-shadow:none}
.cs-film--p .cs-play__ico{background:var(--hi);color:var(--ink)}   /* the film sits on its own brand colour */
/* a portrait film is lettering and a figure in the middle: its play pill rides the bottom of the picture instead */
.cs-film--p .cs-play{top:auto;bottom:calc((100% - min(80svh,900px)) / 2 + clamp(16px,2.6vh,32px));translate:-50% 0}
/* wide screens, with motion: the frame holds the screen (sticky, no pin) while the square window opens to it */
@media (min-width:861px){
  html.js:not(.is-reduced) .cs-film{height:178vh;height:178lvh}
  html.js:not(.is-reduced) .cs-film__frame{position:sticky;top:0;height:100vh;height:100lvh}
  html.js:not(.is-reduced) .cs-film__cap{bottom:calc(100lvh - 100svh + clamp(14px,2.4vh,24px))}
  html.js:not(.is-reduced) .cs-film:not(.cs-film--p) .cs-film__box{height:100%;aspect-ratio:auto;max-height:none}
}
@media (max-width:640px){
  .cs-play{height:52px;padding-right:18px}
  .cs-play__ico{width:52px;height:52px;margin-right:14px;font-size:15px}
  .cs-play__t{font-size:15px}
  .cs-play__m{margin-left:12px}
  .cs-film--p .cs-film__box{width:100%;height:auto;box-shadow:none}
  .cs-film__cap{display:none}
  .cs-film--p .cs-play{bottom:calc(clamp(32px,7vh,84px) + 14px)}
}

/* ═══ HERO STRIP (no film: the first posts of the feed) ═══ */
.cs-strip{padding:0 var(--pad)}
.cs-strip__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}

/* ═══ STORY · 01 brief · 02 idea · 03 craft ═══ */
.cs-story{padding:var(--sp) var(--pad) 0}
.cs-block{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px clamp(28px,5vw,96px);padding:clamp(30px,5vh,56px) 0 clamp(36px,6vh,68px);border-top:1px solid var(--fog-3)}
.cs-block:last-child{border-bottom:1px solid var(--fog-3)}
.cs-block__h{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cs-block__n{display:block;font-size:clamp(48px,5.6vw,96px);font-weight:900;font-stretch:125%;line-height:.82;letter-spacing:-.03em;color:var(--hi);font-variant-numeric:tabular-nums}
.cs-block__l{font-size:clamp(20px,1.7vw,28px);font-weight:720;font-stretch:112%;letter-spacing:-.01em;line-height:1.1}
.cs-block__p{font-size:clamp(19px,1.6vw,26px);line-height:1.5;font-weight:430;max-width:56ch;text-wrap:pretty;padding-top:.2em}
@media (max-width:860px){
  .cs-block{grid-template-columns:1fr;gap:18px}
  .cs-block__h{flex-direction:row;align-items:baseline;gap:16px}
}
/* the sticky frame (≥1100 px, js): the blocks scroll on the left, one piece of the page per block on the right,
   each opening through the square O over the last (work.js). The block on the line through the middle is the lit one. */
.cs-sf{display:none}
@media (min-width:1100px){
  html.js .cs-story--frame{--sg:clamp(48px,6vw,180px);container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--sg);align-items:start}
  html.js .cs-story--frame .cs-block{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,3vh,34px);
    min-height:max(64svh,440px);padding:clamp(34px,6svh,80px) 0 clamp(40px,8svh,96px);border:0}
  html.js .cs-story--frame .cs-block::before{content:'';display:block;width:var(--rule);height:2px;background:var(--hi)}
  html.js .cs-story--frame .cs-block__h{flex-direction:row;align-items:baseline;gap:clamp(16px,1.4vw,30px)}
  html.js .cs-story--frame .cs-block__p{max-width:min(100%,52ch);padding-top:0}
  html.js .cs-sf{--sfw:min(calc((100cqw - var(--sg)) / 2),58svh);display:block;grid-column:2;grid-row:1 / span 3;align-self:start;justify-self:end;
    position:sticky;top:calc(50svh - (var(--sfw) * 1.25 + 44px) / 2);width:var(--sfw);margin-top:clamp(34px,6svh,80px)}
  /* the lit block: full strength and a full accent rule; the others stay readable (.6: text ≥ 6:1, numbers ≥ 3:1) */
  .cs-story.is-live .cs-block{opacity:.6;transition:opacity .8s var(--ease-out)}
  .cs-story.is-live .cs-block.is-on{opacity:1}
  .cs-story.is-live .cs-block::before{transform-origin:0 50%;transform:scaleX(.34);transition:transform .9s var(--ease-out)}
  .cs-story.is-live .cs-block.is-on::before{transform:none}
}
.cs-sf__box{position:relative;aspect-ratio:.8;overflow:hidden;background:var(--ink-2)}
.cs-sf__i{position:absolute;inset:0;visibility:hidden;overflow:hidden}
.cs-sf__i.is-on{visibility:visible}
.cs-sf__i img,.cs-sf__i video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-sf__ring{position:absolute;left:0;top:0;z-index:999;box-sizing:border-box;border:0 solid var(--paper);pointer-events:none;visibility:hidden;will-change:transform}
.cs-sf__caps{position:relative;height:1.4em;margin-top:16px;color:var(--fog-2);white-space:nowrap}
.cs-sf__cap{position:absolute;left:0;top:0;right:0;display:flex;gap:10px;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .5s}
.cs-sf__cap.is-on{opacity:1}
.cs-sf__n{flex:none;color:var(--hi)}
.cs-sf__d{flex:none;opacity:.5}
.cs-sf__t{min-width:0;overflow:hidden;text-overflow:ellipsis}
html.is-reduced .cs-story.is-live .cs-block,html.is-reduced .cs-story.is-live .cs-block::before,html.is-reduced .cs-sf__cap{transition:none}

/* ═══ THE LINE · the page turns to paper, set in the brand colour ═══ */
.cs-quote{margin-top:var(--sp);padding:clamp(100px,19vh,230px) var(--pad);background:var(--paper);color:var(--tone);overflow:hidden}
.cs-quote::before{content:'';display:block;width:24px;height:24px;margin-bottom:clamp(30px,5vh,56px);border:calc(24px * var(--ring)) solid currentColor}
.cs-quote__q{margin:0}
.cs-quote__q p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(52px,12.2vw,228px);line-height:.92;letter-spacing:-.028em}
.cs-quote__l{display:block;text-wrap:balance}
.cs-quote__l:nth-child(even){padding-left:1.15em}
.cs-quote ::selection{background:var(--tone);color:var(--paper)}

/* ═══ SECTION HEADS ═══ */
.cs-sec{padding:var(--sp) var(--pad) 0}
.cs-sh{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:clamp(18px,2.6vh,26px);margin-bottom:clamp(26px,4.4vh,52px);border-bottom:1px solid var(--fog-3)}
.cs-sh::after{content:'';position:absolute;left:0;bottom:-1px;width:var(--rule);height:2px;background:var(--hi)}
.cs-sh__h{display:grid;gap:clamp(12px,2vh,20px);min-width:0}
.cs-sh__n{color:var(--hi)}
.cs-sh__t{display:block;font-size:clamp(38px,6.2vw,108px);font-weight:880;font-stretch:118%;text-transform:uppercase;line-height:.88;letter-spacing:-.03em;text-wrap:balance}
:lang(tr) .cs-sh__t{line-height:1}         /* two-line TR heads: the İ dot clears the line above */
.cs-sh__c{flex:none;color:var(--fog-2);padding-bottom:.35em}

/* ═══ PIECES · a figure, its media and a numbered caption ═══ */
.pc{margin:0;min-width:0}
.pc__media{position:relative;display:block;width:100%;aspect-ratio:var(--ar);background:var(--ink-2);overflow:hidden}
.pc__media img,.pc__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
button.pc__media{cursor:pointer;text-align:left}
button.pc__media video{transition:transform 1s var(--ease-out)}
button.pc__media:hover video{transform:scale(1.025)}
button.pc__media:focus-visible{outline:2px solid var(--hi);outline-offset:4px}
.pc__play{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:38px;height:38px;background:rgba(13,13,14,.62);color:var(--fog);font-size:13px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ease-out),background-color .3s}
button.pc__media:hover .pc__play,button.pc__media:focus-visible .pc__play{opacity:1;transform:none;background:var(--tone);color:var(--on)}
@media (hover:none){.pc__play{opacity:1;transform:none}}
.pc__cap{display:flex;align-items:baseline;gap:10px;margin-top:12px;font-size:14px;font-weight:560;font-stretch:102%;line-height:1.35;color:var(--fog)}
.pc__n{flex:none;color:var(--hi)}
.pc__dash{flex:none;color:rgba(237,237,232,.3)}
.pc__t{min-width:0}

/* mixed: wide pieces alone (never taller than the screen), portrait pieces in pairs, odd runs end in a trio */
.cs-mixed{display:grid;gap:clamp(44px,8vh,104px)}
.cs-row{display:grid;gap:clamp(14px,1.8vw,30px);align-items:start}
.cs-row--wide .pc{width:min(100%,calc(86svh * var(--ar)));justify-self:center}
.cs-row--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-row--pair .pc{width:min(100%,calc(84svh * var(--ar)))}
.cs-row--pair .pc:first-child{justify-self:end}
.cs-row--pair .pc:last-child{justify-self:start;margin-top:clamp(48px,12vh,150px)}
.cs-row--trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-row--trio .pc{width:min(100%,calc(80svh * var(--ar)));justify-self:center}
.cs-row--trio .pc:nth-child(2){margin-top:clamp(28px,7vh,90px)}
.cs-row--solo .pc{width:min(100%,calc(50% - var(--g)),calc(84svh * var(--ar)));justify-self:center}

/* series: a slow carousel of one story told in several frames */
.cs-series__track{position:absolute;inset:0;display:flex;transition:transform 1s var(--ease-io)}
.cs-series__slide{position:relative!important;flex:0 0 100%;width:100%;height:100%;object-fit:cover}
.cs-series__ui{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.cs-series__b{display:grid;place-items:center;width:40px;height:40px;background:rgba(13,13,14,.62);color:var(--fog);font-size:15px;pointer-events:auto;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background-color .3s,color .3s}
.cs-series__b:hover{background:var(--tone);color:var(--on)}
.cs-series__n{padding:6px 10px;background:rgba(13,13,14,.62);color:var(--fog);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* feed: the grid as it lives on Instagram, every post moving while it is on screen */
.cs-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.2vh,34px) clamp(6px,.6vw,10px)}
.pc--tile .pc__cap{margin-top:10px;font-size:13px}

/* reels: one row of 9:16 */
.cs-reels__row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--g)}
@media (max-width:1100px){.cs-reels__row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}}

/* ═══ FILMS · justified rows, every film at its own aspect ratio ═══ */
.cs-films__grid{--rh:clamp(190px,21vw,340px);display:flex;flex-wrap:wrap;gap:clamp(26px,3.6vh,40px) var(--g)}
.cf{flex:var(--ar) 1 calc(var(--ar) * var(--rh));max-width:calc(var(--ar) * var(--rh) * 1.75);min-width:0}
.cf__btn{display:block;width:100%;text-align:left}
.cf__media{position:relative;display:block;aspect-ratio:var(--ar);background:var(--ink-2);overflow:hidden}
.cf__media img,.cf__prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out),opacity .45s}
.cf__prev{opacity:0}
.cf__btn.is-prev .cf__prev{opacity:1}
.cf__btn:hover .cf__media img,.cf__btn:hover .cf__prev{transform:scale(1.03)}
.cf__play{position:absolute;left:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:40px;height:40px;background:rgba(13,13,14,.66);color:var(--fog);font-size:14px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background-color .3s,color .3s,transform .5s var(--ease-out)}
.cf__btn:hover .cf__play,.cf__btn:focus-visible .cf__play{background:var(--tone);color:var(--on)}
.cf__btn:focus-visible{outline:2px solid var(--hi);outline-offset:4px}
/* skim: across the tile the preview follows the pointer; a thin line and the film's own timecode say where */
.cf__skim{position:absolute;left:0;right:0;bottom:0;z-index:3;height:2px;background:rgba(237,237,232,.2);opacity:0;transition:opacity .25s;pointer-events:none}
.cf__skim i{position:absolute;inset:0;background:var(--hi);transform-origin:0 50%;transform:scaleX(0)}
.cf__skim b{position:absolute;right:10px;bottom:12px;padding:5px 8px;background:rgba(13,13,14,.7);color:var(--fog);font-weight:500;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cf__btn.is-skim .cf__skim{opacity:1}
.cf__btn.is-skim .cf__media img,.cf__btn.is-skim .cf__prev{transition:opacity .45s}
.cf__cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:12px;font-size:14px;font-weight:600;line-height:1.3}
.cf__d{flex:none;color:var(--fog-2)}
/* a lone last film keeps the row height instead of growing to 1.75x over the row above */
@media (min-width:641px){.cs-films__grid::after{content:'';flex:10 1 0}}
/* tablets and landscape phones: taller rows, so a 9:16 tile keeps room for its caption */
@media (min-width:641px) and (max-width:860px){.cs-films__grid{--rh:clamp(190px,30vw,340px)}}

/* ═══ NEXT PROJECT ═══ */
.cs-next{--nh:min(88svh,880px);--ni:clamp(30px,6.4vh,68px);position:relative;display:block;container-type:inline-size;height:var(--nh);min-height:520px;margin-top:var(--sp);
  overflow:hidden;background:var(--ntone,var(--ink-2));color:var(--fog)}
.cs-next__win{position:absolute;inset:0;overflow:hidden;background:var(--ntone,var(--ink-2))}
.cs-next__media{position:absolute;inset:-9% 0}
.cs-next__media video,.cs-next__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.cs-next:hover .cs-next__media video,.cs-next:hover .cs-next__media img{transform:scale(1.04)}
.cs-next::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(13,13,14,.88),rgba(13,13,14,.3) 52%,rgba(13,13,14,.08))}
.cs-next__in{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:var(--ni);display:grid;gap:clamp(14px,2.2vh,22px)}
.cs-next__k{color:var(--fog-2)}
.cs-next__t{display:block;font-size:min(13vw,26svh,calc((100cqw - 2 * var(--pad)) / var(--nl,4) * .99));font-weight:900;font-stretch:125%;text-transform:uppercase;
  line-height:.8;letter-spacing:-.03em;white-space:nowrap;padding-top:.04em;margin-left:-.03em}
.cs-next__w{display:inline-block}
.cs-next__row{display:flex;justify-content:space-between;align-items:center;gap:24px}
.cs-next__tag{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.3vw,38px);line-height:1.05}
.cs-next__go{flex:none;display:grid;place-items:center;width:clamp(56px,5.2vw,80px);aspect-ratio:1;background:var(--fog);color:var(--ink);font-size:clamp(20px,1.8vw,28px);
  transition:transform .6s var(--ease-out),background-color .35s,color .35s}
.cs-next:hover .cs-next__go{transform:translateX(8px);background:var(--ntone);color:var(--non)}
/* keyboard: an outline would hide under the picture, the shade and the text, so the ring is drawn on top */
.cs-next:focus-visible{outline:none}
.cs-next:focus-visible::before{content:'';position:absolute;inset:8px;z-index:2;border:2px solid var(--fog);pointer-events:none}
.cs-next--p:focus-visible::before{border-color:var(--non)}
.cs-next__tag{text-wrap:balance}
/* portrait projects: the poster stands on its own brand colour, the name beside it */
.cs-next--p{--pw:calc((var(--nh) - 2 * var(--ni)) * .8)}
.cs-next--p::after{display:none}
.cs-next--p .cs-next__media{inset:var(--ni) var(--pad) var(--ni) auto;width:var(--pw)}
.cs-next--p .cs-next__in{right:calc(var(--pad) * 2 + var(--pw))}
.cs-next--p .cs-next__t{font-size:min(13vw,24svh,calc((100cqw - 3 * var(--pad) - var(--pw)) / var(--nw,4) * .99));white-space:normal}
.cs-next--p .cs-next__w{display:block;white-space:nowrap}
.cs-next--p .cs-next__k{color:var(--non);opacity:.75}
.cs-next--p .cs-next__tag{color:var(--non)}
.cs-next--p:hover .cs-next__go{background:var(--non);color:var(--ntone)}
.cs-foot{margin:0 var(--pad);border-top:0}

/* ═══ PULL · with motion the next project is pulled open (work.js adds .is-on, and moves the footer above) ═══ */
.cs-pull__ring,.cs-pull__hint,.cs-pull__bar{display:none}
.cs-pull.is-on{position:relative;height:230vh;height:230lvh}
.cs-foot.is-above{margin-top:var(--sp);border-top:1px solid var(--fog-3)}
.cs-pull.is-on .cs-next{--nh:100svh;--lv:calc(100lvh - 100svh);position:sticky;top:0;height:100vh;height:100lvh;min-height:0;margin-top:0;background:var(--ink)}
.cs-pull.is-on .cs-next .cs-next__in{bottom:calc(var(--lv,0px) + var(--ni))}
.cs-pull.is-on .cs-next:not(.cs-next--p) .cs-next__media{inset:0}
.cs-pull.is-on .cs-next__media video,.cs-pull.is-on .cs-next__media img{transition:none;will-change:transform}
.cs-pull.is-on .cs-next::after{opacity:var(--tx,0)}
.cs-pull.is-on .cs-next__in{z-index:3;opacity:var(--tx,0);transform:translateY(calc((1 - var(--tx,0)) * 28px))}
.cs-pull.is-on .cs-pull__ring{display:block;position:absolute;left:0;top:0;z-index:2;width:0;height:0;box-sizing:border-box;border:0 solid var(--paper);
  pointer-events:none;will-change:transform,width}
.cs-pull.is-on .cs-pull__hint{display:block;position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:3;text-align:center;color:var(--fog-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.cs-pull.is-on .cs-pull__bar{display:flex;align-items:center;gap:16px;position:absolute;left:var(--pad);right:var(--pad);
  bottom:calc(var(--lv,0px) + clamp(10px,1.6vh,18px) + env(safe-area-inset-bottom));z-index:3;color:var(--fog-2);opacity:0;pointer-events:none}
.cs-pull__track{position:relative;flex:1;height:2px;background:rgba(237,237,232,.18)}
.cs-pull__fill{position:absolute;inset:0;background:var(--fog);transform-origin:0 50%;transform:scaleX(0)}
.cs-pull__pct{flex:none;min-width:3ch;text-align:right;color:var(--fog)}
.cs-next.is-end .cs-pull__fill{background:var(--hi)}
.cs-next--p.is-end .cs-pull__fill{background:var(--non)}
.cs-pull.is-on .cs-next--p .cs-pull__bar{color:var(--non)}
.cs-pull.is-on .cs-next--p .cs-pull__track{background:rgba(255,255,255,.28)}
/* full and rested: the label asks for one more scroll, the arrow box lights up and nudges (the last step) */
.cs-pull__g2{display:none}
.cs-next.is-ready .cs-pull__g1{display:none}
.cs-next.is-ready .cs-pull__g2{display:inline;color:var(--fog)}
.cs-next--p.is-ready .cs-pull__g2{color:var(--non)}
.cs-next.is-ready .cs-next__go{background:var(--ntone);color:var(--non);animation:cs-nudge 1.4s var(--ease-io) infinite}
.cs-next--p.is-ready .cs-next__go{background:var(--non);color:var(--ntone)}
@keyframes cs-nudge{0%,100%{transform:none}45%{transform:translateX(9px)}}
/* keyboard: a focused link shows the whole picture and its name, whatever the scroll */
.cs-pull.is-on .cs-next:focus-visible{--tx:1!important}
.cs-pull.is-on .cs-next:focus-visible .cs-next__win{clip-path:none!important}
.cs-pull.is-on .cs-next:focus-visible .cs-pull__ring,.cs-pull.is-on .cs-next:focus-visible .cs-pull__hint{opacity:0!important}
.cs-pull.is-on .cs-next:focus-visible .cs-next__media video,.cs-pull.is-on .cs-next:focus-visible .cs-next__media img{transform:none!important}
.cs-pull.is-on .cs-next:focus-visible .cs-next__media{translate:none!important}

/* ═══ PHONES ═══ */
@media (max-width:860px){
  .cs-next__t{font-size:min(26vw,calc((100cqw - 2 * var(--pad)) / var(--nl,4) * .99))}
  .cs-next--p{--pw:auto}
  .cs-next--p .cs-next__media{inset:calc(var(--nav-h) + 6px) var(--pad) auto var(--pad);width:auto;height:48%}
  .cs-next--p .cs-next__media img,.cs-next--p .cs-next__media video{object-fit:contain}
  .cs-next--p .cs-next__in{right:var(--pad)}
  .cs-next--p .cs-next__t{font-size:min(26vw,calc((100cqw - 2 * var(--pad)) / var(--nw,4) * .99))}
}
@media (max-width:640px){
  .cs{--sp:clamp(76px,12vh,110px)}
  .cs-strip__row,.cs-reels__row{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 4px;scrollbar-width:none}
  .cs-strip__row::-webkit-scrollbar,.cs-reels__row::-webkit-scrollbar{display:none}
  .cs-strip__row > .pc{flex:0 0 76%;scroll-snap-align:start}
  .cs-reels__row > .pc{flex:0 0 56%;scroll-snap-align:start}
  .cs-row--pair,.cs-row--trio{grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,6vh,56px)}
  .cs-row--pair .pc,.cs-row--trio .pc,.cs-row--solo .pc{width:100%;margin-top:0!important;justify-self:stretch}
  .cs-mixed{gap:clamp(36px,6vh,56px)}
  .cs-feed{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 6px}
  .cs-films__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:24px 10px}
  .cf{max-width:none}
  .cf--h,.cf--fill{grid-column:span 2}
  .cf:not(.cf--h) .cf__media{aspect-ratio:.8}            /* pairs line up; a 9:16 preview is cropped to 4:5 */
  .cf--fill .cf__media{aspect-ratio:1}                   /* the odd one takes the row as a square */
  .cs-sh{align-items:flex-start;flex-direction:column;gap:14px}
  .cs-sh__t{font-size:clamp(30px,8.6vw,108px);max-width:100%}
  html:not(.js) .cs-sh__t{overflow-wrap:anywhere}   /* with js, OK.fit shrinks a long word instead of breaking it */
  .cs-sh__c{padding:0}
  .cs-quote{padding:clamp(80px,14vh,120px) var(--pad)}
  .cs-next{--nh:82svh;min-height:480px}
  .cs-next__go{width:52px;font-size:18px}
}
@media (max-width:860px){.cs-pull.is-on{height:180vh;height:180lvh}}
/* a lone last post in the feed signs it off from the middle column */
@media (min-width:641px){.cs-feed > .pc:last-child:nth-child(3n+1){grid-column:2}}

/* ═══ big screens (2K/4K desks): the reading sizes grow with the canvas, and so do the controls ═══ */
@media (min-width:1900px){
  .cs-back{font-size:16px}
  .cs-kind{height:36px;gap:12px;padding:0 15px 0 12px;font-size:14px}
  .cs-kind__o{width:13px;height:13px;border-width:calc(13px * var(--ring))}
  .cs-tag{font-size:clamp(32px,3.7vw,92px)}
  .cs-lede{font-size:clamp(16px,1.2vw,26px)}
  .cs-meta dd{font-size:18px}
  .cs-block__n{font-size:clamp(48px,5.6vw,132px)}
  .cs-block__l{font-size:clamp(20px,1.7vw,36px)}
  .cs-block__p{font-size:clamp(19px,1.6vw,34px)}
  .cs-sh__t{font-size:clamp(38px,6.2vw,156px)}
  .pc__cap,.cf__cap{font-size:16px}
  .pc--tile .pc__cap{font-size:15px}
  .pc__play{width:48px;height:48px;font-size:16px}
  .cf__play{width:50px;height:50px;font-size:17px}
  .cs-series__b{width:50px;height:50px;font-size:18px}
  .cs-play{height:84px;padding-right:32px}
  .cs-play__ico{width:84px;height:84px;margin-right:24px;font-size:22px}
  .cs-play__t{font-size:19px}
  .cs-quote::before{width:36px;height:36px;border-width:calc(36px * var(--ring))}
  .cs-quote__q p{font-size:clamp(52px,12.2vw,300px)}
  .cs-next__go{width:clamp(56px,4.4vw,112px);font-size:clamp(20px,1.5vw,34px)}
  .cs-next__tag{font-size:clamp(22px,2.3vw,52px)}
}
@media (min-width:2400px){
  .cs-back{font-size:18px}
  .cs-kind{height:42px;padding:0 18px 0 14px;font-size:16px}
  .cs-kind__o{width:15px;height:15px;border-width:calc(15px * var(--ring))}
  .cs-meta dd{font-size:21px}
  .pc__cap,.cf__cap{font-size:18px}
  .pc--tile .pc__cap{font-size:16px}
  .cs-play{height:96px;padding-right:36px}
  .cs-play__ico{width:96px;height:96px;margin-right:28px;font-size:24px}
  .cs-play__t{font-size:21px}
  .cs-quote::before{width:42px;height:42px;border-width:calc(42px * var(--ring))}
}