/* شهاب — shared components. Generated from the markup; hover states folded
   from the per-page sheets. Names per the approved dictionary. */
.sh-page{background:#fff;color:var(--sh-ink);font-family:var(--sh-font-stack);font-size:14px}
/* «المزيد» — the house button. A hairline box on white, the label in Almarai,
   and the ش blade pointing forward (leftward, this being RTL) in place of the
   old dash. Hover: the box takes the blue and the blade steps forward. The
   size modifiers (--12/--14/--16) only size the blade. */
.sh-more{
  display:inline-flex;align-items:center;gap:8px;padding:8px 0;
  border:0;background:none;color:currentColor;
  font-family:var(--sh-font);font-size:12px;font-weight:800;line-height:1;white-space:nowrap;
  text-underline-offset:5px;text-decoration-thickness:1px;
}
@media (hover:hover){.sh-more:hover{color:currentColor;text-decoration:underline}}
.sh-more:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.sh-more__arrow{
  flex:none;width:13px;aspect-ratio:100/41.59;height:auto;background:currentColor;
  -webkit-mask:url(../assets/images/mark-arrow.svg) center/contain no-repeat;
          mask:url(../assets/images/mark-arrow.svg) center/contain no-repeat;
  transition:transform .2s ease;
}
.sh-more:hover .sh-more__arrow{transform:translateX(-3px)}
.sh-more__arrow--12{width:13px}
.sh-more__arrow--14{width:13px}
.sh-more__arrow--16{width:13px}
.sh-chevron{width:8px;height:8px;border-right:1px solid var(--sh-grey-1);border-top:1px solid var(--sh-grey-1);transform:rotate(-135deg)}
.sh-container{max-width:var(--sh-container);margin:0 auto;padding:0 32px}
.sh-mark--md{width:16px;height:13px;background:var(--sh-blue)}
.sh-doc__num.sh-doc__num--sm{font-family:var(--sh-font);font-size:11px;font-weight:800;color:var(--sh-blue);font-variant-numeric:tabular-nums}
.sh-mute{color:var(--sh-mute)}
@media (hover:hover){.sh-mute:hover{color:var(--sh-blue)}}
.sh-inline-flex{display:inline-flex}
.sh-min0{min-width:0}
.sh-meta.sh-meta--wrap{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:11px;color:var(--sh-mute)}
.sh-fs-10{font-size:10px}
.sh-meta__count{font-size:11px;color:var(--sh-mute);font-variant-numeric:tabular-nums}
.sh-section__head{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:8px;gap:16px}   /* the title and its mark carry the section; no ruled line */
.sh-section__title.sh-section__title--sm{font-family:var(--sh-font);font-size:14px;font-weight:800;margin:0;color:var(--sh-navy);display:flex;align-items:center;gap:9px}
.sh-meta__note{font-size:11px;color:var(--sh-mute)}
.sh-list__row.sh-list__row--34{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:13px 0;border-bottom:1px solid var(--color-border-soft)}
@media (hover:hover){.sh-list__row.sh-list__row--34:hover{color:var(--sh-blue)}}
.sh-card__title{font-family:var(--sh-font);font-size:13px;font-weight:700;line-height:1.7;color:var(--sh-ink);text-wrap:pretty}
.sh-rail__item{display:block;padding:12px 14px 12px 0}
@media (hover:hover){.sh-rail__item:hover{color:var(--sh-blue)}}
.sh-meta{display:flex;gap:9px;align-items:center;font-size:11px}
.sh-meta__time{color:var(--sh-mute);font-variant-numeric:tabular-nums}
.sh-rail__title{display:block;font-family:var(--sh-font);font-size:13px;font-weight:700;line-height:1.7;margin-top:5px;color:var(--sh-ink);text-wrap:pretty}
.sh-section__title{font-family:var(--sh-font);font-size:20px;font-weight:700;margin:0;color:var(--sh-navy);display:flex;align-items:center;gap:10px}
.sh-meta.sh-meta--blue{display:flex;gap:9px;align-items:center;font-size:11.5px;color:var(--sh-blue);font-weight:700;font-family:var(--sh-font)}
.sh-meta__time.sh-meta__time--plain{color:var(--sh-mute);font-weight:400;font-variant-numeric:tabular-nums}
.sh-rule{flex:1;height:1px;background:transparent}
/* the same head on a navy rail: type from the component, colour from here */
.sh-section__title.sh-section__title--on-dark{color:#fff}
.sh-section__title.sh-section__title--md{font-family:var(--sh-font);font-size:16px;font-weight:800;margin:0;color:var(--sh-navy);display:flex;align-items:center;gap:10px}
.sh-tile.sh-tile--16x9{position:relative;display:block;background:var(--sh-navy-2);overflow:hidden;aspect-ratio:16/9}
.sh-meta__cat{color:var(--sh-blue);font-weight:700;font-family:var(--sh-font)}
.sh-pager__btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--sh-ink-2);border:1px solid var(--sh-hair-4);font-variant-numeric:tabular-nums}
.sh-pager__btn[aria-disabled="true"]{pointer-events:none}
@media (hover:hover){.sh-pager__btn:hover{border-color:var(--sh-blue);color:var(--sh-blue)}}
.sh-eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--sh-font);font-size:11.5px;font-weight:800;color:var(--sh-sky)}
.sh-timeline__tick{position:absolute;top:9px;right:9px;width:26px;height:1px;background:var(--sh-blue);opacity:.35}
.sh-archive__count{display:block;font-size:11px;color:var(--sh-mute);margin-top:7px;font-variant-numeric:tabular-nums}
.sh-timeline__node{position:absolute;top:5px;right:0;width:16px;height:13px;background:#fff;border:2px solid var(--sh-blue)}
/* the plate that replaces an image that did not arrive: the mark on navy
   with one diagonal, so the slot reads as identity and not as a break.
   Drawn by js/app.js when an image fails; the same recipe as
   system-states.html section 02. */
/* nothing to show: say what the place is, and give one way on.
   The shape system-states.html documents — a side rule, a short title,
   one line, one action. */
.sh-empty{border-inline-start:3px solid var(--sh-blue);padding:14px 18px;display:grid;gap:7px;justify-items:start;background:var(--sh-hair-6)}
.sh-empty[hidden]{display:none}   /* a class with a display beats the [hidden] default */
.sh-empty__t{font-family:var(--sh-font);font-size:15px;font-weight:800;color:var(--sh-navy)}
.sh-empty__p{font-size:13px;line-height:1.7;color:var(--sh-grey-2);max-width:56ch}
.sh-noimg{position:relative;display:block;overflow:hidden;background:var(--sh-navy)}
.sh-noimg__d{position:absolute;inset:0;background:linear-gradient(to left top,transparent 49.6%,rgba(126,168,221,.22) 49.8%,rgba(126,168,221,.22) 50.2%,transparent 50.4%)}
.sh-noimg__logo{position:absolute;inset:0;margin:auto;width:34%;height:auto;opacity:.14}
.sh-list__num.sh-list__num--big{font-family:var(--sh-font);font-size:22px;font-weight:800;color:var(--color-text-faint);line-height:1.1;font-variant-numeric:tabular-nums;text-align:center}
/* the phone floor shrinks this to 18px, where the contrast bar rises to 4.5 */
@media (max-width:640px){.sh-list__num.sh-list__num--big{color:var(--color-text-muted)}}
.sh-mt-28{margin-top:28px}
.sh-rail__link{color:var(--sh-ink-2);padding:6px 0}
@media (hover:hover){.sh-rail__link:hover{color:var(--sh-blue)}}
.sh-tile.sh-tile--4x3{position:relative;display:block;background:var(--sh-navy-2);overflow:hidden;aspect-ratio:4/3}
.sh-block{display:block}
@media (hover:hover){.sh-block:hover{color:var(--sh-blue)}}
.sh-tile.sh-tile--15x8{position:relative;display:block;background:var(--sh-navy-2);overflow:hidden;aspect-ratio:15/8}
.sh-tile__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sh-tabs__link{color:var(--color-text-muted);padding:14px 0 12px}
@media (hover:hover){.sh-tabs__link:hover{color:var(--sh-blue)}}
.sh-card__title.sh-card__title--lg{display:block;font-family:var(--sh-font);font-size:15.5px;font-weight:700;line-height:1.65;color:var(--sh-ink);text-wrap:pretty}
.sh-list__num{font-family:var(--sh-font);font-size:11px;font-weight:800;color:var(--sh-grey-2);font-variant-numeric:tabular-nums}
.sh-rail__link.sh-rail__link--pad{color:var(--sh-ink-2);padding:6px 16px}
@media (hover:hover){.sh-rail__link.sh-rail__link--pad:hover{color:var(--sh-blue)}}
.sh-list__row.sh-list__row--26{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--color-border-soft)}
@media (hover:hover){.sh-list__row.sh-list__row--26:hover{color:var(--sh-blue)}}
.sh-list__title{font-family:var(--sh-font);font-size:13px;font-weight:700;line-height:1.65;color:var(--sh-ink)}
.sh-doc__num{font-family:var(--sh-font);font-size:12px;font-weight:800;color:var(--sh-blue);font-variant-numeric:tabular-nums}
.sh-timeline__item{position:relative;display:block;padding:28px 0 4px}
@media (hover:hover){.sh-timeline__item:hover{color:var(--sh-blue)}}
.sh-meta__cat.sh-meta__cat--bold{color:var(--sh-blue);font-weight:800;font-family:var(--sh-font)}

/* ============================================================================
   sh-hub — «محاور اليوم» as collections. One cover per hub: the newest
   story's photograph, portrait, with two sheets fanned behind it (a pile of
   pictures, the way a real collection sits on a desk), a count plate in the
   corner and the ش blade. Under it the name and the meta, in type. Hover
   fans the pile. Photographs, counts and headlines come from the section's
   <template data-sh-hub-source> through js/app.js; a hub with nothing in it
   today hides.
   ========================================================================== */
.sh-hubs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;margin-top:20px}
.sh-hub{position:relative;display:block;color:var(--sh-ink);outline-offset:6px}
@media (hover:hover){.sh-hub:hover{color:var(--sh-ink)}}
.sh-hub:focus-visible{outline:2px solid var(--sh-blue)}
.sh-hub[data-sh-empty]{display:none}
.sh-hub__stack{position:relative;display:block;margin:10px 0 0 10px}   /* room for the fan, which opens toward the top-left */
.sh-hub__sheet{
  position:absolute;inset:0;background:#e7eaef;border:1px solid var(--sh-hair-2);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.sh-hub__sheet--1{transform:translate(-3px,-3px);z-index:1}
.sh-hub__sheet--2{transform:translate(-6px,-6px);background:var(--color-surface-soft);z-index:0}
.sh-hub:hover .sh-hub__sheet--1{transform:translate(-5px,-5px)}
.sh-hub:hover .sh-hub__sheet--2{transform:translate(-10px,-10px)}
.sh-hub__cover{
  position:relative;z-index:2;display:block;aspect-ratio:3/4;overflow:hidden;
  background:var(--sh-navy);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.sh-hub:hover .sh-hub__cover{transform:translateY(-2px)}
.sh-hub__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sh-hub:hover .sh-hub__art{transform:scale(1.05)}
.sh-hub__num{
  position:absolute;top:0;inset-inline-start:0;z-index:2;min-width:28px;height:28px;padding:0 7px;
  display:grid;place-items:center;background:#fff;color:var(--sh-navy);
  font-family:var(--sh-font);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;direction:ltr;
}
.sh-hub__mark{position:absolute;bottom:10px;inset-inline-end:10px;z-index:2;width:13px;height:11px;background:var(--sh-on-dark-75)}
.sh-hub__body{display:flex;flex-direction:column;gap:4px;padding:12px 2px 0}
.sh-hub__name{font-family:var(--sh-font);font-size:15px;font-weight:800;line-height:1.35;color:var(--sh-navy);transition:color .18s ease}
.sh-hub:hover .sh-hub__name{color:var(--sh-blue)}
.sh-hub__meta{font-size:12px;color:var(--sh-mute);font-variant-numeric:tabular-nums}
.sh-hub__meta span{direction:ltr;unicode-bidi:isolate}
@media (max-width:640px){
  .sh-hubs{display:flex;overflow-x:auto;gap:18px;padding:0 0 6px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sh-hubs::-webkit-scrollbar{display:none}
  .sh-hub{flex:0 0 38%;scroll-snap-align:start}
}

/* ============================================================================
   sh-hubview — the collection opened: ONE story on screen, nothing else. The
   stories are a physical deck -- the ones still to come peek out of the right
   edge, the way the files shelf keeps its unopened spines -- and going
   forward throws the top card off to the left and brings the next into its
   place. Drag it, tap its sides, or use the arrows; the strip under the card
   always names what is coming next, so no index is needed to know where you
   are. Built once by js/app.js and reused for every hub on the page.
   ========================================================================== */
html[data-sh-hubview-open]{overflow:hidden}
.sh-hubview{
  position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:26px;
  /* minmax(0,…) or the tracks would size to the longest headline in the
     next strip -- max-content ignores the min-width:0 on it -- and the
     frame would grow past a phone's viewport */
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
}
.sh-hubview[hidden]{display:none}
.sh-hubview__veil{
  position:absolute;inset:0;background:rgba(10,26,51,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:sh-hubview-veil .3s ease both;
}
.sh-hubview[data-closing] .sh-hubview__veil{animation:sh-hubview-veil .22s ease reverse both}
@keyframes sh-hubview-veil{from{opacity:0}}

/* the frame: the hub's name and the counter sit outside the card, on the
   veil, so the card itself carries nothing but the story */
.sh-hubview__frame{
  position:relative;width:min(760px,100%);max-width:100%;height:min(720px,100%);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:12px;
  /* the column too: an auto track would take the width of the longest
     headline in the next strip and push the deck past the frame */
  animation:sh-hubview-in .45s cubic-bezier(.2,.7,.2,1) both;
}
.sh-hubview[data-closing] .sh-hubview__frame{animation:sh-hubview-in .22s ease reverse both}
@keyframes sh-hubview-in{from{opacity:0;transform:translateY(20px) scale(.97)}}

.sh-hubview__bar{display:flex;align-items:center;gap:12px;min-width:0;color:#fff}
.sh-hubview__brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--sh-font);font-size:12px;font-weight:800;color:rgba(255,255,255,.6)}
.sh-hubview__brand .sh-mark{width:14px;height:12px;background:rgba(255,255,255,.6)}
.sh-hubview__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sh-font);font-size:18px;font-weight:800}
.sh-hubview__pos{font-size:12px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.sh-hubview__listen{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sh-font);font-size:12.5px;font-weight:800;color:var(--sh-navy);
  background:#fff;border:0;padding:8px 14px;cursor:pointer;transition:background .18s ease,color .18s ease;
}
.sh-hubview__listen:hover{background:var(--sh-blue);color:#fff}
.sh-hubview__listen .sh-mark{width:13px;height:11px;background:currentColor}
.sh-hubview__close{
  width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);
  background:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .18s ease;
}
.sh-hubview__close:hover{background:rgba(255,255,255,.14)}

/* the progress of the whole collection, one hairline per story */
.sh-hubview__segs{position:absolute;top:52px;inset-inline:0;display:flex;gap:4px;z-index:5}
.sh-hubview__seg{flex:1;height:2px;background:rgba(255,255,255,.28);overflow:hidden}
.sh-hubview__seg::before{content:"";display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:100% 50%}
.sh-hubview__seg--done::before{transform:scaleX(1)}
.sh-hubview__seg--on::before{animation:sh-hubview-seg var(--sh-hub-dur,7s) linear forwards}
@keyframes sh-hubview-seg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sh-hubview[data-paused] .sh-hubview__seg--on::before{animation-play-state:paused}

/* the deck reads right to left, like the page: the stories still to come
   wait on the left edge, and a story that has been read leaves to the
   right -- the read pile. So the next arrow (left) points at what is
   coming, the previous arrow (right) at what has gone, and a drag to the
   right turns the page. css/ltr.css mirrors all of it for English. */
.sh-hubview__deck{position:relative;min-height:0;touch-action:pan-y;cursor:grab}
.sh-hubview__deck[data-drag]{cursor:grabbing}
.sh-hubcard{
  position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;
  background:#fff;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3);
  transform:translateX(calc(var(--o) * -22px)) scale(calc(1 - var(--o) * .035));
  transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease;
  will-change:transform;
}
.sh-hubview__deck[data-drag] .sh-hubcard{transition:none}
.sh-hubcard[data-state="past"]{transform:translateX(115%) rotate(3deg);opacity:0;pointer-events:none}
.sh-hubcard[data-state="deep"]{opacity:0;pointer-events:none}     /* deeper than the two showing edges */
.sh-hubcard[data-state="next"]{cursor:pointer}
.sh-hubcard[data-state="on"]{cursor:auto}
.sh-hubcard__photo{position:relative;overflow:hidden;background:var(--sh-navy);min-height:0}
.sh-hubcard__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-hubcard[data-state="on"] .sh-hubcard__art{animation:sh-hubview-kb var(--sh-hub-dur,7s) linear both}
@keyframes sh-hubview-kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.sh-hubview[data-paused] .sh-hubcard__art{animation-play-state:paused}
.sh-hubcard__photo::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;background:linear-gradient(to top,rgba(10,26,51,.4),transparent);pointer-events:none}
.sh-hubcard__credit{position:absolute;bottom:9px;inset-inline-start:14px;z-index:2;font-size:10.5px;color:rgba(255,255,255,.82);direction:ltr}
.sh-hubcard__no{
  position:absolute;top:0;inset-inline-start:0;z-index:2;min-width:34px;height:30px;padding:0 9px;
  display:grid;place-items:center;background:#fff;color:var(--sh-navy);
  font-family:var(--sh-font);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;direction:ltr;
}
.sh-hubcard__body{position:relative;padding:20px 30px 24px}
.sh-hubcard__line{display:flex;align-items:center;gap:12px}
.sh-hubcard__cat{display:inline-flex;align-items:center;font-family:var(--sh-font);font-size:11.5px;font-weight:800;color:#fff;background:var(--sh-blue);padding:3px 9px}
.sh-hubcard__time{font-size:12px;color:var(--sh-mute);font-variant-numeric:tabular-nums}
.sh-hubcard__time span{direction:ltr;unicode-bidi:isolate}
.sh-hubcard__title{font-family:var(--sh-font);font-size:clamp(20px,2.2vw,27px);font-weight:800;line-height:1.5;margin:12px 0 14px;color:var(--sh-navy);text-wrap:balance}
.sh-hubcard__read{display:inline-flex;align-items:center;gap:10px;color:var(--sh-blue);font-family:var(--sh-font);font-weight:800;font-size:12.5px;transition:gap .25s ease}
.sh-hubcard__read:hover{color:var(--sh-navy);gap:16px}
.sh-hubcard__read .sh-mark{width:13px;height:11px;background:currentColor}
/* the two halves of the photograph are the page turn */
.sh-hubview__tap{position:absolute;top:0;height:100%;width:32%;z-index:4;background:none;border:0;cursor:pointer;color:var(--sh-navy);opacity:0;transition:opacity .2s ease}
/* both arrows show on the open story (they used to appear on hover only, which
   read as one arrow missing); full strength under the pointer */
.sh-hubcard[data-state="on"] .sh-hubview__tap{opacity:.8}
.sh-hubcard[data-state="on"] .sh-hubview__tap:hover,.sh-hubcard[data-state="on"] .sh-hubview__tap:focus-visible{opacity:1}
.sh-hubview__tap--prev{inset-inline-start:0}
.sh-hubview__tap--next{inset-inline-end:0}
/* the chip is the icon itself. The single angle quotation marks that used to
   draw these arrows are mirrored characters: the bidi algorithm flipped them
   on this RTL page and they pointed the wrong way. Font Awesome's chevrons
   are glyphs, not quotation marks, so they point where they are drawn --
   right for the previous story, left for the next, the same pairing the
   archive pager uses. */
/* The chip is the disc and the glyph is 1em inside it, the same way every other
   round control here is built (.sh-vid__big, .sh-reels-grid__play, .sh-lite__play).
   Sizing the <svg> itself is what made this chevron look like a slider button:
   an icon sprite carries no viewBox of its own, so a px box scales the drawing
   up to fill it. A page-turn cue, not a slider button: small, on hover only. */
.sh-hubview__chip{
  position:absolute;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(10,26,51,.28);color:var(--sh-navy);
  display:grid;place-items:center;font-size:11px;line-height:1;
}
.sh-hubview__tap--prev .sh-hubview__chip{inset-inline-start:16px}
.sh-hubview__tap--next .sh-hubview__chip{inset-inline-end:16px}

/* what is coming next, always named: the collection's own table of contents,
   one line long */
.sh-hubview__next{
  display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  background:none;border:0;border-top:1px solid rgba(255,255,255,.18);padding:12px 2px 0;
  color:rgba(255,255,255,.92);cursor:pointer;font:inherit;transition:color .18s ease;
}
.sh-hubview__next:hover{color:#fff}
.sh-hubview__next[hidden]{display:none}
.sh-hubview__nlabel{flex:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--sh-font);font-size:11.5px;font-weight:800;color:rgba(255,255,255,.55)}
.sh-hubview__nlabel .sh-mark{width:12px;height:10px;background:rgba(255,255,255,.55)}
.sh-hubview__ntitle{min-width:0;font-family:var(--sh-font);font-size:13.5px;font-weight:700;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-hubview__ntime{flex:none;margin-inline-start:auto;font-size:11.5px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

@media (max-width:760px){
  .sh-hubview{padding:14px}
  .sh-hubview__frame{height:100%;gap:10px}
  .sh-hubview__name{font-size:16px}
  .sh-hubview__listen{padding:8px 11px;font-size:12px}
  .sh-hubview__segs{top:46px}
  .sh-hubcard{transform:translateX(calc(var(--o) * -14px)) scale(calc(1 - var(--o) * .03))}
  .sh-hubcard__body{padding:16px 18px 20px}
  .sh-hubcard__title{font-size:19px;margin:10px 0 12px}
  .sh-hubview__tap{width:40%}
  .sh-hubview__chip{display:none}   /* the whole disc goes on a phone, not just its glyph: the swipe is the page turn */
  .sh-hubview__ntime{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sh-hubview__veil,.sh-hubview__frame{animation:none}
  .sh-hubcard{transition:none}
  .sh-hubcard[data-state="on"] .sh-hubcard__art{animation:none}
  .sh-hubview__seg--on::before{animation:none;transform:scaleX(1)}
  .sh-hub__sheet,.sh-hub__cover,.sh-hub__art{transition:none}
}

/* «تصريحات خاصة» sits inside the collections column, under the covers: it
   keeps its own head and rail, but not the page-level padding it had as a
   section of its own. */
/* «ملفات خاصة» now sits inside the collections column, under the covers: it
   keeps its head and its shelf, but not the page-level padding it had as a
   section of its own, and the shelf is scaled to the narrower column. */
.sh-index-special-files__section-1--in-hubs{padding:0!important;margin-top:34px}

/* ============================================================================
   sh-binders — «ملفات خاصة»: archive folders on a shelf. The most recognisable
   silhouette a file has -- a folder with a TAB -- kept flat: a tab at the
   top-right carrying the number in the desk's colour, a SPINE of the same
   colour down the right edge, two SHEETS peeking out of the top (there are
   documents inside), and a cover of lightly tinted paper carrying the file's
   photograph as a print and a white LABEL with the title, the count and the
   last update. Folders overlap a little along the shelf and stand on its
   line; the open one lifts, the rest quieten. Off-white is the ground, the
   desk colour is the cue. The count, update and stamp are filled by
   js/app.js from the file's own hidden content.
   ========================================================================== */
.sh-binders__head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--sh-hair-2);padding-bottom:12px}
.sh-binders{position:relative;margin-top:22px}
/* one house colour for every folder: navy on the tab and the spine, blue where
   the site uses blue (the label's rule, the count, the open state). The desk
   is a word on the label, typed and muted -- a whisper, not a fill. The frame
   of the opened folder carries the desk class too, so it reads the same. */
.sh-binder,.sh-bo__frame{--accent:var(--sh-navy-2);--accent-ink:var(--sh-blue)}
.sh-binder--desk-politics{--desk:"سياسة"}
.sh-binder--desk-war{--desk:"حرب"}
.sh-binder--desk-land{--desk:"أرض"}
.sh-binder--desk-economy{--desk:"اقتصاد"}
.sh-binder--desk-rights{--desk:"حقوق"}
.sh-binders__shelf{
  position:relative;display:flex;flex-wrap:nowrap;align-items:stretch;padding:8px 0 22px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.sh-binders__shelf::-webkit-scrollbar{display:none}
/* three in view with air between them; the shelf line under all of them is what ties them */
.sh-binder{
  position:relative;flex:0 0 calc((100% - 44px) / 3);min-width:0;scroll-snap-align:start;
  margin-inline-start:22px;padding-top:24px;
  transition:opacity .25s ease;
}
.sh-binder:first-child{margin-inline-start:0}
.sh-binder:hover,.sh-binder[data-open="true"]{z-index:20}
/* the shelf: every folder draws its stretch of the line; side by side they read as one shelf */
.sh-binder::after{content:"";position:absolute;left:-14px;right:-14px;bottom:-16px;height:1px;background:var(--sh-hair-2);pointer-events:none}
.sh-binders[data-active] .sh-binder:not([data-open="true"]){opacity:.7}
.sh-binder__open{
  position:relative;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:inherit;cursor:pointer;outline-offset:6px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.sh-binder__open:focus-visible{outline:2px solid var(--sh-blue)}
.sh-binder__open:hover{transform:translateY(-6px)}
.sh-binder[data-open="true"] .sh-binder__open{transform:translateY(-10px)}
.sh-binder__no{font-family:var(--sh-font);font-size:13px;font-weight:800;letter-spacing:.06em;direction:ltr;line-height:1}/* the spine, down the right edge */
.sh-binder__spine{
  position:absolute;top:0;bottom:0;right:0;z-index:1;width:28px;
  background:var(--accent);border-inline-start:1px solid rgba(0,0,0,.14);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;
}
.sh-binder__spine::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:rgba(255,255,255,.18)}
.sh-binder__spine .sh-mark{width:14px;height:12px;background:#fff;opacity:.9}
.sh-binder__stamp{
  position:absolute;top:8px;left:8px;z-index:3;padding:3px 9px;
  font-family:var(--sh-font);font-size:10.5px;font-weight:800;color:var(--accent-ink);
  background:rgba(255,255,255,.85);border:1.5px solid var(--accent-ink);
}
.sh-binder__stamp[hidden]{display:none}
.sh-binder__stamp--live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sh-red);margin-inline-end:6px;vertical-align:middle;animation:sh-bo-live 1.6s ease-in-out infinite}
@keyframes sh-bo-live{0%,100%{opacity:1}50%{opacity:.3}}
/* the label: white, typed */
.sh-binder__label{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;margin-top:auto;
  padding:10px 12px 11px;background:#fff;border:1px solid var(--sh-hair-2);
  border-inline-start:3px solid var(--sh-blue);
}
.sh-binder__label::before{content:var(--desk);font-family:var(--sh-font);font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--sh-mute);line-height:1}   /* the desk, typed */
.sh-binder__title{
  font-family:var(--sh-font);font-size:15px;font-weight:800;line-height:1.45;color:var(--sh-navy);text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sh-binder__meta{font-size:11.5px;line-height:1.55;color:var(--sh-mute)}
.sh-binder__meta b{font-weight:800;color:var(--accent-ink)}
.sh-binder__inside{display:none}
@media (max-width:900px){
  .sh-binder{flex-basis:calc((100% - 32px) / 3);margin-inline-start:16px}
  .sh-binder:first-child{margin-inline-start:0}
}
@media (max-width:640px){
  /* the rail: one folder in view and the edge of the next -- the invitation to scroll */
  .sh-binder{flex:0 0 72%;margin-inline-start:14px}
  .sh-binder__open:hover{transform:none}   /* the thumb does it */
}
@media (prefers-reduced-motion:reduce){
  .sh-binder,.sh-binder__open,.sh-binder__folder{transition:none}
  .sh-binder__stamp--live::before{animation:none}
}

/* ============================================================================
   sh-bo — the folder opened. What you see is the same folder, unfolded: its
   tab across the top (file, position, previous / next, close), its COVER
   laid flat -- the print, the number, the title, the count and the last
   update, the description, the stamp, the way to the full file -- and under
   it the SHEETS: every document in one list on white paper, numbered, with
   a thumbnail, a type and a date. The spine runs down the right edge with
   two rings, a few percent of the width: the binder as a signature. Opens
   in .35s from the folder; the content is readable at once.
   ========================================================================== */
html[data-sh-bo-open]{overflow:hidden}
.sh-bo{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.sh-bo[hidden]{display:none}
.sh-bo__veil{
  position:absolute;inset:0;background:rgba(10,26,51,.7);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  animation:sh-bo-veil .25s ease both;
}
.sh-bo[data-closing] .sh-bo__veil{animation:sh-bo-veil .2s ease reverse both}
@keyframes sh-bo-veil{from{opacity:0}}
.sh-bo__frame{
  position:relative;width:min(1040px,100%);max-width:100%;height:min(720px,100%);
  display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;   /* RTL: column 1 is the right edge, where the spine is */
  overflow:hidden;background:#fbfaf7;box-shadow:0 30px 80px rgba(0,0,0,.38);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease;
}
.sh-bo[data-closing] .sh-bo__frame{opacity:0;transform:translateY(8px)}
/* the spine, with its rings, down the right edge of everything */
.sh-bo__rail{grid-column:1;grid-row:1/-1;position:relative;background:var(--accent,#1b5aa6);border-inline-start:1px solid rgba(0,0,0,.14)}
.sh-bo__rail::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:rgba(255,255,255,.18)}
.sh-bo__ring{
  position:absolute;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;
  border:3px solid #e6e9ee;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);
}
.sh-bo__ring--1{top:26%}
.sh-bo__ring--2{bottom:26%}
/* the tab strip */
.sh-bo__bar{grid-column:2;display:flex;align-items:center;gap:10px;min-width:0;padding:8px 8px 8px 0;background:#fff;border-bottom:1px solid var(--sh-hair)}
.sh-bo__brand{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 14px;
  background:var(--accent,#1b5aa6);color:#fff;font-family:var(--sh-font);font-size:12.5px;font-weight:800;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% 100%,8px 100%);
}
.sh-bo__brand .sh-mark{width:14px;height:12px;background:#fff}
.sh-bo__pos{font-size:12.5px;color:var(--sh-mute);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.sh-bo__nav{margin-inline-start:auto;display:flex;gap:6px}
.sh-bo__turn{
  height:44px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--sh-hair-2);background:#fff;color:var(--sh-navy);
  font-family:var(--sh-font);font-size:12.5px;font-weight:800;cursor:pointer;transition:background .18s ease;
}
.sh-bo__turn:hover{background:var(--sh-hair-6)}
.sh-bo__turn:focus-visible,.sh-bo__close:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}
.sh-bo__close{
  width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--sh-hair-2);
  background:#fff;color:var(--sh-navy);font-size:24px;line-height:1;cursor:pointer;transition:background .18s ease;
}
.sh-bo__close:hover{background:var(--sh-hair-6)}
/* the cover, laid flat */
.sh-bo__cover{
  grid-column:2;position:relative;display:grid;grid-template-columns:168px minmax(0,1fr);gap:0 26px;align-items:start;
  padding:22px 26px 22px 26px;background:#fbfaf7;border-bottom:1px solid var(--sh-hair-2);
  animation:sh-bo-unfold .3s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sh-bo-unfold{from{opacity:.4;transform:scaleY(.94);transform-origin:top}}
.sh-bo__cover::after{content:"";position:absolute;inset:0;background:url(../assets/images/archive-texture.webp) center/cover;opacity:.06;mix-blend-mode:multiply;pointer-events:none}
.sh-bo__cover > *{position:relative;z-index:1}
.sh-bo__print{display:block;aspect-ratio:4/5;padding:5px;background:#fff;box-shadow:0 2px 8px rgba(10,26,51,.15);transform:rotate(-1.5deg)}
.sh-bo__print img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:cover;object-position:center top}
.sh-bo__print{position:relative}
.sh-bo__print--none{padding:0;background:none;box-shadow:none;transform:none;border:1px dashed color-mix(in srgb,var(--accent,#1b5aa6) 45%,transparent);display:grid;place-items:center}
.sh-bo__print--none .sh-mark{width:48px;height:40px;background:var(--accent,#1b5aa6);opacity:.28}
.sh-bo__id{display:flex;flex-direction:column;gap:10px;min-width:0}
.sh-bo__id-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sh-bo__id-no{font-family:var(--sh-font);font-size:40px;font-weight:800;line-height:1;color:var(--accent-ink,var(--sh-blue));direction:ltr}
.sh-bo__stamp{
  display:inline-block;padding:4px 10px;font-family:var(--sh-font);font-size:11.5px;font-weight:800;
  color:var(--accent-ink,var(--sh-navy));background:rgba(255,255,255,.85);border:1.5px solid var(--accent-ink,var(--sh-navy));white-space:nowrap;
}
.sh-bo__stamp[hidden]{display:none}
.sh-bo__stamp--live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sh-red);margin-inline-end:7px;vertical-align:middle;animation:sh-bo-live 1.6s ease-in-out infinite}
.sh-bo__id-title{font-family:var(--sh-font);font-size:26px;font-weight:800;line-height:1.4;margin:0;color:var(--sh-navy);text-wrap:balance}
.sh-bo__id-meta{font-size:12.5px;color:var(--sh-mute);font-variant-numeric:tabular-nums;margin:0}
.sh-bo__id-meta b{color:var(--accent-ink,var(--sh-navy));font-weight:800}
.sh-bo__id-desc{font-size:13.5px;line-height:1.8;color:var(--sh-ink-2);margin:0;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sh-bo__id-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.sh-bo__facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-size:12px;color:var(--sh-mute)}
.sh-bo__facts dt{display:inline}
.sh-bo__facts dd{display:inline;margin:0 0 0 4px;font-weight:700;color:var(--sh-navy);font-variant-numeric:tabular-nums}
.sh-bo__facts dd[data-sh-binder-state],.sh-bo__facts dt:has(+ dd[data-sh-binder-state]){display:none}   /* the state is the stamp */
.sh-bo__cta{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;
  background:var(--accent,#1b5aa6);color:#fff;font-family:var(--sh-font);font-size:12.5px;font-weight:800;
  transition:filter .18s ease;
}
.sh-bo__cta:hover{color:#fff;filter:brightness(1.12)}
.sh-bo__cta:focus-visible{outline:2px solid var(--sh-navy);outline-offset:2px}
.sh-bo__cta .sh-mark{width:14px;height:12px;background:#fff}
/* the sheets: the documents, on white paper, with two sheet edges showing at the top */
.sh-bo__docs{grid-column:2;position:relative;min-height:0;overflow:auto;background:#fff;padding:0 26px 16px;animation:sh-bo-fade .3s ease .08s both}
@keyframes sh-bo-fade{from{opacity:0}}
.sh-bo__docs-head{
  position:sticky;top:0;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 0 10px;background:#fff;border-bottom:1px solid var(--sh-hair-2);font-size:11.5px;color:var(--sh-mute);
}
.sh-bo__docs-head::before,.sh-bo__docs-head::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--sh-hair-2)}
.sh-bo__docs-head::before{top:3px}
.sh-bo__docs-head::after{top:7px;left:6px;right:6px}
.sh-bo__docs-head b{font-family:var(--sh-font);font-weight:800;color:var(--sh-navy);font-size:12.5px}
.sh-bo__list{list-style:none;margin:0;padding:0}
.sh-bo__doc{
  display:grid;grid-template-columns:26px 88px minmax(0,1fr);gap:0 14px;align-items:start;
  min-height:60px;padding:13px 0;border-bottom:1px solid var(--sh-hair-2);
}
.sh-bo__doc--noimg{grid-template-columns:26px 30px minmax(0,1fr)}
.sh-bo__doc-n{font-family:var(--sh-font);font-size:12px;font-weight:800;color:var(--accent-ink,var(--sh-blue));opacity:.7;font-variant-numeric:tabular-nums;direction:ltr;padding-top:3px}
.sh-bo__doc-thumb{display:block;width:88px;aspect-ratio:16/10;object-fit:cover;background:var(--sh-navy-2);border:1px solid var(--sh-hair-2)}
.sh-bo__doc-icon{width:30px;height:30px;display:grid;place-items:center;background:var(--sh-hair-6);color:var(--sh-blue);font-size:12px}   /* the tile is the box; the glyph stays 1em inside it */
.sh-bo__doc a{font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.55;color:var(--sh-ink);transition:color .16s ease}
.sh-bo__doc a:hover{color:var(--sh-blue)}
.sh-bo__doc a:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}
.sh-bo__doc-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:11.5px;color:var(--sh-mute)}
.sh-bo__doc-meta b{font-weight:800;color:var(--sh-blue)}
.sh-bo__empty{padding:28px 0;font-size:13px;color:var(--sh-mute)}
/* file to file */
.sh-bo__foot{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background:#fff;border-top:1px solid var(--sh-hair)}
.sh-bo__foot .sh-bo__pos{font-size:13px;color:var(--sh-navy);font-weight:700}

@media (max-width:760px){
  .sh-bo{padding:0}
  .sh-bo__frame{width:100%;height:100%;grid-template-columns:14px minmax(0,1fr)}
  .sh-bo__ring{width:12px;height:12px;margin-left:-6px;border-width:2px}
  .sh-bo__bar{padding:6px 6px 6px 0}
  .sh-bo__brand{height:40px;padding:0 10px 0 10px;font-size:12px}
  .sh-bo__brand span:last-child{display:none}
  .sh-bo__nav{display:none}      /* previous / next live in the foot on a phone */
  .sh-bo__cover{grid-template-columns:minmax(0,1fr) 84px;gap:4px 14px;padding:14px 16px 14px 14px;align-items:start}
  .sh-bo__print{grid-column:2;grid-row:1/span 3;aspect-ratio:4/5;padding:3px;transform:none}
  .sh-bo__print--none .sh-mark{width:32px;height:26px}
  .sh-bo__id{grid-column:1;gap:6px}
  .sh-bo__id-no{font-size:26px}
  .sh-bo__stamp{font-size:10.5px;padding:3px 8px;transform:none}
  .sh-bo__id-title{font-size:18px}
  .sh-bo__id-desc{display:none}
  .sh-bo__facts{display:none}
  .sh-bo__id-foot{grid-column:1/-1;margin-top:4px}
  .sh-bo__cta{margin-inline-start:0;width:100%;justify-content:center}
  .sh-bo__docs{padding:0 14px 14px}
  .sh-bo__docs-head{padding:12px 0 8px}
  .sh-bo__doc{grid-template-columns:22px 72px minmax(0,1fr);gap:0 10px;padding:12px 0}
  .sh-bo__doc-thumb{width:72px}
  .sh-bo__doc a{font-size:14px}
  .sh-bo__foot{padding:8px 10px}
  .sh-bo__turn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sh-bo__turn{padding:0}
}
@media (prefers-reduced-motion:reduce){
  .sh-bo__veil,.sh-bo__frame,.sh-bo__cover,.sh-bo__docs{animation:none;transition:none}
  .sh-bo__stamp--live::before{animation:none}
}

/* ============================================================================
   sh-say — «تصريحات خاصة». A statement is a person saying something, so every
   one is built the same way: the words between «», then the name and what
   the person is. Typographic on purpose: the site has no portraits of the
   speakers, only the posts' photographs, so nothing is masked into a circle
   pretending to be a face. The lead runs large on soft paper with the post's
   photograph beside it, clean-edged, the byline anchored at the foot; the
   side column and the row under it repeat the pattern smaller, words only.
   ========================================================================== */
.sh-say{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px 40px;margin-top:20px;align-items:stretch}
.sh-say__lead{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;
  background:var(--color-surface-warm);color:var(--sh-ink);overflow:hidden;
}
@media (hover:hover){.sh-say__lead:hover{color:var(--sh-ink)}}

.sh-say__photo{position:relative;display:block;overflow:hidden;background:var(--sh-navy);order:2}
.sh-say__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sh-say__lead:hover .sh-say__photo img{transform:scale(1.04)}
.sh-say__body{position:relative;display:flex;flex-direction:column;padding:26px 30px 24px;min-width:0}
.sh-say__tag{display:inline-flex;align-items:center;gap:8px;color:var(--sh-blue);font-family:var(--sh-font);font-size:11.5px;font-weight:800}
.sh-say__tag .sh-mark{width:14px;height:12px;background:var(--sh-blue)}
.sh-say__quote{
  font-family:var(--sh-font);font-size:clamp(20px,1.6vw,22px);font-weight:800;line-height:1.6;
  margin:16px 0 0;color:var(--sh-navy);text-wrap:pretty;
}
.sh-say__quote::before{content:"«"}
.sh-say__quote::after{content:"»"}
/* the byline, at the foot: a short blue rule, the name, what the person is */
.sh-say__who{display:flex;align-items:center;margin-top:auto;padding-top:22px}
.sh-say__id{display:flex;flex-direction:column;gap:3px;min-width:0;padding-inline-start:12px;border-inline-start:1px solid var(--sh-hair-2)}
.sh-say__name{font-family:var(--sh-font);font-size:15px;font-weight:800;color:var(--sh-navy)}
.sh-say__role{font-size:12px;color:var(--sh-mute)}
.sh-say__time{font-variant-numeric:tabular-nums}

.sh-say__side{display:flex;flex-direction:column}
.sh-say__item{display:block;padding:14px 0;border-bottom:1px solid var(--sh-hair);color:var(--sh-ink);transition:color .16s ease}
.sh-say__side .sh-say__item:first-child{padding-top:2px}
.sh-say__side .sh-say__item:last-child{border-bottom:0}
@media (hover:hover){.sh-say__item:hover{color:var(--sh-blue)}}
.sh-say__text{display:flex;flex-direction:column;gap:8px;min-width:0}
.sh-say__q{font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.75;text-wrap:pretty}
.sh-say__by{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.sh-say__by .sh-say__name{font-size:12px;white-space:nowrap}
.sh-say__by .sh-say__role{font-size:11.5px}

/* the row under the lead: three more, words only, a hairline between them */
.sh-say__row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--sh-hair-2)}
.sh-say__item--card{padding:20px 0 4px;border-bottom:0}
.sh-say__item--card + .sh-say__item--card{border-inline-start:1px solid var(--sh-hair);padding-inline-start:24px}

@media (max-width:900px){
  .sh-say{grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}
  .sh-say__lead{grid-template-columns:minmax(0,1fr)}
  .sh-say__photo{order:0;aspect-ratio:16/9}
  .sh-say__body{padding:20px 22px 22px}
  .sh-say__quote{font-size:19px;margin-top:14px}
  .sh-say__who{margin-top:18px;padding-top:0}
  .sh-say__row{grid-template-columns:minmax(0,1fr);gap:0}
  .sh-say__item--card{padding:14px 0;border-bottom:1px solid var(--sh-hair)}
  .sh-say__item--card + .sh-say__item--card{border-inline-start:0;padding-inline-start:0}
}
@media (prefers-reduced-motion:reduce){.sh-say__photo img{transition:none}}

/* ============================================================================
   .sh-pagehead — the light opening the utility pages share (contact, saved,
   data, map, now, newsletter).

   On the white, in the grammar the section, tag and search pages carry: the
   breadcrumb, the title large, one line under it, an optional tools slot on
   the far side (a clock, a count, a button), then either a row of live figures
   between two hairlines or a row of tabs. No navy band, no blade beside the
   title. The four approved pages carry their own stages and never use it.
   ========================================================================== */
.sh-pagehead{position:relative;padding-top:24px}
.sh-pagehead__in{padding:0}
.sh-pagehead__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-family:var(--sh-font);font-size:14px;color:var(--sh-mute)}
.sh-pagehead__crumbs a{color:var(--sh-mute)}
.sh-pagehead__crumbs a::after{content:"/";margin-inline-start:9px;color:var(--color-text-faint)}
@media (hover:hover){.sh-pagehead__crumbs a:hover{color:var(--sh-blue)}}
.sh-pagehead__crumbs span{color:var(--sh-navy);font-weight:700}
.sh-pagehead__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-top:12px}
.sh-pagehead__lead{flex:1 1 480px;min-width:0}
.sh-pagehead__title{margin:0;font-family:var(--sh-font);font-size:clamp(38px,4.2vw,56px);font-weight:800;line-height:1.15;color:var(--sh-navy);text-wrap:balance}
.sh-pagehead__sub{margin:12px 0 0;font-family:var(--sh-font);font-size:18px;line-height:1.8;color:var(--sh-ink-2);max-width:70ch;text-wrap:pretty}
/* the tools row may hold a clock, a status and a button: it wraps inside the
   column rather than running past it on a phone */
.sh-pagehead__tools{flex:0 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;min-width:0;max-width:100%}
/* live figures: large numbers between two hairlines, one column each */
.sh-pagehead__stats{list-style:none;display:grid;grid-template-columns:repeat(var(--sh-ph-cols,4),minmax(0,1fr));gap:0;margin:28px 0 0;padding:22px 0;border-block:1px solid var(--color-border-soft)}
.sh-pagehead__stats li{display:flex;flex-direction:column;gap:8px;min-width:0}
.sh-pagehead__stats li + li{padding-inline-start:28px;border-inline-start:1px solid var(--color-border-soft)}
.sh-pagehead__stats li:not(:last-child){padding-inline-end:28px}
.sh-pagehead__stats b{font-family:var(--sh-font);font-size:clamp(34px,3.4vw,44px);font-weight:800;line-height:1;color:var(--sh-navy);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;text-align:right}
.sh-pagehead__stats span{font-family:var(--sh-font);font-size:16px;line-height:1.6;color:var(--sh-ink-2);text-wrap:pretty}
.sh-pagehead__stats em{font-style:normal;font-weight:700;color:var(--sh-red)}
/* tabs: the page's neighbours, underlined in blue where the reader is */
.sh-pagehead__rail{display:flex;flex-wrap:wrap;gap:0 30px;margin:24px 0 0;border-bottom:1px solid var(--color-border-soft)}
.sh-pagehead__rail a{display:inline-flex;align-items:center;min-height:48px;margin-bottom:-1px;border-bottom:2px solid transparent;font-family:var(--sh-font);font-size:17px;font-weight:700;color:var(--sh-ink-2);white-space:nowrap}
@media (hover:hover){.sh-pagehead__rail a:hover{color:var(--sh-blue)}}
.sh-pagehead__rail a[aria-current]{color:var(--sh-navy);border-bottom-color:var(--sh-blue)}
.sh-pagehead__rail a:focus-visible,.sh-pagehead__crumbs a:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}
.sh-pagehead__stats + .sh-pagehead__rail{margin-top:0}
.sh-pagehead__stamp{display:inline-flex;align-items:center;gap:8px;font-family:var(--sh-font);font-size:16px;font-weight:700;color:var(--sh-ink-2);font-variant-numeric:tabular-nums}
.sh-pagehead__stamp[hidden]{display:none}
.sh-pagehead__btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:1px solid var(--sh-navy);background:#fff;color:var(--sh-navy);font-family:var(--sh-font);font-size:15px;font-weight:700;cursor:pointer;transition:background .18s ease,color .18s ease}
@media (hover:hover){.sh-pagehead__btn:hover{background:var(--sh-navy);color:#fff}}
.sh-pagehead__btn:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}
.sh-pagehead__btn[hidden]{display:none}
.sh-pagehead__btn .sh-i{font-size:14px}
.sh-pagehead__clock{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--sh-font)}
.sh-pagehead__clock b{font-size:30px;font-weight:800;line-height:1;color:var(--sh-navy);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.sh-pagehead__clock span{font-size:15px;font-weight:700;color:var(--sh-mute)}
.sh-pagehead__live{display:inline-flex;align-items:center;gap:8px;font-family:var(--sh-font);font-size:15px;font-weight:700;color:var(--sh-ink-2)}
.sh-pagehead__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--sh-red)}
@media (max-width:760px){
  .sh-pagehead{padding-top:18px}
  .sh-pagehead__crumbs{font-size:13px}
  .sh-pagehead__head{margin-top:8px;gap:14px}
  .sh-pagehead__title{font-size:32px}
  .sh-pagehead__sub{margin-top:8px;font-size:16px;line-height:1.75}
  .sh-pagehead__stats{margin-top:20px;padding:16px 0}
  .sh-pagehead__stats li + li{padding-inline-start:14px}
  .sh-pagehead__stats li:not(:last-child){padding-inline-end:14px}
  .sh-pagehead__stats b{font-size:26px}
  .sh-pagehead__stats span{font-size:13.5px;line-height:1.5}
  .sh-pagehead__rail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0 22px;margin-inline:calc(var(--sh-gutter,16px) * -1);padding-inline:var(--sh-gutter,16px)}
  .sh-pagehead__rail::-webkit-scrollbar{display:none}
  .sh-pagehead__rail a{flex:none;font-size:16px}
  .sh-pagehead__clock b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.sh-pagehead__btn,.sh-pagehead__rail a{transition:none}}

/* A picture that used to be a CSS background. It is an element now so that a
   failure reaches js/app.js and gets the «بلا صورة» plate — a background never
   fires an error event. The plate copies this class onto itself, which is what
   keeps it filling the same frame. */
.sh-bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================================================================
   REVEAL CARD — .sh-reveal (files.html, sections.html)
   The card is its picture. On a pointer screen the words wait under it and rise
   into it on hover or keyboard focus: the picture eases in (1.06), a navy veil
   climbs from the foot (strong at the bottom, gone by the upper third), the
   title rises, the date follows a beat later, and the card lifts 4px. Only
   transform, opacity and box-shadow move, so nothing around it reflows.
   An optional __cat is a blue plate in the corner that stays at rest — for a
   card whose picture alone does not say what it is (a section, a desk).
   On touch screens from 768px the veil and the words are simply there; under
   768px the card is a row, a 4:3 picture beside its words.
     <a class="sh-reveal" style="--rv-ratio:4/5">
       <span class="sh-reveal__pic"><img></span>
       <span class="sh-reveal__cat">…</span>                      optional
       <span class="sh-reveal__body"><span class="sh-reveal__title">…</span><span class="sh-reveal__meta">…</span></span>
     </a>
   ========================================================================== */
.sh-reveal{--rv-ease:cubic-bezier(.22,1,.36,1);position:relative;display:block;min-width:0;color:#fff;isolation:isolate}
@media (hover:hover){.sh-reveal:hover{color:#fff}}   /* base.css a:hover would repaint the white words blue */
.sh-reveal__pic{position:relative;display:block;overflow:hidden;aspect-ratio:var(--rv-ratio,16/9);background:var(--sh-navy-2)}
.sh-reveal__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--rv-ease)}
.sh-reveal__pic::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,26,51,.9) 0%,rgba(10,26,51,.62) 24%,rgba(10,26,51,.16) 50%,rgba(10,26,51,0) 66%);pointer-events:none;transition:opacity .38s var(--rv-ease)}
.sh-reveal__cat{position:absolute;top:14px;inset-inline-start:14px;z-index:3;padding:5px 12px;background:var(--sh-blue);color:#fff;font-family:var(--sh-font);font-size:15px;font-weight:700;line-height:1.4;pointer-events:none}
.sh-reveal__body{position:absolute;inset:auto 0 0 0;z-index:2;display:flex;flex-direction:column;gap:4px;padding:0 20px 18px;pointer-events:none}
.sh-reveal__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:var(--sh-font);font-size:20px;font-weight:800;line-height:1.4;color:#fff;text-wrap:pretty}
.sh-reveal__meta{display:block;font-family:var(--sh-font);font-size:14px;line-height:1.5;color:var(--sh-on-dark-80);font-variant-numeric:tabular-nums}
.sh-reveal:focus-visible{outline:2px solid var(--sh-blue);outline-offset:3px}

@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .sh-reveal{transition:transform .45s var(--rv-ease),box-shadow .45s var(--rv-ease)}
  /* at rest: the picture alone; the veil is a breath at the foot, the words wait below */
  .sh-reveal__pic::after{opacity:.16}
  .sh-reveal__title,.sh-reveal__meta{opacity:0;transform:translateY(16px);transition:opacity .3s var(--rv-ease),transform .42s var(--rv-ease)}
  .sh-reveal__meta{transform:translateY(12px)}
  /* hover and keyboard focus: one coordinated move; the stagger is on the way in only */
  .sh-reveal:hover,.sh-reveal:focus-visible{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(10,26,51,.55)}
  .sh-reveal:hover .sh-reveal__pic img,.sh-reveal:focus-visible .sh-reveal__pic img{transform:scale(1.06)}
  .sh-reveal:hover .sh-reveal__pic::after,.sh-reveal:focus-visible .sh-reveal__pic::after{opacity:1}
  .sh-reveal:hover .sh-reveal__title,.sh-reveal:focus-visible .sh-reveal__title,
  .sh-reveal:hover .sh-reveal__meta,.sh-reveal:focus-visible .sh-reveal__meta{opacity:1;transform:none}
  .sh-reveal:hover .sh-reveal__title,.sh-reveal:focus-visible .sh-reveal__title{transition-delay:40ms}
  .sh-reveal:hover .sh-reveal__meta,.sh-reveal:focus-visible .sh-reveal__meta{transition-delay:110ms}
}
@media (max-width:767px){
  .sh-reveal{display:grid;grid-template-columns:136px minmax(0,1fr);grid-auto-rows:auto;align-content:center;gap:2px 14px;color:var(--sh-ink)}
  .sh-reveal__pic{grid-row:1/span 3;aspect-ratio:4/3}
  .sh-reveal__pic::after{display:none}
  .sh-reveal__cat{position:static;align-self:end;padding:0;background:none;color:var(--sh-blue);font-size:13px}
  .sh-reveal__body{position:static;gap:2px;padding:0}
  .sh-reveal__title{-webkit-line-clamp:3;font-size:17px;line-height:1.5;color:var(--sh-navy)}   /* beside a small picture a third line costs nothing */
  .sh-reveal__meta{font-size:13px;color:var(--sh-mute)}
}
@media (prefers-reduced-motion:reduce){
  /* the words still come, as a plain quick fade: no zoom, no rise, no lift, no stagger */
  .sh-reveal,.sh-reveal__pic img{transition:none!important;transform:none!important}
  .sh-reveal:hover,.sh-reveal:focus-visible{box-shadow:none}
  .sh-reveal__title,.sh-reveal__meta{transform:none!important;transition:opacity .15s linear!important;transition-delay:0s!important}
}

/* ============================================================================
   LEGAL DOCUMENT — .sh-legal-head + .sh-legal (privacy.html, terms.html)
   A light head (crumbs, title, dek, last update and the twin document), then
   three columns: a sticky index of the numbered sections, the text on a
   reading measure, and a sticky «باختصار» — the document in four lines with
   the way to reach the agency. Under 1100px the brief moves above the text and
   the index lies flat as a scrolling row; nothing is framed but the brief's tint.
   ========================================================================== */
.sh-legal-head{padding-top:24px}
.sh-legal-head__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-family:var(--sh-font);font-size:14px;color:var(--sh-mute)}
.sh-legal-head__crumbs a{color:var(--sh-mute)}
.sh-legal-head__crumbs a::after{content:"/";margin-inline-start:9px;color:var(--color-text-faint)}
@media (hover:hover){.sh-legal-head__crumbs a:hover{color:var(--sh-blue)}}
.sh-legal-head__crumbs span{color:var(--sh-navy);font-weight:700}
.sh-legal-head__title{margin:12px 0 0;font-family:var(--sh-font);font-size:clamp(34px,3.6vw,48px);font-weight:800;line-height:1.2;color:var(--sh-navy)}
.sh-legal-head__dek{margin:10px 0 0;font-family:var(--sh-font);font-size:18px;line-height:1.8;color:var(--sh-ink-2);text-wrap:pretty}
.sh-legal-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin:12px 0 0;font-family:var(--sh-font);font-size:15px;color:var(--sh-mute)}
.sh-legal-head__meta a{font-weight:700;color:var(--sh-blue)}
@media (hover:hover){.sh-legal-head__meta a:hover{color:var(--sh-navy)}}

.sh-legal{display:grid;grid-template-columns:240px minmax(0,1fr) 320px;gap:48px;align-items:start;margin:40px 0 64px}
.sh-legal__index,.sh-legal__brief{position:sticky;top:calc(var(--sh-compact-h,100px) + 26px)}
.sh-legal__index{display:flex;flex-direction:column}
.sh-legal__index-h{margin-bottom:8px;font-family:var(--sh-font);font-size:14px;font-weight:700;color:var(--sh-mute)}
.sh-legal__index a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:baseline;padding:9px 0;font-family:var(--sh-font);font-size:16px;font-weight:700;line-height:1.45;color:var(--sh-ink-2)}
.sh-legal__index a b{font-weight:800;color:var(--sh-blue);font-variant-numeric:tabular-nums}
@media (hover:hover){.sh-legal__index a:hover{color:var(--sh-blue)}}
.sh-legal__index a:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}

.sh-legal__doc{min-width:0;max-width:68ch;font-family:var(--sh-font);font-size:18px;line-height:2;color:var(--sh-ink)}
.sh-legal__lede{margin:0;font-size:19px;line-height:1.95;color:var(--sh-navy);text-wrap:pretty}
.sh-legal__sec{padding-top:36px;scroll-margin-top:calc(var(--sh-compact-h,100px) + 26px)}
.sh-legal__sec h2{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font-family:var(--sh-font);font-size:clamp(22px,2vw,26px);font-weight:800;line-height:1.4;color:var(--sh-navy)}
.sh-legal__sec h2 b{font-size:.8em;font-weight:800;color:var(--sh-blue);font-variant-numeric:tabular-nums}
.sh-legal__sec p{margin:0 0 14px;text-wrap:pretty}
.sh-legal__sec ul{margin:0 0 14px;padding-inline-start:22px}
.sh-legal__sec li{margin-bottom:6px;padding-inline-start:4px;text-wrap:pretty}
.sh-legal__sec li::marker{color:var(--sh-blue)}
.sh-legal__doc a{font-weight:700;color:var(--sh-blue)}
@media (hover:hover){.sh-legal__doc a:hover{color:var(--sh-navy)}}

.sh-legal__brief{padding:24px;background:var(--color-surface-soft)}
.sh-legal__brief-h{margin:0 0 10px;font-family:var(--sh-font);font-size:22px;font-weight:800;color:var(--sh-navy)}
.sh-legal__brief ul{list-style:none;margin:0;padding:0}
.sh-legal__brief li{padding:10px 0;font-family:var(--sh-font);font-size:16px;font-weight:700;line-height:1.6;color:var(--sh-navy)}
.sh-legal__brief li + li{border-top:1px solid var(--color-border)}
.sh-legal__brief-p{margin:16px 0 0;font-family:var(--sh-font);font-size:15px;line-height:1.7;color:var(--sh-ink-2)}
.sh-legal__cta,.sh-legal__cta:hover{color:#fff}   /* base.css a:hover would paint the label blue on blue */
.sh-legal__cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:12px;background:var(--sh-navy);font-family:var(--sh-font);font-size:16px;font-weight:800}
@media (hover:hover){.sh-legal__cta:hover{background:var(--sh-blue);gap:14px}}
.sh-legal__cta:focus-visible{outline:2px solid var(--sh-blue);outline-offset:3px}

@media (max-width:1100px){
  .sh-legal{grid-template-columns:220px minmax(0,1fr);gap:40px}
  .sh-legal__brief{position:static;grid-column:2;grid-row:1}
  .sh-legal__doc{grid-column:2}
  .sh-legal__index{grid-row:1/span 2}
}
@media (max-width:767px){
  .sh-legal{grid-template-columns:minmax(0,1fr);gap:24px;margin:24px 0 48px}
  .sh-legal__index{position:static;grid-row:auto;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:8px;margin-inline:calc(var(--sh-gutter,16px) * -1);padding-inline:var(--sh-gutter,16px)}
  .sh-legal__index::-webkit-scrollbar{display:none}
  .sh-legal__index-h{display:none}
  .sh-legal__index a{flex:none;display:inline-flex;gap:6px;min-height:44px;align-items:center;padding:0 14px;background:var(--color-surface-soft);font-size:15px;white-space:nowrap}
  .sh-legal__brief,.sh-legal__doc{grid-column:auto;grid-row:auto}
  .sh-legal__index{order:-2}
  .sh-legal__brief{order:-1}   /* on a phone the four-line brief comes before the full text */
  .sh-legal__brief{padding:18px}
  .sh-legal__doc{font-size:17px;line-height:1.95}
  .sh-legal__lede{font-size:17px}
  .sh-legal__sec{padding-top:28px}
}
@media (max-width:640px){
  .sh-legal-head{padding-top:18px}
  .sh-legal-head__crumbs{font-size:13px}
  .sh-legal-head__dek{font-size:16px;margin-top:6px}
}