/* DeviCMS default theme — CSS variables drive color schemes & dark mode */
:root{
  --accent:#c2185b;--accent-dark:#8c0f41;--bg:#f6f7f9;--surface:#ffffff;--text:#1a1d21;
  --muted:#6b7280;--border:#e5e7eb;--link:#0f4c81;--radius:10px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari",sans-serif;
}
[data-scheme="crimson"]{--accent:#c2185b;--accent-dark:#8c0f41;--link:#0f4c81}
[data-scheme="ocean"]{--accent:#0369a1;--accent-dark:#075985;--link:#0369a1}
[data-scheme="forest"]{--accent:#15803d;--accent-dark:#166534;--link:#15803d}
[data-scheme="royal"]{--accent:#6d28d9;--accent-dark:#5b21b6;--link:#6d28d9}
[data-scheme="sunset"]{--accent:#ea580c;--accent-dark:#c2410c;--link:#b45309}
[data-scheme="newsred"]{--accent:#dc2626;--accent-dark:#991b1b;--link:#1d4ed8}
[data-theme="dark"]{--bg:#111418;--surface:#1b2026;--text:#e8eaed;--muted:#9aa3ad;--border:#2c333b}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.65;font-size:16px}
img{max-width:100%;height:auto;display:block}
/* A <picture> wrapping the <img> must not become the flex or grid item the
   img was, or every card thumbnail lays out differently the day an AVIF
   appears. display:contents makes the wrapper vanish from layout. */
picture{display:contents}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
/* Present for a screen reader, absent for everyone else. Used by the
   homepage's h1: the page is a set of sections and its real title is the
   masthead, but a page with no h1 leaves a reader with nothing to land on. */
.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}
.skip-link{position:absolute;inset-inline-start:-9999px}
.skip-link:focus{inset-inline-start:8px;top:8px;background:var(--surface);padding:8px;z-index:99}

/* Header */
.site-header{background:var(--surface);border-bottom:3px solid var(--accent)}
.header-top{display:flex;align-items:center;gap:16px;padding:14px 16px}
.site-title{font-size:1.7rem;font-weight:800;color:var(--text);letter-spacing:-.5px}
.site-title:hover{text-decoration:none;color:var(--accent)}
.logo{max-height:52px;width:auto}
.tagline{display:block;font-size:.78rem;color:var(--muted)}
.header-tools{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
/* No overflow:hidden here. It was clipping .search-suggest, which is a child
   of this form and is positioned below it — so the instant-search dropdown was
   built, filled and displayed, and could not be seen by anyone. The pill shape
   comes from this element's own border, radius and background; the input and
   button inside are transparent and have no corners to clip. */
.search-form{display:flex;border:1px solid var(--border);border-radius:20px;background:var(--bg)}
.search-form input{border:0;background:transparent;padding:7px 12px;color:var(--text);width:160px;outline:none}
.search-form button{border:0;background:transparent;padding:0 12px;cursor:pointer;font-size:.95rem}
.dark-toggle,.nav-toggle{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:1rem}
.nav-toggle{display:none}
.lang-switch a{padding:4px 8px;border-radius:6px;font-size:.85rem;color:var(--muted)}
.lang-switch a.active{background:var(--accent);color:#fff}
.main-nav{background:var(--accent)}
.main-nav .container{display:flex;gap:2px;overflow-x:auto}
.main-nav a{color:#fff;padding:10px 16px;font-weight:600;font-size:.92rem;white-space:nowrap}
.main-nav a:hover{background:var(--accent-dark);text-decoration:none}

/* Breaking ticker */
.ticker{background:var(--surface);border-bottom:1px solid var(--border)}
.ticker-inner{display:flex;align-items:center;gap:12px;padding:8px 16px;overflow:hidden}
.ticker-label{background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:4px;text-transform:uppercase;flex-shrink:0;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.75}}
.ticker-track{flex:1;overflow:hidden}
.ticker-items{display:flex;gap:48px;white-space:nowrap;width:max-content;padding-inline-start:100%;animation:ticker 40s linear infinite}
.ticker-items a{color:var(--text);font-size:.9rem}
.ticker:hover .ticker-items{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
/* A ticker scrolls the way the script reads. Left in RTL leaves the track
   empty: padding-inline-start puts the items past the right edge and the
   animation then carries them further off. */
[dir=rtl] .ticker-items{animation-name:ticker-rtl}
@keyframes ticker-rtl{0%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* Layout */
main{padding:24px 16px}
.content-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.sidebar{position:sticky;top:16px}

/* Hero (magazine layout) */
.hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-bottom:32px}
.hero-side{display:flex;flex-direction:column;gap:14px}
.post-hero{position:relative;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.post-hero .thumb img{aspect-ratio:16/9;object-fit:cover;width:100%}
.post-hero .card-body{padding:18px}
.post-hero .card-title{font-size:1.5rem;line-height:1.3}
.featured-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.featured-strip.as-grid{grid-template-columns:repeat(3,1fr)}

/* Cards */
.post-card{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.07);transition:transform .15s}
.post-card:hover{transform:translateY(-3px)}
.thumb{position:relative;display:block}
.post-card .thumb img{aspect-ratio:16/10;object-fit:cover;width:100%}
.cat-badge{position:absolute;inset-inline-start:10px;bottom:10px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:4px}
.card-body{padding:14px}
.card-title{font-size:1.02rem;line-height:1.4;font-weight:700}
.card-title a{color:var(--text)}
.card-title a:hover{color:var(--accent);text-decoration:none}
.card-excerpt{color:var(--muted);font-size:.88rem;margin-top:6px}
.card-meta{color:var(--muted);font-size:.78rem;margin-top:8px}
/* `plaintext`, not `isolate`. These are runs of one script inside a page that
   may be another — '17 days ago' in an RTL page reorders to 'days ago 17' —
   and isolate only cuts the run off from its parent: the base direction inside
   it is still the page's. plaintext takes the base direction from the run's
   own first strong character, so an English byline reads LTR on an Urdu page
   and an Urdu one reads RTL on an English page, with no marker in the markup.
   A mixed-language site is the normal case here, not the exception. */
.card-meta,.post-meta,.trending-list .meta,time,.byline{unicode-bidi:plaintext}

.post-list{display:flex;gap:14px;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.post-list .thumb{flex:0 0 150px}
.post-list .thumb img{height:100%;object-fit:cover;aspect-ratio:4/3}
.post-list .card-body{padding:10px 12px 10px 0}
.post-list .card-title{font-size:.95rem}
.list-flow{display:flex;flex-direction:column;gap:14px}

/* Home blocks */
.home-block,.latest{margin-bottom:36px}
.block-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--accent);margin-bottom:16px;padding-bottom:8px}
.block-head h2{font-size:1.25rem}
.see-all{font-size:.85rem;font-weight:600}
.block-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}

/* Sidebar widgets */
.widget{background:var(--surface);border-radius:var(--radius);padding:18px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.widget-title{font-size:1.05rem;border-inline-start:4px solid var(--accent);padding-inline-start:10px;margin-bottom:14px}
.trending-list{list-style:none;counter-reset:tr}
.trending-list li{counter-increment:tr;display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.trending-list li:last-child{border:none}
.trending-list li::before{content:counter(tr);font-size:1.3rem;font-weight:800;color:var(--accent);opacity:.5;min-width:22px}
.trending-list a{color:var(--text);font-size:.9rem;font-weight:600;flex:1}
.trending-list .meta{flex-basis:100%;padding-inline-start:34px;font-size:.75rem;color:var(--muted)}
.cat-list{list-style:none}
.cat-list li{border-bottom:1px solid var(--border)}
.cat-list li:last-child{border:none}
.cat-list a{display:block;padding:8px 0;color:var(--text);font-size:.92rem}
.newsletter-form{display:flex;gap:8px;margin-top:10px}
.newsletter-form input{flex:1;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.newsletter-form button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-weight:600;cursor:pointer}

/* Single post */
.single-post{background:var(--surface);border-radius:var(--radius);padding:26px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:12px}
.post-title{font-size:1.9rem;line-height:1.25;margin-bottom:12px;letter-spacing:-.5px}
.post-meta{color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.share-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;font-size:.85rem}
.share-bar a{padding:5px 12px;border-radius:6px;color:#fff;font-weight:600;font-size:.8rem}
.share-bar a:hover{text-decoration:none;opacity:.85}
/* Brand colours, darkened until white text on them is actually readable.
   #25d366 is WhatsApp's green and white on it is 1.98:1 — a share bar nobody
   with low vision can read is a share bar that does not work. Each is the
   brand hue taken down the minimum amount that reaches 4.5:1, so the buttons
   still read as WhatsApp, Telegram and Facebook. */
.sh-fb{background:#1771e6}.sh-tw{background:#111}.sh-wa{background:#188741}.sh-tg{background:#1b7eae}.sh-cp{background:var(--muted)}
.post-langs{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
.pl-icon{font-size:1rem}
.share-bar a.pl-btn{background:transparent;border:1.5px solid var(--accent);color:var(--accent);padding:4px 12px;border-radius:16px;font-weight:700;font-size:.8rem}
.share-bar a.pl-btn:hover{background:var(--accent);color:#fff;opacity:1}
.post-image img{border-radius:var(--radius);width:100%}
.post-image{margin-bottom:18px}
.disclosure{background:var(--bg);border-inline-start:4px solid var(--accent);padding:10px 14px;font-size:.83rem;color:var(--muted);border-radius:6px;margin-bottom:18px}
.post-content{font-size:1.06rem}
.post-content>*+*{margin-top:1em}
.post-content h2{font-size:1.45rem;margin-top:1.4em}
.post-content h3{font-size:1.2rem;margin-top:1.2em}
.post-content img{border-radius:8px}
.post-content blockquote{border-inline-start:4px solid var(--accent);padding:8px 18px;background:var(--bg);border-radius:6px;font-style:italic}
.post-content table{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto}
.post-content th,.post-content td{border:1px solid var(--border);padding:9px 12px;text-align:start}
.post-content th{background:var(--bg)}
.post-content ul,.post-content ol{padding-inline-start:1.4em}
.post-content a[href*="/go/"]{font-weight:700}
.post-tags{margin:22px 0;display:flex;flex-wrap:wrap;gap:8px}
.post-tags a{background:var(--bg);border:1px solid var(--border);color:var(--muted);padding:4px 12px;border-radius:16px;font-size:.8rem}
.author-box{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0;margin-bottom:24px;display:flex;gap:12px;align-items:center}
.related h2,.comments h2{font-size:1.3rem;margin-bottom:14px}
.related{margin-bottom:28px}

/* Comments */
.comment{border-bottom:1px solid var(--border);padding:12px 0}
.comment-reply{margin-inline-start:28px}
.comment-head{display:flex;gap:10px;align-items:baseline;font-size:.88rem}
.comment-head span{color:var(--muted);font-size:.76rem}
.comment p{font-size:.93rem;margin-top:4px}
.comment-form{margin-top:20px}
.comment-form h3{margin-bottom:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.comment-form input,.comment-form textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-family:inherit}
.comment-form button{margin-top:10px;background:var(--accent);color:#fff;border:0;padding:10px 22px;border-radius:8px;font-weight:600;cursor:pointer}

/* Ads */
.ad-slot{text-align:center;margin:18px auto;overflow:hidden}
.ad-in-article{margin:22px 0}

/* Misc */
.archive-head{margin-bottom:22px;border-inline-start:5px solid var(--accent);padding-inline-start:14px}
.archive-head h1{font-size:1.6rem}
.archive-head p{color:var(--muted)}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:.9rem}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent)}
.flash{background:#e7f6ec;border:1px solid #b7e4c7;color:#14532d;padding:10px 16px;border-radius:8px;margin:12px 0}
[data-theme="dark"] .flash{background:#12291a;border-color:#1d4428;color:#a7e0b8}
.empty{color:var(--muted);padding:20px 0}
.error-page{text-align:center;padding:60px 0}
.error-page h1{font-size:5rem;color:var(--accent)}
.error-page .btn{display:inline-block;margin-top:16px;background:var(--accent);color:#fff;padding:10px 24px;border-radius:8px;font-weight:600}

/* Content blocks (editor inserts) */
.review-box{border:2px solid var(--accent);border-radius:var(--radius);padding:18px;margin:20px 0;background:var(--surface)}
.rb-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rb-title{font-weight:800;font-size:1.15rem}
.rb-score{background:var(--accent);color:#fff;font-weight:800;padding:4px 14px;border-radius:20px}
.rb-verdict{color:var(--muted);margin:10px 0}
.cta-btn{display:inline-block;background:var(--accent);color:#fff !important;font-weight:700;padding:12px 28px;border-radius:8px;text-decoration:none !important;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.cta-btn:hover{background:var(--accent-dark)}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.pros,.cons{border-radius:var(--radius);padding:14px 16px}
.pros{background:#e8f6ee;border:1px solid #b7e4c7}
.cons{background:#fdeaea;border:1px solid #f5c2c7}
[data-theme="dark"] .pros{background:#11291a;border-color:#1d4428}
[data-theme="dark"] .cons{background:#2b1416;border-color:#4a2226}
.pros ul,.cons ul{padding-inline-start:1.2em;margin-top:6px}
.toc{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin:18px 0}
.toc ol{padding-inline-start:1.3em;margin-top:8px}
.toc-l3{margin-inline-start:1em;font-size:.92rem}

/* Instant search dropdown */
.search-form{position:relative}
.search-suggest{display:none;position:absolute;top:calc(100% + 6px);inset-inline-end:0;width:320px;max-width:82vw;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.18);z-index:60;overflow:hidden}
.search-suggest a{display:block;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text);font-size:.9rem}
.search-suggest a:last-child{border-bottom:none}
.search-suggest a:hover{background:var(--bg);text-decoration:none}
.search-suggest small{display:block;color:var(--muted);font-size:.75rem}

@media (max-width:640px){.pros-cons{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:var(--surface);border-top:3px solid var(--accent);margin-top:36px}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:32px 16px}
.footer-grid h2{margin-bottom:10px;font-size:1rem}
.footer-grid ul{list-style:none}
.footer-grid a{color:var(--muted);font-size:.9rem;line-height:1.9}
.footer-grid p{color:var(--muted);font-size:.9rem}
.social-links{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.social-links a{background:var(--bg);border:1px solid var(--border);padding:4px 12px;border-radius:6px;font-size:.8rem}
.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding:14px 16px;font-size:.82rem;color:var(--muted)}

/* Responsive */
@media (max-width:980px){
  .content-with-sidebar{grid-template-columns:1fr}
  .sidebar{position:static}
  .hero-grid{grid-template-columns:1fr}
  .featured-strip{grid-template-columns:repeat(2,1fr)}
}
/* Mobile drawer menu */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;opacity:0;visibility:hidden;transition:opacity .25s}
.mobile-drawer{position:fixed;top:0;inset-inline-start:-300px;width:290px;max-width:85vw;height:100dvh;background:var(--surface);z-index:95;transition:inset-inline-start .25s ease;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.2);overflow-y:auto}
body.drawer-open .drawer-overlay{opacity:1;visibility:visible}
body.drawer-open .mobile-drawer{inset-inline-start:0}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--accent);color:#fff}
.drawer-title{font-weight:800;font-size:1.05rem}
/* Darkened, not lightened. The ✕ is white on the accent bar and came out at
   3.88:1; a *white* wash behind white text made it worse (3.33) — the first
   thing tried, and the measurement is why it did not ship. A black wash at 20%
   takes it to 6.87, and this is the only way to shut the menu on a phone. */
.drawer-close{background:rgba(0,0,0,.2);border:0;color:#fff;font-size:1rem;border-radius:8px;padding:6px 11px;cursor:pointer}
.drawer-search{display:flex;gap:0;margin:14px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg)}
.drawer-search input{flex:1;border:0;background:transparent;padding:11px 14px;color:var(--text);outline:none;font-size:.95rem}
.drawer-search button{border:0;background:transparent;padding:0 14px;cursor:pointer}
.drawer-nav{display:flex;flex-direction:column;padding:0 6px}
.drawer-nav a{padding:13px 14px;color:var(--text);font-weight:600;font-size:.98rem;border-bottom:1px solid var(--border);display:block}
.drawer-nav a:last-child{border-bottom:none}
.drawer-nav a:hover{color:var(--accent);text-decoration:none}
.drawer-langs{display:flex;gap:8px;padding:14px;flex-wrap:wrap;border-top:1px solid var(--border);margin-top:auto}
.drawer-langs a{padding:7px 14px;border:1px solid var(--border);border-radius:18px;font-size:.88rem;color:var(--text)}
.drawer-langs a.active{background:var(--accent);border-color:var(--accent);color:#fff}
.drawer-social{display:flex;gap:8px;padding:0 14px 16px;flex-wrap:wrap}
.drawer-social a{background:var(--bg);border:1px solid var(--border);padding:5px 12px;border-radius:8px;font-size:.8rem;color:var(--muted)}

@media (max-width:640px){
  .nav-toggle{display:block;flex-shrink:0}
  .main-nav{display:none}
  /* Compact 3-zone header: hamburger | branding | dark toggle */
  .header-top{padding:10px 12px;gap:10px}
  .branding{flex:1;min-width:0;text-align:center}
  .site-title{font-size:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .logo{max-height:38px;margin:0 auto}
  .tagline{display:none}
  .header-tools{margin-inline-start:0;flex-shrink:0}
  .header-tools .search-form,.header-tools .lang-switch{display:none} /* search & languages live in the drawer */
  .featured-strip{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .post-title{font-size:1.45rem}
  .single-post{padding:16px}
  .footer-grid{grid-template-columns:1fr}
  .post-list .thumb{flex-basis:110px}
  .ticker-inner{padding:7px 12px}
  .hero-side{gap:10px}
}

/* Taxonomy label in front of a non-tag term list on a post */
.post-tags .tax-label{font-weight:600;opacity:.7;margin-inline-end:.35rem}

/* ---- Blocks --------------------------------------------------------------
   Markup generated by Core/Block.php. Wide/full are opt-in per block so a
   gallery or a big table can break the reading column without the body text
   losing its measure. */
.single-post .blk{margin:1.4rem 0}
.single-post .align-wide{margin-inline-start:-2rem;margin-inline-end:-2rem}
.single-post .align-full{margin-inline-start:calc(50% - 50vw);margin-inline-end:calc(50% - 50vw);max-width:100vw}
@media (max-width:820px){
  .single-post .align-wide{margin-inline-start:0;margin-inline-end:0}
}

/* A wide table must scroll inside its own box; the page must never scroll
   sideways. The classic editor's tables used to break this on phones. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2rem 0}
.table-wrap table{width:100%;border-collapse:collapse;min-width:480px}
.table-wrap th,.table-wrap td{border:1px solid var(--border);padding:.5rem .7rem;text-align:start}
.table-wrap th{background:rgba(0,0,0,.04);font-weight:600}

.blk-embed{position:relative;padding-top:56.25%;margin:1.4rem 0;border-radius:10px;overflow:hidden;background:#000}
.blk-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.blk-gallery{display:grid;gap:.5rem;margin:1.4rem 0}
.blk-gallery.cols-2{grid-template-columns:repeat(2,1fr)}
.blk-gallery.cols-3{grid-template-columns:repeat(3,1fr)}
.blk-gallery.cols-4{grid-template-columns:repeat(4,1fr)}
.blk-gallery img{width:100%;height:100%;object-fit:cover;border-radius:8px;aspect-ratio:4/3}
@media (max-width:600px){
  .blk-gallery.cols-3,.blk-gallery.cols-4{grid-template-columns:repeat(2,1fr)}
}

.blk-btn{margin:1.4rem 0}
.blk-btn .btn{display:inline-block;padding:.7rem 1.5rem;border-radius:8px;font-weight:600;text-decoration:none}
.blk-btn .btn-primary{background:var(--accent);color:#fff}
.blk-btn .btn-ghost{border:2px solid var(--accent);color:var(--accent)}

.single-post figure{margin:1.4rem 0}
.single-post figure img{width:100%;height:auto;border-radius:10px}
.single-post figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem;text-align:center}
.single-post blockquote cite{display:block;margin-top:.5rem;font-size:.88rem;opacity:.75;font-style:normal}

/* ---- Forms --------------------------------------------------------------
   The module renders its own markup, so a theme only has to lay it out. The
   honeypot hides itself inline — a theme is not allowed to be the reason a
   spam trap becomes visible. */
.devi-form{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0}
.devi-form .devi-field{display:flex;flex-direction:column;gap:5px;flex:1 1 100%}
.devi-form .devi-field.devi-half{flex:1 1 calc(50% - 7px)}
.devi-form label{font-weight:600;font-size:.92rem}
.devi-form input[type=text],.devi-form input[type=email],.devi-form input[type=tel],
.devi-form input[type=number],.devi-form input[type=date],.devi-form select,.devi-form textarea{
  width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius);
  font:inherit;background:var(--bg);color:var(--text)}
.devi-form textarea{resize:vertical;min-height:120px}
.devi-form fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;flex:1 1 100%}
.devi-form fieldset legend{font-weight:600;font-size:.92rem;padding:0 4px}
.devi-form fieldset label,.devi-consent label{display:flex;align-items:flex-start;gap:8px;font-weight:400}
.devi-form .req{color:#d33}
.devi-form .devi-help{color:var(--muted);font-size:.82rem}
.devi-form .devi-error{color:#d33;font-size:.85rem}
.devi-form .has-error input,.devi-form .has-error textarea,.devi-form .has-error select{border-color:#d33}
.devi-form button[type=submit]{flex:0 0 auto;padding:12px 22px;border:0;border-radius:var(--radius);
  background:var(--accent);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.devi-form button[type=submit]:disabled{opacity:.6;cursor:default}
.form-msg{padding:12px 14px;border-radius:var(--radius);margin:14px 0}
.form-msg.ok{background:#e8f6ec;color:#1b5e20}
.form-msg.err{background:#fdecea;color:#a52218}

/* Author archive header — a person, not a bucket. */
.author-head{display:flex;gap:16px;align-items:flex-start}
.author-avatar{border-radius:50%;object-fit:cover;flex:0 0 72px}
.author-links{margin-top:6px;display:flex;flex-wrap:wrap;gap:12px;font-size:.88rem}

/* Figure captions. A caption is prose about the picture, a credit is an
   attribution — they sit on one line with the credit to the right, which is the
   newspaper convention, and the layout is a site setting so a page's figures
   cannot disagree with each other. */
.fig-cap{font-size:.82rem;color:var(--muted);margin-top:6px;display:flex;gap:12px;line-height:1.45}
.fig-cap a{color:inherit;text-decoration:underline}
.fig-cap .cap-credit{white-space:nowrap}
.fig-cap.lay-split{justify-content:space-between;align-items:baseline}
.fig-cap.lay-left{justify-content:flex-start;flex-wrap:wrap}
.fig-cap.lay-right{justify-content:flex-end;flex-wrap:wrap;text-align:end}
.fig-cap.lay-stacked{flex-direction:column;gap:2px}
/* On a phone a caption of any length and a credit cannot share a line without
   one of them being squeezed to a column of single words. */
@media (max-width:600px){
  .fig-cap.lay-split{flex-direction:column;gap:2px}
  .fig-cap .cap-credit{white-space:normal}
}

/* Live blog */
.live-blog{margin:20px 0;border-inline-start:3px solid var(--accent,#c0392b);padding-inline-start:14px}
.lb-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lb-badge{background:#c0392b;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 8px;border-radius:3px}
/* The dot only pulses while something is actually coming. */
.live-blog.is-live .lb-badge::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:#fff;margin-inline-end:6px;vertical-align:middle;animation:lb-pulse 1.6s infinite}
@keyframes lb-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.lb-badge-ended{background:var(--muted);text-transform:none;letter-spacing:0}
.lb-count{color:var(--muted);font-size:.82rem}
.lb-update{padding:12px 0;border-bottom:1px solid var(--border)}
.lb-update.is-pinned{background:rgba(192,57,43,.05);padding:12px;border-radius:var(--radius)}
.lb-meta{display:flex;gap:10px;align-items:baseline;font-size:.8rem;color:var(--muted);margin-bottom:4px}
.lb-time{color:inherit;text-decoration:none;font-variant-numeric:tabular-nums}
.lb-time:hover{text-decoration:underline}
.lb-pin{font-weight:700;color:#c0392b}
.lb-head{font-size:1.05rem;margin:0 0 4px}
.lb-body p:last-child{margin-bottom:0}
/* An entry that arrived while the reader was on the page is worth noticing
   once — but a permanent highlight would make the newest entry look special
   forever, so it fades. */
.lb-update.is-new{animation:lb-in .6s ease-out}
@keyframes lb-in{from{background:rgba(192,57,43,.14)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){
  .live-blog.is-live .lb-badge::before{animation:none}
  .lb-update.is-new{animation:none}
}