/* Case-study feature chapters ("What the site does"): each feature with its pictures on a stage in the client's own colours.
   Markup comes from scripts/build-work.mjs; behaviour from /gallery.js. Colours: --brand-stage and --brand-badge (dist/work-brand.css, generated),
   falling back to the page accent. No inline styles anywhere (CSP): a new layout is a new class here. */
.acc-blue{--accent:var(--blue)}.acc-teal{--accent:var(--teal)}.acc-orange{--accent:var(--orange)}.acc-green{--accent:var(--green)}
.chaps{--stage:var(--brand-stage,var(--accent,var(--blue)));--badge:var(--brand-badge,var(--ink));--ease:cubic-bezier(.22,1,.36,1);display:grid;gap:clamp(40px,6vw,88px);margin-top:clamp(8px,2vw,24px)}
.case-features .jump+.chaps{margin-top:clamp(20px,3vw,36px)}

/* jump buttons */
.jump{display:flex;flex-wrap:wrap;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;margin:0}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;border:1.5px solid var(--ink);border-radius:99px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;transition:background-color .25s,transform .25s var(--ease),box-shadow .25s}
.jump a i{font:700 12px/1 var(--body);font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--badge,var(--ink));color:#fff;display:grid;place-items:center}
.jump a:hover{background:var(--paper-2);transform:translateY(-2px);box-shadow:0 6px 14px -8px #0008}
.jump a[aria-current]{background:var(--ink);color:var(--paper)}
.jump a[aria-current] i{background:#fff;color:var(--ink)}
.jump a{-webkit-tap-highlight-color:transparent}
.jump a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.jump a:focus:not(:focus-visible){outline:none}
.case-features .jump{--badge:var(--ink)}

/* a chapter: the picture first on a phone (the text comes first in the page source), two columns from 900px */
.chap:focus,.chap:focus-visible,.chap:target{outline:none}
.chap :focus:not(:focus-visible){outline:none}
.chap{-webkit-tap-highlight-color:transparent;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;scroll-margin-top:84px}
.chap-vis{order:-1}
.chap-text{display:grid;gap:14px;align-content:center;justify-items:start}
.chap-text h3{margin:0;font:700 clamp(28px,3.6vw,48px)/.98 var(--display);letter-spacing:-.045em}
.chap-text p{margin:0;max-width:44ch;font-size:clamp(17px,1.5vw,19px);line-height:1.55}
.num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--badge);color:#fff;font:700 14px/1 var(--body)}
@media(min-width:900px){
  .chap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .chap:nth-child(even){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .chap:nth-child(even) .chap-vis{order:0}
  .chap--set,.chap--admin,.chap--set:nth-child(even),.chap--admin:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .chap--set .chap-vis,.chap--admin .chap-vis,.chap--set:nth-child(even) .chap-vis,.chap--admin:nth-child(even) .chap-vis{order:0}
  .chap--set .chap-text,.chap--admin .chap-text{max-width:70ch}
}
/* a feature with no picture is a plain card */
.chap--plain{grid-template-columns:minmax(0,1fr);padding:clamp(18px,2.4vw,26px);border:1.5px solid var(--ink);border-radius:10px;background:var(--paper-3,#fafbfc)}
.chap--plain .chap-text{gap:10px}
.chap--plain .chap-text h3{font-size:clamp(22px,2.4vw,30px)}
.chap--plain:nth-child(even){grid-template-columns:minmax(0,1fr)}

/* the stage */
.chap-vis{padding:0;display:grid;place-items:center;overflow:hidden;min-width:0}
.lap{border:1.5px solid var(--ink);border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 18px 36px -22px #0007;width:100%}
.lap .bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-bottom:1.5px solid var(--ink);font-size:11px;line-height:1;color:var(--muted);background:#fff}
.lap .bar i{width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none}
.lap .bar span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lap img{display:block;width:100%;height:auto}
.lap .zoom{border-radius:0}
.pf{width:100%;padding:11px 3px 4px;background:#101114;border-radius:22px;box-shadow:0 0 0 1.5px #000,inset 0 0 0 1px #3b3e46,0 18px 34px -12px #0009;overflow:hidden}
.pf img{display:block;width:100%;height:auto;border-radius:0 0 18px 18px}
.pf .zoom{border-radius:0 0 18px 18px}
.pf-one{width:min(68%,260px);margin-inline:auto}
.only-m{display:none}
@media(max-width:599px){.only-d{display:none!important}.only-m{display:block}}
.pill,.steps figcaption,.stack figcaption,.phones figcaption,.set-thumbs li>span,.set-pfw>span{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1.5px solid var(--ink);border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap;color:var(--ink);margin:0}
.steps figcaption{padding:3px 12px 3px 3px}
.steps figcaption i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--badge);color:#fff;display:grid;place-items:center;font-size:12px}

/* a picture opens in the viewer */
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;text-align:left;overflow:hidden;border-radius:inherit;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.zoom img{transition:transform .7s var(--ease);transform-origin:50% 40%}
.zoom:before{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,10,11,.3);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.zoom:after{content:"";position:absolute;z-index:2;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/26px no-repeat;border:1.5px solid var(--ink);opacity:0;transform:scale(.6);transition:opacity .3s var(--ease),transform .5s var(--ease);pointer-events:none}
.zoom:hover img,.zoom:focus-visible img{transform:scale(1.035)}
.zoom:hover:before,.zoom:focus-visible:before{opacity:1}
.zoom:hover:after,.zoom:focus-visible:after{opacity:1;transform:none}
.zoom:active img{transform:scale(1.02);transition-duration:.15s}
.zoom:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
@media(hover:none){.zoom:before,.zoom:after{display:none}}

/* three phone steps: a swipe strip on phones, three across from 600px */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:min(62%,250px);gap:16px;align-items:start;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 10px;width:100%;scrollbar-width:none}
.steps::-webkit-scrollbar,.set::-webkit-scrollbar{display:none}
.steps>figure{margin:0;scroll-snap-align:center;display:grid;gap:12px;justify-items:center;align-content:start;min-width:0;grid-template-columns:minmax(0,1fr)}
.steps .pf{width:100%}
.chap--flow .chap-vis,.chap--phones .chap-vis{overflow:hidden}
@media(min-width:600px){.steps{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:22px;max-width:640px;padding-inline:0}}

/* phone-only pictures */
.phones{display:grid;gap:18px;justify-items:center;width:100%}
.phones figure{margin:0;display:grid;gap:12px;justify-items:center;width:100%}
.phones-1 .pf{width:min(68%,260px)}
.phones-2,.phones-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.phones-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.phones-2 .pf,.phones-3 .pf{width:100%;max-width:200px}
@media(max-width:440px){.phones{gap:14px 20px}.phones figcaption{white-space:normal;text-align:center;justify-content:center;max-width:100%}}

/* two pictures on one stage */
.stack{display:grid;gap:22px;width:100%}
.stack figure{margin:0;display:grid;gap:12px;justify-items:start}
.stack figure .pf-one{justify-self:center}

/* a lead picture with smaller ones under it (the gym's private screens, a restaurant's home page sections) */
.set{display:grid;gap:14px;width:100%}
.set-lead{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,1fr);gap:16px;align-items:end}
.set-lead>.lap:only-child{grid-column:1/-1}
.set-pfw{display:grid;justify-items:center;gap:10px}
.set-pfw .pf{width:100%}
.set-pfw>span{display:none}
.set-thumbs{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.set-thumbs-1{grid-template-columns:minmax(0,1fr);max-width:50%}
.set-thumbs-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.set-thumbs li{display:grid;gap:8px;justify-items:start;align-content:start;grid-template-columns:minmax(0,1fr)}
.set-thumbs .lap img{aspect-ratio:4/3;object-fit:cover;object-position:50% 0}
@media(min-width:900px){.set{gap:20px}.set-lead{grid-template-columns:minmax(0,3.2fr) minmax(0,1fr);gap:24px}.set-thumbs{gap:20px}}
/* Phones (Ed, 2026-11-06: tabs and pictures hard to use with a thumb): the words first, then the pictures as one swipe strip
   that runs to the screen edge with the next picture peeking, plain captions, no coloured stage, and the feature buttons
   docked in the thumb zone (.jump-dock, added by /gallery.js). Desktop pictures are cropped to a tile; tap one to open it. */
.strip-ctl{display:none}
@media(max-width:599px){
  .chaps .chap .chap-vis{order:0;overflow:visible}
  .chaps{--ph:min(66vw,260px)} /* one phone width in every chapter (Ed, 2026-11-07: pictures were 258 wide in four chapters and 167 in the fifth) */
  .steps,.set,.phones:not(.phones-1){display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(var(--g,16px)*-1);padding:4px var(--g,16px) 12px;scroll-padding-inline:var(--g,16px);width:calc(100% + var(--g,16px)*2);max-width:none;scrollbar-width:none}
  .set-lead,.set-thumbs{display:contents}
  .steps>figure,.phones:not(.phones-1)>figure,.set-pfw,.set-thumbs li{flex:none;width:var(--ph);scroll-snap-align:start;justify-items:start;align-content:start}
  .phones .pf{max-width:none}
  .set-lead>.lap:only-child{flex:none;width:min(86%,330px);scroll-snap-align:start}
  .set-lead>.lap,.set-thumbs li>.lap{flex:none;width:min(86%,330px);scroll-snap-align:start}
  .set-thumbs li>.lap{width:100%}
  .set-thumbs li{width:min(86%,330px)}
  .set-thumbs li:has(.pf){width:var(--ph)}
  .set-pfw>span{display:inline-flex}
  .set .lap .zoom{aspect-ratio:4/5}
  .set .lap img,.set-thumbs .lap img{aspect-ratio:auto;height:100%;object-fit:cover;object-position:0 0}
  .lap .zoom:after{display:block;opacity:1;left:auto;top:auto;right:8px;bottom:8px;width:36px;height:36px;margin:0;transform:none}
  .steps figcaption,.stack figcaption,.phones figcaption,.set-thumbs li>span,.set-pfw>span{background:none;border:0;border-radius:0;padding:0;white-space:normal;font-size:15px;line-height:1.3;justify-content:flex-start;text-align:left}
  .steps figcaption{gap:8px}
  .steps figcaption i{width:22px;height:22px;flex:none}
  .stack{gap:24px}
  .phones-1{gap:24px}
  /* the strips say they scroll: a soft fade on the right while more follows (added with .strip by /gallery.js; the left stays clear because the picture there is the one being read), and a count with arrows underneath */
  .strip{--fl:0px;--fr:24px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);transition:--fl .3s ease,--fr .3s ease}
  .strip.at-end{--fr:0px}
  .strip:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
  .strip-ctl{display:flex;align-items:center;gap:12px;margin-top:6px;width:100%;justify-self:stretch}
  .strip-ctl .car-count{margin:0 auto 0 0}
  .pf-one,.phones-1 .pf{width:var(--ph)}
}
@property --fl{syntax:'<length>';inherits:true;initial-value:18px}
@property --fr{syntax:'<length>';inherits:true;initial-value:18px}
.jump-dock{display:none}
@media(max-width:599px){
  .jump-dock{display:block;position:fixed;left:12px;right:12px;bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--sc-lift,0px));z-index:40;overflow:hidden;background:#fff;border:1.5px solid var(--ink);border-radius:99px;box-shadow:0 10px 24px -10px #0009;opacity:0;transform:translateY(130%);pointer-events:none;transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1)}
  .jump-dock.on{opacity:1;transform:none;pointer-events:auto}
  /* chips slide under a soft fade at each end instead of being cut by the pill */
  .jump-dock .jump{flex-wrap:nowrap;margin:0;padding:6px 14px 9px;gap:6px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);transition:--fl .3s ease,--fr .3s ease}
  .jump-dock .jump.at-start{--fl:0px}
  .jump-dock .jump.at-end{--fr:0px}
  .jump-dock .jump a{min-height:48px;border-color:transparent}
  .jump-dock .jump a[aria-current]{border-color:var(--ink)}
  .jump-dock .jump a:hover{transform:none;box-shadow:none}
  .jump-dock .jump a.nonum i{visibility:hidden}
  @media(max-width:380px){.jump-dock .jump a{gap:6px;padding:8px 11px 8px 8px;font-size:14px}}
  .jump-dock .jump a:not([aria-current]){background:#fff}
  /* the zxn credit-badge bar, as reading progress */
  .jump-dock:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#7f9bff,#3fb8af,#8fcb18,#f0a04b);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .2s linear;pointer-events:none}
  /* the chat button steps aside while the bar is up, and the bar steps aside while a chat is open */
  .sc{transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s}
  html:has(.jump-dock.on) .sc:not(.sc-open){opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .35s ease,visibility 0s linear .3s}
  html:has(.sc.sc-open) .jump-dock{opacity:0;transform:translateY(130%);pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.jump-dock,.jump-dock:after,.sc{transition:none!important}}
@media(max-width:599px){
  .lb-stage{overflow:auto;max-height:72vh;touch-action:pan-x pan-y pinch-zoom}
  .lb-stage:has(img.wide){display:block}
  .lb-stage img.wide{max-width:none;width:230vw;max-height:none}
}
.chap--admin .chap-vis,.chap--set .chap-vis{overflow:hidden}
.sample-note{display:inline-flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:14px}
.tag{display:inline-block;white-space:nowrap;font:700 11px/1 var(--body);letter-spacing:.08em;padding:5px 9px;border-radius:99px;background:var(--ink);color:var(--paper)}
.tag--sample{background:var(--ink);color:#fff}

/* scroll reveal (only when the script is on and motion is allowed) */
@media(prefers-reduced-motion:no-preference){
  html:has(.chaps){scroll-behavior:smooth}
  html.gal-js .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  html.gal-js .chap-vis.reveal{transform:translateY(40px) scale(.97)}
  html.gal-js .chap-text.reveal{transition-delay:.12s}
  html.gal-js .reveal.in{opacity:1;transform:none}
  html.gal-js .steps>figure{opacity:0;transform:translateY(26px)}
  html.gal-js .chap-vis.in .steps>figure{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(.25s + var(--i,0)*.12s)}
}

/* the viewer */
dialog.lb{position:fixed;width:fit-content;min-width:min(440px,95vw);max-width:min(1180px,95vw);max-height:94vh;padding:0;border:1.5px solid var(--ink);border-radius:16px;background:#0a0a0b;color:#fff;overflow:hidden;opacity:0;transform:translateY(18px) scale(.97);transition:opacity .35s var(--ease),transform .45s var(--ease),overlay .35s allow-discrete,display .35s allow-discrete}
dialog.lb[open]{opacity:1;transform:none}
@starting-style{dialog.lb[open]{opacity:0;transform:translateY(18px) scale(.97)}}
dialog.lb::backdrop{background:#000c;backdrop-filter:blur(6px);opacity:0;transition:opacity .35s,overlay .35s allow-discrete,display .35s allow-discrete}
dialog.lb[open]::backdrop{opacity:1}
@starting-style{dialog.lb[open]::backdrop{opacity:0}}
.lb-stage{display:grid;place-items:center;background:#000;min-height:200px}
.lb-stage img{width:auto;max-width:100%;height:auto;max-height:76vh;object-fit:contain;transition:opacity .16s ease,transform .3s var(--ease)}
.lb-stage img.swap{opacity:0;transform:scale(.985)}
.lb-nav{position:absolute;top:calc(50% - 34px);translate:0 -50%;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .3s var(--ease),background-color .2s}
.lb-nav svg{width:22px;height:22px}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-nav:hover{background:var(--paper-2);transform:scale(1.08)}
.lb .dcap{display:flex;gap:14px;align-items:center;padding:12px 16px;font-size:15px}
.lb .cap-t{flex:1}.lb .cap-n{color:#a29e95;font-size:13px}
.lb .lb-close{min-height:44px;padding:8px 20px;border:1.5px solid #fff;border-radius:99px;background:#fff;color:var(--ink);font:700 15px var(--body);cursor:pointer;transition:transform .25s var(--ease)}
.lb .lb-close:hover{transform:translateY(-2px)}
.lb button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:599px){
  .lb-nav{position:static;translate:none;width:44px;height:44px;flex:none}
  .lb .dcap{flex-wrap:wrap}
  .lb .cap-t{flex:1 1 100%}
  .lb .cap-n{margin-right:auto}
}
@media(prefers-reduced-motion:reduce){.zoom,.zoom img,.zoom:after,dialog.lb,.lb-stage img{transition:none!important}}