@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

:root{
  --primary:#D9552E;--primary-dark:#B8431F;--cream:#F4EAD9;--dark:#2B2320;
  --muted:#6b625b;--line:#e5ddd0;--card-bg:#fffaf3;
  --font-display:'Oswald','Helvetica Neue',Arial,sans-serif;
  --font-main:'Inter','Helvetica Neue',Arial,sans-serif;
  --radius:10px;--maxw:1040px;
  --shadow:0 10px 30px rgba(43,35,32,.12);
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-main);color:var(--dark);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;}
img{max-width:100%;}
a{color:var(--primary-dark);}

/* ---------- Header / nav (injected by common.js) ---------- */
header.site-header{background:var(--primary);color:var(--cream);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
header.site-header img{height:56px;display:block;}
nav.main-nav ul{list-style:none;display:flex;gap:1.4rem;margin:0;padding:0;flex-wrap:wrap;}
nav.main-nav a{color:var(--cream);text-decoration:none;font-weight:600;letter-spacing:.02em;font-size:.95rem;}
nav.main-nav a:hover,nav.main-nav a.active{text-decoration:underline;}

/* ---------- Layout & type ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:2.5rem 1.5rem;min-height:60vh;}
h1,h2,h3{color:var(--primary-dark);font-family:var(--font-display);font-weight:600;line-height:1.15;}
h1{letter-spacing:.01em;}
h2{letter-spacing:.01em;font-size:1.7rem;margin:0 0 .6rem;}
main a{color:var(--primary-dark);}
main a:hover{color:var(--primary);}
.eyebrow{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:600;color:var(--primary);margin-bottom:.35rem;}
.muted{color:var(--muted);}

/* ---------- Hero ---------- */
.hero{background:var(--cream);text-align:center;padding:3.2rem 1.5rem 2.4rem;}
.hero img{width:min(300px,60vw);height:auto;}
.hero h1{font-size:clamp(2.2rem,6vw,3.2rem);margin:.6rem 0 .3rem;text-transform:uppercase;letter-spacing:.02em;}
.hero p.tagline{font-size:clamp(1.05rem,2.6vw,1.25rem);color:var(--dark);margin:0 auto;max-width:36ch;}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--primary);color:#fff;padding:.8rem 1.6rem;border-radius:6px;text-decoration:none;font-weight:600;font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;font-size:.95rem;transition:background .18s ease,transform .18s ease;}
.btn:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px);}
.btn-secondary{background:transparent;color:var(--primary-dark);border:2px solid var(--primary);padding:calc(.8rem - 2px) calc(1.6rem - 2px);}
.btn-secondary:hover{background:var(--primary);color:#fff;}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1.4rem;}

/* ---------- ECG divider (brand signature) ---------- */
.ecg-divider{display:block;width:100%;max-width:520px;margin:1.6rem auto .2rem;height:34px;color:var(--primary);}
.ecg-divider svg{display:block;width:100%;height:100%;}
.ecg-divider path{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;}

/* ---------- Section header with "see all" ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:2.8rem 0 1.2rem;}
.section-head h2{margin:0;}
.section-head .see-all{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;font-weight:600;white-space:nowrap;text-decoration:none;}
.section-head .see-all:hover{text-decoration:underline;}

/* ---------- Explore cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem;margin-top:1.4rem;}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:var(--card-bg);}
.card h3{margin-top:0;}

/* ---------- Substack post preview cards ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.4rem;}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card-bg);text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease;}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.post-card .thumb{aspect-ratio:16/9;background:var(--cream) center/cover no-repeat;border-bottom:1px solid var(--line);}
.post-card .pc-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.post-card .pc-date{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);font-weight:600;}
.post-card h3{margin:0;font-family:var(--font-main);font-weight:700;font-size:1.08rem;line-height:1.3;color:var(--dark);}
.post-card .pc-excerpt{margin:0;color:var(--muted);font-size:.94rem;flex:1;}
.post-card .pc-more{font-weight:600;color:var(--primary-dark);font-size:.9rem;}

/* ---------- Stay-connected two-column ---------- */
.connect-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start;}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);padding:1.4rem;}
.panel > h3{margin:0 0 .3rem;font-family:var(--font-main);font-weight:700;color:var(--dark);}
.panel .panel-sub{margin:0 0 1rem;color:var(--muted);font-size:.94rem;}
.subscribe-embed{width:100%;border:0;background:transparent;min-height:150px;}
@media(max-width:720px){.connect-grid{grid-template-columns:1fr;}}

/* ---------- X / Twitter timeline ---------- */
#x-timeline{display:flex;flex-direction:column;align-items:center;}
#x-timeline .x-fallback{color:var(--muted);font-style:italic;margin-top:1rem;text-align:center;}

/* ---------- Footer (injected by common.js) ---------- */
footer.site-footer{background:var(--dark);color:var(--cream);text-align:center;padding:1.8rem 1.5rem;font-size:.9rem;}
footer.site-footer a{color:var(--cream);}

/* ---------- Legacy article feed (articles.html) ---------- */
.feed-item{border-bottom:1px solid var(--line);padding:1rem 0;}
.feed-item h3{margin-bottom:.25rem;font-family:var(--font-main);font-weight:700;color:var(--dark);}
.feed-item .date{color:var(--muted);font-size:.85rem;}
.loading{color:var(--muted);font-style:italic;}

/* ---------- a11y / motion ---------- */
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}