:root{
  /* Layout */
  --max: 980px;

  /* Text */
  --text: #e6edf6;
  --muted: #a7b4c6;

  /* Background system */
  --bg-0: #070a10;
  --bg-1: #0a0f18;
  --glow-a: rgba(46, 233, 201, 0.18);
  --glow-b: rgba(117, 78, 255, 0.16);
  --glow-c: rgba(25, 140, 255, 0.12);
  --vignette: rgba(0,0,0,0.65);

  /* Surfaces (glass) */
  --surface: rgba(10, 15, 24, 0.58);
  --surface-2: rgba(10, 15, 24, 0.42);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.16);

  /* Brand accents */
  --accent: #7aa2ff;
  --accent-2: #9ae6b4;

  /* Effects */
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font: 16px/1.7 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);

  background:
    radial-gradient(1200px 700px at 18% 20%, var(--glow-c) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 72% 35%, var(--glow-b) 0%, rgba(0,0,0,0) 58%),
    radial-gradient(800px 520px at 40% 75%, var(--glow-a) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-0) 100%);
  background-attachment: fixed;
}

/* Vignette overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 800px at 50% 15%, rgba(0,0,0,0) 0%, var(--vignette) 70%),
    radial-gradient(900px 650px at 50% 100%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 75%);
}

/* Subtle texture/noise */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.010) 0px, rgba(255,255,255,0.010) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 6px);
  opacity: 0.12;
  mix-blend-mode: overlay;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset: 3px; }
img{ max-width:100%; height:auto; display:block; }

.container{ max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* Ensure content is above background layers */
.site-header, main, footer{ position: relative; z-index: 1; }

/* Header */
.site-header{
  position: sticky; top:0; z-index:10;
  background: rgba(7,10,16,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight: 650;
  letter-spacing: .2px;
}
.logo{
  width: 12px; height: 12px; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px rgba(122,162,255,.15);
}
.nav-links{
  display:flex; align-items:center; gap: 12px;
}
.nav-links a{
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
}
.nav-links a[aria-current="page"]{
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(10,15,24,.65);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  text-decoration:none;
  white-space: nowrap;
}
.btn:hover{ text-decoration:none; border-color: rgba(122,162,255,.55); }
.btn.primary{
  background: linear-gradient(135deg, rgba(122,162,255,.22), rgba(154,230,180,.14));
  border-color: rgba(122,162,255,.45);
}

/* Shared “glass” surfaces */
.card,
.post-card,
.post-header,
.content,
.hero2-top,
.profile,
.home-nav{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

/* Prevent translation/uppercase weirdness on specific tokens */
.notranslate{
  translate: no;
}

/* About title: never uppercase */
.profile .about-title{
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0;
  font-size: 16px;
}

/* Avatar (reliable <img>) */
.profile-avatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  object-fit: cover;
  flex: 0 0 auto;
}

/* Pages */
.page-header{ padding: 34px 0 10px; }
.page-header h1{
  margin:0 0 6px;
  font-size: clamp(22px, 3vw, 30px);
  line-height:1.2;
  letter-spacing: -0.3px;
}
.muted{ color: var(--muted); margin:0; max-width: 75ch; }

/* Blog index cards */
.post-card{
  margin: 14px 0 54px;
  padding: 20px;
}
.post-meta{ display:flex; gap: 10px; align-items:center; }
.date{ color: var(--muted); font-size: 14px; }
.post-title{
  margin: 10px 0 6px;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.2px;
}
.excerpt{
  margin: 0 0 14px;
  color: var(--muted);
  max-width: 80ch;
}
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Post */
.post{ padding: 34px 0 54px; }
.post-header{ padding: 22px; }
.eyebrow{ margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.post-header h1{
  margin: 0 0 10px;
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.4px;
}
.lead{ margin: 0; color: var(--muted); max-width: 75ch; }

/* Content typography */
.content{
  margin-top: 18px;
  padding: 22px;
  background: var(--surface-2);
  border-color: var(--border);
}
.content h2{
  margin: 18px 0 8px;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.content p{ margin: 0 0 12px; color: var(--text); }
.content p + p{ margin-top: 10px; }
.content em{ color: var(--text); font-style: italic; }

/* Figures */
figure{
  margin: 18px 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,0.18);
}
figure img{
  width: 100%;
  background: rgba(0,0,0,0.12);
}
figcaption{
  padding: 10px 12px;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--border);
}

/* Callout */
.callout{
  margin: 18px 0;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(122,162,255,.35);
  background: rgba(122,162,255,.10);
}
.callout h3{ margin: 0 0 6px; font-size: 15px; }
.callout p{ margin: 0; color: var(--text); }

/* CTA */
.cta{
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(154,230,180,.35);
  background: rgba(154,230,180,.08);
}
.cta h2{ margin: 0 0 6px; font-size: 18px; }
.cta p{ margin: 0 0 12px; color: var(--text); max-width: 80ch; }

/* Post nav */
.post-nav{ margin-top: 16px; display:flex; justify-content:flex-start; }

/* Footer */
.site-footer{
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding: 18px 0 28px;
}
.footer-row{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:space-between;
}
.site-footer a{ color: var(--text); }

/* Small screens */
@media (max-width: 520px){
  .nav-links a:not(.btn){ display:none; }
}

/* ===== Better home layout ===== */

.home{ padding: 34px 0 54px; }

.hero2{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.hero2-top{
  padding: 22px;
}

.hero2-top h1{
  margin: 6px 0 10px;
  font-size: clamp(24px, 3.8vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.5px;
}

.hero2-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.profile{
  padding: 18px;
  display:flex;
  gap: 14px;
  align-items:flex-start;
}

.home-nav{
  margin-top: 16px;
  padding: 18px;
}

.nav-cards{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mini-card{
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.14);
  text-decoration: none;
}

.mini-card:hover{
  border-color: rgba(122,162,255,.45);
  text-decoration: none;
}

.mini-card strong{
  font-size: 14px;
  letter-spacing: .2px;
}

.mini-card span{
  color: var(--muted);
  font-size: 14px;
}

.home-3col{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.home-contact{ margin-top: 16px; }

@media (min-width: 920px){
  .hero2{ grid-template-columns: 1.25fr .75fr; align-items: start; }
  .nav-cards{ grid-template-columns: repeat(3, 1fr); }
  .home-3col{ grid-template-columns: repeat(3, 1fr); }
}