/* Wildly Wandering – editorial article design. Presentation only. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700;800&display=swap');
body{background:#f9fbf7;color:#152c24}
body>header{background:#f6faf6;border-bottom:1px solid #dde8dc;position:relative;z-index:10}
.article-page{display:grid;grid-template-columns:minmax(0,1fr);background:#fbfcf9;overflow:hidden}
.article-header,.article-featured-image{grid-row:1;grid-column:1;box-sizing:border-box}
.article-featured-image{width:100%;height:clamp(420px,43vw,620px);max-width:none;margin:0;position:relative;z-index:0;background:linear-gradient(135deg,#304a45,#77918a)}
.article-featured-image:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,22,20,.82),rgba(8,24,23,.52) 53%,rgba(5,23,17,.1));pointer-events:none}
.article-featured-image img{width:100%;height:100%;object-fit:cover}
.article-header{z-index:1;pointer-events:none;color:white;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;margin:0 auto;width:min(100%,1160px);max-width:1160px;padding:48px 28px;min-height:420px}
.article-header .article-category{color:#f0f7e9;background:#145536;padding:8px 17px;letter-spacing:.13em;font-size:11px;border-radius:30px;margin:0 0 21px}
.article-header h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(36px,5vw,68px);max-width:800px;line-height:1.11;text-wrap:balance;color:white;text-shadow:0 2px 12px #001a1870;margin:0 0 18px}
.article-header .article-introduction{margin:0;max-width:700px;font:400 clamp(15px,1.5vw,19px)/1.5 'DM Sans',sans-serif;color:#fff}
.article-header .article-meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 20px;margin:22px 0 0;width:auto;max-width:100%;color:#f5f8f3}
.article-header .article-meta span{color:#f5f8f3;font-size:12px}
.article-page>.article-body{box-sizing:border-box;width:min(100% - 40px,850px);max-width:850px;padding:54px 0 25px;margin:0 auto;color:#283b34}
.article-body p,.article-body li{font:400 16px/1.85 'DM Sans',sans-serif;color:#34443d}
.article-body h2,.article-body h3{font-family:'Playfair Display',Georgia,serif;color:#172c20;line-height:1.22}
.article-body h2{font-size:clamp(27px,3vw,38px);margin-top:43px}
.article-body h3{font-size:clamp(22px,2.5vw,30px)}
.article-body figure,.article-page figure{max-width:100%;margin:30px 0}
.article-body img,.article-page figure img{max-width:100%;height:auto;border-radius:8px;display:block}
.article-body figcaption,.article-page figcaption{font-size:12px;color:#697d72;margin-top:8px}
.article-body a{color:#145b3a;text-underline-offset:3px}
.article-body blockquote{border-left:4px solid #1b603f;background:#edf4ec;padding:20px 25px;margin:28px 0;font-family:Georgia,serif}
.article-page .article-share,.article-page .related-posts,.article-page .article-recommendation,.article-page .article-back{width:min(100% - 40px,1100px);max-width:1100px;box-sizing:border-box;margin:30px auto}
.article-page .article-share{border-top:1px solid #d5e2d8;padding:28px 0;margin-top:22px}
.article-share .share-buttons{display:flex;flex-wrap:wrap;gap:12px}
.article-share .share-button{background:#eaf2ea;color:#174a33;border:1px solid #d6e2d6;border-radius:24px;padding:10px 18px;transition:background .15s}
.article-share .share-button:hover{background:#d8e9d9}
.related-posts h2,.article-recommendation h2{font-family:'Playfair Display',Georgia,serif}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.related-card{border:1px solid #e1e9e1;border-radius:9px;background:white;overflow:hidden;box-shadow:0 2px 9px #1233210b}
.related-card img{width:100%;height:170px;object-fit:cover;border-radius:0}
.related-card h3{font-family:'Playfair Display',Georgia,serif;font-size:20px}
.related-card p{font-size:13px;line-height:1.5}
.article-recommendation{background:#e9f1e9;border-left:4px solid #185b3b;border-radius:8px}
.article-page .article-back a,.article-page a.button,.article-page .btn{border-radius:26px}
@media(max-width:700px){.article-featured-image{height:530px}.article-header{padding:44px 19px;min-height:530px}.article-header h1{font-size:clamp(34px,8.4vw,48px)}.article-header .article-introduction{font-size:14px;line-height:1.5}.article-header .article-meta{margin-top:16px;gap:5px 12px}.article-page>.article-body{width:calc(100% - 32px);padding-top:33px}.related-grid{grid-template-columns:1fr}.related-card img{height:195px}.article-page .article-share,.article-page .related-posts,.article-page .article-recommendation,.article-page .article-back{width:calc(100% - 32px)}.article-body p,.article-body li{font-size:15px}}
@media(prefers-reduced-motion:reduce){.article-share .share-button{transition:none}}