/* ==========================================================================
   VIRA Online — Design System
   Brand: magenta #A21C7D · cyan #00C2D1
   ========================================================================== */


/* ---- Thaana (Dhivehi) — native Maldivian typefaces, self-hosted ----
   Display : MV A Waheed  — the classic Dhivehi headline face (true bold cut)
   Body    : AK Rasmee    — the reading face used for Dhivehi news copy
   Lead    : MV Randhoo   — standfirst / intro paragraphs
   All three carry real OpenType mark positioning (GPOS 'mark'), so the fili
   attach to the correct base letter instead of being nudged by the renderer.
   Noto Sans Thaana stays last as a Unicode safety net.                      */
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'MV A Waheed';font-style:normal;font-weight:700 900;font-display:swap;
  src:url('../assets/fonts/mv-a-waheed.woff2') format('woff2');
}
@font-face{
  font-family:'AK Rasmee';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/ak-rasmee.woff2') format('woff2');
}
@font-face{
  font-family:'MV Randhoo';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/mv-randhoo.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Sans Thaana';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../assets/fonts/noto-thaana-400.woff2') format('woff2');
  unicode-range:U+060C,U+061B-061C,U+061F,U+0660-066C,U+0780-07B1,U+200C-200F,U+20C2,U+25CC,U+FDF2,U+FDFD;
}

:root{
  --brand:#A21C7D;
  --brand-2:#C42C99;
  --brand-deep:#6E0F54;
  --accent:#00C2D1;
  --accent-2:#38E1EC;

  --bg:#F6F5F9;
  --surface:#FFFFFF;
  --surface-2:#FBF9FD;
  --surface-3:#F1EEF6;
  --text:#191322;
  --text-2:#4A4257;
  --muted:#7C7489;
  --line:#E9E4F0;
  --line-strong:#D9D1E4;

  --grad:linear-gradient(120deg,var(--brand) 0%,#B3248B 45%,var(--accent) 130%);
  --grad-soft:linear-gradient(135deg,rgba(162,28,125,.10),rgba(0,194,209,.10));
  --shadow-sm:0 1px 2px rgba(25,19,34,.05),0 2px 8px rgba(25,19,34,.04);
  --shadow:0 4px 12px rgba(25,19,34,.06),0 14px 34px rgba(25,19,34,.07);
  --shadow-lg:0 18px 50px rgba(25,19,34,.14);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --header-h:64px;
  --max:1240px;
  /* Latin first (Plus Jakarta Sans is unicode-range limited to Latin), then the
     Thaana faces, so Dhivehi text still renders correctly in English mode. */
  --font:'Plus Jakarta Sans','AK Rasmee','MV A Waheed','Noto Sans Thaana',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-dv:'AK Rasmee','MV A Waheed','Faruma','A_Faruma','MV Boli','Noto Sans Thaana','Plus Jakarta Sans',sans-serif;
  --font-dv-display:'MV A Waheed','AK Rasmee','Faruma','A_Faruma','MV Boli','Noto Sans Thaana','Plus Jakarta Sans',sans-serif;
  --font-dv-lead:'MV Randhoo','AK Rasmee','Faruma','A_Faruma','Noto Sans Thaana','Plus Jakarta Sans',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html[data-theme="dark"]{
  --bg:#0C0710;
  --surface:#150D1B;
  --surface-2:#1A1021;
  --surface-3:#22152B;
  --text:#F7F3FA;
  --text-2:#CEC5D8;
  --muted:#9A8FA8;
  --line:#2A1C34;
  --line-strong:#3A2846;
  --brand:#C42C99;
  --brand-2:#DE45B2;
  --accent:#22D3E0;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:15.5px;line-height:1.65;-webkit-font-smoothing:auto;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;line-height:1.25;letter-spacing:-.02em;font-weight:800}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Thaana / RTL ---------------------------------------------------------- */
/* Native Dhivehi metrics: AK Rasmee for reading, MV A Waheed for headlines.
   Tracking stays at 0 (it breaks the script); leading follows Dhivehi news
   convention — 1.8 for body copy, ~1.5 for display.                        */
[dir="rtl"],html[dir="rtl"] body{
  font-family:var(--font-dv);
  letter-spacing:0;
  line-height:1.8;
  word-spacing:normal;
  font-weight:400;
  /* ccmp + mark + mkmk are the features that actually attach a fili to its
     consonant. If an engine drops them the marks drift sideways and the word
     reads wrong, so they are declared explicitly here. */
  font-feature-settings:"ccmp" 1,"mark" 1,"mkmk" 1,"kern" 1,"liga" 1,"calt" 1;
  font-variant-ligatures:common-ligatures contextual;
  text-rendering:auto;
  -webkit-font-smoothing:auto;
  overflow-wrap:break-word;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6,
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h5,html[dir="rtl"] h6,
[dir="rtl"] .card__title,[dir="rtl"] .hero__title,[dir="rtl"] .sec-head__title,[dir="rtl"] .article__title{
  font-family:var(--font-dv-display);
  letter-spacing:0;
  line-height:1.5;
  font-weight:700;
  padding-block:.04em;      /* room for fili above/below */
}
[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] .card__excerpt,[dir="rtl"] .article__body{
  line-height:1.8;
}
[dir="rtl"] .card__title,[dir="rtl"] .mini__title,[dir="rtl"] .nav a,[dir="rtl"] .chip{
  line-height:1.55;
}
[dir="rtl"] .ltr-num,html[dir="rtl"] .ltr-num{font-family:var(--font);direction:ltr;display:inline-block;letter-spacing:0}
html[dir="rtl"] .ticker__track{animation-direction:reverse}
[dir="rtl"] .btn,[dir="rtl"] .chip,[dir="rtl"] .tag,[dir="rtl"] .badge,[dir="rtl"] .topbar,
[dir="rtl"] .nav a,[dir="rtl"] .icon-btn,[dir="rtl"] .pill,[dir="rtl"] .kicker{
  line-height:1.5;
}
/* Never let the browser fake-bold or fake-italic Thaana (it distorts the fili) */
[dir="rtl"]{font-synthesis-weight:none;font-synthesis-style:none}
/* Belt-and-braces: any RTL/Dhivehi element, wherever it sits in the DOM,
   gets correct Thaana shaping and never a synthesised bold or italic. */
[dir="rtl"],[lang="dv"],.dv{
  font-feature-settings:"ccmp" 1,"mark" 1,"mkmk" 1,"kern" 1,"liga" 1,"calt" 1;
  font-synthesis-weight:none;
  font-synthesis-style:none;
  text-rendering:auto;
}
/* Explicit helper for Dhivehi text inside an English (LTR) page */
.dv,[lang="dv"]{font-family:var(--font-dv);direction:rtl;unicode-bidi:isolate;line-height:1.8}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================ TOP BAR ================================= */
.topbar{
  background:linear-gradient(90deg,var(--brand-deep),var(--brand) 55%,#0E7C8C);
  color:#fff;font-size:12.5px;font-weight:600;
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px}
.topbar__left{display:flex;align-items:center;gap:16px;min-width:0}
.topbar__date{opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__live{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);
  padding:3px 10px;border-radius:99px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.dot-live{width:6px;height:6px;border-radius:50%;background:#5CF2A8;box-shadow:0 0 0 0 rgba(92,242,168,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(92,242,168,0)}100%{box-shadow:0 0 0 0 rgba(92,242,168,0)}}
.topbar__right{display:flex;align-items:center;gap:6px}
.topbar__socials{display:flex;gap:2px;margin-inline-end:6px}
.topbar__socials a{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;opacity:.85;transition:.2s}
.topbar__socials a:hover{opacity:1;background:rgba(255,255,255,.16);transform:translateY(-1px)}
.topbar__socials svg{width:14px;height:14px;fill:currentColor}
.pill-btn{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.13);font-size:11.5px;font-weight:700;letter-spacing:.03em;
  transition:.2s;white-space:nowrap;
}
.pill-btn:hover{background:rgba(255,255,255,.26)}
.pill-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}

/* Install pill — brand gradient so it reads as the primary action in the bar */
.pill-btn--install{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;box-shadow:0 2px 8px rgba(162,28,125,.32);
}
.pill-btn--install:hover{
  background:linear-gradient(135deg,var(--brand-2) 0%,var(--brand) 100%);
  box-shadow:0 4px 14px rgba(162,28,125,.46);transform:translateY(-1px);
}
.pill-btn--install svg{stroke-width:2.2}
/* Gentle attention pulse only when the browser has a real native install ready */
html[data-pwa-installable="1"] .pill-btn--install{animation:installGlow 2.6s ease-in-out infinite}
@keyframes installGlow{
  0%,100%{box-shadow:0 2px 8px rgba(162,28,125,.32)}
  50%{box-shadow:0 3px 18px rgba(196,44,153,.62)}
}
html[data-pwa-installed="1"] .pill-btn--install{display:none}
@media(prefers-reduced-motion:reduce){
  html[data-pwa-installable="1"] .pill-btn--install{animation:none}
}
@media(max-width:760px){
  .pill-btn--install{padding:4px 9px}
  .pill-btn--install span{display:none}   /* icon-only on small phones */
}

/* ============================ HEADER ================================== */
.header{
  position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.header.is-stuck{box-shadow:0 6px 24px rgba(20,10,30,.08)}
.header__in{display:flex;align-items:center;gap:12px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand__logo{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px rgba(162,28,125,.28)}
.brand__name{display:flex;flex-direction:column;line-height:1.1}
.brand__name b{font-size:17px;font-weight:800;letter-spacing:-.02em}
html[dir="rtl"] .brand__name b{font-size:23px;letter-spacing:0}
.brand__name span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:3px}
.header__nav{display:flex;align-items:center;gap:0;margin-inline-start:8px;flex:1;min-width:0}
.header__nav a{
  padding:9px 8px;border-radius:9px;font-size:13px;font-weight:800;color:var(--text);
  letter-spacing:-.02em;white-space:nowrap;position:relative;
  transition:color .18s var(--ease),background .18s var(--ease);
}
/* gradient underline that grows from the centre on hover / active */
.header__nav a::after{
  content:"";position:absolute;inset-inline:8px;bottom:4px;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:center;
  transition:transform .24s var(--ease);
}
.header__nav a:hover{color:var(--brand)}
.header__nav a:hover::after{transform:scaleX(1)}
.header__nav a.active{color:var(--brand);background:var(--grad-soft)}
.header__nav a.active::after{transform:scaleX(1)}
/* Dhivehi: true bold display face, never synthetic */
html[dir="rtl"] .header__nav a{
  font-family:var(--font-dv-display);font-weight:700;font-size:17.9px;
  letter-spacing:0;line-height:1.5;padding-block:7px;
}
.header__actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-inline-start:auto}
.icon-btn{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  color:var(--text-2);transition:.18s;position:relative;
}
.icon-btn:hover{background:var(--surface-3);color:var(--brand)}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;
  border-radius:12px;font-weight:700;font-size:13.5px;transition:.2s var(--ease);white-space:nowrap;
  border:1px solid transparent;
}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(162,28,125,.28)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(162,28,125,.38)}
.btn--ghost{background:var(--surface-3);color:var(--text)}
.btn--ghost:hover{background:var(--line-strong)}
.btn--outline{border-color:var(--line-strong);color:var(--text)}
.btn--outline:hover{border-color:var(--brand);color:var(--brand)}
.btn--sm{padding:6px 12px;font-size:12.5px;border-radius:9px;gap:6px}
.btn--danger{background:#E23D5B;color:#fff}
.btn--block{width:100%}
.menu-toggle{display:none}

/* ============================ TICKER ================================== */
.ticker{background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden}
.ticker__in{display:flex;align-items:center;gap:0;height:44px}
.ticker__label{
  display:inline-flex;align-items:center;gap:7px;background:var(--grad);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:9px;flex-shrink:0;margin-inline-end:14px;
  box-shadow:0 4px 12px rgba(162,28,125,.25);
}
.ticker__label svg{width:13px;height:13px;fill:currentColor;stroke:none}
.ticker__viewport{overflow:hidden;flex:1;position:relative;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ticker__track{display:flex;gap:38px;width:max-content;animation:ticker 48s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker__item{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--text-2)}
.ticker__item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.ticker__item:hover{color:var(--brand)}

/* ============================ HERO ==================================== */
.hero{padding:26px 0 8px}
.hero__grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px}
.hero-main{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:440px;display:flex;align-items:flex-end;box-shadow:var(--shadow);isolation:isolate}
.hero-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.hero-main:hover img{transform:scale(1.04)}
.hero-main::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,4,16,.94) 0%,rgba(10,4,16,.62) 38%,rgba(10,4,16,.05) 72%)}
.hero-main__body{padding:30px 32px;color:#fff;width:100%}
.hero-main h1{font-size:clamp(23px,2.6vw,35px);line-height:1.28;margin:10px 0 10px;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero-main p{color:rgba(255,255,255,.84);font-size:14.5px;margin-bottom:14px;max-width:60ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.meta--light{color:rgba(255,255,255,.72)}
.meta__dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--grad);color:#fff;width:fit-content;
}
html[dir="rtl"] .chip{letter-spacing:0;font-size:13.4px}
.chip--glass{background:rgba(255,255,255,.16);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22)}
.chip--soft{background:var(--grad-soft);color:var(--brand)}

.hero-side{display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:6px 18px;box-shadow:var(--shadow-sm)}
.hero-side__head{display:flex;align-items:center;justify-content:space-between;padding:12px 2px 8px;border-bottom:1px solid var(--line)}
.hero-side__head h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
html[dir="rtl"] .hero-side__head h2{letter-spacing:0;font-size:16.8px}
.hero-side__head a{font-size:11.5px;font-weight:700;color:var(--muted)}
.hero-side__head a:hover{color:var(--brand)}
.mini{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.mini:last-child{border-bottom:0}
.mini__thumb{width:74px;height:62px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--surface-3)}
.mini__thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.mini:hover .mini__thumb img{transform:scale(1.08)}
.mini__body{min-width:0;flex:1}
.mini__cat{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:3px}
html[dir="rtl"] .mini__cat{letter-spacing:0;font-size:12.3px}
.mini h3{font-size:13.5px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini:hover h3{color:var(--brand)}
.mini time{font-size:10.5px;color:var(--muted);margin-top:5px;display:block}

/* ============================ SECTIONS ================================ */
.section{padding:34px 0 6px}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.section__title{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:800;letter-spacing:-.02em}
html[dir="rtl"] .section__title{font-size:25.8px;letter-spacing:0}
.section__title::before{content:"";width:5px;height:24px;border-radius:99px;background:var(--grad);flex-shrink:0}
.section__link{font-size:12.5px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.section__link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:.2s}
.section__link:hover svg{transform:translateX(3px)}
html[dir="rtl"] .section__link:hover svg{transform:translateX(-3px) rotate(180deg)}
html[dir="rtl"] .section__link svg{transform:rotate(180deg)}

.grid{display:grid;gap:18px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

/* ===================== POST CAROUSEL ================================= */
/* Two posts per slide, brief summary under each title, dot navigation,
   auto-advance every 10s. Transform-only animation, and the timer is
   suspended whenever the block is off-screen or the tab is hidden. */
.carousel{position:relative}
.carousel__viewport{overflow:hidden;border-radius:calc(var(--radius) + 4px);margin:0 -2px;padding:2px}
.carousel__track{display:flex;align-items:stretch;
  transition:transform .72s cubic-bezier(.22,1,.36,1);will-change:transform}
.carousel.is-static .carousel__track{transition:none}
.carousel{--car-per:2}
.carousel__slide{flex:0 0 calc(100% / var(--car-per));min-width:0;padding-inline:9px}
.carousel__slide>.card{height:100%}
.carousel__slide[aria-hidden="true"] .card{pointer-events:none}
.carousel__slide[aria-hidden="true"] a{visibility:hidden}
/* dots */
.carousel__dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px}
.carousel__dot{position:relative;width:26px;height:26px;border-radius:99px;display:grid;place-items:center;
  background:transparent;padding:0;transition:width .34s var(--ease)}
.carousel__dot span{display:block;width:8px;height:8px;border-radius:99px;
  background:color-mix(in srgb,var(--text) 22%,transparent);
  transition:width .34s var(--ease),background .34s var(--ease),box-shadow .34s var(--ease)}
.carousel__dot:hover span{background:color-mix(in srgb,var(--brand) 45%,transparent)}
.carousel__dot.is-active{width:38px}
.carousel__dot.is-active span{width:100%;height:8px;background:var(--grad);
  box-shadow:0 2px 8px -2px color-mix(in srgb,var(--brand) 65%,transparent)}
.carousel__dot:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* autoplay progress fill inside the active dot */
.carousel__dot.is-active span::after{content:"";position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:scaleX(0);transform-origin:left;opacity:0}
html[dir="rtl"] .carousel__dot.is-active span::after{transform-origin:right}
.carousel.is-running .carousel__dot.is-active span::after{
  opacity:1;animation:carProg var(--car-interval,10s) linear forwards}
@keyframes carProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.carousel.is-paused .carousel__dot.is-active span::after{animation-play-state:paused}
/* arrows (desktop only, appear on hover) */
.carousel__nav{position:absolute;top:50%;translate:0 -50%;z-index:3;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--text);
  box-shadow:0 6px 20px -8px rgba(20,10,30,.45);opacity:0;transition:opacity .24s var(--ease),background .24s var(--ease),color .24s var(--ease)}
.carousel__nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.carousel__nav--prev{inset-inline-start:-6px}
.carousel__nav--next{inset-inline-end:-6px}
.carousel:hover .carousel__nav,.carousel:focus-within .carousel__nav{opacity:1}
.carousel__nav:hover{background:var(--grad);color:#fff;border-color:transparent}
.carousel__nav:focus-visible{opacity:1;outline:2px solid var(--brand);outline-offset:2px}
@media(hover:none){.carousel__nav{display:none}}
@media(max-width:900px){
  .carousel{--car-per:1}
  .carousel__slide{padding-inline:2px}
}
@media(max-width:760px){
  .carousel__dots{margin-top:13px;gap:6px}
  .carousel__dot{width:24px;height:24px}
  .carousel__dot.is-active{width:32px}
  .carousel__dot span{width:7px;height:7px}
  .carousel__dot.is-active span{height:7px}
}
@media(prefers-reduced-motion:reduce){
  .carousel__track{transition:none}
  .carousel.is-running .carousel__dot.is-active span::after{animation:none;opacity:0}
}

/* Cards ---------------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.28s var(--ease);position:relative;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 28%,var(--line))}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-3)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__media .chip{position:absolute;top:11px;inset-inline-start:11px;z-index:2}
.card__badge{position:absolute;top:11px;inset-inline-end:11px;z-index:2;background:rgba(10,4,16,.7);backdrop-filter:blur(8px);
  color:#fff;font-size:10px;font-weight:800;padding:4px 9px;border-radius:99px;display:flex;align-items:center;gap:4px}
.card__body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.card h3{font-size:16px;line-height:1.42;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html[dir="rtl"] .card h3{font-size:19px;line-height:1.7}
.card:hover h3{color:var(--brand)}
.card p{font-size:12.8px;color:var(--muted);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.card__foot>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Read more" — always one line, with a brand-gradient arrow chip */
.card__foot .read{font-weight:700;color:var(--brand);font-size:11.5px;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;flex-shrink:0;line-height:1;padding:2px 2px 2px 0;margin-inline-end:-2px;border-radius:99px;
  transition:color .24s var(--ease)}
html[dir="rtl"] .card__foot .read{padding:2px 0 2px 2px}
.read__ico{position:relative;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;flex-shrink:0;
  color:var(--brand);background:var(--grad-soft);
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),
             box-shadow .3s var(--ease),transform .3s var(--ease)}
.read__ico svg{width:12px;height:12px;display:block;overflow:visible;
  animation:readNudge 5s cubic-bezier(.22,1,.36,1) infinite}
html[dir="rtl"] .read__ico svg{transform:scaleX(-1);animation-name:readNudgeRtl}
@keyframes readNudge{0%,82%,100%{transform:translateX(0)}88%{transform:translateX(2.5px)}94%{transform:translateX(0)}}
@keyframes readNudgeRtl{0%,82%,100%{transform:scaleX(-1) translateX(0)}88%{transform:scaleX(-1) translateX(2.5px)}94%{transform:scaleX(-1) translateX(0)}}
.card__foot .read:hover .read__ico,
.card:hover .read__ico{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 5px 14px -4px color-mix(in srgb,var(--brand) 62%,transparent);transform:translateX(2px)}
html[dir="rtl"] .card__foot .read:hover .read__ico,
html[dir="rtl"] .card:hover .read__ico{transform:translateX(-2px)}
.card__foot .read:hover .read__ico svg,
.card:hover .read__ico svg{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .read__ico svg{animation:none}
  .card__foot .read .read__ico,.card__foot .read:hover .read__ico{transform:none}
}

/* Horizontal / list card */
.card--row{flex-direction:row;align-items:stretch}
.card--row .card__media{width:40%;aspect-ratio:auto;min-height:150px;flex-shrink:0}
.card--row .card__body{padding:14px 16px}

/* Split category block */
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.split__list{display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:4px 16px;box-shadow:var(--shadow-sm)}
.split__list .mini{padding:14px 0}
.split__list .mini__thumb{width:88px;height:68px}

/* ===================== TABBED TOP-STORIES CARD ======================== */
/* One card, three ranked sets (Latest / Popular / Trending) — the reader
   switches without ever leaving the card. */
.tabcard{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(20,10,30,.05)),0 18px 40px -28px rgba(20,10,30,.35);
}
.tabcard__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 4%,var(--surface)),var(--surface));
}
.tabcard__title{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.tabcard__title .pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--grad);flex-shrink:0}
.tabcard__title .pulse::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--brand) 55%,transparent);
  animation:tabPulse 2.4s ease-out infinite;
}
@keyframes tabPulse{0%{transform:scale(.55);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
.tabcard__title h2{
  font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[dir="rtl"] .tabcard__title h2{font-family:var(--font-dv-display);font-weight:700;font-size:18.5px;letter-spacing:0}

/* segmented control */
.tabs{
  display:inline-flex;align-items:center;gap:2px;padding:3px;flex-shrink:0;
  background:var(--surface-3);border:1px solid var(--line);border-radius:11px;
}
.tabs button{
  display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:8px;
  font-size:12.5px;font-weight:800;color:var(--text-2);line-height:1;white-space:nowrap;
  transition:color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.tabs button svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{
  background:var(--surface);color:var(--brand);font-weight:800;
  box-shadow:0 1px 2px rgba(20,10,30,.08),0 4px 10px -6px rgba(20,10,30,.35);
}
html[dir="rtl"] .tabs button{font-family:var(--font-dv-display);font-weight:800;font-size:15.7px;letter-spacing:0;padding:5px 9px}

/* panels */
.tabcard__list{list-style:none;margin:0;padding:0}
.tabcard--wide .tabcard__list{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
.tabcard__panel{padding:6px 6px 8px}
.tabcard__panel[hidden]{display:none}
.tabcard__panel.is-in{animation:tabIn .28s var(--ease)}
@keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ranked row */
.trow{
  display:grid;grid-template-columns:20px 66px minmax(0,1fr);gap:11px;align-items:center;
  padding:9px 8px;border-radius:11px;transition:background .18s var(--ease);
}
.trow:hover{background:var(--surface-2,var(--surface-3))}
.trow__rank{
  font-size:14px;font-weight:800;color:var(--muted);text-align:center;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.trow:first-child .trow__rank{color:var(--brand);font-size:15px}
.trow__thumb{
  width:66px;height:54px;border-radius:9px;overflow:hidden;background:var(--surface-3);display:block;
}
.trow__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.trow:hover .trow__thumb img{transform:scale(1.07)}
.trow__body{min-width:0}
.trow__cat{
  display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);margin-bottom:2px;
}
html[dir="rtl"] .trow__cat{letter-spacing:0;font-size:12.3px}
.trow h3{
  font-size:15px;font-weight:700;line-height:1.36;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
html[dir="rtl"] .trow h3{font-family:var(--font-dv);font-size:17.4px;line-height:1.65}
.trow:hover h3{color:var(--brand)}
.trow__meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11px;color:var(--muted);line-height:1}
.trow__meta svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.trow__dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex-shrink:0}
.trow__views{display:inline-flex;align-items:center;gap:3px;font-weight:600}
html[dir="rtl"] .trow__meta{font-size:12.9px}

/* compact variant used inside the article sidebar */
.tabcard--side .tabcard__head{flex-direction:column;align-items:stretch;gap:9px;padding:12px}
.tabcard--side .tabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
.tabcard--side .tabs button{justify-content:center;padding:6px 4px;font-size:11.5px}
html[dir="rtl"] .tabcard--side .tabs button{font-size:14.6px;font-weight:800}
.tabcard--side .trow{grid-template-columns:18px 56px minmax(0,1fr);gap:9px;padding:8px 6px}
.tabcard--side .trow__thumb{width:56px;height:48px}
.tabcard--side .trow h3{font-size:13.5px}
html[dir="rtl"] .tabcard--side .trow h3{font-size:16.2px}
.tabcard--side .trow__meta{font-size:10.5px}
.tabcard--side .trow__cat{font-size:9px}
/* hero-column variant: the card becomes the hero's right rail */
.hero-side--tabs{padding:0;overflow:hidden;display:flex;flex-direction:column}
.hero-side--tabs .tabcard--hero{border:0;border-radius:0;box-shadow:none;background:transparent;
  display:flex;flex-direction:column;flex:1;min-height:0;overflow:visible}
.hero-side--tabs .tabcard--hero .tabcard__head{padding:13px 15px 12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 5%,var(--surface)),var(--surface))}
.hero-side--tabs .tabcard--hero .tabcard__panel{flex:1;padding:7px 8px 9px}
.hero-side--tabs .tabcard--hero .tabcard__list{display:flex;flex-direction:column}
.hero-side--tabs .tabcard--hero .trow{padding:9px 7px}
.hero-side--tabs .tabcard--hero .trow:not(:last-child){border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.hero-side--tabs .tabcard--hero .trow__thumb{width:62px;height:52px}
.hero-side--tabs .tabcard--hero .trow h3{font-size:13.8px}
html[dir="rtl"] .hero-side--tabs .tabcard--hero .trow h3{font-size:16.6px;line-height:1.6}
.tabcard__more{margin-inline-start:auto;flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--muted);
  white-space:nowrap;padding:4px 8px;border-radius:8px;transition:color .18s var(--ease),background .18s var(--ease)}
.tabcard__more:hover{color:var(--brand);background:var(--grad-soft)}
html[dir="rtl"] .tabcard__more{font-family:var(--font-dv-display);font-weight:700;font-size:14.6px;letter-spacing:0}

@media(max-width:760px){
  .tabcard__head{flex-direction:column;align-items:stretch;gap:9px;padding:11px 12px}
  .tabcard__title h2{font-size:14.5px}
  html[dir="rtl"] .tabcard__title h2{font-size:17.9px}
  .tabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .tabs button{justify-content:center;padding:7px 4px;font-size:12px}
  html[dir="rtl"] .tabs button{font-size:15.1px}
  .tabcard--wide .tabcard__list{grid-template-columns:1fr}
  /* keep the mobile card to a comfortable five rows */
  .tabcard--wide .trow:nth-child(n+6){display:none}
  .trow{grid-template-columns:17px 58px minmax(0,1fr);gap:9px;padding:8px 5px}
  .trow__thumb{width:58px;height:48px;border-radius:8px}
  .trow h3{font-size:14.5px;line-height:1.32}
  html[dir="rtl"] .trow h3{font-size:16.8px;line-height:1.55}
  .trow__meta{margin-top:3px}
}

/* Gallery -------------------------------------------------------------- */

/* Newsletter ----------------------------------------------------------- */
.newsletter{margin:40px 0 10px;border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:linear-gradient(115deg,var(--brand-deep),var(--brand) 48%,#0B7F8E);color:#fff;padding:38px 40px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;box-shadow:var(--shadow)}
.newsletter::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,194,209,.4),transparent 65%);top:-140px;inset-inline-end:-60px}
.newsletter h2{font-size:26px;margin-bottom:7px}
html[dir="rtl"] .newsletter h2{font-size:31.4px}
.newsletter p{color:rgba(255,255,255,.8);font-size:13.5px;margin:0;max-width:44ch}
.newsletter form{display:flex;gap:8px;background:rgba(255,255,255,.14);padding:6px;border-radius:14px;border:1px solid rgba(255,255,255,.2);position:relative;z-index:1}
.newsletter input{flex:1;background:transparent;border:0;padding:10px 14px;color:#fff;font-size:13.5px;min-width:0}
.newsletter input::placeholder{color:rgba(255,255,255,.6)}
.newsletter .btn{background:#fff;color:var(--brand);box-shadow:none}
.newsletter .btn:hover{background:#F4E9F2}

/* ============================ FOOTER ================================== */
.footer{margin-top:44px;background:var(--surface);border-top:1px solid var(--line);padding:40px 0 0}
.footer__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;padding-bottom:30px;align-items:start}

/* ---- footer tabbed card: the three former heading columns in one card ---- */
.fcard{
  position:relative;border-radius:var(--radius);
  background:var(--surface-2);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,8,24,.04),0 12px 30px -22px rgba(16,8,24,.35);
  overflow:hidden;
}
.fcard::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;
  background:var(--grad);opacity:.9;
}
.fcard__bar{
  position:relative;display:flex;gap:4px;padding:8px 8px 0;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(162,28,125,.055),transparent);
}
.ftab{
  position:relative;z-index:1;flex:1 1 0;min-width:0;
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:9px 10px 11px;border-radius:10px 10px 0 0;
  font:inherit;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  transition:color .22s var(--ease),background .22s var(--ease);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[dir="rtl"] .ftab{letter-spacing:0;text-transform:none;font-size:15.7px;font-weight:700}
.ftab:hover{color:var(--text);background:rgba(162,28,125,.06)}
.ftab.is-active{color:var(--brand)}
html[data-theme="dark"] .ftab.is-active{color:var(--brand-2)}
.ftab:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
/* sliding gradient underline */
.fcard__ink{
  position:absolute;bottom:0;height:2px;left:0;width:0;
  background:var(--grad);border-radius:2px;
  transform:translateX(0);
  transition:transform .34s var(--ease),width .34s var(--ease);
  pointer-events:none;
}
/* panels are stacked in a single grid cell: the card always keeps the
   height of the tallest panel, so switching tabs never shifts the page */
.fcard__panels{
  display:grid;padding:0;overflow:hidden;
  transition:height .32s var(--ease);
}
.fpanel{
  grid-area:1/1;align-self:start;padding:16px 18px 18px;
  visibility:hidden;opacity:0;pointer-events:none;transform:translateY(4px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s linear .26s;
}
.fpanel.is-active{
  visibility:visible;opacity:1;pointer-events:auto;transform:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s linear 0s;
}
.fcard ul li{margin-bottom:8px}
.fcard ul li:last-child{margin-bottom:0}
.fcard ul a{font-size:13px;color:var(--muted);transition:.2s}
.fcard ul a:hover{color:var(--brand);padding-inline-start:3px}
@media(max-width:480px){
  .fcard__bar{padding:6px 6px 0;gap:2px;overflow-x:auto;scrollbar-width:none}
  .fcard__bar::-webkit-scrollbar{display:none}
  .ftab{flex:1 1 auto;min-width:max-content;padding:8px 9px 10px;font-size:11px;letter-spacing:.06em}
  html[dir="rtl"] .ftab{font-size:14.6px;padding:8px 9px 10px}
  .fpanel{padding:14px 15px 16px}
}
@media(prefers-reduced-motion:reduce){
  .fpanel{transition:none;transform:none}
  .fcard__ink{transition:none}
}
.footer__brand p{font-size:13px;color:var(--muted);margin:12px 0 16px;max-width:34ch}
.footer h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:14px;font-weight:800}
html[dir="rtl"] .footer h4{letter-spacing:0;font-size:17.9px}
.footer ul li{margin-bottom:9px}
.footer ul a{font-size:13px;color:var(--muted);transition:.2s}
.footer ul a:hover{color:var(--brand);padding-inline-start:3px}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--surface-3);color:var(--text-2);transition:.2s}
.socials a:hover{background:var(--grad);color:#fff;transform:translateY(-2px)}
.socials svg{width:16px;height:16px;fill:currentColor}
.footer__bottom{border-top:1px solid var(--line);padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.footer__bottom a:hover{color:var(--brand)}
.footer__contact li{display:flex;gap:9px;font-size:12.5px;color:var(--muted);margin-bottom:10px;align-items:flex-start}
.footer__contact svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.8;flex-shrink:0;margin-top:2px}

/* ============================ ARTICLE ================================= */
.article{padding:26px 0 0}
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-bottom:16px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;opacity:.5}
html[dir="rtl"] .breadcrumb svg{transform:rotate(180deg)}
.article__grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start}
.article__head{max-width:860px}
.article__head h1{font-size:clamp(25px,3.4vw,40px);line-height:1.3;margin:12px 0 14px;letter-spacing:-.03em}
html[dir="rtl"] .article__head h1{font-size:clamp(26px,3.4vw,40px);line-height:1.7;letter-spacing:0}
.article__excerpt{font-size:16.5px;color:var(--text-2);line-height:1.7;margin-bottom:18px;font-weight:500}
html[dir="rtl"] .article__excerpt{font-size:19.6px;line-height:1.95}
.article__meta{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-block:1px solid var(--line);flex-wrap:wrap}
.author{display:flex;align-items:center;gap:10px}
.author__av{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;flex-shrink:0}
.author__info{line-height:1.3}
.author__info b{font-size:13px;display:block}
.author__info span{font-size:11px;color:var(--muted)}
.share{display:flex;align-items:center;gap:6px}
.share__btn{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface-3);color:var(--text-2);transition:.2s}
.share__btn:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}
.share__btn svg{width:15px;height:15px;fill:currentColor}
.article__cover{margin:22px 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--surface-3)}
.article__cover img{width:100%;max-height:520px;object-fit:cover}
.article__cover figcaption{font-size:11.5px;color:var(--muted);padding:9px 14px;background:var(--surface);border-top:1px solid var(--line)}
.article__body{font-size:16px;line-height:1.85;color:var(--text-2);max-width:820px}
html[dir="rtl"] .article__body{font-size:19px;line-height:2.05}
.article__body p{margin:0 0 1.35em}
.article__body h2{font-size:22px;color:var(--text);margin:1.6em 0 .6em}
html[dir="rtl"] .article__body h2{font-size:25.8px;line-height:1.7}
.article__body blockquote{margin:1.6em 0;padding:16px 22px;border-inline-start:4px solid var(--brand);background:var(--grad-soft);border-radius:0 14px 14px 0;font-size:16.5px;font-weight:600;color:var(--text)}
html[dir="rtl"] .article__body blockquote{border-radius:14px 0 0 14px}
.article__body ul{margin:0 0 1.3em;padding-inline-start:20px;list-style:disc}
.article__body li{margin-bottom:.5em}
.tag-row{display:flex;gap:7px;flex-wrap:wrap;margin:24px 0 8px}
.tag{padding:5px 12px;border-radius:99px;background:var(--surface-3);font-size:11.5px;font-weight:700;color:var(--text-2)}
.tag:hover{background:var(--grad-soft);color:var(--brand)}
.article__side{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:18px}
.side-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.side-box h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;color:var(--brand);display:flex;align-items:center;gap:7px}
html[dir="rtl"] .side-box h3{letter-spacing:0;font-size:16.8px}
.side-box h3::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--grad)}
.side-box .mini__thumb{width:64px;height:54px}
.side-box .mini h3{font-size:12.5px}
.side-ad{border-radius:var(--radius);padding:22px;text-align:center;background:var(--grad-soft);border:1px dashed var(--line-strong)}
.side-ad span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.side-ad b{display:block;font-size:15px;margin-top:6px;color:var(--brand)}

/* Related */
.related{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}

/* ============================ SEARCH ================================== */
.search-overlay{position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px;opacity:0;pointer-events:none;transition:.25s}
.search-overlay.open{opacity:1;pointer-events:auto}
.search-box{width:100%;max-width:680px}
.search-box form{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:6px 8px 6px 18px;box-shadow:var(--shadow-lg)}
html[dir="rtl"] .search-box form{padding:6px 18px 6px 8px}
.search-box input{flex:1;border:0;background:none;font-size:17px;padding:12px 0;min-width:0;font-weight:600}
.search-box input:focus{outline:none}
.search-results{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;max-height:56vh;overflow:auto;box-shadow:var(--shadow)}
.search-results:empty{display:none}
.search-results a{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:center}
.search-results a:last-child{border-bottom:0}
.search-results a:hover{background:var(--surface-3)}
.search-results img{width:56px;height:46px;border-radius:8px;object-fit:cover;flex-shrink:0}
.search-results b{font-size:13.5px;display:block;line-height:1.4}
.search-results span{font-size:11px;color:var(--muted)}
.search-hint{text-align:center;color:var(--muted);font-size:12px;margin-top:14px}

/* Page header */
.page-head{padding:30px 0 6px}
.page-head h1{font-size:clamp(26px,4vw,38px);margin-bottom:6px}
.page-head p{color:var(--muted);font-size:16px;margin:0}
.page-head .chip{margin-bottom:10px}

/* Empty state */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty svg{width:48px;height:48px;stroke:var(--line-strong);fill:none;stroke-width:1.5;margin:0 auto 14px}
.empty h3{color:var(--text);font-size:17px;margin-bottom:6px}

/* Toast */
.toast-wrap{position:fixed;bottom:22px;inset-inline-end:22px;z-index:500;display:flex;flex-direction:column;gap:9px;max-width:340px}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--accent);
  border-radius:12px;padding:12px 15px;box-shadow:var(--shadow-lg);font-size:13px;font-weight:600;animation:toastIn .3s var(--ease)}
.toast--ok{border-inline-start-color:#16A34A}
.toast--err{border-inline-start-color:#E23D5B}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

/* Mobile drawer — compact card: content-sized panel, 2-column category chips, small paired buttons */
.drawer{position:fixed;inset:0;z-index:150;pointer-events:none;visibility:hidden;transition:visibility 0s linear .34s}
.drawer.open{visibility:visible;transition:visibility 0s linear 0s}
.drawer__scrim{position:absolute;inset:0;background:rgba(10,4,16,.5);opacity:0;transition:.3s}
.drawer__panel{position:absolute;top:0;inset-inline-start:0;width:min(88vw,330px);max-height:100dvh;background:var(--surface);
  transform:translateX(-105%);transition:.32s var(--ease);display:flex;flex-direction:column;overflow:auto;
  box-shadow:var(--shadow-lg);border-end-end-radius:22px}
html[dir="rtl"] .drawer__panel{transform:translateX(105%)}
.drawer.open{pointer-events:auto}
.drawer.open .drawer__scrim{opacity:1}
.drawer.open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 14px;border-bottom:1px solid var(--line)}
html[dir="rtl"] .drawer__head{padding:10px 14px 10px 12px}
.drawer__head .brand{gap:9px}
.drawer__head .brand__name b{font-size:15px}
html[dir="rtl"] .drawer__head .brand__name b{font-size:20px;line-height:1.55}
.drawer__head .icon-btn{width:34px;height:34px;border-radius:10px;background:var(--surface-3)}
.drawer__head .icon-btn svg{width:17px;height:17px}
.drawer__nav{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.drawer__nav a{
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:38px;padding:6px 8px;
  border-radius:10px;font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3;
  background:var(--surface-2,var(--surface-3));border:1px solid var(--line);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.drawer__nav a:hover{border-color:var(--brand);color:var(--brand)}
.drawer__nav a.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(162,28,125,.25)}
.drawer__nav a:last-child:nth-child(odd){grid-column:1/-1}
html[dir="rtl"] .drawer__nav a{font-family:var(--font-dv-display);font-weight:700;font-size:17.9px;letter-spacing:0;line-height:1.55;min-height:40px}
.drawer__foot{padding:0 12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drawer__foot .btn{padding:8px 10px;font-size:13px;border-radius:10px;font-weight:700;box-shadow:none;min-height:36px}
.drawer__foot .btn--primary{box-shadow:0 3px 10px rgba(162,28,125,.25)}
html[dir="rtl"] .drawer__foot .btn{font-family:var(--font-dv-display);font-size:16.8px;line-height:1.5}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,var(--line) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px}
@keyframes shimmer{to{background-position:-200% 0}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* the reveal class must not swallow the card's hover lift */
.reveal.in.card:hover{transform:translateY(-4px)}

/* ============================ RESPONSIVE ============================== */
@media(max-width:1200px){
  /* English labels are wider than Thaana at this weight — hand over to the drawer
     before they can ever clip. Dhivehi keeps the inline nav down to 960px. */
  html[dir="ltr"] .header__nav{display:none}
  html[dir="ltr"] .menu-toggle{display:grid}
}
@media(max-width:980px){
  /* Dhivehi needs a touch more room before the drawer takes over */
  html[dir="rtl"] .header__nav{display:none}
  html[dir="rtl"] .menu-toggle{display:grid}
}
@media(max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .article__grid{grid-template-columns:minmax(0,1fr) 290px;gap:24px}
}
@media(max-width:960px){
  .header__nav{display:none}
  .menu-toggle{display:grid}
  /* hamburger | centred logo | actions — a true 3-column bar, no dead gap */
  .header__in{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
  .menu-toggle{justify-self:start}
  .brand{justify-self:center;margin:0;min-width:0}
  .brand__name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header__actions{margin-inline-start:0;justify-self:end}
  .hero__grid{grid-template-columns:1fr}
  .hero-main{min-height:400px}
  .hero-side{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:6px 16px}
  .hero-side--tabs{display:flex;flex-direction:column;padding:0}
  .hero-side__head{grid-column:1/-1}
  .hero-side .mini:nth-child(even){border-inline-start:1px solid var(--line);padding-inline-start:14px}
  .hero-side .mini:nth-last-child(2){border-bottom:0}
  .split{grid-template-columns:1fr}
  .newsletter{grid-template-columns:1fr;padding:30px 26px;gap:18px}
  .footer__grid{grid-template-columns:1fr;gap:26px}
  .article__grid{grid-template-columns:1fr}
  .article__side{position:static;flex-direction:row;flex-wrap:wrap}
  .article__side>*{flex:1 1 280px}
  .topbar__socials{display:none}
}
@media(max-width:760px){
  body{font-size:15px}
  .container{padding:0 15px}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .hero-main{min-height:380px;border-radius:20px}
  .hero-main__body{padding:22px}
  .hero-main p{display:none}
  .section{padding:26px 0 4px}
  .section__title{font-size:18.5px}
  html[dir="rtl"] .section__title{font-size:22.4px}
  .card--row{flex-direction:column}
  .card--row .card__media{width:100%;aspect-ratio:16/10;min-height:0}
  .article__head h1{font-size:25px}
  .topbar__date{font-size:10.5px;letter-spacing:.01em}
  .topbar__in{min-height:30px;gap:8px}
  .topbar__left{gap:10px}
  .topbar__right{gap:4px}
  .pill-btn{padding:4px 9px;font-size:10.5px;gap:5px;border-radius:99px}
  .pill-btn svg{width:12px;height:12px}
  .ticker__in{height:36px}
  .footer__grid{grid-template-columns:1fr;gap:22px}
  .footer{padding-top:30px}
  .ticker__label{font-size:10px;padding:6px 10px;margin-inline-end:10px}
  .ticker__item{font-size:12.5px}
  .ticker__in{height:40px}
  .newsletter h2{font-size:22px}
  .newsletter form{flex-direction:column;background:transparent;border:0;padding:0;gap:9px}
  .newsletter input{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:12px 14px}
  .newsletter .btn{padding:12px}
  .brand__logo{width:38px;height:38px}
  .brand__name b{font-size:15.5px}
  html[dir="rtl"] .brand__name b{font-size:17.6px;line-height:1.55}
  .brand__name span{font-size:8.5px}
  .header__actions .btn--primary{display:none}
  .article__side{flex-direction:column;flex-wrap:nowrap}
  .article__side>*{flex:1 1 auto}
  /* an ad must keep its own height here, otherwise the column squeezes the
     creative down to the height of its "advertisement" label */
  .article__side>.ad{flex:none}
}
@media(max-width:520px){
  .grid--3,.grid--4,.grid--2{grid-template-columns:1fr}
  .hero-side{grid-template-columns:1fr}
  .hero-side .mini:nth-child(even){border-inline-start:0;padding-inline-start:0}
  .hero-side .mini:last-child{border-bottom:0}
  .hero-main{min-height:340px}
  .hero-main h1{font-size:21px}
  .topbar__live{display:none}
  .brand__name span{display:none}
  .card__media{aspect-ratio:16/9}
  .search-box input{font-size:15px}
  .footer__bottom{justify-content:center;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .header,.topbar,.ticker,.footer,.article__side,.share,.newsletter{display:none!important}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   THAANA TYPOGRAPHY — final pass, native Maldivian metrics
   Headlines: MV A Waheed 700 · Body: AK Rasmee 400 · Lead: MV Randhoo 400
   ========================================================================== */
html[dir="rtl"] .hero-main h1{
  font-family:var(--font-dv-display);line-height:1.5;letter-spacing:0;
  font-size:clamp(22px,2.6vw,34px);font-weight:700;padding-block:.04em;
}
html[dir="rtl"] .hero-main p{font-family:var(--font-dv-lead);line-height:1.65;font-size:16.8px}
html[dir="rtl"] .mini h3{line-height:1.55;-webkit-line-clamp:3;padding-block-end:2px}
html[dir="rtl"] .card h3{line-height:1.55;padding-block-end:2px}
html[dir="rtl"] .card p{line-height:1.75;padding-block-end:2px}
html[dir="rtl"] .section__title{font-family:var(--font-dv-display);line-height:1.5;font-weight:700}
html[dir="rtl"] .hero-side__head h2{line-height:1.5}
html[dir="rtl"] .article__head h1{font-family:var(--font-dv-display);line-height:1.5;font-weight:700;padding-block:.05em}
html[dir="rtl"] .article__excerpt{font-family:var(--font-dv-lead);line-height:1.65;font-size:20.2px}
html[dir="rtl"] .article__body{line-height:1.85;font-size:19.6px}
html[dir="rtl"] .article__body p{line-height:1.85;margin-bottom:1.05em}
html[dir="rtl"] .article__body h2,
html[dir="rtl"] .article__body h3{font-family:var(--font-dv-display);line-height:1.5;font-weight:700;letter-spacing:0;margin:1.4em 0 .55em}
html[dir="rtl"] .article__body li{line-height:1.85}
html[dir="rtl"] .article__body blockquote{font-family:var(--font-dv-lead);line-height:1.75}
html[dir="rtl"] .ticker__item{line-height:1.55}
html[dir="rtl"] .footer p,html[dir="rtl"] .footer a,html[dir="rtl"] .footer li{line-height:1.75}
html[dir="rtl"] .newsletter p{line-height:1.75}
html[dir="rtl"] .search-result h3{line-height:1.55}
html[dir="rtl"] .drawer a{line-height:1.7}
html[dir="rtl"] .nav a{line-height:1.55}
html[dir="rtl"] .brand__name b{font-family:var(--font-dv-display);line-height:1.5;font-weight:700;letter-spacing:0;font-synthesis-weight:none;font-feature-settings:"ccmp" 1,"mark" 1,"mkmk" 1,"kern" 1;overflow-wrap:normal}

/* =======================================================================
   APP INSTALL PROMPT — first-visit bottom sheet / centred dialog
   ======================================================================= */
.appprompt{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center}
.appprompt[hidden]{display:none}
.appprompt__scrim{position:absolute;inset:0;background:rgba(18,6,24,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .28s var(--ease)}
.appprompt.is-open .appprompt__scrim{opacity:1}

.appprompt__card{
  position:relative;z-index:1;width:100%;max-width:430px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);
  border-radius:26px 26px 0 0;
  padding:26px 22px calc(20px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -18px 60px rgba(20,6,26,.28);
  transform:translateY(102%);
  transition:transform .38s var(--ease);
  max-height:92dvh;overflow-y:auto;
}
.appprompt.is-open .appprompt__card{transform:translateY(0)}

.appprompt__x{
  position:absolute;inset-inline-end:12px;top:12px;
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  color:var(--muted);background:var(--surface-2);transition:background .18s,color .18s;
}
.appprompt__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.appprompt__x:hover{background:var(--surface-3);color:var(--text)}

.appprompt__step{display:flex;flex-direction:column;align-items:center;text-align:center}
.appprompt__step[hidden]{display:none}

.appprompt__icon{position:relative;margin:6px 0 16px}
.appprompt__icon img{
  width:96px;height:96px;border-radius:23px;object-fit:cover;background:#fff;
  box-shadow:0 10px 26px rgba(162,28,125,.22),0 2px 6px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.05);
}
.appprompt__badge{
  position:absolute;inset-inline-end:-6px;bottom:-6px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--grad,linear-gradient(120deg,#A21C7D,#B3248B 45%,#00C2D1 130%));
  box-shadow:0 4px 12px rgba(162,28,125,.4);border:2.5px solid var(--surface);
}
.appprompt__badge svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.appprompt__title{font-size:21px;line-height:1.35;font-weight:800;letter-spacing:-.02em;margin:0 0 7px;color:var(--text)}
.appprompt__text{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 20px;max-width:34ch}

.appprompt__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-bottom:6px}

.appprompt__btn{
  display:flex;align-items:center;gap:10px;justify-content:center;
  padding:12px 12px;border-radius:14px;border:1px solid transparent;
  transition:transform .16s var(--ease),box-shadow .2s,background .2s,border-color .2s;
  text-align:start;
}
.appprompt__btn svg{width:22px;height:22px;flex:none;fill:currentColor}
.appprompt__btn-txt{display:flex;flex-direction:column;line-height:1.15}
.appprompt__btn-txt b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.appprompt__btn-txt small{font-size:10.5px;font-weight:600;opacity:.72;letter-spacing:.01em}

.appprompt__btn--android{background:#101418;color:#fff;box-shadow:0 6px 16px rgba(16,20,24,.22)}
.appprompt__btn--android:hover{background:#1b2127;transform:translateY(-1px)}
.appprompt__btn--ios{background:var(--surface-2);color:var(--text);border-color:var(--line-strong)}
.appprompt__btn--ios:hover{background:var(--surface-3);transform:translateY(-1px)}
.appprompt__btn:active{transform:scale(.985)}

.appprompt__later{
  margin-top:12px;padding:9px 14px;border-radius:10px;
  font-size:12.5px;font-weight:700;color:var(--muted);
  transition:color .18s,background .18s;
}
.appprompt__later:hover{color:var(--text);background:var(--surface-2)}

/* step 2 — instructions */
.appprompt__howhead{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:16px;justify-content:center;position:relative}
.appprompt__back{
  position:absolute;inset-inline-start:0;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-2);color:var(--text);
}
.appprompt__back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.appprompt__howhead .appprompt__title{margin:0;font-size:18px}

.appprompt__steps{
  list-style:none;counter-reset:s;margin:0 0 8px;padding:0;width:100%;
  display:flex;flex-direction:column;gap:10px;text-align:start;
}
.appprompt__steps li{
  counter-increment:s;position:relative;display:flex;gap:12px;align-items:flex-start;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;font-size:13.5px;line-height:1.55;color:var(--text-2);
}
.appprompt__steps li::before{
  content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11.5px;font-weight:800;
  color:#fff;background:var(--brand);margin-top:1px;
}
.appprompt__steps li b{color:var(--text);font-weight:800}

/* desktop: centred dialog */
@media (min-width:640px){
  .appprompt{align-items:center;padding:24px}
  .appprompt__card{border-radius:26px;transform:translateY(16px) scale(.97);opacity:0;transition:transform .3s var(--ease),opacity .3s var(--ease);max-height:88vh}
  .appprompt.is-open .appprompt__card{transform:none;opacity:1}
}

/* Thaana needs the Dhivehi face + roomier leading inside the sheet */
html[dir="rtl"] .appprompt__title,
html[dir="rtl"] .appprompt__text,
html[dir="rtl"] .appprompt__later,
html[dir="rtl"] .appprompt__steps li,
html[dir="rtl"] .appprompt__btn-txt b,
html[dir="rtl"] .appprompt__btn-txt small{font-family:var(--font-dv)}
html[dir="rtl"] .appprompt__title{line-height:1.5;font-weight:700;letter-spacing:0}
html[dir="rtl"] .appprompt__text{line-height:1.85;letter-spacing:0}
html[dir="rtl"] .appprompt__steps li{line-height:1.9;letter-spacing:0}
html[dir="rtl"] .appprompt__btn-txt b{line-height:1.5;letter-spacing:0}

@media (prefers-reduced-motion:reduce){
  .appprompt__card,.appprompt__scrim{transition:none}
}

/* highlight the visitor's own platform */
.appprompt__btn.is-primary{box-shadow:0 0 0 2px var(--brand),0 8px 20px rgba(162,28,125,.22)}
.appprompt__btn--ios.is-primary{background:var(--surface-3)}

/* ====================== LAYOUT STABILITY (CLS) ========================
   The static footer lives outside #app, so before the SPA renders it can
   sit inside the first viewport and then jump down when content arrives.
   Reserving a viewport of space keeps the footer below the fold from the
   very first paint — zero layout shift, no visual difference.          */
#app{display:block;min-height:100vh;min-height:100svh}
.pill-btn{min-height:26px;line-height:1}
@media(max-width:760px){.pill-btn{min-height:24px}}

/* ======================= HERO SLIDER (lead rotator) ===================
   Reuses the .hero-main shell so all the existing type, gradient and RTL
   rules apply unchanged. Slides are stacked and cross-faded with opacity
   only; the incoming image gets a very slow Ken-Burns scale. Both are
   compositor-only properties, so nothing reflows while it animates.     */
.hero-main.hero-slider{display:block;padding:0;background:var(--surface-3)}
.hero-main.hero-slider::after{display:none}
.hero-slider__stage{position:absolute;inset:0}
.hero-slide{
  position:absolute;inset:0;display:flex;align-items:flex-end;z-index:1;
  text-decoration:none;color:#fff;
  opacity:0;visibility:hidden;
  transition:opacity .85s cubic-bezier(.22,1,.36,1),visibility 0s linear .85s;
}
.hero-slide.is-active{
  opacity:1;visibility:visible;z-index:2;
  transition:opacity .85s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;
}
.hero-slide::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,4,16,.94) 0%,rgba(10,4,16,.62) 38%,rgba(10,4,16,.05) 72%);
}
.hero-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.075);transition:transform 9s linear;
}
.hero-slide.is-active img{transform:scale(1)}
.hero-slide .hero-main__body{position:relative;z-index:1}

/* control cluster — top inline-end so it never collides with the headline */
.hero-slider__ctl{
  position:absolute;z-index:6;top:16px;inset-inline-end:16px;
  display:flex;align-items:center;gap:4px;padding:4px;
  border-radius:99px;
  /* fully transparent: the cover photo shows straight through the pill */
  background:transparent;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:none;
  /* icons sit on unpredictable photo tones, so give them a soft halo */
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.hero-slider__nav{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:transparent;border:0;padding:0;flex-shrink:0;
  transition:background .22s var(--ease),transform .22s var(--ease);
}
.hero-slider__nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.hero-slider__nav:hover{background:rgba(10,4,16,.28)}
.hero-slider__nav:active{transform:scale(.9)}
html[dir="rtl"] .hero-slider__nav svg{transform:scaleX(-1)}
.hero-slider__dots{display:flex;align-items:center;gap:5px;padding:0 2px}
.hero-dot{
  width:16px;height:16px;border-radius:99px;display:grid;place-items:center;
  background:transparent;border:0;padding:0;transition:width .34s var(--ease);
}
.hero-dot span{
  display:block;width:6px;height:6px;border-radius:99px;
  background:rgba(255,255,255,.92);
  /* dark ring + halo keeps the dot readable on bright photos */
  box-shadow:0 0 0 1px rgba(10,4,16,.42),0 1px 4px rgba(10,4,16,.55);
  transition:width .34s var(--ease),background .3s var(--ease),box-shadow .3s;
}
.hero-dot.is-active{width:24px}
.hero-dot.is-active span{
  width:100%;height:6px;background:var(--grad);
  box-shadow:0 2px 8px -2px color-mix(in srgb,var(--brand) 70%,transparent);
}
.hero-dot:hover span{background:#fff}

/* thin progress line hugging the bottom edge of the card */
.hero-slider__bar{
  position:absolute;z-index:6;inset-inline:0;bottom:0;height:3px;
  background:rgba(255,255,255,.12);overflow:hidden;pointer-events:none;
}
.hero-slider__bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  transform:scaleX(0);transform-origin:left;
}
html[dir="rtl"] .hero-slider__bar i{transform-origin:right}
.hero-slider.is-running .hero-slider__bar i{
  animation:heroBar var(--hero-interval,10s) linear forwards;
}
@keyframes heroBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:760px){
  .hero-slider__ctl{top:12px;inset-inline-end:12px;gap:2px;padding:3px}
  .hero-slider__nav{width:24px;height:24px}
  .hero-dot{width:14px;height:14px}
  .hero-dot.is-active{width:20px}
  .hero-slider__bar{height:2px}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
  .hero-slide img{transition:none;transform:none}
  .hero-slider.is-running .hero-slider__bar i{animation:none;transform:scaleX(1)}
}

/* ==================== EXPLORE: index + one row per category ===========
   A chip index at the top lets readers jump straight to a section, then
   each section gets its own labelled row: four photo cards plus a rail of
   the next headlines. Rows use content-visibility so off-screen sections
   cost nothing to paint, and every image is a lazy 520px thumb.        */
.catx__index{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 22px}
.catx__chip{
  appearance:none;display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);color:var(--text-2);cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:800;line-height:1;
  transition:transform .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
html[dir="rtl"] .catx__chip{font-family:var(--font-dv-display);font-size:15.7px;font-weight:800;letter-spacing:0}
.catx__chip i{width:7px;height:7px;border-radius:50%;background:var(--cat);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cat) 18%,transparent)}
.catx__chip b{font-size:10.5px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.catx__chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--cat) 45%,var(--line));
  color:var(--brand);background:var(--surface-2)}
.catx__chip:hover b{color:var(--brand)}
.catx__chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.catx__rows{display:flex;flex-direction:column;gap:26px}
.catrow{
  position:relative;padding:18px 0 22px;border-top:1px solid var(--line);
  scroll-margin-top:96px;
  content-visibility:auto;contain-intrinsic-size:auto 430px;
}
.catrow:first-child{border-top:0;padding-top:0}
.catx__rows.is-jumping .catrow{content-visibility:visible}
.catrow__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.catrow__id{display:inline-flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:inherit}
.catrow__dot{
  width:10px;height:10px;border-radius:50%;background:var(--cat);flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cat) 16%,transparent);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.catrow__id:hover .catrow__dot{transform:scale(1.18);box-shadow:0 0 0 6px color-mix(in srgb,var(--cat) 20%,transparent)}
.catrow__name{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--text);line-height:1.2;
  transition:color .22s var(--ease)}
html[dir="rtl"] .catrow__name{font-family:var(--font-dv-display);font-size:24.6px;font-weight:800;letter-spacing:0}
.catrow__id:hover .catrow__name{color:var(--brand)}
.catrow__count{
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:4px 9px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--line);white-space:nowrap;
}
html[dir="rtl"] .catrow__count{letter-spacing:0;text-transform:none;font-size:13.4px;font-weight:700}
.catrow__all{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);text-decoration:none;transition:gap .2s var(--ease),color .2s var(--ease);
}
html[dir="rtl"] .catrow__all{letter-spacing:0;text-transform:none;font-size:14.6px;font-family:var(--font-dv-display)}
.catrow__all svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
html[dir="rtl"] .catrow__all svg{transform:scaleX(-1)}
.catrow__all:hover{gap:11px}
.catrow__all:hover svg{transform:translateX(2px)}
html[dir="rtl"] .catrow__all:hover svg{transform:scaleX(-1) translateX(2px)}

.catrow__body{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:18px;align-items:stretch}
.catrow__body--norail{grid-template-columns:minmax(0,1fr)}
.catrow__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.catrow__body[data-n="1"] .catrow__cards{grid-template-columns:minmax(0,1fr);max-width:560px}
/* World: two hero cards with two independent split lists beside them */
.catrow__body--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 232px 232px;gap:16px}
.catrow__body--duo .catrow__cards{grid-column:span 2;grid-template-columns:repeat(2,minmax(0,1fr))}
.catrow__body--duo .catrow__cards .card h3{font-size:16px;-webkit-line-clamp:3}
html[dir="rtl"] .catrow__body--duo .catrow__cards .card h3{font-size:19.6px}
.catrow__body--duo .catrow__cards .card p{-webkit-line-clamp:3}
.catrow__rail--b{border-inline-start:1px solid var(--line);padding-inline-start:16px}
.catrow__body--duo .catrow__rail{border:0;padding-inline-start:0}
.catrow__body--duo .catrow__rail--b{border-inline-start:1px solid var(--line);padding-inline-start:16px}
.catrow__body--duo .catrow__list .mini{gap:10px;padding:10px 0}
.catrow__body--duo .mini__thumb{width:56px;height:56px;flex:0 0 56px}
.catrow__body--duo .mini h3{font-size:12.5px;-webkit-line-clamp:2}
html[dir="rtl"] .catrow__body--duo .mini h3{font-size:15.1px;line-height:1.6}
.catrow__body--duo .mini__cat{font-size:8.5px}
@media(max-width:1180px){
  /* cards take the full width, the two split lists sit side by side below */
  .catrow__body--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:18px}
  .catrow__body--duo .catrow__cards{grid-column:1/-1}
  .catrow__body--duo .catrow__rail{border:0;padding-inline-start:0}
  .catrow__body--duo .catrow__rail--b{border:0;padding-inline-start:0}
  .catrow__body--duo .catrow__rail .catrow__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px}
  .catrow__body--duo .catrow__rail .mini{padding:8px 0}
}
@media(max-width:900px){
  .catrow__body--duo .catrow__cards{grid-column:span 2;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .catrow__body--duo{grid-template-columns:minmax(0,1fr)}
  .catrow__body--duo .catrow__cards{grid-template-columns:1fr}
  .catrow__body--duo .catrow__rail .catrow__list{display:flex;flex-direction:column}
}
.catrow__body[data-n="2"] .catrow__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.catrow__body[data-n="3"] .catrow__cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.catrow__cards .card h3{font-size:14.5px;-webkit-line-clamp:3}
html[dir="rtl"] .catrow__cards .card h3{font-size:17.4px;line-height:1.65}
.catrow__cards .card p{font-size:12px;-webkit-line-clamp:2}
.catrow__cards .card__body{padding:13px 14px 14px}
.catrow__cards .card__foot{font-size:10.5px}
.catrow__cards .card__foot .read{font-size:11px}

.catrow__rail{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  padding:14px 16px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
}
.catrow__list{display:flex;flex-direction:column;flex:1}
.catrow__list .mini{padding:11px 0}
.catrow__list .mini__thumb{width:74px;height:58px}
.catrow__list .mini h3{font-size:12.5px}
html[dir="rtl"] .catrow__list .mini h3{font-size:15.7px;line-height:1.6}
.catrow__more{
  display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:4px;padding-top:11px;border-top:1px dashed var(--line);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);text-decoration:none;
}
html[dir="rtl"] .catrow__more{letter-spacing:0;text-transform:none;font-size:14.6px;font-family:var(--font-dv-display)}
.catrow__more svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .catrow__more svg{transform:scaleX(-1)}

@media(max-width:1180px){
  .catrow__body{grid-template-columns:minmax(0,1fr)}
  .catrow__rail{padding:6px 18px 8px}
  .catrow__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
  .catrow__list .mini{border-bottom:0;align-items:center}
  .catrow__list .mini:not(:last-child){border-inline-end:1px solid var(--line);padding-inline-end:20px}
  .catrow__more{justify-content:flex-start;gap:10px}
}
@media(max-width:900px){
  .catrow__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catrow__body[data-n="3"] .catrow__cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .catrow__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catrow__list .mini:nth-child(2n){border-inline-end:0;padding-inline-end:0}
  .catrow__list .mini:nth-child(2n+1){border-inline-end:1px solid var(--line);padding-inline-end:20px}
}
@media(max-width:620px){
  .catx__index{gap:6px;margin-bottom:18px}
  .catx__chip{padding:7px 11px;font-size:11.5px}
  html[dir="rtl"] .catx__chip{font-size:14.6px}
  .catrow{padding:16px 0 18px}
  .catrow__name{font-size:17px}
  html[dir="rtl"] .catrow__name{font-size:21.3px}
  .catrow__all{font-size:10.5px}
  .catrow__cards{grid-template-columns:1fr;gap:14px}
  .catrow__body[data-n="2"] .catrow__cards,
  .catrow__body[data-n="3"] .catrow__cards{grid-template-columns:1fr}
  .catrow__list{display:flex}
  .catrow__list .mini:not(:last-child){border-inline-end:0;padding-inline-end:0}
}
@media(prefers-reduced-motion:reduce){
  .catx__chip,.catrow__dot,.catrow__all,.catrow__all svg,.catrow__name{transition:none}
  .catx__chip:hover{transform:none}
}

/* ==================== LATEST NEWS: 3 cards + split list ================
   Three full photo cards in a row, with one bordered "split__list" rail
   beside them carrying the next four headlines. Everything is a plain
   grid, so the row collapses 3 -> 2 -> 1 without any JS.               */
.latestx__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 344px;
  gap:20px;
  align-items:start;
}
.latestx__cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.latestx__cards>.card{height:100%}

.latestx__side{display:flex;flex-direction:column;gap:10px;min-width:0;height:100%}
.latestx__sidehead{
  display:flex;align-items:center;gap:10px;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  padding-inline-start:2px;
}
html[dir="rtl"] .latestx__sidehead{letter-spacing:0;text-transform:none;font-size:14.6px;font-weight:700}
.latestx__sidehead>span{white-space:nowrap;min-width:0}
.latestx__sidehead>i{min-width:14px}
.latestx__sidehead i{
  flex:1;height:1px;border-radius:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 42%,transparent),transparent);
}
html[dir="rtl"] .latestx__sidehead i{
  background:linear-gradient(270deg,color-mix(in srgb,var(--brand) 42%,transparent),transparent);
}
.latestx__side .split__list{
  flex:1;padding:2px 16px;
  background:var(--surface);
}
.latestx__side .split__list .mini{padding:13px 0}
.latestx__side .split__list .mini__thumb{width:86px;height:66px}
.latestx__side .split__list .mini h3{font-size:13px}
html[dir="rtl"] .latestx__side .split__list .mini h3{font-size:15.7px;line-height:1.7}

@media(max-width:1180px){
  .latestx__grid{grid-template-columns:1fr;gap:16px}
  /* the rail becomes a single row of three compact headlines under the cards */
  .latestx__side .split__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:20px;padding:6px 18px}
  .latestx__side .split__list .mini{border-bottom:0;align-items:center}
  .latestx__side .split__list .mini:not(:last-child){border-inline-end:1px solid var(--line);padding-inline-end:20px}
}
@media(max-width:900px){
  .latestx__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .latestx__cards{grid-template-columns:1fr;gap:14px}
  .latestx__side .split__list{display:flex;padding:2px 15px}
  .latestx__side .split__list .mini{align-items:flex-start}
  .latestx__side .split__list .mini:not(:last-child){border-inline-end:0;padding-inline-end:0;border-bottom:1px solid var(--line)}
  .latestx__side .split__list .mini:last-child{border-bottom:0}
}

/* --- rail variants: Business (3 cards) and Sports (4 cards) ---------- */
.latestx__grid--sport{grid-template-columns:minmax(0,1fr) 296px}
.latestx__grid--sport .latestx__cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.latestx__grid--sport .latestx__cards .card h3{font-size:14.5px;-webkit-line-clamp:3}
html[dir="rtl"] .latestx__grid--sport .latestx__cards .card h3{font-size:17.4px;line-height:1.65}
.latestx__grid--sport .latestx__cards .card p{font-size:12px;-webkit-line-clamp:2}
.latestx__grid--sport .latestx__cards .card__body{padding:13px 14px 14px}
.latestx__grid--sport .latestx__cards .card__foot{font-size:10.5px}
.latestx__grid--sport .latestx__cards .card__foot .read{font-size:11px}
.latestx__grid--sport .latestx__side .split__list .mini{padding:11px 0}
.latestx__grid--sport .latestx__side .split__list .mini__thumb{width:74px;height:58px}
.latestx__grid--sport .latestx__side .split__list .mini h3{font-size:12.5px}

@media(max-width:1180px){
  .latestx__grid--sport{grid-template-columns:1fr}
  .latestx__grid--sport .latestx__cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .latestx__grid--sport .latestx__side .split__list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
  .latestx__grid--sport .latestx__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .latestx__grid--sport .latestx__side .split__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .latestx__grid--sport .latestx__side .split__list .mini:nth-child(2n){border-inline-end:0;padding-inline-end:0}
  .latestx__grid--sport .latestx__side .split__list .mini:nth-child(2n+1){border-inline-end:1px solid var(--line);padding-inline-end:20px}
}
@media(max-width:620px){
  .latestx__grid--sport .latestx__cards{grid-template-columns:1fr}
  .latestx__grid--sport .latestx__side .split__list{display:flex}
  .latestx__grid--sport .latestx__side .split__list .mini{border-inline-end:0!important;padding-inline-end:0!important;
    border-bottom:1px solid var(--line)}
  .latestx__grid--sport .latestx__side .split__list .mini:last-child{border-bottom:0}
}

/* ======================== PHOTO GALLERY (4 cards + rail) ==============
   Frames come from every published news story, so the gallery is a cross
   section of the whole newsroom. Four cards carry the headline and a one
   line caption; the rail holds the next three frames. All animation is
   transform/opacity only, images are lazy 520px thumbs.                */
.galsec__grid{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:18px;align-items:stretch}
.galsec__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}

.gcard{
  position:relative;display:flex;flex-direction:column;min-width:0;
  border-radius:var(--radius);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s var(--ease);
}
.gcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand) 24%,var(--line));
  box-shadow:0 1px 2px rgba(16,8,24,.05),0 22px 44px -26px rgba(16,8,24,.55)}
.gcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gcard__media{position:relative;display:block;aspect-ratio:4/3;flex:1 1 auto;min-height:190px;
  overflow:hidden;background:var(--surface-3)}
.gcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .85s var(--ease),filter .5s var(--ease);will-change:transform}
.gcard:hover .gcard__img{transform:scale(1.07)}
.gcard__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,4,16,.72) 0%,rgba(10,4,16,.18) 42%,rgba(10,4,16,0) 68%);
  opacity:.85;transition:opacity .4s var(--ease)}
.gcard:hover .gcard__veil{opacity:1}
.gcard__media::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;padding:2px;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .38s var(--ease)}
.gcard:hover .gcard__media::after{opacity:1}
.gcard__tag{position:absolute;z-index:2;top:10px;inset-inline-start:10px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  padding:4px 9px;border-radius:99px;background:rgba(12,6,18,.46);
  border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px)}
.gcard__tag i{width:5px;height:5px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 0 2px rgba(255,255,255,.3)}
html[dir="rtl"] .gcard__tag{letter-spacing:0;text-transform:none;font-size:12.3px;font-weight:700}
.gcard__num{position:absolute;z-index:2;bottom:10px;inset-inline-start:11px;
  font-size:10.5px;font-weight:800;color:#fff;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}
.gcard__num i{font-style:normal;opacity:.6;font-weight:700}
.gcard__zoom{position:absolute;z-index:2;top:10px;inset-inline-end:10px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(12,6,18,.44);
  border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);
  opacity:0;transform:scale(.8) rotate(-12deg);
  transition:opacity .34s var(--ease),transform .34s var(--ease),background .3s var(--ease)}
.gcard__zoom svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gcard:hover .gcard__zoom{opacity:1;transform:none;background:var(--grad);border-color:transparent}
.gcard__body{display:flex;flex-direction:column;gap:6px;padding:13px 14px 15px;flex:0 0 auto}
.gcard__title{font-size:14px;font-weight:800;line-height:1.34;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s var(--ease)}
html[dir="rtl"] .gcard__title{font-family:var(--font-dv-display);font-size:17.4px;line-height:1.62;font-weight:800;letter-spacing:0}
.gcard:hover .gcard__title{color:var(--brand)}
html[data-theme="dark"] .gcard:hover .gcard__title{color:var(--brand-2)}
.gcard__desc{font-size:12px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[dir="rtl"] .gcard__desc{font-size:14.6px;line-height:1.8}

.galsec__rail{display:flex;flex-direction:column;gap:10px;min-width:0;
  padding:14px 16px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.galsec__railhead{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-inline-start:2px}
html[dir="rtl"] .galsec__railhead{letter-spacing:0;text-transform:none;font-size:14px}
.galsec__railhead i{flex:1;height:1px;background:var(--line)}
.galsec__list{display:flex;flex-direction:column;flex:1}
.gmini{display:flex;gap:11px;align-items:center;padding:11px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);transition:opacity .2s var(--ease)}
.gmini:last-child{border-bottom:0}
.gmini:hover{opacity:.82}
.gmini__thumb{position:relative;flex:none;width:74px;height:58px;border-radius:9px;overflow:hidden;background:var(--surface-3)}
.gmini__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gmini:hover .gmini__thumb img{transform:scale(1.08)}
.gmini__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.gmini__cat{font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--brand)}
html[dir="rtl"] .gmini__cat{letter-spacing:0;text-transform:none;font-size:12.3px;font-weight:700}
.gmini__title{font-size:12.5px;font-weight:700;line-height:1.42;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[dir="rtl"] .gmini__title{font-family:var(--font-dv-display);font-size:15.7px;line-height:1.6;font-weight:700}
.gmini:hover .gmini__title{color:var(--brand)}
.gmini__num{font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.galsec__all{
  appearance:none;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  margin-top:6px;padding:10px 13px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
html[dir="rtl"] .galsec__all{letter-spacing:0;text-transform:none;font-size:14px}
.galsec__all b{font-size:10px;font-weight:800;padding:2px 7px;border-radius:99px;
  background:var(--grad);color:#fff;font-variant-numeric:tabular-nums}
.galsec__all:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-1px)}
.galsec__all:hover b{background:rgba(255,255,255,.22)}
.galsec__all:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.gcard.reveal{opacity:0;transform:translateY(16px) scale(.985)}
.gcard.reveal.in{opacity:1;transform:none}
.gcard.reveal.in:hover{transform:translateY(-4px)}

@media(max-width:1180px){
  .galsec__grid{grid-template-columns:minmax(0,1fr)}
  .galsec__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
  .gmini{border-bottom:0;align-items:center}
  .gmini:not(:last-child){border-inline-end:1px solid var(--line);padding-inline-end:20px}
  .galsec__all{width:auto;align-self:flex-start}
}
@media(max-width:900px){
  .galsec__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* three frames over two columns leaves one orphan: give it the full
     width as a wide hero so the row never looks broken */
  .galsec__cards .gcard:nth-child(3){grid-column:1/-1}
  .galsec__cards .gcard:nth-child(3) .gcard__media{aspect-ratio:16/8}
  .galsec__cards .gcard:nth-child(3) .gcard__title{font-size:16px}
  html[dir="rtl"] .galsec__cards .gcard:nth-child(3) .gcard__title{font-size:20.2px}
  .galsec__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gmini:nth-child(2n){border-inline-end:0;padding-inline-end:0}
  .gmini:nth-child(2n+1){border-inline-end:1px solid var(--line);padding-inline-end:20px}
}
@media(max-width:620px){
  .galsec__cards{grid-template-columns:1fr;gap:14px}
  .galsec__cards .gcard:nth-child(3) .gcard__media{aspect-ratio:16/10}
  .galsec__list{display:flex}
  .gmini:not(:last-child){border-inline-end:0;padding-inline-end:0}
  .gcard__media{aspect-ratio:16/10}
}
@media(prefers-reduced-motion:reduce){
  .gcard,.gcard__img,.gcard__veil,.gcard__zoom,.gcard__title,.gmini__thumb img,.galsec__all{transition:none}
  .gcard:hover{transform:none}
  .gcard:hover .gcard__img{transform:none}
  .gcard.reveal{opacity:1;transform:none}
}

/* ============================ GALLERY LIGHTBOX ========================
   Created on demand by app.js. Backdrop blur + scale-in on the figure,
   arrows and counter inherit the brand gradient.                      */
.lb{position:fixed;inset:0;z-index:9000;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(6px,2vw,26px);padding:clamp(12px,3vw,40px);
  background:rgba(8,4,14,.82);backdrop-filter:blur(18px) saturate(1.1);
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility .32s}
.lb.open{opacity:1;visibility:visible}
.lb__fig{margin:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  min-width:0;transform:scale(.96);opacity:0;transition:transform .38s var(--ease),opacity .38s var(--ease)}
.lb.open .lb__fig{transform:none;opacity:1}
.lb__img{max-width:min(1180px,88vw);max-height:78vh;width:auto;height:auto;border-radius:14px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);background:rgba(255,255,255,.06);display:block}
.lb__fig.is-swap .lb__img{animation:lbSwap .34s var(--ease)}
@keyframes lbSwap{from{opacity:.35;transform:scale(.985)}to{opacity:1;transform:none}}
.lb__cap{font-size:11px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.lb__x,.lb__nav{appearance:none;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  color:#fff;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(10px);transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s}
.lb__x:hover,.lb__nav:hover{background:var(--grad);border-color:transparent;transform:scale(1.07)}
.lb__x{position:absolute;top:clamp(12px,3vw,26px);inset-inline-end:clamp(12px,3vw,26px);z-index:2}
.lb__nav svg,.lb__x svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .lb__nav--prev svg{transform:scaleX(-1)}
html[dir="rtl"] .lb__nav--next svg{transform:scaleX(-1)}
@media(max-width:700px){
  .lb{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:56px 14px 18px}
  .lb__fig{grid-row:1}
  .lb__img{max-width:100%;max-height:70vh;border-radius:12px}
  .lb__nav{position:absolute;bottom:16px;width:40px;height:40px}
  .lb__nav--prev{inset-inline-start:14px}
  .lb__nav--next{inset-inline-end:14px}
  .lb__cap{position:absolute;bottom:26px;inset-inline:0;text-align:center}
}
.lb__info{display:flex;flex-direction:column;gap:6px;align-items:center;
  max-width:min(760px,86vw);text-align:center}
.lb__title{font-size:15px;font-weight:800;color:#fff;line-height:1.4}
html[dir="rtl"] .lb__title{font-family:var(--font-dv-display);font-size:19px;line-height:1.6}
.lb__desc{font-size:12.5px;color:rgba(255,255,255,.68);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[dir="rtl"] .lb__desc{font-size:15.1px;line-height:1.75}
.lb__row{display:flex;align-items:center;gap:14px;margin-top:2px}
.lb__link{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-decoration:none;padding:6px 12px;border-radius:99px;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);
  transition:background .25s var(--ease),border-color .25s}
.lb__link:hover{background:var(--grad);border-color:transparent}
.lb__link[hidden]{display:none}
html[dir="rtl"] .lb__link{letter-spacing:0;text-transform:none;font-size:14px}

@media(prefers-reduced-motion:reduce){.lb,.lb__fig{transition:none}.lb__fig.is-swap .lb__img{animation:none}}

/* World duo row — re-asserted last so the generic one-column collapse
   at 1180px cannot flatten the two split lists into a single stack. */
@media(max-width:1180px){
  .catrow__body--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:18px}
  .catrow__body--duo .catrow__cards{grid-column:1/-1}
  .catrow__body--duo .catrow__rail{display:flex;flex-direction:column;gap:10px;
    padding:12px 16px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  .catrow__body--duo .catrow__rail--b{border:1px solid var(--line);padding-inline-start:16px}
  .catrow__body--duo .catrow__rail .catrow__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px}
  .catrow__body--duo .catrow__rail .catrow__list .mini{border-bottom:0;align-items:center}
  .catrow__body--duo .catrow__rail .catrow__list .mini:not(:last-child){border-inline-end:1px solid var(--line);padding-inline-end:16px}
}
@media(max-width:900px){
  .catrow__body--duo .catrow__rail .catrow__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .catrow__body--duo{grid-template-columns:minmax(0,1fr)}
  .catrow__body--duo .catrow__cards{grid-template-columns:1fr}
  .catrow__body--duo .catrow__rail .catrow__list{display:flex;flex-direction:column}
  .catrow__body--duo .catrow__rail .catrow__list .mini:not(:last-child){border-inline-end:0;padding-inline-end:0}
}

/* ==========================================================================
   DHIVEHI LEGIBILITY LAYER
   --------------------------------------------------------------------------
   Two problems were measured on the live page, both specific to Thaana:

   1. AK Rasmee ships a single 400 cut. Dozens of small labels asked it for
      700/800; because `font-synthesis-weight:none` is set (to protect the
      fili from smeared synthetic bold), the browser silently served the 400
      face. Ink coverage measured 0.0924 at "400" vs 0.0954 at "700" — i.e.
      the bold was being dropped entirely. At 10-12px that reads as weak and
      soft. Those labels now use MV A Waheed, which is a genuinely heavier
      face (0.1255 ink) and is already the site's label face.
   2. Thaana has a smaller apparent x-height than Latin, so a Dhivehi string
      set at the same px as English looks noticeably smaller. Sizes below are
      lifted so Dhivehi reads at parity with the English build.

   Synthetic bold stays off; weight comes from the real display cut instead.
   ========================================================================== */

/* Crisper rasterisation: `antialiased` forces grayscale smoothing, which
   thins already-light Thaana strokes. `auto` restores subpixel rendering. */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea{
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
  font-size:18.5px;
}

/* ---- small bold labels: real weight from the display face ---- */
html[dir="rtl"] .chip{font-family:var(--font-dv-display);font-size:14.6px;font-weight:700}
html[dir="rtl"] .mini__cat{font-family:var(--font-dv-display);font-size:13.4px;font-weight:700}
html[dir="rtl"] .trow__cat{font-family:var(--font-dv-display);font-size:13.4px;font-weight:700}
html[dir="rtl"] .card__badge{font-family:var(--font-dv-display);font-size:12.9px;font-weight:700}
html[dir="rtl"] .gcard__tag{font-family:var(--font-dv-display);font-size:13.4px;font-weight:700}
html[dir="rtl"] .gmini__cat{font-family:var(--font-dv-display);font-size:13.4px;font-weight:700}
html[dir="rtl"] .gal__tag{font-family:var(--font-dv-display);font-size:14.6px;font-weight:700}
html[dir="rtl"] .btn{font-family:var(--font-dv-display);font-size:15.7px;font-weight:700}
html[dir="rtl"] .ftab{font-family:var(--font-dv-display);font-size:16.8px;font-weight:700}
html[dir="rtl"] .catx__badge{font-family:var(--font-dv-display);font-size:15.7px;font-weight:700}
html[dir="rtl"] .catx__count{font-family:var(--font-dv-display);font-size:14.6px;font-weight:700}
html[dir="rtl"] .catrow__count{font-family:var(--font-dv-display);font-size:14.6px;font-weight:700}
html[dir="rtl"] .latestx__sidehead{font-family:var(--font-dv-display);font-size:15.7px;font-weight:700}

/* ---- body copy and metadata: lift to parity with the English build ---- */
html[dir="rtl"] .card p{font-size:16.2px;line-height:1.8}
html[dir="rtl"] .card__foot{font-size:14px}
html[dir="rtl"] .card__foot .read{font-family:var(--font-dv-display);font-size:15.1px;font-weight:700}
html[dir="rtl"] .mini time{font-size:13.4px}
html[dir="rtl"] .trow__meta{font-size:14px;line-height:1.5}
html[dir="rtl"] .trow h3{font-family:var(--font-dv-display);font-size:17.9px;font-weight:700;line-height:1.7}
html[dir="rtl"] .tabcard--side .trow h3{font-size:16.8px}
html[dir="rtl"] .hero-side--tabs .tabcard--hero .trow h3{font-size:17.4px}

/* ---- headlines ---- */
html[dir="rtl"] .card h3{font-size:20.2px}
html[dir="rtl"] .mini h3{font-size:17.4px}
html[dir="rtl"] .section__title{font-size:26.9px}
html[dir="rtl"] .gcard__title{font-size:19px}
html[dir="rtl"] .gmini__title{font-size:17.4px}
html[dir="rtl"] .catrow__name{font-size:25.8px}
html[dir="rtl"] .catx__title{font-size:19px}
html[dir="rtl"] .catx__sum{font-size:16.8px}
html[dir="rtl"] .catx__more{font-family:var(--font-dv-display);font-size:16.2px;font-weight:700}
html[dir="rtl"] .catrow__all,
html[dir="rtl"] .catrow__more{font-size:16.2px}
html[dir="rtl"] .tabcard__title h2{font-size:19.6px}
html[dir="rtl"] .tabs button{font-size:16.2px}
html[dir="rtl"] .tabcard--side .tabs button{font-size:15.7px}
html[dir="rtl"] .tabcard__more{font-size:16.2px}
html[dir="rtl"] .hero-side__head h2{font-size:17.9px}
html[dir="rtl"] .hero-main p{font-size:18.5px;line-height:1.75}
html[dir="rtl"] .latestx__side .split__list .mini h3{font-size:16.8px}
html[dir="rtl"] .side-box h3{font-size:17.9px}
html[dir="rtl"] .side-box .mini h3{font-size:17.4px}

/* ---- World duo row keeps its own tighter rhythm, scaled up to match ---- */
html[dir="rtl"] .catrow__body--duo .catrow__cards .card h3{font-size:20.7px}
html[dir="rtl"] .catrow__body--duo .mini h3{font-size:16.2px}

/* ---- article ---- */
html[dir="rtl"] .article__body{font-size:20.7px;line-height:1.95}
html[dir="rtl"] .article__excerpt{font-size:21.3px}
html[dir="rtl"] .article__body h2{font-size:26.9px}
html[dir="rtl"] .article__body blockquote{font-size:20.7px}
html[dir="rtl"] .breadcrumb{font-size:17.9px}
html[dir="rtl"] .tag{font-size:16.2px}
html[dir="rtl"] .author__info b{font-size:17.9px}
html[dir="rtl"] .author__info span{font-size:15.7px}
html[dir="rtl"] .article__cover figcaption{font-size:16.2px}

/* ---- chrome: header, ticker, footer, drawer ---- */
html[dir="rtl"] .header__nav a{font-size:18.5px}
html[dir="rtl"] .topbar{font-size:17.4px}
html[dir="rtl"] .topbar__live{font-size:15.7px}
html[dir="rtl"] .topbar__date{font-size:15.1px}
html[dir="rtl"] .pill-btn{font-size:16.2px}
/* Dhivehi label inside the language pill — keep it legible in English mode too */
.pill-btn .dv{font-size:13.5px;line-height:1.5}
html[dir="rtl"] .ticker__label{font-size:16.2px}
html[dir="rtl"] .ticker__item{font-size:18.5px}
html[dir="rtl"] .brand__name span{font-size:14px}
html[dir="rtl"] .footer ul a,
html[dir="rtl"] .fcard ul a,
html[dir="rtl"] .footer__brand p{font-size:16.2px}
html[dir="rtl"] .footer__contact li{font-size:16.8px}
html[dir="rtl"] .footer__bottom{font-size:16.8px}
html[dir="rtl"] .drawer__nav a{font-size:19px}
html[dir="rtl"] .drawer__foot .btn{font-size:17.9px}
html[dir="rtl"] .newsletter p{font-size:18.5px}
html[dir="rtl"] .newsletter input{font-size:17.9px}
html[dir="rtl"] .search-box input{font-size:21.3px}
html[dir="rtl"] .search-results b{font-size:18.5px}
html[dir="rtl"] .search-results span{font-size:15.7px}
html[dir="rtl"] .search-hint{font-size:16.8px}
html[dir="rtl"] .toast{font-size:17.9px}
html[dir="rtl"] .empty h3{font-size:22.4px}
html[dir="rtl"] .page-head p{font-size:21.3px}

/* ---- gallery lightbox ---- */
html[dir="rtl"] .lb__title{font-size:20.7px}
html[dir="rtl"] .lb__cap{font-size:16.8px}
html[dir="rtl"] .gal__cap{font-size:15.1px}

/* ---- app prompt ---- */
html[dir="rtl"] .appprompt__text{font-size:21.3px}
html[dir="rtl"] .appprompt__steps li{font-size:18.5px}
html[dir="rtl"] .appprompt__later{font-size:17.4px}

/* ---- keep mobile scaling proportional to the lifted desktop scale ---- */
@media(max-width:900px){
  html[dir="rtl"] .section__title{font-size:24.6px}
  html[dir="rtl"] .card h3{font-size:19px}
  html[dir="rtl"] .mini h3{font-size:16.8px}
  html[dir="rtl"] .trow h3{font-size:17.4px}
  html[dir="rtl"] .catrow__name{font-size:23.5px}
  html[dir="rtl"] .article__body{font-size:20.2px}
  html[dir="rtl"] .article__excerpt{font-size:20.7px}
}
@media(max-width:620px){
  html[dir="rtl"] body{font-size:17.9px}
  html[dir="rtl"] .section__title{font-size:22.4px}
  html[dir="rtl"] .card h3{font-size:18.5px}
  html[dir="rtl"] .mini h3{font-size:16.2px}
  html[dir="rtl"] .trow h3{font-size:16.8px}
  html[dir="rtl"] .card p{font-size:15.7px}
  html[dir="rtl"] .article__body{font-size:19.6px}
  html[dir="rtl"] .article__excerpt{font-size:20.2px}
  html[dir="rtl"] .ftab{font-size:15.7px}
  html[dir="rtl"] .tabs button{font-size:15.7px}
  html[dir="rtl"] .tabcard__title h2{font-size:18.5px}
  html[dir="rtl"] .newsletter p{font-size:17.9px}
  html[dir="rtl"] .search-box input{font-size:19px}
  html[dir="rtl"] .catx__title{font-size:17.9px}
  html[dir="rtl"] .hero-main p{font-size:17.9px}
}

/* ==========================================================================
   ADVERTISING
   Every placement reserves its box before the creative loads, so an ad can
   never push the story down. The label is always visible: readers deserve to
   know what is paid for, and advertisers get a cleaner, more trusted slot.
   ========================================================================== */
.ad{display:flex;justify-content:center;margin:14px 0}
.ad__frame{width:100%;display:block}
.ad__tag{display:block;font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);line-height:1;padding:0 0 4px;text-align:start;opacity:.8}

/* An ad sits between two blocks that already carry their own vertical padding.
   Without this the ad margin and the section padding add up into a dead band,
   so we collapse them to a single, even gap. */
.ad + .section{padding-top:16px}
.ad + .hero{padding-top:14px}
.section + .ad,
.hero + .ad{margin-top:14px}
.ad__hit{position:relative;display:block;width:100%;flex:none;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.ad__hit:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-1px)}
.ad__img,.ad__video{display:block;width:100%;height:100%;object-fit:cover;background:var(--surface-3)}
.ad__hit picture{display:block;width:100%;height:100%}
.ad__video{aspect-ratio:inherit}
.ad__html{width:100%}
.ad__html img,.ad__html video{display:block;width:100%;height:auto}

.ad--leaderboard .ad__frame{max-width:970px}
.ad--leaderboard .ad__hit{aspect-ratio:970/90}
.ad--leaderboard{margin:10px 0 12px}

/* --- standard horizontal banners ---------------------------------------- */
.ad--home-mid .ad__frame,
.ad--article-top .ad__frame,
.ad--article-bottom .ad__frame{max-width:728px}
.ad--home-mid .ad__hit,
.ad--article-top .ad__hit,
.ad--article-bottom .ad__hit{aspect-ratio:728/90}

/* category top and the footer strip are sold at the wide 970 x 90 size */
.ad--category-top .ad__frame,
.ad--footer .ad__frame{max-width:970px}
.ad--category-top .ad__hit,
.ad--footer .ad__hit{aspect-ratio:970/90}
.ad--article-top{margin:14px 0 16px}
.ad--article-bottom{margin:18px 0 4px}

/* --- the wide showcase banner ------------------------------------------- */
.ad--home-lower .ad__frame{max-width:970px}
.ad--home-lower .ad__hit{aspect-ratio:970/250}

/* --- square units: in-body and sidebar ---------------------------------- */
.ad--article-mid{margin:20px auto}
.ad--article-mid .ad__frame{max-width:300px}
.ad--article-mid .ad__hit{aspect-ratio:300/250}
.ad--sidebar{margin:0 0 20px;position:sticky;top:calc(var(--header-h) + 16px);flex:none}
.ad--sidebar .ad__frame{max-width:300px}
.ad--sidebar .ad__hit{aspect-ratio:300/250}

/* --- footer strip -------------------------------------------------------- */
.foot-ad{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.ad--footer{margin:34px 0 26px}

/* --- mobile anchor: fixed, dismissible, never over the reading column ---- */
.ad-anchor{display:none}
.ad--mobile-anchor{margin:0}
.ad--mobile-anchor .ad__hit{border-radius:0;border:0;border-top:1px solid var(--line);aspect-ratio:320/50}
.ad--mobile-anchor .ad__frame{max-width:100%}
.ad--mobile-anchor .ad__tag{display:none}

@media (max-width:760px){
  .ad{margin:12px 0}
  .ad + .section{padding-top:14px}
  .ad + .hero{padding-top:12px}
  .section + .ad,
  .hero + .ad{margin-top:12px}
  .ad--mobile-anchor{margin:0}
  .ad--leaderboard .ad__hit,
  .ad--home-mid .ad__hit,
  .ad--category-top .ad__hit,
  .ad--article-top .ad__hit,
  .ad--article-bottom .ad__hit,
  .ad--footer .ad__hit{aspect-ratio:320/100}
  .ad--home-lower .ad__hit{aspect-ratio:320/200}
  /* the sidebar unit is sold at 300 x 250 on every screen, so it keeps that
     ratio on phones too — it just stops being sticky and centres instead */
  .ad--sidebar{position:static;margin:0 auto 18px;width:100%;max-width:300px}
  .ad--sidebar .ad__frame{max-width:300px}
  .ad--sidebar .ad__hit{aspect-ratio:300/250}

  .ad-anchor{display:block;position:fixed;inset-inline:0;bottom:0;z-index:60;
    background:var(--surface);box-shadow:0 -6px 22px rgba(25,19,34,.14);
    animation:adAnchorIn .4s var(--ease) both}
  body.has-anchor{padding-bottom:52px}
  body.has-anchor .to-top{bottom:64px}
}
@keyframes adAnchorIn{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* Reduced motion: no hover lift, no slide-in. */
@media (prefers-reduced-motion:reduce){
  .ad__hit{transition:none}
  .ad__hit:hover{transform:none}
  .ad-anchor{animation:none}
}