:root{
  --ink:#1C1024; --ink-2:#241531; --gold:#E3B23C; --gold-bright:#F4CD5C;
  --cream:#F3E9D6; --cream-dim:#C9BCA4; --teal:#1F6F63; --teal-bright:#2C9686;
  --font-display:'Baloo 2', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0; background:radial-gradient(ellipse at top, #2A1836 0%, var(--ink) 55%), var(--ink);
  color:var(--cream); font-family:var(--font-body); line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{ color:var(--gold-bright); }
.wrap{ max-width:760px; margin:0 auto; padding:32px 20px 70px; }

/* header / breadcrumb */
.site-header{ text-align:center; margin-bottom:30px; }
.site-header a.home-link{ text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.site-header .brand-name{ font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--gold-bright); }
.breadcrumb{ font-size:13px; color:var(--cream-dim); margin-bottom:8px; }
.breadcrumb a{ color:var(--cream-dim); text-decoration:none; }
.breadcrumb a:hover{ color:var(--gold-bright); }

/* typography */
h1{ font-family:var(--font-display); font-weight:800; font-size:32px; color:var(--gold-bright); line-height:1.25; margin:6px 0 10px; }
h2{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--cream); margin:36px 0 12px; }
h3{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--gold-bright); margin:24px 0 8px; }
p, li{ font-size:16px; color:var(--cream-dim); }
p{ margin:0 0 16px; }
ul, ol{ padding-left:22px; margin:0 0 16px; }
li{ margin-bottom:6px; }
strong{ color:var(--cream); }
.meta{ font-size:13px; color:var(--cream-dim); opacity:0.75; margin-bottom:28px; }
.lead{ font-size:18px; color:var(--cream); }

/* callout box linking back to the app */
.cta{
  background:linear-gradient(160deg, var(--ink-2), #1E1229);
  border:1px solid rgba(227,178,60,0.25); border-radius:16px;
  padding:20px 22px; margin:26px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.cta p{ margin:0; font-size:15px; color:var(--cream); flex:1; min-width:200px; }
.cta .btn{
  font-family:var(--font-display); font-weight:700; font-size:15px; text-decoration:none;
  background:linear-gradient(135deg,var(--gold-bright),#C6912E); color:#2A1608;
  border-radius:999px; padding:12px 24px; white-space:nowrap;
}

table{ width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:14.5px; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.08); color:var(--cream-dim); }
th{ color:var(--gold-bright); font-family:var(--font-display); font-weight:700; }

/* blog index cards */
.post-list{ display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.post-card{
  display:block; text-decoration:none;
  background:linear-gradient(160deg, var(--ink-2), #1E1229);
  border:1px solid rgba(227,178,60,0.14); border-radius:16px; padding:20px 22px;
  transition:border-color .15s ease;
}
.post-card:hover{ border-color:rgba(227,178,60,0.4); }
.post-card h2{ margin:0 0 8px; font-size:19px; color:var(--gold-bright); }
.post-card p{ margin:0; font-size:14.5px; color:var(--cream-dim); }
.post-card .tag{ font-size:12px; color:var(--teal-bright); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; display:block; }

footer.site-footer{ text-align:center; color:var(--cream-dim); font-size:12px; margin-top:50px; opacity:0.6; }
footer.site-footer a{ color:var(--cream-dim); }