/* 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` carries `.container` as well, and a class beats a type selector — so
   the 24px this rule claimed to add has never once applied, on any width: the
   page has always started hard against the navigation bar. Named with the class
   so it actually wins, and the horizontal padding stays `.container`'s. */
main.container{padding-block:28px}
@media (max-width:600px){ main.container{padding-block:18px} }
.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}
/* Square icon buttons. Sized so the tap target clears 40px on a phone without
   the row wrapping — five of these plus the label fit across 360px, which the
   labelled version did not. */
.share-bar a{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;color:#fff}
.share-bar a svg{display:block}
.sh-label{color:var(--muted)}
.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}
/* Corrections and updates, under the article.
   A left rule and a tint rather than a full box: it has to read as part of the
   article — the paper's own voice about its own piece — not as a warning
   banner or, worse, as an ad. A correction is the louder of the two because it
   says the article was wrong. */
.corrections{margin:0 0 24px}
.correction{margin:0 0 8px;padding:10px 14px;border-left:3px solid var(--border);
  background:var(--bg);font-size:.94rem;border-radius:0 6px 6px 0}
.correction-correction{border-left-color:var(--accent)}
.correction strong{margin-inline-end:.25em}

/* The old one-line author box lived here; the real one is at the foot of this
   file with its two arrangements. One definition, or the two disagree about
   padding and nobody can tell which is winning. */
.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. */
/* The author archive's head is a card, not the shared archive bar: every other
   archive is about a bucket and this one is about a person. */
.author-card{display:flex;gap:20px;align-items:flex-start;margin-bottom:22px;padding:20px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.author-card h1{font-size:1.7rem;margin:0 0 2px}
.author-card-body{min-width:0}
.author-bio{margin:6px 0;color:var(--text)}
.author-stats{margin:10px 0 0;color:var(--muted);font-size:.9rem}
.author-stats strong{color:var(--text)}
@media (max-width:600px){
  /* Photo above the name on a phone, for the reason the author box stacks:
     120px beside three lines of bio leaves the bio two words wide. */
  .author-card{flex-direction:column;align-items:center;text-align:center}
  .author-card .author-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
}
/* 120 in the markup and 120 here: the tag's own width/height reserve the box
   before the file arrives, and a rule that disagreed with them would undo that
   the moment it applied. */
.author-avatar{border-radius:50%;object-fit:cover;flex:0 0 120px;width:120px;height:120px}
.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}
}
.comment-reply.d1{margin-inline-start:28px}
.comment-reply.d2{margin-inline-start:56px}
.comment-reply.d3{margin-inline-start:84px}
.comment-reply.d4{margin-inline-start:112px}
.comment-reply-link{font-size:.78rem;color:var(--muted);text-decoration:none}
.comment-reply-link:hover{color:var(--accent)}
.replying-to{font-size:.85rem;color:var(--muted);margin-bottom:8px;display:flex;gap:8px;align-items:center}
.comment-form .reply-cancel{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.9rem;padding:0 4px;margin:0}
.search-empty{padding:8px 0}
.search-empty .search-form{max-width:420px;margin:14px 0 22px}
.search-suggestions h2{font-size:1rem;margin-bottom:8px}
.search-suggestions ul{list-style:none;display:grid;gap:6px}
.search-suggestions a{font-size:.95rem}
/* Content width, not full-bleed: a bar edge to edge reads as part of the
   browser rather than part of the site, and on a 1600px screen it puts the
   buttons a long way from the words. 1200px is `.container`'s own max-width,
   and `inset-inline` with `margin:auto` centres it in both directions. */
.consent-bar{position:fixed;inset-inline:0;bottom:0;z-index:60;
  width:min(1200px, calc(100% - 32px));margin:0 auto 16px;border-radius:12px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 4px 18px rgb(0 0 0/.14)}
.consent-bar[hidden]{display:none}
.consent-bar p{font-size:.88rem;margin:0;max-width:70ch}
.consent-actions{display:flex;gap:8px}
.consent-bar button{border:1px solid var(--border);background:var(--bg);color:var(--text);
  padding:8px 16px;border-radius:8px;font:inherit;font-size:.85rem;cursor:pointer}
.consent-bar .consent-yes{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* ---------- Print ----------
   A news article gets printed and saved as PDF, and until this existed that PDF
   was the navigation, the ticker, the sidebar, the share buttons and the
   newsletter box, with the article somewhere inside it.

   Inside theme.css rather than a print.css of its own, deliberately: a second
   stylesheet is a second request on every page load for something almost nobody
   prints, and `media="print"` does not stop a browser downloading it. These
   rules cost nothing until the print dialog opens.

   Comments are hidden with the rest. A printed article is the article — keeping
   a hundred replies triples the page count of the thing somebody asked for. */
@media print {
  /* Chrome and Firefox drop backgrounds when printing but keep text colour, so
     a dark-mode reader would print light grey on white. Forced, both schemes. */
  :root, [data-theme="dark"] {
    --bg:#fff; --surface:#fff; --text:#000; --muted:#333; --border:#999;
    --accent:#000; --accent-dark:#000; --link:#000
  }
  html, body { background:#fff; color:#000 }

  /* Chrome's own margin box carries the URL and the date already. */
  @page { margin:16mm }

  /* Everything that is the site rather than the story. */
  .site-header, .ticker, .mobile-drawer, .drawer-overlay, .nav-toggle,
  .site-footer, .sidebar, .share-bar, .related, .author-box, .comments,
  .newsletter-form, .search-form, .lang-switch, .dark-toggle, .post-langs,
  .skip-link, .flash, .consent-bar, .pagination, .ad-slot, .breadcrumbs,
  .search-suggest, .post-pages, .live-blog [data-live-poll] { display:none !important }

  /* The article gets the whole page: the grid is a screen decision. */
  .content-with-sidebar { display:block !important }
  .container, .single-post, .content-main { max-width:none; width:auto; padding:0; margin:0 }

  /* A link is useless on paper unless it says where it goes — but only real
     ones. `href="#"` and `javascript:` would print as noise. */
  .post-content a[href^="http"]::after { content:" (" attr(href) ")"; font-size:.8em; word-break:break-all }

  /* Nothing that can be split should be split. */
  h1, h2, h3, h4 { break-after:avoid-page; page-break-after:avoid }
  figure, img, table, blockquote, .pros-cons { break-inside:avoid-page; page-break-inside:avoid }
  p, li { orphans:3; widows:3 }

  img { max-width:100% !important; height:auto !important }
  .post-content { font-size:11pt; line-height:1.5 }

  /* Where it came from, printed once at the top. */
  .print-source { display:block !important; font-size:9pt; margin-bottom:8pt; color:#333 }
}

/* Screen never shows it; print does, via the rule above. */
.print-source { display:none }

/* ------------------------------------------------- pages of one article --
   Back / Next for a split post. Solid blocks rather than outlined cards: the
   control has to read as the obvious thing to press at the foot of the text,
   and the unavailable one is greyed and dead rather than missing, so the
   button a reader is aiming at never moves between pages. */
.post-pages{display:flex;align-items:center;gap:12px;margin:28px 0;flex-wrap:wrap}
.pp-center{justify-content:center}
.pp-start{justify-content:flex-start}
.pp-end{justify-content:flex-end}
/* One each side, which is the arrangement that suits a long read on a wide
   screen — the two controls sit where the eye leaves the column. */
.pp-apart{justify-content:space-between}
.pp-btn{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:11px 22px;border-radius:4px;font-weight:600;line-height:1.2;
  background:var(--text);color:var(--surface);text-decoration:none}
.pp-btn:hover{background:var(--accent);color:#fff}
.pp-text{white-space:nowrap}
.pp-mark{font-size:1.05em;line-height:1}
/* Dead, and it looks dead — a control that is styled like a working one and
   does nothing is worse than no control. */
.pp-off{background:var(--muted);cursor:default;opacity:.85}
.pp-off:hover{background:var(--muted)}
/* Only drawn when the site asks for the heading. Full width inside the button,
   so a long section title wraps under the word rather than stretching the
   control across the article. */
.pp-title{flex-basis:100%;font-weight:400;font-size:.85rem;opacity:.85}
.pp-count{color:var(--muted);font-size:.85rem;white-space:nowrap}
@media (max-width:600px){
  .post-pages{gap:8px}
  .pp-btn{flex:1 1 0;justify-content:center;padding:12px 14px}
  .pp-count{order:3;width:100%;text-align:center}
}

/* -------------------------------------------------------- the author box --
   Two arrangements from one block of markup, because the difference is where
   the photo sits and nothing else. Horizontal is the newspaper credit;
   vertical is the blog introduction. */
.author-box{display:flex;gap:16px;margin:28px 0;padding:18px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface)}
.author-box--vertical{flex-direction:column;align-items:center;text-align:center}
.ab-photo{flex:0 0 auto;display:block}
.ab-photo img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block}
.ab-body{min-width:0}
.ab-name{margin:0 0 4px;font-weight:700;font-size:1.05rem}
.ab-name a{color:var(--text);text-decoration:none}
.ab-name a:hover{color:var(--accent)}
.ab-meta{display:block;font-weight:400;font-size:.85rem;color:var(--muted);margin-top:2px}
.ab-bio{margin:0 0 6px;color:var(--text);font-size:.95rem}
.ab-credentials{margin:0 0 4px;color:var(--muted);font-size:.85rem;font-style:italic}
.ab-expertise{margin:0 0 6px;color:var(--muted);font-size:.85rem}
.ab-links{margin:0;display:flex;gap:12px;flex-wrap:wrap;font-size:.85rem}
.author-box--vertical .ab-links{justify-content:center}
.ab-link{color:var(--link)}
/* On a phone the horizontal one becomes the vertical one: 96px of photo beside
   three lines of bio on a 360px screen leaves the bio in a column two words
   wide. */
@media (max-width:600px){
  .author-box{flex-direction:column;align-items:center;text-align:center}
  .author-box .ab-links{justify-content:center}
}
.author-meta{color:var(--muted);font-size:.9rem;margin:2px 0}
.author-expertise{color:var(--muted);font-size:.9rem;margin:2px 0}
.author-email{margin:2px 0;font-size:.9rem}
.author-credentials{color:var(--muted);font-size:.9rem;font-style:italic;margin:2px 0}