/* ==========================================================================
   Makers Jönköping — design system

   Read this first. Every value below is a decision; if you need a new one,
   add a token rather than a one-off number in a component.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted deliberately. Loading from fonts.googleapis.com sends every
   visitor's IP address to Google, which a Swedish förening should not be
   doing without a reason. See assets/fonts/README.md for how to update.
   -------------------------------------------------------------------- */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/Archivo-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/Archivo-Variable-Italic.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: italic;
	font-display: swap;
}

:root {
	/* --- Colour ------------------------------------------------------
	   Drawn from the workshop: cast iron, raw steel, birch ply, and the
	   yellow used on machine guarding. Signal yellow is the only accent
	   and is never used for large areas.
	   ---------------------------------------------------------------- */
	--graphite:      #1a1d1f;
	--graphite-soft: #2c3134;
	--steel:         #5f676c;   /* 4.6:1 or better on every light surface below */
	--steel-light:   #b4babd;
	--chalk:         #f2f3f0;
	--chalk-deep:    #e4e6e1;
	--plywood:       #d8c4a0;
	--signal:        #ffc400;
	--white:         #ffffff;

	/* The förening's own colour, taken from the Makers JKPG logo. Signal
	   yellow still means "pay attention" and nothing else; brand blue is
	   everywhere else colour shows up — links, rules, hover states, the
	   footer. Two accents, two separate jobs. */
	--brand:         #1552a0;
	--brand-deep:    #0f3d7a;
	--brand-tint:    #b8cae2;

	/* Form validation only. Not an accent: it never appears unless
	   something needs fixing. */
	--error:         #b3261e;

	/* Channels, for the few places that need the same colours with alpha
	   (shadows, the photo scrim, rules on dark surfaces). */
	--graphite-rgb:   26 29 31;
	--white-rgb:      255 255 255;
	--brand-tint-rgb: 184 202 226;

	--bg:            var(--chalk);
	--fg:            var(--graphite);
	--fg-muted:      var(--steel);
	--rule:          #d3d6d0;
	--rule-on-dark:  rgb(var(--white-rgb) / 15%);
	--shadow:        0 16px 32px -16px rgb(var(--graphite-rgb) / 25%);

	/* --- Type --------------------------------------------------------
	   One family, two widths. Expanded carries headlines like workshop
	   signage; normal width carries reading text. Figures that need to
	   line up — opening hours, machine specs, prices — use Archivo's
	   tabular numerals rather than a second, monospace family.
	   ---------------------------------------------------------------- */
	--font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Fluid scale, roughly a major third. Clamp bounds are deliberate:
	   never smaller than readable, never larger than the line length
	   can carry. */
	--step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
	--step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
	--step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.45rem);
	--step-2:  clamp(1.56rem, 1.44rem + 0.60vw, 1.94rem);
	--step-3:  clamp(1.95rem, 1.74rem + 1.05vw, 2.64rem);
	--step-4:  clamp(2.44rem, 2.08rem + 1.80vw, 3.75rem);
	--step-5:  clamp(3.05rem, 2.44rem + 3.05vw, 5.25rem);

	--leading-tight: 1.05;
	--leading-snug:  1.25;
	--leading-body:  1.6;

	--measure:       66ch;   /* line length ceiling for reading text */
	--measure-short: 34ch;   /* ledes and blurbs that sit beside something */

	/* --- Space -------------------------------------------------------
	   A single scale. Do not invent values between these.
	   ---------------------------------------------------------------- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs:  0.75rem;
	--space-s:   1rem;
	--space-m:   1.5rem;
	--space-l:   2.25rem;
	--space-xl:  3.5rem;
	--space-2xl: 5.5rem;
	--space-3xl: 8rem;

	/* --- Layout ------------------------------------------------------ */
	--width-full:    76rem;
	--width-text:    42rem;
	--width-aside:   22rem;
	--width-panel:   20rem;   /* dropdown panels */
	--gutter:        clamp(var(--space-s), 4vw, var(--space-xl));
	--header-height: 4.25rem;
	--logo-height:   2.5rem;    /* an uploaded logo */
	--wordmark-height: 1.25rem; /* the theme's MAKERS JKPG wordmark, ~9:1 */

	/* --- Other ------------------------------------------------------- */
	--radius:      2px;   /* nearly square: this is machinery, not an app */
	--rule-weight: 1px;
	--rule-heavy:  3px;   /* the nameplate rule: plates, hours, fact boxes */
	--transition:  160ms cubic-bezier(0.2, 0, 0, 1);
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--space-s));
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	font-variation-settings: 'wdth' 100;
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

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

/* overflow-wrap: Swedish compounds are long — "Aktivitetslogg" in the
   expanded face is wider than a phone. A word that cannot fit breaks
   rather than running off the screen. */
h1, h2, h3, h4 {
	margin: 0;
	font-weight: 700;
	line-height: var(--leading-tight);
	text-wrap: balance;
	overflow-wrap: break-word;
}

h1 { font-size: var(--step-5); font-variation-settings: 'wdth' 112; letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); font-variation-settings: 'wdth' 108; letter-spacing: -0.015em; }
h3 { font-size: var(--step-1); font-variation-settings: 'wdth' 104; }
h4 { font-size: var(--step-0); font-variation-settings: 'wdth' 104; }

p, li { text-wrap: pretty; }
p { margin: 0 0 var(--space-s); max-width: var(--measure); }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Body copy is the one place a link needs to look like a link rather than
   navigation chrome — brand blue instead of inherited graphite. */
.prose a { color: var(--brand); }

/* Yellow is the focus ring's job, but yellow alone is 1.4:1 against chalk.
   The graphite ring sitting in the offset gap is what gives the indicator
   its contrast on light surfaces; on dark ones the yellow carries it. */
:focus-visible {
	outline: var(--rule-heavy) solid var(--signal);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--graphite);
}

hr {
	border: 0;
	border-top: var(--rule-weight) solid var(--rule);
	margin: var(--space-xl) 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--graphite);
	color: var(--chalk);
	padding: var(--space-xs) var(--space-s);
	z-index: 100;
}
.skip-link:focus { left: var(--space-s); top: var(--space-s); }

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

/* Small uppercase label above a heading: "Pågående projekt", the parent
   page above a sub-page's title. */
.eyebrow {
	margin: 0;
	font-size: var(--step--1);
	font-weight: 700;
	font-variation-settings: 'wdth' 100;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: var(--leading-snug);
	color: var(--brand);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
	width: min(100% - var(--gutter) * 2, var(--width-full));
	margin-inline: auto;
}

.wrap--text { width: min(100% - var(--gutter) * 2, var(--width-text)); }

/* A page's reading column: inside the full-width .wrap so it lines up with
   the title above it, but no wider than comfortable reading. */
.page-body { max-width: var(--width-text); }

.section { padding-block: var(--space-2xl); }
.section + .section { padding-block-start: 0; }

/* A band: a full-width surface of its own. Most of the site is chalk with
   hairline rules, which on its own reads as flat; a band is the exception
   that gives a page rhythm. Two kinds — brand blue for the förening's
   identity, plywood once — beside the graphite membership call and the
   brand-deep footer. Do not add a fifth surface colour. */
.band { padding-block: var(--space-2xl); }

/* Brand blue as a surface, with the pegboard dots the footer has. */
.band--brand {
	background-color: var(--brand);
	background-image: radial-gradient(circle, rgb(var(--white-rgb) / 12%) 1.5px, transparent 1.5px);
	background-size: 28px 28px;
	color: var(--white);
}

/* Birch ply, as on the workshop walls. Steel and brand blue are both under
   4.5:1 on it, so muted text and links go darker here. */
.band--ply { background: var(--plywood); color: var(--graphite); }
.band--ply .eyebrow,
.band--ply .link-arrow { color: var(--brand-deep); }

.band__label {
	margin: 0 0 var(--space-l);
	font-size: var(--step--1);
	font-weight: 700;
	font-variation-settings: 'wdth' 100;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-tint);   /* 4.6:1 on brand blue */
}

.stack > * + * { margin-block-start: var(--space-s); }
.stack-l > * + * { margin-block-start: var(--space-l); }

/* Heading on the left, its "see all" link on the right. */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2xs) var(--space-m);
}
.section-head .link-arrow { margin: 0; }

/* Reading text beside a fact box (Bli medlem, Kontakt). */
.split {
	display: grid;
	grid-template-columns: minmax(0, var(--width-text)) minmax(16rem, var(--width-aside));
	justify-content: space-between;
	align-items: start;
	gap: var(--space-xl) var(--space-2xl);
}

@media (max-width: 56rem) {
	.split { grid-template-columns: minmax(0, 1fr); }
	/* The facts (fees, address) are what most visitors came for — first on
	   a phone, not under a long form. */
	.split__aside { order: -1; }
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
	border-bottom: var(--rule-weight) solid var(--rule);
	background: var(--bg);
	position: sticky;
	top: 0;
	z-index: 20;
	transition: background-color var(--transition), border-color var(--transition);
}

/* On the photo hero, the header floats transparent over the photo instead
   of sitting on its own bar — fixed rather than sticky, so it truly
   overlays rather than reserving its own height above the photo, and
   swaps to the normal solid bar once nav.js marks it scrolled (or the
   mobile menu is open). Nowhere else gets this: it only works because
   there's a photo to float over. */
body.has-hero-photo .site-header {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
}
body.has-hero-photo .site-header.is-scrolled,
body.has-hero-photo .site-header.is-menu-open {
	background: var(--bg);
	border-bottom-color: var(--rule);
}

body.has-hero-photo .site-header:not(.is-scrolled):not(.is-menu-open) .nav-toggle__bar {
	background: var(--white);
}
body.has-hero-photo .site-header:not(.is-scrolled):not(.is-menu-open) .site-logo {
	color: var(--white);
}

/* Desktop only: below the breakpoint the links live in the chalk-coloured
   mobile panel, where white text would be unreadable. :not(:last-child)
   so this never fights the CTA button's own colours. */
@media (min-width: 60.0625rem) {
	body.has-hero-photo .site-header:not(.is-scrolled) .nav > ul > li:not(:last-child) > a,
	body.has-hero-photo .site-header:not(.is-scrolled) .nav > ul > li:not(:last-child) > .sub-menu__toggle {
		color: var(--white);
	}
	body.has-hero-photo .site-header:not(.is-scrolled) .nav > ul > li:not(:last-child) > a:hover,
	body.has-hero-photo .site-header:not(.is-scrolled) .nav > ul > li.current-menu-item:not(:last-child) > a {
		color: var(--white);
		box-shadow: inset 0 -2px 0 var(--brand-tint);
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xl);
	min-height: var(--header-height);
}

.site-branding { display: flex; align-items: center; flex-shrink: 0; }

.custom-logo-link { display: block; line-height: 0; }
.custom-logo { display: block; height: var(--logo-height); width: auto; }

/* The theme's own wordmark (makejkpg_wordmark()): one long line of
   capitals, so set by its cap height rather than the boxed logo's
   height, in the text colour. */
.site-logo { display: block; line-height: 0; color: var(--fg); }
.site-logo svg { display: block; height: var(--wordmark-height); width: auto; }

@media (max-width: 30rem) {
	.custom-logo { height: calc(var(--logo-height) * 0.85); }
}

.site-title {
	font-size: var(--step-0);
	font-weight: 800;
	font-variation-settings: 'wdth' 115;
	letter-spacing: -0.01em;
	text-decoration: none;
	line-height: 1.1;
}

/* Nav sits flush right — logo, then links, then the one CTA, no wasted
   width. Kept plain (no caps, no heavy weight, no thick border anywhere
   in the header).

   Every selector below is scoped to .nav > ul (direct child) rather than
   the descendant selector .nav ul — .sub-menu is *also* a <ul> nested
   inside .nav, so an unscoped .nav ul / .nav ul li:last-child would leak
   into the mega-menu panel. */
.nav > ul {
	display: flex;
	align-items: center;
	gap: var(--space-m);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--step--1);
}
.nav > ul > li > a {
	text-decoration: none;
	font-weight: 500;
	color: var(--fg-muted);
	padding-block: var(--space-3xs);
	transition: color var(--transition);
}
.nav > ul > li > a:hover,
.nav > ul > li.current-menu-item > a,
.nav > ul > li.current-menu-ancestor > a,
.nav > ul > li.current-menu-parent > a {
	color: var(--fg);
	box-shadow: inset 0 -2px 0 var(--brand);
}

/* The last item in Huvudmeny is the header's one call to action — styled
   as a small solid button so it still reads as "the thing to click"
   without turning into a slab. Whatever the board puts last in the menu
   gets this treatment; nothing here assumes it's a particular page. */
.nav > ul > li:last-child > a {
	background: var(--signal);
	color: var(--graphite);
	font-weight: 700;
	font-size: var(--step--1);
	padding: var(--space-3xs) var(--space-s);
	border-radius: var(--radius);
	box-shadow: none;
	transition: transform var(--transition);
}
.nav > ul > li:last-child > a:hover {
	color: var(--graphite);
	box-shadow: none;
	transform: translateY(-1px);
}

/* ==========================================================================
   Mega-menu dropdowns

   Core's Walker_Nav_Menu already marks a parent <li> with
   'menu-item-has-children' and wraps its children in <ul class="sub-menu">
   — that's the hook everything below reveals on. Makejkpg_Nav_Walker (see
   inc/nav-walker.php) adds the icon + description per item and the
   .sub-menu__toggle button. On desktop the panel opens on hover, on
   keyboard focus, or when the caret is clicked or tapped (tablets have no
   hover); on mobile the caret drives an in-place accordion.
   ========================================================================== */

.nav ul > li.menu-item-has-children { position: relative; }

.sub-menu__toggle {
	background: none;
	border: 0;
	padding: var(--space-3xs);
	margin: 0;
	font: inherit;
	font-size: 0.7em;
	line-height: 1;
	color: var(--fg-muted);
	cursor: pointer;
	vertical-align: middle;
	transition: transform var(--transition);
}
.sub-menu__toggle[aria-expanded='true'] { transform: rotate(180deg); }

.sub-menu {
	position: absolute;
	top: 100%;
	right: 0;
	width: var(--width-panel);
	margin: var(--space-xs) 0 0;
	padding: var(--space-xs);
	background: var(--white);
	border: var(--rule-weight) solid var(--rule);
	box-shadow: var(--shadow);
	list-style: none;
	display: grid;
	gap: var(--space-3xs);
	font-size: var(--step-0);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	z-index: 30;
}

/* An invisible bridge over the gap between the link and the panel, so the
   pointer can travel down into it without the hover dropping. */
.sub-menu::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: var(--space-xs);
}

/* Hover opens a panel for mouse users; the caret button (.is-open) opens
   it for everyone else, keyboard included — the disclosure pattern, so
   aria-expanded always tells the truth. Escape adds .is-dismissed, which
   beats hover until the pointer leaves (WCAG 1.4.13). */
.menu-item-has-children:not(.is-dismissed):hover > .sub-menu,
.sub-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sub-menu__link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	padding: var(--space-2xs);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--fg);
	transition: background var(--transition);
}
.sub-menu__link:hover,
.sub-menu__link:focus-visible,
.sub-menu__link[aria-current='page'] {
	background: var(--chalk);
}

.sub-menu__icon { flex-shrink: 0; margin-block-start: 0.2em; color: var(--brand); }

.sub-menu__text { display: flex; flex-direction: column; gap: 0.2em; }
.sub-menu__title { font-weight: 700; font-size: var(--step--1); }
.sub-menu__desc { font-size: var(--step--1); color: var(--fg-muted); line-height: var(--leading-snug); }

/* An actual hamburger icon that turns into a close mark, not a bordered
   button that says "Meny" — a text button reads as a placeholder, not a
   control. */
.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0;
	width: 2.75rem;
	height: 2.75rem;
	margin-inline-end: calc(var(--space-2xs) * -1);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.nav-toggle__box {
	position: relative;
	width: 22px;
	height: 16px;
}

.nav-toggle__bar {
	position: absolute;
	inset-inline: 0;
	height: 2px;
	background: var(--fg);
	transition: transform var(--transition), opacity var(--transition), top var(--transition);
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7px; }
.nav-toggle__bar:nth-child(3) { top: 14px; }

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* The menu folds into the toggle below 60rem: the full nav needs about
   940px (wordmark, six items, gutters) and wraps onto two lines before that. */
@media (max-width: 60rem) {
	.nav-toggle { display: flex; }

	.nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		max-height: calc(100dvh - var(--header-height));
		overflow-y: auto;
		background: var(--bg);
		border-bottom: var(--rule-weight) solid var(--rule);
		padding: var(--space-m) var(--gutter) var(--space-l);
		box-shadow: var(--shadow);

		/* Faded/slid rather than display:none, so opening and closing is a
		   transition instead of a hard cut — visibility is what actually
		   keeps it out of the tab order and out of the way when closed. */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.5rem);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	}
	.nav[data-open='true'] {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.nav > ul { flex-direction: column; align-items: stretch; gap: 0; font-size: var(--step-0); }
	.nav > ul > li + li { border-top: var(--rule-weight) solid var(--rule); }
	.nav > ul > li > a { display: block; padding-block: var(--space-s); color: var(--fg); }

	.nav > ul > li:last-child {
		border-top: 0;
		margin-block-start: var(--space-s);
	}
	.nav > ul > li:last-child > a { text-align: center; padding-block: var(--space-s); }

	.nav > ul > li.menu-item-has-children > a { padding-inline-end: var(--space-2xl); }

	.sub-menu__toggle {
		position: absolute;
		top: 0;
		right: 0;
		height: calc(var(--step-0) * var(--leading-body) + var(--space-s) * 2);
		padding-inline: var(--space-s);
		font-size: 1rem;
	}

	.sub-menu {
		position: static;
		width: auto;
		margin: 0;
		padding: 0 0 var(--space-s) var(--space-m);
		border: 0;
		box-shadow: none;
		background: transparent;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}
	.sub-menu::before { display: none; }
	.sub-menu.is-open { display: grid; }
	.sub-menu__link { padding: var(--space-2xs) 0; }
}

/* ==========================================================================
   Hero — opening hours and what the place is, nothing else
   ========================================================================== */

.hero {
	position: relative;
	padding-block: var(--space-2xl) var(--space-xl);
	border-bottom: var(--rule-weight) solid var(--rule);
}

.hero__lead {
	font-size: var(--step-1);
	color: var(--fg-muted);
	max-width: var(--measure-short);
	margin-block: var(--space-m) 0;
}

.hero__eyebrow {
	margin: 0 0 var(--space-2xs);
	font-size: var(--step--1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fg-muted);
	font-variant-numeric: tabular-nums;
}
.hero__eyebrow a { color: var(--brand); text-decoration: none; }
.hero__eyebrow a:hover { text-decoration: underline; }

/* The homepage hero, when the Start page has a featured image: the photo
   fills the section, a scrim keeps the headline readable, and the
   headline sits low rather than centred — closer to how a name gets
   stencilled near the bottom of a machine than a poster's centred title. */
.hero--photo {
	min-height: clamp(28rem, 72vh, 44rem);
	display: flex;
	align-items: flex-end;
	border-bottom: 0;
}

/* Inset from the sides rather than bled to the viewport edge — full height
   top-to-bottom, framed left-to-right like a photo rather than a banner. */
.hero__media {
	position: absolute;
	inset-block: 0;
	inset-inline: var(--gutter);
	z-index: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--graphite);
}

.hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dark at the bottom and towards the left, where the headline sits, and a
   little at the top as well — the white nav sits on whatever the photo
   has there, often bright sky or a lit ceiling. Workshop photos are busy;
   the text has to win regardless of which one the board picks. */
.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			rgb(var(--graphite-rgb) / 65%) 0%,
			rgb(var(--graphite-rgb) / 30%) 45%,
			rgb(var(--graphite-rgb) / 0%) 75%
		),
		linear-gradient(
			180deg,
			rgb(var(--graphite-rgb) / 50%) 0%,
			rgb(var(--graphite-rgb) / 10%) 22%,
			rgb(var(--graphite-rgb) / 45%) 58%,
			rgb(var(--graphite-rgb) / 90%) 100%
		);
}

/* Padding + max-width, not the usual .wrap's width:min(...) — a flex
   item's width can't reliably resolve a min() that contains a percentage
   (its flex-basis is computed before the container's final size is known),
   which left this bleeding to the viewport edge. Padding-based inset has
   no such dependency. */
.hero--photo .hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--width-full);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: var(--space-xl) 0;
	color: var(--white);
}

.hero--photo h1 { color: var(--white); }
.hero--photo .hero__lead { color: var(--chalk-deep); }

.hero--photo .hero__hours { border-top-color: rgb(var(--white-rgb) / 30%); }
.hero--photo .hours__day { color: var(--white); }
.hero--photo .hours__time { color: var(--chalk-deep); }

.hero__image {
	display: block;
	width: 100%;
	max-height: clamp(16rem, 40vw, 30rem);
	object-fit: cover;
	border-radius: var(--radius);
	margin-block-start: var(--space-l);
}

/* Inner pages: the title stands on pegboard — the perforated board every
   workshop hangs its tools on, and the same dot grid as the footer and an
   empty plate. Lead text goes darker than usual to hold against the dots. */
.hero--page {
	background-color: var(--chalk-deep);
	background-image: radial-gradient(circle, rgb(var(--graphite-rgb) / 10%) 1.5px, transparent 1.5px);
	background-size: 28px 28px;
	border-bottom: 0;
}
.hero--page .hero__lead { color: var(--graphite-soft); }

/* One step down on a phone, so a one-word title fits on its line. */
@media (max-width: 30rem) {
	.hero--page h1 { font-size: var(--step-4); }
}

/* With a photo: title and photo side by side on a wide screen, so the
   page opens on the place and its text is still above the fold. */
.hero--split { padding-block: var(--space-xl); }
.hero--split h1 { font-size: var(--step-4); }

@media (min-width: 56rem) {
	.hero--split .hero__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-xl);
		align-items: center;
	}
	.hero--split .hero__image {
		margin: 0;
		max-height: none;
		aspect-ratio: 4 / 3;
		height: auto;
	}
}

.hero__hours {
	margin-block-start: var(--space-xl);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s) var(--space-xl);
	align-items: baseline;
	border-top: var(--rule-heavy) solid var(--brand);
	padding-block-start: var(--space-s);
}

.hours__slot { display: flex; flex-direction: column; gap: var(--space-3xs); }
.hours__day { font-weight: 700; font-size: var(--step-0); }
.hours__time { font-size: var(--step--1); color: var(--fg-muted); font-variant-numeric: tabular-nums; }

.hours__open {
	margin-inline-start: auto;
	align-self: center;
	background: var(--signal);
	color: var(--graphite);
	font-weight: 700;
	font-size: var(--step--1);
	padding: var(--space-3xs) var(--space-2xs);
	border-radius: var(--radius);
}

/* ==========================================================================
   Machine nameplates — the core device of this site

   Modelled on the data plate riveted to a machine: what it is, and the
   numbers that tell you whether it fits your job.
   ========================================================================== */

/* Hairlines between plates come from each plate's own 1px ring sitting in
   the 1px gap, not from a coloured grid background — so a last row with a
   gap in it shows page, not a grey slab. */
.plates {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: var(--rule-weight);
	margin: 0;
	padding: var(--rule-weight);
	list-style: none;
}

.plate {
	background: var(--bg);
	box-shadow: 0 0 0 var(--rule-weight) var(--rule);
	padding: var(--space-m);
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	text-decoration: none;
	color: var(--fg);
	transition: background var(--transition);
}

a.plate:hover,
a.plate:focus-visible { background: var(--white); }

/* Bleeds to the card edges — negative margin cancels the card padding
   rather than the image carrying its own frame. */
.plate__image {
	display: block;
	width: calc(100% + var(--space-m) * 2);
	max-width: none;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) 0;
}

/* Same dot grid as the footer, in the page's own greys: reads as a blank
   plate waiting for its photo, not as a broken image. */
.plate__image--none,
.card__image--none,
.news-card__image--none {
	background-color: var(--chalk-deep);
	background-image: radial-gradient(circle, rgb(var(--graphite-rgb) / 12%) 1.5px, transparent 1.5px);
	background-size: 28px 28px;
}

.plate__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-s);
	border-bottom: var(--rule-heavy) solid var(--brand);
	padding-block-end: var(--space-2xs);
}

.plate__name {
	font-size: var(--step-1);
	font-weight: 700;
	font-variation-settings: 'wdth' 106;
	letter-spacing: 0;
	line-height: var(--leading-snug);
}

.plate__desc { font-size: var(--step--1); color: var(--fg-muted); margin: 0; }
.plate__more { font-size: var(--step--1); color: var(--fg-muted); margin: calc(var(--space-2xs) * -1) 0 0; }

/* Specification rows: label left, figure right, a dotted rule between rows
   so the eye tracks across — as on a real spec sheet. */
.specs { margin: 0; font-size: var(--step--1); }

.specs__row {
	display: flex;
	align-items: baseline;
	gap: var(--space-2xs);
	padding-block: var(--space-3xs);
}
.specs__row + .specs__row { border-top: var(--rule-weight) dotted var(--rule); }

.specs__key { color: var(--fg-muted); margin: 0; }
.specs__val { margin: 0 0 0 auto; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }

.plate__foot {
	margin-block-start: auto;
	font-size: var(--step--1);
	font-weight: 700;
	color: var(--brand);
}

/* Requires a course before use — a real safety fact, so it gets the
   safety colour and nothing else on the page does. */
.plate__badge {
	display: inline-block;
	background: var(--signal);
	color: var(--graphite);
	font-size: var(--step--1);
	font-weight: 700;
	padding: 0 var(--space-2xs);
	border-radius: var(--radius);
	white-space: nowrap;
}

/* ==========================================================================
   Feature — one page given a band of its own on the homepage (the
   project chosen under Anpassa → Sidor)
   ========================================================================== */

.feature {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--white);
	border: var(--rule-weight) solid var(--rule);
	color: var(--fg);
	text-decoration: none;
	transition: border-color var(--transition);
}
.feature:hover { border-color: var(--steel-light); }
.feature:hover .link-arrow { text-decoration: underline; }

.feature__image {
	width: 100%;
	height: 100%;
	min-height: 16rem;
	object-fit: cover;
}

.feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-s);
	padding: var(--space-xl) var(--space-l);
	border-inline-start: var(--rule-heavy) solid var(--brand);
}
.feature__body .link-arrow { margin: 0; }
.feature__text { margin: 0; color: var(--fg-muted); }

.feature:not(:has(.feature__image)) { grid-template-columns: minmax(0, 1fr); }

/* On the plywood band the band is the frame — no white box inside it. */
.band--ply .feature { background: transparent; border: 0; gap: var(--space-xl); }
.band--ply .feature__image { border-radius: var(--radius); }
.band--ply .feature__body { padding: 0; border: 0; }
.band--ply .feature__text { color: var(--graphite-soft); }

@media (max-width: 48rem) {
	.feature { grid-template-columns: minmax(0, 1fr); }
	.feature__image { aspect-ratio: 16 / 10; min-height: 0; }
	.feature__body {
		padding: var(--space-l) var(--space-m);
		border-inline-start: 0;
		border-top: var(--rule-heavy) solid var(--brand);
	}
}

/* ==========================================================================
   Membership call to action
   ========================================================================== */

.enrol {
	background: var(--graphite);
	color: var(--chalk);
	padding-block: var(--space-2xl);
}
.enrol h2 { color: var(--white); }
.enrol p { color: var(--steel-light); }

.price {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s) var(--space-l);
	margin-block: var(--space-l);
}
.price > div { max-width: 16rem; }
.price dt, .price dd { margin: 0; }
.price__amount {
	font-size: var(--step-3);
	font-weight: 700;
	font-variation-settings: 'wdth' 108;
	line-height: var(--leading-tight);
	font-variant-numeric: tabular-nums;
}
.price__who { font-size: var(--step--1); color: var(--fg-muted); line-height: var(--leading-snug); margin-block-start: var(--space-3xs); }

.enrol .price__amount { color: var(--white); }
.enrol .price__who { color: var(--steel-light); }

.button,
.wpcf7-submit {
	display: inline-block;
	background: var(--signal);
	color: var(--graphite);
	font: inherit;
	font-weight: 700;
	font-size: var(--step-0);
	padding: var(--space-xs) var(--space-m);
	border: 0;
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--transition);
}
.button:hover,
.wpcf7-submit:hover { transform: translateY(-2px); }

.button--ghost {
	background: transparent;
	color: var(--fg);
	box-shadow: inset 0 0 0 2px var(--fg);
}
.button--ghost:focus-visible { box-shadow: inset 0 0 0 2px var(--fg), 0 0 0 2px var(--graphite); }

.link-arrow {
	display: inline-block;
	margin-block-start: var(--space-m);
	font-weight: 700;
	color: var(--brand);
	text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }

/* ==========================================================================
   How it works — three real steps, no marketing padding
   ========================================================================== */

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each step hangs from a rule, numbered like a station on the floor plan. */
.steps__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	border-top: var(--rule-heavy) solid rgb(var(--white-rgb) / 35%);
	padding-block-start: var(--space-s);
}

.steps__number {
	font-size: var(--step-4);
	font-weight: 800;
	font-variation-settings: 'wdth' 125;
	font-variant-numeric: tabular-nums;
	color: var(--white);
	line-height: 1;
	margin-block-end: var(--space-2xs);
}

.steps__item h3 { font-size: var(--step-1); color: var(--white); }
.steps__item p { margin: 0; color: var(--brand-tint); }

/* ==========================================================================
   Logos — sponsors, and partner logos in a "Logotyper" gallery
   ========================================================================== */

/* Sized by area, not by height. At one shared height a long wordmark
   (Husqvarna Group, 8:1) shrinks to a thread beside a compact mark
   (Verkstaden 5, 2.6:1); matching the area of a --logo-size square makes
   them read as the same size. --logo-ratio is the image's width over its
   height, set inline by makejkpg_logo_style(); --logo-size is set by
   whatever holds the logos. A near-square logo stops at 80% of the square
   so it doesn't loom over the wordmarks. The first height is for a
   browser without sqrt(). In a box too narrow for it, a logo scales down
   inside its height rather than being squashed. */
.logo,
.prose .wp-block-gallery.is-style-logos figure.wp-block-image img {
	display: block;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	height: calc(var(--logo-size, 4.5rem) * 0.5);
	height: min(calc(var(--logo-size, 4.5rem) / sqrt(var(--logo-ratio, 3))), calc(var(--logo-size, 4.5rem) * 0.8));
}

/* A sponsor with no logo yet still gets credited, set in the headline
   face rather than left out. */
.sponsor-wordmark {
	display: block;
	font-size: var(--step-1);
	font-weight: 800;
	font-variation-settings: 'wdth' 115;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--fg-muted);
	white-space: nowrap;
}

/* ==========================================================================
   Sponsors marquee — homepage proof point
   ========================================================================== */

/* Full width between two hairlines, fading out where the content column
   ends, so the logos run in from the edge rather than being cut off. */
.marquee {
	--logo-size: clamp(3.5rem, 3rem + 1.5vw, 4.5rem);
	overflow: hidden;
	margin-block-start: var(--space-l);
	padding-block: var(--space-l);
	border-block: var(--rule-weight) solid var(--rule);
	mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}

.marquee__track {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
	width: max-content;
	padding-inline-end: var(--space-2xl);
	animation: makejkpg-marquee 45s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track { animation-play-state: paused; }

/* Every item is as tall as the tallest logo can be, so a short wordmark
   sits on the same centre line as a tall mark. */
.marquee__item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	min-height: calc(var(--logo-size) * 0.8);
	text-decoration: none;
}

/* One tone until pointed at, so eight brand colours don't compete with the
   page. Multiply is the safety net for a logo uploaded later on white: the
   white takes the page's colour instead of showing as a box. */
.marquee .logo {
	filter: grayscale(1);
	mix-blend-mode: multiply;
	opacity: 0.8;
	transition: opacity var(--transition), filter var(--transition);
}
.marquee__track a:hover .logo,
.marquee__track a:focus-visible .logo { filter: none; opacity: 1; }

/* No motion: the global rule above would end the animation at its start
   and clip every logo past the viewport. Lay them out in rows instead,
   once. */
@media (prefers-reduced-motion: reduce) {
	.marquee { mask-image: none; }
	.marquee__track {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-l) var(--space-xl);
		padding-inline: var(--gutter);
	}
	.marquee__item[aria-hidden='true'] { display: none; }
}

@keyframes makejkpg-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Under the strip: the way in for a new sponsor, and the pause button. */
.marquee__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2xs) var(--space-m);
	margin-block-start: var(--space-s);
	font-size: var(--step--1);
	color: var(--fg-muted);
}
.marquee__foot p { margin: 0; }
.marquee__foot a { font-weight: 700; color: var(--brand); }

.section-links {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-l);
}

.marquee__toggle {
	margin-inline-start: auto;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--fg-muted);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

/* ==========================================================================
   Community — where to talk to us, and what happens every week
   ========================================================================== */

/* Heading and text on the left, the ways in on the right. */
.community {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-m) var(--space-xl);
	align-items: end;
	border-block: var(--rule-weight) solid var(--rule);
	padding-block: var(--space-l);
}

.community__links p {
	color: var(--fg-muted);
	max-width: var(--measure-short);
	margin-block: var(--space-2xs) 0;
}

.community__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
}

@media (max-width: 48rem) {
	.community { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Cards — a page as a photo with its title: the activities on the
   homepage, the sub-pages of Aktiviteter
   ========================================================================== */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	gap: var(--space-xl) var(--space-l);
}

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	color: var(--fg);
	text-decoration: none;
}

.card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--graphite);
	margin-block-end: var(--space-2xs);
}

.card__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.2, 0, 0, 1);
}
.card:hover .card__image { transform: scale(1.03); }

/* When it happens, on the photo like a label on a workshop shelf. */
.card__when {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: var(--space-s);
	max-width: calc(100% - var(--space-s));
	padding: var(--space-3xs) var(--space-xs);
	background: var(--brand);
	color: var(--white);
	font-size: var(--step--1);
	font-weight: 700;
	font-variation-settings: 'wdth' 112;
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: var(--leading-snug);
}

.card__title { font-size: var(--step-1); line-height: var(--leading-snug); }
.card:hover .card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.card__text { font-size: var(--step--1); color: var(--fg-muted); line-height: var(--leading-snug); }

/* A list of linked rows: activities, sub-pages. */
.rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--rule-weight) solid var(--rule);
}
.rows > li { border-bottom: var(--rule-weight) solid var(--rule); margin: 0; }

.row {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding: var(--space-s) var(--space-xl) var(--space-s) 0;
	color: var(--fg);
	text-decoration: none;
}
.row::after {
	content: '\2192';
	position: absolute;
	right: var(--space-2xs);
	top: 50%;
	transform: translateY(-50%);
	color: var(--brand);
	font-weight: 700;
	transition: transform var(--transition);
}
.row:hover::after { transform: translate(var(--space-3xs), -50%); }
.row:hover .row__title { text-decoration: underline; text-decoration-thickness: 1px; }

.row__title { font-weight: 700; font-size: var(--step-0); }
.row__text { font-size: var(--step--1); color: var(--fg-muted); line-height: var(--leading-snug); }

/* .prose would otherwise colour these as body links. */
.prose .row { color: var(--fg); }

/* ==========================================================================
   News cards
   ========================================================================== */

.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--space-l);
}

.news-card { display: flex; flex-direction: column; gap: var(--space-2xs); text-decoration: none; color: var(--fg); }
.news-card:hover .news-card__title { text-decoration: underline; text-decoration-thickness: 1px; }

.news-card__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--radius);
	margin-block-end: var(--space-2xs);
}

.news-card__date { font-size: var(--step--1); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.news-card__title { font-weight: 700; font-size: var(--step-0); font-variation-settings: 'wdth' 100; letter-spacing: 0; line-height: var(--leading-snug); }
.news-card__excerpt { margin: 0; font-size: var(--step--1); color: var(--fg-muted); }

.post-back { margin-block-start: var(--space-xl); }
.post-back a { color: var(--brand); font-weight: 700; text-decoration: none; }
.post-back a:hover { text-decoration: underline; }

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	align-items: center;
}
.pagination .page-numbers {
	padding: var(--space-3xs) var(--space-2xs);
	color: var(--brand);
	font-weight: 700;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.pagination .page-numbers.current { color: var(--fg); box-shadow: inset 0 -2px 0 var(--brand); }

/* ==========================================================================
   Fact box — the facts beside a page's text: fees and payment details on
   Bli medlem, address and links on Kontakt. Same rule as a nameplate.
   ========================================================================== */

/* Stays in view beside a long form — only side by side, though. In the
   single column it sits above the text and must scroll away with it. */
@media (min-width: 56.0625rem) {
	.split__aside { position: sticky; top: calc(var(--header-height) + var(--space-m)); }
}

.factbox {
	background: var(--white);
	border: var(--rule-weight) solid var(--rule);
	border-top: var(--rule-heavy) solid var(--brand);
	padding: var(--space-m);
}
.factbox p { margin-block-end: var(--space-2xs); }
.factbox p:last-child { margin-block-end: 0; }
.factbox a { color: var(--brand); }

.factbox__heading {
	margin: var(--space-m) 0 var(--space-2xs);
	font-size: var(--step--1);
	font-weight: 700;
	font-variation-settings: 'wdth' 100;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fg-muted);
}
.factbox__heading:first-child { margin-block-start: 0; }

.factbox .price { margin-block: 0; }

.factbox__list { list-style: none; margin: 0; padding: 0; }
.factbox__list li + li { margin-block-start: var(--space-3xs); }
.factbox__small { font-size: var(--step--1); color: var(--fg-muted); margin-block-start: var(--space-m) !important; }

.facts { margin: 0; }
.facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-s);
	padding-block: var(--space-2xs);
}
.facts > div + div { border-top: var(--rule-weight) dotted var(--rule); }
.facts dt { margin: 0; color: var(--fg-muted); }
.facts dd { margin: 0; font-weight: 700; font-size: var(--step-1); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A page's own facts (När, Var…): values are phrases, not figures, so the
   label sits above its value instead of beside it. */
.factlist { margin: 0; }
.factlist > div { padding-block: var(--space-2xs); }
.factlist > div + div { border-top: var(--rule-weight) dotted var(--rule); }
.factlist dt { margin: 0; font-size: var(--step--1); color: var(--fg-muted); }
.factlist dd { margin: 0; font-weight: 700; line-height: var(--leading-snug); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Editorial content (post/page body from the block editor)
   ========================================================================== */

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose h2 { margin-block-start: var(--space-xl); font-size: var(--step-2); }
.prose h3 { margin-block-start: var(--space-l); }
.prose > :first-child { margin-block-start: 0; }
.prose ul, .prose ol { padding-inline-start: var(--space-m); }
.prose li + li { margin-block-start: var(--space-3xs); }
.prose img { border-radius: var(--radius); }

/* A photo on its own keeps the column's width, but a portrait phone photo
   is held to a screen's height rather than filling two. */
.prose > .wp-block-image img { width: auto; max-height: min(80vh, 36rem); }
.prose figure { margin-inline: 0; }
.prose figure + figure { margin-block-start: var(--space-m); }
.prose figcaption { margin-block-start: var(--space-2xs); font-size: var(--step--1); color: var(--fg-muted); }

.prose blockquote {
	margin: var(--space-l) 0;
	padding-inline-start: var(--space-m);
	border-inline-start: var(--rule-heavy) solid var(--brand);
	font-size: var(--step-1);
}

.prose .wp-block-separator { margin-block: var(--space-xl); }

/* Galleries — a Gallery block, or photos placed one after another, which
   inc/content.php turns into one: photos in columns at their own
   proportions, like prints pinned up side by side. No cropping — portrait
   phone photos stay portrait — and no lone photo left on a last row,
   whatever the count. A long run gets narrower columns so it stays short;
   each photo opens full size on click. Core's gallery is a flex row that
   sizes each image itself; those widths are reset here. */
.prose .wp-block-gallery {
	display: block;
	columns: 3 10rem;
	column-gap: var(--space-2xs);
	margin-block: var(--space-m);
}
.prose .wp-block-gallery:not(:has(> figure:nth-child(3))) { columns: 2; }
.prose .wp-block-gallery:has(> figure:nth-child(7)) { columns: 4 6.5rem; }   /* three across even on a phone */
/* Spacing as padding: core zeroes the figure's margin with an ID-weight
   selector, which only !important would beat. */
.prose .wp-block-gallery > figure.wp-block-image {
	width: auto !important;
	padding-block-end: var(--space-2xs);
	break-inside: avoid;
}
.prose .wp-block-gallery img { width: 100%; height: auto; }

/* Partner logos — the "Logotyper" style on a Gallery block (NextMetals):
   one row between hairlines, matched in area like the sponsors' (.logo),
   each linking to its organisation. No columns, no lightbox. */
.prose .wp-block-gallery.is-style-logos {
	--logo-size: 4.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-l) var(--space-xl);
	columns: auto;
	margin-block: var(--space-l);
	padding: var(--space-l) 0;
	border-block: var(--rule-weight) solid var(--rule);
}
.prose .wp-block-gallery.is-style-logos > figure.wp-block-image {
	flex: 0 1 auto;
	padding: 0;
}
.prose .wp-block-gallery.is-style-logos a { display: block; }
.prose .wp-block-gallery.is-style-logos > figcaption {
	flex-basis: 100%;
	order: -1;
	margin: 0 0 var(--space-3xs);
	text-align: center;
}

/* Core's lightbox, which a gallery photo opens in: dark like a photo
   viewer, not the white it takes from global styles. Core sets these
   colours as inline styles, which only !important overrides. */
.wp-lightbox-overlay .scrim { background-color: var(--graphite) !important; }
.wp-lightbox-overlay button { fill: var(--white) !important; color: var(--white); }

/* A list of dates (Modellbyggträffar) — the "Datum" style on a List block.
   Each date gets a row of its own, like a schedule pinned to the wall. */
ul.is-style-dates {
	list-style: none;
	padding: 0;
	border-top: var(--rule-heavy) solid var(--brand);
}
ul.is-style-dates > li {
	margin: 0;
	padding-block: var(--space-xs);
	border-bottom: var(--rule-weight) solid var(--rule);
	font-variant-numeric: tabular-nums;
}
ul.is-style-dates strong {
	display: inline-block;
	min-width: 14ch;
	font-variation-settings: 'wdth' 112;
}

/* People as name badges (Styrelsen) — the "Personer" style on a List
   block. Each item is "<strong>Roll</strong> Namn": the bold part becomes
   the badge's label, the rest its name. Italic marks a vacant post. Same
   brand rule as a nameplate. */
ul.is-style-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	gap: var(--space-s);
	list-style: none;
	padding: 0;
	margin-block: var(--space-m) 0;
}
ul.is-style-people > li {
	margin: 0;
	padding: var(--space-s) var(--space-m);
	background: var(--white);
	border: var(--rule-weight) solid var(--rule);
	border-top: var(--rule-heavy) solid var(--brand);
	font-size: var(--step-1);
	font-weight: 700;
	font-variation-settings: 'wdth' 104;
	line-height: var(--leading-snug);
}
ul.is-style-people strong {
	display: block;
	margin-block-end: var(--space-3xs);
	font-size: var(--step--1);
	font-variation-settings: 'wdth' 100;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fg-muted);
}
ul.is-style-people strong a { color: var(--brand); text-decoration: none; }
ul.is-style-people strong a:hover { text-decoration: underline; }
ul.is-style-people em { font-style: normal; font-weight: 400; color: var(--fg-muted); }

/* A page with name badges lets them use the full width, so a board of
   eight fits in two rows; its text keeps the reading measure. */
.page-body:has(> .prose > .is-style-people),
.prose:has(> .is-style-people) { max-width: none; }
.prose:has(> .is-style-people) > :not(.is-style-people) { max-width: var(--measure); }

/* A history (Om föreningen) — the "Tidslinje" style on a List block. Each
   item is "<strong>År</strong> Vad som hände"; the year sits on the line.
   The activity log's events hang on the same line (.log-events). */
ul.is-style-timeline,
.log-events {
	list-style: none;
	margin-block: var(--space-m);
	padding: 0 0 0 var(--space-l);
	border-inline-start: var(--rule-heavy) solid var(--brand-tint);
}
ul.is-style-timeline > li,
.log-event {
	position: relative;
	margin: 0;
	padding-block-end: var(--space-l);
}
ul.is-style-timeline > li:last-child,
.log-event:last-child { padding-block-end: 0; }

/* The dot, centred on the line. */
ul.is-style-timeline > li::before,
.log-event::before {
	content: '';
	position: absolute;
	inset-inline-start: calc(var(--space-l) * -1 - 0.5rem - var(--rule-heavy) / 2);
	inset-block-start: 0.3em;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 0 3px var(--bg);
}
ul.is-style-timeline strong {
	display: block;
	font-size: var(--step-2);
	font-weight: 800;
	font-variation-settings: 'wdth' 125;
	font-variant-numeric: tabular-nums;
	line-height: var(--leading-tight);
	color: var(--brand);
}

/* A statement set large (Om föreningen) — the editor's Pullquote block. */
.prose .wp-block-pullquote {
	margin-block: var(--space-xl);
	padding: 0;
	border: 0;
	text-align: start;
}
.prose .wp-block-pullquote blockquote {
	margin: 0;
	padding-inline-start: var(--space-m);
	border-inline-start: var(--rule-heavy) solid var(--brand);
}
.prose .wp-block-pullquote p {
	margin: 0;
	font-size: var(--step-3);
	font-weight: 700;
	font-variation-settings: 'wdth' 112;
	letter-spacing: -0.015em;
	line-height: var(--leading-tight);
	text-wrap: balance;
}

/* ==========================================================================
   Aktivitetslogg (page-historik.php) — a timeline: each year down the
   left, its events beside it, each event's photos as one row
   ========================================================================== */

.log-years {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2xs) var(--space-m);
}
.log-years__label {
	font-size: var(--step--1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fg-muted);
}
.log-years a {
	font-size: var(--step-1);
	font-weight: 800;
	font-variation-settings: 'wdth' 125;
	font-variant-numeric: tabular-nums;
	color: var(--brand);
	text-decoration: none;
}
.log-years a:hover { text-decoration: underline; }

.log-year {
	display: grid;
	grid-template-columns: 10rem minmax(0, 46rem);
	gap: var(--space-l);
	align-items: start;
	padding-block-start: var(--space-xl);
	border-top: var(--rule-weight) solid var(--rule);
}

/* The year stays in view while its events scroll past. */
.log-year__label {
	position: sticky;
	top: calc(var(--header-height) + var(--space-m));
	font-size: var(--step-4);
	font-weight: 800;
	font-variation-settings: 'wdth' 125;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--brand);
}

.log-events { margin-block: 0; }
.log-event { padding-block-end: var(--space-xl); }

.log-event__date {
	margin: 0;
	font-size: var(--step--1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	color: var(--brand);
}
.log-event__title { font-size: var(--step-2); margin-block-start: var(--space-3xs); }
.log-event__text { margin-block-start: var(--space-s); }

.log-photos { margin-block-start: var(--space-m); }
.log-photos__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-2xs);
}
.log-photos__grid figure { margin: 0; }
.log-photos__grid img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}

.log-photos__more summary {
	display: inline-block;
	margin-block-start: var(--space-xs);
	font-size: var(--step--1);
	font-weight: 700;
	color: var(--brand);
	cursor: pointer;
	list-style: none;
}
.log-photos__more summary::-webkit-details-marker { display: none; }
.log-photos__more summary::after { content: ' \2193'; }
.log-photos__more[open] summary::after { content: ' \2191'; }
.log-photos__more summary:hover { text-decoration: underline; }
.log-photos__more:not([open]) .log-photos__close,
.log-photos__more[open] .log-photos__open { display: none; }
.log-photos__more[open] summary { margin-block-end: var(--space-2xs); }

@media (max-width: 48rem) {
	.log-year { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
	.log-year__label { position: static; font-size: var(--step-3); }
	.log-photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Highlighted text the board still has to fill in (Integritetspolicy).
   Yellow on purpose: it is a "pay attention" before launch. */
.prose mark { background: var(--signal); color: var(--graphite); padding-inline: var(--space-3xs); }

/* Buttons placed with the block editor get the theme's own button. */
.prose .wp-block-button__link {
	display: inline-block;
	background: var(--signal);
	color: var(--graphite);
	font-weight: 700;
	padding: var(--space-xs) var(--space-m);
	border-radius: var(--radius);
	text-decoration: none;
}
.prose .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--fg);
	box-shadow: inset 0 0 0 2px var(--fg);
}

/* FAQ — the editor's Details block: native <details>/<summary>, an
   accordion with no JavaScript. */
.prose details {
	border-top: var(--rule-weight) solid var(--rule);
	padding-block: var(--space-s);
}
.prose details + details { margin-block-start: 0; }
.prose details:not(:has(+ details)) { border-bottom: var(--rule-weight) solid var(--rule); }

.prose summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after {
	content: '+';
	font-size: var(--step-1);
	line-height: 1;
	color: var(--brand);
	flex-shrink: 0;
}
.prose details[open] summary::after { content: '\2212'; }
.prose details > :not(summary) { margin-block: var(--space-s) 0; color: var(--fg-muted); }

/* ==========================================================================
   Forms — Contact Form 7 (the membership application). Its own stylesheet
   is switched off in functions.php; this is all the styling it gets.
   ========================================================================== */

.wpcf7 form > p,
.wpcf7 form > div > p { margin: 0 0 var(--space-s); }

/* CF7 wraps its hidden inputs in a fieldset; its own stylesheet hides
   the frame, and that stylesheet is off. */
.wpcf7 .hidden-fields-container { display: none; }

.wpcf7 label { display: block; font-weight: 700; font-size: var(--step--1); }

.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='tel'],
.wpcf7 input[type='number'],
.wpcf7 input[type='date'],
.wpcf7 textarea,
.wpcf7 select {
	display: block;
	width: 100%;
	margin-block-start: var(--space-3xs);
	padding: var(--space-2xs) var(--space-xs);
	font: inherit;
	font-weight: 400;
	font-size: var(--step-0);
	color: var(--fg);
	background: var(--white);
	border: var(--rule-weight) solid var(--steel);
	border-radius: var(--radius);
}
.wpcf7 textarea { min-height: 8rem; }

.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .wpcf7-not-valid { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.wpcf7-not-valid-tip { display: block; margin-block-start: var(--space-3xs); color: var(--error); font-size: var(--step--1); font-weight: 600; }

.wpcf7-response-output {
	margin: var(--space-m) 0 0;
	padding: var(--space-s);
	border: 2px solid var(--brand);
	font-size: var(--step--1);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--error); }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7-response-output:empty { display: none; }

.wpcf7-spinner { display: inline-block; width: var(--space-m); margin-inline-start: var(--space-s); vertical-align: middle; visibility: hidden; }
.wpcf7 form.submitting .wpcf7-spinner { visibility: visible; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   Forms — the member register plugin's application ([medlemsansokan]).
   The plugin ships no CSS: it writes these classes and the theme decides
   how they look, the same as the Contact Form 7 form above.
   ========================================================================== */

.form .form__field { margin: 0 0 var(--space-s); }
.form label,
.form legend { display: block; font-weight: 700; font-size: var(--step--1); }
.form .form__optional { font-weight: 400; color: var(--fg-muted); }

.form input[type='text'],
.form input[type='email'],
.form input[type='tel'] {
	display: block;
	width: 100%;
	margin-block-start: var(--space-3xs);
	padding: var(--space-2xs) var(--space-xs);
	font: inherit;
	font-weight: 400;
	font-size: var(--step-0);
	color: var(--fg);
	background: var(--white);
	border: var(--rule-weight) solid var(--steel);
	border-radius: var(--radius);
}
.form input[aria-invalid='true'] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.form .form__error { display: block; margin-block-start: var(--space-3xs); color: var(--error); font-size: var(--step--1); font-weight: 600; }

.form .form__choices { border: 0; padding: 0; margin-inline: 0; }
.form .form__choices legend { padding: 0; margin-block-end: var(--space-3xs); }
.form .form__choice {
	display: flex;
	gap: var(--space-xs);
	align-items: baseline;
	padding: var(--space-xs);
	margin-block-start: var(--space-3xs);
	font-weight: 400;
	font-size: var(--step--1);
	line-height: var(--leading-snug);
	border: var(--rule-weight) solid var(--steel);
	border-radius: var(--radius);
	background: var(--white);
	cursor: pointer;
}
.form .form__choice:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.form .form__choice input { accent-color: var(--brand); }
.form .form__choice strong { display: block; font-size: var(--step-0); }

.form .form__hint { margin-block-start: var(--space-2xs); font-size: var(--step--1); color: var(--fg-muted); }

.form__message {
	margin: 0 0 var(--space-m);
	padding: var(--space-s);
	border: 2px solid var(--brand);
	font-size: var(--step--1);
}
.form__message > :last-child { margin-block-end: 0; }
.form__message--error { border-color: var(--error); }

/* ==========================================================================
   Welcome — Bli medlem after applying (the member register plugin)

   The page becomes one brand band: what happened, in the biggest type on
   the page; the membership as a data plate riveted to it — fee, years,
   paid or not; and three numbered next steps, as on the homepage. Signal
   yellow only where something is still to do: the pay button and the
   "väntar på betalning" status. Paid is brand blue.
   ========================================================================== */

.welcome {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl) var(--space-2xl);
	align-items: start;
}
.welcome:focus { outline: none; }

@media (min-width: 52rem) {
	.welcome { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	.welcome__next { grid-column: 1 / -1; }
}

.welcome__label {
	margin: 0 0 var(--space-s);
	font-size: var(--step--1);
	font-weight: 700;
	font-variation-settings: 'wdth' 100;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-tint);   /* 4.6:1 on brand blue */
}

.welcome__heading {
	margin: 0;
	font-size: var(--step-5);
	font-weight: 800;
	font-variation-settings: 'wdth' 125;
	letter-spacing: -0.02em;
	line-height: var(--leading-tight);
	color: var(--white);
}

.welcome__lead {
	margin: var(--space-s) 0 0;
	max-width: 38ch;
	font-size: var(--step-1);
	line-height: var(--leading-snug);
	color: var(--white);
}

/* The plate: chalk, a rivet in each corner, the nameplate's head and
   spec rows. */
.welcome__plate {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: var(--space-l) var(--space-m);
	color: var(--graphite);
	border-radius: var(--radius);
	background:
		radial-gradient(circle, var(--steel) 0 3px, transparent 3.5px) left 6px top 6px / 12px 12px no-repeat,
		radial-gradient(circle, var(--steel) 0 3px, transparent 3.5px) right 6px top 6px / 12px 12px no-repeat,
		radial-gradient(circle, var(--steel) 0 3px, transparent 3.5px) left 6px bottom 6px / 12px 12px no-repeat,
		radial-gradient(circle, var(--steel) 0 3px, transparent 3.5px) right 6px bottom 6px / 12px 12px no-repeat,
		var(--chalk);
	box-shadow: 0 var(--space-2xs) var(--space-l) rgb(var(--graphite-rgb) / 30%);
}
.welcome__plate > * { margin: 0; }
.welcome__plate .specs { font-size: var(--step-0); }
.welcome__plate .specs__val {
	font-size: var(--step-1);
	font-weight: 700;
	font-variation-settings: 'wdth' 108;
}

.welcome__status {
	font-size: var(--step--1);
	font-weight: 700;
	padding: 0 var(--space-2xs);
	border-radius: var(--radius);
	white-space: nowrap;
}
.welcome__status--due { background: var(--signal); color: var(--graphite); }
.welcome__status--paid { background: var(--brand); color: var(--white); }

.welcome__pay .button { display: block; text-align: center; font-size: var(--step-1); }
.welcome__manual { font-size: var(--step--1); color: var(--fg-muted); }

.welcome__next .steps__item h4 { margin: 0; font-size: var(--step-1); color: var(--white); }
.welcome__next .steps__item p { margin: 0; color: var(--brand-tint); }

/* ==========================================================================
   Footer

   Modelled on the "giant wordmark" pattern: a compact utility row of
   practical facts, then the name of the place filling the width like it's
   stencilled on a workshop wall, then one quiet line of fine print.
   ========================================================================== */

.site-footer { font-size: var(--step--1); }

.site-footer__top {
	background-color: var(--brand-deep);
	/* A soft light-glow behind the wordmark, like a lamp low over a
	   workbench, over a visible dot grid — flat colour was the complaint. */
	background-image:
		radial-gradient(ellipse 60rem 30rem at 20% 100%, rgb(var(--brand-tint-rgb) / 30%), transparent 70%),
		radial-gradient(circle, rgb(var(--white-rgb) / 18%) 1.5px, transparent 1.5px);
	background-size: 100% 100%, 28px 28px;
	background-repeat: no-repeat, repeat;
	color: var(--brand-tint);
	padding-block: var(--space-2xl);
	overflow: hidden;
}

.site-footer__utility {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-l);
	padding-block-end: var(--space-2xl);
	border-bottom: var(--rule-weight) solid var(--rule-on-dark);
}

.site-footer h2 {
	font-size: var(--step--1);
	font-weight: 700;
	font-variation-settings: 'wdth' 100;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--white);
	margin-block-end: var(--space-xs);
}
.site-footer p { margin-block-end: var(--space-2xs); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-block-start: var(--space-3xs); }
.site-footer__top a { color: var(--white); }
.site-footer__top a:hover { color: var(--brand-tint); }
.site-footer__hours { font-variant-numeric: tabular-nums; }
.site-footer__social { margin-block-start: var(--space-s) !important; }

/* The name of the place, as large as the line will carry — the footer's
   one big gesture, everything else stays quiet around it. */
/* 11vw keeps JÖNKÖPING, the longer line, inside the gutters at any width;
   the floor only stops it shrinking further on the narrowest phones. */
.site-footer__wordmark {
	font-size: clamp(2.25rem, 11vw, 9rem);
	line-height: 0.86;
	font-weight: 800;
	font-variation-settings: 'wdth' 125;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--white);
	margin: var(--space-l) 0 0;
	max-width: none;
	text-wrap: balance;
}

.site-footer__credit {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs) var(--space-m);
	margin: var(--space-xl) 0 0;
	padding-block-start: var(--space-m);
	border-top: var(--rule-weight) solid var(--rule-on-dark);
	color: var(--brand-tint);
	font-size: var(--step--1);
	max-width: none;
}

/* ==========================================================================
   Sponsorer page
   ========================================================================== */

/* Four across on a wide screen, never fewer than two on a phone. */
.sponsor-grid {
	--logo-size: clamp(4rem, 3rem + 2.5vw, 5.5rem);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, calc(50% - var(--rule-weight))), 1fr));
	grid-auto-rows: 1fr;
	gap: var(--rule-weight);
	margin: 0;
	padding: var(--rule-weight);
	list-style: none;
}
.sponsor-grid > li { display: flex; }

/* Same 1px ring in a 1px gap as the nameplates, so a short last row shows
   page rather than a grey slab. */
.sponsor-grid__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--white);
	box-shadow: 0 0 0 var(--rule-weight) var(--rule);
	color: var(--fg);
	text-decoration: none;
}

.sponsor-grid__logo {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--logo-size) + var(--space-m) * 2);
	padding: var(--space-m) clamp(var(--space-s), 3vw, var(--space-l));
}

/* The label under the logo, as on a nameplate: what it is, then the
   detail. Always two lines tall, so the rules line up across a row
   whether a sponsor has a note or not. Brand rule when the card is a
   link being pointed at. */
.sponsor-grid__label {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	min-height: calc(2lh + var(--space-3xs) + var(--space-xs) * 2);
	padding: var(--space-xs) clamp(var(--space-s), 3vw, var(--space-m));
	border-top: var(--rule-weight) solid var(--rule);
	font-size: var(--step--1);
	line-height: var(--leading-snug);
	transition: border-color var(--transition);
}
.sponsor-grid__name { font-weight: 700; }
.sponsor-grid__note { color: var(--fg-muted); }

a.sponsor-grid__item:hover .sponsor-grid__label,
a.sponsor-grid__item:focus-visible .sponsor-grid__label { border-top-color: var(--brand); }
a.sponsor-grid__item:hover .sponsor-grid__name,
a.sponsor-grid__item:focus-visible .sponsor-grid__name { color: var(--brand); }

/* ==========================================================================
   Print — a page of facts on paper: no nav, no photo hero, no marquee.
   ========================================================================== */

@media print {
	body { background: var(--white); font-size: 11pt; }

	.site-header { position: static !important; border: 0; }
	.nav, .nav-toggle, .skip-link, .marquee, .marquee__foot, .section-links, .hero__media,
	.site-footer__wordmark, .enrol .button, .post-back { display: none !important; }

	.hero--photo { min-height: 0; display: block; }
	.hero--photo .hero__content, .hero--photo h1, .hero--photo .hours__day { color: var(--fg); padding: 0; }
	.hero--photo .hero__lead, .hero--photo .hours__time { color: var(--fg-muted); }

	.section, .band, .enrol, .site-footer__top { padding-block: var(--space-m); }
	.band, .hero--page, .enrol, .site-footer__top { background: none; color: var(--fg); }
	.enrol h2, .enrol .price__amount, .site-footer h2, .site-footer__top a,
	.band--brand .steps__number, .band--brand .steps__item h3, .band--brand .steps__item p, .band__label { color: var(--fg); }

	.split__aside { position: static; }
	.plate, .factbox, .feature { break-inside: avoid; }

	.prose a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.85em; color: var(--fg-muted); }
}