/* ==========================================================================
   Front page
   ========================================================================== */

.home .site-main { padding-block: 0; }

/* --- Hero -----------------------------------------------------------------
   Full-bleed photograph, type set hard against the reading edge rather than
   centred. Both reference sites run their display type very large and let it
   sit off-axis; centred hero copy is what makes a page look templated.
   ------------------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(84vh, 760px);

	/* Top: just enough to clear the floating header, not a full band of empty
	   sky. Bottom: the torn edge is painted over the foot of the hero, so its
	   own height has to be added to the padding or it eats into it - which is
	   what left the region buttons sitting a few pixels above the tear. The
	   first term is the edge, the second is the space the buttons need. */
	padding-block:
		clamp(6rem, 11vh, 8.5rem)
		calc(clamp(28px, 3.4vw, 52px) + clamp(var(--sp-8), 5vh, var(--sp-12)));
	background: var(--c-brand);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* Stacked above the section background, below the copy. z-index:-1 put it
   behind the navy fill, which hid the photograph entirely. */
.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The file is already cropped to the foot of the photograph; cover would
	   then take its own slice out of the middle and cut the same people off at
	   the ankles. Anchor it to the bottom so the ground is what survives. */
	object-position: center bottom;
	/* A slow drift keeps a still photograph from feeling like a placeholder. */
	animation: hero-drift 24s ease-in-out infinite alternate;
}

/* The drift used to run 1.06 -> 1.14, which renders the photograph up to 14%
   larger than the file and softens it before any screen density is taken into
   account. 1.00 -> 1.05 keeps the movement and asks far less of the pixels. */
@keyframes hero-drift {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.05) translate3d(1.2%, -1.2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__img { animation: none; transform: none; }
}

/* Weighted to the corner the type sits in, which is the top of the reading
   edge. It used to be weighted to the foot of the photograph - 88% navy along
   the bottom - which was tuned for a hero whose subject was down there, and
   which turned a sunrise into a grey-blue wash: the warm half of the picture
   was the half being covered up.

   Physical directions on purpose. The site is Hebrew throughout, the headline
   is on the right, and a gradient that mirrored itself would put the dark end
   where there is nothing to read. */
.hero--image .hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		/* Behind the headline. */
		linear-gradient(to bottom left, rgb(8 50 88 / 74%) 0%, rgb(8 50 88 / 34%) 42%, rgb(8 50 88 / 0%) 72%),
		/* And enough everywhere else that any photograph keeps some contrast,
		   with a little more at the foot to meet the torn edge. */
		linear-gradient(to top, rgb(8 50 88 / 46%) 0%, rgb(8 50 88 / 14%) 55%, rgb(8 50 88 / 8%) 100%);
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: min(100% - 2 * var(--gutter), var(--wrap));
	display: flex;
	flex-direction: column;
	gap: clamp(var(--sp-8), 5vh, var(--sp-16));
}

.hero__copy { max-width: min(100%, 46rem); }

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-5);
	color: var(--c-logo-yellow);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: none;
}

.hero__rule {
	display: block;
	width: 46px;
	height: 2px;
	background: var(--c-logo-yellow);
}

.hero__title {
	margin: 0 0 var(--sp-6);
	font-family: var(--font-display);
	/* Deliberately larger than a conventional hero: the references run 70-90px
	   and the page reads as branded rather than generic because of it. */
	font-size: clamp(2.25rem, 1.2rem + 4.5vw, 4.75rem);
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: balance;
	max-width: 20ch;
}

.hero__text {
	max-width: 46ch;
	color: rgb(255 255 255 / 86%);
	font-size: clamp(var(--fs-base), 0.95rem + 0.3vw, var(--fs-lg));
	line-height: 1.65;
}

.hero__text p:last-child { margin-block-end: 0; }

/* --- Hero call to action --------------------------------------------------- */

.hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	margin-block-start: var(--sp-8);
	padding: var(--sp-4) var(--sp-8);
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--c-brand);
	font-size: var(--fs-lg);
	font-weight: 800;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}

.hero__cta:hover {
	background: var(--c-logo-teal);
	color: #fff;
	gap: var(--sp-5);
}

.hero__cta-arrow { font-size: 0.9em; }

/* --- Region shortcuts along the bottom of the hero ------------------------- */

.hero__regions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__regions a {
	display: inline-block;
	padding: var(--sp-2) var(--sp-5);
	border: 1px solid rgb(255 255 255 / 45%);
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	backdrop-filter: blur(6px);
	transition: background 0.18s ease, border-color 0.18s ease;
}

.hero__regions a:hover {
	background: #fff;
	border-color: #fff;
	color: var(--c-brand);
}

/* Scroll cue.
   Centred, it sat a few pixels from the region pills and read as part of
   them. It now sits in the far corner of the hero, on the outer edge of the
   same rail the header and the copy use, with clear sky around it. */
.hero__scroll {
	position: absolute;
	z-index: 3;
	inset-block-end: clamp(64px, 7vw, 92px);
	inset-inline-end: max(var(--gutter), (100% - var(--wrap)) / 2);
	width: 26px;
	height: 42px;
	border: 2px solid rgb(255 255 255 / 75%);
	border-radius: var(--radius-pill);
	background: rgb(8 50 88 / 18%);
	backdrop-filter: blur(2px);
	overflow: hidden;
}

/* A bead that falls, rests, and repeats - the shape reads as a mouse, so
   the gesture is legible without a caption. */
.hero__scroll::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 7px;
	width: 4px;
	height: 8px;
	margin-inline-start: -2px;
	border-radius: var(--radius-pill);
	background: #fff;
	animation: hero-scroll 2s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

@keyframes hero-scroll {
	0%        { transform: translateY(0); opacity: 0; }
	18%       { opacity: 1; }
	62%, 100% { transform: translateY(15px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll::after { animation: none; opacity: 1; }
}

@media (max-width: 700px) {
	.hero { min-height: 78vh; }
	.hero__copy { max-width: none; }
	.hero__title { font-size: clamp(2.1rem, 1.08rem + 4.8vw, 3rem); max-width: none; }
	.hero__scroll { display: none; }
}

/* --- Region lobby ---------------------------------------------------------
   Click-to-expand, following traveloregon. The white panel begins at the foot
   of the photograph and continues below it; a closed card shows its title
   alone, an open one widens and the panel grows downward to carry the rest.
   One card is open at a time, the first by default.
   ------------------------------------------------------------------------- */

.home-lobby { padding-block: clamp(var(--sp-12), 6vw, 5rem); }

.home-section__head {
	margin-block-end: var(--sp-8);
	text-align: start;
}

.home-section__head::after {
	content: "";
	display: block;
	height: 2px;
	margin-block-start: var(--sp-4);
	background-image: linear-gradient(to right, var(--c-brand) 0 8px, transparent 8px 16px);
	background-size: 16px 2px;
	background-repeat: repeat-x;
	opacity: 0.3;
}

.region-grid {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.region-card {
	position: relative;
	/* How tall the panel is with the detail shut: the title's line box between
	   two bands of padding. The panel is pulled up by half of it to sit on the
	   foot of the photograph, and both halves of that sum are declared here so
	   the two cannot drift apart. */
	--tm-panel-pad-block: var(--sp-5);
	--tm-panel-inline: var(--sp-6);
	/* How far the panel is held off the photograph's left and right edges, so
	   the picture runs on past it rather than being capped by it. */
	--tm-panel-inset: var(--sp-8);
	/* A step under --fs-lg. Holding the panel off the photograph costs the
	   closed cards 24px of line, and at the larger size all three of them
	   wrapped - including two names that miss fitting by a handful of pixels.
	   A point smaller buys those two their single line back and leaves the one
	   genuinely long name to wrap, which is the honest split. */
	--tm-panel-title: 1.125rem;
	--tm-panel-shut: calc(var(--tm-panel-pad-block) * 2 + var(--tm-panel-title) * 1.25);
	flex: 1 1 0;
	min-width: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	transition: flex-grow 0.5s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.region-card:hover { transform: none; box-shadow: none; }

/* The open card takes the room; the rest give it up. */
.region-card.is-open { flex-grow: 2.1; }

/* --- Photograph ------------------------------------------------------------ */

.region-card__media {
	position: relative;
	/* Tall, like the reference - the photograph is the thing being chosen
	   between, and a short card makes four regions read as four buttons. */
	height: clamp(420px, 44vw, 620px);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--c-bg-alt);
}

.region-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.region-card.is-open .region-card__img { transform: scale(1.03); }

/* --- Panel -----------------------------------------------------------------
   Pulled up so it starts against the foot of the photograph, then free to
   run past it as the detail opens.
   ------------------------------------------------------------------------- */

.region-card__panel {
	position: relative;
	z-index: 2;
	/* Half on the photograph, half on the page. The shut panel's height is the
	   title's line box plus its padding, so half of it is a figure the CSS can
	   work out rather than a number tuned by eye that drifts the moment the
	   padding or the type size moves. Opening the card grows it downwards -
	   the top edge stays on the seam either way. */
	margin-block-start: calc(var(--tm-panel-shut) / -2);
	/* Anchored to the inline start - the right, in Hebrew - and capped, so the
	   open card's panel stays a label on the photograph rather than a bar
	   across it. The auto end margin is what keeps it pinned as the card grows.
	   A closed card is narrower than the cap and simply fills. */
	margin-inline: var(--tm-panel-inset) auto;
	width: min(calc(100% - var(--tm-panel-inset) * 2), 22rem);
	border-radius: var(--radius-md);
	background: var(--c-bg);
	box-shadow: 0 8px 28px rgb(8 50 88 / 16%);
	overflow: hidden;
}

.region-card__title {
	margin: 0;
	font-size: var(--tm-panel-title);
	font-weight: 800;
	line-height: 1.25;
	color: var(--c-brand);
}

.region-card__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	width: 100%;
	/* The block half is the figure the panel's own offset is derived from. */
	padding: var(--tm-panel-pad-block) var(--tm-panel-inline);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

/* The region name wraps rather than ellipsing. Holding the panel further off
   the photograph leaves the narrow closed cards less room than the longest
   name needs on one line, and "תל אביב והמרכ…" is a worse answer than two
   lines - the name is the whole of what a closed card says. The panel's top
   offset is figured from a single line either way, so a card whose name wraps
   grows downwards and all four tops stay level on the seam. */
.region-card__toggle > span:first-child {
	min-width: 0;
	text-wrap: balance;
}

.region-card__toggle:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: -3px;
}

.region-card__chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	/* Physical sides, not logical. border-inline-end is the LEFT border in
	   Hebrew, which turned this into a left-right arrow: it pointed one way
	   shut and the other way open, and in a right-to-left page one of those is
	   always backwards. Down when shut and up when open is what a section that
	   expands has always meant, and it reads the same in every language. */
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.32s ease;
	opacity: 0.6;
}

.region-card.is-open .region-card__chevron { transform: rotate(-135deg); }

/* The stacked list arrives with every card shut, and that is a starting state
   rather than something to watch happen. The script wears this for the one
   reflow it takes to commit it. */
.region-grid--no-anim .region-card,
.region-grid--no-anim .region-card__media,
.region-grid--no-anim .region-card__detail,
.region-grid--no-anim .region-card__img,
.region-grid--no-anim .region-card__chevron {
	transition: none !important;
}

/* Collapsible without a fixed height: grid rows animate where auto cannot. */
.region-card__detail {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.region-card.is-open .region-card__detail { grid-template-rows: 1fr; }

.region-card__detail-inner {
	min-height: 0;
	overflow: hidden;
}

.region-card__detail-inner > * {
	margin: 0;
	/* Flush with the title above, which is the line they read as belonging to. */
	padding-inline: var(--tm-panel-inline);
}

.region-card__detail-inner > *:last-child { padding-block-end: var(--tm-panel-inline); }

.region-card__dates {
	color: var(--c-logo-orange);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.region-card__tagline {
	padding-block-start: var(--sp-2);
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.region-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding-block-start: var(--sp-3);
	color: var(--c-brand);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-decoration: none;
}

.region-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The whole open card as one hit area.
   A child of the card and not of the panel: the panel clips to its own
   rounded corners, and an overlay drawn inside it could never reach the
   photograph. z-index 3 to clear the panel's 2, which is pulled up over the
   foot of the photograph. Only while the card is open - closed, the click
   belongs to the accordion, and this would swallow it. */
.region-card__stretch {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--radius-lg);
}

.region-card.is-open .region-card__stretch { display: block; }

/* The card is a link now, so it has to answer the pointer like one. The
   underline is on the line that says where it goes, which is the part of the
   card that reads as the link. */
.region-card.is-open:hover .region-card__link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.region-card.is-open .region-card__stretch:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

/* Stacked, but still an accordion. The reference keeps the same behaviour on
   a phone - one card open, the rest showing their title alone - and opening
   all four would mean scrolling past four descriptions to reach the fourth
   photograph. */
@media (max-width: 860px) {
	.region-grid {
		display: flex;
		flex-direction: column;
		gap: var(--sp-8);
	}

	.region-card,
	.region-card.is-open {
		flex: 0 0 auto;
		width: 100%;
	}

	/* Closed cards keep a shorter photograph so more of the list is reachable
	   without scrolling; the open one earns its height. Shorter than the
	   desktop card by a long way - on a phone the list is scrolled, and four
	   tall photographs is four screens before the fourth region is seen. */
	.region-card__media { height: 180px; transition: height 0.45s cubic-bezier(0.22, 0.7, 0.25, 1); }
	.region-card.is-open .region-card__media { height: 240px; }

	.region-card__panel {
		/* The same half-on-half-off seam as the row, held off the photograph's
		   edges so the picture runs on either side of it. */
		margin-inline: var(--tm-panel-inset);
		width: auto;
	}

	/* Room around the words once the card is open. The title takes the same
	   inset as the detail under it, or the dates start a few pixels off the
	   region name they belong to and the panel reads as two blocks that were
	   set separately. The cap is what stops a two-line tagline running the
	   full width on a large phone and reading as a paragraph of body copy
	   rather than a note under a title. */
	.region-card {
		--tm-panel-pad-block: var(--sp-6);
		--tm-panel-inline: var(--sp-7);
		--tm-panel-inset: var(--sp-7);
		/* A stacked panel is the full width of the phone, so it has room for
		   the larger size the row cannot afford. */
		--tm-panel-title: var(--fs-lg);
	}

	.region-card__detail-inner > * { max-width: 38ch; }

	.region-card__detail-inner > *:first-child { padding-block-start: var(--sp-2); }
	.region-card__detail-inner > *:last-child { padding-block-end: var(--sp-7); }

	.region-card__chevron { display: block; }
	.region-card__toggle { cursor: pointer; }
}

/* --- Free-form body and closing note -------------------------------------- */

.home-body { padding-block: 0 clamp(var(--sp-8), 4vw, 3rem); }

.home-body__inner {
	max-width: 70ch;
	margin-inline: auto;
}

/* The last fold. It is what climbs, so it needs a solid ground of its own -
   see .home-rows below, which is what it climbs over. */
.home-closing {
	padding-block: clamp(var(--sp-12), 6vw, 4.5rem);
	background: var(--c-bg-alt);
	border-block-start: 1px solid var(--c-line);
}

.home-closing__inner {
	max-width: 70ch;
	margin-inline: auto;
	text-align: center;
}

.home-closing__title {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 900;
	color: var(--c-brand);
}

.home-closing__text {
	color: var(--c-ink-soft);
	line-height: 1.7;
}

.home-closing__text p:last-child { margin-block-end: 0; }

/* --- Tour rows -----------------------------------------------------------
   One horizontally scrolling row per region. The cards are the same ones the
   catalogue uses; only the track around them changes.
   ------------------------------------------------------------------------- */

.home-rows {
	padding-block: 0 clamp(var(--sp-12), 6vw, 5rem);
}

.home-section__head--start { text-align: start; }

/* The heading and the arrows share the top line; the track spans beneath both.
   A grid rather than absolute positioning: the heading is revealed on scroll
   with a transform, and a transformed element becomes the containing block for
   anything positioned inside the row - which put the arrows wherever the
   reveal happened to leave the heading. */
.tour-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	row-gap: var(--sp-4);
}

.tour-row + .tour-row {
	margin-block-start: var(--sp-12);
}

.tour-row__head {
	display: flex;
	align-items: baseline;
	gap: var(--sp-4);
}

.tour-row__title {
	margin: 0;
	font-size: clamp(1.25rem, 0.9rem + 1.5vw, 1.625rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-brand);
}

.tour-row__title a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: inherit;
	text-decoration: none;
}

.tour-row__title a:hover { text-decoration: underline; text-underline-offset: 4px; }

.tour-row__arrow {
	font-size: 0.85em;
	transition: transform 0.18s ease;
}

/* The glyph points along the reading direction, so it moves that way too. */
.tour-row__title a:hover .tour-row__arrow { transform: translateX(-3px); }

.tour-row__nav {
	display: flex;
	gap: var(--sp-2);
	flex: 0 0 auto;
}

.tour-row__btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: var(--c-bg);
	color: var(--c-brand);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.tour-row__btn:hover:not(:disabled) {
	background: var(--c-bg-alt);
	border-color: var(--c-brand);
}

.tour-row__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* The track. Overrides the catalogue grid for this context only.

   A line holds a whole number of cards and the arrows move a whole line at a
   time, so no card is ever half-shown. The overflow is hidden rather than
   scrollable on the desktop: with the arrows doing the work, a free-scrolling
   track only produces the cut-off card it is meant to avoid. Touch keeps its
   swipe, where a peeking card is the affordance rather than a mistake. */
.woocommerce ul.products.tour-row__track,
.woocommerce-page ul.products.tour-row__track,
ul.products.tour-row__track {
	--cards: 5;

	display: flex;
	grid-template-columns: none;
	gap: var(--sp-6);

	/* The full width of the row, under both the heading and the arrows. */
	grid-column: 1 / -1;

	/* A track needs to stay scrollable for the arrows to page it, and
	   overflow-x: hidden forces overflow-y to compute to auto - so the box
	   clips whatever leaves it vertically: the hover lift, its shadow, and any
	   card taller than the line. The padding gives all of that room inside the
	   scroll box; the negative margin hands the space back to the layout, so
	   the row occupies exactly what it did before. */
	padding-block: var(--sp-3) var(--sp-8);
	margin-block: calc(var(--sp-3) * -1) calc(var(--sp-8) * -1);
	margin-inline: 0;
	padding-inline: 0;
	overflow-x: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

ul.products.tour-row__track::-webkit-scrollbar { display: none; }

.woocommerce ul.products.tour-row__track > li,
.woocommerce-page ul.products.tour-row__track > li,
ul.products.tour-row__track > li {
	flex: 0 0 calc((100% - (var(--cards) - 1) * var(--sp-6)) / var(--cards));
	width: calc((100% - (var(--cards) - 1) * var(--sp-6)) / var(--cards));
	margin: 0;
}

/* Card count by width. Each step down keeps a card in the 300-420px band -
   narrow enough to fit five across a wide screen, wide enough that the title,
   the date pills and the price foot still sit comfortably. */
@media (max-width: 1699px) {
	ul.products.tour-row__track { --cards: 4; }
}

@media (max-width: 1399px) {
	ul.products.tour-row__track { --cards: 3; }
}

@media (max-width: 1079px) {
	ul.products.tour-row__track { --cards: 2; }
}

@media (max-width: 700px) {
	/* The arrows belong under the line they move, not above it - above, they
	   read as steering whatever comes next. One column, and the nav ordered
	   last so it takes a third row below the track, at the trailing edge. */
	.tour-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.tour-row__nav {
		order: 1;
		justify-self: end;
		margin-block-start: var(--sp-2);
	}

	.tour-row__btn {
		width: 36px;
		height: 36px;
		border: 0;
		background: var(--c-panel);
		color: var(--c-brand);
		font-size: 1.05rem;
	}

	.tour-row__btn:hover:not(:disabled) {
		background: var(--c-brand);
		color: #fff;
	}

	.tour-row__btn:disabled { opacity: 0.35; }

	.tour-row__head {
		flex-wrap: wrap;
		align-items: center;
	}

	.tour-row + .tour-row { margin-block-start: var(--sp-16); }

	/* Touch: a swipeable track that bleeds to the screen edge, where the
	   half-visible card is the thing that says "swipe me". */
	.woocommerce ul.products.tour-row__track,
	ul.products.tour-row__track {
		overflow-x: auto;
		scroll-snap-type: x proximity;
		/* No -webkit-overflow-scrolling: it is a no-op on any iOS this site will
		   meet - momentum has been the default since iOS 13 - and the old flag
		   puts the track on a scrolling layer of its own that keeps hold of a
		   touch meant for the page. */
		gap: var(--sp-4);
		margin-inline: calc(var(--sp-4) * -1);
		padding-inline: var(--sp-4);
	}

	.woocommerce ul.products.tour-row__track > li,
	ul.products.tour-row__track > li {
		flex-basis: 78vw;
		width: 78vw;
		scroll-snap-align: start;
	}
}

/* "all N tours" sits with the row heading, so a row reads as a sample of a
   larger set rather than as the whole thing. */
/* A button rather than grey text beside the heading.

   The row is a sample - eight of a region's tours - and the way to the rest is
   this link and a card at the far end of the rail. The card is four or five
   swipes away on a phone, so in practice this is the one that gets used, and
   it was set in the same grey as the region it sat next to: visible, but not
   obviously a thing you could press. */
.tour-row__all {
	display: inline-block;
	margin-inline-start: var(--sp-3);
	padding: 0.3em 0.9em;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	background: var(--c-bg);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--c-brand);
	white-space: nowrap;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.tour-row__title a:hover .tour-row__all,
.tour-row__title a:focus-visible .tour-row__all {
	background: var(--c-brand);
	border-color: var(--c-brand);
	color: #fff;
}

/* --- Row chrome ----------------------------------------------------------- */

.tour-row__index {
	display: block;
	margin-block-end: var(--sp-1);
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}

/* --- Hero: sticker edge and staged entrance -------------------------------
   The campaign logo is a sticker - photo-filled letters inside a wavy white
   outline. Nothing else on the page echoed that, so the hero ends on the same
   curve rather than a straight cut.
   ------------------------------------------------------------------------- */

.hero::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline: 0;
	z-index: 2;
	height: clamp(28px, 3.4vw, 52px);
	background: var(--c-ground);
	-webkit-mask-image: url("../img/torn-edge.svg");
	mask-image: url("../img/torn-edge.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* --- Scroll-cue: vertical side rail --------------------------------------- */

.scroll-cue {
	position: absolute;
	/* Left side of the viewport, outside the wrap.
	   In RTL inline-end = visual left. 20px gives the text breathing room from
	   the viewport edge; the SVG's inner run at x=40 then sits at viewport
	   60px, a few px past the wrap's own gutter - close enough to read as a
	   border element rather than a floating object. */
	inset-inline-end: 20px;
	top: 20%;
	bottom: 20%;
	/* A fixed rail, not a flex box sized by its own text: the text has to be
	   placed against a coordinate in the SVG, and it cannot be if the box it
	   sits in moves with the length of the word. */
	width: 50px;
	pointer-events: none;
	z-index: 5;
}

/* The wavy SVG line stretches the full height of the container.
   The path starts at the outer edge (x=6), curves inward (x=40)
   where the text sits, then curves back out (x=6). */
.scroll-cue__line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.scroll-cue__track {
	stroke: rgb(8 50 88 / 28%);
	stroke-width: 2.4;
	stroke-linecap: round;
	fill: none;
}

.scroll-cue__run {
	stroke: var(--c-logo-teal);
	stroke-width: 2.4;
	stroke-linecap: round;
	fill: none;
	stroke-dasharray: 0.14 0.86;
	stroke-dashoffset: 0;
	animation: scroll-cue-run 5s linear infinite;
}

@keyframes scroll-cue-run {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}

/* The word sits in the bay the line's detour opens, not on the line.
   The viewBox is 50 units across in a 50px box, so the bay runs from the
   outer axis at x=6 to the inboard run at x=40, and centring the word on 22
   leaves it clear of both - `left` is physical, unaffected by the RTL
   document, which is what makes it land. No background: the line does not
   pass behind the word here, so there is nothing to cut out of it.

   22 and not further: the inboard run lands 4px from the photo's edge, so
   the rail cannot move right, and the word's own right edge has to keep a
   few px off that run. The rotation reverses the reading direction to
   bottom-up; it turns about the element's own centre, so the placement
   above is unaffected. */
.scroll-cue__text {
	position: absolute;
	top: 50%;
	left: 22px;
	transform: translate(-50%, -50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--c-brand);
	/* A faint halo behind the word so it holds over any background that
	   bleeds under the wrap gutter - without it the navy text can disappear
	   against the dark portion of the photograph. */
	text-shadow: 0 0 8px rgb(245 244 240 / 80%);
}


/* Both states are entirely clickable, so both should say so - a closed card
   opens, an open one goes to its category. The scrim and the push on the
   photograph stay on the closed ones: an open card already has the room and
   the detail, and darkening it would read as a hover on something inert. */
@media (min-width: 861px) {
	.region-card { cursor: pointer; }

	.region-card:not(.is-open) .region-card__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgb(8 50 88 / 12%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.region-card:not(.is-open):hover .region-card__media::after { opacity: 1; }

	.region-card:not(.is-open):hover .region-card__img { transform: scale(1.04); }
}


/* Every section now runs on the one site measure, so the lobby needs no width
   of its own. What it does need is a limit on the intro line: the rail is
   1680px and a paragraph set that wide is unreadable, while the heading and
   its dotted rule are meant to span the full rail. */
.home-section__intro {
	max-width: 62ch;
}
/* --- The booking engine ----------------------------------------------------
   One bar across the foot of the hero, the way Tours Chanteclerc does it: the
   two questions side by side, each labelled above its own control, and the
   button closing the line. A solid white ground so the controls stay readable
   over the photograph.

   Fields are divided by a hairline rather than spaced apart, so the bar reads
   as one object. That is the difference between a search engine and three
   controls that happen to be near each other.
   ------------------------------------------------------------------------- */

.tour-search {
	display: flex;
	align-items: stretch;
	width: 100%;
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: 0 18px 44px rgb(8 50 88 / 26%);
	overflow: visible;
}

.tour-search__field {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	flex: 1 1 0;
	min-width: 0;
	padding: var(--sp-4) var(--sp-7);
	cursor: pointer;
	transition: background 0.18s ease;
}

.tour-search__field:first-of-type {
	border-start-start-radius: var(--radius-lg);
	border-end-start-radius: var(--radius-lg);
	padding-inline-start: var(--sp-8);
}

.tour-search__field + .tour-search__field {
	border-inline-start: 1px solid var(--c-line);
}

.tour-search__field:hover,
.tour-search__field:focus-within {
	background: var(--c-bg-alt);
}

.tour-search__label {
	color: var(--c-ink-soft);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tour-search__control {
	display: flex;
	align-items: center;
	gap: 0.55em;
	min-width: 0;
}

.tour-search__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	color: var(--c-logo-teal);
}

.tour-search__value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--c-brand);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tour-search__list {
	position: absolute;
	bottom: 100%;
	inset-inline: 0;
	z-index: 9999;
	margin: 0;
	padding: 0.5em 0;
	list-style: none;
	background: #fff;
	border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
	box-shadow: 0 -12px 32px rgb(8 50 88 / 18%);
	display: none;
	max-height: 320px;
	overflow-y: auto;
}

.tour-search__field.is-open .tour-search__list {
	display: block;
}

.tour-search__field:first-of-type .tour-search__list {
	border-end-start-radius: var(--radius-lg);
}

.tour-search__item {
	padding: 0.65em 2em;
	color: var(--c-ink);
	font-size: var(--fs-base);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s ease;
}

.tour-search__item:hover {
	background: var(--c-bg-alt);
}

.tour-search__item.is-active {
	color: var(--c-brand);
	font-weight: 700;
}

.tour-search__field.is-open {
	box-shadow: inset 0 0 0 2px var(--c-logo-teal);
}

/* --- The date field's calendar -------------------------------------------
   It opens upward out of the field like the region dropdown does, because the
   bar sits at the foot of the hero. Only the days that run are buttons; a day
   with no departure is drawn but dimmed, so the month keeps its shape. */
.tour-search__cal {
	position: absolute;
	/* Opens upward, like the region dropdown: the bar sits at the foot of the
	   hero. Measured at 1280x720, 1366x768, 1440x900, 1920x1080 and a 390x844
	   phone, there are 438-498px above the field for a 387px calendar, while
	   below it a laptop has 110-153px before the fold - downward cut the month
	   in half there. When the room above is short anyway - a window not
	   maximised, a page already scrolled - the script flips it with is-down. */
	bottom: 100%;
	/* A fixed, compact width - not the full field, which at this bar's size
	   would stretch each square day cell to ~100px into a panel too tall to
	   place at all. */
	inset-inline-start: 0;
	width: min(340px, 92vw);
	z-index: 9999;
	display: none;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: 0 18px 44px rgb(8 50 88 / 28%);
	padding: var(--sp-5) var(--sp-6);
}

.tour-search__field.is-open .tour-search__cal { display: block; }

/* Not enough room above at the moment it opens. It cannot simply drop below:
   the hero has overflow: hidden and paints its torn edge over its foot, and
   the hero parallax puts a transform on the hero's content, which would trap
   even a fixed panel inside that clip. So the script lifts the calendar out to
   the <body> and fixes it under the field, kept on screen; it docks back when
   it closes, and closes on scroll, since a fixed panel would otherwise slide
   off the field it belongs to. */
.tour-search__cal.is-floating {
	position: fixed;
	display: block;
	bottom: auto;
	z-index: 10000;
}

.tour-search__cal-title {
	text-align: center;
	font-weight: 800;
	color: var(--c-brand);
	margin-block-end: var(--sp-4);
}

.tour-search__cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	text-align: center;
}

.tour-search__cal-dow {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--c-ink-soft);
	padding-block-end: 4px;
}

.tour-search__cal-pad { visibility: hidden; }

.tour-search__cal-day {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	aspect-ratio: 1;
	border-radius: 8px;
	color: var(--c-ink);
	cursor: default;
	display: grid;
	place-items: center;
}

/* Only a day that actually runs is a button; the empty ones are spans. */
button.tour-search__cal-day {
	background: var(--c-bg-alt);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

button.tour-search__cal-day:hover { background: var(--c-logo-teal); color: #fff; }

.tour-search__cal-day.is-empty { color: #c3c8d0; }

.tour-search__cal-day.is-sel { background: var(--c-brand); color: #fff; }

/* The days between a range's two ends, empty ones included, so the range reads
   as one unbroken run across the month. */
.tour-search__cal-day.is-range {
	background: rgb(0 170 203 / 16%);
	color: var(--c-brand);
}

.tour-search__cal-hint {
	margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
	text-align: center;
	font-size: var(--fs-xs);
	color: var(--c-ink-soft);
}

/* Muted because the chosen region does not run that day. */
.tour-search__cal-day.is-out {
	background: transparent;
	color: #c3c8d0;
	cursor: default;
}

.tour-search__cal-all {
	appearance: none;
	margin-block-start: var(--sp-4);
	width: 100%;
	border: 1px dashed var(--c-line);
	background: #fff;
	border-radius: 8px;
	padding: 0.6em;
	font: inherit;
	font-weight: 600;
	color: var(--c-ink-soft);
	cursor: pointer;
}

.tour-search__cal-all:hover { background: var(--c-bg-alt); }

.tour-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding-inline: var(--sp-8);
	border: 0;
	border-start-end-radius: var(--radius-lg);
	border-end-end-radius: var(--radius-lg);
	background: var(--c-logo-yellow);
	color: var(--c-ink);
	font-family: inherit;
	font-size: var(--fs-lg);
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.tour-search__submit:hover { background: var(--c-logo-teal); color: #fff; }

.tour-search__submit:focus-visible {
	outline: 3px solid var(--c-logo-teal);
	outline-offset: -5px;
}

.tour-search__submit-text { white-space: nowrap; }

.tour-search__submit-icon {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;

	/* Flex centres the icon on the text's line box, but Hebrew letters have
	   almost no descenders, so the words sit low in that box and the arrow,
	   centred on it, read as riding above them. Dropped to the letters' own
	   middle instead - measured, not judged by eye: in Noto Sans Hebrew 800 at
	   20px the ink of "הצג תוצאות" centres 1px under the line box's middle, on
	   the desktop bar and the phone's alike. 0.12em overshot by 1.4px. */
	transform: translateY(0.05em);
}

/* On a phone the bar becomes a stack: three full-width rows, the hairline
   turning from a divider between columns into one between rows. A row of
   three controls at 375px is three controls nobody can read the value of. */
@media (max-width: 720px) {
	.tour-search { flex-direction: column; }

	.tour-search__field + .tour-search__field {
		border-inline-start: 0;
		border-block-start: 1px solid var(--c-line);
	}

	.tour-search__field:first-of-type {
		border-radius: 0;
		border-start-start-radius: var(--radius-lg);
		border-start-end-radius: var(--radius-lg);
	}

	.tour-search__submit {
		width: auto;
		aspect-ratio: auto;
		padding-block: var(--sp-4);
		border-block-start: 1px solid var(--c-line);
		border-radius: 0;
		border-end-start-radius: var(--radius-lg);
		border-end-end-radius: var(--radius-lg);
		background: var(--c-logo-yellow);
		color: var(--c-ink);
		font-family: inherit;
		font-size: var(--fs-lg);
		font-weight: 800;
	}

}

/* The scroll cue and the search bar both want the foot of the hero, and the
   cue was landing on top of it. The bar wins: it says there is more below and
   hands over a way of getting to it, which is everything the cue was saying
   and an answer besides. Scoped with :has so the cue survives on any hero
   that has no search in it. */
.hero:has(.tour-search) .hero__scroll { display: none; }

/* --- Where the bar sits in the photo hero ----------------------------------
   Not end to end. Stretched the full width of the page the two fields were
   five hundred pixels of white each, holding two words - the content never
   came close to filling the container, and a white band across the middle cut
   the photograph in half. The reference carries that width because it has
   three fields of long text on a very wide screen; taking the width without
   the density leaves a stripe.

   So it takes the measure of the copy above it instead. The eyebrow, the
   headline, the paragraph and the search now share one edge down the reading
   side, the photograph keeps the open half it was composed around, and each
   field is the width of the answer it holds. One column that says what the
   month is and then hands over the way in.
   ------------------------------------------------------------------------- */
.hero .tour-search {
	max-width: min(100%, 46rem);
	/* Room between the paragraph and the bar. They belong together and share an
	   edge, but they are not the same sentence - the copy says what the month
	   is, the bar is the thing you act on, and a beat between the two lets the
	   eye arrive at it rather than run into it. On top of the column's own gap
	   rather than instead of it. */
	margin-block-start: clamp(var(--sp-6), 3.5vh, var(--sp-12));
	box-shadow: 0 14px 34px rgb(8 50 88 / 24%);
}

/* And the whole block rides higher in the frame. Sitting low it crowded the
   torn edge while the sky above did nothing; lifted, the photograph keeps its
   horizon and the copy has ground under it. The first two terms are the hero's
   own footing - the tear, then the room it needs - and the third is the lift. */
.hero:has(.tour-search) {
	padding-block-end: calc(
		clamp(28px, 3.4vw, 52px)
		+ clamp(var(--sp-8), 5vh, var(--sp-12))
		+ clamp(var(--sp-8), 6vh, var(--sp-16))
	);
}

/* --- Coverage map ----------------------------------------------------------
   Where the campaign runs, between the lobby and the tour rows.

   A full-bleed navy band. The page above and below it is cream and white, so
   the one dark stretch is the one that reads as a statement rather than as
   more browsing - which is what this section is: the ministry's claim that
   the campaign covers the country, made once.

   The lists flank the drawing. Israel is two and a half times as tall as it is
   wide, so a map beside a single column leaves half the rail empty; with a
   column either side the band fills its width and the names sit near the dots
   they belong to.
   ------------------------------------------------------------------------- */

.home-map {
	/* Margin as well as padding: the band is full-bleed, so the cream page above
	   and below it is what separates it from the lobby and the rows. Without
	   that gap the navy runs straight out of the cards above and reads as their
	   footer rather than as a section of its own. */
	margin-block: clamp(var(--sp-12), 6vw, 5rem);
	padding-block: clamp(var(--sp-16), 7vw, 6.5rem);
	background: var(--c-brand);
	color: #fff;
}

/* The section furniture is drawn for a light ground; on navy it has to be
   restated rather than tinted, or the heading reads as disabled. */
.home-map .home-section__title { color: #fff; }
.home-map .home-section__intro { color: rgb(255 255 255 / 72%); }

.home-map .home-section__head {
	margin-block-end: clamp(2.4rem, 4.2vw, 4.8rem);
}

.home-map .home-section__head::after {
	background-image: linear-gradient(to right, #fff 0 8px, transparent 8px 16px);
	opacity: 0.35;
}

.home-map__board {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: clamp(var(--sp-6), 3vw, var(--sp-12));
	align-items: start;

	/* The wrap is wide, and chips running to its edges leave the band looking
	   like a full-width list on a coloured ground rather than a panel. */
	padding-inline: clamp(0rem, 2.5vw, var(--sp-12));
}

.home-map__col {
	display: grid;
	gap: clamp(4.3rem, 5.8vw, 6.5rem);
	min-width: 0;
}

.home-map__figure { justify-self: center; }

.home-map__svg {
	display: block;

	/* The drawing is most of a phone screen and is covered in link targets.
	   Without this a drag that starts on one of them is a drag on a link, and
	   the page underneath does not move - the section reads as a place where
	   scrolling stops working. */
	touch-action: pan-y;
	block-size: min(802px, 81vh);
	inline-size: auto;
	max-inline-size: 100%;
}

/* Pale land on the dark band, so the dots keep their own colours instead of
   having to glow against a dark ground. */
.home-map__land {
	fill: var(--c-panel);
	stroke: rgb(255 255 255 / 35%);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

/* The Kinneret and the Dead Sea, in the turquoise of a relief map's water -
   clearly water against the pale land, and lighter than the centre's blue dots
   so the two are never mistaken for each other. */
.home-map__water {
	fill: #6fbad3;
	stroke: #5aa8c3;
	stroke-width: 1;
	stroke-linejoin: round;
	pointer-events: none;
}

/* An area with nothing to sell stays on the map as a faint dot. Removing it
   would leave a gap that reads as a hole in the country rather than as a week
   without tours, and the shape is the whole point of the section. */
.home-map__spot {
	fill: #93a3ba;
	stroke: var(--c-panel);
	stroke-width: 2.5;
	transition: transform 0.16s ease;
	pointer-events: none;

	/* So a scale grows the dot where it stands rather than sliding it toward
	   the corner of the drawing. */
	transform-box: fill-box;
	transform-origin: center;
}



/* The finger, not the dot. Invisible, drawn under the dot, and the only thing
   in the pin that takes a pointer - so a tap near a mark counts as a tap on
   it. */
.home-map__hit {
	fill: transparent;
	stroke: none;
	touch-action: pan-y;
}

.home-map__pin {
	cursor: default;
	transform-box: fill-box;
	transform-origin: center;
}
a.home-map__pin { cursor: pointer; }

a.home-map__pin:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.home-map__pin.is-live[data-region="north"]     .home-map__spot { fill: var(--c-logo-aqua); }
.home-map__pin.is-live[data-region="center"]    .home-map__spot { fill: var(--c-logo-blue); }
.home-map__pin.is-live[data-region="jerusalem"] .home-map__spot { fill: var(--c-logo-orange); }
.home-map__pin.is-live[data-region="south"]     .home-map__spot { fill: var(--c-logo-yellow); }

.home-map__pin.is-live.is-hot .home-map__spot { transform: scale(1.4); }

.home-map__region-name {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-6);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 700;
	color: #fff;
}

.home-map__dot {
	inline-size: 12px;
	block-size: 12px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.home-map__region[data-region="north"]     .home-map__dot { background: var(--c-logo-aqua); }
.home-map__region[data-region="center"]    .home-map__dot { background: var(--c-logo-blue); }
.home-map__region[data-region="jerusalem"] .home-map__dot { background: var(--c-logo-orange); }

/* The south's dot is the brand navy, which on the brand navy is nothing at
   all. Given the band's own colour, that one swaps to the campaign yellow. */
.home-map__region[data-region="south"]     .home-map__dot { background: var(--c-logo-yellow); }
.home-map__pin.is-live[data-region="south"] .home-map__spot { fill: var(--c-logo-yellow); }

.home-map__areas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6) var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The chip the tour cards use, restated for the dark ground. */
.home-map__area {
	display: inline-block;
	padding: 0.45em 1.05em;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--radius-pill);
	background: transparent;
	color: rgb(255 255 255 / 70%);
	font-size: var(--fs-sm);
	line-height: 1.5;
	text-decoration: none;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

a.home-map__area.is-live {
	border-color: rgb(255 255 255 / 55%);
	color: #fff;
	font-weight: 600;
}

a.home-map__area.is-live:hover,
a.home-map__area.is-live:focus-visible,
a.home-map__area.is-hot {
	background: #fff;
	border-color: #fff;
	color: var(--c-brand);
}

.home-map__count {
	margin-inline-start: 0.4em;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* An area with no tours is not a link and should not look like one. */
span.home-map__area { opacity: 0.5; }

@media (max-width: 900px) {
	.home-map__board {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-6);
	}

	.home-map__figure { order: -1; }

	/* Bigger on a phone, not smaller: twenty-eight marks on a country this
	   narrow are already at the edge of being seen, and the band has the
	   screen to itself here anyway. */
	.home-map__svg { block-size: min(620px, 70vh); }

	/* The drawing grows with the marks rather than only the marks growing.
	   Gush Dan and Tel Aviv-Jaffa sit about thirteen units apart in a viewBox
	   420 wide, so a dot big enough to see is already a dot big enough to
	   touch its neighbour - scaling the country up moves them apart as it
	   makes them bigger. The heavier ring is for where they still meet. */
	/* The marks grow by transform, not by r. Safari ignores r as a style, so a
	   stylesheet full of radii left the dots at their markup size on the one
	   kind of phone most of this traffic is going to arrive on. */
	.home-map__pin {
		transform: scale(1.55);
	}

	.home-map__spot { stroke-width: 3; }

	.home-map__col { gap: var(--sp-7); }

	/* Two to a line, in a grid rather than a wrapping row. Chips sized to their
	   own words left a ragged column - two here, one there, two again - which
	   on a narrow screen reads as a list that has gone wrong rather than as
	   names of different lengths. Equal cells make the ragged part the text
	   inside them, which is what it actually is. */
	.home-map__areas {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-3);
		align-items: stretch;
	}

	.home-map__area {
		display: flex;
		align-items: center;
		justify-content: center;
		block-size: 100%;
		padding-inline: var(--sp-3);
		text-align: center;
	}
}