/**
 * be7 — design system and site frame.
 *
 * RTL-first: written for Hebrew, using logical properties throughout, so there
 * is no separate rtl.css to keep in sync.
 *
 * Tokens mirror Elementor kit 137 so coded pages and legacy Elementor pages
 * sit next to each other without a visible seam.
 */

/* ---------- Fonts ---------- */

@font-face {
	font-family: "Almoni";
	src: url("../fonts/almoni-regular.woff2") format("woff2"),
	     url("../fonts/almoni-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: "Almoni";
	src: url("../fonts/almoni-bold.woff2") format("woff2"),
	     url("../fonts/almoni-bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: optional;
}

/* ---------- Tokens ---------- */

:root {
	/* Brand — from Elementor kit 137 */
	--be7-primary: #042c65;
	--be7-secondary: #111823;
	--be7-accent: #c8102e;

	/* Surfaces */
	--be7-bg: #ffffff;
	--be7-bg-muted: #f4f5f7;
	--be7-bg-dark: var(--be7-primary);
	--be7-border: #e5e5e5;

	/* Text — contrast checked against their own backgrounds */
	--be7-text: #111823;
	--be7-text-muted: #5a6270;
	--be7-text-on-dark: #ffffff;
	--be7-text-on-dark-muted: #c3cddc;

	/* Type */
	--be7-font: "Almoni", "Rubik", "Segoe UI", system-ui, sans-serif;
	--be7-fs-xs: 0.75rem;
	--be7-fs-sm: 0.875rem;
	--be7-fs-base: 1rem;
	--be7-fs-lg: 1.3rem;
	--be7-fs-xl: 1.375rem;
	--be7-fs-2xl: 1.75rem;
	--be7-fs-3xl: 2.25rem;
	--be7-lh-tight: 1.2;
	--be7-lh-base: 1.6;

	/* Space */
	--be7-space-1: 0.25rem;
	--be7-space-2: 0.5rem;
	--be7-space-3: 0.75rem;
	--be7-space-4: 1rem;
	--be7-space-5: 1.5rem;
	--be7-space-6: 2rem;
	--be7-space-8: 3rem;

	/* Layout — 1370px matches the Elementor kit container */
	--be7-container: 1370px;
	--be7-gutter: 1rem;
	--be7-radius: 4px;
	--be7-header-height: 64px;
	--be7-section-gap: 2rem;
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--be7-bg);
	color: var(--be7-text);
	font-family: var(--be7-font);
	font-size: var(--be7-fs-base);
	line-height: var(--be7-lh-base);
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
	line-height: var(--be7-lh-tight);
	font-weight: 700;
	text-wrap: balance;
}

img,
picture,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Accessibility ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--be7-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.be7-skip-link {
	/*
	 * Parked ABOVE the viewport, not ten thousand pixels to the side. The
	 * sideways park looked harmless on screen, but Chrome's print layout
	 * counts it as page width — in RTL that shifted every printed article
	 * off the left edge of the paper.
	 */
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	transform: translateY(-120%);
	z-index: 999;
	padding: var(--be7-space-3) var(--be7-space-4);
	background: var(--be7-primary);
	color: var(--be7-text-on-dark);
	font-weight: 700;
}

.be7-skip-link:focus {
	transform: none;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: var(--be7-space-3);
	position: static;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Layout ---------- */

.be7-container {
	width: 100%;
	max-width: var(--be7-container);
	margin-inline: auto;
	padding-inline: var(--be7-gutter);
}

.be7-site-main {
	min-height: 50vh;
	padding-block: var(--be7-space-6);
}

/* ---------- Header ---------- */

.be7-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--be7-primary);
	color: var(--be7-text-on-dark);
}

/* Thin utility strip: supplements, sections, Hebrew date. */
.be7-topbar {
	display: none;
	border-block-end: 1px solid rgb(255 255 255 / 0.15);
	font-size: var(--be7-fs-sm);
}

@media (min-width: 1025px) {
	.be7-topbar {
		display: block;
	}
}

.be7-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--be7-space-4);
	min-height: 36px;
}

.be7-topbar__menu {
	display: flex;
	align-items: center;
	gap: var(--be7-space-4);
	flex-wrap: wrap;
}

.be7-header .be7-topbar__menu a {
	color: var(--be7-text-on-dark-muted);
	padding-block: var(--be7-space-1);
}

.be7-topbar__menu a:hover,
.be7-topbar__menu a:focus-visible {
	color: var(--be7-text-on-dark);
}

.be7-datestrip {
	display: flex;
	align-items: center;
	gap: var(--be7-space-2);
	color: var(--be7-text-on-dark-muted);
	white-space: nowrap;
}

.be7-datestrip__clock {
	font-variant-numeric: tabular-nums;
}

/* Main bar: logo, search, drawer toggle. */
.be7-masthead {
	display: flex;
	align-items: center;
	gap: var(--be7-space-4);
	min-height: var(--be7-header-height);
}

.be7-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.be7-logo img {
	max-height: 44px;
	width: auto;
}

.be7-logo--text {
	font-size: var(--be7-fs-2xl);
	font-weight: 700;
	color: var(--be7-text-on-dark);
}

.be7-masthead__actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: var(--be7-space-2);
}

.be7-header .be7-iconbtn,
.be7-drawer .be7-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--be7-space-2);
	min-width: 44px;
	min-height: 44px;
	padding: var(--be7-space-2);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--be7-radius);
	color: var(--be7-text-on-dark);
	cursor: pointer;
}

.be7-iconbtn:hover,
.be7-iconbtn:focus-visible {
	background: rgb(255 255 255 / 0.12);
}

.be7-header .be7-iconbtn svg,
.be7-drawer .be7-iconbtn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.be7-header .be7-whatsapp-cta {
	display: none;
	align-items: center;
	gap: var(--be7-space-2);
	padding-inline: var(--be7-space-3);
	font-size: var(--be7-fs-sm);
	font-weight: 700;
	background: #25d366;
	color: #06331a;
	border-radius: var(--be7-radius);
	min-height: 40px;
}

@media (min-width: 1025px) {
	.be7-header .be7-whatsapp-cta {
		display: inline-flex;
	}
}

.be7-whatsapp-cta:hover,
.be7-whatsapp-cta:focus-visible {
	filter: brightness(0.95);
	text-decoration: none;
}

/* Search: a normal GET form, revealed by the toggle. Available on every
   breakpoint — the old site had no mobile search at all. */
.be7-search {
	display: none;
	padding-block: var(--be7-space-3);
	border-block-start: 1px solid rgb(255 255 255 / 0.15);
}

.be7-search.is-open {
	display: block;
}

.be7-search__form {
	display: flex;
	gap: var(--be7-space-2);
	max-width: 640px;
	margin-inline: auto;
}

.be7-search__field {
	flex: 1;
	min-height: 44px;
	padding-inline: var(--be7-space-3);
	border: 1px solid transparent;
	border-radius: var(--be7-radius);
	background: var(--be7-bg);
	color: var(--be7-text);
}

.be7-search__submit {
	min-height: 44px;
	padding-inline: var(--be7-space-5);
	border: 0;
	border-radius: var(--be7-radius);
	background: var(--be7-primary, #042c65);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

/* Category navigation. Desktop: wraps to at most two rows. Mobile: a single
   horizontally scrollable row, the usual pattern on news sites. */
.be7-nav {
	background: var(--be7-secondary);
}

.be7-nav__list {
	display: flex;
	align-items: center;
	gap: var(--be7-space-1);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.be7-nav__list::-webkit-scrollbar {
	display: none;
}

@media (min-width: 1025px) {
	.be7-nav__list {
		flex-wrap: wrap;
		overflow-x: visible;
		justify-content: center;
	}
}

.be7-header .be7-nav__list a {
	display: block;
	padding: var(--be7-space-3) var(--be7-space-3);
	color: var(--be7-text-on-dark);
	font-size: var(--be7-fs-sm);
	font-weight: 700;
	white-space: nowrap;
	border-block-end: 3px solid transparent;
}

.be7-nav__list a:hover,
.be7-nav__list a:focus-visible {
	border-block-end-color: var(--be7-accent);
	text-decoration: none;
}

.be7-header .be7-nav__list .current-menu-item > a {
	border-block-end-color: var(--be7-accent);
}

/* A child category marks its parent as an ancestor too, which looked like two
   active items. The parent gets a quieter hint instead. */
.be7-header .be7-nav__list .current-category-ancestor:not(.current-menu-item) > a {
	border-block-end-color: rgb(255 255 255 / 0.35);
}

/* Mobile drawer */
.be7-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
}

.be7-drawer.is-open {
	display: block;
}

.be7-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.5);
	cursor: pointer;
}

.be7-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(320px, 85vw);
	background: var(--be7-bg);
	color: var(--be7-text);
	padding: var(--be7-space-4);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--be7-space-4);
}

.be7-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block-end: var(--be7-space-3);
	border-block-end: 1px solid var(--be7-border);
}

.be7-drawer__title {
	font-size: var(--be7-fs-lg);
}

/* The drawer panel is light, so its controls invert the header's colours. */
.be7-drawer .be7-iconbtn.be7-drawer__close {
	color: var(--be7-text);
}

.be7-drawer .be7-iconbtn.be7-drawer__close:hover,
.be7-drawer .be7-iconbtn.be7-drawer__close:focus-visible {
	background: var(--be7-bg-muted);
}

.be7-drawer .be7-drawer__menu a {
	display: block;
	padding: var(--be7-space-3) var(--be7-space-2);
	border-block-end: 1px solid var(--be7-border);
	font-weight: 700;
}

.be7-drawer__meta {
	color: var(--be7-text-muted);
	font-size: var(--be7-fs-sm);
	margin-block-start: auto;
	padding-block-start: var(--be7-space-4);
	border-block-start: 1px solid var(--be7-border);
}

/* ---------- Footer ---------- */

.be7-footer {
	margin-block-start: var(--be7-space-8);
	background: var(--be7-primary);
	color: var(--be7-text-on-dark);
	padding-block: var(--be7-space-6) var(--be7-space-4);
}

.be7-footer__grid {
	display: grid;
	gap: var(--be7-space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.be7-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}
}

.be7-footer__brand img {
	max-height: 56px;
	width: auto;
}

.be7-footer__tagline {
	margin-block-start: var(--be7-space-3);
	color: var(--be7-text-on-dark-muted);
	font-size: var(--be7-fs-sm);
	max-width: 32ch;
}

.be7-footer__heading {
	font-size: var(--be7-fs-base);
	margin-block-end: var(--be7-space-3);
}

.be7-footer .be7-footer__menu a {
	display: block;
	padding-block: var(--be7-space-2);
	color: var(--be7-text-on-dark-muted);
	font-size: var(--be7-fs-sm);
}

.be7-footer__menu a:hover,
.be7-footer__menu a:focus-visible {
	color: var(--be7-text-on-dark);
}

.be7-social {
	display: flex;
	gap: var(--be7-space-2);
	margin-block-start: var(--be7-space-4);
}

.be7-footer .be7-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgb(255 255 255 / 0.25);
	border-radius: 50%;
	color: var(--be7-text-on-dark);
}

.be7-social a:hover,
.be7-social a:focus-visible {
	background: rgb(255 255 255 / 0.12);
}

.be7-social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.be7-footer__bottom {
	margin-block-start: var(--be7-space-6);
	padding-block-start: var(--be7-space-4);
	border-block-start: 1px solid rgb(255 255 255 / 0.15);
	display: flex;
	flex-wrap: wrap;
	gap: var(--be7-space-3);
	justify-content: space-between;
	color: var(--be7-text-on-dark-muted);
	font-size: var(--be7-fs-sm);
}

/* ---------- Content primitives (placeholders fill in over the next days) ---------- */

.entry-content {
	max-width: 800px;
	font-size: var(--be7-fs-lg);
}

.entry-content > * + * {
	margin-block-start: var(--be7-space-4);
}

.entry-content a {
	color: var(--be7-primary);
	text-decoration: underline;
}

.be7-page-title {
	font-size: var(--be7-fs-3xl);
	margin-block-end: var(--be7-space-5);
}

.be7-postlist {
	display: grid;
	gap: var(--be7-space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.be7-postlist {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.be7-postlist {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Card ---------- */

/* The fixed ratio is what makes every card in a row the same height,
   regardless of the source image's own proportions. */
.be7-card__media {
	aspect-ratio: 3 / 2;
	background: var(--be7-bg-muted);
	overflow: hidden;
	border-radius: var(--be7-radius);
}

.be7-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--be7-focal, 50% 30%);
}

article.be7-card .be7-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--be7-space-3);
	height: 100%;
}

.be7-card__link:hover,
.be7-card__link:focus-visible {
	text-decoration: none;
}

.be7-card__link:hover .be7-card__title {
	color: var(--be7-hover, #005799);
}

.be7-card__eyebrow {
	display: inline-block;
	color: var(--be7-primary);
	font-size: var(--be7-fs-xs);
	font-weight: 700;
}

article.be7-card .be7-card__title {
	font-size: var(--be7-fs-lg);
}

.be7-card__deck {
	color: var(--be7-text-muted);
	font-size: var(--be7-fs-sm);
}

.be7-card__meta {
	margin-block-start: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--be7-space-2);
	color: var(--be7-text-muted);
	font-size: var(--be7-fs-xs);
}

/* ---------- Pagination ---------- */

.pagination {
	margin-block-start: var(--be7-space-6);
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: flex;
	gap: var(--be7-space-2);
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--be7-space-2);
	border: 1px solid var(--be7-border);
	border-radius: var(--be7-radius);
}

.pagination .page-numbers.current {
	background: var(--be7-primary);
	border-color: var(--be7-primary);
	color: var(--be7-text-on-dark);
}

/* ---------- Ad slots ---------- */

/* The slot reserves its height from the declared ratio before the creative
   loads, so a banner can never push the article down as it arrives. Slots with
   no scheduled banner render no markup at all, so there is no empty gap. */
.be7-ad {
	display: block;
	margin-inline: auto;
	margin-block: var(--be7-space-5);
	max-width: var(--be7-container);
	aspect-ratio: var(--be7-ad-ratio, 2000 / 300);
	background: var(--be7-bg-muted);
	overflow: hidden;
}

.be7-ad a,
.be7-ad img,
.be7-ad picture {
	display: block;
	width: 100%;
	height: 100%;
}

.be7-ad img {
	object-fit: contain;
}

.be7-ad--sidebar {
	margin-block: 0;
}

.be7-ad--desktop-only {
	display: none;
}

@media (min-width: 768px) {
	.be7-ad--desktop-only {
		display: block;
	}

	.be7-ad--mobile-only {
		display: none;
	}
}

/* ---------- Article ---------- */

.be7-article-layout {
	display: grid;
	gap: var(--be7-space-6);
	/* minmax(0, …): a bare 1fr lets wide content (a scrolling strip of tabs,
	   a table) push the column past the phone's width. */
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1025px) {
	.be7-article-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		align-items: start;
	}

	.be7-article__sidebar {
		position: sticky;
		/* Clears the folded header (~58px) with air to spare; the unfolded
		   header only matters before any scroll, when sticky is not engaged. */
		top: 96px;
	}
}

.be7-article__header {
	margin-block-end: var(--be7-space-5);
}

.be7-article .be7-article__eyebrow {
	display: inline-block;
	color: var(--be7-accent);
	font-weight: 700;
	font-size: var(--be7-fs-sm);
	margin-block-end: var(--be7-space-2);
}

.be7-article__title {
	font-size: var(--be7-fs-3xl);
	max-width: 20ch;
	line-height: 1.18;
}

@media (min-width: 768px) {
	.be7-article__title {
		font-size: 2.75rem;
	}
}

.be7-article__deck {
	margin-block-start: var(--be7-space-3);
	font-size: var(--be7-fs-xl);
	color: var(--be7-text-muted);
	font-weight: 400;
	max-width: 55ch;
	line-height: 1.4;
}

.be7-article__meta {
	margin-block-start: var(--be7-space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--be7-space-2);
	align-items: center;
	color: var(--be7-text-muted);
	font-size: var(--be7-fs-sm);
}

.be7-article__byline {
	font-weight: 700;
	color: var(--be7-text);
}

.be7-article__media {
	margin-block-end: var(--be7-space-5);
}

.be7-article__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: var(--be7-focal, 50% 30%);
	border-radius: var(--be7-radius);
}

.be7-article__media--video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--be7-radius);
}

.be7-article__figcaption {
	margin-block-start: var(--be7-space-2);
	display: flex;
	flex-wrap: wrap;
	gap: var(--be7-space-2);
	font-size: var(--be7-fs-sm);
	color: var(--be7-text-muted);
}

/* Photographer credit is its own field, styled consistently — never mixed into
   the alt text or the caption (spec 4א). */
.be7-article__credit::before {
	content: "צילום: ";
}

.be7-article__tags {
	margin-block-start: var(--be7-space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--be7-space-2);
}

.be7-article__tags a {
	padding: var(--be7-space-1) var(--be7-space-3);
	background: var(--be7-bg-muted);
	border-radius: 999px;
	font-size: var(--be7-fs-sm);
	color: var(--be7-text-muted);
}

/* ---------- Share ---------- */

.be7-share {
	margin-block-start: var(--be7-space-6);
	padding-block: var(--be7-space-4);
	border-block: 1px solid var(--be7-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--be7-space-3);
}

.be7-share__title {
	font-size: var(--be7-fs-base);
	margin: 0;
}

.be7-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--be7-space-2);
}

.be7-share .be7-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--be7-border);
	border-radius: 50%;
	background: transparent;
	color: var(--be7-text);
	cursor: pointer;
}

.be7-share .be7-share__btn:hover,
.be7-share .be7-share__btn:focus-visible {
	background: var(--be7-bg-muted);
	text-decoration: none;
}

.be7-share__btn svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.be7-share__btn--copy svg {
	fill: none;
}

.be7-share__status {
	flex-basis: 100%;
	font-size: var(--be7-fs-sm);
	color: var(--be7-text-muted);
	min-height: 1.5em;
}

/* ---------- Sections ---------- */

.be7-section-title {
	font-size: var(--be7-fs-2xl);
	margin-block-end: var(--be7-space-4);
	padding-block-end: var(--be7-space-2);
	border-block-end: 3px solid var(--be7-primary);
}

.be7-related {
	margin-block-start: var(--be7-space-8);
	padding-block: var(--be7-space-6);
	background: var(--be7-bg-muted);
}

.be7-archive-header {
	margin-block-end: var(--be7-space-5);
}

.be7-archive-header__description {
	margin-block-start: var(--be7-space-2);
	color: var(--be7-text-muted);
	max-width: 60ch;
}

/* ---------- Headline clamping ---------- */

/*
 * Headlines are allowed to run longer than the old 55-character cap, so cards
 * clamp instead of relying on editors to self-censor: every card in a row keeps
 * the same height whatever the title length, and the full headline is always
 * shown on the article itself.
 */
.be7-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.be7-card__deck {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.be7-article__title {
	max-width: 24ch;
}

/* ---------- Byline link ---------- */

.be7-article__byline .be7-byline-link {
	color: var(--be7-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--be7-border);
}

.be7-article__byline .be7-byline-link:hover,
.be7-article__byline .be7-byline-link:focus-visible {
	text-decoration-color: currentColor;
}

/* ---------- Homepage ---------- */

/* One rhythm for every homepage band, so the vertical spacing between
   sections never varies with what the section happens to contain. */
.be7-home-section {
	margin-block-end: var(--be7-section-gap);
}

.be7-podcasts {
	margin-block: var(--be7-section-gap);
}

/* Lead story */
.be7-hero__link {
	display: grid;
	gap: var(--be7-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.be7-hero__link {
		grid-template-columns: 1.4fr 1fr;
		align-items: center;
		gap: var(--be7-space-6);
	}
}

.be7-hero__link:hover,
.be7-hero__link:focus-visible {
	text-decoration: none;
}

.be7-hero__link:hover .be7-hero__title {
	color: var(--be7-hover, #005799);
}

.be7-hero__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--be7-radius);
	background: var(--be7-bg-muted);
}

.be7-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--be7-focal, 50% 30%);
}

.be7-hero__eyebrow {
	color: var(--be7-accent);
	font-weight: 700;
	font-size: var(--be7-fs-sm);
}

.be7-hero__title {
	margin-block-start: var(--be7-space-2);
	font-size: var(--be7-fs-2xl);
}

@media (min-width: 768px) {
	.be7-hero__title {
		font-size: 2.25rem;
	}
}

.be7-hero__deck {
	margin-block-start: var(--be7-space-3);
	color: var(--be7-text-muted);
	font-size: var(--be7-fs-lg);
}

.be7-hero__meta {
	margin-block-start: var(--be7-space-3);
	display: flex;
	gap: var(--be7-space-2);
	color: var(--be7-text-muted);
	font-size: var(--be7-fs-sm);
}

/* Carousel: a scroll-snapping row, not a JS slider — nothing to initialise,
   and it stays usable with the keyboard and on touch. */
.be7-carousel {
	display: flex;
	gap: var(--be7-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: var(--be7-space-2);
	scrollbar-width: thin;
}

/*
 * Items were a fixed 150px, so on a 1370px desktop five of them used 814px and
 * left 524px of dead space. They now share the row: fixed width only while the
 * row genuinely needs to scroll (mobile), and equal flexible columns once there
 * is room for all of them.
 */
.be7-carousel__item {
	flex: 0 0 auto;
	width: 45vw;
	max-width: 200px;
	scroll-snap-align: start;
	text-align: center;
}

@media (min-width: 768px) {
	.be7-carousel {
		overflow-x: visible;
	}

	.be7-carousel__item {
		flex: 1 1 0;
		width: auto;
		max-width: none;
	}
}

.be7-carousel__media {
	display: block;
	width: 100%;
	max-width: 160px;
	aspect-ratio: 1;
	margin-inline: auto;
	border-radius: 50%;
	overflow: hidden;
	background: var(--be7-bg-muted);
}

.be7-carousel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--be7-focal, 50% 30%);
}

.be7-carousel__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-block-start: var(--be7-space-2);
	font-size: var(--be7-fs-sm);
	font-weight: 700;
}

.be7-postlist--3 {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.be7-postlist--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1025px) {
	.be7-postlist--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.be7-section-title a {
	color: inherit;
}

/* Podcasts */
.be7-podcasts {
	padding-block: var(--be7-space-6);
	background: var(--be7-primary);
	color: var(--be7-text-on-dark);
}

.be7-podcasts__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--be7-space-3);
}

.be7-section-title--light {
	border-block-end-color: rgb(255 255 255 / 0.3);
	color: var(--be7-text-on-dark);
	flex: 1;
}

.be7-podcasts .be7-podcasts__all {
	color: var(--be7-text-on-dark);
	font-size: var(--be7-fs-sm);
	font-weight: 700;
}

.be7-podcast-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--be7-radius);
	overflow: hidden;
	background: rgb(255 255 255 / 0.1);
}

.be7-podcast-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.be7-podcast-card__play {
	position: absolute;
	inset-block-end: var(--be7-space-2);
	inset-inline-start: var(--be7-space-2);
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.6);
}

.be7-podcast-card__play svg {
	width: 22px;
	height: 22px;
	fill: #fff;
}

.be7-podcast-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-block-start: var(--be7-space-3);
	font-size: var(--be7-fs-base);
	color: var(--be7-text-on-dark);
}

.be7-podcasts a:hover .be7-podcast-card__title,
.be7-podcasts a:focus-visible .be7-podcast-card__title {
	color: var(--be7-hover-on-dark, #8FE8EC);
}

/* ---------- Writer archive ---------- */

.be7-writer-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--be7-space-5);
	margin-block-end: var(--be7-space-6);
	padding-block-end: var(--be7-space-5);
	border-block-end: 1px solid var(--be7-border);
}

.be7-writer-header__photo img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	object-position: var(--be7-focal, 50% 25%);
}

.be7-writer-header__text {
	flex: 1 1 20rem;
}

.be7-writer-header .be7-page-title {
	margin-block-end: var(--be7-space-2);
}

.be7-writer-header__role {
	color: var(--be7-accent);
	font-weight: 700;
}

.be7-writer-header__bio {
	margin-block-start: var(--be7-space-3);
	color: var(--be7-text-muted);
	max-width: 65ch;
}

.be7-writer-header__count {
	margin-block-start: var(--be7-space-3);
	font-size: var(--be7-fs-sm);
	color: var(--be7-text-muted);
}

/* ---------- Paging ---------- */

.be7-paging {
	margin-block-start: var(--be7-space-6);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--be7-space-3);
}

.be7-paging__count {
	font-size: var(--be7-fs-sm);
	color: var(--be7-text-muted);
}

.be7-paging .be7-loadmore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-inline: var(--be7-space-6);
	border: 1px solid var(--be7-primary);
	border-radius: var(--be7-radius);
	background: transparent;
	color: var(--be7-primary);
	font-weight: 700;
	cursor: pointer;
}

.be7-paging .be7-loadmore:hover,
.be7-paging .be7-loadmore:focus-visible {
	background: var(--be7-primary);
	color: var(--be7-text-on-dark);
	text-decoration: none;
}

.be7-loadmore:disabled {
	opacity: 0.6;
	cursor: default;
}

.be7-loadmore__status {
	font-size: var(--be7-fs-sm);
	color: var(--be7-text-muted);
	min-height: 1.5em;
}

/* ---------- Podcasts ---------- */

.be7-embeds {
	margin-block-end: var(--be7-space-5);
	display: grid;
	gap: var(--be7-space-4);
}

/* Fixed ratio so the player cannot shift the page while it loads. */
.be7-embed--video iframe,
.be7-embed--video > * {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--be7-radius);
}

.be7-embed--audio iframe {
	width: 100%;
	height: 152px;
	border: 0;
	border-radius: 12px;
}

.be7-card__media--16x9 {
	position: relative;
	aspect-ratio: 16 / 9;
}

.be7-shows {
	margin-block-end: var(--be7-space-6);
}

.be7-shows__list {
	display: grid;
	gap: var(--be7-space-4);
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.be7-show-card a {
	display: flex;
	align-items: center;
	gap: var(--be7-space-3);
	padding: var(--be7-space-3);
	border: 1px solid var(--be7-border);
	border-radius: var(--be7-radius);
	height: 100%;
}

.be7-show-card a:hover,
.be7-show-card a:focus-visible {
	border-color: var(--be7-primary);
	text-decoration: none;
}

.be7-show-card__media img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.be7-show-card__name {
	display: block;
	font-weight: 700;
}

.be7-show-card__count {
	display: block;
	font-size: var(--be7-fs-sm);
	color: var(--be7-text-muted);
}

.be7-show-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--be7-space-2);
	margin-block-start: var(--be7-space-3);
}

.be7-show-links a {
	display: inline-block;
	padding: var(--be7-space-2) var(--be7-space-4);
	border: 1px solid var(--be7-primary);
	border-radius: 999px;
	font-size: var(--be7-fs-sm);
	font-weight: 700;
	color: var(--be7-primary);
}

.be7-show-links a:hover,
.be7-show-links a:focus-visible {
	background: var(--be7-primary);
	color: var(--be7-text-on-dark);
	text-decoration: none;
}

/* ---------- Popup and interstitial ---------- */

.be7-popup {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	padding: var(--be7-space-4);
}

.be7-popup[hidden] {
	display: none;
}

.be7-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.6);
	cursor: pointer;
}

.be7-popup__panel {
	position: relative;
	max-width: min(600px, 100%);
	background: var(--be7-bg);
	border-radius: var(--be7-radius);
	overflow: hidden;
}

.be7-popup__panel img {
	width: 100%;
	height: auto;
}

.be7-popup__close {
	position: absolute;
	inset-block-start: var(--be7-space-2);
	inset-inline-end: var(--be7-space-2);
	z-index: 1;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.9);
	color: var(--be7-text);
	cursor: pointer;
}

.be7-popup__close svg {
	width: 20px;
	height: 20px;
}

/* Interstitial: the whole screen, with the way out always visible. */
.be7-popup--interstitial .be7-popup__backdrop {
	background: rgb(0 0 0 / 0.9);
}

.be7-popup--interstitial .be7-popup__panel {
	max-width: min(900px, 100%);
	background: transparent;
	text-align: center;
}

.be7-popup__skip {
	margin-block-start: var(--be7-space-4);
}

.be7-popup__skip-btn {
	min-height: 48px;
	padding-inline: var(--be7-space-6);
	border: 0;
	border-radius: var(--be7-radius);
	background: var(--be7-bg);
	color: var(--be7-text);
	font-weight: 700;
	cursor: pointer;
}

.be7-popup__skip-btn:disabled {
	opacity: 0.7;
	cursor: default;
}

/* ---------- Recommendations ---------- */

.be7-recs {
	margin-block: var(--be7-space-6);
}

.be7-recs__title {
	font-size: var(--be7-fs-xl);
	margin-block-end: var(--be7-space-4);
	padding-block-end: var(--be7-space-2);
	border-block-end: 3px solid var(--be7-accent);
}

.be7-recs__list {
	display: grid;
	gap: var(--be7-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.be7-recs__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {
	.be7-recs--end .be7-recs__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.be7-rec__link {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: var(--be7-space-3);
	align-items: start;
	height: 100%;
}

@media (min-width: 1025px) {
	.be7-recs--end .be7-rec__link {
		grid-template-columns: 1fr;
	}
}

.be7-rec__link:hover,
.be7-rec__link:focus-visible {
	text-decoration: none;
}

.be7-rec__link:hover .be7-rec__title {
	color: var(--be7-hover, #005799);
}

.be7-rec__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--be7-radius);
	background: var(--be7-bg-muted);
}

.be7-rec__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--be7-focal, 50% 30%);
}

/* The reason is the point of the block: it tells the reader why this, and it
   is what makes the row feel chosen rather than filtered. */
.be7-rec__reason {
	display: block;
	font-size: var(--be7-fs-xs);
	font-weight: 700;
	color: var(--be7-accent);
	margin-block-end: var(--be7-space-1);
}

.be7-rec__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 700;
	line-height: var(--be7-lh-tight);
}

/* Inline block: visibly an aside, not the next section of the article. */
.be7-recs--inline {
	margin-block: var(--be7-space-6);
	padding: var(--be7-space-4);
	background: var(--be7-bg-muted);
	border-radius: var(--be7-radius);
	max-width: 800px;
}

.be7-recs--inline .be7-recs__title {
	font-size: var(--be7-fs-base);
	border-block-end: 0;
	padding-block-end: 0;
	color: var(--be7-text-muted);
}

.be7-archive-header__kicker {
	color: var(--be7-accent);
	font-weight: 700;
	font-size: var(--be7-fs-sm);
	margin-block-end: var(--be7-space-1);
}

/* ---------- Highlighted article band ---------- */

/* A wide band on a dark ground, so it reads as a break in the page rather than
   another row of cards. */
.be7-highlight {
	margin-block: var(--be7-section-gap);
	padding-block: var(--be7-space-6);
	background: var(--be7-secondary);
	color: var(--be7-text-on-dark);
}

.be7-highlight__link {
	display: grid;
	gap: var(--be7-space-5);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 768px) {
	.be7-highlight__link {
		grid-template-columns: 1.2fr 1fr;
	}
}

.be7-highlight__link:hover,
.be7-highlight__link:focus-visible {
	text-decoration: none;
}

.be7-highlight__link:hover .be7-highlight__title {
	color: var(--be7-hover-on-dark, #8FE8EC);
}

.be7-highlight__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--be7-radius);
	background: rgb(255 255 255 / 0.08);
}

.be7-highlight__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--be7-focal, 50% 30%);
}

.be7-highlight__eyebrow {
	display: inline-block;
	color: #ffd166;
	font-weight: 700;
	font-size: var(--be7-fs-sm);
	margin-block-end: var(--be7-space-2);
}

.be7-highlight__title {
	font-size: var(--be7-fs-2xl);
	color: var(--be7-text-on-dark);
}

@media (min-width: 768px) {
	.be7-highlight__title {
		font-size: 2rem;
	}
}

.be7-highlight__deck {
	margin-block-start: var(--be7-space-3);
	color: var(--be7-text-on-dark-muted);
	font-size: var(--be7-fs-lg);
}

.be7-highlight__meta {
	margin-block-start: var(--be7-space-3);
	display: flex;
	gap: var(--be7-space-2);
	color: var(--be7-text-on-dark-muted);
	font-size: var(--be7-fs-sm);
}

/* Carousel card: category, headline, byline. */
.be7-carousel__eyebrow {
	display: block;
	margin-block-start: var(--be7-space-2);
	font-size: var(--be7-fs-xs);
	font-weight: 700;
	color: var(--be7-accent);
}

.be7-carousel__byline {
	display: block;
	margin-block-start: var(--be7-space-1);
	font-size: var(--be7-fs-xs);
	color: var(--be7-text-muted);
}

.be7-carousel__item a {
	display: block;
	padding: var(--be7-space-2);
	border-radius: var(--be7-radius);
}

.be7-carousel__item a:hover,
.be7-carousel__item a:focus-visible {
	background: var(--be7-bg-muted);
	text-decoration: none;
}

.be7-carousel__item a:hover .be7-carousel__title {
	text-decoration: none;
	color: var(--be7-hover, #005799);
}

/* ---------- Menu icons and drawer grouping ---------- */

.be7-menu-icon {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	opacity: 0.85;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* The print-edition glyphs are filled shapes; kept a touch smaller and
   quieter so they sit in the same visual register as the stroke icons. */
.be7-menu-icon--fill {
	fill: currentColor;
	stroke: none;
	width: 14px;
	height: 14px;
	opacity: 0.8;
}

.be7-header .be7-topbar__menu a {
	display: inline-flex;
	align-items: center;
	gap: var(--be7-space-2);
}

/* The hamburger stays on every width: with the nav's "עוד" removed, it is
   the drawer's only door. */

.be7-drawer__group + .be7-drawer__group {
	margin-block-start: var(--be7-space-4);
}

.be7-drawer__grouptitle {
	font-size: var(--be7-fs-xs);
	text-transform: none;
	letter-spacing: 0.04em;
	color: var(--be7-text-muted);
	margin-block-end: var(--be7-space-2);
}

.be7-drawer .be7-drawer__menu--icons a {
	display: flex;
	align-items: center;
	gap: var(--be7-space-3);
	color: var(--be7-primary);
}

/* ---------- Admin bar ---------- */

/*
 * Logged in, WordPress pins a 32px bar to the top of the viewport. A sticky
 * header at top:0 slides underneath it, and the two fixed/sticky layers
 * fighting for the same strip is what made the page lurch while scrolling —
 * which is why only editors ever saw it. Offset the header by the bar's height.
 * Below 600px WordPress stops pinning the bar, so the offset goes away with it.
 */
.admin-bar .be7-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .be7-header {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .be7-header {
		top: 0;
	}
}

/* ---------- Sub-category filters ---------- */

.be7-subcats {
	margin-block-end: var(--be7-space-5);
}

.be7-subcats__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--be7-space-2);
}

.be7-subcats__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--be7-space-2);
	min-height: 40px;
	padding-inline: var(--be7-space-4);
	border: 1px solid var(--be7-border);
	border-radius: 999px;
	font-size: var(--be7-fs-sm);
	font-weight: 700;
	color: var(--be7-text);
}

a.be7-subcats__chip:hover,
a.be7-subcats__chip:focus-visible {
	border-color: var(--be7-primary);
	background: var(--be7-bg-muted);
	text-decoration: none;
}

.be7-subcats__chip.is-current {
	background: var(--be7-primary);
	border-color: var(--be7-primary);
	color: var(--be7-text-on-dark);
}

.be7-subcats__count {
	font-weight: 400;
	opacity: 0.7;
}

/* ---------- Search results ---------- */

.be7-search__form--page {
	margin-block-start: var(--be7-space-4);
	max-width: 520px;
	margin-inline: 0;
}

.be7-search__form--page .be7-search__field {
	border-color: var(--be7-border);
}

.be7-results-group {
	margin-block-end: var(--be7-space-6);
}

.be7-noresults {
	padding-block: var(--be7-space-6);
	max-width: 60ch;
}

.be7-noresults__hint {
	margin-block: var(--be7-space-3);
	color: var(--be7-text-muted);
}

/* ---------------------------------------------------------------------------
   Printed-edition archive
   --------------------------------------------------------------------------- */

.be7-issues { margin-block: var(--be7-space-5); }

.be7-issues__years {
	display: flex;
	flex-wrap: wrap;
	gap: var(--be7-space-2);
	margin-block-end: var(--be7-space-5);
}

.be7-issues__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--be7-space-5);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 600px) {
	.be7-issues__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1025px) {
	.be7-issues__grid { grid-template-columns: repeat(5, 1fr); }
}

.be7-container .be7-issue__link,
.be7-container .be7-issue__link:link,
.be7-container .be7-issue__link:visited {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: var(--be7-text, #000);
}

/* A newspaper cover is portrait; letting it set its own ratio would make the
   rows ragged, so the frame holds the shape and the cover fills it. */
.be7-issue__cover {
	aspect-ratio: 3 / 4;
	background: var(--be7-bg-muted, #e5e5e5);
	overflow: hidden;
	border: 1px solid rgb(0 0 0 / 0.1);
}

.be7-issue__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
	transition: transform 0.25s ease;
}

.be7-container .be7-issue__link:hover .be7-issue__cover img,
.be7-container .be7-issue__link:focus-visible .be7-issue__cover img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.be7-issue__cover img { transition: none; }
	.be7-container .be7-issue__link:hover .be7-issue__cover img { transform: none; }
}

.be7-issue__title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.be7-issue__date { font-size: 13px; color: #5a6270; }

/* ---------------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------------- */

.be7-breadcrumbs {
	margin-block: var(--be7-space-3) var(--be7-space-4);
	font-size: 13px;
	line-height: 1.6;
}

.be7-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #5a6270;
}

/* The separator is decoration, so it is drawn rather than written — a screen
   reader hears the list, not a row of slashes. */
.be7-breadcrumbs__item + .be7-breadcrumbs__item::before {
	content: "\203A";
	margin-inline-end: 6px;
	color: #98a1b0;
}

.be7-container .be7-breadcrumbs a,
.be7-container .be7-breadcrumbs a:link,
.be7-container .be7-breadcrumbs a:visited {
	color: #5a6270;
	text-decoration: none;
}

.be7-container .be7-breadcrumbs a:hover,
.be7-container .be7-breadcrumbs a:focus-visible {
	color: var(--be7-primary, #042c65);
	text-decoration: underline;
}

.be7-breadcrumbs [aria-current="page"] {
	color: #0b1220;
	font-weight: 600;
	/* A long headline must not push the trail into three lines. */
	max-width: 28ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	vertical-align: bottom;
}

/* ---------------------------------------------------------------------------
   Writers index
   --------------------------------------------------------------------------- */

.be7-writers-grid {
	display: grid;
	gap: var(--be7-space-4);
	grid-template-columns: 1fr;
	margin-block: var(--be7-space-5);
}

@media (min-width: 600px) { .be7-writers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .be7-writers-grid { grid-template-columns: repeat(3, 1fr); } }

.be7-container .be7-writer-card,
.be7-container .be7-writer-card:link,
.be7-container .be7-writer-card:visited {
	display: flex;
	align-items: center;
	gap: var(--be7-space-3);
	padding: var(--be7-space-3);
	border: 1px solid var(--be7-rule, #d3dbe8);
	border-radius: var(--be7-radius, 4px);
	text-decoration: none;
	color: inherit;
	background: #fff;
}

.be7-container .be7-writer-card:hover,
.be7-container .be7-writer-card:focus-visible {
	border-color: var(--be7-primary, #042c65);
}

.be7-writer-card__photo {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--be7-bg-muted, #e5e5e5);
}

.be7-writer-card__photo img { width: 100%; height: 100%; object-fit: cover; }

.be7-writer-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.be7-writer-card__name { font-size: 17px; }
.be7-writer-card__role { font-size: 13px; color: #5a6270; }
.be7-writer-card__count { font-size: 12px; color: #787c82; }

/* Everyone else: a dense list, because the point is to find a name quickly. */
.be7-writers-list {
	list-style: none;
	margin: var(--be7-space-4) 0 0;
	padding: 0;
	columns: 2;
	column-gap: var(--be7-space-5);
	font-size: 15px;
}

@media (min-width: 1025px) { .be7-writers-list { columns: 4; } }

.be7-writers-list li {
	break-inside: avoid;
	padding-block: 4px;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.be7-writers-list__count { color: #98a1b0; font-size: 13px; }

/* ---------------------------------------------------------------------------
   Install to home screen
   --------------------------------------------------------------------------- */

.be7-install {
	position: fixed;
	inset-inline: 12px;
	bottom: 12px;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	max-width: 420px;
	margin-inline: auto;
	padding: 12px 14px;
	background: var(--be7-primary, #042c65);
	color: #fff;
	border-radius: 6px;
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
}

.be7-install[hidden] { display: none; }

.be7-install__text { margin: 0; font-size: 15px; font-weight: 600; }
.be7-install__actions { display: flex; gap: 8px; }

.be7-install button {
	font: inherit;
	font-size: 14px;
	padding: 7px 14px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid rgb(255 255 255 / 0.4);
	background: transparent;
	color: #fff;
}

.be7-install .be7-install__yes {
	background: #fff;
	color: var(--be7-primary, #042c65);
	border-color: #fff;
	font-weight: 700;
}

.be7-install button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


/* ---------------------------------------------------------------------------
   Search results: one card shape for every result type
   --------------------------------------------------------------------------- */

/* Podcast episodes are 16:9 in their own archive; in mixed search results the
   two ratios make the grid ragged, so everything crops to the article shape. */
.be7-postlist--uniform .be7-card__media,
.be7-postlist--uniform .be7-card__media--16x9 {
	aspect-ratio: 3 / 2;
}

/* ---------------------------------------------------------------------------
   Writer avatars
   --------------------------------------------------------------------------- */

.be7-writers-list li {
	align-items: center;
	justify-content: flex-start;
}

.be7-writers-list .be7-writers-list__count { margin-inline-start: auto; }

.be7-avatar {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--be7-primary, #042c65);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.be7-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* A calm rotation so the initials do not read as one blue wall. */
.be7-avatar[data-tone="1"] { background: #0b6e5f; }
.be7-avatar[data-tone="2"] { background: #7c3aed; }
.be7-avatar[data-tone="3"] { background: #b45309; }
.be7-avatar[data-tone="4"] { background: #9d174d; }

/* ---------------------------------------------------------------------------
   Issues archive: browse modes
   --------------------------------------------------------------------------- */

.be7-issues__modes {
	display: flex;
	gap: 4px;
	margin-block: var(--be7-space-4) var(--be7-space-3);
	border-block-end: 2px solid var(--be7-rule, #d3dbe8);
}

.be7-container .be7-issues__mode,
.be7-container .be7-issues__mode:link,
.be7-container .be7-issues__mode:visited {
	padding: 8px 16px 10px;
	font-size: 15px;
	font-weight: 600;
	color: #5a6270;
	text-decoration: none;
	border-block-end: 2px solid transparent;
	margin-block-end: -2px;
}

.be7-container .be7-issues__mode:hover { color: var(--be7-primary, #042c65); }

.be7-container .be7-issues__mode.is-current {
	color: var(--be7-primary, #042c65);
	border-block-end-color: var(--be7-accent, #c8102e);
}

/* Value chips: one scrollable row, so sixty parshiot stay tidy. */
.be7-issues__years {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 8px;
	padding-block: 2px 8px;
	margin-block-end: var(--be7-space-4);
	scrollbar-width: thin;
}

.be7-container .be7-issues__years .be7-chip,
.be7-container .be7-issues__years .be7-chip:link,
.be7-container .be7-issues__years .be7-chip:visited {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--be7-rule, #d3dbe8);
	border-radius: 999px;
	font-size: 14px;
	color: #333a45;
	text-decoration: none;
	background: #fff;
	white-space: nowrap;
}

.be7-container .be7-issues__years .be7-chip:hover { border-color: var(--be7-primary, #042c65); }

.be7-container .be7-issues__years .be7-chip.is-current {
	background: var(--be7-primary, #042c65);
	border-color: var(--be7-primary, #042c65);
	color: #fff;
}

.be7-issues__years .be7-chip__count { font-size: 12px; opacity: 0.65; }

.be7-issues__per { margin-inline-start: 14px; color: #787c82; font-size: 13px; }
.be7-container .be7-issues__per a { padding-inline: 4px; color: #5a6270; }
.be7-container .be7-issues__per a.is-current { font-weight: 700; color: var(--be7-primary, #042c65); text-decoration: none; }


/* ---------------------------------------------------------------------------
   Issues archive: publication switcher
   --------------------------------------------------------------------------- */

.be7-issues__pubs {
	display: inline-flex;
	gap: 0;
	margin-block: var(--be7-space-4) 0;
	border: 1px solid var(--be7-rule, #d3dbe8);
	border-radius: 8px;
	overflow: hidden;
}

.be7-container .be7-issues__pub,
.be7-container .be7-issues__pub:link,
.be7-container .be7-issues__pub:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #333a45;
	text-decoration: none;
	background: #fff;
}

.be7-container .be7-issues__pub + .be7-issues__pub {
	border-inline-start: 1px solid var(--be7-rule, #d3dbe8);
}

.be7-container .be7-issues__pub:hover { color: var(--be7-primary, #042c65); }

.be7-container .be7-issues__pub.is-current {
	background: var(--be7-primary, #042c65);
	color: #fff;
}

.be7-issues__pub .be7-menu-icon { opacity: 1; }

/* ---------------------------------------------------------------------------
   Page widths
   --------------------------------------------------------------------------- */

/* Prose pages read at a measure; the grid pages keep the container. */
.be7-page-measure {
	max-width: 44rem;
	margin-inline: auto;
	font-size: 17px;
	line-height: 1.75;
}

.be7-page-measure h2 { margin-block: 1.6em 0.5em; }

/* ---------------------------------------------------------------------------
   Exposure badge ("כותרת חשיפה")
   --------------------------------------------------------------------------- */

.be7-card__media { position: relative; }

.be7-card__flash {
	position: absolute;
	top: 8px;
	inset-inline-start: 8px;
	z-index: 2;
	padding: 3px 10px;
	background: var(--be7-accent, #c8102e);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	border-radius: 3px;
	line-height: 1.6;
	max-width: calc(100% - 16px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.be7-hero__media { position: relative; }
.be7-hero__media .be7-card__flash { font-size: 13px; padding: 4px 12px; }

/* ---------------------------------------------------------------------------
   Issues archive sizing (item 4)
   --------------------------------------------------------------------------- */

/* Fewer, larger covers on desktop; the grid fills the container it gets. */
@media (min-width: 1025px) {
	.be7-issues__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------------
   Podcast platform buttons (item 10)
   --------------------------------------------------------------------------- */

.be7-show-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.be7-container .be7-show-links a,
.be7-container .be7-show-links a:link,
.be7-container .be7-show-links a:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	background: var(--be7-primary, #042c65);
}

.be7-container .be7-show-links a[href*="spotify"]   { background: #1db954; }
.be7-container .be7-show-links a[href*="youtube"]   { background: #ff0000; }
.be7-container .be7-show-links a[href*="apple"]     { background: #111; }

.be7-show-links svg { width: 16px; height: 16px; fill: currentColor; }

/* An ad box follows its mobile creative's shape when one was uploaded. */
@media (max-width: 767px) {
	[data-be7-ad] { aspect-ratio: var(--be7-ad-ratio-m, var(--be7-ad-ratio, 2000 / 300)); }
}

/* ---------------------------------------------------------------------------
   Join-our-channel invitation
   --------------------------------------------------------------------------- */

.be7-join {
	margin-block: var(--be7-space-5);
	padding: 18px 20px;
	border: 1px solid var(--be7-rule, #d3dbe8);
	border-inline-start: 4px solid #25d366;
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.be7-join__title { margin: 0; font-weight: 700; font-size: 16px; }
.be7-join__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

.be7-container .be7-join__main,
.be7-container .be7-join__main:link,
.be7-container .be7-join__main:visited {
	background: #25d366;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 9px 18px;
	border-radius: 999px;
	text-decoration: none;
}

.be7-join__alt { font-size: 13px; color: #5a6270; display: flex; gap: 10px; }
.be7-container .be7-join__alt a { color: #5a6270; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Shorts strip
   --------------------------------------------------------------------------- */

.be7-shorts { margin-block: var(--be7-section-gap, 40px); }

.be7-shorts__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.be7-container .be7-shorts__all { font-size: 14px; color: #5a6270; }

.be7-shorts__strip {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding-block: 6px 12px;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.be7-shorts__card {
	position: relative;
	flex: 0 0 168px;
	aspect-ratio: 9 / 16;
	border: 0;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: var(--be7-secondary, #111823);
	scroll-snap-align: start;
	text-align: start;
}

.be7-shorts__card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.be7-shorts__card:focus-visible { outline: 3px solid var(--be7-primary, #042c65); outline-offset: 2px; }

.be7-shorts__play {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	background: rgb(0 0 0 / 0.55);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
}

.be7-shorts__title {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 26px 10px 10px;
	background: linear-gradient(transparent, rgb(0 0 0 / 0.82));
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.be7-shorts__dialog {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: none;
}

.be7-shorts__dialog::backdrop { background: rgb(0 0 0 / 0.8); }

.be7-shorts__frame iframe {
	width: min(92vw, 420px);
	height: min(86vh, 745px);
	border: 0;
	border-radius: 12px;
	background: #000;
	display: block;
}

.be7-shorts__close {
	position: fixed;
	top: 14px;
	inset-inline-start: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.15);
	color: #fff;
	font-size: 17px;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Grid resilience
   --------------------------------------------------------------------------- */

/*
 * A broken image still carries its width="3000" attribute, and a grid item's
 * min-content size honours it — one dead file blew a column to 3000px and
 * crushed its siblings. Grid children opt out of that contract.
 */
.be7-postlist > *,
.be7-issues__grid > * {
	min-width: 0;
}

.be7-card__media img {
	max-width: 100%;
}

/* ==========================================================================
   2026 REDESIGN — header, masthead, nav, overlays, bottom bar
   Later in the file on purpose: these override the founding header styles.
   ========================================================================== */

:root {
	--be7-cyan: #00E6EE;
	/* The live site's header: azure at the top falling into navy, straight
	   down. Ends at 80% — the header is short, and a longer run reads as too
	   much gradient. The nav sits against its foot in the steel tone Meir
	   found on the live site. */
	--be7-grad: linear-gradient(180deg, #005799 0%, #042C65 80%);
	--be7-grad-end: #042C65;
	--be7-steel: #25406A; /* sampled from the live site; a calmer band colour */
	--be7-nav-bg: #1B3051; /* Meir's pick for the strip under the header */
	/* Hovering a headline shifts its colour instead of underlining it —
	   one behaviour across the whole site. */
	--be7-hover: #005799;
	--be7-hover-on-dark: #8FE8EC;
}

/* ---------- One gradient from the topbar down to the nav ---------- */

.be7-header {
	background: var(--be7-grad);
}

.be7-masthead {
	background: transparent;
	padding-block: 12px;
}

.be7-masthead__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.be7-logo { display: inline-flex; line-height: 0; }

.be7-logo__img {
	/* One asset: the wordmark with the cursor — no rule, no tagline. A bit
	   larger than the old lockup, and simply smaller when folded. */
	height: 40px;
	width: auto;
}

@media (max-width: 767px) {
	.be7-logo__img { height: 30px; }
	.be7-masthead { padding-block: 10px; }
}

.be7-masthead__actions { display: flex; align-items: center; gap: 10px; }

.be7-header .be7-masthead .be7-iconbtn {
	color: #fff;
	background: rgb(255 255 255 / 0.08);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.be7-header .be7-masthead .be7-iconbtn:hover { background: rgb(255 255 255 / 0.16); }

.be7-header .be7-masthead .be7-iconbtn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }

/* The WhatsApp pill: the logo's turquoise, kept slim so it reads as an
   invitation, not a slab. */
.be7-wa-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	cursor: pointer;
	background: var(--be7-cyan);
	color: #04263F;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
}

.be7-wa-pill:hover { filter: brightness(1.06); }
.be7-wa-pill svg { width: 15px; height: 15px; fill: currentColor; }

@media (max-width: 767px) {
	.be7-wa-pill span { display: none; }
	.be7-wa-pill { padding: 8px; border-radius: 50%; }
	.be7-wa-pill svg { width: 17px; height: 17px; }
}

/* The hamburger is the drawer's one door on every screen, always visible —
   the nav's "עוד" duplicate is gone. */

/* ---------- Primary nav ---------- */

.be7-nav {
	/* A shade of its own against the gradient's foot, so the strip reads
	   attached but distinct. */
	background: var(--be7-nav-bg, #1B3051);
	border-block-start: 1px solid rgb(255 255 255 / 0.12);
	max-height: 60px;
	transition: max-height 0.3s ease, opacity 0.22s ease;
	overflow: hidden;
}

.be7-header.is-scrolled .be7-nav {
	max-height: 0;
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.be7-nav { transition: none; }
}

.be7-nav__inner {
	display: flex;
	align-items: stretch;
	position: relative;
}

.be7-nav__scroll {
	overflow-x: auto;
	scrollbar-width: none;
	flex: 1 1 auto;
}

.be7-nav__scroll::-webkit-scrollbar { display: none; }

/* flex-start, explicitly: an older rule centred the list at wide widths, and
   centred content wider than the scrollport pushes its first items past the
   inline-start edge, where no scrolling can reach them. */
.be7-nav .be7-nav__list { display: flex; flex-wrap: nowrap; justify-content: flex-start; }

.be7-header .be7-nav a {
	display: block;
	padding: 12px 13px 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	border-block-end: 2px solid transparent;
}

/* You-are-here in the logo's turquoise; hover a quieter shade of it. */
.be7-header .be7-nav a:hover { color: #8FE8EC; border-block-end-color: rgb(0 230 238 / 0.35); }
.be7-header .be7-nav .current-menu-item > a,
.be7-header .be7-nav a[aria-current] { border-block-end-color: var(--be7-cyan); color: #fff; }



/* The scroll cue: a soft fade at the row's end plus a chevron. Shown at any
   width where the row genuinely overflows — mid-size screens used to cut the
   last items off with nothing to say so. */
.be7-nav__cue {
	display: none;
	position: absolute;
	inset-inline-end: 0;
	top: 0;
	bottom: 0;
	width: 54px;
	border: 0;
	cursor: pointer;
	background: linear-gradient(to left, transparent, var(--be7-nav-bg, #1B3051) 70%);
	color: var(--be7-cyan);
	align-items: center;
	justify-content: flex-end;
	padding-inline-end: 6px;
}

.be7-nav__cue svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }

.be7-nav__cue.is-visible { display: inline-flex; }



/* ---------- The drawer, grown into a mega-menu ---------- */

.be7-drawer__panel { display: flex; flex-direction: column; }

@media (min-width: 768px) {
	.be7-drawer .be7-drawer__panel {
		width: 100%;
		max-width: none;
		inset-inline: 0;
	}

	.be7-drawer__columns {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 40px;
		max-width: 1100px;
		margin-inline: auto;
		width: 100%;
		padding-block: 20px;
	}

	.be7-drawer .be7-drawer__menu:not(.be7-drawer__menu--icons) {
		columns: 3;
		column-gap: 32px;
	}

	.be7-drawer__head { max-width: 1100px; margin-inline: auto; width: 100%; }
	.be7-drawer__meta { max-width: 1100px; margin-inline: auto; width: 100%; }
}

/* ---------- Search overlay ---------- */

/* Above the sticky header (z 100) — it used to hide beneath the nav. */
.be7-searchlay { position: fixed; inset: 0; z-index: 250; }

.be7-searchlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(2 20 48 / 0.62);
	backdrop-filter: blur(2px);
}

.be7-searchlay__panel {
	position: relative;
	margin: 6vh auto 0;
	width: min(760px, calc(100% - 24px));
	max-height: 86vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
	padding: 22px 24px 18px;
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}

@media (max-width: 767px) {
	.be7-searchlay__panel { margin-top: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; }
}

.be7-searchlay__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 12px; }
.be7-searchlay__title { margin: 0; font-size: 22px; color: var(--be7-primary, #042c65); }

.be7-searchlay__form { display: flex; gap: 8px; margin-block-end: 16px; }

.be7-searchlay__field {
	flex: 1;
	font: inherit;
	font-size: 16px;
	padding: 11px 14px;
	border: 2px solid var(--be7-rule, #d3dbe8);
	border-radius: 8px;
}

.be7-searchlay__field:focus { outline: none; border-color: var(--be7-primary, #042c65); }

.be7-searchlay__submit {
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	border: 0;
	cursor: pointer;
	border-radius: 8px;
	padding-inline: 22px;
	background: var(--be7-primary, #042c65);
	color: #fff;
}

/* Result-type tabs, in the reference's spirit: quiet text, cyan underline. */
.be7-searchlay__tabs {
	display: flex;
	gap: 22px;
	border-block-end: 1px solid var(--be7-rule, #d3dbe8);
	margin-block-end: 14px;
}

.be7-searchlay__tab {
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #5a6270;
	padding: 6px 2px 9px;
	border-block-end: 3px solid transparent;
	margin-block-end: -1px;
}

.be7-searchlay__tab[aria-selected="true"] {
	color: var(--be7-primary, #042c65);
	border-block-end-color: var(--be7-cyan);
}

.be7-searchlay__results[data-loading] { opacity: 0.5; }
.be7-searchlay__results .be7-postlist { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.be7-searchlay__results .be7-section-title { font-size: 17px; margin-block: 18px 10px; }
/* The page's own type chips ride along in the lifted HTML; the overlay has
   real tabs instead. */
.be7-searchlay__results .be7-subcats { display: none; }
.be7-searchlay__empty { color: #5a6270; }

/* Always in reach: the button floats over the panel's lower edge. */
.be7-searchlay__all {
	position: sticky;
	bottom: 0;
	margin: 18px 0 0;
	padding-block: 10px 4px;
	text-align: center;
	background: linear-gradient(transparent, #fff 40%);
}

.be7-searchlay__all a {
	display: inline-block;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--be7-primary, #042c65);
	background: #E8F0FA;
	border-radius: 999px;
	padding: 10px 26px;
	text-decoration: none;
}

.be7-searchlay__all a:hover { background: #DCE8F7; }

/* ---------- WhatsApp chooser ---------- */

.be7-wa {
	border: 0;
	border-radius: 18px;
	padding: 28px 26px 24px;
	width: min(410px, calc(100% - 32px));
	box-shadow: 0 30px 80px rgb(2 20 48 / 0.4);
}

.be7-wa::backdrop { background: rgb(2 20 48 / 0.6); backdrop-filter: blur(2px); }

.be7-wa__close {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	border: 0;
	background: #F1F4F9;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: #5a6270;
}

.be7-wa__close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.be7-wa__close:hover { background: #E4EAF2; }

.be7-wa__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--be7-primary, #042c65); text-align: center; }
.be7-wa__sub { margin: 6px 0 18px; font-size: 14px; color: #5a6270; text-align: center; }

.be7-wa__options { display: flex; flex-direction: column; gap: 10px; }

.be7-wa__option {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--be7-rule, #d3dbe8);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.be7-wa__option:hover { border-color: var(--be7-primary, #042c65); transform: translateY(-1px); }

.be7-wa__ico {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #EAF7F8;
	color: #0B7A80;
}

.be7-wa__ico svg { width: 22px; height: 22px; fill: currentColor; }
.be7-wa__ico svg[fill="none"] { fill: none; }

.be7-wa__optiontext { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.be7-wa__optiontext strong { font-size: 15.5px; }
.be7-wa__optiontext span { font-size: 12.5px; opacity: 0.72; }

.be7-wa__chev { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.45; }

.be7-wa__option--main { background: var(--be7-cyan); border-color: var(--be7-cyan); color: #04263F; }
.be7-wa__option--main .be7-wa__ico { background: rgb(255 255 255 / 0.55); color: #04263F; }
.be7-wa__option--main:hover { border-color: #04263F; }

/* ---------- Mobile bottom bar ---------- */

.be7-bottombar { display: none; }

@media (max-width: 767px) {
	.be7-bottombar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 80;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		background: #fff;
		border-block-start: 1px solid var(--be7-rule, #d3dbe8);
		padding-block: 6px calc(6px + env(safe-area-inset-bottom));
	}

	body { padding-block-end: 64px; }

	.be7-bottombar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		border: 0;
		background: none;
		font: inherit;
		font-size: 11px;
		font-weight: 600;
		color: #3d4654;
		text-decoration: none;
		cursor: pointer;
		padding: 2px 0;
	}

	.be7-bottombar__item svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }

	.be7-bottombar__item.is-current { color: var(--be7-primary, #042c65); }
	.be7-bottombar__item.is-current span { box-shadow: 0 2px 0 var(--be7-cyan); }

	.be7-bottombar__item--join { color: #04263F; }
	.be7-bottombar__item--join svg {
		background: var(--be7-cyan);
		border-radius: 50%;
		padding: 8px;
		width: 38px;
		height: 38px;
		margin-top: -16px;
		box-shadow: 0 4px 10px rgb(0 0 0 / 0.18);
		stroke-width: 0;
		fill: #04263F;
	}

	/* The install/push offers must not sit on the bar. */
	.be7-install { bottom: 76px; }
}

/* ==========================================================================
   2026 REDESIGN — homepage sections
   ========================================================================== */

/* ---------- Lead story: image with the title card overlapping ---------- */

.be7-hero { position: relative; }

.be7-hero__link { display: block; text-decoration: none; color: inherit; }

.be7-hero__media { aspect-ratio: 16 / 8; border-radius: 10px; overflow: hidden; }

.be7-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--be7-focal, 50% 30%); }

.be7-hero__body {
	position: relative;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 14px 40px rgb(2 27 68 / 0.16);
	padding: 22px 26px 18px;
	margin: -72px auto 0;
	width: min(760px, calc(100% - 40px));
	text-align: center;
}

.be7-hero__eyebrow {
	display: inline-block;
	color: #fff;
	background: var(--be7-accent, #c8102e);
	font-size: 12.5px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 3px;
	margin-block-end: 10px;
}

.be7-hero__title { margin: 0; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.18; }
.be7-hero__deck { color: #48505e; font-size: 17px; margin: 10px 0 0; }
.be7-hero__meta { margin: 10px 0 0; font-size: 13.5px; color: #7a8290; }

@media (max-width: 767px) {
	.be7-hero__media { aspect-ratio: 4 / 3; border-radius: 0; margin-inline: calc(50% - 50vw); }
	.be7-hero__body { margin-top: -46px; padding: 16px 16px 14px; }
	.be7-hero__deck { font-size: 15px; }
}

/* ---------- The five circles ---------- */

.be7-home-section--carousel { position: relative; }

.be7-carousel {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.be7-carousel__item { flex: 1 1 0; min-width: 0; text-align: center; }

.be7-carousel__item a { display: block; text-decoration: none; color: inherit; }

.be7-carousel__media {
	display: block;
	width: min(150px, 100%);
	aspect-ratio: 1;
	margin-inline: auto;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 6px 20px rgb(2 27 68 / 0.14);
	border: 3px solid #fff;
	outline: 1px solid var(--be7-rule, #d3dbe8);
}

.be7-carousel__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--be7-focal, 50% 30%); }

.be7-carousel__eyebrow {
	display: block;
	margin-block-start: 12px;
	color: var(--be7-accent, #c8102e);
	font-size: 12.5px;
	font-weight: 700;
}

.be7-carousel__title {
	display: block;
	margin-block-start: 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--be7-primary, #042c65);
}

.be7-carousel__byline { display: block; margin-block-start: 5px; font-size: 12.5px; color: #7a8290; }

.be7-carousel__next { display: none; }

/* Mobile: one circle holds the stage, its neighbours peek in, faded. */
@media (max-width: 767px) {
	.be7-carousel {
		/* One variable owns the geometry: item width and the side padding
		   that lets the first/last item snap to the centre must agree. */
		--be7-circle-col: min(66vw, 240px);
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 8px;
		padding-block: 6px;
		padding-inline: calc(50% - (var(--be7-circle-col) / 2));
	}

	.be7-carousel::-webkit-scrollbar { display: none; }

	.be7-carousel__item {
		flex: 0 0 var(--be7-circle-col);
		width: var(--be7-circle-col);
		max-width: none;
		scroll-snap-align: center;
		transition: transform 0.25s ease, opacity 0.25s ease;
		transform: scale(0.82);
		opacity: 0.45;
	}

	.be7-carousel__item.is-active { transform: scale(1); opacity: 1; }

	.be7-carousel__media { width: 168px; max-width: none; }

	.be7-carousel__next {
		display: none;
		place-items: center;
		position: absolute;
		inset-inline-end: 6px;
		top: 74px;
		width: 38px;
		height: 38px;
		border: 0;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 4px 14px rgb(2 27 68 / 0.22);
		color: var(--be7-primary, #042c65);
		cursor: pointer;
		z-index: 2;
	}

	.be7-carousel__next.is-visible { display: grid; }

	/* The way back appears only once the strip has moved. */
	.be7-carousel__next--prev { inset-inline-end: auto; inset-inline-start: 6px; }

	.be7-carousel__next svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }
}

/* ---------- Magazine bands: the image escapes the frame ---------- */

.be7-highlight { background: var(--be7-grad); overflow: visible; }

.be7-highlight__link {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(18px, 4vw, 52px);
	align-items: center;
	text-decoration: none;
	color: #fff;
}

.be7-highlight__media {
	margin-block: -26px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgb(0 0 0 / 0.4);
	aspect-ratio: 4 / 3;
}

.be7-highlight__media img { width: 100%; height: 100%; object-fit: cover; }

.be7-highlight__eyebrow {
	display: inline-block;
	background: var(--be7-accent, #c8102e);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	padding: 3px 12px;
	border-radius: 3px;
}

.be7-highlight__title { color: #fff; font-size: clamp(24px, 3vw, 38px); margin: 12px 0 0; }
.be7-highlight__deck { color: rgb(255 255 255 / 0.82); margin: 10px 0 0; }
.be7-highlight__meta { color: rgb(255 255 255 / 0.6); font-size: 13px; }

@media (max-width: 767px) {
	.be7-highlight__link { grid-template-columns: 1fr; }
	.be7-highlight__media { margin-block: -20px 0; }
}

/* ---------- Opinions: face, name, headline ---------- */

.be7-opinions { margin-block: var(--be7-section-gap, 40px); }

.be7-opinions__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.be7-container .be7-opinion,
.be7-container .be7-opinion:link,
.be7-container .be7-opinion:visited {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	padding: 18px 14px;
	border: 1px solid var(--be7-rule, #d3dbe8);
	border-radius: 10px;
	background: #fff;
}

.be7-container .be7-opinion:hover { border-color: var(--be7-primary, #042c65); }

.be7-opinion__photo {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--be7-grad);
	display: grid;
	place-items: center;
}

.be7-opinion__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.be7-opinion__initial { color: #fff; font-size: 34px; font-weight: 700; }

.be7-opinion__who strong { display: block; font-size: 15.5px; color: var(--be7-primary, #042c65); }
.be7-opinion__who em { display: block; font-style: normal; font-size: 12.5px; color: #7a8290; }

.be7-opinion__title { font-size: 15px; font-weight: 600; line-height: 1.4; }

@media (max-width: 767px) {
	.be7-opinions__row { display: flex; overflow-x: auto; gap: 12px; scrollbar-width: thin; padding-block-end: 8px; }
	.be7-container .be7-opinion { flex: 0 0 220px; }
}

/* ---------- Podcasts band on the gradient ---------- */

.be7-podcasts { background: var(--be7-grad); padding-block: 30px 34px; margin-block: var(--be7-section-gap, 40px); }
.be7-podcasts .be7-section-title,
.be7-podcasts .be7-section-title a { color: #fff; }
.be7-container .be7-podcasts__all { color: var(--be7-cyan); font-weight: 700; font-size: 14px; }

.be7-podcasts .be7-postlist { margin-block-start: 6px; }

.be7-podcasts .be7-card,
.be7-podcasts .be7-podcast-card { background: transparent; }

.be7-podcasts .be7-card__title,
.be7-podcasts .be7-podcast-card__title { color: #fff; }

.be7-podcasts .be7-card__eyebrow { color: var(--be7-cyan); }
.be7-podcasts .be7-card__meta { color: rgb(255 255 255 / 0.55); }

/* ---------- Shorts, refined ---------- */

.be7-shorts__card { box-shadow: 0 8px 22px rgb(2 27 68 / 0.2); }
.be7-shorts__card:hover .be7-shorts__play { background: var(--be7-accent, #c8102e); }
.be7-container .be7-shorts__all { color: var(--be7-primary, #042c65); font-weight: 600; }

.be7-shorts__feed {
	height: min(86vh, 745px);
	width: min(92vw, 420px);
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	border-radius: 12px;
	scrollbar-width: none;
}

.be7-shorts__feed::-webkit-scrollbar { display: none; }

.be7-shorts__slide {
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background: #000;
	border-radius: 12px;
	margin-block-end: 10px;
}

.be7-shorts__slide iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; display: block; }

.be7-shorts__hint {
	position: fixed;
	/* Sit just inside the feed's lower edge, not on the viewport's. */
	bottom: calc(((100dvh - min(86vh, 745px)) / 2) + 16px);
	inset-inline: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

/* Mobile: the feed takes the whole screen, social-style. */
@media (max-width: 767px) {
	.be7-shorts__dialog {
		width: 100vw;
		height: 100dvh;
		max-height: none;
		margin: 0;
		background: #000;
	}

	.be7-shorts__feed {
		width: 100%;
		height: 100dvh;
		border-radius: 0;
	}

	.be7-shorts__slide {
		border-radius: 0;
		margin-block-end: 0;
	}

	.be7-shorts__slide iframe { border-radius: 0; }

	.be7-shorts__hint { bottom: 34px; }
}

.be7-shorts__hint svg {
	width: 34px;
	height: 34px;
	stroke: #fff;
	fill: none;
	stroke-width: 2.2;
	filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.5));
	animation: be7-pulse 1.2s ease-in-out infinite;
}

@keyframes be7-pulse {
	0%, 100% { transform: translateY(0); opacity: 0.85; }
	50% { transform: translateY(7px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.be7-shorts__hint svg { animation: none; }
	.be7-carousel__item { transition: none; }
}

/* The quiet play mark on video items. */
.be7-card__play {
	position: absolute;
	bottom: 8px;
	inset-inline-start: 8px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: rgb(2 27 68 / 0.72);
	border-radius: 50%;
}

.be7-card__play svg { width: 15px; height: 15px; fill: #fff; }

/* ==========================================================================
   2026 REDESIGN — round 2: Meir's homepage feedback
   Larger type, the slash motif on section titles, the split hero, five
   category looks, the studio podcasts band, and the polished chrome.
   ========================================================================== */

/* ---------- Section titles: the //// motif instead of the long rule ---------- */

.be7-home-section .be7-section-title,
.be7-opinions .be7-section-title,
.be7-podcasts .be7-section-title,
.be7-shorts .be7-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	border-block-end: 0;
	padding-block-end: 0;
	margin-block-end: 16px;
}

.be7-home-section .be7-section-title::before,
.be7-opinions .be7-section-title::before,
.be7-podcasts .be7-section-title::before,
.be7-shorts .be7-section-title::before {
	content: "";
	width: 22px;
	height: 16px;
	flex: 0 0 auto;
	background: repeating-linear-gradient(
		105deg,
		var(--be7-cyan) 0 3px,
		transparent 3px 7px
	);
}

/* ---------- Homepage type scale: everything a notch up ---------- */

.be7-home-section .be7-card__title { font-size: 17.5px; line-height: 1.35; }
.be7-home-section .be7-card__deck { font-size: 14.5px; }
.be7-home-section .be7-card__meta { font-size: 13px; }
.be7-carousel__title { font-size: 17px; }
.be7-carousel__eyebrow { font-size: 13px; }
.be7-carousel__byline { font-size: 13px; }
.be7-opinion__title { font-size: 15.5px; }
.be7-opinion__who strong { font-size: 16px; }
.be7-hero__deck { font-size: 17px; }

/* ---------- Lead story: text beside the image on desktop ---------- */

@media (min-width: 768px) {
	.be7-hero__link {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: clamp(20px, 3.5vw, 44px);
		align-items: center;
	}

	.be7-hero__media { aspect-ratio: 16 / 10; }

	.be7-hero__body {
		margin: 0;
		width: auto;
		padding: 0;
		box-shadow: none;
		border-radius: 0;
		background: transparent;
		text-align: start;
	}

	.be7-hero__title { font-size: clamp(28px, 3vw, 42px); }
	.be7-hero__deck { margin-block-start: 12px; }
}

/* Mobile: the card hugs the screen edges, like the reference, and rises over
   the bottom quarter of the picture (the image is 4:3 and full-bleed, so a
   quarter of its height is 18.75vw on any phone). */
@media (max-width: 767px) {
	.be7-hero__body {
		width: 100%;
		padding: 15px 14px 13px;
		margin-top: -18.75vw;
		text-align: start;
	}

	.be7-hero__title { font-size: 24px; }
}

/* ---------- Headlines after the circles: four, readable ---------- */

.be7-postlist--headlines {
	grid-template-columns: repeat(4, 1fr);
}

.be7-postlist--headlines .be7-card__title { font-size: 18px; }

@media (max-width: 767px) {
	.be7-postlist--headlines { grid-template-columns: 1fr; gap: 0; }

	/* A row per story: image on the right, headline to its left. */
	.be7-postlist--headlines .be7-card { padding-block: 12px; border-block-end: 1px solid var(--be7-rule, #e3e8f0); }
	.be7-postlist--headlines .be7-card:last-child { border-block-end: 0; }
	.be7-postlist--headlines .be7-card > a { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; }
	.be7-postlist--headlines .be7-card__media { flex: 0 0 128px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; margin: 0; }
	.be7-postlist--headlines .be7-card__deck { display: none; }
	.be7-postlist--headlines .be7-card__title { font-size: 16px; margin-block: 2px 4px; }
}

/* ---------- Category sections: five looks, rotating ---------- */

/* (1) feature: one big story, the rest as rows beside it */
@media (min-width: 768px) {
	.be7-catsec--feature .be7-catsec__list {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 24px;
	}

	.be7-catsec--feature .be7-card:first-child { grid-row: 1 / 4; }
	.be7-catsec--feature .be7-card:first-child .be7-card__title { font-size: 22px; }

	.be7-catsec--feature .be7-card:not(:first-child) > a { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; }
	.be7-catsec--feature .be7-card:not(:first-child) .be7-card__media { flex: 0 0 148px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
	.be7-catsec--feature .be7-card:not(:first-child) .be7-card__deck { display: none; }
	.be7-catsec--feature .be7-card:not(:first-child) { border-block-end: 1px solid var(--be7-rule, #e3e8f0); padding-block-end: 14px; }
	.be7-catsec--feature .be7-card:last-child { border-block-end: 0; }
}

@media (max-width: 767px) {
	.be7-catsec--feature .be7-catsec__list { display: grid; grid-template-columns: 1fr; gap: 14px; }
	.be7-catsec--feature .be7-card:not(:first-child) > a { display: flex; flex-direction: row; gap: 12px; }
	.be7-catsec--feature .be7-card:not(:first-child) .be7-card__media { flex: 0 0 122px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
	.be7-catsec--feature .be7-card:not(:first-child) .be7-card__deck { display: none; }
}

/* (2) cards: boxed, text at the card's foot */
.be7-catsec--cards .be7-card {
	border: 1px solid var(--be7-rule, #e3e8f0);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 16px rgb(2 27 68 / 0.06);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.be7-catsec--cards .be7-card:hover { box-shadow: 0 10px 26px rgb(2 27 68 / 0.12); transform: translateY(-2px); }
.be7-catsec--cards .be7-card__media { border-radius: 0; }
.be7-catsec--cards .be7-card__title,
.be7-catsec--cards .be7-card__deck,
.be7-catsec--cards .be7-card__meta { padding-inline: 14px; }
.be7-catsec--cards .be7-card__meta { padding-block-end: 12px; }

@media (max-width: 767px) {
	.be7-catsec--cards .be7-catsec__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	.be7-catsec--cards .be7-card__deck { display: none; }
	.be7-catsec--cards .be7-card__title { font-size: 15px; }
}

/* (3) rows: no hero, every story is a row */
@media (min-width: 768px) {
	.be7-catsec--rows .be7-catsec__list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
}

.be7-catsec--rows .be7-card > a { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; }
.be7-catsec--rows .be7-card__media { flex: 0 0 148px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
.be7-catsec--rows .be7-card__deck { display: none; }
.be7-catsec--rows .be7-card { border-block-end: 1px solid var(--be7-rule, #e3e8f0); padding-block-end: 14px; }

@media (max-width: 767px) {
	.be7-catsec--rows .be7-catsec__list { display: grid; grid-template-columns: 1fr; gap: 14px; }
	.be7-catsec--rows .be7-card__media { flex-basis: 122px; }
}

/* (4) overlay: the magazine look — text over a scrim on the image */
.be7-catsec--overlay .be7-card { position: relative; border-radius: 12px; overflow: hidden; }
.be7-catsec--overlay .be7-card__media { border-radius: 0; aspect-ratio: 3 / 4; }
.be7-catsec--overlay .be7-card__media img { height: 100%; object-fit: cover; }

.be7-catsec--overlay .be7-card > a > div:not(.be7-card__media),
.be7-catsec--overlay .be7-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 42px 14px 14px;
	background: linear-gradient(transparent, rgb(2 15 35 / 0.88) 62%);
}

.be7-catsec--overlay .be7-card__title { color: #fff; font-size: 17px; }
.be7-catsec--overlay .be7-card__deck { display: none; }
.be7-catsec--overlay .be7-card__meta { color: rgb(255 255 255 / 0.72); }
.be7-catsec--overlay .be7-card__eyebrow { color: var(--be7-cyan); }

@media (max-width: 767px) {
	.be7-catsec--overlay .be7-catsec__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	.be7-catsec--overlay .be7-card__title { font-size: 15px; }
	.be7-catsec--overlay .be7-card__body { padding: 30px 10px 10px; }
}

/* (5) strip: text under image; on phones the row scrolls sideways */
@media (max-width: 767px) {
	.be7-catsec--strip .be7-catsec__list {
		display: flex;
		overflow-x: auto;
		gap: 14px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding-block-end: 6px;
	}

	.be7-catsec--strip .be7-catsec__list::-webkit-scrollbar { display: none; }
	.be7-catsec--strip .be7-card { flex: 0 0 72vw; scroll-snap-align: start; }
	.be7-catsec--strip .be7-card__deck { display: none; }
}

/* ---------- The magazine band, matched to the live site ---------- */

.be7-highlight {
	/* The header's fall, continued: azure into navy, straight down. */
	background: linear-gradient(180deg, #063377 0%, var(--be7-grad-end, #042C65) 60%);
	padding-block: 34px 0;
	margin-block: calc(var(--be7-section-gap, 40px) + 26px);
}

.be7-highlight__link { align-items: start; }

.be7-highlight__media {
	/* Inside at the top, escaping at the bottom — exactly the live band. */
	margin-block: 0 -46px;
	border-radius: 8px;
	box-shadow: 0 26px 54px rgb(0 0 0 / 0.38);
}

.be7-highlight__body { padding-block-end: 34px; }

.be7-highlight__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: 14px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	border-block-end: 2px solid var(--be7-cyan);
	padding-block-end: 3px;
}

.be7-highlight__title { font-size: clamp(26px, 3vw, 40px); }
.be7-highlight__deck { font-size: 16.5px; }

@media (max-width: 767px) {
	.be7-highlight { padding-block: 0 26px; margin-block-end: calc(var(--be7-section-gap, 40px) + 30px); }
	.be7-highlight__media { margin-block: -20px -8px; }
	.be7-highlight__body { padding-block-end: 0; }
}

/* ---------- Podcasts: the studio band ---------- */

.be7-podcasts {
	position: relative;
	overflow: hidden;
	background:
		repeating-linear-gradient(115deg, rgb(255 255 255 / 0.025) 0 2px, transparent 2px 26px),
		linear-gradient(180deg, #0A2450 0%, #071A3A 100%);
	padding-block: 32px 36px;
}

.be7-podcasts__inner { position: relative; }

.be7-podcasts__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-block-end: 18px;
}

.be7-podcasts .be7-section-title { margin-block-end: 0; color: #fff; }

.be7-podcasts__wave {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	fill: rgb(0 230 238 / 0.5);
	opacity: 0.8;
}

.be7-container .be7-podcasts__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	border: 1px solid rgb(255 255 255 / 0.45);
	border-radius: 999px;
	padding: 8px 18px;
	text-decoration: none;
}

.be7-container .be7-podcasts__all:hover { border-color: var(--be7-cyan); color: var(--be7-cyan); }
.be7-podcasts__all svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; }

.be7-podcasts__list { margin-block-start: 0; }

.be7-podcasts .be7-podcast-card {
	background: rgb(6 22 48 / 0.75);
	border: 1px solid rgb(120 165 255 / 0.22);
	border-radius: 12px;
	overflow: hidden;
}

.be7-podcasts .be7-podcast-card > a { display: block; text-decoration: none; color: inherit; }

.be7-podcasts .be7-podcast-card__media { position: relative; display: block; aspect-ratio: 16 / 9; }
.be7-podcasts .be7-podcast-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.be7-podcasts .be7-podcast-card__play {
	position: absolute;
	bottom: 10px;
	inset-inline-start: 10px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: rgb(0 0 0 / 0.55);
	border: 1.5px solid #fff;
	border-radius: 50%;
	color: #fff;
}

.be7-podcasts .be7-podcast-card__play svg { width: 15px; height: 15px; fill: currentColor; }
.be7-podcasts .be7-podcast-card:hover .be7-podcast-card__play { background: var(--be7-cyan); color: #04263F; border-color: var(--be7-cyan); }

.be7-podcasts .be7-podcast-card__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.be7-podcasts .be7-podcast-card__show { color: #FF6B6B; font-size: 12.5px; font-weight: 700; }
.be7-podcasts .be7-podcast-card__title { margin: 0; color: #fff; font-size: 16px; line-height: 1.35; }
.be7-podcasts .be7-podcast-card__host { color: rgb(255 255 255 / 0.62); font-size: 13px; }

.be7-podcasts__dots { display: none; }
.be7-podcasts__hint { display: none; }

@media (max-width: 767px) {
	.be7-podcasts__wave { display: none; }

	.be7-podcasts__list {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 14px;
	}

	.be7-podcasts__list::-webkit-scrollbar { display: none; }

	.be7-podcasts .be7-podcast-card {
		flex: 0 0 100%;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.be7-podcasts__dots {
		display: flex;
		justify-content: center;
		gap: 7px;
		margin-block-start: 14px;
	}

	.be7-podcasts__dot {
		width: 7px;
		height: 7px;
		border-radius: 999px;
		background: rgb(255 255 255 / 0.35);
		transition: width 0.2s ease, background-color 0.2s ease;
	}

	.be7-podcasts__dot.is-on { width: 18px; background: var(--be7-cyan); }

	.be7-podcasts__hint {
		display: flex;
		align-items: center;
		gap: 7px;
		margin: 10px 0 0;
		color: rgb(255 255 255 / 0.65);
		font-size: 12.5px;
	}

	.be7-podcasts__hint svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
}

/* ---------- Shorts: a scrim the title can actually sit on ---------- */

.be7-shorts__title {
	padding: 48px 10px 10px;
	background: linear-gradient(transparent, rgb(0 0 0 / 0.55) 35%, rgb(0 0 0 / 0.93));
	font-size: 13.5px;
}

/* ---------- Bottom bar: the centre goes to the weekly edition ---------- */

@media (max-width: 767px) {
	.be7-bottombar__item--pods { color: #04263F; }

	.be7-bottombar__item--pods svg {
		background: var(--be7-grad, #042C65);
		border-radius: 50%;
		padding: 9px;
		width: 40px;
		height: 40px;
		margin-top: -18px;
		box-shadow: 0 4px 12px rgb(2 27 68 / 0.35);
		stroke: #fff;
		stroke-width: 1.6;
		fill: none;
	}
}

/* ---------- Footer on phones: two columns, brand as one row ---------- */

@media (max-width: 767px) {
	.be7-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 22px 18px;
	}

	.be7-footer__brand {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 14px;
	}

	.be7-footer__brand img { max-height: 40px; }
	.be7-footer__tagline { margin: 0; font-size: 13px; }
	.be7-footer__brand .be7-social { grid-column: 1 / -1; margin-block-start: 14px; }
}

/* ---------- Install / push offers: a headline and a reason ---------- */

.be7-install__text strong { display: block; margin-block-end: 2px; }

/* ---------- Cookie Notice, in the site's language ---------- */

#cookie-notice {
	background: #fff !important;
	color: var(--be7-text, #1a2230) !important;
	box-shadow: 0 -6px 30px rgb(2 27 68 / 0.14);
	font-family: inherit !important;
}

#cookie-notice .cookie-notice-container {
	padding: 14px 18px;
	font-size: 14px;
}

#cookie-notice #cn-notice-text { color: var(--be7-text, #1a2230); }

#cookie-notice .cn-button {
	background: var(--be7-cyan) !important;
	color: #04263F !important;
	border-radius: 999px !important;
	font-weight: 700;
	padding: 8px 22px !important;
	text-shadow: none !important;
	border: 0 !important;
}

#cookie-notice .cn-button:not(.cn-button-custom):hover { filter: brightness(1.06); }

/* Row-style cards: the media must not keep its stacked-card margin, and the
   text column must be allowed to shrink. */
.be7-postlist--headlines .be7-card > a .be7-card__media,
.be7-catsec--feature .be7-card:not(:first-child) .be7-card__media,
.be7-catsec--rows .be7-card__media {
	margin: 0;
}

.be7-postlist--headlines .be7-card__body,
.be7-catsec--feature .be7-card:not(:first-child) .be7-card__body,
.be7-catsec--rows .be7-card__body {
	min-width: 0;
	flex: 1 1 auto;
}

/* The feature's lead keeps a sane photo shape. */
@media (min-width: 768px) {
	.be7-catsec--feature .be7-card:first-child .be7-card__media { aspect-ratio: 16 / 10; }
	.be7-catsec--feature .be7-card:first-child .be7-card__media img { width: 100%; height: 100%; object-fit: cover; }
}

/* In the overlay look the text owns the card's foot, so the play badge moves
   to the top corner. */
.be7-catsec--overlay .be7-card__play { bottom: auto; top: 10px; }

/* The overlay panel is white; the close button must not inherit the header's
   on-dark colouring. */
.be7-searchlay .be7-searchlay__close {
	color: #3d4654;
	background: #F1F4F9;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
}

.be7-searchlay .be7-searchlay__close:hover,
.be7-searchlay .be7-searchlay__close:focus-visible { background: #E4EAF2; }

/* The folding header changes height; without this, scroll anchoring answers
   every fold with a counter-scroll and the nav flutters. */
html { overflow-anchor: none; }

/* On phones the fixed bottom bar owns the screen's foot; the cookie bar sits
   above it. */
@media (max-width: 767px) {
	#cookie-notice { bottom: 64px !important; }
}

/* ==========================================================================
   2026 REDESIGN — round 3: the second sweep of Meir's notes
   ========================================================================== */

/* ---------- The folded desktop header: one row ---------- */

.be7-masthead__quick { display: none; }

@media (min-width: 1025px) {
	.be7-header.is-scrolled .be7-topbar { display: none; }
	.be7-header.is-scrolled .be7-masthead { padding-block: 7px; }

	.be7-header.is-scrolled .be7-logo__img { height: 28px; }

	.be7-header.is-scrolled .be7-masthead__quick { display: block; }

	.be7-masthead__quickmenu {
		display: flex;
		align-items: center;
		gap: 20px;
		font-size: var(--be7-fs-sm);
	}

	.be7-header .be7-masthead__quickmenu a {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		color: var(--be7-text-on-dark-muted);
	}

	.be7-header .be7-masthead__quickmenu a:hover { color: #fff; }
}

/* ---------- Nav: the first item starts where the logo starts ---------- */

.be7-nav .be7-nav__list > li:first-child > a { padding-inline-start: 0; }

/* ---------- WhatsApp chooser: no underline creep ---------- */

.be7-wa__option:hover,
.be7-wa__option:hover strong,
.be7-wa__option:hover span { text-decoration: none; }

/* ---------- Section-title slashes: three, whole, unclipped ---------- */

.be7-home-section .be7-section-title::before,
.be7-opinions .be7-section-title::before,
.be7-podcasts .be7-section-title::before,
.be7-shorts .be7-section-title::before {
	width: 21px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cg fill='%2300E6EE'%3E%3Cpath d='M6.5 0h4L4 14H0z'/%3E%3Cpath d='M13.5 0h4L11 14H7z'/%3E%3Cpath d='M20.5 0h4L18 14h-4z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Type scale, another notch; line-height reined in ---------- */

.be7-home-section .be7-card__title { font-size: 19px; line-height: 1.3; }
.be7-home-section .be7-card__deck { font-size: 15px; line-height: 1.45; }
.be7-home-section .be7-card__meta { font-size: 13.5px; }

/* ---------- Lead story: type that fills the column ---------- */

@media (min-width: 768px) {
	.be7-hero__title { font-size: clamp(34px, 3.9vw, 54px); line-height: 1.14; }
	.be7-hero__deck { font-size: 19px; line-height: 1.5; margin-block-start: 16px; }
	.be7-hero__meta { font-size: 14.5px; margin-block-start: 14px; }
}

.be7-hero__eyebrow { padding-block: 2px; }
.be7-highlight__eyebrow { padding-block: 2px; }

/* ---------- Circles, grown ---------- */

.be7-carousel__media { width: min(172px, 100%); max-width: none; }
.be7-carousel__title { font-size: 18px; }
.be7-carousel__eyebrow { font-size: 13.5px; }
.be7-carousel__byline { font-size: 13.5px; }

@media (max-width: 767px) {
	.be7-carousel { --be7-circle-col: min(72vw, 262px); }
	.be7-carousel__media { width: 192px; }
	.be7-carousel__next { top: 86px; }
}

/* ---------- Headlines: rows with the excerpt, like צבא וביטחון ---------- */

@media (min-width: 768px) {
	.be7-postlist--headlines { grid-template-columns: 1fr 1fr; gap: 18px 32px; }
	.be7-postlist--headlines .be7-card > a { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; }
	.be7-postlist--headlines .be7-card__media { flex: 0 0 168px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; margin: 0; }
	.be7-postlist--headlines .be7-card__body { min-width: 0; flex: 1 1 auto; }
	.be7-postlist--headlines .be7-card { border-block-end: 1px solid var(--be7-rule, #e3e8f0); padding-block-end: 14px; }
}

/* The rows look breathes with its excerpt on desktop; phones stay tight. */
@media (min-width: 768px) {
	.be7-catsec--rows .be7-card__deck { display: block; }
	.be7-catsec--rows .be7-card__media { flex-basis: 168px; }
}

@media (max-width: 767px) {
	.be7-catsec--rows .be7-card__deck { display: none; }
}

/* ---------- Feature: a lead plus four ---------- */

@media (min-width: 768px) {
	.be7-catsec--feature .be7-card:first-child { grid-row: 1 / 5; }
}

/* ---------- Strip look: room between items ---------- */

@media (max-width: 767px) {
	.be7-catsec--strip .be7-catsec__list { gap: 18px; }
}

/* ---------- Opinions, after the reference: portrait cards ---------- */

.be7-opinions__inner { position: relative; }

.be7-opinions__row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 26px;
}

.be7-container .be7-opinion,
.be7-container .be7-opinion:link,
.be7-container .be7-opinion:visited {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	border: 1px solid var(--be7-rule, #dfe5ee);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	text-align: start;
	text-decoration: none;
	color: inherit;
}

.be7-container .be7-opinion:hover { border-color: var(--be7-primary, #042c65); text-decoration: none; }
.be7-container .be7-opinion:hover * { text-decoration: none; }

.be7-opinion__photo {
	display: block;
	width: 100%;
	/* height:auto beats the legacy 92px circle rule; the ratio then holds. */
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	overflow: hidden;
	background: linear-gradient(180deg, #E8EDF4, #D4DCE8);
}

.be7-opinion__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.be7-opinion__initial { display: grid; place-items: center; height: 100%; color: var(--be7-primary, #042c65); font-size: 40px; font-weight: 700; }

.be7-opinion__name {
	display: block;
	padding: 10px 12px 2px;
	color: var(--be7-primary, #042c65);
	font-size: 16px;
	font-weight: 800;
	text-align: center;
}

.be7-opinion__title {
	display: block;
	padding: 0 12px 12px;
	color: #5a6473;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}

.be7-opinions__next { display: none; }

@media (max-width: 767px) {
	.be7-opinions__row {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		gap: 12px;
		padding-block-end: 4px;
	}

	.be7-opinions__row::-webkit-scrollbar { display: none; }
	.be7-container .be7-opinion { flex: 0 0 44vw; scroll-snap-align: start; }

	.be7-opinions__next {
		display: grid;
		place-items: center;
		position: absolute;
		left: 4px;
		right: auto;
		top: 44%;
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 4px 14px rgb(2 27 68 / 0.22);
		color: var(--be7-primary, #042c65);
		cursor: pointer;
		z-index: 2;
	}

	.be7-opinions__next svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.4; }
}

/* ---------- The dots-and-hint pattern, shared ---------- */

.be7-hscroll-dots { display: none; }
.be7-hscroll-hint { display: none; }

@media (max-width: 767px) {
	.be7-hscroll-dots {
		display: flex;
		justify-content: center;
		gap: 7px;
		margin-block-start: 12px;
	}

	.be7-hscroll-dot {
		width: 7px;
		height: 7px;
		border-radius: 999px;
		background: rgb(4 44 101 / 0.25);
		transition: width 0.2s ease, background-color 0.2s ease;
	}

	.be7-hscroll-dot.is-on { width: 18px; background: var(--be7-cyan); }

	.be7-hscroll-hint {
		display: flex;
		align-items: center;
		gap: 7px;
		margin: 8px 0 0;
		color: #7a8290;
		font-size: 12.5px;
	}

	.be7-hscroll-hint svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
}

/* ---------- Magazine band: square image, left, wider ---------- */

.be7-highlight__media { border-radius: 0; }

@media (min-width: 768px) {
	.be7-highlight__link { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); }
	/* order flips auto-placement: body first (right column), image second (left). */
	.be7-highlight__media { order: 2; aspect-ratio: 16 / 9; }
	.be7-highlight { padding-block: 26px 0; }
	.be7-highlight__body { padding-block-end: 26px; }
	.be7-highlight__title { font-size: clamp(24px, 2.6vw, 34px); }
}

@media (max-width: 767px) {
	/* The image escapes upward on phones, so the shadow points up too. */
	.be7-highlight__media { box-shadow: 0 -22px 44px rgb(0 0 0 / 0.34); }
}

/* ---------- Podcasts: the seismograph crosses the band ---------- */

.be7-podcasts__waveside {
	position: absolute;
	top: 56%;
	width: clamp(140px, 16vw, 260px);
	height: 44px;
	z-index: 0;
	pointer-events: none;
}

.be7-podcasts__waveside--start { inset-inline-start: -12px; }
.be7-podcasts__waveside--end { inset-inline-end: -12px; }

.be7-podcasts__waveside .be7-podcasts__wave { width: 100%; height: 100%; fill: rgb(0 230 238 / 0.55); }

.be7-podcasts__inner { position: relative; z-index: 1; }

@media (max-width: 900px) {
	/* No margins to live in below this width. */
	.be7-podcasts__waveside { display: none; }
}

/* ---------- One hover for every play button ---------- */

a:hover .be7-card__play,
a:focus-visible .be7-card__play,
.be7-shorts__card:hover .be7-shorts__play,
.be7-shorts__card:focus-visible .be7-shorts__play {
	background: var(--be7-cyan);
	color: #04263F;
	border-color: var(--be7-cyan);
}

/* ---------- Shorts: a fifth bigger, contained, reachable ---------- */

.be7-shorts .be7-container { position: relative; }

@media (min-width: 768px) {
	.be7-shorts__card { flex: 0 0 202px; }
	.be7-shorts__title { font-size: 15.5px; padding-inline: 12px; }
}

/* The card's outer shadow spilled over its neighbours; the scrim inside the
   frame is the only shade it needs. */
.be7-shorts__card { box-shadow: none; }

.be7-shorts__arrow {
	display: none;
	place-items: center;
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 14px rgb(2 27 68 / 0.25);
	color: var(--be7-primary, #042c65);
	cursor: pointer;
	z-index: 2;
}

.be7-shorts__arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }
/* In RTL, "more" lies to the left; the way back is to the right. */
.be7-shorts__arrow--next { inset-inline-end: -8px; }
.be7-shorts__arrow--prev { inset-inline-start: -8px; }

@media (min-width: 768px) {
	.be7-shorts__arrow.is-visible { display: grid; }
}

/* ---------- Search: a close that reads as one, marks that glow ---------- */

.be7-searchlay .be7-searchlay__close svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	fill: none;
}

.be7-searchlay__all a { padding-block: 7px; }

.be7-card__snippet {
	font-size: 13.5px;
	line-height: 1.5;
	color: #5a6473;
	margin: 4px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.be7-mark {
	background: #FFF3A8;
	color: inherit;
	padding-inline: 1px;
	border-radius: 2px;
}

/* ==========================================================================
   2026 REDESIGN — round 4: beyond the homepage
   ========================================================================== */

/* ---------- Mobile folded header: compact mark, smaller controls ---------- */

@media (max-width: 1024px) {
	.be7-header.is-scrolled .be7-logo__img { height: 24px; }
	.be7-header.is-scrolled .be7-masthead { padding-block: 7px; }
	.be7-header.is-scrolled .be7-masthead .be7-iconbtn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
	.be7-header.is-scrolled .be7-masthead .be7-iconbtn svg { width: 17px; height: 17px; }
	.be7-header.is-scrolled .be7-wa-pill { padding: 7px; }
	.be7-header.is-scrolled .be7-wa-pill svg { width: 15px; height: 15px; }
}

/* ---------- Headline hover: colour, not underline — everywhere ---------- */

.be7-card__link:hover,
.be7-card__link:hover * { text-decoration: none; }

.be7-card__link:hover .be7-card__title { color: var(--be7-hover, #005799); }
.be7-hero__link:hover .be7-hero__title { color: var(--be7-hover, #005799); }
.be7-hero__link:hover, .be7-hero__link:hover * { text-decoration: none; }
.be7-opinion:hover .be7-opinion__name { color: var(--be7-hover, #005799); }

/* Dark grounds shift toward the light turquoise instead. */
.be7-highlight__link:hover .be7-highlight__title { color: var(--be7-hover-on-dark, #8FE8EC); }
.be7-highlight__link:hover, .be7-highlight__link:hover * { text-decoration: none; }
.be7-podcasts .be7-podcast-card a:hover .be7-podcast-card__title { color: var(--be7-hover-on-dark, #8FE8EC); }
.be7-podcasts .be7-podcast-card a:hover { text-decoration: none; }

/* ---------- The slashes motif, opt-in anywhere ---------- */

.be7-section-title--slashed {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	border-block-end: 0;
	padding-block-end: 0;
	margin-block-end: 16px;
}

.be7-section-title--slashed::before {
	content: "";
	width: 21px;
	height: 14px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cg fill='%2300E6EE'%3E%3Cpath d='M6.5 0h4L4 14H0z'/%3E%3Cpath d='M13.5 0h4L11 14H7z'/%3E%3Cpath d='M20.5 0h4L18 14h-4z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Archive lists on phones: a row per story ---------- */

@media (max-width: 767px) {
	.archive .be7-postlist:not(.be7-shows__list),
	.search .be7-results-group .be7-postlist {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.archive .be7-postlist:not(.be7-shows__list) > .be7-card,
	.search .be7-results-group .be7-postlist > .be7-card {
		padding-block: 12px;
		border-block-end: 1px solid var(--be7-rule, #e3e8f0);
	}

	.archive .be7-postlist:not(.be7-shows__list) > .be7-card > a,
	.search .be7-results-group .be7-postlist > .be7-card > a {
		display: flex;
		flex-direction: row;
		gap: 12px;
		align-items: flex-start;
	}

	.archive .be7-postlist:not(.be7-shows__list) .be7-card__media,
	.search .be7-results-group .be7-postlist .be7-card__media {
		flex: 0 0 128px;
		aspect-ratio: 4 / 3;
		border-radius: 8px;
		overflow: hidden;
		margin: 0;
	}

	.archive .be7-postlist:not(.be7-shows__list) .be7-card__body,
	.search .be7-results-group .be7-postlist .be7-card__body {
		min-width: 0;
		flex: 1 1 auto;
	}

	.archive .be7-postlist:not(.be7-shows__list) .be7-card__deck { display: none; }
	.archive .be7-postlist:not(.be7-shows__list) .be7-card__title { font-size: 16px; }
}

/* The overlay keeps its own compact grid. */
.be7-searchlay .be7-postlist { grid-template-columns: repeat(2, 1fr); }

/* ---------- Podcast pages: the studio language ---------- */

.be7-podhero {
	background:
		repeating-linear-gradient(115deg, rgb(255 255 255 / 0.025) 0 2px, transparent 2px 26px),
		linear-gradient(180deg, #0A2450 0%, #071A3A 100%);
	color: #fff;
	padding-block: 26px 28px;
	margin-block-end: var(--be7-space-5);
}

.be7-podhero .be7-page-title { color: #fff; margin: 0; }
.be7-podhero__sub { margin: 6px 0 0; color: rgb(255 255 255 / 0.66); font-size: 15px; }

.be7-podhero--show .be7-writer-header { margin-block-end: 0; }
.be7-podhero--show .be7-writer-header__role,
.be7-podhero--show .be7-writer-header__count { color: rgb(255 255 255 / 0.7); }
.be7-podhero--show .be7-writer-header__bio { color: rgb(255 255 255 / 0.85); }
.be7-podhero--show .be7-writer-header__photo img { border: 1px solid rgb(120 165 255 / 0.35); border-radius: 12px; }
.be7-podhero--show .be7-show-links a {
	color: #fff;
	border: 1px solid rgb(255 255 255 / 0.45);
	border-radius: 999px;
	padding: 6px 16px;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 700;
}
.be7-podhero--show .be7-show-links a:hover { border-color: var(--be7-cyan); color: var(--be7-cyan); }

/* ---------- The shows, in a sideways row on phones ---------- */

@media (max-width: 767px) {
	.be7-shows__list {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 10px;
		padding-block-end: 6px;
	}

	.be7-shows__list::-webkit-scrollbar { display: none; }

	.be7-show-card { flex: 0 0 auto; }

	.be7-show-card a {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		min-width: 148px;
		padding: 10px 14px;
	}

	/* Name on top, episode count below — the box stays short. */
	.be7-show-card__media { display: none; }
	.be7-show-card__name { font-size: 14.5px; }
	.be7-show-card__count { font-size: 12.5px; }
}

/* ---------- Sibling chips scroll sideways on phones ---------- */

@media (max-width: 767px) {
	.be7-subcats__list {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-block-end: 4px;
	}

	.be7-subcats__list::-webkit-scrollbar { display: none; }
	.be7-subcats__list > li { flex: 0 0 auto; }
}

/* ---------- The article-page invitation, dressed up ---------- */

.be7-join {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	align-items: center;
	background: linear-gradient(135deg, #F2FBFC 0%, #E8F6F8 100%);
	border: 1px solid rgb(0 230 238 / 0.45);
	border-radius: 14px;
	padding: 18px 20px;
	margin-block: var(--be7-space-6);
}

.be7-join__ico {
	grid-row: 1 / 3;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--be7-cyan);
	color: #04263F;
}

.be7-join__ico svg { width: 24px; height: 24px; fill: currentColor; }

.be7-join__title { margin: 0; font-size: 16.5px; font-weight: 800; color: var(--be7-primary, #042c65); }
.be7-join__sub { margin: 2px 0 0; font-size: 13.5px; color: #4a5568; }

.be7-join__actions {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-block-start: 4px;
}

.be7-join .be7-join__main {
	background: var(--be7-cyan);
	color: #04263F;
	font-weight: 700;
	font-size: 14px;
	padding: 8px 20px;
	border-radius: 999px;
	text-decoration: none;
}

.be7-join .be7-join__main:hover { filter: brightness(1.06); text-decoration: none; }
.be7-join__alt { font-size: 13px; }
.be7-join__alt a { color: var(--be7-primary, #042c65); font-weight: 600; }

@media (max-width: 600px) {
	.be7-join { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.be7-join__ico { grid-row: auto; }
	.be7-join__actions { grid-column: auto; justify-content: center; }
}

/* ---------- The wide page really is wide ---------- */

/* .entry-content caps prose at 800px; the printed-edition archives asked for
   the whole container and were silently inheriting the cap. */
.entry-content.be7-page-wide { max-width: none; }

/* ==========================================================================
   Round 4.1 — pre-staging polish
   ========================================================================== */

/* Section-title links follow the same hover language. */
.be7-section-title a:hover,
.be7-section-title a:focus-visible { text-decoration: none; color: var(--be7-hover, #005799); }
.be7-podcasts .be7-section-title a:hover { color: var(--be7-hover-on-dark, #8FE8EC); }

/* The search overlay's close is a button; it should feel like one. */
.be7-searchlay .be7-searchlay__close { cursor: pointer; }

/* The episode page's "more from the show" band: air above the title. */
.be7-episode ~ * .be7-podcasts__head,
.be7-single-podcast .be7-podcasts__head { margin-block-start: 4px; }
.be7-podcasts__head { row-gap: 10px; flex-wrap: wrap; }
.be7-podcasts .be7-section-title { line-height: 1.3; }

/* Opinions: a tall card — square photo, then the text block with room. */
.be7-opinion__title { min-height: 3em; }

/* ==========================================================================
   2026 REDESIGN — round 5: type scale up, print, 404, the odds and ends
   ========================================================================== */

/* ---------- Desktop homepage type: significantly larger, tighter leading ---------- */

@media (min-width: 768px) {
	.be7-hero__title { font-size: clamp(40px, 4.4vw, 62px); line-height: 1; }
	.be7-hero__deck { font-size: 20px; line-height: 1.45; margin-block-start: 18px; }
	.be7-hero__meta { margin-block-start: 16px; }

	.be7-home-section .be7-card__title { font-size: 21px; line-height: 1.22; }
	.be7-home-section .be7-card__deck { font-size: 15.5px; line-height: 1.4; margin-block-start: 7px; }
	.be7-carousel__title { font-size: 19px; line-height: 1.25; }
	.be7-catsec--feature .be7-card:first-child .be7-card__title { font-size: 26px; line-height: 1.18; }
	.be7-postlist--headlines .be7-card__title { font-size: 21px; }
	.be7-opinion__name { font-size: 17px; }
	.be7-opinion__title { font-size: 14.5px; }
	.be7-podcasts .be7-podcast-card__title { font-size: 17px; line-height: 1.3; }
	.be7-highlight__title { font-size: clamp(28px, 2.9vw, 38px); line-height: 1.12; }
	.be7-highlight__deck { font-size: 17px; line-height: 1.45; margin-block-start: 12px; }
}

/* ---------- The magazine band: a gradient you can actually see ---------- */

.be7-highlight {
	background: linear-gradient(180deg, #0E5BA4 0%, #032150 82%);
}

@media (min-width: 768px) {
	/* The image escapes 46px below the band; the next section keeps clear. */
	.be7-highlight { margin-block-end: calc(var(--be7-section-gap, 40px) + 64px); }
}

/* ---------- Elementor pages breathe on phones ---------- */

@media (max-width: 767px) {
	/* His hub pages (projects, conferences) are full-bleed builder canvases;
	   top-level containers get the site's gutter so nothing hugs the glass. */
	.elementor > .e-con > .e-con-inner,
	.elementor > .e-con.e-con-boxed > .e-con-inner {
		padding-inline: 16px;
	}

	.elementor > .e-con:not(.e-con-boxed) {
		padding-inline: 16px;
	}
}

/* ---------- 404 ---------- */

.be7-404 {
	text-align: center;
	padding-block: clamp(30px, 7vh, 70px) 40px;
	max-width: 560px;
	margin-inline: auto;
}

.be7-404__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--be7-primary, #042c65);
}

.be7-404__code {
	font-size: clamp(88px, 16vw, 150px);
	font-weight: 800;
	line-height: 1;
}

.be7-404__cursor {
	width: clamp(56px, 10vw, 96px);
	height: auto;
	transform: rotate(8deg);
}

.be7-404__title { margin: 18px 0 0; font-size: clamp(22px, 4vw, 30px); }
.be7-404__sub { margin: 10px 0 22px; color: #5a6473; font-size: 16px; }
.be7-404__form { margin-inline: auto; }
.be7-404__home { margin-block-start: 18px; }
.be7-404__home a { font-weight: 700; color: var(--be7-primary, #042c65); }

/* ---------- The Google preferred-source ask ---------- */

.be7-prefer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border: 1px solid var(--be7-rule, #e3e8f0);
	border-radius: 12px;
	padding: 14px 18px;
	margin-block: var(--be7-space-4);
}

.be7-prefer p { margin: 0; font-size: 14.5px; color: #3d4654; }
.be7-prefer p strong { color: var(--be7-primary, #042c65); }

.be7-prefer__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--be7-primary, #042c65);
	background: #E8F0FA;
	border-radius: 999px;
	padding: 9px 18px;
	text-decoration: none;
}

.be7-prefer__btn:hover { background: #DCE8F7; text-decoration: none; }
.be7-prefer__btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Landscape covers in the printed-edition grid ---------- */

/*
 * The paper's front page went landscape; a mixed grid of portrait and
 * landscape covers must not saw-tooth. Every cover sits in the same portrait
 * frame; a landscape sheet letterboxes on a quiet ground instead of
 * stretching or breaking the row height.
 */
.be7-issue__link img,
.be7-issues__grid img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: #F2F5F9;
	border: 1px solid var(--be7-rule, #e3e8f0);
	border-radius: 4px;
}

/* ---------- Print: the article, and only the article ---------- */

@media print {
	.be7-header,
	.be7-topbar,
	.be7-nav,
	.be7-bottombar,
	.be7-footer,
	.be7-drawer,
	.be7-searchlay,
	.be7-article__sidebar,
	.be7-share,
	.be7-join,
	.be7-prefer,
	.be7-related,
	.be7-recs,
	.be7-rec,
	.be7-recommendations,
	.be7-breadcrumbs,
	.be7-ad,
	.be7-install,
	.be7-push-offer,
	#cookie-notice,
	.be7-skip-link,
	#wpadminbar { display: none !important; }

	body { background: #fff; color: #000; padding: 0 !important; }
	.be7-article-layout { display: block; }
	.be7-container { max-width: none; padding-inline: 0; }
	.be7-article__title { max-width: none; font-size: 24pt; line-height: 1.15; }
	.be7-article__deck { font-size: 13pt; }
	.entry-content { max-width: none; font-size: 11pt; line-height: 1.55; }
	.entry-content a { color: #000; text-decoration: underline; }
	img, figure { max-width: 100% !important; page-break-inside: avoid; }

	/* The reader on paper still deserves to know where this came from. */
	.be7-article__header::before {
		content: "בשבע אונליין — be7.co.il";
		display: block;
		font-size: 9pt;
		color: #555;
		margin-block-end: 8pt;
	}
}

/* ==========================================================================
   2026 REDESIGN — round 6: type discipline, print centring, polish
   ========================================================================== */

/* ---------- Titles tight, decks close, bylines distinct ---------- */

.be7-card .be7-card__title { line-height: 1.12; }
.be7-card .be7-card__deck { line-height: 1.22; margin-block-start: 6px; }

/* The writer's name earns its own colour and weight — the eye separates
   deck from byline instantly. */
.be7-card__byline,
.be7-hero__meta,
.be7-highlight__meta span {
	font-weight: 700;
	color: var(--be7-primary, #042c65);
}

.be7-highlight__meta span { color: #B9D2EE; }

@media (min-width: 768px) {
	.be7-hero__title { font-size: clamp(38px, 4.1vw, 58px); }
	.be7-hero__deck { line-height: 1.2; }
}

/* ---------- Magazine strips: bigger everywhere, tight leading ---------- */

.be7-highlight__title { line-height: 1.08; }
.be7-highlight__deck { line-height: 1.25; }

@media (max-width: 767px) {
	.be7-highlight__title { font-size: 26px; }
	.be7-highlight__deck { font-size: 16px; margin-block-start: 10px; }
	.be7-highlight__more { font-size: 15px; }
}

/* ---------- The lead banner sits balanced ---------- */

/* The slot used to inherit the page's top padding on top of its own margin;
   now the air above equals the air below. (The screen-reader h1 sits before
   it, so :first-child would miss.) */
.be7-site-main > .be7-ad--top {
	margin-block-start: calc( var(--be7-space-5) - var(--be7-space-6) );
}

/* ---------- "מה לקרוא עכשיו": no slack under short cards ---------- */

@media (min-width: 1025px) {
	.be7-recs--end .be7-rec__link {
		grid-template-rows: auto 1fr;
		align-content: start;
	}
}

/* ---------- The preferred-source ask, dressed like it means it ---------- */

.be7-prefer {
	background: linear-gradient(135deg, #F4F9FE 0%, #EAF2FB 100%);
	border: 1px solid #D5E3F5;
	border-radius: 14px;
	padding: 18px 22px;
}

.be7-prefer p { font-size: 15px; }
.be7-prefer p strong { display: block; font-size: 16.5px; margin-block-end: 2px; }

.be7-prefer__btn {
	background: var(--be7-primary, #042c65);
	color: #fff;
	font-size: 14px;
	padding: 11px 22px;
	box-shadow: 0 4px 14px rgb(4 44 101 / 0.25);
}

.be7-prefer__btn:hover { background: #0A3E85; color: #fff; }

.be7-prefer__btn svg {
	background: #fff;
	border-radius: 50%;
	padding: 3px;
	width: 22px;
	height: 22px;
	fill: #4285F4;
}

/* ---------- Print: centred column, images that behave ---------- */

@media print {
	.be7-article {
		max-width: 17cm;
		margin-inline: auto !important;
	}

	.be7-article__header { text-align: start; }
	.be7-article__title { margin-inline: 0; }

	.entry-content img,
	.be7-article figure {
		display: block;
		margin-inline: auto;
		max-height: 11cm;
		width: auto !important;
		max-width: 100% !important;
	}

	.be7-embed,
	.be7-embed iframe,
	iframe { display: none !important; }
}

/* ==========================================================================
   Round 6.1 — Meir's follow-ups
   ========================================================================== */

/* On dark grounds the byline is white: the navy emphasis is for light cards. */
.be7-catsec--overlay .be7-card__byline,
.be7-podcasts .be7-card__byline,
.be7-highlight .be7-highlight__meta span {
	color: #fff;
}

/* ---------- Magazine strip: another step up, everything ---------- */

@media (min-width: 768px) {
	.be7-highlight__title { font-size: clamp(34px, 3.5vw, 48px); }
	.be7-highlight__deck { font-size: 19.5px; line-height: 1.3; margin-block-start: 14px; }
	.be7-highlight__meta { font-size: 15px; }
	.be7-highlight__more { font-size: 17px; margin-block-start: 18px; }
}

@media (max-width: 767px) {
	.be7-highlight__title { font-size: 30px; }
	.be7-highlight__deck { font-size: 17.5px; line-height: 1.3; }
	.be7-highlight__meta { font-size: 14.5px; }
	.be7-highlight__more { font-size: 16.5px; }
}

/* ---------- Feature look (כלכלה, מדיני): the lead speaks up ---------- */

@media (min-width: 768px) {
	.be7-catsec--feature .be7-card:first-child .be7-card__title { font-size: 30px; line-height: 1.12; }
	.be7-catsec--feature .be7-card:first-child .be7-card__deck { font-size: 17.5px; line-height: 1.28; margin-block-start: 9px; }
}

/* ---------- Desktop logo: 5px larger, spilling downward ---------- */

/*
 * The layout box stays the height the header was designed around; the image
 * is taller and hangs below it. The wordmark's body stays centred in the
 * masthead, and only the final nun and the cursor escape downward — into the
 * masthead's own bottom padding, so nothing collides with the nav.
 */
@media (min-width: 1025px) {
	.be7-header:not(.is-scrolled) .be7-logo__img {
		height: 45px;
		margin-block-end: -7px;
	}

	.be7-header:not(.is-scrolled) .be7-logo { overflow: visible; }
}

/* ==========================================================================
   Round 6.2 — print: the article and nothing else, set like a page
   ========================================================================== */

@media print {
	/*
	 * A4 is narrower than the 768px breakpoint, so the PHONE layout is what
	 * prints — including the fixed bottom bar, which a fixed position would
	 * repeat on every sheet. Everything that is navigation, advertising or
	 * self-promotion goes: header, footer, the mobile bar, banners, both
	 * recommendation blocks (the mid-article one and "מה לקרוא עכשיו"), share,
	 * the WhatsApp invitation, the preferred-source ask, and the tag chips.
	 */
	.be7-header,
	.be7-topbar,
	.be7-masthead,
	.be7-nav,
	.be7-bottombar,
	.be7-footer,
	.be7-drawer,
	.be7-searchlay,
	.be7-wa,
	.be7-ad,
	.be7-recs,
	.be7-share,
	.be7-join,
	.be7-prefer,
	.be7-article__tags,
	.be7-article__sidebar,
	.be7-breadcrumbs,
	.be7-install,
	.be7-skip-link,
	#cookie-notice,
	#wpadminbar { display: none !important; }

	html, body { padding: 0 !important; margin: 0 !important; }

	/* Set like print, not like a screen: smaller type, tighter leading. */
	.be7-article__title { font-size: 20pt; line-height: 1.12; }
	.be7-article__deck { font-size: 11.5pt; line-height: 1.3; margin-block-start: 6pt; }
	.be7-article__meta { font-size: 9pt; margin-block-start: 6pt; }

	.entry-content,
	.entry-content p,
	.entry-content li {
		font-size: 10pt !important;
		line-height: 1.4 !important;
	}

	.entry-content > * + * { margin-block-start: 7pt; }
	.entry-content h2, .entry-content h3 { font-size: 12pt; line-height: 1.2; margin-block-start: 12pt; }

	.be7-article__media { margin-block: 10pt; }
	.be7-article__caption, .be7-article__credit, .be7-article__figcaption { font-size: 8.5pt; }

	p, li { orphans: 3; widows: 3; }
	h1, h2, h3 { page-break-after: avoid; }
}

/* ---------- Shorts: titles that end where they say they end ---------- */

/*
 * line-clamp + bottom padding is a trap: the clamp hides the fourth line, but
 * the padding box is still "inside", so a sliver of that line peeks into it
 * and gets cut — text that seems to run off the card. The scrim moves to its
 * own layer and the title carries no block padding at all.
 */
.be7-shorts__card::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 62%;
	background: linear-gradient(transparent, rgb(0 0 0 / 0.5) 38%, rgb(0 0 0 / 0.93));
	pointer-events: none;
}

.be7-shorts__title {
	z-index: 1;
	bottom: 12px;
	padding: 0 12px;
	background: none;
	line-height: 1.3;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* ---------- Single post: headline at 1, deck at 1.2 ---------- */

/* Screen only — the print sheet keeps its own, slightly looser setting. */
@media screen {
	.be7-article__title { line-height: 1; }
	.be7-article__deck { line-height: 1.2; }
}

/* ---------- Article byline: the Hebrew date sits after a thin bar ---------- */

.be7-article__hebrew-date::before {
	content: "|";
	margin-inline: 8px;
	color: #b7bfcc;
	font-weight: 400;
}

/* ==========================================================================
   Round 7 — pre-production polish
   ========================================================================== */

/* ---------- Mobile: the lead story's type ---------- */

@media (max-width: 767px) {
	.be7-hero__title { font-size: 26px; line-height: 1; }
	.be7-hero__deck { line-height: 1.3; }

	/* Card headlines at 1.3rem (20.8px) crowd a phone; 19px reads better.
	   Outranks the section-level sizes set for desktop above. */
	.be7-card .be7-card__title,
	.be7-home-section .be7-card .be7-card__title,
	.be7-postlist--headlines .be7-card .be7-card__title { font-size: 19px; }
}

/* ---------- The red exposure tag: smaller, riding the image's top edge ---------- */

/*
 * Half in, half out: the tag straddles the picture's upper edge instead of
 * sitting inside it, the way the paper's flashes cut across a photo. On
 * phones it was too tall for the image; the block padding drops to 2px.
 * The slant is the paper's: a parallelogram, text kept upright.
 */
.be7-card__media { overflow: visible; }

.be7-card__flash {
	top: -9px;
	inset-inline-start: 10px;
	padding: 2px 12px;
	line-height: 1.5;
	border-radius: 2px;
	transform: skewX(-10deg);
	transform-origin: bottom;
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
}

.be7-card__flash > span { display: inline-block; transform: skewX(10deg); }

.be7-card__media img,
.be7-card__media .be7-card__play { border-radius: inherit; }

@media (max-width: 767px) {
	.be7-card__flash { top: -8px; padding: 2px 10px; font-size: 11.5px; }
}

/* The hero keeps its own flash inside the frame (its image is full-bleed on
   phones — nothing above it to spill into). */
.be7-hero__media .be7-card__flash { top: 12px; transform: none; }
.be7-hero__media .be7-card__flash > span { transform: none; }

/* The tag rides above the picture, so the card and its link must not clip it. */
.be7-card,
.be7-card__link,
.be7-catsec--cards .be7-card,
.be7-postlist--headlines .be7-card { overflow: visible; }

/* The overlay look keeps everything inside its rounded frame — there the tag stays put. */
.be7-catsec--overlay .be7-card { overflow: hidden; }
.be7-catsec--overlay .be7-card__flash { top: 10px; transform: none; }
.be7-catsec--overlay .be7-card__flash > span { transform: none; }

/* ---------- Cards look on phones: the headline shows whole ---------- */

/*
 * Two columns at 19px left a 170px-wide card three lines of headline and an
 * ellipsis — headlines were being cut mid-sentence. On phones the cards look
 * becomes a row of image-beside-text cards (the site's phone idiom), with
 * the clamp lifted: a headline always shows in full.
 */
@media (max-width: 767px) {
	.be7-catsec--cards .be7-catsec__list { display: grid; grid-template-columns: 1fr; gap: 12px; }

	.be7-catsec--cards .be7-card > a {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: 12px;
	}

	.be7-catsec--cards .be7-card__media { flex: 0 0 38%; aspect-ratio: 4 / 3; margin: 0; }
	.be7-catsec--cards .be7-card__body { min-width: 0; flex: 1 1 auto; padding-block: 10px; }
	.be7-catsec--cards .be7-card__title,
	.be7-catsec--cards .be7-card__meta { padding-inline: 0 12px; }
	.be7-catsec--cards .be7-card__meta { padding-block-end: 0; }

	.be7-card .be7-card__title {
		-webkit-line-clamp: unset;
		line-clamp: unset;
		overflow: visible;
		display: block;
	}
}

/* ---------- The flash tag: 2px lower, and free of every clip ---------- */

/*
 * Two pixels lower, so it reads as this card's tag and not the one above.
 * And on desktop the feature look's lead image box clipped its top sliver —
 * the picture keeps its rounded corners through the img itself, so the box
 * can let the tag out.
 */
.be7-card__flash { top: -7px; }
.be7-hero__media .be7-card__flash { top: 12px; }

@media (max-width: 767px) {
	.be7-card__flash { top: -6px; }
}

.be7-catsec--feature .be7-card__media,
.be7-catsec--feature .be7-card:first-child .be7-card__media,
.be7-catsec--rows .be7-card__media,
.be7-catsec--strip .be7-card__media,
.be7-postlist--headlines .be7-card__media { overflow: visible; }

.be7-catsec--feature .be7-card__media img,
.be7-catsec--rows .be7-card__media img,
.be7-catsec--strip .be7-card__media img,
.be7-postlist--headlines .be7-card__media img { border-radius: inherit; }

/* The overlay look is the one place the frame must clip: it keeps its own tag position. */
.be7-catsec--overlay .be7-card__flash { top: 10px; }

/* Beats every look-specific media rule (the :not(:first-child) ones included):
   a card that carries a flash lets it out; the picture keeps its own corners. */
.be7-card .be7-card__media:has(> .be7-card__flash) { overflow: visible !important; }
.be7-card .be7-card__media:has(> .be7-card__flash) img { border-radius: inherit; }
.be7-catsec--overlay .be7-card .be7-card__media:has(> .be7-card__flash) { overflow: hidden !important; }

/* ---------- Video in the article body: a landscape frame, however it was pasted ----------
   The base `iframe { height: auto }` collapsed a pasted <iframe> or an
   auto-embedded YouTube link (classic editor, no block wrapper) to the
   browser's 150px default. Video hosts get a 16:9 frame; audio players
   (Spotify, SoundCloud) keep the height they ask for. Block embeds already
   carry WordPress's own ratio wrapper, which still wins. */
.entry-content iframe[src*="youtube.com/"],
.entry-content iframe[src*="youtube-nocookie.com/"],
.entry-content iframe[src*="youtu.be/"],
.entry-content iframe[src*="vimeo.com/"],
.entry-content iframe[src*="dailymotion.com/"],
.entry-content iframe[src*="facebook.com/plugins/video"] {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--be7-radius);
}

/* ---------- Card pictures keep their ratio ----------
   Letting the flash tag spill out (overflow: visible, above) re-enabled the
   automatic minimum height of an aspect-ratio box, so a tall photo grew its
   card on every archive and grid. min-height: 0 restores the crop. */
.be7-card__media { min-height: 0; }

/* ==========================================================================
   Tabbed features — "פרויקט במקטעים" (אזמין לסעודתי and its kind)
   One part at a time: a strip of portrait tabs, then the part's head with
   the host and the guest in rings, a headline, the prose with a drop cap,
   and a share row so each participant can pass on their own piece.
   ========================================================================== */

.be7-tabbed { margin-block: 8px 32px; min-width: 0; max-width: 100%; }

.be7-tabbed__intro { margin-block-end: 20px; }

/* ---- The strip of tabs ---- */
.be7-tabbed__tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding: 6px 4px 14px;
	margin: 0 -4px 8px;
	border-block-end: 1px solid #e3e7ee;
	-webkit-overflow-scrolling: touch;
	/* The strip's width must come from the page, never from its eight tabs:
	   without this the article column grew to fit them on phones. */
	contain: inline-size;
}
.be7-tabbed__tabs::-webkit-scrollbar { display: none; }

.be7-tabbed__tab {
	flex: 0 0 auto;
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 108px;
	padding: 8px 6px;
	border-radius: 14px;
	text-decoration: none;
	color: var(--be7-text);
	text-align: center;
	transition: background-color 0.15s ease;
}
.be7-tabbed__tab:hover { background: #f1f4f8; color: var(--be7-text); }
.be7-tabbed__tab:focus-visible { outline: 3px solid var(--be7-cyan); outline-offset: 2px; }
.be7-tabbed__tab[aria-selected="true"] { background: #eaf9fa; }

.be7-tabbed__tab-pic {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	padding: 3px;
	background: #dfe4ec;
	transition: background 0.15s ease, transform 0.15s ease;
}
.be7-tabbed__tab[aria-selected="true"] .be7-tabbed__tab-pic {
	background: var(--be7-grad, linear-gradient(180deg, #005799, #042c65));
	box-shadow: 0 0 0 2px var(--be7-cyan);
	transform: scale(1.06);
}
.be7-tabbed__tab-pic img,
.be7-tabbed__portrait-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 20%;
	display: block;
	background: #fff;
}
.be7-tabbed__tab-name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}
.be7-tabbed__tab[aria-selected="true"] .be7-tabbed__tab-name { color: var(--be7-hover, #005799); }
.be7-tabbed__tab-host {
	font-size: 11.5px;
	color: #6b7484;
	line-height: 1.2;
}
.be7-tabbed__tab-host::before { content: "מארח/ת: "; }

/* ---- A part ---- */
.be7-tabbed__panel { margin-block-start: 8px; }

.be7-tabbed__head { text-align: center; margin-block-end: 22px; }

.be7-tabbed__portraits {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0;
	margin-block-end: 14px;
}
.be7-tabbed__portrait { margin: 0; text-align: center; width: 124px; }
.be7-tabbed__portrait--guest { width: 164px; }
/* Each name stays inside its own column and wraps there. */
.be7-tabbed__portraits { gap: 10px; }
.be7-tabbed__ring {
	display: block;
	width: 124px;
	height: 124px;
	border-radius: 50%;
	padding: 4px;
	background: #fff;
	box-shadow: 0 8px 24px rgb(2 27 68 / 0.16);
	margin: 0 auto 8px;
}
.be7-tabbed__portrait--guest .be7-tabbed__ring {
	width: 164px;
	height: 164px;
	background: var(--be7-grad, linear-gradient(180deg, #005799, #042c65));
	box-shadow: 0 0 0 3px var(--be7-cyan), 0 10px 28px rgb(2 27 68 / 0.22);
	position: relative;
	z-index: 1;
}
.be7-tabbed__portrait figcaption {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	max-width: 100%;
	padding-inline: 4px;
	margin: 0 auto;
	overflow-wrap: anywhere;
}
.be7-tabbed__role {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #6b7484;
	margin-block-end: 2px;
}
.be7-tabbed__portrait--guest .be7-tabbed__role { color: var(--be7-hover, #005799); }

.be7-tabbed__kicker {
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #6b7484;
	letter-spacing: 0.03em;
}
.be7-tabbed__title {
	margin: 0;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.15;
	text-wrap: balance;
}
.be7-tabbed__credits {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: #7a8290;
}

/* The print edition's drop cap, on the first paragraph of each part. */
.be7-tabbed__body > p:first-of-type::first-letter {
	float: inline-start;
	font-size: 3.6em;
	line-height: 0.82;
	font-weight: 700;
	color: var(--be7-hover, #005799);
	padding-inline-end: 8px;
	padding-block-start: 4px;
}

/* ---- Share + prev/next ---- */
.be7-tabbed__foot {
	margin-block-start: 28px;
	padding-block-start: 18px;
	border-block-start: 1px solid #e3e7ee;
	display: grid;
	gap: 16px;
}
.be7-tabbed__share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.be7-tabbed__share-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.be7-tabbed__share-wa:hover, .be7-tabbed__share-wa:focus-visible { background: #1eb85a; color: #fff; }
.be7-tabbed__share-wa svg { width: 20px; height: 20px; fill: currentColor; }
.be7-tabbed__copy {
	background: none;
	border: 1px solid #c9d0db;
	border-radius: 999px;
	padding: 8px 14px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	color: var(--be7-text);
}
.be7-tabbed__copy:hover, .be7-tabbed__copy:focus-visible { border-color: var(--be7-hover); color: var(--be7-hover); }

.be7-tabbed__nav { display: flex; justify-content: space-between; gap: 12px; }
.be7-tabbed__nav-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	color: var(--be7-text);
	padding: 10px 14px;
	border-radius: 10px;
	background: #f1f4f8;
	min-width: 0;
	max-width: 48%;
}
.be7-tabbed__nav-link--next { margin-inline-start: auto; text-align: end; }
.be7-tabbed__nav-link:hover, .be7-tabbed__nav-link:focus-visible { background: #eaf9fa; color: var(--be7-hover); }
.be7-tabbed__nav-dir { font-size: 12px; color: #6b7484; }
/* RTL: "previous" sits to the right, so its chevron points right. */
.be7-tabbed__nav-link--prev .be7-tabbed__nav-dir::before { content: "› "; }
.be7-tabbed__nav-link--next .be7-tabbed__nav-dir::after { content: " ‹"; }
.be7-tabbed__nav-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767px) {
	.be7-tabbed__tabs { margin-inline: -16px; padding-inline: 12px; }
	.be7-tabbed__tab { width: 92px; }
	.be7-tabbed__tab-pic { width: 56px; height: 56px; }
	.be7-tabbed__tab-name { font-size: 13px; }
	.be7-tabbed__ring { width: 96px; height: 96px; }
	.be7-tabbed__portrait { width: 96px; }
	.be7-tabbed__portrait--guest { width: 128px; }
	.be7-tabbed__portrait--guest .be7-tabbed__ring { width: 128px; height: 128px; }
	.be7-tabbed__portrait figcaption { font-size: 13px; }
	.be7-tabbed__title { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
	.be7-tabbed__tab, .be7-tabbed__tab-pic { transition: none; }
}

/* Print: every part, in order, no tabs. */
@media print {
	.be7-tabbed__tabs, .be7-tabbed__foot { display: none !important; }
	.be7-tabbed__panel[hidden] { display: block !important; }
	.be7-tabbed__panel { break-before: page; }
	.be7-tabbed__panel:first-of-type { break-before: auto; }
}

/* A typed run of dashes or a long address must wrap, not widen the phone. */
.entry-content p, .entry-content li { overflow-wrap: break-word; }

/* The tabbed feature's composite as a slim banner above the tabs. */
.be7-article__media--banner img {
	aspect-ratio: auto;
	height: clamp(96px, 15vw, 190px);
	width: 100%;
	object-fit: cover;
	/* The composite's title band; the faces are the tabs' job just below. */
	object-position: 50% 42%;
	border-radius: var(--be7-radius);
}
@media (max-width: 767px) {
	.be7-article__media--banner img { height: 120px; object-position: 50% 42%; }
}

/* A banner made for the slot keeps its own proportions. */
.be7-article__media--banner-own img { height: auto; aspect-ratio: auto; object-fit: unset; }
/* On phones a 6:1 strip would be a sliver; crop to the middle (the title) instead. */
@media (max-width: 767px) { .be7-article__media--banner-own img { height: 118px; object-fit: cover; object-position: 50% 50%; } }