:root{
  --bg:#0a0a0a;
  --panel:#111111;
  --panel-2:#151515;
  --text:#f2ede5;
  --muted:rgba(242,237,229,0.72);
  --soft:rgba(242,237,229,0.46);
  --line:rgba(242,237,229,0.1);
  --accent:#b8864c;
  --shadow:0 24px 90px rgba(0,0,0,0.35);
  --max:1120px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --headline:"Manrope", sans-serif;
  --body:"Manrope", sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(184,134,76,0.08), transparent 30%),
    radial-gradient(circle at bottom right, rgba(242,237,229,0.04), transparent 28%),
    var(--bg);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit}
img{display:block;max-width:100%}

.shell{
  min-height:100vh;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(16px);
  background:rgba(10,10,10,0.88);
  border-bottom:1px solid var(--line);
}

.topbar-inner{
  width:min(calc(100% - 2rem), var(--max));
  margin:0 auto;
  padding:1rem 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-family:var(--headline);
  font-size:0.96rem;
}

.topnav{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.5rem;
}

.topnav a{
  text-decoration:none;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.72rem;
}

.topnav a:hover,
.topnav a.active{
  color:var(--text);
}

.page{
  width:min(calc(100% - 2rem), var(--max));
  margin:0 auto;
  padding:clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 6rem);
}

.hero{
  display:grid;
  gap:1.25rem;
  padding:clamp(2rem, 5vw, 4rem) 0 2rem;
  border-bottom:1px solid var(--line);
}

.eyebrow,
.meta,
.card-meta{
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--soft);
  font-size:0.72rem;
}

.hero h1,
.post-header h1{
  margin:0;
  font-family:var(--headline);
  text-transform:uppercase;
  line-height:0.95;
  letter-spacing:0.01em;
}

.hero h1{
  font-size:clamp(2.7rem, 7vw, 5.6rem);
  max-width:11ch;
}

.hero p,
.post-lead{
  margin:0;
  color:var(--muted);
  font-size:clamp(1.02rem, 1.8vw, 1.28rem);
  line-height:1.7;
  max-width:44rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
}

.btn,
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0.95rem 1.35rem;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.78rem;
  transition:transform .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}

.btn{
  background:var(--text);
  color:var(--bg);
  border:1px solid var(--text);
}

.btn-ghost{
  background:rgba(242,237,229,0.04);
  border:1px solid rgba(242,237,229,0.22);
  color:var(--text);
}

.btn:hover,
.btn-ghost:hover{
  transform:translateY(-2px);
}

.posts{
  display:grid;
  gap:1.2rem;
  padding-top:2rem;
}

.post-card{
  display:grid;
  gap:0.8rem;
  text-decoration:none;
  background:linear-gradient(180deg, rgba(242,237,229,0.03), rgba(242,237,229,0.01));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.post-card-image{
  aspect-ratio:16/9;
  background:var(--panel);
}

.post-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.post-card-body{
  display:grid;
  gap:0.8rem;
  padding:1.35rem;
}

.post-card h2{
  margin:0;
  font-family:var(--headline);
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1;
  font-size:clamp(1.5rem, 3vw, 2.5rem);
}

.post-card p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.55rem;
}

.tag{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0.45rem 0.7rem;
  border:1px solid rgba(242,237,229,0.14);
  background:rgba(242,237,229,0.03);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.64rem;
}

.post-header{
  display:grid;
  gap:1rem;
  padding:clamp(2rem, 5vw, 4rem) 0 2rem;
  border-bottom:1px solid var(--line);
}

.post-cover{
  margin-top:1rem;
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.post-cover img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.post-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem 1rem;
}

.post-body{
  width:min(100%, 760px);
  padding-top:2rem;
}

.post-body > * + *{
  margin-top:1.15rem;
}

.post-body h2,
.post-body h3{
  margin:2.2rem 0 0.8rem;
  font-family:var(--headline);
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1;
}

.post-body h2{font-size:clamp(1.7rem, 3vw, 2.5rem)}
.post-body h3{font-size:clamp(1.25rem, 2.5vw, 1.7rem)}

.post-body p,
.post-body li,
.post-body blockquote{
  color:var(--muted);
  line-height:1.8;
  font-size:1.02rem;
}

.post-body p,
.post-body ul,
.post-body ol,
.post-body blockquote,
.post-body pre{
  margin:0;
}

.post-body ul,
.post-body ol{
  padding-left:1.3rem;
}

.post-body a{
  color:var(--text);
  text-decoration-color:rgba(184,134,76,0.7);
}

.post-body strong{color:var(--text)}

.post-body blockquote{
  padding:1rem 1.1rem;
  border-left:2px solid var(--accent);
  background:rgba(242,237,229,0.03);
}

.post-body code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:0.92em;
  padding:0.15rem 0.35rem;
  background:rgba(242,237,229,0.06);
}

.post-body pre{
  overflow:auto;
  padding:1rem;
  border:1px solid var(--line);
  background:var(--panel);
}

.post-body pre code{
  padding:0;
  background:none;
}

.footer{
  padding-top:2rem;
  margin-top:3rem;
  border-top:1px solid var(--line);
  color:var(--soft);
  font-size:0.9rem;
}

@media (max-width: 760px){
  .topbar-inner,
  .page{
    width:min(calc(100% - 1.5rem), var(--max));
  }

  .topnav{
    gap:0.75rem 1rem;
  }

  .hero h1,
  .post-header h1{
    font-size:clamp(2.1rem, 11vw, 3.5rem);
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
}