/* ════════════════════════════════════════════════════════════════════
   Targo blog — the reading pages
   ════════════════════════════════════════════════════════════════════
   The rest of the site is dark and lit. These pages are for reading, so
   they are white (owner, 2 October: "white, formal, natural, but very
   luxurious and unique, and it makes a person actually read").

   What carries the luxury here is type and restraint, not effects:
   - a classic Naskh for the text, because long Arabic reads best in it,
     and the academy's own Tajawal for headings and controls;
   - one measured column, generous leading, real margins;
   - two colours only, the academy's navy and a deep gold, used as fine
     rules and small marks; links in a plain, natural blue.
   Nothing here is generated: build.js writes the markup, this file only
   styles it.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#12161F;          /* headings */
  --text:#262B35;         /* body copy */
  --muted:#667085;
  --hair:#E8E3D8;         /* warm hairline */
  --paper:#FFFFFF;
  --cream:#FBF8F2;        /* boxes */
  --navy:#0E2556;
  --navy-2:#173A80;
  --gold:#A67C2E;         /* deep enough to read on white */
  --gold-soft:#D9B66A;
  --link:#1558D6;         /* "a natural blue" */
  --link-hover:#0B3FA8;
  --measure:700px;
  --serif:'Noto Naskh Arabic','Amiri','Traditional Arabic',serif;
  --sans:'Tajawal','Segoe UI',Tahoma,sans-serif;
}

*{ box-sizing:border-box; }
/* Hidden means hidden: an element given its own display (grid, flex) kept
   showing with the hidden attribute on it, so the category buttons on the
   blog's front page did nothing (owner, 2 October). */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--serif); font-size:18px; line-height:2.05;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
@media (min-width:900px){ body{ font-size:19px; } }
img{ max-width:100%; height:auto; }
a{ color:var(--link); }
:focus-visible{ outline:2px solid var(--link); outline-offset:3px; border-radius:4px; }
.bl-skip{ position:absolute; inset-inline-start:-999px; top:8px; background:#fff; padding:8px 14px; z-index:100; }
.bl-skip:focus{ inset-inline-start:8px; }

/* ── Reading progress ─────────────────────────────────────────────── */
.bl-progress{ position:fixed; top:0; inset-inline:0; height:3px; z-index:90; pointer-events:none; }
.bl-progress i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0); transform-origin:right; will-change:transform; }

/* ── The masthead: home, the blog, the department, and booking ─────
   A reader from Google has never seen the home page, so the way home and
   the way to book are always on screen. */
.bl-mast{
  position:sticky; top:0; z-index:80; background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--hair);
}
.bl-mast.scrolled{ box-shadow:0 6px 24px rgba(14,37,86,.07); }
.bl-mast-in{ max-width:1180px; margin:0 auto; padding:10px clamp(16px,4vw,32px);
  display:flex; align-items:center; gap:clamp(10px,2vw,24px); }
.bl-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto; }
.bl-brand b{ font-family:var(--sans); font-weight:800; font-size:1.02rem; line-height:1.1; display:block; }
.bl-brand small{ font-family:var(--sans); color:var(--gold); font-weight:700; font-size:.72rem; letter-spacing:.02em; display:block; }
.bl-nav{ display:flex; align-items:center; gap:clamp(10px,1.8vw,22px); margin-inline-start:auto; font-family:var(--sans); }
.bl-nav a{ color:var(--ink); text-decoration:none; font-weight:600; font-size:.92rem; white-space:nowrap; }
.bl-nav a:hover{ color:var(--navy-2); }
/* The way home: the same blue button as the rest of the site (owner,
   2 October), drawn for this light bar. */
.bl-nav a.bl-home{
  display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:7px 15px 7px 16px; border-radius:99px;
  border:2px solid #3B82F6; background:#EAF2FF; color:#1D4ED8; font-weight:700;
  transition:background .25s ease, color .25s ease;
}
.bl-nav a.bl-home:hover, .bl-nav a.bl-home:focus-visible{ background:#3B82F6; color:#fff; }
.bl-nav a.bl-home svg{ width:16px; height:16px; flex:0 0 auto; }
.bl-nav a.bl-home .arr{ transform:scaleX(-1); }
.bl-nav a.bl-home .hb-long{ display:none; }
@media (min-width:1100px){
  .bl-nav a.bl-home .hb-long{ display:inline; }
  .bl-nav a.bl-home .hb-short{ display:none; }
}
.bl-book{
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:8px 18px; border-radius:99px;
  background:var(--navy); color:#fff !important; text-decoration:none; font-family:var(--sans); font-weight:800; font-size:.9rem;
  white-space:nowrap; box-shadow:0 6px 18px rgba(14,37,86,.18); transition:background .2s ease, transform .2s ease;
}
.bl-book:hover{ background:var(--navy-2); }
.bl-book:active{ transform:scale(.98); }
.bl-book .s{ display:none; }
@media (max-width:900px){
  .bl-nav .bl-opt{ display:none; }
}
@media (max-width:560px){
  .bl-brand small{ display:none; }
  .bl-book .l{ display:none; } .bl-book .s{ display:inline; }
  .bl-book{ padding-inline:14px; font-size:.84rem; min-height:40px; }
  .bl-nav{ gap:12px; }
  .bl-nav a.bl-home{ min-height:40px; padding-inline:12px; gap:5px; font-size:.84rem; }
}
/* On a phone the bar holds the logo, the way home and booking; the blog's
   name would push the button off the edge. */
@media (max-width:480px){
  .bl-brand{ display:none; }
  .bl-nav{ flex:1 1 auto; margin-inline-start:0; justify-content:space-between; }
}
/* Nothing in the bar may push another past the edge (owner, 3 October: the
   booking button was stuck to the left edge on a phone whose letters are
   wider than ours). The bar keeps its side margins; the buttons give way. */
.bl-nav{ min-width:0; }
@media (max-width:380px){
  .bl-book{ padding-inline:12px; font-size:.8rem; }
  .bl-nav a.bl-home{ padding-inline:10px; }
}

/* ── Article header ───────────────────────────────────────────────── */
.bl-head{ max-width:860px; margin:0 auto; padding:clamp(28px,6vw,64px) clamp(18px,5vw,40px) 0; text-align:center; }
.bl-crumbs{ font-family:var(--sans); font-size:.82rem; color:var(--muted); margin:0 0 18px; }
.bl-crumbs a{ color:var(--muted); text-decoration:none; }
.bl-crumbs a:hover{ color:var(--link); text-decoration:underline; }
.bl-crumbs span{ margin:0 7px; color:#B9B2A3; }
.bl-cat{ display:inline-block; font-family:var(--sans); font-weight:800; font-size:.8rem; color:var(--gold);
  letter-spacing:.04em; padding:5px 14px; border:1px solid rgba(166,124,46,.35); border-radius:99px; text-decoration:none; }
.bl-head h1{
  font-family:var(--sans); font-weight:800; color:var(--ink);
  font-size:clamp(1.85rem,5.6vw,3.05rem); line-height:1.45; margin:18px auto 16px; max-width:22ch;
  letter-spacing:-.005em;
}
.bl-dek{ font-size:clamp(1.05rem,2.4vw,1.22rem); color:#4A5161; line-height:2; max-width:58ch; margin:0 auto; }
.bl-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-family:var(--sans); font-size:.85rem; color:var(--muted); margin:22px 0 0; }
.bl-meta b{ color:var(--ink); font-weight:700; }
.bl-meta i{ width:4px; height:4px; border-radius:50%; background:#CFC6B4; align-self:center; }
.bl-rule{ width:72px; height:2px; margin:30px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); border:0; }

/* ── The reading layout: one column, a contents list beside it on wide
   screens (on the left, since the page reads right to left). ───────── */
.bl-layout{ max-width:1180px; margin:0 auto; padding:clamp(26px,5vw,48px) clamp(18px,5vw,40px) 0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:56px; }
@media (min-width:1120px){
  .bl-layout{ grid-template-columns:minmax(0,var(--measure)) 260px; justify-content:center; }
}
.bl-body{ max-width:var(--measure); width:100%; margin:0 auto; min-width:0; }

.bl-toc{ display:none; }
@media (min-width:1120px){
  .bl-toc{ display:block; position:sticky; top:96px; align-self:start; font-family:var(--sans); }
  .bl-toc h2{ font-size:.78rem; color:var(--gold); letter-spacing:.05em; margin:0 0 10px; font-weight:800; }
  .bl-toc ol{ list-style:none; margin:0; padding:0; border-inline-start:1px solid var(--hair); }
  .bl-toc a{ display:block; padding:6px 14px 6px 0; margin-inline-start:-1px; border-inline-start:2px solid transparent;
    color:var(--muted); text-decoration:none; font-size:.86rem; line-height:1.7; }
  .bl-toc a:hover{ color:var(--ink); }
  .bl-toc a.on{ color:var(--navy); border-inline-start-color:var(--gold); font-weight:700; }
  .bl-toc .bl-book{ margin-top:20px; width:100%; white-space:normal; text-align:center; line-height:1.5; padding:10px 14px; }
}
/* On a phone the contents sit at the top of the article, folded. */
.bl-toc-m{ margin:0 0 30px; border:1px solid var(--hair); border-radius:14px; background:var(--cream); font-family:var(--sans); }
.bl-toc-m summary{ cursor:pointer; padding:12px 18px; font-weight:800; color:var(--ink); font-size:.95rem; list-style:none; }
.bl-toc-m summary::-webkit-details-marker{ display:none; }
.bl-toc-m summary::after{ content:"+"; float:left; color:var(--gold); font-weight:800; }
.bl-toc-m[open] summary::after{ content:"–"; }
.bl-toc-m ol{ margin:0; padding:0 38px 14px 18px; }
.bl-toc-m li{ line-height:1.8; padding:3px 0; }
.bl-toc-m a{ color:var(--text); text-decoration:none; font-size:.92rem; }
@media (min-width:1120px){ .bl-toc-m{ display:none; } }

/* ── The text itself ──────────────────────────────────────────────── */
.bl-body > p{ margin:0 0 1.25em; }
.bl-body > p.bl-lead{ font-size:1.12em; color:var(--ink); }
.bl-body h2{
  font-family:var(--sans); font-weight:800; color:var(--ink);
  font-size:clamp(1.42rem,3.6vw,1.78rem); line-height:1.55; margin:2.2em 0 .7em; scroll-margin-top:90px;
  display:flex; align-items:baseline; gap:12px;
}
.bl-body h2::before{ content:""; flex:0 0 auto; width:10px; height:10px; transform:translateY(-.15em) rotate(45deg);
  background:var(--gold); border-radius:2px; }
.bl-body h3{ font-family:var(--sans); font-weight:800; color:var(--navy); font-size:clamp(1.15rem,2.8vw,1.32rem);
  line-height:1.6; margin:1.7em 0 .5em; scroll-margin-top:90px; }
.bl-body strong{ color:var(--ink); font-weight:700; }
.bl-body a{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.bl-body a:hover{ color:var(--link-hover); text-decoration-thickness:2px; }
.bl-body ul, .bl-body ol{ margin:0 0 1.35em; padding:0 1.35em 0 0; }
.bl-body li{ margin:.35em 0; padding-inline-start:.2em; }
.bl-body ul li::marker{ color:var(--gold); }
.bl-body ol li::marker{ color:var(--gold); font-family:var(--sans); font-weight:800; }
.bl-body blockquote{
  margin:1.8em 0; padding:18px 22px; background:var(--cream); border-inline-start:3px solid var(--gold);
  border-radius:0 12px 12px 0; color:var(--ink);
}
.bl-body blockquote p{ margin:0; }
.bl-body blockquote p + p{ margin-top:.8em; }

/* Tables scroll inside themselves on a phone, never the page. */
.bl-table{ margin:1.6em 0 1.9em; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hair); border-radius:14px; }
.bl-table table{ border-collapse:collapse; width:100%; min-width:520px; font-family:var(--sans); font-size:.93rem; line-height:1.75; }
.bl-table th{ background:var(--navy); color:#fff; font-weight:700; text-align:start; padding:12px 14px; }
.bl-table td{ padding:11px 14px; border-top:1px solid var(--hair); vertical-align:top; }
.bl-table tr:nth-child(even) td{ background:#FCFBF8; }

/* ── The academy, inside the article ──────────────────────────────── */
/* The sentence-end invitation: a plain blue link, as the owner asked. */
.bl-body a.bl-cta-link{ font-weight:700; color:var(--link); }

/* The full box: navy, one gold line, one button. */
.bl-ctabox{
  position:relative; margin:2.2em 0; padding:clamp(22px,4vw,30px); border-radius:20px; overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%, #1E4596 0%, var(--navy) 55%, #0A1B40 100%); color:#fff;
  font-family:var(--sans);
}
.bl-ctabox::before{ content:""; position:absolute; inset-inline:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold-soft),transparent); }
.bl-ctabox .k{ color:var(--gold-soft); font-weight:800; font-size:.8rem; letter-spacing:.04em; }
.bl-ctabox h3{ color:#fff; margin:6px 0 8px; font-size:clamp(1.2rem,3vw,1.45rem); line-height:1.5; font-weight:800; }
.bl-ctabox p{ margin:0 0 18px; color:rgba(255,255,255,.86); line-height:1.95; font-size:1rem; }
.bl-ctabox .btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 22px; border-radius:99px;
  background:linear-gradient(135deg,#E9C771,#C99A36); color:#1B1405; font-weight:800; text-decoration:none; font-size:.98rem;
  max-width:100%; text-align:center; line-height:1.5;
}
.bl-ctabox .btn:hover{ filter:brightness(1.05); }
.bl-ctabox .sub{ display:block; margin-top:12px; font-size:.85rem; }
.bl-ctabox .sub a{ color:#CFE0FF; }

/* The department, in cream. */
.bl-eng{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  margin:2em 0; padding:20px 22px; border-radius:18px; background:var(--cream); border:1px solid #EFE7D6;
  font-family:var(--sans);
}
.bl-eng .ic{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#fff; border:1px solid #EFE7D6; color:var(--gold); }
.bl-eng .ic svg{ width:24px; height:24px; }
.bl-eng h3{ margin:0 0 4px; font-size:1.08rem; color:var(--ink); font-weight:800; line-height:1.6; }
.bl-eng p{ margin:0 0 8px; color:#4A5161; font-size:.97rem; line-height:1.9; }
.bl-eng a{ font-weight:700; }

/* "Read also", between paragraphs. */
.bl-also{
  display:flex; gap:14px; align-items:center; margin:1.8em 0; padding:14px 18px; border-radius:14px;
  border:1px solid var(--hair); background:#fff; text-decoration:none !important; font-family:var(--sans);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.bl-also:hover{ border-color:#CDBF9F; box-shadow:0 8px 24px rgba(14,37,86,.06); }
.bl-also .k{ flex:0 0 auto; font-size:.76rem; font-weight:800; color:var(--gold); padding:4px 10px; border-radius:99px; background:var(--cream); }
.bl-also .t{ color:var(--ink); font-weight:700; line-height:1.6; font-size:.98rem; }

/* A promotion from config.json, when one is switched on. */
.bl-promo{ margin:2.2em 0; padding:22px; border-radius:18px; border:1.5px dashed var(--gold-soft); background:#FFFCF5; font-family:var(--sans); }
.bl-promo .k{ color:var(--gold); font-weight:800; font-size:.8rem; }
.bl-promo h3{ margin:4px 0 6px; color:var(--ink); font-size:1.15rem; font-weight:800; line-height:1.6; }
.bl-promo p{ margin:0 0 14px; color:#4A5161; line-height:1.9; }
.bl-promo a.btn{ display:inline-flex; min-height:42px; align-items:center; padding:8px 18px; border-radius:99px; background:var(--gold); color:#fff; text-decoration:none; font-weight:800; }

/* Questions, folded. */
.bl-faq{ margin:1.2em 0 2em; display:grid; gap:10px; font-family:var(--sans); }
.bl-faq details{ border:1px solid var(--hair); border-radius:14px; padding:0 18px; background:#fff; }
.bl-faq summary{ cursor:pointer; padding:14px 0; font-weight:800; color:var(--ink); line-height:1.7; list-style:none; }
.bl-faq summary::-webkit-details-marker{ display:none; }
.bl-faq summary::before{ content:"؟"; color:var(--gold); margin-inline-end:10px; font-weight:800; }
.bl-faq details p{ margin:0 0 14px; font-family:var(--serif); line-height:2; color:var(--text); }

/* ── After the article ─────────────────────────────────────────────── */
.bl-end{ max-width:var(--measure); margin:2.6em auto 0; padding:0 clamp(18px,5vw,40px); box-sizing:content-box; }
.bl-share{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:18px 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); font-family:var(--sans); }
.bl-share span{ font-weight:800; color:var(--ink); font-size:.9rem; margin-inline-end:4px; }
.bl-share a, .bl-share button{
  display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:6px 14px; border-radius:99px; border:1px solid var(--hair);
  background:#fff; color:var(--ink); font:inherit; font-size:.85rem; font-weight:700; text-decoration:none; cursor:pointer;
}
.bl-share a:hover, .bl-share button:hover{ border-color:#CDBF9F; }
/* Each network filled with its own (deep) colour, white writing (owner,
   2 October: "the whole button blue, dark"). */
.bl-share a, .bl-share button{ transition:filter .2s ease, transform .15s ease; }
.bl-share a[class^="sh-"], .bl-share button[class^="sh-"]{ color:#fff; border-color:transparent; }
.bl-share a[class^="sh-"]:hover, .bl-share button[class^="sh-"]:hover{ filter:brightness(1.12); border-color:transparent; }
.bl-share .sh-wa{ background:#128C7E; }
.bl-share .sh-fb{ background:#1559C7; }
.bl-ig-note{ margin:10px 0 0; font-family:var(--sans); font-size:.86rem; font-weight:700; color:#8134AF; }
.bl-share .sh-ig{ background:linear-gradient(90deg,#F58529,#DD2A7B 45%,#8134AF 75%,#515BD4) border-box; }
.bl-share .sh-ig b{ color:#fff; }
.bl-share .sh-ig[hidden]{ display:none; }
.bl-share .sh-x{ background:#000; }
.bl-share .sh-tg{ background:#1A7DB8; }
.bl-share .sh-in{ background:#0A4F9E; }
/* Copy: navy, and gold once the address is copied. */
.bl-share .sh-copy{ background:var(--navy); }
.bl-share .sh-copy.is-done, .bl-share .sh-copy.is-done:hover{ color:#1B1405; background:linear-gradient(135deg,#E9C771,#C99A36); filter:none; }
.bl-share svg{ width:16px; height:16px; }
.bl-byline{ display:flex; gap:14px; align-items:center; padding:20px 0 0; font-family:var(--sans); }
.bl-byline img{ width:48px; height:48px; border-radius:50%; border:1px solid var(--hair); padding:3px; background:#fff; }
.bl-byline b{ display:block; color:var(--ink); }
.bl-byline small{ color:var(--muted); font-size:.85rem; line-height:1.7; display:block; }

.bl-related{ max-width:1180px; margin:clamp(40px,7vw,72px) auto 0; padding:0 clamp(18px,5vw,40px); font-family:var(--sans); }
.bl-related > h2{ text-align:center; font-size:clamp(1.3rem,3.4vw,1.7rem); color:var(--ink); margin:0 0 22px; font-weight:800; }

/* Cards, shared by the related list and the blog's front page. */
.bl-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:900px){ .bl-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .bl-cards{ grid-template-columns:1fr; } }
.bl-card{
  position:relative; display:flex; flex-direction:column; gap:8px; padding:22px 22px 20px; border-radius:18px;
  border:1px solid var(--hair); background:#fff; text-decoration:none; color:inherit; font-family:var(--sans);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bl-card::before{ content:""; position:absolute; top:-1px; inset-inline:22px; height:2px; background:var(--gold); border-radius:2px; }
.bl-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(14,37,86,.09); border-color:#DCCFB2; }
.bl-card .c{ color:var(--gold); font-weight:800; font-size:.76rem; letter-spacing:.03em; }
.bl-card h3{ margin:0; color:var(--ink); font-size:1.12rem; line-height:1.65; font-weight:800; }
.bl-card p{ margin:0; color:var(--muted); font-family:var(--serif); font-size:.98rem; line-height:1.95; flex:1; }
.bl-card .m{ color:#8A8F99; font-size:.8rem; margin-top:6px; }

/* The closing band. */
/* Sources (owner, 3 October): small and folded, after the questions. */
.bl-src{ margin:40px 0 0; border-top:1px solid var(--hair); padding-top:14px; font-family:var(--sans); }
.bl-src summary{ cursor:pointer; color:var(--muted); font-weight:800; font-size:.92rem; list-style:none; display:inline-flex; align-items:center; gap:6px; min-height:40px; }
.bl-src summary::-webkit-details-marker{ display:none; }
.bl-src summary::before{ content:"◂"; color:var(--gold); transition:transform .2s; }   /* points the way Arabic reads */
.bl-src[open] summary::before{ transform:rotate(-90deg); }
.bl-src summary span{ font-weight:600; }
.bl-src ol{ margin:6px 0 0; padding-inline-start:22px; color:var(--muted); font-size:.9rem; line-height:1.9; }
.bl-src li{ margin:4px 0; overflow-wrap:anywhere; }
.bl-src a{ color:var(--link); }
.bl-src .h{ color:#98A2B3; font-size:.78rem; margin-inline-start:4px; }
.bl-src p{ margin:8px 0 0; color:#98A2B3; font-size:.82rem; }
.bl-final{ margin:clamp(48px,8vw,88px) 0 0; background:linear-gradient(180deg,#F7F3EA,#FFFFFF); border-top:1px solid var(--hair);
  padding:clamp(40px,7vw,72px) clamp(18px,5vw,40px); text-align:center; font-family:var(--sans); }
.bl-final h2{ margin:0 auto 10px; max-width:24ch; color:var(--ink); font-size:clamp(1.45rem,4vw,2.1rem); line-height:1.5; font-weight:800; }
.bl-final p{ margin:0 auto 22px; max-width:56ch; color:#4A5161; font-family:var(--serif); line-height:2; }
.bl-final .bl-book{ min-height:50px; padding:12px 28px; font-size:1rem; }
.bl-final .alt{ display:block; margin-top:14px; font-size:.9rem; }

/* ── Footer ───────────────────────────────────────────────────────── */
/* ── The footer (owner, 3 October: "ordered, one under the other, and
   grand") ─────────────────────────────────────────────────────────────
   The name and the three ways to reach us; a gold hairline; the pages in
   short columns, one link to a line, each column under a small gold label;
   and the legal line at the very bottom, one item to a line. "Targo
   Academy" is the same size as the Arabic name. */
.bl-foot{ background:linear-gradient(180deg,#0E2556 0%,#0A1B40 100%); color:rgba(255,255,255,.78); font-family:var(--sans);
  padding:clamp(40px,6vw,64px) 0 0; }
.bl-foot-in{ padding:0 clamp(18px,5vw,40px) 26px; }
.bl-foot-in{ max-width:1180px; margin:0 auto; }
.bl-foot a{ color:rgba(255,255,255,.88); text-decoration:none; transition:color .2s ease; }
.bl-foot a:hover{ color:#fff; }
.bf-top{ display:grid; gap:16px; justify-items:start; padding-bottom:clamp(26px,4vw,36px);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(217,182,106,0),rgba(217,182,106,.55),rgba(217,182,106,0)) 1; }
.bf-brand{ display:inline-flex; align-items:center; gap:14px; }
.bf-brand img{ width:46px; height:46px; border-radius:50%; background:#fff; padding:3px; flex:0 0 auto; }
.bf-names{ display:flex; flex-direction:column; gap:2px; }
.bf-names b, .bf-en{ font-weight:800; font-size:1.2rem; line-height:1.25; }
.bf-names b{ color:#fff; }
.bf-en{ color:var(--gold-soft); letter-spacing:.01em; }
.bf-about{ margin:0; max-width:46ch; font-size:.95rem; line-height:1.8; color:rgba(255,255,255,.7); }
.bf-social{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 18px; }
.bf-so{ display:inline-flex; align-items:center; gap:9px; font-size:.9rem; font-weight:700; }
.bf-so-ico{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; flex:0 0 auto; transition:transform .2s ease; }
.bf-so:hover .bf-so-ico{ transform:scale(1.08); }
.bf-so-ico svg{ width:17px; height:17px; }
.bf-so-wa .bf-so-ico{ background:#25D366; }
.bf-so-ig .bf-so-ico{ background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); }
.bf-so-fb .bf-so-ico{ background:#0866FF; }
.bf-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 24px; padding:clamp(26px,4vw,36px) 0; }
.bf-col:last-child{ grid-column:1 / -1; }
.bf-h{ margin:0 0 14px; font-size:.8rem; font-weight:800; letter-spacing:.04em; color:var(--gold-soft); }
.bf-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.bf-col a{ font-size:.95rem; line-height:1.5; }
.bf-col a[dir="ltr"]{ unicode-bidi:isolate; }
.bf-col a.bf-book{ color:var(--gold-soft); font-weight:700; }
.bf-col a.bf-book:hover{ color:#F3D79A; }
.bf-legal{ display:grid; justify-items:center; gap:8px; text-align:center; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; color:rgba(255,255,255,.5); }
.bf-legal a{ color:rgba(255,255,255,.75); font-weight:600; border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:1px; }
.bf-legal p{ margin:0; }
.bf-legal a.bf-group{ border:0; padding:0; font-weight:700; color:var(--gold-soft); letter-spacing:.02em; }
.bf-legal a.bf-group:hover{ color:#F3D79A; }
/* The signature: the last line of every page, set apart in its own band
   and its own type, as on the rest of the site (owner, 3 October). */
.bf-credit{ padding:15px 18px calc(15px + env(safe-area-inset-bottom, 0px)); border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.22); text-align:center; direction:ltr;
  font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.34); }
.bf-credit a{ color:rgba(255,255,255,.6); border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:1px; }
.bf-credit a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.45); }
@media (min-width:860px){
  .bl-foot-in{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,2fr); column-gap:clamp(32px,5vw,72px); }
  .bf-top{ border:0; padding:0; align-content:start; }
  .bf-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; }
  .bf-col:last-child{ grid-column:auto; }
  .bf-legal{ grid-column:1 / -1; margin-top:clamp(34px,4vw,48px); }
}

/* ── The blog's front page ────────────────────────────────────────── */
.bx-hero{ max-width:900px; margin:0 auto; text-align:center; padding:clamp(40px,8vw,84px) clamp(18px,5vw,40px) clamp(20px,4vw,36px); }
.bx-hero .k{ font-family:var(--sans); color:var(--gold); font-weight:800; font-size:.85rem; letter-spacing:.06em; }
.bx-hero h1{ font-family:var(--sans); color:var(--ink); font-weight:800; font-size:clamp(2.1rem,6.4vw,3.4rem); line-height:1.35; margin:10px 0 14px; }
.bx-hero p{ color:#4A5161; font-size:clamp(1.02rem,2.4vw,1.18rem); line-height:2; max-width:60ch; margin:0 auto; }
.bx-cats{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:24px 0 0; font-family:var(--sans); }
.bx-cats button{ min-height:38px; padding:6px 16px; border-radius:99px; border:1px solid var(--hair); background:#fff; color:var(--ink);
  font:inherit; font-weight:700; font-size:.88rem; cursor:pointer; }
.bx-cats button.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
/* Sort and filter (owner, 3 October). */
.bx-tools{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin:14px 0 0; font-family:var(--sans); }
.bx-sort{ display:inline-flex; align-items:center; gap:2px; padding:4px; border:1px solid var(--hair); border-radius:99px; background:#fff; }
.bx-sort span{ color:var(--muted); font-size:.85rem; font-weight:700; padding:0 10px 0 6px; }
.bx-sort button{ min-height:36px; padding:4px 16px; border:0; border-radius:99px; background:none; color:var(--ink);
  font:inherit; font-weight:700; font-size:.88rem; cursor:pointer; }
.bx-sort button.on{ background:var(--navy); color:#fff; }
.bx-only{ min-height:44px; padding:6px 18px; border-radius:99px; border:1px solid var(--gold-soft); background:#fff; color:var(--gold);
  font:inherit; font-weight:800; font-size:.88rem; cursor:pointer; }
.bx-only[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#fff; }
.bx-sort button:focus-visible, .bx-only:focus-visible{ outline:2px solid var(--navy-2); outline-offset:2px; }
.bx-main{ max-width:1180px; margin:0 auto; padding:clamp(10px,3vw,24px) clamp(18px,5vw,40px) 0; }
.bx-feature{
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(20px,4vw,48px); align-items:center; margin:0 0 30px;
  padding:clamp(24px,4vw,40px); border-radius:24px; text-decoration:none; color:inherit; border:1px solid var(--hair);
  background:radial-gradient(90% 120% at 0% 0%, #F6EFDF 0%, #FFFFFF 60%);
}
.bx-feature .c{ font-family:var(--sans); color:var(--gold); font-weight:800; font-size:.8rem; }
.bx-feature h2{ font-family:var(--sans); color:var(--ink); font-weight:800; font-size:clamp(1.5rem,3.8vw,2.2rem); line-height:1.5; margin:8px 0 10px; }
.bx-feature p{ margin:0; color:#4A5161; line-height:2; }
.bx-feature .go{ display:inline-block; margin-top:16px; font-family:var(--sans); font-weight:800; color:var(--link); }
.bx-feature .art{ aspect-ratio:4/3; border-radius:18px; background:var(--navy); position:relative; overflow:hidden; }
.bx-feature .art svg{ position:absolute; inset:0; width:100%; height:100%; }
@media (max-width:760px){ .bx-feature{ grid-template-columns:1fr; } .bx-feature .art{ display:none; } }
.bx-empty{ text-align:center; color:var(--muted); font-family:var(--sans); padding:30px 0; }
/* Search the titles. */
.bx-search{ position:relative; max-width:460px; margin:16px auto 0; }
.bx-search input{ width:100%; min-height:48px; padding:10px 46px 10px 18px; border-radius:99px; border:1px solid var(--hair); background:#fff;
  font:500 1rem var(--sans); color:var(--ink); outline:none; -webkit-appearance:none; appearance:none; }
.bx-search input:focus{ border-color:var(--navy-2); box-shadow:0 0 0 3px rgba(23,58,128,.12); }
.bx-search input::placeholder{ color:#98A2B3; }
.bx-search svg{ position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--muted); pointer-events:none; }
.bx-search input::-webkit-search-cancel-button{ cursor:pointer; }

/* ── A level test inside the article (assets/quiz.js) ───────────────
   One question at a time on a white card with the gold line; the answers
   are big enough for a child's finger; the next question slides in from
   the reading side. */
.bl-quiz{
  position:relative; margin:2.2em 0; border-radius:22px; background:#fff; border:1px solid #EADFC8;
  box-shadow:0 18px 50px -28px rgba(14,37,86,.35); font-family:var(--sans); overflow:hidden; scroll-margin-top:84px;
}
.bl-quiz::before{ content:""; position:absolute; inset-inline:0; top:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft),var(--gold)); z-index:2; }
.bl-qz-intro{ padding:clamp(22px,4.5vw,34px); text-align:center; background:radial-gradient(120% 90% at 50% 0%, #FBF6EA 0%, #fff 70%); }
.bl-qz-intro .k{ display:inline-block; color:var(--gold); font-weight:800; font-size:.82rem; letter-spacing:.02em; background:#FBF3E0; border:1px solid #EFE2C2; border-radius:99px; padding:3px 14px; }
.bl-qz-intro h2{ display:block; margin:14px 0 8px; padding:0; border:0; font-family:var(--sans); color:var(--ink); font-size:clamp(1.35rem,3.6vw,1.75rem); line-height:1.5; font-weight:800; }
.bl-qz-intro h2::before, .bl-qz-intro h2::after{ content:none; display:none; }
.bl-qz-intro p{ margin:0 auto 10px; max-width:52ch; color:#4A5161; font-size:1rem; line-height:1.9; }
.bl-qz-intro .tip{ font-size:.9rem; color:var(--muted); }
.bl-qz-start{
  display:none; align-items:center; justify-content:center; min-height:52px; margin-top:10px; padding:10px 34px; border:0; border-radius:99px; cursor:pointer;
  background:linear-gradient(135deg,#1E4596,var(--navy)); color:#fff; font:800 1.05rem var(--sans); box-shadow:0 10px 24px -12px rgba(14,37,86,.7);
}
.bl-quiz.is-ready .bl-qz-start{ display:inline-flex; }
.bl-qz-start:hover{ filter:brightness(1.08); }
.bl-qz-nojs{ font-size:.92rem; }
.bl-quiz.is-on .bl-qz-intro{ display:none; }

.bl-qz-stage{ position:relative; }
.bl-qz-card{ padding:clamp(20px,4.5vw,32px); transition:opacity .3s ease, transform .3s ease; }
.bl-qz-card.is-entering{ opacity:0; transform:translateX(-36px); }
.bl-qz-card.is-leaving{ position:absolute; top:0; inset-inline:0; opacity:0; transform:translateX(36px); pointer-events:none; }
.bl-qz-top{ display:flex; justify-content:space-between; gap:12px; font-size:.86rem; color:var(--muted); font-weight:700; }
.bl-qz-top .part{ color:var(--gold); }
.bl-qz-bar{ height:6px; margin:10px 0 18px; border-radius:99px; background:#F1ECE1; overflow:hidden; }
.bl-qz-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); margin-inline-start:0; }
.bl-qz-pic{ font-size:clamp(3rem,12vw,4.2rem); line-height:1.25; text-align:center; margin:4px 0 6px; }
.bl-qz-passage{
  margin:0 0 14px; padding:14px 16px; border-radius:14px; background:var(--cream); border:1px solid #EFE7D6;
  font-family:var(--sans); font-size:1.02rem; line-height:1.8; color:var(--text); text-align:left;
}
.bl-qz-q{ margin:0 0 16px; font-family:var(--sans); font-size:clamp(1.2rem,3.4vw,1.45rem); line-height:1.6; color:var(--ink); font-weight:800; text-align:left; }
.bl-qz-q:focus{ outline:none; }
/* A test in Arabic: questions and answers read from the right. */
.bl-quiz.is-ar .bl-qz-q, .bl-quiz.is-ar .bl-qz-review .q{ text-align:right; }
.bl-quiz.is-ar .bl-qz-opt{ text-align:right; }
.bl-qz-opts{ display:grid; gap:10px; }
.bl-qz-opt{
  display:flex; align-items:center; min-height:54px; padding:10px 18px; border-radius:14px; cursor:pointer; text-align:left;
  background:#fff; border:1.5px solid #E2DACB; color:var(--ink); font:700 1.08rem var(--sans); line-height:1.5;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.bl-qz-opt:hover:not(:disabled){ border-color:var(--navy-2); background:#F6F8FD; }
.bl-qz-opt:active:not(:disabled){ transform:scale(.99); }
.bl-qz-opt:disabled{ cursor:default; }
.bl-qz-opt.is-picked{ border-color:var(--navy); background:#EEF3FC; box-shadow:inset 0 0 0 1px var(--navy); }

.bl-qz-result{ text-align:center; }
.bl-qz-result .k{ display:block; color:var(--muted); font-weight:700; font-size:.86rem; }
.bl-qz-result .lvl{
  display:inline-block; margin:8px 0 4px; padding:6px 18px; border-radius:99px; font-weight:800; font-size:1rem;
  color:var(--navy); background:#FBF3E0; border:1px solid #EAD7A8;
}
.bl-qz-result h3{ margin:8px 0 6px; font-family:var(--sans); color:var(--ink); font-size:clamp(1.3rem,3.6vw,1.6rem); line-height:1.5; font-weight:800; }
.bl-qz-result h3:focus{ outline:none; }
.bl-qz-result .txt{ margin:0 auto 16px; max-width:56ch; color:#4A5161; font-size:1rem; line-height:1.95; }
.bl-qz-parts{ list-style:none; margin:0 auto 14px; padding:0; max-width:460px; display:grid; gap:8px; text-align:start; }
.bl-qz-parts li{ display:grid; grid-template-columns:minmax(0,9.5em) 1fr auto; align-items:center; gap:10px; font-size:.92rem; color:var(--text); }
.bl-qz-parts .bar{ height:8px; border-radius:99px; background:#F1ECE1; overflow:hidden; }
.bl-qz-parts .bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--navy-2),var(--navy)); }
.bl-qz-parts .sc{ font-weight:800; color:var(--ink); white-space:nowrap; }
.bl-qz-result .note{ margin:0 auto 18px; max-width:56ch; font-size:.86rem; color:var(--muted); line-height:1.85; }
.bl-qz-cta{
  position:relative; margin:0 0 14px; padding:clamp(20px,4vw,26px); border-radius:18px; overflow:hidden; color:#fff;
  background:radial-gradient(120% 140% at 100% 0%, #1E4596 0%, var(--navy) 55%, #0A1B40 100%);
}
.bl-qz-cta h4{ margin:0 0 6px; font-size:clamp(1.12rem,3vw,1.32rem); line-height:1.55; font-weight:800; color:#fff; }
.bl-qz-cta p{ margin:0 0 16px; color:rgba(255,255,255,.86); font-size:.97rem; line-height:1.9; }
.bl-qz-cta .btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 24px; border-radius:99px; max-width:100%;
  background:linear-gradient(135deg,#E9C771,#C99A36); color:#1B1405; font-weight:800; text-decoration:none; font-size:1rem; line-height:1.5; text-align:center;
}
.bl-qz-cta .btn:hover{ filter:brightness(1.05); }
.bl-qz-again{ border:0; background:none; color:var(--link); font:700 .95rem var(--sans); cursor:pointer; padding:8px 12px; min-height:44px; }
.bl-qz-again:hover{ text-decoration:underline; }
@media (max-width:420px){ .bl-qz-parts li{ grid-template-columns:minmax(0,1fr) auto; } .bl-qz-parts .bar{ grid-column:1 / -1; grid-row:2; } }
/* A stage the test stopped before (stop_early). */
.bl-qz-parts li.skip{ color:var(--muted); }
.bl-qz-parts li.skip .sc{ color:var(--muted); font-weight:600; }

/* Review: every question answered; the ones missed with the right answer. */
.bl-qz-review{ margin:0 auto 18px; max-width:560px; text-align:start; border:1px solid var(--hair); border-radius:14px; background:#fff; }
.bl-qz-review summary{ cursor:pointer; list-style:none; padding:12px 16px; font-family:var(--sans); font-weight:800; color:var(--navy); font-size:.95rem; }
.bl-qz-review summary::-webkit-details-marker{ display:none; }
.bl-qz-review summary::after{ content:"+"; float:left; color:var(--gold); }
.bl-qz-review[open] summary::after{ content:"–"; }
.bl-qz-review ol{ list-style:none; margin:0; padding:0 14px 14px; display:grid; gap:10px; }
.bl-qz-review li{ border-radius:12px; padding:10px 14px; background:#F7F9FD; border-inline-start:3px solid #3F8F5B; }
.bl-qz-review li.no{ background:#FDF6F4; border-inline-start-color:#C0533A; }
.bl-qz-review .tag{ display:block; font-family:var(--sans); font-size:.78rem; font-weight:800; color:var(--muted); }
.bl-qz-review .q{ margin:4px 0; font-family:var(--sans); font-weight:700; color:var(--ink); font-size:.98rem; line-height:1.6; text-align:left; }
.bl-qz-review .a{ margin:0; font-family:var(--sans); font-size:.9rem; line-height:1.7; color:var(--text); }
.bl-qz-review .a .k{ color:var(--muted); font-weight:700; }
.bl-qz-review .a.right .v{ color:#2E7A4B; font-weight:800; }
.bl-qz-review li.no .a:not(.right) .v{ color:#B2442D; text-decoration:line-through; text-decoration-thickness:1px; }

/* ── Drawings in the article ([[figure:name]]) ──────────────────────
   Drawn for this page: navy and gold on paper, they take the column's
   width and keep their shape on any screen. */
.bl-fig{ margin:2.1em 0; padding:0; }
.bl-fig svg{ display:block; width:100%; height:auto; border-radius:20px; box-shadow:0 18px 50px -24px rgba(14,37,86,.45); }
.bl-fig figcaption{ margin-top:12px; text-align:center; font-family:var(--sans); font-size:.86rem; color:var(--muted); line-height:1.8; }

/* ── Score calculators ([[tool:name]]) ──────────────────────────────── */
.bl-tool{ margin:2.4em 0; border:1px solid var(--hair); border-radius:22px; overflow:hidden; background:#fff;
  box-shadow:0 22px 60px -32px rgba(14,37,86,.35); font-family:var(--sans); position:relative; }
.bl-tool::before{ content:""; position:absolute; inset-inline:0; top:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft),var(--gold)); }
.bl-body .bl-tool .bl-sc-head h2{ display:block; margin:14px 0 8px; font-size:clamp(1.3rem,3.6vw,1.7rem); }
.bl-body .bl-tool .bl-sc-head h2::before{ content:none; display:none; }
.bl-tl-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:18px clamp(14px,3.5vw,26px) 6px; }
@media (max-width:640px){ .bl-tl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.bl-tl-f{ display:grid; gap:6px; font-weight:800; color:var(--ink); font-size:.92rem; text-align:center; }
.bl-tl-f select{ min-height:48px; border:1px solid #D8CFBC; border-radius:12px; background:var(--cream); font:800 1.05rem var(--sans); color:var(--navy);
  text-align:center; text-align-last:center; padding:0 10px; cursor:pointer; }
.bl-tl-f select:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }
.bl-tl-out{ margin:12px clamp(14px,3.5vw,26px) clamp(16px,3.5vw,24px); padding:18px; border-radius:18px; text-align:center;
  background:linear-gradient(160deg,#173A80,#0E2556); color:#fff; display:grid; justify-items:center; gap:4px; }
.bl-tl-out .lbl{ font-size:.86rem; color:rgba(255,255,255,.75); font-weight:700; }
.bl-tl-out .val{ font-size:clamp(2.4rem,8vw,3.2rem); line-height:1.1; color:#F3D79A; font-weight:800; direction:ltr; }
.bl-tl-out .cefr{ font-weight:800; font-size:1rem; min-height:1.5em; }
.bl-tl-out .rule{ margin:8px auto 12px; max-width:56ch; font-size:.84rem; line-height:1.8; color:rgba(255,255,255,.75); }
.bl-tl-out .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 22px; border-radius:99px;
  background:linear-gradient(135deg,#E3BC5E,#C99A36); color:#1a1205 !important; text-decoration:none !important; font-weight:800; font-size:.95rem; line-height:1.5; }

/* ── "Where am I?" ([[selfcheck:name]]) ─────────────────────────────── */
/* clip, not hidden: hidden would make the box its own scroller and stop the
   live bar from following the reader. */
.bl-sc{ margin:2.4em 0; border:1px solid var(--hair); border-radius:22px; overflow:hidden; overflow:clip; background:#fff;
  box-shadow:0 22px 60px -32px rgba(14,37,86,.35); font-family:var(--sans); position:relative; }
.bl-sc::before{ content:""; position:absolute; inset-inline:0; top:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft),var(--gold)); }
.bl-sc-head{ padding:clamp(22px,4.5vw,32px) clamp(18px,4.5vw,32px) 8px; text-align:center; background:radial-gradient(120% 90% at 50% 0%, #FBF6EA 0%, #fff 70%); }
.bl-sc-head .k{ display:inline-block; color:var(--gold); font-weight:800; font-size:.82rem; background:#FBF3E0; border:1px solid #EFE2C2; border-radius:99px; padding:3px 14px; }
.bl-body .bl-sc-head h2{ display:block; margin:14px 0 8px; font-size:clamp(1.3rem,3.6vw,1.7rem); }
.bl-body .bl-sc-head h2::before{ content:none; display:none; }
.bl-sc-head p{ margin:0 auto; max-width:56ch; color:#4A5161; line-height:1.9; font-size:.98rem; }
.bl-sc-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:18px clamp(14px,3.5vw,26px); }
@media (max-width:640px){ .bl-sc-grid{ grid-template-columns:minmax(0,1fr); } }
.bl-sc-lv{ margin:0; padding:12px 14px 6px; border:1px solid var(--hair); border-radius:16px; background:var(--cream); min-width:0; transition:border-color .25s ease, background .25s ease; }
.bl-sc-lv legend{ padding:0 8px; font-weight:800; color:var(--ink); font-size:.95rem; }
.bl-sc-lv legend b{ display:inline-block; min-width:2.4em; text-align:center; color:#fff; background:var(--navy); border-radius:8px; padding:0 6px; margin-inline-end:4px; font-size:.86rem; }
.bl-sc-lv.is-met{ border-color:rgba(166,124,46,.55); background:#FCF6E8; }
.bl-sc-lv.is-met legend b{ background:linear-gradient(135deg,#C99A36,#A67C2E); }
.bl-sc-lv label{ display:flex; align-items:flex-start; gap:10px; padding:8px 2px; font-size:.95rem; line-height:1.75; color:var(--text); cursor:pointer; min-height:44px; }
.bl-sc-lv input{ flex:0 0 auto; width:20px; height:20px; margin:4px 0 0; accent-color:var(--navy); cursor:pointer; }
.bl-sc-live{ position:sticky; bottom:14px; z-index:5; display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 auto 10px; width:max-content; max-width:calc(100% - 28px); min-height:46px; padding:8px 20px; border:0; border-radius:99px; cursor:pointer;
  background:linear-gradient(135deg,var(--navy-2),var(--navy)); color:#fff; font:700 .92rem var(--sans); box-shadow:0 10px 30px -10px rgba(14,37,86,.6); }
.bl-sc-live b{ color:#F3D79A; font-weight:800; }
.bl-sc-live i{ font-style:normal; color:rgba(255,255,255,.8); font-weight:600; font-size:.86rem; }
.bl-sc-out{ margin:4px clamp(14px,3.5vw,26px) clamp(16px,3.5vw,24px); padding:18px; border-radius:18px; background:var(--cream); text-align:center; }
.bl-sc-out .lvl:empty, .bl-sc-out h3:empty{ display:none; }
.bl-sc-out .lvl{ display:inline-block; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--navy-2),var(--navy)); border-radius:99px; padding:4px 16px; font-size:.95rem; }
.bl-body .bl-sc-out h3{ margin:10px 0 4px; color:var(--ink); font-size:clamp(1.15rem,3vw,1.35rem); }
.bl-sc-out .txt{ margin:0 auto 10px; max-width:56ch; color:#4A5161; line-height:1.9; font-size:.97rem; }
.bl-sc-out .note{ margin:0 auto 14px; max-width:56ch; color:var(--muted); font-size:.85rem; line-height:1.8; }
.bl-sc-cta{ padding:18px; border-radius:16px; background:linear-gradient(160deg,#173A80,#0E2556); color:#fff; }
.bl-sc-cta h4{ margin:0 0 6px; font-size:clamp(1.05rem,2.8vw,1.22rem); line-height:1.6; font-weight:800; color:#fff; }
.bl-sc-cta p{ margin:0 0 14px; color:rgba(255,255,255,.86); font-size:.95rem; line-height:1.85; }
.bl-sc-cta .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 22px; border-radius:99px;
  background:linear-gradient(135deg,#E3BC5E,#C99A36); color:#1a1205 !important; text-decoration:none !important; font-weight:800; font-size:.95rem; line-height:1.5; }
.bl-sc-cta .alt{ display:block; margin-top:12px; color:#F3D79A !important; font-weight:700; font-size:.92rem; }


@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}
@media print{
  .bl-mast, .bl-progress, .bl-toc, .bl-toc-m, .bl-share, .bl-related, .bl-final, .bl-foot, .bl-ctabox, .bl-promo, .bl-quiz, .bl-sc-out, .bl-sc-head .k{ display:none !important; }
  body{ font-size:12pt; }
}