/* Public site styles. Colours/fonts come from /assets/theme.css (Admin > Settings > Theme). */
*,*::before,*::after{box-sizing:border-box}
:root{--muted:color-mix(in srgb,var(--text) 62%,transparent);--line:color-mix(in srgb,var(--text) 13%,transparent);--card:color-mix(in srgb,var(--surface) 80%,transparent);--r:16px;--shadow:0 10px 40px -12px rgb(0 0 0/.45);--g:calc(var(--glow,1)*1px)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--text);line-height:1.65;background:radial-gradient(900px 520px at 8% -8%,color-mix(in srgb,var(--primary) 60%,transparent),transparent 62%),radial-gradient(700px 480px at 100% 12%,color-mix(in srgb,var(--primary-dark) 80%,transparent),transparent 60%),var(--bg);background-repeat:no-repeat;min-height:100vh;overflow-x:hidden}
body.lock{overflow:hidden}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800}h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:700}h3{font-size:1.15rem;font-weight:600}
p{margin:0 0 1em}a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.ic{width:1.1em;height:1.1em;vertical-align:-.15em;flex:none}
.container{width:min(1140px,100% - 2.5rem);margin-inline:auto}.narrow{width:min(780px,100% - 2.5rem)}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.875rem}.upper{text-transform:uppercase;letter-spacing:.08em}
.lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--muted);max-width:60ch}.center .lead{margin-inline:auto}
.eyebrow{color:var(--accent);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:.6rem}
.grad-text{background:linear-gradient(120deg,var(--text) 20%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));z-index:100;box-shadow:0 0 var(--g) var(--accent)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.3rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:600 .95rem var(--font-body);cursor:pointer;transition:transform .2s,box-shadow .25s,background .2s;text-decoration:none}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--accent) 75%,var(--primary)));color:#fff;border-color:transparent;box-shadow:0 0 calc(var(--glow,1)*26px) color-mix(in srgb,var(--accent) 40%,transparent)}
.btn-ghost{background:transparent}.btn-sm{padding:.5rem 1rem;font-size:.85rem}.btn:disabled{opacity:.6;cursor:wait}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;transition:.2s}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.only-sm{display:none}
/* header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);background:color-mix(in srgb,var(--bg) 62%,transparent);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-header.scrolled{border-color:var(--line);background:color-mix(in srgb,var(--bg) 82%,transparent)}
.nav-wrap{display:flex;align-items:center;gap:1.2rem;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--text);font:700 1rem var(--font-head)}.brand:hover{text-decoration:none}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:.85rem;box-shadow:0 0 var(--g) var(--accent)}
.nav{display:flex;gap:.2rem;margin-left:auto}
.nav a{color:var(--muted);padding:.5rem .85rem;border-radius:999px;font-weight:500;font-size:.95rem;transition:.2s}
.nav a:hover,.nav a.on{color:var(--text);background:color-mix(in srgb,var(--accent) 14%,transparent);text-decoration:none}
.nav-actions{display:flex;align-items:center;gap:.5rem}
/* hero */
.hero{position:relative;padding:clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,6vw,4.5rem);overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:calc(.28*var(--glow,1));animation:float 14s ease-in-out infinite}
.blob.b1{width:380px;height:380px;background:var(--accent);top:-80px;left:-60px}.blob.b2{width:320px;height:320px;background:var(--primary);right:-40px;top:120px;animation-delay:-6s}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%);opacity:.5}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-26px)}}
.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center}
.status{display:inline-flex;align-items:center;gap:.55rem;padding:.35rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:.82rem;margin-bottom:1.2rem}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.roles{font:600 clamp(1.1rem,2.4vw,1.5rem) var(--font-head);color:var(--accent);min-height:1.8em;transition:opacity .35s,transform .35s}.roles.out{opacity:0;transform:translateY(8px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.9rem}.hero-meta span{display:inline-flex;gap:.4rem;align-items:center}
.glass{background:var(--card);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow),0 0 calc(var(--glow,1)*40px) -18px var(--accent)}
.hero-card{border-radius:28px;padding:1.6rem;text-align:center}
.portrait{width:min(240px,100%);aspect-ratio:1;margin:0 auto 1.4rem;border-radius:50%;padding:5px;background:conic-gradient(from 90deg,var(--accent),var(--primary),var(--accent));animation:spin 12s linear infinite}
.portrait>*{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--surface);display:grid;place-items:center;font:700 3.4rem var(--font-head);animation:spin 12s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.counters b{display:block;font:800 1.7rem var(--font-head);color:var(--accent)}.counters small{color:var(--muted)}
/* sections */
.section{padding:clamp(2.6rem,6vw,5rem) 0}.section.alt{background:color-mix(in srgb,var(--surface) 55%,transparent);border-block:1px solid var(--line)}
.section-head{margin-bottom:2.2rem}.center .section-head,.section-head.center{text-align:center}
.page-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 1rem}
.card{border-radius:var(--r);padding:1.4rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.4rem;margin-bottom:2rem}.cards.sm{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.snap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}.snap p{margin:.3rem 0 0;font-weight:500}
.snap-list dt{color:var(--accent);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-top:.9rem}.snap-list dd{margin:.15rem 0 0}
.about-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:2.4rem;align-items:start}.about-grid aside{position:sticky;top:90px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:2.4rem}.contact-list{list-style:none;padding:0}.contact-list li{display:flex;gap:.6rem;align-items:center;margin:.6rem 0}
.cta{border-radius:28px;text-align:center;padding:clamp(2rem,5vw,3.4rem)}
/* timeline */
.timeline{list-style:none;margin:0 0 1.5rem;padding:0 0 0 1.6rem;border-left:2px solid var(--line);display:grid;gap:1.2rem}
.tl-item{position:relative;display:flex;gap:1rem;padding:1.1rem 1.2rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line);transition:transform .25s,border-color .25s}
.tl-item:hover{transform:translateX(4px);border-color:var(--accent)}
.tl-item::before{content:"";position:absolute;left:calc(-1.6rem - 7px);top:1.7rem;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg),0 0 var(--g) var(--accent)}
.logo{width:56px;height:56px;border-radius:12px;object-fit:contain;background:#fff;padding:5px;border:1px solid var(--line);flex:none}
.logo-ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font:700 1rem var(--font-head);padding:0;border:0}
.tl-body h3{margin:0}.tl-sub{margin:.1rem 0;color:var(--text)}.tl-meta{margin:0 0 .4rem;color:var(--muted);font-size:.88rem}.tl-desc{margin:.4rem 0 0;color:var(--muted);font-size:.95rem}
.cert{display:flex;gap:1rem}.cert h3{margin:0 0 .2rem}
/* skills + tags + chips */
.badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
.skill{position:relative;padding:.5rem 1rem;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:500;font-size:.92rem;overflow:hidden;transition:.25s}
.skill::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--lv);background:linear-gradient(90deg,var(--primary),var(--accent))}
.skill:hover{border-color:var(--accent);transform:translateY(-2px)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}.tags span{font-size:.78rem;padding:.2rem .6rem;border-radius:6px;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}.tags.big span{font-size:.9rem}
.chip{display:inline-flex;gap:.35rem;align-items:center;padding:.4rem .95rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;font:500 .88rem var(--font-body);transition:.2s}
.chip:hover{border-color:var(--accent);text-decoration:none}.chip.on{background:var(--primary);border-color:var(--accent);color:#fff}.chip.sm{font-size:.74rem;padding:.15rem .6rem;cursor:default}.chip small{opacity:.7}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem}
/* projects */
.project{padding:0;overflow:hidden;transition:transform .3s,border-color .3s}.project:hover{transform:translateY(-6px);border-color:var(--accent)}
.project[hidden]{display:none}
.p-cover{display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--primary-dark),var(--primary))}
.p-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.project:hover .p-cover img{transform:scale(1.06)}
.p-ph{display:grid;place-items:center;height:100%;font:800 3rem var(--font-head);color:color-mix(in srgb,var(--accent) 70%,transparent)}
.p-body{padding:1.1rem 1.3rem 1.3rem}.p-body h3 a{color:var(--text)}
.cover{border-radius:var(--r);margin-bottom:1.4rem;cursor:zoom-in;width:100%}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem;margin-top:1.6rem}.gallery img,.media img{border-radius:12px;cursor:zoom-in;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
/* feed */
.post{margin-bottom:1.4rem}.post-head{display:flex;gap:.8rem;align-items:center;margin-bottom:.8rem}.post-head div{display:grid;line-height:1.35}.post-head small{font-size:.8rem}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}.avatar.ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:700}
.post-title{font-size:1.35rem}.post-title a{color:var(--text)}.more{font-weight:600}
.media{display:grid;gap:4px;margin:.8rem 0;border-radius:12px;overflow:hidden}.media-2,.media-4{grid-template-columns:1fr 1fr}.media-3{grid-template-columns:2fr 1fr}.media-1 img{aspect-ratio:16/9}
.reactions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.react-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font:500 .85rem var(--font-body);transition:.2s}
.react-btn:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}.react-btn.on{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent);border-color:var(--accent)}
.react-btn .em{font-size:1.1rem;transition:transform .2s}.react-btn:active .em{transform:scale(1.5)}.react-btn .n{font-weight:700;min-width:1ch}.react-btn.share{margin-left:auto}
.pager{display:flex;gap:.4rem;justify-content:center;margin-top:1.6rem}.pager a{min-width:40px;text-align:center;padding:.45rem .7rem;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text)}.pager a.on{background:var(--primary);color:#fff}
.prose{max-width:75ch}.prose img{border-radius:12px;margin:1rem 0}.prose h2,.prose h3{margin-top:1.6em}.prose blockquote{margin:1.2em 0;padding:.4em 1.2em;border-left:3px solid var(--accent);color:var(--muted)}.prose a{text-decoration:underline}
.prose ul,.prose ol{padding-left:1.3em}.prose table{border-collapse:collapse;width:100%}.prose td,.prose th{border:1px solid var(--line);padding:.5rem}.prose pre{overflow:auto;padding:1rem;background:var(--surface);border-radius:10px}
/* forms */
.stack{display:grid;gap:.9rem}.two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.form label{display:grid;gap:.35rem;font-size:.85rem;font-weight:500;color:var(--muted)}
.form input[type=text],.form input[type=email],.form textarea{width:100%;padding:.75rem .95rem;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--text);font:inherit;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.form-msg{margin:0;font-size:.9rem;min-height:1.2em}.form-msg.ok{color:var(--accent)}.form-msg.err{color:#f87171}
.seg{display:flex;gap:.5rem}.seg label{flex:1;display:block}.seg input{position:absolute;opacity:0}.seg span{display:block;text-align:center;padding:.55rem;border:1px solid var(--line);border-radius:12px;cursor:pointer;color:var(--text)}.seg input:checked+span{background:var(--primary);border-color:var(--accent);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}.chip input{accent-color:var(--accent)}
/* footer */
.site-footer{margin-top:2rem;border-top:1px solid var(--line);background:color-mix(in srgb,var(--primary-dark) 40%,var(--bg))}
.footer-grid{display:grid;grid-template-columns:1.2fr .7fr 1.3fr;gap:2.4rem;padding:3rem 0 2rem}.footer-grid h4{font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.flinks{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}.flinks a{color:var(--muted)}
.social{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--text);transition:.25s}.social a:hover{background:var(--accent);color:#fff;transform:translateY(-3px);box-shadow:0 0 var(--g) var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding:1.2rem 0 2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}.footer-bottom a{color:var(--muted);margin-left:1rem}
/* modal, lightbox, toast, consent */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1rem;background:rgb(0 0 0/.6);backdrop-filter:blur(4px);animation:fade .25s}.modal[hidden],.lightbox[hidden]{display:none}
.modal-box{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;border-radius:24px;padding:1.8rem;background:var(--surface);animation:pop .3s}.modal-x{position:absolute;top:1rem;right:1rem}
@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}}
.lightbox{position:fixed;inset:0;z-index:95;background:rgb(0 0 0/.92);display:grid;place-items:center;animation:fade .2s}.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px}.lb-x{position:absolute;top:1rem;right:1rem}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgb(255 255 255/.12);color:#fff;border:0;width:48px;height:64px;font-size:2rem;cursor:pointer;border-radius:10px}.lb-prev{left:1rem}.lb-next{right:1rem}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,120px);background:var(--surface);color:var(--text);border:1px solid var(--accent);padding:.8rem 1.3rem;border-radius:14px;z-index:99;max-width:90vw;transition:transform .35s;box-shadow:var(--shadow)}.toast.show{transform:translate(-50%,0)}.toast.err{border-color:#f87171}
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;max-width:680px;margin-inline:auto;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:1rem 1.2rem;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-size:.9rem}.consent[hidden]{display:none}.consent p{margin:0}
/* motion */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}html.js .reveal.in{opacity:1;transform:none}
@media (max-width:900px){
  .hero-grid,.about-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}.about-grid aside{position:static}.hero-card{max-width:420px;margin-inline:auto;width:100%}
  .only-sm{display:inline-grid}.hide-sm{display:none}.brand-name{display:none}
  .nav{position:fixed;top:68px;left:0;right:0;flex-direction:column;padding:1rem;background:var(--surface);border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .3s;margin:0}.nav.open{transform:none}.nav a{padding:.8rem 1rem}
  .nav-actions{margin-left:auto}
}
@media (max-width:560px){.two{grid-template-columns:1fr}.counters b{font-size:1.4rem}.timeline{padding-left:1.1rem}.tl-item::before{left:calc(-1.1rem - 7px)}.tl-item{flex-direction:column;gap:.6rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}html.js .reveal{opacity:1;transform:none}}
@media print{.site-header,.site-footer,.modal,.consent,.progress{display:none!important}body{background:#fff;color:#000}}

.lightbox.single .lb-nav{display:none}