/* KA portfolio - styles */
:root{--paper:#ffffff;--ink:#151515;--muted:#8b8985;--line:rgba(21,21,21,.08);--line2:rgba(21,21,21,.16);--wash:#f4f3f0;--card:#ffffff;--ph:#6d6a64;--shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.08);--blend:multiply;--cutbg:transparent;
--f-serif:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--f-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#121212;--ink:#efede8;--muted:#8f8c86;--line:rgba(239,237,232,.08);--line2:rgba(239,237,232,.18);--wash:#1c1c1b;--card:#f4f2ee;--ph:#a9a59d;--shadow:0 6px 18px rgba(0,0,0,.4);--blend:normal;--cutbg:#f4f2ee}}
:root[data-theme="dark"]{--paper:#121212;--ink:#efede8;--muted:#8f8c86;--line:rgba(239,237,232,.08);--line2:rgba(239,237,232,.18);--wash:#1c1c1b;--card:#f4f2ee;--ph:#a9a59d;--shadow:0 6px 18px rgba(0,0,0,.4);--blend:normal;--cutbg:#f4f2ee}
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:15px;line-height:1.55}
button{font:inherit;color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 16px}}
/* draft banner */
.draft{font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);padding:8px 0}
.draft b{color:var(--ink);font-weight:600}
.ph{color:var(--ph);font-style:normal;border-bottom:1px dotted currentColor}
/* header */
header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:60px}
.logo{font-family:var(--f-serif);font-size:22px;letter-spacing:.2px;white-space:nowrap}
.sides{display:flex;align-items:baseline;gap:8px;font-family:var(--f-sans);font-weight:600;font-size:20px;line-height:1;letter-spacing:.04em}
.sides .sl{color:var(--muted);opacity:.5}
.sides .brand{color:var(--ink);margin-right:6px}
.aboutlink{border:0;background:none;padding:0;font:500 13px/1 var(--f-sans);color:var(--muted);cursor:pointer;margin-left:6px;align-self:center}
.aboutlink:hover,.aboutlink[aria-pressed="true"]{color:var(--ink)}
.aboutlink[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px}
.aboutpage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:72px 0 80px}
.aboutpage[hidden]{display:none}
.aboutpage h1{font:600 clamp(26px,3.6vw,40px)/1.1 var(--f-sans);letter-spacing:-.02em;margin:0 0 16px}
.ab-lead{font-size:17px;margin:0 0 12px}
.ab-more{color:var(--muted);margin:0 0 20px}
.ab-links{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
.ab-art{aspect-ratio:4/5;border:1px dashed var(--line2);border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:13px;padding:20px}
@media (max-width:720px){.aboutpage{grid-template-columns:1fr;gap:28px;padding:40px 0 56px}.ab-art{aspect-ratio:1}}
body.on-about .intro,body.on-about .cols,body.on-about #fopen,body.on-about #shown{display:none}
@media (max-width:520px){.top .wrap{gap:10px}.shown{display:none}.sides{font-size:17px}.fbtn{margin-left:auto}}
.about{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);padding:16px}
.about[hidden]{display:none}
.about .card{background:var(--paper);color:var(--ink);border:1px solid var(--line2);border-radius:12px;max-width:420px;width:100%;padding:26px 26px 22px;position:relative}
.about h2{font:600 18px/1.2 var(--f-sans);margin:0 0 10px;letter-spacing:-.01em}
.about p{margin:0 0 10px;color:var(--muted);font-size:14px}
.about .links{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin-top:12px}
.about .x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:22px;color:var(--ink);cursor:pointer;line-height:1}
.sides button{border:0;background:none;padding:2px 0;font:inherit;color:var(--muted);opacity:.55;cursor:pointer;letter-spacing:.5px}
.sides button[aria-pressed="true"]{color:var(--ink);opacity:1;border-bottom:1px solid currentColor}
.shown{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.views button{border:0;background:none;padding:6px 10px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
.views button[aria-pressed="true"]{color:var(--ink);background:var(--wash)}
.views button span{font-size:11px;opacity:.6;margin-left:3px}
.themebtn{border:1px solid var(--line2);background:none;border-radius:999px;width:34px;height:34px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);flex:none}
.themebtn svg{width:16px;height:16px}
.fbtn{border:1px solid var(--line2);background:none;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.fbtn i{font-style:normal;font-size:11px;background:var(--ink);color:var(--paper);border-radius:999px;padding:0 6px;margin-left:4px}
@media (min-width:1024px){.fbtn{display:none}}
/* intro */
.intro{padding:72px 0 40px}
.intro h1{font-family:var(--f-sans);font-weight:500;font-size:clamp(28px,4.2vw,48px);line-height:1.12;margin:0;max-width:20ch;letter-spacing:-.02em}
.intro p{margin:16px 0 0;color:var(--muted);max-width:52ch}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.social{display:flex;gap:18px;flex:none;padding-bottom:4px}
.social a{color:var(--muted);display:inline-flex;transition:color .2s}
.social a:hover{color:var(--ink)}
.social svg{width:20px;height:20px;fill:currentColor}
@media (max-width:640px){.intro{flex-direction:column;align-items:flex-start;gap:18px}}
/* chapters */
.chap{padding:28px 0 8px}
.yr{display:flex;align-items:center;gap:14px;margin:0 0 26px;color:var(--ink);opacity:.32;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.yr::after{content:"";flex:1;height:1px;background:currentColor;opacity:.5}
.proj{margin:0 0 10px}
.chap{margin-bottom:46px}
.ph2{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.ph2 h2{font-family:var(--f-sans);font-weight:600;font-size:24px;line-height:1.1;margin:0}
.ph2 .story{color:var(--muted);font-size:14px}
.ph2 .cnt{font-size:12px;color:var(--muted);margin-left:auto}
.sublbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 12px}
/* justified */
.just{position:relative}
.just .row{display:flex;gap:var(--gap,10px);margin-bottom:var(--gap,10px)}
.tile{position:relative;display:block;border:0;padding:0;margin:0;background:var(--wash);cursor:zoom-in;overflow:hidden;flex:none}
.tile img,.tile video{width:100%;height:100%;display:block;object-fit:contain}
.tile.cut{background:var(--cutbg)}
.tile.cut img{mix-blend-mode:var(--blend)}
.tile.px img,.tile.px video{image-rendering:pixelated}
.tile .vb{position:absolute;right:6px;bottom:6px;font-size:10px;font-weight:700;letter-spacing:.08em;background:rgba(0,0,0,.55);color:#fff;border-radius:3px;padding:1px 5px}
.tile .num{position:absolute;top:4px;left:4px;z-index:3;font:700 10.5px/15px var(--f-sans);background:rgba(20,20,20,.82);color:#fff;border-radius:999px;padding:0 6px;pointer-events:none}
.pb .sheet .tile .num{font-size:8.5px;line-height:12px;padding:0 3px;top:2px;left:2px}
.tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tile .xf{position:absolute;inset:0;opacity:0;animation:xf 6s ease-in-out infinite}
@keyframes xf{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
/* pixel beasts 6B */
.pb{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;align-items:start}
.pb .hero{aspect-ratio:1}
.pb .sheet{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.pb .sheet .tile{aspect-ratio:1}
@media (max-width:720px){.pb{grid-template-columns:1fr}.pb .sheet{grid-template-columns:repeat(6,1fr)}}
/* stickers 7C */
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pack{aspect-ratio:1;background:var(--wash)}
.pack .pn{position:absolute;left:8px;bottom:6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;opacity:0;transition:opacity .25s}
.pack:hover .pn,.pack:focus-visible .pn{opacity:1}
@media (max-width:640px){.packs{grid-template-columns:repeat(3,1fr);gap:6px}}
/* archive wall */
.seg{border:1px solid var(--line2);background:none;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.seg[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wall{position:relative;margin:10px 0 40px}
.wall .tile{position:absolute;transition:transform .35s ease,box-shadow .35s}
/* sections */
.chap.first{padding-top:8px}
.hlgap{height:34px}
.yc{margin-left:8px;opacity:.7}
.draftnote{font-size:12.5px;color:var(--muted);margin:-14px 0 14px}
.exprs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin-bottom:14px}
.exprs.sm{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:3px;margin:0}
.expr{aspect-ratio:1;background:var(--wash);display:block}
.expr img{width:100%;height:100%;object-fit:contain;display:block}
.c9{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;max-width:940px}
.c9cover{aspect-ratio:1;width:100%;height:auto;background:var(--wash)}
.c9cover img,.c9cover video{object-fit:contain}
.c9.mc{max-width:760px}
.c9.mc > .tile:first-child img{object-position:50% 100%}
.sq3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sq3 .tile{aspect-ratio:1;width:100%;height:auto;background:var(--wash)}
.sq3 .tile img,.sq3 .tile video{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.sq3{gap:6px}}
.c9.plates .tile,.c9.mc .tile:first-child{background:#fff}
.c9.plates .tile img{object-fit:contain}
.mcgif{position:relative}
.mcgif img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mcgif img:not(.f0){opacity:0}
.mcgif.run img{opacity:0;animation:mcflip var(--d) step-end infinite}
@keyframes mcflip{0%{opacity:1}33.333%{opacity:0}100%{opacity:0}}
.c9grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;aspect-ratio:1}
.c9grid .tile{width:100%;height:100%}
.c9grid .tile .num{font-size:9px;line-height:13px;padding:0 4px}
@media (max-width:480px){.c9{grid-template-columns:1fr}}
.pb6{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:820px}
.pb6 .sheet{grid-template-columns:repeat(3,1fr);gap:8px}
.archive:not(.open) .archbody{max-height:340px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent);pointer-events:none}
.ag{margin:0 0 34px}
.ag.med{margin-top:60px;padding-top:26px;border-top:1px solid var(--line2)}
.agl{font-family:var(--f-sans);font-weight:600;font-size:18px;line-height:1.2;margin:0 0 14px;letter-spacing:-.01em}
.ay{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;align-items:start}
.ayl{font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:600;padding-top:4px}
.ay .wall{margin:0 0 18px}
@media (max-width:640px){.ay{grid-template-columns:1fr;gap:6px}}
.tile.bgcycle{animation:bgcycle 6s infinite}
.tile.bgcycle img{mix-blend-mode:normal}
.lb .stage.bgcycle img{animation:bgcycle 6s infinite}
@keyframes bgcycle{0%,33.3%{background:#d8d4cc}50%,83.3%{background:#2e2c29}100%{background:#d8d4cc}}
.archbtn{text-align:center;margin:-6px 0 20px}
.archive.open .archbtn{margin-top:10px}
.tray{margin:30px 0 10px;padding:20px;border:1px dashed var(--line2);border-radius:10px;background:var(--wash)}
.trayh{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
.tray h5{font-size:13px;font-weight:600;margin:18px 0 10px}
.packrow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;margin-bottom:6px}
.pnum{font-size:11px;font-weight:700;background:rgba(20,20,20,.82);color:#fff;border-radius:999px;text-align:center;line-height:18px}
.pxcut{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:4px}
.pxcut .tile{aspect-ratio:1}
.pxcut.rm .tile{opacity:.45}
.pxcut .tile img,.pxcut .tile video{object-fit:cover}
.pxcut .tile .num{font-size:8.5px;line-height:12px;padding:0 3px;top:2px;left:2px}
.todo{margin:6px 0 0;padding:0 0 0 18px;font-size:12.5px}
/* closing */
.close{border-top:1px solid var(--line);margin-top:30px;padding:36px 0 60px}
.close h3{font-family:var(--f-sans);font-weight:500;font-size:clamp(22px,3vw,32px);margin:0 0 12px;line-height:1.2;letter-spacing:-.02em}
.close .links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;margin-top:18px}
.close .links a{color:var(--ink);display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.close .links a:hover{text-decoration:underline}
.close .links svg{width:16px;height:16px;fill:currentColor}
/* filter panel */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:40}
.scrim[hidden],.panel[hidden],.lb[hidden]{display:none}
.panel{position:fixed;z-index:41;background:var(--paper);top:0;right:0;bottom:0;width:320px;padding:24px;border-left:1px solid var(--line);overflow:auto}
@media (max-width:720px){.panel{top:auto;left:0;width:auto;max-height:72vh;border-left:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0}}
@media (min-width:1024px){.cols{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:start}
.panel,.panel[hidden]{display:block;position:sticky;top:84px;width:auto;padding:0;border:0;background:none;z-index:1;max-height:calc(100vh - 100px);overflow:auto}
.panel .row2{display:none !important}.scrim{display:none !important}}
.chip span{opacity:.55;font-size:11px;margin-left:3px}
.panel h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px;font-weight:600}
.panel h4:first-of-type{margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line2);background:none;border-radius:999px;padding:5px 11px;font-size:13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.panel .row2{display:flex;justify-content:space-between;align-items:center}
.panel .x{border:0;background:none;font-size:22px;cursor:pointer;line-height:1}
.panel .clr{margin-top:26px;border:0;background:none;text-decoration:underline;color:var(--muted);cursor:pointer;padding:0;font-size:13px}
/* lightbox 12B+C */
.lb{position:fixed;inset:0;z-index:60;background:#0e0e0e;display:flex;flex-direction:column;color:#efede8}
.lb .stage{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 60px 8px;min-height:0;position:relative}
.lb .stage img,.lb .stage video{width:100%;height:100%;object-fit:contain}
.lb .stage.cut img{background:#fff;width:auto;max-width:100%}
.lb .stage.px img,.lb .stage.px video{image-rendering:pixelated}
@media (max-width:640px){.lb .stage{padding:48px 34px 8px}}
.lb .info{text-align:center;font-size:12.5px;letter-spacing:.06em;opacity:.55;padding:8px 16px}
.lb .info b{font-weight:600;opacity:1}
.lb .strip{display:flex;gap:6px;justify-content:center;padding:4px 16px 22px;overflow-x:auto}
.lb .strip button{flex:none;width:52px;height:52px;border:0;padding:0;background:#222;opacity:.45;cursor:pointer}
.lb .strip button.on{opacity:1;outline:1px solid #efede8;outline-offset:2px}
.lb .strip img{width:100%;height:100%;object-fit:cover}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:none;color:#efede8;font-size:34px;cursor:pointer;opacity:.6;padding:10px}
.lb .nav.l{left:8px}.lb .nav.r{right:8px}
.lb .cls{position:absolute;top:10px;right:14px;border:0;background:none;color:#efede8;font-size:28px;cursor:pointer;opacity:.7;z-index:2}
.empty{color:var(--muted);font-size:14px;padding:6px 0 40px}
@media (prefers-reduced-motion:reduce){.tile.bgcycle,.lb .stage.bgcycle img{animation:none;background:#d8d4cc}.tile .xf{animation:none}.wall .tile{transition:none}}
.tile .num{display:none}