.blog-page{min-height:100vh;background:#182b25;color:#fff2bb;--blog-border:rgba(255,242,187,.2);--blog-muted:rgba(255,242,187,.72);--blog-soft:rgba(255,242,187,.55)}
.blog-page *{box-sizing:border-box}
.blog-page [hidden]{display:none!important}
.blog-page a{color:inherit;text-decoration:none}
.blog-page button,.blog-page input{font:inherit;color:inherit}
.blog-header{height:80px;border-bottom:1px solid var(--blog-border);background:rgba(24,43,37,.5);backdrop-filter:blur(8px);position:relative;z-index:5}
.blog-header-inner{height:100%;max-width:1440px;padding:0 32px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.blog-brand{display:flex;align-items:center;gap:10px;flex:none;font-size:16px;font-weight:700;letter-spacing:.18em;white-space:nowrap}
.brand-dot,.nav-dot{border-radius:50%;background:#fff2bb;box-shadow:0 0 10px rgba(255,242,187,.8)}
.brand-dot{width:8px;height:8px}
.blog-nav{height:100%;display:flex;align-items:center;justify-content:center;gap:clamp(20px,2.4vw,36px)}
.blog-nav a{position:relative;padding:6px 0;color:var(--blog-muted);font-size:13px;letter-spacing:.1em;white-space:nowrap;transition:color .18s ease}
.blog-nav a:hover,.blog-nav a.active{color:#fff2bb}
.nav-dot{position:absolute;left:50%;bottom:-15px;width:4px;height:4px;transform:translateX(-50%)}
.header-actions{display:flex;align-items:center;gap:16px;flex:none}
.language-switch{display:flex;align-items:center;padding:2px;border:1px solid var(--blog-border);border-radius:999px}
.language-switch button{height:27px;padding:0 10px;border:0;border-radius:999px;background:transparent;font-size:10px;letter-spacing:.08em}
.language-switch button.selected{font-weight:700}
.language-switch button:disabled{opacity:1;cursor:default}
.contact-button{height:38px;padding:0 16px;display:flex;align-items:center;gap:9px;border:1px solid var(--blog-border);border-radius:999px;box-shadow:0 0 18px rgba(255,242,187,.12);font-size:11px;font-weight:700;letter-spacing:.12em;white-space:nowrap}
.contact-button img,.header-social img{display:block;flex:none}
.header-social{width:36px;height:36px;display:grid;place-items:center;border-radius:50%}
.header-social:hover{background:rgba(255,242,187,.08)}
.menu-toggle{display:none}
.blog-hero{min-height:477px;padding:124px 32px 0;display:flex;flex-direction:column;align-items:center}
.hero-copy{width:min(100%,672px);text-align:center}
.eyebrow{margin:0;color:#fff2bb;font-size:10px;font-weight:700;letter-spacing:.35em;text-transform:uppercase}
.hero-copy h1{margin:13px 0 0;font-size:72px;font-weight:700;line-height:1.15;letter-spacing:.08em}
.hero-description{margin:12px 0 0;font-size:16px;line-height:26px;letter-spacing:.025em;color:var(--blog-muted)}
.filter-bar{width:min(100%,1440px);min-height:74px;margin-top:48px;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--blog-border);border-radius:16px;backdrop-filter:blur(12px)}
.category-filters{display:flex;align-items:center;gap:8px;min-width:0}
.filter-chip{height:42px;padding:0 22px;border:1px solid var(--blog-border);border-radius:999px;background:transparent;color:#fff2bb;font-size:14px;letter-spacing:.05em;white-space:nowrap;cursor:pointer;transition:background .18s,border-color .18s}
.filter-chip:hover,.filter-chip.active{border-color:#fff2bb}
.article-search{width:320px;height:42px;display:flex;align-items:center;gap:12px;padding:0 16px;border:1px solid var(--blog-border);border-radius:999px;flex:none}
.article-search img{flex:none}
.article-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:14px}
.article-search input::placeholder{color:var(--blog-soft)}
.article-search input::-webkit-search-cancel-button{display:none}
.clear-search{padding:0;border:0;background:none;color:var(--blog-soft);font-size:21px;line-height:1;cursor:pointer}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.blog-content{width:min(100%,1504px);margin:0 auto;padding:0 32px 128px}
.featured-card{min-height:422px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid var(--blog-border);border-radius:24px}
.featured-image{min-width:0;min-height:420px;overflow:hidden}
.featured-image img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.featured-image:hover img{transform:scale(1.025)}
.featured-copy{padding:34px 40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:17px}
.category-label{min-height:24px;width:max-content;max-width:100%;padding:4px 12px;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:999px;font-size:10px;font-weight:700;line-height:14px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.category-label img{display:block;flex:none}
.category-label.species{color:#fee685;background:rgba(123,51,6,.4);border-color:rgba(187,77,0,.4)}
.category-label.care{color:#c5e9c5;background:rgba(0,79,59,.4);border-color:rgba(0,122,85,.4)}
.category-label.community{color:#d0e4e8;background:rgba(20,73,87,.45);border-color:rgba(69,126,142,.4)}
.category-label.news{color:#f4c1eb;background:rgba(90,24,94,.45);border-color:rgba(167,62,170,.4)}
.featured-copy h2{margin:0;font-size:30px;font-weight:700;line-height:1.38;letter-spacing:.025em}
.featured-excerpt{margin:0;color:var(--blog-muted);font-size:14px;line-height:1.62}
.article-meta{display:flex;align-items:center;gap:18px;color:var(--blog-muted);font-size:11px;letter-spacing:.03em}
.article-meta>span,.article-meta span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.article-meta img{display:block;flex:none}
.read-featured{display:inline-flex;align-items:center;gap:8px;margin-top:2px;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.read-featured:hover,.card-bottom>a:hover{color:#fff}
.read-featured img{display:block}
.article-grid{padding-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.article-card{height:433px;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--blog-border);border-radius:24px;background:#182b25}
.card-photo{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.card-photo-crop,.article-card:nth-child(4) .card-photo{top:-40.98%;bottom:auto;height:141.15%;object-position:center center}
.article-card:hover .card-photo{transform:scale(1.035)}
.card-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.2) 43%,rgba(0,0,0,.78) 100%)}
.card-content{height:100%;padding:16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;position:relative}
.card-content .category-label{margin-bottom:12px}
.card-content h3{margin:0 0 9px;font-size:16px;font-weight:700;line-height:1.36;letter-spacing:.01em}
.card-content>p{margin:0;color:rgba(255,242,187,.83);font-size:12px;line-height:1.55}
.card-bottom{width:100%;margin-top:13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-bottom .article-meta{gap:13px;font-size:9px}
.card-bottom>a{display:inline-flex;align-items:center;gap:5px;position:relative;z-index:2;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.card-bottom>a img{display:block}
.card-link{position:absolute;z-index:1;inset:0}
.card-content a{pointer-events:auto}
.empty-state{padding:72px 16px;text-align:center;color:var(--blog-muted)}
.coming-soon{min-height:300px;padding:56px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid var(--blog-border);border-radius:24px;background:radial-gradient(ellipse at 50% 0,rgba(255,242,187,.045),transparent 66%)}
.coming-soon .eyebrow{color:var(--blog-soft)}
.coming-soon h2{margin:14px 0 8px;font-size:clamp(32px,5vw,48px);line-height:1.15;letter-spacing:.06em}
.coming-soon p{max-width:460px;margin:0;color:var(--blog-muted);font-size:14px;line-height:1.7}
.blog-content.is-empty .featured-card,.blog-content.is-empty .article-grid,.blog-content.is-empty .empty-state{display:none!important}
.blog-footer{border-top:1px solid var(--blog-border);padding:62px 32px 28px}
.footer-main{width:min(100%,1440px);margin:0 auto 58px;display:grid;grid-template-columns:1.65fr repeat(4,1fr);gap:44px}
.footer-brand{display:inline-block;margin-bottom:14px;font-size:16px;font-weight:700;letter-spacing:.2em}
.footer-brand-column p{margin:0;color:var(--blog-muted);font-size:11px;line-height:1.65}
.footer-socials{display:flex;align-items:center;gap:8px;margin-top:17px}
.footer-socials a{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--blog-border);border-radius:50%}
.footer-socials a:hover{background:rgba(255,242,187,.08)}
.footer-socials img{display:block}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.footer-column h2{margin:1px 0 11px;color:var(--blog-soft);font-size:9px;font-weight:700;letter-spacing:.25em;text-transform:uppercase}
.footer-column a,.footer-column span{color:var(--blog-muted);font-size:10px;line-height:1.55}
.footer-contact span{margin-bottom:2px}
.footer-bottom{width:min(100%,1440px);margin:0 auto;padding-top:20px;border-top:1px solid var(--blog-border);display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--blog-soft);font-size:9px;letter-spacing:.12em}
.footer-bottom>div{display:flex;align-items:center;gap:24px}
.footer-bottom a{text-transform:uppercase}
@media(max-width:1150px){.blog-header-inner{gap:16px}.blog-nav{gap:17px}.blog-nav a{font-size:11px}.header-actions{gap:9px}.contact-button{padding:0 11px}.filter-bar{align-items:flex-start;flex-direction:column}.category-filters{flex-wrap:wrap}.article-search{width:100%}.featured-copy{padding:28px}.featured-copy h2{font-size:26px}.article-grid{gap:20px}.card-content{padding:14px}.card-content h3{font-size:15px}.card-content>p{font-size:11px}.card-bottom{align-items:flex-start}.card-bottom .article-meta{flex-wrap:wrap;gap:7px}}
@media(max-width:850px){.blog-header-inner{padding:0 22px}.menu-toggle{width:36px;height:36px;margin-left:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--blog-border);border-radius:50%;background:transparent}.menu-toggle span{width:14px;height:1px;background:#fff2bb}.blog-nav{position:absolute;top:79px;left:0;right:0;height:auto;padding:14px 22px 20px;display:none;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--blog-border);background:#182b25}.blog-nav.open{display:flex}.blog-nav a{padding:12px 0;font-size:13px}.nav-dot{left:auto;right:2px;bottom:18px}.header-actions{gap:7px}.contact-button span{display:none}.contact-button{width:39px;justify-content:center;padding:0}.contact-button img:last-child{display:none}.header-social{display:none}.blog-hero{min-height:auto;padding:88px 22px 46px}.hero-copy h1{font-size:62px}.filter-bar{margin-top:36px}.blog-content{padding:0 22px 80px}.featured-card{grid-template-columns:1fr}.featured-image,.featured-image img{height:320px;min-height:320px}.featured-copy{padding:28px}.article-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.article-card{height:420px}.footer-main{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}.footer-brand-column{grid-column:1/-1}.footer-bottom{font-size:8px}}
@media(max-width:560px){.blog-header{height:68px}.blog-header-inner{padding:0 16px}.blog-nav{top:67px}.blog-brand{font-size:14px}.header-actions{gap:7px}.language-switch button{height:25px;padding:0 7px;font-size:9px}.contact-button{height:34px;width:34px}.blog-hero{padding:72px 16px 38px}.eyebrow{font-size:9px}.hero-copy h1{margin-top:9px;font-size:50px}.hero-description{max-width:360px;margin:11px auto 0;font-size:14px;line-height:1.6}.filter-bar{margin-top:29px;padding:12px;gap:13px;border-radius:13px}.category-filters{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.category-filters::-webkit-scrollbar{display:none}.filter-chip{height:37px;padding:0 15px;font-size:12px}.article-search{height:40px}.blog-content{padding:0 16px 66px}.featured-card{border-radius:18px}.featured-image,.featured-image img{height:248px;min-height:248px}.featured-copy{padding:21px 19px;gap:13px}.featured-copy h2{font-size:23px;line-height:1.3}.featured-excerpt{font-size:13px}.featured-copy .article-meta{flex-wrap:wrap;gap:8px 13px}.article-grid{padding-top:22px;grid-template-columns:1fr;gap:16px}.article-card{height:430px;border-radius:18px}.card-content{padding:16px}.card-content h3{font-size:17px}.card-content>p{font-size:12px}.card-bottom .article-meta{gap:12px}.blog-footer{padding:40px 18px 22px}.footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;margin-bottom:36px}.footer-brand-column{grid-column:1/-1}.footer-bottom{align-items:flex-start;flex-direction:column;gap:13px}.footer-bottom>div{flex-wrap:wrap;gap:12px 20px}}
@media(prefers-reduced-motion:reduce){.blog-page *{scroll-behavior:auto!important;transition:none!important}}

/* Compact footer shared by blog listing and article detail. */
.footer-main{grid-template-columns:minmax(0,1fr) minmax(190px,260px)}
.footer-contact a:hover{color:#fff2bb}
@media(max-width:850px){.footer-main{grid-template-columns:minmax(0,1fr) minmax(180px,240px)}.footer-brand-column{grid-column:auto}}
@media(max-width:560px){.footer-main{grid-template-columns:1fr}.footer-brand-column{grid-column:auto}}

/* Search replaces the topic chips. */
.filter-bar{padding:0;min-height:56px;border:0;backdrop-filter:none}.filter-bar .article-search{width:100%;height:56px;border-radius:16px;padding:0 20px}.article-search:focus-within{border-color:#fff2bb}.article-search input{color:#fff2bb}@media(max-width:560px){.filter-bar .article-search{height:48px;padding:0 14px}}

.blog-content[data-load-state="loading"] .featured-card,.blog-content[data-load-state="loading"] .article-grid,.blog-content[data-load-state="loading"] .local-blog-section,.blog-content[data-load-state="error"] .featured-card,.blog-content[data-load-state="error"] .article-grid,.blog-content[data-load-state="error"] .local-blog-section{display:none!important}#retry-blog{margin-top:12px;padding:10px 20px;border:1px solid var(--blog-border);border-radius:999px;background:transparent;color:inherit;cursor:pointer}
