/**
 * Sublime Knowledge Base — the public pages.
 *
 * Every colour, size and column count comes from a custom property set on
 * .skb by the settings screen (see Sublime_Knowledge_Base_Public::
 * custom_properties()), so the layout is changed there, not here. The
 * values below each var() are only what the page falls back to if the
 * inline block is missing.
 *
 * Everything is scoped under .skb, and resets only what themes commonly
 * style on bare elements (lists, links, headings), so a theme's rules do not
 * leak into the knowledge base and these do not leak out.
 */

/* ---------------------------------------------------------------- base -- */

.skb {
	--skb-gap: 24px;
	--skb-sticky: 32px;
	color: var(--skb-ink, #22301c);
	font-size: 16px;
	line-height: 1.6;
}

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

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

/* :where() keeps these at the weight of a bare "a", so anything that styles
   its own links inside an article — an order box, a button — keeps them. */
:where(.skb) a {
	color: var(--skb-accent, #2a491d);
	text-decoration: none;
}

:where(.skb) a:hover {
	color: var(--skb-ink, #22301c);
}

.skb a:focus-visible,
.skb summary:focus-visible,
.skb button:focus-visible,
.skb input:focus-visible {
	outline: 2px solid var(--skb-highlight, #ffbf00);
	outline-offset: 2px;
}

.skb h1,
.skb h2,
.skb h3 {
	margin: 0;
	color: var(--skb-ink, #22301c);
	font-family: var(--skb-heading-font, inherit);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-transform: none;
}

.skb-shell {
	width: 100%;
	max-width: var(--skb-container, 1200px);
	margin-inline: auto;
	padding-inline: 16px;
}

.skb-icon {
	flex: none;
	display: block;
}

.skb-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/*
 * The home page sits in the page's content area, which many themes keep to
 * a narrow text column. "Full width" lets it out to the window's edges; the
 * shell inside it brings the content back to the set page width.
 */
.skb-home--full {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw !important;
	margin-left: -50vw !important;
	margin-right: 0 !important;
}

.skb-page--home {
	overflow-x: clip;
}

/* ---------------------------------------------------------------- hero -- */

.skb-hero {
	position: relative;
	text-align: center;
}

.skb-hero--band {
	padding-block: clamp(40px, 6vw, 72px) clamp(48px, 6.5vw, 80px);
	margin-bottom: 24px;
	background-color: var(--skb-hero-bg, #1c2e15);
	background-image:
		radial-gradient(ellipse 55% 90% at 88% 10%, color-mix(in srgb, var(--skb-highlight, #ffbf00) 16%, transparent), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--skb-hero-bg, #1c2e15) 82%, #ffffff) 0%, var(--skb-hero-bg, #1c2e15) 100%);
}

.skb-hero--plain,
.skb-hero--none {
	padding-block: clamp(32px, 5vw, 56px) 8px;
}

.skb .skb-hero__title {
	font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
}

.skb .skb-hero--band .skb-hero__title,
.skb-hero--band .skb-hero__text {
	color: var(--skb-hero-ink, #ffffff);
}

.skb-hero__text {
	max-width: 620px;
	margin: 12px auto 0;
	font-size: 1.05rem;
	opacity: 0.88;
}

/* The band's bottom edge: a strip in the band's own colour, cut to a shape. */
.skb-hero--band.skb-edge--torn::after,
.skb-hero--band.skb-edge--wave::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -23px;
	height: 24px;
	background: var(--skb-hero-bg, #1c2e15);
	-webkit-mask: var(--skb-edge) center / 100% 100% no-repeat;
	mask: var(--skb-edge) center / 100% 100% no-repeat;
	pointer-events: none;
}

.skb-edge--torn {
	--skb-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V12L1200 12L1192 18.6L1177 9.7L1161 7.0L1142 10.5L1133 13.9L1122 19.5L1096 14.6L1088 7.3L1079 8.7L1053 9.7L1026 16.6L1003 17.3L992 6.4L978 20.3L953 8.0L935 15.4L908 13.3L878 7.4L860 15.4L844 6.1L815 10.3L791 17.0L774 9.4L758 11.2L749 14.9L727 18.0L700 20.8L671 19.7L646 10.3L635 17.9L622 10.2L604 13.2L578 13.0L559 13.0L544 21.3L522 16.9L505 6.8L495 13.2L482 8.2L460 18.1L443 15.6L430 13.5L403 9.8L375 7.3L359 11.6L334 8.5L319 14.8L306 13.1L276 8.7L262 16.7L242 12.7L230 21.3L212 7.9L183 21.0L174 8.8L155 15.0L144 16.8L131 14.0L121 16.5L96 10.6L79 15.4L52 7.3L33 13.1L20 7.8L0 13.8Z'/%3E%3C/svg%3E");
}

.skb-edge--wave {
	--skb-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V8C1000 26 800 26 600 14 400 2 200 2 0 16Z'/%3E%3C/svg%3E");
}

/* Topic links under the search. */
.skb-hero__topics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 760px;
	margin: 22px auto 0;
}

.skb-hero__topics-label {
	margin-right: 4px;
	font-size: 14px;
	opacity: 0.75;
}

.skb-hero--band .skb-hero__topics-label {
	color: var(--skb-hero-ink, #ffffff);
}

.skb .skb-chip {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 999px;
	color: var(--skb-accent, #2a491d);
	font-size: 14px;
	line-height: 1.3;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.skb .skb-hero--band .skb-chip {
	border-color: color-mix(in srgb, var(--skb-hero-ink, #ffffff) 30%, transparent);
	background: color-mix(in srgb, var(--skb-hero-ink, #ffffff) 6%, transparent);
	color: var(--skb-hero-ink, #ffffff);
}

.skb .skb-chip:hover,
.skb .skb-hero--band .skb-chip:hover {
	background: var(--skb-highlight, #ffbf00);
	border-color: var(--skb-highlight, #ffbf00);
	color: var(--skb-ink, #22301c);
}

/* ------------------------------------------------------- section heads -- */

.skb-eyebrow {
	margin: 0 0 10px;
	color: var(--skb-eyebrow, var(--skb-highlight, #ffbf00));
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;
}

.skb-section-head {
	margin-bottom: clamp(24px, 3.4vw, 40px);
}

.skb .skb-section-head__title {
	font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem);
}

.skb-section-head__text {
	margin: 12px 0 0;
	max-width: 560px;
	color: var(--skb-muted, #5f6158);
}

@media (min-width: 900px) {
	.skb-section-head--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
		align-items: end;
		gap: 32px;
	}

	.skb-section-head--split .skb-section-head__text {
		margin: 0;
	}
}

/* -------------------------------------------------------------- search -- */

.skb-search {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 640px;
	margin: 28px auto 0;
	padding: 6px;
	background: #ffffff;
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	text-align: left;
}

.skb-search__icon {
	position: absolute;
	left: 20px;
	top: 50%;
	color: var(--skb-muted, #5f6158);
	transform: translateY(-50%);
	pointer-events: none;
}

.skb .skb-search__input {
	flex: 1;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 12px 0 42px;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--skb-ink, #22301c);
	font: inherit;
	font-size: 16px;
}

.skb .skb-search__input:focus {
	outline: none;
}

.skb-search:focus-within {
	border-color: var(--skb-highlight, #ffbf00);
}

/* Doubled class: themes paint every button through rules like
   button:not(:hover):not(:active), which outweigh two classes. */
.skb .skb-search .skb-search__button.skb-search__button {
	flex: none;
	height: 48px;
	margin: 0;
	padding: 0 26px;
	background: var(--skb-highlight, #ffbf00);
	border: 0;
	border-radius: 999px;
	color: var(--skb-ink, #22301c);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.skb .skb-search .skb-search__button.skb-search__button:hover,
.skb .skb-search .skb-search__button.skb-search__button:focus-visible {
	background: var(--skb-accent, #2a491d);
	color: #ffffff;
}

.skb-search--compact {
	margin: 0 0 16px;
	padding: 2px;
	border-radius: 10px;
	box-shadow: none;
}

.skb-search--compact .skb-search__icon {
	left: 12px;
}

.skb .skb-search--compact .skb-search__input {
	height: 40px;
	padding-left: 36px;
	font-size: 15px;
}

.skb-search__results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 60vh;
	overflow: auto;
	padding: 6px;
	background: #ffffff;
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.skb .skb-search__results a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--skb-ink, #22301c);
	line-height: 1.4;
}

.skb .skb-search__results a:hover,
.skb .skb-search__results a[aria-selected="true"] {
	background: var(--skb-surface, #f7f5ef);
	color: var(--skb-accent, #2a491d);
}

.skb-search__results p {
	margin: 0;
	padding: 10px 12px;
	color: var(--skb-muted, #5f6158);
}

.skb .skb-search__results .skb-search__all {
	border-top: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 0 0 8px 8px;
	color: var(--skb-accent, #2a491d);
	font-weight: 600;
}

/* ---------------------------------------------- the home page's columns -- */

.skb-body {
	display: grid;
	gap: 32px;
	padding-block: 40px 56px;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main" "aside";
}

.skb-body__main {
	grid-area: main;
	min-width: 0;
	container-type: inline-size;
}

.skb-body__aside {
	grid-area: aside;
	display: grid;
	gap: var(--skb-gap);
	align-content: start;
}

@media (min-width: 1025px) {
	.skb-body--sidebar-left {
		grid-template-columns: 280px minmax(0, 1fr);
		grid-template-areas: "aside main";
	}

	.skb-body--sidebar-right {
		grid-template-columns: minmax(0, 1fr) 280px;
		grid-template-areas: "main aside";
	}

	.skb-body__aside {
		position: sticky;
		top: var(--skb-sticky);
		align-self: start;
	}
}

@media (min-width: 640px) and (max-width: 1024px) {
	.skb-body__aside {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------ the grid -- */

/*
 * Every row is the same height and every column the same width, whatever
 * each category holds; the columns step down by the width the grid
 * actually has, not the window's, so a sidebar beside it is allowed for.
 */
.skb-grid {
	display: grid;
	gap: var(--skb-gap);
	grid-template-columns: repeat(var(--skb-cols, 3), minmax(0, 1fr));
	align-items: stretch;
}

/* Four across needs about 220px a card; three, about 240px. */
@container (max-width: 960px) {
	.skb-grid {
		grid-template-columns: repeat(min(var(--skb-cols, 3), 3), minmax(0, 1fr));
	}
}

@container (max-width: 760px) {
	.skb-grid {
		grid-template-columns: repeat(min(var(--skb-cols, 3), 2), minmax(0, 1fr));
	}
}

@container (max-width: 500px) {
	.skb-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.skb-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--skb-surface, #f7f5ef);
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: var(--skb-radius, 14px);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.skb-card:hover {
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.skb .skb-card__media {
	display: block;
	overflow: hidden;
	background: color-mix(in srgb, var(--skb-accent, #2a491d) 10%, var(--skb-surface, #f7f5ef));
}

/* The shape is set on the image itself, which overrides its own proportions.
   !important because WordPress writes an inline width and height (as a
   percentage) onto attachment images, which would squash the crop. */
.skb .skb-card__img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--skb-ratio, 16 / 9);
	max-width: none !important;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.skb-card:hover .skb-card__img {
	transform: scale(1.03);
}

.skb .skb-card__media--empty {
	aspect-ratio: var(--skb-ratio, 16 / 9);
	background:
		radial-gradient(ellipse 70% 90% at 85% 15%, color-mix(in srgb, var(--skb-highlight, #ffbf00) 22%, transparent), transparent 70%),
		linear-gradient(160deg, var(--skb-accent, #2a491d), var(--skb-hero-bg, #1c2e15));
	display: grid !important;
	place-items: center;
}

.skb-card__initial {
	color: var(--skb-hero-ink, #ffffff);
	font-family: var(--skb-heading-font, inherit);
	font-size: 4rem;
	line-height: 1;
	opacity: 0.5;
}

.skb-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 20px 22px 22px;
}

.skb .skb-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	font-size: 1.3rem;
}

.skb .skb-card__title a {
	color: var(--skb-ink, #22301c);
}

.skb .skb-card__title a:hover {
	color: var(--skb-accent, #2a491d);
}

.skb-card__count {
	color: var(--skb-muted, #5f6158);
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 0;
	white-space: nowrap;
}

.skb-card__text {
	margin: -4px 0 0;
	color: var(--skb-muted, #5f6158);
	font-size: 14.5px;
}

/* The card's footer: pinned to the bottom by margin-top: auto, above a
   hairline, so the space a short list leaves reads as the card's body
   rather than as a gap. */
.skb .skb-card__more {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--skb-line, #e6e0d0);
	font-size: 14.5px;
	font-weight: 600;
}

.skb .skb-card__more .skb-icon {
	transition: transform 0.2s ease;
}

.skb .skb-card__more:hover .skb-icon {
	transform: translateX(3px);
}

/* A small square image beside the name instead of a picture across the top.
   The body's own box steps aside (display: contents) so the name can sit
   beside the image and the article list run the card's full width under both. */
.skb-card--icon {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-content: start;
	gap: 14px 16px;
	padding: 20px 22px 22px;
}

.skb-card--icon .skb-card__body {
	display: contents;
}

.skb .skb-card--icon .skb-card__media {
	grid-row: 1;
	width: 64px;
	height: 64px;
	aspect-ratio: 1;
	border-radius: 12px;
}

.skb .skb-card--icon .skb-card__img {
	height: 100% !important;
	aspect-ratio: 1;
}

.skb .skb-card--icon .skb-card__title {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
}

.skb-card--icon .skb-card__body > :not(.skb-card__title) {
	grid-column: 1 / -1;
}

.skb-card--icon .skb-card__initial {
	font-size: 1.6rem;
}

.skb-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.skb .skb-subcats a {
	display: inline-block;
	padding: 4px 12px;
	background: #ffffff;
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 999px;
	font-size: 13.5px;
}

/* The "ask us" tile at the end of the grid. */
.skb-card--help {
	justify-content: center;
	background:
		radial-gradient(ellipse 60% 80% at 90% 0%, color-mix(in srgb, var(--skb-highlight, #ffbf00) 20%, transparent), transparent 70%),
		var(--skb-hero-bg, #1c2e15);
	border-color: transparent;
	color: var(--skb-hero-ink, #ffffff);
}

.skb-card--help .skb-card__body {
	justify-content: center;
	padding: 32px 28px;
}

.skb .skb-card--help .skb-card__title {
	color: var(--skb-hero-ink, #ffffff);
	font-size: 1.5rem;
}

.skb-card--help .skb-card__text {
	margin: 0;
	color: var(--skb-hero-ink, #ffffff);
	opacity: 0.82;
	font-size: 15px;
}

.skb .skb-card__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: 6px;
	padding: 11px 22px;
	background: var(--skb-highlight, #ffbf00);
	border-radius: 999px;
	color: var(--skb-ink, #22301c);
	font-weight: 600;
}

.skb .skb-card__cta:hover {
	background: #ffffff;
	color: var(--skb-ink, #22301c);
}

/* Reading suggestions as a row of cards. */
.skb-reads {
	padding-block: 8px 56px;
}

.skb-reads__grid {
	display: grid;
	gap: var(--skb-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.skb .skb-read {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 22px 20px;
	background: #ffffff;
	border: 1px solid var(--skb-line, #e6e0d0);
	border-top: 3px solid var(--skb-highlight, #ffbf00);
	border-radius: var(--skb-radius, 14px);
	color: var(--skb-ink, #22301c);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.skb .skb-read:hover {
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.skb-read__topic {
	color: var(--skb-muted, #5f6158);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.skb-read__title {
	font-family: var(--skb-heading-font, inherit);
	font-size: 1.25rem;
	line-height: 1.3;
}

.skb-read__text {
	display: -webkit-box;
	overflow: hidden;
	color: var(--skb-muted, #5f6158);
	font-size: 14.5px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.skb-read__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	color: var(--skb-accent, #2a491d);
	font-size: 14.5px;
	font-weight: 600;
}

/* --------------------------------------------------------- link lists -- */

.skb-links {
	display: grid;
	gap: 2px;
}

.skb .skb-links a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 0;
	color: var(--skb-accent, #2a491d);
	font-size: 15px;
	line-height: 1.45;
}

.skb .skb-links a:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.skb-links .skb-icon {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: color-mix(in srgb, var(--skb-highlight, #ffbf00) 70%, var(--skb-ink, #22301c));
}

/*
 * A topic card's articles, as rows. The whole row is the link: it lights up
 * on hover and an arrow slides in, so it reads as a thing to click rather
 * than as underlined text. Titles stop at two lines, so one long title
 * cannot make its card taller than the rest of the row.
 */
.skb-links--rows {
	gap: 2px;
	margin-inline: -10px;
}

.skb .skb-links--rows a {
	position: relative;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 34px 8px 10px;
	border-radius: 10px;
	color: var(--skb-ink, #22301c);
	transition: background-color 0.18s ease, color 0.18s ease;
}

.skb .skb-links--rows a:hover,
.skb .skb-links--rows a:focus-visible {
	background: #ffffff;
	color: var(--skb-accent, #2a491d);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.skb .skb-links--rows a:hover span {
	text-decoration: none;
}

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

.skb-links--rows .skb-icon--doc {
	margin-top: 3px;
	transition: color 0.18s ease;
}

.skb-links--rows a:hover .skb-icon--doc {
	color: var(--skb-accent, #2a491d);
}

.skb-links__go {
	position: absolute;
	top: 50%;
	right: 10px;
	display: flex;
	color: var(--skb-accent, #2a491d);
	opacity: 0;
	transform: translate(-4px, -50%);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.skb-links__go .skb-icon {
	width: 16px;
	height: 16px;
	margin: 0;
	color: inherit;
}

.skb-links--rows a:hover .skb-links__go,
.skb-links--rows a:focus-visible .skb-links__go {
	opacity: 1;
	transform: translate(0, -50%);
}

/* No hover on a touch screen: the arrow stays, faintly, to say "tap". */
@media (hover: none) {
	.skb-links__go {
		opacity: 0.45;
		transform: translate(0, -50%);
	}
}

.skb-panel {
	padding: 20px 22px;
	background: var(--skb-surface, #f7f5ef);
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: var(--skb-radius, 14px);
}

.skb .skb-panel__title {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--skb-line, #e6e0d0);
	font-size: 1.15rem;
}

/* ----------------------------------------------------------------- FAQ -- */

.skb-faqs {
	padding-block: 16px 64px;
}

.skb-faqs .skb-section-head {
	max-width: 900px;
	margin-inline: auto;
}

.skb-faqs__list {
	display: grid;
	gap: 12px;
	max-width: 900px;
	margin-inline: auto;
}

.skb-faq {
	background: #ffffff;
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 12px;
}

.skb-faq[open] {
	border-color: color-mix(in srgb, var(--skb-highlight, #ffbf00) 55%, var(--skb-line, #e6e0d0));
}

.skb-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	color: var(--skb-ink, #22301c);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.skb-faq__q::-webkit-details-marker {
	display: none;
}

.skb-faq__q .skb-icon,
.skb-nav__cat .skb-icon,
.skb-toc-fold summary .skb-icon {
	transition: transform 0.2s ease;
}

.skb-faq[open] .skb-faq__q .skb-icon,
.skb-nav__group[open] .skb-nav__cat .skb-icon,
.skb-toc-fold[open] summary .skb-icon {
	transform: rotate(180deg);
}

.skb-faq__a {
	padding: 0 20px 18px;
	color: var(--skb-muted, #5f6158);
}

.skb-faq__a > :last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------- search results -- */

.skb-results__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 1.1rem;
}

.skb .skb-results__clear {
	font-size: 14px;
}

.skb-results__none {
	color: var(--skb-muted, #5f6158);
}

.skb-rows {
	border-top: 1px solid var(--skb-line, #e6e0d0);
}

.skb-row {
	border-bottom: 1px solid var(--skb-line, #e6e0d0);
}

.skb .skb-row__link {
	display: grid;
	gap: 4px;
	padding: 16px 4px;
}

.skb-row__title {
	color: var(--skb-accent, #2a491d);
	font-size: 1.08rem;
	font-weight: 500;
}

.skb-row__text {
	color: var(--skb-muted, #5f6158);
	font-size: 14.5px;
}

.skb .skb-row__link:hover .skb-row__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------- category page -- */

.skb-cat-head {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 8px 0 28px;
}

.skb .skb-cat-head__img {
	flex: none;
	width: 128px !important;
	height: 128px !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: var(--skb-radius, 14px);
}

.skb .skb-cat-head__title {
	font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.5rem);
}

.skb-cat-head__text {
	margin: 8px 0 0;
	color: var(--skb-muted, #5f6158);
}

.skb-cat-head__count {
	margin: 6px 0 0;
	color: var(--skb-muted, #5f6158);
	font-size: 14px;
}

.skb-grid--sub {
	margin-bottom: 28px;
}

@media (max-width: 540px) {
	.skb-cat-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.skb .skb-cat-head__img {
		width: 88px !important;
		height: 88px !important;
	}
}

/* --------------------------------------------------------- breadcrumb -- */

.skb-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 12px;
	color: var(--skb-muted, #5f6158);
	font-size: 13.5px;
}

.skb-crumbs li + li::before {
	content: "/";
	margin-right: 4px;
	opacity: 0.6;
}

/* ------------------------------------------------------- article page -- */

.skb-article__grid {
	display: grid;
	gap: 40px;
	padding-block: 40px 64px;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main" "nav";
}

.skb-article__main {
	grid-area: main;
	min-width: 0;
	width: 100%;
	max-width: var(--skb-content, 760px);
	margin-inline: auto;
}

.skb-article__nav {
	grid-area: nav;
	min-width: 0;
}

.skb-article__toc {
	grid-area: toc;
	display: none;
	min-width: 0;
}

@media (min-width: 861px) {
	.skb-article__grid--nav-content,
	.skb-article__grid--nav-content-toc {
		grid-template-columns: 260px minmax(0, 1fr);
		grid-template-areas: "nav main";
	}

	/* The column stays in view but never scrolls as a box: a scrollbar
	   down the side of the page, and a panel cut at its edge, read as
	   broken. If the panel itself is taller than the window, the panel
	   scrolls inside its own border, with a bar that shows on hover. */
	.skb-article__nav {
		position: sticky;
		top: var(--skb-sticky);
		align-self: start;
	}

	.skb-article__nav .skb-nav__panel,
	.skb-toc--side {
		max-height: calc(100vh - var(--skb-sticky) - 16px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
	}

	.skb-article__nav .skb-nav__panel:hover,
	.skb-toc--side:hover {
		scrollbar-color: var(--skb-line, #e6e0d0) transparent;
	}

	/* The help card rides under the menu only where both fit the window;
	   on a shorter screen the article's own order box is enough. */
	@media (max-height: 899px) {
		.skb-article__nav .skb-nav__help {
			display: none;
		}
	}
}

@media (min-width: 1101px) {
	.skb-article__grid--nav-content-toc {
		grid-template-columns: 250px minmax(0, 1fr) 220px;
		grid-template-areas: "nav main toc";
	}

	.skb-article__grid--content-toc {
		grid-template-columns: minmax(0, var(--skb-content, 760px)) 220px;
		grid-template-areas: "main toc";
		justify-content: center;
	}

	.skb-article__grid--nav-content-toc .skb-article__toc,
	.skb-article__grid--content-toc .skb-article__toc {
		display: block;
		position: sticky;
		top: var(--skb-sticky);
		align-self: start;
	}

	.skb-article__grid--nav-content-toc .skb-toc-fold,
	.skb-article__grid--content-toc .skb-toc-fold {
		display: none;
	}
}

.skb-article__head {
	margin-bottom: 24px;
}

.skb .skb-article__title {
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
}

.skb-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 12px 0 0;
	color: var(--skb-muted, #5f6158);
	font-size: 14px;
}

.skb-article__content {
	font-size: 17px;
	line-height: 1.75;
}

.skb-article__content > :first-child {
	margin-top: 0;
}

.skb .skb-article__content h2,
.skb .skb-article__content h3 {
	margin: 1.9em 0 0.6em;
	scroll-margin-top: calc(var(--skb-sticky) + 16px);
}

.skb .skb-article__content h2 {
	font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem);
}

.skb .skb-article__content h3 {
	font-size: 1.25rem;
}

.skb .skb-article__content ul,
.skb .skb-article__content ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.skb .skb-article__content ul {
	list-style: disc;
}

.skb .skb-article__content ol {
	list-style: decimal;
}

.skb .skb-article__content li {
	margin-bottom: 0.35em;
}

/* Plain text links only; a link with a class of its own is a button or a
   card someone else styled. */
.skb .skb-article__content a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.skb .skb-article__content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.skb-article__content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.skb-panel--related {
	margin-top: 40px;
}

/* ------------------------------------------------------------ side menu -- */

/* The menu sits in a panel, so the column has a shape of its own instead
   of a list floating on the page. */
.skb-nav {
	display: grid;
	gap: 16px;
}

.skb-nav__panel {
	padding: 16px 14px 8px;
	background: var(--skb-surface, #f7f5ef);
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: var(--skb-radius, 14px);
}

.skb-nav__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 2px 12px;
}

.skb-nav__head .skb-eyebrow {
	margin: 0;
}

.skb .skb-nav__home {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.skb .skb-nav__home .skb-icon {
	width: 15px;
	height: 15px;
}

.skb-nav__panel .skb-search--compact {
	margin-bottom: 8px;
	border-color: var(--skb-line, #e6e0d0);
}

.skb-nav__group + .skb-nav__group {
	border-top: 1px solid var(--skb-line, #e6e0d0);
}

.skb-nav__cat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 6px;
	border-radius: 8px;
	color: var(--skb-ink, #22301c);
	font-family: var(--skb-heading-font, inherit);
	font-size: 0.98rem;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.18s ease;
}

.skb-nav__cat:hover {
	background: #ffffff;
}

.skb-nav__cat::-webkit-details-marker {
	display: none;
}

.skb-nav__name {
	flex: 1;
	min-width: 0;
}

.skb-nav__count {
	min-width: 24px;
	padding: 1px 7px;
	background: #ffffff;
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 999px;
	color: var(--skb-muted, #5f6158);
	font-family: inherit;
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

.skb-nav__group.is-current > .skb-nav__cat {
	color: var(--skb-accent, #2a491d);
}

.skb-nav__group.is-current .skb-nav__count {
	background: var(--skb-highlight, #ffbf00);
	border-color: var(--skb-highlight, #ffbf00);
	color: var(--skb-ink, #22301c);
}

/* The open topic's articles hang off a rail, so they read as its children. */
.skb-nav__list {
	display: grid;
	gap: 2px;
	margin: 0 0 10px 12px !important;
	padding: 2px 0 2px 10px !important;
	border-left: 1px solid var(--skb-line, #e6e0d0);
}

.skb .skb-nav__list a {
	display: block;
	padding: 5px 10px;
	border-radius: 8px;
	color: var(--skb-muted, #5f6158);
	font-size: 14px;
	line-height: 1.4;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.skb .skb-nav__list a:hover {
	background: #ffffff;
	color: var(--skb-accent, #2a491d);
}

.skb .skb-nav__list a[aria-current="page"] {
	position: relative;
	background: #ffffff;
	color: var(--skb-ink, #22301c);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.skb .skb-nav__list a[aria-current="page"]::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: -11px;
	width: 3px;
	border-radius: 3px;
	background: var(--skb-highlight, #ffbf00);
}

/* The help card under the menu. */
.skb-nav__help {
	display: grid;
	gap: 8px;
	padding: 18px 16px;
	border-radius: var(--skb-radius, 14px);
	background:
		radial-gradient(ellipse 70% 90% at 100% 0%, color-mix(in srgb, var(--skb-highlight, #ffbf00) 22%, transparent), transparent 70%),
		var(--skb-hero-bg, #1c2e15);
	color: var(--skb-hero-ink, #ffffff);
}

/* Said on the paragraphs themselves: themes colour every bare p, which
   beats a colour the card only passes down. */
.skb .skb-nav__help p {
	margin: 0;
	color: var(--skb-hero-ink, #ffffff);
}

.skb-nav__help-title {
	font-family: var(--skb-heading-font, inherit);
	font-size: 1.15rem;
	line-height: 1.3;
}

.skb-nav__help-text {
	font-size: 14px;
	opacity: 0.82;
}

.skb-nav__help .skb-card__cta {
	padding: 9px 18px;
	font-size: 14px;
}

/* ------------------------------------------------------- contents list -- */

.skb-toc__title {
	margin: 0 0 10px;
	color: var(--skb-muted, #5f6158);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Beside the article: a white panel, a bar that fills as the reader goes,
   the main sections numbered, and a way back up. */
.skb-toc--side {
	padding: 18px 16px 14px;
	background: #ffffff;
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: var(--skb-radius, 14px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.skb-toc__progress {
	height: 3px;
	margin: 0 0 12px;
	overflow: hidden;
	background: var(--skb-line, #e6e0d0);
	border-radius: 3px;
}

.skb-toc__progress span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--skb-highlight, #ffbf00);
	border-radius: 3px;
	transition: width 0.15s linear;
}

.skb-toc__list {
	counter-reset: skb-toc;
	border-left: 1px solid var(--skb-line, #e6e0d0);
}

.skb .skb-toc__item a {
	display: flex;
	gap: 8px;
	margin-left: -1px;
	padding: 5px 0 5px 12px;
	border-left: 2px solid transparent;
	color: var(--skb-muted, #5f6158);
	font-size: 14px;
	line-height: 1.4;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.skb-toc__item--h2 {
	counter-increment: skb-toc;
}

.skb .skb-toc__item--h2 a::before {
	content: counter(skb-toc, decimal-leading-zero);
	flex: none;
	min-width: 18px;
	color: color-mix(in srgb, var(--skb-muted, #5f6158) 60%, transparent);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1.65;
}

.skb .skb-toc__item--h3 a {
	padding-left: 38px;
	font-size: 13px;
}

.skb .skb-toc__item a:hover,
.skb .skb-toc__item a.is-active {
	border-left-color: var(--skb-highlight, #ffbf00);
	color: var(--skb-ink, #22301c);
}

.skb .skb-toc__item a.is-active::before {
	color: var(--skb-accent, #2a491d);
}

.skb .skb-toc__top {
	display: inline-flex;
	gap: 6px;
	margin: 12px 0 0 2px;
	color: var(--skb-muted, #5f6158);
	font-size: 13px;
	font-weight: 600;
}

.skb .skb-toc__top:hover {
	color: var(--skb-accent, #2a491d);
}

.skb-toc-fold {
	margin-bottom: 24px;
	background: var(--skb-surface, #f7f5ef);
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 12px;
}

.skb-toc-fold summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.skb-toc-fold summary::-webkit-details-marker {
	display: none;
}

.skb-toc--fold {
	padding: 0 18px 14px;
}

.skb-toc--fold .skb-toc__title {
	display: none;
}

/* --------------------------------------------------------------- pager -- */

.skb-pager {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 24px;
}

.skb .skb-pager__link {
	display: grid;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 12px;
}

.skb .skb-pager__link:hover {
	border-color: var(--skb-accent, #2a491d);
}

.skb-pager__link--next {
	grid-column: 2;
	text-align: right;
}

.skb-pager__label {
	color: var(--skb-muted, #5f6158);
	font-size: 13px;
}

.skb-pager__title {
	color: var(--skb-accent, #2a491d);
	font-weight: 500;
	line-height: 1.4;
}

@media (max-width: 540px) {
	.skb-pager {
		grid-template-columns: minmax(0, 1fr);
	}

	.skb-pager__link--next {
		grid-column: 1;
	}
}

/* ---------------------------------------------- Focused article layout -- */

/*
 * One reading column and a quiet contents list. Nothing in a box except
 * the summary: structure comes from type, spacing and one hairline.
 */
.skb-focus__progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	height: 3px;
	pointer-events: none;
}

.skb-focus__progress span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--skb-highlight, #ffbf00);
	transition: width 0.15s linear;
}

.skb-focus__grid {
	display: grid;
	gap: 72px;
	padding-block: 48px 24px;
	grid-template-columns: minmax(0, var(--skb-content, 760px));
	justify-content: center;
}

.skb-focus__main {
	min-width: 0;
}

.skb-focus__toc {
	display: none;
}

@media (min-width: 1101px) {
	.skb-focus__grid--toc {
		grid-template-columns: minmax(0, var(--skb-content, 760px)) 220px;
	}

	.skb-focus__grid--toc .skb-focus__toc {
		display: block;
		position: sticky;
		top: var(--skb-sticky);
		align-self: start;
		max-height: calc(100vh - var(--skb-sticky) - 16px);
		overflow-y: auto;
		scrollbar-width: none;
	}

	.skb-focus__grid--toc .skb-focus__fold {
		display: none;
	}
}

/* The header: topic, title, one quiet line, then a hairline. */
.skb-focus__head {
	margin-bottom: 36px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--skb-line, #e6e0d0);
}

.skb .skb-focus__topic {
	display: inline-block;
	margin-bottom: 14px;
	color: var(--skb-eyebrow, var(--skb-highlight, #ffbf00));
}

.skb .skb-focus__topic:hover {
	color: var(--skb-accent, #2a491d);
}

.skb .skb-focus__title {
	font-size: clamp(2rem, 1.35rem + 1.9vw, 2.85rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.skb-focus__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	margin: 18px 0 0;
	color: var(--skb-muted, #5f6158);
	font-size: 14.5px;
}

.skb-focus__meta span + span::before {
	content: "·";
	margin: 0 10px;
	opacity: 0.6;
}

/* The text itself. */
.skb-focus__content {
	font-size: 18px;
	line-height: 1.8;
}

.skb-focus__content p {
	margin: 0 0 1.25em;
}

.skb .skb-focus__content h2 {
	margin: 2.2em 0 0.6em;
	font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.95rem);
}

.skb .skb-focus__content h3 {
	margin: 1.8em 0 0.5em;
	font-size: 1.25rem;
}

.skb .skb-focus__content img {
	border-radius: 12px;
}

/* A first paragraph that says "Short answer:" is the summary. */
.skb .skb-summary {
	margin: 0 0 2em;
	padding: 20px 24px;
	background: var(--skb-surface, #f7f5ef);
	border: 1px solid var(--skb-line, #e6e0d0);
	border-left: 3px solid var(--skb-highlight, #ffbf00);
	border-radius: 12px;
	font-size: 17px;
	line-height: 1.75;
}

.skb-focus__fold {
	margin-bottom: 32px;
}

/* The contents list, quiet: no box, no numbers, a rail and the reader's place. */
.skb-toc--quiet .skb-toc__title {
	margin-bottom: 14px;
	font-size: 11.5px;
	letter-spacing: 0.14em;
}

.skb .skb-toc--quiet .skb-toc__item--h2 a::before {
	content: none;
}

.skb .skb-toc--quiet .skb-toc__item a {
	padding: 5px 0 5px 14px;
	font-size: 13.5px;
}

.skb .skb-toc--quiet .skb-toc__item--h3 a {
	padding-left: 26px;
	font-size: 13px;
}

.skb .skb-toc--quiet .skb-toc__item a.is-active {
	color: var(--skb-ink, #22301c);
	font-weight: 600;
}

.skb-focus .skb-pager {
	margin-top: 56px;
}

/* The "All topics" button, over the title and over the contents list. */
.skb .skb-topics-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 12px;
	background: #ffffff;
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 999px;
	color: var(--skb-ink, #22301c);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.skb .skb-topics-btn:hover {
	border-color: var(--skb-accent, #2a491d);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	color: var(--skb-ink, #22301c);
}

.skb-topics-btn .skb-icon {
	width: 16px;
	height: 16px;
}

/* Beside the article: the column's own button, full width, filled, and in
   view all the way down because the contents column stays on screen. */
.skb .skb-topics-btn--side {
	display: flex;
	width: 100%;
	margin-bottom: 26px;
	padding: 12px 16px;
	background: var(--skb-accent, #2a491d);
	border-color: var(--skb-accent, #2a491d);
	border-radius: 12px;
	box-shadow: 0 8px 22px color-mix(in srgb, var(--skb-accent, #2a491d) 22%, transparent);
	color: #ffffff;
	font-size: 14.5px;
}

.skb .skb-topics-btn--side::after {
	content: "→";
	margin-left: auto;
	transition: transform 0.18s ease;
}

.skb .skb-topics-btn--side:hover {
	background: var(--skb-hero-bg, #1c2e15);
	border-color: var(--skb-hero-bg, #1c2e15);
	color: #ffffff;
}

.skb .skb-topics-btn--side:hover::after {
	transform: translateX(3px);
}

/* Where the contents column is hidden (tablets, phones) the button over the
   title is the way in: a filled pill fixed to the bottom corner, so it is
   in reach however far down the reader is. */
.skb .skb-topics-btn--head {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 9990;
	padding: 11px 18px 11px 14px;
	background: var(--skb-accent, #2a491d);
	border-color: var(--skb-accent, #2a491d);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
	color: #ffffff;
	font-size: 14px;
}

.skb .skb-topics-btn--head:hover {
	background: var(--skb-hero-bg, #1c2e15);
	color: #ffffff;
}

@media (min-width: 1101px) {
	.skb .skb-focus__grid--toc .skb-topics-btn--head {
		display: none;
	}
}

.skb-focus__head .skb-topics-btn + .skb-focus__topic {
	display: block;
	width: fit-content;
}

/* The menu itself: a panel that slides in from the left, over a dimmed page. */
.skb-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(380px, 90vw);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 56px 18px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #ffffff;
	border: 0;
	box-shadow: 12px 0 40px rgba(0, 0, 0, 0.18);
	color: var(--skb-ink, #22301c);
}

.skb-drawer[open] {
	animation: skb-drawer-in 0.24s ease-out;
}

.skb-drawer::backdrop {
	background: rgba(20, 28, 16, 0.42);
	backdrop-filter: blur(2px);
}

@keyframes skb-drawer-in {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: none;
	}
}

/* Weighted past themes' button:not(:hover):not(:active) colours. */
.skb .skb-drawer .skb-drawer__close.skb-drawer__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: var(--skb-surface, #f7f5ef);
	border: 1px solid var(--skb-line, #e6e0d0);
	border-radius: 999px;
	color: var(--skb-ink, #22301c);
	cursor: pointer;
}

.skb .skb-drawer .skb-drawer__close.skb-drawer__close:hover {
	border-color: var(--skb-accent, #2a491d);
}

.skb-drawer .skb-nav__panel {
	max-height: none;
	overflow: visible;
}

html.skb-drawer-open {
	overflow: hidden;
}

/* The way on, after the article, on the same width as the article and its
   contents list together, so its left edge is the article's. */
.skb-focus .skb-reads,
.skb-focus .skb-focus__topics {
	max-width: calc(var(--skb-content, 760px) + 32px);
}

@media (min-width: 1101px) {
	.skb-focus .skb-reads,
	.skb-focus .skb-focus__topics {
		max-width: calc(var(--skb-content, 760px) + 72px + 220px + 32px);
	}
}

.skb-focus .skb-reads {
	padding-top: 48px;
	border-top: 1px solid var(--skb-line, #e6e0d0);
}

.skb-focus__topics {
	padding-block: 0 72px;
}

.skb-focus__topics-label {
	margin: 0 0 12px;
	color: var(--skb-muted, #5f6158);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.skb-focus__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.skb .skb-chip.is-current {
	background: var(--skb-highlight, #ffbf00);
	border-color: var(--skb-highlight, #ffbf00);
	color: var(--skb-ink, #22301c);
}

.skb .skb-chip--all {
	border-color: transparent;
	font-weight: 600;
}

@media (max-width: 640px) {
	.skb-focus__grid {
		padding-block: 28px 16px;
	}

	.skb-focus__content {
		font-size: 17px;
	}

	.skb .skb-summary {
		padding: 16px 18px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skb *,
	.skb *::before,
	.skb *::after {
		transition: none !important;
	}
}