:root{
  --vr: 32px; /* global vertical rhythm */
  --bg:#0c093d;
  --fs-orange:#f29222;
  --fs-blue:#009ee2;
  --fs-pink:#e5007e;
  --text:#ffffff;
  --muted:rgba(255,255,255,.8);
  --card:rgba(255,255,255,.08);
  --card-border:rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --max: 1120px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
a{color:var(--fs-orange)}
a:hover{text-decoration:underline}
.bg{
  position:fixed; inset:0; z-index:-1;
  background-color:var(--bg);
  background-image:image-set(
    url('images/background.webp') type('image/webp'),
    url('images/background.png') type('image/png')
  );
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* Layout */
.wrap{max-width:var(--max); margin:0 auto; padding:var(--vr) 24px;}
header.wrap{padding:var(--vr) 24px 0}
section{margin-top:var(--vr)}

.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}

/* Hero */
.hero{
  width:100%;
  display:grid;
  grid-template-columns:160px 1fr 220px;
  gap:28px; align-items:center;
  padding:28px; border-radius:var(--radius);
  background:linear-gradient(to right, rgba(0,0,0,.25), rgba(0,0,0,.10)), var(--card);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
}
.portrait{
  width:160px; height:160px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(255,255,255,.18);
}
.hero h1{margin:0 0 6px; font-size:clamp(28px,3.5vw,44px); text-transform:uppercase; letter-spacing:.04em;}
.subtitle{margin:0 0 12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-size:14px}
.hero p{margin:0 0 14px; max-width:60ch}

.section-title{margin:0 0 18px; font-size:clamp(22px,2.3vw,30px); letter-spacing:.04em; text-transform:uppercase;}

/* Buttons / Links */
.quick-links{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px; padding:10px 16px; text-decoration:none; font-weight:600;
  border:1px solid var(--card-border); background:rgba(255,255,255,.06);
  color:#fff; transition:.2s transform ease,.2s background ease,.2s border ease;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22)}
.btn.primary{background:var(--fs-orange); border-color:transparent; color:#fff}
.btn.primary:hover{background:#e0801b}
.btn svg{width:18px;height:18px}

/* Logo card */
.logo-card{display:flex; align-items:center; justify-content:center; height:100%; padding:16px; border-radius:var(--radius);
  background:rgba(255,255,255,.04); border:1px solid var(--card-border)}
.logo-card img{width:160px; height:auto}

/* Blog grid (homepage) */
.blog-grid{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.post{padding:18px; border:1px solid var(--card-border); border-radius:14px; background:rgba(0,0,0,.25);
  display:flex; flex-direction:column; min-height:420px;}
.post h3{margin:0 0 10px; font-size:clamp(18px,1.8vw,22px); flex-shrink:0; text-transform:uppercase; letter-spacing:.04em;}
.post p{margin:0 0 12px; color:var(--muted); flex-shrink:0}
.post p:last-of-type{margin-top:auto}
.post a{color:var(--fs-orange); text-decoration:none}
.post a:hover{text-decoration:underline}
.thumb{aspect-ratio:1/1; width:100%; border-radius:12px; margin-bottom:12px;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid var(--card-border)}

/* Article page */
.article{max-width:var(--max); margin:0 auto}
.article-header{margin-bottom:12px}
.meta{color:var(--muted); font-size:14px}
.article .hero-img{width:100%; border-radius:16px; border:1px solid var(--card-border); margin:12px 0 18px}
.article p{margin:0 0 16px}
.article h2{margin:24px 0 12px}

/* Post hero */
.post-hero{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--card-border); box-shadow:var(--shadow); margin-bottom:var(--vr)}
.post-hero picture, .post-hero img{display:block; width:100%; height:40vh; object-fit:cover}
.post-hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.20) 40%, rgba(0,0,0,.55));}
.post-hero .title{position:absolute; left:24px; bottom:24px; right:24px; font-size:clamp(28px,4.5vw,48px); font-weight:800; line-height:1.1; text-wrap:balance; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.7), 0 0 1px rgba(0,0,0,.6); text-transform:uppercase; letter-spacing:.04em;}
@supports (text-stroke:1px #000){ .post-hero .title{text-stroke:1px rgba(0,0,0,.35)} }

/* Post CTA row */
.article .cta-row{margin-top:50px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

@media (max-width:900px){
  .post-hero .title{left:16px; right:16px; bottom:16px}
}

/* Responsive */
@media (max-width:900px){
  .hero{grid-template-columns:120px 1fr}
  .logo-card{display:none}
  .portrait{width:120px;height:120px}
  .blog-grid{grid-template-columns:1fr}
  .post{min-height:0}
}

@media (max-width:600px){
  /* Stack hero neatly on small phones */
  .hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:20px}
  .hero h1{margin-bottom:4px; font-size:clamp(24px,7vw,34px)}
  .subtitle{margin:0 0 8px; letter-spacing:.06em}
  .portrait{width:120px; height:120px; border-radius:50%; margin:4px 0 8px}
  .hero p{margin:0; line-height:1.45; max-width:38ch}
}