/* The case pages of the portfolio: the same language as the main page — dark rounded cards, one warm white, the serif and the grotesque, the big words in the corners. */
:root{--ink:#f1f0ec;--mute:rgba(241,240,236,.62);--line:rgba(241,240,236,.2);--stroke:rgba(241,240,236,.4);--card:rgba(10,10,10,.5);--r:clamp(14px,1.5vw,24px);--pad:clamp(16px,2.2vw,34px);--sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--serif:'Instrument Serif','Times New Roman',Georgia,serif;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{background:#000;color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;padding:6px;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--ink);color:#000}
.cap{font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}

/* the way in and the way out */
.back{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:60;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:999px;background:rgba(20,20,20,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(241,240,236,.3),0 10px 34px rgba(0,0,0,.5);color:var(--ink);font:500 11px/1 var(--sans);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;transition:background .3s,transform .35s var(--ease)}
.back:hover{background:rgba(241,240,236,.18)}
.back.hide{transform:translate(-50%,-70px)}
html.tx-in::after{content:"";position:fixed;inset:0;z-index:400;background:#000;pointer-events:none;animation:txOut .35s ease .03s forwards}
html.tx-in .cw:not(.cwfix){z-index:401}
html.tx-fly .hero figure{visibility:hidden}
html.tx-fly .hero{animation:none!important}   /* the picture of the opening screen is not there yet: its copy comes flying from the list */
@keyframes txOut{to{opacity:0;visibility:hidden}}
html.tx-in .hero figure img{animation:none}
@keyframes txDive{from{transform:scale(1.14);filter:brightness(1.1)}to{transform:none}}
html.tx-in .card:nth-of-type(2){animation-delay:.07s}
html.tx-in .card:nth-of-type(n+3){animation-delay:.14s}
@keyframes txRise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
.tx-out{position:fixed;inset:0;z-index:500;background:#000;opacity:0;pointer-events:none}

/* cards */
.card{position:relative;background:var(--card);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--stroke);padding:var(--pad);margin:0 auto 8px;max-width:min(1200px,100%);overflow:clip}   /* every block is a rounded card with a thin light outline, as on the main page */   /* clip, not hidden: the label of a stage must still stick */
.cw{position:fixed;top:4px;z-index:55;mix-blend-mode:difference;color:#fff;font-weight:500;font-size:clamp(34px,4.5vw,80px);letter-spacing:-.06em;line-height:.86;white-space:nowrap;pointer-events:none}
.cw.l{left:12px}.cw.r{right:12px}   /* the title words stay at the top corners the whole way down; the difference blend keeps them readable over both the dark page and the light screens */
.card.pt{padding-top:calc(var(--pad) + clamp(40px,5.2vw,86px))}

/* hero */
.hero .kick{display:flex;justify-content:space-between;gap:12px;color:var(--mute)}
.hero .lead{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.1vw,72px);line-height:1.02;letter-spacing:-.02em;max-width:19em;margin:clamp(24px,4vw,56px) 0 clamp(26px,4vw,60px);text-wrap:balance}
.hero .lead em{font-style:italic}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px var(--pad);padding-top:18px}
.meta dt{color:var(--mute);margin-bottom:6px}
.meta dd{font-size:15px;line-height:1.35}
.meta a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--ink)}
.hero figure{margin-top:clamp(26px,4vw,56px)}

/* figures */
figure{position:relative}
figure img{width:100%;height:auto;border-radius:calc(var(--r) * .7);background:#111}
figure.light img{background:#e8e8e8}
figcaption{margin-top:10px;color:var(--mute)}
.fgrid{display:grid;gap:14px}
.fgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* a stage: the label on the left, the content on the right */
.stage{display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--pad)}
.stage>.lbl{grid-column:1/5;position:sticky;top:64px;align-self:start}
.stage>.lbl .cap{color:var(--mute)}
.stage>.lbl h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.1vw,72px);line-height:.96;letter-spacing:-.02em;margin-top:10px}
.stage>.body{grid-column:5/13;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px)}
.stage p{font-size:clamp(15px,1.15vw,18px);line-height:1.55;max-width:44em}
.stage p+p{margin-top:-6px}
.stage ul.dots{list-style:none;display:grid;gap:8px;font-size:clamp(15px,1.15vw,18px);line-height:1.45}
.stage ul.dots li{position:relative;padding-left:18px}
.stage ul.dots li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.stage h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,40px);line-height:1;letter-spacing:-.01em}

/* the numbered problems */
.nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--pad);list-style:none;counter-reset:n}
.nums li{counter-increment:n;border-top:0;padding:16px 0 22px;font-size:clamp(15px,1.15vw,18px);line-height:1.45}
.nums li::before{content:counter(n,decimal-leading-zero);display:block;color:var(--mute);font-size:10.5px;font-weight:500;letter-spacing:.04em;margin-bottom:10px}

/* a hypothesis */
.hyp{border-top:0;padding-top:clamp(18px,2.4vw,34px);display:grid;gap:18px}
.hyp:first-child{border-top:0;padding-top:0}
.hyp header{display:flex;gap:16px;align-items:baseline}
.hyp header .n{font-family:var(--serif);font-size:clamp(34px,3.6vw,60px);line-height:.8;color:var(--mute)}
.hyp header h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,44px);line-height:1;letter-spacing:-.015em}
.hyp dl{display:grid;gap:12px}
.hyp dl>div{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:baseline}
.hyp dt{color:var(--mute)}
.hyp dd{font-size:clamp(15px,1.1vw,17px);line-height:1.5;max-width:46em}

/* a live concept embedded as a figure */
.embed{position:relative;aspect-ratio:1440/900;border-radius:calc(var(--r) * .7);overflow:hidden;background:#eceff4}
.embed iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0}

.vsw{display:flex;flex-wrap:wrap;gap:6px}
.vsw button{height:32px;padding:0 14px;border:0;border-radius:999px;background:rgba(241,240,236,.08);color:var(--ink);font:500 12px/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:background .25s,color .25s}
.vsw button:hover{background:rgba(241,240,236,.18)}
.vsw button.on{background:var(--ink);color:#0a0a0a}


/* the header pill: the way back + the contents, one glass capsule like the menu of the main page */
.hdr{position:fixed;left:50%;top:calc(4px + clamp(34px,4.5vw,80px) * .43 - 16.5px);transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:2px;padding:4px;max-width:calc(100vw - 24px);border-radius:999px;background:rgba(30,30,30,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(241,240,236,.22),0 10px 34px rgba(0,0,0,.5)}
.hdr .back{white-space:nowrap;flex:none;position:static;transform:none;height:auto;padding:7px 16px;gap:8px;font:500 11px/1 var(--sans);letter-spacing:.03em;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:999px}
.hdr .back:hover{background:rgba(241,240,236,.18)}
.hdr .back.on{background:rgba(241,240,236,.18)}
.hsep{width:1px;height:14px;background:rgba(241,240,236,.25);margin:0 2px;flex:none}
.hs{display:inline-flex;align-items:center;height:auto;padding:7px 16px;border-radius:999px;color:rgba(241,240,236,.62);font:500 11px/1 var(--sans);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
.hs:hover{background:rgba(241,240,236,.18);color:var(--ink)}
.hs.on{background:rgba(241,240,236,.18);color:var(--ink)}
@media(max-width:1180px){.hs{padding:7px 11px}}
@media(max-width:980px){.hs,.hsep{display:none}}
@media(max-width:700px){.cw{top:6px}.hdr{top:calc(6px + clamp(34px,10.2vw,46px) * .43 - 16.5px)}}
@media(min-width:1101px){.card:not(.next){padding-left:calc(var(--pad) + 76px)}}   /* the rail has a column of its own at the left: it no longer stands against the titles */


/* ---- the scene: no boxes around the stages; the number and the name of the stage stand at the left while the story passes at the right ---- */
body{counter-reset:st}
.card.stage{background:none;box-shadow:none;border-radius:0;overflow:visible;counter-increment:st;margin-bottom:clamp(56px,12vh,140px);padding-block:clamp(10px,2vw,30px)}
.card.stage .lbl{top:92px}
.card.stage .lbl::before{content:counter(st,decimal-leading-zero);display:block;font-family:var(--serif);font-size:clamp(70px,9vw,150px);line-height:.8;letter-spacing:-.04em;color:rgba(241,240,236,.16);margin-bottom:clamp(8px,1vw,16px)}
figure img{box-shadow:0 0 0 1px var(--stroke)}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:clamp(18px,2.4vw,34px)}
.bento.b3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bt{border-radius:calc(var(--r) * .8);box-shadow:inset 0 0 0 1px var(--stroke);padding:clamp(14px,1.6vw,22px);display:flex;flex-direction:column;gap:10px;min-height:clamp(120px,12vw,170px);justify-content:space-between}
.bt b{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,84px);line-height:.85;letter-spacing:-.03em}
.bt span{color:var(--mute);font-size:clamp(14px,1.05vw,16px);line-height:1.35}
.bt:nth-child(1){background:var(--ink);box-shadow:none}.bt:nth-child(1) b{color:#0a0a0a}.bt:nth-child(1) span{color:#3f3f3f}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento.b3{grid-template-columns:1fr}.card.stage .lbl::before{font-size:64px}}


/* readable: the story is a calm column, as an article; the pictures take the whole width of the stage */
.stage p,.stage ul.dots,.stage .nums li,.hyp dd{font-size:clamp(16px,1.25vw,19px);line-height:1.62}
.stage p{max-width:38em}
.hyp.cx{display:none}
.cx-open .hyp.cx{display:grid}
.cxbtn{align-self:flex-start;height:40px;padding:0 20px;border:0;border-radius:999px;background:rgba(241,240,236,.1);color:var(--ink);font:500 13px/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:background .25s}
.cxbtn:hover{background:rgba(241,240,236,.2)}
/* the quick look: four key screens in a row you can swipe, before the story begins */
.hl{max-width:min(1200px,100%);margin:0 auto clamp(48px,9vh,110px)}
.hl .cap{display:flex;justify-content:space-between;color:var(--mute);padding:0 6px 12px}
.hl-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 6px 14px;scrollbar-width:none}
.hl-row::-webkit-scrollbar{display:none}
.hl-row figure{flex:0 0 min(84%,860px);scroll-snap-align:center}
.hl-row figcaption{margin-top:10px}


/* the opening: no box around it either: the title, the facts and the picture stand straight on the page */
.card.hero{background:none;box-shadow:none;border-radius:0;overflow:visible;margin-bottom:clamp(48px,9vh,110px)}
.card.hero.pt{padding-top:calc(var(--pad) + clamp(70px,8vw,120px))}
.hero figure img{box-shadow:none;border-radius:0;background:none}
.hero .kick{padding-top:0}


/* the contents of the case: a second, smaller capsule under the menu */
.hdr2{position:fixed;left:50%;top:calc(4px + clamp(34px,4.5vw,80px) * .43 - 16.5px + 42px);transform:translateX(-50%);z-index:59;display:flex;gap:2px;padding:3px;max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;border-radius:999px;background:rgba(30,30,30,.45);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(241,240,236,.16)}
.hdr2::-webkit-scrollbar{display:none}
.hdr2 a{padding:6px 12px;border-radius:999px;color:rgba(241,240,236,.55);font:500 10px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
.hdr2 a:hover,.hdr2 a.on{background:rgba(241,240,236,.16);color:var(--ink)}
@media(max-width:700px){.hdr2{display:none}}


/* ===== the case page, second edition: a calm column of text, wide pictures on soft cards, a rail of contents at the left ===== */
.card.hero{max-width:min(1040px,100%);padding-inline:var(--pad)}
.hero .lead{font-size:clamp(34px,4.6vw,66px);max-width:15em;margin:clamp(14px,2vw,26px) 0 clamp(16px,2vw,26px)}
.hero .intro{max-width:36em;color:var(--mute);font-size:clamp(16px,1.3vw,19px);line-height:1.55;margin-bottom:18px}
.hero .chipx{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 4px;border-radius:999px;background:rgba(241,240,236,.08);margin-bottom:clamp(22px,3vw,40px);font-size:13px}
.hero .chipx b{height:26px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:var(--ink);color:#0a0a0a;font-weight:600;font-size:12px;white-space:nowrap}
.hero .chipx span{color:var(--mute)}
.hero .meta{padding:clamp(16px,2vw,24px);border-radius:var(--r);background:rgba(241,240,236,.05)}
.hero figure{margin-top:14px}
.hero figure img{border-radius:var(--r);background:#0d0d0d}
.bento{display:none}.bento.b3,.bento.b4{display:grid}
figure{background:rgba(241,240,236,.05);border-radius:var(--r);padding:clamp(10px,1.4vw,20px)}
figure img{box-shadow:none;border-radius:calc(var(--r) * .6)}
figcaption{padding:0 4px}
.hero figure{background:none;padding:0}
.hl figure{background:rgba(241,240,236,.05)}
.card.stage{display:block;max-width:min(1040px,100%);margin:0 auto clamp(70px,13vh,150px);padding:0 var(--pad);counter-increment:none}
.card.stage .lbl{position:static;max-width:640px;margin:0 auto clamp(18px,2.4vw,30px)}
.card.stage .lbl::before{display:none}
.card.stage .lbl h2{font-size:clamp(34px,3.6vw,52px);margin-top:8px}
.card.stage .body{max-width:none;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,32px)}
.stage .body>p,.stage .body>ul.dots,.stage .body>ol.nums,.stage .body>.cxbtn,.stage .body>.hyp>header,.stage .body>.hyp>dl{width:100%;max-width:640px;margin-inline:auto}
.stage .body>.cxbtn{display:block}
.stage .nums{grid-template-columns:1fr}
.hyp{gap:16px}
.hl{max-width:min(1040px,100%);padding-inline:var(--pad)}
/* the rail of contents */
.rail{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:14px;opacity:0;pointer-events:none;transition:opacity .4s}
.rail.show{opacity:1;pointer-events:auto}
.rail a{display:flex;align-items:center;gap:12px;height:18px;color:var(--mute);text-decoration:none}
.rail i{display:block;height:2px;width:18px;border-radius:2px;background:rgba(241,240,236,.26);transition:width .35s var(--ease),background .3s}
.rail span{font:500 13px/1 var(--sans);white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .35s var(--ease)}
.rail a.on i{width:44px;background:var(--ink)}
.rail a.on span{opacity:1;transform:none;color:var(--ink)}
.rail a:hover i{background:var(--ink)}
@media(max-width:1260px){.rail{display:none}}
.hdr2{display:none!important}


/* the rail at the right: the other cases */
.rail.r{left:auto;right:26px}
.rail.r a{flex-direction:row-reverse}
.rail.r span{transform:translateX(6px);text-align:right}
.rail.r:hover span{opacity:.75;transform:none}
.rail.r a.on span,.rail.r a:hover span{opacity:1;color:var(--ink)}
.rail.r a.on i{width:44px}


/* ===== the principle of the main page: every block is a full-width rounded card with a thin outline and its two big words in the corners ===== */
body{padding:6px}
.card,.card.hero,.card.stage,.hl,.foot{max-width:none;margin:0 0 6px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--stroke);overflow:clip}
.card.hero,.card.stage{position:relative;padding:calc(clamp(34px,4.5vw,80px) * .86 + 34px) var(--pad) clamp(26px,4vw,64px)}
.card.stage{counter-increment:none}
.hl{padding:calc(clamp(34px,4.5vw,80px) * .86 + 34px) var(--pad) clamp(26px,4vw,64px);position:relative}
.cw{position:absolute;top:2px;z-index:2}
.cw.l{left:9px}.cw.r{right:9px}
.card.stage .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
.card.stage .body{max-width:720px;margin:0 auto}
.stage .body>p,.stage .body>ul.dots,.stage .body>ol.nums,.stage .body>.cxbtn,.stage .body>.hyp>header,.stage .body>.hyp>dl{max-width:none;margin-inline:0}
.card.hero{padding-top:calc(clamp(34px,4.5vw,80px) * .86 + 40px)}
.hero>*:not(.cw){max-width:1040px;margin-left:auto;margin-right:auto}
.hero figure{max-width:1040px}
.hl .cap,.hl-row{max-width:1040px;margin-inline:auto}
.hl-row figure{background:rgba(241,240,236,.05)}
.foot{box-shadow:none;background:none;overflow:visible;padding:14px 10px 24px}
.next{padding-block:clamp(60px,10vw,150px)}


/* the screens stand on the card itself: no second plate, no outline round the picture */
figure,.hl figure,.hl-row figure,.hero figure{background:none;padding:0;box-shadow:none;border-radius:0}
figure img,.hl figure img{background:none;box-shadow:none;border-radius:0}
.hl-row{gap:clamp(18px,3vw,48px)}


/* the words of a block are a sticky row at its top: they stay under the header while the block is on the screen */
.card.hero,.card.stage,.hl{padding-top:var(--pad)}
.cwrow{position:sticky;top:4px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;height:calc(clamp(34px,4.5vw,80px) * .86);margin:-4px calc(9px - var(--pad)) 34px;pointer-events:none}
.cwrow .cw{position:static}
.hero>.cwrow{max-width:none;margin-left:calc(9px - var(--pad));margin-right:calc(9px - var(--pad))}


/* the rail of the other cases is switched off for now (the code is kept) */
.rail.r{display:none}


.hero>.chipx{display:flex;width:fit-content;margin-left:max(0px,calc((100% - 1040px) / 2))!important;margin-right:auto!important}   /* a block, so that it stands in the same column as the title and the facts */


/* the key figure: a plain line of text, not a switch */
.hero>.chipx{background:none;height:auto;padding:0;gap:14px;align-items:baseline;flex-wrap:wrap}
.hero .chipx b{height:auto;padding:0;border-radius:0;background:none;color:var(--ink);font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1;letter-spacing:-.02em}
.hero .chipx span{font-size:clamp(14px,1.1vw,17px);color:var(--mute)}
.hero .chipx span::before{content:"— ";color:var(--mute)}


/* the big words stand at the middle of the screen, left and right, while their block goes by */
.cwrow{top:4px}   /* the words are pinned at the top of the window while their block goes by */
.rail{top:calc(4px + clamp(34px,4.5vw,80px) * .86 + 22px);bottom:auto;transform:none;left:14px;gap:12px}   /* the contents hang under the pinned word, on its left edge */   /* the contents sit in the lower left corner, so that they do not stand under the word */


/* the contents under the pinned word: even short lines on its left edge, the one you are in is long and named; all names open when you point at it */
.rail{left:16px;gap:0}
.rail a{height:24px;gap:12px}
.rail i{width:14px!important;height:2px;background:rgba(241,240,236,.3)}
.rail a.on i{width:34px!important;background:var(--ink)}
.rail span{font:500 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;transform:none}
.rail a.on span{opacity:1;color:var(--ink)}
.rail:hover span{opacity:.65}
.rail:hover a.on span,.rail a:hover span{opacity:1;color:var(--ink)}
.rail:hover i{width:14px}


/* the contents as a timeline: a thin line with a dot for every part, the names always at hand; the part you are in is lit */
.rail{left:20px;gap:2px;counter-reset:rl;position:fixed}
.rail::before{content:"";position:absolute;left:3px;top:12px;bottom:12px;width:1px;background:rgba(241,240,236,.22)}
.rail a{position:relative;height:28px;gap:16px;counter-increment:rl}
.rail i,.rail a.on i,.rail:hover i{width:7px!important;height:7px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 1px rgba(241,240,236,.4);flex:none;transition:background .3s,box-shadow .3s,transform .3s}
.rail a.on i{background:var(--ink);box-shadow:none;transform:scale(1.25)}
.rail span,.rail:hover span{opacity:1;transform:none;font:500 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:rgba(241,240,236,.4);transition:color .3s}
.rail span::before{content:counter(rl,decimal-leading-zero) "  ";opacity:.6;margin-right:4px}
.rail a.on span,.rail a:hover span,.rail:hover a.on span{color:var(--ink)}
.rail a:hover i{box-shadow:inset 0 0 0 1px var(--ink)}
.rail a.on:hover i{box-shadow:none}


.card.hero.pt,.card.hero{padding-top:var(--pad)}   /* the pinned words open the card from its very top, as in every other block */
.hero>.cwrow{margin-top:-4px}


/* only the title of the block stays pinned, at the right; the left corner is the home of the contents */
.cwrow .cw.l{visibility:visible}   /* the name of the case, always at the left */
.rail{top:18px;left:18px}


/* each block carries its own contents in its corner */
.rail.c{position:absolute;top:10px;left:0;transform:none;z-index:4;pointer-events:auto;opacity:1}
.rail.c.show{opacity:1}
.cwrow{overflow:visible}


.rail.c{opacity:0;pointer-events:none;transition:opacity .3s}
.rail.c.live{opacity:1;pointer-events:auto}


/* the words sit exactly as on the main page: 2px under the top edge of the card, 9px from its sides */
.card.hero,.card.hero.pt,.card.stage,.hl{padding-top:2px}
.cwrow,.hero>.cwrow{margin-top:0;margin-bottom:34px}


/* no fading in and out: every block carries the contents; it travels with its block and is cut by the edge of the card, so between the blocks it passes smoothly from one card into the next */
.rail.c,.rail.c.live{opacity:1!important;pointer-events:auto;transition:none}


.rail.f{position:fixed;left:18px;top:20px;transform:none;opacity:1;pointer-events:auto;z-index:50;counter-reset:rl}
.rail.c{display:none!important}


/* the contents hang under the pinned title, at the right */
.rail.f{left:auto;right:18px;top:calc(8px + clamp(34px,4.5vw,80px) * .86 + 18px);align-items:flex-end}
.rail.f a{flex-direction:row-reverse}
.rail.f::before{left:auto;right:3px}
.rail.f span::before{margin-right:0;margin-left:4px;order:2}
.rail.f span{text-align:right}


/* the contents, modern: lines of different length lead into the names; the part you are in is bright, the one under the pointer lies on a soft plate */
.rail.f{right:18px;left:auto;top:calc(8px + clamp(34px,4.5vw,80px) * .86 + 18px);align-items:stretch;width:200px;gap:2px;counter-reset:none}
.rail.f::before{display:none}
.rail.f a{flex-direction:row;height:36px;padding:0 14px 0 10px;border-radius:12px;gap:14px;transition:background .25s}
.rail.f a:hover{background:rgba(241,240,236,.1)}
.rail.f i,.rail.f a.on i,.rail.f:hover i{width:18px!important;height:2px;border-radius:2px;background:rgba(241,240,236,.3);box-shadow:none;transform:none;flex:none;transition:background .25s,width .25s}
.rail.f a:nth-child(2n) i{width:24px!important}.rail.f a:nth-child(3n) i{width:14px!important}.rail.f a:nth-child(5n) i{width:28px!important}
.rail.f a.on i{background:var(--ink);width:30px!important}
.rail.f span,.rail.f:hover span{font:400 14px/1 var(--sans);letter-spacing:0;text-transform:none;color:rgba(241,240,236,.5);opacity:1;text-align:left;transition:color .25s}
.rail.f span::before{display:none}
.rail.f a.on span{color:var(--ink);font-weight:600}
.rail.f a:hover span{color:var(--ink)}
.rail.f a:hover i{background:var(--ink)}


/* the names stand in one column: every line has a cell of the same width, the line itself is of its own length inside it */
.rail.f i,.rail.f a.on i,.rail.f:hover i,.rail.f a:nth-child(n) i{width:36px!important;height:14px;background:none!important;position:relative;flex:none}
.rail.f i::before{content:"";position:absolute;left:0;top:6px;height:2px;border-radius:2px;width:18px;background:rgba(241,240,236,.3);transition:background .25s,width .25s}
.rail.f a:nth-child(2n) i::before{width:24px}.rail.f a:nth-child(3n) i::before{width:14px}.rail.f a:nth-child(5n) i::before{width:30px}
.rail.f a.on i::before{background:var(--ink);width:36px}
.rail.f a:hover i::before{background:var(--ink)}
.rail.f a{gap:12px}


/* the part you are in is already named by the pinned title, so the list shows only the other parts */
.rail.f a.on{display:flex;height:36px}
.rail.f a.on span,.rail.f:hover a.on span{font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink)}   /* the order of the parts stays as it was; the part you are in is marked by a bigger size */


/* the name of the case stands once, pinned at the left of the window, from the first screen to the last */
.cwrow .cw.l{display:none}
.cwrow .cw.r{margin-left:auto}
.cwfix{position:fixed;left:15px;top:8px;z-index:55;pointer-events:none}


/* the calm list: small, quiet; the part you are in is white with a long line, nothing is larger than the rest */
.rail.f{width:180px;top:calc(8px + clamp(34px,4.5vw,80px) * .86 + 10px);gap:0}
.rail.f a{height:32px}
.rail.f span,.rail.f:hover span{font-size:13px}
.rail.f a.on i::before{width:36px}


/* the list is a drop-down hung on the title of the block */
.rail.f{display:none}
.rail.f.open{display:flex;width:260px;padding:8px;border-radius:18px;background:rgba(24,24,24,.9);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(241,240,236,.2),0 24px 60px rgba(0,0,0,.6);z-index:70;top:calc(8px + clamp(34px,4.5vw,80px) * .86 + 8px)}
.cwrow .cw.r{pointer-events:auto;cursor:pointer;position:relative}
.cwrow .cw.r::after{content:"";position:absolute;right:-.02em;bottom:.12em;width:.18em;height:.18em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-.1em,-.2em) rotate(45deg);opacity:.55;transition:transform .3s,opacity .3s}
.cwrow .cw.r.is-open::after{transform:translate(-.1em,-.05em) rotate(225deg);opacity:1}
.cwrow .cw.r{padding-right:.3em}
.rail.f span,.rail.f:hover span{white-space:nowrap}


/* no big title at the right: only the name of the case at the left and the calm list of parts at the right, cut by the edges of the blocks */
.cwrow .cw.r{display:none}
.rail.f{display:flex;width:190px;top:22px;right:18px;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}


/* the layout of a good case page: the contents are a rail of lines at the left, only the part you are in shows its name; the title of the part stands in the column above its text */
.rail.f{display:flex;left:18px;right:auto;top:calc(8px + clamp(34px,4.5vw,80px) * .86 + 28px);width:220px;align-items:stretch}
.rail.f span,.rail.f:hover span{opacity:0;transition:opacity .3s}
.rail.f a.on span,.rail.f a:hover span{opacity:1}
.rail.f a{padding-left:0;background:none!important}
.rail.f a.on{height:32px}
.card.stage .lbl{position:static;width:auto;height:auto;clip:auto;overflow:visible;max-width:720px;margin:0 auto clamp(14px,1.8vw,24px)}
.card.stage .lbl .cap{display:none}
.card.stage .lbl h2{font-size:clamp(30px,3.2vw,46px);margin-top:0}
.card.stage .lbl::before{display:none}


/* the titles of the parts have the size of the skills on the main page */
.card.stage .lbl h2{font-size:clamp(28px,min(5.4vw,6.1svh),96px);line-height:.9;letter-spacing:-.035em;font-weight:400}
.card.stage .lbl{margin-bottom:clamp(18px,2.4vw,34px)}


/* the foot of the page: the same row as at the end of the main page */
.cfoot{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:end;padding:clamp(28px,4vw,56px) var(--pad) clamp(18px,2.4vw,28px);margin-bottom:0}
.cfoot>:nth-child(1){grid-column:1/4}.cfoot>:nth-child(2){grid-column:4/7}.cfoot>:nth-child(3){grid-column:7/10}.cfoot>:nth-child(4){grid-column:10/13;text-align:right}
.cfoot span,.cfoot a.cfa{color:var(--ink);text-transform:uppercase;font-size:12px;line-height:1.25;letter-spacing:.02em}
.cfl{display:flex;gap:6px;flex-wrap:wrap}
.cfl a{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px 0 13px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);font:500 12px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s}
.cfl a:hover{background:var(--ink);color:#000}
.cfa{text-decoration:none}
.cfa i{font-style:normal;display:inline-block;margin-left:6px}
@media(max-width:900px){.cfoot{grid-template-columns:1fr 1fr}.cfoot>*{grid-column:auto!important;text-align:left!important}.cfl{grid-column:1/-1!important}}


/* the end of the page is one block: the next case above, the foot of the page under it */
.card.endc{padding:0}
.endc .next{display:block;padding:clamp(60px,10vw,150px) var(--pad) clamp(30px,5vw,70px);background:none;box-shadow:none;border-radius:0;margin:0}
.endc .cfoot{background:none;box-shadow:none;border-radius:0;margin:0;overflow:visible;padding-top:clamp(10px,1.6vw,20px)}


/* the contents in the language of the site: a vertical glass pill, the sister of the menu; the part you are in lies on a light plate */
.rail.f{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:auto;padding:4px;border-radius:22px;background:rgba(30,30,30,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(241,240,236,.22),0 10px 34px rgba(0,0,0,.5);clip-path:none!important;left:15px;top:calc(8px + clamp(34px,4.5vw,80px) * .86 + 18px);z-index:56}
.rail.f a,.rail.f a.on{height:auto;padding:8px 16px;border-radius:999px;gap:0;background:none;transition:background .3s,color .3s}
.rail.f i{display:none!important}
.rail.f span,.rail.f:hover span,.rail.f a.on span{opacity:1;font:500 11px/1 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:rgba(241,240,236,.62);transform:none}
.rail.f a.on{background:rgba(241,240,236,.18)!important}
.rail.f a.on span,.rail.f a:hover span{color:var(--ink)}
.rail.f a:hover{background:rgba(241,240,236,.1)!important}


/* the corners agree: the capsule's radius is the plate's radius plus the padding between them */
.rail.f{border-radius:17px;padding:4px}
.rail.f a,.rail.f a.on{border-radius:13px;padding:8px 14px}


/* the blocks are not as wide as the window: they hug the column of the text; the sides are left to the name of the case and the contents */
.card,.card.hero,.card.stage,.card.endc{max-width:min(960px,calc(100% - 41vw));margin-left:auto;margin-right:auto}
@media(max-width:1000px){.card,.card.hero,.card.stage,.card.endc{max-width:none}}

.cwrow.e .cw.l,.cwrow.e .cw.r{display:block;padding-right:0}
.cwrow.e .cw.r::after{display:none}
.cwrow.e .cw.r{pointer-events:none;cursor:default}
.cwrow.e{margin:0 9px;margin-bottom:0}
.endc .next{padding-top:clamp(20px,4vw,60px)}
.endc .next .cap{display:none}


.rail.f:hover a.on span,.rail.f a.on:hover span{font:500 11px/1 var(--sans);letter-spacing:.03em}

/* the first block starts under the menu pill, not behind it */
.card.hero{margin-top:56px}

/* the blocks are the same glass as the cards of the main page */
.card{background:rgba(10,10,10,.5);-webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3)}

/* the corner words are not shown any more: their row must not keep the room either */
.cwrow:not(.e){display:none}
.card.stage,.card.hero{padding-top:clamp(36px,5vw,72px)}

.card.hero{margin-top:calc(2px + clamp(34px,4.5vw,80px)*.86 + 18px)}   /* the first block starts at the level of the top of the contents */

/* at the right: the other cases, quiet; the one you are in is dimmed and not clickable */
@media(min-width:1001px){
.rail.r{display:flex!important;flex-direction:column;position:fixed;left:auto;right:15px;top:calc(8px + clamp(34px,4.5vw,80px)*.86 + 18px);transform:none;z-index:56;opacity:1;pointer-events:auto;padding:4px;border-radius:17px;background:rgba(30,30,30,.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(241,240,236,.1);clip-path:none}
.rail.r a{display:flex;flex-direction:row;height:auto;padding:8px 14px;border-radius:13px;gap:0;background:none;transition:background .3s}
.rail.r i{display:none!important}
.rail.r span,.rail.r:hover span,.rail.r a.on span{opacity:1;transform:none;text-align:left;font:500 11px/1 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:rgba(241,240,236,.5);white-space:nowrap;transition:color .3s}
.rail.r a:hover{background:rgba(241,240,236,.1)}
.rail.r a:hover span{color:var(--ink)}
.rail.r a.on{pointer-events:none;background:none}
.rail.r a.on span,.rail.r a.on:hover span{color:rgba(241,240,236,.26)}
}

/* the next case peeks in from the right edge */
.rail.r{display:none!important}
.peek{display:none}
@media(min-width:1001px){
.peek{display:block;position:fixed;z-index:20;left:calc(50% + min(960px,59vw)/2 + 14px);top:calc(2px + clamp(34px,4.5vw,80px)*.86 + 18px);width:min(960px,59vw);height:calc(100vh - 140px);border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(241,240,236,.14);background:rgba(10,10,10,.5);overflow:hidden;padding:clamp(24px,3vw,48px);opacity:.38;transition:opacity .4s,transform .5s var(--ease);color:var(--ink);text-decoration:none}
.peek:hover{opacity:.7;transform:translateX(-14px)}
.peek h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,64px);line-height:.95;letter-spacing:-.035em;margin:0 0 28px;max-width:16em}
.peek h2 em{font-style:italic}
.peek img{width:78%;display:block;border-radius:12px}
}

/* the next case at the right edge disturbed: off (the code stays, see _backup) */
.peek{display:none!important}

/* the last block, with the next case and the footer, is the whole width of the window */
.card.endc{max-width:none;margin-left:0;margin-right:0}

/* the fill of the blocks: the dark of the cards of the main page (glass over its dark ground), a step lighter than the black of the page */
.card{background:var(--card)}

.hyp header .n{font-size:clamp(20px,1.9vw,30px);line-height:1;color:var(--mute)}   /* the number is quieter than the name */

/* every hypothesis is a plate of its own, as the facts at the top */
.hyp,.hyp:first-child{padding:clamp(18px,2.2vw,30px);border-radius:var(--r);background:rgba(241,240,236,.05);margin-bottom:12px}
.hyp img,.hyp figure,.hyp .shot{border-radius:12px;overflow:hidden}

.hyp header{align-items:center}
.hyp header .n{font:500 12px/1 var(--sans);width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;color:var(--mute);flex:none}

.cfl{flex-wrap:nowrap}.cfl a{white-space:nowrap;flex:none}

@media(min-width:901px){.cfoot>.cfl{grid-column:7/13}}

/* the glow behind the glass blocks, as on the main page */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60vw 50vh at 85% 15%,rgba(241,240,236,.09),transparent 70%),radial-gradient(50vw 50vh at 10% 90%,rgba(241,240,236,.07),transparent 70%)}
.card{-webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3)}
/* the facts at the right */
.facts{display:none}
@media(min-width:1001px){
.facts{display:grid;gap:18px;position:fixed;right:15px;top:calc(2px + clamp(34px,4.5vw,80px)*.86 + 18px);width:calc((100vw - min(960px,59vw))/2 - 36px);max-width:260px;z-index:20;pointer-events:none}
.facts div{display:grid;gap:5px}
.facts span{font:500 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:rgba(241,240,236,.4)}
.facts b{font:400 14px/1.35 var(--sans);color:rgba(241,240,236,.72)}
.facts .big{font-family:var(--serif);font-size:clamp(24px,2.2vw,36px);line-height:1;color:rgba(241,240,236,.8);margin-bottom:6px}
.facts .big{display:block}
.facts .big span,.facts .big em,.facts .big small{display:block;font:400 13px/1.35 var(--sans);letter-spacing:0;text-transform:none;font-style:normal;color:rgba(241,240,236,.5);margin-top:6px}
}

.facts{display:none!important}   /* the facts at the right repeated the top: off */

/* the screens go one under another, always: 2, 3 or 4 of them, each is seen in full */
.fgrid,.fgrid.two,.fgrid.three{grid-template-columns:1fr!important}

/* the name of the case: big, in the centre, as the name on the main page; the blocks go up over it */
@media(min-width:1001px){
.cwfix{left:0;right:0;top:132px;text-align:center;font-size:clamp(52px,8.6vw,136px);mix-blend-mode:normal;color:var(--ink);z-index:1;font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:.95}
.cwfix em{font-style:italic}
.card{z-index:2}
.card.hero{margin-top:calc(116px + clamp(52px,8.6vw,136px)*.95 + 100px)}
}

.hero .meta{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* the contents are glued to the column of the blocks, at its left edge */
@media(min-width:1001px){.rail.f{left:auto;right:calc(50% + min(960px,59vw)/2 + 14px)}}

/* the contents are made of the same glass as the blocks */
.rail.f{background:var(--card);box-shadow:inset 0 0 0 1px var(--stroke);border:0;-webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3)}

.hero>.chipx{display:none}   /* the key figure repeated the headline: one voice less in the block */

/* the colour of the name is the colour of the name on the main page: the soft white with the slow sheen */
.cwfix{color:transparent;background:linear-gradient(115deg,rgba(241,240,236,.74) 0%,rgba(241,240,236,.88) 38%,#fff 48%,rgba(241,240,236,.88) 58%,rgba(241,240,236,.74) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0% 0}}
@media(prefers-reduced-motion:reduce){.cwfix{animation:none}}

.lead,.card.stage .lbl h2{color:transparent;background:linear-gradient(115deg,rgba(241,240,236,.74) 0%,rgba(241,240,236,.88) 38%,#fff 48%,rgba(241,240,236,.88) 58%,rgba(241,240,236,.74) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:sheen 7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.lead,.card.stage .lbl h2{animation:none}}

/* the other cases at the sides of the name */
.cwnb{display:none}
@media(min-width:1001px){
.cwnb{display:block;position:fixed;z-index:1;white-space:nowrap;font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:.95;font-size:clamp(28px,4vw,64px);color:var(--ink);text-decoration:none;opacity:.38;transition:color .3s;padding-top:.5em}
.cwnb em{font-style:italic}
.cwnb:hover{color:#fff}
}

/* the numbers are the same everywhere: a small ring with the digit */
.nums li::before{content:counter(n);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);font:500 12px/1 var(--sans);letter-spacing:0;color:var(--mute);margin-bottom:12px}

/* the end of the page: the row of cases again, as type */
.cwrow.e{display:none!important}
.endrow{display:flex;align-items:center;justify-content:space-between;gap:var(--pad);padding:clamp(56px,9vw,130px) clamp(20px,3vw,48px) clamp(28px,4vw,56px)}
.ename{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:.95;font-size:clamp(40px,8vw,130px);text-align:center;color:var(--ink);opacity:.9}
.ename em,.elink em{font-style:italic}
.elink{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:.95;font-size:clamp(28px,4vw,64px);color:var(--ink);text-decoration:none;opacity:.38;transition:opacity .3s;white-space:nowrap}
.elink:hover{opacity:1}
@media(max-width:700px){.endrow{flex-wrap:wrap;justify-content:space-between}.ename{order:-1;width:100%}}

/* the end of the page: no block, no frame; the name comes down above the footer, the other cases at its sides */
.card.endc{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;max-width:none;min-height:clamp(300px,36svh,380px);display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;margin-bottom:0}
.endc .next,.endc .cwrow{display:none!important}
.endc .cfoot a{pointer-events:auto}

/* the gradient of the text stops at the line box: the tails of the letters (g, y, p) need room under the line */
.lead,.card.stage .lbl h2{padding-bottom:.2em;margin-bottom:-.2em}
.cwfix{padding-bottom:.2em}

/* the descriptor of the case goes under its name */
.cwsub{display:none}
@media(min-width:1001px){
.cwsub{display:block;position:fixed;left:50%;transform:translateX(-50%);width:min(760px,calc(100vw - 48px));text-wrap:balance;text-align:center;z-index:1;pointer-events:none;font:400 clamp(15px,1.3vw,22px)/1.3 var(--sans);letter-spacing:-.005em;color:var(--ink);margin:0}   /* the size and the line of the main page's line under the name */
.card.hero .lead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card.hero{margin-top:calc(132px + clamp(52px,8.6vw,136px)*.95 + 176px)}
}

@media(min-width:1001px){.card.hero,.card.hero.pt{padding-top:clamp(28px,3.4vw,52px)}}

.hero .intro{color:var(--ink)}   /* the text of the first block is of the same white as the text of the other blocks */

/* the screens are not held by the column: they go the whole width of the window, over the edges of the blocks; the contents pass under them */
.card figure img{background:none!important;border-radius:0}
.card figure{background:none!important}
@media(min-width:1001px){
:root{--bo:40px}
.card.hero,.card.stage{overflow:visible}
.card.hero>figure{position:relative;z-index:6;width:auto;max-width:none;margin-left:calc(-1 * (var(--pad) + var(--bo)));margin-right:calc(-1 * (var(--pad) + var(--bo)))}
.card .hyp>figure,.card .hyp .fgrid{position:relative;z-index:6;width:auto;max-width:none;margin-left:calc(-1 * (clamp(18px,2.2vw,30px) + var(--pad) + var(--bo)));margin-right:calc(-1 * (clamp(18px,2.2vw,30px) + var(--pad) + var(--bo)))}
.card .hyp .fgrid figure{width:auto;margin:0;position:static}
.rail.f{z-index:1}
}

/* in the narrow window the block is the whole width: there the screens at least come out of the plates of the hypotheses, to the edges of the block */
@media(max-width:1000px){
.hyp>figure,.hyp .fgrid{margin-left:calc(-1 * clamp(18px,2.2vw,30px) - var(--pad));margin-right:calc(-1 * clamp(18px,2.2vw,30px) - var(--pad))}
.hyp img{border-radius:0}
}

/* the steps of the case in the contents: a point at every part on a thin line that fills as you read, the percent of the whole at the top */
.rail.f{padding-left:4px}
.rail.f a{position:relative;padding-left:36px!important}
.rail.f a::before{content:"";position:absolute;left:15px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#0a0a0a;box-shadow:inset 0 0 0 1.5px rgba(241,240,236,.3);z-index:1;transition:background .3s,box-shadow .3s,transform .3s}
.rail.f a.done::before{background:rgba(241,240,236,.7);box-shadow:none}
.rail.f a.on::before{background:var(--ink);box-shadow:0 0 0 3px rgba(241,240,236,.22);transform:scale(1.15)}
.rail.f .rprog{display:block;position:absolute;left:17.5px;top:12px;bottom:12px;width:2px;border-radius:2px;background:rgba(241,240,236,.14);overflow:hidden;pointer-events:none}
.rail.f .rprog b{display:block;width:100%;height:0;background:var(--ink);border-radius:2px}
.rail.f .rpct{display:block;position:absolute;left:0;right:0;bottom:calc(100% + 8px);font:500 11px/1 var(--sans);letter-spacing:.06em;font-style:normal;color:rgba(241,240,236,.55);text-align:right;padding-right:6px;pointer-events:none}   /* the percent stands above the contents, not in it */

.rail.f a::before{display:none!important}
.rail.f a{padding-left:26px!important}
.rail.f .rprog{left:13px}   /* no points: the thin line of the progress stays alone */

/* the column of the contents: as long as the case, the contents stick in it */
.railw{display:none}
@media(min-width:1080px){
.railw{display:block;position:absolute;right:calc(50% + min(960px,59vw)/2 + 14px);width:200px;pointer-events:none;z-index:8}   /* the contents are above everything, over the screens too */
.railw .rail.f{position:sticky!important;left:auto!important;right:auto!important;margin-left:auto;pointer-events:auto;width:200px}
}

/* the middle window (a laptop in a half of the screen, a tablet): the blocks leave a free field at the sides, and the screens go out into it a little */
@media(min-width:701px) and (max-width:1000px){
:root{--bo:clamp(20px,4vw,40px)}
.card.hero,.card.stage{max-width:calc(100% - 20vw);margin-left:auto;margin-right:auto;overflow:visible}
.card.hero>figure{position:relative;z-index:6;width:auto;max-width:none;margin-left:calc(-1 * (var(--pad) + var(--bo)));margin-right:calc(-1 * (var(--pad) + var(--bo)))}
.hyp>figure,.hyp .fgrid{position:relative;z-index:6;max-width:none;margin-left:calc(-1 * (clamp(18px,2.2vw,30px) + var(--pad) + var(--bo)));margin-right:calc(-1 * (clamp(18px,2.2vw,30px) + var(--pad) + var(--bo)))}
.hyp .fgrid figure{width:auto;margin:0;position:static}
}

/* the pictures are trimmed to the device itself, so the device is as wide as its frame; the tall ones (phones) keep their proportion */
.card figure img{width:auto!important;max-width:100%;height:auto;max-height:min(96vh,1100px);display:block;margin-left:auto;margin-right:auto}

/* the screens are as wide as the block plus the measure at both sides, and stand in the middle of it */
@media(min-width:701px){
.card.hero>figure,.card .hyp>figure,.card .hyp .fgrid{position:relative;z-index:6;max-width:none;width:calc(var(--cw) + 2 * var(--bo));margin-left:calc(50% - (var(--cw) + 2 * var(--bo)) / 2);margin-right:0}
}

/* the plate of a hypothesis has room above and under the screen, so the screen lies in it by its height and comes out only at the sides */
.hyp,.hyp:first-child{padding-top:clamp(28px,3vw,44px);padding-bottom:clamp(36px,4vw,60px)}
.hyp>figure,.hyp .fgrid{margin-top:clamp(8px,1vw,16px)}

/* the screens do not come out: they lie inside the block, the whole width of it; the plates of the hypotheses are of the same width, the text in them keeps its column */
@media(min-width:701px){
.card.hero>figure{width:auto;margin-left:0;margin-right:0}
.hyp,.hyp:first-child{width:calc(var(--cw) - 2 * var(--pad));margin-left:calc(50% - (var(--cw) - 2 * var(--pad)) / 2);margin-right:0;max-width:none}
.card .hyp>figure,.card .hyp .fgrid{width:auto;margin-left:0;margin-right:0}
.hyp header,.hyp dl{width:min(720px,100%);margin-left:auto;margin-right:auto}
}

/* the cover screen is not in the block: it stands under it, as wide as the block */
.cover{position:relative;z-index:2;margin:8px auto 14px;padding:0;max-width:min(960px,calc(100% - 41vw))}
@media(min-width:701px) and (max-width:1000px){.cover{max-width:calc(100% - 20vw)}}
@media(max-width:700px){.cover{max-width:none}}
.cover img{display:block;margin:0 auto}

/* the numbers on the picture of the old tools are ours: a small ring with the digit, as the numbers everywhere in the case */
.fnumbed{position:relative}
.fnum{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;display:grid;place-items:center;background:rgba(10,10,10,.7);box-shadow:inset 0 0 0 1px var(--line);font:500 12px/1 var(--sans);color:var(--mute);pointer-events:none}

/* the space at the left and at the top of a block is the same: the text stands at the left edge of the block, and the column is as wide as it was */
.card.stage,.card.hero,.card.hero.pt{--pp:clamp(28px,3.6vw,52px);padding-top:var(--pp);padding-left:var(--pp);padding-right:var(--pp)}
.card.stage .body,.card.stage .lbl{max-width:720px;margin-left:0;margin-right:auto}
@media(max-width:700px){.card.stage,.card.hero,.card.hero.pt{--pp:clamp(18px,5vw,28px)}}

/* the plates of the hypotheses take the width of the block inside its padding (the column of the text is not their measure any more) */
.card.stage .body:has(.hyp){max-width:none}
.card.stage .body:has(.hyp)>p{max-width:720px}
@media(min-width:701px){.hyp,.hyp:first-child{width:auto;margin-left:0;margin-right:0}}

/* optical alignment: the round numbers stand a little over the left line, so that the curve does not look cut in from it */
.hyp header .n,.nums li::before{margin-left:-2px}
.hyp header .n{margin-right:2px}

/* more air between the pictures of a part (the legacy tools, the objects, the process, the wireframes ...) */
.card.stage .fgrid{gap:var(--sp)}
.card.stage .body>.rv+.rv{margin-top:var(--sp)}

/* one measure between the elements of a block: texts, plates, pictures, lists */
:root{--sp:clamp(20px,2.2vw,32px)}
.card.stage .body>*,.card.hero>.intro,.card.hero>.meta,.card.hero>figure{margin-top:0;margin-bottom:0}
.card.stage .body>*+*{margin-top:var(--sp)}
.card.hero>.intro~*{margin-top:var(--sp)}
.card.stage .lbl{margin-bottom:var(--sp)}
.card.stage .fgrid,.card.stage .hyp .fgrid{gap:var(--sp)}
.card.stage .body>.rv+.rv{margin-top:var(--sp)}

.nums{gap:var(--sp) var(--pad)}
.nums li{padding:0}

.card.stage .body{gap:0}   /* the block itself had its own gap on top of the measure: that was the doubled distance */

/* the numbered texts: the ring at the left, the text at the right of it */
.nums li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:clamp(14px,1.6vw,22px);align-items:start}
.nums li::before{margin-bottom:0;margin-top:-1px}

/* the plate of a hypothesis: the same space at the top and at the sides (the ring is a little taller than the line, so the top is a little less) */
.hyp,.hyp:first-child{--hp:clamp(24px,2.6vw,36px);padding:calc(var(--hp) - 5px) var(--hp) var(--hp)}

/* the line under the name at the end of the page */
.cwtop{display:none}
@media(min-width:1001px){.cwtop{display:block;position:fixed;left:50%;transform:translateX(-50%);z-index:2;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(241,240,236,.55);text-decoration:none;opacity:0;pointer-events:none;transition:color .3s}.cwtop:hover{color:var(--ink)}}

/* the line under the names of the neighbours: which is which */
.cwnb small{display:block;margin-top:10px;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:rgba(241,240,236,.7)}
.cwnb.pv{text-align:left}.cwnb.nx{text-align:right}

/* the address in the footer is as on the main page: the big serif type in an outline of a pill */
.cfl{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cfl .cmail{flex:0 0 100%;display:flex;align-items:center;justify-content:center;height:auto;padding:.1em .3em .2em;font:400 min(4.9vw,88px)/1 var(--serif);letter-spacing:-.03em;text-transform:none;white-space:nowrap;border:1px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;transition:background .25s,color .25s}
.cfl .cmail:hover{background:var(--ink);color:#0c0c0c}
@media(min-width:901px){.cfoot>.cfl{grid-column:7/13}}
@media(max-width:700px){.cfl .cmail{font-size:min(7.4vw,40px)}}

html.up-hov .cwtop{color:var(--ink)}
html.up-hov .cwfix{filter:brightness(1.4);transition:filter .3s}

/* the three buttons of the footer are as the buttons at the top of the main page: LinkedIn, the address with the sign of copying, CV */
.cfl{flex-wrap:nowrap;gap:8px}
.cfl .ccopy{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px 0 13px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:500 12px/1 var(--sans);letter-spacing:.02em;text-transform:none;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.cfl .ccopy:hover{background:var(--ink);color:#0c0c0c}
.cfl .ccopy .i-ok{display:none}.cfl .ccopy.done .i-copy{display:none}.cfl .ccopy.done .i-ok{display:block}
.cfl a{white-space:nowrap}
.cmail{display:none!important}

.cfl .ccopy,.cfl .ccopy .t{text-transform:none!important}

/* the neighbours light up when you point at them (the opacity is set by the script, so it must be overridden) */
@media(min-width:1001px){
.cwnb:hover{opacity:1!important;color:#fff}
.cwnb:hover small{color:#fff}
.cwnb,.cwnb small{transition:color .25s}
}

.hyp header .n,.nums li::before{margin-left:-4px}
.hyp header .n{margin-right:4px}

@media(min-width:901px){.cfoot>.cfl{justify-content:flex-end}}

/* the light boards (wireframes, UI kit) are of the same width as the column, whatever their height */
.card figure.light img{width:100%!important;max-height:none!important}

/* the pictures of every block are as wide as the screens of the interface: the whole width of the block; only the text keeps its column */
.card.stage .body{max-width:none}
.card.stage .body>p,.card.stage .body>ul,.card.stage .body>ol,.card.stage .nums{max-width:720px}
.card.stage .body>.rv>.fgrid,.card.stage .body>.rv>figure,.card.stage .body>figure{max-width:none;width:100%}

/* the screen of the interface in a thin black frame with a silver rim: the picture is a loop of video */
.lap{margin:4px auto;padding:clamp(4px,.55vw,7px);background:#050506;border-radius:clamp(14px,2vw,24px);box-shadow:0 0 0 2px #8e919b,0 0 0 3px #3b3e46,0 0 0 4px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.18);position:relative}
.lap-in{border-radius:clamp(8px,1.2vw,15px);overflow:hidden;background:#000;line-height:0}
.lap video{display:block;width:100%;height:auto;aspect-ratio:16/10;background:#e9edf4}
.card figure .lap{width:100%}

/* the blocks are denser over the name: the glass keeps the glow, but the text stands on a calm ground */
.card{background:rgba(8,8,8,.78)}

/* the silver rim of the frame is drawn outside the frame by 4px: the screen leaves that room at the sides, or the container would cut it */
.card figure .lap,.lap{width:calc(100% - 12px)!important;margin:6px auto!important}

/* the glass of every case: the blur stays, the fill is denser, so what stands behind (the name of the case) is only a soft glow and never a crisp text over the text of a block */
.card,.card.hero,.card.stage,.card.endc:not(.endc){background:rgba(10,10,10,.42);-webkit-backdrop-filter:blur(34px) saturate(1.3);backdrop-filter:blur(34px) saturate(1.3)}

/* the blocks cut the name of the case: the fill is almost solid, the glass (the blur) stays as a texture; the name is only seen in the gaps between the blocks */
.card,.card.hero,.card.stage{background:rgba(10,10,10,.42)!important;-webkit-backdrop-filter:blur(34px) saturate(1.3)!important;backdrop-filter:blur(34px) saturate(1.3)!important}

/* the phones: each one is its own */
.phs{position:relative;width:100%;margin:0 auto}
.phs .ph{position:absolute;top:0;bottom:0;opacity:0;transform:translateY(46px) scale(.97);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k) * .16s)}
.phs.on .ph{opacity:1;transform:none;animation:phfloat 6s ease-in-out calc(var(--k) * -1.7s - .9s) infinite alternate}
.phs .ph i{position:absolute;inset:0;background-repeat:no-repeat;filter:drop-shadow(0 22px 28px rgba(0,0,0,.45))}
@keyframes phfloat{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.phs .tap{position:absolute;left:50%;top:72%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.18);opacity:0;pointer-events:none}
.phs.on .tap{animation:phtap 5.2s ease-out calc(1.4s + var(--k) * 1.1s) infinite}
@keyframes phtap{0%{opacity:0;transform:scale(.4)}6%{opacity:1;transform:scale(1)}18%{opacity:.9;transform:scale(.8)}34%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}
.phs .ph:nth-child(2) .tap{top:58%}.phs .ph:nth-child(3) .tap{top:84%}
@media(prefers-reduced-motion:reduce){.phs .ph{opacity:1;transform:none;transition:none;animation:none!important}.phs .tap{display:none}}

.cwfix,html.tx-in .cwfix{z-index:0!important}

/* a phone in the case is a short loop of its application */
.phv{display:block;width:min(100%,calc(80vh * .489),333px);height:auto;aspect-ratio:440/900;margin:0 auto;background:transparent;clip-path:inset(1.1% 1.8% 1.1% 1.8% round 14.6% / 7.1%)}

/* the last block is not a glass: no fill, no blur, so that the name of the case and its neighbours stand on the page above the footer */
.card.endc,.card.endc.card{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}

/* narrow screens: the big name of the case is not a fixed thing over the text (the menu pill stands there), it is only at the very top */
@media(max-width:1000px){.cwfix{position:absolute!important;top:70px!important;left:0;right:0;text-align:center;font-size:clamp(40px,12vw,84px)!important;opacity:1!important;z-index:0}.cwsub,.cwnb,.cwtop{display:none!important}.card.hero{margin-top:calc(70px + clamp(40px,12vw,84px) + 30px)!important}}
/* the footer: the three buttons go to two lines when they do not fit */
@media(max-width:700px){.cfl{flex-wrap:wrap!important;justify-content:flex-start!important}.cfl a,.cfl .ccopy{flex:none}}

/* the same white on the neighbours and on the names of the hypotheses */
.cwnb,.hyp header h3{color:transparent;background:linear-gradient(115deg,rgba(241,240,236,.74) 0%,rgba(241,240,236,.88) 38%,#fff 48%,rgba(241,240,236,.88) 58%,rgba(241,240,236,.74) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:sheen 7s ease-in-out infinite}
.cwnb small{-webkit-text-fill-color:rgba(241,240,236,.7)}
@media(prefers-reduced-motion:reduce){.cwnb,.hyp header h3{animation:none}}


/* the outlines of the buttons are of the same white as the words: the soft white with the slow sheen */
.cfl a,.cfl .ccopy,.cfl .cmail{position:relative;border-color:transparent!important}
.cfl a::after,.cfl .ccopy::after,.cfl .cmail::after{content:""!important;display:block!important;position:absolute;width:auto!important;height:auto!important;transform:none!important;margin:0!important;right:-1px;bottom:-1px;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(115deg,rgba(241,240,236,.74) 0%,rgba(241,240,236,.88) 38%,#fff 48%,rgba(241,240,236,.88) 58%,rgba(241,240,236,.74) 100%);background-size:250% 100%;animation:sheen 7s ease-in-out infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
@media(prefers-reduced-motion:reduce){.cfl a::after,.cfl .ccopy::after,.cfl .cmail::after{animation:none}}

/* the arrival: first the main block comes up from below; the name comes out from under its upper edge and rises into its place, the line under it after the name; then the neighbours, the menu and the contents */
@media(prefers-reduced-motion:no-preference){
:root{--arr:cubic-bezier(.19,1,.22,1);--d0:.0s}
html.tx-in{--d0:.25s}
.card:not(.endc){animation:arrCard .85s var(--arr) backwards}
.card:nth-of-type(1){animation-delay:calc(var(--d0) + .03s)}
.card:nth-of-type(2){animation-delay:calc(var(--d0) + .3s)}
.card:nth-of-type(3){animation-delay:calc(var(--d0) + .38s)}
.card:nth-of-type(n+4){animation-delay:calc(var(--d0) + .45s)}
.card.hero>.intro,.card.hero>.meta,.card.hero>figure{animation:arrIn .65s var(--arr) backwards}
.card.hero>.intro{animation-delay:calc(var(--d0) + .2s)}.card.hero>.meta{animation-delay:calc(var(--d0) + .3s)}.card.hero>figure{animation-delay:calc(var(--d0) + .4s)}
.cwfix{animation:arrName .9s var(--arr) calc(var(--d0) + .08s) backwards}
.cwsub{animation:arrSub .9s var(--arr) calc(var(--d0) + .18s) backwards}
.hdr{animation:arrFade .65s ease calc(var(--d0) + .7s) backwards}
.cwnb{animation:arrFade .9s ease calc(var(--d0) + .8s) backwards}
.railw .rail.f{animation:arrSide .8s var(--arr) calc(var(--d0) + .85s) backwards}
@keyframes arrCard{from{opacity:0;transform:translateY(48px)}}
@keyframes arrIn{from{opacity:0;transform:translateY(24px)}}
@keyframes arrName{from{opacity:0;transform:translateY(56px)}}
@keyframes arrSub{from{opacity:0;transform:translate(-50%,28px)}}
@keyframes arrFade{from{opacity:0}}
@keyframes arrSide{from{opacity:0}}
}


/* the floating phones and their shadow must not be cut by the rounded plate */
.hyp figure:has(.phs),.card figure:has(.phs){overflow:visible!important}
.phs{padding-top:12px;box-sizing:content-box}
.phs .ph{top:12px}
/* the list stands close to the line that introduces it */
.body p:has(+ ul.dots){margin-bottom:6px!important}
.body p + ul.dots{margin-top:0!important;padding-top:0!important}
.body ul.dots{gap:6px!important;row-gap:6px!important}
.body ul.dots li{margin:0 0 6px!important}
/* no tap circle over the phones */
.phs .tap{display:none!important}
/* the caption of a phone stands in the middle under it */
.card figure:has(.phv,.phs) figcaption{text-align:center!important;margin-left:auto!important;margin-right:auto!important;width:100%}
/* three facts: the task on its own line, the other two under it */
.hero .meta:has(> div:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))!important}
.hero .meta:has(> div:nth-child(3)) > div:first-child{grid-column:1/-1}
/* the page never moves sideways, whatever arrives from outside the screen */
html{overflow-x:clip}
html.arr .card,html.arr .cwfix,html.arr .cwsub,html.arr .hdr,html.arr .cwnb,html.arr .card.hero>.intro,html.arr .card.hero>.meta,html.arr .card.hero>figure{will-change:transform,opacity}
.tw{overflow-x:auto}.tb2{width:100%;border-collapse:collapse;font-size:clamp(14px,1vw,16px);line-height:1.45}
.tb2 th{text-align:left;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:0 14px 12px 0;border-bottom:1px solid rgba(241,240,236,.18)}
.tb2 td{vertical-align:top;padding:14px 14px 14px 0;border-bottom:1px solid rgba(241,240,236,.1)}.tb2 td:first-child{color:#fff;font-weight:500;white-space:nowrap}
.hyp dt.cap{white-space:nowrap}
/* gradient text is painted only inside its own box: give it room so descenders and the end of a word are not cut */
.hyp header h3{padding:.06em .14em .2em .06em;margin:-.06em -.14em -.2em -.06em}
/* the next case */
.next{display:block;text-decoration:none;text-align:right;padding-block:clamp(40px,7vw,120px)}
.next .cap{color:var(--mute)}
.next b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(48px,11vw,190px);line-height:.88;letter-spacing:-.035em;margin-top:14px;transition:transform .6s var(--ease)}
.next:hover b{transform:translateX(-14px)}
.next b i{font-style:italic}
.foot{max-width:min(1200px,100%);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding:10px 6px 22px;color:var(--mute)}
.foot a{text-decoration:none}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.tx-in::after,html.tx-in .card{animation:none!important}.rv{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}

@media(max-width:900px){
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage{display:block}
  .stage>.lbl{position:static;margin-bottom:22px}
  .stage>.lbl h2{font-size:clamp(34px,10vw,52px)}
  .nums{grid-template-columns:1fr}
  .fgrid.three{grid-template-columns:1fr 1fr}
  .hyp dl>div{grid-template-columns:62px 1fr}
  .cw{font-size:clamp(34px,10.2vw,46px)}
  .card.pt{padding-top:calc(var(--pad) + 44px)}
  .back{top:6px;height:26px;padding:0 12px}
}
@media(max-width:560px){.fgrid.two,.fgrid.three{grid-template-columns:1fr}}

/* the arrival of every case: everything comes together, in one movement — the block, the name, the line under it, the contents of the hero, the menu, the neighbours and the side list start at the same moment, with the same easing */
@media(prefers-reduced-motion:no-preference){
.card:not(.endc),.card:nth-of-type(n),.card.hero>.intro,.card.hero>.meta,.card.hero>figure,.cwfix,.cwsub,.hdr,.cwnb,.railw .rail.f{animation-delay:var(--d0)!important;animation-duration:.9s!important;animation-timing-function:var(--arr)!important}
}

/* the outcomes: the figures above, then four short takeaways in plates */
.ocs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.oc{border-radius:calc(var(--r) * .8);box-shadow:inset 0 0 0 1px var(--stroke);padding:clamp(16px,1.8vw,26px);display:flex;flex-direction:column;gap:10px}
.oc .oi{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#0a0a0a;display:grid;place-items:center;margin-bottom:8px}
.oc h3{font-family:var(--sans);font-weight:500;font-size:clamp(16px,1.3vw,20px);line-height:1.2;letter-spacing:-.01em}
.oc p{color:var(--mute);font-size:clamp(14px,1vw,16px);line-height:1.45}
@media(max-width:900px){.ocs{grid-template-columns:1fr}}

/* the key figure under the name and its descriptor: a pill, as on the pages of the other portfolios */
.cwchip{display:none}
@media(min-width:1001px){
.cwchip{display:flex;position:fixed;left:50%;transform:translateX(-50%);z-index:1;pointer-events:none;align-items:center;gap:12px;height:40px;padding:0 18px 0 5px;border-radius:999px;background:rgba(241,240,236,.1);margin:0;white-space:nowrap;font:500 clamp(13px,1vw,16px)/1 var(--sans);color:var(--ink);animation:arrSub .9s var(--arr) var(--d0) backwards}
.cwchip b{height:30px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:linear-gradient(115deg,rgba(241,240,236,.74) 0%,rgba(241,240,236,.88) 38%,#fff 48%,rgba(241,240,236,.88) 58%,rgba(241,240,236,.74) 100%);background-size:250% 100%;animation:sheen 7s ease-in-out infinite;color:#0a0a0a;font-weight:600;font-size:clamp(13px,1vw,16px)}
.cwchip span{color:var(--ink)}
.cwchip span::before{content:none}
.card.hero{margin-top:calc(132px + clamp(52px,8.6vw,136px)*.95 + 176px + 44px)}
}

/* the first thing under the title of a block always stands the same distance from it */
.card.stage .body>.bento:first-child{margin-top:0}
.card.stage .body>ol.nums:first-child{margin-top:-8px}

/* the neighbouring cases: the gradient is painted inside the box only, and the italic leans past it, so the box gets room and the margin takes it back */
.cwnb{padding:.5em .16em .12em;margin-inline:-.16em}
.cwnb:focus{outline:none}

/* the phones of one picture float together, in one phase: out of phase one stood higher than the other, and it looked like a misalignment */
.phs.on .ph{animation-delay:-.9s}

/* the phones come up once and then stand still: no floating up and down */
.phs.on .ph{animation:none!important}

/* the figure and its caption stand close to each other: the plate takes the height of its content, not a fixed one */
.bt{min-height:0;justify-content:flex-start;gap:clamp(18px,2vw,28px)}

/* the text of every block of every case runs the whole width of its block: no narrow column inside a wide card */
.card.stage .body,.card.stage .body:has(.hyp),.card.stage .lbl{max-width:none!important;margin-left:0;margin-right:0}
.stage .body>p,.stage .body>ul.dots,.stage .body>ol.nums,.stage .body>.cxbtn,.stage .body>.hyp>header,.stage .body>.hyp>dl,.stage .body:has(.hyp)>p,.stage p,.stage .nums li,.stage ul.dots li,.hyp dd{max-width:none!important;width:auto;margin-inline:0}
.stage .nums{grid-template-columns:1fr}
.hero .intro{max-width:none}

/* the rim of the screen is back at half strength: the same three rings and the light edge, half as bright */
.lap{box-shadow:0 0 0 1px rgba(142,145,155,.5),0 0 0 2px rgba(59,62,70,.5),0 0 0 3px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.09)!important}

/* the number sits in the middle of the first line of the title, in every case, also when the title wraps */
.hyp header{--hfs:clamp(26px,2.6vw,44px);align-items:flex-start}
.hyp header h3{font-size:var(--hfs)!important;line-height:1!important}
.hyp header .n{margin-top:calc((var(--hfs) - 28px) / 2)}

/* more air between a screen and its caption, and between the text of a decision and its screen */
figcaption,.hl-row figcaption{margin-top:clamp(16px,1.6vw,24px)!important}
.hyp{gap:clamp(24px,2.4vw,36px)!important}

/* small screens and tablets: the small caps labels stay legible, the long words never push the page sideways */
@media(max-width:900px){
 .cap,.hyp dt,.meta dt,.hero .meta dt{font-size:11.5px}
 .hyp dd,.stage p,.stage li{overflow-wrap:anywhere}
 .back,.cxbtn,.vsw button{min-height:40px}
}
@media(max-width:560px){
 .card.stage{padding-inline:clamp(14px,4.5vw,22px)}
 .bt b{font-size:clamp(40px,13vw,56px)}
}

/* on phones the label (Need, Decision, Requirement, My proposal…) stands over its text instead of beside it: long labels used to run into the text */
@media(max-width:480px){
  .hyp dl>div{grid-template-columns:1fr;gap:3px}
  .hyp dl{gap:16px}
}