:root {
  --cream: #FAF8F4; --warm-cream: #F5F0E8; --charcoal: #3D3D2E;
  --sage: #9BB09A; --sage-dark: #7A9479; --sage-light: #D4E3D3;
  --terracotta: #C4704B; --warm-brown: #8B7355; --olive: #6B6B4E;
  --border: #E5DFD5;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Source Sans 3',-apple-system,sans-serif; background:var(--cream); color:var(--charcoal); line-height:1.7; -webkit-font-smoothing:antialiased; }

.guide-nav { padding:16px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:0.9rem; }
.guide-nav a { color:var(--warm-brown); text-decoration:none; font-weight:500; }
.guide-nav a:hover { color:var(--sage-dark); }
.guide-nav .sep { color:var(--border); padding:0 4px; }
.guide-nav .current { color:var(--charcoal); font-weight:600; }

.guide-article { max-width:720px; margin:0 auto; padding:48px 24px 80px; }
.guide-article h1 { font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; line-height:1.2; margin-bottom:16px; }
.guide-meta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; font-size:0.88rem; color:var(--warm-brown); }
.guide-meta .tag { background:var(--sage-light); color:var(--sage-dark); padding:4px 14px; border-radius:20px; font-weight:600; font-size:0.8rem; }
.guide-meta .author { font-style:italic; }
.guide-intro { font-size:1.12rem; color:var(--olive); line-height:1.8; margin-bottom:40px; font-weight:300; }

.guide-article h2 { font-family:'Playfair Display',Georgia,serif; font-size:1.45rem; font-weight:600; margin-top:48px; margin-bottom:20px; padding-bottom:8px; border-bottom:2px solid var(--sage-light); }
.guide-article h3 { font-size:1.1rem; font-weight:600; margin-top:24px; margin-bottom:12px; }
.guide-article p { margin-bottom:16px; font-size:1.02rem; line-height:1.75; }

.card { background:white; border:1px solid var(--border); border-radius:12px; padding:20px 24px; margin-bottom:14px; transition:box-shadow 0.2s; }
.card:hover { box-shadow:0 2px 12px rgba(61,61,46,0.06); }
.card .title { font-weight:600; font-size:1.05rem; margin-bottom:8px; }
.card .desc { color:var(--olive); font-size:0.96rem; line-height:1.65; margin-bottom:10px; }
.card .tags { display:flex; flex-wrap:wrap; gap:8px; }
.pill { font-size:0.78rem; padding:3px 10px; border-radius:12px; font-weight:500; display:inline-block; }
.pill-cost { background:#E8F5E9; color:#2E7D32; }
.pill-diy { background:#FFF3E0; color:#E65100; }
.pill-beginner { background:#E8F5E9; color:#2E7D32; }
.pill-intermediate { background:#FFF3E0; color:#E65100; }
.pill-pro { background:#FFEBEE; color:#C62828; }
.pill-none { background:#E8F5E9; color:#2E7D32; }
.pill-time { background:#E3F2FD; color:#1565C0; }

.task-row { display:flex; align-items:flex-start; gap:12px; margin-bottom:8px; }
.task-row input[type=checkbox] { margin-top:4px; width:18px; height:18px; accent-color:var(--sage); flex-shrink:0; }

.step-card { position:relative; padding-left:48px; }
.step-num { position:absolute; left:0; top:20px; width:32px; height:32px; background:var(--sage); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; }
.important { background:#FFF8E1; border-left:3px solid var(--terracotta); padding:12px 16px; border-radius:0 8px 8px 0; font-size:0.93rem; line-height:1.6; margin-top:12px; }

.mistake-card { border-left:3px solid var(--terracotta); border-radius:0 12px 12px 0; }
.mistake-title { font-weight:600; color:var(--terracotta); margin-bottom:6px; }

.placement-card .loc-name { font-weight:600; color:var(--sage-dark); margin-bottom:4px; }
.placement-card .priority { font-size:0.86rem; font-style:italic; color:var(--warm-brown); margin-top:6px; }

.pro-tips { background:var(--warm-cream); border-radius:12px; padding:28px; margin:40px 0; }
.pro-tips h2 { margin-top:0; border:none; padding:0; margin-bottom:16px; }
.pro-tips ul { list-style:none; padding:0; }
.pro-tips li { padding:10px 0 10px 28px; position:relative; font-size:0.98rem; line-height:1.65; }
.pro-tips li::before { content:"→"; position:absolute; left:0; color:var(--sage); font-weight:700; }

.tools-list, .materials-list { list-style:none; padding:0; margin-bottom:20px; }
.tools-list li, .materials-list li { padding:6px 0 6px 28px; position:relative; font-size:0.96rem; }
.tools-list li::before { content:"🔧"; position:absolute; left:0; }
.materials-list li::before { content:"📦"; position:absolute; left:0; }

.newsletter-cta { background:var(--sage); color:white; border-radius:16px; padding:40px 32px; text-align:center; margin-top:48px; }
.newsletter-cta h2 { color:white; border:none; margin:0 0 12px; font-size:1.5rem; }
.newsletter-cta p { color:rgba(255,255,255,0.9); font-size:1.02rem; max-width:520px; margin:0 auto 24px; }
.newsletter-cta .cta-btn { display:inline-block; padding:14px 36px; background:white; color:var(--sage-dark); border:none; border-radius:8px; font-size:1.02rem; font-weight:600; text-decoration:none; transition:transform 0.1s; }
.newsletter-cta .cta-btn:hover { transform:translateY(-1px); }

.free-resources { margin-top:40px; padding-top:32px; border-top:1px solid var(--border); }
.free-resources ul { list-style:none; padding:0; }
.free-resources li { padding:8px 0 8px 28px; position:relative; font-size:0.96rem; color:var(--olive); line-height:1.6; }
.free-resources li::before { content:"📌"; position:absolute; left:0; }

.guide-footer { text-align:center; padding:32px 24px; border-top:1px solid var(--border); font-size:0.85rem; color:var(--warm-brown); }
.guide-footer a { color:var(--sage-dark); text-decoration:none; }

.index-grid { display:grid; gap:20px; margin-top:32px; }
.index-card { background:white; border:1px solid var(--border); border-radius:12px; padding:28px; text-decoration:none; color:inherit; transition:box-shadow 0.2s, transform 0.1s; display:block; }
.index-card:hover { box-shadow:0 4px 20px rgba(61,61,46,0.08); transform:translateY(-2px); }
.index-card .ic-tag { display:inline-block; font-size:0.75rem; padding:3px 10px; border-radius:12px; background:var(--sage-light); color:var(--sage-dark); font-weight:600; margin-bottom:12px; }
.index-card h3 { font-family:'Playfair Display',Georgia,serif; font-size:1.25rem; margin-bottom:8px; color:var(--charcoal); }
.index-card p { color:var(--olive); font-size:0.95rem; line-height:1.6; }

@media(max-width:600px) {
  .guide-article { padding:32px 16px 60px; }
  .card { padding:16px; }
  .newsletter-cta { padding:28px 20px; }
  .step-card { padding-left:40px; }
}