/* ==========================================================================
   Slipstream. Tokens
   Colour law: mint = the sparrow and what it does. Amber = the visitor and
   what they get. Agency facts get neither. Noise is grey. Mint and amber
   are never placed on each other.
   ========================================================================== */
:root{
  /* sky ramp, one stop per beat */
  --sky-1:#060807; --sky-2:#07120E; --sky-3:#0A1D17; --sky-4:#0D2A21; --sky-5:#10382C;
  --sky-6:#124636; --sky-7:#0F3329; --sky-8:#0B2019; --sky-9:#0A1712; --sky-foot:#050706;
  /* meaning */
  --mint:#46DE9F; --mint-hi:#5FE8AD; --amber:#FF6A1A;
  /* neutrals and supports */
  --text:#F1F4F0; --text-2:#B4C4BB; --ink:#05130C;
  --line:rgba(241,244,240,.12); --line-2:rgba(241,244,240,.26);
  --noise:#3A423E; --noise-text:#8B9590; --teal:#0E8F8A; --haze:#B8FFE0;
  --amber-rgb:255,106,26;
  /* type */
  --f-display:"Hubot Sans","Helvetica Neue",Arial,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fs-h1:clamp(40px,min(6.4vw,11vh),96px);
  --fs-h2:clamp(34px,4.8vw,76px);
  --fs-close:clamp(48px,8vw,128px);
  --fs-manifesto:clamp(30px,4.2vw,66px);
  --fs-result:clamp(36px,5vw,72px);
  --fs-peak:clamp(72px,11vw,168px);
  --fs-says:clamp(20px,2.2vw,32px);
  --fs-h3:clamp(24px,2.5vw,38px);
  --fs-body:18px;
  --fs-mono:12px;
  --fs-tag:11px;
  /* space */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:104px; --s-7:168px;
  --pad:clamp(20px,5vw,80px);
  --max:1280px;
  --bar-h:64px;
  --bar-bg:#050706;
  --band:clamp(160px,23svh,240px);              /* the ground band under the horizon, beats 1 and 9 */
  /* birds: the sparrow, its reserved perch zone, the visitor's relative size */
  --sparrow-w:200px; --perch-w:240px; --perch-h:150px;
  --you-k:.4; --you-k-peak:.6;
  --ease:cubic-bezier(.2,.8,.25,1);
}
@media (max-width:1100px){
  :root{ --sparrow-w:150px; --perch-w:180px; --perch-h:112px; }
}
@media (max-width:900px){
  :root{
    --fs-body:16px; --bar-h:56px;
    --s-5:48px; --s-6:72px; --s-7:104px;
    --sparrow-w:64px; --perch-w:80px; --perch-h:56px; --you-k:.47;
    --band:clamp(140px,21svh,190px);
  }
}
@media (min-width:600px) and (max-width:900px){
  :root{ --sparrow-w:96px; --perch-w:120px; --perch-h:80px; }
}
@media (max-width:900px) and (max-height:700px){
  :root{ --fs-h1:34px; --band:clamp(104px,18svh,140px); }
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + 16px);
  background:var(--sky-1);
}
body{
  margin:0; background:var(--sky-1); color:var(--text);
  font:400 var(--fs-body)/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ol,ul,dl,dt,dd,figure,blockquote{margin:0}
ol,ul{padding:0; list-style:none}
a{color:inherit}
svg{display:block}
button,input{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--text); outline-offset:2px}
::selection{background:var(--text); color:var(--ink)}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.defs{position:absolute; width:0; height:0; overflow:hidden}
.skip{position:fixed; left:var(--pad); top:8px; z-index:60; padding:10px 16px; background:var(--text); color:var(--ink); border-radius:999px; font-weight:500; text-decoration:none; transform:translateY(-200%)}
.skip:focus-visible{transform:none}
[tabindex="-1"]:focus{outline:none}

/* progressive enhancement switches (see the contract in the script element) */
html:not(.js) .js-only{display:none !important}
html.flight .still{display:none}

.wrap{width:100%; max-width:calc(var(--max) + 2 * var(--pad)); margin-inline:auto; padding-inline:var(--pad)}

/* type */
h1,h2,h3{font-family:var(--f-display); font-weight:500; font-optical-sizing:auto; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:var(--fs-h1); line-height:.98; max-width:8.5em}   /* about 14ch at display size; em keeps the fallback face on the same lines */
h2{font-size:var(--fs-h2); line-height:1.02; max-width:15ch}
h3{font-size:var(--fs-h3); line-height:1.1; letter-spacing:-.015em}
.lines{max-width:none}
.lead{color:var(--text-2); max-width:34em; text-wrap:pretty}
.label,.altline{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; color:var(--text-2)}
.label{text-transform:uppercase}
.altline{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px}
.alt{text-transform:uppercase; white-space:nowrap; color:var(--text)}
.alt::before{content:""; display:inline-block; width:28px; height:1px; margin-right:12px; vertical-align:middle; background:var(--line-2)}
.kick{letter-spacing:.04em}

/* the sparrow's nine lines */
.says{font:italic 400 var(--fs-says)/1.22 var(--f-display); font-optical-sizing:auto; letter-spacing:-.01em; color:var(--mint); max-width:13em; text-wrap:balance}

/* links and buttons */
.tlink{display:inline-flex; align-items:center; gap:10px; font-weight:500; text-decoration:underline; text-decoration-color:var(--line-2); text-decoration-thickness:1px; text-underline-offset:.35em; transition:text-decoration-color .2s}
.tlink:hover{text-decoration-color:currentColor}
.tlink svg{width:14px; height:14px; flex:none; transition:transform .25s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border:1.5px solid transparent; border-radius:999px; font:500 16px/1 var(--f-body); text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color .2s, border-color .2s, color .2s}
.btn--mint{background:var(--mint); color:var(--ink)}
.btn--mint:hover{background:var(--mint-hi)}
.btn--amber{background:transparent; border-color:var(--amber); color:var(--amber)}
.btn--amber:hover{background:rgba(var(--amber-rgb),.12)}
.btn--xl{min-height:64px; padding:0 40px; font-size:18px}

/* ==========================================================================
   Chrome: the one top bar
   ========================================================================== */
.bar{position:fixed; inset:0 0 auto 0; z-index:40; height:var(--bar-h); display:flex; align-items:center; gap:var(--s-3); padding-inline:var(--pad); background:var(--bar-bg); border-bottom:1px solid var(--line)}
.bar-mark{flex:none; display:flex; align-items:center; min-height:44px}
.wm{display:block; height:26px; width:auto; aspect-ratio:688.57/111.03}
.wm-a{fill:var(--text)}
.wm-b{fill:var(--mint)}
.bar-nav{display:flex; align-items:center; gap:clamp(20px,2.6vw,40px); margin-inline:auto}
.bar-nav a{display:flex; align-items:center; min-height:44px; font:500 15px/1 var(--f-body); text-decoration:none; color:var(--text-2); transition:color .2s}
.bar-nav a:hover,.bar-nav a:focus-visible{color:var(--text)}
.bar-flight{display:flex; align-items:center; min-width:0}
.profile{display:none; position:relative; flex:none; width:clamp(200px,24vw,300px); height:28px}
.profile-curve{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.profile-curve path{fill:none; stroke:var(--line-2); stroke-width:1px; vector-effect:non-scaling-stroke}
.profile ol{position:absolute; inset:0; display:grid; grid-template-columns:repeat(9,1fr)}
.profile a{position:relative; display:block; height:100%; text-decoration:none}
.profile a::before{content:""; position:absolute; left:50%; top:var(--y); width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:var(--text-2); transition:transform .2s var(--ease), background-color .2s}
.profile a:hover::before,.profile a:focus-visible::before,.profile a[aria-current]::before{background:var(--text); transform:scale(1.7)}
.profile-label{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); padding:5px 9px; border:1px solid var(--line-2); background:var(--sky-foot); font:400 var(--fs-tag)/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s}
.profile a:hover .profile-label,.profile a:focus-visible .profile-label{opacity:1}
.profile-dot{position:absolute; left:var(--px); top:var(--py,85.7%); width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; pointer-events:none}
.profile-dot--you{--px:3%; background:var(--amber)}
.profile-dot--sparrow{--px:8%; background:var(--mint)}
.readout,.bar-clock{font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); white-space:nowrap}
.readout{width:23em}
.bar-cta{flex:none; min-height:40px; padding:0 20px; font-size:15px}
.bar-cta.is-quiet{background:transparent; border-color:var(--mint); color:var(--mint)}
.bar-cta.is-quiet:hover{background:rgba(70,222,159,.12)}
.stages{display:none}
.stages summary{display:flex; align-items:center; gap:8px; min-width:0; min-height:44px; padding:0 14px; overflow:hidden; border:1px solid var(--line-2); border-radius:999px; font:400 var(--fs-tag)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; cursor:pointer; list-style:none}
.stages summary::-webkit-details-marker{display:none}
.stages summary::after{content:""; width:6px; height:6px; margin-top:-3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg)}
.stages[open] summary::after{margin-top:3px; transform:rotate(-135deg)}
.stages ol{position:absolute; top:100%; left:0; right:0; padding:4px var(--pad) 20px; background:var(--sky-foot); border-bottom:1px solid var(--line-2)}
.stages li a{display:flex; justify-content:space-between; align-items:center; gap:var(--s-2); min-height:44px; border-bottom:1px solid var(--line); font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
.stages li a span:last-child{color:var(--text-2)}
@media (max-width:1380px){
  .bar-flight{display:none}
}
@media (max-width:1180px){
  .bar-clock{display:none}
}
@media (max-width:900px){
  .bar{gap:12px}
  .wm{height:21px}
  .bar-nav{display:none}
  .stages{display:block; min-width:0; margin-left:auto}
  .bar-cta{min-height:44px; padding:0 16px; font-size:14px}
}
@media (max-width:420px){
  .bar{gap:10px}
  .stages summary{gap:6px; padding:0 12px}
  .bar-cta{padding:0 12px}
}


/* ==========================================================================
   Footer
   ========================================================================== */
.foot{position:relative; padding:var(--s-6) 0 var(--s-4); background:var(--sky-foot)}
.foot-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-4)}
.foot-mark{display:block}
.lockup{display:block; width:clamp(220px,24vw,340px); height:auto; aspect-ratio:688.57/111.03}
.foot-tag{font:400 clamp(26px,3.2vw,46px)/1.1 var(--f-display); font-optical-sizing:auto; letter-spacing:-.02em}
.foot-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:var(--s-4); margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--line)}
.foot-cols ul{display:grid; gap:8px; margin-top:var(--s-2)}
.foot-cols li{color:var(--text-2)}
.foot-cols a{color:var(--text); text-decoration:none}
.foot-cols a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.3em}
.foot-cols [data-clock]{font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em}
.foot-base{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:var(--s-5); padding-top:var(--s-3); border-top:1px solid var(--line); font-size:14px; color:var(--text-2)}
.foot-base ul{display:flex; flex-wrap:wrap; gap:8px 24px}
.foot-base a{color:var(--text-2)}
.foot-base a:hover{color:var(--text)}
.totop{display:inline-flex; align-items:center; gap:10px; margin-left:auto; text-decoration:none}
.totop svg{width:24px; height:auto; aspect-ratio:760/470; overflow:visible; transition:transform .3s var(--ease)}
.totop:hover svg{transform:translateY(-8px)}

/* ==========================================================================
   Project page. Same tokens, bar, buttons and footer as the home page; a
   case study is told with the client's own photos, words and facts.
   ========================================================================== */
main{--max:max(1280px,min(100vw - 2 * var(--pad),1760px))}
.bar-nav a[aria-current]{color:var(--text)}
.stages li a span:last-child{color:inherit}
img{display:block; max-width:100%; height:auto}
.sec{position:relative; padding-block:clamp(80px,12vh,150px); background:linear-gradient(180deg,var(--from),var(--to) 62%) var(--to)}
.sec > .wrap{position:relative; z-index:1}
.sec-head{display:grid; gap:var(--s-3); justify-items:start}
.sec-head h2{max-width:16ch; font-size:clamp(38px,4.2vw,104px)}
.card{position:relative; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#11281F,#0C1D17); transition:border-color .3s, transform .25s var(--ease)}
.btn--lg{min-height:clamp(52px,5.8svh,76px); padding:0 clamp(26px,3svh,40px); font-size:clamp(16px,1.85svh,22px)}
.btn--line{border-color:var(--line-2); color:var(--text)}
.btn--line:hover{border-color:var(--text)}
.btn svg{width:14px; height:14px; flex:none; transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.spar{fill:var(--mint)}
.you-fill{fill:var(--amber)}
.bobber{animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{translate:0 -7px}}
.bird{display:block; width:100%; height:auto; aspect-ratio:760/470; overflow:visible; fill:var(--mint)}
.hb-flap{opacity:0; animation:hb-flap 3.8s steps(1,end) 2.2s infinite}
.hb-rest{animation:hb-rest 3.8s steps(1,end) 2.2s infinite}
.hb-wing{transform:translate(1686px,302px) rotate(38deg) scale(1,1) rotate(-38deg) translate(-1686px,-302px); animation:hb-wing 3.8s ease-in-out 2.2s infinite}
@keyframes hb-rest{0%{opacity:0} 17%,100%{opacity:1}}
@keyframes hb-flap{0%{opacity:1} 17%,100%{opacity:0}}
@keyframes hb-wing{0%,8%,16%,100%{transform:translate(1686px,302px) rotate(38deg) scale(1,1) rotate(-38deg) translate(-1686px,-302px)} 4%,12%{transform:translate(1686px,302px) rotate(38deg) scale(1,.35) rotate(-38deg) translate(-1686px,-302px)}}
.swoop{position:relative; animation:swoop 1.15s cubic-bezier(.16,.7,.24,1) 1s both}
@keyframes swoop{
  from{opacity:0; transform:translate(46%,-34%) scale(.72) rotate(11deg)}
  28%{opacity:1}
  62%{transform:translate(0,4%) scale(1) rotate(-3.2deg)}
  to{opacity:1; transform:none}
}
.stars{position:absolute; inset:0 0 30% 0; pointer-events:none; opacity:.9;
  background-image:radial-gradient(circle at 7% 22%,rgba(241,244,240,.55) 0 1px,transparent 1.6px),radial-gradient(circle at 18% 63%,rgba(241,244,240,.3) 0 1px,transparent 1.6px),radial-gradient(circle at 29% 9%,rgba(241,244,240,.4) 0 1px,transparent 1.6px),radial-gradient(circle at 47% 31%,rgba(241,244,240,.35) 0 1px,transparent 1.6px),radial-gradient(circle at 56% 12%,rgba(241,244,240,.6) 0 1.2px,transparent 1.8px),radial-gradient(circle at 68% 26%,rgba(241,244,240,.45) 0 1px,transparent 1.6px),radial-gradient(circle at 81% 14%,rgba(241,244,240,.5) 0 1.2px,transparent 1.8px),radial-gradient(circle at 92% 29%,rgba(241,244,240,.55) 0 1px,transparent 1.6px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent); mask-image:linear-gradient(#000 55%,transparent)}

/* hero: the project in one view. Title and people on the left, the client's own photo on the right, the facts underneath */
.pj-hero{position:relative; padding:calc(var(--bar-h) + clamp(28px,6svh,88px)) 0 clamp(48px,8svh,112px); overflow:hidden; background:var(--sky-1); --fs-h1:clamp(34px,min(3.8vw,7.2svh),88px)}
.pj-hero h1{max-width:11em}
.pj-top{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); column-gap:var(--s-5); align-items:center}
.pj-text{display:grid; gap:clamp(14px,2.4svh,32px); justify-items:start}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:0 .7em; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.crumbs a{text-decoration:none}
.crumbs a:hover,.crumbs [aria-current]{color:var(--text)}
.pj-subtitle{max-width:30em; font-size:clamp(19px,1.5vw,26px); font-weight:500; line-height:1.4; text-wrap:pretty}
.pj-intro{max-width:36em; font-size:clamp(17px,1.25vw,24px); color:var(--text-2); text-wrap:pretty}
/* the intro is written in the editor: paragraphs, emphasis, links and lists */
.pj-intro > * + *{margin-top:.75em}
.pj-intro strong,.pj-intro b{font-weight:500; color:var(--text)}
.pj-intro a{color:var(--mint); text-decoration-thickness:1px; text-underline-offset:.25em}
.pj-intro ul,.pj-intro ol{padding-left:1.3em; list-style:disc}
.pj-intro ol{list-style:decimal}
.pj-intro li::marker{color:var(--mint)}
.pj-intro li + li{margin-top:.3em}
.pj-by{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; color:var(--text-2)}
.pj-by strong{font-weight:500; color:var(--text)}
.avatars{display:flex; flex:none}
.avatars img{width:clamp(44px,3vw,60px); aspect-ratio:1; margin-left:-12px; border:2px solid var(--sky-1); border-radius:50%; object-fit:cover}
.avatars img:first-child{margin-left:0}
.pj-shot{position:relative; margin:clamp(40px,7vw,120px) 0 clamp(28px,4vw,64px)}
.pj-photo{overflow:hidden; border:1px solid var(--line-2); border-radius:22px}
.pj-photo img{width:100%; aspect-ratio:3/2; object-fit:cover}
.pj-logo{position:absolute; left:clamp(-28px,-2vw,-12px); bottom:clamp(-44px,-3vw,-20px); width:clamp(88px,9vw,160px); border-radius:50%; background:#fff; box-shadow:0 18px 50px rgba(0,0,0,.5)}
.pj-bird{position:absolute; right:-6%; top:-21%; width:40%; pointer-events:none}
.facts{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 var(--s-3); margin:clamp(48px,8svh,104px) 0 0; border-top:1px solid var(--line-2)}
.facts > div{padding-top:clamp(16px,1.6vw,26px)}
.facts dt{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.facts dd{margin:6px 0 0; font:500 clamp(20px,1.6vw,32px)/1.15 var(--f-display); letter-spacing:-.01em}
.facts a{text-decoration-color:var(--line-2); text-decoration-thickness:1px; text-underline-offset:.3em}
.facts a:hover{text-decoration-color:currentColor}

/* the client's own words */
.pj-quote{--from:var(--sky-1); --to:var(--sky-2)}
.quote{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,3vw,64px); align-items:start; padding:clamp(28px,3.4vw,72px)}
.quote-face{width:clamp(88px,9vw,168px); aspect-ratio:1; border-radius:50%; object-fit:cover}
.quote blockquote{margin:0}
.quote blockquote p{font:400 clamp(26px,2.7vw,56px)/1.14 var(--f-display); letter-spacing:-.02em; text-wrap:balance}
.quote blockquote p::before{content:"“"; color:var(--amber)}
.quote blockquote p::after{content:"”"; color:var(--amber)}
.quote footer{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin-top:var(--s-3); font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.quote footer strong{font-weight:400; color:var(--text)}

/* about the client */
.pj-client{--from:var(--sky-2); --to:var(--sky-3)}
.client{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:var(--s-5); align-items:start}
.client-body{display:grid; gap:var(--s-3); justify-items:start}
.client-body p{max-width:44em; font-size:clamp(18px,1.25vw,24px); color:var(--text-2)}
.client-links{display:flex; flex-wrap:wrap; gap:12px 28px}

/* the story: three chapters, the sparrow flying down the line beside them */
.pj-story{--from:var(--sky-3); --to:var(--sky-5)}
.story{margin-top:clamp(40px,6vh,88px)}
.chapters{display:grid; gap:clamp(14px,1.2vw,22px)}
.chapter{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(20px,2.6vw,56px); align-items:center; padding:clamp(20px,2vw,40px)}
.chapter-n{font:400 clamp(36px,3.4vw,72px)/.9 var(--f-display); color:var(--text-2); transition:color .4s}
.chapter h3{margin-top:clamp(10px,1.4vh,20px); font-size:clamp(28px,2.6vw,56px)}
.chapter-text > p:last-of-type{margin-top:14px; max-width:40em; font-size:clamp(17px,1.15vw,22px); color:var(--text-2)}
.chapter figure{margin:0; overflow:hidden; border-radius:14px}
.chapter figure img{width:100%; aspect-ratio:4/3; object-fit:cover}
.chapter.is-lit{border-color:rgba(70,222,159,.5)}
.chapter.is-lit .chapter-n{color:var(--mint)}
.wins{display:grid; gap:12px}
.wins li{display:grid; grid-template-columns:clamp(84px,7vw,140px) minmax(0,1fr); align-items:center; gap:16px; padding:clamp(14px,1.3vw,24px); border:1px solid var(--line); border-radius:14px}
.wins strong{font:500 clamp(40px,3.6vw,76px)/1 var(--f-display); letter-spacing:-.02em; color:var(--amber)}
.wins span{font-size:clamp(16px,1.05vw,20px); color:var(--text-2)}
.service-used{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; margin-top:clamp(14px,1.2vw,22px); padding:clamp(20px,2vw,40px)}
.service-used p{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.service-used h3{margin-top:6px; font-size:clamp(26px,2.2vw,46px)}
.service-used a::after{content:""; position:absolute; inset:0}

/* gallery: the client's own photos, uncropped */
.pj-gallery{--from:var(--sky-5); --to:var(--sky-6)}
.gallery{columns:3; column-gap:clamp(14px,1.2vw,22px); margin-top:clamp(40px,6vh,88px)}
.gallery figure{position:relative; margin:0 0 clamp(14px,1.2vw,22px); overflow:hidden; border:1px solid var(--line); border-radius:16px; break-inside:avoid; background:#0C1D17}
.gallery .zoom{position:relative; overflow:hidden}
.gallery .photo{position:relative; z-index:1; width:100%; transition:transform .6s var(--ease), opacity .7s var(--ease), filter .9s var(--ease)}
.gallery figure:hover .photo{transform:scale(1.04)}
/* while a photo loads: its small version, blurred, in the space the photo will take; then the photo fades in sharp */
.gallery .ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(18px) saturate(1.1); transform:scale(1.12); transition:opacity .9s var(--ease)}
html.js .gallery .photo:not(.is-loaded){opacity:0; filter:blur(10px)}
html.js .gallery .photo.is-loaded + .ph{opacity:0}
/* a photo whose size is unknown gets a shimmer until it arrives */
html.js .gallery .is-unsized .zoom:has(.photo:not(.is-loaded)){min-height:220px; background:linear-gradient(100deg,#0C1D17 30%,#13302A 50%,#0C1D17 70%) 0 0 / 300% 100%; animation:ph-shimmer 1.6s linear infinite}
@keyframes ph-shimmer{to{background-position:-150% 0}}

/* conclusion and the people behind it */
.pj-end{--from:var(--sky-6); --to:var(--sky-7)}
.end{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:var(--s-5); align-items:start}
.end > p{max-width:40em; font:400 clamp(22px,1.9vw,40px)/1.3 var(--f-display); letter-spacing:-.01em; text-wrap:pretty}
.pj-people{--from:var(--sky-7); --to:var(--sky-8)}
.people{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.2vw,22px); margin-top:clamp(40px,6vh,88px)}
.person{display:flex; align-items:center; gap:clamp(16px,1.6vw,28px); padding:clamp(18px,1.6vw,32px)}
.person img{width:clamp(72px,6vw,112px); flex:none; aspect-ratio:1; border-radius:50%; object-fit:cover}
.person h3{font-size:clamp(22px,1.7vw,34px)}
.person p{margin-top:4px; font-size:clamp(15px,1vw,19px); color:var(--text-2)}
.creds{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--s-3); margin:clamp(28px,4vh,56px) 0 0; border-top:1px solid var(--line-2)}
.creds > div{padding-top:clamp(16px,1.6vw,26px)}
.creds dt{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.creds dd{margin:6px 0 0; font-size:clamp(17px,1.15vw,22px)}
.creds a{text-decoration-color:var(--line-2); text-decoration-thickness:1px; text-underline-offset:.3em}

/* your turn */
.pj-cta{--from:var(--sky-8); --to:var(--sky-9); overflow:hidden}
.pj-cta::after{content:""; position:absolute; inset:auto 0 0 0; height:48%; background:linear-gradient(0deg,rgba(var(--amber-rgb),.26),rgba(var(--amber-rgb),.08) 42%,transparent); pointer-events:none}
.cta{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:var(--s-4); align-items:center}
.cta-text{display:grid; gap:var(--s-3); justify-items:start}
.cta h2{max-width:10em; font-size:clamp(44px,5.6vw,136px); line-height:.98}
.cta .lead{font-size:clamp(18px,1.25vw,26px)}
.cta-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3)}
.contact-line{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:var(--s-2); padding-top:var(--s-3); border-top:1px solid var(--line-2); font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em}
.contact-line span{color:var(--text-2)}
.cta-sky{display:grid; justify-items:center; gap:var(--s-2)}
.cta-pair{width:min(100%,620px); height:auto; overflow:visible}
.cta-pair text{font:400 19px/1 var(--f-mono); letter-spacing:.1em; fill:var(--ink)}

/* ==========================================================================
   Motion. Entrance on load, reveals on scroll. Switched off under
   prefers-reduced-motion at the end.
   ========================================================================== */
@keyframes rise{from{opacity:0; transform:translateY(34px)}}
.pj-text > *{animation:rise .85s var(--ease) both; animation-delay:calc(var(--n,0) * 110ms + .1s)}
.pj-text > :nth-child(2){--n:1}
.pj-text > :nth-child(3){--n:2}
.pj-text > :nth-child(4){--n:3}
.pj-text > :nth-child(5){--n:4}
.pj-text > :nth-child(6){--n:5}
.pj-photo{animation:photo-in 1.2s var(--ease) .3s both}
@keyframes photo-in{from{opacity:0; clip-path:inset(0 0 100% 0 round 22px); transform:translateY(40px)} to{opacity:1; clip-path:inset(0 0 0 0 round 22px); transform:none}}
.pj-photo img{animation:photo-zoom 1.8s var(--ease) .3s both}
@keyframes photo-zoom{from{transform:scale(1.32)}}
.pj-logo{animation:pop .7s var(--ease) 1.1s both}
@keyframes pop{from{opacity:0; transform:scale(.6)}}
.facts > div{animation:rise .7s var(--ease) both; animation-delay:calc(var(--n,0) * 90ms + .9s)}
.facts > :nth-child(2){--n:1}
.facts > :nth-child(3){--n:2}
.facts > :nth-child(4){--n:3}
html.js .rv{opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .3s; transition-delay:calc(var(--d,0) * 110ms)}
html.js .rv--side{transform:translateX(110px)}
html.js .rv.is-in{opacity:1; transform:none}


/* the sparrow rides the right edge of the screen for the whole page: it drops as you scroll, beats its wings
   while the page moves and glides when it stops */
.flight{display:none}
html.js .flight{display:block; position:fixed; z-index:35; top:calc(var(--bar-h) + 28px); bottom:28px; right:clamp(6px,1vw,24px); width:clamp(48px,3.6vw,76px); pointer-events:none}
.flight::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--line)}
.flight-fill{position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(180deg,rgba(70,222,159,0),var(--mint)); transform-origin:50% 0; transform:scaleY(var(--p,0))}
.flight-bird{position:absolute; left:0; top:0; width:100%; will-change:transform}
.flight .hb-rest,.flight .hb-flap,.flight .hb-wing{animation:none}
.flight .hb-flap{opacity:0}
.flight.is-flapping .hb-rest{opacity:0}
.flight.is-flapping .hb-flap{opacity:1}
.flight.is-flapping .hb-wing{animation:wing-beat .24s ease-in-out infinite alternate}
@keyframes wing-beat{to{transform:translate(1686px,302px) rotate(38deg) scale(1,.35) rotate(-38deg) translate(-1686px,-302px)}}
/* hero: the headline wipes in, a slow flock crosses under it */
.pj-text h1{animation:h1-in 1.15s var(--ease) .2s both}
@keyframes h1-in{from{opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(.3em)} to{opacity:1; clip-path:inset(-10% 0 -10% 0); transform:none}}
.avatars img{animation:pop .6s var(--ease) both; animation-delay:calc(var(--n,0) * 110ms + .8s)}
.avatars img:nth-child(2){--n:1}
.avatars img:nth-child(3){--n:2}
.flock{position:absolute; inset:auto 0 0 0; height:26%; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(transparent,#000 45%); mask-image:linear-gradient(transparent,#000 45%)}
.flock i{position:absolute; left:100%; top:var(--y); width:calc(26px * var(--s)); height:calc(16px * var(--s)); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1360 60 760 470'%3E%3Cg transform='translate(0,942) scale(0.1,-0.1)' fill='%2338443F'%3E%3Cpath d='M18370 8601 c0 -5 -28 -58 -61 -118 -269 -473 -584 -770 -1169 -1100 -254 -144 -608 -309 -880 -412 l-86 -33 -119 89 c-173 129 -365 262 -475 329 -204 124 -308 156 -505 155 -191 -1 -353 -43 -505 -132 -148 -86 -227 -174 -310 -344 -32 -66 -69 -130 -83 -143 -40 -38 -107 -52 -251 -53 -78 -1 -119 -4 -101 -8 69 -17 141 -68 235 -165 81 -85 157 -192 297 -421 506 -829 1002 -1319 1636 -1619 451 -214 944 -305 1487 -275 1030 57 1939 283 2920 724 259 117 592 277 586 282 -2 3 -26 -7 -53 -20 -227 -115 -599 -238 -872 -288 -294 -54 -789 -23 -1166 72 -293 75 -627 214 -844 353 -64 41 -234 169 -420 315 l-91 73 -68 -49 c-227 -165 -509 -275 -852 -332 -100 -17 -325 -28 -420 -22 -75 5 -62 7 100 13 122 4 223 13 295 27 450 86 745 232 1016 501 477 475 746 1211 785 2151 7 182 -3 459 -17 459 -5 0 -9 -4 -9 -9z'/%3E%3Cpath d='M20884 6029 c-338 -215 -1203 -616 -1544 -717 -193 -57 -260 -67 -445 -67 -142 1 -184 4 -255 23 -47 12 -96 24 -110 27 -60 14 328 -127 417 -151 119 -32 340 -44 432 -24 179 39 462 197 1026 573 285 190 514 345 530 359 19 17 -3 7 -51 -23z'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat; opacity:var(--o); animation:flock-drift var(--t) linear infinite; animation-delay:calc(var(--t) * var(--f) * -1)}
@keyframes flock-drift{to{transform:translateX(calc(-100vw - 120px))}}
/* photos drift a little against the scroll */
html.js [data-par]{transform:translateY(calc(var(--par,0) * 1%)) scale(1.16)}
/* cards: a soft light follows the pointer */
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(70,222,159,.11),transparent 62%); opacity:0; transition:opacity .35s; pointer-events:none}
.card:hover::after{opacity:1}
.card:hover{border-color:var(--line-2)}
.person:hover img{transform:scale(1.08) rotate(-3deg)}
.person img{transition:transform .4s var(--ease)}
/* the client's words light up as they scroll into view */
html.js .quote .w{opacity:.22; transition:opacity .35s}
html.js .quote .w.is-on{opacity:1}
/* section headings wipe in */
html.js .rv h2{clip-path:inset(0 0 100% 0); transform:translateY(.35em); transition:clip-path .95s var(--ease) .12s, transform .95s var(--ease) .12s}
html.js .rv.is-in h2{clip-path:inset(-10% 0 -10% 0); transform:none}
html.js .gallery .rv{transform:translateY(24px)}
/* a moving band of what the project was about */
.band{overflow:hidden; padding-block:clamp(22px,3.4vh,52px); border-block:1px solid var(--line); background:var(--sky-3)}
.band-track{display:flex; width:max-content; gap:clamp(28px,3vw,64px); transform:skewX(calc(var(--skew,0) * 1deg)); animation:band-move 46s linear infinite; font:400 clamp(44px,5.4vw,128px)/1 var(--f-display); letter-spacing:-.02em; white-space:nowrap}
.band-track span{color:rgba(241,244,240,.2)}
.band-track span:nth-child(3n+1){font-style:italic; color:var(--mint)}
@keyframes band-move{to{translate:-50% 0}}
/* results: the tiles slide in and the figure counts up once the chapter is reached */
html.js .wins li{opacity:0; transform:translateX(44px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--n,0) * 140ms + .15s)}
html.js .wins li:nth-child(2){--n:1}
html.js .wins li:nth-child(3){--n:2}
html.js .chapter.is-lit .wins li{opacity:1; transform:none}
.chapter figure img{transition:filter .6s}
html.js .chapter:not(.is-lit) figure img{filter:saturate(.35) brightness(.8)}
/* gallery photos open large */
.zoom{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in}
.lightbox{width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; margin:0; padding:clamp(16px,3vw,48px); border:0; background:rgba(3,6,5,.94); color:var(--text)}
.lightbox[open]{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr) auto; align-items:center; justify-items:center; gap:16px}
.lightbox::backdrop{background:rgba(3,6,5,.7)}
.lightbox img{grid-column:2; width:auto; max-width:100%; max-height:calc(100dvh - 170px); border-radius:14px; object-fit:contain}
.lightbox img.is-new{animation:lb-in .4s var(--ease)}
@keyframes lb-in{from{opacity:0; transform:scale(.93)}}
.lb-cap{grid-column:1 / -1; max-width:60em; font:400 var(--fs-mono)/1.6 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; text-align:center; color:var(--text-2)}
.lb-btn{width:52px; height:52px; border:1px solid var(--line-2); border-radius:50%; background:rgba(3,6,5,.6); font:400 22px/1 var(--f-body); cursor:pointer; transition:border-color .2s}
.lb-btn:hover{border-color:var(--mint)}
.lb-close{position:absolute; top:clamp(12px,2vw,28px); right:clamp(12px,2vw,28px)}

@media (max-width:1100px){
  .client,.end{grid-template-columns:minmax(0,1fr); row-gap:var(--s-4)}
  html.js .flight{display:none}
  .people{grid-template-columns:minmax(0,1fr)}
  .chapter{grid-template-columns:minmax(0,1fr)}
  .gallery{columns:2}
}
@media (max-width:900px){
  .pj-top{grid-template-columns:minmax(0,1fr)}
  .pj-shot{margin:var(--s-5) 0 var(--s-4)}
  .pj-logo{left:12px}
  .pj-bird{right:-2%; top:-24%; width:44%}
  .facts,.creds{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--s-2)}
  .quote{grid-template-columns:minmax(0,1fr)}
  html.js .flight{display:none}
  .btn--lg{min-height:52px; padding:0 24px; font-size:16px}
  .cta{grid-template-columns:minmax(0,1fr); row-gap:var(--s-5)}
  .cta-sky{order:-1}
  .contact-line{flex-direction:column; gap:0}
  .contact-line a,.crumbs a,.tlink,.totop,.foot-cols a,.foot-base a,.facts a,.creds a{display:inline-flex; align-items:center; min-height:44px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-cols ul{gap:0}
}
@media (max-width:520px){
  .gallery{columns:1}
  .creds{grid-template-columns:minmax(0,1fr)}
  .foot-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  html.js .rv,html.js .rv h2,html.js .wins li{opacity:1; clip-path:none; transform:none}
  html.js .flight,.flock{display:none}
  html.js .chapter:not(.is-lit) figure img{filter:none}
}

/* ==========================================================================
   The project as one running story: text with photos, the client's quote and
   the figures set into it, and side notes about the client and the team.
   ========================================================================== */
.pj-logo{width:clamp(96px,9.5vw,172px); aspect-ratio:1; padding:clamp(12px,1.3vw,24px); border-radius:clamp(18px,1.6vw,28px); background:#fff; object-fit:contain}
.pj-logo--dark{background:#0C1D17; border:1px solid var(--line-2)}
.pj-shot--logo .pj-photo{display:grid; place-items:center; padding:14%; background:#F4F2EA}
.pj-shot--dark .pj-photo{background:linear-gradient(160deg,#16382C,#0A1712)}
.pj-shot--logo .pj-photo img{width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; transform:none; animation:none}
.pj-body{--from:var(--sky-1); --to:var(--sky-6); padding-top:clamp(36px,5vh,80px)}
.pj-body--last{--to:var(--sky-7)}
/* the text column has a fixed reading width; the side notes sit right beside it and take the rest */
.pj-grid{--fs-prose:clamp(18px,1.25vw,23px); display:grid; grid-template-columns:minmax(0,calc(var(--fs-prose) * 42)) minmax(280px,1fr); column-gap:clamp(28px,3.4vw,72px); align-items:start}
.pj-prose{min-width:0; font-size:var(--fs-prose); line-height:1.65; color:#DDE5E0; overflow-wrap:break-word}
.pj-prose > *{max-width:none}
.pj-prose > * + *{margin-top:1.05em}
.pj-prose > p:first-child{max-width:25em; font:400 clamp(23px,1.75vw,36px)/1.3 var(--f-display); letter-spacing:-.012em; color:var(--text); text-wrap:pretty}
.pj-prose h2{max-width:18em; margin-top:1.8em; font-size:clamp(28px,2.4vw,50px); line-height:1.06; color:var(--text)}
.pj-prose h3{margin-top:1.6em; color:var(--text)}
.pj-prose a{color:var(--mint); text-decoration-thickness:1px; text-underline-offset:.25em}
.pj-prose strong{font-weight:500; color:var(--text)}
.pj-prose ul:not(.wins),.pj-prose ol{padding-left:1.3em; list-style:disc}
.pj-prose ol{list-style:decimal}
.pj-prose li::marker{color:var(--mint)}
.pj-prose figure{max-width:none; margin:clamp(30px,4.5vh,60px) 0}
.pj-prose .fig img{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:18px}
.pj-prose .fig--right{width:86%; margin-left:auto}
.pj-prose .fig--left{width:90%}
.pj-prose .fig--tall{width:min(100%,460px)}
.pj-prose figcaption{margin-top:12px; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.06em; color:var(--text-2)}
.pj-prose figcaption::before{content:""; display:inline-block; width:22px; height:1px; margin-right:10px; vertical-align:middle; background:var(--line-2)}
html.js .pj-prose .fig.rv{transform:translateY(60px) scale(.97)}
html.js .pj-prose .fig.rv.is-in{transform:none}
/* the client's own words, set into the story */
.pullquote{padding:clamp(24px,3.2vw,56px) 0; border-block:1px solid var(--line-2)}
.pullquote blockquote{margin:0}
.pullquote blockquote p{max-width:21em; font:400 clamp(26px,2.5vw,52px)/1.16 var(--f-display); letter-spacing:-.02em; color:var(--text); text-wrap:balance}
.pullquote blockquote p::before{content:"“"; color:var(--amber)}
.pullquote blockquote p::after{content:"”"; color:var(--amber)}
.pullquote figcaption{display:flex; align-items:center; gap:14px; margin-top:var(--s-3); letter-spacing:.08em; text-transform:uppercase}
.pullquote figcaption::before{display:none}
.pullquote figcaption strong{font-weight:400; color:var(--text)}
.pullquote-face{width:56px; height:56px; flex:none; border-radius:50%; object-fit:cover}
html.js .pullquote .w{opacity:.22; transition:opacity .35s}
html.js .pullquote .w.is-on{opacity:1}
/* figures */
.pj-prose .wins{max-width:none; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); margin-block:clamp(26px,3.5vh,48px); padding:0; list-style:none}
.pj-prose .wins li,html.js .pj-prose .wins li{grid-template-columns:minmax(0,1fr); gap:8px; align-content:start; opacity:1; transform:none}
.pj-prose .wins strong{color:var(--amber)}
.pj-credit{margin-top:clamp(40px,6vh,72px) !important; padding-top:var(--s-3); border-top:1px solid var(--line-2); font-size:15px; line-height:1.6; color:var(--text-2)}
.pj-credit a{color:var(--text)}
/* side notes */
.pj-notes{position:sticky; top:calc(var(--bar-h) + 32px); display:grid; gap:clamp(14px,1.2vw,22px); max-width:700px}
@media (min-width:1700px){
  .pj-notes{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
  .pj-notes .note:first-child{grid-column:1 / -1}
}
.note{display:grid; gap:12px; justify-items:start; padding:clamp(20px,1.7vw,32px)}
.note > *{position:relative; z-index:1}
.note-logo{display:grid; place-items:center; width:76px; height:76px; padding:10px; border-radius:16px; background:#fff}
.note-logo--dark{background:#0C1D17; border:1px solid var(--line-2)}
.note-logo img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.note-name{max-width:none; font-size:clamp(24px,1.7vw,32px); line-height:1.1}
.note p{font-size:16px; line-height:1.55; color:var(--text-2)}
.note-links{display:flex; flex-wrap:wrap; gap:6px 22px}
.note-links .tlink{color:var(--text)}
.note-socials{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.note-socials a{display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line-2); border-radius:50%; color:var(--text); transition:border-color .2s, color .2s, background-color .2s}
.note-socials a:hover{border-color:var(--mint); color:var(--mint); background:rgba(70,222,159,.08)}
.note-socials svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.crew{display:grid; gap:14px; width:100%}
.crew li{display:flex; align-items:center; gap:12px}
.crew img{width:48px; height:48px; flex:none; border-radius:50%; object-fit:cover}
.crew span{font-size:15px; line-height:1.4; color:var(--text-2)}
.crew strong{display:block; font-weight:500; color:var(--text)}
.note-service{font:500 clamp(20px,1.4vw,26px)/1.2 var(--f-display); letter-spacing:-.01em; text-decoration:none}
.note-service svg{display:inline-block; width:14px; height:14px; margin-left:6px; vertical-align:middle; transition:transform .25s var(--ease)}
.note-service:hover svg{transform:translateX(4px)}
/* more photos, and the next project */
.pj-gallery{--from:var(--sky-6); --to:var(--sky-7); padding-top:0}
.pj-gallery .altline{max-width:none; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em}
.pj-gallery .gallery{margin-top:clamp(20px,3vh,36px)}
.pj-next{--from:var(--sky-7); --to:var(--sky-8); padding-block:0 clamp(64px,9vh,120px)}
.next{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s-4); padding:clamp(22px,2.4vw,52px); overflow:hidden; text-decoration:none}
.next > *{position:relative; z-index:1}
.next-text{display:grid; gap:12px; justify-items:start}
.next strong{max-width:17em; font:500 clamp(28px,2.8vw,60px)/1.05 var(--f-display); letter-spacing:-.02em; text-wrap:balance}
.next-thumb{width:clamp(140px,18vw,320px); aspect-ratio:3/2; border-radius:14px; object-fit:cover; transition:transform .5s var(--ease)}
.next:hover{border-color:rgba(70,222,159,.5)}
.next:hover .next-thumb{transform:scale(1.04) rotate(-1.5deg)}
@media (max-width:1000px){
  .pj-grid{grid-template-columns:minmax(0,1fr); row-gap:var(--s-5)}
  .pj-notes{position:static; max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
}
@media (max-width:700px){
  .pj-notes{grid-template-columns:minmax(0,1fr)}
  .pj-prose .fig--right,.pj-prose .fig--left{width:100%}
  .next{grid-template-columns:minmax(0,1fr)}
  .next-thumb{width:100%}
}

/* ==========================================================================
   WordPress
   ========================================================================== */
.admin-bar .bar{top:32px}
@media (max-width:782px){.admin-bar .bar{top:46px}}
.screen-reader-text{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Story blocks of the ACF fields: a set of photos and a set of videos inside the text */
.story-shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:clamp(10px,1vw,18px); margin:clamp(30px,4.5vh,60px) 0}
.story-shots .shot{overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#0C1D17}
.story-shots img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .6s var(--ease)}
.story-shots .shot:hover img{transform:scale(1.04)}
/* videos: two to a row on every screen; on a phone the row scrolls sideways, the next video peeking in from the edge */
.story-clips{--gap:clamp(10px,1vw,18px); margin:clamp(30px,4.5vh,60px) 0}
.clips-track{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap)}
.clip{min-width:0}
.clip video{display:block; width:100%; aspect-ratio:auto 4/5; object-fit:cover; max-height:76vh; border:1px solid var(--line); border-radius:16px; background:#050706}
/* the player: the video on a dark card, a large mint play button while paused, and a bar along the bottom */
.vp{position:relative; container-type:inline-size; overflow:hidden; border-radius:16px}
.vp video{cursor:pointer}
.vp::after{content:""; position:absolute; inset:auto 0 0 0; height:42%; border-radius:0 0 16px 16px; background:linear-gradient(transparent,rgba(3,6,5,.78)); pointer-events:none; opacity:1; transition:opacity .35s}
.vp-big{position:absolute; left:50%; top:50%; z-index:2; display:grid; place-items:center; width:clamp(52px,22cqi,76px); aspect-ratio:1; margin:0; padding:0; border:0; border-radius:50%; background:var(--mint); color:var(--ink); box-shadow:0 10px 40px rgba(0,0,0,.45); transform:translate(-50%,-50%); cursor:pointer; transition:transform .25s var(--ease), opacity .25s}
.vp-big svg{width:42%; height:42%; margin-left:6%; fill:currentColor}
.vp-big:hover{transform:translate(-50%,-50%) scale(1.07)}
.vp.is-playing .vp-big{opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.85)}
.vp-bar{position:absolute; inset:auto 0 0 0; z-index:2; display:flex; align-items:center; gap:6px; padding:10px 10px 10px 8px; transition:opacity .3s, transform .3s var(--ease)}
.vp.is-playing:not(:hover):not(:focus-within) .vp-bar{opacity:0; transform:translateY(6px)}
.vp.is-playing:not(:hover):not(:focus-within)::after{opacity:0}
.vp-btn{display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:none; color:var(--text); cursor:pointer}
.vp-btn:hover{background:rgba(241,244,240,.12)}
.vp-btn svg,.vp-sound-hint svg{width:20px; height:20px; fill:currentColor}
.vp svg .ln{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.vp-time{flex:none; font:400 11px/1 var(--f-mono); letter-spacing:.04em; color:var(--text-2); font-variant-numeric:tabular-nums}
.vp-seek{flex:1; min-width:30px; height:20px; margin:0; background:none; cursor:pointer; -webkit-appearance:none; appearance:none; --p:0%}
.vp-seek::-webkit-slider-runnable-track{height:3px; border-radius:3px; background:linear-gradient(90deg,var(--mint) var(--p),rgba(241,244,240,.3) var(--p))}
.vp-seek::-moz-range-track{height:3px; border-radius:3px; background:linear-gradient(90deg,var(--mint) var(--p),rgba(241,244,240,.3) var(--p))}
.vp-seek::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; margin-top:-4.5px; border:0; border-radius:50%; background:var(--mint)}
.vp-seek::-moz-range-thumb{width:12px; height:12px; border:0; border-radius:50%; background:var(--mint)}
.vp-sound-hint{position:absolute; left:10px; top:10px; z-index:2; display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px 0 9px; border:0; border-radius:999px; background:rgba(3,6,5,.62); color:var(--text); font:500 12px/1 var(--f-body); cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.vp-sound-hint[hidden]{display:none}
.vp-sound-hint svg{width:16px; height:16px}
.vp:fullscreen{display:grid; place-items:center; border-radius:0; background:#000}
.vp:fullscreen video{max-height:100vh; border:0; border-radius:0}
/* on a narrow video the bar keeps play, the seek line and sound */
@container (max-width:240px){
  .vp-time,.vp-full{display:none}
  .vp-bar{padding:6px; gap:2px}
  .vp-btn{width:32px; height:32px}
  .vp-sound-hint span{display:none}
  .vp-sound-hint{padding:0 8px}
}
@media (hover:none){
  .vp.is-playing:not(:focus-within) .vp-bar{opacity:1; transform:none}
  .vp.is-playing:not(:focus-within)::after{opacity:1}
}
.clips-hint{display:none}
@media (max-width:600px){
  /* bleed to the screen edge so the peek reads as more to come, not as a cut-off */
  .story-clips{margin-inline:calc(var(--pad) * -1)}
  .clips-track{display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad); padding-inline:var(--pad); scrollbar-width:none}
  .clips-track::-webkit-scrollbar{display:none}
  .clip{flex:0 0 calc((100% - var(--gap)) / 2 - 14px); scroll-snap-align:start}
  .clip:last-child{scroll-snap-align:end}
  .clip video{max-height:62vh; border-radius:12px}
  .story-clips.is-scrollable .clips-hint{display:flex; align-items:center; gap:10px; margin:12px var(--pad) 0; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
  .clips-hint::after{content:""; width:28px; height:1px; background:currentColor; animation:clips-nudge 1.6s var(--ease) infinite}
  .story-clips.is-swiped .clips-hint::after{animation:none}
}
@keyframes clips-nudge{50%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){
  .clips-hint::after{animation:none}
}