/* A case study has two layers of the same project.
   Finished: what shipped, told as the product's own story. Text scrolls on the left, one image stays put on the right.
   Workings: the thinking behind it, as a light board with sticky notes and Dan's cursor reading along.
   Three ways across: the switch in the header, "Show the workings" under each chapter, and the x-ray lens over the images. */

:root[data-mode="wrk"]{ --bg:var(--w-canvas); --fg:var(--w-ink); color-scheme:light }
body{transition:background .5s}

/* ===== the switch ===== */
.sw{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;align-items:center;gap:6px}
.seg{position:relative;display:flex;padding:4px;border-radius:999px;border:1px solid var(--f-line);background:rgba(var(--f-veil),.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:var(--uifont);font-size:14px;transition:background .5s,border-color .5s}
.seg .knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--f-text);transition:transform .45s var(--ease),background .5s}
.seg button{position:relative;z-index:1;border:0;background:transparent;min-height:34px;padding:0 18px;border-radius:999px;cursor:pointer;color:var(--f-muted);transition:color .3s;min-width:104px}
.seg button[aria-pressed="true"]{color:var(--f-bg)}
:root[data-mode="wrk"] .seg{background:rgba(255,255,255,.85);border-color:var(--w-line);box-shadow:0 6px 20px -12px rgba(0,0,0,.3)}
:root[data-mode="wrk"] .seg .knob{transform:translateX(100%);background:var(--w-ink)}
:root[data-mode="wrk"] .seg button{color:var(--w-muted)}
:root[data-mode="wrk"] .seg button[aria-pressed="true"]{color:#fff}

/* ===== the two layers, and moving between them ===== */
.mode{min-height:100vh}
.mode[hidden]{display:none}
.mode.out{animation:out .32s var(--ease) forwards}
.mode.in{animation:in .55s var(--ease) both}
@keyframes in{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
.arrive>*{animation:arrive .6s var(--ease) both}
.arrive>*:nth-child(2){animation-delay:.06s}.arrive>*:nth-child(3){animation-delay:.12s}.arrive>*:nth-child(4){animation-delay:.18s}.arrive>*:nth-child(5){animation-delay:.24s}
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mode.frozen{position:fixed;left:0;right:0;z-index:65;pointer-events:none;will-change:clip-path,opacity}
.iris{position:fixed;inset:0;overflow:hidden;z-index:66;pointer-events:none}
.iris[hidden]{display:none}
.mode.inside{position:absolute;left:0;right:0}
.mode.frozen.fx-wipe{animation:wipe .7s cubic-bezier(.7,0,.25,1) forwards}
@keyframes wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
.mode.frozen.fx-wipel{animation:wipel .7s cubic-bezier(.7,0,.25,1) forwards}
@keyframes wipel{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}

/* ===== Finished ===== */
#fin{--card:clamp(14px,2.5vw,32px);background:var(--f-bg);color:var(--f-text);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
#fin .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30}
#fin .top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
#fin .nav{display:flex;align-items:center;gap:14px;min-width:0}
#fin .bars{display:flex;gap:5px;width:min(320px,34vw)}
#fin .bars button{all:unset;cursor:pointer;flex:1;height:24px;display:flex;align-items:center}
#fin .bars button:focus-visible{outline:2px solid var(--f-accent);outline-offset:2px}
#fin .bars button i{display:block;width:100%;height:2px;background:var(--f-line);position:relative;overflow:hidden}
#fin .bars button i b{position:absolute;inset:0;background:var(--f-text);transform-origin:0 50%;transform:scaleX(0);transition:transform .4s var(--ease)}
#fin .reel{padding-block:clamp(24px,3vw,48px) 0}
#fin .stage{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:var(--c);display:flex;align-items:flex-end;padding:var(--spad)}
#fin .stage .img{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.04);animation:drift 14s linear infinite alternate}
@keyframes drift{to{transform:scale(1) translateX(-1%)}}
#fin .stage .shade{position:absolute;inset:auto 0 0 0;height:65%;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.25) 55%,transparent)}
/* the title sits on the hero, bottom left */
#fin .now{position:relative;min-width:0;color:#fff}
#fin .now h1{font-weight:300;font-size:var(--ttl);line-height:.95;letter-spacing:-0.035em}
#fin .now p{color:rgba(255,255,255,.85);margin-top:12px}
@media (max-width:720px){ #fin .stage{aspect-ratio:4/5} }
#fin .lede{padding-block:clamp(72px,9vw,130px) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
#fin .lede p{grid-column:4 / span 8;font-weight:300;font-size:clamp(26px,2.8vw,42px);line-height:1.2;letter-spacing:-0.015em}
#fin .lede .dim{color:var(--f-muted)}
#fin .p-top{grid-column:1 / -1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;color:var(--f-muted);border-bottom:1px solid var(--f-line);padding-bottom:14px}
#fin .p-txt{grid-column:1 / span 5;align-self:end;display:flex;flex-direction:column;gap:16px;min-width:0}
#fin .p-txt h2{font-weight:300;font-size:clamp(36px,4.4vw,70px);letter-spacing:-0.035em;line-height:.98;text-wrap:balance}
#fin .p-txt p{color:var(--f-muted);max-width:52ch}
#fin .p-txt p.lead{color:var(--f-text);font-size:19px}
#fin .p-pic{grid-column:7 / span 6;min-height:0;position:relative;display:flex;align-items:flex-end;padding:18px;background:var(--pic);overflow:hidden}
#fin .p-pic .img{position:absolute;inset:0;background:center/cover no-repeat}
#fin .p-pic span{position:relative;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.75)}
#fin .nums{grid-column:1 / -1;align-self:center;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
#fin .nums div b{display:block;font-weight:300;font-size:clamp(44px,6vw,104px);letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}
#fin .nums div span{display:block;color:var(--f-muted);margin-top:10px;max-width:22ch}
#fin .mini{display:flex;flex-direction:column;gap:12px;font-size:16px;position:relative;width:min(100%,380px);background:rgba(0,0,0,.35);padding:18px;border:1px solid rgba(255,255,255,.14)}
#fin .mini .r{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:8px}
#fin .mini .t{font-family:var(--mono);font-size:11px;padding:2px 8px;border:1px solid currentColor}
#fin .tail{position:relative;background:var(--f-raise);padding-block:clamp(22px,3vw,34px) 0;border-top:1px solid var(--f-line)}
#fin .tail a.nxrow{text-decoration:none;color:inherit}
#fin .tail .foot{margin-top:24px;border-top:1px solid var(--f-line)}
#fin .tail .nxrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
#fin .tail .nxrow>div{grid-column:1 / span 9}
#fin .tail .cta{grid-column:10 / span 3;justify-self:end;display:inline-flex;align-items:center;font-size:15px;color:var(--f-text);border:1px solid var(--f-line);border-radius:999px;min-height:40px;padding:0 18px;white-space:nowrap}
@media (max-width:900px){ #fin .tail .nxrow>div,#fin .tail .cta{grid-column:1 / -1;justify-self:start} }
#fin .tail .k{font-size:14px;color:var(--f-muted)}
#fin .tail .nx{display:block;margin-top:6px;margin-left:-0.045em;font-weight:300;font-size:clamp(32px,4.2vw,60px);letter-spacing:-0.035em;line-height:1;color:var(--f-muted)}
#fin .tail .nx b{font-weight:300;color:var(--f-text)}
@media (max-width:900px){
  #fin .lede p{grid-column:1 / -1}
  #fin .p-txt,#fin .p-pic{grid-column:1 / -1}
  #fin .p-pic{order:-1;grid-row:2}#fin .p-txt{grid-row:3}
  #fin .nums{grid-template-columns:1fr 1fr}
}

/* chapters: text scrolls on the left, one image stays put on the right and swaps */
#fin .pinwrap{position:relative;margin-top:clamp(72px,9vw,130px)}
#fin .pinwrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;max-width:1400px;margin-inline:auto;padding-inline:var(--gutter);align-items:start}
#fin .pintxt{grid-column:1 / span 5;min-width:0}
#fin .pch{min-height:80vh;display:flex;flex-direction:column;justify-content:center;gap:20px;padding-block:10vh}
#fin .pch .p-top{border-bottom:0;padding-bottom:0}
#fin .pch .p-txt{align-self:auto}
#fin .pch .nums{grid-template-columns:1fr 1fr;gap:28px 24px}
#fin .pch .nums div b{font-size:clamp(36px,4vw,64px)}
#fin .pmob{display:none}
#fin .pinfig{grid-column:7 / span 6;position:sticky;top:calc(74px + var(--card));height:calc(100vh - 74px - var(--card) * 2)}
#fin .figs{position:relative;height:100%}
#fin .fig{position:absolute;inset:0;opacity:0;transform:scale(.98);transition:opacity .6s var(--ease),transform .9s var(--ease)}
#fin .fig.on{opacity:1;transform:none}
#fin .fig .p-pic{height:100%;border-radius:20px}
#fin .tail{margin-top:clamp(96px,12vw,180px)}
@media (max-width:900px){ #fin .pintxt{grid-column:1 / -1} #fin .pinfig{display:none} #fin .pmob{display:block} #fin .pmob .p-pic{aspect-ratio:4/3} #fin .pmob .p-pic.is-img{aspect-ratio:auto;padding:20px;border-radius:14px} #fin .pmob .p-pic.is-img img{max-height:72vh} }

/* "Show the workings" under each chapter */
#fin .inlbtn{align-self:flex-start;background:transparent;border:1px solid var(--f-line);color:var(--f-text);font-family:var(--mono);font-size:12px;padding:10px 14px;cursor:pointer;margin-top:4px}
#fin .inlbtn:hover{border-color:var(--f-text)}

/* x-ray: over a chapter image, the pointer becomes a lens onto the workings behind it */
.xray{position:fixed;left:0;top:0;width:0;height:0;border-radius:20px;overflow:hidden;z-index:64;pointer-events:none;background-color:var(--w-canvas);background-image:radial-gradient(var(--w-dot) 1px,transparent 1.4px);background-size:24px 24px;color:var(--w-ink);font-family:var(--uifont);font-size:17px;line-height:1.5;clip-path:circle(0px at -100px -100px);opacity:0;transition:opacity .25s}
.xray.on{opacity:1}
.xray .xbody{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
.xray .xl{min-width:0}
.xray .xr{display:flex;gap:18px;align-items:flex-start;margin-top:auto}
.xray .xr .stk{font-size:17px;line-height:1.3;max-width:300px;padding:16px 16px 20px}
.xray .xr .say{font-size:15px;color:var(--w-muted)}
.xray .blk{margin-top:28px}.xray .blk:first-child{margin-top:0}
.xray .blk h2{font-size:28px;margin-bottom:14px}
.xray .txt .cols{columns:1;font-size:16px}
.xray .stickies{grid-template-columns:1fr 1fr;gap:12px}.xray .stk{font-size:15px;padding:14px 14px 18px}
.xray .grid3{grid-template-columns:1fr;gap:10px;margin-top:14px}.xray .fr{padding:14px;font-size:15px}
.xray .dec{grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.xray .dec .fr{grid-column:span 1}.xray .dec .why{grid-column:1 / -1;margin-top:0}
.xray .out{grid-template-columns:1fr}.xray .out .fr{grid-column:1 / -1}
.xray .lab{font-size:13px}
.xray .xmark{position:absolute;right:24px;bottom:20px;font-family:var(--mono);font-size:12px;color:var(--w-muted)}
.lens{position:fixed;z-index:67;pointer-events:none;width:0;height:0;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 0 7px rgba(0,0,0,.25),0 24px 60px -10px rgba(0,0,0,.6);transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease)}
.lens[hidden]{display:none}
.lens span{position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--f-text);white-space:nowrap;opacity:.8}
.lens.big{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 0 7px rgba(0,0,0,.25)}

/* ===== Workings: the board page (the board's own pieces are in workings.css) ===== */
.wrkskin{--canvas:var(--w-canvas);--dot:var(--w-dot);--ui:var(--w-ui);--ink:var(--w-ink);--muted:var(--w-muted);--line:var(--w-line);--sel:var(--w-sel);--dan:var(--w-dan);--note:var(--w-note);--ok:var(--w-ok);background-color:var(--w-canvas);background-image:radial-gradient(var(--w-dot) 1px,transparent 1.4px);background-size:24px 24px;color:var(--w-ink);font-family:var(--uifont);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrkskin .page-in{max-width:1200px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 84px) var(--gutter) 120px}
.wrkskin .ptop{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px 0;margin-bottom:-60px;pointer-events:none}
.wrkskin .ptop > *{pointer-events:auto}
.wrkskin .pill{background:var(--w-ui);border:1px solid var(--w-line);border-radius:12px;box-shadow:0 6px 20px -12px rgba(0,0,0,.3);display:flex;align-items:center;gap:4px;padding:5px}
.wrkskin .pill button{border:0;background:transparent;border-radius:8px;min-height:38px;padding:0 14px;cursor:pointer;white-space:nowrap}
.wrkskin .pill button:hover{background:#F1F1EF}
.wrkskin .pill button.primary{background:var(--w-ink);color:#fff}
.wrkskin .who{padding:5px 12px 5px 6px;gap:10px}
.wrkskin .who .av{width:30px;height:30px;border-radius:50%;background:var(--w-dan);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.wrkskin .who b{font-weight:600}
.wrkskin .ph{color:var(--w-muted);font-style:italic}
@media (max-width:820px){
  .wrkskin .stats{grid-template-columns:1fr 1fr} .wrkskin .txt .cols{columns:1} .wrkskin .imgs{grid-template-columns:1fr} .wrkskin .shot{aspect-ratio:4/3}
  .wrkskin .c-head .ttl,.wrkskin .c-head .brief{grid-column:1 / -1}
  .wrkskin .facts{grid-template-columns:1fr 1fr}
  .wrkskin .grid3{grid-template-columns:1fr}
  .wrkskin .stickies{grid-template-columns:1fr 1fr}
  .wrkskin .dec .fr,.wrkskin .dec .why{grid-column:1 / -1}
  .wrkskin .dec .why{margin-top:0}
  .wrkskin .out .fr{grid-column:1 / -1}
}
.wrkskin .hero.has{aspect-ratio:16/10}
.wrkskin .hero .img,.wrkskin .art2 .img{position:absolute;inset:0;background:center/cover no-repeat}
.wrkskin .hero{position:relative;overflow:hidden}
.wrkskin .next .art2{position:relative;overflow:hidden}
.wrkskin .next .art2>div,.wrkskin .next .art2>span{position:relative;z-index:1}
.wrkskin .art2 .img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.6))}

/* Dan's cursor, Workings only */
#dan{position:fixed;left:0;top:0;z-index:60;pointer-events:none;will-change:transform;font-family:var(--uifont);color:var(--w-ink);opacity:0;transition:opacity .4s}
:root[data-mode="wrk"] #dan{opacity:1}
#dan svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
#dan .tag{position:absolute;left:18px;top:20px;background:var(--w-dan);color:#fff;font-size:13px;font-weight:600;padding:3px 9px;border-radius:0 10px 10px 10px;white-space:nowrap}
#dan .say{position:absolute;left:18px;top:48px;width:min(300px,70vw);background:var(--w-ui);border:1px solid var(--w-line);border-radius:4px 14px 14px 14px;padding:12px 14px;font-size:14px;line-height:1.45;box-shadow:0 12px 30px -12px rgba(0,0,0,.3);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
#dan .say.on{opacity:1;transform:none;pointer-events:auto}
#dan .say .acts{display:flex;gap:6px;margin-top:10px}
#dan .say button{border:1px solid var(--w-line);background:#fff;border-radius:8px;min-height:34px;padding:0 12px;cursor:pointer;font-size:13px}
#dan .say button.go{background:var(--w-ink);color:#fff;border-color:var(--w-ink)}

@media (prefers-reduced-motion:reduce){ #fin .stage .img{animation:none} }

/* pictures sit on the project's own colour, so their text stays white in both colour schemes */
#fin .p-pic{color:#fff}
#fin .tail .cta{text-decoration:none}
#fin .tail a.nxrow:hover .cta,#fin .tail a.cta:hover{color:var(--f-bg);border-color:var(--f-strong)}

/* phones: the switch moves to the right of the header, the chapter bars and the board's Contact step aside for it */
@media (max-width:720px){
  .sw{left:auto;right:var(--gutter);transform:none}
  .seg button{min-width:0;padding:0 12px}
  #fin .bars,#fin .nav .theme{display:none}
  .wrkskin .ptop .pill:not(.who){display:none}
}

/* ===== arriving on a case study =====
   As the curtain lifts: the hero image opens out from an inset card, the title rises, then the header and switch settle in.
   Chapters rise into place as you scroll to them. */
.js #fin .stage{clip-path:inset(12% 7% 0 7% round 24px);transition:clip-path 1.5s cubic-bezier(.22,1,.36,1)}
.entered #fin .stage{clip-path:inset(0 0 0 0 round 0)}
.js #fin .now h1{opacity:0;transform:translateY(48px);transition:opacity 1s .25s var(--ease),transform 1.2s .25s var(--ease)}
.js #fin .now p{opacity:0;transition:opacity .9s .5s var(--ease)}
.entered #fin .now h1{opacity:1;transform:none}
.entered #fin .now p{opacity:1}
.js #fin .top,.js .sw{opacity:0;transition:opacity .8s .6s var(--ease)}
.entered #fin .top,.entered .sw{opacity:1}
/* arriving through the page curtain: the curtain does the entrance, so the hero and title are simply there underneath */
.landed #fin .stage{clip-path:none;transition:none}
.landed #fin .now h1,.landed #fin .now p{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){ .js #fin .stage{clip-path:none} .js #fin .now h1,.js #fin .now p,.js #fin .top,.js .sw{opacity:1;transform:none} }

/* showcases: the short version of a project. The brief, three details, and a note that the full write-up is coming */
#fin .facts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-top:clamp(40px,5vw,72px)}
#fin .facts>div{grid-column:span 3;border-top:1px solid var(--f-line);padding-top:14px}
#fin .facts>div:first-child{grid-column:4 / span 3}
#fin .facts>div:last-child{grid-column:span 3}
#fin .facts b{display:block;font-weight:400;font-size:14px;color:var(--f-muted)}
#fin .facts span{display:block;margin-top:4px;font-size:18px;color:var(--f-text)}
#fin .soon{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;padding-top:clamp(48px,6vw,88px)}
#fin .soon p{grid-column:4 / span 6;color:var(--f-muted);font-size:17px;max-width:48ch}
#fin .soon .contact{grid-column:10 / span 3;justify-self:end}
@media (max-width:900px){
  #fin .facts>div,#fin .facts>div:first-child,#fin .facts>div:last-child{grid-column:span 4}
  #fin .soon p,#fin .soon .contact{grid-column:1 / -1;justify-self:start}
}
@media (max-width:560px){ #fin .facts>div,#fin .facts>div:first-child,#fin .facts>div:last-child{grid-column:1 / -1} }
#fin .bars[hidden]{display:none}

/* the project's screens: grouped, laid out by what each image is */
#fin .shots{padding-top:clamp(72px,9vw,130px)}
#fin .shots .sh{margin:clamp(48px,7vw,112px) 0 clamp(24px,3vw,40px)}
#fin .shots .sh h2{font-weight:300;font-size:clamp(28px,3vw,44px);letter-spacing:-.02em;line-height:1.1}
#fin .shots .sh p{margin-top:16px;max-width:60ch;color:var(--f-muted);font-size:clamp(17px,1.4vw,20px)}
#fin .shots .sh:first-child{margin-top:0}
#fin .shot{margin:0 0 clamp(40px,5vw,80px)}
#fin .shot .row-in{display:flex;gap:clamp(12px,1.6vw,24px);align-items:flex-start}
#fin .shot .cell{flex:var(--a) 1 0;min-width:0}
#fin .shot .frame{position:relative;aspect-ratio:var(--a);overflow:hidden;border-radius:14px;background:var(--f-raise);border:1px solid var(--f-line);box-shadow:var(--shot-sh)}
#fin .shot img{display:block;width:100%;height:auto}
#fin .shot figcaption{margin-top:18px;margin-left:calc((100% + 24px) / 12 * 3);max-width:56ch;color:var(--f-muted);font-size:17px}
#fin .shot .k-phone .frame{border-radius:22px}
#fin .shot .k-art .frame{background:var(--fbg,#fff)}
#fin .shot .k-photo .frame{border:0;border-radius:10px}
/* mockups sit on the project's colour, with the same soft light from the centre as the covers */
#fin .shot .k-mock .frame{border:0;background:radial-gradient(ellipse 90% 90% at 50% 50%,color-mix(in srgb,var(--pc) 84%,#fff 16%) 0,var(--pc) 100%);box-shadow:none}
/* long screens: the top shows in the frame; hover and it scrolls down to the end, at a steady pace */
#fin .shot .tall:not(.over) .frame::after,#fin .shot .tall:not(.over) .hint,#fin .shot .tall:not(.over) .bar{display:none}
#fin .shot .tall .frame::after{content:"";position:absolute;inset:auto 0 0 0;height:18%;background:linear-gradient(transparent,rgba(255,255,255,.9));pointer-events:none;transition:opacity .5s}
/* the image is moved by script: hover glides it down, and it can be grabbed and dragged */
#fin .shot .tall img{will-change:transform;user-select:none;-webkit-user-select:none}
#fin .shot .tall.moved .frame::after,#fin .shot .tall.at-end .frame::after{opacity:0}
/* a thin track on the right shows how much of the screen there is, and where you are in it */
#fin .shot .tall .bar{position:absolute;top:10px;bottom:10px;right:6px;width:3px;border-radius:3px;background:rgba(0,0,0,.08);pointer-events:none;overflow:hidden}
#fin .shot .tall .bar i{display:block;width:100%;border-radius:3px;background:rgba(0,0,0,.35)}
/* and a small prompt over the fade, which goes once the screen starts moving */
#fin .shot .tall .hint{position:absolute;z-index:1;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;padding:10px 16px 10px 13px;border-radius:999px;background:rgba(14,14,14,.9);color:#fff;font-size:14px;font-weight:500;line-height:1;box-shadow:0 8px 22px -6px rgba(0,0,0,.45);pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .35s var(--ease)}
#fin .shot .tall .hint svg{animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(3px)}}
#fin .shot .tall:hover .hint,#fin .shot .tall.moved .hint{opacity:0}
@media (hover:hover) and (pointer:fine){
  #fin .shot .tall .frame{cursor:grab}
  #fin .shot .tall.grabbing .frame{cursor:grabbing}
}
#fin .shot .cell.zoom:not(.tall) .frame{cursor:zoom-in}
#fin .shot .cell.zoomed .frame{cursor:zoom-out}
#fin .shot .cell.zoom img{transform-origin:0 0}
#fin .shot .cell.zoomed img{transition:opacity .9s var(--ease),transform .12s linear}
#fin .shot .cell.zooming img{transition:opacity .9s var(--ease),transform .35s var(--ease)}
#fin .shot .cell.zoomed .hint,#fin .shot .cell.zoomed .bar{opacity:0}
#fin .shot .tall .bar{transition:opacity .3s}
@media (prefers-reduced-motion:reduce){ #fin .shot .tall .hint svg{animation:none} }
/* touch screens: long screens scroll inside their frame instead */
@media (hover:none),(pointer:coarse){ #fin .shot .tall .frame{overflow-y:auto;-webkit-overflow-scrolling:touch} #fin .shot .tall .frame::after,#fin .shot .tall .bar{display:none} }
/* phones: nothing is cut off at the sides. Each kind of image gets the layout that suits it:
   desktop pages, wireframes, flows, photos and mockups take the full width; phone screens pair up two to a line,
   with an odd one centred on its own; very wide diagrams run edge to edge to give them every pixel.
   Long screens show as much as fits and scroll inside their frame. */
@media (max-width:720px){
  #fin .shot .row-in{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  #fin .shot .cell,#fin .shot.even .cell{grid-column:1 / -1;width:auto;min-width:0}
  #fin .shot .cell.k-phone{grid-column:auto}
  #fin .shot .cell.k-phone.solo{grid-column:1 / -1;justify-self:center;width:calc(50% - 6px)}
  #fin .shot .frame{aspect-ratio:var(--am)}
  #fin .shot .cell.wide{margin-inline:calc(var(--gutter) * -1)}
  #fin .shot .cell.wide .frame{border-radius:0;border-left:0;border-right:0}
  #fin .shot .tall .hint{bottom:12px;padding:8px 13px 8px 11px;font-size:13px}
  #fin .shot .k-phone.tall .hint{padding:7px 10px;font-size:12px}
  #fin .shot{margin-bottom:44px}
  #fin .shot figcaption{font-size:16px;margin-top:14px}
}
@media (max-width:900px){ #fin .shot figcaption{margin-left:0} #fin .shot .frame{border-radius:10px} #fin .shot .k-phone .frame{border-radius:16px} }

/* images fade in once loaded (the frame shows a quiet panel until then) */
.js #fin .shot img,.js #fin .img,.js #fin .p-pic.is-img img{opacity:0;transition:opacity .9s var(--ease)}
.js #fin .shot img.ld,.js #fin .img.ld,.js #fin .p-pic.is-img img.ld{opacity:1}
@media (prefers-reduced-motion:reduce){ .js #fin .shot img,.js #fin .img,.js #fin .p-pic.is-img img{transition:none} }
/* a real image in a case study chapter: shown whole, centred on a quiet panel */
#fin .p-pic.is-img{background:var(--f-raise);padding:clamp(16px,3vw,40px);display:flex;align-items:center;justify-content:center}
#fin .p-pic.is-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px}

/* a cutout that breaks out of the hero (LittleBigPlanet's Sackboy) */
#fin .reel .stw{position:relative}
#fin .reel .cut{position:absolute;z-index:3;right:6%;bottom:3%;height:108%;width:auto;pointer-events:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));opacity:0;transform:translateY(40px)}
.entered #fin .reel .cut,.landed #fin .reel .cut{animation:cutin 1.1s .55s var(--ease) forwards}
/* arriving through the page transition, wait until the curtain has settled into the hero */
body.landed #fin .reel .cut{animation-delay:1.1s}
@keyframes cutin{to{opacity:1;transform:none}}
html:not(.js) #fin .reel .cut{opacity:1;transform:none}
@media (max-width:720px){ #fin .reel .cut{top:-3%;bottom:auto;height:46%;right:-2%} }
@media (prefers-reduced-motion:reduce){ #fin .reel .cut{animation:none;opacity:1;transform:none} }

/* a mockup can sit smaller in its frame and off centre: fit is the scale, dx the shift */
#fin .shot .cell.fit img{transform:translateX(var(--dx)) scale(var(--fit))}

#fin .shot .cell.zoomed .frame::after{opacity:0}

/* a showcase's results: the numbers from the project, in the same style as the case study's */
#fin .res{padding-top:clamp(48px,6vw,96px)}
#fin .res .nums.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
#fin .res .nums.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
#fin .res .nums div{border-top:1px solid var(--f-line);padding-top:18px}
#fin .res .nums div b{color:var(--f-strong)}
@media (max-width:720px){ #fin .res .nums.n2,#fin .res .nums.n3{grid-template-columns:1fr;gap:28px} #fin .res .nums div b{font-size:clamp(44px,13vw,72px)} }

/* a row of screens that differ in length: same width each, lined up along the top, so a short screen isn't blown up */
#fin .shot.even .row-in{align-items:flex-start}
#fin .shot.even .cell{flex:1 1 0}

/* chapter bars: the chapter's name shows on hover */
#fin .bars button{position:relative}
#fin .bars button::after{content:attr(data-n);position:absolute;top:100%;left:50%;transform:translate(-50%,4px);white-space:nowrap;font-size:13px;color:var(--f-text);background:var(--f-bg);border:1px solid var(--f-line);border-radius:6px;padding:4px 8px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#fin .bars button:hover::after,#fin .bars button:focus-visible::after{opacity:1;transform:translate(-50%,8px)}
#fin .bars button:last-child::after{left:auto;right:0;transform:translate(0,4px)}
#fin .bars button:last-child:hover::after{transform:translate(0,8px)}

/* tabbed screens */
#fin .shots.tabbed .tabs-h{font-weight:300;font-size:clamp(28px,3vw,44px);letter-spacing:-.02em;line-height:1.1}
#fin .tabs{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(20px,2.4vw,32px) 0 clamp(28px,3.4vw,48px)}
#fin .tabs button{font:inherit;font-size:16px;color:var(--f-muted);background:rgba(var(--f-veil),.6);border:1px solid var(--f-line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
#fin .tabs button:hover{color:var(--f-strong);border-color:var(--f-text)}
#fin .tabs button[aria-selected="true"]{color:var(--f-bg);background:var(--f-strong);border-color:var(--f-strong)}
#fin .tabs button:focus-visible{outline:2px solid var(--f-accent);outline-offset:2px}
#fin .tabp-p{margin:0 0 clamp(24px,3vw,40px);max-width:60ch;color:var(--f-muted);font-size:clamp(17px,1.4vw,20px)}
#fin .tabp .shot:last-child{margin-bottom:0}
@media (max-width:720px){ #fin .tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none} #fin .tabs::-webkit-scrollbar{display:none} #fin .tabs button{flex:0 0 auto;font-size:15px;padding:8px 14px} }

/* the tabbed case study */
#fin .chunks{padding-top:clamp(56px,7vw,110px)}
#fin .tabs.ck{position:sticky;top:66px;z-index:5;margin:0 calc(var(--gutter) * -1);padding:12px var(--gutter);background:color-mix(in srgb,var(--f-bg) 35%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid color-mix(in srgb,var(--f-line) 30%,transparent)}
#fin .ck-t{max-width:68ch;padding-top:clamp(12px,2vw,24px)}
#fin .ck-t h2{font-weight:300;font-size:clamp(32px,3.6vw,56px);letter-spacing:-.025em;line-height:1.05;color:var(--f-strong)}
#fin .ck-t p{margin-top:18px;color:var(--f-muted);font-size:clamp(17px,1.3vw,19px);line-height:1.6}
#fin .ck-t p.lead{color:var(--f-text);font-size:clamp(19px,1.6vw,23px);line-height:1.5}
#fin .ck-s{padding-top:clamp(40px,5vw,72px)}
#fin .ck-b{padding-top:clamp(56px,7vw,112px)}
#fin .ck-b .ck-t{padding-top:0}
#fin .ck-b .ck-t p:first-of-type{margin-top:0}
#fin .ck-b .ck-t h3{font-size:clamp(20px,1.6vw,24px);font-weight:500;color:var(--f-strong);margin-bottom:12px;letter-spacing:-.01em}
#fin .ck-b .ck-s{padding-top:clamp(28px,3.5vw,48px)}
#fin .ck-next{display:inline-block;margin-top:clamp(32px,4vw,56px);font:inherit;font-size:18px;color:var(--f-strong);background:none;border:0;border-bottom:1px solid var(--f-line);padding:0 0 4px;cursor:pointer}
#fin .ck-next:hover{border-color:var(--f-strong)}
#fin .nums div b{white-space:nowrap}
#fin .shot.n1 .row-in{justify-content:center}
#fin .tabs.ck{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}#fin .tabs.ck::-webkit-scrollbar{display:none}#fin .tabs.ck button{flex:0 0 auto;font-size:15px;padding:8px 15px}

#fin .tabs.ck{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .3s,border-color .3s}
#fin .tabs.ck.stuck{background:color-mix(in srgb,var(--f-bg) 35%,transparent);border-bottom-color:color-mix(in srgb,var(--f-line) 30%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* simulated walkthroughs */
#fin .shot.sim{display:flex;flex-direction:column;align-items:center}
#fin .sim-ph{width:min(375px,82vw);aspect-ratio:375/890;border-radius:22px;overflow:hidden;border:1px solid var(--f-line);box-shadow:var(--shot-sh);background:var(--f-raise)}
#fin .sim-ph iframe{display:block;width:100%;height:100%;border:0}
#fin .shot.sim figcaption{max-width:60ch;text-align:center;margin-left:0}
#fin .sim-mode{display:inline-flex;gap:4px;margin-top:18px;padding:4px;border:1px solid var(--f-line);border-radius:999px}
#fin .sim-mode button{font:inherit;font-size:14px;color:var(--f-muted);background:none;border:0;border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .25s,color .25s}
#fin .sim-mode button[aria-pressed="true"]{background:var(--f-strong);color:var(--f-bg)}
#fin .sim-ph{width:min(375px,82vw,calc((100vh - 230px) * 375 / 890))}
#fin .sim-ph iframe{width:1px;min-width:100%}
@media (max-width:900px){ #fin .sim-ph{border-radius:16px} }

/* phones: a screen opened full size. Pinch, drag, double-tap, swipe down to close */
.pv{position:fixed;inset:0;z-index:160;touch-action:none;overflow:hidden;--pull:0px}
.pv[hidden]{display:none}
.pv-bg{position:absolute;inset:0;background:#0b0b0b;opacity:0;transition:opacity .3s var(--ease)}
.pv.on .pv-bg{opacity:calc(1 - var(--pk,0))}
.pv-im{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none;opacity:0;translate:0 var(--pull);transition:opacity .3s var(--ease)}
.pv.on .pv-im{opacity:1}
.pv-im.anim{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pv-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:2;font:inherit;font-size:14px;color:#fff;background:rgba(40,40,40,.7);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pv-tip{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%);z-index:2;color:#fff;font-size:13px;background:rgba(40,40,40,.7);border-radius:999px;padding:7px 14px;pointer-events:none;transition:opacity .4s}
.pv.tipped .pv-tip{opacity:0}
html.pv-on,html.pv-on body{overflow:hidden}
@media (hover:none),(pointer:coarse){ #fin .shot .cell:not(.k-mock) .frame{cursor:zoom-in} }

/* the soft shadow under screens: lighter in dark mode, and barely there on the light theme */
:root{--shot-sh:0 24px 50px -34px rgba(0,0,0,.3)}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){--shot-sh:0 14px 30px -24px rgba(0,0,0,.07)} }
:root[data-theme="light"]{--shot-sh:0 14px 30px -24px rgba(0,0,0,.07)}

/* long pages on desktop: the top, with a button to see the whole thing in the lightbox */
#fin .shot .cell.lb .frame{cursor:zoom-in}
#fin .shot .cell.lb .bar{display:none}
#fin .shot .cell.lb .hint{transition:transform .35s var(--ease),background .3s}
#fin .shot .cell.lb:hover .hint{opacity:1;transform:translateX(-50%) translateY(-3px)}
#fin .shot .cell.lb .hint svg{animation:none}
#fin .shot .cell.lb img{transition:transform .6s var(--ease)}
#fin .shot .cell.lb:hover img{transform:translateY(-8px)}
.lbx{position:fixed;inset:0;z-index:170;background:rgba(10,10,10,0);transition:background .35s var(--ease)}
.lbx[hidden]{display:none}
.lbx.on{background:rgba(10,10,10,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lbx-sc{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(56px,7vh,84px) 24px clamp(40px,6vh,72px)}
.lbx-in{margin:0 auto;width:min(1200px,100%);opacity:0;transform:translateY(24px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.lbx.on .lbx-in{opacity:1;transform:none}
.lbx-in img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);cursor:default}
.lbx-in figcaption{color:rgba(255,255,255,.7);font-size:15px;max-width:60ch;margin:18px auto 0;text-align:center}
.lbx-x{position:absolute;top:18px;right:20px;z-index:2;font:inherit;font-size:15px;color:#fff;background:rgba(40,40,40,.8);border:1px solid rgba(255,255,255,.2);border-radius:999px;min-height:40px;padding:0 18px;cursor:pointer;transition:background .3s}
.lbx-x:hover{background:rgba(70,70,70,.9)}
html.lbx-on,html.lbx-on body{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .lbx,.lbx-in{transition:none} }
/* the sticky tab bar runs the full width of the window, like the header, so its dividing line reaches both edges
   on wide screens. The tabs themselves still start in line with the page */
#fin .tabs.ck{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}

/* loading: a soft shimmer sweeps across a screen's frame until the image arrives, and the lightbox and phone viewer show a small spinner */
.js #fin .shot .frame:not(.done)::before,.js #fin .p-pic.is-img:not(.done)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--f-text) 10%,transparent) 50%,transparent 70%) 0 0/250% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.lbx.wait::after,.pv.wait::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:#fff;animation:spin .8s linear infinite;z-index:3}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .js #fin .shot .frame:not(.done)::before,.js #fin .p-pic.is-img:not(.done)::before{animation:none;background:color-mix(in srgb,var(--f-text) 4%,transparent)} .lbx.wait::after,.pv.wait::after{animation-duration:2.4s} }