/*
Theme Name: Antena
Theme URI: https://antena.co.il
Author: אנטנה
Description: התבנית של אנטנה, מגזין טכנולוגיה בעברית. בנויה לפי ספר המותג: נייר, דיו, כחול שידור ונקודה כתומה אחת. מאסטהד שבו הלוגו נבנה מתוך רעש ומגיב לעכבר ולאצבע, דף בית של אתר חדשות, עמוד כתבה מלא, מצב בהיר וכהה.
Version: 3.5.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: antena
License: GPLv2 or later (assets/a11y.js: GPLv3 or later, see assets/a11y-LICENSE.txt)
*/

/* Every font size is multiplied by --a11y-text (1 unless the reader picks "הגדלת טקסט" in the
   accessibility panel), so larger text keeps headings larger than body text. */

/* ==========================================================================
   Tokens, from the brand book. Paper 55%, ink 25%, blue 18%, orange 2% and
   never more: orange is the mast light, and on the site only the dot beside
   "הכי חדש". At night the page is ink, and the wordmark is all white.
   ========================================================================== */
:root {
	color-scheme: light;
	--focus: #2B3CFF;
	--bg: #FFFFFF;
	--paper: #F5F6FB;
	--surface: #FFFFFF;
	--text: #0E1330;
	--text-2: #3D4466;
	/* 4.8:1 on paper and 5.2:1 on white: small grey text still passes AA everywhere it sits. */
	--text-3: #656B8C;
	--line: #E3E6F1;
	--line-2: #C9CEE2;
	--signal: #2B3CFF;
	--signal-hover: #1F2DD6;
	--signal-text: #2B3CFF;
	--signal-soft: #ECEEFF;
	--on-signal: #FFFFFF;
	--mast: #FF5A1F;
	--header-bg: #FFFFFF;
	--mast-bg: #F5F6FB;
	--invert: #0E1330;
	--on-invert: #FFFFFF;
	--footer-bg: #0E1330;
	--card-shadow: 0 14px 34px -20px rgba(14, 19, 48, 0.45);
	--tune-text: #0E1330;
	--tune-aleph: #2B3CFF;
	--tune-mast: #FF5A1F;
	--wm-text: #0E1330;
	--wm-aleph: #2B3CFF;
	--wm-mast: #FF5A1F;
	--sun: none;
	--moon: block;

	--bar-off: #D3D7E8;
	--bar-bad: #E5484D;
	--bar-warn: #F59E0B;
	--bar-good: #16A34A;
	--board-bg: #0E1330;
	--board-fg: #F2F4FF;
	--board-dim: #8D94BD;
	--board-line: #262D55;
	--font-display: "Karantina", "IBM Plex Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
	--font-text: "IBM Plex Sans Hebrew", "Arial Hebrew", "Segoe UI", Arial, sans-serif;
	--font-data: "IBM Plex Mono", "IBM Plex Sans Hebrew", ui-monospace, Menlo, Consolas, monospace;
	--r: 10px;
	--r-sm: 6px;
	--wrap: 1240px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--focus: #8C96FF;
		--bg: #0E1330;
		--paper: #161C42;
		--surface: #1A2150;
		--text: #ECEEFF;
		--text-2: #BCC2E0;
		--text-3: #8F96BC;
		--line: #262E5E;
		--line-2: #39427A;
		--signal-text: #8C96FF;
		--signal-soft: #1F2660;
		--header-bg: #0E1330;
		--mast-bg: #0E1330;
		--invert: #ECEEFF;
		--on-invert: #0E1330;
		--footer-bg: #080B1C;
		--card-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9);
		--tune-text: #ECEEFF;
		--tune-aleph: #ECEEFF;
		--wm-text: #ECEEFF;
		--wm-aleph: #ECEEFF;
		--bar-off: #2E3560;
		--board-bg: #161C42;
		--sun: block;
		--moon: none;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--focus: #8C96FF;
	--bg: #0E1330;
	--paper: #161C42;
	--surface: #1A2150;
	--text: #ECEEFF;
	--text-2: #BCC2E0;
	--text-3: #8F96BC;
	--line: #262E5E;
	--line-2: #39427A;
	--signal-text: #8C96FF;
	--signal-soft: #1F2660;
	--header-bg: #0E1330;
	--mast-bg: #0E1330;
	--invert: #ECEEFF;
	--on-invert: #0E1330;
	--footer-bg: #080B1C;
	--card-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9);
	--tune-text: #ECEEFF;
	--tune-aleph: #ECEEFF;
	--wm-text: #ECEEFF;
	--wm-aleph: #ECEEFF;
	--bar-off: #2E3560;
	--board-bg: #161C42;
	--sun: block;
	--moon: none;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 84px;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-text);
	font-size: calc(16px * var(--a11y-text, 1));
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote {
	margin: 0;
}

/* Headings are set in the text face unless a class says otherwise. This also outranks the
   antena-site plugin's "h1 to h6 in Karantina", so Karantina stays once per screen. */
body :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-text);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

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

a:hover {
	color: var(--signal-text);
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* On blue and ink blocks the focus ring turns white. */
.band,
.board,
.site-footer {
	--focus: #FFFFFF;
}

/* Numbers in mono, as the brand book sets them. */
.num {
	font-family: var(--font-data);
}

/* A long link or word in a text breaks instead of pushing the page sideways on a phone
   (break-word, unlike anywhere, leaves table columns their width). */
.entry-content,
.comment-content,
.list-title,
.dek,
.points {
	overflow-wrap: break-word;
}

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

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	inset-inline-start: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 10px 16px;
	background: var(--invert);
	color: var(--on-invert);
	border-radius: var(--r-sm);
}

.admin-bar .skip-link:focus {
	top: 40px;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 24px;
}

.icon {
	width: 22px;
	height: 22px;
	flex: none;
}

.ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

/* The wordmark and the mark take their colours from the tokens, so they follow the mode. */
.wordmark .wm-t { fill: var(--wm-text); }
.wordmark .wm-a { fill: var(--wm-aleph); }
.wordmark .wm-m { fill: var(--wm-mast); }

.wordmark .wm-arc {
	fill: none;
	stroke: var(--wm-mast);
	stroke-width: 6.97;
}

.mark {
	--mk-fill: #FFFFFF;
	--mk-mast: #FF5A1F;
	display: block;
	width: 100%;
	height: auto;
}

.mark .mk-f { fill: var(--mk-fill); }
.mark .mk-m { fill: var(--mk-mast); }

.mark .mk-arc {
	fill: none;
	stroke: var(--mk-mast);
	stroke-width: 4.6;
}

/* A section label on a picture, or above a headline. */
.chip {
	display: inline-block;
	padding: 3px 10px 4px;
	font-size: calc(12.5px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1.4;
	color: var(--on-signal);
	background: var(--signal);
	border-radius: 999px;
}

a.chip:hover {
	color: var(--on-signal);
	background: var(--signal-hover);
}

/* ==========================================================================
   Masthead (home page): the wordmark tunes in from noise and answers the pointer
   ========================================================================== */
.masthead {
	position: relative;
	background: var(--mast-bg);
	border-bottom: 1px solid var(--line);
}

/* --mark-top and --mark-h place the wordmark: the static logo here, and the dots in masthead.js.
   They leave room under the logo for the date, the reception label and the slogan. */
.tune {
	--mark-top: 0.42;
	--mark-h: 0.6;
	position: relative;
	height: 150px;
}

.tune-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	touch-action: pan-y pinch-zoom;
}

.mast-static {
	position: absolute;
	top: calc(var(--mark-top) * 100%);
	left: 50%;
	width: auto;
	height: calc(var(--mark-h) * 100%);
	transform: translate(-50%, -50%);
}

.masthead--live .mast-static {
	visibility: hidden;
}

/* With scripts on, the canvas builds the logo from noise, so the finished logo must not flash
   first. If the script never runs, the static logo shows after 3 seconds. */
.js .masthead:not(.masthead--live) .mast-static {
	visibility: hidden;
	animation: mast-fallback 0s 3s forwards;
}

@keyframes mast-fallback {
	to {
		visibility: visible;
	}
}

/* The browser would not let the script read the logo's pixels: the static logo stays. */
.js .masthead.masthead--still .mast-static {
	visibility: visible;
	animation: none;
}

.mast-row {
	position: absolute;
	inset-inline: 0;
	bottom: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: calc(13px * var(--a11y-text, 1));
	color: var(--text-2);
	pointer-events: none;
}

.mast-date {
	font-family: var(--font-data);
	font-size: calc(12px * var(--a11y-text, 1));
	font-weight: 500;
}

.tune-label {
	font-family: var(--font-data);
	font-size: calc(12px * var(--a11y-text, 1));
}

.tune-label b {
	font-weight: 500;
	color: var(--signal-text);
}

.mast-tag {
	font-weight: 700;
	color: var(--text);
}

/* ==========================================================================
   Header bar: sticky, white (ink at night)
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--header-bg);
	border-bottom: 1px solid var(--line);
}

.admin-bar .site-header {
	top: 32px;
}

.head-row {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 64px;
}

.brand {
	display: block;
	flex: none;
	line-height: 0;
	transition: opacity 0.25s ease, visibility 0.25s ease, max-width 0.3s ease, margin 0.3s ease;
}

.site-header .brand {
	max-width: 80px;
	overflow: hidden;
}

.site-header .wordmark {
	display: block;
	width: auto;
	height: 34px;
}

/* Under the masthead the bar starts without the logo, and shows it once the masthead scrolls away. */
.has-masthead .site-header .brand {
	opacity: 0;
	visibility: hidden;
}

.has-masthead.mast-gone .site-header .brand {
	opacity: 1;
	visibility: visible;
}

/* On wide screens the hidden logo also gives up its place, so the sections start at the edge,
   under the masthead's date, and slide over when the logo comes in. */
@media (min-width: 1001px) {
	.has-masthead:not(.mast-gone) .site-header .brand {
		max-width: 0;
		margin-inline-end: -28px;
	}
}

.main-nav {
	flex: 1;
	min-width: 0;
}

/* The 4px padding keeps a focus ring inside the scrolling list; the side and bottom margins take
   it back, and the links give up 4px at the top, so nothing moves. */
.nav-list {
	display: flex;
	gap: 24px;
	margin: 0 -4px -4px;
	padding: 4px;
	list-style: none;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}

.nav-list::-webkit-scrollbar {
	display: none;
}

.nav-list a {
	display: block;
	padding: 16px 0 17px;
	font-size: calc(15.5px * var(--a11y-text, 1));
	font-weight: 500;
	color: var(--text);
	border-bottom: 3px solid transparent;
}

.nav-list a:hover {
	color: var(--signal-text);
}

/* The current section, also on its articles (WordPress marks the section as the post's parent). */
.nav-list .current-menu-item > a,
.nav-list .current-menu-parent > a,
.nav-list .current-post-ancestor > a {
	font-weight: 700;
	border-bottom-color: var(--signal-text);
}

/* The sections' own row, for narrow screens (see the 1000px block). */
.nav-row {
	display: none;
}

.head-tools {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
}

.icon-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font: inherit;
	color: var(--text-2);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	list-style: none;
}

.icon-btn::-webkit-details-marker {
	display: none;
}

.icon-btn:hover,
.search-pop[open] .icon-btn,
.icon-btn[aria-expanded="true"] {
	color: var(--text);
	background: var(--paper);
}

.theme-toggle .i-sun { display: var(--sun); }
.theme-toggle .i-moon { display: var(--moon); }

/* The panel hangs from the whole tools group, not from the small search button, so on a phone
   it starts at the content edge and stays on screen. */
.search-pop {
	position: static;
}

.search-panel {
	position: absolute;
	top: calc(100% + 12px);
	inset-inline-end: 0;
	width: min(400px, calc(100vw - 32px));
	padding: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--card-shadow);
}

.wa-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-inline-start: 6px;
	padding: 8px 16px;
	font-size: calc(14.5px * var(--a11y-text, 1));
	font-weight: 700;
	color: var(--on-signal);
	background: var(--signal);
	border-radius: 999px;
}

.wa-btn:hover {
	color: var(--on-signal);
	background: var(--signal-hover);
}

.wa-btn .icon {
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   Pictures: the photo, or the brand book's default photo
   ========================================================================== */
.media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--paper);
	border-radius: var(--r);
}

.media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

a:hover .media img {
	transform: scale(1.03);
}

/* The antenna stands left of centre in the default photo (right of centre in its mirrored
   version); keep it in every crop. */
.media img.is-default {
	object-position: 25% 50%;
}

.media img.is-mirrored {
	object-position: 75% 50%;
}

.media .chip {
	position: absolute;
	bottom: 10px;
	inset-inline-start: 10px;
	z-index: 1;
}

/* ==========================================================================
   Stories and the home page
   ========================================================================== */
.story-link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
}

.story-text,
.story-card {
	display: grid;
	gap: 6px;
}

/* The kicker above the headline: only in the phone list, where the chip is hidden. */
.story-kicker {
	display: none;
	font-size: calc(12.5px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1.3;
	color: var(--signal-text);
}

.story-title {
	font-family: var(--font-text);
	font-size: calc(18px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1.38;
	color: var(--text);
}

.story-link:hover .story-title,
.story-link:hover .lead-title {
	color: var(--signal-text);
}

.story-dek {
	font-size: calc(15.5px * var(--a11y-text, 1));
	line-height: 1.55;
	color: var(--text-2);
}

.story-meta {
	font-family: var(--font-data);
	font-size: calc(12px * var(--a11y-text, 1));
	color: var(--text-3);
}

.top-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 32px;
	padding-top: 28px;
	align-items: start;
}

/* The lead: a big photo, and the headline on a card that overlaps it, with the blue bar. */
.lead .media {
	aspect-ratio: 16 / 9;
}

.lead .media .chip {
	top: 14px;
	bottom: auto;
	inset-inline-start: 14px;
	font-size: calc(13px * var(--a11y-text, 1));
}

.lead .story-card {
	position: relative;
	z-index: 2;
	margin-top: -88px;
	margin-inline: 22px 72px;
	padding: 20px 24px 18px;
	background: var(--surface);
	border-inline-start: 6px solid var(--signal);
	border-radius: var(--r-sm);
	box-shadow: var(--card-shadow);
}

/* On a wide screen the lead photo is lower, so the headline is on the first screen of a laptop.
   Between 861 and 1100px the lead spans the full width, so its photo is lower still (a tablet
   held sideways). */
@media (min-width: 1101px) {
	.lead .media {
		aspect-ratio: 2 / 1;
	}

	.lead .story-card {
		margin-top: -110px;
	}
}

@media (min-width: 861px) and (max-width: 1100px) {
	.lead .media {
		aspect-ratio: 21 / 9;
	}

	.lead .story-card {
		margin-top: -110px;
	}
}

.lead-title {
	font-family: var(--font-display);
	font-size: calc(clamp(36px, 3.5vw, 52px) * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 0.98;
	color: var(--text);
}

.lead .story-dek {
	font-size: calc(17px * var(--a11y-text, 1));
}

/* "הכי חדש": a flash list on paper, with the site's one orange dot */
.latest {
	padding: 18px 20px 6px;
	background: var(--paper);
	border-radius: var(--r);
}

.latest-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 10px;
	font-family: var(--font-text);
	font-size: calc(18px * var(--a11y-text, 1));
	font-weight: 700;
	border-bottom: 2px solid var(--text);
}

/* The dot blinks twice as the page opens, then holds: under five seconds, so no pause button
   is needed (WCAG 2.2.2, ת"י 5568). */
.latest-title::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--mast);
	border-radius: 50%;
	animation: antena-blink 2.2s ease-in-out 2;
}

@keyframes antena-blink {
	50% {
		opacity: 0.35;
	}
}

.latest-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.latest-list li + li {
	border-top: 1px solid var(--line);
}

.latest-list a {
	display: grid;
	grid-template-columns: 3.2em minmax(0, 1fr);
	gap: 10px;
	padding-block: 12px;
}

.latest-list time {
	padding-top: 2px;
	font-family: var(--font-data);
	font-size: calc(12.5px * var(--a11y-text, 1));
	color: var(--signal-text);
}

.latest-t {
	font-size: calc(15.5px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1.45;
	color: var(--text);
}

.latest-list a:hover .latest-t {
	color: var(--signal-text);
}

.cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.cards-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Two short sections side by side, two stories each: together a full row of four. */
.section-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	margin-top: 56px;
}

.section-pair .section {
	margin-top: 0;
}

.home-cards {
	margin-top: 40px;
}

/* sections */
.section {
	margin-top: 56px;
}

.sec-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.sec-title {
	padding-inline-start: 12px;
	font-family: var(--font-text);
	font-size: calc(23px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1.2;
	border-inline-start: 5px solid var(--signal);
}

.sec-title a:hover {
	color: var(--signal-text);
}

.sec-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: calc(14px * var(--a11y-text, 1));
	font-weight: 500;
	color: var(--signal-text);
}

.sec-more .icon {
	width: 16px;
	height: 16px;
}

/* landing board: what reached Israel and for how much */
.board {
	margin-top: 56px;
	padding: 22px 24px 12px;
	color: var(--board-fg);
	background: var(--board-bg);
	border-radius: var(--r);
}

.board-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.board-title {
	font-family: var(--font-text);
	font-size: calc(26px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1.2;
}

.board-sub {
	font-size: calc(13px * var(--a11y-text, 1));
	color: var(--board-dim);
}

.board-wrap {
	margin-top: 12px;
	overflow-x: auto;
}

.board table {
	width: 100%;
	min-width: 460px;
	font-family: var(--font-data);
	font-size: calc(14.5px * var(--a11y-text, 1));
	border-collapse: collapse;
}

.board th {
	padding: 7px 8px;
	font-family: var(--font-text);
	font-size: calc(12.5px * var(--a11y-text, 1));
	font-weight: 500;
	text-align: start;
	color: var(--board-dim);
	border-bottom: 1px solid var(--board-line);
}

.board td {
	padding: 13px 8px;
	text-align: start;
	border-bottom: 1px solid var(--board-line);
}

.board tr:last-child td {
	border-bottom: 0;
}

.board td:first-child {
	font-family: var(--font-text);
	font-weight: 700;
}

.board td:first-child a:hover {
	color: #A3AAFF;
}

.board .dim {
	color: var(--board-dim);
}

.st {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.st::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--board-dim);
	border-radius: 50%;
}

.st.on::before { background: #22C55E; }
.st.way::before { background: var(--bar-warn); }

/* WhatsApp band: a flat blue block, like the brand book's blue sections */
.band {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 56px;
	padding: 24px 28px;
	color: #FFFFFF;
	background: #2B3CFF;
	border-radius: var(--r);
}

.band-title {
	font-family: var(--font-text);
	font-size: calc(26px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1.2;
}

.band-text {
	flex: 1;
	min-width: 220px;
	color: #DDE1FF;
}

.band-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	font-weight: 700;
	color: #2B3CFF;
	background: #FFFFFF;
	border-radius: 999px;
}

.band-btn:hover {
	color: #0E1330;
}

.band-btn .icon {
	width: 18px;
	height: 18px;
}

/* the home page before the first story */
.empty-hero {
	max-width: 760px;
	padding-block: 64px 24px;
}

.empty-title {
	font-family: var(--font-display);
	font-size: calc(clamp(60px, 9vw, 120px) * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 0.9;
}

.empty-text {
	max-width: 52ch;
	margin-top: 18px;
	font-size: calc(19px * var(--a11y-text, 1));
	color: var(--text-2);
}

/* ==========================================================================
   Article
   ========================================================================== */
.progress {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 60;
	height: 3px;
	pointer-events: none;
}

.admin-bar .progress {
	top: 32px;
}

.progress span {
	display: block;
	height: 100%;
	background: var(--signal);
	transform: scaleX(0);
	transform-origin: 100% 50%;
}

.article-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 60px;
	padding-top: 32px;
}

.article {
	min-width: 0;
}

.article-head,
.article-body,
.hero {
	max-width: 760px;
}

.article-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.kicker-type {
	font-size: calc(14px * var(--a11y-text, 1));
	font-weight: 500;
	color: var(--text-3);
}

.entry-title {
	margin-top: 14px;
	padding-inline-start: 18px;
	font-family: var(--font-display);
	font-size: calc(clamp(42px, 5vw, 66px) * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 0.98;
	border-inline-start: 6px solid var(--signal);
}

.dek {
	margin-top: 16px;
	font-size: calc(20px * var(--a11y-text, 1));
	line-height: 1.55;
	color: var(--text-2);
}

.byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding-block: 14px;
	border-block: 1px solid var(--line);
}

.byline-mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	background: #2B3CFF;
	border-radius: 50%;
}

.byline-mark .mark {
	width: 20px;
}

.byline-text {
	display: grid;
	line-height: 1.4;
}

.byline-text b {
	font-size: calc(15px * var(--a11y-text, 1));
}

.byline-text span {
	font-size: calc(13px * var(--a11y-text, 1));
	color: var(--text-3);
}

.byline-text time {
	font-family: var(--font-data);
	font-size: calc(12.5px * var(--a11y-text, 1));
}

.share-mini {
	display: flex;
	gap: 6px;
	margin-inline-start: auto;
}

.share-btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--text-2);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: 50%;
	cursor: pointer;
}

.share-btn .icon {
	width: 18px;
	height: 18px;
}

.share-btn:hover,
.share-btn.is-done {
	color: var(--signal-text);
	border-color: var(--signal-text);
}

.hero {
	margin-top: 24px;
}

.hero .media {
	aspect-ratio: 16 / 9;
}

.hero figcaption {
	margin-top: 8px;
	font-size: calc(13px * var(--a11y-text, 1));
	color: var(--text-3);
}

.article-body {
	margin-top: 28px;
}

/* "התכל׳ס": the essence, before the text */
.points {
	padding: 18px 22px 16px;
	background: var(--paper);
	border-radius: var(--r);
}

.points-label {
	font-family: var(--font-display);
	font-size: calc(32px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1;
	color: var(--signal-text);
}

.points ul {
	display: grid;
	gap: 6px;
	margin-top: 10px;
	padding-inline-start: 1.15em;
}

.points li {
	font-size: calc(17px * var(--a11y-text, 1));
	line-height: 1.6;
}

.points li::marker {
	color: var(--signal-text);
}

/* the product box: what, how much, where, for whom */
.product {
	margin-top: 20px;
	padding: 16px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
}

.product-label {
	font-size: calc(13px * var(--a11y-text, 1));
	font-weight: 700;
	color: var(--text-3);
}

.product dl {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.product dl div {
	display: grid;
	grid-template-columns: 3.4em minmax(0, 1fr);
	gap: 10px;
}

.product dt {
	font-weight: 700;
	color: var(--signal-text);
}

.product dd {
	margin: 0;
	font-size: calc(16px * var(--a11y-text, 1));
	line-height: 1.55;
}

.product dd.num {
	font-size: calc(15px * var(--a11y-text, 1));
}

.score {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
	padding-block: 14px;
	border-block: 1px solid var(--line);
}

.score b {
	display: block;
	font-size: calc(16px * var(--a11y-text, 1));
}

.score-sub {
	display: block;
	font-size: calc(14px * var(--a11y-text, 1));
	color: var(--text-3);
}

.bars {
	display: inline-flex;
	flex: none;
	align-items: flex-end;
	gap: 3px;
	height: 28px;
	direction: ltr;
}

.bars i {
	width: 7px;
	background: var(--bar-off);
	border-radius: 1px;
}

.bars i:nth-child(1) { height: 24%; }
.bars i:nth-child(2) { height: 43%; }
.bars i:nth-child(3) { height: 62%; }
.bars i:nth-child(4) { height: 81%; }
.bars i:nth-child(5) { height: 100%; }

.bars[data-level="1"] i:nth-child(-n+1),
.bars[data-level="2"] i:nth-child(-n+2) {
	background: var(--bar-bad);
}

.bars[data-level="3"] i:nth-child(-n+3) {
	background: var(--bar-warn);
}

.bars[data-level="4"] i:nth-child(-n+4),
.bars[data-level="5"] i:nth-child(-n+5) {
	background: var(--bar-good);
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-top: 20px;
}

.stats div {
	padding: 12px 8px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}

.stats b {
	display: block;
	font-family: var(--font-data);
	font-size: calc(26px * var(--a11y-text, 1));
	font-weight: 500;
	line-height: 1.1;
}

.stats span {
	display: block;
	margin-top: 4px;
	font-size: calc(12.5px * var(--a11y-text, 1));
	line-height: 1.3;
	color: var(--text-3);
}

/* the text */
.entry-content {
	margin-top: 30px;
	font-size: calc(19px * var(--a11y-text, 1));
	line-height: 1.85;
}

.entry-content > * + * {
	margin-top: 1.1em;
}

.entry-content > p:first-child {
	font-size: calc(20.5px * var(--a11y-text, 1));
	line-height: 1.75;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 1.7em;
	font-family: var(--font-text);
	font-weight: 700;
	line-height: 1.35;
}

.entry-content h2 { font-size: calc(25px * var(--a11y-text, 1)); }
.entry-content h3 { font-size: calc(21px * var(--a11y-text, 1)); }
.entry-content h4 { font-size: calc(19px * var(--a11y-text, 1)); }

.entry-content h2 + *,
.entry-content h3 + * {
	margin-top: 0.5em;
}

/* Links inside running text are blue and underlined, so they never pass for plain words. */
.entry-content a,
.list-desc a,
.empty p a,
.comment-content a,
.logged-in-as a {
	color: var(--signal-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.3em;
}

.entry-content li + li {
	margin-top: 0.4em;
}

.entry-content li::marker {
	color: var(--signal-text);
}

.entry-content blockquote {
	margin-block: 1.6em;
	padding-inline-start: 20px;
	font-size: calc(22px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1.5;
	color: var(--text);
	border-inline-start: 4px solid var(--signal);
}

.entry-content blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: calc(14px * var(--a11y-text, 1));
	font-style: normal;
	font-weight: 400;
	color: var(--text-3);
}

.entry-content figure {
	margin-inline: 0;
}

.entry-content figcaption {
	margin-top: 6px;
	font-size: calc(13px * var(--a11y-text, 1));
	color: var(--text-3);
}

.entry-content img {
	border-radius: var(--r);
}

.entry-content .wp-block-table {
	overflow-x: auto;
}

/* Only a line under each row, also in WordPress's table block (which draws a full grid). */
.entry-content table,
.entry-content .wp-block-table table,
.entry-content .wp-block-table thead,
.entry-content .wp-block-table tfoot {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.entry-content th,
.entry-content td,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: 9px 6px;
	font-size: calc(16px * var(--a11y-text, 1));
	line-height: 1.55;
	text-align: start;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--line);
}

.entry-content th,
.entry-content .wp-block-table td:first-child {
	font-weight: 500;
	color: var(--text-3);
}

.entry-content details {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}

.entry-content details + details {
	margin-top: 8px;
}

.entry-content summary {
	padding: 12px 14px;
	font-size: calc(17px * var(--a11y-text, 1));
	font-weight: 700;
	cursor: pointer;
}

.entry-content details > :not(summary) {
	margin: 0;
	padding: 0 14px 12px;
	font-size: calc(16.5px * var(--a11y-text, 1));
	color: var(--text-2);
}

.note {
	margin-top: 34px;
	padding: 14px 18px;
	border: 2px solid var(--text);
	border-radius: var(--r-sm);
}

.note-label {
	margin-bottom: 4px;
	font-size: calc(13px * var(--a11y-text, 1));
	font-weight: 700;
	color: var(--text-3);
}

.note p {
	font-size: calc(17px * var(--a11y-text, 1));
	line-height: 1.7;
}

/* The WhatsApp channel, inside an article */
.wa-inline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 34px;
	padding: 14px 18px;
	font-size: calc(16px * var(--a11y-text, 1));
	font-weight: 500;
	background: var(--paper);
	border-radius: var(--r);
}

.wa-inline .icon {
	color: var(--signal-text);
}

.wa-inline span {
	flex: 1;
}

.wa-inline b {
	flex: none;
	padding: 6px 14px;
	font-size: calc(14px * var(--a11y-text, 1));
	color: var(--on-signal);
	background: var(--signal);
	border-radius: 999px;
}

/* The weekly newsletter's sign-up, at the end of articles and on the home page */
.nl {
	margin-top: 34px;
	padding: 22px 24px;
	background: var(--paper);
	border-radius: var(--r);
}

.nl--home {
	margin-top: 56px;
}

.nl-title {
	font-family: var(--font-text);
	font-size: calc(22px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1.25;
}

.nl-text {
	margin-top: 4px;
	font-size: calc(16px * var(--a11y-text, 1));
	color: var(--text-2);
}

.nl-form {
	margin-top: 14px;
}

.nl-row {
	display: flex;
	gap: 8px;
	max-width: 560px;
}

/* The address is typed left to right; the placeholder stays on the right, with the Hebrew. */
.nl-email {
	flex: 1;
	min-width: 0;
	padding: 11px 12px;
	font: inherit;
	font-size: calc(16px * var(--a11y-text, 1));
	text-align: right;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
}

.nl-email::placeholder {
	color: var(--text-3);
	opacity: 1;
}

.nl-email:focus {
	border-color: var(--focus);
	outline: 2px solid var(--focus);
	outline-offset: 0;
}

.nl-submit {
	flex: none;
	min-height: 44px;
	padding: 11px 22px;
	font: inherit;
	font-size: calc(15px * var(--a11y-text, 1));
	font-weight: 700;
	color: var(--on-signal);
	background: var(--signal);
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
}

.nl-submit:hover {
	background: var(--signal-hover);
}

.nl-submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.nl-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	font-size: calc(15px * var(--a11y-text, 1));
	cursor: pointer;
}

.nl-consent input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--signal);
}

/* Empty until there is something to say, but never hidden: a live region that was hidden may stay
   silent when its text arrives. */
.nl-status {
	margin-top: 10px;
	font-weight: 700;
	color: var(--signal-text);
}

.nl-status:empty {
	margin: 0;
}

.nl-note {
	margin-top: 10px;
	font-size: calc(13px * var(--a11y-text, 1));
	line-height: 1.6;
	color: var(--text-3);
}

.nl-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nl-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

@media (max-width: 480px) {
	.nl {
		padding: 18px 16px;
	}

	.nl-row {
		flex-direction: column;
	}
}

/* The contact form, on the contact page (the newsroom's address is never shown on the site) */
.cf {
	max-width: 640px;
	margin-block: 24px 32px;
	padding: 22px 24px;
	background: var(--paper);
	border-radius: var(--r);
}

.entry-content .cf p {
	margin: 0;
}

.entry-content .cf .cf-field + .cf-field {
	margin-top: 16px;
}

.cf-field label {
	display: block;
	margin-bottom: 6px;
	font-size: calc(15px * var(--a11y-text, 1));
	font-weight: 700;
}

.cf-opt {
	font-weight: 400;
	color: var(--text-3);
}

.cf-req {
	color: var(--signal-text);
}

.cf input[type="text"],
.cf input[type="email"],
.cf select,
.cf textarea {
	width: 100%;
	min-width: 0;
	padding: 11px 12px;
	font: inherit;
	font-size: calc(16px * var(--a11y-text, 1));
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
}

.cf input[type="email"] {
	text-align: right;
}

.cf textarea {
	min-height: 160px;
	resize: vertical;
}

.cf input:focus,
.cf select:focus,
.cf textarea:focus {
	border-color: var(--focus);
	outline: 2px solid var(--focus);
	outline-offset: 0;
}

.entry-content .cf .cf-note {
	margin-top: 16px;
	font-size: calc(13px * var(--a11y-text, 1));
	line-height: 1.6;
	color: var(--text-3);
}

.cf-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content .cf .cf-actions {
	margin-top: 16px;
}

.entry-content .cf .cf-status {
	margin-top: 10px;
	font-size: calc(16px * var(--a11y-text, 1));
}

.entry-content .cf .cf-status:empty {
	margin: 0;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
}

.tags a {
	padding: 5px 12px;
	font-size: calc(13.5px * var(--a11y-text, 1));
	font-weight: 500;
	color: var(--text-2);
	background: var(--paper);
	border-radius: 999px;
}

.tags a:hover {
	color: var(--signal-text);
}

.share-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.wa-share,
.copy-wide {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font: inherit;
	font-size: calc(15px * var(--a11y-text, 1));
	font-weight: 700;
	border-radius: 999px;
	cursor: pointer;
}

.wa-share {
	color: var(--on-invert);
	background: var(--invert);
	border: 0;
}

.wa-share:hover {
	color: var(--on-signal);
	background: var(--signal);
}

.copy-wide {
	color: var(--text);
	background: transparent;
	border: 1px solid var(--line-2);
}

.copy-wide:hover,
.copy-wide.is-done {
	color: var(--signal-text);
	border-color: var(--signal-text);
}

.wa-share .icon,
.copy-wide .icon {
	width: 18px;
	height: 18px;
}

/* the side column of an article */
.article-aside {
	min-width: 0;
}

.aside-inner {
	position: sticky;
	top: 88px;
}

.admin-bar .aside-inner {
	top: 120px;
}

/* On a short screen the list would not fit while stuck, so it scrolls with the page (editors
   need more room, for the admin bar). */
@media (max-height: 940px) {
	.aside-inner {
		position: static;
	}
}

@media (max-height: 980px) {
	.admin-bar .aside-inner {
		position: static;
	}
}

.related {
	margin-top: 64px;
}

/* plain pages (contact, corrections...) */
.page-article {
	max-width: 780px;
	margin-inline: auto;
	padding-top: 40px;
}

/* ==========================================================================
   Lists: sections, search, archives
   ========================================================================== */
.list-head {
	margin-bottom: 30px;
	padding-block: 34px 20px;
	border-bottom: 1px solid var(--line);
}

.list-head .kicker {
	font-size: calc(14px * var(--a11y-text, 1));
	font-weight: 700;
	color: var(--signal-text);
}

.list-title {
	margin-top: 6px;
	padding-inline-start: 16px;
	font-family: var(--font-display);
	font-size: calc(clamp(46px, 6.5vw, 76px) * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 0.98;
	border-inline-start: 6px solid var(--signal);
}

.list-desc {
	max-width: 70ch;
	margin-top: 12px;
	color: var(--text-2);
}

.list-lead {
	margin-bottom: 36px;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--line);
}

.list-lead .story-link {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 34px;
	align-items: center;
}

.list-lead .media {
	aspect-ratio: 16 / 9;
}

/* The section's name is the page's one Karantina line, so its lead story is set in the text face. */
.list-lead .lead-title {
	font-family: var(--font-text);
	font-size: calc(clamp(26px, 2.6vw, 34px) * var(--a11y-text, 1));
	line-height: 1.25;
}

.pagination {
	margin-top: 48px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	font-family: var(--font-data);
	font-size: calc(14px * var(--a11y-text, 1));
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: 999px;
}

.page-numbers.current {
	color: var(--on-invert);
	background: var(--invert);
	border-color: var(--invert);
}

.page-numbers.dots {
	background: none;
	border: 0;
}

.empty {
	max-width: 560px;
	padding-block: 24px;
}

.empty p {
	margin-bottom: 16px;
	font-size: calc(18px * var(--a11y-text, 1));
	color: var(--text-2);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.search-form {
	display: flex;
	gap: 8px;
}

.search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-width: 0;
	padding: 11px 12px;
	font: inherit;
	font-size: calc(16px * var(--a11y-text, 1));
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
}

/* Placeholders at the grey of small text: 4.5:1 and up in both modes (browsers default to less). */
.search-field::placeholder,
.comment-form input::placeholder,
.comment-form textarea::placeholder {
	color: var(--text-3);
	opacity: 1;
}

/* Fields get a ring flush with their border; the submit button keeps the global offset ring. */
.search-field:focus,
.comment-form input:not([type="submit"]):focus,
.comment-form textarea:focus {
	border-color: var(--focus);
	outline: 2px solid var(--focus);
	outline-offset: 0;
}

.search-submit,
.form-submit .submit {
	flex: none;
	padding: 11px 22px;
	font: inherit;
	font-size: calc(15px * var(--a11y-text, 1));
	font-weight: 700;
	color: var(--on-signal);
	background: var(--signal);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.search-submit:hover,
.form-submit .submit:hover {
	background: var(--signal-hover);
}

/* ==========================================================================
   Comments
   ========================================================================== */
.comments {
	max-width: 760px;
	margin-top: 64px;
}

.comments-title,
.comment-reply-title {
	padding-inline-start: 12px;
	font-family: var(--font-text);
	font-size: calc(23px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1.2;
	border-inline-start: 5px solid var(--signal);
}

.comment-reply-title small {
	margin-inline-start: 12px;
	font-size: calc(14px * var(--a11y-text, 1));
	font-weight: 400;
}

.comment-list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin: 0;
	padding-inline-start: 28px;
	list-style: none;
	border-inline-start: 2px solid var(--line);
}

.comment-body {
	padding-block: 16px;
	border-bottom: 1px solid var(--line);
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
}

.comment-author .avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.comment-author .says {
	display: none;
}

.comment-metadata {
	font-family: var(--font-data);
	font-size: calc(12.5px * var(--a11y-text, 1));
	color: var(--text-3);
}

.comment-content {
	margin-top: 8px;
	padding-inline-start: 50px;
}

.comment-content p + p {
	margin-top: 0.7em;
}

.reply {
	margin-top: 6px;
	padding-inline-start: 50px;
	font-size: calc(14px * var(--a11y-text, 1));
}

.reply a {
	font-weight: 700;
	color: var(--signal-text);
}

.comment-respond {
	margin-top: 34px;
}

.comment-form {
	display: grid;
	gap: 14px;
	margin-top: 14px;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: calc(14px * var(--a11y-text, 1));
	font-weight: 700;
}

.comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: calc(14px * var(--a11y-text, 1));
}

.comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

.comment-notes,
.logged-in-as {
	font-size: calc(14px * var(--a11y-text, 1));
	color: var(--text-3);
}

.comment-notes a {
	color: var(--signal-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "דיווח על התגובה": quiet, under the comment, never mistaken for part of what the reader wrote. */
.comment-report {
	margin-top: 6px;
	font-size: calc(13px * var(--a11y-text, 1));
}

.comment-content .comment-report a {
	color: var(--text-3);
	text-decoration-thickness: 1px;
}

.comment-content .comment-report a:hover {
	color: var(--signal-text);
}

/* ==========================================================================
   Footer: ink in both modes
   ========================================================================== */
.site-footer {
	--wm-text: #FFFFFF;
	--wm-aleph: #FFFFFF;
	--wm-mast: #FF5A1F;
	margin-top: 84px;
	padding-block: 52px 26px;
	color: #C9CEE8;
	background: var(--footer-bg);
}

.foot-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 36px;
}

.site-footer .wordmark {
	height: 46px;
}

.foot-tag {
	margin-top: 18px;
	font-family: var(--font-display);
	font-size: calc(38px * var(--a11y-text, 1));
	font-weight: 700;
	line-height: 1;
	color: #FFFFFF;
}

/* A short page (contact, search, a small section) can show its Karantina title and the footer on
   one screen, so there the slogan is set in the text face. */
body:not(.home):not(.single) .foot-tag {
	font-family: var(--font-text);
	font-size: calc(24px * var(--a11y-text, 1));
	line-height: 1.25;
}

.foot-h {
	margin-bottom: 12px;
	font-family: var(--font-text);
	font-size: calc(13px * var(--a11y-text, 1));
	font-weight: 700;
	color: var(--board-dim);
}

.foot-links {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.foot-links a {
	color: #E6E9FF;
}

.foot-links a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.foot-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 38px;
	padding-top: 16px;
	font-size: calc(13px * var(--a11y-text, 1));
	color: var(--board-dim);
	border-top: 1px solid var(--board-line);
}

/* The legal pages: small, but every target at least 24px tall (WCAG 2.5.8). */
.foot-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.foot-legal a,
.foot-consent {
	display: inline-block;
	padding-block: 4px;
	color: #C9CEE8;
}

.foot-consent {
	padding-inline: 0;
	font: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.foot-legal a:hover,
.foot-consent:hover {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* While the cookie notice shows, the footer grows by its height, so the last links can scroll
   above it. */
.site-footer {
	padding-bottom: calc(26px + var(--consent-room, 0px));
}

html {
	scroll-padding-bottom: var(--consent-room, 0px);
}

/* ==========================================================================
   Cookie notice: a card at the bottom corner, in the page's own colours
   ========================================================================== */
.consent {
	position: fixed;
	inset-inline-start: 16px;
	bottom: 16px;
	z-index: 60;
	width: min(440px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	overflow-y: auto;
	padding: 18px 20px 20px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	box-shadow: var(--card-shadow);
}

.consent[hidden] {
	display: none;
}

.consent-title {
	font-size: calc(16px * var(--a11y-text, 1));
	font-weight: 700;
}

.consent-text {
	margin-top: 6px;
	font-size: calc(14.5px * var(--a11y-text, 1));
	line-height: 1.6;
	color: var(--text-2);
}

.consent-text a {
	color: var(--signal-text);
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Agreeing and refusing look the same, so neither is the easy way out. */
.consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.consent-btn {
	min-height: 44px;
	padding: 0 22px;
	font: inherit;
	font-size: calc(15px * var(--a11y-text, 1));
	font-weight: 700;
	color: var(--on-signal);
	background: var(--signal);
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
}

.consent-btn:hover {
	background: var(--signal-hover);
}

@media (max-width: 640px) {
	.consent {
		inset-inline: 12px;
		bottom: 12px;
		width: auto;
		max-height: calc(100% - 24px);
		padding: 16px 16px 18px;
	}

	.consent-btn {
		flex: 1 1 auto;
	}
}

/* A short window (a laptop at 200% zoom, a phone on its side): the notice joins the page, at the
   top, instead of covering most of the screen. site.js then makes no room for it. */
@media (max-height: 480px) {
	.consent {
		position: static;
		width: auto;
		max-height: none;
		margin: 12px 16px;
	}
}

@media print {
	.consent,
	.progress {
		display: none !important;
	}

	.site-footer {
		padding-bottom: 26px;
	}
}

/* The narrowest phones: with the WhatsApp link set, its label hides (it stays in the link for screen
   readers) so the tools fit beside the logo. */
@media (max-width: 359px) {
	.wa-btn {
		gap: 0;
		padding: 7px 9px;
	}

	.wa-btn .wa-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.top-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.article-wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.article-aside {
		display: none;
	}

	.article-head,
	.article-body,
	.hero,
	.comments {
		margin-inline: auto;
	}
}

@media (max-width: 1024px) {
	.cards,
	.cards-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.section-pair {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.section-pair .section + .section {
		margin-top: 56px;
	}

	.foot-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.foot-brand {
		grid-column: 1 / -1;
	}
}

/* Narrow screens: one slim pinned row with the logo and the tools. The sections get a row of
   their own under it (header.php prints it), which scrolls away with the page. */
@media (max-width: 1000px) {
	.head-row {
		gap: 6px;
		min-height: 56px;
	}

	.brand {
		margin-inline-end: auto;
	}

	.site-header .wordmark {
		height: 30px;
	}

	.site-header .main-nav {
		display: none;
	}

	.nav-row {
		display: block;
		background: var(--header-bg);
		border-bottom: 1px solid var(--line);
	}

	.nav-row .nav-list {
		gap: 20px;
	}

	.nav-row .nav-list a {
		padding: 7px 0 9px;
		font-size: calc(15px * var(--a11y-text, 1));
	}
}

@media (max-width: 860px) {
	.wrap {
		padding-inline: 20px;
	}

	.list-lead .story-link {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.share-mini {
		width: 100%;
		margin-inline-start: 0;
	}
}

@media (max-width: 782px) {
	.admin-bar .site-header,
	.admin-bar .progress {
		top: 46px;
	}

	.admin-bar .skip-link:focus {
		top: 54px;
	}
}

@media (max-width: 640px) {
	.wrap {
		padding-inline: 16px;
	}

	.tune {
		height: 128px;
	}

	.mast-row {
		bottom: 8px;
		font-size: calc(12px * var(--a11y-text, 1));
	}

	.tune-label {
		display: none;
	}

	.wa-btn {
		padding: 7px 12px;
	}

	.top-grid {
		gap: 24px;
		padding-top: 16px;
	}

	.lead .story-card {
		margin-top: -40px;
		margin-inline: 10px;
		padding: 16px 16px 14px;
	}

	.lead-title {
		font-size: calc(36px * var(--a11y-text, 1));
	}

	.lead .story-dek {
		font-size: calc(16px * var(--a11y-text, 1));
	}

	.home-cards {
		margin-top: 24px;
	}

	/* On a phone the flash list keeps five headlines, so the stories come sooner. */
	.top-grid .latest-list li:nth-child(n+6) {
		display: none;
	}

	/* A list on phones: the picture beside the headline. */
	.cards,
	.cards-3,
	.cards-2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.cards .story-link {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 120px;
		gap: 14px;
		padding-block: 14px;
		border-bottom: 1px solid var(--line);
	}

	.cards .media {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		aspect-ratio: 4 / 3;
	}

	.cards .media .chip {
		display: none;
	}

	.cards .story-kicker {
		display: block;
	}

	.cards .story-text {
		grid-column: 1;
		grid-row: 1;
		align-content: start;
	}

	.cards .story-title {
		font-size: calc(16.5px * var(--a11y-text, 1));
	}

	.sec-title {
		font-size: calc(21px * var(--a11y-text, 1));
	}

	.board {
		margin-inline: -16px;
		padding-inline: 16px;
		border-radius: 0;
	}

	.board-title,
	.band-title {
		font-size: calc(22px * var(--a11y-text, 1));
	}

	.entry-title {
		padding-inline-start: 14px;
		font-size: calc(40px * var(--a11y-text, 1));
	}

	.dek {
		font-size: calc(18.5px * var(--a11y-text, 1));
	}

	.entry-content {
		font-size: calc(18px * var(--a11y-text, 1));
	}

	.entry-content > p:first-child {
		font-size: calc(19px * var(--a11y-text, 1));
	}

	.stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.comment-content,
	.reply {
		padding-inline-start: 0;
	}

	.foot-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* WordPress lets its admin bar scroll away at this width. */
@media (max-width: 600px) {
	.admin-bar .site-header,
	.admin-bar .progress {
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.latest-title::before {
		animation: none;
	}

	.media img,
	.brand {
		transition: none;
	}
}