/* =============================================================================
   Local copy of gcc-sg.org/en/AboutUs/MemberStates.
   Every value here was measured off the live pages, not chosen:
     container 1296 wide, cards 416 x 392 in three columns with a 24px gutter
     h1 24px / 500, card name 20px / 400, card description 16px / 400
     ink #161615, secondary #757575, gold #C39827, page #FEFBF0, nav #FFFEF9,
     map active #D1A770, map idle #FBF4E4
   The site sets SuisseIntl-Regular, which is a licensed face and not
   distributable, so Inter stands in for it: same grotesque proportions, free.
   ============================================================================= */
:root{
  --ink:#161615;
  --muted:#757575;
  --gold:#C39827;
  --gold-dark:#A97F1C;
  --page:#FEFBF0;
  --nav:#FFFEF9;
  --strip:#FFF8E3;
  --footer:#E0D2AC;
  --card:#FFFFFF;
  --line:#EFE6D0;
  --map-on:#D1A770;
  --map-off:#FBF4E4;
  --sans:"Inter","SuisseIntl-Regular",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ar:"Noto Naskh Arabic","Traditional Arabic",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--page);color:var(--ink);font:400 16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1344px;margin:0 auto;padding:0 24px}

/* ---------------------------------------------------------------- landing grid */
.page{padding:40px 0 60px}
.member-states-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.member-states-card{background:var(--card);border-radius:6px;min-height:392px;
  padding:56px 34px 40px;display:flex;flex-direction:column;align-items:center;
  text-align:center;box-shadow:0 1px 3px rgba(120,100,50,.06);
  transition:box-shadow .18s ease-out}
.member-states-card:hover{box-shadow:0 6px 20px rgba(120,100,50,.13)}
.member-states-card__flag img{width:87px;height:52px;object-fit:contain}
.member-states-card__name{margin:32px 0 0;font-size:20px;font-weight:400;color:var(--ink)}
.member-states-card__description{margin:22px 0 0;font-size:16px;line-height:1.8;
  color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.member-states-card__go{margin:auto 0 0;width:36px;height:36px;border:1px solid var(--gold);
  border-radius:50%;display:flex;align-items:center;justify-content:center}
.member-states-card__go img{width:15px;height:15px;transform:rotate(180deg)}

/* ---------------------------------------------------------------- profile */
.council-member{background:var(--card);border-radius:6px;padding:44px 46px 54px;
  box-shadow:0 1px 3px rgba(120,100,50,.06)}
.council-member__head{display:flex;align-items:center;gap:26px;
  padding:0 0 34px;border-bottom:1px solid var(--line)}
.council-member__flag{width:87px;height:52px;object-fit:contain}
.council-member__name{font-size:20px;font-weight:400}
.council-member-details{display:flex;align-items:flex-start;gap:60px;padding:30px 0 0}
.council-member-details__item{display:flex;align-items:center;gap:14px}
.council-member-details__icon{width:52px;height:52px;border:1px solid #6FB3D6;
  border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.council-member-details__icon--area{border-color:#7FBF7F}
.council-member-details__icon img{width:28px;height:28px}
.council-member-details__item__details{display:flex;flex-direction:column;gap:3px}
.council-member-details__label{font-size:16px;color:var(--ink)}
.council-member-details__value{font-size:16px;color:#31789F;min-height:22px}
/* #3E8FBF measured 3.57:1 on white and needs 4.5 at this size. It is now the only
   detail on the page, since the empty Area item was removed, so the one fact left in
   the block was the one failing. #31789F is 4.86:1 and reads as the same blue. */
.council-member__cols{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);
  gap:0 40px;align-items:start;padding:40px 0 0}
.council-member__map{width:100%}
.council-member__text p{margin:0 0 26px;font:400 17px/2.05 var(--ar);color:var(--muted);
  text-align:right}
.council-member__text p:last-child{margin-bottom:0}

/* the map: the site ships one svg on every page and colours the active state in css */
.council-member-map{width:100%;height:auto;display:block}
.council-member-map path[data-country]{fill:var(--map-off)}
.council-member-map path[data-name]{fill:var(--muted)}
.council-member-map path[data-marker]{fill:var(--map-on)}
.council-member[data-active="uae"]     .council-member-map path[data-country="uae"],
.council-member[data-active="bahrain"] .council-member-map path[data-country="bahrain"],
.council-member[data-active="ksa"]     .council-member-map path[data-country="ksa"],
.council-member[data-active="oman"]    .council-member-map path[data-country="oman"],
.council-member[data-active="qatar"]   .council-member-map path[data-country="qatar"],
.council-member[data-active="kuwait"]  .council-member-map path[data-country="kuwait"]{
  fill:var(--map-on)}
/* only these two whiten their own label on the live site: the two shapes big enough to hold it */
.council-member[data-active="ksa"]  .council-member-map path[data-name="ksa"],
.council-member[data-active="oman"] .council-member-map path[data-name="oman"]{fill:#fff}
/* the active city marker is white, and Bahrain's own is transparent on their page */
.council-member[data-active="uae"]     .council-member-map path[data-marker="uae"],
.council-member[data-active="ksa"]     .council-member-map path[data-marker="ksa"],
.council-member[data-active="oman"]    .council-member-map path[data-marker="oman"],
.council-member[data-active="qatar"]   .council-member-map path[data-marker="qatar"],
.council-member[data-active="kuwait"]  .council-member-map path[data-marker="kuwait"]{fill:#fff}
.council-member[data-active="bahrain"] .council-member-map path[data-marker="bahrain"]{
  fill:transparent}

/* ---------------------------------------------------------------- narrow */
@media (max-width:1000px){
  .member-states-grid{grid-template-columns:repeat(2,1fr)}
  .council-member__cols{grid-template-columns:1fr;gap:32px}}
@media (max-width:640px){
  .member-states-grid{grid-template-columns:1fr}
  .council-member{padding:28px 20px 34px}
  .council-member-details{gap:28px;flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}}


/* ---------------------------------------------------------------- background */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-position:center;background-repeat:no-repeat;background-size:cover;
  filter:blur(3px);opacity:.07}
/* THE PANORAMA ON THE SIX-STATE PAGE.
   It fills the space that is already there rather than space made for it. The page is a flex
   column, the boxes take the height they need, and the picture is the last flex item with
   flex-grow, so it takes exactly what is left between the boxes and the foot of the window and
   no empty ground survives. A min-height keeps it from collapsing to nothing when the boxes
   fill the window, and it grows on a tall screen.
   Full-bleed behind the boxes was tried first and was wrong: the six boxes sit where the
   skyline sits, so the towers showed as chopped strips in the gaps between cards. Faded in at
   the top so it rises out of the ground with no line where it starts. */
body[data-bg="members"]{min-height:100vh;display:flex;flex-direction:column}
body[data-bg="members"] .page{flex:0 0 auto;padding-bottom:32px}
body[data-bg="members"]::before{display:none}
/* the floor is 120px, not more: at a 1000px window the boxes plus this land exactly on the
   viewport, so the picture never pushes the page taller than it already is */
body[data-bg="members"]::after{content:"";flex:1 1 auto;min-height:120px;
  pointer-events:none;
  background:url("img/gcc-panorama.webp") bottom center/cover no-repeat;
  opacity:.24;
  -webkit-mask:linear-gradient(to bottom,transparent 0,#000 55%,#000 100%);
  mask:linear-gradient(to bottom,transparent 0,#000 55%,#000 100%)}
@media (forced-colors:active){ body[data-bg="members"]::after{display:none} }
@media print{ body[data-bg="members"]::after{display:none !important} }
body[data-bg="uae"]::before{background-image:url("img/Emblem_Emirates.png")}
body[data-bg="bahrain"]::before{background-image:url("img/Emblem_Bahrain.png")}
body[data-bg="ksa"]::before{background-image:url("../flag-saudi-arabia.webp");filter:none}
body[data-bg="oman"]::before{background-image:url("img/Emblem_Oman.png")}
body[data-bg="qatar"]::before{background-image:url("img/Emblem_Qatar.png")}
body[data-bg="kuwait"]::before{background-image:url("img/Emblem_Kuwait.png")}
html{background:var(--page)}
body{background:transparent}
@media print{ body::before{display:none !important} }


/* =============================================================================
   THE REGISTER'S MASTHEAD AND FOOTER, ported so the members section belongs to the
   register instead of reading as a replica of gcc-sg.org.

   SCOPED ON PURPOSE. This stylesheet is a deliberate copy of the Council's own design and
   defines its own --ink (#161615), --line and --sans. The register's values for those names
   are different, so reusing them here would either break this page or break that one. Every
   value below is therefore either literal or carries a gccp- prefix, and nothing above this
   line is touched.

   Values are taken from index.html rather than eyeballed: mast #232C5C, h1 Source Serif 4 at
   27px rising to 31px, #F4F3F0 with the abbreviation at #BCC7CD, kicker IBM Plex Mono 11px
   #D3DCE1 with .14em tracking widening to .18em, and the Fluent spectrum ribbon at 40 per
   cent along the foot of the band.
   ============================================================================= */
.gccp-top,.gccp-foot{
  --gccp-mast:#232C5C;
  --gccp-ink-3:#5B6488;
  --gccp-accent:#3E4CC4;
  --gccp-accent-2:#3341A6;
  --gccp-line-2:#CBD8EC;
  --gccp-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --gccp-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,monospace;
  --gccp-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gccp-spectrum:linear-gradient(120deg,#E3008C,#7B61FF,#0078D4,#00BCF2,#13A10E,#FFB900);
}
.gccp-wrap{max-width:1240px;margin:0 auto;padding:0 48px}
@media (max-width:700px){ .gccp-wrap{padding:0 24px} }

.gccp-top{background:var(--gccp-mast);position:relative}
.gccp-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gccp-spectrum);opacity:.4}
.gccp-top .gccp-wrap{padding-top:26px;padding-bottom:26px}
.gccp-h1{margin:0;font:600 27px/1.18 var(--gccp-serif);color:#F4F3F0;letter-spacing:.1px}
@media (min-width:700px){ .gccp-h1{font-size:31px} }
.gccp-h1 a{color:inherit;text-decoration:none;display:inline-block}
.gccp-h1 a:hover{color:#FFFFFF}
.gccp-h1 .gccp-abbr{color:#BCC7CD;font-weight:400}
.gccp-top a:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
/* six names do not fit one line on a phone, so it wraps and is given a line height to wrap
   into, with the tracking eased at small sizes */
.gccp-kick{margin:10px 0 0;font:600 11px/1.6 var(--gccp-mono);letter-spacing:.14em;
  text-transform:uppercase;color:#D3DCE1;text-wrap:balance}
@media (min-width:760px){ .gccp-kick{letter-spacing:.18em} }

/* THE FOOT. No panorama here: these pages already carry one, and the register's footer no
   longer holds its own copy, so a second would put the same picture on the page twice. */
.gccp-foot{position:relative;border-top:1px solid #DEE7F4;background:#F5F8FD}
.gccp-foot .gccp-wrap{padding-top:24px;padding-bottom:24px}
.gccp-foot p{margin:0;display:flex;align-items:center;gap:11px;justify-content:flex-end;
  font:500 12.5px/1.6 var(--gccp-sans);color:var(--gccp-ink-3)}
.gccp-foot a{display:inline-flex;align-items:center;min-height:40px;
  font:600 14px/1.6 var(--gccp-serif);color:var(--gccp-accent);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  letter-spacing:.15px}
.gccp-foot a:hover{color:var(--gccp-accent-2)}
.gccp-foot a.gccp-ava{flex:0 0 auto;min-height:0;border-radius:50%;line-height:0;
  text-decoration:none;box-shadow:0 0 0 1px var(--gccp-line-2),0 2px 7px rgba(20,24,36,.14);
  transition:box-shadow .18s ease,transform .18s ease}
.gccp-foot a.gccp-ava img{width:40px;height:40px;border-radius:50%;display:block;
  object-fit:cover}
.gccp-foot a.gccp-ava:hover,.gccp-foot a.gccp-ava:focus-visible{transform:scale(1.14);
  box-shadow:0 0 0 1px #E7B23A,0 0 16px 3px rgba(242,194,74,.55)}
@media (prefers-reduced-motion:reduce){
  .gccp-foot a.gccp-ava:hover,.gccp-foot a.gccp-ava:focus-visible{transform:none} }

/* the body text, now English, so it is set in the page's own sans rather than the Arabic face
   and given a readable measure instead of a full-width column */
/* THE BODY TEXT IS ENGLISH NOW, so it cannot keep the Arabic typography. The rule above sets
   font:400 17px/2.05 var(--ar) with text-align:right, which was right for Arabic and is wrong
   for this: the face fell back to a serif once the Arabic webfont went, and the paragraphs
   ragged on the wrong edge, which read as centred. Overridden here rather than edited in place,
   so the original rule stays intact if Arabic is ever restored. */
.council-member__text{font-family:var(--sans)}
.council-member__text p{font:400 16px/1.7 var(--sans);text-align:left;max-width:68ch;
  margin:0 0 20px}
.council-member__text p:last-child{margin-bottom:0}
/* THE WAY BACK. Six pages with no route to the list they came from is a dead end: a reader
   arriving from a link or a search has no browser history to fall back on. This follows the
   register's own convention, a quiet link above the heading, in this section's palette.

   THE COLOUR IS MEASURED. The obvious choice was the gold and it fails: --gold is 2.68:1 on
   white and --gold-dark is 3.66:1, where 11px uppercase needs 4.5. So the label takes --ink at
   18.11:1 and the gold-dark is spent on the arrow, where 3.66:1 clears the 3:1 that a
   meaningful non-text graphic needs. */
.council-member__back{display:inline-flex;align-items:center;gap:9px;min-height:40px;
  margin:0 0 4px;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;
  align-self:flex-start}
.council-member__back-i{font-size:15px;line-height:1;color:var(--gold-dark)}
.council-member__back:hover{border-bottom-color:var(--gold-dark)}
.council-member__back:focus-visible{outline:2px solid var(--gold-dark);outline-offset:3px;
  border-radius:2px}
.council-member__source{margin:18px 0 0;max-width:74ch;
  font:400 12.5px/1.55 var(--sans);color:var(--muted)}
.council-member__source a{text-decoration:underline;text-underline-offset:2px}


/* The country name is now the page's h1 rather than a span, so it needs its heading margins
   removed to sit exactly where the span did. Nothing about its appearance changes. */
h1.council-member__name{margin:0}

/* Visually hidden, still read aloud. The landing page has no visible title and adding one would
   change a layout already signed off, so the heading exists for anyone navigating by heading and
   not on screen. clip-path with a 1px box is the form that survives being inside a flex or grid
   parent, which display:none and width:0 do not. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}