@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════════
   Dr Mohamed Jameel Ahmed — site styles

   Display  Cormorant Garamond   an old-style face after Garamond; used
                                 large, and letterspaced in capitals for
                                 every label on the site
   Text     Spectral             a screen serif with the sturdiness to
                                 carry a paragraph at 17px, and figures
                                 lining enough to set a column of dates

   The page is a document, not a poster. There is no photographic hero,
   the headings are centred, the structure is carried by hairline rules
   and letterspaced capitals rather than by cards and coloured blocks,
   and the only geometry that repeats is the seal.

   Parchment is the default ground and oxblood the dark one; the
   masthead is oxblood in both, the way a cover is a different stock
   from the pages.

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

:root{
  /* Parchment */
  --paper:#F7F3E9;
  --surface:#FFFDF7;
  --surface-2:#F0E9D9;
  --ink:#22150F;
  --ink-2:#584439;
  --ink-3:#8B7869;
  --line:#E2D8C3;
  --line-2:#CBBBA0;

  /* Oxblood — the seal, the rules of state, every primary action */
  --ox:#6E1B23;
  --ox-2:#8F2F36;
  --ox-wash:#F4E5E3;

  /* Gold — labels, hairlines, the seal's ring */
  --gold:#8E6E22;
  --gold-2:#C9A227;
  --gold-wash:#F5EED9;

  /* The party's light green, kept for the footer swatch alone */
  --green:#3F6B33;
  --green-2:#8CCB6A;
  --green-wash:#EBF2E2;

  --danger:#9B2118;
  --danger-wash:#F9E7E4;

  --shadow-1:0 1px 2px rgba(34,21,15,.05);
  --shadow-2:0 1px 2px rgba(34,21,15,.06), 0 16px 38px -26px rgba(34,21,15,.34);
  --tex-op:.11;
  --tex-op-strong:.17;

  /* The masthead and the seal keep their colours in both themes. */
  --mast-bg:#2A0E12;
  --mast-bg-2:#170608;
  --mast-ink:#F4E7DA;
  --mast-dim:#C7A597;
  --mast-gold:#C9A227;

  --f-display:"Cormorant Garamond","EB Garamond",Garamond,"Palatino Linotype",Palatino,Georgia,serif;
  --f-body:"Spectral","Iowan Old Style",Charter,Georgia,serif;
  --f-thaana:"Noto Sans Thaana",var(--f-body);
  --f-thaana-display:"Noto Sans Thaana",var(--f-display);
  --f-thaana-ui:"Noto Sans Thaana",var(--f-display);

  --gutter:clamp(20px,5vw,72px);
  --maxw:1180px;
  --measure:66ch;

  --trk:.22em;            /* the standard letterspacing on capitals */
  --trk-wide:.34em;       /* the masthead and the seal */
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1B0C0E;
    --surface:#241113;
    --surface-2:#31181A;
    --ink:#F2E7DA;
    --ink-2:#D0BCAC;
    --ink-3:#9E8878;
    --line:#3A1E20;
    --line-2:#502A2C;
    --ox:#E09A94;
    --ox-2:#C2635F;
    --ox-wash:#36191B;
    --gold:#D8B45E;
    --gold-2:#EACF8C;
    --gold-wash:#2C2413;
    --green:#A9D98C;
    --green-2:#8CCB6A;
    --green-wash:#1E2A18;
    --danger:#EEA79E;
    --danger-wash:#3A1613;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 1px 2px rgba(0,0,0,.45), 0 20px 44px -28px rgba(0,0,0,.9);
    --tex-op:.16;
    --tex-op-strong:.24;
  }
}
:root[data-theme="dark"]{
  --paper:#1B0C0E;
  --surface:#241113;
  --surface-2:#31181A;
  --ink:#F2E7DA;
  --ink-2:#D0BCAC;
  --ink-3:#9E8878;
  --line:#3A1E20;
  --line-2:#502A2C;
  --ox:#E09A94;
  --ox-2:#C2635F;
  --ox-wash:#36191B;
  --gold:#D8B45E;
  --gold-2:#EACF8C;
  --gold-wash:#2C2413;
  --green:#A9D98C;
  --green-2:#8CCB6A;
  --green-wash:#1E2A18;
  --danger:#EEA79E;
  --danger-wash:#3A1613;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 1px 2px rgba(0,0,0,.45), 0 20px 44px -28px rgba(0,0,0,.9);
  --tex-op:.16;
  --tex-op-strong:.24;
}

/* ── Foundations ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-block-start:76px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.72;
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html[lang="dv"] body{ font-family:var(--f-thaana); line-height:2 }

/* In the Dhivehi edition the chosen Thaana face is appended to the end of
   each Latin stack. A browser picks the font per character, from the first
   family in the list that has that character — so Latin and figures still
   come from the face they were designed in, and any Thaana character in an
   element that has no Thaana rule of its own reaches the chosen face
   instead of whatever the operating system would otherwise substitute.
   Buttons and form controls are the case this exists for. */
html[dir="rtl"]{
  --f-display:"Cormorant Garamond","EB Garamond",Garamond,"Palatino Linotype",Palatino,Georgia,serif,var(--f-face-display,"Noto Sans Thaana");
  --f-body:"Spectral","Iowan Old Style",Charter,Georgia,serif,var(--f-face-body,"Noto Sans Thaana");
}

/* Form controls do not inherit type from the page unless they are told
   to. Without this a <button> or a <select> falls back to the browser's
   own UI font — which in the Dhivehi edition means a face nobody chose. */
button,input,select,textarea{font:inherit; color:inherit}

img,svg,canvas{max-width:100%; display:block}
[hidden]{display:none}
a{color:var(--ox); text-underline-offset:.22em; text-decoration-thickness:.5px}
a:hover{color:var(--ox-2)}
::selection{background:var(--gold-wash); color:var(--ink)}
:focus-visible{outline:2px solid var(--ox); outline-offset:3px}

h1,h2,h3,h4{
  font-family:var(--f-display); font-weight:600; margin:0;
  letter-spacing:.005em; line-height:1.18;
}
html[lang="dv"] h1,html[lang="dv"] h2,html[lang="dv"] h3,html[lang="dv"] h4{
  font-family:var(--f-thaana-display); line-height:1.7;
}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

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

/* Letterspaced capitals. Used for every label, in place of a second
   typeface — Cormorant is cut finely enough to take the tracking. */
.eyebrow,.smallcaps{
  font-family:var(--f-display); font-weight:600;
  font-size:12px; text-transform:uppercase; letter-spacing:var(--trk);
  color:var(--gold); margin:0;
}
html[lang="dv"] .eyebrow,html[lang="dv"] .smallcaps{
  font-family:var(--f-thaana-ui); letter-spacing:0; font-size:13.5px;
}

/* A translation that has not been written yet. */
.untranslated{
  display:inline-block; margin-inline-start:.5em; vertical-align:.35em;
  font-family:var(--f-display); font-size:9.5px; font-weight:600;
  letter-spacing:.16em; padding:2px 6px; border:1px solid var(--line-2);
  color:var(--ink-3); border-radius:2px;
}

/* ── The ornamental rule ──────────────────────────────────────────
   A hairline broken by a small lozenge. It separates the movements of
   the page where a heading would be too loud. */
.rule{
  display:flex; align-items:center; gap:14px;
  margin:0; border:0; color:var(--line-2);
}
.rule::before,.rule::after{content:""; flex:1; height:1px; background:currentColor}
.rule__mark{
  width:7px; height:7px; flex:none; rotate:45deg;
  border:1px solid var(--gold); background:transparent;
}
.rule--tight{max-inline-size:210px; margin-inline:auto}

/* ── Top bar ──────────────────────────────────────────────────────── */
.topbar{
  position:sticky; inset-block-start:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(9px);
  border-block-end:1px solid var(--line);
}
.topbar__in{
  max-inline-size:var(--maxw); margin-inline:auto; padding:11px var(--gutter);
  display:flex; align-items:center; gap:18px;
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:none}
.brand__mark{flex:none}
.brand b{
  font-family:var(--f-display); font-weight:600; font-size:17px;
  letter-spacing:.1em; text-transform:uppercase;
}
.brand span{
  font-family:var(--f-display); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
html[lang="dv"] .brand b,html[lang="dv"] .brand span{
  font-family:var(--f-thaana-display); letter-spacing:0; text-transform:none;
}

.navlinks{display:flex; gap:2px; margin-inline-start:auto; flex-wrap:wrap}
.navlinks a{
  font-family:var(--f-display); font-weight:600; font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  color:var(--ink-2); padding:7px 10px; border-radius:2px; white-space:nowrap;
  border-block-end:1px solid transparent;
}
.navlinks a:hover{color:var(--ox); border-block-end-color:var(--gold)}
.navlinks a[aria-current="true"],.navlinks a.is-here{color:var(--ox); border-block-end-color:var(--ox)}
html[lang="dv"] .navlinks a{font-family:var(--f-thaana-ui); letter-spacing:0; text-transform:none; font-size:13.5px}
@media (max-width:1080px){ .navlinks{display:none} }

.tools{display:flex; align-items:center; gap:8px; margin-inline-start:auto}
@media (max-width:1080px){ .tools{margin-inline-start:auto} }
.langsw{display:flex; border:1px solid var(--line-2); border-radius:2px; overflow:hidden}
.langsw a{
  font-family:var(--f-display); font-weight:600; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:6px 11px; color:var(--ink-2); background:transparent;
}
.langsw a.is-dv{font-family:var(--f-thaana-ui); letter-spacing:0; font-size:13px; padding-block:3px}
.langsw a[aria-current="true"]{background:var(--ox); color:#FFF8F0}
.iconbtn{
  display:grid; place-items:center; width:32px; height:32px; flex:none;
  border:1px solid var(--line-2); border-radius:2px; background:transparent;
  color:var(--ink-2); cursor:pointer;
}
.iconbtn:hover{border-color:var(--gold); color:var(--ox)}
.menubtn{display:none}
@media (max-width:1080px){ .menubtn{display:grid} }

.menu{border-block-start:1px solid var(--line); background:var(--surface)}
.menu__in{
  max-inline-size:var(--maxw); margin-inline:auto; padding:10px var(--gutter) 18px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2px;
}
.menu__in a{
  display:flex; align-items:baseline; gap:12px; padding:10px 4px; text-decoration:none;
  color:var(--ink); border-block-end:1px solid var(--line);
  font-family:var(--f-display); font-weight:600; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase;
}
.menu__in a em{font-style:normal; color:var(--gold); font-size:11px; letter-spacing:.1em}
html[lang="dv"] .menu__in a{font-family:var(--f-thaana-display); letter-spacing:0; text-transform:none}

.topbar__progress{height:1px; background:var(--ox); width:0}

@media (max-width:560px){
  .topbar__in{gap:10px; padding-inline:16px}
  .brand{min-inline-size:0}
  .brand b{
    font-size:14.5px; letter-spacing:.06em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .brand span{display:none}
  .langsw a{padding:6px 9px; font-size:11px}
  .tools{gap:6px}
}

.previewbar{
  background:var(--ox); color:#FFF4EC; padding:9px var(--gutter);
  font-size:13.5px; text-align:center;
}
.previewbar a{color:#FFF4EC}

/* ── Masthead ─────────────────────────────────────────────────────
   The cover page. Oxblood in both themes, centred, and carrying no
   photograph — the seal and the rules do the work a picture would. */
.mast{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--mast-bg); color:var(--mast-ink);
  padding-block:clamp(56px,9vw,104px);
  text-align:center;
}
.mast__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.92}
/* An ordinary photograph, chosen on the Backgrounds page, rather than a
   plate prepared for this masthead: held back and given a heavier veil so
   the centred wording is never sitting on somebody's face. */
.mast--photo .mast__bg{opacity:.42}
.mast--photo::after{
  background:
    radial-gradient(72% 58% at 50% 46%, rgba(26,8,11,.88), rgba(26,8,11,.34) 78%),
    linear-gradient(rgba(26,8,11,.5), rgba(26,8,11,.28) 40%, rgba(16,5,7,.78));
}
.mast::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(26,8,11,.72), transparent 72%),
    radial-gradient(120% 90% at 50% 0%, rgba(255,226,180,.10), transparent 62%),
    radial-gradient(100% 80% at 50% 120%, rgba(0,0,0,.6), transparent 60%);
}
.mast__in{max-inline-size:820px; margin-inline:auto; padding-inline:var(--gutter)}
.mast__seal{margin-inline:auto; margin-block-end:26px}

.mast__rule{
  display:flex; align-items:center; gap:16px; color:rgba(201,162,39,.55);
  margin-block:26px;
}
.mast__rule::before,.mast__rule::after{content:""; flex:1; height:1px; background:currentColor}
.mast__rule i{
  width:7px; height:7px; rotate:45deg; border:1px solid var(--mast-gold);
  flex:none; font-style:normal;
}

.mast__office{
  font-family:var(--f-display); font-weight:600; font-size:clamp(11px,1.5vw,13px);
  letter-spacing:var(--trk-wide); text-transform:uppercase; color:var(--mast-gold);
  margin:0 0 22px; text-indent:var(--trk-wide);
}
html[lang="dv"] .mast__office{font-family:var(--f-thaana-ui); letter-spacing:0; text-indent:0; font-size:15px}

.mast__name{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(38px,8.4vw,86px); line-height:1.02;
  letter-spacing:.06em; text-transform:uppercase; text-indent:.06em;
  margin:0; color:var(--mast-ink);
}
.mast__name em{
  display:block; font-style:normal; font-weight:600; letter-spacing:.09em; text-indent:.09em;
}
html[lang="dv"] .mast__name{
  font-family:var(--f-thaana-display); letter-spacing:0; text-indent:0;
  text-transform:none; line-height:1.5; font-size:clamp(32px,7vw,68px);
}

.mast__term{
  font-family:var(--f-display); font-weight:600; font-size:13px;
  letter-spacing:var(--trk); text-transform:uppercase; text-indent:var(--trk);
  color:var(--mast-dim); margin:0;
}
.mast__native{
  font-family:var(--f-thaana-display); font-size:19px; color:var(--mast-dim);
  margin:14px 0 0;
}
.mast__lede{
  max-inline-size:56ch; margin:0 auto; color:var(--mast-ink);
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(18px,2.3vw,23px); line-height:1.6; opacity:.94;
}
html[lang="dv"] .mast__lede{font-family:var(--f-thaana); font-style:normal; font-size:18px}
.mast__cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-block-start:34px}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--f-display); font-weight:600; font-size:12.5px;
  letter-spacing:.17em; text-transform:uppercase; text-decoration:none;
  padding:13px 24px; border:1px solid var(--line-2); border-radius:2px;
  color:var(--ink); background:transparent; transition:background .16s, color .16s, border-color .16s;
}
html[lang="dv"] .btn{font-family:var(--f-thaana-ui); letter-spacing:0; text-transform:none; font-size:14.5px}
.btn__go{transition:translate .16s}
.btn:hover .btn__go{translate:3px 0}
html[dir="rtl"] .btn:hover .btn__go{translate:-3px 0}

.btn--green,.btn--primary,.btn--teal{
  background:var(--ox); border-color:var(--ox); color:#FFF6EE;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.btn--green:hover,.btn--primary:hover,.btn--teal:hover{background:var(--ox-2); border-color:var(--ox-2); color:#FFF6EE}
.btn--gold{background:transparent; border-color:var(--gold); color:var(--gold)}
.btn--gold:hover{background:var(--gold-wash)}
.btn--ghost{border-color:currentColor; color:inherit; opacity:.9}
.btn--ghost:hover{opacity:1; background:rgba(255,255,255,.06)}
.btn--quiet{border-color:var(--line-2); color:var(--ink-2); background:var(--surface)}
.btn--quiet:hover{border-color:var(--gold); color:var(--ox)}
.btn--sm{padding:8px 15px; font-size:11.5px}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btnrow{display:flex; flex-wrap:wrap; gap:11px; align-items:center}

/* The masthead sits on oxblood, so its ghost button needs a light edge. */
.mast .btn--ghost{border-color:rgba(244,231,218,.45); color:var(--mast-ink)}
.mast .btn--green{background:var(--mast-gold); border-color:var(--mast-gold); color:#2A1B06}
.mast .btn--green:hover{background:#DCB749; border-color:#DCB749; color:#2A1B06}

/* ── The register strip ───────────────────────────────────────────
   Four facts under the masthead, set as a ruled strip rather than as
   cards: office, term, birth, present standing. */
.register{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--surface); border-block-end:1px solid var(--line);
}
/* The strip takes a whole photograph, the way the bands do, rather than a
   tiled texture — at this height a 520px tile repeats four times and a paper
   grain at 17% is invisible anyway. */
.register__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:-2; opacity:.34;
}
.register:has(.register__bg)::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(
    color-mix(in srgb, var(--surface) 86%, transparent),
    color-mix(in srgb, var(--surface) 62%, transparent) 45%,
    color-mix(in srgb, var(--surface) 88%, transparent));
}
.register:has(.register__bg) .register__cell{border-inline-start-color:var(--line-2)}
.register__in{
  max-inline-size:var(--maxw); margin-inline:auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.register__cell{
  padding:24px 26px; text-align:center;
  border-inline-start:1px solid var(--line);
}
.register__cell:first-child{border-inline-start:0}
.register__k{
  font-family:var(--f-display); font-weight:600; font-size:10.5px;
  letter-spacing:var(--trk); text-transform:uppercase; text-indent:var(--trk);
  color:var(--gold); margin-block-end:9px;
}
html[lang="dv"] .register__k{font-family:var(--f-thaana-ui); letter-spacing:0; text-indent:0; font-size:13px}
.register__v{
  font-family:var(--f-display); font-size:20px; font-weight:600; line-height:1.25; color:var(--ink);
}
.register__v span{
  display:block; margin-block-start:6px; font-family:var(--f-body); font-weight:400;
  font-size:12.5px; line-height:1.5; color:var(--ink-3); letter-spacing:0; text-transform:none;
}
@media (max-width:860px){
  .register__in{grid-template-columns:repeat(2,1fr)}
  .register__cell:nth-child(3){border-inline-start:0}
  .register__cell:nth-child(n+3){border-block-start:1px solid var(--line)}
}
@media (max-width:460px){
  .register__in{grid-template-columns:1fr}
  .register__cell{border-inline-start:0; border-block-start:1px solid var(--line)}
  .register__cell:first-child{border-block-start:0}
}

/* ── Sections ─────────────────────────────────────────────────────── */
.sec{position:relative; padding-block:clamp(56px,7.5vw,104px)}
.sec--alt{background:var(--surface)}
.sec+.sec,.sec--alt+.sec{border-block-start:1px solid var(--line)}

/* The texture the office chooses per section, laid under the content. */
.tex::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--tex);
  /* Set per section on the Backgrounds page: a photograph fills, a paper
     texture tiles. */
  background-size:var(--g-size, cover);
  background-repeat:var(--g-repeat, no-repeat);
  background-position:var(--g-pos, center);
  opacity:var(--tex-strength, var(--tex-op)); mix-blend-mode:multiply;
}
:root[data-theme="dark"] .tex::before{mix-blend-mode:screen}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tex::before{mix-blend-mode:screen} }
.tex > *{position:relative; z-index:1}

/* Centred heading block — the single strongest break from a left-aligned
   editorial page. */
.sec__head{text-align:center; max-inline-size:62ch; margin:0 auto clamp(38px,5vw,58px)}
.sec__head .eyebrow{margin-block-end:16px}
.sec__t{
  font-size:clamp(28px,4.4vw,46px); font-weight:400; line-height:1.14;
  margin:0; color:var(--ink);
}
.sec__lede{
  margin:18px auto 0; max-inline-size:58ch; color:var(--ink-2);
  font-size:16px; line-height:1.75;
}
.sec__head--single .sec__lede{display:none}

/* ── Preamble — the biography ─────────────────────────────────────── */
.bio{max-inline-size:var(--measure); margin-inline:auto}
.bio__body > p{font-size:17.5px; line-height:1.82}
/* An initial in the display face, the way a preamble opens. */
.bio__body > p:first-of-type::first-letter{
  float:inline-start; font-family:var(--f-display); font-weight:600;
  font-size:4.15em; line-height:.82; margin-inline-end:.09em; margin-block-start:.04em;
  color:var(--ox);
}
html[lang="dv"] .bio__body > p:first-of-type::first-letter{float:none; font-size:inherit; color:inherit; margin:0}
.bio__body strong{font-weight:600; color:var(--ink)}
.bio__figure{margin:40px auto 0; max-inline-size:330px}
.bio__figure img{width:100%; border:1px solid var(--line-2)}
.bio__figure figcaption{
  margin-block-start:10px; text-align:center; font-size:13px; color:var(--ink-3); font-style:italic;
}

/* The facts, set as a ruled table of contents rather than a list. */
.facts{
  list-style:none; margin:40px 0 0; padding:0;
  border-block-start:1px solid var(--line-2);
}
.facts li{
  display:grid; grid-template-columns:minmax(120px,26%) 1fr; gap:18px;
  padding-block:13px; border-block-end:1px solid var(--line);
  align-items:baseline;
}
.facts b{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:var(--trk); text-transform:uppercase; color:var(--gold);
}
html[lang="dv"] .facts b{font-family:var(--f-thaana-ui); letter-spacing:0; font-size:13.5px}
.facts span{font-size:15.5px; color:var(--ink-2)}
@media (max-width:620px){ .facts li{grid-template-columns:1fr; gap:3px} }

/* ── Offices held — a register, not a set of cards ────────────────── */
.filters{
  display:flex; flex-wrap:wrap; gap:0; justify-content:center;
  margin-block-end:34px; border-block:1px solid var(--line);
}
.chip{
  appearance:none; background:transparent; border:0; cursor:pointer;
  font-family:var(--f-display); font-weight:600; font-size:11.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
  padding:13px 18px; display:inline-flex; align-items:baseline; gap:8px;
  border-block-end:2px solid transparent; margin-block-end:-1px;
}
html[lang="dv"] .chip{font-family:var(--f-thaana-ui); letter-spacing:0; text-transform:none; font-size:14px}
.chip:hover{color:var(--ox)}
.chip[aria-pressed="true"]{color:var(--ox); border-block-end-color:var(--ox)}
.chip__n{font-family:var(--f-body); font-size:11px; color:var(--ink-3); letter-spacing:0}

.records{border-block-start:1px solid var(--line-2)}
.rec{
  display:grid; grid-template-columns:82px minmax(0,1fr) 150px;
  gap:clamp(16px,2.4vw,34px); align-items:start;
  padding-block:26px; border-block-end:1px solid var(--line);
}
.rec__yr{
  font-family:var(--f-display); font-size:20px; font-weight:600; color:var(--gold);
  letter-spacing:.04em; padding-block-start:2px;
}
.rec__t{
  font-family:var(--f-display); font-size:23px; font-weight:600; line-height:1.22;
  margin:0 0 7px; color:var(--ink);
}
.rec__d{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.72; max-inline-size:60ch}
.rec__meta{
  display:flex; flex-wrap:wrap; gap:4px 22px; margin-block-start:13px;
  padding-block-start:11px; border-block-start:1px solid var(--line);
}
.rec__meta span{
  font-family:var(--f-display); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.rec__meta b{
  font-family:var(--f-body); font-weight:400; font-size:13px;
  letter-spacing:0; text-transform:none; color:var(--ink-2);
}
/* The category, set as a word in the margin — no pill, no dot. */
.status{
  justify-self:end; text-align:end; display:block;
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:var(--trk); text-transform:uppercase; padding-block-start:6px;
}
html[lang="dv"] .status{font-family:var(--f-thaana-ui); letter-spacing:0; font-size:13.5px}
.status--done{color:var(--gold)}
.status--start{color:var(--ox)}
.status--carry{color:var(--green)}
@media (max-width:820px){
  .rec{grid-template-columns:62px minmax(0,1fr)}
  .rec .status{grid-column:2; justify-self:start; text-align:start; margin-block-start:12px; padding-block-start:0}
  .rec__yr{font-size:17px}
  .rec__t{font-size:20px}
}

/* ── The recitals — the removal and the court ─────────────────────
   The one event the rest of the record is read against, given its own
   ground and set as four numbered movements. */
.recitals{background:var(--mast-bg); color:var(--mast-ink); position:relative; isolation:isolate; overflow:hidden}
.recitals__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.9}
.recitals::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(80% 66% at 50% 44%, rgba(20,7,9,.62), transparent 74%),
    radial-gradient(90% 70% at 50% -10%, rgba(201,162,39,.13), transparent 60%);
}
.recitals__in{
  max-inline-size:var(--maxw); margin-inline:auto; padding:clamp(56px,7.5vw,100px) var(--gutter);
}
.recitals__head{text-align:center; max-inline-size:60ch; margin:0 auto clamp(40px,5vw,60px)}
.recitals__head .eyebrow{color:var(--mast-gold)}
.recitals__t{
  font-size:clamp(28px,4.4vw,46px); font-weight:400; margin:14px 0 0; color:var(--mast-ink);
}
.recitals__lede{margin:18px auto 0; max-inline-size:56ch; color:var(--mast-dim); font-size:15.5px}
.recitals__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0; border-block-start:1px solid rgba(201,162,39,.32);
}
.recital{
  padding:30px 26px; border-inline-start:1px solid rgba(201,162,39,.22);
  border-block-end:1px solid rgba(201,162,39,.22);
}
.recital:first-child{border-inline-start:0}
.recital__n{
  font-family:var(--f-display); font-size:12px; font-weight:600;
  letter-spacing:var(--trk); color:var(--mast-gold); margin-block-end:14px;
}
.recital__date{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mast-dim);
  margin-block-end:8px;
}
html[lang="dv"] .recital__date{font-family:var(--f-thaana-ui); letter-spacing:0; font-size:13.5px}
.recital__t{font-family:var(--f-display); font-size:22px; font-weight:600; margin:0 0 9px; color:var(--mast-ink)}
.recital__d{margin:0; font-size:14.5px; line-height:1.72; color:rgba(244,231,218,.82)}
@media (max-width:760px){ .recital{border-inline-start:0} }

/* ── Figures band ─────────────────────────────────────────────────── */
.band{position:relative; isolation:isolate; overflow:hidden; background:var(--surface-2); color:var(--ink)}
.band__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.35}
.band::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(var(--surface-2),transparent 40%,var(--surface-2))}
.band__in{padding-block:clamp(44px,6vw,72px)}
.band__k{
  text-align:center; font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:var(--trk); text-transform:uppercase; text-indent:var(--trk);
  color:var(--gold); margin-block-end:34px;
}
.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0}
.figs > div{padding:6px 24px; text-align:center; border-inline-start:1px solid var(--line-2)}
.figs > div:first-child{border-inline-start:0}
.fig__n{
  font-family:var(--f-display); font-weight:400; font-size:clamp(40px,5.6vw,60px);
  line-height:1; color:var(--ox); letter-spacing:.01em;
}
.fig__n small{
  display:block; margin-block-start:8px; font-size:11px; font-weight:600;
  letter-spacing:var(--trk); text-transform:uppercase; color:var(--gold);
}
.fig__d{margin:14px auto 0; max-inline-size:32ch; font-size:13.5px; line-height:1.68; color:var(--ink-2)}
@media (max-width:700px){ .figs > div{border-inline-start:0; border-block-start:1px solid var(--line-2); padding-block:22px} .figs > div:first-child{border-block-start:0} }

/* ── Articles — the positions ─────────────────────────────────────── */
.pillars{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:0; border-block-start:1px solid var(--line-2);
}
.pillar{
  padding:32px 30px; border-inline-start:1px solid var(--line); border-block-end:1px solid var(--line);
}
.pillar:nth-child(odd){border-inline-start:0}
@media (min-width:1000px){
  .pillars{grid-template-columns:repeat(3,1fr)}
  .pillar:nth-child(odd){border-inline-start:1px solid var(--line)}
  .pillar:nth-child(3n+1){border-inline-start:0}
}
.pillar__n{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:var(--trk); text-transform:uppercase; color:var(--gold);
  margin-block-end:14px;
}
html[lang="dv"] .pillar__n{font-family:var(--f-thaana-ui); letter-spacing:0; font-size:13.5px}
.pillar h3{font-size:23px; font-weight:600; margin:0 0 10px; line-height:1.22}
.pillar p{margin:0; color:var(--ink-2); font-size:15px; line-height:1.74}

/* ── Chronicle — after office ─────────────────────────────────────── */
.tl{list-style:none; margin:0 auto; padding:0; max-inline-size:72ch}
.tl li{
  padding-block:26px; border-block-end:1px solid var(--line);
  display:grid; grid-template-columns:168px minmax(0,1fr);
  column-gap:28px; row-gap:7px; align-items:baseline;
}
.tl__date{grid-column:1; grid-row:1 / span 2}
.tl__t{grid-column:2; grid-row:1}
.tl__d{grid-column:2; grid-row:2}
.tl li:first-child{border-block-start:1px solid var(--line-2)}
.tl__date{
  font-family:var(--f-display); font-weight:600; font-size:11.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gold);
}
html[lang="dv"] .tl__date{font-family:var(--f-thaana-ui); letter-spacing:0; font-size:14px}
.tl__t{font-family:var(--f-display); font-size:21px; font-weight:600; margin:0 0 7px; line-height:1.25}
.tl__d{margin:0; color:var(--ink-2); font-size:15px; line-height:1.74}
/* A marked entry gets the lozenge in the margin and oxblood on its title. */
.tl li[data-mark="key"] .tl__t{color:var(--ox)}
.tl li[data-mark="key"] .tl__date::before{
  content:""; display:inline-block; width:6px; height:6px; rotate:45deg;
  border:1px solid var(--ox); margin-inline-end:9px; vertical-align:.08em;
}
@media (max-width:720px){
  .tl li{grid-template-columns:1fr}
  .tl__date,.tl__t,.tl__d{grid-column:1}
  .tl__date{grid-row:1}
  .tl__t{grid-row:2}
  .tl__d{grid-row:3}
}

/* ── The present — ongoing work ───────────────────────────────────── */
.ongoing{max-inline-size:78ch; margin-inline:auto; border-block-start:1px solid var(--line-2)}
.ocard{
  padding-block:26px; border-block-end:1px solid var(--line);
  display:grid; grid-template-columns:132px minmax(0,1fr);
  column-gap:26px; row-gap:7px; align-items:baseline;
}
.ocard__tag{grid-column:1; grid-row:1 / span 2}
.ocard h3{grid-column:2; grid-row:1}
.ocard p{grid-column:2; grid-row:2}
.ocard__tag{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:var(--trk); text-transform:uppercase; color:var(--gold);
}
html[lang="dv"] .ocard__tag{font-family:var(--f-thaana-ui); letter-spacing:0; font-size:13.5px}
.ocard h3{font-family:var(--f-display); font-size:21px; font-weight:600; margin:0 0 7px}
.ocard p{margin:0; color:var(--ink-2); font-size:15px; line-height:1.74}
@media (max-width:660px){
  .ocard{grid-template-columns:1fr}
  .ocard__tag,.ocard h3,.ocard p{grid-column:1}
  .ocard__tag{grid-row:1}
  .ocard h3{grid-row:2}
  .ocard p{grid-row:3}
}

/* ── Statements ───────────────────────────────────────────────────── */
.stlist{border-block-start:1px solid var(--line-2); max-inline-size:84ch; margin-inline:auto}
.stitem{
  display:grid; grid-template-columns:186px minmax(0,1fr) auto; gap:26px; align-items:baseline;
  padding-block:24px; border-block-end:1px solid var(--line); text-decoration:none; color:inherit;
}
.stitem:hover{background:var(--gold-wash)}
.stitem__meta{display:flex; flex-direction:column; gap:5px}
.stitem__meta time{
  font-family:var(--f-display); font-weight:600; font-size:11.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gold);
}
.stitem__kind,.stitem__pin{
  font-family:var(--f-display); font-weight:600; font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
.stitem__t{font-family:var(--f-display); font-size:21px; font-weight:600; margin:0 0 6px}
.stitem__d{margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.7}
.stitem__go{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ox); white-space:nowrap;
}
@media (max-width:760px){ .stitem{grid-template-columns:1fr; gap:10px} }
.posts__more{text-align:center; margin-block-start:34px}

.posts{display:grid; gap:0; border-block-start:1px solid var(--line-2)}
.post{padding-block:20px; border-block-end:1px solid var(--line)}
.post__t{margin:0 0 9px; font-size:15.5px; line-height:1.7}
.post__foot{display:flex; gap:16px; align-items:baseline}
.post__date,.post__link{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
}
.post__date{color:var(--ink-3)}
.post__link{color:var(--ox); text-decoration:none}
.feed{display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:38px; align-items:start}
@media (max-width:880px){ .feed{grid-template-columns:1fr} }
.feed__main{min-inline-size:0}
.feed__side{display:grid; gap:18px}
.feed__box{border:1px solid var(--line); background:var(--surface); padding:24px}
.feed__state{text-align:center; display:grid; gap:14px; justify-items:center}
.feed__msg,.feed__fallback{margin:0; font-size:14px; color:var(--ink-2); max-inline-size:46ch}
.feed__card{border:1px solid var(--line); background:var(--surface); padding:24px}
.feed__k{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:var(--trk); text-transform:uppercase; color:var(--gold); margin-block-end:10px;
}
.feed__handle{font-family:var(--f-display); font-size:22px; font-weight:600; margin:0 0 8px}
.feed__note{font-size:14px; color:var(--ink-2)}
.feed iframe{width:100%; border:0}

/* ── The flag band ────────────────────────────────────────────────── */
.band--flag{background:var(--mast-bg); color:var(--mast-ink)}
.band--flag::after{background:radial-gradient(80% 70% at 50% 0%, rgba(201,162,39,.12), transparent 60%)}
.flagband{display:grid; grid-template-columns:230px minmax(0,1fr); gap:40px; align-items:center}
@media (max-width:700px){ .flagband{grid-template-columns:1fr; text-align:center; justify-items:center} }
.flagband__flag{width:100%; max-width:230px; border:1px solid rgba(201,162,39,.4); padding:7px}
.flagband__dv{font-family:var(--f-thaana-display); font-size:18px; color:var(--mast-dim); margin:0 0 6px}
.flagband__t{font-size:30px; font-weight:400; margin:0 0 10px; color:var(--mast-ink)}
.flagband__note{margin:0; color:var(--mast-dim); font-size:14.5px; max-inline-size:52ch}

/* ── Call to action band ──────────────────────────────────────────── */
.band--cta{background:var(--surface-2)}
.band--cta .band__bg{opacity:.26}
.band--cta::after{
  background:linear-gradient(90deg, var(--surface-2) 12%, color-mix(in srgb, var(--surface-2) 72%, transparent) 62%, var(--surface-2));
}
.band--cta .band__in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center}
.band--cta h2{font-size:clamp(22px,3vw,31px); font-weight:400; margin:0 0 8px}
.band--cta p{margin:0; color:var(--ink-2); font-size:15px; max-inline-size:60ch}
@media (max-width:760px){ .band--cta .band__in{grid-template-columns:1fr; text-align:center; justify-items:center} }

/* ── Gallery ──────────────────────────────────────────────────────── */
.gal{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  grid-auto-rows:clamp(210px,21vw,290px); gap:18px;
}
.gal figure{
  margin:0; border:1px solid var(--line-2); background:var(--surface);
  display:flex; flex-direction:column; overflow:hidden;
}
.gal figure.g-wide{grid-column:span 2}
@media (max-width:620px){ .gal figure.g-wide{grid-column:span 1} }
.gal img{flex:1 1 0; min-height:0; width:100%; object-fit:cover; object-position:var(--pos,center)}
.gal figcaption{
  flex:none; padding:10px 13px; font-size:12.5px; line-height:1.45;
  color:var(--ink-3); font-style:italic;
}
.slot{
  display:grid; place-items:center; gap:6px; color:var(--ink-3);
  border:1px dashed var(--line-2); background:transparent; font-size:12px;
}
.slot__plus{font-size:22px}

/* ── The index — the archive ──────────────────────────────────────── */
.arch__bar{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:center;
  margin-block-end:30px;
}
.search{
  display:flex; align-items:center; gap:9px; flex:1 1 280px; max-inline-size:400px;
  border-block-end:1px solid var(--line-2); padding:8px 2px; color:var(--ink-3);
}
.search input{
  flex:1; border:0; background:transparent; font-family:var(--f-body);
  font-size:15px; color:var(--ink); padding:0;
}
html[lang="dv"] .search input{font-family:var(--f-thaana); line-height:1.85}
.search input:focus{outline:0}
.search:focus-within{border-block-end-color:var(--ox)}

.arch{border-block-start:1px solid var(--line-2); max-inline-size:96ch; margin-inline:auto}
.arow{
  display:grid; grid-template-columns:66px 108px minmax(0,1fr) auto; gap:20px;
  align-items:baseline; padding-block:14px; border-block-end:1px solid var(--line);
  text-decoration:none; color:inherit;
}
.arow:hover{background:var(--gold-wash)}
.arow__yr{font-family:var(--f-display); font-size:16px; font-weight:600; color:var(--gold)}
.arow__kind{
  font-family:var(--f-display); font-weight:600; font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
}
.arow__t{font-size:15px; line-height:1.6; color:var(--ink)}
.arow__src{
  font-family:var(--f-display); font-weight:600; font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ox); white-space:nowrap;
}
@media (max-width:820px){
  .arow{grid-template-columns:56px minmax(0,1fr); gap:6px 16px}
  .arow__kind{grid-column:2}
  .arow__t{grid-column:2}
  .arow__src{grid-column:2; justify-self:start}
}
.arch__empty{text-align:center; color:var(--ink-3); padding-block:40px; font-style:italic}

/* ── Correspondence ───────────────────────────────────────────────── */
.contact{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:30px}
.panel{border:1px solid var(--line-2); background:var(--surface); padding:clamp(22px,3vw,34px)}
.panel__k{
  font-family:var(--f-display); font-weight:600; font-size:10.5px;
  letter-spacing:var(--trk); text-transform:uppercase; color:var(--gold); margin-block-end:12px;
}
.panel > h3{font-size:25px; font-weight:600; margin:0 0 8px}
.panel > p{margin:0 0 6px; font-size:14.5px; color:var(--ink-2)}
.formreq,.formnote{
  margin:14px 0 20px; padding-block:11px; font-size:12.5px; font-style:italic; color:var(--ink-3);
  border-block:1px solid var(--line);
}
.formnote{border-block-end:0; margin-block-end:0}
.row2{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 16px}
.field{display:grid; gap:6px; margin-block-end:16px}
.field label{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:var(--trk); text-transform:uppercase; color:var(--ink-3);
}
html[lang="dv"] .field label{font-family:var(--f-thaana-ui); letter-spacing:0; font-size:13.5px}
.field .opt{letter-spacing:0; text-transform:none; font-style:italic; color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2); border-radius:2px;
  padding:11px 13px; width:100%;
}
.field textarea{min-height:130px; resize:vertical; line-height:1.66}
/* What is typed should look like the rest of the page: the chosen Thaana
   face, and room for the marks above and below the letters. The captcha
   answer and the fields that hold Latin keep the Latin face. */
html[lang="dv"] .field input,
html[lang="dv"] .field select,
html[lang="dv"] .field textarea{font-family:var(--f-thaana); line-height:1.85}
html[lang="dv"] .field input[type="email"],
html[lang="dv"] .field input[type="tel"],
html[lang="dv"] .field input[type="date"],
html[lang="dv"] .cap .field input{font-family:var(--f-body); line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--ox)}
.result{margin-block-start:16px; padding:13px 15px; border:1px solid var(--line-2); font-size:14px}
.result[data-kind="ok"]{border-color:var(--green); background:var(--green-wash)}
.result[data-kind="error"]{border-color:var(--danger); background:var(--danger-wash)}
.cap__row{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center}
.cap__img{border:1px solid var(--line-2); background:#fff}
.cap__q{font-size:14px; color:var(--ink-2)}
.cap__alt{
  justify-self:start; background:transparent; border:0; cursor:pointer; color:var(--ox);
  padding:0; margin-block-start:10px; text-decoration:underline; text-underline-offset:.24em;
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
}
/* The control itself: a button, so the browser resets the letterspacing
   and the capitals the paragraph sets. Take them back, and the underline,
   which does not cross into an inline-block on its own. */
.cap__alt button{
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:.24em;
}
.cap__alt button:hover{color:var(--ox-2)}
html[lang="dv"] .cap__alt{font-family:var(--f-thaana-ui); letter-spacing:0; text-transform:none; font-size:13.5px}
.cap__alt:hover{color:var(--ox-2)}
/* The refresh control the script inserts beside the picture. */
.cap__btn{
  display:grid; place-items:center; width:36px; height:36px; flex:none; cursor:pointer;
  border:1px solid var(--line-2); border-radius:2px; background:var(--surface);
  color:var(--ink-2); font-size:16px; line-height:1;
}
.cap__btn:hover{border-color:var(--gold); color:var(--ox)}
.privacy{margin-block-start:14px; font-size:12.5px; color:var(--ink-3); line-height:1.6}

/* ── The Office page ──────────────────────────────────────────────── */
.office__intro{
  max-inline-size:60ch; margin:0 auto 42px; text-align:center;
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(19px,2.3vw,24px); line-height:1.55; color:var(--ink-2);
}
html[lang="dv"] .office__intro{font-family:var(--f-thaana); font-style:normal}
.office__note{
  max-inline-size:62ch; margin:30px auto 0; padding-block-start:18px;
  border-block-start:1px solid var(--line); text-align:center;
  font-size:13px; line-height:1.68; color:var(--ink-3); font-style:italic;
}

/* ── An article — one statement ───────────────────────────────────── */
.article .wrap{max-inline-size:78ch}
.article__back{margin-block-end:26px}
.article__back a{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none; color:var(--ink-3);
}
.article__back a:hover{color:var(--ox)}
.article__head{text-align:center; padding-block-end:30px; border-block-end:1px solid var(--line-2); margin-block-end:34px}
.article__meta{display:flex; gap:16px; justify-content:center; margin-block-end:16px}
.article__kind,.article__meta time{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:var(--trk); text-transform:uppercase; color:var(--gold);
}
.article__t{font-size:clamp(28px,4.2vw,44px); font-weight:400; margin:0}
.article__lede{
  margin:18px auto 0; max-inline-size:54ch; font-family:var(--f-display);
  font-style:italic; font-size:21px; line-height:1.55; color:var(--ink-2);
}
.article__body p{font-size:17.5px; line-height:1.82}
.article__more{margin-block-start:48px; padding-block-start:26px; border-block-start:1px solid var(--line-2)}

/* ── Footer ───────────────────────────────────────────────────────── */
.foot{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--mast-bg); color:var(--mast-ink);
  padding-block:clamp(44px,6vw,72px);
}
.foot::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.16;
  background-image:var(--tex-foot);
  background-size:var(--g-size, cover);
  background-repeat:var(--g-repeat, no-repeat);
  background-position:var(--g-pos, center);
}
/* A veil over whatever is behind the footer. The ground was tuned for a
   tiled paper texture; a photograph filling the whole width is far busier,
   and both the note and the emblem's relief disappear into it without this. */
.foot::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(42,14,18,.80), rgba(42,14,18,.34) 46%, rgba(42,14,18,.72)),
    linear-gradient(rgba(42,14,18,.34), rgba(42,14,18,.52));
}
.foot__top{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:44px; align-items:start}
/* The state emblem, struck as a relief, sits opposite the office's own note. */
.foot__top--emblem{grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(30px,5vw,70px)}
.foot__emblem{
  margin:0; justify-self:end; position:relative;
  perspective:1100px; perspective-origin:50% 45%;
}
/* The glow it sits in stays still while the plate turns. */
.foot__emblem::before{
  content:""; position:absolute; inset:-14% -22%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(201,162,39,.16), transparent 72%);
}
.medal{
  inline-size:clamp(118px,14vw,186px);
  transform-style:preserve-3d;
  animation:medal-turn 24s linear infinite;
  will-change:transform;
}
.medal__face{
  width:100%; height:auto; display:block;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
/* The reverse sits on the same plate, half a turn round and struck darker. */
.medal__face--back{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  transform:rotateY(180deg);
  filter:brightness(.66) contrast(.94) saturate(.85);
}
@keyframes medal-turn{ from{ transform:rotateY(0deg) } to{ transform:rotateY(360deg) } }

/* The light catching the metal as the face comes round to us. */
.medal__face{animation:medal-sheen 24s linear infinite}
.medal__face--back{animation-delay:-12s}
@keyframes medal-sheen{
  0%   { filter:brightness(1)    contrast(1) }
  22%  { filter:brightness(1.14) contrast(1.04) }
  50%  { filter:brightness(.88)  contrast(.98) }
  78%  { filter:brightness(1.14) contrast(1.04) }
  100% { filter:brightness(1)    contrast(1) }
}
.medal__face--back{animation-name:medal-sheen-back}
@keyframes medal-sheen-back{
  0%   { filter:brightness(.66) contrast(.94) saturate(.85) }
  22%  { filter:brightness(.78) contrast(.96) saturate(.85) }
  50%  { filter:brightness(.60) contrast(.92) saturate(.85) }
  78%  { filter:brightness(.78) contrast(.96) saturate(.85) }
  100% { filter:brightness(.66) contrast(.94) saturate(.85) }
}

/* Anyone who has asked their system for less movement gets it still. */
@media (prefers-reduced-motion: reduce){
  .medal, .medal__face{animation:none}
  .medal{transform:none}
}
@media (max-width:760px){
  .foot__top--emblem{grid-template-columns:1fr; align-items:start}
  .foot__emblem{justify-self:start}
  .medal{inline-size:130px}
}
@media (max-width:760px){ .foot__top{grid-template-columns:1fr; gap:30px} }
.foot__logo{margin-block-end:16px}
.foot__mark{
  font-family:var(--f-display); font-weight:600; font-size:15px;
  letter-spacing:.18em; text-transform:uppercase; margin:0 0 10px; color:var(--mast-ink);
}
.foot__native{font-family:var(--f-thaana-display); font-size:18px; color:var(--mast-dim); margin-block-end:10px}
.foot__top p{margin:0; font-size:14px; line-height:1.72; color:var(--mast-dim); max-inline-size:56ch}
.foot h4{
  font-family:var(--f-display); font-weight:600; font-size:11px;
  letter-spacing:var(--trk); text-transform:uppercase; color:var(--mast-gold); margin:0 0 14px;
}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot ul a{color:var(--mast-ink); font-size:14px; text-decoration:none; border-block-end:1px solid rgba(201,162,39,.3)}
.foot ul a:hover{color:var(--mast-gold)}
.foot__bar{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  margin-block-start:40px; padding-block-start:20px;
  border-block-start:1px solid rgba(201,162,39,.28);
  font-family:var(--f-display); font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mast-dim);
}
.foot__bar a{color:var(--mast-dim); text-decoration:none}
.foot__bar a:hover{color:var(--mast-gold)}
.foot__swatch{display:inline-flex; gap:5px; margin-inline-start:auto}
.foot__swatch i{width:11px; height:11px; rotate:45deg; display:block}

/* ── Holding page ─────────────────────────────────────────────────
   Shown until the office publishes: the flag, the name, and nothing
   else. Its own ground, because there is no masthead above it. */
body.holding{background:var(--mast-bg); color:var(--mast-ink)}
.hold{min-height:100svh; display:grid; place-items:center; text-align:center; padding:var(--gutter)}
.hold__in{max-inline-size:48ch; display:grid; justify-items:center}
.hold__flag{inline-size:min(240px,62vw); border:1px solid rgba(201,162,39,.4); padding:7px}
.hold__canvas,.hold__svg{inline-size:100%; display:block}
.hold__dv{font-family:var(--f-thaana-display); font-size:19px; color:var(--mast-dim); margin:22px 0 0}
.hold__t{
  font-family:var(--f-display); font-size:clamp(26px,5vw,44px); font-weight:400;
  letter-spacing:.06em; text-transform:uppercase; text-indent:.06em;
  margin:28px 0 0; color:var(--mast-ink);
}
html[lang="dv"] .hold__t{font-family:var(--f-thaana-display); letter-spacing:0; text-indent:0; text-transform:none}
.hold__role{
  font-family:var(--f-display); font-weight:600; font-size:11.5px;
  letter-spacing:var(--trk); text-transform:uppercase; text-indent:var(--trk);
  color:var(--mast-gold); margin:18px 0 0;
}
html[lang="dv"] .hold__role{font-family:var(--f-thaana-ui); letter-spacing:0; text-indent:0; font-size:14px}
.hold__note{margin:24px 0 0; color:var(--mast-dim); font-size:15.5px; font-style:italic}
.hold__foot{
  display:flex; gap:22px; margin-block-start:44px; padding-block-start:20px;
  border-block-start:1px solid rgba(201,162,39,.28);
}
.hold__foot a{
  font-family:var(--f-display); font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--mast-dim);
}
.hold__foot a.is-dv{font-family:var(--f-thaana-ui); letter-spacing:0; text-transform:none; font-size:13px}
.hold__foot a[aria-current="true"],.hold__foot a:hover{color:var(--mast-gold)}

/* ── Odds and ends ────────────────────────────────────────────────── */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
body.is-preview{border-block-start:2px solid var(--ox)}

/* ── Right to left ────────────────────────────────────────────────── */
html[dir="rtl"] .bio__body > p:first-of-type::first-letter{float:none}
html[dir="rtl"] .status{justify-self:start; text-align:start}

/* ── Print ────────────────────────────────────────────────────────── */
@media print{
  .topbar,.menu,.mast__cta,.band--cta,.forms,.previewbar{display:none}
  body{background:#fff; color:#000; font-size:11pt}
  .mast{background:#fff; color:#000; padding-block:0}
  .mast__name,.mast__lede{color:#000}
  .sec{padding-block:18pt; break-inside:avoid}
}