:root{--bg:#0e0b2b;--panel:#1a1545;--ink:#f4f1ff;--muted:#a9a3d6;--on:#0e0b2b;--mint:#00e5a0;--pink:#ff4fa3;--yel:#ffd23f;--blue:#6a8dff;--mars:#ff7a45;
--head:'Bricolage Grotesque',system-ui,sans-serif;--body:'Instrument Sans',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
}
[data-theme="Light"]{--bg:#fff7e8;--panel:#ffffff;--ink:#0e0b2b;--muted:#5b5680}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.05rem/1.6 var(--body);overflow-x:clip}
[data-theme="Dark"] body{background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.6px),radial-gradient(rgba(255,255,255,.3) 1px,transparent 1.6px);background-size:170px 170px,110px 110px;background-position:0 0,55px 70px}
a{color:inherit}
:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}
h1,h2,h3{font-family:var(--head);line-height:1.05;margin:0;font-weight:800}
.bar{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-top:1.2rem;padding-bottom:1.2rem}
.brand{font:800 1.4rem var(--head);text-decoration:none;display:flex;align-items:center;gap:.5rem}
.logo{width:36px;height:36px;color:var(--ink);flex:none}
.bar nav{display:flex;gap:1.4rem;margin-right:auto;flex-wrap:wrap}
.bar nav a{font-weight:600;text-decoration:none;border-bottom:3px solid transparent}
.bar nav a:hover{border-color:var(--pink)}
.btn{display:inline-block;font:800 .95rem var(--head);padding:.7rem 1.2rem;background:var(--mint);color:var(--on);text-decoration:none;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.pink{background:var(--pink)}.btn.out{background:transparent;color:var(--ink)}
.hero{display:grid;grid-template-columns:1fr 280px;gap:2rem;align-items:center;padding-top:2.5rem}
.hero h1{font-size:clamp(2.5rem,7vw,4.6rem);letter-spacing:-.02em}
.hero em{font-style:normal;background:var(--mint);color:var(--on);padding:0 .18em;display:inline-block;transform:rotate(-1.5deg)}
.hero p{max-width:34em;color:var(--muted);font-size:1.15rem;margin:1.2rem 0 1.6rem}
.cta{display:flex;gap:.9rem;flex-wrap:wrap}
.port{position:relative;width:260px;height:260px;margin:auto}
.port .ph{position:absolute;inset:22px;border-radius:50%;overflow:hidden;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--pink);background:linear-gradient(160deg,var(--blue),var(--pink))}
.port .ph svg,.port .ph img{width:100%;height:100%;object-fit:cover}
.orbit{position:absolute;inset:-10px;animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.creds{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem;padding:0;margin:2.5rem 0 0}
.creds li{font:700 .82rem var(--mono);color:var(--on);padding:.4rem .8rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.creds li:nth-child(1){background:var(--yel);transform:rotate(-1.2deg)}.creds li:nth-child(2){background:var(--mint);transform:rotate(1deg)}
.creds li:nth-child(3){background:var(--pink);transform:rotate(-.8deg)}.creds li:nth-child(4){background:var(--blue);transform:rotate(1.2deg)}
.sec{display:flex;justify-content:space-between;align-items:baseline;margin:4.5rem 0 1.4rem}
.sec h2{font-size:2rem}.sec a{font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.6rem}
.card{background:var(--panel);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--c,var(--mint));transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column}
.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--c,var(--mint))}
.th{aspect-ratio:16/9;background:var(--c,var(--mint));border-bottom:2px solid var(--ink);position:relative;overflow:hidden}
.th.empty::after{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;right:-8%;bottom:-30%;background:var(--on);opacity:.85;box-shadow:-70px -20px 0 -22px rgba(14,11,43,.35)}
.cb{padding:1.1rem 1.25rem 1.4rem}
.tag{display:inline-block;font:700 .72rem var(--mono);background:var(--c,var(--mint));color:var(--on);padding:.15rem .5rem;margin-right:.5rem}
.meta{font:.78rem var(--mono);color:var(--muted)}
.card h3{font-size:1.4rem;margin:.7rem 0 .4rem}.card h3 a{text-decoration:none}
.card p{margin:0;color:var(--muted);font-size:.97rem}
.work{border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:150px 1fr auto;gap:1rem;align-items:center;padding:1.1rem .5rem;border-bottom:2px solid var(--ink);text-decoration:none;transition:background .12s}
.row:hover{background:var(--panel)}
.row b{font:800 1.25rem var(--head)}
.row .cl{font:700 .8rem var(--mono);color:var(--ink);background:var(--bg);border:2px solid var(--mars);box-shadow:3px 3px 0 var(--mars);padding:.15rem .6rem;justify-self:start}
.row .go{font:700 .8rem var(--mono);color:var(--muted)}
.sub{margin:5rem 0 3rem;background:var(--mint);color:var(--on);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--pink);padding:2.2rem;display:grid;gap:1rem}
.sub h2{font-size:2.2rem}.sub p{margin:0;max-width:34em}
.sub form{display:flex;gap:.7rem;flex-wrap:wrap}
.sub input{flex:1 1 240px;padding:.75rem 1rem;border:2px solid var(--on);background:#fff;font:1rem var(--mono);color:#0e0b2b}
.sub .btn{background:var(--on);color:#fff;border-color:var(--on);box-shadow:4px 4px 0 var(--pink)}
.foot{border-top:2px solid var(--ink);padding:1.8rem 0 2.5rem;display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:space-between;font-size:.95rem}
.foot nav{display:flex;gap:1.2rem;flex-wrap:wrap}
@media(max-width:760px){.hero{grid-template-columns:1fr}.row{grid-template-columns:1fr;gap:.4rem}.port{order:-1;width:200px;height:200px}}
@media(prefers-reduced-motion:reduce){.orbit{animation:none}.btn,.card,.row{transition:none}}

[data-pal="Cyber"]{--mint:#00f0ff;--pink:#ff2bd6;--yel:#e6ff00;--blue:#8a5bff;--mars:#ff6a00}
[data-pal="Cyber"]:not([data-theme="Light"]){--bg:#07040f;--panel:#130a26}
[data-pal="Cyber"] .hero em{box-shadow:0 0 26px rgba(0,240,255,.5)}
[data-pal="Cyber"] .port .ph{box-shadow:8px 8px 0 var(--pink),0 0 40px rgba(255,43,214,.35)}
[data-pal="Cyber"] .sub{box-shadow:8px 8px 0 var(--pink),0 0 40px rgba(0,240,255,.25)}

/* Ghost extras */
[data-theme="Auto"]{color-scheme:dark light}
@media(prefers-color-scheme:light){[data-theme="Auto"]{--bg:#fff7e8;--panel:#ffffff;--ink:#0e0b2b;--muted:#5b5680}
[data-pal="Cyber"][data-theme="Auto"]{--bg:#fff7e8;--panel:#ffffff}}
@media(prefers-color-scheme:dark){[data-theme="Auto"] body{background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.6px),radial-gradient(rgba(255,255,255,.3) 1px,transparent 1.6px);background-size:170px 170px,110px 110px;background-position:0 0,55px 70px}}
.brand img{height:32px;width:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--yel);color:#0e0b2b;padding:.5rem 1rem;z-index:9}
.grid .card:nth-child(3n+1){--c:var(--pink)}.grid .card:nth-child(3n+2){--c:var(--mint)}.grid .card:nth-child(3n){--c:var(--yel)}
.th{display:block}.th img{width:100%;height:100%;object-fit:cover}
.mrow{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.tag{text-decoration:none}.cb h3{font-size:1.4rem}
.ph .planet{width:100%;height:100%}
.page-h{padding:3rem 0 .5rem}.page-h h1{font-size:clamp(2.2rem,6vw,3.6rem)}.page-h p{color:var(--muted);max-width:38em;font-size:1.15rem}
.pagination{display:flex;justify-content:space-between;margin:2rem 0;font:700 .9rem var(--mono)}
.post{padding-top:2.5rem;padding-bottom:3rem}
.post-h,.gh-content{max-width:700px;margin-left:auto;margin-right:auto}
.post-h h1{font-size:clamp(2.2rem,5.5vw,3.6rem);margin:.9rem 0;letter-spacing:-.02em}
.dek{font-size:1.25rem;color:var(--muted);margin:.5rem 0}
.by{font:.85rem var(--mono);color:var(--muted)}
.lead{max-width:1000px;margin:2rem auto}.lead img{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--pink);width:100%}
.lead figcaption{font-size:.85rem;color:var(--muted);text-align:center;margin-top:.8rem}
.gh-content{font-size:1.125rem;line-height:1.75}.gh-content>*+*{margin-top:1.4em}
.gh-content h2{font-size:2rem;margin-top:2em}.gh-content h3{font-size:1.45rem;margin-top:1.6em}
.gh-content a{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:3px;text-underline-offset:3px}
.gh-content blockquote{margin-left:0;padding-left:1.25rem;border-left:4px solid var(--pink);color:var(--muted)}
.gh-content code{font:.9em var(--mono);background:var(--panel);padding:.15em .4em;border:1px solid var(--ink)}
.gh-content pre{background:var(--panel);padding:1.1rem;overflow-x:auto;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--mint)}
.gh-content pre code{padding:0;border:0;background:none}
.gh-content hr{border:0;border-top:2px solid var(--ink)}
.gh-content .kg-width-wide{width:min(1000px,calc(100vw - 2.5rem));margin-left:50%;transform:translateX(-50%)}
.gh-content .kg-width-full{width:100vw;margin-left:50%;transform:translateX(-50%)}.gh-content .kg-width-full img{width:100%}
.sub-form .ok,.sub-form .err{display:none;width:100%;margin:0;font-weight:600}
.sub-form.success .ok{display:block}.sub-form.error .err{display:block}
.sub .btn.alt{background:var(--on);color:#fff}
.ad{margin:3rem auto;max-width:728px;text-align:center;min-height:90px;border:2px dashed var(--ink);padding:.6rem}
.ad small{display:block;font:.72rem var(--mono);color:var(--muted);margin-bottom:.4rem}
.post .grid{max-width:1000px;margin:0 auto}.post .cta{max-width:700px;margin:2.5rem auto 0}
.foot p{margin:0;color:var(--muted)}