/* P21 Portfolio — evidence dossiers */
.page-pf main>section{overflow-x:clip}
.mono{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--p3)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--mut);margin-bottom:22px}
.crumbs a:hover{color:var(--p3)}.crumbs b{color:var(--p3);font-weight:600}

/* hero */
.pf-hero{position:relative;padding:60px 0 0;background:linear-gradient(180deg,#fff,var(--lav) 100%);overflow:hidden}
.pf-hin{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end}
.pf-hin>*{min-width:0}
.pf-copy{padding-bottom:90px}
.pf-h1{font-size:clamp(34px,3.9vw,56px);margin:18px 0 22px;letter-spacing:-.03em}
.evd{position:relative;display:inline-block;padding:0 .12em}
.evd:before{content:"";position:absolute;inset:-.06em -.08em;border:3px solid var(--p);border-radius:50%;transform:rotate(-4deg);clip-path:inset(0 100% 0 0);animation:evdCirc .9s var(--ease) 1.2s forwards}
@keyframes evdCirc{to{clip-path:inset(0 0 0 0)}}
.pf-vis{position:relative;min-height:600px}
.wall{position:absolute;right:0;top:10px;width:92%;height:430px}
.tile{position:absolute;border-radius:14px;overflow:hidden;background:#fff;border:6px solid #fff;box-shadow:0 18px 40px rgba(92,56,180,.18);opacity:0;animation:tileIn .7s cubic-bezier(.3,1.3,.5,1) forwards}
.tile img{display:block;width:100%;height:100%;object-fit:cover}
.t1{left:4%;top:0;width:46%;height:46%;--r:-5deg;animation-delay:.4s}
.t2{right:0;top:4%;width:44%;height:42%;--r:4deg;animation-delay:.55s}
.t3{left:24%;top:40%;width:42%;height:40%;--r:2deg;animation-delay:.7s;z-index:2}
.t4{right:2%;top:52%;width:34%;height:38%;--r:-3deg;animation-delay:.85s}
.t5{left:0;top:56%;width:28%;height:34%;--r:5deg;animation-delay:1s}
@keyframes tileIn{from{opacity:0;transform:translateY(30px) rotate(0) scale(.9)}to{opacity:1;transform:rotate(var(--r))}}
.tile:hover{z-index:4}
.lens{position:absolute;left:10%;top:10%;width:120px;height:120px;border-radius:50%;border:6px solid var(--ink);box-shadow:0 0 0 3px #fff,0 20px 40px rgba(0,0,0,.2);backdrop-filter:saturate(1.6) brightness(1.08) contrast(1.1);-webkit-backdrop-filter:saturate(1.6) brightness(1.08) contrast(1.1);z-index:5;opacity:0;animation:fadeIn .4s 1.4s forwards,lensMove 11s ease-in-out 1.6s infinite}
.lens:after{content:"";position:absolute;right:-34px;bottom:-30px;width:44px;height:12px;border-radius:6px;background:var(--ink);transform:rotate(45deg)}
@keyframes lensMove{0%,100%{left:10%;top:8%}25%{left:62%;top:10%}50%{left:40%;top:48%}75%{left:70%;top:58%}}
.pf-eagle{position:absolute;left:-30px;bottom:0;width:48%;max-width:300px;z-index:6;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent 99%);mask-image:linear-gradient(90deg,#000 80%,transparent 99%)}
.pfq{position:absolute;right:0;bottom:36px;display:flex;gap:6px;z-index:6}
.pfq span{padding:8px 12px;border-radius:20px;background:#fff;border:1px solid var(--line);font-weight:800;font-size:13px;color:var(--mut);animation:pfqLit 6s infinite}
.pfq span:nth-child(2){animation-delay:2s}.pfq span:nth-child(3){animation-delay:4s}
@keyframes pfqLit{0%,30%{background:var(--p);color:#fff;border-color:var(--p)}34%,100%{background:#fff;color:var(--mut);border-color:var(--line)}}

/* work */
.wk-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:18px}
.filt{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.filt button{position:relative;padding:10px 14px;border:0;border-radius:11px;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--mut);cursor:pointer;transition:.25s}
.filt button sup{font-size:10px;margin-left:3px;color:var(--p)}
.filt button:hover{color:var(--ink)}
.filt button[aria-selected="true"]{background:var(--ink);color:#fff}
.filt button[aria-selected="true"] sup{color:#c9b3ff}
.catnote{min-height:58px;margin-bottom:24px;max-width:900px}
.catnote p{color:var(--mut);animation:fadeUp .4s var(--ease)}
.catnote b{color:var(--ink)}
.grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dossier{position:relative;display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden;opacity:0;transform:translateY(24px);transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .3s}
.dossier.vis{opacity:1;transform:none;transition-delay:calc(var(--k)*.08s)}
.dossier.out{opacity:0!important;transform:scale(.94)!important;transition-delay:0s!important}
.dossier.gone{display:none}
.dossier:hover{box-shadow:0 24px 50px rgba(92,56,180,.18)}
.dossier:before{content:"";position:absolute;left:22px;top:-1px;width:70px;height:8px;border-radius:0 0 8px 8px;background:var(--p);z-index:3}
.ds-vis{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--lav),#e6dcff);padding:18px;overflow:hidden}
.stamp{position:absolute;right:12px;bottom:12px;padding:5px 10px;border:2px solid var(--p3);border-radius:8px;background:rgba(255,255,255,.9);font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p3);transform:rotate(-6deg) scale(1.8);opacity:0}
.dossier.vis .stamp{animation:stampIn .45s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(.5s + var(--k)*.08s)}
@keyframes stampIn{to{transform:rotate(-6deg) scale(1);opacity:1}}
.mscr{height:100%;border-radius:10px;background:#fff;box-shadow:0 12px 30px rgba(92,56,180,.18);overflow:hidden;transition:transform .5s var(--ease)}
.dossier:hover .mscr{transform:translateY(-4px) scale(1.02)}
.ms-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#f4f1fa;border-bottom:1px solid var(--line)}
.ms-bar span{width:7px;height:7px;border-radius:50%;background:#d8d0ea}
.ms-bar em{margin-left:8px;font-style:normal;font-size:10.5px;font-weight:700;color:var(--mut)}
.ms-body{padding:10px;display:flex;flex-direction:column;gap:8px}
.ms-hero{height:48px;border-radius:7px;background:linear-gradient(135deg,var(--p3),#b44bff)}
.ms-hero.img{background:linear-gradient(135deg,#8fb2d9,#c7d9ee)}
.ms-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ms-row i{height:30px;border-radius:6px;background:var(--lav)}
.ms-srch{height:16px;border-radius:8px;border:1.5px solid var(--line);position:relative}
.ms-srch:after{content:"";position:absolute;right:6px;top:3px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--p)}
.ms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.ms-grid i{height:22px;border-radius:5px;background:var(--lav)}
.ms-grid i:nth-child(3n){background:#e6dcff}
.dossier.vis .ms-grid i,.dossier.vis .ms-row i{animation:msPulse 3s ease-in-out infinite}
.ms-grid i:nth-child(2),.ms-row i:nth-child(2){animation-delay:.3s!important}.ms-grid i:nth-child(5),.ms-row i:nth-child(3){animation-delay:.6s!important}
@keyframes msPulse{50%{background:#d6c6ff}}
.ms-split{display:grid;grid-template-columns:1fr 60px;gap:10px;align-items:center}
.ms-split i{display:block;height:8px;border-radius:4px;background:var(--lav);margin-bottom:6px}
.w70{width:70%}.w50{width:50%}
.ms-btn{display:block;width:60px;height:16px;border-radius:5px;background:var(--p);margin-top:6px}
.ms-phone{height:90px;border-radius:10px;border:3px solid var(--ink);background:linear-gradient(180deg,#e6dcff,#fff)}
.mimg{height:100%;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(92,56,180,.18)}
.mimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.dossier:hover .mimg img{transform:scale(1.05)}
.ds-b{padding:18px;display:flex;flex-direction:column;flex:1}
.ds-b h3{font-size:18px;margin:6px 0 12px;line-height:1.3}
.ds-b dl{display:grid;gap:4px;margin:0;font-size:14px}
.ds-b dt{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--p3);margin-top:6px}
.ds-b dd{margin:0;color:var(--ink)}
.ds-b dd.pend{color:var(--mut);font-size:13px;padding:6px 10px;border:1px dashed #cbbdf0;border-radius:8px;background:var(--lav2)}
.ds-link{margin-top:auto;padding-top:14px;font-weight:700;color:var(--p3)}
.ds-link:hover{color:var(--p)}
.wk-note{margin-top:22px;padding:14px 18px;border-radius:14px;background:#fff;border-left:3px solid var(--p);font-weight:600}

/* evidence */
.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ev-grid>*{min-width:0}
.rungs{display:flex;flex-direction:column-reverse;gap:10px;margin-top:22px}
.rung{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;border:1.5px solid var(--line);background:#fff;font:inherit;font-weight:800;font-size:16px;color:var(--ink);text-align:left;cursor:pointer;transition:.3s var(--ease)}
.rung:nth-child(1){margin-right:30%}.rung:nth-child(2){margin-right:15%}
.rung:hover{border-color:var(--p)}
.rung[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateX(8px)}
.rn{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--lav);color:var(--p3);font-size:14px}
.rung[aria-selected="true"] .rn{background:var(--p);color:#fff}
.evpanel{position:relative;min-height:320px;padding:28px;border-radius:24px;background:linear-gradient(160deg,var(--lav2),#fff);border:1px solid var(--line);box-shadow:var(--sh)}
.evp{display:none}
.evp.act{display:block;animation:fadeUp .45s var(--ease)}
.evp h3{font-size:26px;margin:6px 0 10px;letter-spacing:-.02em}
.evp p{color:var(--mut)}
.req{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.req li{position:relative;padding:10px 12px 10px 38px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:14.5px;opacity:0;animation:fadeUp .4s var(--ease) forwards}
.req li:nth-child(2){animation-delay:.1s}.req li:nth-child(3){animation-delay:.2s}.req li:nth-child(4){animation-delay:.3s}
.req li:before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:5px;background:var(--p) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/100%}
.meter3{position:absolute;left:28px;right:28px;bottom:18px;height:6px;border-radius:3px;background:var(--lav)}
.meter3 i{display:block;height:100%;width:33%;border-radius:3px;background:linear-gradient(90deg,var(--p),#b44bff);transition:width .5s var(--ease)}

/* permissions */
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pcard{padding:26px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.pcard h3{font-size:20px;margin:14px 0 8px}.pcard p{color:var(--mut)}
.pc-ic{display:block;width:52px;height:52px;border-radius:16px;background:var(--lav) center/26px no-repeat}
.pc-ic.perm{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f42f4' stroke-width='1.8'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.pc-ic.demo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f42f4' stroke-width='1.8'%3E%3Cpath d='M4 7h16M4 7l2-3h12l2 3v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E")}
.pc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pc-tags span{padding:6px 11px;border-radius:10px;background:var(--lav);color:var(--p3);font-weight:700;font-size:13px}
.pc-tags .dl{background:#fff4e6;color:#b25a00;border:1.5px dashed #f0c48a}
.pc-tags .cl{background:#e6f7ee;color:#1c7d4f}

@media (max-width:1100px){
 .pf-hin{grid-template-columns:1fr;gap:0}
 .pf-copy{padding-bottom:10px}
 .pf-vis{max-width:640px;min-height:560px}
 .grid6{grid-template-columns:1fr 1fr}
 .ev-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:700px){
 .pf-hero{padding-top:34px}
 .pf-vis{min-height:480px}
 .wall{width:100%;height:320px}
 .lens{width:80px;height:80px;border-width:4px}
 .pf-eagle{width:210px;left:-20px}
 .pfq{bottom:14px}.pfq span{font-size:11px;padding:6px 9px}
 .filt{width:100%}
 .filt button{flex:1 0 auto;font-size:13px;padding:9px 10px}
 .grid6{grid-template-columns:1fr}
 .rung:nth-child(1),.rung:nth-child(2){margin-right:0}
 .pm-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .tile{animation:none;opacity:1;transform:rotate(var(--r))}
 .lens{animation:none;opacity:1}
 .pfq span,.dossier.vis .ms-grid i,.dossier.vis .ms-row i{animation:none}
 .evd:before{animation:none;clip-path:none}
 .dossier.vis .stamp{animation:none;opacity:1;transform:rotate(-6deg)}
}