/*
 * Base layer.
 *
 * Element defaults and the few patterns that repeat on every screen. Anything
 * belonging to one section belongs in that block's own stylesheet instead.
 */

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

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

body {
	margin: 0;
	background: var(--page);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: var(--w-regular);
	line-height: var(--lh-body);
	/*
	 * Hebrew has no capitals to lean on, so the text relies on its own
	 * shapes. Grayscale smoothing keeps the thin weights from thickening.
	 */
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	margin: 0 0 var(--space-sm);
	color: var(--text);
	line-height: var(--lh-tight);
	text-wrap: balance;
}

h2 { font-size: var(--fs-h2); font-weight: var(--w-ultrabold); }
h3 { font-size: var(--fs-h3); font-weight: var(--w-bold); }

p { margin: 0 0 var(--space-sm); }

/*
 * Links carry no underline by default. Where one is wanted, such as a
 * "להורדה" under a file name, the component asks for it.
 */
a { color: inherit; text-decoration: none; }

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

/* ---- The page column ----------------------------------------------- */
/*
 * One gutter, used by the header, the footer and every section, so nothing
 * sits a few pixels off the line everything else shares.
 */
.wrap {
	/*
	 * The same margins as the home page's .k-container: never narrower than
	 * 11vw a side on desktop, and the content capped at --container. The
	 * rest of the site used to have wider content than the home page.
	 */
	padding-inline: max(var(--gutter), 11vw, (100% - var(--container)) / 2);
	margin-inline: auto;
}

@media (max-width: 1023px) {
	.wrap { padding-inline: var(--gutter); }
}

/* ---- The // heading ------------------------------------------------- */
/*
 * The site's one section heading. Same size everywhere, no small variant.
 * The slashes are decoration and are spoken by no screen reader.
 */
/*
 * 1.2 rather than the --lh-tight the other headings use. Every design file
 * sets this heading to 30/800/1.2, and at 30px the difference is 1.5px of
 * leading, which shows when a title runs to two lines.
 */
.h-slash { line-height: 1.2; }

.h-slash::before {
	content: "//";
	color: var(--accent);
	margin-inline-end: .4em;
	speak: never;
}

/* ---- Meta line ------------------------------------------------------ */
/* "פרק 1 · 27.8.26 · 42 דק׳", running text above the title, in blue. */
.meta {
	font-size: var(--fs-meta);
	color: var(--text);
	margin-bottom: var(--space-xs);
}

/* ---- Buttons -------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-h);
	padding-inline: var(--space-md);
	border: 0;
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--text-invert);
	font: inherit;
	font-weight: var(--w-bold);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Hover washes blue in from the right, the direction the language reads.
 * A pseudo-element scales rather than the background animating, so the
 * paint stays on the compositor.
 */
.btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-blue);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur) var(--ease);
	z-index: -1;
}

.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }

/* ---- One comp or the other ------------------------------------------ */
/*
 * The hero's shapes are drawn twice, once against the 1920 comp and once
 * against the 390 one, because they are different shapes and not the same
 * shape at two sizes. Only one set is ever in the page.
 */
.k-mobile { display: none !important; }

@media (max-width: 1023px) {
	.k-desktop { display: none !important; }
	.k-mobile  { display: block !important; }
}

/* ---- Screen reader only --------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Skip link, visible the moment it takes focus. */
.skip-link {
	position: absolute;
	inset-inline-start: var(--gutter);
	top: -100px;
	z-index: 100;
	background: var(--c-blue);
	color: var(--text-invert);
	padding: var(--space-xs) var(--space-sm);
	transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus { top: var(--space-xs); }