/* CT Concert Center — shared blog styles (matches the main site's cream/black theme) */
:root{
  --cream:#f6f1e1; --cream2:#fbf8ef; --paper:#ffffff; --ring:#e7dec2;
  --ink:#1b1813; --muted:#6f6757; --line:#e7dec2;
  --maxw:1100px; --readw:720px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header */
header.site{position:sticky;top:0;z-index:20;background:rgba(246,241,225,.85);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--ring)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700}
.brand img{width:36px;height:36px;border-radius:50%}
.brand .name{font-size:16px;letter-spacing:-.01em}
header.site nav{display:flex;align-items:center;gap:22px}
.nav-links{display:flex;gap:22px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:15px}
.nav-links a:hover{color:var(--ink)}
@media(max-width:720px){.nav-links{display:none}}
.btn-app{display:inline-flex;align-items:center;border-radius:999px;font-weight:600;text-decoration:none;padding:11px 20px;background:var(--ink);color:var(--cream);font-size:15px}
.btn-app:hover{opacity:.9}

/* Footer */
footer.site{padding:48px 0;border-top:1px solid var(--ring);color:var(--muted);font-size:14px;margin-top:60px}
footer.site .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--ink)}

/* ── Blog index ──────────────────────────────────────────── */
.blog-head{padding:54px 0 10px}
.blog-head .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700;color:var(--ink)}
.blog-head h1{font-size:clamp(30px,4.5vw,46px);letter-spacing:-.02em;margin:8px 0 10px}
.blog-head p{color:var(--muted);font-size:18px;max-width:60ch;margin:0}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding:36px 0 80px}
.post-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--ring);border-radius:18px;padding:24px;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.post-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(27,24,19,.10)}
.post-card .tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--cream);border:1px solid var(--ring);border-radius:999px;padding:4px 10px;margin-bottom:14px}
.post-card h2{font-size:21px;line-height:1.25;margin:0 0 8px;letter-spacing:-.01em}
.post-card p{margin:0;color:var(--muted);font-size:15px}
.post-card .more{margin-top:14px;font-weight:600;color:var(--ink);font-size:14px}

/* ── Article ─────────────────────────────────────────────── */
.article{max-width:var(--readw);margin:0 auto;padding:40px 20px 20px}
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:18px}
.breadcrumb a{text-decoration:none;color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.article .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--cream2);border:1px solid var(--ring);border-radius:999px;padding:4px 10px}
.article h1{font-size:clamp(30px,4.5vw,44px);line-height:1.12;letter-spacing:-.02em;margin:14px 0 10px}
.article .meta{color:var(--muted);font-size:14px;margin-bottom:28px}
.article h2{font-size:clamp(22px,3vw,28px);letter-spacing:-.01em;margin:36px 0 12px}
.article h3{font-size:19px;margin:26px 0 8px}
.article p,.article li{font-size:17px;color:#2a2620}
.article a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--ring)}
.article a:hover{text-decoration-color:var(--ink)}
.article ul{padding-left:22px}
.article li{margin:6px 0}
.article blockquote{margin:24px 0;padding:14px 20px;border-left:3px solid var(--ink);background:var(--cream2);border-radius:0 10px 10px 0;color:var(--muted)}
.article hr{border:none;border-top:1px solid var(--ring);margin:40px 0}
.tldr{background:var(--cream2);border:1px solid var(--ring);border-radius:14px;padding:16px 22px;margin:6px 0 28px}
.tldr .label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-bottom:4px}
.tldr p{margin:0;font-size:16px}
.faq-section h3{font-size:18px;margin:22px 0 6px}
.faq-section p{margin:0 0 4px}

/* In-article download CTA */
.cta-box{margin:40px 0;padding:28px;background:var(--cream2);border:1px solid var(--ring);border-radius:18px;text-align:center}
.cta-box h3{margin:0 0 6px;font-size:20px}
.cta-box p{margin:0 0 16px;color:var(--muted)}
.appstore{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;padding:11px 18px;border-radius:14px;line-height:1.1}
.appstore svg{width:24px;height:24px;flex:none}
.appstore .small{font-size:11px;opacity:.85;display:block}
.appstore .big{font-size:18px;font-weight:600}

/* Related posts */
.related{max-width:var(--readw);margin:10px auto 0;padding:0 20px}
.related h2{font-size:18px;margin:0 0 12px}
.related a{display:block;padding:12px 0;border-top:1px solid var(--ring);text-decoration:none;color:var(--ink);font-weight:600}
.related a:hover{color:var(--muted)}