/*
 * Solkarra theme foundation.
 *
 * theme.json owns the palette, the type scale, the spacing scale and the
 * layout widths. This file owns the three things theme.json cannot express:
 * the light and dark scheme variables, the registered block styles, and the
 * motion rules. Nothing else belongs here.
 *
 * Loaded on the front end and inside the editor canvas.
 *
 * MERGING: the lane blocks below are appended from tools/handoff/*.css. To
 * refresh any of them, truncate this file at the Lane B marker and append
 * B-header-footer, F-sections, H-sections, I-sections, J-sections, F1-sections,
 * F2-sections and N-sections again, in that order, then re-run the fallback
 * pass. Keep this note here rather than above the Lane B marker: Lane B's file
 * carries its own marker on line one, so anything written above it becomes part
 * of the foundation on the next truncation and accumulates a stale copy every
 * pass.
 *
 * Two things a re-merge would undo, so do them again if it happens.
 * 1. Four rules were deleted on 2026-09-22 because the markup that used them
 *    had gone: .sk-slot-tag, the .sk-counter half of the .sk-photoband
 *    min-height, .sk-glance .sk-defrow:last-child and
 *    .sk-values .sk-defrow .sk-def__t. Checked against every page file and
 *    every pattern first. .sk-confirm looks like one of them and is not: three
 *    files still use it.
 * 2. The navigation overlay breakpoint moved from 960 to 1140. Two of its five
 *    homes are inside the Lane B block. tools/handoff/B-header-footer.css still
 *    carried the old 960 and the old 1100px item padding step, so a re-merge of
 *    it would have silently put the nav back to wrapping between 960 and 1138.
 *    Lane K deleted that file on 2026-09-22 as spent: all 62 of its selectors
 *    were already here, and the only thing it could still do was undo this.
 *    See A-requests.md note 28.
 *
 * The other seven tools/handoff/*-sections.css files were checked the same way
 * on 2026-09-22 and are all merged. They are kept because re-merging one would
 * only restore the four dead rules deleted above, not change a live number.
 */

/* ---------------------------------------------------------------- scheme */

/* The editor rewrites a theme stylesheet's `html` selector to its own writing
   flow wrapper, so both are named and the variables land either way. */
html,
.editor-styles-wrapper {
	--bg: #FBF8F2;
	--fg: #23262E;
	--muted: #6B6659;
	--line: #EAE1D2;
	--card: #FFFFFF;
	--hero: #070731;
	--band: #070731;
	--band-card: #0d0d47;
	--band-line: #26265f;
	--band-fg: #EEEAE0;
	--band-muted: #A49E90;
	--hero-fg: #F5F2EA;
	--gold: #F2A93B;
	--gold-deep: #D98A21;
	--accent: var(--wp--preset--color--accent, #F2A93B);
	--radius-card: var(--wp--custom--radius--card, 16px);
	--radius-band: var(--wp--custom--radius--band, 20px);
	--radius-small: var(--wp--custom--radius--small, 8px);
	--pad-section: var(--wp--custom--section--padding, clamp(64px, 6.7vw, 96px));
	--gutter: var(--wp--custom--section--gutter, 24px);

	/*
	 * The sticky header's own height, and the distance an in page anchor has to
	 * hold back so its first line clears the bar. Measured on the live site on
	 * 2026-09-22: the header is 73px at 1440, 1024, 900 and 375, and still 73px
	 * either side of the overlay switch after it moved to 1140, so the switch
	 * changes what sits in the bar but not how tall it is. One token, so a
	 * change to the bar is a change in one place.
	 */
	--header-h: 73px;
	--anchor-offset: calc(var(--header-h) + var(--gutter, 24px));

	/* The reading measure for an article page. */
	--measure-article: 760px;
	color-scheme: light;
}

html[data-scheme="dark"],
.editor-styles-wrapper[data-scheme="dark"] {
	--bg: #050524;
	--fg: #EEEAE0;
	--muted: #A49E90;
	--line: #26265f;
	--card: #0e0e3d;
	--hero: #040419;
	--band: #070731;
	--band-card: #0d0d47;
	--band-line: #26265f;
	--band-fg: #EEEAE0;
	--band-muted: #A49E90;
	color-scheme: dark;
}

body {
	background-color: var(--bg);
	color: var(--fg);
}

/* The editor canvas has no <html data-scheme>, so anchor the light defaults
   on the writing flow too. */
.editor-styles-wrapper {
	background-color: var(--bg);
	color: var(--fg);
}

/* ------------------------------------------------------- focus and access */

/*
 * The ring takes --fg on the light scheme and Solar Gold on the dark one.
 * Amended in 02-BUILD-LANES.md on 2026-09-21 for the same reason as the toggle
 * glyph: gold on Warm Paper is 1.88:1, SC 1.4.11 asks 3:1 of a state indicator,
 * and the brand guide already rules out Solar Gold for small marks on a light
 * ground.
 *
 * --fg rather than a literal ink is what makes this work on a midnight band in
 * the light scheme. The band and hero block styles remap --fg to --band-fg for
 * everything inside them, so a link in the proof band or the closing CTA gets a
 * cream ring on midnight rather than an ink one nobody can see. The same is
 * true of Lane F's .sk-on-band helper.
 */
:focus-visible {
	outline: var(--wp--custom--focus--width, 3px) solid var(--fg, #23262E);
	outline-offset: var(--wp--custom--focus--offset, 3px);
	border-radius: 4px;
}

html[data-scheme="dark"] :focus-visible,
.editor-styles-wrapper[data-scheme="dark"] :focus-visible {
	outline-color: var(--gold);
}

/*
 * A dark surface painted straight from the palette, rather than through the
 * band or hero block style, never remapped --fg, so the ring came out ink on
 * midnight at 1.28:1 and vanished. Measured on the footer, which sets
 * has-midnight-background-color on the block rather than using the band style,
 * and takes every link on every page with it.
 *
 * Remapping the token here rather than patching each component means a section
 * that picks a dark palette colour in the editor gets a readable ring without
 * its author having to know any of this. It is the scheme layer's job.
 */
.has-midnight-background-color,
.has-midnight-2-background-color,
.has-dark-bg-background-color,
.has-dark-hero-background-color,
.has-dark-surface-background-color {
	--fg: var(--band-fg);
	--muted: var(--band-muted);
	--line: var(--band-line);
	--card: var(--band-card);
}

.skip-link:focus,
.wp-block-template-part .skip-link:focus {
	background-color: var(--gold);
	color: #070731;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 700;
	font-size: 15px;
	border-radius: var(--radius-small);
	padding: 12px 20px;
	text-decoration: none;
	z-index: 100000;
}

/* Underlines sit clear of the descenders. theme.json has no field for either
   property, so they live here. */
a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* The inline "read on" link: Montserrat, gold rule under it. */
.sk-link {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 700;
	font-size: 15px;
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.sk-link:hover {
	text-decoration-color: var(--gold-deep);
}

/* Touch targets. Anything that is a link or a control keeps 44px of height. */
.wp-block-button__link,
.wp-block-navigation-item__content,
.sk-tap {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* --------------------------------------------------------- block: eyebrow */

.is-style-solkarra-eyebrow {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--eyebrow, 13px);
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 14px;
}

/* ------------------------------------------------------------ block: card */

.is-style-solkarra-card {
	background-color: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: clamp(24px, 3vw, 40px);
}

/* ---------------------------------------------------- blocks: band, hero */

.is-style-solkarra-band,
.is-style-solkarra-hero {
	/* Inside a dark band the neutral tokens flip, so a nested card, hairline
	   or muted line needs no extra class. */
	--card: var(--band-card);
	--line: var(--band-line);
	--muted: var(--band-muted);
	--fg: var(--band-fg);
	color: var(--band-fg);
	border-radius: var(--radius-band);
	padding-top: var(--pad-section);
	padding-bottom: var(--pad-section);
	position: relative;
	overflow: hidden;
}

.is-style-solkarra-band {
	background-color: var(--band);
}

.is-style-solkarra-hero {
	background-color: var(--hero);
	color: var(--hero-fg);
}

.is-style-solkarra-band.alignfull,
.is-style-solkarra-hero.alignfull {
	border-radius: 0;
}

.is-style-solkarra-band :where(h1, h2, h3, h4, h5, h6),
.is-style-solkarra-hero :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.is-style-solkarra-band .is-style-solkarra-eyebrow,
.is-style-solkarra-hero .is-style-solkarra-eyebrow {
	color: var(--gold);
}

/* ----------------------------------------------------------- block: list */

.is-style-solkarra-dashes {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	display: grid;
	gap: 12px;
}

.is-style-solkarra-dashes li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.is-style-solkarra-dashes li::before {
	content: "";
	flex: 0 0 18px;
	height: 2px;
	margin-top: 13px;
	border-radius: 2px;
	background-color: var(--gold);
}

/* -------------------------------------------------------- blocks: button */

.wp-block-button .wp-block-button__link {
	min-height: 48px;
	padding-top: 0;
	padding-bottom: 0;
	text-decoration: none;
	border: 0;
	transition: background-color var(--wp--custom--motion--hover, 0.2s) ease,
		border-color var(--wp--custom--motion--hover, 0.2s) ease,
		color var(--wp--custom--motion--hover, 0.2s) ease;
}

.wp-block-button.is-style-solkarra-gold .wp-block-button__link {
	background-color: var(--gold);
	color: #070731;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 700;
	font-size: 15px;
}

.wp-block-button.is-style-solkarra-gold .wp-block-button__link:hover,
.wp-block-button.is-style-solkarra-gold .wp-block-button__link:focus {
	background-color: var(--gold-deep);
	color: #070731;
}

.wp-block-button.is-style-solkarra-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--fg);
	border: 2px solid var(--gold);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 700;
	font-size: 15px;
}

.wp-block-button.is-style-solkarra-outline .wp-block-button__link:hover,
.wp-block-button.is-style-solkarra-outline .wp-block-button__link:focus {
	border-color: var(--gold-deep);
	color: var(--fg);
}

/* ------------------------------------------------------------ the header */

/* Sticky sits on the template part element itself. A sticky child inside a
   wrapper exactly its own height has nowhere to move and never sticks. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}

.sk-header {
	background-color: var(--bg);
	border-bottom: 1px solid var(--line);
}

/* The bar, the brand lock-up and the Shops accent dots are appended at the end
   of this file, in the Lane B block. */

.sk-wordmark {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.08em;
	color: var(--fg);
	text-decoration: none;
}

/* The current page keeps a gold underline in the primary navigation. */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item[aria-current="page"] > .wp-block-navigation-item__content {
	box-shadow: inset 0 -3px 0 var(--gold);
}

.wp-block-navigation:not(.has-modal-open) .wp-block-navigation-item__content:hover {
	background-color: var(--line);
	border-radius: var(--radius-small);
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 8px;
	box-shadow: var(--wp--preset--shadow--menu, 0 12px 32px rgba(7, 7, 49, 0.12));
	min-width: 240px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: var(--radius-small);
	padding: 10px 12px;
}

/* ----------------------------------------------- navigation: the overlay */

/*
 * Core switches the Navigation block to its overlay at 600px. Solkarra
 * switches at 1140px, so the 600px to 1139px range is pulled back by hand.
 * Matching Header.dc.html: a full width panel on the hero colour.
 *
 * 1140 rather than the 960 this shipped with, raised on 2026-09-22 on Lane B's
 * measurements (B-requests.md section 7). The bar never scrolled sideways when
 * it ran out of room: flexWrap is nowrap so the items shrink, core puts
 * overflow-wrap:break-word on .wp-block-navigation-item__label, and the two
 * longest labels broke onto a second line inside a 72px bar instead. At 961 the
 * navigation had 501.22px and wanted 630.73px.
 *
 * The old six item set was already short by 68.6px at 961 and first fitted at
 * about 1030, so this is not the cost of the Home, News and SolSEO items added
 * that day. They widened a hole of 69px to one of 130px.
 */
@media (min-width: 600px) and (max-width: 1139.98px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}

	.sk-header .sk-desktop-only {
		display: none;
	}
}

@media (max-width: 1139.98px) {
	.sk-header .sk-desktop-only {
		display: none;
	}
}

@media (min-width: 1140px) {
	.sk-header .sk-mobile-only {
		display: none;
	}
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--hero);
	color: var(--band-fg);
	padding: 24px var(--gutter) 40px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 700;
	font-size: 22px;
	color: var(--band-fg);
	text-decoration: none;
	padding: 12px 0;
	min-height: 44px;
	width: 100%;
	border-bottom: 1px solid var(--band-line);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 18px;
	font-weight: 600;
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--band-fg);
	min-width: 44px;
	min-height: 44px;
}

.wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
	color: var(--fg);
}

/* ------------------------------------------------------ the scheme toggle */

/* The button carries no words. The hit area is therefore set outright rather
   than grown by padding around a glyph: 44 by 44 at every width, which is the
   WCAG 2.2 target size, while the mark inside it is 20px. */
[data-scheme-toggle] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: 1px solid var(--line);
	background-color: transparent;
	color: var(--fg);
	cursor: pointer;
	position: relative;
	z-index: 1;
}

/* Hover moves the ring, never the glyph. Turning the mark gold on a light
   ground puts it back to 1.88:1 against Warm Paper, which is the contrast the
   Lane B block below exists to fix. */
[data-scheme-toggle]:hover {
	border-color: var(--gold);
}

/* A 3px ring at 3px offset on a round button is the usual casualty of an
   ancestor that clips. Nothing in the header bar may clip it. */
.sk-header__bar,
.sk-header__right {
	overflow: visible;
}

/*
 * The mark inside the button, and the sun for light against moon for dark that
 * makes the shape carry the state, belong to the Lane B block at the end of
 * this file, because the icon markup is Lane B's. Everything above is markup
 * agnostic: any element with data-scheme-toggle gets the target size, the
 * chrome and the ring, whatever it holds.
 */

/* Fallback only: a toggle with no mark of its own still shows something. */
[data-scheme-toggle]:empty::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: var(--gold);
	flex: 0 0 auto;
}

/* ------------------------------------------------------------- the tables */

/* A table wider than its band scrolls rather than being clipped. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-color: var(--line);
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
	[data-reveal] {
		transition: opacity var(--wp--custom--motion--reveal, 0.55s) ease,
			transform var(--wp--custom--motion--reveal, 0.55s) ease;
	}

	[data-reveal="out"] {
		opacity: 0;
		transform: translateY(var(--wp--custom--motion--reveal-shift, 18px));
	}
}

@keyframes sk-mq {
	to {
		transform: translateX(-50%);
	}
}

@keyframes sk-mq-r {
	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0);
	}
}

.sk-marquee {
	overflow: hidden;
}

.sk-marquee__track {
	display: flex;
	width: max-content;
	animation: sk-mq var(--wp--custom--motion--marquee, 88s) linear infinite;
}

/*
 * 129s, raised from 95s on 2026-09-22 with theme.json, because row two grew
 * from five tiles to nine. Speed is the rail's own width over its duration, so
 * a longer rail at the same duration runs faster: 3296px over 95s is 34.69px/s
 * against row one's 2304px over 75s, which is 30.72px/s, and the reverse rail
 * was outrunning the forward one at 113% of its speed. 129s brings it to
 * 25.55px/s, about 83% of row one, which is what the design draws: a slower
 * second rail. 107s is only the point at which it stops outrunning.
 *
 * 2026-10-08: row one grew from six tiles to seven and row two from nine to
 * thirteen, so both durations grew with them to hold those speeds. Row one is
 * 7 x 384px = 2688px over 88s, 30.55px/s. Row two is 12 x 384px plus the
 * 224px phone tile = 4832px over 189s, 25.57px/s. Add a tile, add its width
 * over the rail's speed to the duration.
 */
.sk-marquee--reverse .sk-marquee__track {
	animation-name: sk-mq-r;
	animation-duration: var(--wp--custom--motion--marquee-reverse, 189s);
}

.sk-marquee__track.is-paused,
.sk-marquee:hover .sk-marquee__track,
.sk-marquee:focus-within .sk-marquee__track {
	animation-play-state: paused;
}

/* One switch turns every moving part off. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal],
	[data-reveal="out"] {
		opacity: 1 !important;
		transform: none !important;
	}

	/* The rail wraps rather than turning into a scroller. A scrolling
	   container has to be reachable by keyboard, and this one has nothing to
	   focus, which is the axe rule "scrollable region must have keyboard
	   access". Wrapping keeps every tile reachable with no scroller at all,
	   and matches what the showcase pattern already does. */
	.sk-marquee {
		overflow: hidden;
	}

	.sk-marquee__track {
		animation: none !important;
		width: auto;
		flex-wrap: wrap;
	}
}

/* ---------------------------------------------------------------- layout */

/* Nothing scrolls sideways at 375, 1024 or 1440. `clip` rather than `hidden`
   so the sticky header keeps working. */
body {
	overflow-x: clip;
	max-width: 100%;
}

/* Prose keeps a reading measure without being left stranded in a wide box. */
.sk-measure {
	max-width: var(--wp--custom--measure--prose, 68ch);
}

.sk-lede {
	font-size: var(--wp--preset--font-size--lede, clamp(17px, 1.4vw, 20px));
	line-height: 1.5;
	max-width: var(--wp--custom--measure--lede, 54ch);
}

.sk-muted {
	color: var(--muted);
}

.sk-tabular {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* --------------------------------------------------- in page anchor offset */

/*
 * The header is sticky at top 0, so before this rule every in page link landed
 * with the target's eyebrow behind the bar. Fourteen anchors ship on the site
 * (#plans, #what-it-tracks, #pricing, #counter, #details, #apply, #gallery,
 * #founders, #range, #ventures, #money, #how-a-month-works, #contact, #quote)
 * and each one lost its first line.
 *
 * scroll-margin-top is the property browsers apply when they scroll an element
 * into view, whether from a fragment on load, a click on an in page link or
 * scrollIntoView, so one declaration covers all three. It costs nothing on an
 * element nobody ever scrolls to, which is why it can sit on every id inside
 * the page rather than on a hand kept list that the next section breaks.
 *
 * The admin bar sits above the header at 32px, or 46px under 782px, the same
 * pair of numbers the sticky header rule uses.
 */
.wp-site-blocks [id] {
	scroll-margin-top: var(--anchor-offset);
}

.admin-bar .wp-site-blocks [id] {
	scroll-margin-top: calc(var(--anchor-offset) + 32px);
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks [id] {
		scroll-margin-top: calc(var(--anchor-offset) + 46px);
	}
}

/* ------------------------------------------ page hero: the contact variant */

/*
 * .sk-page-hero .sk-wrap is align-items:end on purpose: on a service page the
 * aside is short and the design sits it on the hero baseline beside the H1.
 * Contact reuses that grid with a tall form card in the aside, so end alignment
 * pushed the copy column to the bottom edge of the card. Measured at 1440 on
 * the live page on 2026-09-22: the copy started at 532 while the aside started
 * at 207, which is 325px of dead space above the words.
 *
 * .sk-formsec also appears on the Clubs apply section, which is not a page
 * hero, so the two class selector is what scopes this to Contact and leaves the
 * other eight page heroes alone.
 *
 * The margin reset takes the 24px block gap off the two grid children. The grid
 * gap already separates them in both directions; without the reset the copy
 * came out 24px below the aside instead of level with it.
 */
.sk-page-hero.sk-formsec .sk-wrap {
	align-items: start;
}

.sk-page-hero.sk-formsec .sk-wrap > * {
	margin-block: 0;
}

/* ----------------------------------------- archery: the counter partner row */

/*
 * .sk-counter__partner had no rule anywhere, which was the fault. It has one
 * now, and it is start rather than the centre the house uses for a lede beside
 * a gold link.
 *
 * The reason is that the markup changed under the rule. The row this class was
 * written for was a .sk-head-split above a .sk-two-col holding one .sk-col and
 * one .sk-goldlink, and there centre was right: a 44px link sat at the top of
 * an 85px cell while the identical row 100px below it sat centred. That is
 * still what solkarra.com.au serves today.
 *
 * content/pages/archery.html no longer has that shape. The head split is gone
 * and the section is one .sk-two-col holding two .sk-col groups: a heading
 * column and a prose column. Start puts the eyebrow level with the prose it
 * labels, which is what a heading beside prose wants and what every other
 * .sk-two-col on the site already does.
 *
 * Re-measured by Lane K on 2026-09-22 against the markup in
 * content/pages/archery.html, in a Playground rather than against the live
 * page, at all three widths and with nothing else changed. Lane F2 had measured
 * the same section with centre and said it fitted, so the two readings had to
 * be separated. tools/qa/measure-counter.mjs is the instrument.
 *
 *   width   align-items: start        align-items: center
 *   1440    both first lines at 2503  eyebrow 2562, prose 2503, 59px adrift
 *   1024    both first lines at 2199  eyebrow 2271, prose 2199, 72px adrift
 *   375     single column, stacked    identical, the property does nothing
 *
 * Start is level at both multi column widths. Centre drops the eyebrow below
 * the paragraph it introduces, and it drops it further as the viewport narrows,
 * because the gap is half the difference in column height and the shorter
 * column keeps shrinking. At 375 the grid is one track, so centre buys nothing
 * there either: there is no width at which centre is the better number.
 *
 * Lane A's original note recorded 2511 against 2471, a 40px gap. The direction
 * and the fault were right and the figures have moved with the copy, so they
 * are replaced here rather than argued with.
 *
 * Written out rather than left to the .sk-two-col default so the next person to
 * read this class finds the decision instead of the silence that caused it.
 */
.sk-two-col.sk-counter__partner {
	align-items: start;
}

/* ------------------------------------------------------------------- news */

/*
 * The article programme. Templates: single.html, home.html, archive.html and
 * search.html. Articles live at /news/article-title/.
 *
 * single.html is built from the design Thomas supplied on 2026-09-22
 * ("Solkarra Blog Post Template", a claude.ai/design prototype). The prototype
 * is styled entirely inline and in a different palette, neither of which can
 * ship in a block theme, so its structure is kept and everything else is
 * rebuilt on this theme tokens. Every colour below is a scheme variable, so
 * the light and dark toggle works; the prototype was light only.
 *
 * Where a prototype colour has no honest equivalent in the locked palette, an
 * existing token stands in rather than a near miss being invented:
 *
 *   prototype   used for                     here
 *   #FBF8F2     page ground                  --bg, the same value
 *   #1F1B16     body text                    --fg, Slate Ink
 *   #1F1B16     dark CTA ground              --band, Midnight
 *   #6B6259     metadata                     --muted, Stone
 *   #4A423A     secondary prose              --fg for the standfirst, --muted
 *                                            for step detail and FAQ answers.
 *                                            No token sits between the two.
 *   #E6DED1     hairlines                    --line, Sand Line
 *   #CFC6B8     dots, text on the dark band  --line on paper, --band-muted on
 *                                            the band
 *   #7A4E12     links and eyebrows           no token. Eyebrows take --muted,
 *                                            as every other eyebrow on the
 *                                            site does. Body links take --fg
 *                                            with a gold underline, which is
 *                                            the house .sk-link shape and the
 *                                            only gold that passes on paper
 *   #D99A2B     gold rules and pills         --gold, and --gold-deep on hover
 *   #F3EDE1     tinted panels                no token. The theme has no tinted
 *                                            paper, so a panel is --card on a
 *                                            --line border, which is the
 *                                            registered card style
 *   #FFFDF8     card ground                  --card
 *   #EFE8DB     placeholder hatching         not reproduced; it marks image
 *                                            slots in a prototype
 *
 * The prototype also sets Helvetica and Arial. This theme is Montserrat and
 * Open Sans, self hosted.
 */

/* ------------------------------------------------ news: the article header */

.sk-article__top {
	padding-block: clamp(32px, 3.4vw, 40px) 0;
}

/* Home, News, the category, the article. The separator is drawn rather than
   typed, so the crumbs stay four links and a title rather than seven items. */
.sk-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: var(--wp--preset--font-size--eyebrow, 13px);
	color: var(--muted);
}

.sk-crumbs > * {
	margin-block: 0;
}

.sk-crumbs > * + *::before {
	content: "/";
	color: var(--line);
	margin-right: 8px;
}

.sk-crumbs a {
	color: var(--muted);
	text-decoration: none;
}

.sk-crumbs a:hover,
.sk-crumbs a:focus-visible {
	color: var(--fg);
	text-decoration: underline;
}

.sk-crumbs .wp-block-post-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	color: var(--fg);
}

/*
 * 800px, and left aligned rather than centred. The constrained layout centres
 * every child by default, which put the title 200px in from the breadcrumb
 * above it and the lead image below it, both of which run the full 1200. The
 * measure is the same either way; the left spine is what makes it read as one
 * column rather than three alignments.
 */
.sk-article__head {
	max-width: 800px;
	margin-top: clamp(24px, 2.5vw, 36px);
	margin-inline: 0 auto;
	display: grid;
	gap: 20px;
}

.sk-article__head > * {
	margin-block: 0;
}

/* Lane F caps .sk-h1 at 16ch, which is right for a hero and one word a line for
   an article title. Two class names, so the order the lane blocks are appended
   in cannot change the answer. */
.sk-h1.sk-article__title {
	max-width: none;
	font-size: clamp(32px, 4.5vw, 52px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}

/* The standfirst is prose, not metadata, so it keeps --fg. */
.sk-standfirst .wp-block-post-excerpt__excerpt,
.sk-standfirst p {
	margin: 0;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.5;
	color: var(--fg);
	text-wrap: pretty;
}

/* The byline is words in order: who wrote it, when, how long it takes to read,
   and whether it has been changed since. No avatar and no icons. */
.sk-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--muted);
}

.sk-byline > * {
	margin-block: 0;
}

.sk-byline > * + *::before {
	content: "\00B7";
	color: var(--line);
	margin-right: 16px;
}

.sk-byline__who,
.sk-byline__updated {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px;
}

.sk-byline__who > *,
.sk-byline__updated > * {
	margin-block: 0;
}

.sk-byline .wp-block-post-author-name {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	color: var(--fg);
}

.sk-byline a {
	color: inherit;
}

.sk-article__media {
	margin-block: clamp(28px, 3vw, 40px) 0;
}

.sk-article__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: var(--radius-band);
}

.sk-article__media figcaption {
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--eyebrow, 13px);
	color: var(--muted);
	text-align: left;
}

/* -------------------------------------------------- news: the article grid */

/*
 * 1200px of content, a 760px reading column and a 300px sidebar. 760 inside a
 * track that measures 844 at 1440 is 90% of its own column, which is what the
 * orphan column rule in CLAUDE.md asks to be measured: the column, not the
 * container. Under 1000px the sidebar drops below the article and stops being
 * sticky rather than being squeezed into a strip.
 */
.sk-article__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
	padding-block: clamp(32px, 4vw, 48px) clamp(48px, 5.5vw, 80px);
}

.sk-article__grid > * {
	margin-block: 0;
}

.sk-article__col {
	max-width: 760px;
	min-width: 0;
}

.sk-article__col > * {
	margin-block: 0;
}

/* The sidebar holds back by the sticky header height, not by the 24px the
   prototype used, or it tucks under the bar on the way up. */
.sk-article__side {
	position: sticky;
	top: var(--anchor-offset);
	display: grid;
	gap: 24px;
	min-width: 0;
}

.admin-bar .sk-article__side {
	top: calc(var(--anchor-offset) + 32px);
}

.sk-article__side > * {
	margin-block: 0;
}

@media (max-width: 999.98px) {
	.sk-article__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sk-article__col {
		max-width: none;
	}

	.sk-article__side {
		position: static;
		grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	}
}

/* -------------------------------------------------- news: the article body */

.sk-article__body {
	font-size: 18px;
	line-height: 1.7;
}

/*
 * The reading column is already the measure, and core/post-content's own
 * constrained layout carries the root side padding with it. Inside a 760px
 * column that inset every paragraph by 24px and left the words 712px wide in a
 * 760px box, which is the jog the layout rule warns about, in miniature.
 */
.sk-article__body.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

.sk-article__body > * {
	margin-block: 0 24px;
}

.sk-article__body > *:last-child {
	margin-bottom: 0;
}

.sk-article__body h2 {
	margin-block: clamp(36px, 3.4vw, 48px) 16px;
	font-size: clamp(26px, 2.4vw, 32px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.sk-article__body h3 {
	margin-block: 36px 12px;
	font-size: 23px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.sk-article__body h4 {
	margin-block: 28px 10px;
}

.sk-article__body ul,
.sk-article__body ol {
	padding-left: 24px;
	display: grid;
	gap: 10px;
}

/* A body link is ink with a gold rule under it, the same shape as .sk-link.
   Gold text on Warm Paper measures 1.88:1 and is never used for words. */
.sk-article__body a:where(:not(.wp-element-button)) {
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.sk-article__body a:where(:not(.wp-element-button)):hover,
.sk-article__body a:where(:not(.wp-element-button)):focus-visible {
	text-decoration-color: var(--gold-deep);
}

.sk-article__body figure {
	margin-block: 36px;
}

.sk-article__body img {
	height: auto;
	border-radius: var(--radius-card);
}

.sk-article__body figcaption {
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--muted);
	text-align: left;
}

/* The pull quote: a gold rule on the left, Montserrat, the attribution under
   it in ordinary weight. core/quote prints the attribution as a cite. */
.sk-article__body blockquote {
	margin-block: 32px;
	padding: 8px 0 8px 28px;
	border-left: 4px solid var(--gold);
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: -0.01em;
	font-weight: 700;
	text-wrap: pretty;
}

.sk-article__body blockquote p {
	margin-block: 0;
}

.sk-article__body blockquote cite,
.sk-article__body blockquote footer {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	color: var(--muted);
}

/* Every table sits in a scroller, and the scrollbar is drawn rather than left
   as a fading overlay. core/table already wraps the table in a figure. */
.sk-article__body .wp-block-table {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

.sk-article__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.sk-article__body table caption,
.sk-article__body .wp-block-table figcaption {
	text-align: left;
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--muted);
	padding-bottom: 10px;
}

.sk-article__body thead tr {
	text-align: left;
	border-bottom: 2px solid var(--fg);
}

.sk-article__body th {
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	text-align: left;
}

.sk-article__body td {
	padding: 12px;
	border-bottom: 1px solid var(--line);
}

/* ------------------------------------------ news: the pieces of an article */

/*
 * The three line summary at the top, headed TL;DR (Thomas, 2026-09-22). The
 * prototype tints it #F3EDE1; the palette has no tinted paper, so it is a card
 * on a hairline instead, which is the registered is-style-solkarra-card.
 */
.sk-tldr {
	padding: 24px 28px;
	margin-bottom: 40px;
}

.sk-tldr > * {
	margin-block: 0;
}

.sk-tldr ul {
	margin-top: 12px;
	padding-left: 20px;
	display: grid;
	gap: 8px;
	font-size: 17px;
}

/* The table of contents: anchor links to the H2 ids, which the header offset
   above already keeps clear of the sticky bar. */
.sk-toc {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 20px 24px;
	margin-bottom: 44px;
	font-size: 16px;
}

.sk-toc > * {
	margin-block: 0;
}

.sk-toc ol {
	margin-top: 10px;
	padding-left: 22px;
	display: grid;
	gap: 0;
}

/*
 * The 44px target, applied where a link is a row of navigation rather than a
 * word inside a sentence: the breadcrumb, the byline, the contents list and the
 * share row. A link inside a paragraph keeps the line box it is written into,
 * which is the inline exception SC 2.5.8 makes and what .sk-link already does
 * everywhere else on the site.
 */
.sk-crumbs a,
.sk-byline a,
.sk-toc a,
.sk-share a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.sk-toc p:first-child {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
}

/* Numbered steps. The list is an ordered list, so the order is in the markup;
   the number a reader sees is drawn from the counter that list already has. */
.sk-article__body .sk-numsteps {
	list-style: none;
	padding-left: 0;
	counter-reset: sk-step;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

/*
 * .sk-numsteps rather than .sk-steps: Lane F already owns .sk-steps for the
 * process-steps pattern, where it is a three across grid. The two names met in
 * base.css and the article's numbered list came out as two columns of 339px.
 *
 * The number is placed rather than made a grid cell. A list item written in the
 * editor is a bold lead-in and then a bare run of text, which are two grid
 * items, so a two track grid puts the number and the lead-in on one row and
 * drops the sentence onto the next one under the number.
 */
.sk-numsteps li {
	counter-increment: sk-step;
	position: relative;
	padding: 18px 20px 18px 64px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background-color: var(--card);
}

.sk-numsteps li::before {
	content: counter(sk-step, decimal-leading-zero);
	position: absolute;
	left: 20px;
	top: 22px;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-size: var(--wp--preset--font-size--eyebrow, 13px);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.sk-numsteps li strong {
	display: block;
	margin-bottom: 4px;
}

/* Two figures side by side. */
.sk-figpair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 16px;
}

.sk-figpair figure {
	margin: 0;
}

/* The inline product card. is-style-solkarra-band paints it, so the ground,
   the text colour and the focus ring all come from the band tokens and it
   works in both schemes. */
.sk-inlinecta {
	margin-block: 40px;
	padding: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
}

.sk-inlinecta > * {
	margin-block: 0;
}

.sk-inlinecta__text {
	display: grid;
	gap: 6px;
	max-width: 440px;
}

.sk-inlinecta__text > * {
	margin-block: 0;
}

.sk-inlinecta__line {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-size: 20px;
	line-height: 1.35;
	font-weight: 700;
}

/* The FAQ, as core/details blocks: a real disclosure control with a summary. */
.sk-faq {
	margin-top: 56px;
}

.sk-faq > * {
	margin-block: 0;
}

.sk-faq h2 {
	margin-block: 0 12px;
}

.sk-faq .wp-block-details {
	border-bottom: 1px solid var(--line);
}

.sk-faq .wp-block-details:first-of-type {
	border-top: 1px solid var(--line);
}

.sk-faq summary {
	padding-block: 20px;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-size: 19px;
	font-weight: 700;
	cursor: pointer;
	min-height: 44px;
}

.sk-faq .wp-block-details > *:not(summary) {
	margin-block: 0 20px;
	font-size: 17px;
	color: var(--muted);
}

/* The author card at the foot. */
.sk-authorcard {
	margin-top: 56px;
	padding: 28px;
	display: grid;
	gap: 8px;
}

.sk-authorcard > * {
	margin-block: 0;
}

.sk-authorcard .wp-block-post-author-name {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-size: 20px;
	font-weight: 700;
	color: var(--fg);
}

.sk-authorcard .wp-block-post-author-biography {
	font-size: 16px;
	line-height: 1.6;
	color: var(--muted);
}

/* Tags as pills, share links as words. */
.sk-article__foot {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
}

.sk-article__foot > * {
	margin-block: 0;
}

.sk-tags .wp-block-post-terms__separator {
	display: none;
}

.sk-tags a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	margin: 0 6px 6px 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill, 999px);
	font-size: var(--wp--preset--font-size--eyebrow, 13px);
	color: var(--fg);
	text-decoration: none;
}

.sk-tags a:hover,
.sk-tags a:focus-visible {
	border-color: var(--gold);
}

.sk-share {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: var(--wp--preset--font-size--small, 14px);
}

.sk-share > * {
	margin-block: 0;
}

/* ------------------------------------------------------- news: the sidebar */

.sk-sidecard {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 22px;
	display: grid;
	gap: 14px;
	align-content: start;
}

.sk-sidecard > * {
	margin-block: 0;
}

/* The related list: a small square of the article picture and its title. */
.sk-relatedlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.sk-relatedlist > li {
	margin: 0;
}

.sk-relatedcard {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
}

.sk-relatedcard > * {
	margin-block: 0;
}

.sk-relatedcard__media img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius-small);
}

.sk-relatedcard__title {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.4;
	font-weight: 700;
}

/* A card title is the card's only link, so it carries the 44px target. */
.sk-relatedcard__title a {
	color: var(--fg);
	text-decoration: none;
	display: flex;
	align-items: center;
	min-height: 44px;
}

.sk-relatedcard__title a:hover,
.sk-relatedcard__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.sk-sidecta__line {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.sk-sidecta__note {
	font-size: var(--wp--preset--font-size--small, 14px);
	line-height: 1.55;
	color: var(--muted);
}

/* ---------------------------------------------------- news: lists of posts */

/*
 * Three across at 1200, two on a tablet, one on a phone. The card is the
 * registered group style, so the ground, the border and the radius all come
 * from there.
 *
 * auto-fit, not auto-fill. auto-fill keeps the empty tracks, so a list holding
 * one article left a 276px card in a 1200px row with 920px of nothing beside
 * it, which is the orphan column the layout rule forbids and which the QA
 * guard caught on the News page. auto-fit collapses the empty tracks, so one
 * article fills the row and two take half each.
 *
 * 320px rather than 260px as the track minimum, so 1200 makes three tracks and
 * not four: 1200 over 260 is 4.6 and the band under an article is drawn as a
 * row of three.
 */
.sk-postlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(24px, 2.6vw, 32px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sk-postlist > li {
	margin: 0;
}

.sk-postcard {
	display: grid;
	gap: 12px;
	align-content: start;
	height: 100%;
	padding: 20px;
}

.sk-postcard > * {
	margin-block: 0;
}

/* max-height, because a card that has stretched to the full 1200 would
   otherwise carry an 800px tall picture. */
.sk-postcard__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 260px;
	object-fit: cover;
	border-radius: var(--radius-card);
}

.sk-postcard__meta {
	font-size: var(--wp--preset--font-size--eyebrow, 13px);
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.sk-postcard__meta > * {
	margin-block: 0;
}

.sk-postcard__meta a {
	color: inherit;
}

.sk-postcard__title {
	font-size: 19px;
	line-height: 1.3;
	text-wrap: pretty;
}

.sk-postcard__title a {
	text-decoration: none;
	display: flex;
	align-items: center;
	min-height: 44px;
}

.sk-postcard__title a:hover,
.sk-postcard__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.sk-postcard__excerpt {
	font-size: 15px;
	color: var(--muted);
}

.sk-postcard__excerpt > * {
	margin-block: 0;
}

/* The band under the article. The prototype tints it; the palette has no
   tinted paper, so it is marked off with a rule instead, the same way
   .sk-clubline marks a band on the archery page. */
.sk-morenews {
	border-top: 1px solid var(--line);
	padding-block: clamp(40px, 4.7vw, 56px);
}

.sk-morenews .sk-newshead {
	margin-block-end: 28px;
}

/* ------------------------------------------------ news: heads and controls */

.sk-newshead {
	display: grid;
	gap: 16px;
	max-width: var(--measure-article, 760px);
	margin-block-end: clamp(32px, 3.4vw, 48px);
}

.sk-newshead > * {
	margin-block: 0;
}

.sk-pagination {
	margin-top: clamp(32px, 3.4vw, 48px);
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 600;
	font-size: 15px;
}

.sk-pagination a,
.sk-pagination .page-numbers {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sk-pagination .page-numbers.current {
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.sk-searchform {
	max-width: var(--measure-article, 760px);
}

.sk-searchform .wp-block-search__input {
	border: 1px solid var(--line);
	border-radius: var(--radius-small);
	background-color: var(--card);
	color: var(--fg);
	padding: 12px 14px;
	min-height: 44px;
}

.sk-noresults {
	max-width: var(--measure-article, 760px);
}

.sk-noresults > * {
	margin-block: 0 16px;
}

@media (max-width: 599.98px) {
	.sk-article__body {
		font-size: 17px;
	}

	.sk-article__body blockquote {
		font-size: 21px;
		padding-left: 20px;
	}

	.sk-numsteps li {
		padding-left: 20px;
		padding-top: 38px;
	}

	.sk-numsteps li::before {
		top: 16px;
	}

	.sk-relatedcard {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.sk-relatedcard__media img {
		width: 56px;
		height: 56px;
	}

	/* 21:9 across 327px is a 140px strip with nothing readable in it. */
	.sk-article__media img {
		aspect-ratio: 16 / 9;
	}
}

/* ================================================================ Lane B */
/* Header, footer and closing CTA. Markup in parts/ and patterns/closing-cta.php. */

/* ------------------------------------------------------- header: the bar */

.sk-header__bar {
	max-width: 1248px;
	margin-inline: auto;
}

.sk-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	text-decoration: none;
	color: var(--fg);
}

.sk-brand__mark {
	width: 48px;
	height: auto;
	display: block;
	flex: 0 0 auto;
}

/* The navigation sits left of the toggle on desktop. Under 1140 the bar is
   brand, toggle, hamburger, as Header.dc.html has it, and the hamburger lives
   inside the nav element, so the two swap by flex order rather than by markup.
   Raised from 960 with the overlay switch on 2026-09-22; the two have to be the
   same number or there is a band with a hamburger in the wrong place. */
@media (max-width: 1139.98px) {
	.sk-header__right .sk-scheme-toggle {
		order: 1;
	}

	.sk-header__right .sk-nav {
		order: 2;
	}
}

/* ------------------------------------------- the scheme toggle, icon only */

/* Thomas dropped the visible Dark and Light words on 2026-09-21. The button is
   now a 44 by 44 target holding one of two icons. The gold dot that
   [data-scheme-toggle]::before draws is the old indicator and is switched off
   here, because the icon is the indicator now. */
.sk-scheme-toggle[data-scheme-icon]::before {
	content: none;
}

.sk-scheme-toggle[data-scheme-icon] {
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	gap: 0;
	justify-content: center;
	/* SC 1.4.11 Non-text Contrast, 3:1. While the button carried the word Dark
	   the text did the work and the gold dot was decoration. With the word gone
	   the glyph is the only indicator, so it has to clear 3:1 against the ground
	   on its own. Solar Gold on Warm Paper is 1.88:1 and fails. Slate Ink on
	   Warm Paper is the pair the brand guide already lists as passing, and the
	   guide's own contrast note rules out Solar Gold for small marks on a light
	   ground, so this is the locked guide rather than a departure from it. */
	color: var(--fg);
}

/* On Midnight the gold clears 3:1 with room to spare, so the accent keeps the
   one ground where it works. */
html[data-scheme="dark"] .sk-scheme-toggle[data-scheme-icon] {
	color: var(--gold);
}

/* Hover stays on the ring, which is where it was before the icon arrived.
   Turning the glyph gold on hover would put the light scheme straight back to
   1.88:1, so the glyph does not move. */

.sk-scheme-toggle__icon {
	display: block;
	width: 20px;
	height: 20px;
}

/* The shape carries the state, not the colour. Sun while the light scheme is
   on, moon while the dark scheme is on, matching aria-pressed rather than
   contradicting it. WCAG 1.4.1: colour is never the only signal. */
html[data-scheme="dark"] .sk-scheme-toggle__icon--sun,
html:not([data-scheme="dark"]) .sk-scheme-toggle__icon--moon {
	display: none;
}

/* --------------------------------------------- navigation: resting state */

.sk-nav .wp-block-navigation-item__content {
	padding: 0 12px;
	border-radius: var(--radius-small);
}

.sk-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	width: 100%;
}

/* The venture accent dot in the Shops submenu. */
.sk-nav-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
	margin-right: 10px;
	background-color: var(--muted);
}

.sk-nav-dot--archery {
	background-color: var(--wp--preset--color--accent-archery, #9C6B3F);
}

.sk-nav-dot--aromatics {
	background-color: var(--wp--preset--color--accent-aromatics, #6E8B6A);
}

.sk-nav-dot--ais {
	background-color: var(--wp--preset--color--accent-ais, #2E7D8A);
}

/* ------------------------------------- navigation: Get a quote in the overlay */

.wp-block-navigation__responsive-container.is-menu-open .sk-nav-cta {
	margin-top: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .sk-nav-cta .wp-block-navigation-item__content {
	background-color: var(--gold);
	color: #070731;
	border-bottom: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	min-height: 52px;
	padding: 0 22px;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
}

.wp-block-navigation__responsive-container.is-menu-open .sk-nav-cta .wp-block-navigation-item__content:hover {
	background-color: var(--gold-deep);
	color: #070731;
}

/* ------------------------------------------------------------- the footer */

/* The footer stays on Midnight in both schemes, so it reads its colours from
   the palette presets rather than from the scheme variables. */
.sk-footer {
	padding-top: clamp(56px, 5.5vw, 80px);
	padding-bottom: 32px;
}

.sk-footer__inner {
	max-width: 1248px;
	margin-inline: auto;
	display: grid;
	gap: 48px;
}

.sk-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 40px;
}

.sk-footer__brand {
	display: grid;
	gap: 16px;
	align-content: start;
}

.sk-footer__mark {
	margin: 0;
}

.sk-footer__word {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.08em;
}

.sk-footer__desc {
	margin: 0;
	max-width: 28ch;
}

.sk-footer__col {
	display: grid;
	gap: 10px;
	align-content: start;
}

.sk-footer__coltitle,
.sk-footer__partnerstitle {
	margin: 0;
}

.sk-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.sk-footer__links a {
	font-size: 15px;
	color: var(--wp--preset--color--dark-fg, #EEEAE0);
	text-decoration: none;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}

.sk-footer__links a:hover,
.sk-footer__links a:focus-visible {
	color: var(--wp--preset--color--gold, #F2A93B);
	text-decoration: underline;
}

.sk-footer__partners {
	border-top: 1px solid var(--wp--preset--color--dark-line, #26265f);
	padding-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: center;
}

.sk-footer__partnerstitle {
	min-width: 96px;
}

/* A bordered box holding the partner name. Swap the text for a mark when
   Lane C has one; the box keeps its size. */
.sk-partner {
	margin: 0;
}

.sk-partner a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 140px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--dark-line, #26265f);
	border-radius: var(--radius-small);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 600;
	font-size: 13px;
	color: var(--wp--preset--color--dark-muted, #A49E90);
}

.sk-partner a:hover,
.sk-partner a:focus-visible {
	border-color: var(--wp--preset--color--gold, #F2A93B);
	color: var(--wp--preset--color--dark-fg, #EEEAE0);
}

.sk-footer__legal {
	border-top: 1px solid var(--wp--preset--color--dark-line, #26265f);
	padding-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: center;
	justify-content: space-between;
}

.sk-social {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sk-social a {
	border: 1px solid var(--wp--preset--color--dark-line, #26265f);
	border-radius: var(--wp--custom--radius--pill, 999px);
	padding: 0 14px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--wp--preset--color--dark-fg, #EEEAE0);
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 600;
	font-size: 13px;
}

.sk-social a:hover,
.sk-social a:focus-visible {
	border-color: var(--wp--preset--color--gold, #F2A93B);
}

.sk-footer__legaltext {
	display: grid;
	gap: 6px;
}

.sk-footer__legaltext p {
	margin: 0;
}

.sk-footer__legaltext a {
	color: var(--wp--preset--color--dark-fg, #EEEAE0);
}

/* ------------------------------------------------------- the closing CTA */

.sk-closing-cta__card {
	max-width: 1200px;
	margin-inline: auto;
	background-color: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-band);
	padding: clamp(32px, 4vw, 56px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 32px;
	align-items: center;
}

.sk-closing-cta__text {
	display: grid;
	gap: 16px;
}

.sk-closing-cta__text h2 {
	margin: 0;
}

.sk-closing-cta__lede {
	margin: 0;
	font-size: 17px;
	max-width: 46ch;
}

.sk-closing-cta__action {
	display: grid;
	gap: 12px;
	justify-items: start;
}

.sk-closing-cta__note {
	margin: 0;
}

/* ------------------------------------------- flow layout margins, switched off */

/* Every group below is a grid or a flex row, and core's flow layout also gives
   each of their children a 24px margin-block-start from the global block gap.
   Measured in Playground: the footer columns were sitting 64px apart instead of
   40, and the footer's own sections 72px apart instead of 48. The gap is the
   spacing; the margin is a second helping of it. */
.sk-footer__inner > *,
.sk-footer__cols > *,
.sk-footer__brand > *,
.sk-footer__col > *,
.sk-footer__partners > *,
.sk-footer__legal > *,
.sk-footer__legaltext > *,
.sk-closing-cta__card > *,
.sk-closing-cta__text > *,
.sk-closing-cta__action > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Core prints the Navigation block stylesheet after this file, and writes its
   colours as .wp-block-navigation:not(.has-background) .thing, which is one class
   more than the theme's. Adding .sk-header in front takes each rule back. */

.sk-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--hero);
	color: var(--band-fg);
	padding: 24px var(--gutter) 40px;
}

/* The Shops dropdown, scoped to the closed overlay so the open overlay keeps the
   transparent submenu it already has. */
.sk-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	background-color: var(--card);
	color: var(--fg);
	border-color: var(--line);
}

.sk-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--fg);
	padding: 10px 12px;
}

/* Core sets the dropdown floor from its own aria-expanded rule, which carries five
   classes. This mirrors that selector with one more. */
.sk-header .sk-nav .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	min-width: 240px;
}

/* ---------------------------------------- the overlay menu, rows and submenu */

/* Rows stretch, so each divider spans the column rather than stopping at the end
   of the label. Border box, or the Get a quote pill's 22px of padding is added
   outside its 100% width and the pill runs past the right gutter. */
/* width:100% as well as align-items. The list is a flex item in a column flex
   container whose align-items is flex-start, so without the width it is sized to
   its longest label rather than to the column, and every divider stops wherever
   that label happens to end. That looked correct only while the longest label was
   "SEO & Business Management", which measured 327px and matched the column by
   coincidence. Shortening it to "SEO & Marketing" dropped the list to 240px and
   exposed it. align-items stretches the rows inside the list; the width stretches
   the list itself. Both are needed. */
.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
}

.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	box-sizing: border-box;
}

/* Shops is the gold eyebrow above its three shops, as Header.dc.html has it. Core
   keeps submenus open inside the overlay, so the toggle is a label there. */
.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--eyebrow, 13px);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	border-bottom: 0;
}

.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* Core's own overlay submenu rule carries five classes and indents the shops by
   32px. These two mirror it with six. The divider moves to the foot of the group,
   which is where the prototype draws it. */
.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	width: 100%;
	padding: 0 0 12px;
	gap: 2px;
	border-bottom: 1px solid var(--band-line);
}

.sk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0;
}

.sk-header .wp-block-navigation__responsive-container.is-menu-open .sk-nav-cta .wp-block-navigation-item__content {
	display: flex;
	justify-content: center;
}

/* Core's .wp-block-navigation .wp-block-navigation-item__content{display:block} is
   printed after this file and carries two classes, so the touch target rule's
   display never applies, its align-items has nothing to centre, and the label sits
   at the top of a 44px block box. Three classes takes it back. The submenu parent
   looks right without this only because a button centres its own content box.

   The padding is here rather than left to the existing rules because core also
   overrides the toggle specifically, with 0.85em on the right and nothing on the
   left. The chevron is a sibling span flush with the item's right edge and carries
   margin-left:-8.4px, so it needs the matching padding of its own. */
.sk-header .sk-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding: 0 12px;
}

.sk-header .sk-nav .wp-block-navigation__submenu-icon {
	padding-right: 12px;
}

/*
 * The tighter item padding, retargeted on 2026-09-22 when the overlay moved to
 * 1140. It used to be `max-width: 1100px`, which after the move sat entirely
 * inside the overlay range, where the bar navigation is not on screen at all
 * and the only thing it still did was quietly narrow the overlay rows.
 *
 * It is not deleted, because the band it is needed in moved rather than
 * disappearing. The bar is `max-width: 1248px` with 24px of padding each side,
 * so above 1248 its content box is pinned at 1200 and 12px padding has 124.5px
 * to spare. Below that the content box shrinks with the viewport, and at the
 * new narrowest desktop width, 1140, twelve px padding needs 1075.5px of a
 * 1077px box: 1.5px, which is luck rather than slack. At 9px the same bar needs
 * 1027.5px and has 49.5px in hand.
 *
 * So the step now covers exactly the band where the desktop bar is showing and
 * is being squeezed, and stops at the width where the bar stops shrinking.
 */
@media (min-width: 1140px) and (max-width: 1247.98px) {
	.sk-header .sk-nav .wp-block-navigation-item__content,
	.sk-nav .wp-block-navigation-item__content {
		padding: 0 9px;
	}

	.sk-header .sk-nav .wp-block-navigation__submenu-icon {
		padding-right: 9px;
	}
}


/* ================================================================ Lane F */
/*
 * Lane F: the Home and Websites section styles.
 *
 * This is the canonical copy. Until it is appended to assets/css/base.css the
 * same rules ride inside each pattern in a core/html <style> block, so a
 * pattern works on its own on the front end. They do not reach the editor
 * canvas, which only loads base.css, so the director sees unstyled sections
 * while editing. Appending this file fixes that; the inline blocks can then
 * be deleted in one sweep (see F-requests.md).
 *
 * Every colour is a scheme variable from base.css or a theme.json preset, with
 * the light value as the fallback. Nothing new is defined here.
 */

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

.sk-h1 {
	max-width: 16ch;
	text-wrap: balance;
}

.sk-h2 {
	text-wrap: balance;
}

/* The 1200px column, for a section that carries it itself rather than letting
   a constrained layout centre every child inside it. */
.sk-wrap {
	max-width: 1200px;
	margin-inline: auto;
}

.sk-mono {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--muted, #6B6659);
}

.sk-strong {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	font-size: 15px;
}

/* ------------------------------------------------------------ frames --- */

/* The browser and phone chrome used by every screenshot frame. */
.sk-frame {
	border: 1px solid var(--line, #EAE1D2);
	border-radius: 12px;
	overflow: hidden;
	background: var(--card, #FFFFFF);
}

.sk-frame > * {
	margin-block: 0;
}

.sk-frame--phone {
	border-radius: 28px;
}

.sk-frame--lg {
	border-radius: var(--radius-card, 16px);
}

/* The image block carries a 16px radius from theme.json. Inside a frame the
   frame owns the corners, so the screenshot is square. */
.sk-frame img {
	border-radius: 0;
}

.sk-bar {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	min-height: 37px;
	display: flex;
	align-items: center;
	padding: 10px 12px 10px 56px;
	border-bottom: 1px solid var(--line, #EAE1D2);
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--muted, #6B6659);
}

.sk-bar::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 8px;
	background:
		radial-gradient(circle 4px at 4px 4px, var(--line, #EAE1D2) 98%, rgba(0, 0, 0, 0)),
		radial-gradient(circle 4px at 16px 4px, var(--line, #EAE1D2) 98%, rgba(0, 0, 0, 0)),
		radial-gradient(circle 4px at 28px 4px, var(--line, #EAE1D2) 98%, rgba(0, 0, 0, 0));
}

.sk-bar--phone {
	padding-left: 12px;
	justify-content: center;
}

.sk-bar--phone::before {
	position: static;
	transform: none;
	width: 56px;
	height: 6px;
	border-radius: 3px;
	background: var(--line, #EAE1D2);
}

.sk-frame--lg .sk-bar {
	min-height: 44px;
	padding: 12px 16px 12px 60px;
}

.sk-frame--lg .sk-bar::before {
	left: 16px;
}

.sk-shot-wrap {
	margin: 0;
}

.sk-shot,
.sk-shot-ph,
.sk-shot-wrap img {
	display: block;
	width: 100%;
	height: 220px;
	background: var(--card, #FFFFFF);
}

.sk-shot,
.sk-shot-wrap img {
	object-fit: cover;
	object-position: top center;
	border-radius: 0;
}

/* --------------------------------------------------------- headsplit --- */

/* A heading on the left, one line of context on the right. */
.sk-head-split {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	align-items: flex-end;
	justify-content: space-between;
}

.sk-head-split > * {
	margin-block: 0;
}

.sk-head-left {
	display: grid;
	gap: 14px;
	align-content: start;
}

/* The measure sits on the heading, never on the wrapper. A ch is relative to
   the element's own font size, so 22ch on a 16px wrapper is 201px and the
   heading comes out one word wide; on the 42px heading it is the 460px the
   design asks for. */
.sk-head-left .sk-h2 {
	max-width: 22ch;
}

.sk-head-left > * {
	margin-block: 0;
}

.sk-head-note {
	max-width: 40ch;
	font-size: 15px;
}

/* ------------------------------------------------------------ twocol --- */

/* Two columns that become one under about 660px. */
.sk-two-col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.sk-two-col > * {
	margin-block: 0;
}

.sk-col {
	display: grid;
	gap: 16px;
	align-content: start;
}

.sk-col > * {
	margin-block: 0;
}

.sk-col__lede {
	max-width: 46ch;
}

/* ------------------------------------------------------------ onband --- */

/* A midnight surface sitting on the light ground flips the neutral tokens the
   same way Lane A's band style does, so nothing inside needs its own colour. */
.sk-on-band {
	--card: var(--band-card);
	--line: var(--band-line);
	--muted: var(--band-muted);
	--fg: var(--band-fg);
	color: var(--band-fg);
}

.sk-on-band :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

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

.sk-hero > *:not(.sk-hero-sun) {
	position: relative;
	z-index: 1;
	margin-block: 0;
}

/*
 * A constrained layout gives every direct child `margin-left: auto` and
 * `margin-right: auto`, both !important, so a heading that carries a 15ch
 * measure ends up centred in the page. The wrapper is the direct child and
 * fills the column; the measures live inside it, where nothing centres them.
 */
.sk-hero__copy {
	max-width: min(100%, 640px);
}

.sk-hero__copy > * {
	margin-block: 0;
}

.sk-hero__copy .is-style-solkarra-eyebrow {
	margin-bottom: 20px;
}

.sk-hero .sk-h1 {
	max-width: 15ch;
}

.sk-hero__copy .sk-lede {
	margin-top: 24px;
}

.sk-hero-sun {
	display: block;
	margin: 0;
	position: absolute;
	right: -4%;
	top: -14%;
	width: clamp(320px, 36vw, 540px);
	max-width: 60vw;
	height: auto;
	border-radius: 0;
	z-index: 0;
	pointer-events: none;
}

.sk-doors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 16px;
	margin-top: clamp(40px, 4vw, 64px);
}

.sk-doors > * {
	margin-block: 0;
}

.sk-door {
	position: relative;
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 28px;
	border-radius: var(--radius-card, 16px);
	background: var(--band-card, #0d0d47);
	border: 1px solid var(--band-line, #26265f);
	transition: transform var(--wp--custom--motion--hover, 0.2s) ease,
		border-color var(--wp--custom--motion--hover, 0.2s) ease;
}

.sk-door > * {
	margin-block: 0;
}

.sk-door:hover,
.sk-door:focus-within {
	border-color: var(--gold, #F2A93B);
}

.sk-door:hover {
	transform: translateY(-3px);
}

.sk-door :where(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

/* The heading link covers the card, so the whole door is clickable while the
   link text stays the thing a screen reader announces. */
.sk-door :where(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sk-door :where(h2, h3, h4) a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gold, #F2A93B);
}

.sk-door :where(h2, h3, h4) {
	font-size: 22px;
	line-height: 1.25;
}

.sk-door p {
	font-size: 15px;
	line-height: 1.5;
}

.sk-door .is-style-solkarra-eyebrow {
	margin-bottom: 0;
	font-size: 12px;
}

.sk-door::after {
	/* The literal arrow, not a CSS escape. WordPress unslashes post content
	   on the way in, so a backslash escape arrives in the browser as the
	   four characters 2192. */
	content: "→";
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: var(--gold, #F2A93B);
}

@media (max-width: 959.98px) {
	.sk-hero-sun {
		display: none;
	}

	/* With the sun gone there is nothing to leave room for. */
	.sk-hero__copy {
		max-width: none;
	}
}

/* -------------------------------------------------- showcase-marquee --- */

/*
 * The pause control. SC 2.2.2 Pause, Stop, Hide is Level A and asks for a
 * mechanism to stop moving content that starts on its own, runs past five
 * seconds and carries information. These tiles carry information: each one
 * names a project and says what we did for it.
 *
 * Hover was not that mechanism for a keyboard user, and the :focus-within half
 * of it could never fire, because nothing inside either rail is focusable.
 * prefers-reduced-motion helps the people who have set it and does nothing for
 * anyone who has not.
 *
 * It is a checkbox rather than a button so the mechanism needs no JavaScript at
 * all. A Level A mechanism should not be able to vanish because a script failed
 * to load. The input is off screen but still focusable and still operable with
 * Space; the label is the visible control and wears the focus ring. Styled to
 * match the header's scheme toggle, being the same kind of small utility
 * control.
 */
.sk-mq-pause {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.sk-mq-pause-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--line, #EAE1D2);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: transparent;
	color: var(--fg, #23262E);
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	/* Line the control up with the left edge of the 1200px column, inside a
	   rail wrapper that is deliberately full bleed. */
	margin-left: max(24px, calc((100% - 1200px) / 2));
}

.sk-mq-pause-label:hover {
	border-color: var(--gold, #F2A93B);
}

.sk-mq-pause:focus-visible ~ .sk-mq-pause-label {
	outline: var(--wp--custom--focus--width, 3px) solid var(--gold, #F2A93B);
	outline-offset: var(--wp--custom--focus--offset, 3px);
}

/*
 * The label and the glyph both stay put. A first cut swapped the glyph to a
 * play triangle once paused, which put a play arrow next to the words "Pause
 * the showcase" and read as a contradiction, and swapping the words with it
 * would have changed the accessible name so the control announced "Play the
 * showcase, checked" while the showcase was stopped. Instead the pill fills,
 * the way a toggle that is engaged should look. Midnight on Solar Gold is
 * 9.70:1.
 */
.sk-mq-pause-label::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 12px;
	background: linear-gradient(to right,
		currentColor 0 4px,
		rgba(0, 0, 0, 0) 4px 6px,
		currentColor 6px 10px);
	color: var(--gold, #F2A93B);
}

.sk-mq-pause:checked ~ .sk-mq-pause-label {
	background: var(--gold, #F2A93B);
	border-color: var(--gold, #F2A93B);
	color: var(--wp--preset--color--midnight, #070731);
}

.sk-mq-pause:checked ~ .sk-mq-pause-label::before {
	color: var(--wp--preset--color--midnight, #070731);
}

.sk-mq-pause:checked ~ .sk-marquee-rows .sk-marquee__track {
	animation-play-state: paused;
}

/* With motion off the rails do not move, so there is nothing to pause and the
   control would be a tab stop that does nothing. */
@media (prefers-reduced-motion: reduce) {
	.sk-mq-pause,
	.sk-mq-pause-label {
		display: none;
	}
}

.sk-marquee-rows {
	margin-top: 24px;
	display: grid;
	gap: 24px;
}

.sk-marquee-rows > * {
	margin-block: 0;
}

.sk-marquee__set {
	display: flex;
	gap: 24px;
	padding-right: 24px;
}

.sk-tile {
	display: grid;
	gap: 12px;
	width: min(360px, 86vw);
}

.sk-tile--phone {
	width: min(200px, 52vw);
}

.sk-tile__meta {
	display: grid;
	gap: 4px;
	padding: 0 4px;
}

.sk-tile__name {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.25;
}

.sk-tile__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
	display: inline-block;
}

.sk-tile__did {
	margin: 0;
	font-size: 14px;
	color: var(--muted, #6B6659);
}

/*
 * With motion off the rail stops moving. base.css then lets it scroll
 * sideways, which axe reports as a scrollable region with no keyboard access,
 * and the alternative, leaving it clipped, would hide three of the six stores
 * from exactly the readers who cannot watch them drift past. So the rail wraps
 * into rows instead: nothing scrolls, nothing is clipped, nothing is hidden,
 * and the duplicate half of the loop goes, because it is only there to make
 * the seam invisible while it moves.
 */
@media (prefers-reduced-motion: reduce) {
	.sk-marquee-rows .sk-marquee {
		overflow: hidden;
	}

	.sk-marquee-rows .sk-marquee__track {
		width: auto;
		flex-wrap: wrap;
		gap: 24px;
	}

	.sk-marquee-rows .sk-marquee__set {
		flex-wrap: wrap;
		padding-right: 0;
	}

	.sk-marquee-rows .sk-marquee__set[aria-hidden="true"] {
		display: none;
	}
}

/* -------------------------------------------------------- two-halves --- */

.sk-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 1px;
	background: var(--line, #EAE1D2);
	border: 1px solid var(--line, #EAE1D2);
	border-radius: var(--radius-band, 20px);
	overflow: hidden;
}

.sk-split > * {
	margin-block: 0;
}

.sk-half {
	background: var(--card, #FFFFFF);
	padding: clamp(32px, 3.3vw, 48px);
	display: grid;
	gap: 20px;
	align-content: start;
}

.sk-half > * {
	margin-block: 0;
}

.sk-half h2 {
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.15;
}

.sk-dotlist {
	list-style: none;
	margin: 0;
	padding-left: 0;
	display: grid;
	gap: 12px;
}

.sk-dotlist li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.sk-dotlist li::before {
	content: "";
	flex: 0 0 10px;
	height: 10px;
	margin-top: 9px;
	border-radius: 50%;
	background: var(--muted, #6B6659);
}

.sk-dot--archery::before {
	background: var(--wp--preset--color--accent-archery, #9C6B3F);
}

.sk-dot--aromatics::before {
	background: var(--wp--preset--color--accent-aromatics, #6E8B6A);
}

.sk-dot--ais::before {
	background: var(--wp--preset--color--accent-ais, #2E7D8A);
}

/* ------------------------------------------------------ proof-numbers --- */

.sk-proof .sk-h2 {
	max-width: 20ch;
}

/*
 * Eight figures, once the two dashed slots came out. The 260px minimum gives
 * four columns in the 1200px column, so eight lands as a clean 4 plus 4. At
 * 1024 it gives three, so the last row carries two of the eight and one cell is
 * empty: mild, and better than the 3, 3, 3, 1 the band produced while the two
 * slots were still in it. A 216px minimum would give four columns at both
 * widths if the trailing gap is ever judged worth a 220px column at 1024.
 */
.sk-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 40px 32px;
	margin-top: clamp(40px, 4vw, 64px);
}

.sk-stats > * {
	margin-block: 0;
}

.sk-stat {
	display: grid;
	gap: 8px;
	align-content: start;
	border-top: 1px solid var(--line, #EAE1D2);
	padding-top: 20px;
}

.sk-stat > * {
	margin-block: 0;
}

.sk-stat__pre {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--muted, #6B6659);
}

.sk-stat__n {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--stat, clamp(48px, 4.6vw, 72px));
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--gold, #F2A93B);
}

/* The 30ch measure suited a 280px column. In the wider column it would leave
   the label filling about two thirds of its own track with nothing beside it,
   which is the orphan column the layout rule forbids, so the column is the
   measure now. */
.sk-stat__l {
	font-size: 15px;
}

/* Every figure that is not real yet says so, in the shape the real one takes. */
.sk-confirm {
	justify-self: start;
	display: inline-block;
	border: 1px dashed var(--muted, #6B6659);
	border-radius: var(--radius-small, 8px);
	padding: 8px 12px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--muted, #6B6659);
}

/* ----------------------------------------------------- process-steps --- */

.sk-process .sk-h2 {
	max-width: 20ch;
}

.sk-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 32px;
	margin-top: clamp(40px, 4vw, 56px);
}

.sk-steps > * {
	margin-block: 0;
}

.sk-step {
	display: grid;
	gap: 14px;
	align-content: start;
	border-top: 2px solid var(--line, #EAE1D2);
	padding-top: 20px;
}

.sk-step > * {
	margin-block: 0;
}

.sk-step__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sk-step__top > * {
	margin-block: 0;
}

.sk-step__num {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--muted, #6B6659);
}

.sk-step__icon {
	display: block;
	flex: 0 0 auto;
}

.sk-step__text {
	font-size: 15px;
	color: var(--muted, #6B6659);
}

/* ----------------------------------------------------- product-teaser --- */

.sk-teaser {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
}

.sk-teaser > * {
	margin-block: 0;
}

.sk-teaser__body {
	padding: 20px;
	display: grid;
	gap: 14px;
}

.sk-teaser__body > * {
	margin-block: 0;
}

.sk-teaser__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.sk-teaser__head > * {
	margin-block: 0;
}

.sk-kw {
	margin: 0;
}

.sk-kw table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.sk-kw th {
	padding: 6px 0;
	border: 0;
	font-weight: 600;
	font-size: 12px;
	color: var(--muted, #6B6659);
	text-align: left;
}

.sk-kw td {
	padding: 10px 0;
	border: 0;
	border-top: 1px solid var(--line, #EAE1D2);
}

.sk-kw th:nth-child(n+2),
.sk-kw td:nth-child(n+2) {
	text-align: right;
}

.sk-kw td:nth-child(2) {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
}

.sk-kw td:nth-child(3) {
	color: var(--muted, #6B6659);
}

.sk-spark {
	display: block;
	width: 100%;
	height: 56px;
	border-bottom: 1px solid var(--line, #EAE1D2);
}

.sk-teaser__copy {
	display: grid;
	gap: 20px;
	align-content: start;
}

.sk-teaser__copy > * {
	margin-block: 0;
}

.sk-teaser__lede {
	font-size: 17px;
	max-width: 46ch;
}

/* ---------------------------------------------------- community-photo --- */

/*
 * The photograph stacks above the card by default and only goes behind it once
 * there is room. Overlaying a 560px card on a small band buries the people in
 * the picture, which is the one thing a community photograph is there to show.
 * The hatched placeholder texture has gone with the placeholder it stood for:
 * stacked, it showed through around the card and read as unfinished.
 */
.sk-photoband {
	position: relative;
	border-radius: var(--radius-band, 20px);
	overflow: hidden;
	display: grid;
	align-items: end;
	/* Stated rather than simply dropped, so the placeholder hatch cannot come
	   back from whatever this rule happens to be replacing. */
	background: none;
}

.sk-photoband__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

@media (min-width: 1100px) {
	/* The band, not the file, sets the box, so nothing moves as the image
	   arrives. 60% keeps the shooting line clear of the card below it. */
	.sk-photoband {
		aspect-ratio: 2 / 1;
	}

	.sk-photoband__img {
		position: absolute;
		inset: 0;
		height: 100%;
		object-fit: cover;
		object-position: center 60%;
	}

	/* Only now is the card floating over the picture, so only now does it
	   take a measure and leave the rest of the band to the photograph. */
	.sk-photoband > .sk-overlay {
		position: relative;
		z-index: 1;
		max-width: 560px;
	}
}

.sk-photoband > * {
	margin-block: 0;
}

/* No max-width here. The cap belongs to the floating card only, and applied
   at every width it stranded a 560px card in a 976px band. See the 1100px
   block below. */
.sk-overlay {
	margin: clamp(24px, 3vw, 40px);
	background: var(--wp--preset--color--midnight, #070731);
	border-radius: var(--radius-card, 16px);
	padding: clamp(24px, 3vw, 36px);
	display: grid;
	gap: 12px;
}

.sk-overlay > * {
	margin-block: 0;
}

.sk-overlay__line {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.3;
}

.sk-overlay .is-style-solkarra-eyebrow {
	margin-bottom: 0;
	color: var(--gold, #F2A93B);
}

/*
 * The standing link, in the same treatment as .sk-link in base.css: the words
 * take the scheme's own text colour and the gold carries the underline.
 *
 * It used to set Solar Gold as the text colour with no underline, which was
 * wrong twice over on a light ground. Gold on Warm Paper is 1.88:1 against a
 * 4.5:1 bar for link text, and with the underline gone colour was the only
 * thing marking the link at all. Darkening to gold-deep does not rescue it:
 * that is 2.6:1 on Warm Paper. The gold has to leave the text.
 *
 * It was also a 22px target against the 44px the contract asks for. Nobody
 * reported that while the link was invisible at 1.88:1, which is the argument
 * for closing both at once rather than shipping a link that is finally legible
 * and still too small to hit.
 */
.sk-goldlink {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	font-size: 15px;
}

.sk-goldlink a {
	color: var(--fg, #23262E);
	text-decoration: underline;
	text-decoration-color: var(--gold, #F2A93B);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;

	/* The same three declarations base.css gives .sk-link, not a variant of
	   them, so the two standing links stay in step. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.sk-goldlink a:hover,
.sk-goldlink a:focus-visible {
	text-decoration-color: var(--gold-deep, #D98A21);
}

/*
 * Gold text is only safe where the ground is dark, so it is named by surface
 * rather than assumed. On Midnight it is around 9.7:1 and on the dark ground
 * around 10:1, which is how the community band keeps the gold link the
 * prototype draws, in both schemes.
 */
.is-style-solkarra-band .sk-goldlink a,
.is-style-solkarra-hero .sk-goldlink a,
.sk-on-band .sk-goldlink a,
html[data-scheme="dark"] .sk-goldlink a,
.editor-styles-wrapper[data-scheme="dark"] .sk-goldlink a {
	color: var(--gold, #F2A93B);
}

/* ---------------------------------------------------- testimonial-slot --- */

.sk-testimonial {
	position: relative;
	margin: 0;
	border: 2px dashed var(--line, #EAE1D2);
	border-radius: var(--radius-band, 20px);
	padding: clamp(32px, 3.3vw, 48px);
	padding-left: clamp(72px, 7vw, 104px);
}

.sk-testimonial::before {
	content: "“";
	position: absolute;
	left: clamp(24px, 2.6vw, 40px);
	top: clamp(44px, 4.4vw, 64px);
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 800;
	font-size: 72px;
	line-height: 0.6;
	color: var(--gold, #F2A93B);
}

.sk-testimonial p {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 600;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.4;
	color: var(--muted, #6B6659);
}

.sk-testimonial cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--muted, #6B6659);
}

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

/*
 * The 1200px column, not the section, carries the layout, so nothing is
 * centred by the constrained layout's auto margins. The hero then splits: the
 * kicker and the H1 on the left, the lede and the call to action on the right.
 * On the front page the sun mark fills that right hand space. An inner page
 * has no sun, and a 600px lede alone in a 1200px box is the orphan column the
 * layout rule forbids, so the words fill it instead.
 */
.sk-page-hero .sk-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: end;
}

.sk-page-hero .sk-hero__copy {
	display: grid;
	gap: 16px;
	align-content: start;
}

.sk-page-hero .sk-hero__aside {
	display: grid;
	gap: 24px;
	align-content: end;
}

.sk-page-hero .sk-hero__copy > *,
.sk-page-hero .sk-hero__aside > * {
	margin-block: 0;
}

.sk-page-hero .is-style-solkarra-eyebrow {
	margin-bottom: 0;
}

/* The column is already the measure. */
.sk-page-hero .sk-lede {
	max-width: none;
}

@media (max-width: 899.98px) {
	.sk-page-hero .sk-wrap {
		grid-template-columns: 1fr;
		gap: 24px;
		align-items: start;
	}

	.sk-page-hero .sk-hero__aside {
		align-content: start;
	}
}

.sk-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
}

.sk-cta-row > * {
	margin-block: 0;
}

/* ----------------------------------------------------------- who-for --- */

.sk-whogrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 0 32px;
	border-top: 1px solid var(--line, #EAE1D2);
}

.sk-whogrid > * {
	margin-block: 0;
}

.sk-who {
	padding: 28px 0;
	display: grid;
	gap: 8px;
	align-content: start;
	border-bottom: 1px solid var(--line, #EAE1D2);
}

.sk-who > * {
	margin-block: 0;
}

.sk-who .is-style-solkarra-eyebrow {
	margin-bottom: 0;
}

.sk-who h2 {
	font-size: 22px;
	line-height: 1.25;
}

.sk-who__d {
	font-size: 15px;
	color: var(--muted, #6B6659);
}

/* ---------------------------------------------------- includes-list --- */

.sk-includes {
	list-style: none;
	margin: 0;
	padding-left: 0;
	display: grid;
	gap: 1px;
	background: var(--line, #EAE1D2);
	border: 1px solid var(--line, #EAE1D2);
	border-radius: var(--radius-card, 16px);
	overflow: hidden;
}

.sk-includes li {
	position: relative;
	background: var(--card, #FFFFFF);
	padding: 20px 24px 20px 58px;
	font-size: 15px;
	color: var(--muted, #6B6659);
}

.sk-includes li::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 34px;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--gold, #F2A93B);
}

.sk-includes li strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	font-size: 17px;
	color: var(--fg, #23262E);
}

.sk-includes li br {
	display: none;
}

/* ----------------------------------------------------- pricing-tiers --- */

.sk-pricing {
	border-top: 1px solid var(--line, #EAE1D2);
}

.sk-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: 16px;
	align-items: start;
	margin-top: 40px;
}

/*
 * A pricing row is a comparison, so the four cards have to end on one line and
 * the rows inside them have to correspond. The cause was fixed first: the
 * quoted column's description ran 104 characters against 34 to 49 in the tiers
 * and took four lines. What is left is not flab, it is the tiers genuinely
 * differing, because a tier named "Bookings and eCommerce" is a longer name
 * than "One Page" and always will be.
 *
 * So the title and the description reserve the two lines the longest one needs.
 * That is not padding a card out with empty space, which the brief rules out:
 * it puts every price on one baseline and every feature list at one height, so
 * the four cards can actually be read against each other. Stretch then squares
 * off the bottoms and the button is anchored there, so whatever is left over
 * lands as an aligned row of calls to action rather than a ragged edge.
 *
 * Two classes on the grid so the stretch outranks `align-items: start` above
 * no matter where this block is appended.
 */
.sk-tiers.sk-tiers--even {
	align-items: stretch;
}

.sk-tiers.sk-tiers--even .sk-tier {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sk-tiers.sk-tiers--even .wp-block-buttons {
	margin-top: auto;
}

/* Only where the cards actually sit in a row. Stacked at one column there is
   nothing to align and the reserved lines would just be holes. */
@media (min-width: 600px) {
	.sk-tiers.sk-tiers--even .sk-tier h3 {
		min-height: 2.5em;
	}

	.sk-tiers.sk-tiers--even .sk-tier__for {
		min-height: 3.2em;
	}
}

.sk-tiers > * {
	margin-block: 0;
}

.sk-tier {
	background: var(--card, #FFFFFF);
	border: 1px solid var(--line, #EAE1D2);
	border-radius: var(--radius-card, 16px);
	padding: 28px;
	display: grid;
	gap: 16px;
	align-content: start;
}

.sk-tier > * {
	margin-block: 0;
}

.sk-tier__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.sk-tier__top > * {
	margin-block: 0;
}

.sk-tier h3 {
	font-size: 20px;
}

.sk-tag {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11px;
	color: var(--muted, #6B6659);
	border: 1px dashed var(--muted, #6B6659);
	border-radius: 6px;
	padding: 2px 6px;
}

.sk-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

.sk-price-row > * {
	margin-block: 0;
}

.sk-price__pre {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 600;
	font-size: 16px;
	color: var(--muted, #6B6659);
}

.sk-price {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 800;
	font-size: 40px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.sk-tier__for {
	font-size: 14px;
	color: var(--muted, #6B6659);
}

.sk-tier .wp-block-list {
	margin: 0;
	border-top: 1px solid var(--line, #EAE1D2);
	padding-top: 16px;
	font-size: 15px;
	gap: 8px;
}

.sk-tier .wp-block-buttons {
	display: block;
}

.sk-tier .wp-block-button {
	width: 100%;
}

.sk-tier .wp-block-button__link {
	width: 100%;
	justify-content: center;
	text-align: center;
}

.sk-tier--quote {
	background: var(--band, #070731);
	border-color: var(--wp--preset--color--dark-line, #26265f);
}

.sk-tier--quote .sk-price {
	color: var(--gold, #F2A93B);
}

.sk-note {
	margin-top: 24px;
	font-size: 13px;
	color: var(--muted, #6B6659);
}

/* ---------------------------------------------------- platforms-band --- */

.sk-deflist {
	display: grid;
	border-top: 1px solid var(--line, #EAE1D2);
}

.sk-deflist > * {
	margin-block: 0;
}

.sk-defrow {
	display: grid;
	grid-template-columns: minmax(140px, 1fr) 2fr;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line, #EAE1D2);
}

.sk-defrow > * {
	margin-block: 0;
}

.sk-def__t {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	font-size: 16px;
}

.sk-def__d {
	font-size: 15px;
	color: var(--muted, #6B6659);
}

@media (max-width: 599.98px) {
	.sk-defrow {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* ------------------------------------------------------ mini-showcase --- */

.sk-sites {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 24px;
	margin-top: 40px;
}

.sk-sites > * {
	margin-block: 0;
}

.sk-site {
	position: relative;
	display: grid;
	gap: 14px;
	align-content: start;
}

.sk-site > * {
	margin-block: 0;
}

.sk-site .sk-frame {
	transition: transform var(--wp--custom--motion--hover, 0.2s) ease;
}

.sk-site:hover .sk-frame {
	transform: translateY(-3px);
}

.sk-site__meta {
	display: grid;
	gap: 4px;
	padding-right: 32px;
}

.sk-site__meta > * {
	margin-block: 0;
}

.sk-site__meta h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
}

.sk-site__meta h3::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var(--muted, #6B6659);
}

.sk-site--archery h3::before {
	background: var(--wp--preset--color--accent-archery, #9C6B3F);
}

.sk-site--aromatics h3::before {
	background: var(--wp--preset--color--accent-aromatics, #6E8B6A);
}

.sk-site--gold h3::before {
	background: var(--gold, #F2A93B);
}

.sk-site__meta h3 a {
	color: inherit;
	text-decoration: none;
}

.sk-site__meta h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sk-site__meta h3 a:hover {
	text-decoration: underline;
	text-decoration-color: var(--gold, #F2A93B);
}

.sk-site__did {
	font-size: 14px;
	color: var(--muted, #6B6659);
}

.sk-site::after {
	content: "→";
	position: absolute;
	right: 0;
	bottom: 2px;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: var(--gold-deep, #D98A21);
}

/* ----------------------------------------------------------------- faq --- */

.sk-qa {
	display: grid;
	border-top: 1px solid var(--line, #EAE1D2);
}

.sk-qa > * {
	margin-block: 0;
}

.sk-qa .wp-block-details {
	border-bottom: 1px solid var(--line, #EAE1D2);
}

.sk-qa summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 12px 0;
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	font-size: 17px;
}

.sk-qa summary::-webkit-details-marker {
	display: none;
}

.sk-qa summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: 4px;
	border-right: 2px solid var(--gold-deep, #D98A21);
	border-bottom: 2px solid var(--gold-deep, #D98A21);
	transform: rotate(45deg);
	transition: transform var(--wp--custom--motion--hover, 0.2s) ease;
}

.sk-qa details[open] summary::after {
	transform: rotate(225deg);
}

.sk-qa details p {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--muted, #6B6659);
	max-width: 60ch;
}

/* ================================================================ Lane H */
/*
 * Lane H: the Archery and Aromatics section styles.
 *
 * Request to Lane A: append this file to assets/css/base.css under its own
 * heading, the same way F-sections.css was appended. Nothing here is inlined
 * into a pattern. A <style> block inside a pattern is copied into every page's
 * post_content and into the database, and because it is still :first-child
 * WordPress hands its sibling a 24px margin, which is what cost Lane F a
 * cleanup round.
 *
 * Every rule is an addition. Nothing here redefines a Lane A token or a Lane F
 * class, and nothing here is required for the two pages to pass QA: both pages
 * are built out of classes that are already in base.css, and these rules only
 * finish the three things that are new (the larger link-out tile, the empty
 * photo slot inside a card frame, and the give-back meter).
 *
 * Colours are scheme variables or theme.json presets, with the light value as
 * the fallback, as base.css does.
 */

/* ------------------------------------------------------- link-out-cards --- */

/*
 * The link-out grid is the mini-showcase tile at a larger size: the same
 * .sk-sites / .sk-site / .sk-frame markup and a taller screenshot so a store's
 * hero is readable.
 *
 * 300px is measured, not picked for looks. Both link-out grids carry five
 * cards, and five is the count that goes lopsided: the 280px track in base.css
 * fits four across the 1200px column and leaves a lonely fifth on its own row.
 * The track has to be wide enough to stop a fourth column at 1200 and narrow
 * enough to keep a third at 976, which is 283px to 309px. 300px sits in the
 * middle of that window.
 *
 * It still holds now that the Aromatics range cards carry no picture and are
 * only 131px tall. A 200px track was measured against it, on the theory that
 * short cards might want all five in one row: it gives five across at 1440 but
 * falls to four and a lonely one at 1024, with card heights ranging 155px to
 * 177px instead of matching. 300px stays three then two at both widths with
 * every card the same height.
 *
 * Measured in a browser on both pages, cards per row and the card width:
 *
 *            base.css alone      with this file
 *   1440     4 + 1, 282px        3 + 2, 384px
 *   1024     3 + 2, 309px        3 + 2, 309px
 *    768     2 + 2 + 1, 348px    2 + 2 + 1, 348px
 *    375     one per row         one per row
 *
 * Nothing scrolls sideways at any of them either way. The 2 + 2 + 1 at 768 is
 * left alone: five items in two columns has no other shape, and the alternative,
 * holding three columns down to 768, makes each card 224px, which is too narrow
 * for a screenshot with a name and a line under it.
 */
.sk-linkouts {
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 32px 24px;
}

.sk-linkouts .sk-shot-wrap img {
	height: 260px;
}

.sk-linkouts .sk-site__meta h3 {
	font-size: 18px;
}

.sk-linkouts .sk-site__did {
	font-size: 15px;
	max-width: 34ch;
}


/* The Aussie Wax dot. The other three are already in base.css. */
.sk-site--wax h3::before {
	background: var(--wp--preset--color--accent-wax, #159FA3);
}

/* ------------------------------------------------------ give-back-marker --- */

/*
 * .sk-on-band on the card remaps --card to --band-card, so
 * .is-style-solkarra-card paints itself midnight and the gold numeral measures
 * 9.7:1 instead of the 2:1 it would measure on white. That is done in the
 * markup, not here.
 */
.sk-giveback__card {
	overflow: hidden;
}

.sk-giveback__card .sk-two-col {
	gap: clamp(28px, 3vw, 56px);
	align-items: center;
}

.sk-giveback__figure .sk-stat__n {
	font-size: var(--wp--preset--font-size--stat, clamp(48px, 4.6vw, 72px));
}

.sk-giveback__figure .sk-h2 {
	font-size: clamp(22px, 1.9vw, 28px);
	line-height: 1.25;
	max-width: 18ch;
}

.sk-giveback__line {
	font-size: 16px;
	line-height: 1.6;
}

/* The bar, at a real 4%. The width is an inline style on the fill, in the
   markup rather than here, because it is data and not design: change the number
   and the bar follows it.

   There is deliberately no min-width on the fill. A floor is the usual way to
   stop a small value disappearing, and it is also the way a bar starts telling a
   story the figures do not support, so 4% draws 4%. Measured, that is 21px on a
   531px track at 1440 and 12px on a 311px track at 375, visible at both without
   help. Gold on the midnight track measures 6.9:1, past the 3:1 SC 1.4.11 asks
   of a non-text indicator, and .sk-meter__value states the same number in words,
   so the fill is never the only way to read it. */
.sk-meter {
	margin: 4px 0 0;
}

.sk-meter__track {
	height: 12px;
	border-radius: 999px;
	background: var(--line, #EAE1D2);
	border: 1px solid var(--line, #EAE1D2);
	overflow: hidden;
}

.sk-meter__fill {
	height: 100%;
	border-radius: 999px;
	background: var(--gold, #F2A93B);
}

/* Gold on the midnight card, where it measures 9.7:1. This class only ever
   appears inside .sk-giveback__card, which carries .sk-on-band. */
.sk-meter__value {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 700;
	font-size: 15px;
	color: var(--gold, #F2A93B);
}

.sk-meter__marks {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
}

.sk-meter__marks > * {
	margin-block: 0;
}

.sk-meter__from,
.sk-meter__to {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
}

.sk-meter__to {
	text-align: right;
}

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

/* The Aromatics lock-up sits above the kicker in the hero column. */
.sk-lockup {
	margin: 0 0 8px;
}

.sk-lockup img {
	display: block;
	height: auto;
	border-radius: 0;
}

/* ---------------------------------------------------- archery: the counter --- */

/* The maker photo slot is shorter than the full width community band, because
   it sits in half a column rather than across one. The .sk-counter half of this
   selector was dropped on 2026-09-22: the archery map slot went before this
   round and content/pages/archery.html has carried no .sk-photoband since. */
.sk-makers .sk-photoband {
	min-height: 320px;
}

.sk-counter .sk-h2 {
	font-size: clamp(22px, 2vw, 30px);
	line-height: 1.3;
	max-width: 24ch;
}

/* A slim band between two tall ones, so it reads as a line rather than a
   section. */
.sk-clubline {
	border-top: 1px solid var(--line, #EAE1D2);
	border-bottom: 1px solid var(--line, #EAE1D2);
}

.sk-clubline .sk-two-col {
	align-items: center;
	gap: 16px clamp(32px, 4vw, 64px);
}

/* ------------------------------------------------ aromatics: the wholesale --- */

.sk-wholesale .sk-two-col {
	align-items: center;
}

.sk-wholesale .sk-confirm {
	margin-bottom: 4px;
}

/* ================================================================ Lane I */
/*
 * Lane I: the Aerial Imaging and Clubs section styles.
 *
 * Append this file to assets/css/base.css, after Lane F's block. The request is
 * in tools/handoff/I-requests.md. Nothing here is loaded until that happens, so
 * every Lane I section is built out of classes that already exist in base.css
 * and degrades to a plain, readable stack without these rules. What is here is
 * only the difference between plain and designed.
 *
 * Every colour is a scheme variable from base.css or a theme.json preset, with
 * the light value as the fallback. Nothing new is defined.
 *
 * Accents: Coastal Teal (accent-ais) marks the Aerial Imaging sections, Ember
 * Red (accent-club, the same hex as ember) marks the Clubs offers. Both appear
 * as a short rule above a heading, never as a background and never as body
 * text. Measured, not assumed:
 *
 *   Ember  #E23A34 on card #FFFFFF (light)        4.30:1
 *   Ember  #E23A34 on card #0e0e3d (dark)         4.25:1
 *   Teal   #2E7D8A on card #FFFFFF (light)        4.75:1
 *   Teal   #2E7D8A on card #0e0e3d (dark)         3.85:1
 *   Ember  #E23A34 on field #FBF8F2 (light)       4.06:1
 *   Ember  #E23A34 on field #050524 (dark)        4.64:1
 *
 * Every one of those is a non-text indicator under SC 1.4.11, which asks 3:1,
 * and every one is over it in both schemes. None of them is the only signal:
 * the heading or the error text beside it carries the meaning.
 *
 * Gold is for dark grounds. Nothing here sets gold as text on a light ground,
 * and nothing changes a text colour to gold on hover.
 */

/* ------------------------------------------------------- gallery-grid --- */

/* The grid itself is the core Grid layout on the block, so the section is four
   up with or without this file. Only the spacing above it is ours. */
.sk-gallery {
	margin-top: clamp(32px, 3.4vw, 48px);
}

.sk-gallery > * {
	margin-block: 0;
}

.sk-gal {
	display: grid;
	gap: 14px;
	align-content: start;
}

.sk-gal > * {
	margin-block: 0;
}

/*
 * The photograph needs nothing from this file. Its 3:2 crop comes from the core
 * image block's own aspectRatio and scale attributes, and its 16px corner comes
 * from theme.json, so the picture is right whether or not this file has been
 * appended.
 *
 * The rules that used to sit here styled .sk-gal__ph, the hatched slot the
 * gallery carried before the real files arrived. That class no longer exists in
 * any markup. If base.css still holds them they match nothing and cost nothing,
 * so they can go whenever the file is next re-appended rather than urgently.
 */

/* The caption sits under the picture, on the page ground. */
.sk-gal__cap {
	display: grid;
	gap: 6px;
}

.sk-gal__cap > * {
	margin-block: 0;
}

.sk-gal__name {
	position: relative;
	padding-top: 14px;
	font-size: 18px;
	line-height: 1.2;
}

.sk-gal__name::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent-ais, #2E7D8A);
}

.sk-gal__d {
	font-size: 14px;
	color: var(--muted, #6B6659);
}

/* ------------------------------------------------------- offer-blocks --- */

/*
 * Four EQUAL cards, which brief 5.8 asks for. The grid and the card are Lane F's
 * .sk-tiers and .sk-tier, and .sk-tiers carries align-items: start. That is
 * right for a pricing table, where a tier with fewer features should be shorter.
 * Here it let one card stand 23px below its three neighbours.
 *
 * The row governs instead, so every card fills the height the tallest content
 * sets. This is not the ruled out "cards padded to equal height with empty
 * space": no padding changes, and the four descriptions in offer-blocks.php are
 * held to within a few characters of each other, so there is next to nothing for
 * the stretch to absorb. The rule guards against a longer line being written
 * later; the copy is what makes the cards match today.
 *
 * Two classes on purpose. .sk-tiers.sk-offers outranks .sk-tiers wherever this
 * file lands inside base.css, so append order cannot undo the fix.
 */
.sk-tiers.sk-offers {
	align-items: stretch;
}

/* The Ember rule above the name is the only other difference from .sk-tier. */
.sk-offer__name {
	position: relative;
	padding-top: 14px;
	font-size: 20px;
	line-height: 1.2;
}

.sk-offer__name::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent-club, #E23A34);
}

/* --------------------------------------------------------- form-embed --- */

.sk-formcard {
	display: grid;
	gap: 16px;
	align-content: start;
}

.sk-formcard > * {
	margin-block: 0;
}

.sk-formcard__note {
	font-size: 15px;
	color: var(--muted, #6B6659);
}

.sk-formcard__fields {
	font-size: 15px;
}

/*
 * WPForms, when the plugin is present and a form id is set. The plugin ships
 * its own stylesheet; these rules only pull the controls onto the brand's
 * tokens. Every target is at least 44px high, the focus ring is the theme's,
 * and a field in error is named in text as well as coloured.
 */
.sk-formcard .wpforms-field-label {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 600;
	font-size: 15px;
	color: var(--fg, #23262E);
}

.sk-formcard .wpforms-field-sublabel,
.sk-formcard .wpforms-field-description {
	font-size: 13px;
	color: var(--muted, #6B6659);
}

.sk-formcard input[type="text"],
.sk-formcard input[type="email"],
.sk-formcard input[type="tel"],
.sk-formcard input[type="url"],
.sk-formcard input[type="number"],
.sk-formcard select,
.sk-formcard textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	background: var(--bg, #FBF8F2);
	color: var(--fg, #23262E);
	border: 1px solid var(--line, #EAE1D2);
	border-radius: var(--radius-small, 8px);
	font-family: var(--wp--preset--font-family--open-sans, "Open Sans", system-ui, sans-serif);
	font-size: 16px;
}

.sk-formcard textarea {
	min-height: 140px;
	line-height: 1.5;
}

/* Midnight rather than gold. The browser draws the tick itself and picks black
   or white for it by luminance, and a white tick on Solar Gold comes out at
   2:1. Midnight fills the box, the tick stays white, and gold keeps its job on
   the submit button. */
.sk-formcard input[type="checkbox"],
.sk-formcard input[type="radio"] {
	width: 22px;
	height: 22px;
	accent-color: var(--wp--preset--color--midnight, #070731);
}

.sk-formcard .wpforms-field-radio li,
.sk-formcard .wpforms-field-checkbox li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

.sk-formcard .wpforms-submit {
	min-height: 48px;
	padding: 0 28px;
	background: var(--gold, #F2A93B);
	color: #070731;
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.sk-formcard .wpforms-submit:hover,
.sk-formcard .wpforms-submit:focus {
	background: var(--gold-deep, #D98A21);
}

/* The message reads in the body colour, not in Ember. Ember on white is 4.30:1,
   which clears the 3:1 a non-text indicator needs and misses the 4.5:1 text
   needs, so it takes the rule beside the message and the text keeps full
   contrast. WPForms writes the fault in words, so colour is never the only
   signal either. */
.sk-formcard label.wpforms-error {
	display: block;
	margin-top: 6px;
	padding-left: 10px;
	border-left: 3px solid var(--wp--preset--color--ember, #E23A34);
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 600;
	font-size: 14px;
	color: var(--fg, #23262E);
}

.sk-formcard input.wpforms-error,
.sk-formcard textarea.wpforms-error,
.sk-formcard select.wpforms-error {
	border-color: var(--wp--preset--color--ember, #E23A34);
	border-width: 2px;
}

/* --------------------------------------------- aerial imaging: contact --- */

/* The email address is the whole call to action, so it is set as a link in the
   display face rather than buried in a paragraph. Lane J uses the same class on
   the Contact page. The size deliberately stays off this rule: both call sites
   carry the theme's h3 preset on the block, so the size comes from theme.json
   and one lane cannot quietly resize the other's. */
.sk-emailline {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 700;
	line-height: 1.3;
}

.sk-emailline a {
	color: inherit;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* The hover thickens the rule under the address. It does not turn the text
   gold: Solar Gold deep on Warm Paper is 2.61:1, well under the 4.5:1 text
   asks, and gold on a light ground is not a text role. */
.sk-emailline a:hover,
.sk-emailline a:focus {
	text-decoration-thickness: 4px;
}

/* ================================================================ Lane J */
/*
 * Lane J: the About and Contact section styles.
 *
 * Append this file to assets/css/base.css, after Lane F's block and after
 * Lane I's. The request is in tools/handoff/J-requests.md.
 *
 * Nothing here is loaded until that happens, so every Lane J section is built
 * out of classes that already exist in base.css and reads correctly without a
 * single rule below. What is here is only the difference between plain and
 * designed: a portrait slot that is portrait shaped rather than a wide band, a
 * slot label that reads as a label, and the ventures diagram's trunk and
 * branches. Remove the whole file and the About page is still a readable
 * stack of headings, paragraphs and hatched slots with nothing overlapping and
 * nothing clipped.
 *
 * Every colour is a scheme variable from base.css or a theme.json preset, with
 * the light value as the fallback. Nothing new is defined.
 */

/* ----------------------------------------------------- the founders --- */

/*
 * The monogram avatar. There is no portrait of any of the four, so this is what
 * a founder card carries instead, and it is finished work rather than a stand
 * in: a Midnight disc, a Solar Gold ring, the initials in Solar Gold.
 *
 * Colour: Midnight and Solar Gold, the brand's own pair, and nothing new. The
 * initials measure 9.71:1 against the disc. The disc itself measures 18.28:1
 * against Warm Paper in the light scheme, and in the dark scheme Midnight on
 * dark-bg is only 1.03:1, which is why the gold ring is there rather than
 * decorative: at 9.98:1 against the dark ground it is what draws the shape when
 * the fill cannot.
 *
 * It is decorative. The name is directly under it in real text, so the markup
 * carries aria-hidden and a screen reader never announces "TP".
 *
 * A fixed 72px at every width, not a clamp. The card is 282px at 1440, 476px at
 * 1024 two by two, and 327px at 375, and a disc that grew with the card would
 * dominate the narrow one. Nothing in the card is interactive, so 72px is a
 * design size rather than a target size, and it clears 44px anyway.
 *
 * The padding-left answers the letter-spacing: the tracking adds its space after
 * the final letter too, so a centred pair sits a hair left without it.
 */
.sk-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	box-sizing: border-box;
	width: 72px;
	height: 72px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--midnight, #070731);
	border: 2px solid var(--gold, #F2A93B);
	color: var(--gold, #F2A93B);
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.05em;
	padding-left: 0.05em;
}

/*
 * Four cards, one per founder. The markup is the core columns block, so four
 * across at 1440 and one per row under 782px are core's behaviour and hold
 * whether or not this file has been merged. Everything here is the refinement.
 *
 * The middle band is the part core gets wrong for this content. Between 782px
 * and 1100px core keeps all four in a row, which at 1024 leaves each card about
 * 226px wide: a disc, a two word name and a role in a column narrower than the
 * words in it. Two by two reads properly at that size. Core
 * puts flex-basis:0 and flex-grow:1 on a column, so a basis near half the row is
 * what wraps them into pairs, and grow keeps each pair filling the width.
 */
.sk-founders {
	margin-top: clamp(32px, 3.4vw, 48px);
}

.sk-founder {
	display: grid;
	gap: 12px;
	align-content: start;
}

.sk-founder > * {
	margin-block: 0;
}

.sk-founder h3 {
	font-size: 20px;
	line-height: 1.25;
}

.sk-role {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--eyebrow, 13px);
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--muted, #6B6659);
}

@media (min-width: 782px) and (max-width: 1099.98px) {
	/*
	 * Core sets flex-wrap: nowrap with !important on a columns block above
	 * 782px, so a flex-basis alone changes each card's width and still leaves
	 * all four on one line. Measured: 45% basis, four cards, 226px each. The
	 * !important here answers core's, and is the only one in this file.
	 */
	.sk-founders.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.sk-founders.wp-block-columns > .wp-block-column {
		flex-basis: 45%;
	}
}

/* ------------------------------------------------------------ story --- */

.sk-story .sk-two-col {
	align-items: start;
}

/*
 * The card beside the story. It is there because the story is prose and the
 * layout rule forbids prose sitting against one edge of a wide band with dead
 * space beside it: the space beside the words has to hold something, and a
 * summary card is one of the things the rule names. Every figure in it is a
 * real one from the handoff, so the card carries no slot and no placeholder.
 */
.sk-glance {
	display: grid;
	gap: 16px;
	align-content: start;
}

.sk-glance > * {
	margin-block: 0;
}

/* ---------------------------------------------------- the ventures ---- */

/*
 * The diagram of the two halves. It is a diagram in the sense that it shows
 * the shape of the business, not a drawing: one label for the group, a gold
 * stem, then the two branches side by side. Screen readers get a heading and
 * two lists, which is the same information in the same order.
 *
 * The trunk pill MUST stay inside a block level wrapper in the markup, which is
 * the sk-diagram-head group in about.html. It is inline-flex so it hugs its own
 * text, and WordPress's constrained layout places a child by giving it
 * max-width plus margin-inline: auto. Auto margins do nothing to an inline
 * level box, so as a direct child of the section this pill computed
 * margin-left: 0 and sat at the section's 24px gutter while every block sibling
 * resolved auto to 96px and sat at x=120. Measured, not guessed. It shows only
 * at 1440, because below about 1250 the section is narrower than the 1200
 * content size and auto resolves to 0 for everything.
 *
 * Do not "fix" that by making this block level and shrink to fit. Auto margins
 * would then apply and would CENTRE the pill in the 1200 column, near x=642,
 * which is the same bug wearing the opposite trousers.
 */
.sk-trunk {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--line, #EAE1D2);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--card, #FFFFFF);
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, sans-serif);
	font-weight: 700;
	font-size: 15px;
	color: var(--fg, #23262E);
}

.sk-stem {
	position: relative;
	height: 32px;
	margin: 0;
}

/* The stem is decoration. It carries no meaning that the headings below do not
   already carry, so it is hidden from assistive technology by being nothing but
   a coloured rule. */
.sk-stem::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 0;
	width: 2px;
	border-radius: 2px;
	background: var(--gold, #F2A93B);
}

.sk-branch {
	display: grid;
	gap: 14px;
	align-content: start;
}

.sk-branch > * {
	margin-block: 0;
}

.sk-branch h3 {
	font-size: 22px;
	line-height: 1.25;
}

/* --------------------------------------------------------- contact ---- */

/* The note under the form links, once there is a Privacy page to link to. */
.sk-formnote {
	font-size: 14px;
}

/*
 * There was a .sk-mapslot here. Thomas removed the map placeholder from the
 * Contact page on 2026-09-21, so the rule had nothing left to style and has
 * gone with it. If Lane A has already merged an earlier copy of this file,
 * base.css still carries those two blocks: harmless dead weight, worth dropping
 * on the next merge rather than a re-merge of its own.
 */

/* ----------------------------------------------------------- legal ---- */

.sk-legal {
	border-top: 1px solid var(--line, #EAE1D2);
	padding-top: 24px;
}

.sk-legal .sk-note {
	margin-top: 0;
}

/* ================================================================ Lane F1 */
/* =========================================================================
 * F1-sections.css
 * Lane F1, 2026-09-22. Self contained. Merge into assets/css/base.css after
 * the existing "showcase-marquee" block (base.css:1495-1682); nothing here
 * redefines a rule that block already owns, so order inside that section does
 * not matter as long as this lands after `.sk-shot`'s 220px height at
 * base.css:1254-1268.
 *
 * Why it exists: row two of the showcase marquee now carries a real phone
 * screenshot instead of a 200x220 line drawing. The real capture is
 * 515x1081, a portrait phone screen. Two rules follow from that.
 * ====================================================================== */

/*
 * The phone tile is capped to the rail's height, and crops rather than squashes.
 *
 * Thomas asked on 2026-09-22 for it to line up with the browser tiles, which it
 * did not: the screenshot is 515x1081, so at the tile's 200px width it drew 415px
 * tall against their 220px and pushed its caption 180px below the row.
 *
 * Three ways give the same height and all three were built and measured against
 * the real stylesheet and the real capture, not reasoned about. Narrowing the
 * tile to 107px is undistorted and shows the whole screen, but at that width the
 * caption "Primal Archery scoring app" wraps to three lines where its neighbours
 * take one, so the tile reads as broken in a different way. Squashing to fit is
 * 1.9x vertical compression and Thomas said he would accept it, which is not the
 * same as it being worth taking when a better option costs nothing. Cropping to
 * the top keeps the 200px width, the caption, the true aspect ratio of every
 * pixel shown, and the part of the app a reader recognises: the wordmark and the
 * red Start scoring card.
 *
 * An earlier comment here argued the crop "shows the top 16% of the screen in a
 * landscape-ish box". That was measured when the tile was 358px wide. At 200px
 * the box is 200x220, very nearly square, and shows about 20%. The old reasoning
 * was sound for the width it was written against and wrong for this one.
 *
 * The source is 515px wide and the tile draws 200 CSS px, so it is 2.58x at 1x
 * and still above 1x on a 2x screen: never an upscale, crop or no crop.
 */
.sk-tile--phone .sk-shot--phone {
	height: 220px;
	object-fit: cover;
	object-position: top center;
}

/*
 * Nothing in a rail stretches to match the tallest tile.
 *
 * `.sk-marquee__set` is a flex row, so its default `align-items` is stretch.
 * That was invisible while every tile was exactly 220px of screenshot plus a
 * 37px bar. With the phone tile now 459px tall and the browser tiles 259px,
 * stretch hands each browser `.sk-tile` the full row height; `.sk-tile` is a
 * grid whose default `align-content` then stretches its two auto rows, and the
 * browser frame grows 100px taller than the screenshot inside it, leaving a
 * band of empty card colour under every store shot.
 *
 * Start alignment keeps each tile at its content height, so the phone stands
 * proud of the row and every tile heading still sits on the same line.
 */
.sk-marquee__set {
	align-items: start;
}


/* ================================================================ Lane F2 */
/* =========================================================================
 * Lane F2, 2026-09-22. For merging into assets/css/base.css.
 *
 * Self contained: every rule below styles markup that F2 wrote in this same
 * round, and nothing here redefines a shared class. The three rules that reach
 * into an existing selector do it through a descendant, scoped to one section,
 * and each says why.
 *
 * Contents
 *   1  Aromatics range: the mood thumbnail box          .sk-linkouts--thumb
 *   2  Archery counter: the heading in its new column   .sk-counter .sk-two-col
 *   3  About, At a glance: the figures panel            .sk-facts
 *   4  About, What we stand for: the values band        .sk-valuegrid
 *   5  About, the ventures diagram: the trunk note      .sk-trunk__note
 *
 * Every colour is a token already in theme.json. No new values.
 * ========================================================================= */

/* ------------------------------------- 1. Aromatics range: thumbnail box --- */

/*
 * Thomas, 2026-09-22: "Add the category images in as a small box for the
 * categories. It looks weird without them. We'll take the hit quality wise."
 *
 * The small box is what removes most of the hit. The store has no master larger
 * than 300x300, with 'full' itself registered at 300. Drawn across the 384px a
 * card is wide at 1440 the picture is upscaled 1.27 times, and about two and a
 * half times short on a dense screen. Drawn as a 150px square it is exactly the
 * file's own 300 pixels at a device pixel ratio of 2, and a clean two times
 * downscale at 1. So the number is measured rather than picked for looks: 150
 * is the largest box the file can fill on a retina screen.
 *
 * The card keeps the browser chrome bar with the store's domain, because that is
 * what the rest of the grid does and what says this card is a link out. Below it
 * the thumbnail sits centred with air around it, which reads as a product tile
 * rather than as a banner that failed to fill its box.
 *
 * Specificity: .sk-linkouts .sk-shot-wrap img in base.css is 0,2,1 and so is
 * .sk-linkouts--thumb .sk-shot-wrap img, which would leave the 260px banner
 * height to win or lose on merge order. The doubled class makes it 0,3,1 and
 * settles it.
 */
.sk-linkouts.sk-linkouts--thumb .sk-shot-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
	background: var(--card, #FFFFFF);
}

.sk-linkouts.sk-linkouts--thumb .sk-shot-wrap img {
	width: 150px;
	height: 150px;
	border-radius: 12px;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------- 2. Archery counter: the new left column --- */

/*
 * base.css caps .sk-counter .sk-h2 at 24ch. That was right when the heading sat
 * in a 469px flex item inside .sk-head-split. F2 has rebuilt the section as one
 * .sk-two-col with two .sk-col children, so the heading now sits in a 571px
 * grid track, where 24ch is about 340px, or 59% of its own column with nothing
 * beside it. That is the orphan column bug rather than a measure, so the cap
 * comes off and the heading fills the track it was given.
 *
 * The font-size clamp on the same base.css rule is untouched and still applies.
 */
.sk-counter .sk-two-col .sk-h2 {
	max-width: none;
}

/* --------------- 2b. Aromatics makers band: a portrait in half a column --- */

/*
 * Thomas: "Add the photo slot, use one of our images from the aromatics site."
 * Lane C supplied incense-bundles.webp, 1200x1600, with 800 and 640 siblings.
 *
 * Two things had to be settled to put it in the band.
 *
 * First, an overflow that predates this round. At 1440 the band drew 640px wide
 * inside a 571.2px grid track, overhanging the gap and 11px of the text column.
 * The page does not scroll sideways, so nothing caught it. The cause is two
 * Lane A rules meeting on a grid item: above 1100px .sk-photoband takes
 * aspect-ratio 2/1, and .sk-makers .sk-photoband takes min-height 320px, and a
 * box with a ratio and a forced 320px height has a min-content width of 640px,
 * which a 571px track cannot squeeze. On Home the band is the full 1200px
 * column, 2/1 gives 600px of height and min-height never binds, so it only
 * shows in half a column. min-width: 0 alone does not settle it, measured:
 * Chromium still sizes the inline axis from the height and the ratio.
 *
 * Second, the picture is portrait and the band is not. Left at its own 3:4 it
 * would be about 761px tall beside roughly 300px of text, which is the wall of
 * photograph and the 460px of dead air the archery bench band went to core
 * columns to avoid. Letterboxing wastes the band. So this band states its own
 * 4/3 box and crops to it: about 428px tall at 1440, keeping about 56% of the
 * picture's height, which is enough of a stack of bundles to read as one.
 *
 * min-height: 320px from base.css still applies and takes over below about
 * 427px of width, which is where 4/3 would otherwise make the band shorter
 * than the band wants to be. Measured after: 571.2 by 428 at 1440, 467.5 by 350
 * at 1024, 327 by 320 at 375, each inside its own track.
 *
 * The picture is positioned at every width here, where base.css only does it
 * above 1100px, because a portrait file in a landscape box has to be cropped at
 * 375 as well. object-position is centred rather than base.css's 60%, which was
 * chosen to keep a shooting line clear of an overlay card this band does not
 * have.
 */
.sk-makers .sk-photoband {
	aspect-ratio: 4 / 3;
	min-width: 0;
	max-width: 100%;
}

.sk-makers .sk-photoband__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ----------------------------------- 3. About, At a glance: figures panel --- */

/*
 * Thomas: "The content feels very block-y", and At a glance "could be an
 * infographic/image instead of a table on the right".
 *
 * It was not a table, it was the shared .sk-deflist engine: five terms in a
 * 140px track with their definitions in the 2fr track beside them, on hairlines.
 * What made it read as one was that What we stand for, a screen further down,
 * was the same object with the same hairlines.
 *
 * It is four figures now, two by two, with the number leading and the label
 * under it, and one line under a rule that says where we are. A reader takes the
 * whole panel in without reading a row at a time, which is what At a glance was
 * asking to be.
 *
 * Blocks and CSS rather than a picture: a picture of four numbers cannot be
 * edited in the Site Editor, read aloud or reflowed at 375.
 *
 * Two columns at every width. At 375 the card's inner width is about 279px, so
 * each figure has about 129px, and the widest string, 4,500+, sets at about
 * 107px at the bottom of the clamp. It fits without a breakpoint.
 */
.sk-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 20px;
}

.sk-facts > * {
	margin-block: 0;
}

.sk-fact {
	display: grid;
	gap: 2px;
	align-content: start;
}

.sk-fact > * {
	margin-block: 0;
}

.sk-fact__n {
	font-family: var(--wp--preset--font-family--montserrat, Montserrat, "Century Gothic", Futura, "Trebuchet MS", ui-sans-serif, system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--fg, #23262E);
}

.sk-fact__l {
	font-size: 13px;
	line-height: 1.35;
	color: var(--muted, #6B6659);
}

/* The line that grounds the figures. The rule above it is the one hairline the
   panel keeps, and it separates rather than tabulates. */
.sk-glance__where {
	margin-block: 0;
	padding-top: 16px;
	border-top: 1px solid var(--line, #EAE1D2);
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted, #6B6659);
}

/* ------------------------------ 4. About, What we stand for: values band --- */

/*
 * The second half of the same note. Two identical definition lists within one
 * screen was the blocky part, so this one leaves the paper background: a full
 * width midnight band, the heading centred across the top, and the four values
 * as four cards in one row.
 *
 * Four things of equal weight now look like four things of equal weight, and
 * the band gives the page the horizontal break it had nowhere between the
 * founders row and the ventures diagram.
 *
 * The four names are still real h3 headings. They are in the document outline
 * and styling them as paragraphs would take four entries out of it.
 *
 * Gold on the band card measures about 7.3:1, where the same gold on paper
 * measures 1.88:1 and is ruled out for small marks. The band remaps --card to
 * --band-card by itself, so the cards need no .sk-on-band.
 *
 * The column counts are stated rather than left to auto-fit. Four values in
 * repeat(auto-fit, minmax(260px, 1fr)) give three across and a lonely fourth at
 * 1024, which is the shape five link-out cards already taught this build to
 * avoid.
 */
.sk-values__head {
	display: grid;
	gap: 14px;
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	justify-items: center;
}

.sk-values__head > * {
	margin-block: 0;
}

.sk-values__lede {
	font-size: 17px;
	line-height: 1.55;
	color: var(--muted, #A49E90);
}

.sk-valuegrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: clamp(32px, 3.4vw, 48px);
}

.sk-valuegrid > * {
	margin-block: 0;
}

@media (min-width: 1100px) {
	.sk-valuegrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.sk-valuegrid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* is-style-solkarra-card pads to clamp(24px,3vw,40px), which is most of a 282px
   card at 1440. Scoped to this band only, so every other card keeps its own. */
.sk-values .sk-value {
	display: grid;
	gap: 10px;
	align-content: start;
	padding: clamp(20px, 2vw, 28px);
}

.sk-values .sk-value > * {
	margin-block: 0;
}

.sk-values .sk-value__t {
	font-size: 20px;
	line-height: 1.25;
	color: var(--gold, #F2A93B);
}

.sk-values .sk-value__d {
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted, #A49E90);
}

/* ------------------------- 5. About, the ventures diagram: the trunk note --- */

/*
 * Thomas: "'One company, one set of tools' is way out of place. It's to the
 * right of a heading, looks weird and unorganized."
 *
 * He is right. It was the second child of a .sk-head-split, so space-between
 * threw it at the right edge of the 1200px column and flex-end hung its baseline
 * off the bottom of the heading block. It passed the orphan probe at 28.6% of
 * its column only because the heading occupied the space beside it, which is
 * passing on somebody else's occupancy rather than on its own.
 *
 * It belongs to the diagram, not to the heading: it says what the group node
 * means. So it sits beside the Solkarra Group pill, as that node's description,
 * and takes the rest of the row. Measured at 1440 it is about 1026px of a
 * 1200px column, 85%, with the pill filling what it does not, so there is no
 * dead space beside it at any width and nothing is passing on an accident.
 *
 * The stem is pushed onto its own row so the gold rule still runs from the pill
 * down to the branch cards. Its ::before is absolutely positioned at left 24px
 * and is unchanged.
 *
 * .sk-head-split is not touched. The founders band on this same page and the
 * archery counter both use it, and this is a descendant rule inside .sk-ventures
 * only. The ventures .sk-head-split now has one child, which flex handles by
 * leaving it where it starts.
 */
.sk-ventures .sk-diagram-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.sk-ventures .sk-diagram-head > * {
	margin-block: 0;
}

.sk-trunk__note {
	flex: 1 1 320px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted, #6B6659);
}

/* Full width of its own row, so the rule it draws still lines up under the pill
   and reaches the branches. */
.sk-ventures .sk-diagram-head .sk-stem {
	flex: 0 0 100%;
}


/* ================================================================ Lane N */
/*
 * Lane N: the news index.
 *
 * Append this file to assets/css/base.css, after the Lane A news block and
 * after Lane J's. The request is in tools/handoff/N-requests.md.
 *
 * It is short on purpose. Lane A had already written the whole article
 * programme into base.css before this lane started: .sk-postlist, .sk-postcard
 * and its four parts, .sk-newshead, .sk-pagination, .sk-noresults and
 * .sk-related are all there, and content/pages/news.html and
 * patterns/post-card.php use those names rather than a second set. Nothing
 * below renames anything, defines a colour, or invents a type size.
 *
 * What is here is the difference between Lane A's four templates, where the
 * list sits directly under the page h1 in a plain constrained main, and the
 * news page, where the same list sits in a full width band with a split head
 * above it and a closing CTA below it. Three rules, each answering something
 * measured on the rendered page rather than guessed at.
 *
 * Remove the whole file and /news/ still reads correctly: the head, the list
 * and the empty state all render, in order, with nothing overlapping and
 * nothing clipped. The list sits a little tight under its heading, the empty
 * state sits hard left, and an empty pagination rule shows under it.
 */

/* --------------------------------------------------- the list under a head */

/*
 * Lane A's templates put .sk-newshead above the list and that class carries
 * margin-block-end: clamp(32px, 3.4vw, 48px). The news page uses Lane F's
 * .sk-head-split instead, because the head has a note beside it rather than a
 * lede under it, and .sk-head-split carries no bottom margin: it is written for
 * sections whose next element brings its own top margin, like .sk-sites, which
 * has margin-top: 40px.
 *
 * .sk-postlist has no top margin, so without this the first row of cards sits
 * against the heading. The number is Lane A's own, copied rather than chosen,
 * so the gap under a head is the same distance on /news/ as it is on a category
 * archive.
 */
.sk-newsindex .wp-block-query {
	margin-top: clamp(32px, 3.4vw, 48px);
}

/* --------------------------------------------------------- the empty state */

/*
 * .sk-noresults is capped at the article measure, 760px. In Lane A's templates
 * that cap sits inside a constrained layout, and core's constrained layout
 * gives every child margin-left: auto and margin-right: auto, so the card is
 * centred and the cap reads as a reading measure.
 *
 * On the news page it is not. The query block is the constrained child; the
 * no-results group is two levels inside it, in flow layouts, so nothing centres
 * it. Measured at 1440: a 760px card in a 1200px band with 440px of empty space
 * to the right of it, which is the orphan text column the layout rules in
 * 02-BUILD-LANES.md name, and which tools/qa/check.mjs probes for.
 *
 * Centring is the fix the rules ask for: "either the container carries the
 * reading measure and is centred, or the space beside the text holds
 * something". There is nothing to put beside an empty state, so it is centred.
 */
.sk-newsindex .sk-noresults {
	margin-inline: auto;
}

/*
 * .sk-noresults > * takes margin-block: 0 16px, which is right between the
 * paragraphs and wrong on the last one: inside the card style's padding it
 * reads as 16px of extra floor under the link. Only on this page, because only
 * this page puts the card style on the empty state.
 */
.sk-newsindex .sk-noresults > :last-child {
	margin-block-end: 0;
}

/* -------------------------------- pagination with no pages: nothing needed */

/*
 * A rule was written here and then removed, which is worth a note so nobody
 * writes it again.
 *
 * The worry was that core/query-pagination would render its wrapper whether or
 * not there was anything to put in it, leaving an empty <nav> carrying
 * .sk-pagination on an empty /news/: a 1px rule and about 72px of space, the
 * last thing above the CTA, reading as a list that failed to load. The fix
 * drafted for it was .sk-newsindex .sk-pagination:not(:has(a)) { display: none }.
 *
 * Measured instead of assumed, in Playground, at both ends of the range:
 *
 *   zero posts       wp-block-query-pagination appears 0 times in the HTML
 *   three posts, one page of nine   0 times
 *
 * render_block_core_query_pagination returns an empty string when its inner
 * content is empty, so the wrapper never reaches the page and there is nothing
 * to hide. The rule was dead CSS on a defect that does not exist, which is what
 * Lane A's note 20 calls a cap that is only true in one arrangement. Removed.
 */