/* Shared stylesheet for The Sanctum blog — mirrors index.html tokens/chrome */
:root{
  --bg:#0f1115;
  --bg-soft:#151922;
  --panel:#171b24;
  --panel-2:#1d2330;
  --text:#f5f1e8;
  --muted:#c7c0b2;
  --soft:#9d9688;
  --gold:#cbb27c;
  --gold-dark:#a98f59;
  --line:rgba(255,255,255,0.08);
  --white:#ffffff;
  --shadow:0 18px 40px rgba(0,0,0,0.28);
  --radius:22px;
  --max:980px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg, #0b0d11 0%, #10141b 100%);
  color:var(--text);
  font-family: Georgia, "Times New Roman", serif;
  line-height:1.7;
}
a{color:var(--gold); text-decoration:underline; text-underline-offset:4px;}
a:hover{color:#d7be89;}
img{max-width:100%; display:block; border-radius:14px;}

.wrap{ width:min(var(--max), calc(100% - 32px)); margin:0 auto; }
.wrap-wide{ width:min(1180px, calc(100% - 32px)); margin:0 auto; }

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(14px);
  background:rgba(8,10,14,0.76);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:inherit;
}
.brand img{
  width:58px; height:58px; object-fit:contain;
  border-radius:14px; background:rgba(255,255,255,0.02);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{
  font-size:20px; font-weight:600; color:var(--white); letter-spacing:.4px;
}
.brand-text span{
  font-size:11px; text-transform:uppercase; letter-spacing:2px;
  color:var(--gold); margin-top:5px;
}
.nav-links{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.nav-links a{
  text-decoration:none; color:var(--muted); font-size:14px;
}
.nav-links a:hover{ color:var(--white); }

/* Buttons */
.btn{
  display:inline-block; text-decoration:none;
  padding:13px 22px; border-radius:999px;
  font-size:14px; font-weight:600; letter-spacing:.2px;
  border:0; cursor:pointer; font-family:inherit;
  transition:.2s ease;
}
.btn-primary{
  background:var(--gold); color:#101318;
  box-shadow:var(--shadow);
}
.btn-primary:hover{ background:#d7be89; transform:translateY(-1px); }
.btn-secondary{
  border:1px solid rgba(255,255,255,0.16);
  color:var(--text); background:rgba(255,255,255,0.02);
  text-decoration:none;
}
.btn-secondary:hover{ background:rgba(255,255,255,0.05); }

/* Breadcrumb */
.crumbs{
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--soft); padding:28px 0 0;
}
.crumbs a{ color:var(--soft); text-decoration:none; }
.crumbs a:hover{ color:var(--white); }

/* Blog index */
.page-hero{ padding:56px 0 32px; }
.page-hero h1{
  margin:14px 0 10px;
  font-size:clamp(34px, 5vw, 56px);
  line-height:1.08;
  color:var(--white); font-weight:600;
}
.page-hero p.lead{
  margin:0; color:var(--muted); font-size:19px; max-width:660px;
}
.eyebrow{
  display:inline-block;
  padding:6px 14px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  color:var(--gold);
  text-transform:uppercase; letter-spacing:2px; font-size:11px;
}

.post-list{ list-style:none; margin:0; padding:0 0 80px; }
.post-list li{
  padding:32px 0; border-bottom:1px solid var(--line);
}
.post-list li:last-child{ border-bottom:0; }
.post-card{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:28px; align-items:center;
  text-decoration:none; color:inherit;
}
.post-card .thumb{
  aspect-ratio: 3 / 2; overflow:hidden;
  background:linear-gradient(135deg, rgba(203,178,124,0.1), rgba(203,178,124,0.02));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.post-card .thumb img{
  width:100%; height:100%; object-fit:cover; border-radius:0;
}
.post-card .thumb-monogram{
  font-family:Georgia,serif; font-size:64px; color:var(--gold);
  letter-spacing:4px; opacity:.8;
}
.post-card h2{
  margin:0 0 10px;
  font-size:26px; color:var(--white); font-weight:600; line-height:1.25;
}
.post-card:hover h2{ color:var(--gold); }
.post-meta{
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--soft); margin:0 0 12px;
}
.post-excerpt{
  margin:0; color:var(--muted); font-size:16px;
}
.post-readmore{
  margin-top:16px; color:var(--gold); font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase;
}

/* Post article */
.article{ padding:40px 0 80px; }
.article .meta{
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--soft); margin:0 0 14px;
}
.article h1{
  margin:0 0 28px;
  font-size:clamp(32px, 4.8vw, 52px); line-height:1.08;
  color:var(--white); font-weight:600;
}
.article .lead{
  font-size:22px; color:#e4ddcf; line-height:1.55;
  margin:0 0 36px; padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.article h2{
  margin:48px 0 16px;
  font-size:28px; color:var(--white); font-weight:600; line-height:1.25;
}
.article h3{
  margin:36px 0 12px;
  font-size:20px; color:var(--white); font-weight:600;
}
.article p{ margin:0 0 22px; font-size:17px; color:var(--text); }
.article ul, .article ol{ padding-left:22px; margin:0 0 22px; }
.article li{ margin:8px 0; color:var(--text); }
.article blockquote{
  border-left:2px solid var(--gold);
  padding:4px 0 4px 22px;
  margin:32px 0;
  font-style:italic; color:var(--muted); font-size:19px;
}
.article hr{
  border:0; border-top:1px solid var(--line);
  margin:40px 0;
}
.article .cta{
  margin:48px 0 0;
  padding:28px 32px;
  background:rgba(203,178,124,0.05);
  border:1px solid rgba(203,178,124,0.25);
  border-radius:14px;
}
.article .cta h3{ margin-top:0; color:var(--gold); }

/* Footer */
footer{
  border-top:1px solid var(--line);
  padding:32px 0 48px;
  color:var(--soft);
  font-size:13px;
  text-align:center;
}
footer a{ color:var(--gold); text-decoration:none; }

@media (max-width: 760px){
  .post-card{ grid-template-columns:1fr; }
  .post-card .thumb{ aspect-ratio: 16 / 10; }
  .nav{ flex-direction:column; align-items:flex-start; }
  .nav-links{ gap:14px; }
}