/* ---- "Expand in place": Selected Research + Conceptual Studies ----
   The project opens as a centred panel over the page; the page behind turns to frosted glass.
   Panel: slim frosted top bar (plain X top left, auto-close countdown + pause top centre) over an inner scroller.
   Triangular prev/next tabs sit on the panel's outer edges with the neighbouring project's name. */
.xp{--pt:clamp(4.5rem,13vh,7.5rem);--pb:clamp(1.25rem,4vh,2.5rem);--pw:min(62.5rem,calc(100vw - 2 * max(15.5vw,4.75rem)));--bar:4rem;
  --aw:1.875rem;--ah:10.5rem;
  position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none;transition:visibility 0s .5s}
.xp.is-open{visibility:visible;pointer-events:auto;transition:none}
html.xp-lock,html.xp-lock body{overflow:hidden}
html.xp-lock .mini{opacity:0;pointer-events:none}
/* frosted page behind */
.xp-veil{position:absolute;inset:0;background:rgba(250,250,248,.55);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  opacity:0;transition:opacity .45s ease-out}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.xp-veil{background:rgba(250,250,248,.9)}}
.xp.is-open .xp-veil{opacity:1}
/* the panel */
.xp-frame{position:absolute;left:50%;top:var(--pt);width:var(--pw);height:calc(100% - var(--pt) - var(--pb));transform:translateX(-50%);
  opacity:0;transition:opacity .2s ease}
.xp.is-shown .xp-frame{opacity:1}
.xp-panel{position:absolute;inset:0;overflow:hidden;background:#fcfcfa;border-radius:6px;
  box-shadow:0 46px 100px -56px rgba(17,17,17,.5),0 0 0 1px rgba(17,17,17,.05)}
.xp-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-top:var(--bar);outline:0}
.xp-bar{position:absolute;left:0;right:0;top:0;height:var(--bar);z-index:3;display:flex;align-items:center;justify-content:center;
  background:rgba(252,252,250,.8);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid rgba(17,17,17,.06)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.xp-bar{background:rgba(252,252,250,.97)}}
/* the plain X: no box, no background, no border, no shadow; 48px hit area, pinned in the bar */
.xp-x-btn{position:absolute;left:.5rem;top:50%;width:3rem;height:3rem;margin-top:-1.5rem;display:grid;place-items:center;
  border:0;padding:0;border-radius:0;background:none;box-shadow:none;color:#111111;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
.xp-x-btn svg{width:1.6rem;height:1.6rem;display:block;overflow:visible;transition:transform .45s var(--ease-2),opacity .25s ease}
@media (hover:hover){.xp-x-btn:hover svg{transform:rotate(90deg);opacity:.62}}
.xp-x-btn:active svg{opacity:.5}
.xp-x-btn:focus{outline:none}
.xp-x-btn:focus-visible svg{opacity:.62;transform:rotate(90deg)}
/* auto close: #111 circle with the seconds left, and a pause / play toggle */
.xp-timer{display:flex;align-items:center;gap:.625rem}
.xp-count{width:2rem;height:2rem;border-radius:50%;background:#111111;color:#fcfcfa;display:grid;place-items:center;
  font:500 .875rem/1 Montserrat,system-ui,sans-serif;font-variant-numeric:tabular-nums;transition:transform .3s var(--ease-2),opacity .3s ease}
.xp-count.bump{transform:scale(.86)}
.xp-timer.is-paused .xp-count{opacity:.45}
.xp-pause{position:relative;width:2rem;height:2rem;border-radius:50%;border:1.5px solid #111111;background:transparent;color:#111111;padding:0;
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,color .2s ease}
.xp-pause::before{content:"";position:absolute;inset:-.5rem;border-radius:50%}
.xp-pause svg{width:.75rem;height:.75rem;display:block}
.xp-pause .i-play{display:none;margin-left:1px}
.xp-timer.is-paused .xp-pause .i-pause{display:none}
.xp-timer.is-paused .xp-pause .i-play{display:block}
@media (hover:hover){.xp-pause:hover{background:#111111;color:#fcfcfa}}
.xp-pause:focus{outline:none}
.xp-pause:focus-visible{box-shadow:0 0 0 3px rgba(17,17,17,.18)}
/* prev / next: slim #111 tabs flush against the panel's outer edges, a small chevron at the top pointing outward and the
   neighbour's name in small caps written vertically; centred on the viewport (the frame starts at --pt), never scrolling */
.xp-arrow{position:absolute;top:calc(50vh - var(--pt));width:var(--aw);height:var(--ah);transform:translateY(-50%);background:#111111;color:rgba(252,252,250,.86);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.55rem;padding:.7rem 0 .8rem;box-sizing:border-box;text-decoration:none;
  opacity:0;transition:opacity .35s ease .12s,transform .3s var(--ease-2),background-color .2s ease}
.xp.is-shown .xp-arrow{opacity:1}
.xp-prev{right:100%;border-radius:4px 0 0 4px}
.xp-next{left:100%;border-radius:0 4px 4px 0}
.xp-chev{flex:none;width:.5rem;height:.75rem;display:block;color:#fcfcfa}
.xp-arrow-t{flex:1 1 auto;min-height:0;writing-mode:vertical-rl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:500 .56rem/1 Montserrat,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.xp-prev .xp-arrow-t{transform:rotate(180deg)}
@media (hover:hover){.xp-prev:hover{transform:translate(-4px,-50%)}.xp-next:hover{transform:translate(4px,-50%)}.xp-arrow:hover{color:#fcfcfa}}
.xp-arrow:focus{outline:none}
.xp-arrow:focus-visible{background:#2a2a28;color:#fcfcfa}
/* inside the panel */
.xp-stage{padding-bottom:clamp(4rem,7vw,6rem)}
.xp-stage>*{opacity:0;transform:translateY(1.2rem);transition:opacity .5s ease,transform .8s var(--ease-2)}
.xp-stage>.p-hero{transform:none;transition:opacity .4s ease}
.xp-stage.is-hero>.p-hero{opacity:1}
.xp-stage.is-in>*{opacity:1;transform:none}
.xp-stage.is-in>:nth-child(2){transition-delay:.05s}.xp-stage.is-in>:nth-child(3){transition-delay:.12s}
.xp-stage.is-in>:nth-child(4){transition-delay:.18s}.xp-stage.is-in>:nth-child(5){transition-delay:.24s}
/* project-to-project: a crossfade */
.xp-stage.is-swapping{transition:opacity .32s ease}
.xp-stage.out-l,.xp-stage.out-r,.xp-stage.from-l,.xp-stage.from-r{opacity:0}
.xp-stage.from-l,.xp-stage.from-r{transition:none}
.xp-stage.detail{padding-top:var(--m)}
.xp-stage .p-hero{margin-top:0;height:min(62vh,38rem)}
/* the card that grows into the panel (and back) */
.xp-fly{position:fixed;z-index:80;overflow:hidden;pointer-events:none;background:#fcfcfa;border-radius:6px;contain:layout paint;
  box-shadow:0 46px 100px -56px rgba(17,17,17,.5)}
.xp-fly img{display:block;width:100%;height:100%;object-fit:cover}
[data-xp].is-flying .reveal{visibility:hidden}
.xp-lb{z-index:9000}
@media (max-width:760px){
  .xp{--pt:3.75rem;--pb:.75rem;--pw:calc(100vw - 1.5rem);--bar:3.5rem;--aw:1.375rem;--ah:9.5rem}
  .xp-x-btn{left:.25rem}
  .xp-x-btn svg{width:1.45rem;height:1.45rem}
  .xp-count,.xp-pause{width:1.875rem;height:1.875rem}
  /* no room outside the panel on a phone: small tabs straddle the edge (half outside, over the panel's own margin) */
  .xp-prev{right:auto;left:-.6875rem}
  .xp-next{left:auto;right:-.6875rem}
  .xp-arrow{padding:.55rem 0 .6rem;gap:.4rem}
  .xp-chev{width:.4375rem;height:.625rem}
  .xp-arrow-t{font-size:.5rem;letter-spacing:.1em}
  .xp-stage{padding-bottom:4rem}
  .xp-stage .p-hero{height:56vh}
}
@media (prefers-reduced-motion:reduce){
  .xp,.xp.is-open,.xp-veil,.xp-frame,.xp-stage,.xp-stage>*,.xp-arrow,.xp-count,.xp-x-btn svg{transition:none!important}
  .xp-stage>*{transform:none!important}
}
/* the site cursor: dark over the light bar (the X used to sit on a dark square), light over the dark edge tabs */
@media (hover:hover) and (pointer:fine){
  .xp .xp-x-btn,.xp .xp-pause{cursor:url(../img/cursor/w-dark-link.png) 16 16,pointer;cursor:-webkit-image-set(url(../img/cursor/w-dark-link.png) 1x,url(../img/cursor/w-dark-link@2x.png) 2x,url(../img/cursor/w-dark-link@3x.png) 3x) 16 16,pointer;cursor:image-set(url(../img/cursor/w-dark-link.png) 1x,url(../img/cursor/w-dark-link@2x.png) 2x,url(../img/cursor/w-dark-link@3x.png) 3x) 16 16,pointer}
  .xp .xp-arrow{cursor:url(../img/cursor/w-light-link.png) 16 16,pointer;cursor:-webkit-image-set(url(../img/cursor/w-light-link.png) 1x,url(../img/cursor/w-light-link@2x.png) 2x,url(../img/cursor/w-light-link@3x.png) 3x) 16 16,pointer;cursor:image-set(url(../img/cursor/w-light-link.png) 1x,url(../img/cursor/w-light-link@2x.png) 2x,url(../img/cursor/w-light-link@3x.png) 3x) 16 16,pointer}
  .xp-veil{cursor:url(../img/cursor/w-dark-link.png) 16 16,pointer;cursor:-webkit-image-set(url(../img/cursor/w-dark-link.png) 1x,url(../img/cursor/w-dark-link@2x.png) 2x,url(../img/cursor/w-dark-link@3x.png) 3x) 16 16,pointer;cursor:image-set(url(../img/cursor/w-dark-link.png) 1x,url(../img/cursor/w-dark-link@2x.png) 2x,url(../img/cursor/w-dark-link@3x.png) 3x) 16 16,pointer}
}
/* images inside the panel are NEVER cropped: native aspect, full width, height from the image itself.
   Anything taller than the panel's visible height is capped and shown whole (object-fit: contain).
   Overrides the standalone page styles merged into the panel (fixed-height hero, aspect-ratio boxes, object-fit: cover). */
.xp-stage .p-hero{height:auto!important;overflow:visible!important}
.xp-stage .p-hero .gl,.xp-stage .p-hero .reveal,.xp-stage .cs-figure .reveal,.xp-stage .cs-figure .gl,
.xp-stage figure,.xp-stage figure .gl,.xp-stage .gl,.xp-stage picture{height:auto!important;max-height:none!important;aspect-ratio:auto!important}
.xp-stage .p-hero,.xp-stage .p-hero .gl,.xp-stage .p-hero .reveal,.xp-stage .cs-figure .reveal,.xp-stage .cs-figure .gl,.xp-stage figure .gl{background:none!important}
/* width:auto + max-width:100% + max-height keeps the box exactly the image's own shape (full width when it fits,
   centred and narrower when a tall image hits the height cap); object-fit: contain is the safety net */
.xp-stage img{display:block;width:auto!important;max-width:100%!important;height:auto!important;aspect-ratio:auto!important;margin-left:auto;margin-right:auto;
  max-height:calc(100vh - var(--pt) - var(--pb) - var(--bar) - 2 * var(--m) - 1rem)!important;object-fit:contain!important;object-position:50% 50%!important;
  transform:none!important}