:root{
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', system-ui, sans-serif;
  --maxw: 64rem;
  --radius: .875rem;
}
:root, [data-theme='light']{
  --bg:#f5f1e8;
  --surface:#fbf8f1;
  --surface-2:#efe9dc;
  --border:#ded5c4;
  --text:#232018;
  --muted:#6e6858;
  --faint:#9c9584;
  --primary:#8a5a12;
  --primary-hover:#6b4409;
  --accent:#1f5f63;
  --shadow:0 1px 2px rgba(35,32,24,.05), 0 20px 40px -24px rgba(35,32,24,.32);
  --blob-1:rgba(138,90,18,.16);
  --blob-2:rgba(31,95,99,.14);
  --blob-3:rgba(154,61,44,.10);
}
[data-theme='dark']{
  --bg:#15140f;
  --surface:#1d1b16;
  --surface-2:#26241d;
  --border:#39362c;
  --text:#e7e2d6;
  --muted:#9a9384;
  --faint:#6b6557;
  --primary:#d89c3c;
  --primary-hover:#eab254;
  --accent:#6fb3b5;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 24px 48px -24px rgba(0,0,0,.75);
  --blob-1:rgba(216,156,60,.14);
  --blob-2:rgba(111,179,181,.12);
  --blob-3:rgba(212,129,108,.10);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}

/* ---------- animated background ---------- */
.bg-anim{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
}
.bg-anim::before, .bg-anim::after, .bg-anim{
  content:'';
}
.bg-anim::before{
  content:'';
  position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  top:-20vmax; left:-15vmax;
  background:radial-gradient(circle, var(--blob-1), transparent 70%);
  animation: float1 26s ease-in-out infinite;
}
.bg-anim::after{
  content:'';
  position:absolute; width:55vmax; height:55vmax; border-radius:50%;
  bottom:-22vmax; right:-18vmax;
  background:radial-gradient(circle, var(--blob-2), transparent 70%);
  animation: float2 32s ease-in-out infinite;
}
@keyframes float1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6vmax,4vmax) scale(1.08); }
}
@keyframes float2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-5vmax,-5vmax) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  .bg-anim::before, .bg-anim::after{ animation:none; }
}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:1.5rem 1.5rem 0;
}
.brand{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--font-display); }
.brand-name{ font-size:1.15rem; font-weight:600; letter-spacing:-.01em; }
.brand-dot{ color:var(--faint); }
.brand-sub{ font-size:.85rem; color:var(--muted); font-family:var(--font-body); }
.controls{ display:flex; gap:.5rem; }
.ctrl-btn{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:.5rem; padding:.4rem .7rem; font-size:.75rem; font-weight:700;
  letter-spacing:.03em; cursor:pointer; font-family:var(--font-body);
}
.ctrl-btn:hover{ border-color:var(--primary); }

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:4.5rem 1.5rem 2rem;
  text-align:center;
}
.eyebrow{
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary); font-weight:700; margin:0 0 1rem;
}
h1{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2.5rem, 2rem + 3vw, 4rem); margin:0 0 1rem;
}
.lede{
  color:var(--muted); font-size:1.05rem; max-width:34rem; margin:0 auto 3rem;
}

/* ---------- card grid ---------- */
.grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(13.5rem, 1fr));
  gap:1.25rem; margin-bottom:2.5rem; text-align:left;
}
.card{
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.75rem 1.5rem; box-shadow:var(--shadow);
  text-decoration:none; color:var(--text);
  transition:transform .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; gap:.5rem; min-height:9rem;
}
.card:hover{ transform:translateY(-3px); border-color:var(--primary); }
.card.disabled{ cursor:default; opacity:.72; }
.card.disabled:hover{ transform:none; border-color:var(--border); }
.card.featured{ border-color:var(--accent); }
.card-icon{ font-size:1.4rem; }
.card-title{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; }
.card-desc{ font-size:.85rem; color:var(--muted); line-height:1.5; flex:1; }
.badge{
  align-self:flex-start; font-size:.65rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:.2rem .55rem; border-radius:999px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border);
}
.badge.live{ background:var(--primary); color:var(--bg); border-color:var(--primary); }

.foot-note{ font-size:.8rem; color:var(--faint); }

.site-footer{
  text-align:center; padding:2rem 1.5rem 3rem; color:var(--faint); font-size:.8rem;
}

@media (max-width:30rem){
  .topbar{ flex-direction:column; gap:.75rem; align-items:flex-start; }
}