/*
 * KEH-TECH 2027 refinement layer (docs/29). Loaded last (functions.php, handle keh-tech-2027).
 *
 * Same identity as the 2026 layer, made more disciplined: one 4px radius, solid 1px lines instead of
 * shadows, cyan as the one interactive colour (with ink text on it), amber only as a marker, flat
 * panels, and the Keycap Prompt logo. Like the 2026 layer it restyles; it hides or removes nothing.
 * Contrast (measured): text #E8EEF8 on ink 16.5:1, #A9B7CE 9.5:1, #8795AE 6.4:1, cyan 10.7:1;
 * light theme link #0A6E99 on white 5.7:1. Cyan and amber are 1.8:1 on white, so never text there.
 * Motion follows references/design.md: colour and border changes only, 150ms, no lifts.
 */

/* ---------- Tokens ---------- */
:root {
	--k-radius: 4px;
	--k-panel: #0B1528;
	--k-panel-2: #12203A;
	--k-line: #1B2A45;
	--k-line-2: #2A3C5E;
	--k-line-3: #3A4E73;
	--k-muted: #8795AE;
	--k-cyan-hover: #7ADFFF;
	--k-on-cyan: #04121F;
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--keh-radius: 4px;
	--keh-card-shadow: none;
	--keh-lift-shadow: none;
	/* Scheme-aware values; the light ones are the fallback where light-dark() is unsupported. */
	--k-panel-l: #F7F9FC;
	--k-line-l: #CAD3E0;
	--k-line-l2: #B7C3D4;
	--k-muted-l: #43516A;
}
@supports (color: light-dark(#000, #fff)) {
	/* Light values softened 26 September 2026 (Karl: too much white, navy against white hurt the eyes):
	   page #E4EAF2, cards #F7F9FC, borders #CAD3E0. Dark values unchanged. */
	html:root {
		--keh-bright: light-dark(#0A6E99, #3CD0FF);
		--keh-royal: light-dark(#0A6E99, #3CD0FF);
		--keh-deep: light-dark(#085A7D, #7ADFFF);
		--keh-focus: light-dark(#0A6E99, #3CD0FF);
		--keh-surface: light-dark(#F7F9FC, #0B1528);
		--keh-surface-2: light-dark(#EDF1F7, #101D35);
		--keh-border: light-dark(#CAD3E0, #1B2A45);
		--keh-mist: light-dark(#E4EAF2, #070E1C);
		--keh-slate: light-dark(#43516A, #A9B7CE);
		--k-panel-l: light-dark(#F7F9FC, #0B1528);
		--k-line-l: light-dark(#CAD3E0, #1B2A45);
		--k-line-l2: light-dark(#B7C3D4, #2A3C5E);
		--k-muted-l: light-dark(#43516A, #8795AE);
		--wp--preset--color--accent-3: light-dark(#0A6E99, #3CD0FF);
		--wp--preset--color--accent-5: light-dark(#E4EAF2, #070E1C);
		--wp--preset--color--deep-blue: light-dark(#085A7D, #7ADFFF);
		--keh-card-shadow: none;
		--keh-lift-shadow: none;
	}
}

/* ---------- Buttons: one shape, cyan with ink text, in both schemes ---------- */
.wp-element-button, .wp-block-button__link,
html:root .wp-element-button, html:root .wp-block-button__link,
.keh-search-submit, .keh-cookie-btn:not(.is-quiet), .keh-gate-btn {
	background: #3CD0FF !important; color: #04121F !important; border-radius: var(--k-radius) !important;
	box-shadow: none !important; transform: none !important; font-weight: 600;
	transition: background-color .15s ease;
}
.wp-element-button:hover, .wp-block-button__link:hover,
html:root .wp-element-button:hover, html:root .wp-block-button__link:hover,
.keh-search-submit:hover, .keh-cookie-btn:not(.is-quiet):hover, .keh-gate-btn:hover { background: #7ADFFF !important; color: #04121F !important; transform: none !important; }
/* The sign-up buttons on the Shell Lab preview and on gated Cache articles kept style.css's
   white text from the 1.x blue buttons (1.7:1 on cyan); their selectors outrank the rule above. */
.keh-lab-preview .keh-kb-gate-actions .wp-element-button, .keh-kb-gate-actions .wp-element-button,
.single-docs .betterdocs-content .keh-kb-gate-actions .wp-element-button { color: #04121F !important; }
.keh-btn-ghost .wp-block-button__link, html:root .keh-btn-ghost .wp-block-button__link {
	background: transparent !important; color: var(--k-on-ink) !important; box-shadow: inset 0 0 0 1px var(--k-line-3) !important;
}
.keh-btn-ghost .wp-block-button__link:hover, html:root .keh-btn-ghost .wp-block-button__link:hover { background: rgba(232,238,248,.06) !important; box-shadow: inset 0 0 0 1px #8795AE !important; }

/* ---------- Header: the Keycap Prompt lockup with the slogan under the wordmark ---------- */
.keh-header .keh-logo-2027 {
	display: inline-grid; justify-items: start; gap: 5px; line-height: 1; padding-bottom: 0; filter: none; transform: none;
}
.keh-header .keh-logo-2027:hover { filter: none; transform: none; }
.keh-header .keh-logo-2027 img { width: 191px; height: 36px; }
/* The slogan starts under the wordmark, not under the mark: the mark is 150/637 of the lockup's width. */
.keh-slogan-text {
	padding-left: 45px; font-family: var(--k-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
	color: var(--k-on-ink-2); white-space: nowrap;
}
/* Karl, 26 September 2026: SOLVED in the brand amber, like the hyphen in the wordmark. Header and footer are ink in both themes. */
.keh-solved { color: #FFB547; }
@media (max-width: 480px) {
	.keh-header .keh-logo-2027 img { width: 148px; height: 28px; }
	.keh-slogan-text { padding-left: 35px; font-size: 9px; letter-spacing: .1em; }
}
.keh-theme-toggle, .keh-header .keh-logout-button a, .keh-search-toggle, .keh-header .keh-login-button a { border-radius: var(--k-radius); }
.keh-theme-toggle, .keh-header .keh-logout-button a, .keh-search-toggle { border-color: var(--k-line); }
.keh-header .keh-login-button a { background: #3CD0FF; color: #04121F; }
.keh-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	border-radius: 0 0 var(--k-radius) var(--k-radius) !important; border: 1px solid var(--k-line-2) !important;
	background: var(--k-panel) !important; box-shadow: none !important;
}
.keh-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a { border-radius: 3px; color: var(--k-on-ink) !important; }
.keh-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a:hover,
.keh-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a:focus-visible { color: #3CD0FF !important; background: var(--k-panel-2); }
.keh-header-search { border-radius: var(--k-radius); }

/* ---------- Home: hero ---------- */
.keh-home-2027 .keh-hero {
	background-color: var(--k-ink);
	background-image: linear-gradient(rgba(148,178,230,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,178,230,.05) 1px, transparent 1px);
	background-size: 48px 48px;
	padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
	border-bottom: 1px solid var(--k-line);
}
.keh-home-2027 .keh-hero::after, .keh-home-2027 .keh-hero::before { display: none; }
.keh-home-2027 .keh-hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
/* Karl, 26 September 2026: the Patch Tuesday card sits under the section links, full width, not beside the copy.
   Wide screens lay it out as a strip: heading, four figures in a row, then 'Patch these first' beside the next date. */
.keh-home-2027 .keh-hero-grid > .keh-ptcard { grid-column: 1 / -1; margin-top: calc(-1 * clamp(.5rem, 2vw, 2rem)); }
@media (min-width: 961px) {
	.keh-home-2027 .keh-ptcard { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
	.keh-home-2027 .keh-ptcard-head, .keh-home-2027 .keh-ptcard-stats, .keh-home-2027 .keh-ptcard-scope { grid-column: 1 / -1; }   /* the scope note spans the card, under the figures */
	.keh-home-2027 .keh-ptcard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.keh-home-2027 .keh-ptcard-foot { border-left: 1px solid var(--k-line); flex-direction: column; align-items: flex-start; justify-content: center; }
}
.keh-home-2027 .keh-hero-copy { display: flex; flex-direction: column; gap: 1.6rem; }
.keh-hero-kicker { margin: 0 !important; font-family: var(--k-mono); font-size: .82rem; letter-spacing: .08em; color: var(--k-on-ink-2); }
.keh-home-2027 .keh-hero-title { margin: 0 !important; font-size: clamp(2.5rem, 5vw, 4.25rem); letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.keh-home-2027 .keh-hero-lede { max-width: 38rem; }
/* Karl, 26 September 2026: title, lede, search and examples centred as one column. */
.keh-home-2027 .keh-hero-copy { align-items: center; text-align: center; }
.keh-home-2027 .keh-hero-lede { margin-inline: auto !important; }
.keh-home-2027 .keh-hero-title, .keh-home-2027 .keh-hero-lede { text-align: center !important; }
.keh-home-2027 .keh-hero-cmd { width: 100%; margin-inline: auto !important; }
.keh-home-2027 .keh-hero-cmd .screen-reader-text { text-align: center; }
.keh-home-2027 .keh-hero-cmd .keh-search-input { text-align: left; }
.keh-home-2027 .keh-search-try { justify-content: center; }

/* The search box: the label shows, and a prompt glyph stands in for the magnifier. */
.keh-hero-cmd {
	display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; row-gap: .55rem;
	max-width: 44rem; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
.keh-hero-cmd .screen-reader-text {
	position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; margin: 0 !important; overflow: visible !important;
	grid-column: 1 / -1; font-size: .9rem; font-weight: 500; color: var(--k-on-ink);
}
.keh-hero-cmd .keh-search-icon, .keh-hero-cmd .keh-search-input, .keh-hero-cmd .keh-search-submit { grid-row: 2; }
.keh-hero-cmd .keh-search-icon { grid-column: 1; padding-left: 1.1rem; }
.keh-hero-cmd .keh-search-input { grid-column: 2; }
.keh-hero-cmd .keh-search-submit { grid-column: 3; }
/* One visual box behind the three cells of row 2. */
.keh-hero-cmd::before {
	content: ""; grid-row: 2; grid-column: 1 / -1; height: 60px; align-self: center;
	background: var(--k-panel); border: 1px solid var(--k-line-2); border-radius: var(--k-radius); z-index: 0;
}
.keh-hero-cmd:focus-within::before { border-color: #3CD0FF; }
/* Not the suggestion list: search.js appends it inside the form, and as a grid item it would widen
   column 1 and squeeze the input to zero width. It keeps its own absolute position from style.css. */
.keh-hero-cmd > :not(.screen-reader-text):not(.keh-suggest) { position: relative; z-index: 1; }
.keh-hero-cmd .keh-search-icon svg { display: none; }
.keh-hero-cmd .keh-search-icon::before { content: ">"; font-family: var(--k-mono); font-weight: 600; font-size: 1.1rem; color: #3CD0FF; }
.keh-hero-cmd .keh-search-input {
	height: 58px; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none;
	font-size: 1.05rem; color: var(--k-on-ink) !important;
}
.keh-hero-cmd .keh-search-input::placeholder { color: var(--k-muted); opacity: 1; }
.keh-hero-cmd .keh-search-submit { height: 44px; padding: 0 1.25rem; margin-right: .5rem; }
.keh-search-try { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -.4rem 0 0 !important; font-size: .9rem; color: var(--k-muted); }
.keh-search-try a {
	padding: .3rem .65rem; border: 1px solid var(--k-line); border-radius: var(--k-radius); color: var(--k-on-ink-2); text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.keh-search-try a.is-code { font-family: var(--k-mono); font-size: .82rem; }
@media (hover: hover) and (pointer: fine) { .keh-search-try a:hover { border-color: var(--k-line-3); color: var(--k-on-ink); } }

/* This month's Patch Tuesday panel ([keh_pt_card]). */
.keh-ptcard { background: var(--k-panel); border: 1px solid var(--k-line); border-radius: var(--k-radius); color: var(--k-on-ink); }
.keh-ptcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--k-line); }
.keh-ptcard-head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; color: var(--k-on-ink); }
.keh-ptcard-head span { font-family: var(--k-mono); font-size: .75rem; color: var(--k-muted); white-space: nowrap; }
/* The date comes wrapped in a <p>; the theme's paragraph margin and line height made the head 123px tall. */
.keh-ptcard-head p { margin: 0; line-height: 1.3; }
.keh-ptcard-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--k-line); }
.keh-ptcard-stat { background: var(--k-panel); padding: 1.15rem 1.5rem; }
.keh-ptcard-stat dt { font-size: .8rem; color: var(--k-on-ink-2); }
.keh-ptcard-stat dd { margin: .35rem 0 0; font-size: 2rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.keh-ptcard-stat.is-flag dd { color: #FFB547; }
.keh-ptcard-first { padding: 1.15rem 1.5rem; border-top: 1px solid var(--k-line); }
.keh-ptcard-first p { margin: 0 0 .6rem; font-size: .8rem; font-weight: 600; color: var(--k-on-ink-2); }
.keh-ptcard-first a { display: flex; justify-content: space-between; gap: 1rem; color: var(--k-on-ink); text-decoration: none; font-size: .95rem; line-height: 1.45; }
.keh-ptcard-first code { display: block; background: none; padding: 0; font-size: .8rem; color: #3CD0FF; }
/* Neutral, not amber: the "Exploited before the fix" figure above is the card's one marker, and amber
   three times in one view (with SOLVED in the header) stopped marking anything (review, 28 Sept 2026). */
.keh-ptcard-flag { align-self: start; padding: .15rem .5rem; border: 1px solid var(--k-line-3); border-radius: 3px; color: var(--k-on-ink); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.keh-ptcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--k-line); font-size: .88rem; }
.keh-ptcard-foot span { color: var(--k-on-ink-2); }
.keh-ptcard-foot a { color: #3CD0FF; font-weight: 600; text-decoration: none; }
.keh-ptcard-foot a::after { content: " \2192"; }
@media (max-width: 960px) {
	.keh-home-2027 .keh-hero-grid { grid-template-columns: minmax(0, 1fr); }
	.keh-ptcard { max-width: 34rem; }
	.keh-home-2027 .keh-ptcard { max-width: none; } /* under the full-width section links, not beside the copy */
}
@media (max-width: 480px) {
	.keh-hero-cmd .keh-search-submit { padding: 0 .85rem; margin-right: .35rem; }
	.keh-hero-cmd .keh-search-icon { padding-left: .85rem; }
}

/* ---------- Home: the three sections, one compartment grid ---------- */
.keh-home-2027 .keh-sections { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--k-line-l); }
.keh-sections-grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
	background: var(--k-line-l); border: 1px solid var(--k-line-l); border-radius: var(--k-radius); overflow: hidden;
}
.keh-section-cell { display: flex; flex-direction: column; background: var(--k-panel-l); }
.keh-section-cell .keh-card-media { margin: 0; border-bottom: 1px solid var(--k-line-l); }
.keh-section-cell .keh-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.keh-section-body { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; flex-grow: 1; }
.keh-section-body :is(h2, h3) { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -.015em; }
.keh-section-body p { margin: 0; color: var(--keh-slate); }
.keh-section-body p:not(.keh-card-link):not(.keh-section-sub) { flex-grow: 1; }
/* The plain subtitle under each section name (design review, 28 September 2026), tight to its heading. */
.keh-section-body p.keh-section-sub { margin-top: -.5rem; font-family: var(--k-mono); font-size: .8rem; letter-spacing: .01em; color: var(--k-muted-l); }
@media (max-width: 900px) { .keh-sections-grid { grid-template-columns: minmax(0, 1fr); } }
/* Phones: picture beside the text, as a list, so the three sections fit about one screen. */
@media (max-width: 600px) {
	.keh-section-cell { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; padding: 1.1rem; align-items: start; }
	.keh-section-cell .keh-card-media { border: 1px solid var(--k-line-l); border-radius: 3px; overflow: hidden; }
	.keh-section-body { padding: 0; gap: .35rem; }
	.keh-section-body :is(h2, h3) { font-size: 1.1rem; }
	.keh-section-body p { font-size: .92rem; }
}

/* ---------- Home: latest from The Advisory ---------- */
.keh-home-2027 .keh-latest { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--k-line-l); }
.keh-latest-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2.5rem; }
.keh-home-2027 .keh-latest .keh-section-title { margin: 0; text-align: left; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; }
.keh-latest-links { display: flex; gap: 1.5rem; margin: 0; font-weight: 600; }
.keh-latest-links a { text-decoration: none; }
.keh-latest-links a:first-child::after { content: " \2192"; }
.keh-latest-links a + a { color: var(--keh-slate); }
.keh-home-2027 .keh-latest .wp-block-post-template { gap: clamp(1.5rem, 3vw, 3rem); }
.keh-home-2027 .keh-post-card { display: flex; flex-direction: column; gap: .85rem; padding: 1.5rem 0 0; background: none; border: 0; border-top: 1px solid var(--k-line-l2); border-radius: 0; box-shadow: none; }
.keh-home-2027 .keh-post-card .keh-post-date { margin: 0; color: var(--k-muted-l); font-size: .8rem; }
.keh-home-2027 .keh-post-card .wp-block-post-title { margin: 0; font-size: 1.3rem; line-height: 1.3; font-weight: 600; }
.keh-home-2027 .keh-post-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.keh-home-2027 .keh-post-card .wp-block-post-title a:hover { color: var(--keh-royal); }
.keh-home-2027 .keh-post-card .wp-block-post-excerpt { margin: 0; color: var(--keh-slate); }
.keh-home-2027 .keh-post-card .wp-block-post-excerpt__excerpt { margin: 0; }

/* The Patch Tuesday card sits on the page body here, not on the dark hero: take the page's own scheme-aware colours. */
.keh-latest-pt { margin-top: clamp(2.5rem, 5vw, 4rem); }
.keh-home-2027 .keh-latest .keh-ptcard {
	--k-panel: var(--k-panel-l); --k-line: var(--k-line-l); --k-line-3: var(--k-line-l2); --k-muted: var(--k-muted-l);
	--k-on-ink: var(--keh-text); --k-on-ink-2: var(--keh-slate);
	max-width: none;
}
.keh-home-2027 .keh-latest .keh-ptcard-first code, .keh-home-2027 .keh-latest .keh-ptcard-foot a { color: var(--keh-royal); }
.keh-home-2027 .keh-latest .keh-ptcard-stat.is-flag dd { color: light-dark(#8A5A00, #FFB547); }

/* ---------- Home: Learn and Tools ---------- */
.keh-home-2027 .keh-duo { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--k-line-l); }
.keh-duo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.keh-duo-col { display: flex; flex-direction: column; gap: 1.1rem; padding-right: clamp(1.5rem, 4vw, 3.5rem); }
.keh-duo-col + .keh-duo-col { padding: 0 0 0 clamp(1.5rem, 4vw, 3.5rem); border-left: 1px solid var(--k-line-l); }
.keh-duo-col .keh-card-media { margin: 0; }
.keh-duo-col .keh-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--k-line-l); border-radius: var(--k-radius); }
.keh-duo-col h2 { margin: .5rem 0 0; font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; }
.keh-duo-col > p { margin: 0; color: var(--keh-slate); }
.keh-duo-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--k-line-l); }
.keh-duo-list li { border-bottom: 1px solid var(--k-line-l); }
.keh-duo-list a { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 0; color: inherit; text-decoration: none; transition: color .15s ease; }
.keh-duo-list a span + span { color: var(--k-muted-l); font-size: .9rem; text-align: right; }
.keh-duo-list a:hover { color: var(--keh-royal); }
.keh-duo-list-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.keh-duo-list-2 li.is-wide { grid-column: 1 / -1; }
.keh-duo-list-2 a { padding: .8rem 0; font-size: .95rem; }
@media (max-width: 900px) {
	.keh-duo-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
	.keh-duo-col, .keh-duo-col + .keh-duo-col { padding: 0; border-left: 0; }
}
@media (max-width: 600px) { .keh-duo-col .keh-card-media { display: none; } } /* decorative on phones; the text and links stay */
@media (max-width: 480px) { .keh-duo-list-2 { grid-template-columns: minmax(0, 1fr); } .keh-duo-list a span + span { display: none; } }

/* ---------- Home: _Terminal and the closing band, flat ---------- */
.keh-home-2027 .keh-lab { padding-block: clamp(3rem, 7vw, 6rem); }
.keh-lab-card, html:root .keh-lab-card { background: var(--k-ink); border: 1px solid var(--k-line); border-radius: var(--k-radius); box-shadow: none; }
.keh-lab-card:hover { transform: none; box-shadow: none; }
.keh-lab-media img { border-radius: var(--k-radius); box-shadow: none; border: 1px solid var(--k-line); }
.keh-cta-inner { background: var(--k-ink); border: 1px solid var(--k-line); border-radius: var(--k-radius); box-shadow: none; }
.keh-cta-inner::before { display: none; }
.keh-keys kbd { border-radius: var(--k-radius); border-color: var(--k-line-2); background: none; }
.keh-keys kbd.is-solved { border-color: #FFB547; color: #FFB547; }
.keh-cta-media img { border-radius: var(--k-radius); }

/* ---------- Site-wide surfaces: one radius, lines instead of shadows ---------- */
.keh-card { border-radius: var(--k-radius); box-shadow: none; transition: border-color .15s ease; }
.keh-card:hover { transform: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .keh-card:hover { border-color: var(--k-line-l2); } }
.keh-article, .keh-author, .keh-kb-related, .keh-callout, #wpforo-wrap, #wpforo-wrap #wpforo-menu, .keh-search-form, .keh-kb-search-compact,
.keh-print, .keh-tool-copy, .keh-top, .keh-share, .keh-belt-tab, .keh-search-tab, .keh-copy, .keh-cookie,
.keh-gate-check, .keh-gate-name, .keh-gate-changes, #wpforo .mce-tinymce, .keh-doc-hero .reading-time, .keh-kb-id,
.keh-kb-body .betterdocs-single-category-wrapper .betterdocs-single-category-inner { border-radius: var(--k-radius) !important; }
.keh-top, .keh-share, .keh-hero-search, .keh-kb-search-compact, .keh-cookie { box-shadow: none !important; }
.keh-cookie { border-top: 1px solid var(--k-line-2); }
.keh-kb-body .betterdocs-single-category-wrapper .betterdocs-single-category-inner { box-shadow: none !important; }
.keh-kb-body .betterdocs-single-category-wrapper .betterdocs-single-category-inner:hover { transform: none; }
.keh-page-hero { background: var(--k-ink); border-bottom: 1px solid var(--k-line); }
/* A search box in a page hero (the results page): overflow:hidden cut the suggestion list off at the
   hero's bottom edge. While the list is open, let it out downward only; clip-path still trims the
   top and sides, where the hero's decorative ::before reaches past its box. */
.keh-page-hero:has(.keh-suggest:not([hidden])) { overflow: visible; clip-path: inset(0 0 -100vh 0); z-index: 5; }
.keh-callout-cta { background: var(--k-ink); border: 1px solid var(--k-line); box-shadow: none; }
.keh-icon { border-radius: var(--k-radius); }
#wpforo-wrap #wpforo-menu ul.wpf-menu > li.wpforo-active > a, #wpforo-wrap #wpforo-menu ul.wpf-menu > li.current-menu-item > a { border-radius: 3px; }
#wpforo-wrap input[type="submit"], #wpforo-wrap input[type="button"], #wpforo-wrap button[type="submit"], #wpforo-wrap .wpf-button, #wpforo-wrap .add_wpftopic,
#wpforo #wpforo-wrap .wpf-please-login a:first-child {
	background: #3CD0FF !important; color: #04121F !important; border-radius: var(--k-radius) !important;
}
/* wpForo's own stylesheet paints #wpforo-wrap pure white with a stronger selector than style.css.
   Match the softened light cards (26 September 2026) in light mode, and the dark surface in dark
   mode: a plain #F7F9FC here kept the forum light when the site was dark (27 September). The
   forum's text and accents already follow the scheme through wpforo-colors.css. */
#wpforo #wpforo-wrap { background-color: light-dark(#F7F9FC, var(--keh-surface)) !important; }
#wpforo-wrap input[type="submit"]:hover, #wpforo-wrap input[type="button"]:hover, #wpforo-wrap button[type="submit"]:hover, #wpforo-wrap .wpf-button:hover, #wpforo-wrap .add_wpftopic:hover { background: #7ADFFF !important; color: #04121F !important; }
#wpforo-wrap .add_wpftopic *, #wpforo-wrap .wpf-button * { color: #04121F !important; }
/* The forum menu's search box: wpForo types in #666, 3.35:1 on the menu's ink (it is ink in both
   schemes), below WCAG AA. The site's on-ink text colours give about 9:1 (27 September 2026). */
#wpforo #wpforo-wrap #wpforo-menu input.wpf-search-field { color: var(--k-on-ink) !important; }
#wpforo #wpforo-wrap #wpforo-menu input.wpf-search-field::placeholder { color: var(--k-on-ink-2) !important; opacity: 1; }

/* ---------- Touch targets in the header (design review, 28 September 2026) ----------
   The menu button drew at 24x24 and the Learn and Tools submenu toggles at 9x9, under WCAG 2.5.8's
   24px minimum. The menu button gets a 44px box; the toggles get 24px without moving the text, by
   padding outwards and pulling the margin back in. */
.keh-header .wp-block-navigation__responsive-container-open,
.keh-header .wp-block-navigation__responsive-container-close {
	/* Size and centring only: display stays core's, which hides the button on wide screens. */
	min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--k-radius);
}
.keh-header .wp-block-navigation__responsive-container-open:focus-visible,
.keh-header .wp-block-navigation__responsive-container-close:focus-visible { outline: 2px solid #3CD0FF; outline-offset: 2px; }
.keh-header .wp-block-navigation-submenu__toggle {
	box-sizing: content-box; padding: 7.5px !important; margin: -7.5px -7.5px -7.5px -4px !important;
}
/* Desktop hit area to 44px tall without moving anything: an invisible strip above, below and to the right of the
   toggle (not to the left, where it would cover the Learn / Tools label link). */
.keh-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle { position: relative; }
.keh-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle::after {
	content: ""; position: absolute; top: -10px; bottom: -10px; left: 0; right: -10px;
}

/* ---------- Section subtitles in the menu (keh-tech-site.php, keh_section_subtitles) ---------- */
.keh-header .keh-nav-sub {
	display: block; margin-top: 2px; font-family: var(--k-mono); font-size: .75rem; font-weight: 500;   /* 12px: the smallest text on the site (critique, 29 Sept) */
	letter-spacing: .02em; line-height: 1.2; color: var(--k-on-ink-2); white-space: nowrap;
}
.keh-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:has(.keh-nav-sub) {
	display: flex; flex-direction: column; align-items: flex-start;
}
/* The desktop menu is one row of plain labels until there is room for the second line. With it, the
   labels share one top line and the subtitles hang under the three sections that have one. */
@media (max-width: 1299px) {
	.keh-header .wp-block-navigation__responsive-container:not(.is-menu-open) .keh-nav-sub { display: none; }
}
@media (min-width: 1300px) {
	.keh-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { align-items: flex-start; padding-top: 14px; }
}
.keh-header .wp-block-navigation__responsive-container.is-menu-open .keh-nav-sub { font-size: .8rem; margin-top: 4px; }

/* ---------- Phone menu: sign-in first, Learn and Tools folded ----------
   The overlay listed 22 links with Login last. Sign-in moves to the top; the two long lists open from
   a toggle of ours (theme.js adds .keh-sub-toggle), because core marks every submenu expanded inside
   the overlay and its own toggles do nothing there. "Learn" and "Tools" still link to their index pages. */
.keh-header .keh-sub-toggle { display: none; }
.keh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; }
.keh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-loginout { order: -1; margin-top: 0 !important; margin-bottom: .6rem; }
.keh-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu:has(> .keh-sub-toggle) { display: grid !important; grid-template-columns: 1fr auto; align-items: center; column-gap: .75rem; }
.keh-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle { display: none !important; }
.keh-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu:has(> .keh-sub-toggle) > .wp-block-navigation__submenu-container { grid-column: 1 / -1; display: none !important; }
.keh-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu:has(> .keh-sub-toggle[aria-expanded="true"]) > .wp-block-navigation__submenu-container { display: flex !important; }
.keh-header .wp-block-navigation__responsive-container.is-menu-open .keh-sub-toggle {
	display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
	color: #fff; background: none; border: 1px solid rgba(255,255,255,.2); border-radius: var(--k-radius);
	transition: border-color .15s ease;
}
.keh-header .keh-sub-toggle:focus-visible { outline: 2px solid #3CD0FF; outline-offset: 2px; }
.keh-header .keh-sub-toggle svg { width: 14px; height: 14px; transition: transform .15s ease; }
.keh-header .keh-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .keh-header .keh-sub-toggle svg { transition: none; } }

/* ---------- The Cache as one list (keh-tech-kb.php, while no category has 10 guides) ---------- */
.keh-kb-list { margin-top: 2rem; }
.keh-kb-list-title { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .75rem; font-size: 1.15rem; font-weight: 600; }
.keh-kb-list-count { font-family: var(--k-mono); font-size: .8rem; font-weight: 500; color: var(--k-muted-l); }
.keh-kb-list ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--k-line-l); border-radius: var(--k-radius); background: var(--keh-surface); }
.keh-kb-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1.5rem; padding: 1rem 1.25rem; }
.keh-kb-row + .keh-kb-row { border-top: 1px solid var(--k-line-l); }
.keh-kb-row > a { flex: 1 1 26rem; font-size: 1.05rem; font-weight: 500; line-height: 1.45; text-decoration: none; color: var(--keh-bright); }
.keh-kb-row > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.keh-kb-row-meta { display: inline-flex; flex-wrap: wrap; gap: .4rem .9rem; font-family: var(--k-mono); font-size: .76rem; color: var(--k-muted-l); white-space: nowrap; }
.keh-kb-row-cat { color: var(--keh-slate); }

/* ---------- Page titles line up with the wide column ----------
   The 404 title is a heading block, not a post title, and took the 856px content width, so it sat
   about 240px right of every other page's title (review, 28 September 2026). */
.keh-page-hero > h1.wp-block-heading.alignwide.keh-page-title { max-width: var(--wp--style--global--wide-size, 1240px) !important; }

/* ---------- One active colour ----------
   The search results' "All" filter was the 1.x royal-blue gloss, the only royal blue left on the site.
   Active filters use the interactive cyan with ink text, like every other selected control. */
.keh-search-tab[aria-current="page"] { color: #04121F; background: #3CD0FF; border-color: #3CD0FF; }
.keh-search-tab[aria-current="page"] span { color: rgba(4,18,31,.75); }

/* ---------- Advisory pagination: "1 2 Next Page" ran together ---------- */
.wp-block-query-pagination { gap: .5rem 1rem; align-items: center; }
.wp-block-query-pagination-numbers { display: inline-flex; gap: .35rem; }
.wp-block-query-pagination .page-numbers, .wp-block-query-pagination-next, .wp-block-query-pagination-previous {
	display: inline-grid; place-items: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0 .6rem;
	border: 1px solid var(--k-line-l); border-radius: var(--k-radius); text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current { background: #3CD0FF; border-color: #3CD0FF; color: #04121F; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
	.wp-block-query-pagination a.page-numbers:hover, .wp-block-query-pagination-next:hover, .wp-block-query-pagination-previous:hover { border-color: var(--k-line-l2); }
}

/* ---------- Learn: where a first-time visitor starts ---------- */
.keh-learn-start { margin: -.4rem 0 1.2rem; padding: .7rem 1rem; border: 1px solid var(--k-line-l); border-radius: var(--k-radius); background: var(--keh-surface); }

/* ---------- Footer ---------- */
.keh-footer { background: #050B17; border-top-color: var(--k-line); }
.keh-footer .keh-logo-link img { width: 191px; height: 36px; }
.keh-footer-heading { font-family: var(--k-sans) !important; letter-spacing: 0; color: var(--k-on-ink) !important; font-size: .82rem !important; font-weight: 600; }
.keh-footer-slogan { color: var(--k-on-ink-2); }
.keh-footer-base { border-top-color: var(--k-line); }
.keh-footer-heading { text-transform: none; }
/* Phones: the four link columns sit in two, under the brand column. */
@media (max-width: 781px) {
	.keh-footer .wp-block-columns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
	.keh-footer .wp-block-columns > .wp-block-column:first-child { grid-column: 1 / -1; }
}

/* ---------- Motion and preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	.keh-card, .keh-search-try a, .keh-duo-list a { transition: none; }
}
@media (prefers-contrast: more) {
	:root { --k-line: #3A4E73; --k-line-2: #5A6E93; }
}

/* ---------- Page cards and the Cache's count badges ---------- */
/* style.css gives the page's content card a fixed 20px radius; one radius everywhere. */
.keh-page-body > .wp-block-post-content, .entry-content.wp-block-post-content { border-radius: var(--k-radius) !important; box-shadow: none !important; }
.keh-kb-body .betterdocs-category-items-counts, .betterdocs-category-items-counts, .betterdocs-category-items-counts span {
	background: #3CD0FF !important; color: #04121F !important; border-radius: 3px !important;
}

/* ---------- The Cache: the pinned search bar ----------
   The bar is pinned 5.3rem down, but its background covered only its own 1240px box, so the article showed
   through the strip between it and the header (78px tall) and down both sides (Karl, 26 September 2026;
   live had it too). A full-bleed layer in the page colour now runs from under the header to just below
   the bar. It sits inside the bar's own stacking context (z-index 40), above the article, below the header. */
.keh-doc-search { isolation: isolate; }
.keh-doc-search::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	top: -1.5rem; bottom: -.6rem; left: 50%; width: 100vw; margin-left: -50vw;
	background: var(--keh-mist); border-bottom: 1px solid var(--k-line-l);
}
.keh-doc-search .keh-doc-search::before { display: none; }
/* That layer is 100vw wide, and 100vw includes the scrollbar, so the page scrolled sideways by the
   scrollbar's width (8px on the review's screens). clip, not hidden: hidden would make main a scroll
   container and the bar would stop sticking. */
.keh-main { overflow-x: clip; }
/* Contents links landed with the heading under the header and the pinned search bar. */
.single-docs :is(h2, h3, h4)[id], .single-post :is(h2, h3, h4)[id] { scroll-margin-top: 10.5rem; }

/* ---------- Guide front matter (critique, 29 September 2026) ----------
   The summary was a boxed card with a 5px side stripe inside the article card. Now it is rules above
   and below, no fill, with the secondary rows folded under "Symptoms, platforms, difficulty and more". */
.keh-kb-summary {
	padding: .25rem 0 !important; border: 0 !important; border-block: 1px solid var(--k-line-l) !important;
	border-radius: 0 !important; background: none !important;
}
.keh-kb-summary dt { letter-spacing: .02em; text-transform: none; font-size: .82rem; color: var(--k-muted-l); }
.keh-kb-more { border-top: 1px solid var(--k-line-l); }
.keh-kb-more > summary {
	cursor: pointer; padding: .7rem 0; font-size: .9rem; font-weight: 600; color: var(--keh-bright); list-style-position: inside;
}
.keh-kb-more > summary:focus-visible { outline: 2px solid var(--keh-focus); outline-offset: 2px; }
.keh-kb-more .keh-kb-summary-row:first-child { border-top: 1px solid var(--k-line-l); }
/* Reading measure: guide and article text at about 70 characters (it ran to ~103). */
.single-docs .keh-doc-content :is(p, li, blockquote), .single-post .wp-block-post-content :is(p, li, blockquote) { max-width: 70ch; }
/* Practice questions: the meta line is capitalised for the topic names, which turned
   "Question 1 of 5" into "Question 1 Of 5" (critique, 29 September 2026). */
.keh-pq-meta .keh-pq-count { text-transform: none; }
.keh-ptcard-scope { margin: 0; padding: .6rem 1.5rem; border-top: 1px solid var(--k-line); font-size: .8rem; color: var(--k-on-ink-2); }
/* Cookie banner on phones: a little less height (critique, 29 September 2026: about a fifth of the
   screen). Accept and Reject stay equal: declining must be as easy as agreeing. */
@media (max-width: 600px) {
	.keh-cookie-actions { margin-top: .6rem; gap: .4rem .6rem; }
	.keh-cookie-btn.is-quiet { min-height: 36px; padding-top: 0; padding-bottom: 0; }
}

/* ---------- The Advisory: each tile is a clipping torn from a newspaper (1 October 2026) ----------
   Category, tag and date archives only; the home page row keeps its plain columns. Same family as the rest of the site
   (IBM Plex Serif joins Sans and Mono), the site's ink and accent colours on cool newsprint, and a mono nameplate like
   the header's. The torn edge is a clip-path, which would cut off a box-shadow, so the shadows are drop-shadows on the
   list item around it. */
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex/ibm-plex-serif-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex/ibm-plex-serif-latin-400-italic.woff2") format("woff2"); }
body:is(.category, .tag, .date) .wp-block-post-template {
	--torn-a: polygon(0 0, 100% 0, 100% calc(100% - 4.8px), 97.4% calc(100% - 7.5px), 95.5% calc(100% - 2.5px), 93.7% calc(100% - 9.0px), 90.9% calc(100% - 7.3px), 88.2% calc(100% - 0.9px), 86.6% calc(100% - 4.4px), 84.2% calc(100% - 4.1px), 82.6% calc(100% - 7.0px), 79.2% calc(100% - 2.6px), 76.7% calc(100% - 0.6px), 73.5% calc(100% - 1.5px), 71.5% calc(100% - 6.9px), 69.2% calc(100% - 4.5px), 67.0% calc(100% - 1.3px), 65.2% calc(100% - 2.0px), 63.3% calc(100% - 6.0px), 60.3% calc(100% - 1.5px), 58.7% calc(100% - 2.7px), 56.7% calc(100% - 1.5px), 55.0% calc(100% - 5.0px), 52.8% calc(100% - 5.5px), 50.1% calc(100% - 0.5px), 46.8% calc(100% - 1.7px), 44.0% calc(100% - 8.1px), 42.1% calc(100% - 5.8px), 38.9% calc(100% - 2.0px), 36.4% calc(100% - 5.0px), 33.3% calc(100% - 5.9px), 29.9% calc(100% - 8.3px), 27.2% calc(100% - 1.2px), 25.5% calc(100% - 3.0px), 23.2% calc(100% - 2.5px), 19.9% calc(100% - 2.1px), 17.2% calc(100% - 3.9px), 13.9% calc(100% - 7.4px), 11.7% calc(100% - 2.3px), 8.8% calc(100% - 4.9px), 6.6% calc(100% - 5.6px), 3.3% calc(100% - 5.1px), 1.0% calc(100% - 5.4px), 0.0% calc(100% - 6.7px));
	--torn-b: polygon(0 0, 100% 0, 100% calc(100% - 5.2px), 97.8% calc(100% - 3.2px), 95.5% calc(100% - 9.2px), 93.5% calc(100% - 6.6px), 90.9% calc(100% - 2.6px), 88.5% calc(100% - 1.5px), 85.9% calc(100% - 3.1px), 82.6% calc(100% - 2.6px), 79.9% calc(100% - 2.1px), 77.0% calc(100% - 6.3px), 74.8% calc(100% - 7.1px), 72.5% calc(100% - 5.8px), 69.3% calc(100% - 8.7px), 67.3% calc(100% - 5.9px), 64.1% calc(100% - 0.8px), 61.2% calc(100% - 5.0px), 58.6% calc(100% - 0.6px), 56.7% calc(100% - 1.6px), 54.7% calc(100% - 0.6px), 51.9% calc(100% - 6.0px), 49.9% calc(100% - 8.8px), 48.0% calc(100% - 3.0px), 45.0% calc(100% - 0.6px), 42.9% calc(100% - 3.7px), 39.9% calc(100% - 0.6px), 37.7% calc(100% - 4.6px), 35.7% calc(100% - 9.1px), 33.7% calc(100% - 8.2px), 31.5% calc(100% - 7.3px), 28.9% calc(100% - 2.9px), 25.6% calc(100% - 6.0px), 23.7% calc(100% - 5.2px), 22.1% calc(100% - 1.4px), 18.8% calc(100% - 4.2px), 16.7% calc(100% - 8.8px), 15.0% calc(100% - 1.1px), 13.0% calc(100% - 6.0px), 10.0% calc(100% - 8.2px), 7.0% calc(100% - 5.2px), 5.1% calc(100% - 9.2px), 2.3% calc(100% - 1.4px), 0.0% calc(100% - 3.3px));
	--np: light-dark(#F3F4F6, #12203A); --np-under: light-dark(#D9DFE7, #0B1528);
	--np-ink: light-dark(#0B1B33, #E6EEFB); --np-ink-2: light-dark(#43516A, #A9B7CE); --np-accent: light-dark(#0A6E99, #3CD0FF);
	--np-dot: light-dark(rgba(11, 27, 51, .075), rgba(230, 238, 251, .06)); --np-fade: light-dark(rgba(70, 100, 140, .15), rgba(0, 0, 0, .30));
	--np-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --np-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
	gap: 2.2rem clamp(1.4rem, 2.6vw, 2.2rem);
}
body:is(.category, .tag, .date) .wp-block-post-template > li {
	position: relative; isolation: isolate; transition: transform .25s ease, filter .25s ease;
	filter: drop-shadow(0 1px 1px rgba(8, 18, 40, .22)) drop-shadow(0 9px 12px rgba(8, 18, 40, .20));
	transform: rotate(var(--tilt, 0deg));
}
body:is(.category, .tag, .date) .wp-block-post-template > li:nth-child(3n+1) { --tilt: -.5deg; }
body:is(.category, .tag, .date) .wp-block-post-template > li:nth-child(3n+2) { --tilt: .4deg; }
body:is(.category, .tag, .date) .wp-block-post-template > li:nth-child(3n) { --tilt: -.2deg; }
/* A second sheet peeking out from underneath gives the pile some depth. */
body:is(.category, .tag, .date) .wp-block-post-template > li::before { content: ""; position: absolute; inset: 6px -5px -3px 5px; z-index: -1; background: var(--np-under); transform: rotate(1.6deg); clip-path: var(--torn-b); }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card {
	--torn: var(--torn-a);
	display: flex; flex-direction: column; gap: .75rem; height: 100%; border: 0; border-radius: 0; box-shadow: none; transform: none; overflow: visible;
	padding: 1rem 1.4rem calc(1.5rem + 8px); color: var(--np-ink); clip-path: var(--torn);
	background:
		radial-gradient(var(--np-dot) 1px, transparent 1.3px) 0 0 / 5px 5px,
		radial-gradient(ellipse 140% 60% at 12% 0%, var(--np-fade), transparent 70%),
		radial-gradient(ellipse 120% 50% at 100% 100%, var(--np-fade), transparent 70%),
		var(--np);
}
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card::before { display: none; }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card > * { margin: 0; }
/* The nameplate: the post date block, with the paper's name in front of it, between two rules. */
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .keh-post-date {
	display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-block: .4rem .35rem; border-block: 3px double var(--np-ink);
	font: 600 .68rem/1 var(--np-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--np-ink);
}
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .keh-post-date::before { content: ">_ The Advisory"; color: var(--np-accent); }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .keh-post-date time { font-weight: 500; letter-spacing: .06em; color: var(--np-ink-2); }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .wp-block-post-title { margin: 0; padding-bottom: .6rem; border-bottom: 1px solid var(--np-ink); font: 700 1.5rem/1.14 var(--np-serif); letter-spacing: -.01em; text-wrap: balance; }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .wp-block-post-title a { color: var(--np-ink); text-decoration: none; }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .wp-block-post-title a:hover { color: var(--np-accent); }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .wp-block-post-excerpt { display: flex; flex-direction: column; flex: 1; color: var(--np-ink); }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .wp-block-post-excerpt__excerpt { font: 400 .96rem/1.55 var(--np-serif); text-align: justify; hyphens: auto; -webkit-hyphens: auto; color: var(--np-ink); }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .wp-block-post-excerpt__excerpt:not(.no-dropcap)::first-letter { float: left; font: 700 3.1rem/.82 var(--np-serif); padding: .2rem .5rem 0 0; color: var(--np-accent); }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .wp-block-post-excerpt__excerpt .keh-dropnum { float: left; font: 700 3.1rem/.82 var(--np-serif); padding: .2rem .5rem 0 0; color: var(--np-accent); }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .wp-block-post-excerpt__more-text { margin: auto 0 0; padding-top: .7rem; }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .wp-block-post-excerpt__more-link { display: block; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--np-ink); font: italic 400 .98rem/1.3 var(--np-serif); text-decoration: none; color: var(--np-accent); }
body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card .wp-block-post-excerpt__more-link::after { content: " \2192"; font-style: normal; }
@media (hover: hover) and (pointer: fine) {
	body:is(.category, .tag, .date) .wp-block-post-template > li:hover { transform: translateY(-5px) rotate(0deg); filter: drop-shadow(0 2px 2px rgba(8, 18, 40, .22)) drop-shadow(0 18px 18px rgba(8, 18, 40, .22)); }
}
@media (prefers-reduced-motion: reduce) { body:is(.category, .tag, .date) .wp-block-post-template > li { transition: none; } }
@media (forced-colors: active) { body:is(.category, .tag, .date) .wp-block-post-template .keh-post-card { clip-path: none; border: 1px solid CanvasText; } }
body:is(.category, .tag, .date) .wp-block-post-template > li:nth-child(3n+2) .keh-post-card { --torn: polygon(0 0, 100% 0, 100% calc(100% - 4.4px), 97.6% calc(100% - 3.4px), 94.9% calc(100% - 2.5px), 92.8% calc(100% - 3.9px), 90.2% calc(100% - 1.1px), 88.6% calc(100% - 8.0px), 85.9% calc(100% - 1.0px), 84.1% calc(100% - 4.3px), 82.3% calc(100% - 2.9px), 80.3% calc(100% - 8.0px), 77.2% calc(100% - 5.2px), 74.9% calc(100% - 3.9px), 72.9% calc(100% - 8.0px), 69.7% calc(100% - 8.0px), 67.9% calc(100% - 0.5px), 66.1% calc(100% - 4.5px), 63.9% calc(100% - 9.5px), 61.3% calc(100% - 3.9px), 58.3% calc(100% - 7.2px), 56.3% calc(100% - 5.5px), 53.3% calc(100% - 1.4px), 50.5% calc(100% - 1.5px), 48.6% calc(100% - 4.0px), 46.1% calc(100% - 1.9px), 42.8% calc(100% - 1.3px), 39.9% calc(100% - 6.5px), 37.8% calc(100% - 5.8px), 34.8% calc(100% - 6.0px), 32.6% calc(100% - 2.5px), 30.0% calc(100% - 5.3px), 28.1% calc(100% - 5.1px), 25.1% calc(100% - 5.9px), 22.1% calc(100% - 2.5px), 20.2% calc(100% - 2.4px), 16.8% calc(100% - 2.1px), 13.5% calc(100% - 4.7px), 10.9% calc(100% - 5.5px), 8.0% calc(100% - 9.0px), 5.9% calc(100% - 6.0px), 4.1% calc(100% - 4.0px), 1.5% calc(100% - 9.7px), 0.0% calc(100% - 3.4px)); }
body:is(.category, .tag, .date) .wp-block-post-template > li:nth-child(3n) .keh-post-card { --torn: polygon(0 0, 100% 0, 100% calc(100% - 5.0px), 96.9% calc(100% - 5.2px), 94.9% calc(100% - 2.3px), 93.0% calc(100% - 7.4px), 90.1% calc(100% - 2.8px), 87.1% calc(100% - 6.7px), 84.2% calc(100% - 7.4px), 81.1% calc(100% - 2.5px), 78.4% calc(100% - 5.7px), 76.0% calc(100% - 1.0px), 73.5% calc(100% - 3.7px), 70.2% calc(100% - 2.3px), 67.5% calc(100% - 3.0px), 65.3% calc(100% - 4.0px), 62.6% calc(100% - 1.1px), 60.1% calc(100% - 1.6px), 56.9% calc(100% - 4.8px), 54.8% calc(100% - 2.3px), 52.5% calc(100% - 4.8px), 50.2% calc(100% - 1.3px), 46.9% calc(100% - 7.6px), 44.4% calc(100% - 2.2px), 42.0% calc(100% - 7.8px), 39.7% calc(100% - 1.5px), 37.1% calc(100% - 2.8px), 34.6% calc(100% - 1.1px), 31.2% calc(100% - 6.8px), 28.8% calc(100% - 2.0px), 25.9% calc(100% - 5.9px), 22.5% calc(100% - 2.3px), 20.3% calc(100% - 3.2px), 17.5% calc(100% - 3.8px), 15.8% calc(100% - 2.9px), 13.6% calc(100% - 7.7px), 10.9% calc(100% - 2.2px), 8.5% calc(100% - 2.7px), 5.2% calc(100% - 2.9px), 2.7% calc(100% - 1.3px), 1.1% calc(100% - 8.2px), 0.0% calc(100% - 9.3px)); }

/* ---------- Cookie banner: one compact bar (critique, 3 October 2026) ----------
   It took about 27% of a desktop window and 30% of a phone, over the hero search. Wide screens now get
   the same short wording as phones, with the text on the left and Accept, Reject and Cookie settings
   in a column on the right, so it is two or three lines tall. The long wording stays in the markup and
   in the settings panel and both policies. Accept and Reject remain identical. */
.keh-cookie-long { display: none; }
.keh-cookie-brief { display: inline; }
@media (min-width: 601px) {
	.keh-cookie { padding: .8rem clamp(1rem, 4vw, 2.5rem); }
	.keh-cookie-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; }
	.keh-cookie-title { grid-column: 1; margin: 0 0 .15rem; font-size: .9rem; }
	.keh-cookie-text { grid-column: 1; font-size: .88rem; line-height: 1.5; }
	.keh-cookie-actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; flex-wrap: nowrap; }
	.keh-cookie-options { grid-column: 1 / -1; }
	.keh-cookie-btn { min-width: 7rem; padding: .5rem 1.1rem; }
}

/* Header dropdowns: wide enough that "DNS and email health check" and "SSL/TLS certificate checker" stay on one line. */
@media (min-width: 782px) {
	.keh-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container { min-width: 17.5rem !important; }
}

/* ======================================================================================
   Critique of 3 October 2026, P2 #4 and P3: hub layouts, title bands, small text, targets.
   ====================================================================================== */

/* ---------- Title band on the wide column: news posts and the Advisory archive ----------
   The band sat on the 760px text column while every other band sits on 1240. Only the band moves;
   the article card and its text keep their own measure. */
body.single-post, body.keh-section-archive { --keh-hero-w: var(--wp--style--global--wide-size, 1240px) !important; --keh-hero-pad: 0px !important; }
body.single-post .keh-page-hero > :is(.keh-page-lede, .keh-page-meta),
body.keh-section-archive .keh-page-hero > :is(.keh-page-lede, .keh-page-meta) { padding-inline-end: max(0px, calc(min(100%, var(--keh-hero-w)) - 64rem)); }

/* ---------- Learn and Tools hubs: the white panel is the 1240px column, like the title band ----------
   The panel was 1240px of content plus its padding, so it ran about 65px past the band on each side
   (and 1320px against a single tool's 918). border-box makes 1240 the outer edge. */
body.page:not(.wpforo) .keh-page-body > .wp-block-post-content:has(.keh-learn-cards, .keh-practice-cards),
body.page:not(.wpforo) .keh-page-body > .wp-block-post-content:has(#keh-tool-status) { box-sizing: border-box; }
.keh-article:has(.keh-learn-cards) { box-sizing: border-box; }

/* An odd last card no longer sits alone on its row: it takes the whole row. */
@media (min-width: 961px) { .keh-learn-cards > a:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } }
@media (min-width: 601px) and (max-width: 960px) { .keh-learn-cards > a:last-child:nth-child(2n + 1) { grid-column: 1 / -1; } }
/* Kickers are body-length strings on the path cards ("Beginner to intermediate · about 3 hours · 18 steps"),
   so they are mono sentence case, not all-caps; short codes (SY0-701) keep the capitals. */
.keh-learn-card-kicker { text-transform: none; letter-spacing: .01em; font-family: var(--k-mono); font-size: .8rem !important; font-weight: 600; }
.keh-tool-card .keh-learn-card-kicker, .keh-practice-card .keh-practice-card-code { text-transform: none; }

/* Start-here action leads the hub */
.keh-learn-start { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 2.2rem; padding: 1rem 1.2rem; border: 1px solid var(--k-line-l); border-left: 3px solid #3CD0FF; border-radius: var(--k-radius); background: var(--keh-surface-2); max-width: none; }
.keh-learn-start-q { font-family: var(--k-mono); font-size: .85rem; color: var(--k-muted-l); }
.keh-learn-start .wp-element-button { display: inline-block; padding: .55rem 1rem; text-decoration: none; }

/* Scripts and cheat sheets: compact rows, a title with its tags and a one-line summary */
.keh-learn-two .keh-learn-list li { padding: .55rem 0; }
.keh-learn-two .keh-learn-list li > a { font-size: 1rem; }
.keh-learn-two .keh-learn-item-sum { margin-top: .1rem; font-size: .85rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.keh-learn-two .keh-learn-lede { margin-bottom: .6rem; }
.keh-learn-two .keh-learn-item-tags { margin-left: .5rem; }

/* ---------- /tools/: three lead cards, the rest as compact rows ---------- */
.keh-tools-more { margin: 2rem 0 .6rem !important; font-size: 1.1rem !important; }
.keh-tools-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; border-top: 1px solid var(--k-line-l); }
.keh-tools-list li { margin: 0 !important; border-bottom: 1px solid var(--k-line-l); }
a.keh-tool-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; align-items: baseline; padding: .7rem 0; text-decoration: none; color: var(--keh-text); }
a.keh-tool-row strong { font-size: 1rem; color: var(--keh-text); }
a.keh-tool-row:hover strong, a.keh-tool-row:focus-visible strong { color: #0A6E99; text-decoration: underline; text-underline-offset: 3px; }
.keh-tool-row-tag { font-family: var(--k-mono); font-size: .75rem; color: var(--k-muted-l); text-align: right; }
.keh-tool-row-desc { grid-column: 1 / -1; font-size: .88rem; line-height: 1.45; color: var(--keh-slate); }
@media (max-width: 760px) { .keh-tools-list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a.keh-tool-row:hover strong { color: #3CD0FF; } }
:root[data-theme="dark"] a.keh-tool-row:hover strong { color: #3CD0FF; }

/* ---------- Author box: avatar, name and link close together ---------- */
.keh-author { justify-content: flex-start; gap: .6rem 1.5rem; }
.keh-author .wp-block-post-author { gap: .9rem; flex-wrap: nowrap; align-items: flex-start; flex: 1 1 18rem; min-width: 0; }
.keh-author .wp-block-post-author__avatar { margin: 0; flex: 0 0 auto; }
.keh-author .wp-block-post-author__content { flex: 1 1 0; min-width: 0; }
/* The initials tile (keh-tech-forum.php) is styled by the forum stylesheet, which does not load on
   articles, so the automatic account's "KT" floated as bare text. Same tile, scoped to the author box. */
.keh-author .keh-initials {
	display: inline-grid; place-items: center; width: var(--keh-av, 48px); height: var(--keh-av, 48px); aspect-ratio: 1;
	border: 1px solid var(--k-line-l2); border-radius: var(--k-radius); background: var(--keh-surface);
	color: var(--keh-text); font-family: var(--k-mono); font-weight: 600; font-size: 1.05rem; line-height: 1; letter-spacing: .02em;
}

/* ---------- Copy link dock ---------- */
@media (max-width: 640px) {
	/* A strip, not pills floating over the text: it owns its own row at the foot of the screen,
	   and the page gets that row back as padding so nothing at the end is hidden. */
	.keh-dock { left: 0; right: 0; bottom: 0; justify-content: space-between; gap: .5rem; padding: .4rem 1rem calc(.4rem + env(safe-area-inset-bottom, 0px)); background: var(--keh-surface); border-top: 1px solid var(--k-line-l); }
	.keh-dock:not(:has([data-show="1"])) { display: none; }
	body:has(.keh-dock [data-show="1"]) { padding-bottom: 3.4rem; }
	.keh-dock .keh-top { margin-left: auto; }
}

/* ---------- Header menu button: boxed like the search and theme buttons ---------- */
.keh-header .wp-block-navigation__responsive-container-open { border: 1px solid var(--k-line); background: transparent; color: inherit; padding: 0; }
.keh-header .wp-block-navigation__responsive-container-open:hover { border-color: var(--k-line-3); }

/* ---------- Small text ---------- */
@media (max-width: 480px) { .keh-slogan-text { font-size: 11px; letter-spacing: .04em; padding-left: 31px; } }
.keh-doc-hero .keh-kb-id .keh-kb-id-label, .keh-kb-id .keh-kb-id-label { font-size: 12px; }
.keh-script-lang, .keh-script-badge { font-size: 12px; }
.keh-script-head .keh-script-badge { font-size: 12px; }

/* ---------- Targets under 24px ---------- */
/* The cookie reopen link: 1px of padding each way, pulled back by the margin so its text stays put. */
.keh-cookie-reopen { padding-block: 2px; margin-block: -2px; min-height: 24px; box-sizing: border-box; }
a.bread-link { display: inline-flex; align-items: center; min-height: 24px; }
body.single-post .keh-page-title { text-wrap: balance; }