/* Deividas Zienius - shared styles. Static site, no build step (pages are generated by tools/build.mjs). */

/* Fonts: the site uses Poppins (display), Inter (body) and IBM Plex Mono (labels).
   Self-hosted WOFF2 files go in assets/fonts/; until they are added, installed copies are used
   and the stacks below fall back to close system fonts. Example rule (uncomment when the file exists):
   @font-face{font-family:Poppins;font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/poppins-600.woff2) format("woff2")} */

@property --bg{syntax:'<color>';inherits:true;initial-value:#050505}
@property --bg2{syntax:'<color>';inherits:true;initial-value:#0c0c0c}
@property --panel{syntax:'<color>';inherits:true;initial-value:#121212}
@property --panel2{syntax:'<color>';inherits:true;initial-value:#1a1a1a}
@property --amb{syntax:'<color>';inherits:true;initial-value:rgba(255,0,0,.3)}

:root{
  --display:Poppins,"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body:Inter,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  --gut:clamp(20px,4vw,72px);--r:999px;--ease:cubic-bezier(.22,1,.36,1);--expo:cubic-bezier(.19,1,.22,1);--hh:64px;
  --bg:#050505;--bg2:#0c0c0c;--panel:#121212;--panel2:#1a1a1a;--amb:rgba(255,0,0,.3);
  --text:#fff;--muted:#b3b3b3;--line:rgba(255,255,255,.14);--line2:rgba(255,255,255,.3);
  --red:#ff2b2b;--fill:#e10000;--glow:rgba(255,0,0,.36);--ph:#1a1a1a;--ghost:rgba(255,255,255,.16);--shine:rgba(255,255,255,.38);
  --plexus-grey:90,90,90;--plexus-red:255,30,30;
  --head:color-mix(in srgb,var(--bg) 74%,transparent);
  color-scheme:dark;
  transition:--bg .7s var(--ease),--bg2 .7s var(--ease),--panel .7s var(--ease),--panel2 .7s var(--ease),--amb .7s var(--ease);
}
/* Section tints (dark): the whole site takes the colour of the wheel position */
html[data-sec=work]{--bg:#050a1c;--bg2:#0a1229;--panel:#0f1a38;--panel2:#152348;--amb:rgba(46,98,255,.34)}
html[data-sec=stack]{--bg:#03110a;--bg2:#071a11;--panel:#0b2418;--panel2:#102e20;--amb:rgba(24,190,110,.26)}
html[data-sec=approach]{--bg:#0e0520;--bg2:#150a2d;--panel:#1c1039;--panel2:#241548;--amb:rgba(140,70,255,.32)}
html[data-sec=about]{--bg:#03121a;--bg2:#071b25;--panel:#0b2531;--panel2:#102f3d;--amb:rgba(0,170,200,.26)}
html[data-sec=contact]{--bg:#110709;--bg2:#190b0f;--panel:#211015;--panel2:#2a151b;--amb:rgba(255,50,70,.2)}
/* Light theme + matching soft tints */
html[data-theme=light]{--bg:#eee;--bg2:#e4e4e4;--panel:#fff;--panel2:#f6f6f6;--amb:rgba(212,0,0,.16);--text:#000;--muted:#4a4a4a;--line:rgba(0,0,0,.14);--line2:rgba(0,0,0,.32);--red:#b30000;--fill:#d40000;--glow:rgba(212,0,0,.2);--ph:#ddd;--ghost:rgba(0,0,0,.38);--shine:rgba(255,255,255,.5);--plexus-grey:150,150,150;--plexus-red:212,0,0;color-scheme:light}
html[data-theme=light][data-sec=work]{--bg:#eaeff9;--bg2:#dfe6f4;--panel:#f8faff;--panel2:#eef2fb;--amb:rgba(46,98,255,.18)}
html[data-theme=light][data-sec=stack]{--bg:#e9f4ed;--bg2:#dcece2;--panel:#f7fcf9;--panel2:#edf6f0;--amb:rgba(24,170,100,.16)}
html[data-theme=light][data-sec=approach]{--bg:#f0ebf8;--bg2:#e5ddf3;--panel:#fbf9ff;--panel2:#f2edfa;--amb:rgba(130,70,230,.16)}
html[data-theme=light][data-sec=about]{--bg:#e7f2f4;--bg2:#d9e9ed;--panel:#f7fbfc;--panel2:#ecf4f6;--amb:rgba(0,150,180,.16)}
html[data-theme=light][data-sec=contact]{--bg:#f6efef;--bg2:#efe4e4;--panel:#fffafa;--panel2:#f8f0f0;--amb:rgba(212,0,0,.12)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;min-height:100svh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:var(--fill);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--fill);color:#fff;padding:10px 16px;border-radius:var(--r);font-family:var(--mono);font-size:13px}
.skip:focus{top:12px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.06;background-image: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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{padding-inline:var(--gut)}
.eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:14px;align-items:center}
.eyebrow b{color:var(--red);font-weight:600}
.eyebrow b::before{content:"// "}
.eyebrow::after{content:"";height:1px;background:var(--line2);flex:1;max-width:240px;transform-origin:left;animation:lineIn 1.1s var(--expo) calc(var(--t,0ms) + 250ms) both}
@keyframes lineIn{from{transform:scaleX(0)}}
.sec-title{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.025em;font-size:clamp(34px,5vw,80px)}
.sec-title em{font-style:normal;color:var(--red)}

/* ---------- load-in choreography: every page builds itself in a staggered sequence ---------- */
.fu{animation:fu .95s var(--ease) var(--t,0ms) both}
@keyframes fu{from{opacity:0;translate:0 26px}}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.wd>span{display:inline-block;animation:wd 1.1s var(--expo) var(--t,0ms) both}
@keyframes wd{from{translate:0 112%;rotate:4deg}}
.io-on .io{transition:opacity .9s var(--ease) calc(var(--io,0) * 110ms),translate .9s var(--ease) calc(var(--io,0) * 110ms)}
.io-on .io:not(.in){opacity:0;translate:0 34px;animation:ioSafe 0s 6s forwards}
@keyframes ioSafe{to{opacity:1;translate:none}} /* never leave content hidden if the script fails */
/* prerendered pages wait to animate until they are actually shown */
.pre *,.pre *::before,.pre *::after{animation-play-state:paused!important}
.dc{color:var(--red);opacity:.85}
/* scramble slots: the real letter keeps its space in the layout, the noise is painted over it */
.sc{position:relative;-webkit-text-fill-color:transparent}
.sc::after{content:attr(data-c);position:absolute;left:50%;transform:translateX(-50%);-webkit-text-fill-color:currentColor;pointer-events:none}

/* ---------- buttons: magnetic (JS) + fill from the pointer + glow ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:14px 24px;min-height:48px;border-radius:var(--r);border:1px solid var(--line2);line-height:1.2;color:var(--text);transition:color .35s,border-color .35s,box-shadow .5s var(--ease),background-color .35s}
.btn>span{position:relative;z-index:2;display:inline-block;transition:transform .35s var(--ease)}
.btn::before,.rc-link::before{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:260%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .65s var(--expo);z-index:0;pointer-events:none}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;background:radial-gradient(110px circle at var(--mx,50%) var(--my,50%),var(--shine),transparent 70%);opacity:0;transition:opacity .35s}
.btn:hover::before,.btn:focus-visible::before,.rc-link:hover::before,.rc-link:focus-visible::before{transform:translate(-50%,-50%) scale(1)}
.btn:hover::after{opacity:.55}
.btn-solid{background:var(--fill);border-color:var(--fill);color:#fff;box-shadow:0 8px 28px -10px var(--glow),0 0 0 0 var(--glow)}
.btn-solid::before{background:var(--text)}
.btn-solid:hover,.btn-solid:focus-visible{color:var(--bg);border-color:var(--text);box-shadow:0 0 38px var(--shine),0 0 0 4px color-mix(in srgb,var(--text) 14%,transparent)}
.btn-ghost::before,.rc-link::before{background:var(--fill)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:#fff;border-color:var(--fill);box-shadow:0 0 34px var(--glow),0 0 0 4px color-mix(in srgb,var(--fill) 18%,transparent)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.mag{will-change:transform}

/* ---------- 3D background scene (the original site's hero), tilts with the mouse ---------- */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;perspective:1400px;overflow:hidden}
.sc-in,.pl{position:absolute;inset:0;transform-style:preserve-3d}
.sc-in{will-change:transform}
.pl-back{transform:translateZ(-200px)}
.pl-mid{transform:translateZ(-70px)}
.glow{position:absolute;border-radius:50%}
.ga{width:60vw;height:60vw;max-width:860px;max-height:860px;top:-24%;right:-16%;background:radial-gradient(circle,var(--amb),transparent 66%);animation:drift 18s ease-in-out infinite alternate}
.gb{width:40vw;height:40vw;max-width:560px;max-height:560px;bottom:-16%;left:-12%;background:radial-gradient(circle,var(--glow),transparent 68%);opacity:.7;animation:drift 24s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(-6%,5%) scale(1.12)}}
.wm{position:absolute;right:clamp(0px,2vw,40px);top:50%;width:clamp(220px,34vw,560px);height:auto;opacity:.07;translate:0 -50%}
.p-home .wm{display:none}
.grid,.gridfx{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000 30%,transparent 78%);mask-image:radial-gradient(120% 90% at 70% 10%,#000 30%,transparent 78%)}
.grid{opacity:.7;background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 25%,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/25% 100%}
main,.foot{position:relative;z-index:1}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto 0;height:var(--hh);z-index:80;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:var(--gut);background:var(--head);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);view-transition-name:head;animation:headIn .9s var(--ease) both}
@keyframes headIn{from{translate:0 -100%}}
.hd-l,.hd-r{display:flex;align-items:center;gap:clamp(12px,2vw,24px)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:600;font-size:15px;white-space:nowrap}
.brand img{width:48px;height:30px;transition:transform .5s var(--ease)}
.brand:hover img{transform:rotate(-8deg) scale(1.08)}
.back{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border:1px solid var(--line2);border-radius:var(--r);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:border-color .3s,color .3s,box-shadow .4s}
.back::before{content:"";position:absolute;inset:0;background:var(--fill);border-radius:inherit;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--expo);z-index:-1}
.back svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.back:hover{border-color:var(--fill);color:#fff;box-shadow:0 0 26px var(--glow)}
.back:hover::before{transform:scaleX(1);transform-origin:left}
.back:hover svg{transform:translateX(-3px)}
.hl{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:10px 2px;color:var(--muted);transition:color .25s}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--expo)}
.hl:hover{color:var(--text)}
.hl:hover::after{transform:scaleX(1);transform-origin:left}
.psi{display:inline-flex;align-items:center;gap:7px}
.psi svg{width:15px;height:15px;flex:none}
.psi:hover svg{color:var(--red)}
.tt{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r);padding:3px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:border-color .3s,box-shadow .4s}
.tt:hover{border-color:var(--red);box-shadow:0 0 24px var(--glow)}
.tt span{padding:6px 12px;border-radius:var(--r);color:var(--muted);transition:background-color .25s,color .25s}
.tt .t-d,html[data-theme=light] .tt .t-l{background:var(--fill);color:#fff}
html[data-theme=light] .tt .t-d{background:none;color:var(--muted)}

/* theme-dependent images */
.pp-l{display:none}
html[data-theme=light] .pp-d{display:none}
html[data-theme=light] .pp-l{display:block}

/* ---------- home: hero + wheel ---------- */
.home{min-height:100svh;padding:calc(var(--hh) + 32px) var(--gut) 96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,72px);overflow:hidden}
.ghost{position:absolute;left:calc(var(--gut) - .06em);bottom:46px;z-index:0;font-family:var(--display);font-weight:700;font-size:clamp(96px,15vw,280px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--ghost);white-space:nowrap;pointer-events:none;user-select:none;animation:fu 1.6s var(--ease) .9s both}
.hero-copy{position:relative;z-index:2;max-width:760px}
.h-kick{display:flex;gap:12px;align-items:center;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.h-kick::before{content:"";width:36px;height:2px;background:var(--red);flex:none;transform-origin:left;animation:lineIn 1s var(--expo) .2s both}
.h-line{display:block;font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.02;font-size:clamp(40px,5.1vw,86px);min-height:3.06em}
.h-line em{font-style:normal;color:var(--red);text-shadow:0 0 40px var(--glow)}
.h-line .g{color:var(--red);opacity:.85}
.sec-ix{display:flex;align-items:center;gap:12px;margin-top:22px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sec-ix b{color:var(--red);font-weight:600}
.hero-sub{margin-top:18px;max-width:560px;color:var(--muted);font-size:clamp(16px,1.25vw,19px);min-height:3.2em;transition:opacity .35s}
.hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{margin-top:40px;display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.hero-meta div{font-size:14px;color:var(--muted)}
.hero-meta strong{display:block;font-family:var(--display);font-size:20px;color:var(--text);font-weight:600}
/* the outlined section word sits behind the stats: its upper part is faded and the stats get a soft halo
   in the page colour, so the strokes never cut through the text */
@media (min-width:960px){
  .ghost{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 24%,#000 64%);mask-image:linear-gradient(180deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 24%,#000 64%)}
  .hero-meta div{text-shadow:0 0 3px var(--bg),0 0 10px var(--bg),0 0 18px var(--bg)}
}

/* the wheel: crisp SVG, driven by JS (spring easing + slow continuous drift) */
.wheel-wrap{position:relative;z-index:2;display:grid;justify-items:center}
.wheel{--s:min(88vw,460px);--rot:0deg;--needle:0deg;position:relative;width:var(--s);height:var(--s);touch-action:pan-y}
.w-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wheel .w-svg{animation:wIn 1.8s var(--expo) .1s both}
@keyframes wIn{from{opacity:0;scale:.82;rotate:-50deg}}
.w-tk{transform:rotate(var(--rot))}
.tk-min,.tk-maj,.tk-red,.w-ring,.bl-o{fill:none}
.tk-min{stroke:var(--line2);stroke-width:26;stroke-dasharray:.32 2.68;stroke-dashoffset:.16}
.tk-maj{stroke:var(--line2);stroke-width:44;stroke-dasharray:.5 14.5;stroke-dashoffset:.25}
.tk-red{stroke:var(--red);stroke-width:30;stroke-dasharray:1.4 70.6;stroke-dashoffset:.7}
.w-ring{stroke:var(--line2);stroke-width:2}
.w-bl{transform:rotate(calc(var(--rot) * -.35))}
.w-bl .b1{fill:var(--panel2)}
.w-bl .b2{fill:var(--bg2)}
.bl-o{stroke:var(--line2);stroke-width:2}
.w-ndl{transform:rotate(var(--needle))}
.w-arc{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;filter:url(#glw)}
.w-pin{fill:var(--red)}
.w-core{position:absolute;inset:25%;border-radius:50%;overflow:hidden;border:3px solid var(--red);box-shadow:0 0 0 8px var(--bg),0 0 70px var(--glow);background:var(--ph);animation:coreIn 1.5s var(--expo) .05s both}
@keyframes coreIn{from{scale:.72}}
.w-core img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.w-chips{position:absolute;inset:0}
.w-chip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(calc(var(--a) + var(--rot))) translateY(calc(var(--s) * -.44)) rotate(calc((var(--a) + var(--rot)) * -1));font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;min-height:36px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line2);white-space:nowrap;display:flex;gap:8px;align-items:center;transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s}
.wheel .w-chip{animation:chipIn .9s var(--expo) var(--t,0ms) both}
@keyframes chipIn{from{opacity:0;scale:.3}}
.w-chip i{font-style:normal;color:var(--red);font-size:11px}
.w-chip:hover,.w-chip.on{background:var(--fill);border-color:var(--fill);color:#fff;box-shadow:0 0 30px var(--glow)}
.w-chip:hover i,.w-chip.on i{color:#fff}

.marq{position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:hidden;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq ul{display:flex;width:max-content;gap:clamp(24px,4vw,64px);padding:16px 0 16px clamp(24px,4vw,64px);font-family:var(--display);font-weight:300;font-size:clamp(16px,1.6vw,22px);color:var(--muted);white-space:nowrap;animation:marq 48s linear infinite}
.marq li{display:inline-flex;align-items:center;gap:clamp(24px,4vw,64px)}
.marq li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
@keyframes marq{to{transform:translateX(-50%)}}

@media (min-width:960px){
  /* 196px = the hero's top and bottom padding, so the wheel never makes the home screen taller than the window */
  .wheel{--s:min(46vw,calc(100svh - 196px),780px)}
  .w-chip{font-size:14px;padding:11px 18px}
  .w-chip i{font-size:12px}
}
/* very wide screens: keep the hero in a centred frame and let the type grow instead of opening a gap */
@media (min-width:1800px){
  .home{--side:max(var(--gut),calc((100vw - 2100px) / 2));padding-inline:var(--side);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .ghost{left:calc(var(--side) - .06em)}
  .hero-copy{max-width:1000px}
  .h-line{font-size:clamp(80px,min(4.6vw,11.4svh),118px)}
  .hero-sub{max-width:720px;font-size:21px}
  .hero-meta strong{font-size:24px}
  .hero-meta div{font-size:16px}
}
@media (max-width:959px){
  .home{grid-template-columns:1fr;padding-top:calc(var(--hh) + 24px);padding-bottom:88px}
  .wheel-wrap{order:-1}
  .ghost{bottom:auto;left:auto;right:-.04em;top:calc(var(--hh) + 8px)}
  .h-line{min-height:0}
}
@media (max-width:700px){
  body{font-size:16px}
  .hl,.brand span{display:none}
  .site-head,.hd-r{gap:8px}
  .bk-all{display:none}
  .hl.psi{display:inline-flex;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--line2);border-radius:50%;transition:color .25s,border-color .3s,box-shadow .4s}
  .psi span,.psi::after{display:none}
  .psi:hover{border-color:var(--red);box-shadow:0 0 24px var(--glow)}
  .psi svg{width:17px;height:17px}
  .w-chip{font-size:11px;padding:7px 10px;min-height:32px}
  .w-chip i{display:none}
  .h-kick{font-size:12px;margin-bottom:18px}
  .h-line{font-size:clamp(32px,9vw,44px)}
  .hero-sub{min-height:0}
}
@media (max-width:379px){
  .site-head:has(.back) .psi{display:none}
}

/* ---------- dock: the wheel shrunk into the corner on section pages ---------- */
.dock{--s:140px;--rot:0deg;position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:85;width:var(--s);height:var(--s);border-radius:50%;transform-origin:100% 100%;transition:transform .5s var(--ease);animation:dockIn 1.2s var(--expo) .5s both}
@keyframes dockIn{from{opacity:0;scale:.5;rotate:-90deg}}
.dock::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--bg2) 58%,color-mix(in srgb,var(--bg2) 70%,transparent) 59%);border:1px solid var(--line2);box-shadow:0 20px 50px -20px rgba(0,0,0,.6),0 0 40px -10px var(--amb);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dock .tk-min{animation:spin 80s linear infinite}
@keyframes spin{to{rotate:360deg}}
.dock-core{position:absolute;inset:27%;border-radius:50%;border:2px solid var(--red);display:grid;place-items:center;text-align:center;background:var(--panel);color:var(--text);font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;box-shadow:0 0 30px -6px var(--glow);cursor:default;transition:inset .4s var(--ease)}
.dock-core b{display:block;color:var(--red);font-size:11px}
.dock .w-chips{transition:opacity .25s,visibility .25s}
.dock .w-chip{transform:translate(-50%,-50%) rotate(calc(var(--a) + var(--rot))) translateY(calc(var(--s) * -.37)) rotate(calc((var(--a) + var(--rot)) * -1));padding:0;width:32px;height:32px;min-height:0;justify-content:center;font-size:11px;background:var(--bg)}
.dock .w-chip i{color:inherit;font-size:11px}
.dock .w-chip .lb{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--fill);color:#fff;padding:5px 10px;border-radius:var(--r);font-size:11px;opacity:0;pointer-events:none;transition:opacity .2s}
.dock .w-chip:hover .lb,.dock .w-chip:focus-visible .lb{opacity:1}
.dock .w-chip:hover,.dock .w-chip:focus-visible{z-index:2}
.dock .w-chip.cur{background:var(--fill);border-color:var(--fill);color:#fff}
@media (hover:hover){.dock:hover,.dock:focus-within{transform:scale(1.18)}}
/* up to small laptops the full dock would sit over the content column, so it collapses to a tap-to-open button */
@media (max-width:1199px){
  .dock{--s:62px;transition:width .4s var(--ease),height .4s var(--ease)}
  .dock .w-svg{opacity:.6}
  .dock-core{inset:10%;cursor:pointer}
  .dock:not(.open) .dock-core .nm{display:none}
  .dock:not(.open) .dock-core b{font-size:15px}
  .dock .w-chips{opacity:0;visibility:hidden}
  .dock.open{--s:250px}
  .dock.open .dock-core{inset:30%;font-size:10px}
  .dock.open .w-chips{opacity:1;visibility:visible}
  .dock .w-chip{width:auto;height:34px;padding:0 12px;font-size:11px}
  .dock .w-chip i{display:none}
  .dock .w-chip .lb{position:static;transform:none;opacity:1;background:none;padding:0;color:inherit;font-size:11px}
}

/* ---------- section page shell ---------- */
.page{min-height:100svh;padding:calc(var(--hh) + clamp(28px,4vw,56px)) 0 clamp(120px,10vw,150px);overflow:clip}
.page-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,44px)}
.page-head .sec-title{margin-top:14px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px var(--gut) 26px;padding-right:calc(var(--gut) + 150px);border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;background:color-mix(in srgb,var(--bg) 85%,transparent)}
.foot a:hover{color:var(--text)}
/* keep content clear of the corner wheel (140px + its margin): 190px from the right edge of the screen.
   Blocks inside .wrap already sit one gutter in; .about-grid and .ct-grid are the .wrap itself. */
@media (min-width:960px){
  .proj-hero,.facts,.proj-nav,.approach-grid,.bento{padding-right:calc(190px - var(--gut))}
  .wrap.about-grid,.wrap.ct-grid{padding-right:190px}
}

/* ---------- work: the original pinned horizontal rail ---------- */
:root{--rail-card-w:clamp(340px,64vw,1100px);--rail-card-h:clamp(380px,calc(100svh - 270px),780px);--rail-gap:clamp(18px,2.2vw,40px);--rail-ticks-w:17px}
.rail-pin{position:relative}
.rail-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.rail-head{position:absolute;z-index:6;top:calc(var(--hh) + 22px);left:0;right:0;display:flex;align-items:baseline;gap:clamp(16px,3vw,48px);pointer-events:none}
.rail-head .eyebrow{flex:none}
.rail-head .eyebrow::after{display:none}
.rail-head .sec-title{font-size:clamp(28px,3vw,50px)}
.rail-rays{position:absolute;inset:-12%;z-index:0;pointer-events:none;will-change:transform,opacity;width:124%;height:124%;max-width:none}
.rail-rays line,.rail-rays .rings rect{stroke:var(--line);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.rail-rays .axis{stroke:var(--line2)}
.rail-rays .rings rect:nth-child(1){stroke-opacity:.9}
.rail-rays .rings rect:nth-child(2){stroke-opacity:.65}
.rail-rays .rings rect:nth-child(3){stroke-opacity:.45}
.rail-rays .rings rect:nth-child(4){stroke-opacity:.28}
.rail-eras{position:absolute;inset:0;z-index:1;pointer-events:none;contain:layout paint}
.era{position:absolute;top:50%;left:0;font-family:var(--display);font-weight:700;font-size:clamp(64px,7.5vw,132px);line-height:.82;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap;color:var(--text);opacity:0;will-change:transform,opacity}
.rail-enter{position:relative;z-index:2;width:100%;margin-top:90px;animation:railIn 1.4s var(--expo) .35s both}
@keyframes railIn{from{opacity:0;translate:22vw 0}}
.rail-track{position:relative;display:flex;align-items:center;gap:var(--rail-gap);padding-inline-start:calc(50vw - var(--rail-card-w) / 2 - var(--rail-ticks-w) - var(--rail-gap));padding-inline-end:calc(50vw - var(--rail-card-w) / 2);will-change:transform}
.rail-track:focus-visible{outline-offset:-4px}
.rail-ticks{flex:none;display:flex;gap:7px;align-items:center;height:72px}
.rail-ticks span{display:block;width:1px;height:100%;background:var(--line2)}
.rail-ticks span:nth-child(2){height:55%}
.rail-ticks span:nth-child(3){height:30%}
.rail-card{flex:none;width:var(--rail-card-w);height:var(--rail-card-h);position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"head head" "media facts" "desc facts" "foot foot";gap:14px clamp(20px,2.4vw,36px);padding:clamp(18px,1.8vw,26px);border-radius:18px;background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);box-shadow:0 50px 100px -50px rgba(0,0,0,.7);transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;contain:layout paint}
.rail-card::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--red);box-shadow:0 0 60px -20px var(--glow) inset;opacity:0;transition:opacity .35s ease;pointer-events:none}
.rail-card.is-focus::after{opacity:.55}
.rc-head{grid-area:head;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.rc-date{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center;order:2;text-align:right}
.rc-date .num{color:var(--red)}
.rc-title{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.9vw,30px);line-height:1.12;letter-spacing:-.015em}
.rc-title a{background:linear-gradient(var(--red),var(--red)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--expo)}
.rc-title a:hover{background-size:100% 2px}
.rc-media{grid-area:media;position:relative;display:block;border-radius:12px;overflow:hidden;background:var(--ph);border:1px solid var(--line);aspect-ratio:16/9;width:100%;max-height:calc(var(--rail-card-h) - 270px)}
.rc-media img,.rc-media video,.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),opacity .5s}
.rc-media video,.media video{opacity:0}
.rc-media video.on,.media video.on{opacity:1}
.rc-media:hover img,.rc-media:hover video{transform:scale(1.04)}
.rc-open{position:absolute;right:14px;bottom:14px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border-radius:var(--r);background:var(--fill);color:#fff;opacity:0;translate:0 8px;transition:opacity .3s,translate .4s var(--ease)}
.rc-media:hover .rc-open{opacity:1;translate:0 0}
.rc-body{display:contents}
.rc-desc{grid-area:desc;font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:var(--muted);overflow:hidden}
.rc-facts{grid-area:facts;align-self:start;display:grid;gap:12px;border-left:1px solid var(--line);padding-left:clamp(16px,1.6vw,26px);opacity:0;transition:opacity .45s ease}
.rail-card.is-focus .rc-facts{opacity:1}
.rc-facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:3px}
.rc-facts dd{font-size:13px;line-height:1.5;color:var(--text)}
.rc-foot{grid-area:foot;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding-top:4px}
.rc-link{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line2);border-radius:var(--r);padding:9px 16px;transition:border-color .3s,color .3s,box-shadow .4s;pointer-events:none}
.rc-link>span{position:relative;z-index:1}
.rc-link:hover,.rc-link:focus-visible{color:#fff;border-color:var(--fill);box-shadow:0 0 26px var(--glow)}
.rc-cs{background:var(--fill);border-color:var(--fill);color:#fff}
.rc-cs::before{background:var(--text)!important}
.rc-cs:hover,.rc-cs:focus-visible{color:var(--bg);border-color:var(--text);box-shadow:0 0 30px var(--shine)}
.rail-card.is-focus .rc-link{pointer-events:auto}
@media (max-height:820px){.rc-desc{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}}
@media (max-height:700px){.rc-facts dd{font-size:12px}.rc-facts{gap:8px}}
.rail-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,transparent 14%,transparent 86%,var(--bg) 100%)}
.rail-hud{position:absolute;z-index:6;left:var(--gut);right:calc(var(--gut) + 170px);bottom:clamp(22px,4vh,40px);display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rail-bar{flex:1;height:1px;background:var(--line2);position:relative}
.rail-bar i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:0 50%;will-change:transform;box-shadow:0 0 10px var(--red)}
.rail-count b{color:var(--text);font-weight:500;font-size:14px}
.rail-next{display:none}
.p-work .foot{background:var(--bg)}
/* phones, tablets and reduced motion: a native swipe slider instead of the pinned rail */
@media (max-width:860px),(prefers-reduced-motion:reduce){
  .rail-pin{height:auto!important}
  .rail-stage{position:static;height:auto;overflow-x:clip;display:block;padding:calc(var(--hh) + 24px) 0 clamp(90px,14vw,130px)}
  .rail-head{position:static;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:22px}
  .rail-rays,.rail-eras,.rail-vignette,.rail-hud,.rail-ticks{display:none}
  .rail-enter{margin-top:0}
  .rail-track{display:flex;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-inline:var(--gut);padding-bottom:20px;will-change:auto;scrollbar-width:none}
  .rail-track::-webkit-scrollbar{display:none}
  .rail-card{width:min(86vw,560px);height:auto;scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;gap:12px}
  .rc-head{flex-direction:column;align-items:flex-start;gap:6px}
  .rc-date{order:0;text-align:left}
  .rc-media{max-height:none}
  .rc-facts{opacity:1;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}
  .rc-link{pointer-events:auto}
  .rc-foot{flex-direction:column;align-items:stretch;margin-top:auto}
  .rc-link{justify-content:center;padding:12px 16px}
  .rc-cs{order:-1}
  /* the swipe hint sits on the project image (not over the text) as a round button */
  .rail-next{display:grid;place-items:center;position:sticky;right:10px;flex:none;align-self:flex-start;margin-top:clamp(150px,30vw,210px);width:46px;height:46px;margin-left:-46px;z-index:5;border-radius:50%;background:var(--bg);border:1px solid var(--line2);box-shadow:0 10px 30px -10px rgba(0,0,0,.6);animation:nudge 3.2s ease-in-out infinite;transition:opacity .4s}
  .rail-next span{width:14px;height:14px;border-top:3px solid var(--red);border-right:3px solid var(--red);transform:rotate(45deg) translateX(-2px)}
  .rail-track.hint-off .rail-next{opacity:0;pointer-events:none}
}
@keyframes nudge{50%{translate:-6px 0}}

/* ---------- project page ---------- */
.media{position:relative;aspect-ratio:16/9;background:var(--ph);overflow:hidden}
.proj-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:end}
.proj-hero .media{border-radius:12px;border:1px solid var(--red);box-shadow:0 40px 120px -40px var(--glow);animation:mediaIn 1.4s var(--expo) .1s both}
@keyframes mediaIn{from{clip-path:inset(0 0 100% 0 round 12px)}}
.proj-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(32px,4.4vw,72px);line-height:1.03;letter-spacing:-.03em;margin:14px 0 20px}
.proj-hero .meta{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.proj-hero .desc{color:var(--muted)}
.links{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,56px);margin-top:clamp(36px,5vw,72px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line2)}
.facts dt{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.facts dd{font-size:15.5px;color:var(--muted);line-height:1.65}
.proj-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,5vw,80px);padding-top:24px;border-top:1px solid var(--line)}
.proj-nav a{display:grid;gap:4px;max-width:46%}
.proj-nav a span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.proj-nav a strong{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.6vw,24px);line-height:1.2;transition:color .2s}
.proj-nav a:hover strong{color:var(--red)}
.proj-nav .nx{text-align:right;margin-left:auto}
@media (max-width:959px){.proj-hero,.facts{grid-template-columns:1fr}.proj-nav a{max-width:100%}}

/* ---------- stack: bento of four groups over the plexus ---------- */
.plexus{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.stack-page .wrap{position:relative;z-index:1}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,20px)}
.bx{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:14px;min-height:clamp(420px,calc(100svh - 330px),600px);padding:clamp(20px,1.8vw,28px);border-radius:18px;background:color-mix(in srgb,var(--panel) 70%,transparent);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden;animation:bxIn 1.1s var(--expo) var(--t,0ms) both;transition:border-color .4s,translate .6s var(--ease),box-shadow .6s var(--ease)}
@keyframes bxIn{from{opacity:0;translate:0 60px;scale:.96}}
.bx::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(300px circle at var(--mx,-500px) var(--my,-500px),var(--red),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;z-index:2}
.bx::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,-500px) var(--my,-500px),color-mix(in srgb,var(--red) 12%,transparent),transparent 65%);pointer-events:none}
.bx:hover{translate:0 -6px;box-shadow:0 40px 80px -40px var(--glow)}
.bx-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bx-n{color:var(--red);font-weight:600}
.bx-n::before{content:"// "}
.bx h2{font-family:var(--display);font-weight:600;font-size:clamp(22px,1.9vw,32px);line-height:1.1;letter-spacing:-.02em}
/* the art box has a fixed height and the SVG is fitted inside it, so wide cards never let it grow over the list */
.bx-art{position:relative;height:clamp(84px,9vw,128px);margin:4px 0}
.bx-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
@media (min-width:1800px){.bx-art{height:clamp(128px,6.6vw,170px)}}
.bx-list{margin-top:auto;border-top:1px solid var(--line2)}
.bx-list li{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:clamp(16px,1.2vw,19px);line-height:1.3;animation:fu .8s var(--ease) var(--t,0ms) both;transition:padding .4s var(--ease),color .3s}
.bx-list .ix{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none;transition:color .3s}
.bx-list li:hover{padding-left:10px;color:var(--red)}
.bx-list li:hover .ix{color:var(--red)}
/* mini illustrations */
.a-br,.a-curve{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.8s var(--ease) calc(var(--t,0ms) + 500ms) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.a-ln{fill:var(--line2);transform-box:fill-box;transform-origin:left;animation:grow 2.6s ease-in-out infinite alternate}
.a-ln.l2{animation-delay:-1.3s}
@keyframes grow{from{transform:scaleX(.35)}}
.a-cr{fill:var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.a-fr{fill:none;stroke:var(--line2);stroke-width:2}
.a-dot{fill:var(--line2)}
.a-bk{fill:color-mix(in srgb,var(--red) 22%,transparent);stroke:var(--red);stroke-width:1.5;animation:blk 4s var(--ease) infinite}
.a-bk.b2{animation-delay:-1.3s}.a-bk.b3{animation-delay:-2.6s}
@keyframes blk{0%,100%{opacity:.35}40%,60%{opacity:1}}
.a-wire{fill:none;stroke:var(--line2);stroke-width:2;stroke-dasharray:6 6;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
.a-node{fill:var(--panel2);stroke:var(--red);stroke-width:2.5}
.a-pulse{fill:var(--red);filter:drop-shadow(0 0 6px var(--red))}
.a-hdl{fill:none;stroke:var(--line2);stroke-width:1.5}
.a-anc{fill:var(--bg);stroke:var(--text);stroke-width:2}
.a-hd{fill:var(--red)}
@media (max-width:1199px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bx{min-height:0}}
@media (max-width:640px){.bento{grid-template-columns:1fr}}

/* ---------- approach: the original boxes that open on hover ---------- */
.approach-page .page-head{display:block;margin-bottom:clamp(20px,2.6vw,36px)}
.approach-grid{border:0}
.approach-grid>*{border-inline:1px solid var(--line)}
.approach-grid>:first-child{border-top:1px solid var(--line);border-radius:14px 14px 0 0}
.approach-grid>:last-child{border-radius:0 0 14px 14px}
.principle{position:relative;background:color-mix(in srgb,var(--panel) 80%,transparent);border-bottom:1px solid var(--line2);padding:clamp(18px,2.2vw,28px) clamp(20px,2.4vw,32px);cursor:pointer;transition:background-color .35s,border-color .35s,box-shadow .35s}
.principle:last-child{border-bottom:1px solid var(--line)}
.principle::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--expo)}
.principle.is-active{background:color-mix(in srgb,var(--panel2) 92%,transparent);cursor:default}
.principle.is-active::before{transform:scaleY(1)}
.principle:not(.is-active):hover{background:color-mix(in srgb,var(--panel2) 70%,transparent)}
.principle-trigger{display:block;width:100%;text-align:left;cursor:inherit;font:inherit;letter-spacing:inherit;color:inherit}
.principle-trigger:focus-visible{outline:none}
.principle:has(.principle-trigger:focus-visible){outline:2px solid var(--red);outline-offset:-2px}
.pn{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--red);margin-bottom:6px}
.ptoggle{position:absolute;top:clamp(18px,2.2vw,28px);right:clamp(20px,2.4vw,32px);font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.ptoggle-open{display:none;color:var(--red)}
.ptoggle-closed{color:var(--muted)}
.principle.is-active .ptoggle-open{display:inline}
.principle.is-active .ptoggle-closed{display:none}
.principle h2{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.7vw,26px);line-height:1.2;letter-spacing:-.01em;color:var(--muted);padding-right:80px;transition:color .3s}
.principle.is-active h2,.principle:hover h2{color:var(--text)}
.principle-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--expo)}
.principle.is-active .principle-collapse{grid-template-rows:1fr}
.principle-body{min-height:0;overflow:hidden;opacity:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;transition:opacity .3s ease,translate .5s var(--ease);translate:0 10px}
.principle.is-active .principle-body{opacity:1;translate:0 0;padding-top:14px;transition:opacity .4s ease .15s,translate .6s var(--ease) .1s}
.principle-copy{display:grid;gap:8px;color:var(--muted);font-size:15.5px}
.principle-copy strong{color:var(--text)}
.punch{font-family:var(--display);font-size:clamp(16px,1.3vw,20px);color:var(--text);font-weight:600;line-height:1.35;margin-top:8px}
html:not(.js) .principle-collapse{grid-template-rows:1fr}
html:not(.js) .principle-body{opacity:1;translate:none;padding-top:14px}
.demo{border:1px solid var(--line);border-radius:10px;padding:18px;background:color-mix(in srgb,var(--bg) 40%,transparent)}
/* 01 flow */
.flow-svg{width:100%;height:auto;overflow:visible}
.flow-line{stroke:var(--line2);stroke-width:2;fill:none}
.flow-node{fill:var(--panel2);stroke:var(--red);stroke-width:2}
.flow-pulse{fill:var(--red);filter:drop-shadow(0 0 6px var(--red))}
.flow-labels{display:flex;justify-content:space-between;margin-top:10px;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* 02 gauge */
.demo-gauge{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.gauge{position:relative;width:112px;height:112px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:9}
.gauge .trk{stroke:var(--line2)}
.gauge .fil{stroke:#22c55e;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1.4s var(--ease) .2s}
.is-active .gauge .fil{stroke-dashoffset:4}
.gauge span{position:absolute;inset:0;display:grid;place-items:center;font:700 28px var(--display)}
.gauge-m{display:flex;gap:18px;font:500 11px var(--mono);color:var(--muted);text-align:center}
.gauge-m dt{text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.gauge-m dd{color:var(--text);font-weight:600;font-size:14px}
/* 03 font stage (sits on the right like the other demos) */
.ft-toggle{display:flex;gap:2px;border:1px solid var(--line2);border-radius:var(--r);padding:3px;margin-bottom:14px}
.ft-toggle button{flex:1;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:9px 10px;border-radius:var(--r);color:var(--muted);transition:background-color .25s,color .25s}
.ft-toggle button[aria-pressed=true]{background:var(--fill);color:#fff}
.fstage{--split:50%;position:relative;height:clamp(150px,13vw,190px);border:1px solid var(--line2);border-radius:10px;overflow:hidden;user-select:none}
.fs-layer{position:absolute;inset:0;padding:clamp(14px,1.6vw,22px);display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden}
.fs-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r);align-self:flex-start;border:1px solid currentColor}
.fs-bad{background:#ffe94a;color:#a8006c;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.fs-bad p{font-family:Kablammo,"Comic Sans MS","Chalkboard SE","Comic Neue",cursive;font-size:clamp(22px,2vw,32px);line-height:1.05;transform:rotate(-2.5deg);text-shadow:3px 3px 0 #00c8ff}
.fs-good{background:var(--panel);clip-path:inset(0 0 0 var(--split))}
.fs-good .fs-tag{color:var(--red);align-self:flex-end}
.fs-good p{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.8vw,28px);line-height:1.12;letter-spacing:-.02em;text-align:right}
.fs-handle{position:absolute;top:0;bottom:0;left:var(--split);width:2px;margin-left:-1px;background:var(--red);pointer-events:none}
.fs-handle i{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:var(--fill);box-shadow:0 0 0 6px var(--glow);display:grid;place-items:center;color:#fff;font-style:normal;font-size:14px;letter-spacing:2px}
.fs-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.fstage:has(.fs-range:focus-visible){outline:2px solid var(--red);outline-offset:3px}
html.kablammo-mode body,html.kablammo-mode body *{font-family:"Crafty Girls","Comic Sans MS","Chalkboard SE","Comic Neue",cursive!important}
html.kablammo-mode h1,html.kablammo-mode h2,html.kablammo-mode .sec-title,html.kablammo-mode .fs-bad p{font-family:Kablammo,Impact,"Comic Sans MS",fantasy!important}
/* 04 motion slider */
.stress-frame{position:relative;height:120px;border:1px solid var(--line);border-radius:8px;background:var(--bg);overflow:hidden;display:grid;place-items:center}
.stress-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 22px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);animation:spring calc(1.8s - var(--i,0) * .25s) ease-in-out infinite}
@keyframes spring{0%,100%{transform:translateY(0) rotate(0) scale(calc(1 + var(--i,0) * .03))}50%{transform:translateY(calc(var(--i,0) * -7px)) rotate(calc(var(--i,0) * 2.5deg)) scale(calc(1 + var(--i,0) * .1))}}
.stress-card i{width:10px;height:10px;border-radius:50%;background:var(--red)}
.stress-card span{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stress-warn{position:absolute;left:50%;bottom:10px;transform:translate(-50%,8px);background:var(--fill);color:#fff;font:700 11px var(--mono);padding:6px 10px;border-radius:6px;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s}
.stress-frame.over .stress-card{animation:shake .3s linear infinite}
.stress-frame.over .stress-warn{opacity:1;transform:translate(-50%,0)}
.stress-frame.over{animation:distort .25s steps(2) infinite}
@keyframes shake{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-14px,8px) rotate(-6deg)}40%{transform:translate(12px,-10px) rotate(5deg)}60%{transform:translate(-10px,10px) rotate(-5deg)}80%{transform:translate(14px,-6px) rotate(6deg)}}
@keyframes distort{50%{filter:blur(1.2px) saturate(1.8) hue-rotate(15deg)}}
.stress-ctl{display:grid;gap:6px;margin-top:14px}
.stress-ctl label{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stress-ctl output{color:var(--red)}
.stress-ctl input{width:100%;accent-color:var(--fill)}
.stress-ticks{display:flex;justify-content:space-between;font:500 10px var(--mono);color:var(--muted)}
@media (max-width:760px){.principle-body{grid-template-columns:1fr}.principle h2{padding-right:56px}}

/* ---------- about: long read, the portrait follows the scroll ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,110px);align-items:start}
.about-media{position:sticky;top:calc(var(--hh) + 28px);display:grid;grid-template-columns:minmax(0,1fr) 2px;gap:clamp(14px,1.6vw,22px)}
.pfr{position:relative;aspect-ratio:4/5;max-height:calc(100svh - var(--hh) - 110px);border-radius:12px;overflow:hidden;background:var(--ph);border:1px solid var(--line)}
.pfr img{width:100%;height:100%;object-fit:cover}
.pfr::before,.pfr::after{content:"";position:absolute;width:44px;height:44px;border:3px solid var(--red);z-index:2;animation:bracket 1s var(--ease) .6s both}
.pfr::before{left:14px;top:14px;border-right:0;border-bottom:0}
.pfr::after{right:14px;bottom:14px;border-left:0;border-top:0}
@keyframes bracket{from{width:0;height:0;opacity:0}}
.pcap{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.read{position:relative;background:var(--line);border-radius:2px;overflow:hidden;max-height:calc(100svh - var(--hh) - 110px)}
.read i{position:absolute;inset:0;background:var(--red);transform-origin:top;transform:scaleY(var(--rp,0));box-shadow:0 0 10px var(--red)}
.about-copy h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.6vw,58px);line-height:1.06;letter-spacing:-.03em;margin:18px 0 28px}
.about-copy h1 em{font-style:normal;color:var(--red)}
.intro p{color:var(--muted);margin-bottom:16px;max-width:720px;font-size:clamp(16px,1.2vw,18px)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,28px);margin:clamp(36px,5vw,64px) 0;padding:clamp(20px,2.4vw,32px) 0;border-block:1px solid var(--line2)}
.stats div{display:flex;flex-direction:column-reverse;gap:6px}
.stats dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.stats dd{font-family:var(--display);font-weight:600;font-size:clamp(34px,3.6vw,60px);line-height:1;letter-spacing:-.03em}
.ab-sec{margin-top:clamp(48px,6vw,96px)}
.ab-h{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:12px;align-items:center;margin-bottom:clamp(22px,2.6vw,36px)}
.ab-h b{color:var(--red);font-weight:600}
.ab-h::after{content:"";height:1px;background:var(--line2);flex:1;max-width:240px}
.timeline{border-left:2px solid var(--line2);padding-left:clamp(22px,2.4vw,34px);display:grid;gap:clamp(30px,3.4vw,48px)}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;left:calc(clamp(22px,2.4vw,34px) * -1 - 8px);top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line2)}
.tl-item.now::before{background:var(--red);border-color:var(--red);box-shadow:0 0 14px var(--glow)}
.tl-item time{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.tl-item h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.8vw,28px);line-height:1.2;margin:4px 0 2px}
.tl-item h3 span{color:var(--muted);font-weight:400}
.tl-pl{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.tl-item ul{display:grid;gap:8px}
.tl-item li{position:relative;padding-left:22px;color:var(--muted);font-size:15.5px;max-width:680px}
.tl-item li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:var(--red)}
.clients{display:flex;flex-wrap:wrap;font-family:var(--display);font-weight:300;font-size:clamp(24px,2.6vw,42px);line-height:1.2;letter-spacing:-.03em}
.clients li{transition:color .3s}
.clients li::after{content:"\00a0/\00a0";color:var(--red)}
.clients li:last-child::after{content:""}
.clients li:hover{color:var(--red)}
.edu{display:grid;gap:18px}
.edu div{display:grid;gap:2px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.edu strong{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.5vw,22px)}
.edu span{color:var(--muted);font-size:15px}
.about-cta{margin-top:clamp(36px,4vw,56px);display:flex;gap:12px;flex-wrap:wrap}
@supports (animation-timeline:scroll()){
  .pfr img{animation:pfrZoom linear both;animation-timeline:scroll(root)}
  @keyframes pfrZoom{from{scale:1.16;translate:0 -3%}to{scale:1.02;translate:0 3%}}
  .read i{animation:readP linear both;animation-timeline:scroll(root)}
  @keyframes readP{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
@media (max-width:959px){
  .about-grid{grid-template-columns:1fr}
  .about-media{position:static;max-width:440px;grid-template-columns:1fr}
  .read{display:none}
  .pfr{max-height:none}
}

/* ---------- contact ---------- */
.contact-page{padding-bottom:0;display:flex;flex-direction:column}
.ct-orbit{position:absolute;right:-22vw;top:46%;width:min(76vw,1150px);aspect-ratio:1;translate:0 -50%;opacity:.55;pointer-events:none;z-index:0}
.ct-orbit svg{width:100%;height:100%;animation:spin 160s linear infinite}
.ct-orbit .w-tk{transform:none}
.ct-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,110px);align-items:start}
.big{font-family:var(--display);font-weight:300;font-size:clamp(48px,7.2vw,124px);line-height:.98;letter-spacing:-.05em;margin:18px 0 24px}
.big em{font-style:normal;font-weight:700;color:var(--red)}
.ct-lede{color:var(--muted);max-width:520px;font-size:clamp(16px,1.3vw,19px)}
.ct-rows{margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--line2);max-width:640px}
.ct-row{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:clamp(84px,9vw,120px) minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 12px;border-bottom:1px solid var(--line2);transition:color .35s}
.ct-row .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .35s}
.ct-row .v{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.01em}
.ct-row .x{font-family:var(--mono);font-size:13px;color:var(--red);transition:translate .4s var(--ease),color .35s}
a.ct-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--expo)}
a.ct-row:hover,a.ct-row:focus-visible{color:#fff}
a.ct-row:hover::before,a.ct-row:focus-visible::before{transform:scaleY(1)}
a.ct-row:hover .k,a.ct-row:hover .x,a.ct-row:focus-visible .k,a.ct-row:focus-visible .x{color:#fff}
a.ct-row:hover .x{translate:4px -4px}
.clock{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cform{position:relative;isolation:isolate;display:grid;gap:22px;padding:clamp(22px,2.6vw,38px);border-radius:20px;border:1px solid var(--line2);background:color-mix(in srgb,var(--panel) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 50px 120px -50px rgba(0,0,0,.7)}
.cform::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(320px circle at var(--mx,-500px) var(--my,-500px),var(--red),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.cf-h{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cf-h .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 var(--glow);animation:ping 2s ease-out infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 10px transparent}}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ff{position:relative;display:block;padding-top:20px}
.ff input,.ff textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line2);color:var(--text);padding:10px 0;border-radius:0;resize:vertical;font-size:17px}
.ff textarea{min-height:120px}
.ff span{position:absolute;left:0;top:31px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none;transition:top .35s var(--ease),font-size .35s var(--ease),color .3s}
.ff input:focus+span,.ff input:not(:placeholder-shown)+span,.ff textarea:focus+span,.ff textarea:not(:placeholder-shown)+span{top:0;font-size:11px;color:var(--red)}
.ff::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--expo);box-shadow:0 0 12px var(--red)}
.ff:focus-within::after{transform:scaleX(1)}
.ff input:focus,.ff textarea:focus{outline:0}
.ffoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.fstatus{font-family:var(--mono);font-size:13px;letter-spacing:.04em}
.hp-field{position:absolute;left:-9999px}
.ct-band{position:relative;z-index:1;overflow:hidden;margin-top:auto;padding-top:clamp(56px,7vw,110px)}
.ct-band>div{display:flex;align-items:center;width:max-content;border-top:1px solid var(--line);padding:14px 0 18px;animation:marq 46s linear infinite}
.ct-band span{font-family:var(--display);font-weight:700;font-size:clamp(52px,8vw,140px);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--ghost);padding:0 .25em;white-space:nowrap}
.ct-band i{font-style:normal;color:var(--red);font-size:clamp(28px,3vw,52px)}
@media (max-width:959px){.ct-grid{grid-template-columns:1fr}.ct-orbit{right:-40vw;top:30%;width:110vw}}
@media (max-width:560px){.frow{grid-template-columns:1fr}.ct-row{grid-template-columns:1fr auto;gap:4px 12px}.ct-row .k{grid-column:1/-1}}

/* ---------- simple pages ---------- */
.simple{display:grid;align-content:center;gap:24px;min-height:calc(100svh - 200px)}
.simple p{color:var(--muted);max-width:560px}

/* ---------- page transitions (cross-document View Transitions) ----------
   The opt-in (@view-transition{navigation:auto}) is inline in each page's head, see tools/build.mjs.
   The pages cross-fade in place (the default blend keeps the sum fully opaque, so nothing shows through),
   the header stays put, and the wheel travels between the home hero and the corner dock.
   The wheel/dock deliberately has no view-transition-name: its own snapshot could be drawn as a flat light-grey
   square mid-transition. The new page instead flies its live wheel/dock in from where the old one sat
   (Web Animations, see the head script in tools/build.mjs), inside the page cross-fade.
   html.vt = this page arrived through a transition: the carried-over parts skip their own entrance. */
::view-transition{background:var(--bg)}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-group(root){animation-duration:.4s;animation-timing-function:ease}
.vt .site-head,.vt .dock,.vt .wheel .w-svg,.vt .w-core,.vt .wheel .w-chip{animation:none}
.vt-pair .rail-enter,.vt-pair .proj-hero .media{animation:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  /* pages still cross-fade (no flash), but nothing travels or scales. A named group selector, such as the
     ::view-transition-group(root) rule above, is more specific than (*), so every named group is listed too
     (project images carry their own names, inline). The JS wheel/dock fly-in is skipped in the head script. */
  ::view-transition-group(*),::view-transition-group(root),::view-transition-group(head){animation-duration:0s!important}
  ::view-transition-old(*),::view-transition-new(*){animation-duration:.2s}
  :root{transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marq ul,.ct-band>div,.glow{animation:none!important}
  .io-on .io:not(.in){opacity:1;translate:none}
}
/* html.still = an automated screenshot browser (navigator.webdriver, set in the head). Lighthouse also reports
   webdriver but always emulates an Android phone or a Mac, so it is excluded and measures the real animated page.
   The studio screenshot script captures 0.5s after load, so it gets the finished state, not a mid-animation frame */
.still *,.still *::before,.still *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
.still .marq ul,.still .ct-band>div,.still .glow{animation:none!important}

/* ---------- plain descriptive ledes (SEO round): small, secondary text beside the creative headlines ---------- */
.ln a{color:var(--text);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.ln a:hover{color:var(--red)}
.hero-lede{margin-top:18px;max-width:700px;font-size:14px;line-height:1.6;color:var(--muted)}
.page-lede{max-width:520px;color:var(--muted);font-size:15px;line-height:1.65}
.approach-page .page-lede{margin-top:14px;max-width:720px}
.page-end{margin-top:clamp(24px,3vw,40px);max-width:720px;color:var(--muted);font-size:15px;line-height:1.65}
.ct-note{margin-top:14px;max-width:520px;color:var(--muted);font-size:15px;line-height:1.65}
.cs-cta{margin-top:clamp(28px,3vw,44px);max-width:720px;color:var(--muted);font-size:15.5px;line-height:1.65}
.rail-lede{flex:0 1 520px;margin-left:auto;align-self:flex-start;font-size:13px;line-height:1.5;color:var(--muted)}
@media (min-width:960px){.hero-lede{text-shadow:0 0 3px var(--bg),0 0 10px var(--bg),0 0 18px var(--bg)}}
@media (min-width:1800px){.hero-lede{max-width:720px;font-size:16px}}
@media (max-width:860px),(prefers-reduced-motion:reduce){.rail-lede{margin-left:0;flex:none;max-width:560px;font-size:14px}}
/* short desktop windows: tighten the hero's vertical rhythm so the lede does not push the home screen past the
   window (the mouse wheel turns the wheel there instead of scrolling) */
@media (min-width:960px) and (max-height:860px){
  .h-kick{margin-bottom:18px}
  .sec-ix{margin-top:14px}
  .hero-sub{margin-top:12px}
  .hero-cta{margin-top:22px}
  .hero-meta{margin-top:24px;padding-top:16px}
  .hero-lede{margin-top:12px;font-size:13px}
}