/* شهاب — index: page layout, one-off styles (scoped by section), and what
   the old per-page sheet still owned (keyframes, p/input, its own a{transition}). */
p{font-family:var(--sh-serif);line-height:1.95;letter-spacing:0}
h1,h2,h3{letter-spacing:-.005em}
a{transition:color .16s ease,opacity .16s ease,border-color .16s ease}
@keyframes sh-progress{0%{width:0}100%{width:100%}}
@keyframes sh-cover-open{0%{transform:perspective(1400px) rotateY(-88deg);opacity:.2}55%{opacity:1}100%{transform:perspective(1400px) rotateY(0);opacity:1}}
@keyframes sh-paper-out{0%{transform:translateX(28%);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes sh-lens-in{0%{opacity:0;transform:scale(1.04)}100%{opacity:1;transform:none}}
@keyframes sh-line-in{0%{transform:translateY(10px);opacity:0}100%{transform:none;opacity:1}}
@keyframes sh-fadein{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.sh-index-hero__section-1{display:grid;grid-template-columns:minmax(0,1fr);padding:32px 0 0}   /* the slider has the row to itself: five stories, no rail */
.sh-index-hero__div-1{display:flex;height:500px;background:var(--sh-navy);color:#fff;position:relative;overflow:hidden}
.sh-index-hero__a-1{position:relative;overflow:hidden;display:block;color:#fff;flex-basis:64px;flex-grow:0;min-width:64px;transition:flex-grow .8s cubic-bezier(.2,.75,.2,1);cursor:pointer;border-right:1px solid rgba(255,255,255,.22);background:var(--sh-navy-2)}
@media (hover:hover){.sh-index-hero__a-1:hover{color:#fff}}
.sh-index-hero__span-1{position:absolute;inset:0;opacity:0.5;transform:scale(1);filter:none;transition:transform .8s ease,opacity .8s ease}
.sh-index-hero__span-1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.sh-index-hero__span-2{position:absolute;inset:0;background:var(--sh-navy-2);opacity:0.4;transition:opacity .8s ease;pointer-events:none}
.sh-index-hero__span-3{position:absolute;top:0;right:0;bottom:0;width:64px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:22px 0 20px;opacity:1;transition:opacity .4s ease;pointer-events:none}
.sh-index-hero__span-4{font-family:var(--sh-font);font-size:12px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.35);width:22px;text-align:center}
.sh-index-hero__span-5{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sh-font);font-size:13px;font-weight:700;line-height:1.3;max-height:300px;overflow:hidden;color:#fff;letter-spacing:.01em}
.sh-index-hero__span-6{position:absolute;top:20px;right:24px;background:var(--sh-navy);color:#fff;font-size:11.5px;padding:5px 10px;opacity:0;transition:opacity .5s ease .3s;white-space:nowrap;display:flex;align-items:center;gap:8px}
.sh-index-hero__div-2{position:absolute;inset:auto 0 0 0;background:var(--color-scrim);padding:14px 24px 0;opacity:0;transform:translateY(24px);transition:opacity .5s ease .25s,transform .6s cubic-bezier(.2,.7,.2,1) .2s;min-width:min(640px,100%);pointer-events:none}
.sh-index-hero__div-3{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--sh-on-dark-72);white-space:nowrap}
.sh-index-hero__span-7{background:transparent;color:var(--color-brand-sky);box-shadow:inset 0 0 0 1px var(--color-on-dark-line);padding:3px 9px;font-weight:700;font-family:var(--sh-font);font-size:11.5px}
.sh-index-hero__span-8{color:#fff}
.sh-index-hero__span-9{margin-right:auto;font-variant-numeric:tabular-nums;color:var(--sh-on-dark-55)}
.sh-index-hero__div-4{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;margin:8px 0 12px}
.sh-index-hero__h1-1{flex:1 1 360px;min-width:0;font-family:var(--sh-font);font-size:26px;font-weight:700;line-height:1.5;margin:0;text-wrap:pretty;color:#fff}
.sh-index-hero__span-10{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:#fff;font-family:var(--sh-font);white-space:nowrap;padding-bottom:4px}
.sh-index-hero__span-11{display:none}
.sh-index-hero__span-12{display:block;height:1px;background:var(--sh-on-dark-14);position:relative}
.sh-index-hero__span-13{position:absolute;right:0;top:0;height:100%;background:var(--sh-blue);width:0;animation:none;animation-play-state:running}
.sh-index-hero__a-2{position:relative;overflow:hidden;display:block;color:#fff;flex-basis:64px;flex-grow:1;min-width:64px;transition:flex-grow .8s cubic-bezier(.2,.75,.2,1);cursor:pointer;border-right:1px solid rgba(255,255,255,.22);background:var(--sh-navy-2)}
@media (hover:hover){.sh-index-hero__a-2:hover{color:#fff}}
.sh-index-hero__span-14{position:absolute;inset:0;opacity:1;transform:scale(1);filter:none;transition:transform .8s ease,opacity .8s ease}
.sh-index-hero__span-14 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.sh-index-hero__span-15{position:absolute;inset:0;background:var(--sh-navy-2);opacity:0;transition:opacity .8s ease;pointer-events:none}
.sh-index-hero__span-16{position:absolute;top:0;right:0;bottom:0;width:64px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:22px 0 20px;opacity:0;transition:opacity .4s ease;pointer-events:none}
.sh-index-hero__span-17{position:absolute;top:20px;right:24px;background:var(--sh-navy);color:#fff;font-size:11.5px;padding:5px 10px;opacity:1;transition:opacity .5s ease .3s;white-space:nowrap;display:flex;align-items:center;gap:8px}
.sh-index-hero__div-5{position:absolute;inset:auto 0 0 0;background:var(--color-scrim);padding:14px 24px 0;opacity:1;transform:translateY(0px);transition:opacity .5s ease .25s,transform .6s cubic-bezier(.2,.7,.2,1) .2s;min-width:min(640px,100%);pointer-events:none}
.sh-index-hero__span-18{background:var(--sh-red);color:#fff;padding:3px 9px;font-weight:700;font-family:var(--sh-font);font-size:11.5px}
.sh-index-hero__span-19{position:absolute;right:0;top:0;height:100%;background:var(--sh-blue);width:0;animation:none}
.sh-index-hero__span-20{position:absolute;inset:0;opacity:0.5;transform:scale(1);filter:none;transition:transform .8s ease,opacity .8s ease}
.sh-index-hero__span-20 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.sh-index-hero__div-6{position:absolute;bottom:22px;inset-inline-end:28px;display:flex;gap:8px;z-index:2}
/* full width the open slide is ~1080 wide at 1400 with four 64px spines;
   540 tall keeps it at 2:1 instead of a thin letterbox */
@media (min-width:1400px){.sh-index-hero__div-1{height:540px}}
.sh-index-live-coverage__section-1{padding:0 0 64px}
.sh-index-live-coverage__div-1{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:12px;border-bottom:1px solid var(--sh-hair-2)}
.sh-index-live-coverage__div-2{display:flex;align-items:center;gap:12px}
.sh-index-live-coverage__h2-1{font-family:var(--sh-font);font-size:20px;font-weight:700;margin:0;line-height:1.2}
.sh-index-live-coverage__story{font-size:15px;font-weight:700;color:var(--sh-ink-2);margin-inline-start:10px;white-space:nowrap}
.sh-index-live-coverage__story::before{content:"·";margin-inline-end:10px;color:var(--sh-grey-3)}
.sh-index-live-coverage__span-1{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--color-red-soft);font-size:11.5px;font-weight:700;padding:3px 9px;font-family:var(--sh-font)}
.sh-index-live-coverage__span-2{width:6px;height:6px;background:var(--color-red-soft);border-radius:50%;animation:sh-pulse 1.4s ease-in-out infinite}
.sh-index-live-coverage__a-1{display:inline-flex;align-items:center;gap:8px;background:none;color:currentColor;border:0;font-size:12px;font-weight:800;line-height:1;padding:8px 0;font-family:var(--sh-font);text-underline-offset:5px;text-decoration-thickness:1px}
@media (hover:hover){.sh-index-live-coverage__a-1:hover{color:currentColor;text-decoration:underline}}
.sh-index-live-coverage__span-3{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-index-live-coverage__a-1:hover .sh-index-live-coverage__span-3{transform:translateX(-3px)}
/* ---- التغطية الحية: one unit. The photograph carries the story's headline
       (the reports-lead pattern), the timeline beside it is exactly the
       photo's height — six rows share it, the feed trims to six — and type
       does the separating: no filled chips, no row icons. --sh-lc-spine
       derives the time column, the hairline and the nodes from one number. */
.sh-lc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 48px;align-items:stretch;margin-top:20px}
.sh-lc__lead{display:flex;flex-direction:column;gap:14px;color:var(--sh-ink)}
.sh-lc__lead-pic{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:var(--sh-navy-2)}
/* the poster keeps moving, slowly: a 44-second drift out and back, the same
   gesture as the Gaza coast. It reads as a live frame without a GIF (which
   would weigh megabytes and lose the poster's colours) and stops under
   prefers-reduced-motion below. The hover zoom went: an animation on
   transform overrides it anyway. */
.sh-lc__lead-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;animation:sh-lc-drift 44s ease-in-out infinite alternate}
@keyframes sh-lc-drift{from{transform:scale(1) translateX(0)}to{transform:scale(1.06) translateX(-1.2%)}}
@media (hover:hover){.sh-lc__lead:hover .sh-lc__lead-t{color:var(--sh-blue)}}
.sh-lc__lead:focus-visible{outline:2px solid var(--sh-sky);outline-offset:-4px}
/* the update the reader is pointing at owns the strip under the headline */
.sh-lc__lead-meta[data-answered] [data-sh-lc-where]{display:none}
.sh-lc__lead-body{display:flex;flex-direction:column;gap:9px}
.sh-lc__lead-t{font-family:var(--sh-font);font-size:clamp(19px,1.5vw,21px);font-weight:800;line-height:1.45;text-wrap:balance;transition:color .16s ease}
.sh-lc__lead-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--sh-font);font-size:12px;color:var(--sh-mute);font-variant-numeric:tabular-nums}
.sh-lc__lead-dot{width:7px;height:7px;border-radius:50%;background:var(--sh-red);animation:sh-pulse 1.6s ease-in-out infinite;flex:none}
.sh-lc__col{display:flex;flex-direction:column;min-height:0}
.sh-lc__col-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--sh-hair)}
.sh-lc__label{font-family:var(--sh-font);font-size:13px;font-weight:800;color:var(--sh-navy)}
.sh-lc__status{font-family:var(--sh-font);font-size:11.5px;color:var(--sh-mute);white-space:nowrap}
.sh-lc__status[data-bad]{color:var(--color-red-soft)}
.sh-lc__list{--sh-lc-spine:52px;position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.sh-lc__list::before{content:"";position:absolute;top:10px;bottom:10px;inset-inline-start:var(--sh-lc-spine);width:1px;background:var(--sh-hair-2)}
.sh-lc__row{position:relative;display:grid;grid-template-columns:var(--sh-lc-spine) minmax(0,1fr);column-gap:16px;align-items:start;flex:1 1 0;min-height:0;padding:9px 0;border-bottom:1px solid var(--sh-hair);color:var(--sh-ink);animation:sh-fadein .4s ease both}
.sh-lc__row:last-of-type{border-bottom:0}
/* the column is exactly the photograph tall; when the new-updates button takes a
   place in it, the oldest row gives its place up instead of every row shrinking */
.sh-lc__list:has(.sh-feed-pill) .sh-lc__row:nth-last-of-type(2){border-bottom:0}
/* at the large type size the six rows want 7px more than the photograph gives
   them; four pixels off each row's padding is what it takes, and nothing else on
   the page needed a hand */
html[data-sh-type="lg"] .sh-lc__row{padding:5px 0}
.sh-lc__list:has(.sh-feed-pill) .sh-lc__row:last-of-type{display:none}
@media (hover:hover){.sh-lc__row:hover{color:var(--sh-blue)}}
.sh-lc__row:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}
.sh-lc__time{padding-top:2px;font-family:var(--sh-font);font-size:12px;font-weight:700;color:var(--sh-mute);white-space:nowrap}
.sh-lc__node{position:absolute;top:14px;inset-inline-start:var(--sh-lc-spine);margin-inline-start:-4px;width:9px;height:9px;background:#fff;border:1.5px solid var(--sh-hair-2);transform:rotate(45deg);transition:background .16s ease,border-color .16s ease}
.sh-lc__row:hover .sh-lc__node{background:var(--sh-blue);border-color:var(--sh-blue)}
.sh-lc__row:first-of-type .sh-lc__node,.sh-lc__row[data-breaking] .sh-lc__node{background:var(--sh-red);border-color:var(--sh-red);animation:sh-pulse 1.6s ease-in-out infinite}
.sh-lc__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.sh-lc__cat{display:flex;align-items:center;gap:8px;font-family:var(--sh-font);font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--sh-blue)}
.sh-lc__row[data-breaking] .sh-lc__cat{color:var(--sh-red)}
.sh-lc__row[data-new] .sh-lc__cat::after{content:"جديد";color:var(--sh-red)}
.sh-lc__t{font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.55;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .16s ease}
.sh-lc__row:hover .sh-lc__t{color:var(--sh-blue)}
/* the answering node stays red over the hover blue: it marks which update the strip is reading */
.sh-lc__row[data-answering] .sh-lc__node{background:var(--sh-red);border-color:var(--sh-red)}
.sh-lc__row[data-answering] .sh-lc__time{color:var(--sh-red)}
.sh-index-files__section-1{padding:64px 0 40px}   /* the shelf closes on a dark band, so the white below it is half the usual gap */
@media (max-width:640px){
  .sh-index-files__section-1{padding:44px 0 44px}
}
.sh-index-files__div-1{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--sh-hair-2);padding-bottom:12px}
.sh-index-files__div-2{display:flex;align-items:center;gap:12px}
.sh-index-files__h2-1{font-family:var(--sh-font);font-size:20px;font-weight:700;margin:0;line-height:1;color:var(--sh-navy)}
.sh-index-files__div-3{display:grid;grid-template-columns:72px minmax(0,1.05fr) minmax(0,.95fr) 72px 72px 72px;min-height:420px;margin-top:20px;background:var(--color-surface-warm)}
.sh-index-files__a-1{background:var(--sh-navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:20px 0 18px;position:relative;cursor:default;animation:sh-fadein .5s ease both;z-index:3}
@media (hover:hover){.sh-index-files__a-1:hover{background:var(--sh-navy);color:#fff}}   /* base.css a:hover would repaint the open spine's label */
.sh-index-files__a-1::after{content:"";flex:none;height:30px}   /* the foot slot the closed spines fill with their kind label, so every title centres alike */
.sh-index-files__span-1{position:absolute;top:0;right:0;bottom:0;width:3px;background:var(--sh-blue)}
.sh-index-files__span-2{font-family:var(--sh-font);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.4);width:26px;text-align:center}
.sh-index-files__span-3{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sh-font);font-size:14px;font-weight:700;letter-spacing:.01em}
.sh-index-files__a-2{position:relative;display:block;background:var(--sh-navy);color:#fff;perspective:1400px;z-index:2}
@media (hover:hover){.sh-index-files__a-2:hover{color:#fff}}
.sh-index-files__span-4{position:absolute;inset:0;transform-origin:right center;animation:sh-cover-open .9s cubic-bezier(.2,.75,.2,1) both;background:var(--sh-navy);box-shadow:-10px 0 26px rgba(10,26,51,.28)}
.sh-index-files__span-5{position:absolute;inset:0;background-image:url(../../assets/images/file-raheel-aldaif.webp);background-size:cover;background-position:center 30%}
.sh-index-files__span-6{position:absolute;top:18px;right:18px;background:var(--sh-navy);color:#fff;font-size:11.5px;font-weight:700;padding:5px 10px;display:flex;align-items:center;gap:8px;font-family:var(--sh-font)}
.sh-index-files__a-3{position:relative;overflow:hidden;display:flex;flex-direction:column;color:var(--sh-ink);background:var(--color-surface)}
@media (hover:hover){.sh-index-files__a-3:hover{color:var(--sh-ink)}}
.sh-index-files__img-1{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom;opacity:.22}
.sh-index-files__div-4{position:relative;display:flex;flex-direction:column;flex:1;padding:26px 28px 24px;animation:sh-paper-out .7s cubic-bezier(.2,.75,.2,1) .15s both}
.sh-index-files__div-5{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--color-text-muted)}
.sh-index-files__span-7{background:var(--sh-navy);color:#fff;padding:3px 9px;font-weight:700;font-family:var(--sh-font)}
.sh-index-files__h3-1{font-family:var(--sh-font);font-size:22px;font-weight:700;line-height:1.5;margin:14px 0 8px;color:var(--sh-navy);text-wrap:pretty;animation:sh-line-in .5s ease .45s both}
.sh-index-files__p-1{font-size:13px;line-height:1.75;color:var(--color-text-2);margin:0 0 18px;text-wrap:pretty;animation:sh-line-in .5s ease .55s both}
.sh-index-files__div-6{display:flex;flex-direction:column;border-top:1px solid var(--sh-hair)}
.sh-index-files__span-8{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid rgba(10,26,51,.08);font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.6;color:var(--sh-navy);animation:sh-line-in .5s ease both;animation-delay:0.65s}
.sh-index-files__span-9{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid rgba(10,26,51,.08);font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.6;color:var(--sh-navy);animation:sh-line-in .5s ease both;animation-delay:0.75s}
.sh-index-files__span-10{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid rgba(10,26,51,.08);font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.6;color:var(--sh-navy);animation:sh-line-in .5s ease both;animation-delay:0.8500000000000001s}
.sh-index-files__span-11{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--sh-blue);font-weight:700;margin-top:auto;padding-top:16px;font-family:var(--sh-font)}
.sh-index-files__span-12{display:none}
.sh-index-files__a-4{display:none;position:relative;display:block;background:var(--sh-navy);color:#fff;perspective:1400px;z-index:2}
@media (hover:hover){.sh-index-files__a-4:hover{color:#fff}}
.sh-index-files__span-13{position:absolute;inset:0;background-image:url(../../assets/images/file-aqmar-altoufan.webp);background-size:cover;background-position:center 30%}
.sh-index-files__a-5{display:none;position:relative;overflow:hidden;display:flex;flex-direction:column;color:var(--sh-ink);background:var(--color-surface)}
@media (hover:hover){.sh-index-files__a-5:hover{color:var(--sh-ink)}}
.sh-index-files__span-14{position:absolute;inset:0;background-image:url(../../assets/images/file-1000-days.webp);background-size:cover;background-position:center 30%}
.sh-index-files__span-15{position:absolute;inset:0;background-image:url(../../assets/images/file-world-cup-2026.webp);background-size:cover;background-position:center 30%}
.sh-index-files__a-6{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:20px 0 18px;border-right:1px solid rgba(255,255,255,.18);background:var(--sh-navy-2);transition:background .2s;cursor:pointer}
@media (hover:hover){.sh-index-files__a-6:hover{color:#fff;background:var(--sh-navy)}}
.sh-index-files__span-16{position:absolute;inset:0;background-image:url(../../assets/images/file-aqmar-altoufan.webp);background-size:cover;background-position:center;opacity:.28}
.sh-index-files__span-17{position:absolute;inset:0;background:var(--sh-navy);opacity:.35}
.sh-index-files__span-18{position:relative;font-family:var(--sh-font);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.35);width:26px;text-align:center}
.sh-index-files__span-19{position:relative;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.3}
.sh-index-files__span-20{position:relative;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11.5px;color:var(--sh-on-dark-72)}
.sh-index-files__span-21{position:absolute;inset:0;background-image:url(../../assets/images/file-1000-days.webp);background-size:cover;background-position:center;opacity:.28}
.sh-index-files__span-22{position:absolute;inset:0;background-image:url(../../assets/images/file-world-cup-2026.webp);background-size:cover;background-position:center;opacity:.28}
.sh-index-more-news__section-1{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding:0 0 64px}
.sh-index-more-news__div-1{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--sh-hair-2);padding-bottom:12px}
/* ---- «آخر ما نُشر»: the day's stories under the stacks, filled by js/app.js from the
   same hidden list the stacks count. Each story: its picture, the title, then who wrote it
   (face, name) and when. Two columns read top to bottom, the newest at the top right; the
   column is a flex stack and the wire takes what is left, its rows sharing that height, so
   it ends where the aside ends. ---- */
.sh-index-more-news__section-1 > div:first-child{display:flex;flex-direction:column;min-width:0}
.sh-wire{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-top:24px}
.sh-wire__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-bottom:10px}   /* the same head as the section above it */
.sh-wire__note{font-size:12px;color:var(--sh-mute);font-variant-numeric:tabular-nums}
.sh-wire__list{
  position:relative;list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--sh-wire-rows,4),minmax(0,1fr));grid-auto-flow:column;column-gap:44px;
}
.sh-wire__list::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--sh-hair);pointer-events:none}   /* the rule between the two columns */
.sh-wire__item{display:flex;min-width:0;border-bottom:1px solid var(--sh-hair)}
.sh-wire__item--last{border-bottom:0}
.sh-wire__a{display:grid;grid-template-columns:clamp(104px,30%,128px) minmax(0,1fr);gap:0 12px;align-items:center;width:100%;min-width:0;padding:5px 0;color:var(--sh-ink)}   /* a low floor: the rows grow to share the column, never the other way */
.sh-wire__pic{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sh-navy-2)}
.sh-wire__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-wire__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.sh-wire__t{font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.5;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .16s ease}
.sh-wire__a:hover .sh-wire__t{color:var(--sh-blue)}
/* the byline: the face, the name, the date */
.sh-wire__by{display:flex;align-items:center;gap:7px;min-width:0;font-family:var(--sh-font);font-size:12px;color:var(--sh-mute)}
.sh-wire__av{width:20px;height:20px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:none;background:var(--sh-navy)}
.sh-wire__av--mark{display:grid;place-items:center;background:var(--sh-blue)}
.sh-wire__av--mark .sh-mark{width:10px;height:8px;background:#fff}
.sh-wire__name{font-weight:800;color:var(--sh-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-wire__date{font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-wire__date::before{content:"·";margin-inline-end:7px}
@media (max-width:640px){
  .sh-wire__list{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;column-gap:0}
  .sh-wire__list::before{display:none}
  .sh-wire__item--last{border-bottom:1px solid var(--color-border-soft)}
  .sh-wire__item:last-child{border-bottom:0}
  .sh-wire__a{grid-template-columns:104px minmax(0,1fr)}
}

.sh-index-more-news__aside-1{padding:0;align-self:start}
.sh-index-more-news__div-5{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--sh-hair-2);padding-bottom:12px}
.sh-index-more-news__h2-1{font-family:var(--sh-font);font-size:20px;font-weight:700;margin:0;color:var(--sh-navy)}
.sh-index-more-news__span-6{font-size:12px;color:var(--sh-mute)}
.sh-index-more-news__a-6{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:14px 0}
@media (hover:hover){.sh-index-more-news__a-6:hover{color:var(--sh-blue)}}
.sh-index-more-news__span-7{font-family:var(--sh-font);font-size:22px;font-weight:800;color:var(--sh-navy);line-height:.9;opacity:.3;font-variant-numeric:tabular-nums}
.sh-index-more-news__span-8{font-family:var(--sh-font);font-size:15px;font-weight:700;line-height:1.65;color:var(--sh-ink);text-wrap:pretty}
.sh-car{margin-top:20px;background:var(--color-surface-warm);color:var(--color-text);overflow:hidden}
.sh-car__stage{position:relative;aspect-ratio:3/2;background:var(--color-surface-soft);border-bottom:1px solid var(--color-border);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sh-car__slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transform:translateX(-16px);transition:opacity .38s ease,transform .38s cubic-bezier(.2,.75,.2,1),visibility 0s linear .38s}
[data-dir="prev"] .sh-car__slide{transform:translateX(16px)}
.sh-car__slide[data-leave]{transform:translateX(16px)}
[data-dir="prev"] .sh-car__slide[data-leave]{transform:translateX(-16px)}
.sh-car__slide[aria-current="true"]{opacity:1;visibility:visible;transform:none;transition:opacity .38s ease,transform .38s cubic-bezier(.2,.75,.2,1),visibility 0s}
.sh-car__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;-webkit-user-drag:none}
.sh-car__chip{position:absolute;top:10px;inset-inline-start:12px;z-index:2;padding:3px 8px;background:rgba(10,26,51,.9);font-family:var(--sh-font);font-size:11.5px;font-weight:800;letter-spacing:.02em;color:#fff;pointer-events:none}
.sh-car__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 16px 12px}
.sh-car__title{grid-column:1/-1;color:var(--color-brand-navy);font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.sh-car__by{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:12px;color:var(--color-text-muted);transition:color .18s ease}
@media (hover:hover){.sh-car__by:hover{color:var(--color-brand-blue)}}
.sh-car__by .sh-mark{width:13px;height:11px;background:var(--color-brand-blue);flex:none}
.sh-car__nav{display:flex;align-items:center;gap:4px;flex:none}
.sh-car__btn{width:34px;height:34px;display:grid;place-items:center;background:transparent;border:1px solid var(--sh-hair-2);color:var(--sh-navy);font-size:11px;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
@media (hover:hover){.sh-car__btn:hover{background:var(--color-brand-navy);color:#fff;border-color:var(--color-brand-navy)}}
.sh-car__btn:focus-visible{outline:2px solid var(--sh-sky);outline-offset:2px}
.sh-car__pos{min-width:44px;text-align:center;font-family:var(--sh-font);font-size:12px;font-weight:800;color:var(--color-text-muted);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.sh-index-statements__section-1{padding:0 0 64px}
.sh-index-statements__div-1{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--sh-hair-2);padding-bottom:12px}
.sh-index-statements__div-2{display:flex;align-items:center;gap:12px}
.sh-index-statements__h2-1{font-family:var(--sh-font);font-size:20px;font-weight:700;margin:0;line-height:1;color:var(--sh-navy)}
.sh-index-special-files__section-1{padding:0 0 64px}
/* ============================================================================
   عدسة شهاب — one photo story, one picture at a time. The stage is the
   picture, clean, at 3:2 so nothing is cropped off the top; beside it the
   story: a label with the count, title, text, then the caption of the picture
   on the stage (place, sentence), the four pictures as a contact sheet, and
   the arrows with the counter. One position cue: the counter and the lit
   thumb. The entering picture drifts from 1.04 to 1 over six seconds. RTL:
   the first thumb sits on the right, forward is leftward.
   ========================================================================== */
.sh-lens{padding:64px 0 64px}   /* 56 white above the video band */
.sh-lens__head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--sh-hair-2);padding-bottom:12px}
.sh-lens__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);margin-top:20px;align-items:stretch}
.sh-lens__stage{position:relative;overflow:hidden;background:var(--sh-navy);aspect-ratio:3/2;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sh-lens__slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.sh-lens__slide[aria-current="true"]{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s}
.sh-lens__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.04);transition:transform 6s cubic-bezier(.2,.6,.2,1);-webkit-user-drag:none}
.sh-lens__slide[aria-current="true"] img{transform:none}
.sh-lens__panel{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:20px 24px;min-width:0}
.sh-lens__story{display:flex;flex-direction:column;gap:8px}
.sh-lens__label{font-family:var(--sh-font);font-size:11.5px;font-weight:800;color:var(--sh-blue)}
.sh-lens__label b{font-weight:800;font-variant-numeric:tabular-nums}
.sh-lens__title{font-family:var(--sh-font);font-size:22px;font-weight:700;line-height:1.5;margin:0;color:var(--sh-navy);text-wrap:balance}
.sh-lens__title a{color:inherit;transition:color .18s ease}
@media (hover:hover){.sh-lens__title a:hover{color:var(--sh-blue)}}
.sh-lens__text{font-size:13px;line-height:1.95;color:var(--sh-ink-2);margin:0;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the caption of the picture on the stage: the place, then the sentence; follows the picture */
.sh-lens__caption{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--sh-hair)}
.sh-lens__loc{font-family:var(--sh-font);font-size:11.5px;font-weight:800;color:var(--sh-blue)}
.sh-lens__cap{font-size:13px;line-height:1.7;color:var(--sh-ink);text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the contact sheet: the four pictures, two by two, the lit one is the one on the stage */
.sh-lens__thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sh-lens__thumb{position:relative;aspect-ratio:16/9;padding:0;border:0;background:var(--sh-navy-2);cursor:pointer;overflow:hidden;opacity:.55;outline:2px solid transparent;outline-offset:-2px;transition:opacity .2s ease,outline-color .2s ease}
.sh-lens__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sh-lens__thumb:hover{opacity:.85}
.sh-lens__thumb[aria-current="true"]{opacity:1;outline-color:var(--sh-blue)}
.sh-lens__thumb:focus-visible{outline-color:var(--sh-blue);opacity:1}
.sh-lens__nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sh-lens__btns{display:flex;gap:6px}
.sh-lens__btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--sh-hair-2);background:#fff;color:var(--sh-navy);font-size:11px;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
@media (hover:hover){.sh-lens__btn:hover{background:var(--sh-navy);border-color:var(--sh-navy);color:#fff}}
.sh-lens__btn:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}
.sh-lens__pos{font-family:var(--sh-font);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;color:var(--sh-mute)}
@media (max-width:900px){
  .sh-lens__grid{grid-template-columns:minmax(0,1fr)}
  .sh-lens__panel{padding:18px 0 0;gap:14px}
  .sh-lens__thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .sh-lens{padding:44px 0 44px}
  .sh-lens__title{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .sh-lens__slide,.sh-lens__slide img{transition:none}
  .sh-lens__slide img{transform:none}
}
/* ============================================================================
   فيديو شهاب — a navy stage. The ordinary videos play in a small player at
   the top right with their playlist beside it (a click swaps the player);
   under them the REELS, vertical, the way most of the house's video goes out,
   on a snap rail with arrows; under the stage the programmes. Same player
   contract as video-watch.html (data-sh-player / data-sh-video / the controls).
   ========================================================================== */
.sh-vid{position:relative;z-index:0;padding:64px 0 64px;color:#fff;background:var(--sh-navy)}   /* the band: the section sits outside the container, so its own background is full-bleed; the content keeps the container's width in .sh-vid__in */
.sh-vid__in{position:relative;max-width:var(--sh-container);margin:0 auto;padding:0 var(--sh-gutter,32px)}
.sh-vid .sh-section__title{color:#fff}
.sh-vid .sh-more{color:#fff}@media (hover:hover){.sh-vid .sh-more:hover{color:#fff}}
.sh-vid .sh-section__title .sh-mark{background:var(--sh-sky)}
.sh-vid__head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:12px}
/* the stage: the player on the right with its playlist beside it, the playlist as tall as the
   player and no taller (the info line runs under the player alone); the reels and the
   programmes take the full width under them */
.sh-vid__stage{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,368px);grid-template-rows:auto auto;gap:0;
  align-items:stretch;margin-top:20px;background:transparent;color:#fff;isolation:isolate;
}
.sh-vid::after{content:none}
/* the player */
.sh-vid__main{display:contents}   /* the player and its info place themselves on the stage's grid */
.sh-vid__player{grid-column:1;grid-row:1;position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;box-shadow:0 12px 30px -18px rgba(0,0,0,.55)}
.sh-vid__video{display:block;width:100%;height:100%;object-fit:cover}
.sh-vid__poster{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,26,51,.72),rgba(10,26,51,.05) 55%);opacity:.9;pointer-events:none}
.sh-vid__badge{
  position:absolute;top:14px;inset-inline-start:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:5px 11px;background:rgba(10,26,51,.82);
  font-family:var(--sh-font);font-size:11.5px;font-weight:800;color:#fff;
}
.sh-vid__dot{width:7px;height:7px;border-radius:50%;background:var(--sh-sky);box-shadow:0 0 0 0 rgba(27,90,166,.7);animation:sh-vid-pulse 1.8s ease-out infinite}
@keyframes sh-vid-pulse{to{box-shadow:0 0 0 10px rgba(27,90,166,0)}}
.sh-vid__big{
  position:absolute;top:50%;left:50%;z-index:2;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  display:grid;place-items:center;background:var(--sh-blue);color:#fff;font-size:18px;
  box-shadow:0 6px 18px rgba(10,26,51,.45);transition:transform .2s ease,background .2s ease;
}
.sh-vid__big .sh-i{margin-inline-start:-3px}
@media (hover:hover){.sh-vid__big:hover{transform:scale(1.06);color:#fff;background:var(--color-brand-blue-deep)}}
.sh-vid__controls{position:absolute;inset:auto 0 0 0;z-index:3;padding:0 14px 10px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
.sh-vid__track{position:relative;display:block;height:14px;cursor:pointer}
.sh-vid__track::before{content:"";position:absolute;inset:6px 0 auto 0;height:3px;background:rgba(255,255,255,.3)}
.sh-vid__fill{position:absolute;top:6px;right:0;height:3px;width:0;background:var(--sh-blue)}
.sh-vid__knob{position:absolute;top:1px;right:0;width:14px;height:12px;margin-right:-7px;background:#fff}
.sh-vid__bar{display:flex;align-items:center;gap:6px;margin-top:2px}
.sh-vid__btn{width:36px;height:36px;display:grid;place-items:center;color:#fff;font-size:14px;border-radius:50%;transition:background .18s ease}
@media (hover:hover){.sh-vid__btn:hover{color:#fff;background:rgba(255,255,255,.14)}}
.sh-vid__time{font-size:12px;color:var(--sh-on-dark-72);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.sh-vid__spacer{flex:1}
.sh-vid__info{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:8px;margin-top:14px;min-width:0}
.sh-vid__chips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sh-vid__chip{display:inline-flex;padding:3px 9px;background:transparent;color:var(--color-brand-sky);box-shadow:inset 0 0 0 1px var(--color-on-dark-line);font-family:var(--sh-font);font-size:11.5px;font-weight:800}
.sh-vid__meta{font-size:12px;color:var(--sh-on-dark-72);font-variant-numeric:tabular-nums}
.sh-vid__title{font-family:var(--sh-font);font-size:17px;font-weight:800;line-height:1.5;margin:0;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-vid__actions{display:flex;align-items:center;gap:10px;margin-top:2px;flex-wrap:wrap}
.sh-vid__cta{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;background:var(--sh-blue);color:#fff;font-family:var(--sh-font);font-size:12px;font-weight:800;transition:background .18s ease}
@media (hover:hover){.sh-vid__cta:hover{background:var(--color-brand-blue-deep);color:#fff}}
.sh-vid__ghost{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.3);color:#fff;font-family:var(--sh-font);font-size:12px;font-weight:800;transition:background .18s ease}
@media (hover:hover){.sh-vid__ghost:hover{background:rgba(255,255,255,.12);color:#fff}}
/* the playlist */
.sh-vid__list{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0;border-inline-start:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.sh-vid__list-head{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px 10px;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--sh-font);font-size:13px;font-weight:800}
.sh-vid__list-head span{font-size:11.5px;color:var(--sh-on-dark-55);font-weight:400;font-family:inherit}
/* an item: the picture with its length, the title, the kind under it; the items share the list's height evenly */
.sh-vid__item{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:clamp(120px,40%,168px) minmax(0,1fr);grid-template-rows:auto auto;gap:3px 12px;align-items:center;align-content:center;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;transition:background .18s ease}
.sh-vid__item::after{content:attr(data-sh-chip);grid-column:2;grid-row:2;align-self:start;font-size:11.5px;font-weight:400;color:var(--sh-on-dark-72)}
@media (hover:hover){.sh-vid__item:hover{background:rgba(255,255,255,.06);color:#fff}}
.sh-vid__item[aria-current="true"]{background:rgba(27,90,166,.22);border-inline-start:2px solid var(--sh-sky);padding-inline-start:14px}
.sh-vid__item[aria-current="true"] .sh-vid__thumb{outline-color:var(--sh-sky)}
.sh-vid__item[aria-current="true"]::after{content:"يُعرض الآن · " attr(data-sh-chip);color:var(--sh-sky);font-weight:700}
.sh-vid__thumb{grid-row:1/3;position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sh-navy-2);outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;transition:outline-color .18s ease}
.sh-vid__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-vid__len{position:absolute;bottom:4px;inset-inline-end:4px;padding:1px 5px;background:rgba(10,26,51,.85);font-size:11.5px;font-variant-numeric:tabular-nums;direction:ltr}
.sh-vid__item-t{grid-column:2;grid-row:1;align-self:end;font-family:var(--sh-font);font-size:13px;font-weight:700;line-height:1.55;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-vid__list-more{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 12px;font-size:12px;font-weight:700;color:var(--sh-on-dark-72)}
@media (hover:hover){.sh-vid__list-more:hover{color:#fff}}
.sh-vid__list-more .sh-more__arrow{background:currentColor}
/* the reels */
.sh-vid__reels{grid-column:1/-1;grid-row:3;margin-top:24px;padding:20px 0 20px;border-top:1px solid rgba(255,255,255,.12)}   /* the rule needs air above it: the CTA row (and the playlist's foot on narrow) used to sit exactly on it */
.sh-vid__reels-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sh-vid__reels-title{display:inline-flex;align-items:center;gap:10px;font-family:var(--sh-font);font-size:15px;font-weight:800}
.sh-vid__reels-title .sh-mark{width:16px;height:13px;background:var(--sh-sky)}
.sh-vid__reels-n{font-size:12px;font-weight:400;color:var(--sh-on-dark-55);font-family:inherit}
.sh-vid__reels-nav{display:flex;gap:6px}
.sh-vid__arrow{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);background:none;color:#fff;font-size:11px;cursor:pointer;transition:background .18s ease,opacity .18s ease}
@media (hover:hover){.sh-vid__arrow:hover{background:rgba(255,255,255,.12)}}
.sh-vid__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sh-vid__arrow[disabled]{opacity:.3;cursor:default}
/* seven clips, one row, nothing to slide */
.sh-vid__rail{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px;padding:2px 0 6px}
.sh-vid__reel{
  position:relative;min-width:0;aspect-ratio:9/16;overflow:hidden;
  background:var(--sh-navy-2);color:#fff;isolation:isolate;outline-offset:3px;
}
@media (hover:hover){.sh-vid__reel:hover{color:#fff}}
.sh-vid__reel:focus-visible{outline:2px solid #fff}
.sh-vid__reel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sh-vid__reel:hover .sh-vid__reel-img{transform:scale(1.05)}
.sh-vid__reel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,26,51,.94) 0,rgba(10,26,51,.55) 34%,rgba(10,26,51,0) 62%);pointer-events:none}
/* at rest a clip is its picture and its length; pointing at it brings the
   section, the headline and the play mark up in one move. A screen with no
   pointer never reveals, so there they all stay showing. */
@media (hover:hover){
  .sh-vid__reel::after,.sh-vid__reel-body,.sh-vid__reel-play{opacity:0;transition:opacity .2s ease}
  .sh-vid__reel:hover::after,.sh-vid__reel:focus-visible::after,
  .sh-vid__reel:hover .sh-vid__reel-body,.sh-vid__reel:focus-visible .sh-vid__reel-body,
  .sh-vid__reel:hover .sh-vid__reel-play,.sh-vid__reel:focus-visible .sh-vid__reel-play{opacity:1}
}
.sh-vid__reel-len{position:absolute;top:10px;inset-inline-start:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:3px 7px;background:rgba(10,26,51,.72);font-size:11.5px;font-variant-numeric:tabular-nums;direction:ltr}
.sh-vid__reel-len .sh-i{font-size:10px}
.sh-vid__reel-play{
  position:absolute;inset:0;margin:auto;z-index:2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.9);background:rgba(10,26,51,.5);font-size:13px;
  transition:background .18s ease,border-color .18s ease;
}
.sh-vid__reel-play .sh-i{margin-inline-start:-2px}
.sh-vid__reel:hover .sh-vid__reel-play{background:var(--sh-blue);border-color:var(--sh-blue)}
.sh-vid__reel-body{position:absolute;inset:auto 0 0 0;z-index:2;display:flex;flex-direction:column;gap:6px;padding:0 12px 12px}
.sh-vid__reel-chip{align-self:flex-start;padding:2px 8px;background:rgba(10,26,51,.82);font-family:var(--sh-font);font-size:11.5px;font-weight:800}
.sh-vid__reel-chip--red{background:var(--sh-red)}
.sh-vid__reel-t{font-family:var(--sh-font);font-size:13px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.sh-vid__reel-time{font-size:11.5px;color:var(--sh-on-dark-72);font-variant-numeric:tabular-nums}
/* the programmes */
.sh-vid__progs{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:16px}
.sh-vid__prog{display:flex;flex-direction:column;gap:9px;color:#fff;min-width:0}
@media (hover:hover){.sh-vid__prog:hover{color:var(--sh-sky)}}
.sh-vid__prog-art{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--sh-navy-2)}
.sh-vid__prog-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sh-vid__prog:hover .sh-vid__prog-art img{transform:scale(1.04)}
.sh-vid__prog-body{display:flex;flex-direction:column;gap:3px}
.sh-vid__prog-name{font-family:var(--sh-font);font-size:14px;font-weight:800;color:#fff}
.sh-vid__prog:hover .sh-vid__prog-name{color:var(--sh-sky)}
.sh-vid__prog-by{font-size:12px;color:var(--sh-on-dark-72)}
.sh-vid__prog-all{display:grid;place-items:center;aspect-ratio:4/3;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;font-family:var(--sh-font);font-size:13px;font-weight:800;gap:2px}
.sh-vid__prog-all b{font-size:26px;line-height:1;color:var(--sh-sky)}
.sh-vid__prog--all .sh-vid__prog-by{display:inline-flex;align-items:center;gap:6px;color:var(--sh-sky);font-weight:700}
.sh-vid__prog--all .sh-more__arrow{background:currentColor}

@media (max-width:900px){
  .sh-vid__stage{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .sh-vid__player,.sh-vid__info,.sh-vid__list,.sh-vid__reels,.sh-vid__progs{grid-column:1;grid-row:auto}   /* one column: player, info, list, reels, programmes */
  .sh-vid__list{border-inline-start:0;border-top:1px solid rgba(255,255,255,.12);margin-top:14px}
  .sh-vid__item{flex:0 0 auto}
  .sh-vid__progs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .sh-vid__title{font-size:17px}
  .sh-vid__item{grid-template-columns:112px minmax(0,1fr);padding:10px 14px}
  .sh-vid__reels{padding:20px 14px 18px}
  .sh-vid__rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sh-vid__reels-nav{display:none}
  .sh-vid__progs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-vid__prog--all{grid-column:1/-1}
  .sh-vid__prog-all{aspect-ratio:auto;padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .sh-vid__dot{animation:none}
  .sh-vid__reel,.sh-vid__reel-img,.sh-vid__prog-art img,.sh-vid__big{transition:none}
}
/* ============================================================================
   تقارير خاصة — five reports, every one photographed. The lead takes two rows
   and carries its title on the picture; the four beside it carry theirs under
   the picture, on paper, with the desk as a kicker. Titles only.
   ========================================================================== */
.sh-rep{padding:40px 0 64px}   /* the shelf above already left its own white */
@media (max-width:640px){
  .sh-vid{padding:44px 0 44px}
  .sh-rep{padding-top:44px}
}
.sh-rep__head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--sh-hair-2);padding-bottom:12px}
.sh-rep__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:22px 18px;margin-top:20px}
.sh-rep__lead{grid-column:span 2;grid-row:span 2;position:relative;display:block;overflow:hidden;background:var(--sh-navy-2);color:#fff;min-height:100%}
@media (hover:hover){.sh-rep__lead:hover{color:#fff}}
.sh-rep__lead-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sh-rep__lead:hover .sh-rep__lead-img{transform:scale(1.03)}
.sh-rep__lead::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,26,51,.9) 0,rgba(10,26,51,.35) 45%,rgba(10,26,51,0) 70%)}
.sh-rep__lead-body{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;flex-direction:column;gap:10px;padding:0 26px 24px}
.sh-rep__kicker{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--sh-on-dark-72);font-variant-numeric:tabular-nums}
.sh-rep__chip{padding:2px 8px;background:var(--sh-red);color:#fff;font-family:var(--sh-font);font-weight:800}
.sh-rep__lead-t{font-family:var(--sh-font);font-size:22px;font-weight:800;line-height:1.5;text-wrap:balance}
.sh-rep__tile{display:flex;flex-direction:column;gap:10px;color:var(--sh-ink);min-width:0}
@media (hover:hover){.sh-rep__tile:hover{color:var(--sh-blue)}}
.sh-rep__pic{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sh-navy-2)}
.sh-rep__pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sh-rep__tile:hover .sh-rep__pic img{transform:scale(1.04)}
.sh-rep__t{font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.6;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sh-rep__k{display:inline-block;margin-inline-end:8px}   /* the desk is not a link of its own (the tile is): it reads like the rest of the headline */
@media (max-width:900px){
  .sh-rep__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-rep__lead{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9}
  .sh-rep__lead-t{font-size:20px}
}
@media (max-width:640px){
  .sh-rep__grid{gap:18px 14px}
  .sh-rep__lead-body{padding:0 16px 16px}
  .sh-rep__lead-t{font-size:17px}
  .sh-rep__t{font-size:13px}
}

/* ============================================================================
   رأي + رياضة — two desks side by side. Opinion is the writers themselves:
   the lead writer large, with the opening « of the house behind the title,
   and four more with their faces. Sport is small: one picture with its
   title, two thumbnails, and three lines off the wire.
   ========================================================================== */
.sh-desk2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0 48px;padding:0 0 64px;align-items:stretch}
.sh-desk2 > .sh-op{display:flex;flex-direction:column;min-width:0}
.sh-op__head,.sh-sp__head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--sh-hair-2);padding-bottom:12px}
.sh-op__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:20px;align-items:stretch;flex:1 1 auto;min-height:0}
.sh-op__list{display:flex;flex-direction:column}
.sh-op__list:first-child{padding-inline-end:26px;border-inline-end:1px solid var(--sh-hair)}
.sh-op__list:last-child{padding-inline-start:26px}
.sh-op__by{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--sh-mute)}
.sh-op__by b{font-family:var(--sh-font);font-size:13px;font-weight:800;color:var(--sh-navy)}
.sh-op__row{flex:1 1 auto;display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--color-border-soft);color:var(--sh-ink)}
.sh-op__row:first-child{padding-top:0}
.sh-op__row:last-child{border-bottom:0;padding-bottom:0}
/* a columnist's head shot is a portrait, not a news picture: it is round, and
   it carries the house mark the way a paper marks its own writers */
.sh-op__avatar{position:relative;width:104px;height:104px;flex:none}
.sh-op__face{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center top;background:var(--sh-navy-2);box-shadow:0 0 0 1px var(--sh-hair-2)}
.sh-op__badge{position:absolute;inset-block-end:6px;inset-inline-start:2px;width:18px;height:15px;background:var(--sh-blue);box-shadow:0 0 0 4px #fff}
.sh-op__row > span{display:flex;flex-direction:column;gap:5px;min-width:0}
.sh-op__t{font-family:var(--sh-font);font-size:15px;font-weight:700;line-height:1.65;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){.sh-op__row:hover .sh-op__t{color:var(--sh-blue)}}
.sh-op__row .sh-op__by b{font-size:12px}
.sh-sp__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px 14px;margin-top:20px}
.sh-sp__big{grid-column:1/-1;position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sh-navy-2);color:#fff}
@media (hover:hover){.sh-sp__big:hover{color:#fff}}
.sh-sp__big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.sh-sp__big::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,26,51,.88) 0,rgba(10,26,51,.2) 55%,rgba(10,26,51,0))}
.sh-sp__big-body{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;flex-direction:column;gap:8px;padding:0 18px 16px}
.sh-sp__chip{align-self:flex-start;padding:2px 8px;background:rgba(10,26,51,.9);font-family:var(--sh-font);font-size:11.5px;font-weight:800}
.sh-sp__big-t{font-family:var(--sh-font);font-size:17px;font-weight:800;line-height:1.55;text-wrap:balance}
.sh-sp__tile{display:flex;flex-direction:column;gap:8px;color:var(--sh-ink);min-width:0}
@media (hover:hover){.sh-sp__tile:hover{color:var(--sh-blue)}}
.sh-sp__pic{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sh-navy-2)}
.sh-sp__pic img{display:block;width:100%;height:100%;object-fit:cover}
.sh-sp__t{font-family:var(--sh-font);font-size:14px;font-weight:700;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-sp__wire{display:flex;flex-direction:column;justify-content:center;min-width:0;border-inline-start:1px solid var(--sh-hair);padding-inline-start:14px}
.sh-sp__line{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--sh-hair);color:var(--sh-ink);font-family:var(--sh-font);font-size:13px;font-weight:700;line-height:1.55}
.sh-sp__line:first-child{padding-top:0}
.sh-sp__line:last-child{border-bottom:0;padding-bottom:0}
@media (hover:hover){.sh-sp__line:hover{color:var(--sh-blue)}}
.sh-sp__time{font-family:inherit;font-size:11.5px;font-weight:400;color:var(--sh-mute);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .sh-desk2{grid-template-columns:minmax(0,1fr);gap:44px 0}
  .sh-desk2 > .sh-op{display:block}
  .sh-op__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .sh-op__row{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:13px 0}
  .sh-op__avatar,.sh-op__face{width:64px;height:64px}
  .sh-op__badge{inset-block-end:2px;inset-inline-start:0;width:14px;height:12px;box-shadow:0 0 0 3px #fff}
  .sh-op__t{font-size:14px;-webkit-line-clamp:2}
  .sh-op__list:first-child{padding-inline-end:0;border-inline-end:0}
  .sh-op__list:last-child{padding-inline-start:0;border-top:1px solid var(--color-border-soft)}
  .sh-op__list:last-child .sh-op__row:first-child{padding-top:12px}
}
@media (max-width:640px){
  .sh-sp__grid{grid-template-columns:minmax(0,1fr)}
  .sh-sp__wire{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--sh-hair-2);padding-top:8px}
}

/* ============================================================================
   مكتبة الصور | انفوجرافيك — a wall of Shehab's own posters (albums and
   infographics are designed 3:4 sheets with their titles on them, so the
   wall shows them whole, never cropped to a landscape). Six columns: the
   newest album spans two by two, eight more beside it. Hover lifts the
   picture a little and draws the house blue rule under it.
   ========================================================================== */
.sh-gal{padding:0 0 64px}
.sh-gal__head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--sh-hair-2);padding-bottom:12px}
.sh-gal__lead{display:flex;align-items:baseline;gap:12px;min-width:0}
.sh-gal__note{font-size:12px;color:var(--sh-mute);white-space:nowrap}   /* the same lens as the story above */
.sh-gal__cat{color:inherit;transition:color .18s ease}
@media (hover:hover){.sh-gal__cat:hover{color:var(--sh-blue)}}
.sh-gal__sep{color:var(--sh-mute);font-weight:400;opacity:.7}
.sh-gal__wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:20px}
.sh-gal__tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--sh-navy-2);min-width:0}
.sh-gal__tile--lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.sh-gal__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.sh-gal__tile:hover img{transform:scale(1.03)}
.sh-gal__tile::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--sh-blue);transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
@media (hover:hover){.sh-gal__tile:hover::after{transform:scaleX(1)}}
.sh-gal__tile:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}
.sh-gal__chip{position:absolute;top:10px;inset-inline-start:10px;z-index:1;padding:3px 8px;background:rgba(10,26,51,.9);color:#fff;font-family:var(--sh-font);font-size:11.5px;font-weight:800;line-height:1.4}
@media (max-width:900px){
  .sh-gal__wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sh-gal__tile:nth-child(n+6){display:none}
}
@media (max-width:640px){
  .sh-gal__wall{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .sh-gal__wall::-webkit-scrollbar{display:none}
  .sh-gal__tile,.sh-gal__tile:nth-child(n+6){display:block;flex:0 0 44%;scroll-snap-align:start}
  .sh-gal__tile--lead{aspect-ratio:3/4}
}
@media (prefers-reduced-motion:reduce){
  .sh-rep__lead-img,.sh-rep__pic img,.sh-gal__tile img,.sh-gal__tile::after,.sh-car__slide{transition:none}
}
.sh-index-social__section-1{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px;padding:0 0 64px;border-top:1px solid var(--sh-hair-2)}   /* five channels; the newsletter form lives in the footer */
.sh-index-social__a-1{padding:26px 0 0;display:flex;align-items:center;gap:14px;color:var(--sh-ink);transition:color .2s ease}
@media (hover:hover){.sh-index-social__a-1:hover{color:var(--sh-blue)}}
.sh-index-social__i-1{font-size:18px;color:var(--sh-blue);line-height:1;width:22px;text-align:center;transition:transform .3s cubic-bezier(.2,.75,.2,1)}
@media (hover:hover){.sh-index-social__i-1:hover{transform:translateY(-2px)}}
.sh-index-social__span-1{display:block;font-family:var(--sh-font);font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.sh-index-social__span-2{display:block;font-size:12px;color:var(--sh-mute);margin-top:6px}
.sh-index-social__div-1{padding:26px 0 0;display:flex;flex-direction:column;gap:14px}
.sh-index-social__div-2{display:flex;align-items:center;gap:10px;font-family:var(--sh-font);font-size:14px;font-weight:700;color:var(--sh-navy)}
.sh-index-social__i-2{color:var(--sh-blue);font-size:16px}
.sh-index-social__div-3{font-size:12px;color:var(--sh-mute);margin-top:6px}
.sh-index-social__div-4{display:flex;flex-wrap:wrap;gap:0}
.sh-index-social__span-3{flex:1 1 160px;min-width:0;border:1px solid var(--sh-hair);padding:10px 14px;font-size:12px;color:var(--sh-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-index-social__span-4{background:var(--sh-blue);color:#fff;font-family:var(--sh-font);font-size:12px;font-weight:700;padding:10px 20px;display:flex;align-items:center;white-space:nowrap;flex:none;transition:background .18s}
@media (hover:hover){.sh-index-social__span-4:hover{background:var(--sh-navy-2)}}

/* ============================================================================
   غزة — عينٌ لا تُغمض. A full-bleed strip that keeps watch: the coast, a beam
   of light sweeping slowly across it (the eye that does not close), the live
   tag, the count of days since 7 October 2023 kept by js/app.js, and the way
   into the live coverage.
   ========================================================================== */
.sh-gaza{position:relative;height:auto;padding:40px 0 34px;overflow:hidden;background:var(--sh-navy-2);color:#fff;isolation:isolate}
.sh-gaza__photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.62;
}
@keyframes sh-gaza-drift{from{transform:scale(1) translateX(0)}to{transform:scale(1.07) translateX(-1.5%)}}
.sh-gaza__scrim{position:absolute;inset:0;background:linear-gradient(to left,rgba(15,42,79,.94) 0,rgba(15,42,79,.6) 42%,rgba(15,42,79,.28) 100%)}
.sh-gaza__beam{display:none}
@keyframes sh-gaza-beam{from{transform:translateX(-120%)}to{transform:translateX(420%)}}
.sh-gaza__in{
  position:relative;max-width:var(--sh-container);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:minmax(0,1.05fr) auto minmax(0,1fr);align-items:center;gap:20px 36px;
}
.sh-gaza__live{display:inline-flex;align-items:center;gap:8px;font-family:var(--sh-font);font-size:11.5px;font-weight:800;color:var(--sh-on-dark-72);letter-spacing:.02em}
.sh-gaza__dot{width:8px;height:8px;border-radius:50%;background:var(--color-red-soft);box-shadow:0 0 0 0 rgba(224,48,47,.6);animation:sh-gaza-pulse 1.8s ease-out infinite}
@keyframes sh-gaza-pulse{0%{box-shadow:0 0 0 0 rgba(224,48,47,.6)}100%{box-shadow:0 0 0 12px rgba(224,48,47,0)}}
.sh-gaza__title{display:flex;align-items:center;gap:12px;font-family:var(--sh-font);font-size:26px;font-weight:800;line-height:1.2;margin:12px 0 0}
.sh-gaza__title .sh-mark{width:20px;height:17px;background:#fff;flex:none}
.sh-gaza__sub{font-size:13px;line-height:1.7;color:var(--sh-on-dark-72);margin:12px 0 0;max-width:46ch}
.sh-gaza__day{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 40px;border-inline:0;border-inline-start:1px solid rgba(255,255,255,.18);align-self:stretch}
.sh-gaza__n{font-family:var(--sh-font);font-size:clamp(54px,5.6vw,86px);font-weight:800;line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums;direction:ltr}
.sh-gaza__l{font-size:12.5px;color:var(--sh-on-dark-72);margin-top:10px}
/* the three sourced figures beside it: the same numbers the data desk shows */
.sh-gaza__figs{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.sh-gaza__figs li{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:var(--sh-on-dark-72);line-height:1.5}
.sh-gaza__figs b{font-family:var(--sh-font);font-size:20px;font-weight:800;color:#fff;direction:ltr;min-width:0}
/* the way into the data desk: the house CTA, under the lead (the sources line
   and the photo credit that used to close the band are gone) */
.sh-gaza__btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 22px;margin-top:20px;background:var(--sh-blue);color:#fff;font-family:var(--sh-font);font-size:12.5px;font-weight:800;line-height:1;transition:background .18s ease,gap .25s ease}
@media (hover:hover){.sh-gaza__btn:hover{background:var(--color-brand-blue-deep);color:#fff;gap:16px}}
.sh-gaza__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:760px){
  .sh-gaza{height:auto;padding:28px 0 26px}
  .sh-gaza__in{grid-template-columns:minmax(0,1fr);gap:22px;padding:0 16px}
  .sh-gaza__title{font-size:20px}
  .sh-gaza__day{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:12px;padding:16px 0;border-inline:0;border-inline-start:0;border-block:1px solid rgba(255,255,255,.18)}
  .sh-gaza__n{font-size:clamp(44px,13vw,58px)}
  .sh-gaza__l{margin-top:0}
  .sh-gaza__figs b{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .sh-gaza__photo,.sh-gaza__beam,.sh-gaza__dot{animation:none}
  .sh-gaza__beam{display:none}
}

/* ============================================================================
   ملفات شهاب — the shelf is a horizontal accordion.
   Every file is one flex item: its spine (72px) plus its body (cover + paper)
   side by side, clipped by the item. A closed file is 72px wide and shows its
   spine only; the open file grows to take the rest of the row, so opening one
   file and closing another is a single width hand-off, not a swap. The body
   keeps a fixed width (the room the open file will have: the shelf minus four
   spines) so nothing inside re-wraps while the width animates -- the sheet
   is revealed, leftward, out of its own spine. Markup: div.sh-file wrappers.
   ========================================================================== */
.sh-index-files__div-3{display:flex;container-type:inline-size}
.sh-file{
  position:relative;display:flex;min-width:0;overflow:hidden;
  flex:0 0 72px;
  transition:flex-grow .62s cubic-bezier(.2,.7,.2,1);
}
.sh-file[data-open="true"]{flex-grow:1}
.sh-file > [data-sh-file]{flex:none;width:72px}
.sh-file__body{
  flex:none;width:calc(100cqw - 288px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
/* the closed file's spine reads as a folder edge; the open one lifts */
.sh-file[data-open="true"] > [data-sh-file]{box-shadow:6px 0 18px rgba(10,26,51,.2);z-index:3}
/* the old door swing, the slide-in and the pull-out are all retired: the
   accordion's own width motion is the opening */
.sh-index-files__span-4{animation:none;transform:none;transform-origin:center}
.sh-index-files__div-4{animation:none}
/* the lines settle only once the sheet is out */
.sh-index-files__h3-1{animation-delay:.42s}
.sh-index-files__p-1{animation-delay:.5s}
.sh-index-files__span-8{animation-delay:.58s}
.sh-index-files__span-9{animation-delay:.66s}
.sh-index-files__span-10{animation-delay:.74s}

/* -- folder tabs: the top of every spine is a tab, cut on the diagonal like a
   physical folder, with the file number sitting in it. -- */
[data-sh-file]{overflow:hidden}
[data-sh-file]::before{
  content:"";position:absolute;inset:0 0 auto 0;height:58px;pointer-events:none;
  background:rgba(255,255,255,.09);
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 12px));
}
.sh-file[data-open="true"] > [data-sh-file]::before{background:rgba(255,255,255,.16)}
.sh-index-files__span-2,.sh-index-files__span-18{position:relative;z-index:1}

/* -- the paper reads as a dossier: two sheet edges showing at the top, and a
   binding edge where it meets the folder. -- */
.sh-index-files__a-3::before,.sh-index-files__a-5::before{content:none}
.sh-index-files__a-3::after,.sh-index-files__a-5::after{content:none}
.sh-index-files__div-4{padding-inline-end:28px}

/* -- the state stamp. Four states, set per file in the markup
   (data-sh-state on div.sh-file): open · live · closed · upcoming -- */
.sh-index-files__span-7{display:inline-block}
[data-sh-state="live"] .sh-index-files__span-7{background:var(--sh-navy);outline-color:var(--sh-navy);padding-inline-start:20px;position:relative}
[data-sh-state="live"] .sh-index-files__span-7::before{
  content:"";position:absolute;inset-inline-start:8px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:#fff;animation:sh-file-live 1.6s ease-in-out infinite;
}
@keyframes sh-file-live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
[data-sh-state="closed"] .sh-index-files__span-7{background:var(--color-text-muted);outline-color:var(--color-text-muted)}
[data-sh-state="upcoming"] .sh-index-files__span-7{background:#fff;color:var(--sh-blue)}
/* a live file also pulses on its spine, so the state reads while closed */
[data-sh-state="live"] > [data-sh-file] .sh-index-files__span-18::after,
[data-sh-state="live"] > [data-sh-file] .sh-index-files__span-2::after{
  content:"";position:absolute;top:2px;inset-inline-end:-10px;width:6px;height:6px;border-radius:50%;
  background:var(--sh-red);animation:sh-file-live 1.6s ease-in-out infinite;
}

/* -- narrow: the accordion turns vertical. The spine is a 56px bar (see
   responsive.css), the body folds out under it. -- */
@media (max-width:900px){
  .sh-index-files__div-3{flex-direction:column;container-type:normal}
  .sh-file{flex:none;display:block;overflow:visible}
  .sh-file > [data-sh-file]{width:auto}
  .sh-file__body{
    width:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:0fr 0fr;
    transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1);
  }
  .sh-file[data-open="true"] .sh-file__body{grid-template-rows:1fr 1fr}
  .sh-file__body > *{min-height:0;overflow:hidden}
  .sh-file[data-open="true"] > [data-sh-file]{box-shadow:none}
  .sh-index-files__span-2::after,.sh-index-files__span-18::after{inset-inline-end:auto;inset-inline-start:-10px}
}
@media (prefers-reduced-motion:reduce){
  .sh-file,.sh-file__body{transition:none}
  .sh-index-files__span-7::before,.sh-index-files__span-2::after,.sh-index-files__span-18::after{animation:none}
}
@media (max-width:640px){
  .sh-index-live-coverage__story{display:block;margin:6px 0 0;white-space:normal}
  .sh-index-live-coverage__story::before{content:none}
}
@media (max-width:999px){
  .sh-lc{grid-template-columns:minmax(0,1fr);gap:22px 0}
  .sh-lc__lead{aspect-ratio:4/3}
  .sh-lc__row{flex:0 0 auto}
  .sh-lc__list{overflow:visible}
}
@media (max-width:640px){
  .sh-lc__lead{aspect-ratio:3/2}
  .sh-lc__lead-body{padding:0 16px 16px;gap:8px}
  .sh-lc__lead-t{font-size:20px}
  .sh-lc__list{--sh-lc-spine:48px}
  .sh-lc__row{column-gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .sh-lc__lead-dot,.sh-lc__node,.sh-lc__row,.sh-lc__lead-img{animation:none}
  .sh-lc__node,.sh-lc__t{transition:none}
}

/* the live marks read as live by colour and label; the beat is the extra */
@media (prefers-reduced-motion:reduce){
  .sh-index-live-coverage__span-2,.sh-lc__row:first-of-type .sh-lc__node,
  .sh-lc__row[data-breaking] .sh-lc__node{animation:none}
}