@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════════
   Abdulla Yameen Abdul Gayoom — site styles

   Display  Newsreader      editorial serif, robust on screen at any size
   Body     Archivo         grotesque with real range, not a neutral default
   Data     IBM Plex Mono   years, figures, labels
   Thaana   Noto Sans Thaana

   Written with logical properties throughout, so the Dhivehi edition
   mirrors to right-to-left without a second stylesheet.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#F6F3FA;
  --surface:#FFFFFF;
  --surface-2:#EFE8F6;
  --ink:#18122B;
  --ink-2:#483D62;
  --ink-3:#796E93;
  --line:#E4DBEF;
  --line-2:#CEC1E2;
  --purple:#5A2E8C;
  --purple-2:#8557C6;
  --purple-wash:#EEE5F8;
  --green:#3A7D42;
  --green-2:#8CCB6A;
  --green-wash:#E9F4DF;
  --gold:#8F6B2C;
  --gold-wash:#F5EEDE;
  --danger:#A3251C;
  --danger-wash:#FBE9E7;
  --shadow-1:0 1px 2px rgba(24,18,43,.04);
  --shadow-2:0 1px 2px rgba(24,18,43,.05), 0 14px 34px -22px rgba(24,18,43,.30);
  --tex-op:.11;
  --tex-op-strong:.17;

  /* The mark's tile. Dark themes lift it off the surface behind it. */
  --mark-bg:#18122B;
  --mark-ink:#F3EEFB;
  --mark-rule:#C6A65C;

  --f-display:"Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-thaana:"Noto Sans Thaana", var(--f-body);
  /* Thaana covers only U+0780–07B1; Latin in a Dhivehi page falls
     through to the face that suits its role, not to whatever is next. */
  --f-thaana-display:"Noto Sans Thaana", var(--f-display);
  --f-thaana-ui:"Noto Sans Thaana", var(--f-mono);

  --gutter:clamp(18px, 4.6vw, 60px);
  --maxw:1240px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#110B20;
    --surface:#191030;
    --surface-2:#23174B;
    --ink:#F3EEFB;
    --ink-2:#C6B9DF;
    --ink-3:#9386B2;
    --line:#2C1F50;
    --line-2:#3D2C69;
    --purple:#B58CEC;
    --purple-2:#8557C6;
    --purple-wash:#23174B;
    --green:#A9E486;
    --green-2:#8CCB6A;
    --green-wash:#1C2E19;
    --gold:#DEB972;
    --gold-wash:#2B2211;
    --danger:#F0A49C;
    --danger-wash:#3A1512;
    --shadow-1:0 1px 2px rgba(0,0,0,.35);
    --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.85);
    --tex-op:.19;
    --tex-op-strong:.28;
    --mark-bg:#2A1F4C;
    --mark-ink:#F3EEFB;
    --mark-rule:#DEB972;
  }
}
:root[data-theme="dark"]{
  --bg:#110B20;
  --surface:#191030;
  --surface-2:#23174B;
  --ink:#F3EEFB;
  --ink-2:#C6B9DF;
  --ink-3:#9386B2;
  --line:#2C1F50;
  --line-2:#3D2C69;
  --purple:#B58CEC;
  --purple-2:#8557C6;
  --purple-wash:#23174B;
  --green:#A9E486;
  --green-2:#8CCB6A;
  --green-wash:#1C2E19;
  --gold:#DEB972;
  --gold-wash:#2B2211;
  --danger:#F0A49C;
  --danger-wash:#3A1512;
  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.85);
  --tex-op:.19;
  --tex-op-strong:.28;
  --mark-bg:#2A1F4C;
  --mark-ink:#F3EEFB;
  --mark-rule:#DEB972;
}

/* ── Base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.62;
  font-synthesis:none;   /* real italics and weights are bundled; never fake them */
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{ font-family:var(--f-thaana); }
img{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--purple); outline-offset:3px; border-radius:3px}
::selection{background:var(--purple); color:#fff}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}
html{scroll-behavior:smooth}

.thaana{font-family:var(--f-thaana); direction:rtl; unicode-bidi:isolate}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}

/* ── Top bar ──────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:70;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(1.5) blur(16px);
  border-block-end:1px solid var(--line);
}
.topbar__progress{
  position:absolute; inset-block-end:-1px; inset-inline-start:0; height:2px; width:0;
  background:linear-gradient(to right, var(--purple), var(--green-2));
  transition:width .12s linear;
}
html[dir="rtl"] .topbar__progress{background:linear-gradient(to left, var(--purple), var(--green-2))}
.topbar__in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:16px; min-height:60px;
}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; white-space:nowrap}
/* The mark sits beside the name, centred against the two text lines that
   are themselves aligned on their baseline. */
.brand__mark{flex:none; align-self:center; display:block; margin-inline-end:1px}
.foot__logo{display:block; margin:0 0 14px; --mark-bg:rgba(255,255,255,.08); --mark-ink:#F7F3FF; --mark-rule:#C6A65C}
.brand b{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:500;
  font-size:19px; letter-spacing:-.01em; color:var(--ink);
}
.brand span{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.navlinks{display:flex; gap:1px; margin-inline-start:auto; overflow-x:auto; scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{
  text-decoration:none; font-size:13px; font-weight:500; color:var(--ink-2);
  padding:7px 11px; border-radius:99px; white-space:nowrap; transition:background .15s, color .15s;
}
.navlinks a:hover, .navlinks a[aria-current="true"]{background:var(--purple-wash); color:var(--purple)}
.tools{display:flex; align-items:center; gap:7px; margin-inline-start:auto; flex:none}
.navlinks + .tools{margin-inline-start:10px}

.langsw{display:flex; border:1px solid var(--line-2); border-radius:99px; overflow:hidden; background:var(--surface)}
.langsw a{
  text-decoration:none; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:6px 11px; color:var(--ink-3); transition:background .15s, color .15s;
}
.langsw a[aria-current="true"]{background:var(--ink); color:var(--bg)}
.langsw a.is-dv{font-family:var(--f-thaana); font-size:13px; padding-block:4px}

.iconbtn{
  flex:none; width:34px; height:34px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  display:grid; place-items:center; transition:border-color .15s, color .15s;
}
.iconbtn:hover{border-color:var(--purple-2); color:var(--purple)}
@media (max-width:980px){ .navlinks{display:none} }

/* Menu button — shown only where the inline nav does not fit. */
.menubtn{display:none}
@media (max-width:980px){ .menubtn{display:grid} }

/* The panel drops from the bar, full width, and closes on choosing. */
.menu{
  position:absolute; inset-inline:0; top:100%;
  background:var(--surface); border-block-end:1px solid var(--line);
  box-shadow:0 20px 40px -28px rgba(24,18,43,.5);
}
.menu[hidden]{display:none}
.menu__in{
  max-width:var(--maxw); margin-inline:auto; padding:10px var(--gutter) 18px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px 0;
}
@media (max-width:460px){ .menu__in{grid-template-columns:1fr} }
.menu a{
  display:flex; align-items:baseline; gap:11px; text-decoration:none;
  padding:11px 4px; border-block-end:1px solid var(--line);
  font-size:15px; font-weight:500; color:var(--ink);
}
.menu a:last-child, .menu a:nth-last-child(2):nth-child(odd){border-block-end:0}
.menu a em{
  font-style:normal; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.14em; color:var(--ink-3); min-width:22px;
}
.menu a[aria-current="true"]{color:var(--purple)}
.menu a[aria-current="true"] em{color:var(--purple)}
@media (max-width:560px){
  .topbar__in{gap:10px; min-height:54px}
  .brand span{display:none}
  .brand b{font-size:17.5px}
  .langsw a{padding:6px 9px}
}

/* ── Photographic surfaces ────────────────────────────────────────── */
.tex{position:relative; isolation:isolate}
.tex > *{position:relative}
.tex::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--tex); background-size:cover; background-position:center;
  opacity:var(--tex-strength, var(--tex-op));
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(840px, 93svh); display:grid; align-items:end;
  background:#0D0819; color:#F7F3FF;
}
.hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:var(--hero-pos, 58% 26%);
  animation:heroZoom 2.6s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes heroZoom{ from{transform:scale(1.06)} to{transform:none} }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(13,8,25,.96) 0%, rgba(13,8,25,.70) 27%, rgba(13,8,25,.16) 57%, rgba(13,8,25,.32) 100%),
    linear-gradient(to var(--veil-dir, right), rgba(35,16,72,.82) 0%, rgba(35,16,72,.26) 44%, rgba(13,8,25,0) 70%);
}
html[dir="rtl"] .hero{ --veil-dir:left; }
.hero__grain{
  position:absolute; inset:0; opacity:.45; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}
.hero__in{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(40px,7vw,84px) clamp(30px,4vw,48px);
  animation:heroRise 1s .12s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes heroRise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
.hero__rule{
  display:flex; align-items:center; gap:14px; margin-block-end:24px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(247,243,255,.74);
}
.hero__rule::after{content:""; flex:1; height:1px; background:linear-gradient(to var(--veil-dir, right), rgba(198,166,92,.9), rgba(198,166,92,0))}
.hero h1{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:400;
  font-size:clamp(44px, 8.6vw, 108px); line-height:.95; letter-spacing:-.022em;
  margin:0; text-wrap:balance;
}
.hero h1 em{display:block; font-style:normal; font-weight:600}
html[dir="rtl"] .hero h1{font-family:var(--f-thaana-display); line-height:1.35; font-size:clamp(34px,6.4vw,74px)}
.hero__native{
  display:inline-block; font-family:var(--f-thaana); direction:rtl;
  font-size:clamp(17px,2.4vw,24px); color:rgba(247,243,255,.8); margin-block-start:18px;
}
.hero__sub{
  margin-block-start:20px; max-width:52ch; font-size:clamp(15px,1.6vw,17.5px);
  color:rgba(247,243,255,.88); line-height:1.66;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:11px; margin-block-start:30px}

/* ── Buttons ──────────────────────────────────────────────────────
   Squared to 2px rather than fully rounded: a pill reads as a consumer
   app, a near-square edge reads as an institution, and 2px matches the
   radius already used on the cards and panels.

   The party green is kept as a marker on the leading edge of the
   primary button instead of flooding the whole shape — present, but not
   shouting on a photograph of a head of state. */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none;
  font-family:var(--f-body); font-size:13.5px; font-weight:600; letter-spacing:.015em;
  line-height:1.2; padding:14px 22px; border-radius:2px;
  border:1px solid transparent; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn__go{
  display:inline-block; transition:transform .22s cubic-bezier(.2,.7,.25,1);
  font-family:var(--f-mono); font-size:12px;
}
.btn:hover .btn__go{transform:translateX(3px)}
html[dir="rtl"] .btn:hover .btn__go{transform:translateX(-3px)}
.btn:active{transform:translateY(1px)}

/* Solid, for the one action that matters most on a dark ground. */
.btn--green{
  background:#F2EEFA; color:#18122B; border-color:#F2EEFA;
  box-shadow:inset 3px 0 0 var(--green-2);
}
html[dir="rtl"] .btn--green{box-shadow:inset -3px 0 0 var(--green-2)}
.btn--green:hover{background:#FFFFFF; border-color:#FFFFFF}

/* Hairline, for the secondary action beside it. */
.btn--ghost{
  border-color:rgba(242,238,250,.38); color:#F2EEFA;
  background:rgba(242,238,250,.05);
}
.btn--ghost:hover{border-color:rgba(242,238,250,.85); background:rgba(242,238,250,.12)}

/* On light grounds: forms, statements, the archive. */
.btn--purple{
  background:var(--purple); color:#fff; border-color:var(--purple);
  box-shadow:inset 3px 0 0 rgba(140,203,106,.9);
}
html[dir="rtl"] .btn--purple{box-shadow:inset -3px 0 0 rgba(140,203,106,.9)}
.btn--purple:hover{background:var(--purple-2); border-color:var(--purple-2)}

.btn--quiet{border-color:var(--line-2); color:var(--ink-2); background:transparent}
.btn--quiet:hover{border-color:var(--purple); color:var(--purple); background:var(--purple-wash)}

.btn[disabled], .btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.btn[disabled]:hover{background:inherit}

/* ── Term strip ───────────────────────────────────────────────────
   Four facts under the hero. No dividing rules: the gaps already
   separate them, and vertical lines only box the strip in. A short gold
   tick over each one marks the column instead, picking up the hairline
   in the hero rule.

   The values are set in the display serif rather than the body sans —
   these are titles and dates, the kind of thing that belongs in the
   same voice as the headings, not in interface type. */
.ledger{background:var(--surface); border-block-end:1px solid var(--line)}
.ledger__in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(28px,3.6vw,42px);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,4vw,58px);
}
.ledger__cell{padding:0; border:0; display:flex; flex-direction:column}
.ledger__cell::before{
  content:""; display:block; width:22px; height:1px;
  background:var(--gold); opacity:.6; margin-block-end:15px;
}
.ledger__k{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin-block-end:11px;
}
.ledger__v{
  font-family:var(--f-display); font-optical-sizing:auto;
  font-size:clamp(18px,1.55vw,20.5px); font-weight:500; line-height:1.26;
  letter-spacing:-.005em; color:var(--ink); text-wrap:balance;
  /* The cells stretch to a common height, and the note is pushed to the
     bottom of each, so the notes share a line even when one value has to
     wrap onto two. */
  display:flex; flex-direction:column; flex:1;
}
html[dir="rtl"] .ledger__v{font-family:var(--f-thaana-display); font-weight:400; line-height:1.6}
.ledger__v span{
  display:block; font-family:var(--f-body); font-size:13px; font-weight:400;
  line-height:1.5; color:var(--ink-3); letter-spacing:0;
  margin-block-start:auto; padding-block-start:9px;
}
html[dir="rtl"] .ledger__v span{font-family:var(--f-thaana)}
@media (max-width:840px){
  .ledger__in{grid-template-columns:repeat(2,1fr); gap:26px 30px}
}
@media (max-width:460px){
  .ledger__in{grid-template-columns:1fr; gap:22px}
}

/* ── Section scaffolding ──────────────────────────────────────────── */
section[id]{scroll-margin-top:84px}
.sec{padding-block:clamp(58px, 8vw, 108px)}
.sec--alt{background:var(--surface); border-block:1px solid var(--line)}

/* The head is a two-column object: title on the measure, lede beside it.
   This is what keeps desktop width from going hollow on the right. */
.sec__head{
  display:grid; gap:clamp(14px,2.4vw,44px);
  grid-template-columns:minmax(0,1fr);
  margin-block-end:clamp(30px,4.2vw,52px);
  align-items:end;
}
@media (min-width:900px){
  .sec__head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .sec__head--single{grid-template-columns:minmax(0,1fr)}
}
.eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--purple); display:flex; align-items:center; gap:12px; margin-block-end:14px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--purple); flex:none}
h2.sec__t{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:400;
  font-size:clamp(31px, 4.5vw, 54px); line-height:1.06; letter-spacing:-.015em;
  margin:0; text-wrap:balance;
}
html[dir="rtl"] h2.sec__t{font-family:var(--f-thaana-display); line-height:1.45; font-size:clamp(26px,3.6vw,42px)}
.sec__lede{color:var(--ink-2); font-size:16px; margin:0; max-width:56ch; padding-block-end:6px}

/* Marks a string the Dhivehi edition has not been given yet. */
.untranslated{
  display:inline-block; vertical-align:middle; margin-inline-start:8px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-wash); border-radius:99px; padding:2px 8px;
}

/* ── Biography ────────────────────────────────────────────────────── */
.bio{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(28px,4.4vw,64px); align-items:start}
.bio__body p{margin:0 0 17px; max-width:66ch; color:var(--ink-2)}
.bio__body p strong{color:var(--ink); font-weight:600}
.bio__figure{position:relative; margin:0}
.bio__figure img{border-radius:3px; box-shadow:var(--shadow-2)}
.bio__figure figcaption{
  margin-block-start:12px; font-family:var(--f-mono); font-size:11px; line-height:1.6;
  letter-spacing:.03em; color:var(--ink-3);
  border-inline-start:2px solid var(--gold); padding-inline-start:11px;
}
.facts{list-style:none; margin:28px 0 0; padding:0; border-block-start:1px solid var(--line)}
.facts li{display:flex; gap:16px; padding:11px 0; border-block-end:1px solid var(--line); font-size:14.5px}
.facts b{
  flex:none; width:132px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); padding-block-start:3px; font-weight:400;
}
@media (max-width:880px){ .bio{grid-template-columns:1fr} .bio__figure{max-width:420px} }

/* ── Record ledger ────────────────────────────────────────────────── */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-block-end:26px}
.chip{
  display:inline-flex; align-items:baseline; gap:6px;
  font-size:12.5px; font-weight:600; padding:8px 15px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line-2); background:transparent; color:var(--ink-2);
  transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{border-color:var(--purple-2); color:var(--purple)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.chip__n{font-family:var(--f-mono); font-size:11px; opacity:.62}

.records{border-block-start:1px solid var(--line-2)}
.rec{
  display:grid; grid-template-columns:86px minmax(0,1fr) 154px;
  gap:clamp(14px,2.2vw,30px); align-items:start;
  padding-block:22px; border-block-end:1px solid var(--line);
}
.rec__yr{
  font-family:var(--f-mono); font-size:13px; color:var(--ink-3);
  padding-block-start:4px; font-variant-numeric:tabular-nums;
}
.rec__t{font-size:18.5px; font-weight:600; margin:0 0 6px; line-height:1.28; letter-spacing:-.005em}
.rec__d{margin:0; color:var(--ink-2); font-size:14.5px; max-width:62ch}
.rec__meta{display:flex; flex-wrap:wrap; gap:6px 15px; margin-block-start:11px}
.rec__meta span{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.rec__meta b{color:var(--ink-2); font-weight:500}
.status{
  justify-self:start; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 12px; border-radius:99px;
}
.status::before{content:""; width:6px; height:6px; border-radius:99px; background:currentColor; flex:none}
.status--done{background:var(--green-wash); color:var(--green)}
.status--start{background:var(--purple-wash); color:var(--purple)}
.status--carry{background:var(--gold-wash); color:var(--gold)}
@media (max-width:780px){
  .rec{grid-template-columns:64px minmax(0,1fr)}
  .rec .status{grid-column:2; margin-block-start:12px}
}

/* ── Interlude bands ──────────────────────────────────────────────── */
.band{position:relative; isolation:isolate; overflow:hidden; background:#0D0819; color:#F4F0FC}
.band__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.band::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, rgba(19,10,42,.94) 0%, rgba(19,10,42,.80) 46%, rgba(13,8,25,.66) 100%);
}
.band__in{padding-block:clamp(44px,6.4vw,78px)}
.band__k{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.19em; text-transform:uppercase;
  color:#C6A65C; margin-block-end:26px; display:flex; align-items:center; gap:13px;
}
.band__k::after{content:""; flex:1; height:1px; background:linear-gradient(to var(--veil-dir, right), rgba(198,166,92,.6), rgba(198,166,92,0))}
.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:clamp(20px,3vw,40px)}
.fig__n{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:400;
  font-size:clamp(40px,5.4vw,66px); line-height:1; letter-spacing:-.028em; color:#fff;
  font-variant-numeric:tabular-nums;
}
.fig__n small{font-size:.4em; letter-spacing:.01em; margin-inline-start:7px; color:#CABEE8}
.fig__d{margin:11px 0 0; font-size:14px; line-height:1.55; color:#C0B2DD; max-width:31ch}
.band--cta .band__in{display:flex; flex-wrap:wrap; align-items:center; gap:22px 40px}
.band--cta h2{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:400;
  font-size:clamp(27px,3.6vw,44px); margin:0; line-height:1.08; max-width:19ch; color:#fff; text-wrap:balance;
}
html[dir="rtl"] .band--cta h2{font-family:var(--f-thaana-display); line-height:1.4}
.band--cta p{margin:9px 0 0; color:#C0B2DD; font-size:14.5px; max-width:46ch}
.band--cta .btn{margin-inline-start:auto}
@media (max-width:720px){ .band--cta .btn{margin-inline-start:0} }

/* ── Vision ───────────────────────────────────────────────────────── */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.pillar{background:var(--bg); padding:clamp(22px,2.9vw,32px)}
.sec--alt .pillar{background:var(--surface)}
.pillar__n{font-family:var(--f-mono); font-size:11px; color:var(--purple); letter-spacing:.14em; margin-block-end:14px}
.pillar h3{font-family:var(--f-display); font-optical-sizing:auto; font-weight:500; font-size:22px; margin:0 0 9px; line-height:1.18}
html[dir="rtl"] .pillar h3{font-family:var(--f-thaana-display); line-height:1.5}
.pillar p{margin:0; font-size:14.5px; color:var(--ink-2)}

/* ── Timeline ─────────────────────────────────────────────────────── */
.tl{position:relative; margin:0; padding:0; padding-inline-start:clamp(20px,3vw,34px); list-style:none}
.tl::before{content:""; position:absolute; inset-inline-start:0; top:7px; bottom:7px; width:1px; background:var(--line-2)}
.tl li{position:relative; padding-block-end:30px}
.tl li::before{
  content:""; position:absolute; top:8px; width:9px; height:9px; border-radius:99px;
  inset-inline-start:calc(-1 * clamp(20px,3vw,34px) - 4.5px);
  background:var(--bg); border:1.5px solid var(--purple-2);
}
.sec--alt .tl li::before{background:var(--surface)}
.tl li[data-mark="key"]::before{background:var(--purple); border-color:var(--purple)}
.tl__date{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); display:block; margin-block-end:5px}
.tl__t{font-size:17.5px; font-weight:600; margin:0 0 5px; line-height:1.32}
.tl__d{margin:0; font-size:14.5px; color:var(--ink-2); max-width:64ch}

/* ── Ongoing ──────────────────────────────────────────────────────── */
.ongoing{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px}
.ocard{
  background:var(--surface); border:1px solid var(--line);
  border-block-start:2px solid var(--green-2); padding:24px; border-radius:2px;
}
.sec--alt .ocard{background:var(--bg)}
.ocard h3{font-size:17px; margin:0 0 8px; font-weight:600; line-height:1.3}
.ocard p{margin:0; font-size:14.5px; color:var(--ink-2)}
.ocard__tag{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--green); margin-block-end:13px}

/* ── Holding page ─────────────────────────────────────────────────
   What the public sees until the office publishes. A single screen: the
   national flag, the name, and one line of explanation. */
body.holding{background:#0B0716; color:#EFE9FB}
.hold{
  min-height:100svh; display:grid; place-items:center;
  padding:clamp(28px,6vw,64px) var(--gutter);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(45,22,92,.55) 0%, rgba(11,7,22,0) 62%),
    #0B0716;
}
.hold__in{
  width:100%; max-width:640px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  animation:holdIn 1.1s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes holdIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

.hold__flag{
  position:relative; width:clamp(230px, 40vw, 380px); aspect-ratio:3/2;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.6));
}
.hold__svg, .hold__canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.hold__svg{border-radius:2px}
.hold__canvas[hidden]{display:none}
.hold__flag.is-waving .hold__svg{visibility:hidden}

.hold__dv{
  font-family:var(--f-thaana); direction:rtl; unicode-bidi:isolate;
  font-size:clamp(24px,4.4vw,38px); line-height:1.5;
  margin:clamp(26px,4vw,40px) 0 0; color:#FFFFFF;
}
.hold__t{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:400;
  font-size:clamp(26px,4.6vw,44px); line-height:1.12; letter-spacing:-.015em;
  margin:14px 0 0; color:#FFFFFF; text-wrap:balance;
}
html[dir="rtl"] .hold__t{font-family:var(--f-thaana-display); line-height:1.45}
.hold__role{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#A493CC; margin:16px 0 0;
}
.hold__note{
  margin:26px 0 0; font-size:15.5px; line-height:1.65; color:#BCADDB; max-width:44ch;
}
.hold__foot{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;
  margin-block-start:clamp(34px,6vw,54px); padding-block-start:22px;
  border-block-start:1px solid rgba(239,233,251,.14); width:100%;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
}
.hold__foot a{color:#8F80B6; text-decoration:none}
.hold__foot a:hover{color:#EFE9FB}
.hold__foot a[aria-current="true"]{color:#EFE9FB}
.hold__foot a.is-dv{font-family:var(--f-thaana); font-size:13px; letter-spacing:0}

/* ── Preview bar, shown to the office before publishing ───────────── */
.previewbar{
  position:sticky; top:0; z-index:90;
  background:var(--gold-wash); color:var(--ink);
  border-block-end:1px solid var(--line-2);
  padding:9px var(--gutter);
  font-size:13px; text-align:center;
}
.previewbar strong{font-weight:700}
.previewbar a{margin-inline-start:10px; color:var(--purple); font-weight:600}
.is-preview .topbar{top:0}

/* ── National flag band ───────────────────────────────────────────
   The default state of the Latest section: an interlude carrying the
   national flag, replaced by the X feed once that is switched on. */
.band--flag{background:#0B0716}
.band--flag::after{
  background:linear-gradient(110deg, rgba(17,9,38,.92) 0%, rgba(17,9,38,.76) 52%, rgba(11,7,22,.88) 100%);
}
.flagband{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(22px,4vw,64px); text-align:center;
}
/* Centred as a pair: left-aligning it leaves a hollow right-hand side. */
@media (min-width:760px){ .flagband{text-align:start} }

.flagband__flag{
  position:relative; width:clamp(210px, 26vw, 330px); aspect-ratio:3/2; flex:none;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));
}
.flagband__svg, .flagband__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.flagband__svg{border-radius:2px}
.flagband__canvas[hidden]{display:none}
/* Once the canvas is running the flat SVG steps aside. */
.flagband__flag.is-waving .flagband__svg{visibility:hidden}

.flagband__text{max-width:38ch}
.flagband__text::before{
  content:""; display:block; width:38px; height:1px; margin-block-end:18px;
  background:linear-gradient(to right, rgba(198,166,92,.9), rgba(198,166,92,0));
}
@media (max-width:759px){ .flagband__text::before{margin-inline:auto} }
.flagband__dv{
  display:inline-block;
  font-family:var(--f-thaana); direction:rtl; unicode-bidi:isolate;
  font-size:clamp(26px,4vw,42px); line-height:1.5; margin:0 0 6px; color:#FFFFFF;
}
.flagband__t{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:400;
  font-size:clamp(20px,2.4vw,28px); line-height:1.2; margin:0; color:#C9BCE8;
  letter-spacing:.005em;
}
.flagband__note{margin:12px 0 0; font-size:14.5px; line-height:1.6; color:#AC9ECC}

/* ── Statements ───────────────────────────────────────────────────
   A ruled list rather than cards: these are dated records, and a list
   reads as a record while a grid of cards reads as marketing. */
.stlist{border-block-start:1px solid var(--line-2)}
.stitem{
  display:grid; grid-template-columns:170px minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,30px); align-items:baseline;
  padding-block:22px; border-block-end:1px solid var(--line);
  text-decoration:none; color:inherit; transition:background .15s;
}
.stitem:hover{background:var(--purple-wash)}
.stitem__meta{display:flex; flex-direction:column; gap:6px; padding-block-start:3px}
.stitem__meta time{
  font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.stitem__kind{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--purple);
}
.stitem__pin{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-wash); border-radius:99px;
  padding:2px 8px; width:fit-content;
}
.stitem__t{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:500;
  font-size:21px; line-height:1.26; margin:0 0 7px; letter-spacing:-.005em;
}
html[dir="rtl"] .stitem__t{font-family:var(--f-thaana-display); line-height:1.5}
.stitem__d{margin:0; font-size:14.5px; color:var(--ink-2); max-width:62ch}
.stitem__go{
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); white-space:nowrap;
}
.stitem:hover .stitem__go{color:var(--purple)}
@media (max-width:780px){
  .stitem{grid-template-columns:1fr; gap:10px}
  .stitem__meta{flex-direction:row; align-items:center; gap:12px}
  .stitem__go{display:none}
}

/* ── A single statement ───────────────────────────────────────────── */
.article{padding-block:clamp(40px,6vw,76px)}
.article__back{margin:0 0 clamp(24px,4vw,40px); font-family:var(--f-mono); font-size:12px}
.article__back a{color:var(--ink-3); text-decoration:none}
.article__back a:hover{color:var(--purple)}
.article__head{max-width:40ch; margin-block-end:clamp(26px,4vw,40px)}
.article__meta{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; margin-block-end:14px}
.article__kind{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--purple);
}
.article__meta time{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3)}
.article__t{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:400;
  font-size:clamp(30px,4.4vw,50px); line-height:1.07; letter-spacing:-.018em;
  margin:0; text-wrap:balance;
}
html[dir="rtl"] .article__t{font-family:var(--f-thaana-display); line-height:1.4}
.article__lede{
  margin:18px 0 0; font-size:18px; line-height:1.6; color:var(--ink-2);
}
.article__body{max-width:66ch}
.article__body p{margin:0 0 19px; font-size:17px; line-height:1.72; color:var(--ink-2)}
.article__body p strong{color:var(--ink); font-weight:600}
.article__more{
  margin-block-start:clamp(36px,6vw,60px); padding-block-start:26px;
  border-block-start:1px solid var(--line);
}
.article__more .feed__k{margin-block-end:16px}

/* ── Selected posts ───────────────────────────────────────────────
   Held in the site's own store, so they render for every visitor —
   including the great majority who are not signed in to X. */
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px}
.post{
  display:flex; flex-direction:column; gap:14px;
  background:var(--bg); border:1px solid var(--line); border-radius:4px;
  padding:clamp(20px,2.6vw,26px); position:relative;
}
.sec--alt .post{background:var(--surface)}
.post::before{
  content:"”"; position:absolute; top:6px; inset-inline-end:16px;
  font-family:var(--f-display); font-size:52px; line-height:1;
  color:var(--purple); opacity:.16;
}
.post__t{
  margin:0; font-size:15.5px; line-height:1.6; color:var(--ink);
  overflow-wrap:anywhere;
}
.post__foot{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline;
  margin-block-start:auto; padding-block-start:4px;
  border-block-start:1px solid var(--line);
}
.post__date{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3)}
.post__link{
  font-family:var(--f-mono); font-size:11.5px; color:var(--purple);
  text-decoration:none; margin-inline-start:auto;
  border-block-end:1px solid currentColor; padding-block-end:1px;
}
.posts__more{margin:22px 0 0}

/* Selected posts standing in for a widget that came back empty. */
.feed__posts{padding:0 clamp(18px,2.6vw,26px) clamp(18px,2.6vw,26px)}
.feed__posts[hidden]{display:none}
.feed__box.has-picks{min-height:0}
.feed__box.has-picks .feed__state{padding-block-end:18px}

/* ── Latest posts ─────────────────────────────────────────────────
   The timeline is third-party and may not render at all, so the box is
   sized up front and carries its own message and link. Nothing in this
   section depends on X answering. */
.feed{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(18px,2.6vw,34px); align-items:start}
@media (max-width:860px){ .feed{grid-template-columns:1fr} }

.feed__box{
  position:relative; border:1px solid var(--line); border-radius:4px;
  background:var(--bg); overflow:hidden; min-height:320px;
}
.sec--alt .feed__box{background:var(--surface)}
.feed__box iframe{display:block; border-radius:3px}

.feed__state{
  display:grid; justify-items:start; gap:14px; padding:clamp(22px,3vw,34px);
  max-width:52ch;
}
.feed__msg{margin:0; color:var(--ink-2); font-size:14.5px}
.feed__fallback{
  margin:0; font-size:14px; color:var(--gold);
  border-inline-start:2px solid var(--gold); padding-inline-start:12px;
}
.feed__fallback[hidden]{display:none}
/* Once the widget renders, the placeholder gets out of the way. */
.feed__box.is-loaded .feed__state{display:none}

.feed__card{
  border:1px solid var(--line); border-radius:4px; padding:20px;
  background:var(--bg);
}
.sec--alt .feed__card{background:var(--surface)}
.feed__card + .feed__card{margin-block-start:14px}
.feed__k{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--purple); margin-block-end:10px;
}
.feed__handle{
  font-family:var(--f-mono); font-size:16px; margin:0 0 8px; color:var(--ink);
  overflow-wrap:anywhere;
}
.feed__note{margin:0 0 14px; font-size:13.5px; color:var(--ink-2)}
.feed__picks{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.feed__picks li{padding-block-end:14px; border-block-end:1px solid var(--line)}
.feed__picks li:last-child{border-block-end:0; padding-block-end:0}
.feed__picks p{margin:0 0 7px; font-size:13.5px; color:var(--ink-2); line-height:1.55}
.feed__picks a{
  font-family:var(--f-mono); font-size:11.5px; color:var(--purple);
  text-decoration:none; border-block-end:1px solid currentColor; padding-block-end:1px;
}

/* ── Gallery ──────────────────────────────────────────────────────── */
.gal{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(168px,19vw,250px); gap:12px}
.gal figure{margin:0; position:relative; height:100%; overflow:hidden; border-radius:2px; background:var(--surface-2)}
.gal img{width:100%; height:100%; object-fit:cover; object-position:var(--pos, center); transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.gal figure:hover img{transform:scale(1.045)}
.gal figcaption{
  position:absolute; inset-inline:0; bottom:0; padding:28px 14px 12px;
  background:linear-gradient(to top, rgba(13,8,25,.9), rgba(13,8,25,0));
  color:#F4F0FC; font-size:12px; font-family:var(--f-mono); letter-spacing:.02em; line-height:1.45;
}
html[dir="rtl"] .gal figcaption{font-family:var(--f-thaana)}
.gal .g-wide{grid-column:span 2}
.gal .slot{
  display:grid; place-content:center; text-align:center; gap:7px; padding:18px;
  border:1px dashed var(--line-2); background:var(--surface);
  color:var(--ink-3); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.slot__plus{font-size:20px; color:var(--purple-2)}
@media (max-width:840px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .g-wide{grid-column:span 2}
}

/* ── Archive ──────────────────────────────────────────────────────── */
.arch__bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-block-end:22px}
.search{
  flex:1 1 240px; min-width:0; display:flex; align-items:center; gap:9px;
  border:1px solid var(--line-2); border-radius:99px; padding:9px 16px; background:var(--surface);
}
.sec--alt .search{background:var(--bg)}
.search input{border:0; background:transparent; font-size:14px; width:100%; outline:none}
.search svg{flex:none; color:var(--ink-3)}
.arch{border-block-start:1px solid var(--line-2)}
.arow{
  display:grid; grid-template-columns:80px 130px minmax(0,1fr) auto;
  gap:16px; align-items:baseline; padding-block:15px; border-block-end:1px solid var(--line);
  text-decoration:none; transition:background .15s;
}
.arow:hover{background:var(--purple-wash)}
.arow__yr{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.arow__kind{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--purple)}
.arow__t{font-size:15px; font-weight:500; line-height:1.4}
.arow__src{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); white-space:nowrap}
.arow:hover .arow__src{color:var(--purple)}
.arch__empty{padding-block:34px; color:var(--ink-3); font-size:14px}
@media (max-width:780px){
  .arow{grid-template-columns:72px minmax(0,1fr); gap:5px 14px}
  .arow__kind, .arow__t, .arow__src{grid-column:2}
}

/* ── Contact ──────────────────────────────────────────────────────── */
.contact{display:grid; grid-template-columns:repeat(auto-fit,minmax(318px,1fr)); gap:clamp(20px,3vw,34px)}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:clamp(24px,3.2vw,38px); box-shadow:var(--shadow-2)}
.sec--alt .panel{background:var(--bg)}
.panel__k{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--purple); margin-block-end:12px}
.panel h3{font-family:var(--f-display); font-optical-sizing:auto; font-weight:500; font-size:27px; margin:0 0 8px; line-height:1.14}
html[dir="rtl"] .panel h3{font-family:var(--f-thaana-display); line-height:1.45}
.panel > p{margin:0 0 22px; font-size:14.5px; color:var(--ink-2); max-width:46ch}
.field{display:grid; gap:6px; margin-block-end:15px}
.field label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.field input, .field textarea, .field select{
  font-size:15px; background:var(--bg); border:1px solid var(--line-2); border-radius:2px;
  padding:11px 13px; width:100%; outline:none; transition:border-color .15s;
}
.sec--alt .field input, .sec--alt .field textarea, .sec--alt .field select{background:var(--surface)}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--purple)}
.field textarea{resize:vertical; min-height:112px; line-height:1.55}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:15px}
@media (max-width:520px){ .row2{grid-template-columns:1fr} }
.formnote{font-size:12.5px; color:var(--ink-3); margin:14px 0 0; line-height:1.5}
/* Which fields are needed, said once at the top rather than with a
   scattering of asterisks the reader has to decode. */
.formreq{font-size:12.5px; color:var(--ink-3); margin:0 0 18px; line-height:1.5}
.opt{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); opacity:.72;
  margin-inline-start:6px; border:1px solid var(--line-2);
  border-radius:99px; padding:1px 6px; vertical-align:1px;
}
html[dir="rtl"] .opt{font-family:var(--f-thaana-ui); letter-spacing:normal; text-transform:none}
/* A field the browser has rejected, once the person has had a go at it. */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid{border-color:var(--danger)}

/* ── The check on the contact forms ──────────────────────────────── */
.cap{
  margin-block:20px 18px; padding:16px; border-radius:3px;
  border:1px solid var(--line); background:var(--surface-2);
}
.sec--alt .cap{background:var(--surface-2)}
.cap__row{display:flex; align-items:flex-start; gap:10px; margin-block-end:14px}
.cap__img{
  border-radius:2px; border:1px solid var(--line-2); background:#fff;
  width:260px; height:74px; max-width:100%; flex:1 1 auto; object-fit:cover;
}
.cap__btn{
  flex:none; width:34px; height:34px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  display:grid; place-items:center; transition:color .15s, border-color .15s, transform .3s;
}
.cap__btn:hover{border-color:var(--purple); color:var(--purple)}
.cap__btn:active{transform:rotate(-90deg)}
.cap__q{
  margin:0 0 14px; font-size:18px; font-weight:500; color:var(--ink);
  font-family:var(--f-display); font-optical-sizing:auto;
}
.cap .field{margin-block-end:0}
.cap__alt{margin:12px 0 0}
.cap__alt button{
  border:0; background:none; padding:0; cursor:pointer;
  font-family:var(--f-body); font-size:12.5px; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px;
}
.cap__alt button:hover{color:var(--purple)}
@media (max-width:420px){ .cap__img{width:100%} }
.result{margin-block-start:16px; padding:14px 16px; border-radius:2px; font-size:14px; line-height:1.55; border-inline-start:3px solid var(--green); background:var(--green-wash)}
.result[data-kind="error"]{border-inline-start-color:var(--danger); background:var(--danger-wash)}
.result code{font-family:var(--f-mono); font-size:13px; background:color-mix(in srgb, var(--ink) 9%, transparent); padding:1px 6px; border-radius:3px}

/* ── Footer ───────────────────────────────────────────────────────── */
.foot{
  position:relative; isolation:isolate; overflow:hidden;
  background:#0D0819; color:#CEC3E5; padding-block:clamp(40px,6vw,68px) clamp(28px,4vw,42px);
}
.foot::before{content:""; position:absolute; inset:0; z-index:-2; background-image:var(--tex-foot); background-size:cover; background-position:center 30%; opacity:.32}
.foot::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(13,8,25,.88), rgba(13,8,25,.97))}
.foot a{color:#E3DAF6}
.foot__top{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start}
.foot__mark{font-family:var(--f-display); font-optical-sizing:auto; font-weight:400; font-size:clamp(25px,3.4vw,38px); color:#F7F3FF; margin:0 0 10px; line-height:1.08}
html[dir="rtl"] .foot__mark{font-family:var(--f-thaana-display); line-height:1.4}
.foot__native{display:inline-block; font-family:var(--f-thaana); direction:rtl; font-size:19px; color:#B7A7DB}
.foot p{font-size:13.5px; line-height:1.66; margin:10px 0 0; max-width:54ch; color:#B2A5CD}
.foot h4{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:#8D7EB3; margin:0 0 12px; font-weight:400}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot ul a{font-size:13px; text-decoration:none; border-block-end:1px solid rgba(227,218,246,.26); padding-block-end:1px}
.foot ul a:hover{border-block-end-color:#E3DAF6}
.foot__bar{
  margin-block-start:clamp(28px,4vw,46px); padding-block-start:20px;
  border-block-start:1px solid rgba(227,218,246,.18);
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; color:#8D7EB3;
}
.foot__bar a{text-decoration:none}
.foot__bar a:hover{color:#E3DAF6}
.foot__swatch{display:flex; gap:5px; align-items:center; margin-inline-start:auto}
.foot__swatch i{width:13px; height:13px; border-radius:99px; display:block}
@media (max-width:780px){ .foot__top{grid-template-columns:1fr} .foot__swatch{margin-inline-start:0} }

/* ── Thaana typography ────────────────────────────────────────────
   Thaana has no letter case and its vowel marks sit above and below the
   line, so the conventions used on the Latin labels — uppercase with
   wide tracking — do nothing useful and push the marks apart. Labels in
   the Dhivehi edition drop both, and every Thaana run gets the extra
   leading the marks need. */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .ledger__k,
html[dir="rtl"] .ocard__tag,
html[dir="rtl"] .pillar__n,
html[dir="rtl"] .feed__k,
html[dir="rtl"] .panel__k,
html[dir="rtl"] .stitem__kind,
html[dir="rtl"] .article__kind,
html[dir="rtl"] .arow__kind,
html[dir="rtl"] .field label,
html[dir="rtl"] .foot h4,
html[dir="rtl"] .status,
html[dir="rtl"] .untranslated{
  text-transform:none;
  letter-spacing:normal;
  font-family:var(--f-thaana-ui);
}
/* Vowel marks need room above and below; Latin leading crowds them. */
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] .sec__lede,
html[dir="rtl"] .rec__d,
html[dir="rtl"] .tl__d,
html[dir="rtl"] .stitem__d,
html[dir="rtl"] .article__body p{
  line-height:1.95;
}
html[dir="rtl"] .hero__sub{line-height:1.9}
/* Thaana reads optically smaller than Latin at the same pixel size. */
.thaana, [lang="dv"]{font-family:var(--f-thaana); line-height:1.9}
html[dir="rtl"] .btn{letter-spacing:normal}
/* Navigation set in Thaana: the UI face, a little larger than the Latin
   labels because Thaana reads optically smaller, and leading for the marks. */
html[dir="rtl"] .navlinks a{
  font-family:var(--f-thaana-ui); font-size:14.5px; font-weight:400;
  line-height:1.8; padding-block:5px;
}
html[dir="rtl"] .menu a{ font-family:var(--f-thaana); font-size:16.5px; font-weight:400; line-height:1.8 }
html[dir="rtl"] .menu a em{ font-family:var(--f-mono); font-size:10.5px }

/* ── Bidirectional text ───────────────────────────────────────────
   In the Dhivehi edition a string with no translation yet falls back to
   English. Inside an RTL container that would throw its punctuation to
   the wrong end ("​.People's National Front"). `plaintext` lets each
   block take its direction from its own first strong character, so
   Thaana runs right-to-left and English runs left-to-right, correctly
   punctuated, with no per-string markup. */
html[dir="rtl"] p,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] li, html[dir="rtl"] figcaption, html[dir="rtl"] blockquote,
html[dir="rtl"] .ledger__v, html[dir="rtl"] .ledger__k,
html[dir="rtl"] .rec__t, html[dir="rtl"] .rec__d,
html[dir="rtl"] .tl__t, html[dir="rtl"] .tl__d, html[dir="rtl"] .tl__date,
html[dir="rtl"] .arow__t, html[dir="rtl"] .fig__d,
html[dir="rtl"] .sec__lede, html[dir="rtl"] .hero__sub,
html[dir="rtl"] .ocard h3, html[dir="rtl"] .pillar h3,
html[dir="rtl"] .facts span, html[dir="rtl"] .field label{
  unicode-bidi:plaintext;
  text-align:start;
}
/* The hero name is set as one block; keep it aligned to the reading edge. */
html[dir="rtl"] .hero h1, html[dir="rtl"] .hero h1 em{unicode-bidi:plaintext; text-align:start}

/* ── Print ────────────────────────────────────────────────────────── */
@media print{
  .topbar, .menu, .hero__grain, .band__bg, .foot::before, .contact, .arch__bar{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .tex::before{display:none}
  .hero{min-height:auto; color:#000; background:#fff}
  .hero__img, .hero__veil{display:none}
  .hero h1, .hero__rule, .hero__sub{color:#000}
  .sec{padding-block:18pt; break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8pt; color:#555}
}