/* My Blog — shared site styles. Dhivehi font: MV Typewriter by Hassan Hameed, served from /fonts */
  /* The chosen fonts (Admin → Settings → Fonts) are written by common.js (Blog.applyFonts) as three families:
     "DV" = Thaana letters (MV Typewriter or Faruma), first in every font list, so Dhivehi shows in it everywhere;
     "AR" = Arabic letters (Golden Lotus, KSA or Uthman Taha Naskh); "ArInDv" = Arabic typed inside Dhivehi text,
     without the Arabic comma, semicolon and question mark that Dhivehi itself uses.
     Older Quran verse / Hadith boxes keep the King Fahd Complex Uthman Taha Naskh below. */
  @font-face { font-family: "QuranFont"; src: url("../../fonts/UthmanTN_v2-0.ttf") format("truetype"); font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
  @font-face { font-family: "HadithFont"; src: url("../../fonts/UthmanTNB_v2-0.ttf") format("truetype"); font-display: swap; size-adjust: 125%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
  /* ===== themes: every colour and shape setting lives here ===== */
  :root, [data-theme="olive"] {                     /* Olive — the main theme */
    --text:#222222; --muted:#5f6355; --bg:#ffffff; --card:#f8f6ee; --line:#e7e3d4;
    --primary:#3c4d03; --on-primary:#ffffff; --heading:#3c4d03; --accent:#c9a24a; --on-accent:#222222;
    --header-bg:var(--primary); --header-text:var(--on-primary); --band:var(--primary);
    --img-a:#3c4d03; --img-b:#c9a24a;
    --logo:#c8d97a; --logo-band:var(--logo);         /* logo: light shade of the theme colour, readable on the coloured bars */
    --radius:12px; --btn-radius:6px; --card-pad:24px; --card-border:1px solid var(--line); --rule:var(--accent);
  }
  [data-theme="lagoon"] {                           /* Lagoon — Maldivian sea blues */
    --text:#1d2329; --muted:#56636d; --bg:#ffffff; --card:#eef6f8; --line:#d6e7ec;
    --primary:#0b4f6c; --on-primary:#ffffff; --heading:#0b4f6c; --accent:#3f9bbb; --on-accent:#ffffff;
    --img-a:#0b4f6c; --img-b:#7cc6d6; --logo:#9fd8e4;
  }
  [data-theme="clay"] {                             /* Clay — terracotta with lighter clay tones */
    --text:#2a211c; --muted:#6e5f55; --bg:#fffdf9; --card:#f6eee4; --line:#eadccb;
    --primary:#8a3b1e; --on-primary:#ffffff; --heading:#8a3b1e; --accent:#c8794a; --on-accent:#ffffff;
    --img-a:#8a3b1e; --img-b:#e3b98a; --logo:#f2c9a8;
  }
  [data-theme="reef"] {                             /* Reef — turquoise lagoon and coral sand */
    --text:#1b2524; --muted:#546664; --bg:#ffffff; --card:#ecf6f4; --line:#d3e9e5;
    --primary:#0f5e5a; --on-primary:#ffffff; --heading:#0f5e5a; --accent:#2fb3a3; --on-accent:#0d2e2b;
    --img-a:#0f5e5a; --img-b:#8fd9cc; --logo:#a6e3d8;
  }
  [data-theme="emerald"] {                          /* Emerald — deep green with fresh leaf green */
    --text:#1a241e; --muted:#55665b; --bg:#ffffff; --card:#eef6f1; --line:#d4e8dc;
    --primary:#0e5a3a; --on-primary:#ffffff; --heading:#0e5a3a; --accent:#3fa36b; --on-accent:#0b2a1a;
    --img-a:#0e5a3a; --img-b:#9bd3b0; --logo:#a9dfbd;
  }
  [data-theme="sand"] {                             /* Sand — warm brown and golden sand */
    --text:#2a2318; --muted:#6c604c; --bg:#fffdf8; --card:#f8f2e6; --line:#ece0c8;
    --primary:#6e5119; --on-primary:#ffffff; --heading:#6e5119; --accent:#d1a95b; --on-accent:#2b2213;
    --img-a:#6e5119; --img-b:#e6c88f; --logo:#ecd59f;
  }
  [data-theme="plum"] {                             /* Plum — deep plum with rose */
    --text:#271d24; --muted:#675962; --bg:#ffffff; --card:#f6eef3; --line:#ead9e3;
    --primary:#5b2a4e; --on-primary:#ffffff; --heading:#5b2a4e; --accent:#c08aa6; --on-accent:#2a1323;
    --img-a:#5b2a4e; --img-b:#dcb3c9; --logo:#e8c3d7;
  }
  [data-theme="night"] {                            /* Night — navy blue with gold */
    --text:#1c2130; --muted:#585f72; --bg:#ffffff; --card:#f1f2f6; --line:#dde0ea;
    --primary:#1f2d4d; --on-primary:#ffffff; --heading:#1f2d4d; --accent:#c9a24a; --on-accent:#1b1b1b;
    --img-a:#1f2d4d; --img-b:#8a9cc4; --logo:#b9c7e8;
  }
  [data-theme="slate"] {                            /* Slate — calm blue-grey */
    --text:#1e2530; --muted:#5b6574; --bg:#ffffff; --card:#f1f4f7; --line:#dde3ea;
    --primary:#334155; --on-primary:#ffffff; --heading:#334155; --accent:#64748b; --on-accent:#ffffff;
    --img-a:#334155; --img-b:#a7b4c6; --logo:#c7d2e0;
  }
  [data-theme="ink"] {                              /* Ink — the original black and white */
    --text:#0a0a0a; --muted:#6b6b6b; --bg:#ffffff; --card:transparent; --line:#e6e6e6;
    --primary:#0a0a0a; --on-primary:#ffffff; --heading:#0a0a0a; --accent:#0a0a0a; --on-accent:#ffffff;
    --header-bg:#0a0a0a; --header-text:#ffffff; --band:#0a0a0a;
    --img-a:#1a1a1a; --img-b:#9a9a9a; --logo:#ffffff; --logo-band:#ffffff;
    --radius:4px; --btn-radius:999px; --card-pad:22px 0; --card-border:0; --rule:transparent;
  }

  /* ===== dark mode: works on top of any colour theme =====
     backgrounds are near-black tinted with the theme colour (--img-a), headings use the light logo shade,
     and buttons use that light shade so they stay visible on dark */
  [data-mode="dark"] {
    --bg:color-mix(in srgb, var(--img-a) 7%, #0f0f0f);
    --card:color-mix(in srgb, var(--img-a) 16%, #171717);
    --line:color-mix(in srgb, var(--img-a) 30%, #2a2a2a);
    --text:#ebe9e2; --muted:#a19f96; --heading:var(--logo);
    --primary:var(--logo); --on-primary:#111111;
    --header-bg:color-mix(in srgb, var(--img-a) 55%, #0b0b0b); --header-text:#ebe9e2;
    --band:var(--header-bg); --logo-band:var(--logo);
  }
  [data-theme="ink"][data-mode="dark"] {
    --bg:#0e0e0e; --card:transparent; --line:#2a2a2a; --text:#f2f2f2; --muted:#9a9a9a; --heading:#f2f2f2;
    --primary:#f2f2f2; --on-primary:#0a0a0a; --accent:#f2f2f2; --on-accent:#0a0a0a;
    --header-bg:#1e1e1e; --header-text:#f2f2f2; --band:#1e1e1e;
    --logo:#f2f2f2; --logo-band:#f2f2f2; --img-b:#555555;
  }

  * { box-sizing:border-box; margin:0; padding:0; }
  html { --text-font: "DV", "AR", Georgia, "Times New Roman", serif; }
  html[lang="dv"], .article[lang="dv"] { --text-font: "DV", "ArInDv", "Thaana", "MV Faseyha", "Faruma", sans-serif; }
  html[lang="ar"], .article[lang="ar"] { --text-font: "DV", "AR", "Noto Naskh Arabic", "Traditional Arabic", serif; }
  .article[lang="en"] { --text-font: "DV", "AR", Georgia, "Times New Roman", serif; }
  body { font-family: "DV", "AR", Georgia, "Times New Roman", serif; color:var(--text); background:var(--bg); line-height:1.6; transition:background .2s, color .2s; }
  html[lang="dv"] body { font-family: "DV", "ArInDv", "Thaana", "MV Faseyha", "Faruma", sans-serif; }
  html[lang="ar"] body { font-family: "DV", "AR", "Noto Naskh Arabic", "Traditional Arabic", serif; }
  a { color:inherit; text-decoration:none; }
  button, input, select, textarea { font-family:inherit; }  /* browsers don't pass the page font to form controls by default */
  .wrap { max-width:1100px; margin:0 auto; padding:0 28px; }
  .sans { font-family: "DV", "AR", "Segoe UI", system-ui, sans-serif; }
  html[lang="dv"] .sans { font-family: "DV", "AR", "Thaana", "MV Faseyha", "Faruma", sans-serif; }
  html[lang="ar"] .sans { font-family: "DV", "AR", "Segoe UI", Tahoma, sans-serif; }

  /* header */
  header { position:sticky; top:0; background:var(--header-bg); color:var(--header-text); border-bottom:1px solid var(--line); backdrop-filter:blur(6px); z-index:10; }
  .bar { display:flex; align-items:center; gap:32px; height:72px; }
  .brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:20px; }
  .brand .logo { width:34px; height:34px; color:var(--logo); }
  nav { display:flex; gap:26px; font-size:15px; }
  nav a { opacity:.72; } nav a:hover, nav a.on { opacity:1; }
  .right { margin-inline-start:auto; display:flex; align-items:center; gap:14px; }
  .lang { border:1px solid color-mix(in srgb, var(--header-text) 30%, transparent); border-radius:999px; display:flex; overflow:hidden; font-size:13px; }
  .lang button { border:0; background:none; padding:6px 12px; cursor:pointer; font:inherit; color:inherit; opacity:.75; }
  .lang button.on { background:var(--header-text); color:var(--header-bg); opacity:1; }
  /* each language button always shows in its own script's font, whatever the page language */
  .lang button[data-l="dv"] { font-family: "DV", "AR", "Thaana", "MV Faseyha", "Faruma", sans-serif; font-size:14px; }
  .lang button[data-l="ar"] { font-family: "DV", "AR", "Segoe UI", Tahoma, sans-serif; }
  .lang button[data-l="en"] { font-family: "DV", "AR", "Segoe UI", system-ui, sans-serif; }
  .btn { background:var(--primary); color:var(--on-primary); border:0; border-radius:var(--btn-radius); padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer; }
  header .btn { background:var(--header-text); color:var(--header-bg); }   /* buttons use the theme's own colours, inverted on coloured bars */

  /* featured */
  .featured { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; padding:56px 0; border-bottom:1px solid var(--line); }
  .img { border-radius:var(--radius); background:
      radial-gradient(circle at 70% 35%, rgba(255,255,255,.95) 0 9%, transparent 9.5%),
      radial-gradient(circle at 70% 35%, rgba(0,0,0,.28) 0 30%, transparent 30.5%),
      linear-gradient(160deg, var(--img-a), var(--img-b)); }
  .featured .img { aspect-ratio:4/3; }
  /* several featured articles: the same layout, taking turns in one place */
  .hero-slides { position:relative; display:grid; border-bottom:1px solid var(--line); }
  .hero-slides > .slide { grid-area:1 / 1; border-bottom:0; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s .7s; }
  .hero-slides > .slide.on { opacity:1; visibility:visible; transition:opacity .7s ease; }
  .hero-dots { position:absolute; bottom:22px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
  .hero-dots button { width:8px; height:8px; padding:0; border:0; border-radius:99px; background:var(--muted); opacity:.35; cursor:pointer; transition:width .3s, opacity .3s; }
  .hero-dots button.on { width:22px; opacity:.9; background:var(--heading); }
  .hero-dots button:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
  @media (prefers-reduced-motion: reduce) { .hero-slides > .slide, .hero-slides > .slide.on { transition:none; } }
  .img.photo { background-size:cover; background-position:center; background-repeat:no-repeat; }
  .kicker { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  html[dir="rtl"] .kicker { letter-spacing:0; }
  .featured h1 { font-size:46px; line-height:1.12; margin:14px 0 16px; letter-spacing:-.01em; color:var(--heading); }
  html[dir="rtl"] .featured h1 { line-height:1.5; }
  .hook { font-size:19px; margin-bottom:22px; opacity:.9; }
  .meta { font-size:13px; color:var(--muted); display:flex; gap:14px; align-items:center; }
  .price { border:1px solid var(--accent); border-radius:999px; padding:2px 10px; color:var(--text); font-weight:600; }

  /* lists */
  .cols { display:grid; grid-template-columns:2fr 1fr; gap:56px; padding:48px 0; }
  h2 { font-size:13px; letter-spacing:.14em; text-transform:uppercase; padding-bottom:12px; border-bottom:2px solid var(--primary); margin-bottom:18px; color:var(--heading); }
  [data-theme="ink"] h2 { margin-bottom:8px; }
  html[dir="rtl"] h2 { letter-spacing:0; font-size:16px; }
  .post { display:grid; grid-template-columns:1fr 150px; gap:24px; padding:var(--card-pad); background:var(--card); border:var(--card-border); border-radius:var(--radius); margin-bottom:16px; }
  [data-theme="ink"] .post { border-bottom:1px solid var(--line); border-radius:0; margin:0; }
  .post .img { aspect-ratio:4/3; }
  .post h3 { font-size:22px; line-height:1.25; margin:6px 0 10px; color:var(--heading); }
  html[dir="rtl"] .post h3 { line-height:1.6; }
  .post p { font-size:15px; margin-bottom:10px; opacity:.85; }
  .lock { font-size:12px; background:var(--primary); color:var(--on-primary); border-radius:999px; padding:2px 9px; font-weight:600; }
  .pop { list-style:none; counter-reset:n; }
  .pop li { counter-increment:n; display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
  .pop li::before { content:counter(n, decimal-leading-zero); font-size:28px; font-weight:700; color:var(--accent); opacity:.85; line-height:1; min-width:40px; }
  [data-theme="ink"] .pop li::before { color:#cfcfcf; opacity:1; }
  [data-theme="ink"][data-mode="dark"] .pop li::before { color:#4a4a4a; }
  .pop h4 { font-size:17px; line-height:1.35; margin-bottom:4px; color:var(--heading); }
  html[dir="rtl"] .pop h4 { line-height:1.6; }
  .member { margin-top:28px; background:var(--card); border:var(--card-border); border-radius:var(--radius); padding:24px; }
  [data-theme="ink"] .member { background:#f5f5f5; border-radius:6px; }
  [data-theme="ink"][data-mode="dark"] .member { background:#1a1a1a; }
  .member h4 { font-size:19px; margin-bottom:6px; color:var(--heading); }
  .member p { font-size:14px; margin-bottom:14px; opacity:.85; }

  /* categories */
  .cats-sec { padding:8px 0 64px; }
  .cats { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
  .cat { display:flex; align-items:center; gap:16px; padding:20px 22px; background:var(--card); border:var(--card-border); border-radius:var(--radius); transition:transform .15s, border-color .15s; }
  [data-theme="ink"] .cat { border:1px solid var(--line); }
  .cat:hover { transform:translateY(-2px); border-color:var(--primary); }
  .cat .ico { flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); }
  .cat .ico svg { width:22px; height:22px; }
  .cat h4 { font-size:18px; color:var(--heading); line-height:1.3; }
  .cat .count { font-size:13px; color:var(--muted); }
  .cat .go { margin-inline-start:auto; color:var(--accent); font-size:20px; }
  html[dir="rtl"] .cat .go { transform:scaleX(-1); }

  /* newsletter */
  .news { background:var(--band); color:#fff; padding:64px 0; text-align:center; }
  [data-mode="dark"] .news { color:var(--text); }
  .news .logo { width:48px; height:48px; margin-bottom:16px; color:var(--logo-band); }
  .news h2 { border:0; font-size:30px; letter-spacing:0; text-transform:none; margin-bottom:6px; padding:0; color:inherit; }
  .news p { opacity:.75; margin-bottom:24px; }
  .news form { display:flex; gap:10px; justify-content:center; }
  .news input { width:320px; padding:12px 18px; border-radius:var(--btn-radius); border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.25); color:#fff; font-size:15px; }
  .news .btn { background:#fff; color:var(--band); }
  [data-mode="dark"] .news .btn { background:var(--text); }
  [data-theme="ink"] .news .btn { background:#fff; color:#0a0a0a; }
  footer { padding:28px 0; font-size:13px; color:var(--muted); }
  footer .wrap { display:flex; justify-content:space-between; }

  /* theme picker (for choosing a design; remove when the final theme is chosen) */
  .themes { position:fixed; bottom:20px; inset-inline-end:20px; z-index:20; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.18); font:12px "DV", "AR", "Segoe UI", system-ui, sans-serif; color:#222; }
  .themes button { width:26px; height:26px; border-radius:50%; border:2px solid #fff; outline:1px solid #ccc; cursor:pointer; }
  .themes button.on { outline:2px solid #222; }

  /* mobile menu button */
  .burger { display:none; width:34px; height:34px; border-radius:50%; border:1px solid color-mix(in srgb, var(--header-text) 30%, transparent); background:none; color:inherit; cursor:pointer; place-items:center; }
  .burger svg { width:18px; height:18px; }

  /* footer */
  footer nav { display:flex; flex-wrap:wrap; gap:16px; font-size:13px; }
  footer nav a:hover { color:var(--text); }

  /* an article shown in its own language (different from the page's) uses that language's font */
  .article[lang="dv"] { font-family:"DV", "ArInDv", "Thaana", "MV Faseyha", "Faruma", sans-serif; }
  .article[lang="ar"] { font-family:"DV", "AR", "Noto Naskh Arabic", "Traditional Arabic", serif; }
  .article[lang="en"] { font-family:"DV", "AR", Georgia, "Times New Roman", serif; }

  /* article page */
  .article { max-width:720px; margin:0 auto; padding:56px 0 64px; }
  .article h1 { font-size:44px; line-height:1.15; margin:12px 0 16px; color:var(--heading); }
  html[dir="rtl"] .article h1 { line-height:1.6; }
  .article .hook { margin-bottom:18px; }
  .article .cover { aspect-ratio:16/9; margin:28px 0 36px; max-width:100%; }
  /* Settings → Article page: smaller covers sit at the start, centre or end; "whole picture" shows all of it */
  .article .cover.cv-center { margin-inline:auto; }
  .article .cover.cv-end { margin-inline-start:auto; }
  .article .cover.cv-whole { background-size:contain; background-color:var(--card); }
  .article .cover-gap { height:28px; }
  .article .meta { margin-bottom:8px; }
  .body { font-size:19px; line-height:1.8; }
  html[lang="dv"] .body { font-size:20px; line-height:2; }
  .body p, .body ul, .body ol, .body blockquote, .body figure { margin-bottom:1.1em; }
  .body h2 { font-size:26px; letter-spacing:0; text-transform:none; border:0; padding:0; margin:1.6em 0 .6em; }
  .body h3 { font-size:21px; margin:1.4em 0 .5em; color:var(--heading); }
  .body ul, .body ol { padding-inline-start:1.4em; }
  .body blockquote { border-inline-start:3px solid var(--accent); padding-inline-start:18px; font-style:italic; opacity:.9; }
  .body a { color:var(--heading); text-decoration:underline; }
  .body img { max-width:100%; height:auto; border-radius:var(--radius); display:block; margin:1.2em auto; }

  /* paywall: the free preview fades into the "continue reading" box */
  .fade { position:relative; }
  .fade::after { content:""; position:absolute; inset-inline:0; bottom:0; height:120px; background:linear-gradient(transparent, var(--bg)); }
  .paywall { text-align:center; background:var(--card); border:var(--card-border); border-radius:var(--radius); padding:32px 28px; margin-top:8px; }
  [data-theme="ink"] .paywall { border:1px solid var(--line); }
  .paywall h3 { font-size:24px; color:var(--heading); margin-bottom:6px; }
  .paywall p { opacity:.85; margin-bottom:18px; }
  .paywall .row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .btn.ghost { background:none; color:var(--primary); border:1px solid var(--primary); }

  /* category and listing pages */
  .page-head { padding:48px 0 8px; }
  .page-head h1 { font-size:40px; color:var(--heading); line-height:1.3; }
  .page-head p { color:var(--muted); margin-top:6px; }
  .list { padding:24px 0 64px; max-width:780px; }
  .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
  .chip { border:1px solid var(--line); border-radius:999px; padding:5px 14px; font-size:13px; }
  .chip.on { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
  .empty { padding:40px 0; color:var(--muted); }
  .related { border-top:1px solid var(--line); margin-top:48px; padding-top:32px; }

  /* donate */
  .btn .heart { width:14px; height:14px; vertical-align:-2px; margin-inline-end:6px; }
  .btn.donate { display:inline-flex; align-items:center; }
  header .btn.ghost { background:none; color:var(--header-text); border:1px solid color-mix(in srgb, var(--header-text) 45%, transparent); }
  header .btn.ghost:hover { background:color-mix(in srgb, var(--header-text) 12%, transparent); }
  .donate-box { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:36px; padding:20px 24px; background:var(--card); border:var(--card-border); border-radius:var(--radius); }
  [data-theme="ink"] .donate-box { border:1px solid var(--line); }
  .donate-box p { margin:0; font-size:15px; }
  .donate-box .btn { display:inline-flex; align-items:center; }

  /* bank account details */
  .bank { width:100%; text-align:start; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
  .bank-title { font-weight:700; font-size:14px; color:var(--heading); margin-bottom:8px; }
  .acct { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 0; border-bottom:1px dashed var(--line); font-size:14px; }
  .acct:last-of-type { border-bottom:0; }
  .acct-who div { color:var(--muted); }
  .acct-num { display:flex; align-items:center; gap:8px; }
  .acct-num code { font:600 16px/1 Consolas, "Courier New", monospace; letter-spacing:.06em; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:7px 10px; color:var(--text); }
  .copy { border:1px solid var(--primary); color:var(--primary); background:none; border-radius:var(--btn-radius); padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; }
  .copy:hover { background:var(--primary); color:var(--on-primary); }
  .bank-note { font-size:13px; color:var(--muted); margin-top:8px; }

  /* contact page */
  .contact { margin-top:32px; }
  .c-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
  .c-card { display:flex; align-items:center; gap:14px; padding:16px 18px; background:var(--card); border:var(--card-border); border-radius:var(--radius); transition:border-color .15s, transform .15s; }
  [data-theme="ink"] .c-card { border:1px solid var(--line); }
  a.c-card:hover { border-color:var(--primary); transform:translateY(-2px); }
  .c-ico { flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); }
  .c-ico svg { width:19px; height:19px; }
  .c-label { display:block; font-size:12px; color:var(--muted); }
  .c-value { display:block; font-weight:600; color:var(--heading); overflow-wrap:break-word; }
  .c-card > span:last-child { min-width:0; }
  .contact .bank { margin-top:24px; padding:18px 20px; border:var(--card-border); border-radius:var(--radius); background:var(--card); }
  [data-theme="ink"] .contact .bank { border:1px solid var(--line); }
  .contact-form { margin-top:28px; padding:24px; background:var(--card); border:var(--card-border); border-radius:var(--radius); display:grid; gap:12px; }
  [data-theme="ink"] .contact-form { border:1px solid var(--line); }
  .contact-form h3 { font-size:20px; color:var(--heading); }
  .contact-form .c-intro { color:var(--muted); font-size:14px; margin-top:-8px; }
  .c-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .contact-form input, .contact-form textarea { width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:var(--btn-radius); background:var(--bg); color:var(--text); font:inherit; font-size:15px; }
  .contact-form textarea { resize:vertical; }
  .contact-form input:focus, .contact-form textarea:focus { outline:2px solid color-mix(in srgb, var(--primary) 40%, transparent); border-color:var(--primary); }
  .contact-form .btn { justify-self:start; }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
  @media (max-width:600px) { .c-row { grid-template-columns:1fr; } }

  /* small notices */
  .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 18px; border-radius:999px; font:14px "DV", "AR", "Segoe UI", system-ui, sans-serif; z-index:30; }
  .demo-note { background:#fff4c2; color:#5a4a00; text-align:center; font:13px "DV", "AR", "Segoe UI", system-ui, sans-serif; padding:6px; }

  /* light / dark switch in the header */
  .mode { width:34px; height:34px; border-radius:50%; border:1px solid color-mix(in srgb, var(--header-text) 30%, transparent); background:none; color:inherit; cursor:pointer; display:grid; place-items:center; }
  .mode svg { width:17px; height:17px; }
  .mode .sun { display:none; } [data-mode="dark"] .mode .sun { display:block; } [data-mode="dark"] .mode .moon { display:none; }

  @media (max-width:820px) {
    header nav { display:none; }
    header nav.open { display:flex; position:absolute; top:72px; inset-inline:0; flex-direction:column; gap:0; background:var(--header-bg); padding:8px 28px 16px; border-bottom:1px solid var(--line); }
    header nav.open a { padding:10px 0; }
    .burger { display:grid; }
    .right .btn:not(.donate) { display:none; }
    .right .btn.donate { padding:7px 12px; }
    .article h1 { font-size:32px; }
    footer .wrap { flex-direction:column; gap:10px; }
    .featured, .cols { grid-template-columns:1fr; gap:28px; }
    .featured h1 { font-size:34px; }
    .post { grid-template-columns:1fr 100px; }
    .cats { grid-template-columns:1fr 1fr; }
    .news form { flex-direction:column; align-items:center; }
  }

  /* ===== Quran verses and Hadith inside articles ===== */
  .body blockquote.quran, .body blockquote.hadith { font-style:normal; opacity:1; direction:rtl; unicode-bidi:isolate; border-radius:var(--radius); margin:28px 0; }
  .body blockquote.quran { font-family:"QuranFont", "AR", serif; font-size:1.5em; line-height:2.3; text-align:center; border:0; padding:22px 26px; background:var(--card); color:var(--text); }
  [data-theme="ink"] .body blockquote.quran { border:1px solid var(--line); }
  .body blockquote.hadith { direction:inherit; font-family:"DV", "HadithFont", var(--text-font); font-size:1em; line-height:2.1; text-align:right; border-inline-start:4px solid var(--accent); padding:16px 22px; background:color-mix(in srgb, var(--card) 70%, transparent); }
  .body blockquote.quran p, .body blockquote.hadith p { margin:0; }
  .body blockquote.hadith p, .body blockquote.hadith cite { unicode-bidi:plaintext; text-align:start; }
  .body blockquote cite { display:block; font:normal 14px/1.6 "DV", "AR", "Segoe UI", sans-serif; color:var(--muted); margin-top:8px; }
  .body blockquote.quran cite { text-align:center; }
  .ayah-num { color:var(--accent); white-space:nowrap; }
  .tanzil { font-size:12.5px; color:var(--muted); margin-top:18px; }
  .tanzil a { text-decoration:underline; }

  /* ===== Listen (text to speech + recitation) ===== */
  .listen-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--primary); color:var(--primary); background:none; border-radius:999px; padding:3px 12px 3px 10px; font:600 13px/1.6 inherit; cursor:pointer; }
  .listen-btn:hover { background:var(--primary); color:var(--on-primary); }
  .listen-btn svg { width:16px; height:16px; }
  .speaking { background:color-mix(in srgb, var(--accent) 16%, transparent); border-radius:6px; box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); transition:background .2s; }
  .listen-bar { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:25; display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--header-bg); color:var(--header-text); box-shadow:0 6px 24px rgba(0,0,0,.25); font-size:13px; }
  .listen-bar button { width:34px; height:34px; border-radius:50%; border:1px solid color-mix(in srgb, var(--header-text) 35%, transparent); background:none; color:inherit; cursor:pointer; font-size:13px; }
  .listen-bar button:hover { background:color-mix(in srgb, var(--header-text) 14%, transparent); }
  .listen-bar select { background:none; color:inherit; border:1px solid color-mix(in srgb, var(--header-text) 35%, transparent); border-radius:999px; padding:5px 8px; font:inherit; }
  .listen-bar select option { color:#222; }
  .listen-status { white-space:nowrap; opacity:.85; padding-inline:4px; font-variant-numeric:tabular-nums; }
  .listen-track { width:min(220px, 30vw); height:6px; border-radius:999px; background:color-mix(in srgb, var(--header-text) 22%, transparent); cursor:pointer; overflow:hidden; }
  .listen-track[hidden] { display:none; }
  .listen-fill { height:100%; width:0; background:var(--header-text); border-radius:999px; }
  .listen-btn .dur { font-weight:400; opacity:.8; }

  /* ===== reader accounts, bylines, comments, author pages ===== */
  .acct-link { display:inline-flex; align-items:center; gap:6px; font-size:14px; opacity:.85; max-width:150px; }
  .acct-link:hover { opacity:1; }
  .acct-link svg { width:18px; height:18px; flex:none; }
  .acct-link span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .byline-row { margin:-6px 0 12px; font-size:14px; }
  .byline { color:var(--heading); font-weight:600; }
  .byline:hover { text-decoration:underline; }
  .hint-small { font-size:13px; color:var(--muted); margin:10px 0 0; }

  .comments { margin-top:44px; padding-top:28px; border-top:1px solid var(--line); }
  .comments .empty { padding:6px 0 0; }
  .comment { padding:14px 0; border-bottom:1px solid var(--line); }
  .comment .c-head { display:flex; gap:10px; align-items:baseline; font-size:14px; margin-bottom:4px; }
  .comment .c-head span { color:var(--muted); font-size:12.5px; }
  .comment p { font-size:15.5px; line-height:1.7; white-space:pre-wrap; }
  .comment-form { display:grid; gap:10px; margin-top:18px; }
  .comment-form input, .comment-form textarea, .auth input { width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:var(--btn-radius); background:var(--bg); color:var(--text); font:inherit; font-size:15px; }
  .comment-form .btn { justify-self:start; }

  .seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
  .seg button { border:0; background:none; padding:8px 16px; cursor:pointer; font:inherit; color:var(--muted); }
  .seg button.on { background:var(--primary); color:var(--on-primary); }
  .auth { max-width:420px; margin:48px auto 72px; display:grid; gap:18px; }
  .auth form { display:grid; gap:14px; background:var(--card); border:var(--card-border); border-radius:var(--radius); padding:24px; }
  [data-theme="ink"] .auth form { border:1px solid var(--line); }
  .auth label { display:grid; gap:6px; font-size:14px; font-weight:600; }
  .auth .switch { font-size:13.5px; color:var(--heading); text-align:center; }

  .account { display:grid; gap:16px; max-width:720px; padding-bottom:64px; }
  .acct-card { background:var(--card); border:var(--card-border); border-radius:var(--radius); padding:20px 22px; }
  [data-theme="ink"] .acct-card { border:1px solid var(--line); }
  .acct-card h3 { color:var(--heading); margin-bottom:8px; font-size:18px; }
  .acct-card .ok { color:var(--heading); font-weight:600; }
  .acct-card .btn { margin-top:10px; }
  .bought { padding-inline-start:1.2em; display:grid; gap:6px; }
  .bought a { color:var(--heading); text-decoration:underline; }
  .acct-actions { display:flex; gap:10px; flex-wrap:wrap; }

  .author-head { display:flex; gap:22px; align-items:center; }
  .author-head .avatar { flex:none; width:96px; height:96px; border-radius:50%; background:var(--card) center/cover no-repeat; border:3px solid var(--line); }
  .author-head .avatar.initial { display:grid; place-items:center; font-size:38px; font-weight:700; color:var(--on-primary); background:var(--primary); }
  .author-head .bio { margin:8px 0 4px; max-width:640px; }
  @media (max-width:820px) { .acct-link span { display:none; } }

  /* ===== 404: "4 [logo] 4" ===== */
  .nf { text-align:center; padding:64px 0 88px; }
  .nf-code { display:flex; justify-content:center; align-items:center; gap:.06em; font:700 clamp(110px, 22vw, 210px)/1 "DV", "AR", Georgia, "Times New Roman", serif; color:var(--heading); letter-spacing:-.02em; margin-bottom:18px; }
  .nf-logo { width:.8em; height:.8em; color:var(--heading); flex:none; transform:translateY(.09em); }   /* this serif's 4 dips below the line; centre the logo on it */
  .nf h1 { font-size:30px; color:var(--heading); margin-bottom:8px; }
  html[dir="rtl"] .nf h1 { line-height:1.6; }
  .nf p { color:var(--muted); font-size:17px; margin-bottom:26px; }
  .nf-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

  /* ===== "coming soon" page ===== */
  .cs { --header-text:var(--text); --header-bg:var(--bg);
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 24px 64px; text-align:center; position:relative; overflow:hidden;
    background:
      radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--accent) 16%, transparent) 0 20%, transparent 21%),
      radial-gradient(circle at 88% 84%, color-mix(in srgb, var(--primary) 12%, transparent) 0 26%, transparent 27%),
      radial-gradient(circle at 80% 12%, color-mix(in srgb, var(--primary) 7%, transparent) 0 9%, transparent 10%),
      var(--bg); }
  .cs-top { position:absolute; top:20px; inset-inline-end:24px; display:flex; gap:10px; align-items:center; }
  .cs-inner { max-width:640px; position:relative; }
  .cs-logo { width:112px; height:112px; color:var(--heading); margin-bottom:16px; animation:cs-float 6s ease-in-out infinite; }
  @keyframes cs-float { 50% { transform:translateY(-8px); } }
  @media (prefers-reduced-motion: reduce) { .cs-logo { animation:none; } }
  .cs-name { letter-spacing:.22em; text-transform:uppercase; font-size:13px; color:var(--muted); margin-bottom:22px; }
  html[dir="rtl"] .cs-name { letter-spacing:0; font-size:16px; }
  .cs h1 { font-size:clamp(34px, 6vw, 54px); line-height:1.15; color:var(--heading); margin-bottom:16px; }
  html[dir="rtl"] .cs h1 { line-height:1.6; }
  .cs-text { font-size:18px; line-height:1.7; opacity:.85; margin:0 auto 30px; max-width:540px; }
  .cs-count { display:flex; gap:12px; justify-content:center; margin-bottom:30px; flex-wrap:wrap; }
  .cs-count div { min-width:80px; padding:12px 8px; background:var(--card); border:var(--card-border); border-radius:var(--radius); }
  [data-theme="ink"] .cs-count div { border:1px solid var(--line); }
  .cs-count b { display:block; font-size:30px; line-height:1.2; color:var(--heading); font-variant-numeric:tabular-nums; }
  .cs-count span { font-size:12px; color:var(--muted); }
  .cs-form { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .cs-form input { width:min(320px, 82vw); padding:12px 18px; border-radius:var(--btn-radius); border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:15px; }
  .cs-team { position:absolute; bottom:18px; font-size:12.5px; color:var(--muted); opacity:.75; }
  .cs-team:hover { opacity:1; text-decoration:underline; }

  /* writers: author extras, "Our writers", "Write for us" */
  .author-head .headline { color:var(--muted); font-size:15px; margin-top:4px; }
  .author-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .author-links a { font-size:13px; padding:4px 12px; border:1px solid var(--line); border-radius:99px; color:var(--heading); }
  .author-links a:hover { border-color:var(--primary); }
  .writers-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin:8px 0 32px; }
  .writer-card { display:flex; gap:14px; align-items:center; padding:16px; background:var(--card); border:var(--card-border); border-radius:var(--radius); color:inherit; }
  [data-theme="ink"] .writer-card { border:1px solid var(--line); }
  .writer-card:hover { border-color:var(--primary); }
  .writer-card .avatar { flex:none; width:58px; height:58px; border-radius:50%; background:var(--line) center/cover no-repeat; }
  .writer-card .avatar.initial { display:grid; place-items:center; font-size:24px; font-weight:700; color:var(--on-primary); background:var(--primary); }
  .writer-card .wc-text { display:grid; gap:2px; min-width:0; }
  .writer-card b { color:var(--heading); font-size:17px; }
  .writer-card .wc-head { font-size:14px; color:var(--muted); }
  .writer-card .wc-count { font-size:12px; color:var(--muted); }
  .wf-invite { margin-bottom:40px; }
  .write-for-us .lede { font-size:20px; color:var(--muted); margin:-6px 0 24px; }
  .wf-part { margin-top:34px; }
  .wf-part h2 { font-size:24px; color:var(--heading); margin-bottom:12px; }
  .wf-benefits .body ul { list-style:none; padding:0; display:grid; gap:10px; }
  .wf-benefits .body li { padding:12px 16px; background:var(--card); border-radius:var(--radius); border-inline-start:4px solid var(--accent); }
  .wf-rules .body h3 { margin-top:22px; }
  .wf-form .wf-langs { border:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
  .wf-form .wf-langs legend { font-size:14px; color:var(--muted); margin-bottom:6px; }
  .contact-form input[type="checkbox"] { width:auto; margin-inline-end:6px; accent-color:var(--primary); }
  .wf-form .wf-agree { font-size:15px; display:flex; align-items:flex-start; gap:4px; }
  .wf-form .wf-agree input { margin-top:5px; }
  .wf-done { font-size:17px; color:var(--heading); padding:8px 0; }

  /* page numbers / load more under article lists */
  .pager { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); flex-wrap:wrap; }
  .pager .nums { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .pager .nums a, .pager .nums span.on { min-width:38px; height:38px; padding:0 8px; display:inline-grid; place-items:center; border-radius:var(--btn-radius); font-size:15px; font-variant-numeric:tabular-nums; }
  .pager .nums a { border:1px solid var(--line); color:var(--heading); }
  .pager .nums a:hover { border-color:var(--primary); }
  .pager .nums span.on { background:var(--primary); color:var(--on-primary); font-weight:700; }
  .pager .gap { color:var(--muted); padding:0 2px; }
  .pager .prev, .pager .next { font-size:14px; color:var(--heading); padding:8px 4px; }
  .pager .off { opacity:.35; pointer-events:none; }
  .pager-more { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:24px; }
  .pager-more span { font-size:13px; color:var(--muted); }
  @media (max-width:560px) { .pager { justify-content:center; } .pager .prev, .pager .next { order:2; } }

  /* category icons: thin drawings in a soft grey circle (Settings → Look → Category icons) */
  .cats.plain .cat .ico, .cat-ico.plain { color:var(--text); background:color-mix(in srgb, var(--text) 9%, transparent); }
  .cat-ico { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px; color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); }
  .cat-ico svg { width:26px; height:26px; }

  /* ===== top of the homepage: four designs (Admin → Homepage → Design of the top) ===== */
  /* Cover — a wide picture with the title over it, like a magazine cover */
  .hero-cover .featured { display:grid; grid-template-columns:1fr; gap:0; padding:0; margin:32px 0 44px; border:0; border-radius:calc(var(--radius) * 1.6); overflow:hidden; min-height:470px; }
  .hero-cover .featured > * { grid-area:1 / 1; }
  .hero-cover .featured .img { aspect-ratio:auto; height:100%; min-height:470px; border-radius:0; }
  .hero-cover .f-txt { align-self:end; position:relative; padding:140px 44px 38px; background:linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.4) 55%, transparent); color:#fff; pointer-events:none; }
  .hero-cover .f-txt a { pointer-events:auto; }
  .hero-cover .featured h1, .hero-cover .featured h1 a { color:#fff; max-width:860px; }
  .hero-cover .hook { max-width:660px; opacity:.92; }
  .hero-cover .kicker, .hero-cover .meta { color:rgba(255,255,255,.85); }
  .hero-cover .price { color:#fff; border-color:rgba(255,255,255,.6); }
  .hero-cover .hero-slides { border:0; margin:32px 0 44px; }
  .hero-cover .hero-slides > .featured { margin:0; }
  .hero-cover .hero-dots { top:22px; bottom:auto; justify-content:flex-end; padding-inline:26px; }
  .hero-cover .hero-dots button { background:#fff; opacity:.55; }
  .hero-cover .hero-dots button.on { background:#fff; opacity:1; }

  /* Card — everything in one soft rounded card, picture first */
  .hero-card .featured { background:var(--card); border:var(--card-border); border-radius:calc(var(--radius) * 1.8); padding:26px; gap:44px; margin:32px 0 44px;
    grid-template-columns:1.05fr 1fr; box-shadow:0 22px 44px -28px color-mix(in srgb, var(--primary) 45%, transparent); }
  [data-theme="ink"] .hero-card .featured { background:transparent; border:1px solid var(--line); }
  .hero-card .featured .img { order:-1; border-radius:var(--radius); }
  .hero-card .f-txt { padding-inline-end:14px; }
  .hero-card .hero-slides { border:0; margin:32px 0 44px; padding-bottom:30px; }
  .hero-card .hero-slides > .featured { margin:0; }
  .hero-card .hero-dots { bottom:0; }

  /* Mosaic — one big story and two smaller ones */
  .hero-mosaic .mosaic { display:grid; grid-template-columns:1.75fr 1fr; grid-template-rows:1fr 1fr; gap:16px; margin:32px 0 44px; min-height:540px; }
  .mo-tile { position:relative; display:grid; border-radius:calc(var(--radius) * 1.4); overflow:hidden; min-height:250px; }
  .mo-tile.big { grid-row:1 / span 2; }
  .mo-tile > * { grid-area:1 / 1; }
  .mo-tile .img { aspect-ratio:auto; height:100%; border-radius:0; transition:transform .6s ease; }
  .mo-tile:hover .img { transform:scale(1.035); }
  .mo-txt { align-self:end; position:relative; padding:80px 22px 20px; background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.35) 60%, transparent); color:#fff; pointer-events:none; }
  .mo-txt a { pointer-events:auto; color:#fff; }
  .mo-tile.big .mo-txt { padding:150px 34px 30px; }
  .mo-tile h1 { font-size:38px; line-height:1.15; margin:10px 0 12px; }
  .mo-tile h3 { font-size:20px; line-height:1.3; margin:6px 0 8px; }
  html[dir="rtl"] .mo-tile h1, html[dir="rtl"] .mo-tile h3 { line-height:1.6; }
  .mo-txt .kicker, .mo-txt .meta { color:rgba(255,255,255,.85); }
  .mo-txt .price { color:#fff; border-color:rgba(255,255,255,.6); }
  .mo-txt .hook { opacity:.92; }
  @media (prefers-reduced-motion: reduce) { .mo-tile .img { transition:none; } }

  @media (max-width:900px) {
    .hero-cover .featured, .hero-cover .featured .img { min-height:420px; }
    .hero-cover .f-txt { padding:120px 22px 24px; }
    .hero-card .featured { padding:16px; gap:20px; }
    .hero-card .f-txt { padding:0 6px 8px; }
    .hero-mosaic .mosaic { grid-template-columns:1fr; grid-template-rows:auto; min-height:0; }
    .mo-tile.big { grid-row:auto; min-height:400px; }
    .mo-tile h1 { font-size:30px; }
  }

  /* small phones: keep the header and category tiles inside the screen */
  @media (max-width:520px) {
    .right { gap:8px; }
    .right .btn.donate { font-size:0; gap:0; padding:0; width:34px; height:34px; justify-content:center; border-radius:50%; }   /* only the heart */
    .right .btn.donate svg { width:15px; height:15px; }
    .lang button { padding:5px 8px; }
    .cats { grid-template-columns:1fr; }
    .cat { padding:16px 18px; }
  }

  /* ===== sizes for the top of the homepage (Admin → Homepage → Size) ===== */
  .featured h1 { font-size:calc(46px * var(--hero-t, 1)); }
  .mo-tile h1 { font-size:calc(38px * var(--hero-t, 1)); }
  .mo-tile h3 { font-size:calc(20px * var(--hero-t, 1)); }
  .hero-split .featured { grid-template-columns:minmax(0, 1fr) minmax(0, var(--hero-img, 47%)); }
  .hero-card .featured { grid-template-columns:minmax(0, var(--hero-img, 51%)) minmax(0, 1fr); }
  .hero-split.sized .featured .img, .hero-card.sized .featured .img { aspect-ratio:auto; height:var(--hero-h); }
  .hero-cover.sized .featured, .hero-cover.sized .featured .img { min-height:var(--hero-h); }
  .hero-mosaic .mosaic { grid-template-columns:minmax(0, var(--mo-big, 64%)) minmax(0, 1fr); }
  .hero-mosaic.sized .mosaic { min-height:var(--hero-h); }
  .hero-mosaic.flip .mosaic { grid-template-columns:minmax(0, 1fr) minmax(0, var(--mo-big, 64%)); }
  .hero-mosaic.flip .mo-tile.big { grid-column:2; }
  .hero-mosaic.flip .mo-tile:not(.big) { grid-column:1; }
  .wrap.wide { max-width:none; padding-inline:clamp(12px, 2vw, 28px); }
  @media (max-width:900px) {
    .featured h1 { font-size:calc(34px * var(--hero-t, 1)); }
    .mo-tile h1 { font-size:calc(30px * var(--hero-t, 1)); }
    .hero-split .featured, .hero-card .featured { grid-template-columns:1fr; }
    .hero-split.sized .featured .img, .hero-card.sized .featured .img { height:auto; aspect-ratio:4/3; }
    .hero-cover.sized .featured, .hero-cover.sized .featured .img { min-height:min(var(--hero-h), 560px); }
    .hero-mosaic .mosaic, .hero-mosaic.flip .mosaic { grid-template-columns:1fr; min-height:0; }
    .hero-mosaic.flip .mo-tile { grid-column:auto; }
  }

  /* ===== mosaic arrangements, spacing and corners (Admin → Homepage → Size) ===== */
  .hero-mosaic .mosaic { gap:var(--mo-gap, 16px); }
  .mo-tile { border-radius:var(--hero-radius, calc(var(--radius) * 1.4)); min-height:0; }
  .hero-cover .featured, .hero-card .featured { border-radius:var(--hero-radius, calc(var(--radius) * 1.7)); }
  .hero-split .featured .img { border-radius:var(--hero-radius, var(--radius)); }
  .hero-card .featured .img { border-radius:max(calc(var(--hero-radius, 21px) - 10px), 0px); }
  /* side: small stories stacked beside the big one */
  .hero-mosaic.l-side .mosaic { grid-template-columns:minmax(0, var(--mo-big, 64%)) minmax(0, 1fr); grid-template-rows:repeat(var(--mo-n, 2), minmax(0, 1fr)); }
  .hero-mosaic.l-side .mo-tile.big { grid-row:1 / -1; grid-column:1; }
  .hero-mosaic.l-side .mo-tile:not(.big) { grid-column:2; }
  .hero-mosaic.l-side.flip .mosaic { grid-template-columns:minmax(0, 1fr) minmax(0, var(--mo-big, 64%)); }
  .hero-mosaic.l-side.flip .mo-tile.big { grid-column:2; }
  .hero-mosaic.l-side.flip .mo-tile:not(.big) { grid-column:1; }
  /* grid: small stories in two columns beside the big one */
  .hero-mosaic.l-grid .mosaic { grid-template-columns:minmax(0, var(--mo-big, 55%)) repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(var(--mo-r, 1), minmax(0, 1fr)); }
  .hero-mosaic.l-grid .mo-tile.big { grid-row:1 / -1; grid-column:1; }
  .hero-mosaic.l-grid.flip .mosaic { grid-template-columns:repeat(2, minmax(0, 1fr)) minmax(0, var(--mo-big, 55%)); }
  .hero-mosaic.l-grid.flip .mo-tile.big { grid-column:3; }
  .hero-mosaic.l-grid .mo-tile:not(.big) { grid-column:auto; grid-row:auto; }
  /* top: the big story across the top, small ones in a row under it */
  .hero-mosaic.l-top .mosaic { grid-template-columns:repeat(var(--mo-n, 2), minmax(0, 1fr)); grid-template-rows:var(--mo-rows-top, 64fr 36fr); }
  .hero-mosaic.l-top .mo-tile.big { grid-column:1 / -1; grid-row:1; }
  .hero-mosaic.l-top .mo-tile:not(.big) { grid-column:auto; grid-row:2; }
  .hero-mosaic.l-top.flip .mo-tile.big { grid-row:2; }
  .hero-mosaic.l-top.flip .mo-tile:not(.big) { grid-row:1; }
  /* many small tiles: keep their text short */
  .mo-tile:not(.big) .mo-txt { padding:56px 18px 16px; }
  .mo-tile:not(.big) h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .mo-tile:not(.big) .kicker { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width:900px) {
    .hero-mosaic.l-side .mosaic, .hero-mosaic.l-grid .mosaic, .hero-mosaic.l-top .mosaic,
    .hero-mosaic.l-side.flip .mosaic, .hero-mosaic.l-grid.flip .mosaic { grid-template-columns:1fr 1fr; grid-template-rows:none; min-height:0; }
    .hero-mosaic .mosaic .mo-tile.big { grid-column:1 / -1 !important; grid-row:auto !important; min-height:380px; }
    .hero-mosaic .mosaic .mo-tile:not(.big) { grid-column:auto !important; grid-row:auto !important; min-height:200px; }
  }
  @media (max-width:520px) { .hero-mosaic .mosaic .mo-tile:not(.big) { grid-column:1 / -1 !important; } }

  /* drag handles: only in the admin's live preview */
  .drag-handle { position:absolute; z-index:30; cursor:ew-resize; touch-action:none; }
  .drag-handle::after { content:""; position:absolute; inset:0; margin:auto; width:6px; height:64px; max-height:60%; border-radius:99px; background:#fff; box-shadow:0 0 0 2px var(--primary), 0 4px 14px rgba(0,0,0,.3); }
  .drag-handle.across, .dh-bottom { cursor:ns-resize; }
  .drag-handle.across::after, .dh-bottom::after { width:64px; max-width:40%; height:6px; max-height:none; }
  .dh-bottom { height:12px; }
  .drag-handle:hover::after, .drag-handle.on::after { background:var(--accent); }

  /* a chosen height is kept exactly on wide screens; the small tiles share it */
  @media (min-width:901px) {
    .hero-mosaic.sized .mosaic { height:var(--hero-h); min-height:0; }
    .hero-mosaic.sized .mo-tile { overflow:hidden; }
  }
  .mo-tile:not(.big) .mo-txt { padding:36px 16px 14px; }
  .mo-tile:not(.big) .meta { margin-top:2px; }
  .price { white-space:nowrap; }
  .mo-tile .meta { flex-wrap:wrap; row-gap:4px; }

  /* ===== categories section: five styles (Admin → Homepage → Categories). "List" is the original look. ===== */
  .cats { grid-template-columns:repeat(var(--cat-cols, 3), minmax(0, 1fr)); }
  .cat .ico { width:var(--cat-ico, 46px); height:var(--cat-ico, 46px); }
  .cat .ico svg { width:calc(var(--cat-ico, 46px) * .48); height:calc(var(--cat-ico, 46px) * .48); }
  .cats.no-count .count { display:none; }

  /* Cards — tall cards with the icon on top, centred */
  .cats.cs-cards { gap:18px; }
  .cats.cs-cards .cat { flex-direction:column; justify-content:center; text-align:center; gap:14px; padding:30px 18px 26px;
    box-shadow:0 14px 30px -22px color-mix(in srgb, var(--primary) 60%, transparent); }
  .cats.cs-cards .cat:hover { transform:translateY(-4px); }
  .cats.cs-cards .cat .ico { width:var(--cat-ico, 64px); height:var(--cat-ico, 64px); }
  .cats.cs-cards .cat .ico svg { width:calc(var(--cat-ico, 64px) * .46); height:calc(var(--cat-ico, 64px) * .46); }
  .cats.cs-cards .cat .go { display:none; }

  /* Chips — compact rounded buttons that wrap */
  .cats.cs-chips { display:flex; flex-wrap:wrap; gap:10px; }
  .cats.cs-chips .cat { padding:6px 18px 6px 6px; border-radius:999px; gap:10px; }
  .cats.cs-chips .cat .ico { width:var(--cat-ico, 34px); height:var(--cat-ico, 34px); }
  .cats.cs-chips .cat .ico svg { width:calc(var(--cat-ico, 34px) * .5); height:calc(var(--cat-ico, 34px) * .5); }
  .cats.cs-chips .cat > div { display:flex; align-items:baseline; gap:8px; }
  .cats.cs-chips .cat h4 { font-size:16px; }
  .cats.cs-chips .cat .count { font-size:12px; }
  .cats.cs-chips .cat .go { display:none; }

  /* Colour tiles — the theme's colours with a big soft icon */
  .cats.cs-tiles .cat { position:relative; overflow:hidden; align-items:flex-end; min-height:150px; padding:22px 24px; border:0; color:#fff;
    background:linear-gradient(135deg, var(--img-a), var(--img-b)); }
  .cats.cs-tiles .cat .ico, .cats.plain.cs-tiles .cat .ico { position:absolute; top:-18px; inset-inline-end:-18px; width:var(--cat-ico, 120px); height:var(--cat-ico, 120px);
    background:rgba(255,255,255,.14); color:rgba(255,255,255,.9); }
  .cats.cs-tiles .cat .ico svg { width:calc(var(--cat-ico, 120px) * .42); height:calc(var(--cat-ico, 120px) * .42); }
  .cats.cs-tiles .cat h4 { color:#fff; font-size:20px; }
  .cats.cs-tiles .cat .count { color:rgba(255,255,255,.8); }
  .cats.cs-tiles .cat .go { color:#fff; position:relative; }
  .cats.cs-tiles .cat:hover { transform:translateY(-3px); filter:brightness(1.06); }

  /* Lines — a clean list with divider lines, no boxes */
  .cats.cs-lines { gap:0 28px; }
  [data-theme] .cats.cs-lines .cat { background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:16px 2px; }
  .cats.cs-lines .cat:hover { transform:none; }
  .cats.cs-lines .cat:hover h4 { color:var(--accent); }

  @media (max-width:820px) {
    .cats:not(.cs-chips) { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width:520px) {
    .cats:not(.cs-chips) { grid-template-columns:1fr; }
    .cats.cs-cards, .cats.cs-tiles { grid-template-columns:1fr 1fr; }
    .cats.cs-cards .cat { padding:20px 10px; }
  }

  /* ===== categories: newest article's picture, its title and a "New" badge (all off unless chosen) ===== */
  .cat .cat-pic, .cat .cat-latest, .cat .cat-new { display:none; }
  .cats.with-latest .cat-latest { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:6px; font-size:13px; line-height:1.45; color:var(--muted); }
  .cats.with-new .cat-new { display:inline-block; vertical-align:middle; margin-inline-start:6px; padding:1px 8px; border-radius:99px; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; letter-spacing:.02em; }
  .cat > div { min-width:0; }

  /* Picture cards — the newest article's picture on top, the icon on a badge, name, count and latest title */
  .cats.cs-photo { gap:18px; }
  .cats.cs-photo .cat { flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; box-shadow:0 14px 30px -22px color-mix(in srgb, var(--primary) 60%, transparent); }
  .cats.cs-photo .cat:hover { transform:translateY(-4px); }
  .cats.cs-photo .cat .cat-pic { display:block; aspect-ratio:16 / 10; border-radius:0; transition:transform .5s ease; }
  .cats.cs-photo .cat:hover .cat-pic { transform:scale(1.04); }
  .cats.cs-photo .cat .ico { position:relative; z-index:1; margin:-24px 18px 0; width:var(--cat-ico, 48px); height:var(--cat-ico, 48px); background:var(--card); box-shadow:0 0 0 4px var(--card), 0 6px 14px -6px rgba(0,0,0,.35); }
  .cats.plain.cs-photo .cat .ico { background:color-mix(in srgb, var(--text) 9%, var(--card)); }
  .cats.cs-photo .cat > div { padding:10px 18px 20px; }
  .cats.cs-photo .cat .go { display:none; }
  .cats.cs-photo .cat-latest { color:var(--text); opacity:.75; }

  /* Cards with the picture on top */
  .cats.cs-cards.with-pic .cat { padding-top:0; overflow:hidden; }
  .cats.cs-cards.with-pic .cat .cat-pic { display:block; align-self:stretch; aspect-ratio:16 / 9; margin:0 -18px; border-radius:0; }
  .cats.cs-cards.with-pic .cat .ico { position:relative; margin-top:-34px; box-shadow:0 0 0 4px var(--card); background:color-mix(in srgb, var(--text) 9%, var(--card)); }

  /* Colour tiles with the picture behind, darkened so the text stays readable */
  .cats.cs-tiles.with-pic .cat .cat-pic { display:block; position:absolute; inset:0; aspect-ratio:auto; border-radius:0; z-index:0; transition:transform .5s ease; }
  .cats.cs-tiles.with-pic .cat:hover .cat-pic { transform:scale(1.05); }
  .cats.cs-tiles.with-pic .cat::after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.12) 70%); }
  .cats.cs-tiles .cat > div, .cats.cs-tiles .cat .go { position:relative; z-index:2; }
  .cats.cs-tiles .cat .ico { z-index:2; }
  .cats.cs-tiles .cat-latest { color:rgba(255,255,255,.85); }
  @media (prefers-reduced-motion: reduce) { .cat .cat-pic { transition:none; } }

  /* category pictures always stay inside their frame */
  .cats.with-pic .cat { overflow:hidden; }
  .cats .cat .cat-pic { max-width:100%; background-position:center; background-repeat:no-repeat; }
  .cats.cs-cards.with-pic .cat .cat-pic { max-width:none; }               /* edge to edge inside the card (the card clips it) */
  .cats.cs-photo .cat .cat-pic { aspect-ratio:100 / var(--cat-pic-h, 62.5); }
  .cats.cs-cards.with-pic .cat .cat-pic { aspect-ratio:100 / var(--cat-pic-h, 56.25); }
  .cats.cs-tiles.with-pic .cat { min-height:calc(150px * var(--cat-pic-h, 62.5) / 62.5); }
  /* "Whole picture": shown complete, the rest of the frame softly tinted */
  .cats.fit-whole .cat .cat-pic.photo { background-size:contain; background-color:color-mix(in srgb, var(--text) 7%, var(--card)); }
  .cats.no-zoom .cat:hover .cat-pic { transform:none; }

  /* width of all sections (Admin → Homepage → Width of all sections) */
  .wrap { max-width:var(--page-w, 1100px); }

  /* section headings (Latest, Popular, Categories…): size, line and alignment from Admin → Homepage → Sections */
  h2 { font-size:calc(13px * var(--sec-h, 1)); border-bottom-width:var(--sec-line, 2px); text-align:var(--sec-align, start); }
  html[dir="rtl"] h2 { font-size:calc(16px * var(--sec-h, 1)); }
  .news h2 { font-size:30px; border:0; text-align:center; }
  .body h2 { font-size:26px; border:0; text-align:inherit; }
  .wf-part h2 { font-size:24px; border:0; text-align:inherit; }
  /* the right-to-left heading size is only for section headings: big headings keep their size in Dhivehi and Arabic too */
  html[dir="rtl"] .news h2 { font-size:30px; }
  html[dir="rtl"] .body h2 { font-size:26px; }
  html[dir="rtl"] .wf-part h2 { font-size:24px; }

  /* ===== sponsors (Admin → Sponsors) ===== */
  .sponsors-sec { padding:8px 0 56px; scroll-margin-top:20px; }
  .sp-text { color:var(--muted); margin:-6px 0 22px; }
  .sponsors { display:flex; flex-wrap:wrap; gap:18px 34px; align-items:center; }
  .sponsor { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text); text-align:center; }
  .sponsor img { height:var(--sp-h, 64px); width:auto; max-width:calc(var(--sp-h, 64px) * 3.2); object-fit:contain; transition:filter .25s, opacity .25s, transform .2s; }
  .sp-initial { display:grid; place-items:center; width:var(--sp-h, 64px); height:var(--sp-h, 64px); border-radius:50%; background:color-mix(in srgb, var(--text) 9%, transparent);
    font-weight:700; font-size:calc(var(--sp-h, 64px) * .42); color:var(--heading); }
  .sp-name { font-size:13px; color:var(--muted); }
  a.sponsor:hover img { transform:translateY(-2px); }
  a.sponsor:hover .sp-name { color:var(--heading); }
  .sp-grey img { filter:grayscale(1); opacity:.7; }
  .sp-grey a.sponsor:hover img, .sp-grey a.sponsor:focus-visible img { filter:none; opacity:1; }
  /* cards */
  .sponsors.sp-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(calc(var(--sp-h, 64px) * 2.6 + 40px), 1fr)); gap:16px; }
  .sp-cards .sponsor { justify-content:center; padding:22px 16px; min-height:calc(var(--sp-h, 64px) + 70px); background:var(--card); border:var(--card-border); border-radius:var(--radius); transition:transform .15s, border-color .15s; }
  [data-theme="ink"] .sp-cards .sponsor { border:1px solid var(--line); }
  .sp-cards a.sponsor:hover { transform:translateY(-3px); border-color:var(--primary); }
  .sp-cta { margin-top:24px; }
  [data-mode="dark"] .sponsor img { background:rgba(255,255,255,.9); border-radius:8px; padding:6px; }   /* dark logos stay visible */
  /* the small strip above every footer */
  .sp-strip { border-top:1px solid var(--line); padding:14px 0; }
  .sp-strip .wrap { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
  .sp-strip > .wrap > span { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  html[dir="rtl"] .sp-strip > .wrap > span { letter-spacing:0; }
  .sp-strip-logos { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
  .sp-strip-logos img { height:28px; width:auto; max-width:120px; object-fit:contain; }
  .sp-strip-logos .sp-name { font-size:13px; }
  /* sponsors follow the section heading alignment (start or centre) */
  .sponsors.sp-logos { justify-content:var(--sec-align, start); }
  .sponsors-sec .sp-text, .sponsors-sec .sp-cta { text-align:var(--sec-align, start); }

  /* ===== sponsors: levels, spotlight, top bar, gliding logos, in articles ===== */
  /* main sponsors: big cards with their message */
  .sp-main { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin-bottom:26px; }
  .sp-main-card { flex-direction:row; align-items:center; gap:20px; text-align:start; padding:22px 24px; background:var(--card); border:var(--card-border);
    border-radius:calc(var(--radius) * 1.3); box-shadow:0 18px 36px -26px color-mix(in srgb, var(--primary) 70%, transparent); transition:transform .15s, border-color .15s; }
  [data-theme="ink"] .sp-main-card { border:1px solid var(--line); }
  a.sp-main-card:hover { transform:translateY(-3px); border-color:var(--primary); }
  .sp-main-logo { flex:none; display:grid; place-items:center; width:calc(var(--sp-h, 64px) * 1.6); height:calc(var(--sp-h, 64px) * 1.2); background:#fff; border-radius:var(--radius); padding:10px; }
  .sp-main-logo img { max-width:100%; max-height:100%; height:auto; object-fit:contain; }
  .sp-main-txt { display:grid; gap:4px; min-width:0; }
  .sp-main-txt b { font-size:20px; color:var(--heading); }
  .sp-main-txt span { color:var(--text); opacity:.8; font-size:15px; }
  .sp-main-txt em { font-style:normal; font-size:13px; color:var(--accent); font-weight:600; }
  .sp-initial.big { width:calc(var(--sp-h, 64px) * 1.1); height:calc(var(--sp-h, 64px) * 1.1); }
  .sp-tier { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:6px 0 12px; text-align:var(--sec-align, start); }
  html[dir="rtl"] .sp-tier { letter-spacing:0; font-size:14px; }
  .sp-supporters { --sp-h:calc(var(--sp-h-base, 64px) * .6); margin-top:4px; }
  .sponsors + .sp-tier, .sp-marquee + .sp-tier { margin-top:26px; }

  /* gliding logos (marquee): the row is doubled and slides by itself; pauses when pointed at */
  .sp-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .sp-marquee > .sponsors, .sp-marquee .sp-bar-track { display:flex; flex-wrap:nowrap; width:max-content; animation:sp-glide var(--sp-speed, 30s) linear infinite; }
  .sp-marquee > .sponsors .sponsor, .sp-marquee .sp-bar-track .sponsor { margin-inline-end:34px; }
  .sp-marquee > .sponsors { gap:0; }
  .sp-marquee:hover > .sponsors, .sp-marquee:hover .sp-bar-track, .sp-marquee:focus-within > .sponsors { animation-play-state:paused; }
  @keyframes sp-glide { to { transform:translateX(-50%); } }
  html[dir="rtl"] .sp-marquee > .sponsors, html[dir="rtl"] .sp-marquee .sp-bar-track { animation-name:sp-glide-rtl; }
  @keyframes sp-glide-rtl { to { transform:translateX(50%); } }
  @media (prefers-reduced-motion: reduce) {
    .sp-marquee > .sponsors, .sp-marquee .sp-bar-track { animation:none; flex-wrap:wrap; width:auto; }
    .sp-marquee [data-sp-copy] { display:none; }
    .sp-marquee { -webkit-mask-image:none; mask-image:none; }
  }

  /* A sponsor picture placed by the admin's "picture position" tool: --pic (the picture), --px/--py (the point that
     stays in view, and where the picture sits when smaller than its frame), --pz (zoom), --pf (cover = fill, contain = whole) */
  .fpic { position:relative; overflow:hidden; }
  .fpic::before { content:""; position:absolute; inset:0; background:var(--pic) no-repeat; background-size:var(--pf, cover); background-position:var(--px, 50%) var(--py, 50%);
    transform:scale(var(--pz, 1)); transform-origin:var(--px, 50%) var(--py, 50%); transition:transform .7s ease; }
  @media (prefers-reduced-motion: reduce) { .fpic::before { transition:none; } }

  /* spotlight: a big banner at the top of the homepage */
  .sp-spotlight { margin:28px 0 8px; }
  .sp-spot { position:relative; display:grid; min-height:260px; border-radius:calc(var(--radius) * 1.6); overflow:hidden; }
  .sp-spot > * { grid-area:1 / 1; }
  .sp-spot-bg { aspect-ratio:auto; height:100%; border-radius:0; }
  .sp-spot-bg.fpic { background:var(--primary); }
  .sp-spot-in { position:relative; display:flex; align-items:center; gap:28px; padding:34px 40px; color:#fff;
    background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.35) 60%, rgba(0,0,0,.1)); }
  html[dir="rtl"] .sp-spot-in { background:linear-gradient(270deg, rgba(0,0,0,.72), rgba(0,0,0,.35) 60%, rgba(0,0,0,.1)); }
  .sp-spot-logo { flex:none; display:grid; place-items:center; width:150px; height:110px; background:#fff; border-radius:var(--radius); padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.3); }
  .sp-spot-logo img { max-width:100%; max-height:100%; object-fit:contain; }
  .sp-spot-txt { display:grid; gap:8px; max-width:620px; }
  .sp-spot-txt .kicker { color:rgba(255,255,255,.8); }
  .sp-spot-txt h2 { font-size:34px; line-height:1.15; color:#fff; border:0; padding:0; margin:0; text-transform:none; letter-spacing:0; text-align:start; }
  html[dir="rtl"] .sp-spot-txt h2 { font-size:34px; line-height:1.5; }
  .sp-spot-txt p { font-size:17px; opacity:.92; }
  .sp-spot-btn { justify-self:start; margin-top:6px; background:#fff; color:#111; border-color:#fff; }
  .sp-spotlight .hero-slides { border:0; }
  .sp-spotlight .hero-slides > .slide { border:0; }
  .sp-spotlight .hero-dots { bottom:14px; }
  .sp-spotlight .hero-dots button { background:#fff; }

  /* the slim bar under the header */
  .sp-bar { background:color-mix(in srgb, var(--primary) 6%, var(--bg)); border-bottom:1px solid var(--line); }
  .sp-bar .wrap { display:flex; align-items:center; gap:18px; min-height:46px; }
  .sp-bar-label { flex:none; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  html[dir="rtl"] .sp-bar-label { letter-spacing:0; font-size:13px; }
  .sp-bar-logos { flex:1; min-width:0; }
  .sp-bar-track { display:flex; align-items:center; gap:28px; }
  .sp-bar-logos:not(.sp-marquee) .sp-bar-track { flex-wrap:wrap; }
  .sp-bar img { height:26px; width:auto; max-width:110px; object-fit:contain; }
  .sp-bar .sp-name { font-size:13px; font-weight:600; color:var(--text); }
  [data-mode="dark"] .sp-bar img { background:rgba(255,255,255,.9); border-radius:5px; padding:3px; }

  /* in articles */
  .sp-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 10px; font-size:13px; color:var(--muted); }
  .sp-line-link { display:inline-flex; align-items:center; gap:6px; color:var(--heading); }
  .sp-line-link img { height:22px; width:auto; max-width:90px; object-fit:contain; }
  .sp-box { margin:34px 0 8px; }
  .sp-box-in { display:flex; align-items:center; gap:18px; padding:18px 20px; background:var(--card); border:var(--card-border); border-radius:var(--radius); color:var(--text); }
  [data-theme="ink"] .sp-box-in { border:1px solid var(--line); }
  a.sp-box-in:hover { border-color:var(--primary); }
  .sp-box-logo { flex:none; display:grid; place-items:center; width:96px; height:68px; background:#fff; border-radius:8px; padding:8px; }
  .sp-box-logo img { max-width:100%; max-height:100%; object-fit:contain; }
  .sp-box-txt { flex:1; display:grid; gap:2px; min-width:0; }
  .sp-box-txt b { color:var(--heading); font-size:17px; }
  .sp-box-txt span:not(.kicker) { font-size:14px; opacity:.8; }

  @media (max-width:700px) {
    .sp-spot-in { flex-direction:column; align-items:flex-start; padding:24px 22px; gap:16px; }
    .sp-spot-logo { width:110px; height:80px; }
    .sp-spot-txt h2, html[dir="rtl"] .sp-spot-txt h2 { font-size:26px; }
    .sp-main-card { padding:16px; gap:14px; }
    .sp-box-in { flex-wrap:wrap; }
    .sp-bar-label { display:none; }
  }
  /* gliding row with few logos: stands still and wraps like a normal row */
  .sp-still > .sponsors, .sp-still .sp-bar-track { flex-wrap:wrap; }
  .sp-still.sp-bar-logos .sp-bar-track { gap:28px; }

  /* ===== sale prices ===== */
  .price.on-sale s, .btn s.was { opacity:.6; font-weight:400; margin-inline-end:2px; }
  .sale-tag { display:inline-block; padding:1px 8px; border-radius:99px; background:#b3261e; color:#fff; font-size:11px; font-weight:700; letter-spacing:.03em; }

  /* ===== announcement bar at the very top (Admin → Announcements) ===== */
  .ann-bar { position:relative; display:grid; z-index:40; font-size:calc(14px * var(--ann-size, 1)); }
  .ann-bar.ann-sticky { position:sticky; top:0; }
  .ann-track { display:grid; }
  .ann { grid-area:1 / 1; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:calc(9px * var(--ann-size, 1)) 54px;
    background:var(--ann-bg); color:var(--ann-fg); text-align:center; opacity:0; visibility:hidden; transition:opacity .45s, visibility 0s .45s; }
  .ann.on { opacity:1; visibility:visible; transition:opacity .45s; }
  .ann-start .ann { justify-content:flex-start; text-align:start; }
  .ann-ico { font-size:1.1em; }
  .ann-text { font-weight:600; }
  .ann-left { font-size:.86em; padding:1px 9px; border-radius:99px; background:color-mix(in srgb, var(--ann-fg) 18%, transparent); }
  .ann-link { color:inherit; text-decoration:underline; text-underline-offset:3px; font-weight:700; white-space:nowrap; }
  .ann-nav, .ann-close { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:28px; height:28px; border:0; border-radius:50%; cursor:pointer; font-size:18px; line-height:1;
    background:color-mix(in srgb, #000 12%, transparent); color:#fff; display:grid; place-items:center; }
  .ann-prev { inset-inline-start:10px; } .ann-next { inset-inline-start:42px; }
  .ann-close { inset-inline-end:10px; font-size:20px; }
  .ann-start .ann { padding-inline-start:80px; }
  .ann-nav:hover, .ann-close:hover { background:color-mix(in srgb, #000 28%, transparent); }
  @media (prefers-reduced-motion: reduce) { .ann { transition:none; } }
  @media (max-width:600px) { .ann { padding:8px 42px; font-size:.95em; } .ann-next { display:none; } .ann-prev { display:none; } }

  /* ===== sponsor banners (Admin → Sponsors → Banners): five layouts, every size and colour adjustable ===== */
  .bn-slot { margin:26px 0; display:grid; }
  .bn-rotate > .bn { grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .6s, visibility 0s .6s, transform .6s; }
  .bn-rotate > .bn.on { opacity:1; visibility:visible; transition:opacity .6s, transform .6s; }
  .bn-rotate > .bn.bn-anim-slide:not(.on) { transform:translateX(30px); }
  .bn { position:relative; display:flex; overflow:hidden; min-height:var(--bn-h); border-radius:var(--bn-r); background:var(--bn-bg); color:var(--bn-fg);
    font-size:calc(15px * var(--bn-t)); text-decoration:none; isolation:isolate; box-shadow:0 14px 34px -24px rgba(0,0,0,.45); }
  .bn-anim-zoom:hover .fpic::before { transform:scale(calc(var(--pz, 1) * 1.06)); }
  .bn-body { position:relative; z-index:2; flex:1; display:flex; align-items:center; gap:18px; padding:22px 26px; min-width:0; }
  .bn-txt { flex:1; display:grid; gap:4px; min-width:0; }
  .bn-kicker { font-size:.72em; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
  html[dir="rtl"] .bn-kicker { letter-spacing:0; font-size:.8em; }
  .bn-head { font-size:1.6em; line-height:1.2; }
  html[dir="rtl"] .bn-head { line-height:1.6; }
  .bn-text { opacity:.88; }
  .bn-btn { flex:none; padding:.6em 1.2em; border-radius:var(--btn-radius); background:var(--bn-fg); color:var(--bn-bg); font-weight:700; font-size:.9em; white-space:nowrap; }
  .bn-logo { flex:none; display:grid; place-items:center; width:calc(var(--bn-h) * .55); max-width:130px; height:calc(var(--bn-h) * .42); max-height:96px; min-height:44px;
    background:#fff; border-radius:calc(var(--bn-r) * .6); padding:8px; }
  .bn-logo img { max-width:100%; max-height:100%; object-fit:contain; }
  .bn-align-center .bn-body { justify-content:center; text-align:center; flex-direction:column; }
  .bn-align-center .bn-txt { flex:none; }
  a.bn:hover .bn-btn { filter:brightness(1.08); }
  /* split: picture on one side */
  .bn-split.has-pic .bn-pic { flex:0 0 42%; }
  /* overlay: the picture fills the banner, text over it (darkness adjustable) */
  .bn-overlay .bn-pic { position:absolute; inset:0; z-index:0; }
  .bn-overlay.has-pic { color:#fff; }
  .bn-overlay.has-pic::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(0,0,0,var(--bn-o)), rgba(0,0,0,calc(var(--bn-o) * .35))); }
  html[dir="rtl"] .bn-overlay.has-pic::after { background:linear-gradient(270deg, rgba(0,0,0,var(--bn-o)), rgba(0,0,0,calc(var(--bn-o) * .35))); }
  .bn-overlay.has-pic .bn-btn { background:#fff; color:#111; }
  /* picture only: the sponsor's own artwork */
  .bn-image .bn-pic { position:absolute; inset:0; }
  .bn-image .bn-body { align-items:flex-end; justify-content:flex-start; padding:10px 12px; }
  .bn-image .bn-txt > :not(.bn-kicker), .bn-image .bn-logo, .bn-image .bn-btn { display:none; }
  .bn-image .bn-kicker { background:rgba(0,0,0,.55); color:#fff; padding:2px 8px; border-radius:99px; font-size:10px; opacity:1; }
  /* text only: a coloured box (layout "box") */
  .bn-box .bn-pic { display:none; }
  /* compact: a slim line */
  .bn-compact { min-height:min(var(--bn-h), 88px); }
  .bn-compact .bn-pic { flex:0 0 120px; }
  .bn-compact .bn-body { padding:12px 18px; }
  .bn-compact .bn-head { font-size:1.15em; }
  .bn-compact .bn-text { display:none; }
  .bn-compact .bn-logo { height:44px; width:80px; }
  /* places */
  .bn-in-text { margin:1.6em 0; }
  .bn-list { margin:4px 0 20px; }
  .bn-bottom { margin:30px 0 10px; }
  .bn-preview { padding-top:30px; }
  @media (max-width:640px) {
    .bn { flex-direction:column; min-height:0; }
    .bn-split.has-pic .bn-pic, .bn-compact .bn-pic { flex:none; height:150px; }
    .bn-overlay, .bn-image { min-height:var(--bn-h); }
    .bn-body { flex-wrap:wrap; padding:18px; }
    .bn-head { font-size:1.3em; }
  }
  @media (prefers-reduced-motion: reduce) { .bn-rotate > .bn, .bn-pic { transition:none; } }
  /* banners inside article text don't take the text's link style */
  .body a.bn, .body a.bn *, .article a.bn, .article a.bn * { text-decoration:none; }
  .body .bn { color:var(--bn-fg); }
  .body .bn-overlay.has-pic { color:#fff; }

  /* ===== subscription plans (Admin → Subscriptions) ===== */
  .plans-sec { padding:8px 0 56px; scroll-margin-top:24px; }
  .plans-text { color:var(--muted); margin:-6px 0 22px; text-align:var(--sec-align, start); }
  .plans { display:grid; grid-template-columns:repeat(var(--plan-cols, 3), minmax(0, 1fr)); gap:18px; align-items:stretch; }
  .plan { position:relative; display:flex; flex-direction:column; gap:12px; padding:26px 24px; background:var(--card); border:var(--card-border); border-radius:calc(var(--radius) * 1.4); }
  [data-theme="ink"] .plan { border:1px solid var(--line); }
  .plan-top { border:2px solid var(--primary); box-shadow:0 22px 44px -26px color-mix(in srgb, var(--primary) 70%, transparent); transform:translateY(-6px); }
  .plan-ribbon { position:absolute; top:-12px; inset-inline-start:22px; padding:3px 12px; border-radius:99px; background:var(--primary); color:var(--on-primary); font-size:12px; font-weight:700; }
  .plan h3 { font-size:21px; color:var(--heading); }
  .plan-price b { font-size:34px; color:var(--heading); font-family:"DV", "AR", "Segoe UI", system-ui, sans-serif; }
  .plan-price span { color:var(--muted); margin-inline-start:6px; font-size:14px; }
  .plan-inc { font-size:14px; } .plan-inc span { color:var(--muted); }
  .plan-inc a { color:var(--heading); text-decoration:underline; text-underline-offset:3px; }
  .plan-list { list-style:none; padding:0; display:grid; gap:7px; font-size:15px; }
  .plan-list li::before { content:"✓"; color:var(--accent); font-weight:700; margin-inline-end:8px; }
  .plan-btn { margin-top:auto; justify-content:center; }
  .plans-list { grid-template-columns:1fr; }
  .plans-list .plan { flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 24px; padding:18px 22px; transform:none; }
  .plans-list .plan h3 { min-width:160px; } .plans-list .plan-list { display:none; } .plans-list .plan-btn { margin:0; margin-inline-start:auto; }
  .plan-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 6px; padding:10px 14px; background:var(--card); border-radius:var(--radius); font-size:14px; }
  .col-text { color:var(--muted); margin:-4px 0 6px; }
  .my-plans { list-style:none; padding:0; display:grid; gap:10px; margin-bottom:10px; }
  .acct-plan { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
  @media (max-width:820px) { .plans { grid-template-columns:1fr; } .plan-top { transform:none; } }
  /* small phones: everything in the header fits, in every language, even with the account button */
  @media (max-width:440px) {
    header .wrap, .wrap { padding-inline:16px; }
    .right { gap:6px; }
    .lang button { padding:4px 6px; font-size:12px; }
    .lang button[data-l="dv"] { font-size:13px; }
    .mode, .burger, .acct-link, .right .btn.donate { width:32px; height:32px; }
    header .brand { gap:8px; }
    header .brand span, header .brand b { font-size:17px; }
  }

  /* ===== elite writers and invitations ===== */
  .elite-badge { display:inline-flex; align-items:center; gap:3px; margin-inline-start:8px; padding:1px 9px; border-radius:99px; vertical-align:middle;
    background:linear-gradient(135deg, #c9a24a, #e8cf8a); color:#3a2c05; font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
  .author-head h1 + .elite-badge { margin:4px 0 6px; font-size:12px; }
  .writer-card .elite-badge { margin:2px 0; justify-self:start; }
  .invite { max-width:680px; margin:48px auto 64px; padding:34px; background:var(--card); border:var(--card-border); border-radius:calc(var(--radius) * 1.4); }
  [data-theme="ink"] .invite { border:1px solid var(--line); }
  .invite h1 { font-size:28px; color:var(--heading); margin-bottom:12px; line-height:1.3; }
  .invite-badge .elite-badge { margin:0 0 12px; font-size:13px; padding:3px 12px; }
  .invite-offer { font-size:17px; margin-bottom:14px; }
  .invite-msg { margin:0 0 16px; padding:14px 18px; border-inline-start:4px solid var(--accent); background:var(--bg); border-radius:8px; font-style:italic; }
  .invite-rules { margin:6px 0 18px; } .invite-rules summary { cursor:pointer; font-weight:700; color:var(--heading); }
  .invite-rules .body { max-height:46vh; overflow:auto; font-size:15px; margin-top:10px; padding:4px 14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
  .invite-agree { display:flex; gap:8px; align-items:flex-start; margin:8px 0 14px; }
  .invite .auth { margin:10px 0 0; padding:0; box-shadow:none; }
  .invite .wrap { padding:0; }

  /* footnotes in articles (also the ones brought over from WordPress): small numbers, notes at the end */
  .body sup { line-height:0; font-size:.72em; }
  .body sup a { text-decoration:none; padding:0 1px; }
  .body ol.footnotes { margin-top:28px; padding-top:14px; border-top:1px solid var(--line); font-size:.86em; color:var(--muted); }
  .body ol.footnotes li { margin-bottom:6px; }
  .body ol.footnotes a[href^="#fn-"] { text-decoration:none; }