/* Halewell theme stylesheet. Reset, tokens and base sit in cascade layers; components are unlayered so they win over
   core block styles. No framework, no icon font, no !important, overflow: clip never hidden. */
@layer reset, tokens;

@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	body { margin: 0; text-size-adjust: 100%; }
	img, svg, video, iframe { max-width: 100%; }
	img, video { height: auto; }
	pre { max-width: 100%; overflow-x: auto; }
	:where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, figcaption, blockquote, td, th) { overflow-wrap: break-word; }
	[hidden] { display: none; }
	button, input, select, textarea { font: inherit; color: inherit; }
	button { cursor: pointer; }
	a { color: inherit; }
	summary { cursor: pointer; }
}

@layer tokens {
	/* Fallback faces, measured by tools/font_build.py: the Roboto pair for Android, the Arial pair for the rest.
	   Each face only applies where its local() font exists, so the stacks below list them in that order. */
	@font-face { font-family: "Hanken Fallback Roboto"; src: local("Roboto"); size-adjust: 101.16%; ascent-override: 98.86%; descent-override: 29.95%; line-gap-override: 0.00%; }

	@font-face { font-family: "Hanken Fallback"; src: local("Arial"); size-adjust: 101.70%; ascent-override: 98.33%; descent-override: 29.79%; line-gap-override: 0.00%; }

	@font-face { font-family: "Unbounded Fallback Roboto"; src: local("Roboto"); size-adjust: 141.05%; ascent-override: 70.54%; descent-override: 17.37%; line-gap-override: 0.00%; }

	@font-face { font-family: "Unbounded Fallback"; src: local("Arial Black"); size-adjust: 114.98%; ascent-override: 86.54%; descent-override: 21.31%; line-gap-override: 0.00%; }
	:root {
		--hw-bg: #FFF; --hw-paper: #F6F6F2; --hw-paper-2: #EDEDE7; --hw-ink: #101010; --hw-mut: #5E5E5E; --hw-line: #E8E8E8;
		--hw-acc: #FFE45C; --hw-acc-2: #FFD400; --hw-acc-ink: #101010; --hw-ok: #2E7D5B; --hw-warn: #C24E3A;
		--hw-btn: #101010; --hw-btn-ink: #FFF;
		--hw-font: "Hanken Grotesk", "Hanken Fallback Roboto", "Hanken Fallback", sans-serif;
		--hw-disp: "Unbounded", "Unbounded Fallback Roboto", "Unbounded Fallback", sans-serif;
		--hw-r: 22px; --hw-r-btn: 12px; --hw-r-img: 22px; --hw-r-sm: 12px;
		--hw-wide: 82.5rem; --hw-measure: 66ch; --hw-side: 20rem; --hw-gap: 3.5rem; --hw-header-h: 72px;
		--hw-shadow: 0 20px 40px -28px rgb(0 0 0 / 35%);
		--hw-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

		/* the names Halewell Core's modules read (calculators, CTA boxes, strip) */
		--hw-accent: var(--hw-acc); --hw-accent-2: var(--hw-acc-2); --hw-accent-ink: var(--hw-acc-ink); --hw-ink-2: var(--hw-mut); --hw-muted: var(--hw-mut); --hw-faint: #9A9A94; --hw-radius: var(--hw-r); --hw-radius-sm: var(--hw-r-sm);
		--hw-surface: var(--hw-bg); --hw-surface-2: var(--hw-paper); --hw-surface-3: var(--hw-paper-2); --hw-line-2: var(--hw-line);

		/* a panel that stands against the page: an ink block in light, a raised surface in dark */
		--hw-panel: var(--hw-ink); --hw-panel-ink: var(--hw-bg); --hw-panel-soft: color-mix(in srgb, var(--hw-bg) 72%, transparent);

		color-scheme: light;
	}
	:root[data-scheme="dark"],
	:root[data-scheme-site="dark"]:not([data-scheme="light"]) {
		--hw-bg: #141414; --hw-paper: #1D1D1B; --hw-paper-2: #262624; --hw-ink: #F3F3EF; --hw-mut: #B5B5AF; --hw-line: #2C2C2A;
		--hw-btn: #F3F3EF; --hw-btn-ink: #141414; --hw-ok: #7BC49B; --hw-warn: #E58A79;
		--hw-shadow: 0 20px 40px -24px rgb(0 0 0 / 70%);
		--hw-panel: #262624; --hw-panel-ink: var(--hw-ink); --hw-panel-soft: color-mix(in srgb, var(--hw-ink) 72%, transparent);

		color-scheme: dark;
	}

	@media (prefers-color-scheme: dark) {
		:root[data-scheme-site="auto"]:not([data-scheme="light"]) {
			--hw-bg: #141414; --hw-paper: #1D1D1B; --hw-paper-2: #262624; --hw-ink: #F3F3EF; --hw-mut: #B5B5AF; --hw-line: #2C2C2A;
			--hw-btn: #F3F3EF; --hw-btn-ink: #141414; --hw-ok: #7BC49B; --hw-warn: #E58A79;
			--hw-shadow: 0 20px 40px -24px rgb(0 0 0 / 70%);
		--hw-panel: #262624; --hw-panel-ink: var(--hw-ink); --hw-panel-soft: color-mix(in srgb, var(--hw-ink) 72%, transparent);

			color-scheme: dark;
		}
	}
	:root[data-scheme="light"], :root[data-scheme-site="light"]:not([data-scheme="dark"]) { color-scheme: light; }
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hw-header-h) + 1rem); }
body { background: var(--hw-bg); color: var(--hw-ink); font: 400 1.125rem/1.6 var(--hw-font); overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--hw-disp); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }

/* No @layer for these. theme.json writes unlayered rules for the body, the headings, every link and the
   button, and an unlayered rule beats a layered one at any specificity, so a base layer is where theme rules
   go to die: it is what left the dark scheme white and the skip link unreadable on its own background. Only
   the reset and the tokens stay in layers, because theme.json emits neither. Order does the rest: these sit
   above the components, and theme.css is enqueued after global styles. */
a { text-decoration: underline; text-decoration-color: var(--hw-acc-2); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--hw-ink); }

/* The focus ring is ink with a page-coloured halo around it, never the accent. #FFD400 is 1.43:1 against a
   white page and 1.13:1 against the accent button it most often lands on, so the ring was invisible exactly
   where it mattered, in the default light scheme, while the theme advertised accessibility-ready. Two tones
   mean one of them always contrasts with whatever sits behind: WCAG 1.4.11 wants 3:1 and this clears it on
   the page, on a dark panel and on paper. */
:focus-visible { outline: 3px solid var(--hw-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--hw-bg); border-radius: 4px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: clip; clip-path: inset(50%); border: 0; white-space: nowrap; }
.hw-skip { position: absolute; inset-inline-start: -999px; top: 0; z-index: 100; padding: 0.75rem 1rem; background: var(--hw-acc); color: var(--hw-acc-ink); font-weight: 700; text-decoration: none; border-radius: 0 0 var(--hw-r-btn) 0; }
.hw-skip:focus { inset-inline-start: 0; }
.hw-icon { width: 1.25em; height: 1.25em; vertical-align: -0.25em; flex: none; }
.hw-icon--flip { transform: scaleX(-1); }

/* The sprite itself: out of sight but still laid out, because display:none lets some browsers skip the symbols
   a later use element needs. */
.hw-sprite { position: absolute; width: 0; height: 0; overflow: clip; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- layout ---------- */
.hw-wrap { width: min(100% - 2rem, var(--hw-wide)); margin-inline: auto; }
.hw-main { min-height: 40vh; }
.hw-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hw-gap); padding-block: 1rem 3rem; align-items: start; }
.hw-content { min-width: 0; }
.single-post .hw-content { max-width: 46rem; }
.hw-layout--page .hw-content { max-width: 60rem; }

@media (width >= 1100px) {
	body.hw-has-sidebar .hw-layout { grid-template-columns: minmax(0, 1fr) var(--hw-side); }
}
.hw-side { display: none; }

@media (width >= 1100px) { body.hw-has-sidebar .hw-side { display: block; } body.hw-has-sidebar .hw-toc--inline { display: none; } }
.hw-side__in { position: sticky; top: calc(var(--hw-header-h) + 1rem); display: grid; gap: 1.25rem; }

/* ---------- header ---------- */
.hw-header { position: sticky; top: 0; z-index: 40; background: var(--hw-bg); border-bottom: 1px solid transparent; transition: background 0.25s, border-color 0.25s; }
.hw-header.is-stuck { background: var(--hw-paper); border-color: var(--hw-line); }
.hw-header__in { position: relative; display: flex; align-items: center; gap: 1rem; min-height: var(--hw-header-h); }

/* The brand takes what is left after the controls rather than pushing them off the edge, and a title too long
   for the room wraps. It was flex: none with the text on one line, so a fresh install with a long site title
   ran the header 52px past a 390px screen and the whole page scrolled sideways. Wrapping and not an ellipsis,
   because a site's own name is not something to hide. */
.hw-brand { min-width: 0; }
.hw-brand a { display: block; max-width: 100%; text-decoration: none; }
.hw-brand img, .custom-logo { display: block; height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.hw-brand__name { display: block; font-family: var(--hw-disp); font-weight: 700; font-size: 1.1rem; line-height: 1.2; letter-spacing: -0.02em; text-decoration: none; text-wrap: balance; }
.hw-nav { margin-inline: auto; }
.hw-menu { display: flex; gap: 0.125rem; list-style: none; margin: 0; padding: 0; }
.hw-menu li { position: relative; }
.hw-menu a { display: block; padding: 0.6rem 0.85rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--hw-mut); white-space: nowrap; }
.hw-menu a:hover, .hw-menu .current-menu-item > a, .hw-menu .current-menu-ancestor > a { color: var(--hw-ink); background: var(--hw-paper); }
.hw-menu .sub-menu { position: absolute; inset-inline-start: 0; top: calc(100% + 0.25rem); min-width: 220px; list-style: none; margin: 0; padding: 0.5rem; background: var(--hw-bg); border: 1px solid var(--hw-line); border-radius: var(--hw-r-sm); box-shadow: var(--hw-shadow); display: none; z-index: 5; }
.hw-menu li:hover > .sub-menu, .hw-menu li:focus-within > .sub-menu { display: block; }
.hw-menu .sub-menu a { border-radius: 8px; }
.hw-header__acts { flex: none; display: flex; align-items: center; gap: 0.25rem; margin-inline-start: auto; }
.hw-iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--hw-ink); display: grid; place-items: center; }
.hw-iconbtn:hover { background: var(--hw-paper-2); }
.hw-iconbtn .hw-icon { width: 22px; height: 22px; }
.hw-header__cta { margin-inline-start: 0.5rem; }
.hw-search { position: relative; }
.hw-search summary { list-style: none; }
.hw-search summary::-webkit-details-marker { display: none; }
.hw-search__pop { position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem); width: min(420px, 92vw); padding: 0.75rem; background: var(--hw-bg); border: 1px solid var(--hw-line); border-radius: var(--hw-r); box-shadow: var(--hw-shadow); z-index: 6; }

/* ---------- header layouts ---------- */

/* Four arrangements of one markup. Only above the menu breakpoint: below it every layout is the same brand
   and menu button, because a phone header has no room for an arrangement and three extra rules would only be
   three more ways for it to go wrong. The two that need a second row raise --hw-header-h on the document
   element rather than the body, because that is where scroll-padding-top reads it from, and an anchor that
   lands under the header is the bug this avoids. */
@media (width >= 900px) {
	html:has(body.hw-head-centred), html:has(body.hw-head-bar) { --hw-header-h: 118px; }

	/* Named areas rather than column numbers, because the brand comes first in the markup and belongs in the
	   middle column: with numbers alone, auto-placement read that as "the row is full" and dropped the menu
	   and the buttons onto a second row, which made a one-row layout 87px tall. */
	.hw-head-split .hw-header__in { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav brand acts"; }
	.hw-head-split .hw-nav { grid-area: nav; justify-self: start; margin-inline: 0; }
	.hw-head-split .hw-brand { grid-area: brand; justify-self: center; text-align: center; }
	.hw-head-split .hw-header__acts { grid-area: acts; justify-self: end; margin-inline-start: 0; }

	.hw-head-centred .hw-header__in { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". brand acts" "nav nav nav"; row-gap: 0.35rem; padding-block: 0.9rem; }
	.hw-head-centred .hw-brand { grid-area: brand; justify-self: center; text-align: center; }
	.hw-head-centred .hw-header__acts { grid-area: acts; justify-self: end; margin-inline-start: 0; }
	.hw-head-centred .hw-nav { grid-area: nav; margin-inline: 0; }
	.hw-head-centred .hw-menu { justify-content: center; }

	.hw-head-bar .hw-header__in { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand acts" "nav nav"; row-gap: 0.9rem; padding-block-start: 0.9rem; }
	.hw-head-bar .hw-brand { grid-area: brand; }
	.hw-head-bar .hw-header__acts { grid-area: acts; justify-self: end; margin-inline-start: 0; }

	/* The band runs to both edges of the window without the page scrolling sideways: the box stays inside the
	   wrap and its paint is stretched past it, then clipped to that stretch. A negative margin off 50vw would
	   have been a scrollbar's width too wide. */
	.hw-head-bar .hw-nav { grid-area: nav; margin-inline: 0; padding-block: 0.2rem; background: var(--hw-paper); box-shadow: 0 0 0 100vmax var(--hw-paper); clip-path: inset(0 -100vmax); }
	.hw-head-bar .hw-menu a:hover, .hw-head-bar .hw-menu .current-menu-item > a, .hw-head-bar .hw-menu .current-menu-ancestor > a { background: var(--hw-bg); }
}

.hw-scheme__moon { display: none; }
:root[data-scheme="dark"] .hw-scheme__sun,
:root[data-scheme-site="dark"]:not([data-scheme="light"]) .hw-scheme__sun { display: none; }
:root[data-scheme="dark"] .hw-scheme__moon,
:root[data-scheme-site="dark"]:not([data-scheme="light"]) .hw-scheme__moon { display: block; }
:root[data-scheme="light"] .hw-scheme__sun { display: block; }
:root[data-scheme="light"] .hw-scheme__moon { display: none; }

@media (prefers-color-scheme: dark) {
	:root[data-scheme-site="auto"]:not([data-scheme="light"]) .hw-scheme__sun { display: none; }
	:root[data-scheme-site="auto"]:not([data-scheme="light"]) .hw-scheme__moon { display: block; }
}
.hw-burger { display: none; }

/* mega menu panels: Halewell Core prints them under top-level items (docs/HOOKS.md); the header owns where they sit */

/* One surface, not two. The item and its chevron are one control, so the item carries the shape and both
   children stay transparent inside it: a pill on the link touching a circle on the button read as two separate
   things to click, which is what they looked like. */
.hw-menu > li.hw-has-mega { position: static; display: flex; align-items: center; padding-inline-end: 0.4rem; border-radius: 999px; }
.hw-menu > li.hw-has-mega:hover, .hw-menu > li.is-open { background: var(--hw-paper); }
.hw-menu > li.hw-has-mega:hover > a, .hw-menu > li.is-open > a { color: var(--hw-ink); background: transparent; }
.hw-header .hw-mega__btn, .hw-header .hw-mega__btn:hover, .hw-header .hw-mega__btn[aria-expanded="true"] { background: transparent; }
.hw-header .hw-mega { inset-inline: 0; top: calc(100% + 0.1rem); width: auto; max-width: 72rem; margin-inline: auto; }

@media (width <= 899px) {
	.hw-nav { position: fixed; inset: var(--hw-header-h) 0 0 0; z-index: 39; display: none; overflow: auto; padding: 1rem; background: var(--hw-bg); }
	body.hw-menu-open .hw-nav { display: block; }
	body.hw-menu-open { overflow: clip; }
	.hw-menu { flex-direction: column; gap: 0.25rem; }
	.hw-menu a { font-size: 1.25rem; padding: 0.9rem 1rem; white-space: normal; }
	.hw-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 1rem; background: transparent; }
	.hw-menu .sub-menu a { font-size: 1.05rem; color: var(--hw-mut); }
	.hw-burger { display: grid; }
	.hw-burger__close { display: none; }
	body.hw-menu-open .hw-burger__open { display: none; }
	body.hw-menu-open .hw-burger__close { display: block; }
	.hw-menu > li.hw-has-mega { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.hw-header .hw-mega { position: static; grid-column: 1 / -1; max-width: none; margin: 0 0 0.5rem; padding: 0.25rem 0 1rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
	.hw-menu .hw-mega__btn { width: 44px; height: 44px; margin: 0; }
}

@media (width <= 559px) {
	.hw-header .hw-header__cta { display: none; }
	.hw-brand img, .custom-logo { height: 36px; }
}

/* ---------- buttons, links, boxes ---------- */
.hw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.7rem 1.35rem; border: 1px solid transparent; border-radius: var(--hw-r-btn); background: var(--hw-btn); color: var(--hw-btn-ink); font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: transform 0.15s var(--hw-ease), background 0.15s; }
.hw-btn--acc { background: var(--hw-acc); color: var(--hw-acc-ink); }
.hw-btn--acc:hover { background: var(--hw-acc-2); }
.hw-btn--ghost { background: transparent; border-color: var(--hw-line); color: var(--hw-ink); }
.hw-btn--ghost:hover { background: var(--hw-paper); }
.hw-motion .hw-btn:hover { transform: translateY(-1px); }
.hw-link { font-weight: 700; }
.hw-box { background: var(--hw-paper); border-radius: var(--hw-r); padding: 1.25rem; }
.hw-box__h, .hw-widget__title { font-family: var(--hw-font); font-weight: 700; font-size: 0.85rem; color: var(--hw-mut); margin: 0 0 0.75rem; letter-spacing: 0; }

/* min-width on both: a widget is a grid item, so its automatic minimum size is its content's minimum, and a
   form control brings an intrinsic width of its own. Core's search block measures 294px that way, which pushed
   the widget 14px past a 320px sidebar and the page sideways with it, further in Firefox and WebKit than in
   Chromium. Every core widget has to fit the column it is put in. */
.hw-widget { min-width: 0; background: var(--hw-paper); border-radius: var(--hw-r); padding: 1.25rem; font-size: 0.95rem; }
.hw-widget :where(input, select, textarea) { min-width: 0; max-width: 100%; }
.hw-widget ul { margin: 0; padding-inline-start: 1.1rem; }

/* ---------- details and FAQ accordions: the theme styles native <details> wherever prose contains them ---------- */
.hw-prose details { margin: 0; background: var(--hw-paper); border-radius: var(--hw-r-sm); }
.hw-prose details + details { margin-top: 0.5rem; }
.hw-prose summary { position: relative; padding: 0.9rem 2.75rem 0.9rem 1.1rem; font-weight: 700; list-style: none; cursor: pointer; }
.hw-prose summary::-webkit-details-marker { display: none; }
.hw-prose summary::after { content: ""; position: absolute; inset-inline-end: 1.2rem; top: 50%; width: 10px; height: 10px; border-inline-end: 2px solid var(--hw-ink); border-block-end: 2px solid var(--hw-ink); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s var(--hw-ease); }
.hw-prose details[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.hw-prose summary :is(h3, h4) { display: inline; margin: 0; font: inherit; letter-spacing: 0; }
.hw-prose details > :not(summary) { margin: 0; padding-inline: 1.1rem; }
.hw-prose details > :not(summary) + :not(summary) { margin-top: 0.6rem; }
.hw-prose details > :not(summary):last-child { padding-bottom: 1rem; }
/* stylelint-disable-next-line selector-class-pattern -- WordPress core widget class */
.hw-widget h2, .widget_block h2 { font-family: var(--hw-font); font-size: 0.85rem; color: var(--hw-mut); margin: 0 0 0.75rem; letter-spacing: 0; }

/* ---------- ad slots: reserved space, never a shift ---------- */
.hw-ad { display: grid; place-items: center; margin: 1.5rem 0; min-block-size: 100px; }
.hw-ad > div { width: 100%; display: grid; place-items: center; }
.hw-ad[data-slot="after_header"], .hw-ad[data-slot="before_footer"] { min-block-size: 90px; margin: 0.75rem 0; }
.hw-ad[data-slot="sidebar"], .hw-ad[data-slot="in_content"], .hw-ad[data-slot="after_content"] { min-block-size: 250px; }
.hw-ad[data-slot="app_bar"] { min-block-size: 0; margin: 0; grid-column: 1 / -1; }
.hw-ad[data-slot="before_content"] { min-block-size: 0; margin: 0; }

/* ---------- front page ---------- */

/* The hero band is atmosphere plus one line. The atmosphere is two pseudo-elements, because a wash and a
   grain cost nothing here and would cost a frame of script on a canvas: ::before carries the colour, drifting
   on the GPU, and ::after carries the grain that stops a gradient from looking like a gradient. The line
   itself is the canvas, and it is the only part that needs to know what the numbers mean. */
.hw-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2rem);
}

/* inset 0, not a scaled overlay: a decoration that overflows its section needs the section to clip, and a
   clipping section hides real content the day someone puts something wide in it. The drift comes from the
   background position instead, which cannot leave the box. */
.hw-hero::before,
.hw-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.hw-hero::before {
	mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);

	/* Warm neutrals, no accent. The top-right layer used to be --hw-acc at 60 percent, centred exactly where the
	   header's call to action sits, so the one colour that means "click this" was spread across the whole band
	   behind the button that needs it. The accent belongs to the buttons. */
	background-image:
		radial-gradient(58% 46% at 82% 12%, color-mix(in oklab, var(--hw-warn) 10%, transparent), transparent 68%),
		radial-gradient(52% 44% at 10% 88%, color-mix(in oklab, var(--hw-ok) 14%, transparent), transparent 70%),
		radial-gradient(64% 50% at 42% 4%, color-mix(in oklab, var(--hw-paper) 92%, transparent), transparent 74%);
	background-size: 150% 150%, 150% 150%, 150% 150%;
	background-position: 70% 20%, 20% 80%, 45% 10%;
	filter: blur(6px);
}

/* Fine grain, drawn by the browser from an SVG filter rather than fetched as an image. */
.hw-hero::after {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.82" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.5"/></svg>');
	opacity: 0.16;
	mix-blend-mode: multiply;
}

:root[data-scheme="dark"] .hw-hero::after,
:root[data-scheme-site="dark"]:not([data-scheme="light"]) .hw-hero::after { mix-blend-mode: screen; opacity: 0.10; }

@media (prefers-color-scheme: dark) {
	:root[data-scheme-site="auto"]:not([data-scheme="light"]) .hw-hero::after { mix-blend-mode: screen; opacity: 0.10; }
}

@media (prefers-reduced-motion: no-preference) {
	.hw-hero::before { animation: hw-wash 38s ease-in-out infinite alternate; }
}

@keyframes hw-wash {
	from { background-position: 70% 20%, 20% 80%, 45% 10%; }
	to { background-position: 84% 34%, 6% 66%, 30% 24%; }
}

.hw-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hw-hero--text .hw-hero__in { grid-template-columns: 1fr; }
.hw-hero__title { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.8rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0; max-width: 14ch; }
.hw-hero--text .hw-hero__title { max-width: 18ch; }
.hw-lead { font-size: 1.15rem; color: var(--hw-mut); max-width: 48ch; margin: 1.25rem 0 0; }
.hw-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hw-hero__pic { background: var(--hw-paper); border-radius: var(--hw-r); padding: 0.75rem; }
.hw-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; border-radius: calc(var(--hw-r) - 0.5rem); }
.hw-sec { padding-block: clamp(1.25rem, 3vw, 2.5rem); }
.hw-sec__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.25rem; }
.hw-sec__head h2 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); letter-spacing: -0.025em; line-height: 1.1; margin: 0; }
.hw-tools__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hw-tool { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.35rem 0.85rem; align-content: start; padding: 1.25rem; overflow: clip; background: var(--hw-paper); border-radius: var(--hw-r); text-decoration: none; transition: transform 0.2s var(--hw-ease), background 0.2s, box-shadow 0.25s var(--hw-ease); }
.hw-tool::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(14rem 14rem at var(--hw-px, 50%) var(--hw-py, 0%), color-mix(in oklab, var(--hw-acc) 55%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity 0.25s var(--hw-ease);
	pointer-events: none;
}
.hw-tool > * { position: relative; }
.hw-motion .hw-tool:hover { transform: translateY(-4px); background: var(--hw-paper-2); box-shadow: 0 18px 34px -22px rgb(0 0 0 / 45%); }
.hw-motion .hw-tool:hover::before { opacity: 1; }
.hw-tool__name { font-family: var(--hw-disp); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.hw-tool__sub { color: var(--hw-mut); font-size: 0.95rem; }
.hw-tool__go { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-weight: 700; font-size: 0.95rem; }
.hw-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.hw-topic { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0.2rem 0.75rem; align-items: center; padding: 1.1rem 1.2rem; background: var(--hw-paper); border-radius: var(--hw-r); text-decoration: none; transition: background 0.2s, transform 0.2s var(--hw-ease), box-shadow 0.25s var(--hw-ease); }
.hw-topic:hover { background: var(--hw-acc); color: var(--hw-acc-ink); }
.hw-motion .hw-topic:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -18px rgb(0 0 0 / 40%); }
.hw-topic__name { font-family: var(--hw-disp); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; min-width: 0; overflow-wrap: break-word; }
.hw-topic__count { color: var(--hw-mut); font-size: 0.85rem; }
.hw-topic:hover .hw-topic__count { color: inherit; }
.hw-pillars { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--hw-paper); border-radius: var(--hw-r); }
.hw-pillars__head h2 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); letter-spacing: -0.025em; margin: 0; }
.hw-pillars__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; counter-reset: pillar; }
.hw-pillars__list li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.85rem; align-items: start; }
.hw-pillars__list li::before { counter-increment: pillar; content: counter(pillar); grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; background: var(--hw-acc); color: var(--hw-acc-ink); display: grid; place-items: center; font-family: var(--hw-disp); font-weight: 800; font-size: 0.85rem; margin-top: 0.1rem; }
.hw-pillars__list h3 { margin: 0; font-size: 1.05rem; grid-column: 2; }
.hw-pillars__list p { margin: 0.25rem 0 0; color: var(--hw-mut); font-size: 0.95rem; grid-column: 2; }

@media (width <= 899px) {
	.hw-hero__in { grid-template-columns: 1fr; }
	.hw-hero__title { max-width: none; }
	.hw-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hw-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hw-pillars { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (width <= 559px) {
	.hw-tools__grid, .hw-pillars__list { grid-template-columns: 1fr; }

	/* One tile per row: two columns leave about 100px for the name, which breaks long lane names mid-word. */
	.hw-topics { grid-template-columns: 1fr; }
	.hw-sec__head { flex-direction: column; align-items: start; gap: 0.5rem; }
}

/* ---------- cards ---------- */
.hw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
.hw-grid--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hw-list { display: grid; }
.hw-card { display: grid; gap: 0.7rem; align-content: start; }
.hw-card__im { display: block; aspect-ratio: 16 / 10; border-radius: var(--hw-r-img); overflow: clip; background: var(--hw-paper); }
.hw-card__im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--hw-ease); }
.hw-motion .hw-card:hover .hw-card__im img { transform: scale(1.04); }

/* A post with no cover is normal and a flat grey rectangle says the theme gave up. This is a deliberate
   surface built from the site's own accent, varied by position so a grid of them reads as a pattern rather
   than as three identical holes. */
.hw-card__blank { display: block; height: 100%; background: radial-gradient(115% 90% at 12% 0%, color-mix(in srgb, var(--hw-acc) 40%, transparent), transparent 62%), linear-gradient(145deg, var(--hw-paper-2), var(--hw-paper)); }
.hw-card:nth-child(3n + 2) .hw-card__blank { background: radial-gradient(120% 95% at 85% 10%, color-mix(in srgb, var(--hw-acc-2) 32%, transparent), transparent 60%), linear-gradient(200deg, var(--hw-paper-2), var(--hw-paper)); }
.hw-card:nth-child(3n) .hw-card__blank { background: radial-gradient(110% 100% at 50% 100%, color-mix(in srgb, var(--hw-acc) 30%, transparent), transparent 65%), linear-gradient(70deg, var(--hw-paper-2), var(--hw-paper)); }
.hw-card__body { display: grid; gap: 0.35rem; }
.hw-card__cat { font-size: 0.82rem; font-weight: 700; color: var(--hw-mut); text-decoration: none; width: fit-content; }
.hw-card__cat:hover { color: var(--hw-ink); }
.hw-card__title { font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.015em; margin: 0; text-wrap: pretty; }
.hw-card__title a { text-decoration: none; }
.hw-card__title a:hover { text-decoration: underline; }
.hw-card__excerpt { margin: 0; color: var(--hw-mut); font-size: 0.95rem; }
.hw-card__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0; font-size: 0.85rem; color: var(--hw-mut); }
.hw-card--row { grid-template-columns: 160px minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--hw-line); }
.hw-card--row .hw-card__im { aspect-ratio: 4 / 3; border-radius: var(--hw-r-sm); }
.hw-card--row .hw-card__title { font-size: 1.15rem; }

/* ---------- card styles ---------- */

/* Scoped to .hw-card--card, which is the grid card and only that: the lead story and the side rows have
   layouts of their own and a site-wide style must not reach into them. */
.hw-cards-boxed .hw-card--card { gap: 0; background: var(--hw-paper); border: 1px solid var(--hw-line); border-radius: var(--hw-r-sm); overflow: clip; }
.hw-cards-boxed .hw-card--card .hw-card__im { border-radius: 0; }
.hw-cards-boxed .hw-card--card .hw-card__body { gap: 0.4rem; padding: 1rem 1.1rem 1.15rem; }

.hw-cards-list .hw-grid { grid-template-columns: 1fr; gap: 0; }
.hw-cards-list .hw-card--card { grid-template-columns: 200px minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--hw-line); }
.hw-cards-list .hw-card--card .hw-card__im { aspect-ratio: 4 / 3; border-radius: var(--hw-r-sm); }
.hw-cards-list .hw-card--card .hw-card__title { font-size: 1.2rem; }

@media (width <= 899px) { .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (width <= 899px) { .hw-cards-list .hw-grid { grid-template-columns: 1fr; } }

@media (width <= 559px) { .hw-cards-list .hw-card--card { grid-template-columns: 96px minmax(0, 1fr); gap: 0.85rem; } }

@media (width <= 559px) {
	.hw-grid { grid-template-columns: 1fr; }
	.hw-card--row { grid-template-columns: 96px minmax(0, 1fr); gap: 0.85rem; }
}

/* ---------- entry (posts and pages) ---------- */
.hw-crumbs { font-size: 0.85rem; color: var(--hw-mut); }
.hw-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.hw-crumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; color: var(--hw-line); }
.hw-crumbs a { text-decoration: none; }
.hw-crumbs a:hover { text-decoration: underline; }
.hw-entry__head { display: grid; gap: 1rem; padding-block: 1rem 1.5rem; }
.hw-entry__title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0; }
.hw-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.9rem; color: var(--hw-mut); }
.hw-meta__author { font-weight: 700; color: var(--hw-ink); text-decoration: none; }
.hw-meta__author:hover { text-decoration: underline; }
.hw-entry__lede { margin: 0 0 1.75rem; }
.hw-entry__lede img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--hw-r-img); }
.hw-entry__lede figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--hw-mut); }
.hw-prose { font-size: 1.125rem; line-height: 1.65; }
.hw-prose > * { margin-block: 0; }
.hw-prose > * + * { margin-block-start: 1.15em; }
.hw-prose > :where(h2, h3, h4) { margin-block-start: 1.9em; }
.hw-prose > :where(h2, h3, h4) + * { margin-block-start: 0.6em; }
.hw-prose h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.8rem); letter-spacing: -0.025em; line-height: 1.15; }
.hw-prose h3 { font-size: 1.25rem; line-height: 1.25; }
.hw-prose h4 { font-family: var(--hw-font); font-size: 1.1rem; }
.hw-layout--page .hw-prose > :where(p, ul, ol, h2, h3, h4, h5, h6, blockquote, .wp-block-quote, .wp-block-pullquote) { max-width: var(--hw-measure); }
.hw-prose :where(ul, ol) { padding-inline-start: 1.4rem; }
.hw-prose li + li { margin-top: 0.35em; }
.hw-prose :where(img, figure img, video) { border-radius: var(--hw-r-img); }
.hw-prose figure { margin-inline: 0; }
.hw-prose figcaption { font-size: 0.85rem; color: var(--hw-mut); margin-top: 0.5rem; }
.hw-prose blockquote, .hw-prose .wp-block-quote { margin-inline: 0; padding: 0.25rem 0 0.25rem 1.25rem; border-inline-start: 4px solid var(--hw-acc); font-style: normal; }
.hw-prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.hw-prose :where(th, td) { text-align: start; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--hw-line); vertical-align: top; }
.hw-prose th { font-weight: 700; color: var(--hw-mut); font-size: 0.85rem; }
.hw-prose .wp-block-table { overflow-x: auto; }
.hw-prose hr { border: 0; border-top: 1px solid var(--hw-line); }

/* WordPress core content classes: the editor and old posts still emit these, so they are styled here rather
   than left to the block stylesheets we do not load. */
.alignleft { float: left; margin: 0.4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignnone { margin: 0; }
.hw-prose .alignwide { max-width: min(100%, 68rem); margin-inline: auto; }
.hw-prose .alignfull { max-width: none; }
.wp-caption { max-width: 100%; margin-bottom: 1.25rem; }
.wp-caption img { display: block; border-radius: var(--hw-r-img); }
.wp-caption-text, .gallery-caption { font-size: 0.85rem; color: var(--hw-mut); margin-top: 0.5rem; text-align: start; }
.screen-reader-text:focus { position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; width: auto; height: auto; padding: 0.6rem 1rem; margin: 0; clip-path: none; background: var(--hw-bg); color: var(--hw-ink); border-radius: var(--hw-r-sm); box-shadow: var(--hw-shadow); z-index: 100; }
.hw-card.sticky .hw-card__cat { color: var(--hw-ink); text-decoration: underline; text-decoration-color: var(--hw-acc-2); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
.hw-comments .bypostauthor > .comment-body { border-inline-start: 3px solid var(--hw-acc); padding-inline-start: 0.9rem; }
:where(.hw-prose, .comment-content) :where(pre, code) { background: var(--hw-paper); border-radius: var(--hw-r-sm); font-size: 0.9em; }
:where(.hw-prose, .comment-content) pre { padding: 1rem; }
:where(.hw-prose, .comment-content) code { padding: 0.1em 0.35em; }
.hw-prose .wp-block-button__link { border-radius: var(--hw-r-btn); }
.hw-prose .hw-calc, .hw-prose .hw-calc-index { max-width: none; }
.hw-pages { margin-top: 1.5rem; font-size: 0.9rem; }
.hw-entry__foot { display: grid; gap: 1rem; margin-top: 2rem; }
.hw-tags a { display: inline-block; margin: 0 0.35rem 0.35rem 0; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--hw-paper); font-size: 0.85rem; text-decoration: none; }
.hw-tags a:hover { background: var(--hw-acc); }
.hw-share { display: flex; align-items: center; gap: 0.75rem; }
.hw-share__done { font-size: 0.9rem; color: var(--hw-ok); font-weight: 700; }
.hw-author { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 2.5rem; padding: 1.25rem; background: var(--hw-paper); border-radius: var(--hw-r); }
.hw-author__avatar img, .hw-author__avatar svg { border-radius: 50%; display: block; }
.hw-author__name { margin: 0; font-weight: 700; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: baseline; }
.hw-author__name a { text-decoration: none; }
.hw-author__title { font-weight: 500; color: var(--hw-mut); font-size: 0.9rem; }
.hw-author__quals, .hw-author__bio { margin: 0.35rem 0 0; color: var(--hw-mut); font-size: 0.95rem; }
.hw-related { margin-top: 2.5rem; }
.hw-postnav .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.hw-postnav a { display: grid; gap: 0.25rem; padding: 1rem; border: 1px solid var(--hw-line); border-radius: var(--hw-r); text-decoration: none; }
.hw-postnav .nav-next { text-align: end; }
.hw-postnav__label { font-size: 0.8rem; color: var(--hw-mut); font-weight: 700; }
.hw-postnav__title { font-family: var(--hw-disp); font-size: 0.95rem; letter-spacing: -0.015em; }
.hw-toc__list { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.4rem; font-size: 0.95rem; }
.hw-toc--inline { margin: 0 0 1.5rem; padding: 0.9rem 1.1rem; background: var(--hw-paper); border-radius: var(--hw-r-sm); }
.hw-toc--inline summary { font-family: var(--hw-disp); font-weight: 700; cursor: pointer; }
.hw-toc--inline[open] summary { margin-bottom: 0.6rem; }
.hw-toc a { text-decoration: none; color: var(--hw-mut); }
.hw-toc a:hover, .hw-toc a.is-current { color: var(--hw-ink); font-weight: 700; }

@media (width <= 559px) { .hw-postnav .nav-links { grid-template-columns: 1fr; } }

/* ---------- archives, search, pagination ---------- */
.hw-archive__head { display: grid; gap: 0.75rem; padding-block: 1rem 1.75rem; max-width: 60ch; }
.hw-archive__title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0; }
.hw-archive__desc { margin: 0; }
.hw-archive__count { margin: 0; color: var(--hw-mut); font-weight: 600; font-size: 0.95rem; }
.hw-archive__author img, .hw-archive__author svg { border-radius: 50%; display: block; }
.hw-searchform { display: flex; gap: 0.5rem; }
.hw-searchform input { flex: 1; min-width: 0; padding: 0.7rem 1rem; border: 1px solid var(--hw-line); border-radius: var(--hw-r-btn); background: var(--hw-paper); color: var(--hw-ink); }
.hw-searchform .hw-btn { padding: 0.6rem 0.9rem; }
.hw-search__big form { max-width: 600px; }
.hw-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 2rem 0; }
.hw-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 0.75rem; border-radius: 999px; background: var(--hw-paper); font-weight: 700; text-decoration: none; }
.hw-pagination .page-numbers.current { background: var(--hw-acc); color: var(--hw-acc-ink); }
.hw-pagination .page-numbers.dots { background: transparent; }

/* ---------- comments ---------- */
.hw-comments { margin-top: 3rem; }
.hw-comments__title, .hw-comments__reply { font-size: 1.4rem; }
.hw-comments__list, .hw-comments__list .children { list-style: none; margin: 0; padding: 0; }
.hw-comments__list .children { padding-inline-start: 2rem; }
.hw-comments .comment-body { padding: 1rem 0; border-bottom: 1px solid var(--hw-line); font-size: 0.98rem; }
.hw-comments .comment-author img { border-radius: 50%; vertical-align: middle; margin-inline-end: 0.5rem; }
.hw-comments .comment-metadata { font-size: 0.85rem; color: var(--hw-mut); }
.hw-comments .comment-metadata a { text-decoration: none; }
.comment-form label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }
.comment-form :where(input[type="text"], input[type="email"], input[type="url"], textarea) { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--hw-line); border-radius: var(--hw-r-btn); background: var(--hw-bg); }
.comment-form p { margin: 0 0 1rem; }

/* ---------- footer ---------- */
.hw-footer { margin-top: 3rem; padding: 3rem 0 2rem; border-top: 1px solid var(--hw-line); }
body.hw-app-bar .hw-footer { padding-bottom: 6rem; }
.hw-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.hw-footer__brand img, .hw-footer .custom-logo { height: 36px; width: auto; display: block; }
.hw-footer__dis { margin: 0.85rem 0 0; color: var(--hw-mut); font-size: 0.95rem; max-width: 36ch; }
.hw-footer__h { font-family: var(--hw-font); font-size: 0.95rem; font-weight: 700; margin: 0 0 0.6rem; letter-spacing: 0; }
.hw-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.hw-footer a { text-decoration: none; color: var(--hw-mut); }
.hw-footer a:hover { color: var(--hw-ink); text-decoration: underline; }
.hw-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hw-line); font-size: 0.85rem; color: var(--hw-mut); }

/* ---------- footer layouts ---------- */

/* compact: the columns become one centred line, which is right for a small site whose footer would otherwise
   be four headings above two links each. bold: the site name sits on a filled band above the columns. */
.hw-foot-compact .hw-footer__cols { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.25rem; }
.hw-foot-compact .hw-footer__dis { max-width: 60ch; margin-inline: auto; }
.hw-foot-compact .hw-footer__h { display: none; }
.hw-foot-compact .hw-footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; }
.hw-foot-compact .hw-footer__bottom { justify-content: center; text-align: center; }

.hw-foot-bold .hw-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-foot-bold .hw-footer__brand { grid-column: 1 / -1; padding: 1.5rem; border-radius: var(--hw-r); background: var(--hw-paper); }
.hw-foot-bold .hw-footer__dis { max-width: 52ch; }

@media (width <= 899px) { .hw-footer__cols { grid-template-columns: 1fr 1fr; } .hw-footer__brand { grid-column: 1 / -1; } }

@media (width <= 559px) { .hw-footer__cols { grid-template-columns: 1fr; } }

/* a tool tile with the visitor's saved result (Halewell Core's Your numbers fills [data-tool-value] in place) */
.hw-tool.is-saved .hw-tool__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; color: var(--hw-ink); }
.hw-tool.is-saved .hw-tool__sub::before { content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--hw-acc); }
.hw-tool.is-saved .hw-tool__sub b { font-family: var(--hw-disp); font-weight: 700; font-variant-numeric: tabular-nums; }
.hw-tool.is-saved .hw-tool__sub span { font-size: 0.8rem; color: var(--hw-mut); }

/* ---------- app bar and progress ---------- */
.hw-appbar { display: none; }

@media (width <= 899px) {
	body.hw-app-bar .hw-appbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 38; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom)); background: var(--hw-paper); border-top: 1px solid var(--hw-line); }
	.hw-appbar :where(a, button) { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-height: 48px; padding: 0.4rem 0.25rem; border: 0; border-radius: 0.6rem; background: transparent; color: var(--hw-mut); font-size: 0.68rem; font-weight: 600; text-decoration: none; }
	.hw-appbar :where(a, button) .hw-icon { width: 22px; height: 22px; }
	.hw-appbar [aria-current] { color: var(--hw-ink); }
	.hw-appbar__cta { background: var(--hw-acc); color: var(--hw-acc-ink); }
	html.hw-has-anchor body.hw-app-bar .hw-appbar, html.hw-has-consent body.hw-app-bar .hw-appbar { display: none; }

	/* Scroll padding belongs to the scrolling element, which is the root and not the body. Written on the body
	   it did nothing at all, so the browser scrolled a control that took focus to the very bottom edge and the
	   app bar sat on top of it. Not while the consent bar or an anchor is up: the bar is hidden then, and Core
	   sets the padding the consent bar needs. */
	html:not(.hw-has-anchor, .hw-has-consent):has(body.hw-app-bar) { scroll-padding-bottom: 80px; }
}
.hw-progress { position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 41; pointer-events: none; }
.hw-progress i { display: block; height: 100%; background: var(--hw-acc-2); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- canvas, motion, print ---------- */
.hw-canvas .hw-main { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
	.hw-btn, .hw-tool, .hw-topic, .hw-card__im img, .hw-header { transition: none; }
}

@media print {
	.hw-header, .hw-footer, .hw-appbar, .hw-ad, .hw-side, .hw-share, .hw-postnav, .hw-comments, .hw-progress, .hw-strip { display: none; }
	body { font-size: 11pt; }
	.hw-prose a { text-decoration: none; }
}

/* ---------- front page, second pass: the live widget, the tool finder, the lead story, topic icons ---------- */
.hw-hero__aside { position: relative; }
.hw-hero--widget .hw-hero__aside { padding-bottom: 2.5rem; }

.hw-hero--widget .hw-hero__pic { margin-inline-start: 34%; }

/* The card lies over this picture's left third, so a centred crop hides whatever the picture is of. Which
   part survives is the owner's call, not a number tuned here to one photograph: --hw-hero-focus comes from
   the Customizer and defaults to the middle. */
.hw-hero--widget .hw-hero__img { aspect-ratio: 4 / 5; object-position: var(--hw-hero-focus, 50%) center; }
.hw-hero__widget { width: min(21rem, 100%); }
.hw-hero__pic + .hw-hero__widget { position: absolute; inset-inline-start: 0; bottom: 0; }
.hw-hero--widget:not(:has(.hw-hero__pic)) .hw-hero__aside { padding-bottom: 0; }
.hw-hero--widget:not(:has(.hw-hero__pic)) .hw-hero__widget { margin-inline-start: auto; }
.hw-tools__filter { position: relative; display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.25rem; }
.hw-tools__filter-icon { position: absolute; inset-inline-start: 1rem; display: grid; color: var(--hw-mut); pointer-events: none; }
.hw-tools__filter input { flex: 1; min-width: 0; min-height: 52px; padding: 0.7rem 1rem 0.7rem 3rem; border: 1px solid var(--hw-line); border-radius: var(--hw-r-btn); background: var(--hw-paper); color: var(--hw-ink); font-size: 1.05rem; }
.hw-tools__filter input::-webkit-search-cancel-button { appearance: none; }
.hw-tools__filter input:focus-visible { background: var(--hw-bg); border-color: var(--hw-ink); }
.hw-tools__all { flex: none; }
.hw-tools__none { margin: 0.5rem 0 0; color: var(--hw-mut); }
.hw-tool__icon { grid-row: 1 / 4; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hw-acc); color: var(--hw-acc-ink); transition: transform 0.2s var(--hw-ease); }
.hw-tool__icon svg { width: 22px; height: 22px; }
.hw-tool__name, .hw-tool__sub, .hw-tool__go { grid-column: 2; }
.hw-motion .hw-tool:hover .hw-tool__icon { transform: rotate(-8deg) scale(1.08); }
.hw-mag { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem 2rem; }
.hw-mag__lead { display: grid; }
.hw-mag__side { display: grid; align-content: start; }
.hw-mag__more { grid-column: 1 / -1; margin-top: 0.5rem; }
.hw-card--lead { gap: 1rem; }
.hw-card--lead .hw-card__im { aspect-ratio: 16 / 10; }
.hw-card--lead .hw-card__title { font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); line-height: 1.12; letter-spacing: -0.025em; }
.hw-card--lead .hw-card__excerpt { font-size: 1.05rem; max-width: 60ch; }
.hw-card__more { display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content; margin-top: 0.25rem; text-decoration: none; }
.hw-card__more:hover { text-decoration: underline; }
.hw-mag__side .hw-card--row { padding: 0 0 1rem; margin-bottom: 1rem; }
.hw-mag__side .hw-card--row:last-child { border-bottom: 0; margin-bottom: 0; }
.hw-mag__side .hw-card--row .hw-card__title { font-size: 1.05rem; }
.hw-topic__icon { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hw-bg); color: var(--hw-ink); transition: background 0.2s; }
.hw-topic__icon svg { width: 20px; height: 20px; }
.hw-topic__name, .hw-topic__count { grid-column: 2; }
.hw-topic:hover .hw-topic__icon { background: var(--hw-bg); }

@media (width <= 899px) {
	.hw-hero--widget .hw-hero__aside { display: grid; gap: 1rem; padding-bottom: 0; }
	.hw-hero--widget .hw-hero__pic { margin-inline-start: 0; }
	.hw-hero--widget .hw-hero__img { aspect-ratio: 16 / 11; }
	.hw-hero__pic + .hw-hero__widget { position: static; width: 100%; }
	.hw-mag { grid-template-columns: minmax(0, 1fr); }
	.hw-tools__filter { flex-wrap: wrap; }
	.hw-tools__filter input { flex-basis: 100%; }
}

/* ---------- block patterns: the classes patterns/ uses, so an inserted pattern looks designed ---------- */
.hw-prose .hw-sources { font-size: 0.95rem; color: var(--hw-mut); padding-inline-start: 1.35rem; }
.hw-prose .hw-sources li { margin-block: 0.4rem; }
.hw-prose .hw-sources a { overflow-wrap: anywhere; }

.hw-prose .hw-steps { padding-inline-start: 1.35rem; }
.hw-prose .hw-steps > li { margin-block: 0.9rem; padding-inline-start: 0.35rem; }
.hw-prose .hw-steps > li::marker { font-weight: 700; color: var(--hw-mut); }

.hw-figures { gap: 1.25rem; margin-block: 1.75rem; }
.hw-figure__num { margin: 0; font-family: var(--hw-disp); letter-spacing: -0.02em; }
.hw-figure__label { margin: 0.35rem 0 0; }

.hw-disclaimer { border-inline-start: 4px solid var(--hw-acc-2); }
.hw-prose .hw-disclaimer p:last-child { margin-bottom: 0; }

.hw-band { padding-block: clamp(2rem, 5vw, 3.5rem); }
.hw-band--paper { background: var(--hw-paper); }
.hw-band__lead { max-width: 46rem; }

.hw-trio { gap: clamp(1.25rem, 3vw, 2.5rem); }
.hw-trio h3 { margin-block: 0 0.5rem; }

/* ---------- scroll motion: sections rise as they enter, only where the browser and the visitor allow it ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* The script hides only what is below the fold when it runs, and shows it as it comes into view, so a
	   browser without the script shows the whole page. That is not enough on its own: with the script running,
	   everything below the fold is still at opacity 0 until something scrolls, which is exactly what a print
	   and a full-height render never do. The print rule below is the other half of it. */
	.hw-motion .hw-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--hw-ease), transform 0.5s var(--hw-ease); }
	.hw-motion .hw-reveal.is-in { opacity: 1; transform: none; }

	/* The children follow the section in, one after another. The parent carries the guarantee that they are
	   ever shown, so nothing here can strand a child the way the section itself used to be stranded. */
	.hw-motion .hw-reveal > * { opacity: 0; transform: translateY(12px); transition: opacity 0.45s var(--hw-ease), transform 0.45s var(--hw-ease); }
	.hw-motion .hw-reveal.is-in > * { opacity: 1; transform: none; }
	.hw-motion .hw-reveal.is-in > :nth-child(2) { transition-delay: 0.05s; }
	.hw-motion .hw-reveal.is-in > :nth-child(3) { transition-delay: 0.10s; }
	.hw-motion .hw-reveal.is-in > :nth-child(4) { transition-delay: 0.15s; }
	.hw-motion .hw-reveal.is-in > :nth-child(5) { transition-delay: 0.20s; }
	.hw-motion .hw-reveal.is-in > :nth-child(6) { transition-delay: 0.25s; }
	.hw-motion .hw-reveal.is-in > :nth-child(7) { transition-delay: 0.30s; }
	.hw-motion .hw-reveal.is-in > :nth-child(n+8) { transition-delay: 0.35s; }
}

@media print {
	.hw-motion .hw-reveal,
	.hw-motion .hw-reveal > * { opacity: 1; transform: none; }
}

/* ---------- the hidden attribute outranks every component rule above (layers put the reset below them) ---------- */
[hidden]:not([hidden="until-found"]) { display: none; }