/* The home page, version G (inc/home.php, template-parts/home-g.php, assets/js/home.js).
   Wide screens (1024 px and up): the six doors stand side by side, each value list slides up and down to the white
   line; the door that links the record to the one before opens wider.
   Narrower: the doors become six bands, one above the other, each list slides sideways to the white cell at its start;
   a band opens with its button. Colours: the six dimension colours of the mega menu. */

/* the colour behind the floating bar, on this page: the ink of the opening */
body.home.ed-head-on.home-g { --sec-bg: #1d1d1b; --sec-fg: #fff; --sec-muted: #cfcfca; --sec-line: rgba(255, 255, 255, .18); --sec-accent: #e8c26a; }
.editorial .site-main.hg { width: 100%; max-width: none; margin-inline: 0; padding: 0; }
.editorial .site-main.hg > * { margin-block: 0; } /* the sections set their own spacing: no white seam between the opening and the doors */
.hg { --ink: #1d1d1b; --gold: #e8c26a; --in: var(--wide, 1440px); background: #fff; color: var(--ink); }
.hg h1, .hg h2, .hg h3 { font-family: var(--font); }
.lang-ar .hg h1, .lang-ar .hg h2, .lang-ar .hg h3 { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; }

/* ================================================================ the opening */
.hg-open { background: var(--ink); color: #fff; padding-block-start: calc(var(--cap-h, 76px) + 40px); }
.hg-open__in { box-sizing: border-box; max-width: var(--in); margin-inline: auto; padding-inline: var(--edge); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; align-items: end; }
.hg-kick { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.lang-ar .hg-kick { font-size: 15px; letter-spacing: 0; text-transform: none; }
.hg .hg-title { margin: 0; color: #fff; font-size: clamp(36px, 4.4vw, 62px); line-height: .96; font-weight: 600; letter-spacing: -.05em; text-transform: uppercase; text-wrap: balance; }
.lang-ar .hg .hg-title { font-size: clamp(32px, 4vw, 56px); line-height: 1.3; }
.hg-lede { margin: 0; font-size: 16px; color: #cfcfca; }

.hg-ribbon { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.hg-ribbon a { display: block; color: inherit; text-decoration: none; }
.hg-ribbon img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: top; filter: grayscale(1); transition: filter .35s; }
.hg-ribbon a:hover img, .hg-ribbon a:focus-visible img { filter: none; }
.hg-ribbon__y { display: block; padding: 8px 10px 2px; border-top: 3px solid var(--gold); font-size: 14px; font-weight: 800; color: var(--gold); }
.hg-ribbon__n { display: block; padding: 0 10px 14px; font-size: 11.5px; line-height: 1.3; color: #b5b5b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Arabic names are longer («الشيخ سلامة حجازي»): two lines rather than a cut name (audit 2026-10-16) */
.lang-ar .hg-ribbon__n { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lang-ar .hg-ribbon__n { font-size: 13px; }
.hg-ribbon a:hover .hg-ribbon__n { color: #fff; }

.hg-open__doors { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding-block: 34px 26px; }
.hg .hg-h2 { margin: 0; color: #fff; font-size: clamp(28px, 3vw, 40px); line-height: 1; font-weight: 600; letter-spacing: -.045em; text-transform: uppercase; }
.lang-ar .hg .hg-h2 { line-height: 1.3; }
.hg-open__doors p { margin: 0; font-size: 16px; color: #cfcfca; }

/* ================================================================ the six doors */
.hg-doors-wrap { position: relative; }
.hg-doors { --cell: 72px; --line-y: 320px; position: relative; display: flex; height: clamp(620px, 80vh, 740px); background: var(--ink); }
.hg-door { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; overflow: clip; background: var(--c); color: var(--fg); border-inline-end: 1px solid var(--line); transition: flex-grow .8s cubic-bezier(.65, 0, .3, 1); }
.hg-door:last-child { border-inline-end: 0; }
.hg-door.is-open { flex-grow: 2.7; }
.hg-door__head { position: absolute; z-index: 3; inset-inline: 0; top: 0; padding: 26px 22px 40px; background: linear-gradient(var(--c) 72%, color-mix(in srgb, var(--c) 0%, transparent)); }
.hg .hg-door__name { margin: 0; color: inherit; font-size: 24px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-transform: none; }
.lang-ar .hg .hg-door__name { font-size: 24px; line-height: 1.3; }
.hg-door__name a { color: inherit; text-decoration: none; }
.hg-door__name a:hover { text-decoration: underline; }
.hg-door__count { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.hg-door__toggle { display: none; }
.hg-door__reel-wrap { position: absolute; inset: 0; overflow: hidden; overflow: clip; } /* clip: focusing a value never scrolls the list out of line */
.hg-door__reel { position: absolute; inset-inline: 0; top: var(--line-y); list-style: none; margin: 0; padding: 0; transform: translateY(calc(var(--i) * var(--cell) * -1 - var(--cell) / 2)); transition: transform 1.1s cubic-bezier(.7, 0, .25, 1); }
.hg-door__reel li { margin: 0; }
.hg-cell { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; height: var(--cell); padding: 0 18px; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: start; transition: background-color .6s, color .6s, box-shadow .6s; }
button.hg-cell { cursor: pointer; }
button.hg-cell:hover .hg-cell__m { text-decoration: underline; }
.hg-cell:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.hg-cell.is-on { background: #fff; color: var(--ink); }
.hg-door.is-kept .hg-cell.is-on { box-shadow: inset 0 0 0 3px var(--gold); }
.hg-cell__i { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; filter: grayscale(1); }
.hg-cell__t { display: block; min-width: 0; }
.hg-cell__m { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-cell__m[lang="ar"], .lang-ar .hg-cell__m { font-family: var(--font-ar); font-size: 17px; line-height: 1.45; }
.hg-door[data-door="periods"] .hg-cell__m { font-size: 22px; }
.hg-cell__s { display: block; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-ar .hg-cell__s { font-size: 13px; }
.hg-door__more { position: absolute; z-index: 3; inset-inline: 0; bottom: 0; padding: 56px 22px 24px; background: linear-gradient(color-mix(in srgb, var(--c) 0%, transparent), var(--c) 46px); }
.hg-door__more-in { max-height: 0; overflow: hidden; opacity: 0; transition: opacity .5s ease .25s, max-height .8s ease; }
.hg-door.is-open .hg-door__more-in { max-height: 300px; opacity: 1; }
.hg-door__desc { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.hg-bars { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; max-width: 360px; }
.hg-bars li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0; font-size: 12px; line-height: 1.4; }
.lang-ar .hg-bars li { font-size: 13px; }
.hg-bars__l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-bars__l[lang="ar"] { font-family: var(--font-ar); font-size: 13px; }
.hg-bars__b { height: 9px; width: var(--w); background: currentColor; opacity: .8; }
.hg-door__cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; font-size: 15px; font-weight: 800; text-decoration: none; border-bottom: 2px solid currentColor; }
.hg-door__cta:hover { color: inherit; opacity: .85; }
/* the white line: one record across the six doors */
.hg-doors::after { content: ''; position: absolute; z-index: 2; inset-inline: 0; top: var(--line-y); height: var(--cell); margin-top: calc(var(--cell) / -2); box-sizing: border-box; border-block: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }

/* ================================================================ the record on the line */
.hg-bar { background: var(--ink); color: #fff; }
.hg-bar__in { box-sizing: border-box; max-width: var(--in); margin-inline: auto; padding: 22px var(--edge) 24px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; align-items: center; }
.hg-bar__rec { display: flex; gap: 18px; align-items: center; min-width: 0; }
.hg-disc { flex: none; width: 76px; height: 76px; border-radius: 50%; background: repeating-radial-gradient(circle at center, #0c0c0c 0 2px, #262626 2px 4px); display: grid; place-items: center; }
.hg-disc span { width: 28px; height: 28px; border-radius: 50%; background: #5f6f35; }
.hg-bar__txt { min-width: 0; }
.hg-bar__txt p { margin: 0; }
.hg-bar__kick { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a3a39d; }
.lang-ar .hg-bar__kick { font-size: 13px; letter-spacing: 0; }
.hg-bar__title { margin-top: 2px !important; font-size: 17px; font-weight: 700; line-height: 1.4; }
.hg-bar__title [lang="ar"] { font-family: var(--font-ar); font-size: 21px; }
.hg-bar__tr { display: block; font-size: 14px; font-weight: 600; color: #cfcfca; }
.hg-bar__line { font-size: 13.5px; color: #cfcfca; }
.hg-bar__link { margin-top: 6px !important; font-size: 14px; font-weight: 700; color: var(--gold); }
.hg-bar__side { display: grid; gap: 14px; justify-items: end; min-width: 0; }
.hg-bar__ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.hg .hg-play { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 0; background: var(--gold); color: var(--ink); font: 700 14px/1.2 var(--font); cursor: pointer; }
.lang-ar .hg .hg-play { font-family: var(--font-ar); font-size: 15px; }
.hg-play:hover { background: #f2d58f; }
.hg-play svg .s { display: none; }
.hg-play.is-playing svg .p { display: none; }
.hg-play.is-playing svg .s { display: inline; }
.hg-btn { min-width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 0; background: transparent; color: #fff; font: 700 13px/1 var(--font); cursor: pointer; }
.lang-ar .hg-btn { font-family: var(--font-ar); font-size: 14px; }
.hg-btn:hover, .hg-btn[aria-pressed="true"] { background: #fff; color: var(--ink); }
.hg-btn--prev, .hg-btn--next { font-size: 20px; }
.lang-ar .hg-btn--prev, .lang-ar .hg-btn--next { font-family: var(--font); font-size: 20px; } /* responsive QA 2026-11-05: the Latin chevrons, full size */
[dir="rtl"] .hg-btn--prev span, [dir="rtl"] .hg-btn--next span { display: inline-block; direction: ltr; unicode-bidi: isolate; transform: scaleX(-1); }
.hg-chain { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; width: 100%; max-width: 560px; }
.hg-chain li { display: flex; align-items: center; flex: 1 1 0; margin: 0; }
.hg-chain li:last-child { flex: none; }
.hg-chain__dot { position: relative; flex: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.hg-chain__dot::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); background: repeating-radial-gradient(circle at center, #0c0c0c 0 1px, #2a2a2a 1px 2px); transition: inset .3s, border-color .3s; }
.hg-chain__dot[aria-current="true"]::before { inset: 1px; border-color: var(--gold); }
.hg-chain__dot:hover::before { border-color: #fff; }
.hg-chain__link { flex: 1; min-width: 6px; height: 4px; background: var(--lc); }
.hg-bar__ep { color: #fff; font-size: 14px; font-weight: 700; }
.hg-bar__ep:hover { color: var(--gold); }

/* ================================================================ sections below */
.hg-sec__in { box-sizing: border-box; max-width: var(--in); margin-inline: auto; padding: 80px var(--edge) 40px; }
.hg-sec__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; padding-bottom: 16px; margin-bottom: 32px; border-bottom: 1px solid #a8a8a0; }
.hg .hg-sec__title { margin: 0; font-size: clamp(34px, 4.2vw, 56px); line-height: .95; font-weight: 500; letter-spacing: -.045em; text-transform: uppercase; }
.lang-ar .hg .hg-sec__title { line-height: 1.3; font-weight: 600; }
.hg-sec__meta { margin: 0; font-size: 15px; color: #4a4a46; }
.hg-sec__meta b { color: var(--ink); }
.hg-sec__meta [lang="ar"] { font-family: var(--font-ar); }

.hg-pod__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: start; }
.hg-latest { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hg-latest__pic { position: relative; display: block; width: 100%; }
.hg-latest__pic img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }
.hg-latest__badge { position: absolute; inset-inline-start: 0; top: 0; padding: 8px 12px; background: #d4ad52; color: #1f1d16; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lang-ar .hg-latest__badge { font-size: 14px; letter-spacing: 0; }
.hg-latest__meta, .hg-latest__on { margin: 0; font-size: 13px; color: #5a5a56; }
.hg .hg-latest__title { margin: 0; font-size: 28px; line-height: 1.12; font-weight: 700; letter-spacing: -.03em; text-transform: none; }
.lang-ar .hg .hg-latest__title { line-height: 1.35; }
.hg-latest__title a { color: inherit; text-decoration: none; }
.hg-latest__title a:hover { text-decoration: underline; }
.hg-stories h3 { margin: 0 0 14px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; text-transform: none; }
.hg-stories__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
.hg-stories__grid li { margin: 0; }
.hg-story { display: block; color: inherit; text-decoration: none; }
.hg-story__pic { display: block; overflow: hidden; aspect-ratio: 1; background: #ececea; }
.hg-story__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hg-story:hover .hg-story__pic img { transform: scale(1.04); }
.hg-story__t { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.hg-story:hover .hg-story__t { text-decoration: underline; }
.hg-story__m { display: block; font-size: 12.5px; color: #5a5a56; }
.lang-ar .hg-story__m { font-size: 13.5px; }
.hg-story--all { box-sizing: border-box; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; background: #d4ad52; color: #1f1d16; }
.hg-story__k { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lang-ar .hg-story__k { font-size: 14px; letter-spacing: 0; }
.hg-story__big { font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.hg-story__go { font-size: 14px; font-weight: 700; }
.hg-progs { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.hg-progs li { margin: 0; }
.hg-progs a { display: block; height: 100%; box-sizing: border-box; padding: 16px 20px 4px; color: inherit; text-decoration: none; }
.hg-progs li + li a { border-inline-start: 1px solid #dadada; }
.hg-progs li:first-child a { padding-inline-start: 0; }
.hg-progs__n { display: flex; justify-content: space-between; gap: 8px; font-size: 19px; font-weight: 700; }
.hg-progs__n b { color: #8a6a1c; }
.hg-progs a:hover .hg-progs__n { text-decoration: underline; }
.hg-progs__d { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: #5a5a56; }

.hg-read .hg-sec__in { padding-block: 56px 88px; }
.hg-read__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.hg-read__grid li { margin: 0; }
.hg-card { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; border-top: 6px solid var(--c); padding-top: 16px; }
.hg-card__k { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ct); }
.lang-ar .hg-card__k { font-size: 14px; letter-spacing: 0; }
.hg-card__pic { display: block; overflow: hidden; background: #ececea; }
.hg-card__pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hg-card__t { font-size: 21px; font-weight: 700; line-height: 1.2; }
.hg-card:hover .hg-card__t { text-decoration: underline; }
.hg-card__m { font-size: 14px; color: #5a5a56; }

.hg-found { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.hg-found__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.hg-found__in { position: relative; box-sizing: border-box; width: 100%; max-width: var(--in); margin-inline: auto; padding: 56px var(--edge); }
.hg-found__box { max-width: 620px; padding: 32px 36px; background: #32365f; color: #fff; }
.hg .hg-found__t { margin: 0; color: #fff; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.22; font-weight: 600; letter-spacing: -.03em; text-transform: none; }
.lang-ar .hg .hg-found__t { line-height: 1.5; }
.hg-found__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; font-weight: 700; }
.hg-found__links a { color: #fff; }
.hg-found__links a:hover { color: var(--gold); }

/* ================================================================ laptops */
@media (min-width: 1024px) and (max-width: 1279px) {
	.hg-doors { --line-y: 300px; height: 680px; }
	.hg-door.is-open { flex-grow: 2.4; }
	.hg-door__head { padding: 22px 16px 36px; }
	.hg .hg-door__name { font-size: 20px; }
	.hg-cell { padding: 0 14px; }
	.hg-cell__i { width: 34px; height: 34px; }
	.hg-door__more { padding-inline: 16px; }
	.hg-stories__grid { gap: 14px 12px; }
}

/* ================================================================ tablets and phones: six bands */
@media (max-width: 1023px) {
	.hg-open__in, .hg-open__doors { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.hg-ribbon { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 112px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #555 transparent; padding-inline: var(--edge); scroll-padding-inline: var(--edge); }
	.hg-ribbon li { scroll-snap-align: start; }
	.hg-doors { --cw: 210px; --cell: 76px; flex-direction: column; height: auto; }
	.hg-doors::after { display: none; }
	.hg-door { display: grid; grid-template-columns: minmax(150px, 32%) minmax(0, 1fr) 52px; flex: none; border-inline-end: 0; border-bottom: 1px solid rgba(0, 0, 0, .2); overflow: visible; }
	.hg-door__head, .hg-door__reel-wrap, .hg-door__toggle { grid-row: 1; }
	.hg-door__head { position: static; display: flex; flex-direction: column; justify-content: center; min-height: var(--cell); box-sizing: border-box; padding: 10px 14px 10px var(--edge); background: none; }
	.hg .hg-door__name { font-size: 19px; }
	.hg-door__count { margin-top: 2px; font-size: 12.5px; }
	.hg-door__reel-wrap { position: relative; inset: auto; grid-column: 2; height: var(--cell); overflow: hidden; overflow: clip; }
	.hg-door__reel { display: flex; top: 0; bottom: 0; inset-inline: 8px auto; transform: translateX(calc(var(--i) * var(--cw) * -1)); }
	[dir="rtl"] .hg-door__reel { transform: translateX(calc(var(--i) * var(--cw))); }
	.hg-door__reel li { flex: none; width: var(--cw); }
	.hg-cell { height: var(--cell); padding: 0 14px; border-bottom: 0; border-inline-end: 1px solid var(--line); }
	.hg-door__toggle { display: flex; grid-column: 3; align-items: center; justify-content: center; width: 52px; min-height: var(--cell); padding: 0; border: 0; border-inline-start: 1px solid var(--line); background: rgba(0, 0, 0, .1); color: inherit; cursor: pointer; }
	.hg-door__toggle::before { content: ''; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s; }
	.hg-door__toggle[aria-expanded="true"]::before { transform: translateY(3px) rotate(-135deg); }
	.hg-door__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
	.hg-door__more { position: static; grid-column: 1 / -1; display: none; padding: 6px var(--edge) 20px; background: none; }
	.hg-door.is-expanded .hg-door__more { display: block; }
	.hg-door__more-in { max-height: none; opacity: 1; }
	.hg-bar__in { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.hg-bar__side { justify-items: start; }
	.hg-bar__ctl { justify-content: flex-start; }
	.hg-pod__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; }
	.hg-stories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hg-progs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hg-progs li:nth-child(3) a { padding-inline-start: 0; border-inline-start: 0; }
	.hg-progs li:nth-child(n+3) { border-top: 1px solid #dadada; }
	.hg-read__grid { gap: 20px; }
	.hg-card__t { font-size: 18px; }
}

@media (max-width: 640px) {
	.hg-open { padding-block-start: calc(var(--cap-h, 54px) + 28px); }
	.hg-ribbon { grid-auto-columns: 96px; margin-top: 26px; }
	.hg-doors { --cw: 172px; --cell: 72px; }
	.hg-door { grid-template-columns: minmax(118px, 36%) minmax(0, 1fr) 46px; }
	.hg-door__head { padding-inline: var(--edge) 10px; }
	.hg .hg-door__name { font-size: 16px; }
	.lang-ar .hg .hg-door__name { font-size: 17px; }
	.hg-door__count { font-size: 11.5px; }
	.hg-door__toggle { width: 46px; }
	.hg-cell { padding: 0 10px; gap: 8px; }
	.hg-cell__i { width: 32px; height: 32px; }
	.hg-cell__m { font-size: 14px; }
	.hg-door[data-door="periods"] .hg-cell__m { font-size: 19px; }
	.hg-disc { width: 56px; height: 56px; }
	.hg-disc span { width: 20px; height: 20px; }
	.hg-bar__ctl { gap: 6px; }
	.hg-chain__dot { width: 26px; height: 26px; }
	.hg-chain__dot::before { inset: 6px; }
	.hg-chain__link { min-width: 3px; }
	.hg-sec__in { padding-top: 56px; }
	.hg-pod__grid { grid-template-columns: minmax(0, 1fr); }
	.hg-stories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
	.hg-progs { grid-template-columns: minmax(0, 1fr); }
	.hg-progs li + li a { border-inline-start: 0; padding-inline-start: 0; }
	.hg-progs li + li { border-top: 1px solid #dadada; }
	.hg-progs a { padding-inline: 0; }
	.hg-read__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.hg-found { min-height: 0; padding-top: 180px; }
	.hg-found__box { padding: 24px 20px; }
}

/* ================================================================ version 2: the doors and their controls, one block
   The controls stay under the doors. On wide screens the doors are as tall as the screen allows (screen height minus
   the menu bar and the controls, --ctl-h measured by home-thread.js), so doors and controls fill one screen together.
   Screens too short for that: the controls ride the bottom edge of the screen while the doors are in view (.is-riding). */
:root { --rt-w: 144px; }
@media (min-width: 1024px) {
	.hg--v2 .hg-doors { --doors-h: clamp(540px, calc(100vh - var(--cap-h, 76px) - var(--ab-h, 0px) - var(--ctl-h, 170px)), 740px); --line-y: calc(var(--doors-h) * .44); height: var(--doors-h); }
}
@media (min-width: 1024px) and (max-height: 860px) {
	.hg--v2 .hg-bars li:nth-child(n+5) { display: none; } /* shorter doors: four bars when a door opens */
}
.hg-rest.is-riding { position: sticky; z-index: 20; bottom: 0; box-shadow: 0 -14px 28px rgba(0, 0, 0, .35); }
.hg--v2 .hg-open__doors { padding-block-end: 30px; }
.hg-rest { background: var(--ink); color: #fff; }
.hg-ctl { box-sizing: border-box; color: #fff; }
.hg-rest .hg-ctl { max-width: var(--in); margin-inline: auto; padding: 20px var(--edge) 22px; display: grid; grid-template-columns: minmax(0, 1fr) var(--rt-w) auto auto; grid-template-areas: "rec choose choose choose" "rec play nav ep" "rec trail trail trail"; gap: 10px 12px; align-items: center; }
.hg-ctl__rec { grid-area: rec; display: flex; gap: 18px; align-items: center; min-width: 0; }
.hg-ctl .hg-choose { grid-area: choose; position: relative; min-width: 0; }
.hg-ctl .hg-play { grid-area: play; box-sizing: border-box; width: var(--rt-w); justify-content: center; }
.hg-ctl__nav { grid-area: nav; display: flex; gap: 6px; }
.hg-ctl .hg-ep { grid-area: ep; }
.hg-ctl .hg-trail { grid-area: trail; }
.hg-ctl__txt { min-width: 0; }
.hg-ctl__txt p { margin: 0; }
.hg-ctl__kick { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a3a39d; }
.lang-ar .hg-ctl__kick { font-size: 13px; letter-spacing: 0; }
.hg-ctl__title { margin-top: 2px !important; font-size: 17px; font-weight: 700; line-height: 1.4; }
.hg-ctl__title bdi { font-family: var(--font-ar); font-size: 21px; }
.hg-ctl__tr { display: block; font-size: 14px; font-weight: 600; color: #cfcfca; }
.hg-ctl__by { font-size: 13.5px; color: #cfcfca; }
.hg-ctl__link { margin-top: 6px !important; font-size: 14px; font-weight: 700; color: var(--gold); }

/* the field and its suggestions */
.hg-choose__i { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: #a3a39d; pointer-events: none; }
.hg .hg-choose__in { box-sizing: border-box; width: 100%; height: 42px; margin: 0; padding-block: 0; padding-inline: 36px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 0; background: #262624; color: #fff; font: 500 14px/1 var(--font); }
.lang-ar .hg .hg-choose__in { font-family: var(--font-ar); font-size: 15px; }
.hg-choose__in::placeholder { color: #a3a39d; opacity: 1; }
.hg .hg-choose__in:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: transparent; }
.hg-choose__list { position: absolute; z-index: 40; inset-inline-start: 0; top: calc(100% + 4px); box-sizing: border-box; width: max(100%, 400px); max-width: calc(100vw - 2 * var(--edge)); max-height: 380px; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none; background: #2a2a28; color: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.hg-rest .hg-choose__list { top: auto; bottom: calc(100% + 4px); } /* under the doors the list opens upwards, over the doors */
.hg-opt { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 9px 14px; cursor: pointer; }
.hg-opt[aria-selected="true"], .hg-opt:hover { background: #3d3d3a; }
.hg-opt__c { width: 12px; height: 12px; background: var(--c); }
.hg-opt__t { min-width: 0; }
.hg-opt__m { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-opt__m[lang="ar"], .lang-ar .hg-opt__m { font-family: var(--font-ar); font-size: 16px; line-height: 1.45; }
.hg-opt__s { display: block; font-size: 12px; line-height: 1.3; color: #b5b5b0; }
.hg-opt__n { font-size: 12px; color: #b5b5b0; white-space: nowrap; }
.hg-opt--note { display: block; padding: 10px 14px; color: #b5b5b0; font-size: 13px; cursor: default; }

/* buttons, episode, trail */
.hg-btn--pause svg .p { display: none; }
.hg-btn--pause[aria-pressed="true"] svg .p { display: inline; }
.hg-btn--pause[aria-pressed="true"] svg .s { display: none; }
.hg-btn--pause[aria-pressed="true"] { background: transparent; color: #fff; }
.hg-btn--pause[aria-pressed="true"]:hover { background: #fff; color: var(--ink); }
.hg-ctl .hg-btn { display: inline-flex; align-items: center; justify-content: center; }
.hg-ep { color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.hg-ep:hover { color: var(--gold); }
.hg-trail { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; }
.hg-trail li { display: flex; align-items: center; flex: 1 1 0; min-width: 0; margin: 0; }
.hg-trail li:last-child { flex: none; }
.hg-trail__dot { position: relative; flex: none; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.hg-trail__dot::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); background: repeating-radial-gradient(circle at center, #0c0c0c 0 1px, #2a2a2a 1px 2px); transition: inset .3s, border-color .3s; }
.hg-trail__dot[aria-current="true"]::before { inset: 1px; border-color: var(--gold); }
.hg-trail__dot.is-ahead::before { border-style: dashed; opacity: .55; }
.hg-trail__dot:hover::before { border-color: #fff; opacity: 1; }
.hg-trail__link { flex: 1; min-width: 4px; height: 4px; background: var(--lc); }
.hg-door__same { display: inline-block; margin: 8px 0 0; padding: 3px 8px; background: #fff; color: var(--ink); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lang-ar .hg-door__same { font-size: 13px; letter-spacing: 0; }
.hg-door__same[hidden] { display: none; }
.hg-cell.is-new { animation: hg-in .5s ease both; }
@keyframes hg-in { from { opacity: 0; } to { opacity: 1; } }


@media (min-width: 1024px) and (max-width: 1279px) {
	.hg-rest .hg-ctl { gap: 10px; }
}
@media (max-width: 1023px) {
	.hg-rest .hg-ctl { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "rec rec rec" "choose choose choose" "play nav ep" "trail trail trail"; gap: 12px 10px; }
	.hg-ctl .hg-play { width: auto; min-width: 140px; }
	.hg-rest .hg-choose__list { top: calc(100% + 4px); bottom: auto; width: 100%; }
	.hg-door__same { margin-top: 4px; padding: 1px 6px; font-size: 10.5px; }
}
@media (max-width: 640px) {
	.hg-rest .hg-ctl { padding: 16px var(--edge) 18px; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "rec rec rec" "choose choose choose" "play nav ep" "trail trail trail"; gap: 10px 8px; }
	.hg-ctl__rec { gap: 12px; }
	.hg-rest .hg-disc { width: 44px; height: 44px; }
	.hg-rest .hg-disc span { width: 16px; height: 16px; }
	.hg-ctl__kick { display: none; }
	.hg-ctl__title { margin-top: 0 !important; }
	.hg-ctl__by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.hg-ctl__link { margin-top: 4px !important; font-size: 13px; }
	.hg-ctl .hg-play { min-width: 0; padding: 0 12px; }
	.hg-ctl .hg-btn { min-width: 40px; padding: 0 6px; }
	.hg-ctl .hg-ep { justify-self: end; font-size: 13px; }
	.hg-trail__dot { width: 24px; height: 24px; }
	.hg-trail__dot::before { inset: 5px; }
}

@media (prefers-reduced-motion: reduce) {
	.hg-cell.is-new { animation: none; }
}

/* ================================================================ responsive QA 2026-11-05 (upgrade/responsive-2026-11-05) */
/* year lines follow the direction of the name above them */
.hg-cell__m, .hg-cell__s { text-align: match-parent; }
@media (max-width: 1023px) {
	/* the "Same as the record before" tag made the door rows grow and shrink every 6.5 s: the gold frame and the bar sentence already say it */
	.hg-door__same { display: none; }
	.hg-door__reel-wrap { align-self: center; }
	/* ribbon names on two lines instead of cut stubs */
	.hg-ribbon__n { font-size: 12.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	.lang-ar .hg-ribbon__n { font-size: 13px; }
	/* door names and the episode link: 44px tap areas, same look */
	.hg-door__name a { display: inline-block; padding-block: 11px; margin-block: -11px; }
	.hg-ctl .hg-ep:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; } /* :not([hidden]): records without an episode keep the link hidden */
}
@media (max-width: 640px) { .hg-door__count { font-size: 12px; } .lang-ar .hg-door__count { font-size: 13px; } }
@media (max-width: 379px) { .hg-ctl .hg-ep { white-space: normal; text-align: end; line-height: 1.2; } }
/* touch screens and narrow windows: the choose field at 16px so iOS does not zoom the page */
@media (max-width: 1023px), (pointer: coarse) { .hg .hg-choose__in, .lang-ar .hg .hg-choose__in { font-size: 16px; } }
/* 1024-1279 (iPad landscape, small laptops): closed doors keep two lines of name, no chip over the cell; Arabic names fit */
@media (min-width: 1024px) and (max-width: 1279px) {
	.hg-cell { padding: 0 12px; gap: 8px; }
	.hg-cell__i { width: 28px; height: 28px; }
	.hg-door:not(.is-open) .hg-cell__m { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	.hg-door[data-door="periods"] .hg-cell__m { font-size: 19px; }
	.hg-door:not(.is-open) .hg-door__same { display: none; }
	.lang-ar .hg .hg-door__name { font-size: 20px; }
}
/* ribbon names: the bottom space is a border, so a third line never peeks under the two-line clamp */
.hg-ribbon__n { padding: 0 10px; border-bottom: 14px solid transparent; }
.lang-ar .hg-ribbon__n { line-height: 1.5; } /* the dots under the last line stay inside the clip */

/* responsive QA 2026-11-05, polish */
@media (min-width: 400px) and (max-width: 1023px) { .hg-door__reel-wrap { -webkit-mask-image: linear-gradient(to left, transparent, #000 32px); mask-image: linear-gradient(to left, transparent, #000 32px); } [dir="rtl"] .hg-door__reel-wrap { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); } }