/* Portfolio 26 · shared shell: glass nav, breadcrumbs, avatar + contact card, page-end cards, page transitions.
   Every colour the header uses is a token, so the dark version (.xhdr.dark, switched by what's behind it) is one block. */
:root{--x-keep:0}
.xhdr{--x-bg:#E7EAE5;--x-txt:#10382D;--x-sub:#716A66;--x-pill:rgba(231,234,229,.8);--x-pill-bd:rgba(16,56,45,0);--x-hover:rgba(16,56,45,.07);
  --x-hdr:64px;--x-hdr-bg:transparent;--x-acc:#0B5BE5;--x-blob:rgba(11,91,229,.4);--x-card:#FFFFFF;--x-card-txt:#10382D;
  --x-display:"Figtree",system-ui,sans-serif;--x-ui:"Figtree",system-ui,sans-serif}
.xhdr[data-s="lab"]{--x-acc:#D93790;--x-blob:rgba(223,180,206,.7)}
.xhdr[data-s="tales"]{--x-acc:#33A58E;--x-blob:rgba(51,165,142,.4)}
.xhdr.land{--x-hdr:98px;--x-hdr-bg:rgba(231,234,229,.62)}
.xhdr.land[data-s="tales"]{--x-hdr-bg:rgba(249,243,223,.62);--x-pill:rgba(231,234,229,.45)}
/* dark: same structure, inverted tokens, no light pill */
.xhdr.dark{--x-txt:#F3EFEA;--x-sub:rgba(243,239,234,.62);--x-pill:rgba(255,255,255,.08);--x-pill-bd:rgba(255,255,255,.14);--x-hover:rgba(255,255,255,.1);--x-card:#1D1916;--x-card-txt:#F3EFEA}

.xhdr{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--x-hdr);font-family:var(--x-ui);color:var(--x-txt)}
.xhdr::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--x-hdr-bg);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);pointer-events:none}
.xhdr:not(.land)::before{-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}

/* one pill style for crumbs and nav */
.xhdr .crumbs,.xhdr .gnav{display:flex;align-items:center;border-radius:999px;background:var(--x-pill);box-shadow:inset 0 0 0 1px var(--x-pill-bd);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .35s ease,box-shadow .35s ease,color .35s ease}
.xhdr .crumbs{position:absolute;left:calc(max(20px,2.4vw) + var(--sig-w) + 14px);top:calc((var(--x-hdr) - 40px)/2);height:40px;padding:0 16px;gap:8px;font:500 14px/1 var(--x-ui);letter-spacing:-.3px;text-transform:none;max-width:calc(50% - 190px);white-space:nowrap;overflow:hidden}
.xhdr .crumbs[hidden]{display:none}
.xhdr .crumbs a{color:var(--x-sub);text-decoration:none;transition:color .2s}.xhdr .crumbs a:hover{color:var(--x-txt)}
.xhdr .crumbs i{font-style:normal;color:var(--x-sub);opacity:.7}
.xhdr .crumbs b{font-weight:600;color:var(--x-txt);overflow:hidden;text-overflow:ellipsis}
.xhdr .gnav{position:absolute;left:50%;top:calc((var(--x-hdr) - 50px)/2);transform:translateX(-50%);height:50px;padding:0 4px;view-transition-name:gnav}
.xhdr .gnav a{position:relative;display:flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;font:400 15px/20px var(--x-ui);letter-spacing:-.5px;color:var(--x-txt);text-decoration:none;transition:background .25s ease,color .35s ease}
.xhdr .gnav a:hover{background:var(--x-hover)}
.xhdr .gnav a.on{font-weight:600}
.xhdr .gnav .dot{position:absolute;left:0;bottom:9px;width:5px;height:5px;border-radius:50%;background:var(--x-acc);
  transform:translateX(var(--x,0px)) scaleX(1);transition:transform .55s cubic-bezier(.34,1.45,.5,1),background-color .4s ease;pointer-events:none;view-transition-name:nav-dot}
.xhdr .gnav .dot.mv{transform:translateX(var(--x,0px)) scaleX(2.4)}

/* avatar: photo, blob behind, shakes + "Say hi!" on hover, opens a small contact card */
.xhdr .av{position:absolute;right:max(20px,2.4vw);top:calc((var(--x-hdr) - 48px)/2);width:48px;height:48px}
.xhdr .av::before{content:"";position:absolute;right:-30px;top:-38px;width:100px;height:100px;border-radius:24px;transform:rotate(12deg);background:var(--x-blob);z-index:-1;view-transition-name:av-blob;transition:background .35s}
.xhdr .av-btn{display:block;width:100%;height:100%;padding:0;border-radius:50%;border:1px solid #B3C8D8;background:#C9DDD6;overflow:hidden;cursor:pointer;view-transition-name:av}
.xhdr .av-btn img{width:100%;height:100%;object-fit:cover;display:block}
/* gentle wiggle: photo and blob move together as one piece */
.xhdr .av:hover .av-btn,.xhdr .av-btn:focus-visible{animation:xshake .7s ease-in-out}
.xhdr .av:hover::before,.xhdr .av:has(.av-btn:focus-visible)::before{animation:xshake-b .7s ease-in-out}
.xhdr .av-btn:focus-visible{outline:2px solid var(--x-acc);outline-offset:3px}
@keyframes xshake{20%{transform:rotate(-3deg)}45%{transform:rotate(2.5deg)}70%{transform:rotate(-1.5deg)}100%{transform:none}}
@keyframes xshake-b{20%{transform:rotate(9deg)}45%{transform:rotate(14.5deg)}70%{transform:rotate(10.5deg)}100%{transform:rotate(12deg)}}
.xhdr .av-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%) scale(.9);transform-origin:100% 50%;padding:7px 12px;border-radius:14px 14px 4px 14px;background:var(--x-txt);color:var(--x-bg);font:600 13px/1 var(--x-ui);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.45,.5,1)}
.xhdr.dark .av-tip{color:#10382D}
.xhdr .av:hover .av-tip,.xhdr .av-btn:focus-visible+.av-tip{opacity:1;transform:translate(0,-50%) scale(1)}
.xhdr .av.open .av-tip{opacity:0}
.xhdr .av-card{position:absolute;right:0;top:calc(100% + 12px);width:236px;padding:16px;border-radius:18px;background:var(--x-card);color:var(--x-card-txt);box-shadow:0 18px 50px rgba(20,16,14,.22),inset 0 0 0 1px var(--x-pill-bd);display:flex;flex-direction:column;gap:4px;
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:100% 0;pointer-events:none;transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.3,.5,1)}
.xhdr .av.open .av-card{opacity:1;transform:none;pointer-events:auto}
.xhdr .av-card p{margin:0 0 8px;font:700 15px/1.25 var(--x-display)}
.xhdr .av-card p span{display:block;font:400 13px/1.3 var(--x-ui);opacity:.65;margin-top:2px}
.xhdr .av-card a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;margin:0 -4px;border-radius:12px;font:500 14px/1 var(--x-ui);color:inherit;text-decoration:none}
.xhdr .av-card a:hover,.xhdr .av-card a:focus-visible{background:var(--x-hover);outline:none}
.xhdr .av-card a span{opacity:.5}

@media(max-width:820px){
  .xhdr .crumbs{display:none}
  .xhdr .av{width:40px;height:40px;right:14px;top:calc((var(--x-hdr) - 40px)/2)}
  .xhdr .gnav{left:14px;transform:none}
  .xhdr .gnav a{padding:0 12px}
  .xhdr .av-tip{display:none}
}

/* page end: two more from the same section + back to the section */
.kx{padding:72px max(20px,5.8vw) 88px;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);font-family:"Figtree",system-ui,sans-serif}
.kx-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 24px;flex-wrap:wrap}
.kx-head h2{margin:0;font:700 clamp(24px,2.4vw,30px)/1.15 "Figtree",system-ui,sans-serif;letter-spacing:-.02em}
.kx-back{font:600 13px/1 "Figtree",system-ui,sans-serif;color:inherit;opacity:.7;text-decoration:none;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 25%,transparent)}
.kx-back:hover{opacity:1}
.kx-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kx-card{position:relative;display:block;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0d0f18 center/cover no-repeat;color:#fff;text-decoration:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.kx-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(20,16,14,.25)}
.kx-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%}
.kx-card .t{position:absolute;left:22px;bottom:20px;z-index:1;display:flex;flex-direction:column;gap:5px}
.kx-card b{font-size:18px;font-weight:700;line-height:1.1}.kx-card em{font-size:12px;font-style:normal}
.kx-card .o{position:absolute;right:18px;bottom:18px;z-index:1}
.kx-card:focus-visible,.kx-back:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:700px){.kx-grid{grid-template-columns:1fr}}

/* page to page */
@view-transition{navigation:auto}
::view-transition-old(root){animation:xvt-out .3s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:xvt-in .55s cubic-bezier(.2,.8,.2,1) .05s both}
::view-transition-group(nav-dot){animation-duration:.6s;animation-timing-function:cubic-bezier(.34,1.35,.5,1)}
::view-transition-group(av-blob){animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(av-blob),::view-transition-new(av-blob){animation-duration:.6s}
@keyframes xvt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes xvt-in{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){
  .xhdr .gnav .dot,.xhdr .av-card,.xhdr .av-tip{transition:none}.xhdr .av-btn,.xhdr .av::before{animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---- shared card scrim: eased (smoothstep) stops + fine grain so dark gradients never band ---- */
:root{--scrim:linear-gradient(180deg,rgba(2,8,9,0.000) 0%,rgba(2,8,9,0.026) 10%,rgba(2,8,9,0.097) 20%,rgba(2,8,9,0.201) 30%,rgba(2,8,9,0.327) 40%,rgba(2,8,9,0.465) 50%,rgba(2,8,9,0.603) 60%,rgba(2,8,9,0.729) 70%,rgba(2,8,9,0.833) 80%,rgba(2,8,9,0.904) 90%,rgba(2,8,9,0.930) 100%);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .11 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E")}
.wc .g,.kx-card::after,.cap::before{background:var(--grain),var(--scrim);background-size:160px 160px,100% 100%}
/* ---- secondary button: "Open" + arrow icon (cards, page-end cards, lab tiles) ---- */
.wc .open,.kx-card .o,.cap .open{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 14px;border-radius:999px;font:500 13px/1 "Figtree",system-ui,sans-serif;letter-spacing:-.1px;color:#fff;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);white-space:nowrap;transition:background .25s ease,box-shadow .25s ease}
.wc .open::after,.kx-card .o::after,.cap .open::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--ico-arrow) center/contain no-repeat;mask:var(--ico-arrow) center/contain no-repeat;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
:root{--ico-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6'/%3E%3C/svg%3E")}
.wc:hover .open,.kx-card:hover .o,.tile:hover .cap .open{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.wc:hover .open::after,.kx-card:hover .o::after,.tile:hover .cap .open::after{transform:translate(2px,-2px)}

/* signature (top-left, links home). Optical size: 37×48 in the 98px landing header, 30×39 in the 64px header */
.xhdr{--sig-w:30px}.xhdr.land{--sig-w:37px}
.xhdr .sig{position:absolute;left:max(20px,2.4vw);top:50%;width:var(--sig-w);aspect-ratio:496/546;transform:translateY(-50%);color:var(--x-txt);transition:color .35s ease,opacity .2s;display:block;border-radius:6px}
.xhdr .sig svg{display:block;width:100%;height:100%;overflow:visible;stroke-width:18}
.xhdr.land .sig svg{stroke-width:17}
.xhdr .sig:focus-visible{outline:2px solid var(--x-acc);outline-offset:4px}
/* pen stroke: each path draws in order (pathLength=1) */
.xhdr .sig path{stroke-dasharray:1;stroke-dashoffset:0}
.xhdr .sig.draw path{animation:sigdraw .5s cubic-bezier(.45,.05,.35,1) both;animation-delay:calc(.2s + var(--i) * .15s)}
.xhdr .sig.redraw path{animation:sigdraw .4s cubic-bezier(.45,.05,.35,1) both;animation-delay:calc(var(--i) * .09s)}
@keyframes sigdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:820px){.xhdr .sig{left:14px}.xhdr .gnav{left:calc(14px + var(--sig-w) + 10px)}}
@media(prefers-reduced-motion:reduce){.xhdr .sig path{animation:none!important}}

/* ---- global motion control: one fixed pill, bottom-right, same place on every page (WCAG 2.2.2) ---- */
.mo{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:900;box-sizing:border-box;height:44px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:22px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:#1B1F1D;font:600 13px/1 "Figtree",system-ui,sans-serif;letter-spacing:.01em;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.16);transition:background .2s,box-shadow .2s}
.mo:hover{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 10px 28px rgba(0,0,0,.2)}
.mo:focus-visible{outline:2px solid #0B5BE5;outline-offset:3px}
.mo svg{flex:none;fill:currentColor}
.mo .i-pl{display:none}.mo.is-paused .i-pa{display:none}.mo.is-paused .i-pl{display:block}
.mo .lb{display:block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .2s cubic-bezier(.22,1,.36,1),opacity .12s}
.mo .lb span{display:block;padding-left:9px}
.mo.open .lb,.mo:hover .lb,.mo:focus-visible .lb{max-width:140px;opacity:1}
@media (prefers-reduced-motion:reduce){.mo,.mo .lb{transition:none}}
@media print{.mo{display:none}}
/* keep keyboard focus from hiding behind the fixed button (WCAG 2.4.11) */
html{scroll-padding-bottom:72px}

/* breadcrumbs sit on the page bare (no pill), same everywhere; the section nav keeps its glass pill */
.xhdr .crumbs{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}

/* ---- Lab article column (one narrow centred column, text and media share it) ---- */
main.lab{max-width:672px;margin:0 auto;padding:157px 16px 56px}
main.lab .yr{margin:0;font:700 16px/1 "Figtree",system-ui,sans-serif;letter-spacing:.5px;color:var(--pink,#D93790)}
main.lab .top{display:block;margin-top:14px}
main.lab h1{margin:0;max-width:none;font:800 clamp(38px,8vw,56px)/1.05 "Figtree",system-ui,sans-serif;letter-spacing:-.03em;text-wrap:balance;color:var(--green,#003A2D)}
main.lab .sum{max-width:none;margin:16px 0 0;padding:0;text-align:left;font:400 clamp(18px,2.6vw,20px)/1.4 "Instrument Sans",system-ui,sans-serif;color:inherit}
main.lab .sum p{margin:0;font:inherit}
main.lab .sec p,main.lab .sec>ul,main.lab p.lab-p{max-width:none}
.lab-pager{max-width:672px;margin:0 auto;padding:0 16px 96px;font-family:"Figtree",system-ui,sans-serif}
.lab-pager nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);padding-top:24px}
.lab-pager a{display:grid;gap:6px;min-width:0;padding:4px 0;color:inherit;text-decoration:none}
.lab-pager a.next{text-align:right}
.lab-pager a span{font:500 13px/1 "Instrument Sans",system-ui,sans-serif;opacity:.65}
.lab-pager a b{font:700 18px/1.3 "Figtree",system-ui,sans-serif;letter-spacing:-.01em}
.lab-pager a:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lab-pager a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
/* Case studies: same pager, aligned to the 960px content column; colours follow the page (currentColor), so it inverts on dark pages */
.lab-pager.cs{max-width:960px;padding:72px max(20px,calc((100% - 960px)/2)) 80px;box-sizing:content-box;max-width:none;width:auto}
.lab-pager.cs nav{max-width:960px;margin:0 auto}
@media(max-width:600px){.lab-pager.cs nav{grid-template-columns:1fr}.lab-pager.cs a.next{text-align:left}}
/* phones: the motion toggle is a small icon-only circle that never expands over content */
@media(max-width:700px){
  .mo{height:40px;min-width:40px;width:40px;padding:0;border-radius:20px;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.82);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.14)}
  .mo .lb,.mo.open .lb,.mo:hover .lb{display:none}
}