/* A row of case studies, as wonderful.ai shows them: a plain sentence over the row, square cards that bleed off the right edge,
   a picture each and its title in a few plain words, arrows to page through. On a pointer, hovering a card dims it and opens a
   small film of what we built there, which follows the pointer inside the card (rejouice.com's featured works: the film opens
   from its middle, clip-path inset 40% to 0 in 1.2 s on cubic-bezier(.19,1,.22,1), and drifts after the pointer, damped).
   A click opens the case's own page. Needs ../base/base.css; driven by case-rail.js. */

/* a whole screen of plain white, the row in its middle (Tommi, 2026-10-04: "white solid background that takes all the vertical space, its cleaner") */
.cr{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--barra-h) + 32px) 48px;overflow:hidden}
/* in a track it is a white container with very big round corners on the night, a little smaller than the screen; as the scroll
   brings it up it springs to fill the screen, stays pinned over the track growing a little more, then the page carries it away
   (Tommi, 2026-10-05: "a container with very big rounded angles. As you scroll it fills the screen... the same effect that Amazing
   Companies or the first section with the title has... the carousels themselves just get a little bit bigger and then you can
   keep scrolling"). scroll-open.js writes --g (0 to 1, the spring) and --z (the growth over the pinned stretch); without it (reduced
   motion) it is simply the full screen */
.cr-track{position:relative;height:175vh;height:175svh;overflow:clip}   /* clip, not hidden: the sticky row inside still pins to the screen; and grown 5% it would hang 22px over the next divider as a white band (Tommi, 2026-10-05) */
.cr-track>.cr{--g:1;--z:0;--r0:88px;--r1:36px;position:sticky;top:0;height:100vh;height:100svh;min-height:0;
  transform:scale(calc((.84 + .16 * var(--g)) * (1 + var(--z))));border-radius:calc(var(--r1) + (var(--r0) - var(--r1)) * (1 - var(--g)))}
.cr-track+.cr-track{margin-top:0}
@media (max-width:899px){.cr-track>.cr{--r0:40px;--r1:20px}}
.cr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(32px,4vw,64px)}
.cr-t{font-family:var(--serif);font-weight:300;font-size:var(--t-h2);line-height:1.04;letter-spacing:var(--track);max-width:20ch;text-wrap:balance}
.cr-nav{display:flex;gap:10px;flex:none}
.cr-nav button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:oklch(0% 0 0/.05);color:var(--ink);transition:background-color .2s var(--e-ui),opacity .2s var(--e-ui),transform .2s cubic-bezier(.22,1,.36,1)}
.cr-nav button:hover{background:oklch(0% 0 0/.1)}
.cr-nav button:active{transform:scale(.95)}
.cr-nav button:disabled{opacity:.35;cursor:default}
.cr-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the row starts on the page's left edge and runs off the right one */
.cr-rail{--edge:max(var(--gutter),(100% - var(--largo)) / 2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);scrollbar-width:none;overscroll-behavior-x:contain}
.cr-rail::-webkit-scrollbar{display:none}
.cr-list{list-style:none;padding-left:0;display:flex;gap:clamp(12px,1.2vw,18px);padding-inline:var(--edge);width:max-content}
.cr-item{flex:none;width:clamp(272px,min(33vw,50svh),560px);scroll-snap-align:start}   /* square cards, sized so the head, the row and the note fit one screen */

.cr-card{position:relative;display:block;aspect-ratio:1;border-radius:calc(14 * var(--px));overflow:hidden;isolation:isolate;color:oklch(100% 0 0);background:oklch(20% 0 0);-webkit-tap-highlight-color:transparent}
.cr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
/* a light shade at the top so the title reads on any picture */
.cr-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,oklch(0% 0 0/.42),oklch(0% 0 0/0) 42%);pointer-events:none}
/* rejouice's dimming, on hover */
.cr-card::after{content:"";position:absolute;inset:0;z-index:2;background:oklch(0% 0 0/.48);opacity:0;transition:opacity .3s var(--e-ui);pointer-events:none}
.cr-title{position:absolute;z-index:3;left:calc(34 * var(--px));top:calc(30 * var(--px));right:calc(80 * var(--px));font-family:var(--serif);font-weight:300;font-size:calc(34 * var(--px));line-height:1.14;letter-spacing:var(--track);text-wrap:balance}
.cr-arrow{position:absolute;z-index:3;right:calc(30 * var(--px));top:calc(34 * var(--px));width:calc(24 * var(--px));height:calc(24 * var(--px));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cr-kind{position:absolute;z-index:3;left:calc(34 * var(--px));bottom:calc(28 * var(--px));font-size:calc(14 * var(--px));font-weight:500;letter-spacing:.01em;color:oklch(100% 0 0/.85);transition:opacity .3s var(--e-ui)}
.cr-card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* the film that opens on hover: its box, the video a little larger than the box so it can drift; no label over it (Tommi, 2026-10-05:
   "on hover over the carousel remove the text (case study ...)") */
.cr-pv{position:absolute;z-index:4;left:50%;top:50%;width:64%;pointer-events:none;will-change:transform}
.cr-vid{display:block;aspect-ratio:var(--ar,1200/515);border-radius:calc(8 * var(--px));overflow:hidden;background:oklch(8% 0 0);clip-path:inset(40%);opacity:0;
  transition:opacity .3s var(--e-ui),clip-path 1.2s cubic-bezier(.19,1,.22,1);box-shadow:0 20px 50px -20px oklch(0% 0 0/.7)}
.cr-vid video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.1);will-change:transform}
@media (hover:hover){
  .cr-card.pv-on::after{opacity:1}
  .cr-card.pv-on .cr-vid{clip-path:inset(0);opacity:1}
  .cr-card.pv-on .cr-kind{opacity:0}
  .cr-card.pv-on .cr-img{transform:scale(1.04)}
  .cr-card.pv-on .cr-arrow{transform:translate(3px,-3px)}
}

@media (max-width:899px){
  .cr-head{align-items:flex-start;flex-direction:column}
  .cr-nav{display:none}
  .cr-item{width:min(82vw,420px)}
  .cr-title{font-size:24px;left:22px;top:20px;right:56px}
  .cr-arrow{width:20px;height:20px;right:20px;top:22px}
  .cr-kind{font-size:13px;left:22px;bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .cr-img,.cr-vid,.cr-arrow{transition:none}
}

/* ---------- a case's own page: the head (a plain sentence, the picture), then the chapter ---------- */
.wk-head{padding-block:calc(var(--barra-h) + clamp(56px,8vw,120px)) clamp(48px,6vw,96px)}
.wk-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:calc(15 * var(--px));font-weight:500;color:var(--ink-2);margin-bottom:clamp(24px,3vw,40px)}
.wk-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wk-eye{font-size:calc(13 * var(--px));font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.wk-t{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5.4vw,84px);line-height:1.02;letter-spacing:var(--track);max-width:18ch;text-wrap:balance}
.wk-lede{margin-top:clamp(18px,2vw,28px);font-size:var(--t-lead);line-height:1.4;color:var(--ink-2);max-width:40ch;text-wrap:pretty}
.wk-pic{margin:clamp(36px,5vw,72px) 0 0;border-radius:calc(14 * var(--px));overflow:hidden;aspect-ratio:21/9;background:oklch(90% 0 0)}
.wk-pic img{width:100%;height:100%;object-fit:cover}
.wk-film{margin:clamp(36px,5vw,72px) 0 0;border-radius:calc(14 * var(--px));overflow:hidden;background:oklch(8% 0 0);aspect-ratio:1200/515}
.wk-film video{width:100%;height:100%;object-fit:cover}
.wk-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(40px,5vw,80px)}
.wk-facts p{font-size:var(--t-corpo);line-height:1.45;color:var(--ink-2)}
.wk-facts b{display:block;font-family:var(--serif);font-weight:300;font-size:calc(40 * var(--px));line-height:1.05;letter-spacing:var(--track);color:var(--ink);margin-bottom:10px}
.wk-next{padding-block:clamp(64px,8vw,120px)}
.wk-next a{display:block;font-family:var(--serif);font-weight:300;font-size:var(--t-h2);line-height:1.05;letter-spacing:var(--track)}
.wk-next small{display:block;font-family:var(--font);font-size:calc(13 * var(--px));font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
@media (max-width:899px){.wk-facts{grid-template-columns:1fr}.wk-pic{aspect-ratio:4/3}.wk-facts b{font-size:32px}}
/* iOS draws its own play button over a video it may not start by itself (Low Power Mode): the poster is enough */
.wk-film video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}