/* ============================================================
   Elise & Adam - shared design tokens + global base
   Edit colors/spacing here once; every component inherits them.
   ============================================================ */
:root{
  --cream:#F2EDE4;
  --paper:#ffffff;
  --ink:#2D3226;
  --forest:#4C5654;
  --sage:#7A9086;
  --sage-dark:#3A463B;
  --pale-sage:#D5DBC3;
  --line:rgba(184,191,188,.5);
  --muted:#7d8478;
  --white:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%;}
body{
  background:#fff;
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Slotted card detail rows live in light DOM, so they're styled globally here.
   Use inside <info-card>: <div class="kv"><b>Venue</b><span>…</span></div> */
.kv{display:flex;gap:8px;font-size:13.5px;color:#54585f;margin:3px 0;line-height:1.5;}
.kv b{font-weight:500;color:var(--ink);min-width:70px;display:inline-block;}
.kv a{color:var(--sage-dark);text-decoration:none;}
.kv a:hover{text-decoration:underline;}

/* slotted prose (e.g. Things to Do card body) */
.lead{font-size:14.5px;color:#4b4f57;line-height:1.75;margin:0 0 12px;max-width:640px;}
.subblock{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.subblock h4{font-family:'Jost',sans-serif;font-weight:500;font-size:1.05rem;color:var(--sage-dark);margin-bottom:10px;letter-spacing:.02em;}
.tiktok-wrap{margin-top:14px;}