:root{
  --bg: #0b0c0c;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;
  --accent: #a7f3d0;
  --accent-ink: #064e3b;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #ffffff;
    --text: #0b0c0c;
    --muted: #4b5563;
    --border: #e5e7eb;
    --accent: #0ea5e9;
    --accent-ink: #05364a;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

.wrapper{max-width:1080px;margin:0 auto;padding:2rem 1.25rem}

.header{border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);backdrop-filter:saturate(180%) blur(8px);z-index:20}
.brand{font-size:1.5rem;font-weight:800;margin:0}
.nav{margin-top:.5rem;display:flex;gap:1rem;flex-wrap:wrap}
.nav a{color:var(--text);opacity:.85;padding:.25rem .5rem;border-radius:.5rem}
.nav a[aria-current="page"]{opacity:1;border:1px solid var(--border)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;margin:2rem 0}
.hero img{border-radius:12px;border:1px solid var(--border);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.hero .text h2,.hero .text h3{margin:0 0 .5rem 0}
.hero .links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}

.grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:1.5rem}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}

.card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:transparent;padding:1rem}
.card img{border-radius:10px;border:1px solid var(--border);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.card .pad{padding:.25rem 0}
.card h3{margin:.5rem 0}
.card p{margin:0 0 .75rem 0;color:var(--muted)}

.badge{display:inline-block;font-size:.75rem;padding:.15rem .5rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.02)}

.button{display:inline-block;padding:.6rem .9rem;border:1px solid var(--border);border-radius:.65rem;color:var(--accent-ink);background:var(--accent)}
.button:hover{text-decoration:none;filter:brightness(0.98)}

.main p{margin:0 0 1rem 0}
figure{margin:0}
figcaption{padding:.35rem 0 0;color:var(--muted);font-size:.9rem}

footer{border-top:1px solid var(--border);margin-top:2.5rem;padding-top:1.5rem;color:var(--muted);text-align:center}

/* ---- About layout ---- */
.about{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:start;margin:1.25rem 0 0}
.about-media img{display:block;border-radius:12px;border:1px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,.25);width:180px;height:auto}
.about-text{max-width:70ch}
@media (min-width: 900px){
  .about{grid-template-columns:auto 1fr;gap:1.5rem}
  .about-media img{width:220px}
}