/*!
Theme Name: moralstorytheme
Theme URI: http://underscores.me/
Author: SeoToolKing
Author URI: http://seotoolking.com
Description: custom theme for moralstory
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: moralstory-in
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
 
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{
    scroll-behavior:smooth;
}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:'DM Sans',system-ui,sans-serif;background:#f5f4f0;color:#111;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input{font:inherit}
button{border:0;background:none;cursor:pointer}
:root{
  --brand:#1c3a6e;
  --brand-2:#2563a8;
  --brand-pale:#e8f0fb;
  --accent:#d97706;
  --accent-pale:#fef3c7;
  --surface:#f5f4f0;
  --white:#fff;
  --text-1:#111827;
  --text-2:#4b5563;
  --text-3:#8b95a5;
  --border:#e5e7eb;
  --border-2:#d1d5db;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --shadow:0 1px 4px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.07);
  --ff-serif:'Noto Serif Devanagari',Georgia,serif;
  --ff-body:'DM Sans',system-ui,sans-serif;
  --max:1180px;
}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(.875rem,4vw,2rem)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-999px;left:1rem;z-index:999;background:var(--brand);color:#fff;padding:.55rem 1rem;border-radius:0 0 var(--r-sm) var(--r-sm);font-size:.875rem;font-weight:700}
.skip-link:focus{top:0}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-header .wrap{position:relative}
.nav-inner{display:flex;align-items:center;gap:1.25rem;height:60px}
.nav-logo{display:flex;align-items:center;gap:.625rem;flex-shrink:0}
.nav-logo-mark{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff;font-family:var(--ff-serif);font-size:1rem;font-weight:700}
.nav-logo-name{font-size:.9375rem;font-weight:700;color:var(--brand)}
.nav-logo-tag{display:block;font-size:.625rem;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;flex:1;min-width:0}
.nav-item{height:60px}
.nav-top{display:flex;align-items:center;height:60px;padding:0 .7rem;border-bottom:2px solid transparent;color:var(--text-2);font-size:.8125rem;font-weight:700;white-space:nowrap;transition:color .15s,border-color .15s}
.nav-top:hover,.nav-top[aria-current],.nav-item:focus-within>.nav-top,.nav-item:hover>.nav-top{color:var(--brand);border-color:var(--brand)}
.nav-top::after{content:"";width:0;height:0;margin-left:.35rem;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.55}
.nav-item>a.nav-top:not([aria-haspopup])::after{display:none}
.mega-menu{position:absolute;left:clamp(.875rem,4vw,2rem);right:clamp(.875rem,4vw,2rem);top:60px;display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;padding:1.25rem;background:#fff;border:1px solid var(--border);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:0 18px 45px rgba(17,24,39,.14);z-index:110}
.nav-item:hover .mega-menu,.nav-item:focus-within .mega-menu{display:grid}
.mega-col{display:flex;flex-direction:column;gap:.35rem}
.mega-title{margin-bottom:.25rem;color:var(--brand);font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.mega-link{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.42rem .5rem;border-radius:var(--r-sm);color:var(--text-2);font-family:var(--ff-serif);font-size:.8425rem;line-height:1.35}
.mega-link:hover{background:var(--brand-pale);color:var(--brand)}
.mega-link.featured{background:var(--accent-pale);color:#92400e;font-weight:700}
.nav-search-btn{display:flex;align-items:center;gap:.5rem;margin-left:auto;padding:.375rem .875rem;border:1px solid var(--border-2);border-radius:2rem;background:var(--surface);color:var(--text-3);font-size:.8125rem;transition:all .15s}
.nav-search-btn:hover{background:#fff;border-color:var(--brand-2);color:var(--brand)}
.nav-search-btn svg{width:15px;height:15px}
.nav-menu-btn{display:none;color:var(--text-2);padding:.375rem;border-radius:var(--r-sm)}
.nav-menu-btn svg{width:22px;height:22px}
.mobile-nav{display:none;position:fixed;inset:0;z-index:200;background:rgba(17,24,39,.52)}
.mobile-nav:target{display:flex}
.mobile-nav-panel{width:min(360px,88vw);height:100%;overflow-y:auto;background:#fff;padding:1.5rem}
.mobile-nav-close{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.mobile-nav-close span{font-weight:700;color:var(--text-1)}
.mobile-nav-close a{font-size:1.5rem;color:var(--text-3)}
.mobile-nav-links{display:flex;flex-direction:column;gap:.375rem}
.mobile-nav-links a{padding:.65rem .75rem;border-radius:var(--r-sm);color:var(--text-2);font-size:.9375rem;font-weight:600}
.mobile-nav-links a:hover{background:var(--brand-pale);color:var(--brand)}
.mobile-nav-links details{border:1px solid var(--border);border-radius:var(--r-md);background:#fff}
.mobile-nav-links summary{padding:.65rem .75rem;color:var(--text-1);font-weight:700;cursor:pointer}
.mobile-sub-links{display:flex;flex-direction:column;padding:0 .5rem .5rem}
.mobile-sub-links a{padding:.45rem .625rem;font-size:.875rem}
.breadcrumb-wrap{background:#fff;border-bottom:1px solid var(--border)}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .375rem;padding:.625rem 0;color:var(--text-3);font-size:.8125rem}
.breadcrumb a{color:var(--brand-2)}
.breadcrumb a:hover{text-decoration:underline}
.post-hero{background:var(--brand);color:#fff}
.post-hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:2.5rem;align-items:center;padding:clamp(2rem,5vw,3.75rem) 0}
.post-badge{display:inline-flex;align-items:center;gap:.375rem;margin-bottom:.875rem;padding:.25rem .75rem;border-radius:2rem;background:rgba(255,255,255,.14);color:rgba(255,255,255,.86);font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.post-badge span{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.post-hero h1{max-width:16ch;margin-bottom:.875rem;font-family:var(--ff-serif);font-size:clamp(1.85rem,4vw,3rem);line-height:1.18;font-weight:700}
.post-dek{max-width:62ch;color:rgba(255,255,255,.74);font-family:var(--ff-serif);font-size:1rem;line-height:1.75}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;margin-top:1.25rem;color:rgba(255,255,255,.72);font-size:.8125rem}
.post-meta strong{color:#fff}
.hero-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 18px 42px rgba(0,0,0,.18)}
.story-art{min-height:260px;display:grid;place-items:center;background:linear-gradient(145deg,#fef3c7 0%,#dbeafe 54%,#f8fafc 100%);position:relative;color:var(--brand)}
.story-art::before{content:"";position:absolute;inset:22px;border:1px solid rgba(28,58,110,.14);border-radius:var(--r-md)}
.story-art-symbol{position:relative;display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:#fff;box-shadow:0 12px 30px rgba(28,58,110,.14);font-size:4rem}
.hero-card-caption{padding:1rem 1.125rem;background:#fff;color:var(--text-2);font-family:var(--ff-serif);font-size:.875rem}
.article-shell{padding:2rem 0 3rem}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;align-items:start}
.article-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.article-content{max-width:760px;margin-inline:auto;padding:clamp(1.25rem,4vw,2.25rem)}
.quick-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-bottom:1.75rem;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-md);background:var(--border)}
.summary-item{background:#fbfbfa;padding:.875rem}
.summary-label{font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.summary-value{margin-top:.25rem;font-family:var(--ff-serif);font-size:.9375rem;font-weight:700;color:var(--text-1)}
.article-content p,.article-content li{font-family:var(--ff-serif);font-size:1.0625rem;line-height:1.9;color:var(--text-1)}
.article-content p{margin-bottom:1.125rem}
.article-content h2{margin:2rem 0 .875rem;font-family:var(--ff-serif);font-size:clamp(1.25rem,2.4vw,1.625rem);line-height:1.35;color:var(--text-1)}
.article-content h3{margin:1.5rem 0 .625rem;font-family:var(--ff-serif);font-size:1.125rem;color:var(--text-1)}
.article-content ul{display:flex;flex-direction:column;gap:.625rem;margin:0 0 1.25rem 1.25rem;list-style:disc}
.lead{font-size:1.1875rem!important;line-height:1.9!important;color:var(--text-1)!important}
.moral-box{margin:2rem 0;padding:1.25rem 1.375rem;border:1px solid rgba(217,119,6,.24);border-radius:var(--r-lg);background:var(--accent-pale)}
.moral-box strong{display:block;margin-bottom:.375rem;color:#92400e;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase}
.moral-box p{margin:0;color:#3f2f1d}
.toc{display:flex;flex-direction:column;gap:.125rem}
.toc-title{margin-bottom:.375rem;font-weight:700;color:var(--text-1)}
.toc a{display:block;padding:.45rem 0;border-bottom:1px solid var(--border);color:var(--brand-2);font-family:var(--ff-serif);font-size:.9375rem}
.toc a:last-child{border-bottom:0}
.toc a:hover{text-decoration:underline}
.post-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.share-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.share-row span{font-size:.8125rem;color:var(--text-3);font-weight:700}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--brand);background:#fff;font-size:.8125rem;font-weight:700}
.share-btn:hover{background:var(--brand-pale);border-color:var(--brand-2)}
.next-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--brand-2);font-size:.875rem;font-weight:700}
.sidebar{position:sticky;top:76px;display:flex;flex-direction:column;gap:1rem}
.widget{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.toc-widget{border-top:4px solid var(--accent)}
.toc-widget .widget-body{padding:1.125rem}
.toc ul{
    margin:0;
    padding-left:0px;
}

.toc li{
    list-style:none;
    margin:4px 0;
}

.toc a{
    text-decoration:none;
    color:#222;
    line-height:1.5;
}

.toc a:hover{
    color:#ff6600;
}

.toc ul ul{
    margin-left:5px;
    padding-left:5px;
}.share-strip{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 0;
border-bottom:1px solid #eee;
margin-bottom:30px;
flex-wrap:wrap;
}

.share-strip-lbl{
font-weight:700;
font-size:.95rem;
}

.share-btns{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.shr{
height:42px;
padding:0 16px;
border-radius:10px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
border:none;
cursor:pointer;
font-size:.85rem;
font-weight:600;
color:#fff;
}

.fb{
background:#1877f2;
}

.wa{
background:#25d366;
}

.tw{
background:#111;
}

.copy-link-btn{
background:#6b7280;
}

.story-sep{
text-align:center;
padding:30px 0;
font-size:1.2rem;
opacity:.5;
}

.art-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:30px;
}

.art-tags-lbl{
font-weight:700;
}

.author-box{
display:flex;
gap:20px;
padding:24px;
border:1px solid #eee;
border-radius:16px;
margin-bottom:30px;
align-items:flex-start;
}

.author-av{
width:60px;
height:60px;
border-radius:50%;
background:#111827;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:1.4rem;
font-weight:700;
flex-shrink:0;
}

.author-lbl{
font-size:.8rem;
opacity:.6;
margin-bottom:6px;
}

.author-name{
font-size:1.1rem;
font-weight:700;
margin-bottom:8px;
}

.author-bio{
font-size:.92rem;
line-height:1.7;
opacity:.8;
}

.reactions{
padding:30px 0;
text-align:center;
}

.reactions-title{
font-size:1.1rem;
font-weight:700;
margin-bottom:20px;
}

.reaction-row{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.react-btn{
width:54px;
height:54px;
border-radius:50%;
border:1px solid #ddd;
background:#fff;
cursor:pointer;
font-size:1.2rem;
transition:.3s;
}

.react-btn:hover{
transform:translateY(-4px);
}

.post-nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin:40px 0;
}

.pn-item{
border:1px solid #eee;
padding:20px;
border-radius:16px;
text-decoration:none;
color:inherit;
display:flex;
flex-direction:column;
gap:10px;
}

.pn-dir{
font-size:.8rem;
opacity:.6;
}

.pn-title{
font-weight:700;
line-height:1.5;
}

.related-row{
margin-top:50px;
}

.rel-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:20px;
}

.rel-card{
border:1px solid #eee;
border-radius:16px;
overflow:hidden;
text-decoration:none;
color:inherit;
transition:.3s;
background:#fff;
}

.rel-card:hover{
transform:translateY(-5px);
}

.rel-thumb img{
width:100%;
height:180px;
object-fit:cover;
display:block;
}

.rel-card-body{
padding:16px;
}

.rel-cat{
font-size:.75rem;
font-weight:700;
margin-bottom:8px;
opacity:.7;
}

.rel-title{
font-size:1rem;
line-height:1.5;
margin-bottom:10px;
}

.rel-meta{
font-size:.8rem;
opacity:.6;
}

@media(max-width:768px){

.post-nav{
grid-template-columns:1fr;
}

.rel-grid{
grid-template-columns:1fr;
}

.share-strip{
flex-direction:column;
align-items:flex-start;
}

}


.reactions{
padding:40px 0;
text-align:center;
}

.reactions-title{
font-size:1.15rem;
font-weight:700;
margin-bottom:24px;
}

.reaction-row{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
}

.react-btn{
border:none;
background:#fff;
border:1px solid #e5e7eb;
border-radius:18px;
padding:14px 18px;
cursor:pointer;
display:flex;
align-items:center;
gap:10px;
font-size:1rem;
font-weight:600;
transition:.3s;
min-width:88px;
justify-content:center;
}

.react-btn:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.react-btn.voted{
background:#111827;
color:#fff;
border-color:#111827;
}

.react-emoji{
font-size:1.4rem;
line-height:1;
}

.react-count{
font-size:.95rem;
font-weight:700;
}

@media(max-width:768px){

.react-btn{
padding:12px 14px;
min-width:72px;
}

} 

.nav-search-btn:hover{
background:rgba(255,255,255,.15);
}

.nav-search-btn svg{
width:18px;
height:18px;
}

/* Modal */

.search-modal{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:flex-start;
justify-content:center;
padding-top:8vh;
opacity:0;
visibility:hidden;
transition:.3s;
}

.search-modal.active{
opacity:1;
visibility:visible;
}

.search-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.6);
backdrop-filter:blur(6px);
}

.search-box-wrap{
position:relative;
width:min(700px,92%);
background:#fff;
border-radius:24px;
padding:30px;
z-index:2;
transform:translateY(-20px);
transition:.3s;
}

.search-modal.active .search-box-wrap{
transform:translateY(0);
}

.search-close{
position:absolute;
top:16px;
right:16px;
width:38px;
height:38px;
border:none;
border-radius:50%;
background:#f3f4f6;
cursor:pointer;
font-size:1rem;
}

.search-form{
display:flex;
gap:14px;
align-items:center;
}

.search-input-wrap{
flex:1;
height:64px;
border:1px solid #e5e7eb;
border-radius:18px;
padding:0 20px;
display:flex;
align-items:center;
gap:14px;
}

.search-input-wrap svg{
width:22px;
height:22px;
opacity:.5;
}

.search-field{
border:none;
outline:none;
width:100%;
font-size:1rem;
background:none;
}

.search-submit{
height:64px;
padding:0 28px;
border:none;
border-radius:18px;
background:#111827;
color:#fff;
font-weight:700;
cursor:pointer;
}

@media(max-width:768px){

.search-form{
flex-direction:column;
}

.search-submit{
width:100%;
}

}
.widget-head{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--brand);color:#fff}
.widget-head-title{font-size:.8125rem;font-weight:700}
.widget-body{padding:1rem}
.author-card{display:flex;gap:.875rem;align-items:flex-start}
.author-avatar{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--brand-pale);color:var(--brand);font-family:var(--ff-serif);font-weight:700}
.author-name{font-weight:700;color:var(--text-1)}
.author-bio{margin-top:.25rem;font-family:var(--ff-serif);font-size:.8125rem;line-height:1.65;color:var(--text-2)}
.side-list{display:flex;flex-direction:column;gap:1px;overflow:hidden;border-radius:var(--r-md);background:var(--border)}
.side-link{display:flex;gap:.75rem;background:#fff;padding:.75rem;transition:background .12s}
.side-link:hover{background:var(--brand-pale)}
.side-icon{flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface)}
.side-title{font-family:var(--ff-serif);font-size:.875rem;font-weight:700;line-height:1.4;color:var(--text-1)}
.side-meta{margin-top:.125rem;color:var(--text-3);font-size:.6875rem}
.tag-cloud{display:flex;flex-wrap:wrap;gap:.4375rem}
.tags{padding:.3125rem .75rem;border:1px solid var(--border-2);border-radius:2rem;background:var(--surface);color:var(--text-2);font-family:var(--ff-serif);font-size:.75rem;font-weight:600}
.cat-hero-desc-wrap{
    margin-top:1rem;
}

.read-more-btn{
    margin-top:10px;
    border:none;
    background:none;
    color:#ff6600;
    cursor:pointer;
    font-weight:600;
    padding:0;
}
.tags:hover{background:var(--brand-pale);border-color:var(--brand-2);color:var(--brand)}
.newsletter{background:linear-gradient(160deg,var(--brand-pale),var(--accent-pale));border-color:#e0ddd4}
.nl-title{font-weight:700;color:var(--text-1)}
.nl-desc{margin:.25rem 0 .875rem;font-family:var(--ff-serif);font-size:.8125rem;color:var(--text-2);line-height:1.6}
.nl-form{display:flex;flex-direction:column;gap:.5rem}
.nl-input{width:100%;padding:.5625rem .875rem;border:1px solid var(--border-2);border-radius:var(--r-sm);background:#fff;color:var(--text-1);outline:none}
.nl-input:focus{border-color:var(--brand-2)}
.nl-btn{padding:.6rem;border-radius:var(--r-sm);background:var(--brand);color:#fff;font-weight:700}
.nl-btn:hover{background:var(--brand-2)}
.related-section{margin-top:2rem}
.related-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}
.related-head h2{font-size:1.125rem;color:var(--text-1)}
.related-head a{color:var(--brand-2);font-size:.875rem;font-weight:700}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.related-card{overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.related-thumb{height:118px;display:grid;place-items:center;background:linear-gradient(135deg,#e8f0fb,#fef3c7);font-size:2.25rem}
.related-body{padding:.875rem}
.related-title{font-family:var(--ff-serif);font-size:.9375rem;line-height:1.45;font-weight:700;color:var(--white)}
.related-meta{margin-top:.35rem;color:var(--text-3);font-size:.6875rem}
.site-footer{margin-top:3rem;background:var(--brand)}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;padding:clamp(2rem,5vw,3rem) 0}
.footer-brand-mark{width:fit-content;height:34px;margin-bottom:.75rem;border-radius:9px;background:rgba(255,255,255,.15);display:grid;place-items:center;color:#fff;font-family:var(--ff-serif);font-weight:700}
.footer-brand-name{margin-bottom:.625rem;color:#fff;font-weight:700}
.footer-brand-desc{font-family:var(--ff-serif);font-size:.8125rem;line-height:1.65;color:rgba(255,255,255)}
.footer-col-title{margin-bottom:.875rem;color:rgba(255,255,255);font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.footer-nav{display:flex;flex-direction:column;gap:.5rem}
.footer-nav a{font-family:var(--ff-serif);font-size:.8125rem;color:rgba(255,255,255)}
.footer-nav a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:1.125rem 0;border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom p,.footer-bottom a{color:rgba(255,255,255);font-size:.75rem}
.footer-bottom nav{display:flex;gap:1rem}
 .pagination-wrap{
    margin-top:40px;
    text-align:center;
}
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6{
    scroll-margin-top:100px;
}
.pagination-wrap .page-numbers{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:42px;
    padding:0 14px;
    margin:0 5px;
    border-radius:12px;
    background:#f3f3f3;
    color:#111;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.pagination-wrap .page-numbers li a:hover{
    background:#111;
    color:#fff;
}

.pagination-wrap .current{
    background:#111;
    color:#fff;
}
 
.nav-logo img , .flogo{
  height: 50px;width:auto;
}
.featured-thumb{
    width:100%;
    height:120px;
    object-fit:cover;
    border-radius:16px;
    display:block;
}
/* -- HERO -- */
  .hero {
    background: var(--brand);
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 5vw, 3rem);
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
    max-width: 1200px; margin: 0 auto;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85);
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
    letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 1.25rem;
  }
  .hero-eyebrow span { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
  .hero h1 {
    font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
    color: white; line-height: 1.15; margin-bottom: 1rem; font-weight: 800;
  }
  .hero h1 em { color: #fbbf24; font-style: normal; }
  .hero-desc { font-size: 16px; color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 2rem; font-family: var(--font-hindi); }

  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: white; font-weight: 600;
    padding: 12px 24px; border-radius: 10px; text-decoration: none; font-size: 15px;
    transition: all 0.2s; border: none; cursor: pointer;
  }
  .btn-primary:hover { background: #b45309; transform: translateY(-1px); }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.1); color: white; font-weight: 500;
    padding: 12px 24px; border-radius: 10px; text-decoration: none; font-size: 15px;
    border: 1px solid rgba(255,255,255,0.25); transition: all 0.2s;
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.18); }

  .hero-visual { display: flex; flex-direction: column; gap: 12px; }
  .hero-stat-card {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md); padding: 16px 20px;
    display: flex; align-items: center; gap: 14px;
  }
  .hero-stat-icon { font-size: 24px; }
  .hero-stat-num { font-size: 22px; font-weight: 700; color: white; line-height: 1; }
  .hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }

  /* -- WRAPPER -- */
  .wrapper { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 2.5rem); }

  /* -- CATEGORIES -- */
  .section { padding: clamp(2rem, 5vw, 3.5rem) 0; }
  .section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; }
  .section-title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
  .section-title span { color: var(--brand-mid); }
  .see-all { font-size: 14px; color: var(--brand-mid); text-decoration: none; font-weight: 500; }
  .see-all:hover { text-decoration: underline; }

  .categories-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
  }
  .cat-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 18px 16px;
    text-decoration: none; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: all 0.2s; box-shadow: var(--shadow-card);
  }
  .cat-card:hover { border-color: var(--brand-mid); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
  .cat-icon { font-size: 28px; line-height: 1; }
  .cat-label { font-size: 13px; font-weight: 600; color: var(--text-primary); font-family: var(--font-hindi); line-height: 1.3; }
  .cat-count { font-size: 11px; color: var(--text-muted); }

  /* -- STORY CARDS -- */
  .stories-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
  }
  .story-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
    text-decoration: none; display: flex; flex-direction: column;
    transition: all 0.22s; box-shadow: var(--shadow-card);
  }
  .story-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); transform: translateY(-2px); }

  .story-thumb {
    background: linear-gradient(135deg, var(--brand-light) 0%, #dde8f8 100%);
    height: 160px; display: flex; align-items: center; justify-content: center;
    font-size: 56px; position: relative; overflow: hidden;
  }
  .story-thumb::before {
    content: ''; position: absolute; inset: 0;
    background: var(--brand); opacity: 0.05;
  }
  .story-tag {
    position: absolute; top: 10px; left: 10px;
    background: var(--brand); color: white;
    font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.5px;
  }

  .story-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
  .story-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .story-category { font-size: 11px; font-weight: 600; color: var(--brand-mid); text-transform: uppercase; letter-spacing: 0.5px; }
  .story-dot { width: 3px; height: 3px; background: var(--text-muted); border-radius: 50%; }
  .story-read-time { font-size: 11px; color: var(--text-muted); }
  .story-title { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 8px; font-family: var(--font-hindi); }
  .story-excerpt { font-size: 13px; color: var(--text-secondary); line-height: 1.6; flex: 1; font-family: var(--font-hindi); }
  .story-footer { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; }
  .story-date { font-size: 11px; color: var(--text-muted); }
  .story-arrow { font-size: 16px; color: var(--brand-mid); }

  /* -- FEATURED STORY -- */
  .featured-story {
    background: var(--brand); border-radius: var(--radius-lg); overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2.5rem;
  }
  .featured-content { padding: clamp(1.5rem, 4vw, 2.5rem); display: flex; flex-direction: column; gap: 1rem; }
  .featured-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85);
    padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase; width: fit-content;
  }
  .featured-title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: white; font-weight: 700; line-height: 1.25; }
  .featured-excerpt { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.65; font-family: var(--font-hindi); }
  .featured-read { display: inline-flex; align-items: center; gap: 8px; color: #fbbf24; font-weight: 600; font-size: 14px; text-decoration: none; }
  .featured-read:hover { text-decoration: underline; }
  .featured-visual { background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 100px; }

  /* -- DIVIDER -- */
  .divider { height: 1px; background: var(--border); margin: 0; }

  /* -- TRENDING -- */
  .trending-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: var(--radius-md); overflow: hidden; }
  .trending-item {
    background: var(--card-bg); padding: 16px 20px;
    display: flex; align-items: center; gap: 16px;
    text-decoration: none; transition: background 0.15s;
  }
  .trending-item:hover { background: var(--brand-light); }
  .trending-num { font-size: 22px; font-weight: 800; color: var(--border-strong); width: 32px; flex-shrink: 0; line-height: 1; }
  .trending-num.top { color: var(--accent); }
  .trending-content { flex: 1; }
  .trending-title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.4; font-family: var(--font-hindi); }
  .trending-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .trending-icon { font-size: 20px; flex-shrink: 0; }

  /* -- TWO-COL LAYOUT -- */
  
  /* -- NEWSLETTER -- */
  .newsletter-widget { background: var(--accent-light); border: 1px solid rgba(217,119,6,0.2); }
  .newsletter-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
  .newsletter-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; font-family: var(--font-hindi); }
  .newsletter-input {
    width: 100%; padding: 10px 14px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 10px;
    outline: none; transition: border 0.2s; background: white;
  }
  .newsletter-input:focus { border-color: var(--brand-mid); }
  .newsletter-btn {
    width: 100%; padding: 10px; background: var(--brand); color: white;
    border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
  }
  .newsletter-btn:hover { background: var(--brand-mid); }

  /* -- BREADCRUMB -- */
  .breadcrumb { display: flex; align-items: center; gap: 6px; padding: 16px 0; font-size: 13px; }
  .breadcrumb a { color: var(--brand-mid); text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }
  .breadcrumb span { color: var(--text-muted); }
  .breadcrumb .current { color: var(--text-primary); font-weight: 500; }
  
  
  /* === BREADCRUMB === */
.breadcrumb-wrap{background:#fff;border-bottom:1px solid var(--border)}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .375rem;padding:.625rem 0;font-size:.8125rem;color:var(--text-3)}
.breadcrumb a{color:var(--brand-2)}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb [aria-hidden]{font-size:.75rem}

/* === CATEGORY HERO === */
.cat-hero{background:var(--brand);padding:clamp(2rem,5vw,3.25rem) 0}
.cat-hero-inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem}
.cat-hero-badge{display:inline-flex;align-items:center;gap:.375rem;background:rgba(255,255,255,.14);color:rgba(255,255,255,.85);padding:.25rem .75rem;border-radius:2rem;font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.875rem}
.cat-hero-badge span{width:5px;height:5px;background:var(--accent);border-radius:50%}
.cat-hero h1{font-family:var(--ff-serif);font-size:clamp(1.5rem,3.5vw,2.375rem);color:#fff;line-height:1.2;margin-bottom:.75rem;font-weight:700}
.cat-hero-desc{font-size:.9375rem;color:rgba(255,255,255,.72);line-height:1.65;max-width:54ch;font-family:var(--ff-serif)}
.cat-hero-stats{display:flex;gap:1.5rem;margin-top:1.25rem}
.cat-stat{text-align:center}
.cat-stat-num{font-size:1.5rem;font-weight:700;color:#fff;line-height:1}
.cat-stat-label{font-size:.6875rem;color:rgba(255,255,255,.6);margin-top:.125rem;text-transform:uppercase;letter-spacing:.04em}
.cat-hero-icon{font-size:clamp(3.5rem,8vw,5.5rem);opacity:.35;flex-shrink:0}

/* === SUB-CATS === */
.sub-cats{display:flex;gap:.5rem;flex-wrap:wrap;padding:1.25rem 0}
.sub-cat-link{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .875rem;background:#fff;border:1px solid var(--border-2);border-radius:2rem;font-size:.8125rem;font-weight:500;color:var(--text-2);transition:all .15s}
.sub-cat-link:hover,.sub-cat-link[aria-current]{background:var(--brand-pale);border-color:var(--brand-2);color:var(--brand)}
.sub-cat-link svg{width:14px;height:14px}

/* === FILTER BAR === */
.filter-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:.875rem 0;border-bottom:1px solid var(--border)}
.filter-count{font-size:.8125rem;color:var(--text-3)}
.filter-count strong{color:var(--text-1);font-weight:600}
.filter-right{display:flex;align-items:center;gap:.625rem}
.filter-label{font-size:.8125rem;color:var(--text-3)}
.filter-select{padding:.3125rem .75rem;border:1px solid var(--border-2);border-radius:var(--r-sm);font-size:.8125rem;color:var(--text-1);background:#fff;appearance:none;cursor:pointer}

/* === MAIN GRID === */
.page-body{padding:2rem 0 3rem}
.content-grid{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}

/* === STORY CARDS GRID === */
.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.125rem}

/* Card */
.story-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s,border-color .18s;box-shadow:var(--shadow)}
.story-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--border-2)}

/* Thumb: CSS only, no JS, no external image for demo */
.card-thumb{height:152px;display:flex;align-items:center;justify-content:center;font-size:3.25rem;position:relative;flex-shrink:0}
.card-thumb.royal{background:linear-gradient(135deg,#e8f0fb 0%,#c7d9f7 100%)}
.card-thumb.myth{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%)}
.card-thumb.love{background:linear-gradient(135deg,#fce7f3 0%,#fbcfe8 100%)}
.card-thumb.brave{background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%)}
.card-thumb.wisdom{background:linear-gradient(135deg,#ede9fe 0%,#ddd6fe 100%)}
.card-thumb.folk{background:linear-gradient(135deg,#ffedd5 0%,#fed7aa 100%)}

/* Real image support */
.card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.card-tag{position:absolute;top:.625rem;left:.625rem;background:var(--brand);color:#fff;font-size:.625rem;font-weight:700;padding:.1875rem .5rem;border-radius:.375rem;text-transform:uppercase;letter-spacing:.04em;z-index:1}

.card-body{padding:.9375rem 1.0625rem;display:flex;flex-direction:column;flex:1}
.card-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.4375rem}
.card-cat{font-size:.6875rem;font-weight:700;color:var(--brand-2);text-transform:uppercase;letter-spacing:.04em}
.card-sep{width:3px;height:3px;background:var(--text-3);border-radius:50%;flex-shrink:0}
.card-time{font-size:.6875rem;color:var(--text-3)}
.card-title{font-size:.9375rem;font-weight:600;color:var(--text-1);line-height:1.4;margin-bottom:.5rem;font-family:var(--ff-serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-excerpt{font-size:.8125rem;color:var(--text-2);line-height:1.6;flex:1;font-family:var(--ff-serif);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.875rem;padding-top:.75rem;border-top:1px solid var(--border)}
.card-date{font-size:.6875rem;color:var(--text-3)}
.card-arrow{font-size:.9375rem;color:var(--brand-2);transition:transform .15s}
.story-card:hover .card-arrow{transform:translateX(3px)}

/* Load more */
.load-more-wrap{text-align:center;margin-top:2rem}
.btn-load-more{display:inline-flex;align-items:center;gap:.5rem;padding:.6875rem 1.75rem;border:1px solid var(--border-2);border-radius:var(--r-md);font-size:.875rem;font-weight:600;color:var(--text-2);background:#fff;transition:all .18s}
.btn-load-more:hover{background:var(--brand-pale);border-color:var(--brand-2);color:var(--brand)}

/* === PAGINATION === */
.pagination{display:flex;align-items:center;justify-content:center;gap:.375rem;margin-top:2rem}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);font-size:.875rem;font-weight:600;border:1px solid var(--border);background:#fff;color:var(--text-2);transition:all .15s}
.pagination a:hover{background:var(--brand-pale);border-color:var(--brand-2);color:var(--brand)}
.pagination [aria-current]{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination .dots{border:none;background:none;color:var(--text-3);width:auto;padding:0 .25rem}

/* === SIDEBAR === */
.sidebar{display:flex;flex-direction:column;gap:1.125rem;position:sticky;top:72px}

/* Widget base */
.widget{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);margin-bottom:25px}
.widget-head{background:var(--brand);padding:.75rem 1rem;display:flex;align-items:center;gap:.5rem}
.widget-head-icon{font-size:1rem;line-height:1}
.widget-head-title{font-size:.8125rem;font-weight:600;color:#fff;letter-spacing:.02em}
.widget-body{padding:1rem}

/* Related categories */
.rel-cats-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border-radius:var(--r-md);overflow:hidden}
.rel-cat-item{background:#fff;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;transition:background .12s;text-decoration:none}
.rel-cat-item:hover{background:var(--brand-pale)}
.rel-cat-icon{font-size:1.125rem;flex-shrink:0;width:28px;text-align:center}
.rel-cat-info{flex:1}
.rel-cat-name{font-size:.875rem;font-weight:600;color:var(--text-1)}
.rel-cat-count{font-size:.75rem;color:var(--text-3)}
.rel-cat-arrow{font-size:.875rem;color:var(--text-3);transition:transform .12s}
.rel-cat-item:hover .rel-cat-arrow{transform:translateX(3px);color:var(--brand-2)}

/* Tags */
.tag-cloud{display:flex;flex-wrap:wrap;gap:.4375rem}
.tags{display:inline-block;padding:.3125rem .75rem;border:1px solid var(--border-2);border-radius:2rem;font-size:.75rem;font-weight:500;color:var(--text-2);background:var(--surface);transition:all .12s;font-family:var(--ff-serif)}
.tags:hover{background:var(--brand-pale);border-color:var(--brand-2);color:var(--brand)}

/* Newsletter widget */
.newsletter-wg{background:linear-gradient(160deg,var(--brand-pale) 0%,var(--accent-pale) 100%);border-color:#e0ddd4}
.newsletter-wg .widget-body{padding:1.125rem}
.nl-title{font-size:.9375rem;font-weight:700;color:var(--text-1);margin-bottom:.25rem}
.nl-desc{font-size:.8125rem;color:var(--text-2);margin-bottom:.875rem;font-family:var(--ff-serif);line-height:1.55}
.nl-form{display:flex;flex-direction:column;gap:.5rem}
.nl-input{padding:.5625rem .875rem;border:1px solid var(--border-2);border-radius:var(--r-sm);font-size:.875rem;color:var(--text-1);background:#fff;outline:none;transition:border-color .15s}
.nl-input:focus{border-color:var(--brand-2)}
.nl-btn{padding:.5625rem;background:var(--brand);color:#fff;border-radius:var(--r-sm);font-size:.875rem;font-weight:600;transition:background .15s;border:none;cursor:pointer}
.nl-btn:hover{background:var(--brand-2)}

/* Trending */
.trending-list{display:flex;flex-direction:column;gap:0}
.trend-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);transition:background .12s;text-decoration:none}
.trend-item:last-child{border-bottom:none}
.trend-item:hover{background:var(--brand-pale)}
.trend-num{font-size:1.125rem;font-weight:800;min-width:24px;flex-shrink:0;line-height:1;margin-top:.125rem;color:var(--border-2)}
.trend-num.hi{color:var(--accent)}
.trend-title{font-size:.8125rem;font-weight:600;color:var(--text-1);line-height:1.4;font-family:var(--ff-serif)}
.trend-meta{font-size:.6875rem;color:var(--text-3);margin-top:.125rem}

/* === ABOUT BOX (SEO text block) === */
.about-box{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem 1.75rem;margin-top:2rem;box-shadow:var(--shadow)}
.about-box h2{font-size:1.0625rem;font-weight:700;color:var(--text-1);margin-bottom:.75rem;font-family:var(--ff-serif)}
.about-box p{font-size:.875rem;color:var(--text-2);line-height:1.7;font-family:var(--ff-serif);margin-bottom:.625rem}
.about-box p:last-child{margin-bottom:0}

  /* === RESPONSIVE === */
@media(max-width:860px){
  .content-grid{grid-template-columns:1fr}
  .sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .nav-links,.nav-search-btn{display:none}
  .nav-menu-btn{display:flex}
  .cat-hero-inner{grid-template-columns:1fr}
  .cat-hero-icon{display:none}
  .stories-grid{grid-template-columns:1fr}
  .sidebar{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}
@media(max-width:380px){
  .cat-hero-stats{gap:1rem}
}
  /* -- RESPONSIVE -- */
  @media (max-width: 900px) {
    .hero, .featured-story, .two-col, .footer-inner {
      grid-template-columns: 1fr;
    }
    .featured-visual { display: none; }
    .nav-links { display: none; }
  }
  @media (max-width: 600px) {
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .stories-grid { grid-template-columns: 1fr; }
  } 
@media(max-width:1080px){
  .nav-links,.nav-search-btn{display:none}
  .nav-menu-btn{display:flex;margin-left:auto}
}
@media(max-width:920px){
  .post-hero-inner,.article-grid{grid-template-columns:1fr}
  .post-hero h1{max-width:22ch}
  .sidebar{position:static;display:grid;grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .post-hero-inner{gap:1.5rem}
  .quick-summary,.related-grid,.sidebar,.footer-inner{grid-template-columns:1fr}
  .post-actions{align-items:flex-start;flex-direction:column}
  .footer-bottom{align-items:flex-start;flex-direction:column}
}
@media print{
  .site-header,.breadcrumb-wrap,.sidebar,.related-section,.site-footer,.post-actions{display:none}
  body{background:#fff}
  .post-hero{background:#fff;color:#111827}
  .post-dek,.post-meta{color:#4b5563}
  .article-shell{padding:0}
  .article-card{border:0;box-shadow:none}
}
  /* -- TWO-COL LAYOUT -- */
  .two-col { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; }










.search-hero { background:var(--brand); padding:clamp(2rem,4vw,3rem) 0 }
.search-bar-wrap { max-width:680px; margin-bottom:.875rem }
.search-bar { display:flex; background:#fff; border-radius:var(--r-md); overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.2) }
.search-input { flex:1; padding:.875rem 1.25rem; border:none; font-size:1rem; color:var(--t1); outline:none; background:transparent }
.search-submit { padding:.875rem 1.375rem; background:var(--accent); color:#fff; font-size:.9375rem; font-weight:600; border:none; cursor:pointer; transition:background .15s }
.search-submit:hover { background:#b45309 }
.search-meta { font-size:.875rem; color:rgba(255,255,255,.7) }
.search-meta strong { color:#fff }
.search-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem }
.search-filter { display:inline-flex; align-items:center; gap:.375rem; padding:.3125rem .875rem; border:1px solid rgba(255,255,255,.2); border-radius:2rem; font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.75); transition:all .15s }
.search-filter:hover,.search-filter.active { background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.4) }

.search-body  { padding:2rem 0 3.5rem }
.search-grid  { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start }
.search-results { display:flex; flex-direction:column; gap:1rem }

.search-result { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem 1.375rem; display:flex; gap:1.125rem; box-shadow:var(--shadow); text-decoration:none; transition:all .18s }
.search-result:hover { box-shadow:var(--shadow-lg); transform:translateY(-1px); border-color:var(--border-2) }
.sr-thumb {  border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:2.25rem; flex-shrink:0 }
.sr-thumb.royal  { background:linear-gradient(135deg,#e8f0fb,#c7d9f7) }
.sr-thumb.myth   { background:linear-gradient(135deg,#fef3c7,#fde68a) }
.sr-thumb.love   { background:linear-gradient(135deg,#fce7f3,#fbcfe8) }
.sr-thumb.horror { background:linear-gradient(135deg,#f3f4f6,#e5e7eb) }
.sr-body    { flex:1 }
.sr-cat     { font-size:.6875rem; font-weight:700; color:var(--brand-mid); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.375rem }
.sr-title   { font-size:1rem; font-weight:600; color:var(--t1); line-height:1.4; font-family:var(--ff-serif); margin-bottom:.5rem }
.sr-excerpt { font-size:.875rem; color:var(--t2); line-height:1.6; font-family:var(--ff-serif); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.sr-meta    { display:flex; align-items:center; gap:.75rem; margin-top:.75rem }
.sr-meta span { font-size:.75rem; color:var(--t4) }
.sr-keyword { background:var(--accent-pale); color:#92400e; padding:.125rem .375rem; border-radius:.25rem; font-size:.75rem; font-weight:600 }
@media print {
  .demo-bar,.site-header,.sidebar-stack,.content-sidebar,.site-footer,
  .share-strip,.reactions,.post-nav,.comments-box,.related-row,
  .reading-bar { display:none }
  .home-grid,.art-grid,.cat-grid2,.content-layout,.search-grid { grid-template-columns:1fr }
}




.cat-hero { background:var(--brand); padding:clamp(2rem,5vw,3.25rem) 0 0 }
.cat-hero-inner { display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem }
.cat-hero-badge { display:inline-flex; align-items:center; gap:.375rem; background:rgba(255,255,255,.14); color:rgba(255,255,255,.85); padding:.25rem .75rem; border-radius:2rem; font-size:.6875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.875rem }
.cat-hero h1 { font-family:var(--ff-serif); font-size:clamp(1.5rem,3.5vw,2.25rem); color:#fff; line-height:1.2; font-weight:700; margin-bottom:.75rem }
.cat-hero-desc { font-size:.9375rem; color:rgba(255,255,255,.72); line-height:1.65; font-family:var(--ff-serif); max-width:52ch }
.cat-hero-stats { display:flex; gap:1.5rem; margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.12) }
.cat-stat-num   { font-size:1.5rem; font-weight:700; color:#fff; line-height:1 }
.cat-stat-label { font-size:.6875rem; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.04em; margin-top:.125rem }
.cat-hero-emoji { font-size:clamp(4rem,9vw,6rem); opacity:.3; padding-bottom:1.5rem }

.sub-cats { display:flex; gap:.5rem; flex-wrap:wrap; padding:1.125rem 0 }
.sub-pill { display:inline-flex; align-items:center; padding:.3125rem .875rem; background:#fff; border:1px solid var(--border-2); border-radius:2rem; font-size:.8125rem; font-weight:600; color:var(--t2); transition:all .15s }
.sub-pill:hover,.sub-pill.active { background:var(--brand-pale); border-color:var(--brand-mid); color:var(--brand) }

.filter-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; padding:.875rem 0; border-bottom:1px solid var(--border) }
.filter-count { font-size:.8125rem; color:var(--t3) }
.filter-count strong { color:var(--t1); font-weight:600 }
.filter-select { padding:.3125rem .75rem; border:1px solid var(--border-2); border-radius:var(--r-sm); font-size:.8125rem; color:var(--t1); background:#fff }

.cat-body  { padding:2rem 0 3.5rem }
.cat-grid2 { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start }

.stories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.125rem }

.pagination { display:flex; align-items:center; justify-content:center; gap:.375rem; margin-top:2rem }
.pg { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--r-sm); font-size:.875rem; font-weight:600; border:1px solid var(--border); background:#fff; color:var(--t2); transition:all .15s; text-decoration:none }
.pg:hover { background:var(--brand-pale); border-color:var(--brand-mid); color:var(--brand) }
.pg.active { background:var(--brand); border-color:var(--brand); color:#fff }

.about-seo { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:1.5rem 1.75rem; margin-top:2rem; box-shadow:var(--shadow) }
.about-seo h2 { font-size:1.0625rem; font-weight:700; color:var(--t1); margin-bottom:.75rem; font-family:var(--ff-serif) }
.about-seo p  { font-size:.875rem; color:var(--t2); line-height:1.7; font-family:var(--ff-serif); margin-bottom:.625rem }
.about-seo p:last-child { margin-bottom:0 }

















.reading-bar { height:3px; background:var(--accent); width:45%; transition:width .2s }

.art-hero { background:var(--brand); padding:clamp(2rem,5vw,3.5rem) 0 0 }
.art-hero-inner { display:grid; grid-template-columns:1fr 340px; gap:2.5rem; align-items:end }
.art-badges { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem }
.art-badge { display:inline-flex; align-items:center; gap:.375rem; background:rgba(255,255,255,.15); color:rgba(255,255,255,.88); padding:.25rem .75rem; border-radius:2rem; font-size:.6875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase }
.art-hero h1 { font-family:var(--ff-serif); font-size:clamp(1.5rem,3.5vw,2.25rem); color:#fff; line-height:1.2; font-weight:700; margin-bottom:.875rem }
.art-hero-excerpt { font-size:.9375rem; color:rgba(255,255,255,.72); line-height:1.65; font-family:var(--ff-serif); max-width:52ch; margin-bottom:1.25rem }
.art-meta-row { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; padding:1rem 0; border-top:1px solid rgba(255,255,255,.12) }
.art-meta-item { display:flex; align-items:center; gap:.375rem; font-size:.8125rem; color:rgba(255,255,255,.65) }
.art-meta-item strong { color:rgba(255,255,255,.9); font-weight:600 }
.art-meta-item svg { width:14px; height:14px }
.art-img-card { background:linear-gradient(135deg,#e8f0fb,#c7d9f7); border-radius:var(--r-lg) var(--r-lg) 0 0; height:260px; display:flex; align-items:center; justify-content:center; font-size:6rem; align-self:end }

.art-body { padding:2.5rem 0 3.5rem }
.art-grid { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start }

.art-wrap { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow) }
.share-strip { display:flex; align-items:center; justify-content:space-between; padding:.875rem 1.5rem; border-bottom:1px solid var(--border); background:var(--surface) }
.share-strip-lbl { font-size:.8125rem; color:var(--t3); font-weight:500 }
.share-btns { display:flex; gap:.5rem }
.shr { display:inline-flex; align-items:center; gap:.375rem; padding:.3125rem .75rem; border-radius:2rem; font-size:.75rem; font-weight:600; border:1px solid var(--border-2); color:var(--t2); background:#fff; transition:all .15s }
.shr:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.1) }
.shr.fb { border-color:#1877f2; color:#1877f2 }
.shr.fb:hover { background:#1877f2; color:#fff }
.shr.wa { border-color:#25d366; color:#25d366 }
.shr.wa:hover { background:#25d366; color:#fff }
.shr.tw { border-color:#000; color:#000 }
.shr.tw:hover { background:#000; color:#fff }

.toc-box { background:var(--brand-pale); border:1px solid rgba(37,99,168,.2); border-radius:var(--r-md); padding:1.125rem 1.25rem; margin-bottom:1.75rem }
.toc-title { font-size:.875rem; font-weight:700; color:var(--brand); margin-bottom:.75rem }
.toc-list { padding-left:1.125rem }
.toc-list li { list-style:decimal; font-size:.875rem; margin-bottom:.375rem }
.toc-list a { color:var(--brand-mid) }
.toc-list a:hover { text-decoration:underline }

.prose { font-family:var(--ff-serif); color:var(--t2); font-size:1.0625rem; line-height:1.82; padding:1.75rem }
.prose h2 { font-size:1.25rem; font-weight:700; color:var(--t1); margin:2rem 0 .875rem; padding-left:.875rem; border-left:3px solid var(--brand-mid); scroll-margin-top:80px }
.prose h3 { font-size:1.0625rem; font-weight:700; color:var(--t1); margin:1.5rem 0 .625rem }
.prose p  { margin-bottom:1.125rem }
.prose p:last-child { margin-bottom:0 }
.prose strong { color:var(--t1); font-weight:700 }

.prose blockquote { background:linear-gradient(135deg,var(--brand-pale),var(--accent-pale)); border-left:4px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0; padding:1.125rem 1.25rem; margin:1.75rem 0; font-size:1.0625rem; font-style:italic; color:var(--t1) }
.prose blockquote cite { display:block; font-size:.875rem; font-style:normal; color:var(--t3); margin-top:.5rem }

.hl-box { background:var(--accent-pale); border:1px solid rgba(217,119,6,.25); border-radius:var(--r-md); padding:1.125rem 1.25rem; margin:1.75rem 0; display:flex; gap:.875rem }
.hl-icon { font-size:1.5rem; flex-shrink:0 }
.hl-title { font-size:.875rem; font-weight:700; color:#92400e; margin-bottom:.375rem }
.hl-text  { font-size:.875rem; color:#78350f; line-height:1.6 }

.story-sep { display:flex; align-items:center; gap:1rem; margin:2rem 1.75rem; color:var(--t4); font-size:.8125rem }
.story-sep::before,.story-sep::after { content:''; flex:1; height:1px; background:var(--border) }

.moral-box { background:var(--brand); border-radius:var(--r-md); padding:1.375rem 1.5rem; margin:2rem 1.75rem }
.moral-label { font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem }
.moral-label::before { content:''; display:inline-block; width:14px; height:2px; background:var(--accent); border-radius:2px }
.moral-text { font-size:1.0625rem; font-weight:700; font-family:var(--ff-serif); color:#fff; line-height:1.5 }
.moral-sub  { font-size:.875rem; color:rgba(255,255,255,.7); margin-top:.5rem; font-family:var(--ff-serif); line-height:1.6 }

.art-tags { display:flex; align-items:flex-start; gap:.75rem; flex-wrap:wrap; padding:1rem 1.5rem; border-top:1px solid var(--border); background:var(--surface) }
.art-tags-lbl { font-size:.8125rem; font-weight:600; color:var(--t3); flex-shrink:0; padding-top:.25rem }

.author-box { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:1.375rem 1.5rem; display:flex; gap:1rem; box-shadow:var(--shadow); margin-top:1.5rem }
.author-av  { width:52px; height:52px; border-radius:50%; background:var(--brand); display:flex; align-items:center; justify-content:center; font-family:var(--ff-serif); font-size:1.125rem; font-weight:700; color:#fff; flex-shrink:0 }
.author-lbl  { font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t4); margin-bottom:.25rem }
.author-name { font-size:.9375rem; font-weight:700; color:var(--t1); margin-bottom:.375rem }
.author-bio  { font-size:.8125rem; color:var(--t3); line-height:1.6; font-family:var(--ff-serif) }

.reactions { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:1.375rem 1.5rem; text-align:center; box-shadow:var(--shadow); margin-top:1.5rem }
.reactions-title { font-size:.875rem; font-weight:600; color:var(--t2); margin-bottom:1rem }
.reaction-row { display:flex; justify-content:center; gap:.625rem; flex-wrap:wrap }
.react-btn { display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.625rem .875rem; border:1px solid var(--border-2); border-radius:var(--r-md); background:#fff; font-size:.75rem; color:var(--t3); transition:all .15s; cursor:pointer; min-width:56px }
.react-btn span:first-child { font-size:1.375rem; line-height:1 }
.react-btn:hover { background:var(--brand-pale); border-color:var(--brand-mid); color:var(--brand) }

.post-nav { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem }
.pn-item { background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:1rem 1.125rem; display:flex; flex-direction:column; gap:.375rem; box-shadow:var(--shadow); transition:all .18s; text-decoration:none }
.pn-item:hover { border-color:var(--brand-mid); box-shadow:var(--shadow-lg); transform:translateY(-1px) }
.pn-dir   { font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t4); display:flex; align-items:center; gap:.375rem }
.pn-title { font-size:.875rem; font-weight:600; color:var(--t1); line-height:1.4; font-family:var(--ff-serif) }
.pn-cat   { font-size:.75rem; color:var(--t3) }
.pn-item.next { text-align:right }
.pn-item.next .pn-dir { justify-content:flex-end }

.comments-box { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); margin-top:1.5rem }
.cmts-head { padding:1rem 1.5rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.cmts-head h2 { font-size:1rem; font-weight:700 }
.cmts-count { font-size:.8125rem; color:var(--t3) }
.cmt { display:flex; gap:.875rem; padding:1rem 1.5rem; border-bottom:1px solid var(--border) }
.cmt:last-of-type { border-bottom:none }
.cmt-av { width:36px; height:36px; border-radius:50%; background:var(--brand-pale); display:flex; align-items:center; justify-content:center; font-size:.8125rem; font-weight:700; color:var(--brand); flex-shrink:0 }
.cmt-author { font-size:.875rem; font-weight:600; color:var(--t1) }
.cmt-date   { font-size:.75rem; color:var(--t4) }
.cmt-text   { font-size:.875rem; color:var(--t2); line-height:1.6; font-family:var(--ff-serif); margin-top:.375rem }
.cmt-reply  { display:inline-flex; align-items:center; gap:.25rem; margin-top:.375rem; font-size:.75rem; color:var(--brand-mid); font-weight:600 }
.cmt-form   { padding:1.125rem 1.5rem; background:var(--surface); border-top:1px solid var(--border) }
.cmt-form-title { font-size:.875rem; font-weight:700; color:var(--t1); margin-bottom:.875rem }
.form-row2  { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.75rem }
.cf-label { font-size:.8125rem; font-weight:600; color:var(--t2); display:block; margin-bottom:.3125rem }
.cf-in { width:100%; padding:.5625rem .875rem; border:1px solid var(--border-2); border-radius:var(--r-sm); font-size:.875rem; background:#fff; outline:none; transition:border-color .15s }
.cf-in:focus { border-color:var(--brand-mid) }
.cf-ta { width:100%; padding:.5625rem .875rem; border:1px solid var(--border-2); border-radius:var(--r-sm); font-size:.875rem; background:#fff; outline:none; resize:vertical; min-height:90px; margin-bottom:.75rem; transition:border-color .15s }
.cf-ta:focus { border-color:var(--brand-mid) }
.cf-sub { padding:.625rem 1.5rem; background:var(--brand); color:#fff; border-radius:var(--r-sm); font-size:.875rem; font-weight:600; border:none; cursor:pointer; transition:background .15s }
.cf-sub:hover { background:var(--brand-mid) }

.related-row { margin-top:2rem }
.rel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem }
.rel-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; box-shadow:var(--shadow); transition:all .18s }
.rel-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px) }
.rel-thumb { height:120px; display:flex; align-items:center; justify-content:center; font-size:2.5rem }
.rel-thumb.royal  { background:linear-gradient(135deg,#e8f0fb,#c7d9f7) }
.rel-thumb.folk   { background:linear-gradient(135deg,#ffedd5,#fed7aa) }
.rel-thumb.love   { background:linear-gradient(135deg,#fce7f3,#fbcfe8) }
.rel-thumb.brave  { background:linear-gradient(135deg,#d1fae5,#a7f3d0) }
.rel-card-body { padding:.875rem 1rem }
.rel-cat   { font-size:.6875rem; font-weight:700; color:var(--brand-mid); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem }
.rel-title { font-size:.875rem; font-weight:600; color:var(--t1); line-height:1.4; font-family:var(--ff-serif) }
.rel-meta  { font-size:.6875rem; color:var(--t4); margin-top:.375rem }



.sub-cats-wrap{
width:100%;
overflow:hidden;
position:relative;
}

/* FORCE SINGLE LINE */

.sub-cats{
display:flex !important;
flex-wrap:nowrap !important;
overflow-x:auto !important;
overflow-y:hidden;
white-space:nowrap;
gap:.75rem;
padding:.5rem 0 1rem;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
}

/* Hide scrollbar */

.sub-cats::-webkit-scrollbar{
display:none;
}

.sub-cats{
-ms-overflow-style:none;
scrollbar-width:none;
}
hr{margin:10px}
/* Pills */

.sub-pill{
flex:0 0 auto !important;
white-space:nowrap;
display:inline-flex;
align-items:center;
justify-content:center;
padding:.6rem 1rem;
border-radius:999px;
background:#fff;
border:1px solid #dbe1ea;
text-decoration:none;
font-size:.9rem;
font-weight:600;
}

/* Active */

.sub-pill.active{
background:#1e3a78;
color:#fff;
border-color:#1e3a78;
}







.page-top-content{
background:#fff;
padding:2rem;
border-radius:24px;
margin:2rem 0;
border:1px solid #eee;
line-height:1.9;
font-size:1rem;
}

.selected-cats{
display:flex;
flex-wrap:wrap;
gap:.75rem;
margin:1rem 0 1.5rem;
}

.selected-cat{
display:inline-flex;
align-items:center;
padding:.45rem .9rem;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.15);
border-radius:999px;
font-size:.82rem;
font-weight:600;
color:#fff;
text-decoration:none;
backdrop-filter:blur(4px);
transition:.25s;
}

.selected-cat:hover{
background:#fff;
color:#111827;
}

.page-top-content h2,
.page-top-content h3{
margin-top:1.5rem;
margin-bottom:1rem;
}

.page-top-content p{
margin-bottom:1rem;
}






.content-hero { background:var(--brand); padding:clamp(1.75rem,4vw,3rem) 0 }
.content-hero-inner { max-width:720px }
.content-hero-badge { display:inline-flex; align-items:center; gap:.375rem; background:rgba(255,255,255,.14); color:rgba(255,255,255,.85); padding:.25rem .75rem; border-radius:2rem; font-size:.6875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.875rem }
.content-hero h1 { font-family:var(--ff-serif); font-size:clamp(1.5rem,3.5vw,2.25rem); color:#fff; line-height:1.2; font-weight:700; margin-bottom:.75rem }
.content-hero-desc { font-size:.9375rem; color:rgba(255,255,255,.72); line-height:1.65; font-family:var(--ff-serif) }
.content-hero-updated { font-size:.8125rem; color:rgba(255,255,255,.5); margin-top:.875rem; display:flex; align-items:center; gap:.375rem }

.content-body { padding:2.5rem 0 4rem }
.content-layout { display:grid; grid-template-columns:1fr 260px; gap:2.5rem; align-items:start }
.content-narrow { max-width:720px }

.content-wrap { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow) }
.content-toc { background:var(--brand-pale); border-bottom:1px solid rgba(37,99,168,.15); padding:1.125rem 1.5rem }
.content-toc-title { font-size:.875rem; font-weight:700; color:var(--brand); margin-bottom:.625rem }
.content-toc-links { display:flex; flex-direction:column; gap:.375rem; padding-left:1rem }
.content-toc-links li { list-style:decimal; font-size:.875rem }
.content-toc-links a { color:var(--brand-mid) }
.content-toc-links a:hover { text-decoration:underline }
.content-prose { padding:clamp(1.5rem,4vw,2.25rem); font-family:var(--ff-serif); color:var(--t2); font-size:1rem; line-height:1.8 }
.content-prose h2 { font-size:1.25rem; font-weight:700; color:var(--t1); margin:2rem 0 .875rem; padding-bottom:.5rem; border-bottom:2px solid var(--brand-pale); font-family:var(--ff-serif); scroll-margin-top:80px }
.content-prose h3 { font-size:1.0625rem; font-weight:700; color:var(--t1); margin:1.5rem 0 .625rem }
.content-prose p  { margin-bottom:1.125rem }
.content-prose p:last-child { margin-bottom:0 }
.content-prose ul { padding-left:1.25rem; margin-bottom:1.125rem }
.content-prose ul li { list-style:disc; margin-bottom:.5rem }
.content-prose ol { padding-left:1.25rem; margin-bottom:1.125rem }
.content-prose ol li { list-style:decimal; margin-bottom:.5rem }
.content-prose a { color:var(--brand-mid); text-decoration:underline }
.content-prose a:hover { color:var(--brand) }
.content-prose strong { font-weight:700; color:var(--t1) }
.content-prose blockquote { background:var(--brand-pale); border-left:4px solid var(--brand-mid); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:1rem 1.25rem; margin:1.5rem 0; font-size:.9375rem; color:var(--t1) }
.info-box { background:var(--accent-pale); border:1px solid rgba(217,119,6,.25); border-radius:var(--r-md); padding:1rem 1.25rem; margin:1.5rem 0; display:flex; gap:.75rem }
.info-box-icon { font-size:1.375rem; flex-shrink:0 }
.info-box-text { font-size:.875rem; color:#78350f; line-height:1.6 }

/* Sidebar for content page */
.content-sidebar { display:flex; flex-direction:column; gap:1.125rem; position:sticky; top:70px }
.quick-links-list { display:flex; flex-direction:column; gap:1px; background:var(--border); border-radius:var(--r-md); overflow:hidden }
.ql-item { background:#fff; display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; text-decoration:none; font-size:.875rem; font-weight:500; color:var(--t2); transition:background .12s }
.ql-item:hover,.ql-item.active { background:var(--brand-pale); color:var(--brand) }
.ql-item-icon { font-size:1rem; flex-shrink:0; width:22px; text-align:center }
.ql-arrow { margin-left:auto; font-size:.75rem; color:var(--t4); transition:transform .12s }
.ql-item:hover .ql-arrow { transform:translateX(2px); color:var(--brand-mid) }

/* Contact form widget */
.contact-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--shadow) }
.contact-card-title { font-size:1rem; font-weight:700; color:var(--t1); margin-bottom:.375rem }
.contact-card-desc  { font-size:.8125rem; color:var(--t3); margin-bottom:1.125rem; font-family:var(--ff-serif) }

/* 404 PAGE */
.error-hero{
padding:5rem 0 4rem;
background:linear-gradient(to bottom,#f8fbff,#fff);
text-align:center;
}

.error-inner{
max-width:720px;
margin:auto;
}

.error-code{
font-size:clamp(4rem,10vw,8rem);
font-weight:800;
line-height:1;
color:var(--brand);
opacity:.12;
margin-bottom:1rem;
}

.error-title{
font-size:clamp(2rem,5vw,3rem);
font-weight:800;
color:var(--t1);
margin-bottom:1rem;
font-family:var(--ff-serif);
}

.error-desc{
font-size:1rem;
line-height:1.8;
color:var(--t2);
max-width:60ch;
margin:auto auto 2rem;
}

.error-search{
display:flex;
align-items:center;
gap:.75rem;
max-width:560px;
margin:auto;
background:#fff;
border:1px solid var(--border);
border-radius:999px;
padding:.5rem;
box-shadow:var(--shadow);
}

.error-search input{
flex:1;
border:none;
background:none;
padding:0 1rem;
height:48px;
font-size:.95rem;
outline:none;
}

.error-search button{
height:48px;
padding:0 1.5rem;
border:none;
border-radius:999px;
background:var(--brand);
color:#fff;
font-weight:700;
cursor:pointer;
}

.back-home-btn{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:1.5rem;
padding:.875rem 1.5rem;
border-radius:999px;
background:var(--brand-pale);
color:var(--brand);
font-weight:700;
text-decoration:none;
transition:.2s;
}

.back-home-btn:hover{
background:var(--brand);
color:#fff;
}

/* CATEGORY SECTION */
.error-cats{
padding:1rem 0 4rem;
}

.section-head{
text-align:center;
margin-bottom:2rem;
}

.section-head h2{
font-size:1.75rem;
font-family:var(--ff-serif);
margin-bottom:.5rem;
color:var(--t1);
}

.section-head p{
color:var(--t3);
}

.error-cat-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:1rem;
}

.error-cat-card{
display:flex;
align-items:center;
gap:1rem;
padding:1rem;
background:#fff;
border:1px solid var(--border);
border-radius:1rem;
text-decoration:none;
transition:.2s;
box-shadow:var(--shadow);
}

.error-cat-card:hover{
transform:translateY(-3px);
border-color:var(--brand-mid);
}

.error-cat-icon{
width:52px;
height:52px;
border-radius:50%;
background:var(--brand-pale);
display:flex;
align-items:center;
justify-content:center;
font-size:1.4rem;
flex-shrink:0;
}

.error-cat-content{
flex:1;
}

.error-cat-content h3{
font-size:1rem;
font-weight:700;
color:var(--t1);
margin-bottom:.25rem;
}

.error-cat-content span{
font-size:.8rem;
color:var(--t3);
}

.error-cat-arrow{
font-size:1.1rem;
color:var(--brand);
font-weight:700;
}

@media(max-width:768px){

.error-search{
flex-direction:column;
border-radius:1rem;
padding:1rem;
}

.error-search input,
.error-search button{
width:100%;
border-radius:.75rem;
}
.cat-grid2 {
  display: block;}
}
.content-wrap{padding:25px}