/* ════════════════════════════════════════════════════
   THE ARCHIVE — list & grid · project panel (v31 system)
   Geist · electric blue · rounded cards · pill UI
   ════════════════════════════════════════════════════ */
.arc{position:relative;--maxw:1680px;color:var(--ink);font-family:var(--f)}

/* ── head ── */
.arc__head{width:min(100%,var(--maxw));margin-inline:auto;padding:clamp(3.5rem,10vh,7.5rem) var(--pad) clamp(2rem,5vh,3.4rem);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.arc .lbl{display:block;color:var(--ink2);margin-bottom:1.4rem}
.arc__title{font-weight:400;font-size:clamp(3.4rem,10.5vw,11.5rem);line-height:.86;letter-spacing:-.06em}
.arc__tw{display:inline-block;overflow:hidden;padding:0 .04em .09em 0;margin-bottom:-.09em;vertical-align:bottom}
.arc__tw .ch{display:inline-block;will-change:transform}
.arc__title em{display:block;font-style:normal;font-family:var(--fm);font-size:max(.8rem,.085em);letter-spacing:.06em;text-transform:uppercase;color:var(--acid);margin-top:1.1rem;padding-left:.3em}
.arc__intro{font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.55;color:var(--ink2);max-width:50ch;margin-top:1.6rem}
.arc__count{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;font-weight:400;font-size:clamp(3.4rem,8vw,8.5rem);letter-spacing:-.06em;line-height:.8;font-variant-numeric:tabular-nums;color:var(--ink);padding-right:.04em}
.arc__count small{font-family:var(--fm);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:400}

/* ── sticky toolbar ── */
.arc__bar{position:sticky;top:var(--arcx);z-index:20;background:rgba(236,238,244,.86);backdrop-filter:blur(16px) saturate(0);-webkit-backdrop-filter:blur(16px) saturate(0);box-shadow:0 1px 0 var(--oline)}
.arc__bar-in{width:min(100%,var(--maxw));margin-inline:auto;padding:.75rem var(--pad);display:flex;align-items:center;gap:1rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;flex:1;min-width:0}
.chip{font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:.62rem .95rem;border-radius:99px;color:var(--ink);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--oline);display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;transition:background .35s var(--ease),color .35s,box-shadow .35s,transform .5s var(--ease)}
.chip b{font-weight:400;color:var(--grey);font-size:.6rem;font-variant-numeric:tabular-nums;transition:color .35s}
.chip:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--oline2)}
.chip:active{transform:scale(.96)}
.chip.is-on{background:var(--ink);color:#fff;box-shadow:none}
.chip.is-on b{color:var(--acid2)}
.views{flex:none;display:flex;padding:3px;border-radius:99px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--oline)}
.views button{font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:.55rem .95rem;border-radius:99px;color:var(--grey);transition:background .35s var(--ease),color .35s}
.views button:hover{color:var(--ink)}
.views button.is-on{background:var(--ink);color:#fff}

/* ── LIST VIEW ── */
.arc__body{width:min(100%,var(--maxw));margin-inline:auto;padding:1.2rem var(--pad) 7rem;position:relative}
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:3.2rem minmax(0,1.45fr) minmax(0,1fr) minmax(0,.75fr) 3.6rem 2.8rem;align-items:center;gap:1.4rem;padding:1.35rem 1rem;margin:0 -1rem;border-radius:18px;position:relative;cursor:pointer;isolation:isolate;transition:padding .6s var(--ease),color .4s}
.row::after{content:'';position:absolute;left:1rem;right:1rem;bottom:0;height:1px;background:var(--oline);transition:opacity .3s}
.row::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--stage);transform:scaleY(.4);opacity:0;transition:transform .6s var(--ease),opacity .35s;z-index:-1}
.row:hover,.row:focus-visible{padding-left:1.8rem;color:#fff}
.row:hover::before,.row:focus-visible::before{transform:none;opacity:1}
.row:hover::after,.row:focus-visible::after{opacity:0}
.row__n{font-family:var(--fm);font-size:.66rem;color:var(--grey);letter-spacing:.04em;font-variant-numeric:tabular-nums;transition:color .4s}
.row__t{font-weight:500;font-variation-settings:normal;font-size:clamp(1.3rem,2.4vw,2.35rem);letter-spacing:-.04em;line-height:1.02;display:flex;align-items:center;gap:.8rem;min-width:0}
.row__tt{position:relative;padding-bottom:.08em}
.row__tt::after{content:'';position:absolute;left:0;right:0;bottom:-.06em;height:1px;background:var(--acid2);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.row:hover .row__tt::after,.row:focus-visible .row__tt::after{transform:scaleX(1)}
.flag{flex:none;font-family:var(--fm);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;background:var(--acid);color:#fff;padding:.32rem .55rem;border-radius:99px;font-weight:500}
.row__tag{font-size:1rem;line-height:1.4;color:var(--ink2);transition:color .4s}
.row:hover .row__tag,.row:focus-visible .row__tag{color:rgba(255,255,255,.62)}
.row__cat{font-family:var(--fm);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);transition:color .4s}
.row:hover .row__cat,.row:focus-visible .row__cat{color:var(--acid2)}
.row__y{font-family:var(--fm);font-size:.66rem;color:var(--grey);font-variant-numeric:tabular-nums;transition:color .4s}
.row:hover .row__n,.row:hover .row__y{color:rgba(255,255,255,.55)}
.row__a{justify-self:end;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--oline2);transition:transform .6s var(--ease),background .4s,box-shadow .4s,color .4s}
.row__a svg,.card__open svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.row:hover .row__a,.row:focus-visible .row__a{background:var(--acid);box-shadow:none;color:#fff;transform:rotate(45deg)}
.row.is-hidden{display:none}
@media(max-width:900px){
  .row{grid-template-columns:2rem minmax(0,1fr) auto;gap:.8rem;padding:1.1rem .8rem;margin:0 -.8rem}
  .row::after{left:.8rem;right:.8rem}
  .row:hover,.row:focus-visible{padding-left:1.1rem}
  .row__tag,.row__y,.row__a{display:none}
  .row__cat{font-size:.58rem;text-align:right}
}

/* floating cover that follows the cursor over the list */
.peek{position:fixed;top:0;left:0;width:clamp(240px,24vw,400px);aspect-ratio:16/10;border-radius:18px;overflow:hidden;pointer-events:none;z-index:30;opacity:0;transition:opacity .35s;box-shadow:0 40px 90px -24px rgba(8,10,30,.55);will-change:transform;background:var(--stage)}
.peek img,.peek canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .35s,transform .9s var(--ease)}
.peek img.on,.peek canvas.on{opacity:1;transform:none}

/* ── GRID VIEW ── (scoped so featured-work .card rules can't leak in) */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 1.4rem;padding-top:1.6rem}
.arc .card{position:relative;cursor:pointer;display:flex;flex-direction:column;gap:1rem;border-radius:22px;outline-offset:6px}
.arc .card.is-hidden{display:none}
.arc .card__shot{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--stage);transform:translateZ(0)}
.arc .card__shot img,.arc .card__shot canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.arc .card:hover .card__shot img,.arc .card:hover .card__shot canvas{transform:scale(1.06)}
.arc .card__shot::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.card__badge{position:absolute;top:.9rem;left:.9rem;z-index:1;font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;padding:.42rem .7rem;border-radius:99px;background:rgba(12,13,18,.55);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:.45rem}
.card__badge.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acid2);box-shadow:0 0 0 3px rgba(125,139,255,.25)}
.card__open{position:absolute;right:.9rem;bottom:.9rem;z-index:1;width:3rem;height:3rem;border-radius:50%;background:var(--acid);color:#fff;display:grid;place-items:center;transform:scale(0) rotate(-45deg);transition:transform .6s var(--ease)}
.arc .card:hover .card__open,.arc .card:focus-visible .card__open{transform:none}
.arc .card__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:start;padding:0}
.arc .card__t{font-weight:500;font-size:1.4rem;letter-spacing:-.035em;line-height:1.08}
.arc .card__tag{font-size:.95rem;line-height:1.45;color:var(--ink2);margin-top:.35rem}
.arc .card__cat{font-family:var(--fm);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);text-align:right;line-height:1.8}
.arc .card--big{grid-column:span 2}
.arc .card--big .card__shot{aspect-ratio:16/8.3}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid{grid-template-columns:1fr;gap:2rem}.arc .card--big{grid-column:auto}.arc .card--big .card__shot{aspect-ratio:16/10}}
.arc__empty{padding:5rem 0;text-align:center;font-size:1.4rem;letter-spacing:-.02em;color:var(--grey);display:none}
.arc__empty.on{display:block}
@media(max-width:760px){
  .arc__head{grid-template-columns:1fr;gap:1.4rem}
  .arc__count{flex-direction:row;align-items:baseline;gap:.8rem;font-size:3.2rem}
  .arc__bar-in{padding:.6rem var(--pad);gap:.6rem}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--pad) * -1);padding-left:var(--pad);-webkit-mask:linear-gradient(90deg,transparent,#000 var(--pad),#000 88%,transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{padding:.58rem .85rem}
}

/* ════════════════════════════════════════════════════
   PROJECT PANEL
   ════════════════════════════════════════════════════ */
#pm{position:fixed;inset:0;z-index:1200;visibility:hidden;pointer-events:none;transition:visibility 0s linear .9s;--pp:clamp(1.1rem,2.6vw,2.2rem)}
#pm.open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.pm__ov{position:absolute;inset:0;background:rgba(8,9,14,.5);backdrop-filter:blur(14px) saturate(.4);-webkit-backdrop-filter:blur(14px) saturate(.4);opacity:0;transition:opacity .6s var(--ease)}
#pm.open .pm__ov{opacity:1}
.pm__panel{position:absolute;top:12px;right:12px;bottom:12px;width:min(calc(100% - 24px),920px);background:#f5f6fa;color:var(--ink);border-radius:28px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-shadow:0 50px 120px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.6);transform:translate3d(calc(100% + 40px),0,0) scale(.96);transform-origin:100% 50%;transition:transform .9s var(--ease2);scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
#pm.open .pm__panel{transform:none}
.pm__prog{position:sticky;top:0;height:0;z-index:4}
.pm__prog i{position:absolute;left:0;top:0;display:block;height:2px;width:0;background:linear-gradient(90deg,var(--acid),var(--acid2));border-radius:2px}
.pm__top{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem var(--pp);background:rgba(245,246,250,.82);backdrop-filter:blur(14px) saturate(0);-webkit-backdrop-filter:blur(14px) saturate(0)}
.pm__idx{color:var(--grey);font-variant-numeric:tabular-nums}
.pm__nav{display:flex;gap:.35rem}
.pm__nav button{width:2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px var(--oline);transition:background .35s,color .35s,box-shadow .35s,transform .5s var(--ease)}
.pm__nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pm__nav button:hover{background:var(--acid);color:#fff;box-shadow:none}
.pm__nav .pm__x{background:var(--ink);color:#fff;box-shadow:none;margin-left:.3rem}
.pm__nav .pm__x:hover{background:var(--acid);transform:rotate(90deg)}
.pm__in{will-change:transform}
.pm__shot{position:relative;margin:0 var(--pp);aspect-ratio:16/10;border-radius:20px;background:var(--stage);overflow:hidden}
.pm__shot #pmImgWrap{position:absolute;inset:0}
.pm__shot img,.pm__shot canvas{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pm__shot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.pm__shot .btn{background:#fff;color:var(--ink)}
.pm__shot.live img,.pm__shot.live canvas,.pm__shot.live .btn{display:none}
.pm__body{padding:clamp(1.8rem,4vh,2.8rem) var(--pp) var(--pp);display:flex;flex-direction:column;gap:1.4rem}
.pm__cat{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.pm__cat span{font-family:var(--fm);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.4rem .7rem;border-radius:99px;box-shadow:inset 0 0 0 1px var(--oline2);color:var(--ink)}
.pm__st.live{background:var(--acid);color:#fff!important;box-shadow:none!important}
.pm__st.live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:.45rem;vertical-align:.08em}
.pm__name{font-weight:400;font-size:clamp(2.6rem,6vw,5.4rem);line-height:.92;letter-spacing:-.055em}
.pm__tag{font-size:clamp(1.15rem,1.8vw,1.55rem);line-height:1.3;letter-spacing:-.02em;color:var(--acid);max-width:34ch}
.pm__desc{font-size:1.04rem;line-height:1.65;color:var(--ink2);max-width:62ch}
.pm__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--oline);border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--oline);margin-top:.4rem}
.pm__meta div{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.1rem;background:#fff}
.pm__meta .mono{color:var(--grey);font-size:.6rem}
.pm__meta b{font-weight:500;font-size:.98rem;letter-spacing:-.015em}
.pm__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.2rem;padding-top:1.2rem}
.pm__lbl{font-family:var(--fm);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:.9rem}
.pm__feats li{position:relative;padding:.75rem 0 .75rem 1.6rem;border-bottom:1px solid var(--oline);font-size:.98rem;line-height:1.4;color:var(--ink)}
.pm__feats li::before{content:'';position:absolute;left:0;top:1.18rem;width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px rgba(47,69,255,.12)}
.pm__stack{display:flex;flex-wrap:wrap;gap:.4rem}
.pm__stack span{font-family:var(--fm);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;padding:.48rem .75rem;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--oline)}
.pm__cta{display:flex;flex-direction:column;gap:.5rem;margin-top:1.6rem}
.pm .btn{font-size:.76rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:1rem 1.3rem;border-radius:99px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--oline2);display:inline-flex;align-items:center;justify-content:center;gap:.6rem;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),box-shadow .45s}
.pm .btn::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--acid);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease);z-index:-1}
.pm .btn:hover{color:#fff;box-shadow:none}.pm .btn:hover::before{transform:scaleX(1);transform-origin:left}
.pm .btn--solid{background:var(--ink);color:#fff;box-shadow:none}
.pm__shot .btn.btn--solid{background:#fff;color:var(--ink)}
.pm__shot .btn.btn--solid:hover{color:#fff}
#pm .pm__shot .btn{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:2;white-space:nowrap}
.pm__note{font-family:var(--fm);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);text-align:center;margin-top:.3rem}
@media(max-width:700px){.pm__grid{grid-template-columns:1fr;gap:1.6rem}.pm__meta{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* gallery — films autoplay muted while visible, images lazy-load */
.pm__gallery{columns:2;column-gap:.8rem;padding-top:1.4rem;counter-reset:fig}
.pm__gallery figure{position:relative;border-radius:18px;overflow:hidden;background:var(--stage);min-height:6rem;margin-bottom:.8rem;break-inside:avoid;transform:translateZ(0)}
.pm__gallery figure:first-child{column-span:all}
.pm__gallery img{width:100%;height:auto;display:block}
.pm__gallery video{width:100%;height:auto;max-height:82svh;margin:0 auto;display:block;background:#000}
.pm__gallery figure::after{counter-increment:fig;content:'0' counter(fig);position:absolute;left:.9rem;top:.8rem;font-family:var(--fm);font-size:.6rem;letter-spacing:.06em;color:#fff;padding:.3rem .5rem;border-radius:99px;background:rgba(12,13,18,.45);backdrop-filter:blur(6px);pointer-events:none}
.pm__snd{position:absolute;right:.8rem;bottom:.8rem;z-index:1;font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;padding:.5rem .8rem;border-radius:99px;background:rgba(12,13,18,.55);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s}
.pm__snd:hover,.pm__snd[aria-pressed="true"]{background:var(--acid)}
@media(max-width:560px){.pm__gallery{columns:1}}

/* next project */
.pm__next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.2rem;margin-top:1.6rem;padding:1rem 1.2rem 1rem 1rem;border-radius:22px;background:var(--stage);color:#fff;transition:background .5s var(--ease)}
.pm__next:hover{background:#15172a}
.pm__next-lbl{grid-column:1/-1;color:var(--acid2);padding:.2rem .2rem 0}
.pm__next-img{width:clamp(96px,16vw,150px);aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#000}
.pm__next-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pm__next:hover .pm__next-img img{transform:scale(1.08)}
.pm__next-t{font-weight:400;font-size:clamp(1.3rem,2.4vw,2.2rem);letter-spacing:-.045em;line-height:1}
.pm__next-a{width:3rem;height:3rem;border-radius:50%;background:var(--acid);display:grid;place-items:center;transition:transform .6s var(--ease)}
.pm__next-a svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pm__next:hover .pm__next-a{transform:translateX(4px)}

/* mobile: the panel becomes a bottom sheet */
@media(max-width:700px){
  .pm__panel{top:max(10px,env(safe-area-inset-top));left:0;right:0;bottom:0;width:100%;border-radius:24px 24px 0 0;transform:translate3d(0,105%,0);transform-origin:50% 100%}
  .pm__shot{border-radius:16px}
  .pm__top{padding:.7rem var(--pp)}
  .pm__nav button{width:2.5rem;height:2.5rem}
}