/* ══════════════════════════════════════════════════════════════
   THE ARCHIVE — infinite canvas portfolio
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Suecia';src:url('../fonts/fontspring-demo-29.ttf') format('truetype');font-weight:100;font-display:swap;unicode-range:U+20,U+2C,U+2E,U+30-33,U+35-39,U+3A-3B,U+3F,U+41-5A,U+61-7A}
@font-face{font-family:'Suecia';src:url('../fonts/fontspring-demo-28.ttf') format('truetype');font-weight:400;font-display:swap;unicode-range:U+20,U+2C,U+2E,U+30-33,U+35-39,U+3A-3B,U+3F,U+41-5A,U+61-7A}
@font-face{font-family:'Suecia';src:url('../fonts/fontspring-demo-27.ttf') format('truetype');font-weight:500;font-display:swap;unicode-range:U+20,U+2C,U+2E,U+30-33,U+35-39,U+3A-3B,U+3F,U+41-5A,U+61-7A}
@font-face{font-family:'Suecia';src:url('../fonts/fontspring-demo-25.ttf') format('truetype');font-weight:700;font-display:swap;unicode-range:U+20,U+2C,U+2E,U+30-33,U+35-39,U+3A-3B,U+3F,U+41-5A,U+61-7A}

:root{
  --ink:#040107;--paper:#fff;--pink:#ff1e8e;--violet:#8b2be2;--blue:#5b3df5;
  --mute:rgba(255,255,255,.55);--hair:rgba(255,255,255,.13);
  --display:'Suecia','Poppins',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;
  --pad:clamp(16px,2.4vw,34px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--ink);color:var(--paper);font-family:var(--body);font-weight:300;
  -webkit-font-smoothing:antialiased;touch-action:none;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--pink)}

/* grain + edge vignette */
.grain{position:fixed;inset:-150%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-4%)}100%{transform:translate(0,0)}}
.edge{position:fixed;inset:0;z-index:50;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 72% at 50% 50%,transparent 42%,rgba(4,1,7,.55) 78%,rgba(4,1,7,.92) 100%),
    radial-gradient(60% 50% at 12% 100%,rgba(139,43,226,.20),transparent 70%),
    radial-gradient(55% 45% at 92% 6%,rgba(255,30,142,.14),transparent 70%);}

/* cursor */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:80;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:78px;height:78px;margin:-39px 0 0 -39px;border:1px solid rgba(255,255,255,.45);
  display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,opacity .3s}
.cursor__label{font-size:8px;letter-spacing:.16em;font-weight:500;opacity:.75}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#fff}
body.cur-link .cursor{width:104px;height:104px;margin:-52px 0 0 -52px;background:#fff;border-color:transparent}
body.cur-link .cursor__label{color:#000;opacity:1;mix-blend-mode:normal}
body.dragging .cursor{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(255,255,255,.9);border-color:transparent}
body.dragging .cursor__label{color:#000}
body.lb-open .cursor,body.lb-open .cursor-dot{opacity:0}
body.menu-open .cursor,body.menu-open .cursor-dot{opacity:0}   /* native pointer takes over on the panel */
@media (hover:none),(max-width:900px){.cursor,.cursor-dot{display:none}}

/* ═══════════ CANVAS ═══════════ */
.stage{position:fixed;inset:0;z-index:1;cursor:none;overflow:hidden;contain:strict}
@media (hover:none){.stage{cursor:grab}}
.world{position:absolute;inset:0;transform-origin:0 0;will-change:transform}

.tile{
  position:absolute;top:0;left:0;overflow:hidden;border-radius:16px;
  background:#0b0611;will-change:transform,opacity;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  transition:box-shadow .45s var(--ease);
  contain:content;
}
.tile::after{content:'';position:absolute;inset:0;border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);pointer-events:none;z-index:3}
.tile__media{position:absolute;inset:0}
.tile__media video{position:absolute;inset:0;z-index:1;background:#0b0611}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;
  transition:transform .85s var(--ease),filter .5s;filter:saturate(.85) contrast(1.02)}
.tile__shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 40%,rgba(4,1,7,.35));
  opacity:0;transition:opacity .5s var(--ease)}
.tile__play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) scale(.9);
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(4,1,7,.42);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  opacity:.9;transition:transform .5s var(--ease),background .4s,opacity .4s}
.tile__play svg{width:24px;height:24px;fill:#fff;margin-left:2px}
.tile.hot .tile__play{transform:translate(-50%,-50%) scale(1);background:rgba(255,30,142,.75);box-shadow:none}
.tile.hot{box-shadow:0 28px 70px rgba(139,43,226,.45),0 0 0 1px rgba(255,30,142,.35)}
.tile.hot img,.tile.hot video{transform:scale(1.07);filter:saturate(1.05) contrast(1)}
.tile.hot .tile__shade{opacity:1}

/* ═══════════ HUD ═══════════ */
.pill{
  position:relative;z-index:70;display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:100px;font-size:13px;font-weight:400;letter-spacing:.01em;
  background:rgba(255,255,255,.07);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:background .4s var(--ease),color .4s,transform .4s var(--ease),box-shadow .4s;
}
.pill:hover{background:#fff;color:#000;transform:translateY(-2px);box-shadow:inset 0 0 0 1px #fff,0 12px 30px rgba(0,0,0,.4)}
.pill svg{width:16px;height:16px}
.pill--back{position:fixed;top:var(--pad);left:var(--pad)}
.topright{position:fixed;top:var(--pad);right:var(--pad);z-index:85;display:flex;align-items:center;gap:10px}
.pill--quote svg{width:14px;height:14px}
.burger{display:flex;flex-direction:column;gap:4px;width:17px}
.burger i{height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
body.menu-open .burger i:nth-child(1){transform:translateY(2.75px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-2.75px) rotate(-45deg)}

/* same menu as the rest of the site, but this page keeps its circle wipe */
.menu{position:fixed;inset:0;z-index:75;background:rgba(4,1,7,.97);backdrop-filter:blur(20px);
  clip-path:circle(0% at calc(100% - 60px) 46px);transition:clip-path .8s var(--ease);
  overflow-y:auto;overscroll-behavior:contain}
body.menu-open .menu{clip-path:circle(150% at calc(100% - 60px) 46px)}
.menu__inner{min-height:100%;display:flex;flex-direction:column;
  padding:clamp(84px,12vh,128px) var(--pad) clamp(26px,4.5vh,48px)}
.menu__kicker{font-size:10px;letter-spacing:.35em;color:var(--pink)}

.menu__list{margin:auto;display:flex;flex-direction:column;gap:clamp(2px,.8vh,10px);
  width:max-content;max-width:100%;padding:clamp(26px,5vh,54px) 0}
.menu__list a{display:grid;grid-template-columns:clamp(28px,3.4vw,46px) auto;
  align-items:baseline;gap:clamp(12px,1.8vw,24px);
  font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.06;
  font-size:clamp(38px,9vw,104px);color:rgba(255,255,255,.88);transition:color .35s var(--ease)}
.menu__list a i{font-style:normal;font-family:var(--body);font-weight:400;text-align:right;
  font-size:clamp(9.5px,1.05vw,13px);letter-spacing:.16em;color:rgba(255,255,255,.28);transition:color .35s}
.menu__list a span{display:block;transition:transform .45s var(--ease)}
.menu__list a:hover{color:var(--pink)}
.menu__list a:hover i{color:var(--pink)}
.menu__list a:hover span{transform:translateX(clamp(6px,1vw,16px))}
.menu__list a.on,.menu__list a.on i{color:var(--pink)}

.menu__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;
  padding-top:clamp(20px,3vh,32px);border-top:1px solid var(--hair)}
.menu__reach{display:flex;flex-direction:column;gap:7px;
  font-size:clamp(12.5px,1.35vw,15px);color:var(--mute)}
.menu__reach > a{width:fit-content;transition:color .3s}
.menu__reach > a:hover{color:#fff}
.menu__social{display:flex;gap:16px;margin-top:10px}
.menu__social a{color:rgba(255,255,255,.4);transition:color .3s,transform .3s var(--ease)}
.menu__social a:hover{color:var(--pink);transform:translateY(-2px)}
.menu__social svg{width:18px;height:18px;display:block}

/* this page has no shared .btn, so the CTA pill is defined here */
.menu__cta{position:relative;display:inline-flex;align-items:center;gap:14px;overflow:hidden;
  padding:17px 32px;border-radius:100px;background:var(--paper);color:#000;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;
  transition:color .4s}
.menu__cta span,.menu__cta svg{position:relative;z-index:2}
.menu__cta svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.menu__cta::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--pink),var(--violet));
  transform:translateY(101%);transition:transform .5s var(--ease)}
.menu__cta:hover{color:#fff}
.menu__cta:hover::before{transform:translateY(0)}
.menu__cta:hover svg{transform:translate(3px,-3px)}

.menu__kicker,.menu__list a,.menu__foot{opacity:0;transform:translateY(22px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),color .35s var(--ease)}
body.menu-open .menu__kicker,
body.menu-open .menu__list a,
body.menu-open .menu__foot{opacity:1;transform:none}
body.menu-open .menu__kicker{transition-delay:.2s}
body.menu-open .menu__list a:nth-child(1){transition-delay:0.26s}
body.menu-open .menu__list a:nth-child(2){transition-delay:0.33s}
body.menu-open .menu__list a:nth-child(3){transition-delay:0.40s}
body.menu-open .menu__list a:nth-child(4){transition-delay:0.47s}
body.menu-open .menu__list a:nth-child(5){transition-delay:0.54s}
body.menu-open .menu__foot{transition-delay:0.61s}

@media(max-height:760px){
  .menu__list a{font-size:clamp(28px,6.2vw,62px)}
  .menu__list{padding:clamp(12px,2.5vh,26px) 0}
}
@media(max-width:760px){
  .menu__inner{padding-top:clamp(78px,11vh,104px)}
  .menu__list{gap:4px;padding:clamp(18px,4vh,38px) 0}
  .menu__foot{flex-direction:column;align-items:stretch;gap:22px}
  .menu__cta{justify-content:center}
}

.readout{position:fixed;left:var(--pad);bottom:var(--pad);z-index:70;pointer-events:none;
  padding:16px 22px 14px;border-radius:20px;background:rgba(4,1,7,.5);backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.readout__scene{font-size:9.5px;letter-spacing:.3em;color:var(--pink)}
.readout__title{font-family:var(--display);font-weight:700;font-size:clamp(26px,4.4vw,52px);line-height:.95;
  letter-spacing:-.02em;margin:6px 0 0}

.filters{position:fixed;left:50%;bottom:var(--pad);transform:translateX(-50%);z-index:70;
  display:flex;gap:6px;padding:6px;border-radius:100px;
  background:rgba(255,255,255,.06);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.chip{padding:9px 16px;border-radius:100px;font-size:10px;letter-spacing:.16em;font-weight:500;color:var(--mute);
  transition:color .35s,background .35s var(--ease)}
.chip:hover{color:#fff}
.chip.on{background:#fff;color:#000}

.tools{position:fixed;right:var(--pad);bottom:var(--pad);z-index:70;display:flex;align-items:center;gap:6px;
  padding:6px;border-radius:100px;background:rgba(255,255,255,.06);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.tool{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:var(--mute);
  transition:background .3s,color .3s}
.tool:hover{background:rgba(255,255,255,.14);color:#fff}
.tool--wide{width:auto;padding:0 14px;font-size:9.5px;letter-spacing:.18em;font-weight:500}
.tool__z{font-size:9.5px;letter-spacing:.1em;color:var(--mute);min-width:38px;text-align:center}

.hint{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:55;pointer-events:none;
  display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.26em;color:rgba(255,255,255,.8);
  padding:14px 22px;border-radius:100px;background:rgba(4,1,7,.55);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hint.gone{opacity:0;transform:translate(-50%,-50%) scale(.92)}
.hint__ring{width:9px;height:9px;border-radius:50%;background:var(--pink);animation:ping 1.8s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,30,142,.55)}70%,100%{box-shadow:0 0 0 14px rgba(255,30,142,0)}}

/* ═══════════ LIGHTBOX ═══════════ */
.lb{position:fixed;inset:0;z-index:90;background:rgba(4,1,7,.93);backdrop-filter:blur(24px);
  display:grid;place-items:center;padding:clamp(50px,8vh,90px) clamp(16px,6vw,110px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
body.lb-open .lb{opacity:1;visibility:visible}
.lb__figure{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:100%;max-height:100%;
  transform:scale(.96) translateY(14px);transition:transform .6s var(--ease)}
body.lb-open .lb__figure{transform:none}
.lb__media{display:grid;place-items:center;max-height:70vh}
.lb__media img,.lb__media video{max-width:min(88vw,1300px);max-height:70vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 40px 100px rgba(0,0,0,.7)}
.lb__cap{text-align:center}
.lb__client{font-size:9.5px;letter-spacing:.3em;color:var(--pink)}
.lb__title{font-family:var(--display);font-weight:700;font-size:clamp(20px,3.2vw,40px);line-height:1.05;
  letter-spacing:-.02em;margin:9px 0 10px}
.lb__meta{display:flex;align-items:center;justify-content:center;gap:14px;font-size:9.5px;letter-spacing:.2em;color:var(--mute)}
.lb__meta b{font-weight:400;padding:5px 11px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--hair)}
.lb__meta i{font-style:normal}
.lb__close{position:fixed;top:var(--pad);right:var(--pad);z-index:95;font-size:10px;letter-spacing:.2em;
  padding:12px 18px;border-radius:100px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background .3s,color .3s}
.lb__close:hover{background:#fff;color:#000}
.lb__nav{position:fixed;top:50%;transform:translateY(-50%);z-index:95;width:52px;height:52px;border-radius:50%;
  font-size:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background .3s,color .3s}
.lb__nav:hover{background:#fff;color:#000}
.lb__nav--prev{left:clamp(10px,2.5vw,30px)}
.lb__nav--next{right:clamp(10px,2.5vw,30px)}

@media(max-width:860px){
  .pill--back span{display:none}
  .pill--back{padding:12px}
  .pill--quote span{display:none}
  .pill--quote{padding:12px}
  .tools{display:none}
  /* stack the bottom furniture instead of overlapping it */
  .filters{bottom:var(--pad);max-width:calc(100vw - var(--pad) * 2);overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap}
  .readout{left:50%;right:auto;transform:translateX(-50%);text-align:center;
    bottom:calc(var(--pad) + 76px);padding:10px 20px 9px}
  .readout__scene{font-size:8.5px;letter-spacing:.26em}
  .readout__title{font-size:clamp(17px,5vw,24px);margin:4px 0 0}
  .hint{font-size:9px;letter-spacing:.18em;padding:12px 18px}
}
@media(max-width:420px){
  .readout__title{font-size:16px}
  .chip{padding:8px 13px;font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* the canvas furniture sits at z-70 and used to punch through the open panel:
   the readout, the filter chips and the zoom pill all landed on top of the
   contact block and the CTA. Fade them out while the menu is up. */
.readout,.filters,.tools,.pill--back,.pill--quote{
  transition:opacity .35s var(--ease),visibility .35s}
/* .hint keeps its own longer transition — restated so the transform is not lost */
.hint{transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s}
body.menu-open .readout,
body.menu-open .filters,
body.menu-open .tools,
body.menu-open .hint,
body.menu-open .pill--back,
body.menu-open .pill--quote{opacity:0;visibility:hidden;pointer-events:none}