/* East Lake Union Studio — shared blog styles
   Palette + typography mirror landing/index.html */
:root{
  --ink:#1A1F1E; --body:#3A4541; --muted:#6B7370;
  --lake:#1F5468; --lake-dark:#143845; --lake-light:#E4EEF1;
  --sun:#E8B14A; --cream:#FBF7EE; --paper:#FFFDF8;
  --rule:#E0D9C9; --shadow:0 8px 28px rgba(20,56,69,0.08);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; color:var(--body); background:var(--paper); line-height:1.65; font-size:17px}
a{color:var(--lake); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.narrow{max-width:720px; margin:0 auto; padding:0 24px}

/* Header (matches landing) */
header.site{padding:20px 0; border-bottom:1px solid var(--rule); background:var(--paper)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.logo-row{display:flex; align-items:center; gap:12px}
.logo-mark{width:44px; height:44px; flex-shrink:0}
.logo-text{font-family:Georgia,serif; font-size:1.4rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1}
.logo-text span{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:.65rem; font-weight:700; color:var(--lake); letter-spacing:.16em; text-transform:uppercase; margin-top:6px}
.logo-row a{color:inherit; text-decoration:none}
.nav-links{display:flex; gap:24px; font-size:.95rem}
.nav-links a{color:var(--body); font-weight:500}
.nav-links a.active{color:var(--lake); font-weight:700}

/* Hub */
.blog-hero{padding:64px 0 32px; background:linear-gradient(180deg, var(--lake-light) 0%, var(--paper) 100%)}
.blog-hero h1{font-family:Georgia,serif; font-size:clamp(2.2rem, 4vw, 3rem); color:var(--ink); margin-bottom:12px; letter-spacing:-.01em; line-height:1.1}
.blog-hero p{font-size:1.1rem; color:var(--body); max-width:640px}
.blog-hero .crumb{font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; font-weight:700}
.blog-hero .crumb a{color:var(--muted)}

.post-list{padding:48px 0 88px}
.post-list-grid{display:grid; gap:28px; grid-template-columns:1fr}
.post-card{display:block; background:#fff; border:1px solid var(--rule); border-radius:14px; padding:28px 32px; transition:all .2s; color:inherit; text-decoration:none}
.post-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none}
.post-card h2{font-family:Georgia,serif; font-size:1.5rem; color:var(--ink); margin-bottom:10px; letter-spacing:-.005em; line-height:1.25}
.post-card p{color:var(--body); font-size:1rem; line-height:1.6; margin-bottom:14px}
.post-meta{display:flex; gap:14px; flex-wrap:wrap; font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.tag{display:inline-block; background:var(--lake-light); color:var(--lake-dark); padding:3px 10px; border-radius:50px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.tag.sun{background:#FBE8C0; color:#8A5F12}
.tag.cream{background:var(--cream); color:var(--body)}

/* Article */
article.post{padding:48px 0 64px}
.post-header{margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--rule)}
.post-header .crumb{font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:16px}
.post-header .crumb a{color:var(--muted)}
.post-header h1{font-family:Georgia,serif; font-size:clamp(2rem, 4vw, 2.8rem); color:var(--ink); line-height:1.15; letter-spacing:-.01em; margin-bottom:18px}
.post-header .lede{font-size:1.18rem; color:var(--body); line-height:1.55; max-width:680px; margin-bottom:20px}
.post-header .byline{font-size:.9rem; color:var(--muted)}
.post-header .byline strong{color:var(--ink); font-weight:600}

/* Prose */
.prose{max-width:720px; font-size:1.05rem; line-height:1.75; color:var(--body)}
.prose h2{font-family:Georgia,serif; font-size:1.6rem; color:var(--ink); margin:44px 0 14px; line-height:1.25; letter-spacing:-.005em}
.prose h3{font-family:Georgia,serif; font-size:1.25rem; color:var(--ink); margin:32px 0 10px; line-height:1.3}
.prose p{margin-bottom:18px}
.prose ul, .prose ol{margin:0 0 22px 22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink); font-weight:700}
.prose em{font-style:italic}
.prose a{color:var(--lake); text-decoration:underline; text-underline-offset:2px}
.prose blockquote{margin:24px 0; padding:18px 24px; background:var(--cream); border-left:4px solid var(--sun); border-radius:0 8px 8px 0; font-style:italic; color:var(--ink)}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-family:Menlo,Monaco,Consolas,monospace; font-size:.92em; background:var(--cream); padding:1px 6px; border-radius:4px; color:var(--ink)}
.prose hr{border:none; border-top:1px solid var(--rule); margin:36px 0}
.prose table{width:100%; border-collapse:collapse; margin:22px 0; font-size:.95rem}
.prose th, .prose td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top}
.prose th{background:var(--lake-light); color:var(--lake-dark); font-weight:700; text-transform:uppercase; font-size:.78rem; letter-spacing:.05em}
.prose tr:last-child td{border-bottom:none}

/* Inline CTA card (mid-article) */
.inline-cta{background:var(--lake); color:#fff; border-radius:14px; padding:28px 30px; margin:36px 0; box-shadow:var(--shadow)}
.inline-cta h3{font-family:Georgia,serif; color:#fff; font-size:1.3rem; margin-bottom:8px; line-height:1.3}
.inline-cta p{color:rgba(255,255,255,0.88); font-size:.98rem; margin-bottom:16px; line-height:1.55}
.inline-cta a.btn{display:inline-block; background:var(--sun); color:var(--ink); padding:12px 22px; border-radius:50px; font-weight:700; font-size:.95rem; text-decoration:none; transition:all .15s}
.inline-cta a.btn:hover{background:#F2C474; text-decoration:none}

/* End-of-post CTA */
.end-cta{background:var(--cream); border:1px solid var(--rule); border-radius:14px; padding:32px 30px; margin:40px 0 20px; text-align:center}
.end-cta h3{font-family:Georgia,serif; font-size:1.4rem; color:var(--ink); margin-bottom:10px; line-height:1.3}
.end-cta p{color:var(--body); margin-bottom:18px; font-size:1rem}
.end-cta a.btn{display:inline-block; background:var(--lake); color:#fff; padding:13px 28px; border-radius:50px; font-weight:700; font-size:.96rem; text-decoration:none; transition:all .15s}
.end-cta a.btn:hover{background:var(--lake-dark); text-decoration:none}

/* Related posts */
.related{background:var(--cream); padding:56px 0; border-top:1px solid var(--rule)}
.related h2{font-family:Georgia,serif; font-size:1.5rem; color:var(--ink); margin-bottom:24px}
.related-grid{display:grid; gap:20px; grid-template-columns:repeat(2, 1fr)}
.related a{display:block; background:#fff; padding:20px 22px; border-radius:12px; border:1px solid var(--rule); color:inherit; text-decoration:none; transition:all .2s}
.related a:hover{transform:translateY(-2px); box-shadow:var(--shadow); text-decoration:none}
.related a strong{display:block; font-family:Georgia,serif; color:var(--ink); font-size:1.05rem; margin-bottom:6px; line-height:1.3}
.related a span{font-size:.85rem; color:var(--muted)}

/* Footer */
footer.site{padding:36px 0 28px; border-top:1px solid var(--rule); font-size:.88rem; color:var(--muted); background:var(--paper)}
footer.site .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px}
footer.site a{color:var(--muted)}

@media(max-width:760px){
  .nav-links{display:none}
  .blog-hero{padding:36px 0 24px}
  .post-list{padding:32px 0 56px}
  .post-card{padding:22px 22px}
  article.post{padding:32px 0 48px}
  .prose{font-size:1rem}
  .related-grid{grid-template-columns:1fr}
}