/* gm-article.css — typography for the Arabic insights section.
   Additive only: gm.css is not touched. Everything here is scoped to
   .gm-article so no existing page can be affected. */
.gm-article{max-width:46rem;margin-inline:auto}
.gm-article p{font-size:1.06rem;line-height:2.05;margin:0 0 1.15em}
.gm-article h2{font-size:1.42rem;line-height:1.6;margin:2.4em 0 .7em;
  padding-inline-start:.7rem;border-inline-start:3px solid var(--gm-gold,#C8A24A)}
.gm-article strong{font-weight:700}
.gm-article em{font-style:normal;opacity:.82}
.gm-article ol.gm-steps{margin:0 0 1.6em;padding-inline-start:1.3rem}
.gm-article ol.gm-steps li{margin:0 0 .95em;line-height:1.95}
.gm-article ul.gm-links{margin:0 0 1.6em;padding-inline-start:1.15rem}
.gm-article ul.gm-links li{margin:0 0 .6em;line-height:1.9}
.gm-article a{color:inherit;text-decoration:underline;
  text-underline-offset:.22em;text-decoration-thickness:1px}
.gm-article a:hover{text-decoration-thickness:2px}
.gm-faq{margin-top:3rem;border-top:1px solid rgba(0,0,0,.12);padding-top:1.6rem}
.gm-faq h2{border:0;padding:0;margin:0 0 1.2em}
.gm-faq details{border-bottom:1px solid rgba(0,0,0,.09);padding:.9rem 0}
.gm-faq summary{cursor:pointer;font-weight:700;line-height:1.75;
  list-style:none;font-size:1.03rem}
.gm-faq summary::-webkit-details-marker{display:none}
.gm-faq summary::after{content:"+";float:inline-end;opacity:.45;font-weight:400}
.gm-faq details[open] summary::after{content:"−"}
.gm-faq details p{margin:.8rem 0 .25rem;opacity:.88}
.gm-meta{font-size:.88rem;opacity:.6;margin-bottom:2.2rem}
.gm-cardlist{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.gm-cardlist a{display:block;padding:1.4rem 1.5rem;text-decoration:none;
  border:1px solid rgba(0,0,0,.13);border-radius:.55rem;transition:.18s}
.gm-cardlist a:hover{border-color:var(--gm-gold,#C8A24A);transform:translateY(-2px)}
.gm-cardlist .k{font-size:.78rem;letter-spacing:.08em;opacity:.55;
  display:block;margin-bottom:.55rem}
.gm-cardlist .t{font-size:1.12rem;font-weight:700;line-height:1.65;display:block}
.gm-cardlist .d{font-size:.94rem;line-height:1.8;opacity:.75;
  display:block;margin-top:.6rem}
@media (max-width:640px){.gm-article p{font-size:1rem;line-height:1.95}
  .gm-article h2{font-size:1.24rem}}
/* gm-models:start */
/* figures and image cards for the scale-model section */
.gm-figure{margin:0 0 2.4rem;max-width:56rem;margin-inline:auto}
.gm-figure img{width:100%;height:auto;border-radius:.5rem;display:block}
/* Where am I, and how do I get back — at the top, before the reading starts. */
.gm-crumb{background:var(--gm-cream,#F7F4EC);
  border-block-end:1px solid rgba(11,37,69,.08);
  padding-block:.85rem;font-size:.86rem;letter-spacing:.01em}
.gm-crumb .gm-inner{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.gm-crumb a{color:var(--gm-navy,#0B2545);text-decoration:none;font-weight:600;
  padding-block:4px}
.gm-crumb a:hover{color:var(--gm-gold-dark,#8A6A22);text-decoration:underline}
.gm-crumb span[aria-hidden]{color:var(--gm-gold,#C9A75A);font-weight:700}
.gm-crumb .here{color:rgba(11,37,69,.62)}
@media (max-width:640px){
  /* On a phone the full trail does not fit, and the page title is already the
     heading right above it. One step back is what a thumb needs. */
  .gm-crumb{font-size:.82rem;padding-block:.7rem}
  .gm-crumb .gm-inner{flex-wrap:nowrap}
  .gm-crumb .here,.gm-crumb span[aria-hidden]{display:none}
  .gm-crumb a:first-child{display:none}
  /* the page reads right-to-left, so "back" points right */
  .gm-crumb a:last-of-type::before{content:"→ ";color:var(--gm-gold,#C9A75A);
    font-weight:700}
}

/* the two neighbouring disciplines, side by side and never narrower than a
   card needs to be */
.gm-tiles-pair{display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));max-width:56rem;
  margin-inline:auto}

/* one text link under the grid, instead of a card pretending to be a page */
.gm-more-link{margin:2.4rem 0 0;text-align:center}
.gm-more-link a{font-weight:700;color:var(--gm-navy,#0B2545);
  text-decoration:none;border-block-end:2px solid var(--gm-gold,#C9A75A);
  padding-block-end:.25rem}
.gm-more-link a:hover{color:var(--gm-gold-dark,#8A6A22)}

/* the catalogue gallery */
.gm-gallery{display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.gm-gallery figure{margin:0;border-radius:.5rem;overflow:hidden;
  background:rgba(0,0,0,.05);line-height:0}
.gm-gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  display:block;transition:transform .35s ease}
.gm-gallery figure:hover img{transform:scale(1.04)}
@media (max-width:640px){
  .gm-gallery{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.6rem}}

/* ── cards that lead somewhere ──────────────────────────────────────────
   These sat on cream with a hairline border and no colour of their own, so
   the browser painted the text with its default link purple and nobody read
   them as navigation. Navy ground, gold label, white title: the brand's own
   dark-section palette, used here on a light page so the block stands out. */
.gm-cardlist a{background:var(--gm-navy,#0B2545);border-color:transparent;
  color:var(--gm-white,#fff);box-shadow:0 8px 22px rgba(11,37,69,.10)}
.gm-cardlist a .t{color:var(--gm-white,#fff)}
.gm-cardlist a .k{color:var(--gm-gold-light,#E7C979);opacity:1;font-weight:700}
.gm-cardlist a .d{color:var(--gm-slate-200,#C4D0E1);opacity:1}
.gm-cardlist a::after{content:"←";display:block;margin-top:1rem;
  color:var(--gm-gold,#C9A75A);font-size:1.1rem;font-weight:700}
html[dir="ltr"] .gm-cardlist a::after{content:"→"}
.gm-cardlist a:hover,.gm-cardlist a:focus-visible{
  background:var(--gm-navy-lift,#163865);border-color:var(--gm-gold,#C9A75A);
  transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,37,69,.20)}
.gm-cardlist a:focus-visible{outline:2px solid var(--gm-gold,#C9A75A);
  outline-offset:3px}
/* the picture cards keep their photograph, and the caption block goes navy */
.gm-cardlist-img a::after{padding:0 1.3rem 1.2rem;margin-top:.2rem}

/* ── the lightbox ──────────────────────────────────────────────────────── */
html.gm-lb-open{overflow:hidden}
.gm-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;gap:.5rem;background:rgb(6,18,36);
  /* no backdrop blur: the ground is opaque anyway, and blurring a page that
     holds dozens of photographs is what froze the tab when an image opened */
  padding:clamp(.6rem,3vw,2rem);animation:gm-lb-in .18s ease}
@keyframes gm-lb-in{from{opacity:0}to{opacity:1}}
.gm-lb[hidden]{display:none}
.gm-lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.9rem;max-width:100%;max-height:100%;flex:1}
.gm-lb-stage img{max-width:100%;max-height:82vh;width:auto;height:auto;
  object-fit:contain;border-radius:.4rem;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.gm-lb-nav,.gm-lb-x{background:rgba(255,255,255,.10);color:#fff;border:0;
  cursor:pointer;border-radius:50%;line-height:1;transition:.16s;flex:none}
.gm-lb-nav{width:52px;height:52px;font-size:30px}
.gm-lb-x{position:absolute;inset-block-start:clamp(.6rem,2vw,1.4rem);
  inset-inline-end:clamp(.6rem,2vw,1.4rem);width:46px;height:46px;font-size:19px}
.gm-lb-nav:hover,.gm-lb-x:hover{background:var(--gm-gold,#C9A75A);
  color:var(--gm-navy,#0B2545)}
.gm-lb-nav:focus-visible,.gm-lb-x:focus-visible{outline:2px solid
  var(--gm-gold,#C9A75A);outline-offset:2px}
.gm-gallery figure{cursor:zoom-in}
.gm-gallery figure:focus-visible{outline:2px solid var(--gm-gold,#C9A75A);
  outline-offset:2px}
@media (max-width:640px){
  /* On a phone the side arrows were taking a third of the width away from the
     picture. They float over it instead, and swiping does the same job. */
  .gm-lb{padding:.4rem;gap:0}
  .gm-lb-nav{position:absolute;inset-block-start:50%;transform:translateY(-50%);
    width:44px;height:44px;font-size:26px;background:rgba(9,26,52,.55)}
  .gm-lb-prev{inset-inline-start:.4rem}
  .gm-lb-next{inset-inline-end:.4rem}
  .gm-lb-stage{width:100%}
  .gm-lb-stage img{max-height:72vh;max-width:100%}
  }

/* the "see the gallery" cue on the discipline cards */
.gm-tile-cue{display:inline-block;margin-top:.9rem;font-size:.9rem;
  font-weight:700;color:var(--gm-gold,#C8A24A);letter-spacing:.01em}
a.gm-tile:hover .gm-tile-cue{text-decoration:underline;
  text-underline-offset:.25em}
/* gm-models:end */