@font-face{font-family:Tajawal;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/tajawal-latin-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:Tajawal;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/tajawal-latin-500.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:Tajawal;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/tajawal-latin-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:Tajawal;font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/tajawal-arabic-400.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/tajawal-arabic-500.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/tajawal-arabic-700.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --bg:#fff;--panel:#f4f5f7;--line:#e3e5e9;--txt:#14171c;--dim:#666e79;
  --red:#e2213f;--blue:#0078d8;--green:#009030;
  --ink:#0e1116;                       /* the hero ground */
  --mark:var(--red);
  --shell:1400px;
  --nav:1300px;                        /* npc.bh's container width, matched */
  --navh:120px;                        /* and its bar height */
  --pad:clamp(1rem,4vw,2.5rem);
  --font:Tajawal,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:400 15px/1.65 var(--font);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2{letter-spacing:-.02em;font-weight:700}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

/* ---- main site nav ---------------------------------------------------- */
/* npc.bh's header, rebuilt from its computed values rather than its markup:
   Tajawal 16/20 padded 13px 20px in #2b2b2b, a 3px #3f444b underline that
   fades in over .3s, dropdowns at 13px on white with a #3f444b hover, a
   1300px container and a 120px bar. Elementor draws it with three plugins,
   SmartMenus and a scroll listener; none of that is needed to get the same
   picture out the other side.

   Two deliberate differences. It is not position:fixed — a bar that follows
   you down a gallery is 120px of photograph you never get back — the same
   decision the hero overlay already recorded. And the dropdown carries a
   shadow npc.bh has no use for: theirs opens over white pages, this one can
   open over a hero photograph, where an unbordered white panel has no edge. */
.mn{position:relative;z-index:6;background:linear-gradient(#ffffffcf 43%,#fff0 100%)}
/* The Agitos rule: the committee's three colours as a 3px signature. It sat
   under the row below until that row went; it is the brand mark, not the
   row's decoration, so it moved up rather than out. */
.mn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--red) 0 33.33%,var(--blue) 0 66.66%,var(--green) 0)}
.mn.over::after{display:none}
.mn-in{max-width:var(--nav);margin:0 auto;padding:0 var(--pad);
  min-height:var(--navh);display:flex;align-items:center;gap:1rem}
.mn-lg{flex:none;display:block}
.mn-lg .lk{height:100px;width:auto;display:block}
.mn-nav{flex:1 1 auto;display:flex;justify-content:center}
/* The row is the top level only. Left as a descendant selector this also
   caught .sub, and a dropdown laid out in a row runs off the side of the
   screen instead of down the page. */
.mn-nav ul{list-style:none;margin:0;padding:0}
.mn-nav>ul{display:flex}
.sub{display:block}
.mn-nav li{position:relative}
.mn-nav a,.mn-nav span{display:block;padding:13px 20px;font-size:16px;line-height:20px;
  color:#2b2b2b;position:relative;cursor:pointer;white-space:nowrap}
/* The underline pointer, e--pointer-underline with e--animation-fade:
   full width from the start, opacity is the only thing that moves. */
.mn-nav>ul>li>a::after,.mn-nav>ul>li>span::after{content:"";position:absolute;
  left:0;bottom:0;width:100%;height:3px;background:#3f444b;opacity:0;
  transition:opacity .3s cubic-bezier(.58,.3,.005,1)}
.mn-nav>ul>li>a:hover::after,.mn-nav>ul>li>span:hover::after,
.mn-nav>ul>li>a:focus::after,.mn-nav>ul>li:focus-within>a::after,
.mn-nav>ul>li:focus-within>span::after,.mn-nav>ul>li>a.here::after{opacity:1}
/* Drawn, not a glyph. Font Awesome for one caret is 70 KB on a page that is
   otherwise photographs. */
.ca{display:inline-block;margin-inline-start:.45em;vertical-align:.14em;
  border:4px solid #0000;border-top:5px solid currentColor;border-bottom:0}
.sub{position:absolute;top:100%;left:0;min-width:250px;background:#fff;
  box-shadow:0 12px 34px -14px #0e111673;border:1px solid var(--line);
  opacity:0;visibility:hidden;transition:opacity .18s;z-index:3}
.mn-nav li.has:hover>.sub,.mn-nav li.has:focus-within>.sub{opacity:1;visibility:visible}
.sub a,.sub span{font-size:13px;color:#33373d;
  border-inline-start:8px solid #0000;transition:background .15s,color .15s}
.sub a:hover,.sub span:hover,.sub a:focus{background:#3f444b;color:#fff}
.sub .ca{transform:rotate(-90deg)}
.sub .sub{top:0;left:100%}
/* The burger. The checkbox is off-screen rather than hidden so it keeps its
   place in the tab order — this panel opens with the keyboard and no script. */
.mn-cb{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.mn-bg{display:none;margin-inline-start:auto;flex:none;cursor:pointer;
  padding:5.5px 7px;background:#dddddde3;border-radius:3px}
.mn-bg i{display:block;width:22px;height:2px;background:#33373d;border-radius:2px}
.mn-bg i+i{margin-top:5px}
.mn-cb:focus-visible+.mn-bg{outline:2px solid var(--blue);outline-offset:3px}
/* Over the hero photograph: the same bar, on the dark artwork. Absolute so it
   scrolls away with the picture, with the breadcrumb row stacked beneath it. */
.mn.over{position:absolute;left:0;right:0;top:0;background:#0000}
.mn.over::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#0e1116a6 0,#0e111600 100%)}
.mn.over .lkc{display:none}
.mn.over .lkw{display:block}
.mn.over>.mn-in>.mn-nav>ul>li>a,.mn.over>.mn-in>.mn-nav>ul>li>span{color:#fff}
.mn.over>.mn-in>.mn-nav>ul>li>a::after,
.mn.over>.mn-in>.mn-nav>ul>li>span::after{background:#fff}
.mn.over .mn-bg{background:#ffffff2e}
.mn.over .mn-bg i{background:#fff}
@media (max-width:1024px){
  :root{--navh:84px}
  .mn-lg .lk{height:64px}
  .mn-bg{display:block}
  .mn-nav{position:absolute;top:100%;left:0;right:0;display:none;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 18px 40px -22px #0e111673;
    max-height:calc(100svh - var(--navh));overflow:auto}
  .mn-cb:checked~.mn-nav{display:block}
  /* Everything is expanded and indented: a submenu that needs a second tap to
     open is a submenu half of a phone never finds. */
  .mn-nav a,.mn-nav span{color:#2b2b2b;white-space:normal}
  .mn-nav>ul>li>a::after,.mn-nav>ul>li>span::after{display:none}
  .sub{position:static;opacity:1;visibility:visible;min-width:0;
    border:0;box-shadow:none;background:#0000}
  .sub a,.sub span{border-inline-start:0;padding-inline-start:40px}
  .sub .sub a,.sub .sub span{padding-inline-start:60px}
  .sub .ca{display:none}
  .mn-nav li+li{border-top:1px solid var(--line)}
  .mn.over .mn-nav a,.mn.over .mn-nav span{color:#2b2b2b}
}

/* ---- header ---------------------------------------------------------- */
.lkw{display:none}

/* ---- hero --------------------------------------------------------------
   The front door is one photograph at the size of the window. Everything the
   old card grid did well — tidy, uniform, safe — is exactly what made 3,907
   photographs read as a directory listing, so the type sits *on* the frame
   and the gradient is what keeps it legible over a cover nobody art-directed. */
.hero{position:relative;isolation:isolate;background:var(--ink);color:#fff;overflow:hidden;
      min-height:min(100svh,880px);display:flex;align-items:flex-end}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 32%;z-index:-2;opacity:.94;
  animation:rise 1.1s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{transform:scale(1.07)}to{transform:scale(1)}}
/* Dark at the foot for the title and open through the middle, so the
   photograph is actually visible rather than tinted end to end. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#0e1116a6 0,#0e11161a 22%,#0e11161a 46%,#0e1116a6 76%,#0e1116f7 100%)}
.hin{width:100%;max-width:var(--shell);margin:0 auto;
     padding:clamp(3rem,10vw,7rem) var(--pad) clamp(3.5rem,8vw,5.5rem)}
.eyebrow{margin:0 0 .65rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:2.25rem;height:3px;background:var(--red)}
.hero h1{margin:0;font-size:clamp(2.3rem,7vw,5rem);line-height:1.02;max-width:16ch;
  letter-spacing:-.035em;text-wrap:balance;text-shadow:0 2px 40px #0e1116a6}
.hmeta{margin:.9rem 0 0;color:#e7e9ec;font-size:clamp(.95rem,1.3vw,1.05rem)}
.cta{display:inline-flex;align-items:center;margin-top:1.6rem;padding:.85rem 1.6rem;
  background:var(--red);color:#fff;font-weight:700;border-radius:3px;font-size:.95rem;
  transition:transform .15s,background .15s,box-shadow .15s}
.cta:hover{background:#c4142f;transform:translateY(-1px);box-shadow:0 10px 26px -12px #e2213fcc}
.cta span{transition:translate .2s cubic-bezier(.2,.7,.3,1)}
.cta:hover span{translate:4px 0}
.cue{transition:opacity .4s}
/* A hairline that breathes, rather than a bouncing chevron. */
.cue{position:absolute;left:50%;bottom:1.15rem;width:1px;height:2.5rem;z-index:1;
  background:linear-gradient(#fff0,#fffc);transform:translateX(-50%);
  animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.12;transform:translateX(-50%) scaleY(.45)}
  50%{opacity:.85;transform:translateX(-50%) scaleY(1)}}

/* No published events yet. The supplied lockup has a black wordmark, so this
   state has to stay light — it is built as a deliberate brand panel rather
   than a grey box, because it is the first thing a visitor from npc.bh sees
   until the media team publishes an event. */
.hero.bare{min-height:auto;color:var(--txt);
  background:radial-gradient(120% 140% at 12% 0,#fff 0,#f4f5f7 55%,#eceef2 100%)}
.hero.bare::before{display:none}
.hero.bare .hin{display:flex;gap:clamp(1.5rem,5vw,3.5rem);align-items:center;flex-wrap:wrap;
  padding-block:clamp(2.5rem,6vw,4.5rem)}
.hero.bare .hlock{height:clamp(120px,18vw,190px);width:auto;flex:none}
.hero.bare h1{font-size:clamp(1.5rem,3.6vw,2.4rem);text-shadow:none;max-width:18ch}
.hero.bare .eyebrow{color:var(--dim)}
.hero.bare .hmeta{color:var(--dim);max-width:46ch}

/* ---- event mosaic ------------------------------------------------------
   Full-width rows gave every event the same shape and cropped a 3:2 frame to
   roughly 3:1 to do it — heads out of the top of the picture on nearly every
   one. A mosaic keeps the photographs closer to the shape they were shot in,
   puts the archive on one screen instead of nine, and the size difference
   between tiles carries the hierarchy the rows were trying to carry with
   height alone. Placement comes from the generator; this only styles it. */
.archintro{border-top:1px solid var(--line)}
.ain{max-width:var(--shell);margin:0 auto;
  padding:clamp(2.5rem,6vw,4rem) var(--pad) clamp(1.1rem,2.5vw,1.6rem);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ain h2{margin:0;font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:-.025em}
.ain .meta{margin:0}
.mosaic{max-width:var(--shell);margin:0 auto;padding:0 var(--pad) clamp(2.5rem,6vw,4rem)}
.mos{display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(140px,16.5vw,240px);gap:clamp(.5rem,1vw,.9rem)}
.tile{position:relative;isolation:isolate;overflow:hidden;border-radius:10px;
  background:var(--ink);color:#fff;display:flex;align-items:flex-end;
  transition:box-shadow .25s}
.tile:hover{box-shadow:0 18px 40px -20px #14171c66}
.tile img,.tile .noimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 32%;z-index:-2;
  transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .3s}
.tile:hover img{transform:scale(1.045)}
/* The scrim carries the title and nothing else — dimming the whole frame is
   what made the previous design read as a run of brown slabs. */
.tile::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#0e111600 42%,#0e11168c 72%,#0e1116ed 100%)}
.tin{padding:clamp(.85rem,1.4vw,1.3rem)}
.evt{display:block;font-weight:700;letter-spacing:-.02em;line-height:1.14;
  font-size:1.02rem;text-wrap:balance;text-shadow:0 1px 16px #0e1116a6}
.tile.big .evt{font-size:clamp(1.25rem,2.3vw,1.95rem);letter-spacing:-.03em;line-height:1.06;
  max-width:20ch}
.evm{display:block;margin-top:.3rem;color:#dfe3e8;font-size:.8rem}
.tile.big .evm{margin-top:.45rem;font-size:.88rem}

/* ---- body ------------------------------------------------------------ */
main{max-width:var(--shell);margin:0 auto;padding:clamp(1.75rem,4vw,3rem) var(--pad) 4rem}
h1{font-size:1.6rem;margin:0 0 .3rem}
.lead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:0 0 1.1rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.lead h2{margin:0;font-size:1.1rem}
.lead .meta{margin:0}
.meta{color:var(--dim);font-size:.88rem;margin:0 0 1.25rem}
.empty{color:var(--dim);background:var(--panel);border-radius:6px;padding:2.5rem;text-align:center}
.sections{display:flex;gap:.45rem;flex-wrap:wrap;margin:0 0 1.25rem}
.sections a{border:1px solid var(--line);border-radius:99px;padding:.32rem .85rem;
  font-size:.82rem;color:var(--dim);font-weight:500;transition:.15s}
.sections a:hover{border-color:var(--red);color:var(--txt);background:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem}
.ph{display:block;background:var(--panel);border-radius:4px;overflow:hidden;line-height:0}
.ph img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;
        transition:opacity .15s,transform .3s;background:var(--panel)}
.ph:hover img{opacity:.9;transform:scale(1.02)}

/* ---- footer ----------------------------------------------------------- */
/* npc.bh's footer on its own values: white ground, a 1300px container, three
   things across the top and two along the bottom. Not sticky — see the note
   on the markup. */
.foot{background:#fff;border-top:1px solid var(--line);
  padding:clamp(2rem,5vw,3rem) var(--pad) clamp(1.25rem,3vw,2rem)}
.ft-in{max-width:var(--nav);margin-inline:auto}
.ft-top{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap}
.ft-lg{flex:none}
.ft-lg img{height:160px;width:auto;display:block}
/* The graphic that explains the emblem. npc.bh drops it on a phone: it is five
   captioned panels of 10px type, unreadable at that width, and it is the one
   thing here nobody came for. */
.ft-story{flex:1 1 20rem;min-width:0}
.ft-story img{width:100%;max-width:407px;height:auto;display:block}
.ft-social{flex:1 1 18rem;min-width:0}
.ft-find{margin:0 0 .75rem;font-size:clamp(25px,3.4vw,43px);font-weight:500;
  line-height:1.2;letter-spacing:-.01em;color:var(--txt)}
/* Five words on one keyframe, stacked in a fixed box so the line does not
   jump as they swap. --i staggers each by a fifth of the cycle. */
.rot{position:relative;display:inline-grid;vertical-align:bottom;color:var(--dim)}
.rot>span{grid-area:1/1;opacity:0;white-space:nowrap;
  animation:rot 12.5s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:calc(var(--i) * 2.5s)}
@keyframes rot{0%,2%{opacity:0;transform:translateY(.25em)}
  6%,18%{opacity:1;transform:none}
  22%,100%{opacity:0;transform:translateY(-.25em)}}
.ft-icons{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
/* Each brand's own colour, which is npc.bh's treatment. The mark is inline
   SVG rather than an icon font: seven glyphs are not worth 70 KB, and a font
   that has not arrived renders as nothing. */
.si{width:50px;height:50px;border-radius:50%;background:var(--bg);color:#fff;
  display:grid;place-items:center;transition:opacity .15s,transform .15s}
.si svg{width:25px;height:25px;fill:currentColor;display:block}
.si:hover{opacity:.9;transform:translateY(-2px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-top:clamp(1.5rem,4vw,2.5rem);
  padding-top:clamp(1rem,2.5vw,1.5rem);border-top:1px solid var(--line)}
.ft-bot p{margin:0;font-size:.88rem;color:var(--dim)}
/* Three slots, and the middle one has to sit on the page's centre line — not
   on whatever happens to be left between the two beside it. space-between
   alone centres nothing: it would put Digital Services wherever the © and the
   staff link stopped, which moves with the year and with the org name. The
   outer two sharing the leftover space equally is what makes the centre real.
   (No backticks in here. This string is a template literal.) */
.ft-bot>p:first-child{flex:1 1 0}
.ft-bot>p:last-child{flex:1 1 0;text-align:right}
.ft-ds{color:#c36;font-weight:500}
.ft-ds:hover{color:var(--red)}
/* The way in for the people who run this, and nobody else's business. Quiet
   enough that it does not read as a call to action, findable enough that an
   editor on a borrowed laptop does not have to be told the URL. */
.staff{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.staff:hover{color:var(--red)}
#sentinel{height:4rem}
.loading{color:var(--dim);font-size:.85rem;text-align:center;padding:1rem}
/* The path back up. In the page, above the title it belongs to, rather than
   as a second bar of chrome across the top. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  margin:0 0 .5rem;font-size:.85rem;color:var(--dim);min-width:0}
.crumbs a{border-bottom:1px solid #0000;transition:color .15s,border-color .15s}
.crumbs a:hover{color:var(--red);border-bottom-color:var(--red)}
.crumbs .sep{opacity:.45}
.crumbs [aria-current=page]{color:var(--txt);font-weight:500}
@media (max-width:34rem){
  .ft-story{display:none}
  .ft-lg img{height:120px}
  .si{width:30px;height:30px}
  .si svg{width:15px;height:15px}
  /* Stacked, so there is no centre to sit on: the three lines go back to
     reading left to right down the page. */
  .ft-bot{justify-content:flex-start}
  .ft-bot>p:first-child,.ft-bot>p:last-child{flex:none;text-align:left}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .hero{min-height:min(92svh,700px)}
}
@media (max-width:52rem){
  .mos{grid-template-columns:1fr;grid-auto-rows:auto}
  .mos>.tile{grid-column:1/-1!important;grid-row:auto!important;aspect-ratio:3/2}
  .mos>.tile.big{aspect-ratio:4/3}
}
/* ---- motion ------------------------------------------------------------
   Applied unconditionally, by decision: the page animates for every visitor.
   All of it is entry motion — things arriving once — rather than anything
   tied to scroll position. The hero parallax was the one exception and it was
   removed: a photograph that moves under the title while you scroll reads as
   the page slipping, not as depth. */
html{scroll-behavior:smooth}

/* Hero copy arrives in sequence. Pure CSS, because it is above the fold and
   must not wait on a script at the end of the document. */
.hin>*{animation:hin .85s cubic-bezier(.2,.7,.3,1) both}
.hin .eyebrow{animation-delay:.06s}
.hin h1{animation-delay:.16s}
.hin .hmeta{animation-delay:.3s}
.hin .cta{animation-delay:.4s}
@keyframes hin{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* With script, the opening is held until the photograph has decoded, so the
   copy and the frame arrive together rather than the copy landing on an empty
   hero and the picture snapping in behind it a moment later. The .js class is
   set before the hero is parsed, so nothing flashes; without script the class
   never appears and the rules above run on the load timeline as before. */
.js .hero .bg{opacity:0;animation:none}
.js .hero .hin>*{animation:none;opacity:0}
.js .hero.ld .bg{opacity:1;animation:rise 1.25s cubic-bezier(.2,.7,.3,1) both;
  transition:opacity 1s cubic-bezier(.2,.7,.3,1)}
.js .hero.ld .hin>*{animation:hin .85s cubic-bezier(.2,.7,.3,1) both}

/* 'translate' is deliberately its own property rather than a transform — it
   composes, so a tile can still take its hover lift on 'transform' while it
   is revealing, instead of the two overwriting each other. */
.rv{opacity:0;translate:0 22px}
.rv-in{opacity:1;translate:0 0;
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),translate .75s cubic-bezier(.2,.7,.3,1)}