/* peter-ufens.dev · Aurora Holo · 2026-10-27 */
:root{
  --bg:#030712;--ink:#f1f5f9;--muted:#94a3b8;
  --violet:#8b5cf6;--emerald:#10b981;--sky:#38bdf8;--amber:#fbbf24;
  --card:rgba(255,255,255,.03);--card-h:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.1);--blur:rgba(15,23,42,.65);
  --accent:var(--sky);
  --line:var(--border);
  --text:var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:Outfit,system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;min-height:100vh;overflow-x:hidden;
}
.orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.55}
.orb-v{width:28rem;height:28rem;background:rgba(139,92,246,.28);top:12%;left:22%}
.orb-e{width:26rem;height:26rem;background:rgba(16,185,129,.22);bottom:10%;right:12%}
.orb-s{width:18rem;height:18rem;background:rgba(56,189,248,.15);top:55%;left:55%}
.wrap{position:relative;z-index:1;max-width:72rem;margin:0 auto;padding:1rem 1.25rem 3.5rem}
.nav{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;padding:.75rem 0 1.25rem;font-size:.85rem;font-weight:500}
.nav a{color:var(--muted);text-decoration:none;transition:color .15s;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.glass{
  background:var(--blur);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:1.5rem;
}
.card{
  background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);border-radius:1rem;
  transition:background .25s,border-color .25s,transform .25s;
  padding:1.15rem 1.25rem;margin:.65rem 0;
}
.card:hover{background:var(--card-h);border-color:rgba(56,189,248,.35);transform:translateY(-2px)}
.card p{margin:0;font-size:.9rem;color:var(--muted)}
.card .links{margin-top:.65rem;display:flex;flex-wrap:wrap;gap:.5rem .85rem;font-size:.88rem}
.card .links a{color:var(--emerald);text-decoration:none}
.card .links a:hover{text-decoration:underline}
.mini{padding:.85rem 1rem}
.hero.glass{padding:2rem 2rem 2.25rem;margin-bottom:1.25rem;animation:fade .6s ease both}
@media(min-width:640px){.hero.glass{padding:2.75rem 3rem}}
.hero-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.hero-main{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;flex:1}
.avatar{
  width:96px;height:96px;border-radius:1.25rem;object-fit:cover;
  border:1px solid var(--border);box-shadow:0 0 40px rgba(139,92,246,.2);flex-shrink:0;background:var(--card);
}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);
  color:#6ee7b7;font-size:.75rem;padding:.35rem .85rem;border-radius:999px;font-weight:500;margin:0 0 .75rem;
}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:#34d399;animation:ping 1.6s ease infinite}
.tag{color:var(--emerald);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;margin:0 0 .35rem;font-weight:600}
h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;margin:0 0 .5rem;letter-spacing:-.03em;line-height:1.05;color:var(--ink);font-family:inherit}
.lead{font-size:1.15rem;font-weight:300;color:var(--muted);margin:0 0 .75rem;max-width:36rem}
.lead em{font-style:normal;color:var(--sky)}
.avail{font-size:.9rem;color:var(--muted);margin:0 0 1rem}
.btns{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.25rem}
.btn{
  display:inline-block;padding:.7rem 1.35rem;border-radius:1rem;font-size:.875rem;font-weight:600;
  text-decoration:none;text-align:center;transition:opacity .15s,background .15s;border:1px solid var(--border);color:var(--ink);
}
.btn-primary,.btn-p{color:#fff;background:linear-gradient(90deg,var(--violet),var(--emerald));border-color:transparent;box-shadow:0 10px 30px rgba(139,92,246,.25)}
.btn-primary:hover,.btn-p:hover{opacity:.9;filter:none}
.btn-ghost,.btn-g{color:var(--ink);background:var(--card);border:1px solid var(--border)}
.btn-ghost:hover,.btn-g:hover{background:rgba(255,255,255,.1);border-color:var(--sky);color:var(--sky)}
section{margin:1.75rem 0}
h2{font-size:1.1rem;font-weight:700;margin:0 0 .35rem;display:flex;align-items:center;gap:.5rem;color:var(--ink);font-family:inherit}
h2 .mark{color:var(--violet)}
.sub{font-size:.88rem;color:var(--muted);margin:0 0 1rem}
.sub a{color:var(--sky);text-decoration:none}
.sub a:hover{text-decoration:underline}
h2.espace-haut{margin-top:1.75rem}
.sub.espace-haut{margin-top:1rem}
h3{margin:0 0 .35rem;font-size:1rem;color:var(--ink);font-weight:700}
p,li{color:var(--muted);font-size:.95rem}
ul{padding-left:1.15rem;margin:.5rem 0}
a{color:var(--sky);text-decoration-color:rgba(56,189,248,.4);text-underline-offset:3px}
a:hover{text-decoration-color:var(--sky)}
.certs-grid{display:grid;gap:.75rem;margin-bottom:1rem}
@media(min-width:700px){.certs-grid{grid-template-columns:1fr 1fr 1fr}}
.cert{display:flex;gap:.9rem;align-items:center;padding:1.1rem 1.15rem;margin:0}
.ico{
  width:2.5rem;height:2.5rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;letter-spacing:.04em;flex-shrink:0;
}
.ico-v{background:rgba(139,92,246,.2);color:#c4b5fd}
.ico-e{background:rgba(16,185,129,.2);color:#6ee7b7}
.ico-s{background:rgba(56,189,248,.2);color:#7dd3fc}
.cert{text-decoration:none;color:inherit;cursor:pointer}
a.cert:hover strong{color:var(--sky)}
.cert strong{display:block;font-size:.9rem;color:var(--ink)}
.cert span{font-size:.75rem;color:var(--muted)}
.cert-list{display:grid;gap:.75rem}
.cert-row{display:flex;flex-wrap:wrap;gap:.85rem 1rem;align-items:flex-start;margin:0}
.cert-row strong{display:block;font-size:.95rem;color:var(--ink);margin-bottom:.15rem}
.cert-row > div > span{display:block;font-size:.78rem;color:var(--emerald);margin-bottom:.35rem}
.cert-row ul{margin:.35rem 0 0;padding-left:1.1rem}
.cert-row li{font-size:.88rem;color:var(--muted);margin:.15rem 0}
.now{
  border-left:none;padding:1.1rem 1.35rem;margin:.5rem 0;font-size:.95rem;color:var(--muted);
  background:var(--blur);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:1.5rem;
}
.now p{margin:0}
.now strong{color:var(--ink);font-weight:600}
.posts{display:grid;gap:.75rem}
@media(min-width:900px){.posts{grid-template-columns:1fr 1fr}}
.post{display:block;padding:1.15rem 1.25rem;text-decoration:none;color:inherit;margin:0}
.post time{font-size:.72rem;color:var(--emerald);font-weight:600;letter-spacing:.04em}
.post h3{font-size:1.05rem;font-weight:700;margin:.35rem 0;color:var(--ink)}
.post p{margin:0;font-size:.85rem;color:var(--muted)}
a.post:hover h3{color:var(--sky)}
.post-soon{opacity:.75;cursor:default}
.labs{display:grid;gap:1rem}
@media(min-width:800px){.labs{grid-template-columns:1fr 1fr 1fr}}
.lab{padding:1.35rem 1.25rem;display:flex;flex-direction:column;gap:.65rem;min-height:100%;margin:0}
.lab-tag{
  align-self:flex-start;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .65rem;border-radius:999px;border:1px solid;
}
.tag-a{color:#fcd34d;background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.25)}
.tag-v{color:#c4b5fd;background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.25)}
.tag-c{color:#67e8f9;background:rgba(6,182,212,.1);border-color:rgba(6,182,212,.25)}
.tag-e{color:#6ee7b7;background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.25)}
.tag-s{color:#7dd3fc;background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.25)}
.lab h3{font-size:1.1rem;margin:0}
.lab p{margin:0;font-size:.85rem;color:#cbd5e1;flex:1}
.lab .foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;
  padding-top:.75rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:.75rem;font-family:ui-monospace,monospace;font-weight:500;
}
.lab .foot a{color:var(--emerald);text-decoration:none;margin-right:.65rem}
.lab .foot a:hover{text-decoration:underline}
.gamma{display:grid;gap:.55rem}
@media(min-width:700px){.gamma{grid-template-columns:1fr 1fr}}
.gamma a{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.15rem;text-decoration:none;color:inherit;margin:0}
.gamma .n{font-family:ui-monospace,monospace;font-size:.72rem;color:var(--violet);font-weight:700;min-width:2.2rem}
.gamma strong{display:block;font-size:.92rem;color:var(--ink)}
.gamma span{font-size:.78rem;color:var(--muted)}
.gamma a:hover strong{color:var(--sky)}
.repos{display:grid;gap:.75rem}
@media(min-width:700px){.repos{grid-template-columns:1fr 1fr}}
.repo{padding:1.15rem 1.25rem;margin:0}
.repo h3{font-size:1rem;font-weight:700;margin:0 0 .35rem;font-family:ui-monospace,monospace}
.repo h3 a{color:inherit;text-decoration:none}
.repo h3 a:hover{color:var(--sky)}
.repo p{margin:0;font-size:.85rem;color:var(--muted)}
.jobs{display:grid;gap:.75rem}
@media(min-width:700px){.jobs{grid-template-columns:1fr 1fr 1fr 1fr}}
.job{padding:1rem 1.1rem;margin:0}
.job time{font-size:.7rem;color:var(--emerald);font-family:ui-monospace,monospace;font-weight:600}
.job strong{display:block;margin:.25rem 0 0;font-size:.95rem;color:var(--ink)}
.job span{font-size:.75rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0;padding:0;list-style:none}
.chips li{
  font-size:.75rem;color:var(--muted);border:1px solid var(--border);border-radius:999px;
  padding:.25rem .65rem;background:var(--card);
}
.certs{list-style:none;padding:0;margin:.5rem 0}
.certs li{padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.08);color:var(--muted);font-size:.95rem}
.certs li:last-child{border:none}
footer{
  margin-top:2.5rem;padding:1.25rem 1.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;
  font-size:.85rem;color:var(--muted);
}
footer.glass{border-radius:1.5rem}
footer a{color:var(--sky);text-decoration:none;font-weight:500}
footer a:hover{text-decoration:underline}
.muted{color:var(--muted);font-size:.85rem}
.crumb{font-size:.85rem;color:var(--muted);margin:0 0 1rem}
.crumb a{color:var(--muted)}
.hub-grid{display:grid;gap:.65rem}
@media(min-width:700px){.hub-grid{grid-template-columns:1fr 1fr}}
.hub-grid a.card{display:block;text-decoration:none;color:inherit;margin:0}
.hub-grid a.card strong{display:block;font-size:.95rem;color:var(--ink);margin-bottom:.25rem}
.hub-grid a.card span{font-size:.8rem;color:var(--muted)}
.hub-grid a.card:hover strong{color:var(--sky)}
.lab h3 a{color:inherit;text-decoration:none}
.lab h3 a:hover{color:var(--sky)}
@keyframes ping{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.35)}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}